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

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

  .topbar h1 {
    font-size: 24px;
    line-height: 1.15;
  }

  #pageTitle {
    max-width: 100%;
    gap: 8px;
  }

  #pageTitle > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-page-icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }

  .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. */
  .page-context-head.page-context-head.page-context-head .page-context-copy h2 {
    margin-bottom: 4px;
    font-size: 17px;
    line-height: 1.25;
  }

  .page-context-head.page-context-head.page-context-head .page-context-copy p {
    font-size: 12.5px;
    line-height: 1.4;
  }

  .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: 40px;
    height: 40px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--card-border);
    border-radius: 11px;
    background: var(--surface-soft-strong);
    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: 20px;
    height: 20px;
    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 {
    color: var(--ink);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0;
  }

  .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. O Focus Timer (e o que abre sobre ele) 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,
body:not(.focus-registering) .study-session-backdrop {
  background: var(--drawer-backdrop) !important;
  backdrop-filter: none !important;
}

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