/* ===========================================================================
   Unite engagement app — design system.

   Everything here is derived from uniteyourhealth.com: the type stack
   (Crimson Text display / Source Serif 4 subhead / Inter UI), the palette
   (orange #ff4800, blue #1b56ab, cream #fff4df, pale blue #a8d3ff), the
   cream→pale-blue gradient the marketing hero uses, the pill buttons, and the
   very round (30px) card corners.

   Deliberately light-only. There is no dark-mode block and none should be
   added: the brand is a warm cream ground, and a dark inversion of it is a
   different product.
   =========================================================================== */

:root {
  /* Brand ------------------------------------------------------------------ */
  --orange:       #ff4800;
  --orange-deep:  #e04000;
  --blue:         #1b56ab;
  --blue-ink:     #123c79;
  --blue-pale:    #a8d3ff;
  --blue-wash:    #eef4fd;
  --cream:        #fff4df;
  --cream-deep:   #f7ead1;

  /* Extended for product surfaces the marketing site has no need for.
     The green is the one addition: it carries "healthy / on" state, and it is
     the color the insight and toggle designs were first drawn in. */
  --green:        #0f7a5f;
  --green-wash:   #e9f5f0;
  --amber:        #b26a00;

  /* Ink -------------------------------------------------------------------- */
  --ink:          #241f1f;
  --muted:        #5a5454;   /* the site's --color-dark-gray */
  --faint:        #8b8480;

  /* Surfaces --------------------------------------------------------------- */
  --paper:        #ffffff;
  --line:         #e8e1d6;
  --line-soft:    #f1ece3;

  --radius-lg:    30px;
  --radius:       20px;
  --radius-sm:    14px;

  --shadow:       0 1px 2px rgba(36,31,31,.04), 0 12px 32px -18px rgba(36,31,31,.28);
  --shadow-lift:  0 2px 6px rgba(36,31,31,.06), 0 26px 54px -24px rgba(36,31,31,.34);

  --font-display: "Crimson Text", Georgia, "Times New Roman", serif;
  --font-serif:   "Source Serif 4", Georgia, serif;
  --font-ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --ease:         cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  min-height: 100dvh;
  background: var(--cream);
  color: var(--ink);
  font: 400 16px/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

/* ── type ─────────────────────────────────────────────────────────────────── */

.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.02;
}
.lede {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.45;
  letter-spacing: -.012em;
  color: var(--muted);
}
.eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blue);
}
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.tabular { font-variant-numeric: tabular-nums; }

/* ── buttons ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px;
  font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  transition: transform .16s var(--ease), background .16s, box-shadow .16s, border-color .16s, color .16s;
  white-space: nowrap;
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary { background: var(--orange); color: #fff; box-shadow: 0 10px 24px -12px rgba(255,72,0,.85); }
.btn-primary:hover:not(:disabled) { background: var(--orange-deep); box-shadow: 0 14px 30px -12px rgba(255,72,0,.9); }

.btn-secondary { background: var(--paper); color: var(--muted); border: 1px solid var(--muted); }
.btn-secondary:hover:not(:disabled) { background: #faf7f2; color: var(--ink); }

.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover:not(:disabled) { background: var(--blue-ink); }

.btn-quiet { color: var(--blue); padding: 9px 14px; font-size: 14.5px; }
.btn-quiet:hover { background: var(--blue-wash); }

.btn-sm { padding: 9px 18px; font-size: 14.5px; }
.btn-block { width: 100%; }

/* ── layout ───────────────────────────────────────────────────────────────── */

.shell {
  max-width: 1080px; margin: 0 auto;
  padding-left: calc(24px + env(safe-area-inset-left));
  padding-right: calc(24px + env(safe-area-inset-right));
}
@media (max-width: 620px) {
  .shell {
    padding-left: calc(18px + env(safe-area-inset-left));
    padding-right: calc(18px + env(safe-area-inset-right));
  }
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.card-pad { padding: 28px 30px; }
@media (max-width: 620px) { .card-pad { padding: 22px 20px; } }

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wrap    { flex-wrap: wrap; }
.gap-6 { gap: 6px } .gap-10 { gap: 10px } .gap-14 { gap: 14px }
.gap-20 { gap: 20px } .gap-28 { gap: 28px }
.mt-8 { margin-top: 8px } .mt-16 { margin-top: 16px } .mt-24 { margin-top: 24px }
.mt-36 { margin-top: 36px } .mt-52 { margin-top: 52px }

.rise { animation: rise .6s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ── the gradient ground ──────────────────────────────────────────────────── */

/* The marketing hero's cream → pale-blue wash, used behind the signed-out
   screen and the welcome flow. Fixed rather than scrolling so the app content
   floats over one continuous field. */
.sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--cream) 0%, #f2f2ea 34%, #e8f0ff 68%, var(--blue-pale) 100%);
}
.sky-soft {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--cream) 0%, #fffaf1 42%, #f4f7fb 100%);
}
.stage { position: relative; z-index: 1; }

/* ── header ───────────────────────────────────────────────────────────────── */

.masthead {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.84);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.masthead .shell { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 18px; }
.logo { height: 38px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 8px 15px; border-radius: 999px;
  font-size: 15px; font-weight: 600; color: var(--muted); text-decoration: none;
  transition: color .16s, background .16s;
}
.nav a:hover { color: var(--ink); background: #f6f2ea; }
.nav a[aria-current="page"] { color: var(--blue); background: var(--blue-wash); }

/* Sign out belongs to the chrome, not to the page. It sat beside the greeting
   before, where it read as an action on the greeting rather than on the
   session. The left border separates it from the nav links. */
.nav-signout {
  margin-left: 14px; padding: 7px 16px; font-size: 14px;
  border-left: 1px solid var(--line); border-radius: 999px;
}

.masthead-brand { display: flex; align-items: center; flex: none; }
.logo-mark { display: none; height: 30px; }

@media (max-width: 620px) {
  .masthead .shell { height: 58px; gap: 8px; }
  /* Three nav links plus Sign out plus a 3:1 wordmark do not fit a 320px
     viewport — the row silently overflowed. Below this width the brand becomes
     the mark alone, which is what the mark is for. */
  .logo-full { display: none; }
  .logo-mark { display: block; }
  .nav { gap: 0; }
  .nav a { padding: 9px 9px; font-size: 14px; }
  /* Four destinations plus Sign out do not fit 390pt, and on a phone an
     account action belongs on the account screen anyway. Settings carries it. */
  .nav-signout { display: none; }
}
@media (max-width: 380px) {
  .nav a { padding: 9px 7px; font-size: 13.5px; letter-spacing: -.01em; }
}

/* ── auth ─────────────────────────────────────────────────────────────────── */

/* ⚠️ Horizontal padding is inherited from .shell and must NOT be reset here.
   This was `padding: 40px 0 64px` — an ID selector, so the shorthand beat
   `.shell { padding: 0 24px }` and zeroed the sides. On a phone every word ran
   flush to the screen edge. #view-app escaped it only because its inline style
   sets padding-top/bottom as LONGHANDS. Use longhands here too. */
#view-auth {
  min-height: 100dvh; display: grid; place-items: center;
  padding-top: 40px;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

/* Two columns of pitch beside the card on a desktop; one column on a phone,
   where the ORDER changes: brand, one line of promise, then the form. Signing
   in is the job someone opened this to do — making them scroll past a full
   screen of marketing to reach the email field is the actual defect in the
   iOS screenshot, not just the missing gutter. */
.auth-grid {
  display: grid; width: 100%; max-width: 1080px;
  grid-template-columns: 1.05fr .95fr;
  grid-template-areas: "pitch card" "points card";
  column-gap: 56px; row-gap: 30px; align-items: start;
}
.auth-pitch   { grid-area: pitch; }
.pitch-points { grid-area: points; }
.auth-card    { grid-area: card; align-self: center; }

.auth-pitch h1 { font-size: clamp(34px, 6.6vw, 76px); }
.auth-pitch .lede { margin-top: 22px; max-width: 32ch; font-size: 20px; }
.pitch-points { display: flex; flex-direction: column; gap: 14px; }
.pitch-point { display: flex; gap: 13px; align-items: flex-start; font-size: 15.5px; color: var(--muted); }
.pitch-point svg { flex: none; margin-top: 2px; color: var(--blue); }

.auth-card { padding: 34px 34px 30px; }

@media (max-width: 900px) {
  .auth-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "pitch" "card" "points";
    row-gap: 26px;
  }
  .auth-pitch .logo { height: 36px !important; margin-bottom: 20px !important; }
  .auth-pitch .lede { font-size: 17px; margin-top: 14px; max-width: none; }
}
@media (max-width: 620px) {
  .auth-card { padding: 22px 18px 20px; }
  .auth-pitch h1 { line-height: 1.06; }
  .auth-pitch .lede { font-size: 16.5px; }
  .pitch-point { font-size: 14.5px; }
}

.seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  background: #f4efe6; border-radius: 999px; margin-bottom: 24px;
}
.seg button {
  padding: 10px; border-radius: 999px; font-size: 15px; font-weight: 600;
  color: var(--muted); transition: background .18s, color .18s, box-shadow .18s;
}
.seg button[aria-selected="true"] {
  background: var(--paper); color: var(--ink);
  box-shadow: 0 1px 2px rgba(36,31,31,.06), 0 6px 14px -10px rgba(36,31,31,.4);
}

.field { margin-bottom: 15px; }
.field label {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 7px;
}
.field input, .field select {
  width: 100%; padding: 14px 16px; border-radius: var(--radius-sm);
  background: #fdfbf7; border: 1px solid var(--line); color: var(--ink);
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.field input::placeholder { color: #b6ada4; }
.field input:focus, .field select:focus {
  outline: none; background: var(--paper); border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(27,86,171,.12);
}

/* Consent is a sentence to read, not a form label — so it undoes .field label's
   uppercase micro-type entirely rather than tweaking it. Consent copy that a
   patient has to squint at is consent copy nobody read. */
.consent { margin: 18px 0 16px; }
.consent .consent-row {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13.5px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--ink); line-height: 1.5;
  margin-bottom: 0; cursor: pointer;
}
.consent input[type=checkbox] {
  width: 17px; height: 17px; flex: none; margin-top: 2px;
  accent-color: var(--blue); cursor: pointer;
}

.note {
  margin-bottom: 18px; padding: 13px 15px; border-radius: var(--radius-sm);
  font-size: 14.5px; line-height: 1.45; animation: rise .35s var(--ease) both;
}
.note-err  { background: #fdece6; border: 1px solid #f6c4b1; color: #8d2c07; }
.note-ok   { background: var(--green-wash); border: 1px solid #b9dfd2; color: #0b5b47; }
.note-info { background: var(--blue-wash); border: 1px solid #cfe0f7; color: var(--blue-ink); }

.hint { margin-top: 16px; text-align: center; font-size: 13.5px; color: var(--faint); }

/* ── welcome / onboarding ─────────────────────────────────────────────────── */

#view-welcome {
  min-height: 100dvh; display: grid; place-items: center;
  padding-top: 44px;
  padding-bottom: calc(70px + env(safe-area-inset-bottom));
}
.welcome { max-width: 720px; width: 100%; text-align: center; }
.welcome h1 { font-size: clamp(40px, 6.4vw, 66px); }
.welcome .lede { margin: 20px auto 0; max-width: 46ch; }

.beats { display: flex; justify-content: center; gap: 8px; margin-bottom: 34px; }
.beat { width: 30px; height: 4px; border-radius: 999px; background: #ded5c7; transition: background .4s var(--ease); }
.beat.on { background: var(--orange); }

/* Provider search — the first-run payoff. It is the one thing on screen and it
   returns the patient's own hospitals within a second of the first keystroke. */
.searchbox { position: relative; margin-top: 30px; }
.searchbox input {
  width: 100%; padding: 19px 22px 19px 54px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line); font-size: 17px;
  box-shadow: var(--shadow);
  transition: border-color .16s, box-shadow .16s;
}
.searchbox input:focus { outline: none; border-color: var(--blue); box-shadow: var(--shadow-lift); }
.searchbox svg { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--faint); }

.results { margin-top: 14px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.result {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 14px 16px; border-radius: var(--radius);
  background: var(--paper); border: 1px solid var(--line);
  transition: border-color .16s, transform .16s var(--ease), box-shadow .16s;
}
.result:hover { border-color: var(--blue); transform: translateY(-1px); box-shadow: var(--shadow); }
.result-logo {
  flex: none; width: 42px; height: 42px; border-radius: 12px; object-fit: contain;
  background: #f6f2ea; padding: 4px;
}
.result-name { font-weight: 600; font-size: 15.5px; }
.result-where { font-size: 13.5px; color: var(--faint); margin-top: 1px; }

/* ── stats ────────────────────────────────────────────────────────────────── */

.stat-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .stat-band { grid-template-columns: 1fr; } }

.stat { padding: 24px 26px; }
.stat .k { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.stat .v {
  font-family: var(--font-display); font-weight: 600;
  font-size: 54px; line-height: 1; letter-spacing: -.035em;
  margin-top: 12px; font-variant-numeric: tabular-nums;
}
.stat .foot { margin-top: 9px; font-size: 13.5px; color: var(--muted); }
.stat-blue .v { color: var(--blue); }
.stat-orange .v { color: var(--orange); }
.stat-green .v { color: var(--green); }

/* ── bars ─────────────────────────────────────────────────────────────────── */

.bar-row { margin-bottom: 15px; }
.bar-row:last-child { margin-bottom: 0; }
.bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.bar-name { font-size: 15px; font-weight: 500; }
.bar-num  { font-size: 14.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.bar { height: 8px; border-radius: 999px; background: #f1ece3; overflow: hidden; }
.bar i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue-pale), var(--blue));
  transition: width 1s var(--ease);
}

/* ── provider rows ────────────────────────────────────────────────────────── */

.provider {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--line-soft);
}
.provider:last-child { border-bottom: 0; }
.provider-main { flex: 1 1 auto; min-width: 0; }
.provider-name { font-weight: 600; font-size: 16px; }
.provider-meta { font-size: 13.5px; color: var(--faint); margin-top: 3px; }
.provider-actions { display: flex; gap: 6px; flex: none; }
@media (max-width: 620px) {
  .provider { flex-wrap: wrap; }
  .provider-actions { width: 100%; }
}

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
}
.pill-ok    { background: var(--green-wash); color: #0b5b47; }
.pill-work  { background: var(--blue-wash);  color: var(--blue-ink); }
.pill-warn  { background: #fdf1e1;           color: var(--amber); }
.pill-off   { background: #f4efe6;           color: var(--muted); }
.pill-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.pill-work .pill-dot { animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ── settings ─────────────────────────────────────────────────────────────── */

.section-title {
  font-family: var(--font-display); font-size: 27px; font-weight: 600;
  letter-spacing: -.02em; margin-bottom: 4px;
}

.setting {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 15px 0; border-bottom: 1px solid var(--line-soft);
}
.setting:last-child { border-bottom: 0; }
.setting-label { font-size: 15px; font-weight: 600; }
.setting-sub { font-size: 13.5px; color: var(--faint); margin-top: 2px; }
.setting-value {
  flex: none; max-width: 52%; text-align: right; color: var(--muted); font-size: 15px;
}
.setting-value input {
  width: 100%; padding: 10px 13px; border-radius: 10px; text-align: right;
  background: #fdfbf7; border: 1px solid var(--line);
  /* 16px minimum: iOS Safari zooms the whole page when a smaller input takes
     focus, and never zooms back out. */
  font-size: 16px;
}
.setting-value input:focus { outline: none; border-color: var(--blue); background: #fff; }

/* Health Insights block — the toggles. Its own tinted panel, the way the
   design that specified it drew it. */
.insight-panel {
  border: 1px solid #cfe6dd; border-radius: var(--radius); overflow: hidden;
  background: var(--paper);
}
.insight-panel-head {
  background: var(--green-wash); padding: 13px 20px;
  font-weight: 700; color: #0b5b47; font-size: 15.5px;
  border-bottom: 1px solid #cfe6dd;
}
.insight-panel-body { padding: 6px 20px 12px; }
.insight-panel-body > p { padding: 14px 0; font-size: 14.5px; color: var(--muted); border-bottom: 1px solid var(--line-soft); }

/* Toggle + the word under it. The label is why the cell exists: these switches
   govern whether health information is sent to someone, and a knob position
   alone is read differently by different people. */
.switch-cell {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.switch-state {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--faint);
}

/* A setting whose description runs to several lines: top-align the control
   rather than floating it against the vertical middle of a paragraph. */
.setting-block { align-items: flex-start; }
.setting-block .switch-cell { margin-top: 3px; }

.link-more {
  display: inline-block; margin-top: 9px; padding: 0;
  color: var(--blue); font-size: 14px; font-weight: 600;
}
.link-more:hover { text-decoration: underline; }

.switch {
  flex: none; position: relative; width: 50px; height: 29px;
  border-radius: 999px; background: #d9d2c7;
  transition: background .22s var(--ease);
}
.switch[aria-checked="true"] { background: var(--green); }
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 23px; height: 23px; border-radius: 999px; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .22s var(--ease);
}
.switch[aria-checked="true"]::after { transform: translateX(21px); }

.danger-zone { border-color: #f0cdbd; }
.btn-danger { background: #fff; color: #a5300a; border: 1px solid #eab6a1; }
.btn-danger:hover:not(:disabled) { background: #fdece6; }

/* ── insight card on the dashboard ────────────────────────────────────────── */

.insight-card {
  position: relative; overflow: hidden;
  border: 1px solid #f2cdbb;
  background: linear-gradient(135deg, #fff8f2 0%, #fff 58%);
}
.insight-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--orange);
}
.insight-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px; background: var(--orange); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

/* ── insights timeline ────────────────────────────────────────────────────
   Dot, line, dot. The rail is a single continuous border on the column rather
   than a per-item pseudo-element, so it cannot develop gaps between cards of
   different heights. */

.timeline { position: relative; }
.tl-item { display: grid; grid-template-columns: 34px 1fr; gap: 14px; }
.tl-rail { position: relative; }
.tl-rail::before {
  content: ""; position: absolute; left: 16px; top: 0; bottom: -18px;
  width: 2px; background: var(--line);
}
.tl-item:last-child .tl-rail::before { bottom: auto; height: 30px; }

.tl-dot {
  position: absolute; left: 9px; top: 24px; z-index: 1;
  width: 16px; height: 16px; border-radius: 999px;
  background: var(--paper); border: 3px solid var(--blue-pale);
}
.tl-dot-new {
  border-color: var(--orange);
  box-shadow: 0 0 0 5px rgba(255, 72, 0, .13);
}

.tl-card { margin-bottom: 18px; overflow: hidden; }
.tl-item.is-open .tl-card { border-color: var(--blue-pale); box-shadow: var(--shadow-lift); }

.tl-head {
  display: grid; width: 100%; text-align: left;
  grid-template-columns: 1fr auto; grid-template-areas: "when meta" "title chev" "sub chev";
  gap: 3px 12px; padding: 20px 22px; align-items: center;
  transition: background .16s;
}
.tl-head:hover { background: #fdfbf7; }
.tl-when  { grid-area: when; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tl-date  { font-size: 13px; font-weight: 600; color: var(--muted); }
.tl-ago   { font-size: 12.5px; color: var(--faint); }
.tl-title { grid-area: title; font-size: 17px; font-weight: 650; letter-spacing: -.012em; margin-top: 3px; }
.tl-sub   { grid-area: sub; font-size: 14px; color: var(--muted); }
.tl-meta  { grid-area: meta; justify-self: end; }
.tl-chevron {
  grid-area: chev; justify-self: end; align-self: center; color: var(--faint);
  transition: transform .22s var(--ease);
}
.tl-item.is-open .tl-chevron { transform: rotate(180deg); }

.tl-detail {
  padding: 4px 22px 22px; border-top: 1px solid var(--line-soft); margin-top: 4px;
  animation: rise .3s var(--ease) both;
}
.tl-detail > p:first-child { padding-top: 16px; }

.tl-facts { display: flex; flex-direction: column; gap: 1px; margin-top: 16px; }
.tl-fact {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 12px; background: #faf7f2; border-radius: 8px;
}
.tl-fact-k { font-size: 13px; font-weight: 600; color: var(--blue); white-space: nowrap; }
.tl-fact-v { font-size: 14px; text-align: right; }

@media (max-width: 620px) {
  .tl-item { grid-template-columns: 26px 1fr; gap: 10px; }
  .tl-rail::before { left: 12px; }
  .tl-dot { left: 5px; top: 21px; }
  .tl-head {
    grid-template-columns: 1fr auto;
    grid-template-areas: "when chev" "title title" "sub sub" "meta meta";
    padding: 16px 16px;
  }
  .tl-meta { justify-self: start; margin-top: 8px; }
  .tl-title { font-size: 16px; }
  .tl-detail { padding: 4px 16px 18px; }
  .tl-fact { flex-direction: column; gap: 2px; }
  .tl-fact-v { text-align: left; }
}

/* ── modal ────────────────────────────────────────────────────────────────── */

.scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(36,31,31,.42);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 20px;
  animation: fade .22s var(--ease) both;
  overflow-y: auto;
}
.modal {
  width: min(560px, 100%);
  background: var(--paper); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-lift);
  animation: rise .34s var(--ease) both;
  margin: auto;
  /* A column with a scrolling middle, at every size. The check-in's report
     preview is taller than most laptops too. */
  display: flex; flex-direction: column; max-height: 88dvh;
}
.modal-wide { width: min(720px, 100%); }
.modal-doc { width: min(920px, 100%); }
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; background: var(--blue); color: #fff;
}
.modal-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.modal-x {
  flex: none; width: 30px; height: 30px; border-radius: 999px; color: #fff;
  display: grid; place-items: center; transition: background .16s;
}
.modal-x:hover { background: rgba(255,255,255,.2); }
.modal-body { padding: 20px; overflow-y: auto; flex: 1 1 auto; }

/* The primary action, as a footer the body cannot scroll under. app.js moves
   any .modal-cta out of the body and appends it here. */
.modal > .modal-cta {
  flex: none; padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--line-soft);
}
.modal > .modal-cta .hint { margin-top: 9px; }
@media (max-width: 620px) { .modal-body { padding: 16px; } }

/* "Based on your imported records" — the provenance box. Blue because it is
   fact drawn from their own data, distinct from the green check-in below. */
.provenance {
  padding: 15px 17px; border-radius: var(--radius-sm);
  background: var(--blue-wash); border: 1px solid #cfe0f7;
}
.provenance .eyebrow { margin-bottom: 7px; }
.provenance p { font-size: 15px; line-height: 1.5; }

.checkin {
  margin-top: 14px; padding: 16px 17px 18px;
  border-radius: var(--radius-sm); background: var(--green-wash); border: 1px solid #cfe6dd;
}
.checkin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.checkin-head .eyebrow { color: var(--green); }
.checkin-count { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.progress { height: 4px; border-radius: 999px; background: #cfe6dd; margin: 9px 0 16px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--green); border-radius: 999px; transition: width .4s var(--ease); }

.q { font-size: 19px; font-weight: 700; letter-spacing: -.015em; line-height: 1.28; }
.q-sub { margin-top: 5px; font-size: 14px; color: var(--muted); line-height: 1.45; }

.choices { margin-top: 15px; display: flex; flex-direction: column; gap: 9px; }
.choice {
  width: 100%; text-align: left; padding: 15px 17px;
  border-radius: var(--radius-sm); background: var(--paper); border: 1px solid #d7e5df;
  font-size: 15.5px; font-weight: 600;
  transition: border-color .16s, transform .16s var(--ease), box-shadow .16s, background .16s;
}
.choice:hover { border-color: var(--green); transform: translateY(-1px); box-shadow: 0 8px 20px -14px rgba(15,122,95,.9); }
.choice:active { transform: translateY(0); }

/* ── the report, as previewed inside the modal ────────────────────────────── */

.report-preview {
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
}
.report-preview-head { background: var(--blue); color: #fff; padding: 11px 16px; font-weight: 700; font-size: 14.5px; }
.report-preview-body { padding: 16px; }
.report-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; }
@media (max-width: 560px) { .report-cols { grid-template-columns: 1fr; gap: 16px; } }
.report-table { width: 100%; border-collapse: collapse; }
.report-table th, .report-table td { padding: 6px 9px; font-size: 13.5px; text-align: left; }
.report-table th { color: var(--blue); font-weight: 600; white-space: nowrap; }
.report-table td { text-align: right; font-variant-numeric: tabular-nums; }
.report-table tr:nth-child(even) { background: #f8f5ef; }
.report-answer { margin-bottom: 12px; }
.report-answer .eyebrow { color: var(--blue); font-size: 10.5px; }
.report-answer p { font-size: 13.5px; }
.report-callout {
  margin-top: 16px; padding: 12px 14px; border-radius: 10px;
  background: var(--blue-wash); border: 1px solid #cfe0f7; font-size: 13px; line-height: 1.45;
}
.report-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
               font-size: 11.5px; color: var(--faint); font-style: italic; }

.paste-steps { counter-reset: step; margin-top: 4px; }
/* The step's prose MUST be wrapped in a single child element. This is a flex
   container, so any inline tag left as a direct child (a <b> around a keyboard
   shortcut, say) becomes its own flex ITEM and is laid out as a separate box —
   which shuffled the words of step 2 out of order. One child, one text flow. */
.paste-step {
  display: flex; gap: 13px; padding: 11px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 15px; align-items: flex-start;
}
.paste-step > span { flex: 1 1 auto; min-width: 0; line-height: 1.5; }
.paste-step b { white-space: nowrap; }
.paste-step:last-child { border-bottom: 0; }
.paste-step::before {
  counter-increment: step; content: counter(step);
  flex: none; width: 25px; height: 25px; border-radius: 999px;
  background: var(--blue); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}

.copied-block {
  max-height: 210px; overflow: auto; padding: 14px 15px;
  border-radius: var(--radius-sm); background: #faf7f2; border: 1px solid var(--line);
  font: 400 12.5px/1.6 ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  white-space: pre-wrap; color: var(--muted);
}

/* ── toast ────────────────────────────────────────────────────────────────── */

.toast-rail {
  position: fixed; z-index: 200; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; width: min(460px, calc(100% - 32px));
}
.toast {
  pointer-events: auto; width: 100%;
  padding: 13px 18px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 14.5px; font-weight: 500;
  box-shadow: var(--shadow-lift);
  animation: rise .3s var(--ease) both;
}
.toast-err { background: #8d2c07; }
.toast-ok  { background: #0b5b47; }

/* ── skeleton / empty ─────────────────────────────────────────────────────── */

.skel {
  border-radius: 10px;
  background: linear-gradient(90deg, #f1ece3 25%, #f8f5ef 50%, #f1ece3 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0 } to { background-position: 0 0 } }

.empty {
  text-align: center; padding: 34px 20px;
  color: var(--muted); font-size: 15px;
}

.footnote { margin: 34px 0 8px; text-align: center; font-size: 12px; color: var(--faint); line-height: 1.7; }


/* ── mobile ───────────────────────────────────────────────────────────────
   Everything below is phone-shaped rather than a narrowing of the desktop
   layout. Verified against the 390pt iPhone viewport that produced the
   flush-left screenshot.
   =========================================================================== */

@media (max-width: 620px) {
  /* A settings row is a label and a value fighting over one line. Stack them:
     a right-aligned input inside 52% of a 320px screen is unusable. */
  .setting { flex-direction: column; align-items: stretch; gap: 8px; }
  .setting-value { max-width: none; text-align: left; }
  .setting-value input { text-align: left; }

  /* ...except the toggle rows, where the control belongs beside its label. */
  .setting:has(.switch-cell) { flex-direction: row; align-items: center; }
  .setting-block:has(.switch-cell) { align-items: flex-start; }
  .setting:has(.switch-cell) .setting-value { text-align: right; }

  /* iOS needs ~44px of tappable height; several of these were nearer 30. */
  .btn { padding: 14px 24px; }
  .btn-sm { padding: 11px 18px; }
  .choice { padding: 16px 16px; }
  .result { padding: 15px 14px; }
  .provider-actions .btn { flex: 1 1 auto; }

  /* A modal on a phone is a sheet: full width, pinned to the bottom, and
     scrollable inside itself so a long check-in never traps the buttons
     off-screen behind the Safari toolbar. */
  .scrim { padding: 0; place-items: end stretch; }
  .modal {
    width: 100%; max-height: 92dvh; display: flex; flex-direction: column;
    border-radius: 22px 22px 0 0; margin: 0;
  }
  .modal-body { -webkit-overflow-scrolling: touch; padding: 16px; }
  .modal-head { flex: none; }
  .modal-x { width: 38px; height: 38px; }

  .modal > .modal-cta { padding: 13px 16px calc(10px + env(safe-area-inset-bottom)); }

  /* A label/value pair right-aligned in 320px wraps into a ragged mess.
     Stack it. */
  .report-table th, .report-table td { display: block; width: 100%; }
  .report-table th { padding-bottom: 0; }
  .report-table td { text-align: left; padding-top: 2px; }
  .report-table tr { display: block; padding: 4px 0; }

  .searchbox input { padding: 16px 18px 16px 48px; font-size: 16px; }
  .searchbox svg { left: 17px; }

  .stat { padding: 20px 22px; }
  .stat .v { font-size: 44px; }
  .section-title { font-size: 23px; }
  .card-pad { padding: 20px 18px; }

  .toast-rail { bottom: calc(16px + env(safe-area-inset-bottom)); }
  .footnote { margin-bottom: env(safe-area-inset-bottom); }
}

/* Landscape phones: a bottom sheet at 92dvh leaves no room to read. */
@media (max-width: 900px) and (max-height: 480px) {
  .scrim { place-items: center; padding: 12px; }
  .modal { max-height: 96dvh; border-radius: 20px; }
}


/* ===========================================================================
   Health topics — the atlas and the topic page.

   Same design system, one new idea: CATEGORY HUE. Each topic card carries a
   `--hue` set inline from its clinical category, used only for the rule down
   its edge and its title on the topic page. The brand's orange and blue keep
   every job they already had — actions, state, emphasis — so the hues read as
   a taxonomy rather than as a second palette competing with the first.

   Light-only, like everything above it. See the note at the top of this file.
   =========================================================================== */

/* ── chips ────────────────────────────────────────────────────────────────── */

.chipset { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px;
  background: #f4efe6; color: var(--muted);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  text-decoration: none;
}
.chip i { font-style: normal; color: var(--orange); font-weight: 700; }
.chip-new { background: #ffece3; color: #a5300a; }
.chip-lg {
  padding: 9px 16px; font-size: 14.5px; background: var(--paper);
  border: 1px solid var(--line); color: var(--ink);
  transition: border-color .16s, transform .16s var(--ease), box-shadow .16s;
}
a.chip-lg:hover { border-color: var(--blue); transform: translateY(-1px); box-shadow: var(--shadow); }

/* ── the stat bar ─────────────────────────────────────────────────────────── */

.topic-statbar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: var(--line-soft); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.topic-statbar > div { background: var(--paper); padding: 16px 18px; }
.topic-statbar b {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 27px; letter-spacing: -.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.topic-statbar span {
  display: block; margin-top: 4px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
@media (max-width: 620px) {
  .topic-statbar { grid-template-columns: 1fr 1fr; }
  .topic-statbar b { font-size: 23px; }
}

/* ── filters ──────────────────────────────────────────────────────────────── */

.filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
  font-size: 14.5px; font-weight: 600; color: var(--muted);
  transition: border-color .16s, background .16s, color .16s;
}
.filter:hover { border-color: var(--blue); color: var(--ink); }
.filter.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
.filter-n {
  font-size: 12px; font-variant-numeric: tabular-nums;
  padding: 1px 7px; border-radius: 999px; background: #f1ece3; color: var(--muted);
}
.filter.is-on .filter-n { background: rgba(255,255,255,.22); color: #fff; }

.filter-search { flex: 1 1 180px; min-width: 150px; }
.filter-search input {
  width: 100%; padding: 10px 16px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
  /* 16px minimum, or iOS Safari zooms the page on focus and never returns. */
  font-size: 16px;
}
.filter-search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(27,86,171,.12); }

/* ── the atlas grid ───────────────────────────────────────────────────────── */

.atlas {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}

.topic-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: stretch;
  text-align: left; padding: 22px 22px 18px;
  border-radius: 26px;
  transition: transform .18s var(--ease), box-shadow .18s, border-color .18s;
}
.topic-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--hue, var(--blue)); opacity: .85;
}
.topic-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line); }

.topic-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.topic-card-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 25px; line-height: 1.1; letter-spacing: -.025em;
  margin-top: 14px; color: var(--ink);
  /* Two lines, then ellipsis: a five-word EHR phrase must not shove the
     activity strip out of alignment with the cards beside it. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 55px;
}
.topic-card-meta { margin-top: 6px; font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
.topic-card-chips { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }

/* ── the activity strip ───────────────────────────────────────────────────
   One tick per year of the WHOLE record set, on every card, so the columns
   line up down the page and the overlaps are readable at a glance. */

.spark {
  display: flex; align-items: flex-end; gap: 2px;
  height: 30px; margin-top: 16px; padding-top: 2px;
  border-bottom: 1px solid var(--line-soft);
}
.spark i {
  flex: 1 1 0; min-width: 2px; border-radius: 2px 2px 0 0;
  background: var(--hue, var(--blue)); opacity: .78;
  animation: grow .5s var(--ease) both;
}
.spark i.off { height: 2px !important; background: var(--line); opacity: 1; }
.spark-empty { border-bottom: 1px solid var(--line-soft); }
@keyframes grow { from { height: 0 !important; } }

/* ── what's new ───────────────────────────────────────────────────────────── */

.whatsnew {
  border: 1px solid #f2cdbb;
  background: linear-gradient(135deg, #fff8f2 0%, #fff 62%);
  margin-bottom: 20px;
}
.whatsnew .chip { background: var(--paper); border: 1px solid var(--line); }

/* ── the first-run invitation ─────────────────────────────────────────────── */

.discover { text-align: center; padding: 44px 30px 38px; }
.discover-orbit {
  position: relative; width: 108px; height: 108px; margin: 0 auto 26px;
}
.discover-orbit span {
  position: absolute; top: 50%; left: 50%;
  width: 15px; height: 15px; margin: -7.5px; border-radius: 999px;
  background: var(--blue-pale);
  animation: orbit 7s linear infinite;
}
.discover-orbit span:nth-child(1) { animation-delay: 0s;     background: var(--orange); }
.discover-orbit span:nth-child(2) { animation-delay: -1.16s; }
.discover-orbit span:nth-child(3) { animation-delay: -2.33s; background: var(--green); }
.discover-orbit span:nth-child(4) { animation-delay: -3.5s;  }
.discover-orbit span:nth-child(5) { animation-delay: -4.66s; background: var(--blue); }
.discover-orbit span:nth-child(6) { animation-delay: -5.83s; }
.discover-orbit.is-spinning span { animation-duration: 1.8s; }
@keyframes orbit {
  from { transform: rotate(0deg) translateX(44px) rotate(0deg) scale(.7); }
  50%  { transform: rotate(180deg) translateX(44px) rotate(-180deg) scale(1.15); }
  to   { transform: rotate(360deg) translateX(44px) rotate(-360deg) scale(.7); }
}

/* ── the topic page ───────────────────────────────────────────────────────── */

.backlink {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px; font-weight: 600; color: var(--blue); text-decoration: none;
  padding: 7px 13px 7px 9px; border-radius: 999px; margin-left: -9px;
}
.backlink:hover { background: var(--blue-wash); }

.topic-title { font-size: clamp(38px, 6vw, 62px); }

.keyfacts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: var(--line-soft); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.keyfact { background: var(--paper); padding: 15px 17px; }
.keyfact .k {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.keyfact .v {
  display: block; margin-top: 5px; font-size: 17px; font-weight: 650; letter-spacing: -.012em;
}
@media (max-width: 620px) { .keyfacts { grid-template-columns: 1fr 1fr; } }

.topic-section { margin-top: 44px; }
.topic-section .section-title { margin-bottom: 14px; }

/* ── the history spine ────────────────────────────────────────────────────── */

.spine { position: relative; }
.spine-year {
  display: grid; grid-template-columns: 74px 1fr; gap: 18px;
  padding-bottom: 8px;
}
.spine-y {
  font-family: var(--font-display); font-weight: 600; font-size: 27px;
  letter-spacing: -.03em; color: var(--hue, var(--blue));
  position: sticky; top: 84px; align-self: start;
  font-variant-numeric: tabular-nums;
}
.spine-events {
  border-left: 2px solid var(--line); padding-left: 22px; padding-bottom: 22px;
}
.ev { position: relative; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.ev:last-child { border-bottom: 0; }
.ev::before {
  content: ""; position: absolute; left: -29px; top: 19px;
  width: 11px; height: 11px; border-radius: 999px;
  background: var(--paper); border: 2.5px solid var(--hue, var(--blue));
}
.ev-when {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 5px;
}
.ev-body { display: block; }
.ev-item { display: inline; }
.ev-kind {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: #f4efe6; color: var(--muted);
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  vertical-align: 2px; margin-right: 7px;
}
.ev-label { font-size: 15.5px; font-weight: 550; }
.ev-detail {
  margin-left: 8px; font-size: 14px; color: var(--blue);
  font-weight: 650; font-variant-numeric: tabular-nums;
}
.ev-arrow { margin: 0 9px; color: var(--faint); font-weight: 700; }
.ev-prov { display: block; margin-top: 5px; font-size: 12.5px; color: var(--faint); }

@media (max-width: 620px) {
  .spine-year { grid-template-columns: 1fr; gap: 4px; }
  .spine-y { position: static; font-size: 23px; }
  .spine-events { padding-left: 18px; }
  .ev::before { left: -25px; }
}

/* ── tiles and rows ───────────────────────────────────────────────────────── */

.tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.tile {
  padding: 14px 18px; border-radius: var(--radius-sm);
  background: var(--paper); border: 1px solid var(--line); min-width: 130px;
}
.tile-name { font-size: 15.5px; font-weight: 650; }
.tile-sub { margin-top: 3px; font-size: 12.5px; color: var(--faint); }

.rowlist { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.rowitem {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 17px; border-bottom: 1px solid var(--line-soft);
}
.rowitem:last-child { border-bottom: 0; }
.rowitem-name { font-size: 15px; font-weight: 600; }
.rowitem-meta { font-size: 13px; color: var(--faint); text-align: right; flex: none; }
@media (max-width: 620px) {
  .rowitem { flex-direction: column; gap: 3px; }
  .rowitem-meta { text-align: left; }
}

/* ── labs ─────────────────────────────────────────────────────────────────── */

.labs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.labcard { padding: 18px 20px; border-radius: var(--radius-sm); background: var(--paper); border: 1px solid var(--line); }
.lab-name { font-size: 14.5px; font-weight: 650; }
.lab-latest { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.lab-latest i { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--faint); }
.lab-latest.is-high { color: #a5300a; }
.lab-latest.is-low  { color: var(--blue); }
.lab-latest.is-normal { color: var(--green); }
.lab-sub { margin-top: 4px; font-size: 12.5px; color: var(--faint); }

.sparkline { display: block; width: 100%; height: 46px; margin-top: 14px; overflow: visible; }
.lab-band { fill: var(--green-wash); }
.lab-line { fill: none; stroke: var(--hue, var(--blue)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
            vector-effect: non-scaling-stroke; }
.lab-dot  { fill: var(--hue, var(--blue)); }

/* ── provenance ───────────────────────────────────────────────────────────── */

.prov-toggle {
  font-size: 14.5px; font-weight: 600; color: var(--blue);
  padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper);
}
.prov-toggle:hover { background: var(--blue-wash); }
.prov-list { display: flex; flex-wrap: wrap; gap: 7px; }
.prov-list span {
  padding: 4px 10px; border-radius: 8px; background: var(--paper);
  border: 1px solid #cfe0f7; font-size: 13px;
}
.prov-list .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* ── the nav ──────────────────────────────────────────────────────────────
   `_Home` (`/_home`) is not styled out of the strip — it is not IN the strip.
   Its markup is commented out in index.html, which needs no CSS to enforce and
   no CSS can undo. The insights timeline is Home now, at `/`. */

@media (max-width: 620px) {
  /* Links plus a wordmark do not fit 390pt — the row overflowed silently,
     which is the same defect the earlier note in this file records. The logo
     is already a link to Home and carries data-route="/", so Home is the one
     that can go without losing a destination. */
  .nav a[data-route="/"] { display: none; }
  .topic-card { padding: 20px 18px 16px; }
  .topic-card-name { font-size: 22px; min-height: 49px; }
  .atlas { grid-template-columns: 1fr; }
}

/* Records with no date at all — real records, grouped rather than dropped. */
.spine-y-undated { font-size: 19px; color: var(--faint); letter-spacing: -.01em; }

/* The topic page wrapper. Its job is to carry --hue (set inline from the
   topic's category) down to the spine, the sparkline and the eyebrow. */
.topic-page { padding-bottom: 24px; }

/* ── live import progress ─────────────────────────────────────────────────
   Driven entirely by the worker's own progress events. Nothing here animates
   on a timer: a bar that moves while the import is stuck is worse than no bar,
   because it is a claim of progress the app cannot support. */

.import-live { border-color: #cfe0f7; background: linear-gradient(135deg, var(--blue-wash) 0%, #fff 60%); }

.imp { padding: 4px 0 2px; }
.imp + .imp { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }

.imp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.imp-name { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.imp-sub  { margin-top: 5px; font-size: 14px; color: var(--muted); }

.imp-stage {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 12px 0 7px; font-size: 14px; color: var(--muted);
}
.imp-stage .tabular { font-variant-numeric: tabular-nums; color: var(--blue); font-weight: 600; }

.imp-bar { height: 8px; border-radius: 999px; background: #e3ecf9; overflow: hidden; }
.imp-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue-pale), var(--blue));
  transition: width .45s var(--ease);
}

/* Unknown total: the worker sends 0 when a resource type's count is not known
   in advance. A sliding sheen says "working" without claiming a position. */
.imp-bar.is-indeterminate i {
  width: 100% !important;
  background: linear-gradient(90deg, #e3ecf9 0%, var(--blue-pale) 42%, var(--blue) 50%, var(--blue-pale) 58%, #e3ecf9 100%);
  background-size: 260% 100%;
  animation: impslide 1.5s linear infinite;
}
@keyframes impslide { from { background-position: 130% 0 } to { background-position: -130% 0 } }

/* The outer track: which resource type out of how many. Quieter than the
   inner bar, because the inner one is what is actually moving. */
.imp-outer { height: 3px; border-radius: 999px; background: #e9eff8; overflow: hidden; margin-top: 7px; }
.imp-outer i {
  display: block; height: 100%; border-radius: 999px; background: var(--blue-pale);
  transition: width .45s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .imp-bar.is-indeterminate i { animation: none; background: var(--blue-pale); }
}


/* ===========================================================================
   Your record — the searchable summary (/search).

   A faithful port of the Veradex "Provider Summary" experience onto Unite's
   design system: the same four screens (record → search → section → the three
   lab views), the same interactions down to the drag-to-inspect trend scrub,
   with the palette, type stack and radii of this file rather than that one.

   Two deliberate departures from the original, both additions:

     1. NO GATE. Veradex opens from an NFC tag handed to a stranger, so it asks
        a visitor to prove the patient's date of birth. Here the reader IS the
        patient, already signed in, and asking them to prove who they are on a
        page they reached from their own dashboard would be theatre.

     2. A REAL DESKTOP LAYOUT. Veradex draws a phone mockup on wide screens,
        which is right for a page whose only real device is a phone. This one
        is a tab in an app people also use on a laptop, so above 980px the
        stack becomes a rail and a pane: the patient, the search field and the
        section list stay put on the left while the right side shows whichever
        section is open. Below 980px it is exactly the phone flow — one screen
        at a time, with a back arrow.

   Light-only, like everything above. See the note at the top of this file.
   =========================================================================== */

:root {
  /* The one palette addition this section needs. Severity and out-of-range are
     the two things on these screens that must read as ALARM rather than as
     emphasis, and neither orange (which means "action" everywhere else in this
     app) nor amber (which already means "attention") can carry that without
     colliding. Matches the `cardiometabolic` hue in the topics palette. */
  --red:      #b3261e;
  --red-deep: #8d1d17;
  --red-wash: #fdece9;
  --red-line: #f3c5bf;
}

/* ── layout ───────────────────────────────────────────────────────────────── */

.rec-layout { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 22px; align-items: start; }
.rec-rail   { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 14px; }
.rec-pane   { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* Below this the rail and the pane are separate SCREENS, not columns. */
@media (max-width: 980px) {
  .rec-layout { display: block; }
  .rec-rail { position: static; }
}

/* The patient identity bar. It sits under the masthead rather than replacing
   it — the masthead is the app's chrome, this is the record's. */
.rec-subbar {
  position: sticky; top: 68px; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 16px; padding: 10px 0;
  background: rgba(255,244,223,.92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 620px) { .rec-subbar { top: 58px; } }

.rec-subbar-title { font-size: 17px; font-weight: 700; letter-spacing: -.015em; min-width: 0;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-who { margin-left: auto; text-align: right; line-height: 1.2; flex: none; }
.rec-who b { display: block; font-size: 13px; font-weight: 700; }
.rec-who span { display: block; font-size: 11px; color: var(--faint); }

/* On the record screen itself the identity only appears once the patient card
   has scrolled away, which is the reveal the original page does. Until then the
   bar carries no chrome either: an empty banded strip under the masthead reads
   as a rendering fault rather than as space held for something. Its HEIGHT does
   not change, so nothing reflows when the name arrives. */
.rec-who-fade { opacity: 0; transform: translateY(4px); transition: opacity .18s var(--ease), transform .18s var(--ease); }
.rec-who-fade.is-on { opacity: 1; transform: none; }

.rec-subbar-quiet {
  padding: 5px 0; margin-bottom: 6px;
  background: transparent; border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.rec-subbar-quiet.is-on {
  background: rgba(255,244,223,.92); border-bottom-color: var(--line-soft);
  backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px);
}

.rec-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px; flex: none; color: var(--ink);
}
.rec-back:hover { background: var(--blue-wash); color: var(--blue); }

/* ── the patient card ─────────────────────────────────────────────────────── */

.rec-patient {
  border-radius: var(--radius-lg); padding: 22px;
  background: linear-gradient(150deg, var(--blue-ink) 0%, var(--blue) 58%, #3350a8 100%);
  color: #fff; box-shadow: 0 18px 40px -24px rgba(18,60,121,.9);
}
.rec-patient-top { display: flex; align-items: center; gap: 14px; }
.rec-avatar {
  width: 52px; height: 52px; border-radius: 16px; flex: none;
  background: rgba(255,255,255,.14); display: grid; place-items: center;
  font-size: 18px; font-weight: 700; letter-spacing: .02em;
}
.rec-patient-name { font-family: var(--font-display); font-size: 27px; font-weight: 600; letter-spacing: -.02em; line-height: 1.08; }
.rec-patient-sub  { margin-top: 3px; font-size: 13.5px; color: rgba(255,255,255,.76); }
.rec-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 9px; margin-top: 18px; }
.rec-tile { background: rgba(255,255,255,.09); border-radius: 12px; padding: 9px 11px; }
.rec-tile .k { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.58); }
.rec-tile .v { margin-top: 3px; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.rec-tile .s { margin-top: 1px; font-size: 10px; color: rgba(255,255,255,.5); }
.rec-patient-foot { margin-top: 13px; font-size: 11.5px; color: rgba(255,255,255,.6); }

/* ── the search entry ─────────────────────────────────────────────────────── */

.rec-searchentry {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; color: var(--faint); font-size: 15px; box-shadow: var(--shadow);
}
.rec-searchentry:hover { border-color: var(--blue-pale); color: var(--muted); }
.rec-searchentry svg { flex: none; }
.rec-searchentry kbd {
  margin-left: auto; font: 600 11px/1 var(--font-ui); color: var(--faint);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; background: #faf7f2;
}
@media (max-width: 980px) { .rec-searchentry kbd { display: none; } }

.rec-searchfield { display: flex; align-items: center; gap: 10px; background: #f4f0e8;
                   border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px; }
.rec-searchfield input { flex: 1; min-width: 0; border: 0; background: none; outline: none;
                         font-size: 16px; font-weight: 500; }
.rec-searchfield input::placeholder { color: var(--faint); font-weight: 400; }

/* ── the allergy alert ────────────────────────────────────────────────────── */

.rec-allergy {
  background: var(--red-wash); border: 1px solid var(--red-line);
  border-radius: var(--radius); padding: 16px 17px;
}
.rec-allergy-head { display: flex; align-items: center; gap: 8px; margin-bottom: 11px;
                    font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--red-deep); }
.rec-allergy-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rec-allergy-row + .rec-allergy-row { margin-top: 10px; }
.rec-allergy-name { font-size: 15.5px; font-weight: 650; color: var(--red-deep); }
.rec-allergy-why  { font-size: 12.5px; color: #a4564f; }

.sev {
  flex: none; font-size: 11px; font-weight: 700; color: #fff;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.sev-severe   { background: var(--red); }
.sev-moderate { background: var(--amber); }
.sev-mild     { background: var(--muted); }
.sev-none     { background: #fff; color: var(--muted); border: 1px solid var(--line); }

/* ── section cards on the record screen ───────────────────────────────────── */

.rec-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rec-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; padding: 15px 17px;
}
.rec-card-head:hover { background: #fdfbf7; }
.rec-card-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.rec-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; background: var(--hue, var(--blue)); }
.rec-card-more { display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--faint); white-space: nowrap; }

.rec-row { padding: 12px 17px; border-top: 1px solid var(--line-soft); display: flex;
           align-items: center; justify-content: space-between; gap: 12px; }
/* ⚠️ Clamped because real sigs are not short. Cerner puts the whole
   instruction in one field — "omeprazole (omeprazole 20 mg oral enteric coated
   capsule) 1 Cap, PO, BID, for 30 Day, 60 Cap, 0 Refill(s)" — and an overview
   card is a scannable preview, not the record. The full text is one tap away in
   the section itself, which does not clamp. */
.rec-row-name { font-size: 15px; font-weight: 550;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rec-row-sub  { margin-top: 2px; font-size: 12.5px; color: var(--faint);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.rec-row-when { font-size: 12.5px; color: var(--faint); white-space: nowrap; flex: none; }

.rec-labgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px;
               padding: 12px 17px 16px; border-top: 1px solid var(--line-soft); }
.rec-labgrid-name { font-size: 12.5px; color: var(--faint); }
.rec-labgrid-v { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.rec-labgrid-v b { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ── the section rail (desktop) ───────────────────────────────────────────── */

.rec-nav { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rec-nav button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 12px 16px; font-size: 15px; font-weight: 550; color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
.rec-nav button:last-child { border-bottom: 0; }
.rec-nav button:hover { background: #fdfbf7; }
.rec-nav button[aria-current="true"] { background: var(--blue-wash); color: var(--blue-ink); font-weight: 700; }
.rec-nav .n { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.rec-nav button[aria-current="true"] .n { color: var(--blue); }

/* ── search results ───────────────────────────────────────────────────────── */

.rec-hit {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 15px;
}
.rec-hit:hover { border-color: var(--blue-pale); box-shadow: var(--shadow); }
.rec-hit-name { font-size: 15px; font-weight: 650; }
.rec-hit-sub  { margin-top: 2px; font-size: 12.5px; color: var(--faint); }
.rec-hits { display: flex; flex-direction: column; gap: 9px; }

/* ── detail cards ─────────────────────────────────────────────────────────── */

.rec-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 17px 18px; }
.rec-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rec-item-name { font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; }
.rec-item-name em { font-style: normal; color: var(--orange); }
.rec-item-meta { margin-top: 4px; font-size: 12.5px; color: var(--faint); }
.rec-item-body { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.rec-note { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--ink);
            background: #faf7f2; border-radius: 12px; padding: 12px 14px; }
.rec-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 13px; }

/* ── the "nothing to open" shelf ────────────────────────────────────────────
   Documents the record names but has no file for. On the live account that is
   125 of 167 rows, so it is most of the section by count and none of it by
   use — hence a shelf rather than a list: deliberately quieter than a
   `.rec-item` (no paper, softer border, muted type) so a closed one reads as a
   drawer and an open one still reads as secondary to what is above it.

   ⚠️ The rows INSIDE keep their full `.rec-item` treatment. Once someone has
   opened this they are reviewing these documents, and a legible row is the
   whole point of keeping them. */
.rec-fold { border: 1px solid var(--line-soft); border-radius: var(--radius);
            background: #fbf9f5; }
.rec-fold-head { list-style: none; cursor: pointer; padding: 15px 18px;
                 display: flex; flex-direction: column; gap: 2px;
                 border-radius: var(--radius); }
/* Safari still paints its own triangle without this; `list-style: none` alone
   does not reach the shadow-DOM marker. */
.rec-fold-head::-webkit-details-marker { display: none; }
.rec-fold-head:hover { background: #f6f2ea; }
.rec-fold-head:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rec-fold-title { font-size: 14.5px; font-weight: 650; color: var(--muted);
                  display: flex; align-items: center; gap: 9px; }
/* The caret is drawn here rather than in the markup so `documentsDetail()`
   stays about documents. It rotates on open, which is the only motion in the
   component. */
.rec-fold-title::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-left: 1px;
  border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: rotate(-45deg); transition: transform .18s ease;
}
.rec-fold[open] > .rec-fold-head > .rec-fold-title::before { transform: rotate(45deg); }
.rec-fold-sub { font-size: 12.5px; color: var(--faint); padding-left: 16px; }
.rec-fold-body { display: flex; flex-direction: column; gap: 14px;
                 padding: 4px 12px 12px; }
@media (prefers-reduced-motion: reduce) {
  .rec-fold-title::before { transition: none; }
}

/* ── the document viewer ────────────────────────────────────────────────────
   A document opens in the app, scrollable, with the download as one button
   inside it rather than the only thing on offer. The pane is sized in dvh so
   an iOS URL bar appearing does not clip the last line of a discharge summary.
   Its own scroll container, so the modal body never double-scrolls. */
.doc-view { min-height: 320px; height: min(70dvh, 780px); display: flex;
            flex-direction: column; margin: -20px; }
.doc-view-loading { align-items: center; justify-content: center; gap: 14px; }
.doc-frame { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }
.doc-imgwrap { flex: 1 1 auto; overflow: auto; display: grid; place-items: center;
               background: #f4f4f2; padding: 12px; }
.doc-img { max-width: 100%; height: auto; }
.doc-view > .empty { margin: auto; max-width: 44ch; }
.doc-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.doc-meta { font-size: 12px; color: var(--faint); min-width: 0; overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; }
/* The importing states on the Records tab. An import is the one moment this
   page has nothing to say and a reason for it, so the reason gets the room. */
.rec-importing .rec-row:last-child { border-bottom: 0; }
.rec-importbar { display: flex; align-items: center; gap: 10px; }
.doc-spinner-sm { width: 15px; height: 15px; border-width: 2px; flex: none; }

.doc-spinner { width: 26px; height: 26px; border-radius: 999px;
               border: 2.5px solid var(--line); border-top-color: var(--blue);
               animation: docspin .8s linear infinite; }
@keyframes docspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .doc-spinner { animation-duration: 2.4s; } }
@media (max-width: 620px) {
  .doc-view { margin: -16px; height: min(74dvh, 680px); }
}

/* Attachment buttons on a report or a document. Quiet by default: the file is
   an offer, not the point of the row — the conclusion above it is. */
.rec-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.rec-att { font-size: 12.5px; padding: 6px 11px; border-radius: 999px;
           border: 1px solid var(--line); background: var(--panel);
           display: inline-flex; align-items: center; gap: 6px; }
.rec-att:hover:not(:disabled) { border-color: var(--ink); }
.rec-att:disabled { opacity: .55; cursor: progress; }
/* A share copies its documents in the background; this is the few seconds a
   fast reader can beat. Deliberately not a button — there is nothing to press
   yet, and a disabled button invites the press anyway. */
.rec-att-wait { color: var(--faint); border-style: dashed; cursor: default; }
.rec-fact .k { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.rec-fact .v { margin-top: 2px; font-size: 14px; font-weight: 550; }

.flag { font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.flag-normal { background: var(--green-wash); color: #0b5b47; }
.flag-out    { background: #fdf1e1;           color: var(--amber); }
.flag-none   { background: #f4efe6;           color: var(--muted); }
.flag-active { background: #fdf1e1;           color: var(--amber); }
.flag-past   { background: #f4efe6;           color: var(--muted); }

/* ── the lab views ────────────────────────────────────────────────────────── */

.rec-tabs { display: flex; gap: 4px; background: #efeade; border-radius: 14px; padding: 4px; }
.rec-tabs button { flex: 1; border-radius: 11px; padding: 10px 0; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.rec-tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 4px rgba(36,31,31,.14); }

.rec-tablewrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rec-lab-h, .rec-lab-r { display: grid; grid-template-columns: minmax(0,1fr) 62px 60px 74px 46px; gap: 6px; align-items: center; }
.rec-lab-h { padding: 10px 15px; border-bottom: 1px solid var(--line);
             font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.rec-lab-h .end { text-align: right; }
.rec-lab-r { padding: 12px 15px; border-bottom: 1px solid var(--line-soft); }
.rec-lab-r:last-child { border-bottom: 0; }
.rec-lab-name { font-size: 14px; font-weight: 650; letter-spacing: -.01em; min-width: 0; }
.rec-lab-val  { font-size: 14.5px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rec-lab-val i { display: block; font-style: normal; font-size: 9.5px; font-weight: 500; color: var(--faint); }
.rec-lab-d { font-size: 12.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rec-lab-d.up { color: var(--red); } .rec-lab-d.down { color: var(--green); } .rec-lab-d.flat { color: var(--faint); }
.rec-spark { overflow: visible; }

.rec-watchhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 10px; }
.rec-watchhead b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.rec-newbadge { font-size: 11px; font-weight: 700; color: var(--blue); background: var(--blue-wash);
                padding: 4px 11px; border-radius: 999px; white-space: nowrap; }

/* Trends */
.rec-trend { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 8px; }
.rec-scrubline { min-height: 22px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rec-scrubline .hintless { font-size: 12px; color: var(--faint); }
.rec-scrubdate { font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.rec-scrubvals { display: flex; gap: 12px; flex-wrap: wrap; }
.rec-scrubvals span { font-size: 12px; color: var(--faint); white-space: nowrap; }
.rec-scrubvals b { font-weight: 700; font-variant-numeric: tabular-nums; }
.rec-charts { position: relative; touch-action: none; cursor: crosshair; }
.rec-chart + .rec-chart { margin-top: 8px; }
.rec-chart-name { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.rec-chart-name i { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--faint); }
.rec-chart svg { display: block; width: 100%; height: 54px; margin-top: 3px; }
@media (min-width: 981px) { .rec-chart svg { height: 86px; } }
.rec-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--faint); padding: 2px 2px 10px; }

.rec-flow { overflow-x: auto; border-top: 1px solid var(--line); margin: 0 -16px; padding: 0 16px; }
.rec-flow-inner { min-width: 420px; padding-top: 6px; }
.rec-flow-row { display: flex; border-top: 1px solid var(--line-soft); }
.rec-flow-row:first-child { border-top: 0; }
.rec-flow-lab { width: 110px; flex: none; padding: 11px 8px 11px 0; font-size: 12.5px; font-weight: 650; }
.rec-flow-c { flex: 1; min-width: 56px; padding: 10px 4px; text-align: center; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rec-flow-c.head b { display: block; font-size: 11px; font-weight: 700; }
.rec-flow-c.head span { display: block; font-size: 8.5px; color: var(--faint); margin-top: 1px; }
.rec-flow-c.is-out { background: var(--red-wash); color: var(--red-deep); font-weight: 700; }
.rec-flow-c.is-gap { color: #d5cdc2; }
.rec-flow-c.is-last { font-weight: 700; }

/* History */
.rec-filters { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 15px; }
.rec-filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rec-flabel { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.rec-fchips { display: flex; flex-wrap: wrap; gap: 7px; }
.rec-fchip { border: 1px solid var(--line); background: var(--paper); border-radius: 999px;
             padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--muted); }
.rec-fchip:hover { border-color: var(--blue-pale); color: var(--ink); }
.rec-fchip.is-on { background: var(--blue-wash); border-color: var(--blue-pale); color: var(--blue-ink); }
.rec-fchip.is-dark { background: var(--blue); border-color: var(--blue); color: #fff; }
.rec-fdates { display: flex; gap: 10px; margin-top: 13px; }
.rec-fdates > div { flex: 1; min-width: 0; }
.rec-fdates select, .rec-mdy {
  width: 100%; margin-top: 5px; padding: 9px 10px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; font-weight: 600; outline: none;
}
.rec-fdates select:focus, .rec-mdy:focus { border-color: var(--blue); }
.rec-custom { display: flex; gap: 9px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.rec-custom > div { flex: 1 1 120px; }

.rec-group + .rec-group { margin-top: 16px; }
.rec-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 3px 7px; }
.rec-group-head b { font-size: 13px; font-weight: 700; }
.rec-group-head span { font-size: 11.5px; font-weight: 600; color: var(--faint); }
.rec-hrow { display: flex; align-items: center; justify-content: space-between; gap: 10px;
            padding: 11px 15px; border-top: 1px solid var(--line-soft); }
.rec-hrow:first-child { border-top: 0; }
.rec-hrow-name { font-size: 14.5px; font-weight: 600; min-width: 0; }
.rec-hrow-v { display: flex; align-items: center; gap: 9px; white-space: nowrap; flex: none; }
.rec-hrow-v b { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rec-hrow-v b i { font-style: normal; font-size: 10.5px; font-weight: 500; color: var(--faint); }

/* ── phone ────────────────────────────────────────────────────────────────── */

@media (max-width: 620px) {
  .rec-patient { padding: 19px 18px; }
  .rec-patient-name { font-size: 24px; }
  .rec-lab-h, .rec-lab-r { grid-template-columns: minmax(0,1fr) 54px 52px 62px 40px; gap: 5px; padding-left: 13px; padding-right: 13px; }
  .rec-facts { grid-template-columns: 1fr 1fr; }
  .rec-trend { padding: 14px 14px 6px; }
  .rec-flow { margin: 0 -14px; padding: 0 14px; }
  .rec-fdates { flex-direction: column; gap: 12px; }

  /* Six destinations do not fit 390pt even with Home hidden. Scrolling the row
     keeps every destination reachable, which hiding another one would not —
     and the record IS a destination people arrive at from a search box. */
  .nav {
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    /* The fade is what makes a clipped link read as "there is more this way"
       rather than as a broken layout. */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; }
}


/* ===========================================================================
   Share, and the shared record.

   Two surfaces: the modal a patient opens in a consulting room, and the
   standalone page the clinician lands on. Both are the same design system as
   everything above — the clinician's page is deliberately NOT a stripped-down
   variant, because a record that looks like a different product than the one
   the patient just showed them is harder to trust, not easier.
   =========================================================================== */

/* ── the share button ─────────────────────────────────────────────────────── */

.rec-share { justify-content: center; }
@media (min-width: 981px) { .rec-share { width: 100%; } }

/* ── the modal ────────────────────────────────────────────────────────────── */

.share-wrap { text-align: center; }
.share-lede { font-size: 15px; line-height: 1.5; color: var(--muted); margin-bottom: 18px; max-width: 34ch;
              margin-left: auto; margin-right: auto; }

.share-qr {
  display: inline-grid; place-items: center; padding: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow);
}
.share-qr svg { display: block; }

/* The link is a button, because tapping it copies. Making it look like a link
   and behave like a button is the ambiguity that makes people long-press. */
.share-link {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 18px;
  padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line);
  background: #faf7f2; text-align: left;
}
.share-link:hover { border-color: var(--blue-pale); background: var(--blue-wash); }
.share-link-url {
  flex: 1; min-width: 0; font-size: 13px; color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.share-link-copy {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--blue);
}

.share-foot { margin-top: 18px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.share-foot b { color: var(--ink); font-weight: 650; }
.share-foot .link-more { font-size: 13.5px; margin-left: 4px; }

.share-durations { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.share-note { margin-top: 10px; font-size: 12.5px; color: var(--faint); }

/* ── the clinician's page ─────────────────────────────────────────────────── */

/* A record on loan says so, everywhere it is read. */
.shared-chip {
  margin-left: auto; padding: 6px 14px; border-radius: 999px;
  background: var(--blue-wash); color: var(--blue-ink);
  font-size: 13px; font-weight: 650; white-space: nowrap;
}
@media (max-width: 620px) { .shared-chip { font-size: 12px; padding: 5px 11px; } }

.rec-sharedbar {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 20px;
  padding: 13px 16px; border-radius: var(--radius);
  background: var(--blue-wash); border: 1px solid #cfe0f7; color: var(--blue-ink);
  font-size: 14px; line-height: 1.5;
}
.rec-sharedbar svg { flex: none; margin-top: 2px; }

.gate { display: grid; place-items: center; min-height: 62vh; }
.gate-card { width: min(440px, 100%); padding: 34px 32px 28px; }
@media (max-width: 620px) { .gate-card { padding: 26px 22px 22px; } }

/* ── choosing what Trends charts ──────────────────────────────────────────
   The control sits under the range chips because it answers the other half of
   the same question: the chips say WHEN, this says WHICH. Inline rather than
   in a dialog — see pickerPanel() in search.js for why that is not a style
   choice. */

.rec-trendpick {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 0 0 12px;
}
.rec-trendpick-why { font-size: 12.5px; color: var(--faint); }

.rec-picker { margin-bottom: 14px; }
.rec-pickq {
  width: 100%; margin-top: 2px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--ink); font: inherit; font-size: 14px;
  -webkit-appearance: none; appearance: none;
}
.rec-pickq:focus { outline: none; border-color: var(--blue); }
/* The chip list is scrollable rather than unbounded: a patient with 52 tests
   would otherwise push the charts a full screen down the page. */
#rec-pickchips { max-height: 210px; overflow-y: auto; }
.rec-fchip-n {
  margin-left: 6px; padding: 1px 5px; border-radius: 999px;
  background: rgba(0, 0, 0, .06); font-size: 10.5px; font-variant-numeric: tabular-nums;
}
.rec-fchip.is-on .rec-fchip-n { background: rgba(255, 255, 255, .55); }
.rec-picker-note { margin-top: 11px; font-size: 12px; color: var(--faint); line-height: 1.5; }

/* ── the list of live share links ─────────────────────────────────────────
   One block per capability the patient has handed out. The expiry is the
   headline because it is the thing that changes on its own. */

.link-row {
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.link-row:last-child { border-bottom: 0; padding-bottom: 4px; }
.link-head { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.link-name { font-size: 15.5px; font-weight: 650; }
.link-rename {
  flex: 1 1 180px; min-width: 0; padding: 7px 11px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); font: inherit; font-size: 14.5px;
}
.link-rename:focus { outline: none; border-color: var(--blue); }

.link-when { margin-top: 7px; font-size: 14.5px; color: var(--muted); }
.link-when b { color: var(--ink); font-weight: 650; }
.link-meta { margin-top: 4px; font-size: 12.5px; color: var(--faint); line-height: 1.55; }

.link-url {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 11px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); color: var(--muted); font: inherit; font-size: 12.5px;
  text-align: left; cursor: pointer;
}
.link-url:hover { border-color: var(--blue-pale); background: #fff; }
.link-url-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-url-copy { flex: none; color: var(--blue); font-weight: 650; }

.link-times {
  margin-top: 12px; padding: 12px 13px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
.link-note { margin-top: 9px; font-size: 12px; color: var(--faint); }

.link-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; margin-left: -8px; }
.link-actions .btn { padding: 6px 10px; font-size: 13px; }
.link-danger { color: #a5300a; }
.link-danger:hover { background: #fdece6; }

/* ── expired links ────────────────────────────────────────────────────────
   Folded away by default and drained of colour when shown. The row keeps its
   full structure — a patient reading their history wants the same facts, not a
   summary — but nothing in it should read as something that still works. */

.link-showexpired {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 8px 0; margin: 4px 0;
  color: var(--faint); font: inherit; font-size: 13.5px; cursor: pointer;
}
.link-showexpired:hover { color: var(--muted); text-decoration: underline; }
.link-showexpired-n {
  padding: 1px 7px; border-radius: 999px; background: var(--paper);
  border: 1px solid var(--line); font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.link-expired-foot { border-top: 1px solid var(--line); margin-top: 4px; }
.link-row:last-child + .link-expired-foot,
.link-expired-foot:first-child { border-top: 0; }

.link-expired-lede { font-size: 13px; color: var(--faint); line-height: 1.55; margin: 2px 0 6px; max-width: 62ch; }

/* Greyed, not hidden: opacity alone would fade the text below the contrast the
   dates and open counts need to stay readable, so the colours are muted
   explicitly and only the pills lose their fill. */
.link-row.is-expired .link-name,
.link-row.is-expired .link-when b { color: var(--faint); font-weight: 600; }
.link-row.is-expired .link-when,
.link-row.is-expired .link-meta { color: var(--faint); }
.link-row.is-expired .pill { background: var(--paper); color: var(--faint); border: 1px solid var(--line); }
.pill-dead { background: var(--paper); color: var(--faint); }

/* ── demo mode ────────────────────────────────────────────────────────────
   Amber, not brand blue, and never dismissible by clicking past it: this bar
   is the only warning that a refresh will rewrite account state. It sits under
   the masthead rather than over the content so it cannot be mistaken for a
   toast that will go away on its own. */

.demo-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  width: min(1120px, calc(100% - 48px)); margin: 12px auto 0;
  padding: 10px 14px; border-radius: 14px;
  background: #fdf1e1; border: 1px solid #f0d3a4; color: #7a4a06;
  font-size: 13.5px; line-height: 1.5;
}
.demo-bar b { font-weight: 700; }
.demo-bar span { flex: 1; min-width: 220px; }
.demo-bar .btn { flex: none; color: #7a4a06; padding: 6px 10px; font-size: 13px; }
.demo-bar .btn:hover { background: #f8e2c2; }
@media (max-width: 620px) { .demo-bar { width: calc(100% - 32px); } }