/*
 * Complemento do padrão limpo aplicado a todas as aulas.
 * Todos os seletores permanecem sob .lesson-clean-model para que a página
 * inicial, os índices de conteúdo e o banco de exercícios não sejam afetados.
 */

.lesson-clean-model .studio-intro h1::before {
  content: attr(data-unit);
}

.lesson-clean-model .studio-bottom-nav {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* O CSS legado deslocava a navegação uma coluna inteira para fora da grade. */
.lesson-clean-model .lesson-anchor-nav {
  transform: none;
}

/* Uma única superfície branca conecta menu lateral, introdução e conteúdo. */
.lesson-clean-model {
  background: #fff !important;
  background-image: none !important;
}

.lesson-clean-model :is(.lesson-studio, .studio-intro, .lesson-page-layout, .lesson-page-layout .studio-main) {
  background-color: #fff;
}

.lesson-clean-model .lesson-anchor-title {
  font-size: .92rem;
}

.lesson-clean-model .lesson-anchor-link {
  font-size: .84rem;
  line-height: 1.38;
}

.lesson-clean-model .lesson-model-header .brand {
  font-size: 1.28rem;
  gap: 0;
}

/* Nas aulas, a marca do cabeçalho usa somente o nome EstudaMath. */
.lesson-clean-model .lesson-model-header .brand-mark {
  display: none;
}

/* No desktop, a navegação começa perto da marca em vez de ficar na borda direita. */
@media (min-width: 761px) {
  .lesson-clean-model .lesson-model-header {
    justify-content: flex-start;
  }

  .lesson-clean-model .lesson-model-header .main-nav {
    margin-right: auto;
    margin-left: clamp(72px, 7vw, 132px);
  }
}

/* A lateral continua rolável, mas sem uma barra visual permanente. */
.lesson-clean-model :is(.lesson-anchor-nav, .lesson-anchor-card) {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.lesson-clean-model :is(.lesson-anchor-nav, .lesson-anchor-card)::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* O menu acompanha a página e não cria uma área de rolagem própria. */
.lesson-clean-model :is(.lesson-anchor-nav, .lesson-anchor-card) {
  max-height: none !important;
  overflow: visible !important;
}

.lesson-clean-model .lesson-anchor-card {
  position: static !important;
  top: auto !important;
}

@media (max-width: 760px) {
  .lesson-clean-model .lesson-model-header .brand {
    font-size: 1.1rem;
  }
}

/* Painel lateral branco, contínuo e colado à borda da página no desktop. */
@media (min-width: 1041px) {
  .lesson-clean-model {
    --lesson-shell-gutter: max(20px, calc((100vw - 1480px) / 2));
    --lesson-sidebar-width: 235px;
    --lesson-sidebar-inner-padding: clamp(30px, 3vw, 52px);
  }

  .lesson-clean-model .lesson-studio {
    position: relative;
    isolation: isolate;
  }

  .lesson-clean-model .lesson-page-layout {
    grid-template-columns: var(--lesson-sidebar-width) minmax(0, 1fr);
  }

  .lesson-clean-model .studio-intro {
    padding-left: calc(var(--lesson-sidebar-width) + 36px);
  }

  .lesson-clean-model .lesson-studio::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(-1 * var(--lesson-shell-gutter));
    z-index: 0;
    width: calc(var(--lesson-sidebar-width) + var(--lesson-shell-gutter));
    background: #fff;
    border-right: 1px solid var(--lesson-line);
    pointer-events: none;
  }

  .lesson-clean-model .lesson-studio > * {
    position: relative;
    z-index: 1;
  }

  .lesson-clean-model .studio-intro .breadcrumb {
    left: calc(-1 * var(--lesson-shell-gutter) + var(--lesson-sidebar-inner-padding));
    width: calc(var(--lesson-sidebar-width) + var(--lesson-shell-gutter) - var(--lesson-sidebar-inner-padding) - 18px);
  }

  .lesson-clean-model .lesson-studio > .lesson-page-layout {
    position: static;
  }

  .lesson-clean-model .lesson-anchor-nav {
    position: absolute;
    top: 62px;
    bottom: 0;
    left: calc(-1 * var(--lesson-shell-gutter));
    z-index: 2;
    width: calc(var(--lesson-sidebar-width) + var(--lesson-shell-gutter));
    max-height: none;
    margin: 0;
    padding: 16px 18px 28px var(--lesson-sidebar-inner-padding);
    overflow: visible;
    background: #fff;
    border-right: 1px solid var(--lesson-line);
  }

  .lesson-clean-model .lesson-anchor-card {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 108px);
    padding-right: 6px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #bdcce1 transparent;
  }
}

/* Breadcrumb curto no padrão: seta, unidade e aula atual. */
.lesson-clean-model .studio-intro .breadcrumb {
  z-index: 3;
}

.lesson-clean-model .breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--lesson-muted);
  font-weight: 650;
}

.lesson-clean-model .breadcrumb > a:first-child,
.lesson-clean-model .breadcrumb > a:first-child + span {
  display: none;
}

.lesson-clean-model .breadcrumb > a:nth-of-type(2)::before {
  content: "←";
  margin-right: 7px;
  color: var(--lesson-blue);
}

.lesson-clean-model .breadcrumb > a:nth-of-type(2) {
  color: var(--lesson-blue);
  font-weight: 750;
}

.lesson-clean-model .breadcrumb > span {
  color: #9ba7ba;
}

.lesson-clean-model .breadcrumb > :last-child,
.lesson-clean-model .breadcrumb > [aria-current="page"] {
  color: var(--lesson-muted);
  font-weight: 650;
  pointer-events: none;
  text-decoration: none;
}

/* Listas conceituais voltam ao fluxo normal, sem cartões em cada item. */
.lesson-clean-model .card-list {
  display: block;
  margin: 16px 0 0;
  padding-left: 1.35rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.lesson-clean-model .card-list > li {
  display: list-item;
  margin: 7px 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Fórmulas importantes permanecem destacadas e roláveis em telas estreitas. */
.lesson-clean-model :is(.formula-box, .formula-panel, .single-formula-panel) {
  max-width: 100%;
  margin: 20px 0 0;
  padding: 18px 20px;
  color: var(--lesson-ink);
  background: var(--lesson-blue-soft);
  border: 1px solid #c9ddfa;
  border-left: 4px solid var(--lesson-blue);
  border-radius: 7px;
  box-shadow: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.lesson-clean-model :is(.math-block, .formula-box, .formula-panel, .single-formula-panel, .worked-panel) {
  max-width: 100%;
  min-width: 0;
}

.lesson-clean-model :is(.math-block, .formula-box, .formula-panel, .single-formula-panel) :is(.math-text, .math-line) {
  overflow-wrap: normal;
  word-break: normal;
}

.lesson-clean-model .math-fraction {
  white-space: nowrap;
}

/* Somente observações e condições ganham caixa verde. */
.lesson-clean-model :is(.note-box, .hypothesis-banner, .condition-note, .validity-note) {
  max-width: 100%;
  margin: 20px 0 0;
  padding: 16px 18px;
  color: #245844;
  background: var(--lesson-green-soft);
  border: 1px solid #bfe8d7;
  border-left: 4px solid var(--lesson-green);
  border-radius: 7px;
  box-shadow: none;
}

/* Atenções, pegadinhas e erros comuns ganham caixa âmbar. */
.lesson-clean-model :is(.warning-note, .attention-note, .error-note, [class*="-warning"]) {
  max-width: 100%;
  margin: 20px 0 0;
  padding: 16px 18px;
  color: #704400;
  background: var(--lesson-amber-soft);
  border: 1px solid #f1d493;
  border-left: 4px solid var(--lesson-amber);
  border-radius: 7px;
  box-shadow: none;
}

/* Definições e demonstrações continuam como texto corrido. */
.lesson-clean-model :is([class*="-definition"], [class*="-proof"]) {
  max-width: 100%;
  margin: 18px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Tabelas usam rolagem local; a página não ganha rolagem horizontal. */
.lesson-clean-model :is(.table-wrap, .lesson-table-wrap, [class*="-table-wrap"]) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 18px 0 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.lesson-clean-model :is(.table-wrap, .lesson-table-wrap, [class*="-table-wrap"]) > table {
  width: 100%;
  border-collapse: collapse;
}

/* Figuras e diagramas sempre respeitam a largura da coluna. */
.lesson-clean-model :is(svg, img, canvas) {
  max-width: 100%;
  height: auto;
}

.lesson-clean-model :is(figure, .figure-panel, .geometry-visual-card, .diagram-panel) {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-shadow: none;
}

.lesson-clean-model :is(.figure-panel, .geometry-visual-card, .diagram-panel) > :is(svg, img, canvas) {
  display: block;
  width: 100%;
}

@media (max-width: 760px) {
  .lesson-clean-model :is(.formula-box, .formula-panel, .single-formula-panel) {
    padding: 15px 14px;
  }

  .lesson-clean-model :is(.note-box, .hypothesis-banner, .condition-note, .validity-note,
  .warning-note, .attention-note, .error-note, [class*="-warning"]) {
    padding: 14px;
  }

  .lesson-clean-model .studio-bottom-nav {
    grid-template-columns: minmax(0, 1fr);
  }
}