/* ==========================================================================
   Casca mobile global (<= 900px).
   Referência: protótipos frozen de Desempenho v26, Simulados r5 e Configurações v1.
   - a sidebar compacta some e o menu vira um drawer lateral com backdrop;
   - o topo passa a ser [☰] título [toggle de tema] em uma linha;
   - botão "voltar ao topo" aparece após rolar a página.
   Carregado por último em index.html: styles.css tem overrides !important de body/.sidebar/.nav-btn
   (mvp76), então as regras de shell abaixo precisam do mesmo peso dentro do breakpoint.
   Cores vêm dos tokens de design-system.css, então tema claro/escuro vale sem regras extras.
   ========================================================================== */

.topbar-leading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mobile-menu-trigger,
.mobile-drawer,
.mobile-menu-backdrop,
.scroll-top-btn {
  display: none;
}

/* Símbolo da marca no topo do trilho (desktop). Só o símbolo, sem ladrilho: o ladrilho fica para favicon e ícone. */
.sidebar-brand {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 8px 0 24px;
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
}

@media (max-width: 900px) {
  body {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.menu-open {
    overflow: hidden;
  }

  .sidebar {
    display: none !important;
  }

  /* Padding inferior maior: o botão flutuante do Focus Timer (66px + 24px de margem) fica fixo no centro
     inferior e não pode cobrir o último bloco de conteúdo. */
  .app-shell {
    padding: 14px max(14px, env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)) !important;
  }

  .topbar {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 8px !important;
  }

  .topbar-leading {
    flex: 1 1 auto;
  }

  .topbar-leading > div {
    min-width: 0;
  }

  /* CS-2: título da aba em 18 px, sem o ícone; o bloco "CS-2" no fim do arquivo define o resto do topo. */
  .topbar h1 {
    font-size: 18px;
    line-height: 1.2;
  }

  #pageTitle {
    max-width: 100%;
  }

  .theme-toggle {
    align-self: center;
    margin-left: auto;
  }

  /* Cabeçalho de página compartilhado: no desktop ele é deslocado por transform e compensado por
     --page-content-offset; no mobile isso só cria espaço morto. Título menor (frozen Simulados: 15px/11.5px,
     aqui um pouco maior por não haver a barra do protótipo) e ações abaixo do texto. Cabeçalhos com override
     próprio (Edital, Questões, Home) são tratados na fase da respectiva tela. */
  :root {
    --page-content-offset: var(--page-gap);
  }

  /* Sempre em coluna (título, depois ações). Antes era flex-wrap com filhos de flex: 1 1 100%: em cabeçalhos cujo CSS
     legado já usa flex-direction: column (Revisões, Questões, Edital) o wrap criava uma segunda COLUNA e as ações iam
     para a direita, fora da tela. */
  .page-context-head {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
  }

  .page-context-head.page-context-head.page-context-head .page-context-title-lockup {
    flex: 0 0 auto;
    transform: none;
  }

  /* Classe repetida de propósito: Edital e Questões têm override legado ".x-head.page-context-head .page-context-copy h2"
     (22px/15px) que empatava em especificidade e deixava o título maior que nas demais abas. */
  /* Os tamanhos do título (17 px) e do subtítulo (13 px) valem em todas as larguras: ver o bloco CS-2 no fim do arquivo. */

  .page-context-actions {
    flex: 0 0 auto;
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
    transform: none;
  }

  /* Overlay do Focus Timer (timer livre e modo missão). No desktop engrenagem e fechar ficam à direita na mesma
     altura das abas Timer/Cronômetro/Pomodoro; no celular isso as sobrepõe. Aqui os dois botões formam a 1ª faixa
     (menores, no canto) e as abas do timer livre descem para a 2ª. O modo missão organiza as demais faixas em
     recovery-mission.css. */
  .focus-overlay .focus-close,
  .focus-overlay .focus-config-button {
    top: max(10px, env(safe-area-inset-top));
    width: 38px;
    height: 38px;
  }

  .focus-overlay .focus-close {
    right: max(14px, env(safe-area-inset-right));
    font-size: 22px;
  }

  .focus-overlay .focus-config-button {
    right: calc(max(14px, env(safe-area-inset-right)) + 46px);
    font-size: 16px;
  }

  /* Painéis do timer ("Definir tempo", "Configurações do timer"): no desktop ficam à direita, centralizados na vertical, e
     a animação termina em translateY(-50%). O painel de áudio tem ~560px e passava do topo da tela (cortado e sob as
     abas). Aqui vira uma folha embaixo, com altura máxima e rolagem própria, sem a translação. */
  /* O palco flutua com transform, o que vira o bloco de contenção do position: fixed do painel; parado enquanto há painel, e acima dos controles (z-index 3). */
  .focus-overlay .focus-stage:has(.focus-settings-panel) {
    z-index: 4;
    transform: none !important;
    animation: none !important;
  }

  .focus-overlay .focus-settings-panel {
    z-index: 20;
    position: fixed;
    inset: auto 12px max(12px, env(safe-area-inset-bottom)) 12px;
    width: auto;
    max-height: calc(100dvh - 104px);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: none;
    animation: focus-sheet-in 220ms ease both;
  }

  .focus-overlay:not(.focus-mission-mode) {
    padding-top: 62px;
  }

  .focus-overlay:not(.focus-mission-mode) .focus-mode-selector {
    gap: 22px;
    padding: 6px 12px;
  }

  .focus-overlay:not(.focus-mission-mode) .focus-mode-selector button {
    font-size: 13px;
  }

  .status-area {
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    left: 12px;
    max-width: none;
  }

  .mobile-menu-trigger {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    /* CS-1: a barra superior perde a moldura do botão do menu (sem borda, fundo e sombra). */
    border: 0;
    border-radius: 11px;
    background: transparent;
    box-shadow: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--motion-fast) ease-out, border-color var(--motion-fast) ease-out;
  }

  .mobile-menu-trigger svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-menu-trigger:active {
    background: var(--primary-2);
  }
  .mobile-menu-trigger:focus-visible,
  .mobile-drawer-close:focus-visible,
  .drawer-nav-item:focus-visible,
  .scroll-top-btn:focus-visible {
    outline: 2px solid rgba(139, 92, 246, 0.7);
    outline-offset: 2px;
  }

  .mobile-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-drawer) + 9);
    background: var(--drawer-backdrop);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
  }

  .mobile-menu-backdrop.open {
    opacity: 1;
    visibility: visible;
  }

  .mobile-drawer {
    display: flex;
    position: fixed;
    z-index: calc(var(--z-drawer) + 10);
    top: 0;
    bottom: 0;
    left: 0;
    width: min(84vw, 320px);
    padding: max(14px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    flex-direction: column;
    background: linear-gradient(180deg, var(--drawer-1), var(--drawer-2));
    border-right: 1px solid var(--drawer-border);
    box-shadow: 24px 0 54px rgba(0, 0, 0, 0.36);
    transform: translateX(-104%);
    visibility: hidden;
    /* Fechar: o visibility só vira hidden depois do slide (0.24s de atraso). */
    transition: transform 0.24s cubic-bezier(0.2, 0.72, 0.2, 1), visibility 0s linear 0.24s;
  }

  /* Abrir: visível imediatamente, para que o foco possa entrar no drawer assim que ele abre. */
  .mobile-drawer.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.24s cubic-bezier(0.2, 0.72, 0.2, 1), visibility 0s;
  }

  .mobile-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 12px 8px;
    border-bottom: 1px solid var(--sidebar-border);
  }

  .mobile-drawer-brand {
    display: flex;
    color: var(--ink);
    font-size: 22px;
    line-height: 1;
  }

  .mobile-drawer-brand b {
    color: var(--magenta);
    font-weight: 800;
  }

  .mobile-drawer-close {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
  }

  .mobile-drawer-close svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }

  .mobile-drawer-close:active {
    background: var(--primary-2);
    color: var(--ink);
  }

  .mobile-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .drawer-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 12px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--motion-fast) ease-out;
  }

  .drawer-nav-item .drawer-nav-icon {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    place-items: center;
    color: #e879f9;
  }

  .drawer-nav-item .drawer-nav-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .drawer-nav-item.active {
    color: var(--ink);
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.23), rgba(139, 92, 246, 0.08));
    box-shadow: inset 2px 0 0 var(--magenta);
  }

  .drawer-nav-item:active {
    background: rgba(139, 92, 246, 0.13);
  }

  .scroll-top-btn {
    position: fixed;
    z-index: 48;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid var(--card-border);
    border-radius: 50%;
    background: var(--surface-elevated);
    color: var(--text-secondary);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.33);
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px) scale(0.92);
    pointer-events: none;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  }

  .scroll-top-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .scroll-top-btn.visible {
    display: grid;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* Faixa 901–1120px (tablet paisagem). A regra legada de <= 1120px (styles.css) foi escrita para a sidebar larga antiga:
   torna a sidebar estática e o menu uma grade de 2 colunas, mas o override mvp76 mantém a sidebar em 98px, então os
   botões de 76px se sobrepunham; e o topo virava coluna, jogando o toggle de tema para baixo do título. Aqui a
   sidebar compacta volta a ser fixa, o menu em uma coluna e o topo em linha. */
@media (min-width: 901px) and (max-width: 1120px) {
  .sidebar {
    position: sticky;
    top: 0;
    min-height: 100vh;
  }

  #nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .topbar {
    flex-direction: row;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-drawer,
  .mobile-menu-backdrop,
  .mobile-menu-trigger,
  .drawer-nav-item,
  .scroll-top-btn {
    transition: none !important;
  }
}

/* ==========================================================================
   Drawers do app (.ds-app-drawer: filtros, gerenciar editais, pontos de atenção, revisão livre…) no celular.
   Padrão adotado das confirmações de Configurações: painel centralizado, do tamanho do conteúdo e com margem, em vez
   de cobrir a tela inteira (altura 100vh - 16px). O corpo rola quando o conteúdo passa da altura máxima. A entrada
   é um fade com leve subida (o desktop mantém o slide lateral).
   ========================================================================== */
@media (max-width: 900px) {
  .ds-app-drawer-backdrop {
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }

  .ds-app-drawer {
    width: min(100%, 520px);
    height: auto;
    max-height: calc(100dvh - 32px);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
    animation: ds-sheet-in 240ms cubic-bezier(0.2, 0.72, 0.2, 1) both;
  }

  .ds-app-drawer-backdrop--left .ds-app-drawer {
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
    animation-name: ds-sheet-in;
  }

  /* Rodapé: três botões ("Limpar filtros", "Cancelar", "Aplicar filtros") não cabem numa linha de ~310px. */
  .ds-app-drawer-footer,
  .ds-app-drawer-footer .dialog-actions {
    flex-wrap: wrap;
  }

  .ds-app-drawer-footer .dialog-actions > * {
    flex: 1 1 auto;
    min-height: 44px;
  }

  /* Modo missão: o cabeçalho (selo, engrenagem/fechar, etapas e "0 de 3 concluídas") é fixo sobre o conteúdo que rola e
     não tinha fundo, então o texto passava por baixo dele; a faixa abaixo o cobre. Os botões do timer ficam abaixo do
     círculo em vez de por cima do anel. */
  .focus-overlay.focus-mission-mode::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 3;
    height: 140px;
    pointer-events: none;
    background: linear-gradient(180deg, #050814 0, #050814 92%, rgba(5, 8, 20, 0));
  }

  .focus-mission-center {
    min-height: 470px;
  }

  .focus-mission-center .focus-stage {
    aspect-ratio: auto !important;
    height: auto !important;
    padding-bottom: 76px;
  }

  .focus-mission-center .focus-circle {
    width: min(100%, 300px) !important;
    height: auto !important;
    aspect-ratio: 1;
  }

  /* Modo missão: contador maior (é o dado principal) e o restante menor e mais compacto. */
  .focus-mission-center .focus-inner strong { font-size: 58px; }
  .focus-mission-center .focus-inner small { font-size: 12px; letter-spacing: .14em; }
  .focus-mission-top > span { font-size: 8.5px; }
  .focus-mission-top i { width: 28px; height: 28px; font-size: 12px; }
  .focus-mission-progress { margin-top: 7px; font-size: 10px; }
  .focus-mission-tip { gap: 10px; min-height: 0; padding: 8px 10px 8px 12px; }
  .focus-mission-tip b { font-size: 12.5px; }
  .focus-mission-tip small { font-size: 11.5px; line-height: 1.3; }
  .focus-mission-tip button { min-height: 30px; padding: 5px 10px; font-size: 12px; }
  .focus-mission-panel { padding: 12px; }
  .focus-mission-current { padding: 12px 12px 10px; }
  .focus-mission-current h4 { font-size: 15px; }
  .focus-mission-review-title { gap: 10px; margin-top: 12px; }
  .focus-mission-review-title > span { flex-basis: 36px; width: 36px; height: 36px; }
  .focus-mission-review-title svg { width: 18px; height: 18px; }
  .focus-mission-next .focus-mission-review-title { margin-top: 10px; }
  .focus-mission-next-head small,
  .focus-mission-plan-head h3 { font-size: 11px; }
  .focus-mission-next-head > span { font-size: 12px; }
  .focus-mission-plan-head span { font-size: 11px; }
  .focus-mission-plan-list button { padding: 4px 6px; font-size: 12px; }
  .focus-mission-reasons summary { min-height: 40px; padding: 8px 12px; }
  .focus-mission-reasons summary strong { font-size: 12.5px; }
  .focus-mission-factors li p,
  .focus-mission-reasons-body > p { font-size: 12px; }

  .focus-mission-center .focus-stage .focus-controls {
    top: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Centro de Recuperação: as regras legadas reservam 82–110px à esquerda para a sidebar, que no celular é um drawer; o
     painel ocupa a tela toda (altura dinâmica, para a barra do navegador). */
  .recovery-center-backdrop {
    inset: 0;
    padding: 0;
  }

  .recovery-center-panel {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    border-radius: 0;
  }

  /* Centro de Recuperação mais compacto: cabeçalho, etapas, relógio, opções de tempo, botões e resumo do plano menores; o
     painel "seu plano aparecerá aqui" (só um esqueleto) não ocupa a tela antes de haver plano. */
  .recovery-center-header { padding: 10px 12px; }
  .recovery-center-header h2 { font-size: 16px; }
  .recovery-center-header .ghost,
  .recovery-center-header .recovery-center-close { width: 34px; height: 34px; min-height: 34px; }
  .recovery-center-steps { margin: 0 12px 8px; }
  /* flex: 0 0 36px do desktop com width 30px deixava o marcador oval; largura e altura iguais e sem encolher. */
  .recovery-step-marker { flex: 0 0 30px; width: 30px; height: 30px; min-width: 30px; aspect-ratio: 1; font-size: 13px; }
  .recovery-config-panel { padding: 14px; gap: 10px; }
  .recovery-clock-visual { width: 56px; height: 56px; }
  .recovery-clock-visual .review-icon { width: 56px; height: 56px; }
  .recovery-config-copy { gap: 6px; }
  .recovery-config-copy p { font-size: 13px; line-height: 1.35; }
  .recovery-duration-grid { gap: 8px; }
  .recovery-duration-choice { min-height: 50px; height: auto; padding: 6px; }
  .recovery-duration-choice strong { font-size: 18px; }
  .recovery-tip { padding: 10px 12px; }
  .recovery-tip p { font-size: 12.5px; line-height: 1.35; }
  .recovery-generate-button { min-height: 54px; margin-top: 8px; padding: 8px 12px; }
  .recovery-generate-button > .review-icon:first-child { width: 22px; height: 22px; }
  .recovery-generate-button small { margin-top: 1px; font-size: 10.5px; }
  .recovery-center-panel:not([data-stage="plan"]):not([data-stage="generating"]):not([data-stage="error"]) .recovery-plan-panel { display: none; }
  .recovery-center-panel[data-stage="plan"] .recovery-config-copy,
  .recovery-center-panel[data-stage="plan"] .recovery-tip { display: none; }
  .recovery-plan-panel { padding: 14px; }
  .recovery-plan-success-head h2 { font-size: 18px; }
  .recovery-plan-success-head p { font-size: 12.5px; }
  .recovery-plan-summary { align-items: stretch; }
  .recovery-plan-summary > div,
  .recovery-plan-summary .recovery-impact-summary > div { padding: 8px 10px; gap: 8px; min-height: 0; height: 100%; }
  .recovery-plan-summary .review-icon,
  .recovery-plan-summary > div:not(.recovery-impact-summary) > .review-icon { width: 28px; height: 28px; }
  .recovery-plan-summary strong { font-size: 18px; }
  .recovery-plan-summary small { font-size: 10.5px; line-height: 1.2; }

  /* Plano do Centro de Recuperação: a linha de 6–9 colunas cortava o nome do tópico e jogava a lixeira para uma 2ª linha.
     No celular cada item é um cartão compacto: 1ª linha com posição, prioridade, tipo da revisão, tempo estimado, "IUR n"
     e remover; 2ª o assunto com hierarquia (título do subtópico/tópico em destaque e, abaixo, "Disciplina > Tópico").
     Reordenar por arrasto não existe no toque (escondido). */
  .recovery-plan-row {
    grid-template-columns: 22px auto auto auto minmax(0, 1fr) auto auto;
    grid-auto-flow: row;
    align-items: center;
    gap: 3px 6px;
    padding: 8px 10px;
  }

  .recovery-plan-row > .recovery-plan-position { grid-column: 1; grid-row: 1; width: 22px; height: 22px; font-size: 11px; }
  .recovery-plan-row > .review-level-badge { grid-column: 2; grid-row: 1; padding: 2px 8px; font-size: 10.5px; }
  .recovery-plan-row > .review-type-badge { display: inline-flex; grid-column: 3; grid-row: 1; padding: 2px 6px; font-size: 10.5px; }
  .recovery-plan-row > .recovery-plan-duration { display: inline-flex; grid-column: 4; grid-row: 1; align-items: center; gap: 3px; font-size: 11.5px; white-space: nowrap; }
  .recovery-plan-row > .recovery-plan-duration svg { width: 13px; height: 13px; }
  .recovery-plan-row > .recovery-plan-iur { display: inline-flex; flex-direction: row-reverse; align-items: baseline; gap: 4px; grid-column: 6; grid-row: 1; }
  .recovery-plan-row > .recovery-plan-iur strong { font-size: 14px; }
  .recovery-plan-row > .recovery-plan-iur small { display: inline; color: var(--muted, #8793a7); font-size: 9.5px; font-weight: 600; letter-spacing: .06em; }
  .recovery-plan-row > .recovery-plan-exclude { grid-column: 7; grid-row: 1; min-width: 32px; min-height: 32px; width: 32px; height: 32px; }
  .recovery-plan-row > .recovery-plan-content,
  .recovery-plan-row > .recovery-plan-discipline { display: none; }
  .recovery-plan-row > .recovery-plan-subject { display: grid; grid-column: 1 / -1; grid-row: 2; gap: 1px; min-width: 0; }
  .recovery-plan-row > .recovery-plan-subject strong { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.25; }
  .recovery-plan-row > .recovery-plan-subject small { display: -webkit-box; overflow: hidden; color: var(--text-secondary, #98a5b8); font-size: 11.5px; font-weight: 400; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .recovery-plan-row > .recovery-plan-drag { display: none; }

  /* Detalhes da revisão (IUR): o fundo reserva 360px à direita e 100px embaixo para o desktop, o que deixava o painel com
     ~46px de largura. Mesmo modelo dos demais drawers: centralizado, com altura máxima e rolagem própria. */
  .review-drawer-backdrop {
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }

  .review-details-drawer {
    width: min(100%, 520px);
    max-height: calc(100dvh - 32px);
    border-radius: 16px;
    animation: ds-sheet-in 240ms cubic-bezier(0.2, 0.72, 0.2, 1) both;
  }
}

/* Mensagens (toasts): ficavam atrás dos drawers (z-index 100 < 120+), então erros disparados com um drawer aberto, como
   "não é possível excluir o edital ativo", não eram vistos. Acima de drawers e diálogos, em qualquer largura. */
.status-area { z-index: 400; }

@keyframes focus-sheet-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Menu lateral (desktop, > 900px): mais compacto (botões e espaçamento menores) com rótulos um pouco maiores, e fixo ao
   rolar. A sidebar era "sticky", mas esticada até a altura da página (item de grade com align-self: stretch), então
   rolava junto com o conteúdo; agora tem a altura da janela e rola por dentro se o menu não couber.
   ========================================================================== */
@media (min-width: 901px) {
  .sidebar {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: 12px 6px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none;
  }

  .sidebar::-webkit-scrollbar { display: none; }

  #nav { gap: 4px !important; }

  .nav-btn {
    width: 86px !important;
    min-height: 58px !important;
    padding: 6px 3px !important;
    grid-template-rows: 26px auto !important;
    gap: 3px !important;
  }

  .nav-btn small {
    max-width: 82px !important;
    font-size: 10.3px !important;
    letter-spacing: 0 !important;
  }

  .nav-btn .nav-icon,
  .nav-btn span { width: 26px !important; height: 26px !important; }

  .nav-btn .nav-icon svg { width: 24px !important; height: 24px !important; }
}

/* ==========================================================================
   Escurecimento padrão dos overlays: o mesmo do filtro de Desempenho (--drawer-backdrop, sem desfoque) em drawers,
   diálogos, planejamento, Centro de Recuperação e registro de estudo (inclusive o que abre ao terminar o Focus). Só a
   tela do Focus Timer (e os diálogos sobre ela) mantém o escurecimento próprio.
   ========================================================================== */
.ds-app-drawer-backdrop,
.review-drawer-backdrop,
.planning-drawer-backdrop,
.recovery-center-backdrop,
body:not(.focus-registering) .modal-backdrop,
.study-session-backdrop {
  background: var(--drawer-backdrop) !important;
  backdrop-filter: none !important;
}

/* Registro ao terminar o Focus: o drawer aparece sobre o app com o mesmo escurecimento do "Registrar questões"; o
   escurecimento total fica só para a tela do Focus, que volta se o registro for cancelado. */
body.focus-registering:has(.study-session-backdrop) .focus-overlay {
  visibility: hidden;
}

body.focus-registering:has(.study-session-backdrop) > .sidebar,
body.focus-registering:has(.study-session-backdrop) > .app-shell {
  filter: none;
}

/* Drawer ancorado estreito (informações curtas, ex.: "Saiba mais"). */
.ds-app-drawer.ds-anchored.ds-anchored-sm { width: min(420px, calc(100vw - 32px)); }

/* Focus Timer no celular: ele é o protagonista, então o botão de voltar ao topo não aparece enquanto está aberto. */
@media (max-width: 900px) {
  body.focus-mode-open .scroll-top-btn { display: none !important; }
}

/* Botões de fechar circulares: dentro de cabeçalhos flex o botão encolhia na largura (24x40 no drawer de Montar semana) e
   virava oval. Tamanho fixo, sem encolher e sempre quadrado, em toda a plataforma. */
.planning-drawer-close,
.review-drawer-close,
.ds-app-drawer-close,
.recovery-center-close,
.focus-settings-close {
  flex: 0 0 auto;
  min-width: 0;
  aspect-ratio: 1 / 1;
}

.planning-drawer-close { flex-basis: 34px; min-width: 34px; }
@media (max-width: 900px) {
  .planning-drawer-close { flex-basis: 40px; min-width: 40px; }
}

/* ==========================================================================
   CS-1 · Casca: seletor de tema em ícone e largura máxima do conteúdo.
   ========================================================================== */

/* Seletor de tema: um botão de ícone de traço, sem a chave em pílula, sem fundo nem borda (contorno só no foco por
   teclado). Alvo de 44 x 44 px, ícone de 18 px. Um ícone visível por vez: monitor quando a preferência é "sistema";
   senão sol no tema claro e lua no escuro. Classe repetida de propósito: styles.css tem regras do tema claro com
   mais peso (html[data-theme="light"] .theme-toggle). */
.topbar > .theme-toggle.theme-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  gap: 0;
  align-self: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--text-secondary);
}

.topbar > .theme-toggle.theme-toggle:hover {
  color: var(--ink);
}

.topbar > .theme-toggle.theme-toggle:focus-visible {
  outline: 2px solid rgba(139, 92, 246, 0.6);
  outline-offset: 2px;
}

.theme-toggle .theme-icon {
  display: none;
  width: 18px;
  height: 18px;
  opacity: 1;
}

/* styles.css colore lua e sol por aria-pressed (peso 0,3,0); o ícone único herda a cor do botão. */
.topbar > .theme-toggle.theme-toggle .theme-icon {
  color: inherit;
}

.theme-toggle .theme-moon,
html[data-theme="light"] .theme-toggle .theme-sun,
html[data-theme-mode="system"] .theme-toggle .theme-system {
  display: block;
}

html[data-theme="light"] .theme-toggle .theme-moon,
html[data-theme-mode="system"] .theme-toggle .theme-moon,
html[data-theme-mode="system"] .theme-toggle .theme-sun {
  display: none;
}

/* CS-2: o tema fica centrado na altura do topo em todas as larguras, ao lado do botão da conta (bloco CS-2 abaixo). */

/* Largura máxima (BC-3): notebooks até 1920 px usam a largura toda; telas maiores ganham espaço lateral. Vale para as 11
   abas, inclusive Desempenho, Simulados e Configurações (telas Frozen como referência visual: só a largura). O topo e
   as seções .view ficam na mesma coluna, centralizados à direita do menu fixo. */
@media (min-width: 901px) {
  .app-shell > .topbar,
  .app-shell > .view {
    width: 100%;
    max-width: 1728px;
    margin-inline: auto;
  }
}

/* ==========================================================================
   CS-2 · Topo, menu da conta e menu lateral.
   Topo: título da aba | tema | divisória | botão da conta (sem faixa nem filete). O menu da conta (#accountMenu) é um
   painel de 288 px ancorado ao botão com mouse e uma folha de baixo no celular ou no toque. O topo só fica preso à tela
   no celular (<= 900 px) enquanto a vista Minha conta está ativa (CS-5): ele e as sub-abas rolam juntos, com
   --account-sticky-top = 56 px (altura do topo) para as abas ficarem coladas logo abaixo. Nas demais abas e no
   computador o topo rola com a página e --account-sticky-top segue em 0.
   ========================================================================== */

.topbar {
  position: relative;
}

.topbar-leading {
  flex: 1 1 auto;
}

.topbar-leading > div {
  min-width: 0;
}

/* Título: uma linha só, com reticências se faltar espaço (nunca uma palavra sozinha na segunda linha). */
.topbar #pageTitle {
  display: block;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  font-size: 21px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-divider {
  display: none;
  flex: 0 0 auto;
  width: 1px;
  height: 22px;
  background: var(--sidebar-border);
}

/* Botão da conta: pílula de 38 px com avatar de 30 px, primeiro nome e seta. */
.account-trigger {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  align-self: center;
  gap: 8px;
  max-width: 220px;
  height: 38px;
  padding: 0 10px 0 4px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--motion-fast) ease-out, border-color var(--motion-fast) ease-out;
}

.account-trigger[aria-expanded="true"] {
  background: var(--primary-2);
}

.account-trigger:focus-visible,
.account-menu-item:focus-visible,
.drawer-account:focus-visible {
  outline: 2px solid rgba(139, 92, 246, 0.7);
  outline-offset: 2px;
}

.account-trigger-name {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-trigger-chevron,
.account-menu-icon,
.account-menu-go,
.drawer-account-go {
  flex: 0 0 auto;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-trigger-chevron {
  width: 14px;
  height: 14px;
}

.account-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--card-border);
  border-radius: 50%;
  background: var(--primary-2);
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1;
}

.account-avatar-lg {
  width: 42px;
  height: 42px;
  font-size: 14px;
}

@media (hover: hover) {
  .account-trigger:hover {
    border-color: rgba(139, 92, 246, 0.4);
    background: var(--primary-2);
  }
}

@media (min-width: 901px) {
  .topbar {
    align-items: center;
    gap: 12px;
    min-height: 52px;
  }

  .topbar > .theme-toggle.theme-toggle {
    align-self: center;
    margin-top: 0;
  }

  .topbar-divider {
    display: block;
  }
}

/* Menu da conta: escurecimento por cima de tudo (inclusive o trilho) e painel acima dele. Fechado fica invisível; o
   visibility só atrasa ao fechar, para o foco entrar no painel assim que ele abre. */
.account-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) + 9);
  background: var(--drawer-backdrop);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-out, visibility 0s linear 0.2s;
}

.account-menu-backdrop.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease-out, visibility 0s;
}

.account-menu {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  z-index: calc(var(--z-drawer) + 10);
  box-sizing: border-box;
  width: 288px;
  max-width: calc(100vw - 24px);
  padding: 6px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--surface-elevated);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.14s ease-out, transform 0.14s ease-out, visibility 0s linear 0.14s;
}

.account-menu.open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.14s ease-out, transform 0.14s ease-out, visibility 0s;
}

html[data-theme="light"] .account-menu {
  box-shadow: 0 14px 34px rgba(39, 30, 57, 0.14);
}

.account-menu-grab {
  display: none;
}

.account-menu-head {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 10px 10px 12px;
}

.account-menu-id {
  display: grid;
  min-width: 0;
}

.account-menu-id b,
.account-menu-id small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-id b {
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}

.account-menu-id small {
  color: var(--muted);
  font-size: 12px;
}

/* Sem nome de exibição o título já é o e-mail: a linha de baixo (data-has-name definido por account-menu.js) some. */
.account-menu[data-has-name="false"] .account-menu-id small {
  display: none;
}

.account-menu-plan {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 10px 8px;
  padding-top: 8px;
  border-top: 1px solid var(--sidebar-border);
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.account-menu-plan strong {
  color: var(--text-secondary);
  font-weight: 600;
}

.account-menu-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.account-menu-item > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-menu-item:focus-visible {
  outline-offset: -2px;
  background: var(--primary-2);
}

.account-menu-item:active {
  background: var(--primary-2);
}

@media (hover: hover) {
  .account-menu-item:hover {
    background: var(--primary-2);
  }
}

.account-menu-item-out {
  color: var(--muted);
}

/* PL-3: o item Testes nasce hidden e só aparece com a flag planning_lab; display:flex acima venceria o [hidden]. */
.account-menu-item[hidden] {
  display: none;
}

.account-menu-tag {
  flex: none;
  margin-left: auto;
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.account-menu-icon {
  width: 17px;
  height: 17px;
}

.account-menu-go {
  display: none;
  width: 14px;
  height: 14px;
  margin-left: auto;
}

.account-menu-sep {
  height: 1px;
  margin: 6px 4px;
  background: var(--sidebar-border);
}

/* Celular ou toque: folha de baixo de largura total, colada no fundo, com puxador e itens de 48 px. */
@media (max-width: 900px), (pointer: coarse) {
  body.account-menu-open {
    overflow: hidden;
  }

  .account-menu {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 12px calc(14px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.35);
    opacity: 1;
    transform: translateY(100%);
    transition: transform 0.26s cubic-bezier(0.2, 0.72, 0.2, 1), visibility 0s linear 0.26s;
  }

  .account-menu.open {
    transform: none;
    transition: transform 0.26s cubic-bezier(0.2, 0.72, 0.2, 1), visibility 0s;
  }

  .account-menu.is-dragging {
    transition: none;
  }

  /* CS-5: a folha inteira recebe o arrasto para baixo (account-menu.js), então o navegador não pode rolar nem puxar a
     página por baixo. O fundo também, para o gesto de rolar a página por trás não competir no Safari do iPhone. */
  .account-menu,
  .account-menu-backdrop {
    touch-action: none;
  }

  html[data-theme="light"] .account-menu {
    box-shadow: 0 -14px 40px rgba(39, 30, 57, 0.16);
  }

  /* Puxador: a área de toque tem 32 px de altura; a barrinha visual (38 x 4 px, no ::before) fica no mesmo lugar de
     antes e as margens negativas compensam a altura extra, então o menu não muda de altura. */
  .account-menu-grab {
    position: relative;
    display: block;
    width: 38px;
    height: 32px;
    margin: -8px auto -8px;
    touch-action: none;
  }

  .account-menu-grab::before {
    content: "";
    position: absolute;
    top: 10px;
    right: 0;
    left: 0;
    height: 4px;
    border-radius: 99px;
    background: var(--text-muted);
    opacity: 0.55;
  }

  .account-menu-head {
    touch-action: none;
  }

  .account-menu-item {
    min-height: 48px;
    font-size: 15px;
  }

  .account-menu-icon {
    width: 19px;
    height: 19px;
  }

  .account-menu-go {
    display: block;
  }
}

/* Celular: só o avatar no topo (alvo de toque de 44 px), título de 18 px, altura de 56 px. */
@media (max-width: 900px) {
  .topbar {
    gap: 0;
    min-height: 56px;
  }

  /* CS-5 · Minha conta: o topo inteiro (☰, título, tema, iniciais) fica preso junto com as sub-abas. Fundo sólido (o mesmo
     --bg das sub-abas) e sangrando até as bordas da tela, para o conteúdo não aparecer por baixo nem pelos lados. As abas
     (configuracoes.css) usam top: var(--account-sticky-top) e ficam coladas logo abaixo, sem vão. */
  body:has(#view-availability.active) {
    --account-sticky-top: 56px;
  }

  body:has(#view-availability.active) .topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    margin: 0 calc(-1 * max(14px, env(safe-area-inset-right))) 0 calc(-1 * max(14px, env(safe-area-inset-left))) !important;
    padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
    background: var(--bg);
    transition: z-index 0s linear 0.3s;
  }

  /* O menu da conta mora dentro do topo, que vira um contexto de empilhamento: com o menu aberto o topo sobe acima do
     Focus e do "voltar ao topo", e só desce depois da animação de fechar. */
  body.account-menu-open:has(#view-availability.active) .topbar {
    z-index: calc(var(--z-drawer) + 9);
    transition: z-index 0s;
  }

  .topbar > .theme-toggle.theme-toggle {
    margin-right: 0;
  }

  .topbar #pageTitle {
    font-size: 18px;
    letter-spacing: 0;
  }

  .account-trigger {
    justify-content: center;
    width: 44px;
    max-width: none;
    height: 44px;
    margin-right: -6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
  }

  .account-trigger[aria-expanded="true"] {
    background: transparent;
  }

  .account-trigger .account-avatar {
    width: 32px;
    height: 32px;
  }

  .account-trigger[aria-expanded="true"] .account-avatar {
    border-color: var(--primary);
  }

  .account-trigger-name,
  .account-trigger-chevron {
    display: none;
  }

  /* Rodapé do menu lateral: a linha da conta leva a /conta. Sem e-mail solto e sem Sair (o Sair fica no menu da conta). */
  .drawer-account {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    margin-top: auto;
    padding: 12px 6px;
    border: 0;
    border-top: 1px solid var(--sidebar-border);
    background: transparent;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .drawer-account-text {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
  }

  .drawer-account-text b,
  .drawer-account-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .drawer-account-text b {
    font-size: 13.5px;
    font-weight: 650;
  }

  .drawer-account-text small {
    color: var(--muted);
    font-size: 12px;
  }

  .drawer-account-go {
    width: 16px;
    height: 16px;
  }

  .drawer-account:active {
    background: var(--primary-2);
  }
}

/* Cabeçalho da aba (todas as abas): título 17 px/600 e subtítulo 13 px, com quebra equilibrada (nunca uma palavra sozinha
   na segunda linha). Classe repetida de propósito: Edital e Questões têm override legado
   ".x-head.page-context-head .page-context-copy h2" (22 px / 15 px) com a mesma especificidade. */
.page-context-head.page-context-head.page-context-head .page-context-copy h2 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

.page-context-head.page-context-head.page-context-head .page-context-copy p {
  font-size: 13px;
  line-height: 1.4;
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  .account-trigger,
  .account-menu,
  .account-menu-backdrop {
    transition: none !important;
  }
}