/* --- Tokens do Estmon -----------------------------------------------------------------------
 * Uma escala com papel declarado, não uma lista de cores. Antes havia um azul fazendo quase tudo
 * e três níveis de neutro, o que deixava toda área com o mesmo peso — "mais um cartão".
 *
 * Duas decisões de marca:
 *   `--accent` (turquesa) é a cor PROPRIETÁRIA, reservada a evidência e progresso. O azul de ação
 *   é próximo do padrão Material/Google e não distingue o produto; o turquesa assina as peças que
 *   só o Estmon tem — score, cobertura, evidência e decisão.
 *
 *   `--human` (violeta) marca decisão humana. "Em revisão" deixa de ser vermelho: incompleto não
 *   é erro, e vermelho fica reservado a risco, falha e ação destrutiva.
 * ------------------------------------------------------------------------------------------ */
:root {
  color-scheme: light;
  --ink: #14213d;
  --ink-soft: #33405c;
  --muted: #59637a;
  --line: #dde3ec;
  --line-strong: #78849c;
  --bg: #f3f5f9;
  --card: #ffffff;
  --card-soft: #eef2f8;
  --surface-2: #e7ecf4;
  --surface-selected: #dfe9fb;
  --brand: #174ea6;
  --brand-ink: #ffffff;
  --brand-soft: #e6eefb;
  --ok: #0b6e4f;
  --ok-ink: #06452f;
  --ok-soft: #e3f5ee;
  --danger: #b3261e;
  --danger-ink: #7d1a15;
  --danger-soft: #fbe7e5;
  --warn: #8a4b08;
  --warn-ink: #663705;
  --warn-soft: #fbeed9;
  --human: #6b3fa0;
  --human-ink: #4a2b70;
  --human-soft: #f0e9fa;
  --accent-ink: #05606a;
  --focus: #1a73e8;
  --shadow: 0 1px 2px rgba(20, 33, 61, 0.06), 0 8px 24px rgba(20, 33, 61, 0.06);
  --radius: 0.75rem;
  --accent: #087e8b;
  --accent-soft: #e3f4f5;
  --surface-raised: #f8fafc;
  --space-page: clamp(1rem, 3vw, 2rem);
  /* Duas famílias com papel definido: a de interface e a de identificador técnico (regra do
     axe, seletor, hash). Antes o monoespaçado era repetido solto em cinco regras diferentes. */
  --font-ui: "Segoe UI Variable", "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #e8ecf4;
    --muted: #a3adc2;
    --line: #2c3448;
    --bg: #0f1420;
    --card: #161c2b;
    --card-soft: #1d2436;
    --brand: #6ea8ff;
    --brand-ink: #0b1220;
    --brand-soft: #1a2740;
    --ok: #4fd8a5;
    --ok-ink: #9fecc9;
    --ok-soft: #10281f;
    --ink-soft: #c3cbdb;
    --line-strong: #7885a6;
    --surface-2: #232b3d;
    --surface-selected: #26334d;
    --surface-raised: #1b2233;
    --human: #b79bee;
    --human-ink: #d3c2f6;
    --human-soft: #241c38;
    --accent: #4fc3cf;
    --accent-ink: #8fdde5;
    --accent-soft: #102b2f;
    --danger-ink: #ff9e99;
    --warn-ink: #f7cd8b;
    --danger: #ff6b64;
    --danger-soft: #33181a;
    --warn: #f0b558;
    --warn-soft: #332510;
    --focus: #6ea8ff;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e8ecf4;
  --muted: #a3adc2;
  --line: #2c3448;
  --bg: #0f1420;
  --card: #161c2b;
  --card-soft: #1d2436;
  --brand: #6ea8ff;
  --brand-ink: #0b1220;
  --brand-soft: #1a2740;
  --ok: #4fd8a5;
  --ok-ink: #9fecc9;
  --ok-soft: #10281f;
  --ink-soft: #c3cbdb;
  --line-strong: #7885a6;
  --surface-2: #232b3d;
  --surface-selected: #26334d;
  --surface-raised: #1b2233;
  --human: #b79bee;
  --human-ink: #d3c2f6;
  --human-soft: #241c38;
  --accent: #4fc3cf;
  --accent-ink: #8fdde5;
  --accent-soft: #102b2f;
  --danger-ink: #ff9e99;
  --warn-ink: #f7cd8b;
  --danger: #ff6b64;
  --danger-soft: #33181a;
  --warn: #f0b558;
  --warn-soft: #332510;
  --focus: #6ea8ff;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 var(--font-ui);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--brand);
  color: var(--brand-ink);
  padding: 0.6rem 1rem;
  border-radius: 0 0 0.5rem 0;
  z-index: 100;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 2px;
}

.app-header {
  background: linear-gradient(180deg, #0f1c33, #102a43);
  color: #fff;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.brand { display: flex; align-items: center; gap: 0.75rem; }
/* O título é o link: o leitor de tela anuncia apenas "Estmon", em vez de juntar a sigla do
   logotipo e a linha de apoio num nome de link comprido. */
.brand h1 a { color: inherit; text-decoration: none; }
.brand h1 a:hover { text-decoration: underline; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.6rem;
  flex: none;
}
.app-header h1 { margin: 0; font-size: 1.35rem; letter-spacing: -0.01em; }
.tagline { margin: 0.1rem 0 0; font-size: 0.85rem; color: #b7c3d9; }

main {
  max-width: 1280px;
  margin: auto;
  padding: 1.5rem clamp(1rem, 4vw, 2rem) 4rem;
}

/* ===== Refinamento comercial e reflow ===== */
.home-primary-action { display: flex; justify-content: flex-end; margin-top: 1rem; }
.brand-mark { background: var(--brand); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-ink) 22%, transparent); }
.brand-mark svg { width: 1.65rem; height: 1.65rem; fill: none; }
.brand-mark-path { stroke: var(--brand-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.brand-mark-node { fill: var(--brand-ink); opacity: .75; }
.brand-mark-focus { stroke: var(--accent); stroke-width: 1.8; opacity: .9; }
.brand-mark-hit { fill: var(--accent); }
.card { box-shadow: 0 1px 2px rgba(20,33,61,.04), 0 10px 30px rgba(20,33,61,.055); }
.wizard-steps { position: relative; align-items: stretch; }
.wizard-steps li { min-width: 0; }
.wizard-steps button { display: flex; align-items: center; gap: .55rem; text-align: left; border-color: transparent; background: transparent; }
.wizard-steps button span { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; flex: 0 0 1.8rem; border-radius: 999px; color: var(--muted); background: var(--card-soft); border: 1px solid var(--line); font-size: .8rem; }
.wizard-steps button[aria-current="step"] { background: var(--brand-soft); border-color: var(--brand); box-shadow: none; color: var(--brand); font-weight: 650; }
.wizard-steps button[aria-current="step"] span { color: var(--brand-ink); background: var(--brand); border-color: var(--brand); }
/* Etapa concluída: marcador preenchido e um "✓" desenhado por CSS. O estado também é dito em
   texto no `.sr-only` do botão — cor sozinha não comunica estado (WCAG 1.4.1). */
.wizard-steps button[data-state="done"] { color: var(--ink); }
.wizard-steps button[data-state="done"] span { color: var(--ok-ink); background: var(--ok-soft); border-color: var(--ok); font-size: 0; }
.wizard-steps button[data-state="done"] span::after { content: ""; width: .5rem; height: .85rem; border: solid var(--ok-ink); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -2px); }
.wizard-steps button[data-state="todo"] { color: var(--muted); }
/* Linha de progresso entre os marcadores: mostra o total percorrido, que quatro textos soltos
   lado a lado não comunicavam. */
.wizard-steps li { position: relative; }
.wizard-steps li + li::before { content: ""; position: absolute; left: -.5rem; top: 1.5rem; width: .5rem; height: 2px; background: var(--line-strong); }
.wizard-steps li:has(+ li button[data-state="done"])::before, .wizard-steps li + li:has(button[data-state="done"])::before { background: var(--ok); }
@media (max-width: 600px) { .wizard-steps li + li::before { display: none; } }
.preset-toolbar { justify-content: flex-start; padding: .85rem 1rem; background: var(--surface-raised); border: 1px solid var(--line); border-radius: .65rem; margin-bottom: 1rem; }
.preset-toolbar #preset-summary { flex: 1 1 20rem; }
.advanced > .field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.advanced label, .advanced input, .advanced select, .advanced textarea { min-width: 0; max-width: 100%; width: 100%; }
.advanced .plan-check { width: auto; min-height: 2.75rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--surface-raised); align-items: flex-start; }
.advanced .plan-check input { width: 1.2rem; min-width: 1.2rem; margin-top: .12rem; }
.advanced .plan-check .optional { margin-left: .2rem; }
.review-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.review-summary div { border-top: 3px solid var(--accent); background: var(--surface-raised); }
.review-summary small { display: block; margin-top: .3rem; color: var(--muted); font-weight: 400; overflow-wrap: anywhere; }
.review-summary .review-risk { border-top-color: var(--warn); background: var(--warn-soft); }
#create-review.banner { display: block; color: var(--ink); border-color: var(--line); background: transparent; }
.effort-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: end; }
.effort-controls .field-wide { grid-column: 1 / -1; }
.effort-controls textarea { min-height: 4.5rem; font-family: inherit; font-size: 1rem; }
.effort-controls > * { min-width: 0; }
.effort-controls label, .effort-controls input, .effort-controls textarea { width: 100%; }
.score-card { align-items: flex-start; border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); }
.score-main { min-width: 11rem; }
.site-header-card .btn-danger { margin-left: auto; }
.technical-column { color: var(--muted); }
.more-actions > summary { color: var(--muted); text-decoration: none !important; }
.more-actions .export-menu-items { min-width: 13rem; }
.more-actions .btn-danger { width: 100%; margin: 0; justify-content: flex-start; }
.management-panel > summary { cursor: pointer; display: flex; align-items: baseline; gap: .75rem; list-style: none; }
.management-panel > summary::-webkit-details-marker { display: none; }
.management-panel > summary::before { content: "▸" / ""; color: var(--brand); transition: transform .15s ease; }
.management-panel[open] > summary::before { transform: rotate(90deg); }
.management-panel > summary strong { font-size: 1.15rem; }
.management-panel > form:first-of-type { margin-top: 1rem; }
#finding-batch-management { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  .advanced > .field-grid, .review-summary, .effort-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  html, body { max-width: 100%; overflow-x: clip; }
  .app-header { padding: .8rem 1rem; }
  main { width: 100%; padding: 1rem 1rem 3rem; overflow: hidden; }
  .card { padding: 1rem; }
  .home-tabs, .tabs-main { width: 100%; padding-inline: 0; overflow-x: auto; scroll-snap-type: x proximity; }
  .home-tabs .tab, .tabs-main .tab { flex: 0 0 auto; scroll-snap-align: start; min-height: 2.75rem; }
  .home-primary-action { justify-content: stretch; }
  .home-primary-action .btn { width: 100%; justify-content: center; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric { padding: .8rem; }
  .banner { flex-wrap: wrap; }
  .banner .btn { width: 100%; justify-content: center; margin-top: .35rem; }
  .wizard-steps { display: flex; overflow-x: auto; padding-bottom: .4rem; margin-bottom: 1rem; }
  .wizard-steps li { flex: 0 0 auto; }
  .wizard-steps button { width: auto; white-space: nowrap; }
  .preset-toolbar, .toolbar, .toolbar-actions { align-items: stretch; }
  .preset-toolbar > *, .toolbar-actions > *, .search-field { max-width: 100%; width: 100%; }
  .search-field input { min-width: 0; width: 100%; }
  .mode-select { display: grid; width: 100%; border-radius: .7rem; }
  .mode-option { border-radius: .5rem; justify-content: center; }
  .advanced > .field-grid, .review-summary, .effort-controls { grid-template-columns: minmax(0, 1fr); }
  .advanced { padding-inline: .65rem; }
  .advanced .plan-check { display: grid !important; grid-template-columns: auto minmax(0, 1fr); }
  .advanced .plan-check .optional { grid-column: 2; margin: 0; }
  .form-actions .btn { flex: 1 1 auto; justify-content: center; }
  .score-card { display: grid; gap: 1rem; padding: 1rem; }
  .score-breakdown, .score-main, .score-steps, .score-severity, .score-next-action, .review-completion-status { min-width: 0; width: 100%; }
  .score-breakdown { display: grid; grid-template-columns: 1fr; gap: .8rem; }
  .site-header-card .toolbar, .site-header-card .toolbar-actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .site-header-card .card-head, .dialog-head-actions { min-width: 0; max-width: 100%; width: 100%; }
  .site-header-card select, .site-header-card .btn { width: 100%; justify-content: center; }
  .site-header-card .btn-danger { margin-left: 0; }
  .chart-grid { grid-template-columns: minmax(0, 1fr) auto; }
  .chart-row-bar { grid-column: 1 / -1; }
  .technical-column, td.technical-column { display: none; }
  .export-menu, .more-actions { min-width: 0; max-width: 100%; width: 100%; }
  .export-menu-items { left: 0; right: 0; width: 100%; max-width: 100%; min-width: 0; }
  .tabs { width: 100%; min-width: 0; contain: inline-size; }
  .tabs .tab { max-width: none; }
  .view, .tab-panel, .card-head-card, .card { min-width: 0; width: 100%; max-width: 100%; }
  .dialog-subline { min-width: 0; }
  #site-target { max-width: 100%; overflow-wrap: anywhere; }
  dialog { width: calc(100vw - 1.25rem); max-width: calc(100vw - 1.25rem); }
}

.view {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
  max-width: 100%;
}
.view[hidden] { display: none; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--muted);
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 700; }
.breadcrumb-sep { color: var(--line); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem clamp(1rem, 3vw, 1.5rem);
  box-shadow: var(--shadow);
  /* Sem isso, itens de grid não encolhem abaixo do conteúdo intrínseco (ex.: uma
     tabela larga) e estouram a largura da viewport em telas estreitas. */
  min-width: 0;
}
.card-head { margin-bottom: 1rem; }
.card-head h2 { margin: 0; }
.card-head .muted { margin: 0.2rem 0 0; }

h2, h3 { margin: 0.2rem 0 0.6rem; letter-spacing: -0.01em; }
h3 { font-size: 1rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 1.5rem; }

.field-grid {
  display: grid;
  /* 190px cortava o texto das opções mais longas de select ("Rede ociosa (mais completo)", "Só
     cabeçalho, rodapé e menu") sem reticências nem aviso — a pessoa via a opção pela metade. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.9rem;
}
.field-wide { grid-column: 1 / -1; }

label {
  display: grid;
  gap: 0.3rem;
  font-weight: 600;
  font-size: 0.92rem;
}
/* `label` sempre declara o próprio display (grid), o que vence a regra `[hidden]{display:none}`
   do navegador — origem author sempre bate origem UA, não importa a especificidade. Sem isto,
   um campo `<label data-mode="CRAWL" hidden>` continuava visível ao trocar de modo: o bug
   relatado de campos que "não somem" ao alternar entre rastreamento, lista e roteiro. */
label[hidden] { display: none; }
.optional { font-weight: 400; color: var(--muted); font-size: 0.82rem; }

input, select, textarea, button {
  font: inherit;
  color: inherit;
}
input, select, textarea {
  padding: 0.6rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--card);
  color: var(--ink);
}
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
textarea { resize: vertical; font-family: var(--font-mono); font-size: 0.85rem; }

details.advanced {
  margin-top: 0.9rem;
  border: 1px dashed var(--line);
  border-radius: 0.6rem;
  padding: 0.15rem 0.9rem 0.9rem;
}
details.advanced summary {
  cursor: pointer;
  padding: 0.7rem 0;
  font-weight: 700;
  color: var(--brand);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
details.advanced summary::before {
  content: "▸" / "";
  transition: transform 0.15s ease;
  display: inline-block;
}
details.advanced[open] summary::before { transform: rotate(90deg); }
details.advanced .field-grid { margin-top: 0.4rem; }

.form-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.1rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  padding: 0.62rem 1.05rem;
  border-radius: 0.55rem;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 0.92rem;
  transition: filter 0.12s ease, transform 0.05s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* withBusy() em ui.js: rótulo escondido (mesma cor do fundo, ainda lido pelo leitor de tela) e
   um anel girando no lugar — sem isto, desabilitar o botão era a única pista visual de que a
   requisição estava em andamento, e passava por travamento numa ação mais lenta. */
.btn.is-busy { position: relative; color: transparent; opacity: 1; }
.btn.is-busy::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.05em;
  height: 1.05em;
  border: 2px solid var(--line);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn[hidden] { display: none; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn-secondary { background: var(--brand-soft); border-color: var(--brand-soft); color: var(--brand); }
.btn-secondary:hover:not(:disabled) { filter: brightness(0.97); }
.btn-danger { background: var(--danger-soft); border-color: var(--danger-soft); color: var(--danger); }
.btn-danger:hover:not(:disabled) { filter: brightness(0.96); }
.btn-ghost { background: transparent; border-color: transparent; color: inherit; padding: 0.5rem; }
.btn-ghost:hover:not(:disabled) { background: var(--card-soft); }
/* Sem fundo nem borda, um botão-fantasma de texto precisa de outro sinal de que é clicável —
   herdar a cor do texto ao redor o deixa indistinguível de uma célula comum de tabela. Isto
   também unifica <a> e <button> com esta classe: o navegador sublinha o <a> por padrão mas não
   o <button>, então a mesma ação tinha dois sinais visuais diferentes conforme o elemento por
   trás. Ícone sozinho (.btn-icon) já comunica ação pelo pictograma; não precisa disto. */
.btn-ghost:not(.btn-icon) { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.btn-icon { padding: 0.5rem; border-radius: 999px; }
.btn-sm { padding: 0.4rem 0.7rem; font-size: 0.82rem; }

.icon { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

#theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] #theme-toggle .icon-sun,
:root:not([data-theme="light"]):is(.dark-active) #theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] #theme-toggle .icon-moon { display: block; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.toolbar-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.search-field {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-soft);
  font-weight: 400;
  color: var(--muted);
}
.search-field .icon { width: 1rem; height: 1rem; }
.search-field input {
  border: none;
  background: transparent;
  padding: 0.15rem 0;
  min-width: 12rem;
  color: var(--ink);
}
/* O input em si nunca tem anel de foco visível (borda transparente, sem outline) — sem
   compensar no contêiner, navegar até aqui por teclado não deixava rastro nenhum na tela. */
.search-field input:focus-visible { outline: none; }
.search-field:focus-within { outline: 2.5px solid var(--focus); outline-offset: 2px; }

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.7rem;
  margin-bottom: 0.5rem;
}
.metric {
  padding: 0.9rem 1rem;
  background: var(--card-soft);
  border-radius: 0.6rem;
  border: 1px solid var(--line);
}
.metrics { margin-block: 0; }
.metric dt { display: block; color: var(--muted); font-size: 0.82rem; font-weight: 600; }
.metric dd { margin: 0; }
.metric strong { display: block; font-size: 1.9rem; letter-spacing: -0.02em; margin-top: 0.15rem; }
.metric small { display: block; color: var(--muted); font-size: 0.74rem; margin-top: 0.1rem; }

.score-card[hidden] { display: none; }
.score-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1rem;
  background: var(--brand-soft);
  border: 1px solid var(--brand);
  border-radius: var(--radius);
}
.score-main { display: flex; flex-direction: column; }
.score-label { font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.score-value { font-size: 2.6rem; line-height: 1; letter-spacing: -0.02em; color: var(--brand); margin-top: 0.2rem; }
.score-scale { font-size: 1.1rem; font-weight: 600; color: var(--muted); }
/* Leitura em palavras do número do score, no mesmo padrão visual do selo WCAG — "bom"/"regular"
   já usam os tokens de status existentes, sem paleta nova. */
.score-reading {
  display: inline-block;
  align-self: flex-start;
  margin-top: 0.3rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
}
.score-reading.good, .score-reading.ok { background: var(--ok-soft); color: var(--ok); }
.score-reading.warn { background: var(--warn-soft); color: var(--warn); }
.score-reading.critical { background: var(--danger-soft); color: var(--danger); }
.score-delta { margin-top: 0.35rem; font-size: 0.82rem; font-weight: 700; }
.score-delta.positive { color: var(--ok); }
.score-delta.negative { color: var(--danger); }
.score-delta.neutral { color: var(--muted); }
.score-breakdown { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 0; }
.score-breakdown dt { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.score-breakdown dd { margin: 0.1rem 0 0; font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.score-breakdown dd .muted { display: block; font-size: 0.76rem; font-weight: 400; margin-top: 0.05rem; }
.score-caption { flex-basis: 100%; margin: 0; font-size: 0.78rem; }
.score-next-action { flex-basis: 100%; margin: 0; padding: 0.65rem 0.8rem; background: var(--brand-soft); border-radius: 0.45rem; }
.score-trend { width: 140px; height: 36px; margin-top: 0.5rem; color: var(--brand); }

/* Barra de degraus do score: decorativa (a legenda em texto ao lado carrega a mesma informação),
   por isso sem contraste/foco próprios — o marcador é só um reforço visual da posição do número
   que já está escrito grande em .score-value. */
.score-steps { flex-basis: 100%; margin-top: 0.3rem; }
.score-step-track { position: relative; display: flex; height: 8px; border-radius: 999px; overflow: visible; background: var(--card-soft); }
.score-step-seg { display: block; height: 100%; }
.score-step-seg:first-child { border-radius: 999px 0 0 999px; }
.score-step-seg:last-child { border-radius: 0 999px 999px 0; }
/* Larguras fixas dos 4 degraus (0-50/50-70/70-90/90-100) — ver comentário em site.js sobre por
   que isto não é calculado por `style=""`. */
.score-step-seg.critical { width: 50%; background: var(--danger); }
.score-step-seg.warn { width: 20%; background: var(--warn); }
.score-step-seg.ok { width: 20%; background: var(--ok); }
.score-step-seg.good { width: 10%; background: var(--ok); }
.score-step-marker {
  position: absolute; top: 50%; left: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--card);
  box-shadow: 0 0 0 1px var(--line);
  transform: translate(-50%, -50%);
}
/* Posição do marcador, em passos fixos de 5% (0 a 100) — mesmo motivo das larguras acima: nunca
   `style="left:…"`, sempre uma classe pré-definida aqui. */
.score-step-marker-0 { left: 0%; }
.score-step-marker-5 { left: 5%; }
.score-step-marker-10 { left: 10%; }
.score-step-marker-15 { left: 15%; }
.score-step-marker-20 { left: 20%; }
.score-step-marker-25 { left: 25%; }
.score-step-marker-30 { left: 30%; }
.score-step-marker-35 { left: 35%; }
.score-step-marker-40 { left: 40%; }
.score-step-marker-45 { left: 45%; }
.score-step-marker-50 { left: 50%; }
.score-step-marker-55 { left: 55%; }
.score-step-marker-60 { left: 60%; }
.score-step-marker-65 { left: 65%; }
.score-step-marker-70 { left: 70%; }
.score-step-marker-75 { left: 75%; }
.score-step-marker-80 { left: 80%; }
.score-step-marker-85 { left: 85%; }
.score-step-marker-90 { left: 90%; }
.score-step-marker-95 { left: 95%; }
.score-step-marker-100 { left: 100%; }
.score-step-caption { margin: 0.35rem 0 0; }

.severity-rationale {
  flex-basis: 100%; border: 1px solid var(--line); border-radius: 0.5rem;
  padding: 0.5rem 0.75rem; background: var(--card);
}
.severity-rationale summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--brand); }
.rationale-steps { margin: 0.6rem 0 0.4rem; padding-left: 1.2rem; font-size: 0.85rem; }
.rationale-steps li { margin: 0.3rem 0; }
.rationale-result { margin: 0.4rem 0 0; font-size: 0.85rem; }

.review-completion-status { flex-basis: 100%; margin: 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.review-completion-status.done { color: var(--ok); }
.review-completion-status .icon { color: currentColor; }

.wcag-badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
}
.wcag-AAA, .wcag-AA, .wcag-A { background: var(--ok-soft); color: var(--ok); }
.wcag-NENHUM { background: var(--danger-soft); color: var(--danger); }
.wcag-SEM_COBERTURA { background: var(--card-soft); color: var(--muted); }
/* Amostral: o nível foi apurado sobre parte do site, então o selo não pode se parecer com um
   atestado de conformidade — fica contornado em vez de preenchido. */
.wcag-amostral { background: transparent; border: 1px dashed currentColor; }
.wcag-ressalva { display: block; font-size: 0.76rem; margin-top: 0.15rem; }

.diff-card[hidden] { display: none; }
.diff-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.1rem;
  margin-bottom: 1rem;
  background: var(--card-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.diff-title { margin: 0; font-size: 0.82rem; font-weight: 600; color: var(--muted); flex-basis: 100%; }
.diff-items { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: flex-start; }
.diff-item { font-size: 0.92rem; }
.diff-item summary { cursor: pointer; }
.diff-item strong { font-size: 1.1rem; margin-right: 0.3rem; }
.diff-new strong { color: var(--danger); }
.diff-persistent strong { color: var(--warn); }
.diff-resolved strong { color: var(--ok); }
.diff-reopened strong { color: var(--danger); }
.diff-entries { margin: 0.5rem 0 0.25rem; padding-left: 1.2rem; font-size: 0.85rem; max-height: 220px; overflow: auto; }
.diff-entries li { margin: 0.2rem 0; }

.severity { font-weight: 700; }
.severity-critical { color: var(--danger); }
.severity-serious { color: var(--warn); }
.severity-moderate, .severity-minor { color: var(--muted); }

.manual-review-page { margin-bottom: 0.5rem; font-size: 0.9rem; }
.manual-review-page summary { cursor: pointer; }
.manual-review-page ul { margin: 0.3rem 0 0.3rem 0; padding-left: 1.3rem; }
.manual-review-page li { margin: 0.2rem 0; }

.banner[hidden] { display: none; }
.banner {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border-radius: 0.55rem;
  border: 1px solid var(--warn-soft);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.88rem;
  margin-bottom: 1rem;
}
.banner strong { color: inherit; }
.banner ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.banner li { margin: 0.15rem 0; }

.component-breakdown[hidden] { display: none; }
.component-breakdown {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--line);
  font-size: 0.85rem;
  color: var(--muted);
}
.component-breakdown-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.component-breakdown strong { color: var(--ink); }

.field-note { margin: 0.7rem 0 0; font-size: 0.82rem; }
.field-note p + p { margin-top: 0.45rem; }
.field-note code {
  font-size: 0.95em;
  padding: 0.05rem 0.25rem;
  border-radius: 4px;
  background: rgba(127, 127, 127, 0.14);
}

/* Controle segmentado: três opções mutuamente exclusivas, uma decisão que se toma olhando, não
   lendo — o texto de cada opção é o suficiente; o porquê de cada uma vai só na linha dinâmica
   abaixo (.mode-hint), para não repetir três parágrafos quando só um está em jogo por vez. */
.mode-select {
  display: inline-flex;
  gap: 0.15rem;
  padding: 0.2rem;
  margin: 0 0 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-soft);
}
.mode-option {
  position: relative;
  display: flex !important;
  align-items: center;
  margin: 0;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.mode-option:hover { color: var(--ink); }
/* Cobre o rótulo inteiro, não um ponto de 1px: clicar em qualquer parte do texto precisa
   acionar o rádio, e um input reduzido a 1px por clip-rect fica fora do alcance de clique
   (e de automação) mesmo dentro do mesmo <label>. */
.mode-option input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.mode-option:has(input:checked) { background: var(--brand); color: var(--brand-ink); }
.mode-option:has(input:focus-visible) { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.mode-hint { margin: 0 0 1rem; min-height: 1.2em; }
/* Uma URL por linha: cada uma é lida isolada, sem prosa em volta. */
textarea[name="urlList"] {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.55;
}

/* ===== Editor visual do roteiro ===== */
.plan-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.plan-step-card {
  margin: 0;
  padding: 1rem clamp(0.85rem, 2.5vw, 1.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-soft);
}
.plan-step-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; }
.plan-step-title { margin: 0; font-size: 0.95rem; }
.plan-step-number, .plan-action-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.plan-step-move { display: flex; gap: 0.2rem; margin-left: auto; }

.plan-check {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}
.plan-check input { accent-color: var(--brand); width: 1.15rem; height: 1.15rem; }
.plan-has-url-fields { margin-top: 0.6rem; }
.plan-has-url-fields .field-grid { margin: 0; }

.field-error {
  margin: 0.4rem 0 0;
  color: var(--danger);
  font-size: 0.82rem;
  font-weight: 600;
}
[aria-invalid="true"] { border-color: var(--danger) !important; }

.plan-actions-block { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed var(--line); }
.plan-actions-block h4 { margin: 0 0 0.7rem; font-size: 0.82rem; text-transform: none; letter-spacing: normal; color: var(--ink); font-weight: 700; }
.plan-actions-block h4 .optional { font-weight: 400; }
.plan-actions { list-style: none; margin: 0 0 0.7rem; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.plan-actions-empty { color: var(--muted); font-size: 0.85rem; font-style: italic; }

.plan-action {
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--card);
}
.plan-action-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.plan-action-type { flex: 1; display: flex !important; flex-direction: row; align-items: center; gap: 0.5rem; font-weight: 500; }
.plan-action-type select { flex: 1; min-width: 10rem; }
.plan-action-fields { row-gap: 0.7rem; }

.plan-value-legend { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.3rem; }
.plan-radio-row { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin-bottom: 0.6rem; }
.plan-radio { display: flex !important; flex-direction: row; align-items: center; gap: 0.4rem; font-weight: 400; }
.plan-radio input { accent-color: var(--brand); }
.plan-value-value-field, .plan-value-env-field { margin-top: 0.5rem; }
.plan-value-env-field input { font-family: var(--font-mono); }

.plan-target-fields[hidden], .plan-value-fields[hidden], .plan-key-field[hidden], .plan-wait-url-field[hidden],
.plan-has-url-fields[hidden], .plan-value-value-field[hidden], .plan-value-env-field[hidden] { display: none; }

/* Alvo mínimo de 24×24px (WCAG 2.2 — Target Size): os botões-ícone do editor são pequenos e
   ganham a folga de toque por fora do desenho visível, sem inflar o ícone em si. */
.plan-step-move .btn-icon, .plan-actions-block .btn-icon { min-width: 1.75rem; min-height: 1.75rem; justify-content: center; }

.activity-summary { cursor: pointer; list-style: none; }
.activity-summary::-webkit-details-marker { display: none; }
.activity-summary h2 { display: inline-flex; align-items: center; gap: 0.4rem; }
.activity-summary h2::before { content: "▸" / ""; display: inline-block; transition: transform 0.15s ease; color: var(--brand); }
#site-activity[open] .activity-summary h2::before { transform: rotate(90deg); }
.activity-summary p { margin: 0.2rem 0 0; }
.activity-toolbar { margin: 1rem 0 0.6rem; }
.inline-field { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.inline-field select { padding: 0.35rem 0.5rem; }
.activity-details { font-family: var(--font-mono); font-size: 0.8rem; word-break: break-word; }

.synthesis { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.synthesis-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.synthesis-head h3 { margin: 0; text-transform: none; letter-spacing: normal; font-size: 1rem; color: var(--ink); }
.synthesis-head p { margin: 0.2rem 0 0; font-size: 0.82rem; }
.synthesis-text {
  margin: 0.9rem 0 0;
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--brand);
  background: var(--card-soft);
  border-radius: 0 0.5rem 0.5rem 0;
  font-size: 0.92rem;
}
.synthesis-meta { margin: 0.4rem 0 0; font-size: 0.78rem; }

.delta-worse { color: var(--danger); font-weight: 700; }
.delta-better { color: var(--ok); font-weight: 700; }
tbody tr.is-divergent { background: var(--warn-soft); }

.parameter-grid[hidden] { display: none; }
.parameter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.6rem 1.2rem;
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
}
.parameter-grid dt { color: var(--muted); font-weight: 600; }
.parameter-grid dd { margin: 0; word-break: break-word; }

.rule-list[hidden] { display: none; }
.rule-list { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.rule-row {
  display: grid;
  grid-template-columns: minmax(9rem, 16rem) 1fr auto;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.88rem;
}
.rule-name { font-family: var(--font-mono); word-break: break-all; }
.rule-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rule-count small { color: var(--muted); }
progress.rule-bar {
  appearance: none;
  width: 100%;
  height: 0.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--card-soft);
}
progress.rule-bar::-webkit-progress-bar { background: var(--card-soft); border-radius: 999px; }
progress.rule-bar::-webkit-progress-value { background: var(--brand); border-radius: 999px; }
progress.rule-bar::-moz-progress-bar { background: var(--brand); border-radius: 999px; }

.criticality { font-weight: 800; }
.criticality.ESTAVEL { color: var(--ok); }
.criticality.ALERTA { color: var(--warn); }
.criticality.CRITICA { color: var(--danger); }

.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.error { color: var(--danger); font-weight: 700; }
#form-message:not(:empty) { display: inline-flex; align-items: center; font-size: 0.88rem; }
#form-message.error::before { content: "⚠ "; }

.chip {
  background: var(--card-soft);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--font-mono);
}
.chip-sm { font-size: 0.72rem; padding: 0.1rem 0.5rem; }
/* Problema que escorregou de um ciclo para o seguinte. Usa o par de tokens de alerta já
   verificado para contraste — o aviso precisa se distinguir do estado neutro sem depender só de
   cor: o texto ("arrasta há 2 ciclos") carrega o significado por conta própria. */
.chip-warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn-ink); }
.chip-note { font-size: 0.78rem; cursor: help; text-decoration: underline dotted; text-underline-offset: 2px; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.86rem;
}
.status::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 999px; background: currentColor; flex-shrink: 0; }
.status.ERROR, .status.FAILED, .status.PARTIAL { color: var(--danger); }
.status.RUNNING { color: var(--brand); }
.status.RUNNING::before { animation: pulse 1.4s ease-in-out infinite; }
.status.COMPLETED { color: var(--ok); }
.status.CREATED { color: var(--muted); }
.status.ATIVO { color: var(--ok); }
.status.DESABILITADO { color: var(--muted); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.65rem 0.7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--card-soft); position: sticky; top: 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
tbody tr:hover { background: var(--card-soft); }
td.actions, th:last-child { text-align: right; }
td.actions { white-space: nowrap; vertical-align: middle; }
td.actions > * { margin-left: 0.35rem; vertical-align: middle; }
.empty-state { text-align: center; padding: 2rem 1rem; color: var(--muted); }

.skeleton-row, .skeleton {
  background: linear-gradient(90deg, var(--card-soft) 25%, var(--line) 37%, var(--card-soft) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 0.4rem;
  height: 1.1rem;
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

a { color: var(--brand); }

dialog {
  width: min(900px, 95vw);
  max-height: 88vh;
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
}
dialog[open] {
  display: flex;
  flex-direction: column;
  animation: dialog-in 0.16s ease;
}
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: none; } }
dialog::backdrop { background: rgba(10, 16, 30, 0.55); backdrop-filter: blur(1px); }

.dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.dialog-head h2 { margin: 0.1rem 0 0; font-size: 1.15rem; }
.dialog-head .muted { font-size: 0.85rem; word-break: break-all; margin: 0.2rem 0 0; }
.eyebrow { margin: 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 800; }
.dialog-subline { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; flex-wrap: wrap; }
.dialog-head-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

.tabs { display: flex; gap: 0.25rem; padding: 0.6rem 1.3rem 0; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.tab {
  background: transparent;
  border: none;
  padding: 0.55rem 0.9rem;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
.dialog-body { padding: 1.2rem 1.3rem 1.5rem; overflow: auto; flex: 1; overscroll-behavior: contain; }
.detail-pane[hidden] { display: none; }
.detail-summary { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; font-size: 0.9rem; }
.kv dt { color: var(--muted); font-weight: 600; }
.kv dd { margin: 0; }

.coverage-detail-group { margin-bottom: 1.3rem; }
.coverage-detail-group:last-child { margin-bottom: 0; }
.coverage-detail-group h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.coverage-detail-urls { max-height: 220px; overflow: auto; margin: 0; padding-left: 1.1rem; font-size: 0.85rem; }
.coverage-detail-urls li { margin: 0.2rem 0; }
.coverage-detail-urls code { word-break: break-all; }
.coverage-detail-truncated-note { padding: 0 1.3rem 1.1rem; }

.violation-card {
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  margin-bottom: 0.7rem;
}
.violation-card h4 { margin: 0 0 0.3rem; font-size: 0.98rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.violation-card p { margin: 0.25rem 0; font-size: 0.9rem; }
.impact-badge { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.15rem 0.5rem; border-radius: 999px; }
.violation-card.critical { border-left-color: var(--danger); }
.violation-card.serious { border-left-color: var(--warn); }
.violation-card.moderate { border-left-color: var(--brand); }
.violation-card.minor { border-left-color: var(--muted); }
.impact-badge.critical { background: var(--danger-soft); color: var(--danger); }
.impact-badge.serious { background: var(--warn-soft); color: var(--warn); }
.impact-badge.moderate { background: var(--brand-soft); color: var(--brand); }
.impact-badge.minor, .impact-badge.unknown { background: var(--card-soft); color: var(--muted); }

/* Um elemento por violação: onde está (seletor, copiável) e o que corrigir (resumo do
   axe-core), com o HTML só como referência — o alvo é abrir o editor no lugar certo, não ler
   markup solto. */
.violation-nodes { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.violation-node { padding: 0.6rem 0.7rem; border: 1px solid var(--line); border-radius: 0.45rem; background: var(--card-soft); }
.node-summary { white-space: pre-line; }
.node-selector-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.35rem 0; }
.node-selector {
  flex: 1;
  min-width: 0;
  padding: 0.2rem 0.45rem;
  border-radius: 0.35rem;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}
.node-html {
  margin: 0.35rem 0 0;
  padding: 0.5rem 0.6rem;
  border-radius: 0.35rem;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 0.78rem;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

pre { background: var(--card-soft); border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.9rem; overflow: auto; font-size: 0.82rem; }

.review-list { display: grid; gap: 0.75rem; min-width: 0; overflow-wrap: anywhere; }
.review-list details ul { max-height: 12rem; overflow: auto; padding-inline-start: 1.25rem; }
.review-card {
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  padding: 0.85rem 1rem;
  display: grid;
  gap: 0.6rem;
  background: var(--card-soft);
}
.review-card .edge { font-size: 0.92rem; }
.review-card .edge strong { word-break: break-all; }
.review-card small { color: var(--muted); }
.review-card .review-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.6rem; align-items: end; }
.review-card .review-fields label { font-size: 0.82rem; }
.review-guidance { margin: .75rem 0; padding: .75rem; border-left: 3px solid var(--brand); background: var(--card-soft); }
.review-guidance p { margin: .35rem 0; }
.review-evidence-list { display: grid; gap: .65rem; padding-left: 1.25rem; }
.technical-evidence { margin-top: .35rem; }
.technical-evidence pre { max-width: 100%; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.review-rationale { grid-column: 1 / -1; }
.review-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin: 0; }
.review-summary div { padding: .65rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--card-soft); }
.review-summary dt { color: var(--muted); font-size: .8rem; }
.review-summary dd { margin: .2rem 0 0; font-weight: 700; }

.toasts {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  display: grid;
  gap: 0.5rem;
  z-index: 200;
  max-width: min(360px, 90vw);
}
.toast {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 0.5rem;
  padding: 0.75rem 0.9rem;
  box-shadow: var(--shadow);
  font-size: 0.88rem;
  animation: toast-in 0.18s ease;
}
.toast.error { border-left-color: var(--danger); }
.toast.success { border-left-color: var(--ok); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sr-only { position: absolute; left: -10000px; width: 1px; max-width: 1px; height: 1px; max-height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0; contain: strict; }

/* position: relative faz este contêiner ser o bloco de contenção dos descendentes absolutos —
   sobretudo os .sr-only. Sem isso, um texto só-para-leitor dentro de uma tabela larga resolve
   sua posição estática lá no fim da tabela (fora da viewport) contra o bloco inicial, e passa a
   esticar a rolagem horizontal da página inteira: uma falha de reflow (WCAG 1.4.10) causada por
   um elemento invisível. Contido aqui, ele é recortado junto com o resto do conteúdo largo. */
.scroll { overflow: auto; max-height: 28rem; position: relative; }

@media (max-width: 700px) {
  table { font-size: 0.85rem; }
  th, td { padding: 0.5rem; }
  .app-header { flex-direction: row; }
  .tagline { display: none; }
  td.actions { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Cabeçalho de linha nas tabelas: mantém a aparência de célula comum, mas dá ao leitor de tela
   uma referência para anunciar junto de cada valor ("Cobertura, 4 de 20"). */
tbody th[scope="row"] { font-weight: 400; text-align: left; background: transparent; position: static; text-transform: none; letter-spacing: normal; font-size: inherit; color: inherit; }
tbody th[scope="row"] strong { font-weight: 700; }

.referrers { margin-top: 0.3rem; font-size: 0.8rem; color: var(--muted); }
.referrers summary { cursor: pointer; }
.referrers ul { margin: 0.3rem 0 0; padding-left: 1.1rem; word-break: break-all; }

/* ---------- gráficos SVG ----------
   Geometria vem de atributos de apresentação no próprio SVG (o CSP proíbe estilo inline);
   cor e tipografia ficam aqui, para acompanhar o tema claro/escuro. */
.chart { margin: 0; display: grid; gap: 0.35rem; }
.chart-svg { width: 100%; display: block; }

.chart-grid { display: grid; grid-template-columns: minmax(6rem, auto) minmax(0, 1fr) auto; align-items: center; gap: 0.3rem 0.75rem; font-size: 0.85rem; }
.chart-bar-svg { height: 10px; }
/* preserveAspectRatio="none" faz o SVG esticar; sem altura explícita ele ocuparia a proporção
   da viewBox sobre a largura total e viraria um bloco enorme. */
.chart-stacked .chart-svg { height: 14px; }
.chart-line .chart-svg { height: 72px; max-width: 340px; }
/* Rótulo é o texto humano da regra (help), não o identificador técnico — fonte de texto normal,
   não monoespaçada de código. */
.chart-row-label { overflow-wrap: anywhere; }
.chart-row-value { font-variant-numeric: tabular-nums; font-weight: 700; }

.chart-bar-track { fill: var(--card-soft); }
.chart-bar { fill: var(--brand); }

.chart-line { --chart-line: var(--brand); }
.chart-line-path { stroke: var(--chart-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-point { fill: var(--chart-line); }

.chart-gauge { width: 120px; height: 120px; }
.chart-gauge-track { stroke: var(--card-soft); }
.chart-gauge-value { stroke: var(--brand); }
.chart-gauge-text { fill: var(--ink); font-size: 30px; font-weight: 800; }

.chart-stacked .chart-svg { border-radius: 3px; overflow: hidden; }
.chart-seg { fill: var(--muted); }
.chart-seg.critical { fill: var(--danger); }
.chart-seg.serious { fill: var(--warn); }
.chart-seg.moderate { fill: var(--brand); }
.chart-seg.minor { fill: var(--muted); }

.score-severity { flex-basis: 100%; display: grid; gap: 0.35rem; }
.sev-legend { display: flex; flex-wrap: wrap; gap: 0.15rem 1rem; font-size: 0.78rem; color: var(--muted); }
.sev-chip { display: inline-flex; align-items: center; gap: 0.3rem; }
.sev-dot { width: 0.6rem; height: 0.6rem; border-radius: 2px; background: var(--muted); }
.sev-dot.critical { background: var(--danger); }
.sev-dot.serious { background: var(--warn); }
.sev-dot.moderate { background: var(--brand); }

/* Backlog agrupado por regra: a regra é a unidade de trabalho, a página é o detalhe. */
.backlog-list { display: grid; gap: 0.4rem; }
.backlog-rule { border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.5rem 0.75rem; }
.backlog-rule summary { cursor: pointer; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.backlog-rule ul { margin: 0.5rem 0 0.25rem; padding-left: 1.2rem; font-size: 0.87rem; }
.backlog-rule li { margin: 0.15rem 0; overflow-wrap: anywhere; }
/* O código da regra (color-contrast) é referência para quem vai configurar uma exclusão —
   secundário ao título humano que já aparece no resumo, por isso monoespaçado e discreto. */
.rule-code { margin: 0.35rem 0 0; font-size: 0.78rem; font-family: var(--font-mono); }
/* Um link que é, de fato, um <button> — abre o detalhe da página sem navegar, então não pode
   ser uma <a>; visualmente precisa ler como link mesmo assim, para não parecer texto solto. */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.link-button:hover { text-decoration: none; }
.fan-in { font-size: 0.78rem; font-weight: 400; }

/* ---------- abas principais da execução ----------
   A tela empilhava sete blocos num scroll de quatro telas; cada aba responde a uma pergunta
   diferente e mantém a página no tamanho de uma tela. */
.tabs-main {
  display: flex;
  gap: 0.25rem;
  padding: 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  flex-wrap: nowrap;
}
.tabs-main .tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1rem;
  border-radius: 0.5rem 0.5rem 0 0;
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.tabs-main .tab:hover { color: var(--ink); background: var(--card-soft); }
.tabs-main .tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); background: var(--card); }
.tab-badge {
  min-width: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--card-soft);
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
}
.tabs-main .tab[aria-selected="true"] .tab-badge { background: var(--brand-soft); color: var(--brand); }

.tab-panel { display: grid; gap: 1.25rem; }
.tab-panel[hidden] { display: none; }
.card-head-card { margin-bottom: -0.25rem; }

/* ---------- dica explicativa ---------- */
.hint-trigger {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  vertical-align: middle;
}
.hint-trigger:hover { color: var(--brand); }
.hint-bubble {
  position: fixed;
  margin: 0;
  inset: auto;
  max-width: min(260px, calc(100vw - 1rem));
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: 0.83rem;
  line-height: 1.45;
  font-weight: 400;
  /* O gatilho pode viver dentro de um título com text-transform/letter-spacing/weight
     próprios (ex.: um <h3>) — a dica é um popover independente, não uma continuação visual
     do título, e não deve herdar nada disso. */
  text-transform: none;
  letter-spacing: normal;
}

.icon-sm { width: 0.95em; height: 0.95em; }
.backlog-rule summary .icon { color: currentColor; }

/* ---------- clientes (tenants) ---------- */
.tenant-form { justify-content: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
.tenant-form input { width: 16rem; }

/* ---------- esforço estimado ---------- */
/* `width: 5rem` em todo input comprimia os campos dentro do grid de três colunas — e a regra
   ficava aqui embaixo, vencendo por ordem a que definia largura total lá em cima. */
.effort-controls { margin-bottom: 1rem; }
.effort-measure { border-top: 1px solid var(--line); padding-top: 1rem; }
.effort-headline { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: flex-start; margin-bottom: 1rem; }
.effort-total { display: grid; gap: 0.1rem; }
.effort-total strong { font-size: 2.2rem; line-height: 1; letter-spacing: -0.02em; color: var(--brand); }
.effort-total .muted { font-size: 0.8rem; }
.effort-bands { display: flex; flex-wrap: wrap; gap: 0.4rem 1.8rem; margin: 0; }
.effort-band dt { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.effort-band dd { margin: 0; }
.effort-band strong { font-size: 1.4rem; }
.effort-note { margin: 0.8rem 0 0; font-size: 0.8rem; display: flex; align-items: flex-start; gap: 0.35rem; }

.effort-calibration {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem;
  padding: 0.7rem 0.9rem; margin: 0.8rem 0; border-radius: 0.55rem;
  border-left: 3px solid var(--muted); background: var(--card-soft);
}
.effort-calibration strong { font-size: 1.3rem; }
.effort-calibration.subestimou { border-left-color: var(--danger); }
.effort-calibration.subestimou strong { color: var(--danger); }
.effort-calibration.superestimou { border-left-color: var(--warn); }
.effort-calibration.acertou { border-left-color: var(--ok); }
.effort-calibration.acertou strong { color: var(--ok); }

/* Alcance do achado: quantas páginas uma correção resolve. É o dado que ordena o trabalho, então
   precisa ser legível de relance — e a cor sozinha não basta, o rótulo carrega o significado. */
.scope-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.16rem 0.45rem;
  border-radius: 0.3rem;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.scope-badge.GLOBAL { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.scope-badge.PADRAO { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.scope-badge.PAGINA { color: var(--muted-strong, var(--muted)); background: color-mix(in srgb, var(--muted) 10%, transparent); }

/* Proveniência de um item do backlog (confirmado na revisão manual, ou criado à mão) — mesma
   família visual do scope-badge, cor neutra de marca porque não é nem "bom" nem "ruim". */
.origin-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.16rem 0.45rem;
  border-radius: 0.3rem;
  border: 1px solid currentColor;
  white-space: nowrap;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}

/* Print da página com o elemento em destaque, capturado na coleta — miniatura pequena na tabela
   de achados, abre em tamanho real numa aba nova (link simples, mesma cobertura de autenticação
   que o resto da UI embutida já tem hoje). */
.finding-screenshot-thumb {
  display: block;
  max-width: 160px;
  max-height: 100px;
  margin-top: 0.4rem;
  border-radius: 0.35rem;
  border: 1px solid var(--line);
  object-fit: cover;
}
.finding-screenshot-link { display: inline-block; min-width: 24px; min-height: 24px; margin-top: 0.4rem; }
.finding-screenshot-link .finding-screenshot-thumb { margin-top: 0; }
.referrers > summary { display: flex; align-items: center; min-height: 24px; padding-block: 2px; }

.manual-findings-list { display: grid; gap: 0.6rem; margin-bottom: 1rem; }
.manual-finding {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
}
.manual-finding.is-dismissed { opacity: 0.6; }
.manual-finding-body strong { display: block; }
.manual-finding-dismiss { display: flex; align-items: center; gap: 0.4rem; }
.manual-finding-dismiss input { font-size: 0.85rem; padding: 0.3rem 0.5rem; }

/* Componentes: a peça de trabalho acima da lista de achados. Só aparece quando há composição de
   verdade — um componente com um achado só não acrescenta informação à linha do próprio achado. */
.component-list { margin: 1rem 0 1.25rem; }
.component-list h3 { margin-top: 0; }
.component-items { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.component-items > li {
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 0.5rem;
  padding: 0.7rem 0.9rem;
  background: var(--card-soft);
}
.component-head { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.component-list .muted { margin: 0.25rem 0 0; font-size: 0.86rem; }
.component-findings { margin: 0.45rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; }

.component-failures { width: 100%; border-collapse: collapse; margin: 0.4rem 0 1rem; font-size: 0.88rem; }
.component-failures th, .component-failures td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--line); }
.component-failures thead th { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.component-failures tbody th { font-weight: 600; }

/* Editores locais: o contorno separa claramente uma ação que muda a composição da jornada ou
   realmente navega no roteiro de simples campos descritivos. */
.journey-composition, .plan-test {
  margin: 1rem 0;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  background: var(--card-soft);
}
.composition-pages { display: grid; gap: 0.45rem; padding-left: 1.5rem; }
.composition-pages > li { padding: 0.35rem 0; }
.composition-pages > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .5rem; }
.composition-pages label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .45rem; overflow-wrap: anywhere; }
.composition-search { max-width: 34rem; margin-top: .75rem; }
.composition-actions { display: inline-flex; gap: 0.25rem; margin-left: 0.5rem; }
.plan-test-fields { display: flex; align-items: end; flex-wrap: wrap; gap: 0.75rem; }
.plan-test-fields label { max-width: 9rem; }

/* A grade nunca deve ampliar a página; tabelas e abas rolam dentro da própria região. */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
main, .view, .card, .tab-panel, .field-grid > *, .toolbar > * { min-width: 0; }
.tabs { max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.scroll, .table-wrap { max-width: 100%; overflow: auto; }
.field-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.finding-filters { display: grid; grid-template-columns: minmax(14rem, 2fr) repeat(3, minmax(9rem, 1fr)); gap: .75rem; margin: 1rem 0; }
.finding-filters label, .reviewer-session { display: grid; gap: .35rem; }
.more-filters { grid-column: 1 / -1; }
.more-filters > summary { cursor: pointer; color: var(--brand); font-weight: 700; }
.more-filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin-top: .75rem; }
.wizard-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.wizard-steps button { width: 100%; min-height: 2.75rem; border: 1px solid transparent; border-radius: .6rem; background: transparent; color: var(--ink); text-align: left; padding: .6rem .75rem; }
.reviewer-session { max-width: 26rem; margin: 0 0 1rem; }
.export-menu { position: relative; }
.export-menu summary { list-style: none; cursor: pointer; }
.export-menu summary::-webkit-details-marker { display: none; }
.export-menu-items { position: absolute; right: 0; z-index: 20; display: grid; gap: .35rem; min-width: 14rem; padding: .5rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--card); box-shadow: var(--shadow); }
.export-menu-items .btn { justify-content: flex-start; }
#site-delete { margin-inline-start: .5rem; }
@media (max-width: 760px) { .finding-filters, .wizard-steps { grid-template-columns: 1fr; } .export-menu-items { left: 0; right: auto; } }
.ai-perspective-summary { margin-block: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--card-soft); }
.ai-perspective-summary section + section { margin-top: .75rem; }
.ai-perspective-summary h3 { font-size: 1rem; margin-bottom: .25rem; }

/* Estado da REVISÃO não é gravidade: usa a família violeta reservada à decisão humana, para
   "em revisão" nunca ser lido como erro — vermelho continua exclusivo de risco e destruição. */
.status.review-NAO_INICIADA { background: var(--surface-2); color: var(--muted); }
.status.review-EM_REVISAO { background: color-mix(in srgb, var(--human) 16%, transparent); color: var(--human-ink); }
.status.review-PRONTA { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok-ink); }
.status.review-FINALIZADA { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-ink); }

/* Bloco do score mais recente na home: a pergunta "como está a acessibilidade?" precisa de
   resposta antes dos contadores de fila. O turquesa (--accent) assina a peça, que é o papel da
   cor proprietária: identificar o que só o Estmon mostra. */
.home-latest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: 1rem 1.15rem; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--surface-raised); }
.home-latest-score { display: grid; gap: .2rem; }
.home-latest-name { margin: 0; font-weight: 650; color: var(--ink); }
.home-latest .score-value { font-size: 2.4rem; line-height: 1; letter-spacing: -.02em; color: var(--brand); }
.home-latest .score-scale { font-size: 1rem; color: var(--muted); font-weight: 400; }

/* Níveis do cartão de score: o que decide fica aberto, o detalhamento recolhe. */
.score-level { grid-column: 1 / -1; margin-top: .35rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.score-level > summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); padding: .35rem 0; list-style: none; display: flex; align-items: center; gap: .4rem; min-height: 2.75rem; }
.score-level > summary::-webkit-details-marker { display: none; }
.score-level > summary::before { content: "▸"; color: var(--accent); transition: transform .15s; }
.score-level[open] > summary::before { transform: rotate(90deg); }

/* `display: grid` declarado pelo autor em .field-grid vencia o ocultamento que o navegador
   aplica ao conteúdo de um <details> fechado — os campos continuavam renderizados e medindo
   altura, então recolher um grupo não escondia nada. É por isso que a etapa de opções mostrava
   os vinte campos mesmo com dois grupos fechados. */
details:not([open]) > *:not(summary) { display: none; }

/* Andamento da coleta. A barra só é desenhada quando o denominador é conhecido (roteiro e lista);
   no rastreamento ela não existe, porque qualquer razão ali pode retroceder — ver progressLabel
   em public/lib.js. O turquesa (--accent) assina a peça, como nas demais que só o Estmon tem. */
.progress-card { border-left: 4px solid var(--accent); margin-bottom: 1rem; }
.progress-title { margin: .15rem 0 .3rem; font-size: 1.15rem; }
.progress-detail { margin: 0; }
.progress-track { width: 100%; height: .5rem; margin-top: .8rem; border: 0; border-radius: 999px; background: var(--surface-2); appearance: none; }
.progress-track::-webkit-progress-bar { border-radius: 999px; background: var(--surface-2); }
.progress-track::-webkit-progress-value { border-radius: 999px; background: var(--accent); transition: width .4s ease; }
.progress-track::-moz-progress-bar { border-radius: 999px; background: var(--accent); }
.progress-current { margin: .6rem 0 0; font-family: var(--font-mono); font-size: .8rem; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .progress-track::-webkit-progress-value { transition: none; } }

/* Andamento na linha da listagem: ocupa a coluna do resultado enquanto o score não existe. */
.progress-inline { font-weight: 600; font-size: .95rem; color: var(--accent-ink); }

/* ===== Entrada da equipe e gestão de acessos =====
   A tela de login ocupa a página inteira porque não há nada a fazer antes dela: enquanto não há
   sessão, todo dado do produto responde 401. Mostrar o aplicativo por trás sugeriria o contrário. */
.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.session-chip {
  display: flex; align-items: center; gap: 0.4rem;
  color: #dbe4f3; font-size: 0.85rem;
}
.session-chip .btn { color: #dbe4f3; }

.login-screen {
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 5vw, 3rem);
}
.login-card { width: min(26rem, 100%); display: grid; gap: 0.9rem; }
.login-card .field { display: grid; gap: 0.3rem; font-size: 0.9rem; font-weight: 600; }
.login-card input { width: 100%; }
.form-message.error { color: var(--danger-ink); background: var(--danger-soft); border: 1px solid var(--danger); border-radius: 0.4rem; padding: 0.5rem 0.7rem; margin: 0; font-size: 0.88rem; }

.user-form { display: grid; gap: 0.75rem; margin-bottom: 1.5rem; }
.user-form h3 { margin: 0; }
.user-form-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); align-items: end; }
.user-form-grid .field { display: grid; gap: 0.3rem; font-size: 0.85rem; font-weight: 600; }
.user-form-grid input, .user-form-grid select { width: 100%; }