/* ==========================================================================
   BLACKBOX - Executive Intelligence Portal
   ==========================================================================
   Register: an instrument that a person reads, not a database that a person
   queries. Two surfaces carry the whole system:

     BOARD   warm graphite. The machine. Charts, tables, live sources.
     SHEET   cream paper. The reading. Whatever a human is meant to act on
             is printed on paper, the way a brief lands on a desk.

   That duality is the design. It is also why the portal does not read as a
   wall of dark boxes: the important thing on every page is light, large and
   typeset, and the plumbing is dark, small and beneath it.

   Token trick: `.sheet` redefines --chalk/--mute/--dim/--line/--gold, so every
   component nested inside a sheet re-colours itself for paper with no extra
   rules. Do not hardcode a colour where a token exists.
   ========================================================================== */

:root{
  /* board */
  --board:#15140F; --panel:#1D1B15; --panel-2:#232019; --raise:#2A2620;
  --chalk:#F6F2E9; --mute:#B9B2A4; --dim:#8A8376;
  --line:rgba(246,242,233,.09); --line-2:rgba(246,242,233,.17);

  /* paper */
  --paper:#EFE9DA; --paper-2:#E6DFCD;
  --ink:#191712; --ink-mute:#5A5344; --ink-dim:#756E60;
  --ink-line:rgba(25,23,18,.13); --ink-line-2:rgba(25,23,18,.24);

  /* accents */
  --gold:#D2A44E; --gold-2:#A9822F; --gold-soft:rgba(210,164,78,.13);
  --gold-ink:#8A6520;
  --sage:#89A377; --amber:#D2A44E; --rust:#C4705E;
  --sage-ink:#4C6A3D; --amber-ink:#8A6520; --rust-ink:#9A4433;

  --serif:'Lora',Georgia,serif; --sans:'Inter',system-ui,-apple-system,sans-serif;
  --rail:280px; --bar:60px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --r:8px; --r-sm:3px;
}

*,*::before,*::after{box-sizing:border-box}
/* a component that sets its own display out-specifies the UA [hidden] rule,
   which is how the capability filter silently stopped filtering */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  /* isolate so the texture below blends against the page and not the root
     compositing layer, which is what makes a blended layer paint solid black
     on machines that will not composite it */
  isolation:isolate;
  margin:0;background:var(--board);color:var(--chalk);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.42;
  background:url(../assets/tex/board_texture.webp) center/cover;mix-blend-mode:overlay;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:500;margin:0;line-height:1.18}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
::selection{background:rgba(210,164,78,.28)}

/* ---------- primitives ---------------------------------------------------- */
.lbl{
  font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-2);margin:0 0 10px;
}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.rule{height:1px;background:var(--line);border:0;margin:0}
.muted{color:var(--mute)}
.dim{color:var(--dim)}
.serif-it{font-family:var(--serif);font-style:italic}
.tone-ok{color:var(--sage)}.tone-warn{color:var(--amber)}.tone-bad{color:var(--rust)}
.hr-space{height:clamp(18px,2.4vw,30px)}
.nowrap{white-space:nowrap}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;background:var(--gold);color:#181409;border-radius:var(--r-sm);
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  transition:filter .2s var(--ease),border-color .2s var(--ease);
}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:none;color:var(--chalk);border:1px solid var(--line-2)}
.btn.ghost:hover{border-color:var(--gold-2);filter:none}
.btn.sm{padding:9px 16px;font-size:11px}
.btn[disabled]{opacity:.5;pointer-events:none}

.pill{
  display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;padding:3px 9px;border-radius:2px;
  border:1px solid var(--line-2);color:var(--dim);max-width:100%;
}
.pill.live{color:var(--sage);border-color:rgba(137,163,119,.42)}
.pill.warn{color:var(--amber);border-color:rgba(210,164,78,.42)}
.pill.bad{color:var(--rust);border-color:rgba(196,112,94,.42)}
.pill.soon{color:var(--dim)}
.pill.gold{color:var(--gold);border-color:rgba(210,164,78,.42)}
/* a pill used as a link is a control, and a control needs a real hit area */
a.pill{padding:9px 13px;transition:border-color .18s var(--ease),color .18s var(--ease)}
a.pill:hover{color:var(--chalk);border-color:var(--gold-2)}

/* ==========================================================================
   LOGIN
   ========================================================================== */
.login-wrap{position:relative;z-index:1;min-height:100svh;display:grid;grid-template-columns:1.08fr .92fr}
.login-art{position:relative;overflow:hidden;border-right:1px solid var(--line)}
.login-art .lg-art{position:absolute;inset:0;width:100%;height:100%}
.login-art::after{
  content:"";position:absolute;inset:auto 0 0 0;height:46%;pointer-events:none;z-index:1;
  background:linear-gradient(to top,rgba(21,20,15,.92) 0%,rgba(21,20,15,.55) 45%,rgba(21,20,15,0) 100%);
}
.lg-over{
  position:absolute;left:clamp(28px,4vw,58px);bottom:clamp(28px,4vw,54px);right:clamp(28px,10vw,22%);
  z-index:2;
}
.lg-over .k{
  font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-2);margin:0 0 10px;
}
.lg-over p{
  font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.55vw,22px);
  color:var(--mute);line-height:1.5;margin:0;max-width:30ch;
}

.login-panel{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(32px,5vw,84px);max-width:660px;position:relative;z-index:1;
}
.brand{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:clamp(30px,4.6vw,54px)}
.brand b{font-family:var(--serif);font-size:26px;font-weight:500;letter-spacing:.15em}
.brand span{font-size:10.5px;font-weight:600;letter-spacing:.26em;color:var(--gold);text-transform:uppercase}
.login-panel h1{font-size:clamp(31px,3.5vw,46px);margin-bottom:18px;letter-spacing:-.015em;max-width:14ch}
.login-panel .sub{color:var(--mute);max-width:44ch;margin:0 0 clamp(28px,3.6vw,44px);font-size:16.5px;line-height:1.55}
.priv{font-size:14.5px;color:var(--mute);margin:0 0 14px}
.cred{position:relative}
.cred input{
  width:100%;padding:16px 17px;background:var(--panel);color:var(--chalk);
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  font-family:var(--sans);font-size:15.5px;letter-spacing:.02em;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.cred input::placeholder{color:var(--dim)}
.cred input:focus{outline:none;border-color:var(--gold-2);background:var(--panel-2)}
.key-btn{width:100%;margin-top:16px;padding:15px 26px}
.login-err{color:var(--rust);font-size:13.5px;min-height:20px;margin:6px 0 0}
.sb-note{margin:clamp(24px,3.2vw,38px) 0 0;padding-top:18px;border-top:1px solid var(--line);
  font-size:12px;color:var(--dim);line-height:1.65}
@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-4px)}}
.shake{animation:shake .4s ease}
body.unlocking .login-art{transition:opacity .7s var(--ease);opacity:.35}
@media (max-width:940px){
  .login-wrap{grid-template-columns:1fr}
  .login-art{min-height:300px;border-right:0;border-bottom:1px solid var(--line)}
  .login-panel{max-width:none}
  .lg-over{right:clamp(28px,4vw,58px)}
  .lg-over p{font-size:16px}
}
@media (max-width:680px){
  /* 300px of artwork cannot carry three lines of caption across the top of it,
     and the same words are in the headline directly underneath */
  .lg-over{display:none}
  .login-art{min-height:250px}
  .login-art::after{height:34%}
  /* the tagline sat flush against the panel padding with nothing to spare */
  .brand{gap:4px 12px}
  .brand span{letter-spacing:.2em;flex-basis:100%}
}

/* ==========================================================================
   LOGIN ART
   Same chalk treatment as the marketing site: feTurbulence into
   feDisplacementMap. Strokes are butt-capped and slightly uneven, because a
   round cap on a gold bar is what made the old version read as a vector
   dashboard rather than something drawn.
   ========================================================================== */
.lg-glow{filter:blur(30px);opacity:.42}
.lg-dust circle{fill:rgba(246,242,233,.55)}

.lg-ring{fill:none;stroke:rgba(246,242,233,.17);stroke-width:1.3;stroke-linecap:butt;
  stroke-dasharray:9 14 3 11 6 16;transform-origin:470px 470px;transform-box:view-box}
.lg-ring.r1{animation:lgspin 120s linear infinite}
.lg-ring.r2{animation:lgspin 90s linear infinite reverse}
.lg-ring.r3{animation:lgspin 150s linear infinite}
.lg-ring.r4{animation:lgspin 110s linear infinite reverse}
.lg-ring.r5{animation:lgspin 190s linear infinite}
@keyframes lgspin{to{transform:rotate(360deg)}}

.lg-tick{stroke:rgba(246,242,233,.24);stroke-width:1.4;stroke-linecap:butt}
.lg-tick-l{stroke:rgba(246,242,233,.46);stroke-width:2;stroke-linecap:butt}
.lg-bar{stroke:rgba(200,154,70,.42);stroke-linecap:butt;
  animation:lgflick 3.6s ease-in-out infinite}
@keyframes lgflick{0%,100%{opacity:.14}50%{opacity:.72}}

.lg-spoke{stroke:rgba(246,242,233,.07);stroke-width:1.2;stroke-dasharray:2 14;stroke-linecap:butt}
.lg-trace{fill:none;stroke:rgba(246,242,233,.2);stroke-width:1.9;stroke-linecap:butt}

/* a broken run of chalk marks travelling inward, not a solid capsule */
.lg-pkt{fill:none;stroke:#C89A46;stroke-width:3;stroke-linecap:butt;opacity:.78;
  stroke-dashoffset:var(--len);
  animation:lgflow var(--dur,3.4s) linear infinite;animation-delay:var(--dl,0s)}
.lg-pkt.dim{stroke:rgba(246,242,233,.6);stroke-width:2.2;opacity:.6}
@keyframes lgflow{to{stroke-dashoffset:0}}

.lg-node{fill:none;stroke:rgba(246,242,233,.72);stroke-width:2.1;stroke-linecap:butt;
  animation:lgblip 4.4s ease-in-out infinite}
.lg-node.g{stroke:#C89A46;stroke-width:2.6}
@keyframes lgblip{0%,100%{opacity:.4}45%{opacity:1}}
.lg-halo{fill:none;stroke:#C89A46;stroke-width:1.4;stroke-linecap:butt;
  transform-origin:center;transform-box:fill-box;animation:lghalo 4.4s ease-out infinite}
@keyframes lghalo{0%{opacity:.55;transform:scale(.4)}70%{opacity:0}100%{opacity:0;transform:scale(1.7)}}
.lg-lab{font-family:var(--sans);font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;fill:rgba(246,242,233,.55)}

.lg-sweep{transform-origin:470px 470px;transform-box:view-box;animation:lgspin 5.5s linear infinite}
.lg-arm{stroke:#C89A46;stroke-width:1.2;opacity:.24}

.lg-core{fill:none;stroke:rgba(246,242,233,.5);stroke-width:1.6;stroke-linecap:butt}
.lg-core-r{fill:none;stroke:rgba(246,242,233,.26);stroke-width:1.2;stroke-dasharray:5 9 2 7;
  stroke-linecap:butt;transform-origin:470px 470px;transform-box:view-box;
  animation:lgspin 26s linear infinite reverse}
.lg-pulse{fill:none;stroke:#C89A46;stroke-width:1.6;stroke-linecap:butt;
  transform-origin:470px 470px;transform-box:view-box;animation:lgpulse 3.4s ease-out infinite}
@keyframes lgpulse{0%{opacity:.6;transform:scale(.72)}75%{opacity:0}100%{opacity:0;transform:scale(1.55)}}
.lg-core-t{font-family:var(--serif);font-style:italic;font-size:15px;fill:rgba(246,242,233,.74)}

.lg-mote{fill:rgba(246,242,233,.45);animation:lgmote 15s ease-in-out infinite}
@keyframes lgmote{0%{transform:translate3d(0,0,0);opacity:0}20%{opacity:.45}
  80%{opacity:.3}100%{transform:translate3d(22px,-60px,0);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .lg-ring,.lg-sweep,.lg-node,.lg-halo,.lg-mote,.lg-pkt,.lg-bar,.lg-pulse,.lg-core-r{animation:none}
  .lg-halo,.lg-mote,.lg-pulse{opacity:.2}
  .lg-pkt{stroke-dashoffset:calc(var(--len) / 2)}
}

/* ==========================================================================
   APP SHELL
   ========================================================================== */
.app{position:relative;z-index:1;min-height:100svh;display:grid;grid-template-columns:var(--rail) 1fr}
.rail{
  position:sticky;top:0;height:100svh;border-right:1px solid var(--line);
  background:rgba(21,20,15,.78);backdrop-filter:blur(12px);
  display:flex;flex-direction:column;padding:22px 0;overflow-y:auto;
}
.rail .brand{padding:0 22px;margin-bottom:24px}
.rail .brand b{font-size:20px}
.nav-group{padding:0 12px;margin-bottom:6px}
.nav-group.sep{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.nav-group > p{
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin:0 0 8px;padding:0 10px;
}
.nav-a{
  display:flex;align-items:center;gap:11px;padding:10px;border-radius:var(--r-sm);
  font-size:14px;color:var(--mute);transition:background .18s var(--ease),color .18s var(--ease);
}
.nav-t{display:flex;flex-direction:column;min-width:0;gap:1px}
.nav-t b{font-weight:500;font-size:14.5px;color:inherit}
.nav-t em{font-style:normal;font-size:11.5px;line-height:1.35;color:var(--dim)}
.nav-a[aria-current="page"] .nav-t em{color:var(--mute)}
.nav-a:hover{background:rgba(246,242,233,.05);color:var(--chalk)}
.nav-a[aria-current="page"]{background:var(--gold-soft);color:var(--chalk);box-shadow:inset 2px 0 0 var(--gold)}
.nav-a[aria-current="page"] .ico{color:var(--gold)}
.nav-a .ico{width:16px;height:16px;flex:none;color:var(--dim);align-self:flex-start;margin-top:3px}
.nav-a .tag{
  margin-left:auto;align-self:flex-start;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  color:var(--gold-2);border:1px solid var(--line-2);border-radius:2px;padding:1px 5px;
}
.nav-a .tag.hot{color:var(--rust);border-color:rgba(196,112,94,.45)}
.rail-foot{margin-top:auto;padding:16px 22px 0;border-top:1px solid var(--line);font-size:12px;color:var(--dim)}
.rail-foot .who{display:flex;align-items:center;gap:9px;margin-bottom:8px;color:var(--mute)}
.rail-foot .dot{width:6px;height:6px;border-radius:50%;background:var(--sage);flex:none}

.main{min-width:0;display:flex;flex-direction:column}
.bar{
  position:sticky;top:0;z-index:5;height:var(--bar);flex:none;
  display:flex;align-items:center;gap:16px;padding:0 clamp(20px,3vw,40px);
  border-bottom:1px solid var(--line);background:rgba(21,20,15,.9);backdrop-filter:blur(12px);
}
.bar h1{font-size:19px}
.bar .crumb{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.bar .spacer{margin-left:auto}
.bar .stamp{font-size:12px;color:var(--dim)}
.burger{display:none;width:38px;height:38px;border:1px solid var(--line-2);border-radius:var(--r-sm);align-items:center;justify-content:center}
.burger span{display:block;width:16px;height:1.5px;background:var(--chalk);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--chalk)}
.burger span::before{top:-5px}.burger span::after{top:5px}

.page{padding:clamp(20px,2.6vw,36px);max-width:1600px;width:100%}
@media (max-width:1000px){
  .app{grid-template-columns:1fr}
  .rail{position:fixed;inset:0 auto 0 0;width:min(84vw,320px);z-index:40;
    transform:translateX(-102%);transition:transform .3s var(--ease);background:var(--board)}
  .rail.open{transform:none}
  .burger{display:flex}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:35;opacity:0;pointer-events:none;transition:opacity .3s}
  .scrim.on{opacity:1;pointer-events:auto}
}

/* ==========================================================================
   SURFACES
   ========================================================================== */
.grid{display:grid;gap:clamp(12px,1.3vw,18px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g-2-1{grid-template-columns:1.9fr 1fr}
.g-1-2{grid-template-columns:1fr 1.9fr}
.g-3-2{grid-template-columns:1.5fr 1fr}
.g-2-1 > *,.g-1-2 > *,.g-3-2 > *{min-width:0}
@media (max-width:1240px){.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1080px){.g-2-1,.g-1-2,.g-3-2{grid-template-columns:1fr}}
@media (max-width:860px){.g2,.g3{grid-template-columns:1fr}}
@media (max-width:520px){.g4{grid-template-columns:1fr}}

.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(16px,1.7vw,24px);min-width:0;
}
.panel.raised{background:var(--panel-2)}
.panel.flush{padding:0;overflow:hidden}
.panel.quiet{background:none;border:0;border-top:1px solid var(--line-2);border-radius:0;padding:22px 0 0}
.panel > h3{font-size:17px;margin-bottom:5px}
.panel > .cap,.sheet > .cap{font-size:14.5px;color:var(--mute);margin:0 0 18px;max-width:58ch;line-height:1.55}
.panel-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.panel-head h3{font-size:17px}
.panel-head .spacer{margin-left:auto}

/* --- the paper surface. Everything a human acts on is printed. ---------- */
.sheet{
  isolation:isolate;
  position:relative;border-radius:var(--r);padding:clamp(20px,2.4vw,34px);min-width:0;
  background:var(--paper);color:var(--ink);
  box-shadow:0 1px 0 rgba(246,242,233,.05),0 18px 44px -22px rgba(0,0,0,.65);
  /* every nested component re-colours itself through these */
  --chalk:var(--ink); --mute:var(--ink-mute); --dim:var(--ink-dim);
  --line:var(--ink-line); --line-2:var(--ink-line-2);
  --gold:var(--gold-ink); --gold-2:var(--gold-ink); --gold-soft:rgba(138,101,32,.1);
  --sage:var(--sage-ink); --amber:var(--amber-ink); --rust:var(--rust-ink);
  --panel:var(--paper-2); --panel-2:var(--paper-2);
}
.sheet::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:var(--r);
  background:url(../assets/tex/paper_texture.webp) center/cover;opacity:.4;mix-blend-mode:multiply;
}
.sheet > *{position:relative;z-index:1}
.sheet .btn{background:var(--ink);color:var(--paper)}
.sheet .btn.ghost{background:none;color:var(--ink);border:1px solid var(--ink-line-2)}

/* masthead across the top of a sheet */
.mast{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1.5px solid var(--ink);margin-bottom:clamp(18px,2vw,26px)}
.mast b{font-family:var(--serif);font-size:15px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.mast .spacer{margin-left:auto}
.mast span{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}

/* ==========================================================================
   PAGE HEAD - the statement, not a heading
   ========================================================================== */
.page-head{margin-bottom:clamp(16px,2vw,26px);display:grid;grid-template-columns:1fr auto;gap:14px 34px;align-items:end}
.page-head h2{font-size:clamp(26px,3vw,40px);letter-spacing:-.015em;margin-bottom:9px}
.page-head p{color:var(--mute);max-width:58ch;margin:0;font-size:16px;line-height:1.55}
.page-head .aside{text-align:right;font-size:12.5px;color:var(--dim);line-height:1.5}
.page-head .aside b{display:block;font-family:var(--serif);font-size:22px;color:var(--chalk);font-weight:500}
@media (max-width:760px){.page-head{grid-template-columns:1fr}.page-head .aside{text-align:left}}

/* ==========================================================================
   THE READ - one large typeset sentence. The point of the page.
   ========================================================================== */
.read{font-family:var(--serif);font-size:clamp(21px,2.35vw,32px);line-height:1.3;letter-spacing:-.01em;margin:0}
.read em{font-style:italic;color:var(--gold)}
.read-sub{margin:16px 0 0;font-size:16.5px;line-height:1.6;color:var(--ink-mute);max-width:56ch}
.byline{margin:0 0 14px;font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-2)}

/* ==========================================================================
   NUMBERS - a rule-separated strip, never a row of boxes
   ========================================================================== */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.kpis.k1{grid-template-columns:1fr}
.kpis.k2{grid-template-columns:repeat(2,1fr)}
.kpis.k3{grid-template-columns:repeat(3,1fr)}
.kpis.k4{grid-template-columns:repeat(4,1fr)}
.kpis.k5{grid-template-columns:repeat(5,1fr)}
.kpi{padding:18px 22px;border-left:1px solid var(--line);min-width:0}
.kpi:first-child{border-left:0;padding-left:0}
.kpi-k{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:0 0 8px}
.kpi-n{font-family:var(--serif);font-size:clamp(30px,3.3vw,44px);line-height:1;font-variant-numeric:tabular-nums;display:block}
.kpi-n small{font-family:var(--sans);font-size:14px;color:var(--dim);margin-left:3px;letter-spacing:.02em}
.kpi-d{font-size:12.5px;color:var(--mute);margin:9px 0 0;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.kpi-spark{margin-top:10px}
.trend{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.trend.up{color:var(--sage)}.trend.down{color:var(--rust)}.trend.flat{color:var(--dim)}
@media (max-width:1240px){.kpis,.kpis.k4,.kpis.k5{grid-template-columns:repeat(2,1fr)}
  .kpis.k1{grid-template-columns:1fr}
.kpis.k2{grid-template-columns:repeat(2,1fr)}
.kpis.k3{grid-template-columns:repeat(3,1fr)}
  .kpi:nth-child(odd){border-left:0;padding-left:0}
  .kpi:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:660px){.kpis,.kpis.k3,.kpis.k4,.kpis.k5{grid-template-columns:1fr}
  .kpi{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .kpi:first-child{border-top:0}}

/* ==========================================================================
   ENTRY - a finding, set like an article rather than dropped in a card
   ========================================================================== */
.entries{counter-reset:e}
.entry{display:grid;grid-template-columns:54px 1fr;gap:0 22px;
  padding:clamp(24px,2.8vw,36px) 0;border-top:1px solid var(--line)}
.entry > .act{grid-column:2}
@media (min-width:1200px){
  .sheet .entry{grid-template-columns:54px minmax(0,1.05fr) minmax(320px,.95fr);gap:0 clamp(24px,2.6vw,44px)}
  .sheet .entry > .act{grid-column:3;grid-row:1;margin-top:0;align-self:start}
  .sheet .entry p,.sheet .entry .act li,.sheet .entry .worth{max-width:none}
}
.entry:first-child{border-top:0;padding-top:4px}
.entry-i{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--gold-2);
  line-height:1.5;font-variant-numeric:tabular-nums}
.entry-b{min-width:0}
.entry-meta{display:flex;align-items:center;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.sev{font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  padding:3px 8px;border-radius:2px;border:1px solid currentColor}
.when{font-size:11.5px;color:var(--dim);letter-spacing:.04em}
.entry h4{font-size:clamp(18px,1.75vw,23px);margin-bottom:9px;letter-spacing:-.01em}
.entry p{margin:0 0 14px;color:var(--chalk);font-size:16.5px;line-height:1.6;max-width:60ch}
.entry p:last-child{margin-bottom:0}
.entry .lead-p{color:var(--chalk);font-size:16.5px}
@media (max-width:640px){.entry{grid-template-columns:1fr;gap:0}
  .entry-i{margin-bottom:6px;font-size:15px}}

/* evidence: the numbers behind the sentence, laid out as a receipt.
   A grid, not a flex wrap: wrapping left an orphan cell with a stray rule. */
.ev{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 0 14px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ev-i{padding:12px 16px;border-left:1px solid var(--line);min-width:0}
.ev-i:first-child{border-left:0;padding-left:0}
@media (max-width:760px){.ev{grid-template-columns:repeat(2,1fr)}
  .ev-i:nth-child(odd){border-left:0;padding-left:0}
  .ev-i:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:420px){.ev{grid-template-columns:1fr}
  .ev-i{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .ev-i:first-child{border-top:0}}
.ev-n{font-family:var(--serif);font-size:19px;line-height:1.1;font-variant-numeric:tabular-nums;display:block}
.ev-k{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:5px;display:block}

/* the act block: what to do, by when, and what it is worth */
.act{border-left:2px solid var(--gold);padding:16px 0 4px 20px;margin-top:8px}
.act-h{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-2);margin:0 0 9px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.act-h em{font-style:normal;color:var(--dim);letter-spacing:.1em}
.act ol{margin:0;padding:0 0 0 20px;list-style:decimal}
.act li{font-size:16px;line-height:1.5;color:var(--chalk);margin-bottom:10px;padding-left:4px;max-width:56ch}
.act li:last-child{margin-bottom:0}
.act li b{font-weight:600;color:var(--gold)}
.act .worth{margin:14px 0 0;font-size:15px;line-height:1.5;color:var(--gold-2);max-width:56ch}
.act .worth b{font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:10.5px;
  color:var(--dim);margin-right:8px}

/* ==========================================================================
   METERS
   ========================================================================== */
.meters{display:grid;gap:15px}
.meter-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px;font-size:13.5px}
.meter-h b{font-weight:500;color:var(--chalk)}
.meter-h span{font-variant-numeric:tabular-nums;color:var(--mute);font-size:13px}
.meter-bar{position:relative;height:9px;border-radius:5px;background:rgba(246,242,233,.07);overflow:hidden}
.sheet .meter-bar{background:rgba(25,23,18,.09)}
.meter-fill{position:absolute;top:0;bottom:0;left:0;border-radius:5px;background:var(--gold)}
.meter-fill.ok{background:var(--sage)}.meter-fill.warn{background:var(--amber)}.meter-fill.bad{background:var(--rust)}
.meter-mark{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--line-2)}
.meter-note{font-size:12.5px;color:var(--dim);margin:6px 0 0}

/* bipolar meter, for scenario deltas */
.bip{position:relative;height:11px;border-radius:2px;background:rgba(246,242,233,.05)}
.bip .zero{position:absolute;top:-2px;bottom:-2px;left:50%;width:1px;background:var(--line-2)}
.bip i{position:absolute;top:0;bottom:0;border-radius:2px;background:var(--gold);opacity:.9}
.bip i.neg{background:rgba(246,242,233,.34)}

/* ==========================================================================
   DIAL - composite score
   ========================================================================== */
.dial{display:block;width:100%;max-width:212px;height:auto;margin:0 auto}
.dial .trk{fill:none;stroke:rgba(246,242,233,.09);stroke-width:9;stroke-linecap:round}
.sheet .dial .trk{stroke:rgba(25,23,18,.1)}
.dial .val{fill:none;stroke:var(--gold);stroke-width:9;stroke-linecap:round;
  transition:stroke-dashoffset 1s var(--ease)}
.dial .val.ok{stroke:var(--sage)}.dial .val.warn{stroke:var(--amber)}.dial .val.bad{stroke:var(--rust)}
.dial .n{font-family:var(--serif);font-size:52px;fill:var(--chalk);font-variant-numeric:tabular-nums}
.dial .u{font-family:var(--sans);font-size:11px;letter-spacing:.2em;fill:var(--dim);text-transform:uppercase}
.dial-cap{text-align:center;margin:12px 0 0;font-size:13px;color:var(--mute)}

/* ==========================================================================
   TABLES
   ========================================================================== */
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);padding:0 14px 9px;border-bottom:1px solid var(--line-2)}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--mute);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child,.tbl th:first-child{padding-left:0}
.tbl td:last-child,.tbl th:last-child{padding-right:0}
.tbl td b{color:var(--chalk);font-weight:500;font-family:var(--serif);font-size:15px}
.tbl td .sm{font-size:12.5px;display:block;color:var(--dim);margin-top:2px}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;color:var(--chalk);white-space:nowrap}
.tbl.compact td b{white-space:nowrap}
.tbl .num.tone-ok{color:var(--sage)}
.tbl .num.tone-warn{color:var(--amber)}
.tbl .num.tone-bad{color:var(--rust)}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-scroll table{min-width:580px}

/* matrix: a grid people can read down as well as across */
.mx{width:100%;border-collapse:collapse;font-size:14.5px}
.mx th{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  padding:0 12px 10px;text-align:left;border-bottom:1px solid var(--line-2)}
.mx th:first-child{padding-left:0}
.mx td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
.mx td:first-child{padding-left:0;width:16%}
.mx td b{font-family:var(--serif);font-size:15px;font-weight:500;color:var(--chalk)}
.mx .c{color:var(--mute)}
.mx .c em{display:block;font-style:normal;font-size:11.5px;color:var(--dim);margin-top:3px}
.mx tr:hover td{background:rgba(246,242,233,.022)}

/* ==========================================================================
   CAPABILITY ROWS
   ========================================================================== */
.caps{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(20px,2.6vw,40px)}
@media (max-width:1080px){.caps{grid-template-columns:1fr}}
.cap-row{display:grid;grid-template-columns:38px 1fr;gap:0 14px;padding:16px 0;border-top:1px solid var(--line)}
.cap-row .no{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--gold-2);padding-top:2px}
.cap-row h4{font-size:16px;margin-bottom:4px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cap-row p{margin:0;font-size:15px;line-height:1.5;color:var(--mute);max-width:52ch}
.cap-row .said{margin-top:9px;color:var(--dim);font-size:14px;line-height:1.5;max-width:52ch;
  padding-left:13px;border-left:1px solid var(--line-2)}
@media (max-width:520px){.cap-row{grid-template-columns:1fr}.cap-row .no{padding-top:0;margin-bottom:2px}}

/* ==========================================================================
   DASHBOARD
   An executive opens this to answer three questions: is anything wrong, what
   is it costing me, what do I do. Those answers have to fit on one screen.
   Detail lives one click away, not stacked underneath.
   ========================================================================== */

/* the one thing that matters on this page */
.hero{
  display:grid;grid-template-columns:1fr auto;gap:clamp(20px,3vw,52px);align-items:center;
  background:var(--paper);color:var(--ink);border-radius:var(--r);
  padding:clamp(22px,2.8vw,38px) clamp(24px,3vw,42px);position:relative;
  --chalk:var(--ink); --mute:var(--ink-mute); --dim:var(--ink-dim);
  --line:var(--ink-line); --line-2:var(--ink-line-2); --gold:var(--gold-ink); --gold-2:var(--gold-ink);
  --sage:var(--sage-ink); --amber:var(--amber-ink); --rust:var(--rust-ink);
  box-shadow:0 18px 44px -22px rgba(0,0,0,.6);
}
.hero-k{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-ink);margin:0 0 12px}
.hero-line{font-family:var(--serif);font-size:clamp(24px,2.9vw,38px);line-height:1.18;
  letter-spacing:-.015em;margin:0;max-width:22ch}
.hero-line em{font-style:italic;color:var(--gold-ink)}
.hero-sub{margin:14px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink-mute);max-width:52ch}
.hero-num{text-align:right;padding-left:clamp(20px,3vw,44px);border-left:1px solid var(--ink-line);
  align-self:stretch;display:flex;flex-direction:column;justify-content:center;white-space:nowrap}
.hero-n{font-family:var(--serif);font-size:clamp(34px,4.4vw,60px);line-height:1;
  font-variant-numeric:tabular-nums;display:block}
.hero-nk{font-size:12.5px;color:var(--ink-dim);margin-top:8px;display:block;letter-spacing:.02em}
@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .hero-num{text-align:left;padding:18px 0 0;border-left:0;border-top:1px solid var(--ink-line)}
}

/* scannable numbers, one row */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px)}
@media (max-width:1080px){.tiles{grid-template-columns:repeat(2,1fr)}}
/* Two across on a handset rather than one. Four stacked tiles is four
   screens of scrolling before the reader reaches the findings, which are the
   reason the page exists. */
@media (max-width:520px){.tiles{grid-template-columns:repeat(2,1fr)}
  .tile{padding:14px 13px}
  .tile-n{font-size:clamp(26px,7vw,34px)}}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(14px,1.5vw,20px);min-width:0}
.tile-k{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin:0 0 10px}
.tile-n{font-family:var(--serif);font-size:clamp(26px,2.8vw,36px);line-height:1;
  font-variant-numeric:tabular-nums;display:block}
.tile-n small{font-family:var(--sans);font-size:14px;color:var(--dim);margin-left:2px}
.tile-d{font-size:12.5px;color:var(--mute);margin:8px 0 0;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}

/* a finding at a glance. The full version lives on Findings. */
.fcards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.2vw,16px)}
@media (max-width:960px){.fcards{grid-template-columns:1fr}}
.fcard{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--dim);
  border-radius:var(--r);padding:clamp(16px,1.7vw,22px);display:flex;flex-direction:column;min-width:0}
.fcard.bad{border-left-color:var(--rust)}
.fcard.warn{border-left-color:var(--amber)}
.fcard-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.fcard h4{font-size:17.5px;line-height:1.25;margin:0 0 8px}
.fcard p{margin:0 0 16px;font-size:14.5px;line-height:1.5;color:var(--mute);max-width:44ch}
.fcard-foot{margin-top:auto;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-top:12px;border-top:1px solid var(--line)}
.fcard-cost{font-family:var(--serif);font-size:20px;font-variant-numeric:tabular-nums;color:var(--chalk)}
.fcard-cost em{font-style:normal;font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-left:8px}
.fcard-go{margin-left:auto;font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap}
.fcard-go:hover{color:var(--chalk)}

/* compact side panels so the rail does not become a second article */
.mini-rows{display:grid;gap:0}
.mini-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.mini-row:first-child{border-top:0}
.mini-row b{font-weight:400;color:var(--chalk);min-width:0}
.mini-row span{margin-left:auto;font-size:12.5px;color:var(--dim);white-space:nowrap}
.mini-row i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--dim)}
.mini-row i.ok{background:var(--sage)}.mini-row i.warn{background:var(--amber)}.mini-row i.bad{background:var(--rust)}

/* ==========================================================================
   FLOW
   What goes in, what happens to it, what comes out. Without this the portal
   has three different lists (buckets, areas, capabilities) and no stated
   relationship between them, which is what made it hard to follow.
   ========================================================================== */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line-2)}
.flow-s{position:relative;padding:22px 30px 22px 0;border-left:1px solid var(--line);min-width:0}
.flow-s:first-child{border-left:0;padding-left:0}
.flow-s:not(:first-child){padding-left:30px}
/* the chevron between stages */
.flow-s:not(:first-child)::before{
  content:"";position:absolute;left:-6px;top:34px;width:10px;height:10px;
  border-top:1.5px solid var(--gold-2);border-right:1.5px solid var(--gold-2);
  transform:rotate(45deg);background:var(--panel);
}
.sheet .flow-s:not(:first-child)::before{background:var(--paper)}
.flow-k{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-2);margin:0 0 10px}
.flow-n{font-family:var(--serif);font-size:clamp(26px,2.6vw,34px);line-height:1;display:block;margin-bottom:4px}
.flow-t{font-size:14px;color:var(--mute);margin:0 0 12px;display:block}
.flow-l{margin:0;padding:0;list-style:none}
.flow-l li{font-size:13.5px;color:var(--dim);padding:3px 0;line-height:1.4}
.flow-l li b{color:var(--chalk);font-weight:400}
@media (max-width:1080px){
  .flow{grid-template-columns:repeat(2,1fr)}
  .flow-s:nth-child(odd){border-left:0;padding-left:0}
  .flow-s:nth-child(odd)::before{display:none}
  .flow-s:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:620px){
  .flow{grid-template-columns:1fr}
  .flow-s{border-left:0;padding:20px 0;border-top:1px solid var(--line)}
  .flow-s:first-child{border-top:0;padding-top:6px}
  .flow-s:not(:first-child){padding-left:0}
  .flow-s::before{display:none}
}

/* ==========================================================================
   CAPABILITIES
   Seven areas it reads, nine things it does with them. The old page was
   sixteen identical rows carrying sixteen identical ON badges, which is a
   list, not a design, and it hid the only distinction that matters.
   ========================================================================== */
.reads{display:grid;gap:0}
.read-row{display:grid;grid-template-columns:30px 1fr;gap:0 14px;align-items:baseline;
  padding:13px 0;border-top:1px solid var(--line)}
.read-row:first-child{border-top:0}
.read-row .no{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--gold-2)}
.read-row b{font-family:var(--serif);font-size:17px;font-weight:500;color:var(--chalk);display:block}
.read-row span{font-size:14px;color:var(--mute);display:block;margin-top:2px;max-width:46ch}

/* the nine things it does: the example is the proof, so it leads, not trails */
.does{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,3vw,48px)}
@media (max-width:1080px){.does{grid-template-columns:1fr}}
.doe{padding:clamp(20px,2.2vw,28px) 0;border-top:1px solid var(--line)}
.doe-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.doe-h .no{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--gold-2)}
.doe-h b{font-family:var(--serif);font-size:19px;font-weight:500;color:var(--chalk)}
.doe > p{margin:0 0 12px;font-size:15px;color:var(--mute);max-width:48ch}
.doe-e{margin:0;padding:12px 0 12px 16px;border-left:2px solid var(--gold-2);
  font-size:15px;line-height:1.5;color:var(--chalk);max-width:50ch}
.doe-e cite{display:block;font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-bottom:6px}

/* ==========================================================================
   INTEGRATIONS - connected sources, presented as a running feed
   ========================================================================== */
.intg{display:grid;gap:0}
.intg-row{display:grid;grid-template-columns:34px 1fr auto;gap:0 14px;align-items:center;
  padding:14px 0;border-top:1px solid var(--line)}
.intg-row:first-child{border-top:0}
.intg-ico{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;color:var(--dim);position:relative}
.intg-ico svg{width:15px;height:15px}
.intg-row.on .intg-ico{border-color:rgba(137,163,119,.5);color:var(--sage)}
.intg-row.on .intg-ico::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid rgba(137,163,119,.28);animation:ping 3.4s ease-out infinite}
@keyframes ping{0%{opacity:.7;transform:scale(.86)}70%{opacity:0;transform:scale(1.25)}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.intg-row.on .intg-ico::after{animation:none;opacity:.3}}
.intg-main{min-width:0}
.intg-name{font-size:15.5px;color:var(--chalk);display:block}
.intg-sub{font-size:12.5px;color:var(--dim);display:block}
.intg-state{text-align:right;font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap}
/* a source you have not connected gets a control, not a status word */
.intg-btn{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 15px;
  cursor:pointer;white-space:nowrap;transition:border-color .2s var(--ease),color .2s var(--ease)}
.intg-btn:hover{border-color:var(--gold-2);color:var(--chalk)}
.intg-btn.key{border-color:var(--gold-2);color:var(--gold)}
.intg-btn[disabled]{opacity:.55;pointer-events:none;border-style:dashed}
.intg-state.on{color:var(--sage)}
.intg-state.warn{color:var(--amber)}
.intg-feed{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2)}
.feed-l{display:flex;gap:11px;align-items:baseline;font-size:12.5px;color:var(--dim);padding:5px 0}
.feed-l b{font-weight:500;color:var(--mute);font-variant-numeric:tabular-nums;flex:none}
.feed-l span{min-width:0}
/* the manual import: deliberately the smallest thing on the panel */
.io{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;
  margin-top:16px;padding-top:13px;border-top:1px solid var(--line)}
.io p{margin:0 auto 0 0;font-size:12px;color:var(--dim);max-width:40ch}
.io-a{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 14px;cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease);white-space:nowrap}
.io-a:hover{border-color:var(--gold-2);color:var(--chalk)}
.io-a.key{border-color:var(--gold-2);color:var(--gold)}
.io-note{font-size:12px;color:var(--dim);margin:10px 0 0;text-align:right}

/* ==========================================================================
   BIOMARKERS - reference range and optimal range are not the same thing
   ========================================================================== */
/* Two columns only when there is genuinely room for two: at 1440 the marker
   name column drops to ~150px and every explanatory note wraps to four lines,
   which is taller than the single column it was meant to shorten. */
.bio-cols{column-count:1}
.bio-cols .bio-g{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid}
@media (min-width:1800px){.bio-cols{column-count:2;column-gap:56px}}
.bio-g{margin-top:20px}
.bio-g:first-child{margin-top:0}
.bio-g > h4{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);
  margin:0 0 4px;padding-bottom:8px;border-bottom:1px solid var(--line-2);
  display:flex;align-items:baseline;gap:10px}
.bio-g > h4 em{font-style:normal;margin-left:auto;color:var(--dim);letter-spacing:.1em}
.bio-row{display:grid;grid-template-columns:1fr 92px 150px 96px;gap:0 16px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line)}
.bio-row:last-child{border-bottom:0}
.bio-n{font-size:13.5px;color:var(--mute);min-width:0}
.bio-n em{font-style:normal;display:block;font-size:11.5px;color:var(--dim)}
.bio-v{font-family:var(--serif);font-size:16.5px;text-align:right;font-variant-numeric:tabular-nums;color:var(--chalk)}
.bio-v small{font-size:11px;color:var(--dim);font-family:var(--sans);margin-left:4px}
.bio-track{position:relative;height:6px;border-radius:3px;background:rgba(246,242,233,.06)}
.sheet .bio-track{background:rgba(25,23,18,.08)}
.bio-opt{position:absolute;top:0;bottom:0;background:rgba(137,163,119,.34);border-radius:3px}
.bio-mark{position:absolute;top:-4px;width:2px;height:14px;background:var(--chalk);border-radius:1px}
.bio-s{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-align:right;
  line-height:1.35}
.bio-s.optimal{color:var(--sage)}.bio-s.watch{color:var(--amber)}.bio-s.out{color:var(--rust)}
.bio-row.watch .bio-mark{background:var(--amber)}
.bio-row.out .bio-mark{background:var(--rust)}
.bio-row.out .bio-v{color:var(--rust)}
@media (max-width:900px){
  .bio-row{grid-template-columns:1fr 88px 52px;gap:0 12px}
  .bio-track{display:none}
}

/* a disclosure for supporting detail that should not lead the page */
.disc{margin-top:22px;border-top:1px solid var(--line);padding-top:4px}
.disc > summary{
  list-style:none;cursor:pointer;padding:14px 0 4px;
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-2);display:flex;align-items:center;gap:10px;
}
.disc > summary::-webkit-details-marker{display:none}
.disc > summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease)}
.disc[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.disc > summary:hover{color:var(--gold)}

/* ==========================================================================
   CHARTS
   ========================================================================== */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .axis{stroke:var(--line-2);stroke-width:1;fill:none}
.chart .grid-l{stroke:rgba(246,242,233,.055);stroke-width:1}
.sheet .chart .grid-l{stroke:rgba(25,23,18,.07)}
.chart .ln{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart .ln.gold{stroke:var(--gold)}
.chart .ln.chalk{stroke:rgba(246,242,233,.5)}
.sheet .chart .ln.chalk{stroke:rgba(25,23,18,.42)}
.chart .ln.bad{stroke:var(--rust)}
.chart .ln.ok{stroke:var(--sage)}
.chart .ln.thin{stroke-width:1.4;opacity:.55}
.chart .ar{fill:var(--gold);opacity:.07}
.chart .tk{font-family:var(--sans);font-size:10px;fill:var(--dim)}
.chart .pt{fill:var(--gold)}
.chart .band{fill:rgba(246,242,233,.05)}
.sheet .chart .band{fill:rgba(25,23,18,.055)}
.chart .flag{stroke:var(--rust);stroke-width:1.3;stroke-dasharray:5 4;opacity:.75}
/* NOT .bar: the app top bar owns that name and sets height:var(--bar). CSS
   geometry properties beat SVG presentation attributes, so every bar in this
   chart silently became 60px tall and detached from its baseline. */
.chart .cbar{fill:var(--gold);opacity:.82}
.chart .cbar.lo{fill:rgba(246,242,233,.22)}
.spark{width:100%;height:34px;display:block;overflow:visible}
.spark .ln{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.spark .ln.gold{stroke:var(--gold)}
.spark .ln.chalk{stroke:rgba(246,242,233,.45)}
.sheet .spark .ln.chalk{stroke:rgba(25,23,18,.4)}
.chart-legend{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 10px;font-size:12px;color:var(--dim)}
.chart-legend b{display:inline-flex;align-items:center;gap:7px;font-weight:500}
.chart-legend i{width:14px;height:2px;border-radius:2px;background:var(--gold);display:block}
.chart-legend i.chalk{background:rgba(246,242,233,.5)}
.chart-legend i.band{height:9px;width:14px;border-radius:2px;background:rgba(246,242,233,.1)}

/* ==========================================================================
   MISC
   ========================================================================== */
.note-line{color:var(--mute);font-size:14.5px;line-height:1.55;max-width:58ch;
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.empty{padding:clamp(24px,4vw,40px);text-align:center;color:var(--dim);font-size:13.5px}
.stack{display:grid;gap:clamp(12px,1.3vw,18px);align-content:start}
/* a short side column next to a long one leaves dead space, which is the one
   thing this design is not allowed to do. Let it travel instead. */
.stack.follow{position:sticky;top:calc(var(--bar) + 18px);align-self:start}
@media (max-width:1080px){.stack.follow{position:static}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,30px)}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.wordset{font-size:13.5px;line-height:2.1;color:var(--mute);margin:0}
.wordset i{font-style:normal;color:var(--dim);padding:0 8px}
@media print{.rail,.bar,.burger,.io{display:none}.app{grid-template-columns:1fr}
  body{background:#fff;color:#000}.panel{border-color:#ccc}}

@media (max-width:520px){
  .bar .stamp,.bar .crumb{display:none}
  .bar h1{font-size:17px}
}
/* uneven columns should not stretch to match the taller side */
.g-2-1 > .panel,.g-1-2 > .panel,.g-3-2 > .panel,
.g-2-1 > .sheet,.g-1-2 > .sheet,.g-3-2 > .sheet{align-self:start}

/* ==========================================================================
   PAPER MODIFIER
   Same token swap as .sheet, for a surface that is not a card: the login
   column, a printed triptych, a full-bleed brief.
   ========================================================================== */
.paper{
  background:var(--paper);color:var(--ink);
  --chalk:var(--ink); --mute:var(--ink-mute); --dim:var(--ink-dim);
  --line:var(--ink-line); --line-2:var(--ink-line-2);
  --gold:var(--gold-ink); --gold-2:var(--gold-ink); --gold-soft:rgba(138,101,32,.1);
  --sage:var(--sage-ink); --amber:var(--amber-ink); --rust:var(--rust-ink);
  --panel:#FAF6EA; --panel-2:#FFFDF6;
}
.paper .btn{background:var(--ink);color:var(--paper)}
.paper .btn.ghost{background:none;color:var(--ink);border:1px solid var(--ink-line-2)}
.login-panel.paper{border-left:1px solid rgba(0,0,0,.4)}
.login-panel.paper .brand span{color:var(--gold-ink)}

/* ==========================================================================
   SHEET INTERNALS
   ========================================================================== */
.sheet-top{display:grid;grid-template-columns:1fr minmax(200px,260px);gap:clamp(20px,3vw,46px);align-items:stretch}
/* the right column is usually taller, which left a hole under the reading.
   Let the evidence row fall to the bottom so the two columns end together. */
.sheet-top > div{display:flex;flex-direction:column;min-width:0}
.sheet-top > div > .ev:last-child{margin-top:auto;margin-bottom:0}
.sheet-top > div > .mini:last-child{margin-top:auto}
@media (max-width:900px){.sheet-top{grid-template-columns:1fr}}
.mini{display:grid;gap:0;border-top:1px solid var(--line)}
.mini div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--mute)}
.mini b{font-family:var(--serif);font-size:16px;font-weight:500;color:var(--chalk);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ==========================================================================
   TRIPTYCH - three lenses, printed
   ========================================================================== */
.lens{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line-2)}
.lens > div{padding:20px 24px;border-left:1px solid var(--line)}
.lens > div:first-child{border-left:0;padding-left:0}
.lens h4{font-size:19px;margin-bottom:8px}
.lens .n{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--gold-2);display:block;margin-bottom:8px}
.lens p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-mute)}
/* in a narrow side column three across crushes every line to two words,
   and a viewport media query cannot see container width */
.lens.tight{grid-template-columns:1fr}
.lens.tight > div{border-left:0;padding:14px 0;border-top:1px solid var(--line)}
.lens.tight > div:first-child{border-top:0;padding-top:0}
.lens.tight h4{font-size:17px}
.lens.tight .n{display:inline;margin-right:8px}
@media (max-width:860px){.lens{grid-template-columns:1fr}
  .lens > div{border-left:0;padding:18px 0;border-bottom:1px solid var(--line)}
  .lens > div:last-child{border-bottom:0}}

/* ==========================================================================
   DECISION CONSOLE
   ========================================================================== */
.qbox{font-family:var(--serif);font-size:clamp(23px,2.5vw,34px);line-height:1.22;
  letter-spacing:-.01em;margin:0 0 6px}
.qmeta{font-size:12.5px;color:var(--dim);margin:0 0 20px}
.verdict{font-family:var(--serif);font-size:clamp(19px,2vw,26px);line-height:1.32;margin:0 0 18px}
.verdict b{font-weight:500;color:var(--gold)}
.forag{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(18px,2.4vw,34px);margin-top:6px}
.forag > div{min-width:0}
.forag > div + div{border-left:1px solid var(--line);padding-left:clamp(18px,2.4vw,34px)}
.fa-h{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin:0 0 10px}
.fa-h.yes{color:var(--sage)}.fa-h.no{color:var(--rust)}
.forag ul{margin:0;padding:0;list-style:none}
.forag li{font-size:15.5px;line-height:1.5;color:var(--ink-mute);padding:0 0 12px 15px;position:relative}
.forag li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:1px;background:var(--dim)}
@media (max-width:660px){.forag{grid-template-columns:1fr}
  .forag > div + div{border-left:0;padding-left:0;padding-top:16px;margin-top:14px;border-top:1px solid var(--line)}}

/* scenario picker */
.scn{display:grid;gap:0;border-top:1px solid var(--line)}
.scn-a{display:grid;grid-template-columns:auto 1fr auto;gap:0 12px;align-items:center;width:100%;
  text-align:left;padding:12px 12px 12px 0;border-bottom:1px solid var(--line);
  color:var(--mute);font-size:14px;transition:color .18s var(--ease),background .18s var(--ease)}
.scn-a i{width:6px;height:6px;border-radius:50%;background:var(--line-2);display:block;flex:none;margin-left:10px}
.scn-a em{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.scn-a:hover{color:var(--chalk);background:rgba(246,242,233,.03)}
.scn-a[aria-selected="true"]{color:var(--chalk);background:var(--gold-soft)}
.scn-a[aria-selected="true"] i{background:var(--gold);box-shadow:0 0 0 3px rgba(210,164,78,.2)}
.scn-a[aria-selected="true"] em{color:var(--gold-2)}

/* ==========================================================================
   FILTER CHIPS
   ========================================================================== */
.chip{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--dim);
  transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease)}
.chip:hover{color:var(--chalk);border-color:var(--line-2)}
.chip[aria-pressed="true"]{color:var(--chalk);border-color:var(--gold-2);background:var(--gold-soft)}

/* ==========================================================================
   DETECTION TIMELINE
   ========================================================================== */
.tl{width:100%;height:auto;display:block;overflow:visible}
.tl-ax{stroke:var(--line-2);stroke-width:1}
.tl-gr{stroke:rgba(246,242,233,.05);stroke-width:1}
.tl-stem{stroke:var(--line-2);stroke-width:1}
.tl-dot{stroke-width:1.4;fill:var(--board)}
.tl-dot.bad{stroke:var(--rust)}
.tl-dot.warn{stroke:var(--amber)}
.tl-dot.ok{stroke:var(--sage)}
.tl-dot.on{fill:var(--rust);stroke:var(--rust)}
.tl-t{font-family:var(--sans);font-size:11px;fill:var(--mute)}
.tl-k{font-family:var(--sans);font-size:10px;letter-spacing:.14em;fill:var(--dim)}
@media (max-width:660px),(pointer:coarse){.tl-t{font-size:12px}.tl-k{font-size:11px}}

/* ==========================================================================
   AUTH - real sessions
   ========================================================================== */
/* Held blank while the server is asked who this is. A signed out visitor
   should never watch a dashboard paint and then vanish. */
html.bb-checking body{visibility:hidden}

/* Two step sign in. Step one asks for an address, step two for the code that
   was mailed to it. Only one step is in the DOM at a time. */
.step[hidden]{display:none}
.cred + .cred{margin-top:12px}
.cred input[data-code]{text-align:center;font-family:var(--mono,ui-monospace,Menlo,monospace);
  font-size:26px;letter-spacing:.34em;padding-left:14px;padding-right:0}
.sent-to{font-size:13.5px;color:var(--mute);margin:0 0 14px}
.sent-to b{color:var(--chalk);font-weight:600}
.login-alt{display:flex;gap:18px;margin:14px 0 0;padding:0;list-style:none;
  font-size:13px;color:var(--dim)}
.login-alt button{background:none;border:0;padding:0;font:inherit;color:var(--mute);
  cursor:pointer;border-bottom:1px solid var(--line);transition:color .18s,border-color .18s}
.login-alt button:hover{color:var(--gold);border-color:var(--gold)}
.login-alt button[disabled]{color:var(--dim);border-color:transparent;cursor:default}
.login-ok{color:var(--sage);font-size:13.5px;min-height:20px;margin:6px 0 0}

/* Who is signed in. Sits in the rail foot under the account name. */
.rail-foot .who-e{margin:0 0 10px;padding-left:15px;font-size:11.5px;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ==========================================================================
   LIVE DATA STATES
   ========================================================================== */
/* An empty tab explains itself. A blank panel reads as a broken product, and
   a zero reads as a measurement, which is worse. */
.empty-sheet{max-width:62ch;margin:0 auto}
.empty-b{font-size:16px;line-height:1.6;color:var(--mute);margin:10px 0 22px;max-width:56ch}
.empty{font-size:14.5px;color:var(--dim);margin:14px 0;font-style:italic}
[aria-busy="true"]{opacity:.35;transition:opacity .18s}

/* Something happened on the server. Without this, every action that changes
   stored state looks like a button that did nothing. */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:60;
  max-width:min(520px,88vw);padding:13px 20px;border-radius:3px;
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--chalk);
  font-size:14px;line-height:1.45;box-shadow:0 12px 34px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.bad{border-color:var(--rust)}
.toast.ok{border-color:var(--sage)}

/* ==========================================================================
   SETTINGS
   ========================================================================== */
.set-b{border:1px solid var(--line);border-radius:3px;padding:20px 22px;margin-bottom:14px;
  background:var(--panel);transition:border-color .2s}
.set-b.on{border-color:var(--line-2);background:var(--panel-2)}
.set-h{display:flex;align-items:baseline;gap:12px;margin:0 0 6px}
.set-h h4{font-family:var(--serif);font-size:19px;font-weight:500;margin:0;color:var(--chalk)}
.set-h .spacer{flex:1}
.set-p{font-size:14.5px;line-height:1.55;color:var(--mute);margin:0 0 14px;max-width:64ch}
.set-meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:12.5px;color:var(--dim);margin:0 0 14px}
.set-meta b{color:var(--mute);font-weight:500}
.set-acts{display:flex;flex-wrap:wrap;gap:10px}
.set-unlock{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line)}
.set-unlock p{font-size:13px;color:var(--dim);margin:0 0 7px}
.set-unlock li{font-size:13.5px;color:var(--mute);line-height:1.6;margin-left:17px}

/* Import: a preview that can be checked, then a commit. Never a silent
   guess, because every number downstream inherits it. */
.imp{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.imp-drop{border:1px dashed var(--line-2);border-radius:3px;padding:26px 20px;text-align:center;
  cursor:pointer;transition:border-color .2s,background .2s}
.imp-drop:hover,.imp-drop.over{border-color:var(--gold);background:var(--panel-2)}
.imp-drop b{display:block;font-family:var(--serif);font-size:17px;color:var(--chalk);margin-bottom:5px}
.imp-drop span{font-size:13px;color:var(--dim)}
.imp-map{margin-top:16px}
.imp-row{display:grid;grid-template-columns:minmax(120px,1.1fr) minmax(150px,1.4fr) auto;
  gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.imp-row:last-child{border-bottom:0}
.imp-row code{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:12.5px;color:var(--mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-row select{width:100%;padding:6px 8px;font:inherit;font-size:13px;
  background:var(--board);color:var(--chalk);border:1px solid var(--line-2);border-radius:2px}
.imp-row select:focus{outline:none;border-color:var(--gold)}
.imp-row em{font-size:11.5px;color:var(--dim);font-style:normal;letter-spacing:.1em;text-transform:uppercase}
.imp-warn{font-size:13.5px;color:var(--amber);line-height:1.55;margin:10px 0 0;
  padding-left:14px;border-left:2px solid var(--amber)}
.imp-err{font-size:13.5px;color:var(--rust);line-height:1.55;margin:10px 0 0}
.imp-sum{display:flex;flex-wrap:wrap;gap:8px 24px;margin:14px 0 0;font-size:13.5px;color:var(--mute)}
.imp-sum b{color:var(--chalk);font-weight:600}

/* A long address plus a role plus a Remove button is wider than a handset.
   The address is the part that can give way, so it is the part allowed to. */
.usr{display:flex;align-items:center;gap:12px;padding:10px 0;flex-wrap:wrap;
  border-bottom:1px solid var(--line)}
.usr:last-child{border-bottom:0}
.usr b{font-weight:500;color:var(--chalk);font-size:14.5px;
  min-width:0;flex:1 1 auto;overflow-wrap:anywhere}
.usr .spacer{flex:1}
.usr em{font-style:normal;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

.danger{border-color:rgba(178,74,58,.4)}
.danger .set-h h4{color:var(--rust)}
.field{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.field input{flex:1;min-width:200px;padding:11px 13px;font:inherit;font-size:14.5px;
  background:var(--board);color:var(--chalk);border:1px solid var(--line-2);border-radius:2px}
.field input:focus{outline:none;border-color:var(--gold)}
.field input::placeholder{color:var(--dim)}

/* Ask a question. The answer is the same seven parts every time. */
.ask{display:flex;gap:10px;flex-wrap:wrap}
.ask textarea{flex:1;min-width:260px;min-height:74px;padding:12px 14px;font:inherit;font-size:15px;
  line-height:1.5;background:var(--board);color:var(--chalk);border:1px solid var(--line-2);
  border-radius:2px;resize:vertical}
.ask textarea:focus{outline:none;border-color:var(--gold)}
.q-item{padding:12px 0;border-bottom:1px solid var(--line)}
.q-item:last-child{border-bottom:0}
.q-item p{margin:0;font-size:14.5px;color:var(--mute)}
.q-item b{display:block;color:var(--chalk);font-weight:500;margin-bottom:3px}
.unk{font-size:15px;line-height:1.55;color:var(--ink-mute);margin:0 0 9px;max-width:56ch}

/* Finding status. Marking one actioned is what turns a list into a loop. */
.fstat{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.fstat .btn.sm{padding:6px 13px}
.fstat .on{border-color:var(--gold);color:var(--gold)}
.badge{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:2px 8px;border:1px solid var(--line-2);border-radius:2px;color:var(--dim);margin-left:8px}
.badge.act{border-color:var(--sage);color:var(--sage)}

@media (max-width:660px){
  .imp-row{grid-template-columns:1fr;gap:5px}
  .set-b{padding:16px 15px}
}

/* The direction of travel since the previous draw, inside the state cell
   rather than beside it. As a separate badge it added 54px to a fixed grid
   column and pushed the whole page sideways on a handset. */
.bio-s em{font-style:normal;display:block;margin-top:2px;font-weight:600}
.bio-s em.up{color:var(--sage)}
.bio-s em.down{color:var(--rust)}
.bio-track i{display:block;position:absolute;top:0;bottom:0}
.bio-track .bio-mark{top:-4px;bottom:auto}

/* Below this the four column row cannot hold its fixed tracks, and the range
   strip is the part that survives being dropped. */
@media (max-width:760px){
  .bio-row{grid-template-columns:1fr auto;gap:2px 12px}
  .bio-row .bio-track{grid-column:1 / -1;margin-top:6px}
  .bio-s{text-align:right}
  .bio-s em{display:inline;margin-left:6px}
}

/* ==========================================================================
   TYPE FLOOR - last in the file on purpose: it has to out-order every
   component rule above it, not out-specify it.
   ========================================================================== */
/* type floor: 9.5–11px reads at desk distance and does not on a handset */
@media (max-width:660px),(pointer:coarse){
  .nav-group > p,.pill,.nav-a .tag,.sev,.lbl,.kpi-k,.bio-s,.intg-state,
  .mast span,.tbl th,.mx th,.ev-k,.act-h,.byline,.lg-over .k,
  .bar .crumb,.dial .u,.fa-h,.chip,.scn-a em,.btn.sm,.act .worth b,
  .bio-g > h4,.bio-g > h4 em,.disc > summary,.doe-e cite,.flow-k,
  .hero-k,.tile-k,.fcard-cost em,.fcard-go,
  .imp-row em,.usr em,.badge{font-size:11.5px;letter-spacing:.14em}
  .intg-sub,.rail-foot,.when,.io p,.io-note,.io-a,.sb-note,.feed-l,
  .meter-note,.bio-n em,.tbl td .sm,.mx .c em,.bio-v small,.chart-legend,
  .set-meta,.imp-drop span,.set-unlock p,.imp-row code{font-size:12.5px}
  /* SVG labels obey the same floor as everything else. The viewBox is the
     container's real pixel width, so these are true sizes rather than sizes
     about to be scaled down by a factor of three. */
  .chart .tk,.tl .tl-t,.tl .tl-k{font-size:11.5px}
}