/*
 * YAHYA — the patient platform's design layer.
 *
 * One token set (colour, type, spacing, radius, elevation, motion) and the components every
 * YAHYA page is built from. Light and dark are defined together; every surface, border and
 * state has a token in both. Nothing here is page-specific: pages compose these classes.
 *
 * Order: tokens → base → app bar → layout → cards & sections → data display → lists →
 *        chips & filters → buttons & badges → states (empty, skeleton) → bottom nav → utilities.
 */

/* ── tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* brand ramp — the 2026 design's blue (#4894FE) at 500.
     Two roles, deliberately split. --y-brand is the design's colour exactly as drawn, and it is for things
     that carry no text: fills, borders, icons, the active nav, focus rings. --y-primary is the same hue
     darkened until small text on it, and of it, reads at 4.5:1 — the design's own blue manages only 3.0:1
     against white either way, and --y-primary sits under button labels and colours text in a dozen places.
     So the platform looks like the design and still reads for a patient in their seventies. */
  --y-p-50:#EEF5FF; --y-p-100:#DBEAFF; --y-p-200:#CBE1FF; --y-p-300:#9DC6FF; --y-p-400:#6FABFE;
  --y-p-500:#4894FE; --y-p-600:#3875EA; --y-p-700:#2F6FD8; --y-p-800:#2458B8; --y-p-900:#183470;
  --y-brand:var(--y-p-500); --y-brand-2:var(--y-p-600);
  --y-primary:var(--y-p-700); --y-primary-ink:var(--y-p-800); --y-primary-soft:var(--y-p-50); --y-primary-line:var(--y-p-200);
  /* Secondary text on a filled blue card. The design's #CBE1FF reads 3.6:1 there; anything that passes is
     all but white, so on a blue card the hierarchy comes from weight and size, not from a paler blue. */
  --y-on-primary:#fff; --y-on-primary-soft:#F5F9FF;
  /* Filled heroes carry white text in BOTH themes, so unlike --y-primary they must stay dark at night too.
     Tying them to --y-primary put white on light blue in dark mode, at 1.6:1. */
  --y-hero-a:var(--y-p-800); --y-hero-b:var(--y-p-700);
  /* the logo red: reserved for vital alerts, never decoration */
  --y-vital:#D91C20; --y-vital-soft:#FEE9E9;

  /* semantic */
  --y-ok:#15803D;   --y-ok-soft:#DCFCE7;   --y-ok-line:#A7F3C8;
  --y-warn:#B45309; --y-warn-soft:#FEF3C7; --y-warn-line:#FBD98B;
  --y-bad:#B91C1C;  --y-bad-soft:#FEE2E2;  --y-bad-line:#FBB6B6;
  --y-info:var(--y-p-700); --y-info-soft:var(--y-p-50); --y-info-line:var(--y-p-200);

  /* neutrals & surfaces — the design draws on a white page, with soft #FAFAFA tiles and hairline blue
     outlines on cards rather than grey borders */
  --y-bg:#FFFFFF; --y-surface:#FFFFFF; --y-surface-2:#FAFAFA; --y-surface-3:#F2F5FA;
  --y-line:#E6ECF5; --y-line-strong:#CFD8E6; --y-card-line:var(--y-brand);
  /* ink as drawn; muted keeps the design's blue-grey hue at a shade that reads (the drawn #8696BB is
     2.96:1 on white — it survives as --y-faint, for text a patient never has to read to act) */
  --y-ink:#0D1B34; --y-ink-2:#2D3748; --y-muted:#627196; --y-faint:#8696BB;
  --y-scrim:rgba(13,27,52,.5);

  /* type — 16px base, 1.6 body rhythm.
     The design is set in DIN Next LT Arabic, a commercial Monotype face: it cannot ship without a web
     licence for every installation. Cairo is self-hosted and cached for offline use, so it stays until a
     licence exists; the face is this one token, so the switch is a single line. */
  --y-font:'Cairo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --y-t-xs:.75rem; --y-t-sm:.8125rem; --y-t-md:.875rem; --y-t-base:1rem; --y-t-lg:1.125rem;
  --y-t-xl:1.25rem; --y-t-2xl:1.5rem; --y-t-3xl:1.875rem; --y-t-4xl:2.25rem;

  /* spacing (4/8 rhythm) */
  --y-1:.25rem; --y-2:.5rem; --y-3:.75rem; --y-4:1rem; --y-5:1.25rem; --y-6:1.5rem; --y-8:2rem; --y-10:2.5rem;

  /* radius, elevation, motion — the design's corners are 10px on cards and fields, 5px on tiles and pills */
  --y-r-xs:5px; --y-r-sm:10px; --y-r-md:10px; --y-r-lg:14px; --y-r-xl:20px; --y-r-pill:999px;
  --y-e1:0 1px 2px rgba(13,27,52,.06);
  --y-e2:0 6px 18px -10px rgba(13,27,52,.22);
  --y-e3:0 22px 48px -26px rgba(13,27,52,.42);
  --y-e-nav:0 0 4px 4px rgba(56,117,234,.10);   /* the floating bottom bar's blue glow, as drawn */
  --y-fast:140ms; --y-mid:220ms; --y-ease:cubic-bezier(.2,.8,.3,1);

  --y-appbar-h:56px; --y-nav-h:62px; --y-wrap:960px;
  color-scheme:light;
}

[data-bs-theme="dark"] {
  --y-p-50:#16233A; --y-p-100:#1C2E4A; --y-p-200:#27405F;
  --y-brand:#6FABFE; --y-brand-2:#4894FE;
  /* on a dark page the relationship flips: a light blue carries dark text, and passes 8.8:1 */
  --y-primary:#7FB4FF; --y-primary-ink:#A9CCFF; --y-primary-soft:#16233A; --y-primary-line:#27405F;
  --y-on-primary:#0B1220; --y-on-primary-soft:#1C2E4A;
  --y-card-line:#2E4E80;
  --y-hero-a:#17305A; --y-hero-b:#2458B8;
  --y-e-nav:0 0 4px 4px rgba(0,0,0,.35);
  --y-vital:#FF6B6E; --y-vital-soft:#3A1A1C;
  --y-ok:#4ADE80; --y-ok-soft:#10291B; --y-ok-line:#1F5137;
  --y-warn:#FBBF24; --y-warn-soft:#2C2109; --y-warn-line:#5C4512;
  --y-bad:#F87171; --y-bad-soft:#2E1414; --y-bad-line:#5E2626;
  --y-info:#A9C4E8; --y-info-soft:#16233A; --y-info-line:#27405F;
  --y-bg:#0B1220; --y-surface:#131C2B; --y-surface-2:#172232; --y-surface-3:#1D2A3D;
  --y-line:#253246; --y-line-strong:#32425A;
  --y-ink:#E9EEF7; --y-ink-2:#C7D2E3; --y-muted:#98A6BD; --y-faint:#7A889F;
  --y-scrim:rgba(0,0,0,.62);
  --y-e1:0 1px 2px rgba(0,0,0,.4);
  --y-e2:0 6px 18px -10px rgba(0,0,0,.6);
  --y-e3:0 22px 48px -26px rgba(0,0,0,.8);
  color-scheme:dark;
}

/* ── base ────────────────────────────────────────────────────────────────── */
body {
  font-family:var(--y-font); font-size:var(--y-t-base); line-height:1.6;
  background:var(--y-bg); color:var(--y-ink); margin:0;
  padding-bottom:calc(var(--y-nav-h) + env(safe-area-inset-bottom) + var(--y-4));
  -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4 { line-height:1.3; font-weight:800; margin:0; color:var(--y-ink); }
a { color:var(--y-primary-ink); text-decoration:none; }
a:hover { color:var(--y-p-700); }
:focus-visible { outline:3px solid var(--y-p-400); outline-offset:2px; border-radius:6px; }
.y-wrap { max-width:var(--y-wrap); margin-inline:auto; padding-inline:var(--y-4); }
.y-main { padding-block:var(--y-5) var(--y-8); }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* ── app bar ─────────────────────────────────────────────────────────────── */
.y-appbar {
  position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--y-surface) 86%,transparent);
  backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--y-line);
  padding-block:var(--y-2); padding-top:calc(var(--y-2) + env(safe-area-inset-top));
}
.y-appbar .y-wrap { display:flex; align-items:center; gap:var(--y-2); min-height:var(--y-appbar-h); }
.y-appbar .t { font-weight:800; font-size:var(--y-t-lg); letter-spacing:-.01em; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.y-appbar .sp { margin-inline-start:auto; }
.y-iconbtn {
  width:44px; height:44px; border-radius:var(--y-r-md); border:0; background:transparent; color:var(--y-ink-2);
  display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; position:relative;
  transition:background var(--y-fast) var(--y-ease), color var(--y-fast) var(--y-ease);
}
.y-iconbtn:hover,.y-iconbtn:active { background:var(--y-surface-3); color:var(--y-ink); }
.y-iconbtn .dot {
  position:absolute; top:6px; inset-inline-end:6px; min-width:18px; height:18px; padding:0 5px; border-radius:var(--y-r-pill);
  background:var(--y-vital); color:#fff; font-size:var(--y-t-xs); font-weight:800; line-height:18px; text-align:center;
  box-shadow:0 0 0 2px var(--y-surface);
}
.y-brandmark { height:32px; width:auto; }
.y-avatar {
  width:40px; height:40px; border-radius:var(--y-r-pill); background:var(--y-primary-soft); color:var(--y-primary-ink);
  display:inline-flex; align-items:center; justify-content:center; font-weight:800; flex:none; border:1px solid var(--y-primary-line);
}

/* ── hero (home only) ────────────────────────────────────────────────────── */
.y-hero {
  border-radius:var(--y-r-xl); padding:var(--y-5); color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(140deg,var(--y-hero-a) 0%,var(--y-hero-b) 100%);   /* white text at ≥4.5:1 at every point, in both themes */
  box-shadow:var(--y-e3);
}
.y-hero::after {
  content:""; position:absolute; inset-block-start:-40%; inset-inline-end:-18%; width:62%; aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 62%); pointer-events:none;
}
.y-hero .greet { font-size:var(--y-t-sm); opacity:.9; font-weight:600; }
.y-hero .name { font-size:var(--y-t-2xl); font-weight:800; line-height:1.25; }
.y-hero .sub { font-size:var(--y-t-md); opacity:.92; }
.y-hero-avatar {
  width:56px; height:56px; border-radius:var(--y-r-pill); background:rgba(255,255,255,.18);
  border:2px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:var(--y-t-xl); flex:none;
}
.y-quick { display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:var(--y-2); margin-top:var(--y-4); }
.y-quick a {
  display:flex; flex-direction:column; align-items:center; gap:var(--y-1); min-height:66px; justify-content:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); border-radius:var(--y-r-md);
  color:#fff; font-size:var(--y-t-sm); font-weight:700; padding:var(--y-2); text-align:center;
  transition:background var(--y-fast) var(--y-ease), transform var(--y-fast) var(--y-ease);
}
.y-quick a:hover { background:rgba(255,255,255,.26); color:#fff; }
.y-quick a:active { transform:scale(.97); }
.y-quick i { font-size:1.15rem; }

/* ── cards & sections ────────────────────────────────────────────────────── */
.y-card {
  background:var(--y-surface); border:1px solid var(--y-line); border-radius:var(--y-r-lg);
  box-shadow:var(--y-e1); overflow:hidden;
}
.y-card-pad { padding:var(--y-4); }
.y-card-head {
  display:flex; align-items:center; gap:var(--y-2); padding:var(--y-3) var(--y-4);
  border-bottom:1px solid var(--y-line); font-weight:800; font-size:var(--y-t-base);
}
.y-card-head i { color:var(--y-primary); }
.y-card-head .more { margin-inline-start:auto; font-size:var(--y-t-sm); font-weight:700; }
.y-section { margin-top:var(--y-6); }
.y-section-head { display:flex; align-items:baseline; gap:var(--y-2); margin-bottom:var(--y-3); }
.y-section-head h2 { font-size:var(--y-t-lg); }
.y-section-head .count {
  font-size:var(--y-t-sm); font-weight:700; color:var(--y-muted); background:var(--y-surface-3);
  border-radius:var(--y-r-pill); padding:0 var(--y-2);
}
.y-section-head .more { margin-inline-start:auto; font-size:var(--y-t-sm); font-weight:700; }
.y-grid { display:grid; gap:var(--y-3); }
.y-grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.y-grid-auto { grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); }
@media (min-width:768px){ .y-grid-auto { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); } }

/* ── data display ────────────────────────────────────────────────────────── */
.y-tile {
  background:var(--y-surface); border:1px solid var(--y-line); border-radius:var(--y-r-md);
  padding:var(--y-3) var(--y-4); display:flex; flex-direction:column; gap:var(--y-1); min-height:92px;
  transition:border-color var(--y-fast) var(--y-ease), box-shadow var(--y-fast) var(--y-ease);
}
a.y-tile:hover { border-color:var(--y-primary-line); box-shadow:var(--y-e2); color:inherit; }
.y-tile .l { color:var(--y-muted); font-size:var(--y-t-sm); font-weight:600; display:flex; align-items:center; gap:var(--y-1); }
.y-tile .l i { color:var(--y-primary); font-size:var(--y-t-md); }
.y-tile .v { font-size:var(--y-t-xl); font-weight:800; line-height:1.2; font-variant-numeric:tabular-nums; }
.y-tile .v .u { font-size:var(--y-t-sm); font-weight:700; color:var(--y-muted); margin-inline-start:2px; }
.y-tile .m { font-size:var(--y-t-xs); color:var(--y-faint); margin-top:auto; }
.y-tile.is-empty .v { color:var(--y-faint); font-weight:700; }

.y-gauge { display:flex; align-items:center; gap:var(--y-4); }
.y-gauge .ring { width:92px; height:92px; flex:none; position:relative; }
.y-gauge .ring svg { transform:rotate(-90deg); }
.y-gauge .ring .val {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-weight:800; font-size:var(--y-t-xl); font-variant-numeric:tabular-nums;
}
.y-gauge .ring .val small { font-size:var(--y-t-xs); font-weight:700; color:var(--y-muted); }
.y-track { stroke:var(--y-surface-3); }
.y-band-ok { color:var(--y-ok); stroke:var(--y-ok); }
.y-band-fair { color:var(--y-warn); stroke:var(--y-warn); }
.y-band-low { color:var(--y-bad); stroke:var(--y-bad); }

.y-kv { display:flex; align-items:center; gap:var(--y-3); padding:var(--y-3) 0; border-bottom:1px solid var(--y-line); }
.y-kv:last-child { border-bottom:0; }
.y-kv .k { color:var(--y-muted); font-size:var(--y-t-md); }
.y-kv .v { margin-inline-start:auto; font-weight:700; font-variant-numeric:tabular-nums; }

.y-bar { height:8px; border-radius:var(--y-r-pill); background:var(--y-surface-3); overflow:hidden; }
.y-bar > span { display:block; height:100%; border-radius:inherit; background:var(--y-primary); transition:width var(--y-mid) var(--y-ease); }

/* ── list rows ───────────────────────────────────────────────────────────── */
.y-list { display:flex; flex-direction:column; }
.y-row {
  display:flex; align-items:center; gap:var(--y-3); padding:var(--y-3) var(--y-4); min-height:56px;
  border-bottom:1px solid var(--y-line); color:inherit; background:transparent;
  transition:background var(--y-fast) var(--y-ease);
}
.y-row:last-child { border-bottom:0; }
a.y-row:hover { background:var(--y-surface-2); color:inherit; }
.y-row .ic {
  width:40px; height:40px; border-radius:var(--y-r-md); flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--y-primary-soft); color:var(--y-primary-ink); font-size:var(--y-t-base);
}
.y-row .bd { min-width:0; flex:1; }
.y-row .t { font-weight:700; line-height:1.35; }
.y-row .s { color:var(--y-muted); font-size:var(--y-t-sm); }
.y-row .end { margin-inline-start:auto; display:flex; align-items:center; gap:var(--y-2); color:var(--y-faint); font-size:var(--y-t-sm); }
.y-row .chev { color:var(--y-faint); font-size:var(--y-t-md); }
.y-row.unread { background:var(--y-primary-soft); }

/* day-grouped timeline */
.y-day { margin-top:var(--y-5); }
.y-day-head {
  position:sticky; top:calc(var(--y-appbar-h) + env(safe-area-inset-top)); z-index:5;
  background:var(--y-bg); padding:var(--y-2) 0; font-size:var(--y-t-sm); font-weight:800; color:var(--y-muted);
}
.y-tl { position:relative; padding-inline-start:var(--y-6); }
.y-tl::before { content:""; position:absolute; inset-block:6px; inset-inline-start:15px; width:2px; background:var(--y-line); }
.y-tl .ev { position:relative; margin-bottom:var(--y-3); }
.y-tl .ev .dot {
  position:absolute; inset-inline-start:calc(-1 * var(--y-6)); top:10px; width:32px; height:32px; border-radius:var(--y-r-pill);
  background:var(--y-surface); border:2px solid var(--y-primary-line); color:var(--y-primary-ink);
  display:flex; align-items:center; justify-content:center; font-size:var(--y-t-sm);
}

/* ── chips & filters ─────────────────────────────────────────────────────── */
.y-chips { display:flex; gap:var(--y-2); overflow-x:auto; padding-block:var(--y-1); scrollbar-width:none; -ms-overflow-style:none; }
.y-chips::-webkit-scrollbar { display:none; }
.y-chip {
  display:inline-flex; align-items:center; gap:var(--y-1); white-space:nowrap; flex:none; min-height:38px;
  padding:0 var(--y-4); border-radius:var(--y-r-pill); border:1px solid var(--y-line);
  background:var(--y-surface); color:var(--y-ink-2); font-size:var(--y-t-md); font-weight:700;
  transition:background var(--y-fast) var(--y-ease), color var(--y-fast) var(--y-ease), border-color var(--y-fast) var(--y-ease);
}
.y-chip:hover { border-color:var(--y-primary-line); color:var(--y-primary-ink); }
.y-chip.active { background:var(--y-primary); border-color:var(--y-primary); color:var(--y-on-primary); }
.y-tag {
  display:inline-flex; align-items:center; gap:var(--y-1); border-radius:var(--y-r-pill);
  padding:2px var(--y-2); font-size:var(--y-t-xs); font-weight:700;
  background:var(--y-surface-3); color:var(--y-ink-2);
}

/* ── buttons & badges ────────────────────────────────────────────────────── */
.y-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--y-2); min-height:46px;
  padding:0 var(--y-5); border-radius:var(--y-r-md); font-weight:700; font-size:var(--y-t-md);
  border:1px solid transparent; cursor:pointer;
  transition:background var(--y-fast) var(--y-ease), transform var(--y-fast) var(--y-ease), border-color var(--y-fast) var(--y-ease);
}
.y-btn:active { transform:scale(.98); }
.y-btn-primary { background:var(--y-primary); color:var(--y-on-primary); }
.y-btn-primary:hover { background:var(--y-primary-ink); color:var(--y-on-primary); }
.y-btn-soft { background:var(--y-primary-soft); color:var(--y-primary-ink); border-color:var(--y-primary-line); }
.y-btn-soft:hover { background:var(--y-p-100); color:var(--y-primary-ink); }
.y-btn-ghost { background:transparent; color:var(--y-ink-2); border-color:var(--y-line); }
.y-btn-ghost:hover { background:var(--y-surface-3); color:var(--y-ink); }
.y-btn-danger { background:var(--y-bad-soft); color:var(--y-bad); border-color:var(--y-bad-line); }
.y-btn[disabled],.y-btn.disabled { opacity:.45; pointer-events:none; }
.y-btn-block { width:100%; }

.y-badge { display:inline-flex; align-items:center; gap:var(--y-1); border-radius:var(--y-r-sm); padding:2px var(--y-2); font-size:var(--y-t-xs); font-weight:800; }
.y-badge-ok { background:var(--y-ok-soft); color:var(--y-ok); }
.y-badge-warn { background:var(--y-warn-soft); color:var(--y-warn); }
.y-badge-bad { background:var(--y-bad-soft); color:var(--y-bad); }
.y-badge-info { background:var(--y-info-soft); color:var(--y-info); }
.y-badge-mute { background:var(--y-surface-3); color:var(--y-muted); }

.y-note {
  display:flex; gap:var(--y-3); align-items:flex-start; border-radius:var(--y-r-md); padding:var(--y-3) var(--y-4);
  background:var(--y-info-soft); color:var(--y-ink-2); border:1px solid var(--y-info-line); font-size:var(--y-t-md);
}
.y-note i { color:var(--y-info); margin-top:3px; }
.y-note-ok { background:var(--y-ok-soft); border-color:var(--y-ok-line); } .y-note-ok i { color:var(--y-ok); }
.y-note-warn { background:var(--y-warn-soft); border-color:var(--y-warn-line); } .y-note-warn i { color:var(--y-warn); }
.y-note-bad { background:var(--y-bad-soft); border-color:var(--y-bad-line); } .y-note-bad i { color:var(--y-bad); }

/* ── empty & loading states ──────────────────────────────────────────────── */
.y-empty { text-align:center; padding:var(--y-8) var(--y-4); }
.y-empty .ic {
  width:64px; height:64px; margin-inline:auto; margin-bottom:var(--y-3); border-radius:var(--y-r-lg);
  background:var(--y-primary-soft); color:var(--y-primary); display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.y-empty h3 { font-size:var(--y-t-base); margin-bottom:var(--y-1); }
.y-empty p { color:var(--y-muted); font-size:var(--y-t-md); margin:0 auto var(--y-4); max-width:36ch; }
.y-skeleton { background:linear-gradient(90deg,var(--y-surface-3) 25%,var(--y-surface-2) 50%,var(--y-surface-3) 75%); background-size:200% 100%; animation:y-sh 1.4s infinite; border-radius:var(--y-r-sm); }
@keyframes y-sh { to { background-position:-200% 0; } }

/* ── bottom navigation ───────────────────────────────────────────────────── */
.y-nav {
  position:fixed; inset-block-end:0; inset-inline:0; z-index:45; display:flex;
  background:color-mix(in srgb,var(--y-surface) 92%,transparent); backdrop-filter:blur(12px);
  border-top:1px solid var(--y-line); padding-bottom:env(safe-area-inset-bottom);
}
.y-nav a {
  flex:1; min-height:var(--y-nav-h); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--y-muted); font-size:var(--y-t-xs); font-weight:700; text-align:center; position:relative;
  transition:color var(--y-fast) var(--y-ease);
}
.y-nav a i { font-size:1.15rem; }
.y-nav a.active { color:var(--y-primary-ink); }
.y-nav a.active::before {
  content:""; position:absolute; top:0; inset-inline:28%; height:3px; border-radius:0 0 3px 3px; background:var(--y-primary);
}
.y-nav a:active { color:var(--y-primary); }

/* desktop: the rail replaces the bottom bar */
.y-railnav { display:none; }
@media (min-width:992px) {
  body { padding-bottom:var(--y-8); }
  .y-nav { display:none; }
  .y-railnav { display:flex; gap:var(--y-1); margin-inline-start:auto; flex-wrap:wrap; }
  .y-railnav a {
    padding:var(--y-2) var(--y-3); border-radius:var(--y-r-md); font-weight:700; font-size:var(--y-t-md); color:var(--y-ink-2);
    transition:background var(--y-fast) var(--y-ease), color var(--y-fast) var(--y-ease);
  }
  .y-railnav a:hover { background:var(--y-surface-3); color:var(--y-ink); }
  .y-railnav a.active { background:var(--y-primary-soft); color:var(--y-primary-ink); }
}

/* ── utilities ───────────────────────────────────────────────────────────── */
.y-muted { color:var(--y-muted); }
.y-faint { color:var(--y-faint); }
.y-sm { font-size:var(--y-t-sm); }
.y-xs { font-size:var(--y-t-xs); }
.y-strong { font-weight:800; }
.y-num { font-variant-numeric:tabular-nums; }
.y-stack { display:flex; flex-direction:column; gap:var(--y-3); }
.y-stack-sm { display:flex; flex-direction:column; gap:var(--y-2); }
.y-inline { display:flex; align-items:center; gap:var(--y-2); flex-wrap:wrap; }
.y-scroll-x { display:flex; gap:var(--y-3); overflow-x:auto; padding-block:var(--y-1); scrollbar-width:none; }
.y-scroll-x::-webkit-scrollbar { display:none; }
.y-truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.y-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── "more" sheet (mobile tab overflow) ──────────────────────────────────── */
.y-sheet { position:fixed; inset:0; z-index:60; }
.y-sheet-scrim { position:absolute; inset:0; background:var(--y-scrim); animation:y-fade var(--y-mid) var(--y-ease); }
.y-sheet-panel {
  position:absolute; inset-inline:0; inset-block-end:0; max-height:84vh; overflow-y:auto;
  background:var(--y-surface); border-radius:var(--y-r-xl) var(--y-r-xl) 0 0; box-shadow:var(--y-e3);
  padding-bottom:env(safe-area-inset-bottom); animation:y-rise var(--y-mid) var(--y-ease);
}
.y-sheet-grip { width:44px; height:4px; border-radius:var(--y-r-pill); background:var(--y-line-strong); margin:var(--y-2) auto var(--y-1); }
.y-sheet-head { display:flex; align-items:center; justify-content:space-between; padding:var(--y-2) var(--y-3) var(--y-2) var(--y-4); font-size:var(--y-t-base); }
.y-sheet-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(98px,1fr)); gap:var(--y-2); padding:0 var(--y-4) var(--y-4); }
.y-sheet-item {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--y-2); text-align:center;
  min-height:92px; padding:var(--y-3) var(--y-2); border-radius:var(--y-r-md); color:var(--y-ink-2);
  font-size:var(--y-t-xs); font-weight:700; transition:background var(--y-fast) var(--y-ease);
}
.y-sheet-item:hover { background:var(--y-surface-2); color:var(--y-ink); }
.y-sheet-item .ic {
  width:46px; height:46px; border-radius:var(--y-r-md); background:var(--y-primary-soft); color:var(--y-primary-ink);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.y-sheet-out { padding:0 var(--y-4) var(--y-5); }
@keyframes y-fade { from { opacity:0; } }
@keyframes y-rise { from { transform:translateY(14px); opacity:0; } }
@media (min-width:992px) {
  .y-sheet-panel { inset-block:auto; top:50%; transform:translateY(-50%); inset-inline:0; margin-inline:auto; width:min(560px,92vw); border-radius:var(--y-r-xl); }
}

/* ── bridge: Bootstrap and first-generation YAHYA classes on the new tokens ──
   Pages still built from .card / .list-group / .btn-pt inherit the new surface,
   spacing and dark-mode behaviour; no page is left unstyled while screens are
   rebuilt on the components above. */
.card {
  background:var(--y-surface); border:1px solid var(--y-line); border-radius:var(--y-r-lg);
  box-shadow:var(--y-e1); color:var(--y-ink);
}
.card-header {
  background:transparent; border-bottom:1px solid var(--y-line); color:var(--y-ink);
  font-weight:800; font-size:var(--y-t-base); padding:var(--y-3) var(--y-4);
  border-radius:var(--y-r-lg) var(--y-r-lg) 0 0!important;
}
.card-header i { color:var(--y-primary); }
.card-body { padding:var(--y-4); }
.list-group-item {
  background:transparent; border-color:var(--y-line); color:var(--y-ink);
  padding:var(--y-3) var(--y-4); min-height:52px;
}
.list-group-item a { color:inherit; }
.text-muted { color:var(--y-muted)!important; }
.text-danger { color:var(--y-bad)!important; }
.alert { border-radius:var(--y-r-md); border:1px solid transparent; padding:var(--y-3) var(--y-4); }
.alert-success { background:var(--y-ok-soft); border-color:var(--y-ok-line); color:var(--y-ok); }
.alert-info { background:var(--y-info-soft); border-color:var(--y-info-line); color:var(--y-info); }
.alert-warning { background:var(--y-warn-soft); border-color:var(--y-warn-line); color:var(--y-warn); }
.alert-danger { background:var(--y-bad-soft); border-color:var(--y-bad-line); color:var(--y-bad); }
.badge.bg-danger { background:var(--y-vital)!important; }
.progress { background:var(--y-surface-3); border-radius:var(--y-r-pill); }
.progress-bar.bg-success { background:var(--y-ok)!important; }
.form-control,.form-select {
  background:var(--y-surface); border:1px solid var(--y-line-strong); color:var(--y-ink);
  border-radius:var(--y-r-md); min-height:46px; font-size:var(--y-t-base);
}
.form-control:focus,.form-select:focus { border-color:var(--y-primary); box-shadow:0 0 0 3px var(--y-primary-soft); background:var(--y-surface); color:var(--y-ink); }
.form-label { font-weight:700; font-size:var(--y-t-md); color:var(--y-ink-2); }
.form-text { color:var(--y-muted); }
.table { color:var(--y-ink); --bs-table-bg:transparent; --bs-table-border-color:var(--y-line); }

.btn-pt { background:var(--y-primary); border-color:var(--y-primary); color:var(--y-on-primary); font-weight:700; border-radius:var(--y-r-md); min-height:44px; }
.btn-pt:hover,.btn-pt:focus { background:var(--y-primary-ink); border-color:var(--y-primary-ink); color:var(--y-on-primary); }
.btn-pt-soft { background:var(--y-primary-soft); border-color:var(--y-primary-line); color:var(--y-primary-ink); font-weight:700; border-radius:var(--y-r-md); min-height:44px; }
.btn-pt-soft:hover,.btn-pt-soft:focus { background:var(--y-p-100); border-color:var(--y-primary-line); color:var(--y-primary-ink); }
.btn-sm { min-height:38px; }

.y-kpi { background:var(--y-surface); border:1px solid var(--y-line); border-radius:var(--y-r-md); padding:var(--y-3) var(--y-4); }
.y-kpi .l { color:var(--y-muted); font-size:var(--y-t-sm); font-weight:600; }
.y-kpi .v { font-weight:800; font-size:var(--y-t-xl); font-variant-numeric:tabular-nums; }
.y-metric {
  background:var(--y-surface); border:1px solid var(--y-line); border-radius:var(--y-r-md);
  padding:var(--y-3) var(--y-4); height:100%; transition:border-color var(--y-fast) var(--y-ease), box-shadow var(--y-fast) var(--y-ease);
}
.y-metric:hover,.y-metric.active { border-color:var(--y-primary-line); box-shadow:var(--y-e2); }
.y-metric .l { color:var(--y-muted); font-size:var(--y-t-sm); font-weight:600; }
.y-metric .v { font-weight:800; font-size:var(--y-t-xl); line-height:1.3; font-variant-numeric:tabular-nums; }
.y-metric .v small { font-size:var(--y-t-xs); color:var(--y-muted); font-weight:700; }
.y-metric .t { font-size:var(--y-t-xs); font-weight:700; color:var(--y-muted); }
.y-metric .a { color:var(--y-faint); font-size:var(--y-t-xs); margin-top:var(--y-1); }
.org-chip {
  display:inline-flex; align-items:center; gap:var(--y-1); background:var(--y-surface-3); color:var(--y-ink-2);
  border-radius:var(--y-r-pill); padding:2px var(--y-2); font-size:var(--y-t-xs); font-weight:700;
}
.y-hero-pill {
  display:inline-flex; align-items:center; gap:var(--y-1); background:rgba(255,255,255,.16); color:#fff;
  border-radius:var(--y-r-pill); padding:var(--y-1) var(--y-3); font-size:var(--y-t-sm); font-weight:700; min-height:36px;
}
.y-hero-pill:hover { background:rgba(255,255,255,.3); color:#fff; }
.y-hero-btn { width:42px; height:42px; border-radius:var(--y-r-md); background:rgba(255,255,255,.18); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
.y-hero-btn:hover { background:rgba(255,255,255,.3); color:#fff; }
.y-bell-n { position:absolute; top:-4px; inset-inline-end:-4px; min-width:18px; height:18px; border-radius:var(--y-r-pill); background:var(--y-vital); color:#fff; font-size:var(--y-t-xs); font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.y-fam-dot { width:20px; height:20px; border-radius:var(--y-r-pill); background:#fff; color:var(--y-p-700); display:inline-flex; align-items:center; justify-content:center; font-size:var(--y-t-xs); font-weight:800; margin-inline-end:var(--y-1); }
.y-n-ic { width:40px; height:40px; border-radius:var(--y-r-md); display:flex; align-items:center; justify-content:center; flex:none; }
.y-n-info { background:var(--y-info-soft); color:var(--y-info); }
.y-n-success { background:var(--y-ok-soft); color:var(--y-ok); }
.y-n-warning { background:var(--y-warn-soft); color:var(--y-warn); }
.y-n-danger { background:var(--y-bad-soft); color:var(--y-bad); }
.y-unread { background:var(--y-primary-soft); }
.y-vx { display:inline-flex; align-items:center; gap:var(--y-1); border-radius:var(--y-r-sm); padding:2px var(--y-2); font-size:var(--y-t-xs); font-weight:700; }
.y-vx-given,.y-st-normal { background:var(--y-ok-soft); color:var(--y-ok); }
.y-vx-due,.y-st-high { background:var(--y-warn-soft); color:var(--y-warn); }
.y-vx-overdue,.y-st-critical { background:var(--y-bad-soft); color:var(--y-bad); }
.y-vx-upcoming { background:var(--y-surface-3); color:var(--y-muted); }
.y-st-low { background:var(--y-info-soft); color:var(--y-info); }

/* family tree */
.y-tree { display:flex; flex-direction:column; align-items:center; gap:var(--y-6); }
.y-gen { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--y-3); position:relative; width:100%; }
.y-gen + .y-gen::before { content:""; position:absolute; top:calc(-1 * var(--y-6)); left:50%; height:var(--y-6); border-inline-start:2px dashed var(--y-line-strong); }
.y-gen-label { width:100%; text-align:center; font-size:var(--y-t-xs); font-weight:800; color:var(--y-muted); }
.y-person {
  background:var(--y-surface); border:1px solid var(--y-line); border-radius:var(--y-r-lg); padding:var(--y-3);
  width:250px; max-width:100%; display:flex; gap:var(--y-3); align-items:center; color:inherit;
  transition:border-color var(--y-fast) var(--y-ease), box-shadow var(--y-fast) var(--y-ease);
}
a.y-person:hover { border-color:var(--y-primary-line); box-shadow:var(--y-e2); color:inherit; }
.y-person.me { border:2px solid var(--y-primary); }
.y-person .av { width:46px; height:46px; border-radius:var(--y-r-pill); background:var(--y-primary-soft); color:var(--y-primary-ink); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:var(--y-t-lg); flex:none; }
.y-person .av.f { background:#FCE7F3; color:#9D174D; }
[data-bs-theme="dark"] .y-person .av.f { background:#3B1B2C; color:#F9A8D4; }
.y-person .n { font-weight:800; line-height:1.3; }
.y-person .s { font-size:var(--y-t-sm); color:var(--y-muted); }

/* first-generation timeline markup */
.tl { position:relative; padding-inline-start:var(--y-6); }
.tl::before { content:""; position:absolute; inset-block:0; inset-inline-start:15px; width:2px; background:var(--y-line); }
.tl .ev { position:relative; margin-bottom:var(--y-4); }
.tl .ev .dot {
  position:absolute; inset-inline-start:calc(-1 * var(--y-6)); top:2px; width:32px; height:32px; border-radius:var(--y-r-pill);
  background:var(--y-surface); border:2px solid var(--y-primary-line); color:var(--y-primary-ink);
  display:flex; align-items:center; justify-content:center; font-size:var(--y-t-sm);
}
.min-w-0 { min-width:0; }

/* ── sidebar navigation (desktop) / drawer (phone) ───────────────────────── */
:root { --y-side-w: 264px; }
.y-side {
  position:fixed; inset-block:0; inset-inline-start:0; width:var(--y-side-w); z-index:50; display:flex; flex-direction:column;
  background:var(--y-surface); border-inline-end:1px solid var(--y-line); padding:var(--y-4) var(--y-3) calc(var(--y-4) + env(safe-area-inset-bottom));
  overflow-y:auto; transform:translateX(0); transition:transform var(--y-mid) var(--y-ease);
}
.y-side-brand { display:flex; align-items:center; gap:var(--y-2); padding:var(--y-1) var(--y-2) var(--y-4); }
.y-side-brand img { height:34px; }
.y-side-brand .nm { font-weight:800; font-size:var(--y-t-lg); line-height:1.1; }
.y-side-brand .sb { font-size:var(--y-t-xs); color:var(--y-muted); }
.y-side-group { font-size:var(--y-t-xs); font-weight:800; color:var(--y-faint); letter-spacing:.04em; padding:var(--y-3) var(--y-3) var(--y-1); }
.y-side a.item {
  display:flex; align-items:center; gap:var(--y-3); min-height:44px; padding:0 var(--y-3); border-radius:var(--y-r-md);
  color:var(--y-ink-2); font-weight:700; font-size:var(--y-t-md); transition:background var(--y-fast) var(--y-ease), color var(--y-fast) var(--y-ease);
}
.y-side a.item i { width:22px; text-align:center; font-size:1rem; color:var(--y-muted); }
.y-side a.item:hover { background:var(--y-surface-2); color:var(--y-ink); }
.y-side a.item.active { background:var(--y-primary-soft); color:var(--y-primary-ink); }
.y-side a.item.active i { color:var(--y-primary); }
.y-side a.item .n { margin-inline-start:auto; min-width:20px; height:20px; padding:0 6px; border-radius:var(--y-r-pill); background:var(--y-vital); color:#fff; font-size:var(--y-t-xs); font-weight:800; display:flex; align-items:center; justify-content:center; }
.y-side-foot { margin-top:auto; padding-top:var(--y-3); border-top:1px solid var(--y-line); }
.y-side-scrim { position:fixed; inset:0; z-index:49; background:var(--y-scrim); animation:y-fade var(--y-mid) var(--y-ease); }
@media (max-width:991.98px) {
  .y-side { transform:translateX(calc(var(--y-dir, 1) * 100%)); box-shadow:none; }
  [dir="rtl"] .y-side { --y-dir:1; } [dir="ltr"] .y-side { --y-dir:-1; }
  body.y-side-open .y-side { transform:translateX(0); box-shadow:var(--y-e3); }
  body:not(.y-side-open) .y-side-scrim { display:none; }
}
@media (min-width:992px) {
  body.y-has-side .y-appbar, body.y-has-side .y-main { margin-inline-start:var(--y-side-w); }
  body.y-has-side .y-appbar .y-brandmark, body.y-has-side .y-menubtn { display:none; }
  .y-side-scrim { display:none; }
  .y-railnav { display:none!important; }
}

/* ── sign-in: form beside a slider ───────────────────────────────────────── */
.y-auth { min-height:100dvh; display:grid; grid-template-columns:1fr; background:var(--y-bg); }
.y-auth-hero {
  position:relative; overflow:hidden; color:#fff; display:flex; flex-direction:column; justify-content:space-between; gap:var(--y-6);
  padding:var(--y-6) var(--y-5); background:linear-gradient(150deg,var(--y-p-900) 0%,var(--y-hero-a) 50%,var(--y-hero-b) 100%);
}
.y-auth-hero::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:44px 44px; pointer-events:none; }
.y-auth-hero::after { content:""; position:absolute; inset-block-start:-30%; inset-inline-end:-20%; width:70%; aspect-ratio:1; background:radial-gradient(circle,rgba(255,255,255,.2),transparent 62%); pointer-events:none; }
.y-auth-brand { position:relative; display:flex; align-items:center; gap:var(--y-3); }
.y-auth-brand img { height:48px; }
.y-auth-brand .nm { font-weight:900; font-size:var(--y-t-2xl); line-height:1.1; }
.y-auth-brand .sb { font-size:var(--y-t-sm); opacity:.85; }
.y-auth-slides { position:relative; min-height:230px; }
.y-auth-slide { position:absolute; inset:0; opacity:0; transform:translateY(12px); transition:opacity .5s var(--y-ease), transform .5s var(--y-ease); pointer-events:none; }
.y-auth-slide.is-active { opacity:1; transform:none; pointer-events:auto; }
.y-auth-slide .kicker { display:inline-flex; align-items:center; gap:var(--y-2); background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); border-radius:var(--y-r-pill); padding:var(--y-1) var(--y-3); font-size:var(--y-t-sm); font-weight:700; }
.y-auth-slide h2 { color:#fff; font-size:var(--y-t-3xl); line-height:1.2; font-weight:900; margin:var(--y-4) 0 var(--y-2); max-width:20ch; }
.y-auth-slide p { font-size:var(--y-t-base); line-height:1.75; opacity:.9; margin:0; max-width:48ch; }
.y-auth-foot { position:relative; display:flex; justify-content:space-between; align-items:center; gap:var(--y-3); flex-wrap:wrap; }
.y-auth-dots { display:flex; gap:var(--y-2); align-items:center; }
.y-auth-dots button { height:8px; width:8px; border-radius:var(--y-r-pill); border:0; padding:0; background:rgba(255,255,255,.35); cursor:pointer; transition:all var(--y-mid) var(--y-ease); }
.y-auth-dots button.is-active { width:32px; background:#fff; }
.y-auth-trust { display:flex; gap:var(--y-4); font-size:var(--y-t-xs); opacity:.9; flex-wrap:wrap; }
.y-auth-trust span { display:flex; align-items:center; gap:var(--y-1); }
.y-auth-form { display:flex; align-items:center; justify-content:center; padding:var(--y-6) var(--y-4) var(--y-8); }
.y-auth-form-inner { width:100%; max-width:420px; }
.y-auth-title { font-size:var(--y-t-2xl); font-weight:900; margin:0 0 var(--y-1); }
.y-auth-sub { color:var(--y-muted); margin:0 0 var(--y-5); font-size:var(--y-t-md); }
.y-auth-ways { display:grid; grid-template-columns:1fr 1fr; gap:var(--y-1); background:var(--y-surface-3); border-radius:var(--y-r-md); padding:var(--y-1); margin-bottom:var(--y-5); }
.y-auth-ways button { min-height:42px; border:0; border-radius:var(--y-r-sm); background:transparent; color:var(--y-muted); font-weight:700; font-size:var(--y-t-md); transition:background var(--y-fast) var(--y-ease), color var(--y-fast) var(--y-ease); }
.y-auth-ways button[aria-pressed="true"] { background:var(--y-surface); color:var(--y-primary-ink); box-shadow:var(--y-e1); }
.y-auth-links { display:flex; gap:var(--y-3); justify-content:center; flex-wrap:wrap; margin-top:var(--y-5); font-size:var(--y-t-sm); }
@media (min-width:992px) {
  .y-auth { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
  .y-auth-hero { padding:var(--y-10) var(--y-10); min-height:100dvh; }
  .y-auth-slides { min-height:320px; }
  .y-auth-form { padding:var(--y-10) var(--y-8); }
}

/* ── medicine picture card: editing, thumbnails, and the dose-due popup ────── */
.y-thumb { width:44px; height:44px; border-radius:var(--y-r-md); object-fit:cover; flex:none; border:1px solid var(--y-line); background:var(--y-surface-3); }
.y-medcard-edit { background:var(--y-surface-2); border:1px dashed var(--y-line-strong); border-radius:var(--y-r-lg); padding:var(--y-3); }
.y-medcard-photo { display:block; position:relative; width:100%; max-width:260px; aspect-ratio:4/3; margin-inline:auto; border-radius:var(--y-r-md); overflow:hidden; background:var(--y-surface); border:1px solid var(--y-line); cursor:pointer; }
.y-medcard-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.y-medcard-photo .ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--y-1); text-align:center; padding:var(--y-3); color:var(--y-muted); }
.y-medcard-photo .ph i { font-size:1.6rem; color:var(--y-primary); }
.y-medcard-photo .ph b { color:var(--y-ink); }
.y-medcard-photo .ph small { font-size:var(--y-t-xs); }
.y-stepper { display:flex; align-items:center; gap:var(--y-1); }
.y-stepper input { text-align:center; font-weight:800; font-size:var(--y-t-lg); }
.y-stepper .y-iconbtn { border:1px solid var(--y-line); background:var(--y-surface); }
.y-chip input:checked ~ i, label.y-chip:has(input:checked) { background:var(--y-primary); border-color:var(--y-primary); color:var(--y-on-primary); }
label.y-chip i { margin-inline-end:var(--y-1); }

.y-dose { padding:0 var(--y-4) var(--y-5); text-align:center; }
.y-dose-head { display:flex; align-items:center; justify-content:center; gap:var(--y-2); color:var(--y-warn); font-weight:800; font-size:var(--y-t-base); padding:var(--y-2) 0 var(--y-3); }
.y-dose-head b { color:var(--y-ink); background:var(--y-surface-3); border-radius:var(--y-r-pill); padding:0 var(--y-3); font-variant-numeric:tabular-nums; }
.y-dose-photo { width:min(100%,300px); aspect-ratio:4/3; margin:0 auto var(--y-3); border-radius:var(--y-r-lg); overflow:hidden; background:var(--y-primary-soft); display:flex; align-items:center; justify-content:center; border:1px solid var(--y-line); }
.y-dose-photo img { width:100%; height:100%; object-fit:cover; }
.y-dose-photo i { font-size:4rem; color:var(--y-primary); }
.y-dose-name { font-size:var(--y-t-2xl); font-weight:900; margin:0 0 var(--y-2); }
.y-dose-count { display:flex; align-items:center; justify-content:center; gap:var(--y-3); flex-wrap:wrap; margin-bottom:var(--y-3); }
.y-dose-count .pills { display:inline-flex; gap:6px; font-size:1.6rem; color:var(--y-primary); }
.y-dose-count b { font-size:var(--y-t-4xl); font-weight:900; line-height:1; font-variant-numeric:tabular-nums; }
.y-dose-count span:last-child { font-size:var(--y-t-lg); font-weight:700; color:var(--y-ink-2); }
.y-dose-facts { display:flex; justify-content:center; gap:var(--y-2); flex-wrap:wrap; margin-bottom:var(--y-3); }
.y-dose-facts > span { display:inline-flex; align-items:center; gap:var(--y-2); background:var(--y-surface-3); border-radius:var(--y-r-pill); padding:var(--y-2) var(--y-4); font-weight:700; font-size:var(--y-t-base); }
.y-dose-facts i { color:var(--y-primary); font-size:1.15rem; }
.y-dose-instr { font-size:var(--y-t-xl); line-height:1.7; font-weight:700; color:var(--y-ink); background:var(--y-warn-soft); border:1px solid var(--y-warn-line); border-radius:var(--y-r-lg); padding:var(--y-3) var(--y-4); margin:0 0 var(--y-4); }
.y-dose-actions { display:flex; flex-direction:column; gap:var(--y-3); }
.y-dose-big { min-height:60px; font-size:var(--y-t-xl); border-radius:var(--y-r-lg); }
@media (min-width:992px) { .y-dose { padding-inline:var(--y-6); } }

/* ═══ life layer: section colour, motion, illustration ═══════════════════════
   One accent per section so a screen is recognisable at a glance; entrance motion that
   settles in a third of a second; feedback under the finger; numbers that arrive rather than
   appear. Every animation honours prefers-reduced-motion (the global rule above). */
:root {
  --y-acc-health:#E0447A;  --y-acc-health-soft:#FDE8EF;
  --y-acc-meds:#7C5CE0;    --y-acc-meds-soft:#EEE9FB;
  --y-acc-results:#0E9F8E; --y-acc-results-soft:#DFF6F2;
  --y-acc-family:#E1911B;  --y-acc-family-soft:#FDF1DC;
  --y-acc-org:#3E6DB3;     --y-acc-org-soft:#EFF5FC;
  --y-acc-docs:#4F63D2;    --y-acc-docs-soft:#E9ECFB;
  --y-acc-life:#2FA757;    --y-acc-life-soft:#E2F6E8;
  --y-acc-content:#E36B2D; --y-acc-content-soft:#FDEBE1;
  --y-acc-scan:#0F7AB8;    --y-acc-scan-soft:#E1F1FB;
}
[data-bs-theme="dark"] {
  --y-acc-health:#F17AA3;  --y-acc-health-soft:#3A1826;
  --y-acc-meds:#A78BFA;    --y-acc-meds-soft:#261D45;
  --y-acc-results:#2DD4BF; --y-acc-results-soft:#0F2E2A;
  --y-acc-family:#FBBF24;  --y-acc-family-soft:#3A2A0C;
  --y-acc-org:#7FA6DA;     --y-acc-org-soft:#16233A;
  --y-acc-docs:#8B9CF5;    --y-acc-docs-soft:#1B2147;
  --y-acc-life:#4ADE80;    --y-acc-life-soft:#10291B;
  --y-acc-content:#FB923C; --y-acc-content-soft:#3A1F0E;
  --y-acc-scan:#38BDF8;    --y-acc-scan-soft:#0C2A3D;
}
/* an element declares its section once; icon tiles, tile icons, chips and sidebar items follow */
[data-acc="health"]  { --y-acc:var(--y-acc-health);  --y-acc-soft:var(--y-acc-health-soft); }
[data-acc="meds"]    { --y-acc:var(--y-acc-meds);    --y-acc-soft:var(--y-acc-meds-soft); }
[data-acc="results"] { --y-acc:var(--y-acc-results); --y-acc-soft:var(--y-acc-results-soft); }
[data-acc="family"]  { --y-acc:var(--y-acc-family);  --y-acc-soft:var(--y-acc-family-soft); }
[data-acc="org"]     { --y-acc:var(--y-acc-org);     --y-acc-soft:var(--y-acc-org-soft); }
[data-acc="docs"]    { --y-acc:var(--y-acc-docs);    --y-acc-soft:var(--y-acc-docs-soft); }
[data-acc="life"]    { --y-acc:var(--y-acc-life);    --y-acc-soft:var(--y-acc-life-soft); }
[data-acc="content"] { --y-acc:var(--y-acc-content); --y-acc-soft:var(--y-acc-content-soft); }
[data-acc="scan"]    { --y-acc:var(--y-acc-scan);    --y-acc-soft:var(--y-acc-scan-soft); }
[data-acc] .y-row .ic, [data-acc].y-row .ic, [data-acc] .y-n-ic, [data-acc] .y-empty .ic, [data-acc] .y-sheet-item .ic { background:var(--y-acc-soft); color:var(--y-acc); }
[data-acc] .y-tile .l i, [data-acc].y-tile .l i, [data-acc] .y-card-head i, [data-acc] .y-section-head h2 i { color:var(--y-acc); }
[data-acc] .y-card-head { border-top:3px solid var(--y-acc); }
[data-acc] .y-tag i, [data-acc] .y-gauge .val { color:var(--y-acc); }
.y-side a.item[data-acc] i { color:var(--y-acc); }
.y-side a.item[data-acc].active { background:var(--y-acc-soft); color:var(--y-ink); }
.y-quick a[data-acc] i { color:#fff; }

/* entrance: each block of the page arrives a beat after the previous one */
@keyframes y-rise-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.y-main > * { animation:y-rise-in .38s var(--y-ease) both; }
.y-main > *:nth-child(1) { animation-delay:.02s } .y-main > *:nth-child(2) { animation-delay:.07s } .y-main > *:nth-child(3) { animation-delay:.12s }
.y-main > *:nth-child(4) { animation-delay:.17s } .y-main > *:nth-child(5) { animation-delay:.22s } .y-main > *:nth-child(6) { animation-delay:.27s }
.y-main > *:nth-child(7) { animation-delay:.32s } .y-main > *:nth-child(n+8) { animation-delay:.36s }
.y-grid > *, .y-scroll-x > * { animation:y-rise-in .34s var(--y-ease) both; animation-delay:calc(var(--i, 0) * 45ms); }
.y-list > .y-row { animation:y-rise-in .3s var(--y-ease) both; animation-delay:calc(var(--i, 0) * 35ms); }

/* under the finger */
a.y-tile, a.y-row, .y-btn, .y-quick a, .y-chip, .y-sheet-item, a.y-card, .y-nav a { transition:transform var(--y-fast) var(--y-ease), background var(--y-fast) var(--y-ease), border-color var(--y-fast) var(--y-ease), box-shadow var(--y-fast) var(--y-ease), color var(--y-fast) var(--y-ease); }
a.y-tile:active, a.y-row:active, .y-quick a:active, .y-chip:active, .y-sheet-item:active, a.y-card:active { transform:scale(.975); }
.y-btn:active { transform:scale(.97); }
a.y-tile:hover { transform:translateY(-2px); }

/* the hero breathes: two soft lights drift behind the greeting */
.y-hero { isolation:isolate; }
.y-hero::before { content:""; position:absolute; inset-block-end:-45%; inset-inline-start:-15%; width:60%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.16),transparent 62%); animation:y-drift 14s ease-in-out infinite alternate; pointer-events:none; z-index:-1; }
.y-hero::after { animation:y-drift 18s ease-in-out infinite alternate-reverse; z-index:-1; }
@keyframes y-drift { from { transform:translate(0,0) scale(1); } to { transform:translate(6%,-8%) scale(1.12); } }
.y-hero .sun { width:40px; height:40px; border-radius:var(--y-r-pill); background:rgba(255,255,255,.16); display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem; color:#FFE28A; flex:none; }
.y-hero .date { font-size:var(--y-t-xs); opacity:.85; font-weight:600; }

/* numbers arrive; bars and rings fill */
.y-num-in { display:inline-block; font-variant-numeric:tabular-nums; }
.y-bar > span { animation:y-grow .9s var(--y-ease) both; transform-origin:inline-start; }
@keyframes y-grow { from { transform:scaleX(0); } }
.y-gauge .ring circle:last-of-type, .y-ring-anim { animation:y-dash 1.1s var(--y-ease) both; }
@keyframes y-dash { from { stroke-dasharray:0 999; } }

/* illustrated empty states */
.y-empty .illus { width:120px; height:96px; margin:0 auto var(--y-3); display:block; color:var(--y-acc, var(--y-primary)); }
.y-empty .illus .blob { fill:var(--y-acc-soft, var(--y-primary-soft)); }
.y-empty .illus .dot { fill:currentColor; opacity:.5; animation:y-bob 3s ease-in-out infinite; }
.y-empty .illus .dot:nth-of-type(2) { animation-delay:.6s } .y-empty .illus .dot:nth-of-type(3) { animation-delay:1.2s }
@keyframes y-bob { 50% { transform:translateY(-4px); } }

/* a fresh mark on a dose row */
@keyframes y-pop { 0% { transform:scale(.6); opacity:0; } 60% { transform:scale(1.15); } 100% { transform:scale(1); opacity:1; } }
.y-pop { animation:y-pop .45s var(--y-ease) both; }