/* Launchpad Enterprise design system ("LPX", redesign 11-08, ask A35; status/rc/launchpad/REDESIGN-2026-11-08.md §2).
   One token set: dark default, light under [data-theme="light"] (the app's theme switch). The shell (ds/lpx-shell.js)
   carries the classes "lpx lpx-root"; pages under v3/lpx/ use these classes only and define no card, KPI, badge,
   table or chart class of their own (test/ds-lint.test.js). The prototypes' ds.css is the same rules.
   Type: Instrument Sans (UI, self-hosted) + IBM Plex Mono (ids, code, timestamps). Newsreader is retired.
   Grid: 4 px base, 12 columns, 16 px gutters; content max 1680. Density: 32 px rows, 36 px controls.
   Chart palette: the v9 validated categorical slots (dataviz validator, both surfaces); status colors are reserved. */
:root {
  --lpx-font: 'Manrope', 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lpx-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* surfaces: page < surface < raised < overlay */
  /* Design v2 (Naja 11-14, DESIGN-V2.md): the Concierge/Cockpit dark system. bg #0A0C10, header #0D1015, panel #11151B,
     inner #161B22, border #1F242C, track #1A1F26; violet accent #7C3AED fill / #A78BFA line / #C4B5FD link. */
  --lpx-page: #0a0c10; --lpx-surface: #11151b; --lpx-raised: #161b22; --lpx-overlay: #1b2029; --lpx-sunk: #0d1015;
  --lpx-line: #1f242c; --lpx-line2: #2b313b; --lpx-focus: #a78bfa;
  --lpx-ink: #e6e8eb; --lpx-ink2: #c3c9d1; --lpx-mute: #9aa3ae; --lpx-faint: #5b6470;
  --lpx-accent: #a78bfa; --lpx-accent-ink: #ffffff; --lpx-accent-fill: #7c3aed; /* fill: a filled control's ground, white text at 4.9:1 (the bright accent stays for text and lines) */ --lpx-accent-wash: #1b1530; --lpx-accent-line: rgba(124, 58, 237, .55); --lpx-link: #c4b5fd; --lpx-track: #1a1f26; --lpx-header: #0d1015;
  /* categorical series, fixed order (never status) */
  --lpx-s1: #3987e5; --lpx-s2: #d95926; --lpx-s3: #199e70; --lpx-s4: #c98500; --lpx-s5: #d55181; --lpx-s6: #9085e9; --lpx-s7: #2fb3c4; --lpx-s8: #e66767;
  /* sequential (heatmaps, cohorts): accent ramp, 6 steps */
  --lpx-q0: #15131f; --lpx-q1: #221a3d; --lpx-q2: #2e2350; --lpx-q3: #3b2a70; --lpx-q4: #5b3bb5; --lpx-q5: #a78bfa;
  /* status, reserved */
  --lpx-good: #34d399; --lpx-warn: #fbbf24; --lpx-bad: #f87171; --lpx-info: #60a5fa;
  --lpx-good-wash: #0e2a22; --lpx-warn-wash: #2a2310; --lpx-bad-wash: #2a1414;
  --lpx-nm: repeating-linear-gradient(135deg, transparent 0 4px, rgba(127, 135, 150, .22) 4px 5px); /* not measured */
  /* type scale */
  --lpx-t-display: 600 44px/1.02 var(--lpx-font); --lpx-t-kpi: 600 26px/1.05 var(--lpx-font); --lpx-t-title: 650 20px/1.2 var(--lpx-font);
  --lpx-t-h: 600 14px/1.3 var(--lpx-font); --lpx-t-body: 400 13px/1.45 var(--lpx-font); --lpx-t-small: 500 12px/1.35 var(--lpx-font);
  --lpx-t-micro: 600 10.5px/1.2 var(--lpx-font); --lpx-t-mono: 500 11.5px/1.35 var(--lpx-mono);
  /* spacing, radius, elevation, motion */
  --lpx-1: 4px; --lpx-2: 8px; --lpx-3: 12px; --lpx-4: 16px; --lpx-5: 20px; --lpx-6: 24px; --lpx-8: 32px;
  --lpx-r: 16px; --lpx-r-sm: 8px; --lpx-r-xs: 4px;
  --lpx-e1: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 1px 2px rgba(0, 0, 0, .35);
  --lpx-e2: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 8px 28px rgba(0, 0, 0, .45);
  --lpx-ease: cubic-bezier(.2, .7, .2, 1); --lpx-fast: 120ms; --lpx-med: 200ms;
  --lpx-rail: 232px; --lpx-top: 52px;
  /* Foundation (11-13, Naja: "a professional, impressive, leading class enterprise tool"). One scale for every page:
     spacing 0-12 on a 4 px base, radii xs-pill, elevation e0-e3, type sizes, motion, layers, density. */
  --lpx-0: 0; --lpx-7: 28px; --lpx-10: 40px; --lpx-12: 48px;
  --lpx-r-md: 8px; --lpx-r-lg: 12px; --lpx-r-pill: 999px;
  --lpx-e0: none; --lpx-e3: 0 0 0 1px rgba(255, 255, 255, .04), 0 24px 64px rgba(0, 0, 0, .55);
  --lpx-ring: 0 0 0 3px rgba(167, 139, 250, .35);
  --lpx-fs-xs: 11px; --lpx-fs-sm: 12px; --lpx-fs-md: 13px; --lpx-fs-lg: 15px; --lpx-fs-xl: 20px; --lpx-fs-2xl: 26px;
  --lpx-t-label: 600 11px/1.2 var(--lpx-font); --lpx-t-lead: 400 14px/1.45 var(--lpx-font);
  --lpx-slow: 320ms; --lpx-z-top: 20; --lpx-z-rail: 40; --lpx-z-drawer: 70; --lpx-z-palette: 90; --lpx-z-toast: 95;
  --lpx-row: 40px; --lpx-row-compact: 32px; --lpx-row-comfy: 48px;
  --lpx-scrim: rgba(5, 7, 10, .6);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --lpx-page: #f5f6f8; --lpx-surface: #ffffff; --lpx-raised: #fafbfc; --lpx-overlay: #ffffff; --lpx-sunk: #eef0f3;
  --lpx-line: #e4e7ec; --lpx-line2: #d2d6de; --lpx-focus: #2f6bed;
  --lpx-ink: #0e1116; --lpx-ink2: #464d5a; --lpx-mute: #6b7280; --lpx-faint: #a3a9b4;
  --lpx-accent: #6d28d9; --lpx-accent-fill: #7c3aed; --lpx-accent-wash: #f1ebff; --lpx-accent-line: rgba(124, 58, 237, .4); --lpx-link: #6d28d9; --lpx-track: #eef0f3; --lpx-header: #ffffff;
  --lpx-s1: #2a78d6; --lpx-s2: #eb6834; --lpx-s3: #1baf7a; --lpx-s4: #eda100; --lpx-s5: #e87ba4; --lpx-s6: #6250d6; --lpx-s7: #1597a8; --lpx-s8: #e34948;
  --lpx-q0: #f1f4fa; --lpx-q1: #dbe5fb; --lpx-q2: #b6cbf6; --lpx-q3: #84a8ef; --lpx-q4: #4c7fe6; --lpx-q5: #2350b8;
  --lpx-good: #16934f; --lpx-warn: #b97800; --lpx-bad: #d23c3c; --lpx-info: #2f6bed;
  --lpx-good-wash: rgba(22, 147, 79, .1); --lpx-warn-wash: rgba(185, 120, 0, .1); --lpx-bad-wash: rgba(210, 60, 60, .09);
  --lpx-nm: repeating-linear-gradient(135deg, transparent 0 4px, rgba(107, 114, 128, .18) 4px 5px);
  --lpx-e1: 0 1px 2px rgba(16, 24, 40, .06); --lpx-e2: 0 10px 30px rgba(16, 24, 40, .12);
  --lpx-e0: none; --lpx-e3: 0 0 0 1px rgba(16, 24, 40, .06), 0 24px 64px rgba(16, 24, 40, .18);
  --lpx-ring: 0 0 0 3px rgba(47, 107, 237, .25); --lpx-scrim: rgba(16, 24, 40, .32);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
.lpx-root { min-height: 100vh; background: var(--lpx-page); color: var(--lpx-ink); font: var(--lpx-t-body); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
.lpx a { color: inherit; text-decoration: none; }
.lpx :focus-visible { outline: 2px solid var(--lpx-focus); outline-offset: 2px; border-radius: var(--lpx-r-xs); }
@media (prefers-reduced-motion: reduce) { .lpx * { transition: none !important; animation: none !important; } }

/* ---------------------------------------------------------------- shell: rail + top bar + page */
.lpx-shell { background: linear-gradient(90deg, var(--lpx-sunk) var(--lpx-rail), transparent 0); display: grid; grid-template-columns: var(--lpx-rail) minmax(0, 1fr); min-height: 100vh; }
.lpx-rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 12px 10px; gap: 2px; }
.lpx-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; font: 650 14px/1 var(--lpx-font); }
.lpx-brand i { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, var(--lpx-accent), var(--lpx-s6)); display: grid; place-items: center; color: #fff; font: 700 13px/1 var(--lpx-font); font-style: normal; }
.lpx-brand small { display: block; font: var(--lpx-t-micro); color: var(--lpx-mute); margin-top: 3px; letter-spacing: .02em; }
.lpx-nav { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: var(--lpx-r-sm); color: var(--lpx-ink2); font: 500 13px/1 var(--lpx-font); transition: background var(--lpx-fast) var(--lpx-ease), color var(--lpx-fast); }
.lpx-nav svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; }
.lpx-nav:hover { background: var(--lpx-raised); color: var(--lpx-ink); }
.lpx-nav[aria-current="page"] { background: var(--lpx-accent-wash); color: var(--lpx-ink); box-shadow: inset 2px 0 0 var(--lpx-accent); }
.lpx-nav .n { margin-left: auto; font: var(--lpx-t-micro); color: var(--lpx-ink2); background: var(--lpx-raised); border: 1px solid var(--lpx-line); padding: 2px 6px; border-radius: 999px; }
.lpx-nav .n.hot { background: var(--lpx-bad-wash); color: var(--lpx-bad); border-color: transparent; }
.lpx-sec { font: var(--lpx-t-micro); text-transform: uppercase; letter-spacing: .08em; color: var(--lpx-faint); padding: 14px 10px 6px; }
.lpx-rail .grow { flex: 1; }
.lpx-main { border-left: 1px solid var(--lpx-line); min-width: 0; display: flex; flex-direction: column; }
.lpx-top { position: sticky; top: 0; z-index: 20; height: var(--lpx-top); display: flex; align-items: center; gap: 10px; padding: 0 20px; background: color-mix(in srgb, var(--lpx-page) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--lpx-line); }
.lpx-crumb { font: var(--lpx-t-small); color: var(--lpx-mute); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lpx-top > .lpx-ctl { flex-shrink: 0; } /* the freshness pill and theme switch never leave the bar on a phone; a long crumb ellipsizes instead */
.lpx-crumb b { color: var(--lpx-ink); font-weight: 600; }
.lpx-search { flex: 1; max-width: 520px; margin: 0 auto; height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--lpx-line); border-radius: var(--lpx-r-sm); background: var(--lpx-surface); color: var(--lpx-mute); font: var(--lpx-t-small); }
.lpx-search kbd { margin-left: auto; font: var(--lpx-t-mono); font-size: 10.5px; border: 1px solid var(--lpx-line2); border-radius: 4px; padding: 1px 5px; }
.lpx-ctl { height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--lpx-line); border-radius: var(--lpx-r-sm); background: var(--lpx-surface); color: var(--lpx-ink2); font: var(--lpx-t-small); white-space: nowrap; cursor: pointer; transition: border-color var(--lpx-fast); }
.lpx-ctl:hover { border-color: var(--lpx-line2); color: var(--lpx-ink); }
.lpx-ctl.primary { background: var(--lpx-accent-fill); border-color: var(--lpx-accent-fill); color: var(--lpx-accent-ink); font-weight: 600; }
.lpx-ctl .dot, .lpx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lpx-good); display: inline-block; }
.lpx-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--lpx-overlay); border: 1px solid var(--lpx-line2); display: grid; place-items: center; font: 650 11px/1 var(--lpx-font); color: var(--lpx-ink2); flex: none; }
.lpx-page { padding: 20px 24px 48px; max-width: 1680px; width: 100%; margin: 0 auto; }
.lpx-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.lpx-head h1 { margin: 0; font: var(--lpx-t-title); letter-spacing: -.01em; }
.lpx-head p { margin: 4px 0 0; color: var(--lpx-mute); font: var(--lpx-t-small); }
.lpx-head .r { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lpx-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--lpx-line); margin: -4px 0 18px; overflow-x: auto; scrollbar-width: none; }
.lpx-tab { height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; color: var(--lpx-mute); font: 500 13px/1 var(--lpx-font); border-bottom: 2px solid transparent; white-space: nowrap; }
.lpx-tab[aria-selected="true"] { color: var(--lpx-ink); border-color: var(--lpx-accent); }
.lpx-tab .n { font: var(--lpx-t-micro); color: var(--lpx-mute); }
.lpx-asof { font: var(--lpx-t-mono); font-size: 11px; color: var(--lpx-mute); display: inline-flex; align-items: center; gap: 6px; }

/* ---------------------------------------------------------------- grid and cards */
.lpx-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c9 { grid-column: span 9; } .c12 { grid-column: 1 / -1; }
.lpx-card { background: var(--lpx-surface); border: 1px solid var(--lpx-line); border-radius: var(--lpx-r); box-shadow: var(--lpx-e1); min-width: 0; display: flex; flex-direction: column; }
.lpx-card > header { display: flex; align-items: center; gap: 8px; padding: 12px 16px 0; min-height: 40px; }
.lpx-card > header h2 { margin: 0; font: var(--lpx-t-h); }
.lpx-card > header .sub { font: var(--lpx-t-small); color: var(--lpx-mute); }
.lpx-card > header .r { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.lpx-card .body { padding: 12px 16px 16px; flex: 1; min-width: 0; }
.lpx-card > footer { border-top: 1px solid var(--lpx-line); padding: 9px 16px; font: var(--lpx-t-small); color: var(--lpx-mute); display: flex; gap: 12px; align-items: center; }
.lpx-card > footer a { color: var(--lpx-accent); font-weight: 600; margin-left: auto; }
.lpx-card.flush .body { padding: 0; }
.lpx-link { color: var(--lpx-accent); font: 600 12px/1 var(--lpx-font); }

/* KPI tile: label, value, "of d" denominator, delta, sparkline, as-of. A not-measured tile shows the hatch and why, never 0. */
.lpx-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; background: var(--lpx-surface); border: 1px solid var(--lpx-line); border-radius: var(--lpx-r); box-shadow: var(--lpx-e1); overflow: hidden; }
.lpx-kpi { padding: 14px 16px 12px; border-right: 1px solid var(--lpx-line); min-width: 0; display: flex; flex-direction: column; gap: 6px; position: relative; cursor: pointer; transition: background var(--lpx-fast); }
.lpx-kpi:last-child { border-right: 0; }
.lpx-kpi:hover { background: var(--lpx-raised); }
.lpx-kpi .l { font: var(--lpx-t-small); color: var(--lpx-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpx-kpi .v { font: var(--lpx-t-kpi); letter-spacing: -.02em; display: flex; align-items: baseline; gap: 6px; }
.lpx-kpi .v small { font: var(--lpx-t-small); color: var(--lpx-mute); letter-spacing: 0; }
.lpx-kpi .m { display: flex; align-items: center; gap: 8px; font: var(--lpx-t-small); color: var(--lpx-mute); min-height: 16px; }
.lpx-kpi.nm .v { color: var(--lpx-mute); font: 600 15px/1.6 var(--lpx-font); }
.lpx-kpi.nm::after { content: ''; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--lpx-nm); }
.lpx-delta { font: 600 11.5px/1 var(--lpx-font); padding: 2px 6px; border-radius: 999px; }
.lpx-delta.up { color: var(--lpx-good); background: var(--lpx-good-wash); } .lpx-delta.down { color: var(--lpx-bad); background: var(--lpx-bad-wash); } .lpx-delta.flat { color: var(--lpx-mute); background: var(--lpx-raised); }

/* badges, chips, status */
.lpx-badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 5px; font: var(--lpx-t-micro); letter-spacing: .02em; background: var(--lpx-raised); border: 1px solid var(--lpx-line); color: var(--lpx-ink2); white-space: nowrap; }
.lpx-badge.good { color: var(--lpx-good); background: var(--lpx-good-wash); border-color: transparent; }
.lpx-badge.warn { color: var(--lpx-warn); background: var(--lpx-warn-wash); border-color: transparent; }
.lpx-badge.bad { color: var(--lpx-bad); background: var(--lpx-bad-wash); border-color: transparent; }
.lpx-badge.info { color: var(--lpx-accent); background: var(--lpx-accent-wash); border-color: transparent; }
.lpx-badge.nm { background: var(--lpx-nm), var(--lpx-raised); color: var(--lpx-mute); }
.lpx-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--lpx-line); background: var(--lpx-surface); color: var(--lpx-ink2); font: var(--lpx-t-small); white-space: nowrap; cursor: pointer; }
.lpx-chip[aria-pressed="true"], .lpx-chip[data-on="true"] { border-color: var(--lpx-accent-line); background: var(--lpx-accent-wash); color: var(--lpx-ink); }
.lpx-chip .n { color: var(--lpx-mute); font-weight: 600; }
.lpx-key { display: inline-flex; align-items: center; gap: 6px; font: var(--lpx-t-small); color: var(--lpx-ink2); }
.lpx-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* tables (CRM lists): 36 px rows, sticky header, tabular numbers right-aligned */
.lpx-table { width: 100%; border-collapse: separate; border-spacing: 0; font: var(--lpx-t-body); }
.lpx-table th { position: sticky; top: 0; background: var(--lpx-raised); font: var(--lpx-t-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--lpx-mute); text-align: left; padding: 0 12px; height: 34px; border-bottom: 1px solid var(--lpx-line); white-space: nowrap; }
.lpx-table td { padding: 0 12px; height: 40px; border-bottom: 1px solid var(--lpx-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.lpx-table tr:hover td { background: var(--lpx-raised); }
.lpx-table tr[aria-selected="true"] td { background: var(--lpx-accent-wash); }
.lpx-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.lpx-table .who { display: flex; align-items: center; gap: 10px; }
.lpx-table .who b { font-weight: 600; display: block; }
.lpx-table .who span { color: var(--lpx-mute); font: var(--lpx-t-small); }
.lpx-cb { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--lpx-line2); display: inline-block; vertical-align: middle; }
.lpx-cb.on { background: var(--lpx-accent); border-color: var(--lpx-accent); box-shadow: inset 0 0 0 2px var(--lpx-surface); }
.lpx-bulk { flex-wrap: wrap; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--lpx-accent-wash); border-bottom: 1px solid var(--lpx-accent-line); font: var(--lpx-t-small); }
.lpx-bulk b { margin-right: 8px; }

/* bars, meters, segmented */
.lpx-meter { height: 6px; border-radius: 3px; background: var(--lpx-raised); overflow: hidden; position: relative; }
.lpx-meter > i { position: absolute; inset: 0 auto 0 0; background: var(--lpx-accent); border-radius: 3px; }
.lpx-seg { display: inline-flex; padding: 2px; border: 1px solid var(--lpx-line); border-radius: var(--lpx-r-sm); background: var(--lpx-sunk); }
.lpx-seg button { all: unset; height: 24px; padding: 0 10px; border-radius: 4px; font: var(--lpx-t-small); color: var(--lpx-mute); cursor: pointer; }
.lpx-seg button[aria-pressed="true"] { background: var(--lpx-surface); color: var(--lpx-ink); box-shadow: var(--lpx-e1); }

/* charts: SVG text uses tokens; gridlines faint; one highlighted series; direct labels over legends */
.lpx-chart { position: relative; width: 100%; }
.lpx-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.lpx-chart text { font: 500 10.5px var(--lpx-font); fill: var(--lpx-mute); }
.lpx-chart text.ink { fill: var(--lpx-ink); font-weight: 600; font-size: 11.5px; }
.lpx-chart text.big { fill: var(--lpx-ink); font-weight: 650; font-size: 14px; }
.lpx-chart .grid { stroke: var(--lpx-line); stroke-width: 1; }
.lpx-chart .axis { stroke: var(--lpx-line2); }
.lpx-note { font: var(--lpx-t-small); color: var(--lpx-mute); }
.lpx-insight { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--lpx-r-sm); background: var(--lpx-raised); border: 1px solid var(--lpx-line); font: var(--lpx-t-body); }
.lpx-insight i { width: 4px; border-radius: 2px; background: var(--lpx-accent); flex: none; }
.lpx-insight.bad i { background: var(--lpx-bad); } .lpx-insight.warn i { background: var(--lpx-warn); } .lpx-insight.good i { background: var(--lpx-good); }
.lpx-insight b { font-weight: 600; }
.lpx-insight .act { margin-left: auto; color: var(--lpx-accent); font-weight: 600; white-space: nowrap; font: 600 12px/1.5 var(--lpx-font); }
.lpx-list { display: flex; flex-direction: column; }
.lpx-li { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-top: 1px solid var(--lpx-line); min-width: 0; }
.lpx-li:first-child { border-top: 0; }
.lpx-li .t { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lpx-li .t small { display: block; color: var(--lpx-mute); font: var(--lpx-t-small); overflow: hidden; text-overflow: ellipsis; }
.lpx-li .v { font-weight: 600; white-space: nowrap; }
.lpx-empty { display: flex; gap: 12px; align-items: center; padding: 16px; border: 1px dashed var(--lpx-line2); border-radius: var(--lpx-r-sm); color: var(--lpx-mute); font: var(--lpx-t-small); }
.lpx-empty .lpx-ctl { margin-left: auto; }

/* CRM record: header, 3 columns (properties | journey | context) */
.lpx-rec-h { display: flex; gap: 16px; align-items: center; padding: 16px; }
.lpx-rec-h .av { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--lpx-s1), var(--lpx-s6)); display: grid; place-items: center; color: #fff; font: 650 17px/1 var(--lpx-font); flex: none; }
.lpx-rec-h h1 { margin: 0; font: var(--lpx-t-title); }
.lpx-rec-h p { margin: 3px 0 0; color: var(--lpx-mute); font: var(--lpx-t-small); }
.lpx-life { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 0 16px 14px; }
.lpx-life span { height: 26px; display: grid; place-items: center; font: var(--lpx-t-micro); color: var(--lpx-mute); background: var(--lpx-raised); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%); }
.lpx-life span:first-child { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); }
.lpx-life span.done { background: var(--lpx-accent-wash); color: var(--lpx-ink2); }
.lpx-life span.now { background: var(--lpx-accent-fill); color: var(--lpx-accent-ink); }
.lpx-props { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 7px 12px; font: var(--lpx-t-body); }
.lpx-props dt { color: var(--lpx-mute); font: var(--lpx-t-small); padding-top: 1px; }
.lpx-props dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.lpx-tl { position: relative; padding: 4px 16px 16px 16px; }
.lpx-tl-day { font: var(--lpx-t-micro); text-transform: uppercase; letter-spacing: .07em; color: var(--lpx-faint); padding: 14px 0 6px 40px; }
.lpx-ev { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 6px 0; }
.lpx-ev::before { content: ''; position: absolute; left: 13.5px; top: 34px; bottom: -8px; width: 1px; background: var(--lpx-line); }
.lpx-ev:last-child::before { display: none; }
.lpx-ev[data-focus="true"] { background: color-mix(in srgb, var(--lpx-accent) 12%, transparent); border-radius: 8px; outline: 2px solid var(--lpx-accent); outline-offset: 2px; }
.lpx-ev .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--lpx-raised); border: 1px solid var(--lpx-line); color: var(--lpx-ink2); }
.lpx-ev .ic svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.lpx-ev[data-k="email_in"] .ic { background: var(--lpx-good-wash); color: var(--lpx-good); border-color: transparent; }
.lpx-ev[data-k="email_out"] .ic { background: var(--lpx-accent-wash); color: var(--lpx-accent); border-color: transparent; }
.lpx-ev[data-k="deal"] .ic, .lpx-ev[data-k="stage"] .ic { color: var(--lpx-s6); }
.lpx-ev[data-k="task"] .ic { color: var(--lpx-warn); }
.lpx-ev .hd { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.lpx-ev .hd b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.lpx-ev .hd time { font: var(--lpx-t-mono); font-size: 11px; color: var(--lpx-mute); white-space: nowrap; }
.lpx-ev .meta { font: var(--lpx-t-small); color: var(--lpx-mute); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; }
.lpx-ev .msg { margin-top: 8px; padding: 10px 12px; border-radius: var(--lpx-r-sm); background: var(--lpx-raised); border: 1px solid var(--lpx-line); font: var(--lpx-t-body); color: var(--lpx-ink2); white-space: pre-wrap; }
.lpx-ev .msg.in { border-left: 3px solid var(--lpx-good); }
.lpx-ev .msg.out { border-left: 3px solid var(--lpx-accent); }
.lpx-ev details.msg { white-space: normal; }
.lpx-ev details.msg > summary { cursor: pointer; list-style-position: outside; margin-left: 14px; overflow-wrap: anywhere; }
.lpx-ev details.msg > summary .subj { font-weight: 600; color: var(--lpx-ink); }
.lpx-ev details.msg > summary .peek { color: var(--lpx-mute); }
.lpx-ev details.msg[open] > summary .peek { display: none; }
.lpx-ev details.msg .hdr { margin-top: 8px; font: var(--lpx-t-small); color: var(--lpx-mute); }
.lpx-ev details.msg .txt { margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.lpx-ev details.msg .from { margin-top: 8px; font: var(--lpx-t-small); color: var(--lpx-mute); }
.lpx-ev .msg.nr { color: var(--lpx-mute); font: var(--lpx-t-small); border-style: dashed; white-space: normal; }

/* skeleton, motion */
@keyframes lpx-shim { from { background-position: -200px 0; } to { background-position: 200px 0; } }
.lpx-skel { background: linear-gradient(90deg, var(--lpx-raised), var(--lpx-overlay), var(--lpx-raised)); background-size: 400px 100%; animation: lpx-shim 1.2s linear infinite; border-radius: 4px; }
.lpx-hover { transition: transform var(--lpx-fast) var(--lpx-ease), border-color var(--lpx-fast); }
.lpx-hover:hover { transform: translateY(-1px); border-color: var(--lpx-accent-line); }

/* bottom tab bar (phone) */
.lpx-tabbar { display: none; }

/* ---------------------------------------------------------------- responsive: 1280 / 1024 / 640 */
@media (max-width: 1280px) { .lpx-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lpx-kpi:nth-child(3n) { border-right: 0; } .lpx-kpi:nth-child(-n+3) { border-bottom: 1px solid var(--lpx-line); } }
@media (max-width: 1024px) {
  .lpx-shell { grid-template-columns: 1fr; } .lpx-rail { display: none; }
  .c3, .c4, .c5, .c6, .c7, .c8, .c9 { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .lpx .hide-sm { display: none !important; } .lpx-card > footer { flex-wrap: wrap; }
  .lpx-main { border-left: 0; } .lpx-shell { background: none; }
  .lpx-head .r, .lpx-seg { max-width: 100%; overflow-x: auto; } .lpx-head > div:first-child { min-width: 0; }
  .lpx-card > header { flex-wrap: wrap; } .lpx-card > header .r { margin-left: 0; }
  .lpx-top { padding: 0 12px; gap: 8px; } .lpx-search { flex: 0 0 auto; margin: 0 0 0 auto; width: 36px; justify-content: center; padding: 0; } .lpx-search span, .lpx-search kbd { display: none; } .lpx-top .hide-sm { display: none; }
  .lpx-crumb { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* the crumb gives way so the search button and freshness pill fit at 390 px */
  .lpx-page { padding: 14px 12px 88px; }
  .lpx-grid { gap: 12px; }
  .lpx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lpx-kpi { border-bottom: 1px solid var(--lpx-line); } .lpx-kpi:nth-child(3n) { border-right: 1px solid var(--lpx-line); } .lpx-kpi:nth-child(2n) { border-right: 0; }
  .lpx-kpi .v { font-size: 22px; }
  .lpx-head h1 { font-size: 18px; }
  .lpx-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: 62px; background: var(--lpx-surface); border-top: 1px solid var(--lpx-line); padding-bottom: env(safe-area-inset-bottom); }
  .lpx-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 600 10px/1 var(--lpx-font); color: var(--lpx-mute); position: relative; }
  .lpx-tabbar a svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; }
  .lpx-tabbar a[aria-current="page"] { color: var(--lpx-accent); }
  .lpx-tabbar a .n { position: absolute; top: 6px; left: calc(50% + 6px); background: var(--lpx-bad); color: #fff; border-radius: 999px; font: 700 9px/1 var(--lpx-font); padding: 2px 4px; }
  .lpx-table .hide-sm { display: none; }
  .lpx-props { grid-template-columns: 96px minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- shell extras (live app) */
.lpx-menu { display: none; padding: 0 8px; }
.lpx-menu svg, .lpx-search svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.lpx-filters .nv-filters { display: flex; gap: 8px; }
.lpx-filters select { height: 32px; border: 1px solid var(--lpx-line); border-radius: var(--lpx-r-sm); background: var(--lpx-surface); color: var(--lpx-ink2); font: var(--lpx-t-small); padding: 0 8px; }
.lpx-root .lpx-page > .page { padding: 0; max-width: none; } /* a legacy page shown inside the shell */
.lpx-tabbar a svg { pointer-events: none; }
button.lpx-cb { padding: 0; background: none; cursor: pointer; }
button.lpx-chip { font: var(--lpx-t-small); }
@media (max-width: 1024px) {
  .lpx-menu { display: inline-flex; }
  .lpx-rail[data-open="true"] { display: flex; position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 40; background: var(--lpx-sunk); box-shadow: var(--lpx-e2); overflow-y: auto; }
}

/* Forms (report builder, schedule, alerts): labelled fields, 36 px controls, checkboxes, the selected row in a list. */
.lpx-form { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.lpx-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100%; border: 0; padding: 0; margin: 0; }
.lpx-field > span:first-child, .lpx-field > legend { font: var(--lpx-t-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--lpx-mute); padding: 0; margin-bottom: 2px; }
.lpx-input { height: 36px; min-width: 0; max-width: 100%; border: 1px solid var(--lpx-line); border-radius: var(--lpx-r-sm); background: var(--lpx-surface); color: var(--lpx-ink); font: var(--lpx-t-body); padding: 0 10px; }
.lpx-input:focus-visible, .lpx-ctl:focus-visible { outline: 2px solid var(--lpx-focus); outline-offset: 1px; }
.lpx-check { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; font: var(--lpx-t-small); color: var(--lpx-ink2); cursor: pointer; }
.lpx-check input { accent-color: var(--lpx-accent); margin: 0; }
.lpx-checks { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.lpx-ctl:disabled { opacity: .5; cursor: not-allowed; }
.lpx-li[aria-current="true"] { background: var(--lpx-accent-wash); box-shadow: inset 2px 0 0 var(--lpx-accent); }
.lpx-chart [data-rpt-point] { cursor: pointer; outline: none; }
.lpx-chart [data-rpt-point]:hover rect:not([fill="transparent"]), .lpx-chart [data-rpt-point]:focus rect:not([fill="transparent"]) { opacity: .8; }

/* ⌘K global search (ds/lpx-search.js) */
button.lpx-search { cursor: pointer; text-align: left; transition: border-color var(--lpx-fast) var(--lpx-ease); }
button.lpx-search:hover { border-color: var(--lpx-line2); color: var(--lpx-ink2); }
button.lpx-search:focus-visible { outline: 2px solid var(--lpx-focus); outline-offset: 1px; }
.lpx-palette-back { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--lpx-page) 55%, transparent); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.lpx-palette { width: min(640px, 100%); max-height: 70vh; display: flex; flex-direction: column; background: var(--lpx-overlay); border: 1px solid var(--lpx-line2); border-radius: var(--lpx-r); box-shadow: var(--lpx-e2); overflow: hidden; }
.lpx-palette-in { height: 48px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--lpx-line); background: transparent; color: var(--lpx-ink); font: var(--lpx-t-body); font-size: 15px; outline: none; }
.lpx-palette-list { overflow-y: auto; padding: 6px; }
.lpx-palette-kind { font: var(--lpx-t-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--lpx-mute); padding: 10px 10px 4px; }
.lpx-palette-hit { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--lpx-r-sm); color: var(--lpx-ink); text-decoration: none; }
.lpx-palette-hit b { font: var(--lpx-t-body); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpx-palette-hit small { font: var(--lpx-t-small); color: var(--lpx-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpx-palette-hit[aria-selected="true"] { background: var(--lpx-accent-wash); }
.lpx-palette-empty { padding: 18px 12px; color: var(--lpx-mute); font: var(--lpx-t-small); }
.lpx-palette-foot { padding: 8px 14px; border-top: 1px solid var(--lpx-line); color: var(--lpx-mute); font: var(--lpx-t-micro); }
@media (prefers-reduced-motion: reduce) { button.lpx-search { transition: none; } }
/* A deep-linked card scrolls into view below the sticky top bar, not under it (Decide ?id= links on a phone). */
.lpx-root [data-dc-card], .lpx-root [id^="dcs-"] { scroll-margin-top: calc(var(--lpx-top) + 12px); }

/* ================================================================ foundation components (11-13)
   Kit components added for the enterprise pass (ds/lpx-kit.js; usage in ds/KIT.md). Every rule reads tokens only. */
/* Page header: title, the one-line answer, actions on the right, meta (as-of) under the answer. */
.lpx-ph { display: flex; align-items: flex-start; gap: var(--lpx-4); margin: 0 0 var(--lpx-4); flex-wrap: wrap; }
.lpx-ph > div:first-child { min-width: 0; flex: 1 1 320px; }
.lpx-ph h1 { margin: 0; font: 650 22px/1.2 var(--lpx-font); letter-spacing: -.015em; color: var(--lpx-ink); }
.lpx-ph .ans { margin: 6px 0 0; font: var(--lpx-t-lead); color: var(--lpx-ink2); max-width: 90ch; }
.lpx-ph .ans b { color: var(--lpx-ink); font-weight: 600; }
.lpx-ph .ans > span, .lpx-ph .ans > a { white-space: nowrap; }
.lpx-ph .ans > a { color: var(--lpx-ink2); text-decoration: underline; text-decoration-color: var(--lpx-line2); text-underline-offset: 3px; }
.lpx-ph .ans > a:hover { color: var(--lpx-ink); }
.lpx-ph .ans > :is(.bad, .warn, .good)::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin: 0 6px 1px 0; vertical-align: middle; background: var(--lpx-mute); }
.lpx-ph .ans > .bad::before { background: var(--lpx-bad); } .lpx-ph .ans > .warn::before { background: var(--lpx-warn); } .lpx-ph .ans > .good::before { background: var(--lpx-good); }
@media (max-width: 640px) { .lpx-ph .ans > span, .lpx-ph .ans > a { white-space: normal; } }
.lpx-ph .meta { margin-top: 6px; font: var(--lpx-t-small); color: var(--lpx-mute); display: flex; gap: 12px; flex-wrap: wrap; }
.lpx-ph .acts { display: flex; gap: var(--lpx-2); align-items: center; flex-wrap: wrap; margin-left: auto; }
.lpx-head.merged { margin-bottom: 12px; } /* a page's own head under the shell header: its title is the shell's, so only its line and actions show */
.lpx-head.merged p { margin-top: 0; }
.lpx-head.under h2 { margin: 0; font: 600 16px/1.3 var(--lpx-font); letter-spacing: -.005em; } /* a page's own title under the shell header reads as a section title */

/* Answer strip: what changed, at risk, to decide here. Three quiet columns, label micro caps, figures tabular. */
.lpx-root .nv10-strip, .lpx-answer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 var(--lpx-5); padding: 0;
  border: 1px solid var(--lpx-line); border-radius: var(--lpx-r); background: var(--lpx-surface); box-shadow: var(--lpx-e1); overflow: hidden; }
.lpx-root .nv10-strip .nv10-col { padding: 12px 16px 14px; border-left: 1px solid var(--lpx-line); min-width: 0; }
.lpx-root .nv10-strip .nv10-col:first-child { border-left: 0; }
.lpx-root .nv10-strip .nv10-col h3 { margin: 0 0 8px; font: var(--lpx-t-label); letter-spacing: .07em; text-transform: uppercase; color: var(--lpx-mute); display: flex; align-items: center; gap: 8px; }
.lpx-root .nv10-strip .nv10-col h3 a { margin-left: auto; text-transform: none; letter-spacing: 0; color: var(--lpx-accent); font: 600 12px/1 var(--lpx-font); }
.lpx-root .nv10-strip ul { gap: 6px; font: var(--lpx-t-body); }
.lpx-root .nv10-strip li { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lpx-root .nv10-strip li a { color: var(--lpx-ink2); } .lpx-root .nv10-strip li a:hover { color: var(--lpx-ink); text-decoration: underline; text-underline-offset: 2px; }
.lpx-root .nv10-strip li b { color: var(--lpx-ink); font-weight: 600; margin-right: 2px; }
.lpx-root .nv10-strip li.bad b { color: var(--lpx-bad); }
.lpx-root .nv10-strip small { color: var(--lpx-mute); font: var(--lpx-t-small); }
.lpx-root .nv10-strip .nv10-nm { font: var(--lpx-t-small); color: var(--lpx-mute); }
.lpx-root .nv10-strip .nv10-more { grid-column: 1 / -1; padding: 8px 16px; margin: 0; border-top: 1px solid var(--lpx-line); font: var(--lpx-t-small); color: var(--lpx-mute); }
.lpx-root .nv10-strip .nv10-more a { color: var(--lpx-accent); }

/* KPI delta: signed, with its period; good/bad follows the metric's direction, not the sign. */
.lpx-kpi .d { display: inline-flex; align-items: center; gap: 6px; font: var(--lpx-t-small); color: var(--lpx-mute); }
.lpx-kpi .d .lpx-delta { font-variant-numeric: tabular-nums; }

/* Filters bar: chips and search on the left, actions on the right. */
.lpx-fbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.lpx-fbar .r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.lpx-fbar .lpx-input { height: 32px; min-width: 200px; }

/* Data table: wrapper with a toolbar, density, sortable heads, row actions, and its states. */
.lpx-dt { background: var(--lpx-surface); border: 1px solid var(--lpx-line); border-radius: var(--lpx-r); box-shadow: var(--lpx-e1); overflow: hidden; }
.lpx-dt-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--lpx-line); font: var(--lpx-t-small); color: var(--lpx-mute); }
.lpx-dt-bar .r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.lpx-dt-scroll { overflow: auto; max-height: var(--lpx-dt-max, none); }
.lpx-dt .lpx-table th { z-index: 1; }
.lpx-dt .lpx-table th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.lpx-dt .lpx-table th button:focus-visible { outline: 2px solid var(--lpx-focus); outline-offset: 2px; border-radius: 3px; }
.lpx-dt .lpx-table th[aria-sort="ascending"] button::after { content: '↑'; color: var(--lpx-ink2); }
.lpx-dt .lpx-table th[aria-sort="descending"] button::after { content: '↓'; color: var(--lpx-ink2); }
.lpx-dt .lpx-table td { height: var(--lpx-row); }
.lpx-dt[data-density="compact"] .lpx-table td { height: var(--lpx-row-compact); }
.lpx-dt[data-density="comfy"] .lpx-table td { height: var(--lpx-row-comfy); }
.lpx-dt .lpx-table tr:last-child td { border-bottom: 0; }
.lpx-dt .lpx-table tr[data-click] { cursor: pointer; }
.lpx-dt .ra { width: 1%; text-align: right; white-space: nowrap; }
.lpx-dt .ra .lpx-ctl { height: 26px; padding: 0 8px; opacity: .0; transition: opacity var(--lpx-fast); }
.lpx-dt tr:hover .ra .lpx-ctl, .lpx-dt tr:focus-within .ra .lpx-ctl { opacity: 1; }
@media (hover: none) { .lpx-dt .ra .lpx-ctl { opacity: 1; } }
.lpx-state { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 28px 20px; color: var(--lpx-mute); font: var(--lpx-t-body); }
.lpx-state b { color: var(--lpx-ink); font: var(--lpx-t-h); }
.lpx-state.bad b { color: var(--lpx-bad); }
.lpx-state .lpx-ctl { margin-top: 6px; }

/* Decision card: title, why, stake and due, options as buttons (A, B, C), and a custom instruction. */
.lpx-dc { background: var(--lpx-surface); border: 1px solid var(--lpx-line); border-radius: var(--lpx-r); box-shadow: var(--lpx-e1); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.lpx-dc.late { box-shadow: inset 3px 0 0 var(--lpx-bad), var(--lpx-e1); }
.lpx-dc .hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lpx-dc .hd h3 { margin: 0; font: 600 15px/1.35 var(--lpx-font); color: var(--lpx-ink); flex: 1 1 320px; min-width: 0; }
.lpx-dc .mt { display: flex; gap: 12px; flex-wrap: wrap; font: var(--lpx-t-small); color: var(--lpx-mute); }
.lpx-dc .mt b { color: var(--lpx-ink); font-weight: 600; }
.lpx-dc .why { font: var(--lpx-t-body); color: var(--lpx-ink2); margin: 0; }
.lpx-dc .opts { display: flex; flex-wrap: wrap; gap: 8px; }
.lpx-opt { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border-radius: var(--lpx-r-md); border: 1px solid var(--lpx-line2); background: var(--lpx-raised); color: var(--lpx-ink); font: 500 13px/1.3 var(--lpx-font); cursor: pointer; text-align: left; transition: border-color var(--lpx-fast), background var(--lpx-fast); max-width: 100%; }
.lpx-opt:hover { border-color: var(--lpx-accent-line); background: var(--lpx-accent-wash); }
.lpx-opt kbd { font: 600 11px/1 var(--lpx-mono); border: 1px solid var(--lpx-line2); border-radius: 4px; padding: 2px 5px; color: var(--lpx-ink2); background: var(--lpx-surface); }
.lpx-opt.rec { background: var(--lpx-accent-fill); border-color: var(--lpx-accent-fill); color: var(--lpx-accent-ink); }
.lpx-opt.rec kbd { background: rgba(255, 255, 255, .16); border-color: transparent; color: inherit; }
.lpx-opt.rec:hover { filter: brightness(1.06); }
.lpx-dc .ins { display: flex; gap: 8px; }
.lpx-dc .ins .lpx-input { flex: 1; }

/* Drawer: record detail from the right; a sheet from the bottom on a phone. */
.lpx-scrim { position: fixed; inset: 0; z-index: var(--lpx-z-drawer); background: var(--lpx-scrim); animation: lpx-fade var(--lpx-med) var(--lpx-ease); }
.lpx-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: calc(var(--lpx-z-drawer) + 1); width: min(560px, 100vw); background: var(--lpx-overlay); border-left: 1px solid var(--lpx-line2); box-shadow: var(--lpx-e3); display: flex; flex-direction: column; animation: lpx-slide var(--lpx-med) var(--lpx-ease); }
.lpx-drawer > header { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--lpx-line); }
.lpx-drawer > header h2 { margin: 0; font: var(--lpx-t-title); font-size: 17px; }
.lpx-drawer > header p { margin: 4px 0 0; font: var(--lpx-t-small); color: var(--lpx-mute); }
.lpx-drawer > header .x { margin-left: auto; }
.lpx-drawer > .body { flex: 1; overflow: auto; padding: 16px 20px; }
.lpx-drawer > footer { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--lpx-line); }
@keyframes lpx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lpx-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lpx-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Toasts: bottom right on a desktop, above the tab bar on a phone. */
.lpx-toasts { position: fixed; right: 20px; bottom: 20px; z-index: var(--lpx-z-toast); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.lpx-toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 420px; padding: 10px 12px 10px 14px; border-radius: var(--lpx-r-md); background: var(--lpx-overlay); border: 1px solid var(--lpx-line2); box-shadow: var(--lpx-e2); font: var(--lpx-t-body); color: var(--lpx-ink); animation: lpx-rise var(--lpx-med) var(--lpx-ease); }
.lpx-toast i { width: 8px; height: 8px; border-radius: 50%; background: var(--lpx-accent); flex: none; }
.lpx-toast.good i { background: var(--lpx-good); } .lpx-toast.bad i { background: var(--lpx-bad); } .lpx-toast.warn i { background: var(--lpx-warn); }
.lpx-toast button { margin-left: auto; all: unset; cursor: pointer; color: var(--lpx-mute); padding: 2px 4px; }

/* Skeletons: the shape of what is loading. */
.lpx-sk { display: grid; gap: 10px; }
.lpx-sk .lpx-skel { height: 12px; }
.lpx-sk .lpx-skel.h { height: 28px; width: 40%; }
.lpx-sk-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.lpx-sk-kpis .lpx-skel { height: 76px; border-radius: var(--lpx-r); }

/* Rail: workspace switcher at the top, the member menu at the foot. */
.lpx-ws { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; margin: 0 0 8px; border-radius: var(--lpx-r-md); border: 1px solid transparent; background: none; color: var(--lpx-ink); cursor: pointer; text-align: left; font: 650 14px/1.15 var(--lpx-font); }
.lpx-ws:hover { background: var(--lpx-raised); border-color: var(--lpx-line); }
.lpx-ws i { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--lpx-accent), var(--lpx-s6)); display: grid; place-items: center; color: #fff; font: 700 13px/1 var(--lpx-font); font-style: normal; flex: none; }
.lpx-ws small { display: block; font: var(--lpx-t-small); color: var(--lpx-mute); margin-top: 2px; font-weight: 500; }
.lpx-ws .car { margin-left: auto; color: var(--lpx-mute); font-size: 11px; }
.lpx-pop { position: absolute; z-index: calc(var(--lpx-z-rail) + 5); min-width: 240px; background: var(--lpx-overlay); border: 1px solid var(--lpx-line2); border-radius: var(--lpx-r); box-shadow: var(--lpx-e2); padding: 6px; display: flex; flex-direction: column; gap: 1px; animation: lpx-rise var(--lpx-fast) var(--lpx-ease); }
.lpx-pop[hidden] { display: none; }
.lpx-pop .lpx-nav { height: 34px; }
.lpx-pop button.lpx-nav { width: 100%; border: 0; background: none; cursor: pointer; text-align: left; }
.lpx-pop hr { border: 0; border-top: 1px solid var(--lpx-line); margin: 4px 2px; }
.lpx-pop .lbl { font: var(--lpx-t-micro); text-transform: uppercase; letter-spacing: .07em; color: var(--lpx-faint); padding: 8px 10px 4px; }
.lpx-user { position: relative; border-top: 1px solid var(--lpx-line); padding-top: 8px; margin-top: 6px; }
.lpx-user > button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: var(--lpx-r-md); cursor: pointer; color: var(--lpx-ink2); font: 500 13px/1.2 var(--lpx-font); }
.lpx-user > button:hover { background: var(--lpx-raised); color: var(--lpx-ink); }
.lpx-user > button:focus-visible { outline: 2px solid var(--lpx-focus); outline-offset: 1px; }
.lpx-user > button small { display: block; color: var(--lpx-mute); font: var(--lpx-t-small); }
.lpx-user .lpx-pop { bottom: calc(100% + 6px); left: 0; right: 0; }
.lpx-wsbox { position: relative; }
.lpx-wsbox .lpx-pop { top: calc(100% - 4px); left: 0; right: 0; }
.lpx-wsbox .wsw, .lpx-wsbox .wsw-wrap { display: block; }
.lpx-rail { overflow-y: auto; scrollbar-width: thin; }
.lpx-rail .lpx-nav { position: relative; }
.lpx-top .lpx-fresh { font: var(--lpx-t-small); }
.lpx-wsw { padding: 0 2px 6px; } .lpx-wsw .wsw-btn { width: 100%; justify-content: space-between; } .lpx-wsw [data-wsw-off] { display: none; }
.lpx-wsw .wsw-pop { left: 0; right: 0; }

@media (prefers-reduced-motion: reduce) { .lpx-drawer, .lpx-scrim, .lpx-toast, .lpx-pop { animation: none; } }
@media (max-width: 640px) {
  .lpx-ph h1 { font-size: 19px; }
  .lpx-ph .acts { margin-left: 0; }
  .lpx-root .nv10-strip { grid-template-columns: 1fr; }
  .lpx-root .nv10-strip .nv10-col { border-left: 0; border-top: 1px solid var(--lpx-line); padding: 10px 14px; }
  .lpx-root .nv10-strip .nv10-col:first-child { border-top: 0; }
  .lpx-drawer { top: auto; left: 0; width: 100vw; max-height: 88vh; border-left: 0; border-top: 1px solid var(--lpx-line2); border-radius: 14px 14px 0 0; }
  .lpx-toasts { left: 12px; right: 12px; bottom: 76px; }
  .lpx-toast { min-width: 0; max-width: none; }
  .lpx-fbar .lpx-input { min-width: 0; flex: 1 1 160px; }
}
/* Touch targets on a phone (UI WP3, 11-13): chips, segmented controls, tabs, table sort heads and row actions are at
   least 44 px tall; the table density toggle hides (a phone row is already roomy). */
@media (max-width: 640px) {
  .lpx .lpx-chip, .lpx .lpx-tab, .lpx .lpx-dt .ra .lpx-ctl { min-height: 44px; }
  .lpx .lpx-seg button { display: inline-flex; align-items: center; height: auto; min-height: 44px; }
  .lpx .lpx-seg { padding: 2px; }
  .lpx .lpx-dt-bar .lpx-seg { display: none; }
  .lpx .lpx-dt th > button { display: inline-flex; align-items: center; min-height: 44px; }
  .lpx .lpx-dt td a.lpx-link, .lpx .lpx-card > footer a, .lpx .lpx-card > footer button, .lpx .lpx-head p a { display: inline-flex; align-items: center; min-height: 44px; }
  .lpx .t9-bar button, .lpx .t9-bar select { min-height: 44px; }
}