/* Tokens de DESIGN.md §2–§4. Sem hex fora daqui. */
:root {
  --canvas: #f5f5f7; --surface: #fff; --surface-2: #fafafc;
  --ink: #1d1d1f; --ink-2: #333; --ink-3: #6e6e73;
  --hairline: #e0e0e0; --hairline-strong: #cfcfd4;
  --accent: #0066cc; --on-accent: #fff; --focus: #0071e3;
  --state-ahead: #1b7656; --state-behind: #0062d5; --state-dirty: #9a4d08; --danger: #c50000;
  --radius-btn: 8px; --radius-card: 18px; --radius-pill: 9999px;
  --font: system-ui, -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  --mono: ui-monospace, 'JetBrains Mono', Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #1d1d1f; --surface: #272729; --surface-2: #2a2a2c;
    --ink: #f5f5f7; --ink-2: #ccc; --ink-3: #98989d;
    --hairline: rgba(255,255,255,.10); --hairline-strong: rgba(255,255,255,.18);
    --accent: #2997ff;
    --state-ahead: #59d499; --state-behind: #57c1ff; --state-dirty: #ffc533; --danger: #ff9797;
  }
  :root { color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 15px/1.47 var(--font); letter-spacing: -0.224px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.topo { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: color-mix(in srgb, var(--canvas) 80%, transparent); backdrop-filter: blur(20px); border-bottom: 1px solid var(--hairline); }
.topo h1 { margin: 0; font: 600 21px/1.19 var(--font); }
.topo a { color: var(--ink); text-decoration: none; }
#aviso { color: var(--ink-3); font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main { max-width: 1200px; margin: 0 auto; padding: 16px; }
.painel { display: grid; gap: 16px; margin-bottom: 16px; }
.barras { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.barra { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.barra progress { grid-column: 1 / -1; width: 100%; height: 10px; accent-color: var(--accent); }
.filtros { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(120px, auto) minmax(160px, auto); gap: 8px; }
input, select, textarea { min-height: 44px; width: 100%; border: 1px solid var(--hairline); border-radius: var(--radius-btn); background: var(--surface); color: var(--ink); font: 400 16px/1.4 var(--font); padding: 8px 12px; }
textarea { min-height: 120px; resize: vertical; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.mono { font-family: var(--mono); }

.card { position: relative; min-width: 0; min-height: 118px; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius-card);
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease; }
.card:hover { background: var(--surface-2); border-color: var(--hairline-strong); }
.card:active { transform: scale(0.95); }
.card.velho { border-style: dashed; }
.card.velho .l2, .card.velho .l3 { color: var(--ink-3); }
.l0 { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink-3); }
.eyebrow { font-weight: 600; letter-spacing: .88px; text-transform: uppercase; }
.l1 { margin: 4px 0; font: 600 17px/1.24 var(--font); letter-spacing: -0.374px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.l1 a { color: var(--ink); text-decoration: none; }
.l1 a::after { content: ''; position: absolute; inset: 0; } /* stretched link: card todo clicável, um só foco */
.l2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.linha-maquina { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ramo { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chip { flex-shrink: 0; display: inline-flex; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--chip, var(--ink-3));
  background: color-mix(in srgb, var(--chip, var(--ink-3)) 15%, transparent); }
.chip-adiante { --chip: var(--state-ahead); } .chip-atras { --chip: var(--state-behind); } .chip-divergiu { --chip: var(--danger); }
.chip-ok, .chip-sem-remoto { background: none; padding-left: 0; }
.sujo { color: var(--state-dirty); font-size: 12px; flex-shrink: 0; }
.l3 { margin: 8px 0 0; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:active { transform: none; } }
button, .botao { min-height: 44px; padding: 0 16px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: inherit; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
button[type="submit"], #manter-minha { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
button:active, .botao:active { transform: scale(0.95); }
#entrar, #editar, .topo h1 { flex-shrink: 0; }
.detalhe { max-width: 820px; margin: 0 auto; display: grid; gap: 16px; }
.detalhe h2 { margin: 0; font: 600 28px/1.14 var(--font); letter-spacing: .196px; overflow-wrap: anywhere; }
.detalhe h3 { margin: 8px 0 0; font: 600 21px/1.19 var(--font); }
.lead { font-size: 17px; color: var(--ink-2); }
.ficha { display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px; }
.ficha dt, .muted { color: var(--ink-3); }
.ficha dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.lista { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.form { display: grid; gap: 14px; }
.form label, fieldset { display: grid; gap: 6px; }
fieldset { border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: 12px; }
.check { display: flex !important; grid-template-columns: none; align-items: center; gap: 8px; min-height: 44px; }
.check input { width: auto; min-height: auto; }
.conflito { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid var(--hairline); padding-top: 16px; }
.conflito h3 { grid-column: 1 / -1; color: var(--danger); }
.conflito pre { margin: 0; padding: 12px; background: color-mix(in srgb, var(--state-dirty) 15%, transparent); border-radius: var(--radius-btn); overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .topo { align-items: center; flex-wrap: wrap; }
  .filtros, .ficha, .conflito { grid-template-columns: 1fr; }
}
.diff { width: 100%; border-collapse: collapse; margin: 8px 0 16px; }
.diff th, .diff td { text-align: left; vertical-align: top; padding: 8px; border-bottom: 1px solid var(--hairline); overflow-wrap: anywhere; }
.diff th { color: var(--ink-2); font-weight: 600; }

main a:not(.botao) { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.l1 a, .l1 a:hover { color: var(--ink); text-decoration: none; }
/* Mobile: o aviso ganha linha propria (texto inteiro, sem reticencias) e some quando vazio; 320px cabe em uma linha de botoes. */
@media (max-width: 600px) {
  .topo { flex-wrap: wrap; row-gap: 4px; gap: 8px 12px; }
  #aviso { order: 3; flex-basis: 100%; white-space: normal; }
  #aviso:empty { display: none; }
  #entrar { margin-left: auto; }
}
@media (max-width: 360px) {
  .topo { padding: 12px; column-gap: 8px; }
  .topo button, .topo .botao { padding: 0 12px; }
}