/* /ai-animatics (site/tools/pages/ai-animatics.mjs): the films first, text in short sections. Paper language of styles.css and
   css/pages.css: hairlines, mono labels, square chips, no rounded cards, no shadows. Scoped to main.ai. */
main.ai .tri{display:inline-block;width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
main.ai button.cta{cursor:pointer;border-radius:0;margin:0;-webkit-appearance:none;appearance:none}

/* ---- hero: compact, so the first film shows in the first view at 1440×900 */
main.ai .ai-hero{padding-top:64px;padding-bottom:48px}
main.ai .ai-hero h1{max-width:none}
.ai-hero-row{display:grid;grid-template-columns:minmax(0,1fr);gap:28px 64px;align-items:end}   /* the «Work directly with Nick» note is gone (the owner) */
.ai-hero-row .ctas{margin-top:28px}
.ai-note{margin:0;color:var(--fmid,#5C6272);border-top:var(--hair);padding-top:12px;line-height:1.7}

/* ---- examples: each film large (2/3), its facts beside it; the second one mirrored */
main.ai .ex-list{padding-top:0;border-top:0}
.ex-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:var(--hair);padding-top:14px;margin-bottom:24px}
.ex-head .label{margin:0}
.ex-head p{margin:0;color:var(--mid)}
.ex{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px 40px;align-items:end}
.ex+.ex{margin-top:72px}
.ex.flip{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.ex.flip .ex-media{order:2}
.ex-media{width:100%;background:var(--ink)}
.ex-media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:opacity .3s}
.ex-media:hover img{opacity:.9}
.media-play.ex-media .play-mark{left:20px;bottom:20px;display:inline-flex;align-items:center;gap:10px;padding:10px 16px}
.ex-n{display:flex;gap:14px;margin:0 0 12px;color:var(--mid)}
.ex-n span{color:var(--accent)}
.ex-text h3{margin:0 0 22px}
.ex-facts{margin:0;display:grid;gap:14px;border-top:var(--hair);padding-top:16px}
.ex-facts dt{color:var(--mid);margin:0 0 4px}
.ex-facts dd{margin:0;font-size:16px;line-height:1.45;color:var(--body-ink);max-width:44ch}
.ex-link{margin:22px 0 0}
/* the title opens the player in place, as the poster does (page.js); «Copy link» (css/pages.css) copies the share URL */

/* ---- a section with its head in a left rail (uses, scope, FAQ); its content runs to the right edge like the lists above it */
.rail{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px 48px;align-items:start}
.rail-head .sec-title{font-size:clamp(28px,3.2vw,44px)}
.rail .faq{max-width:none}
.uses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px}
.uses>div{border-top:1px solid var(--ink);padding-top:14px}
.uses h3{font-size:clamp(22px,2.1vw,30px);line-height:1.08;letter-spacing:-.02em;margin:18px 0 14px;font-weight:700}
.uses p{margin:0;font-size:var(--t-lead);line-height:1.4;color:var(--body-ink);max-width:40ch}

/* ---- from script to animatic (SPEC §8.7–§8.8; site/js/shots.js): three steps, then an editing-app layout in paper: the «program monitor»
   (the shot large, dark like the player) beside an inspector (big shot number, timecode, length, which frame it is), the cut strip with
   its ruler, the accent playhead and the skim cursor, the sheet of frames. Hairlines and mono labels, square chips, nothing rounded. */
.sb .sec-head{margin-bottom:40px}
.sb-steps{list-style:none;margin:0 0 48px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px}
.sb-steps li{position:relative;border-top:1px solid var(--ink);padding-top:14px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-content:start}
.sb-steps li:not(:last-child)::after{content:'→';position:absolute;right:0;top:12px;color:var(--mid);font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.sb-steps b{font-weight:600;font-size:17px;letter-spacing:-.01em}
.sb-steps p{grid-column:2;margin:4px 0 0;color:var(--body-ink);font-size:15px;line-height:1.45;max-width:40ch}
.shots{margin:0;display:grid;gap:14px}
.shots figcaption{color:var(--mid);margin-top:4px}
.sh-view{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:24px 32px;align-items:stretch;margin-bottom:22px}
/* the monitor: every layer fills the 16:9 box; the hi-res still fades in over the thumb, the dissolve canvas over both, the film on top */
.mon{position:relative;aspect-ratio:16/9;background:var(--ink);overflow:hidden;min-width:0}
.mon>img,.mon-hi,.mon-hi img,.mon canvas,.mon video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.mon-hi img{transition:opacity .22s}
.mon.hi-off .mon-hi img{opacity:0}
.mon canvas{pointer-events:none;opacity:0}
.mon canvas.on{opacity:1}
.mon video{opacity:0;background:transparent}
.mon.live video.shown{opacity:1}
.shots.js .mon{cursor:pointer}
.mon-mark{position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:10px;padding:9px 14px;color:var(--paper);background:var(--ink);transition:background .2s,opacity .2s}
.mon:hover .mon-mark{background:var(--accent)}
.mon.playing .mon-mark{opacity:0}
/* waiting for the film: a quiet accent bar runs along the monitor's foot */
.mon.wait::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 12px);animation:sh-wait .6s linear infinite}
@keyframes sh-wait{to{background-position:12px 0}}
/* the inspector */
.insp{border-top:1px solid var(--ink);padding-top:12px;display:flex;flex-direction:column;gap:18px;min-width:0}
.insp-shot{margin:0;display:flex;align-items:baseline;gap:10px;line-height:.85}
.insp-shot .mono{color:var(--accent);align-self:flex-start;line-height:1.4}
.insp-n{font-size:clamp(64px,7.4vw,120px);font-weight:700;letter-spacing:-.05em;font-variant-numeric:tabular-nums;margin-left:auto}
.insp-of{font-size:clamp(20px,1.8vw,28px);font-weight:600;color:var(--mid);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.insp-meta{margin:0;display:grid;border-top:var(--hair)}
.insp-meta div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:baseline;padding:9px 0;border-bottom:var(--hair)}
.insp-meta dt{color:var(--mid)}
.insp-meta dd{margin:0;font-size:15px;line-height:1.35;color:var(--ink);min-width:0}
.insp-meta dd.mono{font-size:13px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.insp-tc .tc-of{color:var(--mid)}
.insp-desc{margin:0;font-size:16px;line-height:1.45;color:var(--body-ink);min-height:2.9em}
.insp-ctl{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:auto}
.insp-ctl .cta{padding:10px 16px;gap:10px}
.sh-play.is-pause .tri{width:8px;height:10px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor}
.sh-sound[aria-pressed="false"]{color:var(--mid)}
.sh-status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* the cut strip: a ruler of seconds, one button per shot as wide as the shot is long, the playhead and the skim cursor over both */
.shots .track{position:relative;display:grid;gap:6px;padding-top:22px;touch-action:pan-y;-webkit-user-select:none;user-select:none}
/* 21 whole seconds + .4 of the 21.4 s film; a label every 5 s (= SB.end in ai-animatics.mjs) */
.ruler{display:grid;grid-template-columns:repeat(21,minmax(0,1fr)) minmax(0,.4fr);color:var(--mid);font-size:10px;letter-spacing:.04em}
/* a short tick each second, a full line with its label every five; labels sit above the short ticks so they never cross them */
.ruler span{position:relative;padding:0 0 8px 4px;min-width:0;white-space:nowrap;height:18px;background:linear-gradient(var(--mid),var(--mid)) left bottom/1px 5px no-repeat}
.ruler span:nth-child(5n+1){background:none;border-left:1px solid var(--mid);z-index:1}
/* the shots' durations (hundredths of a second) = SB.shots in ai-animatics.mjs */
.clips{list-style:none;margin:0;padding:0;display:grid;gap:2px;grid-template-rows:56px;grid-template-columns:minmax(0,116fr) minmax(0,92fr) minmax(0,116fr) minmax(0,108fr) minmax(0,104fr) minmax(0,188fr) minmax(0,104fr) minmax(0,124fr) minmax(0,80fr) minmax(0,56fr) minmax(0,80fr) minmax(0,84fr) minmax(0,316fr) minmax(0,96fr) minmax(0,112fr) minmax(0,364fr)}
.clips li{min-width:0;display:flex}
.clips button{all:unset;box-sizing:border-box;position:relative;flex:1;min-width:0;overflow:hidden;background:var(--ink);cursor:pointer}
.clips img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:.62;transition:opacity .15s}
.clips button:hover img,.clips button.on img{opacity:1}
.clips button::after{content:'';position:absolute;inset:0;border-top:3px solid transparent;pointer-events:none}
.clips button.on::after{border-top-color:var(--accent)}
.clips button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;z-index:1}
.clips span{position:absolute;left:4px;bottom:3px;color:var(--paper);font-size:10px;letter-spacing:.02em}
.shots :is(.head,.cursor){position:absolute;left:0;top:0;bottom:0;width:0;pointer-events:none;z-index:2}
.shots :is(.head,.cursor)::before{content:'';position:absolute;top:22px;bottom:0;left:-1px;width:2px;background:var(--accent)}
.shots .cursor::before{left:0;width:1px;background:var(--ink)}
.shots :is(.head,.cursor) span{position:absolute;top:0;left:-1px;padding:3px 6px;font-size:10px;letter-spacing:.04em;line-height:1.2;white-space:nowrap;color:var(--paper);background:var(--accent);font-variant-numeric:tabular-nums}
.shots .cursor span{background:var(--ink);top:0}
.shots :is(.head,.cursor).flip span{left:auto;right:-1px}
.shots .cursor{opacity:0}
.shots .track.hover .cursor{opacity:1}
.shots .track.hover .head span{opacity:0}
.shots:not(.js) :is(.head,.cursor,.insp-ctl,.sh-hint,.mon-mark){display:none}
.sh-hint{margin:2px 0 6px;color:var(--mid)}
.sh-hint .h-touch{display:none}
@media (hover:none){.sh-hint .h-mouse{display:none}.sh-hint .h-touch{display:inline}}
/* the sheet: one frame per shot; the current one marked */
.frames{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:18px 10px}
.frames li{min-width:0}
.frames button{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer}
.frames img{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#E4E6EB;outline:2px solid transparent;outline-offset:-2px;transition:outline-color .15s}
.frames button:hover img{outline-color:var(--ink)}
.frames button.on img{outline-color:var(--accent)}
.frames button:focus-visible img{outline-color:var(--accent)}
.frames .fc{display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:7px;color:var(--mid);font-size:10.5px;text-transform:none}
.frames .fc span:first-child{color:var(--ink)}
.frames .on .fc span:first-child{color:var(--accent)}
.frames .fc .ff{text-transform:uppercase;letter-spacing:.06em}

/* ---- what can be included */
.incl{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.incl li{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:baseline;padding:16px 0;border-bottom:var(--hair);font-size:clamp(20px,2vw,28px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.incl-note{margin:22px 0 0 56px;color:var(--body-ink);font-size:16px;line-height:1.5;max-width:52ch}

/* ---- how it works: five steps in a row, the look approval marked as the gate before motion */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:24px}
.flow li{position:relative;border-top:1px solid var(--ink);padding-top:14px;display:grid;align-content:start;justify-items:start;gap:10px}
.flow li:not(:last-child)::after{content:'→';position:absolute;right:0;top:12px;color:var(--mid);font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.flow b{font-weight:600;font-size:19px;letter-spacing:-.015em;line-height:1.2}
.flow p{margin:0;color:var(--body-ink);font-size:15px;line-height:1.45;max-width:30ch}
.flow .gate{border-top:2px solid var(--accent);padding-top:13px}
.flow .gate-tag{color:var(--paper);background:var(--accent);padding:3px 7px}

@media (max-width:1100px){
  .ai-hero-row{grid-template-columns:minmax(0,1fr)}
  .ai-note{max-width:44ch}
  .frames{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* the monitor full width with the strip right under it (the large frame stays in view while scrubbing), then the inspector in a row:
     the shot number, the facts, the text and the controls */
  .sh-view{display:contents}
  .mon{order:1}.shots .track{order:2}.sh-hint{order:3}.insp{order:4}.frames{order:5}.shots figcaption{order:6}
  .insp{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 32px;align-items:start;margin:4px 0 18px}
  .insp-shot{grid-row:1/span 3}
  .insp-n{margin-left:0}
  .insp-desc{min-height:0}
  .insp-ctl{margin-top:0}
  /* the five steps as rows: number, step (and the gate's tag), what happens */
  .flow{grid-template-columns:minmax(0,1fr);border-bottom:var(--hair)}
  .flow li{grid-template-columns:48px minmax(0,1fr) minmax(0,1.4fr);column-gap:24px;align-items:baseline;padding-bottom:18px}
  .flow li::after{display:none}
  .flow .n{grid-column:1;grid-row:1}.flow b{grid-column:2;grid-row:1}.flow .gate-tag{grid-column:2}.flow p{grid-column:3;grid-row:1/span 2}
}
@media (max-width:900px){
  .ex,.ex.flip{grid-template-columns:minmax(0,1fr);gap:20px}
  .ex.flip .ex-media{order:0}
  .ex+.ex{margin-top:56px}
  .rail{grid-template-columns:minmax(0,1fr);gap:28px}
  .sb-steps{grid-template-columns:minmax(0,1fr);gap:18px}
  .sb-steps li::after{display:none}
  .clips span{display:none}
  .mon-mark{left:12px;bottom:12px;padding:8px 12px}
}
@media (max-width:720px){
  main.ai .ai-hero{padding-top:40px;padding-bottom:36px}
  .media-play.ex-media .play-mark{left:12px;bottom:12px;padding:8px 12px}
  .uses{grid-template-columns:minmax(0,1fr);gap:28px}
  .clips{grid-template-rows:44px}
  /* a compact inspector: the number beside three short fact rows, then the text and the controls */
  .insp{gap:10px 16px;padding-top:10px}
  .insp-shot{grid-row:1;flex-wrap:wrap;align-content:flex-start;gap:6px 6px}
  .insp-shot .mono{flex-basis:100%}
  .insp-n{font-size:48px}
  .insp-of{font-size:16px}
  .insp-meta{border-top:0}
  .insp-meta div{grid-template-columns:62px minmax(0,1fr);gap:8px;padding:5px 0}
  .insp-meta dt{font-size:10px}
  .insp-meta dd{font-size:13px}.insp-meta dd.mono{font-size:12px}
  .insp-desc,.insp-ctl{grid-column:1/-1}
  .insp-desc{font-size:15px}
  .ruler span{font-size:0}
  .ruler span:nth-child(5n+1){font-size:9.5px}
  .ruler span:nth-child(21){font-size:0}
  .frames{gap:14px 6px}
  .frames .fc{font-size:10px;letter-spacing:.02em;gap:6px}
  .flow li{grid-template-columns:40px minmax(0,1fr);column-gap:0}
  .flow p{grid-column:2;grid-row:auto}
  .incl li{grid-template-columns:40px minmax(0,1fr)}
  .incl-note{margin-left:40px}
}
@media (prefers-reduced-motion:reduce){main.ai *{transition:none!important}.mon.wait::after{animation:none}}
/* the headline that resolves out of dither noise (js/gen-title.js): its real glyphs are transparent until the script says gen-done,
   the canvas over it draws meanwhile. Only where scripts run and motion is welcome; if the script never arrives the text comes back
   by itself after 5 s (the same kind of failsafe as the loading cover's) */
h1[data-gen]{position:relative}
.gen-cv{position:absolute;pointer-events:none;display:block}
.gen-cv[hidden]{display:none}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  h1[data-gen]:not(.gen-done){color:transparent;animation:gen-failsafe 1ms linear 5s forwards}
}
@keyframes gen-failsafe{to{color:var(--ink)}}