:root {
  --c-accent: #b45309;
  --c-bg: #f4f5f7;
  --c-border: #d2d8df;
  --c-error: #b3261e;
  --c-focus: #b45309;
  --c-link: #1f5b8e;
  --c-primary: #24425f;
  --c-primary-contrast: #ffffff;
  --c-success: #1b7a3d;
  --c-surface: #ffffff;
  --c-surface-alt: #eaedf1;
  --c-text: #182430;
  --c-text-muted: #4d5b6a;
  --c-warning: #a16207;
  --font-heading: Cambria, Georgia, 'Times New Roman', serif;
  --font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --h-weight: 700;
  --h-tracking: -0.01em;
  --h-transform: none;
  --radius: 3px;
  --shadow: none;
  --space: 0.9rem;
}
/* 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 */
/* Arbetsgivarkalkylen — site flourishes on top of the kit shell.
   Look: sober business ledger. Serif headings, hairline rules, amber accents,
   tabular numbers everywhere money is shown. */

/* Ledger paper: faint horizontal ruling behind the page background. */
body {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 31px,
    rgba(36, 66, 95, 0.045) 31px,
    rgba(36, 66, 95, 0.045) 32px
  );
}

/* Brand: tighten the split header into a letterhead. */
body[data-header="split"] .site-header { border-bottom-width: 2px; }
.brand__name { letter-spacing: 0.01em; }
.site-nav a { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* Headings get a short amber underscore — the site's signature. */
main h1 {
  position: relative;
  padding-bottom: 0.35em;
}
main h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3.2rem;
  height: 3px;
  background: var(--c-accent);
}

/* Tool cards on the home grid read as index tabs in a binder (kit v0.2:
   .card/.card-grid are gone; the grid is .tool-grid/.tool-card__*). */
.tool-card { border-top: 3px solid var(--c-primary); }
.tool-card:hover { border-top-color: var(--c-accent); }

/* Calculator card: a form on letter paper with a heavier rule on top. */
.calc-card { border-top: 3px solid var(--c-primary); }

/* Results: ledger table — right-aligned sums, hairlines, amber total. */
.results dl { border-top: 1px solid var(--c-border); }
.result { border-bottom: 1px solid var(--c-border); padding: 0.45em 0; }
.result dd { font-variant-numeric: tabular-nums lining-nums; text-align: right; }
.result--primary {
  border-left: 3px solid var(--c-accent);
  padding-left: 0.6em;
}

/* Sources block reads as footnotes: smaller, hairline-topped. */
.sources { border-top: 1px solid var(--c-border); padding-top: var(--space); }
.sources li { font-size: 0.92rem; }
.source__label { font-weight: 600; }

/* Kit v0.2: sibling-tool links live in the static intro[] collapsible
   (.how-it-works) — the old JS-injected .related-tools/.colleague-note
   blocks are gone. The rail digest keeps the ledger hairline look. */
.rail-updates { border-top: 3px solid var(--c-primary); }

/* Växa-stöd + förmån decision verdicts now use the KIT-0011 verdict seam
   (definition.json `verdict` + compute-returned `verdict` data, styled by the
   kit's .calc-verdict / .calc-verdict--ok|warn|bad in base.css). The former
   site-authored .vaxa-verdict DOM island and its CSS were removed on migration
   so there is a single verdict mechanism and no double render. */

/* ---------------- Skapa faktura (client-side builder) ---------------- */

.invoice-builder {
  margin-top: calc(var(--space) * 1.4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-primary);
  border-radius: var(--radius);
  padding: var(--space);
}
.invoice-builder h2 { margin-top: 0; }
.invoice-builder .privacy-note {
  padding: 0.55em 0.9em;
  border-left: 3px solid var(--c-success);
  background: var(--c-surface-alt);
  font-size: 0.92rem;
}
.invoice-builder fieldset {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  margin: 0 0 var(--space);
  padding: calc(var(--space) * 0.8);
}
.invoice-builder legend { font-weight: 700; padding: 0 0.4em; }
.ib-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.7em; }
.ib-field label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25em; }
.ib-field input, .ib-field select {
  width: 100%;
  min-height: 44px;
  padding: 0.4em 0.6em;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-text);
  font: inherit;
}
.ib-field input:focus-visible, .ib-field select:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 1px;
}
.ib-rows table { width: 100%; border-collapse: collapse; }
.ib-rows th { text-align: left; font-size: 0.88rem; color: var(--c-text-muted); padding: 0.3em 0.4em; }
.ib-rows td { padding: 0.25em 0.4em; vertical-align: top; }
.ib-rows input, .ib-rows select {
  width: 100%;
  min-height: 44px;
  padding: 0.35em 0.5em;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font: inherit;
  background: var(--c-bg);
}
.ib-rows .ib-remove {
  min-height: 44px;
  min-width: 44px;
  border: 1px solid var(--c-border);
  background: var(--c-surface-alt);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 700;
}
.ib-actions { display: flex; flex-wrap: wrap; gap: 0.6em; margin-top: var(--space); }
.btn--secondary {
  background: var(--c-surface-alt);
  color: var(--c-text);
  border: 1px solid var(--c-border);
}

/* The rendered invoice: A4-ish sheet, classic Swedish layout. */
.invoice-sheet {
  background: #fff;
  color: #14202c;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: calc(var(--space) * 1.6);
  margin-top: var(--space);
  max-width: 52rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.invoice-sheet h2 {
  font-size: 1.9rem;
  margin: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.inv-head { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; border-bottom: 2px solid #24425f; padding-bottom: 0.8rem; }
.inv-meta { text-align: right; font-size: 0.95rem; }
.inv-parties { display: flex; gap: 2rem; flex-wrap: wrap; margin: 1rem 0; }
.inv-parties > div { flex: 1 1 16rem; }
.inv-parties h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: #4d5b6a; margin: 0 0 0.3em; }
.inv-lines { width: 100%; border-collapse: collapse; margin: 0.8rem 0; }
.inv-lines th { text-align: left; border-bottom: 1.5px solid #24425f; padding: 0.35em 0.4em; font-size: 0.88rem; }
.inv-lines td { border-bottom: 1px solid #d2d8df; padding: 0.4em; }
.inv-lines .num, .inv-totals .num { text-align: right; white-space: nowrap; }
.inv-totals { margin-left: auto; border-collapse: collapse; min-width: 18rem; }
.inv-totals td { padding: 0.25em 0.4em; }
.inv-totals .inv-due td { border-top: 2px solid #24425f; font-weight: 800; font-size: 1.05rem; }
.inv-foot { border-top: 1px solid #d2d8df; margin-top: 1.2rem; padding-top: 0.7rem; font-size: 0.88rem; color: #4d5b6a; display: flex; gap: 2rem; flex-wrap: wrap; }
.inv-fskatt { font-weight: 600; }

@media print {
  body { background: #fff; }
  /* When an invoice has been rendered, print ONLY the invoice sheet. */
  body.has-invoice * { visibility: hidden; }
  body.has-invoice .invoice-sheet, body.has-invoice .invoice-sheet * { visibility: visible; }
  body.has-invoice .invoice-sheet {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border: 0;
    border-radius: 0;
    padding: 0;
    max-width: none;
  }
}