/* Audio Trimmer — studio layout and trim panel.
   Shared rules live in style.css (the timeline and the action-panel kit
   included); only this tool's own pieces live here. */

/* staged flow: hero until a file arrives, studio after */
main[data-stage="empty"] .studio{display:none}
main[data-stage="ready"] .at-hero{display:none}
.at-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"] .at-error{border-color:#6e3532;background:#33161a;color:#f2b8b5}

/* studio: timeline + file strip on the left, trim panel on the right */
.studio{grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"tl ext" "file ext"}
.studio .at-tl{grid-area:tl}
.studio .at-file{grid-area:file}
.studio .at-ext{grid-area:ext}
@media (max-width:900px){
  .studio{grid-template-columns:1fr;grid-template-areas:"tl" "file" "ext"}
}

/* file strip */
.at-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.at-meta div{background:var(--bg-soft);border:1px solid var(--line);border-radius:9px;padding:6px 9px}
.at-meta span{display:block;font-size:.74rem;color:var(--muted)}
.at-meta b{font-size:.86rem}
@media (max-width:640px){.at-meta{grid-template-columns:1fr 1fr}}

/* trim panel */
.at-modes{display:flex;gap:8px;margin-bottom:10px}
.chip-btn{flex:1;font:inherit;font-size:.88rem;font-weight:700;padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer}
.chip-btn.on{border-color:var(--brand);background:var(--accent);color:var(--brand)}
.at-snap{margin-bottom:6px}
.at-fades{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.at-fades label{font-size:.85rem;color:var(--muted);display:flex;flex-direction:column;gap:5px}
.at-fades select,.at-bitrate select{padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit}
.at-bitrate{font-size:.85rem;color:var(--muted);display:flex;align-items:center;gap:9px;margin:2px 0 10px}
.at-bitrate[hidden]{display:none}
.at-ext .btn{width:100%}
.at-ext .bar-track{max-width:none;margin-top:10px}

/* result */
.at-result{margin-top:12px;border:1px solid var(--accent-border);background:var(--accent);border-radius:9px;padding:10px 12px}
.at-result-text{margin:0 0 8px;font-size:.92rem}
.at-result audio{width:100%;margin-bottom:10px}
.at-result .btn{text-align:center}
.at-loop{flex:none;padding:5px 14px;font-size:.82rem}