/* ============================================================================
   SaarthiOS Collect — "The Passbook" design system (demo).
   The collections loop is a passbook: every hop prints as a dated entry and the
   money at risk falls as the loop closes.

   Chassis: suite.css (the SaarthiOS suite layer, loaded first) owns the faces, the status inks,
           the corner scale, the focus ring, the wordmark lockup, the stamp and the suite footer.
           This file is Collect's room: mint paper, teal cloth, brass foil, violet stamp ink, the passbook.
   Faces:  Archivo (cover lettering at condensed widths, body, and all figures with
           tabular lining numerals) · Martian Mono (only the passbook print: dates + account fields).
   Assets: guilloche.svg (page security print) · rosette.svg (cover seal). Both
           authored in-repo; see DESIGN.md.
   ============================================================================ */

:root{
  /* cover cloth */
  --cloth:#0d3440; --cloth-2:#144654; --cloth-3:#1c5869; --cloth-ink:#ece6d2; --cloth-mute:#c2d6d0;
  --foil:#d8c38a;
  /* page */
  --page:#e6efe7; --page-2:#f2f6f0; --page-3:#dbe7dd;
  --rule:#0f4c5c; --rule-soft:rgba(15,76,92,.24); --rule-faint:rgba(15,76,92,.11);
  /* ink */
  --ribbon:#16181a; --ribbon-worn:#4c5658; --ghost:#5f7774;
  --stamp:#5b3a9e; --stamp-tint:rgba(91,58,158,.08);
  /* status inks come from the suite chassis */
  --red:var(--s-alarm); --red-tint:var(--s-alarm-tint);
  --ok:var(--s-ok);     --ok-tint:var(--s-ok-tint);
  --warn:var(--s-warn); --warn-tint:var(--s-warn-tint);
  /* the product room, as the chassis expects it */
  --p-accent:var(--cloth-2); --p-on-accent:var(--foil); --p-ink:var(--ribbon); --p-ink-soft:var(--ribbon-worn); --p-mark-product:var(--foil);
  /* type */
  --f-sans:"Archivo", ui-sans-serif, system-ui, sans-serif;
  --f-fig:"Archivo", ui-sans-serif, system-ui, sans-serif;
  --f-mono:"Martian Mono", ui-monospace, monospace;
  /* depth */
  --lift:0 1px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(13,52,64,.08), 0 18px 40px -24px rgba(13,52,64,.45);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--page); color:var(--ribbon);
  font:400 16px/1.55 var(--f-sans); font-variation-settings:"wdth" 100;
  background-image:url(/static/guilloche.svg); background-size:480px 120px;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--stamp); color:#fff }
a{ color:inherit; text-underline-offset:.22em; text-decoration-thickness:1px }
img,svg{ display:block }
html{ scrollbar-color:var(--rule-soft) transparent }
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-thumb{ background:var(--rule-soft); border-radius:10px; border:3px solid var(--page) }
.num{ font-variant-numeric:tabular-nums lining-nums }
[class] .num, .pb-t td.c-amt, .pb-t td.c-bal, .lrow .amt, .statement .v, .heat .cell .v, .pb-bal .v, table.t td.r, .seal b, .index a .n, .loop-cell.mid .n, .run li::before{ font-variant-numeric:tabular-nums lining-nums; font-variation-settings:"wdth" 88; letter-spacing:-.01em }
[hidden]{ display:none !important }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }

/* ---------- type ---------- */
.cover-type{ font-family:var(--f-sans); font-variation-settings:"wdth" 72; font-weight:800; text-transform:uppercase; letter-spacing:.06em }
h1,h2,h3{ font-family:var(--f-sans); margin:0; text-wrap:balance; color:var(--ribbon) }
.h-display{ font-size:clamp(2.6rem, 5.4vw, 4.6rem); line-height:.98; font-weight:800; letter-spacing:-.025em; font-variation-settings:"wdth" 82 }
.h-page{ font-size:clamp(1.9rem, 3vw, 2.5rem); line-height:1.04; font-weight:800; letter-spacing:-.02em; font-variation-settings:"wdth" 84 }
.h-sec{ font-size:clamp(1.6rem, 3vw, 2.3rem); line-height:1.08; font-weight:800; letter-spacing:-.02em; font-variation-settings:"wdth" 84 }
.h-sheet{ font-size:1.05rem; font-weight:700; letter-spacing:-.005em; font-variation-settings:"wdth" 90 }
.lede{ font-size:1.06rem; color:var(--ribbon-worn); max-width:62ch; margin:.6rem 0 0 }
.muted{ color:var(--ribbon-worn) }
.small{ font-size:.82rem }

.mono{ font-family:var(--f-sans); font-size:.82rem; letter-spacing:0 }

/* ---------- controls ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em; text-decoration:none; cursor:pointer;
  font:700 .95rem/1 var(--f-sans); font-variation-settings:"wdth" 88; letter-spacing:.005em;
  padding:.95em 1.25em; border-radius:var(--s-r2); border:1px solid var(--cloth);
  background:var(--cloth); color:var(--cloth-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 8px 18px -10px rgba(13,52,64,.7);
  transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover{ background:var(--cloth-2); transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 14px 24px -12px rgba(13,52,64,.75) }
.btn:active{ transform:translateY(0) }
.btn svg{ width:1.05em; height:1.05em; transition:transform .3s var(--ease) }
.btn:hover svg{ transform:translateX(3px) }
.btn.line{ background:transparent; color:var(--rule); border-color:var(--rule-soft); box-shadow:none }
.btn.line:hover{ background:var(--page-2); border-color:var(--rule) }
.btn.foil{ background:var(--foil); color:var(--cloth); border-color:var(--foil) }
.btn.foil:hover{ background:#e6d39e }
.btn.sm{ font-size:.82rem; padding:.7em 1em }
.link{ color:var(--rule); font-weight:600; text-decoration:underline; text-decoration-color:var(--rule-soft) }
.link:hover{ text-decoration-color:var(--rule) }

/* rubber stamps */
.stamp{
  display:inline-flex; align-items:center; gap:.4em; white-space:nowrap;
  font:700 .7rem/1 var(--f-sans); font-variation-settings:"wdth" 75; text-transform:uppercase; letter-spacing:.09em;
  padding:.42em .6em .38em; border:1.5px solid currentColor; border-radius:3px; color:var(--rule);
}
.stamp.violet{ color:var(--stamp); background:var(--stamp-tint) }
.stamp.red{ color:var(--red); background:var(--red-tint) }
.stamp.ok{ color:var(--ok); background:var(--ok-tint) }
.stamp.warn{ color:var(--warn); background:var(--warn-tint) }
.stamp.plain{ color:var(--ribbon-worn) }
.stamp.big{ font-size:.84rem; padding:.55em .8em .5em; border-width:2px; transform:rotate(-2.5deg) }
.seal{
  display:inline-grid; place-items:center; text-align:center; color:var(--stamp);
  border:2px solid currentColor; border-radius:6px; padding:.45rem .7rem; transform:rotate(-4deg);
  font:700 .7rem/1.25 var(--f-sans); font-variation-settings:"wdth" 72; text-transform:uppercase; letter-spacing:.1em;
  box-shadow:0 0 0 3px var(--page) inset, 0 0 0 4px currentColor inset; background:var(--stamp-tint);
  mix-blend-mode:multiply;
}
.seal b{ display:block; font-family:var(--f-fig); font-size:1rem; letter-spacing:.02em; font-weight:800 }
.on-cloth .seal{ color:var(--foil); box-shadow:0 0 0 3px var(--cloth) inset, 0 0 0 4px currentColor inset; background:transparent; mix-blend-mode:normal }

/* ---------- wordmark ---------- */
/* The suite lockup (suite.css), in Collect's materials: the tile keeps the foil rosette on cloth. */
.s-mark.on-dark{ color:var(--cloth-ink) }
.s-mark-tile{ background:url(/static/rosette.svg) center/170% no-repeat, var(--cloth-2); box-shadow:inset 0 0 0 1px rgba(216,195,138,.55) }

/* ============================ SITE (landing + picker) ============================ */
body:has(> .cover){ min-height:100vh; display:flex; flex-direction:column }
body:has(> .cover) > main{ flex:1 }
.cover{
  position:sticky; top:0; z-index:20; background:var(--cloth); color:var(--cloth-ink);
  border-bottom:3px double rgba(216,195,138,.45);
}
.cover-in{ max-width:1280px; margin:0 auto; padding:.8rem clamp(16px,3vw,32px); display:flex; align-items:center; gap:1.4rem }
.cover nav{ margin-left:auto; display:flex; align-items:center; gap:1.4rem }
.cover nav a.nl{ color:var(--cloth-mute); text-decoration:none; font-weight:600; font-size:.9rem }
.cover nav a.nl:hover{ color:var(--cloth-ink) }
.wrap{ max-width:1280px; margin:0 auto; padding:0 clamp(16px,3vw,32px) }

.hero{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(28px,4vw,64px); align-items:start; padding-block:clamp(40px,6vw,84px) clamp(56px,7vw,96px) }
.hero-copy{ padding-top:clamp(0px,2vw,28px); position:sticky; top:110px }
.hero-copy .lede{ font-size:1.14rem; margin-top:1.3rem }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; align-items:center }
.hero-note{ margin-top:1.6rem; display:flex; gap:.8rem; align-items:center; color:var(--ribbon-worn); font-size:.86rem }

/* the passbook page (hero + whatsapp ledger) */
.pb{
  position:relative; margin:0; background:var(--page-2); border:1px solid var(--rule-soft); border-radius:4px;
  box-shadow:var(--lift);
  background-image:url(/static/guilloche.svg); background-size:480px 120px;
}
.pb::before{ /* binding gutter */
  content:""; position:absolute; left:0; top:0; bottom:0; width:18px;
  background:linear-gradient(90deg, rgba(13,52,64,.13), rgba(13,52,64,0)); border-radius:4px 0 0 4px; pointer-events:none;
}
.pb-head{ display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; padding:1.15rem 1.4rem 1rem 1.9rem; border-bottom:2px solid var(--rule) }
.pb-title{ color:var(--rule) }
.pb-title .cover-type{ font-size:.74rem; letter-spacing:.14em }
.pb-holder{ font-weight:800; font-size:1.35rem; letter-spacing:-.01em; font-variation-settings:"wdth" 86; margin-top:.25rem; color:var(--ribbon) }
.pb-fields{ display:grid; grid-template-columns:auto auto; gap:.15rem .9rem; margin-top:.55rem }
.pb-fields dt{ font:700 .7rem/1.6 var(--f-sans); font-variation-settings:"wdth" 75; text-transform:uppercase; letter-spacing:.1em; color:var(--rule) }
.pb-fields dd{ margin:0; font-family:var(--f-mono); font-size:.74rem; color:var(--ribbon) }
.pb-t{ width:100%; border-collapse:collapse; table-layout:fixed }
.pb-t th{
  font:700 .7rem/1 var(--f-sans); font-variation-settings:"wdth" 75; text-transform:uppercase; letter-spacing:.12em;
  color:var(--rule); text-align:left; padding:.7rem .6rem; border-bottom:1px solid var(--rule); background:rgba(15,76,92,.04)
}
.pb-t td{ padding:.62rem .6rem; border-bottom:1px solid var(--rule-faint); vertical-align:top; font-family:var(--f-mono); font-size:.76rem; line-height:1.45; color:var(--ribbon-worn) }
.pb-t th:first-child, .pb-t td:first-child{ padding-left:1.9rem }
.pb-t th:last-child, .pb-t td:last-child{ padding-right:1.4rem; text-align:right }
.pb-t .c-date{ width:4.9rem; white-space:nowrap }
.pb-t .c-ref{ width:4.4rem }
.pb-t .c-amt{ width:6.2rem; text-align:right }
.pb-t .c-bal{ width:7.2rem }
.pb-t td.c-amt, .pb-t td.c-bal{ font-family:var(--f-fig); font-size:.98rem; font-weight:800; color:var(--ribbon); white-space:nowrap }
.pb-t td.c-bal{ color:var(--red) }
.pb-t td .p-main{ font-family:var(--f-sans); font-size:.9rem; line-height:1.3; color:var(--ribbon); font-weight:600; font-variation-settings:"wdth" 92 }
.pb-t td .p-sub{ display:block; font-family:var(--f-sans); color:var(--ribbon-worn); font-size:.8rem; line-height:1.35; margin-top:.15rem }
.pb-t .ref{ font:700 .68rem/1 var(--f-sans); font-variation-settings:"wdth" 72; text-transform:uppercase; letter-spacing:.1em; padding:.35em .45em; border-radius:2px; display:inline-block; border:1px solid currentColor }
.ref.ledger{ color:var(--rule) } .ref.field{ color:var(--ok) } .ref.branch{ color:var(--stamp) } .ref.call{ color:var(--red) }
.pb-t tr.is-live td{ background:rgba(91,58,158,.05) }
.pb-t tr.is-live td .p-main{ font-weight:750 }
.pb-t tr.ghost td, .pb-t tr.ghost td .p-main, .pb-t tr.ghost td.c-amt, .pb-t tr.ghost td.c-bal{ color:var(--ghost) }
.pb-t tr.ghost td{ border-bottom-style:dashed }
.pb-t tr.ghost .ref{ opacity:.6 }
.pb-foot{ display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:.9rem 1.4rem .95rem 1.9rem; border-top:2px solid var(--rule) }
.pb-foot .seal{ transform:rotate(-6deg) }
.pb-bal{ display:flex; align-items:baseline; gap:.7rem }
.pb-bal .label{ font:700 .7rem/1.2 var(--f-sans); font-variation-settings:"wdth" 75; text-transform:uppercase; letter-spacing:.12em; color:var(--rule) }
.pb-bal .v{ font-family:var(--f-fig); font-weight:800; font-size:1.9rem; color:var(--red); line-height:1 }
.pb-replay{ background:none; border:0; padding:.3rem 0; cursor:pointer; color:var(--rule); font:600 .8rem/1 var(--f-sans); display:inline-flex; align-items:center; gap:.4rem }
.pb-replay:hover{ text-decoration:underline }
.pb-replay svg{ width:14px; height:14px }

/* print-head motion — content is visible by default; JS opts rows into the sequence */
.pb-t tr.queued{ visibility:hidden }
.pb-t tr.printing td{ animation:print .62s steps(18, end) both }
@keyframes print{ from{ clip-path:inset(0 100% 0 0) } to{ clip-path:inset(0 0 0 0) } }
.pb-bal .v.tick{ animation:tick .5s var(--ease) }
@keyframes tick{ 0%{ opacity:.15; filter:blur(2px) } 100%{ opacity:1; filter:none } }
@media (prefers-reduced-motion: reduce){
  .pb-t tr.queued{ visibility:visible } .pb-t tr.printing td{ animation:none } .pb-bal .v.tick{ animation:none }
  .btn, .btn svg{ transition:none }
}

/* landing sections */
.band{ padding:clamp(56px,8vw,112px) 0; border-top:1px solid var(--rule-soft) }
.band-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:end; margin-bottom:clamp(28px,4vw,48px) }
.band-head .lede{ margin:0 }

/* the loop as a two-sided index: ledger side | field side */
.loop{ display:grid; grid-template-columns:minmax(0,1fr) 140px minmax(0,1fr); border-top:2px solid var(--rule); border-bottom:2px solid var(--rule) }
.loop-hd{ padding:.8rem 0; font:700 .7rem/1 var(--f-sans); font-variation-settings:"wdth" 75; text-transform:uppercase; letter-spacing:.14em; color:var(--rule); border-bottom:1px solid var(--rule) }
.loop-hd.mid{ text-align:center; border-left:1px dashed var(--rule-soft); border-right:1px dashed var(--rule-soft) }
.loop-hd.r{ text-align:right }
.loop-row{ display:contents }
.loop-cell{ padding:1.15rem 0; border-bottom:1px solid var(--rule-faint); min-height:5.2rem }
.loop-cell.l{ padding-right:1.6rem }
.loop-cell.r{ padding-left:1.6rem }
.loop-cell.mid{ border-left:1px dashed var(--rule-soft); border-right:1px dashed var(--rule-soft); display:grid; place-items:center; text-align:center; text-decoration:none; color:var(--rule) }
.loop-cell.mid .n{ font-family:var(--f-fig); font-weight:800; font-size:1.7rem; line-height:1 }
.loop-cell.mid .go{ font:700 .7rem/1 var(--f-sans); font-variation-settings:"wdth" 75; text-transform:uppercase; letter-spacing:.12em; margin-top:.35rem; opacity:0; transition:opacity .2s }
.loop-row:hover .loop-cell{ background:rgba(15,76,92,.04) }
.loop-row:hover .loop-cell.mid .go{ opacity:1 }
.loop-cell .t{ font-weight:800; font-size:1.12rem; font-variation-settings:"wdth" 88; letter-spacing:-.01em }
.loop-cell .d{ color:var(--ribbon-worn); font-size:.93rem; margin-top:.2rem; max-width:44ch }
.loop-cell.empty{ color:var(--ghost) }
.loop-cell.empty::after{ content:""; display:block; height:1px; margin-top:2.2rem; border-top:1px dashed var(--rule-faint) }

/* statement summary (the demo book in numbers) */
.statement{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--rule-soft); border-top:2px solid var(--rule); background:var(--page-2); border-radius:3px }
.statement > div{ padding:1.4rem 1.4rem 1.3rem; border-left:1px solid var(--rule-faint) }
.statement > div:first-child{ border-left:0 }
.statement .v{ font-family:var(--f-fig); font-weight:800; font-size:clamp(1.7rem,2.8vw,2.4rem); line-height:1; color:var(--ribbon) }
.statement .v.red{ color:var(--red) }
.statement .l{ font-size:.86rem; color:var(--ribbon-worn); margin-top:.6rem; max-width:24ch }
.statement-note{ margin-top:.9rem; font-size:.8rem; color:var(--ribbon-worn) }

/* holders (role picker) */
.holders{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px }
.holder{
  position:relative; display:flex; flex-direction:column; min-height:280px; text-decoration:none; color:var(--cloth-ink);
  background:var(--cloth); border-radius:4px 10px 10px 4px; padding:1.2rem 1.1rem 1.1rem 1.5rem;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 20px 30px -22px rgba(13,52,64,.9);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); overflow:hidden;
}
.holder::before{ content:""; position:absolute; left:8px; top:0; bottom:0; width:1px; background:rgba(0,0,0,.35); box-shadow:1px 0 0 rgba(255,255,255,.07) }
.holder::after{ content:""; position:absolute; right:-70px; bottom:-70px; width:220px; height:220px; background:url(/static/rosette.svg) center/contain no-repeat; opacity:.55; transition:transform .8s var(--ease) }
.holder:hover{ transform:translateY(-4px); box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 28px 40px -22px rgba(13,52,64,.95) }
.holder:hover::after{ transform:rotate(25deg) }
.holder .role{ font:800 .72rem/1.2 var(--f-sans); font-variation-settings:"wdth" 72; text-transform:uppercase; letter-spacing:.14em; color:var(--foil) }
.holder .who{ font-weight:800; font-size:1.3rem; line-height:1.1; margin-top:.9rem; font-variation-settings:"wdth" 86; letter-spacing:-.01em }
.holder .scope{ font-family:var(--f-sans); font-size:.82rem; color:var(--cloth-mute); margin-top:.35rem }
.holder .blurb{ font-size:.88rem; color:var(--cloth-mute); margin-top:auto; padding-top:1.2rem; position:relative; z-index:1; line-height:1.45 }
.holder .open{ position:relative; z-index:1; margin-top:1rem; display:inline-flex; align-items:center; gap:.4rem; font:700 .8rem/1 var(--f-sans); color:var(--foil) }
.holder .open svg{ width:14px; height:14px; transition:transform .3s var(--ease) }
.holder:hover .open svg{ transform:translateX(3px) }

.closing{ background:var(--cloth); color:var(--cloth-ink); position:relative; overflow:hidden }
.closing::after{ content:""; position:absolute; right:-120px; top:50%; width:520px; height:520px; transform:translateY(-50%); background:url(/static/rosette.svg) center/contain no-repeat; opacity:.5; pointer-events:none }
.closing-in{ position:relative; z-index:1; padding:clamp(56px,8vw,104px) 0; display:flex; flex-wrap:wrap; gap:2rem; align-items:end; justify-content:space-between }
.closing h2{ color:var(--cloth-ink); max-width:18ch }
.closing p{ color:var(--cloth-mute); margin:.8rem 0 0; max-width:52ch }
.site-foot{ background:var(--cloth); color:var(--cloth-mute); border-top:1px solid rgba(216,195,138,.2); font-size:.8rem }
.site-foot .s-suite{ padding-top:.9rem; border-top:1px solid rgba(216,195,138,.16); color:var(--cloth-mute) }
.site-foot .wrap{ padding-top:1.1rem; padding-bottom:1.1rem; display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; justify-content:space-between }

/* ============================ CONSOLE ============================ */
.shell{ display:grid; grid-template-columns:248px minmax(0,1fr); min-height:100vh }
.side{
  position:sticky; top:0; height:100vh; overflow:auto; background:var(--cloth); color:var(--cloth-ink);
  display:flex; flex-direction:column; padding:1.1rem 0 1rem; border-right:3px double rgba(216,195,138,.35);
}
.side .s-mark{ padding:0 1.1rem }
.holder-plate{ margin:1.3rem .9rem 1rem; padding:.85rem .9rem; border:1px solid rgba(216,195,138,.32); border-radius:4px; background:rgba(255,255,255,.03) }
.holder-plate .k{ font:700 .6rem/1 var(--f-sans); font-variation-settings:"wdth" 72; text-transform:uppercase; letter-spacing:.14em; color:var(--foil) }
.holder-plate .n{ font-weight:800; font-size:1rem; margin-top:.45rem; font-variation-settings:"wdth" 88 }
.holder-plate .s{ font-family:var(--f-sans); font-size:.82rem; color:var(--cloth-mute); margin-top:.2rem }
.switch{ margin-top:.7rem }
.switch summary{ list-style:none; cursor:pointer; font:600 .76rem/1 var(--f-sans); color:var(--cloth-mute); display:inline-flex; gap:.35rem; align-items:center }
.switch summary::-webkit-details-marker{ display:none }
.switch summary:hover{ color:var(--cloth-ink) }
.switch summary svg{ width:12px; height:12px; transition:transform .2s }
.switch[open] summary svg{ transform:rotate(180deg) }
.switch-list{ margin-top:.6rem; display:flex; flex-direction:column; gap:2px }
.switch-list a{ display:flex; justify-content:space-between; gap:.5rem; padding:.45rem .5rem; border-radius:3px; text-decoration:none; font-size:.78rem; color:var(--cloth-ink) }
.switch-list a span:last-child{ color:var(--cloth-mute); font-size:.7rem }
.switch-list a:hover{ background:rgba(255,255,255,.06) }
.switch-list a.on{ background:rgba(216,195,138,.14) }
.side-nav{ display:flex; flex-direction:column; gap:2px; padding:0 0 0 .9rem }
.side-nav a{
  display:flex; align-items:center; gap:.7rem; padding:.62rem .9rem; border-radius:4px 0 0 4px; text-decoration:none;
  color:var(--cloth-mute); font-weight:600; font-size:.92rem; transition:background .2s, color .2s;
}
.side-nav a svg{ width:17px; height:17px; flex:none }
.side-nav a:hover{ color:var(--cloth-ink); background:rgba(255,255,255,.05) }
.side-nav a.on{ background:var(--page); color:var(--rule); position:relative; margin-right:-3px }
.side-foot{ margin-top:auto; padding:1rem 1.1rem 0; display:flex; flex-direction:column; gap:.5rem; font-size:.8rem }
.side-foot a{ color:var(--cloth-mute); text-decoration:none; display:inline-flex; gap:.45rem; align-items:center }
.side-foot a:hover{ color:var(--cloth-ink) }
.side-foot a svg{ width:14px; height:14px }
.side-foot .fict{ color:var(--cloth-mute); opacity:.75; font-size:.72rem; line-height:1.4; margin-top:.4rem }

.main{ min-width:0 }
.main-in{ max-width:1180px; margin:0 auto; padding:1.4rem clamp(16px,3vw,40px) 3rem }
/* loop index — where am I in the story */
.index-bar{ display:flex; align-items:stretch; gap:1rem; margin-bottom:1.8rem }
.index{ flex:1; min-width:0; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); border-top:2px solid var(--rule); border-bottom:1px solid var(--rule) }
.index a{ position:relative; padding:.55rem .55rem .5rem; text-decoration:none; color:var(--ghost); border-left:1px dashed var(--rule-faint); transition:color .2s, background .2s }
.index a:first-child{ border-left:0 }
.index a .n{ font-family:var(--f-fig); font-weight:800; font-size:.95rem; line-height:1; display:block }
.index a .l{ font:700 .7rem/1.15 var(--f-sans); font-variation-settings:"wdth" 75; text-transform:uppercase; letter-spacing:.08em; display:block; margin-top:.3rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.index a.done{ color:var(--rule) }
.index a.on{ color:var(--ribbon); background:var(--page-2) }
.index a.on::after{ content:""; position:absolute; left:0; right:0; top:-2px; height:4px; background:var(--stamp) }
.index a:hover{ color:var(--ribbon); background:rgba(15,76,92,.04) }
.index-bar .seal{ flex:none; align-self:center }

.page-head{ display:flex; justify-content:space-between; gap:1.5rem; align-items:flex-end; padding-bottom:1.3rem; margin-bottom:1.6rem; border-bottom:1px solid var(--rule-soft) }
.page-head .lede{ margin-top:.55rem }
.page-head .aside{ flex:none; display:flex; gap:.5rem; align-items:center }

.sheet{ background:var(--page-2); border:1px solid var(--rule-soft); border-radius:3px }
.sheet-h{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:1rem 1.25rem .85rem; border-bottom:1px solid var(--rule) }
.sheet-h .meta{ font-family:var(--f-sans); font-size:.82rem; color:var(--ribbon-worn) }
.sheet-b{ padding:1rem 1.25rem 1.2rem }
.sheet + .sheet, .stack > * + *{ margin-top:1.2rem }
.cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.2rem; align-items:start }
.cols > .sheet + .sheet{ margin-top:0 }
.cols.wa{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) }
.cols.wa .phone{ position:sticky; top:1.5rem }
.callout{ padding:1.15rem 1.3rem; border:1px solid var(--rule-soft); border-radius:3px; background:var(--page-2); display:flex; gap:1rem; align-items:flex-start }
.callout .body{ flex:1; min-width:0 }
.callout .t{ font-weight:700; font-size:1.05rem; font-variation-settings:"wdth" 90 }
.callout .s{ color:var(--ribbon-worn); font-size:.9rem; margin-top:.25rem }
.callout.call{ background:var(--cloth); color:var(--cloth-ink); border-color:var(--cloth) }
.callout.call .t{ font-size:clamp(1.15rem,1.8vw,1.45rem); line-height:1.3; font-weight:700; max-width:58ch; color:var(--cloth-ink) }
.callout.call .s{ color:var(--cloth-mute) }

/* statement row inside the console */
.statement.sm .v{ font-size:clamp(1.4rem,2.2vw,1.9rem) }
.statement.sm > div{ padding:1.05rem 1.15rem 1rem }
.statement + *{ margin-top:1.2rem }

/* ruled ledger list */
.ledger{ display:flex; flex-direction:column }
.lrow{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(70px,1fr) 7.2rem 13.5rem 18px; gap:.4rem 1rem; align-items:center;
  padding:.72rem 0; border-bottom:1px solid var(--rule-faint); text-decoration:none; color:inherit; transition:background .15s;
}
.lrow:last-child{ border-bottom:0 }
a.lrow:hover{ background:rgba(15,76,92,.045); box-shadow:-1.25rem 0 0 rgba(15,76,92,.045), 1.25rem 0 0 rgba(15,76,92,.045) }
.lrow .who{ min-width:0; overflow:hidden; display:block }
.lrow .who .n, .lrow .who .m{ display:block }
.lrow .who .n{ font-weight:700; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variation-settings:"wdth" 92 }
.lrow .who .m{ font-family:var(--f-sans); font-size:.82rem; color:var(--ribbon-worn); margin-top:.15rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.lrow .amt{ font-family:var(--f-fig); font-weight:800; font-size:1.02rem; text-align:right; white-space:nowrap }
.lrow .st{ justify-self:end }
.lrow .chev{ width:16px; height:16px; color:var(--ghost); transition:transform .2s, color .2s }
a.lrow:hover .chev{ color:var(--rule); transform:translateX(2px) }
.lrow.simple{ grid-template-columns:8.5rem minmax(0,1fr) }
.lrow.simple .k{ justify-self:start }
/* printed dot bars */
.dots{ height:10px; border-radius:1px; background:rgba(15,76,92,.08); overflow:hidden }
.dots i{ display:block; height:100%; background-image:radial-gradient(circle, var(--rule) 1.5px, transparent 1.9px); background-size:5px 5px; background-position:0 0 }
.dots.red i{ background-image:radial-gradient(circle, var(--red) 1.5px, transparent 1.9px) }

/* heatmap — ink density */
.heat{ display:grid; gap:4px; font-family:var(--f-sans) }
.heat .hd{ font:700 .7rem/1.2 var(--f-sans); font-variation-settings:"wdth" 75; text-transform:uppercase; letter-spacing:.1em; color:var(--rule); padding:.3rem .5rem }
.heat .hd .num{ display:block; font-family:var(--f-sans); font-weight:500; text-transform:none; letter-spacing:0; color:var(--ribbon-worn); margin-top:.2rem; font-size:.82rem }
.heat .rl{ display:flex; align-items:center; font-weight:700; font-family:var(--f-sans); font-size:.92rem; padding-right:.5rem }
.heat .cell{ border-radius:3px; padding:.8rem .75rem; min-height:4.4rem; display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--rule-faint) }
.heat .cell .v{ font-family:var(--f-fig); font-weight:800; font-size:1.05rem; line-height:1 }
.heat .cell .c{ font-size:.7rem; margin-top:.4rem; opacity:.8 }
.heat .cell.dark{ color:var(--page-2) }
.legend{ display:flex; gap:.6rem; align-items:center; margin-top:.9rem; font-size:.76rem; color:var(--ribbon-worn) }
.legend .ramp{ width:110px; height:10px; border-radius:2px; background:linear-gradient(90deg, rgba(13,52,64,.05), rgba(13,52,64,.92)) }

/* table */
table.t{ width:100%; border-collapse:collapse; font-size:.85rem }
table.t th{ font:700 .7rem/1 var(--f-sans); font-variation-settings:"wdth" 75; text-transform:uppercase; letter-spacing:.12em; color:var(--rule); text-align:left; padding:.55rem 0; border-bottom:1px solid var(--rule) }
table.t td{ padding:.55rem 0; border-bottom:1px solid var(--rule-faint); font-family:var(--f-sans); font-size:.82rem }
table.t .r{ text-align:right }
table.t td.r{ font-family:var(--f-fig); font-weight:800; font-size:.92rem }

/* region drill */
.drill details{ border-bottom:1px solid var(--rule-faint) }
.drill details:last-child{ border-bottom:0 }
.drill summary{ list-style:none; cursor:pointer }
.drill summary::-webkit-details-marker{ display:none }
.drill summary .lrow{ border-bottom:0 }
.drill details[open] summary .chev{ transform:rotate(90deg); color:var(--rule) }
.drill .sub{ padding:0 0 .6rem 1.6rem; border-left:1px dashed var(--rule-soft); margin-left:.3rem }
.drill .sub .lrow{ padding:.5rem 0 }
.drill .sub .lrow .who .n{ font-size:.86rem; font-weight:600 }

/* next in the loop */
.next{ margin-top:2.4rem; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); border-top:2px solid var(--rule) }
.next a{ text-decoration:none; padding:1.1rem 0; display:block; color:inherit }
.next .prev{ color:var(--ribbon-worn); padding-right:1rem }
.next .fwd{ text-align:right; border-left:1px dashed var(--rule-soft); padding-left:1rem }
.next .t{ font-weight:800; font-size:1.25rem; font-variation-settings:"wdth" 86; display:inline-flex; align-items:center; gap:.5rem }
.next .t svg{ width:20px; height:20px; transition:transform .3s var(--ease) }
.next .fwd:hover .t svg{ transform:translateX(4px) }
.next .fwd .t{ color:var(--rule) }
.next .s{ font-size:.86rem; color:var(--ribbon-worn); margin-top:.2rem }

/* intake run */
.run{ list-style:none; margin:0; padding:0; counter-reset:run }
.run li{ display:grid; grid-template-columns:2rem 7.5rem minmax(0,1fr); gap:.9rem; align-items:center; padding:.75rem 0; border-bottom:1px solid var(--rule-faint) }
.run li:last-child{ border-bottom:0 }
.run li::before{ counter-increment:run; content:counter(run, decimal-leading-zero); font-family:var(--f-fig); font-weight:800; color:var(--rule) }
.run .d{ font-size:.92rem }
.files{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.2rem }
.file{ display:inline-flex; align-items:center; gap:.55rem; padding:.55rem .75rem; border:1px solid var(--rule-soft); background:var(--page); border-radius:3px; font-family:var(--f-mono); font-size:.72rem }
.file svg{ width:16px; height:16px; color:var(--ok) }

/* escalation file */
.esc{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem 1.5rem; padding:1.3rem 1.4rem }
.esc .who{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center }
.esc .client{ font-weight:800; font-size:1.25rem; font-variation-settings:"wdth" 86 }
.esc .reason{ font-weight:600; margin-top:.6rem; font-size:1rem }
.esc .note{ color:var(--ribbon-worn); margin-top:.35rem; font-size:.92rem; max-width:70ch }
.esc .route{ font-family:var(--f-sans); font-size:.82rem; color:var(--ribbon-worn); text-align:right }
.esc .route b{ display:block; font-family:var(--f-sans); font-size:.95rem; color:var(--stamp); margin-top:.3rem }
.esc .act{ grid-column:1/-1; display:flex; gap:.6rem; flex-wrap:wrap }

/* notes (field context) */
.note-l{ padding:.75rem 0; border-bottom:1px solid var(--rule-faint) }
.note-l:last-child{ border-bottom:0 }
.note-l .tx{ font-size:.94rem; color:var(--ribbon) }
.note-l .by{ font-family:var(--f-sans); font-size:.82rem; color:var(--ribbon-worn); margin-top:.25rem }
.pill-row{ display:flex; flex-wrap:wrap; gap:.4rem }

/* ---------- the phone (WhatsApp depiction) ---------- */
.phone{ width:min(100%,360px); margin:0 auto; border-radius:40px; padding:11px; background:#121416; box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 34px 60px -30px rgba(13,52,64,.75) }
.phone-scr{ border-radius:30px; overflow:hidden; background:#ece5dc; display:flex; flex-direction:column; height:640px }
.wa-top{ display:flex; gap:.6rem; align-items:center; padding:.95rem .9rem .75rem; background:#1f5f4e; color:#fff }
.wa-av{ width:34px; height:34px; border-radius:50%; background:url(/static/rosette.svg) center/150% no-repeat, var(--cloth); border:1px solid rgba(216,195,138,.6); display:grid; place-items:center; font:800 .8rem/1 var(--f-sans); color:var(--foil) }
.wa-name{ font-weight:700; font-size:.9rem }
.wa-sub{ font-size:.7rem; opacity:.75 }
.wa-body > *{ flex:none }
.wa-body{ flex:1; overflow:auto; padding:.9rem .7rem; display:flex; flex-direction:column; gap:.45rem; scroll-behavior:smooth }
.wa-day{ align-self:center; font-size:.7rem; background:rgba(255,255,255,.75); padding:.25rem .6rem; border-radius:6px; color:#54656f }
.bub{ max-width:84%; padding:.5rem .65rem .35rem; border-radius:9px; font-size:.82rem; line-height:1.38; color:#111b21; box-shadow:0 1px .5px rgba(11,20,26,.13) }
.bub .ts{ font-size:.7rem; color:#667781; text-align:right; margin-top:.15rem }
.bub.in{ align-self:flex-start; background:#fff; border-top-left-radius:2px }
.bub.out{ align-self:flex-end; background:#d6f5cc; border-top-right-radius:2px }
.bub.card{ padding:0; overflow:hidden; max-width:90% }
.bub.card .ch{ background:var(--page-2); border-bottom:1px solid var(--rule); padding:.55rem .7rem }
.bub.card .ch .k{ font:700 .7rem/1 var(--f-sans); font-variation-settings:"wdth" 75; text-transform:uppercase; letter-spacing:.12em; color:var(--rule) }
.bub.card .ch .n{ font-weight:700; margin-top:.25rem }
.bub.card .cb{ padding:.55rem .7rem .4rem }
.bub.sys{ align-self:center; background:#fff7d6; font-size:.76rem; max-width:92% }
.bub.hidden{ display:none }
.bub.pop{ animation:pop .4s var(--ease) }
@keyframes pop{ from{ opacity:0; transform:translateY(6px) scale(.98) } to{ opacity:1; transform:none } }
.wa-reply{ padding:.6rem .6rem .8rem; background:#f0ebe4; border-top:1px solid rgba(0,0,0,.06); display:flex; flex-wrap:wrap; gap:.4rem; min-height:58px; align-items:center }
.wa-reply .hint{ width:100%; font-size:.7rem; color:#667781; margin-bottom:.1rem }
.qr{ border:1px solid #1f5f4e; color:#1f5f4e; background:#fff; border-radius:999px; padding:.45rem .8rem; font:600 .78rem/1 var(--f-sans); cursor:pointer; transition:background .15s }
.qr:hover{ background:#e3f2ec }
.qr:disabled{ opacity:.4; cursor:default }
.wa-done{ font-size:.74rem; color:#1f5f4e; font-weight:600 }
@media (prefers-reduced-motion: reduce){ .bub.pop{ animation:none } }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1100px){
  .holders{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media (max-width: 960px){
  .hero{ grid-template-columns:minmax(0,1fr) }
  .hero-copy{ position:static }
  .band-head{ grid-template-columns:1fr; align-items:start }
  .statement{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .statement > div:nth-child(3){ border-left:0 }
  .statement > div:nth-child(n+3){ border-top:1px solid var(--rule-faint) }
  .cols, .cols.wa{ grid-template-columns:minmax(0,1fr) }
  .cols.wa .phone{ position:static; order:-1 }
  .shell{ grid-template-columns:1fr }
  .side{ position:relative; top:0; z-index:30; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; padding:.6rem 16px; gap:.4rem .8rem; border-right:0; border-bottom:3px double rgba(216,195,138,.35) }
  .side .s-mark{ padding:0 }
  .holder-plate{ margin:0 0 0 auto; padding:.35rem .6rem; border:0; background:transparent; text-align:right }
  .holder-plate .n, .holder-plate .s, .side-foot{ display:none }
  .switch{ margin-top:.25rem }
  .switch-list{ position:absolute; right:16px; z-index:40; background:var(--cloth); border:1px solid rgba(216,195,138,.35); border-radius:4px; padding:.4rem; min-width:240px; text-align:left }
  .side-nav{ width:100%; flex-direction:row; overflow-x:auto; padding:0; gap:4px; scrollbar-width:none }
  .side-nav a{ border-radius:3px; white-space:nowrap; padding:.5rem .7rem; font-size:.84rem }
  .side-nav a.on{ margin-right:0 }
}
@media (max-width: 720px){
  body{ font-size:15px }
  .cover nav a.nl{ display:none }
  .holders{ grid-template-columns:1fr 1fr }
  .holder{ min-height:220px }
  .loop{ display:block }
  .loop-hd{ display:none }
  .loop-row{ display:grid; grid-template-columns:3.2rem minmax(0,1fr); border-bottom:1px solid var(--rule-faint) }
  .loop-cell{ border-bottom:0; min-height:0 }
  .loop-cell.mid{ order:-1; border:0; border-right:1px dashed var(--rule-soft); place-items:start center; padding-top:1.1rem }
  .loop-cell.mid .go{ display:none }
  .loop-cell.l, .loop-cell.r{ padding:1rem 0 1rem 1rem }
  .loop-cell.r .t::after{ content:" · in the field"; font-weight:600; font-size:.8rem; color:var(--ok) }
  .loop-cell.empty{ display:none }
  .index-bar .seal{ display:none }
  .index{ display:flex; overflow-x:auto; scrollbar-width:none }
  .index a{ flex:none; min-width:92px }
  .page-head{ flex-direction:column; align-items:flex-start }
  .lrow{ grid-template-columns:minmax(0,1fr) auto 16px; }
  .lrow .st .stamp{ white-space:normal }
  .lrow .who{ grid-column:1; grid-row:1; overflow:hidden }
  .lrow .who .m{ white-space:normal; overflow:visible }
  .callout{ flex-wrap:wrap }
  .callout > .btn{ margin-left:0 }
  .lrow .dots{ display:none }
  .lrow .st{ grid-column:1/2; grid-row:2; justify-self:start }
  .lrow .chev{ grid-row:1/3; grid-column:3 }
  .lrow .amt{ grid-column:2; grid-row:1 }
  .lrow.simple{ grid-template-columns:1fr }
  .pb-head{ flex-direction:column; padding-left:1.4rem }
  .pb-t th:first-child, .pb-t td:first-child{ padding-left:1.3rem }
  .pb-t .c-ref{ display:none }
  .pb-t th.c-ref{ display:none }
  .pb-t .c-date{ width:4.5rem; font-size:.7rem }
  .pb-t .c-amt{ width:5rem }
  .pb-t .c-bal{ width:5.6rem }
  .pb-t td.c-amt, .pb-t td.c-bal{ font-size:.82rem }
  .pb-t td{ font-size:.7rem; padding:.55rem .35rem }
  .pb-t td .p-sub{ display:none }
  .pb-t td .p-main{ font-size:.84rem }
  .cover nav .btn{ padding:.6em .8em }
  .pb-foot{ flex-wrap:wrap; padding-left:1.4rem }
  .heat{ font-size:.9em }
  .heat .cell{ padding:.55rem .45rem; min-height:3.6rem }
  .heat .cell .v{ font-size:.86rem }
  .heat .cell .c{ display:none }
  .run li{ grid-template-columns:1.8rem minmax(0,1fr) }
  .run li .d{ grid-column:2 }
  .esc{ grid-template-columns:1fr }
  .esc .route{ text-align:left }
  .next{ grid-template-columns:1fr }
  .next .fwd{ border-left:0; border-top:1px dashed var(--rule-soft); text-align:left; padding-left:0 }
  .next .prev{ display:none }
  .phone-scr{ height:560px }
}

/* review fixes: holders with unequal emphasis, statement as a printed ledger, mobile index */
.holders{ grid-template-columns:repeat(6,minmax(0,1fr)) }
.holder.lead{ grid-column:span 2 }
.holder.lead .who{ font-size:1.8rem }
.holder .who{ margin-top:0 }
.holder .role{ margin-top:.55rem; font-size:.74rem }
.holder .blurb{ padding-top:1.4rem }
.holder .start{ position:absolute; top:1rem; right:1rem; z-index:1 }
.holder-plate .n{ margin-top:0 }
.holder-plate .k{ margin-top:.4rem }
.ledger-statement .pb-t td.c-amt{ font-size:1.25rem }
.ledger-statement .pb-t td .p-main{ font-size:1rem }
@media (max-width: 1100px){ .holders{ grid-template-columns:repeat(2,minmax(0,1fr)) } .holder.lead{ grid-column:1/-1 } }
@media (max-width: 720px){ .holders{ grid-template-columns:1fr 1fr } }
.holder .seal{ color:var(--foil); background:transparent; mix-blend-mode:normal; box-shadow:0 0 0 3px var(--cloth) inset, 0 0 0 4px currentColor inset }

/* On cloth the suite blue ring falls to ~2:1; a lifted blue keeps the same ring legible. */
.on-cloth :focus-visible{ outline-color:#9cc0ff }