/* Paideia · Explorador de acordes — composição da tela.
   Só layout e densidade; cor vem de tokens.css, estilo de componente de ui.css. */
body {
  margin:0;
  background:var(--color-bg);
  color:var(--color-ink);
  font:var(--text-md)/1.4 var(--font-sans);
}
a { color:var(--color-primary-text); }
button,input,select,textarea { font:inherit; color:var(--color-ink); }
button,input,select,.file-label { min-height:var(--target); }
button {
  min-width:var(--target);
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  padding:7px 10px;
  cursor:pointer;
  line-height:var(--leading-tight);
}
button:hover { background:var(--color-wash); border-color:var(--color-line); }
button:disabled { opacity:.5; cursor:not-allowed; }
input,select,textarea {
  width:100%; min-width:0; padding:var(--space-2);
  border:1px solid var(--color-line); border-radius:var(--radius-sm);
  background:var(--color-surface);
}
select { font-size:var(--text-sm); }
textarea { font:var(--text-sm)/1.5 var(--font-mono); resize:vertical; }
label,legend { font-size:var(--text-sm); font-weight:600; display:block; margin-bottom:5px; }
fieldset { border:0; padding:0; min-width:0; margin:var(--space-3) 0; }
h1,h2,h3,p { margin:0; }
h1 { font-size:var(--text-lg); font-weight:600; }
h2 { font:var(--text-display)/1.1 var(--font-serif); overflow-wrap:anywhere; }
h3 { font-size:13px; font-weight:600; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* ---------- cabeçalho ---------- */
.masthead {
  display:flex; align-items:center; gap:18px; padding:10px var(--space-4);
  border-bottom:1px solid var(--color-line); background:var(--color-surface);
}
.masthead a { font-size:var(--text-sm); text-decoration:none; }
.masthead>span { margin-left:auto; font-size:var(--text-sm); color:var(--color-muted); }
.masthead h1 { letter-spacing:-.01em; }
.brand-dot { width:9px; height:9px; border-radius:50%; background:var(--color-primary); flex:none; }
main { max-width:1440px; margin:auto; padding:var(--space-3) var(--space-4) var(--space-6); }
.workspace { display:grid; grid-template-columns:minmax(260px,300px) minmax(0,1fr); gap:var(--space-5); align-items:start; }

/* ---------- catálogo ---------- */
.explore { min-width:0; }
.catalog-content { min-width:0; }
.roots { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:3px; }
.roots button { padding:var(--space-1); min-width:var(--target); background:transparent; }
.roots button:last-child { grid-column:span 2; }
.results {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px;
  max-height:calc(100dvh - 330px); min-height:180px; overflow:auto; padding:3px;
}
.results button {
  text-align:left; min-width:0; padding:var(--space-2); background:transparent;
  border-bottom:1px solid var(--color-line); border-radius:0;
}
.results button.selected { background:var(--color-primary); color:var(--color-on-primary); border-radius:var(--radius-sm); }
.results button:hover { background:var(--color-wash); }
.results button.selected:hover { background:var(--color-primary-hover); color:var(--color-on-primary); }
.results strong { display:block; white-space:nowrap; font:18px/1.25 var(--font-serif); }
.results small { display:block; font-size:10px; line-height:1.3; margin-top:2px; overflow-wrap:normal; }
.saved { border-top:1px solid var(--color-line); margin-top:var(--space-2); }
#saved-list { display:grid; gap:var(--space-1); }
#saved-list>div { display:flex; gap:var(--space-1); }
#saved-list button[data-entry] { flex:1; min-width:0; text-align:left; overflow-wrap:anywhere; }

/* ---------- inspeção ---------- */
.inspect { min-width:0; background:var(--color-surface); padding:var(--space-3) var(--space-4); border-radius:5px; border:1px solid var(--color-line); }
.input-row { display:flex; gap:6px; }
.input-row input { flex:1; }
.input-row button { flex-shrink:0; font-size:var(--text-sm); border-color:var(--color-line); }
.chord-heading { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-3) 0 var(--space-2); }
.chord-heading>div { min-width:0; }
.chord-heading p { font-size:13px; overflow-wrap:anywhere; }
#interval-analysis { font-size:var(--text-sm); color:var(--color-primary-text); margin-top:3px; }
.instrument-switch { display:flex; align-items:center; gap:var(--space-1); margin:var(--space-1) 0 var(--space-2); }
.instrument-switch span { font-size:var(--text-xs); color:var(--color-muted); margin-left:6px; }
.instrument-switch button { font-size:var(--text-sm); padding:6px 10px; }
.instrument-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.instrument-pane { min-width:0; }
.instrument-pane[data-instrument=piano] { order:0; }
.instrument-pane[data-instrument=guitar] { order:1; }
.instrument-pane h3 { margin-bottom:var(--space-1); }
.instrument-pane select { margin-bottom:5px; }
.instrument-pane>button { width:100%; margin:6px 0; }
.played { font-size:var(--text-sm); line-height:1.5; overflow-wrap:anywhere; min-height:36px; color:var(--color-muted); }

/* ---------- intervalos e ações ---------- */
.builder { border-top:1px solid var(--color-line); margin-top:var(--space-2); }
.intervals { display:flex; flex-wrap:wrap; gap:3px; }
.intervals button { font-size:var(--text-sm); padding:6px; min-width:var(--target); background:var(--color-bg); }
.actions,.note-keys { display:flex; flex-wrap:wrap; gap:5px; margin:var(--space-3) 0; }
.actions button,.file-label { font-size:var(--text-sm); border-color:var(--color-line); }
.micro { font-size:var(--text-sm); line-height:1.5; color:var(--color-muted); margin:var(--space-2) 0; }
.analysis { display:flex; flex-wrap:wrap; gap:var(--space-4); margin:var(--space-2) 0; }
.analysis dt { font-size:var(--text-xs); color:var(--color-muted); }
.analysis dd { margin:0; font-size:13px; }
#technical-details,.exchange { border-top:1px solid var(--color-line); margin-top:var(--space-2); }
.exchange { max-width:100%; padding:0 var(--space-1); }
.file-label {
  display:inline-flex; position:relative; align-items:center; border:1px solid var(--color-line);
  border-radius:var(--radius-sm); padding:var(--space-2); cursor:pointer; margin:0;
}
.file-label input { position:absolute; inset:0; opacity:0; cursor:pointer; }
#status { font-size:var(--text-sm); padding:var(--space-2) var(--space-1); color:var(--color-muted); overflow-wrap:anywhere; }
footer { font-size:10px; color:var(--color-muted); padding:var(--space-1); }

@media(max-width:1000px) and (min-width:761px) {
  .workspace { grid-template-columns:280px minmax(0,1fr); gap:var(--space-3); }
  .inspect { padding:10px; }
  .instrument-pair { gap:var(--space-2); }
  .instrument-switch span { display:none; }
}
@media(max-width:760px) {
  .masthead { padding:var(--space-2) 10px; gap:var(--space-3); }
  .masthead>span { font-size:10px; }
  main { padding:var(--space-1) var(--space-2) var(--space-3); }
  .workspace { display:flex; flex-direction:column; gap:var(--space-1); }
  .explore,.inspect { width:100%; }
  .catalog-content { padding:var(--space-2) 2px; }
  .roots { grid-template-columns:repeat(6,minmax(44px,1fr)); }
  .results { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:280px; padding:2px; }
  .results strong { font-size:16px; letter-spacing:-.3px; }
  .results small { font-size:10px; }
  .results button { padding:7px 5px; }
  .inspect { padding:var(--space-2); }
  .chord-heading { gap:var(--space-3); padding:10px 0 6px; }
  .chord-heading h2 { font-size:28px; }
  .instrument-switch { margin:0 0 var(--space-1); }
  .instrument-switch span { font-size:10px; }
  .instrument-pair { gap:var(--space-2); }
  .instrument-pane select { font-size:var(--text-xs); padding:5px; }
  .played { font-size:var(--text-xs); min-height:34px; }
  .input-row button { padding:6px; font-size:var(--text-xs); }
  .input-row input { width:0; }
  .builder { margin-top:var(--space-1); }
  .actions { margin:6px 0; }
  .actions button { flex:1; }
  .intervals { gap:3px; }
}
@media(max-width:350px) {
  .roots { grid-template-columns:repeat(6,minmax(44px,1fr)); gap:2px; }
  .results { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .instrument-switch span { display:none; }
  .masthead>span { font-size:9px; }
  .instrument-pair { gap:6px; }
}
@media(prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto!important; }
}