/* ============================================================
   RowFold — the "how it works" film.

   A chaptered product walkthrough (~3:08 narrated, ~106s muted) that opens over
   the marketing page.
   Markup: Pages/Shared/_HowItWorksFilm.cshtml   Player: wwwroot/js/film.js

   Three mechanics hold the whole thing up:

   1. SCALE, DON'T REFLOW. Every scene is composed on a fixed 900x480 canvas
      (.film-canvas) that film.js scales with --fs. Nothing inside a scene is
      responsive; the canvas shrinks as one piece so a phone sees the same
      composition, just smaller. Narration stays at readable size outside it.
   2. TIME IS CSS, PROGRESS IS JS. Scene animations are pure CSS keyframes
      staggered by a per-element --d; film.js only decides which scene is
      active and drives the chapter progress bar. Pausing = animation-play-state.
      Restart = the display:none -> grid flip, which replays keyframes for free.

      Every cue is therefore `calc(var(--d) + var(--lead))`, never --d alone.
      Each chapter's narration opens with a short lead-in ("Not everything should
      go straight in.") before its substance, and --d is measured from chapter start —
      so without the offset every visual would fire while the narrator was still
      announcing the chapter. film.js sets --lead per scene from data-lead, and
      sets it to 0 when the film is playing muted, because with no voice there is
      no lead-in to wait out. Regenerate the numbers with docs/make-film-vo.py,
      which measures and prints them.
   3. EVERY ANIMATION ENDS ON THE MEANINGFUL FRAME (animation-fill-mode: both).
      Reduced-motion users get that frame instantly and lose nothing but the
      motion — which is also why the cross-fading scenes need explicit final
      states in the reduced-motion block at the bottom.

   Without JS the film still opens (:target) and reads as a scrolling
   storyboard; .js on the root is what switches it into the player.
   ============================================================ */

/* ---------- What the film needs that marketing.css owns ----------
   The film used to live only on the marketing site, where marketing.css supplies
   .live-dot and the .btn size/tone modifiers its scenes use. It now also plays on
   /Account/Register and /Onboarding/Assembling, which load the AUTH layout and
   therefore never see marketing.css — so its eyebrow dot and its end-card buttons
   rendered unstyled there. Scoped under .film so the marketing copies still win on
   their own pages and nothing outside the film is touched. */
.film .live-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 0 4px rgba(217,242,92,.12); animation: film-signal 2.2s infinite;
}
@keyframes film-signal { 50% { box-shadow: 0 0 0 7px rgba(217,242,92,0); } }
.film .btn.xl { padding: 15px 24px; border-radius: var(--radius); font-size: 15px; }
.film .btn.light { color: var(--paper); border-color: rgba(255,255,255,.55); }
.film .btn.light:hover { background: var(--paper); color: var(--ink-900); }
@media (prefers-reduced-motion: reduce) { .film .live-dot { animation: none; } }

/* ---------- The trigger (hero) ---------- */
.btn .btn-play { flex: none; }
.btn .btn-play .bp-disc { fill: var(--accent); }
.btn .btn-play .bp-tri { fill: var(--ink-900); }
.btn .btn-time {
    padding: 2px 7px; border-radius: 999px;
    background: rgba(255,255,255,.14); color: var(--ink-300);
    font-family: var(--font-mono); font-size: 10px; font-style: normal; font-weight: 500;
}
.btn:hover .btn-time { color: var(--paper); }

/* ---------- Overlay shell ---------- */
.film { display: none; position: fixed; inset: 0; z-index: 200; }
.film:target, .film.is-open { display: block; }
body.film-open { overflow: hidden; }

.film-backdrop {
    position: absolute; inset: 0;
    background: rgba(4, 6, 16, .82);
    backdrop-filter: blur(10px);
    animation: fs-fade .28s ease both;
}
.film-dialog {
    position: relative;
    display: flex; flex-direction: column;
    width: min(1120px, 94vw); max-height: 94vh;
    margin: 3vh auto;
    padding: 18px 20px 16px;
    border: 1px solid rgba(255,255,255,.14); border-radius: 22px;
    background: linear-gradient(180deg, #0F1530, #0A0D22 60%);
    box-shadow: 0 60px 120px -40px #000, 0 0 0 1px rgba(255,255,255,.04) inset;
    color: var(--paper);
    animation: fs-rise .38s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes fs-fade { from { opacity: 0 } }
@keyframes fs-rise { from { opacity: 0; transform: translateY(18px) scale(.985) } }

/* ---------- Inline mode ----------
   The same film, playing IN a page rather than over it: signup shows it beside the
   form so the minute spent making an account buys a demonstration. Everything modal
   is stripped — backdrop, dialog chrome, the close button — and the screen is set
   shorter, because here it shares a column rather than owning the viewport.
   film.js turns off the focus trap and key capture to match; see `inline` there. */
.film.is-inline { display: block; position: static; z-index: auto; }
.film.is-inline .film-backdrop,
.film.is-inline .film-close { display: none; }
.film.is-inline .film-dialog {
    width: auto; max-height: none; margin: 0; padding: 0;
    border: none; border-radius: 0; background: none; box-shadow: none; animation: none;
}
.film.is-inline .film-head { margin-bottom: 10px; }
.film.is-inline .film-head h2 { display: none; }
.film.is-inline .film-screen { height: clamp(240px, 30vh, 320px); }

.film-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.film-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--accent); font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .14em;
}
.film-head h2 { margin: 7px 0 0; font-size: clamp(17px, 2vw, 23px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.film-head-side { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.film-count { color: var(--ink-300); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; }
.film-close {
    display: grid; place-items: center; width: 36px; height: 36px;
    border: 1px solid rgba(255,255,255,.2); border-radius: 50%;
    color: var(--paper); font-size: 14px; line-height: 1; text-decoration: none;
    transition: 140ms;
}
.film-close:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); color: var(--paper); }

/* ---------- Screen + scenes ---------- */
.film-screen { position: relative; height: clamp(390px, 63vh, 640px); }
.film-scene { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; gap: 14px; }
.film.js .film-scene { display: none; }
.film.js .film-scene.is-active { display: grid; }
.film.is-paused .film-scene.is-active,
.film.is-paused .film-scene.is-active *,
.film.is-paused .film-scene.is-active *::before,
.film.is-paused .film-scene.is-active *::after { animation-play-state: paused; }

.film-vis {
    position: relative; overflow: hidden;
    border: 1px solid var(--border-2); border-radius: 16px;
    background: #F4F0E6;
}
.film-vis.is-dark { border-color: rgba(255,255,255,.12); background: var(--ink-950); }
.film-vis.is-dark::before {
    content: ""; position: absolute; inset: 0; opacity: .5;
    background-image: radial-gradient(rgba(217,242,92,.2) .7px, transparent .7px);
    background-size: 24px 24px;
}
/* Centred by absolute positioning, NOT by the frame's alignment: when a grid/flex
   item is bigger than its container — which the 900x480 canvas is on every narrow
   screen — `center` clamps to start to keep the overflow reachable, so the picture
   ended up anchored top-left and clipped along the bottom edge.
   Order matters: scale() then translate() means the -50% shift is measured in
   scaled units, which lands the centre on the frame's centre at any --fs. */
.film-canvas {
    position: absolute; left: 50%; top: 50%;
    width: 900px; height: 480px;
    transform: scale(var(--fs, 1)) translate(-50%, -50%);
    transform-origin: 0 0;
}

.film-say { display: grid; grid-template-columns: 132px 1fr; gap: 18px; align-items: start; min-height: 74px; padding: 0 2px; }
.film-say b { color: var(--accent); font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding-top: 3px; }
.film-say p { margin: 0; color: var(--ink-200); font-size: clamp(13px, 1.15vw, 15.5px); line-height: 1.5; max-width: 78ch; }
.film-say.is-quiet p { color: var(--ink-300); }
.film.js .film-scene.is-active .film-say b { animation: fs-in .5s ease .1s both; }
.film.js .film-scene.is-active .film-say p { animation: fs-in .6s ease .2s both; }

/* ---------- Chapter title card ----------
   Fills the lead-in. Each chapter's narration opens by naming itself ("Now,
   approvals.") before it says anything the picture illustrates, which left the frame
   empty for 1.9–3.2s at every chapter turn. This puts the chapter's name in that
   window, so the picture and the voice say the same thing at the same time.

   Its duration IS --lead, which does the whole job with no extra timing to keep in
   sync: the card lasts exactly as long as the announcement and clears precisely as
   the first cue fires. It also means muted playback never sees it (--lead is 0 there,
   so the animation has no duration and `both` holds the final, hidden frame), which is
   right — with no voice there is no announcement to cover. Same reason chapter 11 has
   no card in the markup: it signs off rather than being announced.

   The percentage keyframes make the fade proportional, so a 1.9s card and a 3.2s card
   both read the same rather than one snapping and the other drifting. */
.film-chapter-card {
    position: absolute; inset: 0; z-index: 2;
    display: grid; align-content: center; justify-items: center; gap: 12px;
    padding: 0 9%; text-align: center;
    pointer-events: none;                 /* clicking the picture still toggles pause */
    animation: film-chapter-card var(--lead, 0s) both;
}
.film-chapter-card span {
    color: var(--text-faint); font-family: var(--font-mono);
    font-size: 11px; font-weight: 600; letter-spacing: .22em;
}
.film-chapter-card em {
    max-width: 22ch;
    color: var(--text); font-style: normal; font-weight: 560;
    /* Fluid like .film-head h2 and .film-say p. The binding constraint is the picture
       panel's height, not the page width: on a phone it collapses to ~177px because the
       caption below takes more rows, and a flat 30px left a two-line title filling it. */
    font-size: clamp(21px, 3.4vw, 30px);
    letter-spacing: -.035em; line-height: 1.12;
}
.film-vis.is-dark .film-chapter-card span { color: var(--accent); }
.film-vis.is-dark .film-chapter-card em { color: var(--paper); }
@keyframes film-chapter-card {
    0%   { opacity: 0; transform: translateY(9px) }
    14%  { opacity: 1; transform: none }
    78%  { opacity: 1; transform: none }
    100% { opacity: 0; transform: translateY(-7px) }
}

/* ---------- Shared scene primitives ---------- */
@keyframes fs-in   { from { opacity: 0; transform: translateY(10px) } }
@keyframes fs-pop  { from { opacity: 0; transform: translateY(8px) scale(.94) } }
@keyframes fs-draw { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }
@keyframes fs-wipe { from { opacity: 0; transform: scaleX(0) } }

.fs-cap { position: absolute; color: var(--text-faint); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .16em; animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }

.fs-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fs-edges path {
    fill: none; stroke: var(--relation); stroke-width: 1.6; stroke-linecap: round; opacity: .5;
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: fs-draw .7s cubic-bezier(.4,0,.2,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.fs-edges.is-path path.is-live { stroke: var(--accent-deep); stroke-width: 3.4; opacity: .9; animation-duration: .5s; }

.fs-node {
    position: absolute; width: 132px; padding: 9px 10px;
    border: 1px solid var(--border); border-top: 3px solid var(--ink-400); border-radius: 9px;
    background: #fff; box-shadow: 0 10px 18px -14px rgba(14,20,40,.5);
    color: var(--text); font-size: 12px; font-weight: 650; letter-spacing: -.015em; line-height: 1.25;
    animation: fs-pop .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.fs-node span { display: block; margin-bottom: 3px; color: var(--text-muted); font-family: var(--font-mono); font-size: 7.5px; font-weight: 500; letter-spacing: .1em; }
.fs-node.is-hub { width: 150px; box-shadow: 0 0 0 3px rgba(217,242,92,.3), 0 16px 30px -16px rgba(14,20,40,.55); }
.c-violet { border-top-color: var(--violet) } .c-lime { border-top-color: var(--accent-deep) }
.c-sky    { border-top-color: var(--sky) }    .c-coral { border-top-color: var(--coral) }
.c-amber  { border-top-color: var(--amber) }  .is-hub  { border-top-color: var(--accent-deep) }

.fs-table {
    position: absolute; width: 190px; padding: 11px;
    border: 1px solid var(--border); border-radius: 12px; background: #fff;
    box-shadow: 0 14px 26px -18px rgba(14,20,40,.5);
    animation: fs-pop .55s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.ft-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--border-soft); }
.ft-head b { color: var(--text); font-size: 12.5px; letter-spacing: -.02em; }
.ft-head span { color: var(--text-muted); font-family: var(--font-mono); font-size: 8px; }
.ft-f {
    display: block; margin-top: 4px; padding: 4px 7px; border-radius: 6px;
    font-size: 9.5px; font-style: normal; font-weight: 600; letter-spacing: -.01em;
    background: var(--paper-2); color: var(--text-2);
}
.t-rel     { background: var(--relation-soft); color: var(--relation-ink) }
.t-look    { background: var(--lookup-soft);   color: var(--lookup-ink) }
.t-rollup  { background: var(--rollup-soft);   color: var(--rollup-ink) }
.t-date    { background: var(--sky-soft);      color: var(--lookup-ink) }
.t-select  { background: var(--violet-soft);   color: var(--relation-ink) }
.t-money   { background: var(--mint-soft);     color: var(--emerald) }
.t-num     { background: var(--amber-soft);    color: #8A5B08 }
.t-auto    { background: var(--accent-tint);   color: var(--accent-ink) }
.t-address { background: var(--coral-soft);    color: var(--rollup-ink) }
.t-file    { background: var(--rose-soft);     color: #A81E5B }
.t-more    { background: transparent; border: 1px dashed var(--border-2); color: var(--text-muted) }

/* ============================================================
   01 · The idea
   ============================================================ */
.s1-src {
    position: absolute; width: 168px; padding: 12px 13px;
    border: 1px solid var(--border); border-radius: 10px; background: #fff;
    box-shadow: 0 16px 28px -20px rgba(14,20,40,.55);
    color: var(--text-2); font-size: 12px; font-weight: 600; letter-spacing: -.01em;
    transform: rotate(var(--r, 0deg));
    animation: s1-drop .6s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both,
               s1-fold .9s cubic-bezier(.5,0,.2,1) calc(3.1s + var(--lead, 0s)) forwards;
}
.s1-src small { display: block; margin-top: 3px; color: var(--text-faint); font-family: var(--font-mono); font-size: 8px; font-weight: 500; }
@keyframes s1-drop { from { opacity: 0; transform: rotate(var(--r)) translateY(-14px) scale(.9) } }
@keyframes s1-fold { to { opacity: 0; transform: rotate(0deg) translate(var(--tx), var(--ty)) scale(.55); filter: blur(2px) } }
.s1-graph { position: absolute; inset: 0; }

/* ============================================================
   02 · Start it
   ============================================================ */
.s2-bar {
    position: absolute; left: 62px; top: 46px; right: 62px;
    display: flex; align-items: center; gap: 11px;
    padding: 13px 15px; border: 1px solid var(--border-2); border-radius: 12px;
    background: #fff; box-shadow: 0 16px 30px -22px rgba(14,20,40,.5);
    animation: fs-in .55s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.s2-bar > i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--accent); color: var(--ink-900); font-style: normal; font-size: 12px; }
.s2-type {
    flex: 1; overflow: hidden; white-space: nowrap; width: 0;
    border-right: 2px solid var(--accent-deep);
    color: var(--text); font-family: var(--font-mono); font-size: 12.5px;
    animation: s2-type 2.2s steps(78, end) calc(.7s + var(--lead, 0s)) both,
               s2-caret .7s step-end calc(2.9s + var(--lead, 0s)) 3;
}
@keyframes s2-type  { to { width: 78ch } }
@keyframes s2-caret { 50% { border-color: transparent } }
.s2-bar > b { flex: none; padding: 7px 12px; border-radius: 8px; background: var(--ink-900); color: var(--accent); font-size: 11px; }
.s2-status {
    position: absolute; left: 62px; top: 106px;
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--text-muted); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em;
    animation: fs-in .4s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.s2-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-deep); animation: s2-blink 1.1s infinite; }
@keyframes s2-blink { 50% { opacity: .25 } }
.s2-approve {
    position: absolute; left: 62px; right: 62px; bottom: 46px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 13px 15px; border: 1px solid var(--accent-deep); border-radius: 12px;
    background: var(--accent-tint-2); box-shadow: 0 0 0 4px rgba(217,242,92,.14);
    animation: fs-in .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.s2-approve b { display: block; color: var(--text); font-size: 13px; letter-spacing: -.02em; }
.s2-approve small { display: block; margin-top: 2px; color: var(--accent-ink); font-family: var(--font-mono); font-size: 9px; }
.s2-btn { padding: 9px 15px; border-radius: 9px; background: var(--ink-900); color: var(--accent); font-size: 11.5px; font-weight: 600; }

/* ============================================================
   03 · The model
   ============================================================ */
.s3-rollup {
    position: absolute; left: 62px; right: 62px; top: 210px;
    padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: #fff;
    box-shadow: 0 20px 40px -26px rgba(14,20,40,.5);
    animation: fs-in .55s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.s3-r-head { display: flex; align-items: center; gap: 11px; }
.s3-r-head i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--rollup-soft); color: var(--rollup-ink); font-style: normal; font-size: 15px; font-weight: 700; }
.s3-r-head small { display: block; color: var(--text-muted); font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; }
.s3-r-head b { display: block; margin-top: 2px; color: var(--text); font-size: 14px; letter-spacing: -.025em; }
.s3-path {
    display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-top: 12px; padding: 7px 11px; border: 1px dashed var(--border-2); border-radius: 8px;
    background: var(--card-2); color: var(--text-2); font-family: var(--font-mono); font-size: 10px;
}
.s3-path em { color: var(--accent-deep); font-style: normal; }
.s3-path u { color: var(--rollup-ink); text-decoration: none; font-weight: 600; }
.s3-val { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; }
.s3-num { color: var(--text); font-size: 30px; font-weight: 680; letter-spacing: -.045em; animation: s3-num .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both; }
@keyframes s3-num { from { opacity: 0; transform: translateY(8px) scale(.9); filter: blur(4px) } }
.s3-ok { color: var(--emerald); font-family: var(--font-mono); font-size: 9.5px; animation: fs-in .4s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s3-chips {
    position: absolute; left: 62px; right: 62px; bottom: 38px;
    display: flex; flex-wrap: wrap; gap: 5px;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.s3-chips .ft-f { display: inline-flex; margin: 0; }

/* ============================================================
   04 · Views
   ============================================================ */
.s4-tabs { position: absolute; left: 40px; top: 34px; display: flex; align-items: center; gap: 8px; }
.s4-tabs span { width: 110px; padding: 8px 0; border-radius: 9px; background: rgba(14,20,40,.05); color: var(--text-2); font-size: 11px; font-weight: 600; text-align: center; }
.s4-tabs b { margin-left: 10px; color: var(--text-faint); font-family: var(--font-mono); font-size: 9px; font-weight: 500; }
.s4-pill {
    position: absolute; left: 0; top: 0; width: 110px; height: 33px; border-radius: 9px;
    background: var(--ink-900); box-shadow: 0 8px 16px -10px rgba(14,20,40,.6);
    /* No authored --d: this one sweeps continuously across the whole chapter rather
       than firing on a cue, so its delay is the lead-in alone. Without that it would
       step through the view types while Shannon was still saying "now, how you look
       at it all", and finish a lead-in early against the names it is illustrating. */
    animation: s4-pill 11s cubic-bezier(.5,0,.2,1) var(--lead, 0s) both;
}
.s4-tabs span { position: relative; z-index: 1; transition: color 200ms; }
@keyframes s4-pill {
    0%, 20%   { transform: translateX(0) }
    23%, 39%  { transform: translateX(118px) }
    42%, 58%  { transform: translateX(236px) }
    61%, 77%  { transform: translateX(354px) }
    80%, 100% { transform: translateX(472px) }
}
.s4-stage { position: absolute; left: 40px; right: 40px; top: 92px; bottom: 34px; }
.s4-view {
    position: absolute; inset: 0; padding: 16px;
    border: 1px solid var(--border); border-radius: 14px; background: #fff;
    box-shadow: 0 18px 36px -26px rgba(14,20,40,.45);
    animation: s4-flip 2.5s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.s4-view.v-map { animation: fs-in .55s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both; }
@keyframes s4-flip {
    0%        { opacity: 0; transform: translateY(12px) scale(.985) }
    10%, 84%  { opacity: 1; transform: none }
    100%      { opacity: 0; transform: translateY(-8px) scale(.99) }
}
.mini-row { display: grid; grid-template-columns: 1fr 1.4fr .8fr .9fr .7fr; gap: 10px; padding: 9px 6px; border-bottom: 1px solid var(--border-soft); color: var(--text); font-size: 11px; }
.mini-row i { font-style: normal; }
.mini-row.is-head { color: var(--text-muted); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; }
.mini-row em { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 9.5px; font-style: normal; font-weight: 600; }
.p-lime { background: var(--accent-tint); color: var(--accent-ink) } .p-amber { background: var(--amber-soft); color: #8A5B08 }
.p-sky  { background: var(--sky-soft); color: var(--lookup-ink) }    .p-coral { background: var(--coral-soft); color: var(--rollup-ink) }
.v-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mini-col { padding: 10px; border-radius: 10px; background: var(--card-2); }
.mini-col b { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--text-2); font-size: 10px; }
.mini-col b small { color: var(--text-faint); font-family: var(--font-mono); font-size: 9px; }
.mini-col i { display: block; height: 34px; margin-bottom: 7px; border: 1px solid var(--border); border-left: 3px solid var(--violet); border-radius: 7px; background: #fff; }
.mini-col i.is-short { height: 24px; border-left-color: var(--accent-deep); }
.mini-col:nth-child(2) i { border-left-color: var(--amber) } .mini-col:nth-child(3) i { border-left-color: var(--accent-deep) } .mini-col:nth-child(4) i { border-left-color: var(--sky) }
.mini-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 100%; }
.mini-cal i { border-radius: 6px; background: var(--paper-2); }
.mini-cal i.is-1 { background: var(--accent-tint); box-shadow: inset 0 3px 0 var(--accent-deep) }
.mini-cal i.is-2 { background: var(--violet-soft); box-shadow: inset 0 3px 0 var(--violet) }
.mini-cal i.is-3 { background: var(--sky-soft); box-shadow: inset 0 3px 0 var(--sky) }
.mini-bar { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 12px; height: 20%; }
.mini-bar b { color: var(--text-2); font-size: 10.5px; font-weight: 600; }
.mini-bar > i { position: relative; height: 16px; border-radius: 8px; background: var(--violet); }
.mini-bar > i { margin-left: calc(var(--x, 0) * 1px); }
.v-gantt .mini-bar > i { position: relative; }
.mini-bar i.c-2 { background: var(--accent-deep) } .mini-bar i.c-3 { background: var(--sky) } .mini-bar i.c-4 { background: var(--coral) }
.v-gantt { display: flex; flex-direction: column; justify-content: center; }
.v-gantt .mini-bar > i { position: absolute; }
.v-gantt .mini-bar { position: relative; }
.mini-map { position: relative; height: 100%; border-radius: 10px; background-image: radial-gradient(rgba(14,20,40,.13) 1px, transparent 1px); background-size: 18px 18px; }
.mini-map svg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 10px; }
.mm-water { fill: var(--sky-soft); }
.mm-shore { fill: none; stroke: var(--sky); stroke-opacity: .45; stroke-width: .8; }
.mm-river { fill: none; stroke: var(--sky); stroke-opacity: .4; stroke-width: 2.4; stroke-linecap: round; }
.mm-park  { fill: var(--accent-tint); }
.mm-road  { fill: none; stroke: rgba(14,20,40,.1); stroke-width: 1; stroke-linecap: round; }
.mm-road.is-main { stroke-width: 1.7; stroke: rgba(14,20,40,.15); }
.mini-map span { position: absolute; width: 13px; height: 13px; border-radius: 50% 50% 50% 0; background: var(--coral); transform: rotate(-45deg); box-shadow: 0 4px 8px -4px rgba(14,20,40,.6); }
.mini-map span.is-hot { background: var(--accent-deep); box-shadow: 0 0 0 6px rgba(217,242,92,.28); }

/* ============================================================
   05 · Reports and dashboards
   ============================================================ */
.s5-def {
    position: absolute; left: 40px; top: 40px; width: 296px; bottom: 40px;
    padding: 34px 16px 16px; border: 1px solid var(--border); border-radius: 14px; background: #fff;
    box-shadow: 0 18px 36px -26px rgba(14,20,40,.45);
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.s5-def .fs-cap { left: 16px; top: 15px; }
.s5-row { padding: 8px 0; border-bottom: 1px dashed var(--border-soft); animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s5-row small { display: block; color: var(--text-faint); font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; }
.s5-row b { display: block; margin-top: 3px; color: var(--text); font-size: 11.5px; font-weight: 600; }
.s5-row b em { color: var(--relation-ink); font-style: normal; font-family: var(--font-mono); font-size: 9.5px; }
.s5-run { margin-top: 14px; padding: 9px; border-radius: 9px; background: var(--ink-900); color: var(--accent); font-size: 11px; font-weight: 600; text-align: center; animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s5-dash { position: absolute; left: 368px; top: 44px; width: 516px; }
.s5-kpi {
    position: absolute; width: 162px; padding: 11px 13px;
    border: 1px solid var(--border); border-radius: 11px; background: #fff;
    box-shadow: 0 12px 24px -18px rgba(14,20,40,.45);
    animation: fs-pop .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.s5-kpi small { display: block; color: var(--text-muted); font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .1em; }
.s5-kpi b { display: block; margin-top: 4px; color: var(--text); font-size: 21px; font-weight: 680; letter-spacing: -.045em; }
.s5-kpi em { font-style: normal; font-family: var(--font-mono); font-size: 9px; }
.s5-kpi em.up { color: var(--emerald) } .s5-kpi em.down { color: var(--lookup-ink) }
.s5-w {
    position: absolute; padding: 12px;
    border: 1px solid var(--border); border-radius: 12px; background: #fff;
    box-shadow: 0 14px 28px -20px rgba(14,20,40,.45);
    animation: fs-pop .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.s5-w > span { display: block; margin-bottom: 9px; color: var(--text-2); font-size: 10px; font-weight: 600; }
.s5-bars { display: flex; align-items: flex-end; gap: 8px; height: 96px; }
.s5-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; background: var(--violet); animation: s5-grow .7s cubic-bezier(.2,.8,.25,1) calc(3.5s + var(--lead, 0s)) both; transform-origin: bottom; }
.s5-bars i:nth-child(2n) { background: var(--accent-deep) }
@keyframes s5-grow { from { transform: scaleY(.04) } }
.s5-donut {
    width: 96px; height: 96px; margin: 0 auto; border-radius: 50%;
    background: conic-gradient(var(--accent-deep) 0 42%, var(--violet) 42% 71%, var(--sky) 71% 88%, var(--paper-2) 88% 100%);
    mask: radial-gradient(circle, transparent 52%, #000 53%);
    animation: s5-spin .8s cubic-bezier(.2,.8,.25,1) calc(3.6s + var(--lead, 0s)) both;
}
@keyframes s5-spin { from { transform: rotate(-120deg) scale(.7); opacity: 0 } }
.s5-list i { display: block; height: 12px; margin-bottom: 9px; border-radius: 4px; background: var(--paper-2); transform-origin: left; animation: fs-wipe .5s cubic-bezier(.2,.8,.25,1) calc(3.9s + var(--lead, 0s)) both; }
.s5-list i:nth-child(1) { width: 92%; background: var(--accent-tint) }
.s5-list i:nth-child(2) { width: 74%; animation-delay: calc(4s + var(--lead, 0s)) }
.s5-list i:nth-child(3) { width: 58%; animation-delay: calc(4.1s + var(--lead, 0s)) }
.s5-list i:nth-child(4) { width: 41%; animation-delay: calc(4.2s + var(--lead, 0s)) }
.s5-line svg { width: 100%; height: 78px; }
.s5-line path { fill: none; stroke: var(--emerald); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: fs-draw .9s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }

/* ============================================================
   06 · Automations and connectors
   ============================================================ */
.s6-trigger {
    position: absolute; left: 56px; right: 56px; top: 36px;
    display: flex; align-items: center; gap: 12px;
    padding: 13px 15px; border: 1px solid var(--accent-deep); border-radius: 12px;
    background: var(--accent-tint-2); animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.s6-trigger > i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--ink-900); font-style: normal; font-size: 14px; }
.s6-trigger small { display: block; color: var(--accent-ink); font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; }
.s6-trigger b { display: block; margin-top: 2px; color: var(--text); font-size: 13.5px; letter-spacing: -.025em; }
.s6-trigger div { flex: 1 }
.s6-live { padding: 5px 10px; border-radius: 999px; background: var(--ink-900); color: var(--accent); font-family: var(--font-mono); font-size: 9px; }
.s6-track { position: absolute; left: 56px; right: 56px; top: 108px; display: grid; gap: 9px; }
.s6-step {
    position: relative; display: grid; grid-template-columns: 30px 1fr auto 26px; align-items: center; gap: 12px;
    padding: 11px 14px; border: 1px solid var(--border); border-radius: 11px; background: #fff;
    box-shadow: 0 12px 24px -20px rgba(14,20,40,.45);
    animation: s6-step .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
@keyframes s6-step { from { opacity: 0; transform: translateX(-16px) } }
.s6-step i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--paper-2); color: var(--text-muted); font-style: normal; font-family: var(--font-mono); font-size: 9px; }
.s6-step b { color: var(--text); font-size: 12px; font-weight: 600; letter-spacing: -.015em; }
.s6-step em { color: var(--text-muted); font-family: var(--font-mono); font-size: 9px; font-style: normal; }
.s6-tick { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--ink-900); font-size: 11px; text-decoration: none; animation: fs-pop .4s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s6-guard {
    position: absolute; left: 56px; right: 56px; top: 340px;
    padding: 10px 14px; border: 1px dashed var(--border-2); border-radius: 10px; background: var(--card-2);
    color: var(--text-2); font-size: 11px; animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.s6-conn { position: absolute; left: 56px; right: 56px; bottom: 34px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; animation: fs-in .4s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s6-conn span { padding: 6px 11px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text-2); font-size: 10.5px; font-weight: 600; animation: fs-pop .35s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s6-conn b { margin-left: 6px; color: var(--accent-ink); font-family: var(--font-mono); font-size: 10px; animation: fs-in .4s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }

/* ============================================================
   07 · Intake
   ============================================================ */
.s7-form {
    position: absolute; left: 56px; top: 46px; width: 292px;
    padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: #fff;
    box-shadow: 0 20px 40px -26px rgba(14,20,40,.5); animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.s7-brand { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 11px; margin-bottom: 11px; border-bottom: 2px solid var(--coral); }
.s7-brand i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--coral-soft); font-style: normal; font-size: 13px; }
.s7-brand b { color: var(--text); font-size: 13px; letter-spacing: -.02em; }
.s7-brand small { width: 100%; color: var(--text-muted); font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; }
.s7-form label { display: block; margin-bottom: 9px; color: var(--text-muted); font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; animation: fs-in .4s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s7-form label.s7-cond { color: var(--accent-ink); text-transform: none; }
.s7-form label em { display: block; margin-top: 2px; color: var(--text-faint); font-family: var(--font-mono); font-size: 8px; font-style: normal; text-transform: none; }
.s7-fill {
    display: block; margin-top: 4px; padding: 7px 9px;
    border: 1px solid var(--border-2); border-radius: 7px; background: var(--card-2);
    color: var(--text); font-size: 11px; font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0;
    animation: s7-fill .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
@keyframes s7-fill { from { opacity: 0; background: #fff; box-shadow: 0 0 0 3px rgba(217,242,92,.35) } }
.s7-submit { display: block; margin-top: 12px; padding: 9px; border-radius: 9px; background: var(--coral); color: #fff; font-size: 11.5px; font-weight: 650; text-align: center; animation: s7-press .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both; }
@keyframes s7-press { 0% { opacity: 0; transform: translateY(6px) } 70% { opacity: 1; transform: scale(.96) } 100% { transform: none } }
.s7-note { display: block; margin-top: 8px; color: var(--text-faint); font-family: var(--font-mono); font-size: 8px; text-align: center; animation: fs-in .4s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s7-record {
    position: absolute; left: 432px; top: 46px; right: 56px;
    padding: 15px; border: 1px solid var(--border); border-radius: 14px; background: #fff;
    box-shadow: 0 20px 40px -26px rgba(14,20,40,.5); animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.s7-rec-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 10px; margin-bottom: 11px; border-bottom: 1px solid var(--border-soft); }
.s7-rec-head b { color: var(--text); font-family: var(--font-mono); font-size: 14px; letter-spacing: -.02em; }
.s7-rec-head span { color: var(--accent-ink); font-size: 10px; font-weight: 600; }
.s7-msg { position: relative; margin-bottom: 8px; padding: 9px 11px; border-radius: 10px; animation: fs-in .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s7-msg small { display: block; margin-bottom: 3px; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .1em; }
.s7-msg p { margin: 0; font-size: 11px; line-height: 1.4; }
.s7-msg.is-in { margin-right: 34px; background: var(--paper-2); }
.s7-msg.is-in small { color: var(--text-muted) } .s7-msg.is-in p { color: var(--text) }
.s7-msg.is-out { margin-left: 34px; background: var(--ink-900); }
.s7-msg.is-out small { color: var(--accent) } .s7-msg.is-out p { color: var(--paper) }
.s7-msg.is-note { border: 1px dashed var(--amber); background: var(--amber-soft); }
.s7-msg.is-note small { color: #8A5B08 } .s7-msg.is-note p { color: #6B4405 }
.s7-msg.s7-flies { animation: s7-fly .8s cubic-bezier(.3,.9,.3,1) calc(var(--d, 0s) + var(--lead, 0s)) both; }
@keyframes s7-fly { from { opacity: 0; transform: translate(220px, -120px) rotate(7deg) scale(.75) } }
.s7-watch { position: absolute; left: 432px; right: 56px; bottom: 40px; padding: 9px 13px; border-radius: 9px; background: var(--accent-tint-2); border: 1px solid var(--accent-deep); color: var(--accent-ink); font-size: 10.5px; font-weight: 600; animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }

/* The third intake channel: a site-corner chat widget under the form card,
   its arrow joining the same pipeline into the record. */
.s7-chat { position: absolute; left: 56px; top: 406px; width: 292px; display: flex; align-items: center; gap: 9px; animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s7-chat i {
    display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px;
    border-radius: 50% 50% 8px 50%; background: var(--ink-900); font-style: normal; font-size: 14px;
    box-shadow: 0 10px 20px -12px rgba(14,20,40,.7); animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.s7-chat-note {
    flex: 1; padding: 6px 10px 7px; border: 1px solid var(--border); border-radius: 12px 12px 4px 12px;
    background: #fff; box-shadow: 0 12px 24px -18px rgba(14,20,40,.5);
    color: var(--text); font-size: 10px; animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.s7-chat-note small { display: block; margin-bottom: 3px; color: var(--text-faint); font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .08em; }

/* ============================================================
   08 · Ask, with receipts
   ============================================================ */
.s8-ask { position: absolute; inset: 34px 56px; color: var(--paper); }
.s8-q { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.12); animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s8-q i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--accent); color: var(--ink-900); font-style: normal; font-size: 13px; }
.s8-type {
    overflow: hidden; white-space: nowrap; width: 0; border-right: 2px solid var(--accent);
    font-family: var(--font-mono); font-size: 13px; color: var(--paper);
    animation: s8-type 1.7s steps(66, end) calc(.5s + var(--lead, 0s)) both,
               s2-caret .7s step-end calc(2.2s + var(--lead, 0s)) 2;
}
@keyframes s8-type { to { width: 66ch } }
.s8-work { display: flex; gap: 16px; margin-top: 12px; animation: fs-in .4s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s8-work span { color: #7E86A8; font-family: var(--font-mono); font-size: 9.5px; animation: fs-in .35s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s8-a { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-200); animation: fs-in .55s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s8-a b { color: var(--paper); font-weight: 650; }
.s8-fig { position: relative; padding: 1px 5px; border-radius: 5px; font-style: normal; font-weight: 650; color: var(--ink-900); background: var(--accent); animation: s8-fig .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both; }
@keyframes s8-fig { from { background: rgba(217,242,92,0); color: var(--ink-200); box-shadow: 0 0 0 0 rgba(217,242,92,.5) } 60% { box-shadow: 0 0 0 7px rgba(217,242,92,0) } }
.s8-verify { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; padding: 8px 13px; border: 1px solid rgba(217,242,92,.35); border-radius: 999px; background: rgba(217,242,92,.09); color: var(--accent); font-size: 11px; animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s8-verify i { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--accent); color: var(--ink-900); font-style: normal; font-size: 10px; }
.s8-verify u { color: var(--ink-300); text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.4); font-family: var(--font-mono); font-size: 10px; }
.s8-receipt { margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; background: rgba(255,255,255,.045); animation: fs-in .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s8-receipt small { display: block; color: var(--accent); font-family: var(--font-mono); font-size: 8px; letter-spacing: .14em; }
.s8-receipt code { display: block; margin: 6px 0; color: var(--ink-200); font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5; }
.s8-receipt b { color: var(--paper); font-family: var(--font-mono); font-size: 11px; }
.s8-cites { display: flex; gap: 6px; margin-top: 12px; animation: fs-in .4s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s8-cites span { padding: 4px 10px; border: 1px solid rgba(217,242,92,.28); border-radius: 999px; color: var(--accent); font-size: 10px; }
.s8-build {
    position: absolute; left: 0; right: 0; bottom: -6px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 15px; border: 1px solid rgba(217,242,92,.4); border-radius: 12px;
    background: linear-gradient(180deg, rgba(217,242,92,.14), rgba(217,242,92,.06));
    animation: s8-build .6s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
@keyframes s8-build { from { opacity: 0; transform: translateY(26px) } }
.s8-build small { display: block; color: var(--accent); font-family: var(--font-mono); font-size: 8px; letter-spacing: .14em; }
.s8-build b { display: block; margin-top: 3px; color: var(--paper); font-size: 13px; font-weight: 600; letter-spacing: -.02em; }
.s8-build > span { flex: none; padding: 9px 16px; border-radius: 9px; background: var(--accent); color: var(--ink-900); font-size: 11.5px; font-weight: 650; }

/* ============================================================
   09 · Approvals & posting — sign-off, the gate, the seal
   ============================================================ */
.s9-rec {
    position: absolute; left: 56px; right: 56px; top: 34px;
    display: grid; grid-template-columns: 100px 1.1fr 1fr 90px 150px; align-items: center; gap: 12px;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff;
    box-shadow: 0 14px 28px -20px rgba(14,20,40,.5);
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.s9-rec > b { color: var(--text); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: -.01em; }
.s9-rec > i { color: var(--text-2); font-size: 11.5px; font-style: normal; }
/* The seal lands, the cells go quiet: fixed delays, timed to the stamp above. */
.s9-rec > b, .s9-rec > i { animation: s9-quiet .6s ease calc(10s + var(--lead, 0s)) both; }
@keyframes s9-quiet { to { opacity: .45; filter: saturate(.4) } }
.s9-status { position: relative; justify-self: end; }
.s9-status em { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 9.5px; font-style: normal; font-weight: 600; white-space: nowrap; }
.s9-status .p-amber { animation: s9-hide .35s ease calc(9.9s + var(--lead, 0s)) both; }
@keyframes s9-hide { to { opacity: 0 } }
.s9-posted { position: absolute; right: 0; top: 0; background: var(--mint-soft); color: var(--emerald); animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s9-seal {
    position: absolute; right: 116px; top: 14px; z-index: 2;
    padding: 6px 16px; border: 3px solid var(--emerald); border-radius: 8px;
    color: var(--emerald); font-family: var(--font-mono); font-size: 19px; font-weight: 700; letter-spacing: .22em;
    background: rgba(255,255,255,.72); transform: rotate(-8deg);
    animation: s9-stamp .5s cubic-bezier(.2,.9,.3,1.4) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
@keyframes s9-stamp {
    from { opacity: 0; transform: rotate(-8deg) scale(2.1); filter: blur(2px) }
    65%  { opacity: 1; transform: rotate(-8deg) scale(.94); filter: none }
    to   { transform: rotate(-8deg) scale(1) }
}
.s9-stages { position: absolute; left: 56px; top: 116px; width: 392px; animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s9-stages > .fs-cap, .s9-gate > .fs-cap { position: static; display: block; margin-bottom: 9px; }
.s9-stage {
    margin-bottom: 9px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 11px; background: #fff;
    box-shadow: 0 12px 24px -20px rgba(14,20,40,.45);
    animation: s6-step .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.s9-stage > small { display: flex; align-items: center; color: var(--text-muted); font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; }
.s9-stage > small b { margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: var(--violet-soft); color: var(--relation-ink); font-size: 8px; letter-spacing: .02em; }
.s9-people { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.s9-ava {
    position: relative; display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 50%; background: var(--violet-soft); color: var(--relation-ink);
    font-size: 10px; font-weight: 700; letter-spacing: .02em;
    animation: fs-pop .4s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.s9-ava.is-wait { background: var(--paper-2); color: var(--text-muted); }
.s9-tick {
    position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center;
    width: 15px; height: 15px; border-radius: 50%; background: var(--emerald); color: #fff;
    font-size: 8.5px; text-decoration: none; box-shadow: 0 0 0 2px #fff;
    animation: fs-pop .4s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.s9-met { margin-left: auto; color: var(--emerald); font-family: var(--font-mono); font-size: 9.5px; font-style: normal; animation: fs-in .4s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s9-remind { display: block; margin-top: 9px; color: var(--text-faint); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0; animation: fs-in .4s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s9-gate {
    position: absolute; left: 472px; right: 56px; top: 116px;
    padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px; background: #fff;
    box-shadow: 0 14px 28px -20px rgba(14,20,40,.45);
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.s9-line { display: flex; align-items: center; gap: 9px; padding: 8px 2px; border-bottom: 1px dashed var(--border-soft); }
.s9-line b { color: var(--text); font-size: 11.5px; font-weight: 600; letter-spacing: -.015em; }
.s9-line small { color: var(--text-faint); font-family: var(--font-mono); font-size: 8px; }
.s9-line em { margin-left: auto; color: var(--text-muted); font-family: var(--font-mono); font-size: 10px; font-style: normal; }
/* Coral while blocking, mint once approved — the gate line flips as line items land. */
.s9-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); animation: s9-flip .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
@keyframes s9-flip { to { background: var(--emerald); box-shadow: 0 0 0 3px var(--mint-soft) } }
.s9-open { display: block; margin-top: 10px; color: var(--emerald); font-family: var(--font-mono); font-size: 9.5px; animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s9-lock {
    position: absolute; left: 56px; right: 56px; top: 356px;
    padding: 10px 14px; border: 1px solid var(--accent-deep); border-radius: 10px; background: var(--accent-tint-2);
    color: var(--accent-ink); font-size: 11px; font-weight: 600; animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.s9-queue {
    position: absolute; left: 56px; right: 56px; bottom: 34px;
    padding: 9px 13px; border: 1px dashed var(--border-2); border-radius: 10px; background: var(--card-2);
    color: var(--text-2); font-size: 10.5px; animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}

/* ============================================================
   10 · The foundation
   ============================================================ */
.s10-grid { position: absolute; inset: 44px 48px 78px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.s10-tile {
    padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff;
    box-shadow: 0 14px 28px -22px rgba(14,20,40,.45);
    animation: fs-pop .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.s10-tile i { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 9px; border-radius: 8px; background: var(--accent-tint); color: var(--accent-ink); font-style: normal; font-size: 13px; }
.s10-tile b { display: block; color: var(--text); font-size: 12px; letter-spacing: -.02em; }
.s10-tile p { margin: 5px 0 0; color: var(--text-muted); font-size: 10px; line-height: 1.45; }
.s10-foot { position: absolute; left: 48px; right: 48px; bottom: 34px; padding: 11px; border-radius: 10px; background: var(--ink-900); color: var(--accent); font-size: 11.5px; font-weight: 600; text-align: center; animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }

/* ============================================================
   11 · End card
   ============================================================ */
.s11 { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 60px; }
.s11 .fs-cap { position: static; color: var(--accent); }
.s11 h3 { margin: 14px 0 0; font-size: 40px; font-weight: 560; line-height: 1.06; letter-spacing: -.045em; color: var(--paper); animation: fs-in .6s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s11 h3 em { display: block; color: var(--accent); font-family: var(--font-display); font-style: italic; font-weight: 500; }
.s11 p { max-width: 540px; margin: 16px 0 0; color: var(--ink-300); font-size: 14px; line-height: 1.55; animation: fs-in .6s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s11-cta { display: flex; align-items: center; gap: 12px; margin-top: 26px; animation: fs-in .6s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.s11-replay { padding: 10px 16px; border: 1px solid rgba(255,255,255,.28); border-radius: 11px; background: transparent; color: var(--ink-300); font-size: 13px; }
.s11-replay:hover { color: var(--paper); border-color: rgba(255,255,255,.6); }

/* ---------- Chapter bar + controls ---------- */
.film-bar { margin-top: 14px; }
/* grid-auto-flow rather than repeat(11): the rail must fit whatever chapter count the
   film has. It was literally repeat(11, 1fr), so a five-chapter deep dive rendered five
   narrow tabs against the left edge with six empty columns after them. */
.film-chapters { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.film-chapters button {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    padding: 8px 9px 11px; border: 0; border-radius: 9px;
    background: rgba(255,255,255,.045); color: var(--ink-300); text-align: left;
    transition: background 160ms, color 160ms;
}
.film-chapters button:hover { background: rgba(255,255,255,.1); color: var(--paper); }
.film-chapters button span { color: #757C9C; font-family: var(--font-mono); font-size: 8.5px; }
.film-chapters button em { max-width: 100%; overflow: hidden; font-size: 10.5px; font-style: normal; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.film-chapters button i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; }
.film-chapters button[aria-selected="true"] { background: rgba(217,242,92,.11); color: var(--accent); }
.film-chapters button[aria-selected="true"] span { color: var(--accent); }
.film-chapters button.is-done i { transform: scaleX(1); opacity: .28; }

.film-controls { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.film-ctl {
    display: grid; place-items: center; width: 38px; height: 38px;
    border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: transparent;
    color: var(--paper); font-size: 19px; line-height: 1; transition: 140ms;
}
.film-ctl:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); }
.film-ctl.is-play { background: var(--accent); border-color: var(--accent); color: var(--ink-900); }
.film-ctl.is-play:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.ic-pause, .ic-play { display: block; }
.ic-pause { width: 11px; height: 12px; border-left: 3.5px solid currentColor; border-right: 3.5px solid currentColor; }
.ic-play { width: 0; height: 0; margin-left: 3px; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
/* The end card shows the play glyph too — pressing it there means "watch again" —
   but it must NOT carry .is-paused, which would freeze the card's own entrance. */
.film:not(.is-paused):not(.is-ended) .ic-play { display: none; }
.film.is-paused .ic-pause, .film.is-ended .ic-pause { display: none; }
/* Sound control — rendered only when wwwroot/film/vo holds clips (see FilmNarration). */
.film-sound .ic-cross { display: none; }
.film.is-muted .film-sound { color: var(--ink-400); }
.film.is-muted .film-sound .ic-waves { display: none; }
.film.is-muted .film-sound .ic-cross { display: block; }

.film-hint { flex: 1; color: var(--ink-400); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em; }
.film-cta { flex: none; }
.film-dialog .btn.accent { background: var(--accent); border-color: var(--accent-deep); color: var(--ink-900); }
.film-dialog .btn.accent:hover { background: var(--accent-deep); }

/* ---------- Opening a film from a LIGHT surface ----------
   The homepage hero's .op-hero-link is the dark version and its colours are paper /
   ink-300, so the same markup on a light marketing band is very nearly invisible. This
   lives in film.css rather than marketing.css because it is part of the film's own
   surface, and film.css is loaded by every page that hosts one — including the in-app
   pages, which never load marketing.css at all. */
.film-open {
    display: inline-flex; align-items: center; gap: 9px;
    padding-bottom: 2px; border-bottom: 1px solid transparent;
    color: var(--text-2); font-size: 15px; font-weight: 500;
    transition: color 140ms, border-color 140ms;
}
.film-open:hover { color: var(--text); border-bottom-color: var(--accent-deep); }
/* The play glyph's fills are scoped to .btn in this file; this trigger is not a .btn,
   so it carries its own — same reason .op-hero-link does. */
.film-open .btn-play { flex: none; }
.film-open .btn-play .bp-disc { fill: none; stroke: var(--accent-deep); }
.film-open .btn-play .bp-tri { fill: var(--accent-deep); }
.film-open .btn-time {
    padding: 2px 7px; border-radius: 999px; background: var(--paper-2);
    color: var(--text-muted); font-family: var(--font-mono); font-size: 11px;
    font-style: normal; font-weight: 500;
}

/* ---------- No-JS storyboard ----------
   The film still opens on :target; it just becomes a readable scroll of every
   scene rather than a player. Controls that would do nothing are hidden. */
.film:not(.js) .film-screen { display: block; height: auto; max-height: 76vh; overflow-y: auto; }
.film:not(.js) .film-scene { position: static; margin-bottom: 26px; }
.film:not(.js) .film-vis { height: 420px; }
.film:not(.js) .film-bar { display: none; }

/* ============================================================
   IMPORT DEEP DIVE — scenes for _FilmScenes_Import.cshtml (.si-*)

   Only what this film genuinely needs and no other does: a messy source sheet, a
   drop target, a match key and a tally. Everything else it draws — table cards,
   field-type chips, connector paths, grid rows, the mono caption — is the full
   film's existing vocabulary reused as-is, which is what keeps a second film a
   day's work rather than a second film's work.

   Every cue is calc(var(--d) + var(--lead)) like the rest of the file. A new scene
   class that forgets the --lead half animates while Shannon is still announcing the
   chapter, and it is very easy to miss on a casual watch.
   ============================================================ */
.si-sheet {
    position: absolute; left: 90px; top: 118px; width: 720px; overflow: hidden;
    border: 1px solid var(--border); border-radius: 12px; background: #fff;
    box-shadow: 0 14px 26px -18px rgba(14,20,40,.5);
    animation: fs-rise .6s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.si-r {
    display: grid; grid-template-columns: 1.5fr 1.1fr .6fr .8fr 1fr; gap: 10px;
    padding: 8px 12px; border-bottom: 1px solid var(--border-soft);
    font-size: 11px; color: var(--text);
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.si-r i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-r:last-child { border-bottom: 0; }
/* Two header rows, because the source file has two — that IS the first flag. */
.si-r.is-head { background: var(--paper-2); border-bottom: 0; padding-bottom: 3px; color: var(--text-muted); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; }
.si-r.is-head2 { background: var(--paper-2); padding-top: 0; color: var(--text-faint); font-family: var(--font-mono); font-size: 8px; }

.si-flag {
    position: absolute; padding: 4px 9px; border-radius: 999px; white-space: nowrap;
    background: var(--rose-soft); color: #A81E5B; font-size: 9.5px; font-weight: 600;
    box-shadow: 0 6px 14px -8px rgba(168,30,91,.6);
    animation: fs-pop .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}

.si-drop {
    position: absolute; left: 90px; top: 96px; width: 300px; padding: 18px; text-align: center;
    border: 1.5px dashed var(--border-2); border-radius: 14px; background: var(--paper-2);
    animation: fs-pop .55s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.si-drop i { display: block; font-size: 26px; font-style: normal; color: var(--text-muted); }
.si-drop b { display: block; margin-top: 8px; font-size: 13px; color: var(--text); }
.si-drop small { display: block; margin-top: 3px; color: var(--text-muted); font-family: var(--font-mono); font-size: 9px; }

.si-cols { position: absolute; left: 440px; top: 84px; width: 370px; display: grid; gap: 7px; }
.si-col {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
    padding: 7px 11px; border: 1px solid var(--border-soft); border-radius: 10px; background: #fff;
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.si-col b { font-size: 11.5px; font-weight: 600; color: var(--text); }
.si-col .ft-f { margin-top: 0; }

/* "matched" / "left alone" ride inside a .ft-f row rather than beside it, so the
   destination card stays one column wide and keeps the full film's table proportions. */
.si-tick, .si-skip { float: right; font-style: normal; font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.si-tick { color: var(--emerald); }
.si-skip { color: var(--text-faint); }

.si-key {
    position: absolute; left: 90px; top: 92px; padding: 12px 18px; border-radius: 12px;
    background: var(--ink-900); color: var(--paper);
    animation: fs-pop .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.si-key small { display: block; font-family: var(--font-mono); font-size: 8px; letter-spacing: .16em; opacity: .65; }
.si-key b { display: block; margin-top: 4px; font-size: 16px; letter-spacing: -.02em; }

.si-tally { position: absolute; left: 330px; top: 88px; display: flex; gap: 14px; }
.si-tally > div {
    min-width: 128px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff;
    animation: fs-rise .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.si-tally b { display: block; font-size: 24px; letter-spacing: -.03em; color: var(--text); }
.si-tally small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 9.5px; }
/* The ringed zero is the frame this chapter has to end on: "0 duplicated" is the
   promise the other two figures only imply, and the thing anyone who has been burned
   by an import is actually looking for. */
.si-tally .is-zero { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.si-tally .is-zero b { color: var(--accent-ink); }

.si-rows {
    position: absolute; left: 90px; top: 232px; width: 720px; padding: 4px 14px 10px;
    border: 1px solid var(--border); border-radius: 12px; background: #fff;
}
.si-rows.is-wide { top: 108px; }
/* .mini-row is a 5-column grid in the full film and does not animate; both are
   overridden here rather than forked, so a change to the row's type styles still
   reaches this film. */
.si-rows .mini-row { grid-template-columns: 1fr 1.4fr .8fr 1fr; animation: fs-in .4s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.si-rows.is-wide .mini-row { grid-template-columns: 1fr 1.4fr .8fr .6fr .8fr; }
.si-rows .mini-row:last-child { border-bottom: 0; }
.si-new { background: var(--mint-soft); color: var(--emerald); }
.si-upd { background: var(--sky-soft); color: var(--lookup-ink); }

.si-done { position: absolute; left: 90px; top: 320px; display: flex; flex-wrap: wrap; gap: 9px; }
.si-done span {
    padding: 7px 13px; border-radius: 999px; background: var(--paper-2);
    border: 1px solid var(--border-soft); color: var(--text-2); font-size: 10.5px; font-weight: 600;
    animation: fs-pop .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}

/* ============================================================
   BUILD DEEP DIVE — scenes for _FilmScenes_Build.cshtml (.sb-*)

   The workspace builder describing itself. Same composition budget as the import
   film: everything that already exists is reused — .fs-table/.ft-head/.ft-f with the
   .t-* type colours, .fs-edges, .mini-row/.mini-col/.mini-cal/.mini-map,
   .s5-kpi/.s5-bars, .s2-bar (the composer, repositioned with an inline top/bottom
   rather than re-declared) and .fs-cap — and only what is genuinely particular to
   WATCHING a workspace assemble gets a class: the growing sidebar, the progress
   strip, the question chips, the per-table tallies and the finale links.

   Every cue is calc(var(--d) + var(--lead)), like everything else in this file. A
   class that forgets the --lead half animates while Shannon is still announcing the
   chapter — the film still plays, it just illustrates each sentence slightly before
   you hear it, which is very easy to miss on a casual watch.
   ============================================================ */

/* ---------- 01 · The brief ---------- */
.sb-intro {
    position: absolute; left: 250px; top: 32px; width: 400px; padding: 15px 18px;
    border: 1px solid var(--border); border-radius: 14px; background: #fff; text-align: center;
    box-shadow: 0 16px 30px -22px rgba(14,20,40,.5);
    animation: fs-rise .6s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sb-intro i { display: block; font-size: 18px; font-style: normal; }
.sb-intro b { display: block; margin-top: 6px; color: var(--text); font-size: 15px; letter-spacing: -.025em; }
.sb-intro small { display: block; margin-top: 4px; color: var(--text-muted); font-size: 10.5px; }

/* The one question, and it is a card in the feed rather than a modal, because that is
   where it appears: the build never blocks on a dialog. The dashed third chip is the real
   one ("You decide — just build it"), and it earns its place the way the import film's
   "0 duplicated" does — it answers the fear rather than the question. */
.sb-ask {
    position: absolute; left: 150px; top: 172px; width: 600px; padding: 14px 16px;
    border: 1px solid var(--border); border-radius: 14px; background: #fff;
    box-shadow: 0 16px 30px -22px rgba(14,20,40,.5);
    animation: fs-rise .55s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sb-ask > small {
    display: flex; align-items: center; gap: 7px;
    color: var(--text-faint); font-family: var(--font-mono); font-size: 8px; letter-spacing: .14em;
}
.sb-ask > small em {
    display: grid; place-items: center; width: 17px; height: 17px; border-radius: 5px;
    background: var(--accent); color: var(--ink-900); font-style: normal; font-size: 10px; letter-spacing: 0;
}
.sb-ask > b { display: block; margin-top: 9px; color: var(--text); font-size: 13.5px; font-weight: 600; letter-spacing: -.02em; }
.sb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sb-chips span {
    padding: 7px 13px; border: 1px solid var(--border-2); border-radius: 999px;
    background: #fff; color: var(--text-2); font-size: 11px; font-weight: 600;
    animation: fs-pop .4s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sb-chips span.is-auto { border-style: dashed; color: var(--text-muted); font-weight: 500; }

/* ---------- 02 · The design ---------- */
/* The sidebar is the whole argument of this chapter: these are not a preview, they are in
   the workspace, and one is openable while the next is still being designed. */
.sb-rail {
    position: absolute; left: 0; top: 0; bottom: 0; width: 196px; padding: 16px 13px;
    border-right: 1px solid var(--border); background: var(--paper-2);
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sb-rail > small {
    display: block; margin-bottom: 4px;
    color: var(--text-faint); font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .14em;
}
.sb-rail > b { display: block; margin-bottom: 13px; color: var(--text); font-size: 12.5px; letter-spacing: -.02em; }
.sb-rail-row {
    display: flex; align-items: center; gap: 8px; padding: 7px 8px; margin-bottom: 4px;
    border: 1px solid var(--border-soft); border-radius: 8px; background: #fff;
    color: var(--text); font-size: 11px;
    animation: sb-land .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
@keyframes sb-land { from { opacity: 0; transform: translateX(-14px) } }
.sb-rail-row i { flex: none; color: var(--text-muted); font-style: normal; font-size: 10px; }
.sb-rail-row em {
    margin-left: auto; color: var(--text-faint);
    font-family: var(--font-mono); font-size: 8.5px; font-style: normal;
}

/* The progress strip in the shape the page actually renders it: engine, status, phase
   pips, elapsed, and the live tally. The tally is why this is here rather than a spinner —
   a spinner says "wait", a count says what has already arrived. */
.sb-prog {
    position: absolute; left: 228px; right: 24px; top: 18px; padding: 11px 14px;
    border: 1px solid var(--border); border-radius: 12px; background: #fff;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sb-prog-head { display: flex; align-items: center; gap: 9px; }
.sb-prog-head > i {
    flex: none; width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-deep); animation: s2-blink 1.1s infinite;
}
.sb-prog-head b { color: var(--text); font-size: 11.5px; font-weight: 600; letter-spacing: -.015em; }
.sb-prog-head em {
    margin-left: auto; color: var(--text-faint);
    font-family: var(--font-mono); font-size: 9px; font-style: normal;
}
.sb-phases { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 9px; }
.sb-phases span {
    display: flex; align-items: center; gap: 5px;
    color: var(--text-faint); font-size: 9px;
    animation: fs-in .35s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sb-phases span::before {
    content: ''; width: 6px; height: 6px; border: 1px solid var(--border-2); border-radius: 50%;
}
.sb-phases span.is-done { color: var(--text-2); }
.sb-phases span.is-done::before { content: '\2713'; width: auto; height: auto; border: 0; color: var(--emerald); font-size: 9px; }
.sb-phases span.is-now { color: var(--accent-ink); font-weight: 600; }
.sb-phases span.is-now::before { border-color: var(--accent-deep); background: var(--accent-deep); }

/* ---------- 03 · Filled in ---------- */
.sb-grid {
    position: absolute; left: 48px; top: 104px; width: 556px; padding: 4px 14px 10px;
    border: 1px solid var(--border); border-radius: 12px; background: #fff;
    box-shadow: 0 14px 26px -18px rgba(14,20,40,.5);
    animation: fs-rise .6s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sb-grid .mini-row { grid-template-columns: .95fr 1.5fr .8fr .95fr .7fr; animation: fs-in .4s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.sb-grid .mini-row:last-child { border-bottom: 0; }
/* A Relation cell draws the linked record's NAME as a chip, the way the grid does — never
   the stored id array. Same rule here as everywhere else in the product. */
.sb-rel { background: var(--relation-soft); color: var(--relation-ink); }

.sb-counts { position: absolute; left: 636px; top: 104px; width: 216px; display: grid; gap: 8px; }
.sb-count {
    display: flex; align-items: baseline; gap: 8px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 10px; background: #fff;
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sb-count b { color: var(--text); font-size: 16px; font-weight: 680; letter-spacing: -.035em; }
.sb-count span { color: var(--text-2); font-size: 11px; }
.sb-count em {
    margin-left: auto; color: var(--emerald);
    font-family: var(--font-mono); font-size: 8px; font-style: normal; letter-spacing: .06em;
}

/* ---------- 04 · Ways to see it ---------- */
.sb-views { position: absolute; left: 40px; right: 40px; top: 90px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sb-view {
    padding: 11px; border: 1px solid var(--border); border-radius: 12px; background: #fff;
    box-shadow: 0 14px 26px -18px rgba(14,20,40,.5);
    animation: fs-pop .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sb-view > .ft-f { display: inline-block; margin-top: 0; margin-bottom: 9px; }
.sb-stage { height: 116px; animation: fs-in .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both; }
/* The board mini is four columns in the full film's ch-04, where it has the whole canvas.
   At a third of the width it is three — which is also honest here: this table's Select
   carries three options. */
.sb-view .v-board { grid-template-columns: repeat(3, 1fr); height: 100%; }
.sb-view .mini-col i { height: 24px; margin-bottom: 6px; }
/* The "because" line is the substance of this chapter — the view is not a guess, it is read
   off the field the builder had just made. Under the picture, so it captions the card. */
.sb-why {
    display: block; margin-top: 9px; color: var(--text-muted);
    font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase;
    animation: fs-in .4s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sb-why b { color: var(--accent-ink); font-weight: 600; }

.sb-analytics {
    position: absolute; left: 40px; right: 40px; top: 288px; display: grid;
    grid-template-columns: 1.45fr 1fr; gap: 16px;
}
.sb-panel {
    padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff;
    box-shadow: 0 14px 26px -18px rgba(14,20,40,.5);
    animation: fs-rise .55s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sb-panel > small {
    display: block; color: var(--text-faint);
    font-family: var(--font-mono); font-size: 8px; letter-spacing: .14em;
}
.sb-panel > b { display: block; margin: 4px 0 10px; color: var(--text); font-size: 12px; letter-spacing: -.02em; }
/* .s5-bars carries a literal 3.5s delay of its own — right in the full film's ch-05, where
   that is when the dashboard's bars belong. Here the panel already holds the cue, so the
   bars ride --d like everything else. */
.sb-panel .s5-bars { height: 80px; }
.sb-panel .s5-bars i { animation: s5-grow .6s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both; }
.sb-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
/* .s5-kpi is position:absolute with a fixed 162px width in the full film's ch-05, where
   every tile is placed by hand on the canvas. Here they are grid items, so BOTH have to
   come back off — left as they were, all four stacked on the same point and the tile read
   as a single KPI. */
.sb-kpis .s5-kpi {
    position: static; width: auto; padding: 7px 10px;
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sb-kpis .s5-kpi b { margin-top: 1px; font-size: 14px; }

/* ---------- 05 · It's yours ---------- */
.sb-edit {
    position: absolute; left: 48px; top: 88px; width: 336px; padding: 13px 15px;
    border: 1px solid var(--border); border-radius: 12px; background: #fff;
    box-shadow: 0 14px 26px -18px rgba(14,20,40,.5);
    animation: fs-rise .55s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sb-edit > small { display: block; color: var(--text-faint); font-family: var(--font-mono); font-size: 8px; letter-spacing: .14em; }
.sb-edit > b { display: block; margin: 5px 0 8px; color: var(--text); font-size: 13px; letter-spacing: -.02em; }
.sb-frow {
    display: flex; align-items: center; gap: 9px; padding: 7px 0;
    border-top: 1px dashed var(--border-soft); color: var(--text-2); font-size: 11.5px;
    animation: fs-in .4s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sb-frow > span { color: var(--text-2); }
/* The strike has to be legible at 11.5px or the row reads as two labels rather than as
   a rename; --border-2 was invisible against it. */
.sb-frow s { color: var(--text-faint); text-decoration-color: var(--text-muted); }
.sb-frow .sb-arrow { margin: 0 -3px 0 -4px; color: var(--text-faint); font-style: normal; font-size: 10px; }
.sb-frow .sb-was { color: var(--text-faint); font-family: var(--font-mono); font-size: 8.5px; font-style: normal; letter-spacing: .06em; }
.sb-frow .ft-f { margin-top: 0; margin-left: auto; }
/* The renamed field: a highlight and a caret, so the frame reads as somebody typing over
   what the builder wrote rather than as a row that merely happens to exist. */
.sb-frow.is-editing b {
    padding: 2px 5px; margin: -2px -5px; border-radius: 5px;
    background: var(--accent-tint); color: var(--accent-ink); font-weight: 600;
    border-right: 2px solid var(--accent-deep);
    animation: s2-caret .7s step-end calc(var(--d, 0s) + var(--lead, 0s)) 4;
}
.sb-frow.is-added b { color: var(--emerald); font-weight: 600; }

.sb-finale { position: absolute; left: 412px; top: 88px; width: 440px; display: grid; gap: 8px; }
.sb-finale > .fs-cap { position: static; display: block; margin-bottom: 2px; }
.sb-fin {
    display: flex; align-items: center; gap: 10px; padding: 11px 13px;
    border: 1px solid var(--border); border-radius: 11px; background: #fff;
    color: var(--text); font-size: 12px; font-weight: 600; letter-spacing: -.015em;
    animation: sb-land .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sb-fin i {
    display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px;
    background: var(--accent-tint); color: var(--accent-ink); font-style: normal; font-size: 12px;
}
.sb-fin em { margin-left: auto; color: var(--text-faint); font-family: var(--font-mono); font-size: 9px; font-style: normal; }

/* The second typewriter. .s2-type's keyframe ends at 78ch because the full film's brief is
   78 characters long; this line is 50, and sharing the keyframe would strand the caret a
   third of the way past the last word. Same animation, its own end width. */
.sb-type {
    flex: 1; overflow: hidden; white-space: nowrap; width: 0;
    border-right: 2px solid var(--accent-deep);
    color: var(--text); font-family: var(--font-mono); font-size: 12.5px;
    animation: sb-type 1.5s steps(50, end) calc(var(--d, 0s) + var(--lead, 0s)) both,
               s2-caret .7s step-end calc(var(--d, 0s) + var(--lead, 0s) + 1.5s) 3;
}
@keyframes sb-type { to { width: 50ch } }


/* ============================================================
   ASK DEEP DIVE — scenes for _FilmScenes_Ask.cshtml (.sa-*)

   LIGHT, unlike the full film's ch-08. That chapter is dark because it is an
   argument — "here's the part I'd be sceptical about" — and the dark frame is the
   emphasis. This film is about what Ask can DO, and four of its five chapters are
   grids, cards and numbers, which are light surfaces in the product. A dark variant
   of every class here for one film is exactly the cost the import film's note warns
   about, and it would also make the Ask panel look like something it isn't.

   Reused rather than redrawn: .fs-node/.fs-edges (the route in ch-03), .s3-path (the
   dotted route — it is literally the same notation), .mini-row, .ft-f + .t-*, .fs-cap.
   The .sa-* classes are the Ask panel itself: a question row, the tool chips, an
   answer with a highlighted figure, the exact/sampled badge, the two-number
   comparison, and the proposal card with its before → after chips.

   Every cue is calc(var(--d) + var(--lead)).
   ============================================================ */
.sa-panel {
    position: absolute; padding: 15px 17px;
    border: 1px solid var(--border); border-radius: 14px; background: #fff;
    box-shadow: 0 16px 30px -22px rgba(14,20,40,.5);
    animation: fs-rise .55s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
/* The question row, in the shape /Ask draws it: the spark, then what you typed. */
.sa-q { display: flex; align-items: center; gap: 10px; }
.sa-q > i {
    display: grid; place-items: center; flex: none; width: 24px; height: 24px;
    border-radius: 7px; background: var(--accent); color: var(--ink-900);
    font-style: normal; font-size: 12px;
}
.sa-q > span { color: var(--text); font-size: 13.5px; font-weight: 600; letter-spacing: -.015em; }

/* The tool chips are the real .ac-step: what it ran, in the order it ran it. They are
   here rather than in ch-08 because this film's claim is about WHAT the queries do. */
.sa-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.sa-steps span {
    padding: 3px 10px; border: 1px solid var(--border-soft); border-radius: 999px;
    background: var(--paper-2); color: var(--text-muted);
    font-family: var(--font-mono); font-size: 9px; letter-spacing: .02em;
    animation: fs-pop .38s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sa-steps span.is-live { border-color: var(--accent-deep); background: var(--accent-tint); color: var(--accent-ink); }

.sa-a { margin: 14px 0 0; color: var(--text); font-size: 14px; line-height: 1.55;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.sa-a b { font-weight: 680; letter-spacing: -.02em; }
/* The light twin of .s8-fig: the figure the answer turns on, lit as it is written. */
.sa-fig {
    padding: 1px 6px; border-radius: 5px; background: var(--accent); color: var(--ink-900);
    font-style: normal; font-weight: 650;
    animation: sa-fig .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
@keyframes sa-fig { from { background: rgba(217,242,92,0); box-shadow: 0 0 0 0 rgba(175,210,39,.55) } 60% { box-shadow: 0 0 0 8px rgba(175,210,39,0) } }

/* Exact or sampled, stated on every answer. The whole reason it is drawn at all is
   that "I summed the fifty rows I happened to fetch" is the one wrong answer that
   reads as a right one. */
.sa-badge {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
    padding: 5px 11px; border: 1px solid var(--mint); border-radius: 999px;
    background: var(--mint-soft); color: var(--emerald);
    font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sa-badge i { font-style: normal; }

.sa-rows { margin-top: 13px; border-top: 1px solid var(--border-soft); }
.sa-rows .mini-row { grid-template-columns: 1.5fr 1fr .9fr; padding: 7px 2px;
    animation: fs-in .4s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.sa-rows .mini-row:last-child { border-bottom: 0; }
.sa-muted, .sa-rows .mini-row.sa-muted i { color: var(--text-faint); }
.sa-line.sa-muted { color: var(--text-faint); font-family: var(--font-mono); font-size: 10px; }

/* ---------- 02 · Conditions ---------- */
.sa-cmp { position: absolute; left: 70px; right: 70px; top: 190px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.sa-num {
    padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: #fff;
    box-shadow: 0 16px 30px -22px rgba(14,20,40,.5);
    animation: fs-pop .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sa-num > small { display: block; color: var(--text-muted); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; }
.sa-num > b { display: block; margin-top: 9px; color: var(--text); font-size: 33px; font-weight: 680; letter-spacing: -.045em; }
.sa-num > span { display: block; margin-top: 3px; color: var(--text-2); font-size: 11.5px; }
/* The answer is ringed; the unfiltered figure is drawn in full and simply not chosen.
   Greying it to the point of illegibility would hide the comparison the chapter IS. */
.sa-num.is-answer { border-color: var(--accent-deep); box-shadow: 0 0 0 3px var(--accent-tint), 0 16px 30px -22px rgba(14,20,40,.5); }
.sa-num.is-answer > small { color: var(--accent-ink); }
.sa-num.is-other { background: var(--paper-2); }
.sa-num.is-other > b { color: var(--text-muted); }
/* Under the two cards, not between them: the pill is 125px and the gap is 40, so a
   "bridge" reading laid it straight over both numbers it was captioning. */
.sa-verdict {
    position: absolute; left: 50%; top: 344px; transform: translateX(-50%);
    padding: 5px 12px; border-radius: 999px; background: var(--ink-900); color: var(--accent);
    font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}

/* ---------- 03 · Across the links ---------- */
.sa-route { position: absolute; left: 70px; top: 164px; width: 350px; padding: 16px 18px;
    border: 1px solid var(--border); border-radius: 14px; background: #fff;
    box-shadow: 0 16px 30px -22px rgba(14,20,40,.5);
    animation: fs-rise .55s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.sa-route .fs-cap { position: static; display: block; margin-bottom: 10px; }
.sa-route .s3-path { margin: 0; }
.sa-call {
    display: block; margin-top: 12px; padding: 9px 11px; border-radius: 9px;
    background: var(--ink-950, var(--ink-900)); color: var(--accent);
    font-family: var(--font-mono); font-size: 10px; line-height: 1.5;
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sa-call u { color: var(--paper); text-decoration: none; }

.sa-bars { position: absolute; left: 466px; right: 70px; top: 164px; padding: 16px 18px;
    border: 1px solid var(--border); border-radius: 14px; background: #fff;
    box-shadow: 0 16px 30px -22px rgba(14,20,40,.5);
    animation: fs-rise .55s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.sa-bars .fs-cap { position: static; display: block; margin-bottom: 11px; }
.sa-bar { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 10px; margin-bottom: 10px;
    animation: fs-in .4s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.sa-bar:last-child { margin-bottom: 0; }
.sa-bar > span { color: var(--text-2); font-size: 11px; font-weight: 600; }
.sa-bar > i { height: 14px; border-radius: 7px; background: var(--violet); transform-origin: left;
    animation: fs-wipe .55s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both; }
.sa-bar > i.c-2 { background: var(--accent-deep); }
.sa-bar > i.c-3 { background: var(--sky); }
.sa-bar > em { color: var(--text); font-family: var(--font-mono); font-size: 10.5px; font-style: normal; }

/* ---------- 04 · It changes things · 05 · It builds ---------- */
.sa-card {
    position: absolute; padding: 14px 16px;
    border: 1px solid var(--accent-deep); border-radius: 14px; background: var(--accent-tint-2);
    box-shadow: 0 0 0 3px rgba(217,242,92,.14), 0 16px 30px -22px rgba(14,20,40,.5);
    animation: fs-rise .55s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sa-card > b { display: block; color: var(--text); font-size: 13px; font-weight: 650; letter-spacing: -.02em; }
.sa-card > small { display: block; margin-top: 5px; color: var(--text-2); font-size: 11px; line-height: 1.45; }
.sa-line {
    display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 10px;
    color: var(--text-2); font-size: 11px;
    animation: fs-in .4s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sa-line > b { color: var(--text); font-weight: 650; }
/* Before → after, because a card showing only the destination asks someone to approve
   a change whose shape they cannot see. Same rule the real edit card follows. */
.sa-diff {
    display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
    padding: 3px 9px; border: 1px solid var(--border-soft); border-radius: 999px; background: #fff;
    font-family: var(--font-mono); font-size: 9.5px;
}
.sa-diff s { color: var(--text-faint); text-decoration-color: var(--text-muted); }
.sa-diff u { color: var(--emerald); text-decoration: none; font-weight: 600; }
.sa-diff i { color: var(--text-faint); font-style: normal; }
/* A refusal is WORDS. A change the lifecycle or a permission won't take is a fact about
   the workspace, and a card that just drops it silently teaches nothing. */
.sa-note {
    display: block; margin-top: 11px; padding: 8px 11px;
    border: 1px dashed var(--amber); border-radius: 9px; background: var(--amber-soft);
    color: #6B4405; font-size: 10.5px;
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sa-actions { display: flex; align-items: center; gap: 9px; margin-top: 13px; }
.sa-actions > span {
    padding: 8px 15px; border-radius: 9px; background: var(--ink-900); color: var(--accent);
    font-size: 11.5px; font-weight: 650;
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sa-actions > em {
    color: var(--text-muted); font-style: normal; font-size: 11.5px; font-weight: 600;
    animation: fs-in .4s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sa-done {
    position: absolute; display: flex; align-items: center; gap: 12px; padding: 11px 15px;
    border: 1px solid var(--mint); border-radius: 12px; background: var(--mint-soft);
    color: var(--emerald); font-size: 12px; font-weight: 650;
    animation: fs-rise .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sa-done > span {
    margin-left: auto; padding: 6px 13px; border: 1px solid var(--emerald); border-radius: 999px;
    background: #fff; color: var(--emerald); font-size: 11px;
}
.sa-mini { margin-top: 11px; padding: 10px; border-radius: 9px; background: #fff; border: 1px solid var(--border-soft);
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.sa-mini .s5-bars { height: 54px; }
.sa-mini .s5-bars i { animation: s5-grow .6s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both; }
.sa-mini .ft-f { display: inline-block; margin: 0 4px 4px 0; }

/* The question typewriters. Each film's brief is its own length, so each gets its own
   end width rather than sharing .s2-type's 78ch. */
.sa-type {
    flex: 1; overflow: hidden; white-space: nowrap; width: 0;
    border-right: 2px solid var(--accent-deep);
    color: var(--text); font-family: var(--font-mono); font-size: 12px; font-weight: 500;
    animation: sa-type 1.7s steps(52, end) calc(var(--d, 0s) + var(--lead, 0s)) both,
               s2-caret .7s step-end calc(var(--d, 0s) + var(--lead, 0s) + 1.7s) 3;
}
@keyframes sa-type { to { width: var(--ch, 52ch) } }

/* The close: the film's own three chapters in three words, landing one at a time because
   the narration lands them one at a time. */
.sa-close { position: absolute; left: 40px; right: 40px; top: 344px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.sa-close span {
    padding: 8px 16px; border-radius: 999px; background: var(--ink-900); color: var(--accent);
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sa-close b {
    flex-basis: 100%; margin-top: 6px; color: var(--text); font-size: 17px;
    font-weight: 560; letter-spacing: -.03em;
    animation: fs-in .6s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}

/* ============================================================
   BOOKING FILM (.sk-*) — "Taking bookings", FilmLibrary.BookingFilm

   Composed from the shared primitives wherever one exists (.fs-table, .ft-head,
   .ft-f/.t-*, .mini-row, .fs-cap, .fs-node, .fs-edges); only things this film
   genuinely invents get a class. Every cue is the house delay expression,
   calc(var(--d) + var(--lead)), so a script edit that moves the lead-in shifts
   the whole picture with it and nothing has to be re-timed by hand.
   ============================================================ */
.sk-panel, .sk-page, .sk-week, .sk-grid, .sk-flag, .sk-mail, .sk-price, .sk-out, .sk-legend {
    position: absolute;
    animation: fs-pop .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sk-panel, .sk-page, .sk-flag, .sk-mail, .sk-price, .sk-out {
    padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px; background: #fff;
    box-shadow: 0 14px 26px -18px rgba(14,20,40,.5);
}

/* ---------- 01 · The page ---------- */
.sk-bind {
    display: grid; grid-template-columns: 18px 1fr auto; align-items: baseline; gap: 9px;
    margin-top: 9px; padding: 8px 10px; border-radius: 9px; background: var(--paper-2);
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sk-bind > i { color: var(--emerald); font-style: normal; font-size: 12px; font-weight: 700; }
.sk-bind > b { color: var(--text); font-size: 12px; font-weight: 620; letter-spacing: -.015em; }
.sk-bind > span { color: var(--text-muted); font-family: var(--font-mono); font-size: 9px; }
/* The one it could not resolve. Dashed, because an unfilled binding is a shape the
   page is still waiting for rather than an error it made. */
.sk-bind.is-open { background: transparent; border: 1px dashed var(--border-2); }
.sk-bind.is-open > i { color: var(--rollup-ink); }
.sk-bind.is-open > span { color: var(--rollup-ink); }
.sk-note {
    margin: 11px 0 0; color: var(--text-2); font-size: 11.5px; line-height: 1.45;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sk-pill {
    position: absolute; display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 999px; background: var(--ink-900); color: var(--accent);
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sk-pill > i { font-style: normal; font-size: 8px; }

/* ---------- 02 · What they see ---------- */
.sk-brand { display: flex; align-items: center; gap: 9px; padding-bottom: 11px; border-bottom: 1px solid var(--border-soft); }
.sk-brand > i { color: var(--violet); font-style: normal; font-size: 15px; }
.sk-brand > b { color: var(--text); font-size: 14px; letter-spacing: -.025em; }
.sk-lab {
    display: block; margin: 14px 0 7px; color: var(--text-muted);
    font-family: var(--font-mono); font-size: 8px; letter-spacing: .16em;
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sk-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sk-chips > span {
    padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border-2);
    color: var(--text-2); font-size: 11px; font-weight: 550;
}
.sk-chips > span.is-on { border-color: var(--violet); background: var(--violet-soft); color: var(--relation-ink); font-weight: 650; }

.sk-week { display: grid; grid-template-columns: repeat(3, 116px); gap: 12px; }
.sk-day { padding: 11px 9px; border: 1px solid var(--border); border-radius: 11px; background: #fff; }
.sk-day > b {
    display: block; margin-bottom: 9px; padding-bottom: 7px; border-bottom: 1px solid var(--border-soft);
    color: var(--text-muted); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .14em;
}
.sk-slot {
    display: block; margin-top: 6px; padding: 7px 8px; border-radius: 7px;
    background: var(--accent-tint); color: var(--accent-ink);
    font-size: 10.5px; font-weight: 620; text-align: center;
}
/* The two kinds of unavailable are drawn DIFFERENTLY, because the narration names them
   separately — time off and already booked are two subtractions, not one grey. */
.sk-slot.is-off, .sk-slot.is-taken {
    animation: fs-in .4s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sk-slot.is-off { background: repeating-linear-gradient(135deg, var(--paper-2) 0 5px, #fff 5px 10px); color: var(--text-faint); }
.sk-slot.is-taken { background: var(--paper-2); color: var(--text-faint); text-decoration: line-through; }
.sk-legend { display: grid; gap: 6px; }
.sk-legend > span { display: flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 10.5px; }
.sk-legend i { width: 14px; height: 10px; border-radius: 3px; }
.sk-legend i.k-off { background: repeating-linear-gradient(135deg, var(--paper-2) 0 4px, #fff 4px 8px); border: 1px solid var(--border-2); }
.sk-legend i.k-taken { background: var(--paper-2); border: 1px solid var(--border-2); }

/* ---------- 03 · It's a record ---------- */
.sk-rows { margin-top: 4px; }
.sk-rows .mini-row { grid-template-columns: 1fr 1.2fr 1fr .7fr .8fr; padding: 8px 2px; }
.sk-rows .mini-row:last-child { border-bottom: 0; }
/* The stamped value. Ringed rather than merely coloured: this one cell is the whole
   claim of the chapter, and it has to survive being screenshotted. */
.sk-stamp {
    display: inline-block; padding: 2px 9px; border-radius: 6px;
    background: var(--accent-tint); box-shadow: 0 0 0 2px var(--accent-deep);
    color: var(--accent-ink); font-style: normal; font-weight: 700;
}
.sk-tag {
    display: inline-block; margin-top: 11px; color: var(--accent-ink);
    font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .14em;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sk-price { width: 250px; }
.sk-price > b { display: block; margin-bottom: 8px; color: var(--text); font-size: 13px; letter-spacing: -.02em; }
.sk-swap { display: flex; align-items: baseline; gap: 10px; font-size: 15px; }
.sk-swap s { color: var(--text-faint); }
.sk-swap i { color: var(--text-muted); font-style: normal; }
.sk-swap u {
    color: var(--violet); text-decoration: none; font-weight: 700;
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sk-out { width: 218px; }
.sk-out > small { display: block; color: var(--text-muted); font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; }
.sk-out > b { display: block; margin-top: 8px; color: var(--text); font-size: 27px; font-weight: 680; letter-spacing: -.045em; }
.sk-out > span { display: block; margin-top: 4px; color: var(--text-2); font-size: 11px; line-height: 1.4; }
.sk-out.is-new { border-color: var(--accent-deep); box-shadow: 0 0 0 3px var(--accent-tint), 0 16px 30px -22px rgba(14,20,40,.5); }
.sk-out.is-new > small { color: var(--accent-ink); }
.sk-verdict, .sk-close {
    position: absolute; left: 64px; right: 64px; top: 372px;
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}
.sk-verdict > span, .sk-close > span {
    padding: 8px 15px; border-radius: 999px; background: var(--paper-2); color: var(--text-2);
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sk-verdict > b, .sk-close > b {
    flex-basis: 100%; margin-top: 4px; color: var(--text); font-size: 17px;
    font-weight: 560; letter-spacing: -.03em;
    animation: fs-in .6s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}

/* ---------- 04 · Run the day ---------- */
.sk-grid {
    display: grid; grid-template-columns: 30px repeat(3, 148px); gap: 10px;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff;
    box-shadow: 0 14px 26px -18px rgba(14,20,40,.5);
}
.sk-hours { display: grid; grid-template-rows: repeat(7, 38px); padding-top: 27px; }
.sk-hours > i {
    color: var(--text-faint); font-family: var(--font-mono); font-size: 9px; font-style: normal;
    border-top: 1px solid var(--border-soft); padding-top: 2px;
}
.sk-col { position: relative; height: 293px; }
.sk-col > b {
    display: block; margin-bottom: 6px; color: var(--text); font-size: 11.5px; font-weight: 650;
    animation: fs-in .4s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sk-appt {
    position: absolute; left: 0; right: 0; top: calc(21px + var(--t, 0px)); height: var(--h, 40px);
    display: flex; align-items: center; padding: 0 8px; border-radius: 7px;
    background: var(--violet-soft); border-left: 3px solid var(--violet);
    color: var(--relation-ink); font-size: 10.5px; font-weight: 600;
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
/* Two at once, drawn as two halves of one hour so the overlap is a SHAPE. A badge alone
   would make the reader take the count on trust. */
.sk-appt.is-clash { background: var(--coral-soft); border-left-color: var(--coral); color: var(--rollup-ink); }
.sk-appt.is-clash.a { right: 50%; margin-right: 2px; }
.sk-appt.is-clash.b { left: 50%; margin-left: 2px; }
/* The drag: it starts in the middle column and ends in the right-hand one, which is a
   column width plus the grid gap. Held on the final frame by `both`. */
.sk-appt.is-move {
    background: var(--accent-tint); border-left-color: var(--accent-deep); color: var(--accent-ink);
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both,
               sk-move .9s cubic-bezier(.4,0,.2,1) calc(var(--d, 0s) + var(--lead, 0s) + 1.6s) both;
}
@keyframes sk-move {
    from { transform: translate(0, 0); box-shadow: none; }
    45%  { transform: translate(79px, -14px) scale(1.03); box-shadow: 0 14px 22px -12px rgba(14,20,40,.5); }
    to   { transform: translate(158px, 0); box-shadow: none; }
}
.sk-flag { width: 232px; }
.sk-flag > p {
    display: grid; grid-template-columns: 14px 1fr; align-items: baseline; gap: 8px;
    margin: 10px 0 0; color: var(--text); font-size: 11.5px; font-weight: 600;
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sk-flag > p > i { color: var(--coral); font-style: normal; font-size: 8px; }
.sk-flag > p > em {
    /* Column 2 explicitly: the bare text node before this em is an ANONYMOUS grid
       item and already took it, so an unplaced em falls to column 1 (14px) and its
       text is clipped. */
    grid-column: 2;
    display: block; margin-top: 3px; color: var(--text-muted);
    font-family: var(--font-mono); font-size: 9px; font-style: normal; font-weight: 500;
}

/* ---------- 05 · When it moves ---------- */
.sk-mail .ft-head span { color: var(--emerald); }
.sk-mail.is-none .ft-head span { color: var(--text-muted); }
.sk-sub { margin: 10px 0 12px; color: var(--text); font-size: 13px; font-weight: 620; letter-spacing: -.02em; }
.sk-when {
    display: grid; grid-template-columns: 44px 1fr; align-items: baseline; gap: 10px;
    margin-top: 7px; padding: 8px 10px; border-radius: 8px; background: var(--paper-2);
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sk-when > small { color: var(--text-muted); font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; }
.sk-when > s { color: var(--text-faint); font-size: 13px; }
.sk-when.is-now { background: var(--accent-tint); }
.sk-when.is-now > small { color: var(--accent-ink); }
.sk-when > b { color: var(--text); font-size: 13px; font-weight: 680; }
.sk-who {
    display: inline-block; margin-top: 12px; color: var(--emerald);
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sk-who.is-none { color: var(--rollup-ink); }

/* ============================================================
   DESK FILM (.sd-*) — "Running a support desk", FilmLibrary.DeskFilm
   ============================================================ */
.sd-src, .sd-table, .sd-kb, .sd-chat, .sd-inbox, .sd-thread,
.sd-clock, .sd-hours, .sd-policy, .sd-route, .sd-tick, .sd-csat {
    position: absolute;
    padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px; background: #fff;
    box-shadow: 0 14px 26px -18px rgba(14,20,40,.5);
    animation: fs-pop .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}

/* ---------- 01 · Where it arrives ---------- */
.sd-src { width: 168px; display: grid; grid-template-columns: 20px 1fr; column-gap: 9px; align-items: baseline; }
.sd-src > i { grid-row: span 2; color: var(--violet); font-style: normal; font-size: 15px; }
.sd-src > b { color: var(--text); font-size: 12.5px; font-weight: 650; letter-spacing: -.02em; }
.sd-src > span { color: var(--text-muted); font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .1em; }
.sd-table { width: 468px; }
.sd-rows { margin-top: 4px; }
.sd-rows .mini-row { grid-template-columns: .8fr 1.1fr 1.7fr .6fr; padding: 8px 2px;
    animation: fs-in .4s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.sd-rows .mini-row.is-head { animation: none; }
.sd-rows .mini-row:last-child { border-bottom: 0; }

/* ---------- 02 · Answered already ---------- */
.sd-brand { display: flex; align-items: center; gap: 9px; padding-bottom: 11px; margin-bottom: 4px; border-bottom: 1px solid var(--border-soft); }
.sd-brand > i { color: var(--accent-deep); font-style: normal; font-size: 14px; }
.sd-brand > b { color: var(--text); font-size: 13.5px; letter-spacing: -.025em; }
.sd-art {
    margin: 0; padding: 9px 2px; border-bottom: 1px solid var(--border-soft);
    color: var(--text-2); font-size: 12px;
}
.sd-art:last-of-type { border-bottom: 0; }
.sd-bub {
    max-width: 84%; margin: 10px 0 0; padding: 9px 12px; border-radius: 12px;
    font-size: 11.5px; line-height: 1.45;
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sd-bub.is-in { background: var(--paper-2); color: var(--text); border-bottom-left-radius: 4px; }
.sd-bub.is-out { margin-left: auto; background: var(--accent-tint); color: var(--accent-ink); border-bottom-right-radius: 4px; }
.sd-bub.is-out em {
    display: block; margin-top: 6px; color: var(--text-muted);
    font-family: var(--font-mono); font-size: 8.5px; font-style: normal; letter-spacing: .08em;
}
/* An internal note is a different KIND of thing, so it is a different shape as well as a
   different colour — audience is not direction, and the picture should say that. */
.sd-bub.is-note {
    max-width: 100%; background: transparent; border: 1px dashed var(--amber);
    color: var(--text-2); border-radius: 9px;
    display: grid; grid-template-columns: 12px 1fr; gap: 8px; align-items: baseline;
}
.sd-bub.is-note > i { color: var(--amber); font-style: normal; font-size: 8px; }
.sd-zero {
    position: absolute; left: 64px; top: 356px; display: flex; align-items: baseline; gap: 11px;
    animation: fs-pop .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sd-zero > b { color: var(--emerald); font-size: 40px; font-weight: 700; letter-spacing: -.05em; }
.sd-zero > span { color: var(--text-2); font-size: 13px; }

/* ---------- 03 · The queue ---------- */
.sd-chips { display: flex; gap: 8px; margin: 10px 0 4px; }
.sd-chips > span {
    padding: 5px 11px; border-radius: 999px; background: var(--paper-2); color: var(--text-muted);
    font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em;
    animation: fs-pop .4s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sd-chips > span.is-live { background: var(--accent-tint); color: var(--accent-ink); font-weight: 650; }
.sd-row {
    display: grid; grid-template-columns: 1fr auto; row-gap: 3px;
    padding: 9px 2px; border-bottom: 1px solid var(--border-soft);
    animation: fs-in .4s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sd-row > b { color: var(--text); font-size: 11.5px; font-weight: 650; }
.sd-row > i {
    color: var(--accent-ink); font-family: var(--font-mono); font-size: 8.5px;
    font-style: normal; letter-spacing: .08em; align-self: center;
}
.sd-row > span { grid-column: 1 / -1; color: var(--text-2); font-size: 11px; }
.sd-row:last-child { border-bottom: 0; }
.sd-row.is-dim > b, .sd-row.is-dim > span { color: var(--text-faint); }
.sd-row.is-dim > i { color: var(--text-faint); }
.sd-seal {
    display: inline-block; margin-top: 11px; padding: 5px 10px; border-radius: 6px;
    background: var(--amber-soft); color: #8A5B08;
    font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}

/* ---------- 04 · The clock ---------- */
.sd-line {
    display: grid; grid-template-columns: 118px 1fr; align-items: baseline; gap: 10px;
    margin-top: 9px; padding: 8px 10px; border-radius: 8px; background: var(--paper-2);
}
.sd-line > small { color: var(--text-muted); font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; }
.sd-line > b {
    color: var(--text); font-size: 14px; font-weight: 680; letter-spacing: -.02em;
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sd-line > b.sd-due { color: var(--accent-ink); }
.sd-stamp {
    display: inline-block; margin-top: 11px; padding: 5px 10px; border-radius: 6px;
    background: var(--accent-tint); color: var(--accent-ink);
    font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sd-bands { display: flex; gap: 3px; height: 26px; }
.sd-bands > i { flex: 1; border-radius: 4px; }
.sd-bands > i.off { flex: .7; background: repeating-linear-gradient(135deg, var(--paper-2) 0 5px, #fff 5px 10px); border: 1px solid var(--border-soft); }
.sd-bands > i.on { background: var(--accent-deep); }
.sd-key { display: flex; justify-content: space-between; margin-top: 6px; }
.sd-key > span { color: var(--text-faint); font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; }
.sd-pause {
    display: inline-block; margin-top: 12px; padding: 5px 10px; border-radius: 6px;
    background: var(--sky-soft); color: var(--lookup-ink);
    font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sd-swap { display: flex; align-items: baseline; gap: 10px; margin: 11px 0 13px; font-size: 15px; }
.sd-swap s { color: var(--text-faint); }
.sd-swap i { color: var(--text-muted); font-style: normal; }
.sd-swap u { color: var(--violet); text-decoration: none; font-weight: 700; }
/* Both sides of the stamped-deadline claim, same size, for the same reason the booking
   film draws both: showing only the new target leaves the half people doubt undrawn. */
.sd-out {
    display: inline-block; width: calc(50% - 5px); padding: 10px 12px; vertical-align: top;
    border: 1px solid var(--border); border-radius: 10px; background: var(--paper-2);
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sd-out + .sd-out { margin-left: 6px; }
.sd-out > small { display: block; color: var(--text-muted); font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .1em; }
.sd-out > b { display: block; margin-top: 6px; color: var(--text); font-size: 19px; font-weight: 680; letter-spacing: -.04em; }
.sd-out > span { display: block; margin-top: 3px; color: var(--text-2); font-size: 10px; line-height: 1.35; }
.sd-out.is-new { background: #fff; border-color: var(--accent-deep); box-shadow: 0 0 0 2px var(--accent-tint); }
.sd-out.is-new > small { color: var(--accent-ink); }
.sd-route { display: flex; align-items: baseline; gap: 9px; padding: 11px 14px; }
.sd-route > i { color: var(--accent-deep); font-style: normal; font-size: 8px; }
.sd-route > b { color: var(--text); font-size: 12.5px; font-weight: 650; letter-spacing: -.02em; }
.sd-route > em {
    margin-left: auto; color: var(--text-muted); font-family: var(--font-mono);
    font-size: 9px; font-style: normal;
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}

/* ---------- 05 · Why here ---------- */
.sd-tick { width: 266px; border-top: 3px solid var(--accent-deep); }
.sd-tick > span { display: block; color: var(--text-muted); font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .1em; }
.sd-tick > b { display: block; margin-top: 4px; color: var(--text); font-size: 16px; font-weight: 680; letter-spacing: -.03em; }
.sd-quote {
    margin: 11px 0 0; padding: 9px 11px; border-radius: 9px; background: var(--paper-2);
    color: var(--text-2); font-size: 11.5px; line-height: 1.45;
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sd-same {
    position: absolute; left: 392px; right: 64px; top: 320px;
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.sd-same > span {
    padding: 7px 13px; border-radius: 999px; background: var(--paper-2); color: var(--text-2);
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sd-same > b {
    flex-basis: 100%; margin-top: 4px; color: var(--text); font-size: 17px;
    font-weight: 560; letter-spacing: -.03em;
    animation: fs-in .6s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sd-stars { display: flex; gap: 5px; margin: 12px 0 0; }
.sd-stars > i { color: var(--border-2); font-style: normal; font-size: 19px; }
.sd-stars > i.is-on {
    color: var(--amber);
    animation: fs-pop .4s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.sd-back {
    display: inline-block; margin-top: 10px; color: var(--accent-ink);
    font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}

/* ============================================================
   REPORTS FILM (.rp-*) — "Reading the numbers", FilmLibrary.ReportsFilm
   Composed from the shared primitives wherever one exists (.ft-head, .fs-node,
   .fs-edges, .fs-cap); these are only the things this film genuinely invents.
   ============================================================ */
.rp-report, .rp-panel, .rp-matrix, .rp-having, .rp-drill, .rp-share, .rp-cal,
.rp-ann, .rp-cell-note, .rp-band, .rp-status {
    position: absolute;
    animation: fs-pop .55s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rp-report, .rp-panel, .rp-matrix, .rp-having, .rp-drill, .rp-share {
    padding: 13px 15px; border: 1px solid var(--border); border-radius: 13px;
    background: #fff; box-shadow: 0 14px 26px -18px rgba(14,20,40,.5);
}

/* ---------- 01 · Group it ---------- */
.rp-grid { margin-top: 4px; }
.rp-row {
    display: grid; grid-template-columns: 1.5fr .7fr 1fr; gap: 12px;
    padding: 8px 2px; border-bottom: 1px solid var(--border-soft);
    color: var(--text); font-size: 12px;
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rp-row:last-child { border-bottom: 0; }
.rp-row i { font-style: normal; }
.rp-row i:nth-child(2) { text-align: right; color: var(--text-2); }
.rp-row.is-head {
    animation: none;
    color: var(--text-muted); font-family: var(--font-mono); font-size: 8.5px;
    letter-spacing: .1em; text-transform: uppercase;
}
/* Its own --d, set inline: the count is there from the start and the money
   lands with the sentence about where the money comes from. */
.rp-row u {
    text-align: right; color: var(--text); font-weight: 640; text-decoration: none;
    font-variant-numeric: tabular-nums;
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rp-ann {
    display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
    padding: 10px 13px; border-radius: 11px; background: var(--paper-2);
    border: 1px solid var(--border-soft);
}
.rp-ann > b { min-width: 46px; color: var(--text); font-size: 11.5px; letter-spacing: -.02em; }
.rp-ann > i { color: var(--text-faint); font-style: normal; font-size: 10px; }
.rp-hop {
    padding: 3px 8px; border-radius: 999px; background: #fff;
    border: 1px solid var(--border-2);
    color: var(--text-2); font-size: 10.5px; font-weight: 560;
}
.rp-ann.is-axis .rp-hop.is-end { background: var(--violet-soft); border-color: transparent; color: var(--relation-ink); font-weight: 650; }
.rp-ann.is-sum  .rp-hop.is-end { background: var(--rollup-soft);  border-color: transparent; color: var(--rollup-ink);  font-weight: 650; }
.rp-ann > em {
    margin-left: auto; color: var(--text-muted); font-family: var(--font-mono);
    font-size: 8.5px; font-style: normal; letter-spacing: .1em; text-transform: uppercase;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}

/* ---------- 02 · Compared to what ---------- */
.rp-set {
    margin-top: 9px; padding: 9px 11px; border-radius: 10px; background: var(--paper-2);
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rp-set small { display: block; color: var(--text-muted); font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; }
.rp-set b { display: block; margin-top: 3px; color: var(--text); font-size: 14px; font-weight: 620; letter-spacing: -.025em; }
.rp-set.is-cmp { background: var(--accent-tint); }
.rp-set.is-cmp small { color: var(--accent-ink); }
.rp-opt {
    display: flex; align-items: center; gap: 9px; margin-top: 7px;
    color: var(--text-2); font-size: 12px;
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rp-opt i { color: var(--border-2); font-style: normal; font-size: 11px; }
.rp-opt.is-on { color: var(--text); font-weight: 640; }
.rp-opt.is-on i { color: var(--accent-deep); }
.rp-cmp {
    display: grid; grid-template-columns: 1.1fr 1fr .8fr; gap: 12px;
    padding: 8px 2px; border-bottom: 1px solid var(--border-soft);
    color: var(--text); font-size: 12px;
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rp-cmp i { font-style: normal; font-variant-numeric: tabular-nums; }
.rp-cmp i:nth-child(2) { text-align: right; font-weight: 620; }
.rp-cmp.is-head { animation: none; color: var(--text-muted); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; }
.rp-cmp.is-head i:nth-child(2) { font-weight: 500; }
.rp-cmp u { text-align: right; font-size: 11px; font-weight: 650; text-decoration: none; }
/* Direction only. The report has no idea whether the column is revenue or refunds,
   which is why neither arrow is coloured for good news or bad. */
.rp-cmp u.is-up, .rp-cmp u.is-dn { color: var(--text-2); }
.rp-cmp u.is-new {
    padding: 2px 8px; border-radius: 999px;
    background: var(--accent-tint); color: var(--accent-ink); font-size: 10px;
}
.rp-cal { padding: 0; }
.rp-months { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rp-months span {
    display: block; padding: 11px 12px; border-radius: 11px; text-align: center;
    border: 1px solid var(--border-2); background: #fff;
    color: var(--text-2); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em;
}
.rp-months span i { display: block; margin-top: 4px; color: var(--text-faint); font-style: normal; font-size: 8.5px; letter-spacing: .1em; }
.rp-months span.is-now { border-color: var(--accent-deep); background: var(--accent-tint); color: var(--accent-ink); }
.rp-roll {
    margin-top: 10px; padding: 9px 12px; border-radius: 10px; text-align: center;
    border: 1px dashed var(--border-2);
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rp-roll s { color: var(--text-faint); font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; }

/* ---------- 03 · Side and top ---------- */
.rp-mx { margin-top: 4px; }
.rp-mrow {
    display: grid; grid-template-columns: 1.1fr repeat(4, .8fr) .95fr; gap: 8px;
    padding: 7px 2px; border-bottom: 1px solid var(--border-soft);
    color: var(--text); font-size: 11.5px;
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rp-mrow i { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.rp-mrow i:first-child { text-align: left; }
.rp-mrow b { text-align: right; font-weight: 660; font-variant-numeric: tabular-nums; }
.rp-mrow.is-head { animation: none; color: var(--text-muted); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; }
.rp-mrow.is-tot { border-bottom: 0; border-top: 1px solid var(--border-2); margin-top: 2px; padding-top: 9px; color: var(--text); }
.rp-mrow.is-tot i:first-child { color: var(--text-muted); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; }
/* The corner and both total lines are computed over RECORDS. Its own --d so it
   re-lands on the sentence that says the totals still match. */
.rp-mrow.is-tot b { animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both; }
/* Nothing fell there. An em dash and not a nought, which is a different fact. */
.rp-mrow i.is-nil { color: var(--text-faint); }
.rp-mrow i.is-cell {
    border-radius: 5px; background: var(--accent-tint); color: var(--accent-ink); font-weight: 650;
    box-shadow: 0 0 0 3px var(--accent-tint);
}
/* Dropped by the group filter, so they go — the frame this chapter ends on is a
   report of two routes whose footer adds up to exactly those two. */
.rp-mrow.is-out { animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both, rp-drop .5s ease calc(10.7s + var(--lead, 0s)) forwards; }
@keyframes rp-drop { to { opacity: 0; transform: translateX(-10px) } }
.rp-cell-note {
    padding: 10px 13px; border-radius: 11px; background: var(--accent-tint);
    color: var(--accent-ink); font-size: 12px; font-weight: 560; line-height: 1.45;
}
.rp-hrow {
    display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 8px;
    margin-top: 9px; padding: 9px 10px; border-radius: 10px;
    background: var(--rollup-soft); color: var(--rollup-ink); font-size: 11.5px; font-weight: 620;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rp-hrow i { font-style: normal; font-size: 12px; }
.rp-hnote {
    display: block; margin-top: 9px; color: var(--text-muted);
    font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; line-height: 1.7;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rp-gone {
    display: flex; align-items: baseline; gap: 9px; margin-top: 13px;
    padding-top: 12px; border-top: 1px solid var(--border-soft);
    animation: fs-pop .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rp-gone b { color: var(--text); font-size: 30px; font-weight: 680; letter-spacing: -.045em; }
.rp-gone span { color: var(--text-2); font-size: 12px; }

/* ---------- 04 · On a board ---------- */
.rp-band {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 15px; border-radius: 12px;
    border: 1px solid var(--accent-deep); background: var(--accent-tint);
}
.rp-band > i { color: var(--accent-ink); font-style: normal; font-size: 9px; }
.rp-term { display: flex; align-items: baseline; gap: 6px; }
.rp-term b { color: var(--accent-ink); font-size: 12.5px; letter-spacing: -.02em; }
.rp-term em { color: var(--accent-ink); font-style: normal; font-size: 11px; opacity: .7; }
.rp-term u { color: var(--accent-ink); font-size: 12.5px; font-weight: 680; text-decoration: none; }
.rp-rule { width: 1px; height: 15px; background: rgba(14,20,40,.18); }
/* 12.5px is the floor on this band in the product for the same reason it is here:
   the reach is the caveat that stops the board being misread. */
.rp-reach { color: var(--accent-ink); font-size: 12.5px; }
.rp-why {
    padding: 3px 9px; border-radius: 999px; background: #fff;
    color: var(--text-2); font-size: 11px; font-weight: 560;
}
.rp-x { margin-left: auto; color: var(--accent-ink); font-size: 14px; animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.rp-board { position: absolute; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 140px; gap: 12px; }
.rp-tile {
    position: relative; display: flex; flex-direction: column; gap: 5px;
    padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px;
    background: #fff; box-shadow: 0 10px 20px -18px rgba(14,20,40,.5);
    animation: fs-pop .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rp-tile > b { color: var(--text-2); font-size: 10.5px; font-weight: 600; letter-spacing: -.01em; }
.rp-tile > u {
    color: var(--text); font-size: 23px; font-weight: 660; letter-spacing: -.04em; text-decoration: none;
    font-variant-numeric: tabular-nums;
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rp-was { color: var(--text-faint); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .06em; }
/* Every tile carries its own mark, not just the band: a board scrolls, and a
   number that moved has to carry its reason or it gets screenshotted without it. */
.rp-mark {
    margin-top: auto; padding: 3px 7px; border-radius: 6px; align-self: flex-start;
    background: var(--accent-tint); color: var(--accent-ink);
    font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em;
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rp-mark.is-src-mark, .rp-mark.is-off-mark { background: var(--paper-2); color: var(--text-muted); }
/* NOT dimmed. An out-of-scope tile is live, accurate and interactive, and opacity
   would say "disabled" — the exact mistake the product shipped and undid. */
.rp-tile.is-off { opacity: 1; }
.rp-tile.is-src { border-color: var(--border-2); box-shadow: 0 0 0 3px var(--accent-tint), 0 10px 20px -18px rgba(14,20,40,.5); }
.rp-bars { display: flex; align-items: flex-end; gap: 8px; height: 58px; margin-top: auto; }
.rp-bars i { flex: 1; border-radius: 4px 4px 0 0; background: var(--violet-soft); }
/* The selected mark at full strength, the rest receding — opacity alone is one
   channel, so the chosen bar also keeps the accent. */
.rp-bars i.is-sel { background: var(--accent-deep); animation: fs-in .4s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.rp-bars.is-small { height: 42px; }
.rp-line {
    margin-top: auto; height: 40px; border-radius: 6px;
    background: linear-gradient(160deg, var(--sky-soft), transparent 70%);
    border-bottom: 2px solid var(--sky);
}

/* ---------- 05 · Behind the number ---------- */
.rp-list {
    margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border-soft);
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rp-lrow {
    display: grid; grid-template-columns: 1fr 1.3fr .7fr; gap: 10px;
    padding: 7px 2px; border-bottom: 1px solid var(--border-soft);
    color: var(--text); font-size: 11.5px;
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rp-lrow i { font-style: normal; }
.rp-lrow i:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.rp-lrow.is-head { animation: none; color: var(--text-muted); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; }
.rp-count {
    display: block; margin-top: 10px; color: var(--text-muted);
    font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rp-honest { position: absolute; display: grid; gap: 11px; }
.rp-hcard {
    padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--border-2); background: var(--paper-2);
    animation: fs-pop .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rp-hcard b { display: block; color: var(--text); font-size: 15px; font-weight: 640; letter-spacing: -.03em; }
.rp-hcard span { display: block; margin-top: 4px; color: var(--text-2); font-size: 11.5px; }
.rp-hcard.is-empty b { font-size: 20px; color: var(--text-faint); }
.rp-url {
    margin-top: 10px; padding: 9px 11px; border-radius: 9px; background: var(--paper-2);
    color: var(--text-2); font-family: var(--font-mono); font-size: 10.5px;
}
.rp-frozen {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rp-frozen span {
    padding: 3px 9px; border-radius: 999px; background: var(--accent-tint);
    color: var(--accent-ink); font-size: 10.5px; font-weight: 600;
}
.rp-frozen span.is-later { background: transparent; border: 1px dashed var(--border-2); color: var(--text-faint); text-decoration: line-through; }
.rp-fnote {
    display: block; margin-top: 10px; color: var(--text-muted); font-size: 11px; line-height: 1.45;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}

/* ============================================================
   AUTOMATIONS FILM (.au-*) — "Making work move", FilmLibrary.AutomationsFilm
   ============================================================ */
.au-when, .au-clock, .au-steps, .au-target, .au-refuse, .au-ask, .au-status,
.au-out, .au-http, .au-log, .au-fail, .au-tell, .au-guard, .au-run, .au-fan,
.au-cons, .au-hand {
    position: absolute;
    animation: fs-pop .55s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.au-when, .au-clock, .au-steps, .au-target, .au-refuse, .au-ask, .au-out,
.au-http, .au-log, .au-fail {
    padding: 13px 15px; border: 1px solid var(--border); border-radius: 13px;
    background: #fff; box-shadow: 0 14px 26px -18px rgba(14,20,40,.5);
}

/* ---------- 01 · The moment ---------- */
.au-trig {
    display: grid; grid-template-columns: 18px 1fr; align-items: baseline; gap: 4px 9px;
    margin-top: 9px; padding: 9px 10px; border-radius: 10px; background: var(--paper-2);
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.au-trig > i { grid-row: span 2; color: var(--border-2); font-style: normal; font-size: 11px; }
.au-trig > b { color: var(--text-2); font-size: 12px; font-weight: 600; letter-spacing: -.015em; }
/* Explicit column 2: an unplaced <em> falls into the 18px track and clips, which
   is invisible to every structural check and only scrollWidth ever finds. */
.au-trig > em {
    grid-column: 2; color: var(--text-muted); font-family: var(--font-mono);
    font-size: 8.5px; font-style: normal; letter-spacing: .08em;
}
.au-trig.is-on { background: var(--accent-tint); }
.au-trig.is-on > i { color: var(--accent-deep); }
.au-trig.is-on > b { color: var(--accent-ink); font-weight: 660; }
.au-trig.is-on > em { color: var(--accent-ink); opacity: .75; }
.au-time { margin: 12px 0 4px; color: var(--text); font-size: 40px; font-weight: 660; letter-spacing: -.05em; }
.au-time small { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.au-zone {
    display: grid; grid-template-columns: 18px 1fr; align-items: baseline; gap: 3px 9px;
    margin-top: 9px; padding: 9px 10px; border-radius: 10px;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.au-zone > i { grid-row: span 2; font-style: normal; font-size: 11px; }
.au-zone > b { color: var(--text); font-size: 12.5px; font-weight: 640; letter-spacing: -.02em; }
.au-zone > span { grid-column: 2; color: var(--text-muted); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; }
.au-zone.is-on { background: var(--accent-tint); }
.au-zone.is-on > i { color: var(--emerald); }
.au-zone.is-on > b, .au-zone.is-on > span { color: var(--accent-ink); }
.au-zone.is-off { background: var(--paper-2); }
.au-zone.is-off > i, .au-zone.is-off > b, .au-zone.is-off > span { color: var(--text-faint); }

/* ---------- 02 · What happens ---------- */
.au-step {
    display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 10px;
    margin-top: 9px; padding: 9px 10px; border-radius: 10px; background: var(--paper-2);
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.au-step > u {
    display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px;
    background: var(--accent); color: var(--ink-900);
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; text-decoration: none;
}
.au-step > b { color: var(--text); font-size: 12px; font-weight: 600; letter-spacing: -.015em; }
.au-swap { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; }
.au-swap s { color: var(--text-faint); font-size: 20px; }
.au-swap i { color: var(--text-muted); font-style: normal; }
.au-swap u {
    padding: 2px 12px; border-radius: 8px; background: var(--accent-tint);
    color: var(--accent-ink); font-size: 20px; font-weight: 680; text-decoration: none;
}
.au-note { margin-top: 10px; color: var(--text-2); font-size: 12px; }
.au-note b { color: var(--text); font-weight: 640; }
.au-guard { display: grid; gap: 8px; }
.au-vs { display: grid; gap: 8px; }
.au-vs span {
    display: grid; grid-template-columns: 16px 1fr; align-items: center; gap: 9px;
    padding: 10px 12px; border-radius: 10px; font-size: 12px;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.au-vs span i { font-style: normal; font-size: 11px; }
.au-vs span b { font-weight: inherit; }
.au-vs span em { font-style: normal; font-weight: 700; }
.au-vs .is-no { background: var(--paper-2); color: var(--text-faint); }
.au-vs .is-yes { background: var(--accent-tint); color: var(--accent-ink); font-weight: 560; }
.au-rrow { color: var(--text); font-size: 13px; font-weight: 620; letter-spacing: -.02em; }
.au-rout {
    display: flex; align-items: center; gap: 9px; margin-top: 10px;
    padding: 9px 11px; border-radius: 10px;
    background: var(--coral-soft); color: var(--rollup-ink); font-size: 11.5px; font-weight: 600;
}
.au-rout i { font-style: normal; font-size: 11px; }

/* ---------- 03 · It can wait ---------- */
.au-run { height: 122px; }
.au-rail { position: absolute; left: 12px; right: 12px; top: 26px; height: 2px; background: var(--border-2); }
.au-node {
    position: absolute; top: 0; width: 150px; padding-top: 44px; text-align: center;
    animation: fs-pop .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.au-node > i {
    position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
    border: 1px solid var(--border); background: #fff;
    color: var(--text-2); font-style: normal; font-size: 12px; font-weight: 650;
}
.au-node > b { display: block; color: var(--text); font-size: 12px; font-weight: 650; letter-spacing: -.02em; }
.au-node > span { display: block; margin-top: 4px; color: var(--text-muted); font-size: 10px; line-height: 1.35; }
.au-node.is-gate > i { border-color: var(--amber); background: var(--amber-soft); }
.au-node.is-rest > i { border-color: var(--accent-deep); background: var(--accent-tint); color: var(--accent-ink); }
.au-fan { display: grid; gap: 6px; }
.au-fan span {
    padding: 6px 9px; border-radius: 8px; background: var(--violet-soft);
    color: var(--relation-ink); font-size: 10.5px; font-weight: 580; text-align: center;
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.au-ask { padding: 13px 15px; border: 1px solid var(--border); border-radius: 13px; background: #fff; box-shadow: 0 14px 26px -18px rgba(14,20,40,.5); }
.au-arow { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; }
.au-arow b { color: var(--text); font-size: 13px; letter-spacing: -.02em; }
.au-arow span { color: var(--text-muted); font-size: 11px; }
.au-yes {
    display: flex; align-items: center; gap: 9px; margin-top: 11px;
    padding: 9px 11px; border-radius: 10px;
    background: var(--accent-tint); color: var(--accent-ink); font-size: 11.5px; font-weight: 620;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.au-yes i { font-style: normal; font-size: 11px; }
.au-status { padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--amber); background: var(--amber-soft); }
.au-status small { display: block; color: #8A5B08; font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; }
.au-status b { display: block; margin-top: 4px; color: #8A5B08; font-size: 22px; font-weight: 660; letter-spacing: -.035em; }
.au-status span { display: block; margin-top: 5px; color: var(--text-2); font-size: 10.5px; line-height: 1.45; }

/* ---------- 04 · Reaching out ---------- */
.au-orow {
    display: grid; grid-template-columns: 20px 1fr; align-items: baseline; gap: 3px 9px;
    margin-top: 10px; padding: 9px 10px; border-radius: 10px; background: var(--paper-2);
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.au-orow > i { grid-row: span 2; color: var(--violet); font-style: normal; font-size: 13px; }
.au-orow > b { color: var(--text); font-size: 12px; font-weight: 620; letter-spacing: -.015em; }
.au-orow > em { grid-column: 2; color: var(--text-muted); font-family: var(--font-mono); font-size: 8.5px; font-style: normal; letter-spacing: .08em; }
.au-verb { display: flex; align-items: baseline; gap: 10px; }
.au-verb b {
    padding: 3px 9px; border-radius: 7px; background: var(--accent-tint);
    color: var(--accent-ink); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
}
.au-verb span { color: var(--text-2); font-family: var(--font-mono); font-size: 10px; }
.au-body {
    display: flex; align-items: baseline; gap: 11px; margin-top: 11px;
    padding: 10px 12px; border-radius: 10px; background: var(--paper-2);
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.au-body span { color: var(--emerald); font-family: var(--font-mono); font-size: 10px; font-weight: 600; }
.au-body code { color: var(--text-2); font-family: var(--font-mono); font-size: 10.5px; }
.au-cons { display: flex; flex-wrap: wrap; gap: 8px; }
.au-cons span {
    padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border-2); background: #fff;
    color: var(--text-2); font-size: 11.5px; font-weight: 560;
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.au-cons span.is-more { border-style: dashed; color: var(--text-muted); }

/* ---------- 05 · What it did ---------- */
.au-lrow {
    display: grid; grid-template-columns: 16px 1fr auto auto; align-items: center; gap: 10px;
    margin-top: 9px; padding: 9px 10px; border-radius: 10px; background: var(--paper-2);
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.au-lrow > i { font-style: normal; font-size: 11px; }
.au-lrow > i.ok { color: var(--emerald); }
.au-lrow > b { color: var(--text); font-size: 12px; font-weight: 640; }
.au-lrow > span { color: var(--text-muted); font-size: 10.5px; }
.au-lrow > em { color: var(--text-faint); font-family: var(--font-mono); font-size: 8.5px; font-style: normal; }
.au-lrow.is-open { background: var(--accent-tint); }
.au-lsteps { margin: 8px 0 0 14px; padding-left: 12px; border-left: 2px solid var(--border-2); animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both; }
.au-ls {
    display: grid; grid-template-columns: 18px auto 1fr; align-items: baseline; gap: 9px;
    padding: 6px 0; color: var(--text-2); font-size: 11px;
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.au-ls > u {
    display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px;
    background: var(--border-soft); color: var(--text-muted);
    font-family: var(--font-mono); font-size: 9px; text-decoration: none;
}
.au-ls > b { color: var(--text); font-size: 11.5px; font-weight: 620; }
.au-ls > span { color: var(--text-muted); }
.au-fail .au-ls { padding: 9px 10px; margin-top: 8px; border-radius: 10px; }
/* The honest half of a partial failure: the earlier steps' side effects are real
   and already happened, which is why PartlyFailed is its own status. */
.au-fail .au-ls.is-done { background: var(--paper-2); }
.au-fail .au-ls.is-done > span { color: var(--text-2); }
.au-fail .au-ls.is-bad { background: var(--coral-soft); }
.au-fail .au-ls.is-bad > u { background: var(--coral); color: #fff; }
.au-fail .au-ls.is-bad > b, .au-fail .au-ls.is-bad > span { color: var(--rollup-ink); }
.au-fail .ft-head span { color: var(--rollup-ink); }
.au-tell {
    display: grid; grid-template-columns: 14px 1fr; align-items: baseline; gap: 5px 11px;
    padding: 13px 15px; border-radius: 12px;
    border: 1px solid var(--border-2); background: #fff; box-shadow: 0 14px 26px -18px rgba(14,20,40,.5);
}
.au-tell > i { grid-row: span 2; color: var(--coral); font-style: normal; font-size: 10px; }
.au-tell > b { color: var(--text); font-size: 13px; letter-spacing: -.02em; }
.au-tell > span { grid-column: 2; color: var(--text-2); font-size: 11.5px; line-height: 1.45; }
.au-hand { display: flex; align-items: center; gap: 13px; }
.au-btn {
    padding: 9px 18px; border-radius: 10px; background: var(--accent); color: var(--ink-900);
    font-size: 12.5px; font-weight: 640; letter-spacing: -.015em;
}
.au-hand em { color: var(--text-muted); font-family: var(--font-mono); font-size: 8.5px; font-style: normal; letter-spacing: .1em; }

/* ============================================================
   RELATIONS FILM (.rl-*) — "Connecting the work", FilmLibrary.RelationsFilm
   Composed from the shared primitives wherever one exists (.ft-head, .fs-edges,
   .fs-cap, .mini-row); these are only what this film genuinely invents.
   ============================================================ */
.rl-card, .rl-node, .rl-vs, .rl-sweep, .rl-both, .rl-route, .rl-filter, .rl-grid,
.rl-alt, .rl-orders {
    position: absolute;
    animation: fs-pop .55s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rl-card, .rl-grid, .rl-alt {
    padding: 13px 15px; border: 1px solid var(--border); border-radius: 13px;
    background: #fff; box-shadow: 0 14px 26px -18px rgba(14,20,40,.5);
}
/* The far side of a link reads as further away, so the journey is legible before
   any label explains it. */
.rl-card.is-far { border-top: 3px solid var(--relation); }
.rl-card.is-hub { border-top: 3px solid var(--accent-deep); }

/* ---------- 01 · Link them ---------- */
.rl-field {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 9px; padding: 9px 11px; border-radius: 10px; background: var(--paper-2);
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rl-field > i { color: var(--text-muted); font-family: var(--font-mono); font-size: 9px; font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
.rl-chip {
    padding: 3px 10px; border-radius: 999px; background: var(--relation-soft);
    color: var(--relation-ink); font-size: 11px; font-style: normal; font-weight: 620;
}
.rl-field.is-auto { background: var(--accent-tint); }
.rl-field.is-auto > i { color: var(--accent-ink); }
.rl-count { color: var(--accent-ink); font-size: 19px; font-weight: 680; letter-spacing: -.03em; }
.rl-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.rl-list span {
    padding: 3px 8px; border-radius: 7px; background: var(--paper-2);
    color: var(--text-2); font-family: var(--font-mono); font-size: 9.5px;
    animation: fs-pop .4s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rl-list span.is-more { background: transparent; border: 1px dashed var(--border-2); color: var(--text-faint); }
.rl-made, .rl-typed, .rl-note {
    display: block; margin-top: 10px; color: var(--text-muted);
    font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rl-both {
    left: 50%; top: 300px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 12px;
    padding: 12px 22px; border-radius: 999px;
    border: 1px solid var(--border-2); background: #fff;
    box-shadow: 0 16px 30px -22px rgba(14,20,40,.5);
}
.rl-both > i { color: var(--accent-deep); font-style: normal; font-size: 17px; }
.rl-both > b { color: var(--text); font-size: 15px; font-weight: 560; letter-spacing: -.03em; }

/* ---------- 02 · Borrow a value ---------- */
.rl-field.is-look { background: var(--lookup-soft); }
.rl-field.is-look > i { color: var(--lookup-ink); }
.rl-val, .rl-edit {
    font-size: 13px; font-style: normal; font-weight: 650; letter-spacing: -.02em;
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rl-val { color: var(--lookup-ink); }
.rl-edit { padding: 2px 10px; border-radius: 7px; background: var(--accent-tint); color: var(--accent-ink); }
.rl-from {
    flex-basis: 100%; margin-top: 2px; color: var(--lookup-ink); opacity: .75;
    font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em;
}
.rl-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rl-vs span {
    display: grid; grid-template-columns: 16px 1fr; align-items: baseline; gap: 4px 11px;
    padding: 13px 15px; border-radius: 12px;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rl-vs span > i { grid-row: span 2; font-style: normal; font-size: 12px; }
.rl-vs span > b { font-size: 16px; font-weight: 620; letter-spacing: -.03em; }
.rl-vs span > em { grid-column: 2; font-style: normal; font-size: 11.5px; }
.rl-vs .is-no { background: var(--paper-2); color: var(--text-faint); }
.rl-vs .is-no > b { color: var(--text-2); }
.rl-vs .is-yes { background: var(--accent-tint); color: var(--accent-ink); }
.rl-sweep {
    left: 64px; top: 372px; width: 712px;
    display: flex; align-items: baseline; gap: 12px;
    padding: 12px 16px; border-radius: 11px; background: var(--mint-soft);
}
.rl-sweep > b { color: var(--emerald); font-size: 14px; letter-spacing: -.025em; }
.rl-sweep > span { color: var(--text-2); font-size: 12px; }

/* ---------- 03 · Total it ---------- */
.rl-orders { display: grid; gap: 8px; }
.rl-ord {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px;
    padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: #fff;
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rl-ord > b { color: var(--text); font-family: var(--font-mono); font-size: 11px; }
.rl-ord > em {
    padding: 2px 8px; border-radius: 999px; font-size: 9px; font-style: normal; font-weight: 600;
    background: var(--paper-2); color: var(--text-muted);
}
.rl-ord > i { color: var(--text-2); font-size: 11.5px; font-style: normal; font-variant-numeric: tabular-nums; }
.rl-ord.is-draft { border-style: dashed; }
.rl-ord.is-draft > b, .rl-ord.is-draft > i { color: var(--text-faint); }
.rl-roll {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-top: 9px; padding: 9px 12px; border-radius: 10px; background: var(--rollup-soft);
}
.rl-roll > i { color: var(--rollup-ink); font-family: var(--font-mono); font-size: 9px; font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
.rl-roll > b {
    color: var(--rollup-ink); font-size: 20px; font-weight: 680; letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rl-roll.is-narrow { background: var(--accent-tint); }
.rl-roll.is-narrow > i, .rl-roll.is-narrow > b { color: var(--accent-ink); }
.rl-cond { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.rl-cond span {
    padding: 4px 10px; border-radius: 999px; border: 1px solid var(--accent-deep);
    background: #fff; color: var(--accent-ink); font-size: 10.5px; font-weight: 600;
    animation: fs-pop .4s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}

/* ---------- 04 · Three tables out ---------- */
.rl-node {
    width: 204px; padding: 13px 15px;
    border: 1px solid var(--border); border-top: 3px solid var(--ink-400); border-radius: 12px;
    background: #fff; box-shadow: 0 14px 26px -18px rgba(14,20,40,.5);
}
.rl-node > span { display: block; color: var(--text-muted); font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .12em; }
.rl-node > b { display: block; margin-top: 5px; color: var(--text); font-size: 14px; letter-spacing: -.025em; }
.rl-node > em {
    display: block; margin-top: 10px; padding: 6px 9px; border-radius: 8px;
    font-size: 10.5px; font-style: normal;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rl-node > em.is-missing { background: var(--paper-2); color: var(--text-faint); }
.rl-node > em.is-found { background: var(--accent-tint); color: var(--accent-ink); font-weight: 620; }
.rl-node.is-target { border-top-color: var(--accent-deep); }
.rl-route {
    display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
    padding: 13px 16px; border-radius: 12px; background: var(--paper-2);
    border: 1px solid var(--border-soft);
}
.rl-route > i { color: var(--text-faint); font-style: normal; font-size: 11px; }
.rl-hop {
    padding: 4px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--border-2);
    color: var(--text-2); font-size: 11.5px; font-weight: 560;
}
.rl-hop.is-end { background: var(--accent-tint); border-color: transparent; color: var(--accent-ink); font-weight: 660; }
.rl-route > em {
    margin-left: auto; color: var(--text-muted); font-family: var(--font-mono);
    font-size: 8.5px; font-style: normal; letter-spacing: .1em; text-transform: uppercase;
}
.rl-filter {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 16px; border-radius: 12px;
    border: 1px solid var(--accent-deep); background: var(--accent-tint);
}
.rl-filter > i { color: var(--accent-ink); font-style: normal; font-size: 9px; }
.rl-filter > b { color: var(--accent-ink); font-size: 13px; font-weight: 620; letter-spacing: -.02em; }
.rl-hits {
    margin-left: auto; padding: 4px 11px; border-radius: 999px; background: #fff;
    color: var(--accent-ink); font-size: 11.5px; font-weight: 650;
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}

/* ---------- 05 · Only this view ---------- */
.rl-row {
    display: grid; grid-template-columns: .7fr 1.3fr 1fr; gap: 10px;
    padding: 8px 2px; border-bottom: 1px solid var(--border-soft);
    color: var(--text); font-size: 11.5px;
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rl-row:last-of-type { border-bottom: 0; }
.rl-row i { font-style: normal; }
.rl-row.is-head { animation: none; color: var(--text-muted); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; }
/* Its own --d, so the borrowed column arrives on the sentence that adds it. */
.rl-row i.is-new {
    padding: 2px 7px; border-radius: 6px; background: var(--lookup-soft); color: var(--lookup-ink); font-weight: 600;
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rl-row.is-head i.is-new { background: transparent; color: var(--lookup-ink); font-weight: 500; }
.rl-alt { border-color: var(--border-2); }
.rl-alt .ft-head span { color: var(--rollup-ink); }
.rl-stamp {
    margin-top: 10px; padding: 11px 13px; border-radius: 10px; background: var(--paper-2);
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rl-stamp > b { color: var(--text); font-size: 13px; letter-spacing: -.02em; }
.rl-stamp > span { display: block; margin-top: 3px; color: var(--text-2); font-size: 11px; }
.rl-rot {
    display: grid; grid-template-columns: 14px 1fr; align-items: baseline; gap: 5px 10px;
    margin-top: 11px; padding: 11px 13px; border-radius: 10px; background: var(--coral-soft);
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rl-rot > i { grid-row: span 2; color: var(--coral); font-style: normal; font-size: 10px; }
.rl-rot > b { color: var(--rollup-ink); font-size: 12.5px; letter-spacing: -.02em; }
.rl-rot > span { grid-column: 2; color: var(--rollup-ink); font-size: 11px; line-height: 1.4; }

/* ============================================================
   VIEWS FILM (.vw-*) — "Seeing the operation", FilmLibrary.ViewsFilm
   ============================================================ */
.vw-surface, .vw-bar, .vw-same, .vw-save, .vw-bound, .vw-was, .vw-now, .vw-says,
.vw-grid, .vw-width, .vw-total, .vw-share, .vw-sync, .vw-one {
    position: absolute;
    animation: fs-pop .55s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.vw-surface, .vw-save, .vw-grid, .vw-share, .vw-was, .vw-now {
    padding: 12px 14px; border: 1px solid var(--border); border-radius: 13px;
    background: #fff; box-shadow: 0 14px 26px -18px rgba(14,20,40,.5);
}
.vw-tag {
    margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft);
    color: var(--text-muted); font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em;
}

/* ---------- 01 · Same records ---------- */
.vw-rows .mini-row { grid-template-columns: .7fr 1.2fr .5fr .8fr; padding: 7px 2px; }
.vw-rows .mini-row:last-child { border-bottom: 0; }
.vw-rows .mini-row.is-head { animation: none; }
.vw-map {
    /* 72, not 96: at 96 the map ran to y=444 and the closing pill had nowhere left to sit
       inside the 480 canvas. The pins are placed in percentages, so they ride the change. */
    position: relative; height: 72px; border-radius: 9px;
    background: linear-gradient(160deg, var(--sky-soft), var(--paper-2));
}
.vw-map i {
    position: absolute; width: 9px; height: 9px; border-radius: 50%;
    background: var(--coral); box-shadow: 0 0 0 3px rgba(255,255,255,.85);
    animation: fs-pop .4s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.mini-cal.is-sparse i.is-1 { box-shadow: inset 0 3px 0 var(--coral); background: var(--coral-soft); }
.vw-one {
    /* 430, measured: with the map at 72 the surface above ends at 418, and 424 left a 6px
       channel where every other gap on these canvases is 12 or more. */
    left: 50%; top: 430px; transform: translateX(-50%);
    display: flex; align-items: baseline; gap: 11px;
    padding: 10px 20px; border-radius: 999px; background: var(--accent-tint);
}
.vw-one > b { color: var(--accent-ink); font-size: 14px; font-weight: 620; letter-spacing: -.025em; }
.vw-one > span { color: var(--accent-ink); opacity: .8; font-size: 12px; }

/* ---------- 02 · Shape it ---------- */
.vw-bar {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 13px; border: 1px solid var(--border-2); border-radius: 12px; background: #fff;
    box-shadow: 0 14px 26px -20px rgba(14,20,40,.5);
}
.vw-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 999px; background: var(--accent-tint);
    color: var(--accent-ink); font-size: 11.5px; font-weight: 600;
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.vw-chip > i { font-style: normal; font-size: 9px; }
.vw-chip.is-off { background: var(--paper-2); color: var(--text-muted); }
.vw-search {
    margin-left: auto; padding: 6px 16px; border-radius: 999px;
    border: 1px solid var(--border-2); color: var(--text-faint); font-size: 11.5px;
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.vw-same { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.vw-same span {
    padding: 7px 14px; border-radius: 10px; background: var(--paper-2);
    color: var(--text-2); font-size: 12px; font-weight: 560;
    animation: fs-pop .4s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.vw-same > em {
    margin-left: auto; color: var(--text-muted); font-family: var(--font-mono);
    font-size: 8.5px; font-style: normal; letter-spacing: .1em; text-transform: uppercase;
}
.vw-who { display: flex; align-items: center; gap: 11px; margin-top: 10px; }
.vw-who > i { color: var(--accent-deep); font-style: normal; font-size: 10px; letter-spacing: .1em; }
.vw-who > span { color: var(--text-2); font-size: 12px; }
.vw-save.is-mine .vw-who > i { color: var(--violet); }

/* ---------- 03 · All of it ---------- */
.vw-bound { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.vw-b {
    display: grid; grid-template-columns: 18px 1fr; align-items: baseline; gap: 4px 10px;
    padding: 12px 13px; border-radius: 11px; background: #fff; border: 1px solid var(--border);
    animation: fs-pop .5s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.vw-b > i { grid-row: span 2; color: var(--accent-deep); font-style: normal; font-size: 13px; }
.vw-b > b { color: var(--text); font-size: 12.5px; letter-spacing: -.02em; }
.vw-b > span { grid-column: 2; color: var(--text-2); font-size: 11px; line-height: 1.35; }
.vw-was { border-color: var(--border-2); }
.vw-was .vw-tag, .vw-now .vw-tag { margin-bottom: 8px; }
.vw-was > b, .vw-now > b {
    display: block; margin-top: 11px; font-size: 24px; font-weight: 680; letter-spacing: -.04em;
}
.vw-was > b { color: var(--rollup-ink); }
.vw-was > b s { color: var(--text-faint); font-size: 14px; font-weight: 500; }
.vw-now > b { color: var(--accent-ink); }
.vw-was > span, .vw-now > span { display: block; margin-top: 3px; color: var(--text-2); font-size: 11px; }
.vw-now { border-color: var(--accent-deep); box-shadow: 0 0 0 3px var(--accent-tint), 0 14px 26px -18px rgba(14,20,40,.5); }
.vw-says {
    left: 50%; top: 432px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 12px;
    padding: 10px 20px; border-radius: 999px; border: 1px solid var(--border-2); background: #fff;
}
.vw-says > i { color: var(--text-muted); font-style: normal; font-size: 14px; }
.vw-says > b { color: var(--text); font-size: 13px; font-weight: 560; letter-spacing: -.02em; }

/* ---------- 04 · The grid ---------- */
.vw-grid { padding: 11px 13px; }
.vw-grow {
    display: grid; grid-template-columns: .7fr 1.3fr .6fr .6fr .8fr; gap: 12px;
    padding: 8px 4px; border-bottom: 1px solid var(--border-soft);
    color: var(--text); font-size: 11.5px;
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.vw-grow i { font-style: normal; }
.vw-grow i:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.vw-grow.is-head { animation: none; color: var(--text-muted); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; }
/* The frozen pair keeps a tint and a hard edge, which is what "frozen" looks like
   on the real grid once you scroll sideways. */
.vw-grow i.is-frozen { background: var(--paper-2); margin: -8px 0; padding: 8px 6px; }
.vw-grow i.is-frozen:nth-child(2) { box-shadow: 6px 0 8px -8px rgba(14,20,40,.5); }
.vw-grow.is-foot { border-bottom: 0; border-top: 1px solid var(--border-2); margin-top: 2px; padding-top: 10px; }
.vw-grow.is-foot b { color: var(--text); font-size: 14px; font-weight: 680; }
.vw-freeze, .vw-drag {
    position: absolute; color: var(--accent-ink); font-family: var(--font-mono);
    font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.vw-freeze { left: 64px; top: 74px; }
.vw-drag { left: 470px; top: 74px; color: var(--text-muted); }
.vw-width, .vw-total { padding: 13px 15px; border-radius: 12px; }
.vw-width {
    display: grid; grid-template-columns: 16px 1fr; align-items: baseline; gap: 5px 11px;
    background: var(--paper-2);
}
.vw-width > i { grid-row: span 2; color: var(--text-muted); font-style: normal; font-size: 12px; }
.vw-width > b { color: var(--text); font-size: 13px; letter-spacing: -.02em; }
.vw-width > span { grid-column: 2; color: var(--text-2); font-size: 11px; line-height: 1.4; }
.vw-total { display: grid; gap: 9px; background: transparent; padding: 0; }
.vw-t {
    display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 3px 12px;
    padding: 11px 13px; border-radius: 11px;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.vw-t > s, .vw-t > b { font-size: 17px; font-weight: 680; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.vw-t > span { color: var(--text-2); font-size: 11px; }
.vw-t > em { grid-column: 1 / -1; font-style: normal; font-size: 10.5px; }
.vw-t.is-bad { background: var(--paper-2); }
.vw-t.is-bad > s { color: var(--text-faint); }
.vw-t.is-bad > em { color: var(--rollup-ink); }
.vw-t.is-good { background: var(--accent-tint); }
.vw-t.is-good > b { color: var(--accent-ink); }
.vw-t.is-good > span { color: var(--accent-ink); opacity: .8; }

/* ---------- 05 · Send it ---------- */
.vw-url {
    margin-top: 10px; padding: 9px 11px; border-radius: 9px; background: var(--paper-2);
    color: var(--text-2); font-family: var(--font-mono); font-size: 10.5px;
}
.vw-frozen {
    display: block; margin-top: 10px; color: var(--text-muted);
    font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.vw-cal-app { display: grid; gap: 6px; margin-top: 10px; }
.vw-cal-app span {
    padding: 7px 10px; border-radius: 8px; background: var(--sky-soft);
    color: var(--lookup-ink); font-size: 11px; font-weight: 560;
    animation: fs-in .45s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.vw-sync { display: flex; align-items: center; justify-content: center; gap: 22px; }
.vw-move {
    display: flex; align-items: baseline; gap: 10px;
    padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border); background: #fff;
    box-shadow: 0 14px 26px -20px rgba(14,20,40,.5);
}
.vw-move > b { color: var(--text); font-size: 12.5px; letter-spacing: -.02em; }
.vw-move > s { color: var(--text-faint); font-size: 12.5px; }
.vw-move > i { color: var(--text-muted); font-style: normal; font-size: 11px; }
.vw-move > u {
    padding: 2px 10px; border-radius: 7px; background: var(--accent-tint);
    color: var(--accent-ink); font-size: 12.5px; font-weight: 660; text-decoration: none;
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.vw-arrow { color: var(--accent-deep); font-style: normal; font-size: 20px; }

/* ============================================================
   SCHEMA REVIEW FILM (.rv-*) — "It reviews itself", FilmLibrary.ReviewFilm
   Composed from the shared primitives wherever one exists (.ft-head, .fs-cap,
   .mini-row); these are only what this film genuinely invents.
   ============================================================ */
.rv-ask, .rv-half, .rv-clock, .rv-card, .rv-sim, .rv-nothing, .rv-choice,
.rv-recheck, .rv-dropped, .rv-grid, .rv-refuse {
    position: absolute;
    animation: fs-pop .55s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rv-half, .rv-card, .rv-sim, .rv-grid, .rv-refuse {
    padding: 13px 15px; border: 1px solid var(--border); border-radius: 13px;
    background: #fff; box-shadow: 0 14px 26px -18px rgba(14,20,40,.5);
}
.rv-tag {
    margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft);
    color: var(--text-muted); font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em;
}

/* ---------- 01 · It looks ---------- */
.rv-ask {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-radius: 12px;
    border: 1px solid var(--accent-deep); background: var(--accent-tint);
}
.rv-ask > i { color: var(--accent-ink); font-style: normal; font-size: 14px; }
.rv-ask > b { color: var(--accent-ink); font-size: 14px; letter-spacing: -.025em; }
.rv-ask > em {
    margin-left: auto; color: var(--accent-ink); opacity: .75;
    font-family: var(--font-mono); font-size: 8.5px; font-style: normal; letter-spacing: .1em;
}
/* The two halves of the evidence, and the contrast is the chapter: exact on the left,
   sampled on the right. A dashed edge on the sample so the difference survives a
   greyscale screenshot, not only the label. */
.rv-half.is-sample { border-style: dashed; border-color: var(--border-2); box-shadow: none; }
.rv-stat { display: flex; align-items: baseline; gap: 10px; margin-top: 9px; }
.rv-stat > b {
    min-width: 62px; color: var(--text); font-size: 21px; font-weight: 680; letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}
.rv-stat > span { color: var(--text-2); font-size: 11.5px; }
.rv-stat.is-lead > b { color: var(--accent-ink); font-size: 27px; }
.rv-vals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.rv-vals span {
    padding: 4px 9px; border-radius: 7px; background: var(--paper-2);
    color: var(--text-2); font-family: var(--font-mono); font-size: 9.5px;
    animation: fs-pop .4s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rv-vals span.is-more { background: transparent; border: 1px dashed var(--border-2); color: var(--text-faint); }
.rv-note {
    display: block; margin-top: 11px; color: var(--text-muted);
    font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .09em; line-height: 1.6;
}
.rv-clock {
    display: flex; align-items: baseline; gap: 14px;
    padding: 12px 16px; border-radius: 11px; background: var(--paper-2);
}
.rv-clock > b { color: var(--text); font-size: 15px; font-weight: 620; letter-spacing: -.03em; white-space: nowrap; }
.rv-clock > span { color: var(--text-2); font-size: 11.5px; line-height: 1.45; }

/* ---------- 02 · What it noticed ---------- */
.rv-card { padding: 11px 15px; }
.rv-kind { color: var(--text-muted); font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .12em; }
.rv-card > b { display: block; margin-top: 4px; color: var(--text); font-size: 14px; letter-spacing: -.025em; }
.rv-why { display: block; margin-top: 3px; color: var(--text-2); font-size: 11.5px; }
/* The one people do not expect gets the accent and the room. */
.rv-card.is-big { border-color: var(--accent-deep); box-shadow: 0 0 0 3px var(--accent-tint), 0 14px 26px -18px rgba(14,20,40,.5); }
.rv-cols { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rv-cols span {
    padding: 4px 10px; border-radius: 999px; background: var(--paper-2);
    color: var(--text-2); font-size: 10.5px;
    animation: fs-pop .4s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rv-cols > i { color: var(--text-faint); font-style: normal; font-size: 11px; }
.rv-cols > em {
    padding: 4px 12px; border-radius: 999px; background: var(--accent-tint);
    color: var(--accent-ink); font-size: 11.5px; font-style: normal; font-weight: 660;
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}

/* ---------- 03 · Show me first ---------- */
.rv-bar { height: 9px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.rv-bar > i {
    display: block; height: 100%; border-radius: 999px; background: var(--accent-deep);
    animation: fs-wipe .7s cubic-bezier(.4,0,.2,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
    transform-origin: left;
}
.rv-sim > b {
    display: block; margin-top: 11px; color: var(--text); font-size: 22px; font-weight: 680;
    letter-spacing: -.04em;
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rv-miss {
    display: flex; align-items: baseline; gap: 12px; margin-top: 10px;
    padding: 9px 11px; border-radius: 10px; background: var(--coral-soft);
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rv-miss > span { color: var(--rollup-ink); font-size: 12px; font-weight: 620; white-space: nowrap; }
.rv-miss > em { color: var(--rollup-ink); font-family: var(--font-mono); font-size: 10px; font-style: normal; }
.rv-nothing {
    display: grid; grid-template-columns: 18px 1fr; align-items: baseline; gap: 5px 12px;
    padding: 13px 16px; border-radius: 12px; background: var(--accent-tint);
}
.rv-nothing > i { grid-row: span 2; color: var(--emerald); font-style: normal; font-size: 13px; }
.rv-nothing > b { color: var(--accent-ink); font-size: 15px; font-weight: 620; letter-spacing: -.03em; }
.rv-nothing > span { grid-column: 2; color: var(--accent-ink); opacity: .85; font-size: 11.5px; line-height: 1.45; }

/* ---------- 04 · Take it or leave it ---------- */
.rv-choice {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); background: #fff;
    box-shadow: 0 14px 26px -20px rgba(14,20,40,.5);
}
.rv-apply {
    padding: 8px 20px; border-radius: 9px; background: var(--accent); color: var(--ink-900);
    font-size: 13px; font-weight: 650; letter-spacing: -.015em;
}
.rv-decline {
    padding: 8px 20px; border-radius: 9px; border: 1px solid var(--border-2);
    color: var(--text-2); font-size: 13px; font-weight: 560;
}
.rv-choice > em {
    color: var(--text-muted); font-family: var(--font-mono); font-size: 8.5px;
    font-style: normal; letter-spacing: .1em;
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rv-choice.is-no { border-style: dashed; box-shadow: none; }
.rv-recheck { display: flex; align-items: center; justify-content: center; gap: 20px; }
.rv-step {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 18px; border-radius: 11px; background: var(--paper-2);
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rv-step > i {
    display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
    background: var(--accent); color: var(--ink-900);
    font-family: var(--font-mono); font-size: 10px; font-style: normal; font-weight: 600;
}
.rv-step > b { color: var(--text); font-size: 12.5px; font-weight: 600; letter-spacing: -.02em; }
.rv-and { color: var(--text-faint); font-style: normal; font-size: 15px; }
.rv-dropped {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px;
    padding: 12px 16px; border-radius: 11px; background: var(--paper-2);
}
.rv-dropped > s { color: var(--text-faint); font-size: 13px; }
.rv-dropped > span { color: var(--text-2); font-size: 11.5px; }
.rv-dropped > em {
    margin-left: auto; color: var(--text-muted); font-family: var(--font-mono);
    font-size: 8.5px; font-style: normal; letter-spacing: .1em;
}

/* ---------- 05 · Where it finds you ---------- */
.rv-grid { padding: 11px 13px; }
.rv-toolbar {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border-soft);
}
.rv-tb {
    padding: 5px 11px; border-radius: 8px; background: var(--paper-2);
    color: var(--text-2); font-size: 11px;
}
/* The chip is the chapter: it is the suggestion having travelled to where the work is. */
.rv-chip {
    display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
    padding: 5px 12px; border-radius: 999px;
    border: 1px solid var(--accent-deep); background: var(--accent-tint);
    color: var(--accent-ink); font-size: 11px; font-weight: 640;
    animation: fs-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rv-chip > i { font-style: normal; font-size: 9px; }
.rv-grid .mini-row { grid-template-columns: 1.1fr 1fr 1fr .8fr; padding: 8px 2px; }
.rv-grid .mini-row:last-child { border-bottom: 0; }
.rv-grid .mini-row.is-head { animation: none; }
.rv-refuse { border-color: var(--border-2); }
.rv-refuse > b { display: block; margin-top: 4px; color: var(--text); font-size: 14px; letter-spacing: -.025em; }
.rv-said {
    display: flex; align-items: center; gap: 11px; margin-top: 11px;
    padding: 10px 13px; border-radius: 10px; background: var(--amber-soft);
    animation: fs-in .5s ease calc(var(--d, 0s) + var(--lead, 0s)) both;
}
.rv-said > i { color: var(--amber); font-style: normal; font-size: 11px; }
.rv-said > span { color: #8A5B08; font-size: 12px; font-weight: 560; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .film-dialog { width: 96vw; margin: 2vh auto; padding: 14px 14px 12px; border-radius: 18px; }
    .film-head h2 { font-size: 15px; }
    /* Narrow screens are width-bound, so a fixed screen height would leave a tall
       empty band under the canvas. Stack the scenes in one grid cell instead and let
       the frame carry the canvas aspect, so the picture is as large as the width
       allows. .film-say keeps a min-height so the dialog doesn't resize per chapter. */
    .film-screen { display: grid; height: auto; }
    .film-scene { position: static; grid-area: 1 / 1; }
    .film-vis { aspect-ratio: 900 / 480; }
    /* min-height, not a fixed height: it must clear the longest narration at this
       width so the dialog doesn't resize by a line as chapters change. */
    .film-say { grid-template-columns: 1fr; gap: 5px; min-height: 142px; align-content: start; }
    .film-chapters button em { display: none; }
    .film-chapters button { align-items: center; padding: 9px 4px 11px; }
    .film-hint { display: none; }
}
@media (max-width: 620px) {
    .film-head-copy .film-eyebrow { font-size: 8.5px; }
    .film-count { display: none; }
    .film-say p { font-size: 12.5px; }
    .film-cta { padding: 8px 12px; font-size: 12px; }
}
@media (max-height: 700px) {
    .film-dialog { margin: 1vh auto; }
    .film-screen { height: 52vh; }
}

/* ---------- Reduced motion: land on the meaningful frame ----------
   The global marketing.css rule crushes every duration to ~0, which is right
   for one-shot reveals but leaves the cross-fading scenes stacked. These give
   those scenes the same final frame the animation would have ended on. */
@media (prefers-reduced-motion: reduce) {
    /* The card is timed entirely by its animation duration, and the site-wide
       reduced-motion rule forces every duration to .01ms — so left alone it would
       flash for a frame at each chapter turn, which is worse than not showing it.
       These viewers still get the chapter name: the .film-say caption names it under
       the picture and the scene's aria-label carries it. */
    .film-chapter-card { display: none; }
    .s1-scatter { display: none; }
    .s4-pill { transform: translateX(472px); }
    .s4-view { opacity: 0; }
    .s4-view.v-map { opacity: 1; }
    .s2-type, .s8-type, .sb-type, .sa-type { width: auto; border-right: 0; }
    /* The reports film's 03 ends with two routes dropped by the group filter, so
       reduced motion has to land there rather than on all four still showing. */
    .rp-mrow.is-out { opacity: 0; }
    .sb-frow.is-editing b { border-right: 0; }
}