/* Rosæ — tokens de tema.
   Valores em "R G B" para o Tailwind aplicar opacidade (rgb(var(--x) / <alpha>)). */

:root {
  color-scheme: light;
  --bg: 250 246 242;          /* Papel marfim suave #FAF6F2 */
  --surface: 255 255 255;     /* Branco puro #FFFFFF */
  --sunk: 245 238 241;        /* Rosa suave / pergaminho #F5EEF1 */
  --line: 234 220 227;        /* Borda blush sutil #EADCE3 */
  --ink: 52 38 44;            /* Grafite litúrgico escuro #34262C */
  --muted: 130 104 115;       /* Ardósia rosada #826873 */
  --accent: 155 40 71;        /* Bordô veludo / Rosa nobre #9B2847 */
  --accent-hover: 126 30 56;  /* Bordô profundo #7E1E38 */
  --on-accent: 255 255 255;

  /* Famílias de categoria: fundo / texto */
  --coros: 252 236 240;       --coros-ink: 140 32 60;      /* Rosa / Coral #8C203C */
  --orq: 237 232 247;         --orq-ink: 78 58 128;       /* Lavanda / Orquestra */
  --solos: 253 242 227;       --solos-ink: 160 102 24;     /* Ouro champanhe #A06618 */
  --hin: 235 243 250;         --hin-ink: 36 88 130;       /* Céu / Hinário */
  --outros: 245 238 241;      --outros-ink: 130 104 115;

  --fav: 214 51 108;
  --danger: 194 45 45;        --danger-bg: 254 226 226;
  --success: 45 106 79;
  --warn: 184 131 48;         --warn-bg: 254 243 199;
  --mark: 253 226 233;
  --chords: 155 40 71;        /* Cifras em bordô suave no modo claro */
  --shadow: 74 18 32;
}

/* Dark Mode: Nuance 2 — Base Ardósia Fria (2.5) + Framboesa Viva & Ouro Champanhe (2.2) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: 8 13 18;              /* Preto ardósia profundo #080D12 */
    --surface: 18 26 36;        /* Ardósia carvão suave #121A24 */
    --sunk: 25 36 50;           /* Ardósia interna #192432 */
    --line: 37 53 71;           /* Borda sutil titânio azulado #253547 */
    --ink: 255 255 255;         /* Branco puro cristalino #FFFFFF */
    --muted: 150 168 181;       /* Névoa prateada límpida #96A8B5 */
    --accent: 255 42 109;       /* Framboesa Luminosa Viva #FF2A6D */
    --accent-hover: 230 25 90;
    --on-accent: 255 255 255;

    --coros: 43 19 36;          --coros-ink: 255 153 200;   /* #2B1324 / #FF99C8 */
    --orq: 31 28 54;            --orq-ink: 196 185 245;     /* #1F1C36 / #C4B9F5 */
    --solos: 43 35 19;          --solos-ink: 245 199 103;   /* Ouro Champanhe #F5C767 */
    --hin: 20 37 56;            --hin-ink: 155 208 245;     /* Céu / Safira */
    --outros: 25 36 50;         --outros-ink: 150 168 181;

    --fav: 255 77 125;
    --danger: 248 113 113;      --danger-bg: 56 20 26;
    --success: 52 211 153;
    --warn: 245 199 103;        --warn-bg: 43 35 19;
    --mark: 55 25 45;
    --chords: 255 224 130;      /* Cifras iluminadas em Ouro Champanhe #FFE082 */
    --shadow: 0 0 0;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: 8 13 18;              /* Preto ardósia profundo #080D12 */
  --surface: 18 26 36;        /* Ardósia carvão suave #121A24 */
  --sunk: 25 36 50;           /* Ardósia interna #192432 */
  --line: 37 53 71;           /* Borda sutil titânio azulado #253547 */
  --ink: 255 255 255;         /* Branco puro cristalino #FFFFFF */
  --muted: 150 168 181;       /* Névoa prateada límpida #96A8B5 */
  --accent: 255 42 109;       /* Framboesa Luminosa Viva #FF2A6D */
  --accent-hover: 230 25 90;
  --on-accent: 255 255 255;

  --coros: 43 19 36;          --coros-ink: 255 153 200;
  --orq: 31 28 54;            --orq-ink: 196 185 245;
  --solos: 43 35 19;          --solos-ink: 245 199 103;
  --hin: 20 37 56;            --hin-ink: 155 208 245;
  --outros: 25 36 50;         --outros-ink: 150 168 181;

  --fav: 255 77 125;
  --danger: 248 113 113;      --danger-bg: 56 20 26;
  --success: 52 211 153;
  --warn: 245 199 103;        --warn-bg: 43 35 19;
  --mark: 55 25 45;
  --chords: 255 224 130;      /* Cifras iluminadas em Ouro Champanhe #FFE082 */
  --shadow: 0 0 0;
}

html { background: rgb(var(--bg)); }
body {
  background: rgb(var(--bg));
  color: rgb(var(--ink));
  -webkit-tap-highlight-color: transparent;
}

[x-cloak] { display: none !important; }

mark {
  background: rgb(var(--mark));
  color: inherit;
  border-radius: 6px;
  padding: 0 .15em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.lyrics { text-wrap: pretty; }

:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; border-radius: 10px; }

.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
.safe-top { padding-top: env(safe-area-inset-top); }

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------- Dropdown do Rosæ ---------- */
.picker { position: relative; }
.picker-btn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer; }
.picker-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-placeholder { color: rgb(var(--muted)); font-weight: 500; }
.picker-chev { display: inline-flex; color: rgb(var(--muted)); transition: transform .15s; flex-shrink: 0; }
.picker.is-open .picker-chev { transform: rotate(180deg); }
.picker-list { position: absolute; z-index: 30; left: 0; right: 0; margin-top: 4px; max-height: 16rem; overflow-y: auto;
  padding: 6px 0; border-radius: 16px; background: rgb(var(--surface)); border: 1px solid rgb(var(--line));
  box-shadow: 0 12px 32px rgb(0 0 0 / .28); list-style: none; }
.picker-list.picker-right { left: auto; right: 0; min-width: 230px; }
.pill-picker .picker-list { right: auto; min-width: 240px; }
.pill-picker .picker-list.picker-right { left: auto; right: 0; }
.pill-picker .picker-placeholder { color: rgb(var(--ink)); font-weight: 700; }
.pill-on .picker-btn { background: rgb(var(--accent)); color: rgb(var(--on-accent)); border-color: transparent; }
.pill-on .picker-chev { color: inherit; }
.picker-list.picker-up { top: auto; bottom: 100%; margin: 0 0 4px; }
.picker-group { padding: 10px 16px 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--muted)); }
.picker-opt { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 16px; text-align: left;
  font-size: 15px; font-weight: 500; color: rgb(var(--ink)); }
.picker-opt:hover, .picker-opt:focus-visible { background: rgb(var(--sunk)); outline: none; }
.picker-opt.is-selected { color: rgb(var(--accent)); font-weight: 700; }
.picker-label { flex: 1; min-width: 0; }
.picker-hint { flex-shrink: 0; font-size: 12px; font-weight: 500; color: rgb(var(--muted)); max-width: 55%; text-align: right; }

/* Faixa de divisão entre os hinos da lista */
.list-band { background: rgb(var(--sunk)); border-top: 1px solid rgb(var(--line)); border-bottom: 1px solid rgb(var(--line)); color: rgb(var(--ink)); }
li:first-child > .list-band { border-top: 0; }

/* Colunas Solista / Regente na lista */
.list-col { width: 76px; }
@media (min-width: 640px) { .list-col { width: 120px; } }

/* Destaque ao pular para um hino pendente */
@keyframes flash-warn { 0%, 60% { background: rgb(var(--warn-bg)); } 100% { background: transparent; } }
.flash { animation: flash-warn 1.6s ease-out; }

/* Cifra: acorde em cima da sílaba com tom iluminado pelo tema */
.chords { line-height: 1.25; }
.chords .ch-line { display: flex; flex-wrap: wrap; align-items: flex-end; margin-bottom: .35em; }
.chords .ch-gap { height: .9em; }
.chords .ch-seg { display: inline-flex; flex-direction: column; }
.chords .ch-seg > b { color: rgb(var(--chords, var(--accent))); font-weight: 800; font-size: .78em; line-height: 1.2; padding-right: .3em; white-space: nowrap; }
.chords .ch-seg > span { white-space: pre; }
.culto-chords .ch-seg > b { color: #FFE082; }

/* Arrastar itens da lista */
.drag-item { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.drag-chosen { background: rgb(var(--sunk)); }
.drag-ghost { opacity: .35; }
.drag-float { box-shadow: 0 12px 28px rgb(0 0 0 / .28); border-radius: 16px; background: rgb(var(--surface)); }

/* Folha impressa (programação) */
#print-area { display: none; font-family: "Plus Jakarta Sans", system-ui, sans-serif; color: #000; }
#print-area .pv-paper { background: #fff; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#print-area .pr-head { text-align: center; margin: 0 0 14pt; }
#print-area .pr-kicker { font-size: 8.5pt; font-weight: 800; letter-spacing: .32em; text-transform: uppercase; color: #000; margin: 0; }
#print-area .pr-head h1 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 26pt; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin: 4pt 0 3pt; }
#print-area .pr-date { display: inline-block; font-size: 11pt; font-weight: 600; margin: 2pt 0 0; padding: 3pt 12pt; border-top: 1pt solid #000; border-bottom: 1pt solid #000; }
#print-area .pr-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 11pt; line-height: 1.3; border: 1.5pt solid #000; }
#print-area .pr-table th, #print-area .pr-table td { text-align: center; vertical-align: middle; padding: 6pt 7pt; border: 0; }
#print-area .pr-table thead th { background: #000; color: #fff; font-size: 8pt; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; padding: 6.5pt 7pt; }
#print-area .pr-table tbody td { border-bottom: .6pt solid #b5b5b5; }
#print-area .pr-table tbody td + td { border-left: .6pt solid #d0d0d0; }
#print-area .pr-table tbody tr:last-child td { border-bottom: 0; }
#print-area .pr-table tbody + tbody tr:first-child td { border-top: 1.2pt solid #000; }
#print-area .pr-table .pr-section { background: #e9e9e9; border-left: 0; border-bottom: 1pt solid #000;
  font-size: 8.5pt; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; padding: 5pt 7pt; }
#print-area .pr-perf { font-weight: 600; }
#print-area .pr-tit { font-weight: 700; }
#print-area .pr-num { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .03em; white-space: nowrap; }
#print-area .pr-solo { font-style: italic; }
#print-area .pr-tom { text-align: center; letter-spacing: 0; }
#print-area th { white-space: nowrap; }
#print-area .pr-table tr { break-inside: avoid; }
#print-area .pr-foot { margin-top: 10pt; text-align: right; font-size: 8pt; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #777; font-family: "Cormorant Garamond", Georgia, serif; }
#print-area .pr-lyrics h2 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 20pt; font-weight: 700; margin: 2pt 0 4pt; }
#print-area .pr-lyrics .pr-note { font-size: 11pt; font-style: italic; margin: 0 0 8pt; }
#print-area .pr-text { white-space: pre-line; font-size: 13pt; line-height: 1.55; margin-top: 10pt; }

/* Cópias pequenas (6 ou 8 por folha) com linhas de corte */
#print-area .pr-nup { display: grid; grid-template-columns: 1fr 1fr; height: 284mm; }
#print-area .pr-nup-6 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
#print-area .pr-nup-8 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
#print-area .pr-cell { box-sizing: border-box; min-height: 0; overflow: hidden; padding: 3.5mm; }
#print-area .pr-cell:nth-child(odd of .pr-cell) { border-right: .6pt dashed #888; }
#print-area .pr-nup-6 .pr-cell:nth-child(-n+4 of .pr-cell), #print-area .pr-nup-8 .pr-cell:nth-child(-n+6 of .pr-cell) { border-bottom: .6pt dashed #888; }
#print-area .pr-mini { height: 100%; overflow: hidden; font-size: var(--mini, 8pt); line-height: 1.2; }
#print-area .pr-mini-head { margin: 0 0 .45em; text-align: center; font-size: 1.15em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: "Cormorant Garamond", Georgia, serif; }
#print-area .pr-mini-head b { font-weight: 700; }
#print-area .pr-mini table { width: 100%; border-collapse: collapse; table-layout: fixed; border: .8pt solid #000; }
#print-area .pr-mini th, #print-area .pr-mini td { text-align: center; vertical-align: middle; padding: .22em .3em; border: 0; overflow-wrap: anywhere; }
#print-area .pr-mini th { background: #000; color: #fff; font-size: .72em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
#print-area .pr-mini tbody td { border-bottom: .4pt solid #c4c4c4; }
#print-area .pr-mini tbody td + td { border-left: .4pt solid #d6d6d6; }
#print-area .pr-mini tbody + tbody tr:first-child td { border-top: .8pt solid #000; }
#print-area .pr-mini .pr-mini-sec { background: #e9e9e9; border-left: 0; font-size: .74em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

@media screen {
  #print-area.is-preview { display: block; position: fixed; inset: 0; z-index: 70; overflow: auto; background: #080D12; padding: 68px 12px 28px; }
  #print-area.is-preview .pv-paper { width: 210mm; min-height: 297mm; margin: 0 auto; padding: 18mm 16mm; box-shadow: 0 10px 40px rgb(0 0 0 / .6); }
  #print-area.is-preview .pv-paper.is-nup { padding: 6mm; }
  #print-area.is-measure { display: block; position: fixed; left: -10000px; top: 0; }
  #print-area.is-measure .pv-paper { width: 210mm; box-sizing: border-box; padding: 6mm; }
  #print-area.is-preview .pr-lyrics { margin-top: 18mm; padding-top: 12mm; border-top: 1px dashed #aaa; }
  #print-area .pv-bar { position: fixed; top: 0; inset-inline: 0; z-index: 71; height: 56px; display: flex; align-items: center; gap: 8px;
    padding: 0 10px; background: #121A24; color: #fff; border-bottom: 1px solid #253547; }
  #print-area .pv-title { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: "Cormorant Garamond", Georgia, serif; }
  #print-area .pv-btn { height: 40px; min-width: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-weight: 700; font-size: 14px; color: #fff; background: rgb(255 255 255 / .12); }
  #print-area .pv-btn:disabled { opacity: .6; }
  #print-area .pv-wide { padding: 0 14px; }
  #print-area .pv-primary { background: rgb(var(--accent)); color: rgb(var(--on-accent)); }
}

@media print {
  @page { size: A4; margin: 18mm 16mm; }
  html, body { background: #fff !important; color: #000 !important; }
  [x-data] > *:not(#print-area) { display: none !important; }
  #print-area { display: block !important; position: static !important; padding: 0 !important; background: #fff !important; overflow: visible !important; }
  #print-area .pv-bar { display: none !important; }
  #print-area .pv-paper { zoom: 1 !important; width: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
  #print-area .pr-lyrics { break-before: page; margin: 0 !important; padding: 0 !important; border: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}