/* demo-film.css: styles for demo-film.js ("See it in action", the film piece in the hero's hand). Everything is scoped
   under .demo-film; the mount gets .demo-film-host so the piece can fill its view (#demo is a flex column one screen
   tall, daylight.css).

   Materials: the drawings are the hero's own (modern-set.js in drawing-set.css: ink = currentColor, multiplied onto the
   stone); the redlines are drawn inside those drawings' SVGs, so they take the drawing's lettering and halos; the only
   HTML piece is the act line (the page's type); act 3's answers are redlines too.
   Sizes inside the stage are design px: the stage is 1200 × 540 and is zoomed to its view (rem would scale twice). */

.demo-film-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.demo-film { flex: 1; min-height: 0; display: flex; flex-direction: column; color: var(--ink);
  --redline: #B86213;     /* the redline accent: the old landing demo's amber tracer (demo-scan.css --scan-accent-2 #FFA659) darkened to read on the stone; candidates #D97A1E · #B86213 · #9E5410 */
  --scan: #1DBCC1; }      /* the scan line: the old landing demo's teal tracer (demo-scan.css --scan-accent-1), the app's intelligence colour */
.demo-film, .demo-film *, .demo-film *::before, .demo-film *::after { box-sizing: border-box; }
.demo-film [hidden] { display: none !important; }
.demo-film :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ---- heading row: the section label and heading as every section has them; Replay and the content note on the right ---- */
.df-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.df-aside { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; max-width: 24rem; margin-bottom: .2rem; text-align: right; }
.df-replay, .df-pause { font: inherit; font-family: var(--font-ui); font-size: var(--t-small); font-weight: var(--w-link); color: var(--ink);
  background: none; border: 0; padding: .2rem 0; cursor: pointer; white-space: nowrap;
  text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; text-decoration-color: rgb(var(--ink-rgb) / .45); }
.df-replay:hover, .df-pause:hover { text-decoration-color: currentColor; }
.df-note { margin: 0; font-size: .78rem; line-height: 1.35; color: var(--ink-mid); }

/* ---- the stage: 1200 × 540 design px, zoomed to fit the view (demo-film.js fit()) ---- */
.df-stage-wrap { flex: 1; min-height: 0; margin-top: 1.3rem; display: grid; place-items: start center; }
.df-stage { position: relative; width: 1200px; height: 540px; font-family: var(--font-body); font-size: 14px; line-height: 1.4;
  font-weight: var(--w-body); color: var(--ink); }
.df-stage > * { position: absolute; margin: 0; }

/* the act line: number and verb phrase (the film's headline per act), its subject on the right */
.df-act { left: 0; right: 0; top: 0; display: flex; align-items: baseline; gap: 14px; }
.df-act-main { display: flex; align-items: baseline; gap: 12px; }
.df-act-n { font-family: var(--font-mono); font-size: 13px; color: var(--ink-mid); font-variant-numeric: tabular-nums; }
.df-act-title { font-family: var(--font-display); font-size: 24px; font-weight: var(--w-display); letter-spacing: var(--ls-sub); line-height: 1.1; }
.df-act-sub { margin-left: auto; font-size: 14px; color: var(--ink-mid); }

/* the drawings: each slot holds one ModernSet instance (its root is .drawing-set, width 100 %, the SVG multiplied onto
   the wall). The plan's SVG is scaled up to the centre for act 2 — a transform on the blended element itself keeps its
   blend (an ancestor's would isolate it and show the sheet). */
.df-dwg { pointer-events: none; color: color-mix(in srgb, var(--ink), #fff 12%); }   /* a lighter ink, as the hero's drawing is set; demo-film.js fades it by ink, never opacity */
.df-dwg .drawing-set { color: inherit; }
.df-dwg .drawing-set svg { transform-origin: 0 0; }
.df-redline { color: var(--ink); }                      /* the redlines in full ink */
.df-redline text { font-family: ui-monospace, "SF Mono", Menlo, monospace; }   /* as drawing-set.css letters the drawing, larger (page small-text scale) */

/* act 2: the scan line, a hairline of ink with a soft trail, the height of the sheet at the centre */
.df-scan { left: 0; top: 62px; width: 1.5px; height: 426px; background: var(--scan); }
.df-scan::before { content: ""; position: absolute; right: 1px; top: 0; bottom: 0; width: 56px;
  background: linear-gradient(to right, color-mix(in srgb, var(--scan) 0%, transparent), color-mix(in srgb, var(--scan) 22%, transparent)); }

/* ---- wide screens: the heading alone at the top; Replay and the content note at the bottom right, below the stage, in one
   small row (the note, then Replay at the corner) ---- */
@media (min-width: 821px) {
  .demo-film .df-head { display: contents; }
  .demo-film .df-aside { order: 3; flex-direction: row; align-self: flex-end; align-items: baseline; gap: 1.6rem; max-width: 40rem; margin: .9rem 0 0; }
  .demo-film .df-replay { order: 2; }
}

/* ---- phones: the camera and the band (demo-film.js) ----
   One screen: the heading, the act line, the window onto the stage (the camera moves the stage inside it), the band that
   carries the note of the finding in view, then Pause and Replay and the content note. The heading row opens up so its
   parts can take this order. The window takes whatever height the rest leaves (it shrinks before anything else). */
@media (max-width: 820px) {
  .demo-film.is-camera .df-head { display: contents; }
  .is-camera .df-act { order: 1; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: baseline; gap: .15rem .7rem; margin-top: 1.1rem;
    min-height: 4.75rem; }                                  /* the longest act title on two lines and its subject: the window never changes size mid-film */
  .is-camera .df-act-sub { margin-left: 0; flex-basis: 100%; }
  .is-camera .df-stage-wrap { order: 2; display: block; position: relative; overflow: hidden; margin-top: .8rem; }
  .is-camera .df-cam { position: absolute; left: 0; top: 0; }
  .is-camera .df-redline .df-nt { display: none; }         /* the notes' lettering, the strike and the answer's rows: set in the band instead; the balloon, its tick, the cloud and the B triangle stay */
  /* The band: a block of stone under the window, no box. The note's rows as the film sets them (the number in the balloon's
     redline, the title and figures in full ink, the body a shade lighter), in the redlines' mono at the page's small-text
     size; act 3's answer sits beside the struck note. Three rows tall whatever it holds (or nothing), so the screen never re-lays out. */
  .is-camera .df-band { order: 2; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 1.5rem; margin-top: .7rem; min-height: calc(3 * 1.45em);
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; line-height: 1.45; letter-spacing: .02em; color: var(--ink); font-variant-numeric: tabular-nums; }
  .is-camera .df-band-row { display: block; white-space: nowrap; }
  .is-camera .df-band-head { position: relative; display: inline-block; font-weight: 600; letter-spacing: .04em; }
  .is-camera .df-band-n { display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; margin: -.1em .45em 0 0; vertical-align: middle;
    border: 1.5px solid var(--redline); border-radius: 50%; color: var(--redline); font-size: .86em; letter-spacing: .02em; }   /* the balloon, as drawn in the window */
  .is-camera .df-band-n:empty { display: none; }
  .is-camera .df-band-body { color: var(--ink-mid); }
  .is-camera .df-band-figs { font-weight: 600; }
  .is-camera .df-band-strike { position: absolute; left: -3px; right: -3px; top: 50%; height: 1.5px; margin-top: -1px; background: var(--redline); transform: scaleX(0); transform-origin: 0 50%; }   /* act 3: the reviewer's stroke through the title, drawn left to right */
  .is-camera .df-band-revhead { color: var(--redline); font-weight: 600; letter-spacing: .05em; }
  .is-camera .df-band-action { font-weight: 600; }
  .is-camera .df-aside { order: 3; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: .3rem 1.4rem;
    max-width: none; margin: .8rem 0 0; text-align: left; }
  .is-camera .df-note { flex-basis: 100%; font-size: .85rem; }
  .is-camera :is(.df-pause, .df-replay) { display: inline-flex; align-items: center; min-height: 44px; }   /* a thumb's target (Apple: 44 pt) */
}