/* Copyright (c) A|iens. All rights reserved.
 *
 * Name        : studio/_shared/studio.css
 * Version     : 1.0.0 (2026-11-06)
 * Author      : A'nil Cyborg (brain: Cyborg Core-111 - COO)
 * Description : Shared look for the production pages /studio/ (agent board) and /scenes/TheHuman-II/ (trailer
 *               scene board). Self-contained on purpose: it does not depend on the generated site CSS, so a main
 *               rebuild cannot break these pages. Palette and fonts follow the site (TheHuman.Universe.css).
 * Integration : Agents (CG4001...) must not edit this file; their own pages live in /studio/<ID>/.
 */
@font-face{font-family:THDisplay;src:url('/assets/v5/fonts/oxanium-latin-600-normal.woff2') format('woff2');font-display:swap;font-weight:600}
@font-face{font-family:THText;src:url('/assets/v3/fonts/manrope-latin-400-normal.woff2') format('woff2');font-display:swap;font-weight:400}
@font-face{font-family:THText;src:url('/assets/v3/fonts/manrope-latin-700-normal.woff2') format('woff2');font-display:swap;font-weight:700}

/* ---- Tokens ---- */
:root{--bg:#080d12;--panel:#0d151d;--panel2:#111c26;--ink:#edf0e9;--muted:#abb7b8;--faint:#7d8b8d;--line:#ffffff1f;
--accent:#a6e9e5;--copper:#dfac83;--ok:#8fe0a3;--warn:#f1c27d;--bad:#f08c8c;--radius:14px;--max:1380px}
*{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 THText,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
a{color:var(--accent);text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
img{max-width:100%;display:block}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#000;padding:8px 12px;border-radius:8px;z-index:9}
.skip:focus{left:8px}

/* ---- Header ---- */
.st-top{position:sticky;top:0;z-index:5;background:#080d12e6;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.st-top-in{max-width:var(--max);margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.st-brand{font:600 15px/1 THDisplay,sans-serif;letter-spacing:.24em;color:var(--ink);text-decoration:none}
.st-brand small{display:block;margin-top:5px;font-size:10px;letter-spacing:.3em;color:var(--copper)}
.st-nav{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto}
.st-nav a{font:600 12px/1 THDisplay,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:6px 0}
.st-nav a[aria-current=page],.st-nav a:hover{color:var(--accent)}

/* ---- Layout ---- */
main{max-width:var(--max);margin:0 auto;padding:30px 22px 80px}
.st-kicker{font:600 12px/1.2 THDisplay,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--copper);margin:0 0 10px}
h1{font:600 clamp(32px,5vw,58px)/1.05 THDisplay,sans-serif;margin:0 0 14px;letter-spacing:.01em}
h2{font:600 clamp(22px,3vw,30px)/1.15 THDisplay,sans-serif;margin:0 0 6px}
h3{font:600 18px/1.25 THDisplay,sans-serif;margin:0}
.st-lead{color:var(--muted);max-width:860px;margin:0 0 22px;font-size:17px}
.st-note{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);padding:16px 18px;margin:18px 0;color:var(--muted)}
.st-note strong{color:var(--ink)}
.st-note ul{margin:8px 0 0;padding-left:20px}
.st-summary{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 6px}
.st-stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px;min-width:150px}
.st-stat b{display:block;font:600 26px/1.1 THDisplay,sans-serif;color:var(--ink)}
.st-stat span{font-size:13px;color:var(--muted)}

/* ---- Waves and agent cards ---- */
.st-wave{margin:40px 0 0}
.st-wave-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:18px}
.st-wave-hint{font-size:14px;color:var(--muted)}
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:18px}
.st-card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.st-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.st-id{font:600 13px/1 THDisplay,sans-serif;letter-spacing:.2em;color:var(--copper)}
.st-card p{margin:0;color:var(--muted);font-size:14px}
.st-badge{flex:none;font:700 11px/1 THText,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:999px;border:1px solid var(--line);color:var(--faint);white-space:nowrap}
.st-badge.is-working{color:var(--warn);border-color:#f1c27d55}
.st-badge.is-review{color:var(--accent);border-color:#a6e9e555}
.st-badge.is-done{color:var(--ok);border-color:#8fe0a355}
.st-badge.is-error{color:var(--bad);border-color:#f08c8c55}
.st-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--faint)}
.st-meta b{color:var(--ink);font-weight:700}
.st-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.st-thumbs a{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:8px;background:#0003;border:1px solid var(--line)}
.st-thumbs img{width:100%;height:100%;object-fit:cover}
.st-empty{font-size:13px;color:var(--faint);border:1px dashed var(--line);border-radius:10px;padding:14px;text-align:center}
.st-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.st-btn{appearance:none;font:700 13px/1 THText,sans-serif;color:#061015;background:var(--accent);border:0;border-radius:10px;padding:11px 14px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:40px}
.st-btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.st-btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.st-btn[aria-disabled=true]{opacity:.45;pointer-events:none}
details.st-msg{border:1px solid var(--line);border-radius:10px;background:#0006}
details.st-msg summary{cursor:pointer;padding:10px 12px;font-size:13px;color:var(--muted)}
details.st-msg pre{margin:0;padding:0 12px 12px;white-space:pre-wrap;word-break:break-word;font:400 13px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--ink)}
.st-copied{font-size:12px;color:var(--ok);min-height:1em}

/* ---- Trailer scene board ---- */
.sc-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.sc-chips a{font:600 12px/1 THDisplay,sans-serif;letter-spacing:.08em;text-decoration:none;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:9px 12px;min-height:36px;display:inline-flex;align-items:center}
.sc-chips a:hover{color:var(--accent);border-color:#a6e9e555}
.sc-block{margin:46px 0 0;scroll-margin-top:90px}
.sc-block-head{border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:16px}
.sc-block-head .hi{color:var(--copper);font-style:italic;font-size:14px}
.sc-scene{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:18px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);margin:0 0 14px;scroll-margin-top:90px}
.sc-num{font:600 13px/1 THDisplay,sans-serif;letter-spacing:.16em;color:var(--copper)}
.sc-place{font:600 18px/1.3 THDisplay,sans-serif;margin:6px 0 8px}
.sc-seen{margin:0 0 10px;color:var(--muted);font-size:15px}
.sc-lines{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.sc-lines li{font-size:15px;border-left:2px solid var(--copper);padding-left:10px}
.sc-lines li span{display:block;font-size:12px;color:var(--faint)}
.sc-extra{margin-top:10px;font-size:13px;color:var(--faint)}
.sc-frames{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:10px;align-content:start}
.sc-frame{margin:0;background:#0004;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sc-frame a{display:block;aspect-ratio:16/9;background:#0003}
.sc-frame img{width:100%;height:100%;object-fit:cover}
.sc-frame figcaption{padding:8px 10px;font-size:12px;color:var(--muted)}
.sc-frame figcaption b{color:var(--ink)}
.sc-pending{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;border:1px dashed var(--line);border-radius:10px;color:var(--faint);font-size:13px;text-align:center;padding:12px}
.sc-black{background:#000;color:#555;border-style:solid}
.st-foot{max-width:var(--max);margin:0 auto;padding:26px 22px 40px;border-top:1px solid var(--line);color:var(--faint);font-size:13px}

@media (max-width:820px){
  .st-top{position:static}
  .sc-scene{grid-template-columns:1fr;padding:14px}
  .st-top-in{padding:12px 16px}
  main{padding:22px 16px 60px}
  .st-nav{margin-left:0;gap:12px}
  .st-thumbs{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ---- When may an agent start (added 2026-11-06) ---- */
.st-now{border-color:#a6e9e540}
.st-now p{margin:8px 0 0}
.st-now .st-now-foot{font-size:13px;color:var(--faint)}
.st-card p.st-when{font-size:13px;font-weight:600;border-radius:8px;padding:8px 10px;border:1px solid var(--line)}
.st-card p.st-when.is-ready{color:var(--ok);border-color:#8fe0a355}
.st-card p.st-when.is-wait{color:var(--warn);border-color:#f1c27d55}