/* ════════════════════════════════════════════════════════════════════════
   PHM DIAGNOSTIC FLOW — VISUAL REFRESH LAYER
   Shared by all four diagnostic surfaces:
     diagnostic.html · diagnostic-url-readout.html ·
     diagnostic-calibration.html · diagnostic-result-mockup.html

   Purpose: compose ON TOP of phm-design-system.css (v3.1) to unify the
   four pages into one product. No structural / JS changes — this layer
   only governs visual treatment.

   Loaded LAST in each <head>, after the page's own <style> blocks.

   Design rules enforced here:
     · DECORATIVE  → --accent  (#010048 indigo)  — eyebrows, rules, em,
                      CTAs, pills, dots, active/selected states, borders
     · NUMERIC     → --fig     (#A6601A amber)   — key figures only
     · RISK        → #A82818   (crimson)         — semantic, unchanged
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* Numerical-display amber — pinned regardless of any per-page token drift
     (Page 2's inline v3.0 block redefines --amber to indigo; --fig is immune). */
  --fig:        #A6601A;
  --fig-soft:   rgba(166, 96, 26, 0.10);
  --accent-rgb: 1, 0, 72;
}

/* ═══ 1 · FOUR-STEP JOURNEY RAIL ═══════════════════════════════════════════
   One component, four states. Sits below the engine band on every page,
   aligned to the 1100px document column. */

.phm-journey {
  background: #EFEAE0;
  padding: 20px 0 4px;
  position: relative;
  z-index: 2;
}
.phm-journey-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 36px;
}
.pj-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
}
.pj-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
  padding-top: 6px;
}
.pj-step::before {           /* connector line into this step from the previous */
  content: "";
  position: absolute;
  top: 22px;
  left: calc(-50% + 17px);
  right: calc(50% + 17px);
  height: 2px;
  background: rgba(0, 0, 0, 0.13);
  z-index: 0;
}
.pj-step:first-child::before { display: none; }
.pj-step--done::before,
.pj-step--active::before { background: var(--accent); }

.pj-marker {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: #FCFBF8;
  border: 1.5px solid rgba(0, 0, 0, 0.20);
  color: rgba(0, 0, 0, 0.38);
  font-feature-settings: "tnum" 1;
  transition: all var(--ease);
}
.pj-step--done .pj-marker {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.pj-step--done .pj-marker::after {     /* check overlays the numeral on done steps */
  content: "\2713";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: var(--accent);
  border-radius: 50%;
}
.pj-step--active .pj-marker {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(1, 0, 72, 0.14);
}
.pj-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.36);
  line-height: 1.2;
  transition: color var(--ease);
}
.pj-step--done .pj-label  { color: rgba(1, 0, 72, 0.68); }
.pj-step--active .pj-label { color: var(--accent); font-weight: 600; }

/* Retire the legacy 3-step indicator wherever it still exists in the DOM */
.phm-diag-progress { display: none !important; }

@media (max-width: 768px) {
  .phm-journey-inner { padding: 0 20px; }
  .pj-label { font-size: 9px; letter-spacing: 0.10em; }
  .pj-marker { width: 30px; height: 30px; font-size: 11px; }
  .pj-step::before { top: 20px; }
}

/* ═══ 2 · DECORATIVE → INDIGO ══════════════════════════════════════════════
   Flip every decorative use of amber to the canonical accent so all four
   pages share one decorative voice. */

/* Eyebrows + section markers */
.sec-eyebrow,
.calib-q-eyebrow,
.complete-banner-head .eyebrow,
.readout-out .eyebrow,
.action-tag,
.gate-eyebrow,
.signal-strip-label,
.ans-ledger-label { color: var(--accent) !important; }

.sec-eyebrow::before,
.calib-q-eyebrow::before,
.complete-banner-head .eyebrow::before,
.readout-out .eyebrow::before,
.gate-eyebrow::before,
.signal-strip-label::before { background: var(--accent) !important; }

/* Classmark pill (masthead, top-right) */
.masthead-classmark {
  color: var(--accent) !important;
  border-color: rgba(1, 0, 72, 0.32) !important;
}
.masthead-classmark::before {
  background: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(1, 0, 72, 0.15) !important;
}

/* Headline italic emphasis */
.masthead-h1 em,
.urlp-q em,
.signal-strip-text em,
.complete-banner-body p em,
.chart-title em,
.gate-h2 em,
.gate-headline em,
.cq-pivot {
  color: var(--accent) !important;
  background-image: linear-gradient(to bottom, transparent 78%, rgba(1, 0, 72, 0.15) 78%, rgba(1, 0, 72, 0.15) 96%, transparent 96%) !important;
}
/* The pivot / quote variants don't take the underline wash */
.cq-pivot { background-image: none !important; border-left-color: var(--accent) !important; }
.gate-h2 em, .gate-headline em { background-image: none !important; }

/* ═══ 3 · PAGE 1 — ENTRY ═══════════════════════════════════════════════════ */

/* URL panel header + live dot + submit */
.urlp-hdr { border-left-color: var(--accent) !important; }
.urlp-hdr-badge { color: var(--accent-lt) !important; }
.urlp-hdr-badge .dot {
  background: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(1, 0, 72, 0.30) !important;
}
.urlp-input-wrap:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(1, 0, 72, 0.12) !important;
}
.urlp-submit {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
.urlp-submit:hover { background: #1C1C1C !important; border-color: #1C1C1C !important; }
.urlp-alt-link {
  color: var(--accent) !important;
  border-color: rgba(1, 0, 72, 0.40) !important;
}
.urlp-alt-link:hover { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

/* Promote the URL panel to the page's visual anchor */
.url-panel {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 28px 60px -30px rgba(1, 0, 72, 0.34),
    0 10px 24px -12px rgba(0,0,0,0.14) !important;
  border-color: rgba(1, 0, 72, 0.20) !important;
}
.urlp-hdr-meta { color: var(--fig) !important; border-color: rgba(255,255,255,0.22) !important; }

/* Step anchor active marker */
.anchor-step.active::before { background: var(--accent) !important; }
.anchor-step.active .anchor-num { color: var(--accent) !important; }

/* livepulse keyframe uses amber rgba — restate in indigo */
@keyframes livepulse {
  0%   { box-shadow: 0 0 0 0 rgba(1, 0, 72, 0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(1, 0, 72, 0); }
  100% { box-shadow: 0 0 0 0 rgba(1, 0, 72, 0); }
}

/* ═══ 4 · SIGNAL STRIP / COMPOUND-QUESTION BOX (Pages 2, 3, 4) ══════════════ */

.signal-strip {
  border-left-color: var(--accent) !important;
  border-top-color: rgba(1, 0, 72, 0.16) !important;
  border-right-color: rgba(1, 0, 72, 0.16) !important;
  border-bottom-color: rgba(1, 0, 72, 0.16) !important;
  background:
    linear-gradient(to right, rgba(1, 0, 72, 0.07) 0%, rgba(1, 0, 72, 0.015) 100%),
    #fff !important;
}
.signal-strip::before { background: var(--accent) !important; box-shadow: 0 0 0 4px rgba(1,0,72,0.16) !important; }
.signal-strip-meta { border-top-color: rgba(1, 0, 72, 0.26) !important; }
.cq-box {
  border-color: rgba(1, 0, 72, 0.20) !important;
  background:
    linear-gradient(135deg, rgba(1, 0, 72, 0.10) 0%, rgba(1, 0, 72, 0.02) 60%, transparent 100%),
    #FAF7F0 !important;
}

/* ═══ 5 · PAGE 3 — CALIBRATION (de-nest + indigo) ══════════════════════════ */

/* Strip the card-in-card-in-card: the doc-section is the single container.
   Remove the inner .calib frame's border / shadow so it reads as one panel. */
.calib {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.calib-hdr { border-left-color: var(--accent) !important; }
.calib-hdr-badge { color: var(--accent-lt) !important; border-right-color: rgba(255,255,255,0.18) !important; }
.calib-hdr-badge .dot { background: var(--accent) !important; box-shadow: 0 0 0 3px rgba(1, 0, 72, 0.30) !important; }

/* Question option chips */
.calib-opt:hover {
  border-color: rgba(1, 0, 72, 0.45) !important;
  box-shadow: 0 2px 8px -4px rgba(1, 0, 72, 0.25) !important;
}
.calib-opt.selected {
  background: linear-gradient(to right, rgba(1, 0, 72, 0.08), rgba(1, 0, 72, 0.02)) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 2px 12px -4px rgba(1, 0, 72, 0.30) !important;
}
.calib-opt.selected .calib-opt-letter { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
.calib-opt.selected .calib-opt-hint { color: var(--accent) !important; }

/* Calibration sub-progress rail — "the read sharpening" */
.rail-step.active { background: linear-gradient(to bottom, rgba(1, 0, 72, 0.08) 0%, rgba(1, 0, 72, 0.02) 100%) !important; }
.rail-step.active::before { background: var(--accent) !important; }
.rail-step.active .rs-num { color: var(--accent) !important; }
/* done steps keep institutional green check (signal accumulating) — unchanged */

.btn-next { background: var(--accent) !important; border-color: var(--accent) !important; }
.btn-next:hover { background: #1C1C1C !important; border-color: #1C1C1C !important; }
.btn-cal-primary { background: var(--accent) !important; border-color: var(--accent) !important; }
.btn-cal-primary:hover { background: #1C1C1C !important; border-color: #1C1C1C !important; }
.btn-start { background: var(--accent) !important; border-color: var(--accent) !important; }
.btn-start:hover { background: #1C1C1C !important; border-color: #1C1C1C !important; }

/* Complete-state banner */
.complete-banner { border-color: rgba(1, 0, 72, 0.30) !important; border-left-color: var(--accent) !important; }
.complete-banner-head { background: rgba(1, 0, 72, 0.03) !important; }
.complete-banner-status { background: rgba(1, 0, 72, 0.10) !important; color: var(--accent) !important; }
.readout-out { background: linear-gradient(to right, rgba(1, 0, 72, 0.04) 0%, transparent 100%), #fff !important; }
.state-marker { color: var(--accent) !important; border-color: rgba(1, 0, 72, 0.30) !important; background: rgba(1, 0, 72, 0.06) !important; }
.state-marker .dot { background: var(--accent) !important; }
.ans-num { color: var(--accent) !important; }

/* Loading-state amber accents → indigo */
.phm-status-line .phm-status-dot::before,
.phm-status-line .phm-status-dot > i,
.phm-status-line .phm-status-dot::after { background: var(--accent) !important; }
.phm-loading-text strong { color: var(--accent) !important; }
.num.phm-pulse-dots,
.phm-pulse-rail .num { color: var(--accent) !important; }
.doc-section.phm-loading::before { background: linear-gradient(180deg, transparent, var(--accent), transparent) !important; }

/* ═══ 6 · PAGE 4 — RESULT ══════════════════════════════════════════════════ */

/* Signal-numbers "now" cell */
.sn-tag.now { color: var(--accent) !important; }
.sn-tag.now::before { background: var(--accent) !important; }
.sn-cell.current { background: linear-gradient(to bottom, rgba(1, 0, 72, 0.06) 0%, rgba(1, 0, 72, 0.00) 100%), #fff !important; }
.sn-cell.current::after { background: var(--accent) !important; }
.sn-source a { color: var(--accent) !important; border-bottom-color: var(--accent) !important; }
.pulse, .signal-strip::before { animation-name: pulse-indigo; }
@keyframes pulse-indigo {
  0%   { box-shadow: 0 0 0 0 rgba(1, 0, 72, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(1, 0, 72, 0); }
  100% { box-shadow: 0 0 0 0 rgba(1, 0, 72, 0); }
}

/* Chart legend / axis decorative */
.legend-swatch.narrow { background: rgba(1, 0, 72, 0.16) !important; border-color: rgba(1, 0, 72, 0.30) !important; }
.axis-label.narrow { color: var(--accent) !important; }

/* Action zone */
.pd-action::before { background: linear-gradient(to bottom, var(--accent) 0%, #A82818 100%) !important; }
.pd-action-when { color: var(--accent) !important; }
.pd-action-when::before { background: var(--accent) !important; }
.validates { border-left-color: var(--accent) !important; background: #F6F4FB !important; }
.validates-label { color: var(--accent) !important; }

/* Calibration-result icons — institutional register, not Bootstrap circles.
   Square monogram tiles with hairline borders + restrained tints. */
.pd-pos-card .pd-icon {
  font-size: 0 !important;            /* hide the dingbat glyph */
  position: relative;
}
.pd-pos-card .pd-icon::after {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.pd-pos-card.gap .pd-icon     { background: rgba(168,40,24,0.05) !important; }
.pd-pos-card.partial .pd-icon { background: rgba(1, 0, 72, 0.05) !important; color: var(--accent) !important; }
.pd-pos-card.covered .pd-icon { background: rgba(26,104,56,0.05) !important; }
.pd-pos-card.gap .pd-icon::after     { content: "GAP"; color: #A82818; }
.pd-pos-card.partial .pd-icon::after { content: "PRT"; color: var(--accent); }
.pd-pos-card.covered .pd-icon::after { content: "OK";  color: #1A6838; }
.pd-pos-card.partial .pos-status { color: var(--accent) !important; }

/* Gate */
.gate-card { border-color: rgba(1, 0, 72, 0.30) !important; }
.gate-card::before { background: linear-gradient(to right, #A82818 0%, var(--accent) 32%, var(--accent) 64%, rgba(1, 0, 72, 0.0) 100%) !important; }
.gate-includes li::before { background: var(--accent) !important; }
.gate-or a:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.btn-cta.primary:hover { background: var(--accent) !important; border-color: var(--accent) !important; }

/* Decision summary deadline accent */
.ds-cell.deadline::before { background: var(--accent) !important; }
.ds-arrow-row .arrow { color: var(--accent) !important; }

/* Reference markers (footnotes + superscripts) read as indigo system marks */
.footnotes-list li::before,
sup.fn { color: var(--accent) !important; }
.f-links a:hover { color: var(--accent-lt) !important; }

/* ═══ 7 · NUMERIC → AMBER (re-assert AFTER the indigo flips so figures win) ══
   Reserve amber strictly for key numeric displays. */
.sn-cell.current .sn-num { color: var(--fig) !important; }
.ds-cell.now .ds-num     { color: var(--fig) !important; }
.gate-trust .tnum        { color: var(--fig) !important; }
.chart-callout.amber .callout-num { color: var(--fig) !important; }
.trust-val.amber,
.id-value.amber          { color: var(--fig) !important; }
/* crimson risk figures (cascade, exposure) remain semantic crimson — untouched */

/* ═══ 8 · WORKER-DATA STRUCTURED ROW (Pages 2 & 4) ═════════════════════════
   Guarantee the company/sector/signal/window grid renders as a composed
   row — never a raw label/value stack. (Page 2's malformed `.id-cell +`
   selector left the grid undefined in some states.) */
.id-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(0,0,0,0.10);
  border-bottom: 1px solid rgba(0,0,0,0.10);
  margin-top: 24px;
}
.id-cell {
  padding: 18px 22px 18px 0;
  border-right: 1px solid rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  min-height: 132px;
}
.id-cell + .id-cell { padding-left: 22px; }
.id-cell:last-child { border-right: none; padding-right: 0; }
.id-label {
  font-family: var(--mono);
  font-size: var(--f-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.50);
  line-height: 1.2;
}
.id-value {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: var(--f-body);
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
  margin-top: 2px;
}
.id-value.crimson { color: #A82818; }
.id-sub {
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--f-label);
  color: rgba(0,0,0,0.62);
  line-height: 1.45;
  margin-top: auto;
}
@media (max-width: 768px) {
  .id-row { grid-template-columns: 1fr 1fr; }
  .id-cell { border-right: none; padding-right: 0; min-height: auto; }
  .id-cell + .id-cell { padding-left: 0; }
}

/* ═══ 9 · FORWARD CTA (one pattern, deployed three times) ══════════════════ */
.btn-forward {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: var(--f-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid var(--accent);
  transition: all var(--ease);
}
.btn-forward:hover { background: #1C1C1C; border-color: #1C1C1C; }

/* ═══ 10 · PAGE 4 — STICKY SECTION INDEX (skim + return) ═══════════════════
   Fixed left-margin folio index for the long briefing. Scroll-spy via the
   page's own additive IIFE; hides itself in live-reads mode and on narrow
   viewports. */
.phm-toc {
  position: fixed;
  top: 50%;
  left: max(16px, calc((100vw - 1100px) / 2 - 196px));
  transform: translateY(-50%);
  z-index: 80;
  width: 176px;
  display: none;                /* enabled by JS on wide viewports, static mode */
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}
.phm-toc.is-on { display: flex; }
.phm-toc-label {
  font-family: var(--mono);
  font-size: var(--f-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.40);
  padding: 0 0 12px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}
.phm-toc-link {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0 8px 14px;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all var(--ease);
}
.phm-toc-link .t-num {
  font-family: var(--mono);
  font-size: var(--f-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(0,0,0,0.35);
}
.phm-toc-link .t-txt {
  font-family: var(--font);
  font-size: var(--f-sm);
  font-weight: 400;
  color: rgba(0,0,0,0.55);
  line-height: 1.25;
}
.phm-toc-link:hover .t-txt { color: var(--ink); }
.phm-toc-link.active {
  border-left-color: var(--accent);
}
.phm-toc-link.active .t-num { color: var(--accent); }
.phm-toc-link.active .t-txt { color: var(--ink); font-weight: 600; }

/* Anchored sections clear the fixed nav when jumped to */
#phm-static-signals, #phm-static-chart, #phm-static-positions,
#phm-static-action, #phm-sec-sequence, #phm-sec-notes,
[id^="phm-fn-"] { scroll-margin-top: 84px; }

@media (max-width: 1480px) {
  /* Not enough side gutter — collapse to a top contents strip instead */
  .phm-toc.is-on {
    position: static;
    transform: none;
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 4px;
    max-width: 1100px;
    margin: 0 auto 0;
    padding: 14px 36px 0;
    align-items: center;
  }
  .phm-toc-label {
    border-bottom: none;
    padding: 0 14px 0 0;
    margin: 0;
  }
  .phm-toc-link {
    grid-template-columns: auto auto;
    gap: 6px;
    padding: 6px 12px;
    border-left: none;
    border-bottom: 2px solid transparent;
  }
  .phm-toc-link.active { border-left: none; border-bottom-color: var(--accent); }
}

/* ═══ 11 · PAGE 4 — COST CHART (undistort + enlarge) ═══════════════════════
   The SVG carries preserveAspectRatio="none"; with a fixed 280px height it
   horizontally stretched every label (the "illegible" complaint). Letting
   height resolve from the viewBox ratio removes the distortion and scales
   the whole chart up with the column. */
.chart-svg {
  height: auto !important;
  aspect-ratio: 720 / 280;
}
.chart-frame { padding: 28px 32px 16px !important; }
@media (max-width: 640px) {
  .chart-svg { aspect-ratio: 720 / 360; }
}

/* ═══ 12 · RESULT PAGE — RESTRAINT PASS (body.phm-calm) ════════════════════
   "Two products at once" → one calm briefing. Strip the box-on-box borders,
   buy whitespace, and let the key figures be the only loud things on the page.
   Scoped to .phm-calm so the other three surfaces are untouched until sign-off. */

/* --- 12a · whitespace: open the document up --- */
.phm-calm .doc-masthead { padding-top: 54px !important; padding-bottom: 8px !important; }
.phm-calm .doc-section,
.phm-calm .chart-wrap,
.phm-calm .positions,
.phm-calm .action-zone,
.phm-calm .gate-zone { padding-top: 60px !important; padding-bottom: 60px !important; }

/* --- 12b · one hero figure scale (nothing else may use it) --- */
.phm-calm .ds-num .ccy {
  font-size: 1rem !important;
  vertical-align: 0.85em !important;
  margin-right: 6px !important;
  font-weight: 500 !important;
  color: rgba(0,0,0,0.40) !important;
}

/* === 12c · THE HERO — the decision as a commanding tradeoff ===
   Two costs, huge, side by side (act-now amber vs cost-of-waiting crimson);
   the deadline as a dark full-width band; the delta as the punchline. This is
   the only thing on the page allowed to be loud. */
.phm-calm .decision-summary {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  border: none !important;
  border-top: 3px solid var(--ink) !important;
  box-shadow: none !important;
  background: none !important;
  margin: 30px 0 10px !important;
}
.phm-calm .ds-cell {
  border: none !important;
  background: none !important;
  padding: 42px 40px 36px 0 !important;
  gap: 6px !important;
}
.phm-calm .ds-cell.cascade {
  padding-left: 44px !important;
  border-left: 1px solid rgba(0,0,0,0.12) !important;
}
.phm-calm .ds-num {
  font-size: clamp(3rem, 6.5vw, 5rem) !important;
  letter-spacing: -0.05em !important;
  line-height: 0.88 !important;
  margin: 12px 0 10px !important;
}
.phm-calm .ds-cell.now .ds-num     { color: var(--fig) !important; }
.phm-calm .ds-cell.cascade .ds-num { color: #A82818 !important; }
.phm-calm .ds-label {
  color: rgba(0,0,0,0.45) !important;
  font-size: var(--f-xs) !important;
}
/* deadline → dark full-width band beneath the two costs */
.phm-calm .ds-cell.deadline {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 18px !important;
  background: #1C1C1C !important;
  padding: 18px 28px !important;
}
.phm-calm .ds-cell.deadline::before { display: none !important; }
.phm-calm .ds-cell.deadline .ds-label { color: rgba(255,255,255,0.55) !important; white-space: nowrap !important; }
.phm-calm .ds-cell.deadline .ds-num {
  font-size: var(--f-2xl) !important;
  margin: 0 !important;
  color: #fff !important;
}
.phm-calm .ds-cell.deadline .ds-sub { color: rgba(255,255,255,0.62) !important; margin-left: auto !important; text-align: right; }
/* delta = the punchline */
.phm-calm .ds-arrow-row {
  grid-column: 1 / -1 !important;
  background: none !important;
  border-top: 1px solid rgba(0,0,0,0.12) !important;
}
/* H1 restates the numbers in prose — demote it so the figures are the hero */
.phm-calm .masthead-h1 {
  font-size: clamp(20px, 2.2vw, 27px) !important;
  line-height: 1.25 !important;
  max-width: 760px;
}
.phm-calm .masthead-h1 em { background-image: none !important; }

/* --- 12d · masthead metadata → quiet, not boxed --- */
.phm-calm .id-row {
  border-bottom: none !important;
  border-top: 1px solid rgba(0,0,0,0.10) !important;
  margin-top: 30px !important;
  padding-top: 4px !important;
}
.phm-calm .id-cell {
  border-right: none !important;
  min-height: 0 !important;
  padding: 16px 24px 0 0 !important;
}
.phm-calm .id-cell + .id-cell { padding-left: 0 !important; }
.phm-calm .id-label { color: rgba(0,0,0,0.40) !important; }
.phm-calm .id-value { font-size: var(--f-md) !important; margin-top: 4px !important; }
.phm-calm .id-sub   { color: rgba(0,0,0,0.50) !important; }
.phm-calm .sev-pill { background: none !important; border: none !important; padding: 0 !important; color: #A82818 !important; }
.phm-calm .sev-pill::before { box-shadow: none !important; }

/* masthead signal-strip → quiet indented note (was a heavy boxed band) */
.phm-calm header .signal-strip {
  background: none !important;
  border: none !important;
  border-left: 2px solid var(--accent) !important;
  padding: 2px 0 2px 18px !important;
  margin-top: 22px !important;
  gap: 14px !important;
}
.phm-calm header .signal-strip::before { display: none !important; }

/* --- 12e · signal numbers (sec 01): "now" is the figure, rest recede --- */
.phm-calm .signal-numbers {
  border: none !important;
  border-top: 1px solid rgba(0,0,0,0.12) !important;
  border-bottom: 1px solid rgba(0,0,0,0.12) !important;
  background: none !important;
  column-gap: 44px !important;
}
.phm-calm .sn-cell { border-right: none !important; padding: 30px 0 26px !important; }
.phm-calm .sn-cell.current { background: none !important; }
.phm-calm .sn-cell.current::after { display: none !important; }
.phm-calm .sn-cell.current .sn-num { font-size: clamp(2.4rem, 3.6vw, 3.2rem) !important; color: var(--fig) !important; }
.phm-calm .sn-cell.baseline .sn-num { font-size: var(--f-2xl) !important; color: rgba(0,0,0,0.45) !important; }
.phm-calm .sn-cell.cascade .sn-num  { font-size: var(--f-2xl) !important; }
.phm-calm .sn-source { border-bottom: none !important; background: none !important; padding-left: 0 !important; padding-right: 0 !important; }

/* --- 12f · chart callouts: prose-weight, the chart carries the figure --- */
.phm-calm .chart-frame { border-color: rgba(0,0,0,0.10) !important; }
.phm-calm .chart-callouts { column-gap: 36px !important; }
.phm-calm .callout-num { font-size: var(--f-lg) !important; }
.phm-calm .chart-source { color: rgba(0,0,0,0.42) !important; }

/* --- 12g · positions: rows, not nested boxes --- */
.phm-calm .pos-grid { border: none !important; background: none !important; }
.phm-calm .pd-pos-card { border-bottom: 1px solid rgba(0,0,0,0.10) !important; }
.phm-calm .pd-pos-card:last-child { border-bottom: none !important; }
.phm-calm .pd-icon,
.phm-calm .pd-pos-body,
.phm-calm .pd-pos-meaning { border-right: none !important; }
.phm-calm .pd-pos-card:hover { background: #FFFCF6 !important; }
/* one risk pole only: covered's green → quiet indigo, gap stays the sole crimson flag */
.phm-calm .pd-pos-card.covered .pd-icon { background: rgba(1,0,72,0.05) !important; color: var(--accent) !important; }
.phm-calm .pd-pos-card.covered .pd-icon::after { color: var(--accent) !important; }
.phm-calm .pd-pos-card.covered .pos-status { color: var(--accent) !important; }

/* --- 12h · action card: keep its weight (it's the one move) but calm the frame --- */
.phm-calm .pd-action { box-shadow: 0 18px 40px -30px rgba(0,0,0,0.22) !important; }
.phm-calm .validates { background: #F6F4FB !important; }

/* --- 12i · gate: trust "figures" are labels, not numbers → demote from amber --- */
.phm-calm .gate-trust .tnum {
  color: var(--ink) !important;
  font-size: var(--f-sm) !important;
  font-weight: 700 !important;
}
.phm-calm .locked-row { opacity: 0.45 !important; }

/* --- 12j · green retired to keep the palette to indigo + ink + crimson --- */
.phm-calm .axis-label.now { color: rgba(0,0,0,0.55) !important; }
.phm-calm .legend-swatch.now { background: rgba(0,0,0,0.10) !important; border-color: rgba(0,0,0,0.22) !important; }
