/*
 * Koncern & navigation — "Alle selskaber", the ⌘K palette, the notification
 * centre and the company switcher.
 *
 * Kept out of notarium.css deliberately: that file is workstream A's design
 * system, and Propshaft's `stylesheet_link_tag :app` picks up every file under
 * app/assets/stylesheets anyway. Nothing below invents a colour — every value
 * is a --nt-* token, so both themes and any future palette re-tune come for
 * free, and "what colour is an overdue frist" still has exactly one answer.
 *
 * Same cascade note as notarium.css: this file is unlayered, so its rules win
 * over Tailwind utilities on the same property. Components therefore carry
 * their own sizing rather than expecting a utility to override it.
 */

/* ══════════════════════════════════════════════════════════════════════
   0. SHARED — the frist tone variable
   Screens name the frist status; the mapping to a semantic family lives in
   notarium.css (--nt-frist-*). A .koncern-frist-<tone> class sets one local
   variable and every child reads it, so a row, a chip and a marker cannot
   disagree about how urgent the same frist is.
   ══════════════════════════════════════════════════════════════════════ */

.koncern-frist-info { --koncern-frist: var(--nt-info); --koncern-frist-soft: var(--nt-info-soft); --koncern-frist-text: var(--nt-info-text); }
.koncern-frist-warn { --koncern-frist: var(--nt-warn); --koncern-frist-soft: var(--nt-warn-soft); --koncern-frist-text: var(--nt-warn-text); }
.koncern-frist-danger { --koncern-frist: var(--nt-danger); --koncern-frist-soft: var(--nt-danger-soft); --koncern-frist-text: var(--nt-danger-text); }
.koncern-frist-ok { --koncern-frist: var(--nt-ok); --koncern-frist-soft: var(--nt-ok-soft); --koncern-frist-text: var(--nt-ok-text); }
.koncern-frist-neutral { --koncern-frist: var(--nt-neutral); --koncern-frist-soft: var(--nt-neutral-soft); --koncern-frist-text: var(--nt-neutral-text); }

.koncern-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex: none;
  background: var(--nt-neutral);
}

.koncern-dot-ok { background: var(--nt-ok); }
.koncern-dot-warn { background: var(--nt-warn); }
.koncern-dot-danger { background: var(--nt-danger); }
.koncern-dot-info { background: var(--nt-info); }
.koncern-dot-neutral { background: var(--nt-neutral); }

/* The "§ 40 kritisk" flag. Small, uppercase, never coloured on its own — it
   inherits the frist's tone so it cannot contradict the row it sits in. */
.koncern-critical {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.36rem;
  border-radius: var(--nt-radius-xs);
  border: 1px solid var(--nt-danger-border);
  background: var(--nt-danger-soft);
  color: var(--nt-danger-text);
  font-family: var(--nt-font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 0.08em;
}

/* ══════════════════════════════════════════════════════════════════════
   1. PAGE SHELL (Alle selskaber, Beskeder)
   ══════════════════════════════════════════════════════════════════════ */

/* The section rhythm. Byte-for-byte `.nt-stack` from notarium.css, which is now
   the app-wide scale — kept as its own class only because .koncern-page also
   carries the header override below and is applied to a screen (Beskeder) that
   belongs to another workstream. If the two ever drift, .nt-stack is right. */
.koncern-page {
  display: flex;
  flex-direction: column;
  gap: var(--nt-space-8);
}

/* A control room needs width, and the application layout wraps the workspace
   in .nt-page-narrow (52rem). Rather than editing a layout another workstream
   owns, this page breaks out of its container: symmetric margins keep it
   centred on the viewport and it can never exceed 100vw minus the layout's own
   gutter, so nothing ever scrolls sideways. When the layout gains a wide
   variant this quietly stops doing anything. A message list does NOT get this
   — long lines of prose are harder to read, not easier. */
.koncern-page-wide {
  --koncern-page-w: min(var(--nt-page-max), calc(100vw - 3rem));
  width: var(--koncern-page-w);
  margin-inline: calc((100% - var(--koncern-page-w)) / 2);
}

/* page_header brings its own bottom margin; inside a flex column that stacks
   with the gap and reads as a hole. */
.koncern-page .nt-page-header { margin-bottom: 0; }

.koncern-section { display: flex; flex-direction: column; gap: var(--nt-space-4); }

/* TWO SECTIONS SIDE BY SIDE ON A DESKTOP.

   The control room was six bands stacked at every width, so a 1440px screen
   showed exactly what a phone did — half of it empty, and the fristkalender a
   full screen below the forløb even when both held four rows. Those two are
   the same question asked twice (what is moving, what is coming), so above
   65rem they share a line.

   Not a grid below 65rem, so the children stack in source order with the
   parent `.koncern-page` gap doing the spacing — which is what they did
   before this class existed. 65rem is the breakpoint registry's "desktop —
   sidebars, asides, split heroes" step; `align-items: start` so a short
   column does not stretch its card to match a tall neighbour. */
@media (min-width: 65rem) {
  .koncern-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--nt-space-6);
    align-items: start;
  }
}

.koncern-section-head { display: flex; flex-direction: column; gap: 0.15rem; }

.koncern-section-title {
  font-family: var(--nt-font-display);
  font-weight: 600;
  font-size: var(--nt-text-xl);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.koncern-section-sub {
  font-size: var(--nt-text-sm);
  color: var(--nt-text-secondary);
  max-width: var(--nt-prose-max);
}

.koncern-footnote {
  font-size: var(--nt-text-xs);
  color: var(--nt-text-tertiary);
  max-width: var(--nt-prose-max);
}

/* ══════════════════════════════════════════════════════════════════════
   2. THE VERDICT LINE
   The one sentence a koncern owner reads before anything else.
   ══════════════════════════════════════════════════════════════════════ */

.koncern-headline {
  display: flex;
  align-items: flex-start;
  gap: var(--nt-space-4);
  padding: var(--nt-space-5) var(--nt-space-6);
}

.koncern-headline-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--nt-radius);
  background: var(--nt-neutral-soft);
  color: var(--nt-neutral-text);
  border: 1px solid var(--nt-neutral-border);
}

.koncern-headline-icon-ok { background: var(--nt-ok-soft); color: var(--nt-ok-text); border-color: var(--nt-ok-border); }
.koncern-headline-icon-warn { background: var(--nt-warn-soft); color: var(--nt-warn-text); border-color: var(--nt-warn-border); }
.koncern-headline-icon-danger { background: var(--nt-danger-soft); color: var(--nt-danger-text); border-color: var(--nt-danger-border); }

.koncern-headline-title {
  font-family: var(--nt-font-display);
  font-weight: 600;
  font-size: var(--nt-text-xl);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

/* ══════════════════════════════════════════════════════════════════════
   2b. THE SINGLE-SELSKAB CARD
   Overblik for the customer who owns one ApS — which is most of them.

   It is deliberately ONE object rather than a grid of one: the verdict, the
   næste frist, the four counters and the ways in, stacked inside a single
   card with rules between them. The type scale steps up from the koncern
   card (name at --nt-text-2xl, the frist date at --nt-text-2xl) because this
   card is the whole viewport, not one tile of twelve — at the grid's sizes it
   would read as a lonely fragment on an empty page.

   Everything reuses the tone machinery above: .koncern-headline-icon-* for
   the verdict, .koncern-frist-<tone> for the frist block, .koncern-critical
   for the § flag. No new colour is invented here, and none may be.
   ══════════════════════════════════════════════════════════════════════ */

.koncern-solo {
  display: flex;
  flex-direction: column;
  gap: var(--nt-space-5);
  padding: var(--nt-space-6);
}

.koncern-solo-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nt-space-4);
  flex-wrap: wrap;
}

.koncern-solo-identity { min-width: 0; }

.koncern-solo-cvr {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  font-size: var(--nt-text-xs);
  color: var(--nt-text-tertiary);
}

.koncern-solo-name {
  margin-top: 0.35rem;
  font-family: var(--nt-font-display);
  font-weight: 600;
  font-size: var(--nt-text-2xl);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.koncern-solo-cta { flex: none; }

.koncern-solo-verdict {
  display: flex;
  align-items: flex-start;
  gap: var(--nt-space-4);
  padding-top: var(--nt-space-5);
  border-top: 1px solid var(--nt-border-subtle);
}

.koncern-solo-verdict-title {
  font-family: var(--nt-font-display);
  font-weight: 600;
  font-size: var(--nt-text-lg);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 0.15rem;
}

/* The næste-frist slab. Same construction as .koncern-card-frist, one size up:
   tinted by the FRIST's urgency (--koncern-frist-*), never by the card's, so a
   selskab that needs attention because a document is unsigned does not paint a
   frist eleven months out red. */
.koncern-solo-frist {
  padding: var(--nt-space-4) var(--nt-space-5);
  border-radius: var(--nt-radius);
  background: var(--koncern-frist-soft, var(--nt-surface-raised));
  border: 1px solid var(--nt-border-subtle);
  color: var(--koncern-frist-text, var(--nt-text));
}

.koncern-solo-frist .nt-stat-label { margin-bottom: 0.35rem; }

.koncern-solo-frist-line {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.koncern-solo-frist-date {
  font-family: var(--nt-font-display);
  font-weight: 600;
  font-size: var(--nt-text-2xl);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.koncern-solo-frist-days { font-size: var(--nt-text-md); opacity: 0.85; }

.koncern-solo-frist-name {
  margin-top: 0.3rem;
  font-size: var(--nt-text-sm);
  color: var(--nt-text-secondary);
}

.koncern-solo-counters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--nt-space-4);
  padding-top: var(--nt-space-5);
  border-top: 1px solid var(--nt-border-subtle);
}

.koncern-solo-counters dt {
  font-family: var(--nt-font-mono);
  font-size: var(--nt-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--nt-text-tertiary);
}

.koncern-solo-counters dd {
  margin-top: 0.15rem;
  font-family: var(--nt-font-display);
  font-weight: 600;
  font-size: var(--nt-text-2xl);
  line-height: 1.1;
}

.koncern-solo-links {
  display: flex;
  align-items: center;
  gap: var(--nt-space-2);
  flex-wrap: wrap;
  padding-top: var(--nt-space-5);
  border-top: 1px solid var(--nt-border-subtle);
}

.koncern-solo-links-label {
  font-family: var(--nt-font-mono);
  font-size: var(--nt-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--nt-text-tertiary);
  margin-right: var(--nt-space-2);
}

.koncern-solo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem;
  border-radius: var(--nt-radius-full);
  border: 1px solid var(--nt-border-subtle);
  background: var(--nt-surface);
  font-size: var(--nt-text-sm);
  color: var(--nt-text-secondary);
  transition: border-color var(--nt-duration) var(--nt-ease),
              color var(--nt-duration) var(--nt-ease);
}

.koncern-solo-link:hover {
  border-color: var(--nt-seal-border);
  color: var(--nt-seal-text);
}

.koncern-solo-link svg { flex: none; color: var(--nt-text-tertiary); }
.koncern-solo-link:hover svg { color: var(--nt-seal-text); }

/* The way into the arkiv under "Seneste dokumenter", inside the list card. */
.koncern-solo-vault-link {
  padding: var(--nt-space-3) var(--nt-space-5) var(--nt-space-4);
  border-top: 1px solid var(--nt-border-subtle);
}

/* On a phone the four counters go two-up rather than shrinking to a column of
   labels nobody can read, and the CTA drops under the name instead of fighting
   it for the same line. */
@media (max-width: 40rem) {
  .koncern-solo { padding: var(--nt-space-5); }
  .koncern-solo-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .koncern-solo-cta { width: 100%; }
  .koncern-solo-cta .nt-btn { width: 100%; }
  .koncern-solo-name { font-size: var(--nt-text-xl); }
  .koncern-solo-frist-date { font-size: var(--nt-text-xl); }

  /* The label takes its own line rather than sitting on the first chip's row
     and orphaning the rest of them into a ragged second line. */
  .koncern-solo-links-label { flex-basis: 100%; margin-right: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   3. TOTALS + STATUS GRID
   ══════════════════════════════════════════════════════════════════════ */

.koncern-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--nt-space-4);
}

/* Without this a long mono caption ("FRISTER INDEN FOR 14 DAGE") sets the
   track's min-content width and auto-fit silently drops a column. */
.koncern-totals > * { min-width: 0; }

.koncern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: var(--nt-space-4);
}

.koncern-card {
  display: flex;
  flex-direction: column;
  gap: var(--nt-space-4);
  padding: var(--nt-space-5);
}

.koncern-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nt-space-3);
}

.koncern-card-name {
  font-family: var(--nt-font-display);
  font-weight: 600;
  font-size: var(--nt-text-lg);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.koncern-card-cvr { margin-top: 0.15rem; font-size: var(--nt-text-xs); color: var(--nt-text-tertiary); }

.koncern-card-attention {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: var(--nt-text-sm);
  color: var(--nt-text-secondary);
}

.koncern-card-attention li { display: flex; align-items: center; gap: 0.45rem; }
.koncern-card-attention svg { flex: none; color: var(--nt-text-tertiary); }

.koncern-card-frist {
  padding: var(--nt-space-3) var(--nt-space-4);
  border-radius: var(--nt-radius);
  background: var(--koncern-frist-soft, var(--nt-surface-raised));
  border: 1px solid var(--nt-border-subtle);
}

.koncern-card-frist .nt-stat-label { margin-bottom: 0.25rem; }

.koncern-card-frist-line {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  color: var(--koncern-frist-text, var(--nt-text));
}

.koncern-card-frist-date { font-weight: 600; font-size: var(--nt-text-md); }
.koncern-card-frist-days { font-size: var(--nt-text-sm); opacity: 0.85; }

.koncern-card-frist-name {
  margin-top: 0.2rem;
  font-size: var(--nt-text-sm);
  color: var(--nt-text-secondary);
}

.koncern-card-counters {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--nt-space-3);
  padding-top: var(--nt-space-3);
  border-top: 1px solid var(--nt-border-subtle);
}

.koncern-card-counters dt {
  font-family: var(--nt-font-mono);
  font-size: var(--nt-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--nt-text-tertiary);
}

.koncern-card-counters dd {
  font-family: var(--nt-font-display);
  font-weight: 600;
  font-size: var(--nt-text-lg);
  line-height: 1.2;
}

.koncern-card-foot { margin-top: auto; }

/* ══════════════════════════════════════════════════════════════════════
   4. ÅBNE BEGIVENHEDER
   Deliberately the same row grammar as the timeline below — one card, one
   list, the whole row a link — because a control room the eye has to relearn
   halfway down is two screens stacked on top of each other.

   What differs is where the colour lives. A frist row is tinted by urgency;
   an event's status is a STAGE, not a deadline, so the row stays neutral and
   only the badge is coloured. Tinting both would put two rows in the same red
   on one screen meaning two different things.
   ══════════════════════════════════════════════════════════════════════ */

.koncern-events { padding: var(--nt-space-2) 0; }

.koncern-event {
  display: flex;
  align-items: center;
  gap: var(--nt-space-3);
  padding: 0.6rem var(--nt-space-6);
  text-decoration: none;
  color: inherit;
  border-left: 3px solid transparent;
  transition:
    background-color var(--nt-duration-fast) var(--nt-ease),
    border-color var(--nt-duration-fast) var(--nt-ease);
}

.koncern-event:hover {
  background: var(--nt-surface-raised);
  border-left-color: var(--nt-border);
}

.koncern-event-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.koncern-event-title {
  font-size: var(--nt-text-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Selskab and start date on one line: two facts that are only ever read
   together, and neither is worth a row of its own in a list this dense. */
.koncern-event-sub {
  font-size: var(--nt-text-xs);
  color: var(--nt-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A badge is a flex item like any other and will happily squeeze its label
   into two lines when the selskabsnavn is long. */
.koncern-event-badge { flex: none; }

/* The action column is min-width'd and right-aligned so the badges beside it
   line up in a column of their own. Two labels of different lengths
   ("Fortsæt guiden" / "Åbn") otherwise push each badge to its own
   x-position, and a status column that zig-zags is one you stop scanning.
   A min-width, not a width: a longer translation grows the column. */
.koncern-event-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  min-width: 9.5rem;
  font-size: var(--nt-text-sm);
  color: var(--nt-text-secondary);
  white-space: nowrap;
}

.koncern-event:hover .koncern-event-cta { color: var(--nt-text); }

.koncern-event-chevron { flex: none; color: var(--nt-text-disabled); }

/* Narrow: the name takes the first line on its own, the badge and the action
   share the second. Nothing is dropped — a truncated action label is a row
   you cannot tell apart from the one above it. */
@media (max-width: 40rem) {
  .koncern-event { flex-wrap: wrap; }
  .koncern-event-main { flex-basis: 100%; }
  .koncern-event-cta { margin-left: auto; }

  /* A document row has no action label, so its chevron is a direct child with
     no .koncern-event-cta to push it right — without this the badge and the
     chevron huddle on the left of the second line while every forløb row
     above lines its action up on the right. */
  .koncern-event > .koncern-event-chevron { margin-left: auto; }
}

/* ══════════════════════════════════════════════════════════════════════
   5. CONSOLIDATED FRIST TIMELINE
   A single spine down the left, so twelve months of five companies read as
   one sequence rather than five lists.
   ══════════════════════════════════════════════════════════════════════ */

.koncern-timeline { padding: var(--nt-space-2) 0; }

.koncern-timeline-month {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: var(--nt-space-3) var(--nt-space-6) var(--nt-space-2);
  font-family: var(--nt-font-mono);
  font-size: var(--nt-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--nt-text-tertiary);
  /* Clears the sticky .nt-topbar so a month heading is never hidden behind it
     while scrolling a long calendar. */
  position: sticky;
  top: 4rem;
  background: var(--nt-surface);
  z-index: 1;
}

.koncern-timeline-group-overdue .koncern-timeline-month { color: var(--nt-danger-text); }

.koncern-timeline-count {
  margin-left: auto;
  padding: 0.05rem 0.45rem;
  border-radius: var(--nt-radius-full);
  background: var(--nt-surface-raised);
  border: 1px solid var(--nt-border-subtle);
  color: var(--nt-text-tertiary);
  letter-spacing: 0;
}

.koncern-tl {
  display: flex;
  align-items: center;
  gap: var(--nt-space-3);
  padding: 0.6rem var(--nt-space-6);
  text-decoration: none;
  color: inherit;
  border-left: 3px solid transparent;
  transition:
    background-color var(--nt-duration-fast) var(--nt-ease),
    border-color var(--nt-duration-fast) var(--nt-ease);
}

.koncern-tl:hover {
  background: var(--nt-surface-raised);
  border-left-color: var(--koncern-frist, var(--nt-border));
}

/* A frist with nowhere honest to go — an ordinær generalforsamling that no
   forløb has been started for yet. It keeps the row's shape and its tone rail,
   and gives up only the things that promise a click: the hover and (in the
   partial) the chevron. A row that looks clickable and is not is worse than a
   row that plainly is not. */
.koncern-tl.koncern-tl-static { cursor: default; }
.koncern-tl.koncern-tl-static:hover { background: transparent; }

.koncern-tl-marker {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--koncern-frist, var(--nt-neutral));
}

.koncern-tl-date {
  flex: none;
  width: 4.6rem;
  font-size: var(--nt-text-sm);
  color: var(--koncern-frist-text, var(--nt-text-secondary));
  font-weight: 600;
}

.koncern-tl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* WRAPS, never clipped. A one-line ellipsis was survivable while the timeline
   had the full page measure to itself; beside the forløb column it started
   cutting frister down to "Registrering hos Erhvervsstyrelsen ..." — and which
   registrering it is, is the whole content of the row. The row is already a
   flex column, so a second line costs height and nothing else. */
.koncern-tl-title {
  font-size: var(--nt-text-base);
  line-height: 1.35;
  text-wrap: pretty;
}

.koncern-tl-company { font-size: var(--nt-text-xs); color: var(--nt-text-tertiary); }

.koncern-tl-days {
  flex: none;
  font-size: var(--nt-text-sm);
  color: var(--koncern-frist-text, var(--nt-text-secondary));
  white-space: nowrap;
}

.koncern-tl-chevron { flex: none; color: var(--nt-text-disabled); }

.koncern-timeline-foot {
  padding: var(--nt-space-4) var(--nt-space-6);
  border-top: 1px solid var(--nt-border-subtle);
  font-size: var(--nt-text-xs);
}

@media (max-width: 40rem) {
  .koncern-tl { flex-wrap: wrap; }
  .koncern-tl-days { width: 100%; padding-left: 5.6rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   6. COMPANY SWITCHER
   ══════════════════════════════════════════════════════════════════════
   A section inside the navbar's brand dropdown (koncern/_company_switcher),
   not a dropdown of its own — the positioning, width and open/close chrome
   all belong to navbar.css's `.nt-dropdown` / `.nt-navbar-menu`. What is here
   is only the CONTENTS: the search field, the list, each row. */

.koncern-switcher-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 var(--nt-space-2) var(--nt-space-1);
  padding: 0.35rem 0.6rem;
  border-radius: var(--nt-radius-sm);
  border: 1px solid var(--nt-border);
  background: var(--nt-surface);
  color: var(--nt-text-tertiary);
}

.koncern-switcher-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--nt-text);
  font-family: var(--nt-font-body);
  font-size: var(--nt-text-sm);
  outline: none;
}

.koncern-switcher-item,
.koncern-switcher-all { gap: 0.6rem; }
/* Compound: `.nt-menu-item` sets align-items:center at the same specificity
   and lives in notarium.css, which loads after this file. */
.nt-menu-item.koncern-switcher-item { align-items: flex-start; }

/* [hidden] loses to .nt-menu-item's display, so the filter needs this to
   actually hide a row. */
.koncern-switcher-item[hidden] { display: none; }

.koncern-switcher-item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.koncern-switcher-item-text > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.koncern-switcher-hint { font-size: var(--nt-text-xs); color: var(--nt-text-tertiary); }

/* Status in words, not just a colour. The row carries `.koncern-frist-<tone>`
   so this reads the same --koncern-frist-text the date chip used to. */
.koncern-switcher-status {
  font-size: var(--nt-text-xs);
  font-weight: 550;
  color: var(--koncern-frist-text, var(--nt-text-tertiary));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.koncern-switcher-frist {
  flex: none;
  align-self: center;
  font-family: var(--nt-font-mono);
  font-size: var(--nt-text-xs);
  font-weight: 550;
  color: var(--koncern-frist-text, var(--nt-text-tertiary));
  white-space: nowrap;
}

/* A slightly larger dot in the switcher, with a soft ring so "i orden" and
   "overskredet" survive a glance the 8px chip did not. Scoped: the grid
   cards keep the original size. */
.koncern-switcher-item .koncern-dot,
.nt-mobile-company-link .koncern-dot {
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.28rem;
}
.koncern-switcher-item .koncern-dot-ok,
.nt-mobile-company-link .koncern-dot-ok { box-shadow: 0 0 0 3px var(--nt-ok-soft); }
.koncern-switcher-item .koncern-dot-warn,
.nt-mobile-company-link .koncern-dot-warn { box-shadow: 0 0 0 3px var(--nt-warn-soft); }
.koncern-switcher-item .koncern-dot-danger,
.nt-mobile-company-link .koncern-dot-danger { box-shadow: 0 0 0 3px var(--nt-danger-soft); }
.koncern-switcher-item .koncern-dot-info,
.nt-mobile-company-link .koncern-dot-info { box-shadow: 0 0 0 3px var(--nt-info-soft); }

/* The truncation escape hatch. Muted and right-aligned on purpose — it is not
   another selskab to pick, it is a way OUT of a capped list, and dressing it
   like one more row would make it look like the ninth company rather than the
   door past the first eight. Compound selectors (not just `.koncern-
   switcher-see-all` alone): notarium.css's `.nt-menu-item` sets `color` at the
   same specificity and loads after this file in the `:app` bundle, so a bare
   class here would lose the cascade tie silently. */
.koncern-switcher-see-all { justify-content: space-between; font-size: var(--nt-text-sm); }
.nt-menu-item.koncern-switcher-see-all { color: var(--nt-text-tertiary); }
.nt-menu-item.koncern-switcher-see-all:hover,
.nt-menu-item.koncern-switcher-see-all:focus-visible { color: var(--nt-text); }

.koncern-switcher-empty { padding: var(--nt-space-4) var(--nt-space-5); font-size: var(--nt-text-sm); }

/* ══════════════════════════════════════════════════════════════════════
   KOM GODT I GANG — the first-run checklist
   ══════════════════════════════════════════════════════════════════════

   It sits ABOVE the verdict on Mine selskaber, which is the one place on this
   screen where something can outrank "er der noget, der brænder?". So it has
   to be legible as setup and not as alarm: seal-toned like the upsell, never
   amber and never red. Nothing here is late — it has not been started.

   It is also temporary furniture. Onboarding::Checklist#open? stops rendering
   it the moment the last row ticks, so nothing below is designed to look good
   as five green ticks; the done state exists for the rows that finish while
   others are still open. */

.koncern-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--nt-space-4);
  padding: var(--nt-space-5);
  border: 1px solid var(--nt-seal-border);
  border-radius: var(--nt-radius-lg);
  background: var(--nt-seal-soft);
}

.koncern-checklist-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nt-space-4);
}

.koncern-checklist-eyebrow {
  margin: 0;
  font-family: var(--nt-font-mono);
  font-size: var(--nt-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--nt-seal-text);
}

.koncern-checklist-title {
  margin: 0.2rem 0 0;
  font-family: var(--nt-font-display);
  font-weight: 600;
  font-size: var(--nt-text-lg);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--nt-text);
  overflow-wrap: anywhere;
}

.koncern-checklist-sub {
  margin: 0.2rem 0 0;
  font-size: var(--nt-text-sm);
  color: var(--nt-text-secondary);
  max-width: var(--nt-prose-max);
}

.koncern-checklist-head-right {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--nt-space-2);
}

/* "2 af 5" — a count, not a bar. Mono so the digits do not reflow as rows
   tick, and quiet: it is a progress note, not the headline. */
.koncern-checklist-count {
  font-family: var(--nt-font-mono);
  font-size: var(--nt-text-xs);
  color: var(--nt-text-tertiary);
  white-space: nowrap;
}

.koncern-checklist-dismiss {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--nt-radius-sm);
  color: var(--nt-text-tertiary);
  cursor: pointer;
  transition: background-color var(--nt-duration-fast) var(--nt-ease),
              color var(--nt-duration-fast) var(--nt-ease);
}

.koncern-checklist-dismiss:hover,
.koncern-checklist-dismiss:focus-visible {
  background: var(--nt-surface);
  color: var(--nt-text);
}

.koncern-checklist-items {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--nt-border-subtle);
  border-radius: var(--nt-radius);
  background: var(--nt-surface);
  overflow: hidden;
}

.koncern-checklist-item + .koncern-checklist-item {
  border-top: 1px solid var(--nt-border-subtle);
}

/* The whole row is the link — a five-row list where only the last three words
   are clickable is a list people miss. */
.koncern-checklist-row {
  display: flex;
  align-items: flex-start;
  gap: var(--nt-space-3);
  padding: var(--nt-space-3) var(--nt-space-4);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--nt-duration-fast) var(--nt-ease);
}

.koncern-checklist-row:hover,
.koncern-checklist-row:focus-visible { background: var(--nt-surface-raised); }

/* An empty ring while open, compliance green once done. Green is load-bearing
   here in exactly the way the design system reserves it for: this IS "i
   orden", and it is the only green on the card. */
.koncern-checklist-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.12rem;
  border: 1.5px solid var(--nt-border-strong);
  border-radius: var(--nt-radius-full);
  color: var(--nt-on-ok);
}

.koncern-checklist-item.is-done .koncern-checklist-mark {
  border-color: var(--nt-ok);
  background: var(--nt-ok);
}

.koncern-checklist-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}

.koncern-checklist-item-title {
  font-size: var(--nt-text-sm);
  font-weight: 600;
  color: var(--nt-text);
}

.koncern-checklist-item-body {
  font-size: var(--nt-text-sm);
  color: var(--nt-text-secondary);
  max-width: var(--nt-prose-max);
}

/* A done row still links, so the title stays full strength — the tick already
   says "handled", and greying the words out would make the row look disabled
   when it is the very thing someone is looking for. Only the trailing action
   softens. */
.koncern-checklist-action {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.1rem;
  font-size: var(--nt-text-sm);
  font-weight: 500;
  color: var(--nt-seal-text);
  white-space: nowrap;
}

.koncern-checklist-item.is-done .koncern-checklist-action {
  font-weight: 400;
  color: var(--nt-text-tertiary);
}

@media (max-width: 40rem) {
  .koncern-checklist { padding: var(--nt-space-4); }
  /* The count is the first thing to go: "2 af 5" is restated by the ticks. */
  .koncern-checklist-count { display: none; }
  .koncern-checklist-action { align-self: flex-start; }
  .koncern-checklist-row { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════════════
   EGEN KONTO — the invited guest's way in
   ══════════════════════════════════════════════════════════════════════

   Bottom of Mine selskaber, and quiet on purpose: this person came here to
   work in somebody else's selskab, and the page above is that work. It is
   still the only place they will ever be offered an account of their own —
   every other door into onboarding turns them around. */

.koncern-own-account {
  display: flex;
  align-items: center;
  gap: var(--nt-space-4);
  padding: var(--nt-space-5);
}

.koncern-own-account-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--nt-radius-full);
  background: var(--nt-seal-soft);
  color: var(--nt-seal-text);
}

.koncern-own-account-title {
  margin: 0;
  font-size: var(--nt-text-base);
  font-weight: 600;
  color: var(--nt-text);
}

.koncern-own-account-body {
  margin: 0.15rem 0 0;
  font-size: var(--nt-text-sm);
  color: var(--nt-text-secondary);
  max-width: var(--nt-prose-max);
}

/* `button_to` renders a <form>; without this the button drops onto its own
   line below the text instead of sitting at the end of the row. */
.koncern-own-account form { flex: none; margin: 0; }

@media (max-width: 40rem) {
  .koncern-own-account { flex-wrap: wrap; gap: var(--nt-space-3); }
  .koncern-own-account form { flex: 1 0 100%; }
}