/* ═══════════════════════════════════════════════════════════════════════════
   Renewals Board — stylesheet.

   Design rules this file exists to enforce, all of them driven by who uses it:
   a business owner or an office assistant, often on a cheap Android phone, in
   a workshop, sometimes reading Arabic far more comfortably than English, and
   frequently not reading much of either.

   1. Status is never carried by colour alone. Every row states its condition
      three ways at once — a coloured stripe, a word, and a number of days —
      so it survives colour-blindness, a cracked screen and bright sunlight.
   2. The number of days is the biggest thing on the row. Not the document
      name, not the date. "9 days ago" is the fact that makes someone act.
   3. Tap targets are >= 48px everywhere, and the primary action is >= 56px.
   4. Nothing important is behind a hover. There is no hover on a phone.
   5. RTL is done with logical properties and [dir] rules, not a mirrored
      stylesheet, so Arabic is the same code path and cannot rot separately.
   ═══════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}

:root{
  --primary:#1B3A57;
  --accent:#E0912F;
  --sidebar:#12212F;

  --ink:#131A22;
  --body:#3A4753;
  --mute:#6F7D8A;
  --faint:#9AA6B2;
  --line:#E7E3DC;
  --line-2:#DFDAD1;
  --bg:#F6F4F0;
  --surface:#FFFFFF;
  --sunk:#F1EDE6;

  /* status — chosen for contrast against the warm ground AND against each
     other in greyscale: dark red, mid amber, light teal, pale grey. */
  --dead:#B3341F;      --dead-bg:#FCEAE6;   --dead-line:#F0C4BA;
  --now:#B4700D;       --now-bg:#FDF3E0;    --now-line:#EFD8AC;
  --soon:#1C6E8C;      --soon-bg:#E7F2F6;   --soon-line:#BFDCE7;
  --fine:#2E7D5B;      --fine-bg:#E8F2EC;   --fine-line:#C6E0D2;

  --ui:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ar:"IBM Plex Sans Arabic","Barlow",system-ui,sans-serif;
  --num:"Space Grotesk",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --r:14px;
  --shadow:0 2px 10px rgba(19,26,34,.07);
  --shadow-l:0 -6px 22px rgba(19,26,34,.09);
  --safe-b:env(safe-area-inset-bottom,0px);
}

body{
  font-family:var(--ui);background:var(--bg);color:var(--ink);
  line-height:1.5;-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
body[dir="rtl"]{font-family:var(--ar)}
.num{font-family:var(--num);font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.015em;line-height:1.2}

/* Focus must always be visible — an office assistant on a laptop tabs
   through this, and a focus ring removed for looks is an accessibility bug. */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── shell ────────────────────────────────────────────────────────────── */
/* The shell is exactly one viewport tall and only .scroll scrolls.
   This is load-bearing. With `min-height` and no bound, .scroll grows to its
   content, the BODY scrolls instead, and `position:sticky` on the bottom nav
   then floats it over the page — putting the primary button on the detail
   screen underneath the nav bar, where a thumb hits "Board" instead of
   "Mark as renewed". Found by driving it, not by reading it. */
#app{max-width:560px;margin:0 auto;height:100vh;height:100dvh;overflow:hidden;
  display:flex;flex-direction:column;background:var(--bg);position:relative}
@media (min-width:900px){
  #app{max-width:1120px;flex-direction:row;box-shadow:0 0 60px rgba(19,26,34,.07)}
}
.main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;height:100%}
.scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(96px + var(--safe-b))}
@media (min-width:900px){ .scroll{padding-bottom:104px} }

/* ── top bar ──────────────────────────────────────────────────────────── */
.top{display:flex;align-items:center;gap:10px;padding:12px 14px 10px;
  background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:30}
.top .ic{width:46px;height:46px;border-radius:12px;border:1.5px solid var(--line-2);
  display:grid;place-items:center;flex:none;background:var(--surface);color:var(--body)}
/* At 360-390px a title plus three controls has nowhere to go, and the
   business name is what tells the owner this is HIS board. Shrink the
   controls rather than truncating the name to four letters. */
@media (max-width:420px){
  .top{gap:7px;padding-inline:12px}
  .top .ic{width:42px;height:42px;border-radius:11px}
  .top .langtog{min-height:42px}
  .top .langtog b,.top .langtog i{padding:0 9px;font-size:12.5px}
}
.top .ic:active{background:var(--bg)}
.top .mid{flex:1;min-width:0}
.top .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute)}
.top h1{font-size:19px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[dir="rtl"] .top .ic svg{transform:scaleX(-1)}

.langtog{display:flex;border:1.5px solid var(--line-2);border-radius:10px;
  overflow:hidden;flex:none;min-height:46px;align-items:stretch}
.langtog b,.langtog i{padding:0 12px;font-size:13.5px;font-weight:700;
  font-style:normal;display:grid;place-items:center}
.langtog b{background:var(--primary);color:#fff}
.langtog i{color:var(--mute);font-weight:600}

/* ── the headline strip — the first thing anyone sees ─────────────────── */
/* Two states, and they look completely different on purpose. Money burning
   is loud. Nothing burning is quiet and green. A board that looks identical
   whether or not you are losing money teaches people to ignore it. */
.head{padding:16px 14px 4px}
.burn{background:var(--dead-bg);border:1.5px solid var(--dead-line);
  border-radius:var(--r);padding:16px 18px;display:flex;align-items:center;gap:14px}
.burn .ico{width:44px;height:44px;border-radius:12px;flex:none;display:grid;
  place-items:center;background:var(--dead);color:#fff}
.burn .txt{flex:1;min-width:0}
.burn .lbl{font-size:13px;font-weight:700;color:var(--dead);
  letter-spacing:.04em;text-transform:uppercase}
.burn .val{font-family:var(--num);font-size:30px;font-weight:700;
  letter-spacing:-.02em;color:var(--dead);line-height:1.1;margin-top:1px}
.burn .sub{font-size:13.5px;color:var(--body);margin-top:2px}

/* the middle state: something is overdue but no cash fine is attached to it */
.warnhead{background:var(--now-bg);border:1.5px solid var(--now-line);
  border-radius:var(--r);padding:16px 18px;display:flex;align-items:center;gap:14px}
.warnhead .ico{width:44px;height:44px;border-radius:12px;flex:none;display:grid;
  place-items:center;background:var(--now);color:#fff}
.warnhead .txt{flex:1;min-width:0}
.warnhead .lbl{font-size:17px;font-weight:700;color:var(--now);line-height:1.25}
.warnhead .sub{font-size:13.5px;color:var(--body);margin-top:3px}

.calm{background:var(--fine-bg);border:1.5px solid var(--fine-line);
  border-radius:var(--r);padding:16px 18px;display:flex;align-items:center;gap:14px}
.calm .ico{width:44px;height:44px;border-radius:12px;flex:none;display:grid;
  place-items:center;background:var(--fine);color:#fff}
.calm b{display:block;font-size:16.5px;color:var(--fine)}
.calm span{font-size:13.5px;color:var(--body)}

/* ── filter chips, doubling as the count summary ──────────────────────── */
.chips{display:flex;gap:8px;padding:14px 14px 10px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 15px;
  border-radius:99px;font-size:15px;font-weight:600;white-space:nowrap;
  background:var(--surface);color:var(--body);border:1.5px solid var(--line-2);flex:none}
.chip .n{font-family:var(--num);font-weight:700;font-size:14px;
  min-width:22px;height:22px;padding:0 6px;border-radius:99px;
  display:grid;place-items:center;background:var(--sunk);color:var(--body)}
.chip.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.chip.on .n{background:rgba(255,255,255,.22);color:#fff}
.chip.dead{border-color:var(--dead-line);color:var(--dead)}
.chip.dead .n{background:var(--dead);color:#fff}
.chip.dead.on{background:var(--dead);color:#fff;border-color:var(--dead)}
.chip.dead.on .n{background:rgba(255,255,255,.25)}
.chip.now{border-color:var(--now-line);color:var(--now)}
.chip.now .n{background:var(--now);color:#fff}
.chip.now.on{background:var(--now);color:#fff;border-color:var(--now)}
.chip.now.on .n{background:rgba(255,255,255,.25)}

/* ── search ───────────────────────────────────────────────────────────── */
.searchbar{padding:0 14px 12px;position:relative}
.searchbar input{width:100%;min-height:50px;padding:12px 44px 12px 44px;
  border-radius:12px;border:1.5px solid var(--line-2);background:var(--surface);font-size:16px}
.searchbar .si{position:absolute;inset-inline-start:26px;top:13px;color:var(--faint);
  pointer-events:none}
.searchbar .sx{position:absolute;inset-inline-end:22px;top:7px;width:38px;height:38px;
  border-radius:10px;display:grid;place-items:center;color:var(--mute)}
.searchbar input:focus{outline:0;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(27,58,87,.12)}

/* ═══ THE ROW — the heart of the whole product ═══════════════════════════
   Left: a 6px severity stripe, full height, unmissable.
   Middle: who it is about (big) then what the document is (small).
   Right: days, as the largest type on the row, with the word under it.     */
.rows{padding:0 14px}
.row{display:flex;align-items:stretch;gap:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;
  overflow:hidden;width:100%;text-align:start;transition:transform .12s var(--ease)}
.row:active{transform:scale(.99)}
.row .stripe{width:6px;flex:none;background:var(--faint)}
.row.s-expired  .stripe{background:var(--dead)}
.row.s-critical .stripe{background:var(--now)}
.row.s-soon     .stripe{background:var(--soon)}
.row.s-ok       .stripe{background:var(--fine)}
.row .ico{width:44px;flex:none;display:grid;place-items:center;color:var(--mute)}
.row.s-expired .ico{color:var(--dead)}
.row.s-critical .ico{color:var(--now)}
/* the children are <span> so the whole row can be one <button> (a button
   may not contain block-level elements), which means display:block here is
   load-bearing, not cosmetic — without it the name and the document type
   render on the same line, overlapping the day count. */
.row .body{flex:1;min-width:0;padding:14px 6px 13px 0;display:flex;
  flex-direction:column;justify-content:center}
[dir="rtl"] .row .body{padding:14px 0 13px 6px}
.row .t{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.row .s{display:block;font-size:13.5px;color:var(--mute);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}
.row .tags{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.row .right{flex:none;padding:12px 14px;display:flex;flex-direction:column;
  align-items:flex-end;justify-content:center;text-align:end;min-width:92px}
.row .right>span{display:block}
[dir="rtl"] .row .right{align-items:flex-start;text-align:start}
.row .d{font-family:var(--num);font-size:23px;font-weight:700;line-height:1;
  letter-spacing:-.02em;color:var(--ink)}
.row.s-expired  .d{color:var(--dead)}
.row.s-critical .d{color:var(--now)}
.row .w{font-size:12px;font-weight:600;color:var(--mute);margin-top:4px;
  text-transform:uppercase;letter-spacing:.05em}
.row .dt{font-size:12.5px;color:var(--faint);margin-top:3px;font-family:var(--num)}

/* small tags on a row: the live money, and the chain warning */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;
  padding:3px 8px;border-radius:7px;line-height:1.35}
.tag.money{background:var(--dead-bg);color:var(--dead)}
.tag.risk{background:var(--now-bg);color:var(--now)}
.tag.block{background:var(--sunk);color:var(--body)}
.tag.mute{background:var(--sunk);color:var(--mute)}
.tag svg{flex:none}

/* ── section headings inside the list ─────────────────────────────────── */
.sect{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);margin:20px 4px 10px;display:flex;align-items:center;gap:9px}
.sect::after{content:"";flex:1;height:1px;background:var(--line)}

/* ── generic bits ─────────────────────────────────────────────────────── */
.pad{padding:16px 14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;margin-bottom:10px}
.muted{color:var(--mute);font-size:14px}
.empty{text-align:center;color:var(--mute);padding:52px 28px;font-size:15.5px;line-height:1.6}
.empty .big{font-size:19px;font-weight:700;color:var(--ink);margin-bottom:8px}
.empty svg{color:var(--faint);margin-bottom:14px}

.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  min-height:56px;border-radius:var(--r);font-size:17px;font-weight:700;
  letter-spacing:-.01em;background:var(--primary);color:#fff;
  transition:transform .14s var(--ease),opacity .2s}
.btn:active{transform:scale(.985)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line-2)}
.btn.amber{background:var(--accent);color:#1B1206}
.btn.good{background:var(--fine);color:#fff}
.btn.danger{background:var(--dead-bg);color:var(--dead);border:1.5px solid var(--dead-line)}
.btn.sm{min-height:46px;font-size:15px;border-radius:11px;width:auto;padding:0 16px}
.btnrow{display:flex;gap:8px}
.btnrow .btn{flex:1}

/* the add button — always reachable with a thumb, never covers the last row */
.fab{position:fixed;inset-inline-end:max(16px,calc(50vw - 264px));
  bottom:calc(78px + var(--safe-b));z-index:40;
  min-height:58px;padding:0 22px;border-radius:99px;background:var(--primary);
  color:#fff;font-size:17px;font-weight:700;display:flex;align-items:center;gap:9px;
  box-shadow:0 6px 20px rgba(19,26,34,.24)}
.fab:active{transform:scale(.97)}
@media (min-width:900px){ .fab{bottom:28px;inset-inline-end:32px} }

/* ── bottom nav (phone only) ──────────────────────────────────────────── */
.nav{flex:none;z-index:35;display:flex;background:var(--surface);
  border-top:1px solid var(--line);padding-bottom:var(--safe-b)}
.nav button{flex:1;min-height:64px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;color:var(--mute);font-size:11.5px;
  font-weight:700;letter-spacing:.02em}
.nav button.on{color:var(--primary)}
.nav button.on svg{stroke-width:2.2}
@media (min-width:900px){ .nav{display:none} }

/* ── sidebar (desktop only) ───────────────────────────────────────────── */
.side{display:none}
@media (min-width:900px){
  .side{display:flex;flex-direction:column;width:264px;flex:none;
    background:var(--sidebar);color:#fff;padding:20px 14px;
    height:100%;overflow-y:auto}
  .side .brand{display:flex;gap:11px;align-items:center;padding:4px 8px 20px}
  .side .mk{width:44px;height:44px;border-radius:12px;flex:none;display:grid;
    place-items:center;background:rgba(255,255,255,.12);font-weight:800;font-size:15px;
    overflow:hidden}
  .side .mk img{width:100%;height:100%;object-fit:contain}
  .side .brand b{display:block;font-size:15px;line-height:1.25}
  .side .brand span{font-size:12.5px;color:rgba(255,255,255,.6)}
  .side nav{display:flex;flex-direction:column;gap:3px;flex:1}
  .side nav button{display:flex;align-items:center;gap:12px;min-height:48px;
    padding:0 14px;border-radius:11px;color:rgba(255,255,255,.72);
    font-size:15px;font-weight:600;text-align:start}
  .side nav button:hover{background:rgba(255,255,255,.07);color:#fff}
  .side nav button.on{background:rgba(255,255,255,.14);color:#fff;font-weight:700}
  .side nav button .badge{margin-inline-start:auto;font-family:var(--num);font-size:12px;
    font-weight:700;min-width:22px;height:22px;padding:0 6px;border-radius:99px;
    display:grid;place-items:center;background:var(--dead);color:#fff}
  .side .foot{font-size:12.5px;color:rgba(255,255,255,.5);padding:12px 12px 0;
    border-top:1px solid rgba(255,255,255,.12)}
}

/* ── fields ───────────────────────────────────────────────────────────── */
.f{margin-bottom:15px}
.f label{display:block;font-size:14.5px;font-weight:700;color:var(--body);margin-bottom:7px}
.f label span{font-weight:400;color:var(--faint)}
.f input,.f select,.f textarea{
  width:100%;min-height:54px;padding:14px;border-radius:12px;
  border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:16px}
.f textarea{min-height:92px;resize:vertical;line-height:1.5}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(27,58,87,.12)}
.f input.bad,.f select.bad{border-color:var(--dead);box-shadow:0 0 0 3px rgba(179,52,31,.12)}
.f .hint{font-size:13px;color:var(--mute);margin-top:6px}
.f .err{font-size:13.5px;color:var(--dead);font-weight:600;margin-top:6px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* a date input must never be narrower than its own text on iOS */
.f input[type="date"]{min-height:54px;-webkit-appearance:none;appearance:none}

.sw{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 0;border-bottom:1px solid var(--line)}
.sw:last-child{border-bottom:0}
.sw .lbl{font-size:15.5px;font-weight:700}
.sw .sub{font-size:13px;color:var(--mute);font-weight:400;margin-top:3px}
.toggle{width:54px;height:32px;border-radius:99px;background:var(--line-2);
  position:relative;flex:none;transition:background .2s}
.toggle::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:26px;height:26px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .2s var(--ease)}
.toggle.on{background:var(--fine)}
.toggle.on::after{transform:translateX(22px)}
[dir="rtl"] .toggle.on::after{transform:translateX(-22px)}

/* pick-one grids — used for "what is it" and "who is it for" */
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pick{display:flex;align-items:center;gap:10px;min-height:60px;padding:10px 12px;
  border-radius:12px;border:1.5px solid var(--line-2);background:var(--surface);
  text-align:start;font-size:15px;font-weight:600;line-height:1.25}
.pick svg{flex:none;color:var(--mute)}
.pick.on{border-color:var(--primary);background:#F2F6FA;color:var(--primary)}
.pick.on svg{color:var(--primary)}
.pick .sub{display:block;font-size:12.5px;color:var(--mute);font-weight:400;margin-top:2px}

/* ── the chain panel ──────────────────────────────────────────────────── */
.chain{border-radius:var(--r);padding:15px 16px;margin-bottom:10px}
.chain.warn{background:var(--now-bg);border:1.5px solid var(--now-line)}
.chain.ok{background:var(--fine-bg);border:1.5px solid var(--fine-line)}
.chain .h{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;
  color:var(--now)}
.chain.ok .h{color:var(--fine)}
.chain p{margin:8px 0 0;font-size:14.5px;color:var(--body);line-height:1.55}
.chainlist{display:flex;flex-direction:column;gap:7px;margin-top:11px}
.chainlink{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  font-size:14.5px;font-weight:600;width:100%;text-align:start}
.chainlink .when{margin-inline-start:auto;font-family:var(--num);font-size:13px;
  font-weight:700;color:var(--mute);flex:none}
.chainlink.dead .when{color:var(--dead)}

/* ── detail ───────────────────────────────────────────────────────────── */
.hero{background:var(--surface);border-bottom:1px solid var(--line);padding:20px 16px 18px}
.hero .badge{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:8px;margin-bottom:12px}
.hero.s-expired  .badge{background:var(--dead-bg);color:var(--dead)}
.hero.s-critical .badge{background:var(--now-bg);color:var(--now)}
.hero.s-soon     .badge{background:var(--soon-bg);color:var(--soon)}
.hero.s-ok       .badge{background:var(--fine-bg);color:var(--fine)}
.hero h2{font-size:25px;letter-spacing:-.025em;line-height:1.15}
.hero .kind{font-size:15px;color:var(--mute);margin-top:4px}
.hero .when{display:flex;align-items:baseline;gap:10px;margin-top:14px;flex-wrap:wrap}
.hero .when .big{font-family:var(--num);font-size:34px;font-weight:700;
  letter-spacing:-.025em;line-height:1}
.hero.s-expired .when .big{color:var(--dead)}
.hero.s-critical .when .big{color:var(--now)}
.hero .when .date{font-size:15px;color:var(--body);font-family:var(--num)}

.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:10px}
.fact{background:var(--surface);padding:13px 14px;min-width:0}
.fact .k{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mute)}
.fact .v{font-size:16px;font-weight:600;margin-top:3px;word-break:break-word}
.fact .v.num{font-family:var(--num)}

.moneybox{background:var(--dead-bg);border:1.5px solid var(--dead-line);
  border-radius:var(--r);padding:15px 16px;margin-bottom:10px}
.moneybox .k{font-size:12.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dead)}
.moneybox .v{font-family:var(--num);font-size:27px;font-weight:700;color:var(--dead);
  line-height:1.15;margin-top:2px}
.moneybox p{margin:8px 0 0;font-size:14px;color:var(--body);line-height:1.55}
/* NOT called .calm — that is the green "all clear" headline component, and
   reusing the name here silently inherited its display:flex, laying the label,
   the amount and the note out on one squashed line. */
.moneybox.quiet{background:var(--sunk);border-color:var(--line-2)}
.moneybox.quiet .k{color:var(--body)}
.moneybox.quiet .v{color:var(--ink);font-size:20px}

.hist{display:flex;flex-direction:column;gap:0}
.hist .h{display:flex;align-items:center;gap:12px;padding:13px 2px;
  border-bottom:1px solid var(--line);font-size:14.5px}
.hist .h:last-child{border-bottom:0}
.hist .dot{width:9px;height:9px;border-radius:50%;background:var(--line-2);flex:none}
.hist .h .r{margin-inline-start:auto;font-family:var(--num);color:var(--mute);font-size:13.5px}

/* ── summary screen ───────────────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
@media (min-width:700px){ .tiles{grid-template-columns:repeat(4,1fr)} }
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 15px}
.tile .k{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mute);line-height:1.3}
.tile .v{font-family:var(--num);font-size:26px;font-weight:700;letter-spacing:-.02em;
  margin-top:5px;line-height:1}
.tile .v .cu{font-size:14px;font-weight:600;color:var(--mute);margin-inline-end:4px}
.tile .s{font-size:12.5px;color:var(--mute);margin-top:4px}
.tile.dead{background:var(--dead-bg);border-color:var(--dead-line)}
.tile.dead .k,.tile.dead .v{color:var(--dead)}

/* a plain, honest bar chart — no library, no gradient, no 3D */
.bars{display:flex;flex-direction:column;gap:9px}
.bar{display:grid;grid-template-columns:minmax(0,1fr) 54px;gap:10px;align-items:center}
.bar .n{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .track{grid-column:1 / -1;height:9px;border-radius:99px;background:var(--sunk);overflow:hidden}
.bar .fill{height:100%;border-radius:99px;background:var(--primary)}
.bar .fill.dead{background:var(--dead)}
.bar .fill.now{background:var(--now)}
.bar .c{font-family:var(--num);font-size:14px;font-weight:700;text-align:end;color:var(--body)}

/* ── toast, veil, bottom sheet ────────────────────────────────────────── */
.toast{position:fixed;left:50%;transform:translate(-50%,20px);bottom:calc(96px + var(--safe-b));
  background:var(--ink);color:#fff;padding:13px 20px;border-radius:12px;font-size:15px;
  font-weight:600;z-index:90;opacity:0;pointer-events:none;transition:all .25s var(--ease);
  max-width:min(90vw,420px);text-align:center;box-shadow:0 8px 26px rgba(0,0,0,.28)}
.toast.show{opacity:1;transform:translate(-50%,0)}

.veil{position:fixed;inset:0;background:rgba(15,22,30,.5);z-index:60;opacity:0;
  pointer-events:none;transition:opacity .25s}
.veil.show{opacity:1;pointer-events:auto}

/* ORDER MATTERS HERE. `.sheet.show` and the desktop `.sheet.show` have equal
   specificity, so whichever is written last wins. With the phone rule after
   the media query, its translateY(0) replaced the desktop centring transform
   and every dialog rendered from the middle of the screen downwards, half of
   it off the bottom. Phone rules first, desktop override last. */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--surface);
  border-radius:20px 20px 0 0;padding:8px 16px calc(20px + var(--safe-b));
  transform:translateY(101%);transition:transform .3s var(--ease),opacity .25s;
  max-height:92dvh;overflow-y:auto;box-shadow:var(--shadow-l);
  max-width:560px;margin:0 auto}
.sheet.show{transform:translateY(0)}
@media (min-width:900px){
  .sheet{max-width:520px;border-radius:20px;bottom:auto;top:50%;left:50%;right:auto;
    transform:translate(-50%,-50%) scale(.96);opacity:0;max-height:86dvh;
    box-shadow:0 24px 60px rgba(19,26,34,.28)}
  .sheet.show{transform:translate(-50%,-50%) scale(1);opacity:1}
}
.sheet .grip{width:42px;height:5px;border-radius:99px;background:var(--line-2);
  margin:6px auto 12px}
@media (min-width:900px){ .sheet .grip{display:none} }
.sheet h3{font-size:20px;margin-bottom:14px;padding-inline-end:8px}
.sheet .foot{display:flex;gap:8px;margin-top:6px;position:sticky;bottom:0;
  background:var(--surface);padding-top:10px}
.sheet .foot .btn{flex:1}

/* ── help note ────────────────────────────────────────────────────────── */
.note{background:var(--soon-bg);border:1px solid var(--soon-line);border-radius:12px;
  padding:13px 15px;font-size:14.5px;line-height:1.6;color:var(--body);margin-bottom:12px}
.note b{color:var(--soon)}
.fineprint{font-size:12.5px;color:var(--mute);line-height:1.6;padding:14px 4px 4px}

/* ── print: a clean list to hand to a PRO or pin on a wall ────────────── */
@media print{
  .top,.nav,.fab,.chips,.searchbar,.side,.sheet,.veil,.toast,.noprint{display:none!important}
  body{background:#fff}
  #app{max-width:none;box-shadow:none;display:block;height:auto;overflow:visible}
  .scroll{overflow:visible;padding:0}
  .row{break-inside:avoid;border:1px solid #ccc;box-shadow:none}
  .printhead{display:block!important;padding:0 0 14px;border-bottom:2px solid #222;
    margin-bottom:16px}
  .printhead h2{font-size:20px}
  .printhead .m{font-size:13px;color:#555;margin-top:4px}
  @page{margin:14mm}
}
.printhead{display:none}