/* ═══════════════════════════════════════════════════════════════════════════
   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{
  /* ── "Indigo & Gold" ────────────────────────────────────────────────────
     Deep indigo chrome with a warm gold accent. Indigo carries the
     seriousness this product needs (licences, fines, deadlines) without
     the coldness of navy, and the gold keeps it from feeling clinical.
     The neutrals are deliberately biased toward the indigo rather than a
     pure grey — a grey with no hue in it reads as unconsidered. */
  --primary:#3A3578;
  --primary-2:#4E47A0;        /* lighter step, for the button/sidebar gradient */
  --accent:#C9922F;
  --sidebar:#232048;

  /* Chart bars need their own colour: the deep indigo above is far too
     dark to read as a bar fill (lightness 0.37, outside the 0.43–0.77
     band the validator enforces). Same lesson the quotation suite already
     paid for with its navy. This value is validated, do not "simplify"
     it back to var(--primary). */
  --chart:#6259C7;

  --ink:#191A2E;
  --body:#3E4060;
  --mute:#5A5C7D;
  --faint:#6E7093;
  --line:#E5E4F0;
  --line-2:#D8D6E8;
  --bg:#F6F5FC;
  --surface:#FFFFFF;
  --sunk:#EFEEF8;

  /* 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:16px;
  --r-lg:22px;
  /* two-layer shadows: a tight contact shadow plus a wide soft one.
     One flat shadow reads as a 2010 card; two read as depth. */
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px -10px rgba(16,24,40,.14);
  --shadow-l:0 -1px 2px rgba(16,24,40,.04), 0 -14px 40px -12px rgba(16,24,40,.22);
  --safe-b:env(safe-area-inset-bottom,0px);
  /* Small text on its own tint needs a darker ink than the stripe does:
     amber-on-amber measured 3.62 and green-on-green 4.32, both under the
     4.5 AA floor for text this size. The stripes/headlines keep the
     original hues — they are large enough to pass at 3:1 and they are
     what the greyscale separation was tuned around. */
  --now-ink:#8A560A;
  --dead-ink:#9C2D1B;
  --fine-ink:#25654A;
}

body{
  font-family:var(--ui);color:var(--ink);
  /* a barely-there wash of the brand hue, so the ground has light in
     it rather than being one dead flat colour */
  background:
    radial-gradient(1100px 620px at 12% -8%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 62%),
    radial-gradient(900px 520px at 105% 4%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 58%),
    var(--bg);
  background-attachment:fixed;
  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:transparent;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;
  /* frosted, so content scrolling under it stays visible as motion —
     the fallback background is opaque enough to keep the title legible
     on browsers with no backdrop-filter (older cheap Androids). */
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  backdrop-filter:blur(16px) saturate(1.6);
  border-bottom:1px solid color-mix(in srgb, var(--line) 82%, transparent);
  position:sticky;top:0;z-index:30}
@supports not (backdrop-filter:blur(1px)){ .top{background:var(--surface)} }
.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:44px;height:44px;border-radius:11px}
  .top .langtog{min-height:44px}
  .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:#fff;color:var(--primary)}
.chip.dead{border-color:var(--dead-line);color:var(--dead)}
.chip.dead .n{background:var(--dead-ink);color:#fff}
.chip.dead.on{background:var(--dead);color:#fff;border-color:var(--dead)}
.chip.dead.on .n{background:#fff;color:var(--dead-ink,var(--dead))}
.chip.now{border-color:var(--now-line);color:var(--now-ink)}
.chip.now .n{background:var(--now-ink);color:#fff}
.chip.now.on{background:var(--now);color:#fff;border-color:var(--now)}
.chip.now.on .n{background:#fff;color:var(--now-ink)}

/* ── 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-ink)}
.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;box-shadow:var(--shadow)}
.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:linear-gradient(180deg, var(--primary-2), var(--primary));color:#fff;
  box-shadow:0 1px 0 color-mix(in srgb, #fff 22%, transparent) inset,
             0 8px 20px -8px color-mix(in srgb, var(--primary) 65%, transparent);
  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:linear-gradient(180deg, var(--primary-2), var(--primary));
  color:#fff;font-size:17px;font-weight:700;display:flex;align-items:center;gap:9px;
  box-shadow:0 2px 4px rgba(16,24,40,.12),
    0 12px 28px -8px color-mix(in srgb, var(--primary) 70%, transparent)}
.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:color-mix(in srgb, var(--surface) 84%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  backdrop-filter:blur(18px) saturate(1.6);
  border-top:1px solid color-mix(in srgb, var(--line) 82%, transparent);
  padding-bottom:var(--safe-b)}
@supports not (backdrop-filter:blur(1px)){ .nav{background:var(--surface)} }
.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{filter:drop-shadow(0 2px 6px color-mix(in srgb, var(--primary) 34%, transparent))}
.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:linear-gradient(165deg, color-mix(in srgb, var(--primary) 42%, var(--sidebar)), var(--sidebar) 62%);
    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-ink)}
.hero.s-soon     .badge{background:var(--soon-bg);color:var(--soon)}
.hero.s-ok       .badge{background:var(--fine-bg);color:var(--fine-ink)}
.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(--chart)}
.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}