/* Sage Matters member portal — brand tokens copied from
   sage-matters-website/src/styles/theme.css. Cream only; the site has no dark
   theme and this must not invent one. */

:root {
  --paper: #f6f1e8;
  --paper-deep: #efe7d8;
  --card: #fffdf8;
  --ink: #262b2d;
  --ink-soft: rgba(38, 43, 45, 0.74);
  --ink-faint: rgba(38, 43, 45, 0.55);
  --line: rgba(38, 43, 45, 0.12);
  --sage: #6f9573;
  --sage-footer-deep: #5d8064;
  --sage-dark: #44604a;
  --sage-deep: #2f4536;
  --sage-glow: #a3d199;
  --sand-deep: #e7dcc6;
  --forest-deep: #3f5a44;
  --danger: #9b4a3f;

  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Tenor Sans', 'Inter', sans-serif;
  --font-display: 'Fraunces', Georgia, serif;

  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 36px;
  --shadow-soft: 0 18px 50px rgba(38, 43, 45, 0.10);
  --shadow-card: 0 10px 34px rgba(38, 43, 45, 0.08);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-heading); font-weight: 400; letter-spacing: 0.01em; margin: 0; }
.accent { font-family: var(--font-display); font-style: italic; }

button { font-family: inherit; font-size: inherit; cursor: pointer; }

.btn {
  border: none;
  border-radius: 999px;
  padding: 12px 26px;
  background: linear-gradient(135deg, var(--sage-glow), var(--sage));
  color: var(--sage-deep);
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-card);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.btn-quiet {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 18px;
  color: var(--ink-soft);
  box-shadow: none;
  font-weight: 500;
}
.btn-quiet:hover { border-color: var(--sage); color: var(--sage-dark); }

.btn-link {
  background: none; border: none; padding: 0;
  color: var(--ink-faint); text-decoration: underline; font-size: 13px;
}
.btn-link:hover { color: var(--danger); }

label { display: block; font-size: 13px; color: var(--ink-faint); margin-bottom: 6px; letter-spacing: .03em; text-transform: uppercase; }

input[type=text], input[type=email], input[type=password], textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(111, 149, 115, .16);
}

.note { font-size: 13px; color: var(--ink-faint); }
.error {
  background: rgba(155, 74, 63, .08);
  border: 1px solid rgba(155, 74, 63, .25);
  color: var(--danger);
  border-radius: var(--radius-md);
  padding: 11px 15px;
  font-size: 14px;
}
.hidden { display: none !important; }

/* ---------- sign in ---------- */

#login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background:
    radial-gradient(900px 480px at 50% -10%, rgba(163, 209, 153, .28), transparent 70%),
    var(--paper);
}

.login-card {
  width: 100%;
  max-width: 430px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: 42px 38px 34px;
}
.login-card h1 { font-size: 30px; margin-bottom: 6px; }
.login-card .sub { color: var(--ink-soft); font-size: 15px; margin: 0 0 26px; }
.login-card .field { margin-bottom: 16px; }
.login-card .btn { width: 100%; margin-top: 10px; }
/* The real wordmark, not letterspaced type. `width`/`height` are the file's
   intrinsic pixels so the browser reserves the right box before the image
   loads and the topbar does not jump. Charcoal rather than the white or sage
   version: this sits on cream. */
.brandmark {
  display: block;
  width: auto;
  height: 30px;
  margin: 0 auto 22px;
}


/* ---------- app shell ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 30px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.topbar .who { font-size: 14px; color: var(--ink-faint); }

main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 24px 60px;
  display: grid;
  gap: 24px;
  align-items: start;
}
main { grid-template-columns: 1fr minmax(320px, 400px); }
@media (max-width: 940px) { main { grid-template-columns: 1fr; } }

/* ---------- onboarding ---------- */

/* The reset control sits inside a sentence, so it has to read as part of it. */
.note .btn-link { font-size: inherit; padding: 0; }

.onboarding {
  /* 1240 max-width minus main's 24px gutters, so this card's edges line up
     with the panels below it rather than hanging past them. */
  max-width: 1192px;
  margin: 22px auto 0;
  padding: 20px 26px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.onboarding { width: calc(100% - 48px); }

.onboard-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.onboard-head h2 { font-size: 18px; }
.onboard-pct { font-size: 13px; color: var(--sage-dark); font-variant-numeric: tabular-nums; }

.onboard-bar {
  height: 8px;
  margin: 12px 0 4px;
  border-radius: 999px;
  background: var(--sand-deep);
  overflow: hidden;
}
.onboard-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sage-glow), var(--sage));
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) { .onboard-bar span { transition: none; } }

.onboard-steps { list-style: none; margin: 12px 0 0; padding: 0; }
.onboard-steps li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.onboard-steps li > div { flex: 1; min-width: 0; }
.onboard-step-name { font-size: 15px; }
.onboard-step-note { font-size: 13px; color: var(--ink-faint); }

/* An empty ring that fills with a checkmark when the step is done. Drawn in
   CSS so the strict img-src policy stays untouched for a decoration. */
.onboard-tick {
  flex: none;
  width: 20px; height: 20px;
  border: 2px solid var(--sand-deep);
  border-radius: 50%;
  position: relative;
}
.is-done .onboard-tick { background: var(--sage); border-color: var(--sage); }
.is-done .onboard-tick::after {
  content: "";
  position: absolute; left: 6px; top: 2.5px;
  width: 4px; height: 9px;
  border-right: 2px solid var(--card);
  border-bottom: 2px solid var(--card);
  transform: rotate(45deg);
}
.is-done .onboard-step-name { color: var(--ink-faint); text-decoration: line-through; }

/* ---------- library ---------- */

.library-controls { margin-bottom: 14px; }
#library-search {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 18px;
}
#library-search:focus-visible { outline: 2px solid var(--sage); outline-offset: 1px; }

.library-topics { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.topic-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 13px;
}
.topic-chip:hover { border-color: var(--sage); color: var(--ink); }
.topic-chip:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.topic-chip.is-on {
  background: rgba(111, 149, 115, 0.16);
  border-color: var(--sage);
  color: var(--sage-deep);
}

.library-list { list-style: none; margin: 6px 0 0; padding: 0; }
.library-list li { border-top: 1px solid var(--line); }

/* A whole card is the target, not a link at the end of it. */
.article-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 15px 12px 15px 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--ink);
  border-radius: 10px;
}
.article-card:hover { background: rgba(111, 149, 115, 0.07); padding-left: 12px; }
.article-card:focus-visible { outline: 2px solid var(--sage); outline-offset: -2px; }
.article-title { font-size: 16px; line-height: 1.35; }
.article-deck { font-size: 14px; color: var(--ink-soft); line-height: 1.4; }
.article-meta { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }

#library-more { margin-top: 16px; }

/* Sources the assistant actually used, under its answer. */
.msg-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.msg-sources .note { margin: 0; font-size: 12px; }
.source-chip {
  border: 1px solid rgba(111, 149, 115, 0.45);
  border-radius: 999px;
  padding: 5px 12px;
  background: var(--card);
  color: var(--sage-deep);
  font-size: 12.5px;
  text-align: left;
  max-width: 100%;
}
.source-chip:hover { background: rgba(111, 149, 115, 0.14); }
.source-chip:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

/* ---------- reader ---------- */

#reader {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  /* `overflow-y: auto` alone leaves overflow-x at its default `visible`, and
     the two together compute overflow-x to `auto` too — so any stray wide
     element still opens a sideways pan on this container. The real fix for
     the article content is `overflow-wrap: anywhere` on #reader-content
     above; this is a deliberate second layer, not a substitute for it. It is
     safe here because nothing inside #reader uses position: sticky. */
  overflow-x: hidden;
  background: var(--paper);
}
.reader-shell { max-width: 680px; margin: 0 auto; padding: 26px 24px 90px; }
.reader-bar { margin-bottom: 26px; }

.reader-meta {
  margin: 0 0 12px;
  font-size: 12.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.reader-body h1 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4.5vw, 38px);
  line-height: 1.16;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--ink);
}
.reader-deck {
  margin: 0 0 32px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.48;
  color: var(--ink-soft);
}

/* Reading measure and rhythm, matching Dr. Morgan's published articles. */
#reader-content {
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--ink);
  /* `overflow-wrap` is inherited, so this reaches every descendant: headings,
     paragraphs, list items, quotes. Citation lists end in long DOIs and URLs
     with no space to break on, and without this one of those tokens sets the
     line box wider than the phone screen, which drags the whole reader into
     horizontal scroll. Found 2026-08-28 on a real iPhone: the article title
     shifted off the left edge because the References list was doing this. */
  overflow-wrap: anywhere;
}
#reader-content p {
  margin: 0 0 1.25rem;
  line-height: 1.7;
}
#reader-content p:last-child {
  margin-bottom: 0;
}
#reader-content h2,
#reader-content h3,
#reader-content h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--ink);
}
#reader-content h2 {
  font-size: clamp(22px, 3.2vw, 26px);
  line-height: 1.22;
  margin: 2.25rem 0 0.85rem;
}
#reader-content h3 {
  font-size: clamp(19px, 2.6vw, 22px);
  line-height: 1.28;
  margin: 1.85rem 0 0.75rem;
}
#reader-content h4 {
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.35;
  margin: 1.5rem 0 0.6rem;
}
#reader-content ul,
#reader-content ol {
  margin: 0 0 1.25rem;
  padding-left: 1.4em;
  line-height: 1.65;
}
#reader-content li {
  margin-bottom: 0.45em;
}
#reader-content .reader-quote {
  margin: 2rem 0;
  padding: 1rem 1.4rem;
  border-left: 3px solid var(--sage);
  background: rgba(111, 149, 115, 0.07);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--sage-deep);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.12em;
  line-height: 1.55;
}

#reader-content a {
  color: var(--sage-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
#reader-content a:hover {
  color: var(--sage-deep);
}

/* Article images and figures */
.reader-figure {
  margin: 2rem 0 2.25rem;
  width: 100%;
  max-width: 100%;
}
/* No crop and no height cap. Several of these images are charts and lab
   reference ranges — a cropped chart is a wrong chart. */
.reader-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  background: var(--paper-deep);
}
.reader-figure figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-faint);
  text-align: center;
  font-style: italic;
}

.reader-foot {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-faint);
}

@media (max-width: 600px) {
  .reader-shell { padding: 16px 16px 70px; }
  .reader-body h1 { font-size: clamp(24px, 6.5vw, 30px); margin-bottom: 10px; }
  .reader-deck { font-size: 18px; margin-bottom: 24px; }
  #reader-content { font-size: 16.5px; line-height: 1.65; }
  #reader-content h2 { font-size: 21px; margin-top: 1.75rem; }
  #reader-content h3 { font-size: 18.5px; margin-top: 1.5rem; }
  #reader-content .reader-quote { margin: 1.5rem 0; padding: 0.75rem 1rem; font-size: 1.05em; }
  .reader-figure { margin: 1.5rem 0 1.75rem; }
  .reader-figure img { border-radius: 12px; }
  .reader-figure figcaption { font-size: 12.5px; }
}

/* ---------- the chat nudge ---------- */

.chat-nudge {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 13px 16px;
  border: 1px solid rgba(111, 149, 115, 0.4);
  border-radius: 12px;
  background: rgba(111, 149, 115, 0.09);
}
.chat-nudge p { margin: 0; flex: 1; min-width: 200px; font-size: 14px; color: var(--ink-soft); }
.composer.is-blocked { opacity: 0.5; }
.composer.is-blocked textarea { cursor: not-allowed; }

/* ---------- why a passkey ---------- */

.why-passkey {
  margin-top: 18px;
  padding: 16px 18px;
  border-left: 3px solid var(--sage);
  border-radius: 0 12px 12px 0;
  background: rgba(111, 149, 115, 0.07);
}
.why-passkey h3 { font-size: 15px; margin-bottom: 8px; }
.why-passkey p { margin: 0 0 10px; font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.why-passkey p:last-child { margin-bottom: 0; }

/* ---------- onboarding ---------- */

/* The reset control sits inside a sentence, so it has to read as part of it. */
.note .btn-link { font-size: inherit; padding: 0; }

.onboarding {
  /* 1240 max-width minus main's 24px gutters, so this card's edges line up
     with the panels below it rather than hanging past them. */
  max-width: 1192px;
  margin: 22px auto 0;
  padding: 20px 26px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.onboarding { width: calc(100% - 48px); }

.onboard-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.onboard-head h2 { font-size: 18px; }
.onboard-pct { font-size: 13px; color: var(--sage-dark); font-variant-numeric: tabular-nums; }

.onboard-bar {
  height: 8px;
  margin: 12px 0 4px;
  border-radius: 999px;
  background: var(--sand-deep);
  overflow: hidden;
}
.onboard-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sage-glow), var(--sage));
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) { .onboard-bar span { transition: none; } }

.onboard-steps { list-style: none; margin: 12px 0 0; padding: 0; }
.onboard-steps li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.onboard-steps li > div { flex: 1; min-width: 0; }
.onboard-step-name { font-size: 15px; }
.onboard-step-note { font-size: 13px; color: var(--ink-faint); }

/* An empty ring that fills with a checkmark when the step is done. Drawn in
   CSS so the strict img-src policy stays untouched for a decoration. */
.onboard-tick {
  flex: none;
  width: 20px; height: 20px;
  border: 2px solid var(--sand-deep);
  border-radius: 50%;
  position: relative;
}
.is-done .onboard-tick { background: var(--sage); border-color: var(--sage); }
.is-done .onboard-tick::after {
  content: "";
  position: absolute; left: 6px; top: 2.5px;
  width: 4px; height: 9px;
  border-right: 2px solid var(--card);
  border-bottom: 2px solid var(--card);
  transform: rotate(45deg);
}
.is-done .onboard-step-name { color: var(--ink-faint); text-decoration: line-through; }

/* ---------- tabs ---------- */

.tabs {
  display: flex;
  gap: 6px;
  max-width: 1240px;
  margin: 22px auto 0;
  padding: 0 24px;
}
.tab {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 9px 20px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 15px;
}
.tab:hover { color: var(--ink); background: rgba(111, 149, 115, 0.08); }
.tab:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.tab.is-on {
  background: var(--card);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}

/* ---------- the chat nudge ---------- */

.chat-nudge {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 13px 16px;
  border: 1px solid rgba(111, 149, 115, 0.4);
  border-radius: 12px;
  background: rgba(111, 149, 115, 0.09);
}
.chat-nudge p { margin: 0; flex: 1; min-width: 200px; font-size: 14px; color: var(--ink-soft); }
.composer.is-blocked { opacity: 0.5; }
.composer.is-blocked textarea { cursor: not-allowed; }

/* ---------- why a passkey ---------- */

.why-passkey {
  margin-top: 18px;
  padding: 16px 18px;
  border-left: 3px solid var(--sage);
  border-radius: 0 12px 12px 0;
  background: rgba(111, 149, 115, 0.07);
}
.why-passkey h3 { font-size: 15px; margin-bottom: 8px; }
.why-passkey p { margin: 0 0 10px; font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.why-passkey p:last-child { margin-bottom: 0; }

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 26px 26px 22px;
}
.panel > header { margin-bottom: 18px; }
.panel h2 { font-size: 21px; }
.panel .lede { color: var(--ink-soft); font-size: 14px; margin: 5px 0 0; }

/* ---------- documents ---------- */

.dropzone {
  border: 1.5px dashed rgba(111, 149, 115, .45);
  border-radius: var(--radius-md);
  background: var(--paper-deep);
  padding: 26px 20px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
  transition: background .15s ease, border-color .15s ease;
}
.dropzone.over { background: rgba(163, 209, 153, .22); border-color: var(--sage); }
.dropzone .btn-quiet { margin-top: 12px; background: var(--card); }

.doclist { list-style: none; margin: 20px 0 0; padding: 0; }
.doclist li {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.doclist .meta { flex: 1; min-width: 0; }
.doclist .name {
  font-weight: 500; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doclist .sub { font-size: 12.5px; color: var(--ink-faint); }
.doclist .actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }

/* On a phone the filename and the action cluster cannot share a line. Side by
   side their combined minimum was ~495px, which widened the grid track and gave
   the whole portal a horizontal scrollbar at 390px — the page scrolled sideways
   as soon as a member uploaded a file with an ordinary name. Stacking them
   removes the sum; `width: 100%` gives the name a definite box so its ellipsis
   still has something to truncate against. Found 2026-08-27. */
@media (max-width: 560px) {
  .doclist li { flex-direction: column; align-items: stretch; gap: 8px; }
  .doclist .meta { width: 100%; min-width: 0; }
  .doclist .actions { flex-wrap: wrap; }
}
.pill {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  background: var(--sand-deep); color: var(--forest-deep);
}
.empty { color: var(--ink-faint); font-size: 14px; padding: 22px 0 4px; text-align: center; }

/* ---------- chat ---------- */

.chat { display: flex; flex-direction: column; min-height: 560px; }
.thread { flex: 1; overflow-y: auto; max-height: 60vh; padding-right: 6px; }
.msg { margin-bottom: 18px; max-width: 92%; }
.msg.user { margin-left: auto; }
.msg .bubble {
  border-radius: var(--radius-md);
  padding: 13px 18px;
  font-size: 15px;
}
.msg.user .bubble { background: var(--paper-deep); }
.msg.sage .bubble { background: rgba(163, 209, 153, .16); border: 1px solid rgba(111, 149, 115, .22); }
.msg .bubble p:first-child { margin-top: 0; }
.msg .bubble p:last-child { margin-bottom: 0; }
.msg .bubble table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 13.5px; }
.msg .bubble th, .msg .bubble td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.msg .bubble th { font-weight: 600; color: var(--ink-soft); }
.msg .who { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; }
.msg.user .who { text-align: right; }

.composer { display: flex; gap: 12px; align-items: flex-end; margin-top: 18px; }
.composer textarea { resize: none; min-height: 54px; max-height: 160px; }

.disclaimer {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
  padding-top: 13px;
}

.spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(111, 149, 115, .3);
  border-top-color: var(--sage);
  border-radius: 50%;
  display: inline-block;
  animation: spin .7s linear infinite;
  vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- chat header + history ---------- */

.chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.chat-actions { display: flex; gap: 8px; flex-shrink: 0; }
.chat-actions .btn-quiet { padding: 6px 15px; font-size: 14px; }

.history-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px;
}
#historylist li { cursor: pointer; }
#historylist .name { font-weight: 500; }
#historylist li:hover .name { color: var(--sage-dark); }

/* The upload promise problem: a button that says "upload your labs" inside a
   portal with a doctor's name on it implies a doctor reads them. Until a
   clinician owns a review queue, the page has to say plainly that nobody has. */
.standing-note {
  margin: 16px 0 0;
  padding: 12px 15px;
  border-radius: var(--radius-md);
  background: var(--paper-deep);
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
/* Review state. Quiet by design — a document's status is information, not an
   alert, and a member's own record should not shout at them. */
.pill-received { background: var(--paper-deep); color: var(--ink-faint); }
.pill-awaiting { background: var(--paper-deep); color: var(--ink-soft); border-color: var(--ink-faint); }
.pill-reviewed { background: var(--paper-deep); color: var(--ink); border-color: var(--ink-soft); }

/* Utility classes replacing inline style attributes, so the page's
   Content-Security-Policy can forbid inline styles outright. */
.brandmark-bar { height: 24px; margin: 0; }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.note-tight { margin: 8px 0 0; }
.note-gap { margin: 16px 0 0; }
.error-gap { margin-top: 14px; }

/* ---------- passkeys ---------- */

/* A quiet "or" rule between the password button and the passkey button, so the
   two are clearly alternatives rather than steps in a sequence. */
.or-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0 0.75rem;
  color: var(--ink-faint);
  font-size: 0.8rem;
}
.or-divider::before,
.or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.btn-wide { width: 100%; }

/* Each registered passkey reuses the document-list row so the portal has one
   list style, not two. */
#passkey-list .name { font-weight: 500; }
#passkey-list .sub { font-variant-numeric: tabular-nums; }

#security-panel .standing-note { margin-top: 1rem; }
#security-panel .btn-quiet { margin-top: 0.75rem; }

/* `main` is a two-column grid: a narrow left column and a wide right one for the
   chat. Left to auto-placement this card would take the chat's wide column and
   shove the chat into the narrow one. So the chat is pinned to column 2 across
   both rows, and this card sits under the documents on the left, which is where
   a low-frequency settings card belongs. */
#security-panel { grid-column: 1; }
#intake-panel { grid-column: 1; }
/* The assistant and the documents run down the wide left column; the two setup
   cards run down the narrow right one. Pinned rather than auto-placed so the
   pairing holds no matter how tall any one card gets. */
.chat { grid-column: 1; grid-row: 1; }
#documents-panel { grid-column: 1; grid-row: 2; }
#library-panel { grid-column: 1; grid-row: 3; }
.sidecol {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Single column below 940px: drop the pinning entirely or the cards stack
   wrong. Source order then decides, which is why the chat is first in the
   markup — on a phone the assistant should be the thing you land on. */
@media (max-width: 940px) {
  .chat,
  #documents-panel,
  #library-panel,
  .sidecol {
    grid-column: auto;
    grid-row: auto;
  }
  /* The wrapper stops being a column and just passes its two cards through, so
     they land in the single-column stack like everything else. */
  .sidecol { display: contents; }
}

/* ---------- intake ---------- */

.intake-progress { margin: 0.25rem 0 1rem; }
.intake-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--paper-deep);
  overflow: hidden;
}
.intake-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sage);
  transition: width 220ms ease;
}
#intake-status { margin-top: 0.5rem; }
#intake-panel .standing-note { margin-top: 1rem; }

/* The form is its own surface rather than a panel in the grid. It is long, and
   a fourteen-section form squeezed into a 420px column is a form nobody
   finishes. */
#intake-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--paper);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.intake-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}
.intake-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.intake-head > div { flex: 1 1 380px; min-width: 0; }
.intake-head .btn-quiet { flex: 0 0 auto; white-space: nowrap; }
.intake-head h2 { margin: 0 0 0.35rem; }

/* Sticks under the header so "Saved" is visible from anywhere in a long form.
   Without it a member scrolls to section nine and has no idea their answers
   are being kept. */
.intake-savebar {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.5rem 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.5rem;
  min-height: 1.9rem;
}
#intake-saved { color: var(--ink-faint); }

.intake-section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 22px 8px;
  margin-bottom: 18px;
}
.intake-section > h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  margin: 0 0 0.35rem;
}
.intake-section > .lede { margin: 0 0 1.25rem; }

.intake-field { margin-bottom: 1.4rem; }
/* The global `label` rule is uppercase 13px faint — right for a two-word form
   field, wrong for a question. These are sentences someone reads and answers,
   so they get sentence case at body size. */
.intake-field > label,
.intake-field > .intake-label,
.intake-options label,
.intake-ack {
  text-transform: none;
  letter-spacing: normal;
  font-size: 1rem;
  color: var(--ink);
}
.intake-field > label,
.intake-field > .intake-label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.intake-ack { color: var(--ink-soft); font-size: 0.95rem; }
.intake-field .note { margin: 0 0 0.5rem; }
.intake-field input[type="text"],
.intake-field input[type="date"],
.intake-field textarea,
.intake-field select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.intake-field textarea { min-height: 88px; resize: vertical; }
.intake-field input:focus-visible,
.intake-field textarea:focus-visible,
.intake-field select:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 1px;
}

.intake-options { display: flex; flex-wrap: wrap; gap: 8px; }
.intake-options label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  cursor: pointer;
}
.intake-options label:hover { border-color: var(--sage); }
.intake-options input { accent-color: var(--sage); }
.intake-other { margin-top: 8px; }

.intake-table { width: 100%; overflow-x: auto; }
.intake-table table { border-collapse: collapse; width: 100%; min-width: 460px; }
.intake-table th,
.intake-table td {
  border: 1px solid var(--line);
  padding: 4px;
  text-align: left;
  font-weight: 400;
}
.intake-table th { font-size: 0.86rem; color: var(--ink-soft); }
.intake-table td.intake-rowlabel { font-size: 0.9rem; color: var(--ink-soft); white-space: nowrap; }
.intake-table input {
  width: 100%;
  min-width: 90px;
  font: inherit;
  border: 0;
  background: transparent;
  padding: 6px;
  color: var(--ink);
}
.intake-table input:focus-visible { outline: 2px solid var(--sage); outline-offset: -2px; }
.intake-addrow { margin-top: 8px; }

/* Roster — one collapsed card per person. Replaced a 4-column, 8-row table
   that scrolled sideways on a phone and asked for 32 answers up front. There
   is deliberately no min-width and no overflow-x anywhere below: the whole
   point is that this never scrolls sideways. */
/* A question that appeared because of an earlier answer.
   Indented with a line running down from its gate, so it reads as a follow-up
   rather than a question that was always there. Applied ONLY where a real
   `showIf` exists — plenty of adjacent questions are genuinely independent and
   a connector between those would assert a relationship that is not real.

   `hidden` needs the explicit rule because an author `display` beats the UA
   stylesheet, the same trap the roster cards hit. */
.intake-field.is-followup[hidden] { display: none; }
.intake-field.is-followup {
  position: relative;
  margin-left: 18px;
  padding-left: 20px;
}
.intake-field.is-followup::before {
  content: "";
  position: absolute;
  left: 0;
  top: -14px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: var(--sand-deep);
}
/* The elbow into the question itself. */
.intake-field.is-followup::after {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 13px;
  height: 2px;
  border-radius: 2px;
  background: var(--sand-deep);
}
/* Consecutive follow-ups are one branch off the same question, so the line runs
   unbroken through them. `:has()` looks ahead to the next sibling; a follow-up
   that is the last of its run keeps its rounded end. */
.intake-field.is-followup + .intake-field.is-followup::before { top: -24px; }
.intake-field.is-followup:has(+ .intake-field.is-followup)::before { bottom: -24px; }

@media (max-width: 600px) {
  .intake-field.is-followup { margin-left: 8px; padding-left: 16px; }
  .intake-field.is-followup::after { width: 10px; }
}

.kit-star {
  color: var(--sage-dark);
  font-weight: 600;
  margin-left: 3px;
  cursor: help;
}
.kit-legend {
  margin: 8px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(111, 149, 115, 0.09);
  font-size: 13.5px;
  color: var(--ink-soft);
}
.kit-legend .kit-star { margin-left: 0; }

.intake-optional {
  margin: 2px 0 10px;
  font-size: 13px;
  color: var(--ink-faint);
  font-style: italic;
}

.roster { display: flex; flex-direction: column; gap: 8px; }

.roster-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}
.roster-card.is-filled { border-color: rgba(111, 149, 115, 0.5); }
.roster-card.is-open { background: var(--card); border-color: var(--sage); }

.roster-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--ink);
  line-height: 1.35;
}
.roster-head:hover { background: rgba(111, 149, 115, 0.07); }
.roster-head:focus-visible { outline: 2px solid var(--sage); outline-offset: -2px; }

.roster-name { font-size: 15px; white-space: nowrap; }
.roster-summary {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.roster-card.is-filled .roster-summary { color: var(--sage-dark); }

/* A chevron drawn in CSS rather than shipped as an asset, so the strict
   img-src policy stays untouched for a decoration. */
.roster-chev {
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  margin-bottom: 3px;
}
.roster-card.is-open .roster-chev { transform: rotate(-135deg); margin-bottom: -3px; }

/* An author `display` beats the UA stylesheet's `[hidden] { display: none }`,
   so without this every card renders open and the whole point is lost. */
.roster-body[hidden] { display: none; }
.roster-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 14px 16px;
  border-top: 1px solid var(--line);
}
.roster-cell { display: flex; flex-direction: column; gap: 6px; }
/* The global `label` rule uppercases; these read as questions, not headings,
   and half of them are <div> anyway, which made the section look typeset by
   two different people. */
.roster-cell-label {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 0;
  letter-spacing: normal;
  text-transform: none;
}
.roster-cell input[type="text"] {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.roster-card.is-open .roster-cell input[type="text"] { background: var(--paper); }
.roster-cell input:focus-visible { outline: 2px solid var(--sage); outline-offset: 1px; }

.roster-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.roster-pill {
  /* The global `label` rule uppercases and letter-spaces; these are answers a
     member picks, not headings. */
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 0;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  cursor: pointer;
  font-size: 14px;
}
.roster-pill:hover { border-color: var(--sage); }
.roster-pill input { accent-color: var(--sage); }
.roster-pill:has(input:checked) {
  border-color: var(--sage);
  background: rgba(111, 149, 115, 0.14);
}

.roster-clear { align-self: flex-start; font-size: 13px; }

@media (min-width: 620px) {
  /* Two across only where there is genuinely room. Age and living/deceased are
     both short answers and pair naturally; condition and notes stay full width. */
  .roster-body[hidden] { display: none; }
  .roster-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
  }
  /* Condition, the three living/deceased pills, and notes each get the full
     width; only the short age answer sits in a half column. Sharing a row with
     the pills wrapped "Not sure" onto its own line. */
  .roster-cell:first-child,
  .roster-cell:nth-child(3),
  .roster-cell:nth-child(4),
  .roster-clear { grid-column: 1 / -1; }
}

.intake-foot {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
}
.intake-ack {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 1rem;
  color: var(--ink-soft);
}
.intake-ack input { margin-top: 4px; accent-color: var(--sage); }
.intake-foot .btn { width: 100%; }
.intake-foot .note { margin-top: 0.6rem; text-align: center; }

@media (max-width: 600px) {
  .intake-shell { padding: 20px 16px 60px; }
}