/* ============================================================
   BOARDROOM WIRE — FLAGSHIP LAYER (anthropic-ipo 20–23, 2 Oct 2026)
   Standalone dashboards: denser than the video beat boards and built to be read on their own
   (the site embeds a 1920×1080 stage, scaled). Same v5 Ink base: flat fills, nothing glows,
   Inter for words, IBM Plex Mono for numbers, every figure from data.js.
   Differences from a beat board, on purpose:
     - a header: kicker (a name) + title (the writer's own line, verbatim)
     - a small Boardroom Wire wordmark bottom-right (`?brand=0` removes it for video use)
     - hover: a tooltip with the figure's qualifier and credit, and the rest of the board dims
   ============================================================ */

.fx-head { position: absolute; left: 120px; top: 74px; right: 120px; z-index: 6; }
.fx-kick { font-family: var(--sans); font-weight: 500; font-size: 22px; line-height: 1.25; color: var(--gold); }
.fx-title { font-family: var(--sans); font-weight: 600; font-size: 58px; line-height: 1.1; letter-spacing: -.022em; color: var(--cream); margin-top: 8px; }
.fx-hair { position: absolute; left: 120px; right: 120px; top: 212px; height: 1px; background: var(--line-strong); transform-origin: 0 50%; z-index: 5; }

/* the header's right side: one hero figure with its words */
.fx-meta { position: absolute; right: 120px; top: 66px; text-align: right; z-index: 6; }
.fx-meta .q { font-family: var(--sans); font-weight: 400; font-size: 21px; color: var(--cream-dim); line-height: 1.3; }
.stage .fx-meta .bw-m > .vr { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.fx-meta .v { font-family: var(--mono); font-weight: 700; font-size: 64px; line-height: 1; letter-spacing: -.03em; color: var(--gold); font-variant-numeric: tabular-nums; }

/* the wordmark: the site's, small */
.fx-sig { position: absolute; right: 64px; bottom: 40px; z-index: 55; pointer-events: none;
  font-family: var(--sans); font-weight: 800; font-size: 19px; letter-spacing: .01em; color: var(--cream); opacity: 0; }
.fx-sig b { font-weight: 800; color: var(--gold); }
:root[data-nobrand] .fx-sig { display: none; }

/* the provenance chip beside a hero figure: flat, a hairline box, plain words (rule 12: nothing glows).
   It carries .bw-prov once the board starts (the credit class), so the brand layer's .bw-prov placement is undone here. */
.fx-meta .fx-chip, .fx-meta .fx-chip.bw-prov { position: static; display: inline-block; max-width: none;
  font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 1.25; letter-spacing: 0; white-space: normal;
  max-width: 330px; text-align: left;
  color: var(--cream-dim); padding: 6px 11px 6px; border: 1px solid var(--line-strong); background: transparent; }

/* a company's mark + name: one single-colour system. The mark is drawn in its element's colour (cream on the
   ground, the ground colour on a gold or amber tile); without a file the name stands alone. */
.fx-lg { display: inline-flex; align-items: center; gap: .36em; white-space: nowrap; vertical-align: bottom; }
.fx-lg .fx-mk { display: none; flex: none;
  height: calc(.92em * var(--s, 1)); width: calc(.92em * var(--s, 1) * var(--ar, 1));
  position: relative; top: var(--dy, 0);
  margin-block: min(0em, calc((1em - .92em * var(--s, 1)) / 2)); }   /* a mark taller than the type never grows the line */
.fx-lg.has .fx-mk { display: inline-block; }
/* a mask row holding a mark gets room below for marks that sit low (Amazon's smile); the negative margin keeps the layout */
.stage .bw-m:has(.fx-lg.has) { padding-bottom: .34em; margin-bottom: -.26em; }
.fx-lg.has.bare .fx-nm { display: none; }
.fx-kick .fx-lg .fx-mk { color: var(--cream); }

/* video mode (?video=1): web-only words and controls go */
:root[data-video] .fx-web, :root[data-video] .fx-ctl, :root[data-video] .fx-tip { display: none !important; }

/* labels and figures */
.fx-lbl { font-family: var(--sans); font-weight: 500; color: var(--cream); white-space: nowrap; }
.fx-dim { color: var(--cream-dim); }
.fx-num { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.015em; white-space: nowrap; }
.fx-q { font-family: var(--sans); font-weight: 400; color: var(--cream-dim); }

/* hover: everything keyed fades except the hovered key */
[data-k] { transition: opacity .22s ease; }
:root[data-fxstatic] [data-k] { transition: none; }
.fx-focus [data-k]:not(.fx-on) { opacity: .22; }
.fx-hit { cursor: default; }

/* the tooltip (web only; never on a captured frame) */
.fx-tip { position: absolute; z-index: 70; pointer-events: none; opacity: 0; transition: opacity .15s ease;
  min-width: 240px; max-width: 420px; padding: 16px 20px 15px;
  background: var(--bg); border: 1px solid var(--line-strong); }
.fx-tip.on { opacity: 1; }
.fx-tip .n { font-family: var(--sans); font-weight: 600; font-size: 21px; color: var(--cream); }
.fx-tip .v { font-family: var(--mono); font-weight: 700; font-size: 34px; letter-spacing: -.02em; color: var(--gold); margin-top: 4px; font-variant-numeric: tabular-nums; }
.fx-tip .v small { font-family: var(--sans); font-weight: 400; font-size: 17px; letter-spacing: 0; color: var(--cream-dim); margin-right: 8px; }
.fx-tip .m { font-family: var(--sans); font-size: 16px; line-height: 1.45; color: var(--cream-dim); margin-top: 8px; }
.fx-tip .s { font-family: var(--sans); font-size: 13.5px; line-height: 1.4; color: var(--cream-faint); margin-top: 10px; border-top: 1px solid var(--line); padding-top: 9px; }

/* controls (the valuation calculator): flat, ink, no chrome */
.fx-ctl { position: absolute; z-index: 20; font-family: var(--sans); }
.fx-seg { display: inline-flex; border: 1px solid var(--line-strong); }
.fx-seg button { font-family: var(--sans); font-size: 17px; font-weight: 500; color: var(--cream-dim); background: transparent;
  border: 0; border-right: 1px solid var(--line-strong); padding: 10px 16px; cursor: pointer; }
.fx-seg button:last-child { border-right: 0; }
.fx-seg button.on { background: rgba(var(--gold-rgb), .14); color: var(--cream); }
.fx-range { -webkit-appearance: none; appearance: none; height: 2px; background: var(--line-strong); outline: none; cursor: pointer; }
.fx-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); border: 0; }
.fx-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--gold); border: 0; }

/* a mask-revealed line must be a block, or yPercent does nothing on an inline span */
.stage .bw-m > span { display: block; will-change: transform; }
/* blocks reveal by clipping, so their labels never squash */
.fx-clip { clip-path: inset(0 0 0 0); }

/* the recap camera (?tour=1, FX.tour): one wrapper carries every stage child but the credit layer */
.fx-cam { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }
/* a panel's layer on a tour: the whole stage, so its nodes keep their positions; it shows and hides as one piece */
.fx-layer { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; }