/* Bespoke landing-page diagrams. No shared three-card layout.

   ── Colour ──────────────────────────────────────────────────────────────
   This file used to carry 56 raw hex literals against 13 var() references,
   which made it the single largest source of colour sprawl in the product —
   41 of the 63 colours the site renders came from these 143 lines. Among
   them: #fff, #ffffff and #fffdf7 all coexisting beside --paper, and SEVEN
   distinct dark greens (#193f30 #204d39 #214b38 #244532 #244a36 #27553c
   #2a5940) where --pitch already existed.

   Every literal now resolves through a token. Where a literal was a
   near-duplicate of a palette token it was folded into that token rather
   than given a name of its own — the three whites are --paper, the seven
   greens are --pitch / --pitch-deep, the two terracottas are --clay, the
   near-blacks and near-greys are --ink / --rule / --vellum. That is 18
   occurrences deleted rather than renamed.

   What is left is genuinely bespoke: each scene is an *illustration* with its
   own small world of colour (a poster stack, a printed match report, a floodlit
   pitch, a pair of tenant vaults), and flattening those onto the UI palette
   would make them look like UI. Those keep --scene-* names, scoped to
   .visual-scene so they cannot leak into the interface.

   ── Type ────────────────────────────────────────────────────────────────
   17 font sizes were hard-coded here using none of the --t-* tokens, and the
   floor was `.report-table { font: 6px }` — 20 elements rendering at 6px.
   Sizes now resolve through the shared scale, with one documented exception:
   --t-scene-label. These scenes are decorative — the SVGs inside them are
   already aria-hidden, and .report-table's "content" is four headings
   followed by sixteen em-dashes, i.e. texture standing in for a document.
   Treating them as texture is the right call, but 6px reads as a rendering
   fault rather than as a design, so the floor is lifted to 9px throughout.

   The remaining correct fix is markup, not CSS: `scene.className = ...` in
   app/javascript/home_visual_scenes.js should also set aria-hidden="true" on
   the scene root, at which point these labels are formally decorative and the
   sub-11px sizes stop being a question. Flagged in the handover; that file is
   owned elsewhere. */

.visual-scene {
  /* These scenes stay light in dark mode, and this one line is what does it.
     `light-dark()` in application.css resolves against the *used* colour
     scheme, so pinning the subtree to `light` pins every palette token the
     scenes reference — --paper, --ink, --rule, --vellum — to its light value
     without touching a single rule below.

     That is a design decision, not a shortcut. Each scene is an illustration
     of a printed thing: a stack of posters, a match report on paper, a
     floodlit pitch. Roughly 40 of the colours in this file are fixed hexes
     belonging to those illustrations and would not invert anyway, so a naive
     inversion produces half-inverted pictures — --ink turning white on a
     poster whose cream ground is a literal. A photograph in a dark-themed
     page stays a photograph; these behave the same way, sitting as lit panels
     on the dark ground.

     The alternative — genuinely dark illustrations — means re-authoring the
     --scene-* palette, which is a design job rather than a token job. Flagged
     in the handover as the one part of dark mode that is deferred. */
  color-scheme: light;
  /* The pin alone is not enough, and this is the subtle half. `color-scheme`
     changes how light-dark() resolves in declarations made INSIDE this
     subtree — but `color` is inherited as an already-resolved value, computed
     up on body.editorial under the page's scheme. So every scene element that
     never declares its own colour inherited dark-mode ink onto a pinned cream
     ground: 22 elements at 1.08:1, measured. Re-declaring colour here forces
     one re-resolution under the pinned scheme, and the whole subtree inherits
     from that instead. */
  color: var(--ink);

  /* label floor — decorative diagram text only, never interface text */
  --t-scene-label: 9px;

  /* recommendation posters */
  --scene-poster: #f6f2e8;
  --scene-poster-ink: #665e50;
  --scene-poster-art: #d6e6d4;
  --scene-poster-art-warm: #edceb5;
  --scene-poster-art-cool: #cddde3;
  --scene-poster-line: #426c52;
  --scene-label-on-deep: #dcecdf;

  /* printed match report */
  --scene-report-ground: #f1e7db;
  --scene-report-rule: #d4c6b6;
  --scene-report-cell: #e4dacd;
  --scene-report-cell-hi: #d8e3d5;
  --scene-report-ink: #594d3e;
  --scene-report-mute: #d5c9b9;

  /* squad board */
  --scene-pitch-line: #78967a;
  --scene-squad-fg: #eff6ec;
  --scene-squad-mute: #b6cbb7;
  --scene-squad-chip: #faf0d6;
  --scene-squad-staff: #41684e;
  --scene-squad-attach: #84a188;

  /* tenant vaults */
  --scene-vault-ground: #18292d;
  --scene-vault-fg: #e1eaeb;
  --scene-vault-accent: #bde4bc;
  --scene-vault-edge: #668980;
  --scene-vault-fill: #203c3c;
  --scene-vault-other: #243136;
  --scene-vault-other-edge: #566267;
  --scene-vault-icon: #aacbae;
  --scene-vault-files: #86a397;
  --scene-vault-divider: #667278;
  --scene-vault-rule: #3c5052;
  --scene-vault-resp: #96b2a7;
  --scene-denied: #df9a79;
  --scene-denied-fg: #efb699;

  /* session-plan bars */
  --scene-bar-track: #dfdec4;
  --scene-bar-lane: #bcd4c3;

  position: relative; min-width: 0; min-height: 280px; border-radius: var(--r-8); font-family: var(--sans);
}
.visual-scene * { box-sizing: border-box; }
.visual-scene svg { display: block; width: 100%; height: 100%; }
.scene-kicker { font: var(--t-scene-label) var(--mono); letter-spacing: .12em; color: var(--ink-3); }
.visual-scene [data-phase], .visual-scene path, .visual-scene circle { transition: opacity .6s, stroke .6s, fill .6s; }

/* A wiring diagram, laid out across the wide integration band. */
.scene-flow { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding: var(--s-22); background: var(--paper); }
.flow-source, .flow-destination { display: grid; gap: var(--s-12); }
.flow-source > span, .flow-destination > span { font: var(--t-micro) var(--mono); letter-spacing: .1em; color: var(--ink-3); }
.flow-source > div, .flow-destination > div { display: flex; gap: var(--s-10); align-items: center; border-bottom: 1px solid var(--rule); padding: var(--s-12) 0; font-size: 18px; color: var(--pitch); }
.flow-source b, .flow-destination b { color: var(--ink); font-size: var(--t-sm); font-weight: 500; }
.flow-wiring { position: relative; height: 230px; }
.flow-wiring path { fill: none; stroke: var(--pitch); stroke-width: 2; stroke-dasharray: 7 6; opacity: .25; }
.flow-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 68px; height: 68px; display: grid; place-content: center; text-align: center; background: var(--pitch); color: var(--paper); border-radius: 50%; font: 30px var(--serif); box-shadow: 0 0 0 var(--s-10) var(--paper); }
.flow-core span { font: var(--t-scene-label) var(--mono); }
.scene-flow[data-phase="1"] path, .scene-flow[data-phase="2"] path { opacity: 1; stroke-dashoffset: -40; transition: stroke-dashoffset 1s, opacity .5s; }
.flow-destination { opacity: .4; transition: opacity .5s; }
.scene-flow[data-phase="2"] .flow-destination { opacity: 1; }

/* A concept constellation resolves into a cited answer. */
.scene-search { background: radial-gradient(var(--rule) 1px, transparent 1px); background-color: var(--paper); background-size: 16px 16px; overflow: hidden; }
.search-map { position: relative; height: 255px; transition: height .6s; }
.search-map svg { fill: var(--paper); stroke: var(--pitch); stroke-width: 1.4; }
.search-map text { stroke: none; fill: var(--pitch); font: var(--t-sm) var(--mono); }
.search-orbit { stroke-dasharray: 3 7; opacity: .4; }
.search-node { position: absolute; background: var(--paper); padding: var(--s-6) var(--s-8); border: 1px solid var(--rule); border-radius: var(--r-4); font: var(--t-micro) var(--mono); transition: border-color .5s, transform .5s; }
.sn-one { top: 12%; left: 1%; } .sn-two { top: 9%; right: 0; } .sn-three { bottom: 10%; right: 0; } .sn-four { bottom: 10%; left: 1%; }
.search-answer { position: relative; margin: 0 var(--s-8) var(--s-8); padding: var(--s-14); background: var(--paper); border: 1px solid var(--pitch); border-radius: var(--r-6); opacity: .25; transform: translateY(8px); transition: opacity .5s, transform .5s; }
.search-answer p { font: var(--t-md)/1.5 var(--serif); margin: var(--s-6) 0 var(--s-12); }
.search-answer sup { color: var(--pitch); padding-left: 3px; }
.source-tags { display: flex; gap: var(--s-6); flex-wrap: wrap; font: var(--t-scene-label) var(--mono); color: var(--pitch); }
.source-tags span { background: var(--pitch-soft); padding: var(--s-4) var(--s-6); border-radius: var(--r-2); }
.scene-search[data-phase="1"] .search-node, .scene-search[data-phase="2"] .search-node { border-color: var(--pitch); transform: translateY(-3px); }
.scene-search[data-phase="2"] .search-answer { opacity: 1; transform: none; }

/* Tactile, illustrated recommendation posters — a stack, not a ranked list. */
.scene-recommend { background: var(--pitch-deep); padding: var(--s-18); overflow: hidden; min-height: 320px; }
.recommend-label { display: flex; justify-content: space-between; color: var(--scene-label-on-deep); font: var(--t-scene-label) var(--mono); letter-spacing: .06em; }
.recommend-stack { position: relative; height: 250px; margin: var(--s-18) var(--s-22) 0; }
.recommend-card { position: absolute; inset: 0 0 auto; border-radius: var(--r-6); background: var(--scene-poster); padding: var(--s-8); height: 224px; transform-origin: 50% 95%; transform: translateY(calc(var(--rank) * 7px)) rotate(var(--tilt)) scale(calc(1 - var(--rank) * .045)); transition: transform .75s cubic-bezier(.22,1,.36,1); box-shadow: 0 8px 18px rgba(7,27,35,0.25); }
.recommend-art { height: 133px; border-radius: var(--r-2); position: relative; background: var(--scene-poster-art); overflow: hidden; }
.recommend-art svg { fill: none; stroke: var(--scene-poster-line); stroke-width: 1; }
.recommend-art .play-route { stroke: var(--clay); stroke-width: 3; stroke-dasharray: 5 4; }
.recommend-art .play-player { fill: var(--pitch); stroke: var(--paper); stroke-width: 2; }
.recommend-art > span { position: absolute; bottom: var(--s-8); right: var(--s-10); font-size: 22px; color: var(--pitch-deep); }
.recommend-art.art-1 { background: var(--scene-poster-art-warm); } .recommend-art.art-2 { background: var(--scene-poster-art-cool); }
.recommend-card small { display: block; font: var(--t-scene-label) var(--mono); color: var(--scene-poster-ink); margin-top: var(--s-8); }
.recommend-card h4 { font: var(--t-lg) var(--serif); color: var(--ink); margin: var(--s-4) 0; }
.recommend-card p { font-size: var(--t-scene-label); margin: 0; color: var(--scene-poster-ink); }

/* A time budget and schedule that actually changes proportions. */
.scene-plan { display: grid; grid-template-columns: 95px minmax(0,1fr); gap: var(--s-16); padding: var(--s-20) var(--s-14); border: 1px solid var(--rule); background: var(--paper); align-items: center; }
.session-clock { border-right: 1px solid var(--rule); padding-right: var(--s-12); }
.session-clock b { font: 66px/.95 var(--serif); color: var(--pitch); display: block; margin-top: var(--s-10); font-variant-numeric: tabular-nums; }
.session-clock div > span { font: var(--t-meta) var(--mono); }
.session-clock small { display: block; font-size: var(--t-meta); line-height: 1.5; color: var(--ink-3); margin-top: var(--s-18); }
.schedule-scale { display: flex; justify-content: space-between; font: var(--t-scene-label) var(--mono); color: var(--ink-3); margin-bottom: var(--s-16); }
.schedule-lane { margin-bottom: var(--s-16); }
.schedule-lane > span { font: var(--t-micro) var(--mono); display: block; margin-bottom: var(--s-6); }
.schedule-bar { max-width: 100%; padding: var(--s-8) var(--s-4); background: var(--scene-bar-track); border-radius: var(--r-2); transition: width .7s cubic-bezier(.22,1,.36,1); }
.lane-1 .schedule-bar { background: var(--scene-bar-lane); } .lane-2 .schedule-bar { background: var(--pitch); color: var(--paper); }
.schedule-bar b { font: var(--t-meta) var(--mono); display: block; } .schedule-lane > small { font-size: var(--t-scene-label); line-height: 1.3; display: block; margin-top: var(--s-4); }
.schedule-note { font: var(--t-scene-label)/1.5 var(--mono); color: var(--ink-3); }

/* A tilted source document beside an analytical dashboard. */
.scene-match { min-height: 315px; padding: var(--s-16) var(--s-8) var(--s-28); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); align-items: center; background: var(--scene-report-ground); overflow: hidden; }
.report-sheet { padding: var(--s-16) var(--s-10); background: var(--paper); transform: rotate(-5deg); box-shadow: 0 8px 15px rgba(97,82,64,0.09); border: 1px solid var(--scene-report-rule); transition: transform .6s; }
.report-sheet strong { display: block; font: 17px var(--serif); margin: var(--s-10) 0 var(--s-16); }
.report-table { display: grid; grid-template-columns: repeat(4,1fr); font: var(--t-scene-label) var(--mono); color: var(--scene-report-ink); }
.report-table span { padding: var(--s-6) 0; text-align: center; border: 1px solid var(--scene-report-cell); overflow: hidden; }
.report-table span:nth-child(7n) { background: var(--scene-report-cell-hi); }
.report-stamp { display: block; border-top: 1px solid var(--rule); margin-top: var(--s-18); padding-top: var(--s-10); font: var(--t-scene-label) var(--mono); color: var(--scene-report-ink); }
.report-insights { opacity: .4; transform: translateX(8px); transition: opacity .6s, transform .6s; }
.report-donut { width: 102px; height: 102px; margin: auto; border-radius: 50%; background: conic-gradient(var(--pitch) 0 62%, var(--clay) 62% 83%, var(--scene-report-mute) 83%); display: grid; place-items: center; transform: rotate(-90deg); transition: transform .8s; }
.report-donut span { display: grid; place-items: center; background: var(--scene-report-ground); border-radius: 50%; width: 74px; height: 74px; text-align: center; font: var(--t-meta)/1.3 var(--serif); }
.report-bars { margin: var(--s-14) 0; }
.report-bars div { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: var(--s-4); margin: var(--s-8) 0; }
.report-bars span { font-size: var(--t-scene-label); color: var(--scene-report-ink); } .report-bars i { height: 6px; width: 10%; background: var(--pitch); border-radius: var(--r-2); transition: width .7s; }
.report-takeaway { font-size: var(--t-meta); line-height: 1.5; color: var(--pitch); opacity: .3; transition: opacity .5s; }
.report-disclosure { position: absolute; bottom: var(--s-8); left: 0; width: 100%; text-align: center; font-size: var(--t-scene-label); color: var(--scene-report-ink); }
.scene-match[data-phase="1"] .report-insights, .scene-match[data-phase="2"] .report-insights { opacity: 1; transform: none; }
.scene-match[data-phase="1"] .report-bars i, .scene-match[data-phase="2"] .report-bars i { width: var(--bar); }
.scene-match[data-phase="1"] .report-donut, .scene-match[data-phase="2"] .report-donut { transform: rotate(0); }
.scene-match[data-phase="2"] .report-takeaway { opacity: 1; }

/* Conversation bubbles with a pinned memory rail. */
/* This scene is the only one that drew no ground of its own, so it showed
   whatever card it sat in. With the subtree pinned light that meant light
   ink on the dark --bone card behind it — five elements at 1.08-2.92:1.
   A pinned scene has to carry its own ground. */
.scene-chat { padding: var(--s-16) var(--s-4); background: var(--paper); }
.chat-thread { display: flex; flex-direction: column; gap: var(--s-12); }
.scene-bubble { padding: var(--s-12) var(--s-16); max-width: 86%; font-size: var(--t-sm); line-height: 1.5; border-radius: var(--r-14); transition: transform .5s, opacity .5s; }
.bubble-user { align-self: flex-end; background: var(--vellum); border-bottom-right-radius: var(--r-2); }
.bubble-coach { align-self: flex-start; background: var(--pitch); color: var(--paper); border-bottom-left-radius: var(--r-2); }
.bubble-followup, .bubble-final { opacity: .15; transform: translateY(8px); }
.scene-chat[data-phase="1"] .bubble-followup, .scene-chat[data-phase="2"] .bubble-followup, .scene-chat[data-phase="2"] .bubble-final { opacity: 1; transform: none; }
.memory-strip { border-top: 1px dashed var(--rule-strong); display: flex; gap: var(--s-6); align-items: center; flex-wrap: wrap; margin-top: var(--s-20); padding-top: var(--s-14); }
.memory-strip > span { width: 100%; font: var(--t-scene-label) var(--mono); color: var(--ink-3); margin-bottom: var(--s-4); }
.memory-strip b { font: var(--t-micro) var(--mono); border: 1px solid var(--pitch); color: var(--pitch); padding: var(--s-4) var(--s-6); border-radius: var(--r-pill); }
.memory-equipment { opacity: .2; transition: opacity .5s; } .scene-chat[data-phase="2"] .memory-equipment { opacity: 1; }

/* A squad on a pitch, with staff and assigned artifacts. */
.scene-squads { background: var(--pitch-deep); padding: var(--s-14); color: var(--scene-squad-fg); }
.squad-board-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-6); margin-bottom: var(--s-14); }
.squad-board-head b { font: var(--t-lg) var(--serif); } .squad-board-head > span { font: var(--t-scene-label) var(--mono); color: var(--scene-squad-mute); }
.squad-pitch { height: 200px; border: 1px solid var(--scene-pitch-line); border-radius: var(--r-2); position: relative; background: repeating-linear-gradient(0deg,transparent 0 40px,rgba(255,255,255,0.016) 40px 80px); }
.pitch-half { position: absolute; top: 50%; width: 100%; border-top: 1px solid var(--scene-pitch-line); }
.pitch-circle { position: absolute; width: 70px; height: 70px; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; border: 1px solid var(--scene-pitch-line); }
.squad-player { position: absolute; width: 21px; height: 21px; display: grid; place-items: center; transform: translate(-50%,-50%); border-radius: 50%; background: var(--scene-squad-chip); color: var(--pitch); box-shadow: 0 2px 4px rgba(0,26,27,0.27); font: var(--t-scene-label) var(--mono); transition: left .8s cubic-bezier(.22,1,.36,1), top .8s cubic-bezier(.22,1,.36,1); }
.squad-staff { display: flex; align-items: center; margin-top: var(--s-12); }
.squad-staff > span { display: grid; place-items: center; width: 27px; height: 27px; margin-right: -4px; background: var(--scene-squad-staff); border: 2px solid var(--pitch-deep); border-radius: 50%; font: var(--t-scene-label) var(--mono); }
.squad-staff small { margin-left: var(--s-14); font-size: var(--t-micro); }
.squad-attachments { display: flex; gap: var(--s-8); margin-top: var(--s-14); opacity: .2; transform: translateY(5px); transition: opacity .5s, transform .5s; }
.squad-attachments span { border: 1px solid var(--scene-squad-attach); border-radius: var(--r-2); padding: var(--s-6); font-size: var(--t-micro); }
.scene-squads[data-phase="2"] .squad-attachments { opacity: 1; transform: none; }

/* Tenant vaults: visibly separate, with a denied route. */
.scene-trust { background: var(--scene-vault-ground); color: var(--scene-vault-fg); padding: var(--s-20) var(--s-14); }
.trust-request { display: flex; align-items: center; gap: var(--s-10); font-size: 22px; color: var(--scene-vault-accent); margin-bottom: var(--s-24); }
body.editorial .pf .trust-request code, body.editorial .pf .trust-response code { background: none; padding: 0; color: inherit; font-size: var(--t-micro); }
.trust-request b { margin-left: auto; transition: transform .6s; } .scene-trust[data-phase="2"] .trust-request b { transform: translateX(-18px); }
.trust-vaults { display: grid; grid-template-columns: 1fr 28px 1fr; }
.trust-vault { text-align: center; padding: var(--s-16) var(--s-6); border: 1px solid var(--scene-vault-edge); border-radius: var(--r-6); background: var(--scene-vault-fill); }
.vault-other { border-color: var(--scene-vault-other-edge); background: var(--scene-vault-other); }
.vault-icon { display: grid; place-items: center; margin: 0 auto var(--s-12); width: 36px; height: 36px; border: 1px solid currentColor; border-radius: 50%; font-size: 22px; color: var(--scene-vault-icon); }
.trust-vault b { display: block; font-size: var(--t-meta); } .trust-vault small { display: block; font: var(--t-scene-label) var(--mono); margin-top: var(--s-8); }
.vault-files { font-size: 24px; color: var(--scene-vault-files); margin-top: var(--s-16); }
.trust-boundary { display: grid; place-items: center; background: linear-gradient(90deg,transparent 48%,var(--scene-vault-divider) 49% 51%,transparent 52%); }
.trust-boundary span { writing-mode: vertical-rl; font: var(--t-scene-label) var(--mono); letter-spacing: 2px; padding: var(--s-8) var(--s-6); background: var(--scene-vault-ground); }
.trust-response { margin-top: var(--s-20); border-top: 1px solid var(--scene-vault-rule); padding-top: var(--s-14); color: var(--scene-vault-resp); }
.scene-trust[data-phase="2"] .vault-other { border-color: var(--scene-denied); } .scene-trust[data-phase="2"] .vault-other .vault-icon, .scene-trust[data-phase="2"] .trust-response { color: var(--scene-denied-fg); }

@media(max-width:600px) {
  .scene-flow { grid-template-columns: 1fr; gap: var(--s-10); padding: var(--s-16); }
  .flow-wiring { height: 140px; } .flow-wiring svg { transform: rotate(90deg); width: 140px; margin: auto; }
  .flow-source, .flow-destination { grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s-8); }
  .flow-source > span, .flow-destination > span { grid-column: 1/-1; }
  .flow-source > div, .flow-destination > div { flex-direction: column; align-items: flex-start; }
  .flow-source b, .flow-destination b { font-size: var(--t-micro); }
  .scene-plan { gap: var(--s-10); grid-template-columns: 75px minmax(0,1fr); padding: var(--s-14) var(--s-10); }
  .session-clock b { font-size: 54px; }
  .recommend-stack { margin-inline: var(--s-12); }
}
@media(prefers-reduced-motion:reduce) { .visual-scene *, .visual-scene *::before, .visual-scene *::after { transition: none !important; animation: none !important; } }