/* Poppins, the typeface of her YouTube banner. Served from this site: no outside request. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/poppins-400.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/poppins-500.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/poppins-500-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/poppins-600.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/poppins-700.woff2") format("woff2");
}

/* Breakpoints (a media query cannot read a variable, so they are listed here):
   520  the five-choice rows go to two columns (.segmented)
   560  more padding on the cards; the post buttons sit side by side
   640  the staff pop-ups lose their wide padding and go to one column
   700  two-column tick lists; the banner's two names side by side; below 700 the result rows stack (max-width 699)
   900  the list of parts, and the staff menu, become a left column */

/* Colours measured from her YouTube banner and logo (13 Oct 2026; recorded in the brief § 1). */
:root {
  --brand: #1505ad; /* the logo, and the "Walia Wellness" pill */
  --brand-deep: #0e0380;
  --violet: #6f63af; /* the banner's ground */
  --orchid: #ad77d5; /* the banner's highlight */
  --periwinkle: #5e78d4; /* the banner's right edge */

  --bg: #f4f2fb;
  --white: #ffffff;
  --card: #ffffff;
  --ink: #1a1740;
  --muted: #5f5b7c;
  --line: #dcd7ee;
  --field: #8f87bd; /* the edge of a box you type in or tick */
  --focus: #8a76e0;
  --accent: var(--brand);
  --accent-ink: #ffffff;
  --accent-soft: #ebe8fa;
  --error: #b3261e;
  --notice: #fff4d6;
  --tint: #f7f6fc; /* a very light violet: the ground of a disabled box or a quiet panel */
  --line-strong: #b9b6d3;
  --shadow: rgba(20, 16, 70, 0.35);
  --ink-rgb: 26 23 64; /* the ink as r g b, for shadows and backdrops: rgb(var(--ink-rgb) / 0.2) */
  --masthead-gradient: linear-gradient(100deg, #5a4fa0 0%, #8a55c4 42%, #7458c4 64%, #4c63c0 100%);

  /* Shades for status, notices and the nurse's page. Each tone: a ground (-bg), an edge (-line) and a text colour (-ink). */
  --tint-line: #ece9f5;
  --tint-soft: #faf9fe; /* the ground of the review text on the patient page */
  --accent-hover: #ddd8f5; /* a workflow step under the pointer */
  --ink-soft: #3b3760;
  --muted-soft: #6c6890; /* platform lines on a row */
  --ok-bg: #e3f4e8;
  --ok-line: #aedcbb;
  --ok-ink: #14532d;
  --info-ink: #12308a;
  --notice-line: #f0dca0;
  --notice-ink: #5c4300;
  --caution-bg: #fff1d6; /* "share with a different name": close to --notice, a little warmer */
  --caution-line: #f0c27a;
  --caution-ink: #6b3d00;
  --warn-ink: #b45309;
  --error-bg: #fde4e1;
  --error-line: #f2b8b2;
  --error-ink: #8c1d14;
  --error-wash: #fff7f6; /* a panel that holds a complaint */
  --error-wash-form: #fff6f5; /* the unticked declaration on the form; one level from --error-wash, kept as it was */
  --next: #a3192b; /* the next step in a row: dark red, so it stands out from the blue links around it */
  --next-hover: #7a1020;
  --radius: 14px;
  --radius-sm: 8px; /* fields, choices, notices */
  --radius-md: 10px; /* inner panels, tips */
  --radius-lg: 12px; /* connected rows, tiles, the menu */
  --radius-pill: 999px; /* buttons, pills */

  /* Text sizes used often. The rest are the headings and the banner names, which scale with the screen. */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-base: 15px;
  --fs-body: 16px;
  --fs-menu: 17px;
  --fs-question: clamp(17.5px, 0.5vw + 15.5px, 19px); /* the form's questions */
  /* Spacing: one 4-point scale for every padding, margin and gap. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --masthead: clamp(64px, 1.4vw + 58px, 78px); /* the height of the banner, which stays at the top */
  --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--fs-body)/1.6 var(--font);
}

/* The banner: her logo, her name and the form's name. It stays at the top of the screen.
   Her banner's gradient, a shade deeper so the white text is easy to read at every size. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--masthead);
  padding: 0 var(--space-4);
  background: var(--masthead-gradient);
  box-shadow: 0 1px 6px rgb(var(--ink-rgb) / 0.2);
}

/* Phone: the logo sits near the left edge, not in the middle. */
@media (max-width: 699px) {
  .masthead {
    justify-content: flex-start;
    padding-left: var(--space-3);
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 16px);
  min-width: 0;
  margin: 0;
  color: var(--white);
  line-height: 1.2;
}

.brand img {
  flex: none;
  width: clamp(40px, 2.2vw + 30px, 50px);
  height: auto;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.9);
}

/* Phone: the two names one above the other. */
.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand-name {
  font-size: clamp(17.5px, 1vw + 14px, 21px);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.brand-title {
  font-size: clamp(17.5px, 1vw + 14px, 21px);
  font-style: italic;
  font-weight: 500;
}

/* Wider screens: side by side on one line, with a thin rule between them. */
@media (min-width: 700px) {
  .brand-text {
      flex-direction: row;
      align-items: center;
      gap: var(--space-4);
    }

  .brand-title {
      padding-left: var(--space-4);
      border-left: 1.5px solid rgb(255 255 255 / 0.65);
    }
}

/* Nothing the page scrolls to should land under the banner. */
.question,
.step h2,
#review h1 {
  scroll-margin-top: calc(var(--masthead) + 16px);
}

main {
  min-width: 0;
}

.card,
.step {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-5);
}

h1,
h2 {
  font-family: var(--font);
  line-height: 1.25;
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: 25px;
  font-weight: 700;
}

h2:focus {
  outline: none;
}

h2 {
  font-size: 21px;
  font-weight: 600;
}

/* The title of each part of the form. */
.step h2 {
  font-size: clamp(23px, 1.2vw + 18.5px, 27px);
}

p {
  margin: 0 0 var(--space-4);
}

.meta,
.hint,
.step-count {
  color: var(--muted);
  font-size: var(--fs-base);
}

button.link {
  padding: var(--space-2) var(--space-1);
  min-height: 44px;
  color: var(--accent);
  font-size: var(--fs-base);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.question {
  border: 0;
  margin: 0 0 var(--space-6);
  padding: 0;
  min-width: 0;
}

.question:last-child {
  margin-bottom: 0;
}

.question > label:not(.choice),
.question > legend {
  display: block;
  padding: 0;
  font-size: var(--fs-question);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.question .hint {
  margin: 0 0 var(--space-3);
}

input[type="text"],
textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--white);
  border: 1px solid var(--field);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-3);
}

textarea {
  min-height: 120px;
  resize: vertical;
  overflow: hidden;
}

input[type="text"]:focus-visible,
textarea:focus-visible,
button:focus-visible,
.choice input:focus-visible,
:where(input[type="password"], input[type="search"], input[type="date"], input[type="checkbox"], input[type="radio"], select, a):where(:not(.chips input, .seg-option input)):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  margin-bottom: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.choice:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.choice input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: var(--space-1) 0 0;
  accent-color: var(--accent);
}

/* A tick list in two columns on a wide screen. */
@media (min-width: 700px) {
  .choices.two {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 var(--space-3);
    }
}

.nav,
.post-buttons {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.nav > button {
  flex: 1;
}

/* Phone: Next above Back, each as wide as the screen allows. */
@media (max-width: 559px) {
  .nav {
    flex-direction: column-reverse;
  }
}

button {
  font: inherit;
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-6);
  min-height: 48px;
  cursor: pointer;
  border: 1px solid var(--accent);
}

/* Buttons that read as text, not as the pill above: no ground and no edge. Each keeps its own size, colour and padding where it is defined.
   A new text-style button is added to this list. */
button:where(.link, .linklike, .tiny, .linktext, .copyicon, .corrlink, .logout, .remove-symptom, .stage) {
  background: none;
  border: 0;
}

button.primary {
  background: var(--accent);
  color: var(--accent-ink);
}

button.primary:hover:not(:disabled) {
  background: var(--brand-deep);
}

button.secondary {
  background: var(--card);
  color: var(--accent);
}

button.secondary:hover:not(:disabled) {
  background: var(--accent-soft);
}

button:disabled {
  opacity: 0.45;
  cursor: default;
}

.error {
  color: var(--error);
  font-weight: 600;
  margin: var(--space-4) 2px 0;
}

/* Where something is missing or wrong (plan § 45.17): the title, the message under it and the answer boxes all go red together,
   and all of it goes as soon as the answer is put right. */
.invalid > label:not(.choice),
.invalid > legend,
.invalid > .req {
  color: var(--error);
}

.field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-1) 0 var(--space-3);
  color: var(--error);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.4;
}

.field-error::before {
  content: "!";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid var(--error);
  border-radius: 50%;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

.invalid input[type="text"],
.invalid input[type="month"],
.invalid textarea {
  border-color: var(--error);
  box-shadow: 0 0 0 1px var(--error);
}

.invalid .choice:not(:has(input:checked)) {
  border-color: var(--error);
}

.invalid .segmented:not(:has(input:checked)) {
  border-color: var(--error);
}

.invalid .rate-row.recovery-row, /* the longer selector is needed: .rate-row.recovery-row, written further down, would otherwise win the border colour */
.invalid .recovery-row {
  border-color: var(--error);
  box-shadow: 0 0 0 1px var(--error);
}

.invalid .recovery-readout {
  color: var(--error);
}

.notice {
  background: var(--notice);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-3);
  font-size: var(--fs-base);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[hidden] {
  display: none !important;
}

@media (min-width: 560px) {
  .card,
    .step {
      padding: var(--space-8) var(--space-8);
    }
}

input[type="file"] {
  font: inherit;
  font-size: var(--fs-base);
  max-width: 100%;
}

button.small {
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-base);
  margin-top: var(--space-3);
}

@keyframes working-spin {
  to {
    transform: rotate(360deg);
  }
}

/* A person who asks for less motion gets none, on every page and for every rule written later. */
@media (prefers-reduced-motion: reduce) {
  *,
    ::before,
    ::after {
      transition: none !important;
      animation: none !important;
    }
}

/* "Hello Aisha," above the first heading, from the name the clinic has. */
.greeting {
  margin: 0 0 var(--space-4);
  color: var(--accent);
  font-size: 22px;
  font-weight: 600;
}

.add-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.add-row input {
  flex: 1;
  min-width: 0;
}

/* How each symptom or medication changed: the name on the left, one connected row of choices on the right; a hairline between rows. */
.rate-row {
  display: flex;
  align-items: center;
  gap: var(--space-2) var(--space-6);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}

.rate-row:first-child {
  padding-top: var(--space-1);
}

.rate-row:last-child {
  border-bottom: 0;
}

.rate-row .rate-name {
  flex: 1 1 180px;
  min-width: 0;
  margin: 0;
  font-weight: 600;
}

.rate-row .segmented {
  flex: 0 1 470px;
  margin: 0;
}

@media (max-width: 699px) {
  .rate-row {
      flex-direction: column;
      align-items: stretch;
    }

  .rate-row .rate-name,
    .rate-row .segmented {
      flex: none;
    }
}

.recovery {
  display: grid;
  gap: var(--space-2);
}

.recovery-readout {
  justify-self: center;
  min-width: 7ch;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.15rem;
  font-weight: 600;
  text-align: center;
}

.recovery.unset .recovery-readout {
  background: none;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 500;
}

.recovery-slider {
  --fill: 50%;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.recovery-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--accent) var(--fill), var(--line) var(--fill));
}

.recovery-slider::-moz-range-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--accent) var(--fill), var(--line) var(--fill));
}

.recovery-slider::-webkit-slider-thumb {
  width: 28px;
  height: 28px;
  margin-top: -10px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 4px var(--shadow);
  -webkit-appearance: none;
  appearance: none;
}

.recovery-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 4px var(--shadow);
}

.recovery.unset .recovery-slider::-webkit-slider-runnable-track {
  background: var(--line);
}

.recovery.unset .recovery-slider::-moz-range-track {
  background: var(--line);
}

.recovery.unset .recovery-slider::-webkit-slider-thumb {
  background: var(--line-strong);
}

.recovery.unset .recovery-slider::-moz-range-thumb {
  background: var(--line-strong);
}

.recovery-slider:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.recovery-marks {
  display: flex;
  justify-content: space-between;
  padding: 0 var(--space-3);
  color: var(--muted);
  font-size: var(--fs-xs);
}

.recovery-marks span {
  position: relative;
  width: 0;
  height: 18px;
  text-align: center;
}

.recovery-marks span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 5px;
  background: var(--line);
}

.recovery-marks span.major::before {
  height: 8px;
  background: var(--muted);
}

.recovery-marks span.major {
  display: flex;
  justify-content: center;
  padding-top: var(--space-2);
  white-space: nowrap;
}

.choice:has(.remove-symptom) {
  align-items: center;
}

/* How a treatment went: five connected choices in one row; the chosen one is filled. Two columns on a phone. */
.segmented {
  display: flex;
  gap: 1px;
  margin: var(--space-2) 0 var(--space-4);
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.seg-option {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  cursor: pointer;
}

.seg-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.seg-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: var(--space-2) var(--space-2);
  background: var(--white);
  font-size: var(--fs-body);
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  transition: background 0.15s, color 0.15s;
}

.seg-option:hover span {
  background: var(--accent-soft);
}

.seg-option:has(input:checked) span {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.seg-option:has(input:focus-visible) span {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

@media (max-width: 520px) {
  .segmented {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

  .seg-option:nth-child(odd):last-child {
      grid-column: 1 / -1;
    }
}