@font-face {
  font-family: "Geist Sans";
  src: url("/fonts/geist/Geist-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* Colour refresh (owner decision, 1 October 2026): a light canvas, white cards, one vivid blue for anything you can
     click or select, RAG only for recorded status, and record types as thin coloured edges and chips. */
  --stravx-primary: #1f62e0;
  --stravx-primary-hover: #1a54c2;
  --stravx-primary-soft: #e8f0fe;
  --stravx-ink: #182438;
  --stravx-ink-muted: #33445c;
  --stravx-paper: #f6f7f9;
  --stravx-muted-surface: #eef2f6;
  --stravx-border: #e3e8ee;
  --stravx-text-muted: #55657a;
  --stravx-slate-500: var(--stravx-text-muted);
  /* The neutral scale behind the slate utilities (light values; appearance.css holds the dark ones). */
  --stravx-slate-50: #f8fafc;
  --stravx-slate-100: #f1f5f9;
  --stravx-slate-200: #e2e8f0;
  --stravx-slate-300: #cbd5e1;
  --stravx-slate-400: #94a3b8;
  --stravx-slate-600: #475569;
  --stravx-slate-700: #334155;
  --stravx-slate-800: #1e293b;
  --stravx-slate-900: #0f172a;
  --stravx-slate-950: #020617;
  /* Outlines for status and selected panels: lighter than the mark, darker than the tint. */
  --rag-red-line: #fca5a5;
  --rag-amber-line: #fcd34d;
  --rag-green-line: #86efac;
  --stravx-primary-line: #93c5fd;
  /* Connections map lines (light; dark values in appearance.css). */
  --connection-alignment: #00828a;
  --connection-classification: #625a65;
  --connection-dependency: #7c3aed;
  --connection-shared: #180d24;
  /* Text-safe status ink (4.5:1 on white); fills and marks use the RAG tokens below. */
  --stravx-success: #15803d;
  --stravx-warning: #b45309;
  --stravx-danger: #c81e1e;
  --stravx-focus: #1f62e0;
  /* Text and icons on a filled action-blue control. */
  --stravx-on-primary: #ffffff;
  --stravx-font-sans: "Geist Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  /* Type weights (owner decision, 1 October 2026): titles 600, labels and figures 500, body 400; nothing at 700 or above. */
  --stravx-weight-title: 600;
  --stravx-weight-label: 500;
  --stravx-weight-body: 400;
  --stravx-font-reading: var(--stravx-font-sans);
  --stravx-radius-control: 8px;
  --stravx-radius-panel: 12px;
  --stravx-space-control: 40px;
  --stravx-shadow-surface: 0 1px 2px rgb(24 36 56 / 0.06), 0 4px 14px rgb(24 36 56 / 0.06);
  --stravx-shadow-raised: 0 1px 3px rgb(24 36 56 / 0.08), 0 8px 24px rgb(24 36 56 / 0.08);
  --stravx-content-inset: 256px;

  /* RAG: recorded or rule-calculated status only, always with a glyph and a word. Never a score, never decoration. */
  --rag-green: #16a34a;
  --rag-green-soft: #dcfce7;
  --rag-green-ink: #166534;
  --rag-amber: #d97706;
  --rag-amber-soft: #fef3c7;
  --rag-amber-ink: #92400e;
  --rag-red: #dc2626;
  --rag-red-soft: #fee2e2;
  --rag-red-ink: #991b1b;
  --rag-none: #7d8596;
  /* Change impact 0–5 and change intensity use the RAG scale (owner decision, 1 October 2026): 1–2 green, 3 amber,
     4–5 red, deeper for more change. Each step has its own ink so the number stays readable. */
  --impact-1: #86efac;
  --impact-2: #15803d;
  --impact-3: #d97706;
  --impact-4: #f87171;
  --impact-5: #991b1b;
  --impact-ink-1: #052e16;
  --impact-ink-2: #ffffff;
  --impact-ink-3: #111827;
  --impact-ink-4: #450a0a;
  --impact-ink-5: #ffffff;
  /* Small text in the "waits on it" / important-gap pink: a deeper shade that keeps 4.5:1. */
  --insight-waits-ink: #be185d;

  /* Record-type colours: thin edges, icons and chips. Structure is neutral, strategy is colourful, work is teal.
     They never use red, amber, green or the action blue, so a colour keeps one meaning. */
  --entity-company: #334155;
  --entity-staff-user: #6d28d9;
  --entity-domain: #475569;
  --entity-capability: #64748b;
  --entity-priority-area: #7c3aed;
  --entity-strategy: var(--entity-priority-area);
  --entity-objective: #c026d3;
  --entity-strategic-outcome: #a21caf;
  --entity-okr: #4f46e5;
  --entity-kpi: #0891b2;
  /* Prioritise ratings (owner page review, 2 October 2026): each has its own colour and icon. Value gold, effort violet,
     potential harm red (harm is an impact, so it may use an impact red). */
  --prio-value: #b7791f;
  --prio-effort: #7c4ddb;
  --prio-harm: #d1344f;
  --entity-roadmap: #64748b;
  --entity-initiative: #0d9488;
  /* Function assessment: bronze, so it never reads as Change impact pink (owner request, 1 October 2026). */
  --entity-maturity: #8b5a2b;
  /* Change impact: the people side of the plan (colour refresh, 1 October 2026). */
  --entity-change: #db2777;
  /*
   * Place colours (owner page review, 2 October 2026): each main place's page header and icon, so no header is grey.
   * Home and Organisation take the brand coral and green from waytrk.co.uk, deepened for contrast with white.
   */
  --place-home: #b4574d;
  --place-work: var(--entity-initiative);
  --place-strategy: var(--entity-priority-area);
  --place-organisation: #3d7a5c;
  --place-insights: #b45309;
  --place-other: var(--place-home);
  --place-on: white;
  /* The website's brand palette (waytrk.co.uk), for the Home welcome. The welcome stays dark in both appearances. */
  --brand-night: #101b2a;
  --brand-night-mid: #14263a;
  --brand-night-green: #162e31;
  --brand-glow: #233c48;
  --brand-coral: #c7766d;
  --brand-coral-deep: #a5534b;
  --brand-pink: #f1aa9c;
  --brand-green: #83aa91;
  --brand-mist: #dbe2e8;
  --entity-company-soft: color-mix(in srgb, var(--entity-company) 12%, white);
  --entity-staff-user-soft: color-mix(in srgb, var(--entity-staff-user) 12%, white);
  --entity-domain-soft: color-mix(in srgb, var(--entity-domain) 12%, white);
  --entity-capability-soft: color-mix(in srgb, var(--entity-capability) 12%, white);
  --entity-priority-area-soft: color-mix(in srgb, var(--entity-priority-area) 12%, white);
  --entity-strategy-soft: var(--entity-priority-area-soft);
  --entity-objective-soft: color-mix(in srgb, var(--entity-objective) 12%, white);
  --entity-strategic-outcome-soft: color-mix(in srgb, var(--entity-strategic-outcome) 12%, white);
  --entity-okr-soft: color-mix(in srgb, var(--entity-okr) 12%, white);
  --entity-kpi-soft: color-mix(in srgb, var(--entity-kpi) 12%, white);
  --entity-roadmap-soft: color-mix(in srgb, var(--entity-roadmap) 12%, white);
  --entity-initiative-soft: color-mix(in srgb, var(--entity-initiative) 12%, white);
  --entity-maturity-soft: color-mix(in srgb, var(--entity-maturity) 12%, white);
  --entity-change-soft: color-mix(in srgb, var(--entity-change) 12%, white);
}

[data-entity-type="company"],
[data-entity-type="trial-step"],
[data-entity-type="customer"] {
  --entity-accent: var(--entity-company);
  --entity-soft: var(--entity-company-soft);
}

[data-entity-type="staff-user"],
[data-entity-type="operation"],
[data-entity-type="administrator"] {
  --entity-accent: var(--entity-staff-user);
  --entity-soft: var(--entity-staff-user-soft);
}

[data-entity-type="domain"] {
  --entity-accent: var(--entity-domain);
  --entity-soft: var(--entity-domain-soft);
}

[data-entity-type="capability"] {
  --entity-accent: var(--entity-capability);
  --entity-soft: var(--entity-capability-soft);
}

[data-entity-type="priority-area"] {
  --entity-accent: var(--entity-priority-area);
  --entity-soft: var(--entity-priority-area-soft);
}

[data-entity-type="strategy"] {
  --entity-accent: var(--entity-strategy);
  --entity-soft: var(--entity-strategy-soft);
}

[data-entity-type="objective"] {
  --entity-accent: var(--entity-objective);
  --entity-soft: var(--entity-objective-soft);
}

[data-entity-type="strategic-outcome"] {
  --entity-accent: var(--entity-strategic-outcome);
  --entity-soft: var(--entity-strategic-outcome-soft);
}

[data-entity-type="okr"],
[data-entity-type="key-result"] {
  --entity-accent: var(--entity-okr);
  --entity-soft: var(--entity-okr-soft);
}

[data-entity-type="kpi"],
[data-entity-type="kpi-stage"] {
  --entity-accent: var(--entity-kpi);
  --entity-soft: var(--entity-kpi-soft);
}

[data-entity-type="roadmap"] {
  --entity-accent: var(--entity-roadmap);
  --entity-soft: var(--entity-roadmap-soft);
}

[data-entity-type="initiative"] {
  --entity-accent: var(--entity-initiative);
  --entity-soft: var(--entity-initiative-soft);
}

[data-entity-type="maturity-dimension"],
[data-entity-type="maturity-assessment"] {
  --entity-accent: var(--entity-maturity);
  --entity-soft: var(--entity-maturity-soft);
}

[data-entity-type="change-impact"] {
  --entity-accent: var(--entity-change);
  --entity-soft: var(--entity-change-soft);
}

.entity-card {
  border-color: var(--record-border);
  background: var(--record-surface);
  box-shadow: var(--stravx-shadow-surface);
}

.entity-icon,
.entity-count {
  background: var(--entity-soft);
  color: var(--entity-accent);
}

.domain-reference {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  font-weight: var(--stravx-weight-label);
}

.domain-reference-swatch {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 3px;
  background: var(--domain-colour);
}



/* Page titles receive programmatic focus after navigation for assistive
   technology, but they are not interactive controls and should not display a
   browser focus box. Interactive elements retain the focus treatment above. */
.page-heading-focus-target:focus,
h1[tabindex="-1"]:focus {
  outline: none;
}

.stravx-target {
  min-height: 24px;
  min-width: 24px;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--stravx-primary);
  color: #fff;
  padding: 12px 16px;
  border-radius: var(--stravx-radius-control);
  font-weight: var(--stravx-weight-label);
  text-decoration: none;
}

.skip-link:focus {
  top: 16px;
}

.app-shell {
  min-height: 100vh;
  max-width: 100%;
  min-width: 0;
  background: var(--stravx-paper);
  color: var(--stravx-ink);
}

.brand {
  display: flex;
  align-items: center;
  color: var(--stravx-ink);
  text-decoration: none;
}

.brand-logo {
  display: block;
  height: auto;
}

.brand-logo-full {
  width: 168px;
}

.brand-logo-mark {
  display: none;
  width: 38px;
}

.mobile-nav-toggle {
  display: none;
  border: 1px solid var(--stravx-border);
  border-radius: 8px;
  background: var(--stravx-paper);
  color: var(--stravx-ink);
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 40;
  box-shadow: var(--stravx-shadow-raised);
}

.nav-backdrop {
  display: none;
}

.app-body {
  display: flex;
  min-width: 0;
  max-width: 100%;
  min-height: 100vh;
  padding-left: 256px;
}

.sidebar {
  width: 256px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  background: var(--stravx-surface);
  border-right: 1px solid var(--stravx-border);
  color: var(--stravx-ink);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: 24px 16px 16px;
}

.sidebar-brand {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--stravx-border);
  margin: 0 0 16px;
  padding: 0 8px 24px;
}

.sidebar-brand .brand {
  min-height: 40px;
  border-radius: var(--stravx-radius-control);
  background: var(--stravx-surface);
  justify-content: flex-start;
  padding: 0;
}

.sidebar-brand .brand-logo-full {
  width: 144px;
  margin-inline: 0;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.nav-item {
  min-height: 40px;
  border: 0;
  background: transparent;
  color: var(--stravx-slate-600);
  border-radius: var(--stravx-radius-control);
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  font-size: 13px;
  font-weight: var(--stravx-weight-label);
  text-decoration: none;
}

.nav-item:hover,
.nav-item.active {
  background: var(--stravx-primary-soft);
  color: var(--stravx-link-hover);
}

.nav-item.active {
  box-shadow: inset 2px 0 var(--stravx-primary);
}

.nav-group > summary {
  cursor: pointer;
  list-style: none;
}

.nav-group > summary::-webkit-details-marker,
.sidebar-account summary::-webkit-details-marker {
  display: none;
}

.nav-group.active > summary {
  color: var(--stravx-link-hover);
}

.nav-chevron,
.account-chevron {
  margin-left: auto;
  flex: 0 0 auto;
  transition: transform 0.16s ease;
}

.nav-group[open] .nav-chevron,
.sidebar-account details[open] .account-chevron {
  transform: rotate(180deg);
}

.nav-submenu {
  display: grid;
  gap: 4px;
  padding: 4px 0 8px 16px;
}

.nav-subitem {
  min-height: 40px;
  border: 0;
  border-radius: var(--stravx-radius-control);
  background: transparent;
  color: var(--stravx-slate-500);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.nav-subitem:hover,
.nav-subitem.active {
  background: var(--stravx-primary-soft);
  color: var(--stravx-link-hover);
}

.nav-subitem.active {
  box-shadow: inset 2px 0 var(--stravx-primary);
}

.nav-count-badge {
  margin-left: auto;
  min-width: 24px;
  height: 24px;
  border: 1px solid var(--stravx-border);
  border-radius: 6px;
  background: var(--stravx-primary-soft);
  color: var(--stravx-link-hover);
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  padding: 0 5px;
  font-size: 11px;
  font-weight: var(--stravx-weight-label);
  line-height: 1;
}

.sidebar-account {
  flex: 0 0 auto;
  border-top: 1px solid var(--stravx-border);
  margin-top: 16px;
  padding-top: 16px;
}

.sidebar-account details {
  position: relative;
}

.sidebar-account-summary {
  min-height: 64px;
  border-radius: var(--stravx-radius-control);
  color: var(--stravx-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 8px;
}

.sidebar-account-summary:hover,
.sidebar-account details[open] .sidebar-account-summary {
  background: var(--stravx-muted-surface);
}

.sidebar-account-identity {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}

/* A long name or email wraps rather than being cut off. */
.sidebar-account-identity strong,
.sidebar-account-identity small {
  overflow-wrap: anywhere;
}

.sidebar-account-identity strong {
  color: var(--stravx-ink);
  font-size: 13px;
}

.sidebar-account-identity small {
  color: var(--stravx-slate-500);
  font-size: 11px;
}

.account-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 2;
  display: grid;
  gap: 4px;
  border: 1px solid var(--stravx-border);
  border-radius: var(--stravx-radius-control);
  background: var(--stravx-surface);
  box-shadow: var(--stravx-shadow-raised);
  padding: 8px;
}

.account-menu-item {
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--stravx-ink);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.account-menu-item:hover {
  background: var(--stravx-muted-surface);
}

.main-content {
  width: 100%;
  max-width: 1600px;
  min-width: 0;
  margin: 0 auto;
  padding: 32px 40px 64px;
  overflow-wrap: anywhere;
}

/* Staff pages use the same shell inset as customer workspaces. */
.main-content > #staff-content {
  max-width: none;
  margin: 0;
  padding: 0;
}

.page-intro {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
}

.eyebrow {
  color: var(--stravx-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
  font-weight: var(--stravx-weight-label);
  margin: 0;
}

.page-intro h1 {
  @apply text-2xl font-bold tracking-tight;
  line-height: 1.3333;
  margin: 4px 0 8px;
}

.page-intro p {
  max-width: 670px;
  font-size: 14px;
  color: var(--stravx-text-muted);
  line-height: 1.625;
  margin: 0;
}

.panel {
  @apply rounded-lg border border-slate-200/60 bg-surface;
  box-shadow: var(--stravx-shadow-surface);
}

/* Resting depth belongs to static application surfaces. Controls remain flat;
   menus and dialogs retain their separate, stronger elevation where specified. */
:where(
  .record-card,
  .record-group,
  .entity-card,
  .home-todo-panel,
  .home-scale-panel,
  .home-view-link,
  .core-workspace-hero,
  .core-collection-panel,
  .onboarding-form,
  .onboarding-confirmation
) {
  box-shadow: var(--stravx-shadow-surface);
}

.app-shell :where(article, aside, details, div, form, main, section)[class*="rounded"][class*="border"][class*="bg-white"] {
  box-shadow: var(--stravx-shadow-surface);
}

@media print {
  @page {
    size: auto;
    margin: 14mm;
  }

  *,
  *::before,
  *::after {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  html,
  body,
  .app-shell {
    background: var(--stravx-surface) !important;
    color: #000 !important;
  }

  .sidebar,
  .nav-backdrop,
  .skip-link,
  .print-hidden,
  dialog,
  button {
    display: none !important;
  }

  .app-body,
  .main-content {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .page-intro,
  .panel,
  section,
  article,
  tr,
  svg {
    break-inside: avoid;
  }

  .panel {
    border-color: #bbb;
    box-shadow: none !important;
  }

  .app-shell {
    --stravx-shadow-surface: none;
    --stravx-shadow-raised: none;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  input,
  select,
  textarea {
    border-color: #aaa !important;
    background: var(--stravx-surface) !important;
  }
}

.queue-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.queue-row {
  width: 100%;
  min-height: 58px;
  border: 1px solid var(--stravx-border);
  border-radius: var(--stravx-radius-control);
  background: var(--stravx-surface);
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 9px 13px 9px 0;
  color: var(--stravx-ink);
  text-align: left;
  text-decoration: none;
}

.queue-row:hover {
  border-color: var(--stravx-primary);
}

.queue-row-accent {
  align-self: stretch;
  width: 4px;
  background: var(--stravx-primary);
  border-radius: 0 5px 5px 0;
  flex-shrink: 0;
}

.semantic-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: var(--stravx-weight-label);
  line-height: 18px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 8px;
  white-space: nowrap;
}

.semantic-chip > svg { flex-shrink: 0; }
.semantic-chip:is(summary) { display: list-item; list-style-position: inside; width: fit-content; }
/* Native buttons, links and summaries retain their own semantics and handlers. */
.semantic-chip-action { justify-content: center; min-height: 32px; border-color: var(--stravx-border); background: var(--stravx-surface); cursor: pointer; }
.semantic-chip.needs-action { border: 2px solid currentColor; background: color-mix(in srgb, currentColor 10%, var(--stravx-surface)); }
/* Spatial Transit cards have a fixed 14px badge slot below their name. */
.semantic-chip-compact { padding: 0 6px; font-size: 10px; line-height: 12px; }
/* Owner-approved 11px Needs/Enables controls in Portfolio rows. */
.semantic-chip-direction { padding: 2px 5px; font-size: 11px; gap: 3px; }
@media (pointer: coarse) { .semantic-chip-action { min-width: 44px; min-height: 44px; } }
@media (forced-colors: active) {
  .semantic-chip { border-color: CanvasText; }
  .semantic-chip.needs-action { border-style: double; }
}

.semantic-chip-ink {
  color: #475569;
  background: #f1f5f9;
}

.semantic-chip-success {
  color: var(--rag-green-ink);
  background: #dcfce7;
}

.semantic-chip-warning {
  color: var(--rag-amber-ink);
  background: #fef3c7;
}

.semantic-chip-danger {
  color: var(--rag-red-ink);
  background: #fee2e2;
}

.status-banner {
  border-radius: var(--stravx-radius-control);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  font-size: 13px;
}

.status-banner-info {
  background: #eef0f8;
  color: var(--stravx-link-hover);
}

.status-banner-success {
  background: #edf4ef;
  color: var(--stravx-success);
}

.status-banner-warning {
  background: #faf5e9;
  color: var(--stravx-warning);
}

.status-banner-danger {
  background: #faf0f1;
  color: var(--stravx-danger);
}

.data-table {
  width: 100%;
  table-layout: fixed;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th {
  @apply border-b border-slate-200/60 bg-slate-50 px-4 py-3 text-left text-xs font-semibold text-slate-500;
}

.data-table td {
  @apply border-b border-slate-200/60 px-4 py-3 text-slate-900;
  overflow-wrap: anywhere;
}

.org-switcher,
.user-chip {
  border: 1px solid var(--stravx-border);
  background: var(--stravx-paper);
  color: var(--stravx-ink);
  min-height: 40px;
  max-width: 16rem;
  min-width: 0;
  padding: 0 14px;
  border-radius: var(--stravx-radius-control);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: var(--stravx-weight-label);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  aspect-ratio: 1;
  flex: 0 0 44px;
  border-radius: 8px;
  background: var(--stravx-primary-soft);
  color: var(--stravx-link-hover);
  font-size: 13px;
  font-weight: var(--stravx-weight-label);
  border: 0;
  display: grid;
  place-items: center;
  text-decoration: none;
  overflow: hidden;
}

.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-avatar > span { font-size: 23px; line-height: 1; }

@media (max-width: 899px) {
  :root {
    --stravx-content-inset: 0px;
  }
  .app-body {
    padding-left: 0;
    min-height: 100vh;
  }

  .mobile-nav-toggle {
    display: inline-grid;
  }

  .brand .brand-logo-full {
    display: none;
  }

  .brand .brand-logo-mark {
    display: block;
  }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgb(24 13 36 / 0.45);
    z-index: 25;
  }

  .sidebar {
    position: fixed;
    height: auto;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 30;
    transform: translateX(-100%);
  }

  .sidebar:not(.open) {
    width: 0;
    padding: 0;
    overflow: hidden;
    transform: none;
    visibility: hidden;
  }

  .sidebar.open,
  .app-body.menu-visible .sidebar {
    width: min(256px, 86vw);
    padding: 14px 14px 18px;
    transform: none;
    visibility: visible;
  }

  .main-content {
    padding: 72px 16px 48px;
  }

  .page-intro {
    flex-direction: column;
    align-items: flex-start;
  }

  .sidebar-brand {
    padding-right: 52px;
  }

  .sidebar-brand .brand {
    min-height: 48px;
    justify-content: center;
  }

  .mobile-nav-toggle[aria-expanded="true"] {
    left: calc(min(256px, 86vw) - 54px);
    border-color: rgb(255 255 255 / 0.2);
    background: var(--stravx-ink-muted);
    color: var(--stravx-paper);
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .queue-row,
  .nav-item {
    transition: none !important;
  }

  .nav-chevron,
  .account-chevron {
    transition: none !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sidebar {
    transition: transform 0.2s ease;
  }
}

.data-table :is(th, td)[data-align="right"] { text-align: right; font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .nav-item, .nav-subitem, .account-menu-item { min-height: 44px; } }

/* Headings that use the Tailwind semibold utility stay at the title weight; semibold elsewhere is a label weight. */
:is(h1, h2, h3, h4).font-semibold { font-weight: var(--stravx-weight-title); }

:root {
  --stravx-surface: #fff;
  --stravx-link: var(--stravx-primary);
  --stravx-link-hover: var(--stravx-primary-hover);
}

/* Filled actions and record identity bands keep their white-label contrast.
   Reading ink and neutral surfaces adapt independently. */
:root[data-appearance="dark"] {
  color-scheme: dark;
  /* Colour refresh, 1 October 2026: dark has its own tuned palette, not an inversion of light. */
  --stravx-surface: #152031;
  --stravx-paper: #0d1420;
  --stravx-muted-surface: #1b2940;
  --stravx-border: #2b3b53;
  --stravx-ink: #e8edf4;
  --stravx-ink-muted: #c6d1df;
  --stravx-text-muted: #a3b3c7;
  --stravx-primary: #2563eb;
  --stravx-primary-hover: #1d4ed8;
  --stravx-primary-soft: #1b2f52;
  --stravx-link: #8fbaff;
  --stravx-link-hover: #b3d0ff;
  --stravx-focus: #8fbaff;
  --stravx-success: #4ade80;
  --stravx-warning: #fbbf24;
  --stravx-danger: #f87171;
  --stravx-shadow-surface: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 18px rgb(0 0 0 / 0.25);
  --stravx-shadow-raised: 0 1px 3px rgb(0 0 0 / 0.5), 0 10px 28px rgb(0 0 0 / 0.3);
  --rag-green: #4ade80;
  --rag-green-soft: #12341f;
  --rag-green-ink: #bbf7d0;
  --rag-amber: #fbbf24;
  --rag-amber-soft: #3a2a08;
  --rag-amber-ink: #fde68a;
  --rag-red: #f87171;
  --rag-red-soft: #3d1515;
  --rag-red-ink: #fecaca;
  --rag-none: #64748b;
  --impact-1: #14532d;
  --impact-2: #4ade80;
  --impact-3: #fbbf24;
  --impact-4: #f87171;
  --impact-5: #dc2626;
  --impact-ink-1: #dcfce7;
  --impact-ink-2: #052e16;
  --impact-ink-3: #1c1003;
  --impact-ink-4: #1f0606;
  --impact-ink-5: #ffffff;
  --insight-waits-ink: #f9a8d4;
  --entity-company: #94a3b8;
  --entity-staff-user: #a78bfa;
  --entity-domain: #94a3b8;
  --entity-capability: #a3b1c4;
  --entity-priority-area: #a78bfa;
  --entity-objective: #e879f9;
  --entity-strategic-outcome: #f0abfc;
  --entity-okr: #818cf8;
  --entity-kpi: #22d3ee;
  --prio-value: #f2c14e;
  --prio-effort: #b39cf5;
  --prio-harm: #fb7c92;
  --entity-roadmap: #a3b1c4;
  --entity-initiative: #2dd4bf;
  --entity-maturity: #d4a373;
  --entity-change: #f472b6;
  --place-home: #f1aa9c;
  --place-organisation: #83c5a0;
  --place-insights: #fbbf24;
  --place-on: #0f172a;
  --record-surface: var(--stravx-surface);
  --record-group-surface: #172336;
  --record-border: var(--stravx-border);
  --record-text: var(--stravx-ink);
  --record-muted: var(--stravx-text-muted);
  --stravx-slate-50: #101722;
  --stravx-slate-100: #202d40;
  --stravx-slate-200: #43536a;
  --stravx-slate-300: #63748c;
  --stravx-slate-400: #94a3b8;
  --stravx-slate-500: #b1bdcf;
  --stravx-slate-600: #c6d1e1;
  --stravx-slate-700: #d6dfec;
  --stravx-slate-800: #e3eaf4;
  --stravx-slate-900: #eef2f8;
  --stravx-slate-950: #f8fafc;
  --rag-red-line: color-mix(in srgb, var(--rag-red) 45%, var(--stravx-surface));
  --rag-amber-line: color-mix(in srgb, var(--rag-amber) 45%, var(--stravx-surface));
  --rag-green-line: color-mix(in srgb, var(--rag-green) 45%, var(--stravx-surface));
  --stravx-primary-line: color-mix(in srgb, var(--stravx-primary) 55%, var(--stravx-surface));
  --connection-alignment: #73c8ce;
  --connection-classification: #b8adbd;
  --connection-dependency: #c4b5fd;
  --connection-risk: var(--rag-red);
  --connection-shared: #d3c3e1;
}

/* Retained utility consumers include forms, menus and dialog surfaces. */
@utility bg-surface { background-color: var(--stravx-surface); }
.bg-white { background-color: var(--stravx-surface); }
.bg-white\/80 { background-color: color-mix(in srgb, var(--stravx-surface) 80%, transparent); }
.bg-white\/90 { background-color: color-mix(in srgb, var(--stravx-surface) 90%, transparent); }
.text-primary { color: var(--stravx-link); }
.text-primary-hover { color: var(--stravx-link-hover); }
.bg-slate-900 { background-color: #0f172a; }
.hover\:bg-slate-800:hover { background-color: #1e293b; }
.bg-ink.text-white { background-color: #0f172a; }
.bg-ink\/70 { background-color: rgb(15 23 42 / .7); }
.bg-ink\/45 { background-color: rgb(15 23 42 / .45); }
.bg-danger { background-color: #c81e1e; }
.hover\:bg-danger\/90:hover { background-color: rgb(200 30 30 / .9); }

:root[data-appearance="dark"] .record-group {
  --stravx-text-muted: #b1bdcf;
  --record-muted: #b1bdcf;
}
:root[data-appearance="dark"] .core-workspace-link.is-active {
  background: var(--stravx-muted-surface);
  color: var(--stravx-link);
}
:root[data-appearance="dark"] :is(.entity-icon, .entity-count) {
  background: color-mix(in srgb, var(--entity-accent) 25%, var(--stravx-surface));
  color: color-mix(in srgb, var(--entity-accent) 30%, white);
}
:root[data-appearance="dark"] .record-subgroup .record-subgroup-heading > .record-identity {
  color: color-mix(in srgb, var(--entity-accent) 30%, white);
}
:root[data-appearance="dark"] .home-scale-stat .home-scale-icon { color: color-mix(in srgb, var(--entity-accent) 30%, white); }
:root[data-appearance="dark"] .record-reference .record-type-icon { color: #acd4d8; }
:root[data-appearance="dark"] :is(.semantic-chip-success, .status-banner-success) { background: var(--rag-green-soft); }
:root[data-appearance="dark"] :is(.semantic-chip-warning, .status-banner-warning) { background: var(--rag-amber-soft); }
:root[data-appearance="dark"] :is(.semantic-chip-danger, .status-banner-danger) { background: var(--rag-red-soft); }
:root[data-appearance="dark"] .semantic-chip-ink { color: var(--stravx-ink-muted); background: var(--stravx-muted-surface); }
:root[data-appearance="dark"] .status-banner-info { background: var(--stravx-primary-soft); }
:root[data-appearance="dark"] :is(.connections-levels button[aria-pressed="true"], .onboarding-section-heading > span) { background: var(--stravx-primary); }
:root[data-appearance="dark"] .onboarding-story { background: #1c2940; color: #eef2f8; }
:root[data-appearance="dark"] :is(.onboarding-lede, .onboarding-includes span, .onboarding-trust-note) { color: #d6dfec; }
:root[data-appearance="dark"] .onboarding-domain-card { background: var(--stravx-muted-surface); border-color: var(--stravx-border); }
:root[data-appearance="dark"] .onboarding-capabilities { border-color: var(--stravx-border); }
:root[data-appearance="dark"] .onboarding-security-check { background: #22383e; border-color: #6b969e; }
:root[data-appearance="dark"] .onboarding-section-heading > span { color: #fff; }
:root[data-appearance="dark"] .transit-map-viewport { background: var(--stravx-surface); }
:root[data-appearance="dark"] .transit-filter-option.is-selected { background: var(--stravx-primary-soft); }
:root[data-appearance="dark"] :is(.transit-status-density, .portfolio-heat-table small) { color: var(--stravx-warning); }
:root[data-appearance="dark"] .transit-status-density--hard { background: #3b3122; border-color: #94794c; color: #ebca8d; }
:root[data-appearance="dark"] .connections-node-actions :is(button, a):hover { background: var(--stravx-muted-surface); }
:root[data-appearance="dark"] .connections-legend-line { border-top-color: var(--connection-alignment); }
:root[data-appearance="dark"] .connections-legend-line.is-classification { border-top-color: var(--connection-classification); }
:root[data-appearance="dark"] .connections-legend-line.is-dependency { border-top-color: var(--connection-dependency); }
:root[data-appearance="dark"] .connections-legend-line.is-at-risk { border-top-color: var(--connection-risk); }
:root[data-appearance="dark"] .connections-legend-line.is-shared { border-top-color: var(--connection-shared); }
:root[data-appearance="dark"] :is(.record-status--draft, .record-status--active) { background: var(--stravx-muted-surface); border-color: var(--record-border); color: var(--stravx-ink); }
:root[data-appearance="dark"] .record-status--complete { background: var(--rag-green-soft); border-color: transparent; color: var(--rag-green-ink); }
:root[data-appearance="dark"] .record-status--risk { background: var(--rag-amber-soft); border-color: transparent; color: var(--rag-amber-ink); }
:root[data-appearance="dark"] :is(.record-status--archived, .record-status--unknown) { background: transparent; border-color: var(--rag-none); color: var(--record-muted); }
:root[data-appearance="dark"] select:not([multiple]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23c6d1e1' stroke-width='1.5'/%3E%3C/svg%3E");
}

.appearance-switch-track { display: flex; align-items: center; width: 32px; height: 20px; margin-left: auto; padding: 2px; border: 1px solid var(--stravx-text-muted); border-radius: 20px; background: var(--stravx-muted-surface); }
.appearance-switch-track > span { width: 14px; height: 14px; border-radius: 50%; background: var(--stravx-text-muted); }
.appearance-switch[aria-checked="true"] .appearance-switch-track { background: var(--stravx-primary); border-color: var(--stravx-focus); }
.appearance-switch[aria-checked="true"] .appearance-switch-track > span { margin-left: auto; background: #fff; }
@media (prefers-contrast: more) {
  :root { --stravx-border: #475569; --stravx-text-muted: #334155; }
  :root[data-appearance="dark"] { --stravx-border: #9aabc2; --stravx-text-muted: #d6dfec; }
  :root :is(button, a, summary, input, select, textarea, [tabindex="0"], .stravx-focus):focus-visible { outline-width: 3px; }
}
@media (prefers-reduced-transparency: reduce) {
  .bg-white\/80, .bg-white\/90 { background-color: var(--stravx-surface); }
}
@media (forced-colors: active) {
  :root[data-appearance="dark"] select:not([multiple]) { background-image: none; }
  .appearance-switch-track, .appearance-switch-track > span { forced-color-adjust: none; border-color: ButtonText; background: Canvas; }
  .appearance-switch-track > span { background: ButtonText; }
}

/* Business area colours are chosen per organisation; on dark surfaces their edge is lifted so it stays visible. */
:root[data-appearance="dark"] :is([data-entity-type], .record-card, .record-group) {
  --entity-edge: color-mix(in srgb, var(--entity-accent, var(--record-border)) 82%, white);
  /* Type names on a saved Business area colour stay at 4.5:1 on the dark chip. */
  --entity-ink: color-mix(in srgb, var(--entity-accent, var(--stravx-text-muted)) 55%, var(--record-text));
}

/* Soft record-type tints sit on the dark surface, not on white. */
:root[data-appearance="dark"] {
  --entity-company-soft: color-mix(in srgb, var(--entity-company) 18%, var(--stravx-surface));
  --entity-staff-user-soft: color-mix(in srgb, var(--entity-staff-user) 18%, var(--stravx-surface));
  --entity-domain-soft: color-mix(in srgb, var(--entity-domain) 18%, var(--stravx-surface));
  --entity-capability-soft: color-mix(in srgb, var(--entity-capability) 18%, var(--stravx-surface));
  --entity-priority-area-soft: color-mix(in srgb, var(--entity-priority-area) 18%, var(--stravx-surface));
  --entity-objective-soft: color-mix(in srgb, var(--entity-objective) 18%, var(--stravx-surface));
  --entity-strategic-outcome-soft: color-mix(in srgb, var(--entity-strategic-outcome) 18%, var(--stravx-surface));
  --entity-okr-soft: color-mix(in srgb, var(--entity-okr) 18%, var(--stravx-surface));
  --entity-kpi-soft: color-mix(in srgb, var(--entity-kpi) 18%, var(--stravx-surface));
  --entity-roadmap-soft: color-mix(in srgb, var(--entity-roadmap) 18%, var(--stravx-surface));
  --entity-initiative-soft: color-mix(in srgb, var(--entity-initiative) 18%, var(--stravx-surface));
  --entity-maturity-soft: color-mix(in srgb, var(--entity-maturity) 18%, var(--stravx-surface));
  --entity-change-soft: color-mix(in srgb, var(--entity-change) 18%, var(--stravx-surface));
  --entity-strategy-soft: var(--entity-priority-area-soft);
}

/* Selected items and links on dark surfaces use the lighter link blue so they keep 4.5:1. */
:root[data-appearance="dark"] :is(.explorer-view[aria-current="true"], .explorer-segmented button[aria-pressed="true"]) { color: var(--stravx-link); }
:root[data-appearance="dark"] .initiative-capture .capture-text-action { color: var(--stravx-ink); }

:root {
  --record-border: #e8edf2;
  --record-group-surface: #fbfcfd;
  --record-surface: #fff;
  --record-text: #182438;
  --record-muted: #5b6b80;
  --record-radius: 12px;
  --record-spine: 32px;
  --record-group-spine: 44px;
}

/* Record identity is a thin coloured edge and a soft chip, not a dark band (colour refresh, 1 October 2026). The chip
   and ink are mixed from the accent, so a Business area colour set on the card works the same way. */
[data-entity-type], .record-card, .record-group {
  --entity-edge: var(--entity-accent, var(--record-border));
  --entity-chip: color-mix(in srgb, var(--entity-accent, var(--stravx-text-muted)) 13%, var(--record-surface));
  --entity-ink: color-mix(in srgb, var(--entity-accent, var(--stravx-text-muted)) 68%, var(--record-text));
}
.record-card, .record-group {
  min-width: 0;
  overflow: clip;
  border: 1px solid var(--record-border);
  border-top: 3px solid var(--entity-edge);
  border-radius: var(--record-radius);
  color: var(--record-text);
  background: var(--record-surface);
  box-shadow: var(--stravx-shadow-surface);
  font-family: var(--stravx-font-sans);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 450;
}
.record-card { display: flex; flex-direction: column; }
.record-identity {
  display: flex;
  min-width: 0;
  min-height: 40px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 24px 0;
  background: transparent;
  color: var(--entity-ink);
  font-size: 12px;
  line-height: 18px;
  font-weight: var(--stravx-weight-label);
  text-transform: none;
  letter-spacing: normal;
}
.record-type-icon { flex: 0 0 auto; }
.record-type-name { overflow-wrap: anywhere; }
.record-identity > .record-type-name, .record-group-label > .record-type-name {
  padding: 1px 9px; border-radius: 999px; background: var(--entity-chip); color: var(--entity-ink); line-height: 18px;
}
/* A strip identity adds no bar: the card's own 3px top edge carries the colour (owner decision, 1 October 2026). */
.record-identity--strip { display: none; }
.record-identifier { color: var(--record-muted); }
.record-identifier { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; margin-left: auto; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.record-body { display: flex; flex-direction: column; min-width: 0; padding: 12px 24px 24px; flex: 1; }
.record-title { color: var(--record-text); font-size: 16px; line-height: 24px; letter-spacing: -0.025em; font-weight: var(--stravx-weight-title); overflow-wrap: anywhere; text-align: left; }
.record-title-link { text-decoration: underline; text-underline-offset: 3px; }
.record-title-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.record-reference { display: inline-flex; align-items: baseline; gap: 6px; color: var(--record-text); font-size: 12px; font-weight: var(--stravx-weight-label); text-decoration: underline; text-underline-offset: 3px; }
.record-reference .record-type-icon { align-self: center; color: var(--entity-initiative); }
.record-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 16px; }
.record-body > .record-actions { margin-top: 12px; padding-top: 0; }
.record-actions :is(button, a), .record-group-actions :is(button, a) { min-width: 40px; min-height: 40px; }
.record-card :is(button, a):disabled { cursor: not-allowed; }
.record-card .domain-reference { color: var(--record-muted); }
.record-children { margin-top: 16px; border-top: 1px solid var(--record-border); }
.record-child { padding: 12px 0; font-size: 14px; border-bottom: 1px solid var(--record-border); }
.record-child:last-child { border-bottom: 0; padding-bottom: 0; }
.record-summary { min-width: 0; padding: 24px; border: 1px solid var(--record-border); border-radius: var(--record-radius); background: var(--record-surface); }
.record-group {
  /* Slate-500 is for white/Slate-50; darker secondary ink keeps 4.5:1 on groups. */
  --stravx-text-muted: #475569;
  --record-muted: #475569;
  --stravx-slate-500: var(--stravx-text-muted);
  background: var(--record-group-surface);
}
.record-group-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 24px 4px; background: transparent; color: var(--record-text); }
.record-group-header > .record-type-icon { color: var(--entity-ink); }
.record-group-label { display: flex; flex: 1; min-width: 0; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.record-group-label > .record-type-name { font-size: 12px; line-height: 18px; font-weight: var(--stravx-weight-label); }
.record-group-title { min-width: 0; flex: 1 1 180px; font-size: 16px; line-height: 24px; font-weight: var(--stravx-weight-title); overflow-wrap: anywhere; }
.record-group-count { font-size: 12px; border: 1px solid var(--record-border); border-radius: 999px; padding: 1px 8px; color: var(--record-muted); }
.record-group-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.record-group-body { min-width: 0; padding: 16px 24px 24px; }
.coverage-group-body { background: var(--record-surface); }
.record-subgroup + .record-subgroup { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--record-border); }
.record-subgroup .record-subgroup-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.record-subgroup-heading > .record-identity { padding: 0; background: transparent; color: var(--entity-ink); }
.record-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; gap: 24px; }
.record-card--compact .record-identity { padding: 10px 12px 0; min-height: 0; }
.record-card--compact .record-body { padding: 8px 12px 12px; }
.record-card--compact .record-title { font-size: 14px; line-height: 20px; }
/* Spatial cards retain their vertical type band, including on narrow screens.
   The canvas pans/zooms; record text and actions never rotate. */
.record-card--vertical { display: grid; grid-template-columns: var(--record-spine) minmax(0, 1fr); border-top-width: 1px; border-left: 3px solid var(--entity-edge); }
.record-card--vertical > .record-identity { display: grid; grid-template-rows: 28px minmax(0, 1fr) 28px; justify-items: center; padding: 4px 0; gap: 0; background: var(--entity-chip); }
.record-card--vertical > .record-identity > .record-type-name { padding: 0; background: transparent; }
.record-card--vertical > .record-identity > .record-type-icon { grid-row: 1; }
.record-card--vertical > .record-identity > .record-type-name { grid-row: 2; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; text-align: center; }
.record-card.is-selected { outline: 2px solid var(--stravx-focus); outline-offset: 3px; }
.record-selection { color: var(--stravx-link-hover); font-size: 12px; font-weight: var(--stravx-weight-label); }
.record-status { width: fit-content; flex: 0 0 auto; }
.record-status--draft, .record-status--active { background: var(--stravx-muted-surface); border-color: var(--record-border); color: var(--stravx-ink-muted); }
.record-status--complete { background: var(--rag-green-soft); border-color: transparent; color: var(--rag-green-ink); }
.record-status--risk { background: var(--rag-amber-soft); border-color: transparent; color: var(--rag-amber-ink); }
.record-status--off { background: var(--rag-red-soft); border-color: transparent; color: var(--rag-red-ink); }
.record-status--archived, .record-status--unknown { background: transparent; border: 1px dashed var(--rag-none); color: var(--record-muted); }
@media (min-width: 900px) {
  .record-group--vertical { display: grid; grid-template-columns: var(--record-group-spine) minmax(0, 1fr); }
  .record-group--vertical { border-top-width: 1px; border-left: 3px solid var(--entity-edge); }
  .record-group-header--vertical { display: grid; grid-template-rows: 28px minmax(0, 1fr) 28px; justify-items: center; padding: 8px 4px; gap: 0; background: var(--entity-chip); }
  .record-group-header--vertical .record-type-name { padding: 0; background: transparent; }
  .record-group-header--vertical > .record-type-icon { grid-row: 1; }
  .record-group-header--vertical > .record-group-label { grid-row: 2; min-height: 0; height: 100%; flex-wrap: nowrap; justify-content: center; gap: 2px; }
  .record-group-header--vertical .record-type-name { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; line-height: 14px; }
  .record-group-header--vertical .record-group-title { flex: 0 1 auto; max-height: 100%; overflow: hidden; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; text-overflow: ellipsis; font-size: 13px; line-height: 18px; }
  .record-group-header--vertical > .record-group-count { grid-row: 3; padding: 1px 6px; }
}
/* Timeline headings remain vertical inside their horizontally scrolling map. */
.record-group-header--spatial { display: grid; grid-template-rows: 28px minmax(0, 1fr) 28px; justify-items: center; padding: 8px 4px; gap: 0; background: var(--entity-chip); }
.record-group-header--spatial .record-type-name { padding: 0; background: transparent; }
.record-group-header--spatial > .record-type-icon { grid-row: 1; }
.record-group-header--spatial > .record-group-label { grid-row: 2; min-height: 0; height: 100%; flex-wrap: nowrap; justify-content: center; gap: 2px; }
.record-group-header--spatial .record-type-name { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; line-height: 14px; }
.record-group-header--spatial .record-group-title { flex: 0 1 auto; max-height: 100%; overflow: hidden; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; text-overflow: ellipsis; font-size: 13px; line-height: 18px; }
.record-group-header--spatial > .record-group-count { grid-row: 3; padding: 1px 6px; }
@media (pointer: coarse) {
  .record-actions :is(button, a), .record-group-actions :is(button, a) { min-width: 44px; min-height: 44px; }
}
@media (forced-colors: active) {
  .record-card, .record-group, .record-identity, .record-group-header, .record-status {
    background: Canvas; color: CanvasText; border-color: CanvasText;
  }
  .record-identity { border-bottom: 1px solid CanvasText; }
  .record-card--vertical > .record-identity { border-bottom: 0; border-right: 1px solid CanvasText; }
  .record-card.is-selected { outline-color: Highlight; }
}
@media print {
  .record-identity, .record-group-header, .record-status { print-color-adjust: exact; }
  .record-card { break-inside: avoid; }
}

.record-title-link:hover, .record-reference:hover { color: var(--stravx-link-hover); }
.initiative-domain-group > tr > :first-child {
  border-left: 0.45rem solid var(--initiative-domain-colour);
}
@media (max-width: 639px) {
  .record-group-body { padding: 16px; }
  .record-identity, .record-group-header { padding-inline: 16px; }
  .record-body { padding-inline: 16px; }
  .record-card--vertical > .record-identity { padding-inline: 0; }
}

/* RAG badge: recorded or rule-calculated status, always a glyph and a word. Hollow and dashed means nothing recorded. */
.rag-badge { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 2px 9px 2px 5px; border-radius: 6px; font-size: 12px; line-height: 18px; font-weight: var(--stravx-weight-label); white-space: nowrap; }
/* Status marks are rounded squares across the tool, matching the squares on the Strategy pictures (owner page review, 3 October 2026). */
.rag-badge-glyph { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; font-size: 11px; line-height: 1; font-weight: var(--stravx-weight-title); color: var(--record-surface); }
.rag-badge--green { background: var(--rag-green-soft); color: var(--rag-green-ink); }
.rag-badge--green .rag-badge-glyph { background: var(--rag-green); }
.rag-badge--amber { background: var(--rag-amber-soft); color: var(--rag-amber-ink); }
.rag-badge--amber .rag-badge-glyph { background: var(--rag-amber); }
.rag-badge--red { background: var(--rag-red-soft); color: var(--rag-red-ink); }
.rag-badge--red .rag-badge-glyph { background: var(--rag-red); }
.rag-badge--none { background: transparent; color: var(--record-muted); box-shadow: inset 0 0 0 1.5px var(--rag-none); }
.rag-badge--none .rag-badge-glyph { border: 1.5px dashed var(--rag-none); }
@media (forced-colors: active) { .rag-badge { border: 1px solid CanvasText; } }