/* iOS system palette: neutral greys, one accent (blue), status colours only for BP category */
:root {
  --bg:#f2f2f7; --card:#fff; --fill:rgba(120,120,128,.12); --sep:rgba(60,60,67,.18);
  --label:#000; --label2:rgba(60,60,67,.6); --label3:rgba(60,60,67,.3);
  --accent:#007aff; --ok:#34c759; --warn:#ff9500; --high:#ff3b30;
  --ease:cubic-bezier(.32,.72,0,1);
}
@media (prefers-color-scheme:dark) {
  :root { --bg:#000; --card:#1c1c1e; --fill:rgba(120,120,128,.24); --sep:rgba(84,84,88,.6);
    --label:#fff; --label2:rgba(235,235,245,.6); --label3:rgba(235,235,245,.3);
    --accent:#0a84ff; --ok:#30d158; --warn:#ff9f0a; --high:#ff453a; }
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { color-scheme:light dark; }
body { margin:0; background:var(--bg); color:var(--label); -webkit-font-smoothing:antialiased;
  font:400 17px/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif; }
button, input, textarea { font:inherit; color:inherit; }
button { cursor:pointer; }

#app { max-width:560px; margin:0 auto; min-height:100dvh; padding:0 16px calc(48px + env(safe-area-inset-bottom)); }

/* navigation */
.nav { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; height:44px;
  margin:0 -16px; padding:env(safe-area-inset-top) 8px 0; box-sizing:content-box;
  background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.nav button { border:0; background:none; color:var(--accent); padding:8px; font-size:17px; min-width:44px; }
.nav .back { display:flex; align-items:center; gap:2px; padding-left:4px; }
.nav .back svg { width:12px; height:20px; }
.nav .plus svg { width:22px; height:22px; display:block; margin-left:auto; }
h1 { margin:4px 0 16px; font-size:34px; line-height:1.1; font-weight:700; letter-spacing:.01em; }

/* grouped lists */
.section-h { display:flex; justify-content:space-between; margin:28px 16px 7px; font-size:13px; text-transform:uppercase; letter-spacing:.02em; color:var(--label2); }
.group { background:var(--card); border-radius:12px; overflow:hidden; }
.row { display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:10px 16px; border:0; background:none; text-align:left; position:relative; }
.row + .row::before { content:""; position:absolute; top:0; left:16px; right:0; border-top:.5px solid var(--sep); }
button.row:active { background:var(--fill); }
.row .grow { flex:1; min-width:0; }
.row .title { font-weight:500; }
.row .sub { font-size:14px; color:var(--label2); margin-top:1px; }
.chev { width:8px; height:14px; color:var(--label3); flex:none; }
.avatar { flex:none; display:grid; place-items:center; border-radius:50%; background:var(--fill); color:var(--accent); overflow:hidden; }
.avatar svg { width:88%; height:88%; margin-top:10%; }
h1.with-avatar { display:flex; align-items:center; gap:12px; }
.empty { padding:28px 16px; text-align:center; color:var(--label2); }

/* readings */
.dot { flex:none; width:9px; height:9px; border-radius:50%; background:var(--label3); }
.dot.ok { background:var(--ok); } .dot.warn { background:var(--warn); } .dot.high { background:var(--high); }
.val { font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.val small { font-size:13px; font-weight:400; color:var(--label2); letter-spacing:0; }
.time { color:var(--label2); font-size:15px; font-variant-numeric:tabular-nums; min-width:68px; }
.note { font-size:13px; color:var(--label2); }

.hero { padding:20px 16px 16px; }
.hero .big { font-size:52px; font-weight:700; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.hero .big small { font-size:17px; font-weight:400; color:var(--label2); letter-spacing:0; margin-left:6px; }
.hero .meta { display:flex; align-items:center; gap:8px; margin-top:10px; color:var(--label2); font-size:15px; }
.chart { padding:14px 12px 8px; }
.chart svg { display:block; width:100%; height:auto; overflow:visible; }
.legend { display:flex; gap:14px; padding:0 4px 4px; font-size:12px; color:var(--label2); }
.legend i { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }

.btn { display:block; width:100%; height:50px; border:0; border-radius:14px; background:var(--accent); color:#fff; font-size:17px; font-weight:600; }
.btn:active { opacity:.8; }
.btn.plain { background:var(--card); color:var(--high); }
.btn.plain:active { background:var(--fill); }
.gap { height:12px; }

/* avatar picker */
.picker-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:16px; }
.picker .avatar { animation:pop .25s var(--ease); }
@keyframes pop { from { transform:scale(.85); opacity:.5; } }
.link { border:0; background:none; color:var(--accent); font-size:15px; padding:6px 10px; }

/* sheet */
dialog { width:100%; max-width:560px; margin:auto auto 0; padding:0; border:0; border-radius:20px 20px 0 0; background:var(--bg); color:var(--label);
  animation:up .35s var(--ease); max-height:92dvh; overflow:auto; }
dialog::backdrop { background:rgba(0,0,0,.4); animation:fade .3s; }
@media (min-width:600px) { dialog { margin:auto; border-radius:20px; } }
@keyframes up { from { transform:translateY(40px); opacity:0; } }
@keyframes fade { from { opacity:0; } }
.sheet { padding:0 16px calc(20px + env(safe-area-inset-bottom)); }
.sheet-h { display:flex; align-items:center; justify-content:space-between; height:56px; }
.sheet-h b { font-size:17px; font-weight:600; }
.sheet-h button { border:0; background:none; color:var(--accent); font-size:17px; padding:8px 4px; }
.sheet-h button[type=submit] { font-weight:600; }
.triple { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.triple label { display:block; text-align:center; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--label2); }
.triple input { width:100%; margin-top:6px; height:64px; border:0; border-radius:12px; background:var(--card); text-align:center; font-size:30px; font-weight:600; font-variant-numeric:tabular-nums; -moz-appearance:textfield; }
.triple input::-webkit-outer-spin-button, .triple input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.field { width:100%; height:48px; padding:0 16px; border:0; border-radius:12px; background:var(--card); font-size:17px; }
.field:focus, .triple input:focus { outline:2px solid var(--accent); outline-offset:-2px; }
.labeled { margin-top:16px; }
.labeled span { display:block; margin:0 16px 6px; font-size:13px; text-transform:uppercase; letter-spacing:.02em; color:var(--label2); }
.err { min-height:20px; margin:12px 4px 0; color:var(--high); font-size:14px; text-align:center; }
input[type=datetime-local] { -webkit-appearance:none; appearance:none; text-align:left; }

@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }