/* ==========================================================================
   REBRANDING-BASE — a casca do AVA, fora das telas de curso

   GERADO por tools/gerar-base.mjs. NÃO EDITAR: edite a seção de origem e
   gere de novo. Cada bloco abaixo diz de que arquivo e seção veio.

   O QUE MUDOU EM RELAÇÃO À ORIGEM: só o escopo.
       .pagelayout-course   ->   body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard)

   PARA O DEV: no tema, estes blocos hoje estão presos a .pagelayout-course.
   Portar esta base = soltar o escopo para os três layouts acima, mais os
   dez AJUSTES DA BASE no fim do arquivo. Nenhum token novo.
   ========================================================================== */

/* >>> origem: preview-curso-delta.css, seção 1 — A SUPERFÍCIE (3 ocorrências do escopo) */
/* --------------------------------------------------------------------------
   1. A SUPERFÍCIE                                                       [5X]
   Fundo frio atrás dos cartões brancos, como no perfil e no admin.
   $don-surface
   -------------------------------------------------------------------------- */
/* A superfície fria é A PÁGINA, não um retângulo em volta dos cartões.
   ==================================================================
   A primeira versão copiava o perfil e o admin: `#region-main {
   background-color: $don-surface }`. Está errado NESTA tela, e o Marcelo
   viu antes de mim — circulou os quatro cantos e disse "sombra quadrada
   crispy". É exatamente o que era. Medido:

       #topofscroll.main-inner   472 → 1302   BRANCO
       #region-main              480 → 1294   #f4f8fb   <- a faixa
       .course-section           495 → 1279   BRANCO

   Branco, frio, branco. A camada do meio sobra 8px de cada lado dentro do
   branco e 15px por dentro até os cartões — uma moldura de canto VIVO em
   volta de cartões de canto de 16px. Lê como sombra desalinhada.

   O perfil não sofre disso porque lá os cartões preenchem a caixa inteira em
   grade de 2 colunas e a faixa não aparece como moldura.

   Aqui a superfície sobe para o `body` e as duas caixas intermediárias ficam
   transparentes: some a moldura, sobram duas camadas (superfície fria +
   cartões brancos), e a gaveta do índice — que já é $don-surface — passa a
   ser contínua com a página, separada só pelo fio de 1px.
   ================================================================== */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) {
    background-color: #f4f8fb;          /* $don-surface — na <body> */
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #region-main,
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #topofscroll.main-inner {
    background-color: transparent;
}

/* A LARGURA FICA COMO ESTÁ — 830px, o padrão do Boost.
   ==================================================================
   Eu tentei 1100px, seguindo o precedente do painel (1400) e do perfil (900),
   e MEDI o resultado: a página se partiu em três bordas esquerdas.

       .main-inner      337 → 1437  (1100)   a regra pegou
       #page-header     472 → 1302  ( 830)   NÃO seguiu
       .secondary-nav   345 → 1429  (1084)   seguiu
       .nav-tabs (ul)   472 → 1302  ( 830)   NÃO seguiu
       .course-section  360 → 1414  (1054)   seguiu

   Motivo: `.header-maxwidth` do Boost trava `#page-header` e o `<ul>` das abas
   em 830px por conta própria, independente de `.main-inner`. Alargar de
   verdade exigiria sobrescrever também o `.header-maxwidth`, que é primitiva
   de alinhamento usada no site inteiro — risco maior que o ganho, e fora do
   escopo "harmonizar".

   O painel e o perfil não têm esse problema porque nos dois o `#page-header`
   está `display: none` (painel) ou é o próprio cartão do desenho (perfil).
   ================================================================== */

/* >>> origem: preview-curso-delta.css, seção 2 — O HERÓI (8 ocorrências do escopo) */
/* --------------------------------------------------------------------------
   2. O HERÓI                                                            [5X]
   A faixa chapada de canto vivo vira o mesmo cartão em gradiente do painel,
   do perfil e do admin. Os quatro compartilham o gradiente de propósito.

   $don-hero-from #1e5aad / $don-hero-mid #123c74 / $don-navy #0a2445
   Texto em $don-surface — o par já foi medido no painel.
   -------------------------------------------------------------------------- */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header {
    position: relative;
    overflow: hidden;
    background-color: transparent;
    border-radius: 16px;
    padding: 2rem 2.5rem;
    color: #f4f8fb;

    /* O ALINHAMENTO — e aqui estava o "ombro" de 15px, diagnosticado errado
       na primeira leitura.
       ==================================================================
       Medido na largura padrão, antes de qualquer mudança:

           #page-header   480 → 1294   (814)
           .nav-tabs      495 → 1279   (784)
           .course-section 495 → 1279  (784)

       O `<ul>` das abas JÁ está alinhado com os cartões. Quem destoa é o
       `#page-header`, 15px mais largo de cada lado. A conclusão de que "a
       banda da nav é estreita demais" estava invertida.

       Os 15px são metade do gutter do Bootstrap, que o `.header-maxwidth`
       aplica como padding horizontal. Como o `padding` shorthand acima já o
       venceu (é o mesmo mecanismo descrito no _compat-post: ID 1-0-0 contra
       classe 0-1-0), a caixa pintada ficou com a largura cheia. Devolvemos os
       15px como MARGEM, que é o que empurra a caixa pintada para dentro.

       LONGHANDS de propósito: `margin` shorthand mataria o `margin: auto` do
       `.header-maxwidth` e tiraria o herói do centro.
       ================================================================== */
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 1.5rem;
}

/* A DECORAÇÃO: círculos, não malha quadriculada.
   ==================================================================
   Primeira versão usava a malha de 46px do `.don-dash__greeting`. Vista
   renderizada, estava errada: naquele banner a malha funciona porque a caixa
   é alta e cheia (sobrancelha + saudação + meta). Aqui o herói tem 111px e
   uma linha de texto, e a malha virava papel milimetrado dominando os dois
   terços vazios da direita.

   O grafismo de CABEÇALHO DE PÁGINA na casa é outro — os círculos, os mesmos
   do login ($don-login-decor). A captura de 10/08 (Figma 41:30) mostra
   exatamente isto no ar.

   Posição e tamanho copiados verbatim da branch visual/faixa-cabecalho, para
   não inventar número: `right -70px top -60px`, `260px auto`, e some abaixo
   de 768px. Com `border-radius: 16px` + `overflow: hidden`, o corte no canto
   é limpo.

   PARA O DEV: se a faixa-cabecalho voltar, isto vira
       background-image: $don-heading-decor, $don-heading-gradient;
   e o data URI abaixo sai. Enquanto não voltar, fica literal.
   ================================================================== */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header {
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20160%20160'%20fill='none'%3E%3Ccircle%20cx='80'%20cy='80'%20r='60'%20stroke='%23fff'%20stroke-opacity='.34'%20stroke-width='1.4'/%3E%3Ccircle%20cx='80'%20cy='80'%20r='40'%20stroke='%23fff'%20stroke-opacity='.16'%20stroke-width='1'%20stroke-dasharray='2%207'/%3E%3Ccircle%20cx='128'%20cy='52'%20r='6'%20fill='%23fff'%20fill-opacity='.9'/%3E%3C/svg%3E"),
        linear-gradient(100deg, #1e5aad 0%, #123c74 55%, #0a2445 100%);
    background-repeat: no-repeat;
    background-position: right -70px top -60px, center;
    background-size: 260px auto, cover;
}

@media (max-width: 767.98px) {
    body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header {
        background-image: linear-gradient(100deg, #1e5aad 0%, #123c74 55%, #0a2445 100%);
        background-position: center;
        background-size: cover;
    }
}

/* O nome do curso sai da caixa alta.
   O _compat-post põe `text-transform: uppercase` em todo #page-header, porque
   ali o título é RÓTULO DE PÁGINA ("Painel", "Preferências"). Nome de curso é
   nome próprio, e o perfil já abriu esse precedente pelo mesmo motivo:
   `body.don-perfil-view` também desliga a caixa alta.

   O peso (0,2,0)+id vence o (0,1,0)+id do bloco genérico sem !important. */
/* O TETO DO TÍTULO desceu de 2.125rem para 1.75rem.
   ==================================================================
   34px/800 parecia certo no curso de teste, cujo nome tem 18 caracteres.
   Na tela de seção (course/section.php, que também é pagelayout-course) o
   título é o nome da aula inteiro — medido: 96 caracteres, "Aula 01 -
   Fundamentos de Saúde e Segurança no Trabalho: conceitos, princípios e
   campo de atuação". A 34px isso dá TRÊS linhas e um herói de 235px, num
   página cujo conteúdo é uma lista de 6 itens.

   Não dá para condicionar tamanho ao comprimento em CSS, então o teto tem
   que servir ao caso ruim. A 28px o título longo continua dominante sem
   gritar, e o nome curto do curso continua com presença de herói.
   ================================================================== */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header h1,
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header .page-header-headings {
    text-transform: none;
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    font-weight: 800;
    line-height: 2rem;
    color: #f4f8fb;
    letter-spacing: 0;
}

/* O ÚLTIMO ITEM DO RASTRO É O PRÓPRIO TÍTULO — sai.
   ==================================================================
   Medido em course/section.php?id=9, os dois itens do rastro:

     1. "GES-SSQVT-80h"                        link, 100px
     2. "Aula 01 - Fundamentos de Saúde ..."   NÃO é link, 644px

   O segundo repete o <h1> logo abaixo, palavra por palavra, e é ele que
   estoura até x=1243 e corre por baixo do grafismo de círculos.

   Esconder é seguro: não é link, não tem aria-current, e o <h1> imediatamente
   seguinte carrega a mesma informação — some da árvore de acessibilidade sem
   perda, porque a informação continua lá.

   `:not(:only-child)` protege o caso de rastro de item único, onde esconder
   o último deixaria a faixa sem nenhuma navegação de volta.
   ================================================================== */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header .breadcrumb-item:last-child:not(:only-child) {
    display: none;
}

/* TEXTO E GRAFISMO EM FAIXAS SEPARADAS.
   ==================================================================
   Sem isto o título longo atravessa os círculos: medido, a segunda linha
   termina em x=1233 e o arco começa em ~1130. Continua legível — os traços
   têm opacidade .34 e .16 — mas lê como acidente, não como desenho.

   O grafismo ocupa os 190px da direita (260px de largura posicionados em
   `right -70px`). Reservar 150px para ele e devolver o resto ao texto faz a
   sobreposição virar decisão, e não sorte de comprimento de título.

   Só a partir de 768px, que é onde o grafismo aparece — abaixo disso a regra
   do @media já o desliga e o texto pode usar a largura inteira.
   ================================================================== */
@media (min-width: 768px) {
    body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header .page-header-headings,
    body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header #page-navbar {
        max-width: calc(100% - 150px);
    }
}

/* >>> origem: preview-curso-delta.css, seção 3 — A FITA DE ABAS (6 ocorrências do escopo) */
/* --------------------------------------------------------------------------
   3. A FITA DE ABAS                                                     [5X]
   Hoje: banda azul de 784px arredondada dentro de uma faixa azul de 814px
   quadrada, deixando 15px de "ombro" de cada lado. O ombro não é ajustado —
   é eliminado: o herói virou cartão, e a navegação desce para a superfície
   como fita de abas clara.

   Isto liga $don-tab-line (#dde7f0), que o preset descreve como "régua sob a
   fita de abas" e que até hoje não tinha consumidor.

   ================== INVARIANTE, NÃO MEXER ==================
   lib/amd/src/moremenu.js:
       const maxHeight = menu.parentNode.offsetHeight + 1;
       if (menu.offsetHeight > maxHeight) { joga tudo no "Mais" }
   Medido nesta página em 21/08/2026: ul 59px, nav 60px.
   NENHUM padding vertical, NENHUMA borda que engorde o <ul>. O sublinhado do
   item ativo é `box-shadow: inset`, que não ocupa layout, exatamente por isso.
   Uma `border-bottom: 3px` aqui esconderia os 6 itens do menu em silêncio.
   =========================================================== */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .secondary-navigation .navigation,
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .secondary-navigation .nav-tabs {
    background-color: transparent;
    border-radius: 0;
}

/* A RÉGUA: box-shadow, nunca border.
   ==================================================================
   Duas tentativas antes desta, as duas medidas e as duas erradas:

   1) `border-bottom` no `.navigation` E no `.nav-tabs`. O `.nav-tabs` É o
      <ul>: ele foi de 59px para 60px contra um teto de 61. Passava hoje e
      quebraria no primeiro ajuste de fonte, escondendo os 6 itens no "Mais"
      sem erro nenhum no console.

   2) `border-bottom` só no `.navigation`. Invariante salva, mas a régua saiu
      23px mais larga que os cartões de cada lado — medido: `.navigation`
      472→1302 contra cartão 495→1279. Uma quarta borda esquerda na página.

   `box-shadow: inset` resolve as duas de uma vez: desenha no <ul>, que já
   está alinhado com os cartões em 495→1279, e NÃO ocupa layout, então o <ul>
   continua com 59px. É o mesmo motivo pelo qual o sublinhado do item ativo
   também é box-shadow.
   ================================================================== */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .secondary-navigation .nav-tabs {
    box-shadow: inset 0 -1px 0 #dde7f0;   /* $don-tab-line */
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .secondary-navigation .nav-link {
    color: #5b6b7d;                     /* $don-ink-soft */
    border: 0;
    border-radius: 0;
    font-weight: 500;
    box-shadow: none;
    transition: color .3s ease, box-shadow .3s ease;   /* $don-transition */
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .secondary-navigation .nav-link:hover {
    background-color: transparent;
    color: #22405f;                     /* $don-ink-label */
    box-shadow: inset 0 -3px 0 #dde7f0;
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .secondary-navigation .nav-link.active {
    background-color: transparent;
    color: #0a2445;                     /* $don-navy */
    font-weight: 700;
    box-shadow: inset 0 -3px 0 #0059FB; /* $primary — brandcolor da instância */
}

/* >>> origem: preview-curso-delta.css, seção 6 — ÍNDICE DE CURSO, a gaveta da esquerda (16 ocorrências do escopo) */
/* --------------------------------------------------------------------------
   6. ÍNDICE DE CURSO, a gaveta da esquerda                              [5X]
   .drawer-left e #courseindex são marcação do core: por isso [5X], e não
   [COMUM]. O item ativo hoje é um bloco azul chapado de ponta a ponta, que
   grita mais alto que o próprio conteúdo da página.
   -------------------------------------------------------------------------- */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .drawer-left {
    background-color: #f4f8fb;          /* $don-surface */
    border-right: 1px solid #e3eaf1;    /* $don-border-lite */
}

/* O CABEÇALHO DA GAVETA — a âncora da coluna.
   ==================================================================
   Marcação real, medida (não é o `.drawerheader` da gaveta primária, que
   fica fora de tela em x=-295; é o da #theme_boost-drawers-courseindex):

     .drawer-left#theme_boost-drawers-courseindex
       └─ .drawerheader                       60px de altura
          ├─ .drawerheading > #courseindexdrawerheading
          │    └─ a.courseindex-link.fw-bold  "Curso de Teste DON"
          └─ .draweractions                   2 botões de ícone

   O nome do curso vinha em #6f7074 a 15px — o cinza de corpo do Bootstrap,
   sem hierarquia nenhuma. É o rótulo que diz ONDE a pessoa está: vira navy.

   O `a` tem classe `.courseindex-link`, a mesma dos itens da lista, mas está
   FORA do `#courseindex` — por isso a regra da lista não o alcançava e ele
   ficou de fora do tratamento na primeira passada.
   ================================================================== */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .drawer-left .drawerheader {
    border-bottom: 1px solid #e3eaf1;   /* $don-border-lite */
}

/* O seletor espelha o do core e soma `.pagelayout-course`. Sem isso a cor
   não entra: o core usa
       .drawerheader .drawerheading #courseindexdrawerheading .courseindex-link
   que dá (1,3,0), contra os (1,2,0) da versão curta que tentei primeiro.
   Uma classe a menos, e o `var(--bs-secondary-color)` dele vencia calado. */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .drawerheader .drawerheading #courseindexdrawerheading .courseindex-link {
    font-size: .9375rem;
    font-weight: 700;
    color: #0a2445;                     /* $don-navy — 15,54:1 sobre #f4f8fb */
    text-decoration: none;
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .drawer-left .drawerheader .btn-icon {
    color: #5b6b7d;                     /* $don-ink-soft, recua para trás do título */
}

/* Respiro entre grupos: sem isto as seções colam e a lista vira um bloco só.
   Só entre irmãs — a primeira encosta no cabeçalho de propósito. */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex-section + .courseindex-section {
    margin-top: .5rem;
}

/* TÍTULO DE SEÇÃO NO ÍNDICE: caixa normal.
   ==================================================================
   A primeira versão era `.75rem + letter-spacing .06em + uppercase`, no
   estilo sobrancelha do painel. Parecia certa no curso de teste, que tem
   duas seções de nome curto ("Geral", "Nova seção").

   Testada num curso real — id=4, 22 seções chamadas "Aula 01 - Fundamentos
   de Saúde e Segurança no Trabalho" — está errada por dois motivos ao mesmo
   tempo: vira um paredão de caixa alta na coluna inteira, e a caixa alta
   ocupa mais largura por caractere, então trunca mais cedo e come justamente
   a parte do nome que distingue uma aula da outra.

   Sobrancelha serve para rótulo curto e fixo. Nome de aula é conteúdo.

   A hierarquia contra os itens de atividade não depende da caixa alta: fica
   por peso (700 contra 400), cor (navy contra ink-label) e recuo (os itens
   têm 24px de padding-left, vindos do core).
   ================================================================== */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-section-title,
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex-section > .courseindex-item {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #0a2445;                     /* $don-navy */
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-sectioncontent .courseindex-link {
    font-size: .8125rem;
    font-weight: 400;
    color: #22405f;                     /* $don-ink-label */
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-link {
    border-radius: 8px;
    color: #22405f;                     /* $don-ink-label */
    text-decoration: none;
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item {
    border-radius: 8px;
    transition: background-color .3s ease;
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item:hover {
    background-color: #f7fafc;          /* $don-chip-bg — o mais claro dos dois */
}

/* O item da página atual: SEM barra de acento.
   ==================================================================
   Duas versões descartadas antes desta:

   1) `box-shadow: inset 3px 0 0` num elemento com `border-radius: 8px`. A
      sombra interna segue o canto arredondado: virava arco, não barra.
   2) `::before` posicionado, barra reta de 3px. Geometricamente correta, e
      ainda assim errada.

   Por que a (2) saiu, e o motivo vale mais que a geometria: **barra de
   acento lateral não existe no design system desta casa.** O perfil e o
   painel marcam ênfase com fundo de chip + navy + peso, e nada mais. Eu
   inventei um padrão novo numa tela cujo trabalho era só se harmonizar — e
   é justamente o padrão que virou marca registrada de interface gerada no
   automático. O Marcelo apontou este elemento, e o hook de design apontou o
   mesmo, independentemente.

   O QUE SOBRA PARA DISTINGUIR "estou aqui" DE "o mouse está em cima":
   o preset tem DOIS tons de chip, e eles bastam.

       hover   #f7fafc  ($don-chip-bg)     o mais claro
       ativo   #eef4fb  ($don-chip-hover)  mais azul, + navy, + bold

   Antes desta correção os dois usavam #eef4fb e eram indistinguíveis; a
   barra estava tapando esse buraco em vez de resolvê-lo.
   ================================================================== */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item.pageitem {
    background-color: #eef4fb;          /* $don-chip-hover */
}

/* TUDO que o core pinta de branco aqui dentro precisa voltar.
   ==================================================================
   Trocar o fundo do `.pageitem` de azul chapado para pálido não é uma
   mudança de uma linha: o core pinta o conteúdo de BRANCO porque no desenho
   dele o fundo é azul. A regra é uma só, achada enumerando quem casa:

       .courseindex .courseindex-item.pageitem a { color: #fff }   (0,3,1)

   Meu primeiro alvo foi `.courseindex-link` — e o CHEVRON também é um <a>,
   que ficou de fora. Resultado medido: branco sobre #eef4fb, contraste
   1,11:1. O toggle de recolher a seção ficou invisível.

   `... .pageitem a` dá (0,4,1) e cobre os dois <a> de uma vez.
   ================================================================== */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item.pageitem {
    color: #0a2445;                     /* $don-navy */
    font-weight: 700;
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item.pageitem a {
    color: #22405f;                     /* $don-ink-label — 9,54:1 sobre #eef4fb */
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item.pageitem .courseindex-link {
    color: #0a2445;                     /* $don-navy — o rótulo domina o chevron */
    font-weight: 700;
}

/* >>> origem: preview-curso-delta.css, seção 7 — ESTREITO (2 ocorrências do escopo) */
/* --------------------------------------------------------------------------
   7. ESTREITO                                                           [5X]
   O AGENTS.md §5 manda ver as duas larguras. A captura de 10/08 (Figma 41:34)
   mostra o título encostado na borda esquerda em 375px — o padding do herói
   resolve, mas em 375 os 2.25rem são caros.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header {
        border-radius: 12px;
        padding: 1.5rem 1rem;
    }

    body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .secondary-navigation .nav-link {
        font-size: .875rem;
    }
}

/* >>> origem: rebranding-curso.css, seção 1 — HERÓI — o gradiente tecnológico da casa (o mesmo do login full bleed) (2 ocorrências do escopo) */
/* --------------------------------------------------------------------------
   1. HERÓI — o gradiente tecnológico da casa (o mesmo do login full bleed)
   -------------------------------------------------------------------------- */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header {
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20160%20160'%20fill='none'%3E%3Ccircle%20cx='80'%20cy='80'%20r='60'%20stroke='%23fff'%20stroke-opacity='.34'%20stroke-width='1.4'/%3E%3Ccircle%20cx='80'%20cy='80'%20r='40'%20stroke='%23fff'%20stroke-opacity='.16'%20stroke-width='1'%20stroke-dasharray='2%207'/%3E%3Ccircle%20cx='128'%20cy='52'%20r='6'%20fill='%23fff'%20fill-opacity='.9'/%3E%3C/svg%3E"),
        radial-gradient(135% 120% at 25% 12%, #1B6BFF 0%, #0059FB 48%, #102770 118%);
    background-repeat: no-repeat;
    background-position: right -70px top -60px, center;
    background-size: 260px auto, cover;
}

@media (max-width: 767.98px) {
    body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header {
        background-image: radial-gradient(135% 120% at 25% 12%, #1B6BFF 0%, #0059FB 48%, #102770 118%);
        background-position: center;
        background-size: cover;
    }
}

/* Sobrancelha acima do título — o js injeta .don-hero__eyebrow.
   BRANCO, e não o ciano-claro que eu tinha posto: medido em 21/08,
   #66E5FB dá 3,08:1 sobre o ponto mais claro do gradiente (#1B6BFF),
   contra alvo de 4,5:1 — texto de 11px bold NÃO conta como grande (o
   limiar é 18,66px bold). Reprovava. Dos candidatos da paleta só o
   branco passa, e por pouco: 4,57:1 no pior ponto.
   MEXEU NO GRADIENTE? Remeça este par — a folga é de 0,07. */
.don-hero__eyebrow {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #FFFFFF;                       /* 4,57:1 no pior ponto do gradiente */
    /* SEM opacity. Branco a 85% mistura com o azul e cai abaixo dos
       4,57 — e a folga contra o alvo de 4,5 é de 0,07. Qualquer véu
       aqui reprova em silêncio. */
    margin-bottom: .5rem;
}

/* >>> origem: rebranding-curso.css, seção 4 — BARRA LATERAL — navy tecnológico, âncora visual da jornada (28 ocorrências do escopo) */
/* --------------------------------------------------------------------------
   4. BARRA LATERAL — navy tecnológico, âncora visual da jornada
   A gaveta inteira vira a superfície escura da marca; o miolo claro ganha
   contraste de figura-fundo com a navegação. Mesma família do cabeçalho
   do site (#0a2445) e dos cards escuros do painel.
   -------------------------------------------------------------------------- */
/* O NAVY É DA GAVETA DO ÍNDICE, e só dela.
   ==================================================================
   A primeira versão mirava `.drawer-left` — classe que o Boost põe nas
   DUAS gavetas da esquerda. A gaveta primária (menu do site) também
   ficou navy, e o conteúdo dela não foi adaptado junto: o nome do site
   ficou em #6f7074 sobre #0A1229, contraste 1,4:1. Só apareceu na
   auditoria, porque ela vive fora de tela em x=-295 e ninguém a abriu
   durante o desenho.

   Mirar o ID da gaveta do índice fecha o escopo no que foi desenhado. */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex {
    background-color: #0A1229;            /* --navy-900 */
    border-right: 0;
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex .drawerheader {
    border-bottom: 1px solid rgba(255,255,255,.08);
    background-color: #0A1229;
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .drawerheader .drawerheading #courseindexdrawerheading .courseindex-link {
    color: #FFFFFF;                       /* 18,56:1 sobre navy-900 */
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex .drawerheader .btn-icon {
    color: rgba(255,255,255,.7);
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex .drawerheader .btn-icon:hover {
    color: #fff;
    background-color: rgba(255,255,255,.08);
}

/* Divisor de bimestre — HTML novo, injetado pelo js */
.don-idx__divisor {
    margin: 1rem .5rem .5rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.don-idx__divisor--b1   { color: #7CB5FF; }
.don-idx__divisor--b2   { color: #66E5FB; }   /* --ciano-claro: 10,9:1 sobre navy-900 */
.don-idx__divisor--aval { color: #E8B45A; }

/* Itens do índice sobre navy */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-section-title,
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex-section > .courseindex-item {
    color: rgba(255,255,255,.92);
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-link {
    color: rgba(255,255,255,.92);
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-sectioncontent .courseindex-link {
    color: rgba(255,255,255,.66);
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item {
    border-radius: 8px;
}

/* HOVER: COR SÓLIDA, NUNCA VÉU — e isto é física, não gosto.
   ==================================================================
   O fundo da gaveta (#0A1229) tem luminância 0,0066: qualquer véu
   claro por cima sobe pouquíssimo. Medido em 21/08:

       branco a  7%  -> #1B2338   1,19:1 contra a gaveta  <- estava no ar
       branco a 20%  -> #3B4154   1,83:1
       ciano  a 22%  -> #113958   1,55:1

   Nenhum chega aos 3:1 da WCAG 1.4.11. O Marcelo descreveu como
   "escuro no escuro" e é literalmente isso. Testei também bases mais
   claras para o trilho (#102770, #16224A): o teto do véu não passa de
   1,6 em nenhuma — trocar a base não resolve.

   Cor SÓLIDA resolve. Dos candidatos, só o azul da marca passa:

       #0059FB   3,38:1 contra a gaveta | branco em cima 5,49:1

   Os outros (#1B3A8F 1,81 | #24427E 1,91 | #1E4A9E 2,23) reprovam. */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item:hover {
    background-color: #0059FB;            /* --azul: 3,38:1 contra a gaveta */
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item:hover .courseindex-link,
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item:hover a {
    color: #fff;                          /* 5,49:1 sobre o azul */
}

/* Item da página atual: navy da marca preenchido + texto branco.
   Distingue-se do hover por MATIZ (navy contra azul vivo), não por
   intensidade — que é o eixo que não funciona nesta superfície. */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item.pageitem {
    background-color: #102770;            /* --navy: branco em cima 13,58:1 */
    box-shadow: inset 0 0 0 1px rgba(41,197,255,.45);
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item.pageitem a,
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item.pageitem .courseindex-link {
    color: #fff;
    font-weight: 700;
}

/* Bolinhas de conclusão do índice, visíveis sobre o navy */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .completioninfo {
    color: rgba(255,255,255,.5);
}

/* O chevron das seções do índice */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-chevron {
    color: rgba(255,255,255,.55);
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item.pageitem .courseindex-chevron {
    color: rgba(255,255,255,.85);
}

/* BARRA DE ROLAGEM: invisível parada, discreta sob o cursor.
   ==================================================================
   A barra nativa é clara e larga, e sobre o navy vira um risco branco
   colado na borda. Some por padrão e reaparece quando o ponteiro entra
   na gaveta — que é quando a pessoa está de fato navegando a lista.

   NÃO é `display: none` puro: sumir para sempre esconde que há mais
   conteúdo abaixo. Some a pintura, não a rolagem.

   Os dois dialetos: `scrollbar-*` é o padrão (Firefox e Chrome novo);
   `::-webkit-scrollbar` cobre o resto do Chromium. */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex *,
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex:hover *,
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex:hover {
    scrollbar-color: rgba(255,255,255,.28) transparent;
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex ::-webkit-scrollbar {
    width: 8px;
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex ::-webkit-scrollbar-track {
    background: transparent;
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex ::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
    transition: background .2s ease;
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex:hover ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.28);
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex ::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.45);
}


/* Véu atrás da gaveta no estreito (o preview-navegacao.js o injeta; em
   produção o próprio Boost tem o seu). Escurece o conteúdo e dá uma
   superfície para tocar fora da gaveta e fechá-la. */
#don-veu {
    position: fixed;
    inset: 0;
    z-index: 1019;                        /* logo abaixo da gaveta do Boost */
    background: rgba(10, 18, 41, .5);     /* --navy-900 a 50% */
}

/* >>> origem: rebranding-curso.css, seção 5 — FOCO DE TECLADO — visível nas duas superfícies (4 ocorrências do escopo) */
/* --------------------------------------------------------------------------
   5. FOCO DE TECLADO — visível nas duas superfícies
   -------------------------------------------------------------------------- */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .course-content a:focus-visible,
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .course-section-header:focus-visible {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
    border-radius: 6px;
}

body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex a:focus-visible,
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex button:focus-visible {
    outline: 2px solid #29C5FF;           /* sobre navy o ciano é o anel certo */
    outline-offset: 2px;
}

/* >>> AJUSTE DA BASE 1 — o herói centrado por largura
   ==================================================================
   Na origem o herói recua 15px com `margin-left/right: 15px`. Funciona no
   curso porque lá o pai (#topofscroll) já tem 830px e está centrado. No
   layout `report` NÃO: medido em 18/09 em /course/user.php?mode=grade,
       #topofscroll    48 → 1392   (100%)
       #page-header    71 →  901   <- colado à esquerda
       #region-main   305 → 1135   <- centrado
   Ali quem centra o herói é o `margin: auto` do próprio .header-maxwidth, e
   a margem fixa o matava.
   O recuo passa a ser LARGURA, e o centro volta a ser `auto`. Dá o mesmo
   resultado nos dois casos: 800px centrados dentro de 830 = 15px de cada
   lado; e no estreito, 100% - 30px.
   PARA O DEV: vale trocar também na regra do curso — é a mesma caixa, só
   que escrita de um jeito que não depende do pai.
   ================================================================== */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header {
    max-width: min(800px, calc(100% - 30px));
    margin-left: auto;
    margin-right: auto;
}

/* >>> AJUSTE DA BASE 2 — a reserva do grafismo, como o tema JÁ resolveu
   ==================================================================
   Na origem o texto cede 150px ao grafismo com "max-width: calc(100% -
   150px)" no .page-header-headings. Nas telas de atividade o título mora
   num item flex que encolhe ao conteúdo: a porcentagem fica cíclica e o
   título quebrava UMA LETRA POR LINHA (visto em 18/09 em Avisos, Calendário
   e Autoavaliação).
   O Eduardo achou o mesmo no curso 5 e corrigiu no tema em 22/08 (commit
   529960a, _course-view.scss): a reserva sobe para o item flex, com
   "flex: 1" para a porcentagem ter contra o que resolver. Aqui é a MESMA
   regra, só com o escopo solto — não uma segunda solução para o mesmo bug.
   ================================================================== */
@media (min-width: 768px) {
    body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header .page-header-headings {
        max-width: none;
    }
    body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header .d-flex.align-items-center > .me-auto {
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100% - 150px);
    }
}

/* >>> AJUSTE DA BASE 3 — o foco de teclado nas abas volta
   ==================================================================
   A seção 3 (fita de abas) zera o `box-shadow` do .nav-link a (0,3,1), e
   é o box-shadow que o Boost usa como anel de foco. Resultado, medido na
   auditoria de 22/09 em Notas de um curso: Tab em "Participantes" não
   mostra nada — no original mostrava o anel azul. Vale para toda tela com
   abas nos três layouts, e também para o curso (mesma origem).
   PARA O DEV: vale pôr na regra do curso também.
   ================================================================== */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .secondary-navigation .nav-link:focus-visible {
    outline: 2px solid #0059FB;
    outline-offset: -2px;
    border-radius: 6px;
}

/* >>> AJUSTE DA BASE 4 — a trilha do herói em branco pleno
   ==================================================================
   O Boost pinta a trilha (breadcrumb) de rgba(255,255,255,.85), 14px/400.
   No azul chapado do original dava 4,37:1; no gradiente radial da seção 2
   o ponto mais claro é rgb(24,105,255) e cai para 3,76:1 — reprovado para
   texto pequeno. Branco pleno no mesmo ponto: 4,57:1. Medido em 22/09.
   O #page-navbar é peso: a regra do tema é #page-header #page-navbar (2,1,1).
   ================================================================== */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header #page-navbar .breadcrumb-item,
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header #page-navbar .breadcrumb-item a {
    color: #FFFFFF;
}
/* Alvo de toque (09/10): o link da trilha tinha 23px de altura, abaixo dos
   24 do WCAG 2.5.8 e longe dos 40 no celular. Cresce para 40 (24 + 8 + 8)
   sem mexer no layout: a margem negativa devolve o que o padding toma. */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header #page-navbar .breadcrumb-item a {
    display: inline-block;
    padding: .5rem 0;
    margin: -.5rem 0;
    line-height: 1.5rem;
}

/* >>> AJUSTE DA BASE 5 — um marcador de conclusão só, no índice
   ==================================================================
   No ar, o tema estendeu a todos os layouts o marcador desenhado do curso
   (rebranding-curso.css), que esconde o <img> do core. No Moodle 5.2 o
   estado CONCLUÍDO vem como ícone de fonte (<i class="icon fa fa-circle">),
   que a regra não pegava: o índice mostrava o ponto verde do core E o ✓
   desenhado. Some da vista; o "Feito" continua no leitor de tela. 09/10.
   ================================================================== */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .completioninfo {
    position: relative;
}
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .completioninfo :is(img, .icon) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* >>> AJUSTE DA BASE 6 — o clique no link não deixa marca
   ==================================================================
   O core do Boost pinta o foco dos links sem classe (e .aalink,
   .arrow_link, .activityinstance > a) com fundo #fbfcff, texto #1d2125 e
   uma barra escura de 4px embaixo. Vale em :focus, então GRUDA depois do
   clique e do toque, até clicar em outro lugar. O Marcelo viu na revisão
   da prova ("o efeito de click ta mt ruim e feio"), e está em 24 das 28
   telas: a trilha do herói em 16, o miolo de perfil, preferências, notas,
   painel, calendário, mensagens e arquivos. Medido em 09/10.

   A troca: o link fica como estava em qualquer foco, e o teclado ganha o
   anel da casa (o mesmo do AJUSTE 3). No toque e no mouse, nada aparece.

   PESO: os seletores são os MESMOS do core, sem prefixo, e vêm depois.
   Empata com o Boost e ganha pela ordem; as regras nossas que já dão cor
   ou fundo a um link continuam ganhando desta. A cor é a mesma expressão
   do `a` do Bootstrap, então acompanha a marca de cada cliente.
   PARA O DEV: parcial em common/scss/don, compilada depois do core.
   O rodapé (#page-footer a) ficou de fora: não está em nenhuma tela do
   preview, então não foi conferido.
   ================================================================== */
a:not([class]):focus,
.aalink:focus,
.arrow_link:focus,
.activityinstance > a:focus {
    outline: 0;
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    background-color: transparent;
    box-shadow: none;
}
a:not([class]):focus-visible,
.aalink:focus-visible,
.arrow_link:focus-visible,
.activityinstance > a:focus-visible {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
    border-radius: 4px;
}
/* Onde o core manda o link herdar a cor (.message-app a { color: inherit }),
   o foco herda também; senão o link cinza das mensagens ficava azul. */
.message-app a:focus {
    color: inherit;
}
/* Na trilha do herói, anel nenhum serve: o azul some no gradiente azul, e
   no celular o .breadcrumb-item tem overflow: hidden (é o que dá as
   reticências no nome longo) e corta qualquer anel por fora. O teclado
   ganha um sublinhado branco de 2px, que fica dentro da caixa. */
#page-header #page-navbar .breadcrumb-item a:focus-visible {
    outline: 0;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* >>> AJUSTE DA BASE 7 — o herói na largura do conteúdo, abaixo de 768
   ==================================================================
   O AJUSTE 1 recua o herói 15px de cada lado para alinhar com a calha do
   Boost, e isso vale de 768 para cima: lá o [role="main"] tem os 15px de
   padding. ABAIXO de 768 o miolo não tem calha nenhuma, e o herói ficava
   15px mais estreito que os cartões de cada lado. Medido em 15/10 nas 20
   telas com herói: 18 desalinhadas a 375 e a 576 (herói 23–352, conteúdo
   8–367 a 375); nenhuma a 768 e a 1440.
   A troca: abaixo de 768 o herói ocupa a largura toda, como o conteúdo.
   ================================================================== */
@media (max-width: 767.98px) {
    body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header {
        max-width: 100%;
    }
}

/* >>> AJUSTE DA BASE 8 — o herói fecha no grid de 8
   ==================================================================
   Medido em 15/10, o herói saía fora do grid em 19 das 20 telas: 130,66 /
   150,66 no celular, 156 e 226,98 no desktop. Três origens, todas do core:

   1. A TRILHA NO CELULAR. Abaixo de 768 o Boost dá ao .breadcrumb-item
      `padding: .33333rem 0` e `overflow: hidden` (é o que põe reticências
      no nome longo): 22,99 + 5,33 + 5,33 = 34,66. O overflow também cortava
      o alvo de 40px do link (AJUSTE 4) em 34,66. Sem o padding e sem a
      margem negativa, o link inteiro é a linha: 40, alvo de toque cheio.
   2. A TRILHA QUE QUEBRA. Com nome de aula longo, o item desce para a
      linha de baixo e o link inline-block alinha pela linha de base de
      22,99: 70,98 por item. `vertical-align: top` e a linha do item em 24
      fecham em 24 por linha (48 para duas).
   3. O ÍCONE DA ATIVIDADE. O core dá 52px ao .activityiconcontainer; com
      os 4 + 4 do .page-context-header e os 8 embaixo, a linha do título
      dava 68. Com 48, dá 64.

   Resultado: 136 sem ícone e 152 com ícone no celular (24 + 40 + 48|64 +
   24); 136 e 152 no desktop (32 + 24 + 48|64 + 32).
   ================================================================== */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header #page-navbar .breadcrumb-item {
    line-height: 1.5rem;
}
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header #page-navbar .breadcrumb-item a {
    vertical-align: top;
}
@media (max-width: 767.98px) {
    /* O item é inline-flex no core; sem o padding, a barra "/" (o ::before)
       subia para o topo dos 40. Centrada, volta à linha do texto. */
    body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header #page-navbar .breadcrumb-item {
        padding-top: 0;
        padding-bottom: 0;
        align-items: center;
    }
    body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header #page-navbar .breadcrumb-item a {
        margin-top: 0;
        margin-bottom: 0;
    }
}
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header .page-header-image .activityiconcontainer {
    width: 48px;
    height: 48px;
    max-width: 48px;
    max-height: 48px;
}

/* >>> AJUSTE DA BASE 9 — o 1px do #maincontent
   ==================================================================
   O alvo do "Pular para o conteúdo" é um <span id="maincontent"> que o
   Boost faz bloco de 1px (`display: block; height: 1px; overflow: clip`).
   Esse 1px empurrava o miolo inteiro: o vão do herói ao primeiro cartão
   dava 25 em vez de 24 em 11 das 20 telas (medido em 15/10).
   A margem negativa devolve o 1px sem tirar o alvo: o link de pular
   continua achando o elemento, com a mesma caixa.
   ================================================================== */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #maincontent {
    margin-bottom: -1px;
}

/* >>> AJUSTE DA BASE 10 — a fita de abas fecha no grid de 8
   ==================================================================
   A fita (.secondary-navigation, Curso / Participantes / Notas / Mais)
   media 75: a barra tem 60 (`.moremenu { height: 60px }` no <nav> e
   `.moremenu .nav-link { height: 60px }` em cada link) e o core soma
   `padding-bottom: 15px` de calha. Em Notas do curso o vão do herói ao
   título dava 123 (24 + 75 + 24). Medido em 15/10.

   A troca: barra 56 e calha 16, fita 72. O vão fica 120.

   A ARMADILHA (seção 3, INVARIANTE): o moremenu.js joga tudo no "Mais"
   quando o <ul> fica mais alto que o <nav> + 1. Por isso a altura muda
   no <nav> e no link JUNTOS, e nada de padding: o <ul> vai de 59 para 55,
   o <nav> de 60 para 56, a mesma folga de antes. O link continua com 56 de
   alvo, acima dos 40 do celular.
   Só a .secondary-navigation: a barra do topo também é .moremenu e fica
   como está.
   PARA O DEV: vale na regra do curso também (mesma fita).
   ================================================================== */
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .secondary-navigation {
    padding-bottom: 1rem;
}
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .secondary-navigation .moremenu,
body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .secondary-navigation .moremenu .nav-link {
    height: 56px;
}