/* ============================================================
   TOKENS DO GRIFO
   Tres temas: ceu, papel e noturno. A densidade continua sendo
   um multiplicador por cima do rem, nunca um font-size fixo no
   html, para nao atropelar a preferencia do navegador.

   --brand e a cor do mascote. Nos temas claros ela NAO carrega
   texto: 7FB3DD da cerca de 2,2:1 sobre branco. Quem carrega
   texto e --primary. No noturno as duas coincidem, porque ali o
   fundo e escuro e a relacao passa de 8:1.
   ============================================================ */
:root { --ui-scale: 1 }
html[data-density="compact"]     { --ui-scale: .9 }
html[data-density="cozy"]        { --ui-scale: 1 }
html[data-density="comfortable"] { --ui-scale: 1.125 }
html[data-density="large"]       { --ui-scale: 1.25 }

@media (min-width: 1024px) and (pointer: fine) {
  html:not([data-density]) { --ui-scale: .95 }
}

:root{
  --radius:calc(.875rem * var(--ui-scale));
  --header:calc(3.25rem * var(--ui-scale));
  --tabbar:calc(3.5rem * var(--ui-scale));
  --sp:calc(.25rem * var(--ui-scale));

  --t-xs:  calc(.6875rem * var(--ui-scale));
  --t-sm:  calc(.8125rem * var(--ui-scale));
  --t-base:calc(.875rem  * var(--ui-scale));
  --t-lg:  calc(1rem     * var(--ui-scale));
  --t-xl:  calc(1.125rem * var(--ui-scale));
  --t-2xl: calc(1.375rem * var(--ui-scale));
  --t-3xl: calc(1.75rem  * var(--ui-scale));

  /* Duas familias, dois trabalhos. Geist e a interface, e e a marca do app.
     A leitura tem fonte propria, escolhida por ela em Sua conta, porque a
     fonte mais rapida muda de leitor para leitor. O padrao e Literata, feita
     sob encomenda para leitura continua em tela. */
  --fonte-ui: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-leitura: "Literata", Georgia, "Times New Roman", serif;
}

html[data-fonte="atkinson"]{
  --fonte-leitura: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
}
html[data-fonte="geist"]{ --fonte-leitura: var(--fonte-ui) }

/* papel: fundo levemente quente, marca fria. E o padrao, porque
   frio sobre quente separa mais e porque papel cansa menos que
   branco puro em leitura longa, que e o que se faz aqui. */
html[data-theme="papel"], :root{
  --brand:   #7FB3DD;
  --bg:      #F5F1E8;
  --card:    #FDFBF6;
  --surface: #E3EDF6;
  --muted:   #ECE6DA;
  --muted-fg:#6B6357;
  --border:  #E6DFD1;
  --fg:      #262119;
  --primary: #2A5F86;
  --primary-fg: #FFFFFF;
  --ok:       #2E6B4F;  --ok-surface:       #E9F1EA;
  --warning:  #8A5A12;  --warning-surface:  #F7EEDA;
  --critical: #A4402F;  --critical-surface: #F9EBE6;
  --moldura: #1F2A33;
}

/* ceu: tudo na mesma familia fria */
html[data-theme="ceu"]{
  --brand:   #7FB3DD;
  --bg:      #F0F4F8;
  --card:    #FFFFFF;
  --surface: #DCE9F5;
  --muted:   #E4EAF1;
  --muted-fg:#5C6B7C;
  --border:  #DCE4EC;
  --fg:      #14212E;
  --primary: #1F5680;
  --primary-fg: #FFFFFF;
  --ok:       #2E6B4F;  --ok-surface:       #E8F1EC;
  --warning:  #8A5A12;  --warning-surface:  #FAF0D8;
  --critical: #A4402F;  --critical-surface: #FBEDE9;
  --moldura: #1B2733;
}

/* noturno: o unico tema em que o azul da marca e a cor primaria */
html[data-theme="noturno"]{
  --brand:   #7FB3DD;
  --bg:      #0E141B;
  --card:    #19222C;
  --surface: #1D2B38;
  --muted:   #1D2B38;
  --muted-fg:#93A2B3;
  --border:  #2A3540;
  --fg:      #E3EAF2;
  --primary: #7FB3DD;
  --primary-fg: #0E141B;
  --ok:       #6BBE8B;  --ok-surface:       #122A1D;
  --warning:  #E0A93F;  --warning-surface:  #2A2110;
  --critical: #E8867A;  --critical-surface: #2E1A17;
  --moldura: #05080B;
}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{overscroll-behavior:none;-webkit-text-size-adjust:100%}
body{
  font-family:var(--fonte-ui);
  font-size:var(--t-base); line-height:1.45;
  background:var(--bg); color:var(--fg);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
  min-height:100dvh;
}
header,nav,button{-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.tnum{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.app{max-width:26.875rem;margin:0 auto;position:relative;min-height:100dvh;background:var(--bg)}
@media(min-width:520px){
  body{background:var(--moldura);padding:24px 0}
  .app{border-radius:28px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.4);min-height:844px}
}

/* ============================================================
   HEADER
   ============================================================ */
.hd{
  position:sticky;top:0;z-index:40;
  padding-top:env(safe-area-inset-top);
  background:color-mix(in srgb,var(--card) 85%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.hd-in{min-height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 calc(4*var(--sp))}
.brand{font-size:var(--t-lg);font-weight:600;letter-spacing:-.02em;color:var(--primary)}
.hd-title{font-size:var(--t-lg);font-weight:600;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-sub{font-size:var(--t-xs);color:var(--muted-fg);margin-left:8px}
.hd-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}
.icon-btn{width:calc(9*var(--sp));height:calc(9*var(--sp));display:grid;place-items:center;border-radius:999px;color:var(--muted-fg);position:relative;flex-shrink:0}
.icon-btn:active{background:var(--muted)}
.icon-btn svg{width:1.28em;height:1.28em;stroke-width:1.9}
.badge-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:999px;background:var(--critical);box-shadow:0 0 0 2px var(--card)}

/* ============================================================
   CONTEUDO
   ============================================================ */
main{
  padding:calc(3*var(--sp)) calc(3*var(--sp)) calc(var(--tabbar) + env(safe-area-inset-bottom) + 5*var(--sp));
  display:flex;flex-direction:column;gap:calc(3*var(--sp));
}
.stack{display:flex;flex-direction:column;gap:calc(3*var(--sp))}

.hero{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--primary);color:var(--primary-fg);
  border-radius:var(--radius);padding:calc(3*var(--sp)) calc(3.5*var(--sp));
}
.hero:active{opacity:.9}
.hero .n{font-size:var(--t-3xl);font-weight:600;line-height:1}
.hero .t{flex:1;font-size:var(--t-sm);line-height:1.35}
.hero .t small{display:block;font-size:var(--t-xs);opacity:.82;margin-top:2px}
.hero svg{width:1.15em;height:1.15em;opacity:.7;flex-shrink:0}

.kpis{display:grid;grid-template-columns:1fr 1fr;gap:calc(3*var(--sp))}
.kpi{background:var(--card);border-radius:var(--radius);padding:calc(3*var(--sp)) calc(3.5*var(--sp))}
.kpi .lbl{font-size:var(--t-sm);color:var(--muted-fg)}
.kpi .val{font-size:var(--t-3xl);font-weight:600;letter-spacing:-.025em;margin-top:4px;line-height:1.05}
.kpi .tr{font-size:var(--t-xs);font-weight:500;color:var(--muted-fg);margin-top:2px}

.panel{background:var(--card);border-radius:var(--radius);overflow:hidden}
.panel-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(3*var(--sp)) calc(3.5*var(--sp)) calc(1.5*var(--sp))}
.panel-hd h2{font-size:var(--t-lg);font-weight:600;letter-spacing:-.015em}
.link{font-size:var(--t-sm);font-weight:500;color:var(--primary)}
.link:active{opacity:.6}

.row{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;padding:calc(2.5*var(--sp)) calc(3.5*var(--sp));border-top:1px solid var(--border)}
.row:active{background:var(--muted)}
.panel ul li:first-child .row{border-top:1px solid var(--border)}
.dot{width:6px;height:6px;border-radius:999px;margin-top:6px;flex-shrink:0;background:var(--border)}
.dot.crit{background:var(--critical)} .dot.warn{background:var(--warning)} .dot.ok{background:var(--ok)} .dot.pri{background:var(--primary)}
.row-body{flex:1;min-width:0}
.row-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.unit{font-size:var(--t-base);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unit.unread{font-weight:600}
.when{font-size:var(--t-xs);color:var(--muted-fg);flex-shrink:0}
.msg{display:block;font-size:var(--t-sm);color:var(--muted-fg);line-height:1.35;margin-top:1px}
.row > svg{width:1.15em;height:1.15em;color:var(--muted-fg);opacity:.5;flex-shrink:0;margin-top:4px}

.block{background:var(--card);border-radius:var(--radius);padding:calc(3*var(--sp)) calc(3.5*var(--sp))}
.block-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.block-top h2{font-size:var(--t-lg);font-weight:600;letter-spacing:-.015em}
/* So o paragrafo solto do bloco, e nao todo paragrafo dentro dele. Sem o
   sinal de maior, esta regra vencia a do material de estudo por ser mais
   especifica, e o texto que ela le saia em 13px cinza no lugar de 16px
   quase preto. */
.block > p{font-size:var(--t-sm);color:var(--muted-fg);margin-top:2px}

.pill{font-size:var(--t-sm);font-weight:600;padding:2px 9px;border-radius:999px;background:var(--muted);color:var(--muted-fg)}
.pill.ok{background:var(--ok-surface);color:var(--ok)}
.pill.warn{background:var(--warning-surface);color:var(--warning)}
.pill.crit{background:var(--critical-surface);color:var(--critical)}
.pill.pri{background:var(--surface);color:var(--primary)}

/* a amostra de fonte na tela da conta: um paragrafo do proprio material,
   para a escolha ser feita lendo, e nao olhando o nome da fonte */
.amostra{
  margin-top:calc(3*var(--sp));padding:calc(3*var(--sp)) calc(3.5*var(--sp));
  background:var(--muted);border-radius:var(--radius)
}
.amostra p{margin:0}

/* o sino: contador e o popup que ele abre, ancorado na barra */
.badge-num{
  position:absolute;top:3px;right:2px;min-width:16px;height:16px;padding:0 4px;
  display:grid;place-items:center;border-radius:999px;
  background:var(--critical);color:#fff;font-size:10px;font-weight:700;line-height:1;
  box-shadow:0 0 0 2px var(--card)
}
.hd-in{position:relative}
.popup{
  /* Ancorado na barra, e nao no sino: assim a largura se mede pela coluna do
     app e a borda esquerda nunca sai da tela. */
  position:absolute;top:calc(100% + 6px);right:calc(4*var(--sp));z-index:50;
  /* Em pixel de proposito. Em rem, a caixa engordaria junto com a fonte do
     navegador, e no GG com fonte grande ela estourava a tela. O texto cresce
     por dentro e a caixa rola, que e o que se espera. */
  width:min(300px,calc(100% - 8*var(--sp)));
  max-height:min(48vh,360px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--card);border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,.16),0 0 0 1px var(--border)
}
.popup-hd{
  position:sticky;top:0;z-index:1;background:var(--card);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:calc(2.5*var(--sp)) calc(3*var(--sp)) calc(1.5*var(--sp))
}
.popup-hd h2{font-size:var(--t-base);font-weight:600;letter-spacing:-.015em}
.popup .row{padding:calc(2*var(--sp)) calc(3*var(--sp));gap:8px}
.popup .row.nova{background:var(--surface)}
.popup .row > svg{margin-top:2px}
.popup .unit{font-size:var(--t-sm)}
.popup .msg{
  font-size:var(--t-xs);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.popup-vazio{padding:0 calc(3*var(--sp)) calc(3*var(--sp));font-size:var(--t-sm);color:var(--muted-fg);line-height:1.4}

/* o convite para instalar, usado no portao, no login e na conta */
.instalar .btn{width:100%}
.instalar .passo-a-passo{margin-top:calc(2.5*var(--sp))}
.login .instalar{margin-top:calc(4*var(--sp))}

/* saudacao da home: o nome primeiro, a cena embaixo. A arte ja vem com o
   canto arredondado e ja respeita quem pediu menos movimento no sistema */
.saudacao h1{font-size:var(--t-2xl);font-weight:600;letter-spacing:-.025em;line-height:1.2}
.saudacao img{width:100%;height:auto;display:block;margin-top:calc(2.5*var(--sp))}

/* progresso: a barra do quiz reaproveitada na lista, sempre com o numero
   por perto, porque barra sozinha nao diz se falta pouco ou muito */
.barra{display:block}
.barra.pronta span{background:var(--ok)}
.row .barra{margin-top:calc(2*var(--sp))}
.conta{font-size:var(--t-xs);font-weight:600;color:var(--muted-fg);flex-shrink:0}
.conta.pronta{color:var(--ok)}

/* resultados: cada conteudo e uma linha que abre nas partes. Sem javascript,
   porque <details> ja faz isso e continua funcionando offline */
.dobra > summary{list-style:none;cursor:pointer}
.dobra > summary::-webkit-details-marker{display:none}
.dobra > summary::marker{content:""}
.dobra > summary:active{background:var(--muted)}
.dobra .seta{transition:transform .15s ease}
.dobra[open] > summary .seta{transform:rotate(180deg)}
.dentro{background:var(--muted);padding-bottom:calc(1*var(--sp))}
.dentro .row{padding-left:calc(7*var(--sp));border-top:1px solid var(--border)}
.dentro .unit{font-weight:400}

/* dobra de bimestre na tela da materia. Reaproveita a .dobra dos resultados;
   o que muda e que aqui o que abre e uma lista de aulas, e nao linhas soltas,
   entao nao leva o fundo cinza do .dentro, que escureceria meia tela. */
.bimestre > summary{border-bottom:1px solid var(--border)}
.bimestre[open] > summary{border-bottom:none}
.bimestre + .bimestre{border-top:1px solid var(--border)}
.dentro-bim > .grupo:first-child .grupo-hd{padding-top:calc(2*var(--sp))}
.dentro-bim > .grupo + .grupo .grupo-hd{border-top:1px solid var(--border)}

/* cabecalho de aula dentro do painel de conteudos */
.grupo + .grupo .grupo-hd{border-top:1px solid var(--border);padding-top:calc(4.5*var(--sp))}
.grupo-hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:calc(3*var(--sp)) calc(3.5*var(--sp)) calc(1.5*var(--sp))}
.grupo-hd b{font-size:var(--t-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-fg)}
.grupo-hd span{font-size:var(--t-xs);color:var(--muted-fg)}

.vazio{background:var(--card);border-radius:var(--radius);padding:calc(8*var(--sp)) calc(4*var(--sp));text-align:center}
.vazio svg{width:2.2em;height:2.2em;color:var(--muted-fg);opacity:.4;stroke-width:1.5}
.vazio h2{font-size:var(--t-lg);font-weight:600;margin-top:calc(2*var(--sp))}
.vazio p{font-size:var(--t-sm);color:var(--muted-fg);margin-top:4px}

/* ============================================================
   BOTOES
   ============================================================ */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  height:calc(11*var(--sp));border-radius:var(--radius);
  background:var(--primary);color:var(--primary-fg);
  font-size:var(--t-base);font-weight:600;letter-spacing:-.01em;
}
.btn:active{opacity:.88}
.btn svg{width:1.15em;height:1.15em;stroke-width:2}
.btn.ghost{background:var(--card);color:var(--fg);box-shadow:inset 0 0 0 1px var(--border)}
.btn.mutado{background:var(--muted);color:var(--muted-fg)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn-linha{display:flex;gap:calc(2*var(--sp))}

/* ============================================================
   LEITURA DO MATERIAL
   Calibrado para texto longo, nao para paragrafo solto: linha
   mais alta, mais ar entre blocos e respiro antes dos titulos.
   ============================================================ */
.prose{
  font-family:var(--fonte-leitura);
  font-size:var(--t-lg);
  line-height:1.72;
  overflow-wrap:break-word;
  text-wrap:pretty;                 /* evita palavra sozinha na ultima linha */
  hyphens:none;
}
.prose > * + *{margin-top:calc(4.5*var(--sp))}

.prose h1,.prose h2,.prose h3{line-height:1.25;letter-spacing:-.02em;text-wrap:balance}
.prose h1{font-size:var(--t-2xl);font-weight:600}
.prose h2{
  font-size:var(--t-xl);font-weight:600;
  margin-top:calc(9*var(--sp));
  padding-top:calc(4*var(--sp));
  border-top:1px solid var(--border);
}
.prose h3{font-size:var(--t-lg);font-weight:600;margin-top:calc(7*var(--sp))}
/* o primeiro titulo do texto nao precisa de linha nem de recuo */
.prose > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h2 + *,.prose h3 + *{margin-top:calc(2.5*var(--sp))}

.prose ul,.prose ol{padding-left:1.35em;display:flex;flex-direction:column;gap:calc(2.5*var(--sp))}
.prose ul li{list-style:disc} .prose ol li{list-style:decimal}
.prose li::marker{color:var(--muted-fg)}
.prose li > ul,.prose li > ol{margin-top:calc(2*var(--sp))}

.prose strong{font-weight:600}
.prose em{font-style:italic}
.prose a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}

.prose code{
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
  font-size:.88em;background:var(--muted);padding:2px 6px;border-radius:6px;
}
.prose pre{
  background:var(--muted);padding:calc(3.5*var(--sp));
  border-radius:calc(var(--radius) - 4px);overflow-x:auto;line-height:1.5;
}
.prose pre code{background:none;padding:0}

/* O esquema em bloco e arte de texto: ele nao reflui como paragrafo, entao
   ou cabe na largura ou a pessoa precisa arrastar de lado para ler. Numa
   tela de 390px cabiam 35 colunas, e quase todo esquema do material passava
   disso. Aqui a fonte e o respiro encolhem no celular, o que leva o limite
   para perto de 48 colunas. O resto e responsabilidade de quem escreve o
   esquema. */
@media (max-width:26rem){
  .prose pre{font-size:.75em;padding:calc(2.5*var(--sp))}
}

/* citacao comum: fala de outra pessoa dentro do texto */
.prose blockquote{
  border-left:3px solid var(--border);
  padding:calc(2*var(--sp)) 0 calc(2*var(--sp)) calc(3.5*var(--sp));
  color:var(--muted-fg);font-size:var(--t-base);font-style:italic;
}
.prose blockquote > * + *{margin-top:calc(2*var(--sp))}

/* ------------------------------------------------------------
   CAIXAS COM ROTULO
   A cor nunca e o unico sinal: o rotulo continua escrito no
   texto, entao quem nao distingue as cores le a mesma coisa.
   ------------------------------------------------------------ */
.prose blockquote.caixa{
  font-style:normal;
  border-left:3px solid var(--cor, var(--border));
  border-radius:0 calc(var(--radius) - 4px) calc(var(--radius) - 4px) 0;
  background:var(--fundo, var(--muted));
  color:var(--fg);
  padding:calc(3*var(--sp)) calc(3.5*var(--sp));
  font-size:var(--t-base);
  line-height:1.6;
}
.prose blockquote.caixa > p:first-child > strong:first-child{
  color:var(--cor);
  letter-spacing:.01em;
}
.prose blockquote.caixa a{color:var(--cor)}

/* referencia bibliografica: presente, mas sem competir com o texto */
.prose blockquote.referencia{
  --cor:var(--muted-fg); --fundo:var(--muted);
  color:var(--muted-fg);font-size:var(--t-sm);line-height:1.5;
}

/* o que mudou desde a publicacao da fonte */
.prose blockquote.atualizacao{--cor:var(--primary); --fundo:var(--surface)}

/* onde a confusao e provavel */
.prose blockquote.atencao{--cor:var(--warning); --fundo:var(--warning-surface)}

/* o exemplo do cotidiano profissional, que e o que faz grudar */
.prose blockquote.pratica{--cor:var(--ok); --fundo:var(--ok-surface)}

.prose hr{border:0;border-top:1px solid var(--border);margin:calc(6*var(--sp)) 0}

/* tabela rola sozinha no celular, sem empurrar a pagina */
.prose .rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose table{
  width:100%;border-collapse:collapse;font-size:var(--t-base);
  line-height:1.5;min-width:min(34rem,100%);
}
.prose th,.prose td{
  border:1px solid var(--border);
  padding:calc(2.5*var(--sp)) calc(3*var(--sp));
  text-align:left;vertical-align:top;
}
.prose th{background:var(--muted);font-weight:600;font-size:var(--t-sm)}
.prose tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--muted) 45%,transparent)}

.prose img{max-width:100%;border-radius:calc(var(--radius) - 4px)}

/* ============================================================
   QUIZ
   ============================================================ */
.barra{height:4px;background:var(--muted);border-radius:999px;overflow:hidden}
.barra span{display:block;height:100%;background:var(--primary);border-radius:999px;transition:width .25s ease}
.passo{display:flex;align-items:center;justify-content:space-between;font-size:var(--t-xs);color:var(--muted-fg);margin-bottom:calc(1.5*var(--sp))}

.enunciado{font-size:var(--t-xl);font-weight:600;letter-spacing:-.015em;line-height:1.3}

.alts{display:flex;flex-direction:column;gap:calc(2*var(--sp))}
.alt{
  display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;
  background:var(--card);border-radius:var(--radius);
  padding:calc(3*var(--sp)) calc(3.5*var(--sp));
  box-shadow:inset 0 0 0 1px var(--border);
  transition:box-shadow .15s ease,background .15s ease;
}
.alt input{position:absolute;opacity:0;pointer-events:none}
.alt .letra{
  width:calc(6*var(--sp));height:calc(6*var(--sp));flex-shrink:0;
  display:grid;place-items:center;border-radius:999px;
  background:var(--muted);color:var(--muted-fg);
  font-size:var(--t-sm);font-weight:600;
}
.alt .txt{flex:1;font-size:var(--t-base);line-height:1.4;padding-top:1px}
.alt:has(input:checked){box-shadow:inset 0 0 0 2px var(--primary);background:var(--surface)}
.alt:has(input:checked) .letra{background:var(--primary);color:var(--primary-fg)}
.alt.certa{box-shadow:inset 0 0 0 2px var(--ok);background:var(--ok-surface)}
.alt.certa .letra{background:var(--ok);color:#fff}
.alt.errada{box-shadow:inset 0 0 0 2px var(--critical);background:var(--critical-surface)}
.alt.errada .letra{background:var(--critical);color:#fff}
.alt .marca{width:1.15em;height:1.15em;flex-shrink:0;margin-top:2px;stroke-width:2.4}
.alt.certa .marca{color:var(--ok)} .alt.errada .marca{color:var(--critical)}

.veredito{display:flex;align-items:center;gap:10px;border-radius:var(--radius);padding:calc(3*var(--sp)) calc(3.5*var(--sp));font-weight:600;font-size:var(--t-base)}
.veredito.ok{background:var(--ok-surface);color:var(--ok)}
.veredito.nao{background:var(--critical-surface);color:var(--critical)}
.veredito.info{background:var(--surface);color:var(--primary)}
.veredito svg{width:1.3em;height:1.3em;stroke-width:2.2;flex-shrink:0}

.explica{background:var(--card);border-radius:var(--radius);padding:calc(3*var(--sp)) calc(3.5*var(--sp))}
.explica h3{font-size:var(--t-sm);font-weight:600;color:var(--muted-fg);text-transform:uppercase;letter-spacing:.04em;margin-bottom:calc(1.5*var(--sp))}

/* ============================================================
   FORMULARIOS
   ============================================================ */
label.campo{display:block;font-size:var(--t-sm);font-weight:500;color:var(--muted-fg);margin-bottom:calc(1.5*var(--sp))}
input[type=text],input[type=password],textarea,select{
  width:100%;font:inherit;color:var(--fg);
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:calc(2.5*var(--sp)) calc(3*var(--sp));
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--surface)}
textarea{resize:vertical;line-height:1.5}
textarea.mono{font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:var(--t-sm)}
.dica{font-size:var(--t-xs);color:var(--muted-fg);margin-top:calc(1.5*var(--sp));line-height:1.4}

.abas{display:flex;gap:2px;background:var(--muted);border-radius:999px;padding:3px}
.abas button{flex:1;height:calc(8*var(--sp));border-radius:999px;font-size:var(--t-sm);font-weight:600;color:var(--muted-fg)}
.abas button[aria-selected="true"]{background:var(--card);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* ============================================================
   AVISOS
   ============================================================ */
.avisos{display:flex;flex-direction:column;gap:calc(2*var(--sp))}
.aviso{display:flex;align-items:flex-start;gap:10px;border-radius:var(--radius);padding:calc(2.5*var(--sp)) calc(3.5*var(--sp));font-size:var(--t-sm);line-height:1.4}
.aviso.success{background:var(--ok-surface);color:var(--ok)}
.aviso.error{background:var(--critical-surface);color:var(--critical)}
.aviso.info{background:var(--surface);color:var(--primary)}
.aviso svg{width:1.15em;height:1.15em;flex-shrink:0;margin-top:2px;stroke-width:2.2}

/* ============================================================
   TAB BAR
   ============================================================ */
.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding-bottom:env(safe-area-inset-bottom);
  background:color-mix(in srgb,var(--card) 90%,transparent);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--border);
}
@media(min-width:520px){.tabs{position:absolute;max-width:26.875rem;margin:0 auto}}
.hd-secao{display:none}
.tabs-marca{display:none}
.tabs ul{display:flex;height:var(--tabbar)}
.tabs li{flex:1;min-width:0}
.tab{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted-fg);position:relative;padding:0 2px}
.tab svg{width:1.36em;height:1.36em;stroke-width:1.8;flex-shrink:0}
/* O rotulo corta em vez de invadir o vizinho: com a fonte do navegador
   aumentada, os quatro nomes se encostavam e viravam uma linha so. */
.tab span{font-size:var(--t-xs);font-weight:500;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab[aria-current="page"]{color:var(--primary)}
.tab[aria-current="page"] svg{stroke-width:2.4}
.tab[aria-current="page"] span{font-weight:600}
.tab .badge-dot{top:calc(1.5*var(--sp));right:22%}

/* ============================================================
   LOGIN
   ============================================================ */
main:has(.login){padding:0;gap:0}
.login{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;gap:calc(5*var(--sp));padding:calc(6*var(--sp))}
.login .marca{text-align:center}
.login .marca h1{font-size:var(--t-3xl);font-weight:600;letter-spacing:-.03em;color:var(--primary)}
.login .marca p{font-size:var(--t-sm);color:var(--muted-fg);margin-top:4px}
.login form{display:flex;flex-direction:column;gap:calc(3*var(--sp))}
.erro-login{font-size:var(--t-sm);color:var(--critical);text-align:center}

/* ============================================================
   NUMERO DA PARTE (lista de conteudo)
   ============================================================ */
.num{
  width:calc(6*var(--sp));height:calc(6*var(--sp));flex-shrink:0;
  display:grid;place-items:center;border-radius:999px;
  background:var(--muted);color:var(--muted-fg);
  font-size:var(--t-sm);font-weight:600;
}
.num.ok{background:var(--ok-surface);color:var(--ok)}

/* ============================================================
   MAPA DA PROVA
   ============================================================ */
.mapa{
  display:grid;grid-template-columns:repeat(5,1fr);gap:calc(2*var(--sp));
  background:var(--card);border-radius:var(--radius);padding:calc(3.5*var(--sp));
}
.quadro{
  aspect-ratio:1;display:grid;place-items:center;border-radius:calc(var(--radius) - 6px);
  background:var(--muted);color:var(--muted-fg);
  font-size:var(--t-base);font-weight:600;
  box-shadow:inset 0 0 0 1px transparent;
}
.quadro:active{opacity:.7}
.quadro.feita{background:var(--primary);color:var(--primary-fg)}
.quadro.disc{box-shadow:inset 0 0 0 2px var(--primary)}
.quadro.disc.feita{box-shadow:inset 0 0 0 2px var(--ok)}

.legenda{display:flex;flex-wrap:wrap;gap:calc(4*var(--sp));justify-content:center;
  font-size:var(--t-xs);color:var(--muted-fg)}
.legenda span{display:flex;align-items:center;gap:6px}
.legenda i{width:14px;height:14px;border-radius:4px;background:var(--muted);display:block}
.legenda i.feita{background:var(--primary)}
.legenda i.disc{box-shadow:inset 0 0 0 2px var(--primary)}

/* ============================================================
   BLOCO DE CODIGO NO PAINEL
   ============================================================ */
.codigo{
  margin-top:calc(1.5*var(--sp));background:var(--muted);
  padding:calc(3*var(--sp));border-radius:calc(var(--radius) - 4px);
  overflow-x:auto;font-size:var(--t-xs);line-height:1.5;
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
}

/* ============================================================
   FOLHA DE CONFIRMACAO
   <dialog> nativo, subindo do rodape. Sem JS a mais do que abrir
   e fechar, e o Esc ja funciona de graca.
   ============================================================ */
.folha{
  border:0;padding:0;background:none;color:var(--fg);
  width:100%;max-width:26.875rem;
  margin:auto auto 0;                 /* centraliza e cola embaixo */
  max-height:90dvh;
}
.folha::backdrop{background:rgba(8,12,16,.5);backdrop-filter:blur(3px)}
.folha-in{
  background:var(--card);
  border-radius:calc(var(--radius) + 6px) calc(var(--radius) + 6px) 0 0;
  padding:calc(3*var(--sp)) calc(4.5*var(--sp)) calc(env(safe-area-inset-bottom) + 4.5*var(--sp));
  display:flex;flex-direction:column;gap:calc(3*var(--sp));
}
.folha[open] .folha-in{animation:sobe .24s cubic-bezier(.2,.8,.2,1)}
.folha[open]::backdrop{animation:aparece .24s ease}
@keyframes sobe{from{transform:translateY(14%);opacity:.6}to{transform:none;opacity:1}}
@keyframes aparece{from{opacity:0}to{opacity:1}}

.puxador{
  width:2.25rem;height:4px;border-radius:999px;background:var(--border);
  margin:0 auto calc(2*var(--sp));
}
.folha h2{font-size:var(--t-xl);font-weight:600;letter-spacing:-.02em}
.folha p{font-size:var(--t-sm);color:var(--muted-fg);line-height:1.45;margin-top:calc(-1.5*var(--sp))}
.folha .destaque{
  display:flex;align-items:center;gap:10px;
  background:var(--warning-surface);color:var(--warning);
  border-radius:var(--radius);padding:calc(2.5*var(--sp)) calc(3*var(--sp));
  font-size:var(--t-sm);font-weight:500;line-height:1.35;
}
.folha .destaque svg{width:1.2em;height:1.2em;stroke-width:2.2;flex-shrink:0}

/* ============================================================
   NOTA DA MATERIA, na lista do inicio
   ============================================================ */
.nota-materia{
  font-size:var(--t-lg);font-weight:600;letter-spacing:-.02em;
  padding:1px 9px;border-radius:999px;flex-shrink:0;
  background:var(--ok-surface);color:var(--ok);
}
.nota-materia.baixa{background:var(--critical-surface);color:var(--critical)}

/* a barra de progresso tambem serve dentro de uma linha de lista */
.row-body > .barra{display:block}

/* ============================================================
   MARCA
   ============================================================ */
/* A marca encolhe antes dos icones. Sem isto, no tamanho GG com a fonte do
   navegador aumentada, o nome da turma empurrava o icone da conta para fora
   da tela e a barra crescia para tres linhas. */
.brand{display:inline-flex;align-items:center;gap:calc(2*var(--sp));min-width:0;white-space:nowrap}
.brand img{display:block;width:calc(6.5*var(--sp));height:auto;flex-shrink:0}

.login .marca .mascote{
  display:block;margin:0 auto calc(3*var(--sp));
  width:min(9.5rem,45vw);height:auto;
}
.login .marca h1{font-size:var(--t-3xl);letter-spacing:-.03em}

/* ============================================================
   PRIMEIRO ACESSO
   ============================================================ */
.portao{
  display:flex;flex-direction:column;gap:calc(4*var(--sp));
  min-height:100dvh;justify-content:center;
  padding:calc(6*var(--sp)) 0;
}
main:has(.portao){padding-top:calc(4*var(--sp));padding-bottom:calc(4*var(--sp))}

.portao-topo{display:flex;flex-direction:column;align-items:center;gap:calc(3*var(--sp))}
.portao-topo img{display:block}

.portao-passos{display:flex;gap:6px}
.portao-passos span{
  width:calc(5*var(--sp));height:4px;border-radius:999px;
  background:var(--border);transition:background .2s ease;
}
.portao-passos span.feito{background:var(--primary)}

.portao h1{
  font-size:var(--t-2xl);font-weight:600;letter-spacing:-.025em;
  line-height:1.2;text-wrap:balance;text-align:center;
}
.portao .conduz{
  font-size:var(--t-base);color:var(--muted-fg);line-height:1.5;
  text-align:center;margin-top:calc(-2*var(--sp));
}

.codigo-entrada{
  text-align:center;letter-spacing:.22em;font-size:var(--t-xl);
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace;text-transform:uppercase;
}
.erro-campo{font-size:var(--t-sm);color:var(--critical);margin-top:calc(1.5*var(--sp))}

/* a amostra que muda enquanto a pessoa escolhe tema e tamanho */
.amostra h2{
  font-size:var(--t-xs);font-weight:600;color:var(--muted-fg);
  text-transform:uppercase;letter-spacing:.06em;
}
.prosa-amostra{
  font-size:var(--t-lg);line-height:1.72;color:var(--fg);
  margin-top:calc(2*var(--sp));text-wrap:pretty;
}
.amostra .caixa{margin-top:calc(3*var(--sp))}

.turma{
  font-size:var(--t-xs);font-weight:500;color:var(--muted-fg);
  padding-left:calc(2*var(--sp));margin-left:calc(1*var(--sp));
  border-left:1px solid var(--border);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (max-width:22rem){ .turma{display:none} }

.codigo-lista{
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
  letter-spacing:.08em;font-weight:600;
}

/* ============================================================
   CHECAGEM DO NOME DE USUARIO
   ============================================================ */
.entrada-usuario{text-transform:lowercase}
.entrada-usuario::placeholder{text-transform:none}

.aviso-campo{
  font-size:var(--t-sm);margin-top:calc(1.5*var(--sp));
  min-height:1.3em;line-height:1.3;
}
.aviso-campo .bom{color:var(--ok);font-weight:500}
.aviso-campo .ruim{color:var(--critical)}
.aviso-campo .checando{color:var(--muted-fg)}
.aviso-campo .bom::before{content:"✓ "}
.aviso-campo .ruim::before{content:"✕ "}

/* ============================================================
   OLHO PARA VER A SENHA
   ============================================================ */
.com-olho{position:relative;display:block}
.com-olho input{padding-right:calc(11*var(--sp))}

.olho{
  position:absolute;top:50%;right:calc(1.5*var(--sp));transform:translateY(-50%);
  width:calc(9*var(--sp));height:calc(9*var(--sp));
  display:grid;place-items:center;border-radius:999px;
  color:var(--muted-fg);
}
.olho svg{width:1.28em;height:1.28em}
.olho:active{background:var(--muted)}
.olho[aria-pressed="true"]{color:var(--primary)}

/* ============================================================
   ESCOLHAS DO PRIMEIRO ACESSO
   As abas em pilula tem altura fixa e nao cabem rotulo por
   extenso como "Muito grande". Aqui a altura acompanha o texto.
   ============================================================ */
.escolhas{display:grid;gap:calc(2*var(--sp))}
.escolhas.duas{grid-template-columns:repeat(2,1fr)}
.escolhas.tres{grid-template-columns:repeat(3,1fr)}

.escolhas button{
  min-height:calc(12*var(--sp));
  padding:calc(2.5*var(--sp)) calc(2*var(--sp));
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:inset 0 0 0 1px var(--border);
  color:var(--fg);
  font-size:var(--t-base);font-weight:500;line-height:1.25;
  text-align:center;text-wrap:balance;
  transition:box-shadow .15s ease,background .15s ease;
}
.escolhas button:active{background:var(--muted)}
.escolhas button[aria-selected="true"]{
  box-shadow:inset 0 0 0 2px var(--primary);
  background:var(--surface);color:var(--primary);font-weight:600;
}

/* cada opcao escrita no tamanho que ela representa, para a diferenca
   aparecer antes de clicar */
.escolha-compact{font-size:calc(var(--t-sm) * .95)}
.escolha-cozy{font-size:var(--t-base)}
.escolha-comfortable{font-size:var(--t-lg)}
.escolha-large{font-size:var(--t-xl)}

/* ============================================================
   TELA GRANDE

   No celular o app e uma coluna com barra de abas embaixo. No
   computador essa mesma coluna virava um celular emoldurado no meio
   da tela, ocupando 30% da largura de um notebook.

   Aqui a barra de baixo vira coluna lateral fixa e o conteudo ganha
   a largura que sobrava. O html nao muda: o `.app` vira uma grade de
   duas colunas e cada peca vai para a sua area.

   O texto de estudo e a excecao que nao cresce. Linha longa demais
   cansa a leitura, entao ele para em torno de 70 caracteres e a
   largura extra vira margem, nao linha maior.

   Vale de 64rem para cima, o que pega notebook e tablet deitado, e
   so quando ha barra de abas: o login nao tem, e continua como esta.
   ============================================================ */
@media (min-width:64rem){
  body{padding:calc(6*var(--sp)) calc(4*var(--sp))}

  .app:has(.tabs){
    display:grid;
    grid-template-columns:15rem minmax(0,1fr);
    grid-template-areas:"nav topo" "nav conteudo";
    grid-template-rows:auto 1fr;
    max-width:78rem;
    min-height:calc(100dvh - 12*var(--sp));
    /* o recorte da moldura de celular quebraria o sticky da coluna */
    overflow:visible;
  }

  /* ---------------------------------------------- coluna lateral */
  .app:has(.tabs) .tabs{
    grid-area:nav;
    position:sticky;top:0;left:auto;right:auto;bottom:auto;
    align-self:start;
    max-width:none;margin:0;
    height:calc(100dvh - 12*var(--sp));
    min-height:100%;
    padding:calc(4*var(--sp)) calc(3*var(--sp));
    border-top:0;border-right:1px solid var(--border);
    border-radius:28px 0 0 28px;
    display:flex;flex-direction:column;gap:calc(2*var(--sp));
  }
  .app:has(.tabs) .tabs ul{display:flex;flex-direction:column;height:auto;gap:calc(1*var(--sp))}
  .app:has(.tabs) .tabs li{flex:0 0 auto}

  /* o item deitado: icone e rotulo lado a lado, alinhados a esquerda */
  .app:has(.tabs) .tab{
    height:auto;flex-direction:row;justify-content:flex-start;
    gap:calc(3*var(--sp));
    padding:calc(2.5*var(--sp)) calc(3*var(--sp));
    border-radius:calc(var(--radius) - 2px);
    font-size:var(--t-base);
  }
  .app:has(.tabs) .tab span{font-size:var(--t-base)}
  .app:has(.tabs) .tab:hover{background:var(--muted)}
  .app:has(.tabs) .tab[aria-current="page"]{background:var(--surface)}
  .app:has(.tabs) .tab .badge-dot{position:static;margin-left:auto;box-shadow:none}

  /* a marca so aparece aqui: no celular quem a mostra e o cabecalho */
  .tabs-marca{
    display:flex;align-items:center;gap:calc(2*var(--sp));
    padding:0 calc(3*var(--sp)) calc(3*var(--sp));
    font-size:var(--t-lg);font-weight:600;letter-spacing:-.02em;color:var(--primary);
  }
  .tabs-marca .turma{
    display:block;font-size:var(--t-xs);font-weight:400;
    color:var(--muted-fg);letter-spacing:0;
  }

  /* ------------------------------------------------- cabecalho */
  .app:has(.tabs) .hd{
    grid-area:topo;
    border-radius:0 28px 0 0;
  }
  /* na home a marca ficaria repetida, na lateral e no cabecalho, entao
     no lugar dela o cabecalho diz em que secao a pessoa esta */
  .app:has(.tabs) .hd-in > .brand{display:none}
  .app:has(.tabs) .hd-secao{
    display:block;
    font-size:var(--t-lg);font-weight:600;letter-spacing:-.015em;
  }
  .app:has(.tabs) .hd-in{padding:0 calc(6*var(--sp))}

  /* --------------------------------------------------- conteudo */
  .app:has(.tabs) main{
    grid-area:conteudo;
    padding:calc(5*var(--sp)) calc(6*var(--sp)) calc(8*var(--sp));
  }

  /* o material de leitura para antes da borda */
  .prose{max-width:42rem}

  /* leitura e formulario nao aproveitam largura: a linha comprida cansa
     e um campo de nome com mil pixels fica ridiculo. Quem pede isso se
     declara no template, pelo bloco largura */
  .app:has(.tabs) main.estreita{max-width:52rem}

  /* a cena da saudacao foi desenhada larga e baixa: esticada em mil
     pixels ela vira uma faixa e come a tela inteira */
  .saudacao img{max-width:34rem}

  /* alvo de mouse: o toque nao tem hover, o cursor tem */
  .row:hover{background:var(--muted)}
  .icon-btn:hover{background:var(--muted)}
}

/* De 64rem a 80rem a coluna lateral encolhe, para o conteudo nao
   ficar espremido em tela de notebook pequeno. */
@media (min-width:64rem) and (max-width:80rem){
  .app:has(.tabs){grid-template-columns:13rem minmax(0,1fr)}
  .app:has(.tabs) main{padding:calc(4*var(--sp)) calc(4*var(--sp)) calc(7*var(--sp))}
  .app:has(.tabs) .hd-in{padding:0 calc(4*var(--sp))}
}