/* MOCKA Lite 0.0.0 — gerado por `python -m mocka lite`. Não edite: regenere. */
/*
 * reset.css — CSS base/reset da Mocka (Blueprint §6.2).
 *
 * O runtime web da Mocka carrega, nesta ordem: reset → tokens gerados pelo tema
 * (Theme Engine) → CSS dos componentes. Os VALORES visuais vêm de variáveis de
 * tema (Blueprint §14): este arquivo NÃO fixa cores/fontes — ele só zera o
 * comportamento do navegador e prepara o terreno para os tokens.
 *
 * FASE 0: reset mínimo, placeholder. As custom properties abaixo são só
 * marcadores do que o Theme Engine vai preencher; nenhum tema real existe ainda.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  /* Preenchidos pelo Theme Engine em runtime (Fase 2). Sem fallback estético
     de propósito: a aparência é responsabilidade do tema, não do reset. */
  font-family: var(--mocka-ui-font);
  color: var(--mocka-text);
  background: var(--mocka-window);
}

img {
  max-width: 100%;
}

/* [hidden] vence qualquer display de componente (achado no Painel, 06/09: .mocka-button[hidden] aparecia) */
[hidden] { display: none !important; }

/*
 * safe-theme.css — Safe Theme da Mocka (Handoff "duas proteções", regra 1).
 *
 * Tema interno de RECUPERAÇÃO: faz parte do Core, não é editável, não depende
 * da pasta de temas, de fontes externas nem de icon packs. Garante que a
 * janela nunca apareça sem um conjunto mínimo válido de tokens — mesmo com o
 * Theme Engine (Fase 2) ausente ou o tema global corrompido.
 *
 * Não precisa ser bonito. Precisa existir sempre.
 */

:root {
  --mocka-ui-font: system-ui, "Segoe UI", sans-serif;
  --mocka-mono-font: ui-monospace, Consolas, monospace;
  --mocka-window: #ffffff;
  --mocka-surface: #f2f2f2;
  --mocka-text: #1a1a1a;
  --mocka-text-muted: #6b6b6b;
  --mocka-accent: #0a64c8;
  --mocka-border: #c8c8c8;
}

/*
 * base.css — comportamentos globais tematizados da Mocka (Blueprint §6.2).
 *
 * Carregado depois dos tokens (Safe Theme → tema). Só usa variáveis --mocka-*;
 * nada aqui fixa cor/fonte própria. Seed: Colinha e Agenda (08/2026):
 *  - barras de rolagem no tema (WebView2 = Chromium);
 *  - foco de teclado sempre visível, no acento;
 *  - a janela não rola como documento: quem rola são os painéis.
 */

html {
  font-size: var(--mocka-base-size, 13px);
}

body {
  font-family: var(--mocka-ui-font);
  font-size: var(--mocka-base-size, 13px);
  line-height: var(--mocka-line-height, 1.5);
  color: var(--mocka-text);
  background: color-mix(in srgb, var(--mocka-surface, var(--mocka-window)) var(--mocka-surface-alpha, 100%), transparent);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.mocka-mono {
  font-family: var(--mocka-mono-font);
  font-variant-numeric: tabular-nums;
}

::selection {
  background: var(--mocka-selection, var(--mocka-accent-soft));
}

:focus-visible {
  outline: var(--mocka-focus-ring, 2px) solid var(--mocka-accent);
  outline-offset: 2px;
}

::-webkit-scrollbar {
  width: var(--mocka-scrollbar-width, 12px);
  height: var(--mocka-scrollbar-width, 12px);
}
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--mocka-line);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: var(--mocka-radius-medium, 8px);
}
::-webkit-scrollbar-thumb:hover { background: var(--mocka-text-faint); }
::-webkit-scrollbar-corner { background: transparent; }

/* controles nativos (lista do <select>, date picker) seguem o modo da Mocka */
:root { color-scheme: light dark; }
:root[data-mocka-theme="light"] { color-scheme: light; }
:root[data-mocka-theme="dark"] { color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/*
 * layout.css — primitives de layout da Mocka (Blueprint §10).
 *
 * Classes previsíveis sobre HTML/CSS, sem DSL. Aparência vem dos tokens.
 * HERANÇA (D24): cada container lê `--mocka-<container>-*` com fallback no
 * token semântico (toolbar/statusbar ← surface-2, scroll ← panel, títulos ←
 * text-faint, fonte de título ← title-font). O tema só precisa da paleta.
 * Seed: Colinha e Agenda (08/2026) — "a janela É o app": casca full-bleed em
 * coluna, sem rolagem própria; a rolagem vive nos painéis.
 *
 *   .mocka-app          casca: coluna, 100vh, overflow hidden
 *   .mocka-toolbar      faixa superior do app (nome, versão, ações)
 *   .mocka-content      área de conteúdo (flex 1, min-height 0, padding)
 *   .mocka-statusbar    rodapé de status
 *   .mocka-stack / .mocka-row / .mocka-grid-2   composição
 *   .mocka-panel        painel com título opcional (.mocka-panel-title)
 *   .mocka-scroll       contêiner que rola (o único que rola)
 *   .mocka-field        rótulo + controle
 *   .mocka-actionbar    linha de ações no pé de uma tela
 *   .mocka-gap-*        espaçamento padronizado
 */

.mocka-app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: color-mix(in srgb, var(--mocka-surface) var(--mocka-surface-alpha, var(--mocka-backdrop-alpha, 100%)), transparent);
  color: var(--mocka-text);
}

.mocka-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--mocka-space-3, 12px);
  padding: var(--mocka-space-2, 8px) var(--mocka-space-3, 12px);
  background: color-mix(in srgb, var(--mocka-toolbar-background, var(--mocka-surface-2)) var(--mocka-surface-alpha, var(--mocka-backdrop-alpha, 100%)), transparent);
  color: var(--mocka-toolbar-color, var(--mocka-text));
  --_bd: var(--mocka-toolbar-border, var(--mocka-line));
  border-bottom: var(--mocka-border-width, 1px) solid var(--mocka-edge-hide, var(--_bd));
  user-select: none;
}
.mocka-toolbar .mocka-spacer { margin-left: auto; }

.mocka-app-name {
  font-family: var(--mocka-title-font, var(--mocka-ui-font));
  font-weight: 600;
  font-size: var(--mocka-title-size, 14px);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: var(--mocka-space-2, 8px);
}
.mocka-app-name::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--mocka-app-name-dot, var(--mocka-accent));
}
.mocka-app-version {
  font-family: var(--mocka-mono-font);
  font-size: var(--mocka-caption-size, 11px);
  color: var(--mocka-text-faint);
  font-weight: 400;
}

.mocka-content {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--mocka-space-5, 22px) clamp(16px, 2.4vw, 26px) var(--mocka-space-6, 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mocka-statusbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--mocka-space-4, 16px);
  padding: 6px var(--mocka-space-3, 12px);
  font-family: var(--mocka-mono-font);
  font-size: var(--mocka-caption-size, 11px);
  color: var(--mocka-statusbar-color, var(--mocka-text-faint));
  min-height: 28px;
  background: color-mix(in srgb, var(--mocka-statusbar-background, var(--mocka-surface-2)) var(--mocka-surface-alpha, var(--mocka-backdrop-alpha, 100%)), transparent);
  --_bd: var(--mocka-statusbar-border, var(--mocka-line));
  border-top: var(--mocka-border-width, 1px) solid var(--mocka-edge-hide, var(--_bd));
  user-select: none;
}

.mocka-stack { display: flex; flex-direction: column; min-height: 0; }
.mocka-row { display: flex; align-items: center; min-width: 0; }
.mocka-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
}
.mocka-grid-2 > * { display: flex; flex-direction: column; min-height: 0; }
@media (max-width: 760px) { .mocka-grid-2 { grid-template-columns: 1fr; } }

.mocka-gap-1 { gap: var(--mocka-space-1, 4px); }
.mocka-gap-2 { gap: var(--mocka-space-2, 8px); }
.mocka-gap-3 { gap: var(--mocka-space-3, 12px); }
.mocka-gap-4 { gap: var(--mocka-space-4, 16px); }
.mocka-gap-5 { gap: var(--mocka-space-5, 22px); }
.mocka-fill { flex: 1 1 auto; min-height: 0; min-width: 0; }

.mocka-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mocka-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 9px;
  font-size: var(--mocka-small-size, 12px);
  font-weight: 600;
  letter-spacing: var(--mocka-caption-tracking, 0.04em);
  text-transform: uppercase;
  font-family: var(--mocka-title-font, var(--mocka-ui-font));
  color: var(--mocka-panel-title-color, var(--mocka-text-faint));
}
.mocka-panel-title .mocka-count { font-weight: 400; text-transform: none; letter-spacing: 0; }

.mocka-scroll {
  flex: 1 1 auto;
  min-height: 60px;
  overflow: auto;
  background: color-mix(in srgb, var(--mocka-scroll-background, var(--mocka-panel)) var(--mocka-backdrop-alpha, 100%), transparent);
  --_bd: var(--mocka-scroll-border, var(--mocka-line));
  border: var(--mocka-border-width, 1px) solid var(--mocka-edge-hide, var(--_bd));
  border-radius: var(--mocka-scroll-radius, var(--mocka-radius-large, 9px));
}

.mocka-field { margin-bottom: var(--mocka-space-4, 16px); }
.mocka-field > label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--mocka-small-size, 12px);
  font-weight: 600;
  letter-spacing: var(--mocka-label-tracking, 0.02em);
  color: var(--mocka-field-label-color, var(--mocka-text-soft));
}
.mocka-field .mocka-control { display: flex; gap: var(--mocka-space-2, 8px); }

.mocka-actionbar {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mocka-space-3, 12px) var(--mocka-space-4, 16px);
  margin-top: var(--mocka-space-5, 22px);
  padding-top: 18px;
  border-top: var(--mocka-border-width, 1px) solid var(--mocka-line);
}

/* rodapé canônico (statusbar.js): mensagem à esquerda, ações do app à direita */
.mocka-statusbar-message { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mocka-statusbar-message[data-kind="ok"] { color: var(--mocka-ok); }
.mocka-statusbar-message[data-kind="warn"] { color: var(--mocka-warn); }
.mocka-statusbar-message[data-kind="danger"] { color: var(--mocka-danger); }
.mocka-statusbar-actions { display: flex; align-items: center; gap: var(--mocka-space-4, 16px); margin-left: auto; }

/*
 * button.css — botão da Mocka (Foundation, Blueprint §12.1). PROTÓTIPO.
 *
 * O app diz a semântica (.mocka-button, --primary, --icon); o tema decide a
 * aparência (§4.4). Estados: hover, active, pressed (aria-pressed),
 * focus-visible, disabled.
 *
 * Variáveis internas --_bg/--_bd guardam fundo e borda do estado atual; o
 * traço desenhado (effects.css) as reaproveita.
 * HERANÇA (D24): cada propriedade lê `--mocka-button-*` com fallback no token
 * semântico. O tema só precisa da paleta; `components.button.*` no JSON
 * sobrescreve um aspecto pontual. Mapa:
 *   background   ← surface        color        ← text-soft
 *   border       ← line           hover-border ← accent
 *   hover-color  ← accent-ink     active-bg    ← surface-2
 *   primary-bg   ← accent         primary-color← on-accent
 *   primary-border ← primary-bg   primary-shadow ← sombra na cor do primary-bg
 *   pressed-bg   ← accent-soft    pressed-color← accent-ink
 *   radius       ← radius-medium  height       ← control-height
 */

.mocka-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mocka-space-2, 8px);
  height: var(--mocka-button-height, var(--mocka-control-height, 34px));
  padding: 0 var(--mocka-button-padding-x, 14px);
  font: inherit;
  font-size: var(--mocka-base-size, 13px);
  font-weight: var(--mocka-button-weight, 500);
  --_bg: var(--mocka-button-background, var(--mocka-surface));
  --_bd: var(--mocka-button-border, var(--mocka-line));
  color: var(--mocka-button-color, var(--mocka-text-soft));
  background: var(--mocka-edge-hide, var(--_bg));
  border: var(--mocka-border-width, 1px) solid var(--mocka-edge-hide, var(--_bd));
  border-radius: var(--mocka-button-radius, var(--mocka-radius-medium, 8px));
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.mocka-button:hover {
  --_bd: var(--mocka-button-hover-border, var(--mocka-accent));
  color: var(--mocka-button-hover-color, var(--mocka-accent-ink));
}
.mocka-button:active { --_bg: var(--mocka-button-active-background, var(--mocka-surface-2)); }
.mocka-button[aria-pressed="true"] {
  --_bg: var(--mocka-button-pressed-background, var(--mocka-accent-soft));
  --_bd: var(--mocka-button-pressed-border, var(--mocka-accent));
  color: var(--mocka-button-pressed-color, var(--mocka-accent-ink));
}
.mocka-button:focus-visible { outline: var(--mocka-focus-ring, 2px) solid var(--mocka-accent); outline-offset: 2px; }
.mocka-button:disabled { opacity: 0.5; cursor: default; box-shadow: none; }

.mocka-button--primary {
  font-weight: 600;
  --_bg: var(--mocka-button-primary-background, var(--mocka-accent));
  /* primaryBackground pode ser gradiente (Neon): borda e brilho têm tokens
     próprios, porque um gradiente não é cor */
  --_bd: var(--mocka-button-primary-border, var(--mocka-button-primary-background, var(--mocka-accent)));
  color: var(--mocka-button-primary-color, var(--mocka-on-accent));
  box-shadow: var(--mocka-button-primary-shadow, 0 6px 16px -8px var(--mocka-button-primary-background, var(--mocka-accent)));
}
.mocka-button--primary:hover { color: var(--mocka-button-primary-color, var(--mocka-on-accent)); filter: brightness(1.06); }

.mocka-button--icon {
  width: var(--mocka-button-height, var(--mocka-control-height, 34px));
  padding: 0;
  font-size: 15px;
  line-height: 1;
  --_bg: transparent;
  --_bd: transparent;
  color: var(--mocka-button-icon-color, var(--mocka-text-faint));
}
.mocka-button--icon:hover {
  --_bg: var(--mocka-button-active-background, var(--mocka-surface-2));
  --_bd: transparent;
  color: var(--mocka-text);
}

.mocka-button-group { display: inline-flex; gap: var(--mocka-space-1, 4px); }

/* tecla escrita no próprio botão (barra de módulos do Painel TCJM: "F2 Acompanhamento") */
.mocka-key {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--mocka-radius-small, 4px);
  font-family: var(--mocka-mono-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--mocka-key-color, var(--mocka-text-faint));
  background: var(--mocka-key-background, var(--mocka-surface-2));
  border: 1px solid var(--mocka-key-border, var(--mocka-line));
}
.mocka-button[aria-pressed="true"] .mocka-key { color: var(--mocka-accent-ink); background: var(--mocka-surface); border-color: var(--mocka-accent); }
.mocka-button--primary .mocka-key { color: var(--mocka-on-accent); background: color-mix(in srgb, var(--mocka-on-accent) 18%, transparent); border-color: transparent; }
.mocka-button:disabled .mocka-key { border-style: dashed; }

/* botão "fantasma" (só texto; toolbar) */
.mocka-button--ghost { --_bg: transparent; --_bd: transparent; }
.mocka-button--ghost:hover { --_bg: var(--mocka-button-active-background, var(--mocka-surface-2)); --_bd: transparent; }

/*
 * splitter.css — painéis redimensionáveis (Blueprint §11, capability FIXADA).
 *
 * Anatomia: .mocka-split (contêiner) > painel A, .mocka-split-handle, painel B.
 * O JS (splitter.js) insere o handle e faz o arrasto; aqui é só aparência.
 *
 * Visual (revisto 05/09 a pedido do usuário — "não pode parecer barra de
 * rolagem"): o gutter é invisível no repouso; no centro há um GRIP curto, um
 * pino arredondado com três pontos. No hover o gutter inteiro ganha uma faixa
 * suave e o grip escurece; arrastando, grip e faixa vão para o acento.
 * Estados: normal, :hover, :focus-visible, .is-dragging.
 *
 * HERANÇA (D24) — o tema só precisa da paleta; sobrescreve via components.splitter:
 *   width        ← splitter-width (geometry) | 6px   (largura do grip)
 *   hit          ← splitter-hit | 14px               (área clicável do gutter)
 *   margin       ← splitter-margin | 4px             (respiro extra por lado)
 *   grip-length  ← 44px
 *   color        ← line          hover-color   ← text-faint
 *   active-color ← accent        dot-color     ← text-faint
 *   band-color   ← accent-soft   (faixa do gutter no hover/arrasto)
 *   cut-color    ← surface  (cor dos cortes em V atrás da seta)
 *   (faixa reta com ponta em seta e dois cortes em V — chevron; grip pílula)
 */

.mocka-split {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}
.mocka-split--h { flex-direction: row; }
.mocka-split--v { flex-direction: column; }
.mocka-split > * { min-width: 0; min-height: 0; }

.mocka-split-handle {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  user-select: none;
  outline: none;
  background: transparent;
  border-radius: 0; /* sem arredondado: lembrava brush do Paint (usuário, 05/09) */
  /* traço desenhado (effects.css): o handle não tem texto, o filtro vai nele
     inteiro — faixa, chevron, grip e pontos herdam o giz */
  filter: var(--mocka-edge-filter, none);
  transition: background 120ms;
}
.mocka-split--h > .mocka-split-handle {
  width: var(--mocka-splitter-hit, 14px);
  margin: 0 var(--mocka-splitter-margin, 4px);
  cursor: col-resize;
}
.mocka-split--v > .mocka-split-handle {
  height: var(--mocka-splitter-hit, 14px);
  margin: var(--mocka-splitter-margin, 4px) 0;
  cursor: row-resize;
}

/* faixa do gutter: só aparece no hover/foco/arrasto */
.mocka-split-handle:hover,
.mocka-split-handle:focus-visible {
  background: var(--mocka-splitter-band-color, color-mix(in srgb, var(--mocka-accent) 16%, transparent));
}
.mocka-split-handle.is-dragging {
  background: var(--mocka-splitter-band-color, color-mix(in srgb, var(--mocka-accent) 26%, transparent));
}

/* o grip: pino arredondado curto, no centro */
.mocka-split-handle::before {
  content: "";
  position: relative;
  z-index: 1;
  display: block;
  border-radius: 999px;
  background: var(--mocka-splitter-color, var(--mocka-line));
  transition: background 120ms;
}
.mocka-split--h > .mocka-split-handle::before {
  width: var(--mocka-splitter-width, 6px);
  height: var(--mocka-splitter-grip-length, 44px);
}
.mocka-split--v > .mocka-split-handle::before {
  height: var(--mocka-splitter-width, 6px);
  width: var(--mocka-splitter-grip-length, 44px);
}
.mocka-split-handle:hover::before,
.mocka-split-handle:focus-visible::before {
  background: var(--mocka-splitter-hover-color, var(--mocka-text-faint));
}
.mocka-split-handle.is-dragging::before {
  background: var(--mocka-splitter-active-color, var(--mocka-accent));
}

/* os três pontos do grip */
.mocka-split-handle::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  --dot: var(--mocka-splitter-dot-color, var(--mocka-text-faint));
  opacity: 0.9;
}
.mocka-split--h > .mocka-split-handle::after {
  width: 2px;
  height: 14px;
  background: radial-gradient(circle, var(--dot) 1px, transparent 1.2px) center / 2px 6px repeat-y;
}
.mocka-split--v > .mocka-split-handle::after {
  height: 2px;
  width: 14px;
  background: radial-gradient(circle, var(--dot) 1px, transparent 1.2px) center / 6px 2px repeat-x;
}
.mocka-split-handle:hover::after,
.mocka-split-handle:focus-visible::after { --dot: var(--mocka-text); }
.mocka-split-handle.is-dragging::after { --dot: var(--mocka-on-accent); }

/* Chevron (usuário, 05/09): a faixa termina em SETA (ponta a 45°) e, atrás
   da ponta, dois cortes em V na cor do fundo com a mesma espessura da seta —
   as "faixas". Geometria fixa para hit = 14px: ponta 7px, cortes de 7px. */
.mocka-split--h > .mocka-split-handle {
  clip-path: polygon(50% 0, 100% 7px, 100% calc(100% - 7px), 50% 100%, 0 calc(100% - 7px), 0 7px);
}
.mocka-split--v > .mocka-split-handle {
  clip-path: polygon(0 50%, 7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%);
}
.mocka-split-tip {
  position: absolute;
  width: 14px;
  height: 35px;
  background: var(--mocka-splitter-cut-color, var(--mocka-surface));
  clip-path: path("M7 7 L14 14 L14 21 L7 14 L0 21 L0 14 Z M7 21 L14 28 L14 35 L7 28 L0 35 L0 28 Z");
  pointer-events: none;
  z-index: 3;
  /* só com a faixa: em casca translúcida (acrílico) os cortes apareciam em repouso */
  opacity: 0;
}
.mocka-split-handle:hover > .mocka-split-tip,
.mocka-split-handle:focus-visible > .mocka-split-tip,
.mocka-split-handle.is-dragging > .mocka-split-tip { opacity: 1; }
.mocka-split--h > .mocka-split-handle > .mocka-split-tip--start { top: 0; left: 0; }
.mocka-split--h > .mocka-split-handle > .mocka-split-tip--end { bottom: 0; left: 0; transform: rotate(180deg); }
/* vertical: o span (14×35) gira em torno do próprio centro; o centro fica a
   17.5px da ponta e a 7px do topo do handle → left/right 10.5px, top -10.5px */
.mocka-split--v > .mocka-split-handle > .mocka-split-tip--start { left: 10.5px; top: -10.5px; transform: rotate(-90deg); }
.mocka-split--v > .mocka-split-handle > .mocka-split-tip--end { right: 10.5px; top: -10.5px; transform: rotate(90deg); }

/* durante o arrasto, nada por baixo captura o mouse nem seleciona texto */
.mocka-split.is-dragging > * { pointer-events: none; }
.mocka-split.is-dragging > .mocka-split-handle { pointer-events: auto; }
.mocka-split.is-dragging { user-select: none; cursor: col-resize; }
.mocka-split--v.is-dragging { cursor: row-resize; }

/*
 * slider.css — slider da Mocka (Inputs, Foundation — Blueprint §12.1). PROTÓTIPO.
 *
 * Marcação: <label class="mocka-slider"><span>rótulo</span><input type="range"></label>
 * (o rótulo é opcional). slider.js pinta a parte preenchida (--_p).
 *
 * Estados: hover, active (arrastando), focus-visible, disabled.
 * HERANÇA (D24) — components.slider.*:
 *   track        ← surface-2      track-border ← line
 *   fill         ← accent         thumb        ← accent
 *   thumb-border ← line           thumb-size   ← 16px
 *   track-height ← 6px            label-color  ← text-faint
 * Traço desenhado (effects.css): o <input> inteiro passa pelo filtro de
 * contorno — não há texto dentro dele, então pode.
 */

.mocka-slider {
  display: inline-flex;
  align-items: center;
  gap: var(--mocka-space-2, 8px);
  font-size: var(--mocka-caption-size, 11px);
  color: var(--mocka-slider-label-color, var(--mocka-text-faint));
  user-select: none;
}

.mocka-slider input[type="range"] {
  --_p: 0%;
  --_track: var(--mocka-slider-track, var(--mocka-surface-2));
  --_fill: var(--mocka-slider-fill, var(--mocka-accent));
  --_bd: var(--mocka-slider-track-border, var(--mocka-line));
  appearance: none;
  -webkit-appearance: none;
  width: var(--mocka-slider-width, 120px);
  height: var(--mocka-control-height, 34px);
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  filter: var(--mocka-edge-filter, none);
}
.mocka-slider input[type="range"]::-webkit-slider-runnable-track {
  height: var(--mocka-slider-track-height, 6px);
  box-sizing: border-box;
  border-radius: 999px;
  border: var(--mocka-border-width, 1px) solid var(--_bd);
  background: linear-gradient(to right, var(--_fill) var(--_p), var(--_track) var(--_p));
}
.mocka-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: var(--mocka-slider-thumb-size, 16px);
  height: var(--mocka-slider-thumb-size, 16px);
  margin-top: calc((var(--mocka-slider-track-height, 6px) - var(--mocka-slider-thumb-size, 16px)) / 2 - var(--mocka-border-width, 1px));
  border-radius: 50%;
  box-sizing: border-box;
  background: var(--mocka-slider-thumb, var(--mocka-accent));
  border: var(--mocka-border-width, 1px) solid var(--mocka-slider-thumb-border, var(--mocka-line));
  transition: transform 100ms;
}
.mocka-slider input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
.mocka-slider input[type="range"]:active::-webkit-slider-thumb { transform: scale(0.96); }
.mocka-slider input[type="range"]:focus-visible {
  outline: var(--mocka-focus-ring, 2px) solid var(--mocka-accent);
  outline-offset: 2px;
  border-radius: 999px;
}
.mocka-slider input[type="range"]:disabled { opacity: 0.5; cursor: default; }

/*
 * tabs.css — abas da Mocka (Foundation, Blueprint §12.1). PROTÓTIPO.
 *
 * Marcação (tabs.js liga o comportamento):
 *   <div class="mocka-tabs" id="x">
 *     <div class="mocka-tabs-bar" role="tablist">
 *       <button class="mocka-tab" role="tab" aria-controls="p1">Aba 1</button>
 *     </div>
 *     <section class="mocka-tab-panel" id="p1" role="tabpanel">…</section>
 *   </div>
 *
 * Seed: Colinha e Agenda — aba selecionada "funde" com o painel (mesmo fundo,
 * sem borda inferior). Estados: hover, selected (aria-selected), focus-visible,
 * disabled. A aba ativa persiste (D29) via Mocka.storage.
 *
 * HERANÇA (D24) — components.tabs.*:
 *   bar-background   ← transparent   bar-border      ← line
 *   tab-color        ← text-faint    tab-hover-color ← text
 *   selected-color   ← text          selected-background ← surface
 *   panel-background ← surface       radius          ← radius-medium
 * Traço desenhado (effects.css): borda da aba selecionada por ::after.
 */

.mocka-tabs {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.mocka-tabs-bar {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 0 0 0 2px;
  --_bd: var(--mocka-tabs-bar-border, var(--mocka-line));
  /* sem faixa atrás das abas (usuário, 05/09): a área é o fundo; só a aba
     selecionada tem corpo. Um tema pode dar fundo via tabs.barBackground. */
  background: var(--mocka-tabs-bar-background, transparent);
  /* a linha de baixo da barra É a borda de cima do painel (abaixo); a barra
     fica por cima (z-index) para a aba selecionada cobrir essa borda */
  padding-left: var(--mocka-tabs-radius, var(--mocka-radius-medium, 8px));
  user-select: none;
  position: relative;
  z-index: 1;
}

.mocka-tab {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 10px;
  margin-bottom: calc(-1 * var(--mocka-border-width, 1px));
  font: inherit;
  font-weight: 600;
  font-size: var(--mocka-base-size, 13px);
  color: var(--mocka-tabs-tab-color, var(--mocka-text-faint));
  background: transparent;
  border: var(--mocka-border-width, 1px) solid transparent;
  border-bottom: 0;
  border-radius: var(--mocka-tabs-radius, var(--mocka-radius-medium, 8px)) var(--mocka-tabs-radius, var(--mocka-radius-medium, 8px)) 0 0;
  cursor: pointer;
  white-space: nowrap;
  --_bg: transparent;
  --_bd: transparent;
}
.mocka-tab:hover { color: var(--mocka-tabs-tab-hover-color, var(--mocka-text)); }
.mocka-tab[aria-selected="true"] {
  color: var(--mocka-tabs-selected-color, var(--mocka-text));
  --_bg: color-mix(in srgb, var(--mocka-tabs-selected-background, var(--mocka-tabs-panel-background, var(--mocka-surface))) var(--mocka-backdrop-alpha, 100%), transparent);
  --_bd: var(--mocka-tabs-bar-border, var(--mocka-line));
  background: var(--mocka-edge-hide, var(--_bg));
  border-color: var(--mocka-edge-hide, var(--_bd));
  /* cobre a borda de cima do painel: a aba "entra" no painel */
  box-shadow: 0 var(--mocka-border-width, 1px) 0 0 var(--mocka-edge-hide, var(--_bg));
}
.mocka-tab:focus-visible { outline: var(--mocka-focus-ring, 2px) solid var(--mocka-accent); outline-offset: -3px; }
.mocka-tab:disabled { opacity: 0.5; cursor: default; }
.mocka-tab .mocka-badge {
  font-size: var(--mocka-caption-size, 11px);
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  color: var(--mocka-text-soft);
  background: var(--mocka-surface);
  border: var(--mocka-border-width, 1px) solid var(--mocka-line);
}

.mocka-tab-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  background: color-mix(in srgb, var(--mocka-tabs-panel-background, var(--mocka-surface)) var(--mocka-backdrop-alpha, 100%), transparent);
  /* o painel é a caixa: borda e cantos arredondados (o contêiner de rolagem
     dentro dele não tem borda própria — senão o fundo retangular do painel
     aparecia como uma ponta atrás dos cantos redondos; usuário, 06/09) */
  --_bd: var(--mocka-tabs-bar-border, var(--mocka-line));
  border: var(--mocka-border-width, 1px) solid var(--mocka-edge-hide, var(--_bd));
  border-radius: var(--mocka-tabs-panel-radius, var(--mocka-radius-large, 9px));
}
.mocka-tab-panel[hidden] { display: none; }
.mocka-tab-panel > .mocka-scroll {
  border: 0;
  border-radius: calc(var(--mocka-tabs-panel-radius, var(--mocka-radius-large, 9px)) - var(--mocka-border-width, 1px));
}

/*
 * table.css — tabela da Mocka (Foundation, Blueprint §12.1). PROTÓTIPO.
 *
 * Marcação: <table class="mocka-table"> dentro de um .mocka-scroll (é o
 * scroll que rola e que desenha a borda — inclusive a tremida). table.js
 * cuida da seleção de linha (clique/teclado), persistida (D29).
 *
 *   <table class="mocka-table"><thead><tr><th>…</th></tr></thead>
 *   <tbody><tr data-key="1"><td>…</td></tr></tbody></table>
 *
 * Seed: Colinha e Agenda (thead uppercase pequeno, linhas com hover).
 * Estados por linha: hover, selected (aria-selected), focus-visible.
 *
 * HERANÇA (D24) — components.table.*:
 *   header-background ← surface-2   header-color   ← text-soft
 *   header-border     ← line        row-border     ← line
 *   row-hover         ← panel       row-selected   ← accent-soft
 *   selected-color    ← accent-ink  cell-padding   ← 8px 12px
 *   resizer-color     ← line        resizer-active-color ← accent
 *   row-border-width  ← 1px (não segue borderWidth)
 *   expander-color    ← text-faint  expander-hover-color ← accent
 *   detail-background ← panel       detail-color   ← text-soft
 *   edit-background   ← surface     edit-border    ← accent
 * Traço desenhado (effects.css): linha do cabeçalho por ::after em cada th.
 */

.mocka-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--mocka-small-size, 12px);
}
.mocka-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: 9px 12px;
  font-size: var(--mocka-caption-size, 11px);
  font-weight: 600;
  letter-spacing: var(--mocka-caption-tracking, 0.04em);
  text-transform: uppercase;
  font-family: var(--mocka-title-font, var(--mocka-ui-font));
  color: var(--mocka-table-header-color, var(--mocka-text-soft));
  background: var(--mocka-table-header-background, var(--mocka-surface-2));
  --_bd: var(--mocka-table-header-border, var(--mocka-line));
  border-bottom: var(--mocka-border-width, 1px) solid var(--mocka-edge-hide, var(--_bd));
  user-select: none;
  white-space: nowrap;
}
/* Ordenação: botão nativo (Enter/Espaço), seta separada do texto para D27. */
.mocka-table th[aria-sort] { cursor: pointer; }
.mocka-table-sort {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  vertical-align: middle;
}
.mocka-table-sort-label { overflow: hidden; text-overflow: ellipsis; }
.mocka-table-sort-indicator {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
  color: var(--mocka-table-sort-color, var(--mocka-accent));
  filter: var(--mocka-edge-filter, none);
}
.mocka-table th[aria-sort="none"] .mocka-table-sort-indicator { visibility: hidden; }
.mocka-table th[aria-sort="descending"] .mocka-table-sort-indicator { transform: rotate(225deg); }
.mocka-table th[aria-sort]:hover { color: var(--mocka-table-header-hover-color, var(--mocka-accent)); }
.mocka-table-sort:focus-visible { outline: var(--mocka-focus-ring, 2px) solid var(--mocka-accent); outline-offset: 3px; }
.mocka-table tbody td {
  padding: var(--mocka-table-cell-padding, 8px 12px);
  /* divisória de linha é sempre fina (não herda borderWidth do tema: no Giz
     de Cera, 3px, virava grade pesada) */
  border-top: var(--mocka-table-row-border-width, 1px) solid var(--mocka-table-row-border, var(--mocka-line));
  vertical-align: middle;
}
.mocka-table tbody tr:first-child td { border-top: 0; }
.mocka-table tbody tr { cursor: default; }
.mocka-table tbody tr:hover td { background: var(--mocka-table-row-hover, var(--mocka-panel)); }
/* tom por linha (data-tone no <tr>): o app diz a semântica (ok/warn/danger/
   accent/info/muted), o tema dá a cor — misturada com a surface, segue o modo.
   Caso real: o Painel TCJM pinta a linha inteira pela etapa/desfecho. A linha
   selecionada vence o tom (regra abaixo). */
.mocka-table tbody tr[data-tone="ok"] td     { background: color-mix(in srgb, var(--mocka-ok) var(--mocka-table-tone-alpha, 14%), transparent); }
.mocka-table tbody tr[data-tone="warn"] td   { background: color-mix(in srgb, var(--mocka-warn) var(--mocka-table-tone-alpha, 14%), transparent); }
.mocka-table tbody tr[data-tone="danger"] td { background: color-mix(in srgb, var(--mocka-danger) var(--mocka-table-tone-alpha, 14%), transparent); }
.mocka-table tbody tr[data-tone="accent"] td { background: color-mix(in srgb, var(--mocka-accent) var(--mocka-table-tone-alpha, 14%), transparent); }
.mocka-table tbody tr[data-tone="info"] td   { background: color-mix(in srgb, var(--mocka-highlight) var(--mocka-table-tone-alpha, 14%), transparent); }
.mocka-table tbody tr[data-tone="muted"] td  { color: var(--mocka-text-faint); }
.mocka-table tbody tr[data-tone]:hover td { box-shadow: inset 0 0 0 100px color-mix(in srgb, var(--mocka-text) 4%, transparent); }
.mocka-table td.mocka-center, .mocka-table th.mocka-center { text-align: center; }
.mocka-table td.mocka-faint { color: var(--mocka-text-faint); }
.mocka-table tbody tr[aria-selected="true"] td {
  background: var(--mocka-table-row-selected, var(--mocka-accent-soft));
  color: var(--mocka-table-selected-color, var(--mocka-accent-ink));
}
.mocka-table tbody tr:focus-visible { outline: var(--mocka-focus-ring, 2px) solid var(--mocka-accent); outline-offset: -2px; }
.mocka-table td.mocka-num, .mocka-table th.mocka-num { text-align: right; font-family: var(--mocka-mono-font); font-variant-numeric: tabular-nums; }
.mocka-table td.mocka-strong { font-weight: 500; }

/* colunas redimensionáveis: handle na borda direita do th (table.js) */
.mocka-table-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -5px;
  width: 10px;
  cursor: col-resize;
  touch-action: none;
  z-index: 2;
  filter: var(--mocka-edge-filter, none);   /* sem texto: herda o traço (D27) */
}
.mocka-table-resizer::before {
  content: "";
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: 4px;
  width: var(--mocka-border-width, 1px);
  background: var(--mocka-table-resizer-color, var(--mocka-line));
  transition: background 100ms, top 100ms, bottom 100ms;
}
.mocka-table-resizer:hover::before,
.mocka-table-resizer.is-dragging::before {
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--mocka-table-resizer-active-color, var(--mocka-accent));
}
.mocka-table[style*="table-layout: fixed"] th,
.mocka-table[style*="table-layout: fixed"] td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* linhas expansíveis: seta no início da linha + linha de detalhe */
.mocka-table-cell--expandable { padding-left: 4px !important; }
.mocka-table-expander {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  vertical-align: middle;
  border: 0;
  border-radius: var(--mocka-radius-small, 4px);
  background: transparent;
  color: var(--mocka-table-expander-color, var(--mocka-text-faint));
  cursor: pointer;
  font-size: 0;
}
.mocka-table-expander::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 120ms;
}
.mocka-table-expander:hover { color: var(--mocka-table-expander-hover-color, var(--mocka-accent)); background: var(--mocka-surface-2); }
tr[aria-expanded="true"] > td > .mocka-table-expander::before { transform: rotate(45deg); }
.mocka-table tbody tr.mocka-table-detail td {
  padding: 10px 14px 12px 36px;
  background: var(--mocka-table-detail-background, var(--mocka-panel));
  color: var(--mocka-table-detail-color, var(--mocka-text-soft));
  border-top: 0;
  white-space: normal;
  line-height: 1.5;
}
.mocka-table tbody tr.mocka-table-detail:hover td { background: var(--mocka-table-detail-background, var(--mocka-panel)); }
.mocka-table tbody tr.mocka-table-detail[hidden] { display: none; }

/* edição inline (só na linha selecionada): o editor ocupa a célula */
.mocka-table td.is-editing { padding-top: 3px; padding-bottom: 3px; }
.mocka-table-editor {
  position: relative;
  display: block;
  isolation: isolate;
  --_bg: var(--mocka-table-edit-background, var(--mocka-surface));
  --_bd: var(--mocka-table-edit-border, var(--mocka-accent));
}
.mocka-table-input {
  width: 100%;
  box-sizing: border-box;
  height: calc(var(--mocka-control-height, 34px) - 8px);
  padding: 0 8px;
  margin: 0;
  font: inherit;
  color: var(--mocka-text);
  background: var(--mocka-edge-hide, var(--_bg));
  border: var(--mocka-border-width, 1px) solid var(--mocka-edge-hide, var(--_bd));
  border-radius: var(--mocka-radius-small, 4px);
  outline: none;
}
.mocka-table td.mocka-num .mocka-table-input { text-align: right; font-family: var(--mocka-mono-font); }
/* traço desenhado (D27): ::before = fundo só ondulado, ::after = borda com grão */
.mocka-table-editor::before,
.mocka-table-editor::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--mocka-radius-small, 4px);
  pointer-events: none;
}
.mocka-table-editor::before {
  background: var(--_bg);
  filter: var(--mocka-edge-fill-filter, none);
  opacity: var(--mocka-edge-fill-opacity, 0);
}
.mocka-table-editor::after {
  border: var(--mocka-edge-width, 0) solid var(--_bd);
  filter: var(--mocka-edge-filter, none);
}

/* "+" para adicionar detalhe: só aparece na linha selecionada (D30) */
.mocka-table-expander--add { visibility: hidden; }
.mocka-table-expander--add::before { border: 0; width: 8px; height: 8px; transform: none;
  background: linear-gradient(currentColor, currentColor) center / 8px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 8px no-repeat; }
tr[aria-selected="true"] > td > .mocka-table-expander--add { visibility: visible; }
.mocka-table tbody tr.mocka-table-detail td.is-editing { padding-top: 6px; padding-bottom: 8px; }
.mocka-table-textarea { height: auto; min-height: 64px; padding: 6px 8px; resize: vertical; line-height: 1.45; font-size: var(--mocka-small-size, 12px); }

/*
 * menu.css — menu de contexto da Mocka (Blueprint §13, D17). PROTÓTIPO.
 *
 * Renderizado pela Mocka (não nativo — DECISIONS A2: escolhido porque assim
 * herda paleta, tema e effects como qualquer componente). menu.js monta:
 *   .mocka-menu[role=menu] › .mocka-menu-item[role=menuitem] | .mocka-menu-sep
 *   item: .mocka-menu-icon · .mocka-menu-label · .mocka-menu-shortcut · .mocka-menu-arrow
 * Estados do item: hover/ativo (teclado), disabled, danger, checked, com submenu.
 *
 * HERANÇA (D24) — components.menu.*:
 *   background ← surface        border   ← line        color ← text
 *   hover-background ← accent-soft   hover-color ← accent-ink
 *   danger ← danger              muted ← text-faint    shadow ← 0 10px 30px -12px rgba(0,0,0,.45)
 *   radius ← radius-medium       min-width ← 200px
 * Traço desenhado (effects.css): fundo + borda do menu por ::after.
 */

.mocka-menu {
  position: fixed;
  z-index: 10000;
  min-width: var(--mocka-menu-min-width, 200px);
  max-width: 340px;
  padding: 6px;
  margin: 0;
  list-style: none;
  --_bg: var(--mocka-menu-background, var(--mocka-surface));
  --_bd: var(--mocka-menu-border, var(--mocka-line));
  background: var(--mocka-edge-hide, var(--_bg));
  color: var(--mocka-menu-color, var(--mocka-text));
  border: var(--mocka-border-width, 1px) solid var(--mocka-edge-hide, var(--_bd));
  border-radius: var(--mocka-menu-radius, var(--mocka-radius-medium, 8px));
  box-shadow: var(--mocka-menu-shadow, var(--mocka-shadow-popup, 0 10px 30px -12px rgba(0, 0, 0, 0.45)));
  font-size: var(--mocka-base-size, 13px);
  user-select: none;
  outline: none;
  isolation: isolate;
}

.mocka-menu-item {
  display: grid;
  grid-template-columns: 20px 1fr auto 14px;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 8px;
  border-radius: var(--mocka-radius-small, 4px);
  cursor: default;
  white-space: nowrap;
  color: inherit;
}
.mocka-menu-item.is-active {
  background: var(--mocka-menu-hover-background, var(--mocka-accent-soft));
  color: var(--mocka-menu-hover-color, var(--mocka-accent-ink));
}
.mocka-menu-item[aria-disabled="true"] { color: var(--mocka-menu-muted, var(--mocka-text-faint)); opacity: 0.7; }
.mocka-menu-item.is-danger { color: var(--mocka-menu-danger, var(--mocka-danger)); }
.mocka-menu-item.is-danger.is-active { background: color-mix(in srgb, var(--mocka-menu-danger, var(--mocka-danger)) 14%, transparent); color: var(--mocka-menu-danger, var(--mocka-danger)); }

.mocka-menu-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
}
.mocka-menu-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mocka-menu-item[aria-checked="true"] .mocka-menu-icon::before { content: "✓"; font-weight: 700; }
.mocka-menu-label { overflow: hidden; text-overflow: ellipsis; }
.mocka-menu-shortcut { font-family: var(--mocka-mono-font); font-size: var(--mocka-caption-size, 11px); color: var(--mocka-menu-muted, var(--mocka-text-faint)); }
.mocka-menu-item.is-active .mocka-menu-shortcut { color: inherit; opacity: 0.8; }
.mocka-menu-arrow { justify-self: end; width: 6px; height: 6px; border-right: 1.8px solid currentColor; border-top: 1.8px solid currentColor; transform: rotate(45deg); opacity: 0.7; }
.mocka-menu-item:not(.has-submenu) .mocka-menu-arrow { visibility: hidden; }

.mocka-menu-sep {
  height: var(--mocka-border-width, 1px);
  margin: 5px 6px;
  background: var(--mocka-menu-border, var(--mocka-line));
  --_bd: var(--mocka-menu-border, var(--mocka-line));
  filter: var(--mocka-edge-filter, none);   /* sem texto: herda o traço (D27) */
}
.mocka-menu-header {
  padding: 4px 8px 6px;
  font-size: var(--mocka-caption-size, 11px);
  font-weight: 600;
  letter-spacing: var(--mocka-caption-tracking, 0.04em);
  text-transform: uppercase;
  font-family: var(--mocka-title-font, var(--mocka-ui-font));
  color: var(--mocka-menu-muted, var(--mocka-text-faint));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* lista de <select> (select.js): sem coluna de atalho/seta; cabeçalho de optgroup */
.mocka-menu--select .mocka-menu-item { grid-template-columns: 20px 1fr; }
.mocka-menu--select .mocka-menu-shortcut, .mocka-menu--select .mocka-menu-arrow { display: none; }
.mocka-menu--select .mocka-menu-item.is-header { font-size: var(--mocka-caption-size, 11px); font-weight: 600; letter-spacing: var(--mocka-caption-tracking, 0.04em); text-transform: uppercase; color: var(--mocka-text-faint); opacity: 1; }
.mocka-select[data-open] { --_bd: var(--mocka-input-focus-border, var(--mocka-accent)); }
/* lista longa (spec.maxHeight): o filho rola; barra fina, polegar visível,
   afastada do traço de giz (padding = largura do traço) */
.mocka-menu-scroll { overflow-y: auto; overscroll-behavior: contain; margin-right: calc(-1 * var(--mocka-edge-width, 0)); padding-right: var(--mocka-edge-width, 0); }
.mocka-menu-scroll::-webkit-scrollbar { width: 7px; }
.mocka-menu-scroll::-webkit-scrollbar-thumb { background: var(--mocka-text-faint); border: 2px solid transparent; background-clip: padding-box; border-radius: 4px; }
.mocka-menu-scroll::-webkit-scrollbar-thumb:hover { background: var(--mocka-text-soft); background-clip: padding-box; }

/* modo popup (janela própria): o <ul> É a janela — sem raio no CSS (o canto
   arredondado é da janela, pelo DWM), sem sombra, sem nenhum pixel do
   formulário nativo aparecendo (bug "bordas escuras", 05/09) */
.mocka-popup-body { margin: 0; overflow: hidden; background: var(--mocka-menu-background, var(--mocka-surface)); }
/* mede a largura natural do conteúdo, não a da janelinha ainda pequena */
/* o traço de giz sai do box do <ul>: margem = 1,5× a largura do traço para
   não ser cortado pela janela (o host mede com a margem). Posição relativa:
   os pseudos do contorno seguem o <ul>, não a janela. */
.mocka-popup-body .mocka-menu { position: relative; box-shadow: none; width: max-content; max-width: none; border-radius: 0; margin: calc(var(--mocka-edge-width, 0) * 1.5); }
.mocka-popup-body .mocka-menu::before, .mocka-popup-body .mocka-menu::after { border-radius: 0; }

/*
 * inner-window.css — janela INTERNA da Mocka (o "filhote apegado", estilo MDI).
 * Mora dentro da .mocka-app, por cima do conteúdo; toda desenhada pela Mocka:
 * barra de título própria (● + título + ▁ ▢ ✕), bordas, redimensionamento por
 * 8 alças, arrasto, z-order por clique, sombreamento (▁ = só a barra),
 * maximizar = preenche a área da principal. Estado persiste por id (D29).
 *
 * Anatomia (inner-window.js): .mocka-inner-window › .mocka-inner-titlebar
 *   (.mocka-inner-dot .mocka-inner-title .mocka-inner-ctl) · .mocka-inner-body
 *   · .mocka-inner-resize[data-edge]
 * Estados: .is-active (frente), .is-maximized, .is-shaded, .is-dragging.
 *
 * HERANÇA (D24) — components.innerWindow.*:
 *   background ← surface      border ← line        radius ← radius-large
 *   titlebar-background ← chrome→chrome2   titlebar-color ← chrome-text
 *   titlebar-faint ← chrome-faint          dot ← accent
 *   titlebar-inactive-background ← surface-2   titlebar-inactive-color ← text-faint
 *   dot-inactive ← muted   (inativa = esmaecida com cores do tema)
 *   shadow ← shadows.window (tema)   inactive-opacity ← .92
 * Traço desenhado (effects.css): fundo por ::before, borda por ::after.
 */

.mocka-app { position: relative; }

.mocka-inner-window {
  position: absolute;
  z-index: 100;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  min-height: 120px;
  --_bg: var(--mocka-inner-window-background, var(--mocka-surface));
  --_bd: var(--mocka-inner-window-border, var(--mocka-line));
  background: var(--mocka-edge-hide, var(--_bg));
  border: var(--mocka-border-width, 1px) solid var(--mocka-edge-hide, var(--_bd));
  border-radius: var(--mocka-inner-window-radius, var(--mocka-radius-large, 9px));
  box-shadow: var(--mocka-inner-window-shadow, var(--mocka-shadow-window, 0 18px 48px -18px rgba(0, 0, 0, 0.55)));
  /* sem overflow:hidden aqui: cortava o traço de giz (::after fica fora da
     caixa). O corte fica no corpo; barra e corpo herdam os cantos. */
  isolation: isolate;
  opacity: var(--mocka-inner-window-inactive-opacity, 1);
  /* barra de título: ativa = chrome; inativa = esmaecida com outras cores do
     tema (usuário, 06/09). As variáveis alimentam a barra e a camada de giz. */
  --_tb1: var(--mocka-inner-window-titlebar-inactive-background, var(--mocka-surface-2));
  --_tb2: var(--mocka-inner-window-titlebar-inactive-background, var(--mocka-surface-2));
  --_tbc: var(--mocka-inner-window-titlebar-inactive-color, var(--mocka-text-faint));
  --_tbf: var(--mocka-inner-window-titlebar-inactive-color, var(--mocka-text-faint));
  --_dot: var(--mocka-inner-window-dot-inactive, var(--mocka-muted));
}
.mocka-inner-window.is-active {
  opacity: 1;
  --_tb1: var(--mocka-inner-window-titlebar-background, var(--mocka-chrome));
  --_tb2: var(--mocka-inner-window-titlebar-background, var(--mocka-chrome-2));
  --_tbc: var(--mocka-inner-window-titlebar-color, var(--mocka-chrome-text));
  --_tbf: var(--mocka-inner-window-titlebar-faint, var(--mocka-chrome-faint));
  --_dot: var(--mocka-inner-window-dot, var(--mocka-accent));
}
/* a janela recebe foco (Esc fecha), mas o anel de foco é dos controles, não
   da moldura — ficava um contorno verde por cima do giz */
.mocka-inner-window:focus, .mocka-inner-window:focus-visible { outline: none; }
.mocka-inner-window.is-dragging, .mocka-inner-window.is-resizing { user-select: none; }
.mocka-inner-window.is-maximized { border-radius: 0; box-shadow: none; }
.mocka-inner-window.is-shaded { min-height: 0; }
.mocka-inner-window.is-shaded .mocka-inner-titlebar { border-radius: inherit; }
.mocka-inner-window.is-shaded .mocka-inner-body,
.mocka-inner-window.is-shaded .mocka-inner-resize { display: none; }

.mocka-inner-titlebar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 12px;
  --_tbbg: linear-gradient(180deg, var(--_tb1), var(--_tb2));
  /* em tema com traço, a barra é pintada na camada ondulada do fundo
     (effects.css), senão sobrava fresta entre o giz e o canto nítido */
  background: var(--mocka-edge-hide, var(--_tbbg));
  color: var(--_tbc);
  transition: color 120ms;
  cursor: default;
  user-select: none;
  font-family: var(--mocka-title-font, var(--mocka-ui-font));
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.mocka-inner-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--_dot);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
  flex: none;
}
.mocka-inner-title { flex: 1 1 auto; font-weight: 600; font-size: var(--mocka-base-size, 13px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mocka-inner-ctl { display: flex; gap: 2px; }
.mocka-inner-ctl button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  width: 28px; height: 22px; border-radius: var(--mocka-radius-small, 4px);
  color: var(--_tbf);
  font-family: var(--mocka-mono-font); font-size: 12px; line-height: 1;
}
.mocka-inner-ctl button:hover { background: rgba(127, 127, 127, 0.18); color: var(--_tbc); }
.mocka-inner-ctl button.mocka-inner-close:hover { background: var(--mocka-danger); color: #fff; }
.mocka-inner-ctl button:focus-visible { outline: 2px solid var(--mocka-accent); outline-offset: -2px; }

.mocka-inner-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
  border-radius: inherit;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* alças de redimensionamento (invisíveis; só o cursor) */
.mocka-inner-resize { position: absolute; z-index: 2; }
.mocka-inner-resize[data-edge="n"]  { top: -3px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
.mocka-inner-resize[data-edge="s"]  { bottom: -3px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
.mocka-inner-resize[data-edge="e"]  { right: -3px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
.mocka-inner-resize[data-edge="w"]  { left: -3px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
.mocka-inner-resize[data-edge="ne"] { top: -3px; right: -3px; width: 12px; height: 12px; cursor: nesw-resize; }
.mocka-inner-resize[data-edge="sw"] { bottom: -3px; left: -3px; width: 12px; height: 12px; cursor: nesw-resize; }
.mocka-inner-resize[data-edge="nw"] { top: -3px; left: -3px; width: 12px; height: 12px; cursor: nwse-resize; }
.mocka-inner-resize[data-edge="se"] { bottom: -3px; right: -3px; width: 12px; height: 12px; cursor: nwse-resize; }
.mocka-inner-window.is-maximized .mocka-inner-resize { display: none; }

/* sombra granulada (shadows.window.texture = "grain"): camada atrás, na cor
   da sombra, deslocada, passando pelo filtro de grão do tema */
.mocka-inner-shadow {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: var(--mocka-shadow-window-color, transparent);
  transform: translate(var(--mocka-shadow-window-x, 0px), var(--mocka-shadow-window-y, 0px));
  filter: var(--mocka-grain-filter, none);
  opacity: var(--mocka-shadow-window-texture, 0);
  pointer-events: none;
}

/*
 * appbar.css — barra superior CANÔNICA de um app Mocka (usuário, 06/09/2026).
 *
 *   <header class="mocka-appbar"></header>          ← a Mocka monta o resto
 *   <header class="mocka-appbar"><div class="mocka-appbar-actions">…</div></header>
 *
 * Anatomia montada por appbar.js:
 *   .mocka-appbar › .mocka-appbar-brand (● título versão) · .mocka-appbar-actions
 *   (controles do app, opcional) · .mocka-appbar-system (▢ slot do botão MOCKA —
 *   reservado, ainda sem implementação — e o botão claro/escuro ☀/☾)
 * Título e versão vêm do MockaApp (boot.app); o app não os repete.
 *
 * HERANÇA (D24) — components.appbar.*:
 *   background ← surface-2   color ← text   border ← line   dot ← accent
 *   version-color ← text-faint   height ← control-height + 16
 *   texture       ← (nenhuma)     — campo components.appbar.texture
 * Effects: linha inferior tremida (effects.css, mesma regra da toolbar).
 */

.mocka-appbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--mocka-space-3, 12px);
  min-height: calc(var(--mocka-control-height, 34px) + 16px);
  padding: var(--mocka-space-2, 8px) var(--mocka-space-3, 12px);
  --_bd: var(--mocka-appbar-border, var(--mocka-line));
  background: color-mix(in srgb, var(--mocka-appbar-background, var(--mocka-surface-2)) var(--mocka-surface-alpha, var(--mocka-backdrop-alpha, 100%)), transparent);
  color: var(--mocka-appbar-color, var(--mocka-text));
  /* campo de tema components.appbar.texture (todos os temas; Fase 3: editor).
     Sem valor: a barra da Mocka fica sem textura própria (padrão). */
  background-image: var(--mocka-appbar-texture, none);
  border-bottom: var(--mocka-border-width, 1px) solid var(--mocka-edge-hide, var(--_bd));
  user-select: none;
  position: relative;
}

.mocka-appbar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--mocka-space-2, 8px);
  font-family: var(--mocka-title-font, var(--mocka-ui-font));
  font-weight: 600;
  font-size: var(--mocka-title-size, 14px);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.mocka-appbar-brand:not(.mocka-appbar-brand--mark)::before {
  content: "";
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--mocka-appbar-dot, var(--mocka-accent));
}
.mocka-appbar-brand .mocka-brand-mark { display: block; }
.mocka-appbar-version {
  font-family: var(--mocka-mono-font);
  font-size: var(--mocka-caption-size, 11px);
  font-weight: 400;
  color: var(--mocka-appbar-version-color, var(--mocka-text-faint));
}

.mocka-appbar-actions {
  display: flex;
  align-items: center;
  gap: var(--mocka-space-3, 12px);
  margin-left: auto;
  min-width: 0;
}

.mocka-appbar-system {
  display: inline-flex;
  align-items: center;
  gap: var(--mocka-space-1, 4px);
  margin-left: var(--mocka-space-2, 8px);
}
/* botão do MOCKA: a marca, abre o menu da Mocka (tema, modo, vidro, ajustes, editor, sobre) */
.mocka-appbar-mocka .mocka-brand-mark { display: block; }

/* painéis de configuração da Mocka (vidro, futuros): abertos pelo menu do MOCKA */
.mocka-settings-pane { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.mocka-settings-pane .mocka-slider { width: 100%; }
.mocka-settings-pane .mocka-slider input { flex: 1 1 auto; width: auto; min-width: 240px; }
.mocka-settings-pane .mocka-slider > span { min-width: 40px; text-align: right; }
.mocka-settings-note { font-size: var(--mocka-caption-size, 11px); color: var(--mocka-text-faint); margin-top: 4px; line-height: 1.45; }

/*
 * input.css — campos de texto e select da Mocka (Inputs, Foundation —
 * Blueprint §12.1). PROTÓTIPO (C1 / C3 parcial). Nasceu do caso real
 * Painel TCJM · M01 (cobaias/painel, 06/09/2026): busca + filtros.
 *
 * Marcação (a CAIXA é o wrapper — <input> não tem pseudo-elemento, e o traço
 * desenhado precisa de ::before/::after, D27):
 *   <label class="mocka-input"><input type="text" placeholder="…"></label>
 *   <label class="mocka-input mocka-input--search"><input type="search"></label>
 *   <label class="mocka-input"><textarea rows="3"></textarea></label>
 *   <label class="mocka-select"><select>…</select></label>
 *   <label class="mocka-input"><span class="mocka-input-label">UF</span><input></label>
 *
 * Estados: hover, focus-within, disabled (:has(:disabled)), invalid
 * (data-invalid ou :has(:invalid)); ponha <span class="mocka-input-invalid-mark">!</span>
 * como último filho para o sinal "!" aparecer quando inválido. O rótulo interno (.mocka-input-label) é
 * opcional e fica dentro da caixa, à esquerda.
 *
 * HERANÇA (D24) — components.input.*:
 *   background   ← surface      border       ← line
 *   color        ← text         placeholder  ← text-faint
 *   hover-border ← text-faint   focus-border ← accent
 *   invalid-border ← danger     label-color  ← text-faint
 *   radius       ← radius-medium  height     ← control-height
 *   icon-color   ← text-faint
 * Traço desenhado (effects.css): ::before = fundo só ondulado, ::after =
 * contorno ondulado com grão — mesma dupla do botão.
 */

.mocka-input,
.mocka-select {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--mocka-space-2, 8px);
  min-width: 0;
  height: var(--mocka-input-height, var(--mocka-control-height, 34px));
  padding: 0 var(--mocka-input-padding-x, 10px);
  font: inherit;
  font-size: var(--mocka-base-size, 13px);
  color: var(--mocka-input-color, var(--mocka-text));
  --_bg: var(--mocka-input-background, var(--mocka-surface));
  --_bd: var(--mocka-input-border, var(--mocka-line));
  background: var(--mocka-edge-hide, var(--_bg));
  border: var(--mocka-border-width, 1px) solid var(--mocka-edge-hide, var(--_bd));
  border-radius: var(--mocka-input-radius, var(--mocka-radius-medium, 8px));
  cursor: text;
  box-sizing: border-box;
}
.mocka-select { cursor: pointer; }
.mocka-input:hover,
.mocka-select:hover { --_bd: var(--mocka-input-hover-border, var(--mocka-text-faint)); }
.mocka-input:focus-within,
.mocka-select:focus-within {
  --_bd: var(--mocka-input-focus-border, var(--mocka-accent));
  outline: var(--mocka-focus-ring, 2px) solid color-mix(in srgb, var(--mocka-accent) 35%, transparent);
  outline-offset: 1px;
}
/* erro de validação: tem que gritar (usuário, 06/09) — borda, fundo tingido,
   halo e rótulo na cor de perigo, mais um "!" no fim da caixa */
.mocka-input[data-invalid],
.mocka-input:has(:invalid:not(:placeholder-shown)) {
  --_bd: var(--mocka-input-invalid-border, var(--mocka-danger));
  --_bg: var(--mocka-input-invalid-background, color-mix(in srgb, var(--mocka-danger) 12%, var(--mocka-surface)));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mocka-danger) 28%, transparent);
}
.mocka-input[data-invalid] .mocka-input-label,
.mocka-input:has(:invalid:not(:placeholder-shown)) .mocka-input-label { color: var(--mocka-danger); }
.mocka-input[data-invalid] > input, .mocka-input[data-invalid] > textarea,
.mocka-input:has(:invalid:not(:placeholder-shown)) > input { color: var(--mocka-danger); }
.mocka-input-invalid-mark {
  flex: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--mocka-danger);
  color: var(--mocka-on-accent, #fff);
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
  display: none;
}
.mocka-input[data-invalid] .mocka-input-invalid-mark,
.mocka-input:has(:invalid:not(:placeholder-shown)) .mocka-input-invalid-mark { display: block; }
.mocka-input:has(:disabled),
.mocka-select:has(:disabled) { opacity: 0.5; cursor: default; }

.mocka-input > input,
.mocka-input > textarea,
.mocka-select > select {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.mocka-input > input::placeholder,
.mocka-input > textarea::placeholder { color: var(--mocka-input-placeholder, var(--mocka-text-faint)); }
.mocka-input > input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.mocka-input > input[type="number"]::-webkit-inner-spin-button { opacity: 0.6; }
.mocka-input > input[type="number"] { font-family: var(--mocka-mono-font); font-variant-numeric: tabular-nums; text-align: right; }

/* textarea: a caixa cresce com o conteúdo */
.mocka-input:has(> textarea) { height: auto; padding: 8px 10px; align-items: flex-start; }
.mocka-input > textarea { height: auto; min-height: 3.2em; resize: vertical; line-height: var(--mocka-line-height, 1.5); }

/* rótulo interno e ícone */
.mocka-input-label {
  flex: none;
  font-size: var(--mocka-caption-size, 11px);
  font-weight: 600;
  letter-spacing: var(--mocka-caption-tracking, 0.04em);
  text-transform: uppercase;
  color: var(--mocka-input-label-color, var(--mocka-text-faint));
  user-select: none;
}
.mocka-input--search::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--mocka-input-icon-color, var(--mocka-text-faint));
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.5'/><path d='M15.5 15.5L21 21'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.5'/><path d='M15.5 15.5L21 21'/></svg>") center / contain no-repeat;
}

/* select: seta desenhada (chevron) à direita; a lista nativa segue o modo
   (color-scheme em base.css). C3 "de verdade" (lista em popup da Mocka, D31)
   fica para depois — a caixa é a mesma. */
.mocka-select > select {
  cursor: pointer;
  padding-right: 22px;
  /* seta por dois gradientes (aceita variável de tema); os pseudos da caixa
     ficam livres para o traço desenhado */
  --_ic: var(--mocka-input-icon-color, var(--mocka-text-faint));
  background:
    linear-gradient(45deg, transparent 50%, var(--_ic) 50%) calc(100% - 11px) calc(50% - 1px) / 6px 6px no-repeat,
    linear-gradient(135deg, var(--_ic) 50%, transparent 50%) calc(100% - 5px) calc(50% - 1px) / 6px 6px no-repeat;
}
.mocka-select > select option { background: var(--mocka-surface); color: var(--mocka-text); }

/* tamanhos utilitários */
.mocka-input--sm, .mocka-select--sm { height: calc(var(--mocka-control-height, 34px) - 6px); font-size: var(--mocka-small-size, 12px); }
.mocka-input--fill, .mocka-select--fill { flex: 1 1 auto; width: auto; }

/*
 * pill.css — pastilha / badge / chip da Mocka (Foundation "badges/chips",
 * Blueprint §12.1). PROTÓTIPO. Nasceu do caso real Painel TCJM · M01
 * (cobaias/painel, 06/09/2026): pastilhas de empresa, plataforma, modalidade
 * (DE) e situação.
 *
 *   <span class="mocka-pill">texto</span>
 *   <span class="mocka-pill" data-tone="ok|warn|danger|accent|muted|info">…</span>
 *   <span class="mocka-pill mocka-pill--outline">…</span>
 *   <span class="mocka-pill mocka-pill--brand" style="--pill-bg:#FF9900;--pill-fg:#0A0A0A">TCJM</span>
 *
 * --brand: cor de MARCA, fixa nos dois modos, é dado do app (a Mocka não
 * inventa cor de empresa). A pastilha traz o fundo dela, OPACO — cai igual
 * sobre qualquer linha (regra achada no Painel: pastilha translúcida mudaria
 * de tom conforme a cor da linha). Ganha um fio de 1px de contraste
 * (--pill-bd, padrão: o texto a 25%) para não sumir quando fundo ≈ linha.
 *
 * HERANÇA (D24) — components.pill.*:
 *   background ← surface-2   color  ← text-soft   border ← transparent
 *   radius     ← 999px       height ← 20px        weight ← 600
 * Tons: ok/warn/danger/accent/muted/info misturam o token com a surface —
 * seguem o modo claro/escuro sozinhos.
 * Traço desenhado (effects.css): contorno mais fino que o dos botões
 * (2/3 da largura) — pastilha é miúda.
 */

.mocka-pill {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--mocka-pill-height, 20px);
  padding: 0 var(--mocka-pill-padding-x, 8px);
  border-radius: var(--mocka-pill-radius, 999px);
  font-size: var(--mocka-caption-size, 11px);
  font-weight: var(--mocka-pill-weight, 600);
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  --_bg: var(--pill-bg, var(--mocka-pill-background, var(--mocka-surface-2)));
  --_fg: var(--pill-fg, var(--mocka-pill-color, var(--mocka-text-soft)));
  --_bd: var(--pill-bd, var(--mocka-pill-border, transparent));
  color: var(--_fg);
  background: var(--mocka-edge-hide, var(--_bg));
  border: 1px solid var(--mocka-edge-hide, var(--_bd));
  box-sizing: border-box;
}
.mocka-pill--sm { height: 16px; padding: 0 6px; font-size: 10px; }
.mocka-pill--mono { font-family: var(--mocka-mono-font); font-weight: 500; letter-spacing: 0; }

.mocka-pill[data-tone="ok"]     { --_bg: color-mix(in srgb, var(--mocka-ok) 18%, var(--mocka-surface));     --_fg: var(--mocka-ok); }
.mocka-pill[data-tone="warn"]   { --_bg: var(--mocka-warn-bg, color-mix(in srgb, var(--mocka-warn) 22%, var(--mocka-surface))); --_fg: color-mix(in srgb, var(--mocka-warn) 70%, var(--mocka-text)); }
.mocka-pill[data-tone="danger"] { --_bg: color-mix(in srgb, var(--mocka-danger) 16%, var(--mocka-surface)); --_fg: var(--mocka-danger); }
.mocka-pill[data-tone="accent"] { --_bg: var(--mocka-accent-soft); --_fg: var(--mocka-accent-ink); }
.mocka-pill[data-tone="info"]   { --_bg: color-mix(in srgb, var(--mocka-highlight) 28%, var(--mocka-surface)); --_fg: var(--mocka-highlight-ink); }
.mocka-pill[data-tone="muted"]  { --_bg: color-mix(in srgb, var(--mocka-muted) 20%, var(--mocka-surface)); --_fg: var(--mocka-text-faint); }

.mocka-pill--outline { --_bg: transparent; --_bd: currentColor; }
.mocka-pill--brand { --_bd: var(--pill-bd, color-mix(in srgb, var(--_fg) 25%, transparent)); }

/* pastilha clicável (filtro/chip): hover e pressed */
button.mocka-pill { cursor: pointer; font: inherit; font-size: var(--mocka-caption-size, 11px); font-weight: var(--mocka-pill-weight, 600); }
button.mocka-pill:hover { --_bd: var(--mocka-accent); }
button.mocka-pill[aria-pressed="true"] { --_bg: var(--mocka-accent-soft); --_fg: var(--mocka-accent-ink); --_bd: var(--mocka-accent); }
button.mocka-pill:focus-visible { outline: var(--mocka-focus-ring, 2px) solid var(--mocka-accent); outline-offset: 2px; }

/* ponto de cor dentro da pastilha (ex.: bolha do desfecho) */
.mocka-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/*
 * switch.css — liga/desliga da Mocka (Inputs "checkbox e switch", C2 —
 * Blueprint §12.1). PROTÓTIPO. Nasceu de app real que precisava de um
 * controle de ligar/desligar e improvisou um botão com pastilha On/Off:
 * o controle canônico é este.
 *
 * Marcação (o rótulo e a legenda de estado são opcionais):
 *   <label class="mocka-switch">
 *     <input type="checkbox">
 *     <span class="mocka-switch-label">rótulo</span>
 *   </label>
 *
 * Legenda de estado (a "pastilha On/Off" sem JS, via :has + attr):
 *   <label class="mocka-switch">
 *     <input type="checkbox">
 *     <span class="mocka-switch-state" data-off="Off" data-on="On"></span>
 *   </label>
 *
 * O estado PERSISTE (D29) quando o app chama Mocka.switch("#id",{persist});
 * sem isso, funciona como <input type=checkbox> comum (o visual é só CSS).
 *
 * Estados: hover, checked (:checked), focus-visible, disabled.
 * HERANÇA (D24) — components.switch.*:
 *   track        ← surface-2   track-border   ← line
 *   track-on     ← accent      track-on-border← accent
 *   knob         ← text-faint  knob-on        ← on-accent
 *   width        ← 40px        height         ← 22px      knob-size ← 16px
 *   label-color  ← text-faint  state-color    ← text-soft
 * Traço desenhado (effects.css): o <input> inteiro (trilho + botão) passa
 * pelo filtro de contorno — não há texto dentro dele, como no slider.
 */

.mocka-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--mocka-space-2, 8px);
  font-size: var(--mocka-caption-size, 11px);
  color: var(--mocka-switch-label-color, var(--mocka-text-faint));
  user-select: none;
  cursor: pointer;
}

.mocka-switch input[type="checkbox"] {
  --_w: var(--mocka-switch-width, 40px);
  --_h: var(--mocka-switch-height, 22px);
  --_k: var(--mocka-switch-knob-size, 16px);
  --_track: var(--mocka-switch-track, var(--mocka-surface-2));
  --_bd: var(--mocka-switch-track-border, var(--mocka-line));
  --_knob: var(--mocka-switch-knob, var(--mocka-text-faint));
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: var(--_w);
  height: var(--_h);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--_track);
  border: var(--mocka-border-width, 1px) solid var(--_bd);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  filter: var(--mocka-edge-filter, none);
}
/* botão deslizante */
.mocka-switch input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc((var(--_h) - var(--_k)) / 2 - var(--mocka-border-width, 1px));
  width: var(--_k);
  height: var(--_k);
  border-radius: 50%;
  background: var(--_knob);
  transform: translateY(-50%);
  transition: left 130ms, background 120ms;
}
.mocka-switch input[type="checkbox"]:checked {
  --_track: var(--mocka-switch-track-on, var(--mocka-accent));
  --_bd: var(--mocka-switch-track-on-border, var(--mocka-accent));
  --_knob: var(--mocka-switch-knob-on, var(--mocka-on-accent));
}
.mocka-switch input[type="checkbox"]:checked::before {
  left: calc(var(--_w) - var(--_k) - (var(--_h) - var(--_k)) / 2 - var(--mocka-border-width, 1px));
}
.mocka-switch input[type="checkbox"]:hover { --_bd: var(--mocka-accent); }
.mocka-switch input[type="checkbox"]:focus-visible {
  outline: var(--mocka-focus-ring, 2px) solid var(--mocka-accent);
  outline-offset: 2px;
}
.mocka-switch input[type="checkbox"]:disabled { opacity: 0.5; cursor: default; }
.mocka-switch:has(input:disabled) { cursor: default; }

.mocka-switch-label { color: var(--mocka-switch-label-color, var(--mocka-text-faint)); }

/* legenda de estado: a "pastilha On/Off" sem JS (o texto vem dos data-*) */
.mocka-switch-state {
  color: var(--mocka-switch-state-color, var(--mocka-text-soft));
  font-weight: 600;
  letter-spacing: 0.02em;
}
.mocka-switch-state::after { content: attr(data-off); }
.mocka-switch:has(input:checked) .mocka-switch-state {
  color: var(--mocka-switch-state-on-color, var(--mocka-accent-ink));
}
.mocka-switch:has(input:checked) .mocka-switch-state::after { content: attr(data-on); }

/* BEVEL (Windows 95): o trilho é um poço afundado; o botão, um relevo saliente. */
:root[data-mocka-edge="bevel"] .mocka-switch input[type="checkbox"] {
  box-shadow: var(--mocka-bevel-sunken);
  border-color: transparent;
  border-radius: 999px;
}
:root[data-mocka-edge="bevel"] .mocka-switch input[type="checkbox"]::before {
  box-shadow: var(--mocka-bevel-raised);
}

/*
 * check.css — checkbox da Mocka (Inputs "checkbox e switch", C2 —
 * Blueprint §12.1). PROTÓTIPO. Par do .mocka-switch: o switch é liga/desliga
 * de um estado; a checkbox é marcar/desmarcar um item (listas, formulários).
 *
 * Marcação (o rótulo é opcional):
 *   <label class="mocka-check">
 *     <input type="checkbox">
 *     <span class="mocka-check-label">rótulo</span>
 *   </label>
 *
 * Estado indeterminado (o "traço", nem ligado nem desligado): o app marca
 * input.indeterminate = true, ou Mocka.check("#x").indeterminate(true).
 *
 * O estado PERSISTE (D29) quando o app chama Mocka.check("#id",{persist});
 * sem isso, funciona como <input type=checkbox> comum (o visual é só CSS).
 *
 * Estados: hover, checked (:checked), indeterminate, focus-visible, disabled.
 * HERANÇA (D24) — components.check.*:
 *   box        ← surface     box-border    ← line
 *   box-on     ← accent      box-on-border ← accent
 *   mark       ← on-accent   size          ← 18px
 *   radius     ← radius-small  label-color ← text-soft
 * Traço desenhado (effects.css): a caixa inteira (sem texto dentro) passa
 * pelo filtro de contorno, como o slider e o switch.
 */

.mocka-check {
  display: inline-flex;
  align-items: center;
  gap: var(--mocka-space-2, 8px);
  font-size: var(--mocka-base-size, 13px);
  color: var(--mocka-check-label-color, var(--mocka-text-soft));
  user-select: none;
  cursor: pointer;
}

.mocka-check input[type="checkbox"] {
  --_s: var(--mocka-check-size, 18px);
  --_box: var(--mocka-check-box, var(--mocka-surface));
  --_bd: var(--mocka-check-box-border, var(--mocka-line));
  --_mark: var(--mocka-check-mark, var(--mocka-on-accent));
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: var(--_s);
  height: var(--_s);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-radius: var(--mocka-check-radius, var(--mocka-radius-small, 4px));
  background: var(--_box);
  border: var(--mocka-border-width, 1px) solid var(--_bd);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  filter: var(--mocka-edge-filter, none);
}
/* o "✓": um retângulo com duas bordas, girado 45° (traço clássico em CSS) */
.mocka-check input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--_s) * 0.3);
  height: calc(var(--_s) * 0.55);
  border: solid var(--_mark);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform 120ms;
}
.mocka-check input[type="checkbox"]:checked {
  --_box: var(--mocka-check-box-on, var(--mocka-accent));
  --_bd: var(--mocka-check-box-on-border, var(--mocka-accent));
}
.mocka-check input[type="checkbox"]:checked::before {
  transform: translate(-50%, -60%) rotate(45deg) scale(1);
}
/* indeterminado: um traço horizontal no lugar do ✓ */
.mocka-check input[type="checkbox"]:indeterminate {
  --_box: var(--mocka-check-box-on, var(--mocka-accent));
  --_bd: var(--mocka-check-box-on-border, var(--mocka-accent));
}
.mocka-check input[type="checkbox"]:indeterminate::before {
  width: calc(var(--_s) * 0.5);
  height: 0;
  border-width: 0 0 2px 0;
  transform: translate(-50%, -50%) rotate(0) scale(1);
}
.mocka-check input[type="checkbox"]:hover { --_bd: var(--mocka-accent); }
.mocka-check input[type="checkbox"]:focus-visible {
  outline: var(--mocka-focus-ring, 2px) solid var(--mocka-accent);
  outline-offset: 2px;
}
.mocka-check input[type="checkbox"]:disabled { opacity: 0.5; cursor: default; }
.mocka-check:has(input:disabled) { cursor: default; }

.mocka-check-label { color: var(--mocka-check-label-color, var(--mocka-text-soft)); }

/* BEVEL (Windows 95): a caixa é um poço afundado. */
:root[data-mocka-edge="bevel"] .mocka-check input[type="checkbox"] {
  box-shadow: var(--mocka-bevel-sunken);
  border-color: transparent;
}

/*
 * card.css — card da Mocka (Foundation "cards/panels", Blueprint §12.1).
 * PROTÓTIPO. Nasceu de app real (tela Finishing): contêiner VISÍVEL com
 * título e corpo, distinto do .mocka-panel (que é só bloco de seção, sem
 * moldura). O card tem fundo, borda e cantos próprios.
 *
 * Marcação:
 *   <section class="mocka-card">
 *     <h3 class="mocka-card-title">Voice</h3>
 *     <div class="mocka-card-body">…</div>
 *   </section>
 * (o título é opcional; o grid de cards é layout da tela, do app.css — a
 * Mocka só define o card em si.)
 *
 * HERANÇA (D24) — components.card.*:
 *   background  ← surface (com surface-alpha → acrílico no Gelo)
 *   border      ← line       radius       ← radius-large
 *   title-color ← text-soft  padding      ← space-4
 * Effects (D27): traço desenhado por ::before (fundo) + ::after (borda),
 * como o menu e a janela interna; acrílico pelo surface-alpha do tema;
 * bevel = card saliente (Win95).
 */

.mocka-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  gap: var(--mocka-card-gap, var(--mocka-space-3, 12px));
  padding: var(--mocka-card-padding, var(--mocka-space-4, 16px));
  /* fundo com o alfa do tema: opaco nos temas limpos, acrílico no Gelo */
  --_bg: color-mix(in srgb, var(--mocka-card-background, var(--mocka-surface)) var(--mocka-card-alpha, var(--mocka-surface-alpha, var(--mocka-backdrop-alpha, 100%))), transparent);
  --_bd: var(--mocka-card-border, var(--mocka-line));
  background: var(--mocka-edge-hide, var(--_bg));
  border: var(--mocka-border-width, 1px) solid var(--mocka-edge-hide, var(--_bd));
  border-radius: var(--mocka-card-radius, var(--mocka-radius-large, 9px));
}

.mocka-card-title {
  margin: 0;
  font-size: var(--mocka-card-title-size, var(--mocka-base-size, 13px));
  font-weight: 600;
  font-family: var(--mocka-title-font, var(--mocka-ui-font));
  color: var(--mocka-card-title-color, var(--mocka-text-soft));
}

.mocka-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--mocka-card-body-gap, var(--mocka-space-3, 12px));
  min-width: 0;
  min-height: 0;
  color: var(--mocka-text);
}

/* BEVEL (Windows 95): o card é um painel saliente, como a janela interna. */
:root[data-mocka-edge="bevel"] .mocka-card {
  box-shadow: var(--mocka-bevel-raised);
  border-color: transparent;
}

/*
 * tooltip.css — dica em hover/focus da Mocka (C6, Blueprint §12.1). PROTÓTIPO.
 * Nasceu de app real (tela Finishing): dicas longas demais para caber no card.
 *
 * Marcação que o APP escreve (só o gatilho; a Mocka cria o balão):
 *   <button class="mocka-help" type="button" data-tip="texto longo…">?</button>
 * Também vale pôr data-tip em qualquer elemento para dar-lhe uma dica.
 *
 * O balão (.mocka-tooltip-bubble) é ÚNICO, criado por tooltip.js no <body>
 * como popover (camada de topo): nunca corta na borda de um card com overflow
 * e sai da janela se preciso. Opaco mesmo com a janela em véu (D31).
 *
 * HERANÇA (D24):
 *   help.* :   size 18, color ← text-faint, background ← surface-2,
 *              border ← line, hover ← accent
 *   tooltip.*: background ← surface (OPACO), color ← text, border ← line,
 *              radius ← radius-medium, shadow, max-width 260px
 * Effects (D27): gatilho pelo par ::before/::after (tem texto: o "?");
 * balão como o menu (fundo ::before, borda ::after).
 */

/* gatilho "?" -------------------------------------------------------------- */
.mocka-help {
  appearance: none;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--mocka-help-size, 18px);
  height: var(--mocka-help-size, 18px);
  padding: 0;
  font: inherit;
  font-size: var(--mocka-caption-size, 11px);
  font-weight: 700;
  line-height: 1;
  border-radius: 50%;
  cursor: help;
  vertical-align: middle;
  --_bg: var(--mocka-help-background, var(--mocka-surface-2));
  --_bd: var(--mocka-help-border, var(--mocka-line));
  color: var(--mocka-help-color, var(--mocka-text-faint));
  background: var(--mocka-edge-hide, var(--_bg));
  border: var(--mocka-border-width, 1px) solid var(--mocka-edge-hide, var(--_bd));
}
.mocka-help:hover,
.mocka-help[aria-expanded="true"] {
  --_bd: var(--mocka-accent);
  color: var(--mocka-accent-ink);
}
.mocka-help:focus-visible { outline: var(--mocka-focus-ring, 2px) solid var(--mocka-accent); outline-offset: 2px; }

/* balão único (popover no topo) ------------------------------------------- */
.mocka-tooltip-bubble {
  position: fixed;
  isolation: isolate;
  margin: 0;
  max-width: var(--mocka-tooltip-max-width, 260px);
  padding: var(--mocka-tooltip-padding, 8px 10px);
  font-size: var(--mocka-caption-size, 11px);
  line-height: 1.45;
  --_bg: var(--mocka-tooltip-background, var(--mocka-surface));
  --_bd: var(--mocka-tooltip-border, var(--mocka-line));
  color: var(--mocka-tooltip-color, var(--mocka-text));
  background: var(--mocka-edge-hide, var(--_bg));
  border: var(--mocka-border-width, 1px) solid var(--mocka-edge-hide, var(--_bd));
  border-radius: var(--mocka-tooltip-radius, var(--mocka-radius-medium, 8px));
  box-shadow: var(--mocka-tooltip-shadow, 0 8px 24px -10px rgba(0, 0, 0, 0.5));
  z-index: 2147483000;
  /* popover: nasce escondido; tooltip.js dá showPopover/hidePopover */
  overflow: visible;
}
/* fallback quando o motor não tem Popover API: a classe controla a exibição */
.mocka-tooltip-bubble:not(:popover-open) { display: none; }
.mocka-tooltip-bubble.is-open { display: block; }

/*
 * titlebar.css — barra de título desenhada pelo TEMA (Blueprint: chrome da
 * janela é do tema; D22 reaberta, visão Winamp). Só existe quando o tema pede
 * effects.window.chrome != "native"; a mocka.js injeta o elemento e liga
 * arrasto (.pywebview-drag-region), botões (Mocka.window.*) e resize (alças).
 *
 * HERANÇA (D24): fundo ← chrome; texto ← chrome-text; altura ← titlebar-height
 * (cai em control-height). O tema só precisa da paleta.
 */

/* a barra empilha acima da casca do app; a casca deixa de ser 100vh e divide */
body:has(> .mocka-titlebar) { display: flex; flex-direction: column; height: 100vh; }
body:has(> .mocka-titlebar) > .mocka-app { height: auto; flex: 1 1 auto; min-height: 0; }

.mocka-titlebar {
  flex: none;
  display: flex;
  align-items: stretch;
  height: var(--mocka-titlebar-height, var(--mocka-control-height, 34px));
  background: var(--mocka-titlebar-background, var(--mocka-chrome));
  color: var(--mocka-titlebar-color, var(--mocka-chrome-text));
  user-select: none;
  position: relative;
  z-index: 50;
}
/* ARRASTO NATIVO: draggable region do WebView2 (janela com moldura → move do
 * Windows, com snap/FancyZones). Botões são no-drag pra continuarem clicáveis. */
.mocka-titlebar-drag {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  padding-left: var(--mocka-space-3, 12px);
  -webkit-app-region: drag;
  app-region: drag;
}
.mocka-titlebar-actions, .mocka-titlebar-btn, .mocka-titlebar-system, .mocka-titlebar-system .mocka-button {
  -webkit-app-region: no-drag;
  app-region: no-drag;
}
.mocka-titlebar-title {
  font-family: var(--mocka-title-font, var(--mocka-ui-font));
  font-weight: 600;
  font-size: var(--mocka-small-size, 12px);
  letter-spacing: var(--mocka-label-tracking, 0.01em);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mocka-titlebar-actions { flex: none; display: flex; align-items: stretch; }

/* Os cinco controles da barra (MOCKA, claro/escuro, –, ▫, ✕) são .mocka-button
 * de verdade: HERDAM OS EFFECTS DO TEMA (D27). Como o botão comum, expõem
 * --_bg/--_bd e escondem fundo/borda retos por --mocka-edge-hide — assim, no
 * Giz de Cera, os pseudo-elementos do effects.css desenham o botão a giz
 * (preenchimento ondulado + contorno com grão). Cores por
 * components.titlebar.* (buttonBackground / buttonBorder / hover…); o default
 * transparente mantém os temas lisos discretos como antes. */
.mocka-titlebar-system { display: flex; align-items: stretch; }
.mocka-titlebar .mocka-button {
  appearance: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: calc(100% - 8px);
  margin: 4px 2px; /* respiro: o traço de giz precisa de espaço pra tremer */
  --_bg: var(--mocka-titlebar-button-background, transparent);
  --_bd: var(--mocka-titlebar-button-border, transparent);
  color: var(--mocka-titlebar-color, var(--mocka-chrome-text));
  background: var(--mocka-edge-hide, var(--_bg));
  border: var(--mocka-border-width, 1px) solid var(--mocka-edge-hide, var(--_bd));
  border-radius: var(--mocka-button-radius, var(--mocka-radius-medium, 8px));
  box-shadow: none !important; /* sem bevel na barra (relevo na caption é outra decisão) */
}
.mocka-titlebar .mocka-button:hover {
  --_bg: var(--mocka-titlebar-button-hover-background, color-mix(in srgb, var(--mocka-chrome-text) 20%, transparent));
  --_bd: var(--mocka-titlebar-button-hover-border, transparent); /* botão de barra não tem borda (usuário, 13/09) */
  color: var(--mocka-titlebar-color, var(--mocka-chrome-text));
}
.mocka-titlebar .mocka-button:active { --_bg: color-mix(in srgb, var(--mocka-chrome-text) 32%, transparent); }
.mocka-titlebar .mocka-titlebar-btn--close:hover { --_bg: var(--mocka-danger); color: #fff; }
.mocka-titlebar .mocka-button svg { fill: currentColor; }
/* Tentado e NÃO aprovado (13/09): glifo passando pelo filtro de giz. Fica só o
 * glifo limpo, sem borda — o traço do tema segue nos componentes do conteúdo. */
/* controles de caption não mostram anel de foco (como no Windows) */
.mocka-titlebar button:focus-visible, .mocka-titlebar button:focus { outline: none; }

/* resize/snap são NATIVOS: o provider religa WS_THICKFRAME/MAXIMIZEBOX na
 * janela frameless (win32_chrome.enable_native_snap), então a borda de
 * dimensionamento e o snap (Win+seta, FancyZones, topo) vêm do Windows. */

/*
 * effects.css — efeitos de tema que atravessam componentes (Blueprint §15.2,
 * categoria Effects). Hoje: TRAÇO DESENHADO ("sketch") e TEXTURA DE PAPEL.
 *
 * Como funciona o traço (sem borrar texto): cada componente com borda define
 * variáveis internas --_bg/--_bd (fundo e cor da borda do estado atual) e
 * desenha sua borda reta normalmente. Um tema "sketch" emite
 * --mocka-edge-hide: transparent (a borda reta some) e --mocka-edge-width
 * (o pseudo-elemento abaixo ganha largura e passa pelo filtro tremido).
 * Temas limpos não emitem nada: --mocka-edge-width cai em 0 e nada muda.
 */

/* textura de fundo (effects.background): padrão + preenchimento na casca; a
   textura de papel, se houver, fica por cima. Tema sem fundo: nada muda. */
.mocka-app {
  background-image: var(--mocka-texture, none), var(--mocka-backdrop, none);
}
/* vidro fosco sobre o fundo: os painéis deixam o fundo aparecer
   (backdrop-alpha) e o desfocam atrás de si (backdrop-blur) */
.mocka-appbar, .mocka-toolbar, .mocka-statusbar, .mocka-scroll, .mocka-card, .mocka-tab-panel {
  backdrop-filter: var(--mocka-backdrop-blur, none);
}

/* botão: ::before desenha o PREENCHIMENTO ondulado (sem grão) e ::after o
   CONTORNO ondulado com grão de giz. Mesma semente: os dois acompanham. */
.mocka-button { position: relative; isolation: isolate; }
.mocka-button::before,
.mocka-button::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--mocka-border-width, 1px));
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.mocka-button::before {
  background: var(--_bg, transparent);
  filter: var(--mocka-edge-fill-filter, none);
  /* z-index -1 pinta POR CIMA da borda do próprio botão; em tema limpo o
     pseudo precisa sumir, senão cobre a linha de 1px (achado 05/09) */
  opacity: var(--mocka-edge-fill-opacity, 0);
}
.mocka-button::after {
  border: var(--mocka-edge-width, 0) solid var(--_bd, transparent);
  filter: var(--mocka-edge-filter, none);
}

/* contêiner que rola: o pseudo não pode morar DENTRO do scroll (rolaria
   junto e viraria item de grid/flex do app). Fica no painel pai, ancorado
   à caixa do .mocka-scroll (CSS anchor positioning, Chromium 125+/131+). */
.mocka-panel { position: relative; anchor-scope: --mocka-scroll; }
.mocka-scroll { anchor-name: --mocka-scroll; }
.mocka-panel:has(> .mocka-scroll)::after {
  content: "";
  position: absolute;
  position-anchor: --mocka-scroll;
  top: anchor(top);
  left: anchor(left);
  right: anchor(right);
  bottom: anchor(bottom);
  z-index: 4;
  box-sizing: border-box;
  border-radius: var(--mocka-scroll-radius, var(--mocka-radius-large, 9px));
  border: var(--mocka-edge-width, 0) solid var(--mocka-scroll-border, var(--mocka-line));
  filter: var(--mocka-edge-filter, none);
  pointer-events: none;
}

/* input / select (têm texto): ::before fundo só ondulado, ::after contorno
   com grão — a dupla do botão. Pastilha: contorno a 2/3 (é miúda). */
.mocka-input::before, .mocka-input::after,
.mocka-select::before, .mocka-select::after,
.mocka-pill::before, .mocka-pill::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--mocka-border-width, 1px));
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.mocka-pill::before, .mocka-pill::after { inset: -1px; }
.mocka-input::before, .mocka-select::before, .mocka-pill::before {
  background: var(--_bg, transparent);
  filter: var(--mocka-edge-fill-filter, none);
  opacity: var(--mocka-edge-fill-opacity, 0);
}
.mocka-input::after, .mocka-select::after {
  border: var(--mocka-edge-width, 0) solid var(--_bd, transparent);
  filter: var(--mocka-edge-filter, none);
}
.mocka-pill::after {
  border: calc(var(--mocka-edge-width, 0) * 0.67) solid var(--_bd, transparent);
  filter: var(--mocka-edge-filter, none);
}

/* slider: o próprio <input> recebe o filtro (ver slider.css) — sem texto dentro */

/* abas: a aba selecionada desenha fundo (::before, só ondulado) e borda
   (::after, ondulada + grão); a barra desenha a linha inferior tremida */
.mocka-tab { isolation: isolate; }
.mocka-tab::before,
.mocka-tab::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--mocka-border-width, 1px));
  bottom: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.mocka-tab::before {
  background: var(--_bg, transparent);
  filter: var(--mocka-edge-fill-filter, none);
  opacity: var(--mocka-edge-fill-opacity, 0);
}
.mocka-tab::after {
  border: var(--mocka-edge-width, 0) solid var(--_bd, transparent);
  border-bottom: 0;
  filter: var(--mocka-edge-filter, none);
}
/* painel da aba: contorno tremido (a linha da barra é a borda de cima dele) */
.mocka-tab-panel::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--mocka-border-width, 1px));
  z-index: -1;
  border-radius: inherit;
  border: var(--mocka-edge-width, 0) solid var(--_bd, transparent);
  filter: var(--mocka-edge-filter, none);
  pointer-events: none;
}
/* o contêiner de rolagem dentro do painel da aba não desenha contorno próprio */
.mocka-tab-panel > .mocka-scroll { anchor-name: none; }

/* tabela: linha do cabeçalho tremida */
.mocka-table thead th { position: sticky; }
.mocka-table thead th::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--mocka-border-width, 1px));
  height: var(--mocka-edge-width, 0);
  background: var(--_bd, transparent);
  filter: var(--mocka-edge-filter, none);
  pointer-events: none;
}

/* menu de contexto (tem texto): ::before = preenchimento só ondulado,
   ::after = contorno ondulado + grão. Juntos num pseudo só, o grão furava o
   preenchimento e o conteúdo de trás aparecia (bug 05/09). */
.mocka-menu::before,
.mocka-menu::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--mocka-border-width, 1px));
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.mocka-menu::before {
  background: var(--_bg, transparent);
  filter: var(--mocka-edge-fill-filter, none);
  opacity: var(--mocka-edge-fill-opacity, 0);
}
.mocka-menu::after {
  border: var(--mocka-edge-width, 0) solid var(--_bd, transparent);
  filter: var(--mocka-edge-filter, none);
}

/* gatilho "?" (tem texto): fundo ::before ondulado, borda ::after com grão */
.mocka-help::before, .mocka-help::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--mocka-border-width, 1px));
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.mocka-help::before {
  background: var(--_bg, transparent);
  filter: var(--mocka-edge-fill-filter, none);
  opacity: var(--mocka-edge-fill-opacity, 0);
}
.mocka-help::after {
  border: var(--mocka-edge-width, 0) solid var(--_bd, transparent);
  filter: var(--mocka-edge-filter, none);
}

/* balão do tooltip (tem texto): igual ao menu — fundo ::before, borda ::after */
.mocka-tooltip-bubble::before, .mocka-tooltip-bubble::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--mocka-border-width, 1px));
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.mocka-tooltip-bubble::before {
  background: var(--_bg, transparent);
  filter: var(--mocka-edge-fill-filter, none);
  opacity: var(--mocka-edge-fill-opacity, 0);
}
.mocka-tooltip-bubble::after {
  border: var(--mocka-edge-width, 0) solid var(--_bd, transparent);
  filter: var(--mocka-edge-filter, none);
}

/* card: fundo por ::before (só ondulação), borda por ::after (grão) — como o menu */
.mocka-card::before,
.mocka-card::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--mocka-border-width, 1px));
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.mocka-card::before {
  background: var(--_bg, transparent);
  filter: var(--mocka-edge-fill-filter, none);
  opacity: var(--mocka-edge-fill-opacity, 0);
}
.mocka-card::after {
  border: var(--mocka-edge-width, 0) solid var(--_bd, transparent);
  filter: var(--mocka-edge-filter, none);
}

/* janela interna: fundo por ::before (só ondulação), borda por ::after (grão) */
.mocka-inner-window::before,
.mocka-inner-window::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--mocka-border-width, 1px));
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.mocka-inner-window::before {
  /* fundo + faixa da barra de título na MESMA camada ondulada: o canto da
     barra acompanha o giz (fresta nos cantos superiores, usuário 06/09) */
  background:
    linear-gradient(180deg, var(--_tb1) 0, var(--_tb2) var(--_tb, 34px), transparent var(--_tb, 34px)),
    var(--_bg, transparent);
  filter: var(--mocka-edge-fill-filter, none);
  opacity: var(--mocka-edge-fill-opacity, 0);
}
.mocka-inner-window::after {
  border: var(--mocka-edge-width, 0) solid var(--_bd, transparent);
  filter: var(--mocka-edge-filter, none);
}

/* toolbar e statusbar: a linha divisória tremida */
.mocka-toolbar, .mocka-statusbar { position: relative; }
.mocka-toolbar::after, .mocka-statusbar::after, .mocka-appbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--mocka-edge-width, 0);
  background: var(--_bd, transparent);
  filter: var(--mocka-edge-filter, none);
  pointer-events: none;
}
.mocka-toolbar::after, .mocka-appbar::after { bottom: calc(-1 * var(--mocka-border-width, 1px)); }
.mocka-statusbar::after { top: calc(-1 * var(--mocka-border-width, 1px)); }

/* -------------------------------------------------------------------------
 * BEVEL (Windows 95): relevo 3D de dois tons via box-shadow inset. Ao
 * contrário do sketch (pseudo-elemento + filtro SVG), o relevo mora no
 * próprio elemento e NÃO usa pseudo. Fica todo escopado em
 * [data-mocka-edge="bevel"] (marcado pela mocka.js quando o tema tem
 * effects.edge.style == "bevel") — assim é 100% inerte nos temas limpos.
 * A borda reta de 1px do componente some (o relevo é a borda agora).
 * "raised" = saliente (botão, painéis, barras); "sunken" = afundado
 * (campos de entrada e o botão pressionado). */
/* SALTADO (raised) — só os controles/molduras discretos. As áreas de
 * conteúdo (.mocka-panel, .mocka-tab-panel) ficam PLANAS, como a área de
 * cliente do Win95: dar relevo nelas viraria "botão gigante". */
:root[data-mocka-edge="bevel"] .mocka-button,
:root[data-mocka-edge="bevel"] .mocka-inner-window,
:root[data-mocka-edge="bevel"] .mocka-menu,
:root[data-mocka-edge="bevel"] .mocka-tab-panel {
  box-shadow: var(--mocka-bevel-raised);
  border-color: transparent;
}
/* corpo do tab: folga interna pra o poço afundado da lista não colar no card
 * saltado (card + calha + poço, como o Win95) — a borda fecha inteira */
:root[data-mocka-edge="bevel"] .mocka-tab-panel { padding: 3px; }
/* aba: relevo saliente com a borda de baixo ABERTA (funde no corpo do tab) */
:root[data-mocka-edge="bevel"] .mocka-tab {
  box-shadow: var(--mocka-bevel-tab);
  border-color: transparent;
}
/* não selecionada: mais baixa e atrás do corpo (recuada) */
:root[data-mocka-edge="bevel"] .mocka-tab:not([aria-selected="true"]) {
  margin-top: 3px;
}
/* selecionada: pra frente, colada no corpo (cobre a borda de cima dele) */
:root[data-mocka-edge="bevel"] .mocka-tab[aria-selected="true"] {
  z-index: 2;
}
/* AFUNDADO (sunken) — campos de entrada, botão pressionado e os POÇOS de
 * conteúdo (.mocka-scroll): num tema com relevo a área de conteúdo recua,
 * com a borda entalhada de dois tons no lugar da linha chapada. Genérico:
 * vale pra qualquer tema bevel; os tons/largura vêm do tema. */
:root[data-mocka-edge="bevel"] .mocka-button:active,
:root[data-mocka-edge="bevel"] .mocka-button[aria-pressed="true"],
:root[data-mocka-edge="bevel"] .mocka-input,
:root[data-mocka-edge="bevel"] .mocka-select,
:root[data-mocka-edge="bevel"] .mocka-scroll {
  box-shadow: var(--mocka-bevel-sunken);
  border-color: transparent;
}
/* foco: o pontilhado clássico por dentro, sem perder o relevo */
:root[data-mocka-edge="bevel"] .mocka-button:focus-visible {
  outline: 1px dotted var(--mocka-text);
  outline-offset: -4px;
}

/*
 * lite.css — o que muda na MOCKA Lite (navegador). Entra por último no
 * mocka-lite.css. Só age sob data-mocka-host="lite" (posto pelo host-lite.js).
 *
 * No desktop "a janela é o app": casca de 100vh que não rola. Página web
 * rola como documento — então a casca cresce com o conteúdo, o fundo do tema
 * fica parado atrás (fixed) e a appbar gruda no topo. Um app web que queira
 * a casca de app (sem rolar) marca <html data-mocka-page="app">.
 */
:root[data-mocka-host="lite"]:not([data-mocka-page="app"]) body {
  overflow: auto;
  margin: 0;
}
:root[data-mocka-host="lite"]:not([data-mocka-page="app"]) .mocka-app {
  height: auto;
  min-height: 100vh;
  overflow: visible;
  position: relative;
  isolation: isolate;
  background: transparent;
}
/* O fundo do tema (textura de papel, colmeia, gradientes) fica PARADO atrás
   da página numa camada fixa própria. NÃO usar background-attachment: fixed:
   ele obriga o navegador a repintar a tela inteira a cada quadro de rolagem —
   no celular, com os filtros do traço de giz, a rolagem ficava pesada
   (usuário, 22/09/2026). Camada fixa + will-change = o compositor só a move. */
:root[data-mocka-host="lite"]:not([data-mocka-page="app"]) .mocka-app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: color-mix(in srgb, var(--mocka-surface) var(--mocka-surface-alpha, var(--mocka-backdrop-alpha, 100%)), transparent);
  background-image: var(--mocka-texture, none), var(--mocka-backdrop, none);
  will-change: transform;
}
:root[data-mocka-host="lite"]:not([data-mocka-page="app"]) .mocka-app > .mocka-appbar {
  position: sticky;
  top: 0;
  z-index: 20;
}
:root[data-mocka-host="lite"] body { margin: 0; }
/* sob a casca (overscroll, fim da página): a cor de janela do tema, não branco */
:root[data-mocka-host="lite"] { background: var(--mocka-window); }

/* celular: a appbar quebra em duas linhas (marca + MOCKA em cima, ações do
   app embaixo) e a barra de abas rola de lado em vez de cortar a última */
@media (max-width: 600px) {
  :root[data-mocka-host="lite"] .mocka-appbar { flex-wrap: wrap; row-gap: var(--mocka-space-2, 8px); }
  :root[data-mocka-host="lite"] .mocka-appbar-brand { min-width: 0; }
  :root[data-mocka-host="lite"] .mocka-appbar-system { margin-left: auto; }
  :root[data-mocka-host="lite"] .mocka-appbar-actions { order: 3; flex-basis: 100%; margin-left: 0; flex-wrap: wrap; }
  :root[data-mocka-host="lite"] .mocka-tabs-bar { overflow-x: auto; scrollbar-width: none; }
  :root[data-mocka-host="lite"] .mocka-tab { flex: none; }
}