/* ============================================================
   Scenarios Pyramid — shared figure language.
   Loaded after deslop-tokens.css. Hand-built; no chart libs.

   THE CORE MARK — .distbar
   A diverging 5-position Likert mark. Reading order, left→right:
       Strong Hold · Weak Hold · [SILENT VOID] · Weak Deny · Strong Deny
   Every mark is translated so the MIDPOINT OF ITS SILENT MASS sits on a
   shared vertical axis. Consequence:
     · Hold mass pushes LEFT of axis, Deny mass pushes RIGHT.
     · "Silent" opens a literal hatched VOID in the center — its width is
       the panel's missingness, rendered as honest negative space.
     · Lean and missingness are visually comparable across all 31 units.
   No numbers. Length / position / void-width carry everything.
   ============================================================ */

:root {
  /* the five placements — Hold reads Volt-family, Deny reads coral-family,
     per direction. Canon: volt = affirm only, coral = deny only.
     STRONG vs WEAK now read as DISTINCT CATEGORIES, not opacity ghosts:
     strong is solid+bright; weak is a desaturated tint PLUS a diagonal
     hatch (texture), so the two separate at a glance and in grayscale. */
  --pos-sh: #CEFF00;                  /* Strong Hold — solid full Volt */
  --pos-wh: rgba(170,200,90,0.55);    /* Weak Hold — muted olive-volt (not bright volt) */
  --pos-wd: rgba(200,130,135,0.60);   /* Weak Deny — muted rose (not bright coral) */
  --pos-sd: #d9646e;                  /* Strong Deny — solid coral */
  /* weak-direction hatch tints — read over the muted tint base as texture */
  --pos-wh-hatch: rgba(206,255,0,0.85);   /* volt hatch lines (hold direction) */
  --pos-wd-hatch: rgba(217,100,110,0.85); /* coral hatch lines (deny direction) */
  --pos-si-hatch: rgba(138,143,152,0.16); /* Silent — measured void hatch */

  --coral: #d9646e;
  --axis: rgba(138,143,152,0.30);
  --axis-strong: rgba(138,143,152,0.5);
}

/* WEAK ≠ STRONG (N9 #4): weak gets a muted tint base + a direction-keyed
   diagonal hatch (mirrors the silent-hatch idiom). Defined once as shared
   declarations; each surface (.distbar__seg / .vfill__seg / .px-legend__sw)
   pulls them in below so weak reads by tint AND texture on every surface,
   never by opacity alone. Strong stays solid+bright. */
.is-wh {
  background-color: var(--pos-wh);
  background-image: repeating-linear-gradient(45deg,
    var(--pos-wh-hatch) 0 1px, transparent 1px 4px);
}
.is-wd {
  background-color: var(--pos-wd);
  background-image: repeating-linear-gradient(45deg,
    var(--pos-wd-hatch) 0 1px, transparent 1px 4px);
}

/* ── chrome shared across directions ───────────────────────── */
.px-top {
  position: sticky; top: 0; z-index: 60;
  background: rgba(16,24,32,0.88);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.px-top__row {
  max-width: 1320px; margin: 0 auto; padding: 13px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.px-wm { display: inline-flex; align-items: baseline; gap: 0; font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--color-text); }
.px-wm__dot { display:inline-block; width:6px; height:6px; border-radius:50%; background: var(--color-volt); margin: 0 1px; transform: translateY(-1px); }
.px-top__mid { display: flex; align-items: baseline; gap: 16px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-tertiary); }
.px-top__mid a { color: var(--color-text-secondary); }
.px-top__mid a:hover { color: var(--color-text); }

/* live indicator — sanctioned Volt use #2 */
.px-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-volt); }
.px-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-volt); animation: px-pulse 2s var(--ease) infinite; }
@keyframes px-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
body[data-motion="off"] .px-live::before { animation: none; }

/* mono label utility */
.px-lm { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-tertiary); }
.px-lm-s { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary); }
.px-volt { color: var(--color-volt); }

/* ── THE DISTRIBUTION MARK ──────────────────────────────────── */
.distbar {
  position: relative;
  width: 100%;
  height: var(--db-h, 16px);
}
.distbar__axis {
  position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px;
  background: var(--axis); z-index: 2; pointer-events: none;
}
.distbar__bar {
  position: absolute; top: 0; bottom: 0;
  left: 20%; width: 60%;              /* data width; translate stays within track */
  display: flex; gap: 1px;
  transform: translateX(var(--db-shift, 0%));
  transition: transform var(--dur) var(--ease);
}
.distbar__seg { height: 100%; min-width: 0; }
.distbar__seg.is-sh { background: var(--pos-sh); }
/* is-wh / is-wd weak treatment (tint + hatch) is inherited from the shared
   .is-wh / .is-wd rules above — do NOT re-set `background` here or the
   shorthand wipes the hatch. */
.distbar__seg.is-sd { background: var(--pos-sd); }
.distbar__seg.is-si {
  background-image: repeating-linear-gradient(45deg,
    var(--pos-si-hatch) 0 1px, transparent 1px 5px);
  background-color: transparent;
}
/* compact base variant: thinner, tighter */
.distbar--mini { --db-h: 10px; }

/* ── GLANCE BREAKDOWN BARS (N9 #3): diverging hold◄│►deny, coverage ∝ length ──
   Silence is dropped (the JS emits only the four engaged segments). Two reads:
     · DIRECTION — hold mass pushes left of the center axis, deny mass right,
       for an instant agree/disagree glance (the bar is centered on the
       hold/deny zero via --db-shift).
     · COVERAGE — the bar's rendered LENGTH scales ∝ engaged_n (--db-cov, 0..1),
       so a low-coverage lever reads visibly shorter; a "{n} of 80" caption
       makes the count explicit. */
.distbar--engaged { padding-right: 46px; }   /* room for the coverage caption */
.distbar--engaged .distbar__bar {
  /* center the coverage-scaled bar on the host axis; --db-shift then lands the
     hold/deny boundary on that center. Full coverage (cov=1) ⇒ the original
     60% track width; lower coverage shrinks symmetrically about the center. */
  left: 50%;
  width: calc(60% * var(--db-cov, 1));
  margin-left: calc(-30% * var(--db-cov, 1));
  transition: width var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.distbar__cov {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em;
  color: var(--color-text-tertiary); white-space: nowrap; pointer-events: none;
}

/* ── vertical distribution fill (Hold top · Silent void · Deny bottom) ── */
.vfill { display: flex; flex-direction: column; width: 100%; height: 100%; }
.vfill__seg { width: 100%; min-height: 0; }
.vfill__seg.is-sh { background: var(--pos-sh); }
/* is-wh / is-wd weak treatment inherited from the shared .is-wh / .is-wd rules. */
.vfill__seg.is-sd { background: var(--pos-sd); }
.vfill__seg.is-si { background-image: repeating-linear-gradient(45deg, var(--pos-si-hatch) 0 1px, transparent 1px 5px); background-color: transparent; }

/* legend for the 5 positions */
.px-legend { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.px-legend__item { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); }
.px-legend__sw { width: 16px; height: 9px; flex-shrink: 0; }
.px-legend__sw.is-sh { background: var(--pos-sh); }
/* is-wh / is-wd weak treatment inherited from the shared .is-wh / .is-wd rules. */
.px-legend__sw.is-sd { background: var(--pos-sd); }
.px-legend__sw.is-si { background-image: repeating-linear-gradient(45deg, var(--pos-si-hatch) 0 1px, transparent 1px 5px); border: 1px solid var(--color-border); }
/* coverage key (N9 #3): a short→long stack of neutral bars = the length channel. */
.px-legend__cov { display: inline-flex; flex-direction: column; gap: 1.5px; flex-shrink: 0; }
.px-legend__cov i { height: 2px; background: var(--color-text-secondary); display: block; }

/* ── scroll-reveal (honored only when motion allowed) ──────── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
body[data-motion="off"] .reveal { opacity: 1; transform: none; transition: none; }

/* footer */
.px-foot { border-top: 1px solid var(--color-border); margin-top: 0; padding: 40px 32px 80px; max-width: 1320px; margin-left: auto; margin-right: auto; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 20px; }
.px-foot__meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-tertiary); line-height: 1.8; }