/* Evidence Deck — shared shell.
   Palette from the distribution-partner PowerPoint, type from the portal's
   design guide (build plan rev 8: colour from the deck, type from the portal).
   Every option page below is the same world; only the scene differs. */

:root{
  --ground:#0C1F2C;
  --raised:#12303F;
  --raised-2:#173A4C;
  --hairline:#1B3949;
  --rule:#264C5F;
  --ink:#F2F6F8;
  --ink-2:#93A9B6;
  /* Lifted from #6A8493 (2026-09-04). Every small label in the deck is set in
     this colour, and against --ground it measured 4.1:1 — under the 4.5:1
     floor for body text. Legends, captions and units are exactly the things a
     partner reads from the far side of a room. */
  --ink-3:#7D97A6;
  --accent:#10B981;
  --accent-dim:#0B6E4F;
  --warm:#C4A47C;
  --cool:#4A6572;
  --sans:"Geist",system-ui,-apple-system,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,monospace;
  --serif:"Instrument Serif",Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:15px;overflow:hidden;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
}
::selection{background:var(--accent);color:var(--ground)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* One 1600x900 stage scaled to the window: the composition a partner sees is
   the composition that was designed, whatever the projector does. */
/* Centred by its own transform, NOT by the parent's alignment. A grid item
   wider than its container cannot be pulled left by place-items:center —
   Chrome clamps it to the start edge — so on any window narrower than 1600px
   the right third of every scene ran off the screen. Half the states were
   missing from the map, and nothing said so. */
#fit{position:fixed;inset:0;overflow:hidden}
/* The centring uses the independent `translate` property rather than being
   folded into `transform`, because deck.js owns `transform` for the scale. The
   two compose (translate, then transform) instead of overwriting each other. */
#stage{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:1600px;height:900px;transform-origin:center;overflow:hidden;
}

/* Title block ------------------------------------------------------------ */
/* 46px, up from 38 (JP, 2026-09-11: "the slide titles can be bigger").
   Scenes no longer set their own size; they set only a max-width so the
   title wraps where their layout needs it to. */
.scene-title{
  margin:0;font-family:var(--serif);font-weight:400;font-size:46px;
  line-height:1.04;letter-spacing:-.014em;
}
.scene-sub{
  margin:10px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-3);max-width:52ch;
}

/* The running figure ----------------------------------------------------- */
.figure{
  font-family:var(--serif);font-weight:400;line-height:.86;
  letter-spacing:-.02em;color:var(--accent);font-size:86px;
}
.figure-unit{font-size:14px;font-weight:500;color:var(--ink-2);line-height:1.4}
.caption{font-size:16px;line-height:1.55;color:var(--ink-2)}
.caption b{color:var(--ink);font-weight:500}
.caption code,.mono{font-family:var(--mono);letter-spacing:.005em}
.caption code{font-size:.87em;color:var(--warm)}

/* Presenter chrome ------------------------------------------------------- */
.beats{position:absolute;left:64px;bottom:74px;display:flex;align-items:center;gap:9px;z-index:5}
.beats .pip{width:30px;height:2px;background:var(--hairline);transition:background .45s var(--ease)}
.beats .pip.done{background:var(--cool)}
.beats .pip.now{background:var(--accent)}
.beats .hint{margin-left:14px;font-size:11.5px;color:var(--ink-3)}
kbd{
  font-family:var(--mono);font-size:11px;color:var(--ink-2);background:var(--raised);
  border:1px solid var(--hairline);border-radius:4px;padding:2px 6px;
}

/* Industry switcher. Thirteen of them share one strip across the foot of the
   stage, so a partner's own sector is always one click away and the presenter
   never hunts through a menu mid-sentence. Banking opens. */
.families{
  position:absolute;left:64px;right:64px;bottom:34px;z-index:5;
  display:flex;gap:5px;justify-content:space-between;
}
.families button{
  font:inherit;font-size:11.5px;line-height:1;color:var(--ink-3);background:none;
  border:1px solid var(--hairline);border-radius:6px;padding:7px 9px;cursor:pointer;
  white-space:nowrap;flex:0 1 auto;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.families button:hover{color:var(--ink-2);border-color:var(--rule)}
.families button[aria-pressed="true"]{color:var(--ground);background:var(--accent);border-color:var(--accent);font-weight:500}

/* Ownership chain — the shared vocabulary across all three options --------
   Rendered the same way everywhere so a partner learns it once. */
.chain{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.chain span{white-space:nowrap}
.chain .owner{color:var(--ink)}
.chain .up{color:var(--warm);font-size:.85em;transform:translateY(-1px)}
.chain .top{color:var(--accent)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:1ms !important;animation-duration:1ms !important}
}

/* Browser windows ------------------------------------------------------- */
/* A drawn browser window (Chrome on a Mac), shared by every scene that shows
   a screen. The frame is `.win`, the chrome is built by browserChrome() in
   deck.js. Scene 7 draws three of them, scene 10 draws our own portal. */
.win{position:absolute;inset:0;background:#FFFFFF;color:#202124;border-radius:10px;overflow:hidden;
     box-shadow:0 30px 70px -24px rgba(0,0,0,.75),0 3px 10px rgba(0,0,0,.35);
     font-family:var(--sans);font-size:14px;line-height:1.45;display:flex;flex-direction:column}
/* Browser chrome, drawn to read as Chrome on a Mac: the three window
   controls in their real colours, one open tab with the site's own
   favicon and its real-shaped title, a "+" for a new tab, then the
   toolbar — back, forward, reload, the address pill with Chrome's padlock
   and the URL in Chrome's two greys, a bookmark star, the profile dot and
   the kebab. Favicons are inline SVG: the Gmail "M", a county seal, a
   state shield. */
.win .chrome{background:#DEE1E6;display:flex;flex-direction:column;flex:none;
             font-family:-apple-system,"Segoe UI",Roboto,var(--sans)}
.win .chrome .bar{height:40px;display:flex;align-items:flex-end;padding:0 0 0 12px}
.win .chrome .bar .lights{display:flex;gap:8px;align-self:center;margin-right:10px}
.win .chrome .bar .lights i{width:12px;height:12px;border-radius:50%;display:block}
.win .chrome .bar .lights i:nth-child(1){background:#FF5F57;border:1px solid #E0443E}
.win .chrome .bar .lights i:nth-child(2){background:#FEBC2E;border:1px solid #DEA123}
.win .chrome .bar .lights i:nth-child(3){background:#28C840;border:1px solid #1AAB29}
.win .chrome .tab{height:34px;padding:0 10px 0 12px;border-radius:8px 8px 0 0;background:#fff;
                  display:flex;align-items:center;gap:8px;font-size:12.5px;color:#202124;width:280px;
                  position:relative}
/* No drawn "curved shoulders" beside the tab: the radial-gradient trick that
   faked Chrome's tab flare read as a stray white sliver at the tab's foot
   (JP, 2026-09-11). A plain rounded tab is enough. */
.win .chrome .tab svg{width:16px;height:16px;flex:none;display:block}
.win .chrome .tab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.win .chrome .tab em{font-style:normal;color:#5F6368;font-size:15px;line-height:1;flex:none;margin-left:4px}
.win .chrome .newtab{align-self:center;margin-left:14px;color:#5F6368;font-size:20px;line-height:1}
.win .chrome .row{height:40px;background:#fff;display:flex;align-items:center;gap:6px;padding:0 10px 0 8px}
.win .chrome .row svg{width:18px;height:18px;display:block;flex:none}
.win .chrome .row .ic{width:28px;height:28px;display:grid;place-items:center;color:#5F6368}
.win .chrome .row .ic.off{color:#BABCBE}
.win .chrome .url{flex:1;height:30px;border-radius:15px;background:#F1F3F4;margin:0 6px;
                  font-size:13px;display:flex;align-items:center;gap:0;padding:0 12px 0 10px;
                  white-space:nowrap;overflow:hidden}
.win .chrome .url .lock{width:14px;height:14px;margin-right:8px;color:#5F6368}
.win .chrome .url .host{color:#202124}
.win .chrome .url .path{color:#5F6368;flex:1;overflow:hidden;text-overflow:ellipsis}
.win .chrome .url .star{color:#5F6368;margin-left:10px}
.win .chrome .row .avatar{width:24px;height:24px;border-radius:50%;background:#1B6E4A;color:#fff;
                          display:grid;place-items:center;font-size:11px;font-weight:600;margin:0 4px}