:root {
  --bg:#faf8f8; --surface:#fff; --border:#e6e0e0; --text:#1c1b1b; --muted:#5f5a5a;
  --accent:#b3261e; --accent-soft:#fdeceb;
  --z-normal:#2e7d32; --z-elevated:#f9a825; --z-s1:#ef6c00; --z-s2:#d32f2f; --z-crisis:#b71c1c;
  /* Tonal roles, matching lightColorScheme() in Theme.kt. Warm neutrals, not
     Material's baseline purple: red, blue, green, amber and orange all carry
     meaning in this app -- systolic, diastolic, and the five zones -- so the
     chrome stays out of the way and leaves colour to the data. The FAB pair
     keeps the primary container, being the one thing meant to stand out. */
  --surface-variant:#f1efec; --on-surface-variant:#4a4644;
  --secondary-container:#ddd8d3; --on-secondary-container:#1c1b1a;
  --primary-container:#f9dedc; --on-primary-container:#410e0b;
  --outline:#7d7975;
  --dia:#1565c0;
  --shadow:0 1px 2px rgba(28,27,27,.06), 0 8px 24px rgba(28,27,27,.07);
  --tab-h:0px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#141212; --surface:#1e1b1b; --border:#332e2e; --text:#eae0e0; --muted:#a99f9f;
    --accent:#f2b8b5; --accent-soft:#3b1a18;
    --z-normal:#81c784; --z-elevated:#ffd54f; --z-s1:#ffb74d; --z-s2:#ff8a65; --z-crisis:#ef9a9a;
    --dia:#90caf9;
    /* These were missing, so chips, tonal cards and the FABs kept their light
       fills -- near-black text on pale lavender over a black page. */
    --surface-variant:#262322; --on-surface-variant:#cdc7c3;
    --secondary-container:#37332f; --on-secondary-container:#efe9e4;
    --primary-container:#5c1d1a; --on-primary-container:#ffdad6;
    --outline:#948d88;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.45);
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
.wrap{max-width:720px;margin:0 auto;
  padding:18px 16px calc(var(--tab-h) + env(safe-area-inset-bottom) + 22px)}
.view[hidden]{display:none}
.hero{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.hero h1{font-size:1.28rem;margin:0;letter-spacing:-.01em;flex:1}
.sub{margin:2px 0 0;color:var(--muted);font-size:.85rem}
.icon-btn{background:none;border:0;font-size:1.3rem;line-height:1;color:var(--muted);
  cursor:pointer;padding:6px;border-radius:10px}
.icon-btn:hover{background:var(--border)}
h2{font-size:.74rem;margin:0;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:700}
.muted{color:var(--muted);font-size:.8rem}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:16px;box-shadow:var(--shadow);margin-bottom:16px}
.btn{font:inherit;font-weight:650;color:#fff;background:var(--accent);border:0;
  border-radius:12px;padding:12px 22px;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.5;cursor:not-allowed;filter:none}
.link{background:none;border:0;color:var(--accent);font:inherit;font-size:.86rem;
  cursor:pointer;padding:6px}
.actions{display:flex;align-items:center;gap:12px;margin-top:16px}

/* --- opt-in, device-local OCR evaluation log --------------------------- */
.audit-toggle{display:flex;align-items:flex-start;gap:9px;font-size:.9rem;font-weight:600}
.audit-toggle input{width:auto;margin-top:4px;accent-color:var(--accent)}
.audit-actions{flex-wrap:wrap;margin-top:8px}
.audit-actions .link[disabled]{opacity:.45;cursor:not-allowed}
.danger-link{color:var(--z-crisis)}
.audit-list{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.audit-entry{border:1px solid var(--border);border-radius:10px;overflow:hidden}
.audit-entry summary{display:flex;align-items:center;justify-content:space-between;gap:12px;
  cursor:pointer;padding:10px 12px;font-size:.78rem;color:var(--muted)}
.audit-entry summary b{color:var(--text);font-weight:650;text-align:right}
.audit-detail{display:grid;gap:5px;padding:0 12px 12px;font-size:.78rem;color:var(--muted)}
.audit-detail img{width:100%;max-height:230px;object-fit:contain;background:#000;border-radius:8px}
.audit-detail b{color:var(--text)}

/* --- risk card --------------------------------------------------------- */
.risk{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.risk .dot{width:12px;height:12px;border-radius:50%;flex:none}
.risk .txt{flex:1;min-width:180px}
.risk .lvl{font-weight:700}
.risk .det{color:var(--muted);font-size:.84rem;margin-top:2px}

/* --- chart ------------------------------------------------------------- */
.chart-wrap{position:relative}
#chart{width:100%;display:block;touch-action:pan-y}
.grid{stroke:var(--border);stroke-width:1}
.refline{stroke:var(--muted);stroke-width:1;stroke-dasharray:4 4;opacity:.55}
.axis{fill:var(--muted);font-size:12px}
.serie{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.readout{position:absolute;top:6px;left:6px;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;padding:8px 11px;font-size:.82rem;
  box-shadow:var(--shadow);pointer-events:none;line-height:1.45}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:.78rem;color:var(--muted)}
.legend i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:5px;
  vertical-align:middle}
.cursor{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}

/* --- history ----------------------------------------------------------- */
.list-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 2px 8px}
.list{display:flex;flex-direction:column;gap:8px}
.item{background:var(--surface);border:1px solid var(--border);border-radius:13px;
  padding:12px 14px;display:flex;align-items:center;gap:12px}
.item .zone{width:4px;align-self:stretch;border-radius:2px;flex:none}
.item .val{font-weight:700;font-variant-numeric:tabular-nums;min-width:86px}
.item .val small{font-weight:500;color:var(--muted);font-size:.72rem;margin-left:3px}
.item .meta{flex:1;min-width:0;color:var(--muted);font-size:.8rem}
.item .meta b{display:block;color:var(--text);font-weight:600;font-size:.84rem}
.item .del{color:var(--muted);font-size:1rem;flex:none}
.item .del:hover{color:var(--z-crisis)}
.empty{color:var(--muted);font-size:.88rem;text-align:center;padding:26px 8px}

/* --- entry ------------------------------------------------------------- */
.reading-preview{display:flex;align-items:baseline;gap:8px 18px;flex-wrap:wrap;
  justify-content:center;margin-bottom:18px}
.preview-measurement{display:inline-flex;align-items:baseline;white-space:nowrap}
.big{font-size:clamp(2.5rem,12.5vw,3rem);font-weight:800;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.slash{font-size:2rem;color:var(--muted);margin:0 2px}
.unit{color:var(--muted);font-size:.9rem;margin-left:6px}
.preview-pulse .big{font-size:clamp(2.2rem,10.5vw,2.5rem)}
.cat-badge{width:100%;text-align:center;font-size:.8rem;font-weight:700;margin-top:6px}
.slider-row{display:block;margin-bottom:18px}
.slider-label{display:flex;justify-content:space-between;font-size:.85rem;
  color:var(--muted);margin-bottom:4px}
.slider-label{align-items:center}
input[type=range]{width:100%;accent-color:var(--accent)}
.hemo{display:flex;gap:16px;justify-content:center;color:var(--muted);
  font-size:.8rem;margin:4px 0 16px}
.field{margin-bottom:14px}
.field label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;font:inherit;padding:10px 12px;
  border-radius:11px;border:1px solid var(--border);background:var(--bg);color:var(--text)}
.tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* --- tab bar ----------------------------------------------------------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;height:calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(12px);border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-around;z-index:5}
.tab{flex:1;background:none;border:0;color:var(--muted);font:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px}
.tab span{font-size:1.15rem;line-height:1}
.tab b{font-size:.68rem;font-weight:600}
.tab[aria-current="page"]{color:var(--accent)}
.tab.primary span{background:var(--accent);color:#fff;width:38px;height:38px;
  border-radius:50%;display:grid;place-items:center;font-size:1.4rem;font-weight:400}
.tab.primary{color:var(--accent)}

/* --- toast ------------------------------------------------------------- */
.toast{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 16px);
  background:var(--text);color:var(--bg);padding:11px 18px;border-radius:999px;
  font-size:.86rem;box-shadow:var(--shadow);z-index:30;max-width:88vw;text-align:center}
.toast[hidden]{display:none}
.foot{margin-top:22px;color:var(--muted);font-size:.74rem;text-align:center}

/* Scanning is the fastest way in, so it reads as an action rather than an
   emoji tucked beside Save. Full width above the preview: tap, correct, save. */
.scan-cta{width:100%;margin-bottom:14px;display:flex;align-items:center;
  justify-content:center;gap:8px}

/* ===========================================================================
   Material 3 surfaces, matching the Android app screen for screen.
   =========================================================================== */

/* --- top app bar: title plus the icon row from DashboardScreen ----------- */
.appbar{display:flex;align-items:flex-start;gap:8px;margin:6px 0 4px;flex-wrap:wrap}
.appbar h1{font-size:1.375rem;font-weight:500;margin:8px 0 4px;flex:1 0 100%;
  letter-spacing:0}
/* Actions stay on one line. A second row of icons reads
   as a second toolbar -- so the buttons shrink instead: 44px where there is
   room, down to 36px on a narrow cover screen. The height stays 44px either
   way, so the touch target only narrows, it does not shorten. */
.appbar-actions{display:flex;flex-wrap:nowrap;gap:2px;min-width:0;
  margin:0 -6px 4px auto}
.appbar-actions .icon-btn{flex:0 1 44px;width:44px;min-width:36px;height:44px;
  display:grid;place-items:center;
  border-radius:50%;color:var(--on-surface-variant);padding:0;position:relative}
.appbar-actions .icon-btn:hover{background:color-mix(in srgb,var(--text) 8%,transparent)}

/* --- install banner ------------------------------------------------------ */
.install-banner[hidden]{display:none}
.install-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--surface-variant);color:var(--on-surface-variant);
  border-radius:14px;padding:10px 8px 10px 14px;margin:2px 0 6px;
  font-size:.85rem;line-height:1.4}
.install-banner span{flex:1;min-width:150px}
.install-banner .btn{flex:none;padding:8px 16px;font-size:.85rem}
.install-banner .icon-btn{flex:none;width:32px;height:32px;font-size:1.2rem;
  display:grid;place-items:center;border-radius:50%}

/* --- filter chips (RangeChipRow) ---------------------------------------- */
.chips{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;overflow-x:auto;
  padding:8px 0;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{font:inherit;font-size:.875rem;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;
  height:32px;padding:0 16px;border-radius:8px;border:1px solid var(--outline);
  background:transparent;color:var(--text);display:inline-flex;align-items:center;gap:6px}
.chip[aria-pressed="true"]{background:var(--secondary-container);
  color:var(--on-secondary-container);border-color:transparent}
.chip[aria-pressed="true"] svg{width:18px;height:18px;margin-left:-4px}
.chip-spacer{flex:1 0 8px}

/* --- segmented button (ChartModeToggle) --------------------------------- */
.seg{display:flex;margin:0 0 8px;border-radius:20px;overflow:hidden;
  border:1px solid var(--outline);width:fit-content}
.seg button{font:inherit;font-size:.875rem;cursor:pointer;height:38px;padding:0 18px;
  border:0;background:transparent;color:var(--text);display:inline-flex;
  align-items:center;gap:6px}
.seg button + button{border-left:1px solid var(--outline)}
.seg button[aria-pressed="true"]{background:var(--secondary-container);
  color:var(--on-secondary-container)}
.seg button[aria-pressed="true"] svg{width:18px;height:18px;margin-left:-4px}

.divider{border:0;border-top:1px solid color-mix(in srgb,var(--text) 12%,transparent);
  margin:12px 0}

/* --- dashboard pinned top & scrolling lower section -------------------- */
.dashboard-pinned{position:sticky;top:0;z-index:10;background:var(--bg);
  margin:-18px -16px 0;padding:18px 16px 0}
.dashboard-pinned .divider{margin:12px 0 0}
#hero-title{cursor:pointer;user-select:none}
.dashboard-scroll{padding-top:12px}

@media (max-height:520px){
  .dashboard-pinned{position:static;margin:0;padding:0}
  .dashboard-scroll{padding-top:0}
}

/* --- tonal cards: Compose Card on surfaceVariant ------------------------ */
.card.tonal{background:var(--surface-variant);color:var(--text);border:0;
  border-radius:12px;box-shadow:none;padding:12px 16px}
.card.tonal .card-head{display:flex;align-items:center;justify-content:space-between;
  gap:8px}
.card.tonal h3{font-size:.875rem;font-weight:500;margin:0}
.card.tonal hr{border:0;border-top:1px solid color-mix(in srgb,var(--text) 12%,transparent);
  margin:8px 0}
.text-btn{font:inherit;font-size:.8125rem;font-weight:500;background:none;border:0;
  color:var(--accent);cursor:pointer;padding:6px 8px;border-radius:8px}
.text-btn:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}

/* --- insights rows: tone dot aligned to the text cap height ------------- */
.ins-row{display:flex;gap:10px;align-items:flex-start;margin:8px 0}
.ins-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:0 0 8px}
.ins-dot.POSITIVE{background:var(--z-normal)}
.ins-dot.WATCH{background:var(--z-elevated)}
.ins-dot.NEUTRAL{background:var(--muted)}
.ins-row span{font-size:.875rem}

/* --- reading rows: full-bleed, divided, like the LazyColumn ------------- */
.list{margin:0 -16px}
/* The trash layer the row slides off, matching SwipeToDismissBox's background:
   a delete icon inset 24px at each end, so whichever side the row came from is
   the one that shows. Tinted rather than filled until the swipe passes its
   threshold, at which point the icon goes full strength -- letting go is then
   a decision the user has already seen the consequence of. */
.swipe{position:relative;overflow:hidden}
.swipe-bg{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:space-between;padding:0 24px;background:var(--accent-soft);
  color:var(--z-crisis);opacity:.55}
.swipe-bg svg{display:block}
.swipe.armed .swipe-bg{opacity:1}
.swipe.armed .swipe-bg svg{transform:scale(1.12)}
.swipe-bg svg{transition:transform .12s}

/* pan-y hands the browser vertical scrolling and leaves horizontal movement to
   the swipe-to-delete handler. Without it touch-action is auto, the browser
   claims the gesture as a possible pan or pinch, and cancels the pointer as
   soon as its slop is exceeded -- so the swipe can never reach its threshold.
   Selection off for the same reason: the long-press opens the tag editor, and
   a native text selection would fight it. */
.row{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid color-mix(in srgb,var(--text) 12%,transparent);
  background:var(--surface);position:relative;cursor:pointer;
  touch-action:pan-y;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none}
.row-main{flex:1;min-width:0}
.row-time{font-size:.75rem;color:var(--muted)}
.row-bp{font-size:1rem;font-weight:600;margin:1px 0}
.row-hemo{font-size:.75rem;color:var(--muted)}
.row-notes{font-size:.75rem;color:var(--muted);font-style:italic;margin-top:4px}
.row-tags{font-size:.75rem;color:var(--accent);margin-top:4px}
.badge{border-radius:999px;color:#fff;font-size:.6875rem;font-weight:500;
  padding:2px 8px;white-space:nowrap}
.empty{text-align:center;color:var(--muted);font-size:.875rem;padding:32px}

/* --- floating action buttons -------------------------------------------- */
/* The FAB column floats over the dashboard, so the dashboard needs room to
   scroll its last row clear of it -- 84px of button plus its 16px offset. */
#view-dashboard{padding-bottom:88px}
.fabs[hidden]{display:none}
.fabs{position:fixed;right:16px;display:flex;align-items:center;gap:12px;
  bottom:calc(16px + env(safe-area-inset-bottom));z-index:20;
  transition:transform .18s ease}
/* --snack is the height a visible toast needs; the column steps up by it so a
   snackbar's action stays reachable, and settles back when the toast goes. */
.fabs{transform:translateY(calc(-1 * var(--snack, 0px)))}
.fab{border:0;cursor:pointer;display:grid;place-items:center;
  background:var(--primary-container);color:var(--on-primary-container);
  width:84px;height:84px;border-radius:24px;
  box-shadow:0 3px 5px rgba(0,0,0,.16),0 1px 18px rgba(0,0,0,.12)}
.fab svg{width:36px;height:36px}
/* .fab sets display:grid, which outranks the UA's [hidden] rule -- without
   this, hiding the scan button did nothing at all. */
.fab[hidden]{display:none}
.fab{position:relative}
.fab.small{width:60px;height:60px;border-radius:18px}
.fab.small svg{width:30px;height:30px}
.fab:hover{filter:brightness(1.04)}

/* Unreadable-scan banner on the entry screen. Tonal rather than alarming: the
   scan failed, but the screen it sits on is perfectly usable. */
.scan-err[hidden]{display:none}
.scan-err{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--accent-soft);color:var(--text);border-radius:14px;
  padding:12px 14px;margin-bottom:12px;font-size:.875rem;line-height:1.4}
.scan-err span{flex:1;min-width:140px}
.scan-err .btn{flex:none}

/* --- scan progress overlay (ProcessingOverlay) --------------------------- */
.scanning[hidden]{display:none}
.scanning{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:#000}
.scanning img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.scanning::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.6)}
.scan-card{position:relative;z-index:1;background:var(--surface);color:var(--text);
  border-radius:16px;padding:24px;width:min(320px,calc(100% - 64px));
  display:grid;gap:16px;justify-items:center;box-shadow:var(--shadow)}
.scan-bar{width:100%;height:4px;border-radius:2px;background:var(--border);overflow:hidden}
.scan-bar i{display:block;height:100%;width:0;border-radius:2px;background:var(--accent)}
.scan-card p{margin:0;font-size:.9rem;text-align:center}

/* The export glyph inline in the data note, pointing at the app bar's icon. */
.note-ico{display:inline-flex;vertical-align:-3px;margin-right:6px;opacity:.75}
.note-ico svg{display:block}

/* --- dropdown menus (export, language) ---------------------------------- */
.menu-wrap{position:relative}
.menu{position:absolute;right:0;top:44px;min-width:180px;z-index:30;
  background:var(--surface);border-radius:12px;padding:8px 0;
  box-shadow:0 2px 6px rgba(0,0,0,.18),0 8px 24px rgba(0,0,0,.16)}
.menu button{display:flex;align-items:center;gap:12px;width:100%;font:inherit;
  font-size:.875rem;text-align:left;background:none;border:0;color:var(--text);
  padding:12px 16px;cursor:pointer}
.menu button:hover{background:color-mix(in srgb,var(--text) 8%,transparent)}
.menu button svg{width:20px;height:20px;color:var(--accent)}

/* --- snackbar with an action -------------------------------------------- */
.toast{display:flex;align-items:center;gap:16px}
.toast-action{font:inherit;font-size:.875rem;font-weight:600;background:none;
  border:0;color:var(--accent-soft);cursor:pointer;padding:2px 4px}

/* --- help screen (HelpScreen.kt) ---------------------------------------- */
.help-list{display:flex;flex-direction:column;gap:8px}
.help-card{background:var(--surface-variant);border-radius:16px;overflow:hidden}
.help-head{display:flex;align-items:center;gap:12px;width:100%;font:inherit;
  font-size:1rem;font-weight:600;text-align:left;background:none;border:0;
  color:var(--text);cursor:pointer;padding:16px}
.help-ico{flex:none;width:24px;height:24px;display:grid;place-items:center;
  color:var(--accent)}
.help-title{flex:1;min-width:0}
.help-chev{flex:none;display:grid;place-items:center;color:var(--on-surface-variant);
  transition:transform .22s ease}
.help-card.open .help-chev{transform:rotate(180deg)}
/* 0fr to 1fr animates a height the content decides, with no measuring. */
.help-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
.help-card.open .help-body{grid-template-rows:1fr}
.help-body>div{overflow:hidden}
/* 52px = 16 padding + 24 icon + 12 gap, so the body lines up under the title. */
.help-body p{margin:0;padding:0 16px 16px 52px;font-size:.875rem;line-height:1.5;
  color:var(--on-surface-variant);white-space:pre-line}
@media (prefers-reduced-motion:reduce){.help-chev,.help-body{transition:none}}

/* --- modal bottom sheet (tag editing) ----------------------------------- */
/* --kb is the soft keyboard's height, measured from the visual viewport (see
   the tracker in app.js). The layout viewport does not shrink when a keyboard
   opens, so a sheet pinned to the bottom would sit behind it -- which put the
   passphrase field's own OK button out of reach. */
.sheet{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.32);
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:var(--kb, 0px)}
.sheet[hidden]{display:none}
.sheet-card{background:var(--surface);width:100%;max-width:720px;
  border-radius:28px 28px 0 0;padding:20px 16px calc(28px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:12px;
  /* What is left of the screen once the keyboard has taken its share. */
  max-height:calc(100vh - var(--kb, 0px) - 12px);overflow:auto}
.sheet-card h3{margin:0;font-size:1rem;font-weight:600}
/* Masked passphrase field with its reveal toggle sitting inside the box. */
.pass{display:flex;align-items:center;gap:4px;padding:0 4px 0 12px;
  border:1px solid var(--border);border-radius:11px;background:var(--bg)}
.pass input{flex:1;min-width:0;font:inherit;padding:11px 0;border:0;
  background:none;color:var(--text);letter-spacing:.04em}
.pass input:focus{outline:none}
.pass:focus-within{border-color:var(--outline)}
.pass .icon-btn{flex:none;color:var(--muted)}
.chips.wrap{flex-wrap:wrap;overflow:visible}

/* --- stepper: minus, slider, plus ---------------------------------------- */
.stepper{display:flex;align-items:center;gap:10px}
.stepper input[type=range]{flex:1;min-width:0}
.step{flex:0 0 60px;height:60px;border-radius:50%;border:1px solid var(--outline);
  background:transparent;color:var(--text);font:inherit;font-size:2rem;
  line-height:1;cursor:pointer;display:grid;place-items:center;
  -webkit-user-select:none;user-select:none;touch-action:none}
.step:hover{background:color-mix(in srgb,var(--text) 8%,transparent)}
.step:active{background:var(--secondary-container);color:var(--on-secondary-container)}

/* The readout doubles as an input, so a value far from the current one can be
   typed instead of dragged. Styled as text until focused. */
.val-input{width:4.5em;font:inherit;font-weight:650;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--text);background:transparent;
  border:1px solid transparent;border-radius:8px;padding:2px 6px}
.val-input:focus{border-color:var(--outline);background:var(--bg);outline:none}
.val-input::-webkit-outer-spin-button,
.val-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.val-input{-moz-appearance:textfield;appearance:textfield}

/* A thicker track and a larger thumb: the old one was hard to place. */
input[type=range]{height:36px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:26px;height:26px;border-radius:50%;background:var(--accent);
  border:2px solid var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.3)}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border:2px solid var(--surface);
  border-radius:50%;background:var(--accent)}

/* --- pinned save bar ------------------------------------------------------
   Fixed, not sticky: as the last child of the view a sticky element has no
   slack to stick within -- its containing block ends where it does -- so it
   would simply scroll away. --kb carries the soft keyboard height, measured
   from the visual viewport, which is what imePadding() does on Android. */
.action-bar{position:fixed;left:0;right:0;bottom:var(--kb, 0px);z-index:15;
  display:block;
  margin:0 auto;max-width:720px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--bg);
  border-top:1px solid color-mix(in srgb,var(--text) 12%,transparent)}
.action-bar[hidden]{display:none}
.action-buttons{display:flex;align-items:center;gap:12px}
.action-bar .btn{flex:1;padding:14px 22px;font-size:1rem}
.action-bar .link{flex:0 0 auto}
.ocr-confirm[hidden]{display:none}
.ocr-confirm{background:var(--surface-variant);border:1px solid var(--outline);
  border-radius:12px;padding:10px 12px;margin-bottom:10px;font-size:.88rem;line-height:1.35}
.ocr-confirm label{display:flex;align-items:center;gap:12px;cursor:pointer;min-height:24px}
.ocr-confirm span{flex:1}
.ocr-confirm input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--accent)}
#view-add{padding-bottom:72px}
#view-add.ocr-confirm-required{padding-bottom:140px}