/* areg — design system implementation. Tokens and components follow
   design/tokens.css and design/system.html verbatim; see design/README. */

/* ── font ───────────────────────────────────────────────── */
@font-face {
  font-family: "FT Polar";
  src: url("/assets/FTPolar_Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── tokens ─────────────────────────────────────────────── */
:root {
  /* brand palette */
  --purple: #ab9ff2;
  --lavender: #e2dffe;
  --green: #45e863;
  --red: #ff0037;
  --yellow: #ffd600;

  /* light theme (default) — warm paper */
  --bg: #fffdf8;
  --surface: #f6f4ef;
  --border: #e8e6e2;
  --border-strong: #d2d0cc;
  --ink: #1c1c1c;
  --ink-muted: #62605c;
  --ink-faint: #73716d;

  /* accent roles */
  --accent: var(--purple);
  --accent-ink: #1c1c1c;
  --accent-text: #4f43b5;
  --hit-bg: var(--lavender);
  --green-text: #0e7a2b;
  --red-text: #d4002f;

  /* type */
  --font-sans: "FT Polar", "Helvetica Neue", system-ui, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --leading-body: 1.5;

  /* shape */
  --r-sm: 6px;
  --r-md: 10px;

  /* space (4px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 100ms;
  --t-med: 180ms;

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0f0f0f;
  --surface: #1c1c1c;
  --border: #ffffff14;
  --border-strong: #ffffff2e;
  --ink: #fffdf8;
  --ink-muted: #b4b4b4;
  --ink-faint: #8c8a86;
  --accent-text: #c4bbf7;
  --hit-bg: #3b3564;
  --green-text: #45e863;
  --red-text: #ff475d;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0f0f0f;
    --surface: #1c1c1c;
    --border: #ffffff14;
    --border-strong: #ffffff2e;
    --ink: #fffdf8;
    --ink-muted: #b4b4b4;
    --ink-faint: #8c8a86;
    --accent-text: #c4bbf7;
    --hit-bg: #3b3564;
    --green-text: #45e863;
    --red-text: #ff475d;
    color-scheme: dark;
  }
}

/* ── base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: background var(--t-med) ease, color var(--t-med) ease;
}

::selection { background: var(--hit-bg); }

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

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent-text); }

/* Running-content links must be distinguishable from text, not by colour
   alone (WCAG 1.4.1). Navigation chrome — tabs, year chips, pagers — is
   discoverable by its own layout, so it stays underline-free. */
main.page td a,
main.page dd a,
main.page p a,
main.page li:not(.result) a:not(.tab),
.announcement summary a,
.announcement .source a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: var(--border-strong);
}
main.page td a:hover,
main.page dd a:hover,
main.page p a:hover,
main.page li:not(.result) a:not(.tab):hover,
.announcement summary a:hover,
.announcement .source a:hover { text-decoration-color: currentColor; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s-4); top: var(--s-4);
  z-index: 10;
  padding: var(--s-1) var(--s-3);
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  text-decoration: none;
  transform: translateY(-300%);
}
.skip-link:focus-visible { transform: none; }

/* ── header ─────────────────────────────────────────────── */
header.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
}

.wordmark {
  font-size: var(--text-md);
  color: var(--ink);
  text-decoration: none;
  flex: none;
}
.wordmark::after { content: "."; color: var(--accent-text); }
.wordmark:hover { color: var(--ink); }

/* ── search (shared: home hero + header) ────────────────── */
.search {
  position: relative;
  width: min(560px, 100%);
}

main:has(> .search) {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--s-4);
}
main > .search { margin-top: -10vh; }

header.site .search { width: min(360px, 100%); }
header.site .search-field { height: 40px; }

.search-field {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 56px;
  padding: 0 var(--s-4);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) ease;
}
.search-field:focus-within {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 1px var(--accent-text);
}
.search-field svg { flex: none; color: var(--ink-faint); }

#q {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: var(--ink);
  font: 400 var(--text-md) var(--font-sans);
}
#q::placeholder { color: var(--ink-faint); }
#q:focus { outline: none; }

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--s-2);
  font: 400 var(--text-xs) var(--font-sans);
  color: var(--ink-faint);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: none;
}

/* ── results listbox ────────────────────────────────────── */
#results {
  position: absolute;
  top: calc(100% + var(--s-2));
  left: 0; right: 0;
  max-height: min(50vh, 400px);
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  list-style: none;
  z-index: 5;
  animation: appear var(--t-med) var(--ease-out) both;
}
#results:empty { display: none; }

.result {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
}
.result + .result { border-top: 1px solid var(--border); }
.result[aria-selected="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}
.result[aria-selected="true"] .result-org,
.result[aria-selected="true"] .result-status { color: inherit; opacity: 0.8; }
.result[aria-selected="true"] mark { background: rgb(255 253 248 / 0.5); }

.result-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
mark {
  background: var(--hit-bg);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
.result-org {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--ink-muted);
  flex: none;
}
.result-status {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  flex: none;
  min-width: 4.5rem;
  text-align: right;
}
.result-status.gone { color: var(--red-text); }

.empty {
  padding: var(--s-5);
  text-align: center;
  color: var(--ink-faint);
  font-size: var(--text-sm);
}

/* ── content pages ──────────────────────────────────────── */
main.page {
  flex: 1;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: var(--s-4) var(--s-4) var(--s-8);
}

main.page h1 {
  font-weight: 400;
  font-size: var(--text-lg);
  margin-bottom: var(--s-1);
}
main.page h1 a { color: inherit; }
main.page h1 a:hover { color: var(--accent-text); }

.meta {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.muted { color: var(--ink-faint); font-size: var(--text-sm); }

/* The per-source "sist oppdatert" line. It closes each section rather than
   heading it: provenance is what you check after reading, not before. */
.freshness {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  margin: var(--s-5) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}

/* ── admin pages ────────────────────────────────────────
   Operator screens. Same tokens as the rest of the site, laid out denser:
   these are read while deciding something, not browsed. */
main.page.admin { max-width: 48rem; }

.admin-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin: var(--s-3) 0 var(--s-6);
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}
.admin-counts li { display: flex; gap: var(--s-2); align-items: baseline; }
.admin-counts span { color: var(--ink-faint); }
.admin-counts b { font-variant-numeric: tabular-nums; }

.admin-note {
  margin: var(--s-4) 0;
  padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--accent);
  background: var(--surface);
}

/* One pending request. The border is the whole decoration: a card per row
   keeps the reasoning attached to the buttons that act on it. */
.admin-card {
  margin: var(--s-4) 0;
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.admin-card > * { margin: 0 0 var(--s-2); }
.admin-card > *:last-child { margin-bottom: 0; }
.admin-what { font-weight: 500; }

/* The command an operator has to run. Selectable in one go, because it is
   meant to be copied. */
.admin-cmd {
  margin: var(--s-3) 0;
  padding: var(--s-2) var(--s-3);
  overflow-x: auto;
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--text-sm);
  user-select: all;
}

.admin-error {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--red-text);
  font-size: var(--text-sm);
}

.admin-actions { display: flex; gap: var(--s-2); margin-top: var(--s-3); }

/* Approve and reject must not look alike. Approve carries the weight;
   reject is quiet, so the destructive one is never the easy reflex. */
.btn-approve,
.btn-reject {
  font: inherit;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-approve { background: var(--accent); color: var(--accent-ink); }
.btn-approve:hover { filter: brightness(0.96); }
.btn-reject {
  background: none;
  color: var(--ink-muted);
  border-color: var(--border-strong);
}
.btn-reject:hover { color: var(--red-text); border-color: var(--red-text); }
.btn-approve:focus-visible,
.btn-reject:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Quiet by default, so it reads as a footnote and not a call to action. It
   only firms up under the pointer, which is when it is being considered.
   Scoped: .btn-secondary is also the query console's, with its own sizing. */
.freshness .btn-secondary {
  font: inherit;
  color: var(--ink-muted);
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 2px var(--s-2);
  cursor: pointer;
}

.freshness .btn-secondary:hover {
  color: var(--ink);
  border-color: var(--ink-muted);
  background: var(--surface);
}

.freshness .btn-secondary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.orgnr {
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}
.copy-orgnr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 24px keeps the hit area at the WCAG 2.2 minimum around a 14px icon. */
  width: 24px;
  height: 24px;
  padding: 0;
  margin-left: 2px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  vertical-align: middle;
}
.copy-orgnr:hover { color: var(--ink); background: var(--surface); }
.copy-orgnr:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; color: var(--ink); }
.copy-orgnr .icon-done { display: none; }
.copy-orgnr.copied { color: var(--accent-text); }
.copy-orgnr.copied .icon-copy { display: none; }
.copy-orgnr.copied .icon-done { display: block; }

/* Nine tabs fit the 760px column on one line at this gap, not at the next. */
nav.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin: var(--s-5) 0;
  border-bottom: 1px solid var(--border);
}
nav.tabs .tab {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
nav.tabs a.tab:hover { color: var(--ink); }
nav.tabs .tab.current {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

main.page h2 {
  font: 400 var(--text-xs) var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  margin: var(--s-5) 0 var(--s-2);
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--s-4) 0;
}
th {
  font: 400 var(--text-xs) var(--font-sans);
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  border-bottom: 1px solid var(--border);
}
td {
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
td.num, th.num { text-align: right; padding-right: 0; }
tr:last-child td { border-bottom: 0; }

.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 480px; }

/* Keyboard row cursor (areg.js): j/k move a focus ring down the roles,
   shareholders and holdings lists; the financials grid has its own cell cursor. */
.table-scroll:not(.financials) tbody tr:focus { outline: none; }
.table-scroll:not(.financials) tbody tr:focus td,
.table-scroll:not(.financials) tbody tr:focus th {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  color: var(--ink);
}

/* The same cursor over the overview's fields and its støtte and anbud rows.
   The shadow widens the highlight past the item's own box, so the text inside
   does not move. */
dl.info .info-item:focus,
.grants ul.grant-list > li:focus {
  outline: none;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  box-shadow: 0 0 0 var(--s-1) color-mix(in srgb, var(--accent) 12%, var(--bg));
}

/* Wide financial statement: years across, metrics down, first column pinned. */
.financials {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  scroll-snap-type: x proximity;
}
.financials:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.financials table { min-width: max-content; margin: 0; }
.financials th.num, .financials td.num {
  min-width: 6.5rem;
  padding: var(--s-2) var(--s-3);
  scroll-snap-align: end;
}
.financials th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg);
  text-transform: none;
  text-align: left;
  color: var(--ink);
  font-size: var(--text-sm);
  white-space: nowrap;
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3);
  border-right: 1px solid var(--border);
}
.financials tr.section th,
.financials tr.section td {
  background: var(--surface);
  padding-top: var(--s-4);
}
.financials tr.section th {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--text-xs);
  color: var(--ink-faint);
}
/* Excel-like cell cursor (areg.js): the focused cell, plus its row and column
   header, are highlighted; focus scrolls the frozen first column into view. */
.financials td:focus, .financials th:focus {
  outline: 2px solid var(--accent-text);
  outline-offset: -2px;
  background: var(--hit-bg);
  color: var(--ink);
}
.financials td.hl, .financials th.hl {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg));
  color: var(--ink);
}

/* Overview: status banners */
.banner {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--s-3);
  margin: var(--s-4) 0;
  font-size: var(--text-sm);
}
.banner strong { display: block; margin-bottom: 2px; }
.banner.warn { border-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 12%, transparent); }
.banner.alert { border-color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }

/* Overview: revenue/result plot */
.plot { margin: var(--s-4) 0; position: relative; }
.plot svg { width: 100%; height: auto; display: block; }
.plot .grid { stroke: var(--border); stroke-width: 1; }
.plot .series-rev { stroke: var(--accent); stroke-width: 2; }
.plot .series-res { stroke: var(--green-text); stroke-width: 2; }
.plot .dot-rev { fill: var(--accent); }
.plot .dot-res { fill: var(--green-text); }
.plot text { font: var(--text-xs) var(--font-sans); fill: var(--ink-faint); }

/* Interactive layer: per-year hit bands, crosshair, highlighted points. */
.plot .hit { fill: transparent; cursor: pointer; }
.plot .hit:focus { outline: none; }
.plot .hit:focus-visible { fill: color-mix(in srgb, var(--accent) 10%, transparent); }
.plot .crosshair { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.plot .marker { stroke: var(--bg); stroke-width: 2; pointer-events: none; }
.plot .marker-rev { fill: var(--accent); }
.plot .marker-res { fill: var(--green-text); }
.plot .is-off { display: none; }
.plot-tip {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  font-size: var(--text-xs);
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
}
.plot-tip .tip-year { display: block; color: var(--ink); margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.plot-tip .tip-row {
  display: flex; align-items: center; gap: var(--s-2);
  color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.plot-tip .tip-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.plot-tip .tip-dot.rev { background: var(--accent); }
.plot-tip .tip-dot.res { background: var(--green-text); }
.plot .axis-y { text-anchor: end; }
.plot .axis-x { text-anchor: middle; }
.plot figcaption {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4);
  align-items: center; margin-top: var(--s-2); font-size: var(--text-xs);
}
.plot .legend { display: inline-flex; align-items: center; gap: var(--s-2); }
.plot .swatch { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.plot .swatch.rev { background: var(--accent); }
.plot .swatch.res { background: var(--green-text); }

/* Overview: info box */
dl.info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3) var(--s-4);
  margin: var(--s-4) 0;
}
.info-item dt { font-size: var(--text-xs); text-transform: uppercase; color: var(--ink-faint); }
.info-item dd { margin: 2px 0 0; font-size: var(--text-md); }
.status { font-size: var(--text-sm); font-weight: 500; }
.status.good { color: var(--green-text); }
.status.warn { color: var(--accent-text); }
.status.bad { color: var(--red-text); }

/* Overview: registers */
.registers { margin: var(--s-4) 0; }
.section-label { font-size: var(--text-xs); text-transform: uppercase; color: var(--ink-faint); }
.register-list { list-style: none; padding: 0; margin: var(--s-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.register-list li {
  display: inline-flex; gap: var(--s-2); align-items: baseline;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: var(--s-1) var(--s-2); font-size: var(--text-sm);
}
p.group-note { font-size: var(--text-sm); margin: 0 0 var(--s-4); }
/* Overview: who paid, above the newest few awards */
.grantor-list { list-style: none; padding: 0; margin: var(--s-2) 0 0; display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--text-sm); }
.grantor-list li { display: flex; gap: var(--s-2); align-items: baseline; flex-wrap: wrap; }
.grantor-name { font-weight: 600; }

/* Overview: public grants (Innovasjon Norge, SkatteFUNN, Støtteregisteret) */
.grants .grant-list {
  list-style: none; padding: 0; margin: var(--s-2) 0 0;
  display: flex; flex-direction: column; gap: var(--s-1);
  font-size: var(--text-sm);
}
.grants .grant-list li { display: flex; gap: var(--s-2); align-items: baseline; }
.grants .grant-list li > .muted:first-child { flex: none; width: 3em; font-variant-numeric: tabular-nums; }
.grants .grant-what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grants .grant-amount { font-variant-numeric: tabular-nums; }

.rawdata { margin-top: var(--s-5); }

/* Inline keyboard hints — hidden until the reader opts in via the ? panel. */
.tabhint { display: none; margin-left: 5px; font-size: 0.7em; opacity: 0.7; vertical-align: middle; }
:root[data-hints="on"] .tabhint { display: inline-block; }

/* Inline keyboard/interaction tips, shown only with the same hints toggle. */
.keyhint { display: none; }
:root[data-hints="on"] .keyhint { display: inline; }
.hints-toggle {
  font: inherit;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-sm);
  padding: 2px var(--s-2);
  cursor: pointer;
}
.hints-toggle[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

nav.years {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-4) 0;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
}
nav.years a { color: var(--ink-muted); padding: var(--s-1) var(--s-2); }
nav.years a:hover { color: var(--ink); }
nav.years .current {
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--r-sm);
  padding: var(--s-1) var(--s-2);
}

section.transition { margin: var(--s-5) 0; }
section.transition h3 {
  font: 400 var(--text-xs) var(--font-sans);
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-2);
  font-variant-numeric: tabular-nums;
}
ul.events { list-style: none; }
ul.events li {
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border);
}
ul.events li:last-child { border-bottom: 0; }
/* Keyboard row cursor (areg.js): j/k walk the ownership-history events. */
ul.events li.event:focus {
  outline: none;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
}
ul.events .change {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
p.capital {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-2);
}
details.event-group { margin: 0; }
details.event-group summary { padding: var(--s-2) 0; }
details.event-group[open] summary { border-bottom: 1px solid var(--border); }
details.event-group ul.events { padding-left: var(--s-3); }

nav.pager { display: flex; gap: var(--s-5); margin: var(--s-4) 0; }
nav.pager a { color: var(--ink-muted); font-size: var(--text-sm); }
nav.pager a:hover { color: var(--ink); }

/* Kunngjøringer (announcements): a stack of cards, no dividers */
ul.announcements,
ul.grant-entries {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
ul.announcements li.announcement,
ul.grant-entries li.grant {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
ul.announcements details,
ul.grant-entries details { margin: 0; }
.announcement summary.meta,
.grant summary.meta {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  list-style: none;
  padding: var(--s-3) var(--s-4);
}
.announcement summary.meta::-webkit-details-marker,
.grant summary.meta::-webkit-details-marker { display: none; }
.announcement details[open] summary.meta,
.grant details[open] summary.meta { border-bottom: 1px solid var(--border); }
.announcement summary.meta:hover,
.grant summary.meta:hover { color: var(--ink); }
.announcement .body,
.grant .body { white-space: pre-line; margin: 0; padding: var(--s-3) var(--s-4); }
/* What the notice changed, read out of its text */
.announcement summary.meta .fact { color: var(--ink); }
dl.notice-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-2) var(--s-4);
  margin: 0;
  padding: var(--s-3) var(--s-4) 0;
}
dl.notice-facts dt { font-size: var(--text-xs); text-transform: uppercase; color: var(--ink-faint); }
dl.notice-facts dd { margin: 2px 0 0; font-size: var(--text-sm); }
.announcement .source,
.grant .source {
  font-size: var(--text-sm);
  margin: 0;
  padding: 0 var(--s-4) var(--s-3);
}

/* Støtte page: one section per granting body, programmes inside it */
p.grant-total { font-size: var(--text-lg); margin: var(--s-3) 0 var(--s-6); }
.grant-total-amount { font-variant-numeric: tabular-nums; font-weight: 600; }

section.grantor { margin: 0 0 var(--s-6); }
section.grantor h3 {
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: baseline;
  margin: 0; font-size: var(--text-lg); font-weight: 600;
}
section.grantor h3 .name { color: var(--ink); }
section.grantor h3 .reg-tag {
  font-size: var(--text-xs); font-weight: 400; color: var(--ink-faint);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 0 var(--s-1); white-space: nowrap;
}
p.grantor-stats {
  margin: var(--s-1) 0 var(--s-3);
  font-size: var(--text-sm); color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* The programmes hang off their body, so the nesting is legible at a glance. */
details.programme {
  border-left: 2px solid var(--border); margin: 0 0 var(--s-2); padding-left: var(--s-3);
}
/* Not flex: a scheme name can run to eighty characters, and a flex line that
   cannot fit one moves the whole item down, orphaning the marker above it.
   Normal text flow wraps inside the name instead. */
details.programme > summary.meta {
  color: var(--ink-muted); font-size: var(--text-sm);
  cursor: pointer; list-style: none; padding: var(--s-2) 0;
  font-variant-numeric: tabular-nums; text-indent: -1em; padding-left: 1em;
}
details.programme > summary.meta::-webkit-details-marker { display: none; }
details.programme > summary.meta::before {
  content: "\25b8"; color: var(--ink-faint);
  display: inline-block; width: 1em; text-indent: 0;
  transition: transform 120ms ease; transform-origin: 40% 55%;
}
details.programme[open] > summary.meta::before { transform: rotate(90deg); }
details.programme > summary.meta:hover { color: var(--ink); }
details.programme .kind { color: var(--ink); font-weight: 600; }
details.programme .kind + .stats::before { content: " · "; color: var(--ink-faint); }
details.programme .stats { color: var(--ink-muted); }
details.programme > p.purpose,
details.programme > p.source {
  margin: 0 0 var(--s-2); padding: 0 0 0 var(--s-4);
  font-size: var(--text-sm); color: var(--ink-faint);
}

/* ── konsern ───────────────────────────────────────────── */
/* Each level hangs off a rule on the left, with a short stub to every row, so
   the nesting reads like the tree it is. The root list carries no rule. */
ul.group-tree {
  list-style: none; margin: 0; padding: 0 0 0 var(--s-4);
  border-left: 1px solid var(--border);
}
ul.group-tree.group-root { padding-left: 0; border-left: 0; margin: var(--s-3) 0 var(--s-4); }
ul.group-tree > li { position: relative; }
ul.group-tree:not(.group-root) > li::before {
  content: ""; position: absolute; top: 1.05em;
  left: calc(-1 * var(--s-4)); width: calc(var(--s-4) - 4px);
  border-top: 1px solid var(--border);
}
.group-line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2);
  padding: var(--s-1) 0; font-variant-numeric: tabular-nums;
}
/* A leaf has no marker, so it is pushed in by the marker and the gap after it
   to line up with its folding siblings. */
div.group-line { padding-left: calc(1em + var(--s-2)); }
details.group-node { margin: 0; }
details.group-node > summary {
  cursor: pointer; list-style: none; color: inherit; font-size: inherit;
}
details.group-node > summary::-webkit-details-marker { display: none; }
details.group-node > summary::before {
  content: "\25b8"; color: var(--ink-faint); width: 1em; flex: none;
  transition: transform 120ms ease; transform-origin: 40% 55%;
}
details.group-node[open] > summary::before { transform: rotate(90deg); }
details.group-node > summary:hover .group-count { color: var(--ink); }
.group-unit { min-width: 0; overflow-wrap: anywhere; }
.group-share { color: var(--ink-muted); font-size: var(--text-sm); }
.group-kind, .group-count { font-size: var(--text-sm); }
.group-here {
  font-size: var(--text-xs); color: var(--accent-ink); background: var(--hit-bg);
  border-radius: var(--r-sm); padding: 0 var(--s-1); white-space: nowrap;
}

ul.award-list {
  list-style: none; margin: 0 0 var(--s-2); padding: 0 0 0 var(--s-4);
  border-top: 1px solid var(--border);
}
li.award + li.award { border-top: 1px solid var(--border); }
li.award > details { margin: 0; }
li.award .meta {
  display: flex; gap: var(--s-3); align-items: baseline; flex-wrap: wrap;
  padding: var(--s-2) 0; font-size: var(--text-sm);
  cursor: pointer; list-style: none;
}
li.award details > summary.meta::-webkit-details-marker { display: none; }
li.award .meta:hover { color: var(--ink); }
li.award .date { flex: none; width: 2.75em; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
li.award .what { flex: 1 1 12em; min-width: 0; }
li.award .amount { flex: none; font-variant-numeric: tabular-nums; text-align: right; }
li.award .status-word { flex: none; width: 6.5em; color: var(--ink-faint); }
li.award .body,
li.award .source {
  margin: 0; padding: 0 0 var(--s-3) 2.75em;
  font-size: var(--text-sm); color: var(--ink-faint);
}
li.award .body { white-space: pre-line; color: var(--ink-muted); }

ul.caveats {
  margin: var(--s-6) 0 var(--s-2); padding-left: var(--s-4);
  font-size: var(--text-sm); line-height: var(--leading-body);
}
ul.caveats li { margin: 0 0 var(--s-1); }
p.registers { font-size: var(--text-sm); margin: 0; }

@media (max-width: 34rem) {
  li.award .date { width: auto; }
  li.award .status-word { width: auto; }
  li.award .body,
  li.award .source { padding-left: 0; }
  details.programme > p.purpose,
  details.programme > p.source,
  ul.award-list { padding-left: var(--s-2); }
}

/* Datamodell: the generated schema reference — one table per model */
main.datamodell code {
  font-size: 0.9em;
  overflow-wrap: anywhere;
}
main.datamodell section.model { margin: var(--s-6) 0; }
main.datamodell section.model h3 {
  font: 400 var(--text-md) var(--font-sans);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-2);
  scroll-margin-top: var(--s-4);
}
main.datamodell section.model p.muted { margin: var(--s-2) 0; }
main.datamodell td { vertical-align: top; }

/* Roller (roles): one table per role group */
.role-group { margin: var(--s-5) 0; }
.role-group h3 { margin-bottom: var(--s-2); }
tr.resigned td { color: var(--ink-faint); }
.person-roles .resigned { color: var(--ink-faint); }
.person-holdings { margin-top: var(--s-6); }

details { margin: var(--s-5) 0; }
details summary {
  cursor: pointer;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}
details pre {
  margin-top: var(--s-3);
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow-x: auto;
  font-size: var(--text-xs);
  line-height: 1.6;
}

/* ── footer ─────────────────────────────────────────────── */
footer.site {
  display: flex;
  justify-content: center;
  gap: var(--s-5);
  padding: var(--s-5);
}
footer.site a {
  color: var(--ink-faint);
  font-size: var(--text-xs);
  text-decoration: none;
  transition: color var(--t-fast) ease;
}
footer.site a:hover { color: var(--ink); text-decoration: underline; }

/* ── shortcuts dialog ───────────────────────────────────── */
dialog {
  margin: auto;
  width: min(380px, calc(100vw - 2rem));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--ink);
  padding: var(--s-5);
}
dialog::backdrop { background: rgb(15 15 15 / 0.35); }
dialog[open] { animation: appear var(--t-med) var(--ease-out) both; }
dialog h2 {
  font-weight: 400;
  font-size: var(--text-md);
  margin-bottom: var(--s-4);
}
.shortcut-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-2) 0;
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.shortcut-row .keys { display: flex; gap: var(--s-1); }
dialog .close {
  margin-top: var(--s-4);
  width: 100%;
  padding: var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  font: 400 var(--text-sm) var(--font-sans);
  cursor: pointer;
  transition: border-color var(--t-fast) ease;
}
dialog .close:hover { border-color: var(--ink); }

@keyframes appear {
  from { opacity: 0; translate: 0 4px; }
  to { opacity: 1; translate: 0 0; }
}

.loading {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink-faint);
  font: 400 var(--text-sm) ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* The braille cycle a CLI tool spins while it waits on the network —
   which is exactly what this page is doing. Browsers that will not
   animate `content` hold the first frame, which still reads as
   deliberate rather than broken. */
.spinner::before {
  content: "⠋";
  animation: spinner-braille 0.9s steps(1) infinite;
}

@keyframes spinner-braille {
  0%   { content: "⠋"; }
  10%  { content: "⠙"; }
  20%  { content: "⠹"; }
  30%  { content: "⠸"; }
  40%  { content: "⠼"; }
  50%  { content: "⠴"; }
  60%  { content: "⠦"; }
  70%  { content: "⠧"; }
  80%  { content: "⠇"; }
  90%  { content: "⠏"; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Tool pages: query console, queue builder, subscribe ── */

/* Text areas — query input reads as code (mono), others as prose. */
.query-console textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 7rem;
  margin-top: var(--s-4);
  resize: vertical;
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font: 400 var(--text-md)/1.6 var(--font-sans);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.query-console textarea#sql,
.query-console textarea#query {
  font: 400 var(--text-sm)/1.6 ui-monospace, "SF Mono", Menlo, monospace;
  tab-size: 2;
}

/* Text / url / number inputs. */
.query-console input[type="text"],
.query-console input[type="url"],
.query-console input[type="number"] {
  box-sizing: border-box;
  padding: var(--s-2) var(--s-3);
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font: 400 var(--text-md) var(--font-sans);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.query-console textarea:focus-visible,
.query-console input:focus-visible {
  outline: none;
  border-color: var(--accent-text);
  box-shadow: 0 0 0 1px var(--accent-text);
}

/* Fieldsets group radio choices without a browser box. */
.query-console fieldset { border: 0; margin: var(--s-4) 0 0; padding: 0; }
.query-console legend {
  padding: 0;
  margin-bottom: var(--s-2);
  font: 400 var(--text-xs) var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.query-console input[type="radio"],
.query-console input[type="checkbox"] {
  accent-color: var(--accent-text);
  width: 1rem;
  height: 1rem;
  margin: 0;
}

/* Field labels: stacked for text inputs, inline for choices. */
.query-console .field { font-size: var(--text-sm); color: var(--ink-muted); }
.query-console label.field:has(input[type="text"]),
.query-console label.field:has(input[type="url"]) {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin-top: var(--s-4);
  max-width: 24rem;
}
.query-console fieldset .field,
.query-console label.field:has(input[type="radio"]),
.query-console label.field:has(input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-right: var(--s-4);
  cursor: pointer;
}

/* Buttons. */
.query-console button[type="submit"],
.query-console .btn-secondary,
.query-console .btn-danger {
  padding: var(--s-2) var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font: 400 var(--text-sm) var(--font-sans);
  cursor: pointer;
  transition: filter var(--t-fast) ease, background var(--t-fast) ease;
}
.query-console button[type="submit"] {
  padding: var(--s-2) var(--s-5);
  font-size: var(--text-md);
  background: var(--accent);
  color: var(--accent-ink);
}
.query-console button[type="submit"]:hover { filter: brightness(0.96); }
.query-console .btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border-strong);
}
.query-console .btn-secondary:hover { background: var(--border); }
.query-console .btn-danger {
  background: transparent;
  color: var(--red-text);
  border-color: var(--border-strong);
}
.query-console .btn-danger:hover { background: var(--surface); }

/* Actions row. */
.query-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-5);
}
.query-actions .field { color: var(--ink-muted); }
.query-actions .field input[type="number"] { width: 6rem; }

/* Example chips. */
.query-examples { margin: var(--s-6) 0; }
.query-examples h2 { margin-bottom: var(--s-3); }
.query-examples ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.query-examples li { margin: 0; }
.query-examples a {
  display: inline-block;
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  color: var(--ink);
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.query-examples a:hover { border-color: var(--border-strong); color: var(--accent-text); }

/* Schema / help disclosure. */
.query-schema { margin: var(--s-5) 0; }
.query-schema dl { margin: var(--s-3) 0 0; }
.query-schema dt { margin-top: var(--s-3); }
.query-schema dd { margin: 0 0 var(--s-2); color: var(--ink-muted); font-size: var(--text-sm); }

/* Result / error callouts. */
.query-result,
.query-error {
  margin: var(--s-5) 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--text-sm);
}
.query-result { border-left-color: var(--accent-text); }
.query-error { border-left-color: var(--red-text); color: var(--red-text); }

#results-panel { margin-top: var(--s-5); }
#results-panel table { font-size: var(--text-sm); }

/* ── Subscription change feed ───────────────────────────── */
.change-feed { list-style: none; padding: 0; margin: var(--s-5) 0 0; }
.change-feed .change {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
}
.change-feed .change:last-child { border-bottom: 0; }
.change-badge {
  flex: none;
  min-width: 3.5rem;
  text-align: center;
  padding: 2px var(--s-2);
  border-radius: 999px;
  font: 400 var(--text-xs) var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.change-added { background: color-mix(in srgb, var(--green) 22%, transparent); color: var(--green-text); }
.change-removed { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red-text); }
.change-changed { background: var(--hit-bg); color: var(--accent-text); }
.change-other { background: var(--surface); color: var(--ink-muted); }
.change-summary { flex: 1; min-width: 0; }
.change-at {
  flex: none;
  color: var(--ink-faint);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* Manage controls (subscription owner). */
.manage-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-4) 0;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.manage-label { margin-right: var(--s-2); font-size: var(--text-sm); color: var(--ink-faint); }
.inline-form { display: inline; margin: 0; }

/* Deregistered (soft-deleted) company badge in search results. */

/* ── personvernsidene ───────────────────────────────────────
   Lang brødtekst er en egen sidetype: samme tokens og samme
   komponenter som resten, men med luft nok til å faktisk leses.
   Scopet til .legal, så ingen datasider endrer seg. */
main.page.legal { width: min(720px, 100%); }
main.page.legal p { margin: 0 0 var(--s-4); max-width: 68ch; }
main.page.legal p.meta { margin-bottom: var(--s-2); }
main.page.legal p.lead {
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--ink-muted);
  margin: var(--s-5) 0 var(--s-4);
}
main.page.legal section {
  margin: var(--s-6) 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  scroll-margin-top: var(--s-4);
}
main.page.legal section h2 { margin-top: 0; }
/* Underoverskrift: samme språk som h2 (små versaler), men i full
   blekkfarge, så nivåene er til å skille fra hverandre. */
main.page.legal h3 {
  font: 400 var(--text-xs) var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink);
  margin: var(--s-6) 0 var(--s-2);
}
main.page.legal ul,
main.page.legal ol { margin: 0 0 var(--s-4); padding-left: var(--s-5); max-width: 68ch; }
main.page.legal li { margin-bottom: var(--s-2); }
main.page.legal li:last-child { margin-bottom: 0; }
main.page.legal blockquote {
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--ink-muted);
  max-width: 68ch;
}
main.page.legal .banner { max-width: 68ch; }
/* Bannere ligger utenfor brødtekstreglene, så lenkene der mister
   understrekingen og slutter å se ut som lenker. */
main.page.legal .banner a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
}
main.page.legal .banner a:hover { text-decoration-color: currentColor; }
main.page.legal .banner em { font-style: normal; font-weight: 400; color: var(--accent-text); }
main.page.legal td { font-variant-numeric: normal; vertical-align: top; }

/* Innholdsfortegnelsen: en stille kolonne, ikke en meny. */
main.page.legal .toc { margin: var(--s-5) 0 var(--s-6); }
main.page.legal .toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--s-6);
  font-size: var(--text-sm);
}
main.page.legal .toc li { margin-bottom: var(--s-1); break-inside: avoid; }
/* Slår av understrekingen brødtekstlenker har: en innholdsfortegnelse
   der hver linje er strøket under, leser som støy. */
main.page.legal .toc li a:not(.tab) { color: var(--ink-muted); text-decoration: none; }
main.page.legal .toc li a:not(.tab):hover { color: var(--accent-text); }
@media (max-width: 520px) {
  main.page.legal .toc ol { columns: 1; }
}