/* Base do Subverse OS. */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sub);
  font-size: 14px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--text-strong);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* Foco de teclado garantido (H7/C-OS achado 5): independe da heurística de :focus-visible,
   que no Safari do Portal fica falso até no primeiro Tab. app.js marca html[data-kb] em teclado. */
html[data-kb="true"] :focus {
  outline: 2px solid var(--text-strong) !important;
  outline-offset: 2px !important;
}

.icon { display: block; flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { flex-basis: 16px; width: 16px; height: 16px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Tag de estado editorial (A3): pílula com fundo suave, ícone cheio colorido e texto na mesma cor (peso médio). */
.st-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border-radius: var(--radius, 2px);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
}
.st-tag-icon { display: block; flex: 0 0 13px; width: 13px; height: 13px; }
.st-tag-label { line-height: 1; }
.st-tag--fechado { background: var(--status-fechado-bg); color: var(--status-fechado-fg); }
.st-tag--rascunho { background: var(--status-rascunho-bg); color: var(--status-rascunho-fg); }
.st-tag--aberto { background: var(--status-aberto-bg); color: var(--status-aberto-fg); }
.st-tag--neutral { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.st-tag--sm { gap: 4px; padding: 0 6px; font-size: 11px; line-height: 16px; }
.st-tag--sm .st-tag-icon { flex: 0 0 11px; width: 11px; height: 11px; }
.st-tag--lg { gap: 7px; min-height: 28px; padding: 2px 12px; font-size: 14px; font-weight: 500; line-height: 20px; }
.st-tag--lg .st-tag-icon { flex: 0 0 16px; width: 16px; height: 16px; }