/*
 * 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)
   ══════════════════════════════════════════════════════════════════════ */

.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-topline {
  display: flex;
  justify-content: flex-start;
  margin-bottom: calc(var(--nt-space-4) * -1);
}

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

.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;
}

/* ══════════════════════════════════════════════════════════════════════
   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 begivenheden") 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; }
}

/* ══════════════════════════════════════════════════════════════════════
   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));
}

.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; }

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

.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
   ══════════════════════════════════════════════════════════════════════ */

.koncern-switcher { display: inline-flex; }

/* Navbar scale. The switcher sits next to the wordmark and names the selskab
   you are in — it has to read as a *label you can change*, not as a form
   control, so it is a tinted chip rather than a bordered button. */
.koncern-switcher-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 16rem;
  padding: 0.3rem 0.55rem;
  border-radius: var(--nt-radius);
  border: 1px solid transparent;
  background: var(--nt-surface-raised);
  color: var(--nt-text);
  font-family: var(--nt-font-body);
  font-size: var(--nt-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--nt-duration-fast) var(--nt-ease), background-color var(--nt-duration-fast) var(--nt-ease);
}

.koncern-switcher-button:hover,
.koncern-switcher-button[aria-expanded="true"] {
  border-color: var(--nt-border);
  background: var(--nt-surface);
}

@media (max-width: 40rem) {
  .koncern-switcher-button { max-width: 9rem; }
}

.koncern-switcher-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.koncern-switcher-caret { flex: none; color: var(--nt-text-tertiary); }

.koncern-switcher-menu {
  right: auto;
  left: 0;
  width: min(24rem, calc(100vw - 2rem));
  max-height: 26rem;
  overflow-y: auto;
  padding-bottom: var(--nt-space-2);
}

.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; }

/* [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); }

.koncern-switcher-frist {
  flex: none;
  font-family: var(--nt-font-mono);
  font-size: var(--nt-text-xs);
  color: var(--koncern-frist-text, var(--nt-text-tertiary));
}

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

/* ══════════════════════════════════════════════════════════════════════
   7. ⌘K TRIGGER + PALETTE
   ══════════════════════════════════════════════════════════════════════ */

.koncern-kbd {
  font-family: var(--nt-font-mono);
  font-size: 0.68rem;
  line-height: 1;
  padding: 0.2rem 0.34rem;
  border-radius: var(--nt-radius-xs);
  border: 1px solid var(--nt-border);
  background: var(--nt-surface-raised);
  color: var(--nt-text-tertiary);
  white-space: nowrap;
}

.koncern-cmdk {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem 0.35rem 0.65rem;
  border-radius: var(--nt-radius);
  border: 1px solid var(--nt-border-subtle);
  background: var(--nt-surface-raised);
  color: var(--nt-text-tertiary);
  font-family: var(--nt-font-body);
  font-size: var(--nt-text-sm);
  cursor: pointer;
  transition: border-color var(--nt-duration-fast) var(--nt-ease), color var(--nt-duration-fast) var(--nt-ease);
}

.koncern-cmdk:hover { border-color: var(--nt-border-strong); color: var(--nt-text); }
.koncern-cmdk-label { display: none; }

@media (min-width: 48rem) {
  .koncern-cmdk-label { display: inline; padding-right: 2rem; }
}

/* — The dialog — */

.koncern-palette-dialog {
  width: 100%;
  /* Not centred: a palette belongs under the hand, near the top of the
     screen, the way every editor's does. */
  margin: 8vh auto auto;
}

.koncern-palette {
  width: min(40rem, calc(100vw - 2rem));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  max-height: 76vh;
  background: var(--nt-surface-overlay);
  border: 1px solid var(--nt-border-subtle);
  border-radius: var(--nt-radius-lg);
  box-shadow: var(--nt-shadow-3);
  overflow: hidden;
  animation: koncern-palette-in var(--nt-duration-slow) var(--nt-ease) both;
}

@keyframes koncern-palette-in {
  from { opacity: 0; transform: translateY(-0.6rem) scale(0.99); }
  to { opacity: 1; transform: none; }
}

.koncern-palette-search {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: var(--nt-space-4) var(--nt-space-5);
  border-bottom: 1px solid var(--nt-border-subtle);
}

.koncern-palette-search-icon { color: var(--nt-text-tertiary); flex: none; display: flex; }

.koncern-palette-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-lg);
  outline: none;
}

.koncern-palette-input::placeholder { color: var(--nt-text-disabled); }

.koncern-palette-esc { border: 0; background: transparent; padding: 0; cursor: pointer; line-height: 0; }

.koncern-palette-results {
  display: block;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.koncern-palette-group { padding-bottom: var(--nt-space-2); }

.koncern-palette-group-head {
  padding: var(--nt-space-3) var(--nt-space-5) var(--nt-space-1);
  font-family: var(--nt-font-mono);
  font-size: var(--nt-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--nt-text-tertiary);
}

.koncern-result {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.55rem var(--nt-space-5);
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--nt-font-body);
  font-size: var(--nt-text-base);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

/* The selection is driven by the controller, not by :hover — a palette where
   the mouse position fights the arrow keys is unusable. */
.koncern-result-active { background: var(--nt-seal-soft); }
.koncern-result-active .koncern-result-title { color: var(--nt-seal-text); }

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

.koncern-result-icon-seal { background: var(--nt-seal-soft); border-color: var(--nt-seal-border); color: var(--nt-seal-text); }
.koncern-result-icon-info { background: var(--nt-info-soft); border-color: var(--nt-info-border); color: var(--nt-info-text); }

.koncern-result-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }

.koncern-result-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }

.koncern-result-subtitle {
  font-size: var(--nt-text-xs);
  color: var(--nt-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.koncern-result-meta {
  flex: none;
  max-width: 40%;
  font-size: var(--nt-text-xs);
  color: var(--nt-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.koncern-palette-empty { padding: var(--nt-space-8) var(--nt-space-5); text-align: center; }

.koncern-palette-empty-title {
  font-family: var(--nt-font-display);
  font-weight: 600;
  font-size: var(--nt-text-lg);
}

.koncern-palette-empty-body {
  margin: 0.35rem auto 0;
  max-width: 28rem;
  font-size: var(--nt-text-sm);
  color: var(--nt-text-secondary);
}

.koncern-example-row {
  margin-top: var(--nt-space-5);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}

.koncern-example {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--nt-radius-full);
  border: 1px solid var(--nt-border-subtle);
  background: var(--nt-surface-raised);
  color: var(--nt-text-secondary);
  font-family: var(--nt-font-body);
  font-size: var(--nt-text-sm);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--nt-duration-fast) var(--nt-ease), color var(--nt-duration-fast) var(--nt-ease);
}

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

.koncern-example-cta {
  border-color: var(--nt-seal-border);
  background: var(--nt-seal-soft);
  color: var(--nt-seal-text);
  font-weight: 600;
}

.koncern-example-cta.koncern-result-active { outline: 2px solid var(--nt-focus); outline-offset: 2px; }

.koncern-palette-foot {
  display: flex;
  gap: var(--nt-space-4);
  flex-wrap: wrap;
  padding: 0.5rem var(--nt-space-5);
  border-top: 1px solid var(--nt-border-subtle);
  background: var(--nt-surface-raised);
  font-size: var(--nt-text-xs);
  color: var(--nt-text-tertiary);
}

.koncern-palette-foot span { display: inline-flex; align-items: center; gap: 0.3rem; }

/* ══════════════════════════════════════════════════════════════════════
   8. NOTIFICATION CENTRE
   ══════════════════════════════════════════════════════════════════════ */

.koncern-bell { position: relative; display: inline-flex; }

.koncern-bell-button { position: relative; color: var(--nt-text-secondary); }

/* The popover. Wider than a menu because it is a list you read rather than one
   you pick from — and only the LIST scrolls: the unread count and "se alle"
   are the two things a glance is for, so they must not be the parts that
   disappear off the bottom. */
.koncern-bell-menu {
  width: min(23rem, calc(100vw - 1.5rem));
  overflow: hidden;
  padding: 0 var(--nt-space-4) var(--nt-space-3);
}

.koncern-bell-menu .koncern-panel {
  max-height: min(30rem, calc(100dvh - 6rem));
}

.koncern-bell-menu .koncern-note-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.koncern-bell-menu .koncern-panel-top { padding-top: var(--nt-space-3); }

.koncern-badge-count {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nt-radius-full);
  background: var(--nt-seal);
  color: var(--nt-on-seal);
  font-family: var(--nt-font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--nt-surface);
}

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

.koncern-filter-tabs {
  display: inline-flex;
  gap: 0.15rem;
  padding: 0.2rem;
  border-radius: var(--nt-radius);
  border: 1px solid var(--nt-border-subtle);
  background: var(--nt-surface-raised);
}

.koncern-filter-tab {
  padding: 0.3rem 0.75rem;
  border-radius: var(--nt-radius-sm);
  font-size: var(--nt-text-sm);
  color: var(--nt-text-secondary);
  text-decoration: none;
  transition: background-color var(--nt-duration-fast) var(--nt-ease), color var(--nt-duration-fast) var(--nt-ease);
}

.koncern-filter-tab:hover { color: var(--nt-text); }

.koncern-filter-tab[aria-current="true"] {
  background: var(--nt-surface);
  color: var(--nt-text);
  font-weight: 600;
  box-shadow: var(--nt-shadow-1);
}

.koncern-filter-kind { display: flex; align-items: flex-end; gap: 0.5rem; }
.koncern-filter-kind .nt-label { margin-bottom: 0.35rem; white-space: nowrap; }
.koncern-filter-kind .nt-select { width: auto; min-width: 12rem; }

.koncern-note-list { display: flex; flex-direction: column; }

.koncern-note {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--nt-space-3);
  padding: var(--nt-space-4) var(--nt-space-5) var(--nt-space-4) var(--nt-space-4);
  border-bottom: 1px solid var(--nt-border-subtle);
}

.koncern-note:last-child { border-bottom: 0; }

/* Unread is a warm tint plus a solid rail — never bold text alone, which
   disappears the moment the list is longer than a screen. */
.koncern-note-unread { background: var(--nt-seal-soft); }

.koncern-note-rail {
  flex: none;
  width: 3px;
  align-self: stretch;
  border-radius: var(--nt-radius-full);
  background: transparent;
}

.koncern-note-unread .koncern-note-rail-info { background: var(--nt-info); }
.koncern-note-unread .koncern-note-rail-danger { background: var(--nt-danger); }

.koncern-note-body { flex: 1; min-width: 0; }

.koncern-note-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.koncern-note-title { font-weight: 600; font-size: var(--nt-text-base); }
.koncern-note-flag { flex: none; }

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

.koncern-note-meta {
  margin-top: 0.35rem;
  display: flex;
  gap: 0.4rem;
  font-size: var(--nt-text-xs);
  color: var(--nt-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.koncern-note-actions { flex: none; display: flex; align-items: center; gap: 0.35rem; }
.koncern-note-actions form { margin: 0; }

.koncern-note-compact { padding: var(--nt-space-3) var(--nt-space-2) var(--nt-space-3) 0; }
.koncern-note-compact .koncern-note-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* — Slide-over body — */

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

.koncern-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nt-space-3);
  padding-bottom: var(--nt-space-2);
  border-bottom: 1px solid var(--nt-border-subtle);
}

.koncern-panel-foot { padding-top: var(--nt-space-3); border-top: 1px solid var(--nt-border-subtle); }

/* ══════════════════════════════════════════════════════════════════════
   9. REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .koncern-palette { animation: none; }
}