/* loops/see-films/style.css: the See stage in the identity skin (15 Oct 2026, "old identity, new content"; source of truth identity-comp/index.html, section.see, and its NOTES.md).
   Three competitor films (I, J, K) drawn straight on the ink: framed stills with the hard ink plate, light text, thin lines, K's beat bar cut at its real seconds, and under it K's hook in
   Telugu with the English beside it. NO box: no card, sheet or screen behind the film. The markup and this CSS are the POSTER (the round's last frame, builder contract v3); frame 0 is painted
   by the director. Every selector starts with .kl-see-films. Fonts: Anybody (display caps wght 700 wdth 72; body wght 500/600 wdth 87.5) and Noto Sans Telugu 600, both from the identity kit
   (/site-src/css/kit.css), which also owns every token used here (--ink, --light, --white, --teal, --red, --pink, --purple, --paper-75, --hair-d, --hair-d2, --shadow-ink, --r-1/2/3).
   The motion kit's stage says line-height 1.5 and img max-width 100%; every text rule below names its own line-height and every picture its own size, so the stage draws as the comp does.
   The count (1,221), the films' header line (Example, with Replay), the band's line and the two quiet lines are the band's furniture (home-src/css/see.css), not the stage's. Text floors 14 px phone, 15 px desktop. Breakpoints 768 and 1180. */

.kl-see-films {
  /* 14 px of the stage's own paint room on every side (the stage clips to its box): the check badge and the hard plates sit inside it; margin takes it back */
  --sf-pad: 14px;
  margin: calc(-1 * var(--sf-pad)); padding: var(--sf-pad); width: auto; min-width: 0; min-height: 0; aspect-ratio: auto;
  color: var(--light);
  font-family: var(--display); font-weight: 500; font-variation-settings: "wdth" 87.5;
  --kl-ring: var(--yellow);
}
.kl-see-films p { margin: 0; }
/* the text waits for its faces on first paint: a script after the stage sets data-wait and clears it when Anybody and Noto Sans Telugu are loaded (at most 2.5 s) */
.kl-see-films[data-wait] .kl-camera { visibility: hidden; }
.kl-see-films .kl-camera { position: relative; inset: auto; line-height: normal; }

/* The films' one header line (the example note with Replay at its end) sits just above this stage, outside its figure, as the film contract wants the control: it is the band's (home-src/css/see.css, sx-ftop). */

/* ── the table: letter, four stills, length; the strip under each ── */
.kl-see-films .sf-sheet { position: relative; }
.kl-see-films .sf-tr { display: grid; grid-template-columns: 34px minmax(0, 1fr) 46px; column-gap: 10px; align-items: center; padding: 10px 0; }
.kl-see-films .sf-tr.sf-th { display: none; }                  /* the column header row is a desktop thing */
.kl-see-films .sf-r { justify-self: end; text-align: right; }
.kl-see-films .sf-len { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
/* the masked competitor letter: a hairline box; K's lights teal (films.tint, the first act) */
.kl-see-films .sf-who {
  position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--r-2); box-shadow: inset 0 0 0 1.5px var(--hair-d2);
  font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 72; text-transform: uppercase; letter-spacing: .01em; font-size: 20px; line-height: 1; color: var(--light);
}
.kl-see-films .sf-tint {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r-2);
  background: var(--teal); color: var(--ink); box-shadow: var(--shadow-ink); font-style: normal;
}
.kl-see-films .sf-tint::after, .kl-see-films .sf-plate::after { content: attr(data-t); }   /* the lit copy of the letter and of the length is drawn text, so the markup holds each once */
.kl-see-films .sf-imgs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; min-width: 0; }
.kl-see-films .sf-imgs img {
  display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 1; object-fit: cover;
  border: 3px solid var(--white); border-radius: var(--r-2); box-shadow: var(--shadow-ink); background: #2a4446;
}
.kl-see-films .sf-rw { border-bottom: 1px solid var(--hair-d); }
.kl-see-films .sf-lit { border-bottom: 0; }
/* I and J: the split of each film, neutral (no roles stored for them) */
.kl-see-films .sf-nbar { display: flex; gap: 3px; height: 8px; margin: 2px 0 14px; }
.kl-see-films .sf-nbar i { display: block; flex: var(--s) 1 0; min-width: 0; border-radius: 2px; background: rgba(246, 246, 246, .2); }
.kl-see-films .sf-nbar i:nth-child(even) { background: rgba(246, 246, 246, .36); }

/* K's length: light on the ink at frame 0; its teal plate (films.plate, with its own copy of the figure in ink) covers it from 4.05 s, then the tick */
.kl-see-films .sf-chip { position: relative; display: inline-block; padding: 4px 8px 3px; border-radius: var(--r-2); color: var(--light); }
.kl-see-films .sf-plate {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; padding: 4px 8px 3px; border-radius: var(--r-2);
  background: var(--teal); color: var(--ink); box-shadow: var(--shadow-ink); font-style: normal;
}
.kl-see-films .sf-plate svg { position: absolute; right: -9px; top: -10px; width: 19px; height: 19px; overflow: visible; }
.kl-see-films .sf-plate circle { fill: var(--light); }
.kl-see-films .sf-plate path { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000 1000; stroke-dashoffset: 0; }   /* pathLength 1000: the tick is drawn by dash offset, finished at rest */

/* K's beats: the names over the bar; the bar is the empty neutral strip at frame 0 and each beat takes its colour (films.tone) with its name (films.names) */
.kl-see-films .sf-names { display: flex; margin: 4px 0 7px; font-weight: 600; font-size: 14px; line-height: 17px; color: var(--light); }
.kl-see-films .sf-names > span { display: block; flex: var(--s) 1 0; min-width: 0; padding-left: 1px; }
.kl-see-films .sf-bar { position: relative; display: flex; gap: 3px; height: 14px; }
.kl-see-films .sf-seg { position: relative; display: block; flex: var(--s) 1 0; min-width: 0; height: 14px; border-radius: 3px; background: rgba(246, 246, 246, .2); }
.kl-see-films .sf-seg:nth-child(even) { background: rgba(246, 246, 246, .36); }
.kl-see-films .sf-seg.sf-s1 { box-shadow: 0 0 0 2px var(--light), var(--shadow-ink); will-change: transform; }
/* the Hook: ringed in light with the hard plate under it, the comp's own ring (.kbar .k1). The segment sits on a half pixel at 1440 (the stills are 134.5 px), so its ring's edge pixels
   took a different antialias once a round had run (an outline: 1 px, 6/255; this spread ring: 5 px, 32/255). On its own layer, at every moment, it rasters the same way: the no-JS poster, frame 0,
   a backward seek and the played rest are identical. Nothing tweens it; the layer only fixes how it is drawn. */
.kl-see-films .sf-tone { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; border-radius: inherit; background: var(--tone); }
.kl-see-films .sf-tone[data-tone="hook"] { --tone: var(--red); }
.kl-see-films .sf-tone[data-tone="reveal"] { --tone: var(--pink); }
.kl-see-films .sf-tone[data-tone="demo"] { --tone: var(--purple); }
.kl-see-films .sf-tone[data-tone="ask"] { --tone: var(--white); }
/* the film's playhead: a thin light rule with an ink keyline over the bar, the film's first three seconds at 1x (3 of K's 27.4); not there at rest */
.kl-see-films .sf-ph {
  position: absolute; z-index: 4; left: 0; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; display: block;
  border-radius: 2px; background: var(--light); box-shadow: 0 0 0 1.5px var(--ink); opacity: 0; pointer-events: none;
}
.kl-see-films .sf-ph.sf-live { will-change: transform, opacity; }

/* Muffin Intel's brackets (the hero's: 2.5 px teal over a 4.5 px solid ink keyline; arms 19 px, 13 on a phone). Four corners, last children of the sheet; each is placed by the builder with x and y alone
   (it measures the target's border box and adds 6 px clear on all four sides). Away at rest and in reduced motion: they only ever appear during the round. */
.kl-see-films .sf-br { position: absolute; left: 0; top: 0; z-index: 6; display: block; width: 13px; height: 13px; opacity: 0; pointer-events: none; }
.kl-see-films .sf-br svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kl-see-films .sf-br path { fill: none; stroke-linecap: butt; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.kl-see-films .sf-brk { stroke: var(--ink); stroke-width: 4.5; }
.kl-see-films .sf-brt { stroke: var(--teal); stroke-width: 2.5; }

/* K's hook, written on the ink: the speaker tag with its pointer under the Hook, the Telugu over the English on a phone and side by side from 1180 */
.kl-see-films .sf-hook { position: relative; margin-top: 22px; }
.kl-see-films .sf-htag {
  position: relative; display: inline-block; padding: 4px 9px; border-radius: var(--r-1);
  background: var(--teal); color: var(--ink); box-shadow: var(--shadow-ink); font-weight: 700; font-size: 14px; line-height: 18px;
}
.kl-see-films .sf-htag::before { content: ""; position: absolute; left: 18px; top: -6px; width: 10px; height: 10px; background: var(--teal); transform: rotate(45deg); border-radius: 1px; }
.kl-see-films .sf-hcols { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 10px; margin-top: 14px; }
.kl-see-films .sf-te { font-family: var(--tel); font-weight: 600; font-size: 19px; line-height: 29px; color: var(--light); font-variation-settings: normal; }
.kl-see-films .sf-en { font-weight: 600; font-size: 16px; line-height: 23px; letter-spacing: .015em; color: var(--paper-75); }
/* the builder's paper slices (films.gmid, films.gbot) stay in the markup so the timeline keeps its roles; the identity skin draws no paper behind the hook, so they paint nothing */
.kl-see-films .sf-hook .gr-s { display: none !important; }

/* ── tablet (768 to 1179): the phone's stack, held to a sane width ── */
@media (min-width: 768px) {
  .kl-see-films { max-width: calc(540px + 2 * var(--sf-pad)); }          /* the table is held to 540 px between the phone and the desktop */
  .kl-see-films .sf-imgs { grid-template-columns: repeat(4, 96px); }
}

/* ── desktop (1180 up): the films' table, 780 wide beside the count ── */
@media (min-width: 1180px) {
  .kl-see-films { max-width: none; }
  .kl-see-films .sf-sheet { margin-top: 10px; }
  .kl-see-films .sf-tr { grid-template-columns: 104px minmax(0, 1fr) 96px; column-gap: 0; padding: 12px 0; }
  .kl-see-films .sf-tr.sf-th {
    display: grid; padding: 0 0 11px; border-bottom: 1.5px solid var(--hair-d2);
    font-weight: 600; font-size: 15px; line-height: 18px; letter-spacing: .06em; text-transform: uppercase; color: var(--paper-75);
  }
  .kl-see-films .sf-len { font-size: 22px; }
  .kl-see-films .sf-who { width: 40px; height: 40px; font-size: 23px; }
  .kl-see-films .sf-imgs { display: flex; gap: 14px; }
  .kl-see-films .sf-imgs img { flex: 1 1 0; min-width: 0; max-width: 150px; width: auto; }
  .kl-see-films .sf-nbar { height: 9px; margin: 4px 96px 18px 104px; }
  .kl-see-films .sf-chip { padding: 5px 11px 4px; }
  .kl-see-films .sf-plate { padding: 5px 11px 4px; }
  .kl-see-films .sf-names { margin: 8px 96px 9px 104px; font-size: 16px; line-height: 20px; }
  .kl-see-films .sf-names > span { padding-right: 6px; }
  .kl-see-films .sf-bar { height: 16px; margin: 0 96px 0 104px; }
  .kl-see-films .sf-seg { height: 16px; }
  .kl-see-films .sf-br { width: 19px; height: 19px; }
  .kl-see-films .sf-hook { margin: 26px 0 0 104px; }
  .kl-see-films .sf-htag { font-size: 15px; padding: 5px 11px; }
  .kl-see-films .sf-hcols { grid-template-columns: 1fr 1fr; column-gap: 40px; margin-top: 18px; }
  .kl-see-films .sf-te { font-size: 23px; line-height: 35px; }
  .kl-see-films .sf-en { font-size: 20px; line-height: 30px; }
}

/* 320 to 359 px: Product reveal wraps and its first word fills its segment, so the next name starts a little later; the length column gets a wider gap to the fourth still */
@media (max-width: 359px) {
  .kl-see-films .sf-names > span:nth-child(n+3) { padding-left: 12px; }
  .kl-see-films .sf-tr { column-gap: 12px; }
}
/* the speaker tag is one line at 14 px (about 215 px): under 350 px it may wrap inside the stage instead of leaving it */
@media (max-width: 349px) {
  .kl-see-films .sf-htag { max-width: 100%; }
}