/* ============================================================
   ks-app.css — the app's single stylesheet (EPIC #6013, Wave 1, #6069)
   ------------------------------------------------------------
   Consolidation target for the logged-in app. Per-feature CSS folds in
   here over Wave 1; hardcoded inline styles move in over Wave 2. Tokens
   live in ks-tokens.css; this file holds component recipes on --ks-*.

   SHARED CORE: the .ks-btn recipe below is the canonical button — same
   geometry, one flat indigo primary, no gradient/glow. Agent 5's
   ks-marketing.css (#6070) copies this recipe verbatim so the app and
   marketing buttons are literally the same bytes. Change it here, not in
   a second place.

   design-system.css retired in #6069 (Wave 3): every ds-* consumer moved
   onto --ks-*, and it was deleted. If you're looking for .ds-btn or any
   other ds-* recipe, it no longer exists — its --ks-* replacement is in
   this file.
   ============================================================ */

/* ---- app base: typeface ----
   The app is Inter (Anwesa's call on #6069), replacing Instrument Sans
   app-wide. Mono stays var(--ks-font-mono).

   This rule is unlayered on purpose. src/index.css states the same thing
   inside Tailwind v4's native @layer base, and unlayered declarations beat
   layered ones no matter the source order. Before #6069's delete, the app's
   typeface was resolving to design-system.css's own unlayered body rule
   (Instrument Sans) for that reason — its removal is what made this rule
   the deciding one. Keep this unlayered; moving it into @layer base would
   silently hand the cascade back to whatever else declares body unlayered. */
body {
  font-family: var(--ks-font-body);
}

/* ---- button: base ---- */
.ks-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-sizing: border-box;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: var(--ks-font-body);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s, filter 0.16s;
}
.ks-btn:disabled,
.ks-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.ks-btn:focus-visible {
  outline: 2px solid rgb(from var(--ks-indigo) r g b / 0.9);
  outline-offset: 2px;
}
.ks-btn__icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.ks-btn--sm {
  min-height: 32px;
  padding: 0 14px;
  font-size: 12.5px;
  border-radius: var(--ks-radius-full);
}
.ks-btn--sm .ks-btn__icon { width: 14px; height: 14px; }

/* ---- primary — one flat indigo CTA in both themes; no gradient or glow ---- */
.ks-btn--primary,
a.ks-btn--primary:visited {
  color: var(--ks-fg-on-accent);
  background: var(--ks-button-primary);
  border-color: transparent;
  border-radius: var(--ks-radius-full);
  box-shadow: none;
}
.ks-btn--primary,
.ks-btn--primary *,
a.ks-btn--primary:visited,
a.ks-btn--primary:visited * {
  color: var(--ks-fg-on-accent) !important;
  -webkit-text-fill-color: var(--ks-fg-on-accent);
}
.ks-btn--primary:hover {
  background: color-mix(in srgb, var(--ks-button-primary), black 10%);
  color: var(--ks-fg-on-accent);
}
.ks-btn--primary:active {
  background: color-mix(in srgb, var(--ks-button-primary), black 16%);
}
.ks-btn--primary svg {
  color: inherit;
  stroke: currentColor;
}

/* ---- secondary — quiet top-level action, not a CTA ---- */
.ks-btn--secondary,
a.ks-btn--secondary:visited {
  color: var(--ks-fg);
  background: var(--ks-bg-elevated);
  border-color: var(--ks-border);
}
.ks-btn--secondary:hover {
  background: color-mix(in srgb, var(--ks-fg) 6%, var(--ks-bg-elevated));
  border-color: color-mix(in srgb, var(--ks-indigo) 50%, var(--ks-border));
  color: var(--ks-fg);
}
.ks-btn--secondary:active {
  background: color-mix(in srgb, var(--ks-indigo) 12%, transparent);
  border-color: color-mix(in srgb, var(--ks-indigo) 55%, transparent);
}

/* ---- ghost — icon-only / very quiet utility ---- */
.ks-btn--ghost,
a.ks-btn--ghost:visited {
  color: var(--ks-fg-secondary);
  background: transparent;
  border-color: transparent;
}
.ks-btn--ghost:hover {
  background: color-mix(in srgb, var(--ks-fg) 8%, transparent);
  color: var(--ks-fg);
}
.ks-btn--ghost:active {
  background: color-mix(in srgb, var(--ks-indigo) 14%, transparent);
}

/* ---- danger — destructive action with quiet red surface ---- */
.ks-btn--danger,
a.ks-btn--danger:visited {
  color: var(--ks-red);
  background: color-mix(in srgb, var(--ks-red) 8%, transparent);
  border-color: color-mix(in srgb, var(--ks-red) 30%, transparent);
}
.ks-btn--danger:hover {
  color: var(--ks-red);
  background: color-mix(in srgb, var(--ks-red) 14%, transparent);
  border-color: color-mix(in srgb, var(--ks-red) 45%, transparent);
}
.ks-btn--danger:active {
  background: color-mix(in srgb, var(--ks-red) 20%, transparent);
}

/* ---- link — text-only row/navigation action; no button chrome ---- */
.ks-btn--link,
a.ks-btn--link:visited {
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--ks-indigo);
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.ks-btn--link:hover {
  color: color-mix(in oklch, var(--ks-indigo), white 18%);
  background: transparent;
  box-shadow: none;
  transform: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ks-btn--link:active {
  color: color-mix(in oklch, var(--ks-indigo), black 12%);
  background: transparent;
  box-shadow: none;
  transform: none;
}

/* ---- light-mode tuning: nudge the secondary brand border/contrast.
   --ks-bg-elevated / --ks-border already flip light/dark in ks-tokens.css,
   so only the indigo-tinted border needs a light-mode nudge. ---- */
:root[data-theme="light"] .ks-btn--secondary:hover {
  border-color: rgb(from var(--ks-indigo) r g b / 0.65);
  background: rgb(from var(--ks-indigo) r g b / 0.08);
}
:root[data-theme="light"] .ks-btn--secondary:active {
  background: rgb(from var(--ks-indigo) r g b / 0.14);
}

/* ============================================================
   SHARED CORE PRIMITIVES (EPIC #6013, Wave 1)
   ------------------------------------------------------------
   Canonical card / table / chip / rail on --ks-* tokens. These replace
   the per-screen bespoke variants (.sumcard, .gc-source-card, .gcp-cov-pill,
   .erail, screen-local .ks-card/.ks-table on --ink/--brand/--line palettes)
   as those screens fold into this file over Wave 1d. Agent 5's ks-marketing.css
   (#6070) copies this block verbatim so app and marketing cards/tables/chips
   are the same bytes. Token-only — no hex, no local palette.
   ============================================================ */

/* ---- card: elevated content surface ---- */
.ks-card {
  background: var(--ks-bg-card);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-lg);
  box-shadow: var(--ks-shadow-card);
  padding: 16px 18px;
}
.ks-card--flush { padding: 0; }
.ks-card--soft { box-shadow: var(--ks-shadow-soft); }
.ks-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ks-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ---- table: grid rows with a quiet mono header ---- */
.ks-table {
  overflow-x: auto;
}
.ks-table__head,
.ks-table__row {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 13px 20px;
  border-bottom: 1px solid var(--ks-border);
}
.ks-table__head {
  color: var(--ks-fg-muted);
  font-family: var(--ks-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ks-table__row {
  width: 100%;
  background: transparent;
  color: var(--ks-fg);
  text-align: left;
  font-size: 13px;
}
.ks-table__row:last-child { border-bottom: 0; }
.ks-table__row--interactive { cursor: pointer; transition: background 0.14s; }
.ks-table__row--interactive:hover { background: var(--ks-bg-elevated); }

/* ---- chip: pill label, tone via modifier ---- */
.ks-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--ks-radius-pill);
  border: 1px solid var(--ks-border);
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-muted);
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.ks-chip--info    { color: var(--ks-indigo); background: color-mix(in srgb, var(--ks-indigo) 12%, transparent); border-color: color-mix(in srgb, var(--ks-indigo) 30%, transparent); }
.ks-chip--success { color: var(--ks-green);  background: color-mix(in srgb, var(--ks-green) 12%, transparent);  border-color: color-mix(in srgb, var(--ks-green) 30%, transparent); }
.ks-chip--warn    { color: var(--ks-amber);  background: color-mix(in srgb, var(--ks-amber) 13%, transparent);  border-color: color-mix(in srgb, var(--ks-amber) 32%, transparent); }
.ks-chip--danger  { color: var(--ks-red);    background: color-mix(in srgb, var(--ks-red) 12%, transparent);    border-color: color-mix(in srgb, var(--ks-red) 30%, transparent); }

/* ---- rail: side panel (facts / metadata aside) ---- */
.ks-rail {
  background: var(--ks-bg-card);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-lg);
  box-shadow: var(--ks-shadow-soft);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ks-rail__label {
  font-family: var(--ks-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ks-fg-muted);
}
.ks-rail__item { display: flex; flex-direction: column; gap: 3px; }
.ks-rail__item-key { font-size: 11px; color: var(--ks-fg-muted); }
.ks-rail__item-val { font-size: 13px; font-weight: 600; color: var(--ks-fg); }

/* ============================================================
   APP SCREENS (not part of the shared core — Agent 5 does NOT copy below)
   Folded from per-feature .css into the single app stylesheet (#6013 1d).
   All --ks-* tokens, namespaced per screen (.gc- / .gci- / .gcp- / control-*).
   ============================================================ */

/* ---- GovernanceCatalogPage (folded #6013 1d) ---- */
.gc-page {
  display: flex;
  flex-direction: column;
  gap: var(--ks-space-5);
  color: var(--ks-fg);
}

.gc-hero,
.gc-panel,
.gc-row,
.gc-toolbar,
.gc-legal-node,
.gc-library-toolbar,
.gc-source-card,
.gc-empty {
  border: 1px solid var(--ks-border);
  background: var(--ks-bg-card);
  border-radius: var(--ks-radius-xl);
}

.gc-empty {
  display: flex;
  flex-direction: column;
  gap: var(--ks-space-2);
  padding: var(--ks-space-4);
  color: var(--ks-fg-muted);
  line-height: var(--ks-small-leading);
}

.gc-empty strong {
  color: var(--ks-fg);
}

.gc-hero {
  padding: var(--ks-space-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ks-space-5);
  align-items: end;
}

.gc-eyebrow {
  margin: 0;
  color: var(--ks-fg-muted);
  font-family: var(--ks-font-body);
  font-size: var(--ks-overline-size);
  font-weight: var(--ks-overline-weight);
  line-height: var(--ks-overline-leading);
  text-transform: uppercase;
  letter-spacing: var(--ks-tracking-wide);
}

.gc-title,
.gc-hero h1,
.gc-library-head h1 {
  margin: var(--ks-space-2) 0 0;
  color: var(--ks-fg);
  font-family: var(--ks-font-display);
  font-size: var(--ks-h2-size);
  font-weight: var(--ks-h2-weight);
  line-height: var(--ks-h2-leading);
  letter-spacing: var(--ks-h2-tracking);
}

.gc-subtitle {
  margin: var(--ks-space-2) 0 0;
  max-width: 64rem;
  color: var(--ks-fg-muted);
  line-height: var(--ks-small-leading);
}

.gc-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(7rem, 1fr));
  gap: var(--ks-space-3);
}

.gc-kpis-four {
  grid-template-columns: repeat(4, minmax(7rem, 1fr));
}

.gc-kpi {
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-lg);
  background: var(--ks-bg-card);
  padding: var(--ks-space-3);
  box-shadow: var(--ks-shadow-card);
}

.gc-kpi strong {
  display: block;
  color: var(--ks-fg);
}

.gc-kpi span,
.gc-muted {
  color: var(--ks-fg-muted);
}

.gc-kpi-label,
.gc-kpi-value {
  display: block;
}

.gc-kpi-label {
  color: var(--ks-fg-muted);
  font-size: var(--ks-caption-size);
}

.gc-kpi-value {
  margin-top: var(--ks-space-1);
  color: var(--ks-fg);
  font-family: var(--ks-font-mono);
  font-size: var(--ks-h3-size);
  font-weight: var(--ks-weight-semibold);
  line-height: var(--ks-h3-leading);
}

.gc-kpi-inner strong {
  display: block;
  color: var(--ks-fg);
  font-size: var(--ks-h3-size);
  line-height: var(--ks-h3-leading);
}

.gc-kpi-inner span {
  display: block;
  margin-top: var(--ks-space-1);
  color: var(--ks-fg-muted);
  font-size: var(--ks-caption-size);
}

.gc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ks-space-4);
}

.gc-grid-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ks-space-4);
}

.gc-panel,
.gc-row,
.gc-legal-node {
  padding: var(--ks-space-4);
}

.gc-toolbar {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) repeat(3, minmax(9rem, 12rem));
  gap: var(--ks-space-3);
  padding: var(--ks-space-3);
}

.gc-input,
.gc-select {
  min-width: 0;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-sm);
  background: var(--ks-bg-elevated);
  color: var(--ks-fg);
  padding: var(--ks-space-2) var(--ks-space-3);
}

.gc-library-page {
  max-width: 70rem;
}

.gc-library-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ks-space-5);
  align-items: end;
}

.gc-library-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ks-space-2);
  align-items: center;
  padding: var(--ks-space-3);
}

.gc-search {
  display: flex;
  align-items: center;
  gap: var(--ks-space-2);
  min-width: min(100%, 18rem);
  flex: 1;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-md);
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-dim);
  padding: var(--ks-space-2) var(--ks-space-3);
}

.gc-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ks-fg);
  font: inherit;
}

.gc-search input::placeholder {
  color: var(--ks-fg-dim);
}

.gc-filter {
  display: grid;
  gap: var(--ks-space-1);
  color: var(--ks-fg-muted);
  font-size: var(--ks-caption-size);
}

.gc-filter select {
  min-width: 9.5rem;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-md);
  background: var(--ks-bg-elevated);
  color: var(--ks-fg);
  padding: var(--ks-space-2) var(--ks-space-3);
}

.gc-filter input {
  min-width: 9.5rem;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-md);
  background: var(--ks-bg-elevated);
  color: var(--ks-fg);
  padding: var(--ks-space-2) var(--ks-space-3);
}

.gc-filter-select {
  min-width: 9.5rem;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-md);
  background: var(--ks-bg-elevated);
  color: var(--ks-fg);
  padding: var(--ks-space-2) var(--ks-space-3);
}

.gc-results-count {
  margin-left: auto;
  color: var(--ks-fg-dim);
  font-size: var(--ks-caption-size);
}

.gc-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ks-space-4);
}

.gc-source-card {
  box-shadow: var(--ks-shadow-card);
  transition: border-color var(--ks-duration-fast) var(--ks-ease), transform var(--ks-duration-fast) var(--ks-ease);
}

.gc-source-card:hover {
  border-color: var(--ks-border-strong);
  transform: translateY(calc(var(--ks-space-1) * -0.25));
}

.gc-source-card a {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  gap: var(--ks-space-3);
  padding: var(--ks-space-4);
  color: inherit;
  text-decoration: none;
}

.gc-source-card h2 {
  margin: 0;
  color: var(--ks-fg);
  font-size: var(--ks-h4-size);
  font-weight: var(--ks-weight-semibold);
  letter-spacing: 0;
}

.gc-source-card p {
  margin: 0;
  color: var(--ks-fg-secondary);
  line-height: var(--ks-small-leading);
}

.gc-source-subtitle {
  margin-top: var(--ks-space-1);
  color: var(--ks-fg-muted);
  font-size: var(--ks-caption-size);
}

.gc-source-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ks-space-3);
  margin-top: auto;
  padding-top: var(--ks-space-3);
  border-top: 1px solid var(--ks-border);
  color: var(--ks-fg-muted);
  font-size: var(--ks-caption-size);
}

.gc-source-foot span {
  display: inline-flex;
  align-items: center;
  gap: var(--ks-space-1);
}

.gc-source-changed {
  color: var(--ks-amber);
}

.gc-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ks-space-3);
  align-items: center;
  justify-content: center;
  color: var(--ks-fg-muted);
  font-size: var(--ks-caption-size);
}

.gc-table-card {
  overflow-x: auto;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-lg);
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-card);
}

.gc-table {
  width: 100%;
  min-width: 54rem;
  border-collapse: collapse;
}

.gc-table th,
.gc-table td {
  border-bottom: 1px solid var(--ks-border);
  padding: var(--ks-space-3);
  text-align: left;
  vertical-align: top;
}

.gc-table th {
  color: var(--ks-fg-muted);
  font-family: var(--ks-font-mono);
  font-size: var(--ks-caption-size);
  font-weight: var(--ks-weight-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.gc-table tr:last-child td {
  border-bottom: 0;
}

.gc-table-title {
  display: block;
  color: var(--ks-fg);
  font-weight: var(--ks-weight-semibold);
  text-decoration: none;
}

.gc-table-subtitle {
  display: block;
  margin-top: var(--ks-space-1);
  color: var(--ks-fg-muted);
  font-family: var(--ks-font-mono);
  font-size: var(--ks-caption-size);
}

.gc-chip-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--ks-space-1);
}

.gc-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-full);
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-secondary);
  font-family: var(--ks-font-mono);
  font-size: var(--ks-caption-size);
  font-weight: var(--ks-weight-bold);
  letter-spacing: 0;
  padding: var(--ks-space-1) var(--ks-space-2);
  text-transform: capitalize;
  white-space: nowrap;
}

.gc-chip-good {
  border-color: color-mix(in srgb, var(--ks-green) 38%, transparent);
  background: color-mix(in srgb, var(--ks-green) 15%, transparent);
  color: var(--ks-green);
}

.gc-chip-warn {
  border-color: color-mix(in srgb, var(--ks-amber) 38%, transparent);
  background: color-mix(in srgb, var(--ks-amber) 15%, transparent);
  color: var(--ks-amber);
}

.gc-chip-bad {
  border-color: color-mix(in srgb, var(--ks-red) 38%, transparent);
  background: color-mix(in srgb, var(--ks-red) 15%, transparent);
  color: var(--ks-red);
}

.gc-chip-violet {
  border-color: color-mix(in srgb, var(--ks-indigo) 46%, transparent);
  background: color-mix(in srgb, var(--ks-indigo) 14%, var(--ks-bg-elevated));
  color: var(--ks-indigo);
}

.gc-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ks-space-3);
}

.gc-form-grid label {
  display: grid;
  gap: var(--ks-space-1);
  color: var(--ks-fg-muted);
  font-family: var(--ks-font-mono);
  font-size: var(--ks-caption-size);
  font-weight: var(--ks-weight-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.gc-form-grid input,
.gc-form-grid select,
.gc-form-grid textarea {
  width: 100%;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-md);
  background: var(--ks-bg);
  color: var(--ks-fg);
  font: inherit;
  font-family: var(--ks-font-body);
  font-size: var(--ks-body-size);
  font-weight: var(--ks-body-weight);
  padding: var(--ks-space-2) var(--ks-space-3);
  text-transform: none;
}

.gc-form-grid textarea {
  min-height: 5rem;
  resize: vertical;
}

.gc-form-wide,
.gc-form-actions {
  grid-column: 1 / -1;
}

.gc-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ks-space-2);
}

.gc-form-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.gc-body-copy {
  margin: 0;
  color: var(--ks-fg-secondary);
  line-height: var(--ks-leading-snug);
}

.gc-detail-page {
  max-width: 76rem;
}

.gc-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ks-space-5);
  align-items: end;
}

.gc-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.32fr);
  gap: var(--ks-space-4);
  align-items: start;
}

.gc-detail-main,
.gc-stack {
  display: grid;
  gap: var(--ks-space-3);
}

.gc-detail-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(12rem, 0.7fr));
  gap: var(--ks-space-4);
  align-items: stretch;
}

.gc-detail-summary .gc-panel {
  box-shadow: var(--ks-shadow-card);
}

.gc-detail-primary {
  display: grid;
  align-content: start;
  gap: var(--ks-space-3);
}

.gc-detail-primary h3 {
  margin: 0;
  color: var(--ks-fg);
  font-size: var(--ks-h4-size);
  line-height: var(--ks-h4-leading);
  letter-spacing: 0;
}

.gc-source-text {
  max-height: 24rem;
  overflow: auto;
  margin: var(--ks-space-3) 0 0;
  white-space: pre-wrap;
  color: var(--ks-fg-muted);
  font-family: var(--ks-font-body);
  font-size: var(--ks-small-size);
  line-height: var(--ks-small-leading);
}

.gc-keywords {
  padding-top: var(--ks-space-3);
  border-top: 1px solid var(--ks-border);
}

.gc-panel-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ks-space-3);
  align-items: start;
  justify-content: space-between;
  margin-bottom: var(--ks-space-3);
}

.gc-panel-head h2 {
  margin: 0;
  color: var(--ks-fg);
  font-size: var(--ks-h4-size);
  letter-spacing: 0;
}

.gc-panel-head p {
  margin: var(--ks-space-1) 0 0;
}

.gc-row-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ks-space-3);
  align-items: start;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-md);
  background: var(--ks-bg-elevated);
  padding: var(--ks-space-3);
}

.gc-row-card strong,
.gc-row-card span {
  display: block;
}

.gc-row-card span {
  margin-top: var(--ks-space-1);
  color: var(--ks-fg-muted);
  line-height: var(--ks-small-leading);
}

.gc-side-panel {
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-lg);
  background: var(--ks-bg-card);
  padding: var(--ks-space-4);
  box-shadow: var(--ks-shadow-card);
}

.gc-side-panel dl {
  display: grid;
  gap: var(--ks-space-3);
  margin: 0;
}

.gc-side-panel div {
  display: grid;
  gap: var(--ks-space-1);
}

.gc-side-panel dt {
  color: var(--ks-fg-muted);
  font-family: var(--ks-font-mono);
  font-size: var(--ks-caption-size);
  font-weight: var(--ks-weight-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.gc-side-panel dd {
  margin: 0;
  color: var(--ks-fg);
}

.gc-detail-split {
  display: grid;
  grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1.6fr);
  gap: var(--ks-space-4);
  align-items: start;
}

.gc-backlink {
  color: var(--ks-fg-muted);
  font-family: var(--ks-font-mono);
  font-size: var(--ks-caption-size);
  font-weight: var(--ks-overline-weight);
  letter-spacing: 0;
  text-decoration: none;
  text-transform: uppercase;
}

.gc-submeta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ks-space-3);
  margin-top: var(--ks-space-2);
  color: var(--ks-fg-muted);
  font-size: var(--ks-caption-size);
}

.gc-submeta span {
  display: inline-flex;
  align-items: center;
  gap: var(--ks-space-1);
}

.gc-source-layout,
.gc-version-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.42fr);
  gap: var(--ks-space-6);
  align-items: start;
}

.gc-version-layout {
  grid-template-columns: minmax(18rem, 0.52fr) minmax(0, 1fr);
}

.gc-timeline-panel,
.gc-legal-preview {
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-xl);
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-card);
  padding: var(--ks-space-4);
}

.gc-clause-preview {
  display: grid;
  gap: var(--ks-space-2);
  margin-bottom: var(--ks-space-4);
}

.gc-clause-preview-item {
  display: grid;
  gap: var(--ks-space-1);
  padding: var(--ks-space-3);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-lg);
  background: var(--ks-bg-elevated);
  text-decoration: none;
  transition: border-color 160ms cubic-bezier(0.16, 1, 0.3, 1), background 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.gc-clause-preview-item:hover {
  border-color: var(--ks-indigo);
  background: var(--ks-bg-card);
}

.gc-clause-cite {
  color: var(--ks-indigo);
  font-size: var(--ks-caption-size);
  font-weight: var(--ks-h4-weight);
}

.gc-clause-head {
  color: var(--ks-fg);
  font-weight: var(--ks-h4-weight);
}

.gc-clause-text {
  color: var(--ks-fg-muted);
  font-size: var(--ks-caption-size);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gc-clause-preview-more {
  color: var(--ks-indigo);
  font-size: var(--ks-caption-size);
  font-weight: var(--ks-h4-weight);
  text-decoration: none;
}

.gc-clause-preview-more:hover {
  text-decoration: underline;
}

.gc-section-head {
  display: flex;
  justify-content: space-between;
  gap: var(--ks-space-4);
  margin-bottom: var(--ks-space-4);
}

.gc-section-head h2,
.gc-section-head h3 {
  margin: 0;
  color: var(--ks-fg);
  font-size: var(--ks-h4-size);
  font-weight: var(--ks-h4-weight);
  letter-spacing: 0;
}

.gc-section-head p {
  margin: var(--ks-space-1) 0 0;
  color: var(--ks-fg-muted);
}

.gc-facts {
  overflow: hidden;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-xl);
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-card);
}

.gc-facts-flat {
  box-shadow: none;
}

.gc-fact-row {
  display: grid;
  gap: var(--ks-space-1);
  padding: var(--ks-space-3) var(--ks-space-4);
  border-top: 1px solid var(--ks-border);
}

.gc-fact-row:first-child {
  border-top: 0;
}

.gc-fact-row span {
  color: var(--ks-fg-muted);
  font-size: var(--ks-caption-size);
}

.gc-fact-row strong {
  color: var(--ks-fg);
  font-weight: var(--ks-h4-weight);
}

.gc-timeline-rail {
  position: relative;
  padding-left: var(--ks-space-5);
}

.gc-timeline-rail::before {
  position: absolute;
  top: var(--ks-space-2);
  bottom: var(--ks-space-2);
  left: var(--ks-space-1);
  width: 2px;
  background: var(--ks-border);
  content: "";
}

.gc-timeline-card {
  position: relative;
  display: grid;
  gap: var(--ks-space-2);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-lg);
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-soft);
  color: inherit;
  padding: var(--ks-space-4);
  text-decoration: none;
}

.gc-timeline-card::before {
  position: absolute;
  top: var(--ks-space-4);
  left: calc((var(--ks-space-5) + var(--ks-space-4)) * -1);
  width: var(--ks-space-3);
  height: var(--ks-space-3);
  border: 2px solid var(--ks-bg-card);
  border-radius: var(--ks-radius-full);
  background: var(--ks-indigo-light);
  content: "";
}

.gc-timeline-card[data-current="true"] {
  border-color: color-mix(in srgb, var(--ks-indigo) 42%, transparent);
}

.gc-timeline-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ks-space-2);
  align-items: center;
}

.gc-timeline-top strong,
.gc-requirement-top strong {
  color: var(--ks-fg);
}

.gc-timeline-card p,
.gc-requirement-card p {
  margin: 0;
  color: var(--ks-fg-secondary);
  line-height: var(--ks-small-leading);
}

.gc-article-group {
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-lg);
  background: var(--ks-bg-elevated);
  padding: var(--ks-space-3);
}

.gc-article-head,
.gc-requirement-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ks-space-2);
  align-items: center;
  justify-content: space-between;
}

.gc-article-head h3 {
  margin: 0;
  color: var(--ks-fg);
  font-size: var(--ks-h4-size);
}

.gc-article-head span {
  color: var(--ks-fg-muted);
  font-size: var(--ks-caption-size);
}

.gc-requirement-stack {
  display: grid;
  gap: var(--ks-space-3);
  margin-top: var(--ks-space-3);
}

.gc-requirement-card {
  display: grid;
  gap: var(--ks-space-2);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-md);
  background: var(--ks-bg-card);
  padding: var(--ks-space-3);
}

.gc-timeline,
.gc-requirement-grid {
  display: grid;
  gap: var(--ks-space-3);
}

.gc-timeline-item {
  display: grid;
  gap: var(--ks-space-2);
  border-left: 2px solid var(--ks-border);
  padding: var(--ks-space-1) 0 var(--ks-space-3) var(--ks-space-4);
  color: inherit;
  text-decoration: none;
}

.gc-list {
  display: flex;
  flex-direction: column;
  gap: var(--ks-space-3);
}

.gc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ks-space-3);
  align-items: start;
}

.gc-requirement-row,
.gc-change-card {
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-xl);
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-card);
  padding: var(--ks-space-4);
}

.gc-requirement-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ks-space-3);
  align-items: start;
}

.gc-change-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ks-space-4);
  align-items: start;
}

.gc-row-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ks-space-2);
  align-items: center;
  justify-content: space-between;
}

.gc-source-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ks-space-1);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-sm);
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-secondary);
  font-family: var(--ks-font-mono);
  font-size: var(--ks-caption-size);
  padding: var(--ks-space-1) var(--ks-space-2);
}

.gc-source-badge span {
  color: var(--ks-fg-dim);
}

.gc-change-card h3 {
  margin: var(--ks-space-3) 0 0;
  color: var(--ks-fg);
  font-size: var(--ks-h4-size);
  letter-spacing: 0;
}

.gc-change-card p {
  color: var(--ks-fg-secondary);
  line-height: var(--ks-small-leading);
}

.gc-row h3,
.gc-panel h3,
.gc-legal-node h3 {
  margin: 0;
  color: var(--ks-fg);
  font-weight: var(--ks-weight-semibold);
  letter-spacing: 0;
}

.gc-row p,
.gc-panel p,
.gc-legal-node p {
  color: var(--ks-fg-muted);
  line-height: var(--ks-small-leading);
}

.gc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ks-space-2);
  margin-top: var(--ks-space-3);
}

.gc-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ks-space-1);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-full);
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-muted);
  font-family: var(--ks-font-mono);
  font-weight: var(--ks-weight-bold);
  padding: var(--ks-space-1) var(--ks-space-2);
  white-space: nowrap;
}

.gc-pill-type {
  border-color: color-mix(in srgb, var(--ks-indigo-light) 32%, transparent);
  background: var(--ks-indigo-bg);
  color: var(--ks-indigo-muted);
}

.gc-pill-binding {
  border-color: color-mix(in srgb, var(--ks-amber) 32%, transparent);
  background: color-mix(in srgb, var(--ks-amber) 15%, transparent);
  color: var(--ks-amber);
}

.gc-pill-voluntary {
  color: var(--ks-fg-muted);
}

.gc-pill-material {
  border-color: color-mix(in srgb, var(--ks-amber) 40%, transparent);
  background: color-mix(in srgb, var(--ks-amber) 15%, transparent);
  color: var(--ks-amber);
}

.gc-pill-good {
  border-color: color-mix(in srgb, var(--ks-green) 40%, transparent);
  background: color-mix(in srgb, var(--ks-green) 15%, transparent);
  color: var(--ks-green);
}

.gc-pill-change {
  border-color: color-mix(in srgb, var(--ks-indigo) 40%, transparent);
  background: var(--ks-indigo-bg);
  color: var(--ks-indigo-light);
}

.gc-legal-tree {
  display: grid;
  gap: var(--ks-space-3);
}

.gc-legal-node[data-child="true"] {
  margin-left: var(--ks-space-6);
}

.gc-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ks-space-4);
}

.gc-change-before,
.gc-change-after {
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-md);
  background: var(--ks-bg-elevated);
  padding: var(--ks-space-3);
}

.gc-change-before strong,
.gc-change-after strong {
  display: block;
  margin-bottom: var(--ks-space-1);
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: var(--ks-overline-size);
  letter-spacing: var(--ks-overline-tracking);
  text-transform: uppercase;
}

.gc-change-before strong {
  color: var(--ks-red);
}

.gc-change-after strong {
  color: var(--ks-green);
}

.gc-reader-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.36fr) minmax(0, 1fr);
  gap: var(--ks-space-5);
  align-items: start;
}

.gc-reader-layout .gc-panel {
  box-shadow: var(--ks-shadow-card);
}

@media (max-width: 980px) {
  .gc-hero,
  .gc-library-head,
  .gc-row,
  .gc-toolbar,
  .gc-card-grid,
  .gc-split,
  .gc-detail-split,
  .gc-source-layout,
  .gc-version-layout,
  .gc-reader-layout,
  .gc-detail-head,
  .gc-detail-grid,
  .gc-detail-summary,
  .gc-requirement-row,
  .gc-change-card,
  .gc-grid,
  .gc-grid-three,
  .gc-kpis-four {
    grid-template-columns: 1fr;
  }

  .gc-results-count {
    margin-left: 0;
    width: 100%;
  }
}

/* ================= Recent changes parity (#5922) ================= */
.ks-screen--recent-changes {
  max-width: 1080px;
}

.ks-screen--recent-changes .page-head {
  margin-bottom: 18px;
}

.ks-change-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.ks-change-tile {
  border: 1px solid var(--ks-border);
  border-radius: 14px;
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-soft);
  padding: 16px;
}

.ks-change-tile strong {
  display: block;
  color: var(--ks-fg);
  font-family: var(--ks-font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
}

.ks-change-tile span {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--ks-fg-muted);
  font-size: 12.5px;
}

.ks-change-amber {
  color: var(--ks-amber) !important;
}

.ks-change-green {
  color: var(--ks-green) !important;
}

.ks-change-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.ks-change-material {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  border: 1px solid var(--ks-border);
  border-radius: 10px;
  background: var(--ks-tint-card);
  color: var(--ks-fg-secondary);
  padding: 10px 14px;
  font-size: 13px;
}

.ks-change-material svg {
  color: var(--ks-amber);
  flex: none;
}

.ks-change-material strong {
  color: var(--ks-fg);
  font-weight: 600;
}

.ks-change-material em {
  color: var(--ks-amber);
  font-style: normal;
  font-weight: 600;
}

.ks-change-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 26px 0 8px;
  flex-wrap: wrap;
}

.ks-change-chip,
.ks-change-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--ks-border);
  border-radius: 999px;
  background: var(--ks-bg-card);
  color: var(--ks-fg-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  padding: 6px 13px;
}

.ks-change-chip:hover,
.ks-change-page-btn:hover:not(:disabled) {
  border-color: var(--ks-border-strong);
  color: var(--ks-fg);
}

.ks-change-chip.is-on {
  border-color: var(--ks-border-emphasis);
  background: var(--ks-indigo-bg);
  color: var(--ks-fg);
}

.ks-change-chip:disabled,
.ks-change-page-btn:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.ks-change-select,
.ks-change-search,
.ks-change-dates label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ks-border);
  border-radius: 999px;
  background: var(--ks-bg-card);
  color: var(--ks-fg-muted);
  padding: 5px 12px;
  font-size: 12.5px;
}

.ks-change-search {
  min-width: min(100%, 260px);
}

.ks-change-select span,
.ks-change-search span,
.ks-change-dates span {
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: 10.5px;
}

.ks-change-select select,
.ks-change-search input,
.ks-change-dates input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ks-fg);
  font: inherit;
}

.ks-change-select select {
  max-width: 13rem;
}

.ks-change-search input {
  width: 100%;
}

.ks-change-rows select {
  max-width: 4.5rem;
}

.ks-change-muted {
  margin-left: auto;
  color: var(--ks-fg-dim);
  font-size: 12.5px;
}

.ks-change-active-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--ks-border);
  border-radius: 999px;
  background: var(--ks-bg-soft);
  color: var(--ks-fg-dim);
  font-size: 12px;
  padding: 6px 10px;
}

.ks-change-active-count strong {
  color: var(--ks-fg);
  font-family: var(--ks-font-mono);
  font-size: 12px;
}

.ks-change-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin-top: 2px;
}

.ks-change-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--ks-fg-muted);
  font-family: var(--ks-font-mono);
  font-size: 11px;
}

.ks-change-page-btn {
  border-radius: 9px;
  font-family: var(--ks-font-body);
}

.ks-change-feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ks-change-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 -2px;
}

.ks-change-divider span {
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ks-change-divider i {
  height: 1px;
  flex: 1;
  background: var(--ks-border);
}

.ks-change-card {
  border: 1px solid var(--ks-border);
  border-radius: 16px;
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-card);
  color: var(--ks-fg);
  padding: 18px 20px;
}

.ks-change-card:hover {
  border-color: var(--ks-border-strong);
}

.ks-change-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ks-change-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--ks-border);
  border-radius: 7px;
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-secondary);
  font-family: var(--ks-font-mono);
  font-size: 11px;
  padding: 4px 9px;
}

.ks-change-source em {
  color: var(--ks-fg-dim);
  font-style: normal;
}

.ks-change-badge {
  border: 1px solid transparent;
  border-radius: 7px;
  font-family: var(--ks-font-mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  padding: 4px 9px;
  text-transform: uppercase;
}

.ks-change-badge--added {
  border-color: color-mix(in srgb, var(--ks-green) 34%, transparent);
  background: color-mix(in srgb, var(--ks-green) 14%, transparent);
  color: var(--ks-green);
}

.ks-change-badge--modified {
  border-color: color-mix(in srgb, var(--ks-amber) 34%, transparent);
  background: color-mix(in srgb, var(--ks-amber) 14%, transparent);
  color: var(--ks-amber);
}

.ks-change-badge--removed {
  border-color: color-mix(in srgb, var(--ks-red) 34%, transparent);
  background: color-mix(in srgb, var(--ks-red) 14%, transparent);
  color: var(--ks-red);
}

.ks-change-badge--split {
  border-color: color-mix(in srgb, var(--ks-purple-light) 36%, transparent);
  background: var(--ks-purple-bg);
  color: var(--ks-purple-light);
}

.ks-change-spacer {
  flex: 1;
}

.ks-change-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-dim);
  font-size: 11.5px;
  padding: 3px 9px;
}

.ks-change-tag--material {
  background: color-mix(in srgb, var(--ks-amber) 12%, transparent);
  color: var(--ks-amber);
}

.ks-change-when {
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: 12px;
  white-space: nowrap;
}

.ks-change-card h2 {
  margin: 12px 0 0;
  color: var(--ks-fg);
  font-family: var(--ks-font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
}

.ks-change-meta {
  margin-top: 5px;
  color: var(--ks-fg-dim);
  font-size: 12.5px;
}

.ks-change-diff {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.ks-change-pane {
  border: 1px solid var(--ks-border);
  border-radius: 11px;
  background: var(--ks-bg-soft);
  padding: 12px 14px;
}

.ks-change-pane strong {
  display: block;
  margin-bottom: 7px;
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.ks-change-pane--before strong {
  color: var(--ks-red);
}

.ks-change-pane--after strong {
  color: var(--ks-green);
}

.ks-change-pane p,
.ks-change-single {
  color: var(--ks-fg-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.ks-change-single {
  margin-top: 13px;
}

.ks-change-legal {
  margin-top: 13px;
  border-left: 2px solid var(--ks-border-emphasis);
  padding: 4px 0 4px 13px;
}

.ks-change-legal span {
  display: block;
  margin-bottom: 5px;
  color: var(--ks-indigo-muted);
  font-family: var(--ks-font-mono);
  font-size: 11px;
}

.ks-change-legal q {
  color: var(--ks-fg-muted);
  font-family: var(--ks-font-mono);
  font-size: 12px;
  line-height: 1.5;
  quotes: none;
}

.ks-change-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--ks-border);
}

.ks-change-foot > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ks-fg-muted);
  font-size: 12.5px;
}

.ks-change-foot > div {
  display: flex;
  gap: 16px;
  margin-left: auto;
}

.ks-change-foot a {
  display: inline-flex;
  align-items: center;
  color: var(--ks-indigo-light);
  font-size: 13px;
  text-decoration: none;
}

.ks-change-foot a:hover {
  text-decoration: underline;
}

@media (max-width: 820px) {
  .ks-change-summary,
  .ks-change-diff {
    grid-template-columns: 1fr;
  }

  .ks-change-muted,
  .ks-change-foot > div {
    margin-left: 0;
  }

  .ks-change-foot {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ================= What changed parity (#5923) ================= */
.ks-screen--what-changed {
  max-width: 1100px;
}

.ks-diff-version-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--ks-border);
  border-radius: 12px;
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-soft);
  padding: 8px 10px;
}

.ks-diff-version-card div {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  padding: 4px 10px;
}

.ks-diff-version-card span {
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ks-diff-version-card strong {
  color: var(--ks-fg);
  font-size: 13.5px;
  font-weight: 500;
}

.ks-diff-version-card svg {
  color: var(--ks-indigo-light);
}

.ks-diff-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.ks-diff-tile {
  border: 1px solid var(--ks-border);
  border-radius: 14px;
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-soft);
  padding: 16px;
}

.ks-diff-tile strong {
  display: block;
  color: var(--ks-fg);
  font-family: var(--ks-font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
}

.ks-diff-tile span {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--ks-fg-muted);
  font-size: 12.5px;
}

.ks-diff-tile i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.ks-diff-green {
  color: var(--ks-green) !important;
}

.ks-diff-amber {
  color: var(--ks-amber) !important;
}

.ks-diff-red {
  color: var(--ks-red) !important;
}

.ks-diff-purple {
  color: var(--ks-purple-light) !important;
}

.ks-diff-material {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  border: 1px solid var(--ks-border);
  border-radius: 10px;
  background: var(--ks-tint-card);
  color: var(--ks-fg-secondary);
  font-size: 13px;
  padding: 10px 14px;
}

.ks-diff-material svg {
  color: var(--ks-amber);
  flex: none;
}

.ks-diff-material strong {
  color: var(--ks-fg);
  font-weight: 600;
}

.ks-diff-material em {
  color: var(--ks-amber);
  font-style: normal;
  font-weight: 600;
}

.ks-diff-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 26px 0 14px;
  flex-wrap: wrap;
}

.ks-diff-toolbar > span {
  margin-left: auto;
  color: var(--ks-fg-dim);
  font-size: 12.5px;
}

.ks-diff-chip {
  border: 1px solid var(--ks-border);
  border-radius: 999px;
  background: var(--ks-bg-card);
  color: var(--ks-fg-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  padding: 6px 13px;
}

.ks-diff-chip:hover {
  border-color: var(--ks-border-strong);
  color: var(--ks-fg-secondary);
}

.ks-diff-chip.is-on {
  border-color: var(--ks-border-emphasis);
  background: var(--ks-indigo-bg);
  color: var(--ks-fg);
}

.ks-diff-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ks-diff-change {
  border: 1px solid var(--ks-border);
  border-radius: 16px;
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-card);
  padding: 18px 20px;
}

.ks-diff-change:hover {
  border-color: var(--ks-border-strong);
}

.ks-diff-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ks-diff-row h2 {
  color: var(--ks-fg);
  font-family: var(--ks-font-display);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0;
}

.ks-diff-spacer {
  flex: 1;
}

.ks-diff-badge {
  border: 1px solid transparent;
  border-radius: 7px;
  font-family: var(--ks-font-mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  padding: 4px 9px;
  text-transform: uppercase;
}

.ks-diff-badge--added {
  border-color: color-mix(in srgb, var(--ks-green) 34%, transparent);
  background: color-mix(in srgb, var(--ks-green) 14%, transparent);
  color: var(--ks-green);
}

.ks-diff-badge--modified {
  border-color: color-mix(in srgb, var(--ks-amber) 34%, transparent);
  background: color-mix(in srgb, var(--ks-amber) 14%, transparent);
  color: var(--ks-amber);
}

.ks-diff-badge--removed {
  border-color: color-mix(in srgb, var(--ks-red) 34%, transparent);
  background: color-mix(in srgb, var(--ks-red) 14%, transparent);
  color: var(--ks-red);
}

.ks-diff-badge--split,
.ks-diff-badge--unchanged {
  border-color: color-mix(in srgb, var(--ks-purple-light) 36%, transparent);
  background: var(--ks-purple-bg);
  color: var(--ks-purple-light);
}

.ks-diff-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-dim);
  font-size: 11.5px;
  padding: 3px 9px;
}

.ks-diff-tag--material {
  background: color-mix(in srgb, var(--ks-amber) 12%, transparent);
  color: var(--ks-amber);
}

.ks-diff-meta {
  margin-top: 4px;
  color: var(--ks-fg-dim);
  font-size: 12px;
}

.ks-diff-panes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.ks-diff-pane {
  border: 1px solid var(--ks-border);
  border-radius: 11px;
  background: var(--ks-bg-soft);
  padding: 12px 14px;
}

.ks-diff-pane strong {
  display: block;
  margin-bottom: 7px;
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.ks-diff-pane > span {
  display: block;
  margin: -4px 0 7px;
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: 10px;
}

.ks-diff-pane--before strong {
  color: var(--ks-red);
}

.ks-diff-pane--after strong {
  color: var(--ks-green);
}

.ks-diff-pane p {
  color: var(--ks-fg-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.ks-diff-split-into {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ks-diff-leaf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px dashed var(--ks-border-strong);
  border-radius: 9px;
  color: var(--ks-fg-secondary);
  font-size: 12.5px;
  padding: 7px 11px;
}

.ks-diff-leaf svg {
  color: var(--ks-purple-light);
}

.ks-diff-legal {
  margin-top: 13px;
  border-left: 2px solid var(--ks-border-emphasis);
  padding: 4px 0 4px 13px;
}

.ks-diff-legal span {
  display: block;
  margin-bottom: 5px;
  color: var(--ks-indigo-muted);
  font-family: var(--ks-font-mono);
  font-size: 11px;
}

.ks-diff-legal q {
  color: var(--ks-fg-muted);
  font-family: var(--ks-font-mono);
  font-size: 12px;
  line-height: 1.5;
  quotes: none;
}

.ks-diff-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--ks-border);
}

.ks-diff-fact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ks-fg-secondary);
  font-size: 13px;
}

.ks-diff-fact svg {
  color: var(--ks-fg-muted);
  flex: none;
}

.ks-diff-fact strong {
  color: var(--ks-fg);
  font-weight: 500;
}

.ks-diff-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--ks-indigo-light);
  font-size: 13px;
  text-decoration: none;
}

.ks-diff-link:hover {
  text-decoration: underline;
}

@media (max-width: 860px) {
  .ks-diff-summary,
  .ks-diff-panes {
    grid-template-columns: 1fr;
  }

  .ks-diff-toolbar > span,
  .ks-diff-link {
    margin-left: 0;
  }

  .ks-diff-foot {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ================= Legal text viewer parity (#5924) ================= */
.ks-screen--legal-reader {
  max-width: none;
  padding: 0;
}

.ks-legal-topbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  border-bottom: 1px solid var(--ks-border);
  background: color-mix(in srgb, var(--ks-bg) 86%, transparent);
  backdrop-filter: blur(8px);
  padding: 0 22px;
}

.ks-legal-contents-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ks-border);
  border-radius: 9px;
  background: var(--ks-bg-card);
  color: var(--ks-fg-secondary);
  font-size: 13px;
  padding: 8px 13px;
  text-decoration: none;
}

.ks-legal-contents-btn:hover {
  border-color: var(--ks-border-strong);
  color: var(--ks-fg);
}

.ks-legal-topbar h1 {
  color: var(--ks-fg);
  font-family: var(--ks-font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}

.ks-legal-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--ks-fg-muted);
  font-size: 13px;
}

.ks-legal-crumbs a {
  color: inherit;
  text-decoration: none;
}

.ks-legal-crumbs a:hover,
.ks-legal-crumbs strong {
  color: var(--ks-fg);
  font-weight: 500;
}

.ks-legal-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 720px) 268px;
  justify-content: center;
  gap: 36px;
  padding: 40px 48px 96px;
}

.ks-legal-contents,
.ks-legal-refs {
  position: sticky;
  top: 80px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow: auto;
}

.ks-legal-contents {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--ks-border);
  border-radius: 14px;
  background: var(--ks-bg-soft);
  padding: 14px;
}

.ks-legal-contents > div strong {
  display: block;
  color: var(--ks-fg);
  font-size: 14px;
}

.ks-legal-contents > div span {
  display: block;
  margin-top: 3px;
  color: var(--ks-fg-dim);
  font-size: 11.5px;
}

.ks-legal-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ks-border);
  border-radius: 9px;
  background: var(--ks-bg-card);
  color: var(--ks-fg-dim);
  padding: 8px 11px;
}

.ks-legal-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ks-fg);
  font: inherit;
  font-size: 12.5px;
}

.ks-legal-tree-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  color: var(--ks-fg-muted);
  font-size: 12.5px;
  padding: 7px 9px;
  text-decoration: none;
}

.ks-legal-tree-row:hover {
  background: var(--ks-bg-hover);
  color: var(--ks-fg-secondary);
}

.ks-legal-tree-row.is-on {
  background: var(--ks-indigo-bg);
  color: var(--ks-fg);
}

.ks-legal-tree-row.is-child {
  padding-left: 24px;
}

.ks-legal-tree-row span {
  color: var(--ks-indigo-muted);
  flex: none;
  font-family: var(--ks-font-mono);
  font-size: 11px;
}

.ks-legal-reader {
  min-width: 0;
}

.ks-legal-citepath {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: 11px;
}

.ks-legal-citepath strong {
  color: var(--ks-indigo-muted);
  font-weight: 500;
}

.ks-legal-chapline {
  margin-bottom: 10px;
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.ks-legal-title {
  margin-top: 12px;
  color: var(--ks-fg);
  font-family: var(--ks-font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
}

.ks-legal-title span {
  display: block;
  margin-bottom: 8px;
  color: var(--ks-indigo-muted);
  font-family: var(--ks-font-mono);
  font-size: 15px;
  font-weight: 500;
}

.ks-legal-text {
  margin-top: 30px;
}

.ks-legal-para {
  display: flex;
  gap: 16px;
  border-top: 1px solid var(--ks-border);
  padding: 16px 0;
  scroll-margin-top: 72px;
}

.ks-legal-para:first-child {
  border-top: 0;
  padding-top: 4px;
}

.ks-legal-para[data-child="true"] {
  margin-left: 32px;
}

.ks-legal-para.is-highlighted {
  border-top: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ks-indigo) 7%, transparent);
  margin: 0 -16px;
  padding: 16px;
}

.ks-legal-marker {
  flex: none;
  width: 52px;
  color: var(--ks-indigo-muted);
  font-family: var(--ks-font-mono);
  font-size: 14px;
  padding-top: 2px;
}

.ks-legal-para h2 {
  margin-bottom: 8px;
  color: var(--ks-fg);
  font-family: var(--ks-font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
}

.ks-legal-para p {
  color: var(--ks-fg-secondary);
  font-size: 16px;
  line-height: 1.78;
}

.ks-legal-inline-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ks-legal-inline-refs span {
  border-bottom: 1px dotted color-mix(in srgb, var(--ks-indigo-light) 50%, transparent);
  color: var(--ks-indigo-light);
  font-size: 12.5px;
}

.ks-legal-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 40px;
}

.ks-legal-page-link {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--ks-border);
  border-radius: 13px;
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-soft);
  color: inherit;
  padding: 14px 16px;
  text-decoration: none;
}

.ks-legal-page-link:hover {
  border-color: var(--ks-border-strong);
}

.ks-legal-page-link.is-next {
  justify-content: flex-end;
  text-align: right;
}

.ks-legal-page-link small {
  display: block;
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ks-legal-page-link strong {
  display: block;
  margin-top: 3px;
  color: var(--ks-fg);
  font-size: 13.5px;
  font-weight: 500;
}

.ks-legal-refs {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.ks-legal-refs h2 {
  margin-bottom: 11px;
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.ks-legal-fact,
.ks-legal-xchip,
.ks-legal-def {
  border: 1px solid var(--ks-border);
  border-radius: 10px;
  background: var(--ks-bg-card);
  margin-bottom: 8px;
}

.ks-legal-fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
}

.ks-legal-fact span {
  color: var(--ks-fg-dim);
  font-size: 11.5px;
}

.ks-legal-fact strong {
  color: var(--ks-fg);
  font-size: 12.5px;
  font-weight: 500;
  text-align: right;
}

.ks-legal-xchip {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ks-fg-secondary);
  font-size: 12.5px;
  padding: 9px 11px;
  text-decoration: none;
}

.ks-legal-xchip:hover {
  border-color: var(--ks-border-strong);
  color: var(--ks-fg);
}

.ks-legal-xchip svg {
  color: var(--ks-indigo-light);
  flex: none;
}

.ks-legal-xchip span {
  margin-left: auto;
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: 10.5px;
}

.ks-legal-def {
  padding: 11px 13px;
}

.ks-legal-def strong {
  display: block;
  color: var(--ks-purple-light);
  font-size: 12.5px;
}

.ks-legal-def span,
.ks-legal-muted {
  display: block;
  margin-top: 4px;
  color: var(--ks-fg-muted);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 1180px) {
  .ks-legal-layout {
    grid-template-columns: minmax(0, 720px);
    justify-content: center;
  }

  .ks-legal-contents,
  .ks-legal-refs {
    position: static;
    max-height: none;
  }
}

@media (max-width: 720px) {
  .ks-legal-layout {
    padding: 28px 18px 72px;
  }

  .ks-legal-topbar {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 18px;
  }

  .ks-legal-pager {
    grid-template-columns: 1fr;
  }
}

/* ---- GovernanceIdentityPage (folded #6013 1d) ---- */
.gci-page {
  display: flex;
  flex-direction: column;
  gap: var(--ks-space-5);
  max-width: 1160px;
}

.gci-wide-page {
  max-width: 1200px;
}

.gci-orghead {
  display: flex;
  align-items: center;
  gap: var(--ks-space-4);
  padding: var(--ks-space-5);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-xl);
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-card);
}

.gci-action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 38px;
  margin-left: auto;
  padding: 8px 14px;
  border: 1px solid var(--ks-border-strong);
  border-radius: var(--ks-radius-lg);
  background: var(--ks-bg-elevated);
  color: var(--ks-fg);
  font: inherit;
  font-size: var(--ks-small-size);
  font-weight: var(--ks-weight-bold);
  text-decoration: none;
  cursor: pointer;
}

.gci-action-link:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--ks-indigo) 42%, transparent);
  background: var(--ks-bg-hover);
}

.gci-action-link:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.gci-edit-panel {
  padding: var(--ks-space-4);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-xl);
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-card);
}

.gci-edit-message {
  padding: var(--ks-space-3) var(--ks-space-4);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-lg);
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-secondary);
}

.gci-edit-message[data-kind="error"] {
  border-color: color-mix(in srgb, var(--ks-red) 45%, var(--ks-border));
  color: var(--ks-red);
}

.gci-edit-message[data-kind="success"] {
  border-color: color-mix(in srgb, var(--ks-green) 45%, var(--ks-border));
  color: var(--ks-green);
}

.gci-edit-checks {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: var(--ks-space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.gci-edit-checks legend {
  flex-basis: 100%;
  color: var(--ks-fg-muted);
  font-family: var(--ks-font-mono);
  font-size: var(--ks-caption-size);
  font-weight: var(--ks-weight-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.gci-edit-checks label {
  display: inline-flex;
  align-items: center;
  gap: var(--ks-space-2);
  min-height: 38px;
  padding: var(--ks-space-2) var(--ks-space-3);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-pill);
  background: var(--ks-bg-elevated);
  color: var(--ks-fg);
  font-family: var(--ks-font-body);
  font-size: var(--ks-small-size);
  font-weight: var(--ks-weight-semibold);
  text-transform: none;
}

.gci-edit-checks input {
  accent-color: var(--ks-indigo);
}

.ks-screen .ks-form .gci-role-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--ks-space-2);
}

.ks-screen .ks-form .gci-role-checks .gci-role-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 44px;
  gap: var(--ks-space-2);
  padding: 10px 12px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-lg);
  background: var(--ks-bg-elevated);
  color: var(--ks-fg);
  cursor: pointer;
  font-family: var(--ks-font-body);
  font-size: var(--ks-small-size);
  font-weight: var(--ks-weight-semibold);
  line-height: var(--ks-small-leading);
  text-transform: none;
}

.ks-screen .ks-form .gci-role-checks .gci-role-option:hover {
  border-color: color-mix(in srgb, var(--ks-indigo) 36%, var(--ks-border));
  background: var(--ks-bg-hover);
}

.ks-screen .ks-form .gci-role-checks .gci-role-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--ks-indigo) 62%, var(--ks-border));
  background: color-mix(in srgb, var(--ks-indigo) 9%, var(--ks-bg-elevated));
}

.ks-screen .ks-form .gci-role-checks .gci-role-option input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--ks-indigo);
}

.ks-screen .ks-form .gci-role-checks .gci-role-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.detect-guardian-view-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
}

.detect-guardian-view-tabs .ks-btn {
  width: 100%;
  min-width: 0;
  justify-content: center;
  min-height: 2.75rem;
  white-space: nowrap;
}

.detect-view-count {
  flex: 0 0 auto;
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-muted);
  -webkit-text-fill-color: var(--ks-fg-muted);
}

.detect-guardian-view-tabs .ks-btn--primary .detect-view-count {
  background: var(--ks-bg-card);
  color: var(--ks-fg) !important;
  -webkit-text-fill-color: var(--ks-fg);
}

.detect-incident-row {
  grid-template-columns: 8px 40px minmax(0, 1fr) max-content;
  align-items: start;
}

.detect-severity-rail {
  width: 8px;
  min-width: 8px;
  justify-self: stretch;
}

.detect-incident-title,
.detect-incident-meta {
  white-space: normal;
  overflow-wrap: anywhere;
}

.detect-incident-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.detect-status-pill {
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}

.detect-incident-badges {
  display: flex;
  align-self: center;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ks-space-2);
}

.detect-incident-badges .ks-pill,
.detect-incident-badges .detect-status-pill {
  flex: 0 0 auto;
}

.detect-incident-row .ks-pill,
.detect-incident-row [class*="rounded-full"] {
  justify-self: start;
}

@media (max-width: 720px) {
  .detect-guardian-view-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detect-incident-row {
    grid-template-columns: 8px 40px minmax(0, 1fr);
  }

  .detect-incident-badges {
    grid-column: 3;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

.detect-connectors-table {
  table-layout: fixed;
}

.detect-connectors-table .detect-connector-col,
.detect-connectors-table .detect-connector-cell {
  width: 28%;
}

.detect-connectors-table .detect-tier-col,
.detect-connectors-table .detect-tier-cell {
  width: 11%;
}

.detect-connectors-table .detect-capabilities-col,
.detect-connectors-table .detect-capabilities-cell {
  width: 38%;
}

.detect-connectors-table .detect-reliability-col,
.detect-connectors-table .detect-reliability-cell {
  width: 23%;
}

.detect-connectors-table td,
.detect-connectors-table th {
  vertical-align: top;
}

.detect-connectors-table td {
  overflow-wrap: anywhere;
}

.detect-capability-pills {
  max-width: none;
}

.detect-capability-pills span {
  max-width: 100%;
  line-height: 1.3;
  white-space: normal;
}

.detect-reliability-cell > div {
  min-width: 0;
}

.detect-reliability-state {
  max-width: 7.5rem;
  overflow-wrap: anywhere;
  text-align: right;
}

.ks-screen--policy-library .prow {
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 15rem);
  gap: var(--ks-space-5);
  align-items: start;
}

.ks-screen--policy-library .head {
  align-items: flex-start;
}

.ks-screen--policy-library .title {
  flex: 1 1 18rem;
  min-width: min(100%, 14rem);
  overflow-wrap: anywhere;
  line-height: var(--ks-body-leading);
}

.ks-screen--policy-library .status,
.ks-screen--policy-library .cov {
  flex: 0 1 auto;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

.ks-screen--policy-library .cov-col {
  min-width: 0;
}

.ks-screen--policy-library .crow {
  align-items: flex-start;
  flex-wrap: wrap;
}

.ks-exceptions .pair {
  max-width: 100%;
}

.ks-exceptions .pair .node {
  flex: 1 1 0;
}

.ks-exceptions .pair .node .nt {
  display: grid;
  gap: 2px;
}

.ks-exceptions .pair .node .nn {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ks-exceptions .pair .conn {
  flex: 0 0 auto;
}

.gci-orghead h1,
.gci-member-detail h2,
.gci-section h2,
.gci-side-head h2,
.gci-panel h2 {
  margin: 0;
  color: var(--ks-fg);
  letter-spacing: 0;
}

.gci-orghead h1 {
  font-size: var(--ks-h2-size);
  font-family: var(--ks-font-display);
  font-weight: var(--ks-h2-weight);
  line-height: var(--ks-h2-leading);
  letter-spacing: var(--ks-h2-tracking);
}

.gci-logo,
.gci-avatar {
  display: grid;
  place-items: center;
  flex: none;
  background: var(--ks-indigo);
  color: var(--ks-fg-on-accent);
  font-weight: var(--ks-weight-bold);
}

.gci-logo {
  width: 52px;
  height: 52px;
  border-radius: var(--ks-radius-xl);
  box-shadow: var(--ks-shadow-card);
  font-size: var(--ks-h3-size);
}

.gci-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ks-space-4);
}

.gci-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: var(--ks-space-5);
  align-items: start;
}

.gci-option-field {
  min-width: 0;
  margin: 0;
  padding: var(--ks-space-3);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-lg);
  background: var(--ks-bg-soft);
}

.gci-option-field legend {
  padding: 0 var(--ks-space-1);
  color: var(--ks-fg);
  font-size: var(--ks-small-size);
  font-weight: var(--ks-weight-semibold);
}

.gci-option-help {
  margin-top: var(--ks-space-2);
  color: var(--ks-fg-muted);
  font-size: var(--ks-caption-size);
  line-height: var(--ks-caption-leading);
}

.gci-multi-select {
  width: 100%;
  min-height: 138px;
  margin-top: var(--ks-space-2);
  padding: 8px 10px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-md);
  background: var(--ks-bg-card);
  color: var(--ks-fg);
  font: inherit;
  font-size: var(--ks-small-size);
  line-height: var(--ks-small-leading);
}

.gci-multi-select:focus,
.gci-other-input:focus {
  border-color: color-mix(in srgb, var(--ks-indigo) 55%, var(--ks-border));
  outline: 2px solid color-mix(in srgb, var(--ks-indigo) 24%, transparent);
  outline-offset: 2px;
}

.gci-multi-select option {
  padding: 6px 8px;
  color: var(--ks-fg);
}

.gci-other-row {
  margin-top: var(--ks-space-2);
}

.gci-option {
  display: flex;
  align-items: center;
  gap: var(--ks-space-2);
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-md);
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-secondary);
  font-size: var(--ks-small-size);
  line-height: var(--ks-small-leading);
}

.gci-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--ks-indigo) 45%, var(--ks-border));
  background: var(--ks-indigo-bg);
  color: var(--ks-fg);
}

.gci-option input {
  accent-color: var(--ks-indigo);
}

.gci-other-input {
  width: 100%;
  min-height: 38px;
  margin-top: var(--ks-space-2);
  padding: 8px 10px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-md);
  background: var(--ks-bg-card);
  color: var(--ks-fg);
  font: inherit;
  font-size: var(--ks-small-size);
}

.gci-panel,
.gci-section,
.gci-side-panel,
.gci-member-list,
.gci-member-detail {
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-xl);
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-card);
}

.gci-panel,
.gci-section {
  padding: var(--ks-space-4);
}

.gci-panel-head,
.gci-side-head,
.gci-section-label,
.gci-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ks-space-3);
}

.gci-panel-head {
  margin-bottom: var(--ks-space-3);
}

.gci-panel-head h2 {
  flex: 1;
  font-size: var(--ks-body-size);
}

.gci-applicability-row {
  display: grid;
  gap: var(--ks-space-3);
  align-items: start;
}

.gci-applicability-kpis {
  grid-template-columns: repeat(4, minmax(9rem, 1fr));
}

.gci-readiness-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(24rem, 34rem);
  gap: var(--ks-space-5);
  align-items: start;
  padding: var(--ks-space-4);
}

.gci-readiness-card .gc-section-head {
  margin-bottom: 0;
}

.gci-readiness-head {
  min-width: 0;
  align-items: flex-start;
}

.gci-readiness-head > div {
  min-width: 0;
}

.gci-readiness-head strong {
  flex: 0 0 auto;
  white-space: nowrap;
}

.gci-readiness-kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ks-space-3);
}

.gci-applicability-toolbar {
  align-items: end;
  gap: var(--ks-space-3);
}

.gci-applicability-toolbar .gci-chipset {
  align-items: center;
}

.gci-applicability-toolbar label {
  margin-left: auto;
}

.gci-applicability-row-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--ks-space-2) var(--ks-space-3);
}

.gci-applicability-row-head strong {
  overflow-wrap: anywhere;
  line-height: var(--ks-body-leading);
}

.gci-applicability-row .gci-chipset {
  flex: 0 1 auto;
  align-items: flex-start;
  justify-content: flex-start;
}

.gci-applicability-facts {
  display: grid;
  gap: var(--ks-space-2);
  margin: 0;
}

.gci-applicability-facts div {
  display: grid;
  grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr);
  gap: var(--ks-space-3);
  align-items: start;
}

.gci-applicability-facts dt {
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: var(--ks-caption-size);
  font-weight: var(--ks-weight-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.gci-applicability-facts dd {
  margin: 0;
  color: var(--ks-fg-secondary);
  overflow-wrap: anywhere;
  line-height: var(--ks-body-leading);
}

@media (max-width: 720px) {
  .gci-applicability-kpis,
  .gci-readiness-card,
  .gci-readiness-kpis {
    grid-template-columns: 1fr;
  }

  .gci-readiness-head,
  .gci-applicability-toolbar {
    align-items: stretch;
  }

  .gci-applicability-toolbar label {
    margin-left: 0;
  }

  .gci-applicability-row-head,
  .gci-applicability-facts div {
    grid-template-columns: 1fr;
  }
}

.gci-panel-head > span:last-child,
.gci-side-head > span,
.gci-section-label > span,
.gci-list-head {
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: var(--ks-caption-size);
}

.gci-panel-icon,
.gci-role-icon {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: var(--ks-radius-md);
  background: var(--ks-indigo-bg);
  color: var(--ks-indigo-muted);
  font-weight: var(--ks-weight-bold);
}

.gci-panel-icon {
  width: 30px;
  height: 30px;
  font-size: var(--ks-small-size);
}

.gci-chipset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ks-space-2);
}

.gci-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ks-space-1);
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-pill);
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-secondary);
  font-size: var(--ks-small-size);
  text-transform: capitalize;
}

.gci-chip-check::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--ks-radius-pill);
  background: var(--ks-green);
}

.gci-section h2,
.gci-side-head h2 {
  font-size: var(--ks-h3-size);
}

.gci-use-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ks-space-3);
  margin-top: var(--ks-space-3);
}

.gci-use {
  min-height: 118px;
  padding: var(--ks-space-3);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-xl);
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-muted);
}

.gci-use span,
.gci-use strong,
.gci-use p {
  display: block;
}

.gci-use span {
  color: var(--ks-fg);
  font-weight: var(--ks-weight-bold);
}

.gci-use p {
  margin: var(--ks-space-2) 0 0;
  color: var(--ks-fg-muted);
  font-size: var(--ks-small-size);
  line-height: var(--ks-small-leading);
}

.gci-use strong {
  position: relative;
  width: 36px;
  height: 20px;
  margin-top: var(--ks-space-3);
  overflow: hidden;
  border-radius: var(--ks-radius-pill);
  background: var(--ks-border);
  color: transparent;
}

.gci-use strong::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: var(--ks-radius-pill);
  background: var(--ks-bg-card);
  transition: transform .12s ease;
}

.gci-use[data-enabled="true"] {
  border-color: color-mix(in srgb, var(--ks-indigo) 42%, transparent);
  background: var(--ks-indigo-bg);
}

.gci-use[data-enabled="true"] strong {
  background: var(--ks-indigo);
}

.gci-use[data-enabled="true"] strong::after {
  transform: translateX(16px);
}

.gci-side-panel {
  overflow: hidden;
}

.gci-side-head {
  padding: var(--ks-space-4);
  border-bottom: 1px solid var(--ks-border);
}

.gci-department-list {
  display: flex;
  flex-direction: column;
}

.gci-applicability-list {
  gap: var(--ks-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gci-department {
  padding: var(--ks-space-3) var(--ks-space-4);
  border-top: 1px solid var(--ks-border);
}

.gci-department:first-child {
  border-top: 0;
}

.gci-department strong,
.gci-department span {
  display: block;
}

.gci-department span,
.gci-department p,
.gci-member-detail p,
.gci-role-copy > span {
  color: var(--ks-fg-muted);
}

.gci-department p {
  margin: var(--ks-space-2) 0 0;
  line-height: var(--ks-small-leading);
}

.gci-members-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: var(--ks-space-5);
  align-items: start;
}

.gci-member-list,
.gci-member-detail {
  overflow: hidden;
}

.gci-list-head {
  padding: var(--ks-space-3) var(--ks-space-4);
  border-bottom: 1px solid var(--ks-border);
  text-transform: uppercase;
}

.gci-pagination-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ks-space-3);
  padding: var(--ks-space-3) var(--ks-space-4);
  border-bottom: 1px solid var(--ks-border);
  background: var(--ks-bg-soft);
}

.gci-pagination-row .gc-pagination {
  justify-content: flex-end;
}

.gci-dept-list > .gci-pagination-row,
.gci-role-list-panel > .gci-pagination-row,
.gci-role-detail .gci-pagination-row {
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-lg);
  background: var(--ks-bg-card);
}

.gci-member-row {
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ks-space-3);
  min-height: 64px;
  padding: var(--ks-space-3) var(--ks-space-4);
  border: 0;
  border-top: 1px solid var(--ks-border);
  background: transparent;
  color: var(--ks-fg);
  text-align: left;
  cursor: pointer;
}

.gci-member-row:first-of-type {
  border-top: 0;
}

.gci-member-row:hover {
  background: var(--ks-bg-hover);
}

.gci-member-row[data-selected="true"] {
  background: var(--ks-indigo-bg);
  box-shadow: inset 3px 0 0 var(--ks-indigo);
}

.gci-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--ks-radius-pill);
  font-size: var(--ks-small-size);
}

.gci-avatar-large {
  width: 56px;
  height: 56px;
  font-size: var(--ks-h3-size);
}

.gci-member-main {
  min-width: 0;
}

.gci-member-main strong,
.gci-member-main span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gci-member-main span,
.gci-role-count {
  color: var(--ks-fg-muted);
}

.gci-role-count {
  min-width: 30px;
  padding: 3px 8px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-pill);
  background: var(--ks-bg-elevated);
  text-align: center;
  font-family: var(--ks-font-mono);
  font-size: var(--ks-caption-size);
}

.gci-member-detail header {
  display: flex;
  align-items: center;
  gap: var(--ks-space-4);
  padding: var(--ks-space-5);
  border-bottom: 1px solid var(--ks-border);
}

.gci-member-detail p {
  margin: var(--ks-space-1) 0 0;
}

.gci-member-detail section {
  padding: var(--ks-space-5);
  border-bottom: 1px solid var(--ks-border);
}

.gci-member-detail section:last-child {
  border-bottom: 0;
}

.gci-section-label {
  margin-bottom: var(--ks-space-3);
}

.gci-section-label h3 {
  margin: 0;
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: var(--ks-caption-size);
  font-weight: var(--ks-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0;
}

.gci-detail-box {
  display: inline-flex;
  padding: 10px 14px;
  border: 1px solid var(--ks-border-strong);
  border-radius: var(--ks-radius-lg);
  background: var(--ks-bg-elevated);
  color: var(--ks-fg);
  font-weight: var(--ks-weight-bold);
}

.gci-detail-box.gci-applicability-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ks-space-3);
  padding: var(--ks-space-4);
  border-color: var(--ks-border);
  background: var(--ks-bg-card);
  color: var(--ks-fg);
  font-weight: var(--ks-weight-regular);
}

.gci-detail-box.gci-applicability-row .gci-applicability-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ks-space-3);
}

.gci-applicability-title {
  min-width: 0;
  max-width: 72ch;
  color: var(--ks-fg);
  font-size: var(--ks-body-size);
  font-weight: var(--ks-weight-semibold);
  line-height: var(--ks-body-leading);
  overflow-wrap: anywhere;
}

.gci-applicability-ref {
  margin-right: var(--ks-space-1);
  color: var(--ks-fg-secondary);
  font-family: var(--ks-font-mono);
  font-size: var(--ks-small-size);
  font-weight: var(--ks-weight-semibold);
}

.gci-detail-box.gci-applicability-row .gci-chipset {
  flex: 0 0 auto;
  align-items: center;
  gap: var(--ks-space-2);
}

.gci-detail-box.gci-applicability-row .gci-chip {
  min-height: 28px;
  padding: 4px 10px;
  font-size: var(--ks-caption-size);
  font-weight: var(--ks-weight-semibold);
  white-space: nowrap;
}

.gci-detail-box.gci-applicability-row .gci-applicability-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ks-space-3);
}

.gci-detail-box.gci-applicability-row .gci-applicability-facts div {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ks-space-1);
}

.gci-detail-box.gci-applicability-row .gci-applicability-facts dt {
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: var(--ks-caption-size);
  font-weight: var(--ks-weight-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.gci-detail-box.gci-applicability-row .gci-applicability-facts dd {
  margin: 0;
  color: var(--ks-fg-secondary);
  font-size: var(--ks-small-size);
  font-weight: var(--ks-weight-regular);
  line-height: var(--ks-small-leading);
  overflow-wrap: anywhere;
}

@media (max-width: 820px) {
  .gci-detail-box.gci-applicability-row .gci-applicability-row-head,
  .gci-detail-box.gci-applicability-row .gci-applicability-facts {
    grid-template-columns: 1fr;
  }

  .gci-detail-box.gci-applicability-row .gci-applicability-row-head {
    display: grid;
  }

  .gci-detail-box.gci-applicability-row .gci-chipset {
    justify-content: flex-start;
  }
}

.gci-role-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ks-space-3);
}

.gci-role-card {
  display: flex;
  align-items: center;
  gap: var(--ks-space-3);
  padding: var(--ks-space-3);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-xl);
  background: var(--ks-bg-elevated);
}

.gci-role-icon {
  width: 34px;
  height: 34px;
}

.gci-role-card[data-role-kind="system"] .gci-role-icon {
  background: color-mix(in srgb, var(--ks-amber) 15%, transparent);
  color: var(--ks-amber);
}

.gci-role-copy {
  min-width: 0;
}

.gci-role-copy strong,
.gci-role-copy span {
  display: block;
}

.gci-role-copy span {
  margin-top: var(--ks-space-1);
  line-height: var(--ks-small-leading);
}

.gci-toolbar {
  display: flex;
  align-items: center;
  gap: var(--ks-space-2);
  padding: var(--ks-space-3);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-xl);
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-card);
}

.gci-filter {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-pill);
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-muted);
  font: inherit;
  font-size: var(--ks-small-size);
  font-weight: var(--ks-weight-semibold);
  text-transform: capitalize;
  cursor: pointer;
}

.gci-filter[data-active="true"] {
  border-color: color-mix(in srgb, var(--ks-indigo) 42%, transparent);
  background: var(--ks-indigo-bg);
  color: var(--ks-fg);
}

.gci-search {
  display: flex;
  align-items: center;
  gap: var(--ks-space-2);
  min-height: 38px;
  margin-left: auto;
  padding: 0 var(--ks-space-3);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-lg);
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: var(--ks-caption-size);
  text-transform: uppercase;
}

.gci-search input {
  width: min(260px, 30vw);
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ks-fg);
  font: inherit;
  font-family: var(--ks-font-body);
  font-size: var(--ks-small-size);
  text-transform: none;
}

.gci-toolbar-count {
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: var(--ks-caption-size);
}

.gci-dept-list {
  display: flex;
  flex-direction: column;
  gap: var(--ks-space-3);
}

.gci-dept-row,
.gci-role-detail,
.gci-role-list-panel {
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-xl);
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-card);
  overflow: hidden;
}

.gci-dept-row[data-archived="true"] {
  opacity: 0.72;
}

.gci-dept-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--ks-space-4);
  padding: var(--ks-space-4);
}

.gci-dept-title {
  display: flex;
  align-items: center;
  gap: var(--ks-space-3);
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ks-fg);
  text-align: left;
  cursor: pointer;
}

.gci-dept-title strong,
.gci-dept-title small,
.gci-member-chip strong,
.gci-member-chip small,
.gci-role-list-card strong,
.gci-role-list-card small {
  display: block;
}

.gci-dept-title small,
.gci-member-chip small,
.gci-role-list-card small {
  margin-top: var(--ks-space-1);
  color: var(--ks-fg-muted);
  line-height: var(--ks-small-leading);
}

.gci-dept-stats {
  display: flex;
  align-items: center;
  gap: var(--ks-space-4);
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: var(--ks-caption-size);
}

.gci-dept-stats strong {
  color: var(--ks-fg);
  font-size: var(--ks-body-size);
}

.gci-row-actions {
  display: flex;
  align-items: center;
  gap: var(--ks-space-2);
}

.gci-row-actions button,
.gci-add-inline,
.gci-member-chip button {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-md);
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-secondary);
  font: inherit;
  font-size: var(--ks-small-size);
  font-weight: var(--ks-weight-semibold);
  cursor: pointer;
}

.gci-row-actions button:hover:not(:disabled),
.gci-add-inline:hover:not(:disabled),
.gci-member-chip button:hover:not(:disabled) {
  border-color: var(--ks-border-strong);
  background: var(--ks-bg-hover);
  color: var(--ks-fg);
}

.gci-row-actions button:disabled,
.gci-add-inline:disabled,
.gci-member-chip button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.gci-dept-members {
  padding: var(--ks-space-4) var(--ks-space-5);
  border-top: 1px solid var(--ks-border);
  background: var(--ks-bg-soft);
}

.gci-member-chip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ks-space-2);
}

.gci-member-chip {
  display: flex;
  align-items: center;
  gap: var(--ks-space-3);
  min-width: 0;
  padding: var(--ks-space-2) var(--ks-space-3);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-lg);
  background: var(--ks-bg-card);
}

.gci-member-chip > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.gci-member-chip strong,
.gci-member-chip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gci-add-inline {
  margin-top: var(--ks-space-3);
  border-style: dashed;
}

.gci-roles-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: var(--ks-space-5);
  align-items: start;
}

.gci-role-list-panel {
  display: flex;
  flex-direction: column;
  gap: var(--ks-space-4);
  padding: var(--ks-space-3);
}

.gci-role-group {
  display: flex;
  flex-direction: column;
  gap: var(--ks-space-2);
}

.gci-role-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ks-space-2);
  padding: var(--ks-space-1);
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: var(--ks-caption-size);
  font-weight: var(--ks-weight-bold);
  text-transform: uppercase;
}

.gci-role-list-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ks-space-3);
  width: 100%;
  padding: var(--ks-space-3);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-lg);
  background: var(--ks-bg-card);
  color: var(--ks-fg);
  text-align: left;
  cursor: pointer;
}

.gci-role-list-card[data-selected="true"] {
  border-color: color-mix(in srgb, var(--ks-indigo) 50%, transparent);
  background: var(--ks-indigo-bg);
  box-shadow: inset 3px 0 0 var(--ks-indigo);
}

.gci-role-list-card[data-active="false"] {
  opacity: 0.65;
}

.gci-role-list-card em {
  min-width: 28px;
  padding: 3px 7px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-md);
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: var(--ks-caption-size);
  font-style: normal;
  text-align: center;
}

.gci-role-detail header {
  display: flex;
  align-items: flex-start;
  gap: var(--ks-space-4);
  padding: var(--ks-space-5);
  border-bottom: 1px solid var(--ks-border);
}

.gci-role-detail h2 {
  margin: 0;
  color: var(--ks-fg);
  font-family: var(--ks-font-display);
  font-size: var(--ks-h3-size);
  letter-spacing: 0;
}

.gci-role-detail p {
  margin: var(--ks-space-1) 0 0;
  color: var(--ks-fg-muted);
  line-height: var(--ks-small-leading);
}

.gci-role-detail-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--ks-radius-lg);
  background: var(--ks-indigo-bg);
  color: var(--ks-indigo-muted);
  font-size: var(--ks-h3-size);
  font-weight: var(--ks-weight-bold);
}

.gci-role-detail header .gci-row-actions {
  margin-left: auto;
}

.gci-role-banner {
  padding: var(--ks-space-3) var(--ks-space-5);
  border-bottom: 1px solid var(--ks-border);
  background: var(--ks-bg-soft);
  color: var(--ks-fg-muted);
  font-size: var(--ks-small-size);
}

.gci-role-banner[data-kind="custom"] {
  color: var(--ks-indigo-muted);
}

.gci-role-detail section {
  padding: var(--ks-space-5);
  border-bottom: 1px solid var(--ks-border);
}

.gci-role-detail section:last-child {
  border-bottom: 0;
}

@media (max-width: 1000px) {
  .gci-profile-layout,
  .gci-members-layout,
  .gci-roles-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .gci-profile-grid,
  .gci-use-row,
  .gci-member-chip-grid {
    grid-template-columns: 1fr;
  }

  .gci-orghead {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .gci-member-detail header {
    align-items: flex-start;
  }

  .gci-toolbar,
  .gci-dept-head,
  .gci-role-detail header {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .gci-search {
    width: 100%;
    margin-left: 0;
  }

  .gci-search input {
    width: 100%;
  }
}

/* ---- GovernancePolicyPage (folded #6013 1d) ---- */
.gcp-page {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 1160px;
  color: var(--ks-fg);
  font-family: var(--ks-font-body);
}

.gcp-page .gc-hero,
.gcp-page .gc-toolbar,
.gcp-page .gc-library-toolbar,
.gcp-page .gc-empty,
.gcp-page .gc-kpi {
  border: 1px solid var(--ks-border);
  background: var(--ks-bg-card);
  border-radius: 16px;
  box-shadow: var(--ks-shadow-card);
}

.gcp-page .gc-hero {
  padding: 24px 26px;
}

.gcp-page .gc-eyebrow,
.gcp-page .gc-kpi-label,
.gcp-page .gc-muted {
  color: var(--ks-fg-muted);
}

.gcp-page .gc-hero h1,
.gcp-page .gc-kpi-value,
.gcp-page .gc-empty strong {
  color: var(--ks-fg);
  font-family: var(--ks-font-display);
}

.gcp-page .gc-subtitle,
.gcp-page .gc-empty {
  color: var(--ks-fg-muted);
}

.gcp-page .gc-search,
.gcp-page .gc-filter select,
.gcp-page .gc-filter input {
  border: 1px solid var(--ks-border);
  background: var(--ks-bg-elevated);
  color: var(--ks-fg);
  border-radius: 9px;
}

.gcp-page .gc-search input {
  color: var(--ks-fg);
}

.gcp-page .gc-search input::placeholder {
  color: var(--ks-fg-dim);
}

.gcp-page .gc-pagination {
  color: var(--ks-fg-muted);
}

.gcp-page .gc-pagination button,
.gcp-page .gc-library-toolbar button,
.gcp-page .ks-btn {
  border: 1px solid var(--ks-border);
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-secondary);
  border-radius: 9px;
}

.gcp-page .ks-btn--primary {
  border-color: transparent;
  border-radius: 999px;
  background: var(--ks-button-primary);
  color: var(--ks-fg-on-accent);
}

.gcp-list,
.gcp-statements,
.gcp-relstack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gcp-toolbar {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 12px;
  border-radius: 14px;
  box-shadow: var(--ks-shadow-card);
}

.gcp-library-head {
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem);
  align-items: start;
  border-radius: 16px;
  box-shadow: var(--ks-shadow-card);
}

.gcp-head-search {
  align-self: center;
}

.gcp-toolbar .gc-muted {
  margin-left: auto;
  padding-bottom: 10px;
  white-space: nowrap;
}

.gcp-filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 4px 12px;
  border: 1px solid var(--ks-border);
  border-radius: 999px;
  background: var(--ks-bg-card);
  color: var(--ks-fg-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.gcp-filter-chip[data-active="true"] {
  border-color: color-mix(in srgb, var(--ks-indigo) 42%, transparent);
  background: var(--ks-indigo-bg);
  color: var(--ks-fg);
}

.gcp-coverage-hero {
  margin-top: 0;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
}

.gcp-coverage-hero h1 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gcp-coverage-kpis {
  grid-template-columns: repeat(4, minmax(7rem, 1fr));
}

.gcp-coverage-score {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.gcp-coverage-score strong {
  color: var(--ks-fg);
  font-family: var(--ks-font-mono);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
}

.gcp-coverage-score span {
  color: var(--ks-fg-dim);
  font-size: 12px;
}

.gcp-coverage-bar {
  grid-column: 1 / -1;
  height: 16px;
}

.gcp-page .gci-pagination-row,
.gcp-page .gci-department-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gcp-page .gci-detail-box {
  border: 1px solid var(--ks-border);
  border-radius: 14px;
  background: var(--ks-bg-card);
  color: var(--ks-fg);
  box-shadow: var(--ks-shadow-soft);
}

.gcp-page .gci-list-head strong {
  color: var(--ks-fg);
}

.gcp-page .gci-chip {
  border: 1px solid color-mix(in srgb, var(--ks-red) 32%, transparent);
  background: color-mix(in srgb, var(--ks-red) 10%, transparent);
  color: var(--ks-red);
  border-radius: 999px;
  font-family: var(--ks-font-mono);
}

.gcp-page .gci-action-link {
  color: var(--ks-indigo-light);
}

.gcp-policy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 296px);
  gap: 28px;
  align-items: center;
  padding: 16px 22px;
  border: 1px solid var(--ks-border);
  border-radius: 16px;
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-card);
  color: var(--ks-fg);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}

.gcp-policy-row:hover,
.gcp-statement:hover,
.gcp-relcard:hover {
  border-color: var(--ks-border-strong);
  transform: translateY(-1px);
}

.gcp-policy-row[data-status="retired"] {
  opacity: .64;
}

.gcp-row-head,
.gcp-meta,
.gcp-coverage-head,
.gcp-scopes,
.gcp-statement-head,
.gcp-barhead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.gcp-row-head strong,
.gcp-detail-head h1,
.gcp-statement-title h1,
.gcp-relcard strong {
  color: var(--ks-fg);
  letter-spacing: 0;
}

.gcp-row-head strong {
  font-size: 15.5px;
  font-weight: 600;
}

.gcp-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--ks-indigo-bg);
  color: var(--ks-indigo-muted);
  font-weight: 700;
}

.gcp-icon.large {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.gcp-policy-main p {
  max-width: 72ch;
  margin: 12px 0 0;
  color: var(--ks-fg-muted);
  font-size: 13px;
  line-height: 1.5;
}

.gcp-meta {
  margin-top: 12px;
  color: var(--ks-fg-muted);
  font-size: 13px;
}

.gcp-meta span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.gcp-meta span + span::before {
  content: "";
  width: 3px;
  height: 3px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--ks-fg-dim);
}

.gcp-status,
.gcp-cov-pill,
.gcp-scope,
.gcp-sid {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid var(--ks-border);
  border-radius: 999px;
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-secondary);
  font-family: var(--ks-font-mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0;
  text-transform: capitalize;
}

.gcp-cov-pill {
  text-transform: uppercase;
}

.gcp-cov-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.gcp-refchip .gcp-cov-pill {
  min-height: 20px;
  padding: 2px 7px;
  font-size: 9.5px;
}

.gcp-status.active,
.gcp-cov-pill.full {
  border-color: color-mix(in srgb, var(--ks-green) 35%, transparent);
  background: color-mix(in srgb, var(--ks-green) 14%, transparent);
  color: var(--ks-green);
}

.gcp-status.draft,
.gcp-cov-pill.partial,
.gcp-cov-pill.draft {
  border-color: color-mix(in srgb, var(--ks-amber) 35%, transparent);
  background: color-mix(in srgb, var(--ks-amber) 14%, transparent);
  color: var(--ks-amber);
}

.gcp-status.retired,
.gcp-cov-pill.gap {
  border-color: color-mix(in srgb, var(--ks-red) 35%, transparent);
  background: color-mix(in srgb, var(--ks-red) 14%, transparent);
  color: var(--ks-red);
}

.gcp-cov-pill.exception {
  border-color: color-mix(in srgb, var(--ks-purple) 35%, transparent);
  background: var(--ks-indigo-bg);
  color: var(--ks-purple);
}

.gcp-scopes {
  margin-top: 12px;
}

.gcp-scope[data-global="true"] {
  border-color: color-mix(in srgb, var(--ks-indigo) 42%, transparent);
  background: var(--ks-indigo-bg);
  color: var(--ks-indigo-muted);
}

.gcp-coverage-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gcp-coverage-head {
  justify-content: space-between;
}

.gcp-coverage-head span,
.gcp-big {
  color: var(--ks-fg);
  font-family: var(--ks-font-mono);
  font-size: 24px;
  letter-spacing: 0;
}

.gcp-coverage-head span::after,
.gcp-big::after {
  content: "";
}

.gcp-covbar {
  display: flex;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ks-bg-elevated);
  border: 1px solid var(--ks-border);
}

.gcp-covbar span {
  display: block;
  min-width: 0;
}

.gcp-full {
  background: var(--ks-green);
}

.gcp-partial {
  background: var(--ks-amber);
}

.gcp-gap {
  background: var(--ks-red);
}

.gcp-exception {
  background: var(--ks-purple);
}

.gcp-draft {
  background: var(--ks-border-strong);
}

.gcp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: 11px;
}

.gcp-dot::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-radius: 999px;
  background: var(--ks-border-strong);
}

.gcp-dot.full::before {
  background: var(--ks-green);
}

.gcp-dot.partial::before {
  background: var(--ks-amber);
}

.gcp-dot.gap::before {
  background: var(--ks-red);
}

.gcp-dot.exception::before {
  background: var(--ks-purple);
}

.gcp-detail-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 22px;
  border: 1px solid var(--ks-border);
  border-radius: 16px;
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-card);
}

.gcp-detail-head h1,
.gcp-statement-title h1 {
  margin: 8px 0 0;
  font-family: var(--ks-font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
}

.gcp-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  padding: 22px;
  border: 1px solid var(--ks-border);
  border-radius: 16px;
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-card);
}

.gcp-band .gcp-big {
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1;
}

.gcp-rollups {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.gcp-rollup-card {
  padding: 16px;
  border: 1px solid var(--ks-border);
  border-radius: 16px;
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-card);
}

.gcp-rollup-card h2 {
  margin: 0 0 12px;
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.gcp-rollup-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gcp-rollup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
}

.gcp-rollup-row strong {
  display: block;
  color: var(--ks-fg);
  font-size: 13px;
  line-height: 1.35;
}

.gcp-rollup-row span {
  display: block;
  margin-top: 2px;
  color: var(--ks-fg-muted);
  font-size: 11px;
}

.gcp-rollup-row .gcp-covbar {
  grid-column: 1 / -1;
  height: 8px;
}

.gcp-barhead {
  justify-content: space-between;
}

.gcp-barhead h2,
.gcp-section h2,
.gcp-facts h2 {
  margin: 0;
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.gcp-statement {
  display: block;
  padding: 16px;
  border: 1px solid var(--ks-border);
  border-radius: 16px;
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-card);
  color: var(--ks-fg);
  text-decoration: none;
}

.gcp-statement[data-coverage="gap"] {
  border-left: 3px solid var(--ks-red);
}

.gcp-statement[data-coverage="exception"] {
  border-left: 3px solid var(--ks-purple);
}

.gcp-statement-head {
  align-items: flex-start;
}

.gcp-statement-head > span:first-child {
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: 11px;
}

.gcp-statement-head strong {
  flex: 1;
  min-width: 16rem;
  line-height: 1.5;
}

.gcp-maps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ks-border);
}

.gcp-maps > div > span {
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.gcp-refchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.gcp-refchips em {
  color: var(--ks-fg-muted);
  font-style: normal;
}

.gcp-refchip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--ks-border);
  border-radius: 999px;
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-secondary);
  font-size: 13px;
}

.gcp-refchip small {
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
}

.gcp-back {
  align-self: flex-start;
  border: 0;
  background: transparent;
  color: var(--ks-indigo-muted);
  font: inherit;
  cursor: pointer;
}

.gcp-statement-title {
  padding: 22px;
  border: 1px solid var(--ks-border);
  border-radius: 16px;
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-card);
}

.gcp-statement-title h1 {
  max-width: 38rem;
}

.gcp-statement-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
  gap: 28px;
  align-items: start;
}

.gcp-spine {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.gcp-spine strong {
  color: var(--ks-fg);
  font-weight: 600;
}

.gcp-spine i {
  width: 18px;
  height: 1px;
  background: var(--ks-border-strong);
}

.gcp-rule,
.gcp-section,
.gcp-facts {
  border: 1px solid var(--ks-border);
  border-radius: 16px;
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-card);
}

.gcp-rule,
.gcp-section {
  padding: 22px;
}

.gcp-rule > span {
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.gcp-rule p {
  margin: 12px 0 0;
  color: var(--ks-fg);
  font-size: 14.5px;
  line-height: 1.5;
}

.gcp-section {
  margin-top: 22px;
}

.gcp-section h2 {
  margin-bottom: 12px;
}

.gcp-section-head,
.gcp-suggestion-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.gcp-section-head {
  justify-content: space-between;
  margin-bottom: 12px;
}

.gcp-section-head h2 {
  margin-bottom: 0;
}

.gcp-relcard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--ks-border);
  border-radius: 16px;
  background: var(--ks-bg-elevated);
}

.gcp-relcard p {
  margin: 4px 0 0;
  color: var(--ks-fg-muted);
}

.gcp-suggestions .gc-filter {
  margin-bottom: 12px;
}

.gcp-suggestion-card {
  align-items: start;
}

.gcp-suggestion-actions {
  justify-content: flex-end;
}

.gcp-suggestion-error {
  margin: 0 0 12px;
  color: var(--ks-red);
}

.gcp-exception-link {
  display: inline-flex;
  margin-top: 8px;
  color: var(--ks-indigo-light);
  font-family: var(--ks-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: uppercase;
}

.gcp-facts {
  overflow: hidden;
}

.gcp-facts h2 {
  padding: 16px;
  border-bottom: 1px solid var(--ks-border);
}

.gcp-facts div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--ks-border);
}

.gcp-facts div:first-of-type {
  border-top: 0;
}

.gcp-facts span {
  color: var(--ks-fg-dim);
  font-size: 13px;
}

.gcp-facts strong,
.gcp-facts a {
  color: var(--ks-fg);
  text-decoration: none;
}

@media (max-width: 980px) {
  .gcp-policy-row,
  .gcp-library-head,
  .gcp-band,
  .gcp-rollups,
  .gcp-statement-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .gcp-detail-head,
  .gcp-relcard {
    grid-template-columns: 1fr;
  }

  .gcp-maps {
    grid-template-columns: 1fr;
  }

  .gcp-toolbar .gc-muted {
    margin-left: 0;
    padding-bottom: 0;
  }

  .gcp-rollup-row {
    grid-template-columns: 1fr;
  }

  .gcp-suggestion-actions {
    justify-content: flex-start;
  }
}

/* ---- ControlImplementationsPage (folded #6013 1d) ---- */
.ks-screen--control-library {
  max-width: 1200px;
}

.ks-screen--control-library .page-head .search {
  min-width: min(360px, 100%);
}

.ks-screen--control-library .control-table-wrap {
  overflow-x: auto;
  border-radius: 14px;
  box-shadow: var(--ks-shadow-soft);
}

.ks-screen--control-library .control-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--ks-border);
  border-radius: 14px;
  background: var(--ks-bg-card);
}

.ks-screen--control-library .control-table th {
  padding: 13px 16px;
  border-bottom: 1px solid var(--ks-border);
  background: var(--ks-bg-soft);
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.ks-screen--control-library .control-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ks-border);
  color: var(--ks-fg-secondary);
  font-size: 13.5px;
  vertical-align: middle;
}

.ks-screen--control-library .control-table tr:last-child td {
  border-bottom: 0;
}

.ks-screen--control-library .control-table tbody tr {
  transition: background .12s;
}

.ks-screen--control-library .control-table tbody tr:hover {
  background: var(--ks-bg-hover);
}

.ks-screen--control-library .control-name {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 260px;
}

.ks-screen--control-library .control-name strong {
  display: block;
  color: var(--ks-fg);
  font-family: var(--ks-font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
}

.ks-screen--control-library .control-glyph {
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  place-items: center;
  border-radius: 8px;
  background: var(--ks-indigo-bg);
  color: var(--ks-indigo-muted);
  font-size: 13px;
}

.ks-screen--control-library tr.alert .control-glyph {
  background: color-mix(in srgb, var(--ks-red) 14%, transparent);
  color: var(--ks-red);
}

.ks-screen--control-library .guardian {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  color: var(--ks-fg-dim);
  font-size: 11.5px;
  font-weight: 400;
}

.ks-screen--control-library .type-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.ks-screen--control-library .type-pill.preventive {
  background: var(--ks-indigo-bg);
  color: var(--ks-indigo-muted);
}

.ks-screen--control-library .type-pill.detective {
  background: var(--ks-purple-bg);
  color: var(--ks-purple-light);
}

.ks-screen--control-library .type-pill.corrective {
  background: color-mix(in srgb, var(--ks-amber) 13%, transparent);
  color: var(--ks-amber);
}

.ks-screen--control-library .type-pill.directive {
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-muted);
}

.ks-screen--control-library .implementation-mode {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ks-fg-secondary);
  font-size: 12px;
  white-space: nowrap;
}

.ks-screen--control-library .implementation-mode::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ks-indigo-muted);
  box-shadow: 0 0 0 3px var(--ks-indigo-bg);
}

.ks-screen--control-library .adoption {
  display: grid;
  grid-template-columns: minmax(80px, 150px) auto;
  align-items: center;
  gap: 9px;
  max-width: 190px;
}

.ks-screen--control-library .track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ks-bg-elevated);
}

.ks-screen--control-library .track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ks-green);
}

.ks-screen--control-library .adoption.warn .track span {
  background: var(--ks-amber);
}

.ks-screen--control-library .adoption.bad .track span {
  background: var(--ks-red);
}

.ks-screen--control-library .num {
  color: var(--ks-fg-muted);
  font-family: var(--ks-font-mono);
  font-size: 11px;
}

.ks-screen--control-library .enforcement-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 300px;
}

.ks-screen--control-library .enforcement {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 700;
}

.ks-screen--control-library .enforcement::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.ks-screen--control-library .enforcement.live {
  background: color-mix(in srgb, var(--ks-green) 12%, transparent);
  color: var(--ks-green);
}

.ks-screen--control-library .enforcement.live::before {
  background: var(--ks-green);
}

.ks-screen--control-library .enforcement.down {
  background: color-mix(in srgb, var(--ks-red) 12%, transparent);
  color: var(--ks-red);
}

.ks-screen--control-library .enforcement.down::before {
  background: var(--ks-red);
}

.ks-screen--control-library .row-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .ks-screen--control-library {
    padding: 22px 18px 44px;
  }

  .ks-screen--control-library .page-head .search {
    min-width: 100%;
  }
}


/* ---- AuditPage (folded #6013 1d) ---- */
.ks-audit {
  /* Local palette killed in #6013 1d — aliased to the unified --ks-* tokens, which
     flip light/dark themselves, so the per-screen dark override block is gone. */
  --bg: var(--ks-bg);
  --card: var(--ks-bg-card);
  --elev: var(--ks-bg-elevated);
  --ink: var(--ks-fg);
  --ink2: var(--ks-fg-secondary);
  --ink3: var(--ks-fg-muted);
  --line: var(--ks-border);
  --line2: var(--ks-border-strong);
  --brand: var(--ks-indigo);
  --brandL: var(--ks-indigo-light);
  --accent: var(--ks-accent);
  --red: var(--ks-red);
  --green: var(--ks-green);
  --amber: var(--ks-amber);
  --sidebar: var(--ks-bg-card);
  --header: color-mix(in srgb, var(--ks-bg-card) 85%, transparent);
  --shellLine: var(--ks-border);
  --shadow: var(--ks-shadow-card);
  --brandGrad: var(--ks-cta-gradient);
  display: block;
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  min-height: calc(100vh - 64px);
  background: var(--bg);
  color: var(--ink);
  font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background 0.35s ease, color 0.35s ease;
}

/* Dark override removed in #6013 1d — the palette above aliases to --ks-*, which
   already provides theme-aware values, so this per-screen block is redundant. */

.ks-audit * {
  box-sizing: border-box;
}

.ks-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.ks-svg-icon {
  display: block;
  flex-shrink: 0;
}

.ks-audit__main {
  min-width: 0;
  display: block;
  background: var(--bg);
}

.ks-icon-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}

.ks-icon-button {
  width: 34px;
  height: 34px;
  justify-content: center;
  padding: 0;
}

.ks-audit__hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 0 18px;
}

.ks-audit__hero--portal {
  align-items: flex-start;
  padding: 28px 0 16px;
}

.ks-audit__hero h1,
.ks-panel__head h2,
.ks-artifact-detail h2 {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0;
}

.ks-audit__hero h1 {
  font-size: 28px;
  line-height: 1.1;
}

.ks-audit__hero p,
.ks-panel__head p,
.ks-card p,
.ks-artifact-detail p {
  margin: 7px 0 0;
  color: var(--ink3);
  font-size: 13px;
  line-height: 1.55;
}

.ks-audit__eyebrow {
  margin: 0 0 8px !important;
  color: var(--brandL) !important;
  font-family: var(--ks-font-mono);
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ks-audit__actions,
.ks-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ks-toolbar--systems {
  align-items: center;
}

.ks-toolbar__label {
  color: var(--ink3);
  font-family: var(--ks-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ks-toolbar__spacer {
  flex: 1 1 24px;
}

/* Searchable agent picker (replaces the wrapping pill grid so it scales) */
.ks-syspicker {
  position: relative;
  min-width: 260px;
}

.ks-syspicker__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.ks-syspicker__button:hover:not(:disabled) {
  border-color: var(--accent);
}

.ks-syspicker__button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ks-syspicker__button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ks-syspicker__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ks-syspicker__pop {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  width: min(360px, 92vw);
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.ks-syspicker__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink3);
}

.ks-syspicker__input {
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
}

.ks-syspicker__input::placeholder {
  color: var(--ink3);
}

.ks-syspicker__list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 280px;
  overflow-y: auto;
}

.ks-syspicker__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink2);
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}

.ks-syspicker__opt-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ks-syspicker__opt.is-active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--ink);
}

.ks-syspicker__opt.is-selected {
  color: var(--accent);
  font-weight: 600;
}

.ks-syspicker__opt.is-selected.is-active {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.ks-syspicker__empty {
  padding: 14px 12px;
  color: var(--ink3);
  font-size: 13px;
}

.ks-stack {
  display: grid;
  gap: 16px;
  padding: 0 0 42px;
}

.ks-panel,
.ks-card,
.ks-metric,
.ks-empty,
.ks-field,
.ks-modal__panel {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.ks-panel {
  overflow: hidden;
}

.ks-panel__head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.ks-panel__head h2 {
  font-size: 15px;
}

.ks-panel > .ks-toolbar {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}

.ks-select {
  min-height: 36px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid var(--line2);
  background: var(--bg);
  color: var(--ink2);
  box-shadow: none;
}

.ks-select {
  padding: 0 32px 0 12px;
  color: var(--ink2);
}

.ks-flash {
  margin: 0 32px 14px;
  border: 1px solid color-mix(in srgb, var(--green) 26%, transparent);
  border-radius: 11px;
  padding: 12px 18px;
  color: var(--green);
  background: var(--card);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow);
}

.ks-flash--error {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 30%, transparent);
}

.ks-metrics,
.ks-card-grid,
.ks-artifact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 13px;
}

.ks-metrics--in-panel {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.ks-card-grid--packages {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  padding: 0;
  gap: 14px;
}

.ks-metric {
  border-radius: 13px;
  padding: 16px 18px;
}

.ks-metric span {
  display: block;
  color: var(--ink3);
  font-family: var(--ks-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ks-metric strong {
  display: block;
  margin-top: 9px;
  color: var(--ink);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

.ks-metric strong em {
  margin-left: 7px;
  color: var(--ink3);
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.01em;
}

.ks-metric--green strong { color: var(--green); }
.ks-metric--amber strong { color: var(--amber); }
.ks-metric--red strong { color: var(--red); }

.ks-table {
  overflow-x: auto;
}

.ks-table__head,
.ks-table__row {
  display: grid;
  gap: 12px;
  align-items: center;
  min-width: 880px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
}

.ks-table__head {
  color: var(--ink3);
  font-family: var(--ks-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ks-table__row {
  width: 100%;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-size: 13px;
}

.ks-table--trace .ks-table__head,
.ks-table--trace .ks-table__row {
  grid-template-columns: 108px 1.5fr 1.1fr 94px 118px 132px 108px;
}

.ks-table--portal .ks-table__head,
.ks-table--portal .ks-table__row {
  grid-template-columns: 1.25fr 1.15fr 1fr 0.7fr 0.9fr 0.8fr 0.9fr;
}

.ks-table--auditor-packets .ks-table__head,
.ks-table--auditor-packets .ks-table__row {
  grid-template-columns: minmax(260px, 1.35fr) minmax(190px, 1fr) minmax(160px, 0.8fr) minmax(120px, 0.58fr) minmax(160px, 0.8fr) minmax(120px, 0.58fr);
}

.ks-table--score .ks-table__head,
.ks-table--score .ks-table__row {
  grid-template-columns: 120px 1.5fr 1fr 110px;
}

.ks-evidence {
  display: grid;
  grid-template-columns: minmax(240px, 310px) minmax(0, 1fr);
  min-height: 480px;
}

.ks-step-list {
  border-right: 1px solid var(--line);
  background: var(--bg);
}

.ks-step-list__head {
  display: grid;
  gap: 7px;
  padding: 17px 16px 16px;
  border-bottom: 1px solid var(--line);
}

.ks-step-list__head strong {
  color: var(--ink);
  font-size: 14px;
}

.ks-step-list__head span {
  color: var(--ink3);
  font-size: 12px;
}

.ks-step {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: auto;
  padding: 11px 16px;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  border-radius: 0;
  text-align: left;
  font-size: 13px;
  line-height: 1.25;
  white-space: normal;
}

.ks-step b {
  flex: 1;
  min-width: 0;
  font: inherit;
}

.ks-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ink3);
}

.ks-status-dot--green { background: var(--green); }
.ks-status-dot--amber { background: var(--amber); }
.ks-status-dot--red { background: var(--red); }
.ks-status-dot--neutral { background: var(--ink3); }

.ks-step.is-active {
  border-left-color: var(--brand);
}

.ks-step > span:first-child {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--elev);
  color: var(--ink3);
  font-family: var(--ks-font-mono);
  font-size: 10.5px;
  font-weight: 600;
}

.ks-step.is-active > span:first-child {
  color: #ffffff;
  background: var(--brand);
}

.ks-artifact-detail,
.ks-artifact-grid {
  padding: 18px 20px;
}

.ks-artifact-detail {
  display: flex;
  min-height: 480px;
  flex-direction: column;
}

.ks-artifact-detail__title {
  flex: 1;
  min-width: 0;
}

.ks-artifact-detail__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}

.ks-artifact-detail__icon--green {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, transparent);
}

.ks-artifact-detail__icon--amber {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
}

.ks-artifact-detail__icon--red {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent);
}

.ks-artifact-detail__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: auto -20px -18px;
  padding: 15px 20px;
  border-top: 1px solid var(--line);
}

.ks-artifact-detail__foot .ks-inline-note {
  margin: 0;
}

.ks-card {
  padding: 16px 18px;
}

.ks-package-card {
  display: flex;
  flex-direction: column;
}

.ks-package-card .ks-card__actions {
  margin-top: auto;
  padding-top: 14px;
}

.ks-framework-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0;
}

.ks-framework-row span {
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  border-radius: 8px;
  padding: 4px 10px;
  color: var(--ink2);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  font-size: 12px;
  font-weight: 700;
}

.ks-readiness {
  display: grid;
  gap: 8px;
  margin: 10px 0 16px;
}

.ks-readiness > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ks-readiness span {
  color: var(--ink3);
  font-family: var(--ks-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ks-tone-green { color: var(--green); }
.ks-tone-amber { color: var(--amber); }
.ks-tone-red { color: var(--red); }

.ks-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.ks-card--button {
  display: block;
  width: 100%;
  min-height: auto;
  cursor: pointer;
  text-align: left;
  white-space: normal;
}

.ks-card__top,
.ks-list-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ks-approval-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ks-approval-head span {
  color: var(--ink2);
  font-size: 12.5px;
  line-height: 1.4;
}

.ks-list-row span small {
  display: block;
  margin-top: 4px;
  color: var(--ink3);
  font-size: 12px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.ks-fields {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.ks-field {
  padding: 11px 13px;
  border-radius: 10px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ks-field span,
.ks-field small,
.ks-dl dt {
  color: var(--ink3);
  font-family: var(--ks-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ks-field p {
  margin: 0;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ks-field textarea {
  width: 100%;
  min-height: 38px;
  max-height: 220px;
  resize: vertical;
  padding: 8px 10px;
  border: 1px solid var(--line2);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ks-font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow: auto;
}

.ks-field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.ks-inline-note,
.ks-modal__body {
  margin: 12px 0 0;
  color: var(--ink3);
  font-size: 13px;
  line-height: 1.55;
}

.ks-declare-todo {
  margin: 14px 0;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--amber) 34%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--amber) 10%, transparent);
}

.ks-declare-todo strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.ks-declare-todo p {
  margin: 7px 0 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.55;
}

.ks-declare-todo a {
  color: var(--accent);
  font-weight: 600;
}

.ks-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--ink3) 32%, transparent);
  padding: 3px 10px;
  color: var(--ink3);
  background: color-mix(in srgb, var(--ink3) 13%, transparent);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.ks-pill--green {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 32%, transparent);
  background: color-mix(in srgb, var(--green) 13%, transparent);
}

.ks-pill--amber {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 32%, transparent);
  background: color-mix(in srgb, var(--amber) 13%, transparent);
}

.ks-pill--red {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 32%, transparent);
  background: color-mix(in srgb, var(--red) 13%, transparent);
}

.ks-mono {
  font-family: var(--ks-font-mono);
  color: var(--ink3);
  font-size: 11.5px;
}

.ks-empty {
  margin: 16px 20px;
  padding: 14px 15px;
  display: grid;
  gap: 4px;
  border-radius: 12px;
  box-shadow: none;
}

.ks-empty strong {
  color: var(--ink);
}

.ks-empty span {
  color: var(--ink3);
  font-size: 13px;
}

.ks-empty--error {
  border-color: color-mix(in srgb, var(--red) 35%, transparent);
}

.ks-dl {
  display: grid;
  gap: 10px;
}

.ks-dl--package {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 -18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.ks-dl--package div {
  padding: 13px 18px;
}

.ks-dl--package div + div {
  border-left: 1px solid var(--line);
}

.ks-dl div {
  display: grid;
  gap: 4px;
}

.ks-dl dd {
  margin: 0;
}

.ks-progress {
  height: 7px;
  margin-top: 12px;
  border-radius: 100px;
  background: var(--elev);
  overflow: hidden;
}

.ks-progress span {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--brandGrad);
}

.ks-progress--green span { background: var(--green); }
.ks-progress--amber span { background: var(--amber); }
.ks-progress--red span { background: var(--red); }

.ks-progress-list {
  display: grid;
  gap: 0;
}

.ks-progress-list .ks-card {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

.ks-progress-list .ks-card:last-child {
  border-bottom: 0;
}

.ks-readiness-list {
  display: grid;
  gap: 0;
}

.ks-readiness-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}

.ks-readiness-row:last-child {
  border-bottom: 0;
}

.ks-readiness-row strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.ks-readiness-row span {
  display: block;
  margin-top: 4px;
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.45;
}

.ks-readiness-row__status {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.ks-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ks-list-row {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.ks-list-row span:first-child,
.ks-table__row strong {
  display: block;
}

.ks-table__row small {
  display: block;
  margin-top: 4px;
  color: var(--ink3);
  font-size: 12px;
}

.ks-list-row--button {
  width: 100%;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.ks-row-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.ks-link-button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
}

.ks-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: flex-end;
  background: rgba(5, 10, 24, 0.55);
  backdrop-filter: blur(3px);
}

.ks-drawer__panel {
  width: min(480px, 100%);
  height: 100%;
  padding: 22px;
  border-left: 1px solid var(--line2);
  background: var(--card);
  box-shadow: var(--shadow);
  animation: ksDraw 0.22s ease;
  overflow-y: auto;
}

.ks-drawer__panel--wide {
  width: min(500px, 100%);
}

.ks-modal,
.ks-auditor-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(5, 10, 24, 0.55);
  backdrop-filter: blur(4px);
}

.ks-modal {
  display: grid;
  place-items: center;
  padding: 16px;
  overflow: hidden;
}

.ks-modal__panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: calc(100vh - 32px);
  padding: 18px;
  border-radius: 14px;
  overflow: hidden;
}

.ks-modal__head,
.ks-modal__actions,
.ks-download-row,
.ks-check-row,
.ks-auditor-overlay__head,
.ks-modal__steps {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ks-modal__head {
  justify-content: space-between;
  margin-bottom: 14px;
}

.ks-modal__body {
  display: grid;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.ks-modal__head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
}

.ks-modal__actions {
  position: sticky;
  bottom: 0;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 14px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--card) 78%, transparent), var(--card) 34%);
}

.ks-modal__segmented {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.ks-modal__steps span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--elev);
  color: var(--ink3);
  font-family: var(--ks-font-mono);
  font-size: 11px;
  font-weight: 700;
}

.ks-modal__steps span.is-active {
  background: var(--brand);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

[data-theme="light"] .ks-modal__steps span.is-active,
.ks-modal .ks-modal__steps span.is-active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

.ks-invite-packet-list {
  display: grid;
  gap: 10px;
  max-height: min(42vh, 420px);
  overflow-y: auto;
  padding-right: 4px;
}

.ks-form-field {
  display: grid;
  gap: 7px;
}

.ks-form-field span {
  color: var(--ink3);
  font-family: var(--ks-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ks-form-field input,
.ks-form-field textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line2);
  border-radius: 9px;
  padding: 9px 11px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
}

.ks-form-field textarea {
  min-height: 110px;
  resize: vertical;
}

.ks-check-row {
  justify-content: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 44px;
}

.ks-download-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.ks-download-row > div {
  min-width: 0;
}

.ks-download-row strong {
  display: block;
  overflow-wrap: anywhere;
}

.ks-download-row p {
  margin: 4px 0 0;
  color: var(--ink3);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.ks-download-row__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
}

.ks-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 9px;
  transform: translateX(-50%);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 11px 14px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: 13px;
  font-weight: 700;
}

.ks-toast--success { color: var(--green); }
.ks-toast--error { color: var(--red); }

.ks-auditor-overlay {
  overflow: auto;
  background: var(--bg);
  color: var(--ink);
}

.ks-auditor-overlay .ks-stack {
  width: min(1440px, calc(100% - 56px));
  margin: 0 auto;
  padding: 0 0 28px;
}

.ks-auditor-overlay__head {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 64px;
  padding: 0 max(28px, calc((100vw - 1440px) / 2 + 28px));
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 94%, var(--brand) 6%);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.ks-auditor-overlay__brand {
  display: grid;
  gap: 2px;
  margin-right: auto;
  min-width: 0;
}

.ks-auditor-overlay__brand strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.15;
}

.ks-auditor-overlay__brand span {
  color: var(--ink3);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.ks-auditor-actions {
  justify-content: flex-end;
}

.ks-stale-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 -18px 14px;
  padding: 11px 18px;
  border-top: 1px solid color-mix(in srgb, var(--amber) 26%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--amber) 26%, transparent);
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 9%, transparent);
  font-size: 13px;
  font-weight: 600;
}

.ks-sla-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.ks-sla-strip div {
  padding: 14px 16px;
  border-right: 1px solid var(--line);
}

.ks-sla-strip div:last-child {
  border-right: 0;
}

.ks-sla-strip strong {
  display: block;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.ks-sla-strip span {
  display: block;
  margin-top: 5px;
  color: var(--ink3);
  font-family: var(--ks-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ks-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.ks-timeline span {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.ks-timeline span.is-active {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 36%, transparent);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}

@keyframes ksDraw {
  from {
    transform: translateX(30px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@media (max-width: 900px) {
  .ks-audit {
    display: block;
  }

  .ks-audit__hero,
  .ks-evidence,
  .ks-two,
  .ks-sla-strip {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ks-audit__hero,
  .ks-stack {
    padding-left: 18px;
    padding-right: 18px;
  }

  .ks-auditor-overlay .ks-stack {
    width: 100%;
    padding-left: 18px;
    padding-right: 18px;
  }

  .ks-auditor-overlay__head {
    flex-wrap: wrap;
    min-height: auto;
    padding: 12px 18px;
  }

  .ks-auditor-overlay__brand {
    flex-basis: 100%;
  }

  .ks-step-list {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .ks-artifact-detail__foot {
    align-items: stretch;
    flex-direction: column;
  }

  .ks-card-grid--packages {
    grid-template-columns: 1fr;
  }
}

/* ---- ExceptionPages (folded #6013 1d) ---- */
/* Exceptions screens (#5931/#5932/#5933, EPIC #5915) on the unified --ks-* token standard
   (public/css/ks-tokens.css). Scoped under .ks-exceptions so it never leaks to other screens.
   Adapted from Exceptions register/detail/Propose exception .dc.html + the shared response.css
   component classes (chip/pair/estat/risk/reason/tbadge/btn). Both light and dark come from the
   token values; no gc-* or ds-* classes. */

.ks-exceptions {
  font-family: var(--ks-font-body);
  color: var(--ks-fg);
}

.ks-exceptions .page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.ks-exceptions .page-head h1 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ks-fg);
}
.ks-exceptions .page-head .sub {
  margin-top: 6px;
  font-size: 14px;
  color: var(--ks-fg-muted);
  max-width: 70ch;
  line-height: 1.5;
}

/* Summary strip (doubles as quick filters) */
.ks-exceptions .sumstrip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 22px 0 4px;
}
@media (max-width: 860px) {
  .ks-exceptions .sumstrip {
    grid-template-columns: repeat(2, 1fr);
  }
}
.ks-exceptions .sumcard {
  background: var(--ks-bg-card);
  border: 1px solid var(--ks-border);
  border-radius: 13px;
  padding: 14px 16px;
  box-shadow: var(--ks-shadow-soft);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, transform 0.15s;
}
.ks-exceptions .sumcard:hover {
  border-color: var(--ks-border-strong);
  transform: translateY(-1px);
}
.ks-exceptions .sumcard.on {
  border-color: var(--ks-border-emphasis);
  background: var(--ks-indigo-bg);
}
.ks-exceptions .sumcard .v {
  font-family: var(--ks-font-mono);
  font-size: 24px;
  font-weight: 500;
  color: var(--ks-fg);
  letter-spacing: -0.01em;
}
.ks-exceptions .sumcard .k {
  font-size: 11.5px;
  color: var(--ks-fg-muted);
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ks-exceptions .sumcard .k svg {
  width: 13px;
  height: 13px;
}
.ks-exceptions .sumcard.alert .v,
.ks-exceptions .sumcard.alert .k {
  color: var(--ks-red);
}
.ks-exceptions .sumcard.rev .v,
.ks-exceptions .sumcard.rev .k {
  color: var(--ks-indigo-light);
}

/* Chip filters */
.ks-exceptions .filters {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 16px;
  flex-wrap: wrap;
}
.ks-exceptions .filters .grp {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.ks-exceptions .filters .gl {
  font-size: 11px;
  color: var(--ks-fg-dim);
  font-family: var(--ks-font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 2px;
}
.ks-exceptions .filters .spacer {
  flex: 1;
}
.ks-exceptions .chip {
  font-size: 12.5px;
  color: var(--ks-fg-muted);
  border: 1px solid var(--ks-border);
  background: var(--ks-bg-card);
  border-radius: 999px;
  padding: 6px 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.ks-exceptions .chip:hover {
  color: var(--ks-fg-secondary);
  border-color: var(--ks-border-strong);
}
.ks-exceptions .chip.on {
  color: var(--ks-fg);
  border-color: var(--ks-border-emphasis);
  background: var(--ks-indigo-bg);
}

/* Section headers */
.ks-exceptions .sech {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 24px 0 12px;
}
.ks-exceptions .sech .t {
  font-family: var(--ks-font-mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ks-fg-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ks-exceptions .sech .t svg {
  width: 14px;
  height: 14px;
}
.ks-exceptions .sech .line {
  flex: 1;
  height: 1px;
  background: var(--ks-border);
}
.ks-exceptions .sech .cnt {
  font-family: var(--ks-font-mono);
  font-size: 11px;
  color: var(--ks-fg-dim);
}

/* Exception cards */
.ks-exceptions .exlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ks-exceptions .ex {
  background: var(--ks-bg-card);
  border: 1px solid var(--ks-border);
  border-radius: 14px;
  padding: 15px 18px;
  box-shadow: var(--ks-shadow-soft);
  display: grid;
  grid-template-columns: 1fr 234px;
  gap: 22px;
  align-items: center;
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.ks-exceptions .ex:hover {
  border-color: var(--ks-border-strong);
  transform: translateY(-1px);
}
.ks-exceptions .ex.row-expiring {
  border-color: color-mix(in srgb, var(--ks-red) 40%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--ks-red) 5%, var(--ks-bg-card)), var(--ks-bg-card) 55%);
}
.ks-exceptions .ex.row-review {
  border-color: color-mix(in srgb, var(--ks-indigo-light) 34%, transparent);
}
.ks-exceptions .ex.row-dim {
  opacity: 0.58;
}
@media (max-width: 720px) {
  .ks-exceptions .ex {
    grid-template-columns: 1fr;
  }
  .ks-exceptions .ex .erail {
    border-left: 0;
    border-top: 1px solid var(--ks-border);
    padding-left: 0;
    padding-top: 12px;
  }
}
.ks-exceptions .ex .meta {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 11px;
}
.ks-exceptions .exid {
  font-family: var(--ks-font-mono);
  font-size: 11px;
  color: var(--ks-fg-dim);
}
.ks-exceptions .ex .title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ks-fg);
  font-family: var(--ks-font-display);
  letter-spacing: -0.01em;
  margin-bottom: 11px;
}
.ks-exceptions .ex .foot {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ks-fg-muted);
}
.ks-exceptions .ex .foot .m {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ks-exceptions .ex .foot .m svg {
  width: 13px;
  height: 13px;
  color: var(--ks-fg-dim);
}
.ks-exceptions .ex .foot .m .nm {
  color: var(--ks-fg-secondary);
}
.ks-exceptions .ex .foot .sep {
  width: 1px;
  height: 12px;
  background: var(--ks-border-strong);
}

/* Relationship pair */
.ks-exceptions .pair {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--ks-border);
  border-radius: 11px;
  overflow: hidden;
  background: var(--ks-bg-soft);
}
.ks-exceptions .pair .node {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  min-width: 0;
}
.ks-exceptions .pair .node .ni {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex: none;
}
.ks-exceptions .pair .node .ni svg {
  width: 14px;
  height: 14px;
}
.ks-exceptions .pair .node .ni.ctrl {
  background: color-mix(in srgb, var(--ks-green) 13%, transparent);
  color: var(--ks-green);
}
.ks-exceptions .pair .node .ni.req {
  background: var(--ks-indigo-bg);
  color: var(--ks-indigo-muted);
}
.ks-exceptions .pair .node .ni.stmt {
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-muted);
}
.ks-exceptions .pair .node .ni.agent {
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-secondary);
}
.ks-exceptions .pair .node .nt {
  min-width: 0;
}
.ks-exceptions .pair .node .nk {
  font-family: var(--ks-font-mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ks-fg-dim);
}
.ks-exceptions .pair .node .nn {
  font-size: 13px;
  font-weight: 600;
  color: var(--ks-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 30ch;
}
.ks-exceptions .pair .conn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  background: var(--ks-bg-elevated);
  border-left: 1px solid var(--ks-border);
  border-right: 1px solid var(--ks-border);
}
.ks-exceptions .pair .conn .rel {
  font-family: var(--ks-font-mono);
  font-size: 8.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ks-purple-light);
  white-space: nowrap;
}
.ks-exceptions .pair .conn svg {
  width: 14px;
  height: 14px;
  color: var(--ks-purple-light);
}
@media (max-width: 640px) {
  .ks-exceptions .pair .node .nn {
    max-width: 18ch;
  }
}

/* Reason / risk / status chips */
.ks-exceptions .reason {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ks-bg-elevated);
  border: 1px solid var(--ks-border);
  color: var(--ks-fg-secondary);
  white-space: nowrap;
}
.ks-exceptions .reason svg {
  width: 12px;
  height: 12px;
  color: var(--ks-fg-dim);
}
.ks-exceptions .risk {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.ks-exceptions .risk::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.ks-exceptions .risk.low {
  color: var(--ks-fg-muted);
  background: var(--ks-bg-elevated);
}
.ks-exceptions .risk.medium,
.ks-exceptions .risk.med {
  color: var(--ks-amber);
  background: color-mix(in srgb, var(--ks-amber) 13%, transparent);
}
.ks-exceptions .risk.high,
.ks-exceptions .risk.critical {
  color: var(--ks-red);
  background: color-mix(in srgb, var(--ks-red) 13%, transparent);
}
.ks-exceptions .estat {
  font-size: 10px;
  font-family: var(--ks-font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.ks-exceptions .estat svg {
  width: 11px;
  height: 11px;
}
.ks-exceptions .estat.proposed {
  color: var(--ks-indigo-light);
  background: var(--ks-indigo-bg);
}
.ks-exceptions .estat.active {
  color: var(--ks-green);
  background: color-mix(in srgb, var(--ks-green) 13%, transparent);
}
.ks-exceptions .estat.expired {
  color: var(--ks-fg-dim);
  background: var(--ks-bg-elevated);
}
.ks-exceptions .estat.revoked,
.ks-exceptions .estat.rejected {
  color: var(--ks-red);
  background: color-mix(in srgb, var(--ks-red) 13%, transparent);
}

/* Right rail */
.ks-exceptions .erail {
  border-left: 1px solid var(--ks-border);
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ks-exceptions .erail .tline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.ks-exceptions .erail .tk {
  font-size: 10px;
  font-family: var(--ks-font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ks-fg-dim);
}
.ks-exceptions .erail .tv {
  font-family: var(--ks-font-mono);
  font-size: 13px;
  color: var(--ks-fg-secondary);
}
.ks-exceptions .erail .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.ks-exceptions .tbadge {
  font-size: 10px;
  font-family: var(--ks-font-mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.ks-exceptions .tbadge svg {
  width: 11px;
  height: 11px;
}
.ks-exceptions .tbadge.expiring {
  color: var(--ks-red);
  background: color-mix(in srgb, var(--ks-red) 12%, transparent);
  border-color: color-mix(in srgb, var(--ks-red) 30%, transparent);
}
.ks-exceptions .tbadge.review {
  color: var(--ks-indigo-light);
  background: var(--ks-indigo-bg);
  border-color: color-mix(in srgb, var(--ks-indigo-light) 26%, transparent);
}
.ks-exceptions .tbadge.ok {
  color: var(--ks-fg-muted);
  background: var(--ks-bg-elevated);
}

/* Search + rows select */
.ks-exceptions .toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 8px;
}
.ks-exceptions .search {
  flex: 1;
  min-width: 220px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ks-border);
  background: var(--ks-bg-card);
  border-radius: 10px;
  padding: 9px 12px;
}
.ks-exceptions .search svg {
  width: 15px;
  height: 15px;
  color: var(--ks-fg-dim);
}
.ks-exceptions .search input {
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ks-fg);
  font: inherit;
  font-size: 13px;
  width: 100%;
}
.ks-exceptions .rowsel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--ks-fg-dim);
}
.ks-exceptions .rowsel select {
  font: inherit;
  font-size: 12.5px;
  color: var(--ks-fg);
  background: var(--ks-bg-card);
  border: 1px solid var(--ks-border);
  border-radius: 8px;
  padding: 6px 8px;
}

/* Pagination + states */
.ks-exceptions .pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--ks-fg-muted);
}
.ks-exceptions .pagination button {
  font: inherit;
  font-size: 13px;
  color: var(--ks-fg);
  background: var(--ks-bg-card);
  border: 1px solid var(--ks-border-strong);
  border-radius: 9px;
  padding: 7px 13px;
  cursor: pointer;
}
.ks-exceptions .pagination button:disabled {
  opacity: 0.5;
  cursor: default;
}
.ks-exceptions .empty {
  text-align: center;
  padding: 44px 20px;
  color: var(--ks-fg-dim);
  font-size: 14px;
  border: 1px dashed var(--ks-border-strong);
  border-radius: 14px;
  margin-top: 14px;
}
.ks-exceptions .empty strong {
  display: block;
  color: var(--ks-fg-secondary);
  font-size: 15px;
  margin-bottom: 4px;
}

/* ===== Exception detail (#5932) ===== */
.ks-exceptions .phead .meta-row {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  margin-bottom: 13px;
}
.ks-exceptions .phead h1 {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  max-width: 40ch;
  color: var(--ks-fg);
}
.ks-exceptions .layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 28px;
  margin-top: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .ks-exceptions .layout {
    grid-template-columns: 1fr;
  }
  .ks-exceptions .rail {
    position: static;
  }
}
.ks-exceptions .section + .section {
  margin-top: 28px;
}
.ks-exceptions .section h2 {
  font-size: 13px;
  font-family: var(--ks-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ks-fg-dim);
  font-weight: 500;
  margin-bottom: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ks-exceptions .section h2 svg {
  width: 14px;
  height: 14px;
}

/* Big relationship pair */
.ks-exceptions .pairbig {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  border: 1px solid var(--ks-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--ks-shadow-card);
  background: var(--ks-bg-card);
}
.ks-exceptions .pairbig .pn {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 20px;
  text-decoration: none;
  transition: background 0.12s;
}
.ks-exceptions .pairbig .pn:hover {
  background: var(--ks-bg-hover);
}
.ks-exceptions .pairbig .pni {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex: none;
}
.ks-exceptions .pairbig .pni svg {
  width: 20px;
  height: 20px;
}
.ks-exceptions .pairbig .pni.ctrl {
  background: color-mix(in srgb, var(--ks-green) 13%, transparent);
  color: var(--ks-green);
}
.ks-exceptions .pairbig .pni.agent {
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-secondary);
}
.ks-exceptions .pairbig .pni.stmt {
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-muted);
}
.ks-exceptions .pairbig .pni.req {
  background: var(--ks-indigo-bg);
  color: var(--ks-indigo-muted);
}
.ks-exceptions .pairbig .pnk {
  font-family: var(--ks-font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ks-fg-dim);
  display: block;
}
.ks-exceptions .pairbig .pnn {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ks-fg);
  font-family: var(--ks-font-display);
  letter-spacing: -0.01em;
  margin-top: 3px;
  display: block;
}
.ks-exceptions .pairbig .pnsub {
  font-size: 11.5px;
  color: var(--ks-fg-muted);
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ks-exceptions .pairbig .pconn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 18px;
  background: var(--ks-bg-elevated);
  border-left: 1px solid var(--ks-border);
  border-right: 1px solid var(--ks-border);
}
.ks-exceptions .pairbig .pconn .rl {
  font-family: var(--ks-font-mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ks-purple-light);
  white-space: nowrap;
}
.ks-exceptions .pairbig .pconn .ring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ks-purple-bg);
  border: 1px solid color-mix(in srgb, var(--ks-purple-light) 34%, transparent);
  display: grid;
  place-items: center;
}
.ks-exceptions .pairbig .pconn .ring svg {
  width: 16px;
  height: 16px;
  color: var(--ks-purple-light);
}
@media (max-width: 640px) {
  .ks-exceptions .pairbig {
    grid-template-columns: 1fr;
  }
  .ks-exceptions .pairbig .pconn {
    flex-direction: row;
    padding: 10px;
  }
}

/* Plain-language gap card */
.ks-exceptions .gapcard {
  background: var(--ks-bg-card);
  border: 1px solid var(--ks-border);
  border-radius: 16px;
  box-shadow: var(--ks-shadow-card);
  padding: 6px 22px 18px;
}
.ks-exceptions .gaprow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
}
.ks-exceptions .gaprow + .gaprow {
  border-top: 1px solid var(--ks-border);
}
.ks-exceptions .gaprow .lab {
  font-family: var(--ks-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ks-fg-dim);
  width: 132px;
  flex: none;
}
.ks-exceptions .gaprow .txt {
  font-size: 13.5px;
  color: var(--ks-fg-secondary);
  line-height: 1.5;
  flex: 1;
}
.ks-exceptions .gaprow .cov {
  flex: none;
}
.ks-exceptions .flip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--ks-fg-dim);
  font-size: 11.5px;
  padding: 4px 0;
}
.ks-exceptions .flip svg {
  width: 15px;
  height: 15px;
}

/* Coverage pill */
.ks-exceptions .cov {
  font-family: var(--ks-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px 3px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.ks-exceptions .cov::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.ks-exceptions .cov.gap {
  color: var(--ks-red);
  background: color-mix(in srgb, var(--ks-red) 14%, transparent);
  border-color: color-mix(in srgb, var(--ks-red) 30%, transparent);
}
.ks-exceptions .cov.exception {
  color: var(--ks-purple-light);
  background: var(--ks-purple-bg);
  border-color: color-mix(in srgb, var(--ks-purple-light) 34%, transparent);
}

.ks-exceptions .card-b {
  background: var(--ks-bg-card);
  border: 1px solid var(--ks-border);
  border-radius: 14px;
  box-shadow: var(--ks-shadow-soft);
  padding: 16px 19px;
}
.ks-exceptions .card-b p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ks-fg-secondary);
}
.ks-exceptions .reason-chips {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* Time-bound */
.ks-exceptions .timeblk {
  background: var(--ks-bg-card);
  border: 1px solid var(--ks-border);
  border-radius: 16px;
  box-shadow: var(--ks-shadow-card);
  overflow: hidden;
}
.ks-exceptions .timeline-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ks-border);
}
@media (max-width: 680px) {
  .ks-exceptions .timeline-row {
    grid-template-columns: 1fr 1fr;
  }
}
.ks-exceptions .tcell {
  background: var(--ks-bg-card);
  padding: 15px 17px;
}
.ks-exceptions .tcell .tl {
  font-family: var(--ks-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ks-fg-dim);
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ks-exceptions .tcell .tl svg {
  width: 12px;
  height: 12px;
}
.ks-exceptions .tcell .td {
  font-size: 15px;
  color: var(--ks-fg);
  font-weight: 500;
  font-family: var(--ks-font-mono);
  letter-spacing: -0.01em;
}
.ks-exceptions .tcell .tn {
  font-size: 11px;
  color: var(--ks-fg-dim);
  margin-top: 4px;
}
.ks-exceptions .tcell.due .td {
  color: var(--ks-indigo-light);
}
.ks-exceptions .tcell.exp .td {
  color: var(--ks-fg-secondary);
}
.ks-exceptions .reviewbar {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 18px;
  border-top: 1px solid var(--ks-border);
  background: var(--ks-bg-soft);
  flex-wrap: wrap;
}
.ks-exceptions .reviewbar .rt {
  font-size: 13px;
  color: var(--ks-fg-secondary);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.ks-exceptions .reviewbar .rt svg {
  width: 16px;
  height: 16px;
  color: var(--ks-indigo-light);
}
.ks-exceptions .reviewbar .rt b {
  color: var(--ks-fg);
  font-weight: 600;
}
.ks-exceptions .reviewbar .spacer {
  flex: 1;
}
/* Placeholder */
.ks-exceptions .placeholder {
  border: 1px dashed var(--ks-border-strong);
  border-radius: 14px;
  padding: 17px 20px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: var(--ks-bg-soft);
}
.ks-exceptions .placeholder .pi {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-muted);
  display: grid;
  place-items: center;
  flex: none;
}
.ks-exceptions .placeholder .pi svg {
  width: 16px;
  height: 16px;
}
.ks-exceptions .placeholder .pt {
  font-size: 13.5px;
  color: var(--ks-fg-secondary);
  font-weight: 600;
}
.ks-exceptions .placeholder .pd {
  font-size: 12.5px;
  color: var(--ks-fg-dim);
  margin-top: 3px;
  line-height: 1.5;
}
.ks-exceptions .placeholder .ptag {
  margin-left: auto;
  font-family: var(--ks-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ks-fg-dim);
  border: 1px solid var(--ks-border);
  border-radius: 6px;
  padding: 3px 8px;
  flex: none;
}

/* Approval flow */
.ks-exceptions .flow {
  position: relative;
  padding-left: 26px;
}
.ks-exceptions .flow::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 10px;
  bottom: 14px;
  width: 2px;
  background: var(--ks-border);
}
.ks-exceptions .fitem {
  position: relative;
  padding-bottom: 18px;
}
.ks-exceptions .fitem:last-child {
  padding-bottom: 0;
}
.ks-exceptions .fitem .node {
  position: absolute;
  left: -26px;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.ks-exceptions .fitem .node svg {
  width: 11px;
  height: 11px;
}
.ks-exceptions .fitem.done .node {
  background: var(--ks-green);
  color: white;
}
.ks-exceptions .fitem.active .node {
  background: var(--ks-indigo);
  box-shadow: 0 0 0 4px var(--ks-indigo-bg);
  color: white;
}
.ks-exceptions .fitem .role {
  font-family: var(--ks-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ks-fg-dim);
}
.ks-exceptions .fitem .who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.ks-exceptions .fitem .who .av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ks-cta-gradient);
  color: white;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  flex: none;
}
.ks-exceptions .fitem .who .nm {
  font-size: 14px;
  color: var(--ks-fg);
  font-weight: 600;
}
.ks-exceptions .fitem .who .dept {
  font-size: 12px;
  color: var(--ks-fg-muted);
}
.ks-exceptions .fitem .when {
  font-size: 12px;
  color: var(--ks-fg-dim);
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ks-exceptions .fitem .when svg {
  width: 12px;
  height: 12px;
}
.ks-exceptions .sod {
  margin-top: 11px;
  font-size: 12px;
  color: var(--ks-fg-muted);
  background: var(--ks-bg-soft);
  border: 1px solid var(--ks-border);
  border-radius: 9px;
  padding: 9px 12px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.ks-exceptions .sod svg {
  width: 14px;
  height: 14px;
  color: var(--ks-indigo-muted);
  flex: none;
  margin-top: 1px;
}
.ks-exceptions .actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
/* Rail facts */
.ks-exceptions .rail {
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
}
.ks-exceptions .facts {
  background: var(--ks-bg-card);
  border: 1px solid var(--ks-border);
  border-radius: 16px;
  box-shadow: var(--ks-shadow-card);
  overflow: hidden;
}
.ks-exceptions .facts .ftitle {
  font-family: var(--ks-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ks-fg-dim);
  padding: 15px 18px 4px;
}
.ks-exceptions .fact {
  padding: 11px 18px;
  border-top: 1px solid var(--ks-border);
}
.ks-exceptions .fact .k {
  font-size: 11.5px;
  color: var(--ks-fg-dim);
  margin-bottom: 4px;
}
.ks-exceptions .fact .v {
  font-size: 13.5px;
  color: var(--ks-fg);
  font-weight: 500;
  line-height: 1.45;
}
.ks-exceptions .fact .v.mono {
  font-family: var(--ks-font-mono);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ks-fg-secondary);
}

/* ===== Propose exception (#5933) ===== */
.ks-exceptions .prefill {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 20px 0 4px;
  font-size: 12.5px;
  color: var(--ks-indigo-light);
  background: var(--ks-indigo-bg);
  border: 1px solid color-mix(in srgb, var(--ks-indigo-light) 26%, transparent);
  border-radius: 10px;
  padding: 11px 15px;
}
.ks-exceptions .prefill svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.ks-exceptions .fcard {
  background: var(--ks-bg-card);
  border: 1px solid var(--ks-border);
  border-radius: 14px;
  box-shadow: var(--ks-shadow-soft);
  padding: 18px 20px;
}
.ks-exceptions .fcard + .fcard {
  margin-top: 16px;
}
.ks-exceptions .flabel {
  font-size: 13px;
  font-weight: 600;
  color: var(--ks-fg);
  display: flex;
  align-items: center;
  gap: 9px;
}
.ks-exceptions .flabel .n {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-muted);
  display: grid;
  place-items: center;
  font-family: var(--ks-font-mono);
  font-size: 11px;
  flex: none;
}
.ks-exceptions .fhint {
  font-size: 12px;
  color: var(--ks-fg-dim);
  margin-top: 5px;
  margin-left: 31px;
  line-height: 1.5;
}
.ks-exceptions .fbody {
  margin-top: 14px;
  margin-left: 31px;
}
.ks-exceptions .seg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ks-exceptions .ta,
.ks-exceptions .tin {
  width: 100%;
  box-sizing: border-box;
  background: var(--ks-bg-soft);
  border: 1px solid var(--ks-border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--ks-fg);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.55;
}
.ks-exceptions .ta {
  resize: vertical;
  min-height: 92px;
}
.ks-exceptions .ta:focus,
.ks-exceptions .tin:focus {
  outline: none;
  border-color: var(--ks-border-emphasis);
}
.ks-exceptions .ta::placeholder,
.ks-exceptions .tin::placeholder {
  color: var(--ks-fg-dim);
}
.ks-exceptions .riskpick {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
.ks-exceptions .risk-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ks-fg-dim);
}
.ks-exceptions .risk-dot.r-medium {
  background: var(--ks-amber);
}
.ks-exceptions .risk-dot.r-high,
.ks-exceptions .risk-dot.r-critical {
  background: var(--ks-red);
}
.ks-exceptions .row2 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ks-exceptions .row2 + .row2 {
  margin-top: 14px;
}
.ks-exceptions .field {
  flex: 1;
  min-width: 180px;
}
.ks-exceptions .field .fl {
  font-size: 11px;
  font-family: var(--ks-font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ks-fg-dim);
  margin-bottom: 7px;
}
.ks-exceptions .selpill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ks-bg-soft);
  border: 1px solid var(--ks-border);
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 13.5px;
  color: var(--ks-fg);
}
.ks-exceptions .selpill .av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ks-cta-gradient);
  color: white;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 600;
  flex: none;
}

/* Lifecycle rail */
.ks-exceptions .lifecard {
  background: var(--ks-bg-card);
  border: 1px solid var(--ks-border);
  border-radius: 16px;
  box-shadow: var(--ks-shadow-card);
  overflow: hidden;
  position: sticky;
  top: 76px;
}
.ks-exceptions .lifecard .lh {
  padding: 15px 18px 13px;
  border-bottom: 1px solid var(--ks-border);
}
.ks-exceptions .lifecard .lh .t {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ks-fg);
  display: flex;
  align-items: center;
  gap: 9px;
}
.ks-exceptions .lifecard .lh .t svg {
  width: 16px;
  height: 16px;
  color: var(--ks-indigo-muted);
}
.ks-exceptions .lifecard .lh .d {
  font-size: 12px;
  color: var(--ks-fg-muted);
  margin-top: 5px;
  line-height: 1.5;
}
.ks-exceptions .lsteps {
  padding: 16px 18px;
  position: relative;
}
.ks-exceptions .lsteps::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: var(--ks-border);
}
.ks-exceptions .lstep {
  position: relative;
  padding-left: 26px;
  padding-bottom: 16px;
}
.ks-exceptions .lstep:last-child {
  padding-bottom: 0;
}
.ks-exceptions .lstep .ln {
  position: absolute;
  left: -1px;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ks-bg-elevated);
  border: 1px solid var(--ks-border);
  color: var(--ks-fg-dim);
}
.ks-exceptions .lstep .ln svg {
  width: 10px;
  height: 10px;
}
.ks-exceptions .lstep.now .ln {
  background: var(--ks-indigo);
  border-color: var(--ks-indigo);
  color: white;
  box-shadow: 0 0 0 4px var(--ks-indigo-bg);
}
.ks-exceptions .lstep .lk {
  font-family: var(--ks-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ks-fg-dim);
}
.ks-exceptions .lstep.now .lk {
  color: var(--ks-indigo-light);
}
.ks-exceptions .lstep .lt {
  font-size: 13px;
  color: var(--ks-fg);
  font-weight: 500;
  margin-top: 3px;
}
.ks-exceptions .lstep .ld {
  font-size: 11.5px;
  color: var(--ks-fg-muted);
  margin-top: 3px;
  line-height: 1.45;
}
.ks-exceptions .submitbar {
  padding: 15px 18px;
  border-top: 1px solid var(--ks-border);
  background: var(--ks-bg-soft);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ks-exceptions .submitbar .note {
  font-size: 11.5px;
  color: var(--ks-fg-dim);
  display: flex;
  gap: 7px;
  align-items: flex-start;
}
.ks-exceptions .submitbar .note svg {
  width: 13px;
  height: 13px;
  flex: none;
  margin-top: 1px;
  color: var(--ks-indigo-muted);
}
.ks-exceptions .submitbar .ks-btn--primary {
  justify-content: center;
}

/* ---- connectors-hub (folded #6013 1d) ---- */
/*
 * Connectors hub + Manage connection styling.
 * Co-located so the app-design-parity gate stays clean: typography, status tints,
 * and the category accent palette live here as token-backed classes instead of
 * inline hex/font literals in the .tsx. Brand badge colors come from catalog data
 * (referenced inline as a variable, never a literal).
 *
 * Category accents are the one set of brand hues with no --ds-* token; both light
 * and dark values are paired per the light-mode contrast rule.
 */

/* ---- category accent palette (dark default, light override) ---- */
.chx-cat--provenance { --chx-accent: #6fb4ff; }
.chx-cat--guardrails { --chx-accent: #9db4f2; }
.chx-cat--saas { --chx-accent: #b69cf5; }
.chx-cat--oauth { --chx-accent: #8fa8f5; }
.chx-cat--default { --chx-accent: var(--ks-indigo); }

[data-theme='light'] .chx-cat--provenance { --chx-accent: #2e6be6; }
[data-theme='light'] .chx-cat--guardrails { --chx-accent: #2547d0; }
[data-theme='light'] .chx-cat--saas { --chx-accent: #7c5ce6; }
[data-theme='light'] .chx-cat--oauth { --chx-accent: #3f6ae0; }
[data-theme='light'] .chx-cat--default { --chx-accent: var(--ks-indigo); }

.chx-cat-dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--chx-accent);
  flex-shrink: 0;
}

/* ---- monospace labels (kicker / eyebrow) ---- */
.chx-kicker {
  font-family: var(--ks-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ks-indigo);
}
.chx-eyebrow {
  font-family: var(--ks-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ks-fg-dim);
}
.chx-mono {
  font-family: var(--ks-font-mono);
}

/* ---- mono brand badge (bg + initials supplied inline from catalog data) ---- */
.chx-badge {
  display: grid;
  place-items: center;
  color: var(--ks-fg-on-accent);
  font-family: var(--ks-font-mono);
  font-weight: 600;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
[data-theme='light'] .chx-badge { border-color: rgba(0, 0, 0, 0.06); }

/* ---- status chips ---- */
.chx-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ks-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
}
.chx-status__dot { width: 6px; height: 6px; border-radius: 50%; }
.chx-status--on {
  color: var(--ks-green);
  background: color-mix(in srgb, var(--ks-green) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--ks-green) 32%, transparent);
}
.chx-status--on .chx-status__dot { background: var(--ks-green); }
.chx-status--off {
  color: var(--ks-fg-dim);
  background: var(--ks-bg);
  border: 1px solid var(--ks-border);
}
.chx-status--off .chx-status__dot { background: var(--ks-fg-dim); }
.chx-status--warn {
  color: var(--ks-amber);
  background: color-mix(in srgb, var(--ks-amber) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--ks-amber) 30%, transparent);
}
.chx-status--warn .chx-status__dot { background: var(--ks-amber); }
.chx-status--bad {
  color: var(--ks-red);
  background: color-mix(in srgb, var(--ks-red) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--ks-red) 30%, transparent);
}
.chx-status--bad .chx-status__dot { background: var(--ks-red); }

/* ---- filter pills ---- */
.chx-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ks-fg-muted);
  background: var(--ks-bg-card);
  border: 1px solid var(--ks-border-strong);
}
.chx-pill:hover { border-color: var(--ks-indigo); }
.chx-pill--on {
  color: var(--ks-fg-on-accent);
  background: var(--ks-indigo);
  border-color: var(--ks-indigo);
}
.chx-pill__count {
  font-family: var(--ks-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 100px;
  color: var(--ks-fg-dim);
  background: var(--ks-bg);
}
.chx-pill--on .chx-pill__count { color: var(--ks-fg-on-accent); background: rgba(255, 255, 255, 0.18); }

/* ---- tabs ---- */
.chx-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  color: var(--ks-fg-dim);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.chx-tab:hover { color: var(--ks-fg-muted); }
.chx-tab--on { color: var(--ks-fg); border-bottom-color: var(--ks-indigo); }
.chx-tab__count {
  font-family: var(--ks-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 100px;
  color: var(--ks-fg-dim);
  background: color-mix(in srgb, var(--ks-fg-dim) 14%, transparent);
}
.chx-tab--on .chx-tab__count { color: var(--ks-fg); }

/* ---- connector card ---- */
.chx-card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 14px;
  cursor: pointer;
  background: var(--ks-bg-card);
  border: 1px solid var(--ks-border);
  box-shadow: var(--ks-shadow-soft, 0 18px 50px rgba(0, 0, 0, 0.18));
  transition: border-color 0.18s, box-shadow 0.18s;
  text-align: left;
  width: 100%;
}
.chx-card:hover { border-color: color-mix(in srgb, var(--ks-indigo) 40%, var(--ks-border)); }
.chx-card--on {
  border-color: color-mix(in srgb, var(--ks-indigo) 55%, var(--ks-border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ks-indigo) 40%, transparent);
}

/* ---- feed-routing chip (accent supplied by category class) ---- */
.chx-feed {
  font-family: var(--ks-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--chx-accent);
  padding: 3px 9px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--chx-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--chx-accent) 28%, transparent);
  white-space: nowrap;
}

/* ---- routing toggle switch ---- */
.chx-switch {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 100px;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  background: color-mix(in srgb, var(--ks-fg-dim) 38%, transparent);
  transition: background 0.2s;
}
.chx-switch--on { background: var(--ks-indigo); }
.chx-switch:disabled { opacity: 0.5; cursor: not-allowed; }
.chx-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.chx-switch--on .chx-switch__knob { left: 21px; }

/* ---- danger zone panel ---- */
.chx-danger-zone {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--ks-red) 30%, transparent);
  background: color-mix(in srgb, var(--ks-red) 5%, var(--ks-bg-card));
  padding: 20px 22px;
}

/* ---- activity status badge ---- */
.chx-act-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--ks-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 100px;
}

/* ---- OnboardingPolicyStep (folded #6013 1d) ---- */
/* Onboarding policy step (5909 slice 4). Pick + lightly customize starter policies seeded from the
   subscribed sector pack, then create them against live gov-core (#5907). Built on the --ks-* token
   standard (public/css/ks-tokens.css), adapted from "Onboarding policy step.dc.html".
   Option A (Lead): scope is set pre-create; gov-core seeds requirements + controls server-side on
   create; the seeded controls are shown read-only afterwards (no toggle-persist endpoint exists yet
   — control edits live in the policy author). */

.ks-policy-step {
  font-family: var(--ks-font-body);
}

.ks-policy-step .kick {
  font-family: var(--ks-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ks-indigo-light);
}
.ks-policy-step h2.ps-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 8px;
  line-height: 1.2;
  color: var(--ks-fg);
}
.ks-policy-step .lede {
  margin-top: 12px;
  font-size: 15px;
  color: var(--ks-fg-secondary);
  max-width: 62ch;
  line-height: 1.55;
}
.ks-policy-step .lede b {
  color: var(--ks-fg);
  font-weight: 600;
}
.ks-policy-step .packtag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ks-indigo-bg);
  color: var(--ks-indigo-muted);
  border: 1px solid var(--ks-border-emphasis);
}
.ks-policy-step .packtag svg {
  width: 14px;
  height: 14px;
}

.ks-policy-step .seclab {
  font-family: var(--ks-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ks-fg-dim);
  margin: 26px 0 12px;
}

.ks-policy-step .starters {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.ks-policy-step .starter {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 17px;
  border-radius: 14px;
  border: 1px solid var(--ks-border);
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-soft);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color 0.15s, background 0.15s;
}
.ks-policy-step .starter:hover {
  border-color: var(--ks-border-strong);
}
.ks-policy-step .starter.sel {
  border-color: var(--ks-border-emphasis);
  background: var(--ks-tint-card);
}
.ks-policy-step .starter .ck {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1.5px solid var(--ks-border-strong);
  flex: none;
  display: grid;
  place-items: center;
  color: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.ks-policy-step .starter.on .ck {
  background: var(--ks-cta-gradient);
  border-color: transparent;
  color: white;
}
.ks-policy-step .starter .ck svg {
  width: 14px;
  height: 14px;
}
.ks-policy-step .starter .body {
  flex: 1;
  min-width: 0;
}
.ks-policy-step .starter .body .nm {
  font-size: 15px;
  font-weight: 600;
  color: var(--ks-fg);
}
.ks-policy-step .starter .body .ds {
  font-size: 12.5px;
  color: var(--ks-fg-muted);
  margin-top: 3px;
}
.ks-policy-step .starter .cc {
  font-family: var(--ks-font-mono);
  font-size: 11.5px;
  color: var(--ks-fg-dim);
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ks-policy-step .starter .cc svg {
  width: 13px;
  height: 13px;
}

.ks-policy-step .customize {
  margin-top: 14px;
  border: 1px solid var(--ks-border-emphasis);
  border-radius: 16px;
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-card);
  overflow: hidden;
}
.ks-policy-step .customize .ch {
  padding: 15px 20px;
  border-bottom: 1px solid var(--ks-border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ks-policy-step .customize .ch svg {
  width: 16px;
  height: 16px;
  color: var(--ks-indigo-muted);
}
.ks-policy-step .customize .ch .lab2 {
  font-family: var(--ks-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ks-fg-dim);
}
.ks-policy-step .customize .ch .lab2 b {
  color: var(--ks-fg-secondary);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
}
.ks-policy-step .customize .cbody {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ks-policy-step .fld .fk {
  font-size: 12px;
  color: var(--ks-fg-dim);
  margin-bottom: 7px;
  display: block;
}
.ks-policy-step .fld input.tin {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--ks-fg);
  background: var(--ks-bg-elevated);
  border: 1px solid var(--ks-border);
  border-radius: 10px;
  padding: 11px 13px;
}
.ks-policy-step .fld input.tin:focus {
  outline: none;
  border-color: var(--ks-border-emphasis);
}
.ks-policy-step .scopes {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.ks-policy-step .scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--ks-bg-elevated);
  border: 1px solid var(--ks-border);
  color: var(--ks-fg-secondary);
}
.ks-policy-step .seed-note {
  font-size: 12.5px;
  color: var(--ks-fg-dim);
  line-height: 1.5;
}

.ks-policy-step .seeded {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
@media (max-width: 560px) {
  .ks-policy-step .seeded {
    grid-template-columns: 1fr;
  }
}
.ks-policy-step .seeded .ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--ks-border);
  background: var(--ks-bg-elevated);
  font-size: 13px;
  color: var(--ks-fg-dim);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color 0.15s, color 0.15s;
}
.ks-policy-step .seeded .ctrl:hover {
  border-color: var(--ks-border-strong);
}
.ks-policy-step .seeded .ctrl:disabled {
  cursor: default;
  opacity: 0.7;
}
.ks-policy-step .seeded .ctrl.on {
  color: var(--ks-fg);
}
/* keep/drop toggle */
.ks-policy-step .seeded .ctrl .tg {
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--ks-border-strong);
  position: relative;
  flex: none;
  transition: background 0.15s;
}
.ks-policy-step .seeded .ctrl .tg::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: white;
  top: 2.5px;
  left: 2.5px;
  transition: transform 0.15s;
}
.ks-policy-step .seeded .ctrl.on .tg {
  background: var(--ks-indigo);
}
.ks-policy-step .seeded .ctrl.on .tg::after {
  transform: translateX(14px);
}
.ks-policy-step .toggle-error {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ks-red);
}

.ks-policy-step .created {
  border: 1px solid var(--ks-border);
  border-radius: 14px;
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-soft);
  padding: 16px 18px;
  margin-top: 14px;
}
.ks-policy-step .created .cnm {
  font-size: 14px;
  font-weight: 600;
  color: var(--ks-fg);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ks-policy-step .created .cnm svg {
  width: 16px;
  height: 16px;
  color: var(--ks-indigo);
}
.ks-policy-step .created .csub {
  font-size: 12px;
  color: var(--ks-fg-dim);
  margin-top: 3px;
}

.ks-policy-step .obactions {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ks-policy-step .obactions .spacer {
  flex: 1;
}
.ks-policy-step .obactions .skip {
  font-size: 13.5px;
  color: var(--ks-fg-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.ks-policy-step .obactions .skip:hover {
  color: var(--ks-fg-secondary);
}
.ks-policy-step .obactions .primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-family: var(--ks-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ks-fg-on-accent);
  background: var(--ks-button-primary);
  box-shadow: none;
  text-decoration: none;
}
.ks-policy-step .obactions .primary:hover { background: color-mix(in srgb, var(--ks-button-primary), black 10%); }
.ks-policy-step .obactions .primary:active { background: color-mix(in srgb, var(--ks-button-primary), black 16%); }
.ks-policy-step .obactions .primary:focus-visible { outline: 2px solid var(--ks-indigo-muted); outline-offset: 2px; }
.ks-policy-step .obactions .primary:disabled {
  opacity: 0.6;
  cursor: default;
}
.ks-policy-step .obactions .link {
  font-size: 13px;
  color: var(--ks-indigo-light);
  text-decoration: none;
}
.ks-policy-step .ps-error {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ks-red);
}
.ks-policy-step .ps-empty {
  margin-top: 14px;
  border: 1px dashed var(--ks-border-strong);
  border-radius: 14px;
  padding: 18px;
  font-size: 13.5px;
  color: var(--ks-fg-muted);
}

/* ---- OnboardingProgressMap (folded #6013 1d) ---- */
/* Persistent onboarding progress map (5909 slice 3). First in-app surface on the --ks-* standard
   (public/css/ks-tokens.css). Full-width card above the dashboard while setup is incomplete; it
   replaces the dismissible QuickstartOverlay. Progress uses calm brand hues (indigo), never the
   risk red/amber/green. Adapted from "Onboarding progress map.dc.html". */

.ks-setup-map {
  font-family: var(--ks-font-body);
}

.ks-setup-map .setup {
  background: var(--ks-bg-card);
  border: 1px solid var(--ks-border);
  border-radius: 18px;
  box-shadow: var(--ks-shadow-card);
  overflow: hidden;
}

.ks-setup-map .sh {
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--ks-border);
}
.ks-setup-map .sh .top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ks-setup-map .sh .ttl {
  font-size: 15px;
  font-weight: 600;
  color: var(--ks-fg);
}
.ks-setup-map .sh .frac {
  margin-left: auto;
  font-family: var(--ks-font-mono);
  font-size: 12px;
  color: var(--ks-fg-muted);
}
.ks-setup-map .collapse {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--ks-border);
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ks-setup-map .collapse:hover {
  color: var(--ks-fg);
  border-color: var(--ks-border-strong);
}
.ks-setup-map .collapse svg {
  width: 15px;
  height: 15px;
}
.ks-setup-map .demo {
  margin-top: 8px;
  font-size: 11px;
  color: var(--ks-amber);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ks-setup-map .demo svg {
  width: 12px;
  height: 12px;
}

.ks-setup-map .pbar {
  margin-top: 14px;
  height: 8px;
  border-radius: 999px;
  background: var(--ks-bg-elevated);
  border: 1px solid var(--ks-border);
  overflow: hidden;
}
.ks-setup-map .pbar > span {
  display: block;
  height: 100%;
  background: var(--ks-accent-gradient);
  border-radius: 999px;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ks-setup-map .pnum {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ks-fg-dim);
}
.ks-setup-map .pnum b {
  color: var(--ks-fg-secondary);
  font-family: var(--ks-font-mono);
  font-weight: 400;
}

/* Full-width step grid: flows into columns on desktop, stacks on mobile. */
.ks-setup-map .slist {
  padding: 10px 12px 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 4px;
}
.ks-setup-map .srow {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 10px;
  border-radius: 11px;
  border: 1px solid transparent;
  transition: background 0.15s;
  cursor: pointer;
  text-decoration: none;
}
.ks-setup-map .srow:hover {
  background: var(--ks-bg-elevated);
}
.ks-setup-map .srow .mk {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ks-border-strong);
  background: var(--ks-bg-card);
  color: var(--ks-fg-dim);
}
.ks-setup-map .srow .mk svg {
  width: 13px;
  height: 13px;
}
.ks-setup-map .srow .tx {
  flex: 1;
  min-width: 0;
}
.ks-setup-map .srow .nm {
  font-size: 13.5px;
  color: var(--ks-fg-secondary);
}
.ks-setup-map .srow .hint {
  font-size: 11.5px;
  color: var(--ks-fg-dim);
  margin-top: 1px;
}
.ks-setup-map .srow .go {
  color: var(--ks-fg-dim);
  flex: none;
  opacity: 0;
  transition: opacity 0.15s;
  display: grid;
  place-items: center;
}
.ks-setup-map .srow:hover .go {
  opacity: 1;
}
.ks-setup-map .srow .go svg {
  width: 16px;
  height: 16px;
}

/* Done: filled indigo marker. */
.ks-setup-map .srow.done .mk {
  background: var(--ks-indigo);
  border-color: transparent;
  color: white;
}
/* Current: highlighted with calm brand tint (soft gating nudge). */
.ks-setup-map .srow.current {
  background: var(--ks-indigo-bg);
  border-color: var(--ks-border-emphasis);
}
.ks-setup-map .srow.current .mk {
  background: var(--ks-bg-card);
  border-color: var(--ks-indigo);
  color: var(--ks-indigo-muted);
}
.ks-setup-map .srow.current .go {
  opacity: 1;
  color: var(--ks-indigo-muted);
}

.ks-setup-map .sf {
  padding: 4px 16px 18px;
}
/* The "Continue setup" button now uses the shared .ks-btn ks-btn--primary recipe
   (#6014) instead of a bespoke button — one button system, and the icon-color fix
   is handled at the root in ks-tokens.css rather than per-button here. */

/* Collapsed chip. */
.ks-setup-map.is-collapsed .setup {
  display: none;
}
.ks-setup-map .setupchip {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid var(--ks-border-emphasis);
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-soft);
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.ks-setup-map.is-collapsed .setupchip {
  display: flex;
}
.ks-setup-map .setupchip .ring {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.ks-setup-map .setupchip .ring .inner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ks-bg-card);
  display: grid;
  place-items: center;
  font-family: var(--ks-font-mono);
  font-size: 9px;
  color: var(--ks-fg-secondary);
}
.ks-setup-map .setupchip .ct {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.ks-setup-map .setupchip .ct .a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ks-fg);
}
.ks-setup-map .setupchip .ct .b {
  font-size: 11.5px;
  color: var(--ks-fg-dim);
}
.ks-setup-map .setupchip .ex {
  color: var(--ks-fg-dim);
  display: grid;
  place-items: center;
}
.ks-setup-map .setupchip .ex svg {
  width: 16px;
  height: 16px;
}

/* Complete: compact success state. */
.ks-setup-map .setupdone {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid var(--ks-border);
  background: var(--ks-bg-card);
  box-shadow: var(--ks-shadow-soft);
}
.ks-setup-map .setupdone .mk {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ks-indigo);
  color: white;
}
.ks-setup-map .setupdone .mk svg {
  width: 16px;
  height: 16px;
}
.ks-setup-map .setupdone .ct {
  flex: 1;
}
.ks-setup-map .setupdone .ct .a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ks-fg);
}
.ks-setup-map .setupdone .ct .b {
  font-size: 11.5px;
  color: var(--ks-fg-dim);
}
.ks-setup-map .setupdone .dismiss {
  border: 1px solid var(--ks-border);
  background: var(--ks-bg-elevated);
  color: var(--ks-fg-muted);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}
.ks-setup-map .setupdone .dismiss:hover {
  color: var(--ks-fg);
  border-color: var(--ks-border-strong);
}

/* ---- system-card-editor (folded #6013 1d) ---- */
/*
 * In-app styling for the System Card editor. Originally a port of the
 * ds-panel / ds-card / ds-muted / ds-button-* vocabulary the editor
 * rendered with under design-system.css; those classes don't exist
 * anywhere else, so the page would render unstyled without this sheet.
 * Renamed to ks-editor-* in #6069 to avoid colliding with the global
 * .ks-panel/.ks-card/.ks-stack recipes below, which use the same names
 * for a different (dashboard) look. Every rule stays scoped under
 * .compliance-editor-page and built on --ks-* tokens, which flip with
 * [data-theme="light"], so light and dark modes follow automatically.
 */

.compliance-editor-page {
  width: min(880px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 32px 0 64px;
  color: var(--ks-fg);
}

.compliance-editor-page .ks-editor-panel {
  background: var(--ks-bg-card);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-lg);
  padding: 24px;
}

.compliance-editor-page .ks-editor-panel-header {
  margin-bottom: 16px;
}

.compliance-editor-page .ks-editor-h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ks-fg);
  margin: 0;
}

.compliance-editor-page .ks-editor-h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ks-fg);
  margin: 0 0 8px;
}

.compliance-editor-page .ks-editor-card {
  background: var(--ks-bg-elevated);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-md);
  padding: 16px;
}


.compliance-editor-page textarea,
.compliance-editor-page input[type='text'],
.compliance-editor-page input[type='file'] {
  width: 100%;
  background: var(--ks-bg);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-md);
  color: var(--ks-fg);
  padding: 8px 10px;
  font: inherit;
}

.compliance-editor-page textarea:focus,
.compliance-editor-page input[type='text']:focus {
  outline: none;
  border-color: var(--ks-indigo);
}

.compliance-editor-page .ks-editor-form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ks-fg-muted);
  margin-bottom: 6px;
}

.compliance-editor-page figure {
  margin: 12px 0 0;
}

/* ---- shared surface primitives (#6069) ----
   Promoted out of the .compliance-editor-page scope so components rendering
   OUTSIDE that wrapper get them too. CompliancePackageExportButton renders
   from PackageDashboardPage, which never applies the wrapper, so each of
   these resolved to nothing and the export UI rendered unstyled in prod.

   Names deliberately avoid .ks-card / .ks-panel / .ks-stack: those already
   exist globally with unrelated recipes (.ks-stack is a grid with 42px
   padding, .ks-card carries a shadow). Hence .ks-vstack for the flex column. */
.ks-vstack {
  display: flex;
  flex-direction: column;
}

.ks-muted {
  color: var(--ks-fg-muted);
  font-size: 0.875rem;
}

.ks-link {
  color: var(--ks-indigo);
}

.ks-panel-error,
.ks-panel-info {
  border-radius: var(--ks-radius-md);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 0.875rem;
}

.ks-panel-error {
  background: color-mix(in srgb, var(--ks-red) 15%, transparent);
  border: 1px solid var(--ks-red);
  color: var(--ks-red);
}

/* New. ds-panel-info was referenced by CompliancePackageExportButton but
   never defined in any stylesheet, so export success panels rendered as bare
   text. Mirrors the error recipe on the indigo accent. Body text stays
   --ks-fg rather than the accent: these panels carry a download link and
   checksum metadata, not a one-line alert, so they need reading contrast. */
.ks-panel-info {
  background: var(--ks-indigo-bg);
  border: 1px solid var(--ks-indigo-light);
  color: var(--ks-fg);
}

.ks-panel-info a {
  color: var(--ks-indigo);
}

/* ---- segmented tabs (#6069) ----
   Ported from design-system.css (.ds-segmented-tabs / .ds-segmented-tab) onto
   --ks tokens. No font-family declaration on purpose: it inherits body, which
   keeps the port font-neutral ahead of the Inter flip. Focus ring matches the
   canonical .ks-btn treatment rather than inventing a second one. */
.ks-segmented-tabs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ks-space-1);
  padding: var(--ks-space-1);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-sm);
  background: var(--ks-bg-elevated);
}

.ks-segmented-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ks-space-1);
  min-height: 32px;
  padding: 0 var(--ks-space-3);
  border: 0;
  border-radius: 4px;
  color: var(--ks-fg-secondary);
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--ks-duration-fast), color var(--ks-duration-fast),
    box-shadow var(--ks-duration-fast);
}

.ks-segmented-tab:hover {
  color: var(--ks-fg);
  background: color-mix(in srgb, var(--ks-fg) 7%, transparent);
}

.ks-segmented-tab.is-active {
  color: var(--ks-fg-on-accent);
  background: var(--ks-indigo);
}

.ks-segmented-tab:disabled,
.ks-segmented-tab[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

.ks-segmented-tab:focus-visible {
  outline: 2px solid rgb(from var(--ks-indigo) r g b / 0.9);
  outline-offset: 2px;
}

/* ============================================================================
 * Type-scale utilities (#6069 Wave 2 font phase).
 *
 * The single shared text scale for the logged-in app. Inline
 * fontSize / fontWeight / letterSpacing / lineHeight literals in
 * src/features migrate onto these classes instead of a per-component
 * one-off (Anwesa 2026-07-14). The ~30 fragmented inline sizes normalize
 * onto eight roles; weight is composed separately via .ks-fw-* so a label
 * (600) and a caption sub (400) can share the same size role.
 *
 * px reference (root 16px): display 26 · h3 18 · title 15 · body 13 ·
 * body-sm 12 · caption 11 · overline 10 · micro 9.
 * ==========================================================================*/
.ks-display  { font-size: 1.625rem;  line-height: 1.15; letter-spacing: -0.02em; }
.ks-h3       { font-size: var(--ks-h3-size); line-height: var(--ks-h3-leading); letter-spacing: -0.01em; }
.ks-title    { font-size: 0.9375rem; line-height: 1.35; letter-spacing: -0.01em; }
.ks-body     { font-size: 0.8125rem; line-height: 1.5; }
.ks-body-sm  { font-size: 0.75rem;   line-height: 1.45; }
.ks-caption  { font-size: 0.6875rem; line-height: 1.4; }
.ks-overline { font-size: 0.625rem;  line-height: 1.2; letter-spacing: 0.07em; }
.ks-micro    { font-size: 0.5625rem; line-height: 1.3; }

.ks-fw-500 { font-weight: 500; }
.ks-fw-600 { font-weight: 600; }
.ks-fw-700 { font-weight: 700; }
.ks-fw-800 { font-weight: 800; }

/* Proportional avatar initials — font-size scales with the --ks-avatar-size the
   element sets inline, so the size stays out of an inline fontSize literal. */
.ks-avatar-initials { font-size: calc(var(--ks-avatar-size) * 0.36); }

/* Standalone leading utilities (#6069 Wave 2 font phase) — for blocks that set
   line-height without a size role. Reused across the app. */
.ks-lh-tight   { line-height: 1.2; }
.ks-lh-snug    { line-height: 1.35; }
.ks-lh-normal  { line-height: 1.5; }
.ks-lh-relaxed { line-height: 1.6; }

/* ==========================================================================
 * Page type scale (#6069) — auth + full-page screens (login, MFA, reset,
 * audit evidence, route fallbacks).
 *
 * The scale above is the dense one: it's tuned for data-heavy consoles and
 * runs a step smaller. This one is a 1:1 port of design-system.css's old
 * --ds-* scale (retired in #6069), so the screens that moved off it in the
 * same migration render unchanged.
 *
 * Two scales is deliberate (Lead's Option A on #6069). A login page and a
 * dashboard genuinely want different type; the bug was that both hid behind
 * the same role names, so `ds-caption` (12px) and `.ks-caption` (11px)
 * disagreed. Reach for --ks-page-* on a full-page screen and the dense
 * utilities inside a console. Both read from tokens; neither hardcodes.
 *
 * px reference (root 16px): h1 36 · h2 24 · h3 18 · h4 14 · body 16 ·
 * small 14 · caption 12 · overline 11. h1/h2/h3 step down on small
 * viewports — see the media queries in ks-tokens.css.
 *
 * No font-family on any of these, on purpose: they inherit body, which is
 * the single lever for the app typeface.
 * ==========================================================================*/
.ks-page-h1 {
  font-size: var(--ks-page-h1-size);
  font-weight: var(--ks-page-h1-weight);
  line-height: var(--ks-page-h1-leading);
  letter-spacing: var(--ks-page-h1-tracking);
  color: var(--ks-fg);
}

.ks-page-h2 {
  font-size: var(--ks-page-h2-size);
  font-weight: var(--ks-page-h2-weight);
  line-height: var(--ks-page-h2-leading);
  letter-spacing: var(--ks-page-h2-tracking);
  color: var(--ks-fg);
}

.ks-page-h3 {
  font-size: var(--ks-page-h3-size);
  font-weight: var(--ks-page-h3-weight);
  line-height: var(--ks-page-h3-leading);
  letter-spacing: var(--ks-page-h3-tracking);
  color: var(--ks-fg);
}

.ks-page-h4 {
  font-size: var(--ks-page-h4-size);
  font-weight: var(--ks-page-h4-weight);
  line-height: var(--ks-page-h4-leading);
  letter-spacing: var(--ks-page-h4-tracking);
  color: var(--ks-fg);
}

.ks-page-body {
  font-size: var(--ks-page-body-size);
  font-weight: var(--ks-page-body-weight);
  line-height: var(--ks-page-body-leading);
  color: var(--ks-fg);
}

/* small + caption + overline carry their own colour, matching the ds-*
   recipes they replace — the muted/dim/accent tone is part of the role. */
.ks-page-small {
  font-size: var(--ks-page-small-size);
  font-weight: var(--ks-page-small-weight);
  line-height: var(--ks-page-small-leading);
  color: var(--ks-fg-muted);
}

.ks-page-caption {
  font-size: var(--ks-page-caption-size);
  font-weight: var(--ks-page-caption-weight);
  line-height: var(--ks-page-caption-leading);
  letter-spacing: var(--ks-page-caption-tracking);
  color: var(--ks-fg-dim);
}

/* Indigo, not dim: --ks-fg-dim is too faint for an 11px eyebrow against
   either background, and the accent matches the brand. Carried over from
   the ds-overline rationale. */
.ks-page-overline {
  font-size: var(--ks-page-overline-size);
  font-weight: var(--ks-page-overline-weight);
  line-height: var(--ks-page-overline-leading);
  letter-spacing: var(--ks-page-overline-tracking);
  text-transform: uppercase;
  color: var(--ks-indigo-light);
}

/* Text-colour utilities, replacing ds-text-muted / ds-text-dim. */
.ks-text-muted { color: var(--ks-fg-muted); }
.ks-text-dim   { color: var(--ks-fg-dim); }