/* 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); o contorno do
 *                       tema (giz) vem do .mocka-panel pai — solto, borda reta
 *   .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;
  /* celular: 100vh conta a área atrás da barra do navegador e o pé da casca
     (barra de navegação) ficava cortado; dvh = a altura visível de verdade */
  height: 100dvh;
  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; }

/*
 * icon.css — ícones semânticos da Mocka (C8, Blueprint §16). Ver icon.js.
 *
 *   <span class="mocka-icon" data-icon="save"></span>
 *   <button class="mocka-button mocka-button--icon" data-icon="save" aria-label="Salvar"></button>
 *
 * O ícone herda a COR do texto (currentColor) — segue hover, seleção, tons.
 * HERANÇA (D24/D35) — seção "icons" do tema:
 *   size ← 16px (--mocka-icon-size)   stroke ← 1.8 (--mocka-icon-stroke)
 *   set ← "linha" (traço) | "pixel" (blocos, Windows 95)   overrides por nome
 * Packs de preenchimento (pixel) usam fill; os de traço, stroke; o "pixel"
 * desenha sem suavização (crispEdges), como os ícones de 16 px do Win95.
 */

.mocka-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--mocka-icon-size, 16px);
  height: var(--mocka-icon-size, 16px);
  line-height: 1;
  color: inherit;
  vertical-align: middle;
}
.mocka-icon > svg { width: 100%; height: 100%; display: block; }
/* classe dobrada: vence as regras "svg { fill: none; stroke }" dos componentes
   (menu, navbar, árvore…) — o pack decide traço ou preenchimento */
.mocka-icon-stroke.mocka-icon-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--mocka-icon-stroke, 1.8);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mocka-icon-fill.mocka-icon-fill { fill: currentColor; stroke: none; }
.mocka-icon-crisp.mocka-icon-crisp { shape-rendering: crispEdges; }
/* nome desconhecido: quadradinho tracejado (nunca some calado) */
.mocka-icon-missing.mocka-icon-missing { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 2 2; opacity: 0.6; }

/* botão de ícone de verdade: o ícone um pouco maior que o do texto */
.mocka-button--icon > .mocka-icon { --mocka-icon-size: var(--mocka-button-icon-size, 18px); }
.mocka-button > .mocka-icon + * { margin-left: 0; }

/*
 * 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
 *   danger-bg    ← danger         danger-color ← #fff (ação destrutiva: --danger)
 *   link-color   ← accent-ink     (--link: "+ adicionar", sem caixa)
 *   sm-height    ← control-height − 8   (--sm)
 *   danger-text  ← danger         ([data-tone=danger]: perigo discreto)
 *   shadow       ← none           (sombra do botão comum; o primário tem a dele)
 *   pressShift   ← 0              (ao apertar, desliza X,Y px — "papel colado"
 *   pressShadow  ← a do estado      sobre a sombra dura: Lambe-lambe)
 *   transform    ← none   tracking ← normal   (caixa-alta, espaçamento)
 */

.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));
  text-transform: var(--mocka-button-transform, none);
  letter-spacing: var(--mocka-button-tracking, normal);
  --_sh: var(--mocka-button-shadow, none);
  box-shadow: var(--_sh);
  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));
  /* apertar: o tema pode fazer o botão deslizar sobre a própria sombra */
  transform: translate(var(--mocka-button-press-shift, 0px), var(--mocka-button-press-shift, 0px));
  box-shadow: var(--mocka-button-press-shadow, var(--_sh));
}
.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));
  --_sh: var(--mocka-button-primary-shadow, 0 6px 16px -8px var(--mocka-button-primary-background, var(--mocka-accent)));
  box-shadow: var(--_sh);
}
.mocka-button--primary:hover { color: var(--mocka-button-primary-color, var(--mocka-on-accent)); filter: brightness(1.06); }

/* tamanho pequeno (ação dentro de uma faixa ou cartão: "Tomei", "Ativar") */
.mocka-button--sm {
  height: var(--mocka-button-sm-height, calc(var(--mocka-control-height, 34px) - 8px));
  padding: 0 var(--mocka-button-sm-padding-x, 10px);
  font-size: var(--mocka-small-size, 12px);
}
/* perigo DISCRETO ("Arquivar", "Sair"): botão normal com o texto em vermelho;
   o --danger (cheio) fica para a confirmação da ação destrutiva */
.mocka-button[data-tone="danger"] { color: var(--mocka-button-danger-text, var(--mocka-danger)); }
.mocka-button[data-tone="danger"]:hover {
  --_bd: var(--mocka-button-danger-text, var(--mocka-danger));
  color: var(--mocka-button-danger-text, var(--mocka-danger));
}

/* botão com cara de LINK ("+ adicionar"): sem caixa, só o texto */
.mocka-button--link {
  --_bg: transparent;
  --_bd: transparent;
  height: auto;
  padding: 2px 0;
  font-size: var(--mocka-small-size, 12px);
  font-weight: 600;
  color: var(--mocka-button-link-color, var(--mocka-accent-ink));
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none;
}
.mocka-button--link:hover { --_bd: transparent; color: var(--mocka-button-link-hover-color, var(--mocka-text)); }
/* link não tem caixa em nenhum tema: sem o relevo do bevel nem o traço do giz */
:root[data-mocka-edge] .mocka-button.mocka-button--link, :root[data-mocka-edge] .mocka-button.mocka-button--link:active { box-shadow: none; }
.mocka-button--link::before, .mocka-button--link::after { display: none; }

/* ação destrutiva (Apagar, Excluir): o primário na cor de perigo */
.mocka-button--danger {
  font-weight: 600;
  --_bg: var(--mocka-button-danger-background, var(--mocka-danger));
  --_bd: var(--mocka-button-danger-background, var(--mocka-danger));
  color: var(--mocka-button-danger-color, #fff);
  box-shadow: none;
}
.mocka-button--danger:hover { color: var(--mocka-button-danger-color, #fff); filter: brightness(1.08); }

.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); }

/* modo virtual (C12): os espaçadores guardam a altura das linhas que não estão
   desenhadas — sem padding, borda, hover ou seleção; a rolagem é a de verdade */
.mocka-table .mocka-table-spacer > td { padding: 0 !important; border: 0 !important; background: transparent !important; }
.mocka-table .mocka-table-spacer[hidden] { display: none; }
/* linha de altura estável: o texto não quebra (a altura medida vale para todas) */
.mocka-table--virtual tbody td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/*
 * 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
 *   logoSize ← control-height − 2   logoRadius ← radius-small   (data-logo)
 *   titleSize ← title-size + 6   subtitleColor ← color 72%       (data-subtitle)
 * 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; }
/* logo do app (data-logo): o quadrado do app no lugar da marca do MOCKA */
.mocka-appbar-logo {
  display: block; flex: none;
  width: var(--mocka-appbar-logo-size, calc(var(--mocka-control-height, 34px) - 2px));
  height: var(--mocka-appbar-logo-size, calc(var(--mocka-control-height, 34px) - 2px));
  border-radius: var(--mocka-appbar-logo-radius, var(--mocka-radius-small, 5px));
  object-fit: cover;
}
/* duas linhas (data-subtitle): título grande em cima, subtítulo + versão embaixo */
.mocka-appbar-brand--stack { min-width: 0; flex: 0 1 auto; }
.mocka-appbar-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.mocka-appbar-title {
  font-size: var(--mocka-appbar-title-size, calc(var(--mocka-title-size, 14px) + 6px));
  overflow: hidden; text-overflow: ellipsis;
}
.mocka-appbar-line {
  display: flex; align-items: baseline; gap: 6px; min-width: 0;
  font-family: var(--mocka-ui-font); font-size: var(--mocka-caption-size, 11px); font-weight: 400;
  color: var(--mocka-appbar-subtitle-color, color-mix(in srgb, var(--mocka-appbar-color, var(--mocka-text)) 72%, transparent));
}
.mocka-appbar-subtitle { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mocka-appbar-line > .mocka-appbar-version { flex: none; font-size: 0.85em; }
.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 :user-invalid — só DEPOIS que a pessoa mexeu no campo; antes
 * era :invalid:not(:placeholder-shown), que pintava de vermelho todo campo
 * obrigatório sem placeholder já ao abrir — achado no login do meds, 27/09); 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)); }
/* D35: sombra própria (o filete de luz translúcido do meds, no Neon) */
.mocka-input, .mocka-select { box-shadow: var(--mocka-input-shadow, none); }
.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(:user-invalid) {
  --_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(:user-invalid) .mocka-input-label { color: var(--mocka-danger); }
.mocka-input[data-invalid] > input, .mocka-input[data-invalid] > textarea,
.mocka-input:has(:user-invalid) > 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(:user-invalid) .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
 *   trackOnShadow ← none   knobOnShadow ← none   (o brilho de ligado)
 * 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 { box-shadow: var(--mocka-switch-track-on-shadow, none); }
.mocka-switch input[type="checkbox"]:checked::before { box-shadow: var(--mocka-switch-knob-on-shadow, none); }
.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
 *   fill ← none (degradê por cima)  shadow ← none (sombra + filete de luz)
 *   hoverBorder ← accent 45%  pressScale ← .985 (.mocka-card--action)
 *   pressShift ← 0 (desliza X,Y px ao tocar)  pressShadow ← a do cartão
 * 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));
  /* D35: camada de degradê por cima do fundo, e sombra/filete de luz (o
     vidro do meds, no Neon); sem valor, nada muda */
  background-image: var(--mocka-card-fill, none);
  box-shadow: var(--mocka-card-shadow, none);
}

/* cartão que é AÇÃO (item de lista que abre algo): foco, hover e o
   "afundar" ao tocar. Use em <button>, <a> ou elemento com tabindex. */
.mocka-card--action {
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: inherit;
  transition: transform 100ms ease-out, background-color 150ms, border-color 150ms;
  -webkit-tap-highlight-color: transparent;
}
.mocka-card--action:hover { --_bd: var(--mocka-card-hover-border, color-mix(in srgb, var(--mocka-accent) 45%, var(--mocka-line))); }
.mocka-card--action:active {
  transform: translate(var(--mocka-card-press-shift, 0px), var(--mocka-card-press-shift, 0px)) scale(var(--mocka-card-press-scale, 0.985));
  box-shadow: var(--mocka-card-press-shadow, var(--mocka-card-shadow, none));
}
.mocka-card--action:focus-visible { outline: var(--mocka-focus-ring, 2px) solid var(--mocka-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .mocka-card--action:active { transform: none; } }

.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; }

/*
 * color.css — seletor de cor (color.js, C18). PROTÓTIPO.
 *
 * A casca é a do menu (.mocka-menu): fundo, borda, sombra e effects herdados.
 * Aqui só o miolo.
 *
 * HERANÇA (D24) — components.color.*:
 *   width ← 244px     sv-height ← 150px     knob-border ← #fff
 *   radius (área e amostras) ← radius-small
 */

.mocka-menu.mocka-color {
  width: var(--mocka-color-width, 244px);
  min-width: 0;
  padding: var(--mocka-space-3, 12px);
  display: flex;
  flex-direction: column;
  gap: var(--mocka-space-3, 12px);
}
.mocka-color-title { padding: 0 !important; }

.mocka-color-sv {
  position: relative;
  height: var(--mocka-color-sv-height, 150px);
  border-radius: var(--mocka-radius-small, 4px);
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, var(--_hue, red));
  cursor: crosshair;
  outline: none;
  touch-action: none;
}
.mocka-color-sv:focus-visible { box-shadow: 0 0 0 var(--mocka-focus-ring, 2px) var(--mocka-accent); }
.mocka-color-knob {
  position: absolute;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 2px solid var(--mocka-color-knob-border, #fff);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 1px 4px rgba(0, 0, 0, .4);
  pointer-events: none;
}

.mocka-color-hue {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 14px; margin: 0;
  border-radius: 999px;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  cursor: pointer;
}
.mocka-color-hue::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: transparent;
  border: 2px solid var(--mocka-color-knob-border, #fff);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
}
.mocka-color-hue:focus-visible { outline: var(--mocka-focus-ring, 2px) solid var(--mocka-accent); outline-offset: 2px; }

.mocka-color-row { display: flex; align-items: center; gap: var(--mocka-space-2, 8px); }
.mocka-color-old, .mocka-color-new {
  flex: none;
  width: 28px; height: 28px;
  border-radius: var(--mocka-radius-small, 4px);
  border: var(--mocka-border-width, 1px) solid var(--mocka-line);
  padding: 0;
}
.mocka-color-old { cursor: pointer; }
.mocka-color-hex { flex: 1; min-width: 0; }
.mocka-color-hex input { width: 100%; font-family: var(--mocka-mono-font); }

.mocka-color-actions { display: flex; justify-content: flex-end; gap: var(--mocka-space-2, 8px); }

/*
 * choice.css — controles de escolha da Mocka (C18, Blueprint §12.1).
 * PROTÓTIPO. Necessidade do meds (22/09/2026): botões segmentados, chips de
 * seleção (um ou vários) e o seletor de dias da semana (bolinhas). O seletor
 * de cor, do mesmo C18, mora em color.css/js.
 *
 * Os três são um GRUPO de opções sobre inputs nativos — rádio (escolhe um) ou
 * checkbox (escolhe vários). O input fica invisível por cima da opção, mas
 * focável e no teclado (setas no rádio, Espaço no checkbox); o <label> é a
 * cara da opção. Funciona sem JS; Mocka.choice entra para persistir (D29).
 *
 *   <div class="mocka-segmented" role="radiogroup" aria-label="Vista">
 *     <label><input type="radio" name="vista" value="dia" checked><span>Dia</span></label>
 *     <label><input type="radio" name="vista" value="semana"><span>Semana</span></label>
 *   </div>
 *
 *   <div class="mocka-chips" aria-label="Turnos">    checkbox = vários, rádio = um
 *     <label><input type="checkbox" value="manha"><span>Manhã</span></label>
 *   </div>
 *
 *   <div class="mocka-weekdays" aria-label="Dias"></div>
 *     vazio: Mocka.choice cria as 7 bolinhas (D S T Q Q S S, valores 0–6)
 *
 * Estados: hover, escolhida (:checked), focus-visible, disabled (na opção ou
 * no grupo inteiro via [aria-disabled="true"]).
 * HERANÇA (D24) — components.choice.*:
 *   background ← surface        color  ← text-soft     border ← line
 *   hoverBorder ← accent
 *   selectedBackground ← accent-soft  selectedColor ← accent-ink
 *   selectedBorder ← accent
 *   trackBackground ← surface-2 (trilha do segmentado)
 *   segmentSelectedBackground ← surface (segmento escolhido)
 *   radius ← radius-medium (segmentado)   chipRadius ← 999px
 *   height ← control-height − 4px
 *   daySize ← 32px   dayRadius ← 50%
 *   daySelectedBackground ← accent   daySelectedColor ← on-accent
 *   selectedShadow ← none (brilho)   daySelectedShadow ← selectedShadow
 *   segmentSelectedColor/Border/Shadow ← os da escolhida
 *   swatchSize ← 36px   swatchRadius ← 50%   swatchRing ← text   swatchGap ← 8px
 *   (selectedBackground e daySelectedBackground aceitam degradê)
 * Traço desenhado (effects.css): a opção tem texto, então usa a dupla do
 * botão — ::before fundo ondulado, ::after contorno com grão. Bevel: opções
 * salientes; a escolhida afunda (como o botão pressionado).
 */

.mocka-segmented, .mocka-chips, .mocka-weekdays {
  --_h: var(--mocka-choice-height, calc(var(--mocka-control-height, 34px) - 4px));
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--mocka-base-size, 13px);
  user-select: none;
}

/* a opção */
.mocka-segmented > label, .mocka-chips > label, .mocka-weekdays > label {
  --_bg: var(--mocka-choice-background, var(--mocka-surface));
  --_bd: var(--mocka-choice-border, var(--mocka-line));
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--_h);
  padding: 0 12px;
  box-sizing: border-box;
  color: var(--mocka-choice-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));
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
/* o input cobre a opção inteira, invisível (clique e foco são dele) */
.mocka-segmented > label > input, .mocka-chips > label > input, .mocka-weekdays > label > input {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}
.mocka-segmented > label:hover, .mocka-chips > label:hover, .mocka-weekdays > label:hover {
  --_bd: var(--mocka-choice-hover-border, var(--mocka-accent));
  color: var(--mocka-choice-selected-color, var(--mocka-accent-ink));
}
.mocka-segmented > label:has(> input:checked), .mocka-chips > label:has(> input:checked), .mocka-weekdays > label:has(> input:checked) {
  --_bg: var(--mocka-choice-selected-background, var(--mocka-accent-soft));
  --_bd: var(--mocka-choice-selected-border, var(--mocka-accent));
  color: var(--mocka-choice-selected-color, var(--mocka-accent-ink));
  font-weight: 600;
  /* brilho da escolhida (D35; o Neon usa o do meds) — selectedBackground
     aceita degradê */
  box-shadow: var(--mocka-choice-selected-shadow, none);
}
.mocka-segmented > label:has(> input:focus-visible), .mocka-chips > label:has(> input:focus-visible), .mocka-weekdays > label:has(> input:focus-visible) {
  outline: var(--mocka-focus-ring, 2px) solid var(--mocka-accent);
  outline-offset: 2px;
  z-index: 1;
}
.mocka-segmented > label:has(> input:disabled), .mocka-chips > label:has(> input:disabled), .mocka-weekdays > label:has(> input:disabled),
.mocka-segmented[aria-disabled="true"] > label, .mocka-chips[aria-disabled="true"] > label, .mocka-weekdays[aria-disabled="true"] > label {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* SEGMENTADO: opções coladas numa trilha; a escolhida "sobe" da trilha */
.mocka-segmented {
  --_r: var(--mocka-choice-radius, var(--mocka-radius-medium, 8px));
  flex-wrap: nowrap;
  padding: 2px;
  gap: 2px;
  border-radius: calc(var(--_r) + 2px);
  background: var(--mocka-choice-track-background, var(--mocka-surface-2));
}
.mocka-segmented > label {
  --_bg: transparent;
  --_bd: transparent;
  height: calc(var(--_h) - 4px);
  border-radius: var(--_r);
}
.mocka-segmented > label:hover { --_bd: transparent; }
.mocka-segmented > label:has(> input:checked) {
  --_bg: var(--mocka-choice-segment-selected-background, var(--mocka-surface));
  --_bd: var(--mocka-choice-segment-selected-border, var(--mocka-choice-selected-border, var(--mocka-accent)));
  color: var(--mocka-choice-segment-selected-color, var(--mocka-choice-selected-color, var(--mocka-accent-ink)));
  box-shadow: var(--mocka-choice-segment-selected-shadow, 0 1px 3px -1px color-mix(in srgb, var(--mocka-text) 35%, transparent));
}
.mocka-segmented--fill { display: flex; }
.mocka-segmented--fill > label { flex: 1; }

/* CHIPS: pílulas soltas; no modo "vários" a escolhida ganha um ✓ */
.mocka-chips { gap: var(--mocka-space-2, 8px); }
.mocka-chips > label {
  border-radius: var(--mocka-choice-chip-radius, 999px);
  padding: 0 14px;
}
.mocka-chips > label:has(> input[type="checkbox"]:checked) > span::before {
  content: "✓";
  font-weight: 700;
  margin-right: 5px;
}

/* DIAS DA SEMANA: bolinhas de mesmo tamanho; escolhida = cheia no acento */
.mocka-weekdays { gap: 6px; flex-wrap: nowrap; }
.mocka-weekdays > label {
  width: var(--mocka-choice-day-size, 32px);
  height: var(--mocka-choice-day-size, 32px);
  padding: 0;
  border-radius: var(--mocka-choice-day-radius, 50%);
  font-size: var(--mocka-small-size, 12px);
  font-weight: 600;
}
.mocka-weekdays > label:has(> input:checked) {
  --_bg: var(--mocka-choice-day-selected-background, var(--mocka-accent));
  --_bd: var(--mocka-choice-day-selected-border, var(--mocka-choice-day-selected-background, var(--mocka-accent)));
  color: var(--mocka-choice-day-selected-color, var(--mocka-on-accent));
  box-shadow: var(--mocka-choice-day-selected-shadow, var(--mocka-choice-selected-shadow, none));
}

/* CHIPS COM COR (--color): cada opção leva a cor dela num ponto na frente
   (os estados da Vista de Módulos do Bureau, 27/09/2026). A cor vem de
   --chip no <label>; o ponto substitui o ✓ da escolha múltipla — a opção
   ligada já se vê pelo fundo, e a desligada fica apagada:
     <div class="mocka-chips mocka-chips--color">
       <label style="--chip:#6BE07A"><input type="checkbox" checked><span>em uso <b>36</b></span></label>
     </div> */
.mocka-chips--color > label > span::before,
.mocka-chips--color > label:has(> input[type="checkbox"]:checked) > span::before {
  content: "";
  display: inline-block;
  width: var(--mocka-choice-chip-dot, 9px);
  height: var(--mocka-choice-chip-dot, 9px);
  margin-right: 6px;
  border-radius: 50%;
  background: var(--chip, var(--mocka-accent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mocka-text) 25%, transparent);
  vertical-align: 0;
}
.mocka-chips--color > label:has(> input[type="checkbox"]:not(:checked)) { opacity: var(--mocka-choice-chip-off-opacity, 0.5); }

/* AMOSTRAS DE COR: bolinhas da cor de cada opção (--swatch no <label>);
   a escolhida ganha um anel. Mesmo contrato (rádio = uma cor):
     <div class="mocka-swatches" aria-label="Cor">
       <label style="--swatch:#ff4fa3"><input type="radio" name="cor" value="#ff4fa3" aria-label="rosa"><span></span></label>
     </div> */
.mocka-swatches { display: flex; flex-wrap: wrap; gap: var(--mocka-choice-swatch-gap, 8px); }
.mocka-swatches > label {
  position: relative;
  display: inline-flex;
  width: var(--mocka-choice-swatch-size, 36px);
  height: var(--mocka-choice-swatch-size, 36px);
  border-radius: var(--mocka-choice-swatch-radius, 50%);
  background: var(--swatch, var(--mocka-accent));
  border: 3px solid transparent;
  box-sizing: border-box;
  cursor: pointer;
  transition: box-shadow 120ms, border-color 120ms;
}
.mocka-swatches > label > input {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}
.mocka-swatches > label > span { display: none; }
.mocka-swatches > label:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--swatch, var(--mocka-accent)) 45%, transparent); }
.mocka-swatches > label:has(> input:checked) {
  border-color: var(--mocka-choice-swatch-ring, var(--mocka-text));
  box-shadow: 0 0 0 2px var(--swatch, var(--mocka-accent));
}
.mocka-swatches > label:has(> input:focus-visible) { outline: var(--mocka-focus-ring, 2px) solid var(--mocka-accent); outline-offset: 3px; }
.mocka-swatches > label:has(> input:disabled) { opacity: 0.4; cursor: default; }

/* BEVEL (Windows 95): opções salientes; a escolhida afunda. O segmentado vira
   uma fileira de botões (a trilha some, como os toolbars do Win95). */
:root[data-mocka-edge="bevel"] .mocka-segmented { background: transparent; padding: 0; }
:root[data-mocka-edge="bevel"] .mocka-segmented > label { --_bg: var(--mocka-surface); }
:root[data-mocka-edge="bevel"] .mocka-segmented > label,
:root[data-mocka-edge="bevel"] .mocka-chips > label,
:root[data-mocka-edge="bevel"] .mocka-weekdays > label {
  box-shadow: var(--mocka-bevel-raised);
  border-color: transparent;
  border-radius: var(--mocka-radius-small, 0);
}
:root[data-mocka-edge="bevel"] .mocka-segmented > label:has(> input:checked),
:root[data-mocka-edge="bevel"] .mocka-chips > label:has(> input:checked),
:root[data-mocka-edge="bevel"] .mocka-weekdays > label:has(> input:checked) {
  box-shadow: var(--mocka-bevel-sunken);
}
:root[data-mocka-edge="bevel"] .mocka-weekdays > label { border-radius: 50%; }

/*
 * toast.css — avisos passageiros da Mocka (C7, Blueprint §12.2). PROTÓTIPO.
 * Necessidade do meds (22/09/2026): "salvo", "estoque zerado", "desfazer".
 *
 * O app não escreve marcação: chama Mocka.toast("texto", {…}) (toast.js).
 * A pilha (.mocka-toasts) é ÚNICA, no <body>, como popover (camada de topo):
 * fica acima de janelas internas e cards, e opaca mesmo com véu (D31).
 * Mora no canto de baixo à direita, logo acima do rodapé (.mocka-statusbar);
 * em tela estreita (celular, Lite) vira faixa centralizada embaixo.
 *
 * Anatomia: .mocka-toast[data-kind] › .mocka-toast-text · .mocka-toast-action
 * (botão opcional, ex. "Desfazer") · .mocka-toast-close (×) · .mocka-toast-bar
 * (o tempo que falta, opcional).
 *
 * HERANÇA (D24) — components.toast.*:
 *   background ← surface (OPACO)   color ← text   border ← line
 *   radius ← radius-medium          shadow ← shadow-popup
 *   width ← 340px                   gap ← 8px
 *   tons (faixa à esquerda + ícone): ok ← ok, warn ← warn, danger ← danger,
 *   info ← accent (padrão)
 * Effects (D27): como o balão do tooltip — ::before fundo ondulado, ::after
 * contorno com grão. Bevel: saliente.
 */

.mocka-toasts {
  position: fixed;
  inset: auto var(--mocka-space-4, 16px) var(--_toast-bottom, 40px) auto;
  width: var(--mocka-toast-width, 340px);
  max-width: calc(100vw - 2 * var(--mocka-space-4, 16px));
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  display: flex;
  flex-direction: column; /* o mais novo embaixo, perto do rodapé */
  gap: var(--mocka-toast-gap, 8px);
  pointer-events: none;
  z-index: 2147482000;
}
.mocka-toasts:not(:popover-open):not(.is-open) { display: none; }
@media (max-width: 600px) {
  .mocka-toasts {
    inset: auto 0 var(--_toast-bottom, 12px) 0;
    margin: 0 auto;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

.mocka-toast {
  --_bg: var(--mocka-toast-background, var(--mocka-surface));
  --_bd: var(--mocka-toast-border, var(--mocka-line));
  --_tone: var(--mocka-toast-info, var(--mocka-accent));
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: var(--mocka-space-2, 8px);
  min-height: 40px;
  padding: 8px 8px 8px 14px;
  box-sizing: border-box;
  font-size: var(--mocka-base-size, 13px);
  line-height: 1.4;
  color: var(--mocka-toast-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-toast-radius, var(--mocka-radius-medium, 8px));
  box-shadow: var(--mocka-toast-shadow, var(--mocka-shadow-popup, 0 10px 30px -12px rgba(0, 0, 0, 0.45)));
  pointer-events: auto;
  animation: mocka-toast-in 160ms ease-out;
}
.mocka-toast.is-leaving { animation: mocka-toast-out 140ms ease-in forwards; }
@keyframes mocka-toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes mocka-toast-out { to { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .mocka-toast, .mocka-toast.is-leaving { animation: none; } }

/* faixa do tom à esquerda */
.mocka-toast > .mocka-toast-tone {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--_tone);
  border-radius: inherit;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.mocka-toast[data-kind="ok"]     { --_tone: var(--mocka-toast-ok, var(--mocka-ok)); }
.mocka-toast[data-kind="warn"]   { --_tone: var(--mocka-toast-warn, var(--mocka-warn)); }
.mocka-toast[data-kind="danger"] { --_tone: var(--mocka-toast-danger, var(--mocka-danger)); }

.mocka-toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mocka-toast-text b { font-weight: 600; }

.mocka-toast-action {
  appearance: none;
  flex: none;
  height: 26px;
  padding: 0 10px;
  font: inherit;
  font-size: var(--mocka-small-size, 12px);
  font-weight: 600;
  color: var(--_tone);
  background: transparent;
  border: 0;
  border-radius: var(--mocka-radius-small, 4px);
  cursor: pointer;
}
.mocka-toast-action:hover { background: color-mix(in srgb, var(--_tone) 14%, transparent); }
.mocka-toast-close {
  appearance: none;
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  color: var(--mocka-text-faint);
  background: transparent;
  border: 0;
  border-radius: var(--mocka-radius-small, 4px);
  cursor: pointer;
}
.mocka-toast-close:hover { color: var(--mocka-text); background: var(--mocka-surface-2); }
.mocka-toast-action:focus-visible, .mocka-toast-close:focus-visible {
  outline: var(--mocka-focus-ring, 2px) solid var(--mocka-accent);
  outline-offset: 1px;
}

/* o tempo que falta (encolhe até sumir; pausa no hover) */
.mocka-toast-bar {
  position: absolute;
  left: var(--mocka-radius-medium, 8px); right: var(--mocka-radius-medium, 8px); bottom: 0;
  height: 2px;
  background: var(--_tone);
  opacity: 0.55;
  transform-origin: left;
  animation: mocka-toast-bar var(--_life, 4s) linear forwards;
}
.mocka-toast:hover .mocka-toast-bar, .mocka-toast:focus-within .mocka-toast-bar { animation-play-state: paused; }
@keyframes mocka-toast-bar { to { transform: scaleX(0); } }

/* BEVEL (Windows 95): caixa saliente, cantos retos */
:root[data-mocka-edge="bevel"] .mocka-toast {
  box-shadow: var(--mocka-bevel-raised);
  border-color: transparent;
  border-radius: 0;
}

/*
 * progress.css — barra de progresso da Mocka (C7, Blueprint §12.2).
 * PROTÓTIPO. Sobre o <progress> nativo: o app só mexe em value/max.
 *
 *   <progress class="mocka-progress" value="40" max="100"></progress>
 *   <progress class="mocka-progress"></progress>          sem value = indeterminado
 *   <progress class="mocka-progress mocka-progress--sm">  fina (2px… em rodapé, card)
 *   <progress class="mocka-progress" data-kind="ok|warn|danger">
 *
 * HERANÇA (D24) — components.progress.*:
 *   track ← surface-2   fill ← accent   height ← 8px   radius ← 999px
 *   fillImage ← fill (pode ser degradê com var(--_fill), a cor do tom)
 *   fillShadow ← none (brilho)   trackShadow ← none (sulco)
 *   tons: ok ← ok, warn ← warn, danger ← danger
 * Effects (D27): o <progress> inteiro (sem texto) passa pelo filtro de
 * contorno, como o slider e o switch. Bevel: trilho afundado, preenchimento
 * em blocos (o "carregando" do Win95).
 */

.mocka-progress {
  --_track: var(--mocka-progress-track, var(--mocka-surface-2));
  --_fill: var(--mocka-progress-fill, var(--mocka-accent));
  /* tema de traço (giz): o contorno engrossa a borda — a barra cresce junto,
     senão sobra só um fio para o preenchimento */
  --_h: max(var(--mocka-progress-height, 8px), calc(var(--mocka-edge-width, 0px) * 2 + 8px));
  --_r: var(--mocka-progress-radius, 999px);
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  min-width: 80px;
  height: var(--_h);
  margin: 0;
  padding: 0;
  border: var(--mocka-border-width, 1px) solid var(--mocka-progress-border, var(--mocka-line));
  border-radius: var(--_r);
  background: var(--_track);
  box-shadow: var(--mocka-progress-track-shadow, none);
  box-sizing: border-box;
  overflow: hidden;
  filter: var(--mocka-edge-filter, none);
}
.mocka-progress--sm { --_h: max(4px, calc(var(--mocka-edge-width, 0px) * 2 + 4px)); border-width: 0; }
.mocka-progress[data-kind="ok"]     { --_fill: var(--mocka-ok); }
.mocka-progress[data-kind="warn"]   { --_fill: var(--mocka-warn); }
.mocka-progress[data-kind="danger"] { --_fill: var(--mocka-danger); }

.mocka-progress::-webkit-progress-bar { background: transparent; }
.mocka-progress::-webkit-progress-value {
  /* fillImage pode usar var(--_fill) (a cor do tom): degradê na cor do nível */
  background: var(--mocka-progress-fill-image, var(--_fill));
  box-shadow: var(--mocka-progress-fill-shadow, none);
  border-radius: var(--_r);
  transition: width 200ms ease-out;
}
.mocka-progress::-moz-progress-bar { background: var(--_fill); border-radius: var(--_r); }

/* indeterminado: um trecho do preenchimento corre de ponta a ponta */
.mocka-progress:indeterminate {
  background:
    linear-gradient(90deg, transparent, var(--_fill), transparent) 0 0 / 40% 100% no-repeat,
    var(--_track);
  animation: mocka-progress-run 1.2s ease-in-out infinite;
}
.mocka-progress:indeterminate::-webkit-progress-bar { background: transparent; }
@keyframes mocka-progress-run {
  from { background-position: -60% 0, 0 0; }
  to   { background-position: 160% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) { .mocka-progress:indeterminate { animation-duration: 3s; } }

/* BEVEL (Windows 95): poço afundado e blocos */
:root[data-mocka-edge="bevel"] .mocka-progress {
  --_r: 0;
  --_h: var(--mocka-progress-height, 18px);
  box-shadow: var(--mocka-bevel-sunken);
  border-color: transparent;
  padding: 2px;
}
:root[data-mocka-edge="bevel"] .mocka-progress::-webkit-progress-value {
  background: repeating-linear-gradient(90deg, var(--_fill) 0 8px, transparent 8px 10px);
}

/*
 * navbar.css — barra de navegação de baixo da Mocka (C16). PROTÓTIPO.
 * Necessidade do meds (22/09/2026): abas com ícone + rótulo presas embaixo,
 * respeitando a área do gesto do Android (safe-area), aviso na aba (o ponto
 * vermelho do estoque zerado), aba ativa destacada; em tela larga sobe para
 * o topo. NÃO é a .mocka-statusbar (rodapé de status).
 *
 *   <div class="mocka-navshell" id="nav">
 *     <section class="mocka-nav-page" id="pg-hoje">…</section>
 *     <section class="mocka-nav-page" id="pg-estoque" hidden>…</section>
 *     <nav class="mocka-navbar" aria-label="Seções">
 *       <button class="mocka-nav-item" aria-controls="pg-hoje" type="button">
 *         <span class="mocka-nav-icon" data-icon="home"></span>
 *         <span class="mocka-nav-label">Hoje</span>
 *       </button>
 *       …
 *     </nav>
 *   </div>
 *
 * O ícone: data-icon com um nome de Mocka.icons, ou o app põe o próprio SVG/
 * emoji dentro do .mocka-nav-icon. O aviso: Mocka.navbar(...).badge(id, v)
 * (true = ponto, número = contagem) ou data-badge no item.
 *
 * "Largo" é a LARGURA DA CASCA (container query), não da tela: a mesma barra
 * fica embaixo num celular e sobe para o topo numa janela larga — e funciona
 * dentro de um painel estreito do desktop.
 *
 * HERANÇA (D24) — components.navbar.*:
 *   background ← surface     border ← line      color ← text-faint
 *   activeColor ← accent-ink  indicator ← accent-soft (a pílula atrás do ícone)
 *   height ← 60px (embaixo) / 44px (topo)   wideAt ← 720px (fixo no CSS)
 *   badge ← danger            badgeColor ← on-accent
 *   activeIconColor ← a do item   activeGlow ← none (filter)   iconSize ← 20px
 *   badgeGlow ← none   badgeAnimation ← none (ex.: mocka-pulse 1.4s ease-in-out infinite)
 * Effects (D27): a linha que separa a barra do conteúdo passa pelo filtro de
 * contorno; a pílula do ativo, pelo filtro do preenchimento. Bevel: barra
 * saliente, ativo afundado.
 */

.mocka-navshell {
  container: mocka-navshell / inline-size;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.mocka-nav-page {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.mocka-nav-page[hidden] { display: none; }

.mocka-navbar {
  --_bd: var(--mocka-navbar-border, var(--mocka-line));
  position: relative;
  isolation: isolate;
  flex: none;
  display: flex;
  align-items: stretch;
  order: 2;
  min-height: var(--mocka-navbar-height, 60px);
  padding: 0 4px env(safe-area-inset-bottom, 0);
  background: color-mix(in srgb, var(--mocka-navbar-background, var(--mocka-surface)) var(--mocka-surface-alpha, var(--mocka-backdrop-alpha, 100%)), transparent);
  border-top: var(--mocka-border-width, 1px) solid var(--mocka-edge-hide, var(--_bd));
  backdrop-filter: var(--mocka-backdrop-blur, none);
}

.mocka-nav-item {
  appearance: none;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px;
  margin: 0;
  font: inherit;
  font-size: var(--mocka-caption-size, 11px);
  font-weight: 500;
  color: var(--mocka-navbar-color, var(--mocka-text-faint));
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mocka-nav-item:hover { color: var(--mocka-text); }
.mocka-nav-item[aria-current="page"] {
  color: var(--mocka-navbar-active-color, var(--mocka-accent-ink));
  font-weight: 600;
}
/* D35: o ícone da aba ativa com cor e brilho próprios (o ciano do meds) */
.mocka-nav-item[aria-current="page"] .mocka-icon {
  color: var(--mocka-navbar-active-icon-color, currentColor);
  filter: var(--mocka-navbar-active-glow, none);
}
.mocka-nav-item:focus-visible { outline: none; }
.mocka-nav-item:focus-visible .mocka-nav-icon {
  outline: var(--mocka-focus-ring, 2px) solid var(--mocka-accent);
  outline-offset: 2px;
}
.mocka-nav-item:disabled { opacity: 0.45; cursor: default; }

/* ícone dentro de uma pílula; a do ativo fica pintada */
.mocka-nav-icon {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 28px;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
}
.mocka-nav-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--mocka-navbar-indicator, var(--mocka-accent-soft));
  filter: var(--mocka-edge-fill-filter, none);
  transform: scaleX(0.4);
  opacity: 0;
  transition: transform 160ms ease-out, opacity 160ms;
}
.mocka-nav-item[aria-current="page"] .mocka-nav-icon::before { transform: none; opacity: 1; }
.mocka-nav-icon > .mocka-icon { --mocka-icon-size: var(--mocka-navbar-icon-size, 20px); }
.mocka-nav-icon svg {
  width: var(--mocka-navbar-icon-size, 20px);
  height: var(--mocka-navbar-icon-size, 20px);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mocka-nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* aviso: ponto (data-badge="") ou contagem (data-badge="3") no canto do ícone */
.mocka-nav-item[data-badge] .mocka-nav-icon::after {
  content: attr(data-badge);
  position: absolute;
  top: -2px;
  left: calc(50% + 6px);
  min-width: 8px;
  height: 8px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--mocka-navbar-badge, var(--mocka-danger));
  box-shadow: 0 0 0 2px var(--mocka-navbar-background, var(--mocka-surface)), var(--mocka-navbar-badge-glow, 0 0 0 transparent);
  animation: var(--mocka-navbar-badge-animation, none);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: var(--mocka-navbar-badge-color, var(--mocka-on-accent));
}
.mocka-nav-item:not([data-badge=""])[data-badge] .mocka-nav-icon::after {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  top: -5px;
}
@media (prefers-reduced-motion: reduce) { .mocka-nav-icon::before { transition: none; } .mocka-nav-item .mocka-nav-icon::after { animation: none; } }
/* pulso genérico: o tema usa em badgeAnimation ("mocka-pulse 1.4s ease-in-out infinite") */
@keyframes mocka-pulse { 50% { opacity: 0.35; } }

/* LARGO: a barra sobe para o topo; item em linha (ícone + rótulo) e a
   pílula do ativo passa do ícone para o item inteiro */
@container mocka-navshell (min-width: 720px) {
  .mocka-navbar {
    order: -1;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    min-height: var(--mocka-navbar-top-height, 44px);
    padding: 0 8px;
    border-top: 0;
    border-bottom: var(--mocka-border-width, 1px) solid var(--mocka-edge-hide, var(--_bd));
  }
  .mocka-nav-item {
    isolation: isolate;
    flex: none;
    flex-direction: row;
    gap: 6px;
    height: 32px;
    padding: 0 14px 0 10px;
    border-radius: 999px;
    font-size: var(--mocka-base-size, 13px);
  }
  .mocka-nav-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--mocka-navbar-indicator, var(--mocka-accent-soft));
    filter: var(--mocka-edge-fill-filter, none);
    opacity: 0;
    transition: opacity 160ms;
  }
  .mocka-nav-item[aria-current="page"]::before { opacity: 1; }
  .mocka-nav-icon { width: 22px; height: 22px; }
  .mocka-nav-icon::before { display: none; }
  .mocka-nav-item:focus-visible { outline: var(--mocka-focus-ring, 2px) solid var(--mocka-accent); outline-offset: 1px; }
  .mocka-nav-item:focus-visible .mocka-nav-icon { outline: none; }
}

/* BEVEL (Windows 95): barra saliente; o ativo afunda */
:root[data-mocka-edge="bevel"] .mocka-navbar {
  box-shadow: var(--mocka-bevel-raised);
  border-color: transparent;
}
:root[data-mocka-edge="bevel"] .mocka-nav-icon { border-radius: 0; }
:root[data-mocka-edge="bevel"] .mocka-nav-item[aria-current="page"] .mocka-nav-icon { box-shadow: var(--mocka-bevel-sunken); }
@container mocka-navshell (min-width: 720px) {
  :root[data-mocka-edge="bevel"] .mocka-nav-item { border-radius: 0; }
  :root[data-mocka-edge="bevel"] .mocka-nav-item[aria-current="page"] { box-shadow: var(--mocka-bevel-sunken); }
  :root[data-mocka-edge="bevel"] .mocka-nav-item[aria-current="page"] .mocka-nav-icon { box-shadow: none; }
}

/*
 * sheet.css — folha de baixo da Mocka (bottom sheet, C17). PROTÓTIPO.
 * Necessidade do meds (22/09/2026): painel que sobe de baixo com alça, fundo
 * escurecido, Esc/toque fora fecha, e o "voltar" do celular fecha a folha em
 * vez de trocar de tela. Parente do C4 (dialogs): a confirmação por folha
 * (Mocka.sheet.confirm) mora aqui.
 *
 * O app não escreve marcação: Mocka.sheet.open({…}) (sheet.js) cria um
 * <dialog> modal — camada de topo, foco preso dentro, fundo inerte.
 *
 * Anatomia: dialog.mocka-sheet › .mocka-sheet-handle (alça; arrasta para
 * baixo e fecha) · .mocka-sheet-head (.mocka-sheet-title + ×) ·
 * .mocka-sheet-body (conteúdo do app, rola) · .mocka-sheet-actions (botões).
 * Em tela larga fica centralizada embaixo, com largura máxima.
 *
 * HERANÇA (D24) — components.sheet.*:
 *   background ← surface (OPACO)   color ← text      border ← line
 *   radius ← radius-large (só em cima)   maxWidth ← 560px   maxHeight ← 88vh
 *   handle ← line                   scrim ← rgba(0,0,0,.45) (o fundo escurecido)
 *   titleSize ← title-size   titleWeight ← 600   titleTransform/Tracking ← os do heading
 *   shadow ← sombra para cima
 * Effects (D27): como o card — ::before fundo ondulado, ::after contorno com
 * grão. Bevel: saliente, cantos retos.
 */

.mocka-sheet {
  --_bg: var(--mocka-sheet-background, var(--mocka-surface));
  --_bd: var(--mocka-sheet-border, var(--mocka-line));
  --_r: var(--mocka-sheet-radius, var(--mocka-radius-large, 12px));
  position: fixed;
  inset: auto 0 0 0;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--mocka-sheet-max-width, 560px);
  max-height: var(--mocka-sheet-max-height, 88vh);
  margin: 0 auto;
  padding: 0 0 env(safe-area-inset-bottom, 0);
  display: flex;
  flex-direction: column;
  overflow: visible;
  color: var(--mocka-sheet-color, var(--mocka-text));
  font: inherit;
  font-size: var(--mocka-base-size, 13px);
  background: var(--mocka-edge-hide, var(--_bg));
  border: var(--mocka-border-width, 1px) solid var(--mocka-edge-hide, var(--_bd));
  border-bottom: 0;
  border-radius: var(--_r) var(--_r) 0 0;
  box-shadow: var(--mocka-sheet-shadow, 0 -12px 40px -16px rgba(0, 0, 0, 0.5));
  transform: translateY(var(--_drag, 0px));
  animation: mocka-sheet-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mocka-sheet:not([open]) { display: none; }
.mocka-sheet.is-dragging { animation: none; transition: none; }
.mocka-sheet.is-leaving { animation: mocka-sheet-out 160ms ease-in forwards; }
.mocka-sheet::backdrop {
  background: var(--mocka-sheet-scrim, rgba(0, 0, 0, 0.45));
  animation: mocka-sheet-fade 200ms ease-out;
}
.mocka-sheet.is-leaving::backdrop { animation: mocka-sheet-fade 160ms ease-in reverse forwards; }
@keyframes mocka-sheet-in { from { transform: translateY(100%); } }
@keyframes mocka-sheet-out { to { transform: translateY(100%); } }
@keyframes mocka-sheet-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .mocka-sheet, .mocka-sheet.is-leaving, .mocka-sheet::backdrop, .mocka-sheet.is-leaving::backdrop { animation-duration: 1ms; }
}

/* alça: a área toda é "pegável" (maior que o risquinho) */
.mocka-sheet-handle {
  flex: none;
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
  cursor: grab;
  touch-action: none;
}
.mocka-sheet-handle::before {
  content: "";
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--mocka-sheet-handle, var(--mocka-line));
}
.mocka-sheet.is-dragging .mocka-sheet-handle { cursor: grabbing; }

.mocka-sheet-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--mocka-space-2, 8px);
  padding: 2px 12px 8px 20px;
}
.mocka-sheet-title {
  flex: 1;
  margin: 0;
  font-family: var(--mocka-title-font, inherit);
  font-size: var(--mocka-sheet-title-size, var(--mocka-title-size, 16px));
  font-weight: var(--mocka-sheet-title-weight, 600);
  /* caixa-alta e espaçamento: os do título de página (heading), se o tema os tiver */
  text-transform: var(--mocka-sheet-title-transform, var(--mocka-heading-transform, none));
  letter-spacing: var(--mocka-sheet-title-tracking, var(--mocka-heading-tracking, normal));
  color: var(--mocka-text);
}
.mocka-sheet-close {
  appearance: none;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  color: var(--mocka-text-faint);
  background: transparent;
  border: 0;
  border-radius: var(--mocka-radius-small, 4px);
  cursor: pointer;
}
.mocka-sheet-close:hover { color: var(--mocka-text); background: var(--mocka-surface-2); }
.mocka-sheet-close:focus-visible { outline: var(--mocka-focus-ring, 2px) solid var(--mocka-accent); outline-offset: 1px; }

.mocka-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0 20px 16px;
  color: var(--mocka-text-soft);
  line-height: 1.5;
}
.mocka-sheet-body > :first-child { margin-top: 0; }
.mocka-sheet-body > :last-child { margin-bottom: 0; }

.mocka-sheet-actions {
  flex: none;
  display: flex;
  justify-content: flex-end;
  gap: var(--mocka-space-2, 8px);
  padding: 12px 20px 16px;
  border-top: 1px solid var(--mocka-edge-hide, var(--mocka-line));
}
/* estreito (celular): botões ocupam a largura, o principal por último (polegar) */
@media (max-width: 600px) {
  .mocka-sheet-actions > .mocka-button { flex: 1; }
}

/* BEVEL (Windows 95): caixa saliente de canto reto */
:root[data-mocka-edge="bevel"] .mocka-sheet {
  --_r: 0;
  box-shadow: var(--mocka-bevel-raised);
  border-color: transparent;
}

/*
 * login.css — tela de login da Mocka (C19). PROTÓTIPO.
 * Necessidade do meds (22/09/2026): card central com marca, campos e erro,
 * no tema. Reaproveita o .mocka-card (effects/bevel de graça), o .mocka-input
 * e o botão primário; aqui só o arranjo, o erro e o "entrando…".
 *
 *   <div class="mocka-login" id="login">
 *     <form class="mocka-card mocka-login-card">
 *       <div class="mocka-login-brand">
 *         <span class="mocka-login-logo">…logo do app…</span>
 *         <h1 class="mocka-login-title">Meds</h1>
 *         <p class="mocka-login-subtitle">Entre para ver seus remédios</p>
 *       </div>
 *       <div class="mocka-login-field">
 *         <span class="mocka-login-label">E-mail</span>
 *         <label class="mocka-input"><input name="email" type="email" autocomplete="username" required></label>
 *       </div>
 *       <div class="mocka-login-field">
 *         <span class="mocka-login-label">Senha</span>
 *         <label class="mocka-input"><input name="senha" type="password" autocomplete="current-password" required></label>
 *       </div>
 *       <p class="mocka-login-error" role="alert" hidden></p>
 *       <button class="mocka-button mocka-button--primary mocka-login-submit" type="submit">Entrar</button>
 *       <div class="mocka-login-foot">…links do app…</div>
 *     </form>
 *   </div>
 *
 * Mocka.login (login.js) põe o olho de mostrar a senha, o aviso de Caps
 * Lock, o "entrando…" e o erro. O .mocka-login ocupa a área que o app der
 * (a casca inteira, um painel) e centraliza o card; fundo = o do tema.
 *
 * HERANÇA (D24) — components.login.*:
 *   width ← 360px    gap ← 14px    titleSize ← 22px
 *   errorBackground ← danger a 12% sobre surface   errorColor ← danger
 *   (o card, os campos e o botão herdam os seus próprios components.*)
 */

.mocka-login {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 100%;
  padding: var(--mocka-space-4, 16px);
  padding-bottom: max(var(--mocka-space-4, 16px), env(safe-area-inset-bottom, 0px));
}
.mocka-login-card {
  width: 100%;
  max-width: var(--mocka-login-width, 360px);
  gap: var(--mocka-login-gap, 14px);
  padding: 28px 24px 22px;
  box-shadow: var(--mocka-shadow-card, var(--mocka-shadow-popup, 0 18px 50px -24px rgba(0, 0, 0, 0.45)));
}
.mocka-login-card.is-shaking { animation: mocka-login-shake 320ms ease-in-out; }
@keyframes mocka-login-shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) { .mocka-login-card.is-shaking { animation: none; } }

.mocka-login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  text-align: center;
}
.mocka-login-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 30px;
  color: var(--mocka-text);
}
.mocka-login-logo svg { width: 44px; height: 44px; }
.mocka-login-title {
  margin: 0;
  font-family: var(--mocka-title-font, inherit);
  font-size: var(--mocka-login-title-size, 22px);
  font-weight: 700;
  text-transform: var(--mocka-login-title-transform, var(--mocka-heading-transform, none));
  letter-spacing: var(--mocka-login-title-tracking, var(--mocka-heading-tracking, normal));
  color: var(--mocka-text);
}
.mocka-login-subtitle { margin: 0; color: var(--mocka-text-faint); font-size: var(--mocka-small-size, 12px); }

.mocka-login-field { display: flex; flex-direction: column; gap: 5px; }
.mocka-login-label {
  font-size: var(--mocka-small-size, 12px);
  font-weight: 600;
  color: var(--mocka-text-soft);
}
.mocka-login-field > .mocka-input { width: 100%; box-sizing: border-box; }
.mocka-login-field > .mocka-input > input { flex: 1; min-width: 0; }
.mocka-login-hint {
  font-size: var(--mocka-caption-size, 11px);
  color: var(--mocka-warn-ink, color-mix(in srgb, var(--mocka-warn) 70%, var(--mocka-text)));
}
.mocka-login-hint[hidden] { display: none; }

.mocka-login-error {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--mocka-radius-medium, 8px);
  font-size: var(--mocka-small-size, 12px);
  line-height: 1.45;
  color: var(--mocka-login-error-color, var(--mocka-danger));
  background: var(--mocka-login-error-background, color-mix(in srgb, var(--mocka-danger) 12%, var(--mocka-surface)));
}
.mocka-login-error[hidden] { display: none; }

.mocka-login-submit { width: 100%; margin-top: 4px; }
/* entrando…: o texto some e um giro aparece no lugar, o botão mantém a largura */
.mocka-login-submit[aria-busy="true"] { color: transparent !important; pointer-events: none; }
.mocka-login-submit[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  z-index: 1;
  border: 2px solid var(--mocka-button-primary-color, var(--mocka-on-accent));
  border-right-color: transparent;
  border-radius: 50%;
  filter: none;
  animation: mocka-login-spin 700ms linear infinite;
}
@keyframes mocka-login-spin { to { transform: rotate(360deg); } }

.mocka-login-foot {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: var(--mocka-small-size, 12px);
  color: var(--mocka-text-faint);
}
.mocka-login-foot a { color: var(--mocka-accent-ink); text-decoration: none; }
.mocka-login-foot a:hover { text-decoration: underline; }

/* olho de mostrar a senha (qualquer .mocka-input com senha; login.js põe) */
.mocka-input-reveal {
  appearance: none;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: -6px;
  padding: 0;
  color: var(--mocka-text-faint);
  background: transparent;
  border: 0;
  border-radius: var(--mocka-radius-small, 4px);
  cursor: pointer;
}
.mocka-input-reveal:hover { color: var(--mocka-text); }
.mocka-input-reveal[aria-pressed="true"] { color: var(--mocka-accent-ink); }
.mocka-input-reveal:focus-visible { outline: var(--mocka-focus-ring, 2px) solid var(--mocka-accent); outline-offset: 0; }
.mocka-input-reveal svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/*
 * dialog.css — diálogos da Mocka (C4): mensagem, confirmação, pergunta.
 * PROTÓTIPO. A casca é a do menu (.mocka-menu, no host de popups — D31); aqui
 * só o miolo. Na Lite (sem host), .mocka-dialog-page é o <dialog> da página.
 *
 * Anatomia: .mocka-dialog › .mocka-dialog-head (.mocka-dialog-glyph[data-tone]
 * + .mocka-dialog-title) · .mocka-dialog-message · .mocka-dialog-input
 * (.mocka-input, só no prompt) · .mocka-dialog-error · .mocka-dialog-actions.
 *
 * HERANÇA (D24) — components.dialog.*:
 *   width ← 380px   padding ← 18px 20px 16px   titleSize ← 15px
 *   glyph (círculo do ícone): info ← accent, ok ← ok, warn ← warn,
 *   danger ← danger, question ← accent
 *   (fundo, borda, sombra e effects: os do menu)
 */

.mocka-dialog {
  box-sizing: border-box;
  width: var(--mocka-dialog-width, 380px);
  min-width: 0;
  padding: var(--mocka-dialog-padding, 18px 20px 16px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  outline: none;
}
/* no popup o menu se ajusta ao conteúdo (width: max-content, menu.css); o
   diálogo tem largura própria — o texto quebra dentro dela */
.mocka-popup-body .mocka-menu.mocka-dialog { width: var(--mocka-dialog-width, 380px); }
.mocka-dialog-head { display: flex; align-items: center; gap: 10px; }
.mocka-dialog-glyph {
  --_tone: var(--mocka-accent);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  color: var(--_tone);
  background: color-mix(in srgb, var(--_tone) 16%, var(--mocka-surface));
}
.mocka-dialog-glyph svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mocka-dialog-glyph[data-tone="ok"]     { --_tone: var(--mocka-dialog-ok, var(--mocka-ok)); }
.mocka-dialog-glyph[data-tone="warn"]   { --_tone: var(--mocka-dialog-warn, var(--mocka-warn)); }
.mocka-dialog-glyph[data-tone="danger"] { --_tone: var(--mocka-dialog-danger, var(--mocka-danger)); }
.mocka-dialog-title {
  margin: 0;
  font-family: var(--mocka-title-font, inherit);
  font-size: var(--mocka-dialog-title-size, 15px);
  font-weight: 600;
  color: var(--mocka-text);
}
.mocka-dialog-message {
  margin: 0;
  font-size: var(--mocka-base-size, 13px);
  line-height: 1.5;
  color: var(--mocka-text-soft);
  white-space: pre-line;
}
.mocka-dialog-input { width: 100%; box-sizing: border-box; }
.mocka-dialog-input > input { flex: 1; min-width: 0; }
.mocka-dialog-error { margin: -4px 0 0; font-size: var(--mocka-small-size, 12px); color: var(--mocka-danger); }
.mocka-dialog-error[hidden] { display: none; }
.mocka-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--mocka-space-2, 8px);
  margin-top: 6px;
}

/* Lite: o <dialog> da página só segura o miolo (a casca é o .mocka-menu) */
.mocka-dialog-page {
  padding: 0;
  margin: auto;
  border: 0;
  background: transparent;
  overflow: visible;
}
.mocka-dialog-page::backdrop { background: var(--mocka-dialog-scrim, rgba(0, 0, 0, 0.35)); }
/* na página a tela manda: celular estreito não corta o diálogo (no popup não —
   lá a viewport é a janela, que ainda tem o tamanho do popup anterior) */
.mocka-dialog-page > .mocka-dialog { position: relative; box-sizing: border-box; max-width: calc(100vw - 32px); }
/* o <dialog> mede pelo miolo: sem isto, 380 px + padding passavam da borda do
   celular (achado no Bureau, 27/09/2026) */
.mocka-dialog-page { max-width: calc(100vw - 32px); }

/*
 * menubar.css — barra de menu da Mocka (C9). PROTÓTIPO.
 * Os menus que abrem são o .mocka-menu do host de popups (menu.css); aqui só
 * a barra e os botões de cima.
 *
 *   <nav class="mocka-menubar" id="menubar" aria-label="Menu"></nav>
 *   (os botões .mocka-menubar-item são criados por Mocka.menubar)
 *
 * Estados do botão: hover, aberto (.is-open / aria-expanded), focus-visible,
 * disabled. A letra de acesso (<u>) só aparece sublinhada depois do Alt
 * (.is-alt na barra), como no Windows.
 *
 * HERANÇA (D24) — components.menubar.*:
 *   background ← transparent    color ← text-soft     height ← 30px
 *   hoverBackground ← surface-2  openBackground ← accent-soft  openColor ← accent-ink
 *   radius ← radius-small
 * Effects (D27): o botão aberto/hover tem texto — a dupla do botão
 * (::before fundo ondulado, ::after contorno com grão). Bevel: aberto afunda.
 */

.mocka-menubar {
  display: flex;
  align-items: center;
  gap: 1px;
  min-height: var(--mocka-menubar-height, 30px);
  padding: 0 4px;
  background: var(--mocka-menubar-background, transparent);
  user-select: none;
}
.mocka-menubar-item {
  --_bg: transparent;
  --_bd: transparent;
  appearance: none;
  position: relative;
  isolation: isolate;
  height: calc(var(--mocka-menubar-height, 30px) - 6px);
  padding: 0 10px;
  margin: 0;
  font: inherit;
  font-size: var(--mocka-base-size, 13px);
  color: var(--mocka-menubar-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-menubar-radius, var(--mocka-radius-small, 4px));
  cursor: default;
  white-space: nowrap;
}
.mocka-menubar-item:hover { --_bg: var(--mocka-menubar-hover-background, var(--mocka-surface-2)); color: var(--mocka-text); }
.mocka-menubar-item.is-open,
.mocka-menubar-item[aria-expanded="true"] {
  --_bg: var(--mocka-menubar-open-background, var(--mocka-accent-soft));
  --_bd: var(--mocka-menubar-open-border, transparent);
  color: var(--mocka-menubar-open-color, var(--mocka-accent-ink));
}
.mocka-menubar-item:focus-visible { outline: var(--mocka-focus-ring, 2px) solid var(--mocka-accent); outline-offset: -2px; }
.mocka-menubar-item:disabled { opacity: 0.45; }
/* letra de acesso: sublinhada só depois do Alt */
.mocka-menubar-key { text-decoration: none; }
.mocka-menubar.is-alt .mocka-menubar-key { text-decoration: underline; text-underline-offset: 2px; }

/* BEVEL (Windows 95): aberto = afundado */
:root[data-mocka-edge="bevel"] .mocka-menubar-item { border-radius: 0; }
:root[data-mocka-edge="bevel"] .mocka-menubar-item.is-open { --_bg: transparent; box-shadow: var(--mocka-bevel-sunken); color: var(--mocka-text); }

/*
 * tree.css — árvore (Mocka.tree) e lista (Mocka.list) da Mocka (C10).
 * PROTÓTIPO. As duas pintam a linha como a tabela (.mocka-table): hover no
 * panel, selecionada em accent-soft/accent-ink — mesma família visual.
 *
 * Árvore: ul.mocka-tree[role=tree] › li.mocka-tree-item[role=treeitem]
 *   › .mocka-tree-row (.mocka-tree-twisty · .mocka-tree-icon · .mocka-tree-label
 *   · .mocka-tree-badge) + ul.mocka-tree-group[role=group] (filhos).
 * Lista: ul.mocka-list[role=listbox] › li.mocka-list-item[role=option]
 *   (.mocka-list-icon · .mocka-list-text (.mocka-list-label + .mocka-list-sub)
 *   · .mocka-list-badge).
 *
 * HERANÇA (D24) — components.tree.* e components.list.*:
 *   rowHeight ← 28px (lista: 34px; com subtítulo cresce)   indent ← 16px
 *   rowHover ← panel   rowSelected ← accent-soft   selectedColor ← accent-ink
 *   twisty ← text-faint   icon ← text-faint   badge ← surface-2 / text-faint
 * Largura: o conteúdo não alarga o contêiner (contain: inline-size) — ver
 * data-overflow abaixo.
 * Effects (D27): a linha não tem contorno próprio (como a tabela); o foco é
 * um anel interno. Bevel: selecionada cheia no acento (o azul-marinho do
 * Win95); `highlight` não serve — em temas bevel ele é o amarelo das pastilhas.
 */

.mocka-tree, .mocka-tree-group, .mocka-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mocka-tree, .mocka-list {
  font-size: var(--mocka-base-size, 13px);
  color: var(--mocka-text-soft);
  user-select: none;
  outline: none;
  /* o conteúdo NUNCA alarga o contêiner (usuário, 27/09): a largura própria
     conta como 0 para o pai; quem decide a largura é o layout da tela */
  contain: inline-size;
  min-width: 0;
}
/* data-overflow (Mocka.tree/list {overflow}):
   "cortar" (padrão) — nome longo termina em "…" (nome inteiro no title);
   "rolar"  — nome inteiro, a linha passa da largura e o .mocka-scroll pai
              ganha rolagem lateral (sem alargar);
   "crescer" — o conteúdo alarga o contêiner (opt-in explícito) */
.mocka-tree[data-overflow="rolar"] .mocka-tree-row,
.mocka-list[data-overflow="rolar"] .mocka-list-item { min-width: max-content; }
.mocka-tree[data-overflow="rolar"] .mocka-tree-label,
.mocka-list[data-overflow="rolar"] .mocka-list-label,
.mocka-list[data-overflow="rolar"] .mocka-list-sub,
.mocka-tree[data-overflow="crescer"] .mocka-tree-label,
.mocka-list[data-overflow="crescer"] .mocka-list-label,
.mocka-list[data-overflow="crescer"] .mocka-list-sub { overflow: visible; text-overflow: clip; flex: 1 0 auto; } /* inteiro, e o contador segue à direita */
.mocka-tree[data-overflow="crescer"], .mocka-list[data-overflow="crescer"] { contain: none; }
.mocka-tree-group[hidden] { display: none; }
.mocka-tree-item { outline: none; }

/* linha (árvore) e item (lista) */
.mocka-tree-row, .mocka-list-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--mocka-tree-row-height, 28px);
  padding: 0 10px 0 calc(6px + var(--_level, 0) * var(--mocka-tree-indent, 16px));
  border-radius: var(--mocka-radius-small, 4px);
  cursor: default;
}
.mocka-list-item {
  min-height: var(--mocka-list-row-height, 34px);
  padding: 4px 10px;
  outline: none;
}
.mocka-tree-row:hover, .mocka-list-item:hover { background: var(--mocka-tree-row-hover, var(--mocka-panel)); color: var(--mocka-text); }
.mocka-tree-item[aria-selected="true"] > .mocka-tree-row,
.mocka-list-item[aria-selected="true"] {
  background: var(--mocka-tree-row-selected, var(--mocka-accent-soft));
  color: var(--mocka-tree-selected-color, var(--mocka-accent-ink));
}
/* foco de teclado: anel interno (não briga com o fundo da seleção) */
.mocka-tree-item:focus-visible > .mocka-tree-row,
.mocka-list-item:focus-visible {
  box-shadow: inset 0 0 0 var(--mocka-focus-ring, 2px) var(--mocka-accent);
}

/* setinha de abrir: um "›" desenhado que gira ao abrir */
.mocka-tree-twisty {
  flex: none;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mocka-tree-twisty, var(--mocka-text-faint));
}
.mocka-tree-item[aria-expanded] > .mocka-tree-row > .mocka-tree-twisty::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 120ms;
}
.mocka-tree-item[aria-expanded="true"] > .mocka-tree-row > .mocka-tree-twisty::before { transform: rotate(45deg); }
.mocka-tree-twisty:hover { color: var(--mocka-text); }
@media (prefers-reduced-motion: reduce) { .mocka-tree-twisty::before { transition: none; } }

.mocka-tree-icon, .mocka-list-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 14px;
  line-height: 1;
  color: var(--mocka-tree-icon, var(--mocka-text-faint));
}
.mocka-tree-item[aria-selected="true"] > .mocka-tree-row .mocka-tree-icon,
:root[data-mocka-edge="bevel"] .mocka-tree-item[aria-selected="true"] > .mocka-tree-row .mocka-tree-badge,
.mocka-list-item[aria-selected="true"] .mocka-list-icon { color: inherit; }
.mocka-tree-icon svg, .mocka-list-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.mocka-tree-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mocka-list-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mocka-list-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mocka-list-sub { font-size: var(--mocka-caption-size, 11px); color: var(--mocka-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mocka-list-item[aria-selected="true"] .mocka-list-sub { color: inherit; opacity: 0.8; }

.mocka-tree-badge, .mocka-list-badge {
  flex: none;
  min-width: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: var(--mocka-caption-size, 11px);
  line-height: 18px;
  text-align: center;
  color: var(--mocka-tree-badge-color, var(--mocka-text-faint));
  background: var(--mocka-tree-badge, var(--mocka-surface-2));
}

.mocka-tree-loading {
  padding: 4px 10px 4px calc(28px + var(--_level, 0) * var(--mocka-tree-indent, 16px));
  font-size: var(--mocka-caption-size, 11px);
  font-style: italic;
  color: var(--mocka-text-faint);
}
.mocka-tree-loading.is-error { color: var(--mocka-danger); font-style: normal; }
.mocka-tree-item.is-empty > .mocka-tree-row > .mocka-tree-twisty::before { content: none; }

/* BEVEL (Windows 95): seleção no azul clássico, sem cantos */
:root[data-mocka-edge="bevel"] .mocka-tree-row,
:root[data-mocka-edge="bevel"] .mocka-list-item { border-radius: 0; }
:root[data-mocka-edge="bevel"] .mocka-tree-item[aria-selected="true"] > .mocka-tree-row,
:root[data-mocka-edge="bevel"] .mocka-list-item[aria-selected="true"] {
  background: var(--mocka-tree-bevel-selected, var(--mocka-accent));
  color: var(--mocka-tree-bevel-selected-color, var(--mocka-on-accent));
}

/*
 * dock.css — área de trabalho com painéis dockáveis (C15). PROTÓTIPO.
 * Pedido do usuário (27/09/2026): "dockável e com possibilidade de salvar
 * presets". Ver dock.js (Mocka.workspace).
 *
 * Anatomia (a Mocka monta; o app só dá os painéis):
 *   .mocka-dock (grade)
 *     .mocka-dock-zone[data-zone=left]   ┐ cada zona: .mocka-panel com
 *     .mocka-dock-split[data-edge=left]   │  .mocka-dock-tabs (abas) e
 *     .mocka-dock-mid                     │  .mocka-scroll.mocka-dock-body
 *       .mocka-dock-zone[data-zone=center]│  (o painel ativo) — giz e relevo
 *       .mocka-dock-split[data-edge=bottom]  do tema vêm do .mocka-panel
 *       .mocka-dock-zone[data-zone=bottom]┘
 *     .mocka-dock-split[data-edge=right]
 *     .mocka-dock-zone[data-zone=right]
 *     .mocka-dock-floats  › .mocka-card.mocka-dock-float (painel solto)
 *     .mocka-dock-guides  › .mocka-dock-guide[data-zone] (só ao arrastar)
 *
 * HERANÇA (D24) — components.dock.*:
 *   gap ← 6px (largura das divisórias)   tabHeight ← 28px
 *   tabColor ← text-faint   tabActiveColor ← text   tabActiveBackground ← surface
 *   guide ← accent (guias de encaixe)   preview ← accent-soft (onde vai cair)
 *   floatShadow ← shadow-popup
 */

.mocka-dock {
  --_gap: var(--mocka-dock-gap, 6px);
  position: relative;
  display: grid;
  grid-template-columns: var(--_l, 240px) var(--_gl, var(--_gap)) minmax(0, 1fr) var(--_gr, var(--_gap)) var(--_r, 240px);
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.mocka-dock-mid {
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--_gb, var(--_gap)) var(--_b, 180px);
  min-height: 0;
  min-width: 0;
}
.mocka-dock-zone { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
/* lugar FIXO de cada peça na grade: zona vazia some sem escorregar as outras */
.mocka-dock > [data-zone="left"]   { grid-column: 1; grid-row: 1; }
.mocka-dock > [data-edge="left"]   { grid-column: 2; grid-row: 1; }
.mocka-dock > .mocka-dock-mid      { grid-column: 3; grid-row: 1; }
.mocka-dock > [data-edge="right"]  { grid-column: 4; grid-row: 1; }
.mocka-dock > [data-zone="right"]  { grid-column: 5; grid-row: 1; }
.mocka-dock-mid > [data-zone="center"] { grid-row: 1; }
.mocka-dock-mid > [data-edge="bottom"] { grid-row: 2; }
.mocka-dock-mid > [data-zone="bottom"] { grid-row: 3; }
.mocka-dock-zone[data-empty="true"] { display: none; }
.mocka-dock-zone[data-zone="center"][data-empty="true"] {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mocka-text-faint);
  font-size: var(--mocka-small-size, 12px);
  border: 1px dashed var(--mocka-line);
  border-radius: var(--mocka-radius-large, 9px);
}
.mocka-dock-zone[data-zone="center"][data-empty="true"]::before { content: attr(data-empty-text); }

/* abas da zona */
.mocka-dock-tabs {
  flex: none;
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-height: var(--mocka-dock-tab-height, 28px);
  padding: 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.mocka-dock-tab {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 4px 0 10px;
  margin: 3px 0 0;
  font: inherit;
  font-size: var(--mocka-small-size, 12px);
  color: var(--mocka-dock-tab-color, var(--mocka-text-faint));
  background: transparent;
  border: 0;
  border-radius: var(--mocka-radius-small, 4px) var(--mocka-radius-small, 4px) 0 0;
  white-space: nowrap;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.mocka-dock-tab:hover { color: var(--mocka-text); background: var(--mocka-surface-2); }
.mocka-dock-tab[aria-selected="true"] {
  color: var(--mocka-dock-tab-active-color, var(--mocka-text));
  background: var(--mocka-dock-tab-active-background, var(--mocka-surface));
  font-weight: 600;
}
.mocka-dock-tab:focus-visible { outline: var(--mocka-focus-ring, 2px) solid var(--mocka-accent); outline-offset: -2px; }
.mocka-dock-tab .mocka-icon { --mocka-icon-size: 14px; }
.mocka-dock-tab-btn {
  appearance: none;   /* no painel solto eles são <button>: sem a caixa do navegador */
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  color: var(--mocka-text-faint);
  cursor: pointer;
  opacity: 0;
}
.mocka-dock-tab:hover .mocka-dock-tab-btn,
.mocka-dock-tab[aria-selected="true"] .mocka-dock-tab-btn,
.mocka-dock-tab:focus-visible .mocka-dock-tab-btn { opacity: 1; }
.mocka-dock-tab-btn:hover { color: var(--mocka-text); background: var(--mocka-surface-2); }
.mocka-dock-tab-btn .mocka-icon { --mocka-icon-size: 12px; }

.mocka-dock-body { flex: 1 1 auto; min-height: 0; }
.mocka-dock-pane { height: 100%; box-sizing: border-box; }
.mocka-dock-pane[hidden] { display: none; }

/* divisórias entre zonas (arrasto + setas) */
.mocka-dock-split {
  position: relative;
  min-width: 0;
  min-height: 0;
  touch-action: none;
}
.mocka-dock-split[data-edge="left"], .mocka-dock-split[data-edge="right"] { cursor: col-resize; }
.mocka-dock-split[data-edge="bottom"] { cursor: row-resize; }
.mocka-dock-split::after {
  content: "";
  position: absolute;
  inset: 25% 45%;
  border-radius: 2px;
  background: var(--mocka-line);
  opacity: 0;
  transition: opacity 120ms;
}
.mocka-dock-split[data-edge="bottom"]::after { inset: 45% 40%; }
.mocka-dock-split:hover::after, .mocka-dock-split:focus-visible::after, .mocka-dock-split.is-dragging::after { opacity: 1; background: var(--mocka-accent); }
.mocka-dock-split:focus-visible { outline: none; }
.mocka-dock-split[hidden] { display: block; visibility: hidden; pointer-events: none; }

/* painéis soltos (flutuantes), confinados à área */
.mocka-dock-floats { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.mocka-dock-float {
  /* por cima de conteúdo: OPACO mesmo em tema de acrílico (como os popups, D31) */
  --mocka-card-alpha: 100%;
  position: absolute;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
  min-width: 160px;
  min-height: 100px;
  box-shadow: var(--mocka-dock-float-shadow, var(--mocka-shadow-popup, 0 14px 40px -16px rgba(0, 0, 0, 0.5)));
}
.mocka-dock-float-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 4px 0 10px;
  font-size: var(--mocka-small-size, 12px);
  font-weight: 600;
  color: var(--mocka-text);
  cursor: grab;
  touch-action: none;
  user-select: none;
  border-bottom: 1px solid var(--mocka-edge-hide, var(--mocka-line));
}
.mocka-dock-float-head > .mocka-dock-float-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mocka-dock-float-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.mocka-dock-float-grip {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  touch-action: none;
  background: linear-gradient(135deg, transparent 50%, var(--mocka-line) 50% 60%, transparent 60% 70%, var(--mocka-line) 70% 80%, transparent 80%);
}

/* arrastando: fantasma que segue o ponteiro + guias de encaixe + prévia */
.mocka-dock-ghost {
  position: fixed;
  z-index: 2147483000;
  pointer-events: none;
  padding: 4px 10px;
  font-size: var(--mocka-small-size, 12px);
  font-weight: 600;
  color: var(--mocka-on-accent);
  background: var(--mocka-accent);
  border-radius: var(--mocka-radius-small, 4px);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.5);
  transform: translate(12px, 10px);
}
.mocka-dock-guides { position: absolute; inset: 0; z-index: 20; pointer-events: none; display: none; }
.mocka-dock.is-dragging .mocka-dock-guides { display: block; }
.mocka-dock-guide {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--mocka-dock-guide, var(--mocka-accent-ink));
  border: 2px dashed var(--mocka-dock-guide, var(--mocka-accent));
  border-radius: var(--mocka-radius-medium, 8px);
  background: color-mix(in srgb, var(--mocka-surface) 70%, transparent);
  opacity: 0.85;
}
.mocka-dock-guide[data-zone="left"]   { left: 8px; top: 50%; width: 44px; height: 120px; margin-top: -60px; }
.mocka-dock-guide[data-zone="right"]  { right: 8px; top: 50%; width: 44px; height: 120px; margin-top: -60px; }
.mocka-dock-guide[data-zone="bottom"] { bottom: 8px; left: 50%; width: 120px; height: 40px; margin-left: -60px; }
.mocka-dock-guide[data-zone="center"] { left: 50%; top: 50%; width: 110px; height: 70px; margin: -35px 0 0 -55px; }
.mocka-dock-guide.is-hot { opacity: 1; color: var(--mocka-on-accent); background: var(--mocka-dock-guide, var(--mocka-accent)); border-style: solid; }
.mocka-dock-preview {
  position: absolute;
  z-index: 15;
  pointer-events: none;
  border: 2px solid var(--mocka-accent);
  border-radius: var(--mocka-radius-medium, 8px);
  background: color-mix(in srgb, var(--mocka-dock-preview, var(--mocka-accent-soft)) 60%, transparent);
  transition: left 80ms, top 80ms, width 80ms, height 80ms;
}
.mocka-dock-preview[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .mocka-dock-preview { transition: none; } }

/* BEVEL: aba ativa saliente, divisória sem enfeite */
:root[data-mocka-edge="bevel"] .mocka-dock-tab { border-radius: 0; }
:root[data-mocka-edge="bevel"] .mocka-dock-tab[aria-selected="true"] { box-shadow: var(--mocka-bevel-tab); }
:root[data-mocka-edge="bevel"] .mocka-dock-guide,
:root[data-mocka-edge="bevel"] .mocka-dock-preview { border-radius: 0; }

/*
 * heading.css — título de página da Mocka (.mocka-heading). PROTÓTIPO.
 * Nasceu do meds (27/09/2026): o "HOJE"/"REMÉDIOS" em caixa-alta com texto
 * em degradê e brilho. Genérico: cada tema diz a cara dos títulos.
 *
 *   <h1 class="mocka-heading">Hoje</h1>
 *   <h2 class="mocka-heading mocka-heading--sub">Tratamentos</h2>
 *
 * HERANÇA (D24/D35) — components.heading.*:
 *   size ← 24px   weight ← 700   color ← text   transform ← none
 *   tracking ← normal   font ← title-font
 *   fill ← none      (degradê do TEXTO — ex.: linear-gradient(…); com fill,
 *                      ponha textFill: "transparent" para o degradê aparecer)
 *   textFill ← currentColor   glow ← none (filter: drop-shadow…)
 *   tilt ← 0deg   subTilt ← 0deg   (título em diagonal)
 *   subSize ← 15px   subWeight ← 600   subColor ← text-soft
 *   subTransform ← transform   subTracking ← tracking
 * O título da folha (.mocka-sheet-title) e o do login (.mocka-login-title)
 * usam o mesmo fill/textFill/glow: os títulos do app falam a mesma língua.
 */

.mocka-heading {
  margin: 0;
  font-family: var(--mocka-heading-font, var(--mocka-title-font, inherit));
  font-size: var(--mocka-heading-size, 24px);
  font-weight: var(--mocka-heading-weight, 700);
  line-height: 1.15;
  letter-spacing: var(--mocka-heading-tracking, normal);
  text-transform: var(--mocka-heading-transform, none);
  color: var(--mocka-heading-color, var(--mocka-text));
  /* diagonal (cartaz construtivista, Lambe-lambe): o título inclina a partir
     do começo da linha; 0 nos outros temas */
  transform: rotate(var(--mocka-heading-tilt, 0deg));
  transform-origin: left center;
}
.mocka-heading--sub {
  transform: rotate(var(--mocka-heading-sub-tilt, 0deg));
  font-size: var(--mocka-heading-sub-size, 15px);
  font-weight: var(--mocka-heading-sub-weight, 600);
  letter-spacing: var(--mocka-heading-sub-tracking, var(--mocka-heading-tracking, normal));
  text-transform: var(--mocka-heading-sub-transform, var(--mocka-heading-transform, none));
  color: var(--mocka-heading-sub-color, var(--mocka-text-soft));
}
/* degradê no texto + brilho (títulos de página, de folha e de login) */
.mocka-heading:not(.mocka-heading--sub), .mocka-sheet-title, .mocka-login-title {
  background-image: var(--mocka-heading-fill, none);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: var(--mocka-heading-text-fill, currentColor);
  filter: var(--mocka-heading-glow, none);
}
/* um ícone/ponto dentro do título mantém a própria cor */
.mocka-heading > * { -webkit-text-fill-color: initial; }

/*
 * stepper.css — contador de − / + da Mocka (.mocka-stepper). PROTÓTIPO.
 * Nasceu do meds (27/09/2026): repor cartelas no celular — botões redondos
 * grandes são mais fáceis que as setinhas do <input type=number>.
 *
 *   <div class="mocka-stepper">
 *     <button type="button" data-step="-1" aria-label="Menos">−</button>
 *     <label class="mocka-input"><input type="number" min="0" max="99" step="1" value="1"></label>
 *     <button type="button" data-step="1" aria-label="Mais">+</button>
 *   </div>
 *   Mocka.stepper(el)  (ou automático: .mocka-stepper presente ao carregar)
 *
 * HERANÇA (D24) — components.stepper.*:
 *   size ← 44px (botões)   radius ← 50%   gap ← 10px
 *   os botões são .mocka-button (herdam fundo, borda, effects, bevel)
 */

.mocka-stepper {
  display: flex;
  align-items: center;
  gap: var(--mocka-stepper-gap, 10px);
}
.mocka-stepper > .mocka-input { flex: 1; min-width: 0; }
.mocka-stepper > .mocka-input > input { text-align: center; width: 100%; min-width: 0; -moz-appearance: textfield; }
.mocka-stepper > .mocka-input > input::-webkit-inner-spin-button,
.mocka-stepper > .mocka-input > input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.mocka-stepper > .mocka-button {
  flex: none;
  width: var(--mocka-stepper-size, 44px);
  height: var(--mocka-stepper-size, 44px);
  padding: 0;
  border-radius: var(--mocka-stepper-radius, 50%);
  font-size: 20px;
  line-height: 1;
}
:root[data-mocka-edge="bevel"] .mocka-stepper > .mocka-button { border-radius: 0; }

/*
 * notice.css — faixa de aviso da Mocka (.mocka-notice). PROTÓTIPO.
 * Nasceu do Bureau e do meds (27/09/2026): os dois tinham a sua "faixa"
 * ("ontem ficou dose em aberto", "não consegui ler a base") — a regra da
 * casa é "erro nunca quebra a rotina": avisa na tela, nunca em silêncio.
 * Diferente do toast (passa sozinho): a faixa FICA até o motivo sumir.
 *
 *   <div class="mocka-notice" data-tone="warn">
 *     <span class="mocka-notice-text">Ontem ficou <b>1 dose</b> em aberto.</span>
 *     <button class="mocka-button mocka-button--sm">Tomei</button>   ← ações, opcional
 *   </div>
 *   tons: info (padrão) | ok | warn | danger — danger ganha role=alert no app
 *   .mocka-notice--sm  (mais baixa, texto menor)
 *
 * HERANÇA (D24) — components.notice.*:
 *   radius ← radius-medium   padding ← space-2 space-3   gap ← space-2
 *   size ← small-size
 *   o tom mistura a cor do tom com a surface (segue claro/escuro sozinho),
 *   como a pílula
 * Effects (D27): traço desenhado por ::before (fundo) + ::after (borda), como
 * o card; bevel = faixa afundada.
 */
.mocka-notice {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mocka-notice-gap, var(--mocka-space-2, 8px));
  padding: var(--mocka-notice-padding, var(--mocka-space-2, 8px) var(--mocka-space-3, 12px));
  border-radius: var(--mocka-notice-radius, var(--mocka-radius-medium, 7px));
  font-size: var(--mocka-notice-size, var(--mocka-small-size, 12px));
  line-height: 1.45;
  --_tone: var(--mocka-highlight);
  --_bg: color-mix(in srgb, var(--_tone) 14%, var(--mocka-surface));
  --_bd: color-mix(in srgb, var(--_tone) 45%, var(--mocka-surface));
  --_fg: var(--mocka-text);
  color: var(--_fg);
  background: var(--mocka-edge-hide, var(--_bg));
  border: var(--mocka-border-width, 1px) solid var(--mocka-edge-hide, var(--_bd));
  box-sizing: border-box;
}
.mocka-notice-text { flex: 1 1 12em; min-width: 0; }
.mocka-notice > .mocka-button { flex: none; }
.mocka-notice--sm { padding: 4px var(--mocka-space-2, 8px); font-size: var(--mocka-caption-size, 11px); }

.mocka-notice[data-tone="ok"]     { --_tone: var(--mocka-ok); }
.mocka-notice[data-tone="warn"]   { --_tone: var(--mocka-warn); --_bg: var(--mocka-warn-bg, color-mix(in srgb, var(--mocka-warn) 16%, var(--mocka-surface))); }
.mocka-notice[data-tone="danger"] { --_tone: var(--mocka-danger); --_fg: color-mix(in srgb, var(--mocka-danger) 55%, var(--mocka-text)); }
:root[data-mocka-edge="bevel"] .mocka-notice {
  box-shadow: var(--mocka-bevel-sunken);
  border-color: transparent;
}

/*
 * pagehead.css — cabeçalho de TELA da Mocka (.mocka-pagehead). PROTÓTIPO.
 * Nasceu do meds e do Bureau (27/09/2026): os dois tinham o seu (voltar +
 * título + subtítulo + código/ações) — agora é peça da Mocka.
 *
 *   <header class="mocka-pagehead mocka-pagehead--rule">
 *     <a class="mocka-button mocka-button--icon mocka-pagehead-back" data-icon="chevron-left" href="index.html" aria-label="Voltar"></a>
 *     <div class="mocka-pagehead-text">
 *       <h1 class="mocka-heading">Painel de Ideias</h1>
 *       <p class="mocka-pagehead-sub">27 pendentes · grava direto na base</p>
 *     </div>
 *     <div class="mocka-pagehead-actions"> … botões, pílula … </div>
 *   </header>
 *   Tudo é opcional menos o título. O voltar pode ser <a href> ou <button>.
 *   --rule = filete embaixo (tremido no Giz, sulco no Win95).
 *   O título QUEBRA linha em vez de cortar: o do tema pode ser grande (Giz, Noir).
 *
 * HERANÇA (D24) — components.pagehead.*:
 *   gap ← space-3   padding ← space-2 0 space-3   margin ← 0 0 space-3
 *   subColor ← text-faint   subSize ← small-size   ruleColor ← line
 * O título é o .mocka-heading (campos components.heading.*).
 */
.mocka-pagehead {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--mocka-pagehead-gap, var(--mocka-space-3, 12px));
  padding: var(--mocka-pagehead-padding, var(--mocka-space-2, 8px) 0 var(--mocka-space-3, 12px));
  margin: var(--mocka-pagehead-margin, 0 0 var(--mocka-space-3, 12px));
  min-width: 0;
}
.mocka-pagehead-back { flex: none; }
.mocka-pagehead-text { flex: 1; min-width: 0; }
.mocka-pagehead-text > .mocka-heading {
  margin: 0; line-height: 1.15;
  /* palavra que não cabe: hifeniza (no idioma do <html lang>), e só em último
     caso quebra seca — nunca corta com "…" */
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
  text-wrap: balance;
}
.mocka-pagehead-sub {
  margin: 2px 0 0;
  font-size: var(--mocka-pagehead-sub-size, var(--mocka-small-size, 12px));
  color: var(--mocka-pagehead-sub-color, var(--mocka-text-faint));
  line-height: 1.4;
}
.mocka-pagehead-actions { flex: none; display: flex; align-items: center; gap: var(--mocka-space-1, 4px); }

/* filete embaixo: borda reta nos temas limpos; tremido pelo filtro no Giz
   (a borda some por --mocka-edge-hide e o ::after desenha, como na appbar) */
.mocka-pagehead--rule {
  --_bd: var(--mocka-pagehead-rule-color, var(--mocka-line));
  border-bottom: var(--mocka-border-width, 1px) solid var(--mocka-edge-hide, var(--_bd));
}
.mocka-pagehead--rule::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);
  filter: var(--mocka-edge-filter, none);
  pointer-events: none;
}
/* Win95: o sulco clássico (fio escuro + fio claro) */
:root[data-mocka-edge="bevel"] .mocka-pagehead--rule {
  border-bottom: 1px solid var(--mocka-bevel-groove-dark, var(--mocka-line));
  box-shadow: 0 1px 0 var(--mocka-bevel-groove-light, transparent);
}

/*
 * item.css — linha de lista em cartão (.mocka-item) e ponto de estado
 * (.mocka-dot). PROTÓTIPO. Nasceu do meds e do Bureau (27/09/2026): o cartão
 * de remédio, a porta da Home, a máquina do Monitor e o bloco de período
 * eram o mesmo desenho — algo na frente, título + linha fina, algo atrás.
 *
 *   <a class="mocka-card mocka-card--action mocka-item" href="…">   ← ou <div>/<button>/<li>
 *     <span class="mocka-item-lead">…ícone, emoji, avatar, .mocka-dot…</span>
 *     <span class="mocka-item-body">
 *       <span class="mocka-item-title">Painel de Ideias</span>
 *       <span class="mocka-item-sub">ideias e lembretes · aprofundamento</span>
 *     </span>
 *     <span class="mocka-item-trail">
 *       <span class="mocka-item-value">27</span><span class="mocka-item-label">pendentes</span>
 *     </span>                                    ← ou um ícone (chevron), pílula, botão
 *   </a>
 *   Só o corpo é obrigatório. Sem .mocka-card também serve (linha solta).
 *   data-tone no item pinta o valor (ok | warn | danger | accent).
 *
 *   <span class="mocka-dot" data-tone="ok|warn|danger|muted|accent" [data-pulse]></span>
 *   ponto de estado: online, recente, offline… data-pulse = pisca (atenção)
 *
 * HERANÇA (D24) — components.item.*:
 *   gap ← space-3   padding ← (o do card)   titleSize ← base-size + 2
 *   titleWeight ← 600   titleFont ← ui-font   titleColor ← text   titleTracking ← normal
 *   subColor ← text-faint
 *   valueSize ← title-size + 6   valueWeight ← 700   valueFont ← title-font
 *   labelSize ← caption-size   labelColor ← text-faint
 * --lg: lgTitleFont ← title-font  lgTitleSize ← title-size + 8  lgGap ← space-4
 * components.dot.{size ← 10px, ring ← 3px (halo do ok)}
 */
.mocka-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--mocka-item-gap, var(--mocka-space-3, 12px));
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.mocka-item-lead { flex: none; display: inline-flex; align-items: center; justify-content: center; }
.mocka-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mocka-item-title {
  font-family: var(--mocka-item-title-font, var(--mocka-ui-font));
  font-size: var(--mocka-item-title-size, calc(var(--mocka-base-size, 13px) + 2px));
  font-weight: var(--mocka-item-title-weight, 600);
  line-height: 1.2;
  color: var(--mocka-item-title-color, var(--mocka-text));
  letter-spacing: var(--mocka-item-title-tracking, normal);
  overflow-wrap: anywhere;
}
.mocka-item-sub {
  font-size: var(--mocka-small-size, 12px);
  line-height: 1.4;
  color: var(--mocka-item-sub-color, var(--mocka-text-faint));
}
.mocka-item-trail { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; color: var(--mocka-text-faint); }
.mocka-item-value {
  font-family: var(--mocka-item-value-font, var(--mocka-title-font, var(--mocka-ui-font)));
  font-size: var(--mocka-item-value-size, calc(var(--mocka-title-size, 14px) + 6px));
  font-weight: var(--mocka-item-value-weight, 700);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--_tone, var(--mocka-text));
  white-space: nowrap;
}
.mocka-item-label {
  font-size: var(--mocka-item-label-size, var(--mocka-caption-size, 11px));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--mocka-caption-tracking, 0.04em);
  color: var(--mocka-item-label-color, var(--mocka-text-faint));
  white-space: nowrap;
}
.mocka-item[data-tone="ok"] { --_tone: var(--mocka-ok); }
.mocka-item[data-tone="warn"] { --_tone: var(--mocka-warn); }
.mocka-item[data-tone="danger"] { --_tone: var(--mocka-danger); }
.mocka-item[data-tone="accent"] { --_tone: var(--mocka-accent-ink); }

/* grande (--lg): a porta de uma Home — título na fonte de título do tema,
   frente maior (o ladrilho do app) */
.mocka-item--lg { gap: var(--mocka-item-lg-gap, var(--mocka-space-4, 16px)); }
.mocka-item--lg .mocka-item-title {
  font-family: var(--mocka-item-lg-title-font, var(--mocka-title-font, var(--mocka-ui-font)));
  font-size: var(--mocka-item-lg-title-size, calc(var(--mocka-title-size, 14px) + 8px));
  font-weight: var(--mocka-item-lg-title-weight, 600);
  line-height: 1.1;
}
.mocka-item--lg .mocka-item-sub { font-size: calc(var(--mocka-small-size, 12px) + 0.5px); margin-top: 2px; }

/* ponto de estado */
.mocka-dot {
  display: inline-block;
  flex: none;
  width: var(--mocka-dot-size, 10px);
  height: var(--mocka-dot-size, 10px);
  border-radius: 50%;
  --_c: var(--mocka-muted);
  background: var(--_c);
  vertical-align: middle;
}
.mocka-dot[data-tone="ok"] { --_c: var(--mocka-ok); box-shadow: 0 0 0 var(--mocka-dot-ring, 3px) color-mix(in srgb, var(--mocka-ok) 22%, transparent); }
.mocka-dot[data-tone="warn"] { --_c: var(--mocka-warn); }
.mocka-dot[data-tone="danger"] { --_c: var(--mocka-danger); }
.mocka-dot[data-tone="accent"] { --_c: var(--mocka-accent); }
.mocka-dot[data-pulse] { animation: mocka-dot-pulse 1.2s ease-in-out infinite; }
@keyframes mocka-dot-pulse { 50% { transform: scale(1.45); opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .mocka-dot[data-pulse] { animation: none; } }

/*
 * 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);
}

/* opções de escolha (choice.css): cada opção tem texto — a dupla do botão.
   A trilha do segmentado não desenha contorno: quem aparece é a escolhida. */
.mocka-segmented > label::before, .mocka-segmented > label::after,
.mocka-chips > label::before, .mocka-chips > label::after,
.mocka-weekdays > label::before, .mocka-weekdays > label::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--mocka-border-width, 1px));
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.mocka-segmented > label::before, .mocka-chips > label::before, .mocka-weekdays > label::before {
  background: var(--_bg, transparent);
  filter: var(--mocka-edge-fill-filter, none);
  opacity: var(--mocka-edge-fill-opacity, 0);
}
.mocka-segmented > label::after, .mocka-chips > label::after, .mocka-weekdays > label::after {
  border: var(--mocka-edge-width, 0) solid var(--_bd, transparent);
  filter: var(--mocka-edge-filter, none);
}

/* barra de navegação (navbar.css): a linha que a separa do conteúdo, tremida —
   em cima quando está embaixo, embaixo quando sobe para o topo */
.mocka-navbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(-1 * var(--mocka-border-width, 1px));
  z-index: 1;
  border-top: var(--mocka-edge-width, 0) solid var(--_bd, transparent);
  filter: var(--mocka-edge-filter, none);
  pointer-events: none;
}
@container mocka-navshell (min-width: 720px) {
  .mocka-navbar::after { top: auto; bottom: calc(-1 * var(--mocka-border-width, 1px)); }
}

/* barra de menu (menubar.css): botão de cima tem texto — a dupla do botão */
.mocka-menubar-item::before, .mocka-menubar-item::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--mocka-border-width, 1px));
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.mocka-menubar-item::before {
  background: var(--_bg, transparent);
  filter: var(--mocka-edge-fill-filter, none);
  opacity: var(--mocka-edge-fill-opacity, 0);
}
.mocka-menubar-item::after {
  border: var(--mocka-edge-width, 0) 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;
}
/* contêiner que rola SOLTO (fora de .mocka-panel / .mocka-tab-panel): não há
   pai para desenhar o contorno tremido, então ele fica com a borda RETA — num
   tema de traço a borda sumia (usuário, 27/09). Para ter o giz, ponha-o
   dentro de um .mocka-panel. */
:not(.mocka-panel, .mocka-tab-panel) > .mocka-scroll { border-color: var(--_bd); }

/* 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, toast e folha (têm texto): igual ao menu — fundo ::before, borda ::after */
.mocka-tooltip-bubble::before, .mocka-tooltip-bubble::after,
.mocka-toast::before, .mocka-toast::after,
.mocka-sheet::before, .mocka-sheet::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, .mocka-toast::before, .mocka-sheet::before {
  background: var(--_bg, transparent);
  filter: var(--mocka-edge-fill-filter, none);
  opacity: var(--mocka-edge-fill-opacity, 0);
}
.mocka-tooltip-bubble::after, .mocka-toast::after, .mocka-sheet::after {
  border: var(--mocka-edge-width, 0) solid var(--_bd, transparent);
  filter: var(--mocka-edge-filter, none);
}

/* card e faixa de aviso: fundo por ::before (só ondulação), borda por ::after (grão) — como o menu */
.mocka-card::before, .mocka-notice::before,
.mocka-card::after, .mocka-notice::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--mocka-border-width, 1px));
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.mocka-card::before, .mocka-notice::before {
  background: var(--_bg, transparent);
  filter: var(--mocka-edge-fill-filter, none);
  opacity: var(--mocka-edge-fill-opacity, 0);
}
.mocka-card::after, .mocka-notice::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;
}
/* POÇO DE ROLAGEM: o relevo afundado é pintado POR CIMA do conteúdo.
 * box-shadow inset fica por baixo do conteúdo, então tudo que tem fundo
 * próprio o cobria — o cabeçalho fixo da tabela apagava a borda de cima e a
 * linha em hover/selecionada a da esquerda (usuário, 27/09, tema Windows 95).
 * Regra de SISTEMA (qualquer tema bevel): dentro de .mocka-panel ou
 * .mocka-tab-panel o relevo vai numa camada ancorada ao .mocka-scroll, acima
 * do conteúdo e sem receber clique — a mesma técnica do contorno de giz.
 * Scroll solto (sem painel) segue com o relevo por baixo (não há onde
 * ancorar a camada): ponha-o num .mocka-panel. */
:root[data-mocka-edge="bevel"] .mocka-panel > .mocka-scroll,
:root[data-mocka-edge="bevel"] .mocka-tab-panel > .mocka-scroll { box-shadow: none; }
:root[data-mocka-edge="bevel"] .mocka-panel:has(> .mocka-scroll)::after {
  border: 0;
  box-shadow: var(--mocka-bevel-sunken);
}
.mocka-tab-panel { anchor-scope: --mocka-well; }
.mocka-tab-panel > .mocka-scroll { anchor-name: --mocka-well; }
:root[data-mocka-edge="bevel"] .mocka-tab-panel:has(> .mocka-scroll)::before {
  content: "";
  position: absolute;
  position-anchor: --mocka-well;
  top: anchor(top);
  left: anchor(left);
  right: anchor(right);
  bottom: anchor(bottom);
  z-index: 4;
  border-radius: inherit;
  box-shadow: var(--mocka-bevel-sunken);
  pointer-events: none;
}

/* 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;
  /* o reset fixa html/body em 100% (a janela do desktop não rola). Página
     web rola: o body CRESCE com o conteúdo — senão o fundo dele parava na
     altura da 1ª tela (achado no Bureau, 27/09/2026) */
  height: auto;
  min-height: 100%;
}
: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;
}
/* Página SEM a casca .mocka-app (o Bureau: HTML próprio, peças da Mocka):
   a mesma camada fixa, no body. O fundo do tema fica parado enquanto a
   página rola (usuário, 27/09/2026, no Neon do Bureau). A página não pinta
   fundo próprio no body — senão cobre a camada. */
:root[data-mocka-host="lite"]:not([data-mocka-page="app"]) body:not(:has(> .mocka-app)) {
  position: relative;
  isolation: isolate;
  background: transparent;
}
:root[data-mocka-host="lite"]:not([data-mocka-page="app"]) body:not(:has(> .mocka-app))::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--mocka-panel, var(--mocka-window));
  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;
}
/* barra de navegação (C16): SEMPRE visível — a página rola como documento, a
   barra gruda no pé da tela (usuário, 27/09/2026, no meds: "a barra do
   rodapé não deve ficar dentro da rolagem geral"). Na tela larga ela sobe
   ao topo e gruda logo abaixo da appbar (--mocka-appbar-offset, medido pelo
   navbar.js). */
:root[data-mocka-host="lite"]:not([data-mocka-page="app"]) .mocka-navbar {
  position: sticky;
  bottom: 0;
  z-index: 19;
}
@container mocka-navshell (min-width: 720px) {
  :root[data-mocka-host="lite"]:not([data-mocka-page="app"]) .mocka-navbar {
    bottom: auto;
    top: var(--mocka-appbar-offset, 0px);
  }
}
:root[data-mocka-host="lite"] body { margin: 0; }
/* a raiz do documento no tamanho do NAVEGADOR (16 px, ou o que a pessoa
   escolheu — acessibilidade): app web mede em rem e encolhia ~19% com os
   13 px da casca desktop (achado no meds, 27/09). Os componentes da Mocka
   medem em px e não mudam. */
:root[data-mocka-host="lite"] { font-size: 100%; }
/* 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; }
}