/* shared/audio-ui.css — shared look for the ORCSGirls audio tools.
 *
 * Theme tokens + the control vocabulary (panels, groups, control atoms,
 * segmented pickers, buttons, help button, toast, modal) used by Image
 * Synth and Synth Lab. Load AFTER shared/components.css and BEFORE a
 * tool's own page CSS. Image Synth uses these `.au-*` classes directly;
 * Synth Lab keeps its `.sl-*` classes but points its `--sl-*` tokens at
 * these `--audio-*` ones (identical values), so both tools share one
 * palette. Accent colours (--primary-purple, --accent-*) come from the
 * site-wide style.css / chrome.css.
 *
 * Part of the audio-tools reuse plan (see future-work.html), Phase 2.
 */

/* Theme-aware palette. At :root so a help modal outside the tool wrapper
   inherits it; canvases stay dark (they're "instrument screens"). */
:root { --audio-panel:#fff; --audio-line:#e0d8f0; --audio-ink:#1a1a2e; --audio-muted:#6b5f7a; --audio-field:#faf8fe; }
html[data-theme="dark"] { --audio-panel:#1e1630; --audio-line:#3d2a6a; --audio-ink:#e8e0f8; --audio-muted:#9b8fb8; --audio-field:#160f28; }

.au-wrap { display:flex; flex-direction:column; gap:14px; margin:16px 0 24px; }

.au-panel { background:var(--audio-panel); border:1px solid var(--audio-line); border-radius:14px;
    padding:14px 16px; color:var(--audio-ink); }
.au-panel h2 { margin:0 0 10px; font-size:1rem; color:var(--primary-purple); letter-spacing:.02em; }

/* Transport / control rows */
.au-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.au-row + .au-row { margin-top:10px; }
.au-sep { flex:0 0 1px; align-self:stretch; background:var(--audio-line); margin:0 2px; }
.au-spacer { flex:1 1 auto; }

.au-btn { font-family:inherit; font-size:.9rem; font-weight:600; cursor:pointer;
    border:1.5px solid var(--audio-line); background:var(--audio-field); color:var(--audio-ink);
    border-radius:9px; padding:8px 14px; line-height:1; transition:border-color .15s, color .15s, background .15s, transform .05s; }
.au-btn:hover { border-color:var(--primary-purple); color:var(--primary-purple); }
.au-btn:active { transform:translateY(1px); }
.au-btn:disabled { opacity:.45; cursor:not-allowed; }
.au-btn.primary { background:var(--primary-purple); border-color:var(--primary-purple); color:#fff; }
.au-btn.primary:hover { filter:brightness(1.08); color:#fff; }
.au-btn.on { background:var(--accent-teal); border-color:var(--accent-teal); color:#fff; }
.au-btn.danger:hover { border-color:#c62828; color:#c62828; }

/* Logical groups tile side by side and wrap on narrow screens. */
.au-groups { display:flex; flex-wrap:wrap; gap:12px; }
/* Panels tile up to 3 across (the calc keeps 3 within 100% incl. the 12px gap)
   and a panel left alone on a row grows to fill it (flex-grow); min-width drops
   the count on narrower screens. Any panel can be dragged beside up to two others. */
.au-group { flex:1 1 calc(33.333% - 8px); min-width:240px; background:var(--audio-panel); border:1px solid var(--audio-line);
    border-radius:13px; padding:11px 14px 13px; }
.au-group > h3 { margin:0 0 9px; font-size:.7rem; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase; color:var(--primary-purple); }
.au-group .au-row { gap:12px 15px; }
.au-group.wide { flex-basis:340px; }
.au-group.full { flex-basis:100%; }

/* Movable panels (shared/js/panels.js): a drag grip + ◄ ► buttons in the
   group heading. The heading becomes a flex row so they sit beside the title. */
.au-group > h3 { display:flex; align-items:center; gap:3px; }
.au-grip { cursor:grab; color:var(--audio-muted); font-size:.95rem; line-height:1; user-select:none;
    touch-action:none; padding:0 1px; }
.au-grip:hover { color:var(--primary-purple); }
.au-grip:active { cursor:grabbing; }
.au-moves { margin-left:auto; display:inline-flex; gap:3px; align-items:center; }
.au-move { border:1px solid transparent; background:transparent; color:var(--audio-muted); cursor:pointer;
    font-size:1rem; line-height:1; padding:4px 8px; border-radius:6px; min-width:28px; }
.au-move:hover:not(:disabled) { color:var(--primary-purple); background:var(--audio-field); border-color:var(--audio-line); }
.au-move:disabled { opacity:.3; cursor:default; }
.au-move:not(.cross) + .au-move.cross { margin-left:5px; }   /* small gap between within-zone and cross-zone pairs */
.au-dragging { opacity:.55; outline:2px dashed var(--primary-purple); outline-offset:-2px; }
/* Slim drag bar for a panel with no heading of its own (scope group / keyboard). */
.au-drag-head { display:flex; align-items:center; min-height:20px; margin-bottom:6px; }
/* An emptied reorder zone stays a droppable strip so panels can be moved back. */
[data-reorder]:empty { min-height:46px; border:2px dashed var(--audio-line); border-radius:13px; }
/* On small screens dragging is off — keep the (bigger, tappable) move buttons,
   hide only the drag grip. */
@media (max-width:760px) {
    .au-grip { display:none; }
    .au-move { font-size:1.15rem; padding:7px 12px; min-width:40px; }
    .au-moves { gap:5px; }
}
/* Buttons that sit inline in a group row align to the control baseline. */
.au-group .au-row > .au-btn { align-self:flex-end; }

/* Plain control: caption on top, control below — no box of its own. */
.au-ctrl { display:inline-flex; flex-direction:column; gap:5px; font-size:.72rem; color:var(--audio-muted); }
.au-ctrl label { font-weight:700; letter-spacing:.03em; text-transform:uppercase; font-size:.66rem; }
.au-ctrl select, .au-ctrl input[type=range] { font-family:inherit; }
.au-ctrl select { padding:6px 8px; border:1.5px solid var(--audio-line); border-radius:8px;
    background:var(--audio-field); color:var(--audio-ink); font-size:.85rem; }
.au-ctrl input[type=range] { width:126px; accent-color:var(--primary-purple); }
.au-ctrl .val { color:var(--primary-purple); font-weight:700; font-variant-numeric:tabular-nums; }

/* Segmented picker (paint/erase, ear, source, waveform, etc.) */
.au-seg { display:inline-flex; border:1.5px solid var(--audio-line); border-radius:9px; overflow:hidden; }
.au-seg button { font-family:inherit; font-size:.85rem; font-weight:600; cursor:pointer; border:0;
    background:var(--audio-field); color:var(--audio-ink); padding:7px 11px; line-height:1; }
.au-seg button + button { border-left:1.5px solid var(--audio-line); }
.au-seg button.sel { background:var(--primary-purple); color:#fff; }

.au-note { margin:11px 2px 0; font-size:.8rem; color:var(--audio-muted); line-height:1.5; max-width:660px; }
.au-tagline { font-size:.82rem; color:var(--audio-muted); line-height:1.4; max-width:360px; }

/* Top toolbar: title + transport, no panel card. */
.au-topbar { display:flex; flex-wrap:wrap; align-items:center; gap:9px 11px; padding:2px 2px 0; }
.au-title { margin:0; font-family:'Montserrat',sans-serif; font-size:1.15rem; color:var(--primary-purple); }
.au-topbar .au-tagline { align-self:center; }

/* Circular help button */
.au-help-btn { width:26px; height:26px; border-radius:50%; border:2px solid var(--primary-purple);
    background:transparent; color:var(--primary-purple); font-weight:700; cursor:pointer; line-height:1; }
.au-help-btn:hover { background:var(--primary-purple); color:#fff; }

/* Help modal */
.au-modal { position:fixed; inset:0; background:rgba(20,10,40,.55); display:flex; align-items:center;
    justify-content:center; padding:20px; z-index:1000; }
.au-modal[hidden] { display:none; }
.au-modal-box { background:var(--audio-panel); color:var(--audio-ink); border-radius:16px; max-width:560px;
    width:100%; max-height:82vh; overflow:hidden; padding:0; box-shadow:0 20px 60px rgba(0,0,0,.35);
    display:flex; flex-direction:column; }
/* Purple header bar (matches Synth Lab's help modal) — pinned; only the body scrolls. */
.au-modal-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-shrink:0;
    padding:14px 20px; background:var(--primary-purple); color:#fff; }
.au-modal-head h2 { margin:0; color:#fff; font-size:1.1rem; font-family:'Montserrat',sans-serif; }
.au-modal-close { border:0; background:rgba(255,255,255,.15); font-size:1.3rem; line-height:1; cursor:pointer;
    color:#fff; border-radius:6px; padding:2px 10px; }
.au-modal-body { padding:18px 22px; overflow-y:auto; }
.au-modal-body h3 { margin:16px 0 6px; font-size:.98rem; color:var(--primary-purple); }
.au-modal-body h3:first-child { margin-top:0; }
.au-modal-body p, .au-modal-body li { line-height:1.55; color:var(--audio-ink); }
.au-modal-body ul { margin:6px 0 6px 18px; }
.au-modal-body b, .au-modal-body strong { color:var(--primary-purple); }
html[data-theme="dark"] .au-modal-body b, html[data-theme="dark"] .au-modal-body strong,
html[data-theme="dark"] .au-modal-body h3 { color:#c9a0ff; }

/* Page-level toast */
.au-toast { position:fixed; left:50%; top:74px; transform:translate(-50%,-10px);
    background:var(--audio-ink); color:#fff; padding:10px 18px; border-radius:10px; font-size:.9rem;
    opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease; z-index:1200; }
.au-toast.show { opacity:1; transform:translate(-50%,0); }

input[type=file].au-file { display:none; }