/* Component layer on top of tokens.css. Mobile-first; the omnibox is reachable on
   every page via the header. Class names follow the site's Danish UI idiom. */
* { box-sizing: border-box }
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  margin: 0; background: var(--flade); color: var(--tekst); line-height: 1.5;
}
a { color: var(--blaa) }
main { max-width: var(--bredde); margin: 0 auto; padding: 1.2rem 1rem 3rem }

/* Header: logo + slim omnibox on every page (hidden on the frontpage, whose hero
   search is the same control writ large). */
header.site { background: var(--hvid); border-bottom: 1px solid var(--kant) }
header.site .inder {
  max-width: var(--bredde); margin: 0 auto; padding: .6rem 1rem;
  display: flex; gap: 1rem; align-items: center;
}
.logo { font-size: 1.25rem; font-weight: 700; text-decoration: none; color: var(--tekst); white-space: nowrap }
.logo span { color: var(--blaa) }
.hovedsoeg { flex: 1; max-width: 28rem; margin-left: auto }
.hovedsoeg input {
  width: 100%; font-size: .95rem; padding: .45rem .7rem;
  border: 1px solid var(--kant); border-radius: var(--rund); background: var(--flade);
}
.hovedsoeg input:focus { background: var(--hvid); outline: 2px solid var(--blaa); outline-offset: -1px }

/* Breadcrumb */
nav.sti { font-size: .85rem; color: var(--svag); margin: 0 0 .6rem }
nav.sti a { color: var(--dis); text-decoration: none }
nav.sti a:hover { text-decoration: underline }
nav.sti .skil { margin: 0 .35rem }

/* Search boxes (frontpage hero + shared dropdown) */
.soegboks { display: flex; gap: .5rem; margin: .8rem 0 1.2rem }
.soegboks input {
  width: 100%; font-size: 1.05rem; padding: .65rem .8rem;
  border: 1px solid var(--kant); border-radius: var(--rund); background: var(--hvid);
}
.soegboks button {
  font-size: 1.05rem; padding: .65rem 1.1rem; border: 0; border-radius: var(--rund);
  background: var(--blaa); color: var(--hvid); cursor: pointer;
}
.soegboks button:hover { background: var(--blaa-moerk) }
.omniwrap { position: relative; flex: 1 }
.omnires {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--hvid); border: 1px solid var(--kant); border-radius: var(--rund);
  box-shadow: var(--skygge); z-index: 20; max-height: 22rem; overflow-y: auto;
}
.omnirad {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem .8rem; text-decoration: none; color: var(--tekst);
}
.omnirad:hover, .omnirad.sel { background: var(--flade) }
.omnirad .svag { white-space: nowrap }
.omnirad.doed > span:first-child { color: var(--dis) }

/* Cards, tables, text tones */
.kort { background: var(--hvid); border: 1px solid var(--kant); border-radius: var(--rund-stor); padding: 1rem; margin: .6rem 0 }
.dis { color: var(--dis) }
.svag { color: var(--svag) }
table { border-collapse: collapse; width: 100% }
th, td { text-align: left; padding: .35rem .6rem .35rem 0; border-bottom: 1px solid var(--kant); vertical-align: top }
th { font-weight: 600; color: var(--dis) }
td.tal, th.tal { text-align: right; font-variant-numeric: tabular-nums }
tr:last-child > td, tr:last-child > th { border-bottom: 0 }

/* Status badges + full-width banners. The active/ceased BOUNDARY lives in the read
   model (er_ophoert); these classes only colour what the page already knows. */
.badge {
  display: inline-block; font-size: .78rem; font-weight: 600; line-height: 1;
  padding: .3rem .5rem; border-radius: .35rem; vertical-align: .12rem; white-space: nowrap;
}
.badge-ok      { color: var(--ok);       background: var(--ok-flade) }
.badge-fare    { color: var(--fare);     background: var(--fare-flade) }
.badge-doed    { color: var(--doed);     background: var(--doed-flade) }
.badge-neutral { color: var(--dis);      background: var(--flade); border: 1px solid var(--kant) }
.banner { border-radius: var(--rund-stor); padding: .7rem 1rem; margin: .8rem 0; font-weight: 500 }
.banner-doed { background: var(--doed-flade); color: var(--doed); border: 1px solid var(--kant) }
.banner-fare { background: var(--fare-flade); color: var(--fare); border: 1px solid #f3d4d4 }

/* Facet search: sidebar left, results right; stacked on mobile. */
/* minmax(0, 1fr), not 1fr: a grid track defaults to min-width auto, so a long branche
   name in a facet made the whole /sog page scroll sideways to 565px at a 390px viewport.
   It also switched off the ellipsis on .facet a - text-overflow needs a parent that is
   actually constrained, and nothing here constrained it. Measured 02.08.2026. */
.soeg-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem }
@media (min-width: 800px) { .soeg-layout { grid-template-columns: 15rem minmax(0, 1fr) } }
.facetter { display: flex; flex-direction: column; gap: .6rem }
.facet { background: var(--hvid); border: 1px solid var(--kant); border-radius: var(--rund-stor); padding: .6rem .8rem }
.facet h3 { font-size: .85rem; margin: 0 0 .35rem; color: var(--dis); text-transform: uppercase; letter-spacing: .03em }
.facet a { display: flex; justify-content: space-between; gap: .6rem; padding: .18rem 0; text-decoration: none; font-size: .9rem }
.facet a:hover { text-decoration: underline }
.facet a > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.chip { display: inline-block; background: var(--hvid); border: 1px solid var(--kant); border-radius: 1rem; padding: .15rem .6rem; margin: 0 .3rem .3rem 0; font-size: .85rem; text-decoration: none }
.chip:hover { border-color: var(--blaa) }
.sorter { font-size: .9rem; color: var(--svag); display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 .5rem }

/* Stat tiles for the branche and kommune pages. */
.noegletal { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin: .8rem 0 }
@media (min-width: 700px) { .noegletal { grid-template-columns: repeat(4, 1fr) } }
.tal-flise { background: var(--hvid); border: 1px solid var(--kant); border-radius: var(--rund-stor); padding: .7rem .8rem }
.tal-flise .v { display: block; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums }
.tal-flise .l { display: block; font-size: .8rem; color: var(--dis); line-height: 1.3 }

/* Charts (Diagram.cs writes the SVG; every colour resolves here, never inline).
   The chart renders at natural width and SCROLLS on a narrow screen - squeezing an
   800 px chart into 350 px takes the year labels below 5 px and makes the picture a
   smear. Scrolling keeps type legible. */
/* direction:rtl parks the initial scroll at the RIGHT end, so a phone opens on the
   NEWEST years instead of on 2015 with the interesting half off-screen. The child is
   set back to ltr, so only the scroll origin changes and nothing inside is mirrored.
   This is the zero-JS version of scrollLeft = scrollWidth. */
.diagram-boks { overflow-x: auto; margin: .5rem 0 .2rem; -webkit-overflow-scrolling: touch; direction: rtl }
.diagram { display: block; max-width: none; direction: ltr }
.diagram-pos { fill: var(--blaa) }
.diagram-neg { fill: var(--fare) }
.diagram-net { stroke: var(--kant); stroke-width: 1 }
.diagram-nul { stroke: var(--svag); stroke-width: 1 }
.diagram-linje { fill: none; stroke: var(--blaa); stroke-width: 2; stroke-linejoin: round }
.diagram-punkt { fill: var(--blaa) }
.diagram-akse, .diagram-x { font-size: 10px; fill: var(--svag); font-variant-numeric: tabular-nums }
.diagram-baand { width: 100%; height: 12px; border-radius: 3px }
/* Composition segments use the dataviz skill's validated CATEGORICAL slots in their
   fixed order, not our status colours. Two reasons, both from that skill:
   (a) status colours are reserved for good/warning/serious/critical and must never
       double as "series 4" - and painting debt red says debt is bad, which is our
       opinion, not a fact. Property companies run at 26,5% median solidity by design.
       It is the same judgement-as-decoration we removed from the benchmark track.
   (b) the old tints failed the validator outright: #b9d0fa sat at 1,52:1 against the
       surface, outside the lightness band and under the chroma floor - which is
       exactly why "heraf likvider" read as disabled text in the first screenshot.
   Verified with scripts/validate_palette.js: both sets ALL CHECKS PASS. Re-run it if
   you change one - the colour part is computable, so compute it. */
.d-1 { fill: #2a78d6 } .d-2 { fill: #008300 } .d-3 { fill: #e87ba4 } .d-4 { fill: #eda100 }
/* Chart frame: title, unit and the source line that carries the basis. */
.diagram-ramme { margin: .9rem 0 }
.diagram-ramme h3 { font-size: .95rem; margin: 0 0 .1rem }
.diagram-ramme .enhed { font-size: .8rem; color: var(--svag); margin: 0 }
.diagram-ramme .kilde { font-size: .78rem; color: var(--svag); margin: .15rem 0 0 }
/* Legend TEXT stays in muted ink and the swatch beside it carries the identity. The
   first version coloured the text itself, which is the one thing the dataviz skill
   forbids outright - and it showed: the palest segment's label was barely legible and
   read as a disabled control rather than as data. */
.forklaring { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .8rem; color: var(--dis); margin: .3rem 0 0 }
.forklaring span { display: inline-flex; align-items: center }
.forklaring span::before {
  content: ""; display: inline-block; width: .6rem; height: .6rem; flex: none;
  border-radius: 2px; margin-right: .35rem; background: var(--swatch, currentColor);
}

/* Top lists: the branche text is a full DB07 label and runs to five lines in a narrow
   column, which triples every row's height and buries the numbers. Clamp it to two
   lines - the full text stays in the title attribute and on the company's own page. */
.topliste td.branche { max-width: 15rem }

/* Compare: columns stay readable on a phone by scrolling, not by shrinking. */
.sammenlign-boks { overflow-x: auto }
.sammenlign-boks table { min-width: 34rem }
/* The row labels stay put while the company columns scroll. Without this a phone shows
   a column of numbers with no way to see what they are - the labels have scrolled off
   the left edge, which is the one thing a comparison table cannot afford. */
.sammenlign-boks th:first-child {
  white-space: nowrap; color: var(--dis);
  position: sticky; left: 0; background: var(--hvid); z-index: 1;
}

/* Signals: facts with a definition, never a score. */
.signaler { display: flex; flex-direction: column; gap: .4rem; margin: .6rem 0 }
.signal { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem;
  border-radius: var(--rund); border: 1px solid var(--kant); background: var(--hvid) }
.signal.fare { border-color: #f3d4d4; background: var(--fare-flade) }
.signal.advarsel { border-color: #f2e2c0; background: var(--advarsel-flade) }
.signal .navn { font-weight: 600 }
.signal .def { font-size: .82rem; color: var(--dis) }
.signal.fare .navn { color: var(--fare) }
.signal.advarsel .navn { color: var(--advarsel) }

/* Benchmark: where this company sits among comparable ones. */
.percentil { background: var(--hvid); border: 1px solid var(--kant); border-radius: var(--rund-stor); padding: .7rem .8rem; margin: .6rem 0 }
/* A NEUTRAL track, deliberately. The first version ran red-to-green, which tells the
   reader that low is bad and high is good - an editorial claim, and for half these
   metrics a wrong one (high assets are not a virtue). Product principle 5 says facts,
   not scores, and a gradient is a score drawn as decoration
   ([[a-cosmetic-change-can-carry-a-claim]]). The marker carries the information. */
.percentil .spor { position: relative; height: 8px; border-radius: 4px; background: var(--flade); border: 1px solid var(--kant); margin: .5rem 0 .3rem }
.percentil .maerke { position: absolute; top: -3px; width: 3px; height: 14px; border-radius: 2px; background: var(--blaa) }
.percentil .ender { display: flex; justify-content: space-between; font-size: .75rem; color: var(--svag) }

/* "siden 2016" is four syllables and a year; wrapping it costs a line per role and reads
   as a layout accident. The mobile rules below stack the row anyway, so this only binds
   on wide screens where the column is merely narrow, not short of room. */
.roller td.svag { white-space: nowrap }

/* Ownership graph: three bands - owners, this company, what it owns - in flow layout
   rather than an SVG tree. The charts above scroll inside a fixed-width box because
   their geometry is fixed and their labels are 10px; here the company NAMES are the
   content, SVG cannot wrap text, and a name cut at 22 characters is a worse diagram than
   none. Flex-wrap means a phone stacks the boxes instead of scrolling past them. */
.ejergraf { margin: .3rem 0 .2rem; text-align: center }
.ejergraf .baandnavn { font-size: .78rem; color: var(--svag); margin: .2rem 0 .3rem; text-transform: uppercase; letter-spacing: .03em }
.ejergraf .lag { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center }
/* The connector. Two pixels of border is the whole diagram part of this diagram: it
   says the bands are one structure and not three lists that happen to be stacked. */
.ejergraf .stik { width: 0; height: 1rem; margin: .1rem auto; border-left: 2px solid var(--kant) }
.knude {
  display: block; text-align: left; text-decoration: none; color: var(--tekst);
  min-width: 9rem; max-width: 15rem; padding: .4rem .55rem; font-size: .86rem;
  line-height: 1.3; border: 1px solid var(--kant); border-radius: var(--rund); background: var(--hvid);
}
.knude:hover { border-color: var(--blaa) }
.knude .navn { display: block; font-weight: 600 }
.knude .pct { display: block; font-size: .78rem; color: var(--dis); font-variant-numeric: tabular-nums }
/* The subject sits in the middle and must not read as one more owner. It is also the one
   box that is NOT a link - you are already on it. */
.knude-selv { display: inline-block; border-color: var(--blaa); background: var(--flade) }
/* Ceased carries the badge as well as the muted ink: colour alone is never the signal. */
.knude-doed .navn { color: var(--doed) }
/* Overflow disclosure, shared by the graph and the role tables: the rows stay in the
   page for a crawler and for anyone who wants them, without owning the first screen. */
.mere { margin: .4rem 0 0 }
.mere summary { font-size: .82rem; color: var(--blaa); cursor: pointer }
.mere .lag, .mere table { margin-top: .4rem }
.ejergraf + .kilde { font-size: .78rem; color: var(--svag); margin: .5rem 0 0 }

/* The group sentence above the ownership graph: control is a fact about the whole
   structure, so it is stated once in words before the boxes rather than drawn into them. */
.koncernlinje { font-size: .88rem; margin: .2rem 0 .5rem; padding: .5rem .7rem; border-radius: var(--rund); background: var(--flade); border: 1px solid var(--kant) }

/* Koncern box on a person page: several roles inside one group are ONE relationship. */
.koncernboks { border-left: 3px solid var(--blaa) }
.koncernboks .baandnavn { font-size: .78rem; color: var(--svag); margin: 0 0 .3rem; text-transform: uppercase; letter-spacing: .03em }

/* Career timeline. Percentage widths on a shared axis, no SVG - the company name is the
   content and has to wrap, same argument as the ownership graph above. */
.tidslinje { display: flex; flex-direction: column; gap: .3rem; margin: .2rem 0 }
.tidslinje .rk { display: grid; grid-template-columns: minmax(6rem, 12rem) 1fr auto; gap: .5rem; align-items: center; font-size: .84rem }
.tidslinje .etiket { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tidslinje .spor { position: relative; height: 10px; border-radius: 5px; background: var(--flade); border: 1px solid var(--kant) }
.tidslinje .bjaelke { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: var(--kant); min-width: 3px }
/* A current role is the one distinction the bar makes, so it gets the ink. Everything
   else stays the neutral track colour: length is the data here, not colour. */
.tidslinje .bjaelke.nu { background: var(--blaa) }
.tidslinje .aar { color: var(--svag); font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap }
.tidslinje + .kilde { font-size: .78rem; color: var(--svag); margin: .5rem 0 0 }
@media (max-width: 480px) {
  .tidslinje .rk { grid-template-columns: minmax(5rem, 8rem) 1fr auto; font-size: .8rem }
}

/* Empty state: always a sentence with a WHY, never a bare dash. */
.tom { color: var(--dis); background: var(--hvid); border: 1px dashed var(--kant); border-radius: var(--rund-stor); padding: .8rem 1rem; margin: .6rem 0 }

footer.site { max-width: var(--bredde); margin: 0 auto; padding: 1rem; font-size: .8rem; color: var(--svag) }

h1 { font-size: 1.6rem; margin: .2rem 0 .3rem }
h2 { font-size: 1.15rem; margin: 1.4rem 0 .3rem }

@media (max-width: 480px) {
  .hovedsoeg input { font-size: .9rem }
  h1 { font-size: 1.35rem }
  th, td { padding-right: .4rem }
  /* Role tables carry four columns - organ, name, function, since - and at 390px they
     forced the WHOLE PAGE to scroll sideways to 602px. Measured, not guessed: every
     company page with management had it, because auto table layout would rather overflow
     than wrap. Stacking each row is the only fix that keeps all four facts; a scroll box
     would hide the name column exactly when it is needed, which is the mistake the
     comparison table was built to avoid. */
  .roller, .roller tbody, .roller tr, .roller td { display: block; width: auto }
  .roller tr { border-bottom: 1px solid var(--kant); padding: .4rem 0 }
  .roller td { border: 0; padding: 0 }
  .roller td:empty { display: none }
  .roller td.dis, .roller td.svag { font-size: .82rem }
  /* Every other table: let a long branche label or street name break, so auto layout can
     fit inside the viewport instead of pushing the whole page sideways. This is what
     lowers min-content width - `break-word` does not, which is why it has to be
     `anywhere`. Two pages were still 481px and 400px wide at a 390px viewport after the
     role tables were fixed; both are 390 now. */
  .kort table td, .kort table th { overflow-wrap: anywhere }
}