/* CLS Health Patient Portal.
   Tokens, type scale and component shapes are lifted from the eCW Report Filer
   and the Sally dashboard so every CLS surface reads as one product. Colour is
   spent only where it carries meaning: a status, a result flag, a balance due.

   Sections
     1  tokens
     2  base + utilities
     3  buttons + controls
     4  marketing site (landing + login)
     5  portal shell
     6  cards, tiles, tables, pills
     7  charts
     8  drawer, modal, toast
     9  responsive
*/

/* ═══ 1 tokens ═══════════════════════════════════════════════════════════ */

:root {
  /* One theme, deliberately: the brief is a single uniform sheet of white.
     Declaring it keeps native controls and scrollbars light on a dark-mode OS. */
  color-scheme: light;

  --paper:      #F7F9FC;
  --paper-2:    #F1F5FB;
  --surface:    #FFFFFF;
  --line:       #E4E9F2;
  --line-soft:  #EEF2F8;

  --ink:        #0F172A;
  --ink-soft:   #5A6B85;
  --ink-faint:  #94A3B8;

  --accent:      #2563EB;
  --accent-deep: #1D4ED8;
  --accent-tint: #EEF4FF;
  --violet:      #7C3AED;
  --violet-deep: #6D28D9;
  --violet-tint: #F4EFFF;
  --cyan:        #0891B2;
  --cyan-tint:   #E6F7FB;
  --pos:         #0E9F6E;
  --pos-ink:     #05704B;
  --pos-tint:    #E6F7F0;
  --warn:        #B45309;
  --warn-tint:   #FDF3E7;
  --neg:         #DC2626;
  --neg-ink:     #A81E1E;
  --neg-tint:    #FDECEC;

  --grad-accent: linear-gradient(135deg, #2563EB 0%, #6D5AE6 55%, #7C3AED 100%);
  --grad-soft:   linear-gradient(135deg, #EEF4FF 0%, #F4EFFF 100%);
  /* One surface, everywhere. The portal is a single sheet of white: regions
     are told apart by spacing, type hierarchy and the occasional hairline --
     never by a box. Tint is reserved for things that carry meaning (a status,
     an alert, a selected option), never for chrome. */
  --page-wash: #FFFFFF;

  --shadow-sm:    0 1px 2px rgba(15,23,42,.04);
  --shadow-card:  0 1px 2px rgba(15,23,42,.04), 0 12px 28px -20px rgba(30,41,90,.28);
  --shadow-float: 0 1px 2px rgba(37,99,235,.05), 0 10px 30px -14px rgba(80,70,160,.20);
  --shadow-lift:  0 10px 24px -8px rgba(37,99,235,.18), 0 22px 48px -20px rgba(124,58,237,.26);
  --shadow-pop:   0 24px 60px -22px rgba(30,41,90,.35), 0 2px 6px rgba(15,23,42,.06);

  --r-card: 16px;
  --r-ctrl: 10px;
  --topbar: 64px;

  --font-display: 'Inter Tight', 'Segoe UI Variable Display', 'Segoe UI', -apple-system, sans-serif;
  --font-body:    'Inter', 'Segoe UI Variable Text', 'Segoe UI', -apple-system, system-ui, sans-serif;
  --font-mono:    ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
}

/* ═══ 2 base + utilities ═════════════════════════════════════════════════ */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--surface); color: var(--ink);
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; margin: 0; }
p { margin: 0; }
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
::selection { background: var(--accent-tint); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@keyframes rise  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes pop   { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes slideL{ from { opacity: .3; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes breathe { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

.ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-sm { width: 14px; height: 14px; }
.ic-lg { width: 22px; height: 22px; }
.ic-xl { width: 26px; height: 26px; }
.spin { animation: spin 1s linear infinite; }
.spacer { flex: 1; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }

/* ═══ 3 buttons + controls ═══════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--r-ctrl);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.btn:hover:not(:disabled) { background: var(--paper); color: var(--ink); border-color: #D6DEEC; }
.btn:disabled { opacity: .45; cursor: default; }

.btn-primary, .btn-ink {
  border: none; background: var(--ink); color: #fff; font-weight: 600;
  box-shadow: 0 8px 18px -10px rgba(15,23,42,.75);
}
.btn-primary:hover:not(:disabled), .btn-ink:hover:not(:disabled) {
  background: #1E293B; color: #fff; transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgba(15,23,42,.7);
}
.btn-primary:active:not(:disabled), .btn-ink:active:not(:disabled) { transform: scale(.985); }
.btn-primary:disabled { opacity: .45; box-shadow: none; transform: none; }

.btn-ghost { border-color: transparent; background: none; }
.btn-ghost:hover:not(:disabled) { background: var(--paper); border-color: transparent; }
.btn-danger { color: var(--neg-ink); border-color: #F3D3D3; }
.btn-danger:hover:not(:disabled) { background: var(--neg-tint); color: var(--neg-ink); border-color: #EEBDBD; }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-lg { padding: 12px 22px; font-size: 14.5px; }
.btn-block { width: 100%; }

.field { display: block; margin-bottom: 14px; }
.field > span, .field-label {
  display: block; font-size: 11.5px; font-weight: 500;
  color: var(--ink-soft); margin-bottom: 6px;
}
.field input, .field select, .field textarea, .inp {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-ctrl);
  background: var(--surface); outline: none; font-size: 14px; color: var(--ink);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.field textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus, .inp:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field-hint { font-size: 11.5px; color: var(--ink-faint); margin-top: 6px; line-height: 1.5; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

select.inp, .field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 15px;
  padding-right: 34px;
}

.search-wrap { position: relative; display: inline-flex; align-items: center; }
.search-wrap svg { position: absolute; left: 11px; pointer-events: none; color: var(--ink-faint); }
.search-wrap input {
  padding: 8px 12px 8px 33px; min-width: 230px;
  border: 1px solid var(--line); border-radius: var(--r-ctrl);
  background: var(--surface); outline: none; font-size: 13px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.search-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }

.segmented { display: inline-flex; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-ctrl); padding: 3px; gap: 2px; }
.seg { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); transition: background .14s ease, color .14s ease; }
.seg:hover { color: var(--ink); }
.seg.on { background: var(--surface); color: var(--accent-deep); box-shadow: var(--shadow-sm); }

/* ═══ 4 marketing site ═══════════════════════════════════════════════════ */

.site { background: var(--page-wash); background-attachment: fixed; }

.site-bar {
  position: sticky; top: 0; z-index: 40; height: var(--topbar);
  display: flex; align-items: center; gap: 24px; padding: 0 clamp(18px, 4vw, 44px);
  background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand-logo { width: 36px; height: 36px; border-radius: 9px; background: #fff; border: 1px solid var(--line); padding: 4px; object-fit: contain; flex: none; box-shadow: var(--shadow-sm); }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -.02em; line-height: 1.1; }
.brand-sub { font-size: 10px; color: var(--ink-faint); letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }

.site-links { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.site-links a { padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ink-soft); transition: color .14s ease, background .14s ease; }
.site-links a:hover { color: var(--ink); background: var(--paper); }
.site-bar .spacer { flex: 1; }
.site-actions { display: flex; align-items: center; gap: 9px; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 44px); }

/* hero -------------------------------------------------------------------- */
.hero { padding: clamp(40px, 6vw, 76px) 0 clamp(34px, 5vw, 60px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
/* The copy column stretches to the row height - which the taller login card
   sets - and the card stack takes up the slack, so the last card and the login
   card always finish on the same line. No hand-tuned heights to drift. */
.hero-copy { animation: rise .5s cubic-bezier(.2,.7,.3,1) both; display: flex; flex-direction: column; align-self: stretch; }
.hero-copy .eyebrow { align-self: flex-start; }   /* a pill, not a full-width bar */
/* myCLS is a brand name - the shared uppercase treatment renders it "MYCLS".
   Scoped to the landing page so the portal and phone app are untouched. */
.landing .brand-sub { text-transform: none; letter-spacing: .02em; font-size: 11px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-deep); background: var(--accent-tint);
  border-radius: 999px; padding: 6px 13px; margin-bottom: 18px;
}
.eyebrow .ic { width: 13px; height: 13px; }

.hero h1 { font-size: clamp(32px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -.035em; }
.hero h1 .grad { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lede { font-size: clamp(15px, 1.6vw, 17px); color: var(--ink-soft); margin-top: 16px; max-width: 54ch; line-height: 1.6; }

.hero-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 11px; }
.hero-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--ink); }
.hero-list .tick {
  width: 21px; height: 21px; border-radius: 7px; flex: none; margin-top: 1px;
  display: grid; place-items: center; background: var(--pos-tint); color: var(--pos-ink);
}
.hero-list .tick .ic { width: 13px; height: 13px; stroke-width: 2.4; }

/* hero cards - the four capabilities, as full-width flip rows -------------- */
.hero-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; flex: 1 1 auto; }

/* The button is only the hit area and the 3D stage; every visual (border,
   shadow, fill) belongs to the two faces, or it would sit in front of them.
   Fixed height because the faces are absolutely positioned - the taller of the
   two sides sets it, so the row never jumps mid-flip. */
/* flex:1 1 0 keeps the four rows equal while they share out whatever height the
   login card leaves. min-height keeps them sane if the column is ever short. */
.hcard {
  display: block; width: 100%; flex: 1 1 0; min-height: 76px; perspective: 1100px;
  background: none; cursor: pointer;
}
.hcard-inner {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2,.75,.3,1);
}
.hcard[aria-pressed="true"] .hcard-inner { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) { .hcard-inner { transition: none; } }

.hcard-face {
  position: absolute; inset: 0; border-radius: 16px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: 16px;
  text-align: left; padding: 0 18px; overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.hcard:hover .hcard-face { box-shadow: var(--shadow-pop); }
.hcard:focus-visible { outline: none; }
.hcard:focus-visible .hcard-face { outline: 2px solid var(--accent); outline-offset: 2px; }

.hcard-front { background: var(--surface); }
.hcard:hover .hcard-front { border-color: var(--line); }
.hcard-ic { width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center; }
.hcard-ic .ic { width: 22px; height: 22px; }
.hcard-t { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600; color: var(--ink); line-height: 1.35; letter-spacing: -.012em; }

/* The back carries the card's own tint class, so each row flips to its own
   accent. The text stays ink rather than inheriting that class's colour - cyan
   on cyan-tint is only ~3:1, under AA for body copy. */
.hcard-back { transform: rotateY(180deg); border-color: transparent; }
.hcard-back .hcard-ic { background: #fff; }
.hcard-b { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; font-weight: 450; }

/* The only affordance: a small rotate glyph on the right, on both faces. */
.hcard-cue { flex: none; width: 16px; height: 16px; color: var(--ink-faint); opacity: .7; transition: color .16s ease, opacity .16s ease; }
.hcard:hover .hcard-front .hcard-cue { color: var(--accent); opacity: 1; }
.hcard-back .hcard-cue { color: inherit; opacity: .5; }

.hero-trust { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.trust-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); }
.trust-item .ic { color: var(--ink-faint); width: 15px; height: 15px; }

/* login card -------------------------------------------------------------- */
.login-card {
  background: var(--surface); border: none;
  border-radius: 20px; box-shadow: var(--shadow-pop);
  padding: 30px 30px 24px; position: sticky; top: calc(var(--topbar) + 26px);
  animation: rise .5s cubic-bezier(.2,.7,.3,1) .08s both;
}
.login-card h2 { font-size: 20px; }
.login-card .sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 5px; }
.login-mark { width: 44px; height: 44px; border-radius: 12px; display: block; background: #fff; border: 1px solid var(--line); padding: 5px; object-fit: contain; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.login-form { margin-top: 22px; }
.login-pw { position: relative; display: flex; align-items: center; }
.login-pw input { padding-right: 42px; }
.login-peek { position: absolute; right: 6px; padding: 7px; border-radius: 8px; color: var(--ink-faint); display: flex; transition: color .14s ease, background .14s ease; }
.login-peek:hover { color: var(--ink); background: var(--paper); }
.login-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 16px; }
.check { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; }
.check input { width: 15px; height: 15px; accent-color: var(--accent); margin: 0; }
.link { font-size: 12.5px; font-weight: 500; color: var(--accent-deep); }
.link:hover { text-decoration: underline; }
.login-error { background: var(--neg-tint); color: var(--neg-ink); border: 1px solid #F7D4D1; border-radius: var(--r-ctrl); padding: 9px 12px; font-size: 12.5px; margin-bottom: 12px; }
.login-alt { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--ink-faint); font-size: 11.5px; }
.login-alt::before, .login-alt::after { content: ''; height: 1px; background: var(--line-soft); flex: 1; }
.login-foot { display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 11.5px; color: var(--ink-faint); line-height: 1.5; }
.demo-hint { background: var(--violet-tint); border: 1px solid #E4D9FB; border-radius: var(--r-ctrl); padding: 10px 12px; font-size: 11.5px; color: var(--violet-deep); line-height: 1.5; margin-top: 14px; }
.demo-hint b { font-weight: 600; }
.login-help {
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-ctrl);
  padding: 11px 13px; margin: -6px 0 16px; font-size: 11.5px; color: var(--ink-soft); line-height: 1.6;
}
.login-help p + p { margin-top: 8px; }
.login-help b { font-weight: 600; color: var(--ink); }

/* generic section --------------------------------------------------------- */
.section { padding: clamp(44px, 6vw, 82px) 0; }
.section + .section > .wrap { border-top: 1px solid var(--line-soft); padding-top: clamp(40px, 5vw, 70px); margin-top: calc(0px - clamp(44px, 6vw, 82px)); }
.section.alt { background: none; }   /* one sheet - no alternating bands */
.section-head { max-width: 62ch; margin-bottom: 34px; }
.section-head.centre { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.03em; }
.section-head .sub { font-size: 15px; color: var(--ink-soft); margin-top: 11px; line-height: 1.6; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; }
.feature { padding: 20px 26px 2px 0; border-top: 1px solid var(--line-soft); }
.feature-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 15px; }
.feature-ic .ic { width: 20px; height: 20px; }
.ic-blue   { background: var(--accent-tint); color: var(--accent-deep); }
.ic-violet { background: var(--violet-tint); color: var(--violet); }
.ic-green  { background: var(--pos-tint);    color: var(--pos-ink); }
.ic-amber  { background: var(--warn-tint);   color: var(--warn); }
.ic-cyan   { background: var(--cyan-tint);   color: var(--cyan); }
.ic-rose   { background: var(--neg-tint);    color: var(--neg-ink); }
.feature h3 { font-size: 15.5px; }
.feature p { font-size: 13.5px; color: var(--ink-soft); margin-top: 7px; line-height: 1.6; }

/* book instantly ---------------------------------------------------------- */
.book-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.8fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.book-points { list-style: none; margin: 24px 0 28px; padding: 0; display: grid; gap: 14px; }
.book-points li { display: flex; gap: 12px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.book-points .n {
  width: 24px; height: 24px; border-radius: 8px; flex: none;
  display: grid; place-items: center; background: var(--grad-soft);
  color: var(--accent-deep); font-size: 11.5px; font-weight: 700; font-family: var(--font-mono);
}
.free-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 4px;
  background: var(--pos-tint); color: var(--pos-ink); border-radius: 999px;
  padding: 6px 14px; font-size: 12.5px; font-weight: 600;
}

/* mini booking preview card */
.book-preview { background: none; border: none; box-shadow: none; }
.bp-head { padding: 0 0 16px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; gap: 11px; }
.bp-avatar { width: 38px; height: 38px; border-radius: 11px; background: var(--grad-soft); color: var(--accent-deep); display: grid; place-items: center; font-weight: 700; font-size: 13px; font-family: var(--font-display); flex: none; }
.bp-body { padding: 18px 0 0; }
.bp-day { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 9px; }
.bp-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.slot {
  padding: 9px 4px; border: 1px solid var(--line); border-radius: 9px;
  text-align: center; font-size: 12.5px; font-weight: 500; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  transition: all .14s ease;
}
.slot:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-tint); }
.slot.on { border-color: transparent; background: var(--ink); color: #fff; box-shadow: 0 6px 14px -8px rgba(15,23,42,.7); }
.slot.gone { opacity: .4; text-decoration: line-through; pointer-events: none; }

/* healow steps ------------------------------------------------------------ */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; counter-reset: step; }
.step { position: relative; padding: 20px 24px 2px 0; border-top: 1px solid var(--line-soft); }
.step-n {
  width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  background: var(--grad-accent); color: #fff; font-family: var(--font-display);
  font-weight: 700; font-size: 14px; margin-bottom: 14px;
  box-shadow: 0 8px 16px -8px rgba(37,99,235,.6);
}
.step h4 { font-size: 14.5px; }
.step p { font-size: 13px; color: var(--ink-soft); margin-top: 6px; line-height: 1.6; }

.code-box {
  display: flex; align-items: center; gap: 12px; margin-top: 12px;
  background: var(--paper); border: 1px dashed #C7D3E8; border-radius: var(--r-ctrl);
  padding: 10px 12px;
}
.code-box .k { font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); }
.code-box .v { font-family: var(--font-mono); font-size: 19px; font-weight: 600; letter-spacing: .12em; color: var(--ink); }
.code-copy { margin-left: auto; padding: 6px; border-radius: 7px; color: var(--ink-faint); display: flex; transition: all .14s ease; }
.code-copy:hover { background: var(--surface); color: var(--accent); }

.store-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.store-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #0F172A; color: #fff; border-radius: 12px; padding: 9px 16px;
  transition: transform .16s ease, box-shadow .16s ease;
}
.store-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(15,23,42,.8); }
.store-btn .ic { width: 21px; height: 21px; }
.store-btn .t { line-height: 1.15; }
.store-btn .t small { display: block; font-size: 9.5px; opacity: .72; letter-spacing: .04em; }
.store-btn .t b { font-size: 13.5px; font-weight: 600; }

/* pay bill ---------------------------------------------------------------- */
.pay-grid { display: grid; grid-template-columns: minmax(320px,.9fr) minmax(0,1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.pay-card { background: none; border: none; box-shadow: none; padding: 0 26px 0 0; }
.pay-amount { font-family: var(--font-display); font-size: 40px; font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.pay-row { display: flex; justify-content: space-between; font-size: 13px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.pay-row:last-of-type { border-bottom: none; }
.pay-row span:first-child { color: var(--ink-faint); }

/* FAQ --------------------------------------------------------------------- */
.faq { max-width: 860px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-q {
  width: 100%; display: flex; align-items: center; gap: 16px; text-align: left;
  padding: 19px 4px; font-size: 15px; font-weight: 500; color: var(--ink);
  transition: color .14s ease;
}
.faq-q:hover { color: var(--accent-deep); }
.faq-q .ic { margin-left: auto; color: var(--ink-faint); transition: transform .24s cubic-bezier(.2,.7,.3,1); flex: none; }
.faq-item.open .faq-q .ic { transform: rotate(180deg); color: var(--accent); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.2,.7,.3,1); }
.faq-item.open .faq-a { max-height: 420px; }
.faq-a p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; padding: 0 44px 20px 4px; }

/* footer ------------------------------------------------------------------ */
.site-foot { border-top: 1px solid var(--line-soft); background: var(--surface); padding: 40px 0 34px; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 26px 48px; justify-content: space-between; }
.foot-col h5 { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; font-family: var(--font-display); }
.foot-col a, .foot-col p { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; }
.foot-col a:hover { color: var(--accent-deep); }
.foot-bottom { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; font-size: 12px; color: var(--ink-faint); }

/* slim footer - the login-only landing page has no sections to link to ----- */
.landing { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.landing .hero { flex: 1 0 auto; }
.site-foot.slim { flex: none; padding: 20px 0; }
.foot-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.foot-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--ink-soft); }
.foot-911 { color: var(--neg-ink); font-weight: 500; }
.foot-copy { margin-left: auto; font-size: 12px; color: var(--ink-faint); }
@media (max-width: 720px) {
  .foot-copy { margin-left: 0; }
}

/* ═══ 5 portal shell ═════════════════════════════════════════════════════ */

/* Left sidebar shell. Three widths, one markup:
     >= 1080px  full 236px rail with labels and group headings
     640–1080   76px icon rail, labels hidden (title attrs carry the name)
     < 640px    the rail becomes a bottom tab bar, matching the phone app  */

.app { display: flex; height: 100vh; overflow: hidden; background: var(--surface); }

.sidebar {
  width: var(--rail-w, 236px); flex: none; z-index: 30;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line-soft); background: var(--surface);
}

.side-brand { padding: 17px 18px; flex: none; }

.sidenav { flex: 1; overflow-y: auto; padding: 14px 12px; scrollbar-width: thin; }
.sidenav::-webkit-scrollbar { width: 0; }
.nav-group {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint); padding: 0 10px; margin: 16px 0 7px;
}
.nav-group:first-child { margin-top: 2px; }

.nav-item {
  position: relative; display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 11px; margin-bottom: 2px; border-radius: var(--r-ctrl);
  color: var(--ink-soft); font-weight: 500; font-size: 13.5px; text-align: left;
  transition: color .14s ease, background .14s ease;
}
.nav-item .ic { width: 18px; height: 18px; stroke-width: 1.8; }
.nav-item .lbl { flex: 1; min-width: 0; }
.nav-item:hover { color: var(--ink); background: var(--paper); }
.nav-item.active { color: var(--accent-deep); background: var(--accent-tint); font-weight: 600; }
/* The active marker is a bar on the leading edge, the way a vertical rail
   reads — not the underline a horizontal tab strip used. It lives INSIDE the
   item: .sidenav scrolls on y, which clips x too, so anything at a negative
   offset simply never appears. */
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 19px; background: var(--grad-accent); border-radius: 0 3px 3px 0;
}
.nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--neg); flex: none; }
.nav-pill {
  font-size: 10.5px; font-weight: 700; font-family: var(--font-mono);
  background: var(--neg); color: #fff; border-radius: 999px; padding: 1px 6px; line-height: 1.5; flex: none;
}

.side-foot { flex: none; padding: 11px 12px 13px; }
.side-tools { display: flex; align-items: center; gap: 4px; margin-bottom: 9px; }
.icon-btn { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-soft); position: relative; transition: background .14s ease, color .14s ease; }
.icon-btn:hover { background: var(--paper); color: var(--ink); }
.icon-btn .badge-dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--neg); border: 1.5px solid #fff; }

.who {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: var(--r-ctrl);
  border: none; background: none; transition: background .14s ease;
}
.who:hover { background: var(--paper); }
.who-text { flex: 1; min-width: 0; text-align: left; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--grad-accent); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .02em;
}

/* Provider headshot with an initials floor underneath. The photo is absolutely
   positioned over the initials and starts at opacity 0, so a file that is
   missing or still loading shows the initials instead of a broken image. */
.pface {
  position: relative; flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--grad-soft);
  font-family: var(--font-display); font-weight: 700; letter-spacing: .02em;
  color: var(--accent-deep); box-shadow: 0 0 0 1px var(--line-soft) inset;
}
.pface-ini { line-height: 1; }
.pface img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%;
  opacity: 0; transition: opacity .25s ease;
}
.pface img.on { opacity: 1; }

/* A provider identified by face + name + specialty, used at the top of any
   drawer that is about one provider. */
.who-line { display: flex; align-items: center; gap: 13px; padding: 2px 0 18px; }
.who-line-n { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.who-line-s { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }
.who .nm { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.25; }
.who .mrn { display: block; font-size: 10.5px; color: var(--ink-faint); font-family: var(--font-mono); }
.who .chev { color: var(--ink-faint); flex: none; }

#main { flex: 1; min-width: 0; overflow-y: auto; background: var(--surface); padding: 26px clamp(16px, 3vw, 40px) 60px; }
.view { display: none; max-width: 1220px; margin: 0 auto; }
.view.active { display: block; }
.view.active > * { animation: rise .45s cubic-bezier(.2,.7,.3,1) both; }
.view.active > *:nth-child(1) { animation-delay: .02s; }
.view.active > *:nth-child(2) { animation-delay: .08s; }
.view.active > *:nth-child(3) { animation-delay: .14s; }
.view.active > *:nth-child(4) { animation-delay: .2s; }
.view.active > *:nth-child(5) { animation-delay: .26s; }

/* The heading owns the page; a rule under it separates it from the content
   the way a card border used to. */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 0; flex-wrap: wrap;
  padding-bottom: 20px; border-bottom: 1px solid var(--line-soft);
}
.page-head + * { margin-top: 24px; }
.page-head h2 { font-size: 24px; }
.page-head .sub { color: var(--ink-soft); font-size: 13.5px; margin-top: 6px; max-width: 66ch; }
.page-tools { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.subnav { display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 999px; margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.sub-item { padding: 7px 15px; border-radius: 999px; color: var(--ink-soft); font-weight: 500; font-size: 13px; white-space: nowrap; transition: all .14s ease; }
.sub-item:hover { color: var(--ink); }
.sub-item.on { color: var(--accent-deep); background: var(--surface); box-shadow: var(--shadow-sm); font-weight: 600; }

.status-line { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.pulse { position: relative; width: 9px; height: 9px; flex: none; }
.pulse-core { position: absolute; inset: 1px; border-radius: 50%; background: var(--pos); animation: breathe 3s ease-in-out infinite; }
.pulse-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--pos); opacity: 0; }

/* ═══ 6 cards, tiles, tables, pills ══════════════════════════════════════ */

/* No border, no shadow, no inset padding - a card is just a titled region of
   the page, so its content lines up with the page heading above it. */
.card { background: none; border: none; box-shadow: none; padding: 0; }
.card.flush { padding: 0; }
/* The heading rule IS the region boundary: it spans the region's own width,
   so two regions side by side each get their own, and nothing runs on past
   where the content stops. */
.card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.card-head.bare { border-bottom: none; padding-bottom: 0; }
.card-head h3 { font-size: 16px; }
.card-head .sub { font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }
.card-head .tools { display: flex; align-items: center; gap: 8px; }
/* Stacked regions get a hairline and air. Side-by-side ones (inside a .grid)
   get air only - a rule between columns reads as a table. */
/* Stacked regions need air, not another line - the next region's heading rule
   already announces it. Two rules a few pixels apart read as a mistake. */
.card + .card { margin-top: 34px; }
.stack-v .card + .card { margin-top: 0; }

/* start, not stretch: a short card next to a tall one should stay short
   rather than grow a pool of dead space under its last row. */
.grid { display: grid; gap: 34px 44px; align-items: start; }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-hero { grid-template-columns: minmax(0, 1.8fr) minmax(290px, 1fr); }
.g-side { grid-template-columns: minmax(0, 1fr) minmax(300px, .62fr); }

/* No vertical rules between columns. A grid rule is as tall as the tallest
   column, so beside a short one it trails off into empty space. Regions are
   bounded by the hairline under their own heading instead — always exactly as
   wide as the region, never dangling. */

/* Wrapping lists: plain grids, no rules. */
.link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 4px 20px; margin-bottom: 6px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.stack-v { display: flex; flex-direction: column; gap: 30px; }

/* A strip of figures divided by hairlines, not a row of boxes. */
.tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 0; margin: 0 0 30px; padding: 22px 0;
  border-bottom: 1px solid var(--line-soft);
}
.tile {
  background: none; border: none; box-shadow: none; text-align: left;
  padding: 2px 26px; border-left: 1px solid var(--line-soft);
  transition: opacity .16s ease;
}
.tile:first-child { border-left: none; padding-left: 0; }
.tile:hover { opacity: .68; }
.tile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tile .k { font-size: 10.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.tile .v { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 10px; }
.tile .h { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }
.tile-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.tile-ic .ic { width: 16px; height: 16px; }
.tile.pos .v { color: var(--pos-ink); }
.tile.warn .v { color: var(--warn); }
.tile.neg .v { color: var(--neg-ink); }

.kpi-strip { display: flex; flex-wrap: wrap; margin: 2px 0 20px; }
.kpi { flex: 1 1 130px; min-width: 0; padding: 2px 20px; border-left: 1px solid var(--line-soft); }
.kpi:first-child { border-left: none; padding-left: 2px; }
.kpi-k { font-size: 11.5px; color: var(--ink-faint); font-weight: 500; }
.kpi-v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 27px; font-weight: 500; margin-top: 9px; line-height: 1; letter-spacing: -.035em; }
.kpi.hero .kpi-v { font-size: 33px; }
.kpi.hero .kpi-v::after { content: ''; display: block; width: 26px; height: 3px; background: var(--grad-accent); border-radius: 3px; margin-top: 11px; }
.kpi-d { font-size: 11.5px; color: var(--ink-soft); margin-top: 8px; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.delta.up { color: var(--pos-ink); } .delta.down { color: var(--neg-ink); } .delta.flat { color: var(--ink-faint); }
.delta .ic { width: 12px; height: 12px; stroke-width: 2.6; }

/* "See N more" disclosure at the foot of a card --------------------------- */
.more-wrap { display: flex; justify-content: center; padding-top: 13px; margin-top: 2px; border-top: 1px solid var(--line-soft); }

/* rows (appointments, messages, meds, referrals) --------------------------- */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: 14px; padding: 14px 0;
  border-bottom: 1px solid var(--line-soft); text-align: left; width: 100%;
  transition: background .12s ease;
}
.row:last-child { border-bottom: none; }
.row.clickable { cursor: pointer; }
.row.clickable:hover { background: #FAFCFF; }
.row-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.row-ic .ic { width: 18px; height: 18px; }
.row-main { flex: 1; min-width: 0; }
.row-t { font-size: 13.5px; font-weight: 500; line-height: 1.35; }
.row-s { font-size: 12px; color: var(--ink-faint); margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; }
.row-s.truncate { display: block; }   /* text-overflow needs a block, not a flex box */
.row-end { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.row-when { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Unread is carried by weight and the dot at the end of the row. The tinted
   wash this used to have read as a stray box once the cards were removed. */
.row.unread .row-t { font-weight: 600; color: var(--ink); }
.row.unread .row-s { color: var(--ink-soft); }

.dateblock { width: 46px; flex: none; text-align: center; padding: 2px 0; }
.dateblock .m { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--neg); }
.dateblock .d { font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }
.dateblock.past .m { color: var(--ink-faint); }
.dateblock.past { opacity: .82; }

/* tables ------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-faint); padding: 12px 18px;
  border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface);
}
tbody td { padding: 13px 18px; border-bottom: 1px solid var(--line-soft); font-size: 13px; vertical-align: middle; }
thead th:first-child, tbody td:first-child { padding-left: 0; }
thead th:last-child,  tbody td:last-child  { padding-right: 0; }
tbody tr:last-child td { border-bottom: none; }
tbody tr.clickable { cursor: pointer; transition: background .12s ease; }
tbody tr.clickable:hover { background: #FAFCFF; }
.t-nm { font-weight: 500; font-size: 13.5px; }
.t-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
.t-right { text-align: right; }
.table-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 0; border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--ink-faint); }

/* pills + badges ----------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.p-blue   { background: var(--accent-tint); color: var(--accent-deep); }
.p-violet { background: var(--violet-tint); color: var(--violet-deep); }
.p-green  { background: var(--pos-tint);    color: var(--pos-ink); }
.p-amber  { background: var(--warn-tint);   color: var(--warn); }
.p-red    { background: var(--neg-tint);    color: var(--neg-ink); }
.p-cyan   { background: var(--cyan-tint);   color: var(--cyan); }
.p-plain  { background: var(--paper);       color: var(--ink-soft); border-color: var(--line); }
.pill .ic { width: 12px; height: 12px; stroke-width: 2.2; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }

.dot-s { width: 6px; height: 6px; border-radius: 50%; flex: none; }

/* key/value fields --------------------------------------------------------- */
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px 26px; }
.kv { padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.kv-k { font-size: 11.5px; color: var(--ink-faint); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.kv-v { font-size: 14px; font-weight: 500; word-break: break-word; }
/* NOT .empty: that is the block-level empty-state, and its 56px padding was
   landing on every blank field value. */
.kv-v.blank { color: var(--ink-faint); font-style: italic; font-weight: 400; }

/* progress / meters -------------------------------------------------------- */
.meter-row { display: grid; grid-template-columns: minmax(130px, 1.1fr) 1fr 56px; align-items: center; gap: 16px; padding: 10px 0; }
.meter-label { font-size: 13px; color: var(--ink); }
.meter-track { height: 7px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
/* Solid, not the brand gradient: these bars sit next to green/amber status
   bars, and a two-hue gradient beside a flat colour reads as a third state. */
.meter-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width .9s cubic-bezier(.2,.7,.3,1); }
.meter-fill.green { background: linear-gradient(90deg, #0E9F6E, #34D399); }
.meter-fill.amber { background: linear-gradient(90deg, #B45309, #F59E0B); }
.meter-fill.red   { background: linear-gradient(90deg, #DC2626, #F87171); }
.meter-fill.plain { background: #D7DEEA; }
.meter-n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--ink-soft); text-align: right; }

/* empty state --------------------------------------------------------------- */
.empty { padding: 56px 20px; text-align: center; color: var(--ink-faint); font-size: 13px; }
.empty .ic { width: 32px; height: 32px; stroke: #CBD5E5; stroke-width: 1.5; margin-bottom: 12px; }
.empty b { display: block; color: var(--ink-soft); font-weight: 500; margin-bottom: 4px; font-size: 13.5px; }

/* banner -------------------------------------------------------------------- */
.banner {
  display: flex; align-items: center; gap: 11px; border-radius: var(--r-ctrl);
  padding: 12px 15px; font-size: 13px; margin-bottom: 18px;
  border: none; background: var(--warn-tint); color: var(--warn);
}
.banner .ic { flex: none; }
.banner .btn { margin-left: auto; background: rgba(255,255,255,.75); }
.banner.info { background: var(--accent-tint); color: var(--accent-deep); }
.banner.bad  { background: var(--neg-tint); color: var(--neg-ink); }
.banner.good { background: var(--pos-tint); color: var(--pos-ink); }

/* ═══ 7 charts ═══════════════════════════════════════════════════════════ */

.chart-legend { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-soft); font-weight: 500; }
.chart-legend span.item { display: inline-flex; align-items: center; gap: 7px; }
.chart-legend .dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }

.chart-wrap { position: relative; margin-top: 6px; }
.chart-wrap svg { display: block; overflow: visible; }
.grid-line { stroke: var(--line-soft); stroke-width: 1; }
.axis-y { fill: var(--ink-faint); font-size: 10px; text-anchor: end; font-family: var(--font-mono); }
.axis-x { fill: var(--ink-faint); font-size: 10px; text-anchor: middle; font-family: var(--font-mono); }
.line-path { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.line-path.v2 { stroke: var(--violet); }
.line-path.v3 { stroke: var(--cyan); }
.line-dot { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.line-dot.v2 { fill: var(--violet); }
.hit { fill: transparent; cursor: pointer; }
.band { fill: var(--pos-tint); opacity: .55; }
.bar { fill: var(--accent); transition: fill .14s ease; }
.bar:hover { fill: var(--accent-deep); }
.bar.v2 { fill: var(--violet); }
.bar.v2:hover { fill: var(--violet-deep); }
.bar.soft { fill: #C7D6F7; }

.tooltip {
  position: absolute; pointer-events: none; background: var(--ink); color: #fff;
  font-size: 11.5px; padding: 6px 10px; border-radius: 7px;
  transform: translate(-50%, -100%); white-space: nowrap; opacity: 0;
  transition: opacity .1s ease; z-index: 5;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.tooltip.visible { opacity: 1; }

/* SVG text styled through real CSS rules — presentation attributes like
   fill="var(--ink)" never resolve custom properties, so they live here. */
.series-tag { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; }
.gauge-num  { font-family: var(--font-display); font-size: 32px; font-weight: 600; letter-spacing: -1.2px; fill: var(--ink); }
.gauge-lbl  { font-size: 10.5px; fill: var(--ink-faint); }

.donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.donut-centre { font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em; text-anchor: middle; fill: var(--ink); }
.donut-sub { font-size: 10px; fill: var(--ink-faint); text-anchor: middle; font-family: var(--font-body); letter-spacing: 0; }
.donut-key { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 150px; }
.dk { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.dk .sw { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.dk .lb { color: var(--ink-soft); flex: 1; }
.dk .n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; }

.gauge-wrap { display: grid; place-items: center; text-align: center; }
.gauge-v { font-family: var(--font-display); font-size: 34px; font-weight: 600; letter-spacing: -.035em; }

.sparkbars { height: 46px; }
.sparkbar { fill: var(--violet); transform-box: fill-box; transform-origin: bottom; }
.sparkbar:hover { fill: var(--violet-deep); }

.heat-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.heat-cell { aspect-ratio: 1; border-radius: 5px; background: var(--line-soft); cursor: pointer; transition: transform .14s ease; }
.heat-cell:hover { transform: scale(1.14); }
.heat-lbl { font-size: 9.5px; color: var(--ink-faint); text-align: center; font-family: var(--font-mono); }

/* ═══ 8 drawer, modal, toast ═════════════════════════════════════════════ */

.scrim {
  position: fixed; inset: 0; z-index: 50; background: rgba(30,27,60,.3);
  backdrop-filter: blur(3px); display: none; animation: fade .18s ease both;
}
.scrim.open { display: flex; }
.scrim.right { align-items: stretch; justify-content: flex-end; }
.scrim.centre { align-items: center; justify-content: center; padding: 22px; }

.drawer {
  width: min(560px, 100vw); background: var(--surface); height: 100%;
  overflow-y: auto; box-shadow: -24px 0 56px -24px rgba(30,27,60,.35);
  animation: slideL .32s cubic-bezier(.2,.7,.3,1);
}
.drawer-head {
  position: sticky; top: 0; z-index: 2; background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-soft);
  padding: 18px 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.drawer-head h3 { font-size: 16.5px; }
.drawer-head .sub { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }
.drawer-body { padding: 20px 24px 46px; }
.x-btn { width: 30px; height: 30px; border-radius: 9px; background: var(--paper); color: var(--ink-soft); display: grid; place-items: center; flex: none; transition: all .14s ease; }
.x-btn:hover { background: var(--line); color: var(--ink); }

.modal {
  width: min(560px, 100%); max-height: min(88vh, 760px); overflow-y: auto;
  background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-pop);
  animation: pop .26s cubic-bezier(.2,.7,.3,1) both;
}
.modal-head { padding: 22px 24px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal-head h3 { font-size: 17px; }
.modal-head .sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 5px; }
.modal-body { padding: 20px 24px; }
.modal-foot { padding: 16px 24px 22px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--line-soft); }

.sec-title { font-size: 11px; letter-spacing: .07em; color: var(--ink-faint); font-weight: 600; text-transform: uppercase; margin: 24px 0 11px; font-family: var(--font-display); }
.sec-title:first-child { margin-top: 0; }

.toasts { position: fixed; right: 22px; bottom: 22px; z-index: 300; display: flex; flex-direction: column; gap: 10px; max-width: 380px; }
.toast {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r-ctrl); box-shadow: var(--shadow-pop); padding: 12px 15px;
  animation: rise .28s cubic-bezier(.2,.7,.3,1) both;
}
.toast.ok  { border-left-color: var(--pos); }
.toast.err { border-left-color: var(--neg); }
.toast-t { font-size: 13px; font-weight: 600; }
.toast-b { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }

/* message thread ------------------------------------------------------------ */
.thread { display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 88%; }
.msg.me { align-self: flex-end; }
.bubble { padding: 11px 15px; border-radius: 15px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.msg.them .bubble { background: var(--paper); border-bottom-left-radius: 5px; }
.msg.me .bubble { background: var(--grad-accent); color: #fff; border-bottom-right-radius: 5px; }
.msg-meta { font-size: 10.5px; color: var(--ink-faint); margin-top: 5px; display: flex; gap: 7px; align-items: center; }
.msg.me .msg-meta { justify-content: flex-end; }

/* routing preview ------------------------------------------------------------ */
.routing {
  background: var(--accent-tint); border: none;
  border-radius: var(--r-ctrl); padding: 13px 15px; font-size: 12.5px; color: var(--accent-deep);
  display: flex; gap: 11px; align-items: flex-start; line-height: 1.55;
}
.routing .ic { flex: none; margin-top: 1px; }
.routing b { font-weight: 600; }
.routing.warn { background: var(--warn-tint); color: var(--warn); }

/* education ------------------------------------------------------------------ */
.edu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 34px 42px; }
.edu-card {
  background: none; border: none; box-shadow: none; text-align: left;
  display: flex; flex-direction: column; padding: 20px 26px 2px 0;
  border-top: 1px solid var(--line-soft); transition: opacity .16s ease;
}
.edu-card:hover { opacity: .66; }
/* The tinted square is the article's icon, not a header band. */
.edu-top { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; position: relative; margin-bottom: 15px; }
.edu-top .ic { width: 21px; height: 21px; }
.edu-new { position: absolute; top: 9px; left: 56px; }
.edu-body { padding: 0; flex: 1; display: flex; flex-direction: column; }
.edu-body h4 { font-size: 14.5px; line-height: 1.35; }
.edu-body p { font-size: 12.5px; color: var(--ink-soft); margin-top: 7px; line-height: 1.55; flex: 1; }
.edu-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 11.5px; color: var(--ink-faint); }
.edu-prose { font-size: 14px; line-height: 1.75; color: var(--ink); }
.edu-prose h4 { font-size: 15px; margin: 22px 0 8px; }
.edu-prose p { margin-bottom: 13px; color: var(--ink-soft); }
.edu-prose ul { margin: 0 0 14px; padding-left: 20px; color: var(--ink-soft); }
.edu-prose li { margin-bottom: 7px; }

/* ═══ 9 responsive ═══════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* Stacked: there is no login card beside the rows to match, so pin a height
     instead of sharing out a column that no longer exists. */
  .hcard { flex: none; height: 88px; }
  .login-card { position: static; max-width: 440px; }
  .book-grid, .pay-grid { grid-template-columns: 1fr; }
  .g-hero, .g-side, .g-3 { grid-template-columns: 1fr; }
  .g-2 { grid-template-columns: 1fr; }
}
/* ── sidebar: full rail → icon rail → bottom bar ─────────────────────── */

@media (max-width: 1080px) and (min-width: 641px) {
  .sidebar { width: 76px; align-items: center; }
  .side-brand { padding: 16px 0; }
  .side-brand .brand-text { display: none; }
  .sidenav { width: 100%; padding: 12px 10px; }
  /* At this width the headings wrap to two lines and say less than the icons
     already do — a hairline carries the same grouping in one pixel. */
  .nav-group { height: 1px; margin: 12px 8px; background: var(--line-soft); overflow: hidden; text-indent: -999px; padding: 0; }
  .nav-group:first-child { display: none; }
  .nav-item { flex-direction: column; gap: 5px; padding: 9px 4px; font-size: 10px; text-align: center; }
  .nav-item .lbl { flex: none; font-size: 10px; }
  .nav-item .nav-pill { position: absolute; top: 4px; right: 9px; }
  .side-foot { width: 100%; padding: 10px 8px 12px; }
  .side-tools { flex-direction: column; gap: 2px; margin-bottom: 8px; }
  .who { justify-content: center; padding: 6px; border-color: transparent; }
  .who-text, .who .chev { display: none; }
}

/* On a phone the rail becomes a bottom tab bar — same markup, same handlers,
   and it matches the healow app so the two do not teach different habits. */
@media (max-width: 640px) {
  .hero-cards { gap: 10px; }
  .hcard { flex: none; height: 96px; }   /* the back wraps to 3 lines at phone width */
  .app { flex-direction: column-reverse; }
  .sidebar {
    width: 100%; flex-direction: row; align-items: center;
    border-right: none; border-top: 1px solid var(--line);
    padding: 0 6px env(safe-area-inset-bottom, 0px);
    background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(14px);
  }
  .side-brand, .nav-group, .side-tools, .who-text, .who .chev { display: none; }
  .sidenav {
    flex: 1; display: flex; align-items: stretch; overflow: visible;
    padding: 7px 0 9px; gap: 2px;
  }
  .nav-item {
    flex: 1; flex-direction: column; gap: 4px; margin: 0;
    padding: 6px 2px; font-size: 9.5px; text-align: center; background: none;
  }
  .nav-item .lbl { flex: none; font-size: 9.5px; }
  .nav-item:hover { background: none; }
  .nav-item.active { background: none; }
  /* Sits ON the bar's top border, not floating above it over the content. */
  .nav-item.active::before { left: 18%; right: 18%; top: -8px; bottom: auto; transform: none; width: auto; height: 2.5px; border-radius: 0 0 3px 3px; }
  .nav-item .nav-pill { position: absolute; top: 0; right: 50%; margin-right: -20px; }
  .side-foot { border-top: none; padding: 0 4px 0 0; flex: none; }
  .who { width: auto; padding: 5px; border-color: transparent; }
}

/* On a real phone six labels plus an avatar do not fit across 390px. Drop to
   icons only — the title attribute and the page heading still name the view,
   and Sign out remains reachable from My Account. */
@media (max-width: 430px) {
  .sidenav { padding: 10px 0 11px; }
  .nav-item .lbl { display: none; }
  .nav-item { padding: 8px 2px; }
  .nav-item .ic { width: 21px; height: 21px; }
  .nav-item.active::before { top: -10px; }
  .side-foot { display: none; }
}

@media (max-width: 860px) {
  .site-links { display: none; }
  .kpi-strip { gap: 14px 0; }
  .kpi { flex-basis: 45%; border-left: none; padding-left: 2px; }
}
@media (max-width: 760px) {
  .tiles { gap: 0 22px; }
  .tile { border-left: none; padding: 2px 0; }
  .grid { gap: 26px; }
}
@media (max-width: 620px) {
  #main { padding: 18px 14px 50px; }
  .card { padding: 18px 16px; }
  .page-head h2 { font-size: 21px; }
  .field-row { grid-template-columns: 1fr; }
  .meter-row { grid-template-columns: 1fr 44px; }
  .meter-row .meter-track { grid-column: 1 / -1; }
  .toasts { left: 14px; right: 14px; max-width: none; }
}