/* V-Core interface — design 0.7.
 *
 * Applies the polish handoff's visual system to the real implementation:
 * restrained forest, warm white and soft accents; one sans-serif hierarchy;
 * rounded controls; readable metadata; purposeful whitespace.
 *
 * The motion contract from DESIGN-REFERENCE-NOTES.md is followed literally:
 *   hover/press  ~140ms, subtle lift on fine pointers, small press scale
 *   entrances    180ms, opacity and at most 5px translation
 *   toast        opacity only, position unchanged
 *   disclosure   160ms
 *   nothing loops, nothing animates a health value, nothing fakes processing
 *
 * Two switches turn all optional motion off: the operating system's
 * prefers-reduced-motion, and the header control, which sets
 * html[data-motion="off"] for the session.
 */

:root {
  color-scheme: light;

  --ink: #163e37;
  --ink-2: #33514a;
  --muted: #60736d;
  --green: #215b4b;
  --green-deep: #173f37;
  --lime: #d9f279;
  --lime-soft: #d7efba;
  --cream: #f5f7f4;
  --surface: #ffffff;
  --surface-2: #edf2ed;
  --surface-3: #edf1e9;
  --line: #e0e8e2;
  --line-soft: #e8ede6;

  /* Soft category accents. Each is a background for an icon chip, never the
   * only thing carrying meaning. */
  --peach: #fae7d6;
  --blue: #e0edf3;
  --mint: #e4eed9;
  --lavender: #ece6f6;
  --violet: #a799c4;
  --violet-bg: #e9e6f1;


  /* Readable ink on a mint or lime-soft surface.
   *
   * Both of those backgrounds are light in the light theme and dark in the
   * dark one, while --green-deep is dark in both. So every component that
   * painted --green-deep on --mint was invisible in dark mode, and each one
   * was found separately: the setup code, the pairing word, the pairing chip,
   * the "This one" phone badge, the "You" account badge, the signed-review
   * label, the confirmed-document pill, the active nav item on a phone.
   *
   * One token, defined per theme, so the next component cannot inherit the
   * same fault by writing the obvious thing. */
  --on-mint: var(--green-deep);

  --amber: #7a5a1f;
  --amber-bg: #f8eed9;
  --red: #96382f;
  --red-bg: #f8e5e2;
  --info: #1f5062;
  --info-bg: #e2eef3;

  /* Chart series, validated for colour-vision separation and contrast against
   * both surfaces. Identity is never carried by colour alone. */
  --series-1: #2a78d6;
  --series-2: #eb6834;

  --radius: 24px;
  --radius-md: 20px;
  --radius-sm: 13px;
  --shadow-card: 0 3px 10px rgba(27, 68, 53, .035);
  --shadow-lift: 0 6px 20px rgba(22, 62, 55, .09);
  --shadow-modal: 0 24px 100px rgba(18, 54, 42, .22);

  /* The dark panels are dark in both themes, so what sits on them must not
   * follow the theme — a "dark mode" lime on a dark panel is unreadable. */
  --on-dark-panel: #173f37;
  --on-dark-accent: #d7efba;
  --on-dark-text: #ffffff;
  --on-dark-muted: #d0e0d5;

  --motion-fast: 140ms;
  --motion-standard: 180ms;
  --motion-disclosure: 160ms;
  --motion-ease: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
  :root:not([data-theme="light"]) {
    --ink: #e6efe8;
    --ink-2: #c2d3c9;
    --muted: #93a79e;
    --green: #6aa88d;
    --green-deep: #0f231e;
    --lime: #cbe98a;
    --lime-soft: #2f4a36;
    --cream: #0e1a17;
    --surface: #16241f;
    --surface-2: #1a2b25;
    --surface-3: #1d2f27;
    --line: #2a3d35;
    --line-soft: #233129;
    --peach: #3a2a1d;
    --blue: #1c2e36;
    --mint: #22321f;
    --lavender: #2b2436;
    --violet: #a799c4;
    --violet-bg: #272134;
    --on-mint: var(--ink);
    --amber: #e3c07d;
    --amber-bg: #32270f;
    --red: #efa49d;
    --red-bg: #371d1a;
    --info: #9dc4d6;
    --info-bg: #142c37;
    --series-1: #3987e5;
    --series-2: #d95926;
    --shadow-card: 0 3px 10px rgba(0, 0, 0, .3);
    --shadow-lift: 0 6px 20px rgba(0, 0, 0, .42);
    --shadow-modal: 0 24px 100px rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e6efe8;
  --ink-2: #c2d3c9;
  --muted: #93a79e;
  --green: #6aa88d;
  --green-deep: #0f231e;
  --lime: #cbe98a;
  --lime-soft: #2f4a36;
  --cream: #0e1a17;
  --surface: #16241f;
  --surface-2: #1a2b25;
  --surface-3: #1d2f27;
  --line: #2a3d35;
  --line-soft: #233129;
  --peach: #3a2a1d;
  --blue: #1c2e36;
  --mint: #22321f;
  --lavender: #2b2436;
  --violet: #a799c4;
  --violet-bg: #272134;
  --on-mint: var(--ink);
  --amber: #e3c07d;
  --amber-bg: #32270f;
  --red: #efa49d;
  --red-bg: #371d1a;
  --info: #9dc4d6;
  --info-bg: #142c37;
  --series-1: #3987e5;
  --series-2: #d95926;
  --shadow-card: 0 3px 10px rgba(0, 0, 0, .3);
  --shadow-lift: 0 6px 20px rgba(0, 0, 0, .42);
  --shadow-modal: 0 24px 100px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }

/*
 * The rem scale is deliberately anchored to whatever the reader has chosen.
 * Never set a px font-size on html: that pins every rem in the stylesheet and
 * silently cancels the browser's font-size setting and text-only zoom, which is
 * the whole reason these values are in rem.
 */
html { font-size: 100%; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", "Noto Sans Thai", "Noto Sans SC", sans-serif;
  font-size: 0.9375rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* One sans-serif hierarchy. Weight and tracking do the work a second family
 * used to do. */
h1, h2, h3 { font-family: inherit; }
h1 { font-weight: 550; font-size: clamp(1.8125rem, 3vw, 2.625rem); letter-spacing: -0.038095em; line-height: 1.13; margin: 0 0 0.625rem; }
h2 { font-weight: 550; font-size: clamp(1.1875rem, 2.1vw, 1.4375rem); letter-spacing: -0.030435em; line-height: 1.25; margin: 0 0 0.625rem; }
h3 { font-weight: 550; font-size: 0.9375rem; letter-spacing: -0.013333em; margin: 0 0 0.3125rem; }
p { margin: 0 0 0.6875rem; }
a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }

:focus-visible { outline: 3px solid #4f8f6d; outline-offset: 3px; border-radius: 6px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -5.625rem; left: 1rem; z-index: 99;
  background: var(--surface); color: var(--ink);
  padding: 0.8125rem 1rem; border: 2px solid var(--green); border-radius: 12px;
  font-weight: 600;
}
.skip-link:focus { top: 0.75rem; }

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

/* The sidebar is capped as a share of the viewport as well as in rem, so a
 * reader with a large font size cannot end up with a sidebar and no content. */
.app { display: grid; grid-template-columns: min(13.5rem, 30vw) minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  padding: 1.875rem 1.125rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}
@media (min-width: 68.8125em) {
  .sidebar { position: sticky; top: 0; height: 100vh; }
}

.brand { display: flex; align-items: center; gap: 0.6875rem; font-size: 1.5625rem; font-weight: 600; letter-spacing: -0.048em; }
.brandmark {
  width: 2.375rem; height: 2.375rem; flex: none; border-radius: 50%;
  background: var(--lime); color: var(--green-deep);
  display: grid; place-items: center;
  font: italic 600 1.375rem/1 Georgia, serif;
}

.workspace-label { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }

.nav { display: grid; gap: 0.3125rem; }
.nav button {
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 3rem; padding: 0.6875rem 0.875rem;
  border: 0; background: none; border-radius: 14px;
  color: var(--ink-2); text-align: left; font-size: 0.90625rem; font-weight: 500;
  transition: background var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
.nav button:hover:not([aria-current="page"]) { background: color-mix(in srgb, var(--green) 9%, transparent); }
.nav button[aria-current="page"] {
  background: var(--green); color: #fff; font-weight: 600;
  box-shadow: 0 5px 12px rgba(22, 62, 55, .08);
}
.nav .icon { width: 1.25rem; height: 1.25rem; flex: none; }

.sidebar-foot { margin-top: auto; display: grid; gap: 0.75rem; }
.sidebar-motto { font-size: 1.3125rem; font-weight: 550; letter-spacing: -0.033333em; line-height: 1.3; margin: 0; }
.who { display: flex; align-items: center; gap: 0.625rem; padding: 0.6875rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.who small { display: block; color: var(--muted); font-size: 0.6875rem; }

.avatar {
  width: 2.375rem; height: 2.375rem; flex: none; border-radius: 50%;
  background: var(--mint); color: var(--on-mint);
  display: grid; place-items: center; font-size: 0.78125rem; font-weight: 650; letter-spacing: 0.024em;
}
:root[data-theme="dark"] .avatar { color: var(--ink); }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  height: 4.375rem; padding: 0 clamp(1.0625rem, 2.6vw, 2.5rem);
  background: var(--cream);
  font-size: 0.8125rem; color: var(--muted);
}
.topbar-right { display: flex; align-items: center; gap: 0.625rem; }

/* A dot, not a pulse. It reports state; it does not perform. */
.live-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--green); flex: none; }

.motion-toggle {
  min-height: 2.5rem; padding: 0.5rem 0.8125rem;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); font-size: 0.71875rem; font-weight: 600; color: var(--ink-2);
  transition: background var(--motion-fast) var(--motion-ease);
}
.motion-toggle:hover { background: var(--surface-2); }

main { padding: 1.5rem clamp(1.0625rem, 2.6vw, 2.5rem) 3.5rem; max-width: 86.25rem; }
main:focus { outline: none; }

footer { padding: 1.5rem clamp(1.0625rem, 2.6vw, 2.5rem) 2.5rem; color: var(--muted); font-size: 0.6875rem; display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }

/* ------------------------------------------------------------- motion -- */

/* 180ms, opacity and 5px. That is the whole entrance. */
@keyframes enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.enter { animation: enter var(--motion-standard) var(--motion-ease) both; }

/* ------------------------------------------------------------- pieces -- */

/*
 * A single-column grid sizes its implicit column to max-content, so one wide
 * child pushes the whole container past its parent. Every column-less grid in
 * this stylesheet therefore declares an explicit floor of zero. Without this,
 * large text produces horizontal scrolling rather than wrapping.
 */
.stack, .rows, .nav, .sidebar-foot, .field, .choice-set, .empty,
.grid, #toast-zone {
  grid-template-columns: minmax(0, 1fr);
}

.stack { display: grid; gap: 1.125rem; }
.grid { display: grid; gap: 1.125rem; }
.grid.equal { grid-template-columns: repeat(auto-fit, minmax(min(16.875rem, 100%), 1fr)); }
.grid.metrics { grid-template-columns: repeat(auto-fit, minmax(min(13.4375rem, 100%), 1fr)); }
/*
 * These wrap on their own width rather than at a viewport breakpoint, so they
 * also reflow when the reader's font size grows. A media query cannot see that,
 * and a two-column hero at 200% text is unreadable.
 */
.dashboard-top { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: stretch; }
.dashboard-top > .signal-hero { flex: 1.7 1 24rem; }
.dashboard-top > .checkin-card { flex: 1 1 16rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  min-width: 0;
  box-shadow: var(--shadow-card);
}
.card.interactive {
  cursor: pointer; text-align: left; width: 100%; display: block;
  transition: transform var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease);
}
@media (hover: hover) and (pointer: fine) {
  .card.interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--green) 26%, var(--line)); }
}
.card.interactive:active { transform: scale(.99); }

.pagehead { display: flex; align-items: center; justify-content: space-between; gap: 1.125rem; margin-bottom: 1.625rem; flex-wrap: wrap; }
.pagehead .sub { font-size: 0.875rem; color: var(--muted); margin-top: 0.5625rem; max-width: 62ch; }
.app[data-role="doctor"] .pagehead,
.app[data-role="admin"] .pagehead,
.app[data-role="coordinator"] .pagehead { border-bottom: 1px solid var(--line); padding-bottom: 1.4375rem; }

.eyebrow { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.135em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.375rem; }
.section { margin-top: 1.875rem; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.875rem; margin-bottom: 0.875rem; flex-wrap: wrap; }
.section-head h2 { margin: 0; font-size: 1.3125rem; }
.muted { color: var(--muted); }
.small { font-size: 0.78125rem; }

.pill {
  display: inline-flex; align-items: center; gap: 0.375rem;
  border-radius: 7px; padding: 0.25rem 0.5625rem;
  font-size: 0.71875rem; font-weight: 640; line-height: 1.35;
  background: var(--surface-2); color: var(--ink-2);
}
.pill.lime { background: var(--mint); color: var(--on-mint); }
.pill.amber { background: var(--amber-bg); color: var(--amber); }
.pill.red { background: var(--red-bg); color: var(--red); }
.pill.info { background: var(--info-bg); color: var(--info); }
.pill.violet { background: var(--violet-bg); color: #4a3d63; }
:root[data-theme="dark"] .pill.violet { color: #d5c9ee; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.875rem; padding: 0.6875rem 1.1875rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font-size: 0.875rem; font-weight: 600;
  transition: transform var(--motion-fast) var(--motion-ease),
              background var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 3px 8px rgba(22, 78, 53, .07); }
.btn.lime { background: var(--lime-soft); border-color: var(--lime-soft); color: var(--on-mint); }
.btn.quiet { background: transparent; }
/* A text action that sits under a set of real choices without competing
 * with them for the eye. */
.btn.link { background: transparent; border-color: transparent; padding-left: 0; padding-right: 0.75rem; color: var(--green); min-height: 2.5rem; }
.btn.link:hover { text-decoration: underline; box-shadow: none; transform: none; }
.btn.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 36%, var(--line)); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
/* At large text a label can outgrow its row; wrapping is better than a button
 * that hangs off the edge of the screen. */
.btn { max-width: 100%; }
.btn.block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 0.625rem; }

.rows { display: grid; }
.row { display: flex; align-items: center; gap: 0.875rem; padding: 1.1875rem 0; border-bottom: 1px solid var(--line-soft); }
.row:last-child { border-bottom: 0; padding-bottom: 0; }
.row:first-child { padding-top: 0; }
.row-main { flex: 1; min-width: 0; }
.row-main strong { font-size: 0.875rem; font-weight: 550; display: block; }
.row-main p { margin: 0.1875rem 0 0; font-size: 0.75rem; color: var(--muted); }
.row-glyph { width: 2.625rem; height: 2.625rem; flex: none; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; }

details.more { margin-top: 0.75rem; border-top: 1px solid var(--line-soft); padding-top: 0.75rem; }
details.more summary { cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: var(--green); min-height: 1.875rem; }
details.more[open] summary { margin-bottom: 0.625rem; }
details.more[open] > :not(summary) { animation: enter var(--motion-disclosure) var(--motion-ease) both; }

.empty { display: grid; gap: 0.625rem; justify-items: center; text-align: center; padding: 2.375rem 1.25rem; color: var(--muted); }
.journal-empty { text-align: center; padding: 2.5rem 1.375rem; }
.journal-empty .row-glyph { margin: 0 auto 1.125rem; width: 3.625rem; height: 3.625rem; }
.journal-empty p { font-size: 0.8125rem; color: var(--muted); margin: 0.625rem 0 1.25rem; }

/* --------------------------------------------------------- signal hero -- */

/* The dark panel on Today. It shows what the record already holds before it
 * asks for anything: a week of nights, the latest duration, the source, and
 * how many nights actually have data. It is not a score. */
.signal-hero {
  background: var(--on-dark-panel); color: var(--on-dark-text);
  border-radius: 28px; padding: 2rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem;
  min-height: 20rem; position: relative; overflow: hidden;
}
.signal-hero::before {
  content: ""; position: absolute; width: 26.875rem; height: 26.875rem;
  border: 1px solid rgba(255, 255, 255, .045); border-radius: 50%;
  right: -12.5rem; top: -14.375rem; box-shadow: 0 0 0 45px rgba(255, 255, 255, .012);
  pointer-events: none;
}
.hero-copy { flex: 1 1 17rem; min-width: 0; position: relative; z-index: 1; }
.signal-hero .eyebrow { color: #c7dfd0; font-size: 0.5625rem; }
.signal-hero h2 { font-size: clamp(1.875rem, 2.8vw, 2.6875rem); font-weight: 500; letter-spacing: -0.034884em; line-height: 1.08; margin: 1.25rem 0 0.9375rem; }
.signal-hero p { color: #d4e5dc; font-size: 0.8125rem; line-height: 1.6; max-width: 34ch; }
.signal-hero .btn.on-dark { background: var(--on-dark-accent); color: var(--on-dark-panel); border: 0; margin-top: 0.375rem; }

.week-visual {
  flex: 1 1 13rem; align-self: center; min-width: 0; position: relative; z-index: 1;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .095);
  border-radius: 22px; padding: 1.125rem;
}
.week-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.5625rem; letter-spacing: 0.111111em; text-transform: uppercase; color: #c9ddd2; }
.week-head span:first-child { display: flex; align-items: center; gap: 0.4375rem; }
.week-head .icon { width: 0.9375rem; height: 0.9375rem; color: var(--on-dark-accent); }
.sleep-total { font-size: 2.5rem; font-weight: 500; letter-spacing: -0.045em; line-height: 1.25; margin: 0.9375rem 0 0.5rem; font-variant-numeric: tabular-nums; }
.sleep-total small { font-size: 0.9375rem; color: #c4d9ce; letter-spacing: 0; margin: 0 0.3125rem; font-weight: 400; }

.week-columns { height: 6.375rem; display: flex; gap: 0.5rem; padding-bottom: 1.25rem; margin: 0.75rem 0; }
.week-columns > div { flex: 1; position: relative; display: flex; align-items: flex-end; height: 100%; min-width: 0; }
.week-bar { display: block; width: 100%; border-radius: 6px 6px 3px 3px; background: #75998b; }
.week-bar.latest { background: var(--on-dark-accent); }
.week-bar.absent { background: rgba(255, 255, 255, .11); }
.week-columns small { position: absolute; bottom: -1.375rem; text-align: center; width: 100%; font-size: 0.625rem; color: #c6dcd0; }
.signal-caption { font-size: 0.59375rem; display: block; color: #c2d6ca; letter-spacing: 0.021053em; margin-top: 1.125rem; line-height: 1.5; }

/* -------------------------------------------------------- check-in -- */

.checkin-card { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 1.625rem; }
.checkin-card h2 { font-size: 1.4375rem; line-height: 1.25; }
.mood-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(5.25rem, 100%), 1fr)); gap: 0.625rem; margin: 1rem 0 0.875rem; }
.mood-options button {
  border: 1px solid var(--line); background: var(--surface-3); border-radius: 16px;
  min-height: 4.75rem; display: grid; gap: 0.375rem; justify-items: center; align-content: center;
  font-size: 0.78125rem; font-weight: 550; padding: 0.625rem 0.375rem;
  transition: background var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease),
              transform var(--motion-fast) var(--motion-ease);
}
@media (hover: hover) and (pointer: fine) { .mood-options button:hover { background: var(--mint); } }
.mood-options button:active { transform: scale(.97); }
.mood-options button[aria-pressed="true"] { background: var(--mint); border-color: var(--green); }
.mood-options .icon { width: 1.5rem; height: 1.5rem; }

.next-step {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.0625rem 1.25rem; background: var(--surface-3);
  border: 1px solid var(--line); border-radius: var(--radius-md); margin-top: 1rem;
}
.next-step-icon { height: 2.625rem; width: 2.625rem; border-radius: 50%; background: var(--surface); display: grid; place-items: center; flex: none; }
.next-step > div { flex: 1; min-width: 0; }
/* Sized like body text on purpose — this is a quiet prompt, not a shout. The
   heading *level* is h2 because of where it sits in the page outline, which is
   a separate question from how big it looks. */
.next-step h2 { margin: 0.1875rem 0 0; font-weight: 550; font-size: 0.875rem; letter-spacing: normal; }
.next-step .eyebrow { font-size: 0.5625rem; margin: 0; }
.next-step > .btn { flex: none; background: transparent; border-color: color-mix(in srgb, var(--green) 24%, var(--line)); }

/* ------------------------------------------------------ capture tiles -- */

/* Wide enough that the one-line hint stays one or two lines rather than
 * breaking after every word. */
.quick-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13.25rem, 100%), 1fr)); gap: 0.875rem; }
.quick-tile {
  background: var(--surface); min-height: 5.75rem;
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.125rem;
  display: flex; align-items: center; gap: 0.8125rem; text-align: left;
  font-size: 0.875rem; font-weight: 550;
  transition: transform var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease);
}
.quick-tile .tile-label { flex: 1; min-width: 0; }
.quick-tile .capture-hint { display: block; font-size: 0.75rem; margin-top: 0.25rem; color: var(--muted); font-weight: 400; line-height: 1.4; text-wrap: pretty; }
.tile-icon { border-radius: 14px; width: 2.875rem; height: 2.875rem; flex: none; display: grid; place-items: center; background: var(--surface-3); }
.tile-plus { color: var(--muted); flex: none; }
.quick-tile.peach .tile-icon { background: var(--peach); }
.quick-tile.blue .tile-icon { background: var(--blue); }
.quick-tile.mint .tile-icon { background: var(--mint); }
.quick-tile.lavender .tile-icon { background: var(--lavender); }
@media (hover: hover) and (pointer: fine) {
  .quick-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--green) 22%, var(--line)); }
}
.quick-tile:active { transform: scale(.98); }

/* ----------------------------------------------------------- metrics -- */

.visual-metrics .metric { background: var(--surface); border: 1px solid var(--line); min-height: 11.5rem; display: flex; flex-direction: column; }
.metric-icon { border-radius: 12px; width: 2.125rem; height: 2.125rem; display: grid; place-items: center; flex: none; }
.metric-icon.sleep { background: var(--lavender); }
.metric-icon.heart { background: var(--peach); }
.metric-icon.steps { background: var(--mint); }
.metric-head { display: flex; align-items: center; gap: 0.625rem; font-size: 0.8125rem; font-weight: 550; }
/* A duration like "7h 27m" must not break across lines; it reads as two
 * different numbers when it does. */
.metric .value { font-size: clamp(1.625rem, 2.4vw, 2.125rem); font-weight: 500; letter-spacing: -0.044118em; margin: 1rem 0 0; font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; }
.metric .value small { font-size: 0.875rem; letter-spacing: 0; color: var(--muted); font-weight: 400; }
.metric-body { flex: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 0.625rem; min-width: 0; }
.metric .foot { display: flex; justify-content: space-between; gap: 0.625rem; font-size: 0.71875rem; color: var(--muted); border-top: 1px solid var(--line-soft); padding-top: 0.75rem; margin-top: 0.875rem; }

/* -------------------------------------------------------------- care -- */

.care-preview { background: var(--violet-bg); border-color: transparent; }
.care-preview h2 { font-size: 1.625rem; max-width: 16ch; }

.care-story {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 0;
  margin-bottom: 1.5rem; padding: 1.5rem;
  background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius);
}
.story-node { display: flex; gap: 0.8125rem; padding: 0 1.25rem; min-width: 0; border-right: 1px solid color-mix(in srgb, var(--green) 14%, transparent); }
.story-node:first-child { padding-left: 0; }
.story-node:last-child { border-right: 0; padding-right: 0; }
.story-icon { width: 2.375rem; height: 2.375rem; border-radius: 12px; background: var(--surface); display: grid; place-items: center; flex: none; }
.story-node h2 { font-size: 0.875rem; line-height: 1.4; margin: 0.4375rem 0 0.3125rem; }
.story-node p { font-size: 0.75rem; color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.story-node .eyebrow { font-size: 0.5625rem; margin: 0; }

/* The purple edge marks guidance. The words beside it say the review state;
 * the colour never says it alone. */
.care-main { border-top: 4px solid var(--violet); }
.care-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.care-title { display: flex; align-items: center; gap: 0.875rem; margin: 1.125rem 0 0.875rem; }
.care-title h2 { margin: 0; }
.care-icon { width: 2.875rem; height: 2.875rem; border-radius: 14px; background: var(--lavender); display: grid; place-items: center; flex: none; }
.guidance { font-size: 1.25rem; line-height: 1.6; max-width: 48ch; font-weight: 400; }

/* AI drafted → doctor reviewed, as a visible two-stop progress. */
.review-track { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; margin-top: 1rem; font-size: 0.78125rem; }
.review-stop { display: inline-flex; align-items: center; gap: 0.4375rem; color: var(--muted); font-weight: 550; }
.review-stop.done { color: var(--ink); }
.review-rule { flex: 0 1 3.75rem; height: 1px; background: var(--line); min-width: 1.5rem; }
.review-caption { font-size: 0.75rem; color: var(--muted); margin-top: 0.5rem; }

.team-card { align-self: start; }

/* ------------------------------------------------------------ admin -- */

.task-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13.125rem, 100%), 1fr)); gap: 1rem; }
.task-stat {
  border: 1px solid transparent; border-radius: var(--radius-md); padding: 1.375rem;
  display: grid; gap: 0.625rem; text-align: left; width: 100%;
  box-shadow: 0 5px 18px rgba(41, 64, 51, .02);
  transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}
.task-stat .stat { font-size: 2.125rem; font-weight: 500; letter-spacing: -0.041176em; line-height: 1; font-variant-numeric: tabular-nums; }
.task-stat .stat-label { font-size: 0.875rem; font-weight: 550; }
.task-stat .icon-chip { width: 2.375rem; height: 2.375rem; border-radius: 12px; background: rgba(255, 255, 255, .62); display: grid; place-items: center; }
.task-stat.lavender { background: var(--lavender); }
.task-stat.amber { background: var(--amber-bg); }
.task-stat.mint { background: var(--mint); }
.task-stat .stat-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
@media (hover: hover) and (pointer: fine) { .task-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); } }
.task-stat:active { transform: scale(.99); }
:root[data-theme="dark"] .task-stat .icon-chip { background: rgba(255, 255, 255, .08); }

/* ---------------------------------------------------------- clinician -- */

.doctor-summary {
  background: var(--on-dark-panel); color: var(--on-dark-text); padding: 2rem; border-radius: 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.doctor-summary .eyebrow { color: var(--on-dark-muted); }
.doctor-summary h2 { font-weight: 500; font-size: clamp(1.375rem, 2.3vw, 1.9375rem); max-width: 20ch; }
.doctor-summary .btn.primary { background: var(--on-dark-accent); color: var(--on-dark-panel); border: 0; }
.review-orbit {
  width: 8.25rem; height: 8.25rem; flex: none; border-radius: 50%;
  border: 6px solid #698977; box-shadow: 0 0 0 10px rgba(255, 255, 255, .03);
  color: #e3f1d7; display: grid; place-items: center; text-align: center; gap: 2px;
}
.review-orbit .orbit-num { font-size: 2.625rem; font-weight: 500; letter-spacing: -0.038095em; line-height: 1; font-variant-numeric: tabular-nums; }
.review-orbit > span:last-child { font-size: 0.5625rem; letter-spacing: 0.066667em; text-transform: uppercase; }

.patient-signals {
  background: var(--surface-3); border-radius: var(--radius-md);
  padding: 1.0625rem 1.25rem; display: flex; gap: 1.625rem; flex-wrap: wrap; align-items: center; margin: 1rem 0;
}
.patient-signals span { display: inline-flex; align-items: center; gap: 0.5625rem; font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.031579em; font-variant-numeric: tabular-nums; }
.patient-signals small { font-size: 0.75rem; color: var(--muted); font-weight: 400; letter-spacing: 0; }

/* ---------------------------------------------------------- utilities -- */

/* A small, named set, so no view needs an inline px value that would sit
 * outside the rem scale. */
.push { margin-top: 0.875rem; }
.push-lg { margin-top: 1.125rem; }
.flush { margin: 0; }
.gap-xs { gap: 2px; }
.spread { justify-content: space-between; }
.row.flush-row { padding: 0; border: 0; }
.section-head.compact { margin-bottom: 0.375rem; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; word-break: break-all; }

.avatar.lg { width: 4.75rem; height: 4.75rem; font-size: 1.375rem; }

/* Text and secondary buttons that sit on a fixed dark panel. */
.on-dark-note { color: var(--on-dark-muted); font-size: 0.8125rem; }
.btn.on-dark-ghost { background: rgba(255, 255, 255, .1); color: var(--on-dark-text); border: 0; }
.btn.on-dark-ghost:hover { background: rgba(255, 255, 255, .16); }

/* ------------------------------------------------------- capture UI -- */

/* Big, obvious first choices: take a photo, choose one, or type it. */
.choice.big { min-height: 4.5rem; gap: 0.875rem; }
.choice.big strong { display: block; font-weight: 600; }
.choice-icon {
  width: 2.5rem; height: 2.5rem; flex: none; border-radius: 0.75rem;
  background: var(--surface-3); display: grid; place-items: center;
}

.step-count { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09375em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 0.25rem; }

/* Amount and duration presets: most answers are one tap. */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  min-height: 2.75rem; padding: 0.5rem 1rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font-size: 0.875rem; font-weight: 600;
  transition: background var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease),
              transform var(--motion-fast) var(--motion-ease);
}
@media (hover: hover) and (pointer: fine) { .chip:hover { background: var(--mint); } }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { background: var(--mint); border-color: var(--green); }

.photo-preview {
  border-radius: var(--radius-md); overflow: hidden; background: var(--surface-3);
  display: grid; place-items: center; min-height: 9rem;
}
.photo-preview img { display: block; width: 100%; height: auto; max-height: 20rem; object-fit: contain; }
.photo-file { display: flex; align-items: center; gap: 0.75rem; padding: 1.5rem; font-size: 0.875rem; }

.form-error {
  margin: 0; padding: 0.75rem 0.875rem;
  border-radius: var(--radius-sm);
  background: var(--red-bg); color: var(--red);
  font-size: 0.8125rem; font-weight: 550;
}

/* A stored original on the timeline, with its own honest caption. */
.entry-thumb {
  width: 3.25rem; height: 3.25rem; flex: none; border-radius: 0.75rem;
  object-fit: cover; background: var(--surface-3);
}
.analysis-note { font-size: 0.6875rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .chip:active { transform: none !important; }
}
html[data-motion="off"] .chip:active { transform: none !important; }

/* ------------------------------------------------------ history view -- */

/* A long stretch, one row per period. Coverage sits on every row because two
 * months with the same middle and very different coverage are not the same. */
.history-head, .history-row {
  display: grid;
  grid-template-columns: minmax(4.5rem, 6rem) minmax(0, 1fr) minmax(4rem, 6rem) 3rem;
  gap: 0.75rem;
  align-items: center;
}
.history-head { padding: 0 0 0.5rem; }
.history-rows { display: grid; }
.history-row {
  width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--line-soft);
  padding: 0.625rem 0; min-height: 2.75rem; font: inherit; color: inherit;
  transition: background var(--motion-fast) var(--motion-ease);
}
.history-row:last-child { border-bottom: 0; }
.history-row:not([disabled]) { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .history-row:not([disabled]):hover { background: var(--surface-3); }
}
.history-row[disabled] { cursor: default; opacity: .75; }

.history-label { font-size: 0.8125rem; font-weight: 600; }
.history-track { position: relative; height: 0.75rem; background: var(--surface-3); border-radius: 999px; min-width: 0; }
.history-bar {
  position: absolute; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--green) 40%, transparent);
  border-radius: 999px;
}
.history-dot {
  position: absolute; top: 50%; width: 0.5rem; height: 0.5rem;
  margin: -0.25rem 0 0 -0.25rem; border-radius: 50%;
  background: var(--green); border: 2px solid var(--surface);
}
.history-empty { font-size: 0.6875rem; color: var(--muted); padding-left: 0.5rem; line-height: 0.75rem; }
.history-value { font-size: 0.8125rem; font-variant-numeric: tabular-nums; font-weight: 550; text-align: right; }
.history-coverage { font-size: 0.6875rem; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }

@media (max-width: 45em) {
  .history-head, .history-row {
    grid-template-columns: minmax(3.75rem, 4.5rem) minmax(0, 1fr) minmax(3.25rem, 4.5rem);
  }
  .history-coverage { display: none; }
  .history-head > span:last-child { display: none; }
}

/* ------------------------------------------------------------ charts -- */

.chart-wrap { position: relative; }
.chart { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; }
.chart .axis-label { fill: var(--muted); font-size: 0.6875rem; font-family: inherit; }
.chart .series-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart .series-dot { stroke: var(--surface); stroke-width: 2; }
.chart .series-label { font-size: 0.75rem; font-weight: 640; font-family: inherit; }
.chart .crosshair { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity var(--motion-fast); }
.chart.hovering .crosshair { opacity: .7; }

.spark { width: 100%; height: 2.625rem; display: block; overflow: visible; }
.spark path { fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark .area { fill: color-mix(in srgb, var(--green) 11%, transparent); stroke: none; }
.metric-spark { width: clamp(3.25rem, 34%, 5.375rem); flex: none; }

.tooltip {
  position: absolute; z-index: 5; pointer-events: none;
  padding: 0.5625rem 0.75rem; border-radius: 11px;
  background: var(--on-dark-panel); color: #f2f7ee;
  font-size: 0.78125rem; line-height: 1.45; white-space: nowrap;
  box-shadow: var(--shadow-lift);
  opacity: 0; transform: translate(-50%, -12px);
  transition: opacity var(--motion-fast) var(--motion-ease);
}
.tooltip.on { opacity: 1; }
.tooltip b { font-variant-numeric: tabular-nums; }

.legend { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 0.75rem; font-size: 0.78125rem; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 0.4375rem; }
.legend i { width: 0.6875rem; height: 0.6875rem; border-radius: 3px; display: inline-block; }

table.data { width: 100%; border-collapse: collapse; font-size: 0.8125rem; margin-top: 0.75rem; }
table.data th, table.data td { text-align: left; padding: 0.4375rem 0.625rem 0.4375rem 0; border-bottom: 1px solid var(--line-soft); }
table.data th { color: var(--muted); font-weight: 640; font-size: 0.71875rem; text-transform: uppercase; letter-spacing: 0.069565em; }
table.data td { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- forms -- */

.field { display: grid; gap: 0.375rem; margin-bottom: 0.875rem; }
.field label { font-size: 0.8125rem; font-weight: 640; }
.field input, .field textarea, .field select {
  min-height: 3rem; padding: 0.75rem 0.875rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); font-size: 1rem;
  transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}
.field textarea { min-height: 6.25rem; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 13%, transparent); outline: none;
}
.field .hint { font-size: 0.78125rem; color: var(--muted); }

.choice-set { display: grid; gap: 0.625rem; }
.choice {
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 3.25rem; padding: 0.75rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); text-align: left; font-size: 0.9375rem; font-weight: 550;
  transition: border-color var(--motion-fast) var(--motion-ease),
              background var(--motion-fast) var(--motion-ease),
              transform var(--motion-fast) var(--motion-ease);
}
@media (hover: hover) and (pointer: fine) { .choice:hover { border-color: var(--green); } }
.choice:active { transform: scale(.98); }
.choice[aria-pressed="true"] { background: var(--mint); border-color: var(--green); }

.checkline { display: flex; gap: 0.6875rem; align-items: flex-start; padding: 0.875rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-3); }
.checkline input { width: 1.375rem; height: 1.375rem; margin: 2px 0 0; flex: none; accent-color: var(--green); }
.checkline label, .checkline p { font-size: 0.84375rem; line-height: 1.5; margin: 0; }

/* --------------------------------------------------------- gate view -- */

.gate { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.gate-card {
  width: min(29.375rem, 100%); background: var(--surface);
  border: 1px solid var(--line); border-radius: 28px; padding: 2.125rem;
  box-shadow: var(--shadow-card);
  animation: enter var(--motion-standard) var(--motion-ease) both;
}
.gate .brand { margin-bottom: 1.25rem; }
.tabs { display: flex; gap: 0.375rem; padding: 0.3125rem; background: var(--surface-3); border-radius: var(--radius-sm); margin-bottom: 1.375rem; }
.tabs button {
  flex: 1; min-height: 2.75rem; border: 0; border-radius: 10px; background: transparent;
  font-size: 0.875rem; font-weight: 600; color: var(--muted);
  transition: background var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease);
}
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }

.code-display {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.875rem; letter-spacing: 0.1em; text-align: center;
  padding: 1.125rem; border-radius: 16px; background: var(--mint); color: var(--on-mint);
}

/* -------------------------------------------------------------- guide -- */

/* PSC's own palette, carried over so a client who was sent the images
   recognises the same pages here. The topic colour is the page's identity, not
   decoration: sleep is read at night, the alcohol page is read the morning
   after, and both were designed that way. */
.tone-teal  { --guide-ink: #0e5b57; --guide-accent: #c9a227; }
.tone-night { --guide-ink: #1d2a4a; --guide-accent: #c9a227; }
.tone-clay  { --guide-ink: #7a3414; --guide-accent: #e0a33c; }
.tone-wine  { --guide-ink: #5c1a33; --guide-accent: #d9a441; }

.guide-index { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.guide-tile {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 0.25rem 0.75rem; text-align: left; cursor: pointer;
  padding: 1.125rem 1.25rem; border: 0; border-radius: var(--radius);
  background: var(--guide-ink); color: #fff;
  transition: transform var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease);
}
.guide-tile-title { font-size: 1.0625rem; font-weight: 650; }
.guide-tile-sub { grid-column: 1; font-size: 0.875rem; opacity: 0.82; }
.guide-tile-go { grid-row: 1 / span 2; grid-column: 2; display: grid; place-items: center; opacity: 0.8; }
@media (hover: hover) and (pointer: fine) {
  .guide-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
}
.guide-tile:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.guide-back { align-self: start; }

.guide-hero {
  background: var(--guide-ink); color: #fff;
  border-radius: var(--radius); padding: 1.75rem 1.5rem;
}
.guide-eyebrow {
  margin: 0 0 0.75rem; font-size: 0.75rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--guide-accent);
}
.guide-hero h1 { margin: 0; font-size: clamp(1.625rem, 5vw, 2.125rem); line-height: 1.22; }
.guide-hero-sub { margin: 0.5rem 0 0; font-weight: 600; opacity: 0.92; }
/* The gold rule under the subtitle is PSC's; it separates the claim from the
   explanation without needing a second type size. */
.guide-lede {
  margin: 1rem 0 0; padding-top: 1rem; opacity: 0.88; font-size: 0.9375rem;
  border-top: 2px solid var(--guide-accent); max-width: 44rem;
}

.guide-section { display: grid; gap: 0.75rem; }
/* The ▌ before a heading is PSC's section mark. */
.guide-section h2 {
  margin: 0; font-size: 1.25rem; color: var(--guide-ink);
  border-left: 4px solid var(--guide-ink); padding-left: 0.625rem;
}
:root[data-theme="dark"] .guide-section h2,
.guide-chip, .guide-stat-value { color: inherit; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .guide-section h2 { color: var(--ink); border-left-color: var(--green); }
}
:root[data-theme="dark"] .guide-section h2 { color: var(--ink); border-left-color: var(--green); }
.guide-hint, .guide-after { margin: 0; color: var(--muted); font-size: 0.875rem; max-width: 44rem; }

.guide-cards, .guide-pairs { display: grid; gap: 0.625rem; }
.guide-pairs { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
/* Short, parallel cards read better side by side; prose cards do not, which is
   why only the arrow set opts in. */
.guide-cards.cols { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.guide-card, .guide-pair {
  background: var(--surface); border-radius: var(--radius-sm);
  padding: 0.9375rem 1.0625rem; border: 1px solid var(--line);
}
.guide-card strong, .guide-pair strong { display: block; margin-bottom: 0.25rem; }
.guide-card p, .guide-pair p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }

.guide-stats { display: grid; gap: 0.625rem; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); }
.guide-stat {
  display: grid; gap: 0.125rem; text-align: center; padding: 1rem 0.75rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.guide-stat-value { font-size: 1.125rem; font-weight: 700; color: var(--guide-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .guide-stat-value { color: var(--ink); }
}
:root[data-theme="dark"] .guide-stat-value { color: var(--ink); }
.guide-stat-label { font-size: 0.8125rem; color: var(--muted); }

.guide-steps, .guide-list { margin: 0; padding-left: 1.5rem; display: grid; gap: 0.625rem; }
.guide-steps li::marker, .guide-list li::marker { color: var(--guide-ink); font-weight: 700; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .guide-steps li::marker,
  :root:not([data-theme="light"]) .guide-list li::marker { color: var(--green); }
}
:root[data-theme="dark"] .guide-steps li::marker,
:root[data-theme="dark"] .guide-list li::marker { color: var(--green); }
.guide-steps strong { display: block; }
.guide-steps p, .guide-list p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }

.guide-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.guide-chip {
  padding: 0.4375rem 0.8125rem; border-radius: 999px; font-size: 0.875rem;
  background: var(--surface-2); color: var(--ink-2);
}

.guide-timeline { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.guide-timeline li { display: flex; align-items: center; gap: 0.625rem; }
.guide-dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--guide-ink); flex: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .guide-dot { background: var(--green); }
}
:root[data-theme="dark"] .guide-dot { background: var(--green); }
.guide-timeline p { margin: 0; font-size: 0.9375rem; }

.guide-tiers { display: grid; gap: 0.625rem; grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); }
.guide-tier { padding: 1rem; border-radius: var(--radius-sm); text-align: center; border: 1px solid var(--line); }
.guide-tier strong { display: block; font-size: 1.0625rem; }
.guide-tier p { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--ink-2); }
/* Filled, tinted, outlined — the same descending weight PSC uses, so the three
   tiers cannot be mistaken for three equal options. */
.guide-tier.tier-primary { background: var(--guide-ink); color: #fff; border-color: transparent; }
.guide-tier.tier-primary p { color: rgba(255, 255, 255, 0.82); }
.guide-tier.tier-supporting { background: var(--surface-2); }
.guide-tier.tier-personal { background: var(--surface); }

.guide-card.arrow { position: relative; padding-top: 2.25rem; }
.guide-arrow { position: absolute; top: 0.875rem; left: 1.0625rem; font-size: 1.125rem; font-weight: 700; }
.guide-card.arrow.up .guide-arrow { color: #b4453a; }
.guide-card.arrow.down .guide-arrow { color: #3f6ea8; }

.guide-bars { display: grid; gap: 0.625rem; }
.guide-bar-row { display: grid; grid-template-columns: minmax(4.5rem, auto) 1fr auto; align-items: center; gap: 0.75rem; }
.guide-bar-label { font-size: 0.875rem; }
.guide-bar-track { height: 0.625rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.guide-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--guide-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .guide-bar-fill { background: var(--green); }
}
:root[data-theme="dark"] .guide-bar-fill { background: var(--green); }
.guide-bar-value { font-weight: 700; font-size: 0.9375rem; color: var(--guide-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .guide-bar-value { color: var(--ink); }
}
:root[data-theme="dark"] .guide-bar-value { color: var(--ink); }

.guide-callout {
  padding: 1rem 1.125rem; border-radius: var(--radius-sm);
  background: var(--surface-2); border-left: 4px solid var(--guide-accent);
}
.guide-callout strong { display: block; margin-bottom: 0.25rem; }
.guide-callout p { margin: 0; font-size: 0.9375rem; color: var(--ink-2); }

/* Every page ends with its own warning, and they are not interchangeable. */
.guide-note {
  padding: 1rem 1.125rem; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line);
}
.guide-note strong { display: block; margin-bottom: 0.25rem; color: var(--guide-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .guide-note strong { color: var(--ink); }
}
:root[data-theme="dark"] .guide-note strong { color: var(--ink); }
.guide-note p { margin: 0; font-size: 0.875rem; color: var(--ink-2); }

/* ------------------------------------------------------------ welcome -- */

.welcome { max-width: 40rem; }
.welcome-card { display: grid; gap: 0.875rem; }
.welcome-card h1 { font-size: clamp(1.5rem, 5vw, 1.875rem); margin: 0; }
.welcome-card .sub { margin: 0; color: var(--ink-2); }

/* Three dots, not a percentage bar. The point is "this is short", which a
   bar implies less well than three things you can count. */
.welcome-progress { display: flex; gap: 0.375rem; }
.welcome-dot {
  width: 1.75rem; height: 0.25rem; border-radius: 999px; background: var(--line);
  transition: background var(--motion-fast) var(--motion-ease);
}
.welcome-dot.on { background: var(--green); }

.welcome-points { display: grid; gap: 0.75rem; }
.welcome-point { display: flex; gap: 0.75rem; align-items: flex-start; }
.welcome-point-icon {
  flex: none; width: 2.25rem; height: 2.25rem; border-radius: 12px;
  display: grid; place-items: center; background: var(--mint); color: var(--on-mint);
}
.welcome-point strong { display: block; }
.welcome-point p { margin: 0.125rem 0 0; color: var(--ink-2); font-size: 0.9375rem; }

/* A chosen band is marked by the tick, the border and aria-pressed — three
   signals, because this is the one answer the screen actually collects. */
.choice.chosen { border-color: var(--green); background: var(--mint); }
.choice.chosen strong, .choice.chosen .capture-hint { color: var(--on-mint); }

.welcome-actions { flex-wrap: wrap; }

/* ----------------------------------------------------------- progress -- */

.course-card { display: grid; gap: 0.875rem; }
.course-line {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.875rem 1rem; border-radius: var(--radius-sm); background: var(--surface-2);
}
.course-leg { display: grid; gap: 0.125rem; }
.course-leg .eyebrow { margin: 0; }
.course-arrow { color: var(--muted); display: grid; place-items: center; }
.course-points { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.comparison-head { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.comparison-head h2 { margin: 0; }
.comparison-row { flex-wrap: wrap; row-gap: 0.5rem; }
.comparison-value { display: grid; gap: 0.125rem; justify-items: end; text-align: right; }
.comparison-value strong { font-size: 1.25rem; }
.comparison-none { max-width: 18rem; text-align: right; }

/* Deliberately not red and green.
   Whether lower is better depends on the metric — a lower resting heart rate
   usually is, a lower sleep duration usually is not — and on the person. A
   green arrow is a clinical verdict rendered in CSS, and §九 leaves those
   thresholds to the attending doctor. So movement is distinguished from
   stability, and nothing is distinguished as good.
   The arrow and the word carry the direction; colour carries none of it. */
.comparison-dir { display: inline-flex; align-items: center; gap: 0.3125rem; }
.comparison-dir.higher, .comparison-dir.lower { color: var(--ink-2); font-weight: 600; }
.comparison-dir.similar { color: var(--muted); }

/* --------------------------------------------------- metric grading -- */

/* Not every reading is the same kind of fact. A resting heart rate a doctor
   compares before and after a treatment, and a score the device invented, must
   not be presented in the same weight — PSC already separates them on the page
   clients are given, and this is the same separation. */
.metric-group { padding: 0.75rem 0 0; }
.metric-group .eyebrow { margin-bottom: 0.125rem; }
.metric-group .small { margin: 0 0 0.5rem; max-width: 46rem; }
.stack.tight { gap: 0.25rem; }

.tier-badge {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em;
  padding: 0.25rem 0.625rem; border-radius: 999px; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2);
}
/* Only the doctor-reviewed tier gets the filled treatment. Giving all three a
   colour would flatten them back into looking equally weighted. */
.tier-badge.tier-primary { background: var(--green-deep); color: #eef4e8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tier-badge.tier-primary { background: var(--mint); color: var(--ink); }
}
:root[data-theme="dark"] .tier-badge.tier-primary { background: var(--mint); color: var(--ink); }

.disclaimer { max-width: 46rem; padding-top: 0.5rem; }

/* ------------------------------------------------------------ pairing -- */

/* The QR is printed and photographed, so it keeps paper-and-ink colours in
   both themes: inverting it in dark mode makes it harder for a camera, not
   easier for a reader. */
.qr-frame {
  margin: 0; padding: 0.75rem; border-radius: 16px; background: #fff;
  display: grid; justify-items: center;
}
.qr { width: min(15rem, 100%); height: auto; }

/* Read across a room, and matched against the other screen by eye. */
.pairing-word {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: clamp(2.25rem, 12vw, 3.25rem); letter-spacing: 0.12em;
  text-align: center; margin: 0.5rem 0 0.75rem;
  padding: 1rem 0.75rem; border-radius: 18px;
  background: var(--mint); color: var(--on-mint);
}

.pairing-chip {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1rem; letter-spacing: 0.08em; padding: 0.375rem 0.75rem;
  border-radius: 999px; background: var(--mint); color: var(--on-mint);
  white-space: nowrap;
}

.pairing-row { flex-wrap: wrap; row-gap: 0.625rem; }

.pairing-waiting { display: flex; align-items: center; gap: 0.5rem; justify-content: center; }
.pairing-dot {
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--green);
  animation: pairing-pulse 1.6s var(--motion-ease) infinite;
}
@keyframes pairing-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .pairing-dot { animation: none; opacity: 0.8; }
}

/* A sticker URL has no spaces to break at. */
.wrap { overflow-wrap: anywhere; }

/* ------------------------------------------------------- toast/modal -- */

#toast-zone {
  position: fixed; left: 50%; bottom: 1.625rem; transform: translateX(-50%);
  z-index: 100; display: grid; gap: 0.5625rem; justify-items: center;
  pointer-events: none; width: min(28.75rem, calc(100vw - 2rem));
}
/* Opacity only. The toast does not travel. */
.toast { padding: 0.8125rem 1.125rem; border-radius: var(--radius-sm); background: var(--on-dark-panel); color: #eef4e8; font-size: 0.875rem; box-shadow: var(--shadow-lift); animation: fade var(--motion-standard) var(--motion-ease) both; }
.toast.bad { background: var(--red); color: #fff; }
:root[data-theme="dark"] .toast.bad { color: #2a1210; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.toast.out { animation: fade-out var(--motion-fast) var(--motion-ease) forwards; }
@keyframes fade-out { to { opacity: 0; } }

dialog {
  border: 1px solid var(--line); border-radius: 26px; padding: 0;
  width: min(36.25rem, calc(100vw - 1.75rem)); max-height: 88vh;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-modal);
}
dialog::backdrop { background: rgba(16, 47, 40, .43); backdrop-filter: blur(5px); }
dialog[open] { animation: enter var(--motion-standard) var(--motion-ease) both; }
.modal-body { padding: 1.625rem; overflow: auto; max-height: 88vh; }
.modal-header {
  position: sticky; top: -1.625rem; background: var(--surface);
  padding: 0.25rem 0 0.875rem; margin: -0.25rem 0 0.25rem; z-index: 1;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 0.5rem;
}
/* The title sits between the two controls and keeps its place when the back
   button appears, so the header does not jump between steps. */
.modal-header h2 { letter-spacing: -0.034783em; margin: 0; grid-column: 2; }
.modal-header #dialog-back { grid-column: 1; }
.modal-header .modal-close { grid-column: 3; }
.modal-header #dialog-back[hidden] { display: none; }

/* 44px: a control you reach for on a phone, at the size a thumb expects. */
.modal-nav {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-2);
  cursor: pointer; padding: 0;
  transition: background var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
.modal-nav:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .modal-nav:hover { background: var(--surface-2); color: var(--ink); }
}

/* ---------------------------------------------------------- skeleton -- */

/* Shown only while a real request is in flight. */
.skeleton { border-radius: var(--radius); min-height: 7.25rem; background: var(--surface-2); }

/* -------------------------------------------------------- responsive -- */

@media (max-width: 71.875em) {
  .signal-hero { padding: 1.5625rem; gap: 1rem; }
  .signal-hero h2 { font-size: 2rem; }
  .week-visual { padding: 0.875rem; }
  .sleep-total { font-size: 2.0625rem; }
  .week-columns { gap: 0.3125rem; }
  .story-node { padding: 0 0.75rem; gap: 0.5625rem; }
  .story-icon { width: 1.875rem; height: 1.875rem; }
}

@media (max-width: 62.5em) {
  .signal-hero { min-height: 18.125rem; }
  .week-visual { max-width: 16.875rem; margin-left: auto; }
  .care-story { padding: 1.25rem; }
  .story-node, .story-node:first-child, .story-node:last-child {
    padding: 0.9375rem 0; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--green) 14%, transparent);
  }
  .story-node:first-child { padding-top: 0; }
  .story-node:last-child { padding-bottom: 0; border-bottom: 0; }
  .story-icon { width: 2.375rem; height: 2.375rem; }
}

@media (max-width: 45em) {
  .app { display: block; }
  .sidebar {
    padding: 0.9375rem 1.0625rem 0.625rem; border-right: 0;
    flex-direction: row; align-items: center; justify-content: space-between; gap: 0.625rem;
  }
  .sidebar-foot, .workspace-label { display: none; }

  /* Bottom navigation. Every destination stays reachable: the strip scrolls
   * rather than dropping or squashing labels. */
  .nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 25;
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0));
    display: flex; gap: 2px; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav button {
    flex: 1 0 auto; min-width: 4.625rem; padding: 0.4375rem 0.5rem; font-size: 0.65625rem;
    border-radius: 12px; min-height: 3.375rem;
    flex-direction: column; gap: 0.1875rem; text-align: center; justify-content: center;
  }
  .nav button span { white-space: nowrap; }
  .nav button[aria-current="page"] { background: var(--mint); color: var(--on-mint); box-shadow: none; }

  .topbar { height: 3.25rem; padding: 0 1.0625rem; border-bottom: 1px solid var(--line); }
  .topbar-breadcrumb { font-size: 0.71875rem; }
  .topbar .live-dot, .topbar .connected-label { display: none; }
  main { padding: 1.375rem 1.0625rem 2.125rem; }
  footer { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0)); font-size: 0.625rem; }
  /* Feedback clears the tab bar. */
  #toast-zone { bottom: calc(5.375rem + env(safe-area-inset-bottom, 0)); z-index: 20; }

  .signal-hero { padding: 1.5rem 1.25rem; gap: 1rem; border-radius: 25px; min-height: 17.5rem; }
  .signal-hero h2 { font-size: 1.875rem; letter-spacing: -0.033333em; margin-top: 1rem; }
  .signal-hero p { font-size: 0.75rem; }
  .week-visual { padding: 0.8125rem 0.625rem; border-radius: 17px; }
  .week-head { font-size: 0.5rem; }
  .sleep-total { font-size: 1.8125rem; letter-spacing: -0.034483em; }
  .sleep-total small { font-size: 0.75rem; margin: 0 0.1875rem; }
  .signal-caption { font-size: 0.5625rem; }
  .week-columns { height: 5.6875rem; gap: 0.3125rem; }
  .checkin-card { padding: 1.3125rem; border-radius: 24px; }
  .next-step { padding: 0.9375rem; gap: 0.625rem; flex-wrap: wrap; }
  .next-step > .btn { margin-left: 3.625rem; min-height: 2.75rem; }
  .section-head h2 { font-size: 1.25rem; }
  .visual-metrics .metric { min-height: 9.5rem; }
  .metric .value { font-size: 1.875rem; }
  .guidance { font-size: 1.125rem; }
  .doctor-summary { padding: 1.5625rem 1.375rem; }
  .review-orbit { width: 5.5rem; height: 5.5rem; border-width: 5px; }
  .review-orbit .orbit-num { font-size: 2rem; }
  .review-orbit > span:last-child { font-size: 0.5rem; letter-spacing: 0.05em; }
  /* A card header stacks rather than squeezing a name against a status. */
  .card > .row { flex-wrap: wrap; }
  .card > .row .row-main { flex-basis: 60%; }
  .patient-signals { padding: 0.9375rem; gap: 1rem; }

  /* Counts become readable rows rather than three squeezed squares. */
  .task-stats { grid-template-columns: 1fr; }
  .task-stat { grid-template-columns: 2.625rem 1fr auto; grid-auto-rows: auto; align-items: center; padding: 1.0625rem; gap: 0.75rem; }
  .task-stat .stat-row { display: contents; }
  .task-stat .icon-chip { grid-column: 1; }
  .task-stat .stat-label { grid-column: 2; font-size: 0.84375rem; }
  .task-stat .stat { grid-column: 3; font-size: 1.8125rem; }
  .task-stat .stat-note { grid-column: 1 / -1; }
}

@media (max-width: 23.75em) {
  .signal-hero h2 { font-size: 2rem; }
  .week-visual { max-width: none; margin-left: 0; }
  .signal-hero p { max-width: none; }
  .week-columns { height: 5rem; }
  .next-step > .btn { margin-left: 0; width: 100%; }
  .review-orbit { width: 4.5rem; height: 4.5rem; }
  .nav button { min-width: 4.125rem; font-size: 0.59375rem; }
  .mood-options { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------- reduced motion -- */

/* Two switches, same result: the OS setting and the header control. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .card.interactive:hover, .quick-tile:hover, .btn:hover, .task-stat:hover { transform: none; }
  .card.interactive:active, .quick-tile:active, .btn:active,
  .mood-options button:active, .choice:active, .task-stat:active { transform: none !important; }
}

html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}
html[data-motion="off"] :is(.card.interactive, .quick-tile, .btn, .task-stat):hover { transform: none; }
html[data-motion="off"] :is(.card.interactive, .quick-tile, .btn, .mood-options button, .choice, .task-stat):active { transform: none !important; }

/* In dark mode the brand green becomes light, so white text on it drops well
 * under 4.5:1. Dark ink on the same green is the readable pairing. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn.primary,
  :root:not([data-theme="light"]) .nav button[aria-current="page"] {
    color: var(--green-deep);
  }
}
:root[data-theme="dark"] .btn.primary,
:root[data-theme="dark"] .nav button[aria-current="page"] { color: var(--green-deep); }

/* On a dark page these panels need an edge, or they merge into the canvas. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .signal-hero,
  :root:not([data-theme="light"]) .doctor-summary {
    border: 1px solid #2c4a40;
  }
}
:root[data-theme="dark"] .signal-hero,
:root[data-theme="dark"] .doctor-summary { border: 1px solid #2c4a40; }

@media (prefers-contrast: more) {
  .card, .btn, .quick-tile, .field input, .task-stat { border-width: 2px; }
}