/* SHILOH — o painel de instalação (passo a passo iPhone/Android).
   Só o que pertence ao painel montado por js/install-steps.js. Usado pela
   /install e pela /thank-you: é UM arquivo lido de dois lugares, de propósito.
   O que é da página (cabeçalho, porquês, .ins-calm, .ins-alt) fica no
   <style> da install.html. Só tokens do css/styles.css. */

.step{ display:flex; gap:15px; align-items:flex-start; margin-bottom:20px; }
.step-n{ flex:0 0 32px; height:32px; border-radius:50%; background:var(--navy);
         color:#fff; font-weight:700; font-size:15px; display:flex;
         align-items:center; justify-content:center; }
.step-b{ flex:1; }
.step-t{ font-size:16.5px; line-height:1.5; color:var(--navy); font-weight:700; margin:4px 0 4px; }
.step-d{ font-size:15px; line-height:1.6; color:var(--text-body); margin:0; }
.step-d b{ color:var(--navy); }
.shot{ margin-top:11px; border-radius:12px; overflow:hidden; border:1px solid var(--card-border); display:block; width:100%; }

.ins-cta{ width:100%; margin:6px 0 4px; }
.ins-warn{ background:#FBF3F3; border-left:4px solid #B4483C; border-radius:0 12px 12px 0;
           padding:16px 18px; margin-bottom:20px; }
.ins-warn h2{ font-family:var(--font-sans); font-size:16px; color:#B4483C; margin:0 0 8px; }
.ins-warn p{ font-size:15px; line-height:1.6; color:var(--text-body); margin:0 0 12px; }
.ins-ok{ background:var(--msg-success-bg); border-radius:14px; padding:20px; text-align:center; }
.ins-ok h2{ font-family:var(--font-serif); font-size:23px; color:var(--msg-success); margin:0 0 8px; }
.ins-ok p{ font-size:15.5px; line-height:1.6; color:var(--text-body); margin:0; }
.ins-url{ font-size:14px; word-break:break-all; background:var(--ivory-light);
          border:1px solid var(--card-border); border-radius:10px; padding:12px 14px;
          color:var(--gold-text); text-align:center; }
.ins-tip{ font-size:14px; line-height:1.6; color:var(--text-muted); text-align:center; margin:6px 0 0; }

/* ---- O SELETOR DE APARELHO -------------------------------------------
   A detecção PRÉ-SELECIONA; a cliente só corrige. Ela chega com o painel
   certo aberto — perguntar "você tem iPhone ou Android?" antes da primeira
   instrução é mais um lugar onde ela pode errar, e uma parte responde
   errado. Os botões existem para quando a detecção falha, e para quem lê
   no computador.

   52px de altura porque é alvo de toque para dedo de 70 anos. Nada abaixo
   de 48px nesta página.

   Dois botões honestos, não `role="tablist"`: tablist pela metade lê pior
   num leitor de tela do que isto. E a escolha não vai para o
   localStorage — ela instala uma vez. */
.pick{ display:flex; gap:10px; margin:0 0 24px; }
.pick button{
  flex:1; min-height:52px; padding:14px 10px;
  font-family:var(--font-sans); font-size:16px; font-weight:700;
  color:var(--text-caption); background:var(--ivory-light);
  border:1px solid var(--card-border); border-radius:var(--radius-card);
  cursor:pointer; line-height:1.3;
}
.pick button[aria-pressed="true"]{
  color:var(--navy); background:#fff;
  border-color:var(--gold-solid); box-shadow:0 0 0 1px var(--gold-solid) inset;
}

/* O aviso do botão de compartilhar. Veio do support.html em 02/09, quando a
   instalação deixou de existir em dois lugares: ele pertence ao passo, não a
   uma página de suporte que ela só abre depois de desistir. Fica logo abaixo
   do passo 1, que é onde ela trava, e em azul — observação, não passo. */
.ins-note{ background:var(--tint-blue); border:1px solid var(--blue-pale);
           border-radius:var(--radius-card); padding:16px 18px; margin:0 0 20px; }
.ins-note p{ font-size:15px; line-height:1.6; color:var(--text-body); margin:0; }
.ins-note b{ color:var(--navy); }