/*
 * Eddi component layer — the single source for both components.html
 * (the reference) and design-system/preview/*.html (the screen mockups).
 * Every value resolves from tokens.css. No literals except #fff on the
 * primary button, where the ratio is what makes the button legible.
 * Dark-only (D5).
 */

/* ── Button ─────────────────────────────────────────────────── */
.btn { font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm);
       height: var(--control-height); padding: 0 var(--space-4); border-radius: var(--radius-md);
       border: var(--border-solid); cursor: pointer; display: inline-flex; align-items: center;
       gap: var(--space-2); white-space: nowrap;
       transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast); }
/* Resting = accent-secondary so the white label clears 4.5:1 (5.75:1).
   Bright pink is the hover, not the default — #e91e8c on #fff is only 4.18:1. */
.btn-primary { background: var(--color-accent-secondary); border-color: var(--color-accent-secondary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--color-accent); border-color: var(--color-accent); }
.btn-secondary { background: transparent; color: var(--color-foreground); }
.btn-secondary:hover:not(:disabled) { background: var(--color-surface-subtle); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--color-muted); }
.btn-ghost:hover:not(:disabled) { color: var(--color-foreground); }
.btn-danger { background: transparent; border-color: var(--color-error); color: var(--color-error); }
.btn-danger:hover:not(:disabled) { background: var(--color-error); color: #fff; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-sm { height: var(--control-height-sm); padding: 0 var(--space-3); font-size: var(--text-xs); }

/* ── Stage dots ─────────────────────────────────────────────── */
.stages { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.stage { display: flex; align-items: center; gap: var(--space-2);
         padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill);
         color: var(--color-muted); cursor: pointer; border: 1px solid transparent;
         background: none; font-family: var(--font-ui); font-weight: 500; font-size: var(--text-sm); }
.stage .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-faint); }
.stage.active { color: var(--color-foreground); background: var(--color-accent-soft); border-color: var(--color-accent); }
.stage.active .dot { background: var(--color-accent); }
.stage.done .dot { background: var(--color-success); }
.stage:disabled { cursor: not-allowed; opacity: 0.5; }

/* ── Card ───────────────────────────────────────────────────── */
.card { background: var(--color-surface); border: var(--border-solid);
        border-radius: var(--radius-lg); padding: var(--space-4); }
.card-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.card-title { font-weight: 600; font-size: var(--text-base); margin: 0; flex: 1; }
.card-meta { color: var(--color-muted); font-size: var(--text-xs); font-family: var(--font-mono);
             font-variant-numeric: tabular-nums; }
.card-actions { display: flex; gap: var(--space-1); }
.drag-handle { cursor: grab; color: var(--color-faint); padding: var(--space-1);
               background: none; border: none; font-size: var(--text-base); line-height: 1; }
.drag-handle:hover { color: var(--color-foreground); }

/* ── Field ──────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-3); }
.field label { font: var(--micro-label); letter-spacing: var(--micro-label-letter-spacing);
               text-transform: uppercase; color: var(--color-muted); }
/* Control edges use border-strong — the fill differs from the card by only
   1.17:1, so the border is what identifies the control (WCAG 1.4.11). */
input[type="text"], input[type="url"], textarea, select {
      background: var(--color-background); color: var(--color-foreground);
      border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-sm);
      padding: var(--space-2) var(--space-3); font-family: var(--font-ui); font-size: var(--text-sm); }
textarea { min-height: 88px; resize: vertical; line-height: var(--line-height-body); }
select { height: var(--control-height); }

/* ── Badge ──────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2);
         border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600;
         border: var(--border-width) solid var(--color-border); color: var(--color-muted); }
.badge .glyph { font-size: 10px; }
.badge-success { color: var(--color-success); border-color: var(--color-success); }
.badge-warning { color: var(--color-warning); border-color: var(--color-warning); }
.badge-error { color: var(--color-error); border-color: var(--color-error); }
.badge-info { color: var(--color-info); border-color: var(--color-info); }
.badge-muted { color: var(--color-muted); }

/* ── Tabs ───────────────────────────────────────────────────── */
.tabs { display: flex; gap: 0; border-bottom: var(--border-solid); }
.tab { padding: var(--space-2) var(--space-4); background: none; border: none;
       color: var(--color-muted); font-family: var(--font-ui); font-weight: 600;
       font-size: var(--text-sm); cursor: pointer; border-bottom: 2px solid transparent; }
.tab[aria-selected="true"] { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* ── Toast ──────────────────────────────────────────────────── */
.toast { position: fixed; bottom: var(--space-6); right: var(--space-6);
         background: var(--color-surface-elevated); border: var(--border-solid);
         border-left: 3px solid var(--color-accent); border-radius: var(--radius-md);
         padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-lg); max-width: 320px; }
.toast.success { border-left-color: var(--color-success); }
.toast.error { border-left-color: var(--color-error); }

/* ── Progress rows ──────────────────────────────────────────── */
.progress-rows { font-family: var(--font-mono); font-size: var(--text-xs);
                 font-variant-numeric: tabular-nums; }
.progress-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; }
.progress-row .state { width: 16px; text-align: center; }

/* ── Empty state ────────────────────────────────────────────── */
.empty { border: 1px dashed var(--color-border); border-radius: var(--radius-lg);
         padding: var(--space-12); text-align: center; color: var(--color-muted); }

/* ── Modal ── native <dialog>: focus trap, Escape, and focus restore
   are browser behaviour, so none of it is ours to reimplement. */
dialog.modal { background: var(--color-surface-elevated); color: var(--color-foreground);
      border: var(--border-solid); border-radius: var(--radius-lg); padding: 0;
      max-width: 520px; width: calc(100% - var(--space-8)); box-shadow: var(--shadow-lg);
      /* The UA centres a modal dialog with margin:auto; a page-level `* { margin: 0 }`
         reset (public/style.css) wipes it out and the dialog lands top-left. */
      margin: auto; }
dialog.modal::backdrop { background: rgb(0 3 10 / 0.72); }
.modal-header { display: flex; justify-content: space-between; align-items: center;
      gap: var(--space-4); padding: var(--space-4); border-bottom: var(--border-solid); }
.modal-header h2 { font-size: var(--text-lg); margin: 0; border: none; padding: 0; }
.modal-body { padding: var(--space-4); }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--space-2);
      padding: var(--space-4); border-top: var(--border-solid); }

/* ── Switch — binary setting (captions, S1) ─────────────────── */
.switch { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 34px; height: 20px; border-radius: var(--radius-pill);
         background: var(--color-surface-subtle);
         border: var(--border-width) solid var(--color-border-strong);
         position: relative; transition: background var(--duration-fast) var(--ease-out); }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
         border-radius: 50%; background: var(--color-faint);
         transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast); }
/* Blue, not pink: a toggle is a setting, not an action, and the pink budget is
   two per screen (DESIGN.md). Blue is the calm accent for state like this. */
.switch input:checked + .track { background: var(--color-blue-soft); border-color: var(--color-blue); }
.switch input:checked + .track::after { transform: translateX(14px); background: var(--color-blue); }
/* The input is visually hidden, so the ring has to land on the track it drives. */
.switch input:focus-visible + .track { box-shadow: var(--focus-ring); }

/* ── Track row — one library item with inline actions (BGM, S1) ─ */
.track-row { display: flex; align-items: center; justify-content: space-between;
             gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--border-solid); }
.track-row:last-child { border-bottom: none; }
.track-row .actions { display: flex; align-items: center; gap: var(--space-2); }

/* ── Micro-label — the Ermeutika signature ──────────────────── */
.micro { font: var(--micro-label); letter-spacing: var(--micro-label-letter-spacing);
         color: var(--color-accent); text-transform: uppercase; }
.micro-muted { color: var(--color-muted); }

/* ── Layout utilities (P4a-3, ported from design-system/preview/screen.css) ──
   Generic layout vocabulary shared by every S2-S6 screen. Only the
   utilities — .topbar/.nav/.brand/.lede stay preview-shell-only, production
   pages keep their own <header><nav> in style.css. */
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.rowline { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between;
          gap: var(--space-3); flex-wrap: wrap; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             gap: var(--space-3); }
.note { color: var(--color-faint); font-size: var(--text-xs); }
.divider { border: none; border-top: var(--border-solid); margin: var(--space-4) 0; }

/* Segmented radio — replaces the ad-hoc .radio-group in public/style.css */
.segmented { display: inline-flex; border: var(--border-width) solid var(--color-border-strong);
             border-radius: var(--radius-md); overflow: hidden; }
.segmented label { padding: var(--space-2) var(--space-4); cursor: pointer;
                   color: var(--color-muted); font-weight: 600; }
.segmented label:has(input:checked) { background: var(--color-accent-soft);
                                      color: var(--color-foreground); }
.segmented label:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.segmented input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Disclosure — inheritance override panel (S2) */
details.disclosure { border: var(--border-solid); border-radius: var(--radius-lg);
                     background: var(--color-surface); }
details.disclosure > summary { padding: var(--space-3) var(--space-4); cursor: pointer;
                               font-weight: 600; list-style: none;
                               display: flex; align-items: center; justify-content: space-between;
                               gap: var(--space-3); }
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::after { content: "▾"; color: var(--color-muted); }
details.disclosure[open] > summary::after { content: "▴"; }
details.disclosure > summary:focus-visible { box-shadow: var(--focus-ring); }
.disclosure-body { padding: 0 var(--space-4) var(--space-4); }

/* Disclosure — quiet variant (Ritmo "Avanzate"): a small text toggle, no panel, chevron on
   the left. Added ALONGSIDE .disclosure (class="disclosure disclosure-quiet"), not instead of
   it, so the marker-hiding and [open] mechanics stay shared; only the look is overridden. */
details.disclosure-quiet { border: none; background: transparent; }
details.disclosure-quiet > summary { padding: var(--space-1) 0; font-weight: 400;
                                     font-size: var(--text-sm); color: var(--color-muted);
                                     justify-content: flex-start; gap: var(--space-2); }
details.disclosure-quiet > summary::after { content: none; }
/* [open] variant needed separately: details.disclosure[open] > summary::after (the base
   component) has higher specificity (0,2,3) than the plain rule above (0,1,3) and would
   otherwise win once open, showing a stray "▴" next to the left-side chevron. */
details.disclosure-quiet[open] > summary::after { content: none; }
details.disclosure-quiet > summary::before { content: "▸"; }
details.disclosure-quiet[open] > summary::before { content: "▾"; }
details.disclosure-quiet .disclosure-body { padding: var(--space-2) 0 0; }

.table-wrap { overflow-x: auto; border: var(--border-solid);
              border-radius: var(--radius-lg); background: var(--color-surface); }

/* Brand kit palette swatches (P4a-4, E-12) — moved here from brand-kit.html's
   page-local <style> once studio.html's Brand Kit tab became a second consumer. */
.swatches { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.sw { display: flex; flex-direction: column; gap: var(--space-1);
      font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.sw i { display: block; width: var(--space-16); height: var(--space-8); border-radius: var(--radius-sm);
        border: var(--border-solid); }

[hidden] { display: none !important; }