/* ==========================================================================
   Prototype chrome — device frames, prototype bar, toaster, tour.
   Structural, brand-neutral. Copy into <POC>/assets/css/components.css and
   re-skin with the project's tokens. Requires the token contract.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Phone. A fixed 390x844 canvas scaled to always fit the viewport, so the
   whole device is visible without scrolling the browser. On a real handset
   the frame disappears and the app fills the screen.
   -------------------------------------------------------------------------- */
.phone-stage {
  --phone-fit: 1;
  height: 100dvh; overflow: hidden;
  display: grid; grid-template-columns: auto; place-content: center; place-items: center;
  column-gap: var(--s-10);
  padding: var(--s-4) var(--gutter) calc(var(--pocbar-h) + var(--s-4));
  background: var(--surface-2);
}
.phone {
  position: relative; flex: none;
  width: 390px; height: 844px;
  transform: scale(var(--phone-fit)); transform-origin: center;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  border: 10px solid #15130f; border-radius: 46px;
  box-shadow: 0 40px 80px -20px rgb(0 0 0 / 0.35), 0 0 0 1px rgb(0 0 0 / 0.08);
  overflow: hidden;
}
.phone::before {                      /* notch */
  content: ''; position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
  width: 120px; height: 34px; background: #15130f; border-radius: 20px; z-index: 5;
}
.phone-status {
  display: flex; align-items: center; justify-content: space-between;
  height: 54px; padding: 12px 28px 0; font-size: var(--t-14); font-weight: 600; flex: none;
}
.phone-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scrollbar-width: none; position: relative; display: flex; flex-direction: column;
}
.phone-scroll::-webkit-scrollbar { display: none; }
.phone-scroll > * { flex-shrink: 0; }   /* or horizontal card rows collapse */
.phone-tabbar {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: 84px; padding: 8px 8px 24px; flex: none;
  border-top: 1px solid var(--line); background: var(--surface);
}
.phone-tabbar a {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  font-size: 10.5px; font-weight: 600; color: var(--muted);
  border-radius: var(--r-ctl); min-height: 44px; text-decoration: none;
}
.phone-tabbar a .ico { width: 24px; height: 24px; }
.phone-tabbar a[aria-current="page"] { color: var(--primary); }
.phone-home {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  width: 134px; height: 5px; border-radius: 3px; background: var(--ink); opacity: .9; z-index: 4;
}
.phone { --app-gutter: var(--s-4); }

/* The narration column beside the device: what this screen proves. */
.phone-caption {
  display: none; align-self: center; max-width: 34ch; text-align: left;
  font-size: var(--t-14); line-height: 1.55; color: var(--ink-2);
}
.phone-caption strong {
  display: block; color: var(--ink); font-family: var(--font-display);
  font-size: var(--t-18); font-weight: 600; margin-bottom: var(--s-2);
}
@media (min-width: 1100px) {
  .phone-stage { grid-template-columns: auto minmax(260px, 34ch); }
  .phone-caption { display: block; }
}

/* Step the scale down so the device always fits the window height. */
@media (max-height: 940px) { .phone-stage { --phone-fit: .95; } }
@media (max-height: 880px) { .phone-stage { --phone-fit: .90; } }
@media (max-height: 820px) { .phone-stage { --phone-fit: .84; } }
@media (max-height: 770px) { .phone-stage { --phone-fit: .78; } }
@media (max-height: 700px) { .phone-stage { --phone-fit: .72; } }
@media (max-height: 640px) { .phone-stage { --phone-fit: .66; } }

/* On an actual handset the app IS the page. The frame, notch, status bar and
   home indicator disappear; the app fills the screen minus the prototype bar. */
@media (max-width: 600px) {
  .phone-stage { --phone-fit: 1; padding: 0; height: 100dvh; grid-template-columns: 1fr; background: var(--bg); }
  .phone { width: 100%; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; transform: none; }
  .phone::before, .phone-status, .phone-home { display: none; }
  .phone-caption { display: none; }
  /* The bar is fixed over the viewport, so the app must give up its height or
     the tab bar hides behind it. */
  body.has-pocbar .phone-stage,
  body.has-pocbar .phone { height: calc(100dvh - var(--pocbar-h)); }
  .phone-tabbar { padding-bottom: 8px; height: 64px; }
}

/* --------------------------------------------------------------------------
   Tablet — staff-facing landscape surfaces (kitchen display, POS, field app).
   -------------------------------------------------------------------------- */
.tablet-stage {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
  padding: var(--s-8) var(--gutter) calc(var(--pocbar-h) + var(--s-10));
  min-height: 100dvh; background: var(--surface-3);
}
.tablet {
  --tablet-fit: 1;
  position: relative; width: 1024px; height: 768px;
  transform: scale(var(--tablet-fit)); transform-origin: top center;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); border: 12px solid #15130f; border-radius: 28px;
  box-shadow: 0 40px 80px -24px rgb(0 0 0 / 0.35);
}
.tablet-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 1140px) { .tablet-stage { --tablet-fit: .82; } }
@media (max-width: 940px)  { .tablet-stage { --tablet-fit: .66; } }
@media (max-width: 760px)  { .tablet-stage { --tablet-fit: .50; } }

/* --------------------------------------------------------------------------
   Bottom sheet — the mobile-native alternative to a modal.
   -------------------------------------------------------------------------- */
.sheet-scrim {
  position: absolute; inset: 0; z-index: var(--z-layer);
  background: rgb(0 0 0 / 0.4); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease);
}
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-layer) + 1);
  max-height: 82%; display: flex; flex-direction: column;
  background: var(--bg); border-radius: var(--r-lg) var(--r-lg) 0 0;
  transform: translateY(100%); transition: transform var(--dur-3) var(--ease-out);
}
.sheet::before {
  content: ''; width: 36px; height: 4px; border-radius: 2px; background: var(--line-strong);
  margin: 10px auto 2px; flex: none;
}
.sheet-body { overflow-y: auto; padding: var(--s-4) var(--app-gutter) var(--s-6); }
.layer-open .sheet-scrim { opacity: 1; pointer-events: auto; }
.layer-open .sheet { transform: translateY(0); }

/* In-frame push notification — lands every time in a demo. */
.push {
  position: absolute; left: 8px; right: 8px; top: 58px; z-index: var(--z-toast);
  display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4);
  background: var(--bg); border-radius: var(--r-card); box-shadow: var(--e-3);
  transform: translateY(-140%); transition: transform var(--dur-3) var(--ease-out);
}
.push.in { transform: translateY(0); }

/* --------------------------------------------------------------------------
   Prototype bar — the client's remote control, on every page.
   -------------------------------------------------------------------------- */
.pocbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-pocbar);
  height: var(--pocbar-h); display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-4); font-size: var(--t-12);
  background: var(--drench); color: var(--on-drench);
  box-shadow: 0 -4px 20px rgb(0 0 0 / 0.2);
}
.pocbar .tagword {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  color: var(--accent); font-weight: 500;
}
.pocbar .roles { display: flex; gap: 2px; }
.pocbar .roles a {
  padding: 4px 10px; border-radius: var(--r-full); color: var(--on-drench-muted);
  text-decoration: none; white-space: nowrap;
}
.pocbar .roles a:hover { color: var(--on-drench); background: var(--drench-2); }
.pocbar .roles a[aria-current="true"] { background: var(--primary); color: var(--on-primary); }
.pocbar .mods { display: flex; gap: 4px; }
.pocbar .tag-module {
  font-family: var(--font-mono); font-size: 10px; padding: 2px 6px;
  border: 1px solid var(--drench-line); border-radius: var(--r-full);
  color: var(--on-drench-muted); text-decoration: none;
}
.pocbar .spacer { flex: 1; }
.pocbar button.link {
  background: none; border: 0; color: var(--on-drench-muted);
  font: inherit; cursor: pointer; padding: 4px 6px; white-space: nowrap;
}
.pocbar button.link:hover { color: var(--on-drench); }
body.has-pocbar { padding-bottom: 0; }
@media (max-width: 720px) {
  .pocbar .hide-sm { display: none; }
  /* Never let the bar clip its own controls: let it scroll instead. */
  .pocbar { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  .pocbar::-webkit-scrollbar { display: none; }
  .pocbar > * { flex: none; }
  .pocbar .spacer { flex: 1 0 var(--s-4); }
}
@media (max-width: 420px) { .pocbar .tagword { display: none; } }

/* Module map overlay: outlines the elements proving each module. */
body.show-sow [data-module] { outline: 1px dashed var(--accent-strong); outline-offset: 2px; position: relative; }
body.show-sow [data-module]::after {
  content: attr(data-module); position: absolute; top: -8px; right: -6px; z-index: 2;
  font-family: var(--font-mono); font-size: 9px; line-height: 1;
  padding: 3px 5px; border-radius: var(--r-full);
  background: var(--accent); color: var(--on-accent);
}

/* --------------------------------------------------------------------------
   Toaster
   -------------------------------------------------------------------------- */
.toaster {
  position: fixed; right: var(--s-4); bottom: calc(var(--pocbar-h) + var(--s-4));
  z-index: var(--z-toast); display: flex; flex-direction: column-reverse;
  gap: var(--s-2); pointer-events: none;
}
body:not(.has-pocbar) .toaster { bottom: var(--s-4); }
.toast {
  max-width: 42ch; padding: var(--s-3) var(--s-4);
  background: var(--drench); color: var(--on-drench);
  border-radius: var(--r-ctl); box-shadow: var(--e-3);
  font-size: var(--t-14); animation: toast-in var(--dur-3) var(--ease-out);
}
.toast.ok { background: var(--success); } .toast.warn { background: var(--warning); color: var(--on-accent); }
.toast.err { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   Guided tour
   -------------------------------------------------------------------------- */
.tour-scrim { position: fixed; inset: 0; z-index: var(--z-tour); background: rgb(0 0 0 / 0.55); }
.tour-hole { position: fixed; z-index: calc(var(--z-tour) + 1); border-radius: var(--r-card);
  box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.55), 0 0 0 3px var(--accent); pointer-events: none; }
.tour-pop {
  position: fixed; z-index: calc(var(--z-tour) + 2); max-width: 34ch;
  padding: var(--s-4); background: var(--bg); color: var(--ink);
  border-radius: var(--r-card); box-shadow: var(--e-3);
}
.tour-pop .step { font-family: var(--font-mono); font-size: var(--t-11); color: var(--muted); }
.tour-pop h3 { font-size: var(--t-16); margin: var(--s-1) 0 var(--s-2); }
.tour-pop p { font-size: var(--t-14); line-height: 1.5; color: var(--ink-2); }
.tour-pop .row { display: flex; gap: var(--s-2); justify-content: flex-end; margin-top: var(--s-4); }

/* Section reveal — set by prototype.js, off under reduced motion. */
.rv.pre { opacity: 0; transform: translateY(14px); }
.rv.in  { opacity: 1; transform: none; transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }

/* Accessibility floor */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: var(--s-3) var(--s-4); background: var(--primary); color: var(--on-primary);
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ==========================================================================
   TALLY component form. Editorial archetype: whitespace and hairlines divide,
   type does the work, nothing is boxed unless it is a control or a layer.
   Every radius, border, height and padding reads from tokens.css.
   ========================================================================== */

/* ---- Band: the one committed-colour surface in the product ---- */
.band{background:var(--drench);color:var(--on-drench);position:sticky;top:0;z-index:var(--z-sticky)}
.band-in{display:flex;align-items:center;gap:var(--s-4);height:56px;max-width:var(--container-wide);margin:0 auto;padding:0 var(--gutter)}
.wm{display:inline-flex;align-items:center;gap:var(--s-2);font:500 1.4rem/1 var(--font-display);letter-spacing:-0.02em;color:inherit;text-decoration:none}
.wm svg{width:20px;height:20px}
.band .wm:hover{color:#fff}
.band-proj{display:flex;align-items:center;gap:var(--s-2);height:var(--h-ctl-sm);padding:0 var(--s-3);border-radius:var(--r-ctl);border:var(--bw) solid var(--drench-line);background:transparent;color:var(--on-drench);font-size:var(--t-13);font-weight:500;max-width:200px}
.band-proj span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.band-proj:hover{background:var(--drench-2)}
.band-nav{display:flex;gap:var(--s-1);overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.band-nav::-webkit-scrollbar{display:none}
.band-nav a{display:flex;align-items:center;height:56px;padding:0 10px;color:var(--on-drench-muted);text-decoration:none;font-size:13.5px;white-space:nowrap;border-bottom:2px solid transparent;border-top:2px solid transparent;transition:color var(--dur-1) ease}
.band-nav a:hover{color:#fff}
.band-nav a[aria-current="page"]{color:#fff;font-weight:600;border-bottom-color:var(--accent)}
.band-tools{display:flex;align-items:center;gap:var(--s-2);flex:none}
.band-ico{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-ctl);color:var(--on-drench-muted);background:none;border:0;text-decoration:none}
.band-ico:hover{background:var(--drench-2);color:#fff}
.band-ico .dot{position:absolute;top:7px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-full);background:var(--accent);color:var(--on-accent);font-size:10px;font-weight:700;display:grid;place-items:center}
.who{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-13);line-height:1.2;color:var(--on-drench)}
.who small{display:block;color:var(--on-drench-muted);font-size:var(--t-12)}
@media (max-width:900px){.who div,.band-proj{display:none}.band-in{gap:var(--s-3)}}

.avatar{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--r-full);background:var(--primary-soft-2);color:var(--primary-strong);font-size:var(--t-12);font-weight:700;flex:none}
.band .avatar{background:var(--drench-2);color:#fff}
.avatar.sm{width:24px;height:24px;font-size:10px}

/* ---- Page head ---- */
.page{max-width:var(--container-wide);margin:0 auto;padding:var(--s-7) var(--gutter) var(--s-9)}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-5);flex-wrap:wrap;margin-bottom:var(--s-7)}
.page-head h1{font-size:clamp(1.75rem,1.4rem + 1.2vw,2.4rem);max-width:24ch}
.page-head .lede{margin-top:var(--s-2);color:var(--muted);max-width:64ch}
.crumbs{font-size:var(--t-13);color:var(--muted);margin-bottom:var(--s-2)}
.crumbs a{color:inherit;text-decoration:none}.crumbs a:hover{color:var(--ink);text-decoration:underline}
.tabs{display:flex;gap:var(--s-5);border-bottom:var(--rule);margin-bottom:var(--s-6);overflow-x:auto;scrollbar-width:none}
.tabs a,.tabs button{padding:var(--s-3) 0;color:var(--muted);text-decoration:none;font-size:var(--t-14);white-space:nowrap;border:0;background:none;border-bottom:2px solid transparent;margin-bottom:-1px;min-height:44px}
.tabs a:hover,.tabs button:hover{color:var(--ink)}
.tabs [aria-current="page"],.tabs [aria-selected="true"]{color:var(--ink);font-weight:600;border-bottom-color:var(--primary)}

/* ---- Section: hairline above, serif title, no box ---- */
.sec{border-top:var(--rule);padding-top:var(--s-5)}
.sec+.sec{margin-top:var(--s-7)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-4)}
.sec-head h2{font-size:var(--t-22)}
.sec-head h3{font-size:var(--t-18)}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);height:var(--h-ctl);padding:0 var(--s-4);border-radius:var(--r-ctl);border:var(--bw) solid transparent;font:600 var(--t-14)/1 var(--font-body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform 140ms var(--ease-out),background-color 160ms ease,border-color 160ms ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-strong);color:var(--on-primary)}
.btn-quiet{background:var(--bg);border-color:var(--line-strong);color:var(--ink)}
.btn-quiet:hover{border-color:var(--ink);color:var(--ink)}
.btn-ghost{background:none;color:var(--primary-strong);padding:0 var(--s-2)}
.btn-ghost:hover{background:var(--primary-soft)}
.btn-danger{background:var(--bg);border-color:var(--danger);color:var(--danger-ink)}
.btn-danger:hover{background:var(--danger-soft)}
.btn-sm{height:var(--h-ctl-sm);padding:0 var(--s-3);font-size:var(--t-13)}
.btn-lg{height:48px;padding:0 var(--s-5);font-size:var(--t-15)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.btn.is-loading{color:transparent;position:relative;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid var(--on-primary);border-right-color:transparent;animation:spin .6s linear infinite}
.btn-quiet.is-loading::after{border-color:var(--ink);border-right-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}
.drench .btn-quiet,.band .btn-quiet{background:transparent;border-color:var(--drench-line);color:var(--on-drench)}

/* ---- Pills: state vocabulary. Always icon + word, never colour alone ---- */
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-full);font-size:var(--t-12);font-weight:600;white-space:nowrap;background:var(--surface-2);color:var(--ink-2)}
.pill .ico{width:13px;height:13px}
.pill.ok{background:var(--success-soft);color:var(--success-ink)}
.pill.warn{background:var(--warning-soft);color:var(--warning-ink)}
.pill.bad{background:var(--danger-soft);color:var(--danger-ink)}
.pill.info{background:var(--info-soft);color:var(--info-ink)}
.pill.brand{background:var(--primary-soft);color:var(--primary-strong)}
.tag{display:inline-block;font-size:var(--t-12);color:var(--muted);border:var(--rule);border-radius:var(--r-ctl);padding:1px 6px}

/* ---- Figures: a ruled row of numbers, not hero-metric cards ---- */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border-top:var(--rule);border-bottom:var(--rule)}
.fig{padding:var(--s-4) var(--s-5) var(--s-4) 0}
.fig+.fig{padding-left:var(--s-5);border-left:var(--rule)}
.fig dt{font-size:var(--t-13);color:var(--muted)}
.fig dd{font:500 var(--t-28)/1.15 var(--font-display);letter-spacing:-0.02em;margin-top:2px;font-variant-numeric:tabular-nums}
.fig dd small{font:400 var(--t-13) var(--font-body);color:var(--muted);letter-spacing:0;margin-left:4px}
@media (max-width:700px){.figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s-5)}.figs .fig{padding:var(--s-4) 0}.figs .fig+.fig{border-left:0;padding-left:0}}

/* ---- Key/value rows ---- */
.kv{display:grid;grid-template-columns:minmax(120px,34%) 1fr;gap:0 var(--s-4);font-size:var(--t-14)}
.kv dt{color:var(--muted);padding:var(--s-2) 0;border-bottom:var(--rule)}
.kv dd{padding:var(--s-2) 0;border-bottom:var(--rule)}

/* ---- Tables: hairline between rows, nothing around ---- */
.tbl th{font-size:var(--t-12);font-weight:600;color:var(--muted);text-align:left;padding:0 var(--s-3);height:40px;border-bottom:var(--bw) solid var(--line-strong);white-space:nowrap}
.tbl td{padding:var(--s-2) var(--s-3);height:var(--h-row);border-bottom:var(--row-rule);font-size:var(--t-14);vertical-align:middle}
.tbl th:first-child,.tbl td:first-child{padding-left:0}.tbl th:last-child,.tbl td:last-child{padding-right:0}
.tbl td.r,.tbl th.r{text-align:right}
.tbl tr[data-href],.tbl tr.click{cursor:pointer}
.tbl tbody tr:hover td{background:var(--surface)}
.tbl tr.group td{font:500 var(--t-16) var(--font-display);padding-top:var(--s-5);height:auto;border-bottom-color:var(--line-strong)}
.tbl tr.group:hover td{background:none}
.tbl .sub{display:block;font-size:var(--t-12);color:var(--muted)}
.tbl-wrap{overflow-x:auto}.tbl-wrap .tbl{min-width:720px}
th[data-sort]{cursor:pointer}th[data-sort]:hover{color:var(--ink)}

/* ---- Progress ---- */
.bar{display:block;height:4px;background:var(--surface-3);border-radius:var(--r-full);overflow:hidden}
.bar i{display:block;height:100%;background:var(--primary);border-radius:inherit;transition:width 700ms var(--ease-out)}
.bar.ok i{background:var(--success)}.bar.bad i{background:var(--danger)}
.bar-cell{display:flex;align-items:center;gap:var(--s-2);min-width:120px}.bar-cell .bar{flex:1}
.ms-scale{position:relative;padding-bottom:34px;margin-top:var(--s-4)}
.ms-scale .bar{height:6px}
.ms-scale .tick{position:absolute;top:10px;transform:translateX(-50%);font-size:var(--t-12);color:var(--muted);white-space:nowrap;text-align:center}
.ms-scale .tick::before{content:"";display:block;width:1px;height:6px;background:var(--line-strong);margin:0 auto 3px}
.ms-scale .tick.hit{color:var(--ink);font-weight:600}
.ms-scale .tick:last-child{transform:translateX(-100%)}.ms-scale .tick:last-child::before{margin-right:0}
.big-pct{font:500 clamp(2.6rem,2rem + 2vw,3.6rem)/1 var(--font-display);letter-spacing:-0.025em;font-variant-numeric:tabular-nums}

/* ---- Callout: tinted ground + leading icon. Never a side stripe ---- */
.callout{display:flex;gap:var(--s-4);align-items:center;justify-content:space-between;flex-wrap:wrap;padding:var(--s-4) var(--s-5);border-radius:var(--r-card);background:var(--primary-soft)}
.callout.warn{background:var(--warning-soft)}.callout.bad{background:var(--danger-soft)}.callout.ok{background:var(--success-soft)}.callout.plain{background:var(--surface)}
.callout p{max-width:60ch;font-size:var(--t-14)}
.callout .lead{display:flex;gap:var(--s-3);align-items:flex-start;flex:1;min-width:240px}
.callout .lead>.ico{margin-top:2px;color:var(--primary-strong)}
.callout.warn .lead>.ico{color:var(--warning-ink)}.callout.bad .lead>.ico{color:var(--danger-ink)}.callout.ok .lead>.ico{color:var(--success-ink)}

/* ---- Split view: the navigation archetype. Record left, entry right ---- */
.split{display:grid;grid-template-columns:minmax(320px,5fr) minmax(0,7fr);border-top:var(--rule);min-height:60vh}
.split-list{border-right:var(--rule);max-height:calc(100vh - 56px - var(--pocbar-h));overflow-y:auto;position:sticky;top:56px}
.split-detail{padding:var(--s-6) 0 var(--s-8) var(--s-7);min-width:0}
@media (max-width:960px){.split{grid-template-columns:minmax(0,1fr)}.split-list{position:static;max-height:420px;border-right:0;border-bottom:var(--rule)}.split-detail{padding:var(--s-6) 0}}
.li{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);padding:var(--s-4) var(--s-4) var(--s-4) var(--s-3);border-bottom:var(--rule);cursor:pointer;width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0;transition:background-color var(--dur-1) ease}
.li:hover{background:var(--surface)}
.li[aria-selected="true"]{background:var(--primary-soft)}
.li.is-new{animation:li-in 600ms var(--ease-out)}
@keyframes li-in{from{background:var(--primary-soft-2);opacity:0;transform:translateY(-6px)}}
.src{width:32px;height:32px;border-radius:var(--r-ctl);display:grid;place-items:center;background:var(--surface-2);color:var(--ink-2);flex:none}
.src .ico{width:16px;height:16px}
.src.photo{background:var(--primary-soft);color:var(--primary-strong)}
.src.whatsapp{background:var(--success-soft);color:var(--success-ink)}
.src.email{background:var(--info-soft);color:var(--info-ink)}
.src.system{background:var(--surface-3)}
.li-head{display:flex;gap:var(--s-2);align-items:baseline;justify-content:space-between;font-size:var(--t-13);color:var(--muted)}
.li-head b{color:var(--ink);font-size:var(--t-14);font-weight:600}
.li-text{margin-top:2px;font-size:var(--t-14);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.li-foot{margin-top:var(--s-2);display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center;font-size:var(--t-12);color:var(--muted)}
.day{padding:var(--s-2) var(--s-3);font-size:var(--t-12);font-weight:600;color:var(--muted);background:var(--surface);border-bottom:var(--rule);position:sticky;top:0;z-index:1}
.quote{font:400 var(--t-22)/1.4 var(--font-display);letter-spacing:-0.01em;text-wrap:pretty;max-width:36ch}
.crumb em{font-style:normal;color:var(--muted);padding:0 4px}
.shot{border-radius:var(--r-card);overflow:hidden;position:relative;background:var(--surface-2);max-width:520px}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover}
.shot .stamp{position:absolute;left:var(--s-2);bottom:var(--s-2);background:oklch(0.2 0 0/.8);color:#fff;font-size:var(--t-12);padding:2px 8px;border-radius:2px;font-variant-numeric:tabular-nums}
.thumb{width:56px;height:42px;border-radius:var(--r-ctl);object-fit:cover}

/* ---- Forms ---- */
.field{display:grid;gap:6px}
.field label,.label{font-size:var(--t-13);font-weight:600}
.field .hint{font-size:var(--t-12);color:var(--muted)}
.field .err{font-size:var(--t-12);color:var(--danger-ink);display:flex;gap:4px;align-items:center}
.input,select.input,textarea.input{width:100%;height:var(--h-ctl);padding:0 var(--s-3);border:var(--bw) solid var(--line-strong);border-radius:var(--r-ctl);background:var(--bg);transition:border-color var(--dur-1) ease}
textarea.input{height:auto;min-height:96px;padding:var(--s-3);resize:vertical}
.input::placeholder{color:var(--muted)}
.input:hover{border-color:var(--muted)}
.input:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary)}
.input.is-error{border-color:var(--danger)}
.input[disabled]{background:var(--surface);color:var(--muted)}
.search{position:relative}.search .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);width:16px;height:16px}.search .input{padding-left:36px}
.check{display:flex;gap:var(--s-2);align-items:center;font-size:var(--t-14);min-height:32px;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--primary)}
.toggle{appearance:none;width:40px;height:24px;border-radius:var(--r-full);background:var(--surface-3);position:relative;cursor:pointer;transition:background-color var(--dur-2) ease;flex:none;border:0;margin:0}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--e-1);transition:transform var(--dur-2) var(--ease-out)}
.toggle:checked{background:var(--primary)}.toggle:checked::after{transform:translateX(16px)}
.seg{display:inline-flex;border:var(--bw) solid var(--line-strong);border-radius:var(--r-ctl);overflow:hidden}
.seg button{height:calc(var(--h-ctl-sm) + 2px);padding:0 var(--s-3);border:0;background:var(--bg);font-size:var(--t-13);color:var(--muted)}
.seg button+button{border-left:var(--bw) solid var(--line-strong)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg);font-weight:600}
.chips{display:flex;gap:var(--s-2);flex-wrap:wrap}
.chip{height:var(--h-ctl-sm);padding:0 var(--s-3);border-radius:var(--r-full);border:var(--bw) solid var(--line-strong);background:var(--bg);font-size:var(--t-13);display:inline-flex;align-items:center;gap:6px}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.drop{display:grid;place-items:center;gap:var(--s-2);text-align:center;padding:var(--s-7) var(--s-5);border:1px dashed var(--line-strong);border-radius:var(--r-card);color:var(--muted);cursor:pointer;transition:background-color var(--dur-1) ease,border-color var(--dur-1) ease}
.drop:hover{background:var(--surface);border-color:var(--primary)}
.drop b{color:var(--ink)}
.filebox{display:flex;gap:var(--s-3);align-items:center;padding:var(--s-3) var(--s-4);border:var(--rule);border-radius:var(--r-card)}

/* ---- Steps ---- */
.steps{display:flex;gap:var(--s-2);counter-reset:s;margin-bottom:var(--s-7);overflow-x:auto}
.steps li{flex:1;min-width:140px;counter-increment:s;padding-top:var(--s-3);border-top:2px solid var(--line);font-size:var(--t-13);color:var(--muted)}
.steps li::before{content:counter(s) ". ";font-variant-numeric:tabular-nums}
.steps li.done{border-color:var(--primary);color:var(--ink)}
.steps li.now{border-color:var(--ink);color:var(--ink);font-weight:600}

/* ---- Layers ---- */
dialog.modal{border:0;padding:0;border-radius:var(--r-lg);box-shadow:var(--elev-modal);width:min(560px,calc(100vw - 32px));color:var(--ink);background:var(--bg)}
dialog.modal::backdrop{background:oklch(0.2 0.02 40/.45)}
dialog.modal[open]{animation:modal-in 220ms var(--ease-out)}
@keyframes modal-in{from{opacity:0;transform:translateY(8px) scale(.98)}}
.modal-head{padding:var(--s-5) var(--s-5) 0;display:flex;justify-content:space-between;gap:var(--s-3);align-items:flex-start}
.modal-body{padding:var(--s-4) var(--s-5)}
.modal-foot{padding:var(--s-4) var(--s-5) var(--s-5);display:flex;justify-content:flex-end;gap:var(--s-2)}
.x{width:32px;height:32px;border:0;background:none;border-radius:var(--r-ctl);display:grid;place-items:center;color:var(--muted)}.x:hover{background:var(--surface-2);color:var(--ink)}
.menu{position:fixed;z-index:var(--z-layer);min-width:260px;background:var(--bg);border:var(--rule);border-radius:var(--r-card);box-shadow:var(--elev-pop);padding:var(--s-1);transform-origin:top left;animation:menu-in 160ms var(--ease-out)}
@keyframes menu-in{from{opacity:0;transform:scale(.96)}}
.menu a,.menu button{display:flex;width:100%;gap:var(--s-3);align-items:center;padding:var(--s-2) var(--s-3);border:0;background:none;border-radius:var(--r-ctl);text-align:left;text-decoration:none;color:var(--ink);font-size:var(--t-14);min-height:40px}
.menu a:hover,.menu button:hover{background:var(--surface)}
.menu small{display:block;color:var(--muted);font-size:var(--t-12)}

/* ---- States ---- */
.empty{text-align:center;padding:var(--s-8) var(--s-5);color:var(--muted);display:grid;justify-items:center;gap:var(--s-3)}
.empty .ico{width:32px;height:32px;color:var(--muted-2)}
.empty h3{color:var(--ink)}
.empty p{max-width:44ch}
.skel{border-radius:var(--r-ctl);background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:skel 1.2s linear infinite;height:14px}
@keyframes skel{to{background-position:-200% 0}}
.denied{max-width:520px;margin:var(--s-9) auto;text-align:center;display:grid;gap:var(--s-3);justify-items:center}

/* ---- Chat (WhatsApp group mirror) ---- */
.chat{display:grid;gap:var(--s-2);padding:var(--s-4)}
.msg{max-width:82%;padding:var(--s-2) var(--s-3);border-radius:var(--r-card);background:var(--surface-2);font-size:var(--t-14);justify-self:start}
.msg.me{justify-self:end;background:var(--success-soft)}
.msg b{display:block;font-size:var(--t-12);color:var(--primary-strong)}
.msg time{display:block;text-align:right;font-size:10.5px;color:var(--muted);margin-top:2px}
.msg .ai{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line-strong);font-size:var(--t-12);color:var(--ink-2);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.msg img{border-radius:var(--r-ctl);margin-bottom:4px;width:220px;aspect-ratio:4/3;object-fit:cover}

/* ---- Demo story (tour) ---- */
.story{position:fixed;left:var(--s-4);bottom:calc(var(--pocbar-h) + var(--s-4));z-index:var(--z-toast);width:min(340px,calc(100vw - 32px));background:var(--bg);border:var(--rule);border-radius:var(--r-card);box-shadow:var(--elev-pop);padding:var(--s-4);font-size:var(--t-14)}
.story .step{font-size:var(--t-12);color:var(--muted)}
.story h3{font-size:var(--t-16);margin:2px 0 var(--s-2)}
.story .row{margin-top:var(--s-3);justify-content:space-between}

.toast{font-family:var(--font-body)}
.toast.ok{background:var(--success-ink);color:#fff}.toast.warn{background:var(--warning-ink);color:#fff}.toast.err{background:var(--danger-ink);color:#fff}
.pocbar .tagword{font-family:var(--font-body);font-weight:700}
.pocbar .tag-module{font-family:var(--font-body)}

/* ---- Dashboard: the client's overview ---- */
.decision{padding:var(--s-5) var(--s-6);border-radius:var(--r-card);background:var(--primary-soft)}
.decision.ok{background:var(--success-soft)}.decision.plain{background:var(--surface)}
.decision .top{display:flex;justify-content:space-between;gap:var(--s-5);align-items:baseline;flex-wrap:wrap}
.decision h2{font-size:var(--t-22)}
.decision .amt{font:500 clamp(1.9rem,1.5rem + 1.4vw,2.6rem)/1 var(--font-display);letter-spacing:-0.025em;font-variant-numeric:tabular-nums;white-space:nowrap}
.decision p{max-width:70ch;margin-top:var(--s-2);font-size:var(--t-15)}
.decision .why{display:flex;gap:var(--s-2) var(--s-5);flex-wrap:wrap;margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--primary-soft-2);font-size:var(--t-13);color:var(--ink-2)}
.decision.ok .why{border-top-color:oklch(0.88 0.06 155)}
.decision .why b{font-variant-numeric:tabular-nums}
.decision .row{margin-top:var(--s-4)}
.mbar{display:flex;height:20px;border-radius:var(--r-full);overflow:hidden;background:var(--surface-3)}
.mbar i{display:block;height:100%;transition:width 700ms var(--ease-out)}
.mbar i+i{box-shadow:inset 1px 0 0 var(--bg)}
.mkey{display:flex;gap:var(--s-2) var(--s-5);flex-wrap:wrap;margin-top:var(--s-3);font-size:var(--t-13);color:var(--muted)}
.mkey span{display:flex;gap:7px;align-items:baseline}
.mkey i{width:9px;height:9px;border-radius:2px;flex:none;position:relative;top:-1px}
.mkey b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
.read{font-size:var(--t-16);line-height:1.5;max-width:64ch}
.read b{font-variant-numeric:tabular-nums}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:var(--s-4) var(--s-5)}
.tiles dt{font-size:var(--t-13);color:var(--muted)}
.tiles dd{font:500 var(--t-22)/1.1 var(--font-display);font-variant-numeric:tabular-nums;margin-top:2px}
.dash-cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-7) var(--s-8);align-items:start}
@media (max-width:1000px){.dash-cols{grid-template-columns:minmax(0,1fr)}}
.figs.stack .fig dd small{display:block;margin-left:0;margin-top:3px}
.figs.stack .fig dd{font-size:var(--t-22)}

/* ==========================================================================
   THE DASHBOARD — a picture of the building, not a statement of account.
   Three encodings, all meaning something: width is money, height is how much
   of it is built, depth of colour reinforces the height. Clay for work,
   steel for money, status colours only where something is wrong.
   ========================================================================== */
body.dash .page-head{display:none}
body.dash .page{padding-top:var(--s-5)}

/* ---- Masthead ---- */
.mast{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--drench);color:var(--on-drench);
  padding:clamp(24px,3.4vw,40px);display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,360px);gap:var(--s-6) var(--s-8);align-items:start}
.mast::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,transparent 0 47px,oklch(1 0 0/.045) 47px 48px),repeating-linear-gradient(0deg,transparent 0 47px,oklch(1 0 0/.045) 47px 48px)}
.mast > *{position:relative}
.mast-eyebrow{font-size:var(--t-13);color:var(--on-drench-muted)}
.mast-eyebrow a{color:inherit;text-decoration:none}.mast-eyebrow a:hover{color:#fff}
.mast h1{font-size:var(--t-22);font-weight:500;color:#fff;margin:var(--s-1) 0 var(--s-5)}
.mega-row{display:flex;align-items:flex-end;gap:var(--s-5);flex-wrap:wrap}
.mega{font:500 clamp(3.6rem,8vw,7rem)/0.86 var(--font-display);letter-spacing:-0.035em;color:#fff;font-variant-numeric:tabular-nums;
  animation:mega-in 700ms var(--ease-out) both}
.mega sup{font-size:.34em;vertical-align:super;letter-spacing:0;margin-left:.06em;color:var(--accent)}
@keyframes mega-in{from{opacity:0;transform:translateY(14px)}}
.mega-side{padding-bottom:.7rem;max-width:26ch}
.mega-side p{font-size:var(--t-16);color:#fff}
.delta{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s-2);padding:4px 11px;border-radius:var(--r-full);
  background:oklch(1 0 0/.1);color:var(--steel-lift);font-size:var(--t-13);font-weight:600}
.delta.behind{color:var(--accent)}
.mast-figs{display:flex;flex-wrap:wrap;gap:var(--s-5) var(--s-8);margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--drench-line)}
.mast-figs div{min-width:96px}
.mast-figs dt{font-size:var(--t-12);color:var(--on-drench-muted)}
.mast-figs dd{font:500 var(--t-28)/1.1 var(--font-display);color:#fff;font-variant-numeric:tabular-nums;margin-top:3px}
.mast-figs dd small{font:400 var(--t-12) var(--font-body);color:var(--on-drench-muted);margin-left:5px}
.mast-figs dd.warn{color:var(--accent)}

/* the one thing to act on, lifted out of the dark onto paper */
.call{background:var(--bg);color:var(--ink);border-radius:var(--r-card);padding:var(--s-5);box-shadow:0 18px 40px -22px oklch(0.1 0.03 40/.7)}
.call .k{font-size:var(--t-12);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary)}
.call .k.muted-k{color:var(--muted)}
.call h2{font-size:var(--t-18);margin:var(--s-2) 0}
.call .amt{font:500 clamp(2rem,3vw,2.6rem)/1 var(--font-display);letter-spacing:-0.03em;font-variant-numeric:tabular-nums;margin:var(--s-3) 0}
.call p{font-size:var(--t-14);color:var(--ink-2)}
.call .row{margin-top:var(--s-4)}
.call .btn{width:100%}
.call .why{margin-top:var(--s-4);padding-top:var(--s-3);border-top:var(--rule);display:grid;gap:5px;font-size:var(--t-13)}
.call .why span{display:flex;justify-content:space-between;gap:var(--s-3)}
.call .why b{font-variant-numeric:tabular-nums}
@media (max-width:900px){.mast{grid-template-columns:minmax(0,1fr)}}

/* ---- The skyline: one column per BOQ section ---- */
.sky{display:flex;align-items:flex-end;gap:clamp(4px,0.7vw,10px);padding-top:var(--s-5)}
.sky-col{flex:var(--w) 1 0;min-width:74px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;border-radius:var(--r-ctl);
  padding:6px 4px;transition:background-color var(--dur-1) ease}
.sky-col:hover{background:var(--surface)}
.sky-pct{font:500 var(--t-18)/1 var(--font-display);font-variant-numeric:tabular-nums;text-align:center;color:var(--ink)}
.sky-bar{height:clamp(120px,17vw,190px);border-radius:3px;background:var(--primary-soft);display:flex;align-items:flex-end;overflow:hidden;position:relative}
.sky-fill{width:100%;border-radius:3px;background:var(--tone);transform-origin:bottom;animation:sky-rise 750ms var(--ease-out) both;animation-delay:calc(var(--i) * 55ms)}
@keyframes sky-rise{from{transform:scaleY(0.02)}}
.sky-col.late .sky-bar{box-shadow:inset 0 0 0 1.5px var(--danger)}
.sky-name{font-size:var(--t-13);font-weight:600;text-align:center;line-height:1.25}
.sky-val{font-size:var(--t-12);color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.sky-flag{display:block;text-align:center;font-size:var(--t-12);font-weight:600;color:var(--danger-ink)}
.sky-key{display:flex;gap:var(--s-5);flex-wrap:wrap;margin-top:var(--s-5);font-size:var(--t-13);color:var(--muted)}
.sky-key span{display:flex;align-items:center;gap:7px}
.sky-key i{width:22px;height:10px;border-radius:2px;flex:none}

/* ---- Money track: the contract as a route, not a ledger ---- */
.track{position:relative;margin:var(--s-8) 0 0;padding-bottom:86px;min-width:620px}
.track-rail{height:10px;border-radius:var(--r-full);background:var(--surface-2);overflow:hidden}
.track-rail i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--c-3),var(--primary));
  animation:rail 900ms var(--ease-out) both}
@keyframes rail{from{width:0 !important}}
.tnode{position:absolute;top:0;transform:translateX(-50%);text-align:center;width:130px}
/* the end nodes align to the rail ends so nothing is clipped when the track scrolls */
.tnode.first{transform:none;text-align:left}
.tnode.first .dot{margin:-4px auto 10px 0}
.tnode.last{transform:translateX(-100%);text-align:right}
.tnode.last .dot{margin:-4px 0 10px auto}
.tnode .dot{display:block;width:18px;height:18px;border-radius:50%;margin:-4px auto 10px;background:var(--bg);box-shadow:inset 0 0 0 2px var(--line-strong)}
.tnode[data-s="paid"] .dot{background:var(--primary);box-shadow:inset 0 0 0 2px var(--primary)}
.tnode[data-s="live"] .dot{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft),inset 0 0 0 2px var(--primary);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px oklch(0.86 0.06 60/.35),inset 0 0 0 2px var(--primary)}}
.tnode b{display:block;font:500 var(--t-18)/1.1 var(--font-display);font-variant-numeric:tabular-nums}
.tnode span{display:block;font-size:var(--t-12);color:var(--muted);margin-top:3px}
.tnode[data-s="locked"] b{color:var(--muted-2)}
.tnode em{font-style:normal;display:block;font-size:var(--t-12);font-weight:600;color:var(--primary);margin-top:2px}

/* ---- Built against paid ---- */
.vs{display:grid;gap:var(--s-3)}
.vs-row{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:var(--s-3);align-items:center}
.vs-lab{font-size:var(--t-13);font-weight:600}
.vs-bar{height:22px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.vs-bar i{display:block;height:100%;border-radius:3px;animation:rail 800ms var(--ease-out) both}
.vs-row b{font:500 var(--t-18) var(--font-display);font-variant-numeric:tabular-nums;min-width:62px;text-align:right}
.vs-note{margin-top:var(--s-3);font-size:var(--t-14);color:var(--ink-2);max-width:56ch}

/* ---- Attention: a numeral you cannot miss, then the words ---- */
.attn a{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:var(--s-4);align-items:center;padding:var(--s-4) 0;
  border-top:var(--rule);text-decoration:none;color:inherit}
.attn a:last-child{border-bottom:var(--rule)}
.attn a:hover{background:var(--surface)}
.attn .n{font:500 2.2rem/1 var(--font-display);text-align:right;font-variant-numeric:tabular-nums;color:var(--danger-ink)}
.attn a[data-k="warn"] .n{color:var(--warning-ink)}
.attn a[data-k="brand"] .n{color:var(--primary)}
.attn .n small{display:block;font:400 var(--t-12) var(--font-body);color:var(--muted)}
.attn b{display:block;font-size:var(--t-15)}
.attn span{font-size:var(--t-13);color:var(--muted)}

/* ---- Pulse ---- */
.pulse-figs{display:flex;gap:var(--s-6) var(--s-7);flex-wrap:wrap;margin-bottom:var(--s-4)}
.pulse-figs dt{font-size:var(--t-12);color:var(--muted)}
.pulse-figs dd{font:500 var(--t-22)/1.1 var(--font-display);font-variant-numeric:tabular-nums;margin-top:2px}
.mast-eyebrow{display:flex;align-items:center;gap:var(--s-2) var(--s-4);flex-wrap:wrap}
.mast-eyebrow .grow{flex:1;min-width:0}
.mast-eyebrow a{display:inline-flex;align-items:center;gap:5px;text-decoration:none}
.attn a .pill{white-space:nowrap}
@media (max-width:640px){
  .mast{padding:var(--s-5) var(--s-4)}
  .mega-row{gap:var(--s-2)}
  .mega-side{padding-bottom:0}
  .mast-figs{margin-top:var(--s-5);padding-top:var(--s-4);gap:var(--s-4) var(--s-6)}
  .attn a{grid-template-columns:52px minmax(0,1fr);gap:var(--s-3)}
  .attn a .ico,.attn a .pill{grid-column:2}
  .vs-row{grid-template-columns:62px minmax(0,1fr) auto}
}

/* ---- The slim masthead: every working page opens the way the dashboard does,
        one step lighter. Clay tint instead of the drench, figures instead of a
        mega numeral. Hierarchy, not repetition. ---- */
.mast.slim{background:var(--primary-soft);color:var(--ink);grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s-4) var(--s-6);padding:clamp(18px,2.2vw,26px) clamp(18px,2.6vw,30px)}
.mast.slim::before{background-image:repeating-linear-gradient(90deg,transparent 0 47px,oklch(0.48 0.13 40/.05) 47px 48px),repeating-linear-gradient(0deg,transparent 0 47px,oklch(0.48 0.13 40/.05) 47px 48px)}
.mast.slim h1{color:var(--ink);font-size:clamp(1.55rem,1.2rem + 1.1vw,2.05rem);margin:var(--s-1) 0 0}
.mast.slim .lede{margin-top:var(--s-2);color:var(--ink-2);max-width:64ch;font-size:var(--t-15)}
.mast.slim .mast-eyebrow{color:var(--muted)}
.mast.slim .mast-eyebrow a{color:var(--primary-strong)}
.mast.slim .mast-figs{border-top-color:var(--primary-soft-2);margin-top:var(--s-5);padding-top:var(--s-4);gap:var(--s-4) var(--s-7)}
.mast.slim .mast-figs dt{color:var(--muted)}
.mast.slim .mast-figs dd{color:var(--primary-strong)}
.mast.slim .mast-figs dd small{color:var(--muted)}
.mast.slim .mast-figs dd.flat{color:var(--ink)}
.mast.slim .mast-figs dd.bad{color:var(--danger-ink)}
.mast.slim .mast-figs dd.warn{color:var(--warning-ink)}
.mast.slim .mast-figs dd.steel{color:var(--steel)}
.mast-acts{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:flex-start}
.mast + .sec,.mast + .read,.mast + .split,.mast + .tbl-wrap,.mast + .tabs,.mast + .cols,.mast + .dash-cols,.mast + .row,.mast + div,.mast + ol,.mast + section{margin-top:var(--s-7)}
@media (max-width:760px){.mast.slim{grid-template-columns:minmax(0,1fr)}.mast-acts{width:100%}}