/*
  contas-v1.css — as TELAS DE CONTA do site (rodada 06): entrar, criar conta em 3
  passos, recuperar senha.

  É o reference/contas.css do pacote handoff_hernia_06_contas, SEM mudança de regra,
  por cima da fundação da rodada 00 (/assets/comunidade/tokens-v1.css e
  comunidade-v1.css, que são o ui.css do pacote). Única troca: a textura do painel da
  marca aponta para a cópia da fundação (/assets/comunidade/textura-grunge.webp).

  No fim, o ENCAIXE NA MOLDURA da fundação (layout comunidade): a página de conta
  ocupa a largura do desenho (72rem) e sai da navegação de baixo, como no desenho.

  Mora em /assets/contas/, e não na raiz de /assets/: a raiz é do PICO, e o
  PicoSemComunidadeTest recusa lá qualquer referência ao mundo comunidade.
  Versão no nome: /assets/ tem cache imutável de 1 ano. Mudou a regra, nasce o v2.
*/
/* Hérnia de Disco · 06 · Contas. Componentes novos desta rodada.
   Só classes (roda com style-src 'self'). Tamanhos em rem: escalam com "Esqueci os óculos" (137,5%) e letra do sistema (200%). */

/* ---------- tela de conta ---------- */
.auth { display: grid; gap: 1.25rem; align-content: start; padding: 1rem 1rem 2rem; }
.auth__head { display: grid; gap: .5rem; }
.lead { font-size: var(--body-m); line-height: 1.4; color: var(--text-body); }
.lead strong, .note strong, .alert strong { color: var(--text-heading); font-weight: 700; overflow-wrap: anywhere; }
.form { display: grid; gap: 1.125rem; }
.row-end { display: flex; justify-content: flex-end; margin-top: -.5rem; }
.center { display: grid; justify-items: center; text-align: center; }

/* ---------- barra de passos (StepBar) ---------- */
.steps { display: grid; gap: .5rem; padding: .75rem 1rem 0; }
.steps__bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; }
.steps__bar i { height: .5rem; background: var(--dim); }
.steps__bar i.on { background: var(--mus); }
.steps__txt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; }

/* ---------- campo (TextField, estendido) ---------- */
.field { display: grid; gap: .5rem; min-width: 0; }
.field__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .75rem; }
.field__label { font: var(--label-weight) var(--label)/var(--label-lh) var(--mono); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--text-heading); }
.tag { font: var(--label-weight) .8125rem/1 var(--mono); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--text-meta); }
.tag--req { color: var(--mus); }
.box { display: flex; align-items: stretch; min-height: 3.5rem; background: var(--ink); border: 3px solid var(--bg); outline: 2px solid var(--line); border-radius: var(--r-field); }
.box:hover { outline-color: var(--text-meta); }
.box:focus-within { outline: 3px solid var(--mus); }
.box input { flex: 1; min-width: 0; border: 0; background: none; padding: .75rem .875rem; font: 500 1.1875rem/1.2 var(--sans); color: var(--ink-dark); }
.box input:focus { outline: none; }
.box input::placeholder { color: var(--placeholder); opacity: 1; }
.box__pre { display: grid; place-items: center; padding-left: .875rem; font: 800 1.25rem/1 var(--sans); color: var(--ink-dark); }
.box__pre + input { padding-left: .125rem; }
.box__btn { flex: none; min-width: 3rem; padding: 0 .875rem; border-left: 2px solid rgba(26, 21, 18, .25); font: var(--label-weight) .8125rem/1 var(--mono); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ink-dark); text-decoration: underline; text-underline-offset: 3px; }
.box__btn:hover { background: rgba(26, 21, 18, .1); }
.box__btn:focus-visible { outline: 3px solid var(--ink-dark); outline-offset: -5px; }
.field--err .box { outline: 3px solid var(--red); }
.field--ok .box { outline: 2px solid var(--pet); }
.field__d { display: grid; gap: .375rem; }
.field__d:empty { display: none; }
.help { font-size: var(--body-s); line-height: 1.35; color: var(--text-meta); }

/* ---------- linha de estado do campo (padrão único, nível campo) ---------- */
.msg { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: .25rem .5rem; margin: 0; font: var(--label-weight) var(--label)/1.3 var(--mono); letter-spacing: var(--label-track); text-transform: uppercase; }
.msg .gl { width: 1rem; height: 1rem; margin-top: .05em; }
.msg > span { flex: 1; min-width: 0; }
.msg .msg__act { min-height: 3rem; vertical-align: middle; }
.msg--err { color: var(--red-hi); }
.msg--ok { color: var(--pet-hi); }
.msg--wait { color: var(--text-meta); }
.msg--info { color: var(--text-heading); }
.msg__act { display: inline-flex; align-items: center; gap: .25rem; min-height: 3rem; padding: 0 .25rem; color: var(--mus); text-decoration: underline; text-underline-offset: 4px; }
.msg__act:hover { color: var(--ink); }

/* ---------- medidor de senha (PasswordMeter) ---------- */
.meter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: .25rem; align-items: center; margin: 0; }
.meter i { height: .375rem; background: var(--dim); }
.meter b { padding-left: .5rem; font: var(--label-weight) var(--label)/1 var(--mono); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--text-heading); white-space: nowrap; }
.meter--1 i:nth-child(1) { background: var(--red); }
.meter--2 i:nth-child(-n+2) { background: var(--ora); }
.meter--3 i:nth-child(-n+3) { background: var(--pet-hi); }
.meter--0 b { color: var(--text-muted); }

/* ---------- aceite (checkbox em linha) ---------- */
.check { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .75rem; align-items: start; min-height: 3rem; padding: .75rem; border: 2px solid var(--line); cursor: pointer; }
.check:hover { border-color: var(--text-meta); }
.check input { width: 1.75rem; height: 1.75rem; margin: 0; accent-color: var(--mus); }
.check span { font-size: var(--body-m); line-height: 1.35; color: var(--text-heading); }
.check a { color: var(--mus); font-weight: 700; }
.check:has(input:checked) { border-color: var(--mus); }
.check--err, .check--err:hover { border-color: var(--red); }

/* ---------- caixa informativa ---------- */
.note { display: grid; gap: .5rem; padding: .875rem 1rem; border: 1.5px dashed var(--line); }
.note p, .note li { color: var(--text-body); font-size: var(--body-m); line-height: 1.4; }
.note ul { margin: 0; padding-left: 1.125rem; display: grid; gap: .375rem; }
.note li::marker { color: var(--mus); }
.note a { font-weight: 700; }

/* ---------- aviso em bloco (padrão único, nível tela) ---------- */
.alert { display: grid; gap: .5rem; padding: .875rem 1rem; background: var(--surface-card); border: 2px solid var(--red); }
.alert__t { display: flex; align-items: flex-start; gap: .5rem; margin: 0; font: 800 1.0625rem/1.2 var(--disp-small); text-transform: uppercase; letter-spacing: .02em; color: var(--red-hi); }
.alert__t .gl { width: 1.125rem; height: 1.125rem; margin-top: .05em; }
.alert p { color: var(--text-heading); font-size: var(--body-m); line-height: 1.4; }
.alert .btn2 { min-height: 3rem; margin-top: .25rem; }
.alert .link { justify-self: start; }
.alert--offline { border-style: dashed; border-color: var(--line); }
.alert--offline .alert__t { color: var(--text-heading); }
.alert--info { border-color: var(--mus); }
.alert--info .alert__t { color: var(--mus); }

/* ---------- linha de contexto (ContextLine) ---------- */
.ctx { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .125rem .75rem; align-items: center; padding: .75rem .875rem; background: var(--highlight); border: 1.5px solid var(--highlight-border); }
.ctx .ico { color: var(--mus); grid-row: span 2; }
.ctx b { font: 700 1.125rem/1.2 var(--sans); color: var(--text-heading); }
.ctx span { font-size: 1rem; line-height: 1.3; color: var(--text-body); }

/* ---------- aviso flutuante (Toast) ---------- */
.toast { position: absolute; z-index: 4; left: .75rem; right: .75rem; bottom: 11rem; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding: .625rem .875rem; background: var(--surface-sheet); border-left: 6px solid var(--pet-hi); box-shadow: var(--sh-card); }
.toast .gl { width: 1.125rem; height: 1.125rem; color: var(--pet-hi); flex: none; }
.toast p { flex: 1; min-width: 10rem; font: 700 1.125rem/1.3 var(--sans); color: var(--text-heading); }
.toast p span { display: block; font-weight: 500; font-size: 1rem; color: var(--text-body); }
.toast a { display: inline-flex; align-items: center; min-height: 3rem; font: var(--label-weight) var(--label)/1 var(--mono); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--mus); text-decoration: underline; text-underline-offset: 4px; }
.toast--info { border-left-color: var(--mus); }
.toast--info .gl { color: var(--mus); }
.site .toast { position: fixed; left: 50%; right: auto; bottom: 5.5rem; transform: translateX(-50%); width: min(30rem, calc(100% - 1.5rem)); }

/* ---------- campo de código (CodeField) ---------- */
.code { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.code span { display: grid; place-items: center; min-height: 4rem; background: var(--ink); color: var(--ink-dark); border: 3px solid var(--bg); outline: 2px solid var(--line); border-radius: var(--r-field); font: 400 1.75rem/1 var(--disp); }
.code span.cur { outline: 3px solid var(--mus); }
.code--err span { outline: 3px solid var(--red); }
.code input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; font-size: 1rem; cursor: text; }
.code:focus-within span.cur { outline-width: 4px; }

/* ---------- reenvio (ResendTimer) ---------- */
.resend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .375rem; min-height: 3rem; margin: 0; font: var(--label-weight) var(--label)/1.3 var(--mono); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--text-meta); }
.resend .gl { width: 1rem; height: 1rem; }
button.resend { color: var(--mus); text-decoration: underline; text-underline-offset: 4px; }
button.resend:hover { color: var(--ink); }
.resend--ok { color: var(--pet-hi); }
.resend--err { color: var(--red-hi); }

/* ---------- links ---------- */
.link { display: inline-flex; align-items: center; gap: .375rem; min-height: 3rem; font: var(--label-weight) var(--label)/1.2 var(--mono); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--mus); text-decoration: underline; text-underline-offset: 4px; }
.link:hover { color: var(--ink); }
.link .gl { width: 1rem; height: 1rem; }
.alt { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 .5rem; min-height: 3rem; color: var(--text-body); }
.alt a { display: inline-flex; align-items: center; min-height: 3rem; font-weight: 700; color: var(--mus); }
.alt a:hover { color: var(--ink); }

/* ---------- botão carregando: texto do verbo + K7 ---------- */
.cta[aria-busy="true"] { cursor: progress; }
.cta[aria-busy="true"]:hover { transform: none; box-shadow: var(--sh-cta); }
.cta .ico { width: 1.5rem; height: 1.5rem; }
.btn2 .gl { width: 1rem; height: 1rem; }
.btn2 { gap: .5rem; }

/* ---------- objeto da tela (envelope, carimbo) ---------- */
.obj { width: 6rem; height: 6rem; display: grid; place-items: center; border: 2px solid var(--line); color: var(--mus); }
.obj svg { width: 3.5rem; height: 3.5rem; }
.obj--ok { border-color: var(--pet); color: var(--pet-hi); }

/* ---------- boas-vindas ---------- */
.welcome { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 1.5rem; padding: 1.25rem 1.25rem 1.25rem; }
.welcome__brand { position: relative; flex: 1; display: grid; align-content: center; justify-items: center; gap: 1.25rem; text-align: center; padding: 1.5rem .5rem; }
.welcome__brand::after { content: ""; position: absolute; inset: 0; background: url("/assets/comunidade/textura-grunge.webp") repeat; pointer-events: none; } /* grunge por cima, sem alterar os tons-base */
.welcome__logo { width: min(17.5rem, 80%); height: auto; }
.welcome__brand .stripes { width: 12rem; justify-items: center; }
.welcome__foot { display: grid; gap: .875rem; }
.resume-btn { display: grid; justify-items: center; gap: .25rem; min-height: 3.25rem; padding: .5rem 1rem; border: 2px solid var(--mus); color: var(--mus); text-align: center; text-decoration: none; }
.resume-btn b { display: inline-flex; align-items: center; gap: .375rem; font: var(--label-weight) .875rem/1.25 var(--mono); letter-spacing: var(--label-track); text-transform: uppercase; }
.resume-btn span { font: 500 1rem/1.2 var(--sans); color: var(--text-body); overflow-wrap: anywhere; }
.resume-btn:hover { background: var(--highlight); }

/* ---------- faixa "cadastro pela metade" no FEED (visitante) ---------- */
.resume { display: grid; grid-template-columns: minmax(0, 1fr) 3rem; gap: .25rem .25rem; align-items: start; padding: .75rem 0 .25rem .875rem; background: var(--surface-raised); border: 2px solid var(--mus); }
.resume .label { display: flex; gap: .375rem; align-items: center; }
.resume p:not(.label) { color: var(--text-heading); }
.resume .iconbtn { grid-column: 2; grid-row: 1 / span 3; margin-top: -.5rem; }
.resume .link { justify-self: start; }

/* ---------- passo 3: edições, prévia do selo, interruptor ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.tchip { display: inline-flex; align-items: center; gap: .375rem; min-height: 3rem; padding: 0 .875rem; border: 2px solid var(--line); color: var(--text-heading); font: var(--label-weight) .875rem/1 var(--mono); letter-spacing: var(--label-track); text-transform: uppercase; }
.tchip:hover { border-color: var(--mus); }
.tchip .gl { width: 1rem; height: 1rem; display: none; }
.tchip[aria-pressed="true"] { background: var(--mus); border-color: var(--mus); color: var(--ink-dark); }
.tchip[aria-pressed="true"] .gl { display: block; }
.sealprev { display: grid; gap: .5rem; padding: .75rem; background: var(--surface-card); border: 1px solid var(--divider); }
.sealprev__who { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .625rem; }
.sealprev__who b { font: 700 1.125rem/1.2 var(--sans); color: var(--text-heading); }
.sealprev__who em { font-style: normal; font-size: 1rem; color: var(--text-muted); }
.group { display: grid; gap: .625rem; margin: 0; padding: 1rem 0 0; min-width: 0; border: 0; border-top: 1px solid var(--divider); }
.group legend { float: left; width: 100%; padding: 0; margin-bottom: .625rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; }
.group legend + * { clear: both; }
.switch { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1rem; align-items: center; width: 100%; min-height: 3rem; padding: 1rem 0; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); text-align: left; }
.switch__t { font: 800 1.0625rem/1.2 var(--disp-small); text-transform: uppercase; letter-spacing: .02em; color: var(--text-heading); }
.switch__t small { font: var(--label-weight) .8125rem/1 var(--mono); letter-spacing: var(--label-track); color: var(--text-meta); margin-left: .375rem; }
.switch__d { grid-column: 1; font-size: 1rem; line-height: 1.35; color: var(--text-body); }
.switch__s { grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: center; gap: .375rem; font: var(--label-weight) .8125rem/1 var(--mono); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--text-meta); }
.track { position: relative; width: 3.75rem; height: 2rem; border: 2px solid var(--line); border-radius: var(--r-toggle); }
.track i { position: absolute; left: .25rem; top: .25rem; width: 1.25rem; height: 1.25rem; background: var(--line); border-radius: 2px; }
.switch[aria-checked="true"] .track { background: var(--mus); border-color: var(--mus); }
.switch[aria-checked="true"] .track i { left: auto; right: .25rem; background: var(--ink-dark); }
.switch[aria-checked="true"] .switch__s { color: var(--mus); }

/* ---------- folha de pré-permissão ---------- */
.why { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .75rem; width: 100%; text-align: left; }
.why li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .75rem; align-items: start; color: var(--text-heading); font-size: var(--body-m); line-height: 1.35; }
.why .ico { color: var(--mus); }
.sheet .note, .dlg .note { text-align: left; width: 100%; }
.dlg .help { max-width: 22rem; }
.sheet .help { max-width: 22rem; }

/* ---------- site: página de conta ---------- */
.site-back { display: inline-flex; align-items: center; gap: .25rem; min-height: var(--hit-site); padding: 0 .75rem; color: var(--text-body); text-decoration: none; font: var(--label-weight) .875rem/1 var(--mono); letter-spacing: var(--label-track); text-transform: uppercase; }
.site-back:hover { color: var(--ink); }
.site-back .ico { width: 1.25rem; height: 1.25rem; }
.authp { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; display: grid; gap: 2rem; }
.authp__brand { display: none; }
.authp__form { width: 100%; max-width: 27.5rem; margin: 0 auto; display: grid; gap: 1.25rem; align-content: start; }
.authp .steps { padding: 0; }
.backlink { justify-self: start; display: inline-flex; align-items: center; gap: .25rem; min-height: var(--hit-site); margin: -.5rem 0 -.5rem -.5rem; padding: 0 .5rem; color: var(--text-body); text-decoration: none; font: var(--label-weight) .8125rem/1 var(--mono); letter-spacing: var(--label-track); text-transform: uppercase; }
.backlink:hover { color: var(--ink); }
.backlink .ico { width: 1.25rem; height: 1.25rem; }
.site .link, .site .alt, .site .alt a, .site .msg__act, .site .resend, .site .tchip { min-height: var(--hit-site); }
.site .box__btn { min-width: var(--hit-site); }
.site .cta:focus-visible, .site .btn2:focus-visible, .site .link:focus-visible { outline: 3px solid var(--mus); outline-offset: 4px; }
.site .btn2:hover .gl { color: var(--bg); }
@media (min-width: 64rem) {
  .authp { grid-template-columns: minmax(0, 1fr) 27.5rem; gap: 5rem; align-items: start; padding: 3.5rem 2rem 4rem; }
  .authp__brand { position: sticky; top: 7rem; display: grid; gap: 1.5rem; align-content: start; justify-items: start; padding: 2.75rem; border: 1px solid var(--vin); outline: 1px solid var(--red); outline-offset: -8px; }
  .authp__brand::after { content: ""; position: absolute; inset: 0; background: url("/assets/comunidade/textura-grunge.webp") repeat; pointer-events: none; }
  .authp__brand img { width: min(22rem, 100%); height: auto; }
  .authp__brand .call { max-width: 26rem; }
  .authp__brand ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
  .authp__brand li { display: flex; gap: .625rem; align-items: center; color: var(--text-body); font-size: var(--body-m); }
  .authp__brand li .ico { color: var(--mus); }
  .authp__form { margin: 0; }
}

/* ---------- site: folha (celular) / modal (≥ 48rem) ---------- */
.dlg-veil { position: fixed; inset: 0; z-index: 7; background: var(--veil-sheet); }
.dlg { position: fixed; z-index: 8; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow: auto; background: var(--surface-sheet); border-top: 2px solid var(--red); box-shadow: var(--sh-sheet); padding: .625rem 1.25rem 2rem; display: grid; gap: .75rem; justify-items: center; text-align: center; }
.dlg .label { display: inline-flex; gap: 6px; align-items: center; }
@media (min-width: 48rem) {
  .dlg-veil { background: var(--veil-modal); }
  .dlg { left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: min(30rem, calc(100% - 2rem)); border: 1px solid var(--vin); outline: 1px solid var(--red); outline-offset: -8px; box-shadow: 8px 8px 0 var(--vin); padding: 2.25rem 2rem 1.75rem; }
  .dlg .sheet__handle { display: none; }
}

/* ---------- letra grande (app 200%) ---------- */
html.letra-200 .stack-head h1 { font-size: 1.1875rem; }
html.letra-200 .code { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.letra-200 .meter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.letra-200 .meter b { grid-column: 1 / -1; padding: .25rem 0 0; }

/* ---------- encaixe na moldura da fundação (rodada 00) ---------- */
/* A coluna de leitura da moldura tem 40rem; a tela de conta é o desenho de 72rem
   (marca + formulário lado a lado no desktop), com o respiro dela mesma. */
.site-main:has(> .col-read > .authp) { padding: 0; }
.col-read:has(> .authp) { max-width: none; }
/* Tela de conta é fluxo focado: sem a navegação de baixo (o desenho não tem), e o
   rodapé sem o respiro que ela pedia. */
body:has(.authp) .fixed-bottom { display: none; }
body:has(.authp) .site-foot { padding-bottom: 40px; }
/* Sem JavaScript o botão MOSTRAR não faz nada: some. O contas-v1.js tira o `hidden`. */
.box__btn[hidden] { display: none; }
/* O e-mail da recuperação vai num campo invisível, para o gerenciador de senhas
   associar a senha nova à conta (COMPONENTS › preenchimento automático). */
.sr-campo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
/* Linhas de estado que o script liga e desliga (o contador de caracteres). */
.msg[hidden] { display: none; }
/* O CÓDIGO SEM JAVASCRIPT: as 6 casas desenhadas dependem do script (contas-v1.js
   põe `.code--vivo`). Sem ele, o campo aparece inteiro, como uma caixa comum. */
.code:not(.code--vivo) { display: block; }
.code:not(.code--vivo) span { display: none; }
.code:not(.code--vivo) input { position: static; opacity: 1; width: 100%; min-height: 4rem; background: var(--ink); color: var(--ink-dark); border: 3px solid var(--bg); outline: 2px solid var(--line); border-radius: var(--r-field); font: 400 1.75rem/1 var(--disp); letter-spacing: .5em; text-align: center; }
.code:not(.code--vivo) input:focus { outline: 3px solid var(--mus); }
/* PASSO 3 SEM JAVASCRIPT: os chips das edições e o interruptor "aparecer na busca" são
   CHECKBOXES de verdade (o desenho usa botões com aria-pressed/role=switch, que só
   funcionam com script e não entram num POST). O estado desenhado vem do :has. */
.tchip input, .switch input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.tchip, .switch { position: relative; cursor: pointer; }
.tchip:has(input:checked) { background: var(--mus); border-color: var(--mus); color: var(--ink-dark); }
.tchip:has(input:checked) .gl { display: block; }
.tchip:has(input:focus-visible), .switch:has(input:focus-visible) { outline: 3px solid var(--mus); outline-offset: 3px; }
.switch:has(input:checked) .track { background: var(--mus); border-color: var(--mus); }
.switch:has(input:checked) .track i { left: auto; right: .25rem; background: var(--ink-dark); }
.switch:has(input:checked) .switch__s { color: var(--mus); }
.switch .switch__on, .switch:has(input:checked) .switch__off { display: none; }
.switch:has(input:checked) .switch__on { display: inline; }
/* O "Preencho depois", o "Ir para o entrar": ação secundária sem moldura. */
.site .quiet { min-height: var(--hit-site); }