/* ==========================================================================
   ATLAS — house style
   Palette and type sampled from AtlasReport_Aug10.pdf so the generated
   document is the same object, not a lookalike:
     ink #000  paper #fff  panel #F6F8FA  atlas blue #49A2E5
     navy #123B63  crimson #B31942  amber #C77D1E  hairline #A5A5A5
   Display: Montserrat 700/800. Text: Trebuchet MS — the same faces the
   Canva original embeds.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&display=swap');

:root {
  --ink: #000000;
  --paper: #ffffff;
  --panel: #f6f8fa;
  --blue: #49a2e5;
  --navy: #123b63;
  --crimson: #b31942;
  --amber: #c77d1e;
  --hair: #a5a5a5;
  --muted: #595959;
  --desk: #0b0d10;
  --desk-2: #14181d;
  --desk-3: #1e242b;
  --desk-line: #2b333c;
  --desk-txt: #d7dde4;
  --desk-dim: #8b96a3;
  --display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --text: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--desk);
  color: var(--desk-txt);
  font-family: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- gate ---------------------------------------------------------- */
#gate {
  position: fixed; inset: 0; z-index: 999; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.gate-box { text-align: center; width: 300px; }
.gate-mark {
  font-family: var(--display); font-weight: 800; font-size: 64px; color: var(--blue);
  line-height: 1; margin-bottom: 6px;
}
.gate-title {
  font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .18em;
  color: #fff; text-transform: uppercase; margin-bottom: 4px;
}
.gate-sub { color: var(--desk-dim); font-size: 12px; margin-bottom: 26px; }
#gate-pin {
  width: 100%; background: transparent; border: 0; border-bottom: 2px solid var(--desk-line);
  color: #fff; font-size: 30px; letter-spacing: .55em; text-align: center; padding: 8px 0 10px;
  font-family: var(--display); font-weight: 700;
}
#gate-pin:focus { border-bottom-color: var(--blue); outline: none; }
.gate-err { color: var(--crimson); font-size: 12px; height: 16px; margin-top: 12px; }
.gate-note { color: #4b545e; font-size: 10.5px; margin-top: 28px; line-height: 1.5; }

/* ---------- shell --------------------------------------------------------- */
#app { display: none; min-height: 100vh; grid-template-columns: 208px 1fr; }
#app.on { display: grid; }

.rail {
  background: var(--desk-2); border-right: 1px solid var(--desk-line);
  padding: 18px 0 24px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { padding: 0 18px 18px; border-bottom: 1px solid var(--desk-line); margin-bottom: 18px; }
.brand-mark {
  font-family: var(--display); font-weight: 800; font-size: 26px; color: var(--blue); line-height: 1;
}
.brand-name {
  font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: .12em;
  color: #fff; text-transform: uppercase; margin-top: 6px;
}
.brand-sub { font-size: 10.5px; color: var(--desk-dim); margin-top: 3px; }

/* the pipeline spine: the one piece of chrome that earns its space */
.spine { padding: 0 18px; }
.spine-h {
  font-family: var(--display); font-weight: 700; font-size: 9.5px; letter-spacing: .16em;
  color: var(--desk-dim); text-transform: uppercase; margin-bottom: 12px;
}
.stage { position: relative; padding: 0 0 16px 22px; }
.stage:last-child { padding-bottom: 0; }
.stage::before {
  content: ''; position: absolute; left: 4px; top: 12px; bottom: -4px; width: 1px;
  background: var(--desk-line);
}
.stage:last-child::before { display: none; }
.stage .dot {
  position: absolute; left: 0; top: 3px; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--desk-line); background: var(--desk-2); transition: .25s;
}
.stage .nm { font-size: 11.5px; color: var(--desk-dim); letter-spacing: .04em; }
.stage .dt { font-size: 10px; color: #5b6672; margin-top: 2px; }
.stage.running .dot { border-color: var(--blue); background: var(--blue); animation: pulse 1.1s infinite; }
.stage.running .nm { color: #fff; }
.stage.done .dot { border-color: var(--blue); background: var(--blue); }
.stage.done .nm { color: var(--desk-txt); }
.stage.error .dot { border-color: var(--crimson); background: var(--crimson); }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .stage.running .dot { animation: none; } }

.rail-foot { padding: 18px; margin-top: 22px; border-top: 1px solid var(--desk-line); }
.meter { font-size: 10.5px; color: var(--desk-dim); display: flex; justify-content: space-between; padding: 2px 0; }
.meter b { color: var(--desk-txt); font-weight: 600; }

/* ---------- main ---------------------------------------------------------- */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  background: var(--desk-2); border-bottom: 1px solid var(--desk-line);
  padding: 12px 22px; display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
}
.field { display: flex; flex-direction: column; gap: 5px; }
.field label {
  font-family: var(--display); font-weight: 700; font-size: 9.5px; letter-spacing: .13em;
  color: var(--desk-dim); text-transform: uppercase;
}
.field input[type=date], .field select, .field input[type=text], .field input[type=password] {
  background: var(--desk-3); border: 1px solid var(--desk-line); color: #fff;
  padding: 7px 9px; border-radius: 0; font-size: 12.5px;
}
.spacer { flex: 1; }

.btn {
  font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; padding: 9px 15px; border: 1px solid var(--desk-line);
  background: var(--desk-3); color: var(--desk-txt); cursor: pointer; border-radius: 0;
  transition: .15s;
}
.btn:hover:not(:disabled) { border-color: var(--blue); color: #fff; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #04121e; }
.btn.primary:hover:not(:disabled) { background: #63b0ea; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 6px 10px; font-size: 10px; }
.btn.danger:hover:not(:disabled) { border-color: var(--crimson); color: #ff8fa8; }

.progress { background: var(--desk-2); border-bottom: 1px solid var(--desk-line); padding: 0 22px 10px; }
.prog-track { height: 3px; background: var(--desk-3); overflow: hidden; }
.prog-fill {
  height: 100%; width: 0; background: var(--blue); transition: width .5s ease-out;
}
.prog-fill.done { background: #3ddc97; }
.prog-meta {
  display: flex; align-items: center; gap: 10px; margin-top: 7px;
  font-size: 11px; color: var(--desk-dim);
}
.prog-label {
  font-family: var(--display); font-weight: 700; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: #fff;
}
.prog-eta { font-variant-numeric: tabular-nums; color: var(--blue); font-weight: bold; }
.prog-eta.settling { color: var(--desk-dim); font-weight: normal; }

.tabs { display: flex; gap: 2px; padding: 0 22px; background: var(--desk-2); border-bottom: 1px solid var(--desk-line); }
.tab {
  font-family: var(--display); font-weight: 700; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; padding: 11px 14px; color: var(--desk-dim); cursor: pointer;
  border: 0; background: transparent; border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--desk-txt); }
.tab.on { color: #fff; border-bottom-color: var(--blue); }
.tab .count {
  display: inline-block; margin-left: 6px; background: var(--desk-3); color: var(--desk-dim);
  padding: 1px 5px; font-size: 9.5px;
}
.tab.on .count { background: var(--blue); color: #04121e; }

.view { display: none; padding: 22px; overflow: auto; flex: 1; }
.view.on { display: block; }
.doc-view { background: #191d22; }

.doc-bar {
  display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap;
}
/* ---------- direct editing -----------------------------------------------
   Editing is per BLOCK, not per page. The whole page used to become one
   contenteditable region, which meant a stray keystroke could merge two
   paragraphs or delete a table row, and there was no way to revert one
   sentence without discarding the lot.

   Now every text-bearing leaf — a heading, a paragraph, a table cell, a
   caption — is its own editable target. Hover shows you what is editable,
   focus shows you what you are in, and each block remembers what it
   originally said so any single edit can be undone on its own.

   Charts and gauges are deliberately NOT editable: they are SVG generated
   from the underlying numbers, and letting someone hand-type over a data
   label would put the picture and the table into silent disagreement. */
.paper-stack.editing [data-eid] {
  cursor: text; border-radius: 2px;
  transition: background .12s, box-shadow .12s;
}
.paper-stack.editing [data-eid]:hover {
  box-shadow: inset 0 0 0 1px #b8c2cf; background: rgba(37, 99, 235, .035);
}
.paper-stack.editing [data-eid]:focus {
  outline: none; box-shadow: inset 0 0 0 2px #2563eb; background: rgba(37, 99, 235, .06);
}
.paper-stack.editing [data-eid][data-edited="1"] {
  box-shadow: inset 2px 0 0 #16a34a;
}
.paper-stack.editing [data-eid][data-edited="1"]:hover {
  box-shadow: inset 2px 0 0 #16a34a, inset 0 0 0 1px #b8c2cf;
}
.paper-stack.editing .page { box-shadow: 0 0 0 2px #2563eb, 0 6px 24px rgba(0, 0, 0, .12); }
.paper-stack.editing .page.overflowing { box-shadow: 0 0 0 2px #b31942, 0 6px 24px rgba(0, 0, 0, .12); }
/* Floating control that follows the focused block. Sits outside the page in
   z-order so it never prints and never reflows the paper underneath. */
.edit-pop {
  position: absolute; z-index: 60; display: none; gap: 6px; align-items: center;
  background: #14181d; border: 1px solid #2b333c; border-radius: 6px;
  padding: 4px 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.edit-pop.show { display: flex; }
.edit-pop button {
  background: transparent; border: 1px solid #2b333c; border-radius: 4px; color: #d7dde4;
  font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 8px; cursor: pointer;
}
.edit-pop button:hover { border-color: #49a2e5; color: #fff; }
.edit-pop button:disabled { opacity: .4; cursor: default; border-color: #2b333c; color: #8b96a3; }
.edit-pop .ep-lbl {
  font-family: var(--display); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
  color: #8b96a3; padding-right: 2px;
}
.edit-count {
  font-family: var(--display); font-size: 10px; letter-spacing: .04em; color: #8b96a3;
}
.edit-count b { color: #16a34a; }
@media print {
  .edit-pop { display: none !important; }
  .paper-stack.editing [data-eid] { box-shadow: none !important; background: none !important; }
  .paper-stack.editing .page { box-shadow: none !important; }
}
.edit-save-note {
  font-family: var(--display); font-size: 10px; color: #16a34a; letter-spacing: .04em;
  opacity: 0; transition: opacity .25s;
}
.edit-save-note.show { opacity: 1; }
.doc-name {
  font-family: var(--display); font-weight: 700; font-size: 12px; color: #fff;
  letter-spacing: .04em;
}
.doc-meta { font-size: 11px; color: var(--desk-dim); }
.badge {
  font-family: var(--display); font-weight: 700; font-size: 9px; letter-spacing: .1em;
  padding: 3px 7px; text-transform: uppercase;
}
.badge.live { background: var(--blue); color: #04121e; }
.badge.demo { background: var(--amber); color: #1a1206; }

/* ---------- panels -------------------------------------------------------- */
.panel { background: var(--desk-2); border: 1px solid var(--desk-line); padding: 18px; margin-bottom: 16px; }
.panel h3 {
  font-family: var(--display); font-weight: 700; font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; margin: 0 0 4px;
}
.panel .hint { font-size: 11.5px; color: var(--desk-dim); margin: 0 0 14px; line-height: 1.55; }
#doc-dropzone.dragover { background: rgba(90, 150, 255, .08); border-color: var(--blue, #5a96ff); }
.panel h4 {
  font-family: var(--display); font-weight: 700; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue); margin: 16px 0 8px;
}
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row > .field { flex: 1; min-width: 150px; }
textarea {
  width: 100%; background: var(--desk-3); border: 1px solid var(--desk-line); color: #fff;
  padding: 10px; font-size: 12px; line-height: 1.6; resize: vertical; border-radius: 0;
}
.dtable { width: 100%; border-collapse: collapse; font-size: 12px; }
.dtable th {
  font-family: var(--display); font-weight: 700; font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--desk-dim); text-align: left; padding: 7px 8px;
  border-bottom: 1px solid var(--desk-line);
}
.dtable td { padding: 7px 8px; border-bottom: 1px solid #232a31; vertical-align: top; }
.dtable tr:hover td { background: #1a2027; }
.dtable .num { text-align: right; font-variant-numeric: tabular-nums; }
.pill {
  font-family: var(--display); font-weight: 700; font-size: 9px; letter-spacing: .06em;
  padding: 2px 6px; text-transform: uppercase;
}
.pill.up { background: rgba(73,162,229,.16); color: var(--blue); }
.pill.down { background: rgba(179,25,66,.2); color: #ea6c8b; }
.pill.new { background: rgba(199,125,30,.18); color: var(--amber); }
.pill.held { background: #232a31; color: var(--desk-dim); }

.log { font-size: 11.5px; line-height: 1.75; max-height: 210px; overflow: auto; }
.log div { padding: 1px 0; color: var(--desk-dim); }
.log .stage-tag {
  display: inline-block; min-width: 62px; color: var(--blue); font-family: var(--display);
  font-weight: 700; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
}
.log .warn { color: #e8a33d; }
.log .err { color: #ea6c8b; }

.transcript { border-left: 2px solid var(--desk-line); padding: 2px 0 2px 14px; margin-bottom: 14px; }
.transcript .who {
  font-family: var(--display); font-weight: 700; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 4px;
}
.transcript .who.bear { color: #ea6c8b; }
.transcript .who.moderator { color: var(--amber); }
.transcript .who.judge { color: #fff; }
.transcript p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.65; color: var(--desk-txt); }
.sim { font-size: 9px; letter-spacing: .08em; color: var(--amber); margin-left: 6px; }

.notice { border-left: 3px solid var(--amber); background: #1d1a13; padding: 11px 14px; font-size: 12px; line-height: 1.6; margin-bottom: 16px; color: #e3d5b8; }
.notice.blue { border-left-color: var(--blue); background: #10202c; color: #c5dcec; }
.notice.red { border-left-color: var(--crimson); background: #241318; color: #f0c3ce; }
.notice b { color: #fff; }
.notice a { color: var(--blue); }

.toast {
  position: fixed; bottom: 22px; right: 22px; background: var(--desk-3);
  border: 1px solid var(--desk-line); border-left: 3px solid var(--blue);
  padding: 12px 18px; font-size: 12.5px; z-index: 500; max-width: 380px; line-height: 1.5;
  animation: slide .22s ease-out;
}
.toast.err { border-left-color: var(--crimson); }
@keyframes slide { from { opacity: 0; transform: translateY(8px); } }

/* ==========================================================================
   THE DOCUMENT — A4, house style
   ========================================================================== */
.paper-stack { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.page {
  width: 210mm; height: 297mm; background: var(--paper); color: var(--ink);
  position: relative; overflow: hidden; box-shadow: 0 2px 22px rgba(0,0,0,.55);
  font-family: var(--text);
}
.page.crit-page { height: auto; min-height: 297mm; }

.masthead {
  height: 19mm; background: var(--ink); color: #fff; padding: 0 11mm;
  display: flex; flex-direction: column; justify-content: center;
}
.mh-title {
  font-family: var(--display); font-weight: 800; font-size: 20.5pt; line-height: 1.05;
  letter-spacing: -.005em;
}
.mh-thin { font-weight: 600; }
.mh-date {
  font-family: var(--display); font-weight: 700; font-size: 9pt; color: var(--blue);
  text-align: right; margin-top: 2mm;
}
.colophon {
  position: absolute; left: 0; right: 0; bottom: 0; height: 11mm; background: var(--ink);
  display: flex; align-items: center; justify-content: space-between; padding: 0 11mm;
}
.cf-date { font-family: var(--display); font-weight: 700; font-size: 8.5pt; color: var(--blue); }
.cf-mark { font-family: var(--display); font-weight: 800; font-size: 15pt; color: var(--blue); line-height: 1; }

.page-body { height: 263mm; padding: 4mm 11mm 0; overflow: hidden; }
/* the scale lives on an inner wrapper: zooming the element that carries the
   fixed height would scale the box and its contents together and fit nothing */
.page-inner { zoom: var(--fit, 1); }
.crit-page .page-body { height: auto; min-height: 263mm; padding-bottom: 16mm; }
.blk { break-inside: avoid; }

.lede {
  font-family: var(--display); font-weight: 800; font-size: 17pt; line-height: 1.18;
  margin: 4mm 0 2.5mm; color: var(--ink); letter-spacing: -.012em;
}
.standfirst { font-size: 9.9pt; line-height: 1.5; margin: 0 0 4mm; text-align: justify; }
.fig {
  font-family: var(--display); font-weight: 700; font-size: 9pt; letter-spacing: .04em;
  margin: 4mm 0 2mm;
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; align-items: start; }
.chart { width: 100%; height: auto; }
.ch-lab { font-family: var(--text); font-size: 8.5px; fill: var(--muted); }
.ch-val { font-family: var(--text); font-size: 8.5px; font-weight: bold; }
.chart-note { font-size: 7pt; color: var(--muted); line-height: 1.35; margin: 1.5mm 0 0; }

table.grid { width: 100%; border-collapse: collapse; font-size: 7.6pt; margin-bottom: 2mm; }
table.grid th {
  background: var(--blue); color: #fff; font-family: var(--display); font-weight: 700;
  font-size: 6.8pt; letter-spacing: .05em; text-align: left; padding: 2mm 1.6mm;
  border: .3pt solid var(--blue);
}
table.grid td { padding: 1.9mm 1.7mm; border: .3pt solid var(--hair); vertical-align: top; line-height: 1.35; }
table.grid tbody tr:nth-child(even) td { background: var(--panel); }
table.grid .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.grid .strong { font-weight: bold; }
.heat .th-name { font-weight: bold; width: 30%; }
.heat .th-sub { font-weight: normal; font-size: 6.6pt; color: var(--dim, #6b7480); margin-top: .8mm;
  line-height: 1.25; }
.thin-flag { font-family: var(--display); font-weight: 700; font-size: 5.6pt; letter-spacing: .06em;
  color: #6b6b6b; border: .4pt solid #b8b8b8; border-radius: 1pt; padding: 0 .6mm;
  vertical-align: .4mm; }
.mood-bull { color: #1b5e2c; }
.mood-bear { color: #9b1a24; }
.mood-split { color: #4a3a7a; }
.mood-neutral { color: #4a3a7a; }
.mood-nodata { color: #969698; }
.mood-num { font-weight: normal; opacity: .7; }
.heat td { padding: 2.7mm 1.7mm; font-size: 8.2pt; }
.heat th { font-size: 7.2pt; padding: 2.4mm 1.7mm; }
.heat .sig { font-size: 7pt; }
.sig { font-family: var(--display); font-weight: 700; font-size: 6.6pt; letter-spacing: .04em; white-space: nowrap; }
.sig-contested { color: #4a3a7a; }
.sig-consensus { color: #1b5e2c; }
.sig-mixed { color: #4a3a7a; }
.sig-emerging { color: var(--amber); }
.mom { font-family: var(--display); font-weight: 700; font-size: 7pt; letter-spacing: .02em; white-space: nowrap; }
.mom-new { color: #4a3a7a; }
.mom-rising { color: #1b5e2c; }
.mom-fading { color: #9b1a24; }
.mom-steady { color: #4a3a7a; }
/* Explicit green/red for the top-level asset-class heatmap's cross-run
   momentum badge — the theme-level .mom-rising/.mom-fading above stay
   house navy/crimson (brand colours doing double duty as sentiment), but
   this figure is specifically asked to read as a plain green-up / red-down
   signal at a glance, so it gets its own unambiguous palette. */
.cat-mom { font-family: var(--display); font-weight: 700; font-size: 7.6pt; letter-spacing: .02em; white-space: nowrap; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.cat-mom-up, .cat-mom-down, .cat-mom-flat, .cat-mom-new { color: #fff; }
.cat-heat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6mm; margin: 1.5mm 0 1mm; }
.cat-heat-tile {
  border-radius: 2.2px; padding: 2.2mm 2.6mm; color: #fff; min-height: 17mm;
  display: flex; flex-direction: column; justify-content: space-between;
  border: 1.2px solid rgba(255,255,255,.5);
}
.cat-heat-name { font-family: var(--display); font-weight: 700; font-size: 8pt; line-height: 1.18; }
.cat-heat-sub { font-size: 7pt; opacity: .92; margin-top: .8mm; }
.cat-heat-mom { font-size: 7.4pt; font-weight: 700; text-align: right; }
.gauge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2mm; margin: 1.5mm 0 1mm; }
.gauge-card { text-align: center; }
.gauge-card svg { width: 100%; height: auto; display: block; }
.gauge-cap { font-family: var(--display); font-weight: 700; font-size: 7.6pt; margin-top: 1mm; line-height: 1.25; }
.gauge-sub { font-size: 6.8pt; color: #5a6470; margin-top: .4mm; }
.gauge-sides { font-size: 6.6pt; margin-top: .8mm; line-height: 1.4; }
.gauge-instrument { font-family: var(--display); font-weight: 700; font-size: 6.8pt; color: var(--blue); margin-top: .6mm; text-transform: uppercase; letter-spacing: .03em; }
.cal td { font-size: 8pt; padding: 2.6mm 1.8mm; }
.cal .cal-date {
  font-family: var(--display); font-weight: 700; color: var(--blue); width: 16mm;
  white-space: nowrap; font-size: 8pt;
}
.scen { margin: 1.5mm 0 2mm; }
.scen th { background: #6f7a86; border-color: #6f7a86; }
.scen td { font-size: 7.2pt; }
.lb { margin-top: 1.5mm; }
.lb th { font-size: 6.4pt; }
.lb .lb-lbl { font-size: 6.4pt; color: var(--muted); font-style: italic; }
.src-tbl td { font-size: 7.2pt; }
.src-tbl .vt { color: var(--muted); }

.theme { margin-bottom: 4mm; }
.theme h2 {
  font-family: var(--display); font-weight: 800; font-size: 12.5pt; line-height: 1.15;
  margin: 0 0 1.2mm; letter-spacing: -.005em;
}
.tag-emerging {
  font-family: var(--display); font-weight: 700; font-size: 8pt; color: var(--amber);
  letter-spacing: .06em;
}
.meta { font-size: 7.6pt; font-style: italic; color: var(--navy); margin: 0 0 1.8mm; }
.body { font-size: 8.6pt; line-height: 1.44; text-align: justify; margin: 0 0 2mm; }
.callout {
  font-size: 8pt; line-height: 1.42; margin: 0 0 1.8mm; padding: 1.6mm 2mm;
  background: var(--panel); border-left: 2.2pt solid var(--hair);
}
.callout.trade { border-left-color: var(--blue); }
.lbl {
  font-family: var(--display); font-weight: 700; font-size: 6.8pt; letter-spacing: .08em;
  color: var(--navy); margin-right: 1.5mm;
}
.callout.trade .lbl { color: var(--blue); }
.subhead {
  font-family: var(--display); font-weight: 700; font-size: 7pt; letter-spacing: .09em;
  color: var(--muted); margin: 2.2mm 0 1.2mm; border-bottom: .3pt solid var(--hair);
  padding-bottom: .8mm;
}
.subnote { font-family: var(--text); font-weight: normal; font-style: italic; letter-spacing: 0; text-transform: none; }
.bullet { font-size: 7.8pt; line-height: 1.4; margin: 0 0 1.1mm; padding-left: 3.5mm; text-indent: -3.5mm; }
.bullet::before { content: '\25AA'; margin-right: 1.5mm; color: var(--muted); }
.st { font-family: var(--display); font-weight: 700; font-size: 6.8pt; letter-spacing: .04em; }
.st-bullish { color: var(--navy); }
.st-bearish { color: var(--crimson); }
.st-mixed { color: #5a6470; }
.st-neutral { color: var(--muted); }
.src { color: var(--muted); font-style: italic; }
.flag { color: var(--amber); font-size: 6.6pt; font-style: italic; }
.appendix-divider {
  margin: 0 0 5mm; padding: 0 0 3mm; border-bottom: 1.4pt solid var(--ink, #14171f);
}
.appendix-eyebrow {
  font-family: var(--display); font-weight: 700; font-size: 8.5pt; letter-spacing: .08em;
  text-transform: uppercase; margin: 0 0 1.6mm;
}
.appendix-note { font-size: 8pt; line-height: 1.5; color: #5a6470; margin: 0; max-width: 62ch; }
.cont-title {
  font-family: var(--display); font-weight: 700; font-size: 9pt; margin: 0 0 2mm;
  padding-bottom: 1mm; border-bottom: .3pt solid var(--hair); color: var(--muted);
}
.cont-title span { font-weight: 600; font-style: italic; color: var(--hair); }
.cont-head { color: var(--hair) !important; }
.falsify { font-size: 7.4pt; margin: 1.2mm 0 0; color: var(--muted); }
.cutline { font-size: 7.2pt; color: var(--muted); margin: 2mm 0; line-height: 1.4; }
.muted { color: var(--muted); font-size: 7.6pt; font-style: italic; }

.method { border-top: 1.2pt solid var(--ink); padding-top: 2mm; margin-top: 3mm; }
.method .subhead { border: 0; color: var(--ink); }
.mtxt { font-size: 6.9pt; line-height: 1.42; margin: 0 0 1.2mm; color: #333; }
.mtxt b { color: var(--ink); }

/* ---------- critique document -------------------------------------------- */
.crit-sub { font-size: 8.2pt; color: var(--muted); margin: 3mm 0 3mm; }
.grade-card { display: flex; gap: 5mm; background: var(--panel); border: .5pt solid var(--hair); padding: 4mm; margin-bottom: 4mm; }
.grade-badge { text-align: center; min-width: 24mm; border-right: .5pt solid var(--hair); padding-right: 4mm; }
.grade-badge .g { display: block; font-family: var(--display); font-weight: 800; font-size: 30pt; line-height: 1; color: var(--navy); }
.grade-badge .gl { font-family: var(--display); font-weight: 700; font-size: 7pt; letter-spacing: .14em; color: var(--muted); }
.grade-txt p { font-size: 8.6pt; line-height: 1.45; margin: 0 0 1.5mm; }
.audit-line { font-size: 7.6pt; color: var(--muted); font-style: italic; }
.regress { font-size: 8pt; background: #eef5fb; border-left: 2.5pt solid var(--blue); padding: 2mm 2.5mm; margin-bottom: 4mm; line-height: 1.45; }
.crit-h { font-family: var(--display); font-weight: 800; font-size: 11pt; margin: 5mm 0 2mm; color: var(--ink); }
.crit-list { margin: 0 0 2mm; padding-left: 5mm; }
.crit-list li { font-size: 8.3pt; line-height: 1.48; margin-bottom: 1.5mm; }
.crit-list.good li::marker { color: var(--navy); }
.crit-list.bad li::marker { color: var(--crimson); }
.audit-tbl td { font-size: 7.6pt; }
.audit-tbl .sev { font-family: var(--display); font-weight: 700; font-size: 6.6pt; white-space: nowrap; }
.sev-crit { color: var(--crimson); }
.sev-maj { color: var(--amber); }
.sev-min { color: var(--muted); }
.passed { font-size: 7.8pt; color: var(--navy); line-height: 1.45; margin: 0 0 2mm; }
.upg td { font-size: 7.6pt; }
.benchmark { background: var(--panel); border-left: 2.5pt solid var(--navy); padding: 3mm; font-size: 8.2pt; line-height: 1.5; }
.bm-theme { font-family: var(--display); font-weight: 700; font-size: 8.5pt; margin: 0 0 1.5mm; }
.rules-note { font-size: 7.6pt; color: var(--muted); font-style: italic; margin: 0 0 2mm; }
ol.rules { padding-left: 5mm; margin: 0; }
ol.rules li { font-size: 8.3pt; line-height: 1.5; margin-bottom: 1.2mm; }


/* ---------- page separation, corrected -------------------------------------
   Earlier attempt set a light background on .paper-stack. That was wrong in
   two ways and the screenshot showed both.

   1. .paper-stack is a full-width flex column, so a light background painted
      the ENTIRE view width, not just the sheets — a big grey field beside the
      pages. Constraining the stack to max-content makes it hug the pages.
   2. .page carries box-shadow 0 2px 22px rgba(0,0,0,.55). That is tuned for
      the dark desk it was designed against; over a light field a 55%-black
      22px blur reads as a dirty vertical smear running down the side of every
      sheet. Over a light background it needs to be a fraction of that.

   The actual goal — making the gap between two sheets obvious so a page's
   black colophon and the next page's black masthead do not fuse into one bar
   — is met by the light gutter plus a wider gap. */
.doc-view .paper-stack:not(:empty) {
  width: max-content; max-width: 100%; margin: 0 auto;
  background: #d9dee3; padding: 26px; border-radius: 5px; gap: 30px;
}
.doc-view .paper-stack .page { box-shadow: 0 1px 5px rgba(0,0,0,.30); }

/* ---------- frontier document (blue house palette, same vars as macro) --- */
.brief {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  border: .3pt solid var(--hair); margin: 0 0 3.5mm; background: var(--panel);
}
.br-cell { padding: 2.4mm 2.6mm; border-right: .3pt solid var(--hair); }
.br-cell:last-child { border-right: 0; }
.br-cell span {
  display: block; font-family: var(--display); font-weight: 700; font-size: 6.2pt;
  letter-spacing: .09em; color: var(--muted); text-transform: uppercase; margin-bottom: 1mm;
}
.br-cell b {
  font-family: var(--display); font-weight: 800; font-size: 12pt; color: var(--ink);
  line-height: 1;
}

.heat-legend {
  display: flex; align-items: center; gap: 2mm; margin: 1.8mm 0 0; flex-wrap: wrap;
}
.heat-legend .lg-lbl {
  font-family: var(--display); font-weight: 700; font-size: 6.4pt; letter-spacing: .1em;
  color: var(--muted); margin-right: 1mm;
}
.heat-legend .lg-grad {
  display: inline-block; width: 34mm; max-width: 40vw; height: 3mm; border: .3pt solid rgba(0,0,0,.14);
}
.heat-legend .lg-end { font-size: 6.6pt; color: var(--muted); }
.heat-legend .lg-box {
  display: inline-block; width: 4mm; height: 2.6mm; border: 1.2pt solid var(--amber);
  margin-left: 3mm; background: transparent;
}

.rank-bars { margin: 1.5mm 0 1mm; }
.rb-row {
  display: grid;
  grid-template-columns: minmax(0,1.7fr) minmax(0,1fr) minmax(24px,auto) minmax(30px,auto);
  align-items: center;
  gap: 2mm; padding: 1.1mm 0; border-bottom: .3pt solid #e6e9ec;
}
.rb-row:last-child { border-bottom: 0; }
.rb-name { font-size: 7.6pt; font-weight: bold; line-height: 1.25; }
.rb-driver {
  font-weight: normal; font-style: italic; color: var(--muted); font-size: 6.6pt;
  line-height: 1.3; margin-top: .5mm;
}
.rb-track { background: #eef1f4; height: 4.2mm; border: .3pt solid #e0e4e8; }
.rb-fill { height: 100%; }
.rb-val {
  font-size: 7.4pt; text-align: right; font-variant-numeric: tabular-nums; font-weight: bold;
}
.rb-ph {
  font-family: var(--display); font-weight: 700; font-size: 6.2pt; letter-spacing: .04em;
  text-align: right;
}
.rb-edge {
  font-size: 6.6pt; color: var(--muted); font-variant-numeric: tabular-nums;
  margin-right: 1.5mm;
}

.ph-pre { color: var(--amber); }
.driver-item { margin: 0 0 3.2mm; }
.driver-claim { font-size: 8.6pt; line-height: 1.5; margin: 0 0 .8mm; }
.driver-meta { font-family: var(--display); font-weight: 600; font-size: 6.4pt;
  letter-spacing: .04em; text-transform: uppercase; color: #7a7a7a; margin: 0; }
.ph-inf { color: var(--blue); }
.ph-con { color: #5a6470; }
.ph-crowd { color: var(--crimson); }

.st-pos { color: var(--navy); }
.st-neg { color: var(--crimson); }

.chip {
  display: inline-block; width: 2.6mm; height: 2.6mm; border-radius: 50%;
  margin-right: 1.4mm; border: .3pt solid rgba(0,0,0,.18); vertical-align: middle;
}
table.grid tr.in-book td { box-shadow: inset 2.2pt 0 0 var(--blue); }
.heat td { padding: 2.3mm 1.6mm; font-size: 7.9pt; }
.heat .th-name { width: 27%; }
.micro td { font-size: 7.4pt; padding: 1.9mm 1.6mm; }
.micro .mb-sec {
  font-family: var(--display); font-weight: 700; font-size: 6.6pt; color: var(--navy);
  white-space: nowrap;
}
.play td { font-size: 7.5pt; padding: 2mm 1.7mm; }
.play .pl-stage { font-size: 6.8pt; color: var(--muted); max-width: 22mm; }
.play .pl-why { color: var(--muted); }
.deep-kicker {
  font-family: var(--display); font-weight: 700; font-size: 6.8pt; letter-spacing: .11em;
  color: var(--blue); margin: 0 0 1.5mm;
}
.callout.trade { border-left-color: var(--blue); }
.callout.trade .lbl { color: var(--blue); }
.callout.contested-note { border-left-color: var(--amber); background: #fdf6ec; }
.callout.contested-note .lbl { color: var(--amber); }
.src-tbl td { font-size: 7pt; padding: 1.6mm 1.5mm; }

/* frontier panel chrome (dark UI, not the document) */
.fr-stat { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 12px; }
.fr-stat div { font-size: 11.5px; color: var(--desk-dim); }
.fr-stat b {
  display: block; color: #fff; font-family: var(--display); font-weight: 700; font-size: 17px;
  margin-top: 2px;
}

/* ---- attribution: who is behind each call ------------------------------- */
.voices {
  margin-top: .8mm; line-height: 1.35;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1.1mm;
  min-width: 0; max-width: 100%;
}
.vlbl {
  font-family: var(--display); font-weight: 700; font-size: 5.8pt; letter-spacing: .1em;
  color: var(--muted); margin-right: 1.4mm;
}
/* nowrap keeps a single NAME intact; the flex container below is what
   provides the break opportunities BETWEEN names. Without one or the other,
   a run of inline spans with no whitespace cannot wrap at all and overflows
   the page horizontally. */
.vn { font-size: 6.6pt; color: var(--ink); white-space: nowrap; display: inline-block; }
.vn-rec { font-weight: bold; }
.vorg { color: var(--muted); font-weight: normal; }
.vsep { color: var(--hair); margin: 0 1.1mm; }
.vmore { font-size: 6.4pt; color: var(--muted); margin-left: 1.2mm; font-style: italic; }
.vdot {
  display: inline-block; width: 1.5mm; height: 1.5mm; border-radius: 50%;
  background: var(--blue); margin-right: .9mm; vertical-align: middle;
}
.heat .tv { font-size: 6.4pt; line-height: 1.4; width: 21%; word-break: break-word; }
.heat .tv .vn { white-space: normal; }
.cover-list { font-size: 7pt; line-height: 1.6; margin: 1mm 0 0; }
.callout .vn { font-size: 7.2pt; }

/* ---- horizontal overflow guard ------------------------------------------
   .page is overflow:hidden, so anything wider than the 188mm content column
   is silently sliced off at the right edge with no warning — which is exactly
   what an unwrappable run of names did. These are belt-and-braces so a single
   long token can never do it again. */
.page-inner, .page-inner .blk { max-width: 100%; min-width: 0; }
.page-inner table { table-layout: auto; width: 100%; max-width: 100%; }
.page-inner td, .page-inner th { overflow-wrap: break-word; }
.chart-embed { max-width: 100%; overflow: hidden; }
.rb-name { min-width: 0; overflow-wrap: break-word; }

/* ---- mobile: the actual root cause of the clipping --------------------
   The base stylesheet already anticipates narrow screens:
     @media (max-width: 900px) { .page { width:100%; height:auto; }
                                  .page-body { height: auto; } }
   That should be enough on its own. It isn't, because the pagination code
   (both this report's and the original macro report's) sets a PLAIN INLINE
   style: body.style.height = '263mm'; body.style.overflow = 'hidden'. A
   plain inline style always wins over a normal stylesheet rule, so on a
   phone that media query was silently doing nothing — the page was still
   locked to a fixed 263mm box with overflow:hidden, and any content that
   reflowed taller under the phone's narrow width (which text always does)
   was sliced off at the bottom with no visible sign anything was wrong.

   The fix is not more JS. A stylesheet rule with !important DOES win over a
   plain inline style — that is the one case where the cascade favours the
   stylesheet — so this single rule re-enables the accommodation the base
   CSS already tried to provide, for every report (macro, frontier, and
   critique) at once, without touching any of their separate pagination
   functions. Extra bottom padding is reserved because the colophon is
   pinned to the bottom of the page with position:absolute — an
   out-of-flow element never contributes to its container's auto height, so
   without that padding the colophon would sit directly over, and hide, the
   last few lines of real content. This is the same pattern the codebase
   already uses for the critique document's auto-height page.            */
@media screen and (max-width: 900px) {
  .page-body {
    height: auto !important; overflow: visible !important;
    padding-bottom: 16mm !important;
  }
  .page { overflow: visible !important; }
  .page-inner { zoom: 1 !important; }
}

@media print {
  .doc-view .paper-stack {
    background: none !important; padding: 0 !important; border-radius: 0 !important;
    width: auto !important; max-width: none !important; gap: 0 !important;
  }
  .doc-view .paper-stack .page { box-shadow: none !important; }
  .page-body { padding-bottom: 0 !important; }
}

/* ---- last-resort text split continuation --------------------------------
   Only ever appears when a single run of prose was too long to fit even a
   fresh page as one piece — a small, clearly-marked continuation of the
   sentence that got cut, not a new independent block. */
.split-continued {
  font-size: 8.3pt; line-height: 1.5; color: var(--ink); font-style: italic;
  border-left: 2pt solid var(--hair); padding-left: 2.5mm; margin: 0;
}
.split-continued::before { content: '\2026 continued: '; color: var(--muted); font-style: normal; }

/* ---------- print --------------------------------------------------------- */
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  .rail, .topbar, .tabs, .doc-bar, .toast, #gate, .log, .progress, .panel { display: none !important; }
  #app { display: block !important; }
  .view { display: none !important; padding: 0; }
  .view.printing { display: block !important; }
  .paper-stack { gap: 0; display: block; }
  .page {
    box-shadow: none; margin: 0; page-break-after: always; break-after: page;
    width: 210mm; height: 297mm;
  }
  .page:last-child { page-break-after: auto; break-after: auto; }
  .crit-page { height: auto; min-height: 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media screen and (max-width: 900px) {
  #app.on { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; }
  .page { width: 100%; height: auto; }
  .page-body { height: auto; }
}
.chart-embed { width: 100%; }
.chart-embed .recharts-wrapper { width: 100% !important; height: auto !important; }
.chart-embed svg { width: 100%; height: auto; display: block; }
.pr-item { border: 1px solid var(--desk-line, #3a3f47); border-radius: 8px; margin-bottom: 10px;
  overflow: hidden; }
.pr-item > summary { cursor: pointer; padding: 10px 14px; font-size: 12.5px;
  display: flex; gap: 10px; align-items: baseline; list-style: none; }
.pr-item > summary::-webkit-details-marker { display: none; }
.pr-item > summary::before { content: '\25B8'; font-size: 10px; opacity: .6; }
.pr-item[open] > summary::before { content: '\25BE'; }
.pr-item > summary b { font-weight: 700; }
.pr-body { padding: 0 14px 14px; }
.pr-id { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; opacity: .65; }
.pr-badge { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(73,162,229,.35);
  color: #49A2E5; margin-left: auto; }
.pr-badge.edited { color: #C77D1E; border-color: rgba(199,125,30,.45); }
.pr-vars code { font-size: 10.5px; }
.pr-item textarea { width: 100%; min-height: 190px; font-family: ui-monospace, Menlo, Consolas,
  monospace; font-size: 11.5px; line-height: 1.5; }
.scope-chip { font: 700 10.5px/1 'Trebuchet MS', sans-serif; letter-spacing: .08em;
  text-transform: uppercase; padding: 6px 10px; border-radius: 999px;
  background: rgba(73,162,229,.14); color: #49A2E5; border: 1px solid rgba(73,162,229,.35); }
.scope-chip.fx { background: rgba(199,125,30,.14); color: #C77D1E; border-color: rgba(199,125,30,.4); }