/* ==========================================================================
   Fundações
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sign);
  font-size: var(--fs-15);
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* Placa: títulos e dados */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-sign);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.005em;
}
h1 { font-size: var(--fs-34); }
h2 { font-size: var(--fs-20); }
h3 { font-size: var(--fs-17); }

/* Leitura: prosa */
p, .prose, .note {
  margin: 0;
  font-family: var(--font-text);
  line-height: 1.6;
  max-width: var(--measure);
}
.prose--wide { max-width: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

a { color: var(--forest); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--forest-2); }

:focus { outline: none; }
:focus-visible { box-shadow: var(--focus); border-radius: var(--r-plate); }

::selection { background: var(--brass-3); color: var(--ink); }

/* --- Números: sempre tabulares ---------------------------------------- */
.num, .tl-row__time, .data-cell__value, .leg__num, .money, time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- Utilitários ------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.baseline { align-items: baseline; }
.start { align-items: flex-start; }
.g1 { gap: var(--s1); } .g2 { gap: var(--s2); } .g3 { gap: var(--s3); }
.g4 { gap: var(--s4); } .g5 { gap: var(--s5); } .g6 { gap: var(--s6); }
.grow { flex: 1 1 auto; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mono { font-family: var(--font-mono); font-size: var(--fs-12); }

/* Rótulo curto — caixa baixa, sem tracking */
.label {
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--text-3);
}
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.dim   { color: var(--text-4); }
.t13 { font-size: var(--fs-13); }
.t12 { font-size: var(--fs-12); }
.sign { font-family: var(--font-sign); }
.text { font-family: var(--font-text); }

hr.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Régua vertical entre dados na mesma linha */
.railsep > * + *::before {
  content: "";
  display: inline-block;
  width: 1px; height: .85em;
  margin-right: var(--s2);
  vertical-align: -0.08em;
  background: var(--line-2);
}
.railsep { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); }

/* --- Valor não confirmado --------------------------------------------- */
.tbc {
  font-family: var(--font-text);
  font-style: italic;
  color: var(--text-3);
  border-bottom: 1px dotted var(--line-2);
}

/* --- Abertura --------------------------------------------------------- */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  padding: 10px 14px; border-radius: var(--r-plate);
  background: var(--forest); color: var(--on-forest);
  transform: translateY(-180%); transition: transform var(--t2) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

.boot {
  min-height: 100dvh; display: grid; place-content: center; justify-items: center;
  gap: var(--s4); background: var(--bg);
}
.boot__mark {
  width: 34px; height: 34px; border: 1px solid var(--rail);
  border-top-color: var(--forest); border-radius: 50%;
  animation: spin 1s linear infinite;
}
.boot__text { color: var(--text-3); font-size: var(--fs-13); }
@keyframes spin { to { transform: rotate(360deg); } }