/* Level Next — camada final de qualidade, responsividade e acessibilidade. */

[hidden] { display: none !important; }

:where(h1, h2, h3, .display-title, .editorial-title, .section-title, .lab-title) {
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

:where(p, li, dd, figcaption, blockquote) {
  text-wrap: pretty;
  orphans: 3;
  widows: 3;
}

:where(pre, code, .code-lab, .code-panel, .code-stage) {
  min-width: 0;
  max-width: 100%;
}

pre {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

:where(.filter-list, .element-filters, .niche-picker, .code-tabs) {
  scroll-snap-type: inline proximity;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

:where(.filter-list, .element-filters, .niche-picker, .code-tabs) > * {
  scroll-snap-align: start;
}

:where(button, [role="button"], [role="tab"], input, select, a) {
  touch-action: manipulation;
}

:where(.filter-list button, .element-filters button, .niche-choice, .code-tab) {
  min-height: 44px;
}

dialog[open] {
  overscroll-behavior: contain;
}

body.ln-dialog-open {
  overflow: hidden;
}

/* Escala editorial única para heroes e aberturas de capítulo. */
html[data-ln-page] body main .ln-display-heading.ln-display-heading.ln-display-heading.ln-display-heading {
  width: min(100%, 13ch) !important;
  max-width: 13ch !important;
  font-size: clamp(4rem, 3.75vw, 5rem) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
  font-family: "Manrope", sans-serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  text-wrap: balance !important;
}

/* Aberturas principais mais leves; a serifada mantém contraste editorial. */
html[data-ln-page] body main :where(.hero h1, .intro-hero h1).ln-display-heading.ln-display-heading {
  font-weight: 500 !important;
}

html[data-ln-page] body main .ln-display-heading.ln-display-heading.ln-display-heading.ln-display-heading :where(em, .display-serif, .display-acid),
html[data-ln-page] body main .lab-title.ln-display-heading.ln-display-heading.ln-display-heading > span {
  font-size: .96em !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  font-family: "Bodoni Moda", serif !important;
  font-weight: 600 !important;
  font-style: italic !important;
  transform: none !important;
}

html[data-ln-page] body main .ln-display-heading.ln-display-heading.ln-display-heading.ln-display-heading br + em {
  margin-top: .08em !important;
}

/* Em telas largas, as aberturas editoriais usam a largura real disponível.
   Quebras manuais antigas criavam linhas como "vira" e "de" isoladas. */
@media (min-width: 761px) {
  /* O ID da hero principal não pode escapar da escala comum. */
  html[data-ln-page] body main #heroTitle.ln-display-heading {
    width: min(100%, 13ch) !important;
    max-width: 13ch !important;
    font-size: clamp(4rem, 3.75vw, 5rem) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
    font-weight: 500 !important;
  }

  html[data-ln-page] body main #heroTitle.ln-display-heading .display-serif {
    color: var(--acid, #a6ed42) !important;
    padding-left: 0 !important;
  }

  html[data-ln-page] body main :where(.display-title, .section-title, .editorial-title, .lab-title, .finale h2, .governance h2).ln-display-heading br {
    display: none !important;
  }

  html[data-ln-page] body main :where(.display-title, .section-title, .editorial-title, .lab-title, .finale h2, .governance h2).ln-display-heading :where(em, span) {
    display: inline !important;
    margin: 0 !important;
  }
}

/* Tema funcional da página principal. */
html[data-ln-page="index"][data-theme="light"] {
  --black: #f7f5ef;
  --deep-black: #f1eee5;
  --white: #101820;
  --muted: #53616a;
  --line-dark: rgb(16 24 32 / .16);
}

html[data-ln-page="index"][data-theme="light"] body,
html[data-ln-page="index"][data-theme="light"] .dark-section {
  background: var(--paper);
  color: var(--text-dark);
}

html[data-ln-page="index"][data-theme="light"] .site-header {
  background: rgb(247 245 239 / .9);
  color: var(--text-dark);
  border-color: var(--line-light);
}

html[data-ln-page="index"][data-theme="light"] .hero {
  background: radial-gradient(circle at 70% 35%, rgb(7 95 255 / .1), transparent 34%), var(--paper);
}

/* O tema do manual para iniciantes deve usar os próprios tokens. */
html[data-ln-page="iniciantes"][data-theme="dark"] body,
html[data-ln-page="iniciantes"][data-theme="dark"] .roadmap-section,
html[data-ln-page="iniciantes"][data-theme="dark"] .foundations-section,
html[data-ln-page="iniciantes"][data-theme="dark"] .code-section {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

html[data-ln-page="iniciantes"][data-theme="dark"] .intro-hero::before {
  background:
    radial-gradient(circle at 82% 26%, rgb(166 237 66 / .13), transparent 25%),
    radial-gradient(circle at 72% 78%, rgb(7 95 255 / .12), transparent 21%),
    var(--paper) !important;
}

/* O controle de largura precisa alterar o espécime, não apenas os números. */
#readingCopy,
.reading-ruler {
  width: min(100%, var(--active-line, 65ch));
  max-width: var(--active-line, 65ch) !important;
}

/* Estado final dos catálogos. */
.ln-catalog-complete {
  display: none !important;
}

/* Modal com foco visual e título associado. */
dialog:focus-visible {
  outline: 3px solid var(--acid, #a6ed42);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  :root {
    --ln-mobile-title: clamp(2.65rem, 12.5vw, 3.75rem);
  }

  /* Heroes deixam de obedecer quebras artificiais no celular. */
  html[data-ln-page] body main .hero h1.ln-balanced-hero,
  html[data-ln-page] body main .intro-hero h1.ln-balanced-hero,
  html[data-ln-page] body main .ln-display-heading.ln-display-heading.ln-display-heading.ln-display-heading {
    width: min(100%, 12ch) !important;
    max-width: 12ch !important;
    font-size: var(--ln-mobile-title) !important;
    line-height: .98 !important;
    letter-spacing: -.04em !important;
    text-wrap: balance !important;
  }

  .ln-balanced-hero br {
    display: none;
  }

  .ln-balanced-hero > span,
  .ln-balanced-hero > em {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    white-space: normal !important;
    line-height: inherit !important;
  }

  .ln-balanced-hero > span + span::before,
  .ln-balanced-hero > em::before {
    content: " ";
  }

  /* A hero-assinatura MEDIDA / forma / SISTEMA permanece deliberadamente composta. */
  #heroTitle {
    max-width: 100% !important;
    font-size: clamp(3.45rem, 16vw, 4.35rem) !important;
    line-height: .9 !important;
  }

  :where(.editorial-title, .section-title, .display-title, .lab-title, .finale h2, .governance h2) {
    max-width: 100% !important;
    font-size: clamp(2.55rem, 11.5vw, 3.45rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.035em !important;
  }

  .hero-cta {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
    align-items: stretch !important;
  }

  .hero-cta :where(a, button) {
    width: 100%;
    min-height: 52px;
    white-space: nowrap;
  }

  :where(.filter-list, .element-filters, .niche-picker, .code-tabs) {
    width: 100%;
    max-width: 100%;
    margin-inline: 0 !important;
    padding-bottom: .45rem;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    mask-image: linear-gradient(90deg, #000 0 92%, transparent);
  }

  .catalog-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .result-count {
    justify-self: start;
  }

  .code-lab pre,
  .code-panel pre,
  .code-stage pre {
    width: 100%;
    max-width: calc(100vw - 32px);
  }

  /* A matriz vira cards verticais, sem tabela de 720 px. */
  .niche-matrix {
    display: grid;
    gap: .85rem;
    overflow: visible !important;
    border-top: 0 !important;
  }

  .niche-matrix .matrix-head {
    display: none !important;
  }

  .niche-matrix > div:not(.matrix-head) {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 1rem !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
    border: 1px solid rgb(255 255 255 / .16) !important;
    border-radius: 14px;
    background: rgb(255 255 255 / .035);
  }

  .niche-matrix > div:not(.matrix-head) > :where(b, span) {
    display: grid;
    gap: .15rem;
  }

  .niche-matrix > div:not(.matrix-head) > :where(b, span)::before {
    content: attr(data-ln-label);
    color: #8f98a5;
    font: 600 .62rem/1.3 "JetBrains Mono", monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  :where(.site-header, .universal-header) a,
  :where(.site-header, .universal-header) button {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}