/* แม่พร้อม 37+ — clean medical design (Luis, 1 Nov 2026): white cards on a cool blue-grey ground, brand pink only for the main actions
   and the logo, no photo headers with text on top outside the lessons, no gradients or glass. Light by default, dark via data-theme="dark". */
/* Layout: one column (max 600px), small top app bar, five-tab navigation bar for mothers, red extended FAB for help on every mother page. */
:root{
  /* brand (mark, hero card and wordmark only) */
  --brand-grad:linear-gradient(135deg,#FF97BD 0%,#FF62A0 47%,#DF347F 100%);
  --hero-grad:#FCE4EE;
  --fab-grad:#B42318;
  --brand-ink:#5C0030;
  /* colour roles */
  --primary:#C8136C; --on-primary:#FFFFFF; --primary-container:#FCE4EE; --on-primary-container:#5C0030;
  --primary-fixed:#FCE4EE; --on-primary-fixed:#5C0030;
  --secondary:#3E5A73; --on-secondary:#FFFFFF; --secondary-container:#E3EBF2; --on-secondary-container:#13283A;
  --tertiary:#7A5232; --on-tertiary:#FFFFFF; --tertiary-container:#F8E9DD; --on-tertiary-container:#2D1600;
  --ok:#306A34; --on-ok:#FFFFFF; --ok-container:#B4F2B2; --on-ok-container:#032100; --ok-tint:rgba(48,106,52,.08);
  --warn:#865300; --on-warn:#FFFFFF; --warn-container:#FFF1DC; --on-warn-container:#3D2600; --warn-tint:rgba(134,83,0,.08);
  --danger:#B02E1F; --on-danger:#FFFFFF; --danger-container:#FEDBD2; --on-danger-container:#380D00; --danger-tint:rgba(176,46,31,.08);
  --surface:#F4F6F9; --surface-dim:#DCE2E8;
  --surface-container-lowest:#FFFFFF; --surface-container-low:#FFFFFF; --surface-container:#EEF2F6; --surface-container-high:#E6EBF0; --surface-container-highest:#DCE3EA;
  --on-surface:#14202B; --on-surface-variant:#4A5866; --outline:#73808D; --outline-variant:#D3DBE3; --line:rgba(20,32,43,.11);
  --inverse-surface:#22303C; --inverse-on-surface:#F1F5F9; --inverse-primary:#FFB1C8;
  --scrim:rgba(10,18,26,.4); --star:#D99A00; --stage:#FBFCFD;
  --shadow-c:20,32,43;
  --el1:0 1px 2px rgba(var(--shadow-c),.14),0 1px 3px 1px rgba(var(--shadow-c),.06);
  --el2:0 1px 2px rgba(var(--shadow-c),.16),0 2px 6px 2px rgba(var(--shadow-c),.08);
  --el3:0 1px 3px rgba(var(--shadow-c),.18),0 4px 8px 3px rgba(var(--shadow-c),.12);
  /* shape */
  --sh-xs:4px; --sh-sm:8px; --sh-md:12px; --sh-lg:16px; --sh-xl:28px; --sh-full:999px;
  /* type: Thai needs ≈1.5 line-height and no tracking */
  --font:system-ui,-apple-system,"SF Pro Text",Roboto,"Noto Sans Thai","Sukhumvit Set","Thonburi","Segoe UI",sans-serif;
  /* motion */
  --ease:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(.05,.7,.1,1); --dur:300ms;
  /* layout */
  --sat:max(env(safe-area-inset-top,0px),var(--safe-area-inset-top,0px));
  --sab:max(env(safe-area-inset-bottom,0px),var(--safe-area-inset-bottom,0px));
  --sal:max(env(safe-area-inset-left,0px),var(--safe-area-inset-left,0px));
  --sar:max(env(safe-area-inset-right,0px),var(--safe-area-inset-right,0px));
  --nav-h:80px; --fab-h:56px;
  /* spacing ("กว้างขวาง" is the default since 1.7; data-density="compact" restores the 1.6 rhythm) */
  --g-main:20px; --g-sec:12px; --pad-card:20px; --row-py:14px; --row-px:18px; --row-h:64px; --opt-p:16px 18px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --primary:#FFB1C8; --on-primary:#4B0038; --primary-container:#5E1838; --on-primary-container:#FFD9E3;
  --primary-fixed:#5E1838; --on-primary-fixed:#FFD9E3; --hero-grad:#3A1B29; --brand-ink:#FFD9E3; --fab-grad:#C7372A;
  --secondary:#A9C3DA; --on-secondary:#13283A; --secondary-container:#26384A; --on-secondary-container:#D6E4F0;
  --tertiary:#F2BB97; --on-tertiary:#4C2707; --tertiary-container:#663D1E; --on-tertiary-container:#FEDCC6;
  --ok:#98D597; --on-ok:#00390C; --ok-container:#15521E; --on-ok-container:#B4F2B2; --ok-tint:rgba(152,213,151,.10);
  --warn:#FFB964; --on-warn:#462A00; --warn-container:#663E00; --on-warn-container:#FFDDBB; --warn-tint:rgba(255,185,100,.10);
  --danger:#FFB4A4; --on-danger:#670500; --danger-container:#910A08; --on-danger-container:#FEDBD2; --danger-tint:rgba(255,180,164,.10);
  --surface:#0F151B; --surface-dim:#0F151B; --stage:#F4F6F9;
  --surface-container-lowest:#17202A; --surface-container-low:#17202A; --surface-container:#1C2733; --surface-container-high:#24313D; --surface-container-highest:#2D3B48;
  --on-surface:#E6EDF3; --on-surface-variant:#AEBBC8; --outline:#8796A5; --outline-variant:#33414E; --line:rgba(255,255,255,.09);
  --inverse-surface:#E6EDF3; --inverse-on-surface:#22303C; --inverse-primary:#C8136C;
  --scrim:rgba(0,0,0,.55); --star:#FFC24D; --shadow-c:0,0,0;
  color-scheme:dark;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-bottom:calc(var(--nav-h) + var(--fab-h) + 32px)}
html,body{margin:0;min-height:100%}
body{background:var(--surface);color:var(--on-surface);font-family:var(--font);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
h1,h2,h3,h4{margin:0;line-height:1.3;text-wrap:balance;font-weight:700}
h1{font-size:28px}h2{font-size:24px}h3{font-size:17px;font-weight:600}h4{font-size:15px;font-weight:600}
p{margin:0}
a{color:var(--primary)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit;position:relative;isolation:isolate}
button:disabled{opacity:.45;cursor:default}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:var(--sh-sm)}
svg.i{width:24px;height:24px;flex:none;fill:currentColor;stroke:none;vertical-align:-6px}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--on-surface-variant)}
.small{font-size:14px;line-height:1.5}
.dim{opacity:.85}
.center{text-align:center}
.label{font-size:15px;font-weight:600;color:var(--on-surface-variant);padding:4px 4px 0;margin:0}
.label-in{font-size:14px;font-weight:600;color:var(--on-surface-variant);margin:6px 0 2px}
.review,.intro{font-size:14px;color:var(--on-surface-variant);padding:0 4px}
.lead{font-size:17px;color:var(--on-surface-variant);padding:0 4px}
.pair{display:flex;gap:10px;flex-wrap:wrap}.pair>*{flex:1 1 140px}
.chev{color:var(--outline);display:inline-flex;flex:none;margin-left:auto}
.txt{flex:1;min-width:0;display:grid;gap:2px}
.txt b{font-size:17px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.txt small{font-size:14px;color:var(--on-surface-variant);line-height:1.45;overflow-wrap:anywhere}
.txt small svg.i{width:16px;height:16px;vertical-align:-3px}
.ok-t{color:var(--ok)}
/* pressed state layer */
.btn::after,.iconbtn::after,.row::after,.navitem::after,.fab::after,.quick button::after,.node::after,.step::after,.hbtn::after,.adv::after,.choice::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;transition:opacity 120ms}
button.btn:active::after,.iconbtn:active::after,button.row:active::after,.navitem:active::after,.fab:active::after,.quick button:active::after,.node:active::after,.step:active::after,.hbtn:active::after,.adv:active::after,.choice:not(:disabled):active::after{opacity:.1}

/* ---------- app shell ---------- */
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:8px;min-height:calc(64px + var(--sat));padding:calc(var(--sat) + 8px) max(12px,var(--sar)) 8px max(12px,var(--sal));background:var(--surface)}
.topbar .title{font-size:22px;font-weight:600;flex:1;min-width:0;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar.detail .title{padding-left:0}
.brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;flex:1;min-width:0}
.brand .mark{width:30px;height:30px;border-radius:8px;flex:none}
.brand .bt{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand b{color:var(--primary);margin-left:.2em}
.tools{display:flex;align-items:center;gap:6px;flex:none}
.iconbtn{width:44px;height:44px;border-radius:var(--sh-full);display:inline-grid;place-items:center;color:var(--on-surface-variant);flex:none}
.iconbtn.tonal{background:var(--secondary-container);color:var(--on-secondary-container)}
.iconbtn.sm{width:40px;height:40px}
main{display:grid;gap:var(--g-main);max-width:600px;margin:0 auto;padding:6px max(16px,var(--sar)) calc(var(--sab) + 24px) max(16px,var(--sal))}
main.has-fab{padding-bottom:calc(var(--sab) + var(--fab-h) + 32px)}
main.has-nav{padding-bottom:calc(var(--sab) + var(--nav-h) + var(--fab-h) + 24px)}
section{display:grid;gap:var(--g-sec);min-width:0}
.navbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:space-around;align-items:flex-start;height:calc(var(--nav-h) + var(--sab));padding:10px max(8px,var(--sar)) var(--sab) max(8px,var(--sal));background:var(--surface-container);box-shadow:0 -1px 0 var(--line)}
.navitem{flex:1 1 0;min-width:0;display:grid;justify-items:center;gap:4px;color:var(--on-surface-variant);border-radius:var(--sh-lg);padding:2px 0}
.navitem .pill{width:64px;height:32px;border-radius:var(--sh-full);display:grid;place-items:center;transition:background var(--dur) var(--ease)}
.navitem .lbl{font-size:12.5px;font-weight:600;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.navitem.on{color:var(--on-surface)}
.navitem.on .pill{background:var(--primary-container);color:var(--on-primary-container)}
.fab{position:fixed;right:max(16px,var(--sar));bottom:calc(var(--sab) + 16px);z-index:30;display:inline-flex;align-items:center;gap:10px;height:var(--fab-h);padding:0 20px 0 14px;border-radius:var(--sh-lg);background:var(--fab-grad);color:#fff;font-size:17px;font-weight:700;box-shadow:var(--el3)}
.fab .dot{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center}
main.has-nav ~ .fab{bottom:calc(var(--sab) + var(--nav-h) + 16px)}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--sab) + 16px);z-index:60;width:min(560px,calc(100% - 32px));display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--sh-sm);background:var(--inverse-surface);color:var(--inverse-on-surface);font-size:15px;box-shadow:var(--el3);animation:ui-fade var(--dur) var(--ease-out)}
#toast.above-nav{bottom:calc(var(--sab) + var(--nav-h) + 16px)}
#toast span{flex:1}
#toast button{color:var(--inverse-primary);font-weight:700;padding:6px 8px;border-radius:var(--sh-sm);flex:none}

/* ---------- brand & heroes ---------- */
.brand-hero{display:flex;align-items:center;gap:14px;padding:6px 4px 2px}
.brand-hero .mark{width:60px;height:60px;border-radius:14px;box-shadow:var(--el2);flex:none}
.wordmark{font-size:26px;font-weight:700;line-height:1.2}
.wordmark b{color:var(--primary);margin-left:.2em}
.tagline{font-size:15px;color:var(--on-surface-variant);margin-top:2px}
.photo-hero{position:relative;border-radius:var(--sh-xl);overflow:hidden;aspect-ratio:16/10;background:var(--surface-container-high)}
.photo-hero.welcome{aspect-ratio:4/4.2}
.photo-hero img{width:100%;height:100%;object-fit:cover}
.photo-hero .panel{position:absolute;inset:auto 0 0 0;padding:44px 18px 18px;color:#fff;background:linear-gradient(180deg,rgba(26,10,18,0) 0%,rgba(26,10,18,.72) 100%);display:grid;gap:4px}
/* clean variant: photo on top, title on a white strip below (no text over the picture) */
.photo-hero{aspect-ratio:auto;background:var(--surface-container-lowest);border:1px solid var(--line);border-radius:var(--sh-lg);display:flex;flex-direction:column}
.photo-hero img{aspect-ratio:16/9;height:auto}
.photo-hero .panel{position:static;padding:14px 16px 16px;color:var(--on-surface);background:none}
.photo-hero .k{color:var(--primary)}
.photo-hero .v{font-size:21px}
.photo-hero .k{font-size:13.5px;font-weight:600;opacity:.9}
.photo-hero .v{font-size:22px;font-weight:700;line-height:1.3}
.photo-hero h1{font-size:26px;color:#fff}
.photo-hero p{font-size:15px;opacity:.92}
.greet{gap:2px;padding:4px 4px 0}
.greet .date{font-size:15px;font-weight:600;color:var(--on-surface-variant)}
.greet h1{font-size:28px}
.hero-card{position:relative;overflow:hidden;border-radius:var(--sh-lg);padding:20px 20px 18px;background:var(--surface-container-lowest);color:var(--on-surface);display:grid;gap:8px;border:1px solid var(--line)}
.hero-card .wm{position:absolute;right:-18px;bottom:-22px;width:120px;height:120px;opacity:.16;pointer-events:none}
.hero-card .k{font-size:14px;font-weight:600;opacity:.85}
.hero-card .v{font-size:36px;font-weight:700;line-height:1.2}
.hero-card p{font-size:15px;font-weight:500;opacity:.9}
.hero-card .track{background:var(--primary-container)}.hero-card .track span{background:var(--primary)}
.btn.on-brand{border:1.5px solid var(--brand-ink);color:var(--brand-ink);justify-self:start}

/* ---------- surfaces: cards, lists, rows ---------- */
.card{background:var(--surface-container-lowest);border:1px solid var(--line);border-radius:var(--sh-lg);padding:var(--pad-card);display:grid;gap:12px;min-width:0}
.card.outl{border:1.5px solid var(--primary-container);background:var(--surface)}
.card h3{font-size:18px;font-weight:600}
.list{background:var(--surface-container-lowest);border:1px solid var(--line);border-radius:var(--sh-lg);overflow:hidden;display:grid}
.row{display:flex;align-items:center;gap:14px;padding:var(--row-py) var(--row-px);min-height:var(--row-h);width:100%;color:inherit;text-decoration:none;position:relative}
.list>.row+.row,.list>.act+.act,.list>.row+.act,.list>.act+.row,.list>.opt+.opt,.list>.row+.opt,.list>.opt+.row,.list>.hitem+.hitem,.list>div+.row,.list>.row+div{box-shadow:0 -1px 0 var(--line)}
.row.card{border-radius:var(--sh-lg)}
.row.sub{padding-left:16px}
.row.danger b{color:var(--danger)}
.row.add{color:var(--primary)}
.row .thumb{width:56px;height:56px;border-radius:var(--sh-md);object-fit:cover;flex:none;background:var(--surface-container-high)}
.row input[type="time"]{width:auto;min-height:40px;padding:6px 10px}
.kv .row{align-items:flex-start;min-height:48px;padding:10px 16px}
.kv .row dt{flex:0 0 38%;min-width:0;color:var(--on-surface-variant);font-size:15px}
.kv .row dd{flex:1;min-width:0;margin:0;overflow-wrap:break-word;font-size:15px;text-align:right}
dl{margin:0}
.ic{width:40px;height:40px;border-radius:var(--sh-md);display:inline-grid;place-items:center;flex:none;background:var(--surface-container-high);color:var(--on-surface-variant)}
.ic.lg{width:52px;height:52px;border-radius:14px}.ic.lg svg.i{width:28px;height:28px}
.ic.sm{width:32px;height:32px;border-radius:var(--sh-sm)}.ic.sm svg.i{width:20px;height:20px}
.ic-primary{background:var(--primary-container);color:var(--on-primary-container)}
.ic-secondary{background:var(--secondary-container);color:var(--on-secondary-container)}
.ic-tertiary{background:var(--tertiary-container);color:var(--on-tertiary-container)}
.ic-ok{background:var(--ok-container);color:var(--on-ok-container)}
.ic-warn{background:var(--warn-container);color:var(--on-warn-container)}
.ic-danger{background:var(--danger-container);color:var(--on-danger-container)}
.ic-neutral{background:var(--surface-container-highest);color:var(--on-surface-variant)}
.avatar{width:48px;height:48px;border-radius:50%;background:var(--primary-container);color:var(--on-primary-container);display:grid;place-items:center;font-weight:700;font-size:20px;flex:none}
.badge{font-size:12px;font-weight:700;padding:2px 8px;border-radius:var(--sh-full);background:var(--danger);color:var(--on-danger);display:inline-block;vertical-align:middle;margin-left:4px}
.empty{display:grid;justify-items:center;text-align:center;gap:8px;padding:30px 18px;background:var(--surface-container-lowest);border:1px solid var(--line);border-radius:var(--sh-lg)}
.empty b{font-size:17px;font-weight:600}.empty small{font-size:14px;color:var(--on-surface-variant)}
.me{padding:14px 16px}
.code{color:var(--primary);letter-spacing:.14em;font-weight:800}
.cnt{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--sh-full);background:var(--primary-container);color:var(--on-primary-container);font-size:12.5px;font-weight:700;vertical-align:middle}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 22px;border-radius:var(--sh-full);font-size:16px;font-weight:600;text-decoration:none;text-align:center;line-height:1.3;width:100%;overflow:hidden}
.btn.filled{background:var(--primary);color:var(--on-primary)}
.btn.tonal{background:var(--secondary-container);color:var(--on-secondary-container)}
.btn.outlined{border:1.5px solid var(--outline);color:var(--primary)}
.btn.text{color:var(--primary);min-height:44px;padding:8px 14px;width:auto;justify-self:center}
.btn.text.dashed{border:1.5px dashed var(--outline-variant);color:var(--on-surface-variant);width:100%}
.btn.text.dashed.dev{border-color:var(--tertiary);color:var(--tertiary);margin-block:4px 12px}
.btn.filled.danger{background:var(--danger);color:var(--on-danger)}
.btn.outlined.danger{color:var(--danger);border-color:var(--danger)}
.btn.on-danger{border:1.5px solid rgba(255,255,255,.75);color:#fff}
.btn.on-danger.filled{background:#fff;color:#A01E14;border-color:#fff}
.sys-h .btn.text{margin-left:auto;padding:6px 10px;font-size:15px}

/* ---------- selection controls & fields ---------- */
.seg{display:flex;gap:4px;padding:4px;border-radius:var(--sh-full);border:1px solid var(--outline-variant);background:var(--surface-container-lowest)}
.seg button{flex:1;min-height:44px;padding:6px 10px;border-radius:var(--sh-full);font-size:15px;font-weight:600;color:var(--on-surface-variant);display:inline-flex;align-items:center;justify-content:center;gap:6px;overflow:hidden}
.seg button svg.i{width:20px;height:20px}
.seg button[aria-pressed="true"]{background:var(--secondary-container);color:var(--on-secondary-container)}
.seg.mini{padding:3px}.seg.mini button{min-height:34px;padding:4px 12px;font-size:14px}
.tk-m{font-size:14px}.tk-l{font-size:18px}.tk-xl{font-size:23px}
.switch{width:52px;height:32px;border-radius:var(--sh-full);border:2px solid var(--outline);background:var(--surface-container-highest);flex:none;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.switch .knob{position:absolute;top:50%;left:6px;width:16px;height:16px;border-radius:50%;background:var(--outline);transform:translateY(-50%);transition:all var(--dur) var(--ease)}
.switch[aria-checked="true"]{background:var(--primary);border-color:var(--primary)}
.switch[aria-checked="true"] .knob{left:24px;width:24px;height:24px;background:var(--on-primary)}
.cb{width:26px;height:26px;border-radius:50%;border:2px solid var(--outline);display:inline-grid;place-items:center;color:transparent;flex:none;margin-left:auto;transition:all 150ms var(--ease)}
.cb svg.i{width:18px;height:18px}
[aria-pressed="true"] .cb,input:checked ~ .cb{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.sym{cursor:pointer}
.sym input{position:absolute;opacity:0;width:1px;height:1px}
.sym .txt span{font-size:16px}
.lvdot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--outline)}
.lvdot.r{background:var(--danger)}.lvdot.y{background:var(--warn)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 10px;border-radius:var(--sh-sm);border:1px solid var(--outline-variant);font-size:13.5px;font-weight:600;color:var(--on-surface-variant);white-space:nowrap}
.chip svg.i{width:18px;height:18px}
.chip.lv-red{background:var(--danger-container);color:var(--on-danger-container);border-color:transparent}
.chip.lv-yellow{background:var(--warn-container);color:var(--on-warn-container);border-color:transparent}
.chip.lv-green{background:var(--ok-container);color:var(--on-ok-container);border-color:transparent}
.counts{display:flex;flex-wrap:wrap;gap:8px}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;color:var(--on-surface-variant);padding:0 4px}
.field{display:grid;gap:6px;min-width:0}
.field label{font-size:14px;font-weight:600;color:var(--on-surface-variant)}
.req{color:var(--danger)}
input,select,textarea{font:inherit;width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--outline);border-radius:var(--sh-md);background:var(--surface-container-lowest);color:var(--on-surface);outline:none}
textarea{resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
input::placeholder,textarea::placeholder{color:var(--outline)}
.field.bad input,.field.bad select,.consent.bad{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
.err{font-size:14px;color:var(--danger)}
.hint{font-size:13.5px;color:var(--on-surface-variant)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form h3{display:flex;align-items:center;gap:10px;font-size:18px}
.step-n{width:28px;height:28px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:inline-grid;place-items:center;font-size:14px;font-weight:700;flex:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-check{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px 6px 10px;border-radius:var(--sh-sm);border:1px solid var(--outline-variant);font-size:15px;cursor:pointer}
.chip-check input{width:20px;height:20px;min-height:0;padding:0;accent-color:var(--primary)}
.chip-check:has(input:checked){background:var(--secondary-container);border-color:transparent;color:var(--on-secondary-container)}
.consent{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--sh-lg);font-size:15px;cursor:pointer}
.consent input{width:22px;height:22px;min-height:0;padding:0;margin-top:2px;flex:none;accent-color:var(--primary)}
.opt{display:grid;gap:10px;padding:var(--opt-p)}
.opt .oh{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600}
.opt small{font-size:13.5px}

/* ---------- feedback: banners, notes, results, progress ---------- */
.banner{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--sh-lg);width:100%;text-align:left;color:inherit}
.banner .ic{background:rgba(255,255,255,.55);color:inherit}
.banner.danger{background:var(--danger-container);color:var(--on-danger-container)}
.banner.warn{background:var(--warn-container);color:var(--on-warn-container)}
.banner.info{background:var(--secondary-container);color:var(--on-secondary-container)}
.banner .txt b,.banner .txt small{color:inherit}
.banner .txt small{opacity:.85}
.banner .pair{margin-top:8px}
.banner .chev{color:inherit;opacity:.7}
.ring-banner{animation:ui-pulse 1.6s ease-in-out infinite}
:root[data-theme="dark"] .banner .ic{background:rgba(0,0,0,.25)}
.note{display:flex;gap:8px;align-items:flex-start;padding:10px 14px;border-radius:var(--sh-md);font-size:15px;background:var(--secondary-container);color:var(--on-secondary-container)}
.note svg.i{width:20px;height:20px;flex:none;margin-top:2px}
.note.ok{background:var(--ok-container);color:var(--on-ok-container)}
.note.warn{background:var(--warn-container);color:var(--on-warn-container)}
.result{display:grid;gap:8px;padding:18px;border-radius:var(--sh-xl);color:var(--on-ok-container);background:var(--ok-container)}
.result.yellow{background:var(--warn-container);color:var(--on-warn-container)}
.result.red{background:var(--danger-container);color:var(--on-danger-container)}
.result .k{font-size:13.5px;font-weight:600;opacity:.8}
.result h3{font-size:24px;display:flex;align-items:center;gap:8px}
.result ul{margin:0;padding-left:20px;font-size:15px}
.result .sent{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}
.result .btn.filled{background:var(--ok);color:var(--on-ok)}
.result.yellow .btn.filled{background:var(--warn);color:var(--on-warn)}
.result.red .btn.filled{background:var(--danger);color:var(--on-danger)}
.result .btn.outlined{color:inherit;border-color:currentColor}
.advnow{display:grid;gap:8px;padding:16px;border-radius:var(--sh-lg)}
.advnow.g{background:var(--ok-container);color:var(--on-ok-container)}
.advnow.o{background:var(--warn-container);color:var(--on-warn-container)}
.advnow.r{background:var(--danger-container);color:var(--on-danger-container)}
.advnow .k{font-size:13.5px;font-weight:600;opacity:.85;display:flex;align-items:center;gap:6px}
.advnow h3{font-size:20px;display:flex;align-items:center;gap:8px}
.advnow .steps{margin:0;padding-left:20px;font-size:15px;display:grid;gap:4px}
.advnow .btn.filled{background:var(--on-ok-container);color:var(--ok-container)}
.advnow.o .btn.filled{background:var(--on-warn-container);color:var(--warn-container)}
.advnow.r .btn.filled{background:var(--on-danger-container);color:var(--danger-container)}
.advnow .btn.tonal{background:rgba(255,255,255,.6);color:inherit}
:root[data-theme="dark"] .advnow .btn.tonal{background:rgba(0,0,0,.25)}
.track{display:block;height:6px;border-radius:var(--sh-full);background:var(--surface-container-highest);overflow:hidden}
.track span{display:block;height:100%;border-radius:inherit;background:var(--primary);transition:width .4s var(--ease)}
.ringp{--p:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;background:radial-gradient(closest-side,var(--surface-container-lowest) 74%,transparent 76% 100%),conic-gradient(var(--primary) calc(var(--p) * 1%),var(--surface-container-highest) 0)}
.ringp .num{font-size:14px;font-weight:700}
.ringp.lg{width:64px;height:64px}.ringp.lg .num{font-size:20px}.ringp .num small{font-size:11px;color:var(--on-surface-variant)}
.prog{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 14px}
.prog .track{grid-column:1/-1}
.prog .num.big{font-size:34px;font-weight:700;line-height:1}.prog .num.big small{font-size:15px;color:var(--on-surface-variant)}
.stars{display:flex;gap:2px;margin-top:4px}
.stars i{display:inline-flex;color:var(--outline-variant)}.stars i svg.i{width:16px;height:16px}.stars i.on{color:var(--star)}
.okdot{width:28px;height:28px;border-radius:50%;background:var(--ok-container);color:var(--on-ok-container);display:inline-grid;place-items:center;flex:none;margin-left:auto}
.okdot svg.i{width:18px;height:18px}
.linkcard.off{opacity:.8}
.linkline{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ok);padding:0 4px}
.linkline.off{color:var(--on-surface-variant)}

/* ---------- home ---------- */
.sys-h{display:flex;align-items:center;gap:12px}
.step{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;background:var(--surface-container);width:100%;color:inherit}
.step img{width:56px;height:56px;border-radius:var(--sh-md);object-fit:cover;flex:none}
.step .no{position:absolute;left:4px;top:4px;width:22px;height:22px;border-radius:50%;background:var(--primary);color:var(--on-primary);font-size:12px;font-weight:700;display:grid;place-items:center}
.step.next{background:var(--primary-fixed);color:var(--on-primary-fixed)}
.step.next .txt b,.step.next .txt small{color:inherit}
.step.done .no{background:var(--ok)}
.prev-today{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:14px;background:var(--surface-container);width:100%;color:inherit}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.quick button{display:grid;gap:4px;justify-items:start;padding:12px;border-radius:14px;background:var(--surface-container);min-width:0}
.quick button b{font-size:15px;font-weight:600;line-height:1.3}
.quick button small{font-size:13px;color:var(--on-surface-variant);line-height:1.4}
.quick .ic{margin-bottom:4px}
.baby{flex-direction:row;display:flex;align-items:center;gap:14px}
.baby .txt small{font-size:13.5px}.baby .txt b{font-size:18px}.baby .txt em{font-style:normal;font-size:14px;color:var(--on-surface-variant)}
.card.next{padding:10px 16px 6px;text-align:left;width:100%;color:inherit}
.card.next .row{padding:6px 0}

/* ---------- learning ---------- */
.nodes{display:grid;gap:10px}
.node{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--sh-lg);background:var(--surface-container-lowest);border:1px solid var(--line);width:100%;color:inherit;min-height:72px}
.node.lv-r{border-left:5px solid var(--danger)}.node.lv-y{border-left:5px solid var(--warn)}
.nthumb{width:64px;height:64px;border-radius:var(--sh-md);flex:none;object-fit:cover;background:var(--stage);display:grid;place-items:center;overflow:hidden}
.nthumb.num{font-size:22px;font-weight:700;color:var(--primary);background:var(--primary-fixed)}
.nthumb .scene{width:100%;height:100%}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:0 2px}
.crumbs button{color:var(--primary);font-size:14px;font-weight:600;padding:6px 6px;border-radius:var(--sh-sm);min-height:36px}
.crumbs svg.i{width:16px;height:16px;color:var(--outline)}
.node-h{font-size:24px;padding:0 4px}
.ill{background:var(--stage);border-radius:var(--sh-lg);padding:8px;border:1px solid var(--line)}
.ill .scene{width:100%;height:auto;display:block}
.node-img{width:100%;border-radius:var(--sh-lg)}
.body{font-size:17px;line-height:1.6;display:grid;gap:10px;min-width:0}
.body p{margin:0}.body ul,.body ol{margin:0;padding-left:22px;display:grid;gap:4px}
.body sup{color:var(--primary);font-size:12px;font-weight:700}
.body .crit{color:var(--danger);font-weight:600}
.body .fig img{border-radius:var(--sh-md);margin:6px 0}
.body .fig figcaption,.body figcaption{font-size:13.5px;color:var(--on-surface-variant)}
.body dt{font-weight:600}.body dd{margin:0 0 6px}
.body h4{font-size:17px;margin-top:4px}
details.card summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer}
details.card summary::-webkit-details-marker{display:none}
details.card summary h3{display:flex;align-items:center;gap:8px;font-size:17px}
details.card[open] summary .chev{transform:rotate(180deg)}
details.card .body{margin-top:6px}
.refs ol{margin:0;padding-left:20px;font-size:13.5px;color:var(--on-surface-variant);display:grid;gap:6px;line-height:1.45}
.pager{display:flex;justify-content:space-between;gap:10px}.pager .btn{width:auto;flex:1}
.quiz .choices{display:grid;gap:8px}
.choice{display:block;width:100%;text-align:left;padding:12px 14px;border-radius:var(--sh-md);border:1.5px solid var(--outline-variant);font-size:16px;background:var(--surface-container-lowest)}
.choice.right{background:var(--ok-container);border-color:var(--ok);color:var(--on-ok-container)}
.choice.wrong{background:var(--danger-container);border-color:var(--danger);color:var(--on-danger-container)}
.choice:disabled{opacity:1}
.choice:disabled:not(.right):not(.wrong){opacity:.6}
.lq{display:grid;gap:8px;padding:12px;border-radius:var(--sh-md);background:var(--surface-container)}
.lq b{font-size:16px}
.score{font-size:18px;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:6px}
.lesson-end .label{padding:0}
.sum-h{display:flex;align-items:center;gap:12px}.sum-h img{width:48px;height:48px;border-radius:var(--sh-md);object-fit:cover;flex:none}
.sum-h .txt small{font-size:13px}.sum-h .txt b{font-size:17px}
.sumcard ul{margin:0;padding-left:20px;font-size:15.5px;display:grid;gap:3px}
.sumcard.done{border-color:var(--ok)}
.carousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px;margin:0 -2px;scrollbar-width:thin}
.carousel .vcard{flex:0 0 min(280px,82%);scroll-snap-align:start}
.vcard{display:grid;gap:8px;min-width:0}
.vthumb{position:relative;aspect-ratio:16/9;border-radius:var(--sh-lg);overflow:hidden;background:#000}
.vthumb img,.vthumb iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}
.vbtn{display:block;width:100%;height:100%}
.vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;box-shadow:var(--el2)}
.vplay svg.i{width:30px;height:30px}
.vlen{position:absolute;right:8px;bottom:8px;padding:2px 8px;border-radius:var(--sh-xs);background:rgba(0,0,0,.72);color:#fff;font-size:12.5px;font-weight:700}
.vlang{position:absolute;left:8px;top:8px;padding:2px 8px;border-radius:var(--sh-xs);background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:700}
.vmeta b{font-size:15px;font-weight:600;display:block;line-height:1.35}
.vmeta small{font-size:13.5px;color:var(--on-surface-variant);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.vmeta a{font-weight:600}
.clip{background:var(--surface-container-lowest);border:1px solid var(--line);border-radius:var(--sh-lg);overflow:hidden;display:grid}
.clip .stage{position:relative;aspect-ratio:16/9;background:var(--stage)}
.clip .stage .scene{width:100%;height:100%;display:block}
.clip .tagv{position:absolute;left:10px;top:10px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:var(--sh-full);background:rgba(255,255,255,.92);color:#B0285E;display:inline-flex;align-items:center;gap:4px}
.clip .tagv svg.i{width:14px;height:14px}
.clip .big-play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(26,10,18,.12)}
.clip .big-play span{width:64px;height:64px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;box-shadow:var(--el3)}
.clip .big-play svg.i{width:34px;height:34px}
.clip .cap{padding:10px 14px 4px;font-size:15.5px;min-height:46px}
.clip .bar{display:flex;gap:3px;padding:6px 14px 0}
.clip .bar i{flex:1;height:4px;border-radius:2px;background:var(--surface-container-highest);overflow:hidden;position:relative}
.clip .bar i.done{background:var(--primary)}
.clip .bar i.on::after{content:"";position:absolute;inset:0;background:var(--primary);transform-origin:left;animation:clipbar var(--dur,3s) linear forwards}
.clip .ctl{display:flex;align-items:center;gap:6px;padding:8px 10px 10px 14px}
.clip .ctl b{flex:1;font-size:15px;font-weight:600;min-width:0}
.clip .ctl button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--on-surface-variant);flex:none}
.clip .ctl button.main{background:var(--primary);color:var(--on-primary)}
.clip .ctl button[aria-pressed="true"]{color:var(--primary)}
.clip.paused .stage .scene *{animation-play-state:paused}

/* ---------- tools: timers, breathing, check-in ---------- */
.ring-wrap{display:grid;justify-items:center;gap:10px;padding:8px 0}
button.ring{width:200px;height:200px;border-radius:50%;display:grid;place-items:center;align-content:center;gap:6px;background:var(--surface-container-lowest);border:3px solid var(--primary-container);color:var(--primary);font-size:16px;font-weight:600;box-shadow:var(--el1)}
button.ring .num{font-size:30px;font-weight:700;line-height:1}button.ring .num.count{font-size:56px}
button.ring .num svg.i{width:48px;height:48px}
button.ring.on{background:var(--primary);color:var(--on-primary);border-color:var(--primary);animation:ringglow 1.8s ease-in-out infinite}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{display:grid;gap:2px;justify-items:center;text-align:center;padding:14px 12px}
.stat .num{font-size:32px;font-weight:700;line-height:1.1}
.stat span:not(.num){font-size:15px;font-weight:600}
.stat small{font-size:13px;color:var(--on-surface-variant)}
.stat.hit{background:var(--danger-container);color:var(--on-danger-container);border-color:transparent}
.stat.hit small{color:inherit;opacity:.8}
.clog{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.clog li{display:flex;justify-content:space-between;gap:10px;font-size:15px}
.breath-wrap{display:grid;justify-items:center;padding:16px 0}
.breath{width:250px;height:250px;border-radius:50%;display:grid;place-items:center;align-content:center;gap:4px;text-align:center;background:var(--hero-grad);color:var(--brand-ink);font-size:20px;font-weight:700;transform:scale(.85);transition:transform 4s ease-in-out;box-shadow:var(--el2)}
.breath.in{transform:scale(1.08)}
.breath small{font-size:15px;font-weight:500;opacity:.85}
.acts .act{display:grid}
.acts .act.on .row{background:var(--ok-tint)}
.why{padding:0 16px 12px}
.why summary{list-style:none;font-size:14px;font-weight:600;color:var(--primary);cursor:pointer;padding:4px 0}
.why summary::-webkit-details-marker{display:none}
.why p{font-size:15px;color:var(--on-surface-variant);margin:6px 0 8px}
.why sup{color:var(--primary);font-weight:700;font-size:12px}
.cups{display:flex;gap:4px;margin-top:4px}
.cups i{width:10px;height:14px;border-radius:3px;background:var(--surface-container-highest)}.cups i.on{background:var(--primary)}
.stepper{display:flex;gap:6px;flex:none}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.week .wd{display:grid;justify-items:center;gap:4px;font-size:12.5px;color:var(--on-surface-variant)}
.week .wd .ringp{width:38px;height:38px}.week .wd .ringp .num{font-size:12px}
.week .wd.today small{color:var(--primary);font-weight:700}
.appt .cal{width:50px;height:54px;border-radius:var(--sh-md);background:var(--primary-fixed);color:var(--on-primary-fixed);display:grid;place-items:center;align-content:center;flex:none;line-height:1.1}
.appt .cal small{font-size:11.5px;font-weight:600}.appt .cal b{font-size:20px}
.faded{opacity:.7}
.hitem{display:grid;gap:4px;padding:12px 16px 12px 18px;position:relative;font-size:14px}
.hitem::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:2px;background:var(--outline-variant)}
.hitem.red::before{background:var(--danger)}.hitem.yellow::before{background:var(--warn)}.hitem.green::before{background:var(--ok)}
.hitem b{font-size:15px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hitem b svg.i{width:18px;height:18px}
.hitem>span{color:var(--on-surface-variant)}
.tl{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:2px}
.tl li{display:flex;gap:10px;color:var(--on-surface-variant)}
.tl time{font-variant-numeric:tabular-nums;flex:none;color:var(--outline)}
.tablewrap{padding:4px 0;overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:12.5px;font-weight:600;color:var(--on-surface-variant);padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl .note-row td{font-size:13.5px;color:var(--on-surface-variant);padding-top:0;border-bottom:1px solid var(--line)}

/* ---------- consult & ward ---------- */
.case-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.case-h b{flex:1;font-size:17px;font-weight:600}.case-h small{font-size:13.5px;color:var(--on-surface-variant)}
.live.lv-red,.case.lv-red{border:2px solid var(--danger)}
.live.lv-yellow,.case.lv-yellow{border:2px solid var(--warn)}
.reasons{margin:0;padding-left:20px;font-size:15.5px;display:grid;gap:2px}
.chat{display:grid;gap:8px;max-height:46vh;overflow-y:auto;padding:4px 0}
.msg{max-width:88%;padding:10px 14px;border-radius:var(--sh-lg);background:var(--surface-container-high);font-size:15.5px;line-height:1.45;overflow-wrap:anywhere}
.msg.them{justify-self:start;border-bottom-left-radius:var(--sh-xs)}
.msg.me{justify-self:end;background:var(--primary-container);color:var(--on-primary-container);border-bottom-right-radius:var(--sh-xs)}
.msg.k-advice{background:var(--ok-container);color:var(--on-ok-container)}
.msg.k-safe,.msg.k-close{background:var(--surface-container)}
.msg .who{display:block;font-size:12px;font-weight:600;opacity:.75;margin-bottom:2px}
.msg a{color:inherit;font-weight:600}
.flow{margin:0;padding:0;list-style:none;display:grid;gap:12px;counter-reset:f}
.flow li{display:grid;grid-template-columns:30px 1fr;gap:2px 12px;counter-increment:f}
.flow li::before{content:counter(f);grid-row:1/3;width:30px;height:30px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-weight:700;font-size:14px}
.flow li b{font-size:16px;font-weight:600}.flow li small{font-size:14px;color:var(--on-surface-variant)}
.advs .adv{display:flex;gap:12px;padding:12px 16px;align-items:flex-start}
.advs .adv ul{margin:4px 0 0;padding-left:18px;font-size:14.5px;color:var(--on-surface-variant);display:grid;gap:2px}
.advpick{display:grid;gap:8px}
.advpick .adv{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--sh-md);background:var(--surface-container);width:100%;color:inherit;text-align:left}
.call{display:flex;align-items:center;gap:12px;padding:12px 14px;color:inherit;text-decoration:none}
.call .txt small{font-size:13.5px}.call .txt b{font-size:18px}
.call .go{width:46px;height:46px;border-radius:50%;background:var(--ok);color:var(--on-ok);display:grid;place-items:center;flex:none}
.call.emergency .txt b{font-size:24px;color:var(--danger)}
.call.emergency .go{background:var(--danger);color:var(--on-danger)}
.ward{flex-direction:row;display:flex;align-items:center;gap:12px}
.mrow{align-items:flex-start;padding-left:14px}
.mrow .lvbar{position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:2px;background:var(--ok)}
.mrow.lv-red .lvbar{background:var(--danger)}.mrow.lv-yellow .lvbar{background:var(--warn)}
.mrow.wait{background:var(--danger-tint)}
.mrow .chip{margin-left:auto;align-self:center}
.say{display:grid;gap:4px;padding:10px 14px;border-radius:var(--sh-md);background:rgba(0,0,0,.18);font-size:15px}
.say b{font-size:13.5px;opacity:.9;display:flex;align-items:center;gap:6px}
.say svg.i{width:16px;height:16px}

/* ---------- overlays: red alert, sheets ---------- */
.scrim{position:fixed;inset:0;z-index:40;background:var(--scrim);animation:ui-fade var(--dur) var(--ease-out)}
.sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:41;width:min(640px,100%);max-height:calc(100% - var(--sat) - 24px);overflow-y:auto;display:grid;gap:10px;padding:8px 20px calc(var(--sab) + 20px);border-radius:var(--sh-xl) var(--sh-xl) 0 0;background:var(--surface-container-lowest);color:var(--on-surface);box-shadow:var(--el3);animation:ui-rise .36s var(--ease-out);outline:none}
.sheet .handle{width:32px;height:4px;border-radius:2px;background:var(--outline-variant);justify-self:center;margin-bottom:6px}
.sheet .k{font-size:13.5px;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:6px}
.sheet.warn .k{color:var(--warn)}
.sheet h2{font-size:24px}
.sheet ol{margin:0;padding-left:22px;font-size:16px;display:grid;gap:4px}
.sheet .box{display:grid;gap:8px;padding:12px;border-radius:var(--sh-md);background:var(--surface-container);font-size:15px}
.hbtn{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:var(--sh-lg);background:var(--surface-container);width:100%;color:inherit;text-decoration:none;min-height:76px}
.hbtn .txt b{font-size:18px}
.hbtn.danger{background:var(--danger-container);color:var(--on-danger-container)}
.hbtn.danger .txt b,.hbtn.danger .txt small{color:inherit}
.hbtn.danger .chev{color:inherit}
.ov.red{position:fixed;inset:0;z-index:50;overflow-y:auto;background:#A61E14;color:#fff;outline:none;animation:ui-fade var(--dur) var(--ease-out)}
.ov-in{max-width:600px;margin:0 auto;padding:calc(var(--sat) + 20px) max(16px,var(--sar)) calc(var(--sab) + 24px) max(16px,var(--sal));display:grid;gap:12px}
.ov.red .k{font-size:14px;font-weight:700;opacity:.9;display:flex;align-items:center;gap:6px}
.ov.red h2{font-size:32px;line-height:1.2;color:#fff}
.ov.red .reasons{font-size:17px}
.pane{display:grid;gap:10px;padding:14px 16px;border-radius:var(--sh-lg);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3)}
.pane h4{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.pane p{font-size:15px}
.acked{display:flex;align-items:center;gap:6px;font-weight:600;font-size:15px}
.steps{margin:0;padding-left:22px;display:grid;gap:4px;font-size:16px}
.ov.red .steps{font-size:17px;font-weight:500}
.big-call{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:6px 14px;padding:16px 18px;border-radius:var(--sh-lg);background:#fff;color:#A01E14;text-decoration:none;box-shadow:var(--el3)}
.big-call svg.i{width:36px;height:36px;grid-row:1/3}
.big-call b{font-size:40px;line-height:1;font-weight:800;grid-row:1/3}
.big-call span{font-size:15px;font-weight:600;align-self:center}
.final{display:grid;gap:8px;padding:14px 16px;border-radius:var(--sh-lg);background:rgba(0,0,0,.25);font-weight:600}
.ov.red .pair .btn{width:auto;flex:1}

/* ---------- home (version 1.6 layout: welcome, self-care tiles, warning, knowledge, tools, consultation) ---------- */
.topbar.home .brand .bt{display:grid;line-height:1.2}
.topbar.home .brand .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar.home .brand .bt small{font-size:12.5px;font-weight:500;color:var(--on-surface-variant);white-space:nowrap}
.avatar.sm{width:40px;height:40px;font-size:16px;margin-left:2px}
.iconbtn .badge.dot{position:absolute;top:8px;right:8px;width:10px;height:10px;padding:0;margin:0;border-radius:50%;border:2px solid var(--surface)}
.welcome-card{display:flex;gap:14px;align-items:center;padding:14px}
.welcome-card .avatar{width:64px;height:64px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:28px;font-weight:700;background:var(--primary-container);color:var(--on-primary-container)}
.welcome-card .txt small{font-size:14px;color:var(--on-surface-variant)}
.welcome-card .txt b{font-size:22px;line-height:1.25}
.welcome-card .txt .num{font-size:15px}
.welcome-card .chips{margin-top:6px}
.ci-card h3{font-size:17px}
.ci4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ci4 button{display:grid;justify-items:center;gap:6px;padding:12px 4px 10px;border-radius:14px;background:var(--surface-container);min-width:0}
.ci4 button b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ci4 button.on{background:var(--ok-tint)}
.ci-prog{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px}
.ci-prog .track{grid-column:1/-1}
.ci-prog small{font-size:13.5px;color:var(--on-surface-variant)}
.ci-prog .btn.text{padding:4px 8px;min-height:36px;font-size:14px;justify-self:end}
.bleedcard{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;padding:14px 16px;border-radius:var(--sh-lg);background:var(--danger-container);color:var(--on-danger-container);border:1.5px solid var(--danger);position:relative;overflow:hidden;min-height:72px}
.bleedcard .ic{background:var(--danger);color:var(--on-danger)}
.bleedcard .txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.bleedcard .txt b{font-size:17px;color:inherit}
.bleedcard .txt small{color:inherit;opacity:.85}
.bleedcard .go{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;background:var(--danger);color:var(--on-danger);font-weight:600;white-space:nowrap}
.bleedcard::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity 120ms;pointer-events:none}
.bleedcard:active::after{opacity:.1}
.sheet.bleed h2{margin-bottom:0}
.warncard{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:center;padding:14px 16px;border-radius:var(--sh-lg);background:var(--warn-container);color:var(--on-warn-container)}
.warncard .ic{background:rgba(255,255,255,.55);color:inherit}
.warncard .txt b,.warncard .txt small{color:inherit}
.warncard .txt small{opacity:.85}
.warncard .btn{grid-column:1/-1;background:var(--primary);color:var(--on-primary);margin-top:2px}
:root[data-theme="dark"] .warncard .ic{background:rgba(0,0,0,.25)}
.knowcard .cover{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--sh-md);overflow:hidden;background:var(--surface-container-high)}
.knowcard .cover img{width:100%;height:100%;object-fit:cover}
.knowcard .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;box-shadow:var(--el2)}
.knowcard .play svg.i{width:30px;height:30px}
.kmeta{display:flex;gap:10px;align-items:center}
.kmeta .btn{width:auto;flex:none;min-height:40px;padding:6px 14px;font-size:14px}
.tools2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tool{display:grid;gap:4px;justify-items:start;padding:14px;text-align:left}
.tool b{font-size:16px;font-weight:600;margin-top:6px;line-height:1.3}
.tool small{font-size:13.5px;color:var(--on-surface-variant);line-height:1.4}
.consultcard{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:var(--sh-xl);background:var(--primary-fixed);color:var(--on-primary-fixed)}
.consultcard img{width:88px;height:88px;border-radius:var(--sh-lg);object-fit:cover;flex:none}
.consultcard .txt b{font-size:18px;color:inherit}
.consultcard .txt small{color:inherit;opacity:.85}
.consultcard .status{font-size:13.5px;font-weight:600;display:flex;gap:6px;align-items:center;margin-top:4px;flex-wrap:wrap}
.consultcard .status svg.i{width:18px;height:18px}
.consultcard .btn{margin-top:8px;justify-self:start;width:auto}
.autolink{padding:8px 0}
details.other-code summary{font-size:14px;font-weight:600;color:var(--primary);cursor:pointer;list-style:none;padding:6px 0;display:flex;align-items:center;gap:6px}
details.other-code summary::-webkit-details-marker{display:none}
details.other-code summary svg.i{width:18px;height:18px}
.linkcard .btn.tonal{width:auto;min-height:40px;padding:6px 14px;font-size:14px;flex:none}
:root[data-text="xl"] .ci4{grid-template-columns:1fr 1fr}
:root[data-text="xl"] .tools2{grid-template-columns:1fr}

/* ---------- text size & motion ---------- */
:root[data-text="l"]{zoom:1.12}
:root[data-text="xl"]{zoom:1.26}
:root[data-text="xl"] .quick,:root[data-text="xl"] .two,:root[data-text="xl"] .stats{grid-template-columns:1fr}
:root[data-text="xl"] .navitem .lbl{font-size:11.5px}
@media (max-width:360px){.quick{grid-template-columns:1fr 1fr}.navitem .pill{width:52px}}
@media (min-width:700px){main{padding-top:12px}.photo-hero.welcome{aspect-ratio:16/9}}
@media (hover:hover){.btn:hover::after,.iconbtn:hover::after,button.row:hover::after,.navitem:hover::after,.node:hover::after,.step:hover::after,.hbtn:hover::after,.adv:hover::after{opacity:.06}}
@keyframes ui-fade{from{opacity:0}to{opacity:1}}
@keyframes ui-rise{from{transform:translate(-50%,40px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes ui-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
@keyframes ringglow{0%,100%{box-shadow:0 0 0 0 rgba(200,19,108,.35)}50%{box-shadow:0 0 0 14px rgba(200,19,108,0)}}
@keyframes clipbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
:root[data-motion="reduce"] *{animation:none!important;transition:none!important}
:root[data-motion="reduce"] .scene *{animation-duration:0s!important;animation-iteration-count:1!important}

/* ---------- drawings for the lessons (window.CLIPS / window.ILL): the stage is always light, so this palette is fixed ---------- */
.scene .ut{fill:#F4B9C8;stroke:#C2356A;stroke-width:2}
.scene .sac{fill:#FFE9EF}
.scene .plac{fill:#B23A5A}
.scene .baby ellipse,.scene .baby circle,.scene .bb circle,.scene .bb ellipse{fill:#F7C9A6}
.scene .limb{fill:none;stroke:#E7A985;stroke-width:6;stroke-linecap:round}
.scene .cx{fill:#E58BA6;stroke:#C2356A;stroke-width:1.5}
.scene .cxl{stroke:#C2356A;stroke-width:1.5}
.scene .cl{font-family:inherit;font-size:13px;fill:#3A2330;font-weight:600}
.scene .cl.s{font-size:11.5px;font-weight:500}
.scene .cl.b{font-weight:800}
.scene .cl.big{font-size:30px;font-weight:800}
.scene .cl.mid{text-anchor:middle}.scene .cl.end{text-anchor:end}
.scene .cl.r{fill:#C2121B}.scene .cl.g{fill:#1E7A45}.scene .cl.w{fill:#fff}
.scene .tl-bg{stroke:#E6D8E0;stroke-width:10;stroke-linecap:round}
.scene .tl{stroke:#C2356A;stroke-width:10;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260}
.scene .tick{stroke:#B49AA8;stroke-width:1.5}
.scene .zone-g{fill:#34C759}.scene .zone-r{fill:#FF6B6B}
.scene .zone-r3{fill:#D7263D}.scene .zone-r2{fill:#F25F5C}.scene .zone-r1{fill:#FFA69E}
.scene .wt{fill:#F7C9A6;stroke:#E7A985;stroke-width:2}
.scene .glow-r{fill:#FF4D4D;opacity:.35}
.scene .germ{fill:#4CAF50;stroke:#2E7D32;stroke-width:1.5}
.scene .bleed{fill:#D7263D}
.scene .red{fill:#D7263D}.scene .pink{fill:#F28CB1}.scene .blue{fill:#5AB0F0}
.scene .stress{fill:#FFE08A;stroke:#E0A800;stroke-width:2}
.scene .zz{fill:none;stroke:#B07800;stroke-width:2.5;stroke-linejoin:round}
.scene .wave{fill:none;stroke:#E0A800;stroke-width:3;stroke-linecap:round}
.scene .arrow{fill:none;stroke:#C2121B;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.scene .woman circle,.scene .woman path{fill:#E9C2D2}
.scene .hi{fill:none;stroke:#C2121B;stroke-width:5;stroke-linecap:round}
.scene .pain{fill:#FF4D4D;opacity:.6}
.scene .ring-bg{fill:none;stroke:#E6D8E0;stroke-width:8}
.scene .ring{fill:none;stroke:#C2356A;stroke-width:8;stroke-linecap:round;stroke-dasharray:164;stroke-dashoffset:164}
.scene .dot-r{fill:#D7263D}
.scene .phone{fill:#2C2230}.scene .scr{fill:#FCE8EF}.scene .scr-r{fill:#D7263D}
.scene .callic{fill:#fff}
.scene .lung{fill:#F59EB3;stroke:#C2356A;stroke-width:2}.scene .trach{stroke:#C2356A;stroke-width:6;stroke-linecap:round}
.scene .box{fill:#E5F3FB;stroke:#7FB8D8;stroke-width:3}
.scene .therm{fill:#fff;stroke:#5AB0F0;stroke-width:3}.scene .therm-b{fill:#5AB0F0}
.scene .bottle{fill:#fff;stroke:#B49AA8;stroke-width:3}.scene .nip{fill:#F2C14E}
.scene .brain{fill:#F7B6C8;stroke:#C2356A;stroke-width:2}.scene .bline{fill:none;stroke:#C2356A;stroke-width:2;stroke-linecap:round}
.scene .heart{fill:#D63C74}
.scene .bed{fill:#D9CCE0}.scene .side{fill:#E9C2D2}.scene .head{fill:#E9C2D2}
.scene .hand{fill:#F7C9A6;stroke:#E7A985;stroke-width:2}
.scene .kickr{fill:none;stroke:#D63C74;stroke-width:3}
.scene .btn-c{fill:#D63C74}.scene .btn-g{fill:#34C759}
/* Only animated shapes turn around their own box; positioned shapes (rotate/scale attributes) keep SVG coordinates. */
.scene [class*="a-"]{transform-box:fill-box}.scene [style*="transform-origin"],.scene .a-orbit{transform-box:view-box}
.a-draw{animation:draw 3s ease forwards}
.a-fade{opacity:0;animation:fadein 1s ease forwards .4s}.a-fade.d1{animation-delay:1.4s}.a-fade.d2{animation-delay:2.4s}
.a-pop{transform-origin:center;animation:pop .6s cubic-bezier(.3,1.6,.6,1) both}
.a-grow-x{transform-origin:left;animation:growx 2s ease both .3s}
.a-glow{animation:glow 1.6s ease-in-out infinite}
.a-pulse{animation:pulse 1.6s ease-in-out infinite}
.a-rise{animation:rise 2.5s linear infinite}
.a-swell{animation:swell 3s ease-in-out infinite}
.a-squeeze{animation:squeeze 3s ease-in-out infinite}
.a-open{animation:fadein 1.5s ease both 1s}
.a-down{animation:down 1.4s ease-in-out infinite}
.a-drop{animation:drop 1.8s ease-in infinite}
.a-wave{animation:wave 1.5s ease-out infinite}
.a-tight{animation:tight 4s ease-in-out infinite}
.a-ring{animation:ring 4s ease-in-out infinite}
.a-ring-slow{animation:ring 7s linear forwards}
.a-breathe{animation:breathe 1.1s ease-in-out infinite}
.scene .a-orbit{transform-origin:160px 100px;transform-box:view-box;animation:orbit 6s linear infinite}
.a-tilt{animation:tilt 2.4s ease-in-out infinite}
.a-rest{animation:rest 3s ease-in-out infinite}
.a-ripple{transform-origin:center;opacity:0;animation:ripple 1.6s ease-out both}
.a-count{opacity:0;animation:count 1.6s ease both}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes glow{0%,100%{opacity:.25}50%{opacity:.85}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes rise{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-60px);opacity:0}}
@keyframes swell{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes squeeze{0%,100%{transform:scale(1)}45%,60%{transform:scale(.93,.9)}}
@keyframes down{0%,100%{transform:translateY(-4px)}50%{transform:translateY(6px)}}
@keyframes drop{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(20px);opacity:0}}
@keyframes wave{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-20px)}}
@keyframes tight{0%,100%{transform:scale(1);opacity:.25}40%,60%{transform:scale(.96);opacity:1}}
@keyframes ring{0%{stroke-dashoffset:164}50%{stroke-dashoffset:0}100%{stroke-dashoffset:164}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes orbit{from{transform:rotate(0deg) translateX(58px)}to{transform:rotate(360deg) translateX(58px)}}
@keyframes tilt{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(-35deg)}}
@keyframes rest{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes ripple{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(2.6)}}
@keyframes count{0%{opacity:0;transform:scale(.4)}20%,80%{opacity:1;transform:scale(1)}100%{opacity:0}}
.scene .plac.pale{fill:#9E4560;opacity:.75}
.scene .vessel{fill:none;stroke:#C2356A;stroke-width:3}
.scene .rbc{fill:#D7263D}.scene .rbc.pale{fill:#F2A7B3}
.scene .gauge{fill:#fff;stroke:#B49AA8;stroke-width:3}.scene .gauge-z{fill:none;stroke:#FF6B6B;stroke-width:6;stroke-dasharray:30 100;stroke-dashoffset:-48}
.scene .needle{stroke:#C2121B;stroke-width:3;stroke-linecap:round}.scene .hub{fill:#3A2330}
.scene .plate{fill:#fff;stroke:#D9CCE0;stroke-width:3}.scene .plate-in{fill:#F7F2F8}
.scene .food{fill:#E58B4C}.scene .food.g{fill:#5BB35B}.scene .food.y{fill:#F2C14E}
.scene .drop-pale{fill:#F7C6CF;stroke:#E08BA0;stroke-width:2}.scene .drop-r{fill:#D7263D}
.scene .arr{fill:none;stroke:#8C6F80;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.scene .arr.dash{stroke-dasharray:6 6}
.scene .sac.water{fill:#D8EEFB}.scene .wavel{fill:none;stroke:#5AB0F0;stroke-width:3;stroke-linecap:round}
.scene .ruler{fill:none;stroke:#3A2330;stroke-width:2}
.scene .bladder{fill:#FFE8A3;stroke:#E0A800;stroke-width:2}
.scene .gumr{fill:#F28CA0}.scene .tooth{fill:#fff;stroke:#C9B8C2;stroke-width:2}
.scene .cig{fill:#fff;stroke:#C9B8C2;stroke-width:2}.scene .tip{fill:#FF7A2F}.scene .smk{fill:#B8B0B6;opacity:.7}
.scene .glass{fill:rgba(255,255,255,.7);stroke:#8C6F80;stroke-width:2.5}.scene .liq{fill:#E8B04B}.scene .water{fill:#7CC4F2}
.scene .xx{fill:none;stroke:#D7263D;stroke-width:5;stroke-linecap:round}
.scene .boxw{fill:#D9A066;stroke:#A9713C;stroke-width:2}.scene .tape{stroke:#A9713C;stroke-width:2}
.scene .clockf{fill:#fff;stroke:#8C6F80;stroke-width:3}.scene .hand2{stroke:#3A2330;stroke-width:3;stroke-linecap:round}
.scene .cal{fill:#fff;stroke:#C9B8C2;stroke-width:2}.scene .calh{fill:#D63C74}
.scene .chk{fill:none;stroke:#1E8E3E;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.scene .warn-t{fill:#FF9500}
.scene .agec{fill:#FCE8EF;stroke:#D63C74;stroke-width:3}
.scene .sep{stroke:#C2356A;stroke-width:4}
.scene .meter{fill:#2C2230}.scene .dish{fill:#EAF6FB;stroke:#7FB8D8;stroke-width:3}.scene .cell{fill:#F7C9A6;stroke:#E7A985;stroke-width:2}
.scene .scar{fill:none;stroke:#8C1F3F;stroke-width:3;stroke-linecap:round}
.scene .book{fill:#7FB8D8;stroke:#4C88AA;stroke-width:2}.scene .coin{fill:#F2C14E;stroke:#C99A1E;stroke-width:2}
.scene .stitch{fill:none;stroke:#3A2330;stroke-width:3;stroke-linecap:round}
.scene .eye{fill:#fff;stroke:#8C6F80;stroke-width:3}.scene .iris{fill:#7FB8D8}.scene .pupil{fill:#2C2230}
.scene .monitor{fill:#2C2230}.scene .trace{fill:none;stroke:#34C759;stroke-width:2.5;stroke-dasharray:300;stroke-dashoffset:300}.scene .trace.r{stroke:#D63C74}
.scene .probe{fill:#B49AA8}.scene .usw{fill:none;stroke:#7FB8D8;stroke-width:3;stroke-linecap:round}
.scene .syr{fill:#fff;stroke:#8C6F80;stroke-width:2}.scene .syr-in{fill:#F2C14E}.scene .needle2{stroke:#8C6F80;stroke-width:2}
.scene .ivbag{fill:#EAF6FB;stroke:#7FB8D8;stroke-width:3}.scene .ivline{stroke:#7FB8D8;stroke-width:3}.scene .ivdrop{fill:#5AB0F0}
.scene .amb{fill:#fff;stroke:#D7263D;stroke-width:3}.scene .ambw{fill:#BFE3F5}.scene .cross{stroke:#D7263D;stroke-width:6}.scene .cross.r{stroke:#D7263D}
.scene .wheel{fill:#3A2330}.scene .bldg{fill:#F4EEF8;stroke:#8C6F80;stroke-width:3}.scene .win{fill:#BFE3F5}
.scene .calm{fill:#D9F2EC}.scene .calm2{fill:#9ADBC9}.scene .therm-b.r{fill:#D7263D}
.a-nudge{animation:nudge 1.6s ease-in-out infinite}
.a-flow{animation:flow 2.1s linear infinite}
.scene .a-swing{transform-box:fill-box;transform-origin:0% 100%;animation:swing 2.4s ease-in-out infinite}
.scene .a-spin{transform-box:fill-box;transform-origin:50% 100%;animation:spin 4s linear infinite}
.a-drip{animation:drip 1.8s ease-in infinite}
.a-drive{animation:drive 3s ease-in-out infinite}
.a-fill{transform-origin:bottom;animation:fillup 3s ease-in-out infinite}
.a-breathe2{transform-origin:center;animation:breathe2 10s ease-in-out infinite}
.a-draw2{animation:draw 3s linear infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes flow{from{transform:translateX(0);opacity:0}15%{opacity:1}85%{opacity:1}to{transform:translateX(62px);opacity:0}}
@keyframes swing{0%,100%{transform:rotate(0)}50%{transform:rotate(14deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drip{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(60px);opacity:0}}
@keyframes drive{0%,100%{transform:translateX(0)}50%{transform:translateX(70px)}}
@keyframes fillup{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@keyframes breathe2{0%,100%{transform:scale(.8)}40%{transform:scale(1.1)}}
.scene .cap1{fill:#D63C74}.scene .cap2{fill:#F7B6C8;stroke:#D63C74;stroke-width:1.5}

/* ward screen: hospitals near the mother */
.near-h h3{display:flex;align-items:center;gap:8px}
.near-h .list{margin-top:8px}
.row.nh{align-items:flex-start}
.row.nh .txt{min-width:0}
.nh-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.btn.sm{min-height:40px;padding:0 14px;font-size:14px;width:auto}
.tiny{font-size:12px;margin-top:8px}
.consultcard .pair{display:flex;gap:8px;flex-wrap:wrap}
.consultcard .pair .btn{flex:1 1 auto}
.call.callnow{border:1.5px solid var(--primary)}

/* lesson tiles: a preview of the text, real photos, in-depth material */
.node .txt .ex{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--on-surface-variant);font-size:13.5px;line-height:20px;margin-top:2px}
.node .nthumb{flex:0 0 auto}
img.nthumb{width:64px;height:64px;border-radius:var(--sh-md);object-fit:cover}
.node.deep{border:1.5px solid var(--primary);background:var(--primary-fixed, var(--surface-container-low))}
.node-fig{margin:0;display:flex;flex-direction:column;gap:6px}
.node-fig .node-img{width:100%;max-height:340px;object-fit:cover;border-radius:var(--sh-lg)}
.node-fig figcaption{font-size:12px;color:var(--on-surface-variant);line-height:16px}
.note.deepnote{font-size:13.5px;line-height:20px}
.body p + p{margin-top:12px}

/* knowledge tab: 2-column photo cards (Kanthida, 1 Nov) */
.kgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:720px){.kgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kcard{display:flex;flex-direction:column;text-align:left;width:100%;padding:0;border-radius:var(--sh-lg);overflow:hidden;background:var(--surface-container-lowest);border:1px solid var(--line);color:inherit;position:relative;box-shadow:var(--el1, none)}
.kcard .kpic{position:relative;display:block;aspect-ratio:4/3;background:var(--surface-container-high)}
.kcard .kpic{overflow:hidden}
.kcard .kpic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.kcard .kpic .okdot{position:absolute;top:8px;right:8px;background:var(--surface);border-radius:50%;padding:2px;color:var(--ok)}
.kcard .ktxt{display:flex;flex-direction:column;gap:4px;padding:10px 12px 14px;min-width:0}
.kcard .ktxt b{font-size:16px;line-height:23px}
.kcard .ktxt small{font-size:13px;line-height:19px;color:var(--on-surface-variant);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kcard.danger{border:1.5px solid var(--danger)}
.kcard.danger .ktxt b{color:var(--danger)}
.kcard::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity 120ms;pointer-events:none}
.kcard:active::after{opacity:.08}
/* subtopic cards: photo + title, preview, "read more" */
.node{flex-direction:column;align-items:stretch;gap:8px;padding:12px 14px;text-align:left;position:relative}
.node .nrow{display:flex;align-items:center;gap:12px;min-width:0}
.node .nrow b{font-size:17px;line-height:25px;min-width:0}
.node .ex{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--on-surface-variant);font-size:14.5px;line-height:22px}
.node .more{display:inline-flex;align-items:center;gap:2px;align-self:flex-end;color:var(--primary);font-weight:600;font-size:14px}
.node .more .i{width:18px;height:18px}
.node .nthumb,.node img.nthumb{width:72px;height:72px}

/* app update card */
.card.upd{display:flex;flex-direction:column;gap:12px}
.row-plain{display:flex;align-items:center;gap:12px}
.row-plain .txt{display:flex;flex-direction:column;min-width:0}

/* citations [1] in lesson text jump to the open reference list */
.cites{display:inline-flex;flex-wrap:wrap;gap:2px;vertical-align:baseline}
.cite{font-family:inherit;font-weight:600;font-size:13px;line-height:1;color:var(--on-primary-fixed);background:var(--primary-fixed);border:0;border-radius:6px;padding:4px 5px;min-width:28px;min-height:28px;cursor:pointer}
.refs li{scroll-margin:96px}
.refs li a{color:var(--primary);word-break:break-all}
.refs li.flash{animation:ref-flash 1.6s ease-out}
@keyframes ref-flash{0%,30%{background:var(--primary-fixed);color:var(--on-surface)}100%{background:transparent}}

/* sensitive real photos (blood, fluid): blurred until tapped */
.node-fig .imgbox{position:relative;overflow:hidden;border-radius:var(--sh-lg)}
.node-fig.sens .node-img{filter:blur(22px) saturate(.6);transform:scale(1.1)}
.nthumb.sens{filter:blur(6px) saturate(.6);clip-path:inset(0 round var(--sh-md))}
.sens-cover{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;padding:16px;border:0;
  background:rgba(26,10,18,.38);color:#fff;text-align:center;font:inherit;cursor:pointer}
.sens-cover .i{width:36px;height:36px}
.sens-cover b{font-size:17px}
.sens-cover small{font-size:13.5px;line-height:1.45;max-width:30ch}

/* Kanthida's full report text as the lesson body (lessons-full.js) */
.fulltext{display:grid;gap:14px;padding:20px 18px}
.fulltext .full-h{font-size:22px;line-height:30px;font-weight:700;color:var(--primary);margin:10px 0 0;text-wrap:balance}
.fulltext .full-h:first-child{margin-top:0}
.fulltext .full-s{font-size:18px;line-height:26px;font-weight:700;margin:8px 0 0;color:var(--on-surface);text-wrap:balance}
.fulltext .full-p{margin:0;font-size:16.5px;line-height:1.75;color:var(--on-surface)}
.fulltext .full-li{margin:0;padding-left:22px;display:grid;gap:8px;font-size:16.5px;line-height:1.65}
.fulltext .node-fig{margin:2px 0}
.fstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.fstat{background:var(--primary-fixed);color:var(--on-primary-fixed);border-radius:var(--sh-md);padding:12px;display:grid;gap:4px}
.fstat b{font-size:24px;line-height:30px}
.fstat small{font-size:13px;line-height:18px}
/* risk-screening photo cards (lessons-full.js 'risk' / 'tip') */
.fulltext .rgroup{margin:6px 0 -4px;font-size:15px;line-height:22px;font-weight:700;color:var(--primary)}
.rgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rcard{background:var(--surface-container-lowest);border:1px solid var(--outline-variant);border-radius:var(--sh-md);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.rcard .imgbox{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--outline-variant)}
.rcard .imgbox img{width:100%;height:100%;object-fit:cover;display:block}
.rcard .imgbox.sens img{filter:blur(18px) saturate(.6);transform:scale(1.15)}
.rcard .sens-cover{padding:8px;gap:4px}
.rcard .sens-cover .i{width:26px;height:26px}
.rcard .sens-cover b{font-size:13.5px;line-height:18px}
.rcard .rno{position:absolute;top:6px;left:6px;min-width:28px;height:28px;padding:0 6px;border-radius:999px;display:grid;place-items:center;
  background:var(--primary);color:var(--on-primary);font-size:14px;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.rcard p{margin:0;padding:10px 10px 12px;font-size:15px;line-height:1.5;color:var(--on-surface);overflow-wrap:anywhere}
.rtip{display:flex;gap:10px;align-items:flex-start;padding:14px;border-radius:var(--sh-md);background:var(--primary-container);color:var(--on-primary-container)}
.rtip .i{width:22px;height:22px;flex:none;margin-top:2px}
.rtip b{font-size:16px;line-height:1.55}

/* role screen (mother / nurse) */
.list.roles .row.role{min-height:84px}
.list.roles .row.role b{font-size:18px}

/* ---------- clean medical layer (Luis, 1 Nov 2026) ---------- */
.phead{display:flex;gap:14px;align-items:center;padding:4px 2px 2px}
.phead .txt{display:grid;gap:2px;min-width:0}
.phead .k{font-size:14px;font-weight:600;color:var(--primary)}
.phead h1{font-size:24px;line-height:1.3}
.phead p{font-size:15px;color:var(--on-surface-variant)}
.phead.plain h1{font-size:26px}
.card{box-shadow:none}
.card:not(.banner):not(.bleedcard):not(.warncard){border:1px solid var(--line)}
.brand-hero .mark{box-shadow:none}
.fab{background:var(--fab-grad);box-shadow:0 2px 6px rgba(var(--shadow-c),.25)}

/* ---------- 1.7.0: display & reading settings ---------- */
:root[data-density="compact"]{--g-main:14px;--g-sec:10px;--pad-card:16px;--row-py:12px;--row-px:16px;--row-h:56px;--opt-p:12px 16px}
/* warm theme: beige surfaces and brown ink for long reading */
:root[data-theme="warm"]{
  --surface:#FBF6EE; --surface-dim:#E8DCC8; --stage:#FFFBF5;
  --surface-container-lowest:#FFFDF8; --surface-container-low:#FFFDF8; --surface-container:#F4ECDF; --surface-container-high:#EFE5D5; --surface-container-highest:#E8DCC8;
  --on-surface:#3B2A1E; --on-surface-variant:#6A5442; --outline:#8C7663; --outline-variant:#DCCDB8; --line:rgba(59,42,30,.14);
  --secondary:#6B5440; --secondary-container:#F0E3D1; --on-secondary-container:#2E2216; --shadow-c:59,42,30;
}
/* high contrast: pure ink, firm outlines, no tinted text */
:root[data-contrast="high"]{
  --surface:#FFFFFF; --surface-container-lowest:#FFFFFF; --surface-container-low:#FFFFFF; --surface-container:#F2F2F2; --surface-container-high:#EBEBEB; --surface-container-highest:#E0E0E0;
  --on-surface:#000000; --on-surface-variant:#1F1F1F; --outline:#333333; --outline-variant:#595959; --line:rgba(0,0,0,.5);
  --primary:#A3004F; --on-primary:#FFFFFF; --primary-container:#FFE0EC; --on-primary-container:#3A0019;
  --secondary-container:#E1E8EF; --on-secondary-container:#000000; --danger:#9B1C10;
}
:root[data-contrast="high"][data-theme="dark"]{
  --surface:#000000; --surface-container-lowest:#0A0A0A; --surface-container-low:#0A0A0A; --surface-container:#141414; --surface-container-high:#1E1E1E; --surface-container-highest:#2A2A2A;
  --on-surface:#FFFFFF; --on-surface-variant:#F0F0F0; --outline:#D0D0D0; --outline-variant:#A0A0A0; --line:rgba(255,255,255,.55);
  --primary:#FFC2D8; --on-primary:#000000; --primary-container:#4A0026; --on-primary-container:#FFFFFF; --secondary-container:#1E2A36; --on-secondary-container:#FFFFFF;
}
:root[data-contrast="high"] .muted,:root[data-contrast="high"] small{opacity:1}
:root[data-contrast="high"] a{text-decoration:underline}
:root[data-contrast="high"] .card,:root[data-contrast="high"] .list,:root[data-contrast="high"] .seg{border-width:2px}
/* reading typefaces (fonts.css, bundled offline) */
:root[data-font="looped"]{--font:"Noto Sans Thai Looped",system-ui,-apple-system,Roboto,sans-serif}
:root[data-font="sarabun"]{--font:"Sarabun",system-ui,-apple-system,Roboto,sans-serif}
:root[data-font="atkinson"]{--font:"Atkinson Hyperlegible","Noto Sans Thai Looped",system-ui,sans-serif}
input,select,textarea{font-family:inherit}
/* five text sizes (m is the base) */
:root[data-text="s"]{zoom:.92}
:root[data-text="xxl"]{zoom:1.42}
:root[data-text="xxl"] .ci4{grid-template-columns:1fr 1fr}
:root[data-text="xxl"] .tools2,:root[data-text="xxl"] .quick,:root[data-text="xxl"] .two,:root[data-text="xxl"] .stats,:root[data-text="xxl"] .rgrid{grid-template-columns:1fr}
:root[data-text="xxl"] .navitem .lbl{font-size:10.5px}
:root[data-text="xxl"] .seg{flex-wrap:wrap}
.tk-s{font-size:12px}.tk-xxl{font-size:27px}
/* line and letter spacing */
:root[data-lh="w"] :is(p,li,small,dd,.txt b,.txt small,.full-p,.full-li,.body,.qt,label){line-height:1.75!important}
:root[data-lh="x"] :is(p,li,small,dd,.txt b,.txt small,.full-p,.full-li,.body,.qt,label){line-height:1.95!important}
:root[data-ls="w"] body{letter-spacing:.025em;word-spacing:.08em}

/* settings: display page */
.preview{gap:10px}
.preview .k{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--on-surface-variant)}
.preview .k svg.i{width:18px;height:18px}
.preview .btn{justify-self:start;pointer-events:none}
.row.pick{text-align:left}
.row.pick[aria-pressed="true"]{background:var(--secondary-container)}
.row.pick[aria-pressed="true"] .txt b{color:var(--on-secondary-container)}
.seg.wrap{flex-wrap:wrap;border-radius:var(--sh-lg)}
.seg.wrap button{flex:1 1 64px}
.flabel{font-size:14px;font-weight:600;color:var(--on-surface-variant)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* risk check */
.row.risk .thumb{width:52px;height:52px}
.row.risk .thumb.sens{filter:blur(6px) saturate(.6)}
.rnum{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;margin-right:4px;border-radius:999px;background:var(--primary-container);color:var(--on-primary-container);font-size:13.5px;font-weight:700;vertical-align:1px}
.row.risk .from{display:flex;align-items:center;gap:4px;color:var(--primary);font-weight:600}
.row.risk .from svg.i{width:16px;height:16px}
.sticky-act{position:sticky;bottom:calc(var(--sab) + 12px);z-index:5;display:grid}
.sticky-act .btn{box-shadow:0 4px 14px rgba(var(--shadow-c),.22)}
.banner.ok{background:var(--ok-container);color:var(--on-ok-container)}
.banner .txt{display:grid;gap:2px}

/* emergency info card */
.eccard{border:2px solid var(--danger);border-radius:var(--sh-lg);background:var(--surface-container-lowest);overflow:hidden}
.eccard header{display:flex;gap:14px;align-items:center;padding:16px 18px;background:var(--danger);color:#fff}
.eccard header .ic{background:rgba(255,255,255,.18);color:#fff;width:48px;height:48px}
.eccard header small{display:block;font-size:13.5px;font-weight:600;opacity:.92}
.eccard header b{display:block;font-size:22px;line-height:1.3}
.eccard header .num{font-size:15px;opacity:.95}
.eccard dl{margin:0;display:grid}
.ecl{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:12px;padding:12px 18px;border-top:1px solid var(--line)}
.ecl:first-child{border-top:0}
.ecl dt{font-size:14.5px;font-weight:600;color:var(--on-surface-variant)}
.ecl dd{margin:0;font-size:17px;overflow-wrap:anywhere}
.ecl.big dd{font-size:24px}
.ecl .blood{color:var(--danger)}
.eccard footer{display:flex;align-items:center;gap:8px;padding:12px 18px;background:var(--danger-container);color:var(--on-danger-container);font-weight:700}

/* questions for the visit */
.qcard h3{display:flex;align-items:center;gap:8px}
.qlist{display:grid;border:1px solid var(--line);border-radius:var(--sh-md);overflow:hidden}
.qrow{display:flex;align-items:center;gap:6px;padding:4px 4px 4px 2px;border-top:1px solid var(--line);min-height:56px}
.qrow:first-child{border-top:0}
.qtick{width:48px;height:48px;display:grid;place-items:center;flex:none}
.qtick .cb{margin:0}
.qrow .qt{flex:1;min-width:0;font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.qrow.done .qt{text-decoration:line-through;color:var(--on-surface-variant)}
.qadd{display:flex;gap:8px;align-items:stretch}
.qadd input{flex:1;min-width:0}
.qadd .btn{flex:none;width:auto;min-width:0;padding-inline:16px}
.qadd input{min-height:48px}