/*
 * SHADOWS UI kit — the component sheet. ONE file, linked by every app:
 *
 *   <link rel="stylesheet" href="/shell/kit.css">
 *
 * It imports the guide's faces and tokens, so a page needs no other stylesheet
 * for colour and type. The page opts in by setting data-theme="shadows" (night)
 * or "daylight" (day) on <html> (frontend/shell/kit-boot.js does it before first
 * paint). Plain pages and Alpine use these classes directly; the React twin in
 * frontend-watch/src/kit/ renders the same classes and adds no CSS of its own.
 *
 * Rules this file keeps, and scripts/v1/test_ux_kit.py checks:
 *   - no hex or rgb colour: every colour is a token from tokens.css
 *   - logical properties only (inline-start/end), so RTL is the default and
 *     English is the mirror, never a patch layer
 *   - gold (--accent) appears ONLY on the active-alert count; red (--sev-critical)
 *     ONLY on a severity mark. State and severity always carry a word and a shape
 *   - no letter-spacing or uppercase on Arabic; the tracked SHADOWS mark is the
 *     one deliberate exception (owner decision #39)
 *   - every target is >= 44 px on a coarse pointer (--target-min)
 *
 * Contents: 1 base · 2 buttons and controls · 3 app bar · 4 state badge ·
 * 5 pane · 6 item row · 7 sheet · 8 table · 9 chips and switch ·
 * 10 empty/error/loading · 11 info card · 12 map furniture and wall · 13 phone ·
 * 14 forced colours
 */
@import url('/shell/fonts.css');
@import url('/shell/tokens.css');

/* ── 1. base ───────────────────────────────────────────────────────────── */
.k-root {
  margin: 0;
  background: var(--surface-0);
  color: var(--text-1);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-body);
  line-height: var(--k-lh, var(--leading-normal));
  -webkit-font-smoothing: var(--font-smooth);
  text-size-adjust: 100%;
  --k-lh: var(--leading-normal);
  --mark-colour: var(--text-1);   /* owner question: the mark in ink or in gold on the bar */
}
.k-root:lang(ar), .k-root :lang(ar) { --k-lh: var(--leading-ar); }
.k-root :lang(en) { --k-lh: var(--leading-normal); }
html.k-lock { overflow: hidden; }
.k-root *, .k-root *::before, .k-root *::after { box-sizing: border-box; }
.k-root a { color: inherit; }
.k-root [hidden] { display: none !important; }

/* Never colour alone; never letter-spaced Arabic. */
.k-root :lang(ar) { letter-spacing: 0; text-transform: none; }
.k-num, .k-root bdi {
  unicode-bidi: isolate;
}
.k-num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.k-faint { color: var(--text-3); }
.k-sr {
  position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.k-skip {
  position: absolute; inset-inline-start: var(--space-sm); inset-block-start: -4rem; z-index: calc(var(--z-toast) + 1);
  padding: var(--space-xs) var(--space-md); background: var(--text-1); color: var(--surface-0);
  border-radius: var(--radius); text-decoration: none;
}
.k-skip:focus { inset-block-start: var(--space-xs); }

.k-i {
  inline-size: 1.25rem; block-size: 1.25rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.k-i-sm { inline-size: 1rem; block-size: 1rem; }
/* Arrows and chevrons that point along the reading direction mirror in RTL. */
:root[dir='rtl'] .k-i-dir { transform: scaleX(-1); }

.k-root :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* ── 2. buttons and controls ───────────────────────────────────────────── */
.k-btn, .k-icon-btn, .k-chip, .k-input, .k-select {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-1);
}
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-block-size: var(--control-h); min-inline-size: var(--target-min);
  padding-inline: var(--space-md);
  background: var(--surface-2); border: 1px solid var(--edge); border-radius: var(--radius);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}
.k-btn:hover { background: var(--surface-3); }
.k-btn--primary { background: var(--text-1); color: var(--surface-0); border-color: var(--text-1); font-weight: var(--weight-title); }
.k-btn--primary:hover { background: var(--text-2); border-color: var(--text-2); }
.k-btn--ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.k-btn--ghost:hover { background: var(--surface-2); color: var(--text-1); }
.k-btn[disabled] { color: var(--text-4); border-color: var(--rule-2); cursor: not-allowed; background: transparent; }

.k-icon-btn {
  display: inline-grid; place-items: center; position: relative;
  min-inline-size: var(--target-min); min-block-size: var(--target-min);
  padding: 0; background: transparent; border: 1px solid transparent; border-radius: var(--radius);
  color: var(--text-2); cursor: pointer;
}
.k-icon-btn:hover { background: var(--surface-2); color: var(--text-1); }
.k-icon-btn[aria-pressed='true'] { color: var(--text-1); box-shadow: inset 0 -2px 0 var(--text-1); }

.k-input, .k-select {
  min-block-size: var(--control-h); padding-inline: var(--space-sm);
  background: var(--surface-1); border: 1px solid var(--rule-3); border-radius: var(--radius);
}
.k-input::placeholder { color: var(--text-3); }

/* segmented control (language, theme, density, text size) */
.k-seg { display: inline-flex; border: 1px solid var(--edge); border-radius: var(--radius); overflow: hidden; }
.k-seg > button {
  font: inherit; font-size: var(--text-sm); color: var(--text-2); background: transparent; border: 0;
  min-block-size: var(--control-h); min-inline-size: var(--target-min); padding-inline: var(--space-sm); cursor: pointer;
}
.k-seg > button + button { border-inline-start: 1px solid var(--edge); }
.k-seg > button[aria-pressed='true'] { color: var(--text-1); background: var(--surface-3); box-shadow: inset 0 -2px 0 var(--text-1); }

/* ── 3. app bar: ONE 48 px row ─────────────────────────────────────────── */
.k-bar {
  position: sticky; inset-block-start: 0; z-index: var(--z-bar);
  display: flex; align-items: center; gap: var(--space-xs);
  block-size: var(--bar-h); padding-inline: var(--space-md);
  background: var(--surface-1); border-block-end: 1px solid var(--rule-2);
  font-family: var(--font-ui); color: var(--text-1);
}
.k-mark {
  display: inline-flex; align-items: baseline; gap: var(--space-xs);
  color: var(--mark-colour, var(--text-1)); text-decoration: none; white-space: nowrap;
  margin-inline-end: var(--space-sm);
}
/* The Arabic mark is never tracked. The Latin one is (owner decision #39), and it
   stays smaller: in a bilingual lockup the Arabic is set larger (guide p.5). */
.k-mark__ar { font-family: var(--font-mark); font-weight: var(--weight-mark); font-size: 1.375rem; letter-spacing: 0; line-height: 1; }
.k-mark__lat { font-family: var(--font-mark); font-weight: var(--weight-mark); font-size: 0.75rem; letter-spacing: 0.24em; line-height: 1; color: var(--text-2); }

.k-nav { display: flex; align-items: center; gap: 2px; min-inline-size: 0; overflow-x: auto; scrollbar-width: none; }
.k-nav::-webkit-scrollbar { display: none; }
.k-nav__a {
  display: inline-flex; align-items: center; min-block-size: var(--bar-h); padding-inline: var(--space-sm);
  font-size: var(--text-sm); color: var(--text-2); text-decoration: none; white-space: nowrap;
}
.k-nav__a:hover { color: var(--text-1); background: var(--surface-2); }
/* selection is ink and a 2 px rule, never gold (guide p.6) */
.k-nav__a[aria-current='page'] { color: var(--text-1); box-shadow: inset 0 -2px 0 var(--text-1); font-weight: var(--weight-title); }
.k-bar__grow { flex: 1; min-inline-size: 0; }
.k-bar__search {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-block-size: var(--control-h); padding-inline: var(--space-sm);
  min-inline-size: 11rem; justify-content: space-between;
  background: var(--surface-0); border: 1px solid var(--edge); border-radius: var(--radius);
  color: var(--text-3); font: inherit; font-size: var(--text-sm); cursor: pointer;
}
.k-bar__search:hover { color: var(--text-1); }
.k-kbd {
  font-family: var(--font-data); font-size: var(--text-xs); color: var(--text-2);
  border: 1px solid var(--edge); border-radius: var(--radius); padding: 0 0.375rem; unicode-bidi: isolate; direction: ltr;
}
/* Gold's one bar job: the count of ACTIVE alerts. Zero alerts, no gold. */
.k-bell__n {
  position: absolute; inset-block-start: 2px; inset-inline-end: 2px;
  min-inline-size: 1rem; block-size: 1rem; padding-inline: 3px; border-radius: 0.5rem;
  background: var(--accent); color: var(--surface-1);   /* 9.0:1 at night, 5.8:1 by day; accent-fg is 3.0:1 by day */
  font-family: var(--font-data); font-size: 0.625rem; font-weight: 700; line-height: 1rem; text-align: center;
}
.k-bar__menu { display: none; }

.k-menu {
  position: absolute; inset-block-start: calc(var(--bar-h) - 4px); inset-inline-end: var(--space-sm);
  min-inline-size: 14rem; padding: var(--space-2xs);
  background: var(--surface-2); border: 1px solid var(--rule-3); border-radius: var(--radius-lg); box-shadow: var(--elev-pop);
  z-index: var(--z-bar);
}
.k-menu__who { padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); color: var(--text-3); border-block-end: 1px solid var(--rule-2); margin-block-end: var(--space-2xs); }
.k-menu a, .k-menu button {
  display: flex; align-items: center; gap: var(--space-xs); inline-size: 100%;
  min-block-size: var(--target-min); padding: 0 var(--space-sm);
  font: inherit; font-size: var(--text-sm); color: var(--text-2); background: transparent; border: 0; text-decoration: none; text-align: start; cursor: pointer;
}
.k-menu a:hover, .k-menu button:hover { background: var(--surface-3); color: var(--text-1); }

/* bar extras (UX2): group menus, trust light, popovers, the ONE palette */
button.k-nav__a { background: transparent; border: 0; font: inherit; font-size: var(--text-sm); cursor: pointer; gap: var(--space-2xs); }
.k-nav__a[aria-expanded='true'] { background: var(--surface-2); color: var(--text-1); }
.k-bar__btn {
  display: inline-flex; align-items: center; gap: var(--space-2xs); flex: none;
  min-block-size: var(--control-h); min-inline-size: var(--target-min); padding-inline: var(--space-xs);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius);
  color: var(--text-2); font: inherit; font-size: var(--text-sm); cursor: pointer; white-space: nowrap;
}
.k-bar__btn:hover, .k-bar__btn[aria-expanded='true'] { background: var(--surface-2); color: var(--text-1); }
.k-menu--pop { position: fixed; inset-block-start: auto; inset-inline-end: auto; max-inline-size: calc(100vw - 1rem); max-block-size: calc(100dvh - var(--bar-h) - 1rem); overflow-y: auto; z-index: var(--z-bar); }
.k-menu__h { padding: var(--space-xs) var(--space-sm) var(--space-2xs); font-size: var(--text-xs); color: var(--text-3); font-weight: var(--weight-label); }
.k-menu a[aria-current='page'], .k-menu button[aria-current='page'] { color: var(--text-1); border-inline-start: 2px solid var(--text-1); font-weight: var(--weight-title); }
.k-menu__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); font-size: var(--text-sm); color: var(--text-2); text-decoration: none; }
.k-menu__row > .k-menu__sub { display: grid; justify-items: end; gap: var(--space-2xs); font-size: var(--text-xs); color: var(--text-3); }
.k-menu__note { padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); color: var(--text-3); border-block-start: 1px solid var(--rule-2); margin-block-start: var(--space-2xs); max-inline-size: 22rem; }
.k-menu__apps { display: none; }
/* a narrower desk bar drops the count, then the word; the shape and the accessible name stay */
@media (max-width: 1499px) { .k-trust .k-state__age { display: none; } }
@media (max-width: 1279px) { .k-trust .k-state__word { display: none; } }
@media (max-width: 1499px) { .k-bar__who { display: none; } }
@media (max-width: 767px) { .k-menu__apps { display: block; } .k-trust .k-state__word, .k-trust .k-state__age { display: none; } }
.k-trust { padding-inline: var(--space-2xs); }
/* the pipeline chip (sources reporting; the AI only when it is stopped or failing) needs room: the trust menu carries it below 1280 */
.k-pipe-btn { padding-inline: var(--space-2xs); }
.k-pipe-btn .k-state { border-color: transparent; background: transparent; }
@media (max-width: 1279px) { .k-pipe-btn { display: none; } }
/* a crowded bar (WATCH adds tools) shrinks the search box before it wraps its label */
.k-bar__search { flex: 0 1 11rem; min-inline-size: 7rem; }
.k-bar__search > span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-bar__grow { min-inline-size: 0; }
.k-state[data-state='over'] { color: var(--state-degraded); border: 2px solid var(--state-degraded); background: var(--surface-2); font-weight: var(--weight-title); }

.k-pal-scrim { position: fixed; inset: 0; z-index: var(--z-palette); background: var(--scrim); }
.k-pal {
  position: fixed; z-index: calc(var(--z-palette) + 1); inset-block-start: 12vh; inset-inline: 0; margin-inline: auto;
  inline-size: min(40rem, calc(100vw - 2rem)); max-block-size: 76vh; display: flex; flex-direction: column;
  background: var(--surface-2); border: 1px solid var(--rule-3); border-radius: var(--radius-lg); box-shadow: var(--elev-sheet);
  color: var(--text-1); font-family: var(--font-ui);
}
.k-pal__head { display: flex; align-items: center; gap: var(--space-xs); padding-inline: var(--space-md) var(--space-2xs); border-block-end: 1px solid var(--rule-2); }
.k-pal__head:focus-within { box-shadow: inset 0 -2px 0 var(--text-1); }
.k-pal__input { flex: 1; min-inline-size: 0; min-block-size: 3rem; background: transparent; border: 0; color: var(--text-1); font: inherit; font-size: var(--text-base); }
.k-pal__input:focus-visible { outline: none; }
.k-pal__input::placeholder { color: var(--text-3); }
.k-pal__list { list-style: none; margin: 0; padding: var(--space-2xs); overflow-y: auto; overscroll-behavior: contain; flex: 1; }
.k-pal__h { padding: var(--space-xs) var(--space-sm) var(--space-2xs); font-size: var(--text-xs); color: var(--text-3); font-weight: var(--weight-label); }
.k-pal__i { display: flex; align-items: center; gap: var(--space-sm); min-block-size: var(--target-min); padding-inline: var(--space-sm); border-inline-start: 2px solid transparent; border-radius: var(--radius); cursor: pointer; font-size: var(--text-sm); color: var(--text-2); }
.k-pal__i[aria-selected='true'] { background: var(--surface-3); color: var(--text-1); border-inline-start-color: var(--text-1); }
.k-pal__label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-pal__sub { margin-inline-start: auto; font-size: var(--text-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 45%; }
.k-pal__i[aria-selected='true'] .k-pal__sub { color: var(--text-2); }
.k-pal__empty { padding: var(--space-lg); text-align: center; color: var(--text-3); font-size: var(--text-sm); }
.k-pal__foot { display: flex; flex-wrap: wrap; gap: var(--space-md); padding: var(--space-xs) var(--space-md); border-block-start: 1px solid var(--rule-2); font-size: var(--text-xs); color: var(--text-3); }
@media (max-width: 767px) { .k-pal { inset-block-start: var(--space-sm); inline-size: calc(100vw - 1rem); max-block-size: 86dvh; } .k-pal__foot { display: none; } }

/* ── 4. state badge: word + shape + age; colour is never alone ─────────── */
.k-state {
  display: inline-flex; align-items: center; gap: 0.375em; flex: none;
  min-block-size: 1.5rem; padding-inline: 0.5em;
  border: 1px solid var(--rule-3); border-radius: var(--radius);
  font-size: var(--text-xs); font-weight: var(--weight-label); color: var(--text-2); white-space: nowrap;
}
.k-state .k-i { inline-size: 0.875rem; block-size: 0.875rem; }
.k-state__word { white-space: nowrap; }
.k-state__dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: currentColor; }
.k-state__age { font-weight: var(--weight-body); color: var(--text-2); }
.k-state__age::before { content: '·'; margin-inline-end: 0.375em; color: var(--text-3); }
.k-state[data-state='live'] { color: var(--state-live); border-color: color-mix(in oklch, var(--state-live) 55%, transparent); }
.k-state[data-state='late'] { color: var(--state-degraded); border-color: color-mix(in oklch, var(--state-degraded) 60%, transparent); }
.k-state[data-state='unavailable'] { color: var(--text-2); border-style: dashed; background: var(--surface-2); }
.k-state[data-state='single'] { color: var(--text-2); }
.k-state[data-state='model'] { color: var(--text-2); border-style: dotted; }
.k-state--lg { font-size: var(--text-sm); min-block-size: 1.75rem; }

/* UX3 trust layer: the pace beside a pane's badge, the two stamps on generated text,
   numbered source links, the shown-of line, the pipeline line. Neutral ink only: the
   state colours stay on the badge, red stays severity's. */
.k-pace { font-size: var(--text-xs); color: var(--text-2); white-space: nowrap; }
.k-stamps { display: inline-flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); font-size: var(--text-xs); color: var(--text-2); }
.k-stamp::before { content: ''; display: inline-block; inline-size: 0.375rem; block-size: 0.375rem; margin-inline-end: 0.375em; border: 1px solid var(--text-2); border-radius: 50%; vertical-align: 0.05em; }
.k-stamp--none { font-style: normal; }
.k-cites { display: inline-flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); font-size: var(--text-xs); }
.k-cite { color: var(--text-2); text-decoration: underline; text-underline-offset: 0.2em; font-family: var(--font-data); }
.k-cite:hover { color: var(--text-1); }
.k-shown { font-size: var(--text-xs); color: var(--text-2); }
.k-pipe { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); color: var(--text-2); white-space: nowrap; }
.k-pipe__line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-2xs) var(--space-sm); font-size: var(--text-sm); color: var(--text-2); }
.k-pipe__reason { padding: var(--space-2xs) var(--space-sm); font-size: var(--text-xs); color: var(--text-3); max-inline-size: 22rem; }
.k-modelnote { border-inline-start: 2px dotted var(--rule-3); padding-inline-start: var(--space-xs); }
/* a model-written label sits quietly: the dotted border says it is not a person's text */
.k-state--sm { min-block-size: 1.25rem; padding-inline: 0.375em; }

/* severity: a word, a gutter edge. Red is reserved for this. */
.k-sev { font-size: var(--text-xs); font-weight: var(--weight-label); color: var(--text-2); white-space: nowrap; }
.k-sev::before { content: ''; display: inline-block; inline-size: 0.5rem; block-size: 0.5rem; margin-inline-end: 0.375em; background: var(--rule-3); }
.k-sev[data-sev='critical'] { color: var(--sev-critical); }
.k-sev[data-sev='critical']::before { background: var(--sev-critical); }
.k-sev[data-sev='high'] { color: var(--sev-high); }
.k-sev[data-sev='high']::before { background: var(--sev-high); border-radius: 50%; }
.k-sev[data-sev='medium'] { color: var(--sev-medium); }
.k-sev[data-sev='medium']::before { background: var(--sev-medium); transform: rotate(45deg) scale(0.85); }
.k-sev[data-sev='low'] { color: var(--sev-low); }
.k-sev[data-sev='low']::before { background: var(--sev-low); block-size: 0.25rem; }

/* ── 5. pane ───────────────────────────────────────────────────────────── */
.k-pane {
  display: flex; flex-direction: column; min-block-size: 0; min-inline-size: 0;
  background: var(--surface-1); border: 1px solid var(--rule-2); border-radius: var(--radius);
  box-shadow: var(--elev-rest); overflow: hidden;
  font-family: var(--font-ui); color: var(--text-1);
}
.k-pane__head {
  display: flex; align-items: center; gap: var(--space-xs); flex: none;
  min-block-size: 2.5rem; padding: var(--space-2xs) var(--pane-px);
  background: var(--surface-2); border-block-end: 1px solid var(--rule-2);
}
.k-pane__title { margin: 0; flex: none; font-size: var(--text-base); font-weight: var(--weight-title); }
.k-pane__count { font-size: var(--text-xs); color: var(--text-3); }
.k-pane__tools { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-2xs); }
.k-pane__body { flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; }
.k-pane__foot {
  flex: none; display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap;
  padding: var(--space-2xs) var(--pane-px); border-block-start: 1px solid var(--rule-2);
  font-size: var(--text-xs); color: var(--text-3);
}
.k-pane--flush { border: 0; border-radius: 0; box-shadow: none; }

/* ── 6. item row: one line to scan, evidence one click away ────────────── */
.k-row {
  --row-lines: 2;
  display: grid; grid-template-columns: 3px minmax(0, 1fr) auto; column-gap: var(--space-sm);
  align-items: start;
  padding-block: var(--row-py); padding-inline: 0 var(--pane-px);
  border-block-end: 1px solid var(--rule-1);
  color: var(--text-1); text-decoration: none; cursor: pointer;
}
:root[data-density='compact'] .k-row { --row-lines: 1; }
.k-row:hover { background: var(--hover); }
.k-row:focus-visible { outline-offset: -2px; }
.k-row__sev { align-self: stretch; background: transparent; }
.k-row[data-sev='critical'] .k-row__sev { background: var(--sev-critical); }
.k-row[data-sev='high'] .k-row__sev { background: var(--sev-high); }
.k-row[data-sev='medium'] .k-row__sev { background: var(--sev-medium); }
.k-row[data-sev='low'] .k-row__sev { background: var(--sev-low); }
.k-row__main { display: grid; gap: var(--row-gap); min-inline-size: 0; }
.k-row__title {
  font-size: var(--row-title); font-weight: var(--weight-title); line-height: var(--k-lh, var(--leading-normal));
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--row-lines); line-clamp: var(--row-lines);
  overflow: hidden; overflow-wrap: anywhere;
}
.k-row__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); font-size: var(--row-meta); color: var(--text-3); }
.k-row__src { color: var(--text-2); }
.k-row__summary {
  display: var(--show-summary); margin: 0; font-size: var(--text-sm); color: var(--text-2);
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
:root[data-density='compact'] .k-row__summary { display: none; }
.k-row__time { display: grid; justify-items: end; gap: 0; font-size: var(--text-xs); color: var(--text-3); white-space: nowrap; text-align: end; }
.k-row__time b { font-weight: var(--weight-label); color: var(--text-2); }

/* ── 7. sheet / overlay: ABOVE the bar (z-overlay 2100 > z-bar 2000) ───── */
.k-scrim { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--scrim); }
.k-sheet {
  position: fixed; z-index: calc(var(--z-overlay) + 1);
  inset-block: 0; inset-inline-end: 0; inline-size: min(34rem, 100vw);
  display: flex; flex-direction: column;
  background: var(--surface-1); color: var(--text-1); font-family: var(--font-ui);
  border-inline-start: 1px solid var(--rule-3); box-shadow: var(--elev-sheet);
  --k-from: 100%;
}
:root[dir='rtl'] .k-sheet { --k-from: -100%; }
.k-sheet[data-open] { animation: k-sheet-in var(--dur-base) var(--ease-out); }
@keyframes k-sheet-in { from { translate: var(--k-from) 0; opacity: 0.6; } }
.k-sheet__head {
  display: flex; align-items: center; gap: var(--space-xs); flex: none;
  min-block-size: var(--bar-h); padding-inline: var(--space-md) var(--space-2xs);
  background: var(--surface-2); border-block-end: 1px solid var(--rule-2);
}
.k-sheet__title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-head); flex: 1; min-inline-size: 0; }
.k-sheet__body { flex: 1; min-block-size: 0; overflow-y: auto; padding: var(--space-md); }
.k-sheet__foot { flex: none; display: flex; gap: var(--space-xs); justify-content: flex-end; padding: var(--space-sm) var(--space-md); border-block-start: 1px solid var(--rule-2); }
.k-sheet__grab { display: none; }

/* ── 8. table ──────────────────────────────────────────────────────────── */
.k-table-wrap { overflow-x: auto; background: var(--surface-1); border: 1px solid var(--rule-2); border-radius: var(--radius); }
.k-table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-sm); font-family: var(--font-ui); color: var(--text-2); }
.k-table caption { text-align: start; padding: var(--space-sm); font-size: var(--text-sm); color: var(--text-3); }
.k-table th {
  position: sticky; inset-block-start: 0; text-align: start; white-space: nowrap;
  padding: var(--space-xs) var(--space-sm); background: var(--surface-2); border-block-end: 1px solid var(--rule-2);
  font-size: var(--text-xs); font-weight: var(--weight-label); color: var(--text-3);
}
.k-table td { padding: var(--space-xs) var(--space-sm); border-block-end: 1px solid var(--rule-1); vertical-align: top; }
.k-table tbody tr:hover { background: var(--hover); }
.k-table tbody tr:last-child td { border-block-end: 0; }
.k-table .k-num { text-align: end; }
.k-table a { color: var(--text-1); text-underline-offset: 3px; }

/* ── 9. chips and switch ───────────────────────────────────────────────── */
.k-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.k-chip {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  min-block-size: var(--control-h); padding-inline: var(--space-sm);
  background: transparent; color: var(--text-2); border: 1px solid var(--edge); border-radius: var(--radius);
  cursor: pointer; white-space: nowrap;
}
.k-chip:hover { background: var(--surface-3); color: var(--text-1); }
.k-chip[aria-pressed='true'] { background: var(--surface-3); color: var(--text-1); box-shadow: inset 0 -2px 0 var(--text-1); font-weight: var(--weight-title); }
.k-chip__n { font-family: var(--font-data); font-size: var(--text-xs); color: var(--text-3); unicode-bidi: isolate; }
.k-chip[aria-pressed='true'] .k-chip__n { color: var(--text-2); }
.k-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.k-chips--scroll::-webkit-scrollbar { display: none; }

.k-switch {
  position: relative; flex: none; inline-size: 2rem; block-size: 1.125rem; padding: 0;
  background: transparent; border: 1px solid var(--edge); border-radius: 0.5625rem; cursor: pointer;
}
.k-switch::after {
  content: ''; position: absolute; inset-block-start: 2px; inset-inline-start: 2px;
  inline-size: 0.75rem; block-size: 0.75rem; border-radius: 50%; background: var(--text-3);
  transition: inset-inline-start var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.k-switch[aria-checked='true'] { background: var(--text-1); border-color: var(--text-1); }
.k-switch[aria-checked='true']::after { inset-inline-start: calc(100% - 0.75rem - 2px); background: var(--surface-0); }
/* the switch is a 44 px target on touch without growing on a desk */
.k-switch::before { content: ''; position: absolute; inset-block: calc((var(--target-min) - 1.125rem) / -2); inset-inline: -0.5rem; }

/* ── 10. empty, error, loading ─────────────────────────────────────────── */
.k-empty {
  display: grid; justify-items: center; text-align: center; gap: var(--space-xs);
  padding: var(--space-xl) var(--space-md); color: var(--text-2); font-family: var(--font-ui);
}
.k-empty .k-i { inline-size: 2rem; block-size: 2rem; color: var(--text-3); }
.k-empty__title { margin: 0; font-size: var(--text-base); font-weight: var(--weight-title); color: var(--text-1); }
.k-empty__text { margin: 0; max-inline-size: 38ch; font-size: var(--text-sm); color: var(--text-3); }
.k-empty__actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; justify-content: center; margin-block-start: var(--space-xs); }
.k-empty__slow { display: none; font-size: var(--text-sm); color: var(--text-2); }
.k-empty[data-slow='true'] .k-empty__slow { display: block; }
.k-skel { display: grid; gap: var(--space-sm); padding: var(--space-md); }
.k-skel__line { block-size: 0.75rem; border-radius: var(--radius); background: var(--surface-3); animation: k-pulse 1.4s ease-in-out infinite; }
.k-skel__line:nth-child(3n + 1) { inline-size: 92%; }
.k-skel__line:nth-child(3n + 2) { inline-size: 76%; }
.k-skel__line:nth-child(3n) { inline-size: 58%; }
@keyframes k-pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .k-skel__line { animation: none; } }

/* ── 11. info card: purpose, source, freshness, confidence, limits ─────── */
.k-info {
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-2); border: 1px solid var(--rule-2); border-radius: var(--radius-lg); box-shadow: var(--elev-pop);
  font-family: var(--font-ui); color: var(--text-2); font-size: var(--text-sm);
}
.k-info__title { margin: 0 0 var(--space-xs); font-size: var(--text-base); font-weight: var(--weight-title); color: var(--text-1); }
.k-info__list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); margin: 0; }
.k-info__list dt { color: var(--text-3); font-size: var(--text-xs); padding-block-start: 0.2em; }
.k-info__list dd { margin: 0; }

/* ── 12. map furniture and the wall ────────────────────────────────────── */
.k-subbar {
  display: flex; align-items: center; gap: var(--space-sm); flex: none;
  min-block-size: 2.75rem; padding-inline: var(--space-md);
  background: var(--surface-1); border-block-end: 1px solid var(--rule-2);
}
.k-subbar .k-chips { min-inline-size: 0; }
.k-statusline {
  display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap;
  min-block-size: 1.75rem; padding: var(--space-2xs) var(--space-md);
  background: var(--surface-1); border-block-start: 1px solid var(--rule-2);
  font-size: var(--text-xs); color: var(--text-3);
}
.k-statusline b { color: var(--text-2); font-weight: var(--weight-label); }

.k-wall {
  display: grid; gap: 1px; background: var(--rule-2);
  grid-template-columns: minmax(17rem, 24rem) minmax(0, 1fr) minmax(16rem, 22rem);
  block-size: calc(100dvh - var(--bar-h) - 2.75rem - 1.75rem);
  min-block-size: 34rem;
}
.k-wall > * { background: var(--surface-1); min-block-size: 0; min-inline-size: 0; }
.k-dock { display: grid; grid-auto-rows: minmax(0, 1fr); gap: 1px; background: var(--rule-2); }
.k-dock > .k-pane { border: 0; border-radius: 0; box-shadow: none; }

.k-map { position: relative; overflow: hidden; background: var(--surface-0); }
.k-map__svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.k-map__land { fill: var(--surface-2); stroke: var(--rule-3); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.k-map__land[data-focus='true'] { fill: var(--surface-3); }
.k-map__mark { fill: var(--surface-0); stroke: var(--text-1); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.k-map__label { font-family: var(--font-ui); font-size: 11px; fill: var(--text-2); paint-order: stroke; stroke: var(--surface-0); stroke-width: 3px; }
.k-map__panel {
  position: absolute; z-index: var(--z-dock);
  background: var(--surface-1); border: 1px solid var(--rule-3); border-radius: var(--radius-lg); box-shadow: var(--elev-pop);
  font-family: var(--font-ui); color: var(--text-1);
}
.k-map__panel--layers { inset-block-start: var(--space-sm); inset-inline-start: var(--space-sm); inline-size: 16rem; max-block-size: calc(100% - 7rem); overflow-y: auto; }
.k-map__panel--time { inset-block-start: var(--space-sm); inset-inline-end: var(--space-sm); padding: var(--space-xs); }
.k-map__panel--zoom { inset-inline-end: var(--space-sm); inset-block-start: 4.5rem; display: grid; }
.k-map__panel--legend { inset-inline-end: var(--space-sm); inset-block-end: 5.5rem; padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); color: var(--text-2); display: grid; gap: 0.25rem; }
.k-map__panel--scrub { inset-inline: var(--space-sm); inset-block-end: var(--space-sm); padding: var(--space-xs) var(--space-md); display: grid; gap: var(--space-2xs); }
.k-map__tag { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%; text-align: center; }
.k-layers { list-style: none; margin: 0; padding: var(--space-2xs); display: grid; }
.k-layers__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-xs) var(--space-sm); font-size: var(--text-sm); font-weight: var(--weight-title); border-block-end: 1px solid var(--rule-2); }
.k-layer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-sm); min-block-size: var(--target-min); font-size: var(--text-sm); }
.k-layer__n { font-family: var(--font-data); font-size: var(--text-xs); color: var(--text-3); unicode-bidi: isolate; }
.k-layer__info { grid-column: 1 / -1; padding-block-end: var(--space-xs); }
/* in the narrow layer panel the label sits above its value */
.k-layer__info .k-info__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
.k-layer__info .k-info__list dd { margin-block-end: var(--space-xs); }

.k-range { inline-size: 100%; appearance: none; background: transparent; margin: 0; block-size: 1.5rem; cursor: pointer; }
.k-range::-webkit-slider-runnable-track { block-size: 4px; background: var(--rule-3); border-radius: 2px; }
.k-range::-moz-range-track { block-size: 4px; background: var(--rule-3); border-radius: 2px; }
.k-range::-webkit-slider-thumb { appearance: none; inline-size: 0.875rem; block-size: 0.875rem; margin-block-start: -5px; background: var(--text-1); border: 2px solid var(--surface-1); border-radius: 50%; }
.k-range::-moz-range-thumb { inline-size: 0.875rem; block-size: 0.875rem; background: var(--text-1); border: 2px solid var(--surface-1); border-radius: 50%; }
.k-scrub__ends { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--text-3); }
.k-scrub__past { display: none; align-items: center; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-sm); color: var(--text-1); }
.k-scrub[data-past='true'] .k-scrub__past { display: flex; }

.k-fixture { font-size: var(--text-xs); color: var(--text-3); border: 1px dashed var(--rule-3); border-radius: var(--radius); padding: 0 0.5em; white-space: nowrap; }

/* tiles for the portal home */
.k-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-sm); }
.k-tile {
  display: flex; flex-direction: column; gap: var(--space-xs); min-block-size: 9.5rem; padding: var(--space-md);
  background: var(--surface-1); border: 1px solid var(--rule-2); border-radius: var(--radius); box-shadow: var(--elev-rest);
  color: var(--text-1); text-decoration: none;
}
.k-tile:hover { background: var(--surface-2); border-color: var(--rule-3); }
.k-tile__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.k-tile__title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-head); }
.k-tile__text { margin: 0; font-size: var(--text-sm); color: var(--text-2); }
.k-tile__facts { margin-block-start: auto; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-size: var(--text-xs); color: var(--text-3); }
.k-tile__facts b { color: var(--text-1); font-weight: var(--weight-label); }

/* ── 13. phone (< 768 px) ──────────────────────────────────────────────── */
.k-tabbar { display: none; }
@media (max-width: 1023px) {
  .k-wall { grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); block-size: auto; }
  .k-wall > .k-map { grid-column: 1 / -1; min-block-size: 26rem; order: -1; }
  .k-wall > .k-dock { min-block-size: 22rem; }
  .k-wall > .k-dock:last-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .k-bar { padding-inline: var(--space-sm); }
  .k-nav, .k-bar__search .k-kbd, .k-bar__search span, .k-bar__wide { display: none; }
  /* one script of the mark at phone width: Arabic in the Arabic UI, Latin in English */
  :root[lang='ar'] .k-mark__lat, :root[lang='en'] .k-mark__ar { display: none; }
  :root[lang='en'] .k-mark__lat { font-size: 0.9375rem; color: var(--text-1); }
  .k-bar__search { min-inline-size: 0; border: 0; background: transparent; padding-inline: 0; min-inline-size: var(--target-min); justify-content: center; }
  .k-bar__menu { display: inline-grid; }
  .k-subbar { padding-inline: var(--space-sm); overflow-x: auto; }
  .k-wall { grid-template-columns: minmax(0, 1fr); padding-block-end: 3.5rem; }
  .k-wall { background: var(--surface-1); min-block-size: calc(100dvh - var(--bar-h) - 2.75rem); }
  .k-wall > .k-map { grid-column: auto; min-block-size: 0; block-size: 12rem; }
  .k-wall > .k-map .k-map__panel--layers, .k-wall > .k-map .k-map__panel--legend, .k-wall > .k-map .k-map__panel--zoom { display: none; }
  .k-wall > .k-map .k-map__panel--time { inset-block: auto var(--space-xs); inset-inline: var(--space-xs); inline-size: auto; overflow-x: auto; }
  .k-wall > .k-map .k-map__panel--scrub { display: none; }
  .k-wall > .k-dock { block-size: auto; }
  .k-wall > .k-dock:not([data-phone-active]) { display: none; }
  .k-statusline { display: none; }
  .k-sheet {
    inset-block: auto 0; inset-inline: 0; inline-size: auto; max-block-size: 88dvh;
    border-inline-start: 0; border-block-start: 1px solid var(--rule-3); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    --k-from: 0;
  }
  .k-sheet[data-open] { animation-name: k-sheet-up; }
  @keyframes k-sheet-up { from { translate: 0 100%; } }
  .k-sheet__grab { display: block; inline-size: 2.5rem; block-size: 4px; margin: var(--space-xs) auto 0; background: var(--rule-3); border-radius: 2px; }
  .k-tabbar {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-bar);
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding-block-end: env(safe-area-inset-bottom, 0px);
    background: var(--surface-1); border-block-start: 1px solid var(--rule-2);
  }
  .k-tabbar__a {
    display: grid; justify-items: center; align-content: center; gap: 2px; min-block-size: 3.5rem;
    font: inherit; font-size: var(--text-xs); color: var(--text-2); background: transparent; border: 0; text-decoration: none; cursor: pointer;
  }
  .k-tabbar__a[aria-current='page'] { color: var(--text-1); box-shadow: inset 0 2px 0 var(--text-1); font-weight: var(--weight-title); }
  /* tables become cards (UX7 for SIRA, Steering, Admin) */
  .k-table--cards thead { display: none; }
  .k-table--cards tr { display: block; padding: var(--space-xs) var(--space-sm); border-block-end: 1px solid var(--rule-2); }
  .k-table--cards td { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-sm); border: 0; padding: var(--space-2xs) 0; }
  .k-table--cards td::before { content: attr(data-label); color: var(--text-3); font-size: var(--text-xs); }
  .k-table--cards .k-num { text-align: start; }
  /* UX7: the labels come from /shell/cards.js (data-label); a cell with none, or a whole-row message, takes the full card width */
  .k-table--cards, .k-table--cards tbody { display: block; }
  .k-table--cards td { overflow-wrap: anywhere; min-inline-size: 0; }
  .k-table--cards td[data-label=''], .k-table--cards td:not([data-label]), .k-table--cards td[data-whole] { grid-template-columns: minmax(0, 1fr); }
  .k-table--cards td[data-label='']::before, .k-table--cards td[data-whole]::before { display: none; }
  .k-table--cards td:empty { display: none; }
  .k-table--cards .k-num, .k-table--cards .num { white-space: normal; }
}

/* ── 15. content surfaces (UX5): item row v2, roster, citations, withheld, collapse ── */
/* Per-surface text scale (V5, 0.9 to 2). A custom property is computed where it is declared, so a surface that
   sets its own --ts must redeclare the steps that read it; the row tokens follow the steps. */
.k-scale {
  --text-xs: calc(0.6875rem * var(--ts));
  --text-sm: calc(0.8125rem * var(--ts));
  --text-base: calc(0.9375rem * var(--ts));
  --text-lg: calc(1.125rem * var(--ts));
  --text-xl: calc(1.5rem * var(--ts));
  --row-title: var(--text-base);
  --row-meta: var(--text-sm);
}
:root[data-density='compact'] .k-scale { --row-meta: var(--text-xs); }

/* Item row v2. Order of weight: outlet, time, headline; then state, severity and pills; actions last and quiet.
   Comfortable: two lines of headline. Compact (the wall): the whole item on one line. */
.k-r2 {
  --r2-edge: transparent;
  display: grid; grid-template-columns: 3px minmax(0, 1fr); column-gap: var(--space-sm); align-items: stretch;
  padding-block: var(--row-py); padding-inline: 0 var(--pane-px);
  border-block-end: 1px solid var(--rule-1); color: var(--text-1); list-style: none;
}
.k-r2:hover, .k-r2:focus-within { background: var(--hover); }
.k-r2__edge { background: var(--r2-edge); }
.k-r2[data-sev='critical'] { --r2-edge: var(--sev-critical); }
.k-r2[data-sev='high'] { --r2-edge: var(--sev-high); }
.k-r2[data-sev='medium'] { --r2-edge: var(--sev-medium); }
.k-r2[data-major='true'] { --r2-edge: var(--text-2); }
.k-r2__main {
  display: grid; min-inline-size: 0; column-gap: var(--space-sm); row-gap: var(--row-gap); align-items: baseline;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'head src' 'title title' 'sum sum' 'pills pills' 'acts acts' 'more more';
}
.k-r2__head { grid-area: head; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--space-xs); min-inline-size: 0; font-size: var(--row-meta); color: var(--text-3); }
.k-r2__outlet { font-weight: var(--weight-title); color: var(--text-1); font-size: var(--row-meta); }
.k-r2__time { color: var(--text-2); font-family: var(--font-data); font-size: var(--row-meta); unicode-bidi: isolate; }
.k-r2__kind { color: var(--text-3); }
.k-r2__kind::before { content: '·'; margin-inline-end: var(--space-xs); color: var(--text-4); }
.k-r2__title {
  grid-area: title; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: start; font: inherit;
  font-size: var(--row-title); font-weight: var(--weight-title); line-height: var(--k-lh, var(--leading-tight)); color: var(--text-1);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
  text-wrap: pretty; min-inline-size: 0;
}
.k-r2__title:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.k-r2__sum { grid-area: sum; margin: 0; max-inline-size: 80ch; font-size: var(--text-sm); color: var(--text-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.k-r2__pills { grid-area: pills; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); min-inline-size: 0; font-size: var(--row-meta); color: var(--text-3); }
.k-r2__pill { color: var(--text-2); font-size: var(--row-meta); white-space: nowrap; }
.k-r2__pill--link { background: none; border: 0; padding: 0; font: inherit; font-size: var(--row-meta); cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.k-r2__src { grid-area: src; justify-self: end; display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--row-meta); color: var(--text-1); text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; }
.k-r2__src:hover { color: var(--text-1); background: var(--surface-3); }
.k-r2__acts { grid-area: acts; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); }
.k-r2__act {
  display: inline-flex; align-items: center; gap: var(--space-2xs); font: inherit; font-size: var(--row-meta); color: var(--text-2);
  min-block-size: 1.75rem; padding-inline: var(--space-xs); background: transparent; border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.k-r2__act:hover { background: var(--surface-3); color: var(--text-1); border-color: var(--rule-2); }
.k-r2__act[aria-pressed='true'], .k-r2__act[aria-expanded='true'] { color: var(--text-1); border-color: var(--rule-3); box-shadow: inset 0 -2px 0 var(--text-1); }
.k-r2__more { grid-area: more; display: grid; gap: var(--space-xs); }
.k-r2__note { margin: 0; white-space: pre-wrap; border-inline-start: 2px solid var(--rule-3); padding-inline-start: var(--space-xs); font-size: var(--text-sm); color: var(--text-2); }
@media (pointer: coarse) { .k-r2__act { min-block-size: var(--target-min); min-inline-size: var(--target-min); } }
/* compact (the wall): one line, evidence still one click away */
:root[data-density='compact'] .k-r2__main {
  grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: 'head title pills src' 'more more more more'; align-items: center;
}
:root[data-density='compact'] .k-r2__title { display: block; white-space: nowrap; text-overflow: ellipsis; -webkit-line-clamp: unset; line-clamp: unset; }
:root[data-density='compact'] .k-r2__sum, :root[data-density='compact'] .k-r2__kind { display: none; }
:root[data-density='compact'] .k-r2__pills { flex-wrap: nowrap; overflow: hidden; }
:root[data-density='compact'] .k-r2__head { flex-wrap: nowrap; white-space: nowrap; }
:root[data-density='compact'] .k-r2:not(:hover):not(:focus-within) .k-r2__acts { display: none; }
:root[data-density='compact'] .k-r2:is(:hover, :focus-within) .k-r2__main { grid-template-areas: 'head title pills src' 'acts acts acts acts' 'more more more more'; }

/* outlet roster (P1): outlets, not articles; tier ranks sources, it does not judge the claim */
.k-roster { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.k-roster__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-sm);
  padding-block: var(--space-xs); border-block-end: 1px solid var(--rule-1); font-size: var(--text-sm);
}
.k-roster__name { min-inline-size: 0; overflow-wrap: anywhere; font-weight: var(--weight-title); color: var(--text-1); }
.k-roster__name a { color: var(--text-1); text-decoration: underline; text-underline-offset: 0.2em; }
.k-roster__meta { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--text-3); font-size: var(--text-xs); white-space: nowrap; }
.k-roster__tier { font-family: var(--font-data); color: var(--text-2); border: 1px solid var(--rule-3); border-radius: var(--radius); padding-inline: 0.4em; unicode-bidi: isolate; }
.k-roster__legend { margin: var(--space-xs) 0 0; font-size: var(--text-xs); color: var(--text-3); max-inline-size: 70ch; }

/* a reader's evidence strip: source first, retained copy beside it */
.k-evidence { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); font-size: var(--text-sm); }
.k-evidence a, .k-evidence button { font: inherit; color: var(--text-1); text-decoration: underline; text-underline-offset: 0.2em; background: none; border: 0; padding: 0; cursor: pointer; }
.k-evidence__copy { color: var(--text-2); }
.k-evidence__none { color: var(--text-3); }

/* reader overlay head: the close control and the title can never be pushed out of view */
.k-rd__head { display: flex; align-items: flex-start; gap: var(--space-sm); flex: none; padding: var(--space-sm) var(--space-md); background: var(--surface-2); border-block-end: 1px solid var(--rule-2); min-block-size: var(--bar-h); }
.k-rd__titlebox { flex: 1; min-inline-size: 0; }
.k-rd__title { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-head); line-height: var(--leading-tight); overflow-wrap: anywhere; max-inline-size: 60ch; }

/* inline [n] citations in report prose: each one a link to its source */
.k-cite--inline { font-size: 0.75em; vertical-align: super; line-height: 0; margin-inline: 0.05em; text-decoration: none; padding-inline: 0.15em; border-radius: 2px; }
.k-cite--inline:hover, .k-cite--inline:focus-visible { background: var(--surface-3); text-decoration: underline; }
.k-cite--dead { font-size: 0.75em; vertical-align: super; line-height: 0; color: var(--text-3); font-family: var(--font-data); }
.k-sources { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.k-sources__row { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-xs); padding-block: var(--space-xs); border-block-end: 1px solid var(--rule-1); font-size: var(--text-sm); scroll-margin-block: var(--space-xl); }
.k-sources__row:target { background: var(--surface-3); }
.k-sources__n { font-family: var(--font-data); color: var(--text-2); unicode-bidi: isolate; }
.k-sources__t a { color: var(--text-1); text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.k-sources__m { display: block; color: var(--text-3); font-size: var(--text-xs); }

/* fail closed (P4): a withheld section says why, shows no prose */
.k-withheld { border: 1px solid var(--rule-3); border-inline-start: 4px solid var(--text-2); border-radius: var(--radius); padding: var(--space-sm) var(--space-md); background: var(--surface-2); color: var(--text-1); max-inline-size: 78ch; }
.k-withheld__title { margin: 0 0 var(--space-2xs); font-size: var(--text-sm); font-weight: var(--weight-title); }
.k-withheld__why { margin: 0; font-size: var(--text-sm); color: var(--text-2); }
.k-withheld__figs { font-family: var(--font-data); unicode-bidi: isolate; }
.k-log { margin: var(--space-xs) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--text-2); display: grid; gap: var(--space-2xs); }

/* alert hygiene (P6): stale and duplicate alerts fold into a visible count */
.k-fold { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; padding: var(--space-xs) var(--space-md); background: var(--surface-2); border-block-end: 1px solid var(--rule-2); font-size: var(--text-sm); color: var(--text-2); }
.k-fold b { color: var(--text-1); font-weight: var(--weight-label); }
.k-count { display: inline-flex; align-items: center; min-block-size: 1.25rem; padding-inline: 0.45em; border: 1px solid var(--rule-3); border-radius: var(--radius); font-size: var(--text-xs); color: var(--text-1); font-family: var(--font-data); unicode-bidi: isolate; white-space: nowrap; }

@media (forced-colors: active) {
  .k-r2__edge { background: Highlight !important; }
  .k-withheld { border-color: CanvasText; }
}

/* ── 14. forced colours: shape and word already carry meaning; keep edges ─ */
@media (forced-colors: active) {
  .k-state { border-color: CanvasText; forced-color-adjust: none; color: CanvasText; background: Canvas; }
  .k-state__dot { background: CanvasText; }
  .k-row__sev { background: Highlight !important; }
  .k-sev::before { background: CanvasText !important; }
  .k-chip[aria-pressed='true'], .k-seg > button[aria-pressed='true'], .k-nav__a[aria-current='page'] { outline: 2px solid Highlight; }
  .k-switch[aria-checked='true'] { background: Highlight; }
}

/* ── 14. touch (UX7): edge insets, target floor, no double-tap delay ───── */
@media (pointer: coarse) {
  .k-btn, .k-icon-btn, .k-chip, .k-seg > button, .k-nav__a, .k-tabbar__a, .k-bar__btn, .k-bar__search, a, button, summary { touch-action: manipulation; }
  .k-mark { min-block-size: var(--target-min); align-items: center; }
  .k-nav__a { min-block-size: var(--target-min); }
  .k-input, .k-select { font-size: max(16px, var(--text-sm)); }     /* below 16 px a phone browser zooms the page on focus */
  .k-bar, .k-subbar { padding-inline: max(var(--space-sm), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
  .k-sheet { padding-block-end: env(safe-area-inset-bottom, 0px); }
  .k-table--cards td a { display: inline-flex; align-items: center; min-block-size: var(--target-min); }
}
@media (max-width: 767px) { .k-pane__head { flex-wrap: wrap; row-gap: 0; } .k-pane__tools { flex-wrap: wrap; } }   /* a pane title and its trust badge wrap instead of running out of the pane */