/* Paideia — biblioteca de componentes compartilhada.
   Consome apenas tokens semânticos de tokens.css (nenhum hex aqui).
   Companheiros: ui.js (primitivos) e instrument.js (projeções musicais). */

/* Base mínima da biblioteca: caixa previsível para qualquer consumidor. */
*,*::before,*::after { box-sizing:border-box; }

ui-disclosure,ui-choice-group { display:block; min-width:0; }
ui-disclosure > [data-ui-panel][hidden],select[hidden] { display:none!important; }

/* ---------- disclosure ---------- */
[data-ui-toggle] {
  display:flex; align-items:center; gap:var(--space-2); width:100%; min-height:var(--target);
  border:0; border-bottom:1px solid var(--color-line); padding:10px 0; background:transparent;
  color:var(--color-ink); text-align:left;
  font:600 13px/1.4 var(--font-sans); cursor:pointer;
}
[data-ui-toggle]:hover { background:var(--color-wash); }
[data-ui-toggle] [data-ui-meta] { color:var(--color-muted); font-size:var(--text-sm); font-weight:400; }
[data-ui-toggle][aria-expanded="true"] { color:var(--color-primary-text); }
.ui-disclosure-indicator { margin-left:auto; width:24px; text-align:center; font-size:20px; font-weight:400; }

/* ---------- ações ---------- */
.ui-action {
  min-width:var(--target); min-height:var(--target); border-radius:var(--radius-sm);
  padding:var(--space-2) var(--space-3); font:inherit; cursor:pointer;
}
.ui-action--primary { background:var(--color-primary); color:var(--color-on-primary); border:1px solid var(--color-primary-line); font-weight:600; }
.ui-action--secondary { background:var(--color-surface); color:var(--color-ink); border:1px solid var(--color-line); }
.ui-action--quiet { background:transparent; color:var(--color-ink); border:1px solid transparent; }
.ui-action:hover { background:var(--color-wash); color:var(--color-ink); }
.ui-action--primary:hover { background:var(--color-primary-hover); color:var(--color-on-primary); }
.ui-action:disabled { opacity:.35; cursor:not-allowed; }
/* Seleção: um único primário, sem cor extra. */
.ui-action[aria-pressed="true"] {
  background:var(--color-primary); color:var(--color-on-primary);
  border-color:var(--color-primary-line); font-weight:600;
}
.ui-action[aria-pressed="true"]:hover { background:var(--color-primary-hover); color:var(--color-on-primary); }

:where(button,input,select,textarea,a):focus-visible { outline:2px solid var(--color-focus); outline-offset:3px; }

/* ---------- stepper de alternativas ---------- */
.ui-stepper {
  display:grid; grid-template-columns:var(--target) minmax(0,1fr) var(--target);
  gap:2px; align-items:stretch; border:1px solid var(--color-line);
  border-radius:var(--radius-sm); min-height:56px;
}
.ui-stepper > button { padding:var(--space-1); font-size:18px; align-self:stretch; border:0; min-width:var(--target); }
.ui-stepper-text { display:flex; flex-direction:column; justify-content:center; gap:2px; padding:var(--space-2) 2px; min-width:0; }
.ui-stepper-count { font:600 var(--text-xs)/1.3 var(--font-sans); color:var(--color-primary-text); }
.ui-stepper-description { font:var(--text-xs)/1.35 var(--font-sans); color:var(--color-muted); overflow-wrap:anywhere; }
.ui-stepper:focus-within { border-color:var(--color-primary-line); }

/* ---------- estado, erro e avisos ---------- */
#status.error {
  color:var(--color-primary-text); background:var(--color-primary-wash);
  border:1px solid var(--color-primary-line);
}
#status.error::before { content:'! '; font-weight:700; }

/* ---------- instrumentos musicais ---------- */
/* Aa floats above the instrument; no technical note overlay covers its keys. */
music-instrument { position:relative; }
.instrument-label-toggle {
  position:absolute; top:0; right:0; z-index:2;
  width:var(--target); height:var(--target); min-width:0;
  display:grid; place-items:center; padding:0; border:0; background:transparent;
  /* Flutua inteiramente acima do diagrama: zero linha no topo, zero tecla coberta. */
  transform:translateY(-100%);
}
.instrument-label-toggle:hover { background:transparent; border:0; }
.instrument-label-bubble {
  display:grid; place-items:center; width:28px; height:28px;
  border-radius:var(--radius-pill); border:1px solid var(--color-line);
  background:var(--color-surface); color:var(--color-muted);
  font:600 10px/1 var(--font-sans);
}
.instrument-label-toggle:hover .instrument-label-bubble { border-color:var(--color-primary-line); color:var(--color-primary-text); }
.instrument-label-toggle[aria-pressed="true"] .instrument-label-bubble {
  background:var(--color-primary); border-color:var(--color-primary-line); color:var(--color-on-primary);
}
music-instrument.diagram { display:block; height:auto; overflow:visible; margin:0 0 var(--space-2); }
.instrument-stage { display:flex; align-items:center; justify-content:center; height:182px; min-width:0; }
music-instrument .instrument-stage svg { width:100%; max-width:100%; max-height:180px; }
music-instrument .instrument-stage svg.guitar { width:auto; height:180px; max-height:180px; }
.guitar line { stroke:var(--color-muted); stroke-width:1; }
.guitar .fret { opacity:.7; }
.guitar .nut { stroke-width:2.2; }
.guitar .fret-offset { font-size:10px; fill:var(--color-muted); }
.guitar text { fill:var(--color-ink); font:10px var(--font-sans); }
.guitar .tuning-label { font-size:9px; fill:var(--color-muted); }
.guitar .tuning-label.muted { opacity:.4; }
.guitar .string.muted { opacity:.25; }
.guitar .fretted-note { fill:var(--color-primary); }
.guitar .open-note { fill:none; stroke:var(--color-primary-line); stroke-width:1.8; }
.guitar .open-label { fill:var(--color-primary-text); font-size:10px; font-weight:600; }
.guitar .muted-mark { font-size:19px; font-weight:700; fill:var(--color-ink); }
.guitar .dot-text { fill:var(--color-on-primary); font-size:9px; font-weight:600; }
.piano rect { stroke:var(--color-diagram-line); stroke-width:.6; }
.piano .white rect { fill:var(--color-diagram-key); }
.piano .black rect { fill:var(--color-diagram-key-black); }
.piano .active rect,.piano .note-hit.selected rect {
  fill:var(--color-diagram-active); stroke:var(--color-diagram-active-ring); stroke-width:1.2;
}
.piano text { font:6px var(--font-sans); fill:var(--color-diagram-active-ink); }
.note-hit { cursor:pointer; }
.note-hit .pitch-label { pointer-events:none; }
.fret-hitbox { fill:transparent; stroke:none; pointer-events:all; }
.guitar .note-hit .pitch-label { font-size:8px; }
.guitar .note-hit:not(.selected) .pitch-label { fill:var(--color-muted); }
.guitar .note-hit.selected .fretted-note { fill:var(--color-primary); stroke:var(--color-diagram-active-ring); stroke-width:1; }
.guitar .note-hit.selected .dot-text { fill:var(--color-on-primary); }
.guitar .note-hit .open-note:not(.active-open) { stroke:var(--color-line); }
.guitar .note-hit.selected .open-note.active-open { stroke:var(--color-primary-line); }
.piano .white:not(.active) .pitch-label { fill:var(--color-muted); }
.piano .black .pitch-label { fill:var(--color-surface); }
.piano .note-hit.selected rect { fill:var(--color-diagram-active); }
/* Tecla PRETA marcada: mesma marca, com contorno próprio. Em paleta sem matiz
   (mono) o preenchimento sozinho não se afasta da tecla preta; o contorno separa. */
.piano .black.active rect,.piano .black.note-hit.selected rect {
  fill:var(--color-diagram-active-black); stroke:var(--color-diagram-active-ring); stroke-width:1.6;
}
/* A marca nunca leva texto claro: tinta escura sobre a primária (>=4,5:1 em toda paleta). */
.piano .note-hit.selected .pitch-label { fill:var(--color-diagram-active-ink); }
.piano .black.active .pitch-label,.piano .black.note-hit.selected .pitch-label { fill:var(--color-diagram-active-black-ink); }
.note-hit:focus { outline:none; }
.piano .note-hit:focus rect,.piano .note-hit.is-playing rect { stroke:var(--color-primary-line); stroke-width:2; fill:var(--color-primary-soft); }
.guitar .note-hit:focus .fret-hitbox,.guitar .note-hit.is-playing .fret-hitbox { fill:var(--color-primary-wash); stroke:var(--color-primary-line); stroke-width:1; }
.hide-note-labels .pitch-label { display:none; }
/* Always identify open strings and pressed fingers. Aa reveals other positions. */
music-instrument.hide-note-labels .guitar .selected .pitch-label,
music-instrument.hide-note-labels .guitar [data-fret="0"] .pitch-label { display:block; }
.guitar .neck-gap path { fill:none; stroke:var(--color-muted); stroke-width:1.4; }
.guitar .neck-gap { pointer-events:none; }

/* ---------- galeria de componentes ---------- */
.component-lab { max-width:960px; margin:auto; padding:var(--space-6) var(--space-4); font:var(--text-md)/1.5 var(--font-sans); color:var(--color-ink); background:var(--color-bg); }
.component-lab h1 { font-size:var(--text-xl); margin:0 0 var(--space-2); }
.component-lab h2 { font:600 15px/1.4 var(--font-sans); margin:var(--space-6) 0 var(--space-3); }
.component-lab .lab-row { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; }
.component-lab ui-disclosure { max-width:560px; }
.component-lab [data-ui-panel] { padding:var(--space-3) 0; }
.component-lab .ui-stepper { max-width:420px; }
.component-lab p { color:var(--color-muted); }
.component-lab .token-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:var(--space-2); }
.component-lab .token { padding:var(--space-4) var(--space-2); border:1px solid var(--color-line); font-size:var(--text-xs); }
.component-lab .swatch-primary { background:var(--color-primary); color:var(--color-on-primary); }
.component-lab .swatch-soft { background:var(--color-primary-soft); color:var(--color-primary-text); }
.component-lab .swatch-text { color:var(--color-primary-text); }
.palette-bar { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; }
.library-link { font-size:var(--text-xs); text-decoration:none; }

/* ---------- integração com a superfície antiga ---------- */
.instrument-pair .ui-stepper { margin-bottom:var(--space-2); }
#catalog-panel > [data-ui-toggle] { margin-bottom:var(--space-2); }
#catalog-panel [data-ui-meta]:last-of-type { margin-left:auto; }
#technical-details > [data-ui-toggle],#exchange-details > [data-ui-toggle],.saved > [data-ui-toggle] { color:var(--color-muted); font-weight:500; }
.builder-heading { display:flex; align-items:baseline; justify-content:space-between; margin:var(--space-3) 0 var(--space-2); font-size:13px; }
.builder-heading span { font-size:var(--text-xs); font-weight:400; color:var(--color-muted); }

@media(max-width:760px) {
  .instrument-stage { height:166px; }
  music-instrument .instrument-stage svg.guitar { height:164px; max-height:164px; }
  .library-link { font-size:10px; }
  .masthead { flex-wrap:wrap; }
  .masthead h1 { margin-right:auto; }
  #catalog-panel > [data-ui-toggle] { margin:0; padding:10px var(--space-1); }
  .ui-stepper { min-height:76px; }
  .ui-stepper-description { font-size:10px; }
  .component-lab { padding:var(--space-4) var(--space-2); }
}