/* Audio Extractor — studio layout, timeline, extract panel.
   Shared rules live in style.css; only this tool's own pieces live here.
   The timeline pieces (.transport, .tlane, .hdl…) are this tool's for now;
   when a second tool adopts the timeline they move to the shared sheet. */
:root{--sel:#1f9d66;--cut:#e06c00;--wave-dim:#c3ccd9}
[data-theme="dark"]{--sel:#45cf8f;--cut:#f2a950;--wave-dim:#39424f}

/* staged flow: hero until a file arrives, studio after */
main[data-stage="empty"] .studio{display:none}
main[data-stage="ready"] .ae-hero{display:none}
.ae-error{margin:12px 0 0;border:1px solid #e5a09c;background:#fdecea;color:#8c1d18;border-radius:9px;padding:9px 12px;font-size:.92rem}
[data-theme="dark"] .ae-error{border-color:#6e3532;background:#33161a;color:#f2b8b5}

/* studio: row 1 = video + extract, row 2 = timeline at full width */
.studio{grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"vid ext" "tl tl"}
.studio .ae-vid{grid-area:vid}
.studio .ae-ext{grid-area:ext}
.studio .ae-tl{grid-area:tl}
@media (max-width:900px){
  .studio{grid-template-columns:1fr;grid-template-areas:"vid" "tl" "ext"}
}

/* panel 1: your video */
.video-wrap{position:relative;border-radius:10px;background:#000;overflow:hidden;aspect-ratio:16/9}
.video-wrap video{width:100%;height:100%;display:block;object-fit:contain}
.vdur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.72);color:#fff;font-size:.78rem;padding:1px 7px;border-radius:6px}
.fname{font-weight:700;margin:10px 0 8px;word-break:break-all}
.ae-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.ae-meta div{background:var(--bg-soft);border:1px solid var(--line);border-radius:9px;padding:6px 9px}
.ae-meta span{display:block;font-size:.74rem;color:var(--muted)}
.ae-meta b{font-size:.86rem}
@media (max-width:640px){.ae-meta{grid-template-columns:1fr 1fr}}
.track-row{margin-bottom:12px}
.track-row label{font-size:.85rem;color:var(--muted);display:block;margin-bottom:5px}
.track-row select{width:100%;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit}
.track-note{font-size:.82rem;color:var(--muted);margin:6px 0 0}

/* panel 3: extract */
.getbox{background:var(--accent);border:1px solid var(--accent-border);border-radius:9px;padding:9px 11px;margin-bottom:12px}
.getbox span{display:block;font-size:.74rem;color:var(--muted)}
.getbox b{font-size:.95rem}
.xlab{font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.fmtrow{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);border-radius:9px;padding:8px 10px;margin-bottom:8px;background:var(--surface);cursor:pointer}
.fmtrow.sel{border-color:var(--brand);background:var(--accent)}
.fmtrow input{margin-top:4px;accent-color:var(--brand)}
.fmtrow .fmt-body b{font-size:.92rem;display:block;line-height:1.35}
.fmtrow .fmt-body span{font-size:.82rem;color:var(--muted)}
.fmtrow.off{opacity:.55;cursor:default}
.xnote{font-size:.86rem;color:var(--muted);margin:2px 0 14px}
.ae-ext .btn{width:100%}
.ext-status{margin:12px 0 0;border:1px solid var(--accent-border);background:var(--accent);border-radius:9px;padding:8px 11px;font-size:.9rem}
.ext-status.bad{border-color:#e5a09c;background:#fdecea;color:#8c1d18}
[data-theme="dark"] .ext-status.bad{border-color:#6e3532;background:#33161a;color:#f2b8b5}

/* panel 2: timeline */
.transport{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.tbtn{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--surface);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.tbtn svg{width:16px;height:16px;fill:var(--ink)}
.tbtn.play{background:var(--brand-bg);border-color:var(--brand-bg)}
.tbtn.play svg{fill:#fff}
.tbtn:disabled{opacity:.45;cursor:default}
.tcode{font-size:.92rem;color:var(--muted);white-space:nowrap}
.tcode b{color:var(--ink)}
.tsp{flex:1}
.zoomlab{font-size:.85rem;color:var(--muted)}
#zoomRange{width:110px;accent-color:var(--brand)}
@media (max-width:640px){#zoomRange{width:64px}}
.tlane{border:1px solid var(--line);border-radius:10px;background:var(--bg-soft);padding:8px 10px 10px}
.wave-wrap{position:relative;height:134px;touch-action:none}
@media (max-width:640px){.wave-wrap{height:110px}}
.wave-wrap canvas{width:100%;height:100%;display:block}
.playhead{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--brand);z-index:3;pointer-events:none}
.playhead i{position:absolute;top:0;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top:7px solid var(--brand)}
.hdl{position:absolute;top:0;bottom:0;width:15px;margin-left:-7.5px;z-index:4;cursor:ew-resize}
.hdl:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;background:var(--cut);border-radius:2px}
.hdl .htab{position:absolute;top:0;left:50%;transform:translateX(-50%);width:17px;height:13px;border-radius:0 0 5px 5px;background:var(--cut);display:flex;align-items:center;justify-content:center;gap:2.5px}
.hdl .htab i{width:2px;height:7px;background:rgba(255,255,255,.9);border-radius:1px}
.hdl:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.selfields{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.selfields label{font-size:.88rem;color:var(--muted);display:inline-flex;align-items:center;gap:7px}
.tin{width:88px;border:1px solid var(--line);border-left:3px solid var(--cut);background:var(--surface);border-radius:7px;padding:4px 9px;font-weight:600;color:var(--ink);font:inherit;font-size:.9rem}
.sellen{font-size:.9rem;color:var(--muted)}
.sellen b{color:var(--ink)}
.legend{font-size:.82rem;color:var(--muted)}
.legend i{display:inline-block;vertical-align:middle;margin:0 4px 0 8px}
.legend i:first-child{margin-left:0}
.lg-sel{width:14px;height:9px;border-radius:2px;background:var(--sel)}
.lg-cut{width:3px;height:12px;background:var(--cut)}
.lg-ph{width:2px;height:12px;background:var(--brand)}
.tnote{margin:8px 0 0;font-size:.86rem;color:var(--muted)}