/* Evidence Deck — the shell around the scenes.
   deck.css owns the world (palette, type, stage, the shared vocabulary of a
   pip and an ownership chain). This file owns only the frame: how one scene
   replaces another, and the small amount of chrome a presenter needs.

   The chrome is deliberately thin. Every pixel it takes is a pixel of
   evidence it covers, and the evidence is the argument. Where the presenter
   needs more than a position — where am I, what else is there — that lives
   behind Esc rather than permanently on screen. */

/* The scene layer ------------------------------------------------------- */
#scenes{position:absolute;inset:0}
/* deck.css gives .families a display, which beats the UA rule for [hidden].
   Scenes that do not switch by industry must not leave an empty strip. */
.families[hidden]{display:none}
.scene{position:absolute;inset:0;opacity:1;transform:none}

/* One authored transition, asymmetric: the outgoing scene leaves quickly so
   the deck never feels like it is waiting, the incoming one settles. */
.scene.entering{opacity:0;transform:translateY(12px)}
.scene.settling{transition:opacity .34s var(--ease),transform .34s var(--ease)}
.scene.leaving{
  opacity:0;transform:translateY(-8px);
  transition:opacity .17s var(--ease),transform .17s var(--ease);
  pointer-events:none;
}

/* Presenter chrome ------------------------------------------------------ */
/* Reuses .beats / .pip positioning from deck.css; adds the deck position in
   front of the beat pips so one glance answers both "where in this scene"
   and "where in the deck". */
.rail{gap:12px;transition:opacity .3s var(--ease)}
/* Hidden on the title and closing cards, whose white band it would sit on. */
.rail[data-card="true"]{opacity:0;pointer-events:none}
.rail .pos{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-3);
  min-width:2.4em;
}
.rail .pips{display:flex;align-items:center;gap:9px}
.rail .hint{margin-left:4px}
.rail[data-single="true"] .pips{display:none}

/* Scene index ----------------------------------------------------------- */
/* Opens over the live scene rather than replacing it, so the presenter keeps
   their place while they look. Built scenes only — see lib/scenes.js. */
/* Opaque, not translucent. A 104px headline showing through the first row
   made the list harder to read than the scene it was covering. */
#overlay{
  position:absolute;inset:0;z-index:20;display:none;
  background:var(--ground);
  padding:96px 120px 72px;
}
#overlay[data-open="true"]{display:flex;flex-direction:column;animation:ov .22s var(--ease)}
@keyframes ov{from{opacity:0}to{opacity:1}}

#overlay h2{
  margin:0 0 4px;font-family:var(--serif);font-weight:400;font-size:30px;
  letter-spacing:-.01em;color:var(--ink);
}
#overlay .lead{margin:0 0 34px;font-size:14px;color:var(--ink-3)}

.jump{
  display:flex;flex-direction:column;border-top:1px solid var(--hairline);
  flex:1;min-height:0;overflow-y:auto;
}
.jump button{
  font:inherit;text-align:left;background:none;border:0;cursor:pointer;
  border-bottom:1px solid var(--hairline);padding:20px 16px 20px 0;
  display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:28px;align-items:baseline;
  color:var(--ink-2);transition:color .2s var(--ease),background .2s var(--ease);
}
.jump button:hover,.jump button[data-cursor="true"]{
  color:var(--ink);background:linear-gradient(90deg,rgba(255,255,255,.05),transparent 72%);
}
/* The cursor row IS the focus row — the shell moves focus and the cursor
   together — so the row's own state carries focus visibility and the stock
   ring only reads as a stray card border around it. */
.jump button:focus-visible{outline:none}
.jump .n{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);letter-spacing:.05em}
.jump .t{font-size:19px;color:inherit;line-height:1.25}
.jump .b{display:block;font-size:13.5px;color:var(--ink-3);margin-top:4px;line-height:1.45}
.jump .here{font-size:11.5px;color:var(--accent);letter-spacing:.06em;text-transform:uppercase}
.jump button[data-current="true"] .n{color:var(--accent)}
.jump button[data-cursor="true"] .n{color:var(--accent)}

/* Key legend ------------------------------------------------------------ */
.keys{
  flex:none;display:flex;flex-wrap:wrap;gap:10px 34px;
  margin-top:26px;padding-top:22px;border-top:1px solid var(--hairline);
}
.keys span{font-size:12.5px;color:var(--ink-3);display:inline-flex;align-items:center;gap:8px}

/* Title and closing cards ----------------------------------------------- */
/* The composition of the PDF cover the partners already have: the dark
   ground carries the title; a white band along the foot carries the
   coloured logo, which is designed for white and reads wrong on anything
   else (JP, 2026-09-08, fifth pass — after a recoloured and then a pure-white
   version were both rejected). Same type as the rest of the deck: Geist,
   heavy, tight. Unbounded is gone ("too artisty"). */
.card{position:absolute;inset:0}
.card .top{position:absolute;left:0;right:0;top:0;bottom:200px;padding:0 96px;
           display:flex;flex-direction:column;justify-content:center}
.card .band{position:absolute;left:0;right:0;bottom:0;height:200px;background:#FFFFFF;
            display:flex;align-items:center;justify-content:flex-end;padding:0 96px}
.card .band .logo{display:block;height:58px;width:auto}
.card .display{
  font-family:var(--sans);font-weight:600;
  font-size:84px;line-height:1.04;letter-spacing:-.03em;color:var(--ink);
  margin:0;max-width:14ch;
}
.card .display em{font-style:normal;color:var(--ink-3)}

/* The card background: the deck's own US outline, ghosted, whole top to
   bottom and bleeding off the right edge, with a slow west-to-east sweep
   in which each state briefly warms. Built by cardBackground() in deck.js
   for BOTH cards (title 2026-09-11 morning, closing the same afternoon:
   "the last page can have the same USA map as the first one"). It is
   background, not a chart: no legend, no figure, never above the scrim.
   The sizes are px against the 1600x900 stage on purpose. */
.card .bg{position:absolute;left:0;right:0;top:0;bottom:200px;overflow:hidden;
          animation:card-rise 1.2s var(--ease) both}
.card .bg svg{position:absolute;right:-200px;top:10px;width:1100px;height:auto;
              display:block;overflow:visible}
.card .bg path{fill:var(--raised);stroke:var(--ground);stroke-width:1.4;stroke-linejoin:round;
               animation:card-sweep 30s linear infinite both}
.card .bg .separators{display:none}
.card .bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,var(--ground) 18%,rgba(12,31,44,.88) 42%,rgba(12,31,44,.16) 74%,rgba(12,31,44,.26) 100%),
    linear-gradient(0deg,var(--ground) 1%,transparent 26%);
}
.card .top{z-index:1}
.card .display{position:relative}
.card .rule{width:96px;height:3px;background:var(--accent);border-radius:2px;margin:0 0 30px;
            animation:card-rise .8s var(--ease) .35s both}
@keyframes card-sweep{
  0%,100%{fill:var(--raised)}
  6%     {fill:color-mix(in oklab, var(--warm) 26%, var(--raised))}
  12%    {fill:var(--raised)}
}
@keyframes card-rise{from{opacity:0}to{opacity:1}}
.card .sub{margin:22px 0 0;font-size:18px;line-height:1.5;color:var(--ink-2);max-width:46ch}

.people{
  display:flex;gap:0;border-top:1px solid var(--hairline);padding-top:22px;margin-top:48px;
  max-width:780px;
  opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.card[data-beat="1"] .people{opacity:1;transform:none}
.people div{flex:0 0 auto;padding-right:64px}
.people b{display:block;font-size:17px;font-weight:500;color:var(--ink);letter-spacing:-.005em}
.people span{display:block;font-size:13px;color:var(--ink-3);margin-top:3px}