/* ==========================================================================
   Talke Choir — protótipo mobile-first
   Tokens derivados do brandbook Talke v1.0
   ========================================================================== */

:root{
  /* Paleta — brandbook */
  --ink:      #0A1E38;
  --ink-2:    #0E284A;
  --navy:     #1A365D;
  --navy-2:   #234876;
  --cyan:     #08D4EC;
  --cyan-soft:#5FE6F6;
  --cloud:    #EAF6FB;
  --slate:    #5B7185;
  --slate-2:  #7D97B4;
  --mist:     #AFC0D2;
  --danger:   #D9485F;

  --line:     rgba(95,230,246,.14);
  --line-2:   rgba(175,192,210,.16);
  --surface:  #0E284A;
  --surface-2:#12305A;

  /* Tipografia — brandbook */
  --display:'DM Sans', system-ui, sans-serif;
  --body:'Inter', system-ui, sans-serif;
  --mono:'Space Mono', ui-monospace, monospace;

  /* Ritmo */
  --gut: 20px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --app-w: 430px;
}

*,*::before,*::after{ box-sizing:border-box; }

/* display:flex/grid vence o [hidden] do user-agent — reforçamos aqui. */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--body);
  font-size:16px;
  line-height:1.5;
  color:var(--cloud);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}

/* Fundo: o eco do sorriso, muito discreto */
body::before{
  content:'';
  position:fixed; inset:0;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(8,212,236,.10), transparent 60%),
    radial-gradient(90% 50% at 50% 108%, rgba(26,54,93,.55), transparent 70%);
  pointer-events:none;
  z-index:0;
}

button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; }
input{ font:inherit; }

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:6px;
}

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ==========================================================================
   Casca do app
   ========================================================================== */

.app{
  position:relative;
  z-index:1;
  max-width:var(--app-w);
  margin:0 auto;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

@media (min-width:900px){
  body{ padding:32px 0; }
  .app{
    min-height:auto;
    height:min(900px, calc(100dvh - 64px));
    border:1px solid var(--line-2);
    border-radius:34px;
    overflow:hidden;
    background:var(--ink);
    box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  }
}

.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:max(14px, env(safe-area-inset-top)) var(--gut) 12px;
  min-height:56px;
}
.topbar__mark{ display:flex; align-items:center; gap:9px; }
.topbar__word{
  font-family:var(--display);
  font-weight:700;
  font-size:16px;
  letter-spacing:-.01em;
}
.topbar__word span{ color:var(--cyan); }
.topbar__spacer{ flex:1; }

.iconbtn{
  width:44px; height:44px;
  margin-left:-8px;
  display:grid; place-items:center;
  border-radius:var(--r-pill);
  color:var(--mist);
  transition:background .15s var(--ease), color .15s var(--ease);
}
.iconbtn:hover{ background:rgba(175,192,210,.10); color:var(--cloud); }

.view{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:4px var(--gut) 28px;
}

/* ==========================================================================
   Tipografia
   ========================================================================== */

.h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(28px,7.6vw,34px);
  line-height:1.1;
  letter-spacing:-.025em;
  margin:12px 0 6px;
}
.h2{
  font-family:var(--display);
  font-weight:600;
  font-size:19px;
  letter-spacing:-.015em;
  margin:0 0 10px;
}
.lede{ color:var(--slate-2); margin:0 0 22px; font-size:15px; }
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cyan);
  margin:0 0 6px;
}
.note{ color:var(--slate-2); font-size:13px; line-height:1.5; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ==========================================================================
   Botões
   ========================================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:52px;
  padding:0 20px;
  border-radius:var(--r-pill);
  font-family:var(--display);
  font-weight:600;
  font-size:16px;
  letter-spacing:-.01em;
  transition:transform .12s var(--ease), background .15s var(--ease), opacity .15s var(--ease);
}
.btn:active{ transform:scale(.978); }
.btn--primary{ background:var(--cyan); color:var(--ink); }
.btn--primary:hover{ background:var(--cyan-soft); }
.btn--ghost{
  background:transparent;
  color:var(--cloud);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.btn--ghost:hover{ background:rgba(175,192,210,.08); }
.btn[disabled]{ opacity:.4; pointer-events:none; }
.btn--sm{ min-height:44px; font-size:15px; width:auto; }

.stack{ display:grid; gap:10px; }

/* ==========================================================================
   Campos
   ========================================================================== */

.field{ display:block; margin-bottom:16px; }
.field__label{
  display:block;
  font-size:13px;
  font-weight:500;
  color:var(--mist);
  margin-bottom:7px;
}
.field__input{
  width:100%;
  min-height:52px;
  padding:0 16px;
  border-radius:var(--r-md);
  background:var(--surface);
  color:var(--cloud);
  border:1px solid var(--line-2);
  transition:border-color .15s var(--ease);
}
.field__input::placeholder{ color:var(--slate-2); }
.field__input:focus{ border-color:var(--cyan); outline:none; }

.check{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-radius:var(--r-md);
  background:var(--surface);
  border:1px solid var(--line-2);
  cursor:pointer;
  font-size:13.5px;
  line-height:1.45;
  color:var(--mist);
}
.check input{
  appearance:none;
  flex:none;
  width:22px; height:22px;
  margin-top:1px;
  border-radius:6px;
  border:1.6px solid var(--slate);
  display:grid; place-items:center;
  transition:background .15s var(--ease), border-color .15s var(--ease);
}
.check input:checked{ background:var(--cyan); border-color:var(--cyan); }
.check input:checked::after{
  content:'';
  width:11px; height:6px;
  border-left:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  transform:rotate(-45deg) translate(1px,-1px);
}

/* Segmentos: arquivo | link */
.seg{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  padding:4px;
  background:var(--surface);
  border-radius:var(--r-pill);
  margin-bottom:20px;
}
.seg__btn{
  min-height:44px;
  border-radius:var(--r-pill);
  font-size:14.5px;
  font-weight:500;
  color:var(--slate-2);
  transition:background .18s var(--ease), color .18s var(--ease);
}
.seg__btn[aria-selected="true"]{ background:var(--navy-2); color:var(--cloud); }

/* ==========================================================================
   Cartões de faixa
   ========================================================================== */

.cards{ display:grid; gap:10px; margin:0 0 20px; padding:0; list-style:none; }

.card{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  text-align:left;
  padding:14px;
  border-radius:var(--r-md);
  background:var(--surface);
  border:1px solid var(--line-2);
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
.card:hover{ border-color:var(--line); background:var(--surface-2); }

.card__glyph{
  flex:none;
  width:46px; height:46px;
  display:grid; place-items:center;
  border-radius:12px;
  background:var(--navy);
  color:var(--cyan);
}
.card__body{ flex:1; min-width:0; }
.card__title{
  font-family:var(--display);
  font-weight:600;
  font-size:15.5px;
  letter-spacing:-.01em;
  margin:0 0 3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card__meta{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--slate-2);
}
.card__chev{ flex:none; color:var(--slate-2); }

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:3px 9px;
  border-radius:var(--r-pill);
  background:rgba(175,192,210,.12);
  color:var(--mist);
}
.chip--ready{ background:rgba(8,212,236,.14); color:var(--cyan); }
.chip--work{ background:rgba(8,212,236,.10); color:var(--cyan-soft); }
.chip--fail{ background:rgba(217,72,95,.16); color:#F09AA8; }
.chip__dot{
  width:6px; height:6px; border-radius:50%;
  background:currentColor;
}
.chip--work .chip__dot{ animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* Vazio */
.empty{
  text-align:center;
  padding:44px 8px 32px;
}
.empty__art{ margin:0 auto 22px; display:block; }
.empty__title{
  font-family:var(--display);
  font-weight:600;
  font-size:20px;
  letter-spacing:-.015em;
  margin:0 0 8px;
}
.empty__text{ color:var(--slate-2); font-size:14.5px; margin:0 auto 24px; max-width:30ch; }

/* ==========================================================================
   Cota
   ========================================================================== */

.quota{
  padding:14px 16px;
  border-radius:var(--r-md);
  background:var(--surface);
  border:1px solid var(--line-2);
  margin-bottom:20px;
}
.quota__row{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:13px; color:var(--mist); margin-bottom:9px;
}
.quota__val{ font-family:var(--mono); font-size:13px; color:var(--cloud); }
.quota__bar{ height:5px; border-radius:var(--r-pill); background:rgba(175,192,210,.16); overflow:hidden; }
.quota__fill{ height:100%; border-radius:var(--r-pill); background:var(--cyan); }

/* ==========================================================================
   Zona de envio
   ========================================================================== */

.drop{
  display:grid;
  place-items:center;
  gap:10px;
  width:100%;
  padding:34px 20px;
  border-radius:var(--r-lg);
  background:rgba(26,54,93,.34);
  border:1.6px dashed rgba(175,192,210,.28);
  text-align:center;
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
.drop:hover{ border-color:var(--cyan); background:rgba(8,212,236,.06); }
.drop__title{ font-family:var(--display); font-weight:600; font-size:16px; }
.drop__hint{ font-family:var(--mono); font-size:12px; line-height:1.7; color:var(--slate-2); letter-spacing:.02em; }

/* ==========================================================================
   ASSINATURA — o Sorriso Empilhado
   ========================================================================== */

.voices{
  margin:8px 0 4px;
  padding:6px 0;
  list-style:none;
}

.voice{
  position:relative;
  z-index:1;
  display:block;
  padding:0;
  margin-bottom:2px;
  border-radius:12px;
  touch-action:pan-y;
  cursor:ew-resize;
}
.voice:hover .voice__arc{ opacity:.9; }

.voice__head{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  height:22px;
  pointer-events:none;
}
.voice__name{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--slate-2);
  transition:color .18s var(--ease);
}
.voice__val{
  margin-left:auto;
  font-family:var(--mono);
  font-size:11px;
  color:var(--slate-2);
  font-variant-numeric:tabular-nums;
  transition:color .18s var(--ease);
}
.voice__svg{
  display:block;
  width:100%;
  height:44px;
  margin-top:-10px;
  overflow:visible;
}
.voice__arc{
  fill:none;
  stroke:var(--slate-2);
  stroke-width:3;
  stroke-linecap:round;
  opacity:.62;
  transition:stroke .22s var(--ease), opacity .18s var(--ease), stroke-width .12s var(--ease);
}
/* o naipe do cantor — o único ciano */
.voice.is-mine .voice__arc{ stroke:var(--cyan); opacity:1; }
.voice.is-mine .voice__name{ color:var(--cyan); }
.voice.is-mine .voice__val{ color:var(--cyan-soft); }

.voice.is-muted .voice__arc{ stroke:var(--slate); opacity:.45; }
.voice.is-muted .voice__name,
.voice.is-muted .voice__val{ color:var(--slate); }

.voice.is-dragging .voice__arc{ stroke-width:4; opacity:1; }

/* Playback instrumental: não é voz — não é arco */
.voices__rule{
  height:1px;
  position:relative;
  z-index:3;
  background:var(--line-2);
  margin:22px 12px 14px;
  border:0;
}
.bed{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 12px 4px;
  touch-action:pan-y;
  cursor:ew-resize;
}
.bed__name{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--slate-2);
  flex:none;
}
.bed__track{
  flex:1;
  height:26px;
  display:flex;
  align-items:center;
}
.bed__bar{
  width:100%;
  height:4px;
  border-radius:var(--r-pill);
  background:rgba(175,192,210,.16);
  overflow:hidden;
}
.bed__fill{ height:100%; background:var(--navy-2); border-radius:var(--r-pill); }
.bed__val{ font-family:var(--mono); font-size:11px; color:var(--slate-2); flex:none; }

/* Transporte */
.transport{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 4px 4px;
}
.play{
  flex:none;
  width:56px; height:56px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--cyan);
  color:var(--ink);
  transition:transform .12s var(--ease), background .15s var(--ease);
}
.play:active{ transform:scale(.94); }
.play:hover{ background:var(--cyan-soft); }
.scrub{ flex:1; }
.scrub__times{
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:11.5px; color:var(--slate-2);
  margin-bottom:7px;
  font-variant-numeric:tabular-nums;
}
.scrub__bar{ height:4px; border-radius:var(--r-pill); background:rgba(175,192,210,.18); }
.scrub__fill{ height:100%; border-radius:var(--r-pill); background:var(--mist); }

.toolbar{
  display:flex; gap:8px; flex-wrap:wrap;
  margin:18px 0 6px;
}
.toggle{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:0 16px;
  border-radius:var(--r-pill);
  font-size:14px; font-weight:500;
  color:var(--mist);
  box-shadow:inset 0 0 0 1px var(--line-2);
  transition:background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.toggle[aria-pressed="true"]{
  background:rgba(8,212,236,.14);
  color:var(--cyan);
  box-shadow:inset 0 0 0 1px rgba(8,212,236,.4);
}

/* ==========================================================================
   Processando — o arco que se divide
   ========================================================================== */

.split{
  display:block;
  width:100%;
  max-width:280px;
  margin:26px auto 24px;
  overflow:visible;
}
.split__arc{
  fill:none;
  stroke:var(--cyan);
  stroke-width:2.6;
  stroke-linecap:round;
  transform-origin:center;
  animation:split 3.4s var(--ease) infinite alternate;
  animation-delay:calc(var(--i) * 60ms);
}
.split__arc:nth-child(1){ stroke:var(--navy-2); }
.split__arc:nth-child(2){ stroke:#2E6F9E; }
.split__arc:nth-child(3){ stroke:#1E9DC4; }
@keyframes split{
  0%   { transform:translateY(0) scaleX(1); opacity:.35; }
  35%  { opacity:1; }
  100% { transform:translateY(var(--ty)) scaleX(var(--sx)); opacity:1; }
}

.steps{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:2px; }
.step{
  display:flex; align-items:center; gap:12px;
  padding:11px 4px;
  font-size:14.5px;
  color:var(--slate-2);
}
.step__mark{
  flex:none;
  width:22px; height:22px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1.6px solid rgba(175,192,210,.28);
  color:var(--slate-2);
}
.step.is-done{ color:var(--mist); }
.step.is-done .step__mark{ border-color:var(--navy-2); background:var(--navy-2); color:var(--cloud); }
.step.is-now{ color:var(--cloud); font-weight:500; }
.step.is-now .step__mark{ border-color:var(--cyan); color:var(--cyan); }
.step.is-now .step__mark::after{
  content:''; width:8px; height:8px; border-radius:50%; background:var(--cyan);
  animation:pulse 1.4s ease-in-out infinite;
}

.callout{
  display:flex; gap:12px;
  padding:14px;
  border-radius:var(--r-md);
  background:rgba(26,54,93,.5);
  border:1px solid var(--line-2);
  font-size:13.5px;
  line-height:1.5;
  color:var(--mist);
  margin-bottom:14px;
}
.callout__ico{ flex:none; color:var(--cyan); margin-top:1px; }
.callout--warn{ border-color:rgba(217,72,95,.3); background:rgba(217,72,95,.08); }
.callout--warn .callout__ico{ color:var(--danger); }

/* ==========================================================================
   Downloads
   ========================================================================== */

.dl{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:1px;
  border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line-2); }
.dl__item{
  display:flex; align-items:center; gap:12px;
  width:100%;
  min-height:52px;
  padding:0 14px;
  background:var(--surface);
  font-size:14.5px;
  transition:background .15s var(--ease);
}
.dl__item:hover{ background:var(--surface-2); }
.dl__name{ flex:1; text-align:left; }
.dl__size{ font-family:var(--mono); font-size:11.5px; color:var(--slate-2); }
.dl__ico{ color:var(--slate-2); flex:none; }
.dl__item.is-mine .dl__name{ color:var(--cyan); }

/* ==========================================================================
   Navegação inferior
   ========================================================================== */

.tabbar{
  display:flex;
  border-top:1px solid var(--line-2);
  background:rgba(10,30,56,.9);
  backdrop-filter:blur(14px);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{
  flex:1;
  display:grid;
  justify-items:center;
  gap:4px;
  padding:9px 4px 8px;
  min-height:56px;
  color:var(--slate);
  transition:color .15s var(--ease);
}
.tab__label{ font-size:10.5px; font-weight:500; letter-spacing:.01em; }
.tab[aria-current="page"]{ color:var(--cyan); }
.tab:hover{ color:var(--mist); }

/* ==========================================================================
   Login
   ========================================================================== */

.auth{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:32px var(--gut) max(32px, env(safe-area-inset-bottom));
}
.auth__mark{ margin:0 0 26px; }
.auth__title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(30px,8.4vw,38px);
  line-height:1.05;
  letter-spacing:-.03em;
  margin:0 0 10px;
}
.auth__title span{ color:var(--cyan); }
.auth__sub{ color:var(--slate-2); margin:0 0 32px; font-size:15.5px; }
.auth__foot{ margin-top:22px; text-align:center; }

/* ==========================================================================
   Letra sincronizada — bottom sheet (task-1-brief.md, plano7-letra)
   Fidelidade a prototype/letra2.html (aprovado: a folha) + o estado
   "Escrevendo a letra…" de prototype/letra.html (.lyrics--empty, que reusa
   os arcos .split já existentes acima). Três alturas: fechada (só a alça),
   is-peek (meia tela) e is-full (tela cheia) — mesma máquina de estados do
   mockup, só que FECHADA por padrão mesmo quando há letra pronta (o mockup
   abria em is-peek; aqui não, para não competir com o player ao abrir a
   tela — task-1-brief.md).
   ========================================================================== */

.sheet{
  position:fixed; left:0; right:0; bottom:0;
  z-index:40;
  max-width:var(--app-w); margin:0 auto;
  background:linear-gradient(180deg, #12305A, #0E284A 30%);
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:22px 22px 0 0;
  box-shadow:0 -24px 60px -20px rgba(0,0,0,.75);
  transform:translateY(calc(100% - 52px));   /* fechado: só a alça aparece */
  transition:transform .38s var(--ease), height .38s var(--ease);
  height:52svh;
  display:flex; flex-direction:column;
}
.sheet.is-peek{ transform:translateY(0); }
.sheet.is-full{ transform:translateY(0); height:calc(100svh - 64px); }
/* Durante o arrasto real (pointer), o JS assume transform/height por
   inline style quadro a quadro — a transição do CSS atrapalharia (correria
   atrás do dedo em vez de seguir junto). */
.sheet.is-dragging{ transition:none; }

.sheet__handle{
  flex:none;
  display:grid; justify-items:center; gap:7px;
  padding:10px 16px 8px;
  cursor:grab;
  min-height:52px;
  touch-action:none; /* o próprio JS decide o gesto (arrastar a folha) */
}
.sheet__handle:active{ cursor:grabbing; }
.sheet__grip{ width:38px; height:4px; border-radius:99px; background:rgba(175,192,210,.35); }
.sheet__title{
  display:flex; align-items:center; gap:8px; width:100%;
  font-family:var(--display); font-weight:600; font-size:14px; color:var(--mist);
}
.sheet__title .mono{ margin-left:auto; font-size:10.5px; color:var(--slate-2); letter-spacing:.08em; }
/* Descoberta da cifra (task-1-brief.md — plano8-cifra): dica discreta na
   alça, some depois do primeiro uso do toggle (localStorage). */
.sheet__cifra-hint{ color:var(--cyan); font-weight:600; font-size:13px; }

.sheet__body{ flex:1; position:relative; overflow:hidden; }
.sheet__body.has-lines{
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
}
.lyrics__scroll{
  position:absolute; inset:0;
  padding:90px 18px 120px;
  transition:transform .6s var(--ease);
}
.lyric{
  position:relative; display:block; width:100%; text-align:left;
  padding:8px 12px 8px 18px; border-radius:10px;
  font-family:var(--display); font-size:18px; line-height:1.35;
  letter-spacing:-.015em; font-weight:500;
  color:var(--slate); opacity:.75; cursor:pointer;
  transition:color .35s var(--ease), font-size .35s var(--ease), opacity .35s var(--ease);
}
.lyric.is-past{ opacity:.45; }
.lyric.is-now{ color:var(--cloud); font-weight:700; font-size:21px; opacity:1; }
.lyric.is-now::before{
  content:''; position:absolute; left:0; top:11px; bottom:11px;
  width:3px; border-radius:99px; background:var(--cyan);
}
.lyric__time{
  font-family:var(--mono); font-size:10.5px; color:var(--slate);
  margin-left:10px; opacity:0; transition:opacity .3s; font-variant-numeric:tabular-nums;
}
.lyric.is-now .lyric__time{ opacity:.8; color:var(--cyan-soft); }

/* Estado "escrevendo a letra…" — bloco de prototype/letra.html, dentro da
   folha em vez do painel inline do mockup mais antigo. */
.sheet__body .lyrics--empty{
  position:absolute; inset:0;
  height:auto;
  display:grid; place-items:center; gap:10px; align-content:center;
  padding:24px 20px;
  text-align:center;
}
.sheet__body .lyrics--empty .split{ margin:0 auto; max-width:150px; height:44px; }

/* linha discreta de "a letra não saiu desta vez" (sem drama) */
.lyrics-retry{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:2px 0 16px; }
.lyrics-retry form{ display:inline-flex; }
.lyrics-retry .btn{ min-height:34px; padding:0 14px; font-size:12.5px; }

/* Toggle "Cifra" (task-1-brief.md — plano8-cifra): irmão do botão da alça
   (nunca filho — <button> dentro de <button> seria inválido), sobreposto
   na mesma linha, à direita, por posição absoluta. */
.sheet__cifra{
  position:absolute; top:14px; right:16px; z-index:1;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--slate-2); background:rgba(175,192,210,.10);
  border:1px solid var(--line); border-radius:99px;
  padding:5px 11px; cursor:pointer;
  transition:color .2s, background .2s, border-color .2s;
}
.sheet__cifra[aria-pressed="true"]{
  color:var(--ink); background:var(--cyan); border-color:var(--cyan);
}

/* Linha de acordes acima de cada verso — Space Mono 12px, var(--mist); o
   acorde soando agora em var(--cyan-soft) (task-1-brief.md). */
.lyric-row{ position:relative; }
.chords-row{ position:relative; height:16px; margin:0 12px 0 18px; }
.chord{
  position:absolute; top:0; white-space:nowrap;
  font-family:var(--mono); font-size:12px; font-weight:700;
  color:var(--mist); transition:color .2s;
}
.chord.is-now{ color:var(--cyan-soft); }

/* Faixa sem letra mas com cifra: grade horizontal simples de acordes no
   lugar do bloco "escrevendo a letra…" (task-1-brief.md). */
.chords-grid{
  position:absolute; inset:0; overflow:auto;
  display:flex; flex-wrap:wrap; align-content:flex-start; gap:8px;
  padding:90px 18px 120px;
}
.chords-grid__item{
  font-family:var(--mono); font-size:13px; font-weight:700;
  color:var(--mist); background:rgba(175,192,210,.08);
  border:1px solid var(--line); border-radius:8px;
  padding:6px 12px; cursor:pointer; transition:color .2s, background .2s, border-color .2s;
}
.chords-grid__item.is-now{
  color:var(--cyan-soft); background:rgba(8,212,236,.10); border-color:var(--cyan-soft);
}

/* atrás da folha, a tela escurece só um pouco no modo cheio */
.scrim{
  position:fixed; inset:0; z-index:30; pointer-events:none;
  background:rgba(10,30,56,0); transition:background .38s;
}
.sheet.is-full ~ .scrim{ background:rgba(10,30,56,.45); }

/* ==========================================================================
   Movimento reduzido
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .split__arc{ transform:translateY(var(--ty)) scaleX(var(--sx)); opacity:1; }
}