/* ============================================================
   Vetyr Design System — PATTERNS (absorbed Orbit UX)
   The semantic ramps + pattern component classes Vetyr absorbs
   from Orbit/RMLog, re-expressed for server-rendered HTML and
   harmonised to Vetyr geometry/type (2px edges, tabular mono,
   tokens only — no Tailwind, no shadcn radii).

   Layer order:  core.css → patterns.css → components.css → module dialect
   Requires core.css. This is a credible SEED, not the exhaustive
   Orbit port; deeper rules are marked TBD for later promotion.
   ============================================================ */

:root {
  /* ════════════════════════════════════════════════════════════
     DRIFT / STATUS LAYER (Lag 2 · Drift) — TOOL-ONLY.
     This is the second layer of the Fargesystem's two-layer thesis:
     a fixed operational vocabulary that is NEVER white-labeled (a brand
     colour can never be allowed to mean "safe"). Each status carries a
     MANDATORY SHAPE + text — «Status alltid form + tekst, aldri farge
     alene» — so it reads without distinguishing red from green (≈8% of
     men are red/green colour-blind; this is the WCAG "never colour alone"
     rule). Values come in signal / light / dark; the dark value is what
     the (dark) control-room tool uses. Base = core generic states. */
  --ok:          var(--success);  /* dark-UI OK       — circle ●  (#45C97D) */
  --ok-signal:   #1F9E57;         /* base signal green */
  --watch:       var(--warning);  /* dark-UI Watch    — triangle ▲ (#F0BE45) */
  --watch-signal:#E3A82E;         /* base signal amber */
  --watch-light: #B8801C;         /* Watch text on LIGHT surfaces */
  --crit:        var(--danger);   /* dark-UI Critical — diamond ◆ (#F26553, 5.4:1 AA) */
  --crit-signal: #D9483B;         /* base signal red */
  --crit-light:  #C0392C;         /* Critical text on LIGHT surfaces */
  --info-signal: #3E7FBE;         /* base signal blue (dark-UI value is --info #66A2DC) */
  --info-light:  #2F6398;         /* Info text on LIGHT surfaces */

  /* Record-level critical surface tint — a muted red row, not a shouting
     one (used behind a whole critical Occurrence row / card). */
  --crit-surface:      #241620;
  --crit-surface-rule: #5A2A2A;

  /* ── SEMANTIC: priority / urgency (NOT severity; default = normal) ──
     Time-to-respond scale carried on every Occurrence — see the canonical
     string table in specs/terminology.md. Re-tuned to the brand Drift hues.
     Wall-display: low → OK-grønn, normal → neutral/none, high → Watch-gul,
     urgent → Critical-rød. «Kritisk» IS the `urgent` priority label (rød) —
     the top of the urgency axis (see specs/terminology.md). A future
     incident-only SEVERITY axis, if ever added, would need a DISTINCT name
     (TBD). Priority always renders WITH its label — never colour alone. */
  /* ── SEMANTIC INK — the ONE ink drawn on ANY semantic fill ────────────
     Every `--priority-*` / `--status-*` fill is a mid-to-light chroma, so the
     legible ink on all of them is DARK. This token exists because the ink was
     previously hardcoded per rule (`#fff` / `#1A1300`), and `#fff` measured
     BELOW 4.5:1 on EVERY fill in the ramp — 1.73:1 on Watch amber at worst.
     Navy-hue, ≥5:1 on every semantic fill: ok 7.37, dim 5.80, watch 9.04,
     crit 5.03, info 5.78, escalated 6.30. Never use a light ink on a
     semantic fill; never hardcode an ink literal beside one. */
  --on-semantic: #152533;

  --priority-low:    var(--ok);     /* Lav    — OK green   */
  --priority-normal: var(--dim);    /* Normal — neutral / none (default) */
  --priority-high:   var(--watch);  /* Høy    — Watch amber */
  --priority-urgent: var(--crit);   /* Kritisk — Critical red */

  /* ── SEMANTIC: status (Occurrence lifecycle) ───────────────
     Lifecycle is now `new → in-progress → resolved` (+ reopen: resolved →
     in-progress) per ADR 0008 — `escalated` is DROPPED from the lifecycle.
     The brand has no purple/orange, so `new` rebases to neutral --dim. Every
     status ALWAYS renders paired with a shape/label, so it is never
     colour-alone. */
  --status-new:         var(--dim);  /* fresh, unrouted — neutral (paired with a NEW label) */
  --status-in-progress: var(--info); /* being handled  — Info blue */
  --status-resolved:    var(--ok);   /* closed out — OK green */
  /* DEPRECATED / RESERVED — `escalated` is no longer a lifecycle status
     (ADR 0008: hierarchical escalation + major-incident dropped, incl. the
     `escalated` status). Token kept (NOT removed) so the ramp is not
     hard-broken; do NOT use for new work. */
  --status-escalated:   #EF8B4E;     /* [deprecated] DERIVED: between Watch #F0BE45 and Critical #F26553 */

  /* ── SEMANTIC: pulse / temperature (venue health 1–5) ─────
     Drives the public-wall gauge and the header .k-pulse pill.
     NORMAL → LOW → ELEVATED → SEVERE → CRITICAL. The Fargesystem does
     not define this ramp, so it is DERIVED: interpolate OK → Watch →
     Critical (anchors 1 = OK, 3 = Watch, 5 = Critical; 2 and 4 are the
     mid-points). */
  --pulse-1: var(--ok);   /* #45C97D */
  --pulse-2: #9BC461;     /* DERIVED mid: OK → Watch */
  --pulse-3: var(--watch);/* #F0BE45 */
  --pulse-4: #F1924C;     /* DERIVED mid: Watch → Critical */
  --pulse-5: var(--crit); /* #F26553 */

  /* ── SEMANTIC: AI severity dot (per-Occurrence, mirrors pulse) ── */
  --ai-1: var(--pulse-1); --ai-2: var(--pulse-2); --ai-3: var(--pulse-3); --ai-4: var(--pulse-4); --ai-5: var(--pulse-5);

  /* ── Linked-case group tints (Occurrences grouped into one case) ─ */
  --event-group-primary-bg:   color-mix(in oklab, var(--accent) 9%, transparent);
  --event-group-secondary-bg: color-mix(in oklab, var(--accent) 4%, transparent);

  /* ── Case-timeline BRANCH ramp — per-branch IDENTITY colour (--branch-1…8) ──
     Decorative per-branch hues for the Timeline pattern, cycled per case branch
     by the view (swatch_slot → --branch-N) and fed to the token-valued --c
     custom property on .t-item / .branch-chip. These are IDENTITY hues, NOT the
     Drift/status vocabulary: they DELIBERATELY do NOT reuse --ok / --watch /
     --crit / --info (nor the derived pulse / escalated warm hues), so a branch
     colour can NEVER be read as OK / Watch / Critical / Info. All 8 sit in the
     cool → violet → magenta half of the wheel that the status layer never
     occupies (status owns the warm + green half: red/orange/amber/green + the
     info blue), are mutually distinct, and are WCAG-legible on the dark --void /
     --panel surfaces (each ≥ 4.5:1 on --void). Branch identity is never carried
     by colour alone — a text label / mono Occurrence id always accompanies the
     swatch (see design.md § Timeline; feature ac-2). */
  --branch-1: #2DD4BF;  /* teal    (h≈173) */
  --branch-2: #22D3EE;  /* cyan    (h≈189) */
  --branch-3: #818CF8;  /* indigo  (h≈239) */
  --branch-4: #A78BFA;  /* violet  (h≈258) */
  --branch-5: #C084FC;  /* purple  (h≈272) */
  --branch-6: #E879F9;  /* fuchsia (h≈292) */
  --branch-7: #F472B6;  /* pink    (h≈330) */
  --branch-8: #C4B5FD;  /* lilac   (h≈255, pale — lightness-offset from violet) */
}

/* ════════════════════════════════════════════════════════════
   STATUS SHAPES — «alltid form + tekst, aldri farge alene».
   Each Drift status has a REQUIRED shape token in addition to its
   colour, so it is legible without colour discrimination. Emit the
   shape element next to the status label (both carry meaning).
     OK        ● circle          .st-shape.ok
     Watch     ▲ triangle        .st-shape.watch
     Critical  ◆ diamond         .st-shape.crit
     Info      ■ rounded square  .st-shape.info
   ════════════════════════════════════════════════════════════ */
.st-shape { width: 14px; height: 14px; flex: none; display: inline-block; }
.st-shape.ok    { background: var(--ok); border-radius: 50%; }
.st-shape.watch { width: 0; height: 0; background: none;
                  border-left: 8px solid transparent; border-right: 8px solid transparent;
                  border-bottom: 14px solid var(--watch); }
.st-shape.crit  { width: 11px; height: 11px; background: var(--crit); transform: rotate(45deg); }
.st-shape.info  { background: var(--info); border-radius: 3px; }

/* Record-level critical row — muted red surface + red frame, never shouting. The
   background/border live on the COMPOUND `.mf-card.crit-row` (specificity 0,2,0) so they
   beat the equal-specificity `.mf-card` base (0,1,0) that follows in the cascade; the rule
   itself is declared in the `.mf-card` block (below), AFTER the priority left-edge rules,
   so `border-color` frames all four sides (the mock's `.mf-card.critrow`). */

/* ════════════════════════════════════════════════════════════
   BADGE semantic variants (extend the core .b base)
   ════════════════════════════════════════════════════════════ */
.b-prio-low    { background: var(--priority-low);    color: var(--on-semantic); }
.b-prio-normal { background: var(--priority-normal); color: var(--on-semantic); }
.b-prio-high   { background: var(--priority-high);   color: var(--on-semantic); }
.b-prio-urgent { background: var(--priority-urgent); color: var(--on-semantic); }
.b-st-new          { background: var(--status-new);         color: var(--on-semantic); }
.b-st-in-progress  { background: var(--status-in-progress); color: var(--on-semantic); }
.b-st-resolved     { background: var(--status-resolved);    color: var(--on-semantic); }
/* [deprecated] `escalated` dropped from the Occurrence lifecycle (ADR 0008);
   class kept for back-compat, not for new work. */
.b-st-escalated    { background: var(--status-escalated);   color: var(--on-semantic); }

/* ════════════════════════════════════════════════════════════
   LIVE OCCURRENCE FEED — flash-on-new (.ev-*)
   Server (or an SSE-delivered HTMX swap) adds the class; the CSS
   self-removes the highlight. Pure progressive enhancement —
   the row/cell is fully rendered without it.
   NOTE: the .ev-* selectors keep their legacy "event" prefix; a
   cosmetic realignment to the Occurrence vocabulary is DEFERRED
   (low-priority, per specs/terminology.md) and intentionally NOT
   done in this pass.
   ════════════════════════════════════════════════════════════ */
@keyframes ev-flash {
  0%   { background-color: var(--accent-soft); }
  100% { background-color: transparent; }
}
.ev-flash { animation: ev-flash 1.2s ease-out forwards; }

@keyframes ev-flash-field {
  0%   { background-color: var(--accent-soft); }
  100% { background-color: transparent; }
}
.ev-flash-field { animation: ev-flash-field 1.0s ease-out forwards; display: inline-flex; }

/* Flash-on-new is progressive enhancement — disable it for users who ask
   for reduced motion (WCAG 2.2). The row/cell is fully rendered either way. */
@media (prefers-reduced-motion: reduce) {
  .ev-flash, .ev-flash-field { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   VENUE TEMPERATURE — header pill (.k-pulse) + public gauge
   ════════════════════════════════════════════════════════════ */
.k-pulse {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border: 1px solid; border-radius: var(--radius);
  font-family: var(--font-mono); font-weight: 700;   /* container default = DATA number */
  font-variant-numeric: tabular-nums;
}
/* caption bits → MICRO-LABEL (Familjen 500); number stays mono DATA. All ≥11px. */
.k-pulse .lbl { font-family: var(--font-display); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-micro); opacity: 0.7; }
.k-pulse .num { font-size: 13px; line-height: 1; letter-spacing: var(--tracking-data); }
.k-pulse .st  { font-family: var(--font-display); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-micro); }
.k-pulse[data-level="1"] { color: var(--pulse-1); border-color: color-mix(in oklab, var(--pulse-1) 35%, transparent); background: color-mix(in oklab, var(--pulse-1) 12%, transparent); }
.k-pulse[data-level="2"] { color: var(--pulse-2); border-color: color-mix(in oklab, var(--pulse-2) 35%, transparent); background: color-mix(in oklab, var(--pulse-2) 12%, transparent); }
.k-pulse[data-level="3"] { color: var(--pulse-3); border-color: color-mix(in oklab, var(--pulse-3) 35%, transparent); background: color-mix(in oklab, var(--pulse-3) 12%, transparent); }
.k-pulse[data-level="4"] { color: var(--pulse-4); border-color: color-mix(in oklab, var(--pulse-4) 38%, transparent); background: color-mix(in oklab, var(--pulse-4) 14%, transparent); }
.k-pulse[data-level="5"] { color: var(--pulse-5); border-color: color-mix(in oklab, var(--pulse-5) 40%, transparent); background: color-mix(in oklab, var(--pulse-5) 16%, transparent); }

/* Public wall gauge — big glanceable temperature score (no login) */
.pl-gauge { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.pl-gauge .score {
  font-family: var(--font-mono); font-size: var(--text-8xl); font-weight: 800;
  line-height: 0.86; font-variant-numeric: tabular-nums; letter-spacing: 0;
  /* was -0.04em; negative tracking is display-only (v1.2) — this is a DATA numeral */
}
.pl-gauge .lvl   { font-family: var(--font-display); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-micro); } /* MICRO-LABEL (status-coloured) */
.pl-gauge .since { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: var(--tracking-data); color: var(--text-2); } /* time DATA; ≤11px → --text-2 */
.pl-gauge[data-level="1"] .score, .pl-gauge[data-level="1"] .lvl { color: var(--pulse-1); }
.pl-gauge[data-level="2"] .score, .pl-gauge[data-level="2"] .lvl { color: var(--pulse-2); }
.pl-gauge[data-level="3"] .score, .pl-gauge[data-level="3"] .lvl { color: var(--pulse-3); }
.pl-gauge[data-level="4"] .score, .pl-gauge[data-level="4"] .lvl { color: var(--pulse-4); }
.pl-gauge[data-level="5"] .score, .pl-gauge[data-level="5"] .lvl { color: var(--pulse-5); }

/* Active-Occurrence count, paired with the gauge on the wall */
.pl-active { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); }
.pl-active .n { font-size: var(--text-3xl); font-weight: 800; }

/* ════════════════════════════════════════════════════════════
   QUICK REPORT — preset-driven capture (.cat-* / .prio-seg)
   Preset capture + required one-line title; posts as a normal form (works JS-off).
   ════════════════════════════════════════════════════════════ */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-1_5); }
.cat-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-1); padding: var(--space-2) var(--space-1);
  border: 1px solid var(--rule); background: var(--panel); cursor: pointer;
  border-radius: var(--radius); color: var(--text-2);
  font-size: 11px; font-weight: 500; transition: background 0.12s; /* 11px floor (was 10px); Inter sentence */
}
.cat-tile:hover { background: var(--panel-3); }
.cat-tile.sel   { box-shadow: inset 0 0 0 2px var(--accent); color: var(--text); }

.prio-seg {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1);
  padding: 3px; background: var(--panel-2); border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.prio-seg button {
  appearance: none; border: none; background: transparent; cursor: pointer;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600; padding: 6px 4px; /* Inter uppercase chrome; 11px floor */
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-2);          /* ≤11px → --text-2 */
  border-radius: var(--radius); transition: background 0.12s, color 0.12s;
}
.prio-seg button[data-active="true"][data-prio="low"]    { background: var(--priority-low);    color: var(--on-semantic); }
.prio-seg button[data-active="true"][data-prio="normal"] { background: var(--priority-normal); color: var(--on-semantic); }
.prio-seg button[data-active="true"][data-prio="high"]   { background: var(--priority-high);   color: var(--on-semantic); }
.prio-seg button[data-active="true"][data-prio="urgent"] { background: var(--priority-urgent); color: var(--on-semantic); }

.submit-row { display: flex; flex-direction: column; gap: var(--space-1_5); padding: var(--space-2_5) var(--space-3); border-top: 1px solid var(--rule); }
.submit-row .btn { width: 100%; }
.submit-hint { font-size: 11px; font-weight: 500; color: var(--text-2); text-align: center; } /* 11px floor + ≥500 + --text-2 */

/* ════════════════════════════════════════════════════════════
   TIMELINE — per-branch coloured change logs (.timeline / .branch-chip)
   Interleaved change log for Occurrences linked into one case; each
   branch carries a stable per-branch colour via --c.
   ════════════════════════════════════════════════════════════ */
.timeline { display: flex; flex-direction: column; gap: var(--space-3); position: relative; padding-left: 34px; }
.t-item   { position: relative; }
.t-item .node {
  position: absolute; left: -28px; width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c, var(--accent)); border-radius: 50%;
}
.t-item .node i { width: 10px; height: 10px; color: var(--on-semantic); }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; border-radius: var(--radius); } /* Inter pill (was mono); 11px floor */
.pill.new      { background: color-mix(in oklab, var(--status-new) 14%, transparent);      color: var(--status-new); }
.pill.link     { background: color-mix(in oklab, var(--accent) 14%, transparent);          color: var(--accent); }
.pill.crit     { background: color-mix(in oklab, var(--priority-urgent) 14%, transparent);  color: var(--priority-urgent); }
.pill.warn     { background: color-mix(in oklab, var(--priority-high) 14%, transparent);    color: var(--priority-high); }
.pill.resolved { background: color-mix(in oklab, var(--status-resolved) 14%, transparent);  color: var(--status-resolved); }

.branches    { display: flex; flex-wrap: wrap; gap: var(--space-1_5); }
.branch-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px;
  border: 1px solid var(--rule); background: var(--panel); border-radius: var(--radius);
  font-size: 11px; font-weight: 500; color: var(--text);   /* Inter; ≥500 at 11px */
}
.branch-chip .swatch { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--accent)); box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--c, var(--accent)) 25%, transparent); }
.branch-chip .id     { font-family: var(--font-mono); color: var(--c, var(--accent)); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-data); } /* Occurrence ID = DATA */
.branch-chip.main    { background: var(--event-group-primary-bg); border-color: color-mix(in oklab, var(--accent) 30%, transparent); }

/* ════════════════════════════════════════════════════════════
   MOBILE FEED + drawer (.mf-*) — peek / fullscreen
   Phone-first list; detail rests at a peek height or expands to
   fullscreen. Drag may be Alpine-driven; the detail is a real URL.
   ════════════════════════════════════════════════════════════ */
.mfeed   { height: 100svh; overflow: hidden; display: flex; flex-direction: column; background: var(--void); }
.mf-list { flex: 1; overflow-y: auto; padding: var(--space-1) var(--space-3) 100px; display: flex; flex-direction: column; gap: var(--space-2); }
.mf-card {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 10px 12px 11px 13px; display: flex; flex-direction: column; gap: 9px;
  border-left: 4px solid transparent; cursor: pointer;
}
.mf-card.urgent { border-left-color: var(--priority-urgent); }
.mf-card.high   { border-left-color: var(--priority-high); }
.mf-card.normal { border-left-color: var(--priority-normal); }
.mf-card.low    { border-left-color: var(--priority-low); }
/* Record-level critical row — muted red surface + full maroon frame (never shouting).
   Compound `.mf-card.crit-row` (0,2,0) so the surface beats the `.mf-card` base; declared
   AFTER the priority left-edge rules so `border-color` frames all four sides. */
.mf-card.crit-row { background: var(--crit-surface); border-color: var(--crit-surface-rule); }
.mf-card.linked { border-left: 2px solid color-mix(in oklab, var(--accent) 40%, transparent); margin-left: 14px; }
.mf-linked-group { display: flex; flex-direction: column; gap: 6px; padding: 5px; background: var(--event-group-secondary-bg); border: 1px solid color-mix(in oklab, var(--accent) 25%, transparent); border-radius: var(--radius); }

/* Detail drawer — peek (summary + 2 actions) vs fullscreen (full detail) */
.mf-drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--panel-2); border-top: 1px solid var(--rule);
  box-shadow: var(--shadow-lg); transition: height 0.2s ease;
}
.mf-drawer[data-state="peek"]       { height: 38svh; }
.mf-drawer[data-state="fullscreen"] { height: 100svh; }
.mf-drawer .grip { width: 36px; height: 4px; border-radius: 2px; background: var(--rule); margin: 8px auto; }

/* > TBD: composer rows, sort/filter menus, table-row variants,
   counting widgets, and the full timeline live-head stubs are not
   yet promoted to core — carry from Orbit's orbit.css/timeline.css
   when the kontroll feature specs need them. */

/* ════════════════════════════════════════════════════════════
   CONTROL-ROOM CONSOLE VOCABULARY — semantic patterns
   (harvested 2026-07-18 from the kontroll module dialect;
   see design.md § "The control-room console — component vocabulary").
   The DOMAIN-semantic half of the console harvest — status/priority
   value cells, the merged-vs-linked case signals, and the annotated
   change-log timeline entry — relocated verbatim (same selectors /
   values / tokens). The generic CONTROLS + CHROME half lives at the
   end of components.css. Every state below still carries a shape
   and/or text label; the hue is redundant emphasis (never colour
   alone — § "Status & the Drift layer").
   ════════════════════════════════════════════════════════════ */

/* ── Status / priority value cell (.vshape / .kc-prio-* / .kc-none-dot)
   The a11y invariant made concrete in a record cell: a value cell that
   leads with a status/priority shape + text. `normal` priority gets a
   neutral dot so its cell is never shape-less beside low/high/urgent;
   the shape is aria-hidden, the text label carries the meaning. */
.vshape { display: inline-flex; align-items: center; gap: var(--space-1_5); overflow: visible; }
.kc-prio-low    { color: var(--priority-low); }
.kc-prio-high   { color: var(--priority-high); }
.kc-prio-urgent { color: var(--priority-urgent); }
.kc-none-dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: 50%;
  background: var(--dim);
  flex: none;
  display: inline-block;
}

/* ── Merged-into-one vs linked-group case signals ───────────
   Two DISTINCT case signals. A merge SURVIVOR renders as ONE card
   carrying a git-merge glyph + «Sammenslått · N dup.» (`.kc-merged`) —
   duplicates collapsed into one record. A LINK GROUP renders as a
   nested container (`.kc-group`) headed by a git-chain glyph + a group
   id + a member count, wrapping the visible member cards (a
   presentation grouping over already-authorized rows). A grouped member
   card carries a THINNER left stripe (`.kc-member`) so it reads as
   nested under the group head. */
.kc-group {
  border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent);
  border-radius: var(--radius);
  background: var(--event-group-secondary-bg);
  padding: var(--space-1_5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1_5);
}
/* Block-level anchor: carries the SC 2.5.8 floor through its component class
   (core.css does not blanket-floor `a[href]` — the inline exception). Measured at
   512x20.5 before this. */
.kc-group-head {
  display: flex;
  align-items: center;
  min-block-size: var(--target-min);
  gap: var(--space-2);
  padding: var(--space-0_5) var(--space-1) 0;
  text-decoration: none;
}
.kc-group-head:hover .kc-group-id { text-decoration: underline; }
.kc-group-head:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* The head leads with an accent link-CHAIN glyph — the «these rows are one linked Case»
   signal — NOT a per-Case colour dot. */
.kc-group-head .link-ic { color: var(--accent); display: inline-flex; flex: none; }
.kc-group-head .link-ic .kc-ic { width: 1em; height: 1em; display: block; }
.kc-group-head .kc-group-id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  /* Flat accent (a link affordance), not the per-Case branch hue. */
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-data);
}
.kc-group-head .kc-group-kind {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-micro);
  color: var(--text-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0 var(--space-1_5);
}
.kc-group-head .kc-group-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-data);
}
/* The nested member list inside a group container (a real <ul> so the member cards
   stay valid <li> list items). */
.kc-group-members {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1_5);
}
/* The merged / duplicate survivor badge — a linked-teal outline chip. */
.kc-merged {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-micro);
  padding: var(--space-0_5) var(--space-1_5);
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--branch-1) 40%, transparent);
  color: var(--branch-1);
  white-space: nowrap;
  flex: none;
}
.kc-merged .kc-ic { width: 1em; height: 1em; }
/* A grouped member card carries a THINNER left stripe (2px is the sanctioned structural
   stripe width) so members read as nested under the group head; the container supplies
   the indent. */
.kc-member { border-left-width: 2px; }

/* ── Annotated change-log timeline entry (.kc-timeline) ─────
   A vertical spine of update nodes; each entry's meta reads
   timestamp (24h) · author · kind-pill, with a note's verbatim body
   below. The node dot is hue-coded by update kind via the sanctioned
   `--c` slot (redundant with the pill's text). Complements the
   per-branch `.timeline` above. (The add-update COMPOSER that closes
   the timeline stays in the consuming module — it wires the module's
   own action-row helpers.) */
.kc-timeline { position: relative; padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.kc-timeline::before {
  content: "";
  position: absolute;
  left: var(--space-1_5);
  top: var(--space-1);
  bottom: var(--space-1);
  width: 1px;
  background: var(--rule);
}
.kc-tl-item { position: relative; }
.kc-tl-node {
  position: absolute;
  left: calc(-1 * var(--space-6));
  top: var(--space-0_5);
  width: var(--space-4);
  height: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--void);
}
.kc-tl-dot {
  width: var(--space-2_5);
  height: var(--space-2_5);
  border-radius: 50%;
  background: var(--c, var(--accent));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--c, var(--accent)) 30%, transparent);
}
.kc-tl-meta {
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-data);
}
.kc-tl-who { font-family: var(--font-sans); color: var(--text-2); font-weight: var(--font-weight-semibold); }
.kc-tl-text { font-size: var(--text-sm); color: var(--text); line-height: var(--leading-normal); margin-top: var(--space-0_5); }

/* ════════════════════════════════════════════════════════════
   MANAGEMENT-SHELL STATUS — «Deaktivert» hollow-ring + disabled action
   spec: specs/features/management-surface-framework.md
   task: msf-002-ds-patterns-styleguide
   Promoted (TOKENS-ONLY) from the LOCKED management-shell mock (v1):
   the Decision-6 deactivated status SHAPE + the operator read-only
   disabled-action treatment. This is the Drift/status layer, so it is
   NEVER themeable (README rule 4) and reads by SHAPE + TEXT, never
   colour alone (README rule 5; ac-15). No new hue, no colour/font
   literal, no token or class redefinition — the deactivated shape is
   drawn from the fixed neutral --dim status token using the SAME
   geometric convention (raw-px stroke on the .st-shape base) as the
   sibling .st-shape.{ok,watch,crit,info} variants above.
   ════════════════════════════════════════════════════════════ */

/* ── Status badge wrapper (.st-badge) — shape + text, never hue alone.
   The standalone (records-table cell) form of a status value: a leading
   .st-shape followed by the status word. A DEACTIVATED badge dims the
   whole label with `.is-off` (redundant with the hollow ring). This is
   the list-cell sibling of the focus-pane .vshape value cell above. */
.st-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text);
  white-space: nowrap;
}
.st-badge.is-off { color: var(--text-2); }

/* ── «Deaktivert» hollow-ring (.st-shape.off) — a DISTINCT hollow ring
   (transparent fill, dim 2px stroke), NOT a hue swap: a deactivated
   record stays legible by SHAPE beside the filled ok/watch/crit/info
   shapes and in greyscale. The only colour is the neutral --dim status
   token; the geometry follows the sibling shapes' raw-px convention. */
.st-shape.off {
  background: transparent;
  border: 2px solid var(--dim);
  border-radius: 50%;
}

/* ── Disabled-action treatment (.btn[disabled] / [aria-disabled="true"])
   — the operator read-only nuance: a primary action the viewer may not
   perform renders greyed + not-allowed, always paired with a .ro-note
   reason (components.css; composed by msf-004), so the block is never
   colour-alone. The attribute selector (0,2,0) outweighs the .btn base
   (components.css, loaded after) regardless of source order. */
.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--panel-2);
  border-color: var(--rule);
  color: var(--dim);
  cursor: not-allowed;
}
.btn[disabled]:hover,
.btn[aria-disabled="true"]:hover {
  background: var(--panel-2);
  border-color: var(--rule);
  color: var(--dim);
}