/* Dr. Gregory patient app — reskinned to the LIGHT-SAGE design system.
   Palette + glass/frost surfaces + Plus Jakarta Sans, matched to the landing page
   (FuturisticSiteForge/pilots/dr-gregory/light-sage.html). Structure is LOCKED
   (QUEUE_LOCK.md / GROWTH_LOCK.md) — only colors, type, spacing, surfaces change.
   Every class name is preserved so the locked HTML works unchanged. */
:root{
  /* 1 · ACCENT — ONE calm medical green (the trusted-doctor signal) */
  --brand:#047857; --brand-2:#10b981; --brand-3:#064e3b;   /* accent / accent-2 / accent-3 */
  /* 2 · NEUTRAL ramp — bright sage paper + warm near-black ink (never pure #fff/#000) */
  --bg:#ecf1e9; --ink:#1b2a1d; --mut:#58655a;
  --card:#ffffff; --soft:#e3ece1; --line:rgba(27,42,29,.12);
  --brand-ink:#ffffff;
  /* 3 · STATUS — semantic, tuned to sit on sage paper */
  --confirm:#047857; --tentative:#b45309; --cancel:#b91c1e;
  --confirm-bg:#d3f0e0; --tentative-bg:#fcecd3; --cancel-bg:#fde0db; --off-bg:rgba(27,42,29,.07);
  --assume-bg:#fff8e6; --assume-bd:#e0b400;
  /* 4 · SURFACE — frosted white panel + DARK hairline + SOFT shadow (trust on paper) */
  --surface:rgba(255,255,255,.72); --surface-brd:rgba(27,42,29,.12);
  --glass-blur:14px;
  --glass-shadow:0 1px 2px rgba(60,45,30,.05), 0 14px 36px rgba(60,45,30,.09);
  --glow:color-mix(in srgb, var(--brand) 26%, transparent);
  /* 5 · RADIUS + spacing (premium = whitespace) */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --radius:var(--r-md);
  /* 6 · TYPE — Plus Jakarta Sans (warm, modern); graceful fallback to system-ui */
  --font:"Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.6 var(--font);
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:880px;margin:0 auto;padding:0 18px}
.small{font-size:13px}
.muted{color:var(--mut)}

/* top bar — frosted, sticky, dark hairline */
.topbar{
  background:var(--surface);
  -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur));
  border-bottom:1px solid var(--surface-brd);
  position:sticky; top:0; z-index:5;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset;
}
.brand{font-weight:800;padding:14px 0;font-size:16px;letter-spacing:-.01em;display:flex;align-items:center;gap:9px;
  text-decoration:none;color:inherit;cursor:pointer}
.brand::before{content:"";width:9px;height:9px;border-radius:50%;
  background:linear-gradient(180deg,var(--brand-2),var(--brand));box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.brand-sub{color:var(--mut);font-weight:500;margin-left:6px;font-size:13px}

/* general note */
.note{background:var(--soft);border:1px solid var(--line);border-radius:var(--r-md);
  padding:13px 15px;margin:18px 0;font-size:14px}

/* validation assumption callout */
.assumption{background:var(--assume-bg);border:1px solid var(--assume-bd);border-left:6px solid var(--assume-bd);
  border-radius:var(--r-md);padding:13px 15px;margin:16px 0}
.assumption .a-label{font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:12px;color:#8a6b00;display:block;margin-bottom:4px}

main{padding:10px 0 48px}
h1{font-size:24px;margin:18px 0 4px;letter-spacing:-.02em}
h2{font-size:18px;margin:22px 0 8px;letter-spacing:-.01em}
h3{font-size:15px;margin:16px 0 6px}
p{margin:8px 0}

/* launcher cards */
.launch-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}
@media(max-width:600px){.launch-grid{grid-template-columns:1fr}}
.launch{display:flex;flex-direction:column;gap:5px;background:var(--surface);
  -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--surface-brd);border-radius:var(--r-lg);
  padding:16px;text-decoration:none;color:var(--ink);
  box-shadow:var(--glass-shadow);transition:transform .2s cubic-bezier(.22,1,.36,1),border-color .15s,box-shadow .2s}
.launch:hover{border-color:var(--brand);transform:translateY(-2px);
  box-shadow:0 18px 40px -10px var(--glow), var(--glass-shadow)}
.launch-no{font-size:12px;color:var(--mut);font-weight:700;letter-spacing:.04em}
.launch-title{font-weight:800;font-size:16px;letter-spacing:-.01em}
.launch-desc{font-size:13px;color:var(--mut)}

/* cards / panels — frosted glass on sage paper */
.card{background:var(--surface);
  -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--surface-brd);border-radius:var(--r-lg);
  padding:18px;margin:14px 0;box-shadow:var(--glass-shadow)}
.row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.kv{display:flex;gap:8px;align-items:baseline;margin:4px 0}
.kv .k{color:var(--mut);min-width:130px}

/* buttons — gradient gel + soft glow + top highlight (matches landing .btn-primary) */
.btn{display:inline-block;
  background:linear-gradient(180deg,var(--brand-2),var(--brand));color:var(--brand-ink);
  border:1px solid color-mix(in srgb,var(--brand) 50%,transparent);
  border-radius:var(--r-pill);padding:10px 18px;font-size:14px;font-weight:700;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  box-shadow:0 8px 22px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,.30);
  transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s,filter .2s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 16px 34px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,.36)}
.btn.ghost{background:transparent;color:var(--brand);border:1px solid var(--brand);
  box-shadow:none;padding:9px 16px}
.btn.ghost:hover{background:color-mix(in srgb,var(--brand) 10%,transparent);filter:none;transform:translateY(-1px)}
.btn.small{padding:7px 13px;font-size:13px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}

/* hospital tabs — pills */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 6px}
.tab{background:var(--surface);border:1px solid var(--surface-brd);border-radius:var(--r-pill);
  padding:8px 15px;cursor:pointer;font-size:14px;font-weight:600;color:var(--ink);
  -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur));
  transition:all .18s}
.tab:hover{border-color:var(--brand)}
.tab.active{background:linear-gradient(180deg,var(--brand-2),var(--brand));color:var(--brand-ink);
  border-color:transparent;box-shadow:0 8px 18px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,.30)}

/* schedule list */
.shift{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 2px;border-bottom:1px solid var(--line);transition:background .15s}
.shift:last-child{border-bottom:none}
.shift:hover{background:rgba(255,255,255,.35)}
.shift .when{font-weight:700;letter-spacing:-.01em}
.shift .where{color:var(--mut);font-size:13px}
.badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:var(--r-pill);
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.badge.confirmed{background:var(--confirm-bg);color:var(--confirm)}
.badge.tentative{background:var(--tentative-bg);color:var(--tentative)}
.badge.cancelled{background:var(--cancel-bg);color:var(--cancel)}
.disclaimer{font-style:italic;color:var(--mut);font-size:12px;margin-top:10px;line-height:1.5}

/* now-serving panel (legacy class) */
.now-serving{background:var(--surface);border:1px solid var(--surface-brd);border-radius:var(--r-lg);
  padding:16px;margin:14px 0;box-shadow:var(--glass-shadow)}
.big-no{font-size:36px;font-weight:800;color:var(--brand);line-height:1;letter-spacing:-.02em}

/* tables */
table{width:100%;border-collapse:collapse;margin:10px 0;font-size:14px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--mut);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em}

/* chart canvas */
.chart-box{position:relative;height:360px;margin:8px 0}
.toggle{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden;margin:6px 0}
.toggle button{background:var(--card);border:none;padding:8px 15px;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink)}
.toggle button.active{background:linear-gradient(180deg,var(--brand-2),var(--brand));color:var(--brand-ink)}

/* immunization */
.vax-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line)}
.vax-row:last-child{border-bottom:none}
.vax-age{min-width:74px;font-weight:700;color:var(--mut);font-size:13px}
.vax-name{flex:1}
.vax-state.done{color:var(--confirm);font-weight:700}
.vax-state.next{background:var(--tentative-bg);color:var(--tentative);font-size:12px;font-weight:700;padding:3px 10px;border-radius:var(--r-pill)}

/* ════════ PRINT PAGE (Buku KIA card — print.html) ════════ */
/* Structural layout only; all colors/spacing read the design-system vars so a
   design agent reskins via :root, not here. Locked structure = PRINT_LOCK.md. */
.print-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:20px}
.print-photo{width:90px;height:110px;background:var(--soft);border:1px solid var(--line);border-radius:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  color:var(--mut);font-size:12px}
.kia-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  border-bottom:2px solid var(--brand);padding-bottom:8px;margin-bottom:12px}
.kia-doc{font-size:18px;font-weight:800;color:var(--brand)}
.kia-identity{display:flex;gap:14px;align-items:flex-start}
.kia-id-text{flex:1}
.kia-name{font-size:18px;font-weight:700;margin-bottom:2px}
.kia-id-text .kv{margin:3px 0}
.kia-id-text .kv .k{min-width:120px}
#today-table{margin:4px 0}
.print-card h3{margin:14px 0 4px}
.kia-sign{margin-top:18px;align-items:flex-end;gap:16px}
.kia-stamp{text-align:center;width:300px}
.kia-sig-space{height:120px}                             /* room to actually sign + stamp */
.kia-stamp-line{border-top:1px solid var(--ink);padding-top:4px}
.kia-stamp-name{font-weight:700}
.nextdue-callout{border:2px dashed var(--tentative);border-radius:8px;padding:8px 10px;margin-top:8px;background:var(--tentative-bg)}

@media print{
  @page{size:A4;margin:6mm}
  /* keep the chart bands + green/amber verdicts in color (clinics that print B&W still
     read them: every verdict also carries a word + ✓, and today's point is larger). */
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  .topbar,.no-print{display:none !important}
  body{background:#fff}
  .wrap{max-width:100%}
  main{padding:0}
  .print-card{border:none;padding:0;box-shadow:none}
  .assumption,.note,.disclaimer{display:none !important}
  /* tighten the card so the whole thing fits one A4 (print-only; screen untouched) */
  .print-card h3{margin:7px 0 2px;font-size:14px}
  #today-table{font-size:13px}
  #today-table th,#today-table td{padding:2px 8px;line-height:1.18}
  .kia-id-text .kv{margin:2px 0}
  .chart-caption{margin:3px 0 0}
  .kia-sign{margin-top:8px}
}

/* ════════ QUEUE PAGE ════════ */
.today-card{background:var(--surface);
  -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--surface-brd);border-left:6px solid var(--brand);
  border-radius:var(--r-lg);padding:20px;margin:12px 0;box-shadow:var(--glass-shadow)}
.today-date{font-family:var(--font);font-size:27px;font-weight:800;text-align:center;
  letter-spacing:-.02em;padding:2px 0 14px;color:var(--ink)}
.today-hosp-panel{background:rgba(255,255,255,.55);border:1px solid var(--line);
  border-radius:var(--r-md);padding:13px 15px;margin:7px 0}
.thp-name{font-weight:800;color:var(--brand-3);font-size:16px;letter-spacing:-.01em}
.thp-blocks{margin-top:9px;display:flex;flex-direction:column;gap:7px}
.today-block{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;
  background:rgba(255,255,255,.5);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 13px}
.today-block.active{background:var(--confirm-bg);border-color:color-mix(in srgb,var(--confirm) 35%,transparent)}
.today-block .tb-time{font-weight:700}
.tb-now{color:var(--confirm);font-weight:800;font-size:13px;display:inline-flex;align-items:center;gap:5px}
.tb-now::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand-2);
  animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
.today-queue{margin-top:16px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  padding-top:14px;border-top:1px solid var(--line)}
.hosp-info-panel{background:rgba(255,255,255,.55);border:1px solid var(--line);
  border-radius:var(--r-md);padding:11px 15px;margin:0}
#hospital-info{min-height:68px;margin:7px 0 11px}
.hip-name{font-weight:800;color:var(--brand-3);font-size:15px;letter-spacing:-.01em}
.hip-addr{display:block;color:var(--mut);font-size:14px;margin-top:3px}
.big-no.flash{border-radius:var(--r-sm);animation:flash .6s ease}
@keyframes flash{from{background:var(--tentative-bg)}to{background:transparent}}

.hosp{font-style:italic;font-size:15px;color:var(--ink);opacity:.8;margin-top:2px}
.badge.off{background:var(--off-bg);color:var(--mut)}
.shift.is-off{opacity:.55}
.status-side{display:flex;align-items:center;gap:9px;justify-content:flex-end}
.info{position:relative;cursor:help;display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;flex-shrink:0;border-radius:50%;background:var(--tentative);color:#fff;border:none;
  font:800 12px/1 inherit;font-style:normal;vertical-align:middle;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.info .tip{display:none;position:absolute;right:0;top:140%;background:var(--ink);color:#fff;
  padding:9px 11px;border-radius:var(--r-sm);width:212px;font-size:12px;font-weight:500;font-style:normal;
  line-height:1.45;z-index:20;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.info .tip::after{content:"";position:absolute;bottom:100%;right:16px;border:5px solid transparent;border-bottom-color:var(--ink)}
.info:hover .tip,.info:focus .tip{display:block}
.ask-nurse{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tentative);background:var(--tentative-bg);border:1px solid color-mix(in srgb,var(--tentative) 35%,transparent);
  padding:4px 11px;border-radius:var(--r-pill);text-decoration:none;white-space:nowrap;vertical-align:middle;
  transition:all .15s}
.ask-nurse:hover{background:var(--tentative);color:#fff;border-color:transparent}

/* ════════ GROWTH PAGE ════════ */
.growth-child-card{padding:16px 18px}
.growth-child-card .tabs{margin:0 0 12px}
.child-identity{padding:2px 0 0}
.child-name{font-size:23px;font-weight:800;letter-spacing:-.02em}
.child-meta{font-size:14px;margin-top:3px}
.child-meta.muted{margin-top:1px;font-size:13px}

.today-measure{background:var(--surface);
  -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--surface-brd);border-left:6px solid var(--brand);
  border-radius:var(--r-lg);padding:16px 18px;margin:14px 0;box-shadow:var(--glass-shadow)}
.tm-head{margin-bottom:11px;font-size:14px}
.tm-pills{display:flex;gap:11px;flex-wrap:wrap}
.perc-pill{display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.55);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:9px 13px;min-width:98px}
.perc-pill.warn{background:var(--tentative-bg);border-color:color-mix(in srgb,var(--tentative) 35%,transparent)}
.pp-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
.pp-val{font-size:18px;font-weight:800;letter-spacing:-.01em}
.pp-perc{font-size:12px;color:var(--mut)}
.tm-verdict{margin-top:13px;font-size:15px;font-weight:700}
.tm-verdict.ok{color:var(--confirm)}
.tm-verdict.warn{color:var(--tentative)}
.tm-verdict .muted{font-weight:500;margin-left:4px}

.chart-caption{margin:8px 0 0}
#visit-table tr.latest-row{background:var(--confirm-bg)}
#visit-table tr.latest-row td:first-child{font-weight:800}

/* current-hospital badge (hospital-pin.js) — shared by /visit + /user_profile */
.hp-badge{display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:relative;
  background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:10px;padding:9px 14px;margin:10px 0;font-size:13.5px}
.hp-badge.hp-warn{border-left-color:var(--tentative,#e08a00);background:#fff7ec}
.hp-badge .hp-pin{font-size:16px;line-height:1}
.hp-badge .hp-main{font-weight:600}
.hp-badge .hp-main b{font-weight:800;color:var(--brand)}
.hp-badge .hp-sub{color:var(--mut);font-size:12px}
.hp-badge .hp-actions{margin-left:auto;display:flex;gap:6px}
.hp-btn{border:1px solid var(--brand);background:var(--brand);color:#fff;border-radius:8px;
  padding:5px 12px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.hp-btn.ghost{background:var(--card);color:var(--brand)}
.hp-btn:hover{filter:brightness(1.05)}
.hp-picker{flex-basis:100%;margin-top:8px;border-top:1px dashed var(--line);padding-top:10px}
.hp-picker-t{font-size:12.5px;color:var(--mut);margin-bottom:8px;font-weight:600}
.hp-picker-list{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.hp-pick{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:9px;
  padding:8px 14px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.hp-pick:hover{border-color:var(--brand);background:var(--soft)}