/* The product now uses surfaces and elevation instead of visible borders. */
*, *::before, *::after { border-width:0 !important; }

/* ---------- Transição entre ecrãs ----------
   Só serve para matar o "flash branco": com @view-transition o Chrome mantém
   a foto do ecrã anterior no lugar enquanto o novo documento carrega, e só
   depois troca — sem animação nenhuma (o ecrã novo entra opaco, de uma vez).
   Onde a API não existe, a navegação é normal. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation: none; }
.titlebar__search:hover, .titlebar__avatar:hover,
.field__input:focus, .field.is-invalid .field__input,
.wizard__choice.is-selected,
.cal-cell.is-today { box-shadow:none !important; }
:focus-visible { outline:2px solid var(--esmeralda) !important; outline-offset:2px; }
body { min-height:100dvh; overscroll-behavior:none; font-size:var(--txt-corpo); line-height:1.6; }
h1 { font-size:var(--txt-titulo); line-height:1.25; }
h2 { font-size:var(--txt-seccao); line-height:1.3; }
.display { font-size:var(--txt-display); line-height:1.1; }
.overline { text-decoration:none; }
.card-lg.bg-floresta { background:var(--floresta); }
#n-perguntas { font-size:var(--txt-display) !important; line-height:1.1 !important; }
.btn, .pill, .chip, .seg, .toast { border-radius:var(--raio-pilula); }
[class*="rounded-full"] { border-radius:var(--raio-pilula) !important; }
[class*="rounded-["], [class*="rounded-xl"], [class*="rounded-2xl"],
[class*="rounded-md"] { border-radius:var(--raio-input) !important; }
.card, .auth-window, .wizard { border-radius:var(--raio-cartao-2); }
.card-lg, .dropzone { border-radius:var(--raio-cartao); }
.card-outline, .field__input, .wizard__choice, .btn-xl { border-radius:var(--raio-input); }
.cal-cell, .cal-toolbar__nav button, .cal-event { border-radius:var(--raio-input) !important; }
.cal-cell.is-selected, .cal-cell.is-range { --texto:var(--tinta); --texto-secundario:var(--muted); }
.card, .card-lg, .card-outline, .seg { box-shadow:var(--elev-1); }
.input-card, .palette__input-row {
  background:var(--superficie-elevada); border-radius:var(--raio-input);
  padding:12px 16px; min-height:60px; box-shadow:var(--elev-1);
}

/* O login usa duas colunas no desktop e só empilha quando o espaço deixa de
   permitir dois painéis confortáveis. */
@media (max-width:840px) {
  .login-page { overflow:auto; }
  .login-page .auth-scene {
    position:relative; height:auto; min-height:100dvh;
    padding:16px; overflow:visible;
  }
  .login-page .auth-window {
    width:100%; height:auto; min-height:0;
    grid-template-columns:1fr; border-radius:var(--raio-cartao-2);
  }
  .auth-window__intro { padding:20px 24px 24px; }
  .login-page .auth-window .mascote { min-height:148px; max-height:160px; padding:0; }
  .login-page .auth-window .auth-window__heading { max-width:none; font-size:30px; }
  .login-page .auth-window .auth-window__sub { margin-top:8px; }
  .auth-window__note { display:none; }
  .login-page .auth-window .auth-window__body { padding:24px; }
  .login-page .auth-window .auth-window__foot { min-height:60px; padding:16px 24px; }
}

@media (min-width:841px) and (max-height:680px) {
  .login-page .auth-scene { padding:12px; }
  .login-page .auth-window { height:calc(100dvh - 24px); min-height:0; }
  .auth-window__intro { padding:24px 32px; }
  .login-page .auth-window .mascote { min-height:170px; }
  .auth-window__note { display:none; }
  .login-page .auth-window .auth-window__body { padding:28px 40px 20px; }
  .login-page .auth-window .field { margin-top:14px; }
  .login-page .auth-window .field__hint { display:none; }
  .auth-options { margin-top:14px; }
  .login-page .auth-window .auth-submit { margin-top:16px; }
  .auth-divider { margin:12px 0; }
  .login-page .auth-window .auth-window__foot { min-height:56px; padding:12px 40px; }
}
.input-card input, .palette__input-row input { width:100%; min-width:0; background:transparent; color:var(--texto); }
.input-card input:focus, .input-card input:focus-visible,
.input-card textarea:focus, .input-card textarea:focus-visible,
.palette__input-row input:focus, .palette__input-row input:focus-visible,
.ei-escolha__busca input:focus, .ei-escolha__busca input:focus-visible {
  outline:none !important; box-shadow:none !important;
}
.input-card:focus-within, .palette__input-row:focus-within {
  background:color-mix(in srgb,var(--superficie-elevada) 92%,var(--salvia));
  box-shadow:var(--elev-2);
}
.input-card .btn { min-width:44px; min-height:44px; flex-shrink:0; }
.titlebar .titlebar__search {
  background:var(--superficie-elevada) !important; border-radius:var(--raio-input);
  min-height:44px; padding:8px 16px; box-shadow:var(--elev-1);
}
.titlebar .titlebar__search:focus-visible {
  outline:none !important;
  background:color-mix(in srgb,var(--superficie-elevada) 92%,var(--salvia)) !important;
  box-shadow:var(--elev-2) !important;
}
.palette, .auth-window, .wizard, .toast { box-shadow:var(--elev-2); }
.h-screen { height:100dvh; }
.min-h-screen { min-height:100dvh; }
.mascote { display:flex; justify-content:center; padding:16px 24px; overflow:visible; }
.auth-scene {
  background-color:var(--fundo); background-image:var(--pontos-fundo);
  background-size:var(--pontos-espaco); background-position:center;
  background-attachment:fixed;
  min-height:100dvh; width:100%; position:relative;
}
body[data-nav="onboarding"] .auth-scene { background-image:none; }
.auth-window, .wizard { border:1px solid var(--contorno); box-shadow:var(--elev-2); overflow:visible; }
.auth-window__foot, .wizard__foot { border-radius:0 0 var(--raio-cartao-2) var(--raio-cartao-2); }
.auth-window__heading, .wizard__heading { font-size:var(--txt-titulo); line-height:1.25; }
.auth-window a, .wizard a { color:var(--acento) !important; }
.titlebar {
  justify-content:flex-end; height:60px;
  background-color:color-mix(in srgb,var(--fundo) 64%,transparent) !important;
  background-image:var(--pontos-fundo) !important;
  background-size:var(--pontos-espaco) !important;
  background-position:center !important;
  background-attachment:fixed !important;
  -webkit-backdrop-filter:blur(16px) saturate(115%);
  backdrop-filter:blur(16px) saturate(115%);
}
.titlebar::after {
  content:""; position:absolute; inset:100% 0 auto; height:10px;
  pointer-events:none;
  background:color-mix(in srgb,var(--fundo) 64%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(115%);
  backdrop-filter:blur(16px) saturate(115%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.72) 20%,rgba(0,0,0,.36) 45%,rgba(0,0,0,.1) 72%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.72) 20%,rgba(0,0,0,.36) 45%,rgba(0,0,0,.1) 72%,transparent 100%);
}
.pagina:has(.mano-float) { position:relative; }
.mano-float {
  position:absolute; z-index:2; top:16px; left:var(--esp-lg);
  display:flex; align-items:center; gap:8px; pointer-events:none;
  font-family:'Newsreader',system-ui,sans-serif; letter-spacing:-.4px;
}
@media (min-width:1280px) { .mano-float { left:var(--esp-xl); } }
@media (max-width:899px) { .mano-float { left:16px; } }
.pagina > .titlebar {
  --header-inset:var(--esp-lg);
  margin-inline:calc(-1 * var(--header-inset)); padding-inline:var(--header-inset);
}
@media (min-width:1024px) {
  .pagina > .titlebar { --header-inset:var(--esp-xl); }
  /* Estudo no ecrã grande, como a página de ajuda do Kiwi (Jeremy,
     2026-10-21): uma faixa forte no topo, no amarelo da opção A, que se
     desfaz em branco até 380 px (devagar no início, depressa no fim) e sobe
     com o conteúdo. Os pontos: invisíveis em cima, aparecem aos poucos a
     descer. */
  body[data-nav="estudo"] {
    --faixa-estudo:380px;
    background-color:#fff; background-image:none;
    timeline-scope:--estudo-rolar;
  }
  body[data-nav="estudo"]::before {
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background-image:var(--pontos-fundo); background-size:var(--pontos-espaco); background-position:center;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, transparent 15%, rgba(0,0,0,.45) 50%, #000 85%);
    mask-image:linear-gradient(180deg, transparent 0%, transparent 15%, rgba(0,0,0,.45) 50%, #000 85%);
  }
  body[data-nav="estudo"]::after {
    content:""; position:fixed; inset:0 0 auto; height:var(--faixa-estudo); z-index:-1; pointer-events:none;
    background:linear-gradient(180deg,
      rgba(244,217,122,1) 0%, rgba(244,217,122,.94) 25%, rgba(244,217,122,.8) 45%,
      rgba(244,217,122,.55) 65%, rgba(244,217,122,.25) 82%, rgba(244,217,122,0) 100%);
    animation:estudo-faixa-sobe linear both;
    animation-timeline:scroll(root block);
    animation-range:0 var(--faixa-estudo);
  }
  @keyframes estudo-faixa-sobe { to { transform:translateY(calc(-1 * var(--faixa-estudo))); } }
  body[data-nav="estudo"] .titlebar {
    background-color:rgba(244,217,122,.64) !important;
    background-image:none !important;
  }
  body[data-nav="estudo"] .titlebar::after { background:rgba(244,217,122,.64); }
  /* O topo do cartão do cronograma no tom da faixa, para não cortar o
     degradê com um branco (Jeremy, 2026-10-21). O resto do cartão não muda. */
  body[data-nav="estudo"] .crono-estudo {
    background:
      linear-gradient(180deg, rgba(244,217,122,.55) 0%, rgba(244,217,122,.22) 30%, rgba(244,217,122,0) 60%),
      radial-gradient(80% 110% at 100% 100%, rgba(249,208,53,.38), transparent 70%),
      linear-gradient(150deg, #FFFAE8 0%, #FFF1C4 60%, #FDE7A0 100%);
  }
}
/* Let scrolling content pass behind the translucent header, keeping its initial position. */
@media (min-width:1440px) {
  /* A área da página não é uma moldura: chega ao limite da janela e não corta sombras. */
  .pagina { padding-bottom:0 !important; }
  .pagina > .shell { margin-top:-84px; }
  .pagina:has(> .shell) > .shell { overflow:visible; }
  .pagina > .shell > .shell__scroll { padding-top:84px; scroll-padding-top:84px; padding-bottom:48px; }
  .pagina:has(> .shell) > .shell > .shell__fixed {
    margin-top:84px; height:calc(100% - 84px - var(--esp-lg)); margin-bottom:var(--esp-lg);
  }
  body[data-nav="estudo"] .pagina > .shell {
    overflow:visible;
    margin-left:calc(-1 * var(--esp-xl));
  }
  body[data-nav="estudo"] .shell__scroll {
    padding-left:calc(var(--esp-xl) + var(--esp-sm));
    padding-bottom:var(--esp-xl);
  }
  body[data-nav="estudo"] .shell__scroll { scroll-timeline:--estudo-rolar block; }
  body[data-nav="estudo"]::after { animation-timeline:--estudo-rolar; }
  body[data-nav="estudo"] .pagina > .shell > .shell__fixed {
    height:calc(100% - 84px - var(--esp-lg));
    margin-bottom:var(--esp-lg);
  }
}
.titlebar__search { width:auto; min-width:128px; border:1px solid var(--contorno); border-radius:var(--raio-pilula); }
#sidebar { padding-top:24px; }
.sb-item.is-active::before { content:none; }
.folder { height:auto; min-width:0; }
.folder h2 { overflow-wrap:anywhere; }
body[data-nav="biblioteca"] h1 { font-family:'Plus Jakarta Sans',sans-serif; }
.biblioteca-estante { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 24px; }
/* A pasta (2026-10-01): costas com aba, uma folha a espreitar e a frente de
   vidro. Altura FIXA e nome em duas linhas no máximo: a grelha fica sempre
   alinhada, por mais comprido que seja o nome. */
.folder { position:relative; height:218px; color:var(--folder-texto, #fff); isolation:isolate; border-radius:24px; }
.folder:focus-visible { outline:3px solid var(--esmeralda); outline-offset:4px; }
.folder__costas {
  position:absolute; inset:18px 0 0; border-radius:8px 24px 24px 24px; z-index:0;
  background:linear-gradient(180deg, var(--folder-dark), color-mix(in srgb, var(--folder-dark) 80%, #000));
  box-shadow:0 18px 34px -20px color-mix(in srgb, var(--folder-dark) 80%, transparent);
}
/* A aba: um retângulo de cantos redondos e um ombro inclinado até às costas. */
.folder__costas::before {
  content:''; position:absolute; left:0; top:-18px; width:44%; height:30px; border-radius:16px 14px 0 0;
  background:var(--folder-dark);
}
.folder__costas::after {
  content:''; position:absolute; left:calc(44% - 18px); top:-18px; width:44px; height:30px; border-radius:0 14px 0 0;
  background:var(--folder-dark); transform:skewX(34deg); transform-origin:0 100%;
}
.folder__papel {
  position:absolute; z-index:1; left:7%; right:7%; top:34px; height:96px; border-radius:12px;
  background:linear-gradient(180deg,#fff,#f4f6f9); box-shadow:0 2px 8px rgba(0,0,0,.12);
  transition:transform .35s cubic-bezier(.2,.9,.24,1.08);
}
.folder__papel::before {
  content:''; position:absolute; left:6%; right:6%; top:-8px; height:30px; border-radius:10px;
  background:color-mix(in srgb, var(--folder-color) 18%, #fff); z-index:-1;
}
.folder__frente {
  position:absolute; z-index:2; inset:62px 0 0; border-radius:22px; padding:16px 18px 15px;
  display:flex; flex-direction:column; gap:3px; overflow:hidden;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--folder-light) 88%, transparent),
    color-mix(in srgb, var(--folder-color) 94%, transparent) 70%);
  -webkit-backdrop-filter:blur(10px) saturate(1.15); backdrop-filter:blur(10px) saturate(1.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.18),
    0 10px 24px -14px color-mix(in srgb, var(--folder-dark) 90%, transparent);
  transition:transform .35s cubic-bezier(.2,.9,.24,1.08);
}
/* Pasta vazia: sem folhas lá dentro (2026-10-01, o Jeremy). */
.folder--vazia .folder__papel { display:none; }
.folder:hover .folder__frente, .folder:focus-visible .folder__frente { transform:translateY(5px); }
.folder:hover .folder__papel, .folder:focus-visible .folder__papel { transform:translateY(-7px); }
.folder__topo { display:flex; align-items:flex-start; gap:10px; min-width:0; }
.folder__name {
  flex:1; min-width:0; font:700 17px/1.25 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing:-.01em;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; overflow-wrap:anywhere;
}
.folder__percent {
  flex:none; margin-top:1px; padding:2px 8px; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--folder-texto, #fff) 55%, transparent);
}
.folder__count { font-size:13px; font-weight:500; opacity:.86; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (prefers-reduced-motion:reduce) { .folder__frente, .folder__papel { transition:none; } }

/* ---------- Disciplina: vistas de conteúdo ---------- */
.disciplina-filtros { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
#btn-ver-flashcards.hidden { display:none !important; }
.chip--filtro { display:inline-flex; align-items:center; gap:6px; margin-left:auto; }
/* O separador Edital só existe com notas ligadas ao edital; o Ordenar some no Edital. */
.disciplina-filtros [hidden] { display:none; }
.disciplina-item, .anotacao-item, .flashcard-item {
  position:relative; display:flex; align-items:center; gap:12px;
  min-height:80px; border-radius:var(--raio-cartao-2); color:var(--texto);
  background:linear-gradient(112deg,color-mix(in srgb,var(--menta) 90%,var(--superficie)),color-mix(in srgb,var(--salvia) 34%,var(--superficie)));
  box-shadow:var(--elev-1); overflow:hidden;
}
.disciplina-item::before, .flashcard-item::before {
  content:""; position:absolute; inset:0 auto 0 0; width:var(--dominio,0%);
  background:color-mix(in srgb,var(--esmeralda) 24%,transparent); pointer-events:none;
}
.disciplina-item__link { position:relative; z-index:1; display:flex; align-items:center; gap:12px; flex:1; min-width:0; padding:16px; color:inherit; }
.disciplina-item__main, .anotacao-item__main { display:grid; gap:3px; min-width:0; flex:1; }
.disciplina-item__main strong, .anotacao-item__main strong { font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.disciplina-item small, .anotacao-item small, .flashcard-item__meta { color:var(--texto-secundario); font-size:11px; }
.disciplina-item__tipo, .anotacao-item__icone { color:var(--acento); display:grid; place-items:center; }
.disciplina-item__prioridade { color:var(--floresta); flex:none; }
.disciplina-item__acoes { position:relative; z-index:2; width:40px; height:40px; margin-right:8px; display:grid; place-items:center; background:transparent; color:var(--texto-secundario); cursor:pointer; }
.disciplina-item--documento::before { display:none; }
.anotacao-item { padding:16px; background:var(--superficie); }
.anotacao-item[data-abrir-anotacao] { cursor:pointer; }
.anotacao-item[data-abrir-anotacao]:hover { box-shadow:var(--elev-2); }
.anotacao-item[data-abrir-anotacao]:focus-visible { outline:2px solid var(--esmeralda); outline-offset:2px; }
.anotacao-item__aviso { color:var(--aviso); font-weight:600; }
.anotacao-item--pendente { background:color-mix(in srgb,var(--superficie) 86%,var(--menta)); }
.flashcard-item { align-items:stretch; min-height:0; background:var(--superficie); }
/* Bloqueado: conteúdo esbatido e cinzento; o botão "Desbloquear" fica nítido. */
.flashcard-item--bloqueado { box-shadow:none; background:color-mix(in srgb,var(--superficie) 88%,var(--salvia)); }
.flashcard-item--bloqueado::before { opacity:.3; filter:grayscale(1); }
.flashcard-item--bloqueado .flashcard-item__corpo { opacity:.5; filter:grayscale(1); }
.flashcard-item__corpo { position:relative; flex:1; display:grid; gap:7px; padding:16px; text-align:left; background:transparent; color:var(--texto); cursor:pointer; }
.flashcard-item__corpo strong { font-size:15px; line-height:1.45; }
.flashcard-item__resposta { padding-top:10px; font-size:13px; line-height:1.55; color:var(--texto-secundario); }
.flashcard-item__estado { align-self:center; margin-right:14px; min-width:78px; min-height:32px; padding:6px 10px; border-radius:var(--raio-pilula); background:var(--realce); color:var(--texto-secundario); font:600 11px inherit; cursor:pointer; }
.flashcard-item__estado.is-active { background:var(--floresta); color:var(--menta); }
.flashcards-teto { display:flex; align-items:center; gap:12px; padding:12px 16px; margin-bottom:12px; border-radius:var(--raio-input); background:var(--menta); color:var(--floresta); }
.flashcards-teto strong { font:700 18px 'Newsreader',serif; }
.flashcards-teto span { font-size:11px; }
.disciplina-vazia { min-height:240px; padding:32px 0; display:grid; place-items:center; align-content:center; gap:6px; color:var(--texto-secundario); text-align:center; }
.disciplina-vazia p { max-width:320px; font-size:13px; }
.disciplina-dialog { max-width:min(360px,calc(100vw - 32px)); }
.disciplina-dialog__card { padding:14px; border-radius:24px; background:var(--superficie); color:var(--texto); box-shadow:var(--elev-2); animation:dialog-surge .22s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dialog-surge { from { opacity:0; transform:translateY(10px) scale(.97); } to { opacity:1; transform:none; } }
.disciplina-dialog__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 4px 12px 10px; }
.disciplina-dialog__head h2 { margin:0; font-size:16px; font-weight:700; letter-spacing:-.01em; }
.disciplina-dialog__x { width:32px; height:32px; display:grid; place-items:center; border:0; background:transparent; color:var(--texto-secundario); border-radius:50%; cursor:pointer; transition:background .15s ease, color .15s ease; }
.disciplina-dialog__x:hover { background:var(--menta); color:var(--floresta); }
.disciplina-dialog__x .material-symbols-outlined { font-size:20px; }
.disciplina-dialog__opcoes { display:grid; gap:2px; max-height:60dvh; overflow:auto; }
.disciplina-dialog__opcao { position:relative; display:flex; align-items:center; gap:12px; width:100%; min-height:50px; padding:8px 12px; border:0; border-radius:14px; background:transparent; color:var(--texto); text-align:left; cursor:pointer; font:600 15px inherit; transition:background .15s ease, transform .08s ease; }
.disciplina-dialog__opcao.is-plain { min-height:44px; }
.disciplina-dialog__opcao:hover { background:var(--menta); }
.disciplina-dialog__opcao:active { transform:scale(.99); }
.disciplina-dialog__opcao.is-active { background:color-mix(in srgb, var(--menta) 55%, transparent); }
.disciplina-dialog__ic { flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:var(--menta); color:var(--floresta); }
.disciplina-dialog__ic .material-symbols-outlined { font-size:20px; }
.disciplina-dialog__swatch { flex:0 0 34px; width:34px; height:34px; border-radius:11px; box-shadow:inset 0 0 0 1.5px rgba(28,43,34,.14); }
.disciplina-dialog__rotulo { flex:1; min-width:0; }
.disciplina-dialog__check { margin-left:auto; color:var(--esmeralda); }
.disciplina-dialog__opcao.is-danger { color:var(--perigo); margin-top:8px; padding-top:15px; }
.disciplina-dialog__opcao.is-danger::before { content:''; position:absolute; top:0; left:10px; right:10px; height:1px; background:var(--contorno); opacity:.5; }
.disciplina-dialog__opcao.is-danger .disciplina-dialog__ic { background:color-mix(in srgb, var(--perigo) 12%, transparent); color:var(--perigo); }
.disciplina-dialog__opcao.is-danger:hover { background:color-mix(in srgb, var(--perigo) 8%, transparent); }
.toast { display:flex; align-items:center; gap:12px; }
.toast__undo { color:var(--menta); background:transparent; font:700 12px inherit; text-decoration:underline; cursor:pointer; }
.material-leitura { width:100%; max-width:960px; margin-inline:auto; }
@media (min-width:900px) {
  .material-page > .titlebar { margin-bottom:12px; }
}
@media (min-width:1440px) {
  .material-page > .shell { margin-top:-72px; }
  .material-page > .shell > .shell__scroll { padding-top:72px; scroll-padding-top:72px; }
}
.folder__test { align-self:flex-start; margin-top:4px; border-radius:999px; padding:3px 10px; font-size:11.5px; font-weight:700;
  background:color-mix(in srgb, var(--folder-texto, #fff) 22%, transparent); white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.folder__fim { margin-top:auto; display:grid; gap:7px; }
.folder__progress { height:4px; border-radius:999px; background:color-mix(in srgb, var(--folder-texto, #fff) 26%, transparent); overflow:hidden; }
.folder__progress i { display:block; height:100%; background:var(--folder-texto, #fff); border-radius:inherit; }
.folder__quando { font-size:11.5px; font-weight:500; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (min-width:900px) and (max-width:1099px) { .biblioteca-estante { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.bar { max-width:480px; }
.anel__badge { top:0; right:0; }
.reading { font-size:var(--txt-corpo); line-height:1.6; }
.reading li { display:list-item; margin-left:16px; }
.reading li::before { content:none; }
.reading ul { list-style:disc; }
.wizard__progress-dot.is-current::after { content:none; }
.wizard__choice-text { display:grid; min-width:0; }
.wizard__choice-title, .wizard__choice-sub { display:block; }
.tabbar, .mobile-header { display:none; }
.folha { inset:auto 0 0; width:100%; max-width:640px; max-height:90dvh; margin:0 auto; overflow:auto; }
.folha__painel { padding:8px 16px calc(16px + env(safe-area-inset-bottom,0px)); background:var(--superficie); color:var(--texto); border-radius:var(--raio-cartao) var(--raio-cartao) 0 0; box-shadow:var(--elev-2); }
.folha__pega { width:100%; height:28px; padding:12px 0; touch-action:none; cursor:grab; }
.folha__pega::before { content:''; display:block; width:36px; height:4px; border-radius:2px; background:var(--contorno); margin:auto; }
.folha__opcao { display:flex; align-items:center; gap:16px; min-height:56px; width:100%; border-bottom:1px solid var(--contorno); text-align:left; }
.folha__fechar { min-width:44px; min-height:44px; }
.folha input, .folha textarea { display:block; width:100%; padding:16px; background:var(--fundo); border:1px solid var(--contorno); border-radius:var(--raio-input); }
.folha .btn { min-height:44px; }

@media (max-width:899px) {
  #sidebar, #titlebar { display:none; }
  body { display:block !important; }
  main { width:100%; padding:0 16px calc(104px + env(safe-area-inset-bottom,0px)) !important; height:auto !important; min-height:100dvh; }
  main#app { padding-top:16px !important; }
  .pagina > .shell { display:flex; flex-direction:column; overflow:visible; }
  .shell__scroll, .shell__fixed { height:auto; width:100%; overflow:visible; }
  .shell__fixed #chat { min-height:180px; max-height:320px; }
  .tabbar { position:fixed; inset:auto 0 0; z-index:50; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); background:var(--superficie); border-top:1px solid var(--contorno); padding:8px env(safe-area-inset-right,0px) calc(8px + env(safe-area-inset-bottom,0px)) env(safe-area-inset-left,0px); }
  .tabbar__item { min-height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--texto-secundario); font-size:var(--txt-etiqueta); text-decoration:none; -webkit-tap-highlight-color:transparent; }
  .tabbar__item.is-active { color:var(--acento); font-weight:600; }
  .tabbar__add { border-radius:var(--raio-input); background:var(--primaria); color:var(--sobre-primaria); margin-inline:16px; }
  /* Cabeçalho móvel flutuante: todos os controlos acompanham o hambúrguer.
     O espaço no topo mantém o primeiro conteúdo legível; a barra em si é
     transparente e não bloqueia toques entre os botões. */
  main#app:has(> .mobile-header--flutuante),
  main:has(> .mobile-header--flutuante) { padding-top:calc(76px + env(safe-area-inset-top,0px)) !important; }
  .mobile-header--flutuante {
    position:fixed; top:calc(10px + env(safe-area-inset-top,0px)); left:16px; right:16px; z-index:56;
    display:flex; justify-content:space-between; align-items:center; gap:8px; padding:0;
    pointer-events:none;
  }
  .mobile-header--flutuante > * { pointer-events:auto; }
  .mobile-header .btn { width:44px; height:44px; flex:none; }
  .mobile-header .cabecalho-caderno { min-width:44px; max-width:min(48vw,230px); margin-left:auto; overflow:hidden; }
  .mobile-header .cabecalho-caderno > span:nth-child(2) { overflow:hidden; text-overflow:ellipsis; }
  .mobile-account { position:relative; z-index:55; }
  .mobile-account summary { display:grid; place-items:center; width:44px; height:44px; background:var(--superficie); color:var(--floresta); box-shadow:0 8px 22px -10px rgba(28,43,34,.45), 0 0 0 1px rgba(28,43,34,.06); border-radius:999px; cursor:pointer; list-style:none; }
  .mobile-account summary::-webkit-details-marker { display:none; }
  .mobile-account nav { position:absolute; right:0; top:54px; min-width:200px; display:grid; gap:2px; background:var(--superficie); border:1px solid var(--contorno); border-radius:20px; box-shadow:var(--elev-2); padding:6px; }
  button, select, input:not([type=hidden]), a:not(.folder), summary { min-height:44px; min-width:44px; }
  .auth-scene { padding:16px; }
  .auth-window__body, .wizard__body { padding:24px 16px; }
  .auth-window__foot, .wizard__foot { padding:16px; gap:16px; flex-wrap:wrap; }
  .auth-window, .wizard { width:100%; }
  #f-contexto > div:first-child { grid-template-columns:1fr !important; }
  .wizard__choice { padding:16px; }
  .wizard__choices { gap:8px; }
  .mascote { padding-inline:32px; }
  dialog:not(.folha) { max-width:calc(100vw - 32px); }
  dialog:not(.folha) > div { width:100%; max-width:calc(100vw - 32px); padding:24px 16px; }
  .palette__input { min-width:0; }
  .palette__foot { flex-wrap:wrap; }
  .card, .card-lg, .card-outline { padding-left:16px; padding-right:16px; }
  #estante { grid-template-columns:1fr; }
  #toast-host { bottom:calc(96px + env(safe-area-inset-bottom,0px)); width:calc(100% - 32px); }
  .toast { border-radius:var(--raio-input); }
  body[data-nav=instrutor] main > header { flex-wrap:wrap; }
  body[data-nav=instrutor] .seg { width:100%; justify-content:center; }
  body[data-nav=instrutor] #txt { min-width:0; }
  #form-registo label a { display:inline-flex; align-items:center; }
  body .cal-grid { grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
  body .cal-cell { min-width:0; min-height:44px; padding:4px; }
  body .cal-head { font-size:11px; letter-spacing:0; padding-inline:0; }
}
/* Um tablet na vertical usa o mesmo cabeçalho flutuante, mas conserva a
   navegação lateral e o restante layout de tablet. Em horizontal volta ao
   cabeçalho de computador. */
@media (min-width:900px) and (max-width:1180px) and (orientation:portrait) {
  #titlebar { display:none; }
  main#app:has(> .mobile-header--flutuante),
  main:has(> .mobile-header--flutuante) { padding-top:calc(76px + env(safe-area-inset-top,0px)) !important; }
  .mobile-header--flutuante {
    position:fixed; top:calc(10px + env(safe-area-inset-top,0px));
    left:calc(var(--sb-w,0px) + 24px); right:24px; z-index:56;
    display:flex; justify-content:space-between; align-items:center; gap:8px; padding:0;
    pointer-events:none;
  }
  .mobile-header--flutuante > * { pointer-events:auto; }
  .mobile-header .btn { width:44px; height:44px; flex:none; }
  .mobile-header .cabecalho-caderno { min-width:44px; max-width:min(40vw,230px); margin-left:auto; overflow:hidden; }
  .mobile-header .cabecalho-caderno > span:nth-child(2) { overflow:hidden; text-overflow:ellipsis; }
  .mobile-account { position:relative; z-index:55; }
  .mobile-account summary { display:grid; place-items:center; width:44px; height:44px; background:var(--superficie); color:var(--floresta); box-shadow:0 8px 22px -10px rgba(28,43,34,.45), 0 0 0 1px rgba(28,43,34,.06); border-radius:999px; cursor:pointer; list-style:none; }
  .mobile-account summary::-webkit-details-marker { display:none; }
  .mobile-account nav { position:absolute; right:0; top:54px; min-width:200px; display:grid; gap:2px; background:var(--superficie); border:1px solid var(--contorno); border-radius:20px; box-shadow:var(--elev-2); padding:6px; }
}
@media (max-width: 760px) {
  .welcome-page { padding: 0; overflow: auto; }
  .welcome-card { min-height: 100dvh; grid-template-columns: 1fr; border-radius: 0; }
  .welcome-card__visual { min-height: 42dvh; }
  .welcome-card__content { padding: 34px 24px 28px; }
  .welcome-card h1 { font-size: 39px; }
  .welcome-card__content > p { margin-bottom: 26px; }
}

/* Entrada e autenticação: porto visual directo das telas mobile. Não há uma
   versão "desktop" com copy própria: a largura maior só dá mais respiro. */
body.welcome-mobile-page,
body.auth-mobile-page {
  display:block !important;
  width:100%; min-height:100dvh; height:100dvh; overflow:hidden;
  background:linear-gradient(160deg,#f2fadf 0%,#e3f6be 38%,#d0ef9c 70%,#bbe884 100%);
  color:#10251b;
}
.welcome-mobile {
  position:relative; isolation:isolate; height:100%; overflow:hidden;
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(20px,4vh,48px) 28px 24px;
}
.welcome-mobile::before {
  content:""; position:absolute; z-index:-2; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.1),transparent 50%,rgba(46,74,59,.06));
}
.welcome-mobile__halo {
  position:absolute; z-index:-1; width:var(--halo-maano,min(130vw,62dvh)); aspect-ratio:1;
  top:calc(var(--halo-maano,min(130vw,62dvh)) * -.10); left:50%; transform:translateX(-50%);
  border-radius:50%; filter:blur(22px);
  /* O HaloMaano é luz espalhada, não um disco verde atrás do mascote. */
  background:
    radial-gradient(ellipse 48% 52% at 50% 46%,rgba(47,163,107,.56),rgba(87,198,132,.38) 43%,transparent 76%),
    radial-gradient(ellipse 42% 38% at 22% 26%,rgba(127,232,168,.48),transparent 78%),
    radial-gradient(ellipse 38% 32% at 76% 17%,rgba(188,219,142,.30),transparent 80%);
}
.welcome-mobile__mascote { min-height:clamp(184px,37vh,340px); display:grid; place-items:end center; padding-top:12px; }
.welcome-mobile__content { width:min(460px,100%); margin-top:auto; text-align:center; }
.welcome-mobile h1 { margin:0; font:800 clamp(28px,3vw,48px)/1.1 'Plus Jakarta Sans',system-ui,sans-serif; letter-spacing:-.045em; color:#10251b; }
.welcome-mobile h1 em { color:#14764a; font-style:normal; }
.welcome-mobile__primary { display:grid; place-items:center; width:100%; min-height:54px; margin-top:30px; border-radius:999px; background:#14764a; color:#fff !important; font-weight:700; text-decoration:none; }
.welcome-mobile__login { display:inline-flex; justify-content:center; min-height:44px; align-items:center; margin-top:4px; color:rgba(28,58,43,.85) !important; font-weight:600; text-decoration:none; }

.auth-mobile-scene { height:100%; display:grid; place-items:center; padding:clamp(12px,3vh,30px) 24px; background:var(--fundo); }
.auth-mobile-form { width:min(460px,100%); max-height:100%; display:grid; grid-template-columns:44px minmax(0,1fr); align-items:start; column-gap:8px; }
.auth-mobile__back { display:grid; place-items:center; width:44px; height:44px; margin-top:2px; border:0; border-radius:50%; background:transparent; color:var(--texto); font:400 36px/1 system-ui; cursor:pointer; }
.auth-mobile__back:hover { background:var(--menta); }
.auth-mobile__content { min-width:0; }
.auth-mobile__header { margin:8px 0 32px; }
.auth-mobile__header h1 { text-wrap:balance; margin:0; color:var(--texto); font:800 clamp(30px,3.2vw,40px)/1.12 'Newsreader',serif; letter-spacing:-.03em; }
.auth-mobile__header p { margin:8px 0 0; color:var(--texto-secundario); font-size:16px; line-height:1.45; }
.auth-mobile__mascote { height:132px; display:grid; place-items:end center; margin-bottom:20px; overflow:visible; }
.auth-mobile__hero { position:relative; height:240px; margin:0 0 28px; }
.auth-mobile__hero .auth-mobile__header { position:absolute; left:0; bottom:43px; margin:0; }
.auth-mobile__hero .auth-mobile__mascote { position:absolute; right:58px; bottom:0; width:208px; height:240px; margin:0; justify-items:end; }
.auth-mobile-form .field { margin-top:16px; }
.auth-mobile-form .field:first-of-type { margin-top:0; }
.auth-mobile-form .field__input { min-height:56px; padding:16px 20px; border:1px solid color-mix(in srgb,var(--texto-secundario) 22%,transparent); border-radius:14px; background:var(--superficie-elevada); }
.auth-mobile-form .field__label { top:18px; left:20px; }
.auth-mobile-form .field__input:focus + .field__label,
.auth-mobile-form .field__input:not(:placeholder-shown) + .field__label {
  z-index:1; padding:0 4px; background:var(--superficie-elevada);
}
.auth-mobile-form .field__hint { min-height:0; margin-top:7px; font-size:12px; line-height:1.35; }
.auth-mobile-form .field:has(.auth-olho) .field__input { padding-right:56px; }
input::-ms-reveal { display:none; }
.auth-olho {
  position:absolute; right:6px; top:6px; display:grid; place-items:center; width:44px; height:44px; min-height:44px; min-width:44px;
  border:0; border-radius:12px; background:transparent; color:var(--texto-secundario); cursor:pointer;
}
.auth-olho:hover { background:color-mix(in srgb, var(--menta) 60%, transparent); }
.auth-olho:focus-visible { outline:2px solid var(--esmeralda); outline-offset:0; }
/* Onde se escreve o email e a palavra-passe, o campo tem o mesmo relevo dos
   botões (pedido do Jeremy, 2026-10-19): a versão clara, a do botão do
   Google, com a orla de baixo mais escura e a sombra suave. No foco, o campo
   fica marcado a verde por cima do relevo; no erro, a vermelho. Levam
   !important para ganhar ao "box-shadow:none" geral do foco e do erro. */
.auth-mobile-form .field__input { background:var(--relevo-vidro); box-shadow:var(--elev-1); transition:box-shadow .18s ease; }
.auth-mobile-form .field__input:hover { box-shadow:var(--relevo-levantado); }
.auth-mobile-form .field__input:focus { background:var(--superficie); box-shadow:inset 0 0 0 2px var(--esmeralda), var(--elev-1) !important; }
.auth-mobile-form .field.is-invalid .field__input { box-shadow:inset 0 0 0 2px var(--perigo), var(--elev-1) !important; }
.auth-mobile-form .field__input:focus-visible { outline:none !important; }
.auth-mobile-form .field.is-invalid .field__input { box-shadow:inset 0 0 0 2px var(--perigo), 0 0 0 4px rgba(186,26,26,.1) !important; }
.auth-mobile-form .auth-submit { width:100%; min-height:52px; margin-top:32px; border-radius:999px; }
.auth-mobile-form .auth-divider { margin:28px 0; }
.auth-mobile-form .auth-google { width:100%; min-height:52px; border-radius:999px; justify-content:center; }
.auth-mobile__switch { display:flex; width:max-content; max-width:100%; min-height:44px; align-items:center; margin:12px auto 0; color:var(--acento) !important; font-weight:600; text-decoration:none; }
.auth-mobile__switch-pergunta { margin-right:6px; color:var(--texto-secundario); font-weight:500; }
.auth-mobile-form .auth-confirmacao .auth-submit { margin-top:28px; }
/* Recuperar e palavra-passe nova: o mascote em cima, inteiro, sem tocar no título. */
.auth-mobile__mascote--topo { height:auto; place-items:center; margin:0 0 20px; overflow:hidden; }
.auth-mobile__mascote--topo img { max-height:150px; width:auto !important; transform:none !important; }
.auth-mobile-form .auth-options { justify-content:flex-end; margin-top:4px; min-height:40px; }
.auth-mobile-form .auth-options a { color:var(--texto-secundario) !important; }
.auth-mobile__legal { margin:20px auto 0; max-width:360px; color:var(--texto-secundario); font-size:11px; line-height:1.4; text-align:center; }
.auth-mobile__legal a { color:#1976d2 !important; font-weight:700; text-decoration:underline; }
.auth-mobile-form .auth-error { margin-top:12px; }
.auth-mobile-form .auth-confirmacao { grid-column:1 / -1; min-height:360px; display:grid; place-content:center; text-align:center; }
.auth-mobile-form .auth-confirmacao .material-symbols-outlined { margin:auto; width:72px; height:72px; display:grid; place-items:center; border-radius:50%; background:var(--menta); color:var(--floresta); font-size:36px; }
.auth-mobile-form .auth-confirmacao h1, .auth-mobile-form .auth-confirmacao h2 { margin:28px 0 12px; font:800 32px/1.15 'Newsreader',serif; }
.auth-mobile-form .auth-confirmacao p { margin:0; color:var(--texto-secundario); line-height:1.5; }
/* Entrada (login, conta nova, recuperar, palavra-passe nova), 2026-10-20,
   pedido do Jeremy: o logótipo por cima e o formulário num cartão branco, em
   todos os tamanhos. No ecrã grande, o login e a conta nova levam à direita
   o painel com ecrãs reais da app (assets/apresentacao.js). */
body.auth-mobile-page { background:var(--fundo); }
.auth-mobile-scene {
  display:flex; flex-direction:column; align-items:center; justify-content:safe center;
  gap:clamp(12px,2.4vh,22px); overflow-y:auto; scrollbar-width:none;
}
.auth-mobile-scene::-webkit-scrollbar { display:none; }
.auth-marca {
  display:flex; align-items:center; gap:10px; flex-shrink:0; text-decoration:none; border-radius:12px;
  color:var(--floresta); font:800 26px/1 'Newsreader', system-ui, serif; letter-spacing:-.4px;
}
.auth-marca img { width:44px; height:32px; object-fit:contain; }
.auth-marca:focus-visible { outline-offset:4px; }
.auth-mobile-form {
  flex-shrink:0; width:min(540px,100%); max-height:none; box-sizing:border-box;
  padding:clamp(20px,3.4vh,36px) clamp(22px,3vw,40px) clamp(20px,3vh,32px) clamp(10px,1.6vw,24px);
  border-radius:24px; background:#fff;
  box-shadow:0 0 0 1px rgba(46,74,59,.07), 0 18px 40px -26px rgba(22,36,28,.28);
}
.auth-mobile__hero { height:clamp(160px,22vh,220px); margin-bottom:clamp(12px,2.2vh,24px); }
.auth-mobile__hero .auth-mobile__header { bottom:clamp(20px,3.5vh,36px); }
.auth-mobile__hero .auth-mobile__mascote { right:24px; width:clamp(150px,20vh,190px); height:100%; }
.auth-mobile__header h1 { font-size:clamp(28px,4vh,38px); }
.auth-mobile-form .field { margin-top:clamp(10px,1.6vh,16px); }
.auth-mobile-form .auth-submit { margin-top:clamp(16px,2.8vh,28px); }
.auth-mobile-form .auth-divider { margin:clamp(14px,2.4vh,24px) 0; }
.auth-mobile__legal { margin-top:clamp(10px,1.8vh,18px); }
/* Branco sobre branco perdia o campo: um verde quase branco, branco no foco. */
.auth-mobile-form .field__input { background:#F3F7F2; }
.auth-mobile-form .field__input:focus { background:#fff; }
.auth-mobile-form .field__input:focus + .field__label,
.auth-mobile-form .field__input:not(:placeholder-shown) + .field__label { background:transparent; }

.apresentacao { display:none; }
@media (min-width:1024px) {
  /* Uma linha da altura do ecrã: o painel nunca cresce além dele. */
  body.auth-mobile-page.com-apresentacao {
    display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); grid-template-rows:minmax(0,100%);
  }
  body.com-apresentacao .auth-mobile-scene { min-width:0; padding:16px clamp(16px,3vw,40px); }
  /* O painel: o verde da marca, chapado, com um grão fino por cima (nada de
     brilhos em degradê). As capturas é que dão a cor. */
  .apresentacao {
    position:relative; isolation:isolate; overflow:hidden;
    display:flex; flex-direction:column; min-width:0; min-height:0; margin:12px 12px 12px 0;
    padding:clamp(28px,5vh,56px) clamp(28px,3.5vw,56px) clamp(22px,3.6vh,36px);
    border-radius:28px; background:#2E4A3B; color:#fff;
  }
  .apresentacao::before {
    content:''; position:absolute; inset:0; z-index:-1; opacity:.4; mix-blend-mode:overlay; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  }
  .apresentacao__palco { position:relative; flex:1; min-height:0; }
  .apresentacao__slide {
    position:absolute; inset:0; margin:0; display:grid; place-items:center;
    opacity:0; transform:translateY(12px); pointer-events:none;
    transition:opacity .55s ease, transform .7s cubic-bezier(.2,.9,.3,1);
  }
  .apresentacao__slide.is-ativo { opacity:1; transform:none; pointer-events:auto; }
  /* A app inteira numa janela centrada, com uma barra fina no topo, e espaço
     à volta: lê-se como um produto, não como um recorte. */
  .apresentacao__ecra { position:relative; width:min(86%, 600px); }
  .apresentacao__slide--janela .apresentacao__ecra {
    display:flex; flex-direction:column; border-radius:14px; background:#fff;
    box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 40px 70px -30px rgba(0,0,0,.7);
  }
  .apresentacao__barra {
    display:flex; gap:6px; align-items:center; height:22px; padding:0 12px; flex-shrink:0;
    border-radius:14px 14px 0 0; background:#F4F6F2; box-shadow:inset 0 -1px 0 rgba(46,74,59,.08);
  }
  .apresentacao__barra i { width:8px; height:8px; border-radius:50%; background:#D5DBD3; }
  .apresentacao__ecra img { display:block; width:100%; height:auto; }
  .apresentacao__slide--janela .apresentacao__ecra img { border-radius:0 0 14px 14px; }
  .apresentacao__slide--cartao .apresentacao__ecra { width:min(64%, 380px); transform:rotate(-2.5deg); }
  .apresentacao__slide--cartao .apresentacao__ecra img { border-radius:28px; box-shadow:0 40px 70px -30px rgba(0,0,0,.7); }
  /* Dois telemóveis lado a lado, o segundo mais abaixo (como no site). O
     aro escuro separa o ecrã verde da app do verde do painel. */
  .apresentacao__slide--celulares .apresentacao__ecra {
    display:flex; justify-content:center; align-items:flex-start; gap:clamp(14px,2vw,24px); width:min(80%, 440px);
  }
  .apresentacao__cel {
    position:relative; flex:1; max-width:200px; padding:7px; border-radius:32px; background:#1B1A15;
    box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 34px 56px -24px rgba(0,0,0,.7);
  }
  .apresentacao__cel:nth-child(2) { margin-top:clamp(28px,6vh,52px); }
  .apresentacao__cel img { border-radius:25px; }
  .apresentacao__cel::before {
    content:''; position:absolute; top:15px; left:50%; width:9px; height:9px; transform:translateX(-50%);
    border-radius:50%; background:#1B1A15; box-shadow:0 0 0 1.5px rgba(255,255,255,.14);
  }
  .apresentacao__cartao-atras {
    position:absolute; inset:0; z-index:-1; border-radius:28px; transform:rotate(6deg) translate(18px, 10px);
    background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  }
  /* Os azulejos: moldura de vidro que apanha a cor do painel, com a cor
     forte da ferramenta por dentro e o ícone a branco. Presos às bordas. */
  .apresentacao__azulejo {
    --c1:#6AA8EC; --c2:#3478C8;
    position:absolute; z-index:2; display:grid; place-items:center; width:84px; height:84px; border-radius:24px;
    background:rgba(255,255,255,.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.38), inset 0 1px 0 rgba(255,255,255,.5), 0 22px 40px -18px rgba(0,0,0,.55);
    animation:apresentacao-flutuar 5s ease-in-out infinite;
  }
  .apresentacao__azulejo .material-symbols-outlined {
    display:grid; place-items:center; width:62px; height:62px; border-radius:18px;
    background:linear-gradient(160deg, var(--c1), var(--c2)); color:#fff; font-size:32px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.12);
  }
  .apresentacao__azulejo[data-cor="ceu"] { --c1:#6AA8EC; --c2:#3478C8; }
  .apresentacao__azulejo[data-cor="menta"] { --c1:#47C08A; --c2:#1F8F5C; }
  .apresentacao__azulejo[data-cor="limao"] { --c1:#F7CF45; --c2:#E4A912; }
  .apresentacao__azulejo[data-cor="lavanda"] { --c1:#A68BEF; --c2:#7457D2; }
  .apresentacao__azulejo[data-cor="rosa"] { --c1:#F07FAE; --c2:#D2487F; }
  .apresentacao__azulejo[data-cor="agua"] { --c1:#4CC3D2; --c2:#1E93A5; }
  .apresentacao__azulejo--topo { top:-42px; left:58%; }
  .apresentacao__azulejo--esq { top:48%; left:-44px; animation-delay:-1.7s; }
  .apresentacao__azulejo--baixo { bottom:-38px; right:12%; animation-delay:-3.1s; }
  @keyframes apresentacao-flutuar { 50% { transform:translateY(-6px); } }

  .apresentacao__frase {
    max-width:560px; margin:clamp(14px,2.6vh,28px) auto 0; text-align:center; text-wrap:balance;
    font:700 clamp(18px,1.7vw,22px)/1.35 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing:-.01em; color:#fff;
  }
  .apresentacao__pontos { display:flex; justify-content:center; gap:10px; margin-top:clamp(14px,2.4vh,22px); }
  .apresentacao__ponto {
    position:relative; width:28px; height:5px; padding:0; border:0; border-radius:999px; cursor:pointer;
    background:rgba(255,255,255,.28); transition:width .3s ease, background .3s ease;
  }
  /* O alvo de toque é maior do que o traço que se vê. */
  .apresentacao__ponto::after { content:''; position:absolute; inset:-20px -6px; }
  .apresentacao__ponto:hover { background:rgba(255,255,255,.55); }
  .apresentacao__ponto[aria-current="true"] { width:64px; background:#fff; }
  .apresentacao__ponto:focus-visible { outline:2px solid #A9E0C1 !important; outline-offset:4px; }
}
@media (min-width:1024px) and (max-height:720px) {
  .apresentacao__azulejo { width:66px; height:66px; border-radius:19px; }
  .apresentacao__azulejo .material-symbols-outlined { width:48px; height:48px; border-radius:14px; font-size:24px; }
  .apresentacao__azulejo--topo { top:-32px; }
  .apresentacao__azulejo--esq { left:-34px; }
  .apresentacao__azulejo--baixo { bottom:-30px; }
}
@media (prefers-reduced-motion:reduce) {
  .apresentacao__slide, .apresentacao__ponto { transition:none; }
  .apresentacao__azulejo { animation:none; }
}

@media (max-height:700px) {
  .welcome-mobile { padding-top:14px; }
  .welcome-mobile__mascote { min-height:140px; }
  .welcome-mobile__primary { margin-top:18px; }
  .auth-mobile-scene { padding-block:10px; }
  .auth-mobile__header { margin:4px 0 18px; }
  .auth-mobile__mascote { height:90px; margin-bottom:10px; }
  .auth-mobile__hero { height:170px; margin-bottom:16px; }
  .auth-mobile__hero .auth-mobile__header { bottom:24px; }
  .auth-mobile__hero .auth-mobile__mascote { right:16px; width:160px; height:170px; }
  .auth-mobile-form .field { margin-top:10px; }
  .auth-mobile-form .auth-submit { margin-top:18px; }
  .auth-mobile-form .auth-divider { margin:16px 0; }
  .auth-mobile__legal { margin-top:12px; }
}
@media (max-width:520px) {
  .auth-mobile-scene { padding-inline:16px; }
  .auth-mobile-form { position:relative; display:block; width:100%; max-width:380px; padding:18px 20px 22px; border-radius:22px; }
  .auth-mobile__back { position:absolute; z-index:1; left:8px; top:12px; width:36px; height:44px; }
  .auth-mobile__header { margin-left:0; }
  .auth-mobile__mascote { margin-left:0; }
  /* A margem de cima é a altura do botão de voltar: sem ela, o "‹" ficava
     por cima do título e não se via (nem se acertava no toque). */
  .auth-mobile__hero { height:170px; margin-top:44px; }
  .auth-mobile__hero .auth-mobile__header,
  .auth-mobile__hero .auth-mobile__mascote { margin-left:0; }
  .auth-mobile__hero .auth-mobile__mascote { right:-30px; transform:translateX(0); }
}

/* O seletor de onde procurar, colado ao topo da caixa de texto, e a caixa que
   cresce com o texto (2026-09-22). Antes a caixa era um <input> de uma linha e
   o texto fugia para o lado em vez de quebrar na margem. */
/* O ÂMBITO VIVE DENTRO DA CAIXA, não pousado em cima dela.
   A silhueta da caixa de texto sobe num separador arredondado, contorna a
   pastilha e volta a descer. As duas curvas côncavas dos lados são o detalhe
   que faz a coisa ler-se como UMA peça: sem elas fica um retângulo colado a
   outro, e o olho vê logo a emenda.
   Como se faz um canto côncavo em CSS: um quadrado da cor da caixa com um
   quarto de círculo recortado no canto de fora (`radial-gradient` transparente
   até ao raio). O `raio` manda nos dois. */
.chat-ambito-fila {
  --aba-raio:22px;
  position:relative; display:flex; justify-content:center;
  z-index:2; pointer-events:none;
}
.chat-ambito-fila > * { pointer-events:auto; }

.chat-ambito-aba {
  position:relative;
  padding:6px 12px 0;
  border-radius:26px 26px 0 0;
  /* A cor vem da caixa (ver `--caixa-fundo` no estudo.html). Escrever aqui a
     cor outra vez era o que fazia o entalhe desaparecer quando a pagina
     pintava a caixa de outra maneira. */
  background:var(--caixa-fundo, var(--superficie-elevada));
}
.chat-ambito-aba::before,
.chat-ambito-aba::after {
  content:""; position:absolute; bottom:0;
  width:var(--aba-raio); height:var(--aba-raio);
}
.chat-ambito-aba::before {
  left:calc(var(--aba-raio) * -1);
  background:radial-gradient(
    circle at 0 0, #0000 var(--aba-raio), var(--caixa-fundo, var(--superficie-elevada)) 0
  );
}
.chat-ambito-aba::after {
  right:calc(var(--aba-raio) * -1);
  background:radial-gradient(
    circle at 100% 0, #0000 var(--aba-raio), var(--caixa-fundo, var(--superficie-elevada)) 0
  );
}

/* Sem contorno: dentro do entalhe ele era ruído a mais. O verde e o fundo de
   menta já dizem que é tocável, e o separador já diz onde começa e acaba. */
.chat-ambito {
  display:inline-flex; align-items:center; gap:7px;
  height:28px; padding:0 12px;
  border-radius:999px;
  background:var(--menta); color:var(--acento);
  font-size:12.5px; font-weight:800; cursor:pointer;
  transition:background .15s ease;
}
.chat-ambito:hover {
  background:color-mix(in srgb, var(--menta) 78%, var(--acento));
}
.chat-ambito__ponto { width:8px; height:8px; border-radius:999px; flex-shrink:0; }
.chat-ambito__seta { color:var(--acento); opacity:.75; margin-right:-2px; }
.chat-ambito__menu {
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(100% + 8px); z-index:30;
  width:min(340px, 100%); max-height:320px; overflow-y:auto;
  padding:10px; display:flex; flex-direction:column; gap:2px;
  border-radius:var(--raio-cartao-2);
  background:var(--superficie-elevada);
  box-shadow:inset 0 0 0 1px var(--contorno), var(--elev-2);
}
/* O `display:flex` acima ANULA o atributo `hidden` (que so vale por
   `display:none` na folha do browser, e qualquer regra do autor ganha).
   Sem esta linha o menu nunca fechava: o JS escondia-o e o CSS voltava a
   mostra-lo. */
.chat-ambito__menu[hidden] { display:none; }
.chat-ambito__titulo {
  padding:2px 8px 6px; color:var(--texto-secundario);
  font-size:11px; font-weight:800; letter-spacing:.9px; text-transform:uppercase;
}
.chat-ambito__item {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 10px; border:0; border-radius:12px;
  background:transparent; text-align:left; cursor:pointer;
}
.chat-ambito__item:hover { background:var(--superficie); }
.chat-ambito__item[aria-selected="true"] { background:var(--superficie); }
.chat-ambito__texto { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.chat-ambito__nome { color:var(--texto); font-size:13px; font-weight:700; }
.chat-ambito__sub { color:var(--texto-secundario); font-size:11px; font-weight:500; }
.chat-ambito__visto { color:var(--esmeralda); font-size:16px; }

.chat-caixa {
  /* Encosta ao separador de cima, sem folga: é o mesmo desenho, não são duas
     peças. */
  margin-top:0; align-items:flex-end;
  border-top-left-radius:var(--raio-input); border-top-right-radius:var(--raio-input);
  display:flex; gap:8px;
}
.chat-caixa__texto {
  flex:1; min-width:0; border:0; outline:0; resize:none;
  background:transparent; color:var(--texto);
  font-family:inherit; font-size:13px; line-height:22px;
  max-height:176px; overflow-y:auto;
}
.chat-caixa__texto::placeholder { color:var(--texto-secundario); }

/* ---------- Modo concurso (spec 2026-09-27-modo-concurso-design.md) ----------
   Tudo o que está aqui só existe no DOM com `modo === 'concurso'`. Sem
   contornos (a regra do topo deste ficheiro): superfícies, sombra e SVG. */

/* A faixa do concurso, por cima das pastas da biblioteca. Desde 2026-10-15
   (pedido do Jeremy): branca, cantos de 14 px, sem sombra por baixo e com as
   bordas esfumadas, um halo largo e claro que se desfaz no fundo. */
.concurso-faixa {
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px 32px; align-items:end;
  padding:24px 28px 22px; border-radius:14px; color:var(--texto);
  background:var(--superficie);
  box-shadow:0 0 18px 8px color-mix(in srgb,var(--superficie) 60%,transparent);
}
.concurso-faixa__rotulo {
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--pinho);
}
.concurso-faixa__nome { font-size:30px; font-weight:700; line-height:1.1; margin-top:6px; overflow-wrap:anywhere; }
.concurso-faixa__detalhe { font-size:13px; color:var(--texto-secundario); margin-top:6px; }
.concurso-faixa__dias { display:grid; justify-items:end; text-align:right; }
.concurso-faixa__dias strong {
  font:700 46px/1 'Newsreader',serif; letter-spacing:-1px; color:var(--floresta);
  font-variant-numeric:tabular-nums;
}
.concurso-faixa__dias span { font-size:12px; color:var(--texto-secundario); margin-top:6px; }
.concurso-faixa__dias .concurso-faixa__sem-data { margin:0; font-size:13px; }


/* Progresso em modo concurso: por matéria, peso e pronto lado a lado. */
.concurso-progresso__cab, .concurso-progresso__linha {
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(88px,.7fr) minmax(0,1fr);
  gap:18px; align-items:start;
}
.concurso-progresso__cab {
  margin-top:18px; padding:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--texto-secundario);
}
.concurso-progresso__lista { list-style:none; margin:0; padding:0; display:grid; }
.concurso-progresso__linha {
  padding:12px 0; box-shadow:0 -1px 0 color-mix(in srgb,var(--salvia) 22%,transparent);
}
.concurso-progresso__materia {
  display:flex; align-items:center; gap:10px; min-width:0; color:var(--texto); text-decoration:none;
  font-size:13px; font-weight:600;
}
a.concurso-progresso__materia:hover .concurso-progresso__nome { text-decoration:underline; text-underline-offset:3px; }
a.concurso-progresso__materia:focus-visible { outline:2px solid var(--esmeralda); outline-offset:3px; border-radius:6px; }
.concurso-progresso__ponto { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.concurso-progresso__nome { overflow-wrap:anywhere; line-height:1.35; }
.concurso-progresso__celula { display:grid; gap:6px; font-size:13px; min-width:0; }
.concurso-progresso__celula small { display:none; }
.concurso-progresso__questoes { font-weight:600; font-variant-numeric:tabular-nums; }
.concurso-progresso__num { color:var(--texto-secundario); font-variant-numeric:tabular-nums; }
.concurso-progresso__nota { margin-top:14px; font-size:12px; line-height:1.5; color:var(--texto-secundario); max-width:62ch; }

/* Horas líquidas da semana (fase 5). */
.concurso-horas__numeros { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; margin-top:12px; }
.concurso-horas__total {
  font:700 40px/1 'Newsreader',serif; letter-spacing:-.5px; color:var(--floresta); font-variant-numeric:tabular-nums;
}
.concurso-horas__meta { font-size:13px; color:var(--texto-secundario); }
.concurso-horas__barra { margin-top:14px; }
.concurso-horas__etapas { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.concurso-horas__etapa {
  display:flex; align-items:baseline; gap:8px; padding:7px 12px; border-radius:999px; font-size:12px;
  background:color-mix(in srgb,var(--salvia) 16%,var(--superficie)); color:var(--texto-secundario);
}
.concurso-horas__etapa strong { color:var(--texto); font-weight:700; font-variant-numeric:tabular-nums; }
.concurso-horas__vazio { margin-top:14px; font-size:13px; color:var(--texto-secundario); line-height:1.5; }

/* O convite, para quem está em concurso e ainda não escolheu o edital. */
.concurso-faixa--convite { align-items:center; }
.concurso-faixa--convite .concurso-faixa__detalhe { max-width:520px; line-height:1.5; }
.concurso-faixa--convite .btn { gap:8px; white-space:nowrap; }

/* O edital para ler (Cronograma, "Ver edital"): matérias recolhíveis e os
   tópicos com a numeração do edital. Sem estados nem botões desde
   2026-09-28 (o separador Edital da disciplina saiu). */
.edital__lista { display:grid; gap:12px; }
.edital-grupo {
  border-radius:var(--raio-cartao-2); background:var(--superficie); box-shadow:var(--elev-1); overflow:hidden;
}
.edital-grupo__cab {
  display:flex; align-items:center; gap:10px; padding:14px 16px; cursor:pointer; list-style:none;
  background:color-mix(in srgb,var(--menta) 52%,var(--superficie));
  font-size:14px; font-weight:700; line-height:1.35; color:var(--texto);
}
.edital-grupo__cab::-webkit-details-marker { display:none; }
.edital-grupo__nome { flex:1; min-width:0; }
.edital-grupo__conta { font-size:12px; font-weight:600; color:var(--texto-secundario); white-space:nowrap; font-variant-numeric:tabular-nums; }
.edital-grupo__seta { color:var(--texto-secundario); transition:transform .2s ease; flex:none; }
.edital-grupo:not([open]) .edital-grupo__seta { transform:rotate(-90deg); }
.edital-grupo__itens { list-style:none; margin:0; padding:0; }
.edital-grupo__vazio { padding:14px 16px; font-size:13px; color:var(--texto-secundario); }
.edital-num {
  display:inline-block; min-width:2em; margin-right:8px; font-size:12px; font-weight:700;
  color:var(--pinho); font-variant-numeric:tabular-nums;
}
.edital-linha { display:flex; align-items:center; box-shadow:inset 0 1px 0 color-mix(in srgb,var(--salvia) 26%,transparent); }
/* Recuo suspenso: quando o texto quebra, a segunda linha alinha com o texto
   e não com o número. */
.edital-linha__texto { display:flex; align-items:baseline; padding:12px 16px; font-size:14px; font-weight:500; line-height:1.45; }
.edital-linha__texto .edital-num { flex:none; }

/* O edital como índice das notas (2026-10-12, edital-indice.js): o
   separador Edital da disciplina. Cada tópico do edital com as partes das
   notas ligadas a ele; tocar abre a anotação completa. */
.edital-indice { display:grid; gap:12px; }
.ei-intro { margin:0 0 2px; font-size:13px; line-height:1.5; color:var(--texto-secundario); }
.ei-cartao { border-radius:var(--raio-cartao-2); background:var(--superficie); box-shadow:var(--elev-1); padding:6px 0 8px; }
.ei-topico { padding:12px 18px 6px; }
/* Os subtópicos do edital: uma linha fina por cima, como no edital para ler. */
.ei-topico--filho { margin-top:6px; padding:12px 0 0; box-shadow:inset 0 1px 0 color-mix(in srgb,var(--salvia) 24%,transparent); }
/* A linha do tópico do edital. Com partes é um botão que as mostra. */
.ei-topico__cab {
  display:flex; align-items:center; gap:10px; width:calc(100% + 20px); margin:-8px -10px; padding:8px 10px; min-height:44px;
  border-radius:12px; background:transparent; font:inherit; color:inherit; text-align:left;
}
button.ei-topico__cab { cursor:pointer; transition:background-color .15s ease; }
button.ei-topico__cab:hover { background:color-mix(in srgb,var(--menta) 45%,var(--superficie)); }
button.ei-topico__cab:focus-visible { outline:2px solid var(--esmeralda); outline-offset:0; }
.ei-topico__cab--fixo { flex-wrap:wrap; row-gap:4px; }
.ei-topico__titulo { flex:1; min-width:0; display:flex; align-items:baseline; margin:0; font-size:15px; font-weight:700; line-height:1.4; color:var(--texto); text-wrap:pretty; }
.ei-conta {
  flex:none; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap;
  color:var(--floresta); background:color-mix(in srgb,var(--menta) 80%,var(--superficie)); font-variant-numeric:tabular-nums;
}
.ei-topico__seta { flex:none; display:grid; color:var(--pinho); transition:transform .2s ease; }
.ei-topico__cab[aria-expanded="true"] .ei-topico__seta { transform:rotate(180deg); }
.ei-partes[hidden] { display:none; }
.ei-topico--filho .ei-topico__titulo { font-size:14px; font-weight:600; }
.ei-topico__titulo .edital-num { flex:none; min-width:2.4em; color:var(--pinho); }
/* As partes das notas: o que se toca. Fundo menta, ícone da origem e seta. */
.ei-partes { list-style:none; margin:14px 0 4px; padding:0 0 0 2.4em; display:grid; gap:6px; }
.ei-parte {
  display:flex; align-items:center; gap:12px; min-height:52px; padding:8px 12px 8px 8px; border-radius:14px;
  background:color-mix(in srgb,var(--menta) 42%,var(--superficie)); color:var(--texto); text-decoration:none;
  transition:background-color .15s ease, transform .15s ease;
}
.ei-parte:hover { background:color-mix(in srgb,var(--menta) 78%,var(--superficie)); }
.ei-parte:active { transform:scale(.99); }
.ei-parte:focus-visible { outline:2px solid var(--esmeralda); outline-offset:2px; }
.ei-parte__icone { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:11px; color:var(--floresta);
  background:var(--superficie); box-shadow:var(--elev-1); }
.ei-parte__texto { flex:1; min-width:0; display:grid; gap:1px; }
.ei-parte__nome { font-size:14px; font-weight:600; line-height:1.35; overflow-wrap:anywhere; }
.ei-parte__nota { font-size:12px; color:var(--texto-secundario); line-height:1.4; overflow-wrap:anywhere; }
.ei-parte__seta { flex:none; color:var(--pinho); transition:transform .15s ease; }
.ei-parte:hover .ei-parte__seta { transform:translateX(2px); }
/* O "⋯" de cada parte (menu com "Não é deste tópico"): o mesmo gesto dos
   tópicos e das anotações da pasta, redondo e calmo, sempre à vista. */
.ei-linha { display:flex; align-items:center; gap:4px; }
.ei-linha > .ei-parte { flex:1; min-width:0; }
.ei-mais {
  flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:transparent; color:var(--texto-secundario); transition:background-color .15s ease, color .15s ease, transform .15s ease;
}
.ei-mais:hover { color:var(--texto); background:color-mix(in srgb,var(--salvia) 18%,var(--superficie)); }
.ei-mais:active { transform:scale(.92); }
.ei-mais:focus-visible { outline:2px solid var(--esmeralda); outline-offset:0; }
/* Fora do edital: o cartão do fim, em tons neutros (é informação, não uma
   secção do edital). O selo diz em cada nota que não tem ligação. */
.ei-fora__icone { flex:none; display:inline-flex; min-width:2.4em; color:var(--texto-secundario); align-self:center; }
.ei-conta--fora { color:var(--texto-secundario); background:color-mix(in srgb,var(--salvia) 14%,var(--superficie)); }
.ei-fora__texto { margin:14px 0 0 2.4em; font-size:13px; line-height:1.5; color:var(--texto-secundario); text-wrap:pretty; }
.ei-fora .ei-partes { margin-top:10px; }
.ei-fora .ei-parte { background:color-mix(in srgb,var(--salvia) 9%,var(--superficie)); }
.ei-fora .ei-parte:hover { background:color-mix(in srgb,var(--salvia) 17%,var(--superficie)); }
.ei-selo {
  justify-self:start; display:inline-flex; align-items:center; margin-top:3px; padding:2px 9px; border-radius:999px;
  font-size:11px; font-weight:600; line-height:1.5; color:var(--texto-secundario); background:var(--superficie); box-shadow:var(--elev-1);
}
/* Sem notas: discreto. É uma informação, não um aviso. */
.ei-vazio {
  display:inline-flex; align-items:center; flex:none; padding:3px 10px; border-radius:999px;
  font-size:12px; font-weight:500; color:var(--texto-secundario);
  background:color-mix(in srgb,var(--salvia) 13%,var(--superficie));
}
.ei-sem-resultado { font-size:14px; color:var(--texto-secundario); padding:12px 4px; }
/* Enquanto a IA arruma notas novas pelo edital. */
.ei-a-arrumar { display:flex; align-items:center; gap:10px; margin:0; padding:10px 14px; border-radius:14px;
  font-size:13px; font-weight:600; color:var(--floresta); background:var(--superficie); box-shadow:var(--elev-1); }
.ei-a-arrumar__ponto { width:8px; height:8px; border-radius:50%; background:var(--esmeralda); animation:ei-pulsar 1.2s ease-in-out infinite; }
@keyframes ei-pulsar { 50% { opacity:.3; transform:scale(.7); } }
@media (prefers-reduced-motion: reduce) { .ei-a-arrumar__ponto { animation:none; } }
/* O seletor dos tópicos do edital, para corrigir a IA à mão (2026-10-12):
   o cartão do `escolher`, mais largo, com pesquisa e a numeração do edital. */
.ei-escolha { max-width:min(480px,calc(100vw - 32px)); width:100%; }
.ei-escolha__cab { min-width:0; }
.ei-escolha .disciplina-dialog__head { align-items:flex-start; }
.ei-escolha .disciplina-dialog__x { flex:none; width:46px; height:46px; margin:-7px -5px 0 0; }
.ei-escolha__parte { margin:4px 0 0; font-size:13px; line-height:1.4; color:var(--texto-secundario); overflow-wrap:anywhere; }
.ei-escolha__busca { display:flex; align-items:center; gap:8px; margin:0 4px 10px; padding:0 14px; min-height:46px; border-radius:999px;
  background:color-mix(in srgb,var(--menta) 40%,var(--superficie)); color:var(--texto-secundario); }
.ei-escolha__busca:focus-within { outline:2px solid var(--esmeralda); outline-offset:0; }
.ei-escolha__busca input { flex:1; min-width:0; height:44px; border:0; background:transparent; color:var(--texto); font:500 15px 'Plus Jakarta Sans',system-ui,sans-serif; outline:none; }
.ei-escolha__lista { max-height:min(56dvh,460px); }
.ei-escolha__opcao { align-items:flex-start; min-height:48px; padding:12px 12px 12px calc(12px + var(--nivel,0) * 18px); font-weight:500; font-size:14px; line-height:1.4; }
.ei-escolha__opcao[hidden] { display:none; }
.ei-escolha__opcao:disabled { cursor:default; opacity:.55; }
.ei-escolha__opcao:disabled:hover { background:transparent; }
.ei-escolha__opcao:focus-visible { outline:2px solid var(--esmeralda); outline-offset:-2px; }
.ei-escolha__num { flex:none; min-width:2.4em; color:var(--texto-secundario); font-weight:700; font-variant-numeric:tabular-nums; }
.ei-escolha__atual { flex:none; margin-left:auto; padding:2px 10px; border-radius:999px; background:color-mix(in srgb,var(--menta) 60%,var(--superficie)); font-size:12px; font-weight:700; color:var(--texto-secundario); }
.ei-escolha__vazio { margin:6px 12px 10px; font-size:14px; color:var(--texto-secundario); }
@media (prefers-reduced-motion: reduce) { .ei-parte, .ei-parte__seta, .ei-topico__cab, .ei-topico__seta, .ei-mais { transition:none; } }
@media (max-width: 599px) {
  .ei-topico { padding:12px 14px 4px; }
  .ei-partes { padding-left:0; }
  .ei-fora__texto { margin-left:0; }
  .ei-topico__cab--fixo .ei-vazio { margin-left:2.4em; }
}

@media (max-width: 899px) {
  .concurso-faixa { grid-template-columns:1fr; padding:20px; gap:14px; }
  .concurso-faixa__nome { font-size:25px; }
  .concurso-faixa__dias { display:flex; align-items:baseline; gap:8px; justify-items:start; text-align:left; }
  .concurso-faixa__dias strong { font-size:36px; }
  .concurso-faixa__dias span { margin-top:0; }
  .concurso-faixa--convite .btn { justify-self:start; }
  .concurso-progresso__cab { display:none; }
  /* Uma matéria por linha, como uma barra: nome e pronto em cima, as
     questões por baixo, a barra a toda a largura. Sem rótulos repetidos. */
  .concurso-progresso__lista { margin-top:8px; }
  .concurso-progresso__linha {
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"materia num" "questoes questoes" "barra barra";
    gap:4px 12px; align-items:baseline; padding:14px 0;
  }
  .concurso-progresso__linha:first-child { box-shadow:none; }
  .concurso-progresso__materia { grid-area:materia; font-size:14px; }
  .concurso-progresso__celula { display:contents; }
  .concurso-progresso__celula small { display:none; }
  .concurso-progresso__questoes { grid-area:questoes; display:block; padding-left:20px; font-size:12px; font-weight:500; color:var(--texto-secundario); }
  .concurso-progresso__num { grid-area:num; font-size:13px; font-weight:600; }
  .concurso-progresso__linha .bar { grid-area:barra; margin-top:6px; }
  .concurso-progresso__sufixo { display:inline; }
}
@media (min-width:900px) { .concurso-progresso__sufixo { display:none; } }
@media (max-width:899px), (min-width:900px) and (max-width:1180px) and (orientation:portrait) {
  .progresso-dominio--repetido { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .edital-grupo__seta { transition:none; }
}

/* A pílula "Pesquisar" do topo com o efeito dos cartões da atividade
   (2026-10-01, o Jeremy): vidro claro, contorno branco e uma aba verde em
   baixo. Vem no fim e com !important para ganhar ao "sem sombra no hover". */
.titlebar .titlebar__search,
.titlebar .titlebar__search:hover {
  background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.88)) !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), inset 0 -3px 0 color-mix(in srgb, #2E4A3B 32%, #fff),
    0 10px 24px -18px rgba(28,43,34,.45), 0 1px 3px rgba(28,43,34,.04) !important;
  transition:transform .18s ease, box-shadow .18s ease;
}
.titlebar .titlebar__search:hover { transform:translateY(-1px); }
.titlebar .titlebar__search:active {
  transform:translateY(1px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), inset 0 -1.5px 0 color-mix(in srgb, #2E4A3B 32%, #fff) !important;
}

/* ---------- Relevo (2026-10-02) ----------
   O efeito dos cartões da Atividade recente em todos os cartões e botões da
   app (pedido do Jeremy): brilho em cima, uma aba mais grossa em baixo e uma
   sombra suave que se levanta ao passar e afunda ao carregar.

   A sombra-base partilhada (--elev-1, e por ela --sh-ambient/--sh-soft) passa
   a ser o relevo, e assim todos os cartões que a usam ficam iguais de uma vez.
   A aba é translúcida (verde-floresta a 20%) para servir tanto um cartão
   branco como uma pasta colorida. As superfícies escuras (botão principal,
   chip ativo) levam uma aba escura. Vem no fim do ficheiro para ganhar às
   regras antigas; a app zera as bordas, por isso o contorno é sombra. */
:root {
  --relevo-aba: rgba(46, 74, 59, .2);
  --relevo-aba-forte: rgba(46, 74, 59, .3);
  --elev-1: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -3px 0 var(--relevo-aba),
    0 10px 26px -20px rgba(28,43,34,.45), 0 1px 3px rgba(28,43,34,.04);
  --relevo-levantado: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -4px 0 var(--relevo-aba-forte),
    0 16px 30px -20px rgba(28,43,34,.5), 0 1px 3px rgba(28,43,34,.04);
  --relevo-carregado: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1.5px 0 var(--relevo-aba),
    0 6px 16px -14px rgba(28,43,34,.4);
  --relevo-escuro: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -3px 0 rgba(0,0,0,.28),
    0 10px 22px -16px rgba(28,43,34,.55);
  --relevo-escuro-carregado: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1.5px 0 rgba(0,0,0,.28),
    0 6px 14px -12px rgba(28,43,34,.5);
  --relevo-vidro: linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.88));
}

/* Botões e chips. */
.btn, .chip { transition:transform .18s cubic-bezier(.2,.9,.24,1.1), box-shadow .18s ease, filter .15s ease, background-color .15s ease; }
.btn-primary, .chip.is-active { box-shadow:var(--relevo-escuro); }
.btn-ghost, .chip:not(.is-active) { background:var(--relevo-vidro); box-shadow:var(--elev-1); }
.btn-perigo { box-shadow:var(--relevo-escuro); }
.btn:hover:not(:disabled), .chip:hover { transform:translateY(-1px); }
.btn-ghost:hover:not(:disabled), .chip:not(.is-active):hover { box-shadow:var(--relevo-levantado); }
.btn:active:not(:disabled), .chip:active { transform:translateY(1px); }
.btn-primary:active:not(:disabled), .chip.is-active:active, .btn-perigo:active:not(:disabled) { box-shadow:var(--relevo-escuro-carregado); }
.btn-ghost:active:not(:disabled), .chip:not(.is-active):active { box-shadow:var(--relevo-carregado); }

/* Entrar, criar conta e recuperar (2026-10-19, pedido do Jeremy): os botões
   largos destas páginas seguem o padrão da app, o principal com o relevo
   escuro e o do Google com o vidro, em pílula como o resto. */
.btn-xl, .auth-google { border-radius:var(--raio-pilula); transition:transform .18s cubic-bezier(.2,.9,.24,1.1), box-shadow .18s ease, filter .15s ease, background-color .15s ease; }
.btn-xl { box-shadow:var(--relevo-escuro); }
.auth-google, .auth-google:hover { border:0; background:var(--relevo-vidro); box-shadow:var(--elev-1); }
.btn-xl:hover:not(:disabled), .auth-google:hover:not(:disabled) { transform:translateY(-1px); }
.auth-google:hover:not(:disabled) { box-shadow:var(--relevo-levantado); }
.btn-xl:active:not(:disabled), .auth-google:active:not(:disabled) { transform:translateY(1px); }
.btn-xl:active:not(:disabled) { box-shadow:var(--relevo-escuro-carregado); }
.auth-google:active:not(:disabled) { box-shadow:var(--relevo-carregado); }
.btn-xl:focus-visible, .auth-google:focus-visible { outline:2px solid var(--esmeralda); outline-offset:3px; }

/* Títulos do onboarding e das páginas de entrar: a letra do sistema
   (San Francisco, Segoe UI, Roboto), a que qualquer app usa (pedido do
   Jeremy, 2026-10-19). */
.wizard__heading, .auth-window__heading, .login-page .auth-window .auth-window__heading,
.welcome-card h1, .auth-confirmacao h2, .auth-loading h1, .auth-mobile__header h1,
.auth-mobile-form .auth-confirmacao h1, .auth-mobile-form .auth-confirmacao h2, .wizard__subtitulo-sistema {
  font-family:var(--f-titulo-sistema); font-weight:700; letter-spacing:-.02em;
}

/* Cartões que eram só contorno: passam ao relevo. */
.adicionar-youtube, .folha__opcao, .questoes-escolha, .quiz-opcao:not(.is-certa):not(.is-errada) {
  background:var(--relevo-vidro); box-shadow:var(--elev-1);
}
.folha__opcao { border-radius:var(--raio-input); padding:0 14px; }
.folha__opcao + .folha__opcao { margin-top:10px; }
body #leitor .lateral__card { border-color:transparent !important; box-shadow:var(--elev-1); }
/* No leitor, os botões em pílula ("Comparar com original", "O que devo
   saber?") também deixam o contorno pelo relevo; a cor é a do tema. */
body #leitor .lateral__orig, body #leitor .guia__pilula { border-color:transparent !important; box-shadow:var(--elev-1); }
body #leitor .guia__botao.is-ativo .guia__pilula { box-shadow:var(--relevo-escuro); }
/* Os cartões escuros levam a aba escura (a translúcida não se via). */
.card-lg.bg-floresta, .card.bg-floresta { box-shadow:var(--relevo-escuro); }
@media (min-width:1440px) {
  body .disc-card { border-color:transparent !important; box-shadow:var(--elev-1); }
}

/* Os cartões em que se carrega levantam-se e afundam como os da atividade. */
:is(a.card, a.card-outline, button.card-outline, a.card-lg, .adicionar-youtube, .folha__opcao,
  .questoes-escolha, .lateral__card, .disc-card, .plano-modo) {
  transition:transform .18s cubic-bezier(.2,.9,.24,1.1), box-shadow .18s ease;
}
:is(a.card, a.card-outline, button.card-outline, a.card-lg, .adicionar-youtube, .folha__opcao,
  .questoes-escolha, .plano-modo):hover { transform:translateY(-2px); box-shadow:var(--relevo-levantado); }
body #leitor .lateral__card:hover { transform:translateY(-2px); box-shadow:var(--relevo-levantado); filter:none; }
:is(a.card, a.card-outline, button.card-outline, a.card-lg, .adicionar-youtube, .folha__opcao,
  .questoes-escolha, .plano-modo):active, body #leitor .lateral__card:active { transform:translateY(1px); box-shadow:var(--relevo-carregado); }
@media (min-width:1440px) {
  body .disc-card:hover { transform:translateY(-2px); box-shadow:var(--relevo-levantado); }
  body .disc-card:active { transform:translateY(1px); box-shadow:var(--relevo-carregado); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .chip, :is(a.card, a.card-outline, button.card-outline, a.card-lg, .adicionar-youtube, .folha__opcao,
    .questoes-escolha, .lateral__card, .disc-card, .plano-modo) { transition:none; transform:none !important; }
}

/* ---------- Selecionar várias (selecao.js, 2026-10-19) ----------
   O quadradinho, a barra e o fundo de deslizar. Rato e toque decidem-se pelo
   que se tem na mão (#conteudo[data-sel-modo]), nunca pela largura. A app
   zera as bordas: o contorno do quadradinho é box-shadow inset. */
.sel-caixa {
  flex:none; display:grid; place-items:center; width:40px; height:40px; margin-left:6px; margin-right:-10px;
  border-radius:12px; background:transparent; cursor:pointer; position:relative; z-index:2;
}
.sel-caixa__quadrado {
  width:20px; height:20px; border-radius:6px; background:var(--superficie);
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--texto-secundario) 70%, transparent);
  display:grid; place-items:center; transition:background-color .12s ease, box-shadow .12s ease;
}
.sel-caixa:hover .sel-caixa__quadrado { box-shadow:inset 0 0 0 2px var(--floresta); }
.sel-caixa:focus-visible { outline:2px solid var(--esmeralda); outline-offset:-2px; }
.sel-caixa[aria-checked="true"] .sel-caixa__quadrado,
.sel-caixa[aria-checked="mixed"] .sel-caixa__quadrado { background:var(--floresta); box-shadow:none; }
.sel-caixa[aria-checked="true"] .sel-caixa__quadrado::after {
  content:""; width:10px; height:5px; margin-top:-3px; transform:rotate(-45deg);
  box-shadow:inset 2px -2px 0 0 var(--superficie);
}
.sel-caixa[aria-checked="mixed"] .sel-caixa__quadrado::after { content:""; width:10px; height:2px; border-radius:1px; background:var(--superficie); }
/* Com rato, o quadradinho só aparece com o rato na linha (ou no foco do
   teclado) e fica à vista depois de marcado (pedido do Jeremy). O lugar fica
   guardado: a linha não salta quando ele aparece. */
#conteudo[data-sel-modo="rato"] .sel-linha > .sel-caixa { opacity:0; transition:opacity .12s ease; }
#conteudo[data-sel-modo="rato"] .sel-linha:hover > .sel-caixa,
#conteudo[data-sel-modo="rato"] .sel-linha > .sel-caixa:focus-visible,
#conteudo[data-sel-modo="rato"] .sel-linha > .sel-caixa[aria-checked="true"] { opacity:1; }
/* Cada tipo de linha encosta o resto ao quadradinho. */
.sel-linha > .sel-caixa + .disciplina-item__link { padding-left:12px; }
.anotacao-item.sel-linha:has(> .sel-caixa) { padding-left:6px; }
.ei-linha > .sel-caixa { margin-left:-6px; margin-right:0; }

/* Toque: o quadradinho só aparece com a seleção aberta; carregar e manter não
   pode selecionar texto nem abrir o menu do sistema. */
#conteudo[data-sel-modo="toque"] .sel-caixa { display:none; }
#conteudo[data-sel-modo="toque"][data-sel-ativa] .sel-caixa { display:grid; pointer-events:none; }
#conteudo[data-sel-modo="toque"] .sel-linha {
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; touch-action:pan-y;
}
#conteudo[data-sel-modo="toque"] .sel-linha--a-deslizar { z-index:3; }
#conteudo[data-sel-modo="toque"] .sel-linha.ei-linha { position:relative; background:var(--superficie); border-radius:14px; }

/* O fundo de deslizar: atrás da linha, com o que vai acontecer escrito. */
.sel-fundo {
  position:absolute; z-index:0; display:flex; align-items:center; padding:0 22px; pointer-events:none;
  color:#fff; font-size:14px; font-weight:700; background:var(--texto-secundario); transition:filter .12s ease;
}
.sel-fundo[data-lado="esquerda"] { justify-content:flex-end; }
.sel-fundo[data-cor="perigo"] { background:var(--perigo); }
.sel-fundo[data-cor="aviso"] { background:var(--aviso); }
.sel-fundo[data-cor="calmo"] { background:var(--floresta); }
.sel-fundo:not([data-passou="1"]) .sel-fundo__rotulo { opacity:.72; }
.sel-fundo[data-passou="1"] .sel-fundo__rotulo { transform:scale(1.06); }
.sel-fundo__rotulo { display:inline-flex; align-items:center; gap:8px; transition:transform .12s ease, opacity .12s ease; }

/* A barra. Com rato fica por cima da lista, presa ao rolar; com toque fica
   em baixo, no lugar da fila de ações da disciplina. */
.sel-barra {
  display:flex; align-items:center; gap:6px; padding:6px 8px 6px 6px; border-radius:20px;
  background:var(--superficie); box-shadow:var(--elev-2); color:var(--texto);
}
.sel-barra[hidden] { display:none; }
.sel-barra .sel-caixa { margin:0; }
.sel-barra__conta { flex:1; min-width:0; font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sel-barra__sair { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:transparent; color:var(--texto-secundario); cursor:pointer; }
.sel-barra__sair:hover { background:color-mix(in srgb, var(--salvia) 18%, var(--superficie)); color:var(--texto); }
.sel-barra__acao {
  flex:none; display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 16px; border-radius:var(--raio-pilula);
  background:var(--floresta); color:var(--superficie); font-size:14px; font-weight:700; cursor:pointer;
}
.sel-barra__acao--perigo { background:var(--perigo); color:#fff; }
.sel-barra__acao:disabled { opacity:.45; cursor:default; }
.sel-barra[data-modo="rato"] { position:sticky; top:8px; z-index:8; margin-top:16px; margin-bottom:-8px; }
@media (min-width:1440px) { .sel-barra[data-modo="rato"] { top:92px; } }
.sel-barra[data-modo="toque"] {
  position:fixed; z-index:61; left:calc(var(--sb-w,0px) + 16px); right:16px; margin-inline:auto; max-width:560px;
  bottom:calc(16px + env(safe-area-inset-bottom,0px)); min-height:60px; border-radius:26px; padding:8px 8px 8px 6px;
  box-shadow:0 14px 34px -12px rgba(28,43,34,.42), 0 0 0 1px rgba(28,43,34,.06);
}
.sel-barra[data-modo="toque"] .sel-barra__acao { height:44px; padding:0 20px; }
.sel-barra[data-modo="toque"] .sel-barra__sair, .sel-barra[data-modo="toque"] .sel-caixa { width:44px; height:44px; }
@media (max-width:899px) { .sel-barra[data-modo="toque"] { left:10px; right:10px; bottom:calc(68px + env(safe-area-inset-bottom,0px) + 10px); } }
/* Com a seleção do toque aberta, a fila de ações sai do caminho. */
body[data-selecao="toque"] .disc-acoes, body[data-selecao="toque"] #btn-ver-flashcards { visibility:hidden; }
@media (prefers-reduced-motion: reduce) { .sel-caixa, .sel-caixa__quadrado, .sel-fundo, .sel-fundo__rotulo { transition:none; } }