/*
  Wortic UI Kit — chrome da wiki (ui-kit.wortic.com.br)

  NÃO é um componente do design system, e não inventa estilo: é o mesmo papel
  que foundation/demo.css faz nas páginas de catálogo — o "desktop" onde os
  componentes do kit aparecem. Toda cor, medida, raio, sombra, duração e
  tipografia sai de foundation/tokens.css + foundation/colors.css.

  As poucas medidas próprias da wiki viram tokens --wk-*, derivados dos --wm-*,
  declarados aqui em cima. Zero valor mágico solto, zero hex.

  Mora na cascade layer `overrides` — a última da ordem canônica declarada em
  foundation/reset.css. É o lugar previsto pelo sistema para o chrome de página
  ajustar um componente sem brigar de especificidade com ele.
*/

@layer overrides {
  :root {
    /* ---- tokens da wiki, todos derivados da escala do kit ---- */
    --wk-inset: var(--wm-space-4);
    --wk-sidebar-w: var(--wm-nav-sidebar-width);
    --wk-content-max: calc(var(--wm-bp-lg) - var(--wm-space-14));
    --wk-frame-min-h: calc(var(--wm-space-14) * 2);
    --wk-frame-max-h: calc(var(--wm-space-14) * 8);
    --wk-frame-exemplo-min-h: calc(var(--wm-space-13) * 2);
    --wk-logo-sm: var(--wm-icon-lg);
    --wk-card-min: var(--wm-grid-min-col);
    --wk-cat-card-min: var(--wm-grid-min-col-lg);
    --wk-login-w: calc(var(--wm-space-14) * 6);
    --wk-login-logo: calc(var(--wm-icon-xl) * 2);
    --wk-code-max-h: calc(var(--wm-space-14) * 5);
    --wk-hairline: var(--wm-border-width-hairline);
  }

  html,
  body.wk {
    height: 100%;
  }

  body.wk {
    margin: 0;
    overflow: hidden;
    font-family: var(--wm-font-family);
    font-size: var(--wm-font-size-body);
    line-height: var(--wm-leading-body);
    color: var(--wm-label-primary);
    background: var(--wm-wallpaper, var(--wm-surface-base));
    background-attachment: fixed;
  }

  body.wk ::selection {
    background: var(--wm-selection-bg);
  }

  body.wk ::-webkit-scrollbar {
    width: var(--wm-space-4);
    height: var(--wm-space-4);
  }
  body.wk ::-webkit-scrollbar-track,
  body.wk ::-webkit-scrollbar-corner {
    background: transparent;
  }
  body.wk ::-webkit-scrollbar-thumb {
    background: var(--wm-scrollbar-thumb);
    border-radius: var(--wm-radius-pill);
    border: var(--wm-space-1) solid transparent;
    background-clip: padding-box;
  }
  body.wk ::-webkit-scrollbar-thumb:hover {
    background: var(--wm-scrollbar-thumb-hover);
  }

  /* ============================================================
     SHELL — janela macOS ocupando a tela
     ============================================================ */
  .wk-shell {
    position: fixed;
    inset: var(--wk-inset);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  .wk-split {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
  }

  .wk-sidebar {
    width: var(--wk-sidebar-w);
    flex: 0 0 auto;
    min-height: 0;
  }

  .wk-content {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    scroll-behavior: smooth;
    background: var(--wm-surface-primary);
    padding: var(--wm-space-10) var(--wm-space-10) var(--wm-space-14);
  }

  .wk-content > * {
    max-width: var(--wk-content-max);
    margin-inline: auto;
  }

  /* ---- cabeçalho do site (nunca barra de janela macOS) ---- */
  .wk-topbar {
    gap: var(--wm-space-4);
    flex: 0 0 auto;
  }

  .wk-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-2);
    text-decoration: none;
    color: inherit;
    border-radius: var(--wm-radius-sm);
  }

  .wk-topbar__brand img {
    width: var(--wm-icon-md);
    height: var(--wm-icon-md);
    border-radius: var(--wm-radius-xs);
  }

  .wk-busca {
    flex: 0 1 var(--wm-search-bar-max-width);
    min-width: 0;
  }

  /* o × só existe quando há texto — o componente o mostra sempre */
  .wk-busca .wm-search-bar__clear[hidden] {
    display: none;
  }

  /* resultado da busca em uma linha: título encurta, dica não quebra */
  .wk-busca .wm-search-bar__suggestion-label {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .wk-busca .wm-search-bar__suggestion-hint {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* ---- sidebar ---- */
  .wk-sidebar__vazio {
    margin: var(--wm-space-6) var(--wm-space-4);
    color: var(--wm-label-tertiary);
    font-size: var(--wm-font-size-footnote);
    text-align: center;
  }

  .wk-sidebar .wm-sidebar__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wm-space-3);
  }

  /* ============================================================
     TIPOGRAFIA DA DOCUMENTAÇÃO — escala do kit, sem px solto
     ============================================================ */
  .wk-h1 {
    margin: 0 0 var(--wm-space-3);
    font-size: var(--wm-font-size-large-title);
    line-height: var(--wm-leading-large-title);
    letter-spacing: var(--wm-tracking-large-title);
    font-weight: var(--wm-font-weight-bold);
  }

  .wk-h2 {
    margin: 0 0 var(--wm-space-5);
    font-size: var(--wm-font-size-title2);
    line-height: var(--wm-leading-title2);
    letter-spacing: var(--wm-tracking-title2);
    font-weight: var(--wm-font-weight-semibold);
  }

  .wk-h3 {
    margin: var(--wm-space-7) 0 var(--wm-space-4);
    font-size: var(--wm-font-size-headline);
    line-height: var(--wm-leading-headline);
    letter-spacing: var(--wm-tracking-headline);
    font-weight: var(--wm-font-weight-semibold);
  }

  .wk-texto {
    margin: 0 0 var(--wm-space-4);
    max-width: var(--wm-bp-sm);
    color: var(--wm-label-secondary);
    line-height: var(--wm-line-height-relaxed);
  }

  .wk-texto--fraco {
    color: var(--wm-label-tertiary);
  }

  .wk-secao {
    margin-bottom: var(--wm-space-12);
    scroll-margin-top: var(--wm-space-8);
  }

  .wk-secao__sub {
    margin: calc(var(--wm-space-4) * -1) 0 var(--wm-space-5);
    color: var(--wm-label-tertiary);
    font-size: var(--wm-font-size-footnote);
  }

  /* ---- hero ---- */
  .wk-hero {
    margin-bottom: var(--wm-space-11);
    padding-bottom: var(--wm-space-8);
    border-bottom: var(--wk-hairline) solid var(--wm-separator);
  }

  .wk-hero--capa {
    text-align: center;
    border-bottom: none;
    padding-block: var(--wm-space-10) var(--wm-space-8);
  }

  .wk-hero__logo {
    width: var(--wm-icon-xl);
    height: auto;
    margin-bottom: var(--wm-space-5);
    filter: drop-shadow(0 var(--wm-space-2) var(--wm-space-6)
      hsl(var(--wm-shadow-color) / 0.3));
  }

  .wk-hero--capa .wk-hero__logo {
    width: var(--wk-login-logo);
    margin-inline: auto;
  }

  .wk-hero__titulo {
    background: var(--wm-brand-gradient, var(--wm-accent-gradient));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .wk-hero__resumo {
    margin: 0 auto;
    max-width: var(--wm-bp-sm);
    color: var(--wm-label-secondary);
    font-size: var(--wm-font-size-callout);
    line-height: var(--wm-line-height-relaxed);
  }

  .wk-hero:not(.wk-hero--capa) .wk-hero__resumo {
    margin-inline: 0;
  }

  .wk-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wm-space-3);
    margin-top: var(--wm-space-5);
  }

  .wk-crumbs {
    display: flex;
    align-items: center;
    gap: var(--wm-space-2);
    margin-bottom: var(--wm-space-4);
    font-size: var(--wm-font-size-footnote);
    color: var(--wm-label-tertiary);
  }

  .wk-crumbs a {
    color: var(--wm-accent-text, var(--wm-accent));
    text-decoration: none;
    border-radius: var(--wm-radius-xs);
  }

  .wk-crumbs a:hover {
    text-decoration: underline;
  }

  .wk-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--wm-grid-min-col-sm), 1fr));
    gap: var(--wm-space-4);
    margin-top: var(--wm-space-9);
    text-align: left;
  }

  /* ---- grades de cards ---- */
  .wk-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--wk-card-min), 1fr));
    gap: var(--wm-space-5);
  }

  .wk-grade--cat {
    grid-template-columns: repeat(auto-fill, minmax(var(--wk-cat-card-min), 1fr));
  }

  .wk-card-comp,
  .wk-card-cat {
    display: flex;
    text-decoration: none;
    color: inherit;
  }

  .wk-card-comp {
    flex-direction: column;
    gap: var(--wm-space-3);
  }

  .wk-card-comp__resumo {
    margin: 0;
    flex: 1 1 auto;
    color: var(--wm-label-secondary);
    font-size: var(--wm-font-size-footnote);
    line-height: var(--wm-line-height-relaxed);
  }

  .wk-card-comp__foot,
  .wk-card-cat__foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wm-space-2);
  }

  .wk-card-cat {
    gap: var(--wm-space-5);
    align-items: flex-start;
  }

  .wk-card-cat__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wm-control-height-lg);
    height: var(--wm-control-height-lg);
    flex: 0 0 auto;
    border-radius: var(--wm-radius-md);
    background: var(--wm-accent-fill);
    color: var(--wm-accent);
  }

  .wk-card-cat__corpo {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-3);
    min-width: 0;
  }

  .wk-card-cat__amostra {
    margin: 0;
    color: var(--wm-label-tertiary);
    font-size: var(--wm-font-size-footnote);
  }

  /* ---- duas colunas (quando usar / quando não usar) ---- */
  .wk-duas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--wm-grid-min-col), 1fr));
    gap: var(--wm-space-5);
  }

  .wk-card {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-4);
  }

  .wk-bullets {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-3);
  }

  .wk-bullet {
    display: flex;
    align-items: flex-start;
    gap: var(--wm-space-3);
    font-size: var(--wm-font-size-footnote);
    line-height: var(--wm-line-height-relaxed);
    color: var(--wm-label-secondary);
  }

  .wk-bullet .wm-icon {
    flex: 0 0 auto;
    margin-top: var(--wm-space-1);
  }

  .wk-bullet--sim .wm-icon {
    color: var(--wm-success);
  }

  .wk-bullet--nao .wm-icon {
    color: var(--wm-error);
  }

  .wk-bullet--a11y .wm-icon {
    color: var(--wm-accent);
  }

  /* ---- tabelas ---- */
  .wk-tabela {
    width: 100%;
    margin-bottom: var(--wm-space-5);
  }

  /* ---- chips de token / estado ---- */
  .wk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wm-space-2);
    margin-bottom: var(--wm-space-5);
  }

  .wk-chip--forte {
    background: var(--wm-accent-fill);
    color: var(--wm-accent-text, var(--wm-accent));
  }

  .wk-api__linha {
    display: flex;
    align-items: center;
    gap: var(--wm-space-3);
    margin-bottom: var(--wm-space-5);
  }

  .wk-api__rotulo {
    font-size: var(--wm-font-size-footnote);
    color: var(--wm-label-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--wm-letter-spacing-wide);
  }

  /* ============================================================
     PREVIEWS AO VIVO — o iframe é a variante de verdade
     ============================================================ */
  .wk-previews,
  .wk-exemplos {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-8);
  }

  .wk-preview {
    margin: 0;
    border: var(--wk-hairline) solid var(--wm-separator);
    border-radius: var(--wm-radius-lg);
    background: var(--wm-surface-secondary);
    overflow: hidden;
    box-shadow: var(--wm-shadow-1);
  }

  .wk-preview__head {
    display: flex;
    align-items: center;
    gap: var(--wm-space-3);
    padding: var(--wm-space-3) var(--wm-space-4);
    border-bottom: var(--wk-hairline) solid var(--wm-separator);
    background: var(--wm-surface-primary);
  }

  .wk-preview__title {
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-semibold);
  }

  .wk-preview__spacer {
    flex: 1 1 auto;
  }

  .wk-preview__frame {
    background: var(--wm-surface-primary);
  }

  .wk-preview__foot {
    padding: var(--wm-space-2) var(--wm-space-4);
    border-top: var(--wk-hairline) solid var(--wm-separator);
    background: var(--wm-surface-secondary);
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
  }

  .wk-frame {
    display: block;
    width: 100%;
    border: 0;
    min-height: var(--wk-frame-min-h);
    max-height: var(--wk-frame-max-h);
    background: transparent;
    color-scheme: normal;
  }

  .wk-preview__frame--exemplo .wk-frame {
    min-height: var(--wk-frame-exemplo-min-h);
    border: var(--wk-hairline) solid var(--wm-separator);
    border-radius: var(--wm-radius-md) var(--wm-radius-md) 0 0;
  }

  .wk-exemplo {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-3);
  }

  .wk-exemplo .wk-h3 {
    margin: 0;
  }

  /* ---- código ---- */
  .wk-code pre {
    max-height: var(--wk-code-max-h);
    overflow: auto;
  }

  .wk-tabs .wm-tabs__panel {
    padding-top: var(--wm-space-5);
  }

  .wk-tabs .wm-tabs__tab {
    gap: var(--wm-space-2);
  }

  .wk-alerta {
    margin-bottom: var(--wm-space-8);
  }

  /* ============================================================
     FUNDAÇÃO — as regras do sistema

     Aqui a wiki não pode listar nome: cor tem que aparecer como cor,
     medida como medida, duração andando na tela. Tudo abaixo é amostra
     do próprio token — nenhum valor literal, nenhum hex.
     ============================================================ */
  .wk-secao-fund .wm-sidebar__section-title {
    color: var(--wm-accent-text, var(--wm-accent));
  }

  .wk-grade--fund {
    grid-template-columns: repeat(auto-fill, minmax(var(--wk-card-min), 1fr));
  }

  .wk-card-fund {
    display: flex;
    gap: var(--wm-space-4);
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
  }

  .wk-card-fund__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wm-control-height-md);
    height: var(--wm-control-height-md);
    flex: 0 0 auto;
    border-radius: var(--wm-radius-sm);
    background: var(--wm-accent-fill);
    color: var(--wm-accent-text, var(--wm-accent));
  }

  /* uma tabela de referência da fundação tem até 11 colunas: ela sai da
     coluna de leitura (836px) e usa a largura toda, senão o texto da última
     coluna fica cortado dentro de um scroll horizontal que ninguém vê. */
  .wk-content > .wk-secao--larga {
    max-width: none;
  }

  .wk-secao--larga > .wk-h2,
  .wk-secao--larga > .wk-secao__sub {
    max-width: var(--wk-content-max);
  }

  /* a demonstração da fundação é a página de catálogo INTEIRA: cortá-la no
     teto de 512px do preview de variante deixava 80% dela num scroll interno
     que ninguém percebe. Aqui ela abre no tamanho natural. */
  .wk-frame--fundacao {
    max-height: none;
  }

  .wk-f-sumario {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wm-space-2);
    margin-bottom: var(--wm-space-9);
  }

  .wk-f-sumario__rotulo {
    color: var(--wm-label-tertiary);
    font-size: var(--wm-font-size-caption);
    text-transform: uppercase;
    letter-spacing: var(--wm-letter-spacing-wide);
    margin-right: var(--wm-space-2);
  }

  a.wk-f-atalho {
    text-decoration: none;
    color: inherit;
  }

  a.wk-f-atalho:hover {
    background: var(--wm-accent-fill);
    color: var(--wm-accent-text, var(--wm-accent));
  }

  .wk-f-rolagem {
    overflow-x: auto;
    margin-bottom: var(--wm-space-5);
  }

  .wk-f-tabela {
    margin-bottom: 0;
  }

  .wk-f-tabela td,
  .wk-f-tabela th {
    vertical-align: top;
  }

  .wk-f-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* o valor de um token pode ser um gradiente inteiro: quebra, nunca empurra
     a tabela para fora da tela (foi o que aconteceu no primeiro build) */
  .wk-f-valor,
  .wk-f-quebra {
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }

  .wk-f-tabela--tokens {
    table-layout: fixed;
    width: 100%;
  }

  .wk-f-col-amostra { width: var(--wm-space-14); }
  .wk-f-col-token   { width: 22%; }
  .wk-f-col-valor   { width: 16%; }
  .wk-f-col-usos    { width: calc(var(--wm-space-13)); }

  .wk-f-td-amostra {
    width: 1%;
    white-space: nowrap;
  }

  .wk-f-vazio {
    color: var(--wm-label-quaternary);
  }

  .wk-f-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wm-space-2);
    margin-top: var(--wm-space-2);
  }

  /* ---- regras numeradas ---- */
  .wk-f-regras {
    margin: 0;
    padding-left: var(--wm-space-7);
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-4);
  }

  .wk-f-regra {
    color: var(--wm-label-secondary);
    font-size: var(--wm-font-size-footnote);
    line-height: var(--wm-line-height-relaxed);
  }

  .wk-f-regra::marker {
    color: var(--wm-accent-text, var(--wm-accent));
    font-weight: var(--wm-font-weight-semibold);
  }

  /* ---- grupos dobráveis do inventário de tokens ---- */
  .wk-f-grupo {
    border: var(--wk-hairline) solid var(--wm-separator);
    border-radius: var(--wm-radius-lg);
    background: var(--wm-surface-secondary);
    margin-bottom: var(--wm-space-4);
    overflow: hidden;
  }

  .wk-f-grupo__cab {
    display: flex;
    align-items: center;
    gap: var(--wm-space-3);
    padding: var(--wm-space-4) var(--wm-space-5);
    cursor: pointer;
    font-size: var(--wm-font-size-subheadline);
    list-style: none;
  }

  .wk-f-grupo__cab::-webkit-details-marker {
    display: none;
  }

  .wk-f-grupo__cab::before {
    content: "";
    width: var(--wm-space-3);
    height: var(--wm-space-3);
    flex: 0 0 auto;
    border-right: var(--wm-border-width-thin) solid var(--wm-label-tertiary);
    border-bottom: var(--wm-border-width-thin) solid var(--wm-label-tertiary);
    transform: rotate(-45deg);
    transition: transform var(--wm-duration-fast) var(--wm-ease-standard);
  }

  .wk-f-grupo[open] > .wk-f-grupo__cab::before {
    transform: rotate(45deg);
  }

  .wk-f-grupo__cab:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-focus-ring-color);
    outline-offset: calc(var(--wm-focus-ring-offset) * -1);
  }

  .wk-f-grupo__titulo {
    font-weight: var(--wm-font-weight-semibold);
    margin-right: auto;
  }

  .wk-f-grupo__corpo {
    padding: 0 var(--wm-space-5) var(--wm-space-5);
    background: var(--wm-surface-primary);
    border-top: var(--wk-hairline) solid var(--wm-separator);
  }

  .wk-f-grupo__corpo > .wk-texto:first-child {
    padding-top: var(--wm-space-4);
  }

  .wk-f-stats {
    margin-top: 0;
    margin-bottom: var(--wm-space-6);
  }

  /* ---- amostras: cor, raio, medida ---- */
  .wk-f-cor,
  .wk-f-raio {
    display: block;
    width: var(--wm-icon-xl);
    height: var(--wm-icon-lg);
    border-radius: var(--wm-radius-sm);
    box-shadow: var(--wm-shadow-ring);
  }

  .wk-f-raio {
    background: var(--wm-accent);
  }

  .wk-f-barra {
    display: block;
    min-width: var(--wm-border-width-thin);
    height: var(--wm-space-4);
    border-radius: var(--wm-radius-pill);
    background: var(--wm-accent);
  }

  .wk-f-sombra-caixa {
    display: inline-flex;
    padding: var(--wm-space-4);
    border-radius: var(--wm-radius-md);
    background: var(--wm-fill-quaternary);
  }

  .wk-f-sombra {
    display: block;
    width: var(--wm-control-height-lg);
    height: var(--wm-control-height-sm);
    border-radius: var(--wm-radius-md);
    background: var(--wm-surface-elevated, var(--wm-surface-primary));
  }

  .wk-f-camada {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--wm-control-height-lg);
    height: var(--wm-control-height-md);
    border-radius: var(--wm-radius-md);
    font-size: var(--wm-font-size-caption);
    font-variant-numeric: tabular-nums;
    color: var(--wm-label-secondary);
  }

  /* ---- a grade, desenhada com o número de colunas e o gutter reais ---- */
  .wk-f-colunas {
    display: grid;
    grid-template-columns: repeat(var(--wk-cols, 12), 1fr);
    gap: var(--wm-space-1);
    width: calc(var(--wm-space-14) * 2.4);
  }

  .wk-f-colunas > span {
    height: var(--wm-space-8);
    border-radius: var(--wm-radius-xs);
    background: var(--wm-accent-fill);
    box-shadow: inset 0 0 0 var(--wm-border-width-thin) var(--wm-accent);
  }

  /* ---- densidade: a caixa tem a altura real do modo ---- */
  .wk-f-dens__ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--wm-density-height);
    min-width: var(--wm-density-row);
    padding-inline: var(--wm-density-pad);
    border-radius: var(--wm-density-radius);
    font-size: var(--wm-density-font);
    line-height: var(--wm-density-leading);
    background: var(--wm-fill-secondary);
    color: var(--wm-label-primary);
    box-shadow: var(--wm-shadow-ring);
  }

  /* ---- iconografia ---- */
  .wk-f-par {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-3);
    color: var(--wm-label-secondary);
    white-space: nowrap;
  }

  .wk-f-glifo {
    display: inline-flex;
    color: var(--wm-label-secondary);
  }

  .wk-f-glifo--cheio {
    color: var(--wm-label-primary);
  }

  /* estado ativo: o kit não tem estrela cheia no sprite — quem diz "ligado" é
     o chip de accent por baixo do glifo de traço. É o que existe hoje. */
  .wk-f-glifo--ativo {
    align-items: center;
    justify-content: center;
    width: var(--wm-control-height-md);
    height: var(--wm-control-height-md);
    border-radius: var(--wm-radius-sm);
    background: var(--wm-accent-fill);
    color: var(--wm-accent-text, var(--wm-accent));
  }

  .wk-f-glifo-badge {
    gap: var(--wm-space-1);
  }

  /* ---- movimento: o ponto percorre a pista no tempo EXATO do token ----
     O deslocamento ocupa 30% do ciclo; o resto é pausa. Por isso o ciclo é
     derivado da duração (dur / 0.3), e não um número escolhido a dedo. */
  .wk-f-pista {
    --wk-percurso: calc(var(--wm-space-14) * 1.5
      - var(--wm-space-5) - var(--wm-space-1) * 2);
    position: relative;
    display: block;
    width: calc(var(--wm-space-14) * 1.5);
    height: var(--wm-space-6);
    border-radius: var(--wm-radius-pill);
    background: var(--wm-fill-tertiary);
    overflow: hidden;
  }

  .wk-f-pista__ponto {
    position: absolute;
    inset-block: var(--wm-space-1);
    inset-inline-start: var(--wm-space-1);
    width: var(--wm-space-5);
    border-radius: var(--wm-radius-pill);
    background: var(--wm-accent);
    /* ida (dur) · pausa (dur) · volta (dur) · pausa (dur) — o ciclo inteiro é
       4× a duração do token, então cada trecho ANDADO dura o tempo real dele */
    animation: wk-f-percurso calc(var(--wk-dur, var(--wm-duration-normal)) * 4) infinite;
    animation-timing-function: var(--wk-ease, cubic-bezier(0.4, 0, 0.2, 1));
  }

  @keyframes wk-f-percurso {
    0% { transform: translateX(0); }
    25% { transform: translateX(var(--wk-percurso)); }
    50% { transform: translateX(var(--wk-percurso)); }
    75% { transform: translateX(0); }
    100% { transform: translateX(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .wk-f-pista__ponto {
      animation: none;
      transform: translateX(calc(var(--wk-percurso) / 2));
    }
  }

  .wk-rodape {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--wm-space-3);
    padding-top: var(--wm-space-7);
    border-top: var(--wk-hairline) solid var(--wm-separator);
    color: var(--wm-label-tertiary);
    font-size: var(--wm-font-size-caption);
  }

  /* ============================================================
     LOGIN — mesma linguagem, feito com os componentes do kit
     ============================================================ */
  body.wk-login {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--wm-space-6);
    overflow: auto;
  }

  .wk-login__cartao {
    width: 100%;
    max-width: var(--wk-login-w);
  }

  .wk-login__corpo {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-6);
    padding: var(--wm-space-10) var(--wm-space-9) var(--wm-space-9);
    text-align: center;
  }

  .wk-login__logo {
    width: var(--wk-login-logo);
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 var(--wm-space-2) var(--wm-space-6)
      hsl(var(--wm-shadow-color) / 0.3));
  }

  .wk-login__titulo {
    margin: 0;
    font-size: var(--wm-font-size-title2);
    line-height: var(--wm-leading-title2);
    letter-spacing: var(--wm-tracking-title2);
    font-weight: var(--wm-font-weight-semibold);
  }

  .wk-login__sub {
    margin: calc(var(--wm-space-4) * -1) 0 0;
    color: var(--wm-label-secondary);
    font-size: var(--wm-font-size-footnote);
  }

  .wk-login__form {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-5);
    text-align: left;
  }

  .wk-login__acoes {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-3);
    margin-top: var(--wm-space-2);
  }

  .wk-login__rodape {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wm-space-2);
    color: var(--wm-label-tertiary);
    font-size: var(--wm-font-size-caption);
  }

  .wk-login__tema {
    position: fixed;
    top: var(--wm-space-5);
    right: var(--wm-space-5);
    z-index: var(--wm-z-toolbar);
  }

  /* ============================================================
     RESPONSIVO
     ============================================================ */
  @media (max-width: 900px) {
    .wk-shell {
      inset: 0;
      border-radius: 0;
    }
    .wk-sidebar {
      display: none;
    }
    .wk-content {
      padding: var(--wm-space-7) var(--wm-space-5) var(--wm-space-12);
    }
    .wk-busca {
      flex: 1 1 auto;
    }
    .wk-topbar__brand .wk-topbar__title {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .wk-content {
      scroll-behavior: auto;
    }
  }
}

/* Cabeçalho do site — substitui a barra de janela do macOS.
   Regra do Will (08/08/2026): janela macOS dentro de site fica feio e não faz
   sentido, porque não dá para minimizar nem maximizar. Aqui é cabeçalho de
   site: marca, busca e ações. */
.wk-topbar {
  display: flex;
  align-items: center;
  gap: var(--wm-space-6);
  height: 52px;
  padding-inline: var(--wm-space-9);
  background: var(--wm-material-toolbar-bg);
  backdrop-filter: blur(var(--wm-material-blur)) saturate(var(--wm-material-saturate));
  -webkit-backdrop-filter: blur(var(--wm-material-blur)) saturate(var(--wm-material-saturate));
  box-shadow: inset 0 -0.5px 0 var(--wm-separator);
  position: sticky;
  top: 0;
  z-index: var(--wm-z-toolbar);
}
.wk-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--wm-space-4);
  color: var(--wm-label-primary);
  text-decoration: none;
  flex: none;
}
.wk-topbar__title {
  font-size: var(--wm-font-size-headline);
  font-weight: var(--wm-font-weight-semibold);
  letter-spacing: var(--wm-tracking-headline);
}