:root {
  color-scheme: light dark;

  /* ============================================================
     Lugn — single canonical design-token source of truth.
     Consumed by the tenant app (v2.css @imports this file) AND
     the owner console (owner.html links this file directly).
     Legacy --* and v2's --v2-* names are thin aliases below so
     every existing selector resolves here. Light values live in
     :root; dark values are remapped further down.
     ============================================================ */

  /* Neutrals */
  --lugn-canvas: #fbfbf9;
  --lugn-surface: #ffffff;
  --lugn-sunken: #f5f4f1;
  --lugn-hairline: rgba(23, 22, 19, 0.10);
  --lugn-border-strong: rgba(11, 13, 18, 0.30);
  /* Interactive-control border that clears WCAG 1.4.11 non-text 3:1 on the
     canvas (inputs/selects/textarea) where the border is the only affordance. */
  --lugn-control-border: rgba(11, 13, 18, 0.45);

  /* Ink ramp */
  --lugn-ink: #20201d;
  --lugn-ink-secondary: #4b4843;
  --lugn-muted: #6f6d67;
  --lugn-faint: #9c9a93;
  --lugn-on-accent: #ffffff;
  /* Inverse pair for elements that must contrast the canvas in BOTH modes
     (toasts, the brand mark): a dark chip in light mode, a light chip in dark. */
  --lugn-inverse-surface: #20201d;
  --lugn-inverse-ink: #ffffff;

  /* Action — interactive affordances only (one primary per view) */
  --lugn-action: #25231e;
  --lugn-action-strong: #000000;
  --lugn-action-subtle: #f1efe9;

  /* Decision triad — the only saturated content colour. fg >=4.5:1 on its bg */
  --lugn-buy-fg: #1f7a34;
  --lugn-buy-bg: #e7f4ea;
  --lugn-wait-fg: #8a5a00;
  --lugn-wait-bg: #fdf3e0;
  --lugn-plan-fg: #5c594f;
  --lugn-plan-bg: #f1efe9;

  /* Status */
  --lugn-success-fg: #1f7a34;
  --lugn-success-bg: #e7f4ea;
  --lugn-warning-fg: #8a5a00;
  --lugn-warning-bg: #fdf3e0;
  --lugn-danger-fg: #c4321f;
  --lugn-danger-bg: #fdecea;
  /* Solid danger affordance (destructive button fill) — white-on-red.
     #ffffff on #c4321f = 5.49:1, clears WCAG AA (>=4.5:1). Consumed by v2.css. */
  --lugn-danger-solid-bg: #c4321f;
  --lugn-danger-solid-on: #ffffff;
  --lugn-info-fg: #2c5aa0;
  --lugn-info-bg: #eef2f8;

  /* Focus ring — >=3:1 on white and on accent; survives forced-colors */
  --lugn-focus-ring: #1a73e8;
  --lugn-focus-ring-width: 2px;
  --lugn-focus-ring-offset: 2px;

  /* Radius ramp */
  --lugn-radius-xs: 4px;
  --lugn-radius-sm: 6px;
  --lugn-radius: 8px;
  --lugn-radius-lg: 12px;
  --lugn-radius-pill: 9999px;

  /* Space scale (4/8pt) */
  --lugn-space-1: 2px;
  --lugn-space-2: 4px;
  --lugn-space-3: 8px;
  --lugn-space-4: 12px;
  --lugn-space-5: 16px;
  --lugn-space-6: 20px;
  --lugn-space-7: 24px;
  --lugn-space-8: 32px;
  --lugn-space-9: 40px;
  --lugn-space-10: 48px;
  --lugn-space-11: 64px;

  /* Type scale (rem, 1.20 minor third) + line-heights + weights.
     --lugn-text-micro (11px) is the sanctioned MINIMUM type step — nothing
     visible should resolve smaller. Reserve it for dense metadata; body and
     label copy uses --lugn-text-xs (12px) or larger. */
  --lugn-text-micro: 0.6875rem;
  --lugn-text-xs: 0.75rem;
  --lugn-text-sm: 0.8125rem;
  /* Semantic label/prose step (13px). Real form labels and <dt> prose that
     currently sit at the 11px micro floor are repointed here for comfortable
     reading; dense tabular sub-text keeps using micro/xs. */
  --lugn-text-label: 0.8125rem;
  --lugn-text-base: 0.875rem;
  --lugn-text-lead: 1rem;
  --lugn-text-lg: 1.25rem;
  --lugn-text-xl: 1.5rem;
  --lugn-text-2xl: 1.875rem;
  --lugn-text-3xl: 2.375rem;
  --lugn-leading-tight: 1.15;
  --lugn-leading-snug: 1.4;
  --lugn-leading-normal: 1.5;
  --lugn-weight-regular: 400;
  --lugn-weight-medium: 500;
  --lugn-weight-semibold: 600;

  /* Elevation — reserved strictly for floating layers; in-flow stays flat */
  --lugn-elevation-0: none;
  --lugn-elevation-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --lugn-elevation-2: 0 4px 12px rgba(16, 24, 40, 0.08);
  --lugn-elevation-3: 0 12px 32px rgba(16, 24, 40, 0.12);

  /* Motion */
  --lugn-motion-fast: 120ms;
  --lugn-motion-base: 180ms;
  --lugn-motion-slow: 260ms;
  --lugn-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --lugn-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);

  /* ============================================================
     Phase 2 — semantic role tokens (Lugn primitive layer).
     Every value below is a var() ALIAS onto an existing
     --lugn-* / --shell-* primitive in this same :root (no parallel
     namespace), EXCEPT the two genuinely-new tracking values, one
     new heavier elevation step, and the geometry promotions of
     proven scoped heights. Because the conformance test strips the
     whole :root block, these additions have zero conformance impact.
     Primitives.css and the migrated surfaces consume these roles so
     a surface names intent (display/row/popover) instead of picking
     a raw step. See .claude/tmp/phase2-design.md §1.
     ============================================================ */

  /* --- 1a. Semantic typography roles (onto the existing scale) --- */
  --lugn-font-display:          var(--lugn-text-3xl);   /* 2.375rem  hero/marketing */
  --lugn-font-page-title:       var(--lugn-text-2xl);   /* 1.875rem  workspace H1   */
  --lugn-font-section-heading:  var(--lugn-text-lg);    /* 1.25rem   panel H2       */
  --lugn-font-subheading:       var(--lugn-text-lead);  /* 1rem      sub-section    */
  --lugn-font-body:             var(--lugn-text-base);  /* 0.875rem  default prose  */
  --lugn-font-compact-body:     var(--lugn-text-sm);    /* 0.8125rem dense prose    */
  --lugn-font-control-label:    var(--lugn-text-label); /* 0.8125rem form labels    */
  --lugn-font-metadata:         var(--lugn-text-xs);    /* 0.75rem   row sub-text   */
  --lugn-font-micro:            var(--lugn-text-micro); /* 0.6875rem dense tabular ONLY (sanctioned floor) */
  /* Role-paired line-height + weight defaults (aliases, used by primitives.css) */
  --lugn-leading-heading:       var(--lugn-leading-tight);
  --lugn-leading-body:          var(--lugn-leading-normal);
  --lugn-weight-heading:        var(--lugn-weight-semibold);
  --lugn-weight-label:          var(--lugn-weight-medium);
  /* Tracking — the ONLY genuinely-new typographic primitive (no literal exists today) */
  --lugn-tracking-tight:        -0.01em;  /* large headings    */
  --lugn-tracking-wide:          0.02em;  /* all-caps eyebrows */

  /* --- 1b. Spacing roles (onto the 4/8 scale) --- */
  --lugn-space-micro:     var(--lugn-space-1);  /* 2px  hairline gaps         */
  --lugn-space-compact:   var(--lugn-space-2);  /* 4px  inside compact chips  */
  --lugn-space-control:   var(--lugn-space-3);  /* 8px  control inner padding */
  --lugn-space-row:       var(--lugn-space-4);  /* 12px row inline padding    */
  --lugn-space-standard:  var(--lugn-space-5);  /* 16px default block gap     */
  --lugn-space-section:   var(--lugn-space-8);  /* 32px between sections      */
  --lugn-space-major:     var(--lugn-space-11); /* 64px page-level rhythm     */

  /* --- 1c. Geometry: control/row heights + role radii + divider ---
     Promote the proven scoped --v2-control-height (38/32/44) and
     --shell-nav-row into the lugn namespace by ALIAS (v2.css then
     aliases --v2-control-height onto --lugn-control-height; never a
     rename — the responsive density matrix depends on the v2 name). */
  --lugn-control-height:          38px;                  /* standard control */
  --lugn-control-height-compact:  32px;                  /* dense mode       */
  --lugn-control-height-touch:    44px;                  /* touch floor      */
  --lugn-row-height:              36px;                  /* canonical selectable row (32-36 band) */
  --lugn-row-height-compact:      32px;
  --lugn-nav-row-height:          var(--shell-nav-row);  /* 34px pane nav row */
  --lugn-table-row-standard:      40px;
  --lugn-table-row-compact:       32px;
  --lugn-divider:                 var(--shell-divider);  /* 1px — collapse the dead --shell-divider */
  /* Role radii onto the existing ramp */
  --lugn-radius-control:  var(--lugn-radius-sm);   /* 6px  buttons/inputs */
  --lugn-radius-menu:     var(--lugn-radius);      /* 8px  popovers/menus */
  --lugn-radius-dialog:   var(--lugn-radius-lg);   /* 12px dialogs        */
  /* --lugn-radius-pill (9999px) already exists — 999px literals consolidate onto it */

  /* --- 1d. Elevation roles (onto the 0..3 ramp + one new heavier step) --- */
  --lugn-elevation-popover: var(--lugn-elevation-2);   /* menus, tooltips, dropdowns */
  --lugn-elevation-dialog:  var(--lugn-elevation-3);   /* modal/slide-over           */
  --lugn-elevation-dragged: 0 16px 40px rgba(16, 24, 40, 0.16); /* drag affordance — NEW step (stripped with :root) */

  /* --- 1e. Motion + layering roles --- */
  --lugn-motion-standard:  var(--lugn-motion-base);      /* name parity with charter */
  --lugn-motion-overlay:   var(--lugn-motion-base);      /* dialog/popover enter      */
  --lugn-ease-out:         var(--lugn-ease-standard);
  /* Z-index scale — name the layering stack (rail/pane, pane-host z70, rail-tooltip z80). */
  --lugn-z-base:        0;
  --lugn-z-sticky:      30;   /* sticky table thead          */
  --lugn-z-overlay:     70;   /* slide-over / dialog host (matches capability pane) */
  --lugn-z-popover:     90;   /* menus/popovers above overlays */
  --lugn-z-tooltip:    100;   /* tooltip above everything     */

  /* ===== Shell frame dimensions — the two-level navigation architecture =====
     The authenticated tenant/owner shell is a locked grid: a 52px icon-only
     primary rail, a 232px contextual secondary pane, and a dominant workspace
     whose header is fixed while a single working surface scrolls. These are
     dimensions (not colours), defined once here so v2.css (which @imports this
     file) resolves them everywhere. At 1440px the workspace is 1440 - 52 - 232
     = 1156px, i.e. 80.3% of the viewport (>= the 80% target). */
  --shell-rail-w: 52px;            /* primary icon rail width (AC1) */
  --shell-rail-item: 40px;         /* rail button hit-target */
  --shell-pane-w: 232px;           /* secondary pane width (220-240 band) */
  --shell-pane-w-compact: 220px;   /* tablet step */
  --shell-header-h: 56px;          /* fixed workspace header min-height */
  --shell-nav-row: 34px;           /* compact pane row (32-36 band) */
  --shell-divider: 1px;            /* divider thickness (pair with --v2-line colour) */

  /* Fonts — self-hosted Inter for UI/text, Fraunces (serif) for display headings
     (see fonts.css); system stack is the fallback. --lugn-font-num adds tabular numerals. */
  --lugn-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lugn-font-serif: "Fraunces", Georgia, "Times New Roman", "Iowan Old Style", serif;
  --lugn-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --lugn-font-num: var(--lugn-font-sans);

  /* ===== Legacy aliases — existing styles.css selectors resolve to Lugn ===== */
  --bg: var(--lugn-canvas);
  --surface: var(--lugn-surface);
  --surface-muted: var(--lugn-sunken);
  --text: var(--lugn-ink);
  --muted: var(--lugn-muted);
  --border: var(--lugn-hairline);
  --border-strong: var(--lugn-border-strong);
  --accent: var(--lugn-action);
  --accent-strong: var(--lugn-action-strong);
  --success: var(--lugn-success-fg);
  --signal: var(--lugn-warning-fg);
  --ink-soft: var(--lugn-ink-secondary);
  --warning: var(--lugn-warning-fg);
  --danger: var(--lugn-danger-fg);
  --shadow: var(--lugn-elevation-0);
  --font-sans: var(--lugn-font-sans);
  --font-mono: var(--lugn-font-mono);
  --font-num: var(--lugn-font-num);
}

/* Dark mode — pivot neutrals/ink while holding brand hue; same semantic tokens,
   so components never re-author. Opt-in via [data-theme="dark"] for now; the
   prefers-color-scheme auto path is enabled once hardcoded surface colours are
   tokenised (so an OS-dark user never sees a half-dark page mid-migration). */
[data-theme="dark"] {
  --lugn-canvas: #0e1116;
  --lugn-surface: #161b22;
  --lugn-sunken: #1b212b;
  --lugn-hairline: rgba(255, 255, 255, 0.16);
  --lugn-border-strong: rgba(255, 255, 255, 0.32);
  --lugn-control-border: rgba(255, 255, 255, 0.44);
  --lugn-ink: #e8ebf1;
  --lugn-ink-secondary: #c2c8d2;
  --lugn-muted: #9aa3b2;
  --lugn-faint: #6b7482;
  --lugn-inverse-surface: #e8ebf1;
  --lugn-inverse-ink: #0b0d12;
  --lugn-action: #4d9bff;
  --lugn-action-strong: #2f86ff;
  --lugn-action-subtle: rgba(77, 155, 255, 0.16);
  --lugn-buy-fg: #5fd08a;
  --lugn-buy-bg: rgba(47, 158, 68, 0.18);
  --lugn-wait-fg: #f0b84d;
  --lugn-wait-bg: rgba(138, 90, 0, 0.24);
  --lugn-plan-fg: #a8bbe6;
  --lugn-plan-bg: rgba(58, 79, 122, 0.28);
  --lugn-success-fg: #5fd08a;
  --lugn-success-bg: rgba(47, 158, 68, 0.18);
  --lugn-warning-fg: #f0b84d;
  --lugn-warning-bg: rgba(138, 90, 0, 0.24);
  --lugn-danger-fg: #ff8073;
  --lugn-danger-bg: rgba(196, 50, 31, 0.22);
  /* Solid danger fill, dark-safe — white on a deep red that sits above the dark
     canvas. #ffffff on #8a1f12 = 9.19:1, clears WCAG AA (>=4.5:1). */
  --lugn-danger-solid-bg: #8a1f12;
  --lugn-danger-solid-on: #ffffff;
  --lugn-info-fg: #4d9bff;
  --lugn-info-bg: rgba(77, 155, 255, 0.16);
  --lugn-focus-ring: #6cb0ff;
  --lugn-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --lugn-elevation-2: 0 4px 12px rgba(0, 0, 0, 0.55);
  --lugn-elevation-3: 0 12px 32px rgba(0, 0, 0, 0.6);
  --lugn-elevation-dragged: 0 16px 40px rgba(0, 0, 0, 0.62);
}

/* Auto-dark: now that every surface colour resolves through tokens (the sweep
   took both stylesheets to ~zero ad-hoc literals), honour the OS preference
   globally. [data-theme="light"] is the escape hatch to force light; an explicit
   [data-theme="dark"] toggle (above) still wins everywhere. Same token values as
   the explicit-dark block. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lugn-canvas: #0e1116;
    --lugn-surface: #161b22;
    --lugn-sunken: #1b212b;
    --lugn-hairline: rgba(255, 255, 255, 0.16);
    --lugn-border-strong: rgba(255, 255, 255, 0.32);
    --lugn-control-border: rgba(255, 255, 255, 0.44);
    --lugn-ink: #e8ebf1;
    --lugn-ink-secondary: #c2c8d2;
    --lugn-muted: #9aa3b2;
    --lugn-faint: #6b7482;
    --lugn-inverse-surface: #e8ebf1;
    --lugn-inverse-ink: #0b0d12;
    --lugn-action: #4d9bff;
    --lugn-action-strong: #2f86ff;
    --lugn-action-subtle: rgba(77, 155, 255, 0.16);
    --lugn-buy-fg: #5fd08a;
    --lugn-buy-bg: rgba(47, 158, 68, 0.18);
    --lugn-wait-fg: #f0b84d;
    --lugn-wait-bg: rgba(138, 90, 0, 0.24);
    --lugn-plan-fg: #a8bbe6;
    --lugn-plan-bg: rgba(58, 79, 122, 0.28);
    --lugn-success-fg: #5fd08a;
    --lugn-success-bg: rgba(47, 158, 68, 0.18);
    --lugn-warning-fg: #f0b84d;
    --lugn-warning-bg: rgba(138, 90, 0, 0.24);
    --lugn-danger-fg: #ff8073;
    --lugn-danger-bg: rgba(196, 50, 31, 0.22);
    /* Solid danger fill, dark-safe — #ffffff on #8a1f12 = 9.19:1 (WCAG AA). */
    --lugn-danger-solid-bg: #8a1f12;
    --lugn-danger-solid-on: #ffffff;
    --lugn-info-fg: #4d9bff;
    --lugn-info-bg: rgba(77, 155, 255, 0.16);
    --lugn-focus-ring: #6cb0ff;
    --lugn-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --lugn-elevation-2: 0 4px 12px rgba(0, 0, 0, 0.55);
    --lugn-elevation-3: 0 12px 32px rgba(0, 0, 0, 0.6);
    --lugn-elevation-dragged: 0 16px 40px rgba(0, 0, 0, 0.62);
  }
}

/* ============================================================
   Motion baseline (Lugn). Interactive elements ease their state
   changes instead of hard-cutting. Targets base component
   selectors so it covers BOTH the tenant app (.v2-shell) and the
   owner console. prefers-reduced-motion is honoured globally.
   ============================================================ */
button,
a,
summary,
input,
select,
textarea,
.nav-item,
.module-shortcut,
.status-pill,
.decision-chip,
.primary-button,
.secondary-button,
.icon-button,
.panel,
.card,
.kpi-tile,
.metric-tile {
  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),
    transform var(--lugn-motion-fast) var(--lugn-ease-standard),
    opacity var(--lugn-motion-base) var(--lugn-ease-standard);
}

button:active:not(:disabled),
.primary-button:active:not(:disabled),
.secondary-button:active:not(:disabled),
.icon-button:active:not(:disabled) {
  transform: scale(0.985);
}

details.workbench-disclosure > summary.panel-header::after {
  transition: transform var(--lugn-motion-base) var(--lugn-ease-standard);
}

/* ============================================================
   Focus ring (Lugn a11y baseline). A real 2px outline — not a
   soft low-alpha glow — at >=3:1 on light and dark, offset for
   clarity. Uses `outline` so it survives forced-colors / Windows
   high-contrast mode where box-shadow halos vanish. Base rule for
   every shell (owner console, share-link, and tenant where a more
   specific rule doesn't already paint its own indicator).
   ============================================================ */
:focus-visible {
  outline: var(--lugn-focus-ring-width) solid var(--lugn-focus-ring) !important;
  outline-offset: var(--lugn-focus-ring-offset) !important;
}

/* The owner console now rides the v2/Lugn shell (owner.html body.v2-shell), so it
   inherits the unified component styling. But the v2 in-app rule hides the topbar
   subtitle <p>; the owner console uses it for live platform status, so keep it. */
body.v2-shell:not(.is-public-landing) .topbar p.owner-topbar-status {
  display: block;
  color: var(--lugn-muted);
  font-size: 13px;
}

/* The v2 in-app rule also hides every .panel-header subtitle <p>. In the owner
   console those subtitles carry the one-line "what this section is for" purpose
   copy that makes a dense operations console legible at a glance, so re-surface
   them inside the owner shell. The selector out-specifies v2.css's
   `body.v2-shell:not(.is-public-landing) .panel-header p { display:none }`
   (which would otherwise win on source order) by also matching the
   `.owner-shell` wrapper. Calm muted prose on the Lugn label step; margin-top
   comes from the shared .panel-header p rule below. */
body.v2-shell:not(.is-public-landing) .owner-shell .panel-header p {
  display: block;
  color: var(--lugn-muted);
  font-size: var(--lugn-text-label);
  line-height: var(--lugn-leading-snug);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Forced-colors (Windows high-contrast) + prefers-contrast.
   The inline SVG sprite (stroke:currentColor) and token-painted
   chips/pills lose their affordance under forced-colors:active, so
   re-anchor them on system colour keywords (CanvasText/Highlight)
   — which are NOT #hex/rgb, so they never trip the colour-literal
   counter. The prefers-contrast bumps DO use rgba; they live inside
   a :root and are recognised as token definitions by a dedicated
   strip in tests/design-system-conformance.test.js (added in the
   same slice). See .claude/tmp/phase2-design.md §1f.
   ============================================================ */
@media (forced-colors: active) {
  .icon-sprite use,
  .rail-icon,
  .lugn-icon {
    forced-color-adjust: none;
  }
  svg[stroke="currentColor"],
  .lugn-icon {
    stroke: CanvasText;
  }
  .status-pill,
  .lugn-status,
  .lugn-chip {
    border: 1px solid CanvasText;
  }
  :focus-visible {
    outline-color: Highlight !important;
  }
}
@media (prefers-contrast: more) {
  :root {
    --lugn-hairline: rgba(11, 13, 18, 0.30);
    --lugn-border-strong: rgba(11, 13, 18, 0.55);
  }
}

/* @primitive
   ============================================================
   (7) Tooltip — `.lugn-tooltip` (design §7 / §3.7).

   The canonical supplementary-label primitive, generalized from the
   proven `.rail-tooltip` (v2.css): an inverse-surface chip revealed on
   hover AND :focus-visible (never a native `title=` alone — so the
   label is reachable from the keyboard, AC17). CSP-safe: no inline
   style, painted entirely through tokens.

   Two ways to attach it:
     1. CSS-only (the rail pattern): a `.lugn-tooltip` element nested
        inside a host marked `.has-lugn-tooltip` (or the legacy
        `.rail-item`); shown when the host is hovered/focused.
     2. JS-delegated (components/tooltip.js `wireTooltips`): any element
        with `data-lugn-tooltip="text"` gets a `role="tooltip"`
        `.lugn-tooltip` span injected/toggled on hover+focus. The text
        is set via textContent (never innerHTML) so runtime strings are
        XSS-safe. The native `title=` (where present) stays as a
        graceful no-JS fallback.

   This block lives in styles.css (NOT primitives.css) because the
   tooltip is owner-facing — owner.html links styles.css directly — so
   the owner console resolves `.lugn-tooltip` without a primitives.css
   link (design §4 decision). It is held to the STRICT primitive budget
   (zero colour/font-size/radius literals, no ad-hoc shadow) via the
   @primitive fence recognised by the conformance test.

   STRICT: every value resolves through a --lugn-* token.
   ============================================================ */
.lugn-tooltip {
  position: absolute;
  z-index: var(--lugn-z-tooltip);
  max-width: 16rem;
  padding: var(--lugn-space-2) var(--lugn-space-3);
  border-radius: var(--lugn-radius-control);
  background: var(--lugn-inverse-surface);
  color: var(--lugn-inverse-ink);
  box-shadow: var(--lugn-elevation-popover);
  font-size: var(--lugn-font-metadata);
  font-weight: var(--lugn-weight-semibold);
  line-height: var(--lugn-leading-body);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--lugn-motion-fast) var(--lugn-ease-standard);
}

/* Placement modifiers — offset the chip from the host on each side.
   `.rail-tooltip` keeps the `--right` placement (its historical layout). */
.lugn-tooltip--top {
  bottom: calc(100% + var(--lugn-space-2));
  left: 50%;
  transform: translateX(-50%);
}

.lugn-tooltip--bottom {
  top: calc(100% + var(--lugn-space-2));
  left: 50%;
  transform: translateX(-50%);
}

.lugn-tooltip--right {
  left: calc(100% + var(--lugn-space-2));
  top: 50%;
  transform: translateY(-50%);
}

.lugn-tooltip--left {
  right: calc(100% + var(--lugn-space-2));
  top: 50%;
  transform: translateY(-50%);
}

/* CSS-only reveal: a host carrying a nested `.lugn-tooltip` shows it on
   hover or keyboard focus. The JS path (wireTooltips) toggles
   `.is-visible` instead, so both reveal mechanisms share one rule. */
.has-lugn-tooltip {
  position: relative;
}

.has-lugn-tooltip:hover > .lugn-tooltip,
.has-lugn-tooltip:focus-visible > .lugn-tooltip,
.has-lugn-tooltip:focus-within > .lugn-tooltip,
.lugn-tooltip.is-visible {
  opacity: 1;
}
/* @end-primitive */

/* ============================================================
   Component states (Lugn). Full 2026 state coverage on the shared
   component layer, so every surface (tenant + owner) inherits
   consistent disabled / busy / invalid / error / skeleton states.
   Disabled, :user-invalid and [aria-busy] match existing DOM with
   no JS; .skeleton / .field-error are opt-in loading/error atoms.
   ============================================================ */
button:disabled,
button[disabled],
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

[aria-busy="true"] {
  cursor: progress;
}

/* Validate only after the user has interacted (:user-invalid), never on first paint */
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-color: var(--lugn-danger-fg);
  outline-color: var(--lugn-danger-fg);
}

/* Inline, field-attached error — the calm alternative to a transient toast */
.field-error {
  display: block;
  margin-top: var(--lugn-space-2);
  color: var(--lugn-danger-fg);
  font-size: var(--lugn-text-sm);
  line-height: var(--lugn-leading-snug);
}

/* Skeleton placeholder for loading data views (shimmer collapses to static
   under prefers-reduced-motion via the global guard above). */
.skeleton {
  position: relative;
  overflow: hidden;
  min-height: 1em;
  border-radius: var(--lugn-radius-sm);
  background: var(--lugn-sunken);
  color: transparent !important;
  user-select: none;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lugn-surface) 45%, transparent), transparent);
  transform: translateX(-100%);
  animation: lugn-shimmer 1.4s ease-in-out infinite;
}

@keyframes lugn-shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* Skeleton placeholder geometry. The shimmer is the .skeleton atom above;
   .skeleton-stack lays a run of lines out on the 8pt grid and .skeleton-line is
   one bar. The strict CSP forbids inline styles, so per-instance widths resolve
   through the .sk-w-* bucket classes below (skeletons are approximate, so width
   hints snap to the nearest 10%). */
.skeleton-stack {
  display: grid;
  gap: var(--lugn-space-3);
}

.skeleton-line {
  display: block;
  height: 1em;
  width: 100%;
}

.sk-w-30 { width: 30%; }
.sk-w-40 { width: 40%; }
.sk-w-50 { width: 50%; }
.sk-w-60 { width: 60%; }
.sk-w-70 { width: 70%; }
.sk-w-80 { width: 80%; }
.sk-w-90 { width: 90%; }
.sk-w-100 { width: 100%; }

/* Chip-shaped skeleton (e.g. a decision pill placeholder). */
.sk-chip { width: 64px; height: 24px; }

/* Muted, decorative lead glyph for empty states. */
.empty-state-glyph {
  font-size: var(--lugn-text-xl);
  line-height: 1;
  opacity: 0.45;
}

/* OAuth provider brand-mark sizing (the inline brand <svg> logo). */
.oauth-button-icon--brand {
  border: 0;
  width: 18px;
  height: 18px;
}

/* Tabular numerals so money / quantity / SKU columns align across the
   recommendation + preview surfaces (audit: typography/scannability). */
.budget-preview,
.recommendation-evidence,
.demand-profile,
.financial-preview,
.slow-mover-preview,
.price-negotiation-preview,
.supplier-requirements,
.recommendation-row > header strong,
.recommendation-row > dl {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

[hidden] {
  display: none !important;
}

button,
input,
select {
  font: inherit;
}

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

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

.is-public-landing .sidebar {
  display: none;
}

.is-public-landing .workspace {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 28px 32px 56px;
}

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

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

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

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  background: var(--text);
  color: var(--lugn-on-accent);
  font-weight: 600;
}

.brand-title {
  font-size: 15px;
  font-weight: 600;
}

.brand-subtitle {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

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

.nav-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.nav-item:hover,
.nav-item.active {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
}

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

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

.module-shortcut-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.module-shortcut-heading small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
}

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

.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: 8px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

.module-shortcut:hover,
.module-shortcut:focus-visible,
.module-shortcut.is-active {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
}

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

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

.module-shortcut small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.workspace {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 24px;
}

body:not(.is-public-landing) .workspace {
  width: 100%;
  max-width: 100%;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 600;
}

h2 {
  font-size: 15px;
  line-height: 1.25;
  font-weight: 600;
}

.topbar p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

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

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

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

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

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

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

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

.owner-access-form {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: min(100%, 440px);
}

.owner-access-form input {
  width: min(220px, 38vw);
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
  color: var(--text);
}

.landing-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 4px;
  min-width: 0;
}

.landing-nav a {
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}

.landing-nav a:hover {
  background: var(--surface);
  color: var(--text);
}

.icon-button,
.secondary-button,
.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}

.icon-button {
  width: 38px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

.secondary-button {
  padding: 0 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

.command-trigger {
  min-width: 64px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

.secondary-button:disabled {
  background: var(--surface-muted);
  color: var(--muted);
  cursor: not-allowed;
}

.primary-button {
  padding: 0 14px;
  border: 1px solid var(--accent-strong);
  background: var(--accent);
  color: var(--lugn-on-accent);
  font-weight: 500;
}

.primary-button:disabled {
  border-color: var(--border);
  background: var(--surface-muted);
  color: var(--muted);
  cursor: not-allowed;
}

.view {
  display: none;
  gap: 18px;
}

.view.active {
  display: grid;
  min-width: 0;
}

.grid {
  display: grid;
  gap: 18px;
}

.two-columns {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
}

body:not(.is-public-landing) .workbench-primary-grid {
  order: 1;
}

body:not(.is-public-landing) .workbench-command-panel {
  order: 2;
}

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

body.needs-workspace .workbench-primary-grid,
body.needs-workspace .workbench-command-panel,
body.needs-workspace .workbench-secondary-panel,
body.needs-workspace #teamSetupPanel,
body.needs-workspace .safety-review-panel,
body.needs-workspace #commandPaletteButton {
  display: none !important;
}

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

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

.panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.panel-header p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.owner-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

details.workbench-disclosure {
  align-content: start;
}

details.workbench-disclosure > summary.panel-header {
  margin-bottom: 0;
  cursor: pointer;
  list-style: none;
}

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

details.workbench-disclosure > summary.panel-header::after {
  content: "+";
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 26px;
  min-height: 26px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
}

details.workbench-disclosure:not([open]) {
  padding: 12px 14px;
}

details.workbench-disclosure[open] > summary.panel-header {
  margin-bottom: 16px;
}

details.workbench-disclosure[open] > summary.panel-header::after {
  content: "-";
}

details.workbench-disclosure > summary.panel-header:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--lugn-action) 42%, transparent);
  outline-offset: 3px;
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* Status indicator (design §1) — dot/glyph + the localized WORD, on a near-
   transparent ground. NOT a saturated filled lozenge at rest: the rest state is
   transparent with a hairline only on the tinted variants. Tokens only. */
.status-pill {
  display: inline-flex;
  align-items: 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(--muted);
  font-size: var(--lugn-text-xs);
  font-weight: var(--lugn-weight-medium);
  line-height: var(--lugn-leading-tight);
}

/* P1 FIX(1): a success status reads GREEN, not ink. The base pill previously
   washed with --lugn-action (the action/ink accent) + --accent-strong fg, so
   "Byggd"/"Ready" read as a call-to-action rather than a settled success. Per
   the 7-state semantic map (design §1) the success tint is the success hue: a
   faint <=10% success wash, a same-hue hairline, and the success-fg foreground.
   Tokens only; the green clears AA (color-contrast test). */
.status-pill.success {
  border-color: color-mix(in srgb, var(--lugn-success-fg) 28%, transparent);
  background: var(--lugn-success-bg);
  color: var(--lugn-success-fg);
}

.status-pill.warning {
  border-color: color-mix(in srgb, var(--lugn-warning-fg) 28%, transparent);
  background: color-mix(in srgb, var(--lugn-warning-fg) 10%, transparent);
  color: var(--warning);
}

.status-pill.danger {
  border-color: color-mix(in srgb, var(--lugn-danger-fg) 28%, transparent);
  background: color-mix(in srgb, var(--lugn-danger-fg) 10%, transparent);
  color: var(--danger);
}

/* Phase 2 §3.6 — 7-state status vocabulary. `.success`/`.warning`/`.danger` above
   are the legacy 4-state variants; these add the canonical `.error` (alias of
   danger), `.information`, `.in-progress`, and `.inactive` tints + an explicit
   `.neutral`. State is never colour-only — every consumer pairs the tint with a
   glyph + word. Every value resolves through a --lugn-* token (zero literals). */
.status-pill.error {
  border-color: color-mix(in srgb, var(--lugn-danger-fg) 28%, transparent);
  background: color-mix(in srgb, var(--lugn-danger-fg) 10%, transparent);
  color: var(--danger);
}

.status-pill.information {
  border-color: color-mix(in srgb, var(--lugn-info-fg) 28%, transparent);
  background: color-mix(in srgb, var(--lugn-info-fg) 10%, transparent);
  color: var(--lugn-info-fg);
}

.status-pill.in-progress {
  border-color: color-mix(in srgb, var(--lugn-info-fg) 28%, transparent);
  background: color-mix(in srgb, var(--lugn-info-fg) 10%, transparent);
  color: var(--lugn-info-fg);
}

.status-pill.inactive {
  border-color: var(--lugn-hairline);
  background: transparent;
  color: var(--muted);
}

.status-pill.neutral {
  border-color: var(--lugn-hairline);
  background: transparent;
  color: var(--muted);
}

/* renderStatus({ presentation: 'pill' }) composes a leading status indicator; keep it
   upright (the pill never italicises) and snug against the word. After fix F1 the
   indicator is the canonical sprite icon (`.lugn-icon`, painted from currentColor so it
   inherits the pill's status colour); the legacy <i> stays selected for any chip not
   yet migrated. The pill is not a gap-flex container, so the indicator owns the gap. */
.status-pill > i,
.status-pill > .lugn-icon {
  font-style: normal;
  line-height: 1;
  margin-right: var(--lugn-space-compact);
}

.status-pill > em {
  font-style: normal;
}

/* Severity chip — the glyph+word presentation (body.v2-shell scope, matching the
   base rule in v2.css). The base + .ok/.warning/.danger variants live in v2.css;
   these add the 3 new canonical states so the 7-state set is colour-paired there
   too. styles.css is @imported FIRST by v2.css, so these never clash with the base
   rule. Tokens only — zero colour literals (STYLES_BUDGET=0). */
body.v2-shell .status-severity-chip.success {
  color: var(--lugn-success-fg);
}

body.v2-shell .status-severity-chip.error {
  color: var(--lugn-danger-fg);
}

body.v2-shell .status-severity-chip.information {
  color: var(--lugn-info-fg);
}

body.v2-shell .status-severity-chip.in-progress {
  color: var(--lugn-info-fg);
}

body.v2-shell .status-severity-chip.inactive {
  color: var(--lugn-muted);
}

body.v2-shell .status-severity-chip.neutral {
  color: var(--v2-muted);
}

/* Surface 1 migration (Phase 2 §6.1) — the migrated colour-tinted chips now carry a
   leading status indicator. After fix F1 that indicator is the canonical sprite icon
   (`.lugn-icon`, from icons.js) rather than a Unicode <i> glyph; the legacy <i>
   selector stays so any not-yet-migrated chip keeps its spacing. The icon paints from
   `currentColor`, so it inherits the chip's status colour with no per-state rule. */
.activation-evidence-chip > i,
.esig-status > i {
  font-style: normal;
  line-height: 1;
  margin-right: 4px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.form-grid label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.form-grid input,
.form-grid textarea,
.panel select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
  color: var(--text);
}

.form-grid input,
.panel select {
  min-height: 40px;
  padding: 0 11px;
}

.form-grid textarea {
  min-height: 82px;
  padding: 10px 11px;
  line-height: 1.45;
  resize: vertical;
}

.full-span {
  grid-column: 1 / -1;
}

.form-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.owner-shell td strong,
.owner-shell td span {
  display: block;
  max-width: 32ch;
  overflow-wrap: anywhere;
}

.owner-shell td strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.owner-shell td code,
.owner-shell .status-pill,
.owner-shell .metric strong,
.owner-shell table td:nth-child(1) {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Owner data tables read as a calm, scannable ledger: comfortable ~40px rows
   (8px vertical padding on a 13px/1.4 line) with 12px horizontal cell padding
   on the 4/8pt scale, dividers on the Lugn hairline. Scoped to .owner-shell so
   the tenant app's shared th/td rule is untouched; 12px keeps the dense
   fixed-layout tables (billing, continuity) from crowding. */
.owner-shell th,
.owner-shell td {
  padding: var(--lugn-space-3) var(--lugn-space-4);
  border-bottom: 1px solid var(--lugn-hairline);
}

.owner-shell td {
  font-size: var(--lugn-text-sm);
}

.owner-shell th {
  font-size: var(--lugn-text-xs);
}

.owner-shell .command-panel,
.owner-shell .action-confirmation-panel {
  box-shadow: var(--lugn-elevation-3);
}

.owner-shell td span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.owner-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lugn-space-4);
  align-items: end;
  margin: 0 0 var(--lugn-space-5);
}

.owner-table-toolbar label {
  display: grid;
  gap: var(--lugn-space-2);
  min-width: 160px;
  color: var(--lugn-ink-secondary);
  font-size: var(--lugn-text-xs);
  font-weight: 600;
}

.owner-table-toolbar input[type="search"] {
  min-height: 34px;
  width: min(260px, 100%);
  padding: var(--lugn-space-3) var(--lugn-space-4);
  border: 1px solid var(--lugn-control-border);
  border-radius: var(--lugn-radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--lugn-text-sm);
}

.owner-table-toolbar .owner-inline-check {
  display: inline-flex;
  grid-auto-flow: column;
  gap: var(--lugn-space-3);
  align-items: center;
  min-height: 34px;
  min-width: auto;
}

.owner-table-toolbar .owner-inline-check input {
  width: 16px;
  height: 16px;
}

.owner-batch-invite-form {
  margin-bottom: var(--lugn-space-5);
}

.owner-batch-invite-form textarea {
  min-height: 126px;
  font-family: inherit;
}

.owner-batch-invite-table table {
  min-width: 100%;
  table-layout: fixed;
}

.owner-batch-invite-table th,
.owner-batch-invite-table td {
  white-space: normal;
  vertical-align: top;
}

.owner-batch-invite-table th:nth-child(1),
.owner-batch-invite-table td:nth-child(1) {
  width: 34%;
}

.owner-batch-invite-table th:nth-child(2),
.owner-batch-invite-table td:nth-child(2) {
  width: 24%;
}

.owner-batch-invite-table th:nth-child(3),
.owner-batch-invite-table td:nth-child(3) {
  width: 24%;
}

.owner-batch-invite-table th:nth-child(4),
.owner-batch-invite-table td:nth-child(4) {
  width: 18%;
}

.owner-batch-invite-table td:nth-child(3) span + span {
  margin-top: var(--lugn-space-2);
  color: var(--muted);
  font-size: var(--lugn-text-sm);
}

.owner-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lugn-space-3);
  min-width: 150px;
}

.owner-row-actions .secondary-button {
  min-height: 34px;
  padding: var(--lugn-space-3) var(--lugn-space-4);
  border-radius: var(--lugn-radius-sm);
  font-size: var(--lugn-text-xs);
}

.owner-row-actions input {
  min-height: 34px;
  min-width: 72px;
  max-width: 104px;
  padding: var(--lugn-space-3) var(--lugn-space-4);
  border-radius: var(--lugn-radius-sm);
  font-size: var(--lugn-text-sm);
}

.owner-row-actions input[data-tenant-lifecycle-reason] {
  max-width: 168px;
}

.owner-row-actions input[data-billing-currency] {
  max-width: 58px;
  text-transform: uppercase;
}

.owner-attention-header {
  margin-bottom: var(--lugn-space-4);
}

.owner-attention-metrics .metric strong {
  overflow-wrap: anywhere;
}

.owner-attention-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--lugn-space-3);
  margin: var(--lugn-space-4) 0 var(--lugn-space-5);
}

.owner-attention-category {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--lugn-space-1) var(--lugn-space-3);
  align-items: center;
  min-width: 0;
  padding: var(--lugn-space-3) var(--lugn-space-4);
  border: 1px solid var(--lugn-hairline);
  border-left: 3px solid var(--lugn-border-strong);
  border-radius: var(--lugn-radius);
  background: var(--surface-muted);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.owner-attention-category:hover,
.owner-attention-category:focus-visible,
.owner-attention-category.selected {
  border-color: color-mix(in srgb, var(--lugn-ink-secondary) 28%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lugn-ink-secondary) 6%, transparent);
}

.owner-attention-category.danger {
  border-left-color: var(--danger);
}

.owner-attention-category.warning {
  border-left-color: var(--warning);
}

.owner-attention-category.success {
  border-left-color: var(--accent);
}

.owner-attention-category span,
.owner-attention-category strong,
.owner-attention-category em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-attention-category span {
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.owner-attention-category strong {
  justify-self: end;
  font-size: 18px;
  line-height: 1;
}

.owner-attention-category em {
  grid-column: 1 / -1;
  color: var(--lugn-ink-secondary);
  font-size: var(--lugn-text-xs);
  font-style: normal;
}

.owner-attention-breakdown-empty {
  align-self: center;
  color: var(--lugn-ink-secondary);
  font-size: var(--lugn-text-sm);
}

.owner-attention-table table {
  min-width: 980px;
}

.owner-attention-table td:nth-child(4) {
  max-width: 380px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.owner-attention-table td:nth-child(5) {
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
}

.owner-activity-metrics .metric strong {
  overflow-wrap: anywhere;
}

.owner-activity-table table {
  min-width: 860px;
}

.owner-activity-table td:nth-child(4) {
  max-width: 360px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.owner-activity-table td:nth-child(5) {
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
}

.owner-billing-remediation table {
  min-width: 820px;
}

.owner-billing-remediation td:first-child span {
  display: block;
  margin-top: 4px;
  max-width: 520px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.owner-billing-remediation td:nth-child(3) {
  font-family: var(--font-mono);
  font-size: var(--lugn-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.owner-billing-remediation .secondary-button {
  white-space: nowrap;
}

.panel-subsection {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.panel-header.compact h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
}

.panel-header.compact p {
  max-width: 660px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.owner-operations-remediation table {
  min-width: 820px;
}

.owner-operations-remediation td:first-child span {
  display: block;
  margin-top: 4px;
  max-width: 560px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.owner-operations-remediation td:nth-child(3) {
  font-family: var(--font-mono);
  font-size: var(--lugn-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.owner-operations-remediation .secondary-button {
  white-space: nowrap;
}

.owner-continuity-remediation table,
.owner-continuity-table table {
  table-layout: fixed;
  min-width: 0;
}

.owner-continuity-remediation th,
.owner-continuity-remediation td,
.owner-continuity-table th,
.owner-continuity-table td {
  white-space: normal;
  vertical-align: top;
}

.owner-continuity-remediation th:nth-child(1),
.owner-continuity-remediation td:nth-child(1) {
  width: 58%;
}

.owner-continuity-remediation th:nth-child(2),
.owner-continuity-remediation td:nth-child(2) {
  width: 92px;
}

.owner-continuity-remediation th:nth-child(3),
.owner-continuity-remediation td:nth-child(3) {
  width: 22%;
}

.owner-continuity-remediation th:nth-child(4),
.owner-continuity-remediation td:nth-child(4) {
  width: 128px;
}

.owner-continuity-remediation td:first-child > span,
.owner-continuity-table td:first-child > span,
.owner-continuity-table td:nth-child(3) > span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.owner-continuity-remediation .secondary-button,
.owner-continuity-table .secondary-button {
  max-width: 100%;
  white-space: normal;
  line-height: 1.2;
}

.owner-continuity-table th:nth-child(1),
.owner-continuity-table td:nth-child(1) {
  width: 28%;
}

.owner-continuity-table th:nth-child(2),
.owner-continuity-table td:nth-child(2) {
  width: 96px;
}

.owner-continuity-table th:nth-child(4),
.owner-continuity-table td:nth-child(4) {
  width: 132px;
}

.owner-identity-metrics .metric strong {
  overflow-wrap: anywhere;
}

.owner-identity-table table {
  min-width: 860px;
}

.owner-identity-table td:nth-child(3),
.owner-identity-table td:nth-child(4),
.owner-identity-table td:nth-child(5),
.owner-identity-table td:nth-child(6) {
  font-family: var(--font-mono);
  font-size: var(--lugn-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.owner-identity-remediation table {
  min-width: 820px;
}

.owner-identity-remediation td:first-child span {
  display: block;
  margin-top: 4px;
  max-width: 520px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.owner-identity-remediation td:nth-child(3) {
  font-family: var(--font-mono);
  font-size: var(--lugn-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.owner-identity-remediation .secondary-button {
  white-space: nowrap;
}

.owner-process-metrics .metric strong {
  overflow-wrap: anywhere;
}

.owner-process-metrics .metric strong.success {
  color: var(--success);
}

.owner-process-metrics .metric strong.warning {
  color: var(--warning);
}

.owner-process-metrics .metric strong.danger {
  color: var(--danger);
}

.owner-process-scale-detail {
  margin: 12px 0 0;
  max-width: 900px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.owner-process-table table {
  min-width: 900px;
}

.owner-process-table td:nth-child(3),
.owner-process-table td:nth-child(4),
.owner-process-table td:nth-child(5) {
  font-family: var(--font-mono);
  font-size: var(--lugn-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.owner-process-table td:nth-child(6) {
  color: var(--muted);
  font-size: var(--lugn-text-sm);
  white-space: nowrap;
}

.owner-operator-table table {
  min-width: 980px;
}

.owner-operator-table td:nth-child(3),
.owner-operator-table td:nth-child(4),
.owner-operator-table td:nth-child(5),
.owner-operator-table td:nth-child(6) {
  font-family: var(--font-mono);
  font-size: var(--lugn-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.owner-operator-table td:nth-child(7) {
  white-space: normal;
}

.owner-billing-table {
  overflow-x: auto;
}

.owner-billing-table table {
  min-width: 1040px;
  table-layout: fixed;
}

.owner-billing-table th:nth-child(1),
.owner-billing-table td:nth-child(1) {
  width: 14%;
}

.owner-billing-table th:nth-child(2),
.owner-billing-table td:nth-child(2) {
  width: 7%;
}

.owner-billing-table th:nth-child(3),
.owner-billing-table td:nth-child(3) {
  width: 9%;
}

.owner-billing-table th:nth-child(4),
.owner-billing-table td:nth-child(4) {
  width: 10%;
}

.owner-billing-table th:nth-child(5),
.owner-billing-table td:nth-child(5),
.owner-billing-table th:nth-child(6),
.owner-billing-table td:nth-child(6) {
  width: 14%;
}

.owner-billing-table th:nth-child(7),
.owner-billing-table td:nth-child(7) {
  width: 14%;
}

.owner-billing-table th:nth-child(8),
.owner-billing-table td:nth-child(8) {
  width: 6%;
}

.owner-billing-table th:nth-child(9),
.owner-billing-table td:nth-child(9) {
  width: 7%;
}

.owner-billing-table td {
  vertical-align: top;
  white-space: normal;
}

.owner-billing-table select,
.owner-billing-table input[type="datetime-local"],
.owner-billing-table input[inputmode="decimal"],
.owner-billing-table input[data-billing-currency],
.owner-billing-table textarea {
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
}

.owner-billing-table input[type="checkbox"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
}

.owner-billing-table .owner-row-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 6px;
  min-width: 0;
}

.owner-billing-table [data-billing-save] {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

.owner-operations-metrics .metric strong {
  overflow-wrap: anywhere;
}

.owner-operations-table table {
  min-width: 1120px;
}

.owner-operations-table td:nth-child(3),
.owner-operations-table td:nth-child(5),
.owner-operations-table td:nth-child(6),
.owner-operations-table td:nth-child(7) {
  font-family: var(--font-mono);
  font-size: var(--lugn-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.owner-operations-table td:nth-child(8) {
  white-space: normal;
}

.owner-shell select,
.owner-shell input[type="datetime-local"] {
  min-height: 34px;
  max-width: 180px;
  padding: var(--lugn-space-3) var(--lugn-space-4);
  border-radius: var(--lugn-radius-sm);
  font-size: var(--lugn-text-sm);
}

.launch-gate-summary,
.app-build-summary,
.alpha-operating-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
}

.app-build-summary {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1.2fr) auto;
  align-items: start;
}

.alpha-operating-summary {
  grid-template-columns: minmax(0, 1fr);
}

.launch-operations-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) auto;
  gap: 12px;
  align-items: start;
  min-width: 0;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
}

.launch-operations-summary > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.launch-operations-summary strong {
  color: var(--text);
  font-size: 14px;
}

.launch-operations-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.launch-operations-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.launch-operations-metrics div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.launch-operations-metrics span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.launch-operations-metrics strong {
  font-size: 16px;
}

.launch-operations-table {
  margin-bottom: 14px;
}

.public-signup-prerequisite-matrix {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
}

.public-signup-prerequisite-matrix .panel-header {
  margin: 0;
}

.public-signup-prerequisite-matrix table {
  min-width: 1040px;
  table-layout: fixed;
}

.public-signup-prerequisite-matrix th,
.public-signup-prerequisite-matrix td {
  white-space: normal;
  vertical-align: top;
}

.public-signup-prerequisite-matrix th:nth-child(1),
.public-signup-prerequisite-matrix td:nth-child(1) {
  width: 24%;
}

.public-signup-prerequisite-matrix th:nth-child(2),
.public-signup-prerequisite-matrix td:nth-child(2) {
  width: 110px;
}

.public-signup-prerequisite-matrix th:nth-child(3),
.public-signup-prerequisite-matrix td:nth-child(3) {
  width: 23%;
}

.public-signup-prerequisite-matrix th:nth-child(4),
.public-signup-prerequisite-matrix td:nth-child(4) {
  width: 26%;
}

.public-signup-prerequisite-matrix td:first-child span,
.public-signup-prerequisite-matrix td:nth-child(4) span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.public-signup-remediation {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
}

.public-signup-remediation .panel-header {
  margin: 0;
}

.public-signup-remediation table {
  min-width: 980px;
  table-layout: fixed;
}

.public-signup-remediation th,
.public-signup-remediation td {
  white-space: normal;
  vertical-align: top;
}

.public-signup-remediation th:nth-child(1),
.public-signup-remediation td:nth-child(1) {
  width: 34%;
}

.public-signup-remediation th:nth-child(2),
.public-signup-remediation td:nth-child(2) {
  width: 110px;
}

.public-signup-remediation th:nth-child(4),
.public-signup-remediation td:nth-child(4) {
  width: 28%;
}

.launch-operations-table table {
  width: 100%;
  max-width: 100%;
  min-width: min(100%, 1080px);
  table-layout: fixed;
}

.launch-operations-table th,
.launch-operations-table td {
  white-space: normal;
  vertical-align: top;
}

.launch-operations-table th:nth-child(1),
.launch-operations-table td:nth-child(1) {
  width: 20%;
}

.launch-operations-table th:nth-child(2),
.launch-operations-table td:nth-child(2) {
  width: 10%;
}

.launch-operations-table th:nth-child(3),
.launch-operations-table td:nth-child(3) {
  width: 18%;
}

.launch-operations-table th:nth-child(4),
.launch-operations-table td:nth-child(4) {
  width: 39%;
}

.launch-operations-table th:nth-child(5),
.launch-operations-table td:nth-child(5) {
  width: 13%;
}

.launch-operations-table td:first-child span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.launch-operations-table td:nth-child(3),
.launch-operations-table td:nth-child(4) {
  max-width: none;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.launch-operations-table td:nth-child(5) {
  text-align: right;
}

.launch-operations-table .secondary-button {
  min-height: 30px;
  padding: 6px 9px;
  font-size: 11px;
  white-space: nowrap;
}

.launch-operations-table td:nth-child(5) .secondary-button {
  max-width: 100%;
  white-space: normal;
  line-height: 1.2;
}

.launch-operation-commands,
.owner-runbook-commands {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin-top: 8px;
}

.launch-operation-prerequisites,
.owner-runbook-prerequisites {
  display: grid;
  gap: 5px;
  min-width: 0;
  margin-top: 8px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--lugn-ink) 8%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--lugn-surface) 72%, transparent);
}

.launch-operation-prerequisites strong,
.owner-runbook-prerequisites strong {
  color: var(--text);
  font-size: 11px;
}

.launch-operation-prerequisites ul,
.owner-runbook-prerequisites ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 16px;
}

.launch-operation-prerequisites li,
.owner-runbook-prerequisites li {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.launch-operation-command,
.owner-runbook-command {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--lugn-ink) 10%, transparent);
  border-radius: 8px;
  background: var(--surface-muted);
}

.launch-operation-command strong,
.owner-runbook-command strong {
  color: var(--text);
  font-size: 11px;
}

.launch-operation-command code,
.owner-runbook-command code {
  display: block;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.launch-operation-command .secondary-button,
.owner-runbook-command .secondary-button {
  justify-self: start;
  margin-top: 2px;
}

.launch-gate-summary > div:first-child,
.app-build-summary > div:first-child,
.alpha-operating-summary-head {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.alpha-operating-summary-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.launch-gate-summary strong,
.app-build-summary strong,
.alpha-operating-summary strong {
  font-size: 15px;
}

.launch-gate-summary p,
.app-build-summary p,
.alpha-operating-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.launch-gate-summary dl,
.app-build-summary dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.app-build-summary dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.launch-gate-summary dl div,
.app-build-summary dl div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.launch-gate-summary dt,
.app-build-summary dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.launch-gate-summary dd,
.app-build-summary dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.app-build-summary code {
  font-size: 12px;
}

.app-build-features {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 7px;
  min-width: 0;
}

.app-build-features .status-pill {
  min-height: 24px;
  font-size: 11px;
}

.alpha-operating-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
}

.alpha-operating-item {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  min-height: 128px;
  padding: 12px;
  border-right: 1px solid var(--border);
}

.alpha-operating-item:last-child {
  border-right: 0;
}

.alpha-operating-item .status-pill {
  justify-self: start;
}

.alpha-operating-item p {
  font-size: 11px;
}

.launch-gate-summary .secondary-button {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 11px;
}

.public-signup-gate-checklist {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
}

.public-signup-gate-checklist-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.public-signup-gate-checklist-head div,
.public-signup-gate-row header div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.public-signup-gate-checklist-head strong,
.public-signup-gate-row strong {
  font-size: 14px;
}

.public-signup-gate-checklist-head span,
.public-signup-gate-row header span {
  color: var(--muted);
  font-size: 12px;
}

.public-signup-gate-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.public-signup-gate-row {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.public-signup-gate-row header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.public-signup-gate-row dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.public-signup-gate-row dl div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.public-signup-gate-row dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.public-signup-gate-row dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}

.public-signup-gate-row .secondary-button {
  justify-self: start;
  min-height: 32px;
  padding: 7px 10px;
  font-size: 11px;
}

.runtime-gate-playbook {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

/* De-carded to the canonical soft-callout (design §2): it IS a gated runtime
   aside, so it keeps a soft var(--lugn-sunken) fill at var(--lugn-radius-sm)
   with NO four-edge border and NO shadow — structure from the fill + whitespace,
   not a bordered card. */
.runtime-gate-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: var(--lugn-space-5);
  border: 0;
  border-radius: var(--lugn-radius-sm);
  background: var(--lugn-sunken);
}

.runtime-gate-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.runtime-gate-card header div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.runtime-gate-card h3 {
  margin: 0;
  font-size: 13px;
  line-height: 1.25;
}

.runtime-gate-card header span:not(.status-pill),
.runtime-gate-card p,
.runtime-gate-card dd,
.runtime-gate-doc-link {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.runtime-gate-card p,
.runtime-gate-card dl,
.runtime-gate-card dd {
  margin: 0;
}

.runtime-gate-evidence-warning {
  display: block;
  margin-top: 4px;
  color: var(--danger);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.runtime-gate-card dl {
  display: grid;
  gap: 8px;
}

.runtime-gate-card dt {
  margin-bottom: 2px;
  color: var(--text);
  font-size: var(--lugn-text-label);
  font-weight: 600;
}

.runtime-gate-commands {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--lugn-ink) 12%, transparent);
  border-radius: 8px;
  background: var(--lugn-surface);
}

.runtime-gate-commands > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.runtime-gate-command {
  display: grid;
  grid-template-columns: minmax(110px, 0.3fr) minmax(0, 1fr) auto;
  gap: 6px 8px;
  align-items: center;
  min-width: 0;
  padding-top: 7px;
  border-top: 1px solid color-mix(in srgb, var(--lugn-ink) 8%, transparent);
}

.runtime-gate-command:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.runtime-gate-command strong {
  color: var(--text);
  font-size: 11px;
  line-height: 1.25;
}

.runtime-gate-command code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 11px;
  line-height: 1.35;
}

.runtime-gate-command .secondary-button {
  min-height: 30px;
  padding: 6px 9px;
  font-size: 11px;
}

.runtime-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.runtime-gate-actions .secondary-button {
  min-height: 32px;
  padding: 7px 10px;
  font-size: 11px;
}

.runtime-gate-reset-button {
  margin-top: 7px;
  min-height: 30px;
  padding: 6px 9px;
  font-size: 11px;
}

.runtime-gate-doc-link {
  justify-self: start;
  font-weight: 600;
}

.runtime-gate-table {
  margin-top: 14px;
}

/* Metric / stat tile (design §3) — the shared foundation owner.html links
   directly. ONE borderless divider-grid: structure from a hairline grid (one
   border-top + a border-right between tiles), never a per-tile bordered/filled
   card. `--metric-cols` (default 3) holds the owner 3-col strips; a wider strip
   sets its own `--metric-cols`. Tokens only (STYLES_BUDGET 0). */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(var(--metric-cols, 3), minmax(0, 1fr));
  border-top: var(--lugn-divider) solid var(--lugn-hairline);
}

.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;
}

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

.metric span {
  color: var(--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;
}

.metric strong {
  color: var(--text);
  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;
}

.lead-panel {
  border-color: color-mix(in srgb, var(--lugn-action) 24%, transparent);
}

.access-panel {
  min-width: 0;
  align-self: center;
  justify-self: end;
  width: min(100%, 430px);
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--lugn-ink) 14%, transparent);
  border-radius: 8px;
  background: var(--lugn-surface);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--lugn-ink) 14%, transparent);
}

.is-public-landing .access-panel {
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  padding: 20px;
}

body:not(.is-public-landing) .access-panel {
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  box-shadow: none;
}

body:not(.is-public-landing) .access-panel .auth-layout {
  grid-template-columns: minmax(0, 1fr);
}

.access-mode-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.access-mode-switcher[hidden] {
  display: none;
}

.access-mode-switcher button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.access-mode-switcher button:hover,
.access-mode-switcher button.is-active {
  border-color: color-mix(in srgb, var(--lugn-action) 20%, transparent);
  background: var(--lugn-surface);
  color: var(--accent-strong);
}

.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1fr);
  gap: 22px;
  align-items: stretch;
  min-height: min(520px, calc(100vh - 150px));
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--lugn-ink) 12%, transparent);
  border-radius: 8px;
  background: var(--lugn-surface);
  color: var(--text);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.landing-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  width: 100%;
  min-width: 0;
  max-width: 680px;
  padding: 4px 0;
}

.landing-copy h1 {
  min-width: 0;
  width: 100%;
  max-width: 560px;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 52px;
  line-height: 1;
  font-weight: 600;
}

.landing-copy h1 span {
  display: block;
  max-width: 100%;
}

.landing-copy p {
  min-width: 0;
  max-width: 540px;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.landing-actions .secondary-button {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
}

.access-panel .panel-header p {
  margin-top: 5px;
  max-width: 360px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.launch-readiness {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.15fr);
  gap: 12px;
  align-items: stretch;
  margin: 12px 0 16px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--lugn-action) 14%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--lugn-canvas) 78%, transparent);
}

.launch-readiness[hidden] {
  display: none;
}

.launch-readiness.workspace-start-readiness {
  border-color: color-mix(in srgb, var(--lugn-action) 20%, transparent);
  background: color-mix(in srgb, var(--lugn-action) 6%, transparent);
}

.launch-readiness.workspace-start-readiness mark.ready {
  min-width: 48px;
}

.launch-readiness-copy {
  display: grid;
  gap: 5px;
  align-content: center;
}

.launch-readiness-copy strong {
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0;
}

.launch-readiness-copy span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.launch-readiness ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.launch-readiness li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--lugn-action) 12%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--lugn-surface) 70%, transparent);
}

.launch-readiness li span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.launch-readiness li strong {
  color: var(--ink);
  font-size: 11.5px;
  line-height: 1.2;
}

.launch-readiness li em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.launch-readiness mark {
  min-width: 58px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.launch-readiness mark.ready {
  background: color-mix(in srgb, var(--lugn-action) 12%, transparent);
  color: var(--accent-strong);
}

.launch-readiness mark.pending {
  background: color-mix(in srgb, var(--lugn-warning-fg) 13%, transparent);
  color: var(--lugn-warning-fg);
}

.auth-assurance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.auth-assurance span {
  min-height: 38px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--lugn-action) 18%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--lugn-action) 7%, transparent);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.panel.access-panel {
  border-color: color-mix(in srgb, var(--lugn-ink) 14%, transparent);
}

.auth-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

.is-public-landing .access-panel .auth-layout {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.65fr);
}

.auth-notice {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--lugn-action) 22%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--lugn-action) 8%, transparent);
  color: var(--accent-strong);
  font-size: 12px;
  line-height: 1.45;
}

.auth-notice strong {
  color: var(--text);
  font-size: 13px;
}

.auth-form {
  display: grid;
  gap: 9px;
  min-width: 0;
}

#signupForm {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#signupForm h3,
#signupForm button {
  grid-column: 1 / -1;
}

#signinForm {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

#signinForm h3,
#signinForm button,
#signinForm .turnstile-widget {
  grid-column: 1 / -1;
}

.password-recovery-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--lugn-surface) 72%, transparent);
}

.password-recovery-form h3,
.password-recovery-form button,
.password-recovery-form .turnstile-widget {
  grid-column: 1 / -1;
}

.access-request-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--lugn-action) 22%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--lugn-action) 6%, transparent);
}

.access-request-form h3,
.access-request-form button,
.access-request-form .full-span {
  grid-column: 1 / -1;
}

.turnstile-widget {
  grid-column: 1 / -1;
  min-height: 65px;
}

.turnstile-widget[hidden] {
  display: none;
}

.auth-form.compact {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: end;
}

.auth-form.compact h3 {
  grid-column: 1 / -1;
}

.auth-form h3 {
  margin: 0;
  font-size: 14px;
}

.auth-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.auth-form input,
.auth-form select,
.auth-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
  color: var(--text);
}

.auth-form input,
.auth-form select {
  min-height: 36px;
  padding: 0 11px;
}

.auth-form textarea {
  min-height: 76px;
  padding: 9px 11px;
  resize: vertical;
  line-height: 1.45;
}

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

.session-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.session-box div {
  display: grid;
  gap: 4px;
}

.session-box span {
  color: var(--muted);
  font-size: 12px;
}

.topbar-session {
  min-height: 38px;
  padding: 6px 7px 6px 10px;
  border-color: color-mix(in srgb, var(--lugn-action) 20%, transparent);
  background: color-mix(in srgb, var(--lugn-action) 6%, transparent);
}

.session-avatar,
.profile-avatar-preview {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--lugn-action) 22%, transparent);
  border-radius: 999px;
  background: var(--lugn-surface);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 600;
}

.session-avatar img,
.profile-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topbar-session strong {
  max-width: 220px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-session span {
  max-width: 220px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-session .secondary-button {
  min-height: 30px;
  padding: 0 9px;
  font-size: 11px;
}

.settings-panel {
  display: grid;
  gap: 16px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.settings-form,
.settings-disclosure {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
}

.settings-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.settings-form-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-form-heading h3,
.settings-disclosure h3 {
  margin: 0;
  font-size: 15px;
}

.settings-form-heading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.profile-avatar-preview {
  width: 46px;
  height: 46px;
  font-size: 14px;
}

.settings-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: var(--lugn-text-label);
  font-weight: 500;
}

.settings-form input,
.settings-form select,
.settings-form textarea {
  width: 100%;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
  color: var(--text);
}

/* Raise text controls to the 44px touch floor (was 36px) so settings
   inputs clear the WCAG 2.5.8 / touch-target rule like primary buttons.
   Checkbox/radio are excluded — their .checkbox-field <label> already
   carries the 44px hit area, so a 44px native box would only bloat it.
   A textarea floors its minimum height but is free to grow taller. */
.settings-form input:not([type="checkbox"]):not([type="radio"]),
.settings-form select {
  min-height: var(--v2-control-height-touch);
}

.settings-form textarea {
  min-height: var(--v2-control-height-touch);
  padding-block: 8px;
}

.settings-form input[readonly] {
  background: var(--surface-muted);
  color: var(--muted);
}

.settings-form .wide-field {
  grid-column: 1 / -1;
}

.settings-form button {
  justify-self: start;
}

.settings-disclosure > summary.panel-header {
  margin-bottom: 0;
  cursor: pointer;
  list-style: none;
}

.settings-disclosure > summary.panel-header::-webkit-details-marker {
  display: none;
}

.settings-disclosure[open] > summary.panel-header {
  margin-bottom: 14px;
}

/* Destructive zone — the Archive workspace disclosure (.settings-disclosure
   .danger-zone). Without this it renders as a neutral panel and reads like
   any other export control. We give it a restrained danger-tinted frame and
   header so the boundary between "reversible export" and "deactivate the
   org" is unmistakable, while keeping the action itself token-driven. */
.danger-zone {
  border-color: color-mix(in srgb, var(--lugn-danger-fg) 38%, var(--border));
  background: color-mix(in srgb, var(--lugn-danger-bg) 45%, var(--lugn-surface));
}

/* A danger accent rail along the leading edge makes the zone scannable
   from the neutral audit-export controls directly above it. */
.danger-zone > summary.panel-header {
  padding-left: var(--lugn-space-4);
  border-left: 3px solid var(--lugn-danger-fg);
}

.danger-zone h3 {
  color: var(--lugn-danger-fg);
}

.danger-zone > summary.panel-header p {
  color: var(--lugn-ink-secondary);
}

/* Confirm region — visually separated from the explanatory header so the
   irreversible-feeling slug/reason inputs and the solid danger submit read
   as a deliberate, distinct commit step rather than an inline edit. */
.danger-zone .archive-workspace-form {
  margin-top: var(--lugn-space-4);
  padding: var(--lugn-space-4);
  border: 1px solid color-mix(in srgb, var(--lugn-danger-fg) 28%, transparent);
  border-radius: var(--lugn-radius);
  background: color-mix(in srgb, var(--lugn-surface) 80%, transparent);
}

.danger-zone .archive-workspace-form input {
  border-color: color-mix(in srgb, var(--lugn-danger-fg) 32%, var(--border));
}

.danger-zone .archive-workspace-form input:focus-visible {
  border-color: var(--lugn-danger-fg);
  outline-color: var(--lugn-danger-fg);
}

/* Sign-in hierarchy — OAuth providers are the canonical path; the e-post
   fallback toggle below them is the outline/transparent secondary. The base
   .oauth-button.is-primary (v2.css) is a transparent outline, identical to
   the email toggle, so the two paths read as equals. Scoping under
   .primary-auth-providers (specificity 0,3,0) outranks that 0,2,0 rule and
   promotes providers to a solid white/surface button: filled surface, ink
   text, a real control border — the standard provider-button convention —
   so they clearly outrank the still-outline email fallback. (44px floor,
   hover/active/focus and disabled state stay owned by the v2.css matrix.) */
.primary-auth-providers .oauth-button.is-primary {
  background: var(--lugn-surface);
  border: 1px solid var(--lugn-control-border);
  color: var(--lugn-ink);
  box-shadow: var(--lugn-elevation-1);
}

.primary-auth-providers .oauth-button.is-primary:hover,
.primary-auth-providers .oauth-button.is-primary:focus-visible {
  background: color-mix(in srgb, var(--lugn-ink) 5%, var(--lugn-surface));
  border-color: var(--lugn-ink);
}

/* Keep the brand glyph legible against the now-filled surface and stop the
   coming-soon / disabled providers from looking falsely actionable. */
.primary-auth-providers .oauth-button.is-primary .oauth-button-icon {
  border-color: var(--lugn-control-border);
}

.primary-auth-providers .oauth-button.is-primary.is-coming-soon,
.primary-auth-providers .oauth-button.is-primary:disabled {
  background: color-mix(in srgb, var(--lugn-surface) 70%, transparent);
  box-shadow: none;
}

.team-setup-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(300px, 1.15fr);
  gap: 14px;
  align-items: start;
}

.team-member-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.team-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.team-member-row div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.team-member-row strong,
.team-member-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.team-member-row strong {
  font-size: 12px;
}

.team-member-row div > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.team-current-user {
  margin-left: 8px;
  color: var(--accent-strong);
}

.team-member-form {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(120px, 0.5fr) minmax(120px, 0.5fr);
  gap: 10px;
  align-items: end;
}

.team-member-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: var(--lugn-text-label);
  font-weight: 500;
}

.team-member-form input,
.team-member-form select {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
  color: var(--text);
}

.team-member-form button {
  justify-self: start;
}

.lead-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.lead-content strong {
  display: block;
  max-width: 760px;
  font-size: 18px;
  line-height: 1.35;
}

.lead-content p {
  max-width: 760px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.setup-runway {
  display: grid;
  gap: 14px;
}

/* First-hour rollout focus — de-carded to a soft-sunken callout with the
   restrained 2px left ink attention rule (design §2 callout--attention),
   replacing the accent-tinted border + accent wash. */
.setup-runway-summary {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(200px, 0.44fr);
  gap: 14px;
  align-items: center;
  padding: var(--lugn-space-5);
  border: 0;
  border-inline-start: var(--lugn-space-1) solid var(--lugn-action);
  border-radius: 0;
  background: var(--lugn-sunken);
  box-shadow: none;
}

.setup-runway-summary strong {
  display: block;
  margin-bottom: 5px;
  font-size: 17px;
  line-height: 1.25;
}

.setup-runway-summary span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.setup-runway-meter {
  display: grid;
  gap: 7px;
  min-width: 0;
}

/* Setup-runway readiness bar — onto the canonical 4px ink-pill <progress>
   recipe (design §4): borderless, sunken track, ink value, pill radius. */
.setup-runway-meter progress {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border: 0;
  border-radius: var(--lugn-radius-pill);
  background: var(--lugn-sunken);
  appearance: none;
}

.setup-runway-meter progress::-webkit-progress-bar {
  border-radius: inherit;
  background: var(--lugn-sunken);
}

.setup-runway-meter progress::-webkit-progress-value {
  min-width: 2px;
  border-radius: inherit;
  background: var(--lugn-action);
}

.setup-runway-meter progress::-moz-progress-bar {
  min-width: 2px;
  border-radius: inherit;
  background: var(--lugn-action);
}

.setup-runway-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* Setup-runway stage tile — de-carded onto the soft-callout treatment
   (design §2): the bordered surface card becomes a soft-sunken tile at
   radius-sm, no border, no shadow. State no longer paints a coloured box —
   it is carried by the step-number chip + the status-pill WORD already in
   the markup; an in-flight/completed stage gains only a restrained 2px left
   ink rule (the callout--attention cue), never a saturated fill. */
.setup-runway-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  padding: var(--lugn-space-4);
  border: 0;
  border-radius: var(--lugn-radius-sm);
  background: var(--lugn-sunken);
  box-shadow: none;
}

.setup-runway-card.completed,
.setup-runway-card.in_progress {
  border-inline-start: var(--lugn-space-1) solid var(--lugn-action);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.setup-runway-step {
  display: grid;
  place-items: center;
  width: 28px;
  height: 32px;
  border: 1px solid var(--lugn-hairline);
  border-radius: var(--lugn-radius-pill);
  background: var(--lugn-surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.setup-runway-card-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.setup-runway-card-main header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.setup-runway-card-main strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.setup-runway-card-main p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.setup-runway-action {
  grid-column: 2;
  justify-self: start;
}

.setup-runway-card > .setup-action-control {
  grid-column: 2;
  min-width: 0;
}

.architecture-spine {
  display: grid;
  gap: 12px;
}

.architecture-spine-summary {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 0.32fr);
  gap: 14px;
  align-items: center;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--border);
}

.architecture-spine-summary strong {
  display: block;
  margin-bottom: 5px;
  font-size: 17px;
  line-height: 1.25;
}

.architecture-spine-summary span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.architecture-spine-meter {
  display: grid;
  gap: 7px;
  min-width: 0;
  justify-items: stretch;
}

.architecture-spine-meter > span {
  justify-self: end;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

/* Operating-spine readiness bar — onto the canonical 4px ink-pill <progress>
   recipe (design §4): borderless, sunken track, ink value, pill radius. */
.architecture-spine-meter progress {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border: 0;
  border-radius: var(--lugn-radius-pill);
  background: var(--lugn-sunken);
  appearance: none;
}

.architecture-spine-meter progress::-webkit-progress-bar {
  border-radius: inherit;
  background: var(--lugn-sunken);
}

.architecture-spine-meter progress::-webkit-progress-value {
  min-width: 2px;
  border-radius: inherit;
  background: var(--lugn-action);
}

.architecture-spine-meter progress::-moz-progress-bar {
  min-width: 2px;
  border-radius: inherit;
  background: var(--lugn-action);
}

.architecture-spine-track {
  position: relative;
  display: grid;
  gap: 0;
}

.architecture-spine-track::before {
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 8px;
  width: 1px;
  background: var(--border);
  content: "";
}

.architecture-spine-item {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  min-height: 68px;
  padding: 8px 0;
}

.architecture-spine-node {
  position: relative;
  z-index: 1;
  width: 17px;
  height: 17px;
  border: 2px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.architecture-spine-item.ready .architecture-spine-node {
  border-color: var(--accent);
  background: var(--accent);
}

.architecture-spine-item.active .architecture-spine-node {
  border-color: var(--warning);
  background: var(--lugn-surface);
}

.architecture-spine-item.blocked .architecture-spine-node {
  border-color: var(--danger);
  background: var(--lugn-surface);
}

.architecture-spine-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.architecture-spine-copy header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.architecture-spine-copy strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.architecture-spine-copy div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  min-width: 0;
}

.architecture-spine-copy div > span {
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.architecture-spine-copy p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.architecture-spine-action {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
  white-space: nowrap;
}

.journey-command-center {
  display: grid;
  gap: 16px;
}

.journey-overview {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.7fr) auto;
  gap: 16px;
  align-items: center;
}

.journey-overview strong {
  display: block;
  margin-bottom: 6px;
  font-size: 18px;
}

.journey-overview span {
  color: var(--muted);
  font-size: 13px;
}

.journey-progress {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  appearance: none;
}

.journey-progress::-webkit-progress-bar {
  border-radius: inherit;
  background: var(--surface-muted);
}

.journey-progress::-webkit-progress-value {
  min-width: 2px;
  border-radius: inherit;
  background: var(--accent);
}

.journey-progress::-moz-progress-bar {
  min-width: 2px;
  border-radius: inherit;
  background: var(--accent);
}

.journey-action {
  min-width: 170px;
}

.journey-focus-gate {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(180px, 0.65fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--lugn-action) 20%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--lugn-action) 5%, transparent);
}

.journey-focus-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.journey-focus-main strong,
.journey-focus-evidence strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.journey-focus-main p,
.journey-focus-evidence span,
.journey-focus-evidence-list small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.journey-focus-evidence {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
}

.journey-focus-evidence-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.journey-focus-evidence-list span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
}

.journey-focus-evidence-list strong,
.journey-focus-evidence-list small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.journey-focus-evidence-list strong {
  font-size: 12px;
}

.journey-milestones {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 8px;
}

.journey-milestone {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 8px;
  align-items: center;
  min-height: 82px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.journey-milestone strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.journey-milestone > span:last-child {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

/* ------------------------------------------------------------
   (10) Tables — the `.data-table` foundation (design §10, slice S7).

   The canonical tabular primitive, formalized from the historical bare
   `table` + `th,td` block. `.table-wrap` stays the overflow + identity
   wrapper; `.data-table` is the named class a wrapper (or the table
   itself) opts into to get the foundation explicitly. The bare element
   selectors are KEPT so every existing table renders unchanged — the
   class is additive, never a rename — and the 11px/10px padding +
   13px/12px font-size literals are tokenized onto the 4/8 space scale
   and the type ramp (legacy ratchet, design §5).

   Owner-relevant placement: these rules live in styles.css (NOT
   primitives.css) because owner.html links styles.css directly and the
   owner console is where the data tables live. The NEW `.data-table`
   modifiers (compact density, sticky thead, sortable-header + selectable-
   row affordances) sit behind the @primitive fence below so the strict
   budget-0 gate (zero literals — design §5) guards them from day one.

   Sticky-thead constraint (landmine #6): `.table-wrap` provides
   `overflow-x` ONLY — never `overflow-y` — so a sticky `thead` sticks
   relative to #workspaceScroll and is not clipped by a nested scroll box.

   The responsive table→card collapse (styles.css, `td[data-label]` /
   `td::before`) is English-only per-surface markup and is intentionally
   NOT generalized here (landmine #15 / design §9): the foundation does
   not touch it, so no bilingual-parity gap propagates.
   ------------------------------------------------------------ */
.table-wrap {
  overflow-x: auto;
}

/* When a `.table-wrap` itself opts into `.data-table` (the S8 owner-console
   composition: the wrapper carries the canonical class alongside its historical
   `.owner-*-table` name), the foundation `min-width:620px` below is meant for the
   inner <table>, NOT the scroll wrapper. Re-floor the WRAPPER to 0 so it stays a
   proper overflow-x scroll container — including as a grid/flex item — instead of
   forcing a 620px track that blows the readiness view past the viewport. The
   inner <table> keeps its own min-width and scrolls inside. */
.table-wrap.data-table {
  min-width: 0;
}

table,
.data-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

th,
td,
.data-table th,
.data-table td {
  padding: var(--lugn-space-3) var(--lugn-space-4);
  border-bottom: var(--lugn-divider) solid var(--border);
  text-align: left;
  font-size: var(--lugn-font-compact-body);
  white-space: nowrap;
}

th,
.data-table th {
  color: var(--muted);
  font-size: var(--lugn-font-metadata);
  font-weight: var(--lugn-weight-semibold);
}

/* @primitive
   `.data-table` modifiers — STRICT (budget 0, design §5). Density, sticky
   header, sortable-header + selectable-row affordances. Token-only. */
.data-table--compact th,
.data-table--compact td {
  padding: var(--lugn-space-2) var(--lugn-space-3);
}

/* Sticky header — opt-in via `<thead class="is-sticky">`. Sticks relative to
   #workspaceScroll (the wrapper is overflow-x only, never overflow-y), with the
   sticky z-index role so it sits above scrolled body rows but below overlays. */
.data-table thead.is-sticky th {
  position: sticky;
  top: 0;
  z-index: var(--lugn-z-sticky);
  background: var(--lugn-surface);
}

/* Sortable-header affordance — `<th aria-sort="none|ascending|descending">`.
   Never colour-only: the sort direction is carried in the aria-sort value
   (screen-reader announced) and mirrored by a glyph slot the header text can
   pair with. The active (sorted) header gains a tinted surface + bolder ink. */
.data-table th[aria-sort] {
  cursor: pointer;
  user-select: none;
}

.data-table th[aria-sort="ascending"],
.data-table th[aria-sort="descending"] {
  color: var(--lugn-ink);
  background: var(--lugn-action-subtle);
}

.data-table th[aria-sort]:focus-visible {
  outline: var(--lugn-focus-ring-width) solid var(--lugn-focus-ring);
  outline-offset: calc(var(--lugn-focus-ring-offset) * -1);
}

/* Selectable rows — `<tr aria-selected="true">`. Tinted surface + a solid
   action-tint outline (not colour alone) marks the selection; the outline reads
   under forced-colors where the background tint would be flattened. */
.data-table tbody tr[aria-selected="true"] {
  background: var(--lugn-action-subtle);
  outline: var(--lugn-space-1) solid var(--lugn-action);
  outline-offset: calc(var(--lugn-space-1) * -1);
}
/* @end-primitive */

.provider-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
}

.tenant-provider-ledger {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.provider-card {
  display: grid;
  gap: 10px;
  min-height: 196px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
  transition: border-color 160ms var(--lugn-ease-standard), box-shadow 160ms var(--lugn-ease-standard);
}

.tenant-provider-row {
  grid-template-areas:
    "identity ledger ledger actions"
    "evidence evidence evidence actions"
    "config config config config";
  grid-template-columns:
    minmax(172px, 0.62fr)
    minmax(230px, 0.9fr)
    minmax(250px, 1fr)
    minmax(142px, 0.48fr);
  align-items: start;
  gap: 9px 12px;
  min-height: 0;
  padding: 12px;
}

.tenant-provider-row p {
  margin: 0;
}

.provider-card.attention {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lugn-action) 16%, transparent), var(--shadow);
}

.provider-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.provider-card h3 {
  min-width: 0;
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
}

.tenant-provider-row header {
  grid-area: identity;
}

.provider-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.provider-feed-ledger {
  grid-area: ledger;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--border);
}

.provider-feed-ledger div,
.provider-evidence-ledger div {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  min-height: 70px;
  padding: 9px;
  border-top: 3px solid var(--border);
  background: var(--lugn-canvas);
}

.provider-feed-ledger div.ready,
.provider-evidence-ledger div.ready {
  border-top-color: var(--accent);
}

.provider-feed-ledger div.planned,
.provider-evidence-ledger div.planned {
  border-top-color: var(--warning);
}

.provider-feed-ledger div.blocked,
.provider-evidence-ledger div.blocked {
  border-top-color: var(--danger);
}

.provider-feed-ledger span,
.provider-evidence-ledger span,
.provider-setup-brief strong,
.provider-setup-brief span,
.provider-dataset-scope legend {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
}

.provider-feed-ledger strong,
.provider-evidence-ledger strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}

.provider-feed-ledger small,
.provider-evidence-ledger small,
.provider-evidence-ledger li {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.provider-config-panel {
  grid-area: config;
  min-width: 0;
  padding-top: 2px;
}

.provider-config-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  cursor: pointer;
  list-style: none;
}

.provider-config-panel summary::-webkit-details-marker {
  display: none;
}

.provider-config-panel summary > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.provider-config-panel summary strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
}

.provider-config-panel summary small {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

.provider-config-panel summary em {
  flex: 0 0 auto;
  color: var(--accent-strong);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.provider-config-panel[open] summary {
  border-color: color-mix(in srgb, var(--lugn-action) 24%, transparent);
  background: color-mix(in srgb, var(--lugn-action) 6%, transparent);
}

.provider-config-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  padding-top: 8px;
}

.provider-setup-brief {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
}

.provider-setup-brief p,
.provider-setup-brief li {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.provider-setup-brief ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.provider-setup-brief li {
  max-width: 100%;
  padding: 3px 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-dataset-scope {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
}

.provider-dataset-scope div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.provider-dataset-scope label {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 32px;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--lugn-surface);
  color: var(--text);
  font-size: 11px;
  font-weight: 500;
}

.provider-read-policy {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.provider-dataset-scope input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent);
}

.provider-dataset-scope span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.provider-sync-defaults {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.provider-sync-defaults label {
  border-radius: 8px;
}

.provider-sync-defaults .provider-cadence-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 6px;
}

.provider-sync-defaults .provider-cadence-control span {
  overflow-wrap: normal;
  white-space: nowrap;
}

.provider-sync-defaults select {
  min-width: 0;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
  color: var(--text);
  font: inherit;
}

.provider-evidence-ledger {
  grid-area: evidence;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--border);
}

.provider-evidence-ledger div {
  min-height: 58px;
  padding: 8px;
}

.provider-evidence-ledger div:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.provider-evidence-ledger ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.provider-evidence-ledger li {
  -webkit-line-clamp: 1;
}

.provider-credential-form {
  display: grid;
  gap: 9px;
}

.provider-credential-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: var(--lugn-text-label);
  font-weight: 500;
}

.provider-credential-form input {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
  color: var(--text);
}

.procurement-setup-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.procurement-setup-tab {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.procurement-setup-tab:hover,
.procurement-setup-tab:focus-visible {
  border-color: color-mix(in srgb, var(--lugn-action) 32%, transparent);
  color: var(--text);
  outline: 0;
}

.procurement-setup-tab.is-active {
  border-color: color-mix(in srgb, var(--lugn-action) 42%, transparent);
  background: color-mix(in srgb, var(--lugn-action) 7%, transparent);
  color: var(--text);
}

.procurement-setup-tab span {
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.procurement-setup-tab strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.2;
}

.procurement-setup-note {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.procurement-setup-group {
  display: none;
}

.procurement-setup-group.is-active {
  display: grid;
  gap: 12px;
}

.procurement-setup-group[hidden] {
  display: none !important;
}

.master-data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: start;
}

.setup-data-form {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
  transition: border-color 160ms var(--lugn-ease-standard), box-shadow 160ms var(--lugn-ease-standard);
}

.setup-data-form.attention {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lugn-action) 16%, transparent), var(--shadow);
}

.setup-data-form h3 {
  margin: 0 0 2px;
  font-size: 14px;
}

.setup-data-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: var(--lugn-text-label);
  font-weight: 500;
}

.setup-data-form input,
.setup-data-form select {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
  color: var(--text);
}

.planning-import-form {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
}

.planning-import-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: var(--lugn-text-label);
  font-weight: 500;
}

.planning-import-form select,
.planning-import-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
  color: var(--text);
}

.planning-import-form select {
  min-height: 36px;
  padding: 0 10px;
}

.planning-import-form textarea {
  min-height: 88px;
  padding: 9px 10px;
  resize: vertical;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.planning-import-actions {
  display: grid;
  gap: 8px;
}

.workbench-list {
  display: grid;
  gap: 8px;
}

#onboardingList {
  display: grid;
  gap: 10px;
}

/* Workbench focus banner — de-carded base (design §2): soft-sunken callout
   with the 2px left ink attention rule rather than an accent-tinted box. The
   v2-shell override repaints this as an inset ink rule on canvas; this base
   keeps the same restrained language for any non-shell fallback render. */
.workbench-runway-focus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  min-width: 0;
  padding: var(--lugn-space-5);
  border: 0;
  border-inline-start: var(--lugn-space-1) solid var(--lugn-action);
  border-radius: 0;
  background: var(--lugn-sunken);
  box-shadow: none;
}

.workbench-runway-focus .workbench-status-actions {
  grid-column: 1 / -1;
}

.workbench-runway-track {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

/* Workbench rollout stage tile — de-carded onto the soft-callout treatment
   (design §2): the bordered card + loud 3px coloured top-rule become a
   soft-sunken tile at radius-sm. State is carried by the index chip + the
   <em> status WORD already in the markup; an in-flight/completed stage gains
   only the restrained 2px left ink rule, never a saturated edge. */
.workbench-runway-card {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  min-height: 128px;
  padding: var(--lugn-space-4);
  border: 0;
  border-radius: var(--lugn-radius-sm);
  background: var(--lugn-sunken);
  box-shadow: none;
}

.workbench-runway-card.completed,
.workbench-runway-card.in_progress {
  border-inline-start: var(--lugn-space-1) solid var(--lugn-action);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.workbench-runway-card > span {
  color: var(--lugn-muted);
  font-size: 11px;
  font-weight: 600;
}

.workbench-runway-card strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.workbench-runway-card p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.workbench-runway-card em {
  align-self: end;
  justify-self: start;
  padding: 3px 7px;
  border: 1px solid var(--lugn-hairline);
  border-radius: var(--lugn-radius-pill);
  background: var(--lugn-surface);
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

.workbench-operating-loop {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
  overflow: hidden;
  padding: 6px 0 0;
  border-top: 1px solid var(--border);
}

.workbench-operating-loop div {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  min-height: 44px;
  padding: 6px 10px 6px 0;
  border-top: 2px solid color-mix(in srgb, var(--lugn-action) 32%, transparent);
}

.workbench-operating-loop span {
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.workbench-operating-loop strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.2;
}

.workbench-operating-loop small {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.workbench-step-list {
  display: grid;
  gap: 8px;
}

.workbench-step-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.workbench-step-row > span:not(.status-pill) {
  grid-column: 1 / -1;
}

.workbench-item {
  display: grid;
  gap: 6px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
}

.workbench-item span {
  color: var(--muted);
  font-size: 12px;
}

.workbench-focus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--lugn-action) 20%, transparent);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--lugn-surface);
}

.workbench-focus.is-clear {
  border-color: var(--border);
  background: var(--lugn-surface);
}

.workbench-focus-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.workbench-focus-copy strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 15px;
  line-height: 1.25;
}

.workbench-focus-copy span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.32;
}

.workbench-focus-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.workbench-focus-meta span:not(.status-pill) {
  min-height: 22px;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--lugn-ink-secondary) 10%, transparent);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
}

.workbench-focus .workbench-status-actions {
  grid-column: 1 / -1;
}

.workbench-queue-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 5px;
}

.workbench-queue-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-content: center;
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.workbench-queue-button.is-active {
  border-color: color-mix(in srgb, var(--lugn-action) 42%, transparent);
  background: color-mix(in srgb, var(--lugn-action) 9%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.workbench-queue-button:hover,
.workbench-queue-button:focus-visible {
  border-color: color-mix(in srgb, var(--lugn-action) 36%, transparent);
  background: color-mix(in srgb, var(--lugn-action) 7%, transparent);
}

.workbench-queue-summary strong,
.workbench-queue-button strong {
  font-size: 12px;
}

.workbench-queue-summary span,
.workbench-queue-button span {
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.workbench-queue-summary small,
.workbench-queue-button small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.workbench-section {
  display: grid;
  min-width: 0;
  border-top: 1px solid var(--border);
}

.workbench-section-summary,
.workbench-item-rich > header,
.workbench-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.workbench-section-summary {
  justify-content: space-between;
  min-height: 42px;
  padding: 0;
  cursor: pointer;
  list-style: none;
}

.workbench-section-summary::-webkit-details-marker {
  display: none;
}

.workbench-section-summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.workbench-section-summary strong {
  font-size: 13px;
}

.workbench-section-summary span:not(.status-pill) {
  color: var(--muted);
  font-size: 11px;
}

.workbench-section[open] .workbench-section-summary {
  margin-bottom: 8px;
}

.workbench-section-body {
  display: grid;
  gap: 8px;
}

.workbench-item-rich > header {
  justify-content: space-between;
}

details.workbench-item {
  gap: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.workbench-item-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 50px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.workbench-item-summary::-webkit-details-marker {
  display: none;
}

.workbench-item-summary > span:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.workbench-item-summary strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}

.workbench-item-summary small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

details.workbench-item[open] .workbench-item-summary {
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--lugn-action) 4%, transparent);
}

.workbench-item-body {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px 12px 12px;
}

.workbench-status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.workbench-status-actions .setup-action-control {
  justify-items: stretch;
}

.workbench-action-strip {
  justify-self: start;
}

.workbench-command-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--lugn-ink-secondary) 14%, transparent);
  border-radius: 7px;
  background: var(--lugn-surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  transition: background 140ms var(--lugn-ease-standard), border-color 140ms var(--lugn-ease-standard), box-shadow 140ms var(--lugn-ease-standard), transform 140ms var(--lugn-ease-standard);
}

.workbench-command-button span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.workbench-command-button:hover,
.workbench-command-button:focus-visible {
  border-color: color-mix(in srgb, var(--lugn-action) 34%, transparent);
  background: color-mix(in srgb, var(--lugn-action) 6%, transparent);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--lugn-ink-secondary) 8%, transparent);
}

.workbench-command-button:active {
  transform: translateY(1px);
}

.workbench-command-button:disabled,
.workbench-command-button[aria-busy="true"] {
  cursor: progress;
  opacity: 0.72;
  transform: none;
}

.workbench-command-button.is-open {
  border-color: color-mix(in srgb, var(--lugn-action) 24%, transparent);
  color: var(--lugn-ink-secondary);
}

.workbench-command-button.is-progress,
.workbench-command-button.is-delegate,
.workbench-command-button.is-return {
  border-color: color-mix(in srgb, var(--lugn-action) 24%, transparent);
  background: color-mix(in srgb, var(--lugn-action) 6%, transparent);
  color: var(--lugn-ink-secondary);
}

.workbench-command-button.is-complete,
.workbench-command-button.is-approve {
  border-color: color-mix(in srgb, var(--lugn-action) 30%, transparent);
  background: color-mix(in srgb, var(--lugn-action) 8%, transparent);
  color: var(--accent-strong);
}

.workbench-command-button.is-reject {
  border-color: color-mix(in srgb, var(--lugn-danger-fg) 22%, transparent);
  background: color-mix(in srgb, var(--lugn-danger-fg) 6%, transparent);
  color: var(--lugn-danger-fg);
}

.workbench-meta {
  flex-wrap: wrap;
}

.workbench-meta span {
  min-height: 22px;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.workbench-task-row {
  gap: 7px;
}

.workbench-task-fields {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--lugn-canvas);
}

.workbench-task-field {
  position: relative;
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 38px;
  padding: 6px 8px;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.workbench-task-field:first-child {
  border-left: 0;
}

.workbench-task-field > small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}

.workbench-task-field > strong,
.workbench-due-trigger strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 11px;
  line-height: 1.25;
}

.workbench-due-field {
  overflow: visible;
}

.workbench-due-field.is-editing {
  border-color: color-mix(in srgb, var(--lugn-action) 32%, transparent);
  background: var(--lugn-surface);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--lugn-ink-secondary) 8%, transparent);
  border-radius: 7px;
}

.workbench-due-trigger {
  display: grid;
  gap: 2px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.workbench-due-trigger small {
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

.workbench-due-popover {
  position: absolute;
  z-index: 12;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  gap: 8px;
  width: min(272px, calc(100vw - 48px));
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--lugn-radius);
  background: var(--lugn-surface);
  box-shadow: var(--lugn-elevation-2);
}

.workbench-due-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.workbench-due-options button,
.workbench-due-clear {
  min-height: 30px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-muted);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
}

.workbench-due-options button:hover,
.workbench-due-options button:focus-visible,
.workbench-due-clear:hover,
.workbench-due-clear:focus-visible {
  border-color: color-mix(in srgb, var(--lugn-action) 36%, transparent);
  background: color-mix(in srgb, var(--lugn-action) 8%, transparent);
}

.workbench-due-popover label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.workbench-due-popover label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}

.workbench-due-popover input {
  width: 100%;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--lugn-surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

.workbench-due-clear {
  justify-self: start;
  background: var(--lugn-surface);
  color: var(--muted);
}

.workbench-output {
  display: grid;
  grid-template-columns: minmax(84px, 0.22fr) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
  padding: 3px 0 3px 8px;
  border-left: 2px solid color-mix(in srgb, var(--lugn-action) 24%, transparent);
  background: transparent;
}

.workbench-output strong {
  font-size: 11px;
}

.workbench-output span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.module-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.view[data-view-panel="modules"].has-active-module-context > .module-workspace {
  order: 1;
}

.view[data-view-panel="modules"].has-active-module-context > .panel {
  order: 2;
}

.view[data-view-panel="modules"].has-active-module-context > .panel .panel-header {
  padding-top: 2px;
}

.view[data-view-panel="modules"].has-active-module-context .module-operating-map {
  margin-bottom: 0;
}

.view[data-view-panel="modules"].has-active-module-context .module-grid {
  display: none;
}

.module-operating-map {
  display: grid;
  grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1.45fr) minmax(220px, 0.53fr);
  gap: 12px;
  margin-bottom: 14px;
}

.module-map-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

/* P1 FIX(2): de-carded counter tile — transparent in-flow, a single bottom
   hairline instead of a 1px box + radius + filled ground (Notion §3). */
.module-map-summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 58px;
  align-content: center;
  padding: 9px;
  border: 0;
  border-bottom: 1px solid var(--lugn-hairline);
  border-radius: 0;
  background: transparent;
}

.module-map-summary span,
.module-anchor-flow > span,
.module-flow-node small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: uppercase;
}

.module-map-summary strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1;
}

/* P1 FIX(2): de-carded — the anchor-flow strip is a transparent in-flow group
   (the chips inside carry their own quiet ground), with one top hairline as the
   only outer rule instead of a 1px box + radius + surface fill (Notion §2). */
.module-anchor-flow {
  display: grid;
  grid-template-columns: auto repeat(5, minmax(84px, 1fr));
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid var(--lugn-hairline);
  border-radius: 0;
  background: transparent;
}

/* P1 FIX(2): de-carded posture group — transparent in-flow, a single top
   hairline; cells separated only by the inter-row hairline. */
.module-map-posture {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid var(--lugn-hairline);
  border-radius: 0;
  background: transparent;
}

.module-map-posture div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.module-map-posture div + div {
  padding-top: 8px;
  border-top: 1px solid var(--lugn-hairline);
}

.module-map-posture span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: uppercase;
}

.module-map-posture strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}

.module-map-posture small {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

/* P1 FIX(2): de-carded anchor-flow chip — the quiet-chip recipe: a sunken
   ground at radius-sm with no box border (state tints below stay faint). */
.module-flow-node {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 44px;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--lugn-radius-sm);
  background: var(--surface-muted);
  color: var(--text);
  text-align: left;
}

.module-flow-node:not(:disabled) {
  cursor: pointer;
}

.module-flow-node:disabled {
  cursor: default;
  opacity: 0.78;
}

.module-flow-node.ready {
  border-color: color-mix(in srgb, var(--lugn-action) 24%, transparent);
  background: color-mix(in srgb, var(--lugn-action) 7%, transparent);
}

.module-flow-node.planned {
  border-color: color-mix(in srgb, var(--lugn-warning-fg) 22%, transparent);
  background: color-mix(in srgb, var(--lugn-warning-fg) 7%, transparent);
}

.module-flow-node.blocked {
  border-color: color-mix(in srgb, var(--lugn-danger-fg) 22%, transparent);
  background: color-mix(in srgb, var(--lugn-danger-fg) 7%, transparent);
}

.module-flow-node strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.2;
}

.module-workspace {
  display: grid;
  gap: 12px;
}

.module-workspace.is-active {
  animation: module-workspace-enter 180ms ease-out;
}

.module-workspace > .panel-header {
  margin-bottom: 2px;
}

.module-workspace-stack {
  display: grid;
  gap: 12px;
}

.module-inspector {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
}

.module-inspector:empty {
  display: none;
}

.module-inspector-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.module-inspector-header > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
  max-width: 760px;
}

.module-inspector-header span:not(.status-pill),
.module-inspector-rule span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

.module-inspector-header h2 {
  min-width: 0;
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}

.module-inspector-header p,
.module-inspector-rule p {
  min-width: 0;
  overflow-wrap: anywhere;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.module-inspector-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.module-inspector-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.56fr);
  gap: 12px;
  min-width: 0;
}

.module-inspector-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--border);
}

.module-inspector-facts div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  background: var(--lugn-surface);
}

.module-inspector-facts dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.module-inspector-facts dd {
  min-width: 0;
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.module-inspector-rule {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--lugn-ink-secondary) 12%, transparent);
  border-radius: 8px;
  background: var(--surface-muted);
}

.module-inspector-rule strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.4;
}

.module-inspector-dependencies {
  padding-top: 2px;
}

.module-card {
  /* De-carded (Notion §2): an in-flow row, not a bordered surface card. Structure
     from a single bottom hairline + whitespace; no four-edge border, no radius, no
     surface fill, no shadow. Class kept as the compat-alias the v2 ledger composes. */
  display: grid;
  grid-template-areas:
    "header description action"
    "ledger ledger ledger";
  grid-template-columns: minmax(150px, 0.22fr) minmax(0, 1fr) minmax(116px, auto);
  gap: 7px 10px;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  padding: 9px 10px;
  border: 0;
  border-bottom: var(--lugn-divider) solid var(--lugn-hairline);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.module-card.has-workspace {
  /* attention cue is a restrained 2px left ink rule, not a tinted border box */
  border-inline-start: var(--lugn-space-1) solid color-mix(in srgb, var(--lugn-action) 38%, transparent);
}

.module-card.is-selected {
  border-inline-start: var(--lugn-space-1) solid var(--lugn-action);
  background: color-mix(in srgb, var(--lugn-action) 4%, transparent);
}

.module-card header {
  grid-area: header;
  display: grid;
  flex-wrap: wrap;
  align-content: center;
  gap: 5px;
  min-width: 0;
}

.module-card header > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.module-card header > div:first-child > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
}

.module-card-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px;
}

.module-card-badges .status-pill {
  min-height: 20px;
  padding: 0 6px;
  font-size: 11px;
}

.module-card h3 {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
  margin: 0;
  font-size: 14px;
}

.module-card p {
  grid-area: description;
  min-width: 0;
  max-width: 680px;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.module-control-ledger {
  grid-area: ledger;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(108px, 0.58fr) minmax(108px, 0.52fr) minmax(118px, 0.56fr);
  gap: 1px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--border);
}

.module-control-ledger div {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  min-height: 48px;
  padding: 6px 7px;
  border-top: 2px solid var(--border);
  background: var(--lugn-canvas);
}

.module-control-ledger div.ready {
  border-top-color: var(--accent);
}

.module-control-ledger div.planned {
  border-top-color: var(--warning);
}

.module-control-ledger div.blocked {
  border-top-color: var(--danger);
}

.module-control-ledger div.locked {
  border-top-color: var(--signal);
}

.module-control-ledger span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
}

.module-control-ledger strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
}

.module-control-ledger small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.module-dependencies {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.module-dependency {
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--lugn-ink-secondary) 12%, transparent);
  border-radius: 999px;
  background: var(--lugn-surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.module-dependency.ready {
  border-color: color-mix(in srgb, var(--lugn-action) 22%, transparent);
  color: var(--lugn-action);
}

.module-dependency.planned {
  border-color: color-mix(in srgb, var(--lugn-warning-fg) 24%, transparent);
  color: var(--lugn-warning-fg);
}

.module-dependency.blocked {
  border-color: color-mix(in srgb, var(--lugn-danger-fg) 24%, transparent);
  color: var(--lugn-danger-fg);
}

.module-action {
  grid-area: action;
  align-self: center;
  justify-self: stretch;
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

/* Module marketplace — a responsive browse + enable grid in the Modules area.
   De-carded (design §2): the browse tiles are in-flow rows, not nested bordered
   cards — structure comes from whitespace + a single hairline rule per tile, never
   a four-edge border + radius + surface fill. Layout-only otherwise; every colour
   resolves through an existing token, so the colour-literal budget is untouched.
   The tiles keep their scoped class (.marketplace-card) — kept as a compat alias so
   the dynamically-rendered markup never loses styling — so they do not collide with
   the ledger-row .module-card grid-template-areas layout. */
.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 0;
  min-width: 0;
  border-top: var(--lugn-divider) solid var(--lugn-hairline);
}

.marketplace-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: var(--lugn-space-4) var(--lugn-space-4);
  border: 0;
  border-bottom: var(--lugn-divider) solid var(--lugn-hairline);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.marketplace-card-head {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.marketplace-card-heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.marketplace-card-heading h3 {
  margin: 0;
  min-width: 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.marketplace-card-heading span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.marketplace-card-section {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.marketplace-card-section > small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.marketplace-card-list {
  display: grid;
  gap: 3px;
  margin: 0;
  padding-left: 16px;
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}

.marketplace-card-list .marketplace-dep-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  list-style: none;
  margin-left: -16px;
}

.marketplace-card-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.procurement-module-overview {
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
  padding: 10px 0 12px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.procurement-module-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.procurement-module-command > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.procurement-module-command span:not(.status-pill),
.procurement-module-stage span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: uppercase;
}

.procurement-module-command strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.25;
}

.procurement-module-action {
  min-height: 32px;
}

.procurement-module-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.procurement-module-stage {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  min-height: 66px;
  padding-top: 8px;
  border-top: 2px solid var(--border);
}

.procurement-module-stage.ready {
  border-top-color: var(--accent);
}

.procurement-module-stage.current {
  border-top-color: var(--signal);
}

.procurement-module-stage strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.2;
}

.procurement-module-stage small {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

@keyframes module-workspace-enter {
  from {
    transform: translateY(4px);
  }

  to {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .module-workspace.is-active {
    animation: none;
  }
}

.capability-tree-preview {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  min-height: 280px;
}

.capability-narrative {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
  align-items: end;
  gap: 16px;
  padding-bottom: 4px;
}

.capability-narrative strong {
  display: block;
  margin-top: 8px;
  font-size: 18px;
}

.capability-narrative p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.capability-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.capability-summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-canvas);
}

.capability-summary dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.capability-summary dd {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
}

.capability-empty-state {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
  gap: 14px;
  align-items: start;
}

.capability-empty-runway {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.capability-empty-step {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  min-height: 138px;
  padding: 10px;
  border: 1px solid var(--border);
  border-top: 3px solid color-mix(in srgb, var(--lugn-action) 26%, transparent);
  border-radius: 8px;
  background: var(--lugn-canvas);
}

.capability-empty-step span {
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 600;
}

.capability-empty-step strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.capability-empty-step p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.capability-empty-step em {
  align-self: end;
  justify-self: start;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--lugn-surface);
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

.capability-empty-branches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--lugn-action) 18%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--lugn-action) 4%, transparent);
}

.capability-empty-branches > strong {
  grid-column: 1 / -1;
  font-size: 13px;
}

.capability-empty-branch {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  min-height: 124px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--lugn-action) 14%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--lugn-action) 42%, transparent);
  border-radius: 8px;
  background: var(--lugn-surface);
}

.capability-empty-branch.needed {
  border-left-color: var(--warning);
}

.capability-empty-branch.locked {
  border-left-color: color-mix(in srgb, var(--lugn-ink-secondary) 24%, transparent);
}

.capability-empty-branch header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.capability-empty-branches span {
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.capability-empty-branch em {
  flex: 0 0 auto;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
}

.capability-empty-branches small {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.capability-empty-branch .setup-action-control {
  align-self: end;
  justify-self: start;
}

.capability-empty-branch .capability-action {
  min-height: 30px;
  padding: 6px 9px;
  font-size: 11px;
}

.capability-empty-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.capability-node {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--lugn-ink) 3%, transparent);
  overflow: hidden;
}

.capability-node::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--lugn-action) 18%, transparent), transparent);
}

.capability-node-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 180px);
  align-items: start;
  gap: 18px;
  padding: 15px 16px 13px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--lugn-ink-secondary) 8%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--lugn-surface) 88%, transparent), var(--lugn-surface));
}

.capability-node-title,
.capability-node-status {
  display: grid;
  min-width: 0;
}

.capability-node-title {
  gap: 7px;
}

.capability-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: uppercase;
}

.capability-node-status {
  justify-items: end;
  gap: 8px;
}

.capability-node small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.capability-node-title > strong {
  font-size: 16px;
  line-height: 1.25;
}

.capability-node p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.capability-outcome {
  margin: 0;
  padding: 10px 16px 10px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--lugn-action) 11%, transparent);
  background: color-mix(in srgb, var(--lugn-action) 6%, transparent);
  color: var(--text) !important;
  font-weight: 500;
}

.capability-value-badge {
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 0;
}

.capability-value-badge small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.capability-value-badge strong {
  color: var(--accent-strong);
  font-size: 18px;
  line-height: 1.1;
}

.capability-control-ledger {
  display: grid;
}

.capability-ledger-row {
  display: grid;
  grid-template-columns: minmax(112px, 0.22fr) minmax(130px, 0.28fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  padding: 8px 16px 8px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--lugn-ink-secondary) 8%, transparent);
}

.capability-ledger-row span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.capability-ledger-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}

.capability-ledger-row small {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.capability-ledger-row.success {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--lugn-action) 62%, transparent);
}

.capability-ledger-row.warning {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--lugn-warning-fg) 58%, transparent);
}

.capability-ledger-row.danger {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--lugn-danger-fg) 58%, transparent);
}

.capability-ledger-row.guarded {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--lugn-warning-fg) 58%, transparent);
}

.capability-action-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 0;
  padding: 10px 16px 10px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--lugn-ink-secondary) 8%, transparent);
  background: var(--lugn-canvas);
}

.capability-action-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
  min-width: 0;
  padding: 4px 8px 4px 0;
}

.capability-action-step::before {
  content: "";
  grid-row: 1 / span 2;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--border);
}

.capability-action-step span,
.capability-action-step strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}

.capability-action-step span {
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
}

.capability-action-step strong {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.capability-action-step.success::before {
  background: var(--accent);
}

.capability-action-step.warning::before {
  background: var(--warning);
}

.capability-action-step.danger::before {
  background: var(--danger);
}

.capability-action-step.guarded::before {
  background: var(--signal);
}

.capability-node-footer {
  display: flex;
  justify-content: flex-end;
  padding: 11px 16px 14px 18px;
}

.capability-action {
  justify-self: start;
  align-self: end;
  min-height: 34px;
  margin-top: 2px;
}

.readiness-list {
  display: grid;
  gap: 10px;
}

.activation-checklist {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.activation-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.activation-summary strong {
  font-size: 13px;
}

.activation-summary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.activation-report-button {
  max-width: 100%;
  min-height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

.activation-action {
  justify-self: center;
  min-width: 160px;
}

.activation-detail-panel {
  display: grid;
  min-width: 0;
}

.activation-detail-panel > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  align-items: center;
  min-width: 0;
  min-height: 46px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  cursor: pointer;
  list-style: none;
}

.activation-detail-panel > summary::-webkit-details-marker {
  display: none;
}

.activation-detail-panel > summary::after {
  content: "+";
  grid-row: 1 / span 2;
  grid-column: 2;
  display: inline-grid;
  place-items: center;
  width: 24px;
  min-height: 24px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.activation-detail-panel[open] > summary::after {
  content: "-";
}

.activation-detail-panel > summary strong,
.activation-detail-panel > summary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activation-detail-panel > summary strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}

.activation-detail-panel > summary span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.activation-detail-panel[open] > summary {
  margin-bottom: 8px;
}

.activation-checklist .empty-state.activation-lock {
  min-height: 96px;
  align-content: center;
  background: var(--surface-muted);
}

.provider-actions {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.tenant-provider-row .provider-actions {
  grid-area: actions;
  align-content: start;
  justify-items: stretch;
}

.tenant-provider-row .provider-config-actions {
  grid-area: auto;
  align-content: start;
  justify-items: stretch;
}

.tenant-provider-row .provider-actions > button,
.tenant-provider-row .provider-actions > .primary-button,
.tenant-provider-row .provider-actions > .secondary-button,
.tenant-provider-row .provider-actions .setup-action-control,
.tenant-provider-row .provider-actions .setup-action-control > button,
.tenant-provider-row .provider-actions .provider-credential-form,
.tenant-provider-row .provider-actions .provider-credential-form button {
  width: 100%;
}

.tenant-provider-row .provider-actions .setup-action-control {
  display: grid;
  justify-items: stretch;
}

.tenant-provider-row .provider-actions .setup-action-policy-summary > span {
  max-width: none;
}

.provider-config-body .provider-credential-form {
  align-content: start;
}

.activation-evidence {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.activation-evidence-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.activation-evidence-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.activation-evidence-chip.success {
  border-color: color-mix(in srgb, var(--success) 36%, var(--border));
  color: var(--success);
}

.activation-evidence-chip.warning {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--border));
  color: var(--warning);
}

.activation-evidence-chip.danger {
  border-color: color-mix(in srgb, var(--danger) 36%, var(--border));
  color: var(--danger);
}

.activation-evidence-item {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) auto minmax(0, 1.4fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.activation-evidence-item strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.activation-evidence-item span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.readiness-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 140px minmax(220px, 1.5fr);
  gap: 14px;
  align-items: center;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.readiness-row span {
  color: var(--muted);
  font-size: 12px;
}

/* Color-coded readiness status. Owner readiness/security rows render their
   status cell as a .status-pill; here it reads in true STATUS colour
   (blocked/at-risk vs ready/protected) instead of equal-weight grey text, so
   the column scans at a glance. Uses the status tokens directly — not the
   decision-accent treatment of the base .status-pill.success — so "ready"
   reads green rather than as a call to action. */
.readiness-row .status-pill {
  justify-self: start;
  align-self: center;
  white-space: nowrap;
}

.readiness-row .status-pill.success {
  border-color: color-mix(in srgb, var(--lugn-success-fg) 28%, transparent);
  background: var(--lugn-success-bg);
  color: var(--lugn-success-fg);
}

.readiness-row .status-pill.warning {
  border-color: color-mix(in srgb, var(--lugn-warning-fg) 28%, transparent);
  background: var(--lugn-warning-bg);
  color: var(--lugn-warning-fg);
}

.readiness-row .status-pill.danger {
  border-color: color-mix(in srgb, var(--lugn-danger-fg) 28%, transparent);
  background: var(--lugn-danger-bg);
  color: var(--lugn-danger-fg);
}

.readiness-detail {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.readiness-action {
  justify-self: start;
  min-height: 34px;
}

.planning-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(360px, 1.3fr);
  gap: 14px;
  align-items: start;
}

.readiness-row.compact {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 44px;
}

.readiness-row.compact > span:not(.status-pill),
.readiness-row.compact > .readiness-detail {
  grid-column: 1 / -1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.recommendation-preview {
  min-width: 0;
}

.recommendation-list {
  display: grid;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--lugn-surface);
}

.recommendation-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.recommendation-row:last-child {
  border-bottom: 0;
}

.recommendation-row header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.recommendation-row header div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.recommendation-row header span:not(.status-pill),
.recommendation-row p,
.recommendation-row dt {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.recommendation-row dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(74px, 1fr));
  gap: 8px;
  margin: 0;
}

.recommendation-evidence,
.financial-preview,
.budget-preview,
.supplier-requirements,
.slow-mover-preview,
.price-negotiation-preview {
  display: grid;
  grid-template-columns: repeat(4, minmax(74px, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.recommendation-evidence.risk,
.financial-preview.risk,
.supplier-requirements.risk,
.slow-mover-preview.risk,
.price-negotiation-preview.risk {
  border-color: color-mix(in srgb, var(--lugn-danger-fg) 28%, transparent);
  background: var(--lugn-danger-bg);
}

.recommendation-evidence div,
.financial-preview div,
.budget-preview div,
.supplier-requirements div,
.slow-mover-preview div,
.price-negotiation-preview div {
  display: grid;
  gap: 2px;
}

.recommendation-evidence span,
.financial-preview span,
.financial-preview p,
.budget-preview span,
.budget-preview p,
.supplier-requirements span,
.supplier-requirements p,
.slow-mover-preview span,
.price-negotiation-preview span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.recommendation-evidence strong,
.financial-preview strong,
.budget-preview strong,
.supplier-requirements strong,
.slow-mover-preview strong,
.price-negotiation-preview strong {
  font-size: 13px;
}

.financial-preview p,
.budget-preview p,
.supplier-requirements p {
  grid-column: 1 / -1;
  margin: 0;
}

.demand-profile {
  display: grid;
  grid-template-columns: repeat(3, minmax(74px, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-canvas);
}

.demand-profile div {
  display: grid;
  gap: 2px;
}

.demand-profile span,
.demand-profile p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.demand-profile strong {
  font-size: 13px;
}

.demand-profile p {
  grid-column: 1 / -1;
  margin: 0;
}

.warning-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.warning-flag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

.warning-flag.danger {
  border-color: color-mix(in srgb, var(--lugn-danger-fg) 32%, transparent);
  color: var(--danger);
  background: var(--lugn-danger-bg);
}

.warning-flag.warning {
  border-color: color-mix(in srgb, var(--lugn-warning-fg) 32%, transparent);
  color: var(--lugn-warning-fg);
  background: var(--lugn-warning-bg);
}

.decision-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.decision-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: var(--lugn-text-label);
  font-weight: 500;
}

.decision-form input,
.decision-form select {
  width: 100%;
  min-height: 36px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
  color: var(--text);
}

.decision-saved {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
}

.decision-form button {
  justify-self: start;
}

.recommendation-row dl div {
  display: grid;
  gap: 2px;
}

.recommendation-row dd {
  margin: 0;
  font-size: var(--lugn-text-sm);
  font-weight: var(--lugn-weight-semibold);
  font-family: var(--lugn-font-num);
  font-variant-numeric: tabular-nums;
}

/* Empty / loading / error state (design §9) — the empty-state frame reads as a
   calm hairline dashed box (structure from whitespace, not a strong box), not a
   filled card. `.compact` is the smaller 120px variant used by error states. */
.empty-state {
  display: grid;
  gap: var(--lugn-space-3);
  min-height: 160px;
  place-items: center;
  border: var(--lugn-divider) dashed var(--lugn-hairline);
  border-radius: var(--lugn-radius);
  color: var(--muted);
  text-align: center;
}

.empty-state strong {
  color: var(--text);
  font-size: var(--lugn-text-lead);
}

.empty-state.compact {
  min-height: 120px;
}

/* Forward-pointing cue inside an invitational empty state (e.g. the cold ETL
   "connect your first source" hero pointing down at the connector rows). Carries
   the action accent so it reads as the next step, not muted body copy. */
.empty-state-hint {
  color: var(--lugn-action);
  font-size: var(--lugn-text-sm);
  font-weight: var(--lugn-weight-semibold);
}

.safety-review-lock {
  min-height: 120px;
  background: var(--surface-muted);
}

.command-palette {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: 72px 18px 18px;
  background: color-mix(in srgb, var(--lugn-ink) 38%, transparent);
}

.command-panel {
  display: grid;
  gap: 12px;
  width: min(920px, 100%);
  max-height: min(720px, calc(100vh - 112px));
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--lugn-radius-lg);
  background: var(--surface);
  box-shadow: var(--lugn-elevation-3);
}

.command-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 0;
}

.command-panel header div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.command-panel header strong {
  font-size: 15px;
  line-height: 1.2;
}

.command-panel header span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.command-panel input {
  width: calc(100% - 28px);
  min-height: 44px;
  margin: 0 14px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

.command-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.58fr);
  gap: 8px;
  min-height: 0;
  padding: 0 8px 10px;
}

.command-results {
  display: grid;
  align-content: start;
  align-self: start;
  gap: 4px;
  max-height: min(520px, calc(100vh - 260px));
  overflow-y: auto;
  padding: 0;
}

.command-result-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.command-result-row:hover,
.command-result-row:focus-visible,
.command-result-row.is-active {
  border-color: color-mix(in srgb, var(--lugn-action) 32%, transparent);
  background: color-mix(in srgb, var(--lugn-action) 7%, transparent);
}

.command-result-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.command-result-row strong,
.command-result-row small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.command-result-row strong {
  font-size: 13px;
}

.command-result-row small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.command-result-row em {
  min-width: 58px;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}

/* command-empty-state — compat-alias re-pointed onto the canonical empty-state
   treatment (design §9). It is dual-role markup (a calm section header with a
   title + status-pill AND a genuine empty placeholder), so it adopts the empty
   typography — muted body, ink lead title — without the dashed 160px frame that
   would box the header usages. Frameless, in-flow, no fill, no shadow (de-card). */
.command-empty-state {
  display: grid;
  gap: var(--lugn-space-2);
  min-height: 92px;
  place-items: center;
  color: var(--muted);
  text-align: center;
}

.command-empty-state strong {
  color: var(--text);
  font-size: var(--lugn-text-lead);
}

.command-empty-state span {
  font-size: var(--lugn-text-xs);
}

.command-preview {
  display: grid;
  align-self: start;
  align-content: start;
  gap: 12px;
  min-width: 0;
  max-height: min(520px, calc(100vh - 260px));
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-canvas);
}

.command-preview-heading {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.command-preview-heading span,
.command-preview-brief span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.command-preview-heading strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 15px;
  line-height: 1.25;
}

.command-preview p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.command-preview-brief {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--lugn-action) 18%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--lugn-action) 7%, transparent);
}

.command-preview-brief strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--accent-strong);
  font-size: 12px;
  line-height: 1.35;
}

.command-preview-facts {
  display: grid;
  gap: 7px;
  margin: 0;
}

.command-preview-facts div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding-top: 7px;
  border-top: 1px solid var(--border);
}

.command-preview-facts div:first-child {
  padding-top: 0;
  border-top: 0;
}

.command-preview dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.command-preview dd {
  min-width: 0;
  overflow-wrap: anywhere;
  margin: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}

.command-action-path {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.command-action-path li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lugn-surface);
}

.command-action-path span {
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.command-action-path strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 11px;
  line-height: 1.25;
}

.setup-action-control {
  display: inline-grid;
  gap: 5px;
  justify-items: start;
  min-width: 0;
  max-width: 100%;
  vertical-align: top;
}

.setup-action-policy-summary {
  display: none;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

.setup-action-policy-summary > span {
  min-height: 19px;
  max-width: 180px;
  overflow: hidden;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-action-policy-summary.success > span:first-child {
  border-color: color-mix(in srgb, var(--lugn-action) 28%, transparent);
  background: color-mix(in srgb, var(--lugn-action) 8%, transparent);
  color: var(--accent-strong);
}

.setup-action-policy-summary.warning > span:first-child {
  border-color: color-mix(in srgb, var(--lugn-warning-fg) 28%, transparent);
  background: color-mix(in srgb, var(--lugn-warning-fg) 8%, transparent);
  color: var(--warning);
}

.setup-action-policy-summary.danger > span:first-child {
  border-color: color-mix(in srgb, var(--lugn-danger-fg) 28%, transparent);
  background: color-mix(in srgb, var(--lugn-danger-fg) 8%, transparent);
  color: var(--danger);
}

.action-confirmation {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 18px;
  background: color-mix(in srgb, var(--lugn-ink) 42%, transparent);
}

.action-confirmation-panel {
  display: grid;
  gap: 14px;
  width: min(540px, 100%);
  max-height: min(720px, calc(100vh - 36px));
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--lugn-radius-lg);
  background: var(--surface);
  box-shadow: var(--lugn-elevation-3);
}

.action-confirmation-panel header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.action-confirmation-panel header > div {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.action-confirmation-panel header strong {
  overflow-wrap: anywhere;
  font-size: 16px;
  line-height: 1.25;
}

.action-confirmation-message {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.action-confirmation-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.action-confirmation-facts div {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 62px;
  align-content: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.action-confirmation-facts span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
}

.action-confirmation-facts strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
}

.action-confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.team-member-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) 11%, transparent);
}

.toast {
  position: fixed;
  right: 18px;
  top: 18px;
  bottom: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(420px, calc(100vw - 36px));
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--lugn-radius);
  background: var(--lugn-inverse-surface);
  color: var(--lugn-inverse-ink);
  box-shadow: var(--lugn-elevation-2);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 160ms var(--lugn-ease-standard), transform 160ms var(--lugn-ease-standard);
  pointer-events: none;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.toast-message {
  flex: 1 1 auto;
  min-width: 0;
}

/* Inline undo affordance (FOUNDATIONS §2.4). The toast stays click-through, but the
   button re-enables pointer events so the undo is the only interactive part. */
.toast-action {
  flex: none;
  pointer-events: auto;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--lugn-inverse-ink) 42%, transparent);
  border-radius: var(--lugn-radius-sm);
  background: transparent;
  color: var(--lugn-inverse-ink);
  font: inherit;
  font-size: var(--lugn-text-micro);
  font-weight: var(--lugn-weight-semibold);
  cursor: pointer;
}

.toast-action[hidden] {
  display: none;
}

.toast-action:hover {
  background: color-mix(in srgb, var(--lugn-inverse-ink) 14%, transparent);
}

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

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 2;
    gap: 10px;
    padding: 14px 18px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
  }

  .nav-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
  }

  .nav-item {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 36px;
    padding: 0 6px;
    overflow-wrap: anywhere;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.08;
    text-align: center;
  }

  .module-shortcut-rail {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding-top: 8px;
  }

  .module-shortcut-heading {
    display: grid;
    align-content: center;
    justify-content: start;
    gap: 1px;
    min-width: 82px;
  }

  .module-shortcut-list {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .module-shortcut-list::-webkit-scrollbar {
    display: none;
  }

  .module-shortcut {
    flex: 0 0 112px;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 1px;
    min-height: 34px;
    padding: 3px 8px;
  }

  .workspace {
    max-width: 100%;
    padding: 18px;
  }

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

  details.workbench-disclosure:not([open]) > summary.panel-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }

  details.workbench-disclosure:not([open]) > summary.panel-header > .panel-actions {
    justify-content: flex-start;
    width: auto;
  }

  details.workbench-disclosure:not([open]) > summary.panel-header > .panel-actions,
  details.workbench-disclosure:not([open]) > summary.panel-header > .status-pill {
    display: none;
  }

  .topbar-actions,
  .landing-nav {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .topbar-actions,
  .landing-nav {
    width: 100%;
    max-width: 100%;
  }

  .owner-access-form {
    width: 100%;
    flex-wrap: wrap;
  }

  .owner-access-form input {
    flex: 1 1 180px;
    width: auto;
  }

  .landing-nav {
    gap: 2px;
    margin-right: 0;
  }

  .landing-nav a {
    padding: 7px 8px;
  }

  .landing-hero {
    grid-template-columns: 1fr;
    gap: 16px;
    min-height: auto;
    padding: 18px;
    background: var(--lugn-surface);
  }

  .landing-copy {
    gap: 12px;
    padding: 0;
  }

  .landing-copy h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 36px;
  }

  .landing-copy p {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 15px;
    line-height: 1.45;
  }

  .two-columns,
  .provider-grid,
  .master-data-grid,
  .module-grid,
  .capability-tree-preview,
  .planning-grid,
  .planning-import-form,
  .auth-layout,
  #signupForm,
  #signinForm,
  .access-request-form,
  .auth-form.compact,
  .launch-readiness,
  .auth-assurance,
  .workbench-focus,
  .workbench-runway-focus,
  .workbench-runway-track,
  .workbench-operating-loop,
  .workbench-task-fields,
  .runtime-gate-playbook,
  .runtime-gate-command,
  .public-signup-gate-list,
  .alpha-operating-grid,
  .launch-operations-summary,
  .launch-operations-metrics,
  .app-build-summary,
  .app-build-summary dl,
  .launch-gate-summary,
  .launch-gate-summary dl,
  .setup-runway-summary,
  .setup-runway-grid,
  .architecture-spine-summary,
  .settings-grid,
  .settings-form,
  .team-setup-grid,
  .team-member-form,
  .form-grid,
  .journey-overview,
  .journey-focus-gate,
  .journey-focus-evidence-list,
  .journey-milestones,
  .module-operating-map,
  .module-anchor-flow,
  .module-map-posture,
  .module-inspector-grid,
  .module-inspector-facts,
  .procurement-module-overview,
  .command-body,
  .capability-narrative,
  .capability-empty-state,
  .capability-empty-runway,
  .capability-empty-branches,
  .capability-node-header,
  .capability-ledger-row,
  .capability-node-footer,
  .readiness-row {
    grid-template-columns: 1fr;
  }

  .alpha-operating-item {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .alpha-operating-item:last-child {
    border-bottom: 0;
  }

  .workbench-task-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workbench-task-field:nth-child(odd) {
    border-left: 0;
  }

  .workbench-task-field:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }

  .capability-node-status {
    justify-items: start;
  }

  .capability-value-badge {
    justify-items: start;
  }

  .capability-action-rail {
    grid-template-columns: 1fr;
  }

  .is-public-landing .access-panel .auth-layout {
    grid-template-columns: 1fr;
  }

  .readiness-row.compact {
    grid-template-columns: 1fr;
  }

  .workbench-due-popover {
    position: static;
    width: 100%;
    margin-top: 4px;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--lugn-ink-secondary) 10%, transparent);
  }

  .workbench-status-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
    width: 100%;
  }

  .workbench-command-button,
  .workbench-status-actions .setup-action-control,
  .workbench-status-actions .setup-action-control > button {
    width: 100%;
  }

  .workbench-step-row {
    grid-template-columns: 1fr;
  }

  .procurement-module-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .action-confirmation {
    align-items: end;
    padding: 12px;
  }

  .action-confirmation-panel {
    max-height: calc(100vh - 24px);
  }

  .action-confirmation-facts {
    grid-template-columns: 1fr;
  }

  .action-confirmation-actions {
    justify-content: stretch;
  }

  .module-card {
    grid-template-areas:
      "header"
      "description"
      "ledger"
      "action";
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 7px;
    padding: 9px;
  }

  .module-control-ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .module-control-ledger div:nth-child(odd) {
    border-left: 0;
  }

  .tenant-provider-row {
    grid-template-areas:
      "identity"
      "ledger"
      "evidence"
      "actions"
      "config";
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .provider-feed-ledger,
  .provider-evidence-ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .provider-config-body {
    grid-template-columns: 1fr;
  }

  .action-confirmation-actions button {
    flex: 1 1 140px;
  }

  .procurement-setup-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .setup-action-policy-summary > span {
    max-width: 150px;
  }

  .recommendation-row dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recommendation-evidence,
  .financial-preview,
  .budget-preview,
  .supplier-requirements,
  .slow-mover-preview,
  .price-negotiation-preview,
  .demand-profile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .decision-form {
    grid-template-columns: 1fr;
  }

  .activation-evidence-item {
    grid-template-columns: 1fr;
  }

  .lead-content {
    align-items: flex-start;
    flex-direction: column;
  }

  .capability-node {
    transform: none;
  }

  .architecture-spine-meter > span {
    justify-self: start;
  }
}

@media (max-width: 720px) {
  .landing-hero {
    gap: 12px;
    padding: 16px;
  }

  .architecture-spine-item {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .architecture-spine-action {
    grid-column: 2;
    justify-self: start;
  }

  /* ============================================================
     Shared owner-table reflow (responsive baseline). The owner
     console packs nine wide tables that hardcode min-width
     620-1040px; below this breakpoint they overflow into a
     horizontal scroll, which reads as broken on a phone. Rather
     than per-table nth-child label maps, this single data-driven
     pattern keys off the data-label="..." attribute the owner.js
     <td> cells carry: any tagged table collapses to a stack of
     label/value cards, and the ::before renders the column header
     inline from attr(data-label). Adding data-label to a new
     owner table is then enough to make it reflow — no CSS edit.
     min-width is relaxed inside the breakpoint so nothing forces a
     sideways scroll. Layout-only; no motion, nothing to guard. */
  table:has(td[data-label]) {
    width: 100%;
    min-width: 0;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
  }

  /* Defeat the per-table fixed min-widths that outrank the generic
     table:has() reset above (class+element specificity wins over
     element+:has). Each of these owner/public tables hardcodes a
     820-1120px base min-width that would otherwise force a horizontal
     scroll at phone widths even though the rows reflow into stacked
     cards. Relaxing min-width (and dropping fixed table-layout) lets the
     stack actually engage. Layout-only; no motion to guard. */
  .owner-attention-table table,
  .owner-activity-table table,
  .owner-billing-table table,
  .owner-billing-remediation table,
  .owner-operations-table table,
  .owner-operations-remediation table,
  .owner-identity-table table,
  .owner-identity-remediation table,
  .owner-process-table table,
  .owner-operator-table table,
  .public-signup-prerequisite-matrix table,
  .public-signup-remediation table {
    width: 100%;
    min-width: 0;
    table-layout: auto;
  }

  table:has(td[data-label]) thead {
    /* Header text is re-surfaced per cell via ::before below. clip
       (not display:none) keeps it in the accessibility tree. */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  table:has(td[data-label]) tr:has(td[data-label]) {
    display: block;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--lugn-radius);
    background: var(--lugn-surface);
  }

  table:has(td[data-label]) tr:has(td[data-label]) + tr {
    margin-top: var(--lugn-space-3);
  }

  td[data-label] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    border-bottom: 0;
    text-align: left;
    white-space: normal;
  }

  td[data-label] + td[data-label] {
    margin-top: var(--lugn-space-3);
  }

  td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--lugn-space-2);
    color: var(--muted);
    font-size: var(--lugn-text-micro);
    font-weight: var(--lugn-weight-semibold);
    line-height: var(--lugn-leading-snug);
    text-transform: uppercase;
  }

  /* A cell explicitly marked empty (data-label="") gets no header
     chrome and folds away, so blank action columns don't leave a
     dangling label. */
  td[data-label=""]::before {
    content: none;
  }

  td[data-label] > * {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 520px) {
  body:not(.is-public-landing) .topbar {
    gap: 8px;
  }

  body:not(.is-public-landing) .topbar p {
    display: none;
  }

  body:not(.is-public-landing) .topbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px 58px;
    gap: 6px;
    align-items: center;
  }

  body:not(.is-public-landing) .topbar-session {
    min-width: 0;
    padding: 5px 6px 5px 8px;
  }

  body:not(.is-public-landing) .topbar-session strong,
  body:not(.is-public-landing) .topbar-session span {
    max-width: 128px;
  }

  body:not(.is-public-landing) .topbar-session .secondary-button {
    min-height: 26px;
    padding: 0 6px;
    font-size: 11px;
  }

  body:not(.is-public-landing) .topbar-actions .icon-button,
  body:not(.is-public-landing) .topbar-actions .command-trigger {
    width: 100%;
    min-height: 34px;
    padding: 0 7px;
    font-size: 11px;
  }

  .launch-operations-table,
  .public-signup-prerequisite-matrix .table-wrap,
  .public-signup-remediation .table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .public-signup-prerequisite-matrix,
  .public-signup-remediation {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .launch-operations-table table,
  .public-signup-prerequisite-matrix table,
  .public-signup-remediation table {
    display: contents;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
  }

  .launch-operations-table thead,
  .public-signup-prerequisite-matrix thead,
  .public-signup-remediation thead {
    display: none;
  }

  .launch-operations-table tbody,
  .public-signup-prerequisite-matrix tbody,
  .public-signup-remediation tbody {
    display: contents;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .launch-operations-table tr,
  .public-signup-prerequisite-matrix tr,
  .public-signup-remediation tr {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--lugn-surface);
  }

  .launch-operations-table tr + tr,
  .public-signup-prerequisite-matrix tr + tr,
  .public-signup-remediation tr + tr {
    margin-top: 10px;
  }

  .launch-operations-table th:nth-child(n),
  .launch-operations-table td:nth-child(n),
  .public-signup-prerequisite-matrix th:nth-child(n),
  .public-signup-prerequisite-matrix td:nth-child(n),
  .public-signup-remediation th:nth-child(n),
  .public-signup-remediation td:nth-child(n) {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    border-bottom: 0;
    text-align: left;
    white-space: normal;
  }

  .launch-operations-table td + td,
  .public-signup-prerequisite-matrix td + td,
  .public-signup-remediation td + td {
    margin-top: 8px;
  }

  .launch-operations-table td::before,
  .public-signup-prerequisite-matrix td::before,
  .public-signup-remediation td::before {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .launch-operations-table td > *,
  .public-signup-prerequisite-matrix td > *,
  .public-signup-remediation td > * {
    max-width: 100%;
    min-width: 0;
  }

  .launch-operations-table td:nth-child(1)::before {
    content: "Launch area";
  }

  .launch-operations-table td:nth-child(2)::before,
  .public-signup-prerequisite-matrix td:nth-child(2)::before,
  .public-signup-remediation td:nth-child(2)::before {
    content: "Status";
  }

  .launch-operations-table td:nth-child(3)::before,
  .public-signup-remediation td:nth-child(4)::before {
    content: "Evidence";
  }

  .launch-operations-table td:nth-child(4)::before,
  .public-signup-remediation td:nth-child(3)::before {
    content: "Next action";
  }

  .launch-operations-table td:nth-child(5)::before {
    content: "Action";
  }

  .public-signup-remediation td:nth-child(1)::before {
    content: "Gate";
  }

  .public-signup-prerequisite-matrix td:nth-child(1)::before {
    content: "Requirement";
  }

  .public-signup-prerequisite-matrix td:nth-child(3)::before {
    content: "Source";
  }

  .public-signup-prerequisite-matrix td:nth-child(4)::before {
    content: "Proof";
  }

  .public-signup-prerequisite-matrix td:nth-child(5)::before {
    content: "Operator action";
  }

  .launch-operations-table td:first-child span,
  .public-signup-prerequisite-matrix td:first-child span,
  .public-signup-remediation td:first-child span {
    margin-top: 2px;
    overflow-wrap: anywhere;
  }

  .launch-operation-prerequisites,
  .launch-operation-commands,
  .launch-operation-command {
    width: 100%;
    max-width: 100%;
  }

  .launch-operation-command code,
  .owner-runbook-command code,
  .runtime-gate-command code {
    word-break: break-word;
  }

  .launch-operation-command .secondary-button,
  .owner-runbook-command .secondary-button,
  .runtime-gate-command .secondary-button {
    max-width: 100%;
  }

  .workbench-focus {
    padding: 10px;
  }

  .workbench-section-summary span:not(.status-pill) {
    display: none;
  }

  .workbench-output {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .module-operating-map {
    gap: 8px;
    margin-bottom: 10px;
  }

  .module-map-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  .module-map-summary div {
    min-height: 46px;
    padding: 7px 5px;
  }

  .module-map-summary span {
    font-size: 11px;
  }

  .module-map-summary strong {
    font-size: 18px;
  }

  .module-anchor-flow {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 7px;
    scrollbar-width: none;
  }

  .module-anchor-flow::-webkit-scrollbar {
    display: none;
  }

  .module-anchor-flow > span {
    flex: 0 0 auto;
    align-self: center;
    font-size: 11px;
  }

  .module-flow-node {
    flex: 0 0 92px;
    min-height: 36px;
    padding: 6px 7px;
  }

  .module-map-posture {
    gap: 4px;
    padding: 8px;
  }

  .module-map-posture div + div {
    padding-top: 5px;
  }

  .module-map-posture small {
    display: none;
  }

  .module-card p {
    -webkit-line-clamp: 1;
  }

  .tenant-provider-row {
    gap: 6px;
    padding: 8px;
  }

  .provider-feed-ledger div,
  .provider-evidence-ledger div {
    min-height: 56px;
    padding: 6px;
    border-top-width: 2px;
  }

  .provider-feed-ledger span,
  .provider-evidence-ledger span {
    font-size: 11px;
  }

  .provider-feed-ledger strong,
  .provider-evidence-ledger strong {
    font-size: 11px;
    line-height: 1.15;
  }

  .provider-feed-ledger small,
  .provider-evidence-ledger small,
  .provider-evidence-ledger li {
    font-size: var(--lugn-text-micro);
    line-height: 1.2;
    -webkit-line-clamp: 1;
  }

  .provider-config-panel summary {
    min-height: 32px;
    padding: 6px 7px;
  }

  .provider-config-panel summary strong {
    font-size: 11px;
  }

  .provider-config-panel summary small,
  .provider-config-panel summary em {
    font-size: var(--lugn-text-micro);
  }

  .module-card {
    grid-template-areas:
      "header action"
      "description description"
      "ledger ledger";
    grid-template-columns: minmax(0, 1fr) minmax(84px, auto);
    gap: 5px 7px;
    padding: 7px;
  }

  .module-card header {
    gap: 3px;
  }

  .module-card header > div:first-child > span {
    display: none;
  }

  .module-card-badges {
    gap: 3px;
  }

  .module-card-badges .status-pill {
    min-height: 17px;
    padding: 0 5px;
    font-size: var(--lugn-text-micro);
  }

  .module-card h3 {
    font-size: 12.5px;
    line-height: 1.1;
  }

  .module-card p {
    font-size: 11px;
    line-height: 1.25;
  }

  .module-action {
    min-height: 26px;
    align-self: start;
    padding: 0 7px;
    font-size: 11px;
    line-height: 1;
  }

  .module-control-ledger {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .module-control-ledger div {
    min-height: 45px;
    padding: 5px 5px;
  }

  .module-control-ledger span {
    font-size: var(--lugn-text-micro);
  }

  .module-control-ledger strong {
    overflow: hidden;
    font-size: var(--lugn-text-micro);
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .module-control-ledger small {
    display: none;
  }

  .sidebar {
    gap: 8px;
    padding: 12px 14px 10px;
  }

  .brand {
    gap: 10px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
  }

  .nav-list {
    gap: 4px;
  }

  .nav-item {
    min-height: 34px;
    padding: 0 4px;
    font-size: 11px;
  }

  .module-shortcut-rail {
    gap: 6px;
    padding-top: 7px;
  }

  .module-shortcut-heading {
    min-width: 68px;
  }

  .module-shortcut-heading span,
  .module-shortcut-heading small {
    font-size: 11px;
  }

  .module-shortcut {
    flex-basis: 104px;
    min-height: 32px;
    padding: 2px 7px;
  }

  .module-shortcut span {
    font-size: 11px;
  }

  .module-shortcut small {
    font-size: 11px;
  }

  .is-public-landing .workspace {
    padding: 16px 14px 42px;
    overflow-x: hidden;
  }

  .procurement-setup-tabs {
    grid-template-columns: 1fr;
  }

  .module-inspector {
    padding: 12px;
  }

  .landing-nav a {
    font-size: 11px;
    padding: 7px 6px;
  }

  .landing-hero {
    width: 100%;
    max-width: 100%;
    gap: 10px;
    padding: 14px;
  }

  .landing-copy {
    gap: 10px;
    padding: 0;
  }

  .landing-copy,
  .landing-copy h1,
  .landing-copy p {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .landing-copy h1 {
    font-size: 28px;
    line-height: 1.04;
  }

  .landing-copy p {
    font-size: 13px;
    line-height: 1.36;
  }

  .landing-actions {
    gap: 8px;
    margin-top: 0;
  }

  .landing-actions .primary-button,
  .landing-actions .secondary-button {
    min-height: 34px;
    padding: 0 11px;
  }

  .capability-summary {
    grid-template-columns: 1fr;
  }

  .module-map-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

}

/* ============================================================
   Cross-cutting a11y baseline for INTERACTIVE controls (Lugn).
   Two WCAG fixes that lift every surface that consumes this
   canonical sheet (the owner console links it directly; the
   tenant app rides it through v2.css's @import). Both are
   additive corrections on the actual control families — they do
   NOT touch the structural hairline used for panel edges,
   section rules, card outlines and table row separators.
   ============================================================ */

/* 1. Non-text contrast (WCAG 1.4.11). The resting border IS the
   affordance on a text input / select / textarea / search field
   and on the neutral secondary + icon row-action buttons + the
   command trigger. The shared rules above paint it on --border
   (the structural hairline, ~1.4:1), which fails as a control
   outline. Repoint the resting border of the interactive families
   to --lugn-control-border (~3:1, the token authored for exactly
   this). The accent-bordered .primary-button and the saturated
   status/decision chips are deliberately excluded. No new colour —
   control-border is an existing Lugn token. */
.icon-button:not(:disabled):not(:focus-visible):not(:hover),
.secondary-button:not(:disabled):not(:focus-visible):not(:hover),
.command-trigger:not(:disabled):not(:focus-visible):not(:hover),
.workspace-switcher select:not(:disabled):not(:focus):not(:focus-visible),
.owner-access-form input:not(:disabled):not(:focus):not(:focus-visible),
.form-grid input:not(:disabled):not(:focus):not(:focus-visible),
.form-grid textarea:not(:disabled):not(:focus):not(:focus-visible),
.panel select:not(:disabled):not(:focus):not(:focus-visible) {
  border-color: var(--lugn-control-border);
}

/* 2. Target size (WCAG 2.5.8). The shared standalone secondary /
   icon buttons and the standalone form inputs sit at 38-40px;
   standalone interactive controls should reach the 44px touch
   target the primary/danger buttons use. min-height (never a fixed
   height) so labels never clip. Dense owner data-table / toolbar /
   gate controls are intentionally NOT raised here (the mandate
   allows dense cells to stay compact); they are re-asserted at
   their authored heights in block 3 below, because the owner
   console also loads v2.css whose generic body.v2-shell control
   rules would otherwise win the cascade and inflate them. */
.icon-button,
.secondary-button,
.command-trigger,
.workspace-switcher select,
.owner-access-form input,
.form-grid input {
  min-height: 44px;
}

.icon-button {
  width: 44px;
}

/* 3. Density carve-out (owner console). owner.html loads BOTH this
   sheet and v2.css under body.v2-shell. v2.css's touch-target block
   lifts the generic body.v2-shell .secondary-button (0,2,1),
   body.v2-shell select (0,1,2) and body.v2-shell input:not(...)
   (0,4,2) to 44px — those outweigh the owner console's dense
   data-table / toolbar / gate rules (which authored 30-34px
   deliberately and only reached 0,1,1-0,2,1). Per the mandate
   ("dense data-table cells may stay compact"), re-assert each dense
   family at its authored height with a body.v2-shell .owner-shell
   prefix so it cleanly clears the v2 generic specificity. Standalone
   owner controls (.owner-access-form input, .workspace-switcher
   select) are NOT listed — they correctly keep the 44px lift. No new
   colour; px lengths only. */
body.v2-shell .owner-shell .owner-row-actions .secondary-button,
body.v2-shell .owner-shell .launch-gate-summary .secondary-button,
body.v2-shell .owner-shell select,
body.v2-shell .owner-shell .owner-row-actions input:not([type="checkbox"]):not([type="radio"]),
body.v2-shell .owner-shell .owner-table-toolbar input[type="search"]:not(:disabled),
body.v2-shell .owner-shell .owner-table-toolbar input[type="search"]:disabled {
  min-height: 34px;
}

body.v2-shell .owner-shell .launch-operations-table .secondary-button,
body.v2-shell .owner-shell .runtime-gate-command .secondary-button {
  min-height: 30px;
}

body.v2-shell .owner-shell .public-signup-gate-row .secondary-button,
body.v2-shell .owner-shell .runtime-gate-actions .secondary-button {
  min-height: 32px;
}