/* ---------- Chapter 4 · Words look at each other ---------- */
/* Two layouts, chosen by the script from the stage size (data-mode):
   stack = sentence on top with arcs above the words, grid panel below (projector / desktop);
   side  = words as a list with arcs to their right, grid panel beside it (landscape and portrait phones). */
.s4 { position: absolute; inset: 0; display: grid; overflow: hidden; --g: 0; }
.s4[data-mode="stack"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) calc(var(--g) * 50%); row-gap: calc(var(--g) * var(--space-4)); }
.s4[data-mode="side"] { grid-template-columns: minmax(0, 1fr) calc(var(--g) * 46%); grid-template-rows: minmax(0, 1fr); }

.s4-sent { position: relative; min-width: 0; min-height: 0; display: grid; }
.s4[data-mode="stack"] .s4-sent { grid-template-rows: auto minmax(60px, 38%) auto; align-content: center; }
.s4[data-mode="side"] .s4-sent { grid-template-rows: auto minmax(0, 1fr); }

.s4-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-3); min-height: calc(var(--scene-meta) * 1.4); font: 650 var(--scene-label)/1.25 var(--f-sans); }
.s4[data-mode="side"] .s4-head { min-height: calc(var(--scene-meta) * 2.8); font-size: var(--scene-meta); align-content: start; }
.s4-lens { color: var(--text); }
.s4-from { color: var(--text-muted); font-weight: 500; }
.s4-ill { font: 650 var(--scene-meta)/1.25 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.s4[data-mode="stack"] .s4-ill { margin-left: auto; }
/* Heading text changes: the parts fade out, the text swaps, then they fade back in (scene-attention.js). */
.s4-head > span { transition: opacity 160ms var(--ease-out); }
.s4-head.is-swap > span { opacity: 0 !important; }

.s4-band { min-height: 0; }
.s4[data-mode="side"] .s4-band { display: none; }

/* Words */
.s4-words { display: flex; justify-content: space-between; align-items: flex-start; gap: clamp(4px, .8cqw, 12px); min-width: 0; }
.s4-col { display: grid; justify-items: center; align-content: start; row-gap: var(--space-2); min-width: 0; }
.s4-word { position: relative; isolation: isolate; padding: .14em .3em; border-radius: .32em; white-space: nowrap;
  font: 500 var(--scene-figure)/1.15 var(--f-serif); letter-spacing: -.005em;
  color: color-mix(in srgb, var(--surface) calc(var(--chip, 0) * 100%), var(--text)); }
.s4-word::before, .s4-word::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; }
.s4-word::before { background: var(--model); opacity: var(--chip, 0); }
.s4-word::after { background: var(--model-mid); opacity: calc(var(--tint, 0) * .55); z-index: -2; }
.s4-wi { display: inline-block; }

/* Weight under (or beside) each word */
.s4-wt { display: grid; justify-items: center; row-gap: 4px; width: 100%; min-width: 44px; }
.s4-num { font: 650 var(--scene-meta)/1.2 var(--f-sans); font-variant-numeric: tabular-nums; color: var(--text); }
.s4[data-mode="stack"] .s4-num { font-size: var(--scene-label); }
.s4-bar { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--surface-sunk); overflow: hidden; }
.s4-bar i { display: block; height: 100%; background: var(--model); transform-origin: left; transform: scaleX(0); border-radius: 3px; }

/* Position badge */
.s4-pos { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--you-soft); color: var(--you-strong);
  font: 650 var(--scene-meta)/1 var(--f-sans); font-variant-numeric: tabular-nums; opacity: 0; }

/* Side layout: a list, arcs run along the right edge */
.s4[data-mode="side"] .s4-words { display: grid; grid-template-rows: repeat(8, minmax(30px, 1fr)); align-items: stretch; gap: 0; padding-right: clamp(40px, 22%, 110px); }
.s4[data-mode="side"] .s4-col { grid-template-columns: calc((1 - var(--g)) * 28px) 44px minmax(0, 1fr); grid-template-areas: "pos wt word"; align-items: center; justify-items: stretch; column-gap: calc(var(--space-2) / 2); row-gap: 0; }
.s4[data-mode="side"] .s4-word { grid-area: word; justify-self: end; font: 500 var(--scene-body)/1.15 var(--f-serif); }
.s4[data-mode="side"] .s4-wt { grid-area: wt; width: auto; min-width: 0; justify-items: end; row-gap: 2px; }
.s4[data-mode="side"] .s4-bar { height: 4px; }
.s4[data-mode="side"] .s4-pos { grid-area: pos; width: 26px; height: 26px; }

/* Arcs */
.s4-arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.s4-arcs path { fill: none; stroke: var(--model); stroke-linecap: round; }

/* Grid panel */
.s4-gridp { min-width: 0; min-height: 0; overflow: hidden; display: grid; }
.s4[data-mode="stack"] .s4-gridp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: var(--space-5); }
.s4[data-mode="side"] .s4-gridp { grid-template-rows: minmax(0, 1fr) auto; padding-left: var(--space-3); row-gap: var(--space-2); }
.s4-cv { position: relative; min-width: 0; min-height: 0; height: 100%; }
.s4-cv canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.s4-meter { display: grid; gap: 2px; align-content: center; min-width: 0; }
.s4-eq { font: 500 var(--scene-label)/1.25 var(--f-sans); color: var(--text-muted); }
.s4-fig { font: 560 var(--scene-figure)/1.05 var(--f-serif); font-variant-numeric: tabular-nums; color: var(--you-strong); white-space: nowrap; }
.s4-cap { font: 650 var(--scene-label)/1.25 var(--f-sans); color: var(--text); }
.s4-rel { font: 500 var(--scene-meta)/1.3 var(--f-sans); color: var(--text-faint); }
.s4[data-mode="stack"] .s4-fig { font-size: calc(var(--scene-figure) * 1.8); }
.s4[data-mode="side"] .s4-cap { font-size: var(--scene-meta); }
.s4[data-mode="side"] .s4-eq { font-size: var(--scene-meta); }

/* Card controls (Try it) */
[data-attention] .s4-group { display: grid; gap: var(--space-2); }
[data-attention] .s4-group + .s4-group { margin-top: var(--space-3); }
[data-attention] .s4-label { font: 650 var(--type-label)/1.2 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
[data-attention] .s4-row { display: flex; flex-wrap: wrap; gap: 6px; }
[data-attention] .btn[aria-pressed="true"] { background: var(--text); color: var(--surface); }
[data-attention] .s4-sliderline { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
[data-attention] .s4-sliderline output { font: 650 .95rem/1.2 var(--f-sans); font-variant-numeric: tabular-nums; color: var(--you-strong); }
[data-attention] .s4-chip { min-width: var(--control-h); padding: 0 10px; font-size: .85rem; }
[data-attention] input[type="range"] { width: 100%; height: var(--control-h); margin: 0; accent-color: var(--you); cursor: pointer; }
[data-attention] .s4-note { min-height: 4.5em; }

/* Docked on the stage (try-it step): words, lenses and length on as few rows as possible. */
.beat.is-try.is-active [data-attention] .s4-group { grid-auto-flow: column; align-items: center; justify-content: start; }
.beat.is-try.is-active [data-attention] .s4-group + .s4-group { margin-top: 0; }
.beat.is-try.is-active [data-attention] .s4-group:last-of-type .s4-row,
.beat.is-try.is-active [data-attention] .s4-note { display: none; }
.beat.is-try.is-active [data-attention] input[type="range"] { width: min(360px, 40vw); }
body.notes-open .beat.is-active [data-attention] .s4-group { grid-auto-flow: row; }
body.notes-open .beat.is-active [data-attention] .s4-group:last-of-type .s4-row,
body.notes-open .beat.is-active [data-attention] .s4-note { display: flex; }