/* Cópia fiel de design/components/bundle.css (bin/build-design.php). Não edite à mão. */
/* Cantário — classes de referência e componentes.
   Cores, espaços e raios vêm de tokens.css (gerado de tokens.json); aqui ficam só os valores próprios de cada componente. */

/* O kit de marca chama as famílias de --ct-font-ui e --ct-font-display; aqui elas apontam para as do sistema. */
:root { --ct-font-ui: var(--font-ui); --ct-font-display: var(--font-display); }

/* ---------- Base ---------- */
.ct-ui { font-family: var(--font-ui); font-size: 16px; line-height: 1.5; color: var(--ct-ink); background: var(--ct-ivory); }
.ct-heading { font-family: var(--font-display); font-weight: 500; font-variation-settings: 'opsz' 72, 'SOFT' 30, 'WONK' 0; }
/* O arquivo variável da Fraunces abre com WONK 1 e SOFT 0: o título de página precisa dos três eixos fixados. */
.ct-page-title { font-variation-settings: 'opsz' 72, 'SOFT' 30, 'WONK' 0; }
.ct-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-space-2); }
/* Cartão: superfície clara sobre ct-ivory, separada por linha, sem sombra. */
.ct-card { box-sizing: border-box; border: 1px solid var(--ct-line); border-radius: var(--ct-radius-card); background: var(--ct-white); }
/* Rótulo pequeno de apoio, em caixa alta: cabeçalho de coluna, caminho, nome de trecho. */
.ct-label { margin: 0; color: var(--ct-muted); font: 600 14px/20px var(--font-ui); text-transform: uppercase; }

/* ---------- Button ---------- */
.ct-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ct-space-1);
  box-sizing: border-box; min-height: 44px; padding: 10px 18px;
  border: 1px solid transparent; border-radius: var(--ct-radius-control);
  background: var(--ct-green); color: var(--ct-white);
  font: 600 16px/1.4 var(--font-ui); text-decoration: none; cursor: pointer;
}
.ct-button:hover { background: var(--ct-greenhover); }
.ct-button:focus-visible { outline: 2px solid var(--ct-green); outline-offset: 3px; }
.ct-button--secondary { background: var(--ct-white); color: var(--ct-green); border-color: var(--ct-border); }
.ct-button--secondary:hover { background: var(--ct-sage); }
.ct-button:disabled, .ct-button[aria-disabled="true"] { background: var(--ct-pale); color: var(--ct-muted); border-color: transparent; cursor: not-allowed; }
.ct-button--text { padding-inline: 0; border-color: transparent; background: none; color: var(--ct-green); font-weight: 500; }
.ct-button--text:hover { background: none; text-decoration: underline; }
.ct-button--text:disabled, .ct-button--text[aria-disabled="true"] { background: none; color: var(--ct-muted); text-decoration: none; }

/* ---------- Input ---------- */
.ct-input {
  box-sizing: border-box; width: 100%; min-height: 44px; padding: 9px var(--ct-space-2);
  border: 1px solid var(--ct-border); border-radius: var(--ct-radius-control);
  background: var(--ct-white); color: var(--ct-ink);
  font: 400 16px/24px var(--font-ui);
}
.ct-input::placeholder { color: var(--ct-muted); opacity: 1; }
.ct-input:focus-visible { outline: 2px solid var(--ct-green); outline-offset: 3px; }

/* ---------- Tag ---------- */
.ct-tag {
  display: inline-flex; align-items: center; gap: var(--ct-space-1);
  box-sizing: border-box; min-height: 28px; padding: 4px 12px;
  border-radius: var(--ct-radius-control);
  background: var(--ct-sage); color: var(--ct-green);
  font: 600 14px/20px var(--font-ui); white-space: nowrap;
}
.ct-tag--soft { background: var(--ct-pale); }
.ct-tag--neutral { background: var(--ct-pale); color: var(--ct-muted); }
.ct-tag--warning { background: var(--ct-warning-bg); color: var(--ct-warning); }
.ct-tag--error { background: var(--ct-error-bg); color: var(--ct-error); }
.ct-tag--info { background: var(--ct-info-bg); color: var(--ct-info); }
.ct-tag .ct-icon { width: 20px; height: 20px; }

/* ---------- Icon ---------- */
.ct-icon {
  display: inline-block; flex: none; width: 24px; height: 24px; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Filter ---------- */
.ct-filter {
  position: relative; display: inline-flex; align-items: center;
  box-sizing: border-box; min-height: 28px; padding: 4px 12px;
  border: 0; border-radius: var(--ct-radius-control);
  background: none; color: var(--ct-muted);
  font: 600 14px/20px var(--font-ui); white-space: nowrap; cursor: pointer;
}
/* A área de toque chega a 44 px de altura sem mudar o desenho. */
.ct-filter::after { content: ""; position: absolute; inset: -8px 0; }
.ct-filter:hover { color: var(--ct-green); }
.ct-filter[aria-pressed="true"] { background: var(--ct-sage); color: var(--ct-green); }
.ct-filter:focus-visible { outline: 2px solid var(--ct-green); outline-offset: 3px; }

/* ---------- Item de navegação (SideNav e SectionList) ---------- */
.ct-navitem {
  display: flex; align-items: center; gap: 12px;
  box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 12px;
  border: 0; border-radius: var(--ct-radius-control);
  background: none; color: var(--ct-green);
  font: 400 14px/20px var(--font-ui); text-align: left; text-decoration: none; cursor: pointer;
}
.ct-navitem:hover { background: var(--ct-white); }
.ct-navitem[aria-current="page"], .ct-navitem[aria-current="true"] { background: var(--ct-sage); font-weight: 600; }
.ct-navitem:focus-visible { outline: 2px solid var(--ct-green); outline-offset: 3px; }

/* ---------- SideNav ---------- */
.ct-sidenav {
  display: flex; flex-direction: column; box-sizing: border-box; height: 100%;
  padding: var(--ct-space-2); background: var(--ct-pale); font-family: var(--font-ui);
}
.ct-sidenav-logo { margin-bottom: var(--ct-space-3); }
.ct-sidenav-logo img { display: block; width: 100%; height: auto; }
.ct-sidenav-list, .ct-sectionlist ul { display: grid; gap: var(--ct-space-1); margin: 0; padding: 0; list-style: none; }
.ct-sidenav-footer { margin-top: auto; padding: var(--ct-space-3) 12px var(--ct-space-1); color: var(--ct-muted); font: 400 14px/20px var(--font-ui); }
.ct-sidenav-footer a { color: inherit; text-decoration: none; }
.ct-sidenav-footer a:hover { color: var(--ct-green); text-decoration: underline; }
.ct-sidenav-footer a:focus-visible { outline: 2px solid var(--ct-green); outline-offset: 3px; }

/* ---------- SectionList ---------- */
.ct-sectionlist { box-sizing: border-box; padding: var(--ct-space-1); border-radius: var(--ct-radius-control); background: var(--ct-pale); }

/* ---------- SongList ---------- */
.ct-songlist { width: 100%; border-collapse: collapse; font-family: var(--font-ui); text-align: left; }
.ct-songlist th { padding: 0 12px 12px; color: var(--ct-muted); font: 600 14px/20px var(--font-ui); text-transform: uppercase; white-space: nowrap; }
.ct-songlist th:first-child { width: 54%; }
.ct-songlist th:nth-child(2) { width: 25%; }
.ct-songlist td { padding: 12px; border-bottom: 1px solid var(--ct-line); color: var(--ct-ink); font: 400 14px/20px var(--font-ui); vertical-align: middle; }
.ct-song-title { display: block; color: var(--ct-ink); font: 500 16px/24px var(--font-ui); text-decoration: none; }
a.ct-song-title:hover { color: var(--ct-green); text-decoration: underline; }
a.ct-song-title:focus-visible { outline: 2px solid var(--ct-green); outline-offset: 3px; }
.ct-song-meta { display: block; color: var(--ct-muted); }

/* ---------- MarkingPanel ---------- */
.ct-marking { box-sizing: border-box; padding: var(--ct-space-2); border-radius: var(--ct-radius-control); background: var(--ct-ivory); color: var(--ct-ink); font-family: var(--font-ui); }
.ct-marking-title { margin: var(--ct-space-1) 0 0; color: var(--ct-green); }
.ct-marking-fields { display: grid; gap: var(--ct-space-2); margin: var(--ct-space-2) 0 0; }
.ct-marking-fields dt { margin: 0; font: 400 14px/20px var(--font-ui); }
.ct-marking-fields dd { margin: 0; font: 600 14px/20px var(--font-ui); }

/* ---------- ChordLine ---------- */
/* A cifra fica presa ao trecho da letra pelo próprio segmento, nunca por espaços digitados. */
.ct-line { display: flex; flex-wrap: wrap; align-items: flex-end; margin: 0; font-family: var(--font-ui); }
.ct-seg { display: inline-flex; flex-direction: column; align-items: flex-start; white-space: break-spaces; }
.ct-chord { padding-right: .5em; color: var(--ct-green); font-size: 24px; line-height: 1.25; font-weight: 600; }
.ct-lyric { color: var(--ct-ink); font-size: 32px; line-height: 1.3; font-weight: 500; }

/* ---------- Stage ---------- */
.ct-stage { box-sizing: border-box; padding: var(--ct-space-4); background: var(--ct-night); color: var(--ct-white); font-family: var(--font-ui); }
.ct-stage .ct-lyric { color: inherit; font-size: clamp(32px, 4vw, 64px); line-height: 1.3; font-weight: 500; }
.ct-stage .ct-chord { color: var(--ct-gold); font-size: clamp(24px, 2.7vw, 40px); font-weight: 600; }
.ct-stage :focus-visible { outline: 2px solid var(--ct-gold); outline-offset: 3px; }
.ct-stage .ct-tag { background: var(--ct-nightline); color: var(--ct-white); }
.ct-stage .ct-tag--marking { color: var(--ct-gold); text-transform: uppercase; }
.ct-stage-header {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--ct-space-2);
  padding-bottom: var(--ct-space-3); border-bottom: 1px solid var(--ct-nightline);
}
.ct-stage-title { margin: 0; font: 600 16px/24px var(--font-ui); text-transform: uppercase; }
.ct-stage-meta { margin: var(--ct-space-1) 0 0; color: var(--ct-nightmuted); font: 400 16px/24px var(--font-ui); }
.ct-stage-section { margin: var(--ct-space-4) 0 var(--ct-space-2); color: var(--ct-nightmuted); font: 600 14px/20px var(--font-ui); text-transform: uppercase; }
.ct-stage-marking { margin: var(--ct-space-2) 0 0; color: var(--ct-gold); font: 600 16px/24px var(--font-ui); text-transform: uppercase; }
.ct-stage-nav {
  display: flex; justify-content: space-between; gap: var(--ct-space-2);
  margin-top: var(--ct-space-6); padding-top: var(--ct-space-2); border-top: 1px solid var(--ct-nightline);
}
.ct-stage-nav button {
  min-height: 44px; padding: 10px 0; border: 0; border-radius: var(--ct-radius-control);
  background: none; color: inherit; font: 500 16px/24px var(--font-ui); cursor: pointer;
}

/* ---------- Movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .ct-ui *, .ct-stage * { scroll-behavior: auto; transition: none; animation: none; }
}