/* ============================================================
   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));
}

/* 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:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  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{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}
.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)}

/* 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)}

/* 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-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}

/* 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}}
.tabs ul{display:flex;height:var(--tabbar)}
.tabs li{flex:1}
.tab{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted-fg);position:relative}
.tab svg{width:1.36em;height:1.36em;stroke-width:1.8}
.tab span{font-size:var(--t-xs);font-weight:500}
.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
   ============================================================ */
.brand{display:inline-flex;align-items:center;gap:calc(2*var(--sp))}
.brand img{display:block;width:calc(6.5*var(--sp));height:auto}

.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);
}
@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)}