/* Shared shell for the three operator deep-dive prototypes. Reuses the site
   palette from style.css; only the page furniture lives here. */
body { display: block; }
.wrap { max-width: 900px; margin: 0 auto; padding: 0 20px 90px; }
/* Prose sets the measure; a figure may exceed it but not by so much that the
   two stop looking related. */
.bars, .chartwrap, .qlist { max-width: 720px; }
/* Not the table scroller: a table is already sized to its content, so capping
   its container only makes it scroll sideways, which is worse than being wide.
   The widest here wants 781px and gets it. */
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 14px 20px; border-bottom: 1px solid var(--grid); position: sticky; top: 0;
  background: var(--page); z-index: 10; }
.topbar a { color: var(--ink-2); text-decoration: none; font-size: 13px; }
.topbar a:hover { color: var(--ink-1); }
.draft { background: var(--warn); color: #1b1b1b; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; }
.kicker { color: var(--s1); font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; margin: 46px 0 12px; }
h1 { font-size: 31px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px; }
.lede { color: var(--ink-2); font-size: 17px; line-height: 1.6; max-width: 62ch; margin: 0 0 10px; }
.wrap h2 { font-size: 14px; letter-spacing: .03em; text-transform: uppercase;
  margin: 44px 0 12px; color: var(--ink-1); font-weight: 700; }
.wrap h2 .n { color: var(--muted); margin-right: 9px; }
/* 70ch rather than 64: the widest table wants about this much, and prose and
   figures sharing one measure is what makes the page read as a single column
   instead of a narrow essay beside a wide spreadsheet. */
.wrap p { color: var(--ink-2); font-size: 15px; line-height: 1.72; max-width: 70ch; margin: 0 0 16px; }
.wrap p b { color: var(--ink-1); font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 11px; margin: 22px 0; max-width: 720px; }
.stat { background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 12px; padding: 13px 15px; }
.stat b { display: block; white-space: nowrap; font-size: 25px; font-weight: 650; letter-spacing: -0.01em; }
.stat span { color: var(--muted); font-size: 11.5px; line-height: 1.4; display: block; margin-top: 3px; }
.stat.good b { color: var(--good); } .stat.warn b { color: var(--warn); }
.stat.bad b { color: var(--pos); } .stat.accent b { color: var(--s1); }
/* Sized to its content, not stretched to the column.  Forced to 100% a four
   column table was spread across 860px against a text measure of about 500,
   which read as a different document and left every figure floating a long way
   from the heading above it. */
table.pt { width: auto; max-width: 100%; border-collapse: collapse;
  font-size: 13.5px; margin: 8px 0 4px; }
table.pt th, table.pt td { padding-right: 15px; }
table.pt th:last-child, table.pt td:last-child { padding-right: 0; }
table.pt th { text-align: left; color: var(--muted); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; padding: 0 10px 7px 0; white-space: nowrap; }
table.pt td { padding: 7px 10px 7px 0; border-top: 1px solid var(--grid); }
table.pt .num { text-align: right; font-variant-numeric: tabular-nums; }
table.pt tr.flag td { color: var(--pos); }
.scrollx { overflow-x: auto; }
.bars { margin: 16px 0; }
.brow { display: grid; grid-template-columns: 190px 1fr 86px; gap: 12px;
  align-items: center; font-size: 13px; padding: 5px 0; }
.brow .bar { height: 15px; border-radius: 4px; background: var(--s1); min-width: 2px; }
.brow .bar.alt { background: var(--baseline); }
.brow .v { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-1); }
/* The sentence each section turns on, set as a pull quote: a short rule, some
   air, and the text a step up in size and contrast. It was a tinted panel with
   a coloured left bar, which is a tell rather than a design. */
.callout { margin: 30px 0; max-width: 60ch; }
.callout::before { content: ""; display: block; width: 42px; height: 2px;
  background: var(--ink-2); margin-bottom: 15px; }
.callout p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink-1);
  font-weight: 450; letter-spacing: -0.005em; }
.caveat::before { background: var(--warn); }
.caveat p { color: var(--ink-2); font-size: 15px; }
.note { color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 9px; }
.foot { margin-top: 64px; border-top: 1px solid var(--grid); padding-top: 20px;
  color: var(--muted); font-size: 12.5px; line-height: 1.7; }
@media (max-width: 620px) { h1 { font-size: 25px; } .brow { grid-template-columns: 120px 1fr 70px; } }

/* section 04's two-part list: the unknowns must read as prominently as the
   knowns, so the bullets get the same weight as body copy */
#unestablished ul { margin: 6px 0 0; padding-left: 20px; }
#unestablished li { color: var(--ink-2); font-size: 15px; line-height: 1.72;
  margin-bottom: 10px; max-width: 64ch; }

/* Scatter.  Axes are log and signed-log because the data spans three orders of
   magnitude horizontally and runs from -1,488 to +14 vertically; ticks carry
   real values so the compression is visible rather than hidden. */
svg.sc { width: 100%; min-width: 620px; height: auto; display: block; margin: 14px 0 4px; }
svg.sc .grid { stroke: var(--grid); stroke-width: 1; }
svg.sc .zero { stroke: var(--ink-2); stroke-width: 1.5; }
svg.sc .tick { fill: var(--muted); font-size: 11px; }
svg.sc .tick.mid { text-anchor: middle; }
svg.sc .tick.end { text-anchor: end; }
svg.sc .pt { fill: var(--pos); fill-opacity: .85; }
svg.sc .pt.up { fill: var(--good); }
svg.sc .pt.hl { fill: var(--s1); stroke: var(--page); stroke-width: 2; }
svg.sc .lbl { fill: var(--ink-2); font-size: 10.5px; }
svg.sc .lbl.hl { fill: var(--ink-1); font-weight: 700; font-size: 12px; }

/* experience: journey stages, sparklines, priority matrix */
.stage { margin: 26px 0 30px; }
.stage h3 { font-size: 14px; margin: 0 0 2px; }
.stage .blurb { color: var(--ink-1); font-size: 12px; margin: 0 0 10px; }
.spark { width: 96px; height: 30px; display: block; color: var(--accent, #6aa9ff); }
.opspark { color: var(--ink-1); opacity: .75; }
.opline { font-size: 12px; color: var(--ink-1); margin: 10px 0 2px; }
.wnote { font-size: 11px; color: var(--ink-1); cursor: help; margin-left: 3px; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.down { color: #e0736d; }
td.up { color: #6fbf8b; }
.chart .gridline { stroke: currentColor; opacity: .22; stroke-dasharray: 3 3; }
.chart .axis { stroke: currentColor; opacity: .45; }
.chart .tick, .chart .alab, .chart .qlab { fill: currentColor; font-size: 10px; opacity: .7; }
.chart .alab { font-size: 11px; opacity: .85; }
.chart .quad { fill: currentColor; font-size: 10px; opacity: .30; letter-spacing: .12em; }
.chart .plab { fill: currentColor; font-size: 10px; }
.chart .pt { fill: currentColor; opacity: .55; }
.chart .pt.fix-first { fill: #e0736d; opacity: .95; }
.chart .pt.protect { fill: #6fbf8b; opacity: .85; }
.opspark { display: flex; align-items: center; gap: 8px; }
.opspark .oend { font-size: 10px; color: var(--ink-1); white-space: nowrap; }
.chart .leader { stroke: currentColor; opacity: .45; stroke-width: .8; }

/* interactive priority matrix */
.chartwrap { position: relative; }
.chart .hit { fill: transparent; stroke: none; }
.chart .ptg { cursor: pointer; }
.chart .ptg:focus { outline: none; }
.chart .ptg:focus .pt, .chart .ptg.lit .pt { stroke: var(--ink-0, #fff);
  stroke-width: 1.6; opacity: 1; }
.tip { position: absolute; pointer-events: none; opacity: 0; transform: translate(12px, -50%);
  max-width: 260px; padding: 8px 10px; border: 1px solid var(--grid);
  background: var(--panel, #0f1724); border-radius: 5px; font-size: 11.5px;
  line-height: 1.45; transition: opacity .12s; z-index: 3; }
.tip.on { opacity: 1; }
.tip b { display: block; font-size: 12.5px; margin-bottom: 3px; }
.tip span { display: block; color: var(--ink-1); }
.qgroup { margin: 22px 0 0; }
.qgroup h3 { font-size: 13px; margin: 0 0 1px; }
.qgroup .blurb { font-size: 11.5px; color: var(--ink-1); margin: 0 0 8px; }
.qlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px; }
.qitem { display: flex; justify-content: space-between; gap: 10px; text-align: left;
  padding: 5px 8px; border: 1px solid var(--grid); border-radius: 4px;
  background: transparent; color: inherit; font: inherit; font-size: 11.5px;
  cursor: pointer; }
.qitem:hover, .qitem:focus, .qitem.lit { border-color: var(--ink-1); outline: none; }
.qitem .qv { color: var(--ink-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qgroup.fix-first h3 { color: #e0736d; }
.qgroup.protect h3 { color: #6fbf8b; }
.tip.left { transform: translate(-100%, -50%) translateX(-12px); }

/* The five stage tables are one grid, not five.  Sized to content they put
   Score, Since, Trend and Weakest route at a different x in every stage, and
   the whole section visibly jumped as you scrolled it. */
.stage table.pt { table-layout: fixed; width: 100%; max-width: 669px; }
.stage table.pt col.c-point { width: 200px; }
.stage table.pt col.c-score { width: 52px; }
.stage table.pt col.c-since { width: 58px; }
.stage table.pt col.c-trend { width: 112px; }
.stage table.pt col.c-worst { width: auto; }
/* Headers wrap rather than truncate.  Fixed columns plus nowrap plus ellipsis
   turned "Latest score" into "LATES..." and clipped the route names. */
.stage table.pt th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
.stage table.pt td.point, .stage table.pt td.worst { white-space: normal; }
.stage table.pt td.point { white-space: normal; }
/* Numbers right aligned everywhere, not left in one section and right in
   another. */
.stage table.pt td.num, .stage table.pt th.num { text-align: right; }
/* four quadrants, four colours */
.chart .pt.watch { fill: #d9a05b; opacity: .8; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 0;
  font-size: 11px; color: var(--ink-1); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.srange { font-size: 10px; color: var(--muted); white-space: nowrap; }
.tip.below { transform: translate(12px, 10px); }
.tip.on.left.below { transform: translate(-100%, 10px) translateX(-12px); }
.legend i.q-fix-first { background: #e0736d; }
.legend i.q-protect { background: #6fbf8b; }
.legend i.q-watch { background: #d9a05b; }
.legend i.q-leave-alone { background: #6b7a90; }

/* section 07: one block per test, not a table wider than the page */
.rtest { max-width: 669px; margin: 18px 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--grid); }
.rtest h3 { font-size: 13.5px; margin: 0 0 3px; }
.rtest .blurb { font-size: 12px; color: var(--ink-1); margin: 0 0 9px; max-width: none; }
.rnums { display: flex; flex-wrap: wrap; gap: 22px; }
.rnums > span { display: flex; flex-direction: column; }
.rnums b { font-size: 17px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.rnums span span { font-size: 10.5px; color: var(--muted); }
.verdict { font-size: 12px; margin: 9px 0 0; letter-spacing: .01em; }
.verdict.strong { color: #6fbf8b; }
.verdict.weak { color: #d9a05b; }
.verdict.flat, .verdict.none { color: var(--muted); }