/* Self-hosted. PHI pages make no third-party requests, so no Google Fonts.
   Outfit and Manrope are variable fonts: one file covers every weight used. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/outfit-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/manrope-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('/fonts/jost-200.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/cormorant-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/cormorant-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/cormorant-italic-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* AURA portal. Mobile-first: designed at 375px, widened after. No build step. */
:root {
  /*
   * Aligned with the marketing site (ADR-043). Measured contrast is in the
   * comments: the palette was checked rather than assumed.
   */
  --ink: #0F172A;          /* 16.9:1 on the page — text and primary buttons */
  --ink-soft: #5F6E86;     /* 4.91:1 on the page, 5.17:1 on a card */
  --paper: #F8F9FA;
  --surface: #ffffff;
  --gold: #c4a163;         /* champagne. 2.31:1 — DECORATIVE ONLY, never text */
  --gold-text: #8a6a2f;    /* 4.76:1 on the page — the accent word */
  --line: #D9CEC1;         /* Earth — hairlines and dividers */
  --line-cool: #dfe4ea;
  --vitality: #A88BFF;     /* decorative only: fails contrast as text */
  --vitality-text: #5B3FA8;/* 7.1:1 on white, for any violet text */
  --celestial: #E8F2FF;    /* header gradient */
  --aurora: #C7D6FF;       /* header gradient */
  --ok: #2f6b5b;
  --err: #a1392b;
  --focus: #2b5fb8;
  --radius-field: 10px;
  --radius-card: 14px;
  --space: 1rem;
  font-size: 106.25%;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-bottom: 7rem; scroll-padding-top: 1rem; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Outfit", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 300;
  line-height: 1.5;
}
a { color: var(--ink); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--surface); padding: .5rem 1rem; z-index: 10; }

/* Header: the wordmark is the one bold element. */
.masthead { padding: 1.25rem var(--space) .5rem; max-width: 36rem; margin: 0 auto; }
.wordmark { font-size: 1.05rem; font-weight: 600; letter-spacing: .62em; margin: 0; }
.tagline { margin: .15rem 0 0; color: var(--ink-soft); font-size: .8rem; letter-spacing: .02em; }

.test-banner { background: #fff4d6; border-bottom: 1px solid #e8d49a; color: #5a4611; font-size: .85rem; padding: .6rem var(--space); text-align: center; }
/* The same sentence beside a submit button (ADR-253 D7). In the intake's
   pinned bar it takes its own row above the buttons, and the page keeps
   room for the taller bar. */
.test-note { background: #fff4d6; border: 1px solid #e8d49a; border-radius: 8px; color: #5a4611; font-size: .85rem; line-height: 1.35; margin: 0 0 .75rem; padding: .45rem .7rem; }
.actions { flex-wrap: wrap; }
.actions > .test-note { flex: 0 0 100%; max-width: 34rem; margin: 0; text-align: center; }
main:has(.actions > .test-note) { padding-bottom: 9rem; }

main { max-width: 36rem; margin: 0 auto; padding: .5rem var(--space) 6rem; }

/* Progress: a thin track in the brand accent, not numbered circles. */
.progress { display: flex; gap: 4px; margin: .75rem 0 1.5rem; }
.progress span { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.progress span.done { background: var(--vitality); }
.progress span.here { background: var(--ink); }

h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 .5rem; font-weight: 400; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 1.75rem 0 .5rem; font-weight: 500; }
.lede { color: var(--ink-soft); margin: 0 0 1.5rem; max-width: 34em; }

/* Choice cards (role, case type) */
.choices { display: grid; gap: .75rem; }
.choice {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-card);
  padding: 1rem 1.1rem; min-height: 64px;
}
.choice strong { display: block; font-size: 1.05rem; }
.choice span { color: var(--ink-soft); font-size: .92rem; }
.choice[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 4px 0 0 var(--vitality); }
.choice:hover { border-color: var(--ink-soft); }

/* Fields */
.field { margin: 0 0 1.15rem; }
.field > label, .field > legend { display: block; font-weight: 500; margin: 0 0 .35rem; font-size: .98rem; }
.field fieldset { border: 0; margin: 0; padding: 0; }
.opt { font-weight: 400; color: var(--ink-soft); }
/*
 * Everything a person reads or types in a form stays at 400, not the 300 the
 * body uses. Light weight at field size is where a light sans stops being
 * elegant and starts being hard to read, and form readability beats styling.
 */
input, select, textarea, .field > label, .field > legend, .choice, .pill, table.cases td { font-weight: 400; }
.field > label, .field > legend { font-weight: 500; }

input[type=text], input[type=email], input[type=tel], input[type=date], input[type=datetime-local], input[type=number], select, textarea {
  width: 100%; font: inherit; font-size: 1rem; /* 16px+ stops iOS zoom-on-focus */
  color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line); border-radius: var(--radius-field);
  padding: .75rem .85rem; min-height: 48px;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus, .choice:focus-visible, button:focus-visible, .pill input:focus-visible + span {
  outline: 3px solid var(--focus); outline-offset: 2px;
}
.invalid input, .invalid select, .invalid textarea { border-color: var(--err); }
.error { color: var(--err); font-size: .88rem; margin: .35rem 0 0; }

/* Radio / checkbox options as full-width tappable rows */
.pills { display: grid; gap: .5rem; }
.pill { display: flex; align-items: center; gap: .7rem; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-field); padding: .7rem .85rem; min-height: 48px; cursor: pointer; }
.pill input { width: 1.2rem; height: 1.2rem; accent-color: var(--ink); margin: 0; flex: none; }
.pill:has(input:checked) { border-color: var(--ink); background: #f0f2f6; }

/* 0-10 scale */
.scale { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.scale label { position: relative; }
.scale input { position: absolute; opacity: 0; inset: 0; }
.scale span { display: grid; place-items: center; height: 44px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface); font-variant-numeric: tabular-nums; font-size: .95rem; }
.scale input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.scale-ends { display: flex; justify-content: space-between; font-size: .8rem; color: var(--ink-soft); margin-top: .25rem; }

/* Repeater rows */
.row-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-field); padding: .75rem; margin-bottom: .5rem; display: grid; gap: .5rem; }
.row-card .remove { justify-self: end; }

/* Agreements */
.agreement { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-card); margin-bottom: 1rem; overflow: hidden; }
.agreement h3 { margin: 0; padding: .9rem 1rem; font-size: 1rem; border-bottom: 1px solid var(--line); }
.agreement .text { max-height: 14rem; overflow-y: auto; padding: .25rem 1rem; font-size: .92rem; color: var(--ink-soft); }
.agreement .agree { border-top: 1px solid var(--line); border-radius: 0; border-width: 1px 0 0; }
.draft-flag { display: inline-block; margin-left: .4rem; font-size: .75rem; font-weight: 600; color: #7a4b00; background: #fff1cc; border-radius: 4px; padding: .05rem .4rem; vertical-align: middle; }
/* This named a serif the portal never self-hosted, so it always fell back to
   Georgia. Use the serif that is actually shipped. */
.signature input { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.45rem; font-style: italic; font-weight: 400; }

/* Files */
.file-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .5rem; }
.file-list li { display: flex; justify-content: space-between; gap: .5rem; align-items: center; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-field); padding: .6rem .85rem; font-size: .92rem; }
.file-list .meta { color: var(--ink-soft); font-size: .82rem; }
.dropzone { display: block; border: 1.5px dashed var(--ink-soft); border-radius: var(--radius-card); padding: 1.25rem; text-align: center; background: var(--surface); cursor: pointer; }
.dropzone input { display: block; margin: .75rem auto 0; font-size: .95rem; max-width: 100%; }

/* Review */
.review dl { display: grid; grid-template-columns: 1fr; gap: .1rem 1rem; margin: 0; }
.review dt { color: var(--ink-soft); font-size: .85rem; margin-top: .6rem; }
.review dd { margin: 0; }
.review section { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-card); padding: .5rem 1rem 1rem; margin-bottom: .75rem; }
.review .edit { float: right; font-size: .9rem; margin-top: 1rem; }
.blockers { background: #fbecea; border: 1.5px solid #e2b3ad; border-radius: var(--radius-card); padding: .75rem 1rem; color: #6b2219; }
.blockers ul { margin: .25rem 0 0; padding-left: 1.1rem; }

/* Buttons: primary action pinned to the bottom on phones. */
.actions { position: fixed; left: 0; right: 0; bottom: 0; background: rgba(245,246,248,.96); border-top: 1px solid var(--line); padding: .75rem var(--space) calc(.75rem + env(safe-area-inset-bottom)); display: flex; gap: .75rem; justify-content: center; }
.actions > div { width: 100%; max-width: 34rem; display: flex; gap: .75rem; }
.btn {
  font: inherit; font-weight: 500;
  border-radius: 999px;          /* pill, as on the marketing site */
  padding: .8rem 1.4rem; min-height: 50px; cursor: pointer; border: 1.5px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
}
/*
 * The trailing arrow. The "/ ''" gives it empty alternative text, so a screen
 * reader announces the button's words and not "right arrow".
 */
.btn-primary::after { content: "\2192" / ""; font-size: 1.05em; line-height: 1; }
.btn-primary { background: var(--ink); color: #fff; flex: 1; }
.btn-primary[disabled] {
  background: #e6e9ee;
  border-color: #cdd3dc;
  color: var(--ink-soft);   /* 6.14:1 on that background */
  cursor: not-allowed;
}
.btn-primary[disabled]:hover { background: #e6e9ee; }
.btn-quiet { background: transparent; color: var(--ink); }
.link-btn { background: none; border: 0; padding: .25rem 0; font: inherit; color: var(--ink); text-decoration: underline; cursor: pointer; min-height: 44px; }

.done { text-align: left; padding-top: 1rem; }
.case-number { font-size: 2.1rem; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; margin: .25rem 0 1rem; border-left: 4px solid var(--vitality); padding-left: .75rem; }

/* Staff screens */
.staff-wrap { max-width: 72rem; margin: 0 auto; padding: 1rem var(--space) 3rem; }

/*
 * The staff header ran its links into the signed-in name at phone width. It
 * wraps now, and every link keeps a 44px target. The rep and supplier
 * portals share this class and keep their links in the header.
 */
.masthead--staff { flex-wrap: wrap; gap: .25rem 1rem; }
/* Wraps: seven links do not fit across a phone, and did not before the
   seventh either — the row simply ran off the side of the screen. */
.masthead--staff nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; flex: 1 1 auto; }
/* The staff layout's header only (ADR-242): its links moved into .staff-nav,
   and it keeps the wordmark and the account's two actions, full width, its
   contents starting where the shell's do (centred 80rem, less its padding). */
.masthead--staff-shell {
  display: flex; justify-content: space-between; align-items: center;
  max-width: none;
  padding-left: max(var(--space), calc((100% - 80rem) / 2 + var(--space)));
  padding-right: max(var(--space), calc((100% - 80rem) / 2 + var(--space)));
}
.masthead--staff form { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.masthead--staff .link-btn { min-height: 44px; display: inline-flex; align-items: center; }
table.cases { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius-card); overflow: hidden; font-size: .93rem; }
table.cases th, table.cases td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.cases th { font-weight: 600; color: var(--ink-soft); font-size: .82rem; }
.table-scroll { overflow-x: auto; }
/*
 * The badge sits inside the h1, which is uppercase serif, so without this it
 * gets shouted as READY FOR CLINICAL REVIEW — the same fault ADR-035 fixed on
 * the party label. A status is a sentence, not a shout.
 */
.badge {
  display: inline-block; border-radius: 999px; padding: .1rem .7rem; font-size: .8rem; background: #eef1f5;
  font-family: "Outfit", "Manrope", system-ui, sans-serif;
  font-weight: 500; text-transform: none; letter-spacing: normal;
  vertical-align: middle;
}
.badge.ready_for_review { background: #e3f0ec; color: var(--ok); }
.badge.needs_information, .badge.needs_signature { background: #fff1cc; color: #6b4a00; }
.badge.protocol_received { background: #e8e3fb; color: #4a2f8f; }   /* 8.03:1 */
.badge.pricing { background: #e3f0ec; color: #1f5346; }             /* 7.53:1 */
.badge.sent_to_physician { background: #e6edf7; color: #2b4a75; }   /* 7.62:1 */

/* Credential expiry: green, amber, red — and grey for a date nobody entered.
   The colour is the fast read and never the only one: every one of these
   badges carries the status in words, because a red pill is invisible to a
   reader who cannot tell it from the green one. Measured. */
.badge.ok { background: #e3f0ec; color: #1f5346; }                  /* 7.53:1 */
.badge.warn { background: #fff1cc; color: #6b4a00; }                /* 7.18:1 */
.badge.bad { background: #fbe4e4; color: #7a1c1c; }                 /* 8.62:1 */
.badge.unknown { background: #eef1f5; color: #4a4f57; }             /* 7.28:1 */
.panel { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-card); padding: 1rem; margin-bottom: 1rem; }

/* Money: label left, amount right, tabular figures so columns of digits line
   up. A total that wraps is a total someone can misread. */
.totals { margin: .7rem 0 0; }
.totals p { display: flex; justify-content: space-between; gap: 1rem; margin: .2rem 0; }
.totals p span + span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.totals .totals-due { border-top: 1px solid var(--line); margin-top: .4rem; padding-top: .4rem; font-weight: 500; }
.grid-2 { display: grid; gap: 1rem; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 2fr 1fr; } }

@media (min-width: 640px) {
  h1 { font-size: 1.9rem; }
  .review dl { grid-template-columns: 11rem 1fr; }
  .review dt { margin-top: .5rem; }
  .review dd { margin-top: .5rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }


/* ---------------------------------------------------------------- branding */

/* Wordmark: thin geometric sans, wide tracking, with the descriptor beneath. */
.wordmark {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 200;
  letter-spacing: .42em;
  text-indent: .42em;      /* keeps the tracked word optically centred */
  color: var(--ink);
  margin: 0;
  line-height: 1.05;
}
.wordmark-descriptor {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 200;
  font-size: .58rem;
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: .15rem 0 0;
}
.wordmark-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: .95rem;
  color: var(--ink-soft);
  margin: .1rem 0 0;
}

/* A soft gradient behind the header only. */
.masthead {
  background: linear-gradient(135deg, var(--celestial) 0%, var(--aurora) 100%);
  border-bottom: 1px solid var(--line);
}

/* h1 only. Body copy stays a readable sans: form usability beats style. */
h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  letter-spacing: .03em;   /* caps, tracked tighter than the .06em of ADR-025 */
  text-transform: uppercase;
  line-height: 1.2;
}

/*
 * The eyebrow: a short rule, then a small-caps label, above a major heading.
 * 11px with .18em of tracking is the ~2px the marketing site uses.
 */
.eyebrow {
  display: flex; align-items: center; gap: .55rem;
  font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 .4rem;
}
.eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: var(--gold); flex: none; }

/*
 * One accent word, in italic serif champagne. --gold itself is 2.31:1 and
 * never carries text; --gold-text is the same colour family at 4.76:1.
 */
.accent {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-weight: 400;
  color: var(--gold-text);
  text-transform: none; letter-spacing: 0;
}

/* Navigation reads at 500, like the marketing site's nav and buttons. */
.link-btn, .masthead a { font-weight: 500; }

/* Vitality is decorative. It never carries text. */
.progress .here { background: var(--vitality); }
.choice[aria-pressed="true"], .choice:focus-visible { border-color: var(--vitality); }
.document-body { line-height: 1.6; }
.document-body h1, .document-body h2 { font-size: 1.15rem; }


/* The first screen has nothing behind it, so its action bar carries only the
   forward action and the button fills the bar. */
.actions--single > div { justify-content: stretch; }
.actions--single .btn-primary { width: 100%; }

/* Bill to and ship to, side by side and unmistakably different. Reading one
   for the other is a disclosure, so they do not look alike. */
.addresses { display: grid; gap: var(--space); }
@media (min-width: 40rem) { .addresses { grid-template-columns: 1fr 1fr; } }
.address-block { border-left: 5px solid var(--line); }
.address-block--bill { border-left-color: var(--ink-soft); background: #fbfbfc; }
.address-block--ship { border-left-color: var(--vitality); }
.address-type {
  /* No text-transform. Upper-casing a party type makes "Clinic / Provider"
     read as CLINIC / PROVIDER, which is indistinguishable from the raw enum
     this label exists to replace. */
  font-size: .8rem; letter-spacing: .02em; font-weight: 600;
  color: var(--ink-soft); margin: 0 0 .4rem;
}

/*
 * The regulatory non-approval notice.
 *
 * Prominent, and specifically NOT smaller than the body text around it: the
 * client's compliance document requires the notice, and a notice set in 11px
 * under a price table is a notice in name only. 1rem is the floor and
 * `RegulatoryNoticeTest` asserts that this rule still says so.
 */
/*
 * A passage quoted off somebody else's document.
 *
 * Deliberately not .notice-regulatory. That one is amber and is AURA's own
 * FDA notice; a supplier's intended-use statement styled the same way reads
 * as a warning this company is issuing, when it is a sentence this company is
 * repeating and has no view on. So: neutral, bordered, and at body size,
 * because "not buried in an attachment" is a property of the stylesheet as
 * much as of the markup. See ADR-067.
 */
.notice-document {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);                    /* 13.7:1 on the background below */
  background: #eef1f5;
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-soft);
  border-radius: var(--radius-field);
  padding: .7rem .9rem;
}
.notice-document blockquote {
  font-weight: 500;
  border-left: 3px solid var(--ink-soft);
  padding-left: .7rem;
  margin: .3rem 0 0;
}

.notice-regulatory {
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink);
  background: #fff4d6;
  border: 1px solid #e8d49a;
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-field);
  padding: .9rem 1.1rem;
  margin: 0 0 1.25rem;
  max-width: 46rem;
}

/*
 * Physician testimonials.
 *
 * The quote is the largest thing in the block and the disclosure sits directly
 * under it at body size — not smaller, for the same reason the non-approval
 * notice is not smaller: a disclosure set in fine print is a disclosure in
 * name only, and the FTC's guides ask for it clear and near the endorsement.
 */
.testimonials {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 1rem;
  /* One measure for the whole block: the quote, the claim above it and the
     notice below it all stop at the same place. Uncapped, a quote on the
     marketing page ran to a single 1100px line, which is unreadable and looked
     nothing like the rest of the site. */
  max-width: 46rem;
}
.testimonial {
  margin: 0;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.15rem 1.25rem;
}
.testimonial blockquote {
  margin: 0 0 .9rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--ink);
}
.testimonial blockquote::before { content: "\201C"; color: var(--gold-text); }
.testimonial blockquote::after { content: "\201D"; color: var(--gold-text); }
.testimonial figcaption { display: grid; gap: .15rem; }
.testimonial-name { font-weight: 600; color: var(--ink); }
.testimonial-title, .testimonial-practice { color: var(--ink-soft); font-size: .95rem; }
.testimonial-disclosure {
  margin: .9rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--line);
  font-size: 1rem;
  color: var(--ink);
}

/*
 * The credential claim. Rendered only while the physician records make it
 * true, so it is styled as a statement of fact rather than as a badge.
 */
.credential-claim {
  margin: 0 0 1.5rem;
  padding: .9rem 1.1rem;
  border-left: 3px solid var(--gold);
  background: var(--surface);
  color: var(--ink);
  max-width: 46rem;
}

/*
 * Appointments.
 *
 * The participant kind is a badge rather than a sentence: a coordinator has to
 * be able to tell at a glance whether the physician on an appointment can
 * actually open the case, and "read the line carefully" is not a design.
 */
.participants { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .3rem; }
.participants li { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; font-size: .9rem; }
.participant-role { color: var(--ink-soft); min-width: 7rem; }
.participant-name { font-weight: 600; color: var(--ink); }
.kind { font-size: .72rem; font-weight: 600; border-radius: 4px; padding: .05rem .4rem; white-space: nowrap; }
.kind-entitled { color: #1f4f3f; background: #dff1e8; border: 1px solid #a9d5c3; }
.kind-recorded { color: #5a4611; background: #fff1cc; border: 1px solid #e8d49a; }

.appointment { padding: .85rem 0; border-bottom: 1px solid var(--line); }
.appointment:last-of-type { border-bottom: 0; }
.appointment-past { opacity: .72; }

.schedule { display: grid; gap: 1rem; }
.schedule-day { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-card); padding: .9rem 1rem; }
.schedule-day h2 { margin: 0 0 .5rem; font-size: 1rem; }
.schedule-item { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; padding: .45rem 0; border-top: 1px solid var(--line-cool); }
.schedule-item:first-of-type { border-top: 0; }
.schedule-cancelled { opacity: .6; }
@media (min-width: 60rem) {
  .schedule { grid-template-columns: repeat(7, 1fr); gap: .6rem; }
  .schedule-day { padding: .7rem .6rem; }
  .schedule-item { display: block; }
}

/* Secure messages (ADR-101): the patient's side and the staff thread. */
.notice { background: #f1f4f9; border-radius: var(--radius-field); padding: .65rem .85rem; font-size: .92rem; color: var(--ink-soft); }
.thread-list { display: grid; gap: .4rem; margin: 0 0 1rem; }
.thread-list a { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .6rem .85rem; border: 1.5px solid var(--line); border-radius: var(--radius-field); background: var(--surface); text-decoration: none; }
.thread-list a[aria-current="page"] { border-color: var(--ink); }
.messages { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .65rem; }
.message { max-width: 34rem; border-radius: var(--radius-card); padding: .6rem .85rem; overflow-wrap: anywhere; }
.message.theirs { background: var(--surface); border: 1.5px solid var(--line-cool); }
.message.mine { background: #e8edfb; justify-self: end; }
.message-meta { margin: 0; font-size: .8rem; color: var(--ink-soft); }
.message-body { margin: .25rem 0 0; white-space: pre-line; }
.message-flag { display: inline-block; font-size: .78rem; font-weight: 500; padding: .1rem .45rem; border-radius: 999px; background: #fff1cc; color: #6b4a00; }
.message-flag.bad { background: #f8e9e6; color: var(--err); }
.message-meta .message-flag.bad { display: table; margin-top: .3rem; }
@media (min-width: 40rem) { .messages { gap: .8rem; } }

/* ---------------------------------------------------------------- staff navigation (ADR-242)
   One <nav>, three shapes, no script. A phone (to 640px) gets a solid bar
   floating over the bottom of the screen inside the safe area: Cases,
   Messages, Schedule and More, the role's other links display: none there
   and listed on the More page, so a screen reader is given one set at each
   width. From 641px every link shows, in its group, as a wrapping row under
   the header; from 1024px the groups stand as a sidebar beside the page.
   Solid, never glass: the portal has no glass layer. The current page is a
   filled capsule with an ink edge and heavier type, so it is never told by
   its fill alone; forced colours give it a thick edge and an underline. */
.staff-nav {
  position: fixed; z-index: 10;
  left: max(.75rem, env(safe-area-inset-left));
  right: max(.75rem, env(safe-area-inset-right));
  bottom: max(.75rem, env(safe-area-inset-bottom));
  display: flex; align-items: stretch; gap: .25rem;
  padding: .3rem;
  background: var(--surface);
  border: 1px solid var(--line-cool);
  border-radius: 1.4rem;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .14), 0 1px 3px rgba(15, 23, 42, .08);
}
.staff-nav__group, .staff-nav__list { display: contents; }
.staff-nav__list { list-style: none; margin: 0; padding: 0; }
.staff-nav__label { display: none; }
.staff-nav__item { display: none; }
.staff-nav__item--tab { display: flex; flex: 1 1 0; min-width: 0; }
.staff-nav__link {
  position: relative;
  display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  min-height: 44px; min-width: 44px;
  padding: .35rem .25rem;
  border: 1.5px solid transparent;
  border-radius: 1.1rem;
  color: var(--ink); text-decoration: none;
  font-size: .76rem; font-weight: 500; line-height: 1.2;
  transition: background-color .15s ease, border-color .15s ease;
}
.staff-nav__link:hover { background: #eef1f5; }
.staff-nav__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.staff-nav__link[aria-current] { background: var(--celestial); border-color: var(--ink); font-weight: 600; }
.staff-nav__text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-nav__icon { width: 1.5rem; height: 1.5rem; flex: none; }
/* On a tab the count is a small bubble by the icon; its word stays for a screen reader ("Messages 2 to call"). */
.staff-nav__item--tab .nav-count { position: absolute; top: .1rem; left: calc(50% + .4rem); padding: 0 .4rem; font-size: .7rem; line-height: 1.35; }
.staff-nav__item--tab .nav-count__word {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* The page keeps the bar's height clear beneath its last line, so the bar never covers content. */
.staff-shell--nav .staff-wrap { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
/* A form's fixed action bar (.actions, bottom: 0) would sit under the floating
   bar, which is drawn above it: under the staff navigation on a phone it goes
   into the page's flow instead, and the padding above keeps it clear. */
@media (max-width: 40rem) {
  .staff-shell--nav .actions { position: static; padding: 1rem 0 0; background: none; border-top: 0; }
}

/* More: every link as a full-width row. */
.more-group h2 { margin-top: 1.25rem; }
.more-list, .more-account { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1.5px solid var(--line-cool); border-radius: var(--radius-card); overflow: hidden; }
.more-list li + li, .more-account li + li { border-top: 1px solid var(--line-cool); }
.more-list a, .more-account a, .more-account .link-btn {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  width: 100%; min-height: 44px; padding: .55rem 1rem;
  color: var(--ink); text-decoration: none; font-weight: 500; text-align: left;
}
.more-list a::after, .more-account a::after { content: "\203A" / ""; color: var(--ink-soft); font-size: 1.2rem; line-height: 1; }
.more-list a .nav-count { margin-left: auto; }
.more-list a:hover, .more-account a:hover, .more-account .link-btn:hover { background: #f3f5f8; }
.more-list a:focus-visible, .more-account a:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

/* Narrower than a 320px phone (a 390px phone at 125% zoom or more, or larger
   text): four tabs no longer fit one floating row, so the bar goes back into
   the page's flow above the content, wrapping, and nothing floats. */
@media (max-width: 19.9375rem) {
  .staff-nav { position: static; flex-wrap: wrap; margin: .5rem var(--space) 0; box-shadow: none; }
  .staff-nav__item--tab { flex: 1 1 40%; }
  .staff-shell--nav .staff-wrap { padding-bottom: 3rem; }
}

/* From 641px: every link, in its group, as a wrapping row under the header. */
@media (min-width: 40.0625rem) {
  .staff-nav {
    position: static;
    flex-wrap: wrap; gap: .5rem 1.75rem;
    max-width: 80rem; margin: 0 auto;
    padding: .75rem var(--space) .5rem;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    border-bottom: 1px solid var(--line-cool);
  }
  .staff-nav__group { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .5rem; }
  .staff-nav__list { display: flex; flex-wrap: wrap; gap: .25rem; }
  .staff-nav__label {
    display: block; margin: 0;
    font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft);
  }
  .staff-nav__item, .staff-nav__item--tab { display: flex; flex: none; }
  .staff-nav__item--more, .staff-nav__list--more { display: none; }
  .staff-nav__link { flex-direction: row; gap: .45rem; padding: .3rem .8rem; border-radius: 999px; font-size: .9rem; }
  .staff-nav__icon { display: none; }
  .staff-nav__item--tab .nav-count { position: static; font-size: .78rem; padding: .1rem .45rem; }
  .staff-nav__item--tab .nav-count__word { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; }
  .staff-shell--nav .staff-wrap { padding-bottom: 3rem; }
}

/* From 1024px: the groups as a sidebar beside the page, kept in view. */
@media (min-width: 64rem) {
  .staff-shell--nav {
    display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); gap: 2rem;
    max-width: 80rem; margin: 0 auto; padding: 0 var(--space);
  }
  .staff-shell--nav .staff-wrap { max-width: none; margin: 0; padding: 1.25rem 0 3rem; }
  .staff-nav {
    position: sticky; top: 0; align-self: start;
    max-height: 100vh; overflow-y: auto;
    flex-direction: column; flex-wrap: nowrap; gap: 1.1rem;
    margin: 0; padding: 1.25rem 0 2rem;
    border-bottom: 0;
  }
  .staff-nav__group { flex-direction: column; align-items: stretch; gap: .3rem; }
  .staff-nav__label { padding: 0 .8rem; }
  .staff-nav__list { flex-direction: column; flex-wrap: nowrap; gap: .1rem; }
  .staff-nav__link { justify-content: flex-start; border-radius: var(--radius-field); padding: .4rem .8rem; }
  /* The sidebar scrolls, so it clips: the ring goes inside the full-width link, as on More's rows. */
  .staff-nav__link:focus-visible { outline-offset: -3px; }
  .staff-nav__link .nav-count { margin-left: auto; }
}

/* Increase Contrast: the bar and the rows take an ink edge. */
@media (prefers-contrast: more) {
  .staff-nav, .more-list, .more-account { border-color: var(--ink); }
  .staff-nav__link[aria-current] { border-width: 2px; }
}
@media (forced-colors: active) {
  .staff-nav { border: 1px solid CanvasText; }
  .staff-nav__link { border-color: transparent; }
  .staff-nav__link[aria-current] { border: 2px solid CanvasText; }
  .staff-nav__link[aria-current] .staff-nav__text { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
}