/* Countaline shared base v1.0: reset, type, links, buttons, forms, focus, layout helpers.
   Used by landing pages, legal pages and the demo (UI-09). Uses tokens.css only. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { line-height: var(--lh-tight); margin: 0 0 var(--sp-4); text-wrap: balance; }
h1 { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 600; }
h2 { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600; }
h3 { font-size: var(--fs-lg); font-weight: 650; }
p, ul, ol { margin: 0 0 var(--sp-4); }
small, .small { font-size: var(--fs-sm); }
.muted { color: var(--text-muted); }
a { color: var(--primary); text-underline-offset: 3px; }
a:hover { color: var(--primary-hover); }

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

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px;
  background: var(--surface); color: var(--text); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm); z-index: 100;
}
.skip-link:focus { top: var(--sp-4); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-4); }
@media (min-width: 768px) { .container { padding-inline: var(--sp-6); } }
.prose { max-width: var(--measure); }

/* Buttons: one primary action per screen (UI-06) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); min-width: var(--tap);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
  border: 1px solid var(--border-control);
  background: var(--surface); color: var(--text);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--surface-2); color: var(--text); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
.btn-danger { background: var(--surface); border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger-bg); color: var(--danger); }
.btn-lg { font-size: var(--fs-lg); padding: var(--sp-4) var(--sp-6); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* Forms */
label { display: block; font-weight: 600; margin-bottom: var(--sp-1); }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-control); border-radius: var(--radius-sm);
  min-height: var(--tap); padding: var(--sp-2) var(--sp-3); width: 100%;
}
.hint { color: var(--text-muted); font-size: var(--fs-sm); }

/* Money (UI-05): right-aligned, tabular figures */
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Status badges: never colour alone (UI-08) — always include text */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 2px var(--sp-2); border-radius: 999px; font-size: var(--fs-sm); font-weight: 600;
  border: 1px solid currentColor;
}
.badge-success { color: var(--success); background: var(--success-bg); }
.badge-warning { color: var(--warning); background: var(--warning-bg); }
.badge-danger { color: var(--danger); background: var(--danger-bg); }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow);
}

table { border-collapse: collapse; width: 100%; }
th, td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { font-weight: 650; }

.logo { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text); text-decoration: none; font-weight: 700; font-size: var(--fs-lg); }
.logo svg { width: 32px; height: 32px; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }