@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, portal, usuário) 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(--area-header-bg);
    border-block-end: 0.0625rem solid var(--line);
  }

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

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

  /* A marca é área própria (P5.6.S1/S2): o par texto × superfície vem dos tokens, nunca herdado
     de um cartão — o título precisa de contraste próprio e medido. */
  .cms-header__title {
    color: var(--ink);
    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__search-label {
    white-space: nowrap;
  }

  /* ── Menu de usuário (nativo `<details>`): abre sem JS e fecha com o mesmo clique ── */
  .cms-user {
    position: relative;
  }

  .cms-user__trigger {
    list-style: none;
    cursor: pointer;
  }

  .cms-user__trigger::-webkit-details-marker {
    display: none;
  }

  .cms-user__name {
    max-inline-size: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cms-user__chevron {
    rotate: 90deg;
  }

  .cms-user[open] > .cms-user__trigger .cms-user__chevron {
    rotate: -90deg;
  }

  .cms-user__panel {
    position: absolute;
    inset-block-start: calc(100% + 0.375rem);
    inset-inline-end: 0;
    z-index: var(--z-sticky);
    min-inline-size: 15rem;
    max-inline-size: calc(100vw - 2rem);
    padding: 0.75rem;
    background: var(--surface);
    border: 0.0625rem solid var(--line);
    border-radius: var(--tenant-radius);
    box-shadow: var(--shadow-card);
  }

  .cms-user__identity {
    display: grid;
    gap: 0.125rem;
    margin-block-end: 0.5rem;
    padding-block-end: 0.5rem;
    border-block-end: 0.0625rem solid var(--line);
  }

  .cms-user__identity-name {
    color: var(--ink);
    font-weight: 600;
  }

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

  .cms-user__email {
    color: var(--ink-muted);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
  }

  .cms-user__actions {
    display: grid;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cms-user__actions a,
  .cms-user__actions button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    inline-size: 100%;
    padding: 0.5rem 0.625rem;
    border: 0;
    border-radius: var(--tenant-radius);
    background: transparent;
    color: var(--ink);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }

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

  .cms-user__actions a[aria-current='page'] {
    font-weight: 600;
  }

  .cms-user__logout {
    margin: 0;
  }

  /* ── 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) ──
     O tom vem do shell (`data-cms-sidebar-tone`, ADR-036/P5.6.S1): a navegação é uma **área**
     com fundo, texto, linha e estado ativo próprios — não a mesma superfície do miolo. */
  .cms-sidebar {
    background: var(--area-sidebar-bg);
    color: var(--area-sidebar-ink);
    border-block-start: 0.0625rem solid var(--area-sidebar-line);
  }

  [data-cms-sidebar-tone='inverted'] .cms-sidebar {
    --area-sidebar-bg: var(--surface-inverse);
    --area-sidebar-ink: var(--ink-inverse);
    --area-sidebar-line: oklch(97% 0.002 247.84 / 0.24);
    --area-sidebar-hover-bg: oklch(97% 0.002 247.84 / 0.12);
    --area-sidebar-active-bg: var(--surface-raised);
    --area-sidebar-active-ink: var(--ink);
  }

  [data-cms-sidebar-tone='surface'] .cms-sidebar {
    --area-sidebar-bg: var(--surface);
    --area-sidebar-ink: var(--ink);
    --area-sidebar-line: var(--line);
    --area-sidebar-hover-bg: var(--surface-muted);
    --area-sidebar-active-bg: var(--surface-muted);
    --area-sidebar-active-ink: var(--ink);
  }

  /* A lista do daisyUI herda `--color-base-content` (tinta do miolo); na área invertida o par
     vem dos tokens da área, inclusive no item atual. */
  .cms-sidebar .menu li > a,
  .cms-sidebar .menu li > span {
    color: var(--area-sidebar-ink);
  }

  .cms-sidebar .menu li > a:hover,
  .cms-sidebar .menu li > a:focus-visible {
    background-color: var(--area-sidebar-hover-bg);
    color: var(--area-sidebar-ink);
  }

  .cms-sidebar .menu li > a[aria-current='page'] {
    background-color: var(--area-sidebar-active-bg);
    color: var(--area-sidebar-active-ink);
  }

  /* ── Grupos recolhíveis (`<details>` nativo — P5.6.S2) ──
     O grupo da rota atual nasce aberto no HTML; cor, hover e estado ativo vêm dos tokens da
     **área** (nunca da tinta do miolo). O indicador de aberto/fechado é o `::after` do daisyUI
     (rotaciona no `[open]`), então não há segundo ícone. Recolher não anima; abrir tem transição
     curta e desligável por movimento reduzido. */
  .cms-nav__label {
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  @keyframes cms-nav-reveal {
    from {
      opacity: 0;
      translate: 0 -0.25rem;
    }

    to {
      opacity: 1;
      translate: 0 0;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    html:not([data-a11y-motion='reduced']) .cms-nav__details[open] > .cms-nav__items {
      animation: cms-nav-reveal 0.14s ease-out;
    }
  }

  .cms-sidebar__nav {
    padding: 0.75rem;
  }

  .cms-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem clamp(0.75rem, 2vw, 1.25rem);
    border-block-start: 0.0625rem solid var(--line);
    font-size: 0.75rem;
  }

  .cms-footer__meta {
    opacity: 0.8;
  }

  /* Âncora nativa (`#cms-content`): funciona sem JS e devolve o foco à tela (WCAG 2.4.1). */
  .cms-footer__top {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  .cms-footer__top-icon {
    rotate: -90deg;
  }

  /* ── Dashboard (P5.6.S2): conta, atalhos e leitura de operação ── */
  .cms-dashboard__account {
    display: grid;
    gap: 0.25rem;
    margin-block-start: 0.5rem;
  }

  .cms-dashboard__account-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
  }

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

  .cms-dashboard__account-row dd {
    margin: 0;
    overflow-wrap: anywhere;
  }

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

  .cms-dashboard__shortcuts {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cms-dashboard__shortcuts > li > a {
    inline-size: 100%;
    justify-content: flex-start;
  }

  @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(--area-sidebar-line);
    }
    [data-cms-sidebar='right'] .cms-sidebar {
      border-inline-start: 0.0625rem solid var(--area-sidebar-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(--area-sidebar-ink);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  /* Summary do grupo (`<details>`): o daisyUI pinta com a tinta do miolo e distribui as colunas
     pelo conteúdo — na área invertida o par vem dos tokens da área e o rótulo ocupa a linha
     (indicador nativo `::after` à direita). */
  .cms-sidebar .menu li > details > summary {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.5rem;
    color: var(--area-sidebar-ink);
    font-weight: 600;
  }

  .cms-sidebar .menu li > details > summary:hover,
  .cms-sidebar .menu li > details > summary:focus-visible {
    background-color: var(--area-sidebar-hover-bg);
    color: var(--area-sidebar-ink);
  }

  /* Na área invertida o anel de foco padrão (azul) cai a ~2,3:1 sobre o fundo escuro; o par
     `--ink-inverse` devolve o contraste do indicador (WCAG 1.4.11/2.4.11). */
  [data-cms-sidebar-tone='inverted'] .cms-sidebar :where(a, summary, button):focus-visible {
    outline-color: var(--ink-inverse);
  }

  /* ── 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 e o resumo dos grupos, que não são controles nativos. */
  @media (pointer: coarse) {
    .cms-sidebar__nav a,
    .cms-palette__list a,
    .cms-orbit__item a,
    .cms-user__actions a,
    .cms-user__actions button,
    .cms-footer__top {
      display: flex;
      align-items: center;
      min-block-size: 2.75rem;
    }

    /* O summary do grupo é `grid` (rótulo + indicador): só a altura do alvo muda aqui. */
    .cms-nav__summary {
      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;
    }
  }
}

@layer components {
  /* ── Listas: cabeçalho fixo, ordenação e ações rotuladas (P5.6.S3) ─────────────────────── */

  /*
    O contêiner de rolagem da tabela também é o `scrollport` do cabeçalho: com muitas linhas o
    `<thead>` acompanha a rolagem em vez de sumir. A altura é limitada em `dvh` (nunca `px`) para
    não estourar a tela em celular, e a tabela continua rolando na horizontal quando precisa.
  */
  .cms-table-scroll {
    max-block-size: 70dvh;
    overflow: auto;
    overscroll-behavior: contain;
  }

  .cms-table-scroll thead > tr > th {
    /* `sticky` já pinta acima das linhas no fluxo: nenhum `z-index` numérico (allowlist de tokens). */
    position: sticky;
    inset-block-start: 0;
    background: var(--surface);
    /* `border-collapse: collapse` perde a borda do th sticky ao rolar: a sombra interna mantém
       a linha divisória sem depender do colapso de bordas. */
    box-shadow: inset 0 -0.0625rem 0 var(--line);
  }

  /* A coluna ordenável é um link real (o servidor decide ordem e desempate — ADR-001); o ícone
     mostra o estado atual e o texto do estado vai em `sr-only` no componente. */
  .cms-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  .cms-sort__icon {
    inline-size: 0.875rem;
    block-size: 0.875rem;
    transform: rotate(-90deg);
  }

  .cms-sort__icon[data-direction='descending'] {
    transform: rotate(90deg);
  }

  .cms-sort__icon[data-direction='none'] {
    opacity: 0.4;
    transform: none;
  }

  /*
    Rótulo da ação de linha: visível no desktop, `sr-only` no ponteiro grosso. O nome acessível
    não muda — só a apresentação; a linha inteira nunca é clicável (a ação é o link/botão real).
  */
  .cms-action-label {
    position: absolute;
    inline-size: 0.0625rem;
    block-size: 0.0625rem;
    padding: 0;
    margin: -0.0625rem;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  @media (min-width: 64rem) {
    .cms-action-label {
      position: static;
      inline-size: auto;
      block-size: auto;
      margin: 0;
      overflow: visible;
      clip-path: none;
      white-space: normal;
    }
  }

  /* ── Filtros: `<details>` nativo e resumo dos filtros ativos ──────────────────────────── */

  /* Sem `display: flex` no `summary`: o triângulo nativo é o indicador de que há mais filtros
     (o `<details>` continua abrindo sem JS). */
  .cms-filter__summary {
    min-block-size: 2.75rem;
    padding-block: 0.5rem;
    font-weight: 600;
    cursor: pointer;
  }

  .cms-filter__fields {
    padding-block-start: 0.5rem;
  }

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

  .cms-filter__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 0.375rem;
  }

  .cms-filter__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding-inline: 0.5rem 0.25rem;
    padding-block: 0.25rem;
    border: 0.0625rem solid var(--line);
    border-radius: var(--radius-selector);
    background: var(--surface-muted);
    font-size: 0.875rem;
  }

  .cms-filter__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: var(--radius-selector);
    color: var(--ink-muted);
  }

  .cms-filter__chip-remove:hover,
  .cms-filter__chip-remove:focus-visible {
    color: var(--ink);
  }

  @media (pointer: coarse) {
    .cms-filter__chip-remove {
      inline-size: 2.75rem;
      block-size: 2.75rem;
    }
  }

  /* ── Formulários: barra de ações sticky e estados de envio ───────────────────────────── */

  /*
    A barra fica presa ao rodapé da tela (`sticky`, não `fixed`): enquanto o formulário está em
    vista, o salvar/cancelar continua alcançável sem cobrir campo nenhum — o conteúdo rola por
    baixo dela e a barra pertence ao formulário (nunca flutua sobre outra tela).
  */
  .cms-form-actions {
    position: sticky;
    inset-block-end: 0;
    z-index: var(--z-sticky);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-block-start: 0.5rem;
    padding-block: 0.75rem;
    padding-inline: 0.25rem;
    background: var(--surface);
    border-block-start: 0.0625rem solid var(--line);
  }

  .cms-form-actions__status {
    color: var(--ink-muted);
    font-size: 0.875rem;
  }

  .cms-form-actions__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-inline-start: auto;
  }

  /* Alerta com link de contexto ("ver no portal"): o texto nunca é só o link. */
  .cms-alert__body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
  }
}