/* run-done v2 base · component primitives
   Every rule scoped under body.v2 — pages without that class
   are untouched and continue to render with v1 main.css/tokens.css.
*/

body.v2 {
  margin: 0;
  background: var(--v2-paper);
  color: var(--v2-ink);
  font-family: var(--v2-font-sans);
  font-size: var(--v2-fs-body);
  line-height: var(--v2-lh-body);
  -webkit-font-smoothing: antialiased;
}

body.v2 * { box-sizing: border-box; }

body.v2 a { color: inherit; text-decoration: none; }

body.v2 .container {
  max-width: var(--v2-container-max);
  margin: 0 auto;
  padding: 0 var(--v2-container-pad);
}

/* Type primitives */
body.v2 .eyebrow {
  font-family: var(--v2-font-mono);
  font-size: var(--v2-fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--v2-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--v2-ink);
  display: inline-block;
}
body.v2 .eyebrow--bracket::before { content: "[ "; color: var(--v2-mute-2); }
body.v2 .eyebrow--bracket::after  { content: " ]"; color: var(--v2-mute-2); }

body.v2 .mono {
  font-family: var(--v2-font-mono);
  letter-spacing: var(--v2-tracking-mono);
}
body.v2 .tabular { font-variant-numeric: tabular-nums; }

body.v2 .h1, body.v2 .h2, body.v2 .h3, body.v2 .h4 {
  font-family: var(--v2-font-sans);
  color: var(--v2-ink);
  margin: 0;
}
body.v2 .h1 {
  font-size: var(--v2-fs-h1);
  line-height: var(--v2-lh-display);
  letter-spacing: var(--v2-tracking-display);
  font-weight: 500;
}
body.v2 .h2 {
  font-size: var(--v2-fs-h2);
  line-height: var(--v2-lh-heading);
  letter-spacing: -0.01em;
  font-weight: 500;
}
body.v2 .h3 {
  font-size: var(--v2-fs-h3);
  line-height: var(--v2-lh-heading);
  font-weight: 500;
}
body.v2 .h4 {
  font-size: var(--v2-fs-h4);
  line-height: var(--v2-lh-heading);
  font-weight: 500;
}
body.v2 .display {
  font-size: var(--v2-fs-display);
  line-height: var(--v2-lh-display);
  letter-spacing: var(--v2-tracking-display);
  font-weight: 500;
}

/* Wordmark — `run-done` lowercase, amber hyphen */
body.v2 .wordmark {
  font-family: var(--v2-font-mono);
  font-weight: 500;
  letter-spacing: 0;
}
body.v2 .wordmark .h { color: var(--v2-accent); }

/* Status block — leading 8px square + mono uppercase, no pill */
body.v2 .status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--v2-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-ink);
}
body.v2 .status::before {
  content: "";
  width: 8px;
  height: 8px;
  background: currentColor;
}
body.v2 .status--ok    { color: var(--v2-teal); }
body.v2 .status--wait  { color: var(--v2-accent); }
body.v2 .status--err   { color: var(--v2-danger); }
body.v2 .status--idle  { color: var(--v2-mute-2); }

/* Hairline divider */
body.v2 .rule {
  border: 0;
  border-top: 1px solid var(--v2-ink);
  margin: 0;
}
body.v2 .rule--soft { border-top-color: var(--v2-rule-soft); }

/* Buttons — solid ink fill, no radius, no shadow */
body.v2 .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--v2-font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 20px;
  border: 1px solid var(--v2-ink);
  background: var(--v2-ink);
  color: var(--v2-paper);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--v2-dur-fast) var(--v2-ease-quiet),
              color var(--v2-dur-fast) var(--v2-ease-quiet);
}
body.v2 .btn:hover {
  background: var(--v2-paper);
  color: var(--v2-ink);
}
body.v2 .btn--ghost {
  background: transparent;
  color: var(--v2-ink);
}
body.v2 .btn--ghost:hover {
  background: var(--v2-ink);
  color: var(--v2-paper);
}
body.v2 .btn--lg {
  font-size: 16px;
  padding: 16px 28px;
}

/* Bracketed inset */
body.v2 .bracket-inset {
  background: var(--v2-bg-bracket);
  padding: var(--v2-s-5);
  border: 0;
}

/* Cards — hairline-bounded, no radius, no shadow */
body.v2 .card {
  border: 1px solid var(--v2-ink);
  padding: var(--v2-s-5);
  background: var(--v2-paper-pure);
}

/* Section — vertical rhythm 96-128px */
body.v2 .section {
  padding-top: var(--v2-s-9);
  padding-bottom: var(--v2-s-9);
}
body.v2 .section--tight {
  padding-top: var(--v2-s-7);
  padding-bottom: var(--v2-s-7);
}

/* Section modifier — inverted (always dark, fixed colors regardless of theme) */
body.v2 .section--final {
  background: #0e0e0c;
  color: #f0eee5;
  padding-top: var(--v2-s-10);
  padding-bottom: var(--v2-s-10);
}
body.v2 .section--final .h1,
body.v2 .section--final .h2,
body.v2 .section--final .h3,
body.v2 .section--final .h4,
body.v2 .section--final .display { color: #f0eee5; }
body.v2 .section--final .eyebrow,
body.v2 .section--final .eyebrow--bracket::before,
body.v2 .section--final .eyebrow--bracket::after { color: #f0eee5; }
body.v2 .section--final .btn {
  background: #f0eee5;
  color: #0e0e0c;
  border-color: #f0eee5;
}
body.v2 .section--final .btn:hover {
  background: transparent;
  color: #f0eee5;
}
body.v2 .section--final .btn--ghost {
  background: transparent;
  color: #f0eee5;
  border-color: #f0eee5;
}
body.v2 .section--final .btn--ghost:hover {
  background: #f0eee5;
  color: #0e0e0c;
}

/* Quote — mono leading mark, no card */
body.v2 .quote {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s-3);
}
body.v2 .quote__mark {
  font-family: var(--v2-font-mono);
  font-size: 32px;
  line-height: 1;
  color: var(--v2-accent);
}
body.v2 .quote__author {
  font-size: var(--v2-fs-body-sm);
  color: var(--v2-muted);
  border-top: 1px solid var(--v2-rule-soft);
  padding-top: var(--v2-s-3);
}
body.v2 .quote__author strong { color: var(--v2-ink); font-weight: 500; }

/* KPI — small label + value pair */
body.v2 .kpi { display: flex; flex-direction: column; gap: var(--v2-s-1); }
body.v2 .kpi__l {
  font-family: var(--v2-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-mute-2);
}
body.v2 .kpi__v {
  font-family: var(--v2-font-mono);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
}
body.v2 .kpi__v.acc { color: var(--v2-accent); }
body.v2 .kpi__v.ok  { color: var(--v2-teal); }
body.v2 .kpi__v.err { color: var(--v2-danger); }

/* Stat — large display number + label */
body.v2 .stat { text-align: left; }
body.v2 .stat__num {
  font-family: var(--v2-font-mono);
  font-size: var(--v2-fs-display);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
  font-weight: 500;
}
body.v2 .stat__label {
  font-family: var(--v2-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-mute-2);
  margin-top: var(--v2-s-2);
}

/* Honest block */
body.v2 .honest {
  border-top: 1px solid var(--v2-ink);
  border-bottom: 1px solid var(--v2-ink);
}
body.v2 .honest__row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--v2-s-4);
  padding: var(--v2-s-5) 0;
  border-bottom: 1px solid var(--v2-rule-soft);
}
body.v2 .honest__row:last-child { border-bottom: 0; }
body.v2 .honest__mark {
  font-family: var(--v2-font-mono);
  font-size: 22px;
  color: var(--v2-mute-2);
}

/* Slot indicator (mono progress label like "01 / 10  ПОДАТКОВІ НАКЛАДНІ") */
body.v2 .slot {
  font-family: var(--v2-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-ink);
}
body.v2 .slot__sep, body.v2 .slot__total { color: var(--v2-mute-2); }

/* Nav (sticky top) */
body.v2 .nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--v2-paper);
  border-bottom: 1px solid var(--v2-ink);
}
body.v2 .nav__inner {
  display: flex;
  align-items: center;
  gap: var(--v2-s-6);
  height: 56px;
}
body.v2 .nav__brand {
  font-family: var(--v2-font-mono);
  font-weight: 500;
  font-size: 16px;
}
body.v2 .nav__brand .h { color: var(--v2-accent); }
body.v2 .nav__links {
  display: flex;
  gap: var(--v2-s-5);
  margin-left: auto;
  font-family: var(--v2-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body.v2 .nav__links a { color: var(--v2-ink); }
body.v2 .nav__links a.is-on { border-bottom: 1px solid var(--v2-ink); padding-bottom: 2px; }

/* Footer */
body.v2 .footer {
  border-top: 1px solid var(--v2-ink);
  padding: var(--v2-s-5) 0;
  font-family: var(--v2-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-muted);
}

/* Hairline-table for reference data (e.g. Supported types) */
body.v2 .htable {
  width: 100%;
  border-top: 1px solid var(--v2-ink);
  border-bottom: 1px solid var(--v2-ink);
  border-collapse: collapse;
}
body.v2 .htable th, body.v2 .htable td {
  padding: var(--v2-s-3) var(--v2-s-4);
  text-align: left;
  border-bottom: 1px solid var(--v2-rule-soft);
  font-variant-numeric: tabular-nums;
}
body.v2 .htable tr:last-child td { border-bottom: 0; }
body.v2 .htable th {
  font-family: var(--v2-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--v2-mute-2);
}

/* ── Nav dropdown v2 ────────────────────────────────────────── */
body.v2 .header {
  background: var(--v2-paper);
  border-bottom: 1px solid var(--v2-rule-soft);
}
body.v2 .header-inner { padding: 0 var(--v2-container-pad, 24px); }
body.v2 .nav-link,
body.v2 .nav-dropdown-toggle {
  font-family: var(--v2-font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--v2-ink);
  text-transform: lowercase;
}
body.v2 .nav-link:hover,
body.v2 .nav-dropdown-toggle:hover { color: var(--v2-accent); }
body.v2 .nav-link.active { color: var(--v2-accent); }
body.v2 .nav-dropdown-menu {
  background: var(--v2-paper-pure);
  border: 1px solid var(--v2-rule-soft);
  padding: 4px 0;
  min-width: 14rem;
}
body.v2 .nav-dropdown-item {
  font-family: var(--v2-font-mono);
  font-size: 13px;
  color: var(--v2-ink);
  text-transform: none;
  letter-spacing: 0;
  padding: 8px 16px;
  min-height: auto;
}
body.v2 .nav-dropdown-item::before { content: none; }
body.v2 .nav-dropdown-item:hover {
  background: var(--v2-bg-bracket);
  color: var(--v2-ink);
}
body.v2 .nav-dropdown-item.active {
  color: var(--v2-accent);
  font-weight: 600;
}
body.v2 .header-lang {
  font-family: var(--v2-font-mono);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--v2-muted);
}
body.v2 .header-auth-toggle {
  color: var(--v2-muted);
}
body.v2 .nav-hamburger span {
  background: var(--v2-ink);
}

/* ── Background patterns (from DS background-study) ────────── */

/* Ledger lines — horizontal hairlines + amber left margin rule.
   Reads as "accounting register paper". Apply to hero or sections
   on tax/accounting pages. */
body.v2 .bg-ledger {
  position: relative;
}
body.v2 .bg-ledger::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to bottom, transparent 27px, rgba(245,244,238,0.045) 27px, rgba(245,244,238,0.045) 28px),
    linear-gradient(to right, transparent 71px, rgba(231,132,16,0.10) 71px, rgba(231,132,16,0.10) 72px, transparent 72px, transparent 75px, rgba(231,132,16,0.10) 75px, rgba(231,132,16,0.10) 76px, transparent 76px);
  background-size: 100% 28px, 100% 100%;
  pointer-events: none;
  z-index: 0;
}
body.v2 .bg-ledger > * { position: relative; z-index: 1; }

/* Form-field grid — декларація з графами. */
body.v2 .bg-form {
  position: relative;
}
body.v2 .bg-form::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to bottom, transparent 31px, rgba(245,244,238,0.06) 31px, rgba(245,244,238,0.06) 32px),
    repeating-linear-gradient(to right,
      transparent 0, transparent 119px,
      rgba(245,244,238,0.05) 119px, rgba(245,244,238,0.05) 120px,
      transparent 120px, transparent 319px,
      rgba(245,244,238,0.05) 319px, rgba(245,244,238,0.05) 320px,
      transparent 320px, transparent 519px,
      rgba(245,244,238,0.05) 519px, rgba(245,244,238,0.05) 520px,
      transparent 520px, transparent 600px);
  background-size: 100% 32px, 600px 100%;
  pointer-events: none;
  z-index: 0;
}
body.v2 .bg-form > * { position: relative; z-index: 1; }

/* Light theme adjustments — darker lines on light paper */
[data-theme="light"] body.v2 .bg-ledger::before {
  background-image:
    linear-gradient(to bottom, transparent 27px, rgba(14,14,12,0.06) 27px, rgba(14,14,12,0.06) 28px),
    linear-gradient(to right, transparent 71px, rgba(231,132,16,0.12) 71px, rgba(231,132,16,0.12) 72px, transparent 72px, transparent 75px, rgba(231,132,16,0.12) 75px, rgba(231,132,16,0.12) 76px, transparent 76px);
}
[data-theme="light"] body.v2 .bg-form::before {
  background-image:
    linear-gradient(to bottom, transparent 31px, rgba(14,14,12,0.07) 31px, rgba(14,14,12,0.07) 32px),
    repeating-linear-gradient(to right,
      transparent 0, transparent 119px,
      rgba(14,14,12,0.06) 119px, rgba(14,14,12,0.06) 120px,
      transparent 120px, transparent 319px,
      rgba(14,14,12,0.06) 319px, rgba(14,14,12,0.06) 320px,
      transparent 320px, transparent 519px,
      rgba(14,14,12,0.06) 519px, rgba(14,14,12,0.06) 520px,
      transparent 520px, transparent 600px);
}