/* ============================================================
   STUDIO — faithful interface mockups of the Aisible Studio editor.
   Dark working pane on the bone canvas, matching the operator-mock
   idiom in style.css. Components mirror the real dashboard editor
   (dashboard/web/src/app/media/projects/[id]): stage rail, scene
   cards + model knobs, the multi-character cast panel, the timeline
   NLE, the QA gate. Used by studio.html + product.html.
   ============================================================ */

/* ---- shared dark-pane shell (mirrors .operator-mock / .operator-pane) ---- */
.studio-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--sp-3);
    background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-2) 100%);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 40px 100px rgba(20,17,10,0.12), 0 8px 24px rgba(20,17,10,0.06), inset 0 1px 0 rgba(244,237,223,0.6);
    position: relative;
}
.studio-pane {
    background: #14110A;
    color: #E4D8BF;
    border-radius: 14px;
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    overflow: hidden;
    position: relative;
    font-family: var(--font-body);
}
.studio-pane::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(circle at 12% 12%, rgba(232,168,56,0.07) 0%, transparent 42%),
        radial-gradient(circle at 88% 88%, rgba(120,180,200,0.045) 0%, transparent 42%);
}
.studio-pane > * { position: relative; z-index: 1; }
.studio-mono { font-family: var(--font-mono); }

/* ---- window topbar + breadcrumb ---- */
.studio-topbar {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 2px 4px var(--sp-3);
    border-bottom: 1px solid rgba(244,237,223,0.07);
}
.studio-topbar .t-dot { width: 9px; height: 9px; border-radius: 50%; }
.studio-topbar .t-dot.red { background: #D46A4E; }
.studio-topbar .t-dot.yellow { background: #E8A838; }
.studio-topbar .t-dot.green { background: #8FAA66; }
.studio-crumb {
    margin-left: var(--sp-3); font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: #9C8B6E;
}
.studio-crumb strong { color: #E4D8BF; font-weight: 600; }
.studio-cost {
    margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: #8FAA66;
    white-space: nowrap;
}
.studio-cost .cap { color: #6B5E4A; }

/* ---- gate chip row (brief · script · storyboard · production · master) ---- */
.studio-gatebar {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: var(--sp-3) 4px;
    border-bottom: 1px solid rgba(244,237,223,0.07);
}
.studio-gate {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em;
    text-transform: uppercase; color: #9C8B6E;
    padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(244,237,223,0.08);
}
.studio-gate .gd { width: 7px; height: 7px; border-radius: 50%; background: rgba(244,237,223,0.22); }
.studio-gate.done { color: #8FAA66; border-color: rgba(143,170,102,0.3); }
.studio-gate.done .gd { background: #8FAA66; }
.studio-gate.now { color: #F5BD4F; border-color: rgba(232,168,56,0.45); background: rgba(232,168,56,0.07); }
.studio-gate.now .gd { background: #E8A838; box-shadow: 0 0 0 3px rgba(232,168,56,0.18); }

/* ---- editor body: rail | main | inspector ---- */
.studio-body {
    display: grid;
    grid-template-columns: 132px 1fr 232px;
    gap: var(--sp-3);
    padding-top: var(--sp-3);
}
@media (max-width: 880px) {
    .studio-body { grid-template-columns: 1fr; }
    .studio-rail-steps { flex-direction: row; flex-wrap: wrap; }
    .studio-rail-steps .conn { display: none; }
    .studio-inspector { display: none; }
}

/* left stage rail (vertical stepper) */
.studio-rail-label, .studio-col-label {
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em;
    text-transform: uppercase; color: #6B5E4A; margin-bottom: var(--sp-3);
}
.studio-rail-steps { display: flex; flex-direction: column; gap: 0; }
.studio-step {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-heading); font-weight: 600; font-size: 11px;
    letter-spacing: 0.05em; text-transform: uppercase;
    color: #9C8B6E; padding: 7px 9px; border-left: 2px solid transparent; border-radius: 0 6px 6px 0;
}
.studio-step .sd { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; flex-shrink: 0; }
.studio-step.done { color: #8FAA66; }
.studio-step.done .sd { background: #8FAA66; border-color: #8FAA66; }
.studio-step.now { color: #F5BD4F; background: rgba(232,168,56,0.1); border-left-color: #E8A838; }
.studio-step.now .sd { border-color: #E8A838; box-shadow: 0 0 0 3px rgba(232,168,56,0.18); }
.studio-rail-steps .conn { width: 1px; height: 10px; background: rgba(244,237,223,0.1); margin-left: 16px; }

/* center: canvas + scene strip + timeline */
.studio-main { min-width: 0; }
.studio-canvas {
    position: relative; border-radius: 9px; overflow: hidden;
    border: 1px solid rgba(244,237,223,0.09);
    background:
        linear-gradient(135deg, rgba(120,180,200,0.10), rgba(232,168,56,0.08)),
        #0E0B06;
    aspect-ratio: 16 / 7; display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--sp-3);
}
.studio-canvas .play {
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(20,17,10,0.55); border: 1px solid rgba(244,237,223,0.25);
    display: flex; align-items: center; justify-content: center;
}
.studio-canvas .play::before {
    content: ''; width: 0; height: 0; margin-left: 3px;
    border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid #F4EDDF;
}
.studio-canvas .cap {
    position: absolute; left: 10px; bottom: 9px;
    font-family: var(--font-mono); font-size: 10px; color: rgba(244,237,223,0.7);
}
.studio-canvas .badge {
    position: absolute; right: 10px; top: 9px;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
    color: #F5BD4F; background: rgba(20,17,10,0.5); border: 1px solid rgba(232,168,56,0.3);
    padding: 3px 8px; border-radius: 999px;
}

.studio-scenes { display: flex; gap: 8px; overflow: hidden; }
.studio-scene {
    flex: 1 1 0; min-width: 0;
    border: 1px solid rgba(244,237,223,0.09); border-radius: 8px; overflow: hidden;
    background: rgba(244,237,223,0.025);
}
.studio-scene.sel { border-color: rgba(232,168,56,0.55); box-shadow: 0 0 0 1px rgba(232,168,56,0.3); }
.studio-scene .thumb {
    aspect-ratio: 16 / 10; position: relative;
    background: linear-gradient(135deg, rgba(120,180,200,0.16), rgba(232,168,56,0.12)); }
.studio-scene .thumb .k {
    position: absolute; left: 6px; top: 6px;
    font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 2px 6px; border-radius: 4px; color: #E4D8BF;
}
.studio-scene .thumb .k.vid { background: rgba(120,180,200,0.28); }
.studio-scene .thumb .k.img { background: rgba(232,168,56,0.26); }
.studio-scene .thumb .k.mot { background: rgba(143,170,102,0.28); }
.studio-scene .meta { padding: 7px 8px; }
.studio-scene .meta .id { font-family: var(--font-mono); font-size: 10px; color: #9C8B6E; }
.studio-scene .meta .sub { font-size: 11px; color: #C8BBA0; line-height: 1.4; margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.studio-scene .meta .row {
    display: flex; align-items: center; justify-content: space-between; margin-top: 6px;
    font-family: var(--font-mono); font-size: 10px; }
.studio-scene .meta .row .model { color: #78B4C8; }
.studio-scene .meta .row .cost { color: #8FAA66; }

/* timeline NLE */
.studio-timeline { margin-top: var(--sp-3); border-top: 1px solid rgba(244,237,223,0.07); padding-top: var(--sp-3); }
.studio-ruler {
    display: flex; justify-content: space-between;
    font-family: var(--font-mono); font-size: 9px; color: #6B5E4A; margin-bottom: 5px; padding: 0 2px; }
.studio-track { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.studio-track .tl {
    width: 22px; flex-shrink: 0; font-family: var(--font-mono); font-size: 9.5px; color: #9C8B6E; }
.studio-track .lane { flex: 1; display: flex; gap: 3px; height: 16px; }
.studio-clip { height: 16px; border-radius: 3px; border: 1px solid transparent; }
.studio-clip.v { background: rgba(120,180,200,0.32); border-color: rgba(120,180,200,0.5); }
.studio-clip.v.sel { box-shadow: 0 0 0 1px #E8A838; border-color: #E8A838; }
.studio-clip.a { background: rgba(143,170,102,0.3); border-color: rgba(143,170,102,0.45); }
.studio-clip.c { background: rgba(120,180,200,0.18); border-color: rgba(120,180,200,0.3); }

/* right inspector */
.studio-inspector { border-left: 1px solid rgba(244,237,223,0.07); padding-left: var(--sp-3); }
.studio-tabs { display: flex; gap: 4px; margin-bottom: var(--sp-3); }
.studio-tab {
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
    color: #6B5E4A; padding: 4px 7px; border-radius: 5px; }
.studio-tab.on { color: #F5BD4F; background: rgba(232,168,56,0.1); }
.studio-field { margin-bottom: var(--sp-3); }
.studio-field .fl { font-family: var(--font-mono); font-size: 9.5px; color: #6B5E4A; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
.studio-control {
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(244,237,223,0.04); border: 1px solid rgba(244,237,223,0.1);
    border-radius: 6px; padding: 7px 9px; font-family: var(--font-mono); font-size: 11px; color: #E4D8BF; }
.studio-control .tier { color: #78B4C8; font-size: 9.5px; }
.studio-control .v { color: #F5BD4F; }
.studio-control.caret::after { content: '▾'; color: #9C8B6E; }
.studio-slider { height: 4px; border-radius: 2px; background: rgba(244,237,223,0.12); position: relative; margin: 9px 0 4px; }
.studio-slider::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 62%; background: #E8A838; border-radius: 2px; }
.studio-slider::after { content: ''; position: absolute; left: 62%; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: #F5BD4F; transform: translate(-50%,-50%); }

/* ---- standalone feature mockups ---- */

/* screenplay panel */
.studio-script {
    background: #14110A; border-radius: 12px; padding: var(--sp-5);
    font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: #C8BBA0;
    border: 1px solid var(--border);
}
.studio-script .sh { color: #E4D8BF; border-left: 2px solid rgba(232,168,56,0.5); padding-left: 8px; letter-spacing: 0.06em; }
.studio-script .ax { color: #9C8B6E; }
.studio-script .ch { color: #78B4C8; text-align: center; }
.studio-script .vo { color: #C8BBA0; text-align: center; max-width: 30ch; margin: 0 auto; }
.studio-script .dn { color: #6B5E4A; font-style: italic; }

/* cast / identity anchors — MANY characters & products */
.studio-cast { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
.studio-castcard {
    background: rgba(244,237,223,0.025); border: 1px solid rgba(244,237,223,0.1); border-radius: 10px; overflow: hidden;
}
.studio-castcard .face {
    aspect-ratio: 1; position: relative;
    background: linear-gradient(150deg, rgba(120,180,200,0.2), rgba(232,168,56,0.16)); }
.studio-castcard .face .stack {
    position: absolute; right: 6px; bottom: 6px; display: flex; gap: 3px; }
.studio-castcard .face .stack span {
    width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(244,237,223,0.4);
    background: linear-gradient(150deg, rgba(232,168,56,0.3), rgba(120,180,200,0.25)); }
.studio-castcard .body { padding: 8px 10px 10px; }
.studio-castcard .nm { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: #E4D8BF; }
.studio-castcard .nm .lock { color: #8FAA66; }
.studio-castcard .ty { font-family: var(--font-mono); font-size: 9.5px; color: #9C8B6E; margin-top: 3px; }
.studio-castcard .ty .ct { color: #78B4C8; }
.studio-castcard .ap { font-family: var(--font-mono); font-size: 9.5px; color: #6B5E4A; margin-top: 4px; }

/* model picker grid */
.studio-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-3); }
.studio-model {
    background: rgba(244,237,223,0.025); border: 1px solid rgba(244,237,223,0.1); border-radius: 9px; padding: 11px 13px;
    font-family: var(--font-mono); }
.studio-model.on { border-color: rgba(232,168,56,0.5); background: rgba(232,168,56,0.06); }
.studio-model .mn { font-size: 12.5px; color: #E4D8BF; display: flex; align-items: center; justify-content: space-between; }
.studio-model.on .mn { color: #F5BD4F; }
.studio-model .mt { font-size: 9.5px; color: #78B4C8; margin-top: 4px; letter-spacing: 0.04em; text-transform: uppercase; }
.studio-model .mc { font-size: 10px; color: #8FAA66; margin-top: 6px; }
.studio-model .pick { color: #8FAA66; }

/* QA verdict */
.studio-qa {
    background: #14110A; border: 1px solid var(--border); border-radius: 12px; padding: var(--sp-4) var(--sp-5);
}
.studio-qa .verdict {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-heading); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
    color: #8FAA66; }
.studio-qa .verdict .vd { width: 12px; height: 12px; border-radius: 50%; background: #8FAA66; }
.studio-qa .qsum { color: #C8BBA0; font-size: 13px; line-height: 1.6; margin-top: 10px; }
.studio-qa .fixes { margin-top: 12px; }
.studio-qa .fixes .fl { font-family: var(--font-mono); font-size: 9.5px; color: #6B5E4A; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 5px; }
.studio-qa .fixes div { font-family: var(--font-mono); font-size: 11px; color: #9C8B6E; line-height: 1.7; }

/* ---- scannable helpers (used across the rebuilt pages) ---- */
.scan-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); counter-reset: scanstep; }
.scan-step { position: relative; padding-top: var(--sp-4); border-top: 2px solid var(--border-active); }
.scan-step .sn { font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.1em; }
.scan-step h4 { font-family: var(--font-heading); font-weight: 700; font-size: 16px; margin: 6px 0 6px; color: var(--text); letter-spacing: -0.01em; }
.scan-step p { font-size: 13.5px; line-height: 1.55; color: var(--text-3); margin: 0; }

.spec-row { display: flex; flex-wrap: wrap; gap: 7px; }
.spec-chip {
    font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2);
    border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; background: var(--surface-1); }
.spec-chip.live { border-color: rgba(90,122,62,0.4); color: var(--success); }
.spec-chip.live::before { content: '● '; font-size: 8px; vertical-align: middle; }
.spec-chip.soon { color: var(--text-4); border-style: dashed; }

.studio-cap { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); margin-top: var(--sp-4); text-align: center; }
.studio-cap b { color: var(--text-2); font-weight: 500; }

/* ============================================================
   TRANSFORMATION NARRATIVE — hero (brief → film) + big visual beats.
   Visual-first, editorial-cinematic, minimal copy. Within the brand.
   ============================================================ */

/* hero: a sentence becomes a film */
.tx { display: grid; grid-template-columns: 1fr auto 1.15fr; align-items: center; gap: var(--sp-5); margin-top: var(--sp-8); }
@media (max-width: 860px) { .tx { grid-template-columns: 1fr; gap: var(--sp-4); } }

.tx-prompt {
    background: #14110A; border: 1px solid var(--border); border-radius: 14px;
    padding: var(--sp-5) var(--sp-5) var(--sp-6); box-shadow: 0 24px 60px rgba(20,17,10,.12); position: relative;
}
.tx-prompt .lab { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #9C8B6E; margin-bottom: 14px; }
.tx-prompt .txt { font-family: var(--font-mono); font-size: 15px; line-height: 1.75; color: #E4D8BF; }
.tx-prompt .cur { display: inline-block; width: 7px; height: 16px; background: #E8A838; vertical-align: -2px; margin-left: 3px; animation: txblink 1.1s steps(1) infinite; }
@keyframes txblink { 50% { opacity: 0; } }

.tx-arrow { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; color: #9C8B6E; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; }
.tx-arrow .glyph { font-size: 22px; color: var(--accent); line-height: 1; }
@media (max-width: 860px) { .tx-arrow .glyph { transform: rotate(90deg); } }

.tx-film {
    position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10;
    border: 1px solid rgba(244,237,223,.12); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 28px 80px rgba(20,17,10,.2);
    background: radial-gradient(120% 120% at 28% 18%, rgba(120,180,200,.22), transparent 55%),
                radial-gradient(120% 120% at 82% 90%, rgba(232,168,56,.2), transparent 55%), #0E0B06;
}
.tx-film .play { width: 56px; height: 56px; border-radius: 50%; background: rgba(20,17,10,.5); border: 1px solid rgba(244,237,223,.3); display: flex; align-items: center; justify-content: center; }
.tx-film .play::before { content: ''; width: 0; height: 0; margin-left: 4px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 16px solid #F4EDDF; }
.tx-film .ribbon { position: absolute; top: 11px; right: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #F5BD4F; background: rgba(20,17,10,.5); border: 1px solid rgba(232,168,56,.35); padding: 4px 9px; border-radius: 999px; }
.tx-film .meta { position: absolute; bottom: 11px; left: 13px; font-family: var(--font-mono); font-size: 10px; color: rgba(244,237,223,.75); }

/* big visual beats */
.beat { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: var(--sp-8); align-items: center; padding: var(--sp-8) 0; }
.beat.flip .beat-text { order: 2; }
@media (max-width: 860px) { .beat, .beat.flip { grid-template-columns: 1fr; gap: var(--sp-5); padding: var(--sp-7) 0; } .beat.flip .beat-text { order: 0; } }
.beat-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-4); }
.beat h2 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -.02em; color: var(--text); margin: 0 0 var(--sp-4); }
.beat p { font-size: 18px; line-height: 1.6; color: var(--text-2); max-width: 44ch; margin: 0; }
.beat-text { min-width: 0; }
.beat-visual { min-width: 0; }

.beat-full { text-align: center; max-width: 60ch; margin: 0 auto var(--sp-7); }
.beat-full .beat-kicker { margin-bottom: var(--sp-3); }
.beat-full h2 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(34px, 5vw, 64px); line-height: 1.03; letter-spacing: -.02em; color: var(--text); margin: 0 0 var(--sp-3); }
.beat-full p { font-size: 18px; line-height: 1.6; color: var(--text-2); margin: 0 auto; }

/* audio beat mini-visual */
.tx-audio { background: #14110A; border: 1px solid var(--border); border-radius: 14px; padding: var(--sp-5); box-shadow: 0 24px 60px rgba(20,17,10,.12); }
.tx-audio .arow { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tx-audio .arow:last-of-type { margin-bottom: 0; }
.tx-audio .alab { width: 34px; flex-shrink: 0; font-family: var(--font-mono); font-size: 10px; color: #9C8B6E; }
.tx-audio .wave { flex: 1; height: 28px; display: flex; align-items: center; gap: 2px; }
.tx-audio .wave i { flex: 1; height: 45%; background: rgba(143,170,102,.55); border-radius: 1px; }
.tx-audio .wave.vo i { background: rgba(120,180,200,.55); }
.tx-audio .wave i:nth-child(3n)   { height: 80%; }
.tx-audio .wave i:nth-child(3n+2) { height: 62%; }
.tx-audio .wave i:nth-child(5n)   { height: 96%; }
.tx-audio .wave i:nth-child(7n)   { height: 34%; }
.tx-audio .wave i:nth-child(4n+1) { height: 52%; }
.tx-audio .cap { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(244,237,223,.07); font-family: var(--font-mono); font-size: 12px; color: #C8BBA0; text-align: center; }
.tx-audio .cap b { color: #F5BD4F; font-weight: 500; }