/* ══════════════════════════════════════════════════════════════════════
   SPARKS — o acervo de modelos da casa                        v1 · 22/08
   ══════════════════════════════════════════════════════════════════════

   Pedido do Malex (22/08), com catorze referências na pasta
   `Modelos_sparks`: player de vídeo, de áudio e de rádio, caixa de texto,
   box de imagem, imagem com texto, formulário, alternativas, toggles,
   linhas, formas geométricas, botões e ícones — "todos devem seguir o
   mesmo estilo glassmorphism".

   ── O QUE AS REFERÊNCIAS TÊM EM COMUM, e é o que este arquivo codifica:
     · vidro fosco com BORDA DE LUZ de 1px no topo — é ela que dá o
       "vidro", não a transparência sozinha;
     · cantos muito arredondados (18–26px), e o pill inteiro quando a peça
       é um controle;
     · blur forte o bastante para o fundo virar cor, não imagem;
     · quando há foto atrás, o texto SEMPRE vem sobre um véu — nas
       referências isso é feito na mão; aqui é regra.

   ── POR QUE TOKENS E NÃO VALORES: a casa já se queimou com número fixo
   em arquivo compartilhado (o véu do `cartao.css`, calibrado no escuro e
   herdado pelo claro). Tudo aqui sai de variável, e cada app pode
   recalibrar sem bifurcar o canônico.

   ── CONTRASTE: todo par texto/fundo deste arquivo foi escolhido para
   passar de 4.5:1 nos dois temas. Onde há foto por baixo, o véu garante
   o piso — é por isso que ele não é opcional.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* o vidro */
  --sp-vidro:        color-mix(in oklab, #fff 22%, transparent);
  --sp-vidro-denso:  color-mix(in oklab, #fff 46%, transparent);
  --sp-borda:        color-mix(in oklab, #fff 42%, transparent);
  --sp-borda-luz:    color-mix(in oklab, #fff 70%, transparent);
  --sp-blur:         22px;
  --sp-sombra:       0 18px 44px -18px rgba(20,14,18,.42);
  /* o véu sobre foto — nunca opcional quando há texto */
  --sp-veu-a:        rgba(12,10,12,.86);
  --sp-veu-b:        rgba(12,10,12,.10);
  /* raios */
  --sp-r:            20px;
  --sp-r-p:          14px;
  --sp-r-pill:       999px;
  /* texto */
  --sp-ink:          var(--wa-ink, #1A1A1C);
  /* POR QUE O ACERVO TEM CINZAS PRÓPRIOS E NÃO HERDA OS DA CASA (26/09/2026).
     A Confraria propôs apontar estes dois a `--wa-muted`/`--wa-muted2`, como
     já fazem `--sp-ink` e `--sp-ac` — uma fonte só, e o acervo herdaria as
     correcções futuras. Fui medir e **no escuro não funciona**:

       o chão do cartão de spark não é o fundo da página. É o VIDRO:
       `--sp-vidro` (branco 22% claro / 9% escuro) e, em `.sp-denso`,
       `--sp-vidro-denso` (46% / 16%). No escuro, 16% de branco sobre o fundo
       do shell (#1a1330) dá **#3F3951** — o chão mais claro de toda a casa.
       Ali, o `--wa-muted2` da casa (#9797A1) mede **3,80:1** e o `--wa-muted`
       mede 4,67. Herdar punha o cartão a reprovar outra vez.

     E `.sp-denso` não é hipótese: são sete cartões do `sparks.html`, entre
     eles o `.sp-cit`, que é precisamente onde vive a legenda em `--sp-mut2`.

     A alternativa era clarear o escuro da CASA até passar aqui (#CECED4), e
     isso achatava o `muted` contra o `ink` (#F2F0EC) em todas as páginas —
     a cauda a abanar o cão. Então: dois chãos diferentes, dois pares de
     cinzas, cada um medido contra o SEU chão. É a mesma razão de "dois factos,
     dois nomes", e a guarda contra a divergência não é a herança, é o número
     escrito ao lado do valor.

     Medido contra os quatro chãos de cartão de cada modo (os dois véus sobre
     os dois fundos, nas duas famílias de paleta):
       claro   mut  #5C5851 6,10 → #534F49 7,02   ·  mut2 #7C776F 3,83 → #625E58 5,56
       escuro  mut  #ABA49B 4,46 → #D2CEC9 7,03   ·  mut2 #8F8880 3,14 → #BBB7B2 5,52
     ⚠️ O `--sp-mut` ESCURO também reprovava (4,46) e ninguém tinha visto,
     porque a medição anterior — a minha, e a da Confraria hoje — usou o véu
     de 9% e não o de 16%. Régua com um chão a menos. */
  --sp-mut:          #534F49;
  --sp-mut2:         #625E58;
  /* O FIO NÃO É LETRA, e agora tem nome próprio. Estes dois valores são o que
     `--sp-mut2` valia até hoje: os três usos de FIO (borda de 1,5px, o risco
     da citação, o traço de ícone) ficam exactamente como estavam, enquanto o
     texto escureceu. Sem isto, escurecer a letra engrossava um filete de
     1,5px num cartão claro — que é a armadilha que avisei os outros donos. */
  --sp-fio:          #7C776F;
  --sp-sobre-foto:   #fff;
  --sp-ac:           var(--wa-accent, #F4A384);
  /* O TEXTO SOBRE O ACENTO É ESCURO, e isto foi erro meu na primeira versão:
     eu tinha posto `--wa-bg-a` (quase branco) sobre o pêssego — 1.77:1,
     ilegível, e o tipo de coisa que passa porque "parece bonito". Ameixa
     sobre pêssego passa de 5:1. Medido, não estimado. */
  --sp-sobre-ac:     var(--wa-ameixa, #4A2C3F);
  /* o vidro das barras que flutuam sobre o conteúdo (barra de escrita):
     denso o bastante para o texto de baixo não brigar com os botões */
  --sp-barra:        color-mix(in oklab, var(--wa-bg-a, #F7F3EE) 80%, transparent);
  --sp-barra-linha:  var(--wa-line, rgba(26,26,28,.12));
}
:root:not([data-wa-theme="light"]){ }
@media (prefers-color-scheme: dark){
  :root:not([data-wa-theme="light"]){
    --sp-vidro:       color-mix(in oklab, #fff 9%, transparent);
    --sp-vidro-denso: color-mix(in oklab, #fff 16%, transparent);
    --sp-borda:       color-mix(in oklab, #fff 16%, transparent);
    --sp-borda-luz:   color-mix(in oklab, #fff 30%, transparent);
    --sp-sombra:      0 18px 44px -18px rgba(0,0,0,.6);
    /* (22/08) DEFEITO DE ORIGEM: este bloco virava o vidro e a borda e
       esquecia os CINZAS DE TEXTO. `--sp-mut` ficava #5C5851 — cinza
       escuro — sobre fundo escuro: 2.97:1, ilegível. O vidro é o que se
       vê primeiro, e por isso foi o único que alguém conferiu. */
    --sp-ink:         var(--wa-ink, #F2F0EC);
    --sp-mut:         #D2CEC9;
    --sp-mut2:        #BBB7B2;
    --sp-fio:         #8F8880;
    --sp-barra:       color-mix(in oklab, var(--wa-bg-a, #1C1A1D) 80%, transparent);
    --sp-barra-linha: var(--wa-line, rgba(242,240,236,.14));
  }
}
:root[data-wa-theme="dark"]{
  --sp-vidro:       color-mix(in oklab, #fff 9%, transparent);
  --sp-vidro-denso: color-mix(in oklab, #fff 16%, transparent);
  --sp-borda:       color-mix(in oklab, #fff 16%, transparent);
  --sp-borda-luz:   color-mix(in oklab, #fff 30%, transparent);
  --sp-sombra:      0 18px 44px -18px rgba(0,0,0,.6);
  /* (22/08) DEFEITO DE ORIGEM: este bloco virava o vidro e a borda e
     esquecia os CINZAS DE TEXTO. `--sp-mut` ficava #5C5851 — cinza
     escuro — sobre fundo escuro: 2.97:1, ilegível. O vidro é o que se
     vê primeiro, e por isso foi o único que alguém conferiu. */
  --sp-ink:         var(--wa-ink, #F2F0EC);
  --sp-mut:         #D2CEC9;
  --sp-mut2:        #BBB7B2;
  --sp-fio:         #8F8880;
  --sp-barra:       color-mix(in oklab, var(--wa-bg-a, #1C1A1D) 80%, transparent);
  --sp-barra-linha: var(--wa-line, rgba(242,240,236,.14));
}

/* ══ A BASE — todo spark é isto antes de ser qualquer coisa ══════════ */
.sp{
  position:relative; box-sizing:border-box;
  border-radius:var(--sp-r);
  background:var(--sp-vidro);
  -webkit-backdrop-filter:blur(var(--sp-blur)) saturate(1.25);
  backdrop-filter:blur(var(--sp-blur)) saturate(1.25);
  border:1px solid var(--sp-borda);
  box-shadow:var(--sp-sombra);
  color:var(--sp-ink);
  font:300 13px/1.5 inherit;
  overflow:hidden;
}
/* A BORDA DE LUZ. Nas referências é o que separa "caixa translúcida" de
   "vidro": uma linha mais clara só no topo, como se a luz batesse ali. */
.sp::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1px; pointer-events:none;
  background:linear-gradient(160deg,var(--sp-borda-luz),transparent 42%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.sp.sp-denso{ background:var(--sp-vidro-denso) }
.sp.sp-pill { border-radius:var(--sp-r-pill) }
.sp.sp-p    { border-radius:var(--sp-r-p) }
/* a variação "arco" das referências: topo redondo, base reta */
.sp.sp-arco { border-radius:140px 140px var(--sp-r) var(--sp-r) }

/* medidas de bolso */
.sp-w-p{ width:180px } .sp-w-m{ width:248px } .sp-w-g{ width:340px }
.sp-pad{ padding:16px 18px }

/* ══ TIPOGRAFIA DENTRO DO SPARK ═════════════════════════════════════ */
.sp-selo{ display:inline-block; font-size:8.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--sp-mut2);
  padding:4px 9px; border-radius:var(--sp-r-pill);
  background:color-mix(in oklab,var(--sp-ink) 8%,transparent) }
.sp-tit{ margin:8px 0 4px; font-size:19px; font-weight:400; line-height:1.2;
  letter-spacing:.01em; color:var(--sp-ink) }
.sp-sub{ margin:0; font-size:12px; color:var(--sp-mut) }
.sp-txt{ margin:10px 0 0; font-size:12.5px; line-height:1.6; color:var(--sp-ink) }
.sp-nota{ margin:10px 0 0; font-size:10.5px; color:var(--sp-mut2) }

/* ══ SOBRE FOTO — o véu é regra, não enfeite ════════════════════════ */
.sp-foto{ position:relative; display:block; width:100%; height:150px;
  object-fit:cover; border-radius:var(--sp-r-p) }
.sp-capa{ position:relative; min-height:210px;
  background:var(--sp-img,linear-gradient(150deg,#E2D5C2,#7A5063)) center/cover }
.sp-capa::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top,var(--sp-veu-a),var(--sp-veu-b) 62%,transparent) }
.sp-capa > .sp-sobre{ position:relative; z-index:1; padding:16px 18px;
  display:flex; flex-direction:column; justify-content:flex-end; min-height:210px;
  color:var(--sp-sobre-foto) }
.sp-capa .sp-tit,.sp-capa .sp-txt{ color:var(--sp-sobre-foto) }
.sp-capa .sp-sub,.sp-capa .sp-nota{ color:rgba(255,255,255,.8) }
.sp-capa .sp-selo{ color:#fff; background:rgba(255,255,255,.2) }

/* ══ 1 · PLAYER DE VÍDEO ════════════════════════════════════════════ */
.sp-video{ padding:0 }
.sp-video .tela{ position:relative; aspect-ratio:16/9; width:100%;
  background:var(--sp-img,linear-gradient(150deg,#4A2C3F,#0F0F11)) center/cover }
.sp-video .tela::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(10,8,10,.6),transparent 55%) }
.sp-video .play{ position:absolute; left:50%; top:50%; z-index:2;
  transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#fff }
.sp-video .play svg{ width:18px;height:18px;fill:currentColor;margin-left:2px }
.sp-video .pe{ padding:12px 14px 14px }
.sp-video .barra{ position:relative; height:3px; border-radius:99px;
  background:color-mix(in oklab,var(--sp-ink) 16%,transparent) }
.sp-video .barra i{ position:absolute; inset:0 auto 0 0; width:var(--sp-prog,38%);
  border-radius:99px; background:var(--sp-ac) }
.sp-video .barra b{ position:absolute; top:50%; left:var(--sp-prog,38%);
  width:9px;height:9px;border-radius:50%;background:var(--sp-ac);
  transform:translate(-50%,-50%) }
.sp-video .tempos{ display:flex; justify-content:space-between; margin-top:7px;
  font-size:10px; color:var(--sp-mut2); font-variant-numeric:tabular-nums }

/* ══ 2 · PLAYER DE ÁUDIO ════════════════════════════════════════════ */
.sp-audio{ padding:16px }
.sp-audio .linha{ display:flex; align-items:center; gap:13px }
.sp-audio .disco{ flex:0 0 auto; width:54px; height:54px; border-radius:50%;
  background:var(--sp-img,linear-gradient(150deg,#F4A384,#7A5063)) center/cover;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3) }
.sp-audio .quem{ min-width:0; flex:1 }
.sp-audio .quem b{ display:block; font-size:14px; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sp-audio .quem i{ display:block; font-style:normal; font-size:11.5px;
  color:var(--sp-mut); margin-top:1px }
.sp-audio .barra{ position:relative; height:3px; margin:14px 0 6px;
  border-radius:99px; background:color-mix(in oklab,var(--sp-ink) 16%,transparent) }
.sp-audio .barra i{ position:absolute; inset:0 auto 0 0; width:var(--sp-prog,20%);
  border-radius:99px; background:var(--sp-ac) }
.sp-audio .barra b{ position:absolute; top:50%; left:var(--sp-prog,20%);
  width:9px;height:9px;border-radius:50%;background:var(--sp-ac);
  transform:translate(-50%,-50%) }
.sp-audio .tempos{ display:flex; justify-content:space-between;
  font-size:10px; color:var(--sp-mut2); font-variant-numeric:tabular-nums }
.sp-audio .ctrl{ display:flex; align-items:center; justify-content:center;
  gap:16px; margin-top:12px; color:var(--sp-ink) }
.sp-audio .ctrl button{ border:0; background:transparent; color:inherit;
  cursor:pointer; line-height:0; padding:2px; opacity:.7 }
.sp-audio .ctrl button:hover{ opacity:1 }
.sp-audio .ctrl svg{ width:15px; height:15px; fill:currentColor }
.sp-audio .ctrl .grande{ width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; opacity:1;
  border:1px solid var(--sp-borda); background:var(--sp-vidro-denso) }
.sp-audio .ctrl .grande svg{ width:15px; height:15px; margin-left:2px }

/* ══ 3 · PLAYER DE RÁDIO ════════════════════════════════════════════
   O rádio não tem duração: tem SINAL. Por isso não leva barra de
   progresso — levaria a pessoa a procurar um fim que não existe. No lugar
   dela, a onda viva e o "no ar". */
.sp-radio{ padding:16px }
.sp-radio .topo{ display:flex; align-items:center; gap:10px }
.sp-radio .noar{ display:inline-flex; align-items:center; gap:6px;
  font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sp-ac); font-weight:500 }
.sp-radio .noar::before{ content:""; width:6px; height:6px; border-radius:50%;
  background:var(--sp-ac); box-shadow:0 0 0 0 var(--sp-ac);
  animation:spPulso 1.8s ease-out infinite }
@keyframes spPulso{ to{ box-shadow:0 0 0 7px transparent } }
.sp-radio .estacao{ margin:10px 0 2px; font-size:17px; font-weight:400 }
.sp-radio .agora{ margin:0; font-size:11.5px; color:var(--sp-mut) }
.sp-radio .onda{ display:flex; align-items:flex-end; gap:3px; height:26px;
  margin:14px 0 4px }
.sp-radio .onda i{ flex:1; border-radius:99px; background:var(--sp-ac);
  opacity:.55; animation:spOnda 1.1s ease-in-out infinite alternate }
.sp-radio .onda i:nth-child(2n){ animation-duration:1.4s }
.sp-radio .onda i:nth-child(3n){ animation-duration:.9s; opacity:.8 }
@keyframes spOnda{ from{ height:18% } to{ height:100% } }
@media (prefers-reduced-motion:reduce){
  .sp-radio .onda i{ animation:none; height:52% }
  .sp-radio .noar::before{ animation:none }
}

/* ══ 4 · CAIXA DE TEXTO ═════════════════════════════════════════════ */
.sp-texto{ padding:18px 20px }
.sp-texto .marca{ display:block; width:2px; height:30px; border-radius:99px;
  background:var(--sp-ac); margin-bottom:12px }
.sp-texto .corpo{ font-size:13px; line-height:1.72; color:var(--sp-ink) }
.sp-texto .corpo p{ margin:0 0 10px } .sp-texto .corpo p:last-child{ margin:0 }
.sp-texto.sp-citacao .corpo{ font-size:14.5px; line-height:1.62;
  font-style:italic; color:var(--sp-ink) }
.sp-texto .assina{ display:flex; gap:8px; align-items:center; margin-top:14px;
  font-size:10.5px; color:var(--sp-mut2) }

/* ══ 5 · BOX DE IMAGEM ══════════════════════════════════════════════ */
.sp-img{ padding:8px }
.sp-img .quadro{ width:100%; aspect-ratio:4/5; border-radius:var(--sp-r-p);
  background:var(--sp-img,linear-gradient(150deg,#E2D5C2,#486D83)) center/cover }
.sp-img.sp-quadrada .quadro{ aspect-ratio:1 }
.sp-img.sp-larga  .quadro{ aspect-ratio:16/9 }
.sp-img .legenda{ padding:10px 8px 4px; font-size:11px; color:var(--sp-mut) }

/* ══ 6 · IMAGEM COM TEXTO ═══════════════════════════════════════════ */
.sp-imgtxt{ padding:0 }
.sp-imgtxt .quadro{ width:100%; height:170px;
  background:var(--sp-img,linear-gradient(150deg,#F4A384,#4A2C3F)) center/cover }
.sp-imgtxt .pe{ padding:14px 16px 16px }
/* a variação "lado a lado" das referências */
.sp-imgtxt.sp-lado{ display:flex; align-items:stretch }
.sp-imgtxt.sp-lado .quadro{ flex:0 0 40%; height:auto; min-height:120px }
.sp-imgtxt.sp-lado .pe{ flex:1; min-width:0 }
/* a variação "por cima" — texto sobre a foto, com véu */
.sp-imgtxt.sp-sobreposto{ position:relative; min-height:220px;
  background:var(--sp-img,linear-gradient(150deg,#486D83,#0F0F11)) center/cover }
.sp-imgtxt.sp-sobreposto::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top,var(--sp-veu-a),var(--sp-veu-b) 60%,transparent) }
.sp-imgtxt.sp-sobreposto .pe{ position:relative; z-index:1; margin-top:auto;
  color:var(--sp-sobre-foto) }
.sp-imgtxt.sp-sobreposto{ display:flex; flex-direction:column }
.sp-imgtxt.sp-sobreposto .sp-tit{ color:#fff }
.sp-imgtxt.sp-sobreposto .sp-sub,.sp-imgtxt.sp-sobreposto .sp-txt{ color:rgba(255,255,255,.86) }

/* ══ 7 · FORMULÁRIO ═════════════════════════════════════════════════ */
.sp-form{ padding:18px }
.sp-campo{ margin-bottom:12px }
.sp-campo > label{ display:block; font-size:9.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sp-mut2);
  margin-bottom:6px }
.sp-campo input[type=text],.sp-campo input[type=email],
.sp-campo input[type=number],.sp-campo textarea,.sp-campo select{
  width:100%; box-sizing:border-box; font:inherit; font-size:13px;
  padding:11px 14px; border-radius:var(--sp-r-p);
  border:1px solid var(--sp-borda); background:var(--sp-vidro-denso);
  color:var(--sp-ink); outline:none; transition:border-color .16s }
.sp-campo textarea{ min-height:82px; resize:vertical }
.sp-campo input:focus,.sp-campo textarea:focus,.sp-campo select:focus{
  border-color:var(--sp-ac) }
.sp-campo input::placeholder,.sp-campo textarea::placeholder{ color:var(--sp-mut2) }
.sp-form .acoes{ display:flex; gap:8px; margin-top:14px }

/* ══ 8 · ALTERNATIVAS ═══════════════════════════════════════════════ */
.sp-alt{ padding:16px }
.sp-alt .op{ display:flex; align-items:center; gap:11px; cursor:pointer;
  padding:12px 14px; border-radius:var(--sp-r-p); margin-bottom:7px;
  border:1px solid var(--sp-borda); background:var(--sp-vidro);
  transition:border-color .15s, background .15s }
.sp-alt .op:last-child{ margin-bottom:0 }
.sp-alt .op:hover{ border-color:var(--sp-ac) }
.sp-alt .op input{ position:absolute; opacity:0; pointer-events:none }
.sp-alt .marca{ flex:0 0 auto; width:19px; height:19px; border-radius:50%;
  border:1.5px solid var(--sp-fio); display:grid; place-items:center;
  transition:.15s }
.sp-alt .marca svg{ width:11px; height:11px; fill:none; stroke:#fff;
  stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  opacity:0; transition:.15s }
.sp-alt .op:has(input:checked){ border-color:var(--sp-ac);
  background:color-mix(in oklab,var(--sp-ac) 12%,transparent) }
.sp-alt .op:has(input:checked) .marca{ background:var(--sp-ac);
  border-color:var(--sp-ac) }
.sp-alt .op:has(input:checked) .marca svg{ opacity:1 }
.sp-alt .op span{ font-size:13px; line-height:1.4 }
/* quadrada = múltipla escolha; redonda = uma só. A forma diz a regra. */
.sp-alt.sp-multi .marca{ border-radius:6px }

/* ══ 9 · TOGGLES ════════════════════════════════════════════════════ */
.sp-toggles{ padding:16px }
.sp-tg{ display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:11px 2px; cursor:pointer }
.sp-tg + .sp-tg{ border-top:1px solid color-mix(in oklab,var(--sp-ink) 8%,transparent) }
.sp-tg .rot b{ display:block; font-size:13px; font-weight:400 }
.sp-tg .rot i{ display:block; font-style:normal; font-size:11px;
  color:var(--sp-mut); margin-top:2px }
.sp-tg input{ position:absolute; opacity:0; pointer-events:none }
.sp-tg .chave{ flex:0 0 auto; width:42px; height:24px; border-radius:99px;
  background:color-mix(in oklab,var(--sp-ink) 14%,transparent);
  border:1px solid var(--sp-borda); position:relative; transition:.2s }
.sp-tg .chave::after{ content:""; position:absolute; top:2px; left:2px;
  width:18px; height:18px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25); transition:.2s }
.sp-tg:has(input:checked) .chave{ background:var(--sp-ac); border-color:var(--sp-ac) }
.sp-tg:has(input:checked) .chave::after{ left:22px }

/* ══ 10 · LINHAS ════════════════════════════════════════════════════ */
.sp-linhas{ padding:6px 0 }
.sp-lin{ display:flex; align-items:center; gap:12px; padding:13px 18px;
  cursor:pointer; transition:background .15s }
.sp-lin:hover{ background:color-mix(in oklab,var(--sp-ink) 4%,transparent) }
.sp-lin + .sp-lin{ border-top:1px solid color-mix(in oklab,var(--sp-ink) 7%,transparent) }
.sp-lin .n{ flex:0 0 auto; font-size:15px; font-weight:300; color:var(--sp-mut2);
  font-variant-numeric:tabular-nums; min-width:22px }
.sp-lin .cx{ flex:0 0 auto; width:34px; height:34px; border-radius:11px;
  display:grid; place-items:center; border:1px solid var(--sp-borda);
  background:var(--sp-vidro-denso); color:var(--sp-ink) }
.sp-lin .cx svg{ width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.sp-lin .tx{ min-width:0; flex:1 }
.sp-lin .tx b{ display:block; font-size:13px; font-weight:500 }
.sp-lin .tx i{ display:block; font-style:normal; font-size:11px;
  color:var(--sp-mut); margin-top:1px }
.sp-lin .seta{ flex:0 0 auto; color:var(--sp-mut2) }
.sp-lin .seta svg{ width:13px; height:13px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round }
/* separadores soltos, para compor dentro de outros sparks */
.sp-regua{ height:1px; border:0; margin:14px 0;
  background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--sp-ink) 16%,transparent),transparent) }
.sp-regua-cheia{ height:1px; border:0; margin:14px 0;
  background:color-mix(in oklab,var(--sp-ink) 12%,transparent) }
.sp-regua-tracejada{ height:0; border:0; border-top:1px dashed
  color-mix(in oklab,var(--sp-ink) 22%,transparent); margin:14px 0 }

/* ══ 11 · FORMAS GEOMÉTRICAS ════════════════════════════════════════
   Vidro em formas puras, para compor fundo e ritmo sem trazer imagem.
   Nas referências elas aparecem como esferas e toros 3D; aqui são feitas
   com gradiente, que pesa nada e acompanha o tema. */
.sp-forma{ position:relative; display:inline-block; vertical-align:middle;
  background:linear-gradient(150deg,
    color-mix(in oklab,var(--sp-ac) 78%,#fff),
    color-mix(in oklab,var(--sp-ac) 44%,var(--wa-carmim,#7A5063)));
  box-shadow:inset 0 2px 10px rgba(255,255,255,.45),
             inset 0 -6px 14px rgba(0,0,0,.16), var(--sp-sombra) }
.sp-forma.circulo  { width:76px;height:76px;border-radius:50% }
.sp-forma.pilula   { width:120px;height:52px;border-radius:99px }
.sp-forma.quadrado { width:76px;height:76px;border-radius:22px }
.sp-forma.gota     { width:76px;height:76px;border-radius:50% 50% 50% 12px }
.sp-forma.folha    { width:76px;height:76px;border-radius:50% 12px 50% 12px }
.sp-forma.arco     { width:76px;height:96px;border-radius:99px 99px 18px 18px }
.sp-forma.anel     { width:76px;height:76px;border-radius:50%; background:none;
  border:14px solid color-mix(in oklab,var(--sp-ac) 62%,transparent);
  box-shadow:var(--sp-sombra) }
.sp-forma.vidro{ background:var(--sp-vidro-denso);
  border:1px solid var(--sp-borda);
  -webkit-backdrop-filter:blur(var(--sp-blur)); backdrop-filter:blur(var(--sp-blur));
  box-shadow:var(--sp-sombra) }

/* ══ 12 · BOTÕES ════════════════════════════════════════════════════ */
.sp-btn{ display:inline-flex; align-items:center; justify-content:center;
  gap:8px; font:inherit; font-size:12.5px; font-weight:400;
  padding:11px 18px; border-radius:var(--sp-r-pill); cursor:pointer;
  border:1px solid var(--sp-borda); background:var(--sp-vidro-denso);
  color:var(--sp-ink);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:border-color .16s, transform .16s, background .16s }
.sp-btn:hover{ border-color:var(--sp-ac); transform:translateY(-1px) }
.sp-btn:active{ transform:translateY(0) }
.sp-btn svg{ width:14px; height:14px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
/* CHEIO: o único com fundo opaco, e por isso o único que pode ser o
   principal — sobre vidro, dois botões translúcidos brigam pela mesma
   atenção e nenhum vence. */
.sp-btn.cheio{ background:var(--sp-ac); border-color:var(--sp-ac);
  color:var(--sp-sobre-ac) }
.sp-btn.cheio:hover{ filter:brightness(1.06) }
.sp-btn.fantasma{ background:transparent; border-color:transparent;
  color:var(--sp-mut) }
.sp-btn.fantasma:hover{ color:var(--sp-ink); background:var(--sp-vidro) }
.sp-btn.p{ font-size:11px; padding:8px 13px }
.sp-btn.g{ font-size:14px; padding:14px 24px }
.sp-btn.redondo{ width:42px; height:42px; padding:0; border-radius:50% }
.sp-btn.redondo.g{ width:54px; height:54px }
.sp-btn.bloco{ width:100%; border-radius:var(--sp-r-p) }

/* ══ 13 · ÍCONES ════════════════════════════════════════════════════ */
.sp-ico{ display:inline-grid; place-items:center; flex:0 0 auto;
  width:38px; height:38px; border-radius:12px;
  border:1px solid var(--sp-borda); background:var(--sp-vidro-denso);
  color:var(--sp-ink);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px) }
.sp-ico svg{ width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.sp-ico.redondo{ border-radius:50% }
.sp-ico.p{ width:28px; height:28px; border-radius:9px }
.sp-ico.p svg{ width:13px; height:13px }
.sp-ico.g{ width:52px; height:52px; border-radius:17px }
.sp-ico.g svg{ width:22px; height:22px }
.sp-ico.aceso{ background:var(--sp-ac); border-color:var(--sp-ac);
  color:var(--sp-sobre-ac) }
.sp-ico-fila{ display:flex; gap:8px; flex-wrap:wrap }

/* ══ CHIPS — atravessam vários modelos ══════════════════════════════ */
.sp-chips{ display:flex; gap:7px; flex-wrap:wrap }
.sp-chip{ font-size:11px; padding:6px 12px; border-radius:var(--sp-r-pill);
  border:1px solid var(--sp-borda); background:var(--sp-vidro);
  color:var(--sp-mut); cursor:pointer; transition:.15s }
.sp-chip:hover{ border-color:var(--sp-ac); color:var(--sp-ink) }
.sp-chip.on{ background:var(--sp-ac); border-color:var(--sp-ac);
  color:var(--sp-sobre-ac) }

/* ══ VAZIO — todo modelo precisa saber não ter nada ═════════════════
   Um acervo sem estado vazio produz telas que mentem na primeira vez que
   alguém usa. */
/* o texto do vazio usa `--sp-mut`, não `--sp-mut2`: medido em 3.91:1 com o
   tom mais claro, e o estado vazio é justamente o que precisa ser lido — é
   ele que ensina o que fazer na primeira vez. */
.sp-vazio{ padding:22px 18px; text-align:center; font-size:11.5px;
  line-height:1.6; color:var(--sp-mut);
  border:1px dashed color-mix(in oklab,var(--sp-ink) 20%,transparent);
  border-radius:var(--sp-r); background:transparent }

/* ══════════════════════════════════════════════════════════════════════
   14 · CALENDÁRIO                                            (22/08)
   ══════════════════════════════════════════════════════════════════════
   Do primeiro anexo: mês à esquerda, pinos redondos marcando os dias
   escolhidos, e uma RÉGUA de traços com os números embaixo — não uma
   grade de mês inteiro. A régua mostra a vizinhança do que importa; a
   grade mostra 30 caixas em que quase todas estão vazias. */
.sp-cal{ padding:16px 18px 18px }
.sp-cal .mes{ display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-bottom:6px }
.sp-cal .mes b{ font-size:17px; font-weight:300; letter-spacing:.01em }
.sp-cal .mes span{ font-size:11px; color:var(--sp-mut) }
/* os PINOS: a bolinha de cima é o marcador, e a haste liga ao dia */
.sp-cal .pinos{ position:relative; height:62px }
.sp-cal .pino{ position:absolute; bottom:0; left:var(--x,50%);
  transform:translateX(-50%); display:flex; flex-direction:column;
  align-items:center; gap:0 }
.sp-cal .pino i{ width:26px; height:26px; border-radius:50%;
  background:color-mix(in oklab,var(--sp-ac) 46%,#fff);
  border:1px solid var(--sp-borda-luz); display:grid; place-items:center }
.sp-cal .pino i::after{ content:""; width:9px; height:9px; border-radius:50%;
  background:var(--sp-ac) }
.sp-cal .pino b{ width:2px; flex:1; min-height:14px;
  background:color-mix(in oklab,var(--sp-ac) 40%,transparent) }
.sp-cal .pino.lua i{ background:var(--sp-vidro-denso) }
.sp-cal .pino.lua i::after{ background:none; width:auto; height:auto;
  content:"☾"; font-size:12px; color:var(--sp-ink); line-height:1 }
/* a RÉGUA */
.sp-cal .regua{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:2px; margin-top:2px }
.sp-cal .dia{ flex:1; display:flex; flex-direction:column; align-items:center;
  gap:6px; cursor:pointer; border:0; background:transparent; padding:0;
  font:inherit }
.sp-cal .dia i{ display:block; width:1px; height:11px;
  background:color-mix(in oklab,var(--sp-ink) 22%,transparent) }
.sp-cal .dia span{ font-size:10.5px; color:var(--sp-mut2);
  font-variant-numeric:tabular-nums }
.sp-cal .dia.on i{ width:2px; height:15px; background:var(--sp-ink) }
.sp-cal .dia.on span{ color:var(--sp-ink); font-weight:500 }
.sp-cal .dia:hover span{ color:var(--sp-ink) }
/* o RODAPÉ ESCURO do anexo — o bloco que resume a escolha */
.sp-cal .resumo{ display:flex; gap:13px; align-items:flex-start; margin-top:16px;
  padding:14px 16px; border-radius:var(--sp-r);
  background:color-mix(in oklab,var(--wa-escuro,#0F0F11) 88%,transparent);
  color:#fff }
.sp-cal .resumo .ic{ flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.12);
  color:#fff }
.sp-cal .resumo .ic svg{ width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round }
.sp-cal .resumo .tx{ min-width:0 }
.sp-cal .resumo .tx b{ display:block; font-size:15px; font-weight:400 }
.sp-cal .resumo .tx i{ display:block; font-style:normal; font-size:12px;
  color:rgba(255,255,255,.62); margin:2px 0 6px }
.sp-cal .resumo .tx p{ margin:0; font-size:11.5px; line-height:1.5;
  color:rgba(255,255,255,.78) }

/* ══════════════════════════════════════════════════════════════════════
   15 · FORMAS COMIDAS — o retângulo mordido por um círculo
   ══════════════════════════════════════════════════════════════════════
   Do segundo anexo. É MÁSCARA, não borda: o furo precisa deixar ver o que
   está ATRÁS do spark, senão vira um desenho de furo — que é o que
   acontece quando se tenta fazer isso com `border-radius` e um quadrado
   da cor do fundo (e aí quebra no instante em que o fundo muda).
   `--sp-morde` controla o tamanho da mordida em cada modelo. */
.sp-mordido{ --sp-morde:74px; }
/* a · MORDIDA NO CANTO — o mais próximo do anexo */
.sp-morde-canto{
  --m:radial-gradient(circle at 100% 0, transparent 0 var(--sp-morde),
      #000 calc(var(--sp-morde) + .5px));
  -webkit-mask:var(--m); mask:var(--m); border-radius:var(--sp-r) }
.sp-morde-canto.esq{
  --m:radial-gradient(circle at 0 0, transparent 0 var(--sp-morde),
      #000 calc(var(--sp-morde) + .5px)) }
.sp-morde-canto.baixo{
  --m:radial-gradient(circle at 100% 100%, transparent 0 var(--sp-morde),
      #000 calc(var(--sp-morde) + .5px)) }
/* b · MORDIDA NO LADO — o círculo entra pelo meio da borda */
.sp-morde-lado{
  --m:radial-gradient(circle at 0 50%, transparent 0 var(--sp-morde),
      #000 calc(var(--sp-morde) + .5px));
  -webkit-mask:var(--m); mask:var(--m); border-radius:var(--sp-r) }
.sp-morde-lado.dir{
  --m:radial-gradient(circle at 100% 50%, transparent 0 var(--sp-morde),
      #000 calc(var(--sp-morde) + .5px)) }
/* c · MORDIDA DUPLA — as duas pontas de baixo, como o cartão inferior do
   anexo; dá a leitura de "encaixe" entre dois sparks vizinhos */
.sp-morde-dupla{
  --m:radial-gradient(circle at 0 100%, transparent 0 calc(var(--sp-morde) * .62),
        #000 calc(var(--sp-morde) * .62 + .5px)),
      radial-gradient(circle at 100% 100%, transparent 0 calc(var(--sp-morde) * .62),
        #000 calc(var(--sp-morde) * .62 + .5px));
  -webkit-mask:var(--m); mask:var(--m);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  border-radius:var(--sp-r) }
/* A BORDA DE LUZ NÃO SOBREVIVE À MÁSCARA — ela é um ::before com o mesmo
   recorte, e o resultado é um traço cortado no meio da mordida. Nos
   mordidos ela sai, e o contorno vem de uma sombra interna, que a máscara
   respeita. */
.sp-mordido::before{ display:none }
.sp-mordido{ box-shadow:var(--sp-sombra),
  inset 0 0 0 1px color-mix(in oklab,#fff 34%,transparent) }

/* ══════════════════════════════════════════════════════════════════════
   16 · JANELA — o pill com o círculo aberto no topo
   ══════════════════════════════════════════════════════════════════════
   Do terceiro anexo. O círculo do topo é uma JANELA de verdade: vazia,
   ela mostra o que está atrás do spark; preenchida, recebe imagem. O
   corpo abaixo aceita texto e outros sparks dentro.
   Por que máscara e não uma imagem redonda por cima: com máscara, o
   estado VAZIO é o padrão e não custa nada — e vazio honesto é o que a
   casa cobra de todo modelo. */
/* ── A PROPORÇÃO É O DESENHO (Malex, 22/08) ──────────────────────────
   "quero que o círculo esteja centralizado dentro da forma, que o retângulo
   seja mais fino, está muito largo, então perdeu o charme e a diferenciação
   de glassmorphism do retângulo com a forma oval do topo."
   Ele está certo e a causa era eu ter deixado a largura vir do grid: numa
   coluna de 340px o topo redondo vira uma cúpula rasa e o círculo, pequeno
   no meio dela — as duas curvas deixam de conversar. Estreito, o arco do
   topo e o círculo têm raios parecidos e o desenho volta a ler.
   Agora a LARGURA é a medida-mãe e o olho sai dela por proporção, então
   qualquer largura que a pessoa escolher mantém a relação. Altura livre:
   `--sp-alt` quando quiser fixar. */
.sp-janela{ --sp-larg:216px; --sp-prop-olho:.68;
  --sp-olho:calc(var(--sp-larg) * var(--sp-prop-olho));
  width:var(--sp-larg); min-height:var(--sp-alt,auto);
  position:relative; border-radius:999px 999px var(--sp-r) var(--sp-r);
  padding:0 0 18px; display:flex; flex-direction:column }
.sp-janela .olho{ position:relative; flex:0 0 auto;
  height:calc(var(--sp-olho) + var(--sp-respiro) + 16px);
  /* O RESPIRO NO TOPO. Com o centro em .52 do olho, o círculo nascia a 2px
     do arco e os dois se tocavam — some a leitura de "janela dentro da
     forma" e vira um recorte encostado na borda. `--sp-respiro` afasta os
     dois, e sai da largura para acompanhar qualquer tamanho. */
  --sp-respiro:calc(var(--sp-larg) * .1);
  --m:radial-gradient(circle at 50% calc(var(--sp-olho) * .5 + var(--sp-respiro)),
      transparent 0 calc(var(--sp-olho) * .5),
      #000 calc(var(--sp-olho) * .5 + .5px));
  -webkit-mask:var(--m); mask:var(--m);
  background:var(--sp-vidro) }
/* com imagem: a mesma janela, agora com conteúdo dentro */
.sp-janela.sp-com-foto .olho{ -webkit-mask:none; mask:none; background:none }
.sp-janela .olho .foto{ position:absolute; left:50%; top:var(--sp-respiro,10%);
  transform:translateX(-50%); width:var(--sp-olho); height:var(--sp-olho);
  border-radius:50%; background:var(--sp-img,linear-gradient(150deg,#E2D5C2,#7A5063))
  center/cover; box-shadow:inset 0 0 0 1px var(--sp-borda-luz) }
.sp-janela .corpo{ padding:2px 18px 0; text-align:center; flex:1;
  display:flex; flex-direction:column }
.sp-janela .corpo .sp-tit{ font-size:23px; font-weight:300; margin:6px 0 8px }
.sp-janela .corpo .sp-sub{ font-size:12.5px; line-height:1.7 }
.sp-janela .dentro{ margin-top:16px; display:grid; gap:8px; text-align:left }
/* a área que recebe OUTROS SPARKS — declarada, para não parecer sobra */
.sp-janela .encaixe{ border:1px dashed color-mix(in oklab,var(--sp-ink) 22%,transparent);
  border-radius:var(--sp-r-p); padding:14px; text-align:center;
  font-size:11px; color:var(--sp-mut) }
.sp-janela .pe{ margin-top:auto; padding-top:16px; display:flex;
  justify-content:center }
/* larguras de bolso — e qualquer outra por `--sp-larg` */
.sp-janela.estreita{ --sp-larg:184px }
.sp-janela.larga   { --sp-larg:268px }

/* ══ CALENDÁRIO COM IMAGEM (Malex, 22/08) ═══════════════════════════
   A terceira opção, como no anexo do "Booked": a foto ocupa o topo com
   o título por cima, e a régua vem embaixo. A foto entra numa moldura
   COM MARGEM — no anexo ela não encosta na borda do cartão, e é essa
   margem que faz o vidro aparecer em volta dela.
   O véu segue obrigatório: o título vive sobre a foto. */
.sp-cal .capa{ position:relative; margin:2px 0 14px; height:190px;
  border-radius:var(--sp-r-p); overflow:hidden;
  background:var(--sp-img,linear-gradient(150deg,#E2D5C2,#7A5063)) center/cover }
.sp-cal .capa::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(10,8,10,.55),transparent 58%) }
.sp-cal .capa .titulo{ position:absolute; left:16px; bottom:14px; z-index:1;
  margin:0; font-size:30px; font-weight:300; color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.4) }
/* o disco solto do anexo, que atravessa a borda da foto */
.sp-cal .capa .disco{ position:absolute; right:22px; top:30%; z-index:1;
  width:62px; height:62px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,color-mix(in oklab,var(--sp-ac) 62%,#fff));
  box-shadow:0 8px 26px -6px rgba(0,0,0,.35) }
.sp-cal.sp-com-capa{ padding-top:10px }

/* ══════════════════════════════════════════════════════════════════════
   17 · LINK — quatro modelos, e nenhum é botão                  (22/08)
   ══════════════════════════════════════════════════════════════════════
   Malex: "quero um modelo diferente, não somente como botão."

   A IDEIA, e é o que separa os quatro do botão: UM BOTÃO ESCONDE O
   DESTINO. "Saiba mais" não diz para onde leva — a pessoa clica no
   escuro, e num nook compartilhado isso é pior, porque ela está na casa
   de outra pessoa. Nos quatro modelos o destino faz parte do desenho:
   o domínio, o serviço ou a prévia estão à vista antes do toque.

   a · DESTINO — o cartão que mostra o que há do outro lado
   b · FITA    — o marcador que pende do spark, para link dentro de texto
   c · SELO    — o círculo do serviço, para link-in-bio
   d · SUBLINHA— o link dentro da frase, com o domínio ao lado          */

/* a · DESTINO */
.sp-link{ display:block; text-decoration:none; color:inherit; padding:0;
  transition:transform .16s, border-color .16s }
.sp-link:hover{ transform:translateY(-2px); border-color:var(--sp-ac) }
.sp-link .previa{ height:118px;
  background:var(--sp-img,linear-gradient(150deg,#486D83,#4A2C3F)) center/cover }
.sp-link .pe{ padding:13px 15px 15px }
.sp-link .onde{ display:flex; align-items:center; gap:7px; margin-bottom:7px }
.sp-link .favicon{ width:18px; height:18px; border-radius:5px; flex:0 0 auto;
  background:var(--sp-ac); display:grid; place-items:center;
  font-size:9px; font-weight:600; color:var(--sp-sobre-ac) }
.sp-link .dominio{ font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sp-mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sp-link .seta{ margin-left:auto; flex:0 0 auto; color:var(--sp-mut2) }
.sp-link .seta svg{ width:13px;height:13px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round }
.sp-link:hover .seta{ color:var(--sp-ac) }
.sp-link .tit{ margin:0; font-size:14px; font-weight:500; line-height:1.3 }
.sp-link .res{ margin:5px 0 0; font-size:11.5px; line-height:1.5; color:var(--sp-mut) }

/* b · FITA — pende do canto, como marcador de livro */
.sp-fita{ position:relative; display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; padding:9px 14px 9px 12px; font-size:12px;
  color:var(--sp-ink);
  background:var(--sp-vidro-denso); border:1px solid var(--sp-borda);
  border-radius:var(--sp-r-p) var(--sp-r-p) var(--sp-r-p) 0;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px) }
.sp-fita::after{ content:""; position:absolute; left:0; top:100%;
  border-left:9px solid color-mix(in oklab,var(--sp-ac) 70%,transparent);
  border-bottom:9px solid transparent }
.sp-fita b{ font-weight:500 }
.sp-fita i{ font-style:normal; color:var(--sp-mut); font-size:11px }
.sp-fita:hover{ border-color:var(--sp-ac) }

/* c · SELO — o círculo do serviço, para link-in-bio */
.sp-selos{ display:flex; gap:10px; flex-wrap:wrap }
.sp-selo-link{ display:flex; flex-direction:column; align-items:center; gap:7px;
  text-decoration:none; color:var(--sp-ink); width:66px }
.sp-selo-link .disco{ width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; border:1px solid var(--sp-borda);
  background:var(--sp-vidro-denso);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:transform .16s, border-color .16s }
.sp-selo-link .disco svg{ width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round }
.sp-selo-link:hover .disco{ transform:translateY(-2px); border-color:var(--sp-ac) }
.sp-selo-link span{ font-size:10px; color:var(--sp-mut); text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100% }

/* d · SUBLINHA — dentro da frase, com o domínio ao lado */
.sp-sublinha{ text-decoration:none; color:var(--sp-ink);
  border-bottom:1px solid var(--sp-ac); padding-bottom:1px;
  white-space:nowrap }
.sp-sublinha::after{ content:" ↗ " attr(data-onde); font-size:9.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--sp-mut2);
  border:0; white-space:nowrap }
.sp-sublinha:hover{ color:var(--sp-ac) }

/* ══════════════════════════════════════════════════════════════════════
   18 · CITAÇÃO
   ══════════════════════════════════════════════════════════════════════
   Três alturas, porque citação não é uma coisa só: a que abre um texto,
   a que fica no meio dele, e a que é o conteúdo inteiro. */
.sp-cit{ padding:22px 24px }
.sp-cit .aspa{ display:block; font-size:44px; line-height:.7; font-weight:300;
  color:color-mix(in oklab,var(--sp-ac) 72%,transparent); margin-bottom:6px }
.sp-cit blockquote{ margin:0; font-size:16px; line-height:1.6; font-weight:300;
  letter-spacing:.005em; color:var(--sp-ink) }
.sp-cit figcaption{ margin-top:16px; font-size:11px; color:var(--sp-mut);
  display:flex; align-items:center; gap:9px }
.sp-cit figcaption .risco{ width:22px; height:1px; background:var(--sp-fio);
  flex:0 0 auto }
/* variação FILETE — a barra lateral, para citação dentro de um texto */
.sp-cit.filete{ padding:6px 0 6px 18px; background:none; border:0;
  box-shadow:none; border-left:2px solid var(--sp-ac); border-radius:0;
  -webkit-backdrop-filter:none; backdrop-filter:none }
.sp-cit.filete::before{ display:none }
.sp-cit.filete .aspa{ display:none }
.sp-cit.filete blockquote{ font-size:14px; font-style:italic }
/* variação GRANDE — quando a citação É o spark */
.sp-cit.grande blockquote{ font-size:22px; line-height:1.45 }
.sp-cit.grande .aspa{ font-size:60px }

/* ══════════════════════════════════════════════════════════════════════
   19 · ESCOLHER COR — roda, campo e a paleta da casa
   ══════════════════════════════════════════════════════════════════════
   A roda é `conic-gradient` com um disco branco no meio: a matiz vem do
   ângulo, a saturação do raio. Arrastar move o alvo; o campo aceita o
   código escrito. Os dois escrevem no mesmo lugar, então nunca divergem —
   que é o defeito que dois controles da mesma coisa produzem sozinhos. */
.sp-cor{ padding:18px }
.sp-cor .roda{ position:relative; width:var(--sp-roda,168px);
  height:var(--sp-roda,168px); margin:2px auto 16px; border-radius:50%;
  cursor:crosshair; touch-action:none;
  background:
    radial-gradient(circle closest-side,#fff,transparent 72%),
    conic-gradient(from 90deg,
      #ff0000,#ff8a00,#ffe600,#8cff00,#00ff4c,#00ffd0,#00a2ff,#3d00ff,
      #b400ff,#ff00a8,#ff0000);
  box-shadow:var(--sp-sombra), inset 0 0 0 1px var(--sp-borda) }
.sp-cor .alvo{ position:absolute; width:20px; height:20px; border-radius:50%;
  border:2px solid #fff; box-shadow:0 1px 6px rgba(0,0,0,.35);
  transform:translate(-50%,-50%); left:50%; top:50%; pointer-events:none;
  background:var(--sp-escolhida,#F4A384) }
.sp-cor .fita{ display:flex; align-items:center; gap:10px; margin-bottom:12px }
.sp-cor .amostra{ width:38px; height:38px; border-radius:11px; flex:0 0 auto;
  background:var(--sp-escolhida,#F4A384); border:1px solid var(--sp-borda) }
.sp-cor .codigo{ flex:1; min-width:0; font:inherit; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; padding:10px 13px;
  border-radius:var(--sp-r-p); border:1px solid var(--sp-borda);
  background:var(--sp-vidro-denso); color:var(--sp-ink); outline:none }
.sp-cor .codigo:focus{ border-color:var(--sp-ac) }
.sp-cor .codigo.errado{ border-color:#C0453A }
/* A PALETA DA CASA, à mão: escolher livre é bom, e a maioria das vezes a
   pessoa quer uma das seis — deixá-las a um toque evita que cada nook
   nasça de uma cor achada no arrasto. */
.sp-cor .casa{ display:flex; gap:7px; flex-wrap:wrap; margin-top:4px }
.sp-cor .casa button{ width:26px; height:26px; border-radius:8px; cursor:pointer;
  border:1px solid var(--sp-borda); padding:0 }
.sp-cor .casa button.on{ box-shadow:0 0 0 2px var(--sp-ink) inset }
.sp-cor .titulo{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sp-mut2); margin:0 0 8px }

/* ══════════════════════════════════════════════════════════════════════
   20 · ESCOLHER FONTE
   ══════════════════════════════════════════════════════════════════════ */
.sp-fonte{ padding:16px }
.sp-fonte .op{ display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; width:100%; text-align:left; font:inherit; cursor:pointer;
  padding:12px 14px; border-radius:var(--sp-r-p); margin-bottom:6px;
  border:1px solid var(--sp-borda); background:var(--sp-vidro);
  color:var(--sp-ink); transition:.15s }
.sp-fonte .op:last-child{ margin-bottom:0 }
.sp-fonte .op:hover{ border-color:var(--sp-ac) }
.sp-fonte .op.on{ border-color:var(--sp-ac);
  background:color-mix(in oklab,var(--sp-ac) 10%,transparent) }
/* a amostra é escrita NA PRÓPRIA FONTE — uma lista de nomes de fonte em
   fonte única não ajuda ninguém a escolher */
.sp-fonte .op b{ font-size:17px; font-weight:400 }
.sp-fonte .op i{ font-style:normal; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sp-mut2); flex:0 0 auto }
.sp-fonte .peso{ display:flex; gap:6px; margin-top:12px }
.sp-fonte .peso button{ flex:1; font:inherit; font-size:11px; padding:8px 0;
  border-radius:9px; cursor:pointer; border:1px solid var(--sp-borda);
  background:var(--sp-vidro); color:var(--sp-mut) }
.sp-fonte .peso button.on{ background:var(--sp-ac); border-color:var(--sp-ac);
  color:var(--sp-sobre-ac) }

/* ══════════════════════════════════════════════════════════════════════
   21 · SÍMBOLOS — o que o teclado não dá
   ══════════════════════════════════════════════════════════════════════
   Malex: "aqueles símbolos dólar, libra, real, e pontuações que o teclado
   não tem normalmente, com o A para primeira, que fica junto com o número
   em superscript."
   Organizado por USO, não por bloco Unicode: quem procura o "ª" está
   escrevendo um endereço, não estudando tipografia. */
.sp-simb{ padding:14px 16px }
.sp-simb .grupo + .grupo{ margin-top:14px }
.sp-simb h6{ margin:0 0 7px; font-size:9px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--sp-mut2) }
.sp-simb .tecla{ display:inline-grid; place-items:center; width:34px; height:34px;
  margin:0 5px 5px 0; border-radius:10px; cursor:pointer; font:inherit;
  font-size:15px; line-height:1;
  border:1px solid var(--sp-borda); background:var(--sp-vidro);
  color:var(--sp-ink); transition:.13s }
.sp-simb .tecla:hover{ border-color:var(--sp-ac); transform:translateY(-1px) }
.sp-simb .tecla:active{ transform:translateY(0);
  background:color-mix(in oklab,var(--sp-ac) 18%,transparent) }
.sp-simb .tecla.larga{ width:auto; padding:0 11px }
.sp-simb .busca{ display:flex; align-items:center; gap:8px; margin-bottom:12px;
  padding:9px 13px; border-radius:var(--sp-r-pill);
  border:1px solid var(--sp-borda); background:var(--sp-vidro-denso) }
.sp-simb .busca input{ flex:1; min-width:0; border:0; background:transparent;
  font:inherit; font-size:12.5px; color:var(--sp-ink); outline:none }
.sp-simb .busca svg{ width:13px;height:13px;flex:0 0 auto;fill:none;
  stroke:var(--sp-fio);stroke-width:1.7;stroke-linecap:round }

/* ══════════════════════════════════════════════════════════════════════
   22 · BARRA DE ESCRITA — o modal sobre o texto
   ══════════════════════════════════════════════════════════════════════
   Malex: "deve abrir em um modal sobre o local onde ela está escrevendo."
   Flutua ancorada ao texto, não no topo da tela: uma barra fixa longe do
   cursor obriga a pessoa a atravessar a tela a cada palavra em negrito. */
.sp-escrita{ display:inline-flex; align-items:center; gap:2px; padding:5px;
  border-radius:var(--sp-r-pill);
  /* 19/09, Malex: "preta chapada, fora do design da WEOS". O vidro da casa,
     o mesmo que a Mesa pôs na barra dela — agora aqui, para todo app. */
  background:var(--sp-barra); border:1px solid var(--sp-barra-linha);
  box-shadow:0 14px 36px -18px rgba(0,0,0,.32);
  -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3) }
.sp-escrita button{ width:32px; height:32px; border:0; border-radius:50%;
  background:transparent; color:var(--sp-ink); cursor:pointer;
  display:grid; place-items:center; font:inherit; font-size:13px;
  transition:.13s }
.sp-escrita button:hover{ background:color-mix(in oklab,var(--sp-ink) 8%,transparent) }
.sp-escrita button:focus-visible{ outline:2px solid var(--sp-ac); outline-offset:1px }
.sp-escrita button.on{ background:var(--sp-ac); color:var(--sp-sobre-ac) }
.sp-escrita button svg{ width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round }
.sp-escrita .sep{ width:1px; height:18px; margin:0 4px; background:var(--sp-barra-linha) }
.sp-escrita .b{ font-weight:700 } .sp-escrita .i{ font-style:italic }
.sp-escrita .u{ text-decoration:underline }
/* a seta que aponta para o texto — é ela que diz "isto é sobre AQUI".
   ⚠ a barra ganha `relative` só com especificidade ZERO (:where), para nunca
   vencer o `fixed` de quem a ancora — antes vencia (achado da Mesa, 19/09) */
.sp-escrita.com-bico::after{ content:""; position:absolute; left:50%; top:100%;
  transform:translateX(-50%); border:6px solid transparent;
  border-top-color:var(--sp-barra) }
:where(.sp-escrita.com-bico){ position:relative }   /* especificidade zero: qualquer âncora vence */

/* ══════════════════════════════════════════════════════════════════════
   23 · A ASSINATURA — de quem é este nook                       (22/08)
   ══════════════════════════════════════════════════════════════════════
   Malex: "pensei em todo nook ir com um ícone próprio nosso no canto da
   tela, e ao clicar, abre o nome de quem pertence aquele nook."

   NÃO CONFUNDIR COM `.wa-marca-weos`: aquela é o menu da casa, para o
   DONO, dentro do WEOS. Esta é para quem VISITA um nook publicado — o
   dono já sabe de quem é o lugar dele.

   ── O QUE ELA FAZ E O QUE NÃO FAZ, escrito aqui porque a diferença
   decide o que mais precisa ser construído:
     FAZ  · diz de quem é o conteúdo, e diz na tela de quem recebeu;
            dá procedência (foi feito no WEOS);
            deixa o autor a um toque de quem gostou do que viu.
     NÃO FAZ · não impede copiar o conteúdo — nada numa página impede;
            não impede alguém montar nooks para terceiros;
            não é o que faz a ferramenta ser paga.
   O que sustenta os três de baixo é a PORTARIA (§12.4-c) e o retrato que
   preserva o QUE ERA e não o conteúdo (§12.4-d). A assinatura é autoria,
   não fechadura — e tratá-la como fechadura é a maneira de descobrir
   tarde que a porta estava aberta.

   Por isso ela é DISCRETA e não some: marca d'água grita e é ignorada;
   selo pequeno e permanente é lido quando importa. */
/* UMA SUPERFÍCIE SÓ (corrigido 22/08 — o Malex viu antes de mim).
   Estava assim: o selo tinha vidro+borda+sombra e a tarja tinha vidro+
   borda, encostados com `margin:-10px`. Dois vidros sobrepostos aparecem
   — e aparecem exatamente como "um retângulo e um círculo, um sobre o
   outro". A correção não é acertar a emenda: é não ter emenda. O VIDRO
   MORA NO BOTÃO, que cresce de círculo para pílula; o selo vira só uma
   marca tingida por dentro. */
.sp-assina-weos{ position:fixed; z-index:90; right:16px; bottom:16px;
  display:inline-flex; align-items:center; gap:0; padding:4px;
  border:1px solid var(--sp-borda); background:var(--sp-vidro-denso);
  border-radius:999px; cursor:pointer; font:inherit;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:var(--sp-sombra);
  transition:border-color .18s, box-shadow .18s }
.sp-assina-weos:hover{ border-color:var(--sp-ac) }
.sp-assina-weos.esq{ right:auto; left:16px; flex-direction:row-reverse }
.sp-assina-weos.topo{ bottom:auto; top:16px }
/* o selo: tinta, não vidro. Sem borda e sem sombra próprias, senão
   volta a ser uma peça em cima de outra. */
.sp-assina-weos .selo{ width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; flex:0 0 auto;
  font-size:9px; font-weight:500; letter-spacing:.06em;
  color:var(--sp-ink); border:0; box-shadow:none;
  background:color-mix(in oklab, var(--sp-ink) 14%, transparent) }
/* o nome cresce DENTRO da mesma pílula */
.sp-assina-weos .quem{ max-width:0; overflow:hidden; white-space:nowrap;
  font-size:11.5px; color:var(--sp-ink); opacity:0;
  border:0; background:none; text-align:left;
  transition:max-width .3s cubic-bezier(.2,.8,.3,1), opacity .2s, padding .3s }
.sp-assina-weos.aberta .quem{ max-width:280px; opacity:1; padding:0 12px 0 9px }
.sp-assina-weos.esq.aberta .quem{ padding:0 9px 0 12px }
.sp-assina-weos .quem b{ font-weight:500 }
.sp-assina-weos .quem i{ font-style:normal; color:var(--sp-mut) }
/* a SEGUNDA LINHA — "para {cliente}". Vem do autor, não da casa, e por
   isso não recebe o selo (§12.4-d-bis). O peso menor é o que diz isso. */
.sp-assina-weos .quem u{ display:block; text-decoration:none;
  font-size:10.5px; color:var(--sp-mut); margin-top:1px }
.sp-assina-weos.com-cliente{ align-items:center }
.sp-assina-weos.com-cliente .quem{ line-height:1.25 }
/* dentro de um cartão, e não na tela: a mesma peça sem `fixed` */
.sp-assina-weos.no-cartao{ position:absolute; z-index:3 }

/* ══════════════════════════════════════════════════════════════════════
   23 · O CALENDÁRIO GANHA ESCALA E NAVEGAÇÃO
   ══════════════════════════════════════════════════════════════════════
   (22/08) — pedido do Malex: "diário, semanal, quinzenal, mensal e alterar
   entre os meses e anos. deve ter essa opção quando o spark for inserido."

   A RÉGUA JÁ ERA ELÁSTICA e ninguém tinha percebido: ela desenha quantos
   `.dia` receber. Então a escala não é um modelo novo por escala — é a
   MESMA régua com outra contagem. O que faltava era (a) a navegação, e
   (b) o dia da semana em cima do número, que só faz sentido em semana.

   `data-modo` = dia · semana · quinzena · mes. */
.sp-cal .navegar{ display:flex; align-items:center; gap:4px }
.sp-cal .nav{ width:24px; height:24px; border-radius:8px; border:1px solid transparent;
  background:transparent; display:grid; place-items:center; cursor:pointer;
  color:var(--sp-mut); padding:0; transition:.15s }
.sp-cal .nav:hover{ background:var(--sp-vidro-denso); border-color:var(--sp-borda);
  color:var(--sp-ink) }
.sp-cal .nav svg{ width:12px; height:12px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.sp-cal .ano{ font-size:11px; color:var(--sp-mut); font-variant-numeric:tabular-nums;
  min-width:30px; text-align:center }

/* os MODOS — quatro degraus da mesma régua, não quatro calendários */
.sp-cal .modos{ display:flex; gap:2px; margin:10px 0 12px; padding:3px;
  border-radius:11px; background:color-mix(in oklab,var(--sp-ink) 5%,transparent);
  border:1px solid var(--sp-borda) }
.sp-cal .modos button{ flex:1; border:0; background:transparent; cursor:pointer;
  font:inherit; font-size:10.5px; letter-spacing:.03em; padding:5px 2px;
  border-radius:8px; color:var(--sp-mut); transition:.15s }
.sp-cal .modos button:hover{ color:var(--sp-ink) }
.sp-cal .modos button[aria-pressed="true"]{ background:var(--sp-vidro-denso);
  color:var(--sp-ink); box-shadow:0 1px 3px rgba(0,0,0,.07) }

/* a LETRA DO DIA DA SEMANA — só aparece onde cabe. Em MÊS ela vira ruído
   (31 letras coladas), em DIA ela é redundante com o título. */
.sp-cal .dia em{ display:none; font-style:normal; font-size:9.5px;
  color:var(--sp-mut2); letter-spacing:.04em; text-transform:uppercase }
.sp-cal[data-modo="semana"] .dia em,
.sp-cal[data-modo="quinzena"] .dia em{ display:block }
.sp-cal[data-modo="semana"] .dia{ gap:4px }
.sp-cal[data-modo="semana"] .dia span{ font-size:13px }
/* em MÊS a régua aperta: número menor e traço mais curto, senão embola */
.sp-cal[data-modo="mes"] .dia span{ font-size:9px }
.sp-cal[data-modo="mes"] .dia i{ height:8px }
.sp-cal[data-modo="mes"] .dia.on i{ height:13px }
.sp-cal[data-modo="mes"] .regua{ gap:0 }

/* o MODO MENSAL vira GRADE (22/08, pedido do Malex).
   Isto não desmente "régua em vez de grade" — marca ONDE A RÉGUA ACABA.
   A régua serve enquanto os dias cabem lado a lado com número legível;
   em 31 ela aperta o número a 9px e vira um pente. A grade custa altura,
   e a altura só se paga quando há mês inteiro para mostrar. */
.sp-cal .grade-mes{ display:none }
.sp-cal[data-modo="mes"] .grade-mes{ display:block; margin-top:2px }
.sp-cal[data-modo="mes"] .regua,
.sp-cal[data-modo="mes"] .pinos{ display:none }
.sp-cal .semanas{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px }
.sp-cal .cab{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px;
  margin-bottom:6px }
.sp-cal .cab span{ text-align:center; font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--sp-mut2) }
.sp-cal .cel{ aspect-ratio:1/1; min-height:34px; border-radius:10px;
  border:1px solid transparent; background:transparent; cursor:pointer;
  font:inherit; font-size:12px; color:var(--sp-ink); padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; font-variant-numeric:tabular-nums; transition:.14s }
.sp-cal .cel:hover{ background:color-mix(in oklab,var(--sp-ink) 7%,transparent) }
/* o dia FORA do mês continua no lugar em vez de sumir: a grade que pula
   casas perde o alinhamento das colunas e a semana deixa de ser semana */
.sp-cal .cel.fora{ color:var(--sp-mut2); opacity:.45; cursor:default }
.sp-cal .cel.fora:hover{ background:transparent }
.sp-cal .cel.hoje{ border-color:var(--sp-borda-luz);
  background:var(--sp-vidro-denso) }
.sp-cal .cel.on{ background:var(--sp-ac); color:var(--sp-sobre-ac);
  border-color:var(--sp-ac) }
.sp-cal .cel.on:hover{ background:var(--sp-ac) }
/* o PONTO de "tem coisa nesse dia" — some quando o dia está escolhido,
   porque aí a própria cor já diz */
.sp-cal .cel .ponto{ width:4px; height:4px; border-radius:50%;
  background:var(--sp-ac) }
.sp-cal .cel.on .ponto{ background:currentColor; opacity:.6 }
.sp-cal .cel:not(.tem) .ponto{ visibility:hidden }

/* o MODO DIÁRIO — aqui a régua não serve: um dia não tem vizinhos para
   mostrar. Vira uma faixa de horas, que é o que a pessoa quer ver quando
   pede "diário". */
.sp-cal[data-modo="dia"] .regua,
.sp-cal[data-modo="dia"] .pinos{ display:none }
.sp-cal .horas{ display:none }
.sp-cal[data-modo="dia"] .horas{ display:block; margin-top:4px }
.sp-cal .hr{ display:flex; align-items:flex-start; gap:12px; padding:7px 0;
  min-height:34px }
.sp-cal .hr + .hr{ border-top:1px solid color-mix(in oklab,var(--sp-ink) 7%,transparent) }
.sp-cal .hr > i{ flex:0 0 auto; width:38px; font-style:normal; font-size:10.5px;
  color:var(--sp-mut2); font-variant-numeric:tabular-nums; padding-top:2px }
.sp-cal .hr .marca{ flex:1; min-width:0 }
.sp-cal .hr .ev{ display:block; font-size:12px; padding:6px 10px; border-radius:9px;
  background:color-mix(in oklab,var(--sp-ac) 16%,transparent);
  border:1px solid color-mix(in oklab,var(--sp-ac) 34%,transparent) }

/* ══════════════════════════════════════════════════════════════════════
   24 · LISTAS ELÁSTICAS — pôr e tirar quantos quiser
   ══════════════════════════════════════════════════════════════════════
   (22/08) — "todo spark de linhas, toggles, alternativas, etc. deve ter a
   opção de colocar e remover a quantidade que quiser."

   REGRA: o controle de editar NÃO mora no modelo — mora num MODO. O spark
   publicado não pode ter um "+" pendurado nele. Por isso tudo aqui está
   atrás de `.sp-editando`, que a mesa liga enquanto o dono está montando
   e desliga na saída.

   REGRA 2: dá para remover o último. Lista com zero itens é estado
   legítimo (o formulário que ainda não tem pergunta) e mostra o vazio
   honesto, em vez de sumir e deixar a pessoa sem onde clicar. */
.sp-editando .sp-item{ position:relative }
/* o TIRAR: mora na margem, fora do conteúdo, para não empurrar o desenho
   nem mudar a altura da linha quando aparece */
.sp-tirar{ position:absolute; left:-11px; top:50%; transform:translateY(-50%) scale(.7);
  width:22px; height:22px; border-radius:50%; border:1px solid var(--sp-borda);
  background:var(--sp-vidro-denso); color:var(--sp-mut); cursor:pointer;
  display:grid; place-items:center; padding:0; opacity:0; transition:.16s;
  backdrop-filter:blur(8px); z-index:2 }
.sp-tirar svg{ width:10px; height:10px; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round }
.sp-editando .sp-item:hover .sp-tirar,
.sp-tirar:focus-visible{ opacity:1; transform:translateY(-50%) scale(1) }
.sp-tirar:hover{ border-color:var(--sp-erro,#C2453B); color:var(--sp-erro,#C2453B);
  background:color-mix(in oklab,var(--sp-erro,#C2453B) 12%,var(--sp-vidro-denso)) }

/* o PÔR: sempre no fim, sempre visível em edição. Tracejado porque ele
   não é um item — é o lugar onde nasce um. */
.sp-por{ display:none; width:100%; align-items:center; justify-content:center;
  gap:7px; padding:10px; margin-top:8px; border-radius:12px; cursor:pointer;
  font:inherit; font-size:11.5px; letter-spacing:.02em; color:var(--sp-mut);
  background:transparent; transition:.16s;
  border:1px dashed color-mix(in oklab,var(--sp-ink) 20%,transparent) }
.sp-editando .sp-por{ display:flex }
.sp-por svg{ width:12px; height:12px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round }
.sp-por:hover{ color:var(--sp-ink); border-color:var(--sp-ac);
  background:color-mix(in oklab,var(--sp-ac) 7%,transparent) }
/* nas LINHAS o "pôr" encosta nas bordas, porque .sp-linhas não tem padding
   lateral — sem isto ele fica mais largo que os itens que ele cria */
.sp-linhas .sp-por{ width:calc(100% - 36px); margin:8px 18px 12px }
.sp-linhas .sp-tirar{ left:2px }

/* o VAZIO HONESTO — o que se vê quando a pessoa tirou tudo */
.sp-nada{ display:none; padding:16px; text-align:center; font-size:11.5px;
  color:var(--sp-mut2); font-style:italic }
.sp-lista:empty + .sp-nada{ display:block }

/* ══════════════════════════════════════════════════════════════════════
   25 · O CAMPO VAZIO SE ANUNCIA
   ══════════════════════════════════════════════════════════════════════
   (22/08) O molde entra no nook em branco — de propósito: exemplo inserido
   de verdade vira conteúdo que ninguém escolheu. Mas em branco sem dizer
   nada é uma caixa que não convida a nada, e a pessoa não sabe que ali se
   escreve. `data-vazio` é o convite, e ele some no instante em que há
   texto — sem JS, porque `:empty` já sabe. */
[data-vazio]:empty::before{
  content:attr(data-vazio); color:var(--sp-mut2); pointer-events:none }
[contenteditable]:focus{ outline:none;
  box-shadow:0 1px 0 0 color-mix(in oklab,var(--sp-ac) 60%,transparent) }
/* ── O CONTROLE APARECE AO MEXER, NÃO AO EXISTIR (corrigido 22/08) ────
   Eu tinha deixado o "tirar" aceso o tempo todo dentro do nook, com o
   argumento de que a pessoa acabou de pedir aquele spark. Errado por duas
   razões que só a tela mostra:

   · nas LINHAS o botão é um traço e senta ao lado do número — e "1" com um
     traço colado à esquerda lê-se **"−1"**. O controle não só polui: ele
     mente sobre o conteúdo.
   · um spark passa a maior parte da vida sendo LIDO, não montado. Enfeitar
     a leitura com a ferramenta de edição é o mesmo erro de mostrar régua
     em cima do texto.

   Agora: silêncio ao ler, controle ao tocar. `:focus-within` cobre o toque
   (não há hover no celular) e o hover cobre o mouse. */
.sp-editando .sp-item:hover .sp-tirar,
.sp-editando:focus-within .sp-item .sp-tirar{ opacity:.6; transform:translateY(-50%) scale(1) }
.sp-editando:focus-within .sp-item:hover .sp-tirar{ opacity:1 }
/* o "pôr" segue a mesma regra: some na leitura, aparece ao montar */
.sp-editando .sp-por{ display:none }
.sp-editando:hover .sp-por,
.sp-editando:focus-within .sp-por{ display:flex }