/* ==========================================================================
   ST23 — Preparação · estilo ÚNICO da lista
   --------------------------------------------------------------------------
   Serve os dois lugares onde a lista aparece: a página avulsa /preparacao e a
   aba "Preparação" dentro do Registrando a Jornada. Todo seletor vive sob
   .prep — dentro do app isso impede o estilo da lista de vazar para as outras
   abas, e impede o estilo do app de invadir a lista.

   Gerado a partir do <style> do preparacao.html aprovado.
   ========================================================================== */

.prep{
  --preto:#090909; --branco:#FFFFFF; --grafite:#3A3A3A; --linha:#DED5C4;
  --coral:#E85C36; --azul:#2E8FBF; --marfim:#F6F0E4; --quente:#8A8175;
  --serif:'EB Garamond',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --wrap:660px;
}
.prep *{box-sizing:border-box}

.prep{
  margin:0; background:var(--marfim); color:var(--preto);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.prep .wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}

/* ---------- topo ---------- */
.prep .masthead{padding:38px 0 4px}
.prep .edicao{display:block; width:min(320px,74%); height:auto}
.prep .rodape{display:flex; align-items:center; gap:16px; margin-top:30px;
  padding-top:22px; border-top:1px solid var(--linha)}
.prep .selo{flex:0 0 auto; width:78px; height:auto; opacity:.9}
.prep .hero{padding:30px 0 34px; border-bottom:1px solid var(--linha)}
.prep .eyebrow{
  font-size:10.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--quente); margin:0 0 16px;
}
.prep h1{
  font-family:var(--serif); font-weight:400; font-size:clamp(38px,9vw,58px);
  line-height:1.02; letter-spacing:-.01em; margin:0 0 18px;
}
.prep h1 em{font-style:italic; color:var(--coral)}
.prep .hero p{margin:0 0 14px; color:var(--grafite); font-size:16.5px; max-width:44ch}
.prep .hero p strong{color:var(--preto); font-weight:500}

/* ---------- régua de preparação ---------- */
.prep .rail-bar{
  position:sticky; top:0; z-index:20; background:rgba(246,240,228,.93);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--linha);
}
.prep .rail-in{max-width:var(--wrap); margin:0 auto; padding:11px 22px;
  display:flex; align-items:center; gap:14px}
.prep .rail{display:flex; gap:6px; flex:1}
.prep .stop{
  position:relative; flex:1; height:34px; border:0; padding:0; cursor:pointer;
  background:transparent; font-family:var(--sans);
}
.prep .stop::before{
  content:""; position:absolute; inset:auto 0 8px 0; height:3px; background:var(--linha);
}
.prep .stop-fill{
  position:absolute; left:0; bottom:8px; height:3px; width:0; background:var(--coral);
  transition:width .35s cubic-bezier(.4,0,.2,1);
}
.prep .stop-lbl{
  position:absolute; inset:0 0 auto 0; font-size:11px; font-weight:500;
  letter-spacing:.06em; color:var(--quente);
}
.prep .stop[data-done="1"] .stop-lbl{color:var(--preto)}
.prep .rail-pct{
  font-family:var(--serif); font-size:21px; min-width:52px; text-align:right;
  font-variant-numeric:tabular-nums;
}

/* ---------- dias ---------- */
.prep .day{padding:44px 0; border-bottom:1px solid var(--linha); scroll-margin-top:74px}
.prep .day-head{display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:start;
  margin-bottom:22px}
.prep .day-stamp{
  width:56px; text-align:center; padding-top:2px;
}
.prep .day-stamp .wd{
  display:block; font-size:9.5px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--quente);
}
.prep .day-stamp .num{
  display:block; font-family:var(--serif); font-size:38px; line-height:1;
  font-variant-numeric:lining-nums;
}
.prep .kicker{
  font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--coral); margin:0 0 5px;
}
.prep .day-title h2{
  font-family:var(--serif); font-weight:400; font-size:28px; line-height:1.12;
  margin:0 0 9px; letter-spacing:-.005em;
}
.prep .lead{margin:0; color:var(--grafite); font-size:15px; max-width:46ch}
.prep .day-count{
  font-size:11.5px; font-weight:500; color:var(--quente); padding-top:6px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* ---------- itens ---------- */
.prep .items{list-style:none; margin:0; padding:0}
.prep .item + .item{border-top:1px solid #E7DFCE}
.prep .item label{
  display:flex; gap:13px; align-items:flex-start; padding:13px 2px;
  cursor:pointer; transition:opacity .2s;
}
.prep .item input{position:absolute; opacity:0; width:1px; height:1px}
.prep .box{
  flex:0 0 auto; width:19px; height:19px; margin-top:2px; border:1.5px solid var(--preto);
  border-radius:3px; position:relative; transition:background .18s,border-color .18s;
}
.prep .box::after{
  content:""; position:absolute; left:5.5px; top:1.5px; width:5px; height:10px;
  border:solid var(--branco); border-width:0 2px 2px 0; transform:rotate(45deg) scale(.4);
  opacity:0; transition:opacity .18s, transform .18s;
}
.prep .item input:checked + label .box{background:var(--coral); border-color:var(--coral)}
.prep .item input:checked + label .box::after{opacity:1; transform:rotate(45deg) scale(1)}
.prep .item input:checked + label .txt{color:var(--quente); text-decoration:line-through;
  text-decoration-color:rgba(138,129,117,.45)}
.prep .item input:focus-visible + label .box{outline:2px solid var(--azul); outline-offset:3px}
.prep .txt{font-size:15.5px; line-height:1.5}
.prep .txt em{font-family:var(--serif); font-style:italic; font-size:1.08em}
.prep .tag{
  display:inline-block; margin-left:8px; font-size:9.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; padding:2px 7px; border-radius:99px;
  vertical-align:1.5px; white-space:nowrap;
}
.prep .tag-opt{background:#EBE3D2; color:var(--quente)}
.prep .tag-att{background:#F3E3D3; color:#8A5A2B}

/* ---------- dia 1 ---------- */
.prep .day1{background:var(--branco); border-bottom:0;
  margin:0 -22px; padding:44px 22px 48px}
.prep .day1 .day-count{color:var(--quente)}
.prep .day1 .item + .item{border-top-color:#EDEDED}

/* ---------- fecho ---------- */
.prep .close{padding:44px 0 60px; text-align:left}
.prep .close .rule-line{
  font-family:var(--serif); font-size:clamp(23px,5.2vw,30px); line-height:1.25;
  margin:0 0 20px; max-width:22ch;
}
.prep .close .rule-line em{font-style:italic; color:var(--coral)}
.prep .close p:not(.rule-line){margin:0 0 10px; color:var(--grafite); font-size:15px; max-width:46ch}
.prep .sig{
  margin:0;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--quente); line-height:1.8;
}
.prep .reset{
  margin-top:22px; background:none; border:1px solid var(--linha); color:var(--quente);
  font-family:var(--sans); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  padding:9px 15px; border-radius:99px; cursor:pointer;
}
.prep .reset:hover{border-color:var(--quente); color:var(--grafite)}
.prep .saved{font-size:11.5px; color:var(--quente); margin-top:12px; min-height:16px}

@media (max-width:520px){
  .prep .day-head{grid-template-columns:auto 1fr; gap:13px}
  .prep .day-count{grid-column:2; padding-top:0}
  .prep .day-stamp{width:46px}
  .prep .day-stamp .num{font-size:31px}
  .prep .rail-pct{font-size:18px; min-width:44px}
  .prep .rodape{flex-direction:column; align-items:flex-start; gap:14px}
  .prep .selo{width:92px}
}
@media (prefers-reduced-motion:reduce){
  .prep *{transition:none !important; scroll-behavior:auto !important}
}
@media print{
  .prep .rail-bar, .prep .reset, .prep .saved{display:none}
  .prep .day, .prep .day1{break-inside:avoid; border-bottom:1px solid var(--linha)}
  .prep .day1{background:none; margin:0}
  .prep{background:#fff}
  .prep{font-size:11pt}
}

/* --------------------------------------------------------------------------
   Correções de especificidade (autorizadas pelo Canhisares em 09/08/2026).

   O arquivo pede .eyebrow e .sig a 10,5px em tom quente, mas `.hero p` (0,1,1) e
   `.close p:not(.rule-line)` (0,2,1) são mais específicas que `.eyebrow` /
   `.sig` (0,1,0) e venciam em silêncio: medido, a sobrancelha saía a 16,5px em
   grafite (quebrando em duas linhas no celular) e a assinatura a 15px.
   As duas regras abaixo devolvem o tamanho e a cor que o desenho já pedia.
   -------------------------------------------------------------------------- */
.prep .hero p.eyebrow{
  font-size:10.5px; color:var(--quente); max-width:none;
}
.prep .close p.sig{
  font-size:10.5px; color:var(--quente);
}

/* --------------------------------------------------------------------------
   Régua solta — usada só dentro do app.

   Na página avulsa a régua é `position:sticky` com `backdrop-filter`. Dentro do
   app ela fica solta por dois motivos, nesta ordem:

   1. O app já tem cabeçalho e barra de abas próprios. Uma terceira barra
      grudada seria moldura duplicada — foi o que o Canhisares pediu para tirar.
   2. Menos uma coisa ancorada na viewport.

   ⚠️ O motivo NÃO é "backdrop-filter quebra no iOS". Essa hipótese foi levantada
   em 07/08, a troca para sticky opaco foi publicada — e a barra continuou
   quebrada. A causa real é o iOS deixar o retângulo de viewport encolhido depois
   de uma sessão de teclado em modo standalone, e isso pega `fixed` E `sticky`,
   com ou sem desfoque. Ver ESTADO_ATUAL §9.9.

   A página avulsa não tem nenhum campo de digitação (só caixas de marcar), então
   nunca abre teclado — é por isso que a régua sticky dela não fica exposta ao
   defeito. Conferido no iPhone do Canhisares em 09/08: comportou-se bem.
   -------------------------------------------------------------------------- */
.prep .rail-bar.rail-solta{
  position:static; backdrop-filter:none; background:transparent;
  border-bottom:0; margin-bottom:2px;
}
.prep .rail-bar.rail-solta .rail-in{padding-left:0; padding-right:0}

/* --------------------------------------------------------------------------
   Tema escuro — a lista nasceu só em tema claro, mas o app tem os dois e o
   participante pode estar no escuro. Sem isto a aba seria um bloco marfim
   aceso dentro de um app escuro. Só as variáveis mudam: nenhuma regra de
   layout, tamanho ou espaçamento é tocada.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] .prep{
  --preto:#f1e9db; --branco:#211c15; --grafite:#c2b8a6; --linha:#3a3226;
  --marfim:#17140f; --quente:#9d9384;
  --coral:#f2795f; --azul:#6ba8d1;
}
:root[data-theme="dark"] .prep .item + .item{border-top-color:#2c2419}
:root[data-theme="dark"] .prep .day1 .item + .item{border-top-color:#2c2419}
:root[data-theme="dark"] .prep .tag-opt{background:#2f281e; color:#a89d8c}
:root[data-theme="dark"] .prep .tag-att{background:#3a2d1e; color:#d7a86a}

/* --------------------------------------------------------------------------
   Encaixe dentro do app (aba "Preparação").

   O <main> do app já recua 1,2rem/1,15rem/1,6rem. A lista traz o recuo dela
   (22px no .wrap). Somados, o texto ficaria com quase 40px de margem no
   celular. Aqui a lista desfaz o recuo do main com margem negativa, para o
   fundo marfim chegar à borda do painel, e devolve o espaçamento por dentro —
   o resultado na tela é o mesmo recuo da página avulsa, não o dobro.
   -------------------------------------------------------------------------- */
#p-preparacao .prep{
  margin:-1.2rem -1.15rem -1.6rem;
  padding:1.2rem 1.15rem 1.6rem;
}
#p-preparacao .prep .wrap{
  padding-left:0; padding-right:0; max-width:none;
}
/* O bloco branco do Dia 1 sangra até a borda, como na página avulsa (lá o
   valor é 22px porque é o recuo de lá; aqui é o recuo do app). */
#p-preparacao .prep .day1{
  margin:0 -1.15rem; padding:44px 1.15rem 48px;
}

/* --------------------------------------------------------------------------
   "Limpar tudo" armado (segundo toque). Só muda a cor, para o segundo toque
   não passar por engano de repetição do primeiro.
   -------------------------------------------------------------------------- */
.prep .reset[data-armado]{
  border-color:var(--coral); color:var(--coral);
}

/* --------------------------------------------------------------------------
   Selo do dia da semana: a caixa de 46px do bloco ≤520px é menor que o texto.
   Medido a 390px: "Domingo" ocupa 57,6px e "Segunda" 57,1px, transbordando
   11,6px e 11,1px — sobravam 1,4px e 1,9px até o kicker, e na tela saía
   "DOMINGOOS ÚLTIMOS AJUSTES". As outras têm 13px de folga. 62px devolve a
   folga a todas sem mexer no tamanho nem no espacejamento da letra.
   -------------------------------------------------------------------------- */
@media (max-width:520px){
  .prep .day-stamp{width:62px}
}

/* --------------------------------------------------------------------------
   Linha de reserva quando a lista não carrega (página avulsa).
   -------------------------------------------------------------------------- */
.prep .reserva, .reserva{
  max-width:660px; margin:0 auto; padding:40px 22px;
  font-family:'Inter',system-ui,sans-serif; font-size:15px; color:#3A3A3A;
}

/* --------------------------------------------------------------------------
   Contador de dias do cabeçalho, enquanto a Preparação é a tela de entrada.

   O cabeçalho do aplicativo conta os dias a partir do DAY_ZERO da turma que
   está correndo. Quem abre na Preparação via "Dia 23 de 23" logo acima de uma
   lista dizendo "Amanhã é o Dia 1" — duas afirmações que se contradizem na
   mesma tela. Aqui o contador só some enquanto essa aba está aberta: nada do
   ciclo diário, do DAY_ZERO ou da pontuação é tocado, e nas outras abas ele
   volta como sempre foi. Usa visibility para não mexer no layout do cabeçalho.
   -------------------------------------------------------------------------- */
body.em-preparacao #headerDay{visibility:hidden}