/**
 * CLM Planner — design system tokens.
 *
 * Global CSS custom properties, loaded once at the composition root
 * (`src/index.tsx`) and consumed via `var(--token-name)` from every
 * component's CSS Module. This file is the *only* place raw color/spacing/
 * typography values are allowed to live — no `.module.css` should hardcode
 * a hex/hsl color, a raw pixel spacing, or a raw font-size: always go
 * through a token here, so the palette/scale stays consistent and a future
 * change only touches one file.
 *
 * Dependency direction: feature `.module.css` -> `design-system/tokens.css`,
 * never the other way around (mirrors the existing `@contracts/index` rule:
 * a single shared, neutral module that features depend on, not each other).
 *
 * Values below are the exact specification handed off by `ui-designer`
 * (see `.claude/agents/workspace/decisions-log.md`, entry
 * "[2026-07-10] — ui-designer — Spécification design complète CLM Planner
 * (UI0-UI4)"). Do not "eyeball"-adjust a value here without updating that
 * spec — every color pair was chosen to clear WCAG AA contrast with a
 * margin, not at the threshold.
 */

:root {
  /* ---- Color: brand ---- */
  /* Steel blue — neutral "field tool" anchor color, used for structure,
     borders and non-CTA interactive elements. */
  --color-primary: hsl(217, 91%, 35%);
  --color-primary-hover: hsl(217, 91%, 28%);

  /* Yellow/gold (discreet Tour de France yellow jersey reference) — reserved
     for primary CTAs, the active state of the PCS/manual mode toggle, and
     the drag'n'drop hover halo. Never used as large-surface background or
     for neutral informational text. */
  --color-accent: hsl(46, 100%, 48%);
  /* Dark text on accent background — never white-on-yellow (insufficient
     contrast). */
  --color-accent-contrast-text: hsl(220, 25%, 12%);

  /* ---- Color: feedback ---- */
  --color-danger: hsl(4, 74%, 45%);
  --color-danger-bg: hsl(4, 74%, 96%);
  --color-danger-border: hsl(4, 74%, 70%);
  /* Non-destructive accent background pair — same formula as
     --color-danger-bg (same hue/saturation as --color-primary, lightness
     raised to 96%). First need for an accented "non-destructive" background
     for a list-row action button (until now only --color-danger-bg existed
     for this pattern, e.g. ResourceDropZone's .removeButton). */
  --color-primary-bg: hsl(217, 91%, 96%);
  /* Reserved for future "success" feedback: no component currently has a
     success visual state, so this token is not consumed anywhere yet.
     Documented here for palette consistency so it isn't invented ad hoc
     later. */
  --color-success: hsl(142, 60%, 32%);

  /* ---- Color: neutrals ---- */
  --color-surface: hsl(0, 0%, 100%);
  --color-surface-alt: hsl(220, 20%, 97%);
  --color-border: hsl(220, 15%, 85%);
  --color-on-surface: hsl(220, 25%, 15%);
  --color-on-surface-muted: hsl(220, 10%, 42%);

  /* ---- Color: focus ---- */
  /* Always paired with `outline-offset` — never `outline: none` without a
     visible replacement (non-negotiable per the CTO's technical framing). */
  --color-focus-ring: hsl(217, 91%, 55%);

  /* ---- Spacing scale (base 4px) ---- */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;
  --spacing-16: 64px;

  /* ---- Typography ---- */
  /* No custom font: the project has no font-loading infrastructure
     (confirmed by reading `webpack.config.js` — no CDN/font-loader), so a
     system font stack is used deliberately rather than adding a new
     network/npm dependency. */
  --font-family:
    -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Reserved for bib numbers / times: aligned digits improve scanability. */
  --font-family-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 28px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* ---- Radii ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ---- Shadows (depth hierarchy: resting card < dragging card < floating
     modal/form) ---- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 8px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.18);

  /* ---- Transitions ---- */
  --transition-fast: 120ms ease-out;
  --transition-base: 200ms ease-out;
}

/**
 * CLM Planner — global, non-scoped styles.
 *
 * Loaded once at the composition root (`src/index.tsx`), same pattern as
 * `tokens.css` (imported right after it). This is the *only* other file
 * allowed to contain unscoped CSS outside CSS Modules — everything else
 * must be a colocated `.module.css` (see CTO acceptance criterion #2:
 * "aucun style global hors `src/design-system/`").
 *
 * Rule below was previously living inside
 * `features/startlist/StartlistImportPanel.module.css` as a stray
 * `:global(:focus-visible)` selector — the only unscoped rule in the whole
 * app, and a fragile one: it made every interactive element's focus ring
 * depend on that one component being mounted. Moved here so the focus ring
 * is guaranteed to load regardless of which feature components are mounted.
 */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/**
 * Screen-reader-only utility (F5, `WorkbookPreview`'s `<table>` `<caption>`):
 * visually hidden but still announced by assistive technology. Global
 * (unscoped) rather than a CSS Module class since consumers apply it as a
 * plain string class name, matching the pattern already used for other
 * unscoped, cross-cutting concerns in this file.
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/**
 * CollapsibleSection — F1 (first shared `design-system/` component).
 *
 * CRITICAL: the body wrapper (`data-collapsible-body`) intentionally has no
 * CSS Module class applied to it, and must never get one that sets
 * `display`. Collapse relies solely on the native `hidden` attribute (the
 * UA stylesheet's `[hidden] { display: none }` rule, lowest-priority
 * origin) — any author-stylesheet `display` declaration on that same
 * element, even via a class of equal specificity, would beat it and
 * silently break collapse (the element would stay visible). It also
 * deliberately carries zero internal spacing, so it never doubles up with a
 * consumer's own internal layout (e.g. `StartlistImportPanel`'s
 * `.form { gap: var(--spacing-4) }`).
 *
 * No local `:focus-visible` rule either — the existing global rule in
 * `design-system/global.css` already applies to `.header` automatically.
 */

.UDrYS21r {
  margin: 0;
}

.B0zZb2KQ {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  width: 100%;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  margin: 0 0 var(--spacing-4);
  padding: var(--spacing-1) 0;
  font-family: inherit;
  color: var(--color-on-surface);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.B0zZb2KQ:hover {
  color: var(--color-primary);
}

.Zr6NSUG9 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  text-align: left;
}

.B6iHpC41 {
  flex-shrink: 0;
  font-size: var(--font-size-md);
  color: var(--color-on-surface-muted);
  transform: rotate(-90deg);
  transition: transform var(--transition-fast);
}

.gFofh80y {
  transform: rotate(0deg);
}

/**
 * StartlistImportPanel — UI1.
 * Card container, PCS/manual segmented control, loading spinner, error
 * banners. Values are all tokens from `src/design-system/tokens.css` — no
 * raw color/spacing/font value is hardcoded here.
 */

._iUL0ia0 {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-6);
  font-family: var(--font-family);
  color: var(--color-on-surface);
}

/* Segmented control (PCS / manuel mode toggle). */
.jC8EUITx {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--spacing-4);
}

.EvUnt8kW {
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface-muted);
  background-color: var(--color-surface);
  border: none;
  padding: var(--spacing-2) var(--spacing-4);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.EvUnt8kW:hover {
  background-color: var(--color-surface-alt);
}

.Ldx7Myk5 {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast-text);
}

.Ldx7Myk5:hover {
  background-color: var(--color-accent);
}

.ndkqhOwL {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.TcG31X_h {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.TcG31X_h input,
.TcG31X_h select,
.TcG31X_h textarea {
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  color: var(--color-on-surface);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-2);
}

.TcG31X_h input:disabled,
.TcG31X_h select:disabled,
.TcG31X_h textarea:disabled {
  background-color: var(--color-surface-alt);
  color: var(--color-on-surface-muted);
  cursor: not-allowed;
}

/* Discreet background-refresh signal on the "Étape" select (a new year is
   being resolved while a previous stage list is still shown) — no spinner,
   no disabled: the user must always be able to submit with the current
   selection while a new list is loading. Reuses the same opacity already
   used by `.submitButton:disabled` (0.75) for consistency. */
.TcG31X_h select[aria-busy="true"] {
  opacity: 0.75;
  transition: opacity var(--transition-fast);
}

.g2sEkmI7 {
  display: flex;
  gap: var(--spacing-3);
  align-items: center;
}

.lcPphq1q {
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-surface);
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--spacing-2) var(--spacing-4);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  transition: background-color var(--transition-fast);
}

.lcPphq1q:hover:not(:disabled) {
  background-color: var(--color-primary-hover);
}

.lcPphq1q:disabled {
  cursor: not-allowed;
  opacity: 0.75;
}

.D9ZEmzat {
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface-muted);
  background-color: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

.D9ZEmzat:hover {
  color: var(--color-on-surface);
}

/* CSS-only spinner, no external dependency. */
.UKRCLQmr {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--color-surface);
  border-radius: 50%;
  animation: LzfpVpMJ 700ms linear infinite;
}

@keyframes LzfpVpMJ {
  to {
    transform: rotate(360deg);
  }
}

/* Error banners (role="alert") — soft, bordered, never an aggressive full-red block. */
.vLExBw35 {
  display: flex;
  gap: var(--spacing-2);
  align-items: flex-start;
  background-color: var(--color-danger-bg);
  border-left: 4px solid var(--color-danger);
  border-radius: var(--radius-sm);
  padding: var(--spacing-3) var(--spacing-4);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
}

/* Non-blocking fallback hint for the "Étape" field (PCS stage list failed to
   load, or resolved empty) — deliberately distinct from `.errorBanner`
   (role="alert", reserved for `pcsError`, the direct failure of an explicit
   user action). Always mounted (aria-live="polite" on the element itself in
   the component), `:empty` collapses it out of the flex-column flow so no
   residual gap appears when there is nothing to say. */
.I0vUQPPj {
  font-size: var(--font-size-xs);
  color: var(--color-on-surface-muted);
}

.I0vUQPPj:empty {
  display: none;
}
/**
 * RiderCard — UI2 (resting state) + UI3 (dragging state, wired via
 * `onDragStart`/`onDragEnd` in the component — see UI3 for that state
 * addition). All values are design-system tokens.
 */

.GUpAzVM_ {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  background-color: var(--color-surface);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-2) var(--spacing-3);
  margin-bottom: var(--spacing-2);
  font-family: var(--font-family);
  cursor: grab;
  transition: opacity var(--transition-base), box-shadow var(--transition-fast);
}

/* Visual drag handle, CSS-only (six dots via box-shadow), no image asset. */
.GUpAzVM_::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-on-surface-muted);
  box-shadow:
    0 -6px var(--color-on-surface-muted),
    0 6px var(--color-on-surface-muted),
    6px 0 var(--color-on-surface-muted),
    6px -6px var(--color-on-surface-muted),
    6px 6px var(--color-on-surface-muted),
    -6px 0 var(--color-on-surface-muted);
  margin-right: var(--spacing-2);
  flex-shrink: 0;
}

.GUpAzVM_:hover {
  box-shadow: var(--shadow-md);
}

/* Driven by the `onDragStart`/`onDragEnd` state added in UI3. */
.rELFLHWW {
  opacity: 0.5;
  cursor: grabbing;
}

.fxC6LkJd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--spacing-2);
  border-radius: 50%;
  background-color: var(--color-surface-alt);
  color: var(--color-primary);
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.uZIvP9oY {
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface);
}

.HXsZiAxP {
  font-size: var(--font-size-sm);
  color: var(--color-on-surface-muted);
}

.ZoenpyAZ {
  margin-left: auto;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--color-on-surface-muted);
}

/**
 * ResourcePanel — UI2. Add-resource form + vertical list of resources with
 * color swatch, inline-edit name, delete affordance. All values are
 * design-system tokens.
 */

.zRgovvxl {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-6);
  font-family: var(--font-family);
  color: var(--color-on-surface);
  margin-bottom: var(--spacing-6);
}

.U3zA9Mnn {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.U3zA9Mnn input[type="text"] {
  font-family: inherit;
  font-size: var(--font-size-md);
  color: var(--color-on-surface);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-2);
}

.U3zA9Mnn select {
  font-family: inherit;
  font-size: var(--font-size-md);
  color: var(--color-on-surface);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-2);
}

.zTmB57WT {
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-surface);
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--spacing-2) var(--spacing-4);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.zTmB57WT:hover {
  background-color: var(--color-primary-hover);
}

.hLmXsbnJ {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.U6Ls8sJg {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-sm);
}

.U6Ls8sJg:hover {
  background-color: var(--color-surface-alt);
}

.EF8JTc9e {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
}

/* Inline-edit pattern: borderless at rest, visible border only on focus. */
.ewJtQHDu {
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--spacing-1) var(--spacing-2);
  flex: 1;
  min-width: 0;
}

.ewJtQHDu:hover {
  border-color: var(--color-border);
}

.ewJtQHDu:focus {
  border-color: var(--color-primary);
  background-color: var(--color-surface);
}

.T2vGVVxl {
  font-size: var(--font-size-sm);
  color: var(--color-on-surface-muted);
  min-width: 80px;
}

/* Discreet by default but never invisible: contrast checked >= 3:1 at rest
   (muted text on transparent/surface background), switches to danger
   color + background on hover/focus. */
.eRjdxON_ {
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface-muted);
  background-color: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--spacing-1) var(--spacing-2);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.eRjdxON_:hover,
.eRjdxON_:focus-visible {
  color: var(--color-danger);
  background-color: var(--color-danger-bg);
}

/**
 * LocationsPanel — mirrors ResourcePanel's CRUD chrome (add-form + vertical
 * list + delete affordance), duplicated twice for two independent
 * sub-lists (departure/arrival) inside a single CollapsibleSection. CSS
 * Modules scope per file, so token values are mirrored from
 * ResourcePanel.module.css rather than imported/shared.
 */

.d7z3i9IE {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-6);
  font-family: var(--font-family);
  color: var(--color-on-surface);
  margin-bottom: var(--spacing-6);
}

.GDcrqkit {
  margin: 0 0 var(--spacing-2) 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-on-surface);
}

.GDcrqkit + .DUIqhqqb {
  margin-top: 0;
}

.GDcrqkit:not(:first-child) {
  margin-top: var(--spacing-6);
}

.DUIqhqqb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.DUIqhqqb input[type="text"] {
  font-family: inherit;
  font-size: var(--font-size-md);
  color: var(--color-on-surface);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-2);
}

.X9trvpRZ {
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-surface);
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--spacing-2) var(--spacing-4);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.X9trvpRZ:hover {
  background-color: var(--color-primary-hover);
}

.hAQ1IRpL {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.wUuR5Qpm {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-sm);
}

.wUuR5Qpm:hover {
  background-color: var(--color-surface-alt);
}

.Z6A4k2sc {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface);
  padding: var(--spacing-1) var(--spacing-2);
  flex: 1;
  min-width: 0;
}

/* Discreet by default but never invisible (contrast >= 3:1 at rest), same
   formula as ResourcePanel.module.css's .removeButton. */
.D0k8WLRZ {
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface-muted);
  background-color: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--spacing-1) var(--spacing-2);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.D0k8WLRZ:hover,
.D0k8WLRZ:focus-visible {
  color: var(--color-danger);
  background-color: var(--color-danger-bg);
}

/**
 * ReturnPointsPanel — mirrors LocationsPanel's CRUD chrome (add-form +
 * vertical list + delete affordance), single list (no repeated sub-list
 * pair). `.panel`/`.addForm`/`.addButton`/`.list`/`.listItem`/`.removeButton`
 * duplicated to the identical tokens as LocationsPanel.module.css (CSS
 * Modules scope per file, no cross-file composition in this project).
 */

.jIhk0tFN {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-6);
  font-family: var(--font-family);
  color: var(--color-on-surface);
  margin-bottom: var(--spacing-6);
}

.gJD6MxOc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.gJD6MxOc input[type="text"],
.gJD6MxOc input[type="number"] {
  font-family: inherit;
  font-size: var(--font-size-md);
  color: var(--color-on-surface);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-2);
}

.OP1uDdxS {
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-surface);
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--spacing-2) var(--spacing-4);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.OP1uDdxS:hover {
  background-color: var(--color-primary-hover);
}

.QxMChTwF {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.y0ndyCP6 {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-sm);
}

.y0ndyCP6:hover {
  background-color: var(--color-surface-alt);
}

._ttBdTHn {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface);
  padding: var(--spacing-1) var(--spacing-2);
  flex: 1;
  min-width: 0;
}

/* Mirrors .eventTime/.kind: monospace, muted, never wraps/shrinks — this is
   a numeric duration value, same visual language as other duration/time
   figures elsewhere in the app (ResourceDropZone, ResourcePanel). */
.z6VqUks_ {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-on-surface-muted);
  flex-shrink: 0;
}

/* Discreet by default but never invisible (contrast >= 3:1 at rest), same
   formula as LocationsPanel.module.css's .removeButton. */
.MzolMQe2 {
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface-muted);
  background-color: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--spacing-1) var(--spacing-2);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.MzolMQe2:hover,
.MzolMQe2:focus-visible {
  color: var(--color-danger);
  background-color: var(--color-danger-bg);
}

/**
 * AssignmentForm — UI3 (most sensitive: 3 visual field groups + conflict
 * banner). Opened as a floating panel once a rider is dropped on a
 * resource.
 */

.rSVujIDQ {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-6);
  font-family: var(--font-family);
  color: var(--color-on-surface);
  max-width: 640px;
  margin: 0 auto;
}

/* Group 1: non-editable contextual summary, acts as the card header. */
.VL_ENHxk {
  margin: 0;
  padding: var(--spacing-3) var(--spacing-4);
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

/* Group 2: departure/arrival time — the fields the conflict check is about,
   emphasized and placed side by side on desktop. */
.mrPUfht_ {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

@media (min-width: 640px) {
  .mrPUfht_ {
    flex-direction: row;
  }
}

.FYZ48XsW {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  flex: 1;
}

.FYZ48XsW input {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-md);
  color: var(--color-on-surface);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-2);
}

.FYZ48XsW input:focus {
  border-color: var(--color-primary);
}

/* Group 3: secondary fields — locations, return duration, comment. Visually
   more discreet than the time group. */
.bKfGMGVK {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.O1oQnaux {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--color-on-surface-muted);
}

.O1oQnaux input,
.O1oQnaux select,
.O1oQnaux textarea {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--color-on-surface);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-2);
}

.O1oQnaux select {
  cursor: pointer;
}

.Kf1qrCIJ {
  display: flex;
  gap: var(--spacing-2);
  align-items: flex-start;
  background-color: var(--color-danger-bg);
  border-left: 4px solid var(--color-danger);
  border-radius: var(--radius-sm);
  padding: var(--spacing-3) var(--spacing-4);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
}

.Mo7IYA_V {
  display: flex;
  gap: var(--spacing-3);
  justify-content: flex-end;
}

.OlJDkqDm {
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-surface);
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--spacing-2) var(--spacing-6);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.OlJDkqDm:hover {
  background-color: var(--color-primary-hover);
}

.m9MSrEhP {
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface-muted);
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.m9MSrEhP:hover {
  color: var(--color-on-surface);
}

/**
 * EventForm — HE10. Duplicated on purpose from AssignmentForm.module.css
 * (established precedent in this project: CSS Modules are never composed
 * across files, see ResourceDropZone.module.css's own duplicated
 * .removeButton). Only `.labelField` (mirroring AssignmentForm's
 * `.secondaryField`) is new.
 */

.tKVvRmUY {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-6);
  font-family: var(--font-family);
  color: var(--color-on-surface);
  max-width: 640px;
  margin: 0 auto;
}

.LFKIT8Zj {
  margin: 0;
  padding: var(--spacing-3) var(--spacing-4);
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.rS3MZOY_ {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

@media (min-width: 640px) {
  .rS3MZOY_ {
    flex-direction: row;
  }
}

.krdxCK8W {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  flex: 1;
}

.krdxCK8W input {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-md);
  color: var(--color-on-surface);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-2);
}

.krdxCK8W input:focus {
  border-color: var(--color-primary);
}

.B0wAb8ex {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--color-on-surface-muted);
}

.B0wAb8ex input {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--color-on-surface);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-2);
}

.OuF7Dpbr {
  display: flex;
  gap: var(--spacing-2);
  align-items: flex-start;
  background-color: var(--color-danger-bg);
  border-left: 4px solid var(--color-danger);
  border-radius: var(--radius-sm);
  padding: var(--spacing-3) var(--spacing-4);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
}

.cAkv5q6E {
  display: flex;
  gap: var(--spacing-3);
  justify-content: flex-end;
}

.z61bJX6y {
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-surface);
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--spacing-2) var(--spacing-6);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.z61bJX6y:hover {
  background-color: var(--color-primary-hover);
}

.R6hYlECw {
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface-muted);
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.R6hYlECw:hover {
  color: var(--color-on-surface);
}

/**
 * ResourceDropZone — UI3. Resting state uses the resource's own color as an
 * inline style (`style={{ borderColor: resource.color }}`, kept as-is —
 * per-resource, not a design-system token). The hover state intentionally
 * overrides it with a strong, unambiguous accent treatment so the feedback
 * during a fast drag gesture is never in doubt.
 */

.EMb5sx4Z {
  border: 1px solid;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-3);
  font-family: var(--font-family);
  transition: border var(--transition-base), background-color var(--transition-base),
    box-shadow var(--transition-base);
}

.Bxzbkwj9 {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-on-surface);
}

/* Driven by the onDragEnter/onDragLeave counter state (see component). */
.PB4pZrEr {
  border: 3px dashed var(--color-accent);
  background-color: var(--color-surface-alt);
  box-shadow: 0 0 0 4px hsla(46, 100%, 48%, 0.15);
}

/*
 * UI7: list of assignments already placed on this resource. Stays a child
 * of the same `.zone` element that owns the drag handlers above — no
 * separate wrapper, no new drag-boundary category for the dragCounter.
 */
.jShF3fHE {
  list-style: none;
  margin: var(--spacing-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* RTP12 (2026-07-20 plan): stacked column so the return-trip mention (added
   below, `.returnMention`) can render as a full-width 2nd line under the
   main row, rather than fighting for horizontal space with it. The former
   flex-row layout moved as-is onto the new `.assignmentMain` wrapper below —
   no visible change to the main row itself. */
.ffUXEDdX {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-1);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-alt);
}

/* Reprises exactes de l'ancien .assignmentItem (bib/nom/heure/actions). */
.hvPP3oYt {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  width: 100%;
}

.t7yPUa1O {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  flex-shrink: 0;
}

.AtsiHu9e {
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sJrRg7vc {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-on-surface-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Groups "Modifier" (non-destructive) and "Retirer" (destructive) at the
   end of the <li>, "Modifier" first (reversible action before destructive
   action, same ordering precedent as ResourcePanel's rename/recolor before
   "Supprimer"). `margin-left: auto` migrated here from `.removeButton` now
   that both buttons are grouped and pushed to the right together. */
.kohYTKOV {
  display: flex;
  gap: var(--spacing-2);
  margin-left: auto;
}

/* Strictly duplicated from ResourcePanel.module.css's .removeButton — the
   project uses no CSS Modules composition (`composes:`), each module stays
   self-contained (confirmed by grep). Same visual precedent for the app's
   only other "remove without confirmation" affordance. */
.FFnPaAZX {
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface-muted);
  background-color: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--spacing-1) var(--spacing-2);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.FFnPaAZX:hover,
.FFnPaAZX:focus-visible {
  color: var(--color-danger);
  background-color: var(--color-danger-bg);
}

/* Identical pattern to .removeButton, but with the non-destructive
   --color-primary/--color-primary-bg pair instead of --color-danger/
   --color-danger-bg — same interactive precedent already used elsewhere
   (input focus border, .assignmentBib text) for non-CTA interactive
   elements. */
.pUv3W9YD {
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface-muted);
  background-color: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--spacing-1) var(--spacing-2);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.pUv3W9YD:hover,
.pUv3W9YD:focus-visible {
  color: var(--color-primary);
  background-color: var(--color-primary-bg);
}

/* RTP12: return-trip mention, shown only when returnDurationMinutes > 0
   (guard in the component). Regular (non-monospace) text, unlike
   .assignmentTime — this line mixes a number with a proper noun (the return
   point's name), not a fixed-width time format. */
._f0nO7Td {
  font-size: var(--font-size-xs);
  color: var(--color-on-surface-muted);
  font-family: var(--font-family);
}

/* HE12: sub-section for HelicopterEvents, only rendered for kind==="helicopter"
   resources. Separated visually from .assignmentList by a top border rather
   than a plain gap, to mark a clear category boundary — riders are this
   resource's primary occupant, events are secondary. */
.lu7Q_Qbq {
  margin-top: var(--spacing-3);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-border);
}

.OYzDyONu {
  margin: 0 0 var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-on-surface-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.aXHKovBQ {
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-surface);
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--spacing-1) var(--spacing-3);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.aXHKovBQ:hover {
  background-color: var(--color-primary-hover);
}

.iXZ8Pjz3 {
  list-style: none;
  margin: var(--spacing-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* Deliberately DIFFERENT treatment from .assignmentItem (--color-surface-alt,
   no border): tinted background + left accent border on --color-primary/
   --color-primary-bg, so an event row is identifiable at a glance as NOT a
   rider — same "event" visual language reused in WorkbookPreview's
   .eventBar and writePlanningWorkbook's event cell. */
.ilahtX5d {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-sm);
  background-color: var(--color-primary-bg);
  border-left: 3px solid var(--color-primary);
}

.P50dQsSw {
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oFGcXMce {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-on-surface-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.D49F7GF_ {
  display: flex;
  gap: var(--spacing-2);
  margin-left: auto;
}

/**
 * PlanningBoard — UI3. Two-column desktop layout (startlist | resources),
 * stacked vertically on mobile. The board itself only lays out the two
 * `<section>`s + the floating AssignmentForm; per-item styling lives in
 * RiderCard/ResourceDropZone's own modules.
 */

.Y8XkEwoV {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

/* F4 — desktop-only (>=1024px) independently-scrollable rider list + a
   sticky/visible resource drop-zone column, so a rider can be dragged from
   anywhere in the scrolled list onto any visible drop zone. Nothing outside
   this media query changes: mobile stays pixel-identical (plain stacked
   block layout). */
@media (min-width: 1024px) {
  .Y8XkEwoV {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start; /* required for sticky to have room to travel inside a grid item */
    /* --board-sticky-reserved-bottom mirrors App.module.css's `.exportBar`
       (also `position: sticky; bottom: 0` at this same breakpoint), which
       renders at roughly 75px tall today (--spacing-4 padding x2 + the
       export button's own --spacing-3 padding + line-height). Deliberately
       larger than that, expressed purely via spacing tokens, so neither
       .startlistSection nor .resourcesSection can ever visually extend into
       the space .exportBar occupies. If the export button's padding/font
       changes enough to threaten this, adjust the value here — single
       source of truth. */
    --board-sticky-top: var(--spacing-6);
    --board-sticky-reserved-bottom: calc(var(--spacing-16) + var(--spacing-6));
  }

  .E7PSGkd_ {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--board-sticky-top) - var(--board-sticky-reserved-bottom));
  }

  .i2ZpOmkh {
    flex-shrink: 0; /* pinned: never shrinks or scrolls */
  }

  .AaBC__tV {
    flex: 1 1 auto;
    min-height: 0; /* required for overflow-y:auto to actually engage on a flex child */
    overflow-y: auto;
  }

  .vavJYjtS {
    position: sticky;
    top: var(--board-sticky-top);
    max-height: calc(100vh - var(--board-sticky-top) - var(--board-sticky-reserved-bottom));
    overflow-y: auto;
  }
}

.E7PSGkd_,
.vavJYjtS {
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
}

/* UI3b — search + reverse-order controls above the rider card list. Reuses
   the field/button patterns already established in AssignmentForm/
   StartlistImportPanel, no new visual vocabulary introduced. */
.i2ZpOmkh {
  display: flex;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
}

.e76uAgUp {
  flex: 1;
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  color: var(--color-on-surface);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-2);
}

.e76uAgUp:focus {
  border-color: var(--color-primary);
}

.mxhS3Rgd {
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface-muted);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-2) var(--spacing-4);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.mxhS3Rgd:hover {
  background-color: var(--color-surface-alt);
  color: var(--color-on-surface);
}

/* Active toggle state reuses the same accent treatment as
   StartlistImportPanel's segmented control, for visual consistency. */
.GeYmLFsD {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast-text);
  border-color: var(--color-accent);
}

.GeYmLFsD:hover {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast-text);
}

/* UI5 — assignment modal (rider -> resource). AssignmentForm's own `.form`
   rule already carries the visual "card" (--shadow-lg, --radius-lg,
   max-width, centered background — AssignmentForm.module.css, since UI3);
   `.modalCard` below stays visually transparent on purpose, so as not to
   nest a second shadow/border-radius layer around the one AssignmentForm
   already renders. It exists to host the dialog's a11y attributes and to
   let the form scroll independently if it's taller than the viewport.

   z-index: no shared z-index token exists yet in `design-system/tokens.css`
   (grep confirms this is the first `z-index` in the whole app) — 1000 is
   used here as a local, generously-clear-of-content value. Not promoted to
   a token yet since this is still the only consumer; if a second
   overlay/modal appears later, extract a `--z-index-modal` token then
   instead of guessing a scale ahead of need. */
.srv0cGZ3 {
  position: fixed;
  inset: 0;
  background-color: hsla(220, 25%, 12%, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4);
  overflow-y: auto;
  z-index: 1000;
}

.UePFKE_e {
  max-height: 100%;
  overflow-y: auto;
}

/**
 * WorkbookPreview — F5. Card-chrome values below are copied verbatim from
 * StartlistImportPanel.module.css/ResourcePanel.module.css's `.panel`
 * (deliberately not cross-imported between features — CSS Modules are
 * feature-local by design here).
 */

.XAD4gtms {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-6);
  font-family: var(--font-family);
  color: var(--color-on-surface);
}

.IxKenaTA {
  border: none;
  padding: 0;
  margin: 0 0 var(--spacing-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  align-items: center;
}

.IxKenaTA legend {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface-muted);
  padding: 0;
  width: 100%;
}

.YBFfadib {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
}

/* Horizontal scroll fallback applies at ALL breakpoints (unrelated to F4's
   >=1024px-only sticky mechanism in PlanningBoard). The vertical bound below
   is >=1024px-only, mirroring PlanningBoard's own `--board-sticky-*`
   >=1024px-only vocabulary (see PlanningBoard.module.css) — ui-designer's F5
   spec (decision #6) calls for `max-height: 60vh; overflow-y: auto` here at
   that same breakpoint, not applied on mobile where the table already
   stacks/scrolls naturally with the page. */
.pm0c7PEA {
  overflow-x: auto;
}

@media (min-width: 1024px) {
  .pm0c7PEA {
    max-height: 60vh;
    overflow-y: auto;
  }
}

.GLc5Xh0y {
  /* Local token (not a global tokens.css value — specific to this table's
     hour columns): wide enough to read most task labels
     ("{bib} {riderName} {HH:mm}-{HH:mm}") without truncation for a segment
     spanning most of the hour, while keeping total scroll width reasonable
     (6 hour columns + resource column, absorbed by .gridScroll below). */
  --hour-col-min-width: 360px;
  border-collapse: collapse;
  width: 100%;
  font-size: var(--font-size-sm);
}

.GLc5Xh0y th,
.GLc5Xh0y td {
  border: 1px solid var(--color-border);
  padding: var(--spacing-2);
  vertical-align: top;
  text-align: left;
}

.GLc5Xh0y thead th {
  background-color: var(--color-surface-alt);
  font-weight: var(--font-weight-bold);
}

.c2RKIdBO {
  min-width: var(--hour-col-min-width);
}

/* Same accent-border-only rule as .taskBar, for the resource <th>. Its
   border-left WIDTH/STYLE are re-declared inline in WorkbookPreview.tsx
   (not just the color) because the base `.grid th` rule's `border: 1px
   solid var(--color-border)` shorthand has higher specificity than this
   single class and would otherwise win. */
.zjdTnoZg {
  background-color: var(--color-surface);
  color: var(--color-on-surface);
}

/* Decorative minute-of-hour background (6 marks: every 100%/6 ~= 10min),
   purely visual — TaskBar/ReturnBar/EventBar's own left/width % already
   carry the real minute-exact position, this is a reading aid only.
   Constant min-height keeps every hour/resource cell the same height
   regardless of how many segments it holds (never collapses to 0 for an
   empty hour). HE14: 3 lanes x 1.5rem + 2 gaps (var(--spacing-1) = 4px =
   0.25rem each) = 5rem (was 3.5rem for 2 lanes) — the event lane is ALWAYS
   rendered, even empty for a moto resource, so this becomes the new
   constant height for every resource row, not only helicopters. */
.D7lMdmP2 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  min-height: 5rem;
  background-image: repeating-linear-gradient(
    to right,
    var(--color-border) 0,
    var(--color-border) 1px,
    transparent 1px,
    transparent calc(100% / 6)
  );
}

.gylbD1Y8,
.Yxoj9gkG,
.jG5JyTJm {
  position: relative;
  height: 1.5rem;
}

/* Fixed neutral background/text (pre-verified >=4.5:1 AA by tokens.css) —
   `resource.color` (arbitrary, unconstrained user pick) is only ever applied
   as the left border accent color, via inline style, never as a fill behind
   text. See WorkbookPreview.tsx's TaskBar for the rationale (2026-07-10 QA
   finding). `left`/`width` are assigned inline per-segment (see
   `segmentStyle`); this class only carries the fixed visual chrome. */
.xOw21g0r {
  position: absolute;
  top: 0;
  height: 100%;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: var(--radius-sm);
  padding: var(--spacing-1) var(--spacing-2);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs);
  background-color: var(--color-surface-alt);
  color: var(--color-on-surface);
  border-left: 4px solid transparent; /* color overridden inline per-resource */
}

.MYcZPoQt {
  position: absolute;
  top: 0;
  height: 100%;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--font-size-xs);
  color: var(--color-on-surface-muted);
}

/* HE14: 3rd lane's segment treatment — deliberately distinct from BOTH
   .taskBar (neutral fill + left-accent-only border) and .returnBar (no
   fill/border at all): full fill + full border on the fixed
   --color-primary/--color-primary-bg pair, never `resource.color` (an
   event has no rider/resource-color "occupant" of its own) — same "event"
   visual language as ResourceDropZone's .eventItem and
   writePlanningWorkbook's event cell. */
.Qv7MSzT6 {
  position: absolute;
  top: 0;
  height: 100%;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: var(--radius-sm);
  padding: var(--spacing-1) var(--spacing-2);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs);
  background-color: var(--color-primary-bg);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.vPyRBQ9p th {
  padding-top: 0;
  padding-bottom: var(--spacing-1);
  font-weight: var(--font-weight-medium);
}

.D2XTf3cO {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-on-surface-muted);
}

.kS0JZ5RP {
  display: flex;
  gap: var(--spacing-6);
  flex-wrap: wrap;
  margin-top: var(--spacing-6);
}

.F8HoqMLS {
  flex: 1 1 240px;
  border-collapse: collapse;
  width: 100%;
  font-size: var(--font-size-sm);
}

.F8HoqMLS caption {
  text-align: left;
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-2);
  color: var(--color-on-surface);
}

.F8HoqMLS td,
.F8HoqMLS th {
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-1) var(--spacing-2);
  text-align: left;
}

.kHEs2yvH {
  padding: var(--spacing-4);
  text-align: center;
  color: var(--color-on-surface-muted);
  font-size: var(--font-size-sm);
}

.VdGRYWWb {
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface-muted);
  background-color: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

.VdGRYWWb:hover {
  color: var(--color-on-surface);
}

/**
 * App — UI4, composition root layout. Mobile-first vertical stack of 3
 * sections: (1) heading + StartlistImportPanel, (2) PlanningWorkspace
 * (ResourcePanel then PlanningBoard), (3) ExportButton — kept reachable
 * without scrolling back up via `position: sticky` once there is room for
 * it (desktop, >=1024px, same breakpoint PlanningBoard already switches to
 * its two-column layout at).
 */

.UPalDbGJ {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  font-family: var(--font-family);
  color: var(--color-on-surface);
}

.UPalDbGJ h1 {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}

.rdZcpNdD {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

/* The lone screen-wide use of --color-accent as a solid fill, per the
   design system's rule: accent is reserved for the app's primary action.
   `flex-direction: column` (EXF6, 2026-07-20) so a full-width feedback
   banner can sit above the button without an awkward single-row wrap;
   `.exportButton`'s `align-self: flex-end` keeps it visually anchored to
   the right, matching the previous row layout. */
.J8YOD9CY {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-3);
  padding: var(--spacing-4) 0;
}

@media (min-width: 1024px) {
  .J8YOD9CY {
    position: sticky;
    bottom: 0;
    background-color: var(--color-surface-alt);
    padding: var(--spacing-4);
    border-radius: var(--radius-md);
  }
}

.kXF3VT83 {
  align-self: flex-end;
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-contrast-text);
  background-color: var(--color-accent);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-3) var(--spacing-8);
  cursor: pointer;
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.kXF3VT83:hover {
  box-shadow: var(--shadow-lg);
}

/* Feedback banners (role="alert") for the export-fallback outcomes (EXF6).
   Cases A/B share the same soft, bordered formula as
   StartlistImportPanel.module.css's `.errorBanner` — never an aggressive
   full-color block. */

/* Case A — fallback-sent: informative, reassuring, neutral blue, never red. */
.ZOkRQRdO {
  display: flex;
  gap: var(--spacing-2);
  align-items: flex-start;
  background-color: var(--color-primary-bg);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: var(--spacing-3) var(--spacing-4);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
}

/* Case B — fallback-failed: more severe, same soft/bordered danger formula
   already used by `.errorBanner`, plus a bold "Attention :" lead-in. */
.hF0fIWt5 {
  display: flex;
  gap: var(--spacing-2);
  align-items: flex-start;
  background-color: var(--color-danger-bg);
  border-left: 4px solid var(--color-danger);
  border-radius: var(--radius-sm);
  padding: var(--spacing-3) var(--spacing-4);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
}

.hF0fIWt5 strong {
  font-weight: var(--font-weight-bold);
}