/* ============================================================
   Primitives - the iOS component vocabulary (device-agnostic).
   Same classes look identical on phone / tablet / desktop;
   only the frame shells differ.
   ============================================================ */

/* ---- navigation bar (large + inline title) ---- */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--sep)}
.barrow{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 8px}
.barrow .navttl{flex:1;text-align:center;font-size:17px;font-weight:600;letter-spacing:-.02em}
.back,.navbtn{display:inline-flex;align-items:center;gap:3px;color:var(--tint);
  font-size:17px;min-height:44px;min-width:44px;padding:0 6px}
.navbtn{justify-content:flex-end;font-weight:400}
.navbtn.semi{font-weight:600}
.back{font-weight:400}
.ltitle{font-size:34px;font-weight:700;letter-spacing:-.03em;padding:4px var(--pad) 8px;text-wrap:balance}
.nav-sub{padding:0 var(--pad) 10px;color:var(--label2);font-size:15px}

/* ---- grouped background (iOS grouped-list look: gray canvas, white inset cards) ----
   Put on the scrolling screen/column that holds .grp/.inset lists so the white
   cards pop. Full-white reading surfaces (legislation reader, a running quiz) stay
   white and must NOT carry this class. */
.grouped-bg{background:var(--grouped)}

/* ---- grouped inset lists ---- */
.grp{padding:0 var(--pad);margin:18px 0}
.grp.tight{margin:10px 0}
.grphdr{font-size:13px;color:var(--label2);text-transform:uppercase;letter-spacing:.02em;
  padding:0 4px 7px;font-weight:500}
.grpfoot{font-size:13px;color:var(--label2);padding:7px 4px 0;line-height:1.4}
.inset{background:var(--bg);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-card)}
.grouped-bg .inset{background:var(--bg)}
.li{display:flex;align-items:center;gap:12px;min-height:var(--tap);padding:9px 14px;
  position:relative;width:100%;text-align:left;background:none;color:inherit}
.li + .li::before{content:"";position:absolute;top:0;left:54px;right:0;height:.5px;background:var(--sep)}
.li.np + .li.np::before{left:14px}
button.li:active,a.li:active{background:var(--fill)}
.li .tile{width:29px;height:29px;border-radius:var(--r-tile);display:grid;place-items:center;
  color:#fff;flex:none}
.li .tile svg{width:18px;height:18px;stroke-width:2}
.li .lt{flex:1;min-width:0}
.li .lt b{font-weight:400;font-size:17px;display:block;letter-spacing:-.01em}
.li .lt small{display:block;color:var(--label2);font-size:13px;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .val{color:var(--label2);font-size:16px;flex:none}
.li .chev{color:var(--label3);flex:none}
.li .chev svg{width:17px;height:17px;stroke-width:2.4}
.li.hi .lt b{color:var(--tint)}

/* icon tile colors */
.bg-green{background:var(--tint)}.bg-blue{background:var(--blue)}
.bg-amber{background:var(--amber)}.bg-red{background:var(--red)}
.bg-purple{background:var(--purple)}.bg-gray{background:#8e8e93}
.bg-ink{background:#3a3a3c}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:0 20px;border-radius:var(--r-btn);
  background:var(--tint);color:#fff;font-size:17px;font-weight:600;letter-spacing:-.01em;
  width:100%;transition:transform .08s var(--ease),filter .15s}
.btn:active{transform:scale(.96);filter:brightness(.94)}
.btn svg{width:20px;height:20px}
.btn.sec{background:var(--tint-l);color:var(--tint-d)}
.btn.gray{background:var(--fill);color:var(--label)}
.btn.red{background:var(--red)}
.btn.ghost{background:none;color:var(--tint)}
.btn.sm{min-height:38px;padding:0 14px;font-size:15px;width:auto;border-radius:10px}
.btn.tiny{min-height:32px;padding:0 12px;font-size:14px;width:auto;border-radius:9px}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn-row{display:flex;gap:10px}
.btn-row .btn{width:auto;flex:1}

/* ---- segmented control ---- */
.seg{display:flex;background:var(--fill);border-radius:9px;padding:2px;gap:2px}
.seg button{flex:1;min-height:32px;border-radius:7px;font-size:14px;font-weight:500;
  color:var(--label);transition:background .15s}
.seg button.on{background:var(--bg);box-shadow:0 1px 3px rgba(0,0,0,.12);font-weight:600}

/* ---- search bar ---- */
.searchbar{display:flex;align-items:center;gap:7px;background:var(--fill);border-radius:10px;
  padding:8px 10px;color:var(--label2);margin:6px var(--pad) 4px}
.searchbar svg{width:18px;height:18px;flex:none}
.searchbar input{flex:1;border:0;background:none;outline:none;font-size:17px;color:var(--label);
  letter-spacing:-.01em}
.searchbar input::placeholder{color:var(--label2)}

/* ---- pills / badges ---- */
.pill{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:12px;
  font-size:13px;font-weight:600;background:var(--fill);color:var(--label2);letter-spacing:-.01em}
.pill svg{width:13px;height:13px;stroke-width:2.4}
.pill.on{background:var(--tint-l);color:var(--tint-d)}
.pill.off{background:rgba(255,59,48,.12);color:var(--red)}
.pill.warn{background:rgba(255,149,0,.16);color:#b25f00}
.pill.info{background:rgba(0,122,255,.12);color:var(--blue)}
.pill.live{background:var(--red);color:#fff}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--red);color:#fff;
  font-size:12px;font-weight:700;display:inline-grid;place-items:center;font-variant-numeric:tabular-nums}

/* ---- avatars ---- */
.av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-size:15px;font-weight:600;flex:none;letter-spacing:.01em}
.av.sm{width:30px;height:30px;font-size:13px}
.av.lg{width:64px;height:64px;font-size:24px}
.av.blue{background:var(--blue)}.av.orange{background:var(--amber)}
.av.purple{background:var(--purple)}.av.green{background:var(--tint)}
.av.gray{background:#8e8e93}.av.red{background:var(--red)}

/* ---- read-aloud button ---- */
.listen{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:15px;
  background:var(--tint-l);color:var(--tint-d);font-size:13px;font-weight:600}
.listen svg{width:15px;height:15px}
.listen.on{background:var(--tint);color:#fff}

/* ---- forms ---- */
.field{display:block;margin:0 0 1px}
.field .lab{font-size:13px;color:var(--label2);padding:0 4px 5px;display:block}
.input,.field input,.field select,.field textarea{width:100%;background:var(--bg);
  border:.5px solid var(--sep);border-radius:var(--r-field);min-height:48px;padding:0 14px;
  font-size:17px;outline:none;transition:border-color .15s}
.field textarea{min-height:92px;padding:12px 14px;resize:none;line-height:1.4}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--tint)}
.field.err input{border-color:var(--red)}
.errmsg{color:var(--red);font-size:13px;padding:6px 4px 0;display:flex;gap:5px;align-items:center}
.errmsg svg{width:14px;height:14px}
.hint{color:var(--label2);font-size:13px;padding:6px 4px 0;line-height:1.4}
.formstack > * + *{margin-top:14px}

/* ---- PIN + code entry ---- */
.pinrow{display:flex;gap:10px;justify-content:center}
.pinrow input{width:54px;height:64px;text-align:center;font-size:28px;font-weight:600;
  border:.5px solid var(--sep);border-radius:13px;background:var(--bg);outline:none}
.pinrow input:focus{border-color:var(--tint);box-shadow:0 0 0 3px var(--tint-l)}
.codeinput{width:100%;text-align:center;font-family:var(--mono);font-size:24px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;min-height:62px;border:.5px solid var(--sep);
  border-radius:13px;background:var(--bg);outline:none;color:var(--label)}
.codeinput:focus{border-color:var(--tint)}
.codeinput::placeholder{color:var(--label3);letter-spacing:.12em}

/* ---- gated / locked card ---- */
.gated{margin:var(--pad);background:var(--bg);border-radius:18px;padding:28px 22px;text-align:center;
  box-shadow:var(--shadow-card);border:.5px solid var(--sep)}
.gated .lockwrap{width:64px;height:64px;border-radius:50%;background:var(--tint-l);
  display:grid;place-items:center;margin:0 auto 16px}
.gated .lockwrap svg{width:30px;height:30px;color:var(--tint-d);stroke-width:1.8}
.gated h3{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.gated p{color:var(--label2);font-size:15px;line-height:1.45;margin-bottom:20px}

/* ---- toast ---- */
.toast-host{position:absolute;left:0;right:0;bottom:96px;display:flex;flex-direction:column;
  align-items:center;gap:8px;pointer-events:none;z-index:60;padding:0 16px}
.toast{background:rgba(28,28,30,.92);color:#fff;border-radius:14px;padding:12px 18px;font-size:15px;
  font-weight:500;box-shadow:0 12px 30px rgba(0,0,0,.28);max-width:90%;text-align:center;
  display:flex;align-items:center;gap:9px;backdrop-filter:blur(10px)}
.toast svg{width:18px;height:18px;color:var(--tint);flex:none}
.toast.x-enter{animation:toastin .32s var(--ease)}
@keyframes toastin{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

/* ---- notice banners (pending / offline / info) ---- */
.notice{display:flex;gap:11px;align-items:flex-start;margin:var(--pad);padding:14px 16px;
  border-radius:14px;font-size:15px;line-height:1.4}
.notice svg{width:20px;height:20px;flex:none;margin-top:1px}
.notice b{font-weight:600;display:block;margin-bottom:2px}
.notice.warn{background:rgba(255,149,0,.12);color:#7a4a00}.notice.warn svg{color:var(--amber)}
.notice.info{background:rgba(0,122,255,.1);color:#0a4a99}.notice.info svg{color:var(--blue)}
.notice.ok{background:var(--tint-l);color:var(--tint-d)}.notice.ok svg{color:var(--tint)}
.notice.gray{background:var(--fill);color:var(--label2)}.notice.gray svg{color:var(--label2)}

/* ---- modal / sheet ---- */
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:70;display:flex;
  align-items:flex-end;justify-content:center;padding:0}
.sheet{background:var(--grouped);width:100%;max-height:92%;border-radius:16px 16px 0 0;
  display:flex;flex-direction:column;overflow:hidden;animation:sheetup .34s var(--ease)}
.sheet .shead{display:flex;align-items:center;justify-content:space-between;padding:14px var(--pad);
  background:var(--bg);border-bottom:.5px solid var(--sep)}
.sheet .shead h3{font-size:17px;font-weight:600}
.sheet .sbody{padding:var(--pad);overflow-y:auto}
@keyframes sheetup{from{transform:translateY(100%)}to{transform:none}}
/* centered dialog variant (desktop/tablet) */
.scrim.center{align-items:center;padding:24px}
.scrim.center .sheet{max-width:480px;border-radius:16px;animation:dialogin .26s var(--ease)}
@keyframes dialogin{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* ---- progress rows / stat tiles ---- */
.statrow{display:flex;gap:10px;padding:0 var(--pad)}
.stat{flex:1;background:var(--bg);border-radius:14px;padding:14px;box-shadow:var(--shadow-card)}
.stat .n{font-size:28px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat .k{font-size:13px;color:var(--label2);margin-top:2px}
.stat .n.tint{color:var(--tint)}
.bar{height:8px;border-radius:4px;background:var(--fill);overflow:hidden}
.bar > i{display:block;height:100%;background:var(--tint);border-radius:4px;transition:width .5s var(--ease)}