@layer components {
  /*
    Shell do CMS — presença e posição das regiões são **dado** (ADR-036).
    Uma grade, propriedades lógicas e nenhuma medição em JS: sem reflow, CLS 0.
  */

  .cms-body {
    display: flex;
    flex-direction: column;
    min-block-size: 100dvh;
    background: var(--surface-muted);
    color: var(--ink);
  }

  /* ── Header (região opcional) ── */
  .cms-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    display: flex;
    /* Em telas estreitas os controles (marca, busca, usuário, perfil, sair) quebram linha em vez
       de estourar a largura: o `min-content` da linha única (≈575px) fazia o Chromium móvel
       ampliar o layout viewport e **desalinhar o ponteiro** (a página inteira ficava com zoom-out;
       o e2e de toque não alcançava os botões abaixo do editor — achado P5.S6.1). */
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem clamp(0.75rem, 2vw, 1.25rem);
    background: var(--surface);
    border-block-end: 0.0625rem solid var(--line);
  }

  .cms-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    text-decoration: none;
  }

  .cms-header__logo {
    block-size: 2rem;
    inline-size: auto;
  }

  .cms-header__title {
    font-size: 1.125rem;
  }

  .cms-header__user {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    margin-inline-start: auto;
    min-inline-size: 0;
  }

  .cms-header__name {
    font-size: 0.875rem;
    opacity: 0.8;
  }

  /* ── Acesso ao painel (ADR-037): mesma identidade, sem regiões de navegação ── */
  .cms-auth {
    display: grid;
    place-items: center;
    min-block-size: 100dvh;
    padding: clamp(1rem, 4vw, 2.5rem);
  }

  /* Login: o cartão centraliza no espaço que sobra **abaixo** da barra de a11y, sem somar
     `100dvh` à barra e criar rolagem. `:has` é progressivo; sem ele vale o min-height abaixo. */
  @supports selector(:has(*)) {
    .cms-main:has(> .cms-auth) {
      display: flex;
      flex-direction: column;
    }

    .cms-main:has(> .cms-auth) .cms-auth {
      flex: 1;
      min-block-size: 0;
    }
  }

  .cms-auth__card {
    inline-size: min(100%, 24rem);
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--surface);
    border: 0.0625rem solid var(--line);
    border-radius: var(--tenant-radius);
  }

  .cms-auth__title {
    margin-block-end: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
  }

  .cms-auth__form {
    display: grid;
    gap: 1rem;
  }

  .cms-header__toggle {
    display: none;
  }

  /* ── Frame: uma grade; a posição decide a ordem das colunas ──
     `minmax(0, 1fr)` (não `1fr`): a trilha não pode crescer até o min-content de uma tabela —
     sem isso, tabela larga no mobile estoura o viewport em vez de rolar no próprio contêiner. */
  .cms-frame {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    flex: 1;
    min-block-size: 0;
    --cms-sidebar-width: 18rem;
  }

  .cms-frame__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-block-size: 0;
    min-inline-size: 0;
  }

  .cms-main {
    flex: 1;
    padding: clamp(1rem, 2vw, 1.5rem);
    min-inline-size: 0;
  }

  /* O header é sticky: qualquer alvo alcançado por âncora, foco ou `scrollIntoView` precisa de
     margem para não ficar **atrás** dele (WCAG 2.4.11 — foco não obscurecido). 4rem cobre o logo
     de 2rem + padding do header, inclusive com a barra de acessibilidade acima. */
  .cms-main :where(a, button, input, select, textarea, summary, [tabindex]) {
    scroll-margin-block: 4rem 1rem;
  }

  .cms-page-title {
    margin-block-end: 0.5rem;
    font-size: 1.375rem;
    font-weight: 600;
  }

  /* Largura da coluna: escala fechada (`config/cms.php` — coberta por teste). */
  [data-cms-sidebar-width='16rem'] .cms-frame {
    --cms-sidebar-width: 16rem;
  }
  [data-cms-sidebar-width='18rem'] .cms-frame {
    --cms-sidebar-width: 18rem;
  }
  [data-cms-sidebar-width='20rem'] .cms-frame {
    --cms-sidebar-width: 20rem;
  }
  [data-cms-sidebar-width='22rem'] .cms-frame {
    --cms-sidebar-width: 22rem;
  }

  /* ── Sidebar (região opcional; coluna à esquerda ou à direita) ── */
  .cms-sidebar {
    background: var(--surface);
    border-block-start: 0.0625rem solid var(--line);
  }

  .cms-sidebar__nav {
    padding: 0.75rem;
  }

  .cms-footer {
    padding: 0.75rem clamp(0.75rem, 2vw, 1.25rem);
    border-block-start: 0.0625rem solid var(--line);
    font-size: 0.75rem;
    opacity: 0.7;
  }

  @media (min-width: 64rem) {
    [data-cms-sidebar='left'] .cms-frame {
      grid-template-columns: var(--cms-sidebar-width) minmax(0, 1fr);
    }
    [data-cms-sidebar='right'] .cms-frame {
      grid-template-columns: minmax(0, 1fr) var(--cms-sidebar-width);
    }

    .cms-sidebar {
      position: sticky;
      inset-block-start: 0;
      block-size: 100dvh;
      overflow-y: auto;
      border-block-start: 0;
    }

    [data-cms-sidebar='left'] .cms-sidebar {
      border-inline-end: 0.0625rem solid var(--line);
    }
    [data-cms-sidebar='right'] .cms-sidebar {
      border-inline-start: 0.0625rem solid var(--line);
    }
  }

  /*
    Telas pequenas: **sem JS** a navegação fica no fluxo (visível e utilizável).
    Com JS (`data-cms-js`) vira painel off-canvas — estável, fora do fluxo, sem CLS.
  */
  @media (max-width: 63.999rem) {
    [data-cms-js] .cms-header__toggle {
      display: inline-flex;
    }

    [data-cms-js] .cms-sidebar {
      position: fixed;
      inset-block: 0;
      inset-inline-start: 0;
      z-index: var(--z-toast);
      inline-size: min(85vw, var(--cms-sidebar-width));
      overflow-y: auto;
      translate: -100% 0;
      transition: translate 0.2s ease-out;
    }

    [data-cms-js][data-cms-sidebar='right'] .cms-sidebar {
      inset-inline-start: auto;
      inset-inline-end: 0;
      translate: 100% 0;
    }

    [data-cms-js] .cms-body.is-sidebar-open .cms-sidebar {
      translate: 0 0;
    }
  }

  .cms-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: oklch(0% 0 0 / 0.45);
  }

  .cms-sidebar__section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    opacity: 0.8;
  }

  /* ── Navegação rápida (Ctrl+K): popover nativo; o filtro é enhancement ── */
  .cms-palette {
    inline-size: min(100% - 2rem, 34rem);
    margin-inline: auto;
    margin-block-start: 10dvh;
    padding: 0;
    background: transparent;
    border: 0;
    overflow: visible;
  }

  .cms-palette__panel {
    padding: 0.75rem;
    background: var(--surface);
    border: 0.0625rem solid var(--line);
    border-radius: var(--tenant-radius);
    box-shadow: 0 0.75rem 2rem oklch(0% 0 0 / 0.3);
  }

  .cms-palette__list {
    max-block-size: min(60dvh, 24rem);
    margin-block-start: 0.5rem;
    padding: 0;
    overflow-y: auto;
    list-style: none;
  }

  .cms-palette__list a {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: var(--tenant-radius);
    text-decoration: none;
  }

  /* Destino + de onde ele vem (o grupo): dois títulos iguais em módulos diferentes se distinguem. */
  .cms-palette__title {
    display: block;
  }

  .cms-palette__context {
    display: block;
    color: var(--ink-muted);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .cms-palette__list a:hover,
  .cms-palette__list a:focus-visible {
    background: var(--surface-muted);
  }

  .cms-palette__hint {
    padding-inline: 0.25rem;
    border: 0.0625rem solid var(--line);
    border-radius: 0.25rem;
    font-size: 0.75rem;
  }

  .cms-palette__empty {
    padding: 0.5rem 0.75rem;
    opacity: 0.8;
  }

  /* ── Diálogo acionável (Popover nativo — sem JS) ── */
  .cms-modal {
    inline-size: min(100% - 2rem, 32rem);
    margin: auto;
    padding: 0;
    background: transparent;
    border: 0;
    overflow: visible;
  }

  .cms-modal__panel {
    padding: clamp(1rem, 3vw, 1.5rem);
    background: var(--surface);
    border: 0.0625rem solid var(--line);
    border-radius: var(--tenant-radius);
    box-shadow: 0 0.5rem 1.5rem oklch(0% 0 0 / 0.25);
  }

  .cms-modal__title {
    margin-block-end: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
  }

  .cms-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-block-start: 1rem;
  }

  /* ── Modo `orbital`: botão flutuante fora do fluxo + menu acionável nativo (sem JS) ── */
  .cms-orbit {
    position: fixed;
    inset-block-end: 1.25rem;
    inset-inline-end: 1.25rem;
    z-index: var(--z-toast);
  }

  .cms-orbit__nav {
    position: fixed;
    inset-block-end: 6.5rem;
    inset-inline-end: 1.25rem;
    margin: 0;
    padding: 0.75rem;
    background: var(--surface);
    border: 0.0625rem solid var(--line);
    border-radius: var(--tenant-radius);
    box-shadow: 0 0.5rem 1.5rem oklch(0% 0 0 / 0.25);
  }

  .cms-orbit__list {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cms-orbit__item a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 3rem;
    block-size: 3rem;
    border: 0.0625rem solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
  }

  .cms-orbit__item a:hover {
    background: var(--surface-muted);
  }

  /*
    Órbita: os itens sobem em arco (trigonometria CSS). Sem suporte a `sin()`, a regra é
    descartada e os itens ficam alinhados em linha — mesma navegação, sem quebra.
  */
  @supports (width: calc(sin(1deg) * 1rem)) {
    .cms-orbit__item {
      translate: 0 calc(sin(calc(var(--i, 2) * 26deg)) * -3.25rem);
    }
  }

  /* N itens: o índice vem do próprio fluxo (CSS Values 5), sem gerar regra por posição.
     Sem `sibling-index()` o fallback são as seis regras `nth-child` abaixo. */
  @supports (width: calc(sibling-index() * 1rem)) {
    .cms-orbit__item {
      --i: calc(sibling-index() - 1);
    }
  }

  .cms-orbit__item:nth-child(1) {
    --i: 0;
  }
  .cms-orbit__item:nth-child(2) {
    --i: 1;
  }
  .cms-orbit__item:nth-child(3) {
    --i: 2;
  }
  .cms-orbit__item:nth-child(4) {
    --i: 3;
  }
  .cms-orbit__item:nth-child(5) {
    --i: 4;
  }
  .cms-orbit__item:nth-child(6) {
    --i: 5;
  }

  /* Ancoragem nativa (onde houver): o menu abre sobre o botão, sem valores mágicos. */
  @supports (position-anchor: --x) {
    .cms-orbit__trigger {
      anchor-name: --cms-orbit;
    }

    .cms-orbit__nav {
      position-anchor: --cms-orbit;
      inset: auto;
      position-area: top;
      margin-block-end: 1rem;
    }
  }

  /*
    Pré-visualização de tema (Configurações → Aparência): amostra real que consome os tokens
    publicados por `/theme.css`. Nenhum valor de tema aqui — só os `var(--tenant-*)`/`--font-content`
    e os tokens do design system, para o painel não reescrever CSS no banco (ADR-016/ADR-017).
  */
  .theme-preview {
    display: grid;
    gap: 0.75rem;
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 0.0625rem solid var(--line);
    border-radius: var(--radius-box);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-content);
  }

  .theme-preview__title {
    font-size: 1.25rem;
    font-weight: 600;
  }

  .theme-preview__heading {
    font-size: 1.125rem;
    font-weight: 600;
  }

  .theme-preview__text,
  .theme-preview__note {
    max-inline-size: 65ch;
  }

  .theme-preview__note {
    color: var(--ink-muted);
  }

  .theme-preview__link {
    color: var(--tenant-link);
    text-decoration: underline;
    text-underline-offset: 0.1875rem;
  }

  .theme-preview__tokens {
    display: grid;
    gap: 0.5rem;
  }

  .theme-preview__token {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
  }

  .theme-preview__token dt {
    font-weight: 600;
  }

  .theme-preview__token dd {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
    margin: 0;
    overflow-wrap: anywhere;
  }

  .theme-preview__swatch {
    display: inline-block;
    inline-size: 1rem;
    block-size: 1rem;
    border: 0.0625rem solid var(--line);
    border-radius: var(--radius-selector);
  }

  .theme-preview__swatch--color_primary {
    background: var(--tenant-primary);
  }

  .theme-preview__swatch--color_accent {
    background: var(--tenant-accent);
  }

  .theme-preview__swatch--color_link {
    background: var(--tenant-link);
  }
}

/*
  Correção de contraste do título de grupo: o daisyUI pinta `.menu-title` com `color-mix(… 50%,
  transparent)` e a mesma especificidade da nossa regra — o desempate é por **camada**. Em
  `@layer overrides` (depois de `components`) vence de forma determinística, sem `!important`.
*/
@layer overrides {
  .cms-sidebar .menu-title {
    color: var(--ink);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  /* ── Alvos do painel em ponteiro grosso (WCAG 2.2 SC 2.5.8) ──────────── */
  /* A folha compartilhada cobre `.btn`/`button`/`.input`; aqui vão os **links de navegação** do
     painel, que não são controles nativos. */
  @media (pointer: coarse) {
    .cms-sidebar__nav a,
    .cms-palette__list a,
    .cms-orbit__item a {
      display: flex;
      align-items: center;
      min-block-size: 2.75rem;
    }
  }
}

@layer components {
  /*
    Corpo do diálogo de edição (P5.S2.1): em telas pequenas o conteúdo rola **dentro** do diálogo
    — o rodapé de ações continua alcançável (alvo e teclado) e o modal não estoura o viewport.
  */
  .cms-dialog__body {
    max-block-size: 85dvh;
    overflow-y: auto;
    padding: 1.5rem;
  }

  /*
    Diálogo de edição de módulo (`<dialog>` nativo, P5.S2.1).

    Com JS o módulo abre o diálogo como modal. **Sem JS** os `<dialog>` que não estão abertos são
    exibidos no fluxo do formulário: os campos continuam editáveis e o botão de salvar continua
    valendo (progressive enhancement — ADR-010/ADR-025). O gatilho do diálogo, que sem JS não faz
    nada, sai da tela.
  */
  @media (scripting: none) {
    .cms-dialog[data-cms-dialog]:not([open]) {
      display: block;
      position: static;
      inline-size: auto;
      max-inline-size: none;
      margin-block: 1rem;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
    }

    [data-cms-dialog-trigger] {
      display: none;
    }
  }
}