/* 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; }

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.
 */
.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; }
.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; } }