/*
 * Cantário — composição das telas da área de preparação.
 *
 * Só usa os tokens do Design System (tokens.css) e as classes ct-* (components.css). Nada de cor, raio,
 * sombra ou fonte inventada: o que falta no Design System está anotado em docs/design.md, em
 * "Extensões do Design System".
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; }
img, svg { max-width: 100%; }
a { color: var(--ct-green); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ct-green); outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link { position: absolute; left: var(--ct-space-2); top: -60px; z-index: 10; }
.skip-link:focus { top: var(--ct-space-2); }

/* ---------- Moldura: barra lateral (SideNav) e conteúdo ---------- */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.app-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.app-side .ct-sidenav-logo a { display: block; }
.app-side .ct-sidenav-logo img { max-width: 182px; }
.logo-placeholder { display: block; padding: 12px; color: var(--ct-green); font: 600 16px/24px var(--font-ui); }
.side-footer { display: grid; gap: var(--ct-space-1); }
.side-footer a, .side-footer .linklike { display: inline-flex; align-items: center; gap: var(--ct-space-1); min-height: 32px; }
.side-user { color: var(--ct-muted); font: 400 14px/20px var(--font-ui); }
.linklike { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.linklike:hover { color: var(--ct-green); text-decoration: underline; }
.app-main { min-width: 0; padding: var(--ct-space-4); }
.app-main--plain { max-width: 560px; margin: 0 auto; }
.page { max-width: 1120px; }
.page--narrow { max-width: 760px; }
.page--wide { max-width: 1440px; }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app-side { position: static; height: auto; padding: var(--ct-space-1) var(--ct-space-2); }
  .app-side .ct-sidenav-logo { margin-bottom: var(--ct-space-1); }
  .app-side .ct-sidenav-logo img { max-width: 182px; }
  .app-side nav { overflow-x: auto; }
  .app-side .ct-sidenav-list { grid-auto-flow: column; grid-auto-columns: max-content; }
  .app-side .ct-sidenav-footer { display: none; }
  .side-footer--mobile { display: flex !important; flex-wrap: wrap; gap: var(--ct-space-2); padding: var(--ct-space-1) 12px 0; }
  .app-main { padding: var(--ct-space-3) var(--ct-space-2); }
}
.side-footer--mobile { display: none; color: var(--ct-muted); font: 400 14px/20px var(--font-ui); }

/* ---------- Cabeçalho da página ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--ct-space-2) var(--ct-space-3); margin-bottom: var(--ct-space-4); }
.page-head h1 { color: var(--ct-green); }
.page-head .ct-secondary { margin-top: var(--ct-space-1); }
.page-head .actions { margin-left: auto; }
.crumbs { margin-bottom: var(--ct-space-1); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--ct-green); text-decoration: underline; }
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-space-2); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-space-2); }
.actions form { margin: 0; }
.actions--tight { gap: var(--ct-space-1); }

.section { margin-top: var(--ct-space-6); }
.section > h2, .section-head h2 { color: var(--ct-green); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ct-space-1) var(--ct-space-2); margin-bottom: var(--ct-space-2); }
.section-head .ct-secondary { flex-basis: 100%; }

.panel { padding: var(--ct-space-3); }
.panel + .panel { margin-top: var(--ct-space-3); }
.panel-title { margin-bottom: var(--ct-space-2); color: var(--ct-green); }
.panel--soft { padding: var(--ct-space-3); border-radius: var(--ct-radius-card); background: var(--ct-pale); }

.grid { display: grid; gap: var(--ct-space-3); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--side { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
@media (max-width: 1100px) { .grid--side { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .grid--2 { grid-template-columns: minmax(0, 1fr); } }
.stack { display: grid; gap: var(--ct-space-2); }
.stack--lg { gap: var(--ct-space-3); }

/* ---------- Formulários ---------- */
.form { display: grid; gap: var(--ct-space-3); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--ct-space-2) var(--ct-space-3); }
.field { display: grid; gap: var(--ct-space-1); align-content: start; }
.field-label { color: var(--ct-ink); font: 600 14px/20px var(--font-ui); }
.field-hint { color: var(--ct-muted); font: 400 14px/20px var(--font-ui); }
.field-error { color: var(--ct-error); font: 600 14px/20px var(--font-ui); }
.field--invalid .ct-input { border-color: var(--ct-error); }
textarea.ct-input { min-height: 120px; resize: vertical; }
select.ct-input { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23285D50' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9 L12 16 L19 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; }
.ct-input--compact { min-height: 36px; padding-top: 5px; padding-bottom: 5px; }
.check { display: inline-flex; align-items: center; gap: var(--ct-space-1); min-height: 44px; cursor: pointer; font: 400 16px/24px var(--font-ui); }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--ct-green); }
.checks { display: flex; flex-wrap: wrap; gap: 0 var(--ct-space-3); }
fieldset { margin: 0; padding: 0; border: 0; }
legend { padding: 0; margin-bottom: var(--ct-space-1); }

/* ---------- Mensagens ---------- */
.messages { display: grid; gap: var(--ct-space-1); margin-bottom: var(--ct-space-3); }
.message { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--ct-space-1) var(--ct-space-2); padding: 12px var(--ct-space-2); border-radius: var(--ct-radius-control); background: var(--ct-sage); color: var(--ct-green); font: 400 16px/24px var(--font-ui); }
.message .ct-icon { margin-top: 0; }
.message-text { flex: 1 1 180px; }
.message--warning { background: var(--ct-warning-bg); color: var(--ct-warning); }
.message--error { background: var(--ct-error-bg); color: var(--ct-error); }
.message--info { background: var(--ct-info-bg); color: var(--ct-info); }
.message a { color: inherit; font-weight: 600; }
.message-code { flex-basis: 100%; padding: var(--ct-space-1) 12px; border-radius: var(--ct-radius-control); background: var(--ct-white); color: var(--ct-ink); font: 400 14px/20px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }

/* ---------- Listas e tabelas ---------- */
.ct-songlist .num { white-space: nowrap; }
.ct-songlist td.actions-cell { text-align: right; white-space: nowrap; }
.list-plain { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.list-plain > li { padding: 12px 0; border-bottom: 1px solid var(--ct-line); }
.list-plain > li:last-child { border-bottom: 0; }
.row-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ct-space-1) var(--ct-space-2); }
.meta { color: var(--ct-muted); font: 400 14px/20px var(--font-ui); }
.strong { font-weight: 600; }
.tags { display: flex; flex-wrap: wrap; gap: var(--ct-space-1); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-space-1) var(--ct-space-2); margin-top: var(--ct-space-2); }
.filters .ct-input { width: auto; min-width: 180px; }
.search-row { display: flex; gap: var(--ct-space-2); align-items: center; }
.search-row .ct-input { flex: 1; }
.count { color: var(--ct-muted); font: 400 14px/20px var(--font-ui); }

.empty { padding: var(--ct-space-6) var(--ct-space-3); text-align: center; }
.empty h2 { color: var(--ct-green); }
.empty p { margin-top: var(--ct-space-1); color: var(--ct-muted); }
.empty .actions { justify-content: center; margin-top: var(--ct-space-3); }
.empty--page { padding-top: var(--ct-space-6); }
.debug { margin-top: var(--ct-space-3); padding: var(--ct-space-2); overflow: auto; border-radius: var(--ct-radius-control); background: var(--ct-pale); text-align: left; font: 400 14px/20px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; }

/* ---------- Início ---------- */
.next-card { display: grid; gap: var(--ct-space-2); padding: var(--ct-space-3); }
.next-card h2 { color: var(--ct-green); }
.status-pair { display: flex; flex-wrap: wrap; gap: var(--ct-space-1); }
.shortcuts { display: flex; flex-wrap: wrap; gap: var(--ct-space-2); }

/* ---------- Ficha da música ---------- */
.arrangement { padding: var(--ct-space-3); }
.arrangement + .arrangement { margin-top: var(--ct-space-2); }
.arrangement h3 { color: var(--ct-ink); font: 600 16px/24px var(--font-ui); }
.section-tags { margin-top: var(--ct-space-2); }
.section-actions { margin-top: var(--ct-space-2); }
.section-gap { margin-top: var(--ct-space-2); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--ct-space-1) var(--ct-space-3); margin: 0; font: 400 14px/20px var(--font-ui); }
.facts dt { color: var(--ct-muted); }
.facts dd { margin: 0; color: var(--ct-ink); }

/* ---------- Leitura de cifra na preparação (ChordLine em tamanho de tela de trabalho) ---------- */
.sheet { display: grid; gap: var(--ct-space-1); }
.sheet .ct-lyric { font-size: 20px; }
.sheet .ct-chord { font-size: 16px; }
.sheet-section { margin-top: var(--ct-space-2); }
.sheet-section:first-child { margin-top: 0; }
.sheet-section .ct-label { margin-bottom: 4px; }
.sheet-section--bold .ct-lyric { font-weight: 700; }
.sheet-section--italic .ct-lyric { font-style: italic; }
.line-instrumental { display: flex; flex-wrap: wrap; gap: 0 .5em; align-items: baseline; color: var(--ct-ink); font: 400 16px/1.5 var(--font-ui); }
.line-instrumental .ct-chord { padding-right: 0; }
.chord-opaque { text-decoration: underline dotted var(--ct-warning) 2px; text-underline-offset: 4px; }
.sheet .marking-line { margin: 2px 0 var(--ct-space-1); }
.marking-tag { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 8px; border-radius: var(--ct-radius-control); background: var(--ct-pale); color: var(--ct-green); font: 600 14px/20px var(--font-ui); }
.marking-tag--pending { background: var(--ct-warning-bg); color: var(--ct-warning); }
.repeat-note { color: var(--ct-muted); font: 400 14px/20px var(--font-ui); }

/* ---------- Editor de arranjo (T-04) ---------- */
.editor-head { display: grid; gap: var(--ct-space-1); }
.editor-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-space-2) var(--ct-space-3); }
.editor-title h1 { color: var(--ct-green); }
.editor-title .actions { margin-left: auto; }
.undo-buttons { display: inline-flex; gap: var(--ct-space-2); }
.undo-buttons .ct-button:disabled { opacity: .45; }
.harmony-choose { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ct-space-2); margin-top: var(--ct-space-1); }
.harmony-choose .field { min-width: 200px; }
.harmony-preview { display: grid; gap: var(--ct-space-2); margin-top: var(--ct-space-2); }
.harmony-preview:empty { display: none; }
.harmony-sheet { padding: var(--ct-space-2); border: 1px solid var(--ct-line); border-radius: var(--ct-radius-control); background: var(--ct-white); overflow-x: auto; }
.harmony-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px var(--ct-space-2); }
.harmony-line .ct-line { margin: 0; }
.harmony-notes { margin: 0; padding-left: 20px; color: var(--ct-muted); font: 400 14px/20px var(--font-ui); }
.editor-context { display: inline-flex; align-items: center; gap: var(--ct-space-1); }
.editor-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ct-space-2) var(--ct-space-3); margin-top: var(--ct-space-3); padding-top: var(--ct-space-3); border-top: 1px solid var(--ct-line); }
.editor-bar .field { min-width: 120px; }
.editor-bar .ct-input { min-height: 40px; padding-top: 7px; padding-bottom: 7px; }
.editor { display: grid; grid-template-columns: 260px minmax(0, 1fr) 360px; gap: var(--ct-space-3); margin-top: var(--ct-space-4); align-items: start; }
.editor-side { display: grid; gap: var(--ct-space-3); min-width: 0; }
.editor-side > * { min-width: 0; }
.editor-side .panel { padding: var(--ct-space-2); }
.editor-bar .field--key { flex: 0 0 150px; }
.editor-bar .field--tempo { flex: 0 0 150px; }
.editor-bar .field--meter { flex: 0 0 170px; }
[data-key-line] { margin-bottom: var(--ct-space-2); }
.editor-main { display: grid; gap: var(--ct-space-2); min-width: 0; }
.editor-aside { display: grid; gap: var(--ct-space-3); position: sticky; top: var(--ct-space-2); max-height: calc(100vh - 32px); overflow: auto; }
@media (max-width: 1180px) {
  .editor { grid-template-columns: 240px minmax(0, 1fr); }
  .editor-aside { grid-column: 1 / -1; position: static; max-height: none; }
}
@media (max-width: 760px) { .editor { grid-template-columns: minmax(0, 1fr); } }
.ct-sectionlist .ct-navitem { justify-content: space-between; }
.ct-sectionlist .ct-navitem small { color: var(--ct-muted); font-weight: 400; }
.sequence { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: occ; }
.sequence li { min-width: 0; }
.sequence li { display: flex; align-items: center; gap: 4px; min-height: 40px; padding: 4px 4px 4px 8px; border-radius: var(--ct-radius-control); background: var(--ct-white); border: 1px solid var(--ct-line); font: 400 14px/20px var(--font-ui); counter-increment: occ; }
.sequence li::before { content: counter(occ) "."; min-width: 1.6em; color: var(--ct-muted); }
.sequence li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--ct-radius-control); background: none; color: var(--ct-green); cursor: pointer; }
.icon-button:hover { background: var(--ct-sage); }
.icon-button:disabled { color: var(--ct-muted); background: none; cursor: not-allowed; opacity: .5; }
.icon-button .ct-icon { width: 20px; height: 20px; }
.section-editor { padding: var(--ct-space-3); }
.section-editor-head { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: var(--ct-space-2); }
.section-text { min-height: 240px; font: 400 16px/28px var(--font-ui); tab-size: 4; }
.section-style { display: flex; flex-wrap: wrap; gap: 0 var(--ct-space-3); }
.help { color: var(--ct-muted); font: 400 14px/20px var(--font-ui); }
.help code, .code { padding: 1px 6px; border-radius: 6px; background: var(--ct-pale); color: var(--ct-green); font: 600 14px/20px var(--font-ui); }
.markings { display: grid; gap: var(--ct-space-1); }
.marking-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ct-space-1); align-items: center; padding: var(--ct-space-1) 12px; border-radius: var(--ct-radius-control); background: var(--ct-ivory); }
.marking-row--pending { background: var(--ct-warning-bg); }
.marking-form { display: grid; gap: var(--ct-space-2); }
.preview-panel { padding: var(--ct-space-3); }
.preview-panel .sheet .ct-lyric { font-size: 16px; }
.preview-panel .sheet .ct-chord { font-size: 14px; }
.problems { display: grid; gap: var(--ct-space-1); }
.problems .linklike { color: var(--ct-green); font-weight: 600; }
.field--grow { flex: 1 1 240px; }
.section-label { margin-bottom: var(--ct-space-1); }
.add-row { display: flex; flex-wrap: wrap; gap: var(--ct-space-1); margin-top: var(--ct-space-2); }
.add-row > .ct-input { flex: 1 1 120px; }
.add-row .ct-input { flex: 1; min-width: 0; min-height: 40px; padding-top: 7px; padding-bottom: 7px; }
.add-row .ct-button { min-height: 40px; padding-inline: 12px; }
.section-tools { margin: var(--ct-space-2) 0 var(--ct-space-1); }
.section-editor .field + .help { margin-top: var(--ct-space-1); }
.section-editor .meta { margin-top: var(--ct-space-1); }
.fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.filters--tight { margin-top: 0; margin-bottom: var(--ct-space-2); }
.preview-options { margin-bottom: var(--ct-space-1); }
.compare { margin-top: var(--ct-space-2); }
[data-key-choice] .message, [data-commit-errors] .message, [data-banner] .message { margin-top: var(--ct-space-2); }

/* ---------- Preparação da celebração (T-05) ---------- */
.moment { padding: var(--ct-space-2) 0; border-bottom: 1px solid var(--ct-line); }
.moment:last-child { border-bottom: 0; }
.moment-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-space-1) var(--ct-space-2); }
.moment-head h3 { flex: 1 1 200px; color: var(--ct-ink); font: 600 16px/24px var(--font-ui); }
.moment-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--ct-space-2); margin-top: var(--ct-space-1); color: var(--ct-muted); font: 400 14px/20px var(--font-ui); }
.moment-empty form { margin: 0; }
.moment-empty .linklike, .moment .linklike { color: var(--ct-green); font-weight: 600; }
.moment-options { display: grid; gap: var(--ct-space-1); }
.moment-options .add-row { margin-top: 0; }
.moment details.more { margin-top: 4px; }
.moment-head .button--small, .button--small { min-height: 36px; padding: 6px 12px; }
.add-moment { margin-top: var(--ct-space-3); }
.grid--item { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); align-items: start; }
@media (max-width: 1000px) { .grid--item { grid-template-columns: minmax(0, 1fr); } }
.preview-song + .preview-song { margin-top: var(--ct-space-3); }
.ct-card.list-plain > li, .celebration-list > li, .choose-list > li, .people-list > li { padding-left: var(--ct-space-3); padding-right: var(--ct-space-3); }
.publish-summary { display: grid; gap: var(--ct-space-2); margin: 0; padding-left: var(--ct-space-3); }
.publish-summary .field-label { margin-bottom: 2px; }
.field--action { align-self: end; }
a.ct-filter { text-decoration: none; }
.check--block { align-items: flex-start; min-height: 0; padding: 6px 0; }
.check--block input { margin-top: 2px; }
.execution-item { display: grid; gap: var(--ct-space-1); padding: var(--ct-space-2) 0; border-bottom: 1px solid var(--ct-line); }
.execution-item:last-child { border-bottom: 0; padding-bottom: 0; }
.execution-item legend { padding: 0; margin-bottom: 4px; }
.execution-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-space-1) var(--ct-space-3); }
.execution-bulk .meta { margin: 0; }
.history > li { display: grid; gap: 2px; }
.credit-list + .credit-list { margin-top: var(--ct-space-2); padding-top: var(--ct-space-2); border-top: 1px solid var(--ct-line); }
.credit-list form, .link-list form { margin: 0; }
.link-list a { overflow-wrap: anywhere; }
.credit-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ct-space-1); align-items: start; }
.credit-item p { overflow-wrap: anywhere; }
.link-item { display: grid; gap: 4px; }
details.more > summary .ct-icon { width: 20px; height: 20px; margin-right: 4px; }
.link-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-space-1) var(--ct-space-3); }
.message form { margin: 0; }
.history-detail { font: 400 14px/20px var(--font-ui); color: var(--ct-ink); }
.history-note { font: italic 400 14px/20px var(--font-ui); color: var(--ct-muted); }
.print-tools { display: grid; gap: var(--ct-space-1); margin-bottom: var(--ct-space-3); }
.import-text { font: 400 16px/24px "Courier New", Courier, ui-monospace, monospace; }
.items { display: grid; gap: var(--ct-space-1); margin: var(--ct-space-1) 0 0; padding: 0; list-style: none; }
.item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ct-space-1) var(--ct-space-2); align-items: center; padding: 12px var(--ct-space-2); border-radius: var(--ct-radius-control); background: var(--ct-ivory); }
.item-title { color: var(--ct-ink); font: 500 16px/24px var(--font-ui); text-decoration: none; }
a.item-title:hover { color: var(--ct-green); text-decoration: underline; }
.item .tags { margin-top: 4px; }
.summary-list { display: grid; gap: var(--ct-space-1); margin: 0; padding: 0; list-style: none; }
.summary-list li { display: flex; gap: var(--ct-space-1); align-items: flex-start; font: 400 14px/20px var(--font-ui); }
.summary-list .ct-icon { width: 20px; height: 20px; }
.ok { color: var(--ct-green); }
.warn { color: var(--ct-warning); }
.err { color: var(--ct-error); }
.inline-form { display: inline; }
details.more > summary { cursor: pointer; color: var(--ct-green); font: 500 14px/20px var(--font-ui); list-style: none; min-height: 32px; display: inline-flex; align-items: center; }
details.more > summary::-webkit-details-marker { display: none; }
details.more[open] > summary { margin-bottom: var(--ct-space-1); }

/* ---------- Importação de apresentações (T-06) ---------- */
.import-file + .import-file { margin-top: var(--ct-space-3); }
.import-file-name { color: var(--ct-ink); font: 600 16px/24px var(--font-ui); overflow-wrap: anywhere; }
.import-queue-status { margin-bottom: var(--ct-space-3); }
.import-occurrences { margin-top: var(--ct-space-2); }
.import-occurrences .item-title { overflow-wrap: anywhere; }

.import-review { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); gap: var(--ct-space-3); align-items: start; }
.import-queue { position: sticky; top: var(--ct-space-2); max-height: calc(100vh - 32px); overflow: auto; min-width: 0; }
.import-queue > .ct-label { margin-bottom: var(--ct-space-1); }
.import-queue-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.import-queue-list a { display: grid; padding: 8px 12px; border: 1px solid transparent; border-radius: var(--ct-radius-control); color: var(--ct-ink); text-decoration: none; font: 400 14px/20px var(--font-ui); }
.import-queue-list a:hover { background: var(--ct-sage); }
.import-queue-list a[aria-current="page"] { border-color: var(--ct-green); background: var(--ct-white); }
.import-queue-slides { font-weight: 600; }
.import-queue-title, .import-queue-state { overflow: hidden; color: var(--ct-muted); text-overflow: ellipsis; white-space: nowrap; }
.import-queue-list .is-pending .import-queue-state { color: var(--ct-warning); }
.import-original { position: sticky; top: var(--ct-space-2); display: grid; gap: var(--ct-space-2); min-width: 0; max-height: calc(100vh - 32px); overflow: auto; }
.import-original > h2 { color: var(--ct-green); }
.import-content { display: grid; gap: var(--ct-space-3); min-width: 0; }
.import-content > .panel + .panel, .import-content > * + .panel { margin-top: 0; }
.slide-current { display: grid; gap: var(--ct-space-2); }
.slide-sketch { display: grid; gap: 4px; margin: 0; }
.slide-sketch svg { display: block; width: 100%; height: auto; border-radius: var(--ct-radius-control); background: var(--ct-pale); }
.slide-sketch-page { fill: var(--ct-purewhite); stroke: var(--ct-line); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.slide-sketch--dark .slide-sketch-page { fill: var(--ct-night); }
.slide-sketch-box { fill: none; stroke: var(--ct-line); stroke-width: 1px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.slide-sketch-box--read { stroke: var(--ct-green); }
.slide-sketch-box--ignored { stroke: var(--ct-border); opacity: .6; }
.slide-sketch-box--outside { stroke: var(--ct-error); stroke-width: 2px; stroke-dasharray: none; }
.slide-sketch-column { stroke: var(--ct-green); stroke-width: 1px; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.slide-sketch-text { font-family: var(--font-ui); white-space: pre; }
.slide-sketch-badge { fill: var(--ct-green); }
.slide-sketch-badge-text { fill: var(--ct-white); font-family: var(--font-ui); font-weight: 600; }
.filmstrip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ct-space-2); }
.filmstrip-item { display: grid; gap: 4px; align-content: start; min-width: 0; }
.import-source { margin: 4px 0 0; padding: var(--ct-space-1) 12px; overflow-x: auto; border: 1px solid var(--ct-line); border-radius: var(--ct-radius-control); background: var(--ct-white); color: var(--ct-ink); font: 400 14px/20px "Courier New", Courier, ui-monospace, monospace; white-space: pre; }
.import-group + .import-group { margin-top: var(--ct-space-3); padding-top: var(--ct-space-3); border-top: 1px solid var(--ct-line); }
.import-group > .meta { margin-top: 4px; }
.import-items { display: grid; gap: var(--ct-space-1); margin: var(--ct-space-1) 0 0; padding: 0; list-style: none; }
.import-item { display: grid; gap: var(--ct-space-1); padding: 12px var(--ct-space-2); border-radius: var(--ct-radius-control); background: var(--ct-ivory); font: 400 14px/20px var(--font-ui); overflow-wrap: anywhere; }
.import-item--open { background: var(--ct-warning-bg); }
.import-item form { margin: 0; }
.import-preview { padding: 0; }
.probable { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--ct-space-1); }
.repertoire { display: grid; gap: var(--ct-space-3); margin: var(--ct-space-2) 0 0; padding: 0; list-style: none; }
.repertoire-moment > .ct-label { margin-bottom: 4px; }
.repertoire-moment .items { margin-top: 0; }
details.decision { padding: var(--ct-space-1) 0; border-top: 1px solid var(--ct-line); }
details.decision:first-of-type { margin-top: var(--ct-space-2); }
details.decision > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-space-1); min-height: 44px; cursor: pointer; color: var(--ct-green); font: 600 16px/24px var(--font-ui); list-style: none; }
details.decision > summary::-webkit-details-marker { display: none; }
details.decision > summary::before { content: "›"; display: inline-block; width: 1em; text-align: center; transition: transform .15s; }
details.decision[open] > summary::before { transform: rotate(90deg); }
details.decision[open] > summary { margin-bottom: var(--ct-space-2); }
details.decision > .form { padding-bottom: var(--ct-space-2); }
.decision-other { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-space-1) var(--ct-space-2); padding-top: var(--ct-space-2); border-top: 1px solid var(--ct-line); }
.decision-other form { margin: 0; }
.decision-other + .field-hint { margin-top: var(--ct-space-1); }
.import-candidate { padding: var(--ct-space-2) 0; border-bottom: 1px solid var(--ct-line); overflow-wrap: anywhere; }
.import-candidate .diff { margin-top: var(--ct-space-1); }
@media (max-width: 1280px) {
  .import-review { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .import-queue { grid-column: 1 / -1; position: static; max-height: none; }
  .import-queue-list { display: flex; overflow-x: auto; padding-bottom: 4px; }
  .import-queue-list li { flex: 0 0 200px; }
}
@media (max-width: 900px) {
  .import-review { grid-template-columns: minmax(0, 1fr); }
  .import-original { position: static; max-height: none; }
}
@media (prefers-reduced-motion: reduce) { details.decision > summary::before { transition: none; } }

/* ---------- Ensaio (T-10) ---------- */
.rehearsal { align-items: start; }
.rehearsal > .panel + .panel { margin-top: 0; }
.metronome-bpm { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ct-space-1) var(--ct-space-2); }
.metronome-bpm .field { width: 112px; }
.metronome-bpm .icon-button { margin-bottom: 4px; }
.metronome-bpm-input, .tuner-reference { font: 600 24px/32px var(--font-ui); text-align: center; }
.tuner-reference { max-width: 112px; }
.volume { width: 100%; accent-color: var(--ct-green); }
.beats { display: flex; flex-wrap: wrap; gap: var(--ct-space-1); min-height: 24px; margin: var(--ct-space-3) 0 var(--ct-space-2); }
.beat { width: 20px; height: 20px; border: 2px solid var(--ct-line); border-radius: 50%; background: var(--ct-white); }
.beat.is-strong { border-color: var(--ct-green); }
.beat.is-on { border-color: var(--ct-green); background: var(--ct-green); }
.tuner { display: grid; justify-items: center; gap: 4px; margin: var(--ct-space-2) 0; padding: var(--ct-space-3) var(--ct-space-2); border-radius: var(--ct-radius-card); background: var(--ct-pale); text-align: center; }
.tuner-note { color: var(--ct-ink); font: 600 48px/56px var(--font-ui); }
.tuner-frequency, .tuner-cents { color: var(--ct-muted); font: 400 14px/20px var(--font-ui); }
.tuner-meter { position: relative; width: 100%; max-width: 320px; height: 28px; margin: var(--ct-space-1) 0; overflow: hidden; border: 1px solid var(--ct-line); border-radius: var(--ct-radius-control); background: var(--ct-white); }
.tuner-center { position: absolute; top: 4px; bottom: 4px; left: 50%; width: 2px; margin-left: -1px; background: var(--ct-green); }
.tuner-needle { position: absolute; top: 2px; bottom: 2px; left: 50%; width: 8px; margin-left: -4px; border-radius: 4px; background: var(--ct-warning); transition: transform .1s; }
.tuner.is-in-tune .tuner-needle { background: var(--ct-green); }
.tuner.is-in-tune .tuner-note, .tuner.is-in-tune .tuner-cents { color: var(--ct-green); }
@media (prefers-reduced-motion: reduce) { .tuner-needle { transition: none; } }

/* ---------- Comparar revisões ---------- */
.diff { margin: 0; padding: 0; list-style: none; border-radius: var(--ct-radius-control); overflow: hidden; border: 1px solid var(--ct-line); }
.diff li { padding: 4px 12px; font: 400 16px/24px var(--font-ui); white-space: pre-wrap; background: var(--ct-white); }
.diff .add { background: var(--ct-sage); color: var(--ct-green); }
.diff .del { background: var(--ct-error-bg); color: var(--ct-error); text-decoration: line-through; }
.diff .add::before { content: "+ "; font-weight: 700; }
.diff .del::before { content: "− "; font-weight: 700; }

/* ---------- Entrar ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--ct-space-4) var(--ct-space-2); }
.login-box { width: min(420px, 100%); display: grid; gap: var(--ct-space-3); }
.login-logo img { display: block; width: 220px; height: auto; }
.login-box h1 { color: var(--ct-green); }
.login-box .panel { display: grid; gap: var(--ct-space-3); }
.login-hint { color: var(--ct-muted); font: 400 14px/20px var(--font-ui); }

/* ---------- Impressão de emergência ---------- */
.print-head { display: flex; justify-content: space-between; gap: var(--ct-space-2); align-items: flex-end; padding-bottom: var(--ct-space-2); border-bottom: 1px solid var(--ct-line); margin-bottom: var(--ct-space-3); }
.print-song { break-inside: avoid-page; padding-bottom: var(--ct-space-3); }
.print-song + .print-song { break-before: page; }
.print-song h2 { color: var(--ct-ink); font: 600 22px/28px var(--font-ui); }
@media print {
  @page { margin: 14mm; }
  body { background: var(--ct-white); }
  .app { display: block; }
  .app-side, .no-print, .messages { display: none !important; }
  .app-main { padding: 0; }
  .sheet .ct-lyric { font-size: 15pt; }
  .sheet .ct-chord { font-size: 12pt; }
  .print-song + .print-song { break-before: page; }
}
.stack > .panel + .panel, .stack > * + .panel { margin-top: 0; }