:root {
  --c-accent: #26467A;
  --c-bg: #EDF0E8;
  --c-border: #D3D9CB;
  --c-error: #B0392A;
  --c-focus: #26467A;
  --c-link: #26467A;
  --c-primary: #26467A;
  --c-primary-contrast: #ffffff;
  --c-success: #2E7D52;
  --c-surface: #F8FAF4;
  --c-surface-alt: #F1F4EC;
  --c-text: #1B241F;
  --c-text-muted: #59645C;
  --c-warning: #8A6116;
  --font-heading: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, 'Segoe UI', system-ui, Roboto, Helvetica, Arial, sans-serif;
  --h-weight: 600;
  --h-tracking: 0.2px;
  --h-transform: none;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(20, 24, 18, 0.07), 0 6px 20px rgba(20, 24, 18, 0.06);
  --space: 1.1rem;
}
/* CalcKit design system core.
   Theme tokens (colors, fonts, radius, shadow, spacing density) are injected
   as :root custom properties ahead of this file; structural variants come as
   body[data-header] / body[data-accent]. No language, no brand, no color
   literals for brand surfaces in here — that is all per-site theme data. */

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
}
img, svg { max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--h-weight);
  letter-spacing: var(--h-tracking);
  text-transform: var(--h-transform);
  line-height: 1.2;
  margin: 0 0 calc(var(--space) * 0.6);
  color: var(--c-text);
}
h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); }
h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); margin-top: calc(var(--space) * 1.4); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 var(--space); }
a { color: var(--c-link); }
a:hover { text-decoration-thickness: 2px; }
ul, ol { padding-left: 1.4em; margin: 0 0 var(--space); }
hr { border: 0; border-top: 1px solid var(--c-border); margin: calc(var(--space) * 1.5) 0; }
code {
  background: var(--c-surface-alt);
  padding: 0.1em 0.35em;
  border-radius: calc(var(--radius) * 0.5);
  font-size: 0.92em;
}
blockquote {
  margin: 0 0 var(--space);
  padding: calc(var(--space) * 0.5) var(--space);
  border-left: 4px solid var(--c-accent);
  background: var(--c-surface-alt);
  border-radius: var(--radius);
}

/* ---------- a11y ---------- */
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 2px;
}
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--c-primary);
  color: var(--c-primary-contrast);
  padding: 0.6em 1em;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- header ---------- */
.site-header { background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.site-header__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: calc(var(--space) * 0.7) var(--space);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--space) * 0.7);
  justify-content: space-between;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  text-decoration: none;
  color: var(--c-text);
}
.brand svg { width: 2rem; height: 2rem; flex: none; }
.brand__name {
  font-family: var(--font-heading);
  font-weight: var(--h-weight);
  font-size: 1.25rem;
}
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--space) * 0.9); }
.site-nav a { text-decoration: none; font-weight: 600; color: var(--c-text); }
.site-nav a:hover { color: var(--c-link); text-decoration: underline; }

/* Every calculator is in the menu (KIT-0006): direct items on wide screens,
   a native <details> group on narrow ones. Only one of the two variants is
   displayed, so the hidden one is out of the tab order + a11y tree. */
.site-nav__calcs { display: none; }
.site-nav__group { position: relative; }
.site-nav__group summary { cursor: pointer; font-weight: 600; }
.site-nav__group ul {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  z-index: 40;
  min-width: 14rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
.site-nav__group ul a {
  display: block;
  padding: 0.5em 0.75em;
  border-radius: calc(var(--radius) * 0.5);
  color: var(--c-text);
}
.site-nav__group ul a:hover { background: var(--c-surface-alt); color: var(--c-link); text-decoration: none; }
@media (min-width: 48rem) {
  .site-nav__calcs { display: contents; }
  .site-nav__group { display: none; }
}

/* header structural variants */
body[data-header="banner"] .site-header {
  background: var(--c-primary);
  border-bottom: none;
}
body[data-header="banner"] .site-header :is(.brand, .site-nav a, .site-nav__group summary) {
  color: var(--c-primary-contrast);
}
body[data-header="banner"] .site-header .site-nav__group ul a { color: var(--c-text); }
body[data-header="banner"] .site-header .brand svg { color: var(--c-primary-contrast); }
body[data-header="compact"] .site-header__inner { padding-top: 0.5rem; padding-bottom: 0.5rem; }
body[data-header="compact"] .brand__name { font-size: 1.05rem; }
body[data-header="split"] .site-header__inner {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
body[data-header="split"] .site-header { border-bottom: 3px solid var(--c-accent); }

.accent-divider { display: block; width: 100%; height: 2.6rem; }
body[data-header="banner"] .accent-divider { background: var(--c-primary); }
.accent-divider--dots {
  height: 0.9rem;
  background-image: radial-gradient(var(--c-accent) 22%, transparent 23%);
  background-size: 0.9rem 0.9rem;
  background-position: 0 0.2rem;
  background-repeat: repeat-x;
}

/* ---------- layout ----------
   Every page is main column + rail (KIT-0006 amendment). Narrow screens:
   single column, the rail stacks below main (its digest stays reachable; the
   rail AD slot is desktop-only). From 64rem: two-column grid, centered —
   no more mobile-width column pinned left on a wide viewport. */
.layout {
  max-width: 72rem;
  margin: 0 auto;
  padding: calc(var(--space) * 1.2) var(--space) calc(var(--space) * 2);
}
main { min-width: 0; }
.rail { min-width: 0; margin-top: calc(var(--space) * 1.6); }
.ad-slot--rail { display: none; }
@media (min-width: 64rem) {
  .layout--rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: calc(var(--space) * 2);
    align-items: start;
  }
  .rail { margin-top: 0; }
  .ad-slot--rail { display: block; }
}
.lead { font-size: 1.15rem; color: var(--c-text-muted); max-width: 40rem; }

/* page head: product-header rhythm, not document-title rhythm */
.page-head { margin-bottom: var(--space); }
.page-head h1 { margin-bottom: 0.25em; }
.page-head .lead { margin: 0; }
.hero { padding: calc(var(--space) * 0.4) 0 0; }

/* single highlighted warning line above the tool (site-configurable) */
.calc-warning {
  max-width: 40rem;
  margin: 0.8em 0 0;
  padding: 0.55em 0.9em;
  font-weight: 600;
  font-size: 0.97rem;
  background: var(--c-surface);
  border: 1px solid var(--c-warning);
  border-left-width: 5px;
  border-radius: var(--radius);
}

/* ---------- breadcrumbs ---------- */
.breadcrumbs { font-size: 0.88rem; margin-bottom: var(--space); }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.35em; }
.breadcrumbs li + li::before { content: "›"; margin-right: 0.35em; color: var(--c-text-muted); }
.breadcrumbs [aria-current="page"] { color: var(--c-text-muted); }

/* ---------- tool grid (home, KIT-0006) ----------
   Compact tool cards, not article cards: icon, short name, one-line benefit,
   visible action. Narrow: full-width horizontal rows (thumb-friendly list).
   From 40rem: 2-up vertical cards; from 64rem: one row of 4. */
.tool-grid { display: grid; gap: calc(var(--space) * 0.7); margin-bottom: var(--space); }
.tool-card {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: calc(var(--space) * 0.7) var(--space);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--c-text);
}
.tool-card:hover { border-color: var(--c-primary); }
.tool-card:hover .tool-card__name { color: var(--c-link); text-decoration: underline; }
.tool-card__icon { flex: none; width: 2.1rem; height: 2.1rem; color: var(--c-primary); }
.tool-card__icon svg { width: 100%; height: 100%; }
.tool-card__body { min-width: 0; }
.tool-card__name {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--h-weight);
  font-size: 1.06rem;
  line-height: 1.25;
}
.tool-card__benefit {
  display: block;
  margin-top: 0.15em;
  color: var(--c-text-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}
.tool-card__cta {
  flex: none;
  margin-left: auto;
  color: var(--c-primary);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}
.tool-card__arrow { margin-left: 0.3em; }
@media (min-width: 40rem) {
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .tool-card { flex-direction: column; align-items: flex-start; gap: 0.55em; padding: var(--space); }
  .tool-card__cta { margin-left: 0; margin-top: auto; }
}
@media (min-width: 64rem) {
  .tool-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- calculator ---------- */
.calc-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: calc(var(--space) * 1.2);
  margin: var(--space) 0;
}
.field { margin-bottom: var(--space); }
.field > label, .field--radio legend {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35em;
}
.field__control { display: flex; align-items: center; gap: 0.5em; max-width: 20rem; }
input[type="text"], select {
  font: inherit;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: calc(var(--radius) * 0.75);
  padding: 0.55em 0.7em;
  width: 100%;
  min-height: 44px;
}
input[type="text"]:focus-visible, select:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 1px;
  border-color: var(--c-focus);
}
input[aria-invalid="true"] { border-color: var(--c-error); }
.field__unit { color: var(--c-text-muted); white-space: nowrap; }
.field__help { font-size: 0.88rem; color: var(--c-text-muted); margin: 0.35em 0 0; }
.field__error { color: var(--c-error); font-weight: 600; margin: 0.35em 0 0; }
.field--checkbox { display: grid; grid-template-columns: auto 1fr; gap: 0.55em; align-items: start; }
.field--checkbox label { font-weight: 600; margin: 0; }
.field--checkbox .field__help, .field--checkbox .field__error { grid-column: 2; }
input[type="checkbox"], input[type="radio"] {
  width: 1.35rem; height: 1.35rem;
  margin: 0.2rem 0 0;
  accent-color: var(--c-primary);
}
.field--radio { border: 0; padding: 0; margin: 0 0 var(--space); }
.radio { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.35em; }
.radio label { font-weight: 400; }
.btn {
  font: inherit;
  font-weight: 700;
  background: var(--c-primary);
  color: var(--c-primary-contrast);
  border: none;
  border-radius: calc(var(--radius) * 0.75);
  padding: 0.7em 1.5em;
  min-height: 44px;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }

/* results — the live region exists from first paint (role="status" for
   screen-reader announcements). The result rows ship hidden and appear on
   the first calculation (user-initiated, so revealing them is not CLS);
   until then the area is one compact note line (KIT-0006). */
.results {
  margin-top: calc(var(--space) * 1.2);
  border-top: 2px solid var(--c-border);
  padding-top: var(--space);
}
.results h2 { margin-top: 0; }
#calc-live dl { margin: 0; }
.result {
  display: flex;
  justify-content: space-between;
  gap: var(--space);
  padding: 0.45em 0;
  border-bottom: 1px dashed var(--c-border);
}
.result dt { margin: 0; }
.result dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.result--primary {
  background: var(--c-surface-alt);
  border-bottom: none;
  border-radius: var(--radius);
  padding: 0.6em 0.8em;
  font-size: 1.12rem;
}
.result--primary dd { color: var(--c-primary); font-weight: 800; }
.results-note { color: var(--c-text-muted); font-size: 0.92rem; }

/* ---------- verdict line (KIT-0011) ----------
   The declarative plain-language decision line for decision tools. It lives
   inside #calc-live (role="status") so it is announced, ships hidden and
   reveals with the first calculation exactly like the result rows
   (user-initiated — no CLS). The number rows stay canonical; the verdict is
   the one-sentence reading of them, rendered as plain text (never HTML).
   Status TOKENS are declared per tool in definition.json; the kit ships the
   conventional trio ok / warn / bad, mapped to the theme's semantic color
   roles. A tool that declares other tokens styles them in its own custom.css. */
.calc-verdict {
  margin: 0 0 var(--space);
  padding: 0.7em 0.9em;
  border-left: 4px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface-alt);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.4;
}
.calc-verdict--ok { border-left-color: var(--c-success); }
.calc-verdict--warn { border-left-color: var(--c-warning); }
.calc-verdict--bad { border-left-color: var(--c-error); }

/* ---------- results chart (KIT-0008) ----------
   Supplementary inline SVG under the result rows. Hidden until the first
   calculation (user-initiated reveal, like the result rows — no CLS); once
   visible its geometry is fixed by the SVG viewBox ratio, so redraws on
   recalculation can never shift layout. All colors are theme tokens: each
   site's charts wear its own identity. Restraint is the aesthetic — one
   baseline, direct labels, no gridlines, no legend. */
.calc-chart { margin: var(--space) 0 0; }
.calc-chart svg { display: block; width: 100%; height: auto; }
.chart-axis { stroke: var(--c-border); stroke-width: 1.5; }
.chart-area { stroke: none; }
.chart-area--0 { fill: var(--c-primary); fill-opacity: 0.28; }
.chart-area--1 { fill: var(--c-accent); fill-opacity: 0.38; }
.chart-area--2 { fill: var(--c-success); fill-opacity: 0.30; }
.chart-area--3 { fill: var(--c-link); fill-opacity: 0.28; }
.chart-edge { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-edge--0, .chart-dot--0 { stroke: var(--c-primary); }
.chart-edge--1, .chart-dot--1 { stroke: var(--c-accent); }
.chart-edge--2, .chart-dot--2 { stroke: var(--c-success); }
.chart-edge--3, .chart-dot--3 { stroke: var(--c-link); }
.chart-dot { fill: var(--c-surface); stroke-width: 2.5; }
.chart-label {
  font-family: var(--font-body);
  font-size: 14px;           /* SVG user units: scales with the chart */
  font-weight: 600;
  fill: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.chart-tick {
  font-family: var(--font-body);
  font-size: 12.5px;
  fill: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- sections ---------- */
.worked-example, .faq, .sources, .calc-changelog, .how-it-works {
  margin-top: calc(var(--space) * 1.4);
}
.worked-example li { margin-bottom: 0.4em; }

/* generic collapsible (how-it-works, worked example — KIT-0006): all text
   stays in the served DOM, just collapsed by default */
.collapsible {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.collapsible > summary {
  cursor: pointer;
  padding: 0.8em 1em;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.02rem;
}
.collapsible[open] > summary { border-bottom: 1px solid var(--c-border); }
.collapsible__body { padding: 0.9em 1.1em 0.1em; }
.faq details {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  margin-bottom: 0.6rem;
  padding: 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.75em 1em;
  border-radius: var(--radius);
}
.faq details[open] summary { border-bottom: 1px solid var(--c-border); }
.faq details p { padding: 0.75em 1em; margin: 0; }
.sources ul { list-style: none; padding: 0; }
.sources li { margin-bottom: 0.6em; }
.source__verified { color: var(--c-text-muted); font-size: 0.88rem; }
.disclaimer {
  margin-top: calc(var(--space) * 1.4);
  font-size: 0.88rem;
  color: var(--c-text-muted);
  border-top: 1px solid var(--c-border);
  padding-top: var(--space);
}

/* ---------- changelog ---------- */
.changelog-list { list-style: none; padding: 0; }
.changelog-list li {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: calc(var(--space) * 0.8) var(--space);
  margin-bottom: 0.8rem;
}
.changelog-list time, .entry-meta time { display: block; font-size: 0.88rem; color: var(--c-text-muted); }
.changelog-list a { font-weight: 700; }
.changelog-list p { margin: 0.3em 0 0; }
.calc-changelog ul { list-style: none; padding: 0; }
.calc-changelog time { color: var(--c-text-muted); font-size: 0.88rem; margin-right: 0.5em; }
.related-calc { font-weight: 600; }

/* ---------- regelhistorik (rule-change timeline, KIT-0010) ----------
   A dated list of rule changes on their REAL effective timeline. Each item
   leads with the effective date (the differentiator vs the changelog, which
   is ordered by publish date), then the change and the tool it affects. */
.regelhistorik-list { list-style: none; padding: 0; margin: 0; }
.regelhistorik__item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  border-left: 4px solid var(--c-primary);
  padding: calc(var(--space) * 0.8) var(--space);
  margin-bottom: 0.8rem;
}
.regelhistorik__effective {
  margin: 0 0 0.15em;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
}
.regelhistorik__eff-label { font-weight: 700; }
.regelhistorik__effective time { font-weight: 700; color: var(--c-text); }
.regelhistorik__title { display: inline-block; font-weight: 700; margin: 0.1em 0; }
.regelhistorik__summary { margin: 0.25em 0 0; }
.regelhistorik__affects { margin: 0.4em 0 0; font-size: 0.9rem; color: var(--c-text-muted); }
.regelhistorik-empty { color: var(--c-text-muted); }

/* ---------- ad slots ----------
   Slots RESERVE their space (fixed min-height) and are always siblings of
   content sections — never overlays, never inside the form or results. An
   empty slot keeps its reserved box so consent choices cause no layout shift. */
.ad-slot { margin: calc(var(--space) * 1.2) 0; }
.ad-slot__label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
  margin-bottom: 0.25rem;
}
.ad-slot__frame {
  min-height: 250px;
  border-radius: var(--radius);
  background: var(--c-surface-alt);
  /* outline, not border: zero layout impact, so consent choices and demo
     fills can never change slot geometry (CLS 0 by construction) */
  outline: 1px dashed var(--c-border);
  outline-offset: -1px;
}
.ad-slot--rail .ad-slot__frame { min-height: 600px; }
@media (min-width: 64rem) {
  .ad-slot--rail { position: sticky; top: var(--space); margin: 0; }
}
/* Quiet posture (KIT-0006 amendment): while the ad client id is a
   placeholder, no ad can ever load — the slot renders small and tidy instead
   of a full reserved void. Static from first paint, so CLS stays 0; a real
   client id restores the reserved geometry above automatically. */
.ad-slot--quiet .ad-slot__frame { min-height: 4.5rem; }
.ad-slot--quiet .ad-slot__demo { padding: 0.6em 1em; font-size: 0.8rem; }
.ad-slot__demo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: inherit;
  padding: var(--space);
  color: var(--c-text-muted);
  font-size: 0.88rem;
  border-radius: var(--radius);
}

/* ---------- rail (updates digest + desktop ad) ---------- */
.rail-updates {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: calc(var(--space) * 0.8) var(--space);
}
.rail-updates h2 { margin: 0 0 0.6em; font-size: 1.02rem; }
.rail-updates ul { list-style: none; padding: 0; margin: 0 0 0.6em; }
.rail-updates li { margin-bottom: 0.55em; font-size: 0.92rem; line-height: 1.4; }
.rail-updates li:last-child { margin-bottom: 0; }
.rail-updates time { display: block; font-size: 0.8rem; color: var(--c-text-muted); }
.rail-updates p { margin: 0.6em 0 0; font-size: 0.92rem; }
.rail .ad-slot { margin-top: var(--space); }
.rail > :first-child { margin-top: 0; }

/* ---------- consent stub banner (dev/demo only) ---------- */
.tcf-stub {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  background: var(--c-surface);
  border-top: 2px solid var(--c-primary);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  padding: var(--space);
}
.tcf-stub__inner { max-width: 46rem; margin: 0 auto; }
.tcf-stub h2 { margin: 0 0 0.3em; font-size: 1.05rem; }
.tcf-stub p { margin: 0 0 0.8em; font-size: 0.95rem; }
.tcf-stub__actions { display: flex; gap: 0.7em; flex-wrap: wrap; }
.btn--ghost {
  background: transparent;
  color: var(--c-text);
  border: 1.5px solid var(--c-border);
}

/* ---------- footer ---------- */
.site-footer {
  margin-top: calc(var(--space) * 2);
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
}
.site-footer__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: calc(var(--space) * 1.2) var(--space);
}
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--space); margin-bottom: calc(var(--space) * 0.6); }
.footer-nav a { color: var(--c-text); }
.footer-legal, .footer-note { font-size: 0.88rem; color: var(--c-text-muted); margin: 0 0 0.3em; }

/* site custom.css */
/* Site CSS. .kt = near-1:1 reference port (SITE-0002; deviations:
   design/README.md). Ships raw in the 100 KB budget. */

/* nav: core sections direct at every width (SITE-0013) */
.site-nav__calcs { display: contents; }
.site-nav__group { display: none; }

/* -- reference palette, exact values (light) -- */
.kt {
  --paper: #EDF0E8; --card: #F8FAF4; --card-2: #F1F4EC;
  --ink: #1B241F; --ink-soft: #59645C;
  --rule: #D3D9CB; --rule-strong: #B4BCA6;
  --accent: #26467A; --accent-soft: #E2E8F2;
  --good: #2E7D52; --good-soft: #DEEEE4;
  --bad: #B0392A; --bad-soft: #F4DED9;
  --kt-shadow: 0 1px 2px rgba(27, 36, 31, .06), 0 10px 28px rgba(27, 36, 31, .07);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  font-family: var(--sans);
  line-height: 1.5;
  color: var(--ink);
}

/* reference dark palette (data-theme override blocks were dead CSS,
   removed SITE-0014) */
@media (prefers-color-scheme: dark) {
  .kt {
    --paper: #141813; --card: #1C211A; --card-2: #232921;
    --ink: #E7EBE1; --ink-soft: #98A091;
    --rule: #2C332A; --rule-strong: #3C4539;
    --accent: #88A8E2; --accent-soft: #22304A;
    --good: #63BA8C; --good-soft: #1E3327;
    --bad: #E07C6C; --bad-soft: #3A241F;
    --kt-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
  }
}

/* site-wide dark mode: kit tokens on the reference palette */
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #141813; --c-surface: #1C211A; --c-surface-alt: #232921;
    --c-text: #E7EBE1; --c-text-muted: #98A091;
    --c-primary: #88A8E2; --c-primary-contrast: #141813;
    --c-accent: #88A8E2; --c-border: #2C332A; --c-focus: #88A8E2;
    --c-link: #88A8E2; --c-error: #E07C6C; --c-success: #63BA8C;
    --c-warning: #D9B36A;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
  }
}

/* full mount: full content width — the Fusklapp is the rail (SITE-0012) */
.layout--rail:has(.kt--full) { display: block; }
.layout--rail:has(.kt--full) > .rail { display: none; }

/* kit overrides; [hidden] must always win */
.kt .brand { display: block; }
.kt [hidden] { display: none !important; }

/* -- header block (reference header.top) -- */
.kt .top {
  display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end;
  justify-content: space-between; padding-bottom: 18px;
  border-bottom: 2px solid var(--rule-strong); margin-bottom: 26px;
}
/* brand heading (h2 on the merged home) */
.kt .brand .kt-title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  margin: 0; letter-spacing: .2px; text-wrap: balance; color: var(--ink);
}
.kt .brand p { margin: .28rem 0 0; color: var(--ink-soft); font-size: .86rem; letter-spacing: .02em; }
.kt .score { display: flex; gap: 10px; flex-wrap: wrap; }
.kt .chip {
  font-family: var(--mono); font-size: .82rem; background: var(--card);
  border: 1px solid var(--rule); border-radius: 8px; padding: 8px 12px;
  display: flex; flex-direction: column; align-items: center; min-width: 74px;
  box-shadow: var(--kt-shadow);
}
.kt .chip b { font-size: 1.15rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kt .chip span { font-size: .62rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-soft); margin-top: 2px; }

/* -- layout (reference .grid) -- */
.kt .grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 900px) { .kt .grid { grid-template-columns: 1.65fr 1fr; align-items: start; } }
.kt .kt-col { min-width: 0; }

.kt .card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 14px; box-shadow: var(--kt-shadow);
}

/* -- verifikat / working slip -- */
.kt .slip { padding: clamp(18px, 2.4vw, 28px); }
.kt .eyebrow {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent); font-weight: 700; margin: 0 0 8px;
}
.kt .prompt {
  font-family: var(--serif); font-size: clamp(1.1rem, 2.1vw, 1.34rem);
  line-height: 1.45; margin: 0 0 4px; text-wrap: pretty; min-height: 2.6em;
  color: var(--ink);
}
.kt .prompt .fig {
  font-family: var(--mono); font-weight: 600; white-space: nowrap;
  border-bottom: 2px solid var(--accent-soft); padding-bottom: 1px;
}
.kt .settings {
  display: flex; flex-wrap: wrap; gap: 14px 20px; margin: 14px 0 6px;
  padding: 12px 0; border-top: 1px dashed var(--rule); border-bottom: 1px dashed var(--rule);
}
.kt .toggle {
  display: inline-flex; align-items: center; gap: 8px; font-size: .82rem;
  color: var(--ink-soft); cursor: pointer; user-select: none;
}
.kt .toggle input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; margin: 0; }
.kt .niva-hint { margin: 6px 0 0; font-size: .78rem; color: var(--ink-soft); }
.kt .niva-hint p { margin: 2px 0; }
.kt .niva-hint p.active { color: var(--ink); font-weight: 600; }
.kt .kt-steps { margin: 12px 0 0; font-size: .82rem; color: var(--ink-soft); }
.kt .kt-steps a { color: var(--accent); font-weight: 600; white-space: nowrap; }
.kt .settings.preload { border-bottom: 1px dashed var(--rule); }
.kt .preload-note { font-size: .82rem; color: var(--ink-soft); }
.kt .preload-note strong { color: var(--ink); }

/* -- scenario picker (SITE-0012; prominent button SITE-0014) -- */
.kt .settings.picker-bar { border-top: none; margin-top: 0; padding-top: 0; }
.kt .picker-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0;
  text-align: left; font-family: inherit; font-size: .88rem; color: var(--ink);
  background: var(--card-2); border: 1px solid var(--rule); border-radius: 7px;
  padding: 9px 12px; cursor: pointer;
}
.kt .picker-btn:hover { border-color: var(--rule-strong); }
.kt .picker-btn:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.kt .picker-btn__label { color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
.kt .picker-btn__current {
  font-weight: 600; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.kt .picker-btn__caret { margin-left: auto; color: var(--accent); font-size: .8rem; }
.kt .picker-btn[aria-expanded="true"] .picker-btn__caret { transform: rotate(180deg); }
.kt .picker {
  margin: 4px 0 6px; padding: 12px; background: var(--card-2);
  border: 1px solid var(--rule); border-radius: 10px;
}
.kt .picker input[type="search"] { background: var(--card); }
.kt .picker-list { max-height: 300px; overflow-y: auto; margin-top: 10px; }
.kt .picker-h {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .11em;
  color: var(--ink-soft); font-weight: 700; margin: 10px 0 4px;
}
.kt .picker-group:first-child .picker-h { margin-top: 0; }
.kt .pick {
  display: block; width: 100%; text-align: left; background: none;
  border: none; border-radius: 6px; padding: 6px 8px; font-family: inherit;
  font-size: .86rem; color: var(--ink); cursor: pointer;
}
.kt .pick:hover { background: var(--accent-soft); }
.kt .pick:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kt .pick[aria-pressed="true"] { color: var(--accent); font-weight: 700; }
.kt .picker-empty { margin: 8px 0 0; font-size: .82rem; color: var(--ink-soft); }

/* -- posting grid -- */
.kt .ledger { margin-top: 20px; }
.kt .prow {
  display: grid; grid-template-columns: minmax(0, 1fr) 128px 128px 26px;
  align-items: stretch;
}
.kt .lhead { border-bottom: 2px solid var(--rule-strong); }
.kt .lhead .cell {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
  color: var(--ink-soft); padding: 0 10px 8px; display: flex; align-items: flex-end;
}
.kt .lhead .deb, .kt .lhead .kred { justify-content: flex-end; }
.kt .cell { padding: 5px 8px; }
.kt .cell.deb { border-left: 1px solid var(--rule); }
.kt .cell.kred { border-left: 2px solid var(--rule-strong); }   /* the T-account divide */
.kt .prow .mark { display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 700; padding: 5px 8px; }

.kt .prow.entry { border-bottom: 1px solid var(--rule); transition: background .15s; }
.kt .prow.entry.ok { background: var(--good-soft); }
.kt .prow.entry.no { background: var(--bad-soft); }
.kt .prow.entry.ok .mark { color: var(--good); }
.kt .prow.entry.no .mark { color: var(--bad); }

.kt select, .kt .amt, .kt .picker input[type="search"] {
  width: 100%; font-family: inherit; font-size: .92rem; color: var(--ink);
  background: var(--card-2); border: 1px solid var(--rule); border-radius: 7px;
  padding: 9px 10px; transition: border-color .15s, box-shadow .15s;
  min-height: 0; /* reference geometry */
}
/* right padding reserves the native chevron zone; overflow ellipsizes like
   the picker control — never text under the arrow (SITE-0016) */
.kt select { cursor: pointer; padding-right: 26px; text-overflow: ellipsis; }
.kt .amt { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.kt select:focus-visible, .kt .amt:focus-visible,
.kt .picker input[type="search"]:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

.kt .prow.sum { border-top: 2px solid var(--rule-strong); margin-top: 2px; }
.kt .prow.sum .cell { padding: 12px 10px; font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.kt .prow.sum .deb, .kt .prow.sum .kred { text-align: right; justify-content: flex-end; font-size: 1.02rem; }
.kt .sumlabel { display: flex; align-items: center; gap: 9px; font-family: var(--sans); font-weight: 600; color: var(--ink-soft); font-size: .82rem; }
.kt .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--rule-strong); flex: none; }
.kt .dot.bal { background: var(--good); box-shadow: 0 0 0 4px var(--good-soft); }
.kt .dot.unbal { background: var(--bad); box-shadow: 0 0 0 4px var(--bad-soft); }

.kt .addrow { margin-top: 12px; }
.kt .linkbtn {
  background: none; border: none; color: var(--accent); font-family: inherit;
  font-size: .83rem; font-weight: 600; cursor: pointer; padding: 4px 2px;
  text-decoration: none;
}
.kt .linkbtn:hover { text-decoration: underline; }
.kt .linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.kt .linkbtn[disabled] { color: var(--ink-soft); cursor: not-allowed; text-decoration: none; }

/* -- actions -- */
.kt .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.kt button.btn {
  font-family: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  padding: 11px 18px; border-radius: 9px; border: 1px solid transparent;
  transition: filter .15s, background .15s; min-height: 0; background: none;
}
.kt .btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.kt .btn.primary:hover { filter: brightness(1.07); }
.kt .btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.kt .btn.ghost:hover { background: var(--card-2); }
.kt .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
  /* deviation 4: dark contrast */
  .kt .btn.primary { color: #141813; }
}

/* -- feedback banner -- */
.kt .banner {
  margin-top: 18px; padding: 13px 16px; border-radius: 10px; font-size: .92rem;
  display: none; align-items: flex-start; gap: 10px; border: 1px solid transparent;
}
.kt .banner.show { display: flex; }
.kt .banner.good { background: var(--good-soft); border-color: var(--good); color: var(--good); }
.kt .banner.bad { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.kt .banner b { font-weight: 700; }
.kt .banner.note { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.kt .banner .bico { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; line-height: 1.35; }
.kt .banner-body { color: var(--ink); }
.kt .banner-guide { margin-left: auto; white-space: nowrap; }
.kt .banner-guide a, .kt .facit-guide a { color: var(--accent); font-weight: 600; }

/* -- facit -- */
.kt .facit {
  margin-top: 18px; border: 1px dashed var(--rule-strong); border-radius: 11px;
  padding: 14px 16px; display: none; background: var(--card-2);
}
.kt .facit.show { display: block; }
.kt .facit h3 { margin: 0 0 10px; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); font-family: var(--sans); font-weight: 700; }
.kt .frow {
  display: grid; grid-template-columns: minmax(0, 1fr) 118px 118px; gap: 0;
  font-family: var(--mono); font-size: .9rem; padding: 4px 0;
  border-bottom: 1px solid var(--rule);
}
.kt .frow:last-of-type { border-bottom: none; }
.kt .frow .fk { color: var(--ink); }
.kt .frow .fd, .kt .frow .fkr { text-align: right; font-variant-numeric: tabular-nums; }
.kt .frow .muted { color: var(--ink-soft); }
.kt .facit .why { margin: 10px 0 0; font-family: var(--sans); font-size: .84rem; color: var(--ink-soft); line-height: 1.5; }
.kt .facit-guide { margin: 8px 0 0; font-size: .84rem; }
.kt .facit-guide:empty { display: none; }

/* -- sidebar / cheat sheet -- */
.kt aside .card { padding: 20px 22px; }
.kt .kt-cheat h2 { font-family: var(--serif); font-size: 1.06rem; margin: 0 0 4px; font-weight: 600; color: var(--ink); }
/* Fusklapp fold (SITE-0014) */
.kt .cheat-h button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; background: none; border: none; padding: 2px 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.kt .cheat-h button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.kt .cheat-caret { color: var(--accent); font-size: .8rem; }
.kt .cheat-h button[aria-expanded="false"] .cheat-caret { transform: rotate(-90deg); }
.kt .kt-cheat .sub { color: var(--ink-soft); font-size: .8rem; margin: 0 0 16px; }
.kt .eq {
  background: var(--card-2); border: 1px solid var(--rule); border-radius: 10px;
  padding: 14px; text-align: center; font-family: var(--serif); font-size: 1.02rem;
  margin-bottom: 18px;
}
.kt .eq b { color: var(--accent); }
.kt .rulebox { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; font-size: .84rem; margin-bottom: 20px; }
.kt .rulebox div { padding: 7px 2px; border-bottom: 1px solid var(--rule); }
.kt .rulebox .side { font-family: var(--mono); font-weight: 700; text-align: right; white-space: nowrap; }
.kt .rulebox .side.d { color: var(--accent); }
.kt .rulebox .side.k { color: var(--good); }
.kt .kp h3 { font-size: .7rem; text-transform: uppercase; letter-spacing: .11em; color: var(--ink-soft); margin: 16px 0 6px; font-family: var(--sans); font-weight: 700; }
.kt .kp .kline { display: flex; gap: 10px; font-size: .85rem; padding: 3px 0; }
.kt .kp .num { font-family: var(--mono); color: var(--accent); font-weight: 600; min-width: 42px; }
.kt .kp .nm { color: var(--ink); }

/* -- footer note (reference footer) -- */
.kt .kt-note {
  margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--rule);
  color: var(--ink-soft); font-size: .78rem; line-height: 1.6;
}

.kt .kt-noscript { margin-top: 14px; color: var(--bad); font-weight: 600; font-size: .9rem; }

/* narrow screens (reference) */
@media (max-width: 460px) {
  .kt .prow { grid-template-columns: minmax(0, 1fr) 82px 82px 22px; }
  .kt .cell { padding: 5px 5px; }
  .kt select, .kt .amt { padding: 8px 7px; font-size: .85rem; }
  .kt select { padding-right: 22px; } /* chevron zone (SITE-0016) */
  .kt .frow { grid-template-columns: minmax(0, 1fr) 80px 80px; }
}
@media (prefers-reduced-motion: no-preference) {
  .kt .prompt, .kt .ledger, .kt .cheat-body { animation: kt-rise .32s ease both; }
  .kt .cheat-caret { transition: transform .15s; }
  @keyframes kt-rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}

/* -- embeds on register entry pages -- */
.kt--embed { margin-top: calc(var(--space) * 1.4); }
.kt--embed h2 { font-family: var(--serif); }
.kt--embed .embed-note { color: var(--c-text-muted); font-size: .95rem; max-width: 40rem; }
.kt--embed .kt-cheat-fold { margin-top: 14px; }
.kt--embed .embed-more { margin-top: 14px; font-size: .95rem; }

/* kontering example: the facit look, static */
.kontering-example .facit.static { display: block; margin-top: 4px; }
.kontering-example .ex-note { color: var(--c-text-muted); font-size: .92rem; margin: 0 0 8px; }
.kontering-example .frow.fhead {
  font-family: var(--sans); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .1em; font-weight: 700; color: var(--ink-soft);
  border-bottom: 2px solid var(--rule-strong);
}

/* -- register index -- */
.reg-search { min-height: 7.6rem; } /* input + filter + count reserve */
.reg-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin: .65rem 0 0; }
.reg-filter button {
  font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
  padding: .22em .85em; border-radius: 999px; letter-spacing: .04em;
  background: var(--c-surface); border: 1px solid var(--c-border);
  color: var(--c-text-muted);
}
.reg-filter button[aria-pressed="true"] {
  background: var(--c-primary); border-color: var(--c-primary);
  color: var(--c-primary-contrast);
}
.reg-search input[type="search"] {
  font: inherit; color: var(--c-text); background: var(--c-surface);
  border: 1.5px solid var(--c-border); border-radius: 9px;
  padding: 0.6em 0.9em; width: 100%; max-width: 28rem; min-height: 44px;
}
.reg-search input[type="search"]:focus-visible {
  outline: none; border-color: var(--c-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-focus) 25%, transparent);
}
.reg-count { color: var(--c-text-muted); font-size: .9rem; margin: 0.5em 0 0; min-height: 1.3em; }
.reg-list { list-style: none; padding: 0; margin: 0 0 var(--space); }
.reg-list li {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 0.7em 1em; margin-bottom: 0.55rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3em 1em;
  justify-content: space-between;
}
.reg-list a { font-weight: 600; text-decoration: none; color: var(--c-text); }
.reg-list a:hover { color: var(--c-link); text-decoration: underline; }
.reg-meta { color: var(--c-text-muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.reg-empty { color: var(--c-text-muted); }
.niva-badge {
  display: inline-block; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 0.15em 0.6em; border-radius: 999px;
  background: var(--c-surface-alt); border: 1px solid var(--c-border);
  color: var(--c-text-muted);
}
.niva-badge[data-niva="1"] { border-color: var(--c-success); color: var(--c-success); }
.niva-badge[data-niva="4"] { border-color: var(--c-primary); color: var(--c-primary); }
a.niva-badge { text-decoration: none; }
a.niva-badge:hover { text-decoration: underline; }
.reg-head-meta { margin: 0.3em 0 0; }
.reg-related ul { list-style: none; padding: 0; }
.reg-related li { margin-bottom: 0.4em; }
.reg-back { margin-top: var(--space); }

/* guide typography */
.guide { max-width: 44rem; }
.guide h2 { font-size: 1.25rem; }

/* -- SITE-0012 homepage: trainer-first -- */
.page-head--home { margin-bottom: calc(var(--space) * .6); }
.page-head--home h1 { margin: 0; }
.home-hub { margin-top: calc(var(--space) * 1.8); }
.home-hub .lead { max-width: 44rem; }
.home-updates { margin-top: calc(var(--space) * 1.4); }
.home-updates .rail-updates { max-width: 34rem; }