/* For creators: the brief picker after the live mixer, and the separate video workflow after Studio.
   Loaded after style.css and reuses its palette, the sample-list button language and the install-step numerals. */

/* The desktop navigation now carries a sixth, longer label; tighten its gaps just before the phone layout takes over at 800px. */
@media(max-width:900px){.desktop-nav{gap:16px}}

/* Features board: in the five-column Lyrical card its Panchang heading ("Your words." / "With a voice.") only holds two
   lines once the card is about 340px wide, which the twelve-column board first allows around 1025px. Between the phone
   layout and there, run the same stacked board style.css uses below 800px: Compose and Lyrical full width, Lyrical's
   copy beside its quote. Padding and type keep their 1100px values. */
@media(min-width:801px) and (max-width:1024px){.compose-feature{grid-column:span 12}.lyrical-feature{grid-column:span 12;display:grid;grid-template-columns:1fr 1fr;gap:22px 36px}.lyrical-feature h3{grid-column:1/-1;grid-row:auto;margin:0}.lyrical-feature blockquote{margin:0;grid-column:2}.lyrical-feature .text-link{grid-column:2}.lyrical-feature .feature-footnote{grid-column:1/-1;padding:0;margin:0;max-width:none}}

/* Brief picker: a row of tabs above one open brief. Each brief leads with two screens from the Layrs app, cropped to the
   part of the app that brief uses, and keeps its starter prompt and facts below them. Tabs are hidden until creator.js
   runs; without it every brief is shown in full, one after another. */
.creators{background:var(--bg)}
.brief-desk{display:grid;gap:var(--gap)}
.brief-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);min-width:0}
.brief-tab{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;width:100%;min-width:0;text-align:left;border:0;background:var(--surface-raised);padding:20px 22px;min-height:96px;transition:background-color 180ms ease,transform 180ms var(--ease)}
.brief-tab:hover{background:var(--surface-active)}
.brief-tab:active{transform:translateY(2px)}
.brief-tab[aria-selected=true]{background:var(--accent);color:var(--bg)}
.brief-tab-text{display:grid;gap:5px;min-width:0}
.brief-tab-text strong{font-size:19px;font-weight:500;line-height:1.2;letter-spacing:-.015em}
.brief-tab-text>span{font-size:14px;color:var(--muted);line-height:1.3}
.brief-tab[aria-selected=true] .brief-tab-text>span{color:#343d15}
.brief-tab::after{content:'↓';font-size:22px;line-height:1;flex-shrink:0;opacity:0;transform:translateY(-6px);transition:opacity 180ms ease,transform 180ms var(--ease)}
.brief-tab[aria-selected=true]::after{opacity:1;transform:none}
.brief-panels{display:grid;gap:var(--gap);min-width:0}
.brief-panel{background:var(--surface-raised);min-width:0}

/* The stage: a tall screen above a wide strip, both running edge to edge. A crop is a focal centre (--cx, --cy) and the
   fraction of the screenshot's width that stays visible (--fw), all as fractions of the 2480 by 1576 screenshot, inside a
   box of a given aspect ratio (--ar). The box clips; the picture is only scaled and positioned, never redrawn. */
.brief-stage{display:grid}
.shot{margin:0;min-width:0}
.shot-main{--ar:2.1}
.shot-strip{--ar:4.7}
.shot-media{--picture:1.5736;--fh:calc(var(--fw) * var(--picture) / var(--ar));--x:clamp(0, var(--cx) - var(--fw) / 2, 1 - var(--fw));--y:clamp(0, var(--cy) - var(--fh) / 2, 1 - var(--fh));position:relative;overflow:hidden;aspect-ratio:var(--ar);background:#000}
.shot-media img{position:absolute;left:0;top:0;width:calc(100% / var(--fw));max-width:none;height:auto;transform:translate(calc(var(--x) * -100%),calc(var(--y) * -100%))}
.shot[data-enlargeable] .shot-media{cursor:zoom-in}
.shot figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px 24px;min-height:62px;padding:9px var(--pad);font-size:15px;line-height:1.45;color:var(--muted)}
.shot figcaption>span{max-width:84ch}
.shot-enlarge{flex-shrink:0;min-height:44px;padding:8px 14px;border:0;background:var(--surface-active);color:var(--ink);font-size:14px;font-weight:500;transition:background-color 180ms ease,color 180ms ease}
.shot-enlarge:hover{background:var(--ink);color:var(--bg)}

/* Which part of which screen each brief shows. The compact values further down take over at tablet and phone widths. */
[data-crop=compose-take]{--cx:.5775;--cy:.4568;--fw:.81}
[data-crop=studio-clip]{--cx:.562;--cy:.3104;--fw:.81}
[data-crop=studio-lanes]{--cx:.562;--cy:.4725;--fw:.81}
[data-crop=library-import]{--cx:.577;--cy:.2364;--fw:.84}
[data-crop=library-shelf]{--cx:.5775;--cy:.5897;--fw:.81}
[data-crop=compose-brief]{--cx:.5775;--cy:.858;--fw:.81}
[data-crop=studio-tools]{--cx:.572;--cy:.3832;--fw:.83}
[data-crop=examples-book]{--cx:.5775;--cy:.3049;--fw:.81}
[data-crop=lyrical-song]{--cx:.5775;--cy:.3977;--fw:.82}
[data-crop=lyrical-editor]{--cx:.5775;--cy:.8438;--fw:.82}

/* Below the screens: the brief's words and its prompt on the left, the facts on the right. */
.brief-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:28px 48px;align-items:start;padding:var(--pad)}
.brief-copy{min-width:0}
.brief-kicker{font-size:var(--small);color:var(--muted);margin-bottom:12px}
.brief-panel h3{margin-bottom:14px}
.brief-copy>h3+p{max-width:52ch}
.prompt-field{display:grid;gap:10px;margin-top:26px}
.prompt-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;margin-top:26px}
.prompt-pair .prompt-field{margin-top:0;align-content:start}
.prompt-field label{font-size:var(--small);color:var(--muted)}
.prompt-field textarea{display:block;width:100%;min-height:96px;padding:16px 18px;border:0;border-radius:0;background:var(--bg);color:var(--ink);font-size:17px;line-height:1.5;resize:vertical;field-sizing:content}
.prompt-field textarea:focus-visible{outline-offset:0}
.prompt-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.prompt-actions .copy-button{min-height:46px;padding:10px 18px;font-weight:500;transition:background-color 180ms ease,transform 180ms var(--ease)}
.prompt-actions .copy-button:hover{background:var(--accent-hover)}
.prompt-actions .copy-button:active{transform:scale(.97)}
.prompt-restore{min-height:44px;padding:8px 14px;border:0;background:var(--surface-active);font-size:15px;font-weight:500;transition:background-color 180ms ease,color 180ms ease}
.prompt-restore:hover{background:var(--ink);color:var(--bg)}
.prompt-status{flex:1 1 220px;min-width:0;font-size:var(--small);color:var(--muted);line-height:1.45}
.prompt-status:empty{display:none}
.brief-side{display:grid;gap:18px;min-width:0}
.brief-spec{display:grid;gap:6px}
.brief-spec>div{display:grid;gap:6px;align-content:start;padding:14px 16px;background:var(--bg)}
.brief-spec dt{font-size:var(--small);color:var(--muted)}
.brief-spec dd{font-size:16px;line-height:1.45}
.brief-note{font-size:14px;line-height:1.55;color:var(--muted)}
.brief-links{display:flex;flex-wrap:wrap;align-items:center;gap:2px 20px}
.brief-links .text-link{color:var(--accent);font-size:16px}
.brief-proof{flex-basis:100%;font-size:var(--small);color:var(--muted);line-height:1.45}
.creator-shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:var(--gap)}
.creator-shelf p{padding:var(--pad);background:var(--surface-raised);font-size:var(--body);line-height:1.45;text-wrap:balance}
.creator-footnote{margin-top:var(--note);font-size:var(--small);color:var(--muted);line-height:1.55;max-width:var(--span-7)}
.creator-footnote a,.privacy-scope a,.faq-list details>p a{text-decoration:underline;text-underline-offset:3px}
.creator-footnote a:hover,.privacy-scope a:hover,.faq-list details>p a:hover{color:var(--accent)}

/* Enlarged view: the whole window on a dark backdrop. Escape, the Close button and a click outside the frame all close it,
   and the page behind keeps its scroll position. */
.shot-dialog{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--ink)}
.shot-dialog[open]{display:grid;place-items:center;overflow:auto}
.shot-dialog::backdrop{background:rgba(0,0,0,.9)}
.shot-dialog-frame{width:min(100%,1800px);display:grid;gap:14px;padding:16px var(--gutter) 20px}
.shot-dialog-top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.shot-dialog-caption{font-size:16px;line-height:1.45;max-width:84ch;margin:0}
.shot-dialog-close{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;min-height:44px;padding:8px 16px;border:0;background:var(--surface-active);color:var(--ink);font-size:15px;font-weight:500;transition:background-color 180ms ease,color 180ms ease}
.shot-dialog-close:hover{background:var(--ink);color:var(--bg)}
.shot-dialog-scroll{min-width:0;background:#000}
.shot-dialog img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain}
.shot-dialog-note{font-size:var(--small);color:var(--muted);line-height:1.5;margin:0}
.shot-dialog-pan{display:none}
.shot-viewing,.shot-viewing body{overflow:hidden}
.shot-viewing{padding-right:var(--scrollbar-gap,0px)}

/* The separate video workflow: four stages told in order, the real output format, and what to know before asking. */
.video{background:var(--bg)}
.video .section-intro p{max-width:42ch}
.video-stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:stage}
.video-stages li{counter-increment:stage;display:flex;flex-direction:column;min-height:300px;padding:30px 32px 32px;background:var(--surface)}
.video-stages li::before{content:counter(stage,decimal-leading-zero) / "";display:block;margin-bottom:auto;padding-bottom:44px;font-family:var(--display);font-weight:700;font-size:clamp(34px,3.2vw,52px);line-height:1;letter-spacing:-.05em;color:var(--muted)}
.video-stages h3{font-size:clamp(22px,1.9vw,30px);margin-bottom:14px}
.video-stages p{font-size:17px;line-height:1.55;color:var(--muted);max-width:36ch}
.video-body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:12px;margin-top:12px}
.video-frame{display:flex;flex-direction:column;gap:22px;padding:32px;background:var(--surface)}
.video-frame img{width:100%;aspect-ratio:16/9;object-fit:cover}
.video-frame figcaption{font-size:15px;line-height:1.55;color:var(--muted);max-width:40ch}
.video-facts{display:grid;gap:28px;align-content:start;padding:32px;background:var(--surface)}
.video-facts dl{display:grid;gap:26px}
.video-facts dt{font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.25;margin-bottom:6px}
.video-facts dd{font-size:17px;line-height:1.55;color:var(--muted);max-width:58ch}
.video-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.privacy-scope{margin-top:40px;font-size:15px;line-height:1.6;color:var(--muted);max-width:72ch}

@media(max-width:1100px){.brief-tabs{grid-template-columns:repeat(6,minmax(0,1fr))}.brief-tab{grid-column:span 2;padding:18px 20px;min-height:84px}.brief-tab:nth-child(n+4){grid-column:span 3}.brief-tab-text strong{font-size:18px}.shot figcaption{padding:8px 28px}.brief-body{gap:24px 32px;padding:28px}.creator-shelf p{padding:28px}.video-stages li{padding:24px;min-height:260px}.video-stages li::before{padding-bottom:32px}.video-frame,.video-facts{padding:26px}}
@media(max-width:800px){.brief-tabs{grid-template-columns:1fr 1fr}.brief-tab,.brief-tab:nth-child(n+4){grid-column:auto;min-height:74px;padding:16px 20px}.brief-tab:last-child{grid-column:1/-1}.shot-main{--ar:1.45}.shot-strip{--ar:3.2}[data-crop=compose-take]{--cy:.458;--fw:.5}[data-crop=studio-clip]{--cx:.407;--cy:.3289;--fw:.5}[data-crop=studio-lanes]{--cx:.432;--cy:.4678;--fw:.55}[data-crop=library-import]{--cy:.2616}[data-crop=library-shelf]{--cx:.4225;--cy:.561;--fw:.5}[data-crop=compose-brief]{--cx:.4225;--cy:.88;--fw:.5}[data-crop=studio-tools]{--cx:.457;--cy:.402;--fw:.6}[data-crop=examples-book]{--cy:.3643}[data-crop=lyrical-song]{--cy:.4343;--fw:.5}.shot figcaption{padding:8px 26px}.brief-body{grid-template-columns:1fr;gap:26px;padding:24px}.brief-panel h3{font-size:27px}.prompt-pair{grid-template-columns:1fr}.creator-shelf{grid-template-columns:1fr}.creator-shelf p{padding:24px}.shot-dialog-scroll{overflow:auto;max-height:74vh;-webkit-overflow-scrolling:touch}.shot-dialog img{width:1240px;max-width:none;max-height:none}.shot-dialog-pan{display:inline}.video-stages{grid-template-columns:1fr;gap:10px}.video-stages li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:4px 20px;align-items:start;min-height:0;padding:24px}.video-stages li::before{grid-row:1/3;margin:0;padding:0;font-size:34px}.video-stages h3{font-size:24px;margin-bottom:8px}.video-stages p{max-width:52ch}.video-body{grid-template-columns:1fr}.video-frame{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:24px}.video-frame figcaption{max-width:none}.privacy-scope{margin-top:36px}}
@media(max-width:520px){.brief-tabs{gap:var(--row)}.brief-tab,.brief-tab:nth-child(n+4){min-height:66px;padding:14px 16px;gap:10px}.brief-tab-text strong{font-size:16px}.brief-tab-text>span{font-size:13px}.brief-tab::after{display:none}.shot figcaption{flex-wrap:wrap;min-height:0;padding:10px 18px;font-size:14px}.shot-enlarge{min-height:40px}.brief-body{gap:24px;padding:20px}.brief-kicker{margin-bottom:10px}.brief-panel h3{font-size:25px}.prompt-field,.prompt-pair{margin-top:22px}.prompt-pair .prompt-field{margin-top:0}.prompt-field textarea{font-size:16px;padding:14px 16px}.prompt-actions .copy-button{width:100%}.brief-spec dd{font-size:15px}.brief-links{gap:2px 16px}.creator-shelf p{padding:20px}.creator-footnote{font-size:13px}.shot-dialog-frame{gap:12px;padding:12px 14px 16px}.shot-dialog-top{align-items:flex-start}.shot-dialog-caption{font-size:15px}.video-stages li{grid-template-columns:56px minmax(0,1fr);gap:4px 16px;padding:22px 18px}.video-stages li::before{font-size:28px}.video-stages h3{font-size:22px}.video-stages p{font-size:16px}.video-frame{grid-template-columns:1fr;gap:18px;padding:20px}.video-facts{padding:22px 18px;gap:24px}.video-facts dt{font-size:20px}.video-facts dd{font-size:16px}.video-actions .button{width:100%}.privacy-scope{font-size:14px;margin-top:32px}}
@media(prefers-reduced-motion:no-preference){.shot-media{animation:shot-reveal 700ms var(--ease) both}.shot-strip .shot-media{animation-delay:110ms}.shot-dialog[open]{animation:shot-dialog-in 240ms var(--ease)}@keyframes shot-reveal{from{clip-path:inset(0 0 100% 0);transform:translateY(8px)}to{clip-path:inset(0);transform:none}}@keyframes shot-dialog-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}}
@media(prefers-reduced-motion:reduce){.brief-tab:active,.prompt-actions .copy-button:active{transform:none}.brief-tab::after{transition:none}}

/* Creator previews cycle at the requested pace, with an explicit stop control. */
/* The rotation control sits under the lead, in the intro's right column, on the same line as the lead. */
.brief-rotation-toolbar{display:flex;align-items:center;justify-content:flex-start;gap:16px;min-height:44px;margin-top:16px;flex-wrap:wrap}
.brief-rotation-toolbar>[data-rotation-status]{font-size:13px;color:var(--muted)}
.brief-rotation-control{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 14px;border:0;background:var(--surface-raised);color:var(--ink);font-size:14px;line-height:1.3}
.brief-rotation-control .ui-icon{width:16px;height:16px;color:var(--accent)}
.brief-rotation-control:hover{background:var(--surface-active)}
.brief-rotation-control:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.brief-panels{overflow:clip;--brief-slide-distance:clamp(24px,4vw,56px)}
[data-enhanced=true] .brief-panel:not([hidden]){animation:brief-slide-in 440ms cubic-bezier(.22,1,.36,1) both}
@keyframes brief-slide-in{from{opacity:0;transform:translate3d(var(--brief-slide-distance),0,0)}to{opacity:1;transform:none}}
@media(max-width:520px){.brief-rotation-toolbar{gap:12px}.brief-rotation-control{font-size:13px}.brief-rotation-toolbar>[data-rotation-status]{font-size:12px}}
@media(prefers-reduced-motion:reduce){[data-enhanced=true] .brief-panel:not([hidden]){animation:none}}