/* ============================================================
   FLIGHTLINES — design tokens (GENERATED — DO NOT EDIT)
   Source of truth: packages/tokens/tokens/*.json (W3C DTCG).
   Regenerate: pnpm --filter @flightlines/tokens build
   ============================================================ */

:root, [data-theme="dark"] {
  --fl-bg-0: #000000;
  --fl-bg-1: #0a0d10;
  --fl-bg-2: #11161b;
  --fl-bg-3: #1a2127;
  --fl-bg-4: #232c34;
  --fl-tx-0: #f5f7fa;
  --fl-tx-1: #c7ced5;
  --fl-tx-2: #8590a0;
  --fl-tx-3: #4a5660;
  --fl-line-2: rgba(255,255,255,0.34);
  --fl-line-3: rgba(255,255,255,0.36);
  --fl-line: rgba(255,255,255,0.13);
  --fl-overlay: rgba(0,0,0,0.66);
  --fl-shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --fl-shadow-2: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.4);
  --fl-shadow-3: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px rgba(0,0,0,0.7), 0 8px 16px rgba(0,0,0,0.5);
}

[data-theme="light"] {
  --fl-bg-0: #f5f6f8;
  --fl-bg-1: #ffffff;
  --fl-bg-2: #f9fafb;
  --fl-bg-3: #f0f2f5;
  --fl-bg-4: #e3e7ec;
  --fl-tx-0: #04070a;
  --fl-tx-1: #1f2933;
  --fl-tx-2: #5a6671;
  --fl-tx-3: #aab3bd;
  --fl-line-2: rgba(8,12,16,0.44);
  --fl-line-3: rgba(8,12,16,0.42);
  --fl-line: rgba(8,12,16,0.16);
  --fl-overlay: rgba(8,12,16,0.45);
  --fl-shadow-1: 0 1px 2px rgba(8,12,16,0.06), 0 0 0 1px rgba(8,12,16,0.04);
  --fl-shadow-2: 0 8px 24px rgba(8,12,16,0.10), 0 1px 2px rgba(8,12,16,0.06);
  --fl-shadow-3: 0 24px 60px rgba(8,12,16,0.14), 0 4px 12px rgba(8,12,16,0.08);
}

:root {
  --fl-hover: var(--fl-bg-3);
  --fl-hover-veil: color-mix(in oklch, var(--fl-tx-0) 6%, transparent);
  --fl-signal: oklch(78% 0.16 220);
  --fl-signal-strong: oklch(70% 0.17 220);
  --fl-signal-ink: oklch(20% 0.05 220);
  --fl-signal-bg: oklch(78% 0.16 220 / 0.10);
  --fl-signal-line: oklch(78% 0.16 220 / 0.50);
  --fl-amber: oklch(82% 0.16 75);
  --fl-amber-bg: oklch(82% 0.16 75 / 0.10);
  --fl-amber-line: oklch(82% 0.16 75 / 0.35);
  --fl-crimson: oklch(68% 0.20 25);
  --fl-crimson-bg: oklch(68% 0.20 25 / 0.10);
  --fl-crimson-line: oklch(68% 0.20 25 / 0.35);
  --fl-mint: oklch(78% 0.14 162);
  --fl-mint-bg: oklch(78% 0.14 162 / 0.10);
  --fl-mint-line: oklch(78% 0.14 162 / 0.35);
  --fl-chart-blue: oklch(70% 0.15 252);
  --fl-chart-blue-bg: oklch(70% 0.15 252 / 0.10);
  --fl-chart-blue-line: oklch(70% 0.15 252 / 0.35);
  --fl-chart-water-open: oklch(72% 0.13 245 / 0.50);
  --fl-chart-water-inland: oklch(64% 0.14 250 / 0.50);
  --fl-chart-magenta: oklch(68% 0.16 350);
  --fl-chart-magenta-bg: oklch(68% 0.16 350 / 0.10);
  --fl-chart-magenta-line: oklch(68% 0.16 350 / 0.35);
  --fl-chart-canvas: var(--fl-bg-1);
  --fl-chart-grid: var(--fl-line-2);
  --fl-chart-grid-minor: var(--fl-line);
  --fl-chart-ink: var(--fl-tx-0);
  --fl-chart-line: var(--fl-line);
  --fl-chart-marker-bg: var(--fl-bg-1);
  --fl-chart-hud-bg: var(--fl-bg-2);
  --fl-chart-label-halo: var(--fl-bg-1);
  --fl-chart-amber: var(--fl-amber);
  --fl-chart-obstruction: var(--fl-tx-0);
  --fl-chart-contour: oklch(64% 0.1 58);
  --fl-relief-below-sea: oklch(38% 0.05 245);
  --fl-relief-0-1k: oklch(34% 0.04 150);
  --fl-relief-1-2k: oklch(40% 0.05 140);
  --fl-relief-2-3k: oklch(45% 0.05 120);
  --fl-relief-3-5k: oklch(48% 0.06 95);
  --fl-relief-5-7k: oklch(50% 0.07 70);
  --fl-relief-7-9k: oklch(50% 0.08 55);
  --fl-relief-9-12k: oklch(48% 0.08 45);
  --fl-relief-12k: oklch(82% 0.01 90);
  --fl-font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --fl-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fl-font-brand: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fl-text-eyebrow: 10px;
  --fl-text-caption: 12px;
  --fl-text-body: 14px;
  --fl-text-subtitle: 16px;
  --fl-text-title: 22px;
  --fl-text-display: 32px;
  --fl-s-0: 0;
  --fl-s-1: 2px;
  --fl-s-2: 4px;
  --fl-s-3: 8px;
  --fl-s-4: 12px;
  --fl-s-5: 16px;
  --fl-s-6: 24px;
  --fl-s-7: 40px;
  --fl-r-0: 0;
  --fl-r-sm: 3px;
  --fl-r-full: 999px;
  --fl-h-sm: 24px;
  --fl-h-md: 30px;
  --fl-h-lg: 36px;
  --fl-toggle-sm: 14px;
  --fl-toggle-md: 16px;
  --fl-line-tight: 1.4;
  --fl-line-base: 1.5;
  --fl-line-loose: 1.6;
  --fl-ease: cubic-bezier(.2,.7,.2,1);
  --fl-dur-1: 90ms;
  --fl-dur-2: 160ms;
  --fl-dur-3: 240ms;
  --fl-z-surface: 100;
  --fl-z-modal: 110;
  --fl-z-floating: 120;
  --fl-z-tooltip: 130;
  --fl-z-toast: 140;
  --fl-focus-ring: 0 0 0 1px var(--fl-bg-0), 0 0 0 3px var(--fl-signal-line);
}

/* ============================================================
   FLIGHTLINES — base + component layer (HAND-AUTHORED)
   The framework-agnostic CSS that CONSUMES the generated tokens: the reset,
   the typography role classes (the CSS half of the React role primitives),
   keyframes, z-layer classes, and component primitives (.fl-btn, .fl-control,
   …). This is NOT token-generated — it is the design system's stylesheet, and
   it ships in the same sheet as the tokens (sd.build.mjs appends it after the
   generated `:root`/theme blocks). Token VALUES live in tokens/*.json.
   ============================================================ */

/* color-scheme is a real CSS property (UA canvas/scrollbars/form controls track
   the theme), not a custom property — so it cannot be emitted by the token
   generator and is declared here against the same selectors. */
:root, [data-theme="dark"] { color-scheme: dark; }
[data-theme="light"]       { color-scheme: light; }

/* —— Base ——————————————————————————————————————————————— */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fl-bg-0);
  color: var(--fl-tx-1);
  font-family: var(--fl-font-sans);
  font-size: var(--fl-text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02", "cv11";
  transition: background-color var(--fl-dur-3) var(--fl-ease), color var(--fl-dur-3) var(--fl-ease);
}

::selection { background: var(--fl-signal-line); color: var(--fl-tx-0); }

/* Scrollbars — the STANDARD CSS Scrollbars Module Level 1 properties, NOT the legacy
   non-standard `::-webkit-scrollbar` pseudo-elements. Giving `::-webkit-scrollbar` a
   width FORCES macOS to replace its native auto-hiding OVERLAY scrollbar with a classic,
   always-present, space-reserving one (a documented Blink behavior). That permanent
   scrollbar insets every scroller's content box by ~10px, which is why a selected ledger
   row's full-bleed fill stopped short of the pane's right edge — the "strip". The
   standard `scrollbar-color`/`scrollbar-width` leave macOS overlay intact (the OS draws
   and auto-hides a thumb OVER the content, reserving no space — the fill reaches the
   edge), while still theming the classic scrollbar shown on Windows/Linux and on a Mac
   set to "always show scroll bars". Inherited, so `.fl-scrollband` (scrollbar-width:none)
   still overrides locally. Chrome 121+/Firefox/Safari 18.2+; older WebKit falls back to
   the default scrollbar — acceptable. */
* { scrollbar-width: thin; scrollbar-color: var(--fl-bg-3) transparent; }

:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--fl-focus-ring); }

/* —— Mono tick label —————————————————————————————————— */
.fl-tick {
  font-family: var(--fl-font-mono);
  font-size: var(--fl-text-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fl-tx-2);
  font-weight: 500;
}

/* —— Typography roles ——————————————————————————————————
   Each class is the FULL visual spec for one role: size + weight + family +
   transform + tracking + leading + default color. The React role primitives
   (Body, Caption, Label, Eyebrow, Title, Subtitle, Display, Code) are thin
   wrappers that apply the matching class. There is intentionally no abstract
   size scale — every text element commits to a role, and this stylesheet is
   the single source of truth for what each role looks like.

   Controls that wrap a native element (button, input) consume the role tokens
   directly (e.g. `font-size: var(--fl-text-body)`) rather than the class, so
   their other state styling (focus, hover, disabled) stays self-contained. */
.fl-display, .fl-title, .fl-subtitle, .fl-body, .fl-label, .fl-caption, .fl-eyebrow, .fl-code {
  margin: 0;
}
.fl-display {
  font-family: var(--fl-font-sans);
  font-size: var(--fl-text-display);
  font-weight: 600;
  color: var(--fl-tx-0);
  letter-spacing: -0.015em;
  line-height: 1.12;
}
.fl-title {
  font-family: var(--fl-font-sans);
  font-size: var(--fl-text-title);
  font-weight: 600;
  color: var(--fl-tx-0);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.fl-subtitle {
  font-family: var(--fl-font-sans);
  font-size: var(--fl-text-subtitle);
  font-weight: 500;
  color: var(--fl-tx-0);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.fl-body {
  font-family: var(--fl-font-sans);
  font-size: var(--fl-text-body);
  font-weight: 400;
  color: var(--fl-tx-1);
  line-height: 1.5;
}
.fl-label {
  font-family: var(--fl-font-sans);
  font-size: var(--fl-text-body);
  font-weight: 500;
  color: var(--fl-tx-1);
  line-height: 1.35;
}
.fl-caption {
  font-family: var(--fl-font-sans);
  font-size: var(--fl-text-caption);
  font-weight: 400;
  color: var(--fl-tx-2);
  line-height: 1.4;
}
.fl-eyebrow {
  font-family: var(--fl-font-mono);
  font-size: var(--fl-text-eyebrow);
  font-weight: 500;
  color: var(--fl-tx-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}
.fl-code {
  font-family: var(--fl-font-mono);
  font-size: var(--fl-text-body);
  font-weight: 400;
  color: var(--fl-tx-1);
  line-height: 1.5;
}

/* —— Brand wordmark — the ONE lockup, as a shared CSS contract ————————
   The mark glyph (✈︎) + the brand name on the Subtitle role in the brand
   typeface. BOTH web surfaces apply this class — the React <Wordmark> and the
   static marketing site — so the lockup can never drift; iOS renders the same
   spec from the generated Swift tokens. The element takes role="img" + an
   accessible name, so the ::before glyph and the lowercase wordmark text are
   decorative and it announces "Flightlines" once. Color is inherited
   (currentColor) so each surface sets its own. */
.fl-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--fl-s-3);
  font-family: var(--fl-font-brand);
  font-size: var(--fl-text-subtitle);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  color: currentColor;
  white-space: nowrap;
  user-select: none;
}
.fl-wordmark::before {
  content: "\2708\FE0E";   /* ✈︎ = U+2708 airplane + U+FE0E text-presentation selector */
  font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
  font-size: 1em;
  line-height: 1;
}

/* —— Keyframes ——————————————————————————————————————— */
@keyframes fl-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fl-pop-in  { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fl-spin    { to { transform: rotate(360deg); } }
@keyframes fl-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes fl-blink   { 0%, 60% { opacity: 1; } 60.01%, 100% { opacity: .2; } }
@keyframes fl-drawer-right  { from { transform: translateX(100%); }  to { transform: translateX(0); } }
@keyframes fl-drawer-left   { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes fl-indet         { 0% { left: -40%; } 100% { left: 100%; } }

/* —— Stacking layer classes — the ONE way a fixed/portaled element takes
   its z slot (see the --fl-z-* scale; csstype forbids string z-index, so
   the class IS the API — no inline literals, no casts). —— */
.fl-layer-surface  { z-index: var(--fl-z-surface); }
.fl-layer-modal    { z-index: var(--fl-z-modal); }
.fl-layer-floating { z-index: var(--fl-z-floating); }
.fl-layer-tooltip  { z-index: var(--fl-z-tooltip); }
.fl-layer-toast    { z-index: var(--fl-z-toast); }

/* —— Component primitives (interaction states live here, not in JS) —— */

.fl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fl-s-3);
  font-family: var(--fl-font-sans);
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: var(--fl-r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--fl-dur-2) var(--fl-ease),
    border-color var(--fl-dur-2) var(--fl-ease),
    color var(--fl-dur-2) var(--fl-ease),
    filter var(--fl-dur-1) var(--fl-ease);
}
.fl-btn:disabled,
.fl-btn[data-inactive="true"] { cursor: not-allowed; opacity: 0.5; }
.fl-btn:not(:disabled):active { filter: brightness(0.92); }

.fl-btn[data-size="sm"] { height: var(--fl-h-sm); padding-inline: 10px; font-size: var(--fl-text-caption); }
.fl-btn[data-size="md"] { height: var(--fl-h-md); padding-inline: var(--fl-s-4); font-size: var(--fl-text-body); }
.fl-btn[data-size="lg"] { height: var(--fl-h-lg); padding-inline: var(--fl-s-5); font-size: var(--fl-text-body); }
.fl-btn[data-fullwidth="true"] { width: 100%; }

.fl-btn[data-variant="primary"]   { background: var(--fl-tx-0); color: var(--fl-bg-0); border-color: var(--fl-tx-0); }
.fl-btn[data-variant="secondary"] { background: transparent; color: var(--fl-tx-0); border-color: var(--fl-line-3); }
.fl-btn[data-variant="ghost"]     { background: transparent; color: var(--fl-tx-1); }
.fl-btn[data-variant="danger"]    { background: var(--fl-crimson-bg); color: var(--fl-crimson); border-color: var(--fl-crimson-line); }

.fl-btn[data-variant="secondary"]:not(:disabled):hover { background: var(--fl-hover); }
.fl-btn[data-variant="ghost"]:not(:disabled):hover     { background: var(--fl-hover); }
.fl-btn[data-variant="danger"]:not(:disabled):hover    { background: color-mix(in oklch, var(--fl-crimson) 18%, var(--fl-bg-1)); border-color: var(--fl-crimson); }

.fl-btn[data-icon-only="true"] { padding: 0; flex-shrink: 0; }
.fl-btn[data-icon-only="true"][data-size="sm"] { width: var(--fl-h-sm); }
.fl-btn[data-icon-only="true"][data-size="md"] { width: var(--fl-h-md); }
.fl-btn[data-icon-only="true"][data-size="lg"] { width: var(--fl-h-lg); }

.fl-link {
  text-decoration: none;
  transition: color var(--fl-dur-2) var(--fl-ease);
}
.fl-link[data-variant="default"] { color: var(--fl-signal); }
.fl-link[data-variant="muted"]   { color: var(--fl-tx-2); }
.fl-link:hover                   { color: var(--fl-tx-0); }

.fl-page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding-inline: var(--fl-s-3);
  background: transparent;
  color: var(--fl-tx-2);
  border: 1px solid transparent;
  border-radius: var(--fl-r-sm);
  font-family: var(--fl-font-mono);
  font-size: var(--fl-text-caption);
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--fl-dur-2) var(--fl-ease);
}
.fl-page-num:hover { background: var(--fl-hover); }
.fl-page-num[aria-current="page"] { background: var(--fl-bg-3); color: var(--fl-tx-0); border-color: var(--fl-line-3); }

.fl-card[data-interactive="true"] {
  cursor: pointer;
  transition:
    border-color var(--fl-dur-2) var(--fl-ease),
    background var(--fl-dur-2) var(--fl-ease);
}
.fl-card[data-interactive="true"]:hover { border-color: var(--fl-line-3); }
.fl-card[data-interactive="true"]:focus-visible {
  outline: none;
  box-shadow: var(--fl-focus-ring);
}

/* Stretched press target — the whole-surface activation pattern: a region of
   rich, display-only content (a band, a card) becomes ONE press target via an
   absolutely-stretched <button> SIBLING of the content (never its parent —
   wrapping arbitrary slots in a <button> invites nested-interactive invalid
   HTML). The host establishes position:relative; the button stretches over
   everything, carries the accessible name, and paints only the translucent
   hover veil so it can never occlude the content it activates. Focus ring
   comes from the global :focus-visible rule. */
.fl-press-target {
  position: absolute;
  inset: 0;
  background: transparent;
  border: none;
  padding: var(--fl-s-0);
  border-radius: var(--fl-r-0);
  cursor: pointer;
  transition: background var(--fl-dur-2) var(--fl-ease);
}
.fl-press-target:hover { background: var(--fl-hover-veil); }
.fl-press-target:active { filter: brightness(0.92); }

.fl-control {
  /* Allow shrinking below the inner <input>'s intrinsic ~175px min-width.
     Without this, an input in a flex/grid cell forces its parent to grow
     and overflows narrower containers. */
  min-width: 0;
  background: var(--fl-bg-1);
  border: 1px solid var(--fl-line-2);
  border-radius: var(--fl-r-sm);
  /* The class owns the text color (the inner <input> inherits it) so state rules
     below — disabled — can restyle text and border together. */
  color: var(--fl-tx-0);
  transition:
    border-color var(--fl-dur-2) var(--fl-ease),
    box-shadow var(--fl-dur-2) var(--fl-ease);
}
.fl-control[data-invalid="true"] { border-color: var(--fl-crimson-line); }
/* A disabled control must READ disabled — text and border drop a step. Two selector
   shapes, one rule: :disabled for the element-level controls (select, textarea,
   command trigger), :has(input:disabled) for Input's wrapper div. */
.fl-control:disabled,
.fl-control:has(input:disabled) {
  color: var(--fl-tx-3);
  border-color: var(--fl-line);
}
.fl-control:focus,
.fl-control:focus-within {
  border-color: var(--fl-signal-line);
  box-shadow: 0 0 0 3px var(--fl-signal-bg);
}
.fl-control[data-invalid="true"]:focus,
.fl-control[data-invalid="true"]:focus-within {
  border-color: var(--fl-crimson-line);
  box-shadow: none;
}
/* The wrapper owns the focus treatment (:focus-within, above). The inner control
   must NOT also paint the global :focus-visible ring (line ~232) — inset from the
   wrapper's right edge by a trailing affix (e.g. the "HR" unit), that ring's edge
   renders as a stray vertical line beside the suffix. */
.fl-control :focus-visible { box-shadow: none; }

/* A keyboard-focused native <select> shows the full focus ring (the wrapper's :focus-within tint
   alone is too subtle to satisfy 2.4.7); more specific than the suppress rule above, so it wins. */
.fl-control select:focus-visible { box-shadow: var(--fl-focus-ring); }

/* —— Skip link (WCAG 2.4.1 bypass-blocks) — off-screen until focused, then pinned top-left —— */
.fl-skip-link {
  position: absolute;
  left: var(--fl-s-3);
  top: -200px;
  z-index: 1000;
  padding: var(--fl-s-3) var(--fl-s-5);
  background: var(--fl-bg-2);
  color: var(--fl-tx-0);
  border: 1px solid var(--fl-line-3);
  border-radius: var(--fl-r-sm);
  font-family: var(--fl-font-sans);
  font-size: var(--fl-text-body);
  text-decoration: none;
  transition: top var(--fl-dur-2) var(--fl-ease);
}
.fl-skip-link:focus { top: var(--fl-s-3); box-shadow: var(--fl-focus-ring); }

/* type="number" inputs: strip the native OS stepper chrome. The browser default
   spin-buttons clash with the control surface and any trailing affix (e.g. a
   "HR" suffix), and increment/decrement is not part of this design language —
   numeric fields are typed, not spun. Hidden cross-browser (WebKit pseudo-
   elements + Firefox/standard `appearance`). */
.fl-control input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.fl-control input[type="number"]::-webkit-outer-spin-button,
.fl-control input[type="number"]::-webkit-inner-spin-button {
  /* display:none in addition to appearance:none — some Chromium/WebKit versions
     keep rendering the spin-button's 1px divider on focus/hover under
     appearance:none alone; display:none removes the element (and its divider)
     outright in every state. */
  -webkit-appearance: none;
  appearance: none;
  display: none;
  margin: 0;
}

/* CommandTrigger — a button shaped like an input that opens a command palette.
   Inherits .fl-control surface; adds hover affordance because it is interactive
   like a button, not a text field. */
button.fl-command-trigger { background: var(--fl-bg-1); }
button.fl-command-trigger:hover { background: var(--fl-hover); border-color: var(--fl-line-3); }
button.fl-command-trigger:focus,
button.fl-command-trigger:focus-visible { outline: none; }

/* ScrollBand — the panning horizontal band hides its scrollbar (the edge fades are
   the overflow affordance). The inline style carries the Firefox/legacy-Edge
   properties (scrollbar-width / -ms-overflow-style); WebKit/Blink need this
   pseudo-element, which inline style cannot express. */
.fl-scrollband::-webkit-scrollbar { display: none; }

.fl-row { transition: background var(--fl-dur-1) var(--fl-ease); }
.fl-row:not([data-selected="true"]):hover { background: var(--fl-bg-2); }
.fl-row[data-selected="true"] { background: var(--fl-signal-bg); }
.fl-row[data-zebra="true"]:not([data-selected="true"]) { background: var(--fl-bg-2); }
.fl-row[data-zebra="true"]:not([data-selected="true"]):hover { background: var(--fl-bg-3); }

/* Responsive Grid — <Grid mobileCols={n}> carries the desktop track count
   inline and the phone count as --fl-grid-mobile-cols. Below the phone
   breakpoint this rule collapses the columns. The !important is required and
   correct: a stylesheet !important is the one thing that overrides the inline
   grid-template-columns the primitive writes. 639px = useIsMobile's
   MOBILE_MAX_WIDTH. This is the one place the design system uses a media query —
   phone width is a structural breakpoint, not a token-scale value. */
@media (max-width: 639px) {
  .fl-grid-responsive {
    grid-template-columns: repeat(var(--fl-grid-mobile-cols), minmax(0, 1fr)) !important;
  }
}

/* SplitPane minSize="min-content" — the pane refuses to shrink below its
   content's intrinsic minimum, so a drag handle stops where the content's own
   declared floors say (nowrap idents, arc stubs, grid track minimums) instead
   of compressing into overflow. SplitPane sets this attribute on the panel's
   ROOT element (react-resizable-panels spreads rest props onto the flex item
   it sizes). The !important is required and correct for the same reason as
   .fl-grid-responsive above: the lib writes min-width: 0 inline, and a
   stylesheet !important is the one thing that overrides an inline value. */
[data-fl-split-pane-min="w"] { min-width: min-content !important; }
[data-fl-split-pane-min="h"] { min-height: min-content !important; }