/* ==========================================================================
   BeLucent report system

   DEPLOYMENT, decided before any styling:
     shape of information            treatment
     one dominant decision           gold, lit, owns the top
     short enumerated set            a list
     two open questions              side by side, short
     three-way comparison            one divided strip      COLOURED
     dataset, 6 rows x 4 attributes  a table                COLOURED
     numbers to glance at            a count bar
     an argument                     prose at measure + asides   COLOURED
     machine provenance              mono, dense, cordoned  COLOURED
     narrative roll-up               one paragraph

   COLOUR
     gold      primary. headings, section numbers, the thing that matters.
     red       warnings and issues only.
     green/blue/purple   texture. no fixed meaning. used where complexity
               earns separating. four boxes on this document, spread for rhythm.
   LIGHT
     coloured boxes are LIT, not filled. brightest at the header, falling to
     near-black before the body copy starts. the falloff is what protects text.
     two intense things maximum in view.
   ========================================================================== */
:root{
  --gold:#EEAF1F;--gold-hot:#FFD86B;
  --red:#FF6137;--red-hot:#FF8F6B;
  --green:91,166,70;   --green-e:155,235,160;
  --blue:60,130,200;   --blue-e:127,196,255;
  --purple:120,72,155; --purple-e:201,160,240;
  --warm:#FFF6E4;
  --ink:#fff;--ink-2:#b3b9c2;--ink-3:#8a9099;--ink-4:#666c75;
  --hair:rgba(255,255,255,.13);--hair-2:rgba(255,255,255,.26);
  --sans:Arial,'Helvetica Neue',Helvetica,sans-serif;
  --mono:'SF Mono',Menlo,Consolas,ui-monospace,monospace;
}
*{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth}
body{margin:0;background:#000;color:var(--ink);font:17.5px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,dl,table{margin-top:0}
.w{max-width:1120px;margin:0 auto;padding:0 26px;position:relative;z-index:2}
.room{position:relative;padding:54px 0 62px;overflow:hidden}
.room+.room{border-top:1px solid var(--hair)}
.pool{position:absolute;inset:-220px auto auto -280px;width:1300px;height:1300px;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side, rgba(255,242,214,.16), rgba(255,238,200,.055) 34%,
             rgba(255,235,190,.015) 58%, transparent 78%)}

/* ---------- type ---------- */
h1{font-size:clamp(40px,6.6vw,76px);line-height:.95;letter-spacing:-.045em;margin:20px 0;max-width:14ch}
.eyebrow{font:900 12px/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--gold);display:inline-block}
.standfirst{font-size:21px;line-height:1.5;color:var(--ink-2);max-width:56ch;margin:0}
.mut{color:var(--ink-2);font-size:16px}
.trace{font:900 11px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4);
  display:block;margin-top:18px;padding-top:13px;border-top:1px solid var(--hair)}

/* ---------- containers ----------
   NEUTRAL: near-black, hairline. the default.
   COLOURED (.c): lit at the top, falling to near-black before the body.  */
.box{border:1px solid var(--hair);background:rgba(9,10,11,.9);margin-bottom:14px}
.c{border:2px solid rgba(var(--e),.4);
   background:linear-gradient(163deg, rgba(var(--a),.24), rgba(var(--a),.075) 20%, rgba(9,10,11,.95) 46%);
   box-shadow:inset 0 1px 0 rgba(255,246,228,.16)}
.c-green {--a:var(--green); --e:var(--green-e)}
.c-blue  {--a:var(--blue);  --e:var(--blue-e)}
.c-purple{--a:var(--purple);--e:var(--purple-e)}
/* header bar: sits on the lit part of the box */
.bh{display:flex;align-items:center;gap:16px;padding:16px 24px;
  font:900 12px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--warm);
  border-bottom:1px solid rgba(255,246,228,.16)}
.bh .r{margin-left:auto;text-align:right;font-size:11px;color:var(--ink-2);opacity:.9}
.box > .bh{color:var(--ink);border-bottom-color:var(--hair)}
.bb{padding:28px 30px}.bb-flush{padding:0}

/* ---------- the two intense things ---------- */
.gold-box{border:2px solid var(--gold);
  background:linear-gradient(163deg, rgba(238,175,31,.26), rgba(238,175,31,.08) 20%, rgba(11,10,8,.95) 46%);
  box-shadow:0 0 7px rgba(255,216,107,.55), 0 0 26px rgba(238,175,31,.28),
             0 0 70px rgba(238,175,31,.13), inset 0 1px 0 rgba(255,246,228,.3);margin-bottom:14px}
.gold-box > .bh{color:var(--gold-hot);border-bottom-color:rgba(238,175,31,.4)}
.gold-box > .bh .r{color:var(--gold-hot);opacity:.8}
.red-box{border:2px solid var(--red);
  background:linear-gradient(163deg, rgba(255,97,55,.24), rgba(255,97,55,.075) 20%, rgba(11,9,8,.95) 46%);
  box-shadow:0 0 7px rgba(255,143,107,.5), 0 0 24px rgba(255,97,55,.24),
             0 0 62px rgba(255,97,55,.11), inset 0 1px 0 rgba(255,246,228,.24);margin-bottom:0}
.red-box > .bh{color:var(--red-hot);border-bottom-color:rgba(255,97,55,.4)}
.red-box > .bh .r{color:var(--red-hot);opacity:.85}

/* ---------- masthead ---------- */
.top{padding:58px 0 0;position:relative;z-index:2}
.meta{display:flex;margin-top:34px;border:1px solid var(--hair);flex-wrap:wrap;background:rgba(9,10,11,.9)}
.meta div{padding:16px 22px;border-right:1px solid var(--hair);flex:1 1 auto;
  font:900 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.meta div:last-child{border-right:0}
.meta b{display:block;color:var(--ink);font-size:16px;letter-spacing:0;text-transform:none;
  font-family:var(--sans);font-weight:700;margin-top:6px}
.meta b.warn{color:var(--red-hot)}

/* ---------- section head: solid gold number, neutral band ---------- */
.head{display:flex;align-items:center;gap:20px;margin-bottom:26px;padding:22px 26px;
  border:2px solid var(--hair-2);background:rgba(255,255,255,.03)}
.head .n{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;
  background:var(--gold);color:#000;font:900 17px/1 var(--mono)}
.head h2{font-size:clamp(26px,3.8vw,42px);letter-spacing:-.04em;margin:0;line-height:.98;text-transform:uppercase}
.head .count{margin-left:auto;font:900 11px/1.5 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold);text-align:right;white-space:nowrap}

/* ---------- shape: one dominant decision ---------- */
.move .lead{font-size:clamp(27px,4vw,44px);line-height:1.08;letter-spacing:-.03em;margin:0 0 18px;
  max-width:20ch;color:var(--warm)}
.move .because{font-size:18px;line-height:1.58;color:var(--ink-2);max-width:58ch;margin:0}
.move dl{margin:28px 0 0;padding-top:24px;border-top:1px solid rgba(238,175,31,.32);
  display:grid;grid-template-columns:132px 1fr}
.move dt{font:900 11px/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--gold);
  padding:13px 22px 13px 0;border-top:1px solid var(--hair)}
.move dd{margin:0;color:var(--ink-2);font-size:16.5px;padding:13px 0;border-top:1px solid var(--hair)}
.move dt:first-of-type,.move dd:first-of-type{border-top:0;padding-top:0}

/* ---------- shape: a list ---------- */
.acts{list-style:none;padding:0;margin:0;counter-reset:a}
.acts li{counter-increment:a;display:grid;grid-template-columns:70px 1fr 160px;align-items:stretch;
  border-top:1px solid var(--hair)}
.acts li:first-child{border-top:0}
.acts li:before{content:counter(a,decimal-leading-zero);font:900 14px/1 var(--mono);color:var(--gold);
  display:grid;place-items:center;border-right:1px solid var(--hair)}
.acts .what{padding:20px 24px}
.acts .what b{font-size:18px;font-weight:700}
.acts .what span{display:block;color:var(--ink-2);font-size:16px;margin-top:5px;max-width:56ch}
.acts .when{display:flex;align-items:center;justify-content:flex-end;padding:20px 24px;
  border-left:1px solid var(--hair);font:900 11px/1.4 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);text-align:right}
.acts li.urgent:before{background:var(--red);color:#000}
.acts li.urgent .when{color:var(--red-hot)}

/* ---------- shape: two questions ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.two > *{margin-bottom:0}
.call q{font-size:21px;line-height:1.32;display:block;margin-bottom:10px;quotes:none;color:var(--warm)}
.call p{margin:0;color:var(--ink-2);font-size:16.5px;max-width:58ch}

/* ---------- shape: three-way comparison ---------- */
.states{display:grid;grid-template-columns:repeat(3,1fr)}
.state{padding:26px 28px;border-right:1px solid rgba(255,246,228,.12)}
.state:last-child{border-right:0}
.state .k{font:900 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.state .v{font-size:25px;font-weight:700;letter-spacing:-.025em;margin:13px 0 9px;line-height:1.14}
.state p{margin:0 0 4px;font-size:16px;color:var(--ink-2)}

/* ---------- shape: numbers to glance at ---------- */
.counts{display:flex;flex-wrap:wrap;border-bottom:1px solid rgba(255,246,228,.14)}
.counts div{flex:1 1 auto;padding:18px 24px;border-right:1px solid rgba(255,246,228,.12);
  display:flex;align-items:baseline;gap:11px}
.counts div:last-child{border-right:0}
.counts b{font-size:28px;font-weight:700;letter-spacing:-.02em}
.counts div.hi b{color:var(--gold)}
.counts span{font:900 11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- shape: a table ---------- */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:16px;min-width:640px}
thead th{text-align:left;font:900 11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);padding:14px 20px;border-bottom:1px solid rgba(255,246,228,.16);
  border-right:1px solid rgba(255,246,228,.1)}
thead th:last-child{border-right:0}
tbody td{padding:17px 20px;border-bottom:1px solid var(--hair);border-right:1px solid rgba(255,255,255,.08);
  vertical-align:top;color:var(--ink-2)}
tbody td:last-child{border-right:0}
tbody td:first-child{color:var(--ink);font-weight:700;width:28%}
tbody tr:last-child td{border-bottom:0}

/* ---------- shape: an argument ---------- */
.claim{font-size:clamp(25px,3.4vw,38px);line-height:1.16;letter-spacing:-.025em;color:var(--warm);
  max-width:22ch;margin:0 0 24px}
.prose{font-size:17.5px;line-height:1.68;color:var(--ink-2);max-width:60ch}
.prose p{margin:0 0 17px}.prose p:last-child{margin-bottom:0}
.think{display:grid;grid-template-columns:1fr 330px;gap:14px;align-items:start}
.pill{display:inline-block;border:1px solid var(--hair-2);padding:7px 11px;margin:4px 7px 4px 0;
  font:900 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}

/* ---------- shape: machine provenance ---------- */
.kv{display:grid;grid-template-columns:150px 1fr;margin:0;font-size:16px}
.kv dt{font:900 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  padding:12px 20px 12px 0;border-top:1px solid var(--hair)}
.kv dd{margin:0;font:400 13.5px/1.6 var(--mono);color:var(--ink-2);word-break:break-all;
  padding:12px 0;border-top:1px solid var(--hair)}
.kv dt:first-of-type,.kv dd:first-of-type{border-top:0;padding-top:0}
.checkline{display:flex;justify-content:space-between;gap:18px;padding:13px 0;
  border-top:1px solid var(--hair);font-size:16px}
.checkline:first-of-type{border-top:0;padding-top:0}
.checkline .l{font:900 11px/1.6 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);flex:0 0 auto}
.checkline span:last-child{text-align:right;color:var(--ink-2)}

/* ---------- chips, contributors, disclosure ---------- */
.chip{display:inline-block;padding:5px 9px;font:700 10.5px/1 var(--mono);letter-spacing:.07em;
  text-transform:uppercase;margin:6px 7px 0 0;border:1px solid}
.chip.ok{background:rgba(91,166,70,.16);border-color:rgba(91,166,70,.55);color:#8fd39a}
.chip.warn{background:rgba(238,175,31,.16);border-color:rgba(238,175,31,.55);color:#f0c65e}
.chip.bad{background:rgba(255,97,55,.16);border-color:rgba(255,97,55,.55);color:#ff9b7d}
.chip.off{background:rgba(74,159,224,.15);border-color:rgba(74,159,224,.5);color:#8fbce8}
.chip.info{background:rgba(155,111,196,.16);border-color:rgba(155,111,196,.5);color:#b894dd}
.contribs{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.contribs span{font:900 11px/1 var(--mono);letter-spacing:.08em;padding:7px 10px;
  border:1px solid var(--hair);color:var(--ink-3)}
.footnote{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--hair);font-size:15px;color:var(--ink-4)}
.msg{padding:19px 0;border-top:1px solid var(--hair)}
.msg:first-child{border-top:0;padding-top:0}
.msg h4{font-size:17.5px;margin:0 0 7px}
.msg p{margin:0 0 6px;font-size:16px;color:var(--ink-2);max-width:60ch}
.msg .nx{color:var(--ink-3);font-size:15.5px}
details>summary{cursor:pointer;list-style:none}
details>summary::-webkit-details-marker{display:none}
details .bh:after{content:"+";margin-left:14px}
details[open] .bh:after{content:"\2013"}
footer{padding:46px 26px 64px;text-align:center;font:900 11px/1.8 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);border-top:1px solid var(--hair)}
@media(max-width:880px){
  .states,.two,.think{grid-template-columns:1fr}
  .state{border-right:0;border-bottom:1px solid rgba(255,246,228,.12)}
  .move dl,.kv{grid-template-columns:1fr}
  .move dd,.kv dd{border-top:0;padding-top:0;padding-bottom:13px}
  .acts li{grid-template-columns:56px 1fr}
  .acts .when{grid-column:2;justify-content:flex-start;border-left:0;border-top:1px solid var(--hair);text-align:left}
}

/* ==========================================================================
   LIGHT
   The light model inverts honestly rather than mechanically. On black, a
   coloured box is LIT: brightest at the header, falling to near-black. On
   paper it is TINTED: strongest at the header, falling to paper. The falloff
   direction and the readability logic are identical; only what it falls to
   changes. Glow becomes a soft warm shadow, because a glow on paper reads
   as a printing fault.
   Accents switch from the hot edge colours to the deep brand hues, which is
   the same adjustment noted in belucent-publish's brand.css: the deep blue
   and purple vanish on black and shout on paper.
   ========================================================================== */
:root[data-theme="light"]{
  --gold:#B07D07;--gold-hot:#8A6104;
  --red:#D63B10;--red-hot:#A82C08;
  --green-e:44,90,32; --blue-e:9,77,136; --purple-e:80,44,110;
  --warm:#1A1408;
  --ink:#111111;--ink-2:#4A4A52;--ink-3:#6E6E78;--ink-4:#8A8A93;
  --hair:rgba(0,0,0,.14);--hair-2:rgba(0,0,0,.26);
  --paper:#FFFCF3;
}
:root[data-theme="light"] body{background:var(--paper);color:var(--ink)}
:root[data-theme="light"] .pool{
  background:radial-gradient(closest-side, rgba(238,175,31,.10), rgba(238,175,31,.035) 34%, transparent 74%)}
:root[data-theme="light"] .box{background:#fff;border-color:var(--hair)}
:root[data-theme="light"] .meta{background:#fff}
:root[data-theme="light"] .c{
  background:linear-gradient(163deg, rgba(var(--a),.20), rgba(var(--a),.07) 20%, #fff 46%);
  border-color:rgba(var(--e),.45);
  box-shadow:0 2px 10px rgba(90,70,20,.07), inset 0 1px 0 rgba(255,255,255,.7)}
:root[data-theme="light"] .bh{color:var(--ink);border-bottom-color:rgba(0,0,0,.16)}
:root[data-theme="light"] .bh .r{color:var(--ink-3)}
:root[data-theme="light"] .gold-box{
  background:linear-gradient(163deg, rgba(238,175,31,.34), rgba(238,175,31,.12) 20%, #FFFDF6 46%);
  border-color:var(--gold);
  box-shadow:0 3px 16px rgba(176,125,7,.16), inset 0 1px 0 rgba(255,255,255,.8)}
:root[data-theme="light"] .gold-box > .bh{color:var(--gold-hot);border-bottom-color:rgba(176,125,7,.35)}
:root[data-theme="light"] .gold-box > .bh .r{color:var(--gold-hot)}
:root[data-theme="light"] .red-box{
  background:linear-gradient(163deg, rgba(214,59,16,.20), rgba(214,59,16,.07) 20%, #FFFAF8 46%);
  border-color:var(--red);
  box-shadow:0 3px 16px rgba(168,44,8,.14), inset 0 1px 0 rgba(255,255,255,.8)}
:root[data-theme="light"] .red-box > .bh{color:var(--red-hot);border-bottom-color:rgba(214,59,16,.35)}
:root[data-theme="light"] .red-box > .bh .r{color:var(--red-hot)}
:root[data-theme="light"] .head{background:#fff;border-color:var(--hair-2)}
:root[data-theme="light"] .head .n{background:var(--gold);color:#fff}
:root[data-theme="light"] .head .count{color:var(--gold-hot)}
:root[data-theme="light"] .acts li.urgent:before{background:var(--red);color:#fff}
:root[data-theme="light"] .acts li:before{color:var(--gold-hot)}
:root[data-theme="light"] .state{border-right-color:rgba(0,0,0,.12)}
:root[data-theme="light"] .counts{border-bottom-color:rgba(0,0,0,.14)}
:root[data-theme="light"] .counts div{border-right-color:rgba(0,0,0,.12)}
:root[data-theme="light"] thead th{border-bottom-color:rgba(0,0,0,.18);border-right-color:rgba(0,0,0,.1)}
:root[data-theme="light"] tbody td{border-right-color:rgba(0,0,0,.08)}
:root[data-theme="light"] .chip.ok{background:rgba(44,90,32,.11);border-color:rgba(44,90,32,.5);color:#2C5A20}
:root[data-theme="light"] .chip.warn{background:rgba(176,125,7,.12);border-color:rgba(176,125,7,.5);color:#8A6104}
:root[data-theme="light"] .chip.bad{background:rgba(214,59,16,.11);border-color:rgba(214,59,16,.5);color:#A82C08}
:root[data-theme="light"] .chip.off{background:rgba(9,77,136,.10);border-color:rgba(9,77,136,.45);color:#094D88}
:root[data-theme="light"] .chip.info{background:rgba(80,44,110,.10);border-color:rgba(80,44,110,.45);color:#502C6E}
:root[data-theme="light"] .move dl{border-top-color:rgba(176,125,7,.4)}
:root[data-theme="light"] .move dt{color:var(--gold-hot)}
:root[data-theme="light"] footer{border-top-color:var(--hair)}

/* PRINT
   Backgrounds must be forced or Chromium drops them and a dark page prints as
   white text on white paper. Blurred shadows print as hard blocks, so they are
   stripped and the borders carry the containment instead.
   A4 is ~794 CSS px, so the 880px breakpoint fires and the layout goes single
   column. That is intended: a printed page is one column. */
@media print{
  html,body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pool{display:none}
  .theme-switch{display:none !important}
  .gold-box,.red-box,.c{box-shadow:none !important}
  .box,.c,.gold-box,.red-box,.states,.counts,.acts li,.msg{break-inside:avoid}
  table{break-inside:auto} tr{break-inside:avoid}
  .room{break-inside:auto;padding:24px 0 28px}
  .top{padding-top:0}
  h1{margin:10px 0 14px}
  .head{margin-bottom:18px;padding:16px 20px}
  .bb{padding:20px 22px}
  :root[data-theme="light"] body{background:#fff}
}

/* the dark/light switch is a viewing control, never printed */
@media print{ .theme-switch{display:none !important} }