/* jyuhealth — styles (build contract: docs/02 §C tokens; visual ref: assets/mockup.html)
   Themes: light · dark · auto (follow-the-phone, OD-1 default).
   Type scale is in rem off a 106.25% root (=17px) so the OS "Larger Text"
   accessibility setting scales the whole UI (WCAG 1.4.4). */

:root{
  font-size:106.25%;     /* 1rem ≈ 17px; scales with the phone's text-size setting */
  --r:16px; --r-sm:12px;
  --tap:54px;            /* big tap targets for an elderly user (UI-6) */
}

/* ---- Light tokens (UI-2) — status/series colors darkened to meet WCAG AA ---- */
:root, [data-theme="light"]{
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f4f7fb; --line:#e6eaef;
  --text:#15171a; --text-dim:#586170; --field:#ffffff; --field-line:#cfd6df;
  --blue:#1A73E8; --blue-press:#1558b8; --shadow:0 6px 22px rgba(20,40,80,.10);
  --scrim:rgba(20,30,50,.45);
  --green:#1E7E34; --amber:#9A6700; --orange:#C2410C; --pink:#D92D47;
  --c-sugar:#1A6FE0; --c-hr:#00807A;
}
/* ---- Dark tokens (UI-2) ---- */
[data-theme="dark"]{
  --bg:#000000; --surface:#161719; --surface-2:#1f2123; --line:#2c2e31;
  --text:#ffffff; --text-dim:#9aa0a6; --field:#1f2123; --field-line:#3a3d41;
  --blue:#4C8DF5; --blue-press:#3a78db; --shadow:0 6px 22px rgba(0,0,0,.5);
  --scrim:rgba(0,0,0,.55);
  --green:#2EA043; --amber:#F0A030; --orange:#E8590C; --pink:#FF5C73;
  --c-sugar:#2D7FF9; --c-hr:#00B5AD;
}
/* ---- Auto: follow the phone (OD-1 default) ---- */
@media (prefers-color-scheme: dark){
  [data-theme="auto"]{
    --bg:#000000; --surface:#161719; --surface-2:#1f2123; --line:#2c2e31;
    --text:#ffffff; --text-dim:#9aa0a6; --field:#1f2123; --field-line:#3a3d41;
    --blue:#4C8DF5; --blue-press:#3a78db; --shadow:0 6px 22px rgba(0,0,0,.5);
    --scrim:rgba(0,0,0,.55);
    --green:#2EA043; --amber:#F0A030; --orange:#E8590C; --pink:#FF5C73;
    --c-sugar:#2D7FF9; --c-hr:#00B5AD;
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); font-size:1rem;
  display:flex; justify-content:center; align-items:flex-start;
}

/* ---- App frame (mobile-first, max 412px) UI-8 ---- */
.app{
  position:relative; width:100%; max-width:412px; min-height:100vh; min-height:100dvh;
  background:var(--bg); color:var(--text);
  display:flex; flex-direction:column; overflow:hidden;
}

/* ---- Screens ---- */
.screen{display:none; flex-direction:column; flex:1; min-height:0}
.screen.active{display:flex}
.scroll{overflow-y:auto; flex:1; -webkit-overflow-scrolling:touch;
  padding-bottom:calc(104px + env(safe-area-inset-bottom, 0px))}

/* ---- Header ---- */
.hdr{display:flex; align-items:center; gap:10px; padding:16px 16px 12px;
  position:sticky; top:0; background:var(--bg); z-index:5}
.hdr h1{font-size:1.18rem; font-weight:700; margin:0; flex:1; text-align:center}
.hdr h1:focus,.gate h2:focus{outline:none}
.icon-btn{width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
  background:transparent; color:var(--blue); font-size:1.3rem; display:grid; place-items:center}
.icon-btn:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.icon-btn.ghost{color:var(--text-dim)}

/* ---- Cards / list ---- */
.pad{padding:0 16px}
.section-title{font-size:1.4rem; font-weight:800; padding:6px 16px 10px}
.hint{color:var(--text-dim); font-size:0.78rem; padding:0 16px 14px; line-height:1.5}
.day-card{background:var(--surface); border-radius:var(--r); padding:16px;
  margin:0 16px 12px; display:flex; align-items:center; gap:14px; cursor:pointer;
  border:1px solid var(--line); text-align:left; width:calc(100% - 32px); color:inherit; font:inherit}
.day-card:active{background:var(--surface-2)}
.day-card:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.day-main{flex:1; min-width:0}
.day-top{display:flex; align-items:baseline; gap:8px}
.day-name{font-size:1.06rem; font-weight:700}
.day-sub{font-size:0.8rem; color:var(--text-dim); margin-top:3px}
.day-by{font-size:0.72rem; color:var(--text-dim); opacity:.85}
.vitals{text-align:right; font-variant-numeric:tabular-nums; line-height:1.35}
.v-bp{font-size:1rem; font-weight:700}
.v-row{font-size:0.8rem; color:var(--text-dim)}
.dot{width:18px; height:18px; border-radius:50%; flex:none}
.ver{text-align:center; color:var(--text-dim); font-size:0.7rem; padding:10px 16px 6px; opacity:.8; font-variant-numeric:tabular-nums}
.gate .ver{margin-top:16px}
.empty{padding:48px 28px; text-align:center; color:var(--text-dim); line-height:1.6}
.empty .big{font-size:2.3rem; display:block; margin-bottom:10px}

/* ---- Loading skeleton (shown while data loads / cold start) ---- */
.skel{margin:0 16px 12px; height:84px; border-radius:var(--r); border:1px solid var(--line);
  background:linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size:200% 100%; animation:shimmer 1.2s linear infinite}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---- Add bar: pinned to the viewport bottom so it's always reachable (FR-7) ---- */
.addbar{position:fixed; left:50%; transform:translateX(-50%);
  width:100%; max-width:412px; bottom:0; z-index:20;
  padding:12px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(to top, var(--bg) 72%, transparent)}
.btn{width:100%; height:var(--tap); border:none; border-radius:14px; cursor:pointer;
  background:var(--blue); color:#fff; font-size:1.06rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:8px}
.btn:active{background:var(--blue-press)}
.btn:disabled{opacity:.55; cursor:default}
.btn:focus-visible{outline:2px solid var(--text); outline-offset:2px}
.btn.secondary{background:transparent; color:var(--text-dim); height:48px; font-size:0.94rem; font-weight:600}
.btn.danger{background:transparent; color:var(--pink); height:48px; font-weight:700}

/* ---- Form ---- */
.field{padding:14px 16px 0}
.field label{display:block; font-size:0.8rem; font-weight:700; color:var(--text-dim); margin-bottom:7px; letter-spacing:.2px}
.control,select,input[type=date],input[type=time],input[type=text]{
  width:100%; height:var(--tap); border-radius:var(--r-sm);
  background:var(--field); color:var(--text); border:1.5px solid var(--field-line);
  font-size:1.06rem; padding:0 14px; outline:none; font-family:inherit}
input:focus,select:focus{border-color:var(--blue)}
.field.bad input,.field.bad select{border-color:var(--pink)}
.errmsg{display:none; color:var(--pink); font-size:0.78rem; margin-top:6px; line-height:1.4}
.field.bad .errmsg{display:block}
.errmsg.bad{display:block}
/* read-only / auto-calculated value (UI-7 AUTO readout — NOT a disabled field) */
.readout{width:100%; height:var(--tap); border-radius:var(--r-sm);
  background:rgba(76,141,245,.10); border:1.5px solid transparent;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:0 12px 0 14px; cursor:default}
.readout .rv{font-size:1.06rem; color:var(--text); font-variant-numeric:tabular-nums}
.readout .auto{font-size:0.62rem; font-weight:800; letter-spacing:.6px; color:var(--blue);
  background:rgba(76,141,245,.16); padding:4px 9px; border-radius:999px}
.row2{display:flex; gap:12px; padding:14px 16px 0}
.row2 .field{flex:1; padding-left:0; padding-right:0}
.calc-note{font-size:0.71rem; color:var(--text-dim); margin-top:6px}
.gradechip{display:inline-flex; align-items:center; gap:8px; margin:12px 16px 0;
  padding:9px 14px; border-radius:999px; font-size:0.85rem; font-weight:700;
  background:var(--surface-2); border:1px solid var(--line)}
.gradechip.warn{background:rgba(217,45,71,.12); border-color:var(--pink)}
.charcount{font-size:0.71rem; color:var(--text-dim); text-align:right; margin-top:6px}

/* ---- Passcode (SCR-GATE) ---- */
.gate{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 28px; text-align:center}
.gate .glyph{width:74px; height:74px; border-radius:22px; background:var(--blue); display:grid; place-items:center; font-size:2rem; margin-bottom:22px}
.gate h2{margin:0 0 6px; font-size:1.35rem}
.gate p{margin:0 0 28px; color:var(--text-dim); font-size:0.85rem; line-height:1.5}
.pin{display:flex; gap:12px; margin-bottom:14px}
.pin span{width:16px; height:16px; border-radius:50%; border:2px solid var(--field-line)}
.pin span.on{background:var(--blue); border-color:var(--blue)}
.pin.shake{animation:shake .35s}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.gate-msg{min-height:20px; color:var(--pink); font-size:0.82rem; margin-bottom:12px}
.keys{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; width:100%; max-width:300px}
.key{height:64px; border-radius:16px; border:1px solid var(--line); background:var(--surface);
  color:var(--text); font-size:1.4rem; font-weight:600; cursor:pointer}
.key:active{background:var(--surface-2)}
.key:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.key.blank{background:transparent; border:none; cursor:default}
.gate small{display:block; margin-top:22px; color:var(--text-dim); font-size:0.71rem; max-width:300px; line-height:1.5}

/* ---- Trends (SCR-TRENDS) ---- */
.segwrap{margin:4px 16px 18px; background:var(--surface-2); border-radius:12px; padding:5px; display:flex}
.seg{flex:1; text-align:center; padding:10px 0; border-radius:9px; font-size:0.88rem; font-weight:600;
  color:var(--text-dim); cursor:pointer; border:none; background:transparent; font-family:inherit}
.seg.on{background:var(--surface); color:var(--text); box-shadow:var(--shadow)}
.panrow{display:flex; align-items:center; gap:8px; margin:-6px 16px 14px}
.panbtn{width:44px; height:40px; flex:none; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); color:var(--blue); font-size:1.4rem; line-height:1; cursor:pointer; font-family:inherit}
.panbtn:active{background:var(--surface-2)}
.panbtn:disabled{color:var(--text-dim); opacity:.4; cursor:default}
.panlabel{flex:1; text-align:center; font-size:0.85rem; font-weight:700; color:var(--text);
  font-variant-numeric:tabular-nums}
#charts{position:relative; touch-action:pan-y}  /* horizontal swipes pan; vertical scrolls */
.metric{padding:6px 0 2px}
.metric + .metric{border-top:1px solid var(--line); margin-top:10px; padding-top:16px}
.chart-title{font-size:1.24rem; font-weight:800; padding:0 16px 3px}
.chart-range{font-size:0.78rem; color:var(--text-dim); padding:0 16px 10px; font-variant-numeric:tabular-nums}
.chart-wrap{padding:0 12px 4px}
.svgc{width:100%; height:auto; display:block; overflow:visible; cursor:pointer}
.svgc .grid{stroke:var(--line); stroke-width:1}
.svgc .refline{stroke:var(--text-dim); stroke-width:1; stroke-dasharray:3 3; opacity:.5}
.svgc .reflab{fill:var(--text-dim); font-size:9px; opacity:.7; text-anchor:start}
.svgc .ylab{fill:var(--text-dim); font-size:11px; text-anchor:end}
.svgc .xlab{fill:var(--text-dim); font-size:10.5px; text-anchor:middle}
.svgc circle.sel{stroke:var(--text); stroke-width:2}
.nodata{padding:24px 16px; color:var(--text-dim); font-size:0.82rem; text-align:center}
.charttip{position:absolute; z-index:30; pointer-events:none; background:var(--text); color:var(--bg);
  font-size:0.72rem; font-weight:600; line-height:1.35; padding:7px 10px; border-radius:9px;
  box-shadow:var(--shadow); white-space:nowrap; transform:translate(-50%,-120%)}
.charttip[hidden]{display:none}
/* per-metric summary strip (avg / min / max / n) */
.mini-stats{display:flex; gap:8px; padding:8px 16px 2px}
.mini-stat{flex:1; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:8px 6px; text-align:center}
.mini-stat b{display:block; font-size:1.06rem; font-weight:800; font-variant-numeric:tabular-nums}
.mini-stat span{font-size:0.66rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.4px}
.legend{display:flex; flex-wrap:wrap; gap:10px 16px; padding:12px 16px 2px; justify-content:center}
.legend div{display:flex; align-items:center; gap:7px; font-size:0.78rem; color:var(--text-dim)}
.legend .dot{width:13px; height:13px}
.stats{display:grid; grid-template-columns:1fr 1fr; gap:0 16px; padding:10px 16px 4px}
.stat{padding:12px 0; border-top:1px solid var(--line)}
.stat b{font-size:1.4rem; font-weight:800; display:block}
.stat span{font-size:0.78rem; color:var(--text-dim)}
/* flagged "readings to review" list */
.flagged-title{font-size:1.06rem; font-weight:800; padding:14px 16px 2px}
.flag-item{display:flex; align-items:center; gap:12px; width:calc(100% - 32px); margin:8px 16px 0;
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--pink);
  border-radius:12px; padding:12px 14px; text-align:left; color:inherit; font:inherit; cursor:pointer}
.flag-item:active{background:var(--surface-2)}
.flag-item:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.flag-when{font-size:0.8rem; color:var(--text-dim); flex:none; width:78px}
.flag-what{flex:1; font-size:0.9rem; font-weight:600}
.disclaim{font-size:0.7rem; color:var(--text-dim); padding:14px 16px 28px; line-height:1.5}

/* ---- Toast (with optional action button, e.g. Undo) ---- */
.toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
  display:flex; align-items:center; gap:14px;
  background:var(--text); color:var(--bg); padding:12px 18px; border-radius:999px;
  font-size:0.88rem; font-weight:600; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:60}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto}
.toast button{background:transparent; border:none; color:var(--bg); font:inherit; font-weight:800;
  text-decoration:underline; cursor:pointer; padding:0}

/* ---- Modal / confirm (delete, soft over-range) ---- */
.modal{position:fixed; inset:0; background:var(--scrim); display:none; align-items:center; justify-content:center; padding:24px; z-index:70}
.modal.show{display:flex}
.sheet{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px; max-width:340px; width:100%; text-align:center}
.sheet h3{margin:0 0 8px; font-size:1.12rem}
.sheet p{margin:0 0 20px; color:var(--text-dim); font-size:0.85rem; line-height:1.5; white-space:pre-line; text-align:left}
.sheet .btn{margin-bottom:8px}

/* ---- Install hint + offline / nudge banners ---- */
.banner{margin:0 16px 12px; padding:12px 14px; border-radius:12px; font-size:0.8rem; line-height:1.5;
  display:flex; gap:10px; align-items:flex-start}
.banner.install{background:var(--surface-2); border:1px solid var(--line); color:var(--text)}
.banner.offline{background:rgba(217,45,71,.12); border:1px solid var(--pink); color:var(--text)}
.banner.nudge{background:rgba(26,111,224,.10); border:1px solid var(--blue); color:var(--text)}
.banner .x{margin-left:auto; background:transparent; border:none; color:var(--text-dim); font-size:1.06rem; cursor:pointer; line-height:1}
.banner b{font-weight:700}

/* loading state on auth */
.loading{opacity:.6; pointer-events:none}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}  /* NFR-A2 */
}
@media(min-width:520px){
  .app{margin:22px 0; min-height:auto; height:880px; border-radius:34px;
    box-shadow:0 22px 70px rgba(0,0,0,.35); border:1px solid var(--line); overflow:hidden}
}