@import url("fonts.css");
@import url("styles.css");
@import url("primitives.css");

:root {
  color-scheme: light dark;
  /* All --v2-* tokens are now thin aliases onto the canonical Lugn source
     (defined in styles.css, imported above). Single source of truth: change a
     value once in styles.css and both the tenant app and owner console follow. */
  --v2-bg: var(--lugn-canvas);
  --v2-ink: var(--lugn-ink);
  --v2-muted: var(--lugn-muted);
  --v2-soft: var(--lugn-sunken);
  --v2-line: var(--lugn-hairline);
  --v2-line-strong: var(--lugn-border-strong);
  --v2-accent: var(--lugn-action);
  --v2-accent-strong: var(--lugn-action-strong);
  --v2-success: var(--lugn-success-fg);
  --v2-ok: var(--lugn-success-fg);
  --v2-warning: var(--lugn-warning-fg);
  --v2-warn: var(--lugn-warning-fg);
  --v2-danger: var(--lugn-danger-fg);
  --v2-radius: var(--lugn-radius);
  --v2-radius-sm: var(--lugn-radius-sm);
  --v2-shadow: none;
  --v2-font: var(--lugn-font-sans);
  --v2-font-mono: var(--lugn-font-mono);
  /* Shell frame dimensions — aliases onto the canonical --shell-* tokens
     (styles.css). The two-level nav frame consumes these; both shells resolve
     them since v2.css @imports styles.css. */
  --v2-shell-rail-w: var(--shell-rail-w);
  --v2-shell-rail-item: var(--shell-rail-item);
  --v2-shell-pane-w: var(--shell-pane-w);
  --v2-shell-pane-w-compact: var(--shell-pane-w-compact);
  --v2-shell-header-h: var(--shell-header-h);
  --v2-shell-nav-row: var(--shell-nav-row);
}

* {
  box-sizing: border-box;
}

/* Hidden inline SVG symbol sprite (rail icons). A class (not an inline style
   attribute) keeps it out of the document flow without tripping the strict
   style-src 'self' CSP. */
.icon-sprite {
  display: none;
}

html {
  min-width: 320px;
  background: var(--lugn-surface);
}

body.v2-shell {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
}

body.v2-shell [hidden] {
  display: none !important;
}

body.v2-shell button,
body.v2-shell input,
body.v2-shell select,
body.v2-shell textarea {
  font: inherit;
}

body.v2-shell button {
  letter-spacing: 0;
}

body.v2-shell h1,
body.v2-shell h2,
body.v2-shell h3,
body.v2-shell p {
  margin: 0;
}

body.v2-shell a {
  color: inherit;
  text-decoration: none;
}

body.v2-shell .app-shell {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  min-height: 100vh;
}

body.v2-shell.is-public-landing .app-shell {
  grid-template-columns: minmax(0, 1fr);
}

body.v2-shell.is-public-landing .sidebar,
body.v2-shell.is-public-landing .primary-rail,
body.v2-shell.is-public-landing .secondary-pane {
  display: none;
}

body.v2-shell.is-public-landing .app-only-panel {
  display: none !important;
}

body.v2-shell:not(.is-public-landing) .public-only-section,
body.v2-shell:not(.is-public-landing) .landing-nav {
  display: none !important;
}

/* ============================================================
   Two-level navigation shell — authenticated frame.
   A = primary icon rail (52px), B = contextual secondary pane
   (232px), C = dominant workspace with a FIXED header and a
   single scrolling working surface. The locked-frame geometry
   (height:100dvh + overflow:hidden) lives in the signed-in
   :not(.is-public-landing) block further down so signed-out /
   auth / onboarding keep normal document scrolling. The rules
   here are the component styles, scoped so the public landing
   hides the rail/pane entirely (see is-public-landing above).
   ALL colours resolve through Lugn/--v2 tokens (conformance
   budget untouched); icons are local currentColor SVG.
   ============================================================ */

/* A — primary icon rail */
body.v2-shell .primary-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lugn-space-3);
  width: var(--v2-shell-rail-w);
  min-width: 0;
  padding: var(--lugn-space-3) 0;
  border-right: 1px solid var(--v2-line);
  background: var(--lugn-surface);
  overflow: visible;
}

body.v2-shell .rail-brand {
  display: grid;
  place-items: center;
  width: var(--v2-shell-rail-item);
  height: var(--v2-shell-rail-item);
  flex: 0 0 auto;
  border-radius: var(--v2-radius);
  background: var(--lugn-inverse-surface);
  color: var(--lugn-inverse-ink);
}

body.v2-shell .rail-brand-mark {
  font-size: 15px;
  font-weight: var(--lugn-weight-semibold);
  line-height: 1;
}

/* The tenant name is kept (id preserved for the settings smoke) but visually
   folded into the rail brand as a tooltip-only label — the rail is icon-only. */
body.v2-shell .rail-brand-name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body.v2-shell .rail-sections {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lugn-space-2);
  width: 100%;
}

body.v2-shell .rail-item {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--v2-shell-rail-item);
  height: var(--v2-shell-rail-item);
  border: 1px solid transparent;
  border-radius: var(--v2-radius);
  background: transparent;
  color: var(--v2-muted);
  cursor: pointer;
}

body.v2-shell .rail-item:hover,
body.v2-shell .rail-item:focus-visible,
body.v2-shell .rail-item[aria-current="true"] {
  border-color: var(--v2-line);
  background: var(--lugn-surface);
  color: var(--v2-ink);
}

/* Active section accent — a left edge bar (in-flow, no layout shift). */
body.v2-shell .rail-item[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--lugn-space-3));
  top: 50%;
  width: 3px;
  height: 20px;
  transform: translateY(-50%);
  border-radius: var(--lugn-radius-pill);
  background: var(--v2-accent);
}

body.v2-shell .rail-icon {
  width: 22px;
  height: 22px;
}

body.v2-shell .rail-item:focus-visible,
body.v2-shell .pane-item:focus-visible,
body.v2-shell .pane-collapse:focus-visible,
body.v2-shell .rail-brand:focus-visible {
  outline: var(--lugn-focus-ring-width) solid var(--lugn-focus-ring);
  outline-offset: var(--lugn-focus-ring-offset);
}

/* `.rail-tooltip` is now a THIN ALIAS of the canonical `.lugn-tooltip`
   primitive (styles.css §7). The rail spans carry
   `lugn-tooltip lugn-tooltip--right`, so all painting (inverse surface,
   elevation, radius, type) + the `--right` placement come from the
   primitive. This rule keeps only the rail-specific reveal binding:
   the rail-item host reveals its nested tooltip on hover AND
   :focus-visible (not a native title alone — keyboard-reachable, AC17).
   Painting is intentionally NOT duplicated here. */
body.v2-shell .rail-item:hover .rail-tooltip,
body.v2-shell .rail-item:focus-visible .rail-tooltip {
  opacity: 1;
}

/* B — contextual secondary pane */
body.v2-shell .secondary-pane {
  display: flex;
  flex-direction: column;
  gap: var(--lugn-space-2);
  width: var(--v2-shell-pane-w);
  min-width: 0;
  padding: var(--lugn-space-5) var(--lugn-space-4);
  border-right: 1px solid var(--v2-line);
  background: var(--lugn-surface);
  overflow-y: auto;
}

body.v2-shell .pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lugn-space-2);
  min-height: var(--v2-shell-nav-row);
}

body.v2-shell .pane-title {
  color: var(--v2-muted);
  font-size: var(--lugn-text-xs);
  font-weight: var(--lugn-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.v2-shell .pane-collapse {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: var(--v2-radius-sm);
  background: transparent;
  color: var(--v2-muted);
  cursor: pointer;
}

body.v2-shell .pane-collapse:hover,
body.v2-shell .pane-collapse:focus-visible {
  border-color: var(--v2-line);
  color: var(--v2-ink);
}

body.v2-shell .pane-collapse-icon {
  width: 16px;
  height: 16px;
}

body.v2-shell .pane-nav {
  min-width: 0;
}

body.v2-shell .pane-nav .nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--lugn-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

body.v2-shell .pane-group {
  display: flex;
  flex-direction: column;
  gap: var(--lugn-space-1);
}

body.v2-shell .pane-item {
  display: flex;
  align-items: center;
  min-height: var(--v2-shell-nav-row);
  padding: 0 var(--lugn-space-3);
  border-radius: var(--v2-radius-sm);
  color: var(--v2-muted);
  font-size: var(--lugn-text-sm);
  font-weight: var(--lugn-weight-medium);
  cursor: pointer;
}

body.v2-shell .pane-item:hover,
body.v2-shell .pane-item.active,
body.v2-shell .pane-item[aria-current="true"] {
  background: var(--lugn-sunken);
  color: var(--v2-ink);
}

/* Hierarchy via spacing/typography, not boxes: the subitem indents and reads
   one step quieter than its parent route. */
body.v2-shell .pane-subitem {
  padding-left: var(--lugn-space-5);
  font-size: var(--lugn-text-xs);
}

body.v2-shell .sidebar {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
  padding: 22px 18px;
  border-right: 1px solid var(--v2-line);
  background: var(--lugn-surface);
}

body.v2-shell .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

body.v2-shell .brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: var(--v2-radius);
  background: var(--lugn-inverse-surface);
  color: var(--lugn-inverse-ink);
  font-weight: 600;
  line-height: 1;
}

body.v2-shell .brand-title {
  color: var(--v2-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
}

body.v2-shell .brand-subtitle {
  margin-top: 2px;
  overflow: hidden;
  color: var(--v2-muted);
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell .nav-list {
  display: grid;
  gap: 6px;
}

body.v2-shell .nav-item {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--v2-radius);
  background: transparent;
  color: var(--v2-muted);
  text-align: left;
  cursor: pointer;
}

body.v2-shell .nav-item:hover,
body.v2-shell .nav-item.active {
  border-color: var(--v2-line);
  background: var(--lugn-surface);
  color: var(--v2-ink);
}

body.v2-shell .module-shortcut-rail {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .module-shortcut-rail {
  display: none;
}

body.v2-shell .module-shortcut-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
}

body.v2-shell .module-shortcut-list {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.v2-shell .module-shortcut {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--v2-radius);
  background: transparent;
  color: var(--v2-muted);
  text-align: left;
  cursor: pointer;
}

body.v2-shell .module-shortcut:hover,
body.v2-shell .module-shortcut:focus-visible,
body.v2-shell .module-shortcut.is-active {
  border-color: var(--v2-line);
  background: var(--lugn-surface);
  color: var(--v2-ink);
}

body.v2-shell .module-shortcut span,
body.v2-shell .module-shortcut small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell .module-shortcut span {
  font-size: 12px;
  font-weight: 600;
}

body.v2-shell .module-shortcut small {
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 500;
}

body.v2-shell .workspace {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding: 24px;
}

body.v2-shell .topbar,
body.v2-shell .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

body.v2-shell .topbar .page-title {
  color: var(--v2-ink);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

body.v2-shell .topbar p,
body.v2-shell .panel-header p {
  margin-top: 6px;
  color: var(--v2-muted);
  font-size: 13px;
  line-height: 1.35;
}

body.v2-shell:not(.is-public-landing) .topbar p,
body.v2-shell:not(.is-public-landing) .panel-header p {
  display: none;
}

body.v2-shell .topbar-actions,
body.v2-shell .panel-actions,
body.v2-shell .landing-nav,
body.v2-shell .landing-actions,
body.v2-shell .planning-import-actions,
body.v2-shell .provider-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body.v2-shell .workspace-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body.v2-shell .workspace-switcher label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body.v2-shell .workspace-switcher span {
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
}

body.v2-shell .workspace-switcher select {
  width: min(220px, 28vw);
  min-height: 38px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius);
  background: var(--lugn-surface);
  color: var(--v2-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
}

body.v2-shell .workspace-switcher .secondary-button {
  min-height: 38px;
  padding: 0 10px;
  font-size: 12px;
}

body.v2-shell .setup-action-policy-summary {
  display: none;
}

body.v2-shell .icon-button,
body.v2-shell .secondary-button,
body.v2-shell .primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Standalone interactive controls meet the 44px WCAG 2.5.8 touch
     floor at the SHARED source, not via a downstream override. Dense
     table contexts (the opt-in [data-density] modes below + the
     .owner-shell data-table carve-outs in styles.css) retune this
     through the same token, so a packed operator grid keeps its
     authored compact heights. min-height (never a fixed height) so a
     wrapping label never clips. */
  min-height: var(--v2-control-height-touch);
  padding: 0 14px;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius);
  background: var(--lugn-surface);
  color: var(--v2-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

body.v2-shell .icon-button {
  width: var(--v2-control-height-touch);
  padding: 0;
  font-size: 16px;
}

body.v2-shell .primary-button {
  border-color: var(--v2-accent);
  background: var(--v2-accent);
  color: var(--lugn-on-accent);
}

body.v2-shell .primary-button:hover {
  border-color: var(--v2-accent-strong);
  background: var(--v2-accent-strong);
}

body.v2-shell .secondary-button:hover,
body.v2-shell .icon-button:hover {
  border-color: color-mix(in srgb, var(--lugn-action) 38%, transparent);
  background: var(--lugn-action-subtle);
}

body.v2-shell .primary-button:disabled,
body.v2-shell .secondary-button:disabled,
body.v2-shell .icon-button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

body.v2-shell .view {
  display: none;
  min-width: 0;
}

body.v2-shell .view.active {
  display: grid;
  gap: 16px;
}

body.v2-shell .grid {
  display: grid;
  gap: 16px;
}

body.v2-shell .two-columns {
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
}

body.v2-shell .panel {
  min-width: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.v2-shell .panel-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell .panel-header h2 {
  color: var(--v2-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

body.v2-shell details.workbench-disclosure > summary.panel-header {
  list-style: none;
  cursor: pointer;
}

body.v2-shell details.workbench-disclosure > summary.panel-header::-webkit-details-marker {
  display: none;
}

body.v2-shell details.workbench-disclosure > summary.panel-header::after {
  content: "⌄";
  color: var(--v2-muted);
  font-size: 16px;
  line-height: 1;
}

body.v2-shell details.workbench-disclosure[open] > summary.panel-header::after {
  transform: rotate(180deg);
}

/* Status indicator (design §1) — dot/glyph + WORD on a near-transparent ground.
   The rest state is transparent (no filled lozenge); the tinted variants carry a
   faint wash + a hairline in their own hue. Tokens only. */
body.v2-shell .status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lugn-space-compact);
  min-height: var(--lugn-control-height-compact);
  padding: 0 var(--lugn-space-3);
  border: var(--lugn-divider) solid transparent;
  border-radius: var(--lugn-radius-pill);
  background: transparent;
  color: var(--v2-muted);
  /* Pill label reads on the comfortable label step (13px) rather than
     the 11px micro tier (audit: TYPOGRAPHY). */
  font-size: var(--lugn-text-label);
  font-weight: var(--lugn-weight-semibold);
  line-height: var(--lugn-leading-tight);
  white-space: nowrap;
}

body.v2-shell .status-pill.success {
  border-color: color-mix(in srgb, var(--lugn-success-fg) 22%, transparent);
  color: var(--v2-success);
}

body.v2-shell .status-pill.warning {
  border-color: color-mix(in srgb, var(--lugn-warning-fg) 24%, transparent);
  color: var(--v2-warning);
}

body.v2-shell .status-pill.danger {
  border-color: color-mix(in srgb, var(--lugn-danger-fg) 24%, transparent);
  color: var(--v2-danger);
}

/* Decision triad chip — the signature component. Each verdict gets its own
   tinted fill + matching fg (>=4.5:1) and a leading shape dot, so köp / vänta /
   planera are the focal point of the row and are never told apart by colour
   alone (the text label carries the meaning too). */
body.v2-shell .decision-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--lugn-radius-pill);
  font-size: var(--lugn-text-sm);
  font-weight: var(--lugn-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  /* The one sanctioned flourish: the verdict — the loudest thing on the row —
     settles in with a calm fade+scale. Collapses to static under the global
     prefers-reduced-motion guard. */
  animation: lugn-decision-in var(--lugn-motion-base) var(--lugn-ease-emphasized);
}

@keyframes lugn-decision-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

body.v2-shell .decision-chip__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}

body.v2-shell .decision-chip.decision-buy {
  background: var(--lugn-buy-bg);
  color: var(--lugn-buy-fg);
}

body.v2-shell .decision-chip.decision-wait {
  background: var(--lugn-wait-bg);
  color: var(--lugn-wait-fg);
}

body.v2-shell .decision-chip.decision-plan {
  background: var(--lugn-plan-bg);
  color: var(--lugn-plan-fg);
}

body.v2-shell .decision-chip.decision-urgent {
  background: var(--lugn-danger-bg);
  color: var(--lugn-danger-fg);
}

body.v2-shell .decision-chip.decision-review {
  background: var(--lugn-warning-bg);
  color: var(--lugn-warning-fg);
}

body.v2-shell .decision-chip.decision-hold {
  background: var(--lugn-sunken);
  border-color: var(--lugn-hairline);
  color: var(--lugn-muted);
}

/* Locale toggle (SV | EN) — segmented control in the topbar. Satisfies Rule 1
   (one language per surface) by letting the user pick; the choice persists. */
body.v2-shell .locale-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--v2-line);
  border-radius: var(--lugn-radius-sm);
  background: var(--v2-soft);
}

body.v2-shell .locale-option {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--lugn-radius-xs);
  background: transparent;
  color: var(--v2-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

body.v2-shell .locale-option.is-active {
  background: var(--lugn-surface);
  color: var(--v2-ink);
  box-shadow: var(--lugn-elevation-1);
}

/* Metric / stat tile (design §3). ONE borderless divider-grid — the de-carded
   shape proven on HOME, promoted here as the single family base. Structure comes
   from hairline dividers (one border-top on the grid, a border-right between
   tiles), never a fill or per-tile box. `--metric-cols` (default 3) keeps the
   owner 3-col strips + workbench/lens multi-col grids; a per-context override
   sets `--metric-cols:1` for a single-column readout. Tokens only. */
body.v2-shell .metric-grid {
  display: grid;
  grid-template-columns: repeat(var(--metric-cols, 3), minmax(0, 1fr));
  border-top: var(--lugn-divider) solid var(--lugn-hairline);
}

body.v2-shell .metric {
  display: grid;
  gap: var(--lugn-space-1);
  min-height: 54px;
  padding: var(--lugn-space-4) var(--lugn-space-5);
  border: 0;
  border-right: var(--lugn-divider) solid var(--lugn-hairline);
  border-bottom: var(--lugn-divider) solid var(--lugn-hairline);
  background: transparent;
  box-shadow: none;
}

body.v2-shell .metric:last-child {
  border-right: 0;
}

body.v2-shell .metric span {
  color: var(--lugn-muted);
  font-size: var(--lugn-text-micro);
  font-weight: var(--lugn-weight-semibold);
  line-height: var(--lugn-leading-tight);
  letter-spacing: var(--lugn-tracking-wide);
  text-transform: uppercase;
}

body.v2-shell .metric strong {
  color: var(--lugn-ink);
  font-size: var(--lugn-text-lg);
  font-weight: var(--lugn-weight-semibold);
  line-height: 1;
  letter-spacing: var(--lugn-tracking-tight);
  font-variant-numeric: tabular-nums;
}

body.v2-shell .form-grid,
body.v2-shell .auth-layout,
body.v2-shell .master-data-grid,
body.v2-shell .team-setup-grid {
  display: grid;
  gap: 12px;
}

body.v2-shell .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 16px;
}

body.v2-shell .account-identity-panel {
  display: grid;
  gap: 12px;
}

body.v2-shell .account-control-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius);
  background: var(--v2-soft);
}

body.v2-shell .account-control-strip > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.v2-shell .account-control-strip span,
body.v2-shell .account-control-strip em,
body.v2-shell .account-section-header span,
body.v2-shell .account-method-row span,
body.v2-shell .account-reconciliation-note p {
  color: var(--v2-muted);
  font-size: 12px;
  line-height: 1.35;
}

body.v2-shell .account-control-strip span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

body.v2-shell .account-control-strip strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--v2-ink);
  font-size: 14px;
}

body.v2-shell .account-control-strip em {
  font-style: normal;
}

body.v2-shell .account-identity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.v2-shell .account-trust-summary {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius);
  background: var(--lugn-surface);
}

body.v2-shell .account-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

body.v2-shell .account-trust-item {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius);
  background: var(--v2-soft);
}

body.v2-shell .account-trust-item.success {
  border-color: color-mix(in srgb, var(--v2-success) 30%, var(--v2-line));
}

body.v2-shell .account-trust-item.warning {
  border-color: color-mix(in srgb, var(--v2-warning) 30%, var(--v2-line));
}

body.v2-shell .account-trust-item span,
body.v2-shell .account-trust-item em,
body.v2-shell .account-next-action span {
  color: var(--v2-muted);
  font-size: 12px;
  line-height: 1.35;
}

body.v2-shell .account-trust-item span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

body.v2-shell .account-trust-item strong,
body.v2-shell .account-next-action strong {
  min-width: 0;
  color: var(--v2-ink);
  overflow-wrap: anywhere;
}

body.v2-shell .account-trust-item em {
  font-style: normal;
}

body.v2-shell .account-next-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius);
  background: var(--v2-soft);
}

body.v2-shell .account-next-action > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.v2-shell .account-health-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

body.v2-shell .account-identity-card,
body.v2-shell .account-health-item,
body.v2-shell .account-method-panel,
body.v2-shell .account-method-row,
body.v2-shell .account-workspace-row {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius);
  background: var(--lugn-surface);
}

body.v2-shell .account-identity-card span,
body.v2-shell .account-health-item em,
body.v2-shell .account-workspace-row span {
  color: var(--v2-muted);
  font-size: 12px;
  line-height: 1.35;
}

body.v2-shell .account-identity-card strong,
body.v2-shell .account-health-item strong,
body.v2-shell .account-method-panel strong,
body.v2-shell .account-method-row strong,
body.v2-shell .account-workspace-row strong {
  min-width: 0;
  color: var(--v2-ink);
  overflow-wrap: anywhere;
}

body.v2-shell .account-identity-card em,
body.v2-shell .account-health-item em {
  color: var(--v2-muted);
  font-size: 12px;
  font-style: normal;
}

body.v2-shell .account-health-item {
  align-content: start;
}

body.v2-shell .account-health-item.success {
  border-color: color-mix(in srgb, var(--v2-ok) 34%, var(--v2-line));
}

body.v2-shell .account-health-item.warning {
  border-color: color-mix(in srgb, var(--v2-warn) 34%, var(--v2-line));
}

body.v2-shell .account-method-panel {
  gap: 10px;
}

body.v2-shell .account-section-header {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

body.v2-shell .account-section-header > div {
  display: grid;
  gap: 4px;
  min-width: min(100%, 280px);
}

body.v2-shell .account-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

body.v2-shell .account-method-list {
  display: grid;
  gap: 8px;
}

body.v2-shell .account-method-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 10px;
  background: var(--v2-soft);
}

body.v2-shell .account-method-row.success {
  border-color: color-mix(in srgb, var(--v2-ok) 30%, var(--v2-line));
}

body.v2-shell .account-method-row.warning {
  border-color: color-mix(in srgb, var(--v2-warn) 30%, var(--v2-line));
}

body.v2-shell .account-method-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

body.v2-shell .account-reconciliation-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius-sm);
  background: var(--v2-soft);
}

body.v2-shell .account-reconciliation-note p {
  margin: 0;
}

body.v2-shell .account-provider-list,
body.v2-shell .account-actions,
body.v2-shell .account-workspace-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Status indicator (§1): the account-provider chip is a label (provider name),
   not a status — compat-alias re-pointed onto the restrained .status-pill.neutral
   treatment: transparent ground + a single hairline + muted word. */
body.v2-shell .account-provider-chip {
  width: fit-content;
  padding: 5px 8px;
  border: 1px solid var(--lugn-hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
}

body.v2-shell .account-workspace-list {
  display: grid;
  gap: 8px;
}

body.v2-shell .account-workspace-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

body.v2-shell .full-span,
body.v2-shell .wide-field {
  grid-column: 1 / -1;
}

/* Avatar uploader: the "this is me" upload button + remove control sit on one calm row;
   the paste-a-link field stacks beneath. Layout only — colours come from the reused
   .secondary-button / .link-button primitives. */
body.v2-shell .avatar-field {
  display: grid;
  gap: 10px;
}

body.v2-shell .avatar-field-label {
  color: var(--v2-muted);
  font-size: 13px;
  font-weight: 600;
}

body.v2-shell .avatar-uploader {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

body.v2-shell .avatar-upload-button {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

body.v2-shell label {
  display: grid;
  gap: 6px;
  color: var(--v2-muted);
  /* Form labels sit on the comfortable label step (13px), not the
     11px micro tier — micro is reserved for ::before reflow headers
     and dense tabular sub-spans (audit: TYPOGRAPHY). */
  font-size: var(--lugn-text-label);
  font-weight: 500;
  line-height: 1.25;
}

body.v2-shell input,
body.v2-shell select,
body.v2-shell textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius);
  background: var(--lugn-surface);
  color: var(--v2-ink);
  outline: none;
}

body.v2-shell input,
body.v2-shell select {
  /* Repointed off the 38px literal onto the canonical control height
     (Phase 2 S4: --lugn-control-height == 38px). The touch floor below
     (--v2-control-height-touch, 44px) still wins for standalone fields;
     this sets the standard control band one source. */
  min-height: var(--lugn-control-height);
  padding: 0 10px;
}

body.v2-shell textarea {
  min-height: 96px;
  padding: 10px;
  resize: vertical;
}

body.v2-shell input:focus-visible,
body.v2-shell select:focus-visible,
body.v2-shell textarea:focus-visible,
body.v2-shell button:focus-visible,
body.v2-shell a:focus-visible {
  border-color: var(--lugn-action);
  outline: var(--lugn-focus-ring-width) solid var(--lugn-focus-ring);
  outline-offset: var(--lugn-focus-ring-offset);
}

body.v2-shell input:focus,
body.v2-shell select:focus,
body.v2-shell textarea:focus {
  border-color: var(--lugn-action);
}

body.v2-shell .access-panel {
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius);
  background: var(--lugn-surface);
}

body.v2-shell .auth-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 16px 18px 18px;
}

body.v2-shell .auth-form,
body.v2-shell .setup-data-form,
body.v2-shell .team-member-form,
body.v2-shell .planning-import-form {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius);
  background: var(--lugn-surface);
}

body.v2-shell .auth-form h3,
body.v2-shell .setup-data-form h3 {
  color: var(--v2-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

body.v2-shell .auth-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px 18px;
  color: var(--v2-muted);
  font-size: 11px;
}

body.v2-shell .auth-assurance span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--v2-line);
  border-radius: 999px;
}

body.v2-shell .access-mode-switcher {
  display: flex;
  gap: 0;
  padding: 0 18px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell .access-mode-switcher button {
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--v2-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

body.v2-shell .access-mode-switcher button.is-active {
  border-bottom-color: var(--v2-accent);
  color: var(--v2-ink);
}

body.v2-shell .module-workspace {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  min-width: 0;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius);
  background: var(--lugn-surface);
}

body.v2-shell .module-workspace-stack {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
}

body.v2-shell .module-workspace.attention,
body.v2-shell .setup-data-form.attention {
  border-color: color-mix(in srgb, var(--lugn-action) 42%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lugn-action) 9%, transparent);
}

body.v2-shell .toast {
  position: fixed;
  right: 18px;
  top: 18px;
  bottom: auto;
  z-index: 60;
  max-width: min(420px, calc(100vw - 36px));
  padding: 12px 14px;
  border: 1px solid var(--v2-line-strong);
  border-radius: var(--v2-radius);
  background: var(--lugn-surface);
  color: var(--v2-ink);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--lugn-elevation-2);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 160ms var(--lugn-ease-standard), transform 160ms var(--lugn-ease-standard);
}

body.v2-shell .toast.visible {
  opacity: 1;
  transform: translateY(0);
}

/* CI-11: success / error variants on the single toast, aligned with the
   status-pill colour convention (left accent + tinted border). */
body.v2-shell .toast.success {
  border-color: color-mix(in srgb, var(--v2-success) 38%, var(--v2-line));
  box-shadow: inset 3px 0 0 var(--v2-success);
}

body.v2-shell .toast.error {
  border-color: color-mix(in srgb, var(--v2-danger) 38%, var(--v2-line));
  box-shadow: inset 3px 0 0 var(--v2-danger);
}

@media (max-width: 920px) {
  body.v2-shell .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  body.v2-shell .sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    border-right: 0;
    border-bottom: 1px solid var(--v2-line);
  }

  body.v2-shell .nav-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.v2-shell .nav-item {
    text-align: center;
  }

  body.v2-shell .workspace {
    padding: 14px;
  }

  body.v2-shell .topbar,
  body.v2-shell .panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

  body.v2-shell .two-columns,
  body.v2-shell .auth-layout,
  body.v2-shell .module-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  body.v2-shell .nav-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.v2-shell .topbar-actions {
    width: 100%;
    justify-content: space-between;
  }

  body.v2-shell .form-grid,
  body.v2-shell .account-control-strip,
  body.v2-shell .account-identity-grid,
  body.v2-shell .account-trust-grid,
  body.v2-shell .account-next-action,
  body.v2-shell .account-health-grid,
  body.v2-shell .account-method-row,
  body.v2-shell .account-workspace-row,
  body.v2-shell .metric-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.v2-shell .account-method-actions,
  body.v2-shell .account-section-actions,
  body.v2-shell .account-workspace-actions {
    justify-content: flex-start;
  }

  body.v2-shell .account-reconciliation-note {
    grid-template-columns: minmax(0, 1fr);
  }
}

body.v2-shell {
  --bg: var(--v2-bg);
  --surface: var(--lugn-surface);
  --surface-muted: var(--v2-soft);
  --text: var(--v2-ink);
  --muted: var(--v2-muted);
  --border: var(--v2-line);
  --accent: var(--v2-accent);
  --accent-strong: var(--v2-accent-strong);
  --signal: var(--v2-warning);
  --warning: var(--v2-warning);
  --danger: var(--v2-danger);
  background: var(--lugn-surface);
  color: var(--v2-ink);
  font-family: var(--v2-font);
}

body.v2-shell .app-shell {
  background: var(--lugn-surface);
}

body.v2-shell.is-public-landing .workspace {
  max-width: 1180px;
  min-height: 100svh;
  margin: 0 auto;
  padding: 18px 28px 42px;
}

body.v2-shell.is-public-landing .topbar {
  position: relative;
  z-index: 2;
  min-height: 48px;
  padding: 0;
}

body.v2-shell.is-public-landing .topbar .page-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--v2-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

body.v2-shell.is-public-landing .topbar .page-title::before {
  content: "G";
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--v2-ink);
  color: var(--lugn-on-accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

body.v2-shell.is-public-landing .topbar p,
body.v2-shell.is-public-landing #refreshButton,
body.v2-shell.is-public-landing #commandPaletteButton {
  display: none;
}

body.v2-shell .landing-nav.v2-public-nav {
  gap: 8px;
  margin: 0;
}

body.v2-shell .landing-nav.v2-public-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  background: var(--lugn-surface);
  color: var(--v2-ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

body.v2-shell .landing-nav.v2-public-nav a:hover {
  background: var(--lugn-action-subtle);
  color: var(--v2-ink);
}

body.v2-shell .landing-nav.v2-public-nav .landing-nav-primary {
  border-color: var(--v2-accent);
  background: var(--v2-accent);
  color: var(--lugn-on-accent);
}

body.v2-shell .landing-nav.v2-public-nav .landing-nav-primary:hover {
  border-color: var(--v2-accent-strong);
  background: var(--v2-accent-strong);
  color: var(--lugn-on-accent);
}

body.v2-shell .v2-landing-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-height: auto;
  padding: clamp(54px, 11svh, 108px) 16px clamp(16px, 3svh, 30px);
  border: 0;
  border-radius: 0;
  background: var(--lugn-surface);
  box-shadow: none;
  overflow: hidden;
}

body.v2-shell .v2-landing-copy {
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 780px;
  padding: 0;
  text-align: center;
}

body.v2-shell .v2-landing-copy h1 {
  max-width: 15ch;
  color: var(--v2-ink);
  font-family: var(--lugn-font-serif);
  font-optical-sizing: auto;
  font-size: clamp(40px, 5.4vw, 60px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.016em;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

body.v2-shell .v2-landing-copy p {
  max-width: 520px;
  margin: 0;
  color: var(--v2-muted);
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 500;
  line-height: 1.42;
  text-wrap: balance;
}

body.v2-shell .landing-eyebrow {
  margin: 0;
  color: var(--v2-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.v2-shell .landing-value-list {
  display: grid;
  gap: 8px;
  max-width: 560px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

body.v2-shell .landing-value-list li {
  position: relative;
  padding-left: 18px;
  color: var(--v2-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

body.v2-shell .landing-value-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--v2-accent);
}

body.v2-shell .landing-trust-rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 640px;
}

body.v2-shell .landing-trust-rail span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  background: var(--v2-soft);
  color: var(--lugn-ink-secondary);
  font-size: 12px;
  font-weight: 500;
}

body.v2-shell .onboarding-path-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0 18px 14px;
  list-style: none;
}

/* Onboarding step tiles — de-carded (design §3): drop the per-tile bordered card;
   structure is the number chip + whitespace. is-current/is-complete read through
   the chip + text colour, not a filled tile. */
body.v2-shell .onboarding-path-progress li {
  display: grid;
  gap: var(--lugn-space-2);
  min-width: 0;
  padding: var(--lugn-space-3) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--lugn-muted);
}

body.v2-shell .onboarding-path-progress li span {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  font-family: var(--v2-font-mono);
  font-size: 11px;
  font-weight: 600;
}

body.v2-shell .onboarding-path-progress li strong {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

body.v2-shell .onboarding-path-progress li.is-current {
  color: var(--lugn-ink);
}

body.v2-shell .onboarding-path-progress li.is-current span {
  border-color: var(--v2-accent);
  background: var(--v2-accent);
  color: var(--lugn-on-accent);
}

body.v2-shell .onboarding-path-progress li.is-complete {
  color: var(--v2-ink);
}

body.v2-shell .onboarding-path-progress li.is-complete span {
  border-color: color-mix(in srgb, var(--lugn-success-fg) 34%, transparent);
  background: color-mix(in srgb, var(--lugn-success-fg) 12%, transparent);
  color: var(--v2-success);
}

body.v2-shell .auth-mode-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px 12px;
  color: var(--v2-muted);
  font-size: 13px;
}

body.v2-shell .auth-mode-footer button {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--v2-accent);
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.v2-shell .auth-mode-footer button.is-active {
  color: var(--v2-ink);
  font-weight: 600;
  text-decoration: none;
}

body.v2-shell .auth-form-lead {
  margin: -2px 0 2px;
  color: var(--v2-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

body.v2-shell .auth-form-step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.v2-shell .auth-form-optional {
  display: grid;
  gap: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--v2-line);
  border-radius: var(--v2-radius);
  background: var(--v2-soft);
}

body.v2-shell .auth-form-optional summary {
  cursor: pointer;
  color: var(--v2-muted);
  font-size: 13px;
  font-weight: 500;
  list-style: none;
}

body.v2-shell .auth-form-optional summary::-webkit-details-marker {
  display: none;
}

body.v2-shell.is-public-landing .auth-layout {
  grid-template-columns: minmax(0, 1fr);
  max-width: 440px;
  margin: 0 auto;
  padding-top: 8px;
}

body.v2-shell.is-public-landing .access-mode-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 18px 10px;
  border-bottom: 0;
}

body.v2-shell.is-public-landing .access-mode-switcher button {
  min-height: 44px;
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  background: var(--lugn-surface);
  color: var(--v2-muted);
  font-size: 13px;
  font-weight: 500;
}

body.v2-shell.is-public-landing .access-mode-switcher button.is-active {
  border-color: var(--v2-accent);
  background: var(--lugn-action-subtle);
  color: var(--v2-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lugn-action) 18%, transparent);
}

body.v2-shell .v2-landing-actions {
  justify-content: center;
  gap: 12px;
  margin: 6px 0 0;
}

body.v2-shell .v2-landing-actions .primary-button,
body.v2-shell .v2-landing-actions .secondary-button {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

body.v2-shell .v2-landing-actions .primary-button {
  border-color: var(--v2-accent);
  background: var(--v2-accent);
  color: var(--lugn-on-accent);
}

body.v2-shell .v2-landing-actions .primary-button:hover {
  border-color: var(--v2-accent-strong);
  background: var(--v2-accent-strong);
}

body.v2-shell .v2-landing-actions .secondary-button {
  border-color: var(--v2-line);
  background: var(--lugn-surface);
  color: var(--v2-ink);
}

body.v2-shell.is-public-landing .access-panel {
  max-width: 980px;
  margin: 10svh auto 0;
  padding: 18px;
  border-color: var(--v2-line);
  background: var(--lugn-surface);
  box-shadow: none;
}

body.v2-shell.is-public-landing .access-panel .panel-header h2 {
  font-size: 18px;
}

body.v2-shell.is-public-landing .access-panel .panel-header p {
  max-width: 560px;
}

/* ============================================================
   LOCKED AUTHENTICATED FRAME (AC1/AC7/AC8/AC9/AC10/AC11).
   Grid = 52px rail + 232px pane + 1fr workspace, height 100dvh,
   root NON-scrolling (overflow:hidden). Scoped to the signed-in
   shell ONLY so signed-out/auth/onboarding keep document scroll.
   At 1440px the workspace = 1440 - 52 - 232 = 1156px = 80.3%
   of the viewport (>= the 80% target, AC11). Every grid/flex
   ancestor down to #workspaceScroll carries min-width:0 /
   min-height:0 so the chain can shrink and never overflow.
   ============================================================ */
/* NOTE: the owner console (owner.html) ALSO carries body.v2-shell and is not
   .is-public-landing, but it is a DIFFERENT shell (.app-shell.owner-shell) with no
   rail/pane. So the locked two-level frame is scoped to .tenant-shell ONLY; the
   owner keeps its own 2-column sidebar layout (restored just below). */
body.v2-shell:not(.is-public-landing) .app-shell.tenant-shell {
  grid-template-columns: var(--v2-shell-rail-w) var(--v2-shell-pane-w) minmax(0, 1fr);
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

/* Owner console keeps its prior 2-column sidebar grid (it does not use the
   tenant rail/pane and never enters the locked-scroll frame). */
body.v2-shell:not(.is-public-landing) .app-shell.owner-shell {
  grid-template-columns: 224px minmax(0, 1fr);
}

body.v2-shell:not(.is-public-landing) .owner-shell .workspace {
  gap: 16px;
  padding: 18px;
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .owner-shell .topbar {
  min-height: 44px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--v2-line);
}

/* Owner sidebar keeps its prior compact nav rows + sidebar chrome (these used to
   come from the shared signed-in rules the tenant frame replaced). */
body.v2-shell:not(.is-public-landing) .owner-shell .sidebar {
  gap: 24px;
  padding: 18px 14px;
  border-color: var(--v2-line);
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .owner-shell .nav-item {
  min-height: 34px;
  padding: 0 10px;
  color: var(--v2-muted);
  font-size: 13px;
  font-weight: 500;
}

body.v2-shell:not(.is-public-landing) .owner-shell .nav-item:hover,
body.v2-shell:not(.is-public-landing) .owner-shell .nav-item.active {
  border-color: var(--v2-line);
  background: var(--lugn-surface);
  color: var(--v2-ink);
}

body.v2-shell:not(.is-public-landing) .owner-shell .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--v2-ink);
}

body.v2-shell:not(.is-public-landing) .owner-shell .topbar .page-title {
  font-size: 22px;
  font-weight: 600;
}

/* Secondary pane can collapse WITHOUT changing the route (AC14): JS toggles the
   body class + persists; the grid drops the pane column to 0 and the pane hides. */
body.v2-shell.pane-collapsed:not(.is-public-landing) .app-shell.tenant-shell {
  grid-template-columns: var(--v2-shell-rail-w) 0 minmax(0, 1fr);
}

body.v2-shell.pane-collapsed:not(.is-public-landing) .tenant-shell .secondary-pane {
  width: 0;
  padding-left: 0;
  padding-right: 0;
  border-right: 0;
  overflow: hidden;
}

body.v2-shell.pane-collapsed:not(.is-public-landing) .tenant-shell .pane-collapse-icon {
  transform: scaleX(-1);
}

body.v2-shell:not(.is-public-landing) .tenant-shell .secondary-pane,
body.v2-shell:not(.is-public-landing) .tenant-shell .primary-rail {
  height: 100%;
  min-height: 0;
}

/* C — workspace is a flex column: a fixed (non-scrolling) header + the single
   scroll viewport. The workspace box itself never scrolls. */
body.v2-shell:not(.is-public-landing) .tenant-shell .workspace {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--lugn-surface);
}

/* The topbar is the FIXED header — it stays a normal flex child but lives OUTSIDE
   the scroll box, so it never scrolls while the working surface does (AC9). */
body.v2-shell:not(.is-public-landing) .tenant-shell .topbar {
  flex: 0 0 auto;
  min-height: var(--v2-shell-header-h);
  padding: var(--lugn-space-4) var(--lugn-space-6);
  border-bottom: 1px solid var(--v2-line);
  background: var(--lugn-surface);
}

/* The single principal vertical scroll container (AC10). flex:1 + min-height:0
   so it fills the remaining height and is the only thing that scrolls. */
body.v2-shell:not(.is-public-landing) .tenant-shell #workspaceScroll {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: var(--lugn-space-6);
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: auto;
}

/* Every working surface inside the scroll box can shrink without forcing the
   chain to overflow horizontally. */
body.v2-shell:not(.is-public-landing) .tenant-shell #workspaceScroll > [data-view-panel] {
  min-width: 0;
  min-height: 0;
}

/* Scroll-lock the underlying surface while an UNPINNED capability-node overlay is
   open (the overlay is position:fixed with its own scroll). Pinned mode reflows
   beside the pane and needs no lock. Removed on close so route restoration and
   normal scrolling resume. */
body.v2-shell.capability-node-pane-open:not(.capability-node-pane-pinned):not(.is-public-landing) .tenant-shell #workspaceScroll {
  overflow: hidden;
}

body.v2-shell:not(.is-public-landing) .topbar .page-title {
  font-size: 22px;
  font-weight: 600;
}

/* ============================================================
   Authenticated responsive frame — the SAME information
   architecture (AC15) at every breakpoint, all derived from
   the one NAV_CONFIG (rail = sections, pane = subsections,
   mobile bottom-bar = sections). The frame stays height-locked
   so the workspace surface is always the principal scroller.
   ============================================================ */

/* Tablet (1024-1279): rail + COMPACT pane. Identical IA; pane may be collapsed
   by the operator via #paneCollapseButton (route unchanged). */
@media (min-width: 1025px) and (max-width: 1279px) {
  body.v2-shell:not(.is-public-landing) .app-shell.tenant-shell {
    grid-template-columns: var(--v2-shell-rail-w) var(--v2-shell-pane-w-compact) minmax(0, 1fr);
  }

  body.v2-shell.pane-collapsed:not(.is-public-landing) .app-shell.tenant-shell {
    grid-template-columns: var(--v2-shell-rail-w) 0 minmax(0, 1fr);
  }

  body.v2-shell:not(.is-public-landing) .tenant-shell .secondary-pane {
    width: var(--v2-shell-pane-w-compact);
  }
}

/* Below 1024: the secondary pane becomes an OVERLAY drawer opened from the rail.
   The grid drops to rail + workspace; the frame stays height-locked and the
   workspace surface keeps scrolling independently. The drawer is the SAME
   secondary-pane markup (rendered from the same NAV_CONFIG, incl. tech-tree), so
   /tech-tree stays reachable on tablet/phone. (Tenant shell only — the owner
   console has its own responsive collapse at <=920px below.) */
@media (max-width: 1024px) {
  body.v2-shell:not(.is-public-landing) .app-shell.tenant-shell {
    grid-template-columns: var(--v2-shell-rail-w) minmax(0, 1fr);
  }

  body.v2-shell.pane-collapsed:not(.is-public-landing) .app-shell.tenant-shell {
    grid-template-columns: var(--v2-shell-rail-w) minmax(0, 1fr);
  }

  body.v2-shell:not(.is-public-landing) .tenant-shell .secondary-pane {
    position: fixed;
    inset: 0 auto 0 var(--v2-shell-rail-w);
    z-index: 65;
    width: var(--v2-shell-pane-w);
    box-shadow: var(--lugn-elevation-3);
    transform: translateX(-100%);
    transition: transform var(--lugn-motion-base) var(--lugn-ease-emphasized);
  }

  /* The drawer is open by default (pane-collapsed false) but overlays the
     workspace instead of taking a grid column. Toggling pane-collapsed closes
     it without changing the route. */
  body.v2-shell:not(.is-public-landing):not(.pane-collapsed) .tenant-shell .secondary-pane {
    transform: translateX(0);
  }

  body.v2-shell.pane-collapsed:not(.is-public-landing) .tenant-shell .secondary-pane {
    transform: translateX(-100%);
  }
}

body.v2-shell:not(.is-public-landing) .public-only-section {
  display: none !important;
}

body.v2-shell:not(.is-public-landing) .view[data-view-panel="workbench"].active {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

body.v2-shell:not(.is-public-landing) .v2-workbench-command-panel {
  order: 1;
  padding: 0;
  overflow: hidden;
  border-color: var(--v2-line-strong);
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .v2-workbench-command-panel > summary.panel-header {
  display: none;
}

body.v2-shell:not(.is-public-landing) .v2-workbench-command-panel > summary.panel-header h2,
body.v2-shell:not(.is-public-landing) .v2-workbench-list-panel > .panel-header h2,
body.v2-shell:not(.is-public-landing) .v2-onboarding-state-panel > .panel-header h2 {
  font-size: 16px;
  font-weight: 600;
}

body.v2-shell:not(.is-public-landing) .v2-workbench-command-panel > summary.panel-header::after {
  display: none;
}

body.v2-shell:not(.is-public-landing) .v2-workbench-command-panel .panel-actions {
  align-items: center;
}

body.v2-shell:not(.is-public-landing) .v2-workbench-command-panel .journey-command-center {
  gap: 0;
  padding: 0;
}

body.v2-shell:not(.is-public-landing) .v2-sandbox-launch-panel {
  order: 0;
  padding: 0;
  overflow: hidden;
  border-color: var(--v2-line-strong);
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .v2-sandbox-launch-panel > .panel-header {
  min-height: 52px;
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .v2-sandbox-launch-panel > .panel-header h2 {
  font-size: 16px;
  font-weight: 600;
}

body.v2-shell:not(.is-public-landing) .v2-sandbox-launch-panel > .panel-header p {
  max-width: 760px;
  color: var(--v2-muted);
  font-size: 12px;
  line-height: 1.35;
}

body.v2-shell:not(.is-public-landing) .sandbox-launch {
  display: grid;
  gap: 0;
}

body.v2-shell:not(.is-public-landing) .sandbox-chat {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(360px, 1.05fr);
  gap: 0;
  border-bottom: 1px solid var(--v2-line);
  background: linear-gradient(180deg, var(--lugn-surface) 0%, var(--lugn-sunken) 100%);
}

body.v2-shell:not(.is-public-landing) .sandbox-chat-thread {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border-right: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .sandbox-chat-message {
  display: grid;
  gap: 5px;
  min-width: 0;
  max-width: 680px;
}

body.v2-shell:not(.is-public-landing) .sandbox-chat-message > span {
  color: var(--lugn-ink-secondary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

body.v2-shell:not(.is-public-landing) .sandbox-chat-message > strong {
  color: var(--v2-ink);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

body.v2-shell:not(.is-public-landing) .sandbox-chat-message > p {
  max-width: 620px;
  margin: 0;
  color: var(--v2-muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

body.v2-shell:not(.is-public-landing) .sandbox-workflow-promise {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  max-width: 420px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

body.v2-shell:not(.is-public-landing) .sandbox-workflow-promise li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

body.v2-shell:not(.is-public-landing) .sandbox-workflow-promise li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lugn-action) 48%, transparent);
}

body.v2-shell:not(.is-public-landing) .sandbox-chat-message.is-result {
  padding-top: 10px;
  border-top: 1px solid var(--v2-line);
}

/* Clean company Q&A chat: the operator's questions sit to the right, the assistant's
   grounded answers to the left (ChatGPT-like). Layout/tone only — reuses message tokens. */
body.v2-shell:not(.is-public-landing) .sandbox-chat-message.is-user {
  justify-self: end;
  max-width: 80%;
  text-align: right;
  color: var(--v2-ink);
}

body.v2-shell:not(.is-public-landing) .sandbox-chat-message.is-thinking {
  opacity: 0.7;
}

body.v2-shell:not(.is-public-landing) .company-chat-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  color: var(--v2-muted);
  font-size: 12px;
}

/* Grounded suggested-question buttons — make "ask anything" discoverable + powerful
   without overpromising. Shown only in the empty greeting state. */
body.v2-shell:not(.is-public-landing) .company-chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.v2-shell:not(.is-public-landing) .company-chat-suggestion {
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  background: transparent;
  color: var(--v2-ink);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

body.v2-shell:not(.is-public-landing) .company-chat-suggestion:hover {
  border-color: var(--v2-ink);
}

/* Trust Center — CFO-signable read-only evidence: write-lock proof + per-connector
   dataset read ledger. Layout + tokenised surfaces only; the table reuses .data-table. */
body.v2-shell:not(.is-public-landing) .trust-center {
  display: grid;
  gap: 14px;
}

body.v2-shell:not(.is-public-landing) .trust-center-proof {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--v2-line);
  border-radius: 12px;
}

body.v2-shell:not(.is-public-landing) .trust-center-proof > strong {
  color: var(--v2-ink);
}

body.v2-shell:not(.is-public-landing) .trust-center-proof > span {
  color: var(--v2-muted);
  font-size: 13px;
}

body.v2-shell:not(.is-public-landing) .trust-center-connectors {
  display: grid;
  gap: 12px;
}

body.v2-shell:not(.is-public-landing) .trust-center-connector-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

body.v2-shell:not(.is-public-landing) .trust-center-ledger {
  width: 100%;
}

body.v2-shell:not(.is-public-landing) .sandbox-chat-promote {
  justify-self: start;
  min-height: 30px;
  margin-top: 3px;
  border-radius: 8px;
  font-size: 12px;
}

body.v2-shell:not(.is-public-landing) .sandbox-chat-compose {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 16px;
}

body.v2-shell:not(.is-public-landing) .sandbox-story-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .sandbox-story-head strong {
  min-width: 0;
  color: var(--v2-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

body.v2-shell:not(.is-public-landing) .sandbox-story-head span {
  min-width: 0;
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.25;
  text-align: right;
  overflow-wrap: anywhere;
}

body.v2-shell:not(.is-public-landing) .sandbox-chat-readiness {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .sandbox-chat-readiness-item {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--v2-line);
  border-radius: 8px;
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .sandbox-chat-readiness-item.success {
  border-color: color-mix(in srgb, var(--v2-success) 32%, var(--v2-line));
  background: color-mix(in srgb, var(--v2-success) 6%, var(--lugn-surface));
}

body.v2-shell:not(.is-public-landing) .sandbox-chat-readiness-item strong,
body.v2-shell:not(.is-public-landing) .sandbox-chat-readiness-item em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell:not(.is-public-landing) .sandbox-chat-readiness-item strong {
  color: var(--v2-ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
}

body.v2-shell:not(.is-public-landing) .sandbox-chat-readiness-item em {
  color: var(--lugn-ink-secondary);
  font-size: 11px;
  font-style: normal;
  line-height: 1.1;
}

body.v2-shell:not(.is-public-landing) .sandbox-chat-input {
  display: grid;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .sandbox-chat-input textarea {
  width: 100%;
  min-height: 116px;
  resize: vertical;
  border: 1px solid var(--v2-line-strong);
  border-radius: 8px;
  background: var(--lugn-surface);
  color: var(--v2-ink);
  font: 500 13px/1.48 var(--v2-font);
  outline: none;
}

body.v2-shell:not(.is-public-landing) .sandbox-chat-input textarea:focus {
  border-color: var(--v2-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lugn-action) 12%, transparent);
}

body.v2-shell:not(.is-public-landing) .sandbox-prompt-starters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .sandbox-prompt-starter {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid var(--v2-line);
  border-radius: 8px;
  background: var(--lugn-surface);
  color: var(--v2-ink);
  text-align: left;
  cursor: pointer;
}

body.v2-shell:not(.is-public-landing) .sandbox-prompt-starter:hover,
body.v2-shell:not(.is-public-landing) .sandbox-prompt-starter:focus-visible,
body.v2-shell:not(.is-public-landing) .sandbox-prompt-starter.is-selected {
  border-color: color-mix(in srgb, var(--lugn-action) 42%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lugn-action) 8%, transparent);
  outline: none;
}

body.v2-shell:not(.is-public-landing) .sandbox-prompt-starter.is-selected {
  background: var(--lugn-action-subtle);
}

body.v2-shell:not(.is-public-landing) .sandbox-prompt-starter strong {
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

body.v2-shell:not(.is-public-landing) .sandbox-prompt-starter span {
  min-width: 0;
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

body.v2-shell:not(.is-public-landing) .sandbox-chat-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .sandbox-chat-submit,
body.v2-shell:not(.is-public-landing) .sandbox-chat-actions .sandbox-launch-action {
  min-height: 34px;
  border-radius: 8px;
  font-size: 12px;
}

body.v2-shell:not(.is-public-landing) .sandbox-launch-summary {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(360px, 0.72fr);
  align-items: stretch;
  min-width: 0;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .sandbox-launch-summary > div:first-child {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 74px;
  padding: 14px 16px;
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--lugn-action) 64%, transparent);
}

body.v2-shell:not(.is-public-landing) .sandbox-launch-summary strong {
  min-width: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

body.v2-shell:not(.is-public-landing) .sandbox-launch-summary span {
  display: block;
  max-width: 100%;
  min-width: 0;
  color: var(--v2-muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

body.v2-shell:not(.is-public-landing) .sandbox-launch-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
  border-left: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .sandbox-launch-metrics div {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 74px;
  padding: 10px 12px;
  border-right: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .sandbox-launch-metrics div:last-child {
  border-right: 0;
}

body.v2-shell:not(.is-public-landing) .sandbox-launch-metrics span {
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Sandbox launch metric value — sans tabular like every other metric (design §3),
   dropping the lone mono treatment so the metric family reads as one. */
body.v2-shell:not(.is-public-landing) .sandbox-launch-metrics strong {
  font-size: var(--lugn-text-lg);
  font-variant-numeric: tabular-nums;
}

body.v2-shell:not(.is-public-landing) .sandbox-launch-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .sandbox-launch-steps li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  min-height: 58px;
  padding: 11px 12px;
  border-right: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .sandbox-launch-steps li:last-child {
  border-right: 0;
}

body.v2-shell:not(.is-public-landing) .sandbox-launch-steps li > span {
  width: 10px;
  height: 10px;
  margin-top: 3px;
  border: 1px solid var(--v2-line-strong);
  border-radius: 999px;
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .sandbox-launch-steps li.done > span,
body.v2-shell:not(.is-public-landing) .sandbox-launch-steps li.current > span {
  border-color: var(--v2-accent);
  background: var(--v2-accent);
}

body.v2-shell:not(.is-public-landing) .sandbox-launch-steps li.pending > span {
  border-color: color-mix(in srgb, var(--lugn-action) 32%, transparent);
  background: color-mix(in srgb, var(--lugn-action) 10%, transparent);
}

body.v2-shell:not(.is-public-landing) .sandbox-launch-steps li.locked {
  color: var(--v2-muted);
}

body.v2-shell:not(.is-public-landing) .sandbox-launch-steps strong {
  display: block;
  min-width: 0;
  color: var(--v2-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

body.v2-shell:not(.is-public-landing) .sandbox-launch-steps small {
  display: block;
  min-width: 0;
  margin-top: 2px;
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

body.v2-shell:not(.is-public-landing) .sandbox-building-block-queue {
  display: grid;
  min-width: 0;
  border-bottom: 1px solid var(--v2-line);
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .sandbox-queue-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .sandbox-queue-header > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .sandbox-queue-header strong {
  color: var(--v2-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

body.v2-shell:not(.is-public-landing) .sandbox-queue-header span {
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.3;
}

body.v2-shell:not(.is-public-landing) .sandbox-queue-list {
  display: grid;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .sandbox-queue-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(128px, auto);
  gap: 14px;
  min-width: 0;
  padding: 13px 16px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .sandbox-queue-row:last-child {
  border-bottom: 0;
}

body.v2-shell:not(.is-public-landing) .sandbox-queue-row.is-ready {
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--lugn-success-fg) 72%, transparent);
}

body.v2-shell:not(.is-public-landing) .sandbox-queue-row.is-promoted {
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--lugn-action) 58%, transparent);
}

body.v2-shell:not(.is-public-landing) .sandbox-queue-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .sandbox-queue-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .sandbox-queue-title-row strong {
  min-width: 0;
  color: var(--v2-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

body.v2-shell:not(.is-public-landing) .sandbox-queue-main p {
  max-width: 820px;
  margin: 0;
  color: var(--v2-muted);
  font-size: 12px;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

body.v2-shell:not(.is-public-landing) .sandbox-queue-drafts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

/* Sandbox draft chip — compat-alias re-pointed onto the canonical .status-pill
   recipe (design §1). A draft is not-yet-built, so at rest it reads as the
   restrained INACTIVE state: a near-transparent ground + a hairline border + the
   muted localized WORD, never a saturated filled lozenge. The two stage variants
   are the restrained tint recipe (≤10% wash + a hairline in the same hue + the fg
   colour), pairing the hue with the word — never colour alone. */
body.v2-shell:not(.is-public-landing) .sandbox-draft-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--lugn-space-compact);
  max-width: 100%;
  min-height: var(--lugn-control-height-compact);
  padding: 0 var(--lugn-space-3);
  border: var(--lugn-divider) solid var(--lugn-hairline);
  border-radius: var(--lugn-radius-pill);
  background: transparent;
  color: var(--v2-muted);
  font-size: var(--lugn-text-label);
  font-weight: var(--lugn-weight-medium);
  line-height: var(--lugn-leading-tight);
  overflow-wrap: anywhere;
}

body.v2-shell:not(.is-public-landing) .sandbox-draft-chip.ready_for_review {
  border-color: color-mix(in srgb, var(--lugn-success-fg) 24%, transparent);
  background: color-mix(in srgb, var(--lugn-success-fg) 7%, transparent);
  color: var(--lugn-success-fg);
}

body.v2-shell:not(.is-public-landing) .sandbox-draft-chip.accepted {
  border-color: color-mix(in srgb, var(--lugn-action) 24%, transparent);
  background: color-mix(in srgb, var(--lugn-action) 7%, transparent);
  color: var(--lugn-action-strong);
}

body.v2-shell:not(.is-public-landing) .sandbox-queue-meta {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 6px;
  min-width: 0;
  text-align: right;
}

body.v2-shell:not(.is-public-landing) .sandbox-queue-meta span {
  color: var(--v2-ink);
  font-family: var(--v2-font-mono);
  font-size: 11px;
  font-weight: 600;
}

body.v2-shell:not(.is-public-landing) .sandbox-queue-meta small {
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.25;
}

body.v2-shell:not(.is-public-landing) .sandbox-launch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
}

body.v2-shell:not(.is-public-landing) .sandbox-launch-action {
  min-height: 32px;
  border-radius: 8px;
  font-size: 12px;
}

body.v2-shell:not(.is-public-landing) .journey-overview {
  grid-template-columns: minmax(230px, 0.32fr) minmax(280px, 1fr) auto;
  gap: 18px;
  min-height: 82px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .journey-overview strong {
  margin-bottom: 4px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

body.v2-shell:not(.is-public-landing) .journey-overview span {
  font-size: 12px;
}

/* Progress bar (design §4) — one 4px ink-pill recipe. journey-progress gains its
   missing ::value fill so the track actually paints. */
body.v2-shell:not(.is-public-landing) .journey-progress {
  width: 100%;
  height: 4px;
  border: 0;
  border-radius: var(--lugn-radius-pill);
  background: var(--lugn-sunken);
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

body.v2-shell:not(.is-public-landing) .journey-progress::-webkit-progress-bar {
  border-radius: var(--lugn-radius-pill);
  background: var(--lugn-sunken);
}

body.v2-shell:not(.is-public-landing) .journey-progress::-webkit-progress-value {
  border-radius: var(--lugn-radius-pill);
  background: var(--lugn-action);
}

body.v2-shell:not(.is-public-landing) .journey-progress::-moz-progress-bar {
  border-radius: var(--lugn-radius-pill);
  background: var(--lugn-action);
}

body.v2-shell:not(.is-public-landing) .journey-action {
  min-width: 148px;
  min-height: 34px;
  border-radius: 8px;
}

body.v2-shell:not(.is-public-landing) .journey-overview-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .journey-overview-actions .status-pill {
  min-height: 34px;
  padding: 0 12px;
}

/* --- Real guided onboarding wizard (first-value stepper + deferred go-live) --- */
body.v2-shell:not(.is-public-landing) .journey-wizard {
  display: grid;
  gap: 14px;
  padding: 16px;
}
body.v2-shell:not(.is-public-landing) .journey-wizard-head {
  display: grid;
  gap: 8px;
}
body.v2-shell:not(.is-public-landing) .journey-wizard-head strong {
  font-size: 15px;
  font-weight: 600;
}
body.v2-shell:not(.is-public-landing) .journey-wizard-head span {
  font-size: 12px;
  color: var(--v2-muted, var(--lugn-muted));
}
body.v2-shell:not(.is-public-landing) .journey-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
body.v2-shell:not(.is-public-landing) .journey-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--v2-line, var(--lugn-hairline));
  border-radius: 10px;
  background: var(--lugn-surface);
}
body.v2-shell:not(.is-public-landing) .journey-step.is-current {
  border-color: color-mix(in srgb, var(--lugn-action) 55%, transparent);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--lugn-action) 64%, transparent);
}
body.v2-shell:not(.is-public-landing) .journey-step.is-upcoming {
  opacity: 0.62;
}
body.v2-shell:not(.is-public-landing) .journey-step-index {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  background: var(--lugn-sunken);
  color: var(--lugn-ink-secondary);
}
body.v2-shell:not(.is-public-landing) .journey-step.is-done .journey-step-index {
  background: var(--lugn-success-fg);
  color: var(--lugn-on-accent);
}
body.v2-shell:not(.is-public-landing) .journey-step.is-current .journey-step-index {
  background: var(--lugn-action);
  color: var(--lugn-on-accent);
}
body.v2-shell:not(.is-public-landing) .journey-step-body strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
}
body.v2-shell:not(.is-public-landing) .journey-step-body small {
  font-size: 11px;
  color: var(--v2-muted, var(--lugn-muted));
}
body.v2-shell:not(.is-public-landing) .journey-next {
  display: flex;
  justify-content: flex-start;
}
body.v2-shell:not(.is-public-landing) .journey-golive {
  border: 1px solid var(--v2-line, var(--lugn-hairline));
  border-radius: 10px;
  background: var(--lugn-canvas);
  padding: 0;
}
body.v2-shell:not(.is-public-landing) .journey-golive > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 13px;
}
body.v2-shell:not(.is-public-landing) .journey-golive-note {
  margin: 0;
  padding: 0 14px 8px;
  font-size: 11px;
  color: var(--v2-muted, var(--lugn-muted));
}
body.v2-shell:not(.is-public-landing) .journey-golive-list {
  list-style: none;
  margin: 0;
  padding: 0 14px 12px;
  display: grid;
  gap: 6px;
}
body.v2-shell:not(.is-public-landing) .journey-golive-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
body.v2-shell:not(.is-public-landing) .journey-golive-item small {
  display: block;
  font-size: 11px;
  color: var(--v2-muted, var(--lugn-muted));
}
body.v2-shell:not(.is-public-landing) .journey-golive-action {
  padding: 0 14px 12px;
}

body.v2-shell:not(.is-public-landing) .journey-focus-gate {
  grid-template-columns: minmax(0, 1.2fr) minmax(190px, 0.48fr);
  gap: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--v2-line);
  border-radius: 0;
  background: var(--lugn-surface);
  box-shadow: inset 2px 0 0 rgba(0, 122, 255, 0.64);
}

body.v2-shell:not(.is-public-landing) .journey-focus-main {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  padding: 12px 16px;
}

body.v2-shell:not(.is-public-landing) .journey-focus-evidence,
body.v2-shell:not(.is-public-landing) .journey-focus-evidence-list span,
body.v2-shell:not(.is-public-landing) .journey-milestone,
body.v2-shell:not(.is-public-landing) .metric {
  border-color: var(--v2-line);
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .journey-focus-main strong,
body.v2-shell:not(.is-public-landing) .journey-focus-evidence strong {
  font-size: 12px;
  font-weight: 600;
}

body.v2-shell:not(.is-public-landing) .journey-focus-main p,
body.v2-shell:not(.is-public-landing) .journey-focus-evidence span,
body.v2-shell:not(.is-public-landing) .journey-focus-evidence-list small {
  font-size: 11px;
}

body.v2-shell:not(.is-public-landing) .journey-focus-evidence-list {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 0 16px 12px;
}

body.v2-shell:not(.is-public-landing) .journey-focus-evidence {
  align-content: center;
  min-height: 56px;
  margin: 10px 12px 10px 0;
  border-color: var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .journey-focus-evidence-list span {
  border-radius: 0;
  border-right: 0;
}

body.v2-shell:not(.is-public-landing) .journey-focus-evidence-list span:first-child {
  border-radius: 8px 0 0 8px;
}

body.v2-shell:not(.is-public-landing) .journey-focus-evidence-list span:last-child {
  border-right: 1px solid var(--v2-line);
  border-radius: 0 8px 8px 0;
}

body.v2-shell:not(.is-public-landing) .journey-milestones {
  display: none;
}

body.v2-shell:not(.is-public-landing) .journey-milestone {
  counter-increment: workbench-stage;
  position: relative;
  justify-items: center;
  align-content: start;
  grid-template-columns: 1fr;
  gap: 6px;
  min-height: 74px;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  text-align: center;
}

body.v2-shell:not(.is-public-landing) .journey-milestone::before {
  content: counter(workbench-stage);
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid var(--v2-line-strong);
  border-radius: 999px;
  background: var(--lugn-surface);
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
}

body.v2-shell:not(.is-public-landing) .journey-milestone:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 13px;
  right: calc(-50% + 13px);
  width: calc(100% - 26px);
  height: 1px;
  background: var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .journey-milestone .status-pill {
  order: 2;
  min-height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 11px;
  text-transform: uppercase;
}

body.v2-shell:not(.is-public-landing) .journey-milestone strong {
  order: 1;
  font-size: 11px;
}

body.v2-shell:not(.is-public-landing) .journey-milestone > span:last-child {
  display: none;
}

body.v2-shell:not(.is-public-landing) .v2-workbench-primary-grid {
  order: 2;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.72fr);
  gap: 12px;
}

body.v2-shell:not(.is-public-landing) .v2-workbench-list-panel,
body.v2-shell:not(.is-public-landing) .v2-onboarding-state-panel {
  padding: 0;
  overflow: hidden;
  border-color: var(--v2-line-strong);
}

body.v2-shell:not(.is-public-landing) .v2-workbench-list-panel > .panel-header,
body.v2-shell:not(.is-public-landing) .v2-onboarding-state-panel > .panel-header {
  min-height: 52px;
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .workbench-list {
  gap: 0;
}

body.v2-shell:not(.is-public-landing) .workbench-focus,
body.v2-shell:not(.is-public-landing) .workbench-runway-focus {
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--v2-line);
  border-radius: 0;
  background: var(--lugn-surface);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--lugn-action) 64%, transparent);
}

body.v2-shell:not(.is-public-landing) .workbench-queue-summary {
  gap: 0;
  padding: 10px 16px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .workbench-queue-button {
  min-height: 36px;
  padding: 6px 10px;
  border-color: var(--v2-line);
  border-radius: 0;
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .workbench-queue-button:first-child {
  border-radius: 8px 0 0 8px;
}

body.v2-shell:not(.is-public-landing) .workbench-queue-button:last-child {
  border-radius: 0 8px 8px 0;
}

body.v2-shell:not(.is-public-landing) .workbench-queue-button + .workbench-queue-button {
  border-left: 0;
}

body.v2-shell:not(.is-public-landing) .workbench-queue-button.is-active {
  border-color: color-mix(in srgb, var(--lugn-action) 24%, transparent);
  background: var(--lugn-action-subtle);
}

body.v2-shell:not(.is-public-landing) .workbench-section,
body.v2-shell:not(.is-public-landing) .workbench-item {
  border-color: var(--v2-line);
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .workbench-section {
  border: 0;
  border-radius: 0;
}

body.v2-shell:not(.is-public-landing) .workbench-section-summary {
  min-height: 42px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--v2-line);
  background: var(--lugn-canvas);
}

body.v2-shell:not(.is-public-landing) .workbench-section-body {
  gap: 0;
}

body.v2-shell:not(.is-public-landing) .workbench-ledger {
  display: grid;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-header,
body.v2-shell:not(.is-public-landing) .workbench-ledger-row {
  display: grid;
  grid-template-columns:
    minmax(260px, 1fr)
    minmax(88px, 0.28fr)
    minmax(96px, 0.3fr)
    minmax(118px, 0.34fr)
    minmax(150px, 0.46fr);
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-header {
  min-height: 30px;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--v2-line);
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-header span {
  min-width: 0;
  overflow: hidden;
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-header span:nth-child(4),
body.v2-shell:not(.is-public-landing) .workbench-ledger-header span:nth-child(5),
body.v2-shell:not(.is-public-landing) .workbench-ledger-cell[data-task-field="source"],
body.v2-shell:not(.is-public-landing) .workbench-ledger-cell[data-task-field="record"] {
  display: none;
}

body.v2-shell:not(.is-public-landing) .workbench-item {
  display: grid;
  gap: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--v2-line);
  border-radius: 0;
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-row {
  align-items: stretch;
  min-height: 68px;
}

body.v2-shell:not(.is-public-landing) .workbench-section:first-of-type .workbench-ledger-row:first-of-type {
  box-shadow: inset 2px 0 0 var(--v2-accent);
}

body.v2-shell:not(.is-public-landing) .workbench-item-summary {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 54px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-main,
body.v2-shell:not(.is-public-landing) .workbench-ledger-cell,
body.v2-shell:not(.is-public-landing) .workbench-ledger-status,
body.v2-shell:not(.is-public-landing) .workbench-ledger-actions {
  min-width: 0;
  min-height: 72px;
  padding: 10px 12px;
  border-right: 1px solid var(--v2-line);
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-actions {
  border-right: 0;
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-main.workbench-item-summary {
  display: grid;
  align-content: center;
  min-height: 72px;
  padding: 10px 16px;
  border-bottom: 0;
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-title small {
  overflow: visible;
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

body.v2-shell:not(.is-public-landing) .workbench-item-body {
  display: grid;
  gap: 9px;
  padding: 10px 16px 12px;
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-detail.workbench-item-body {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  padding: 0 16px 12px;
  color: var(--v2-muted);
  font-size: 12px;
  line-height: 1.35;
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-trace {
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.3;
}

body.v2-shell:not(.is-public-landing) .workbench-task-fields {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--v2-line);
  border-radius: 8px;
}

body.v2-shell:not(.is-public-landing) .workbench-task-field {
  min-height: 44px;
  padding: 7px 9px;
  border-right: 1px solid var(--v2-line);
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-cell.workbench-task-field,
body.v2-shell:not(.is-public-landing) .workbench-ledger-row > .workbench-due-field {
  display: grid;
  align-content: center;
  gap: 3px;
  min-height: 72px;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-row > .workbench-due-field {
  border-right: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-cell small,
body.v2-shell:not(.is-public-landing) .workbench-ledger-row > .workbench-due-field > small {
  display: none;
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-cell strong,
body.v2-shell:not(.is-public-landing) .workbench-ledger-row > .workbench-due-field strong {
  overflow: visible;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-cell.workbench-task-field[data-task-field="source"],
body.v2-shell:not(.is-public-landing) .workbench-ledger-cell.workbench-task-field[data-task-field="record"] {
  display: none;
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-row > .workbench-due-field .workbench-due-trigger {
  justify-items: start;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-row > .workbench-due-field .workbench-due-trigger small {
  color: var(--v2-accent);
  font-size: 11px;
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-status {
  display: grid;
  align-content: center;
  justify-items: start;
}

body.v2-shell:not(.is-public-landing) .workbench-task-field:last-child {
  border-right: 0;
}

body.v2-shell:not(.is-public-landing) .workbench-action-strip {
  justify-content: flex-start;
  gap: 6px;
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-actions .workbench-action-strip {
  flex-wrap: wrap;
  justify-content: flex-start;
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-actions .workbench-status-actions {
  gap: 5px;
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-actions .setup-action-control {
  display: contents;
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-actions .workbench-command-button {
  min-height: 28px;
  padding: 0 9px;
  font-size: 11px;
}

body.v2-shell:not(.is-public-landing) .workbench-command-button {
  min-height: 30px;
  border-radius: 8px;
}

body.v2-shell:not(.is-public-landing) .workbench-ledger-detail .workbench-output {
  margin-top: 0;
  padding: 7px 10px;
  border-left-width: 2px;
  border-radius: 8px;
  background: var(--lugn-canvas);
}

/* Signed-in shell readout — the v2 workbench + lens metric grids render as a
   single-column label↔value list (the de-carded HOME shape). The shared `.metric`
   base (design §3) now carries the borderless divider geometry; this context only
   pins the column count to 1 + the in-row label/value layout. A per-surface slice
   raises `--metric-cols` where a multi-column strip is wanted. */
body.v2-shell:not(.is-public-landing) .metric-grid {
  --metric-cols: 1;
  gap: 0;
  padding: 0;
  border-bottom: var(--lugn-divider) solid var(--lugn-hairline);
}

body.v2-shell:not(.is-public-landing) .metric {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-right: 0;
}

body.v2-shell:not(.is-public-landing) .v2-workbench-secondary-row,
body.v2-shell:not(.is-public-landing) .workbench-secondary-panel,
body.v2-shell:not(.is-public-landing) #teamSetupPanel,
body.v2-shell:not(.is-public-landing) .safety-review-panel {
  padding: 0 14px;
  border-color: var(--v2-line);
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .workbench-secondary-panel {
  order: 3;
}

body.v2-shell:not(.is-public-landing) #teamSetupPanel {
  order: 4;
}

body.v2-shell:not(.is-public-landing) .safety-review-panel {
  order: 5;
}

body.v2-shell:not(.is-public-landing) .v2-workbench-secondary-row > summary.panel-header {
  min-height: 52px;
  margin: 0;
}

body.v2-shell:not(.is-public-landing) .v2-workbench-secondary-row > summary.panel-header::after {
  width: 24px;
  min-height: 24px;
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .panel,
body.v2-shell:not(.is-public-landing) .access-panel,
body.v2-shell:not(.is-public-landing) .module-workspace {
  border-color: var(--v2-line);
  background: var(--lugn-surface);
  box-shadow: none;
}

body.v2-shell:not(.is-public-landing) .v2-modules-view.active,
body.v2-shell:not(.is-public-landing) .v2-integrations-view.active {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel,
body.v2-shell:not(.is-public-landing) .v2-integrations-panel {
  padding: 0;
  overflow: visible;
  border: 0;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel > .panel-header,
body.v2-shell:not(.is-public-landing) .v2-integrations-panel > .panel-header {
  min-height: 58px;
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel > .panel-header h2,
body.v2-shell:not(.is-public-landing) .v2-integrations-panel > .panel-header h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel > .provider-ledger-toolbar {
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel > .provider-ledger-toolbar p {
  margin-top: 5px;
  color: var(--v2-muted);
  font-size: 12px;
  line-height: 1.2;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel > .provider-ledger-toolbar .panel-actions {
  align-items: center;
  justify-content: flex-end;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel > .provider-ledger-toolbar #runAllSyncsButton {
  min-height: 34px;
  padding: 0 6px;
  border-color: transparent;
  background: transparent;
  color: var(--v2-accent);
  font-size: 13px;
  font-weight: 600;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel > .provider-ledger-toolbar #runAllSyncsButton:disabled {
  color: var(--v2-muted);
  opacity: 0.55;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel > .provider-ledger-toolbar #runAllSyncsButton:hover:not(:disabled) {
  background: var(--lugn-action-subtle);
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel > .panel-header p {
  max-width: 360px;
  font-size: 12px;
  line-height: 1.35;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-operating-map {
  grid-template-columns: minmax(150px, 0.24fr) minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-map-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body.v2-shell:not(.is-public-landing) .module-inspector,
body.v2-shell:not(.is-public-landing) .module-inspector-facts div,
body.v2-shell:not(.is-public-landing) .module-inspector-rule {
  border-color: var(--v2-line);
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-map-summary div {
  min-height: 50px;
  padding: 8px;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-map-summary strong {
  font-size: 18px;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-anchor-flow {
  grid-template-columns: auto repeat(5, minmax(92px, 1fr));
  min-height: 50px;
  padding: 8px;
  overflow-x: auto;
}

/* P1 FIX(2): de-card the posture mini-card. It was a filled surface box
   (the styles.css base draws border:1px + radius:8, the shared rule fills it
   with surface). Per card §2 it is a transparent in-flow group with a single
   top hairline; the cells keep only the inter-cell left-hairline divider. */
body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-map-posture {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-top: 1px solid var(--v2-line);
  border-radius: 0;
  background: transparent;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-map-posture div {
  gap: 3px;
  padding: 10px;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-map-posture div + div {
  padding-top: 10px;
  border-top: 0;
  border-left: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-map-posture small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-flow-node {
  min-height: 36px;
  padding: 7px 8px;
  border-color: var(--v2-line);
  background: var(--lugn-sunken);
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-flow-node strong {
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-grid {
  display: grid;
  gap: 0;
  padding: 0;
}

body.v2-shell:not(.is-public-landing) .v2-modules-view.has-active-module-context .v2-modules-panel {
  display: none;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-ledger-header,
body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-ledger-row {
  display: grid;
  grid-template-columns:
    minmax(230px, 1fr)
    minmax(132px, 0.58fr)
    minmax(142px, 0.62fr)
    minmax(250px, 1.12fr)
    minmax(104px, auto);
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-ledger-header {
  min-height: 34px;
  align-items: center;
  padding: 0 16px;
  border-top: 1px solid var(--v2-line);
  border-bottom: 1px solid var(--v2-line);
  background: var(--lugn-canvas);
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-ledger-header span {
  min-width: 0;
  overflow: hidden;
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-card.module-ledger-row {
  align-items: stretch;
  gap: 0;
  min-height: 82px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--v2-line);
  border-radius: 0;
  /* De-carded: transparent in-flow row on the canvas, structure from the bottom
     hairline; no surface fill. */
  background: transparent;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-card.module-ledger-row.is-selected {
  background: var(--lugn-action-subtle);
}

body.v2-shell:not(.is-public-landing) .module-ledger-module,
body.v2-shell:not(.is-public-landing) .module-ledger-cell,
body.v2-shell:not(.is-public-landing) .module-ledger-actions {
  min-width: 0;
  padding: 12px 12px;
  border-right: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .module-ledger-module {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-content: center;
  padding-left: 16px;
}

body.v2-shell:not(.is-public-landing) .module-ledger-glyph {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  align-self: start;
  border: 1px solid var(--v2-line);
  border-radius: 8px;
  background: var(--lugn-sunken);
  color: var(--v2-text);
  font-size: 11px;
  font-weight: 600;
}

body.v2-shell:not(.is-public-landing) .module-ledger-module > span:last-child,
body.v2-shell:not(.is-public-landing) .module-ledger-cell {
  display: grid;
  align-content: center;
  gap: 3px;
}

body.v2-shell:not(.is-public-landing) .module-ledger-module strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

body.v2-shell:not(.is-public-landing) .module-ledger-module small,
body.v2-shell:not(.is-public-landing) .module-ledger-cell span {
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}

body.v2-shell:not(.is-public-landing) .module-ledger-module em,
body.v2-shell:not(.is-public-landing) .module-ledger-cell small {
  color: var(--v2-muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

body.v2-shell:not(.is-public-landing) .module-ledger-module em {
  display: none;
}

body.v2-shell:not(.is-public-landing) .module-ledger-cell strong {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* At-a-glance module run-status glyph (play/pause/stop) ahead of the status label —
   inherits the cell's status colour via currentColor, no glyph-/colour-only meaning. */
body.v2-shell:not(.is-public-landing) .module-ledger-cell[data-module-ledger-cell="status"] strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.v2-shell:not(.is-public-landing) .module-status-glyph {
  display: inline-flex;
  flex: none;
}

body.v2-shell:not(.is-public-landing) .module-status-glyph .lugn-icon {
  width: 15px;
  height: 15px;
}

body.v2-shell:not(.is-public-landing) .module-ledger-cell.ready {
  color: inherit;
}

body.v2-shell:not(.is-public-landing) .module-ledger-cell.planned {
  color: inherit;
}

body.v2-shell:not(.is-public-landing) .module-ledger-cell.blocked {
  color: inherit;
}

body.v2-shell:not(.is-public-landing) .module-ledger-cell.locked {
  color: inherit;
}

body.v2-shell:not(.is-public-landing) .module-ledger-cell[data-module-ledger-cell="status"] strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

body.v2-shell:not(.is-public-landing) .module-ledger-cell[data-module-ledger-cell="status"] strong::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--v2-accent);
}

body.v2-shell:not(.is-public-landing) .module-ledger-cell[data-module-ledger-cell="status"].locked strong::before {
  background: var(--lugn-muted);
}

body.v2-shell:not(.is-public-landing) .module-ledger-cell[data-module-ledger-cell="status"].planned strong::before {
  background: var(--lugn-faint);
}

body.v2-shell:not(.is-public-landing) .module-ledger-cell[data-module-ledger-cell="status"].blocked strong::before {
  background: var(--v2-danger);
}

body.v2-shell:not(.is-public-landing) .module-ledger-actions {
  display: grid;
  align-content: center;
  justify-items: start;
  border-right: 0;
}

body.v2-shell:not(.is-public-landing) .module-ledger-actions .module-action {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-control-ledger,
body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-feed-ledger,
body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-evidence-ledger {
  border-color: var(--v2-line);
  background: var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-control-ledger div,
body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-feed-ledger div,
body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-evidence-ledger div {
  border-top-width: 2px;
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-action,
body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-actions > button,
body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-actions .setup-action-control > button,
body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-config-panel summary {
  border-radius: 8px;
}

body.v2-shell:not(.is-public-landing) .v2-module-workspace {
  order: 1;
  padding: 0;
  overflow: hidden;
}

body.v2-shell:not(.is-public-landing) .v2-module-workspace .module-inspector {
  padding: 16px;
  border: 0;
  border-bottom: 1px solid var(--v2-line);
  border-radius: 0;
}

body.v2-shell:not(.is-public-landing) .v2-module-workspace .module-workspace-stack {
  padding: 14px 16px 16px;
}

body.v2-shell:not(.is-public-landing) .v2-module-workspace .module-inspector-header h2 {
  font-size: 19px;
  font-weight: 600;
}

body.v2-shell:not(.is-public-landing) .v2-module-workspace .module-inspector-grid {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
}

body.v2-shell:not(.is-public-landing) .module-grain-contract {
  /* De-carded (Notion §2): an in-flow group, not a bordered surface card. The
     header keeps its single bottom hairline; the group itself is transparent on
     the canvas with one top hairline as the only outer rule. */
  display: grid;
  gap: 0;
  margin-top: 14px;
  overflow: hidden;
  border: 0;
  border-top: var(--lugn-divider) solid var(--lugn-hairline);
  border-radius: 0;
  background: transparent;
}

body.v2-shell:not(.is-public-landing) .module-grain-contract > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .module-grain-contract > header div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .module-grain-contract > header span:not(.status-pill),
body.v2-shell:not(.is-public-landing) .module-grain-column > header span,
body.v2-shell:not(.is-public-landing) .module-grain-row dt {
  color: var(--v2-muted);
  /* Definition-term label on the comfortable label step (audit: TYPOGRAPHY). */
  font-size: var(--lugn-text-label);
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
}

body.v2-shell:not(.is-public-landing) .module-grain-contract > header strong {
  color: var(--v2-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

body.v2-shell:not(.is-public-landing) .module-grain-contract > header small {
  overflow-wrap: anywhere;
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.3;
}

body.v2-shell:not(.is-public-landing) .module-grain-contract-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .module-grain-column {
  display: grid;
  align-content: start;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .module-grain-column + .module-grain-column {
  border-left: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .module-grain-column > header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .module-grain-column > header strong {
  color: var(--v2-text);
  font-size: 11px;
}

body.v2-shell:not(.is-public-landing) .module-grain-list {
  display: grid;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .module-grain-row {
  /* De-carded (Notion §2/§6): a transparent in-flow row separated by a single
     bottom hairline; the status cue is a 2px left rule (ink default), not an
     inset-shadow box. */
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 11px 12px;
  border-bottom: 1px solid var(--v2-line);
  border-inline-start: var(--lugn-space-1) solid var(--lugn-hairline);
}

body.v2-shell:not(.is-public-landing) .module-grain-row:last-child {
  border-bottom: 0;
}

body.v2-shell:not(.is-public-landing) .module-grain-row.ready {
  border-inline-start-color: var(--lugn-action);
}

body.v2-shell:not(.is-public-landing) .module-grain-row.pending {
  border-inline-start-color: var(--lugn-warning-fg);
}

body.v2-shell:not(.is-public-landing) .module-grain-row > div:first-child,
body.v2-shell:not(.is-public-landing) .module-grain-row dl {
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .module-grain-row strong {
  display: block;
  color: var(--v2-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

body.v2-shell:not(.is-public-landing) .module-grain-row small {
  display: -webkit-box;
  margin-top: 3px;
  overflow: hidden;
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.v2-shell:not(.is-public-landing) .module-grain-row dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 10px;
  margin: 0;
}

body.v2-shell:not(.is-public-landing) .module-grain-row dl div {
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .module-grain-row dd {
  min-width: 0;
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--v2-text);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell:not(.is-public-landing) .module-grain-action {
  justify-self: start;
  min-height: 30px;
  padding: 0 10px;
  font-size: 11px;
}

body.v2-shell:not(.is-public-landing) .module-grain-empty {
  /* Compat-alias onto the .empty-state idiom (Notion §9), scaled to the grain
     column: a calm centered muted line in a dashed hairline frame — not a plain
     muted <p>, not a filled box. */
  display: grid;
  place-items: center;
  min-height: 68px;
  margin: 8px 12px;
  padding: 12px;
  border: var(--lugn-divider) dashed var(--lugn-hairline);
  border-radius: var(--lugn-radius-sm);
  color: var(--lugn-muted);
  font-size: var(--lugn-text-xs);
  text-align: center;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .tenant-provider-ledger {
  display: grid;
  gap: 0;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-ledger-header,
body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-main-row {
  display: grid;
  grid-template-columns:
    minmax(238px, 1.18fr)
    minmax(142px, 0.64fr)
    minmax(156px, 0.72fr)
    minmax(152px, 0.7fr)
    minmax(210px, 0.92fr)
    minmax(144px, 0.54fr);
  align-items: center;
  gap: 0;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-ledger-header {
  min-height: 36px;
  padding: 0 16px;
  border-bottom: 1px solid var(--v2-line);
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* De-card recipe (§2): the provider ledger is an in-flow list of rows — the only
   structure is a single bottom hairline between rows, no fill, no radius, no shadow.
   .provider-card is the dynamically-rendered alias kept on the same <article>. */
body.v2-shell:not(.is-public-landing) .v2-integrations-panel .tenant-provider-row {
  display: grid;
  grid-template-areas: none;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--v2-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .tenant-provider-row:first-child {
  border-top: 0;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-main-row {
  min-height: 112px;
  padding: 0 16px;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-identity-cell {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-identity-cell > span:last-child {
  display: grid;
  gap: 5px;
  justify-items: start;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--v2-line);
  border-radius: 8px;
  background: var(--lugn-sunken);
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-mark.ready {
  border-color: color-mix(in srgb, var(--v2-success) 28%, var(--v2-line));
  background: color-mix(in srgb, var(--lugn-success-fg) 6%, transparent);
  color: var(--v2-success);
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-mark.planned {
  border-color: color-mix(in srgb, var(--v2-warning) 30%, var(--v2-line));
  background: color-mix(in srgb, var(--lugn-warning-fg) 6%, transparent);
  color: var(--v2-warning);
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-mark.blocked {
  border-color: color-mix(in srgb, var(--v2-danger) 30%, var(--v2-line));
  background: color-mix(in srgb, var(--lugn-danger-fg) 5%, transparent);
  color: var(--v2-danger);
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-identity-cell strong,
body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-cell strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--v2-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-identity-cell small,
body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-cell small {
  display: block;
  min-width: 0;
  margin-top: 4px;
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.25;
  white-space: normal;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-cell {
  min-width: 0;
  padding-right: 14px;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-status-cell strong,
body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-evidence-cell strong,
body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-last-read-cell.blocked strong {
  color: var(--v2-danger);
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-status-cell.success strong,
body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-evidence-cell.ready strong,
body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-last-read-cell.ready strong {
  color: var(--v2-success);
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-status-cell.warning strong,
body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-evidence-cell.planned strong,
body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-last-read-cell.planned strong {
  color: var(--v2-warning);
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-status-cell strong::before,
body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-last-read-cell strong::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 999px;
  background: currentColor;
  vertical-align: 0.08em;
}

/* Status indicator (§1): the connector-quality chip is a compat alias re-pointed
   onto the restrained .status-pill treatment — a near-transparent ground + a faint
   same-hue hairline + the localized quality WORD (never colour-only, never a filled
   lozenge). Quality bands map onto the canonical state hues:
   golden→success, silver→neutral/muted, bridge→warning. */
body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-quality-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--lugn-hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-quality-chip.quality-golden {
  border-color: color-mix(in srgb, var(--lugn-success-fg) 24%, transparent);
  background: color-mix(in srgb, var(--lugn-success-fg) 7%, transparent);
  color: var(--lugn-success-fg);
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-quality-chip.quality-silver {
  border-color: var(--lugn-hairline);
  background: transparent;
  color: var(--v2-muted);
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-quality-chip.quality-bridge {
  border-color: color-mix(in srgb, var(--lugn-warning-fg) 24%, transparent);
  background: color-mix(in srgb, var(--lugn-warning-fg) 7%, transparent);
  color: var(--lugn-warning-fg);
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-actions {
  display: flex;
  grid-area: auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-primary-actions > button,
body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-primary-actions .setup-action-control > button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
  white-space: nowrap;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-primary-actions .setup-action-control {
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-row-menu {
  flex: 0 0 34px;
  width: 34px;
  min-height: 34px;
  padding: 0;
  color: var(--v2-muted);
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-row-menu span {
  position: relative;
  top: -1px;
  font-size: 18px;
  line-height: 1;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-config-panel {
  display: none;
  border-top: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-config-panel[open] {
  display: block;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-config-panel summary {
  min-height: 42px;
  padding: 7px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-config-panel summary::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--v2-ink);
  border-bottom: 1.5px solid var(--v2-ink);
  transform: rotate(-45deg);
  transition: transform 140ms var(--lugn-ease-standard);
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-config-panel[open] summary::before {
  transform: rotate(45deg);
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-config-panel summary > span {
  flex: 1 1 auto;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-config-panel summary strong {
  font-size: 12px;
  font-weight: 500;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-config-panel summary small {
  font-weight: 500;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-config-panel summary em {
  color: var(--v2-accent);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  text-transform: none;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-config-body {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 0 16px 14px;
  border-top: 0;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-config-diagnostics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-feed-ledger,
body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-evidence-ledger {
  border-color: var(--v2-line);
  background: transparent;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-feed-ledger {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-evidence-ledger {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-feed-ledger div,
body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-evidence-ledger div {
  min-height: 68px;
  border-top-width: 2px;
  background: transparent;
}

body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-evidence-ledger div:last-child:nth-child(odd) {
  grid-column: auto !important;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel,
body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel,
body.v2-shell:not(.is-public-landing) .v2-module-owned-setup-panel {
  padding: 0;
  overflow: hidden;
  border-color: var(--v2-line-strong);
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel > .panel-header,
body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel > .panel-header,
body.v2-shell:not(.is-public-landing) .v2-module-owned-setup-panel > .panel-header {
  min-height: 58px;
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel > .panel-header h2,
body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel > .panel-header h2,
body.v2-shell:not(.is-public-landing) .v2-module-owned-setup-panel > .panel-header h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .panel-actions {
  align-items: center;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-overview {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 0;
  border-bottom: 1px solid var(--v2-line);
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-command {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  min-height: 52px;
  align-items: center;
  padding: 10px 16px;
  border-right: 0;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-command > div {
  gap: 5px;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-command span:not(.status-pill) {
  font-size: 11px;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-command strong {
  max-width: 680px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-command .status-pill {
  justify-self: end;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-action {
  justify-self: end;
  min-height: 32px;
  border-radius: 8px;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-track {
  counter-reset: procurement-stage;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
  padding: 16px 18px 12px;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-stage {
  counter-increment: procurement-stage;
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 7px;
  min-height: 82px;
  padding: 0 8px;
  border-top: 0;
  text-align: center;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-stage::before {
  content: counter(procurement-stage);
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--v2-line-strong);
  border-radius: 999px;
  background: var(--lugn-surface);
  color: var(--v2-muted);
  font-size: 12px;
  font-weight: 600;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-stage:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 14px;
  right: calc(-50% + 14px);
  width: calc(100% - 28px);
  height: 1px;
  background: var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-stage.ready::before {
  border-color: color-mix(in srgb, var(--lugn-success-fg) 26%, transparent);
  background: color-mix(in srgb, var(--lugn-success-fg) 8%, transparent);
  color: var(--v2-success);
}

body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-stage.current::before {
  border-color: color-mix(in srgb, var(--lugn-action) 28%, transparent);
  background: var(--v2-ink);
  color: var(--lugn-on-accent);
}

body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-stage span,
body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-stage strong,
body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-stage small {
  max-width: 128px;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-stage span {
  color: var(--v2-ink);
  font-size: 11px;
  text-transform: none;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-stage strong {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-stage small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--v2-muted);
  font-size: 11px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid {
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid > .readiness-list {
  display: grid;
  align-content: start;
  gap: 0;
  min-width: 0;
  padding: 12px 16px 16px;
  border-right: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .readiness-row.compact {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 58px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--v2-line);
  border-radius: 0;
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .readiness-row.compact:last-child {
  border-bottom: 0;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .readiness-detail {
  color: var(--v2-muted);
  font-size: 11px;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .recommendation-preview {
  display: grid;
  gap: 0;
  min-width: 0;
  padding: 12px 16px 16px;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .budget-preview {
  margin-bottom: 10px;
  border-color: var(--v2-line);
  background: var(--lugn-surface);
}

body.v2-shell .empty-state-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Team / user management (Settings). A calm, scannable roster: a seat readout
   with one focal figure, a role legend, member rows (avatar + identity + role &
   status pills + grouped lifecycle controls), and a distinct "Inbjudna" group.
   Mobile-first — rows reflow to stack, never horizontally scroll. */
/* Team seat readout — de-carded (design §3): the soft bordered box becomes a
   borderless figure line under a hairline, the lead figure carries the weight. */
body.v2-shell .team-seats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--lugn-space-2) var(--lugn-space-4);
  margin-bottom: var(--lugn-space-3);
  padding: var(--lugn-space-3) 0;
  border: 0;
  border-bottom: var(--lugn-divider) solid var(--lugn-hairline);
  border-radius: 0;
  background: transparent;
  color: var(--lugn-muted);
  font-size: var(--lugn-text-xs);
}

body.v2-shell .team-seats-lead {
  color: var(--v2-ink);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

body.v2-shell .team-seats-lead strong {
  color: var(--v2-ink);
  font-variant-numeric: tabular-nums;
}

body.v2-shell .team-seats-detail {
  font-variant-numeric: tabular-nums;
}

/* Invite nudge — an attention aside. De-carded (design §2) to the soft-sunken
   callout with a 2px left ink rule instead of a dashed coloured box. */
body.v2-shell .team-invite-nudge {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 0;
  border-inline-start: var(--lugn-space-1) solid var(--lugn-action);
  border-radius: 0;
  background: var(--lugn-sunken);
  color: var(--v2-ink);
  font-size: 12px;
  line-height: 1.4;
}

/* Role legend — a disclosure so it stays calm by default but answers "what am I
   granting?" on demand, before the operator assigns a role. */
/* The role legend is a genuine aside (a disclosure answering "what am I
   granting?") — de-carded to the soft-sunken callout (design §2): no border, a
   soft fill at the small radius, no shadow. */
body.v2-shell .team-role-legend {
  margin-bottom: 10px;
  border: 0;
  border-radius: var(--lugn-radius-sm);
  background: var(--lugn-sunken);
}

body.v2-shell .team-role-legend > summary {
  padding: 8px 12px;
  color: var(--v2-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

body.v2-shell .team-role-legend > summary:focus-visible {
  outline: 2px solid var(--v2-accent);
  outline-offset: 2px;
}

body.v2-shell .team-role-legend ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 4px 12px 12px;
  list-style: none;
}

body.v2-shell .team-role-legend-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

body.v2-shell .team-role-legend-text {
  color: var(--v2-muted);
  font-size: 12px;
  line-height: 1.4;
}

/* Role pill — compat-alias onto the canonical .status-pill restrained recipe
   (design §1 consolidation map: role is a LABEL, not a status, so it reads as the
   neutral dot+word — a near-transparent ground, hairline, muted text). Colour AND
   text always (never colour-only). The class name is kept (dynamically rendered)
   and re-pointed; the role variants stay a faint ≤10% wash + hairline in the same
   hue, never a saturated filled lozenge. */
body.v2-shell .team-role-pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--lugn-control-height-compact);
  padding: 0 var(--lugn-space-3);
  border: var(--lugn-divider) solid var(--lugn-hairline);
  border-radius: var(--lugn-radius-pill);
  background: transparent;
  color: var(--lugn-muted);
  font-size: var(--lugn-text-xs);
  font-weight: var(--lugn-weight-medium);
  line-height: var(--lugn-leading-tight);
  white-space: nowrap;
}

body.v2-shell .team-role-pill.role-owner {
  border-color: color-mix(in srgb, var(--lugn-success-fg) 24%, transparent);
  background: color-mix(in srgb, var(--lugn-success-fg) 7%, transparent);
  color: var(--lugn-success-fg);
}

body.v2-shell .team-role-pill.role-admin {
  border-color: color-mix(in srgb, var(--lugn-info-fg) 24%, transparent);
  background: color-mix(in srgb, var(--lugn-info-fg) 7%, transparent);
  color: var(--lugn-info-fg);
}

body.v2-shell .team-role-pill.role-operator {
  border-color: var(--lugn-hairline);
  background: transparent;
  color: var(--lugn-muted);
}

/* Roster groups — the seated members, then a distinct "Inbjudna" group. */
body.v2-shell .team-roster-group {
  display: grid;
  gap: 8px;
}

body.v2-shell .team-roster-group + .team-roster-group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--v2-line);
}

body.v2-shell .team-group-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 2px;
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.v2-shell .team-group-heading span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--lugn-radius-pill);
  background: var(--v2-soft);
  color: var(--v2-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* Member row — avatar + identity + actions. De-carded (design §2/§6): the
   bordered surface box becomes a transparent in-flow row; structure comes from a
   single hairline between rows, not a per-row box. Grid so it reflows cleanly. */
body.v2-shell .team-member-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: center;
  min-width: 0;
  padding: var(--lugn-space-3) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.v2-shell .team-member-row + .team-member-row {
  border-top: var(--lugn-divider) solid var(--lugn-hairline);
}

/* Invited seats read as a calm aside, not a tinted box: a left ink rule + the
   localized status WORD (rendered by the .status-pill in the row) carry the
   meaning. No fill, no dashed box. */
body.v2-shell .team-member-row[data-team-member-status="invited"] {
  border-inline-start: var(--lugn-space-1) solid color-mix(in srgb, var(--lugn-warning-fg) 50%, transparent);
  padding-inline-start: 10px;
}

body.v2-shell .team-member-row[data-team-member-status="disabled"] {
  opacity: 0.78;
}

/* The operator's own row gets a restrained 2px left ink rule (not a tinted
   border box) so "this is you" reads without a card. */
body.v2-shell .team-member-row.is-current-user {
  border-inline-start: var(--lugn-space-1) solid var(--lugn-action);
  padding-inline-start: 10px;
}

body.v2-shell .team-member-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--v2-line);
  border-radius: 50%;
  background: var(--v2-soft);
  color: var(--v2-muted);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

body.v2-shell .team-member-avatar.role-owner {
  border-color: color-mix(in srgb, var(--lugn-success-fg) 30%, transparent);
  background: color-mix(in srgb, var(--lugn-success-fg) 12%, var(--lugn-surface));
  color: var(--lugn-success-fg);
}

body.v2-shell .team-member-avatar.role-admin {
  border-color: color-mix(in srgb, var(--lugn-info-fg) 30%, transparent);
  background: color-mix(in srgb, var(--lugn-info-fg) 12%, var(--lugn-surface));
  color: var(--lugn-info-fg);
}

body.v2-shell .team-member-identity {
  display: grid;
  gap: 6px;
  min-width: 0;
}

body.v2-shell .team-member-identity strong {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  color: var(--v2-ink);
  font-size: 14px;
  overflow-wrap: anywhere;
}

body.v2-shell .team-member-you {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: var(--lugn-radius-pill);
  background: color-mix(in srgb, var(--v2-accent) 14%, var(--lugn-surface));
  color: var(--v2-accent-strong);
  font-size: 11px;
  font-weight: 600;
}

body.v2-shell .team-member-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

body.v2-shell .team-member-note {
  color: var(--v2-warning);
  font-size: 11px;
}

body.v2-shell .share-link-controls {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--v2-line);
}

body.v2-shell .share-link-controls h4 {
  margin: 0 0 4px;
  font-size: 13px;
}

body.v2-shell .share-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

body.v2-shell #shareLinkOutput {
  width: 100%;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

body.v2-shell .checkbox-field {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  /* The whole <label> is the click target, so it carries the 44px
     touch hit area (WCAG 2.5.8) rather than visually bloating the
     native box. A small vertical pad reaches the floor on a single
     line without stretching multi-line labels. block 3 below keeps
     dense/owner data-table checkboxes compact. */
  min-height: var(--v2-control-height-touch);
  padding-block: var(--lugn-space-1);
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}

body.v2-shell .checkbox-field input[type="checkbox"] {
  width: auto;
  margin-top: 2px;
  flex: none;
}

body.v2-shell .team-member-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

body.v2-shell .team-member-actions:empty {
  display: none;
}

body.v2-shell .team-member-role-field {
  display: contents;
}

/* Role select — composes the canonical control recipe (design §7): a
   control-border hairline (clears WCAG 1.4.11 3:1) + the canonical control
   radius + surface fill. Keeps its dense height; the touch floor is reached via
   the shared min-height block. */
body.v2-shell .team-member-role {
  height: 30px;
  padding: 0 8px;
  border: var(--lugn-divider) solid var(--lugn-control-border);
  border-radius: var(--lugn-radius-control);
  background: var(--lugn-surface);
  color: var(--v2-ink);
  font-size: 12px;
}

/* Destructive team action armed for confirm: the second click fires. Tints
   danger + relabels (via JS) so the confirm step is unmissable. Colour is a
   reinforcement; the relabelled text ("Bekräfta — …") carries the meaning. */
body.v2-shell .secondary-button.team-destructive.is-armed {
  border-color: color-mix(in srgb, var(--lugn-danger-fg) 50%, transparent);
  background: color-mix(in srgb, var(--lugn-danger-fg) 12%, var(--lugn-surface));
  color: var(--lugn-danger-fg);
}

body.v2-shell .team-form-title {
  margin: 0;
  color: var(--v2-ink);
  font-size: 13px;
  font-weight: 600;
}

body.v2-shell .team-form-role-help {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  color: var(--v2-muted);
  font-size: 12px;
  line-height: 1.4;
}

/* Mobile-first: the member row stacks (avatar + identity on the first row,
   actions wrap below full-width) so nothing scrolls horizontally on a phone. */
@media (max-width: 560px) {
  body.v2-shell .team-member-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body.v2-shell .team-member-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  body.v2-shell .team-member-role,
  body.v2-shell .team-member-actions .secondary-button {
    flex: 1 1 auto;
    min-height: var(--v2-control-height-touch, 44px);
  }
}

body.v2-shell .archive-workspace-form {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

body.v2-shell .danger-button {
  justify-self: start;
  padding: 0 14px;
  border: 1px solid var(--lugn-danger-solid-bg);
  /* Repointed off the 8px/13px literals onto the role tokens (Phase 2 S4
     literal-fix: --lugn-radius == 8px, --lugn-text-sm == 13px) so the
     destructive button shares the canonical control radius + dense-prose
     size. Ratchets BORDER_RADIUS_PX + FONT_SIZE_PX down by one each. */
  border-radius: var(--lugn-radius);
  background: var(--lugn-danger-solid-bg);
  color: var(--lugn-danger-solid-on);
  font-size: var(--lugn-text-sm);
  font-weight: 500;
  cursor: pointer;
}

body.v2-shell .danger-button:hover {
  filter: brightness(0.95);
}

body.v2-shell .audit-log-list {
  display: grid;
  gap: 8px;
}

/* Audit-log entries — a list of discrete rows. De-carded (design §2): the
   bordered soft box becomes a transparent in-flow row separated by a single
   hairline, structure from whitespace not a per-row box. */
body.v2-shell .audit-log-row {
  display: grid;
  gap: 4px;
  padding: var(--lugn-space-3) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.v2-shell .audit-log-row + .audit-log-row {
  border-top: var(--lugn-divider) solid var(--lugn-hairline);
}

body.v2-shell .audit-log-row-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

body.v2-shell .audit-log-row-head strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--v2-ink);
}

body.v2-shell .audit-log-row-head time {
  color: var(--v2-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

body.v2-shell .audit-log-field {
  color: var(--v2-muted);
  font-size: 12px;
  font-weight: 600;
}

body.v2-shell .audit-log-row p {
  margin: 0;
  color: var(--v2-ink);
  font-size: 13px;
  line-height: 1.4;
}

/* Company fact-store confidence band — a FINITE bucket class per allowlisted
   confidence level (no inline style, no fabricated %). Colour resolves through
   the v2/lugn token layer only (mirrors .status-pill), so the design-system
   conformance budget holds. */
body.v2-shell .fact-confidence-band {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--v2-line);
  background: var(--lugn-surface);
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body.v2-shell .fact-confidence-band.is-high {
  border-color: color-mix(in srgb, var(--lugn-success-fg) 22%, transparent);
  color: var(--v2-success);
}

body.v2-shell .fact-confidence-band.is-medium {
  border-color: color-mix(in srgb, var(--lugn-warning-fg) 24%, transparent);
  color: var(--v2-warning);
}

/* .is-low and .is-unverified are BOTH neutral/muted, but must be distinguishable
   WITHOUT reading the text label (CI-enforced by design-craft locks). is-low keeps
   the default solid border; is-unverified gets a dotted border AND a leading "?"
   glyph (CSS content, not markup — no inline style, colour stays token-only so the
   design-system budget is unchanged). */
body.v2-shell .fact-confidence-band.is-low {
  border-color: var(--v2-line);
  color: var(--v2-muted);
  border-style: solid;
}

body.v2-shell .fact-confidence-band.is-unverified {
  border-color: var(--v2-line);
  color: var(--v2-muted);
  border-style: dotted;
}

body.v2-shell .fact-confidence-band.is-unverified::before {
  content: "?";
  font-weight: 700;
  /* Decorative differentiator: the text label already names the state for AT. */
  speak: none;
}

body.v2-shell .weekly-digest-card {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--v2-accent) 30%, var(--v2-line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--v2-accent) 5%, var(--lugn-surface));
}

body.v2-shell .weekly-digest-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 8px;
}

body.v2-shell .weekly-digest-head strong {
  font-size: 14px;
  font-weight: 500;
  color: var(--v2-ink);
}

body.v2-shell .weekly-digest-head > div > span {
  display: block;
  color: var(--v2-muted);
  font-size: 12px;
}

body.v2-shell .weekly-digest-note {
  color: var(--v2-muted);
  font-size: 11px;
  font-style: italic;
}

body.v2-shell .weekly-digest-items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

body.v2-shell .weekly-digest-items li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}

body.v2-shell .weekly-digest-item-meta {
  color: var(--v2-muted);
  font-variant-numeric: tabular-nums;
}

/* Veckan — the weekly retention surface rendered on the Capability Tree home.
   Built only on Lugn / v2 tokens + color-mix (no new colour literals). */
body.v2-shell .veckan-section {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--v2-accent) 26%, var(--v2-line));
  border-radius: var(--v2-radius);
  background: color-mix(in srgb, var(--v2-accent) 4%, var(--lugn-surface));
}

body.v2-shell .veckan-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
}

body.v2-shell .veckan-eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: var(--v2-accent);
}

body.v2-shell .veckan-head strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--v2-ink);
}

body.v2-shell .veckan-delta,
body.v2-shell .veckan-evidence {
  padding: 10px 12px;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius-sm);
  background: var(--lugn-surface);
}

body.v2-shell .veckan-delta-head strong,
body.v2-shell .veckan-evidence-head strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--v2-ink);
}

body.v2-shell .veckan-delta-empty,
body.v2-shell .veckan-evidence-head span {
  margin: 4px 0 0;
  color: var(--v2-muted);
  font-size: 12px;
  line-height: 1.4;
}

body.v2-shell .veckan-delta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 8px 0 0;
}

/* Veckan delta tile — folded onto the borderless metric divider-grid (design §3):
   no per-tile border, soft fill, or radius. Structure comes from the grid gap;
   `.tone-danger` tints only the value (dd), never the tile. */
body.v2-shell .veckan-delta-metric {
  display: grid;
  gap: var(--lugn-space-1);
  padding: var(--lugn-space-3) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.v2-shell .veckan-delta-metric dt {
  font-size: var(--lugn-text-micro);
  font-weight: var(--lugn-weight-semibold);
  letter-spacing: var(--lugn-tracking-wide);
  text-transform: uppercase;
  color: var(--lugn-muted);
}

body.v2-shell .veckan-delta-metric dd {
  margin: 0;
  font-size: var(--lugn-text-base);
  font-weight: var(--lugn-weight-medium);
  color: var(--lugn-ink);
  font-variant-numeric: tabular-nums;
}

body.v2-shell .veckan-delta-metric.tone-danger dd {
  color: var(--lugn-danger-fg);
}

body.v2-shell .veckan-evidence-head {
  display: grid;
  gap: 2px;
}

@media (max-width: 560px) {
  body.v2-shell .veckan-head {
    align-items: flex-start;
  }

  body.v2-shell .veckan-head .secondary-button {
    width: 100%;
  }
}

body.v2-shell .workbench-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

/* Workbench KPI tile — folded onto the metric divider-grid (design §3): no
   accent-tinted border, no accent wash, no radius. A borderless tile in the
   strip; the accent stays reserved for the decision triad + status. */
body.v2-shell .workbench-kpi {
  display: grid;
  gap: var(--lugn-space-1);
  padding: var(--lugn-space-4) var(--lugn-space-5);
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.v2-shell .workbench-kpi span {
  color: var(--lugn-muted);
  font-size: var(--lugn-text-micro);
  font-weight: var(--lugn-weight-semibold);
  letter-spacing: var(--lugn-tracking-wide);
  text-transform: uppercase;
}

body.v2-shell .workbench-kpi strong {
  color: var(--lugn-ink);
  font-size: var(--lugn-text-lg);
  font-weight: var(--lugn-weight-semibold);
  font-variant-numeric: tabular-nums;
}

body.v2-shell .workbench-kpi.is-urgent strong {
  color: var(--v2-danger);
}

body.v2-shell .metric-grid-label {
  margin: 0 0 6px;
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Recommendation rollup — de-carded (design §2/§3): the soft radius-12 card
   becomes a borderless divider group, one hairline rule above the metric row. */
body.v2-shell .recommendation-rollup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--lugn-space-5);
  margin: 0 0 var(--lugn-space-4);
  padding: var(--lugn-space-4) 0 0;
  border: 0;
  border-top: var(--lugn-divider) solid var(--lugn-hairline);
  border-radius: 0;
  background: transparent;
}

body.v2-shell .recommendation-rollup-metric {
  display: grid;
  gap: 2px;
}

body.v2-shell .recommendation-rollup-metric span {
  color: var(--lugn-ink-secondary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.v2-shell .recommendation-rollup-metric strong {
  color: var(--v2-ink);
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

body.v2-shell .recommendation-rollup-metric.is-urgent strong {
  color: var(--v2-danger);
}

/* Decision triad in the workbench rollup: count value carries its verdict
   colour, paired with the text label so the breakdown is decision-forward
   rather than a single red urgency number. */
body.v2-shell .recommendation-rollup-metric.tone-buy strong {
  color: var(--lugn-buy-fg);
}

body.v2-shell .recommendation-rollup-metric.tone-wait strong {
  color: var(--lugn-wait-fg);
}

body.v2-shell .recommendation-rollup-metric.tone-plan strong {
  color: var(--lugn-plan-fg);
}

body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .recommendation-list {
  display: grid;
  border-color: var(--v2-line);
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .recommendation-row {
  gap: 0;
  padding: 0;
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .recommendation-row header {
  align-items: center;
  min-height: 62px;
  padding: 12px;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .recommendation-row header strong {
  font-size: 13px;
  font-weight: 600;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .recommendation-row dl,
body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .recommendation-evidence,
body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .financial-preview,
body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .supplier-requirements,
body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .slow-mover-preview,
body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .price-negotiation-preview,
body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .demand-profile {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-width: 0;
  border-top: 1px solid var(--v2-line);
  border-radius: 0;
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .recommendation-row dl div,
body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .recommendation-evidence div,
body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .financial-preview div,
body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .supplier-requirements div,
body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .slow-mover-preview div,
body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .price-negotiation-preview div,
body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .demand-profile div {
  min-height: 48px;
  padding: 8px 10px;
  /* De-clutter (declutter pass): drop the per-cell vertical mesh borders so metric
     cells separate by whitespace; only the group border-top dividers remain. */
  border-right: 0;
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .recommendation-row dl div:last-child,
body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .recommendation-evidence div:last-of-type,
body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .financial-preview div:last-of-type,
body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .supplier-requirements div:last-of-type,
body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .slow-mover-preview div:last-of-type,
body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .price-negotiation-preview div:last-of-type,
body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .demand-profile div:last-of-type {
  border-right: 0;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .financial-preview p,
body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .supplier-requirements p,
body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .demand-profile p {
  grid-column: 1 / -1;
  min-height: 26px;
  margin: 0;
  padding: 7px 10px;
  border-top: 1px solid var(--v2-line);
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid .recommendation-row p {
  margin: 0;
  font-size: 11px;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel .procurement-setup-tabs {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0 16px;
  overflow-x: auto;
  border-bottom: 1px solid var(--v2-line);
  background: var(--lugn-surface);
  scrollbar-width: none;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel .procurement-setup-tabs::-webkit-scrollbar {
  display: none;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel .procurement-setup-tab {
  flex: 0 0 auto;
  min-width: 148px;
  min-height: 46px;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel .procurement-setup-tab.is-active {
  border-bottom-color: var(--v2-accent);
  background: transparent;
  color: var(--v2-ink);
}

body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel .procurement-setup-tab span {
  color: var(--v2-muted);
  font-size: 11px;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel .procurement-setup-tab strong {
  font-size: 12px;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel .procurement-setup-note {
  margin: 0;
  padding: 10px 16px;
  border-bottom: 1px solid var(--v2-line);
  color: var(--v2-muted);
  font-size: 12px;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel .procurement-setup-group,
body.v2-shell:not(.is-public-landing) .v2-module-owned-setup-panel .master-data-grid {
  padding: 14px 16px 16px;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel .master-data-grid,
body.v2-shell:not(.is-public-landing) .v2-module-owned-setup-panel .master-data-grid {
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 10px;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel .setup-data-form,
body.v2-shell:not(.is-public-landing) .v2-module-owned-setup-panel .setup-data-form {
  gap: 8px;
  padding: 12px;
  border-color: var(--v2-line);
  background: var(--lugn-surface);
  box-shadow: none;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel .setup-data-form.attention,
body.v2-shell:not(.is-public-landing) .v2-module-owned-setup-panel .setup-data-form.attention {
  border-color: color-mix(in srgb, var(--lugn-action) 34%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lugn-action) 8%, transparent);
}

body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel .setup-data-form h3,
body.v2-shell:not(.is-public-landing) .v2-module-owned-setup-panel .setup-data-form h3 {
  font-size: 13px;
  font-weight: 600;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel .setup-data-form label,
body.v2-shell:not(.is-public-landing) .v2-module-owned-setup-panel .setup-data-form label,
body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel .planning-import-form label {
  color: var(--v2-muted);
  /* Form labels join the comfortable label step (audit: TYPOGRAPHY). */
  font-size: var(--lugn-text-label);
}

body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel .setup-data-form input,
body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel .setup-data-form select,
body.v2-shell:not(.is-public-landing) .v2-module-owned-setup-panel .setup-data-form input,
body.v2-shell:not(.is-public-landing) .v2-module-owned-setup-panel .setup-data-form select,
body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel .planning-import-form select,
body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel .planning-import-form textarea {
  border-color: var(--v2-line);
  border-radius: 8px;
  background: var(--lugn-surface);
  color: var(--v2-ink);
}

body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel .setup-data-form button,
body.v2-shell:not(.is-public-landing) .v2-module-owned-setup-panel .setup-data-form button,
body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel .planning-import-actions button {
  justify-self: start;
  min-height: 34px;
  border-radius: 8px;
}

body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel .planning-import-form {
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) auto;
  margin: 14px 16px 16px;
  border-color: var(--v2-line);
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .v2-capability-view.active {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

body.v2-shell:not(.is-public-landing) .v2-capability-panel {
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.v2-shell:not(.is-public-landing) .v2-capability-panel > .panel-header {
  display: none;
}

body.v2-shell:not(.is-public-landing) .v2-capability-panel > .panel-header h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
}

body.v2-shell:not(.is-public-landing) .capability-tree-preview {
  display: grid;
  gap: 0;
  min-height: min(720px, calc(100vh - 126px));
}

body.v2-shell:not(.is-public-landing) .capability-command-strip {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(240px, 0.72fr) auto auto;
  align-items: center;
  gap: 18px;
  min-height: 102px;
  padding: 18px 4px 16px;
  border-bottom: 1px solid var(--lugn-hairline);
  background: transparent;
}

body.v2-shell:not(.is-public-landing) .capability-command-main {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .capability-command-dot {
  position: relative;
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--v2-accent) 34%, var(--v2-line));
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--v2-accent) 0 2px, transparent 3px),
    var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .capability-command-dot.warning {
  border-style: dashed;
}

body.v2-shell:not(.is-public-landing) .capability-command-dot.success {
  border-color: color-mix(in srgb, var(--v2-success) 34%, var(--v2-line));
  background:
    radial-gradient(circle at center, var(--v2-success) 0 2px, transparent 3px),
    var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .capability-command-main strong {
  display: block;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

body.v2-shell:not(.is-public-landing) .capability-command-main span {
  display: block;
  margin-top: 4px;
  color: var(--v2-muted);
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Progress bar (design §4) — 4px ink-pill. */
body.v2-shell:not(.is-public-landing) .capability-progress {
  width: 100%;
  height: 4px;
  border: 0;
  border-radius: var(--lugn-radius-pill);
  background: var(--lugn-sunken);
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

body.v2-shell:not(.is-public-landing) .capability-progress::-webkit-progress-bar {
  border-radius: var(--lugn-radius-pill);
  background: var(--lugn-sunken);
}

body.v2-shell:not(.is-public-landing) .capability-progress::-webkit-progress-value {
  border-radius: var(--lugn-radius-pill);
  background: var(--lugn-action);
}

body.v2-shell:not(.is-public-landing) .capability-progress::-moz-progress-bar {
  border-radius: var(--lugn-radius-pill);
  background: var(--lugn-action);
}

body.v2-shell:not(.is-public-landing) .capability-progress-label {
  color: var(--v2-muted);
  font-size: 12px;
  font-weight: 500;
}

/* Data-coverage meter — the persistent top-bar chip that renders the Capability
   Tree's honest "Truth In" readout (understanding-lens.js). Static progress bar
   (no animation → no reduced-motion concern); colours resolve through the token
   layer only so the design-system budget stays at the floor. */
body.v2-shell:not(.is-public-landing) .understanding-meter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--lugn-hairline);
  border-radius: 999px;
  background: var(--lugn-surface);
  color: var(--v2-ink);
  cursor: pointer;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}
body.v2-shell:not(.is-public-landing) .understanding-meter[hidden] {
  display: none;
}
body.v2-shell:not(.is-public-landing) .understanding-meter-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}
body.v2-shell:not(.is-public-landing) .understanding-meter-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--v2-muted);
}
body.v2-shell:not(.is-public-landing) .understanding-meter-sub {
  font-size: 11px;
  color: var(--v2-muted);
  font-variant-numeric: tabular-nums;
}
/* Progress bar (design §4) — 4px ink-pill; keeps its 64px chip width. */
body.v2-shell:not(.is-public-landing) .understanding-meter-bar {
  width: 64px;
  height: 4px;
  border: 0;
  border-radius: var(--lugn-radius-pill);
  background: var(--lugn-sunken);
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}
body.v2-shell:not(.is-public-landing) .understanding-meter-bar::-webkit-progress-bar {
  border-radius: var(--lugn-radius-pill);
  background: var(--lugn-sunken);
}
body.v2-shell:not(.is-public-landing) .understanding-meter-bar::-webkit-progress-value {
  border-radius: var(--lugn-radius-pill);
  background: var(--lugn-action);
}
body.v2-shell:not(.is-public-landing) .understanding-meter-bar::-moz-progress-bar {
  border-radius: var(--lugn-radius-pill);
  background: var(--lugn-action);
}
body.v2-shell:not(.is-public-landing) .understanding-meter-value {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Compact pill on narrow screens: keep only the percentage. */
@media (max-width: 760px) {
  body.v2-shell:not(.is-public-landing) .understanding-meter-text,
  body.v2-shell:not(.is-public-landing) .understanding-meter-bar {
    display: none;
  }
}

/* Agent-pulse (FOUNDATIONS §2.1) — a persistent top-bar atom shown ONLY while real
   background work runs (read-sync/ETL, recommendation generation, activation
   validation, sample seeding, fact mining). A calm breathing dot + a short label;
   honest "the system is working for you right now", absent when idle. */
body.v2-shell:not(.is-public-landing) .agent-pulse {
  display: inline-flex;
  align-items: center;
  gap: var(--lugn-space-compact);
  padding: 4px 10px;
  border-radius: var(--lugn-radius-pill);
  background: color-mix(in srgb, var(--lugn-action) 8%, transparent);
  color: var(--lugn-action);
  font-size: var(--lugn-text-micro);
  font-weight: var(--lugn-weight-semibold);
  white-space: nowrap;
}
body.v2-shell:not(.is-public-landing) .agent-pulse[hidden] {
  display: none;
}
body.v2-shell:not(.is-public-landing) .agent-pulse-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: var(--lugn-radius-pill);
  background: var(--lugn-action);
  /* opacity + transform only; collapses under the global reduced-motion guard. */
  animation: agent-pulse-breathe 1100ms var(--lugn-ease-standard) infinite;
}
@keyframes agent-pulse-breathe {
  0%, 100% { opacity: 0.35; transform: scale(0.78); }
  50% { opacity: 1; transform: scale(1.12); }
}

/* Meter-jump (FOUNDATIONS §10) — the "work landed" delight: when coverage rises, the
   chip briefly lifts and the value pops, so the bar visibly JUMPS. Transform/opacity
   only; collapses under reduced-motion (the new value still resolves instantly). */
body.v2-shell:not(.is-public-landing) .understanding-meter.is-jumping {
  animation: meter-jump 620ms var(--lugn-ease-emphasized);
}
body.v2-shell:not(.is-public-landing) .understanding-meter.is-jumping .understanding-meter-value {
  animation: meter-value-pop 620ms var(--lugn-ease-emphasized);
}
@keyframes meter-jump {
  0% { transform: scale(1); }
  35% { transform: scale(1.09); }
  100% { transform: scale(1); }
}
@keyframes meter-value-pop {
  0%, 100% { transform: scale(1); opacity: 1; }
  35% { transform: scale(1.25); opacity: 0.85; }
}

body.v2-shell:not(.is-public-landing) .capability-command-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .capability-command-actions .setup-action-control,
body.v2-shell:not(.is-public-landing) .capability-lane-card .setup-action-control,
body.v2-shell:not(.is-public-landing) .capability-unlock-item .setup-action-control {
  display: contents;
}

body.v2-shell:not(.is-public-landing) .capability-command-actions .capability-action {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
  white-space: nowrap;
}

body.v2-shell:not(.is-public-landing) .capability-command-actions .setup-action-control:first-child .capability-action,
body.v2-shell:not(.is-public-landing) .capability-command-actions > .capability-action:first-child {
  border-color: var(--v2-accent);
  background: var(--v2-accent);
  color: var(--lugn-on-accent);
}

/* D2 — the next-best-action momentum cue on the spine. A full-width row under the
   command strip's first row: a soft accent callout that pulls the operator toward
   the server-derived next step. Reuses .journey-action for the button; introduces
   no new -pill/-chip/-card/-table family. */
body.v2-shell:not(.is-public-landing) .capability-command-momentum {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--v2-accent) 28%, var(--lugn-hairline));
  border-radius: var(--lugn-radius-lg);
  background: color-mix(in srgb, var(--v2-accent) 7%, transparent);
}

body.v2-shell:not(.is-public-landing) .capability-command-momentum-eyebrow {
  flex: 0 0 auto;
  color: var(--v2-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.v2-shell:not(.is-public-landing) .capability-command-momentum-lead {
  flex: 1 1 200px;
  min-width: 0;
  color: var(--v2-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

/* The action may render bare or wrapped in a (policy) .setup-action-control; either
   way let the .journey-action button be the flex child (mirrors the actions row). */
body.v2-shell:not(.is-public-landing) .capability-command-momentum .setup-action-control {
  display: contents;
}

body.v2-shell:not(.is-public-landing) .capability-command-momentum .journey-action {
  flex: 0 0 auto;
  white-space: nowrap;
}

body.v2-shell:not(.is-public-landing) .capability-tree-canvas {
  position: relative;
  display: grid;
  gap: 0;
  align-items: start;
  min-width: 0;
  padding: 0;
}

body.v2-shell:not(.is-public-landing) .capability-empty-state {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(278px, 0.25fr);
  gap: 22px;
  align-items: start;
  min-width: 0;
  padding: 28px 24px 24px;
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .capability-map-shell {
  display: grid;
  gap: 18px;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .capability-lane-grid {
  grid-template-columns: repeat(6, minmax(118px, 1fr));
  gap: 14px;
}

body.v2-shell:not(.is-public-landing) .capability-node-grid {
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 18px;
}

body.v2-shell:not(.is-public-landing) .capability-lane {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .capability-lane-header {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 60px;
  color: var(--v2-ink);
  text-align: center;
}

body.v2-shell:not(.is-public-landing) .capability-lane-header::after {
  content: none;
}

body.v2-shell:not(.is-public-landing) .capability-lane-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--v2-ink);
  font-size: 17px;
  line-height: 1;
}

body.v2-shell:not(.is-public-landing) .capability-lane-header strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
}

body.v2-shell:not(.is-public-landing) .capability-lane-stack {
  position: relative;
  display: grid;
  gap: 18px;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .capability-lane-stack::before {
  content: "";
  position: absolute;
  inset: 0 auto 38px 50%;
  width: 1px;
  background: var(--lugn-hairline);
  transform: translateX(-0.5px);
}

body.v2-shell:not(.is-public-landing) .capability-lane-card {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 132px;
  padding: 13px 12px 12px;
  border: 1px solid var(--v2-line);
  border-radius: 8px;
  background: var(--lugn-surface);
  box-shadow: none;
}

body.v2-shell:not(.is-public-landing) .capability-lane-card::before,
body.v2-shell:not(.is-public-landing) .capability-lane-card::after {
  content: none;
}

body.v2-shell:not(.is-public-landing) .capability-lane-card .status-pill {
  justify-self: start;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

body.v2-shell:not(.is-public-landing) .capability-lane-card .status-pill.ready {
  border-color: color-mix(in srgb, var(--v2-success) 24%, var(--v2-line));
  background: color-mix(in srgb, var(--lugn-success-fg) 8%, transparent);
  color: var(--v2-success);
}

body.v2-shell:not(.is-public-landing) .capability-lane-card .status-pill.needed {
  border-color: color-mix(in srgb, var(--v2-warning) 30%, var(--v2-line));
  background: color-mix(in srgb, var(--lugn-warning-fg) 8%, transparent);
  color: var(--v2-warning);
}

body.v2-shell:not(.is-public-landing) .capability-lane-card .status-pill.locked {
  border-color: var(--v2-line);
  background: var(--lugn-sunken);
  color: var(--lugn-ink-secondary);
}

body.v2-shell:not(.is-public-landing) .capability-lane-card strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.18;
}

body.v2-shell:not(.is-public-landing) .capability-lane-card small {
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.25;
}

body.v2-shell:not(.is-public-landing) .capability-lane-card p {
  min-height: 0;
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.35;
}

body.v2-shell:not(.is-public-landing) .capability-lane-card .capability-action {
  justify-self: start;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--v2-accent);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

body.v2-shell:not(.is-public-landing) .capability-lane-card .capability-action::after,
body.v2-shell:not(.is-public-landing) .capability-unlock-item .capability-action::after {
  content: "→";
  margin-left: 8px;
}

body.v2-shell:not(.is-public-landing) .capability-lane-add {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 42px;
  min-height: 32px;
  padding: 0;
  border: 1px dashed var(--lugn-border-strong);
  border-radius: 8px;
  background: var(--lugn-surface);
  color: var(--v2-ink);
  font-size: 19px;
  line-height: 1;
}

body.v2-shell:not(.is-public-landing) .capability-more-cue {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  color: var(--lugn-ink-secondary);
  font-size: 13px;
  font-weight: 500;
}

body.v2-shell:not(.is-public-landing) .capability-more-cue span {
  font-size: 18px;
  line-height: 1;
}

body.v2-shell:not(.is-public-landing) .capability-unlock-panel {
  display: grid;
  align-content: start;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--v2-line);
  border-radius: 8px;
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .capability-unlock-panel header {
  min-height: 54px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .capability-unlock-panel header strong {
  font-size: 17px;
  font-weight: 600;
}

body.v2-shell:not(.is-public-landing) .capability-unlock-list {
  display: grid;
}

body.v2-shell:not(.is-public-landing) .capability-unlock-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  min-height: 120px;
  padding: 18px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .capability-unlock-item > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--v2-accent);
  color: var(--lugn-on-accent);
  font-size: 12px;
  font-weight: 600;
}

body.v2-shell:not(.is-public-landing) .capability-unlock-item div {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .capability-unlock-item strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

body.v2-shell:not(.is-public-landing) .capability-unlock-item small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.v2-shell:not(.is-public-landing) .capability-unlock-item .capability-action {
  justify-self: start;
  min-height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--v2-accent);
  font-size: 12px;
  font-weight: 600;
}

body.v2-shell:not(.is-public-landing) .capability-evidence-summary {
  display: grid;
  gap: 0;
  padding: 12px 18px 16px;
}

body.v2-shell:not(.is-public-landing) .capability-evidence-summary div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 32px;
}

body.v2-shell:not(.is-public-landing) .capability-evidence-summary dt {
  color: var(--v2-muted);
  font-size: 12px;
}

body.v2-shell:not(.is-public-landing) .capability-evidence-summary dd {
  color: var(--v2-ink);
  font-size: 12px;
  font-weight: 600;
}

body.v2-shell:not(.is-public-landing) .capability-node {
  position: relative;
  min-height: 0;
  overflow: visible;
  border-color: var(--v2-line);
  border-radius: 8px;
  box-shadow: none;
}

body.v2-shell:not(.is-public-landing) .capability-node::before {
  inset: 0 0 auto;
  width: auto;
  height: 3px;
  background: var(--v2-line-strong);
}

body.v2-shell:not(.is-public-landing) .capability-node.success::before {
  background: var(--v2-accent);
}

body.v2-shell:not(.is-public-landing) .capability-node.warning::before {
  background: var(--v2-warning);
}

body.v2-shell:not(.is-public-landing) .capability-node.danger::before {
  background: var(--v2-danger);
}

body.v2-shell:not(.is-public-landing) .capability-node:not(:last-child)::after {
  content: none;
}

body.v2-shell:not(.is-public-landing) .capability-node.warning:not(:last-child)::after {
  background: var(--v2-warning);
}

body.v2-shell:not(.is-public-landing) .capability-node.danger:not(:last-child)::after {
  background: var(--v2-danger);
}

body.v2-shell:not(.is-public-landing) .capability-node-header {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-height: 136px;
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--v2-line);
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .capability-node-title {
  gap: 8px;
}

body.v2-shell:not(.is-public-landing) .capability-kicker {
  justify-content: flex-end;
  gap: 4px 8px;
  font-size: 11px;
}

body.v2-shell:not(.is-public-landing) .capability-node-title > strong {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.22;
}

body.v2-shell:not(.is-public-landing) .capability-node p {
  font-size: 12px;
}

body.v2-shell:not(.is-public-landing) .capability-node-status {
  grid-row: 1;
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
  align-items: center;
}

body.v2-shell:not(.is-public-landing) .capability-node-status .status-pill {
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
}

body.v2-shell:not(.is-public-landing) .capability-value-badge {
  justify-items: end;
  justify-self: end;
}

body.v2-shell:not(.is-public-landing) .capability-value-badge strong {
  color: var(--v2-accent);
  font-size: 18px;
}

body.v2-shell:not(.is-public-landing) .capability-outcome {
  padding: 10px 18px;
  border-bottom: 1px solid var(--v2-line);
  background: var(--lugn-sunken);
  font-size: 12px;
}

body.v2-shell:not(.is-public-landing) .capability-control-ledger {
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .capability-ledger-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  min-height: 54px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--v2-line);
  box-shadow: none;
}

body.v2-shell:not(.is-public-landing) .capability-ledger-row span {
  font-size: 11px;
}

body.v2-shell:not(.is-public-landing) .capability-ledger-row strong {
  justify-self: end;
  font-size: 12px;
}

body.v2-shell:not(.is-public-landing) .capability-ledger-row small {
  grid-column: 1 / -1;
  font-size: 11px;
}

body.v2-shell:not(.is-public-landing) .capability-ledger-row.success strong {
  color: var(--v2-accent);
}

body.v2-shell:not(.is-public-landing) .capability-ledger-row.warning strong,
body.v2-shell:not(.is-public-landing) .capability-ledger-row.guarded strong {
  color: var(--v2-warning);
}

body.v2-shell:not(.is-public-landing) .capability-ledger-row.danger strong {
  color: var(--v2-danger);
}

body.v2-shell:not(.is-public-landing) .capability-action-rail {
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  padding: 10px 18px;
  border-bottom: 1px solid var(--v2-line);
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .capability-node-footer {
  justify-content: flex-start;
  padding: 10px 18px 16px;
}

body.v2-shell:not(.is-public-landing) .capability-tree-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 0;
}

body.v2-shell:not(.is-public-landing) .capability-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--v2-ink);
  font-size: 12px;
  font-weight: 500;
}

body.v2-shell:not(.is-public-landing) .capability-legend-item::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: var(--v2-line-strong);
}

body.v2-shell:not(.is-public-landing) .capability-legend-item.success::before {
  background: var(--v2-accent);
}

body.v2-shell:not(.is-public-landing) .capability-legend-item.warning::before {
  background: var(--v2-warning);
}

body.v2-shell:not(.is-public-landing) .capability-legend-item.danger::before {
  background: var(--v2-danger);
}

body.v2-shell:not(.is-public-landing) .primary-button {
  border-color: var(--v2-accent);
  background: var(--v2-accent);
}

body.v2-shell:not(.is-public-landing) .secondary-button,
body.v2-shell:not(.is-public-landing) .icon-button,
body.v2-shell:not(.is-public-landing) .command-trigger {
  border-color: var(--v2-line);
  background: var(--lugn-surface);
}

body.v2-shell .status-pill.success {
  color: var(--v2-success);
}

body.v2-shell .status-pill.warning {
  color: var(--v2-warning);
}

body.v2-shell .status-pill.danger {
  color: var(--v2-danger);
}

@media (max-width: 1180px) {
  body.v2-shell:not(.is-public-landing) .capability-command-strip {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.56fr) auto;
  }

  body.v2-shell:not(.is-public-landing) .capability-command-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  body.v2-shell:not(.is-public-landing) .capability-empty-state {
    grid-template-columns: minmax(0, 1fr);
  }

  body.v2-shell:not(.is-public-landing) .capability-lane-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  body.v2-shell:not(.is-public-landing) .capability-node:not(:last-child)::after {
    display: none;
  }

  body.v2-shell:not(.is-public-landing) .capability-tree-legend {
    padding: 0;
  }
}

@media (max-width: 920px) {
  body.v2-shell.is-public-landing .workspace {
    padding: 14px 16px 42px;
  }

  body.v2-shell.is-public-landing .topbar {
    flex-direction: row;
    align-items: center;
  }

  body.v2-shell .landing-nav.v2-public-nav {
    width: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  body.v2-shell .landing-nav.v2-public-nav a {
    min-height: 34px;
    padding: 0 11px;
    font-size: 12px;
    white-space: nowrap;
  }

  body.v2-shell .v2-landing-hero {
    min-height: calc(100svh - 98px);
    padding: 84px 0 56px;
  }

  body.v2-shell .v2-landing-copy {
    gap: 22px;
  }

  body.v2-shell .v2-landing-copy h1 {
    font-size: 48px;
    line-height: 1;
  }

  body.v2-shell .v2-landing-actions {
    width: 100%;
    flex-wrap: nowrap;
  }

  body.v2-shell .v2-landing-actions .primary-button,
  body.v2-shell .v2-landing-actions .secondary-button {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 0 14px;
    font-size: 14px;
  }

  /* The authenticated frame stays the two-level rail + drawer here (see the
     dedicated @media (max-width: 1024px) drawer block above). Only legacy
     .sidebar markup (gone from the tenant shell) used the single-column collapse;
     keep the legacy override harmlessly scoped to .sidebar for the owner shell. */
  body.v2-shell:not(.is-public-landing) .sidebar {
    gap: 10px;
    padding: 14px 16px 12px;
    overflow: hidden;
  }

  body.v2-shell:not(.is-public-landing) .sidebar .nav-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  body.v2-shell:not(.is-public-landing) .sidebar .nav-list::-webkit-scrollbar {
    display: none;
  }

  body.v2-shell:not(.is-public-landing) .sidebar .nav-item {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    min-height: 34px;
    padding: 0 12px;
    white-space: nowrap;
  }

  body.v2-shell:not(.is-public-landing) .sandbox-chat,
  body.v2-shell:not(.is-public-landing) .journey-overview,
  body.v2-shell:not(.is-public-landing) .sandbox-launch-summary,
  body.v2-shell:not(.is-public-landing) .sandbox-queue-row,
  body.v2-shell:not(.is-public-landing) .journey-focus-gate,
  body.v2-shell:not(.is-public-landing) .journey-focus-evidence-list,
  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-operating-map,
  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-map-posture,
  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-card,
  body.v2-shell:not(.is-public-landing) .v2-module-workspace .module-inspector-grid,
  body.v2-shell:not(.is-public-landing) .module-grain-contract-grid,
  body.v2-shell:not(.is-public-landing) .module-grain-row dl,
  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-main-row,
  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-config-diagnostics,
  body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-overview,
  body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid,
  body.v2-shell:not(.is-public-landing) .v2-procurement-input-panel .planning-import-form,
  body.v2-shell:not(.is-public-landing) .v2-workbench-primary-grid,
  body.v2-shell:not(.is-public-landing) .metric-grid {
    grid-template-columns: 1fr;
  }

  body.v2-shell:not(.is-public-landing) .sandbox-launch-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-left: 0;
    border-top: 1px solid var(--v2-line);
  }

  body.v2-shell:not(.is-public-landing) .sandbox-chat-thread {
    border-right: 0;
    border-bottom: 1px solid var(--v2-line);
  }

  body.v2-shell:not(.is-public-landing) .sandbox-launch-metrics div {
    min-height: 52px;
  }

  body.v2-shell:not(.is-public-landing) .sandbox-launch-metrics div:nth-child(2n) {
    border-right: 0;
  }

  body.v2-shell:not(.is-public-landing) .sandbox-launch-metrics div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--v2-line);
  }

  body.v2-shell:not(.is-public-landing) .sandbox-chat-readiness {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.v2-shell:not(.is-public-landing) .sandbox-launch-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.v2-shell:not(.is-public-landing) .sandbox-launch-steps li:nth-child(2n) {
    border-right: 0;
  }

  body.v2-shell:not(.is-public-landing) .sandbox-launch-steps li:nth-child(-n + 2) {
    border-bottom: 1px solid var(--v2-line);
  }

  body.v2-shell:not(.is-public-landing) .sandbox-queue-meta {
    justify-items: start;
    text-align: left;
  }

  body.v2-shell:not(.is-public-landing) .module-grain-column + .module-grain-column {
    border-left: 0;
    border-top: 1px solid var(--v2-line);
  }

  body.v2-shell:not(.is-public-landing) .workbench-ledger-header {
    display: none;
  }

  body.v2-shell:not(.is-public-landing) .workbench-ledger-row {
    grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
    min-height: 0;
  }

  body.v2-shell:not(.is-public-landing) .workbench-ledger-main.workbench-item-summary {
    grid-column: 1 / -1;
    min-height: 58px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--v2-line);
  }

  body.v2-shell:not(.is-public-landing) .workbench-ledger-cell.workbench-task-field,
  body.v2-shell:not(.is-public-landing) .workbench-ledger-row > .workbench-due-field {
    min-height: 42px;
    padding: 8px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--v2-line);
  }

  body.v2-shell:not(.is-public-landing) .workbench-ledger-cell small,
  body.v2-shell:not(.is-public-landing) .workbench-ledger-row > .workbench-due-field > small {
    display: block;
  }

  body.v2-shell:not(.is-public-landing) .workbench-ledger-status {
    min-height: 42px;
    padding: 8px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--v2-line);
  }

  body.v2-shell:not(.is-public-landing) .workbench-ledger-actions {
    grid-column: 1 / -1;
    min-height: 42px;
    padding: 8px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--v2-line);
  }

  body.v2-shell:not(.is-public-landing) .workbench-ledger-actions .workbench-action-strip {
    justify-content: flex-start;
  }

  body.v2-shell:not(.is-public-landing) .workbench-ledger-detail.workbench-item-body {
    padding: 8px 16px 12px;
  }

  body.v2-shell:not(.is-public-landing) .capability-command-strip,
  body.v2-shell:not(.is-public-landing) .capability-tree-canvas,
  body.v2-shell:not(.is-public-landing) .capability-lane-grid {
    grid-template-columns: 1fr;
  }

  body.v2-shell:not(.is-public-landing) .capability-command-strip {
    align-items: start;
    min-height: 0;
    padding: 16px;
  }

  body.v2-shell:not(.is-public-landing) .capability-command-main span {
    white-space: normal;
  }

  body.v2-shell:not(.is-public-landing) .capability-progress-label {
    justify-self: start;
  }

  body.v2-shell:not(.is-public-landing) .capability-empty-state {
    padding: 16px;
  }

  body.v2-shell:not(.is-public-landing) .capability-lane-header {
    justify-items: start;
    grid-template-columns: 24px minmax(0, 1fr);
    min-height: 36px;
    text-align: left;
  }

  body.v2-shell:not(.is-public-landing) .capability-lane-header::after,
  body.v2-shell:not(.is-public-landing) .capability-lane-stack::before,
  body.v2-shell:not(.is-public-landing) .capability-lane-card::before,
  body.v2-shell:not(.is-public-landing) .capability-lane-card::after {
    display: none;
  }

  body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-command,
  body.v2-shell:not(.is-public-landing) .v2-procurement-review-grid > .readiness-list {
    border-right: 0;
    border-bottom: 1px solid var(--v2-line);
  }

  body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-command {
    grid-template-columns: 1fr;
    align-items: start;
  }

  body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-command .status-pill,
  body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-action {
    justify-self: start;
  }

  body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 14px 16px;
    scrollbar-width: none;
  }

  body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-track::-webkit-scrollbar {
    display: none;
  }

  body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-stage {
    flex: 0 0 104px;
  }

  body.v2-shell:not(.is-public-landing) .v2-procurement-decision-panel .procurement-module-stage::after {
    display: none;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-ledger-header {
    display: none;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-card.module-ledger-row {
    grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
    min-height: 0;
  }

  body.v2-shell:not(.is-public-landing) .module-ledger-module {
    grid-column: 1 / -1;
    min-height: 66px;
    padding: 12px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--v2-line);
  }

  body.v2-shell:not(.is-public-landing) .module-ledger-cell {
    min-height: 50px;
    padding: 10px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--v2-line);
  }

  body.v2-shell:not(.is-public-landing) .module-ledger-cell span {
    display: block;
  }

  body.v2-shell:not(.is-public-landing) .module-ledger-cell[data-module-ledger-cell="surface"] {
    grid-column: 1 / -1;
  }

  body.v2-shell:not(.is-public-landing) .module-ledger-actions {
    grid-column: 1 / -1;
    min-height: 44px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--v2-line);
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-operating-map {
    gap: 0;
    padding: 0;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-map-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-bottom: 1px solid var(--v2-line);
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-map-summary div {
    min-height: 46px;
    padding: 7px 8px;
    border: 0;
    border-right: 1px solid var(--v2-line);
    border-radius: 0;
    /* P1 FIX(2): de-carded — transparent on the canvas like the wide layout. */
    background: transparent;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-map-summary div:last-child {
    border-right: 0;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-map-summary span {
    font-size: 11px;
    line-height: 1.05;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-map-summary strong {
    font-size: 18px;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-anchor-flow {
    display: grid;
    grid-template-columns: minmax(38px, 0.48fr) repeat(5, minmax(0, 1fr));
    gap: 4px;
    min-height: 0;
    padding: 8px 10px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-anchor-flow > span {
    align-self: center;
    font-size: 11px;
    line-height: 1.05;
    white-space: normal;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-flow-node {
    justify-items: center;
    min-width: 0;
    min-height: 34px;
    padding: 6px 3px;
    text-align: center;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-flow-node::before {
    content: attr(data-flow-label);
    color: var(--v2-ink);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-flow-node strong {
    display: none;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-flow-node small {
    display: none;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-map-posture div + div {
    border-top: 1px solid var(--v2-line);
    border-left: 0;
  }

  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-ledger-header {
    display: none;
  }

  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-main-row {
    grid-template-columns: minmax(0, 1fr) minmax(106px, auto);
    align-items: start;
    gap: 10px;
    min-height: 0;
    padding: 14px 16px;
  }

  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-identity-cell {
    grid-column: 1 / -1;
  }

  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-status-cell,
  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-read-area-cell {
    grid-column: 1;
  }

  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-last-read-cell,
  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-evidence-cell {
    grid-column: 2;
  }

  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-cell {
    padding-right: 0;
  }

  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-primary-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-primary-actions > button,
  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-primary-actions .setup-action-control > button {
    width: auto;
  }

  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-feed-ledger,
  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-evidence-ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-evidence-ledger div:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  body.v2-shell:not(.is-public-landing) .journey-milestones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 14px;
    overflow-x: visible;
  }

  body.v2-shell:not(.is-public-landing) .journey-milestone:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 560px) {
  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-main-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-identity-cell,
  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-status-cell,
  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-read-area-cell,
  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-last-read-cell,
  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-evidence-cell,
  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-primary-actions {
    grid-column: 1 / -1;
  }

  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-identity-cell strong,
  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-cell strong,
  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-identity-cell small,
  body.v2-shell:not(.is-public-landing) .v2-integrations-panel .provider-cell small {
    white-space: normal;
  }

  body.v2-shell:not(.is-public-landing) .nav-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
  }

  body.v2-shell:not(.is-public-landing) .nav-item {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 0 6px;
    justify-content: center;
    overflow-wrap: normal;
    white-space: normal;
    font-size: 11px;
    line-height: 1.08;
    text-align: center;
  }

  body.v2-shell:not(.is-public-landing) .topbar-actions {
    display: flex;
    align-self: stretch;
    justify-content: flex-start;
    gap: 8px;
  }

  body.v2-shell:not(.is-public-landing) .topbar-session {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.v2-shell:not(.is-public-landing) .topbar-session > div {
    min-width: 0;
  }

  body.v2-shell:not(.is-public-landing) .topbar-session strong {
    display: none;
  }

  body.v2-shell:not(.is-public-landing) .topbar-session span {
    max-width: none;
  }

  body.v2-shell:not(.is-public-landing) .topbar-actions .icon-button {
    flex: 0 0 36px;
    width: 36px;
    min-height: 36px;
    padding: 0;
  }

  body.v2-shell:not(.is-public-landing) .topbar-actions .command-trigger {
    flex: 0 0 auto;
    width: auto;
    min-width: 66px;
    min-height: 36px;
    padding: 0 10px;
  }

  body.v2-shell.is-public-landing .topbar .page-title {
    font-size: 14px;
  }

  body.v2-shell .landing-nav.v2-public-nav a:first-child {
    display: none;
  }

  body.v2-shell .v2-landing-hero {
    min-height: calc(100svh - 104px);
    padding-top: 72px;
  }

  body.v2-shell .v2-landing-copy h1 {
    font-size: 40px;
  }

  body.v2-shell.is-public-landing .access-panel {
    padding: 14px;
  }

  body.v2-shell .onboarding-path-progress {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 0;
  }

  body.v2-shell .landing-value-list {
    text-align: center;
  }

  body.v2-shell .landing-value-list li {
    padding-left: 0;
    padding-top: 14px;
  }

  body.v2-shell .landing-value-list li::before {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }

  body.v2-shell.is-public-landing .access-mode-switcher {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 0;
  }
}

/* V2 Modules Cockpit convergence */
body.v2-shell:not(.is-public-landing) .v2-modules-panel > .panel-header {
  display: none;
}

body.v2-shell:not(.is-public-landing) .v2-modules-view.has-active-module-context .v2-modules-panel {
  display: block;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-operating-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(292px, 0.34fr) auto;
  align-items: start;
  gap: 16px;
  min-height: 0;
  margin: 0;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--v2-line);
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .module-cockpit-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .module-cockpit-kicker,
body.v2-shell:not(.is-public-landing) .module-anchor-flow > span,
body.v2-shell:not(.is-public-landing) .module-context-header > span,
body.v2-shell:not(.is-public-landing) .module-context-facts dt,
body.v2-shell:not(.is-public-landing) .module-context-rule > span {
  color: var(--v2-muted);
  /* Definition-term label on the comfortable label step (audit: TYPOGRAPHY). */
  font-size: var(--lugn-text-label);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

body.v2-shell:not(.is-public-landing) .module-cockpit-main h3 {
  margin: 0;
  color: var(--v2-text);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

body.v2-shell:not(.is-public-landing) .module-cockpit-main p {
  max-width: 560px;
  margin: 0;
  color: var(--v2-muted);
  font-size: 13px;
  line-height: 1.35;
}

/* P1 FIX(2): de-card the portfolio counter strip. It was a filled surface box
   (1px border + radius + surface fill) wrapping filled tiles — a nested card on
   a de-carded canvas. Per metric §3 it is a borderless divider-grid: transparent
   ground, a single top hairline, tiles separated by a right hairline only. */
body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-map-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(58px, 1fr));
  gap: 0;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-top: 1px solid var(--v2-line);
  border-radius: 0;
  background: transparent;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-map-summary div {
  display: grid;
  gap: 3px;
  min-height: 52px;
  min-width: 0;
  padding: 9px 10px;
  border: 0;
  border-right: 1px solid var(--v2-line);
  border-bottom: 1px solid var(--v2-line);
  border-radius: 0;
  background: transparent;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-map-summary div:last-child {
  border-right: 0;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-map-summary span {
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-map-summary strong {
  color: var(--v2-text);
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
}

body.v2-shell:not(.is-public-landing) .module-cockpit-actions {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .module-cockpit-actions .module-context-action {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-anchor-flow {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto repeat(5, minmax(86px, 1fr));
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 0 0;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* P1 FIX(2): de-card the anchor-flow chips to the quiet-chip recipe — a sunken
   ground at radius-sm, no box border. They are inline metadata nodes in a flow,
   not filled bordered cards; the status dot + word still carries the state. */
body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-flow-node {
  justify-items: start;
  min-height: 34px;
  min-width: 0;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--lugn-radius-sm);
  background: var(--lugn-sunken);
  text-align: left;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-flow-node strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--v2-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-flow-node small {
  display: block;
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.1;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(296px, 0.34fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
}

body.v2-shell:not(.is-public-landing) .module-ledger-shell {
  min-width: 0;
  border-right: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .module-ledger-list {
  display: grid;
  min-width: 0;
}

/* Blank-slate onboarding: the "Available to activate" section heading that
   separates operating modules from the activatable catalog. */
body.v2-shell:not(.is-public-landing) .module-ledger-subhead {
  padding: 14px 16px 6px;
  border-top: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .module-ledger-subhead h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
}

body.v2-shell:not(.is-public-landing) .module-ledger-subhead p {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--v2-muted);
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-ledger-header,
body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-ledger-row {
  display: grid;
  grid-template-columns:
    minmax(196px, 1fr)
    minmax(108px, 0.38fr)
    minmax(126px, 0.48fr)
    minmax(214px, 0.86fr)
    minmax(86px, auto);
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-ledger-header {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-bottom: 1px solid var(--v2-line);
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-ledger-header span {
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-card.module-ledger-row {
  min-height: 64px;
  border: 0;
  border-bottom: 1px solid var(--v2-line);
  border-radius: 0;
  /* De-carded (Notion §6): transparent at rest, like a .lugn-row; the bottom
     hairline is the only separator. */
  background: transparent;
  cursor: pointer;
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-card.module-ledger-row:hover,
body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-card.module-ledger-row:focus-visible {
  /* faint ink wash on hover, matching the canonical .lugn-row affordance */
  background: color-mix(in srgb, var(--lugn-ink) 4%, transparent);
}

body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-card.module-ledger-row.is-selected {
  background: var(--lugn-action-subtle);
  box-shadow: inset 2px 0 0 var(--v2-accent);
}

body.v2-shell:not(.is-public-landing) .module-ledger-module,
body.v2-shell:not(.is-public-landing) .module-ledger-cell,
body.v2-shell:not(.is-public-landing) .module-ledger-actions {
  min-width: 0;
  padding: 10px 12px;
  border-right: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .module-ledger-module {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-content: center;
  gap: 10px;
  padding-left: 14px;
}

body.v2-shell:not(.is-public-landing) .module-ledger-glyph {
  width: 28px;
  height: 28px;
  border: 1px solid var(--v2-line);
  border-radius: 8px;
  background: var(--lugn-sunken);
  color: var(--v2-text);
  font-size: 11px;
  font-weight: 600;
}

body.v2-shell:not(.is-public-landing) .module-ledger-module strong,
body.v2-shell:not(.is-public-landing) .module-ledger-cell strong {
  min-width: 0;
  overflow: hidden;
  color: var(--v2-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.22;
  text-overflow: ellipsis;
}

body.v2-shell:not(.is-public-landing) .module-ledger-module strong {
  white-space: nowrap;
}

body.v2-shell:not(.is-public-landing) .module-ledger-module small,
body.v2-shell:not(.is-public-landing) .module-ledger-cell span {
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
}

body.v2-shell:not(.is-public-landing) .module-ledger-cell small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.v2-shell:not(.is-public-landing) .module-ledger-cell[data-module-ledger-cell="status"] strong {
  gap: 7px;
}

body.v2-shell:not(.is-public-landing) .module-ledger-cell[data-module-ledger-cell="status"].shadow strong::before {
  background: var(--lugn-plan-fg);
}

body.v2-shell:not(.is-public-landing) .module-ledger-actions {
  display: grid;
  align-content: center;
  justify-items: start;
  border-right: 0;
}

body.v2-shell:not(.is-public-landing) .module-ledger-actions .module-action {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

body.v2-shell:not(.is-public-landing) .module-context-panel {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .module-context-header {
  display: grid;
  gap: 6px;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .module-context-header h3 {
  margin: 0;
  color: var(--v2-text);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.1;
}

body.v2-shell:not(.is-public-landing) .module-context-header p {
  margin: 0;
  color: var(--v2-muted);
  font-size: 12px;
  line-height: 1.35;
}

body.v2-shell:not(.is-public-landing) .module-context-facts {
  display: grid;
  gap: 10px;
  margin: 0;
}

body.v2-shell:not(.is-public-landing) .module-context-facts div {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .module-context-facts dd {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  margin: 0;
}

/* P1 FIX(2): de-card the owned-facts / dependency tag chips to the quiet-chip
   recipe — a sunken ground at radius-sm with no box border, muted ink. They are
   inline metadata tags, never loud filled lozenges. */
body.v2-shell:not(.is-public-landing) .module-context-facts dd span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  max-width: 100%;
  padding: 0 8px;
  overflow: hidden;
  border: 0;
  border-radius: var(--lugn-radius-sm);
  background: var(--lugn-sunken);
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell:not(.is-public-landing) .module-context-facts dd span.planned {
  color: var(--v2-muted);
}

body.v2-shell:not(.is-public-landing) .module-context-facts dd span.blocked {
  color: var(--v2-danger);
}

body.v2-shell:not(.is-public-landing) .module-context-rule {
  display: grid;
  gap: 6px;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .module-context-rule p {
  margin: 0;
  color: var(--v2-text);
  font-size: 12px;
  line-height: 1.38;
}

body.v2-shell:not(.is-public-landing) .module-context-actions {
  display: grid;
  gap: 8px;
}

body.v2-shell:not(.is-public-landing) .module-context-actions .module-context-action {
  width: 100%;
  min-height: 34px;
  justify-content: center;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 1120px) {
  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-operating-map {
    grid-template-columns: minmax(0, 1fr);
  }

  body.v2-shell:not(.is-public-landing) .module-cockpit-actions {
    justify-content: flex-start;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.v2-shell:not(.is-public-landing) .module-ledger-shell {
    border-right: 0;
  }

  body.v2-shell:not(.is-public-landing) .module-context-panel {
    border-top: 1px solid var(--v2-line);
  }
}

@media (max-width: 920px) {
  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-operating-map {
    gap: 12px;
    padding: 16px;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-map-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-anchor-flow {
    grid-template-columns: minmax(52px, auto) repeat(5, minmax(72px, 1fr));
    gap: 5px;
    overflow-x: auto;
    padding-top: 0;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-flow-node::before {
    content: none;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-flow-node strong,
  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-flow-node small {
    display: block;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-ledger-header {
    display: none;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-card.module-ledger-row {
    grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
    min-height: 0;
  }

  body.v2-shell:not(.is-public-landing) .module-ledger-module {
    grid-column: 1 / -1;
    min-height: 58px;
    padding: 10px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--v2-line);
  }

  body.v2-shell:not(.is-public-landing) .module-ledger-cell {
    min-height: 46px;
    padding: 9px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--v2-line);
  }

  body.v2-shell:not(.is-public-landing) .module-ledger-cell span {
    display: block;
  }

  body.v2-shell:not(.is-public-landing) .module-ledger-cell[data-module-ledger-cell="surface"] {
    grid-column: 1 / -1;
  }

  body.v2-shell:not(.is-public-landing) .module-ledger-actions {
    grid-column: 1 / -1;
    min-height: 42px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--v2-line);
  }

  body.v2-shell:not(.is-public-landing) .module-context-panel {
    padding: 16px;
  }
}

@media (max-width: 560px) {
  body.v2-shell:not(.is-public-landing) .sandbox-chat-thread,
  body.v2-shell:not(.is-public-landing) .sandbox-chat-compose,
  body.v2-shell:not(.is-public-landing) .sandbox-queue-header,
  body.v2-shell:not(.is-public-landing) .sandbox-queue-row {
    padding-left: 12px;
    padding-right: 12px;
  }

  body.v2-shell:not(.is-public-landing) .sandbox-chat-message > strong {
    font-size: 18px;
  }

  body.v2-shell:not(.is-public-landing) .sandbox-story-head {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  body.v2-shell:not(.is-public-landing) .sandbox-story-head span {
    text-align: left;
  }

  body.v2-shell:not(.is-public-landing) .sandbox-chat-input textarea {
    min-height: 112px;
  }

  body.v2-shell:not(.is-public-landing) .sandbox-prompt-starters {
    grid-template-columns: minmax(0, 1fr);
  }

  body.v2-shell:not(.is-public-landing) .sandbox-workflow-promise {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.v2-shell:not(.is-public-landing) .sandbox-chat-actions .sandbox-chat-submit,
  body.v2-shell:not(.is-public-landing) .sandbox-chat-actions .sandbox-launch-action,
  body.v2-shell:not(.is-public-landing) .sandbox-queue-header .sandbox-launch-action,
  body.v2-shell:not(.is-public-landing) .sandbox-queue-meta .sandbox-launch-action {
    width: 100%;
    justify-content: center;
  }

  body.v2-shell:not(.is-public-landing) .sandbox-queue-header {
    grid-template-columns: minmax(0, 1fr);
  }

  body.v2-shell:not(.is-public-landing) .sandbox-launch-metrics,
  body.v2-shell:not(.is-public-landing) .sandbox-launch-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  body.v2-shell:not(.is-public-landing) .sandbox-launch-metrics div,
  body.v2-shell:not(.is-public-landing) .sandbox-launch-steps li {
    border-right: 0;
  }

  body.v2-shell:not(.is-public-landing) .sandbox-launch-metrics div:nth-child(-n + 3),
  body.v2-shell:not(.is-public-landing) .sandbox-launch-steps li:nth-child(-n + 3) {
    border-bottom: 1px solid var(--v2-line);
  }

  body.v2-shell:not(.is-public-landing) .module-cockpit-main h3 {
    font-size: 20px;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-map-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-map-summary div:nth-child(2n) {
    border-right: 0;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-map-summary div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--v2-line);
  }
}

/* V2 Capability Unlock Tree convergence */
body.v2-shell:not(.is-public-landing) .capability-unlock-command {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.42fr) minmax(110px, 0.18fr) auto;
  min-height: 96px;
  padding: 18px 20px 14px;
}

body.v2-shell:not(.is-public-landing) .capability-unlock-command .capability-command-main {
  grid-template-columns: minmax(0, 1fr);
}

body.v2-shell:not(.is-public-landing) .capability-unlock-command .capability-command-main strong {
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

body.v2-shell:not(.is-public-landing) .capability-unlock-command .capability-command-main span {
  max-width: 620px;
  white-space: normal;
}

body.v2-shell:not(.is-public-landing) .capability-tree-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--v2-line);
  border-radius: 8px;
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .capability-tree-metrics div {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 50px;
  padding: 8px 10px;
  border-right: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .capability-tree-metrics div:last-child {
  border-right: 0;
}

body.v2-shell:not(.is-public-landing) .capability-tree-metrics span {
  overflow: hidden;
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body.v2-shell:not(.is-public-landing) .capability-tree-metrics strong {
  color: var(--v2-text);
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
}

body.v2-shell:not(.is-public-landing) .capability-unlock-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(288px, 0.24fr);
  align-items: stretch;
  min-height: min(680px, calc(100vh - 222px));
  background: var(--lugn-surface);
}

/* Tier board: a calm strategy-game board. The board column stacks the next-
   unlock hero over a row of autonomy-tier columns; the inspector is the second
   workspace column. All colour resolves through Lugn tokens / color-mix. */
body.v2-shell:not(.is-public-landing) .capability-tier-board,
body.v2-shell:not(.is-public-landing) .capability-cluster-board {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  border-right: 1px solid var(--v2-line);
}

/* Next-unlock hero — the single prominent focal card. */
body.v2-shell:not(.is-public-landing) .capability-next-unlock-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 16px;
  min-width: 0;
  padding: 4px 2px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.v2-shell:not(.is-public-landing) .capability-next-unlock-hero.is-clear {
  background: transparent;
}

body.v2-shell:not(.is-public-landing) .capability-hero-open {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

body.v2-shell:not(.is-public-landing) .capability-hero-eyebrow {
  color: var(--v2-accent);
  font-size: var(--lugn-text-micro);
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.v2-shell:not(.is-public-landing) .capability-next-unlock-hero strong {
  color: var(--v2-ink);
  font-size: var(--lugn-text-lg);
  font-weight: 600;
  line-height: 1.16;
}

body.v2-shell:not(.is-public-landing) .capability-hero-unlocks,
body.v2-shell:not(.is-public-landing) .capability-next-unlock-hero > small {
  color: var(--v2-muted);
  font-size: var(--lugn-text-xs);
  line-height: 1.3;
}

body.v2-shell:not(.is-public-landing) .capability-hero-open:hover strong,
body.v2-shell:not(.is-public-landing) .capability-hero-open:focus-visible strong {
  color: var(--v2-accent);
}

body.v2-shell:not(.is-public-landing) .capability-hero-aside {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .capability-hero-missing {
  color: var(--v2-muted);
  font-size: var(--lugn-text-xs);
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}

/* The cheapest "Anslut Y → lås upp X" activation CTA inside the next-unlock hero.
   Spans the full hero width (below the title/aside row) and reads as a real connect
   action — a built connector deep-link, never a fake/"Planerad" one. */
body.v2-shell:not(.is-public-landing) .capability-hero-connect {
  grid-column: 1 / -1;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--lugn-action) 46%, var(--v2-line));
  border-radius: var(--lugn-radius-md);
  background: color-mix(in srgb, var(--lugn-action) 10%, var(--lugn-surface));
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

body.v2-shell:not(.is-public-landing) .capability-hero-connect:hover,
body.v2-shell:not(.is-public-landing) .capability-hero-connect:focus-visible {
  border-color: var(--lugn-action);
  background: color-mix(in srgb, var(--lugn-action) 16%, var(--lugn-surface));
}

body.v2-shell:not(.is-public-landing) .capability-hero-connect-eyebrow {
  color: var(--v2-accent);
  font-size: var(--lugn-text-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.v2-shell:not(.is-public-landing) .capability-hero-connect-label {
  color: var(--v2-ink);
  font-size: var(--lugn-text-sm);
  font-weight: 600;
  line-height: 1.2;
}

body.v2-shell:not(.is-public-landing) .capability-hero-connect-grain {
  color: var(--v2-muted);
  font-size: var(--lugn-text-xs);
  line-height: 1.3;
}

/* First-run SAMPLE/DEMO preview card — prominent, but UNMISTAKABLY a sample. The
   badge uses a calm warning tint (never presented as the tenant's real, trusted
   data). All colours are design-system tokens / color-mix on tokens. */
body.v2-shell:not(.is-public-landing) .capability-firstrun-sample {
  display: grid;
  gap: 12px;
  padding: 18px 20px;
  border: 0;
  border-radius: var(--lugn-radius-lg);
  background: var(--lugn-sunken);
}

body.v2-shell:not(.is-public-landing) .capability-firstrun-head {
  display: grid;
  gap: 6px;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .capability-firstrun-badge {
  justify-self: start;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--lugn-warning-fg) 40%, transparent);
  background: color-mix(in srgb, var(--lugn-warning-fg) 14%, transparent);
  color: var(--lugn-warning-fg);
  font-size: var(--lugn-text-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

body.v2-shell:not(.is-public-landing) .capability-firstrun-head strong {
  color: var(--v2-ink);
  font-size: var(--lugn-text-lg);
  font-weight: 600;
  line-height: 1.18;
}

body.v2-shell:not(.is-public-landing) .capability-firstrun-head p {
  margin: 0;
  color: var(--v2-muted);
  font-size: var(--lugn-text-sm);
  line-height: 1.4;
}

body.v2-shell:not(.is-public-landing) .capability-firstrun-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

body.v2-shell:not(.is-public-landing) .capability-firstrun-note {
  color: var(--v2-muted);
  font-size: var(--lugn-text-xs);
  line-height: 1.3;
}

/* Autonomy-tier columns — the board grid. */
body.v2-shell:not(.is-public-landing) .capability-tier-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  min-width: 0;
}

/* Dependency-edge overlay (Part B): a decorative layer BEHIND the tiles. It is
   taken out of grid flow (absolute) and never intercepts pointer/focus, so it can
   render zero edges with no layout impact. The SVG is sized in JS via width/height
   presentation attributes; colour/stroke live in the line classes below. */
body.v2-shell:not(.is-public-landing) .capability-edge-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

body.v2-shell:not(.is-public-landing) .capability-edge-svg {
  display: block;
}

/* Tiles sit ABOVE the overlay so edges read as "behind" the board. */
body.v2-shell:not(.is-public-landing) .capability-tier-grid > .capability-tier-column {
  position: relative;
  z-index: 1;
}

/* Lit vs. dim is colour-blind-safe: the two states differ by COLOUR *and* dash
   pattern *and* opacity, never colour alone (WCAG 1.4.1). */
body.v2-shell:not(.is-public-landing) .capability-edge-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

body.v2-shell:not(.is-public-landing) .capability-edge-line.is-lit {
  stroke: var(--v2-accent);
  opacity: 0.55;
}

body.v2-shell:not(.is-public-landing) .capability-edge-line.is-dim {
  stroke: var(--v2-muted);
  stroke-dasharray: 4 5;
  opacity: 0.32;
}

/* Visual data-lineage graph (ETL / Truth-In surface): three columns
   source → grain → module rendered as a static, fully-laid-out SVG. Geometry comes
   from the pure lineage-graph.js (x/y/width/d as attributes); ALL colour resolves
   through tokens here — never an inline style, never a colour literal. */
body.v2-shell:not(.is-public-landing) .lineage-graph-columns {
  display: flex;
  justify-content: space-between;
  gap: var(--lugn-space-2, 8px);
  margin-bottom: var(--lugn-space-2, 8px);
  font-size: var(--lugn-text-micro);
  font-weight: var(--lugn-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v2-muted);
}

body.v2-shell:not(.is-public-landing) .lineage-graph-scroll {
  overflow-x: auto;
  max-width: 100%;
}

body.v2-shell:not(.is-public-landing) .lineage-graph-svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Edges read as flowing left→right, behind the node tiles. Colour-blind-safe: the
   edge is a calm neutral hairline; node state carries the readiness signal. */
body.v2-shell:not(.is-public-landing) .lineage-edge {
  fill: none;
  stroke: var(--v2-line-strong);
  stroke-width: 1.5;
  opacity: 0.5;
}

body.v2-shell:not(.is-public-landing) .lineage-node-box {
  stroke: var(--v2-line);
  stroke-width: 1;
  fill: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .lineage-node-label {
  fill: var(--v2-ink);
  font-family: var(--v2-font);
  font-size: var(--lugn-text-xs);
}

/* Source + module nodes are context (neutral); the grain node carries the per-tenant
   readiness — lit (ready) vs dim (pending) differ by FILL *and* opacity, never colour
   alone (WCAG 1.4.1). */
body.v2-shell:not(.is-public-landing) .lineage-node.is-neutral .lineage-node-box {
  fill: var(--lugn-sunken);
}

body.v2-shell:not(.is-public-landing) .lineage-node-grain.is-ready .lineage-node-box {
  fill: var(--lugn-success-bg);
  stroke: var(--lugn-success-fg);
}

body.v2-shell:not(.is-public-landing) .lineage-node-grain.is-pending .lineage-node-box {
  fill: var(--lugn-surface);
  stroke: var(--v2-line-strong);
  stroke-dasharray: 4 4;
  opacity: 0.7;
}

body.v2-shell:not(.is-public-landing) .lineage-node-grain.is-pending .lineage-node-label {
  fill: var(--v2-muted);
}

body.v2-shell:not(.is-public-landing) .capability-tier-column {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 2px 0 0 14px;
  border: 0;
  border-left: 1px solid var(--lugn-hairline);
  border-radius: 0;
  background: transparent;
}

body.v2-shell:not(.is-public-landing) .capability-tier-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .capability-tier-header span {
  color: var(--v2-text);
  font-size: var(--lugn-text-xs);
  font-weight: 600;
  line-height: 1.1;
}

body.v2-shell:not(.is-public-landing) .capability-tier-header small {
  grid-column: 1 / 2;
  overflow: hidden;
  color: var(--v2-muted);
  font-size: var(--lugn-text-micro);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell:not(.is-public-landing) .capability-tier-header strong {
  grid-row: 1;
  grid-column: 2;
  color: var(--v2-muted);
  font-size: var(--lugn-text-xs);
  font-weight: 600;
  line-height: 1.1;
}

body.v2-shell:not(.is-public-landing) .capability-tier-track {
  display: grid;
  gap: 0;
  min-width: 0;
}

/* Slice 9: per-column empty — the compact .empty-state idiom scaled to the tight
   tier track: a calm centered micro line in a dashed hairline frame. Token-only. */
body.v2-shell:not(.is-public-landing) .capability-tier-empty {
  display: grid;
  place-items: center;
  min-height: 44px;
  margin: 0;
  padding: var(--lugn-space-2) var(--lugn-space-1);
  border: var(--lugn-divider) dashed var(--lugn-hairline);
  border-radius: var(--lugn-radius-sm);
  color: var(--lugn-muted);
  font-size: var(--lugn-text-micro);
  line-height: var(--lugn-leading-tight);
  text-align: center;
}

/* Calm catalog/empty board state (no tenant or no nodes) — composes the
   .empty-state idiom from .capability-track-empty; the strong title sits on the
   canonical empty-state lead type. (Slice 9, Notion §9.) */
body.v2-shell:not(.is-public-landing) .capability-board-empty {
  display: grid;
  gap: var(--lugn-space-2);
  place-items: center;
  text-align: center;
}

body.v2-shell:not(.is-public-landing) .capability-board-empty strong {
  color: var(--lugn-ink);
  font-size: var(--lugn-text-lead);
  font-weight: var(--lugn-weight-semibold);
}

/* Repurposed: the next-unlock label inside a tile context (kept selector). */
body.v2-shell:not(.is-public-landing) .capability-next-unlock {
  overflow: hidden;
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Progress bar (design §4) — 4px ink-pill, shared by the node + inspector meters. */
body.v2-shell:not(.is-public-landing) .capability-node-meter,
body.v2-shell:not(.is-public-landing) .capability-inspector-progress {
  width: 100%;
  height: 4px;
  border: 0;
  border-radius: var(--lugn-radius-pill);
  background: var(--lugn-sunken);
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

body.v2-shell:not(.is-public-landing) .capability-node-meter::-webkit-progress-bar,
body.v2-shell:not(.is-public-landing) .capability-inspector-progress::-webkit-progress-bar {
  border-radius: var(--lugn-radius-pill);
  background: var(--lugn-sunken);
}

body.v2-shell:not(.is-public-landing) .capability-node-meter::-webkit-progress-value,
body.v2-shell:not(.is-public-landing) .capability-inspector-progress::-webkit-progress-value {
  border-radius: var(--lugn-radius-pill);
  background: var(--lugn-action);
}

body.v2-shell:not(.is-public-landing) .capability-node-meter::-moz-progress-bar,
body.v2-shell:not(.is-public-landing) .capability-inspector-progress::-moz-progress-bar {
  border-radius: var(--lugn-radius-pill);
  background: var(--lugn-action);
}

/* Honest node-state pill: glyph + TEXT label, coloured by state class. */
body.v2-shell:not(.is-public-landing) .capability-state-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: start;
  /* The pane-head wraps eyebrow+title+chip in a grid; without justify-self the
     chip (a grid item) stretches to the full column. Pin it to hug its content
     so the state pill reads as a compact chip, not a full-width banner. */
  justify-self: start;
  margin-top: 5px;
  padding: 2px 7px;
  border: 1px solid var(--v2-line-strong);
  border-radius: var(--lugn-radius-pill);
  color: var(--v2-muted);
  font-size: var(--lugn-text-micro);
  font-weight: 600;
  line-height: 1.2;
}

body.v2-shell:not(.is-public-landing) .capability-state-chip i {
  font-style: normal;
  line-height: 1;
}

body.v2-shell:not(.is-public-landing) .capability-state-chip em {
  font-style: normal;
}

body.v2-shell:not(.is-public-landing) .capability-state-chip.unlocked {
  border-color: color-mix(in srgb, var(--lugn-success-fg) 42%, transparent);
  color: var(--lugn-success-fg);
}

body.v2-shell:not(.is-public-landing) .capability-state-chip.ready,
body.v2-shell:not(.is-public-landing) .capability-state-chip.shadow {
  border-color: color-mix(in srgb, var(--lugn-action) 44%, transparent);
  color: var(--v2-accent);
}

body.v2-shell:not(.is-public-landing) .capability-state-chip.blocked {
  border-color: color-mix(in srgb, var(--lugn-danger-fg) 42%, transparent);
  color: var(--v2-danger);
}

/* Shared SEVERITY chip — glyph + localized word, tinted by status. Reused by the
   secondary status rows flagged in the a11y audit (attention list, finance margins,
   HR rollup, project breakdown, PIM catalog-mix) so each conveys state by colour +
   glyph + TEXT, never colour alone (WCAG 2.2 AA). Colour comes only from tokens. */
body.v2-shell .status-severity-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--lugn-text-micro);
  font-weight: var(--lugn-weight-semibold);
  color: var(--v2-muted);
  white-space: nowrap;
}

body.v2-shell .status-severity-chip i {
  font-style: normal;
  line-height: 1;
}

body.v2-shell .status-severity-chip em {
  font-style: normal;
}

body.v2-shell .status-severity-chip.ok {
  color: var(--lugn-success-fg);
}

body.v2-shell .status-severity-chip.warning {
  color: var(--lugn-warning-fg);
}

body.v2-shell .status-severity-chip.danger {
  color: var(--lugn-danger-fg);
}

/* Tiles flow vertically within a tier column; the grid spans the board. */
body.v2-shell:not(.is-public-landing) .capability-track-grid {
  display: grid;
  min-width: 0;
}

/* Slice 9: compat-alias onto the .empty-state idiom (Notion §9) — the lens/board
   empty reads as a calm centered line in a dashed HAIRLINE frame (structure from
   whitespace, not a strong box), never a filled card. Token-only. */
body.v2-shell:not(.is-public-landing) .capability-track-empty {
  display: grid;
  gap: var(--lugn-space-2);
  place-items: center;
  min-height: 64px;
  padding: var(--lugn-space-4);
  border: var(--lugn-divider) dashed var(--lugn-hairline);
  border-radius: var(--lugn-radius);
  color: var(--lugn-muted);
  font-size: var(--lugn-text-xs);
  font-weight: var(--lugn-weight-medium);
  text-align: center;
}

/* Node tile — a compact card on the tier board. Full-width within its column,
   stacks gracefully on mobile, never relies on colour alone for state. */
body.v2-shell:not(.is-public-landing) .capability-tree-node {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  width: 100%;
  padding: 11px 6px 12px 4px;
  border: 0;
  border-bottom: 1px solid var(--lugn-hairline);
  border-radius: 0;
  background: transparent;
  color: var(--v2-text);
  text-align: left;
}
body.v2-shell:not(.is-public-landing) .capability-tree-node:hover {
  background: color-mix(in srgb, var(--lugn-ink) 4%, transparent);
}

body.v2-shell:not(.is-public-landing) .capability-node-body {
  display: grid;
  align-content: start;
  gap: 0;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .capability-node-flagship {
  justify-self: start;
  margin-bottom: 4px;
  padding: 1px 6px;
  border-radius: var(--lugn-radius-pill);
  background: color-mix(in srgb, var(--lugn-buy-fg) 14%, transparent);
  color: var(--lugn-buy-fg);
  font-size: var(--lugn-text-micro);
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body.v2-shell:not(.is-public-landing) .capability-node-requires {
  margin-top: 4px;
  overflow: hidden;
  color: var(--v2-muted);
  font-size: var(--lugn-text-micro);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell:not(.is-public-landing) .capability-tree-node.is-flagship {
  border-bottom-color: color-mix(in srgb, var(--lugn-buy-fg) 24%, var(--lugn-hairline));
}

body.v2-shell:not(.is-public-landing) .capability-tree-node.unlocked {
  border-left: 2px solid var(--lugn-action);
  padding-left: 8px;
}

body.v2-shell:not(.is-public-landing) .capability-tree-node.ready,
body.v2-shell:not(.is-public-landing) .capability-tree-node.shadow {
  border-bottom-color: var(--lugn-hairline);
}

body.v2-shell:not(.is-public-landing) .capability-tree-node.locked {
  color: var(--lugn-ink-secondary);
  opacity: 0.7;
}

body.v2-shell:not(.is-public-landing) .capability-tree-node.blocked {
  border-bottom-color: color-mix(in srgb, var(--lugn-danger-fg) 30%, var(--lugn-hairline));
}

body.v2-shell:not(.is-public-landing) .capability-tree-node.is-selected {
  background: var(--lugn-action-subtle);
  box-shadow: inset 2px 0 0 var(--lugn-action);
}

body.v2-shell:not(.is-public-landing) .capability-node-mark {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  background: var(--lugn-surface);
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

body.v2-shell:not(.is-public-landing) .capability-tree-node.unlocked .capability-node-mark,
body.v2-shell:not(.is-public-landing) .capability-tree-node.ready .capability-node-mark,
body.v2-shell:not(.is-public-landing) .capability-tree-node.shadow .capability-node-mark {
  border-color: color-mix(in srgb, var(--lugn-action) 44%, transparent);
  color: var(--v2-accent);
}

body.v2-shell:not(.is-public-landing) .capability-tree-node.blocked .capability-node-mark {
  border-color: color-mix(in srgb, var(--lugn-danger-fg) 42%, transparent);
  color: var(--v2-danger);
}

body.v2-shell:not(.is-public-landing) .capability-tree-node strong {
  display: -webkit-box;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.v2-shell:not(.is-public-landing) .capability-tree-node small {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell:not(.is-public-landing) .capability-node-type {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--v2-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body.v2-shell:not(.is-public-landing) .capability-node-meter {
  display: block;
  margin-top: var(--lugn-space-3);
}

body.v2-shell:not(.is-public-landing) .capability-inspector {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .capability-inspector header {
  display: grid;
  gap: 6px;
}

body.v2-shell:not(.is-public-landing) .capability-inspector header > span,
body.v2-shell:not(.is-public-landing) .capability-requirement-list > span,
body.v2-shell:not(.is-public-landing) .capability-inspector-meta dt {
  color: var(--v2-muted);
  /* Definition-term label on the comfortable label step (audit: TYPOGRAPHY). */
  font-size: var(--lugn-text-label);
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
}

body.v2-shell:not(.is-public-landing) .capability-inspector h3 {
  margin: 0;
  color: var(--v2-text);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.1;
}

body.v2-shell:not(.is-public-landing) .capability-inspector p {
  margin: 0;
  color: var(--v2-muted);
  font-size: 12px;
  line-height: 1.36;
}

body.v2-shell:not(.is-public-landing) .capability-inspector-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  margin: 0;
  /* Declutter pass 2: the node-metadata grid no longer reads as an enclosing box;
     it's a flat 2-col list separated by a single top divider + row hairlines. */
  border: 0;
  border-top: 1px solid var(--v2-line);
  border-radius: 0;
}

body.v2-shell:not(.is-public-landing) .capability-inspector-meta div {
  display: grid;
  gap: 3px;
  min-height: 48px;
  padding: 8px 8px 8px 0;
  /* Declutter pass 2: drop the per-cell vertical mesh; only the row hairline remains. */
  border-right: 0;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .capability-inspector-meta div:nth-child(2n) {
  border-right: 0;
}

body.v2-shell:not(.is-public-landing) .capability-inspector-meta div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

/* --- Capability scores (cost / throughput / quality / risk) + efficiency unlocks --- */
body.v2-shell:not(.is-public-landing) .capability-scores {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
}
body.v2-shell:not(.is-public-landing) .capability-scores-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--v2-muted, var(--lugn-muted));
}
body.v2-shell:not(.is-public-landing) .capability-scores-title small {
  text-transform: none;
  font-weight: 600;
  opacity: 0.8;
}
body.v2-shell:not(.is-public-landing) .capability-scores-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
body.v2-shell:not(.is-public-landing) .capability-score {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 8px;
  padding: 7px 9px;
  border: 1px solid var(--v2-line, var(--lugn-hairline));
  border-radius: 8px;
  background: var(--lugn-surface);
}
body.v2-shell:not(.is-public-landing) .capability-score-label {
  font-size: 12px;
  font-weight: 500;
}
body.v2-shell:not(.is-public-landing) .capability-score-value {
  font-size: 11px;
  color: var(--v2-muted, var(--lugn-muted));
  text-align: right;
}
body.v2-shell:not(.is-public-landing) .capability-score-pips {
  grid-column: 1 / -1;
  display: inline-flex;
  gap: 3px;
}
body.v2-shell:not(.is-public-landing) .capability-score-pip {
  width: 16px;
  height: 4px;
  border-radius: 2px;
  background: var(--lugn-hairline);
}
body.v2-shell:not(.is-public-landing) .capability-score.is-good .capability-score-pip.on { background: var(--lugn-success-fg); }
body.v2-shell:not(.is-public-landing) .capability-score.is-mid .capability-score-pip.on { background: var(--lugn-warning-fg); }
body.v2-shell:not(.is-public-landing) .capability-score.is-bad .capability-score-pip.on { background: var(--lugn-danger-fg); }
body.v2-shell:not(.is-public-landing) .capability-unlocks {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
}
body.v2-shell:not(.is-public-landing) .capability-unlocks-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--v2-muted, var(--lugn-muted));
}
body.v2-shell:not(.is-public-landing) .capability-unlocks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}
body.v2-shell:not(.is-public-landing) .capability-unlocks-list li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--lugn-success-fg) 32%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--lugn-success-fg) 6%, transparent);
}
body.v2-shell:not(.is-public-landing) .capability-unlocks-list strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--lugn-success-fg);
}
body.v2-shell:not(.is-public-landing) .capability-unlocks-list span {
  font-size: 12px;
}

body.v2-shell:not(.is-public-landing) .capability-inspector-meta dd {
  margin: 0;
  color: var(--v2-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

body.v2-shell:not(.is-public-landing) .capability-requirement-list {
  display: grid;
  gap: 8px;
}

body.v2-shell:not(.is-public-landing) .capability-requirement {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 0;
  border-width: 0 0 1px;
  border-bottom: 1px solid var(--v2-line);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

body.v2-shell:not(.is-public-landing) button.capability-requirement {
  cursor: pointer;
}

body.v2-shell:not(.is-public-landing) button.capability-requirement:hover .capability-requirement-label,
body.v2-shell:not(.is-public-landing) button.capability-requirement:focus-visible .capability-requirement-label {
  color: var(--v2-accent);
}

body.v2-shell:not(.is-public-landing) .capability-requirement-check {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1px solid color-mix(in srgb, var(--lugn-action) 35%, transparent);
  border-radius: 999px;
  color: var(--v2-accent);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

body.v2-shell:not(.is-public-landing) .capability-requirement-label {
  overflow: hidden;
  color: var(--v2-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell:not(.is-public-landing) .capability-requirement small {
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.1;
}

body.v2-shell:not(.is-public-landing) .capability-requirement.blocked small {
  color: var(--v2-danger);
}

body.v2-shell:not(.is-public-landing) .capability-requirement.pending .capability-requirement-check,
body.v2-shell:not(.is-public-landing) .capability-requirement.locked .capability-requirement-check,
body.v2-shell:not(.is-public-landing) .capability-requirement.blocked .capability-requirement-check {
  opacity: 0.55;
}

body.v2-shell:not(.is-public-landing) .capability-requirement.ready .capability-requirement-label {
  color: var(--v2-text);
}

body.v2-shell:not(.is-public-landing) .capability-inspector-actions {
  display: grid;
  gap: 8px;
}

body.v2-shell:not(.is-public-landing) .capability-inspector-actions .capability-action {
  width: 100%;
  min-height: 34px;
  justify-content: center;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

body.v2-shell:not(.is-public-landing) .capability-inspector-actions .setup-action-control:first-child .capability-action,
body.v2-shell:not(.is-public-landing) .capability-inspector-actions > .capability-action:first-child {
  border-color: var(--v2-accent);
  background: var(--v2-accent);
  color: var(--lugn-on-accent);
}

/* ============================================================
   Beslutspanel — route-addressable slide-over node pane.
   Body-mounted overlay (host) with a dim backdrop + a right-edge
   panel on desktop that becomes a bottom sheet at <=760px. The
   slide/sheet transition is gated by prefers-reduced-motion at the
   end of this block (collapse to instant). All colour resolves
   through Lugn tokens / color-mix — no new literals.
   ============================================================ */
body.v2-shell .capability-node-pane-host {
  position: fixed;
  inset: 0;
  z-index: 70;
}

body.v2-shell .capability-node-pane-host[hidden] {
  display: none;
}

body.v2-shell .capability-node-pane-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--lugn-ink) 38%, transparent);
}

body.v2-shell .capability-node-pane {
  position: absolute;
  inset: 0 0 0 auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  /* Desktop width is driven by the persisted snap fraction via --cap-pane-width
     (a CSSOM custom property set by applyCapabilityPaneWidth; falls back to the
     original 560px when unset, e.g. before first measure). The bottom-sheet
     breakpoint overrides this to full width. */
  width: min(var(--cap-pane-width, 560px), 100%);
  max-width: 100%;
  border-left: 1px solid var(--v2-line);
  background: var(--lugn-surface);
  box-shadow: var(--lugn-elevation-3);
  animation: capability-node-pane-slide var(--lugn-motion-slow) var(--lugn-ease-emphasized);
  transition: width var(--lugn-motion-base) var(--lugn-ease-emphasized);
}

/* During an active drag the width tracks the pointer 1:1 — kill the settle
   transition so it does not lag, then re-enable it for the snap on release. */
body.v2-shell.capability-node-pane-resizing .capability-node-pane {
  transition: none;
  user-select: none;
}

/* Left-edge drag handle to resize the pane (desktop only; hidden on the bottom
   sheet). A slim hit target with a calm grip affordance. */
body.v2-shell .capability-node-pane-resize {
  position: absolute;
  inset: 0 auto 0 0;
  width: 10px;
  margin-left: -5px;
  cursor: ew-resize;
  touch-action: none;
  background: transparent;
}

body.v2-shell .capability-node-pane-resize::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 5px;
  width: 2px;
  background: color-mix(in srgb, var(--v2-line) 80%, transparent);
}

body.v2-shell .capability-node-pane-resize:hover::before,
body.v2-shell .capability-node-pane-resize:focus-visible::before {
  background: var(--v2-accent);
}

/* Pin/dock toggle + close button cluster in the header. */
body.v2-shell .capability-node-pane-controls {
  display: inline-flex;
  align-items: start;
  gap: 4px;
}

body.v2-shell .capability-node-pane-pin.is-on {
  border-color: var(--v2-accent);
  color: var(--v2-accent);
  background: color-mix(in srgb, var(--v2-accent) 12%, transparent);
}

/* Pinned/docked: the pane stays in flow at the right edge and the whole app
   shell reflows BESIDE it (padding-right = pane width) instead of being overlaid.
   The host loses pointer-blocking so the rest of the page stays interactive. */
body.v2-shell.capability-node-pane-pinned .capability-node-pane-host {
  inset: 0 0 0 auto;
  width: var(--cap-pane-width, 560px);
  pointer-events: none;
}

body.v2-shell.capability-node-pane-pinned .capability-node-pane {
  pointer-events: auto;
  box-shadow: var(--lugn-elevation-2);
}

body.v2-shell.capability-node-pane-pinned .app-shell {
  padding-right: var(--cap-pane-width, 560px);
  transition: padding-right var(--lugn-motion-base) var(--lugn-ease-emphasized);
}

body.v2-shell .capability-node-pane-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--v2-line);
  background: var(--lugn-surface);
}

body.v2-shell .capability-node-pane-head > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

body.v2-shell .capability-node-pane-eyebrow {
  overflow: hidden;
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body.v2-shell .capability-node-pane-title {
  margin: 0;
  color: var(--v2-text);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
}

body.v2-shell .capability-node-pane-close {
  align-self: start;
}

body.v2-shell .capability-node-pane-body {
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
}

body.v2-shell .capability-node-pane-planned {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--v2-line) 70%, transparent);
  border-radius: var(--lugn-radius-lg);
  background: var(--v2-soft);
}

body.v2-shell .capability-node-pane-planned strong {
  color: var(--v2-text);
  font-size: 14px;
}

body.v2-shell .capability-node-pane-planned p {
  margin: 0;
  color: var(--v2-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* C1 — the Command Deck: the composited differentiation surface that leads the
   capability node pane (unlock path × mined process steps × governed decisions).
   New namespace, outside the frozen -pill/-chip/-card/-table families; reuses the
   Lugn tokens only. */
body.v2-shell .command-deck {
  display: grid;
  gap: 12px;
  padding: 0 0 16px;
  border-bottom: var(--lugn-divider) solid var(--lugn-hairline);
}

body.v2-shell .command-deck-head {
  display: grid;
  gap: 4px;
}

body.v2-shell .command-deck-eyebrow {
  color: var(--lugn-action);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.v2-shell .command-deck-narrative {
  margin: 0;
  color: var(--v2-muted);
  font-size: 13px;
  line-height: 1.5;
}

body.v2-shell .command-deck-narrative strong {
  color: var(--v2-text);
  font-weight: 600;
}

/* Three lanes that wrap by available pane width (auto-fit), so a wide docked pane
   shows all three side by side and a narrow / bottom-sheet pane stacks them. */
body.v2-shell .command-deck-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

/* Mobile: on a phone the pane is a full-width bottom sheet, where auto-fit would
   leave a ragged 2+1 of the three lanes. Stack them to a single clean column so the
   money-story screen reads top-to-bottom (unlock path → process → decisions). */
@media (max-width: 720px) {
  body.v2-shell .command-deck-rail {
    grid-template-columns: 1fr;
  }
}

body.v2-shell .command-deck-lane {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--v2-line) 70%, transparent);
  border-radius: var(--lugn-radius-lg);
  background: var(--v2-soft);
}

body.v2-shell .command-deck-lane h3 {
  margin: 0;
  color: var(--lugn-ink-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.v2-shell .command-deck-lane-meta {
  margin: 0;
  color: var(--v2-muted);
  font-size: 12px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

/* Unlock-path ladder: the Källa→Data→Förmåga→Åtgärd→Modul rungs, active one lit. */
body.v2-shell .command-deck-ladder {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.v2-shell .command-deck-rung {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--v2-line) 70%, transparent);
  border-radius: 999px;
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 500;
}

body.v2-shell .command-deck-rung.is-active {
  border-color: var(--lugn-action);
  background: color-mix(in srgb, var(--lugn-action) 12%, transparent);
  color: var(--v2-text);
  font-weight: 600;
}

body.v2-shell .command-deck-process-name {
  color: var(--v2-text);
  font-size: 13px;
  font-weight: 600;
}

/* "Observed from your own activity" — the proof line when the process lane falls back
   to the tenant's real mined workstreams (reuses Lugn tokens; no new class family). */
body.v2-shell .command-deck-observed-hint {
  margin: 0;
  color: var(--lugn-action);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body.v2-shell .command-deck-steps {
  display: grid;
  gap: 3px;
  margin: 0;
  padding-inline-start: 18px;
  color: var(--v2-text);
  font-size: 12px;
  line-height: 1.4;
}

/* Governed decisions: KAPITAL I RISK leads as the focal money number. */
body.v2-shell .command-deck-capital {
  display: grid;
  gap: 2px;
  border-inline-start: 2px solid var(--lugn-action);
  padding-inline-start: 10px;
}

body.v2-shell .command-deck-capital span {
  color: var(--lugn-ink-secondary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.v2-shell .command-deck-capital strong {
  color: var(--v2-ink);
  font-size: 24px;
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* Inline text-button shared by the lanes (open process map, seed sample data). */
body.v2-shell .command-deck-link {
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--lugn-action);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

body.v2-shell .command-deck-link:hover {
  text-decoration: underline;
}

/* The flagship buy-list decision experience inside the pane. */
body.v2-shell .capability-buylist-pane,
body.v2-shell .capability-backtest {
  display: grid;
  gap: 12px;
  min-width: 0;
}

body.v2-shell .capability-buylist-head,
body.v2-shell .capability-backtest-head {
  display: grid;
  gap: 4px;
}

body.v2-shell .capability-buylist-head strong,
body.v2-shell .capability-backtest-head strong {
  color: var(--v2-text);
  font-size: 15px;
  font-weight: 600;
}

body.v2-shell .capability-buylist-head span,
body.v2-shell .capability-backtest-head span {
  color: var(--v2-muted);
  font-size: 12px;
  line-height: 1.5;
}

body.v2-shell .capability-buylist-list {
  display: grid;
  gap: 12px;
}

body.v2-shell .capability-backtest {
  padding-top: 14px;
  border-top: 1px solid var(--v2-line);
}

/* Slice 9: capability-node backtest empty — compat-alias onto the .empty-state
   idiom (Notion §9): a calm reading line in a dashed HAIRLINE frame, no soft fill,
   no shadow. Token-only (drops the 13px literal + the filled box). */
body.v2-shell .capability-backtest-empty {
  display: grid;
  gap: var(--lugn-space-2);
  place-items: center;
  margin: 0;
  padding: var(--lugn-space-4) var(--lugn-space-5);
  border: var(--lugn-divider) dashed var(--lugn-hairline);
  border-radius: var(--lugn-radius);
  background: transparent;
  color: var(--lugn-muted);
  font-size: var(--lugn-text-sm);
  line-height: var(--lugn-leading-normal);
  text-align: center;
}

body.v2-shell .capability-backtest-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* De-carded (Notion §2/§6): an in-flow row group on the canvas — the per-row
     bottom hairline is the only structure. No bordered surface card, no fill. */
  border: 0;
  border-radius: 0;
  background: transparent;
  list-style: none;
}

body.v2-shell .capability-backtest-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell .capability-backtest-row:last-child {
  border-bottom: 0;
}

body.v2-shell .capability-backtest-sku {
  overflow: hidden;
  color: var(--v2-text);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell .capability-backtest-engine,
body.v2-shell .capability-backtest-decision {
  color: var(--v2-muted);
  font-size: 12px;
}

body.v2-shell .capability-backtest-meta {
  grid-column: 1 / -1;
  color: var(--v2-muted);
  font-size: 11px;
}

/* ----- Finance lens (Step E) --------------------------------------------------
   The money view on purchasing. Two homes: (1) the buy-list decision row, where
   one saturated signal answers "can I afford it + is it profitable"; (2) the
   Finance node workspace, with budget/liquidity headroom, margin bands, and the
   obligations list. All colour comes from the status / decision tokens — saturation
   tracks the verdict only; everything else stays neutral and calm. */

/* (1) The per-order finance lens inside a buy-list row. A status hairline + a
   plain-language flag (glyph + text, never colour-only) lead; the cells read calm. */
body.v2-shell .buylist-finance-lens {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
  /* De-carded (Notion §2): a soft-sunken aside with a 2px left status rule —
     not a four-edge bordered card. No box border, no radius, no shadow. */
  border: 0;
  border-inline-start: var(--lugn-space-1) solid var(--v2-line-strong);
  border-radius: 0;
  background: var(--lugn-sunken);
}

body.v2-shell .buylist-finance-lens.ok {
  border-inline-start-color: var(--lugn-success-fg);
  background: color-mix(in srgb, var(--lugn-success-bg) 40%, transparent);
}

body.v2-shell .buylist-finance-lens.warning {
  border-inline-start-color: var(--lugn-warning-fg);
  background: color-mix(in srgb, var(--lugn-warning-bg) 40%, transparent);
}

body.v2-shell .buylist-finance-lens.danger {
  border-inline-start-color: var(--lugn-danger-fg);
  background: color-mix(in srgb, var(--lugn-danger-bg) 40%, transparent);
}

body.v2-shell .buylist-finance-lens-flag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--lugn-text-sm);
  font-weight: var(--lugn-weight-semibold);
  color: var(--v2-ink);
}

body.v2-shell .buylist-finance-lens-flag i {
  font-style: normal;
}

body.v2-shell .buylist-finance-lens.ok .buylist-finance-lens-flag i {
  color: var(--lugn-success-fg);
}

body.v2-shell .buylist-finance-lens.warning .buylist-finance-lens-flag i {
  color: var(--lugn-warning-fg);
}

body.v2-shell .buylist-finance-lens.danger .buylist-finance-lens-flag i {
  color: var(--lugn-danger-fg);
}

body.v2-shell .buylist-finance-lens.neutral .buylist-finance-lens-flag i {
  color: var(--v2-muted);
}

body.v2-shell .buylist-finance-lens-cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px 14px;
}

body.v2-shell .buylist-finance-lens-cells div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.v2-shell .buylist-finance-lens-cells span {
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.v2-shell .buylist-finance-lens-cells strong {
  font-size: var(--lugn-text-sm);
  font-weight: var(--lugn-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
}

body.v2-shell .buylist-finance-lens-cells strong.ok {
  color: var(--lugn-success-fg);
}

body.v2-shell .buylist-finance-lens-cells strong.warning {
  color: var(--lugn-warning-fg);
}

body.v2-shell .buylist-finance-lens-cells strong.danger {
  color: var(--lugn-danger-fg);
}

body.v2-shell .buylist-finance-lens-cells small {
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
  font-variant-numeric: tabular-nums;
}

/* (2) The Finance node workspace — three calm sections sharing the buy-list pane
   grid rhythm. */
body.v2-shell .capability-finance-pane {
  display: grid;
  gap: 16px;
  min-width: 0;
}

body.v2-shell .capability-finance-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body.v2-shell .capability-finance-section:not(:first-of-type) {
  padding-top: 14px;
  border-top: 1px solid var(--v2-line);
}

body.v2-shell .capability-finance-section-title {
  margin: 0;
  font-size: var(--lugn-text-sm);
  font-weight: var(--lugn-weight-semibold);
  color: var(--v2-ink);
}

/* The headroom / obligations verdict line: glyph + plain text, colour from the
   status token only. */
body.v2-shell .capability-finance-verdict {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: var(--lugn-text-sm);
  color: var(--v2-muted);
}

body.v2-shell .capability-finance-verdict i {
  font-style: normal;
}

body.v2-shell .capability-finance-verdict.ok i {
  color: var(--lugn-success-fg);
}

body.v2-shell .capability-finance-verdict.warning i {
  color: var(--lugn-warning-fg);
}

body.v2-shell .capability-finance-verdict.danger i {
  color: var(--lugn-danger-fg);
}

body.v2-shell .capability-finance-margin-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

body.v2-shell .capability-finance-margin-group {
  display: grid;
  gap: 6px;
  align-content: start;
}

body.v2-shell .capability-finance-margin-group-title {
  font-size: var(--lugn-text-label);
  font-weight: var(--lugn-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--v2-muted);
}

body.v2-shell .capability-finance-margin-group-title.warning {
  color: var(--lugn-warning-fg);
}

body.v2-shell .capability-finance-margin-list,
body.v2-shell .capability-finance-obligation-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* De-carded (Notion §2/§6): an in-flow row group on the canvas — the per-row
     bottom hairline is the only structure. No bordered surface card, no fill. */
  border: 0;
  border-radius: 0;
  background: transparent;
  list-style: none;
}

body.v2-shell .capability-finance-margin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell .capability-finance-obligation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell .capability-finance-margin-row:last-child,
body.v2-shell .capability-finance-obligation-row:last-child {
  border-bottom: 0;
}

body.v2-shell .capability-finance-margin-sku,
body.v2-shell .capability-finance-obligation-name {
  overflow: hidden;
  color: var(--v2-ink);
  font-weight: var(--lugn-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell .capability-finance-margin-row strong,
body.v2-shell .capability-finance-obligation-row strong {
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
}

body.v2-shell .capability-finance-margin-row strong.ok {
  color: var(--lugn-success-fg);
}

body.v2-shell .capability-finance-margin-row strong.warning {
  color: var(--lugn-warning-fg);
}

body.v2-shell .capability-finance-obligation-due {
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
  font-variant-numeric: tabular-nums;
}

body.v2-shell .capability-finance-obligation-due.danger,
body.v2-shell .capability-finance-obligation-row strong.danger {
  color: var(--lugn-danger-fg);
}

body.v2-shell .capability-finance-obligation-summary {
  margin: 0;
  font-size: var(--lugn-text-sm);
  color: var(--v2-muted);
  font-variant-numeric: tabular-nums;
}

body.v2-shell .capability-finance-obligation-summary.danger {
  color: var(--lugn-danger-fg);
}

/* ----- Supplier lens (Step F) -------------------------------------------------
   The "who / when to buy from" view on purchasing — the third leg of the triad
   after Procurement and Finance. Two homes: (1) the buy-list decision row, where
   one saturated signal answers "who/when am I buying from + can I place this
   order"; (2) the Suppliers node workspace, with lead-time reliability, payment
   terms, and MOQ. All colour comes from the status tokens — saturation tracks the
   verdict only; everything else stays neutral and calm. Mirrors the finance lens. */

/* (1) The per-order supplier lens inside a buy-list row. A status hairline + a
   plain-language flag (glyph + text, never colour-only) lead; the cells read calm. */
body.v2-shell .buylist-supplier-lens {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
  /* De-carded (Notion §2): a soft-sunken aside with a 2px left status rule —
     not a four-edge bordered card. No box border, no radius, no shadow. */
  border: 0;
  border-inline-start: var(--lugn-space-1) solid var(--v2-line-strong);
  border-radius: 0;
  background: var(--lugn-sunken);
}

body.v2-shell .buylist-supplier-lens.ok {
  border-inline-start-color: var(--lugn-success-fg);
  background: color-mix(in srgb, var(--lugn-success-bg) 40%, transparent);
}

body.v2-shell .buylist-supplier-lens.warning {
  border-inline-start-color: var(--lugn-warning-fg);
  background: color-mix(in srgb, var(--lugn-warning-bg) 40%, transparent);
}

body.v2-shell .buylist-supplier-lens.danger {
  border-inline-start-color: var(--lugn-danger-fg);
  background: color-mix(in srgb, var(--lugn-danger-bg) 40%, transparent);
}

body.v2-shell .buylist-supplier-lens-flag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--lugn-text-sm);
  font-weight: var(--lugn-weight-semibold);
  color: var(--v2-ink);
}

body.v2-shell .buylist-supplier-lens-flag i {
  font-style: normal;
}

body.v2-shell .buylist-supplier-lens.ok .buylist-supplier-lens-flag i {
  color: var(--lugn-success-fg);
}

body.v2-shell .buylist-supplier-lens.warning .buylist-supplier-lens-flag i {
  color: var(--lugn-warning-fg);
}

body.v2-shell .buylist-supplier-lens.danger .buylist-supplier-lens-flag i {
  color: var(--lugn-danger-fg);
}

body.v2-shell .buylist-supplier-lens.neutral .buylist-supplier-lens-flag i {
  color: var(--v2-muted);
}

body.v2-shell .buylist-supplier-lens-cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px 14px;
}

body.v2-shell .buylist-supplier-lens-cells div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.v2-shell .buylist-supplier-lens-cells span {
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.v2-shell .buylist-supplier-lens-cells strong {
  font-size: var(--lugn-text-sm);
  font-weight: var(--lugn-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
}

body.v2-shell .buylist-supplier-lens-cells strong.ok {
  color: var(--lugn-success-fg);
}

body.v2-shell .buylist-supplier-lens-cells strong.warning {
  color: var(--lugn-warning-fg);
}

body.v2-shell .buylist-supplier-lens-cells strong.danger {
  color: var(--lugn-danger-fg);
}

body.v2-shell .buylist-supplier-lens-cells small {
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
  font-variant-numeric: tabular-nums;
}

/* (2) The Suppliers node workspace — three calm sections sharing the buy-list
   pane grid rhythm. */
body.v2-shell .capability-supplier-pane {
  display: grid;
  gap: 16px;
  min-width: 0;
}

body.v2-shell .capability-supplier-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body.v2-shell .capability-supplier-section:not(:first-of-type) {
  padding-top: 14px;
  border-top: 1px solid var(--v2-line);
}

body.v2-shell .capability-supplier-section-title {
  margin: 0;
  font-size: var(--lugn-text-sm);
  font-weight: var(--lugn-weight-semibold);
  color: var(--v2-ink);
}

body.v2-shell .capability-supplier-section-lead {
  margin: 0;
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
}

/* The reliability verdict line: glyph + plain text, colour from the status token
   only. */
body.v2-shell .capability-supplier-verdict {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: var(--lugn-text-sm);
  color: var(--v2-muted);
}

body.v2-shell .capability-supplier-verdict i {
  font-style: normal;
}

body.v2-shell .capability-supplier-verdict.ok i {
  color: var(--lugn-success-fg);
}

body.v2-shell .capability-supplier-verdict.warning i {
  color: var(--lugn-warning-fg);
}

body.v2-shell .capability-supplier-verdict.danger i {
  color: var(--lugn-danger-fg);
}

body.v2-shell .capability-supplier-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* De-carded (Notion §2/§6): an in-flow row group on the canvas — the per-row
     bottom hairline is the only structure. No bordered surface card, no fill. */
  border: 0;
  border-radius: 0;
  background: transparent;
  list-style: none;
}

body.v2-shell .capability-supplier-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell .capability-supplier-row:last-child {
  border-bottom: 0;
}

body.v2-shell .capability-supplier-name {
  overflow: hidden;
  color: var(--v2-ink);
  font-weight: var(--lugn-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell .capability-supplier-detail {
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

body.v2-shell .capability-supplier-row strong {
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
}

body.v2-shell .capability-supplier-row strong.ok {
  color: var(--lugn-success-fg);
}

body.v2-shell .capability-supplier-row strong.warning {
  color: var(--lugn-warning-fg);
}

body.v2-shell .capability-supplier-row strong.danger {
  color: var(--lugn-danger-fg);
}

/* ----- Product (PIM) lens (Step G) --------------------------------------------
   The product-master view on purchasing — the data FOUNDATION the buy-list runs
   on. Two homes: (1) the buy-list decision row, where one saturated signal
   answers "what kind of product am I buying + can the engine trust this
   recommendation"; (2) the PIM node workspace, with planning-readiness and the
   catalog mix. All colour comes from the status tokens — saturation tracks the
   verdict only; everything else stays neutral and calm. Mirrors the finance +
   supplier lenses. */

/* (1) The per-order product lens inside a buy-list row. A status hairline + a
   plain-language flag (glyph + text, never colour-only) lead; the cells read calm. */
body.v2-shell .buylist-product-lens {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
  /* De-carded (Notion §2): a soft-sunken aside with a 2px left status rule —
     not a four-edge bordered card. No box border, no radius, no shadow. */
  border: 0;
  border-inline-start: var(--lugn-space-1) solid var(--v2-line-strong);
  border-radius: 0;
  background: var(--lugn-sunken);
}

body.v2-shell .buylist-product-lens.ok {
  border-inline-start-color: var(--lugn-success-fg);
  background: color-mix(in srgb, var(--lugn-success-bg) 40%, transparent);
}

body.v2-shell .buylist-product-lens.warning {
  border-inline-start-color: var(--lugn-warning-fg);
  background: color-mix(in srgb, var(--lugn-warning-bg) 40%, transparent);
}

body.v2-shell .buylist-product-lens.danger {
  border-inline-start-color: var(--lugn-danger-fg);
  background: color-mix(in srgb, var(--lugn-danger-bg) 40%, transparent);
}

body.v2-shell .buylist-product-lens-flag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--lugn-text-sm);
  font-weight: var(--lugn-weight-semibold);
  color: var(--v2-ink);
}

body.v2-shell .buylist-product-lens-flag i {
  font-style: normal;
}

body.v2-shell .buylist-product-lens.ok .buylist-product-lens-flag i {
  color: var(--lugn-success-fg);
}

body.v2-shell .buylist-product-lens.warning .buylist-product-lens-flag i {
  color: var(--lugn-warning-fg);
}

body.v2-shell .buylist-product-lens.danger .buylist-product-lens-flag i {
  color: var(--lugn-danger-fg);
}

body.v2-shell .buylist-product-lens.neutral .buylist-product-lens-flag i {
  color: var(--v2-muted);
}

body.v2-shell .buylist-product-lens-cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px 14px;
}

body.v2-shell .buylist-product-lens-cells div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.v2-shell .buylist-product-lens-cells span {
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.v2-shell .buylist-product-lens-cells strong {
  font-size: var(--lugn-text-sm);
  font-weight: var(--lugn-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
}

body.v2-shell .buylist-product-lens-cells strong.ok {
  color: var(--lugn-success-fg);
}

body.v2-shell .buylist-product-lens-cells strong.warning {
  color: var(--lugn-warning-fg);
}

body.v2-shell .buylist-product-lens-cells strong.danger {
  color: var(--lugn-danger-fg);
}

body.v2-shell .buylist-product-lens-cells small {
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
  font-variant-numeric: tabular-nums;
}

/* (2) The PIM node workspace — two calm sections sharing the buy-list pane grid
   rhythm. */
body.v2-shell .capability-product-pane {
  display: grid;
  gap: 16px;
  min-width: 0;
}

body.v2-shell .capability-product-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body.v2-shell .capability-product-section:not(:first-of-type) {
  padding-top: 14px;
  border-top: 1px solid var(--v2-line);
}

body.v2-shell .capability-product-section-title {
  margin: 0;
  font-size: var(--lugn-text-sm);
  font-weight: var(--lugn-weight-semibold);
  color: var(--v2-ink);
}

body.v2-shell .capability-product-section-lead {
  margin: 0;
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
}

/* The readiness verdict line: glyph + plain text, colour from the status token
   only. */
body.v2-shell .capability-product-verdict {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: var(--lugn-text-sm);
  color: var(--v2-muted);
}

body.v2-shell .capability-product-verdict i {
  font-style: normal;
}

body.v2-shell .capability-product-verdict.ok :where(i, .lugn-icon) {
  color: var(--lugn-success-fg);
}

body.v2-shell .capability-product-verdict.warning :where(i, .lugn-icon) {
  color: var(--lugn-warning-fg);
}

body.v2-shell .capability-product-verdict.danger :where(i, .lugn-icon) {
  color: var(--lugn-danger-fg);
}

body.v2-shell .capability-product-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* De-carded (Notion §2/§6): an in-flow row group on the canvas — the per-row
     bottom hairline is the only structure. No bordered surface card, no fill. */
  border: 0;
  border-radius: 0;
  background: transparent;
  list-style: none;
}

body.v2-shell .capability-product-row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: 8px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell .capability-product-row:last-child {
  border-bottom: 0;
}

body.v2-shell .capability-product-name {
  overflow: hidden;
  color: var(--v2-ink);
  font-weight: var(--lugn-weight-semibold);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell .capability-product-detail {
  overflow: hidden;
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell .capability-product-row strong {
  font-size: var(--lugn-text-label);
  color: var(--v2-ink);
  text-align: end;
}

body.v2-shell .capability-product-row strong.ok {
  color: var(--lugn-success-fg);
}

body.v2-shell .capability-product-row strong.warning {
  color: var(--lugn-warning-fg);
}

body.v2-shell .capability-product-row strong.danger {
  color: var(--lugn-danger-fg);
}

/* The catalog-mix sub-sections (status / importance) sit side by side and wrap. */
body.v2-shell .capability-product-mix-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

body.v2-shell .capability-product-mix-group {
  display: grid;
  gap: 6px;
  min-width: 0;
}

body.v2-shell .capability-product-mix-group-title {
  font-size: var(--lugn-text-label);
  font-weight: var(--lugn-weight-semibold);
  color: var(--v2-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.v2-shell .capability-product-mix-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* De-carded (Notion §2/§6): an in-flow row group on the canvas — the per-row
     bottom hairline is the only structure. No bordered surface card, no fill. */
  border: 0;
  border-radius: 0;
  background: transparent;
  list-style: none;
}

body.v2-shell .capability-product-mix-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell .capability-product-mix-row:last-child {
  border-bottom: 0;
}

/* The product-status mix rows carry a glyph+text severity chip; lay them out as a
   grid (label | chip | count) so the chip sits with the count, not floating. The
   importance rows keep the plain flex layout above. */
body.v2-shell .capability-product-mix-row[data-product-mix-row="status"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

body.v2-shell .capability-product-mix-label {
  overflow: hidden;
  color: var(--v2-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell .capability-product-mix-row strong {
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
}

body.v2-shell .capability-product-mix-row strong.warning {
  color: var(--lugn-warning-fg);
}

/* ----- Contract lens (Step H) -------------------------------------------------
   The agreement-terms view on purchasing. Two homes: (1) the buy-list decision
   row, where one saturated signal answers "do I have a healthy agreement with this
   counterparty"; (2) the Contracts node workspace, with active contracts + renewal
   risk, obligations, and terms at a glance. All colour comes from the status tokens —
   saturation tracks the verdict only; everything else stays neutral and calm.
   Mirrors the supplier / product lens blocks above. */

/* (1) The per-order contract lens inside a buy-list row. A status hairline + a
   plain-language flag (glyph + text, never colour-only) lead; the cells read calm. */
body.v2-shell .buylist-contract-lens {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
  /* De-carded (Notion §2): a soft-sunken aside with a 2px left status rule —
     not a four-edge bordered card. No box border, no radius, no shadow. */
  border: 0;
  border-inline-start: var(--lugn-space-1) solid var(--v2-line-strong);
  border-radius: 0;
  background: var(--lugn-sunken);
}

body.v2-shell .buylist-contract-lens.ok {
  border-inline-start-color: var(--lugn-success-fg);
  background: color-mix(in srgb, var(--lugn-success-bg) 40%, transparent);
}

body.v2-shell .buylist-contract-lens.warning {
  border-inline-start-color: var(--lugn-warning-fg);
  background: color-mix(in srgb, var(--lugn-warning-bg) 40%, transparent);
}

body.v2-shell .buylist-contract-lens.danger {
  border-inline-start-color: var(--lugn-danger-fg);
  background: color-mix(in srgb, var(--lugn-danger-bg) 40%, transparent);
}

body.v2-shell .buylist-contract-lens-flag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--lugn-text-sm);
  font-weight: var(--lugn-weight-semibold);
  color: var(--v2-ink);
}

body.v2-shell .buylist-contract-lens-flag i {
  font-style: normal;
}

body.v2-shell .buylist-contract-lens.ok .buylist-contract-lens-flag i {
  color: var(--lugn-success-fg);
}

body.v2-shell .buylist-contract-lens.warning .buylist-contract-lens-flag i {
  color: var(--lugn-warning-fg);
}

body.v2-shell .buylist-contract-lens.danger .buylist-contract-lens-flag i {
  color: var(--lugn-danger-fg);
}

body.v2-shell .buylist-contract-lens.neutral .buylist-contract-lens-flag i {
  color: var(--v2-muted);
}

body.v2-shell .buylist-contract-lens-cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px 14px;
}

body.v2-shell .buylist-contract-lens-cells div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.v2-shell .buylist-contract-lens-cells span {
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.v2-shell .buylist-contract-lens-cells strong {
  font-size: var(--lugn-text-sm);
  font-weight: var(--lugn-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
}

body.v2-shell .buylist-contract-lens-cells strong.ok {
  color: var(--lugn-success-fg);
}

body.v2-shell .buylist-contract-lens-cells strong.warning {
  color: var(--lugn-warning-fg);
}

body.v2-shell .buylist-contract-lens-cells strong.danger {
  color: var(--lugn-danger-fg);
}

body.v2-shell .buylist-contract-lens-cells small {
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
  font-variant-numeric: tabular-nums;
}

/* (2) The Contracts node workspace — three calm sections sharing the buy-list pane
   grid rhythm (mirrors .capability-product-pane). */
body.v2-shell .capability-contract-pane {
  display: grid;
  gap: 16px;
  min-width: 0;
}

body.v2-shell .capability-contract-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body.v2-shell .capability-contract-section:not(:first-of-type) {
  padding-top: 14px;
  border-top: 1px solid var(--v2-line);
}

body.v2-shell .capability-contract-section-title {
  margin: 0;
  font-size: var(--lugn-text-sm);
  font-weight: var(--lugn-weight-semibold);
  color: var(--v2-ink);
}

body.v2-shell .capability-contract-section-lead {
  margin: 0;
  font-size: var(--lugn-text-sm);
  color: var(--v2-muted);
}

/* The renewal verdict line: glyph + plain text, colour from the status token only. */
body.v2-shell .capability-contract-verdict {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: var(--lugn-text-sm);
  color: var(--v2-muted);
}

body.v2-shell .capability-contract-verdict i {
  font-style: normal;
}

body.v2-shell .capability-contract-verdict.ok i {
  color: var(--lugn-success-fg);
}

body.v2-shell .capability-contract-verdict.warning i {
  color: var(--lugn-warning-fg);
}

body.v2-shell .capability-contract-verdict.danger i {
  color: var(--lugn-danger-fg);
}

body.v2-shell .capability-contract-list,
body.v2-shell .capability-contract-obligation-list,
body.v2-shell .capability-contract-terms-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* De-carded (Notion §2/§6): an in-flow row group on the canvas — the per-row
     bottom hairline is the only structure. No bordered surface card, no fill. */
  border: 0;
  border-radius: 0;
  background: transparent;
  list-style: none;
}

body.v2-shell .capability-contract-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell .capability-contract-obligation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell .capability-contract-terms-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell .capability-contract-row:last-child,
body.v2-shell .capability-contract-obligation-row:last-child,
body.v2-shell .capability-contract-terms-row:last-child {
  border-bottom: 0;
}

body.v2-shell .capability-contract-name,
body.v2-shell .capability-contract-obligation-name,
body.v2-shell .capability-contract-terms-name {
  overflow: hidden;
  color: var(--v2-ink);
  font-weight: var(--lugn-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell .capability-contract-detail,
body.v2-shell .capability-contract-obligation-meta,
body.v2-shell .capability-contract-terms-type,
body.v2-shell .capability-contract-terms-period {
  overflow: hidden;
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell .capability-contract-row strong,
body.v2-shell .capability-contract-obligation-row strong,
body.v2-shell .capability-contract-terms-row strong {
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
}

body.v2-shell .capability-contract-row strong.ok,
body.v2-shell .capability-contract-obligation-row strong.ok {
  color: var(--lugn-success-fg);
}

body.v2-shell .capability-contract-row strong.warning,
body.v2-shell .capability-contract-obligation-row strong.warning {
  color: var(--lugn-warning-fg);
}

body.v2-shell .capability-contract-row strong.danger,
body.v2-shell .capability-contract-obligation-row strong.danger {
  color: var(--lugn-danger-fg);
}

body.v2-shell .capability-contract-obligation-summary {
  margin: 0;
  font-size: var(--lugn-text-sm);
  color: var(--v2-muted);
  font-variant-numeric: tabular-nums;
}

body.v2-shell .capability-contract-obligation-summary.warning {
  color: var(--lugn-warning-fg);
}

/* Projektrisk (Engine 1) — the Projects node workspace: the schedule/governance-risk
   queue + status breakdown. Shares the contract/product pane grid rhythm. */
body.v2-shell .capability-project-pane {
  display: grid;
  gap: 16px;
  min-width: 0;
}

body.v2-shell .capability-project-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body.v2-shell .capability-project-section:not(:first-of-type) {
  padding-top: 14px;
  border-top: 1px solid var(--v2-line);
}

body.v2-shell .capability-project-section-title {
  margin: 0;
  font-size: var(--lugn-text-sm);
  font-weight: var(--lugn-weight-semibold);
  color: var(--v2-ink);
}

body.v2-shell .capability-project-section-lead {
  margin: 0;
  font-size: var(--lugn-text-sm);
  color: var(--v2-muted);
}

/* The risk verdict line: glyph + plain text, colour from the status token only. */
body.v2-shell .capability-project-verdict {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: var(--lugn-text-sm);
  color: var(--v2-muted);
}

body.v2-shell .capability-project-verdict i {
  font-style: normal;
}

body.v2-shell .capability-project-verdict.ok i {
  color: var(--lugn-success-fg);
}

body.v2-shell .capability-project-verdict.warning i {
  color: var(--lugn-warning-fg);
}

body.v2-shell .capability-project-verdict.danger i {
  color: var(--lugn-danger-fg);
}

/* The honestly-labelled planned-budget rollup (NOT capital at risk). */
body.v2-shell .capability-project-budget {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  /* De-carded (Notion §2): a soft-sunken aside with a 2px left rule — not a
     four-edge bordered card. No box border, no radius, no shadow. */
  border: 0;
  border-inline-start: var(--lugn-space-1) solid var(--v2-line-strong);
  border-radius: 0;
  background: var(--lugn-sunken);
}

body.v2-shell .capability-project-budget-label {
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.v2-shell .capability-project-budget-values {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

body.v2-shell .capability-project-budget-values strong {
  font-size: var(--lugn-text-base);
  font-weight: var(--lugn-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
}

body.v2-shell .capability-project-budget-note {
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
}

body.v2-shell .capability-project-list,
body.v2-shell .capability-project-status-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* De-carded (Notion §2/§6): an in-flow row group on the canvas — the per-row
     bottom hairline is the only structure. No bordered surface card, no fill. */
  border: 0;
  border-radius: 0;
  background: transparent;
  list-style: none;
}

body.v2-shell .capability-project-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell .capability-project-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell .capability-project-row:last-child,
body.v2-shell .capability-project-status-row:last-child {
  border-bottom: 0;
}

body.v2-shell .capability-project-name,
body.v2-shell .capability-project-status-name {
  overflow: hidden;
  color: var(--v2-ink);
  font-weight: var(--lugn-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell .capability-project-detail {
  overflow: hidden;
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell .capability-project-row strong,
body.v2-shell .capability-project-status-row strong {
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
}

body.v2-shell .capability-project-row strong.warning,
body.v2-shell .capability-project-status-row strong.warning {
  color: var(--lugn-warning-fg);
}

body.v2-shell .capability-project-row strong.danger,
body.v2-shell .capability-project-status-row strong.danger {
  color: var(--lugn-danger-fg);
}

body.v2-shell .capability-project-row strong.ok,
body.v2-shell .capability-project-status-row strong.ok {
  color: var(--lugn-success-fg);
}

body.v2-shell .capability-project-status-summary {
  margin: 0;
  font-size: var(--lugn-text-sm);
  color: var(--v2-muted);
  font-variant-numeric: tabular-nums;
}

body.v2-shell .capability-project-status-summary.warning {
  color: var(--lugn-warning-fg);
}

/* Budget-burn / over-budget (REAL spend). The overspend rollup value is a danger
   figure (real money over the planned budget), and the record-actuals affordance
   mirrors the ops record-review button. Reuses the project list/row/budget classes. */
body.v2-shell .capability-project-budget-values strong.danger {
  color: var(--lugn-danger-fg);
}

body.v2-shell .capability-project-actuals-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* De-carded (Notion §2/§6): an in-flow row group on the canvas — the per-row
     bottom hairline is the only structure. No bordered surface card, no fill. */
  border: 0;
  border-radius: 0;
  background: transparent;
  list-style: none;
}

body.v2-shell .capability-project-actuals-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell .capability-project-actuals-row:last-child {
  border-bottom: 0;
}

body.v2-shell .capability-project-record {
  justify-self: end;
  padding: 4px 10px;
  font-size: var(--lugn-text-label);
}

/* ENGINE 2 — Personalöversikt. The HR node workspace: the workforce-readiness lens.
   Mirrors the project lens structure (verdict / metric grid / ranked list / calm
   rollup), with the integrity flag the prominent danger signal. */
body.v2-shell .capability-hr-pane {
  display: grid;
  gap: 16px;
  min-width: 0;
}

body.v2-shell .capability-hr-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body.v2-shell .capability-hr-section:not(:first-of-type) {
  padding-top: 14px;
  border-top: 1px solid var(--v2-line);
}

body.v2-shell .capability-hr-section-title {
  margin: 0;
  font-size: var(--lugn-text-sm);
  font-weight: var(--lugn-weight-semibold);
  color: var(--v2-ink);
}

body.v2-shell .capability-hr-section-lead {
  margin: 0;
  font-size: var(--lugn-text-sm);
  color: var(--v2-muted);
}

/* The readiness verdict line: glyph + plain text, colour from the status token only. */
body.v2-shell .capability-hr-verdict {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: var(--lugn-text-sm);
  color: var(--v2-muted);
}

body.v2-shell .capability-hr-verdict i {
  font-style: normal;
}

body.v2-shell .capability-hr-verdict.ok i {
  color: var(--lugn-success-fg);
}

body.v2-shell .capability-hr-verdict.warning i {
  color: var(--lugn-warning-fg);
}

body.v2-shell .capability-hr-verdict.danger i {
  color: var(--lugn-danger-fg);
}

/* The honestly-labelled net headcount delta (a true count delta, never money). */
body.v2-shell .capability-hr-delta {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  /* De-carded (Notion §2): a soft-sunken aside with a 2px left rule — not a
     four-edge bordered card. No box border, no radius, no shadow. */
  border: 0;
  border-inline-start: var(--lugn-space-1) solid var(--v2-line-strong);
  border-radius: 0;
  background: var(--lugn-sunken);
}

body.v2-shell .capability-hr-delta-label {
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.v2-shell .capability-hr-delta-values {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}

body.v2-shell .capability-hr-delta-values strong {
  font-size: var(--lugn-text-base);
  font-weight: var(--lugn-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
}

body.v2-shell .capability-hr-delta-values small {
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
  font-variant-numeric: tabular-nums;
}

body.v2-shell .capability-hr-list,
body.v2-shell .capability-hr-status-list,
body.v2-shell .capability-hr-type-list,
body.v2-shell .capability-hr-concentration-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* De-carded (Notion §2/§6): an in-flow row group on the canvas — the per-row
     bottom hairline is the only structure. No bordered surface card, no fill. */
  border: 0;
  border-radius: 0;
  background: transparent;
  list-style: none;
}

body.v2-shell .capability-hr-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell .capability-hr-status-row,
body.v2-shell .capability-hr-type-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--v2-line);
}

/* The status rollup row carries a glyph+text severity chip between the name and the
   count, so the third column makes room for it (the type-row stays two columns). */
body.v2-shell .capability-hr-status-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

body.v2-shell .capability-hr-concentration-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell .capability-hr-row:last-child,
body.v2-shell .capability-hr-status-row:last-child,
body.v2-shell .capability-hr-type-row:last-child,
body.v2-shell .capability-hr-concentration-row:last-child {
  border-bottom: 0;
}

body.v2-shell .capability-hr-name,
body.v2-shell .capability-hr-status-name,
body.v2-shell .capability-hr-type-name,
body.v2-shell .capability-hr-concentration-holder {
  overflow: hidden;
  color: var(--v2-ink);
  font-weight: var(--lugn-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell .capability-hr-detail {
  overflow: hidden;
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell .capability-hr-concentration-label {
  display: grid;
  gap: 1px;
  overflow: hidden;
  color: var(--v2-ink);
  font-weight: var(--lugn-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell .capability-hr-concentration-label small {
  font-size: var(--lugn-text-label);
  font-weight: var(--lugn-weight-regular);
  color: var(--v2-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.v2-shell .capability-hr-concentration-holder {
  color: var(--v2-muted);
  font-weight: var(--lugn-weight-regular);
}

body.v2-shell .capability-hr-row strong,
body.v2-shell .capability-hr-status-row strong,
body.v2-shell .capability-hr-type-row strong,
body.v2-shell .capability-hr-concentration-row strong {
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
}

body.v2-shell .capability-hr-row strong.warning,
body.v2-shell .capability-hr-status-row strong.warning,
body.v2-shell .capability-hr-concentration-row strong.warning {
  color: var(--lugn-warning-fg);
}

body.v2-shell .capability-hr-row strong.danger,
body.v2-shell .capability-hr-status-row strong.danger {
  color: var(--lugn-danger-fg);
}

body.v2-shell .capability-hr-row strong.ok,
body.v2-shell .capability-hr-status-row strong.ok {
  color: var(--lugn-success-fg);
}

body.v2-shell .capability-hr-status-summary {
  margin: 0;
  font-size: var(--lugn-text-sm);
  color: var(--v2-muted);
  font-variant-numeric: tabular-nums;
}

body.v2-shell .capability-hr-status-summary.warning {
  color: var(--lugn-warning-fg);
}

/* ENGINE 2 (org dimension) — Organisation / Chefsstruktur. The org-structure section
   reuses the HR section primitives (verdict / metric-grid / list / status-summary). The
   orphaned-report list is the sharpest org signal, so it carries a danger left-accent to
   read as the integrity red flag it is — tokens only, no new colour literals. The
   unassigned summary is the calm/info line (muted, never warning). */
body.v2-shell .capability-hr-list[data-hr-list="orphaned"] {
  border-inline-start: 2px solid var(--lugn-danger-fg);
}

body.v2-shell .capability-hr-status-summary[data-hr-org="unassigned"] {
  color: var(--v2-muted);
}

/* ENGINE 3 — SOP-granskning. The Operations node workspace: the SOP review-compliance
   lens. Mirrors the project/HR lens structure (verdict / metric grid / ranked list +
   per-row record-review affordance / calm by-area + governance breakdown), with the
   overdue review the prominent danger signal and never-reviewed the honest warning. */
body.v2-shell .capability-ops-pane {
  display: grid;
  gap: 16px;
  min-width: 0;
}

body.v2-shell .capability-ops-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body.v2-shell .capability-ops-section:not(:first-of-type) {
  padding-top: 14px;
  border-top: 1px solid var(--v2-line);
}

body.v2-shell .capability-ops-section-title {
  margin: 0;
  font-size: var(--lugn-text-sm);
  font-weight: var(--lugn-weight-semibold);
  color: var(--v2-ink);
}

body.v2-shell .capability-ops-subtitle {
  margin: 6px 0 0;
  font-size: var(--lugn-text-label);
  font-weight: var(--lugn-weight-semibold);
  color: var(--v2-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.v2-shell .capability-ops-section-lead {
  margin: 0;
  font-size: var(--lugn-text-sm);
  color: var(--v2-muted);
}

/* The review verdict line: glyph + plain text, colour from the status token only. */
body.v2-shell .capability-ops-verdict {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: var(--lugn-text-sm);
  color: var(--v2-muted);
}

body.v2-shell .capability-ops-verdict i {
  font-style: normal;
}

body.v2-shell .capability-ops-verdict.ok i {
  color: var(--lugn-success-fg);
}

body.v2-shell .capability-ops-verdict.warning i {
  color: var(--lugn-warning-fg);
}

body.v2-shell .capability-ops-verdict.danger i {
  color: var(--lugn-danger-fg);
}

body.v2-shell .capability-ops-list,
body.v2-shell .capability-ops-area-list,
body.v2-shell .capability-ops-gov-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* De-carded (Notion §2/§6): an in-flow row group on the canvas — the per-row
     bottom hairline is the only structure. No bordered surface card, no fill. */
  border: 0;
  border-radius: 0;
  background: transparent;
  list-style: none;
}

body.v2-shell .capability-ops-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) auto;
  align-items: center;
  gap: 6px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell .capability-ops-area-row,
body.v2-shell .capability-ops-gov-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell .capability-ops-gov-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

body.v2-shell .capability-ops-row:last-child,
body.v2-shell .capability-ops-area-row:last-child,
body.v2-shell .capability-ops-gov-row:last-child {
  border-bottom: 0;
}

body.v2-shell .capability-ops-name,
body.v2-shell .capability-ops-area-name,
body.v2-shell .capability-ops-gov-name {
  overflow: hidden;
  color: var(--v2-ink);
  font-weight: var(--lugn-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell .capability-ops-detail {
  overflow: hidden;
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell .capability-ops-row strong,
body.v2-shell .capability-ops-area-row strong,
body.v2-shell .capability-ops-gov-row strong {
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
}

body.v2-shell .capability-ops-row strong.warning,
body.v2-shell .capability-ops-gov-row strong.warning {
  color: var(--lugn-warning-fg);
}

body.v2-shell .capability-ops-row strong.danger {
  color: var(--lugn-danger-fg);
}

body.v2-shell .capability-ops-area-needs {
  font-variant-numeric: tabular-nums;
  color: var(--v2-muted);
}

body.v2-shell .capability-ops-area-needs.warning {
  color: var(--lugn-warning-fg);
  font-weight: var(--lugn-weight-semibold);
}

/* The per-row "Registrera granskning" affordance — a real write button, full-width on
   its own grid line so the row stacks calmly on a phone. */
body.v2-shell .capability-ops-record {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 2px;
  padding: 4px 10px;
  font-size: var(--lugn-text-label);
}

body.v2-shell .capability-ops-status-summary {
  margin: 0;
  font-size: var(--lugn-text-sm);
  color: var(--v2-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Attention aggregator (the Analysis node's capstone command view). Mirrors the
   ops/project pane structure: a focal metric grid, a ranked cross-module list with
   per-row deep-link buttons, and a calm by-module tally. Colour from status tokens
   only — never colour-only (a glyph + text label carry meaning).
   --------------------------------------------------------------------------- */
body.v2-shell .capability-attention-pane {
  display: grid;
  gap: 16px;
  min-width: 0;
}

body.v2-shell .capability-attention-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body.v2-shell .capability-attention-section:not(:first-of-type) {
  padding-top: 14px;
  border-top: 1px solid var(--v2-line);
}

body.v2-shell .capability-attention-section-title {
  margin: 0;
  font-size: var(--lugn-text-sm);
  font-weight: var(--lugn-weight-semibold);
  color: var(--v2-ink);
}

body.v2-shell .capability-attention-section-lead {
  margin: 0;
  font-size: var(--lugn-text-sm);
  color: var(--v2-muted);
}

body.v2-shell .capability-attention-verdict {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: var(--lugn-text-sm);
  color: var(--v2-muted);
}

body.v2-shell .capability-attention-verdict i {
  font-style: normal;
}

body.v2-shell .capability-attention-verdict.ok :where(i, .lugn-icon),
body.v2-shell .capability-attention-verdict.neutral :where(i, .lugn-icon) {
  color: var(--lugn-success-fg);
}

body.v2-shell .capability-attention-verdict.warning :where(i, .lugn-icon) {
  color: var(--lugn-warning-fg);
}

body.v2-shell .capability-attention-verdict.danger :where(i, .lugn-icon) {
  color: var(--lugn-danger-fg);
}

body.v2-shell .capability-attention-list,
body.v2-shell .capability-attention-module-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* De-carded (Notion §2/§6): an in-flow row group on the canvas — the per-row
     bottom hairline is the only structure. No bordered surface card, no fill. */
  border: 0;
  border-radius: 0;
  background: transparent;
  list-style: none;
}

body.v2-shell .capability-attention-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell .capability-attention-row:last-child,
body.v2-shell .capability-attention-module-row:last-child {
  border-bottom: 0;
}

/* A subtle left accent rail so danger rows read distinct from warning rows even
   before the count colour — colour-blind-safe via the count label + module text.
   De-carded (Notion §2/§6): a 2px left rule, not an inset-shadow box. */
body.v2-shell .capability-attention-row[data-attention-status="danger"] {
  border-inline-start: var(--lugn-space-1) solid var(--lugn-danger-fg);
}

body.v2-shell .capability-attention-row[data-attention-status="warning"] {
  border-inline-start: var(--lugn-space-1) solid var(--lugn-warning-fg);
}

body.v2-shell .capability-attention-row-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

/* Module label + per-row severity chip on one line above the title, so each row
   states its severity in glyph + text (not only the count colour / accent rail). */
body.v2-shell .capability-attention-row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body.v2-shell .capability-attention-module {
  font-size: var(--lugn-text-label);
  font-weight: var(--lugn-weight-semibold);
  color: var(--v2-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.v2-shell .capability-attention-title {
  overflow: hidden;
  color: var(--v2-ink);
  font-weight: var(--lugn-weight-semibold);
  text-overflow: ellipsis;
}

body.v2-shell .capability-attention-detail {
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
}

body.v2-shell .capability-attention-count {
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
}

body.v2-shell .capability-attention-count.warning {
  color: var(--lugn-warning-fg);
}

body.v2-shell .capability-attention-count.danger {
  color: var(--lugn-danger-fg);
}

/* The per-row deep-link affordance — a real button, full-width on its own grid line
   so the row stacks calmly on a phone. */
body.v2-shell .capability-attention-open {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 2px;
  padding: 4px 10px;
  font-size: var(--lugn-text-label);
}

body.v2-shell .capability-attention-module-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell .capability-attention-module-name {
  overflow: hidden;
  color: var(--v2-ink);
  font-weight: var(--lugn-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell .capability-attention-module-row strong {
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
}

body.v2-shell .capability-attention-module-row strong.warning {
  color: var(--lugn-warning-fg);
}

body.v2-shell .capability-attention-module-row strong.danger {
  color: var(--lugn-danger-fg);
}

/* The honest "Planerad" note for the unbuilt analytics/drift/anomaly/narrative scope. */
body.v2-shell .capability-attention-planned {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  /* De-carded (Notion §2): the canonical soft-sunken callout — a genuine planned
     aside, not a bordered card. No box border, soft fill at the small radius. */
  border: 0;
  border-radius: var(--lugn-radius-sm);
  background: var(--lugn-sunken);
}

body.v2-shell .capability-attention-planned strong {
  font-size: var(--lugn-text-sm);
  color: var(--v2-ink);
}

body.v2-shell .capability-attention-planned p {
  margin: 0;
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
}

/* ===========================================================================
   Integration roadmap pane — the "connect Y to unlock X" activation guide. Reuses
   the calm attention-pane scaffolding (sections, verdict, metric grid) and adds the
   per-grain gap rows with their connect / planned / manual fill options.
   =========================================================================== */
body.v2-shell .capability-roadmap-pane {
  display: grid;
  gap: 16px;
  min-width: 0;
}

body.v2-shell .capability-roadmap-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body.v2-shell .capability-roadmap-section:not(:first-of-type) {
  padding-top: 14px;
  border-top: 1px solid var(--v2-line);
}

body.v2-shell .capability-roadmap-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* De-carded (Notion §2/§6): an in-flow row group on the canvas — the per-row
     bottom hairline is the only structure. No bordered surface card, no fill. */
  border: 0;
  border-radius: 0;
  background: transparent;
  list-style: none;
}

body.v2-shell .capability-roadmap-row {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell .capability-roadmap-list--ready .capability-roadmap-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

body.v2-shell .capability-roadmap-row:last-child {
  border-bottom: 0;
}

/* A subtle left accent rail so a connect-now gap reads distinct from a calm
   manual/planned row even before the chip — colour-blind-safe via the chip text.
   De-carded (Notion §2/§6): a 2px left rule, not an inset-shadow box. */
body.v2-shell .capability-roadmap-row[data-roadmap-status="warning"] {
  border-inline-start: var(--lugn-space-1) solid var(--lugn-warning-fg);
}

body.v2-shell .capability-roadmap-row[data-roadmap-status="ok"] {
  border-inline-start: var(--lugn-space-1) solid var(--lugn-success-fg);
}

body.v2-shell .capability-roadmap-row-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.v2-shell .capability-roadmap-row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body.v2-shell .capability-roadmap-module {
  font-size: var(--lugn-text-label);
  font-weight: var(--lugn-weight-semibold);
  color: var(--v2-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.v2-shell .capability-roadmap-grain-label {
  overflow: hidden;
  color: var(--v2-ink);
  font-weight: var(--lugn-weight-semibold);
  text-overflow: ellipsis;
}

body.v2-shell .capability-roadmap-grain-stage {
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
}

body.v2-shell .capability-roadmap-ready-count {
  font-variant-numeric: tabular-nums;
  color: var(--v2-muted);
}

/* The "how to fill it" block — domain options stacked, then the manual fallback. */
body.v2-shell .capability-roadmap-fill {
  display: grid;
  gap: 8px;
  min-width: 0;
}

body.v2-shell .capability-roadmap-fill--derived,
body.v2-shell .capability-roadmap-fill-manual {
  margin: 0;
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
}

body.v2-shell .capability-roadmap-domain {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  /* De-carded (Notion §2): the canonical soft-sunken callout for the domain
     cluster — no box border, soft fill at the small radius. */
  border: 0;
  border-radius: var(--lugn-radius-sm);
  background: var(--lugn-sunken);
}

body.v2-shell .capability-roadmap-domain-label {
  font-size: var(--lugn-text-label);
  font-weight: var(--lugn-weight-semibold);
  color: var(--v2-ink);
}

body.v2-shell .capability-roadmap-domain-options {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* A real connect deep-link (built connector). Reuses the secondary-button affordance
   sizing so it sits calmly inline. */
body.v2-shell .capability-roadmap-connect {
  padding: 4px 10px;
  font-size: var(--lugn-text-label);
  font-weight: var(--lugn-weight-semibold);
  color: var(--v2-accent);
  background: color-mix(in srgb, var(--v2-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--v2-accent) 28%, transparent);
  border-radius: var(--lugn-radius-sm);
  cursor: pointer;
}

body.v2-shell .capability-roadmap-connect:hover {
  background: color-mix(in srgb, var(--v2-accent) 16%, transparent);
}

/* An honest "Planerad" chip — glyph + connector name + the word, never a fake
   connect affordance (no button, not clickable). */
body.v2-shell .capability-roadmap-planned-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
  border: 1px dashed var(--v2-line);
  border-radius: var(--lugn-radius-sm);
}

body.v2-shell .capability-roadmap-planned-chip i {
  font-style: normal;
}

body.v2-shell .capability-roadmap-planned-chip em {
  font-style: normal;
  font-weight: var(--lugn-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--lugn-text-micro, var(--lugn-text-label));
}

body.v2-shell .capability-roadmap-planned-more {
  font-size: var(--lugn-text-label);
  color: var(--v2-muted);
}

/* The kept inspector content, moved into the pane (no standalone aside chrome). */
body.v2-shell .capability-node-pane-inspector {
  border: 0;
  padding: 0;
}

body.v2-shell .capability-node-pane-inspector:not(:first-child) {
  padding-top: 16px;
  border-top: 1px solid var(--v2-line);
}

@keyframes capability-node-pane-slide {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes capability-node-pane-sheet {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

body.v2-shell:not(.is-public-landing) .business-grain-ledger {
  display: grid;
  gap: 0;
  scroll-margin-top: 104px;
  overflow: hidden;
  border: 1px solid var(--v2-line);
  border-radius: 8px;
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .business-grain-ledger > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .business-grain-ledger > header strong {
  display: block;
  color: var(--v2-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
}

body.v2-shell:not(.is-public-landing) .business-grain-ledger > header span:not(.status-pill) {
  display: block;
  margin-top: 3px;
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.25;
}

body.v2-shell:not(.is-public-landing) .business-grain-groups {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .business-grain-groups div {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 48px;
  padding: 8px 10px;
  border-right: 1px solid var(--v2-line);
  background: var(--lugn-surface);
}

body.v2-shell:not(.is-public-landing) .business-grain-groups div:last-child {
  border-right: 0;
}

body.v2-shell:not(.is-public-landing) .business-grain-groups div.pending {
  background: var(--lugn-sunken);
}

body.v2-shell:not(.is-public-landing) .business-grain-groups span,
body.v2-shell:not(.is-public-landing) .business-grain-header span {
  overflow: hidden;
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body.v2-shell:not(.is-public-landing) .business-grain-groups strong {
  color: var(--v2-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

body.v2-shell:not(.is-public-landing) .business-grain-table {
  display: grid;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .business-grain-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(100px, 0.28fr) minmax(180px, 0.72fr) minmax(112px, 0.28fr);
  min-width: 0;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .business-grain-row:last-child {
  border-bottom: 0;
}

body.v2-shell:not(.is-public-landing) .business-grain-row > span {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 52px;
  padding: 8px 10px;
  border-right: 1px solid var(--v2-line);
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.25;
}

body.v2-shell:not(.is-public-landing) .business-grain-row > span:last-child {
  border-right: 0;
}

body.v2-shell:not(.is-public-landing) .business-grain-row strong {
  overflow: hidden;
  color: var(--v2-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell:not(.is-public-landing) .business-grain-row small {
  overflow: hidden;
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell:not(.is-public-landing) .business-grain-row em {
  color: var(--v2-text);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
}

body.v2-shell:not(.is-public-landing) .business-grain-row.pending > span:last-child em {
  color: var(--v2-muted);
}

/* Per-grain lineage chip: source-domain → grain → consumers. Decorative arrows are
   aria-hidden; the chip carries an aria-label spelling the lineage out. */
body.v2-shell:not(.is-public-landing) .business-grain-lineage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .business-grain-lineage-node {
  overflow: hidden;
  max-width: 14ch;
  padding: 1px 6px;
  border-radius: 5px;
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: var(--v2-muted);
  font-size: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-shell:not(.is-public-landing) .business-grain-lineage-node.is-grain {
  background: color-mix(in srgb, var(--v2-accent) 14%, transparent);
  color: var(--v2-accent);
  font-weight: 600;
}

body.v2-shell:not(.is-public-landing) .business-grain-lineage-arrow {
  color: var(--v2-muted);
  font-size: 10px;
  line-height: 1;
}

body.v2-shell:not(.is-public-landing) .business-grain-caption-split {
  display: block;
  margin-top: 2px;
  color: var(--v2-muted);
  font-size: 11px;
}

body.v2-shell:not(.is-public-landing) .business-grain-row .setup-action-control {
  display: contents;
}

body.v2-shell:not(.is-public-landing) .business-grain-action {
  justify-self: start;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
}

/* Per-grain freshness badge — a status-pill (colour comes from the .success /
   .warning / .danger / bare-pill buckets it carries; no new colour literal here),
   nudged to sit on its own line in the grain row cell with a little top spacing. */
body.v2-shell:not(.is-public-landing) .grain-freshness-badge {
  justify-self: start;
  margin-top: 4px;
}

/* Contract DETAIL spine rows (typed rules + obligations) rendered under a HEAD
   row. Single full-width cell, token-only colours, no inline styles. */
body.v2-shell:not(.is-public-landing) .business-grain-detail-row {
  display: block;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .business-grain-detail-row:last-child {
  border-bottom: 0;
}

body.v2-shell:not(.is-public-landing) .business-grain-detail-row > span {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 6px 10px 10px;
}

body.v2-shell:not(.is-public-landing) .business-grain-detail-group {
  min-width: 180px;
}

body.v2-shell:not(.is-public-landing) .business-grain-detail-group h4 {
  margin: 0 0 4px;
  color: var(--v2-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.v2-shell:not(.is-public-landing) .business-grain-detail-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.v2-shell:not(.is-public-landing) .business-grain-detail-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}

body.v2-shell:not(.is-public-landing) .business-grain-detail-list strong {
  color: var(--v2-text);
  font-size: 11px;
  font-weight: 600;
}

body.v2-shell:not(.is-public-landing) .business-grain-detail-list span {
  color: var(--v2-text);
  font-size: 11px;
}

body.v2-shell:not(.is-public-landing) .business-grain-detail-list small {
  color: var(--v2-muted);
  font-size: 10px;
}

/* Contract rule calculator / explainer (Phase B). Reuses the detail-group
   typography; adds a responsive input grid and a stacked result layout. No
   inline styles — strict CSP. */
body.v2-shell:not(.is-public-landing) .contract-calculator {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--v2-border);
}

body.v2-shell:not(.is-public-landing) .contract-calculator > h3 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--v2-text);
}

body.v2-shell:not(.is-public-landing) .contract-calculator > p {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--v2-muted);
}

body.v2-shell:not(.is-public-landing) .contract-calculator-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  align-items: end;
}

body.v2-shell:not(.is-public-landing) .contract-calculator-form label {
  display: grid;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v2-muted);
}

body.v2-shell:not(.is-public-landing) .contract-calculator-form input {
  font-size: 12px;
}

body.v2-shell:not(.is-public-landing) .contract-calculator-result {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

body.v2-shell:not(.is-public-landing) .contract-calculator-hint {
  margin-top: 10px;
  font-size: 11px;
  color: var(--v2-muted);
}

body.v2-shell:not(.is-public-landing) .contract-calculator-steps {
  counter-reset: none;
}

body.v2-shell:not(.is-public-landing) .contract-calculator-warnings strong {
  color: var(--v2-warning);
}

/* Contract intelligence (Phase C): maintenance actions + classification /
   grouping / assignment badges on the contracts surface. */
body.v2-shell:not(.is-public-landing) .contract-maintenance {
  margin-bottom: 12px;
  padding-bottom: 12px;
}

body.v2-shell:not(.is-public-landing) .contract-maintenance > h3 {
  margin: 0 0 4px;
  font-size: 13px;
}

body.v2-shell:not(.is-public-landing) .contract-maintenance > p {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--v2-muted);
}

body.v2-shell:not(.is-public-landing) .contract-maintenance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.v2-shell:not(.is-public-landing) .contract-maintenance-result {
  margin-top: 8px;
  font-size: 11px;
  color: var(--v2-success);
}

/* Contract parser (Phase D) */
body.v2-shell:not(.is-public-landing) .contract-parser {
  margin-bottom: 12px;
  padding-bottom: 12px;
}

body.v2-shell:not(.is-public-landing) .contract-parser > h3 {
  margin: 0 0 4px;
  font-size: 13px;
}

body.v2-shell:not(.is-public-landing) .contract-parser > p {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--v2-muted);
}

body.v2-shell:not(.is-public-landing) .contract-parse-text {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
  font-size: 12px;
}

body.v2-shell:not(.is-public-landing) .contract-parser-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

body.v2-shell:not(.is-public-landing) .contract-parse-import {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

body.v2-shell:not(.is-public-landing) .contract-parse-ai-flag {
  font-size: 10px;
  color: var(--v2-muted);
}

/* Slice 9: the contract-lens parse empty — compat-alias onto the .empty-state
   idiom (Notion §9): a calm centered line in a dashed hairline frame. The
   inline sub-notes (.contract-parse-none = "no rules"/"no obligations") stay a
   calm muted micro line, not a framed box. Token-only. */
body.v2-shell:not(.is-public-landing) .contract-parse-empty {
  display: grid;
  place-items: center;
  min-height: 120px;
  margin-top: var(--lugn-space-3);
  padding: var(--lugn-space-4) var(--lugn-space-5);
  border: var(--lugn-divider) dashed var(--lugn-hairline);
  border-radius: var(--lugn-radius);
  color: var(--lugn-muted);
  font-size: var(--lugn-text-xs);
  text-align: center;
}

body.v2-shell:not(.is-public-landing) .contract-parse-none {
  margin-top: var(--lugn-space-2);
  font-size: var(--lugn-text-micro);
  color: var(--lugn-muted);
}

body.v2-shell:not(.is-public-landing) .contract-parse-draft {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--v2-line);
}

body.v2-shell:not(.is-public-landing) .contract-parse-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

body.v2-shell:not(.is-public-landing) .contract-parse-confidence {
  font-size: 11px;
  color: var(--v2-muted);
}

body.v2-shell:not(.is-public-landing) .contract-parse-warnings {
  margin: 0 0 10px;
  padding-left: 16px;
  font-size: 11px;
  color: var(--v2-warning);
}

body.v2-shell:not(.is-public-landing) .contract-parse-draft > h4 {
  margin: 12px 0 6px;
  font-size: 12px;
}

body.v2-shell:not(.is-public-landing) .contract-parse-head-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

body.v2-shell:not(.is-public-landing) .contract-parse-head-grid .field-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
}

body.v2-shell:not(.is-public-landing) .contract-parse-detected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

body.v2-shell:not(.is-public-landing) .contract-parse-detected li {
  display: flex;
  gap: 5px;
  font-size: 11px;
}

body.v2-shell:not(.is-public-landing) .contract-parse-detected li span {
  color: var(--v2-muted);
}

body.v2-shell:not(.is-public-landing) .contract-parse-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.v2-shell:not(.is-public-landing) .contract-parse-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--v2-line);
  border-radius: 8px;
  font-size: 11px;
}

body.v2-shell:not(.is-public-landing) .contract-parse-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

body.v2-shell:not(.is-public-landing) .contract-parse-row-main small {
  color: var(--v2-muted);
}

body.v2-shell:not(.is-public-landing) .contract-parse-quote,
body.v2-shell:not(.is-public-landing) .contract-parse-meta-line {
  font-style: italic;
}

body.v2-shell:not(.is-public-landing) .contract-parse-row-value {
  flex: 0 0 auto;
  font-weight: 600;
}

/* E-signature (Phase F) */
body.v2-shell:not(.is-public-landing) .esig-create > h3,
body.v2-shell:not(.is-public-landing) .esig-issued-tokens > h4 {
  margin: 0 0 4px;
  font-size: 13px;
}

body.v2-shell:not(.is-public-landing) .esig-create > p {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--v2-muted);
}

body.v2-shell:not(.is-public-landing) .esig-create .field-label,
body.v2-shell:not(.is-public-landing) .esig-sign-form .field-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
  font-size: 11px;
}

body.v2-shell:not(.is-public-landing) .esig-signatory-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

body.v2-shell:not(.is-public-landing) .esig-signatory-row {
  display: grid;
  grid-template-columns: 1fr 1fr 0.7fr auto;
  gap: 6px;
  align-items: center;
}

body.v2-shell:not(.is-public-landing) .esig-issued-tokens {
  border: 1px solid var(--v2-accent);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
}

body.v2-shell:not(.is-public-landing) .esig-token-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.v2-shell:not(.is-public-landing) .esig-token-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 11px;
}

body.v2-shell:not(.is-public-landing) .esig-token,
body.v2-shell:not(.is-public-landing) .esig-hash,
body.v2-shell:not(.is-public-landing) .esig-cert-meta code {
  font-family: var(--v2-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 10px;
  color: var(--v2-muted);
  word-break: break-all;
}

body.v2-shell:not(.is-public-landing) .esig-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.v2-shell:not(.is-public-landing) .esig-status {
  font-style: normal;
  font-weight: 600;
}

body.v2-shell:not(.is-public-landing) .esig-status-completed {
  color: var(--v2-success);
}

body.v2-shell:not(.is-public-landing) .esig-status-cancelled,
body.v2-shell:not(.is-public-landing) .esig-status-declined,
body.v2-shell:not(.is-public-landing) .esig-status-expired {
  color: var(--v2-warning);
}

body.v2-shell:not(.is-public-landing) .esig-signer-list,
body.v2-shell:not(.is-public-landing) .esig-cert-signers {
  list-style: none;
  margin: 6px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.v2-shell:not(.is-public-landing) .esig-signer,
body.v2-shell:not(.is-public-landing) .esig-cert-signers li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 11px;
  align-items: baseline;
}

body.v2-shell:not(.is-public-landing) .esig-signer em,
body.v2-shell:not(.is-public-landing) .esig-cert-signers em {
  color: var(--v2-muted);
  font-style: normal;
}

body.v2-shell:not(.is-public-landing) .esig-signer.signed em {
  color: var(--v2-success);
}

body.v2-shell:not(.is-public-landing) .esig-sign-form,
body.v2-shell:not(.is-public-landing) .esig-cert {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--v2-line);
  border-radius: 8px;
}

body.v2-shell:not(.is-public-landing) .esig-sign-form > h5,
body.v2-shell:not(.is-public-landing) .esig-cert > h5 {
  margin: 0 0 6px;
  font-size: 12px;
}

body.v2-shell:not(.is-public-landing) .esig-cert-meta {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 11px;
}

body.v2-shell:not(.is-public-landing) .esig-cert-meta li {
  display: flex;
  gap: 5px;
}

body.v2-shell:not(.is-public-landing) .esig-cert-meta span {
  color: var(--v2-muted);
}

body.v2-shell:not(.is-public-landing) .esig-integrity-ok {
  color: var(--v2-success);
}

body.v2-shell:not(.is-public-landing) .esig-integrity-bad {
  color: var(--v2-warning);
}

body.v2-shell:not(.is-public-landing) .contract-doc-role-badge,
body.v2-shell:not(.is-public-landing) .contract-supplier-match,
body.v2-shell:not(.is-public-landing) .contract-grouping-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  font-size: 10px;
  color: var(--v2-muted);
}

body.v2-shell:not(.is-public-landing) .contract-grouping-badge.contract-superseded {
  color: var(--v2-warning);
  border-color: var(--v2-warning);
}

body.v2-shell:not(.is-public-landing) .contract-supplier-match {
  color: var(--v2-accent);
  border-color: var(--v2-accent);
}

body.v2-shell:not(.is-public-landing) .contract-obligation-group {
  margin-top: 8px;
}

body.v2-shell:not(.is-public-landing) .contract-obligation-group > h5 {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--v2-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Advanced (optional) field group inside the setup data forms. */
body.v2-shell .setup-form-advanced {
  margin-top: 8px;
}

body.v2-shell .setup-form-advanced summary {
  cursor: pointer;
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
}

body.v2-shell .setup-form-advanced summary::-webkit-details-marker {
  display: none;
}

@media (max-width: 1240px) {
  body.v2-shell:not(.is-public-landing) .capability-unlock-command {
    grid-template-columns: minmax(0, 1fr);
  }

  body.v2-shell:not(.is-public-landing) .capability-command-actions {
    justify-content: flex-start;
  }

  body.v2-shell:not(.is-public-landing) .capability-unlock-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  body.v2-shell:not(.is-public-landing) .capability-cluster-board {
    border-right: 0;
  }

  /* Tier columns reflow to a comfortable 3-up before fully stacking. */
  body.v2-shell:not(.is-public-landing) .capability-tier-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.v2-shell:not(.is-public-landing) .capability-inspector {
    border-top: 1px solid var(--v2-line);
  }

  body.v2-shell:not(.is-public-landing) .business-grain-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  /* Tier board stacks: columns become full-width rows, no horizontal scroll. */
  body.v2-shell:not(.is-public-landing) .capability-cluster-board,
  body.v2-shell:not(.is-public-landing) .capability-track-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.v2-shell:not(.is-public-landing) .capability-tier-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.v2-shell:not(.is-public-landing) .capability-next-unlock-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  body.v2-shell:not(.is-public-landing) .capability-hero-aside {
    justify-items: start;
  }

  body.v2-shell:not(.is-public-landing) .capability-tree-node {
    width: 100%;
    min-height: 82px;
  }

  body.v2-shell:not(.is-public-landing) .capability-tree-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.v2-shell:not(.is-public-landing) .capability-tree-metrics div:nth-child(2n) {
    border-right: 0;
  }

  body.v2-shell:not(.is-public-landing) .capability-tree-metrics div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--v2-line);
  }

  body.v2-shell:not(.is-public-landing) .business-grain-groups,
  body.v2-shell:not(.is-public-landing) .business-grain-row {
    grid-template-columns: minmax(0, 1fr);
  }

  body.v2-shell:not(.is-public-landing) .business-grain-header {
    display: none;
  }

  body.v2-shell:not(.is-public-landing) .business-grain-row > span {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--v2-line);
  }

  body.v2-shell:not(.is-public-landing) .business-grain-row > span:last-child {
    border-bottom: 0;
  }

  body.v2-shell:not(.is-public-landing) .business-grain-row strong,
  body.v2-shell:not(.is-public-landing) .business-grain-row small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* JetBrains Mono for identifiers, counts, and tabular scan values */
body.v2-shell .metric strong,
body.v2-shell:not(.is-public-landing) .journey-overview strong,
body.v2-shell:not(.is-public-landing) .journey-milestone::before,
body.v2-shell:not(.is-public-landing) .workbench-ledger-cell[data-task-field="record"] strong,
body.v2-shell:not(.is-public-landing) .provider-feed-ledger div strong,
body.v2-shell:not(.is-public-landing) .capability-tree-metrics strong,
body.v2-shell:not(.is-public-landing) .capability-tier-header strong,
body.v2-shell:not(.is-public-landing) .module-ledger-cell[data-module-ledger-cell="status"] strong,
body.v2-shell .launch-readiness mark,
body.v2-shell .command-result-row em,
body.v2-shell .setup-runway-step,
body.v2-shell .business-grain-row strong:last-child {
  font-family: var(--v2-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Shadows only on overlays and modal surfaces. Command palette and the action
   confirmation dialog are floating layers, so they take the top of the Lugn
   elevation ramp (elevation-3). The 1px hairline border is already set on these
   surfaces in styles.css. */
body.v2-shell .command-panel,
body.v2-shell .action-confirmation-panel {
  box-shadow: var(--lugn-elevation-3);
}

/* Neutral launch readiness surfaces */
body.v2-shell .launch-readiness {
  border-color: var(--v2-line);
  background: var(--v2-soft);
}

body.v2-shell .launch-readiness li {
  border-color: var(--v2-line);
  background: var(--lugn-surface);
}

body.v2-shell.needs-workspace .workbench-primary-grid,
body.v2-shell.needs-workspace .workbench-command-panel,
body.v2-shell.needs-workspace .workbench-secondary-panel,
body.v2-shell.needs-workspace #accountSetupPanel,
body.v2-shell.needs-workspace #teamSetupPanel,
body.v2-shell.needs-workspace .safety-review-panel,
body.v2-shell.needs-workspace #commandPaletteButton {
  display: none !important;
}

body.v2-shell.needs-workspace .v2-sandbox-launch-panel {
  order: 0;
}

body.v2-shell.needs-workspace .v2-sandbox-launch-panel > .panel-header {
  display: none;
}

body.v2-shell.needs-workspace .access-panel {
  order: 1;
}

body.v2-shell.needs-workspace .access-panel .onboarding-path-progress,
body.v2-shell.needs-workspace .access-panel .launch-readiness.workspace-start-readiness {
  display: none;
}

body.v2-shell.needs-workspace .access-panel > .panel-header {
  margin-bottom: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--v2-line);
}

body.v2-shell.needs-workspace .access-panel .auth-notice:not([hidden]) {
  margin-top: 12px;
}

body.v2-shell.needs-workspace .access-panel .auth-layout {
  margin-top: 14px;
}

body.v2-shell.needs-workspace #createTenantForm {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.v2-shell.needs-workspace #createTenantForm .auth-form-lead {
  max-width: 48ch;
}

body.v2-shell.needs-workspace #createTenantForm button[type="submit"] {
  min-height: 38px;
}

body.v2-shell.sandbox-first-run .workbench-primary-grid,
body.v2-shell.sandbox-first-run .workbench-secondary-panel,
body.v2-shell.sandbox-first-run #teamSetupPanel,
body.v2-shell.sandbox-first-run .safety-review-panel,
body.v2-shell.needs-workspace .v2-procurement-decision-panel,
body.v2-shell.needs-workspace .v2-procurement-input-panel {
  display: none !important;
}

body.v2-shell.sandbox-first-run .v2-sandbox-launch-panel {
  min-height: min(640px, calc(100vh - 116px));
}

body.v2-shell.sandbox-first-run .sandbox-launch {
  min-height: 100%;
}

body.v2-shell.needs-workspace .sandbox-chat,
body.v2-shell.sandbox-first-run .sandbox-chat {
  grid-template-columns: minmax(240px, 0.58fr) minmax(520px, 1.42fr);
  min-height: min(360px, calc(100vh - 340px));
}

body.v2-shell.needs-workspace .sandbox-chat-thread,
body.v2-shell.sandbox-first-run .sandbox-chat-thread {
  align-content: center;
}

@media (max-width: 920px) {
  body.v2-shell.needs-workspace .sandbox-chat,
  body.v2-shell.sandbox-first-run .sandbox-chat {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  body.v2-shell.needs-workspace .sandbox-chat-thread,
  body.v2-shell.sandbox-first-run .sandbox-chat-thread {
    align-content: start;
    border-right: 0;
    border-bottom: 1px solid var(--v2-line);
  }
}

body.v2-shell.sandbox-first-run .v2-workbench-command-panel {
  order: 1;
}

body.v2-shell.is-public-landing .v2-landing-minimal .v2-landing-copy {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

body.v2-shell .bankid-onboarding-panel {
  max-width: 420px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.v2-shell.onboarding-flow .sidebar,
body.v2-shell.onboarding-flow .landing-hero,
body.v2-shell.onboarding-flow .landing-minimal-footer,
body.v2-shell.onboarding-flow .landing-nav,
body.v2-shell.onboarding-flow .topbar,
body.v2-shell.onboarding-flow .bankid-oauth-rail {
  display: none !important;
}

body.v2-shell.onboarding-flow .workspace {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

body.v2-shell.onboarding-flow .view[data-view-panel="workbench"].active {
  width: 100%;
  max-width: 420px;
}

body.v2-shell.onboarding-flow .bankid-step {
  display: grid;
  gap: 20px;
  justify-items: stretch;
  text-align: center;
}

body.v2-shell.onboarding-flow .bankid-step-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

body.v2-shell .bankid-qr-shell {
  display: grid;
  gap: 16px;
  justify-items: center;
}

body.v2-shell .bankid-qr-frame {
  padding: 12px;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius);
  background: var(--lugn-surface);
}

body.v2-shell .bankid-qr-hint {
  margin: 0;
  color: var(--v2-muted);
  font-size: 14px;
  text-align: center;
  max-width: 280px;
}

body.v2-shell .bankid-step-lead {
  display: none;
}

body.v2-shell .bankid-mode-note {
  margin: -6px 0 0;
  color: var(--v2-muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  max-width: 300px;
}

body.v2-shell .bankid-mode-note.is-error {
  color: var(--lugn-danger-fg);
}

body.v2-shell .bankid-retry-button {
  border: 0;
  background: transparent;
  color: var(--v2-accent, var(--lugn-action));
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
}

body.v2-shell .bankid-company-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  text-align: left;
}

body.v2-shell .bankid-company-row {
  display: block;
  width: 100%;
  padding: 16px 4px;
  border: 0;
  border-bottom: 1px solid var(--v2-line);
  background: transparent;
  color: var(--v2-ink);
  font-size: 17px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

body.v2-shell .bankid-company-row:hover,
body.v2-shell .bankid-company-row:focus-visible {
  color: var(--v2-accent, var(--lugn-action));
}

body.v2-shell .bankid-pending-note {
  margin: 0;
  color: var(--v2-muted);
  font-size: 15px;
  text-align: center;
}

body.v2-shell .bankid-company-empty {
  padding: 16px 4px;
  color: var(--v2-muted);
  font-size: 14px;
}

body.v2-shell .landing-minimal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 18px;
  max-width: 520px;
  margin: 12px auto 22px;
  color: var(--v2-muted);
  font-size: 13px;
}

body.v2-shell.is-public-landing .legacy-auth-panel {
  display: none !important;
}

body.v2-shell.is-public-landing.auth-form-flow .legacy-auth-panel {
  display: block !important;
}

body.v2-shell.is-public-landing.auth-form-flow .landing-hero,
body.v2-shell.is-public-landing.auth-form-flow .primary-auth-panel,
body.v2-shell.is-public-landing.auth-form-flow .landing-minimal-footer {
  display: none !important;
}

/* Primary auth panel — Google + Microsoft OAuth buttons as the default
   sign-in/signup path. BankID stays available as a small fallback link.
   Mirrors bankid-onboarding-panel sizing so the landing layout is stable
   regardless of which primary the operator has enabled. */
.primary-auth-panel {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  text-align: center;
}

.primary-auth-providers {
  display: grid;
  gap: 12px;
}

.oauth-button.is-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms var(--lugn-ease-standard), border-color 120ms var(--lugn-ease-standard);
}

.oauth-button.is-primary:hover,
.oauth-button.is-primary:focus-visible {
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.oauth-button.is-primary.is-coming-soon,
.oauth-button.is-primary:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.oauth-button.is-primary.is-coming-soon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.oauth-button.is-primary.is-coming-soon small {
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
}

.oauth-button.is-primary .oauth-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 13px;
  font-weight: 600;
}

.primary-auth-fallback-note .link-button {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  opacity: 0.8;
}

.primary-auth-fallback-note .link-button:hover,
.primary-auth-fallback-note .link-button:focus-visible {
  opacity: 1;
}

.primary-auth-empty-note {
  font-size: 14px;
  opacity: 0.8;
}

/* E-post + lösenord — always-available demo sign-in inside the primary panel. */
.primary-auth-email {
  display: grid;
  gap: 12px;
}

.primary-auth-email-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 0;
  font-size: 13px;
  opacity: 0.6;
  text-transform: lowercase;
}

.primary-auth-email-divider::before,
.primary-auth-email-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
}

.oauth-button.is-email-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.oauth-button.is-email-toggle:hover,
.oauth-button.is-email-toggle:focus-visible {
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.primary-auth-email-form {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

.primary-auth-field {
  display: grid;
  gap: 6px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
}

.primary-auth-field input {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  background: transparent;
  color: inherit;
  font: inherit;
}

.primary-auth-email-hint {
  font-size: 12px;
  opacity: 0.7;
  margin: 0;
}

body.v2-shell.onboarding-flow .primary-auth-panel {
  display: none !important;
}

/* Public landing first-viewport contract. Keep the real auth controls visible
   without scrolling on laptop and mobile viewports. */
body.v2-shell.is-public-landing:not(.onboarding-flow) .workspace {
  min-height: 100svh;
  padding: 18px 28px 34px;
}

body.v2-shell.is-public-landing:not(.onboarding-flow) .v2-landing-hero {
  min-height: auto;
  padding: clamp(46px, 8svh, 82px) 16px clamp(12px, 2.5svh, 24px);
}

body.v2-shell.is-public-landing:not(.onboarding-flow) .v2-landing-copy {
  gap: 12px;
}

body.v2-shell.is-public-landing:not(.onboarding-flow) .primary-auth-panel {
  margin: 0 auto;
}

@media (max-width: 920px) {
  body.v2-shell.is-public-landing:not(.onboarding-flow) .v2-landing-hero {
    min-height: auto;
    padding: clamp(44px, 7svh, 64px) 0 16px;
  }

  body.v2-shell.is-public-landing:not(.onboarding-flow) .v2-landing-copy {
    gap: 12px;
  }

  body.v2-shell.is-public-landing:not(.onboarding-flow) .v2-landing-copy h1 {
    font-size: clamp(38px, 10vw, 48px);
  }
}

@media (max-width: 560px) {
  body.v2-shell.is-public-landing:not(.onboarding-flow) .workspace {
    padding: 12px 16px 28px;
  }

  body.v2-shell.is-public-landing:not(.onboarding-flow) .v2-landing-hero {
    padding: clamp(34px, 6svh, 50px) 0 12px;
  }

  body.v2-shell.is-public-landing:not(.onboarding-flow) .v2-landing-copy h1 {
    font-size: clamp(36px, 10.5vw, 40px);
  }

  body.v2-shell.is-public-landing:not(.onboarding-flow) .v2-landing-copy p {
    font-size: 15px;
  }

  body.v2-shell.is-public-landing:not(.onboarding-flow) .primary-auth-panel {
    gap: 12px;
  }

  body.v2-shell.is-public-landing:not(.onboarding-flow) .landing-minimal-footer {
    margin: 10px auto 18px;
  }
}

@media (max-height: 760px) {
  body.v2-shell.is-public-landing:not(.onboarding-flow) .v2-landing-hero {
    padding-top: clamp(30px, 6svh, 52px);
  }
}

/* Signed-in first-run mobile contract. The first value flow should open as a
   focused chat, with the mapping action reachable in the first viewport. */
@media (max-width: 560px) {
  body.v2-shell.sandbox-first-run:not(.is-public-landing) .sidebar {
    gap: 0;
    padding: 12px 16px 8px;
  }

  body.v2-shell.sandbox-first-run:not(.is-public-landing) .nav-list {
    display: none;
  }

  body.v2-shell.sandbox-first-run:not(.is-public-landing) .workspace {
    padding-top: 10px;
  }

  body.v2-shell.sandbox-first-run:not(.is-public-landing) .topbar {
    flex-direction: row;
    align-items: center;
    min-height: 44px;
    padding-bottom: 10px;
  }

  body.v2-shell.sandbox-first-run:not(.is-public-landing) .topbar > div:first-child {
    display: none;
  }

  body.v2-shell.sandbox-first-run:not(.is-public-landing) .topbar-actions {
    width: 100%;
    justify-content: space-between;
  }

  body.v2-shell.sandbox-first-run:not(.is-public-landing) .session-box {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.v2-shell.sandbox-first-run:not(.is-public-landing) .session-box span {
    display: none;
  }

  body.v2-shell.sandbox-first-run:not(.is-public-landing) .v2-sandbox-launch-panel > .panel-header {
    min-height: 44px;
    padding: 10px 12px;
  }

  body.v2-shell.sandbox-first-run:not(.is-public-landing) .sandbox-chat-thread,
  body.v2-shell.sandbox-first-run:not(.is-public-landing) .sandbox-chat-compose {
    padding: 12px;
  }

  body.v2-shell.sandbox-first-run:not(.is-public-landing) .sandbox-chat-message > span {
    font-size: 11px;
  }

  body.v2-shell.sandbox-first-run:not(.is-public-landing) .sandbox-chat-message > strong {
    font-size: 18px;
  }

  body.v2-shell.sandbox-first-run:not(.is-public-landing) .sandbox-chat-message > p {
    font-size: 12px;
    line-height: 1.35;
  }

  body.v2-shell.sandbox-first-run:not(.is-public-landing) .sandbox-chat-input textarea {
    min-height: 104px;
  }

  body.v2-shell.sandbox-first-run:not(.is-public-landing) .sandbox-prompt-starters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.v2-shell.sandbox-first-run:not(.is-public-landing) .sandbox-prompt-starter {
    min-height: 48px;
    padding: 8px;
  }

  body.v2-shell.sandbox-first-run:not(.is-public-landing) .sandbox-prompt-starter strong {
    font-size: 11px;
  }

  body.v2-shell.sandbox-first-run:not(.is-public-landing) .sandbox-prompt-starter span {
    font-size: 11px;
  }

  body.v2-shell.sandbox-first-run:not(.is-public-landing) .sandbox-chat-actions .sandbox-chat-submit {
    min-height: 38px;
  }
}

/* ===========================================================================
   Teknikträd — strategy-game tech tree view.
   Tier columns (left = roots, right = deep), node chips colored by kind and
   build-state, edges revealed on selection via prereq/unlock highlighting.
   =========================================================================== */
.techtree-header { align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.techtree-header p { max-width: 60ch; opacity: 0.8; margin: 4px 0 0; }

.techtree-legend { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.techtree-count { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid currentColor; }
.techtree-count.techtree-state-unlocked { color: var(--lugn-success-fg); }
.techtree-count.techtree-state-available { color: var(--lugn-warning-fg); }
.techtree-count.techtree-state-locked { color: var(--lugn-muted); }

.techtree-toolbar { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.techtree-filter { display: grid; gap: 4px; font-size: 12px; font-weight: 600; }
.techtree-filter select { padding: 8px 10px; border-radius: 8px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); background: transparent; color: inherit; font: inherit; }
.techtree-hint { font-size: 12px; opacity: 0.65; }

.techtree-canvas-wrap { overflow-x: auto; overflow-y: hidden; border: 1px solid color-mix(in srgb, currentColor 12%, transparent); border-radius: 12px; background: color-mix(in srgb, currentColor 3%, transparent); }
.techtree-canvas { display: flex; gap: 0; align-items: stretch; min-height: 320px; padding: 12px; }
/* Slice 6: compat alias — the canvas load/error states now render through the
   canonical loadingState()/errorState() primitives, and the filter-empty case
   through emptyState(); this class is now a thin wrapper whose inner .empty-state /
   skeleton atom carries the framing. Kept so the emitted class name survives. */
.techtree-loading { margin: 0; padding: var(--lugn-space-3) 0; }

/* --- Transformation path band (Koppla → Förstå → Föreslå → Automatisera) --- */
.techtree-path-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; }
.techtree-path-head strong { font-size: 15px; font-weight: 600; }
.techtree-path-head span { font-size: 12px; opacity: 0.65; }
.techtree-stage-clear { margin-left: auto; border: 0; background: transparent; color: var(--lugn-action); font-size: 12px; font-weight: 600; cursor: pointer; }
.techtree-path { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.techtree-stage { flex: 1 1 200px; min-width: 180px; display: grid; gap: 6px; text-align: left; padding: 11px 13px; border: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius: 12px; background: var(--lugn-surface); cursor: pointer; }
.techtree-stage:hover { border-color: color-mix(in srgb, var(--lugn-action) 45%, transparent); }
.techtree-stage.is-active { border-color: var(--lugn-action); box-shadow: inset 0 0 0 1px var(--lugn-action); }
.techtree-stage-label { font-size: 13px; font-weight: 600; }
.techtree-stage-desc { font-size: 11px; opacity: 0.7; line-height: 1.3; }
/* Progress bar (design §4) — 4px ink-pill. Ink is the default fill; the green is
   opt-in via `.is-complete` (applied at render where completion is meaningful),
   so the tech-tree bar stops being the lone green-by-default progress. */
.techtree-stage-bar { width: 100%; height: 4px; border: 0; border-radius: var(--lugn-radius-pill); background: var(--lugn-sunken); overflow: hidden; -webkit-appearance: none; appearance: none; }
.techtree-stage-bar::-webkit-progress-bar { background: var(--lugn-sunken); border-radius: var(--lugn-radius-pill); }
.techtree-stage-bar::-webkit-progress-value { background: var(--lugn-action); border-radius: var(--lugn-radius-pill); }
.techtree-stage-bar::-moz-progress-bar { background: var(--lugn-action); border-radius: var(--lugn-radius-pill); }
.techtree-stage-bar.is-complete::-webkit-progress-value { background: var(--lugn-success-fg); }
.techtree-stage-bar.is-complete::-moz-progress-bar { background: var(--lugn-success-fg); }
.techtree-stage-counts { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; font-weight: 600; }
.techtree-stage-counts b { font-weight: 600; }
.techtree-stage-counts .techtree-state-unlocked { color: var(--lugn-success-fg); }
.techtree-stage-counts .techtree-state-available { color: var(--lugn-warning-fg); }
.techtree-stage-counts .techtree-state-locked { color: var(--lugn-muted); }
.techtree-stage-arrow { align-self: center; opacity: 0.4; font-size: 18px; }
@media (max-width: 720px) { .techtree-stage-arrow { display: none; } }

.techtree-column { display: grid; grid-template-rows: auto 1fr; gap: 8px; min-width: 220px; padding: 0 10px; border-right: 1px dashed color-mix(in srgb, currentColor 12%, transparent); }
.techtree-column:last-child { border-right: 0; }
.techtree-column-head { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.55; display: flex; justify-content: space-between; }
.techtree-column-head span { opacity: 0.6; }
.techtree-column-nodes { display: grid; gap: 6px; align-content: start; }

.techtree-node {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px;
  text-align: left; padding: 8px 10px; border-radius: 10px; cursor: pointer; font: inherit;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  background: color-mix(in srgb, currentColor 4%, transparent); color: inherit;
  transition: transform 80ms var(--lugn-ease-standard), box-shadow 120ms var(--lugn-ease-standard), opacity 120ms var(--lugn-ease-standard);
}
.techtree-node:hover { transform: translateY(-1px); box-shadow: 0 2px 10px color-mix(in srgb, currentColor 18%, transparent); }
.techtree-node-mark { grid-row: 1 / span 2; align-self: center; font-size: 14px; }
.techtree-node-name { font-size: 13px; font-weight: 500; line-height: 1.2; }
.techtree-node-kind { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.6; }

/* Kind accents (left border) */
.techtree-node.kind-connector { border-left: 3px solid var(--lugn-action); }
.techtree-node.kind-grain { border-left: 3px solid var(--lugn-plan-fg); }
.techtree-node.kind-capability { border-left: 3px solid var(--lugn-warning-fg); }
.techtree-node.kind-action { border-left: 3px solid var(--lugn-success-fg); }

/* Build-state */
.techtree-node.state-unlocked { background: color-mix(in srgb, var(--lugn-success-fg) 14%, transparent); border-color: color-mix(in srgb, var(--lugn-success-fg) 50%, transparent); }
.techtree-node.state-available { background: color-mix(in srgb, var(--lugn-warning-fg) 12%, transparent); }
.techtree-node.state-locked { opacity: 0.62; }

/* Selection flow: dim everything except the selected node + its prereqs/unlocks */
.techtree-canvas.has-selection .techtree-node.is-dimmed { opacity: 0.18; }
.techtree-node.is-selected { outline: 2px solid currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent); transform: translateY(-1px); }
.techtree-node.is-prereq { box-shadow: inset 0 0 0 2px var(--lugn-action); opacity: 1; }
.techtree-node.is-unlock { box-shadow: inset 0 0 0 2px var(--lugn-success-fg); opacity: 1; }

.techtree-inspector { margin-top: 14px; border: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius: 12px; padding: 14px 16px; }
/* Slice 6: compat alias — now a thin wrapper around the canonical .empty-state atom
   (no longer a styled <p>); the inner atom carries the dashed-hairline empty frame. */
.techtree-inspector-empty { margin: 0; }
.techtree-inspector-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.techtree-inspector-head h3 { margin: 0; font-size: 16px; }
.techtree-inspector-kind, .techtree-inspector-state, .techtree-inspector-auto, .techtree-inspector-prio {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid currentColor;
}
.techtree-inspector-state.state-unlocked { color: var(--lugn-success-fg); }
.techtree-inspector-state.state-available { color: var(--lugn-warning-fg); }
.techtree-inspector-state.state-locked { color: var(--lugn-muted); }
.techtree-inspector-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px; }
.techtree-inspector-cols h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.6; }
.techtree-inspector-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 240px; overflow-y: auto; }
.techtree-inspector-cols li { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.techtree-inspector-cols li em { font-size: 11px; opacity: 0.55; text-transform: uppercase; }
.techtree-link { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-decoration: underline; font: inherit; text-align: left; }
.techtree-none { opacity: 0.5; margin: 0; }

@media (max-width: 720px) {
  .techtree-inspector-cols { grid-template-columns: 1fr; }
  .techtree-column { min-width: 180px; }
}

/* Teknikträd explainer + inspector plain-language additions */
.techtree-explainer { border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; background: color-mix(in srgb, currentColor 3%, transparent); }
.techtree-explainer summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.techtree-explainer-body { margin-top: 8px; font-size: 13px; opacity: 0.92; }
.techtree-explainer-body p { margin: 6px 0; max-width: 80ch; }
.techtree-explainer-chain { margin: 6px 0; padding-left: 18px; display: grid; gap: 4px; }
.techtree-explainer-chain b { font-weight: 600; }
.techtree-explainer .kind-connector { color: var(--lugn-action); }
.techtree-explainer .kind-grain { color: var(--lugn-plan-fg); }
.techtree-explainer .kind-capability { color: var(--lugn-warning-fg); }
.techtree-explainer .kind-action { color: var(--lugn-success-fg); }
.techtree-explainer .state-unlocked { color: var(--lugn-success-fg); }
.techtree-explainer .state-available { color: var(--lugn-warning-fg); }
.techtree-explainer .state-locked { color: var(--lugn-muted); }
.techtree-controls { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.techtree-inspector-plain { margin: 8px 0 4px; font-size: 13px; opacity: 0.85; max-width: 70ch; }
.techtree-inspector-source { margin: 8px 0; }
.techtree-inspector-source h4 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.6; }
.techtree-inspector-source ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.techtree-inspector-source li { font-size: 13px; }

/* Panel subtitle for tree disambiguation */
.panel-subtitle { margin: 4px 0 0; font-size: 13px; opacity: 0.82; max-width: 80ch; }
.panel-subtitle b { font-weight: 600; }


/* ===========================================================================
   Processkarta - fractal zoomable process map.
   =========================================================================== */
.processmap-header { align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.processmap-header p { max-width: 75ch; opacity: 0.82; margin: 4px 0 0; }
.processmap-mode { display: flex; gap: 4px; }
.processmap-mode-btn { padding: 8px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 26%, transparent); background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.processmap-mode-btn.is-active { background: color-mix(in srgb, currentColor 14%, transparent); }
.processmap-breadcrumb { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 10px 0; font-size: 13px; }
.processmap-crumb { background: none; border: 0; padding: 2px 4px; color: inherit; cursor: pointer; font: inherit; opacity: 0.7; text-decoration: underline; }
.processmap-crumb.is-current { opacity: 1; font-weight: 600; text-decoration: none; cursor: default; }
.processmap-crumb-sep { opacity: 0.4; }
/* Main-function grouping at the top abstraction level */
.processmap-function { margin: 0 0 22px; }
.processmap-function.is-cross { border-left: 3px solid var(--lugn-plan-fg); padding-left: 12px; }
.processmap-function-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.processmap-function-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.processmap-function-head p { margin: 2px 0 0; font-size: 12px; opacity: 0.65; }
.processmap-function-meta { font-size: 12px; opacity: 0.6; white-space: nowrap; }
.processmap-cross-badge { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--lugn-plan-fg) 14%, transparent); color: var(--lugn-plan-fg); vertical-align: middle; }
.processmap-clouds { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.processmap-cloud { text-align: left; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: 14px; padding: 16px; background: color-mix(in srgb, currentColor 3%, transparent); cursor: pointer; color: inherit; font: inherit; transition: transform 90ms var(--lugn-ease-standard), box-shadow 140ms var(--lugn-ease-standard); }
.processmap-cloud:hover { transform: translateY(-2px); box-shadow: 0 4px 18px color-mix(in srgb, currentColor 16%, transparent); }
.processmap-cloud h3 { margin: 0 0 6px; font-size: 17px; }
.processmap-cloud p { margin: 0 0 10px; font-size: 13px; opacity: 0.82; }
.processmap-cloud-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; opacity: 0.7; }
.processmap-cloud-auto { font-weight: 600; color: var(--lugn-success-fg); opacity: 1; }
.processmap-foot { margin-top: 12px; font-size: 13px; opacity: 0.6; }
/* Observed-this-period readout (observed-workstreams projection). Layout only —
   colours come from existing tokens / currentColor, never new literals. */
.processmap-observed { margin: 0 0 22px; border: 1px solid color-mix(in srgb, var(--lugn-plan-fg) 26%, transparent); border-radius: 14px; padding: 14px 16px; background: color-mix(in srgb, var(--lugn-plan-fg) 5%, transparent); }
/* Slice 5: the empty branch now nests the canonical .empty-state atom (which carries
   the dashed hairline frame), so the panel drops its own border/fill to avoid a
   double frame — the heading sits above the canonical empty atom. */
.processmap-observed.is-empty { border: 0; padding: 0; background: transparent; }
.processmap-observed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.processmap-observed-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.processmap-observed-meta { font-size: 12px; opacity: 0.62; white-space: nowrap; }
/* Slice 5: compat alias — now a thin wrapper around the canonical .empty-state atom
   (no longer a styled <p>); the inner atom carries all the empty-state treatment. */
.processmap-observed-empty { margin: 0; }
.processmap-observed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.processmap-observed-row { display: grid; gap: 4px; padding: 8px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, currentColor 12%, transparent); background: color-mix(in srgb, currentColor 2%, transparent); }
.processmap-observed-row-main { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.processmap-observed-row-main strong { font-size: 13px; }
.processmap-observed-count { font-size: 12px; opacity: 0.7; white-space: nowrap; }
.processmap-observed-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.processmap-observed-lineage { font-size: 11px; opacity: 0.55; }
.processmap-observed-coverage { margin: 10px 0 0; font-size: 12px; opacity: 0.7; }
.processmap-loading { padding: 24px; opacity: 0.7; }
.processmap-focus-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 12px; }
.processmap-focus-head h3 { margin: 0 0 4px; }
.processmap-focus-head p { margin: 2px 0; font-size: 13px; opacity: 0.82; max-width: 70ch; }
.processmap-action-link { font-size: 12px; opacity: 0.7; }
.processmap-action-link code { font-size: 11px; }
.processmap-focus-tags, .processmap-step-tags { display: flex; gap: 6px; flex-wrap: wrap; }
/* Slice 5: compat alias → the canonical .status-pill.neutral restrained dot+word
   recipe — transparent ground (never a filled lozenge), a faint hairline in the
   variant hue (carried by currentColor), muted default text. The actor-/auto-/kind-
   modifiers below set currentColor so the border + label read in one hue. */
.processmap-tag { display: inline-flex; align-items: center; gap: var(--lugn-space-1); font-size: var(--lugn-text-micro); font-weight: var(--lugn-weight-medium); padding: 3px 9px; border-radius: var(--lugn-radius-pill); border: var(--lugn-divider) solid color-mix(in srgb, currentColor 24%, transparent); background: transparent; color: var(--lugn-muted); }
.processmap-tag.actor-system { color: var(--lugn-action); } .processmap-tag.actor-warehouse { color: var(--lugn-warning-fg); }
.processmap-tag.actor-finance { color: var(--lugn-plan-fg); } .processmap-tag.actor-support { color: var(--lugn-danger-fg); }
.processmap-tag.actor-buyer { color: var(--lugn-success-fg); } .processmap-tag.actor-agent { color: var(--lugn-danger-fg); }
.processmap-tag.auto-fully_automated { color: var(--lugn-success-fg); } .processmap-tag.auto-one_click { color: var(--lugn-success-fg); }
.processmap-tag.auto-shadow { color: var(--lugn-warning-fg); } .processmap-tag.auto-assisted { color: var(--lugn-muted); } .processmap-tag.auto-manual { color: var(--lugn-muted); }
.processmap-tag.is-optional { opacity: 0.6; }
.processmap-tag.kind-chore { color: var(--lugn-muted); }
.processmap-tag.kind-decision { color: var(--lugn-plan-fg); }
.processmap-tag.kind-initiative { color: var(--lugn-action); }
.processmap-cloud.is-safe-start { border-color: color-mix(in srgb, var(--lugn-success-fg) 48%, transparent); background: color-mix(in srgb, var(--lugn-success-fg) 6%, transparent); }
.processmap-safe-start-badge { display: inline-block; margin-bottom: 8px; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--lugn-success-fg) 14%, transparent); color: var(--lugn-success-fg); }
.processmap-observed-safe-start { display: grid; gap: 4px; margin: 4px 0 10px; padding: 10px 12px; border-radius: 12px; }
.processmap-observed-safe-start.is-safe-start { border: 1px solid color-mix(in srgb, var(--lugn-success-fg) 40%, transparent); background: color-mix(in srgb, var(--lugn-success-fg) 6%, transparent); }
.processmap-observed-safe-start.is-empty { font-size: 12px; opacity: 0.7; padding: 8px 12px; border: 1px dashed color-mix(in srgb, currentColor 20%, transparent); }
.processmap-observed-safe-start strong { font-size: 14px; }
.processmap-observed-safe-start-why { font-size: 12px; opacity: 0.85; margin: 0; }
.processmap-observed-safe-start-evidence { font-size: 11px; opacity: 0.65; }
.processmap-steps { display: grid; gap: 8px; }
.processmap-step { border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: 12px; padding: 12px 14px; background: color-mix(in srgb, currentColor 2%, transparent); }
.processmap-step.can-zoom { cursor: pointer; }
.processmap-step.can-zoom:hover { background: color-mix(in srgb, currentColor 7%, transparent); }
.processmap-step.is-handover { border-left: 3px solid var(--lugn-danger-fg); }
.processmap-step-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.processmap-step-order { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); font-size: 12px; font-weight: 600; }
.processmap-step-main strong { display: block; font-size: 14px; }
.processmap-step-main small { display: block; font-size: 12px; opacity: 0.7; margin: 2px 0 6px; }
.processmap-step-aside { display: grid; gap: 4px; justify-items: end; text-align: right; }
.processmap-handover-badge { font-size: 11px; font-weight: 600; color: var(--lugn-danger-fg); }
.processmap-zoom-hint { font-size: 12px; opacity: 0.6; }
.processmap-zoom-hint.leaf { opacity: 0.4; }
.processmap-agentic-yes { font-size: 11px; font-weight: 600; color: var(--lugn-success-fg); }
.processmap-agentic-no { font-size: 11px; font-weight: 600; color: var(--lugn-muted); }
.processmap-flow-btn { margin-bottom: 12px; }
.processmap-flow-head h3 { margin: 0 0 4px; }
.processmap-flow-head p { margin: 0 0 12px; font-size: 13px; opacity: 0.8; }
.processmap-flow-systems { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.processmap-flow-system { display: grid; padding: 8px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, currentColor 26%, transparent); background: color-mix(in srgb, currentColor 5%, transparent); }
.processmap-flow-system strong { font-size: 13px; } .processmap-flow-system em { font-size: 11px; opacity: 0.6; font-style: normal; }
.processmap-flow-hops { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.processmap-flow-hop { border: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius: 12px; padding: 12px 14px; }
.processmap-flow-hop-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.processmap-flow-hop-no { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, currentColor 14%, transparent); font-size: 12px; font-weight: 600; }
.processmap-flow-route b { font-weight: 600; }
.processmap-flow-trigger { font-size: 12px; opacity: 0.7; font-style: italic; }
.processmap-flow-hop-body { margin-top: 8px; display: grid; gap: 4px; font-size: 13px; }
.processmap-flow-k { display: inline-block; min-width: 84px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.55; }
.processmap-flow-hop-body code { font-size: 11px; padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, currentColor 10%, transparent); }
.processmap-flow-note { font-size: 12px; opacity: 0.7; margin-top: 2px; }
.processmap-ingest { margin-top: 18px; border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: 12px; padding: 10px 14px; }
.processmap-ingest summary { cursor: pointer; font-weight: 600; }
.processmap-ingest-body { margin-top: 10px; }
.processmap-ingest-body p { font-size: 13px; opacity: 0.82; }
.processmap-ingest textarea { width: 100%; box-sizing: border-box; padding: 10px; border-radius: 8px; border: 1px solid color-mix(in srgb, currentColor 24%, transparent); background: transparent; color: inherit; font: inherit; resize: vertical; }
.processmap-ingest-actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.processmap-ingest-note { font-size: 12px; opacity: 0.6; }
.processmap-extract { margin-top: 12px; }
.processmap-extract h4 { margin: 10px 0 6px; font-size: 13px; }
.processmap-extract-steps { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; }
.processmap-extract-steps code { font-size: 11px; opacity: 0.7; }
.processmap-extract-conf { font-size: 11px; font-weight: 600; }
.processmap-extract-conf.conf-hog { color: var(--lugn-success-fg); } .processmap-extract-conf.conf-medel { color: var(--lugn-warning-fg); } .processmap-extract-conf.conf-lag { color: var(--lugn-muted); }
.processmap-extract-questions { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13px; }
.processmap-extract-note { font-size: 12px; opacity: 0.6; margin-top: 8px; }
.processmap-error { color: var(--lugn-danger-fg); }
.processmap-engine { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 7px; border-radius: 999px; vertical-align: middle; }
.processmap-engine.engine-ai { background: var(--lugn-success-fg); color: var(--lugn-on-accent); }
.processmap-engine.engine-baseline { background: var(--lugn-hairline); color: var(--lugn-ink-secondary); }
.processmap-engine.engine-saved { background: var(--lugn-success-bg); color: var(--lugn-success-fg); }
.processmap-extract-meta { font-size: 12px; opacity: 0.75; margin: 2px 0 8px; }
.processmap-extract-actor, .processmap-extract-freq, .processmap-extract-handover { font-size: 11px; padding: 0 6px; border-radius: 4px; background: color-mix(in srgb, var(--lugn-plan-fg) 12%, transparent); color: var(--lugn-plan-fg); }
.processmap-extract-handover { background: color-mix(in srgb, var(--lugn-warning-fg) 14%, transparent); color: var(--lugn-warning-fg); }
.processmap-block-drafts { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.processmap-block-drafts span { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 8px; border: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius: 6px; background: color-mix(in srgb, currentColor 4%, transparent); font-size: 12px; }
.processmap-block-drafts em { color: var(--v2-muted); font-style: normal; font-size: 11px; }
.processmap-promote-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 8px; }
.processmap-promote-button { min-height: 34px; padding-inline: 12px; font-size: 12px; }
.processmap-promote-status { font-size: 12px; color: var(--v2-muted); }
.processmap-promote-status.is-promoted { color: var(--v2-success); font-weight: 600; }

/* ============================================================
   Lugn component-state convergence (v2 shell).
   The shared controls (button / chip / field / card families)
   above grew per-surface state handling, so disabled, busy,
   invalid and focus drifted between blocks. This closing layer
   authors ONE coherent state matrix per family — rest, :hover,
   :focus-visible, :active, :disabled, [aria-busy], invalid —
   on the ACTUAL class names the DOM emits (index.html / app.js),
   wires the Lugn motion tokens as feedback-only transitions, and
   keeps elevation reserved for floating layers. Additive: every
   rule below extends existing selectors, none replace them.
   ============================================================ */

/* ----- 1. Shared density + control-height tokens ------------
   Local v2 knobs so the state matrix and density modes resolve
   through one source. Defaults mirror the heights already used
   above (38px standard, 44px primary touch target). */
body.v2-shell {
  /* ALIAS onto the canonical lugn geometry roles (styles.css §1c).
     --v2-control-height stays the consumed name — the responsive
     density matrix below overrides these locals, so the alias is
     value-identical (38px/44px) and the matrix keeps one source. */
  --v2-control-height: var(--lugn-control-height);
  --v2-control-height-touch: var(--lugn-control-height-touch);
  --v2-row-pad-y: var(--lugn-space-3);
  --v2-row-pad-x: var(--lugn-space-4);
}

/* ----- 2. Tokenised motion (feedback-only) ------------------
   120ms (fast) for the cheap state feedback on the interactive
   families, 180ms (base) for box-shadow / opacity so elevation
   and dim changes settle a touch slower than colour. The audit
   flagged the sandbox block and the landing CTA as transition-
   less — both are covered explicitly here. All of it collapses
   under the prefers-reduced-motion guard at the end. */
body.v2-shell .primary-button,
body.v2-shell .secondary-button,
body.v2-shell .icon-button,
body.v2-shell .danger-button,
body.v2-shell .oauth-button,
body.v2-shell .link-button,
body.v2-shell .command-trigger,
body.v2-shell .status-pill,
body.v2-shell .account-provider-chip,
body.v2-shell .sandbox-draft-chip,
body.v2-shell .sandbox-prompt-starter,
body.v2-shell .sandbox-chat-submit,
body.v2-shell .sandbox-launch-action,
body.v2-shell .landing-nav.v2-public-nav a,
body.v2-shell .v2-landing-actions .primary-button,
body.v2-shell .v2-landing-actions .secondary-button,
body.v2-shell input,
body.v2-shell select,
body.v2-shell textarea,
body.v2-shell .panel,
body.v2-shell .metric,
body.v2-shell .workbench-kpi,
body.v2-shell .sandbox-launch-metrics div {
  transition:
    background-color var(--lugn-motion-fast) var(--lugn-ease-standard),
    border-color var(--lugn-motion-fast) var(--lugn-ease-standard),
    color var(--lugn-motion-fast) var(--lugn-ease-standard),
    box-shadow var(--lugn-motion-base) var(--lugn-ease-standard),
    opacity var(--lugn-motion-base) var(--lugn-ease-standard);
}

/* 180ms (base) on expand/collapse affordances */
body.v2-shell details.workbench-disclosure > summary.panel-header::after,
body.v2-shell .auth-form-optional[open] {
  transition: transform var(--lugn-motion-base) var(--lugn-ease-standard);
}

/* 260ms (slow) enter for the floating layers: command palette,
   action-confirmation dialog and any popover. They paint on the
   reserved elevation-3 (see section 4); this only eases them in. */
body.v2-shell .command-palette:not([hidden]) .command-panel,
body.v2-shell .action-confirmation-panel {
  animation: v2-floating-in var(--lugn-motion-slow) var(--lugn-ease-emphasized);
}

@keyframes v2-floating-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ----- 2b. Content-entrance layer ---------------------------
   Panels and tables today hard-swap innerHTML with no enter
   transition, so a freshly rendered surface appears instantly
   with no continuity cue. This is the single reusable entrance
   primitive: render code adds .v2-enter to a freshly painted
   panel body (and .v2-enter-stagger to a list/table that should
   ripple its rows). The motion is deliberately small — a 4-6px
   settle, base duration, standard easing — so it reads as the
   content arriving, never as decoration. */
body.v2-shell .v2-enter,
body.v2-shell .v2-enter-stagger > * {
  animation: v2-content-in var(--lugn-motion-base) var(--lugn-ease-standard) both;
}

/* Staggered variant for list/table rows: each successive row
   starts a touch later so the group settles top-to-bottom.
   The cascade is capped at the 6th row — every row beyond it
   shares the final (6th) delay, so a long table settles as one
   block instead of rippling for hundreds of rows. */
body.v2-shell .v2-enter-stagger > * {
  animation-delay: calc(var(--lugn-motion-fast) * 0.6);
}
body.v2-shell .v2-enter-stagger > *:nth-child(1) {
  animation-delay: 0ms;
}
body.v2-shell .v2-enter-stagger > *:nth-child(2) {
  animation-delay: calc(var(--lugn-motion-fast) * 0.12);
}
body.v2-shell .v2-enter-stagger > *:nth-child(3) {
  animation-delay: calc(var(--lugn-motion-fast) * 0.24);
}
body.v2-shell .v2-enter-stagger > *:nth-child(4) {
  animation-delay: calc(var(--lugn-motion-fast) * 0.36);
}
body.v2-shell .v2-enter-stagger > *:nth-child(5) {
  animation-delay: calc(var(--lugn-motion-fast) * 0.48);
}
/* 6th and every row after it share the final small delay. */
body.v2-shell .v2-enter-stagger > *:nth-child(n + 6) {
  animation-delay: calc(var(--lugn-motion-fast) * 0.6);
}

@keyframes v2-content-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----- 3. Canonical state matrix ---------------------------- */

/* 3a. Buttons — rest styling already set per family above; here
   we unify :hover lift, the 2px focus-visible ring, the active
   press, disabled and the busy affordance. Primary actions get
   the 44px touch target. */
body.v2-shell .primary-button,
body.v2-shell .danger-button,
body.v2-shell .v2-landing-actions .primary-button,
body.v2-shell .oauth-button.is-primary {
  min-height: var(--v2-control-height-touch);
}

body.v2-shell .secondary-button:focus-visible,
body.v2-shell .icon-button:focus-visible,
body.v2-shell .primary-button:focus-visible,
body.v2-shell .danger-button:focus-visible,
body.v2-shell .oauth-button:focus-visible,
body.v2-shell .link-button:focus-visible,
body.v2-shell .sandbox-chat-submit:focus-visible,
body.v2-shell .sandbox-launch-action:focus-visible,
body.v2-shell .landing-nav.v2-public-nav a:focus-visible {
  outline: var(--lugn-focus-ring-width) solid var(--lugn-focus-ring);
  outline-offset: var(--lugn-focus-ring-offset);
}

body.v2-shell .primary-button:active:not(:disabled),
body.v2-shell .secondary-button:active:not(:disabled),
body.v2-shell .icon-button:active:not(:disabled),
body.v2-shell .danger-button:active:not(:disabled),
body.v2-shell .oauth-button:active:not(:disabled),
body.v2-shell .sandbox-chat-submit:active:not(:disabled),
body.v2-shell .sandbox-launch-action:active:not(:disabled),
body.v2-shell .v2-landing-actions .primary-button:active:not(:disabled),
body.v2-shell .v2-landing-actions .secondary-button:active:not(:disabled) {
  transform: scale(0.985);
}

body.v2-shell .danger-button:disabled,
body.v2-shell .oauth-button:disabled,
body.v2-shell .link-button:disabled,
body.v2-shell .sandbox-chat-submit:disabled,
body.v2-shell .sandbox-launch-action:disabled,
body.v2-shell button[aria-disabled="true"],
body.v2-shell a[aria-disabled="true"] {
  opacity: 0.48;
  cursor: not-allowed;
}

/* Busy: dim + progress cursor so an in-flight action reads as
   pending without a layout shift. Matches the DOM's aria-busy. */
body.v2-shell [aria-busy="true"] {
  opacity: 0.72;
  cursor: progress;
}

body.v2-shell button[aria-busy="true"],
body.v2-shell .primary-button[aria-busy="true"],
body.v2-shell .secondary-button[aria-busy="true"] {
  pointer-events: none;
}

/* 3b. Chips — pill/decision/provider/draft/starter families. The
   decision triad keeps its own tints (the only saturated content
   colour); the neutral chips share one hover/focus/disabled
   treatment. */
body.v2-shell .status-pill:focus-visible,
body.v2-shell .account-provider-chip:focus-visible,
body.v2-shell .sandbox-draft-chip:focus-visible,
body.v2-shell .decision-chip:focus-visible {
  outline: var(--lugn-focus-ring-width) solid var(--lugn-focus-ring);
  outline-offset: var(--lugn-focus-ring-offset);
}

body.v2-shell .sandbox-prompt-starter:active:not(:disabled),
body.v2-shell .account-provider-chip:active:not(:disabled) {
  transform: scale(0.99);
}

body.v2-shell .sandbox-prompt-starter:disabled,
body.v2-shell .status-pill[aria-disabled="true"],
body.v2-shell .sandbox-draft-chip[aria-disabled="true"] {
  opacity: 0.48;
  cursor: not-allowed;
}

/* 3c. Fields — input / select / textarea. The focus ring and the
   accent border on :focus are already set near the top of the
   file; here we add the calmer :hover affordance, the disabled
   state, and the post-interaction invalid signalling (:user-invalid
   for native validity, .field-error / [aria-invalid] for JS-driven
   errors). No new colour — danger fg/bg are existing tokens. */
body.v2-shell input:hover:not(:disabled):not(:focus),
body.v2-shell select:hover:not(:disabled):not(:focus),
body.v2-shell textarea:hover:not(:disabled):not(:focus) {
  border-color: var(--v2-line-strong);
}

body.v2-shell input:disabled,
body.v2-shell select:disabled,
body.v2-shell textarea:disabled {
  opacity: 0.56;
  background: var(--v2-soft);
  cursor: not-allowed;
}

body.v2-shell input:user-invalid,
body.v2-shell select:user-invalid,
body.v2-shell textarea:user-invalid,
body.v2-shell input[aria-invalid="true"],
body.v2-shell select[aria-invalid="true"],
body.v2-shell textarea[aria-invalid="true"],
body.v2-shell .field-error input,
body.v2-shell .field-error select,
body.v2-shell .field-error textarea {
  border-color: var(--v2-danger);
  background: color-mix(in srgb, var(--lugn-danger-fg) 5%, var(--lugn-surface));
}

body.v2-shell input:user-invalid:focus-visible,
body.v2-shell select:user-invalid:focus-visible,
body.v2-shell textarea:user-invalid:focus-visible,
body.v2-shell [aria-invalid="true"]:focus-visible {
  outline-color: var(--v2-danger);
}

/* Inline field-attached error message (the calm alternative to a
   toast), scoped so the v2 type ramp applies. */
body.v2-shell .field-error,
body.v2-shell .form-error-text {
  display: block;
  margin-top: var(--lugn-space-2);
  color: var(--v2-danger);
  font-size: var(--lugn-text-sm);
  line-height: var(--lugn-leading-snug);
}

/* 3d. Non-text contrast (WCAG 1.4.11). The resting border on an
   INTERACTIVE control is its sole affordance, so it must clear 3:1
   against the canvas. The shared control rules above paint it on
   --v2-line (the structural hairline, ~1.4:1) — fine for panel
   edges and dividers, but it fails as a control outline. Repoint
   the resting border of the interactive families (text inputs /
   selects / textareas / search fields / secondary + icon row-action
   buttons / command trigger / the button-shaped prompt-starter chip)
   to --lugn-control-border (~3:1, the token authored for exactly
   this). Structural dividers (panel / card / table / section rules)
   keep --v2-line untouched; the non-interactive status/provider/draft
   display chips (rendered as <span>) keep the hairline too. Scoped to
   the resting state so the existing :hover (--v2-line-strong), :focus
   (accent) and invalid (danger) borders authored above still win. No
   new colour — control-border is an existing Lugn token. */
body.v2-shell input:not(:disabled):not(:hover):not(:focus):not(:focus-visible):not(:user-invalid):not([aria-invalid="true"]),
body.v2-shell select:not(:disabled):not(:hover):not(:focus):not(:focus-visible):not(:user-invalid):not([aria-invalid="true"]),
body.v2-shell textarea:not(:disabled):not(:hover):not(:focus):not(:focus-visible):not(:user-invalid):not([aria-invalid="true"]),
body.v2-shell .secondary-button:not(:disabled):not(:focus-visible):not(:hover),
body.v2-shell .icon-button:not(:disabled):not(:focus-visible):not(:hover),
body.v2-shell .command-trigger:not(:disabled):not(:focus-visible):not(:hover),
body.v2-shell .sandbox-prompt-starter:not(:disabled):not(:hover):not(:focus-visible):not(.is-selected) {
  border-color: var(--lugn-control-border);
}

/* The locale-toggle is an interactive segmented control (role=group):
   its inner .locale-option buttons are border:0 and signal the active
   choice with a fill, so the CONTAINER's 1px border is the toggle's
   only outline — it must clear the 3:1 non-text contrast bar too.
   The container has no per-state border of its own, so no :not()
   guard is needed; the active option keeps its own fill/elevation.
   (.access-mode-switcher is a tab strip whose bottom hairline is a
   structural rule and whose selection uses a 2px accent underline, so
   it stays on --v2-line.) */
body.v2-shell .locale-toggle {
  border-color: var(--lugn-control-border);
}

/* 3e. Target size (WCAG 2.5.8). ONE token-driven floor for every
   standalone interactive control. The shared families sit at 38px
   (button base / input / select), the prompt-starter chip lower
   still; they all reach the 44px touch token that the primary/danger
   buttons already use. The text-like fields are the .secondary-button
   row-action, the select, the textarea and the text inputs
   (checkbox/radio carry their hit area on the .checkbox-field label,
   and a [type=hidden] input is never a target — all three excluded).
   Reuse --v2-control-height-touch so the density modes keep one
   source. min-height (never a fixed height) so a wrapping label or a
   multi-line value never clips. Dense data-table action cells keep
   their authored compact heights via their more specific rules — the
   owner console's body.v2-shell .owner-shell carve-out in styles.css
   cleanly outweighs these generic selectors, and the opt-in
   [data-density] block below retunes the whole set through the same
   token. Non-interactive status/provider/draft display chips are
   deliberately excluded — they are inline <span> labels, not touch
   targets. */
body.v2-shell .secondary-button,
body.v2-shell .icon-button,
body.v2-shell .command-trigger,
body.v2-shell input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.v2-shell select,
body.v2-shell .sandbox-prompt-starter {
  min-height: var(--v2-control-height-touch);
}

/* The textarea already authors a tall 96px multi-line box; the touch
   floor must never shrink it. max() pins it to the larger of the two
   so it clears the WCAG target from the same token without clipping
   the authored height (and the density modes still retune the floor
   half through --v2-control-height-touch). */
body.v2-shell textarea {
  min-height: max(var(--v2-control-height-touch), 96px);
}

body.v2-shell .icon-button {
  width: var(--v2-control-height-touch);
}

/* @primitive
   ============================================================
   (2) Button named variants + (3) input wrapper/search helpers
   (Phase 2 S4 — design §3.2 / §3.3).

   These compose ON the existing canonical button/field families
   (rest styling + the unified state matrix above own colour,
   focus, disabled, busy, touch-floor). The variants add only the
   geometry/affordance delta, painted entirely through --lugn-*
   tokens so the strict primitive budget (zero colour/font-size/
   radius literals, no ad-hoc shadow, no container border) holds.

   Scoped under body.v2-shell so they share the tenant cascade with
   the families they extend; the @primitive fence is what subjects
   them to the strict gate (the fence, not the file, marks "new").
   ============================================================ */

/* `.is-ghost` — tertiary button: transparent rest, action-subtle
   hover. Reuses the proven .nav-item recipe (transparent fill +
   hairline-on-hover) so a low-emphasis action reads as a quiet
   control, not a filled button. Applied as a modifier on any
   button family (.primary-button/.secondary-button/.icon-button). */
body.v2-shell .primary-button.is-ghost,
body.v2-shell .secondary-button.is-ghost,
body.v2-shell .icon-button.is-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--lugn-ink);
}

body.v2-shell .primary-button.is-ghost:hover:not(:disabled),
body.v2-shell .secondary-button.is-ghost:hover:not(:disabled),
body.v2-shell .icon-button.is-ghost:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--lugn-action) 38%, transparent);
  background: var(--lugn-action-subtle);
}

/* `.is-compact` — dense 32px control, modelled on the proven
   .workbench-command-button geometry. Overrides the 44px touch
   floor for in-panel toolbars where density matters; the floor
   still governs standalone controls that don't opt in. min-height
   (never a fixed height) so a wrapping label never clips. */
body.v2-shell .primary-button.is-compact,
body.v2-shell .secondary-button.is-compact,
body.v2-shell .icon-button.is-compact {
  min-height: var(--lugn-control-height-compact);
  padding: 0 var(--lugn-space-row);
  font-size: var(--lugn-font-compact-body);
}

body.v2-shell .icon-button.is-compact {
  width: var(--lugn-control-height-compact);
  padding: 0;
}

/* `.field-group` — the canonical form-field wrapper: label + control
   + description + error in one vertical rhythm. Borderless by design
   (typography-first: the control already carries its own outline, so
   the group is spacing + alignment only — no container border). The
   existing wrapper families (.wide-field/.workbench-task-field/…)
   alias onto this as they migrate, one surface at a time. */
body.v2-shell .field-group {
  display: grid;
  gap: var(--lugn-space-2);
  min-width: 0;
}

/* `.field-description` — calm helper text under the control (the
   non-error companion to .field-error). Real content, muted, sits
   on the metadata step. Helper aliases (.team-form-role-help /
   .procurement-setup-note) point here as they migrate. */
body.v2-shell .field-description {
  color: var(--lugn-muted);
  font-size: var(--lugn-font-metadata);
  line-height: var(--lugn-leading-snug);
}

/* `.lugn-search` — search-input modifier: the canonical input base
   (border/focus/touch from the families above) plus room on the
   inline-start for a leading `ic-search` glyph and on the inline-end
   for the native clear affordance. The icon is positioned by the
   host's grid/relative wrapper at the call site; here we only reserve
   the padding so the glyph never overlaps the value. */
body.v2-shell input[type="search"].lugn-search {
  padding-inline: var(--lugn-space-7) var(--lugn-space-4);
}
/* @end-primitive */

/* ----- 4. Elevation discipline (shadow-as-border) -----------
   Resting in-flow surfaces keep their 1px hairline and NOTHING
   else; the drop shadow is reserved for floating layers. .panel
   is already box-shadow:none above — this asserts the rule for
   the card-shaped surfaces so a hairline and a shadow never stack
   on the same resting element. Only the command palette / action
   dialog / popover / dropdown draw on elevation-3. */
body.v2-shell .panel,
body.v2-shell .audit-log-row,
body.v2-shell .account-identity-card,
body.v2-shell .account-health-item,
body.v2-shell .account-method-panel,
body.v2-shell .account-trust-summary,
body.v2-shell .sandbox-chat-readiness-item,
body.v2-shell .runtime-gate-card {
  box-shadow: none;
}

body.v2-shell .command-panel,
body.v2-shell .action-confirmation-panel,
body.v2-shell .v2-popover,
body.v2-shell .v2-dropdown,
body.v2-shell [data-popover]:not([hidden]),
body.v2-shell [role="menu"]:not([hidden]) {
  box-shadow: var(--lugn-elevation-3);
}

/* ----- 5. Density modes -------------------------------------
   Opt-in via [data-density] on (or inside) the shell. Compact
   tightens table rows + control height for dense operator views;
   comfortable opens them up. Default (unset) is unchanged. */
body.v2-shell[data-density="compact"],
body.v2-shell [data-density="compact"] {
  --v2-control-height: var(--lugn-control-height-compact);
  --v2-control-height-touch: var(--lugn-control-height);
  --v2-row-pad-y: var(--lugn-space-2);
  --v2-row-pad-x: var(--lugn-space-3);
}

body.v2-shell[data-density="comfortable"],
body.v2-shell [data-density="comfortable"] {
  --v2-control-height: var(--lugn-control-height-touch); /* 44px */
  --v2-control-height-touch: 48px; /* no lugn role at 48px — left as the comfortable-touch literal */
  --v2-row-pad-y: var(--lugn-space-4);
  --v2-row-pad-x: var(--lugn-space-5);
}

body.v2-shell [data-density] th,
body.v2-shell [data-density] td {
  padding: var(--v2-row-pad-y) var(--v2-row-pad-x);
}

/* The input guard mirrors the section-3e floor selector
   (input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
   specificity 0,4,2). Matching it — rather than a bare `input` (0,2,2)
   that the floor would outrank — lets this later-in-source density rule
   win the cascade, so a compact view actually retunes the text input to
   --v2-control-height (32px) instead of being held at the 38px compact
   touch floor. select / .secondary-button / .icon-button already outrank
   their 3e counterparts, so they need no extra guard. */
body.v2-shell [data-density] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.v2-shell [data-density] select,
body.v2-shell [data-density] .secondary-button,
body.v2-shell [data-density] .icon-button {
  min-height: var(--v2-control-height);
}

body.v2-shell [data-density] .primary-button,
body.v2-shell [data-density] .danger-button {
  min-height: var(--v2-control-height-touch);
}

body.v2-shell [data-density] .icon-button {
  width: var(--v2-control-height);
}

/* The checkbox label's touch hit area follows the same density
   token, so a compact operator view tightens it with the rest of
   the controls instead of holding the full 44px. */
body.v2-shell [data-density] .checkbox-field {
  min-height: var(--v2-control-height);
}

/* ----- 6. Metric-tile consolidation (design §3) -------------
   The audit found three divergent KPI/metric patterns: .metric
   (.metric-grid), .workbench-kpi (.workbench-kpi-strip) and
   .sandbox-launch-metrics div. They now share ONE borderless
   divider-grid shape — no per-tile border/radius/fill, one number
   weight + size, tabular numerals. The earlier radius-8 re-card is
   REMOVED (the de-card recipe owns the geometry); saturation stays
   reserved for the decision triad + status. .is-urgent is the
   sanctioned exception (status danger fg). */
body.v2-shell .workbench-kpi,
body.v2-shell .sandbox-launch-metrics div {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.v2-shell .metric strong,
body.v2-shell .workbench-kpi strong,
body.v2-shell .sandbox-launch-metrics strong {
  color: var(--lugn-ink);
  font-size: var(--lugn-text-lg);
  font-weight: var(--lugn-weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* The single sanctioned saturated metric value: an urgent KPI
   reads in status danger, mirroring the existing .is-urgent rule. */
body.v2-shell .workbench-kpi.is-urgent strong {
  color: var(--v2-danger);
}

/* 6a. Focal variant (audit: HIERARCHY). The consolidation gave every
   tile ONE neutral shape, which removed the focal point — a grid of
   equal 18px/600 numbers gives the eye nowhere to land first. .metric--lead
   marks the single most decision-relevant tile per grid (e.g. capital at
   risk): one larger, slightly heavier numeral plus a quiet hairline-accent
   left rule. The emphasis is deliberately restrained — no fill tint, no
   saturated number — so it leads the eye without competing with the
   decision triad or a status value. The carry of meaning stays in the
   number; the accent rule is a 2px structural cue on --lugn-action. */
body.v2-shell .metric.metric--lead,
body.v2-shell .workbench-kpi.metric--lead,
body.v2-shell .recommendation-rollup-metric.metric--lead {
  border-inline-start: 2px solid var(--lugn-action);
  padding-inline-start: 10px;
}

body.v2-shell .metric.metric--lead strong,
body.v2-shell .workbench-kpi.metric--lead strong,
body.v2-shell .recommendation-rollup-metric.metric--lead strong {
  font-size: 30px;
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* 6b. Status-tinted metric VALUES (audit: HIERARCHY). Generalises the
   sanctioned .is-urgent danger exception so an attention count or risk
   tile reads in colour wherever the render code tags the value element
   with a status class. Only the <strong> value is tinted (not the tile),
   so saturation tracks the number that carries the meaning. Owner metric
   values (English console) share the same hook. Colour comes straight
   from the status tokens — no new literals. */
body.v2-shell .metric strong.success,
body.v2-shell .workbench-kpi strong.success,
body.v2-shell .recommendation-rollup-metric strong.success,
body.v2-shell .owner-shell .metric strong.success,
body.v2-shell .owner-attention-metrics .metric strong.success {
  color: var(--lugn-success-fg);
}

body.v2-shell .metric strong.warning,
body.v2-shell .workbench-kpi strong.warning,
body.v2-shell .recommendation-rollup-metric strong.warning,
body.v2-shell .owner-shell .metric strong.warning,
body.v2-shell .owner-attention-metrics .metric strong.warning {
  color: var(--lugn-warning-fg);
}

body.v2-shell .metric strong.danger,
body.v2-shell .workbench-kpi strong.danger,
body.v2-shell .recommendation-rollup-metric strong.danger,
body.v2-shell .owner-shell .metric strong.danger,
body.v2-shell .owner-attention-metrics .metric strong.danger {
  color: var(--lugn-danger-fg);
}

/* ----- 7. Reduced-motion guard ------------------------------
   styles.css carries a global guard, but the v2 component layer
   re-asserts it so every transition/animation authored above is
   neutralised here too — feedback only, never motion-for-its-
   own-sake. */
@media (prefers-reduced-motion: reduce) {
  body.v2-shell .primary-button,
  body.v2-shell .secondary-button,
  body.v2-shell .icon-button,
  body.v2-shell .danger-button,
  body.v2-shell .oauth-button,
  body.v2-shell .link-button,
  body.v2-shell .command-trigger,
  body.v2-shell .status-pill,
  body.v2-shell .account-provider-chip,
  body.v2-shell .sandbox-draft-chip,
  body.v2-shell .sandbox-prompt-starter,
  body.v2-shell .sandbox-chat-submit,
  body.v2-shell .sandbox-launch-action,
  body.v2-shell .landing-nav.v2-public-nav a,
  body.v2-shell .v2-landing-actions .primary-button,
  body.v2-shell .v2-landing-actions .secondary-button,
  body.v2-shell input,
  body.v2-shell select,
  body.v2-shell textarea,
  body.v2-shell .panel,
  body.v2-shell .metric,
  body.v2-shell .workbench-kpi,
  body.v2-shell .sandbox-launch-metrics div,
  body.v2-shell .command-palette:not([hidden]) .command-panel,
  body.v2-shell .action-confirmation-panel,
  body.v2-shell .capability-node-pane,
  body.v2-shell.capability-node-pane-pinned .app-shell,
  body.v2-shell .v2-enter,
  body.v2-shell .v2-enter-stagger > *,
  body.v2-shell details.workbench-disclosure > summary.panel-header::after {
    transition: none;
    animation: none;
    animation-delay: 0ms;
  }

  body.v2-shell .primary-button:active:not(:disabled),
  body.v2-shell .secondary-button:active:not(:disabled),
  body.v2-shell .icon-button:active:not(:disabled),
  body.v2-shell .danger-button:active:not(:disabled),
  body.v2-shell .oauth-button:active:not(:disabled),
  body.v2-shell .sandbox-prompt-starter:active:not(:disabled),
  body.v2-shell .account-provider-chip:active:not(:disabled) {
    transform: none;
  }
}

/* ============================================================
   MOBILE APP SHELL (phones, ≤ 760px)
   ------------------------------------------------------------
   The desktop layout stacks ~10 panels into one endless column
   on a phone. This block turns the signed-in product into an
   app: a fixed bottom tab bar for navigation, and a calm,
   focused Workbench start screen that leads with the single
   "do this next" card + progress instead of a wall of cards.
   Everything here is scoped to app mode (:not(.is-public-landing))
   and the phone breakpoint, so desktop/tablet are untouched.
   The onboarding states (needs-workspace / sandbox-first-run)
   are already single-task focused upstream, so the Workbench
   re-order below explicitly excludes them.
   ============================================================ */

/* Bottom tab bar is desktop-hidden by default; .app-only-panel
   already hides it on the public landing. */
.mobile-tabbar {
  display: none;
}

@media (max-width: 760px) {
  /* Beslutspanel becomes a bottom sheet on a phone: full-width, anchored to the
     bottom edge, thumb-reachable. Slides up instead of in (gated by reduced
     motion above). */
  body.v2-shell .capability-node-pane {
    inset: auto 0 0 0;
    width: 100%;
    max-height: 88vh;
    border-left: 0;
    border-top: 1px solid var(--v2-line);
    border-radius: var(--lugn-radius-lg) var(--lugn-radius-lg) 0 0;
    animation-name: capability-node-pane-sheet;
    transition: none;
  }

  /* Resize handle + pin/dock are desktop-only — a phone stays a bottom sheet.
     Also neutralise any persisted pinned state so the sheet never reflows the
     shell or shrinks below full width on a phone. */
  body.v2-shell .capability-node-pane-resize,
  body.v2-shell .capability-node-pane-pin {
    display: none;
  }

  body.v2-shell.capability-node-pane-pinned .capability-node-pane-host {
    inset: auto 0 0 0;
    width: 100%;
    pointer-events: auto;
  }

  body.v2-shell.capability-node-pane-pinned .app-shell {
    padding-right: 0;
  }

  body.v2-shell .capability-node-pane-body {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  body.v2-shell .capability-backtest-row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* --- App-like bottom tab bar --------------------------------- */
  body.v2-shell:not(.is-public-landing):not(.onboarding-flow) .mobile-tabbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--v2-line);
    background: var(--lugn-surface);
    box-shadow: var(--lugn-elevation-2);
  }

  body.v2-shell:not(.is-public-landing) .mobile-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    padding: 4px 2px;
    border: 0;
    border-radius: var(--v2-radius);
    background: transparent;
    color: var(--v2-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  body.v2-shell:not(.is-public-landing) .mobile-tab-icon {
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
  }

  body.v2-shell:not(.is-public-landing) .mobile-tab.active {
    color: var(--v2-accent);
    background: color-mix(in srgb, var(--v2-accent) 11%, transparent);
  }

  body.v2-shell:not(.is-public-landing) .mobile-tab:active {
    background: color-mix(in srgb, var(--v2-accent) 16%, transparent);
  }

  /* The bottom bar IS the primary nav now — drop the icon rail (and the legacy
     sidebar) so the phone isn't carrying two navigation levels. The secondary
     pane remains available as an overlay drawer (same NAV_CONFIG, so tech-tree
     stays reachable), opened from the bottom-bar; it is closed by default here. */
  body.v2-shell:not(.is-public-landing) .sidebar,
  body.v2-shell:not(.is-public-landing) .primary-rail {
    display: none;
  }

  /* On a phone the workspace is ALWAYS a single full-width column — the pane is
     a fixed overlay drawer, never a grid track. Include the .pane-collapsed
     variant explicitly: the desktop collapsed-grid rule (specificity 0,5,1) would
     otherwise out-rank a 0,4,1 selector here (media queries add no specificity)
     and squeeze the workspace to the bare rail width. */
  body.v2-shell:not(.is-public-landing) .app-shell.tenant-shell,
  body.v2-shell.pane-collapsed:not(.is-public-landing) .app-shell.tenant-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  body.v2-shell:not(.is-public-landing) .tenant-shell .secondary-pane {
    inset: 0 auto 0 0;
  }

  /* Give the scrolling surface room to clear the fixed bottom bar — the bottom
     padding lives on the scroll viewport, never on the height-locked workspace. */
  body.v2-shell:not(.is-public-landing) .tenant-shell #workspaceScroll {
    padding: 12px 14px calc(84px + env(safe-area-inset-bottom, 0px));
  }

  /* --- Calmer top bar ------------------------------------------ */
  body.v2-shell:not(.is-public-landing) .topbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
  }

  body.v2-shell:not(.is-public-landing) .topbar > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.v2-shell:not(.is-public-landing) .page-title {
    font-size: 18px;
  }

  body.v2-shell:not(.is-public-landing) .topbar-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* --- Workbench: focused, game-like start screen -------------- */
  /* Scoped away from the onboarding states, which are already
     single-task focused upstream. Lead with the "do this next"
     quest card + progress; push the heavy panels below the fold. */
  body.v2-shell:not(.is-public-landing):not(.sandbox-first-run):not(.needs-workspace) .v2-workbench-command-panel {
    order: -2;
    border-color: color-mix(in srgb, var(--v2-accent) 38%, var(--v2-line));
    box-shadow: var(--lugn-elevation-1);
  }

  body.v2-shell:not(.is-public-landing):not(.sandbox-first-run):not(.needs-workspace) .v2-workbench-primary-grid {
    order: -1;
  }

  body.v2-shell:not(.is-public-landing):not(.sandbox-first-run):not(.needs-workspace) .v2-sandbox-launch-panel {
    order: 0;
  }

  body.v2-shell:not(.is-public-landing):not(.sandbox-first-run):not(.needs-workspace) .v2-procurement-decision-panel {
    order: 1;
  }

  body.v2-shell:not(.is-public-landing):not(.sandbox-first-run):not(.needs-workspace) .workbench-secondary-panel {
    order: 2;
  }

  body.v2-shell:not(.is-public-landing):not(.sandbox-first-run):not(.needs-workspace) .safety-review-panel {
    order: 3;
  }

  /* Within the primary grid, surface progress/state before the
     "today" list so the start screen reads as a progress tracker. */
  body.v2-shell:not(.is-public-landing) .v2-workbench-primary-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  body.v2-shell:not(.is-public-landing) .v2-onboarding-state-panel {
    order: -1;
  }

  /* Compact every panel so each card carries less visual weight. */
  body.v2-shell:not(.is-public-landing) .panel {
    padding: 14px;
  }

  body.v2-shell:not(.is-public-landing) .panel-header h2 {
    font-size: 16px;
  }

  /* --- Modules: compact, tappable rows ------------------------- */
  /* The 5-column ledger header is meaningless once rows stack;
     trim each row to glyph + name + status + action, and move the
     verbose dependency/surface detail into the on-tap context
     panel below. */
  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-ledger-header {
    display: none;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-ledger-row {
    padding: 12px 14px;
    gap: 8px;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-ledger-row .module-ledger-module em {
    display: none;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-ledger-cell[data-module-ledger-cell="dependencies"],
  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-ledger-cell[data-module-ledger-cell="surface"] {
    display: none;
  }

  body.v2-shell:not(.is-public-landing) .v2-modules-panel .module-ledger-cell small {
    display: none;
  }
}

/* =========================================================================
   Editorial landing (vision redesign 2/2). A two-column stage — editorial copy
   left, an illustrative SKU buy/wait/plan decision preview right — layered over
   the shipped Fraunces/Inter type. Public-landing only; fully token-driven; the
   ink-blue accent is --lugn-info-fg. Appended last so it wins source order over
   the base centered landing rules; collapses to one column under 1024px.
   ========================================================================= */
body.v2-shell.is-public-landing .v2-landing-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: 64px;
  align-items: center;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 8px 0 12px;
}

/* Left column: editorial + left-aligned (override the base centered copy). */
body.v2-shell.is-public-landing .v2-landing-stage .v2-landing-hero {
  padding: 0;
  min-height: 0;
  align-items: stretch;
}
body.v2-shell.is-public-landing .v2-landing-stage .v2-landing-copy {
  align-items: flex-start;
  justify-content: flex-start;
  max-width: none;
  text-align: left;
}
body.v2-shell.is-public-landing .v2-landing-stage .v2-landing-copy h1 {
  max-width: 17ch;
  text-align: left;
}
body.v2-shell.is-public-landing .v2-landing-stage .v2-landing-copy p {
  text-align: left;
  max-width: 46ch;
}
body.v2-shell.is-public-landing .v2-landing-stage .v2-landing-actions,
body.v2-shell.is-public-landing .v2-landing-stage .landing-trust-rail,
body.v2-shell.is-public-landing .v2-landing-stage .landing-value-list {
  justify-content: flex-start;
  text-align: left;
}

/* Italic Fraunces accent on the second half of the headline. */
body.v2-shell .v2-hero-accent {
  font-style: italic;
  font-weight: 400;
  color: var(--lugn-info-fg);
}

/* Eyebrow → accent + letterspaced. */
body.v2-shell.is-public-landing .v2-landing-stage .landing-eyebrow {
  color: var(--lugn-info-fg);
  font-weight: 600;
  letter-spacing: 0.14em;
}

/* Tick bullets in the accent (no markup change). */
body.v2-shell.is-public-landing .v2-landing-stage .landing-value-list li {
  position: relative;
  list-style: none;
  padding-left: 30px;
}
body.v2-shell.is-public-landing .v2-landing-stage .landing-value-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--lugn-radius-pill);
  background: var(--lugn-info-bg);
  color: var(--lugn-info-fg);
  font-size: var(--lugn-text-micro);
  font-weight: 700;
}

/* Trust chips → bordered pills. */
body.v2-shell.is-public-landing .v2-landing-stage .landing-trust-rail span {
  border: 1px solid var(--lugn-hairline);
  border-radius: var(--lugn-radius-pill);
  padding: 6px 12px;
  background: var(--lugn-surface);
}

/* ---- Right column: the illustrative SKU decision preview ---- */
body.v2-shell .v2-preview-panel {
  background: var(--lugn-surface);
  border: 1px solid var(--lugn-hairline);
  border-radius: var(--lugn-radius-lg);
  box-shadow: var(--lugn-elevation-2);
  overflow: hidden;
}
body.v2-shell .v2-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--lugn-hairline);
}
body.v2-shell .v2-preview-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--lugn-text-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lugn-muted);
}
body.v2-shell .v2-preview-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--lugn-radius-xs);
  background: var(--lugn-ink);
  color: var(--lugn-surface);
  font-family: var(--lugn-font-serif);
  font-size: var(--lugn-text-xs);
  letter-spacing: 0;
}
body.v2-shell .v2-preview-fresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--lugn-text-micro);
  color: var(--lugn-muted);
}
body.v2-shell .v2-preview-live {
  width: 6px;
  height: 6px;
  border-radius: var(--lugn-radius-pill);
  background: var(--lugn-success-fg);
}
body.v2-shell .v2-preview-body {
  padding: 18px;
  display: grid;
  gap: 14px;
}
body.v2-shell .v2-preview-sku {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
body.v2-shell .v2-preview-sku-name {
  font-weight: 600;
  font-size: var(--lugn-text-lead);
  color: var(--lugn-ink);
}
body.v2-shell .v2-preview-sku-code {
  font-size: var(--lugn-text-micro);
  color: var(--lugn-muted);
  font-variant-numeric: tabular-nums;
}
body.v2-shell .v2-preview-sku-sub {
  margin: -6px 0 0;
  font-size: var(--lugn-text-sm);
  color: var(--lugn-muted);
}
body.v2-shell .v2-preview-decision {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--lugn-text-sm);
  color: var(--lugn-ink-secondary);
}
body.v2-shell .v2-preview-verb {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--lugn-radius-pill);
  background: var(--lugn-success-bg);
  color: var(--lugn-success-fg);
  font-weight: 600;
}
body.v2-shell .v2-preview-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
body.v2-shell .v2-preview-metric {
  border: 1px solid var(--lugn-hairline);
  border-radius: var(--lugn-radius);
  padding: 10px 12px;
  display: grid;
  gap: 3px;
}
body.v2-shell .v2-preview-k {
  font-size: var(--lugn-text-micro);
  color: var(--lugn-muted);
}
body.v2-shell .v2-preview-v {
  font-weight: 600;
  font-size: var(--lugn-text-lead);
  color: var(--lugn-ink);
  font-variant-numeric: tabular-nums;
}
body.v2-shell .v2-preview-v small {
  font-size: var(--lugn-text-xs);
  font-weight: 500;
  color: var(--lugn-muted);
}
body.v2-shell .v2-preview-risk {
  color: var(--lugn-warning-fg);
}
body.v2-shell .v2-preview-triad {
  display: flex;
  gap: 6px;
}
body.v2-shell .v2-preview-triad span {
  flex: 1;
  text-align: center;
  padding: 7px 0;
  border-radius: var(--lugn-radius-sm);
  font-size: var(--lugn-text-sm);
  font-weight: 600;
}
body.v2-shell .v2-preview-buy { background: var(--lugn-success-bg); color: var(--lugn-success-fg); }
body.v2-shell .v2-preview-wait { background: var(--lugn-warning-bg); color: var(--lugn-warning-fg); }
body.v2-shell .v2-preview-plan { background: var(--lugn-sunken); color: var(--lugn-ink-secondary); }
body.v2-shell .v2-preview-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--lugn-hairline);
  background: var(--lugn-canvas);
  font-size: var(--lugn-text-micro);
  color: var(--lugn-muted);
}

/* Stage collapses to a single centered column; preview sits under the copy. */
@media (max-width: 1024px) {
  body.v2-shell.is-public-landing .v2-landing-stage {
    grid-template-columns: 1fr;
    gap: 36px;
    max-width: 560px;
  }
  body.v2-shell.is-public-landing .v2-landing-stage .v2-landing-copy h1 {
    max-width: 18ch;
  }
}

/* =========================================================================
   Signed-in declutter (pass 1) — boxes-in-boxes. Inside the capability node pane
   the evidence/preview blocks render with the base border + radius + filled bg, so
   the slide-over reads as a stack of boxes-in-boxes. Flatten them to calm
   top-divider sections (the inner metric grid stays); keep a soft box ONLY on the
   `.risk` blocks, so a box now means "look here" instead of being everywhere.
   ========================================================================= */
body.v2-shell .capability-node-pane .recommendation-evidence,
body.v2-shell .capability-node-pane .financial-preview,
body.v2-shell .capability-node-pane .budget-preview,
body.v2-shell .capability-node-pane .supplier-requirements,
body.v2-shell .capability-node-pane .slow-mover-preview,
body.v2-shell .capability-node-pane .price-negotiation-preview,
body.v2-shell .capability-node-pane .demand-profile {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 12px 0 2px;
  border-top: 1px solid var(--v2-line);
}
body.v2-shell .capability-node-pane .recommendation-evidence.risk,
body.v2-shell .capability-node-pane .financial-preview.risk,
body.v2-shell .capability-node-pane .supplier-requirements.risk,
body.v2-shell .capability-node-pane .slow-mover-preview.risk,
body.v2-shell .capability-node-pane .price-negotiation-preview.risk {
  padding: 12px;
  border-radius: var(--lugn-radius);
  background: var(--lugn-danger-bg);
}