/* Freightools GPT — design system "Atlas" (approved 7 November 2026, ported 8 November 2026)
   Pearl-white chrome, the official Freightools navy, an ice-blue world map with fine route lines, generous editorial
   headings and calm operational panels. Night mode is deep navy with moonlit map land. The signature Freightools red
   (#EA2A49, the bar over the "T") appears ONLY in the logo, the mark, the short tick of the active navigation item and
   the copilot's working indicator. Interaction (links, focus, selection, active routes) is steel blue; primary buttons
   are navy (near-white with a navy label in dark mode); secondary controls use thin neutral borders.
   Type: Inter 13px/1.55 body with tight, light-weight display headings (-0.035em); IBM Plex Mono for references,
   figures and codes (Google Fonts, allowed by the CSP in src/ui/security.ts). Status tones: WAITING IS NEVER GREEN
   (amber); accepted is the only green; blocked is purple; correction/error is brick red.

   LAYOUT: a 228px white sidebar (the wordmark, workspace, sections with icons, tip, help, account row), a 68px top
   bar (breadcrumb, environment, theme, copilot, bell), content up to 1640px wide with 16px-radius cards; forms stay one
   column (label above input, at most 640px wide); tables scroll inside .tbl-wrap; at phone width the sidebar is an
   off-canvas drawer and nothing scrolls the page sideways.

   THEME ARCHITECTURE — three states, all three defined, and a token NEVER gets its only definition inside a media
   query or a [data-theme] block (tests/ui/theme.test.ts diffs the three variable sets):
     :root                                                               -> LIGHT (bare default)
     @media (prefers-color-scheme: dark) :root:not([data-theme='light'])  -> dark by OS preference
     :root[data-theme='dark']                                             -> dark chosen explicitly
   <html data-theme> is stamped pre-paint by /static/theme.js (synchronous in <head>; CSP forbids an inline script).

   TOKEN CONTRACT
   - --brand-* are CONSTANTS (same ink in both themes): --brand-navy, --brand-navy-2, --brand-red, --brand-slate.
   - --accent is the steel-blue FILL (route lines, progress, chart highlights); --accent-ink the link/active TEXT colour;
     --accent-soft / --accent-border the blue tints (selection, active navigation, info pills).
   - --accent-solid is the primary BUTTON fill with --accent-solid-ink as its label: navy + white in light (13.9:1),
     #dfebf2 + navy in dark (11.6:1). --on-solid stays white for the danger button.
   - The sidebar is pearl white in light and deep navy in dark: --sidebar-bg, --nav-text, --nav-text-dim,
     --nav-text-strong, --nav-hover, --nav-active-bg (the blue-soft tint).
   - The map: --ocean, --land, --land-border, --route-idle, --pin-ring; floating panels over it use --glass and
     --glass-border with a backdrop blur.
   - Each semantic family is (ink, soft, border): --warning is the text colour, --warning-soft the tint, --warning-border
     the hairline. Families: success, warning, danger, info, blocked, grey.
   - Charts: --chart-1…5 is a navy → steel-blue ramp (1 = strongest), --chart-grid the grid lines, --chart-track the empty bar.
   - Contrast (WCAG AA 4.5:1 for text) — light: text #142f3d on #f6f8fa 13.1, text-muted #5c6f7b on #fff 5.2 (on
     #f6f8fa 4.9), link #1d6fa5 on #fff 5.4; dark: text #e8f0f5 on #0c1822 15.6, text-muted #a4b5c0 on #13232f 7.6,
     text-subtle #96a8b4 6.5, link #7cc0ef 8.1. */

:root {
  /* ---- brand constants (identical in both themes) ---- */
  --brand-navy: #092f42;
  --brand-navy-2: #0d384d;
  --brand-red: #ea2a49;
  --brand-slate: #5b6670;

  /* ---- LIGHT palette ---- */
  color-scheme: light;

  --bg: #f6f8fa;
  --surface: #ffffff;
  --surface-2: #f5f7f8;
  --surface-3: #edf1f4;
  --border: #e5eaee;
  --border-strong: #cfdee5;
  --text: #142f3d;
  --text-muted: #5c6f7b;
  --text-subtle: #5c6f7b;
  --row-hover: #f5f7f8;
  --row-selected: #edf5fa;

  --accent: #1d6fa5;
  --accent-hover: #175a87;
  --accent-ink: #1d6fa5;
  --accent-soft: #edf5fa;
  --accent-border: #bcd8ec;
  --accent-contrast: #ffffff;
  --accent-solid: #092f42;
  --accent-solid-hover: #17455a;
  --accent-solid-ink: #ffffff;
  --nav-text-strong: #142f3d;
  --nav-active-bg: #edf5fa;

  --success: #17754c;
  --success-soft: #e6f4ec;
  --success-border: #b3dcc6;
  --warning: #8a5a0a;
  --warning-soft: #fbf3e2;
  --warning-border: #ecd39e;
  --danger: #b3271e;
  --danger-soft: #fcecea;
  --danger-border: #f0bdb7;
  --info: #1d6fa5;
  --info-soft: #edf5fa;
  --info-border: #bcd8ec;
  --blocked: #5b2a9d;
  --blocked-soft: #efe9f8;
  --blocked-border: #d2c4ee;
  --grey: #5c6f7b;
  --grey-soft: #f5f7f8;
  --grey-border: #dfe5ea;

  --danger-solid: #b3271e;
  --danger-solid-hover: #8f1d16;
  --on-solid: #ffffff;
  --toast-bg: #142f3d;
  --toast-ink: #ffffff;
  --toast-border: #142f3d;
  --toast-muted: #a4b5c0;
  --toast-ok: #70d5a3;
  --toast-err: #ff9a93;
  --toast-warn: #edba55;
  --toast-info: #7cc0ef;
  --skeleton-shine: rgba(255, 255, 255, 0.65);

  --topbar-bg: #ffffff;
  --scrim: rgba(11, 29, 40, 0.36);
  --auth-glow: transparent;

  --sidebar-bg: #ffffff;
  --sidebar-border: #e5eaee;
  --nav-text: #5c6f7b;
  --nav-text-dim: #5c6f7b;
  --nav-hover: #f5f7f8;

  --ocean: #e8f1f5;
  --land: #f8fbfc;
  --land-border: #cfdee5;
  --route-idle: #9eb5c5;
  --pin-ring: #527b94;
  --glass: rgba(255, 255, 255, 0.92);
  --glass-border: #c8d7df;
  --avatar-bg: #e6e1dd;
  --avatar-ink: #64564c;

  --code-bg: #0d2535;
  --code-ink: #c2d6e3;
  --code-head: #173143;
  --code-border: #294355;
  --code-key: #82b6d4;
  --code-string: #d4cb9a;
  --diff-from-bg: #fcecea;
  --diff-to-bg: #e6f4ec;

  --chart-1: #092f42;
  --chart-2: #1d6fa5;
  --chart-3: #5f95c0;
  --chart-4: #a3c1db;
  --chart-5: #d6e3ef;
  --chart-grid: #e5eaee;
  --chart-track: #f5f7f8;

  --shadow-xs: 0 1px 2px rgba(26, 59, 76, 0.04);
  --shadow-sm: 0 1px 4px rgba(26, 59, 76, 0.05);
  --shadow-md: 0 8px 32px rgba(26, 59, 76, 0.07);
  --shadow-lg: 0 25px 80px rgba(9, 47, 66, 0.19);
  --shadow-float: 0 12px 35px rgba(21, 60, 83, 0.1);
  --focus-ring: rgba(29, 111, 165, 0.22);

  /* ---- type ---- */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- geometry ---- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius: 9px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sidebar-w: 228px;
  --topbar-h: 68px;
  --content-w: 1640px;
  --modal-w: 1040px;
  --drawer-w: 420px;
  --ease: 180ms ease;
  --ease-out: 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---- DARK palette: by OS preference. Repeated verbatim below for the explicit choice; keep them in step. ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --bg: #0c1822;
    --surface: #13232f;
    --surface-2: #1a2c39;
    --surface-3: #213545;
    --border: #293d4c;
    --border-strong: #355366;
    --text: #e8f0f5;
    --text-muted: #a4b5c0;
    --text-subtle: #96a8b4;
    --row-hover: #1a2c39;
    --row-selected: #203d52;

    --accent: #7cc0ef;
    --accent-hover: #9dd0f3;
    --accent-ink: #7cc0ef;
    --accent-soft: #203d52;
    --accent-border: #2f5a78;
    --accent-contrast: #092f42;
    --accent-solid: #dfebf2;
    --accent-solid-hover: #ffffff;
    --accent-solid-ink: #092f42;
    --nav-text-strong: #e8f0f5;
    --nav-active-bg: #203d52;

    --success: #70d5a3;
    --success-soft: #193c32;
    --success-border: #2a5c4a;
    --warning: #edba55;
    --warning-soft: #3e3421;
    --warning-border: #5e4e2c;
    --danger: #ff9a93;
    --danger-soft: #442c2a;
    --danger-border: #6a3e3a;
    --info: #7cc0ef;
    --info-soft: #203d52;
    --info-border: #2f5a78;
    --blocked: #c3a8ef;
    --blocked-soft: #36274a;
    --blocked-border: #523c70;
    --grey: #a4b5c0;
    --grey-soft: #1a2c39;
    --grey-border: #355366;

    --danger-solid: #c4362c;
    --danger-solid-hover: #d94a3f;
    --on-solid: #ffffff;
    --toast-bg: #e8f0f5;
    --toast-ink: #13232f;
    --toast-border: #e8f0f5;
    --toast-muted: #5c6f7b;
    --toast-ok: #17754c;
    --toast-err: #b3271e;
    --toast-warn: #8a5a0a;
    --toast-info: #1d6fa5;
    --skeleton-shine: rgba(255, 255, 255, 0.05);

    --topbar-bg: #13232f;
    --scrim: rgba(0, 0, 0, 0.55);
    --auth-glow: transparent;

    --sidebar-bg: #101e29;
    --sidebar-border: #293d4c;
    --nav-text: #a4b5c0;
    --nav-text-dim: #96a8b4;
    --nav-hover: #1a2c39;

    --ocean: #132f42;
    --land: #203e50;
    --land-border: #355366;
    --route-idle: #4d6c80;
    --pin-ring: #7fa8c2;
    --glass: rgba(19, 35, 47, 0.93);
    --glass-border: #355366;
    --avatar-bg: #2b3d4a;
    --avatar-ink: #d6e2ea;

    --code-bg: #0a1d29;
    --code-ink: #c2d6e3;
    --code-head: #13293a;
    --code-border: #294355;
    --code-key: #82b6d4;
    --code-string: #d4cb9a;
    --diff-from-bg: #442c2a;
    --diff-to-bg: #193c32;

    --chart-1: #dfebf2;
    --chart-2: #7cc0ef;
    --chart-3: #4f8fbd;
    --chart-4: #2f5a78;
    --chart-5: #203d52;
    --chart-grid: #293d4c;
    --chart-track: #1a2c39;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.16);
    --shadow-lg: 0 25px 80px rgba(0, 0, 0, 0.45);
    --shadow-float: 0 12px 35px rgba(0, 0, 0, 0.28);
    --focus-ring: rgba(124, 192, 239, 0.32);
  }
}

/* ---- DARK palette: explicit choice. Verbatim copy of the media block above. ---- */
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #0c1822;
  --surface: #13232f;
  --surface-2: #1a2c39;
  --surface-3: #213545;
  --border: #293d4c;
  --border-strong: #355366;
  --text: #e8f0f5;
  --text-muted: #a4b5c0;
  --text-subtle: #96a8b4;
  --row-hover: #1a2c39;
  --row-selected: #203d52;

  --accent: #7cc0ef;
  --accent-hover: #9dd0f3;
  --accent-ink: #7cc0ef;
  --accent-soft: #203d52;
  --accent-border: #2f5a78;
  --accent-contrast: #092f42;
  --accent-solid: #dfebf2;
  --accent-solid-hover: #ffffff;
  --accent-solid-ink: #092f42;
  --nav-text-strong: #e8f0f5;
  --nav-active-bg: #203d52;

  --success: #70d5a3;
  --success-soft: #193c32;
  --success-border: #2a5c4a;
  --warning: #edba55;
  --warning-soft: #3e3421;
  --warning-border: #5e4e2c;
  --danger: #ff9a93;
  --danger-soft: #442c2a;
  --danger-border: #6a3e3a;
  --info: #7cc0ef;
  --info-soft: #203d52;
  --info-border: #2f5a78;
  --blocked: #c3a8ef;
  --blocked-soft: #36274a;
  --blocked-border: #523c70;
  --grey: #a4b5c0;
  --grey-soft: #1a2c39;
  --grey-border: #355366;

  --danger-solid: #c4362c;
  --danger-solid-hover: #d94a3f;
  --on-solid: #ffffff;
  --toast-bg: #e8f0f5;
  --toast-ink: #13232f;
  --toast-border: #e8f0f5;
  --toast-muted: #5c6f7b;
  --toast-ok: #17754c;
  --toast-err: #b3271e;
  --toast-warn: #8a5a0a;
  --toast-info: #1d6fa5;
  --skeleton-shine: rgba(255, 255, 255, 0.05);

  --topbar-bg: #13232f;
  --scrim: rgba(0, 0, 0, 0.55);
  --auth-glow: transparent;

  --sidebar-bg: #101e29;
  --sidebar-border: #293d4c;
  --nav-text: #a4b5c0;
  --nav-text-dim: #96a8b4;
  --nav-hover: #1a2c39;

  --ocean: #132f42;
  --land: #203e50;
  --land-border: #355366;
  --route-idle: #4d6c80;
  --pin-ring: #7fa8c2;
  --glass: rgba(19, 35, 47, 0.93);
  --glass-border: #355366;
  --avatar-bg: #2b3d4a;
  --avatar-ink: #d6e2ea;

  --code-bg: #0a1d29;
  --code-ink: #c2d6e3;
  --code-head: #13293a;
  --code-border: #294355;
  --code-key: #82b6d4;
  --code-string: #d4cb9a;
  --diff-from-bg: #442c2a;
  --diff-to-bg: #193c32;

  --chart-1: #dfebf2;
  --chart-2: #7cc0ef;
  --chart-3: #4f8fbd;
  --chart-4: #2f5a78;
  --chart-5: #203d52;
  --chart-grid: #293d4c;
  --chart-track: #1a2c39;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.16);
  --shadow-lg: 0 25px 80px rgba(0, 0, 0, 0.45);
  --shadow-float: 0 12px 35px rgba(0, 0, 0, 0.28);
  --focus-ring: rgba(124, 192, 239, 0.32);
}

/* ============================================================ base ============================================= */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html,
body { margin: 0; padding: 0; }
body {
  font: 13px/1.55 var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  /* Safety net: nothing may scroll the page sideways (wide tables and code scroll inside their own frames). */
  overflow-x: clip;
}
/* Links are Freightools steel blue with a soft underline; chrome links (buttons, navigation, tabs) opt out below. */
a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-color: var(--accent-border);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--ease), color var(--ease), background var(--ease);
}
a:hover { text-decoration-color: currentColor; }
a.btn, .nav-link, .menu-item, .tabs a, .segmented .seg, .sidebar__brand, .pager .pg, a.stat, .skip-link, .topbar__btn, .drawer__open, .card__link, .chart__link, a.chip { text-decoration: none; }

h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.3; font-weight: 600; color: var(--text); }
h1, h2 { font-family: var(--font-display); }
h1 { font-size: 28px; letter-spacing: -0.035em; line-height: 1.2; }
h2 { font-size: 18px; letter-spacing: -0.035em; margin: var(--sp-10) 0 var(--sp-4); }
h3 { font-size: 15px; letter-spacing: -0.02em; }
h4 { font-size: 12px; margin: var(--sp-4) 0 var(--sp-2); color: var(--text-muted); }
p { margin: 0 0 0.8rem; max-width: 72ch; }
li { max-width: 72ch; }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.small { font-size: 0.875rem; }
.help { color: var(--text-subtle); margin: 2px 0 var(--sp-2); font-size: 12px; line-height: 1.5; }
code, pre, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
code, .mono { font-size: 0.88em; }
code { background: var(--surface-2); padding: 0.08rem 0.36rem; border-radius: 5px; border: 1px solid var(--border); color: var(--text); overflow-wrap: anywhere; }
::selection { background: #a6cbe0; color: #092f42; }
td code, th code, .kv code { font-size: 11.5px; }
td, th, input, output, .num { font-variant-numeric: tabular-nums; }
strong { font-weight: 600; }
details > summary { cursor: pointer; }
::placeholder { color: var(--text-subtle); opacity: 1; }
input, textarea { caret-color: var(--text); }
input, textarea, select, button { accent-color: var(--accent); }
::marker { color: var(--text-subtle); }
img, svg { max-width: 100%; }

/* Focus: one visible steel-blue ring everywhere, offset so it never hides under a border. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }

.skip-link {
  position: absolute;
  inset-inline-start: var(--sp-3);
  top: -100px;
  z-index: 100;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-weight: 600;
}
.skip-link:focus { top: var(--sp-3); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============================================================ brand =========================================== */
/* The real Freightools artwork (src/ui/static/brand/*.svg, from the official logo files): the navy wordmark on the
   pearl-white sidebar (.brand-wordmark--auto turns white in dark mode; --white stays white on navy), and the "T" mark
   (navy T, red bar) as the compact icon and favicon. The wordmark stands alone: no product tag or badge beside it (the
   UI handover, 2026-11-08). An uploaded logo (.brand-logo) replaces the wordmark. The public website and the sign-in
   screens use the designer's wordmark (site.css). */
.brand-wordmark { display: block; flex: none; width: 139px; height: 33px; background: url('/static/brand/logo.svg') left center / contain no-repeat; }
.brand-wordmark--white { background-image: url('/static/brand/logo-white.svg'); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .brand-wordmark--auto { background-image: url('/static/brand/logo-white.svg'); } }
:root[data-theme='dark'] .brand-wordmark--auto { background-image: url('/static/brand/logo-white.svg'); }
.brand-mark { display: inline-block; flex: none; width: 26px; height: 28px; background: url('/static/brand/mark.svg') center / contain no-repeat; }
.brand-mark--white { background-image: url('/static/brand/mark-white.svg'); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .brand-mark--auto { background-image: url('/static/brand/mark-white.svg'); } }
:root[data-theme='dark'] .brand-mark--auto { background-image: url('/static/brand/mark-white.svg'); }
.brand-logo { display: block; flex: none; height: 30px; width: auto; max-width: 150px; object-fit: contain; }

/* ============================================================ app shell ======================================= */
/* Atlas: a pearl-white spine (deep navy at night) — brand, workspace, uppercase section labels, items with icons; the
   active item is a blue-soft pill with the short Freightools red tick on the sidebar's edge. */
.app-shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; transition: margin var(--ease-out); }

.sidebar {
  background: var(--sidebar-bg);
  border-inline-end: 1px solid var(--sidebar-border);
  color: var(--nav-text);
  padding: 27px 17px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
/* The head: the logo and, at its end, the button that folds the sidebar into the icon rail (2026-11-09). The logo holds
   the wordmark and the "T" mark; only the collapsed rail shows the mark. */
.sidebar__head { display: flex; align-items: center; gap: 8px; margin: 0 0 24px; }
.sidebar__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 35px; margin: 0 4px; padding: 0; color: var(--text); border-radius: var(--radius-sm); }
.sidebar__brand:hover { opacity: 0.88; }
.sidebar__mark { display: none; }
.sidebar__toggle { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; margin-inline-start: auto; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-muted); cursor: pointer; transition: background var(--ease), color var(--ease); }
.sidebar__toggle:hover { background: var(--nav-hover); color: var(--nav-text-strong); }
.workspace { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px; margin: 0 0 26px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); }
.workspace__avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; font-size: 11px; letter-spacing: 0.02em; }
.workspace__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.workspace__text strong { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace__text small { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The destination list scrolls; brand and base stay pinned. min-height: 0 lets the flex item shrink; the negative
   margin keeps the red tick (on the sidebar edge) inside the scroll box. */
.leftnav { display: flex; flex-direction: column; gap: 26px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 -17px; padding: 0 17px; scrollbar-width: thin; }
.nav-group { display: flex; flex-direction: column; gap: 3px; }
.nav-group__label {
  margin: 0 0 7px;
  padding: 0 13px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nav-text-dim);
}
.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  color: var(--nav-text);
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.35;
  transition: background var(--ease), color var(--ease);
}
.nav-link:hover { background: var(--nav-hover); color: var(--nav-text-strong); }
/* Active item: the blue-soft pill and the short Freightools red tick (the bar over the "T") on the sidebar's edge. */
.nav-link[aria-current='page'] { background: var(--nav-active-bg); color: var(--nav-text-strong); font-weight: 600; }
.nav-link[aria-current='page']::before { content: ''; position: absolute; inset-inline-start: -17px; top: 50%; width: 3px; height: 18px; margin-top: -9px; border-radius: 0 3px 3px 0; background: var(--brand-red); }
.nav-link__icon { flex: none; width: 17px; height: 17px; }
.nav-link__trail { flex: none; margin-inline-start: auto; color: var(--text-muted); }
.nav-link > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-link--help > span { white-space: normal; line-height: 1.3; }
.sidebar__base { flex: none; margin-top: auto; padding-top: var(--sp-4); display: flex; flex-direction: column; gap: 2px; }
.sidebar__base .nav-link { min-height: 36px; }
.sidebar-tip { margin: 0 2px var(--sp-3); padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.sidebar-tip__title { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 6px; font-size: 11.5px; font-weight: 600; line-height: 1.4; color: var(--text); }
.sidebar-tip__title .icon { margin-top: 1px; }
.sidebar-tip__text { margin: 0 0 12px; font-size: 11px; line-height: 1.65; color: var(--text-muted); }
.sidebar-tip__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 600; color: var(--text); text-decoration: none; }
.sidebar-tip__link:hover { color: var(--accent-ink); }
.sidebar__foot { padding: var(--sp-2) var(--sp-3) var(--sp-1); font-size: 11px; color: var(--nav-text-dim); }

.sidebar-backdrop { display: none; }

/* ===== collapsible sidebar (2026-11-09) ==========================================================================
   Adam: one sidebar on every page, collapsible like ChatGPT/Claude; it replaces the Shipments page's own icon rail and
   the second logo that came with it. The head's button folds the sidebar; <html data-nav="collapsed"> (the device's
   choice, stamped before the paint by theme.js, toggled by app.js) turns it into a 72px rail: the "T" mark instead of the
   wordmark with the button under it, the company's initials, the sections as 40px icons (the labels stay for screen
   readers and become tooltips), a hairline between the groups, no tip card, the cog above the avatar, and the account
   menu opening to the right of the rail (the rail's stacking layer sits above the page so the menu is never covered).
   From 960px only: below that the sidebar is the off-canvas drawer and always opens wide. No width animation: the
   content reflows once instead of on every frame. */
@media (min-width: 960px) {
  :root[data-nav='collapsed'] { --sidebar-w: 72px; }
  :root[data-nav='collapsed'] .sidebar { z-index: 40; padding: 20px 0 14px; }
  :root[data-nav='collapsed'] .sidebar__head { flex-direction: column; gap: 8px; margin: 0 0 16px; }
  :root[data-nav='collapsed'] .sidebar__brand { display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; margin: 0; border-radius: var(--radius-md); }
  :root[data-nav='collapsed'] .sidebar__brand:hover { opacity: 1; background: var(--nav-hover); }
  :root[data-nav='collapsed'] .sidebar__brand .brand-wordmark,
  :root[data-nav='collapsed'] .sidebar__brand .brand-logo { display: none; }
  :root[data-nav='collapsed'] .sidebar__mark { display: block; }
  :root[data-nav='collapsed'] .sidebar__toggle { margin: 0; }
  :root[data-nav='collapsed'] .workspace { justify-content: center; margin: 0 0 18px; padding: 0; border: 0; background: transparent; }
  :root[data-nav='collapsed'] .workspace__avatar { width: 36px; height: 36px; }
  :root[data-nav='collapsed'] .workspace__text,
  :root[data-nav='collapsed'] .nav-group__label,
  :root[data-nav='collapsed'] .nav-link > span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  :root[data-nav='collapsed'] .leftnav { gap: 12px; margin: 0; padding: 0; }
  :root[data-nav='collapsed'] .nav-group { align-items: center; }
  :root[data-nav='collapsed'] .nav-group + .nav-group::before { content: ''; width: 24px; height: 1px; margin: 0 0 9px; background: var(--sidebar-border); }
  :root[data-nav='collapsed'] .nav-link { justify-content: center; gap: 0; width: 40px; min-height: 40px; padding: 0; }
  /* the red tick stays on the rail's edge: the 40px link is centred in the 71px column */
  :root[data-nav='collapsed'] .nav-link[aria-current='page']::before { inset-inline-start: -15.5px; }
  :root[data-nav='collapsed'] .nav-link__trail,
  :root[data-nav='collapsed'] .sidebar-tip { display: none; }
  :root[data-nav='collapsed'] .sidebar__base { align-items: center; padding-top: 12px; }
  :root[data-nav='collapsed'] .account-bar { flex-direction: column-reverse; align-self: stretch; gap: 6px; margin: 8px 14px 0; padding-top: 12px; }
  :root[data-nav='collapsed'] .account-menu { flex: none; }
  :root[data-nav='collapsed'] .account-menu__btn { justify-content: center; width: 40px; min-height: 40px; padding: 0; border-radius: 50%; }
  :root[data-nav='collapsed'] .account-menu__who,
  :root[data-nav='collapsed'] .account-menu__chev { display: none; }
  :root[data-nav='collapsed'] .account-menu__panel { position: fixed; inset-inline: calc(var(--sidebar-w) + 8px) auto; bottom: 14px; width: 248px; }
}
/* ===== end collapsible sidebar ===================================================================================== */

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--topbar-h);
  padding: 0 30px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar__menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: var(--radius-md);
}
.topbar__menu-btn:hover { background: var(--nav-hover); color: var(--text); }
/* Breadcrumb: company › page (Atlas "Workspace › Copilot"). */
.crumbs { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 11.5px; color: var(--text-muted); }
.crumbs__root { display: inline-flex; min-width: 0; }
.crumbs__root .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
.crumbs__sep { flex: none; width: 14px; height: 14px; color: var(--text-muted); }
.crumbs__here { font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__tenant { font-weight: 400; }
.topbar__spacer { flex: 1 1 auto; }
/* Quiet topbar buttons (theme, copilot, bell): ghost until hovered or pressed. */
.topbar__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.topbar__btn::-webkit-details-marker { display: none; }
.topbar__btn:hover { background: var(--surface-2); color: var(--text); }
.topbar__btn[aria-expanded='true'], details[open] > .topbar__btn { background: var(--surface-3); color: var(--text); }
.copilot-toggle { border-color: var(--border); background: var(--surface); color: var(--text); padding: 0 11px; }
.copilot-toggle__icon { display: inline-flex; }
/* The theme toggle shows the moon in light mode and the sun at night. */
.theme-toggle .theme-toggle__sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .theme-toggle__sun { display: inline-block; }
  :root:not([data-theme='light']) .theme-toggle .theme-toggle__moon { display: none; }
}
:root[data-theme='dark'] .theme-toggle .theme-toggle__sun { display: inline-block; }
:root[data-theme='dark'] .theme-toggle .theme-toggle__moon { display: none; }
.topbar__avatar { display: inline-flex; flex: none; border-radius: 50%; text-decoration: none; }
.bell { position: relative; }
.bell > summary { list-style: none; }
.bell > summary::-webkit-details-marker { display: none; }
.bell__btn { padding: 0; width: 34px; }
.bell__icon { display: inline-flex; }
/* Atlas: a small steel-blue dot for unread updates (the count stays for screen readers and over 0 as a tiny figure). */
.bell__badge {
  position: absolute;
  top: 4px;
  inset-inline-end: 3px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  border: 2px solid var(--topbar-bg);
  font-size: 9px;
  font-weight: 600;
  line-height: 11px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.bell__badge--zero, .bell__badge:empty { display: none; }
.bell__panel { width: 360px; max-height: min(70vh, 560px); overflow: auto; }
.bell__empty { margin: 0; padding: var(--sp-6) var(--sp-4); text-align: center; font-size: 12px; }

/* Segmented control (environment switch, theme switch). `.seg.active` is the selected segment; `.missing` is an
   environment the tenant has not created yet. Atlas: a thin bordered box, the selected segment raised on surface-2. */
.segmented {
  display: inline-flex;
  align-items: stretch;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  gap: 1px;
}
.segmented .seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), box-shadow var(--ease);
}
.segmented .seg:hover { color: var(--text); }
.segmented .seg.active, .segmented .seg[aria-pressed='true'] { background: var(--surface-2); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07); }
.segmented .seg.missing { opacity: 0.6; font-style: italic; }
.segmented .seg.active.missing { color: var(--warning); }
nav.segmented .seg.active { cursor: default; }

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--avatar-ink);
  border: none;
  display: grid;
  place-items: center;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
  flex: none;
}
.avatar--sm { width: 27px; height: 27px; font-size: 9.5px; }
/* Dropdown panels (bell; the account menu reuses the look upwards): one look. */
.menu-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  min-width: 248px;
  z-index: 30;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 13px;
  box-shadow: var(--shadow-md);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu-head { padding: var(--sp-2) 10px var(--sp-3); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-1); }
.menu-head strong { display: block; font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.menu-head .muted { display: block; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.menu-section { padding: var(--sp-2) 10px var(--sp-1); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-subtle); }
.theme-switch { margin: 0 var(--sp-2) var(--sp-2); display: flex; }
.theme-switch .seg { flex: 1 1 0; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  text-align: start;
  cursor: pointer;
}
.menu-item:hover { background: var(--surface-2); }
.menu-item.danger { color: var(--danger); }
.menu-form { margin: 0; display: block; }
.menu-sep { height: 1px; background: var(--border); margin: var(--sp-1) 0; }

/* ---- content ---- */
.content { padding: 28px 30px 40px; max-width: calc(var(--content-w) + 60px); width: 100%; margin: 0 auto; min-width: 0; container: content / inline-size; }
/* Atlas page heading: a light, tightly tracked headline, a one-line subtitle, actions on the right. */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 25px; flex-wrap: wrap; }
.page-head > div:first-child { min-width: 0; }
.page-head h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.2; overflow-wrap: anywhere; }
.page-head .page-sub { margin: 7px 0 0; color: var(--text-muted); font-size: 12.5px; max-width: 80ch; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.page-head .page-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

/* Persistent banner above the content (support access, out-of-sync). Amber: it asks for attention, not alarm. */
.banner {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--warning-border);
  background: var(--warning-soft);
  color: var(--warning);
  margin-bottom: var(--sp-5);
  font-weight: 500;
  font-size: 12px;
}
.banner a { color: inherit; text-decoration-color: currentColor; }
.banner.err { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }
/* the failed-update banner on a shipment (views/detail.ts applyFailureBanner): the reason, then Try again on the right */
.apply-failure { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); font-weight: 400; }
.apply-failure__text { min-width: 0; }
.apply-failure__text strong { display: block; font-size: 13px; font-weight: 600; }
.apply-failure__text p { margin: 4px 0 0; max-width: 100ch; color: var(--text); overflow-wrap: anywhere; }
.apply-failure p.apply-failure__meta { color: var(--text-muted); font-size: 11.5px; }
.apply-failure__action { flex: none; margin: 0; }
.apply-failure__action .btn .icon { width: 15px; height: 15px; }
@media (max-width: 640px) { .apply-failure { flex-direction: column; } }

/* ============================================================ flash / notices / alerts ========================= */
/* Block boxes (their content mixes text, <strong>, links and paragraphs); the flash/alert icon sits in the left padding. */
.flash, .alert, .notice {
  position: relative;
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--text);
  margin-bottom: var(--sp-4);
  font-size: 12px;
  line-height: 1.55;
}
.flash, .alert { padding-inline-start: 2.6rem; }
.alert > p { margin: 0.35rem 0 0; }
.alert > .tbl:last-child { margin-bottom: 0; }
.notice { margin: var(--sp-2) 0 var(--sp-4); }
.help.wide { max-width: none; }
/* The icon is a glyph drawn by CSS (no image, no inline SVG authored in JS): a small filled circle carrying a character. */
.flash::before, .alert::before {
  content: 'i';
  position: absolute;
  inset-inline-start: 0.95rem;
  top: calc(12px + 1px);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  background: var(--text-muted);
  color: var(--surface);
}
.flash-ok { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.flash-ok::before { content: '✓'; background: var(--success); }
.flash-err, .alert, .alert-err { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }
.flash-err::before, .alert::before, .alert-err::before { content: '!'; background: var(--danger); }
.flash-info { background: var(--info-soft); border-color: var(--info-border); color: var(--info); }
.flash-info::before { background: var(--info); }
.flash-warn, .alert-blocked { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning); }
.flash-warn::before, .alert-blocked::before { content: '!'; background: var(--warning); }
.notice.tone-ok { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.notice.tone-wait { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning); }
.notice.tone-err { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }
.notice.tone-blocked { background: var(--blocked-soft); border-color: var(--blocked-border); color: var(--blocked); }
.notice.tone-info { background: var(--info-soft); border-color: var(--info-border); color: var(--info); }
.notice.tone-muted { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
.flash a, .notice a, .alert a { color: inherit; text-decoration-color: currentColor; }

/* ============================================================ badges ========================================== */
/* Calm pills with a dot in currentColor. WAITING IS NEVER GREEN: tone-wait is the warning family. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.4;
  vertical-align: middle;
}
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.tone-ok { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.tone-wait { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }
.tone-err { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }
.tone-blocked { background: var(--blocked-soft); color: var(--blocked); border-color: var(--blocked-border); }
.tone-muted { background: var(--grey-soft); color: var(--grey); border-color: var(--grey-border); }
.tone-info { background: var(--info-soft); color: var(--info); border-color: var(--info-border); }
.badge.tone-muted::before { display: none; }
.mode {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--text);
  vertical-align: middle;
}
.dg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); margin-inline-start: 5px; vertical-align: middle; box-shadow: 0 0 0 2px var(--danger-soft); }
.out-of-sync { color: var(--warning); font-weight: 600; }
.he { unicode-bidi: isolate; }
.en { color: var(--text-muted); }
.ok-text { color: var(--success); font-weight: 500; }
.err-text { color: var(--danger); font-weight: 500; }
.wait-text { color: var(--warning); font-weight: 500; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ============================================================ buttons ========================================= */
/* .btn is the PRIMARY action: Freightools navy with a white label (dark mode: near-white with a navy label);
   .secondary outline; .ghost quiet; .danger solid red; .link text-only; .small for row actions; .block full width.
   Disabled stays visible but inert. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  border-radius: var(--radius);
  border: 1px solid var(--accent-solid);
  background: var(--accent-solid);
  color: var(--accent-solid-ink);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ease), border-color var(--ease), color var(--ease), opacity var(--ease), transform var(--ease);
}
.btn:hover { background: var(--accent-solid-hover); border-color: var(--accent-solid-hover); }
.btn:active { transform: translateY(0.5px); }
.btn.secondary { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn.secondary:hover { background: var(--surface-2); border-color: var(--border); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.danger { background: var(--danger-solid); border-color: var(--danger-solid); color: var(--on-solid); }
.btn.danger:hover { background: var(--danger-solid-hover); border-color: var(--danger-solid-hover); }
.btn.link { background: transparent; border-color: transparent; color: var(--text-muted); font-weight: 500; padding-inline: 0.55rem; }
.btn.link:hover { background: var(--nav-hover); color: var(--text); }
.btn.small { min-height: 32px; padding: 6px 11px; font-size: 11.5px; }
.btn.block { width: 100%; }
.btn .icon { margin-inline: -2px; }
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn.htmx-request { opacity: 0.7; }
.actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin: var(--sp-3) 0; }
td.actions { display: table-cell; }
td.actions > *, .actions .inline { margin-inline-end: 4px; }
form.inline { display: inline; }
form.inline + form.inline { margin-inline-start: 4px; }
/* Square icon-only button (modal / drawer close, row menus). */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

/* ============================================================ cards =========================================== */
/* Flat: one hairline, no gradient, no lit edge, no shadow. */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  min-width: 0;
}
.card > h3:first-child, .card > .card__title, .card > header .card__title { margin-top: 0; margin-bottom: 18px; display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.card h3 .muted, .card .card__title .muted { font-weight: 400; font-size: 12px; letter-spacing: 0; }
.card > :last-child { margin-bottom: 0; }
.card + .card, .card-grid + .card, .card + .card-grid, .tbl-wrap + .card { margin-top: var(--sp-5); }
/* A card header row: title on the left, a quiet link or action on the right. */
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: 18px; flex-wrap: wrap; }
.card__head > .card__title, .card__head > h3 { margin: 0; }
.card__link { color: var(--text-muted); font-size: 11px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.card__link:hover { color: var(--text); }
/* One column by default. `.tiles` (dashboard counters) is 3 across, `.facts` (short read-only fact cards) 2 across — both
   only when the CONTENT column (a size container) is 820px or wider, so an open copilot drawer narrowing the page also
   stacks them. */
.card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-5); }
@container content (min-width: 820px) {
  .card-grid.tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid.facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container content (max-width: 560px) {
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv dd { margin-bottom: var(--sp-3); }
}
.card-grid > .card { margin-top: 0; }
.card-grid.tiles .card { padding: var(--sp-5) var(--sp-6); }
.card-grid.tiles .num { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 var(--sp-2); }
.card-grid.tiles .num a { text-decoration: none; }
/* Full-width sections one under the other (the admin environment sections, the integration cards). */
.stack { display: flex; flex-direction: column; gap: var(--sp-6); margin-bottom: var(--sp-6); }
.stack > .card { margin-top: 0; }
ul.links { margin: 0; padding-inline-start: 18px; }
ul.links li { margin: 0 0 var(--sp-2); }
.card.open { border-inline-start: 3px solid var(--warning); }
.card.closed { opacity: 0.78; }
.card.accent { border-color: var(--border-strong); box-shadow: 0 0 0 3px var(--surface-2); }

/* The shipment status strip under the detail header: borderless, one line of badges and figures that wraps. */
.status-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin: calc(-1 * var(--sp-3)) 0 var(--sp-6);
  font-size: 12px;
}
.status-strip__item { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.status-strip__label { color: var(--text-subtle); font-size: 11.5px; }
.status-strip .he, .status-strip .en { font-size: 12px; }
.journey-slot:empty { display: none; }

/* ============================================================ tables ========================================== */
/* Calm register: sticky header, no zebra, quiet row hover, numeric right-aligned, 14px. `.tbl-wrap` adds the frame,
   horizontal scroll and (on wide screens) a viewport-tall scroll box so the header stays visible; a bare `.tbl` keeps
   its own frame for views that render it directly. */
.tbl-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); margin-bottom: var(--sp-5); max-width: 100%; }
.tbl-wrap > .tbl { border: none; border-radius: 0; margin: 0; overflow: visible; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); font-size: 12px; margin-bottom: var(--sp-5); overflow: hidden; }
.tbl th, .tbl td { padding: 14px 17px; border-bottom: 1px solid var(--border); text-align: start; vertical-align: top; white-space: nowrap; }
/* Prose columns opt back into wrapping with a readable measure (messages, details, hints); refs and figures never break. */
.tbl td.wrap, .tbl th.wrap, .tbl.findings td:nth-child(3), .tbl.findings td:nth-child(5), .tbl.diff td:nth-child(4) { white-space: normal; min-width: 22ch; max-width: 60ch; }
.tbl th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--border);
  border-bottom-color: transparent;
  padding-block: 12px;
}
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background var(--ease); }
.tbl tbody tr:hover, .tbl tbody tr:focus-within { background: var(--row-hover); }
.tbl td.num, .tbl th.num { text-align: end; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tbl td.mono { font-size: 11.5px; }
/* Controls inside table rows: a select or text field keeps its natural width and sits on one line with its button
   (the global width: 100% made the role select fill the cell and pushed "Change" over the next column). */
.tbl td form.inline:has(select), .tbl td form.inline:has(input[type='text']) { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.tbl td select, .tbl td input[type='text'] { width: auto; min-height: 32px; padding-block: 0.3rem; }
.tbl td select { min-width: 8.5em; }
.tbl tr:has(td form.inline) > td { vertical-align: middle; }
.tbl td a:not(.btn) { color: inherit; }
.tbl td a:not(.btn):hover { text-decoration-color: currentColor; }
.tbl.compact th, .tbl.compact td { padding: 0.5rem 0.8rem; }
.tbl tr.closed td { color: var(--text-subtle); }
.tbl .badge { vertical-align: middle; }

/* Diff table: from/to cells, highlighter island (app.js) toggles .diff-highlight and hides unchanged rows. */
.diff .from { color: var(--danger); }
.diff .to { color: var(--success); }
.diff.diff-highlight .from { background: var(--diff-from-bg); }
.diff.diff-highlight .to { background: var(--diff-to-bg); }
.diff.diff-highlight tr.changed td:first-child { font-weight: 600; }
.diff.diff-highlight tr.changed td:first-child code { border-color: var(--border-strong); }

/* Key/value list for SHORT READ-ONLY FACTS only (never a form): a label column of at most 190px, the value column wraps. */
.kv { display: grid; grid-template-columns: minmax(100px, 170px) minmax(0, 1fr); gap: 9px var(--sp-5); margin: 0 0 var(--sp-2); align-items: baseline; font-size: 12px; }
.kv dt { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ============================================================ forms =========================================== */
.form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; margin: var(--sp-2) 0 var(--sp-5); max-width: 720px; }
.form.wide { max-width: none; }
.card .form { padding: 0; border: none; background: transparent; margin: 0 0 var(--sp-4); max-width: none; }
.card .form:last-child { margin-bottom: 0; }
/* A field is label ABOVE input, one line of help under it; the input never grows past 640px. */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--sp-5); min-width: 0; }
.field label, .field > span.lbl, .lbl, legend.lbl { font-size: 12px; color: var(--text); font-weight: 500; }
.field label .muted, .field .lbl .muted { font-weight: 400; }
.field .help { margin: 0; }
.field > input:not([type='checkbox']):not([type='radio']), .field > select, .field > textarea, .field .field > input, .field .field > select { max-width: 640px; }
.field .facts { margin: 0; font-size: 12.5px; }
fieldset.field .field { margin-bottom: var(--sp-3); }
/* .row once laid fields side by side; forms are single-column now, so it only stacks (kept so older templates stay valid). */
.row { display: flex; flex-direction: column; gap: 0; }
.row .field { flex: none; width: 100%; }
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='hidden']):not([type='file']),
select,
textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--ease), box-shadow var(--ease);
}
input:hover:not(:focus):not(:disabled), select:hover:not(:focus):not(:disabled), textarea:hover:not(:focus):not(:disabled) { border-color: var(--text-subtle); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
input:disabled, input[readonly], select:disabled, textarea:disabled { background: var(--surface-2); color: var(--text-muted); }
textarea { min-height: 88px; font-family: var(--mono); font-size: 11.5px; line-height: 1.55; }
input[type='file'] { font: inherit; font-size: 12px; color: var(--text-muted); max-width: 100%; }
::file-selector-button { font: inherit; font-weight: 550; font-size: 12px; margin-inline-end: 0.75rem; padding: 0.35rem 0.8rem; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); cursor: pointer; }
::file-selector-button:hover { background: var(--surface-2); }
input[type='checkbox'], input[type='radio'] { width: 18px; height: 18px; margin: 0; flex: none; }
.check { display: inline-flex; align-items: center; gap: 10px; margin: 4px 0; font-weight: 500; font-size: 12.5px; cursor: pointer; min-height: 32px; }
.check + .help { margin: -2px 0 var(--sp-4) 28px; max-width: 640px; }
.radio-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 var(--sp-4); }
.radio { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color var(--ease), background var(--ease); }
.radio:hover { border-color: var(--border-strong); background: var(--surface-2); }
.radio:has(input:checked) { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.radio input { margin: 0; }
.toolbar { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--sp-5); padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.toolbar .field { margin-bottom: 0; min-width: 150px; flex: 0 1 auto; }
.toolbar .field > input, .toolbar .field > select { max-width: none; }
.toolbar .field label { font-size: 11px; font-weight: 500; color: var(--text-muted); }
.toolbar .btn { margin-bottom: 2px; }
progress { width: 100%; height: 6px; border-radius: 4px; overflow: hidden; accent-color: var(--text); margin: var(--sp-2) 0; }

/* ============================================================ code / JSON / token ============================= */
pre.json, pre.code {
  position: relative;
  margin: 0 0 var(--sp-3);
  padding: 18px;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: 10px;
  font-size: 11.5px;
  line-height: 1.8;
  overflow: auto;
  max-height: 520px;
  color: var(--code-ink);
  tab-size: 2;
}
/* A code block with its copy button pinned to the top-right corner (the button is placed BEFORE the <pre> in markup). */
.code-block { position: relative; }
.code-block .copy-btn { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 1; }
.code-block pre { padding-top: var(--sp-10); }
.token-panel {
  border: 1px solid var(--warning-border);
  background: var(--warning-soft);
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-3) 0 var(--sp-5);
}
.token-panel strong { color: var(--warning); }
.token-panel code {
  display: block;
  word-break: break-all;
  background: var(--surface);
  border: 1px solid var(--warning-border);
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  margin: var(--sp-3) 0;
  font-size: 12px;
  color: var(--text);
  user-select: all;
}
.token-panel .btn { margin-inline-end: var(--sp-2); }
.qr { display: block; width: 220px; height: 220px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; padding: 6px; margin: var(--sp-2) 0; }

/* ============================================================ tabs / pager / legend / misc ==================== */
/* Tabs: text-coloured underline on a bottom hairline; scrolls sideways on narrow screens instead of wrapping. */
.tabs {
  display: flex;
  gap: 24px;
  margin-bottom: 23px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  box-shadow: inset 0 -1px 0 var(--border);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0;
  color: var(--text-muted);
  font-weight: 400;
  font-size: 12px;
  white-space: nowrap;
  transition: color var(--ease), box-shadow var(--ease);
}
.tabs a:hover { color: var(--text); box-shadow: inset 0 -2px 0 var(--border); }
.tabs a.active, .tabs a[aria-selected='true'] { color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent-solid); }
.tabs a.htmx-request { opacity: 0.6; }
.pager { display: flex; gap: var(--sp-3); align-items: center; margin: var(--sp-4) 0; font-size: 12px; flex-wrap: wrap; }
.pager .pg { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-weight: 500; border-color: var(--border); }
.pager .pg:hover { background: var(--surface-2); }
.pager .pg.disabled { color: var(--text-subtle); border-color: var(--border); background: transparent; }
.pg-info { color: var(--text-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.legend { display: flex; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; align-items: center; color: var(--text-subtle); font-size: 11.5px; margin: 0 0 var(--sp-4); }
/* Empty states: a quiet dashed frame; emptyState() adds an icon, a title, a line and an action. */
.empty { color: var(--text-muted); padding: 40px var(--sp-6); text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: transparent; margin: 0 0 var(--sp-5); max-width: none; }
.levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: 0 0 var(--sp-5); }
.levels .level { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); background: var(--surface); color: var(--text-muted); font-size: 12px; }
.levels .level strong { color: var(--text); }
.levels .level.on { border-color: var(--success-border); background: var(--success-soft); }
.levels .level.on strong { color: var(--success); }
ul.levels-list { margin: 0; padding-inline-start: 14px; color: var(--text-muted); font-size: 11.5px; }
details.fold { margin: 0 0 var(--sp-4); }
details.fold > summary { display: flex; align-items: center; gap: var(--sp-2); min-height: 36px; font-weight: 550; color: var(--text); list-style: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: ''; width: 6px; height: 6px; border-inline-end: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--ease); margin-inline-end: 4px; color: var(--text-subtle); }
details.fold[open] > summary::before { transform: rotate(45deg); }
details.fold > summary .muted { font-weight: 400; }
.table-note { color: var(--text-subtle); font-size: 11.5px; margin: calc(-1 * var(--sp-2)) 0 var(--sp-5); }

/* ============================================================ admin environment sections ===================== */
/* One environment = one full-width .card.env: a header with the title and the one-line summary, then titled groups
   separated by hairlines, 24–32px apart; "Advanced" is a collapsed <details> styled like a group title. */
.env__head { margin-bottom: var(--sp-5); }
.env__summary { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: 0; font-size: 12px; color: var(--text-muted); }
.env .group { padding: var(--sp-6) 0 var(--sp-2); border-top: 1px solid var(--border); }
.env .group > h3, .env details.advanced > summary { font-size: 15px; font-weight: 600; letter-spacing: -0.006em; margin: 0 0 var(--sp-4); color: var(--text); }
.env details.advanced { margin: 0; padding-bottom: var(--sp-4); }
.env details.advanced > summary { min-height: 36px; margin-bottom: var(--sp-2); }
/* the incoterm id table (phase B): twelve short number fields in a grid */
.env .incoterm-ids { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--sp-2) var(--sp-3); }
.env .incoterm-ids .field { margin: 0; }
.env .incoterm-ids input { width: 100%; }
.env details.advanced[open] > summary { margin-bottom: var(--sp-4); }
.env details.advanced > summary .muted { font-weight: 400; font-size: 12px; letter-spacing: 0; }
.env .form + .form { margin-top: var(--sp-5); }
.company-meta { color: var(--text-subtle); font-size: 12px; margin: 0 0 var(--sp-5); }
.company-meta .badge { vertical-align: middle; }
.env-pick { margin-bottom: var(--sp-5); }
/* Platform settings → Branding → logo preview. */
.logo-preview { display: flex; align-items: center; gap: var(--sp-4); margin: 0 0 var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.logo-preview img { display: block; max-height: 48px; max-width: 220px; width: auto; height: auto; }

/* ============================================================ responsive ====================================== */
@media (min-width: 1550px) {
  .content { padding: 32px 42px 44px; }
}
@media (max-width: 1200px) {
  .content { padding: 24px 23px 36px; }
  .topbar { padding: 0 23px; }
}
@media (min-width: 960px) {
  /* Long tables scroll inside their frame so the sticky header stays in view. */
  .tbl-wrap { max-height: calc(100vh - var(--topbar-h) - 96px); }
}
@media (max-width: 959px) {
  .app-shell { display: block; }
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: min(var(--sidebar-w), 86vw);
    height: 100vh;
    height: 100dvh;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform var(--ease-out);
  }
  body.nav-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 50; background: var(--scrim); }
  body.nav-open .sidebar-backdrop { display: block; }
  body.nav-open { overflow: hidden; }
  .topbar { min-height: 58px; padding: 0 var(--sp-4); gap: 6px; }
  .topbar__menu-btn { display: inline-flex; }
  /* the drawer always opens wide: the collapse button is for the desktop sidebar */
  .sidebar__toggle { display: none; }
  .copilot-toggle__label { display: none; }
  .copilot-toggle { padding: 0; width: 34px; }
  /* Dropdowns become full-width sheets under the top bar so they never push the page sideways. */
  .menu-panel { position: fixed; top: calc(58px + 4px); inset-inline: var(--sp-3); width: auto; min-width: 0; }
  .content { padding: 21px 17px 36px; }
  .page-head { margin-bottom: 20px; }
  .page-head h1 { font-size: 25px; }
  h2 { margin-top: var(--sp-8); }
  .tbl th, .tbl td { padding: 11px 12px; }
  /* A bare table scrolls inside itself instead of widening the page. */
  .tbl { display: block; overflow-x: auto; }
  .tbl-wrap > .tbl { display: table; }
  .card { padding: 17px; }
  .form { padding: 17px; }
  .levels { grid-template-columns: 1fr; }
  .toolbar .field { min-width: 0; flex: 1 1 140px; }
}
@media (max-width: 760px) {
  /* the theme stays one tap away in the account menu */
  .topbar .theme-toggle { display: none; }
  .crumbs { font-size: 11px; }
  /* iOS zooms into a focused field under 16px. */
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='hidden']):not([type='file']), select, textarea { font-size: 16px; }
}
@media (max-width: 640px) {
  .segmented .seg { padding: 0 9px; }
  .crumbs__root, .crumbs__sep { display: none; }
  .page-head .page-actions { width: 100%; }
  .status-strip { gap: var(--sp-2) var(--sp-4); }
  .topbar__avatar { display: none; }
}

/* ============================================================ print =========================================== */
@media print {
  .sidebar, .sidebar-backdrop, .topbar, .skip-link, .page-actions, .actions, .toolbar, .pager, .legend, .tabs, .drawer, .drawer-backdrop, .toasts, dialog { display: none !important; }
  .app-shell { display: block; margin: 0 !important; }
  .content { max-width: none; padding: 0; }
  .tbl-wrap { max-height: none; overflow: visible; }
  .card, .tbl, .form { box-shadow: none; break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

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

/* ============================================================ small structural extras ========================= */
fieldset { border: none; padding: 0; margin: 0 0 var(--sp-4); min-width: 0; }
fieldset.field { display: block; }
legend { padding: 0; margin-bottom: 6px; }
.card > .tbl-wrap:last-child, .card > .tbl:last-child { margin-bottom: 0; }
.card > .tbl-wrap + .help { margin-top: var(--sp-3); }
.card .tbl-wrap { max-height: none; }
.content > .card + h2 { margin-top: var(--sp-8); }
/* The API docs shell: a slim bar with the brand, the content column without the sidebar. */
body.docs .main { min-height: 100vh; }
.docs-brand { flex-direction: row; align-items: center; gap: 12px; padding: 0; margin: 0; flex: none; min-height: 0; }
.docs-brand .brand-wordmark { width: 118px; height: 28px; }
.docs-brand:hover { background: transparent; }
.docs-content { max-width: 1400px; }

/* =====================================================================================================================
   RELEASE 2 — append-only sections, one per stream. Keep each stream's rules inside its own block so parallel branches
   never touch the same lines. Token changes go in the :root / dark blocks at the top of the file (stream UI-A only).
   ===================================================================================================================== */

/* ===== primitives (UI-A) ============================================================================================ */
/* Shared building blocks for every release-2 stream (markup in src/ui/overlays.ts, charts.ts, icons.ts; behaviour in
   the primitives section of app.js). Class names are the contract — the dashboard, wizard, journey and copilot
   sections style only their own content on top of these. */

/* ---- icons (src/ui/icons.ts) ---- */
.icon { display: inline-block; flex: none; vertical-align: -0.22em; }
.icon-btn .icon, .topbar__btn .icon, .topbar__menu-btn .icon { vertical-align: middle; }

/* ---- layout helpers ---- */
.grid-2, .grid-3 { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--sp-5); }
@container content (min-width: 820px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.grid-2 > .card, .grid-3 > .card { margin-top: 0; }
/* A section title row: h2 on the left, a quiet link or button on the right. */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-10) 0 var(--sp-4); }
.section-head > h2 { margin: 0; }
.section-head .muted { font-size: 12px; }
/* Compact rows inside a card (documents summary, dashboard queues): hairline-separated, one line each. */
.mini-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.mini-list > li { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; max-width: none; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.mini-list > li:first-child { padding-top: 0; }
.mini-list > li:last-child { border-bottom: none; padding-bottom: 0; }
.mini-list .grow { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-list .meta { flex: none; color: var(--text-subtle); font-size: 11.5px; }

/* ---- modal: native <dialog class="modal" data-modal> opened with showModal() ---- */
dialog.modal {
  padding: 0;
  margin: auto;
  width: min(var(--modal-w), calc(100vw - 2 * var(--sp-6)));
  max-width: calc(100vw - 2 * var(--sp-6));
  max-height: calc(100vh - 2 * var(--sp-8));
  max-height: calc(100dvh - 2 * var(--sp-8));
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
dialog.modal[open] { display: flex; flex-direction: column; animation: em-modal-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1); }
dialog.modal::backdrop { background: var(--scrim, rgba(11, 29, 40, 0.36)); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: em-fade-in 180ms ease; }
dialog.modal.modal--md { width: min(640px, calc(100vw - 2 * var(--sp-6))); }
dialog.modal.modal--lg { width: min(var(--modal-w), calc(100vw - 2 * var(--sp-6))); }
dialog.modal.modal--full { width: calc(100vw - 2 * var(--sp-6)); height: calc(100vh - 2 * var(--sp-6)); height: calc(100dvh - 2 * var(--sp-6)); max-height: none; }
/* side panel: docked to the right edge at full height (a proposal's full mapping) */
dialog.modal.modal--side { margin: 0 0 0 auto; width: min(680px, 100vw); max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; border-width: 0 0 0 1px; border-radius: 0; }
dialog.modal.modal--side[open] { animation: em-side-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes em-side-in { from { opacity: 0.5; transform: translateX(32px); } to { opacity: 1; transform: none; } }
.modal__head { display: flex; align-items: center; gap: var(--sp-3); flex: none; padding: 20px 18px 16px 24px; border-bottom: 1px solid var(--border); }
.modal__title { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 18px; letter-spacing: -0.035em; }
.modal__body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 24px; }
.modal__body > :last-child { margin-bottom: 0; }
.modal__foot { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface); }
.modal__foot .spacer { flex: 1 1 auto; }
html:has(dialog.modal[open]) { overflow: hidden; }
/* Feedback while a modal is open (app.js primitives): htmx error alerts bound for #flash land in .modal__flash, between
   the header and the scrolling body so they are always in view; the #toasts stack moves into the open dialog (the top
   layer) and sits at the top centre there, clear of the close button and the footer actions. */
.modal__flash { flex: none; max-height: 40vh; max-height: 40dvh; overflow: auto; overscroll-behavior: contain; padding: 0 var(--sp-7); }
.modal__flash:empty { display: none; }
.modal__flash > .alert { margin: var(--sp-1) 0 var(--sp-3); }
dialog.modal > .toasts { top: var(--sp-4); bottom: auto; inset-inline: 0; margin-inline: auto; }
@keyframes em-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes em-sheet-in { from { opacity: 0.6; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes em-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- drawer: <aside class="drawer" data-drawer> on the right; pushes the shell at >= 1280px, overlays below ---- */
.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  z-index: 70;
  width: min(var(--drawer-w), 100vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-inline-start: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--ease-out), visibility 0s linear 200ms;
}
.drawer.is-open { transform: none; visibility: visible; transition: transform var(--ease-out), visibility 0s; }
.drawer:focus { outline: none; }
.drawer__head { display: flex; align-items: center; gap: var(--sp-2); flex: none; min-height: var(--topbar-h); padding: 0 var(--sp-3) 0 var(--sp-5); border-bottom: 1px solid var(--border); }
.drawer__title { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 15px; }
.drawer__open { padding: 6px 10px; border-radius: var(--radius-md); color: var(--text-muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
.drawer__open:hover { background: var(--nav-hover); color: var(--text); }
.drawer__body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--sp-5); }
.drawer-backdrop { display: none; position: fixed; inset: 0; z-index: 65; background: var(--scrim); }
.drawer.is-open + .drawer-backdrop { display: block; animation: em-fade-in 180ms ease; }
@media (max-width: 1279px) {
  body.drawer-open { overflow: hidden; }
}
@media (min-width: 1280px) {
  body.drawer-open .app-shell { margin-inline-end: var(--drawer-w); }
  .drawer { box-shadow: none; }
  .drawer.is-open + .drawer-backdrop { display: none; }
}

/* ---- toasts: #toasts stack (window.emToast) ---- */
.toasts {
  position: fixed;
  z-index: 90;
  inset-inline-end: var(--sp-6);
  bottom: var(--sp-6);
  width: min(400px, calc(100vw - 2 * var(--sp-4)));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 10px 12px 17px;
  border-radius: var(--radius);
  border: 1px solid var(--toast-border);
  background: var(--toast-bg);
  color: var(--toast-ink);
  box-shadow: var(--shadow-md);
  font-size: 12px;
  line-height: 1.45;
  animation: em-toast-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.toast.is-leaving { animation: em-toast-out 160ms ease forwards; }
.toast__dot { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--toast-muted); }
.toast--ok .toast__dot { background: var(--toast-ok); }
.toast--err .toast__dot { background: var(--toast-err); }
.toast--warn .toast__dot { background: var(--toast-warn); }
.toast--info .toast__dot { background: var(--toast-info); }
.toast__text { flex: 1 1 auto; min-width: 0; margin: 0; max-width: none; overflow-wrap: anywhere; }
.toast__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: -3px 0 0; padding: 0; border: none; border-radius: 6px; background: transparent; color: var(--toast-muted); font: inherit; font-size: 17px; line-height: 1; cursor: pointer; }
.toast__close:hover { color: var(--toast-ink); background: var(--toast-border); }
@keyframes em-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes em-toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ---- stepper (wizard steps) ---- */
.stepper { display: flex; align-items: center; margin: 0 0 var(--sp-6); padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.stepper::-webkit-scrollbar { display: none; }
.step { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; max-width: none; }
.step + .step { flex: 1 1 auto; }
.step + .step::before { content: ''; flex: 1 1 auto; min-width: 16px; height: 1px; margin: 0 var(--sp-2); background: var(--border-strong); }
.step.is-done + .step::before { background: var(--text-muted); }
.step > a, .step > span { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 2px 8px 2px 2px; border-radius: 999px; color: var(--text-muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
.step > a:hover { background: var(--nav-hover); color: var(--text); }
.step__n { width: 26px; height: 26px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.step__n .icon { width: 14px; height: 14px; }
.step.is-done .step__n { border-color: var(--text-muted); color: var(--text); }
.step.is-current > a, .step.is-current > span { color: var(--text); font-weight: 600; }
.step.is-current .step__n { border-color: var(--accent-solid); background: var(--accent-solid); color: var(--accent-solid-ink); }
.step.has-error .step__n { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger); }
.step.has-error .step__label { color: var(--danger); }
.stepper--compact .step__label { display: none; }
.stepper--compact .step.is-current .step__label { display: inline; }
@media (max-width: 640px) {
  .stepper .step__label { display: none; }
  .stepper .step.is-current .step__label { display: inline; }
}

/* ---- stat tiles ---- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 15px; margin: 0 0 22px; }
.stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 17px 19px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  transition: border-color var(--ease), background var(--ease);
}
a.stat:hover { border-color: var(--border-strong); background: var(--surface); }
.stat__label { display: flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 11.5px; font-weight: 400; justify-content: space-between; }
.stat__value { color: var(--text); font-size: 28px; font-weight: 500; letter-spacing: -0.05em; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat__delta { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: 11px; }
.stat__delta.is-up::before { content: '↑'; }
.stat__delta.is-down::before { content: '↓'; }
.stat__delta.is-flat::before { content: '→'; }
.stat__delta.is-good { color: var(--success); }
.stat__delta.is-bad { color: var(--danger); }
.stat__spark { margin-top: var(--sp-2); height: 32px; }
.stat__spark .chart { display: block; width: 100%; height: 32px; }
.stat__help { font-size: 11.5px; }
/* A toned tile keeps the neutral surface; the tone shows as a dot before the label and on the figure. */
.stat[class*='tone-'] { background: var(--surface); border-color: var(--border); color: var(--text); }
.stat[class*='tone-'] .stat__label::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--grey); }
.stat.tone-ok .stat__label::before { background: var(--success); }
.stat.tone-wait .stat__label::before { background: var(--warning); }
.stat.tone-err .stat__label::before { background: var(--danger); }
.stat.tone-blocked .stat__label::before { background: var(--blocked); }
.stat.tone-info .stat__label::before { background: var(--info); }
.stat.tone-wait .stat__value { color: var(--warning); }
.stat.tone-err .stat__value { color: var(--danger); }
.stat.tone-blocked .stat__value { color: var(--blocked); }
.stat.tone-muted .stat__value { color: var(--text-muted); }

/* ---- empty state (emptyState(): keeps class="empty") ---- */
.empty h3 { margin: 0 0 6px; color: var(--text); font-size: 15px; }
.empty p { margin: 0 auto var(--sp-4); max-width: 56ch; }
.empty p:last-child { margin-bottom: 0; }
.empty__icon { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto var(--sp-4); border-radius: 12px; background: var(--surface-2); color: var(--text-muted); }
.empty .btn { margin-top: var(--sp-1); }

/* ---- skeleton (loading placeholders) ---- */
.skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--radius-sm); }
.skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent); animation: em-shimmer 1.4s ease-in-out infinite; }
.skeleton--text { height: 12px; width: 100%; margin: 0 0 10px; }
.skeleton--text:nth-of-type(3n + 2) { width: 86%; }
.skeleton--text:nth-of-type(3n) { width: 62%; }
.skeleton--tile { height: 104px; margin: 0 0 var(--sp-4); border-radius: var(--radius-lg); }
.skeleton--table { height: 220px; margin: 0 0 var(--sp-4); border-radius: var(--radius-lg); }
@keyframes em-shimmer { to { transform: translateX(100%); } }

/* ---- charts (src/ui/charts.ts): the class on a mark (or its group) sets --series; marks read it ---- */
.c-1 { --series: var(--chart-1); }
.c-2 { --series: var(--chart-2); }
.c-3 { --series: var(--chart-3); }
.c-4 { --series: var(--chart-4); }
.c-5 { --series: var(--chart-5); }
.c-ok { --series: var(--success); }
.c-wait { --series: var(--warning); }
.c-err { --series: var(--danger); }
.c-blocked { --series: var(--blocked); }
.c-grey { --series: var(--chart-4); }
.c-info { --series: var(--info); }
.chart { display: block; max-width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.chart text { fill: var(--text-subtle); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .bar { fill: var(--series, var(--chart-1)); transition: opacity var(--ease); }
.chart .bar:hover { opacity: 0.82; }
.chart .bar__track { fill: var(--chart-track); }
.chart .chart__grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart .chart__axis { stroke: var(--border-strong); stroke-width: 1; }
.chart .chart__label { fill: var(--text); font-size: 11.5px; }
.chart .chart__value { fill: var(--text-muted); font-size: 11.5px; }
.chart .chart__empty { fill: var(--text-subtle); font-size: 11.5px; }
.chart .chart__link:hover .chart__label { text-decoration: underline; }
.chart--spark .spark__line { fill: none; stroke: var(--series, var(--chart-1)); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.chart--spark .spark__area { fill: var(--series, var(--chart-1)); opacity: 0.1; }
.chart--spark .spark__base { stroke: var(--chart-grid); stroke-width: 1; }
.chart.chart--stacked { width: 100%; height: 14px; border-radius: 999px; overflow: hidden; }
.chart--donut .donut__track { fill: none; stroke: var(--chart-track); }
.chart--donut .donut__seg { fill: none; stroke: var(--series, var(--chart-1)); }
.chart--donut .donut__value { fill: var(--text); font-size: 18px; font-weight: 600; }
.chart--donut .donut__label { fill: var(--text-subtle); font-size: 11px; }
.chart--timeline .tl__dot { fill: var(--series, var(--chart-1)); stroke: var(--surface); stroke-width: 2; }
.chart--timeline .tl__label { fill: var(--text-muted); }
.chart-box { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.chart-box--donut { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-6); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px var(--sp-5); margin: 0; padding: 0; list-style: none; color: var(--text-muted); font-size: 12px; }
.chart-box--donut .chart-legend { flex-direction: column; }
.chart-legend li { display: inline-flex; align-items: center; gap: 7px; max-width: none; }
.chart-legend__value { color: var(--text); font-weight: 500; }
.chart-legend__pct { color: var(--text-subtle); }
.swatch { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--series, var(--chart-1)); }

@media print {
  .drawer, .drawer-backdrop, .toasts, dialog.modal { display: none !important; }
}
/* ===== end primitives (UI-A) ======================================================================================== */

/* ===== dashboard (UI-B) ============================================================================================= */
/* Customer dashboard (/portal/:env) and admin dashboard (/admin, /admin/companies/:id/dashboard). Work queue first, KPIs
   below; list cards are quiet registers (one line of "why" per row), charts sit in plain cards. Only dash-* classes are
   styled here — the stat tile, chart and empty-state primitives belong to UI-A. Chart swatches read --chart-1…5 when
   UI-A defines them and fall back to the neutral text ramp. */
.dash { display: flex; flex-direction: column; gap: var(--sp-8); }
.dash-section { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.dash-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.dash-section__head h2 { margin: 0; }
.dash-section__note { margin: 0; color: var(--text-subtle); font-size: 11.5px; }
.dash-tile { display: contents; }
.dash-queue, .dash-kpis { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; transition: opacity var(--ease); }
.dash-queue.htmx-request, .dash-kpis.htmx-request { opacity: 0.85; }
.dash-queue:empty, .dash-kpis:empty { display: none; }

/* list cards */
.dash-lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
.dash-lists--two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--sp-4); }
.dash-card { padding: var(--sp-4) var(--sp-5); min-width: 0; margin: 0; }
.card.dash-card + .card.dash-card { margin-top: 0; }
.dash-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.dash-card__head h3 { margin: 0; font-size: 15px; }
.dash-count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 var(--sp-2); border-radius: 999px; background: var(--surface-2); color: var(--text-subtle); font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.dash-count.is-on { background: var(--surface-3); color: var(--text); font-weight: 500; }
.dash-card__help { margin: 0 0 var(--sp-2); color: var(--text-muted); font-size: 11.5px; }
.dash-card__more { margin: var(--sp-2) 0 0; font-size: 11.5px; }
.dash-quiet { margin: var(--sp-1) 0 0; color: var(--text-subtle); font-size: 12px; }
.dash-sub { margin: var(--sp-4) 0 var(--sp-2); font-size: 12px; font-weight: 600; }
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-row { padding: var(--sp-2) 0; min-width: 0; }
.dash-row + .dash-row { border-top: 1px solid var(--border); }
.dash-row__main { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }
.dash-row__ref { font-weight: 600; overflow-wrap: anywhere; }
a.dash-row__ref { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
a.dash-row__ref:hover { text-decoration-color: currentColor; }
.dash-row__badge { display: inline-flex; gap: var(--sp-1); flex-wrap: wrap; }
.dash-row__at { margin-inline-start: auto; color: var(--text-subtle); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.dash-row__why { margin-top: 2px; color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-row__why code { font-size: 11px; }
.dash-row__extra { margin-top: var(--sp-2); }
.dash-row__extra:empty { display: none; }
.dash-row__aside { margin-top: var(--sp-2); }
.dash-check { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }

/* KPI charts */
.dash-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.dash-chart { margin: 0; min-width: 0; }
.card.dash-chart + .card.dash-chart { margin-top: 0; }
.dash-chart--wide { grid-column: 1 / -1; }
.dash-chart > h3 { font-size: 15px; }
.dash-chart svg { max-width: 100%; }
.dash-donut { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
.dash-legend { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: 11.5px; color: var(--text-muted); }
.dash-legend li { display: inline-flex; align-items: center; gap: 6px; }
.dash-legend strong { color: var(--text); font-weight: 500; }
.dash-donut .dash-legend { flex-direction: column; margin: 0; }
.dash-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--text-subtle); }
.dash-swatch.c-1 { background: var(--chart-1, var(--text)); }
.dash-swatch.c-2 { background: var(--chart-2, var(--text-muted)); }
.dash-swatch.c-3 { background: var(--chart-3, var(--text-subtle)); }
.dash-swatch.c-4 { background: var(--chart-4, var(--border-strong)); }
.dash-swatch.c-5 { background: var(--chart-5, var(--surface-3)); }
.dash-swatch.c-ok { background: var(--success); }
.dash-swatch.c-wait { background: var(--warning); }
.dash-swatch.c-err { background: var(--danger); }
.dash-swatch.c-blocked { background: var(--blocked); }
.dash-swatch.c-grey { background: var(--grey-border); }

/* brand-new company */
.dash-hero { padding: var(--sp-8); margin: 0; }
.dash-hero h2 { margin: 0 0 var(--sp-2); font-size: 20px; }
.dash-hero__lead { margin: 0 0 var(--sp-5); max-width: 68ch; color: var(--text-muted); }
.dash-steps { list-style: none; counter-reset: dash-step; margin: 0 0 var(--sp-6); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.dash-steps li { counter-increment: dash-step; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); font-size: 12px; color: var(--text-muted); }
.dash-steps li::before { content: counter(dash-step); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); font-family: var(--mono); font-size: 11px; margin-bottom: var(--sp-1); }
.dash-steps strong { color: var(--text); }
.dash-hero__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.dash-hero__note { margin: var(--sp-3) 0 0; color: var(--text-subtle); font-size: 11.5px; }

/* admin */
.dash-tbl .dash-cell-chart { min-width: 128px; }
.dash-tbl td.dash-cell-chart.wrap { min-width: 200px; }
.dash-th-group { text-align: center; }
.dash-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: var(--sp-1); color: var(--text-muted); font-size: 11px; }
.dash-states { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0; color: var(--text-muted); font-size: 11.5px; }
.dash-state { display: inline-flex; align-items: center; gap: var(--sp-1); }
.dash-hourly h3 { font-size: 15px; }
.dash-sources { margin-top: var(--sp-4); }
.dash-checklist { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }
.dash-step { display: inline-flex; align-items: center; gap: 4px; padding: 1px var(--sp-2); border-radius: 999px; border: 1px solid var(--border); font-size: 11px; white-space: nowrap; }
.dash-step.is-met { color: var(--success); border-color: var(--success-border); background: var(--success-soft); }
.dash-step.is-open { color: var(--text-subtle); }
.dash-onboarding p { margin: var(--sp-2) 0 0; }
.dash-legend--stages { margin-top: var(--sp-2); }

@media (max-width: 1100px) {
  .dash-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .dash-lists, .dash-lists--two, .dash-charts, .dash-steps { grid-template-columns: minmax(0, 1fr); }
  .dash-hero { padding: var(--sp-5); }
}
/* ===== end dashboard (UI-B) ========================================================================================= */

/* ===== wizard (UI-C) ================================================================================================ */
/* The create-shipment wizard (src/portal/wizard/views.ts; its own page over the map since 2026-11-09, see the wz- block below): head (title + stepper), the step
   form as a 12-column field grid (fields declare xs/sm/md/lg/full), fieldsets for groups, dashed collapsible blocks
   for optional members, nested repeater rows, the autocomplete dropdown, check-digit hints, errors, the sticky footer,
   the variant cards, the review. Tokens only; light and dark come from the palette. */
.wizard { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.wiz-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-3) var(--sp-6); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
.wiz-head__text { min-width: 220px; flex: 1 1 260px; }
.wiz-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.wiz-sub { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; }
.wiz-steps { flex: 2 1 520px; min-width: 0; overflow-x: auto; }
.wiz-form { display: flex; flex-direction: column; min-width: 0; }
.wiz-main { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.wiz-intro { margin: 0; color: var(--text-muted); }
.wiz-note, .wiz-variant-note, .wiz-saved { margin: 0; }
.wiz-variant-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: 12px; }
.wiz-saved { color: var(--success); font-size: 12px; }

/* field grid */
.wiz-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); align-items: start; }
.wiz-grid > .wiz-f { margin: 0; grid-column: span 4; min-width: 0; }
.wiz-grid > .wiz-f--xs { grid-column: span 2; }
.wiz-grid > .wiz-f--sm { grid-column: span 3; }
.wiz-grid > .wiz-f--md { grid-column: span 4; }
.wiz-grid > .wiz-f--lg { grid-column: span 6; }
.wiz-grid > .wiz-f--full { grid-column: 1 / -1; }
.wizard .field > input:not([type='checkbox']):not([type='radio']), .wizard .field > select, .wizard .field > textarea, .wizard .ac > input { max-width: none; }
.wizard .field > label .req, .wizard .wiz-group__title .req { color: var(--danger); margin-inline-start: 3px; }
.wizard .field .help { font-size: 11px; color: var(--text-subtle); }
.wizard textarea { min-height: 64px; font-family: var(--mono); font-size: 11.5px; }
.wizard .is-upper { text-transform: uppercase; }
.wizard .is-upper::placeholder { text-transform: none; }

/* groups, optional blocks, repeaters */
.wiz-block { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.wiz-group, .wiz-rep { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.wiz-group > legend, .wiz-rep > legend { float: left; width: 100%; padding: 0; margin: 0; }
.wiz-group > legend + *, .wiz-rep > legend + * { clear: both; }
.wiz-group__title { font-weight: 600; font-size: 12.5px; color: var(--text); }
.wiz-group__help { margin: 0; font-size: 11.5px; color: var(--text-subtle); }
.wiz-group .wiz-group, .wiz-row .wiz-group { background: var(--surface-2); }
.wiz-opt { border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.wiz-opt[open] { border-style: solid; border-color: var(--border); }
.wiz-opt > summary { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); cursor: pointer; list-style: none; min-height: 40px; font-weight: 600; font-size: 12.5px; border-radius: var(--radius); }
.wiz-opt > summary::-webkit-details-marker { display: none; }
.wiz-opt > summary::before { content: '+'; display: inline-flex; justify-content: center; width: 16px; color: var(--text-muted); font-weight: 600; }
.wiz-opt[open] > summary::before { content: '−'; }
.wiz-opt > summary:hover { background: var(--surface-2); }
.wiz-opt > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.wiz-opt__tag { font-weight: 400; font-size: 11px; color: var(--text-subtle); }
.wiz-opt.is-needed { border-color: var(--warning-border); }
.wiz-opt.is-needed .wiz-opt__tag { color: var(--warning); }
.wiz-opt__body { display: flex; flex-direction: column; gap: var(--sp-3); padding: 0 var(--sp-4) var(--sp-4); }
.wiz-rows { display: flex; flex-direction: column; gap: var(--sp-3); }
.wiz-row { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); min-width: 0; }
.wiz-row .wiz-row, .wiz-row .wiz-rep { background: var(--surface); }
.wiz-row .wiz-row .wiz-group { background: var(--surface-2); }
.wiz-row__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.wiz-row__title { font-weight: 600; font-size: 12px; }
.wiz-remove[hidden] { display: none; }
.wiz-add { align-self: flex-start; }

/* partner chip */
.wiz-chip { display: inline-flex; align-self: flex-start; margin: 0; padding: 2px 10px; border: 1px solid var(--grey-border); border-radius: 999px; font-size: 11px; line-height: 1.6; color: var(--grey); background: var(--grey-soft); }
.wiz-chip[hidden] { display: none; }
.wiz-chip.is-matched { color: var(--success); background: var(--success-soft); border-color: var(--success-border); }
.wiz-chip.is-new { color: var(--info); background: var(--info-soft); border-color: var(--info-border); }
.wiz-chip.is-pending { color: var(--warning); background: var(--warning-soft); border-color: var(--warning-border); }

/* autocomplete */
.ac { position: relative; min-width: 0; }
.ac-list { display: none; position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; max-height: 300px; overflow: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.ac-list.is-open { display: block; }
.ac-list li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 4px; }
.ac-list li[role='option'] { cursor: pointer; }
.ac-list li[role='option']:hover, .ac-list li[aria-selected='true'] { background: var(--surface-3); }
.ac-main { font-weight: 500; overflow-wrap: anywhere; }
.ac-meta { font-size: 11px; color: var(--text-muted); overflow-wrap: anywhere; }
.ac-empty, .ac-status { font-size: 11.5px; color: var(--text-muted); }
.ac-status { border-top: 1px solid var(--border); margin-top: 4px; }
.ac-list li.ac-status:first-child { border-top: none; margin-top: 0; }
.ac-status.is-ok { color: var(--success); }

/* check-digit hints and errors */
.check-hint { margin: 0; font-size: 11px; color: var(--text-muted); }
.check-hint:empty { display: none; }
.check-hint.is-ok { color: var(--success); }
.check-hint.is-bad { color: var(--warning); }
.wizard .field.has-error > input, .wizard .field.has-error > select, .wizard .field.has-error > textarea, .wizard .field.has-error .ac > input { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.wiz-group.has-error, .wiz-rep.has-error, .wiz-row.has-error { border-color: var(--danger-border); }
.field-error { display: flex; flex-direction: column; gap: 2px; margin: 0; color: var(--danger); font-size: 11.5px; }
.field-error__code { font-family: var(--mono); font-size: 11px; color: var(--text-subtle); }
.wiz-banner { margin: 0; }
.wiz-banner__list { margin: var(--sp-2) 0 0; padding-inline-start: 18px; }

/* footer: primary action last in reading order on the right, first in the DOM so Enter saves and continues */
.wiz-foot { position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-5); padding: var(--sp-3) 0 var(--sp-1); background: var(--surface); border-top: 1px solid var(--border); }
.wiz-foot__left { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.wiz-foot .wiz-create { margin: 0; }
.wiz-blocked-why { font-size: 11.5px; }
.wizard .htmx-request .wiz-next, .wizard .wiz-next.htmx-request { opacity: 0.7; }

/* start: variant cards and drafts */
.wiz-variants { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); }
.wiz-variant { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 112px; padding: var(--sp-4); text-align: start; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color var(--ease), box-shadow var(--ease), background var(--ease); }
.wiz-variant:hover:not(:disabled) { border-color: var(--text-muted); background: var(--surface-2); }
.wiz-variant:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.wiz-variant__title { font-weight: 600; font-size: 13px; }
.wiz-variant__text { font-size: 12px; color: var(--text-muted); }
.wiz-variant__note { font-size: 11px; color: var(--text-subtle); }
.wiz-variant.is-disabled, .wiz-variant:disabled { cursor: not-allowed; opacity: 0.62; background: var(--surface-2); }
.wiz-start { margin: 0; }
.wiz-drafts h4, .wiz-json h4, .wiz-findings__group h4 { margin: 0 0 var(--sp-2); font-size: 13px; }
.wiz-drafts ul { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.wiz-drafts li { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; }

/* review */
.wiz-review { gap: var(--sp-5); }
.wiz-findings { display: flex; flex-direction: column; gap: var(--sp-3); }
.wiz-findings__group ul, .wiz-plain-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-inline-start: 18px; }
.wiz-intent { margin: 0; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.wiz-intent .help { margin: 0; }
.wiz-json pre.json { max-height: 460px; }
.wiz-json .help { margin: 0 0 var(--sp-2); }

/* launchers */
.wiz-loading { padding: var(--sp-6) 0; }
.wiz-launcher { display: flex; justify-content: flex-end; margin: 0 0 var(--sp-3); }
.wiz-launcher:empty { display: none; }
.wiz-cta { margin-inline-start: var(--sp-2); vertical-align: baseline; }
.wiz-cta[hidden] { display: none; }
.wiz-detail-actions { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); }
.wiz-detail-action { margin: 0; }

@media (max-width: 900px) {
  .wiz-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .wiz-grid > .wiz-f, .wiz-grid > .wiz-f--md, .wiz-grid > .wiz-f--lg { grid-column: 1 / -1; }
  .wiz-grid > .wiz-f--xs, .wiz-grid > .wiz-f--sm { grid-column: span 3; }
}
@media (max-width: 560px) {
  .wiz-grid > .wiz-f, .wiz-grid > .wiz-f--xs, .wiz-grid > .wiz-f--sm { grid-column: 1 / -1; }
  .wiz-group, .wiz-rep, .wiz-row { padding: var(--sp-3); }
}
@media (prefers-reduced-motion: reduce) { .wiz-variant { transition: none; } }
/* the wizard page over the map (2026-11-09, src/portal/wizard/views.ts + /static/wizard.js): the Copilot's ice-blue map
   fills the page; the wizard panel floats on the left, the live summary (read like the Freightools quote pop-up) on the
   right; the Review panel widens over the map and the summary steps aside. Below 900px the map is a strip on top and
   the panels stack. */
.content:has(> .wz) { max-width: none; padding: 0; }
.wz { position: relative; height: calc(100vh - var(--topbar-h)); height: calc(100dvh - var(--topbar-h)); min-height: 560px; overflow: hidden; background: var(--ocean); isolation: isolate; container: wz / inline-size; }
.wz-stage { position: absolute; inset: 0; z-index: 0; }
.wz-canvas { position: absolute; inset: 0; background: var(--ocean); }
.wz-stage .leaflet-container { background: var(--ocean); font-family: var(--font); outline: none; }
/* the global img/svg max-width would squeeze the land pane's SVG (a custom pane sits in a 0×0 box) to nothing */
.wz-stage .leaflet-pane svg, .wz-stage .leaflet-pane img { max-width: none; max-height: none; }
.wz-legend { position: absolute; z-index: 2; inset-inline-start: 50%; bottom: 10px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--text-muted); font-size: 10px; white-space: nowrap; pointer-events: none; }
.wz-legend__line { width: 14px; border-top: 2px solid var(--accent); }
.wz-route-halo { fill: none; stroke: var(--surface); stroke-opacity: 0.7; stroke-width: 7px; stroke-linecap: round; stroke-linejoin: round; }
.wz-route-line { fill: none; stroke: var(--accent); stroke-width: 2.6px; stroke-linecap: round; stroke-linejoin: round; }
.wz-route-line.is-air { stroke-dasharray: 2 7; }
.wz-pin-wrap { background: none; border: 0; }
.wz-pin { position: relative; width: 0; height: 0; }
.wz-pin__dot { position: absolute; inset-inline-start: -7px; top: -7px; width: 14px; height: 14px; border-radius: 3px; transform: rotate(45deg); background: var(--accent-solid); border: 2px solid var(--surface); box-shadow: var(--shadow-sm); }
.wz-pin__tag { position: absolute; inset-inline-start: 12px; top: -13px; display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 8px; border: 1px solid var(--glass-border); border-radius: 8px; background: var(--glass); box-shadow: var(--shadow-sm); color: var(--text); font-size: 11px; white-space: nowrap; }
.wz-pin__tag small { font-family: var(--mono); font-size: 10px; color: var(--text-muted); }
.wz-pin.is-left .wz-pin__tag { inset-inline-start: auto; inset-inline-end: 12px; }

/* the floating panels */
.wz-panel, .wz-summary { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.wz-panel { position: absolute; z-index: 3; top: 16px; bottom: 16px; inset-inline-start: 16px; width: 480px; max-width: calc(100% - 32px); display: flex; flex-direction: column; min-height: 0; }
.wz-panel--wide { width: min(980px, calc(100% - 32px)); inset-inline-start: max(16px, calc(50% - 490px)); }
.wizard.wz-root { gap: 0; flex: 1 1 auto; min-height: 0; }
.wz-head { padding: 14px 18px 0; border-bottom: 1px solid var(--border); }
.wz-head__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wz-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.wz-sub { margin: 2px 0 0; color: var(--text-muted); font-size: 11.5px; }
.wz-head__menus { display: flex; gap: 6px; }
.wz-menu { position: relative; }
.wz-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.wz-menu > summary::-webkit-details-marker { display: none; }
.wz-menu__list { position: absolute; z-index: 30; inset-inline-end: 0; top: calc(100% + 6px); width: 320px; max-height: 360px; overflow: auto; padding: 6px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.wz-menu__item { display: grid; gap: 2px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.wz-menu__item:hover, .wz-menu__item:focus-visible { background: var(--accent-soft); }
.wz-menu__item strong { font-family: var(--mono); font-size: 12px; font-weight: 500; }
.wz-menu__item span { color: var(--text-muted); font-size: 11.5px; }
.wz-menu__form { margin: 0; }
.wz-menu__note { margin: 4px 10px 6px; color: var(--text-subtle); font-size: 11px; }
.wz-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-top: 12px; }
.wz-step { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 7px 1px 10px; border-top: 3px solid var(--border); color: var(--text-muted); font-size: 11.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.wz-step__n { display: inline-grid; place-items: center; min-width: 12px; font-family: var(--mono); font-size: 10.5px; }
.wz-step__n svg { width: 13px; height: 13px; }
.wz-step__label { overflow: hidden; text-overflow: ellipsis; }
.wz-step:hover { color: var(--text); }
.wz-step.is-done { border-top-color: var(--accent); color: var(--text); }
.wz-step.has-gaps { border-top-color: var(--warning); color: var(--text); }
.wz-step.is-current { border-top-color: var(--accent-solid); color: var(--text); font-weight: 600; }
.wz-step.is-locked { cursor: default; opacity: 0.55; }
.wz-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.wz-body { display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 18px; }
.wz-q { display: grid; gap: 3px; }
.wz-q__n { color: var(--text-muted); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.wz-q h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.25; text-wrap: balance; }
.wz-q p { margin: 0; color: var(--text-muted); }
.wz-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--border); }
.wz-foot__sp { flex: 1 1 auto; }
.wz-foot .wiz-create { margin: 0; }
.wz-foot .wz-discard { padding-inline: 4px; }

/* Route */
.wz-service { display: grid; gap: 8px; }
.wz-label { font-size: 12.5px; font-weight: 600; }
.wz-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; padding: 3px; border-radius: 10px; background: var(--surface-3); }
.wz-seg__btn { display: grid; gap: 2px; min-width: 0; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); font: inherit; font-weight: 500; text-align: start; cursor: pointer; }
.wz-seg__btn small { color: var(--text-muted); font-size: 11px; font-weight: 400; }
.wz-seg__btn:hover:not(:disabled) { color: var(--text); }
.wz-seg__btn[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs), 0 0 0 1px var(--border); }
.wz-seg__btn:disabled { cursor: not-allowed; opacity: 0.55; }
.wz-seg__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.wz-seg--sm .wz-seg__btn { padding: 6px 8px; font-size: 12px; }
.wz-hint { margin: 0; color: var(--text-muted); font-size: 12px; }
.wz-route { position: relative; display: flex; flex-direction: column; gap: 10px; padding-inline-start: 30px; }
.wz-route::before { content: ''; position: absolute; inset-inline-start: 10px; top: 18px; bottom: 18px; border-inline-start: 2px dotted var(--border-strong); }
.wz-node { position: relative; min-width: 0; }
.wz-node__mark { position: absolute; inset-inline-start: -30px; top: 8px; width: 22px; height: 22px; display: grid; place-items: center; border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--text-muted); }
.wz-node__mark svg { width: 12px; height: 12px; }
.wz-node--port .wz-node__mark { inset-inline-start: -25px; top: 30px; width: 13px; height: 13px; border: 2px solid var(--surface); border-radius: 3px; background: var(--accent-solid); box-shadow: 0 0 0 1px var(--border-strong); transform: rotate(45deg); }
.wz-node__dir { display: block; margin-bottom: 4px; color: var(--text-muted); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; }
/* the panel is ~440px wide: the 12-column field grid becomes 6 (lg full, md and sm half, xs a third) */
.wz-panel .wiz-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-3); }
.wz-panel .wiz-grid > .wiz-f, .wz-panel .wiz-grid > .wiz-f--lg, .wz-panel .wiz-grid > .wiz-f--full { grid-column: 1 / -1; }
.wz-panel .wiz-grid > .wiz-f--md, .wz-panel .wiz-grid > .wiz-f--sm { grid-column: span 3; }
.wz-panel .wiz-grid > .wiz-f--xs { grid-column: span 2; }
.wz-node .wiz-grid > .wiz-f, .wz-section .wiz-grid > .wiz-f { grid-column: 1 / -1; }
.wz-callout { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--accent-border); border-radius: var(--radius); background: var(--accent-soft); }
.wz-callout > svg { flex: none; margin-top: 2px; color: var(--accent-ink); }
.wz-callout strong { font-weight: 600; }
.wz-callout p { margin: 2px 0 0; color: var(--text-muted); }
.wz-callout.tone-warn { border-color: var(--warning-border); background: var(--warning-soft); }
.wz-callout.tone-warn > svg { color: var(--warning); }
.wz-callout.tone-idle { border-color: var(--border); background: var(--surface-2); }
.wz-section { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.wz-section__title { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12.5px; font-weight: 600; }
.wz-section__title svg { color: var(--accent-ink); }
.wz-need { color: var(--warning); font-size: 10.5px; font-weight: 600; }
.wizard .field.is-needed > input, .wizard .field.is-needed > select, .wizard .field.is-needed .ac > input { border-color: var(--warning-border); background: var(--warning-soft); }

/* Carrier tiles */
.wz-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.wz-tile { display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 8px 4px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: 11.5px; cursor: pointer; }
.wz-tile:hover { border-color: var(--accent); }
.wz-tile[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.wz-tile:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.wz-tile__code { display: grid; place-items: center; width: 36px; height: 30px; border-radius: 8px; background: var(--surface-3); font-family: var(--mono); font-size: 10.5px; font-weight: 600; }
.wz-tile__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Summary */
.wz-summary { position: absolute; z-index: 2; top: 16px; inset-inline-end: 16px; width: 330px; max-height: calc(100% - 32px); overflow: auto; }
.wz-panel--wide ~ .wz-summary { display: none; }
.wz-sum__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.wz-sum__state { margin-inline-start: auto; color: var(--text-muted); font-size: 11px; }
.wz-sum__sec { display: grid; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.wz-sum__sec:last-child { border-bottom: 0; }
.wz-sum__k { display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; }
.wz-edit { color: var(--accent-ink); font-family: var(--font); font-size: 12px; letter-spacing: 0; text-transform: none; text-decoration: none; }
.wz-edit:hover { text-decoration: underline; }
.wz-sum__line { margin: 0; }
.wz-sum__muted { margin: 0; color: var(--text-muted); font-size: 12px; }
.wz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wz-chip { display: inline-flex; align-items: center; padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-3); color: var(--text); font-size: 11px; font-weight: 600; line-height: 1.6; white-space: nowrap; text-decoration: none; }
.wz-chip.is-accent { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-ink); }
.wz-chip.is-warn { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning); }
a.wz-chip:hover { text-decoration: underline; }
.wz-carrier { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wz-carrier__text { display: grid; min-width: 0; }
.wz-carrier__text strong { font-weight: 600; }
.wz-carrier__text small { overflow: hidden; color: var(--text-muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.wz-badge { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-3); font-family: var(--mono); font-size: 10.5px; font-weight: 600; }
.wz-badge.is-empty { color: var(--text-muted); }
.wz-transit { display: grid; flex: none; margin-inline-start: auto; line-height: 1.25; text-align: end; }
.wz-transit small { color: var(--text-muted); font-size: 10.5px; }
.wz-transit strong { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.wz-leg { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.wz-leg__pt { display: grid; min-width: 0; }
.wz-leg__pt strong { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.wz-leg__pt small { color: var(--text-muted); font-family: var(--mono); font-size: 11px; }
.wz-leg__pt.is-end { text-align: end; }
.wz-leg__mid { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); }
.wz-leg__mid::before, .wz-leg__mid::after { content: ''; width: 18px; border-top: 1.5px solid var(--border-strong); }
.wz-leg.is-big .wz-leg__pt strong { font-size: 15px; }
.wz-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 12.5px; }
.wz-kv dt { color: var(--text-muted); }
.wz-kv dd { margin: 0; font-weight: 500; text-align: end; overflow-wrap: anywhere; }
.wz-cc { padding: 0 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-3); font-family: var(--mono); font-size: 10.5px; }
.wz-ph { color: var(--text-muted); font-weight: 400; }
.wz-mono { font-family: var(--mono); font-size: 12px; }
.wz-progress { width: 100%; height: 6px; overflow: hidden; border: 0; border-radius: 999px; background: var(--surface-3); -webkit-appearance: none; appearance: none; }
.wz-progress::-webkit-progress-bar { border-radius: 999px; background: var(--surface-3); }
.wz-progress::-webkit-progress-value { border-radius: 999px; background: var(--accent); }
.wz-progress::-moz-progress-bar { border-radius: 999px; background: var(--accent); }

/* Review */
.wz-review { display: flex; flex-direction: column; gap: 12px; }
.wz-review__hero { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.wz-review__hero .wz-carrier { flex: 1 1 360px; }
.wz-review__hero .wz-transit strong { font-size: 24px; }
.wz-review__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wz-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.wz-card h4 { display: flex; justify-content: space-between; align-items: center; margin: 0; color: var(--text-muted); font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; }
.wz-ready { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); }
.wz-ready > svg { flex: none; margin-top: 2px; }
.wz-ready strong { font-weight: 600; }
.wz-ready p { margin: 2px 0 0; color: var(--text-muted); }
.wz-ready .wz-chips { margin-top: 8px; }
.wz-ready.is-ok { border-color: var(--success-border); background: var(--success-soft); }
.wz-ready.is-ok > svg { color: var(--success); }
.wz-ready.is-blocked { border-color: var(--danger-border); background: var(--danger-soft); }
.wz-ready.is-blocked > svg { color: var(--danger); }
.wz-ready.is-copy { border-color: var(--warning-border); background: var(--warning-soft); }
.wz-ready.is-copy > svg { color: var(--warning); }
.wz-ready.is-info { border-color: var(--accent-border); background: var(--accent-soft); }
/* the multi-select of places (transshipment ports / airports, 2026-11-10): chips in order, then "Add a port…" */
.wz-picks { display: flex; flex-direction: column; gap: 6px; }
.wz-picks__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wz-pick { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 4px 2px 10px; border: 1px solid var(--accent-border); border-radius: 999px; background: var(--accent-soft); color: var(--text); font-size: 12px; }
.wz-pick__code { color: var(--text-muted); font-family: var(--mono); font-size: 11px; }
.wz-pick__x { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); font: inherit; cursor: pointer; }
.wz-pick__x:hover { background: var(--surface); color: var(--text); }
.wz-picks__add input { width: 100%; }
/* "Fill with AI" on a party block (2026-11-10): the button on the block's title line, at the right; the paste dialog */
.wiz-party { position: relative; }
.wiz-group.wiz-party > .wz-fill { position: absolute; top: 10px; right: 12px; }
.wiz-opt.wiz-party .wiz-opt__body > .wz-fill { position: absolute; top: 6px; right: 12px; }
.btn.wz-fill__btn { min-height: 28px; padding: 4px 10px; gap: 6px; border: 1px solid var(--accent-border); background: var(--accent-soft); color: var(--accent-ink); }
.btn.wz-fill__btn:hover { background: var(--surface); border-color: var(--accent); }
dialog.modal.wz-ai { width: min(560px, calc(100vw - 32px)); }
.wz-ai__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; }
.wz-ai__body h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
.wz-ai__body textarea { width: 100%; min-height: 150px; resize: vertical; font: inherit; }
.wz-ai__error { margin: 0; color: var(--danger); font-size: 12px; }
.wz-ai__actions { display: flex; justify-content: flex-end; gap: 8px; }
.wz-ready.is-info > svg { color: var(--accent); }
.wz-ready .wiz-findings__group h4 { margin: 10px 0 4px; font-size: 12px; }
.wz-ready ul { margin: 0; padding-inline-start: 18px; }

/* the summary steps aside when the map would be squeezed out; phones and narrow windows stack everything */
@container wz (max-width: 1000px) { .wz-summary { display: none; } }
@media (max-width: 900px) {
  .wz { display: flex; flex-direction: column; height: auto; min-height: 0; overflow: visible; }
  .wz-stage { position: relative; inset: auto; flex: none; height: 220px; }
  .wz-panel, .wz-panel--wide { position: relative; top: auto; bottom: auto; inset-inline-start: auto; width: auto; max-width: none; margin: 12px; }
  .wz-body { overflow: visible; }
  .wz-summary { position: relative; top: auto; inset-inline-end: auto; width: auto; max-height: none; margin: 0 12px 16px; }
  .wz-review__grid { grid-template-columns: minmax(0, 1fr); }
  .wz-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .wz-step__label { display: none; }
  .wz-step.is-current .wz-step__label { display: inline; }
  .wz-head, .wz-body, .wz-foot { padding-inline: 12px; }
  .wz-seg { grid-auto-flow: row; }
}
/* ===== end wizard (UI-C) ============================================================================================ */

/* ===== journey + notifications (TR-B) =============================================================================== */
/* The shipment journey (src/portal/views/detail-journey.ts + /static/map.js), the dashboard lane strip
   (src/tracking/read-model.ts laneStrip), the notification bell panel / page / preferences and Admin → Notifications.
   No new theme tokens: the journey's own custom properties below only alias theme tokens, so light and dark follow the
   three palette blocks. The travelled route and the "next" milestone use --accent; pins, dates and chips stay neutral;
   the vessel / aircraft glyph is --brand-navy in light and --text in dark (falls back to --text). No hard-coded hues. */

.journey {
  --j-route: var(--accent);
  --j-casing: var(--surface);
  --j-remaining: var(--text-subtle);
  --j-pin: var(--text);
  --j-pin-future: var(--text-subtle);
  --j-next: var(--accent);
  --j-glyph: var(--brand-navy, var(--text));
  --j-sea: var(--ocean);
  --j-land: var(--land);
  --j-coast: var(--land-border);
  --j-grid: var(--border);
  margin: 0 0 var(--sp-8);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .journey { --j-glyph: var(--text); }
}
:root[data-theme='dark'] .journey { --j-glyph: var(--text); }
/* map, rail, timeline one under the other; from 900px of content width the map and the timeline share the left
   two thirds and the rail runs beside both */
.journey__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'map' 'rail' 'timeline'; gap: var(--sp-4); align-items: start; }
.journey__map { grid-area: map; }
.journey__rail { grid-area: rail; }
.journey__grid > .timeline { grid-area: timeline; }
@container content (min-width: 900px) {
  .journey__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: 'map rail' 'timeline rail'; gap: var(--sp-5); }
}

/* ---- the map box ---- */
.journey__map {
  position: relative;
  height: 400px;
  border: 1px solid var(--land-border);
  border-radius: 12px;
  background: var(--j-sea);
  overflow: hidden;
  isolation: isolate;
}
@container content (max-width: 899px) { .journey__map { height: 360px; } }
@container content (max-width: 560px) { .journey__map { height: 300px; border-radius: var(--radius); } }
.journey__canvas { position: absolute; inset: 0; z-index: 1; }
.journey__fallback { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; }
.journey__map--ready .journey__fallback { display: none; }
.journey__blank { max-width: 320px; padding: var(--sp-6); text-align: center; color: var(--text-muted); font-size: 12px; }
.journey__blank .icon { color: var(--text-subtle); margin-bottom: var(--sp-2); }
.journey__blank p { margin: 0; }
.journey__note {
  position: absolute;
  z-index: 2;
  top: var(--sp-3);
  inset-inline-start: var(--sp-3);
  max-width: calc(100% - 2 * var(--sp-3) - 48px);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.35;
  pointer-events: none;
}
.journey__note .icon { color: var(--text-subtle); }

/* ---- the server-rendered route sketch (before Leaflet, and without it) ---- */
.sketch { display: block; width: 100%; height: 100%; overflow: visible; }
.sketch__bg { fill: var(--j-sea); }
.sketch__grid { fill: none; stroke: var(--j-grid); stroke-width: 1; opacity: 0.7; }
.sketch__remaining { fill: none; stroke: var(--j-remaining); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.1 7.5; opacity: 0.9; }
.sketch__casing { fill: none; stroke: var(--j-casing); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.sketch__travelled { fill: none; stroke: var(--j-route); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.sketch__pin { fill: var(--surface); stroke: var(--j-pin-future); stroke-width: 2.4; }
.sketch__pin--done { fill: var(--j-pin); stroke: var(--surface); }
.sketch__pin--next { fill: var(--surface); stroke: var(--j-next); stroke-width: 3.2; }
.sketch__pin--end { fill: var(--j-pin); stroke: var(--surface); stroke-width: 2.4; }
.sketch__pin--end.sketch__pin--next { fill: var(--j-next); }
.sketch__label { font: 600 12px/1 var(--mono); fill: var(--text); paint-order: stroke; stroke: var(--j-sea); stroke-width: 4px; stroke-linejoin: round; letter-spacing: 0.02em; }
.sketch__vessel-halo { fill: none; stroke: var(--j-remaining); stroke-width: 1.4; stroke-dasharray: 3 3; }
.sketch__vessel--live .sketch__vessel-halo { fill: color-mix(in srgb, var(--j-route) 24%, transparent); stroke: none; }
.sketch__vessel-disc { fill: var(--surface); stroke: var(--j-pin-future); stroke-width: 1.5; }
.sketch__vessel--live .sketch__vessel-disc { stroke: var(--j-route); stroke-width: 2.2; }
.sketch__vessel-glyph { fill: var(--j-glyph); }
.sketch__vessel-deck { fill: var(--surface); }

/* ---- Leaflet, themed (scoped to the journey so nothing else changes) ---- */
.journey .leaflet-container { background: var(--j-sea); font: 11.5px/1.45 var(--font); color: var(--text); outline-offset: -2px; }
.journey .leaflet-container a { color: var(--text-muted); }
.journey .leaflet-container .leaflet-bar { border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; background: var(--surface); }
.journey .leaflet-container .leaflet-bar a {
  width: 34px;
  height: 34px;
  background: var(--surface);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  font: 500 18px/32px var(--font);
}
.journey .leaflet-container .leaflet-bar a:last-child { border-bottom: none; }
.journey .leaflet-container .leaflet-bar a:hover, .journey .leaflet-container .leaflet-bar a:focus-visible { background: var(--surface-2); color: var(--text); }
.journey .leaflet-container .leaflet-bar a.leaflet-disabled { background: var(--surface); color: var(--text-subtle); opacity: 0.6; }
.journey .map-fit {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.journey .map-fit:hover { background: var(--surface-2); }
.journey .map-fit:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.journey .leaflet-container .leaflet-control-attribution {
  margin: 0;
  padding: 2px 8px;
  border-start-start-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  color: var(--text-subtle);
  font-size: 11px;
  line-height: 1.5;
}
.journey .leaflet-container .leaflet-control-attribution a { color: var(--text-muted); text-decoration: none; }
.journey .leaflet-container .leaflet-control-attribution a:hover { text-decoration: underline; }
.journey .map-pop-wrap .leaflet-popup-content-wrapper { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 0; }
.journey .map-pop-wrap .leaflet-popup-content { margin: 12px 14px; min-width: 190px; font-size: 12px; line-height: 1.45; }
.journey .map-pop-wrap .leaflet-popup-tip { background: var(--surface); box-shadow: none; border: 1px solid var(--border); }
.map-pop__eyebrow { color: var(--text-subtle); font-size: 11px; font-weight: 500; margin-bottom: 2px; }
.map-pop__title { font-size: 12.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.map-pop__code { font: 500 12px/1.4 var(--mono); color: var(--text-muted); margin-top: 1px; }
.map-pop__rows { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; margin: 8px 0 0; }
.map-pop__rows dt { color: var(--text-subtle); font-size: 11px; }
.map-pop__rows dd { margin: 0; font-size: 11.5px; }
.map-pop__note { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 11px; }
.journey .leaflet-tooltip.pin-label {
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  font: 600 11.5px/1.3 var(--mono);
  letter-spacing: 0.02em;
}
.journey .leaflet-tooltip.pin-label::before { display: none; }

/* ---- port pins (L.divIcon) ---- */
.pin { background: none; border: none; }
.pin__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pin__ring { fill: var(--surface); stroke: var(--j-pin-future); stroke-width: 2.4; }
.pin__core { fill: transparent; }
.pin--done .pin__ring { fill: var(--j-pin); stroke: var(--surface); stroke-width: 2.2; }
.pin--done .pin__core { fill: var(--surface); }
.pin--next .pin__ring { stroke: var(--j-next); stroke-width: 3; }
.pin--next .pin__core { fill: var(--j-next); }
.pin--origin .pin__svg, .pin--next .pin__svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22)); }
.pin__drop { fill: var(--j-pin); stroke: var(--surface); stroke-width: 2; }
.pin__hole { fill: var(--surface); }
.pin--destination.pin--next .pin__drop { fill: var(--j-next); }
.pin--destination .pin__svg { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28)); }
.pin.leaflet-marker-icon:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 50%; }

/* ---- the vessel / aircraft (L.divIcon; heading = --bearing set through the CSSOM) ---- */
.vessel { background: none; border: none; }
.vessel__halo { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed var(--j-remaining); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.vessel__disc {
  position: absolute;
  inset: 8px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 1.5px var(--j-pin-future), 0 3px 10px rgba(0, 0, 0, 0.22);
}
.vessel__glyph { width: 21px; height: 21px; transform: rotate(var(--bearing, 0deg)); overflow: visible; }
.vessel__hull { fill: var(--j-glyph); }
.vessel__deck { fill: var(--surface); }
.vessel--live .vessel__halo { border: none; background: color-mix(in srgb, var(--j-route) 32%, transparent); animation: vessel-pulse 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
.vessel--live .vessel__disc { box-shadow: 0 0 0 2.5px var(--j-route), 0 3px 10px rgba(0, 0, 0, 0.25); }
.vessel__tag {
  position: absolute;
  top: calc(100% - 3px);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
  font: 600 10.5px/1.5 var(--font);
  white-space: nowrap;
  pointer-events: none;
}
.vessel.leaflet-marker-icon:focus-visible { outline: none; }
.vessel.leaflet-marker-icon:focus-visible .vessel__disc { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
@keyframes vessel-pulse {
  0% { transform: scale(0.62); opacity: 0.95; }
  70% { opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vessel--live .vessel__halo { animation: none; transform: scale(1.05); opacity: 0.55; }
  .track-chip--live .track-chip__dot::after { animation: none; opacity: 0; }
}

/* ---- the rail ---- */
.journey__rail { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
@container content (min-width: 560px) and (max-width: 899px) {
  .journey__rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey__rail > .jcard--status, .journey__rail > .jrefresh { grid-column: 1 / -1; }
}
.jcard { padding: var(--sp-4) 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); min-width: 0; }
.jcard__row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.jcard__title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--text); }
.jcard__title .icon { color: var(--text-subtle); }
.jcard__hint { margin-inline-start: auto; color: var(--text-subtle); font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; }
.jcard__eyebrow { display: block; color: var(--text-subtle); font-size: 11px; font-weight: 500; margin-bottom: 2px; }
.jcard__headline { margin: 12px 0 2px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--text); }
.jcard__note { margin: 0 0 6px; font-size: 12px; line-height: 1.45; }
.jcard__lane { display: flex; align-items: center; gap: 4px; margin: 0 0 12px; color: var(--text-muted); font-size: 12px; min-width: 0; }
.jcard__lane > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.jcard__arrow { color: var(--text-subtle); }
.jcard__when { margin: 10px 0 0; font-size: 12px; color: var(--text); }
.jcard__name { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.jcard__empty { margin: 0; font-size: 12px; }
.jcard__link { color: var(--text); font-weight: 500; }
.jnext { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.jnext__what { margin: 0; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.jnext__at { margin: 2px 0 0; font-size: 11.5px; }
.jprogress { display: block; width: 100%; height: 6px; border: none; border-radius: 999px; background: var(--chart-track); overflow: hidden; appearance: none; -webkit-appearance: none; color: var(--j-route); }
.jprogress::-webkit-progress-bar { background: var(--chart-track); border-radius: 999px; }
.jprogress::-webkit-progress-value { background: var(--j-route); border-radius: 999px; }
.jprogress::-moz-progress-bar { background: var(--j-route); border-radius: 999px; }
.jkv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 12px; }
.jkv dt { color: var(--text-subtle); }
.jkv dd { margin: 0; overflow-wrap: anywhere; }
.jkv--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.jkv--pairs > div { min-width: 0; }
.jkv--pairs dt { font-size: 11px; }
.jkv--pairs dd { font-size: 12px; }
.jdates { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.jdates__row { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 12px; }
.jdates__row dt { color: var(--text-subtle); font-size: 11.5px; }
.jdates__row dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.jdates__planned { flex-basis: 100%; color: var(--text-subtle); font-size: 11px; }
.jtag { display: inline-flex; align-items: center; padding: 0 6px; border-radius: 999px; border: 1px solid var(--grey-border); background: var(--grey-soft); color: var(--text-muted); font-size: 11px; font-weight: 500; line-height: 17px; white-space: nowrap; }
.jtag--actual { border-color: var(--success-border); background: var(--success-soft); color: var(--success); }
.doc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--ease), border-color var(--ease);
}
.doc-chip:hover { background: var(--surface-3); border-color: var(--border-strong); }
.doc-chip__n { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--surface); color: var(--text-muted); font-size: 11px; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.jrefresh { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 2px 0 0; }
.jrefresh__help { font-size: 11px; }
.jrefresh.is-busy .icon-refresh { animation: journey-spin 900ms linear infinite; }
@keyframes journey-spin { to { transform: rotate(360deg); } }

/* status chip: live / estimated / no data */
.track-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 2px 11px 2px 9px;
  border: 1px solid var(--grey-border);
  border-radius: 999px;
  background: var(--grey-soft);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.track-chip__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; border: 1.5px dashed currentColor; flex: none; box-sizing: border-box; }
.track-chip--live { border-color: var(--success-border); background: var(--success-soft); color: var(--success); }
.track-chip--live .track-chip__dot { border: none; background: currentColor; }
.track-chip--live .track-chip__dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: currentColor; opacity: 0.35; animation: vessel-pulse 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
.track-chip--no_data { color: var(--text-subtle); background: var(--surface-2); border-color: var(--border); }
.track-chip--no_data .track-chip__dot { border-style: solid; opacity: 0.6; }
.track-age { margin-inline-start: auto; color: var(--text-subtle); font-size: 11px; font-variant-numeric: tabular-nums; }

/* ---- the milestone timeline ---- */
.timeline {
  list-style: none;
  margin: 0;
  padding: var(--sp-1) 0 var(--sp-2);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.timeline__step { position: relative; display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: none; padding: 24px var(--sp-2) 0 0; scroll-snap-align: start; }
.timeline__step::before { content: ''; position: absolute; top: 6px; inset-inline-start: 20px; inset-inline-end: calc(-1 * var(--sp-3) + 6px); border-top: 2px dashed var(--border-strong); }
.timeline__step:last-child::before { display: none; }
.timeline__step--done::before { border-top-style: solid; border-color: var(--j-route); }
.timeline__dot { position: absolute; top: 0; inset-inline-start: 0; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--j-pin-future); background: var(--surface); box-sizing: border-box; }
.timeline__step--done .timeline__dot { border-color: var(--j-pin); background: var(--j-pin); box-shadow: inset 0 0 0 2.5px var(--surface); }
.timeline__step--current .timeline__dot { border: 3px solid var(--j-next); box-shadow: 0 0 0 4px color-mix(in srgb, var(--j-next) 18%, transparent); }
.timeline__kind { color: var(--text-subtle); font-size: 11px; font-weight: 500; }
.timeline__name { font-size: 12px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline__step--future .timeline__name { color: var(--text-muted); font-weight: 500; }
.timeline__code { font: 500 12px/1.4 var(--mono); color: var(--text-subtle); }
.timeline__time { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; margin-top: 4px; font-size: 11.5px; color: var(--text); }
@container content (max-width: 560px) {
  .timeline { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; gap: 0; }
  .timeline__step { padding: 0 0 var(--sp-4) 28px; }
  .timeline__step::before { top: 18px; bottom: 2px; inset-inline-start: 6px; inset-inline-end: auto; border-top: none; border-inline-start: 2px dashed var(--border-strong); }
  .timeline__step--done::before { border-inline-start-style: solid; border-color: var(--j-route); }
}

.journey--empty .jempty { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4) var(--sp-5); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--text-muted); }
.journey--empty .jempty p { margin: 2px 0 0; font-size: 12px; }
.journey--empty .jempty strong { color: var(--text); }

/* ---- the dashboard lane strip (inline SVG from laneStrip) ---- */
.lane-strip { display: block; width: 100%; max-width: 320px; height: auto; overflow: visible; }
.lane-strip__track { stroke: var(--chart-track); stroke-width: 3; stroke-linecap: round; }
.lane-strip__done { stroke: var(--chart-1); stroke-width: 3; stroke-linecap: round; }
.lane-strip__tick { fill: var(--surface); stroke: var(--text-subtle); stroke-width: 1.5; }
.lane-strip__tick--done { fill: var(--chart-1); stroke: var(--chart-1); }
.lane-strip__tick--arrival, .lane-strip__tick--delivery { stroke-width: 2; }
.lane-strip__glyph { fill: var(--chart-1); stroke: var(--surface); stroke-width: 1.2; paint-order: stroke; }
.lane-strip__vessel--estimated .lane-strip__glyph { fill: var(--text-muted); }
.lane-strip__end { font: 500 9px/1 var(--mono); fill: var(--text-subtle); letter-spacing: 0.02em; }
.lane-strip--unknown .lane-strip__done { display: none; }

/* ---- notifications: list rows (bell panel and page) ---- */
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 2px var(--sp-3); align-items: start; max-width: none; padding: var(--sp-3) var(--sp-2); border-radius: var(--radius-md); }
.notif + .notif { margin-top: 2px; }
.notif:hover { background: var(--surface-2); }
.notif__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
.notif--unread .notif__icon { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.notif__main { min-width: 0; }
.notif__form { margin: 0; }
.notif__open { display: block; width: 100%; padding: 0; border: none; background: none; font: inherit; text-align: start; color: var(--text); cursor: pointer; }
.notif__open:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }
.notif__title { display: block; font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--text-muted); overflow-wrap: anywhere; }
.notif--unread .notif__title { font-weight: 600; color: var(--text); }
.notif__body { display: -webkit-box; margin-top: 1px; overflow: hidden; color: var(--text-muted); font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.notif__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; color: var(--text-subtle); font-size: 11px; }
.notif__aside { display: flex; align-items: center; gap: 4px; padding-top: 2px; }
.notif__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text); flex: none; }
.notif__read { width: 28px; height: 28px; color: var(--text-subtle); }
.notif__read:hover { color: var(--text); }
.notif-list--page .notif { padding: var(--sp-4) var(--sp-3); }
.notif-list--page .notif + .notif { margin-top: 0; border-top: 1px solid var(--border); border-radius: 0; }
.notif-list--page .notif:hover { border-radius: var(--radius-md); }
.notif-list--page .notif__title { font-size: 13px; }
.notif-list--page .notif__body { -webkit-line-clamp: 3; line-clamp: 3; font-size: 12px; }

.notif-panel { display: flex; flex-direction: column; min-width: 0; }
.notif-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-1); }
.notif-panel__head strong { font-size: 12.5px; color: var(--text); }
.notif-panel__head form { margin: 0; }
.notif-panel__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-1); padding: var(--sp-2) var(--sp-2) var(--sp-1); border-top: 1px solid var(--border); font-size: 12px; }
.notif-panel__foot a { color: var(--text-muted); text-decoration: none; font-weight: 500; }
.notif-panel__foot a:hover { color: var(--text); }
.notif-panel .bell__empty .icon { display: block; margin: 0 auto var(--sp-2); color: var(--text-subtle); }
.notif-panel .bell__empty strong { display: block; color: var(--text); }
.notif-panel .bell__empty p { margin: 4px 0 0; }

.notif-page { max-width: 820px; }
.notif-page__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin: 0 0 var(--sp-4); }
.notif-page__bar form { margin: 0; }
.notif-page__bar .seg { gap: 6px; }
.seg__n { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--surface-3); color: var(--text-muted); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.notif-page__card { padding: var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.notif-page__card + .pager { margin-top: var(--sp-4); }

/* ---- Settings → Notifications ---- */
.prefs-table td.prefs-check, .prefs-table th.prefs-check { text-align: center; width: 96px; }
.prefs-table td.prefs-check input { width: 18px; height: 18px; accent-color: var(--text); cursor: pointer; }
.prefs-table .prefs-kind strong { display: block; color: var(--text); font-weight: 600; }
.prefs-table .prefs-kind .help { margin: 2px 0 0; }
.prefs-table .prefs-default { color: var(--text-subtle); font-size: 11.5px; }
/* ===== end journey + notifications (TR-B) =========================================================================== */

/* ===== copilot (CP-B) =============================================================================================== */
/* The conversation (src/copilot/views/*.ts, behaviour in /static/copilot.js), ChatGPT/Claude-like: a centred column,
   user messages as soft right-aligned bubbles, assistant messages as full-width prose beside the Freightools mark, notes
   as small muted lines, review cards as clean bordered cards, and the composer as a rounded floating box in a sticky
   dock at the bottom. `.copilot--page` adds the conversation list on the left; `.copilot--drawer` is compact. The
   island adds `.is-live` (then the no-JS fallbacks `.copilot-nojs` hide). Tokens only; light and dark follow them. */
/* Copilot text (Adam, 2026-11-09): 15px for everyone — "it needs to be a bit bigger" (it was 13px, 12px over the map),
   then, after trying Standard / Large / Larger, "leave only the smallest one … this is the perfect size": the size choice
   is gone. --copilot-font is the body size of the answers, your messages and the message box; every other copilot size
   is a step derived from it (the comment gives its value; nothing below the 11px floor), and only copilot rules read it
   (tests/ui/theme.test.ts). */
:root {
  --copilot-font: 15px;
  --copilot-font-lg: calc(var(--copilot-font) * 17 / 15);   /* 17px: headings in an answer, the drop overlay */
  --copilot-font-sm: calc(var(--copilot-font) * 13.5 / 15); /* 13.5px: the review card, tables, starters, the title */
  --copilot-font-xs: calc(var(--copilot-font) * 13 / 15);   /* 13px: notes, the status line, chips, meta, labels */
  --copilot-font-2xs: calc(var(--copilot-font) * 12 / 15);  /* 12px: hints, counts, captions, badges, JSON */
  --copilot-font-3xs: calc(var(--copilot-font) * 11 / 15);  /* 11px: the smallest copilot label */
}
.copilot { --copilot-bg: var(--bg); --copilot-col: 760px; position: relative; display: flex; flex-direction: column; min-width: 0; font-size: var(--copilot-font); line-height: 1.6; }
.copilot--drawer { --copilot-bg: var(--surface); --copilot-col: none; min-height: 100%; }
.copilot [hidden], .copilot-drawer [hidden] { display: none !important; }
.copilot.is-live .copilot-nojs { display: none; }
.copilot > *, .copilot__dock > * { width: 100%; max-width: var(--copilot-col); margin-inline: auto; }

/* the avatar pair (the Freightools mark): one image per theme */
.copilot-avatar { display: block; width: 100%; height: 100%; object-fit: contain; }
.copilot-avatar--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .copilot-avatar--light { display: none; }
  :root:not([data-theme='light']) .copilot-avatar--dark { display: block; }
}
:root[data-theme='dark'] .copilot-avatar--light { display: none; }
:root[data-theme='dark'] .copilot-avatar--dark { display: block; }

/* ---- head ---- */
.copilot__head { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.copilot__head-main { flex: 1 1 auto; min-width: 0; }
.copilot__title { margin: 0; font-family: var(--font); font-size: var(--copilot-font-sm); font-weight: 600; letter-spacing: -0.005em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copilot__context { margin: 2px 0 0; font-size: var(--copilot-font-2xs); color: var(--text-muted); }
.copilot__context a { color: inherit; }
.copilot__new { margin: -6px -6px 0 0; }
.copilot__head-tools .copilot__new { margin: 0; }
.copilot__budget, .copilot__long { font-size: var(--copilot-font-xs); }
.copilot--page .copilot__head { padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }

/* ---- messages ---- */
.copilot__messages { list-style: none; margin: 0; padding: 0 0 var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-6); flex: 1 1 auto; }
.copilot__messages > li { max-width: none; min-width: 0; }
.copilot-msg { position: relative; min-width: 0; }
.copilot-msg--user { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.copilot-msg--user > .copilot-msg__body {
  max-width: min(85%, 600px);
  padding: 10px 16px;
  border-radius: 20px;
  background: var(--surface-2);
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
}
.copilot--drawer .copilot-msg--user > .copilot-msg__body { background: var(--surface-3); }
.copilot-msg--user.is-pending > .copilot-msg__body { opacity: 0.7; }
.copilot-msg--assistant { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; }
.copilot-msg__avatar { display: block; width: 28px; height: 28px; margin-top: 1px; border-radius: 8px; overflow: hidden; }
.copilot--drawer .copilot-msg--assistant { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
.copilot--drawer .copilot-msg__avatar { width: 24px; height: 24px; border-radius: 7px; }
.copilot-msg--assistant > .copilot-msg__body { min-width: 0; color: var(--text); }
.copilot-live { white-space: pre-wrap; overflow-wrap: anywhere; }
/* the soft caret while text streams in */
.copilot-msg.is-streaming .copilot-msg__body::after {
  content: '';
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-inline-start: 3px;
  border-radius: 50%;
  background: var(--text-muted);
  vertical-align: 0.05em;
  animation: copilot-pulse 1.1s ease-in-out infinite;
}
.copilot-msg--note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2); }
.copilot-note { margin: 0; max-width: 60ch; color: var(--text-subtle); font-size: var(--copilot-font-xs); line-height: 1.5; text-align: center; }
.copilot-msg--note .copilot-retry { min-height: 26px; }
.copilot-msg--proposal { padding-inline-start: 42px; }
.copilot--drawer .copilot-msg--proposal { padding-inline-start: 0; }

/* Markdown typography for assistant answers (src/ui/markdown.ts renderChatMarkdown) */
.copilot-md { font-size: var(--copilot-font); line-height: 1.6; overflow-wrap: anywhere; }
.copilot-md > :first-child { margin-top: 0; }
.copilot-md > :last-child { margin-bottom: 0; }
.copilot-md p, .copilot-md li { max-width: none; }
.copilot-md p { margin: 0 0 0.85em; }
.copilot-md h1, .copilot-md h2, .copilot-md h3, .copilot-md h4 { font-family: var(--font); color: var(--text); letter-spacing: -0.005em; margin: 1.2em 0 0.45em; }
.copilot-md h1, .copilot-md h2 { font-size: var(--copilot-font-lg); }
.copilot-md h3 { font-size: var(--copilot-font); }
.copilot-md h4 { font-size: var(--copilot-font-sm); }
.copilot-md ul, .copilot-md ol { margin: 0 0 0.85em; padding-inline-start: 1.4em; }
.copilot-md li { margin: 0.25em 0; }
.copilot-md li > ul, .copilot-md li > ol { margin: 0.25em 0 0; }
.copilot-md li::marker { color: var(--text-subtle); }
.copilot-md strong { font-weight: 600; }
.copilot-md a { color: var(--accent-ink); }
.copilot-md code { font-size: 0.86em; }
.copilot-md pre.json { margin: 0 0 0.85em; max-height: 360px; font-size: var(--copilot-font-2xs); }
.copilot-md pre code { padding: 0; border: none; background: none; font-size: inherit; }
.copilot-md blockquote { margin: 0 0 0.85em; padding: 2px 0 2px 14px; border-inline-start: 3px solid var(--border-strong); color: var(--text-muted); }
.copilot-md table { display: block; max-width: 100%; overflow-x: auto; width: max-content; margin: 0 0 0.85em; font-size: var(--copilot-font-sm); }
.copilot-md hr { border: none; border-top: 1px solid var(--border); margin: 1.2em 0; }

/* ---- empty conversation: welcome + starters ---- */
.copilot-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(24px, 8vh, 72px) 0 var(--sp-6); }
.copilot--drawer .copilot-empty { padding-top: var(--sp-8); }
.copilot-empty__mark { display: block; width: 44px; height: 44px; margin-bottom: var(--sp-4); border-radius: 12px; overflow: hidden; }
.copilot-empty__title { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-size: calc(var(--copilot-font) * 22 / 15); font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
.copilot--drawer .copilot-empty__title { font-size: calc(var(--copilot-font) * 19 / 15); }
.copilot-empty__lead { max-width: 52ch; margin: 0 auto var(--sp-6); font-size: var(--copilot-font-sm); color: var(--text-muted); }
.copilot-starters { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
@container content (min-width: 700px) { .copilot--page .copilot-starters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.copilot-starters > li { max-width: none; }
.copilot-starter-form { margin: 0; height: 100%; }
.copilot-starter {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  height: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
}
.copilot-starter:hover { background: var(--surface-2); border-color: var(--border-strong); }
.copilot-starter__title { font-size: var(--copilot-font-sm); font-weight: 550; line-height: 1.35; }
.copilot-starter__sub { font-size: var(--copilot-font-xs); color: var(--text-muted); line-height: 1.4; }

/* ---- dock: status line + composer, sticky at the bottom of the scroll area ---- */
.copilot__dock { position: sticky; bottom: 0; z-index: 4; padding: var(--sp-6) 0 var(--sp-4); background: linear-gradient(to bottom, transparent, var(--copilot-bg) var(--sp-5)); }
.copilot__status { display: flex; align-items: center; gap: 8px; min-height: 22px; margin: 0 0 6px; font-size: var(--copilot-font-xs); color: var(--text-muted); }
.copilot__status:empty { visibility: hidden; }
.copilot__status:not(:empty)::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: copilot-pulse 1.1s ease-in-out infinite; }
.copilot__stop, .copilot__upload { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); font-size: var(--copilot-font-xs); }
.copilot__upload input[type='file'] { max-width: 100%; font-size: var(--copilot-font-xs); }
.copilot-composer { margin: 0; }
.copilot-composer__box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 10px 8px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.copilot-composer__box:focus-within { border-color: var(--text-subtle); box-shadow: var(--shadow-md), 0 0 0 3px var(--focus-ring); }
.copilot-composer textarea[data-copilot-input], .copilot-composer.is-disabled textarea {
  display: block;
  width: 100%;
  min-height: 26px;
  max-height: 40vh;
  margin: 0;
  padding: 6px 0 2px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--copilot-font);
  line-height: 1.5;
  resize: none;
  overflow-y: auto;
  field-sizing: content;
}
.copilot-composer textarea[data-copilot-input]:focus-visible { outline: none; box-shadow: none; }
.copilot-composer textarea[data-copilot-input]:disabled { cursor: not-allowed; }
.copilot:not(.is-live) .copilot-composer textarea[data-copilot-input], .copilot-composer.is-disabled textarea { min-height: 3.2em; }
.copilot-composer__bar { display: flex; align-items: center; gap: 6px; min-height: 36px; margin-inline-start: -6px; }
.copilot-composer__spacer { flex: 1 1 auto; }
.copilot-composer__hint { font-size: var(--copilot-font-2xs); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.copilot--drawer .copilot-composer__hint { display: none; }
.copilot-composer__send, .copilot-composer__stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--accent-solid);
  color: var(--on-solid);
  cursor: pointer;
  transition: background var(--ease), opacity var(--ease);
}
.copilot-composer__send:hover { background: var(--accent-solid-hover); }
.copilot-composer__send:disabled { background: var(--surface-3); color: var(--text-subtle); cursor: default; }
.copilot-composer__stop { background: var(--text); color: var(--bg); }
.copilot-composer__stop-square { display: block; width: 11px; height: 11px; border-radius: 2px; background: currentColor; }
.copilot-composer__foot { margin: 8px auto 0; max-width: none; text-align: center; font-size: var(--copilot-font-2xs); color: var(--text-subtle); }
.copilot--drawer .copilot-composer__foot { display: none; }
.copilot__paste { margin: 2px 0 6px; font-size: var(--copilot-font-xs); }
.copilot__paste > summary { color: var(--text-muted); }
.copilot__paste textarea { width: 100%; margin-top: 6px; font: inherit; font-size: var(--copilot-font-xs); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 8px 10px; background: var(--surface); color: var(--text); }
.copilot__label { display: block; font-size: var(--copilot-font-xs); color: var(--text-muted); }

/* ---- chips: files and pasted texts (composer and user messages) ---- */
.copilot-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.copilot-composer__chips { padding: 2px 0 4px; }
.copilot-msg--user .copilot-chips { justify-content: flex-end; max-width: min(85%, 600px); }
.copilot-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 280px;
  min-height: 30px;
  padding: 3px 6px 3px 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--copilot-font-xs);
  line-height: 1.3;
  overflow: hidden;
}
.copilot-chip__icon { display: inline-flex; flex: none; color: var(--text-muted); }
.copilot-chip__name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copilot-chip__meta { flex: none; color: var(--text-subtle); font-size: var(--copilot-font-2xs); }
.copilot-chip__meta:empty { display: none; }
.copilot-chip__toggle { padding: 0; border: none; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.copilot-chip__remove { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; padding: 0; border: none; border-radius: 6px; background: transparent; color: var(--text-subtle); cursor: pointer; }
.copilot-chip__remove:hover { background: var(--surface-3); color: var(--text); }
.copilot-chip__progress { display: none; position: absolute; inset-inline: 0; bottom: 0; width: 100%; height: 3px; border: none; appearance: none; background: transparent; }
.copilot-chip__progress::-webkit-progress-bar { background: transparent; }
.copilot-chip__progress::-webkit-progress-value { background: var(--accent); }
.copilot-chip__progress::-moz-progress-bar { background: var(--accent); }
.copilot-chip.is-uploading .copilot-chip__progress { display: block; }
.copilot-chip.is-uploading { color: var(--text-muted); }
.copilot-chip.is-error { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger); }
.copilot-chip.is-error .copilot-chip__icon, .copilot-chip.is-error .copilot-chip__meta { color: var(--danger); }
.copilot-chip--pasted.is-open { flex-wrap: wrap; max-width: 100%; width: 100%; }
.copilot-chip__preview { flex-basis: 100%; max-height: 200px; margin: 6px 0 4px; padding: 8px 10px; overflow: auto; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); font-size: var(--copilot-font-2xs); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- drop overlay ---- */
.copilot__drop {
  position: absolute;
  inset: var(--sp-2);
  z-index: 80;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px dashed var(--accent);
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  color: var(--text);
  pointer-events: none;
  text-align: center;
}
.copilot__drop--page { position: fixed; inset: var(--sp-4); }
.copilot__drop.is-on { display: flex; animation: em-fade-in 120ms ease; }
.copilot__drop-title { margin: 0; font-size: var(--copilot-font-lg); font-weight: 600; }
.copilot__drop-sub { margin: 0; font-size: var(--copilot-font-xs); color: var(--text-muted); }

/* "working on it" dots */
.copilot-dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.copilot-dots > span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: copilot-pulse 1.1s ease-in-out infinite; }
.copilot-dots > span:nth-child(2) { animation-delay: 0.15s; }
.copilot-dots > span:nth-child(3) { animation-delay: 0.3s; }
.copilot-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: copilot-pulse 1.1s ease-in-out infinite; }
@keyframes copilot-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: none; } }

/* ---- full page: conversation list + thread (the topbar toggle and the drawer are redundant there) ---- */
body:has(.copilot--page) .copilot-toggle, body:has(.copilot--page) #copilot-drawer { display: none; }
.copilot-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
@container content (min-width: 860px) { .copilot-page { grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-8); } }
.copilot-page > .copilot { min-height: calc(100vh - var(--topbar-h) - 180px); min-height: calc(100dvh - var(--topbar-h) - 180px); }
.copilot-threads { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
@container content (min-width: 860px) { .copilot-threads { position: sticky; top: calc(var(--topbar-h) + var(--sp-6)); max-height: calc(100vh - var(--topbar-h) - 2 * var(--sp-6)); overflow-y: auto; } }
.copilot-threads__new { margin: 0; }
.copilot-threads__new .btn { justify-content: flex-start; }
.copilot-threads__label { margin: var(--sp-2) 0 0; padding: 0 var(--sp-2); font-size: 11px; font-weight: 500; color: var(--text-subtle); }
.copilot-threads__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.copilot-threads__item { max-width: none; }
.copilot-threads__item > a { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px var(--sp-2); border-radius: var(--radius-md); color: var(--nav-text); font-size: 12px; text-decoration: none; }
.copilot-threads__item > a:hover { background: var(--nav-hover); color: var(--text); }
.copilot-threads__item > a[aria-current='page'] { background: var(--surface-3); color: var(--text); font-weight: 550; }
.copilot-threads__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copilot-threads__status { flex: none; font-size: 11px; color: var(--text-subtle); }
.copilot-threads__live { display: inline-flex; flex: none; }
.copilot-threads__none { padding: 0 var(--sp-2); font-size: 12px; }
@container content (max-width: 859px) {
  .copilot-threads__label { display: none; }
  .copilot-threads__list { flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .copilot-threads__item > a { max-width: 220px; border: 1px solid var(--border); background: var(--surface); }
}

/* ---- review cards ---- */
.review-card { container-type: inline-size; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text); font-size: var(--copilot-font-sm); line-height: 1.55; }
.review-card.is-open { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.review-card.is-busy { opacity: 0.85; }
.review-card__head { display: flex; align-items: flex-start; gap: var(--sp-3); padding: 14px 16px 12px; }
.review-card.is-open .review-card__head { border-bottom: 1px solid var(--border); }
.review-card__icon { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); }
.review-card__heading { flex: 1 1 auto; min-width: 0; }
.review-card__title { margin: 0; font-size: var(--copilot-font); font-weight: 600; line-height: 1.35; }
.review-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 2px 0 0; max-width: none; font-size: var(--copilot-font-xs); color: var(--text-muted); }
.review-card__meta strong { color: var(--text); font-weight: 600; }
.review-card__sep { color: var(--text-subtle); }
.review-card__status { flex: none; margin-top: 4px; }
.review-card__body { padding: 0 16px; }
.review-card.is-open .review-card__body { padding-top: 12px; padding-bottom: 4px; }
.review-card:not(.is-open) .review-card__body { padding-bottom: 14px; }
.review-card__summary { margin: 0 0 10px; max-width: none; font-size: var(--copilot-font-sm); }
.review-card__note { margin: 0 0 10px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--surface-2); font-size: var(--copilot-font-sm); }
.review-card__stats { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; font-size: var(--copilot-font-2xs); }
.review-card__stats > li { max-width: none; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }
.review-card__stats > li.is-blocked { background: var(--blocked-soft); color: var(--blocked); }
.review-card__stats > li.is-wait { background: var(--warning-soft); color: var(--warning); }
.review-card__stats > li.review-card__stats-src { background: transparent; padding-inline: 2px; }
.review-card h4 { margin: 0; font-size: var(--copilot-font-2xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-muted); }
.review-card__section { border-top: 1px solid var(--border); }
.review-card__section > summary { display: flex; align-items: center; gap: 8px; min-height: 38px; list-style: none; cursor: pointer; }
.review-card__section > summary::-webkit-details-marker { display: none; }
.review-card__section > summary::after { content: ''; order: 9; margin-inline-start: auto; width: 6px; height: 6px; border-inline-end: 1.5px solid var(--text-subtle); border-bottom: 1.5px solid var(--text-subtle); transform: rotate(-45deg); transition: transform var(--ease); }
.review-card__section[open] > summary::after { transform: rotate(45deg); }
.review-card__count { font-size: var(--copilot-font-2xs); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.review-card__issues { font-size: var(--copilot-font-2xs); color: var(--blocked); font-weight: 500; }
.review-card__rows { margin: 0 0 8px; }
.review-card__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px 14px; padding: 7px 0; border-top: 1px solid var(--border); }
.review-card__rows > .review-card__row:first-child { border-top: none; }
@container (min-width: 500px) { .review-card__row { grid-template-columns: minmax(130px, 34%) minmax(0, 1fr); align-items: baseline; } }
.review-card__row > dt { font-size: var(--copilot-font-xs); color: var(--text-muted); overflow-wrap: anywhere; }
.review-card__row > dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; min-width: 0; }
.review-card__value { flex: 0 1 auto; min-width: 0; font-family: var(--mono); font-size: var(--copilot-font-xs); color: var(--text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.review-card__value.is-missing { font-family: var(--font); font-weight: 600; color: var(--blocked); }
.review-card__meta-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-inline-start: auto; }
.review-card__row--missing, .review-card__row--conflict { margin: 2px 0; padding: 8px 10px; border-top-color: transparent; border-radius: var(--radius-md); }
.review-card__row--missing { background: var(--blocked-soft); box-shadow: inset 3px 0 0 var(--blocked); }
.review-card__row--missing > dt { color: var(--blocked); font-weight: 550; }
.review-card__row--conflict { background: var(--warning-soft); box-shadow: inset 3px 0 0 var(--warning); }
.review-card__row--conflict > dt { color: var(--warning); font-weight: 550; }
.review-card__row--missing + .review-card__row, .review-card__row--conflict + .review-card__row { border-top-color: transparent; }
.review-card__conflict { flex-basis: 100%; margin-top: 2px; }
.review-card__conflict-title { margin: 0 0 2px; font-size: var(--copilot-font-2xs); color: var(--warning); font-weight: 500; }
.review-card__conflict ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.review-card__conflict li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; max-width: none; }
/* source chips and confidence badges */
.copilot-source { display: inline-flex; align-items: center; gap: 4px; max-width: 220px; padding: 0 8px; min-height: 20px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font-size: var(--copilot-font-2xs); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.copilot-source__icon { display: inline-flex; flex: none; }
.copilot-source__icon .icon { width: 12px; height: 12px; }
.copilot-source--inferred, .copilot-source--default { border-style: dashed; background: transparent; font-style: italic; }
.copilot-source--not_found { border-color: var(--blocked-border); color: var(--blocked); background: var(--blocked-soft); }
.copilot-confidence { display: inline-flex; align-items: center; gap: 4px; font-size: var(--copilot-font-2xs); font-weight: 500; line-height: 1.5; color: var(--text-subtle); }
.copilot-confidence::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.copilot-confidence--high { color: var(--success); }
.copilot-confidence--medium { color: var(--warning); }
.copilot-confidence--low { color: var(--danger); }
/* findings, checks, diff, documents */
.review-card__findings, .review-card__checks, .review-card__diff, .review-card__docs-section { margin: 4px 0 12px; }
.review-card__findings { padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--border); }
.review-card__findings--warn { background: var(--warning-soft); border-color: var(--warning-border); }
.review-card__findings--warn h4 { color: var(--warning); }
.review-card__findings--info { background: var(--surface-2); }
.review-card__findings ul, .review-card__errors { margin: 6px 0 0; padding-inline-start: 1.1em; font-size: var(--copilot-font-sm); }
.review-card__findings li, .review-card__errors li { max-width: none; margin: 2px 0; }
.review-card__checks > ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; }
.review-card__check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: baseline; max-width: none; padding: 7px 0; border-top: 1px solid var(--border); font-size: var(--copilot-font-sm); }
.review-card__check:first-child { border-top: none; }
.review-card__check > .badge { grid-row: span 2; justify-self: start; min-width: 74px; }
.review-card__check-id { font-weight: 550; }
.review-card__check-detail { grid-column: 2; color: var(--text-muted); overflow-wrap: anywhere; }
@container (min-width: 520px) {
  .review-card__check { grid-template-columns: 6.5em 13.3em minmax(0, 1fr); } /* 88px and 180px at Standard */
  .review-card__check > .badge { grid-row: auto; }
  .review-card__check-detail { grid-column: auto; }
}
.review-card__table { overflow-x: auto; margin-top: 6px; }
.review-card__table .tbl { margin: 0; font-size: var(--copilot-font-xs); }
.review-card__table td code { font-size: 0.85em; }
.review-card__docs { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.review-card__docs > li { display: flex; align-items: center; gap: 8px; max-width: none; font-size: var(--copilot-font-sm); }
.review-card__doc-icon { display: inline-flex; color: var(--text-muted); }
.review-card__doc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-card__warning, .review-card__callout { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 12px; max-width: none; padding: 10px 12px; border-radius: var(--radius-md); font-size: var(--copilot-font-sm); line-height: 1.5; }
.review-card__warning { background: var(--danger-soft); border: 1px solid var(--danger-border); color: var(--text); }
.review-card__warning .review-card__callout-icon { color: var(--danger); }
.review-card__warning--info { background: var(--info-soft); border-color: var(--info-border); }
.review-card__warning--info .review-card__callout-icon { color: var(--info); }
.review-card__callout-icon { display: inline-flex; flex: none; margin-top: 2px; }
.review-card__callout--warn { background: var(--warning-soft); border: 1px solid var(--warning-border); color: var(--text); }
.review-card__callout--warn .review-card__callout-icon { color: var(--warning); }
.review-card__callout--err { background: var(--danger-soft); border: 1px solid var(--danger-border); }
.review-card__callout--info { background: var(--info-soft); border: 1px solid var(--info-border); }
/* exact JSON */
.review-card__json { border-top: 1px solid var(--border); padding: 0 16px; }
.review-card__json > summary { display: flex; align-items: center; min-height: 40px; font-size: var(--copilot-font-xs); color: var(--text-muted); }
.review-card__json > summary:hover { color: var(--text); }
.review-card__json pre.json { max-height: 320px; font-size: var(--copilot-font-2xs); }
/* footer */
.review-card__foot { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 14px; border-top: 1px solid var(--border); background: var(--surface-2); }
.review-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.review-card__actions form { margin: 0; }
.review-card__actions .btn { min-height: 38px; padding-inline: 1.1rem; font-size: var(--copilot-font-xs); }
.review-card .btn.small, .review-card .badge { font-size: var(--copilot-font-2xs); }
.review-card__role { margin: 0; max-width: none; font-size: var(--copilot-font-xs); color: var(--blocked); }
.review-card__audit { margin: 0; max-width: none; font-size: var(--copilot-font-2xs); color: var(--text-subtle); }
/* result cards */
.review-card__result { margin: 0; max-width: none; font-size: var(--copilot-font-sm); }
.review-card__result > p { display: flex; align-items: flex-start; gap: 8px; margin: 0; max-width: none; }
.review-card__result--ok { color: var(--text); }
.review-card__result--ok .review-card__callout-icon { color: var(--success); }
.review-card__result--err { padding: 10px 12px; border-radius: var(--radius-md); background: var(--danger-soft); border: 1px solid var(--danger-border); }
.review-card__result--err .review-card__callout-icon { color: var(--danger); }
.review-card__result--muted { color: var(--text-muted); }
.review-card__result--busy { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
.review-card__code { color: var(--text-subtle); font-size: var(--copilot-font-2xs); }
.review-card__result > p.review-card__hint { margin-top: 8px; font-size: var(--copilot-font-xs); color: var(--text-muted); }
.review-card__facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 10px 0 0; }
.review-card__facts > div { min-width: 0; }
.review-card__facts dt { font-size: var(--copilot-font-2xs); color: var(--text-subtle); }
.review-card__facts dd { margin: 0; font-size: var(--copilot-font-sm); color: var(--text); }
.review-card__result > p.review-card__links { margin-top: 10px; }
/* the compact shipment card: key facts in a grid, what to check, the full mapping behind a button */
.review-card__facts--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 18px; margin: 0 0 12px; }
.review-card__facts--grid dd { overflow-wrap: anywhere; }
@container (max-width: 380px) { .review-card__facts--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; } }
.review-card__attention { margin: 0 0 12px; padding: 9px 12px; border: 1px solid var(--warning-border); border-radius: var(--radius-md); background: var(--warning-soft); font-size: var(--copilot-font-sm); }
.review-card__attention-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; max-width: none; font-weight: 600; }
.review-card__attention-title .review-card__callout-icon { margin-top: 0; color: var(--warning); }
.review-card__attention ul { list-style: none; margin: 0; padding: 0 0 0 24px; display: flex; flex-direction: column; gap: 2px; }
.review-card__attention li { max-width: none; overflow-wrap: anywhere; }
.review-card__attention-what { font-weight: 550; }
.review-card__attention li.is-blocked .review-card__attention-what { color: var(--blocked); }
.review-card__attention li.is-wait .review-card__attention-what { color: var(--warning); }
.review-card__attention-values { font-family: var(--mono); font-size: var(--copilot-font-xs); color: var(--text-muted); }
.review-card__more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 12px; max-width: none; }
.review-card__more .btn .icon { width: 15px; height: 15px; }
.review-card__more-meta { font-size: var(--copilot-font-xs); color: var(--text-muted); }
.review-card__more-note { margin: 6px 0 0; max-width: none; font-size: var(--copilot-font-xs); color: var(--text-muted); }
.review-card__attention .review-card__more-note { padding-inline-start: 24px; margin-top: 2px; }
/* the full mapping panel: the rows answer to the panel's width (not the card's), the JSON sits flush */
.review-panel .modal__body { container-type: inline-size; padding-top: 16px; }
.review-panel .review-card__stats { margin-bottom: 14px; }
.review-panel .review-card__section:first-of-type { border-top: none; }
.review-panel .review-card__json { margin-top: 8px; padding: 0; }
.review-panel .modal__foot .btn { min-height: 38px; padding-inline: 1.1rem; font-size: var(--copilot-font-xs); }

/* ---- delivery-order card on the shipment Overview tab ---- */
.do-card { margin-top: var(--sp-8); }
.do-card__lead { font-size: 12px; }
.do-card__facts { margin-bottom: var(--sp-4); }
.do-card__checks { margin-bottom: var(--sp-3); }
.do-card__ask { margin: 0; }
.do-card--empty .actions { margin-bottom: 0; }

/* ---- the drawer variant ---- */
.copilot-drawer .drawer__body { display: flex; flex-direction: column; padding-bottom: 0; }
/* The mount IS the drawer's .drawer__body: it keeps the primitive's flex: 1 1 auto (min-height 0, overflow auto) so a
   conversation longer than the window scrolls inside the drawer with the composer stuck to its bottom (2026-11-09: a
   flex: 1 0 auto here grew the body past the window, so the end of a conversation and its review card were unreachable). */
.copilot-drawer [data-copilot-mount] { display: flex; flex-direction: column; }
.copilot-drawer [data-copilot-mount] > .copilot { flex: 1 0 auto; }
.copilot-load-error { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

/* ---- admin AI views (src/admin/settings-ai.ts) ---- */
.ai-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-4); font-size: 12px; color: var(--text-muted); }
.ai-group { margin: 0; padding: var(--sp-4) 0 0; border: none; border-top: 1px solid var(--border); min-width: 0; }
.ai-group + .ai-group { margin-top: var(--sp-4); }
.ai-group > legend { float: left; width: 100%; padding: 0; margin-bottom: var(--sp-3); font-size: 12px; font-weight: 600; color: var(--text); }
.ai-group > legend + * { clear: both; }
.ai-test { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.ai-test .help { margin: 0; }
.ai-meter { display: block; width: 100%; max-width: 420px; height: 8px; margin: var(--sp-2) 0 var(--sp-3); border: none; border-radius: 999px; overflow: hidden; appearance: none; background: var(--chart-track); }
.ai-meter::-webkit-progress-bar { background: var(--chart-track); border-radius: 999px; }
.ai-meter::-webkit-progress-value { background: var(--success); border-radius: 999px; }
.ai-meter::-moz-progress-bar { background: var(--success); border-radius: 999px; }
.ai-meter.is-wait::-webkit-progress-value { background: var(--warning); }
.ai-meter.is-wait::-moz-progress-bar { background: var(--warning); }
.ai-meter.is-err::-webkit-progress-value { background: var(--danger); }
.ai-meter.is-err::-moz-progress-bar { background: var(--danger); }

/* ---- responsive + reduced motion ---- */
@media (max-width: 640px) {
  .copilot-msg--proposal { padding-inline-start: 0; }
  .copilot-msg--assistant { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
  .copilot-msg__avatar { width: 24px; height: 24px; }
  .copilot-composer__hint { display: none; }
  .copilot-composer textarea[data-copilot-input] { font-size: max(16px, var(--copilot-font)); }
  .review-card__head, .review-card__body, .review-card__json, .review-card__foot { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .copilot-msg.is-streaming .copilot-msg__body::after, .copilot__status:not(:empty)::before, .copilot-dots > span, .copilot-dot { animation: none; opacity: 0.8; }
  .copilot__drop.is-on { animation: none; }
  .copilot-starter, .copilot-composer__box, .copilot-composer__send, .review-card__section > summary::after { transition: none; }
}
/* ===== end copilot (CP-B) =========================================================================================== */

/* ===== web address + sending domain (release 2.1, src/admin/settings-domain.ts) ===================================== */
.subsection { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.subsection > h4 { margin-top: 0; }
.steps-list { padding-inline-start: 20px; max-width: 760px; }
.steps-list > li + li { margin-top: 4px; }
.check-list { list-style: none; margin: var(--sp-3) 0 var(--sp-2); padding: 0; display: grid; gap: 6px; }
.check-list > li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: 4px 8px; }
.dns-list { display: grid; gap: var(--sp-3); margin: var(--sp-3) 0 var(--sp-4); }
.dns-record { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); background: var(--surface); }
.dns-record__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: var(--sp-2); }
.dns-record dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 12px; margin: 0; align-items: start; }
.dns-record dt { color: var(--text-muted); font-size: 11.5px; padding-top: 3px; }
.dns-record dd { margin: 0; display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.dns-record code { font-size: 11px; word-break: break-all; white-space: normal; }
.dns-record .copy-btn { flex: none; }
/* ===== end web address + sending domain ============================================================================= */

/* ===== copilot before it is switched on (release 2.1, src/copilot/views/setup.ts) =================================== */
.copilot-page--setup { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
@container content (min-width: 860px) { .copilot-page.copilot-page--setup { grid-template-columns: minmax(0, 1fr); } }
.copilot-setup__notice { max-width: 60ch; margin: 0 auto var(--sp-3); text-align: start; }
.copilot-setup__list { list-style: none; width: fit-content; max-width: 60ch; margin: 0 auto var(--sp-6); padding: 0; display: grid; gap: 8px; text-align: start; }
.copilot-setup__list > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: baseline; }
.copilot-starters--preview .copilot-starter { cursor: default; opacity: 0.72; }
.copilot-starters--preview .copilot-starter:hover { background: var(--surface); border-color: var(--border); }
.copilot-composer.is-disabled textarea { cursor: not-allowed; }
/* ===== end copilot before it is switched on ========================================================================= */

/* ---------------------------------------------------------------- Admin settings pages and System prompts (2026-11-06) */
.settings-page { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 980px; }
.settings-page > .card { margin: 0; }
.settings-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); margin: 0 0 var(--sp-6); }
@container content (min-width: 700px) { .settings-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container content (min-width: 1080px) { .settings-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.settings-tile { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: var(--sp-5) var(--sp-6); color: var(--text); text-decoration: none; transition: border-color var(--ease), box-shadow var(--ease); }
.settings-tile:hover { border-color: var(--border-strong); text-decoration: none; }
.settings-tile:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.settings-tile__title { font-weight: 600; font-size: 13px; }
.settings-tile__sub { color: var(--text-subtle); font-size: 12px; line-height: 1.45; }
.settings-tile__state { margin-top: var(--sp-2); color: var(--text-muted); font-size: 11.5px; overflow-wrap: anywhere; }
.prompt-form { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 1080px; }
.prompt-form > .card { margin: 0; }
.prompt-layer textarea { width: 100%; max-width: none; min-height: 260px; resize: vertical; }
.prompt-layer__meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: 11.5px; }
.prompt-layer .field-error { color: var(--danger); font-size: 12px; margin: 0 0 var(--sp-2); }
.prompt-default { margin: var(--sp-3) 0 0; }
.prompt-default .check { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 12px; margin-top: var(--sp-2); }
.prompt-save .field > input { max-width: none; }
.prompt-preview, #how, #history { max-width: 1080px; }
.prompt-how p { max-width: 80ch; line-height: 1.55; }
.prompt-part { margin: 0 0 var(--sp-3); }
.prompt-part__label { margin: 0 0 var(--sp-1); }
.prompt-part__text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; margin: 0; }
.prompt-part--editable .prompt-part__text { border-color: var(--info-border); }
.chat-ext-link { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }

/* ===== account row + Settings dialog (2026-11-07) ==============================================================
   ChatGPT/Claude style, Atlas look. The account row is pinned at the bottom of the sidebar: avatar, name and role open the
   account menu UPWARDS (a <details>; the panel is positioned against the whole row so it is as wide as the sidebar
   allows); the cog opens the Settings dialog. The dialog (and the full settings page) is a section menu on the left and
   the section on the right; inside it the section's own cards are flattened into hairline-separated blocks. */
.account-bar { position: relative; display: flex; align-items: center; gap: 4px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--sidebar-border); }
.account-menu { flex: 1 1 auto; min-width: 0; }
.account-menu > summary { list-style: none; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu__btn { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 4px; border-radius: var(--radius-md); cursor: pointer; color: var(--text); transition: background var(--ease), color var(--ease); }
.account-menu__btn:hover, .account-menu[open] > .account-menu__btn { background: var(--nav-hover); color: var(--nav-text-strong); }
.account-bar .avatar { width: 32px; height: 32px; background: var(--avatar-bg); border-color: transparent; color: var(--avatar-ink); }
.account-menu__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.account-menu__name { font-weight: 500; font-size: 11.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__role { font-size: 10.5px; color: var(--text-muted); text-transform: none; }
.account-menu__role::first-letter { text-transform: uppercase; }
.account-menu__chev { margin-inline-start: auto; color: var(--nav-text-dim); transition: transform var(--ease); }
.account-menu[open] .account-menu__chev { transform: rotate(180deg); }
.account-bar__cog { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-md); color: var(--text-muted); transition: background var(--ease), color var(--ease); }
.account-bar__cog:hover { background: var(--surface-2); color: var(--text); }
.account-bar__cog .icon { transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.account-bar__cog:hover .icon { transform: none; }
.account-menu__panel {
  position: absolute;
  inset-inline: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.account-menu__panel .menu-item .icon { color: var(--text-subtle); }
.account-menu__panel .menu-head .muted { white-space: nowrap; }
.cap { text-transform: capitalize; }

dialog.modal.modal--settings {
  width: min(860px, calc(100vw - 2 * var(--sp-6)));
  height: min(640px, calc(100vh - 2 * var(--sp-8)));
  height: min(760px, calc(100dvh - 2 * var(--sp-8)));
}
.modal--settings .modal__head { padding: 20px 24px; border-bottom: 1px solid var(--border); }
.modal--settings .modal__title { font-size: 18px; letter-spacing: -0.035em; }
.modal__body.settings-dialog__body { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.settings-dialog__loading { padding: var(--sp-6); margin: 0; }
.settings { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 0; flex: 1 1 auto; }
.settings:not(.settings--dialog) { min-height: 560px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.settings-nav { display: flex; flex-direction: column; gap: 23px; padding: 20px 12px; border-inline-end: 1px solid var(--border); overflow-y: auto; }
.settings--dialog .settings-nav { background: var(--surface-2); }
.settings-nav__group { display: flex; flex-direction: column; gap: 2px; }
.settings-nav__label { padding: 0 9px 6px; font-size: 10px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.13em; text-transform: uppercase; }
.settings-nav__item { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 12px; font-weight: 400; text-decoration: none; transition: background var(--ease), color var(--ease); }
.settings-nav__item .icon { color: var(--text-subtle); }
.settings-nav__item:hover { background: var(--surface-3); color: var(--text); }
.settings-nav__item[aria-current='page'] { background: var(--surface); color: var(--text); font-weight: 500; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); }
.settings:not(.settings--dialog) .settings-nav__item[aria-current='page'] { background: var(--surface-2); box-shadow: none; }
.settings-nav__item[aria-current='page'] .icon { color: var(--text); }
.settings-panel { min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 26px; }
.settings-panel .settings-panel__title { margin: 0 0 20px; font-size: 17px; font-weight: 600; letter-spacing: -0.035em; }
.settings-panel > .flash { margin: 0 0 var(--sp-4); }
.settings-panel h2 { font-size: 15px; margin: var(--sp-7) 0 var(--sp-3); }
.settings-panel .card { border: none; box-shadow: none; background: transparent; padding: 0; border-radius: 0; }
.settings-panel .card + .card, .settings-panel .card-grid > .card + .card { margin-top: 0; padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.settings-panel .card-grid { gap: var(--sp-5); }
.settings-panel .form { max-width: 560px; }
/* the panel is narrower than the page: table cells wrap instead of scrolling the table sideways (dates and badges stay whole) */
.settings-panel .tbl { font-size: 12px; }
.settings-panel .tbl th, .settings-panel .tbl td { white-space: normal; overflow-wrap: break-word; padding-inline: 0.55rem; }
.settings-panel .tbl .badge { white-space: nowrap; }
.settings-panel .tbl td.muted { overflow-wrap: normal; }
.settings-panel .tbl td select { min-width: 0; }
.settings-panel .tbl td code { overflow-wrap: anywhere; }
.settings-rows { display: flex; flex-direction: column; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.settings-row:first-child { padding-top: 0; }
.settings-row:last-child { border-bottom: none; }
.settings-row__text { min-width: 0; }
.settings-row__label { font-weight: 500; color: var(--text); }
.settings-row__help { margin: 2px 0 0; font-size: 12px; color: var(--text-subtle); max-width: 48ch; }
.settings-row__value { color: var(--text-muted); text-align: end; overflow-wrap: anywhere; }
.settings-row .theme-switch { margin: 0; min-width: 264px; }
@media (max-width: 719px) {
  dialog.modal.modal--settings { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; border: none; }
  .settings { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .settings-nav { flex-direction: row; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); overflow-x: auto; overflow-y: hidden; border-inline-end: none; border-bottom: 1px solid var(--border); }
  .settings-nav__group { flex-direction: row; }
  .settings-nav__label { display: none; }
  .settings-nav__item { white-space: nowrap; }
  .settings-panel { padding: var(--sp-5) var(--sp-4) var(--sp-6); }
  .settings-row { flex-wrap: wrap; }
  .settings-row__value { flex: 1 1 100%; text-align: start; }
  .settings-row .theme-switch { min-width: 0; width: 100%; }
  .settings-row .theme-switch .seg { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .account-bar__cog .icon, .account-menu__chev { transition: none; }
}

/* ===== Atlas (2026-11-08) =========================================================================================== */
/* The Atlas pieces with no earlier home: the headline page heading with the date, the stat cards with an icon, the
   world map stage (src/portal/views/fleet.ts + /static/fleet.js) with its glass chrome, markers and the selected-shipment
   card, the Copilot home (the conversation floating over the map), "Next on the horizon" and the Overview grid.
   Glass is purposeful: only what floats over the map is translucent. Motion: route dash flow and the live-position
   pulse run slowly; reduced motion stops both (the global rule at the top of the file). */

/* ---- heading ---- */
.page-head--atlas { align-items: center; }
/* the Copilot page (2026-11-09, Adam: no greeting, no stat cards): the conversation's title where the greeting was, the
   date, History, New conversation and the text size on the right; one slim row, so the map below gets the height */
/* the title and the controls share one 32px line (Adam: "exactly on the same line height, and slightly smaller"); the
   shipment line ("About …") hangs under the title */
.page-head--copilot { align-items: flex-start; flex-wrap: nowrap; margin-bottom: 16px; }
.copilot-head__main { flex: 1 1 auto; min-width: 0; }
.page-head--copilot h1.copilot-head__title { font-size: 17px; line-height: 32px; letter-spacing: -0.015em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; }
.copilot-head__context { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.page-head--copilot .page-actions { flex: none; flex-wrap: nowrap; align-items: center; min-height: 32px; }
.copilot-head__new { margin: 0; }
.copilot-head__btn { border: 1px solid var(--border); background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); min-height: 30px; white-space: nowrap; }
@media (max-width: 700px) {
  .copilot-head__btn span, .page-head--copilot .copilot-history__btn span { display: none; }
  .page-head--copilot { flex-wrap: wrap; gap: 8px; }
  .page-head--copilot .copilot-head__main { flex-basis: 100%; }
  .page-head--copilot .page-actions { gap: 8px; }
}
.page-date { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: 0 0 12px; }
.section-head h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.section-head__link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 11px; text-decoration: none; }
.section-head__link:hover { color: var(--text); }

/* ---- stat cards (statTile with an icon) ---- */
.stat--atlas .stat__label { color: var(--text-muted); }
.stat--atlas .stat__label .icon { color: var(--text-muted); }
.stat__main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; min-width: 0; }
.stat__note { font-size: 11px; color: var(--text-muted); }
.stat--atlas .stat__note { color: var(--accent-ink); }
.stat--atlas.tone-wait .stat__note { color: var(--warning); }
.stat--atlas.tone-blocked .stat__note { color: var(--blocked); }
.stat--atlas.tone-err .stat__note { color: var(--danger); }
.stat--atlas.tone-ok .stat__note { color: var(--success); }
.stat.stat--atlas .stat__value { color: var(--text); }
.stat.stat--atlas .stat__label::before { display: none; }
a.stat--atlas:hover { border-color: var(--accent-border); }
.dash-tile { display: contents; }

/* ---- the map stage ---- */
.map-stage { position: relative; height: 540px; overflow: hidden; border: 1px solid var(--land-border); border-radius: var(--radius-lg); background: var(--ocean); isolation: isolate; }
.map-canvas { position: absolute; inset: 0; z-index: 1; background: var(--ocean); }
.map-stage .leaflet-container { background: var(--ocean); font-family: var(--font); outline: none; }
/* Leaflet only exempts its overlay pane from `svg { max-width: 100% }` — the custom land and route panes need it too. */
.map-stage .leaflet-pane svg, .map-stage .leaflet-pane img { max-width: none !important; max-height: none !important; }
.fleet-port__label.is-hidden, .fleet-ocean.is-hidden { visibility: hidden; }
.map-stage .leaflet-container a { color: var(--accent-ink); }
.fleet-land { fill: var(--land); stroke: var(--land-border); stroke-width: 0.65px; }
.fleet-route { fill: none; stroke: var(--route-idle); stroke-width: 1.2px; stroke-opacity: 0.6; stroke-linecap: round; stroke-linejoin: round; }
.fleet-route--active { stroke: var(--accent); stroke-width: 2.3px; stroke-opacity: 0.88; stroke-dasharray: 5 8; animation: em-route-flow 70s linear infinite; }
.fleet-route--air.fleet-route--active { stroke-dasharray: 2 7; }
.fleet-icon { background: none; border: none; }
.fleet-port { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.fleet-port__dot { display: block; width: 10px; height: 10px; border: 2px solid var(--pin-ring); border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); }
.fleet-port__count { display: grid; place-items: center; width: 26px; height: 26px; border: 3px solid rgba(255, 255, 255, 0.8); border-radius: 50%; background: var(--brand-navy); color: #ffffff; font-size: 10px; font-weight: 600; box-shadow: 0 0 0 5px rgba(82, 123, 148, 0.13); }
.fleet-port__label { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; text-shadow: 0 1px 4px var(--ocean), 0 0 2px var(--ocean); pointer-events: none; }
.fleet-vessel { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border: 1px solid #94b6cc; border-radius: 50%; background: var(--surface); color: var(--accent); box-shadow: 0 0 0 7px rgba(92, 154, 186, 0.09), 0 4px 8px rgba(17, 34, 51, 0.2); transition: transform var(--ease), box-shadow var(--ease); }
.fleet-vessel--live::before { content: ''; position: absolute; inset: -6px; border: 1px solid rgba(86, 144, 176, 0.45); border-radius: 50%; animation: em-position-pulse 4s ease-out infinite; }
.fleet-vessel--est { border-style: dashed; color: var(--text-muted); box-shadow: 0 0 0 6px rgba(92, 154, 186, 0.06), 0 3px 6px rgba(17, 34, 51, 0.14); }
.fleet-icon--vessel:hover .fleet-vessel, .fleet-icon--vessel:focus-visible .fleet-vessel, .fleet-icon--vessel.is-selected .fleet-vessel { transform: scale(1.1); border-color: var(--accent); color: var(--accent); }
.fleet-icon--vessel:focus-visible { outline: none; }
.fleet-icon--vessel:focus-visible .fleet-vessel { box-shadow: 0 0 0 3px var(--focus-ring); }
.fleet-ocean { display: block; font-size: 10px; letter-spacing: 0.19em; text-transform: uppercase; text-align: center; color: var(--text-muted); white-space: nowrap; pointer-events: none; opacity: 0.85; }
.map-topline { position: absolute; z-index: 5; inset-inline: 19px; top: 17px; display: flex; justify-content: space-between; gap: 10px; pointer-events: none; }
.map-topline > * { pointer-events: auto; }
.map-filter { display: flex; align-items: center; gap: 9px; padding: 7px 11px; border: 1px solid var(--land-border); border-radius: 7px; background: var(--glass); box-shadow: 0 2px 5px rgba(17, 34, 51, 0.07); color: var(--text); font-size: 11px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.map-filter strong { font-weight: 600; }
.map-filter__sep { width: 1px; height: 14px; background: var(--border); }
.map-filter select { width: auto; min-height: 0; max-width: 150px; padding: 0 2px; border: 0; background: transparent; color: var(--text); font-size: 11px; box-shadow: none; }
.map-filter select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.map-live:hover { color: var(--text); border-color: var(--accent-border); }
.map-live { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--land-border); border-radius: var(--radius-sm); background: var(--glass); color: var(--text-muted); font-size: 11px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.map-live__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.map-stage.has-live .map-live__dot { background: var(--accent); }
.map-controls { position: absolute; z-index: 6; inset-inline-end: 18px; bottom: 40px; display: flex; flex-direction: column; padding: 3px; border: 1px solid var(--land-border); border-radius: var(--radius-md); background: var(--glass); box-shadow: var(--shadow-md); }
.map-controls .icon-btn { width: 30px; height: 30px; border-radius: 6px; }
.map-legend { position: absolute; z-index: 5; inset-inline-start: 20px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--text-muted); font-size: 10px; pointer-events: none; }
.map-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.map-legend__dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--accent); background: var(--surface); }
.map-legend__dot--est { border-style: dashed; border-color: var(--text-muted); }
.map-legend__line { width: 14px; border-top: 1.5px dashed var(--accent); }
.map-stage.is-failed .map-canvas { background: var(--ocean); }

/* ---- the selected-shipment card ---- */
.map-card { position: absolute; z-index: 7; inset-inline-end: 66px; top: 76px; width: 256px; padding: 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--glass); box-shadow: var(--shadow-md); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.map-card__eyebrow { display: flex; align-items: center; justify-content: space-between; margin: -4px -6px 9px 0; color: var(--text-muted); font-size: 11px; }
.map-card__mode { display: inline-flex; align-items: center; gap: 7px; }
.map-card__close.icon-btn { width: 26px; height: 26px; }
.map-card__route { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: -0.02em; }
.map-card__route > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-card__route svg { flex: none; color: var(--text-muted); }
.map-card__ref { margin-top: 6px; color: var(--text-muted); font-size: 11px; }
.map-card__vessel { display: flex; align-items: center; gap: 7px; margin: 14px 0 10px; font-size: 11.5px; min-width: 0; }
.map-card__vessel svg { flex: none; color: var(--text-muted); }
.map-card__vessel-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-card__phase { margin-inline-start: auto; font-size: 10px; }
.map-card__progress { height: 3px; overflow: hidden; border-radius: 3px; background: var(--border); margin-bottom: 8px; }
.map-card__progress-fill { display: block; height: 100%; width: calc(var(--progress, 0) * 1%); background: var(--accent); border-radius: 3px; }
.map-card__meta { display: flex; justify-content: space-between; gap: 8px; color: var(--text-muted); font-size: 11px; }
.map-card__link { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--text); font-size: 11.5px; font-weight: 500; text-decoration: none; }
.map-card__link:hover { color: var(--accent-ink); }

/* ---- the Copilot home: the conversation floats over the map ---- */
/* the map takes the page's height under the slim heading (the stat cards are gone, 2026-11-09) */
.map-stage--home { height: max(520px, calc(100vh - 156px)); height: max(520px, calc(100dvh - 156px)); }
.copilot-overlay { position: absolute; z-index: 10; left: 50%; bottom: 40px; transform: translateX(-50%); width: min(calc(var(--copilot-font) * 30 + 270px), calc(100% - 92px), max(660px, calc(100% - 500px))); display: flex; flex-direction: column; pointer-events: none; } /* the width: "Copilot text size", copilot section */
.copilot-overlay > * { pointer-events: auto; }
/* the overlay never grows past the map's top edge (2026-11-09: the head with Conversations and New conversation was pushed
   above it and could not be found); the messages give way so the head and the notices stay in view */
.copilot-overlay { max-height: calc(100% - 56px); }
.copilot-overlay > .copilot--home { min-height: 0; flex: 0 1 auto; }
.copilot-greeting { margin: 0 0 15px; text-align: center; pointer-events: none; }
.copilot-greeting h2 { margin: 0; font-size: 23px; font-weight: 500; letter-spacing: -0.045em; text-shadow: 0 1px 12px var(--ocean); }
.copilot-greeting p { margin: 5px auto 0; color: var(--text-muted); font-size: 11.5px; text-shadow: 0 1px 8px var(--ocean); }
.copilot-overlay:has(.copilot-msg) .copilot-greeting { display: none; }
.copilot--home { --copilot-bg: transparent; --copilot-col: none; }
.copilot--home > *, .copilot--home .copilot__dock > * { max-width: none; }
/* the panel head's own controls (2026-11-09): Conversations and New conversation, labeled, where the reader is */
.copilot__head-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.copilot__new { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.copilot__head .copilot-history__panel { top: calc(100% + 6px); bottom: auto; inset-inline-end: 0; inset-inline-start: auto; }
.copilot__long { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.copilot__long .btn { flex: none; }
@media (max-width: 600px) { .copilot__new span, .copilot__head .copilot-history__btn span { display: none; } .copilot__long { flex-direction: column; align-items: flex-start; } }
.copilot-history { position: relative; }
.page-actions--home { gap: 14px; }
.page-head .copilot-history__panel { top: calc(100% + 6px); bottom: auto; }
.copilot-history > summary { list-style: none; border: 1px solid var(--border); background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); min-height: 30px; }
.copilot-history > summary::-webkit-details-marker { display: none; }
.copilot-history__panel { top: auto; bottom: calc(100% + 6px); width: 300px; max-height: 340px; overflow: auto; }
.copilot-history .copilot-threads { padding: 4px; }
/* a conversation under way fills the middle column from the line of Global view and the shipments count down to the
   composer (2026-11-09): the overlay is pinned top and bottom, the messages take what the composer leaves. On the line
   itself only where the map is wide enough to keep 12px clear of the Global view filter (19px inset + ~232px + 12px on
   each side, so the panel never narrower than 600px); on a narrower map it starts just under that row. */
.map-stage--home { container: copilot-stage / inline-size; }
.copilot-overlay:has(.copilot-msg) { top: 62px; }
@container copilot-stage (min-width: 1126px) {
  .copilot-overlay:has(.copilot-msg) { top: 17px; max-width: calc(100% - 526px); }
}
.copilot-overlay:has(.copilot-msg) > .copilot--home { flex: 1 1 auto; }
.copilot--home:has(.copilot-msg) .copilot__messages { flex: 1 1 auto; max-height: none; }
.copilot--home .copilot__messages { flex: 0 1 auto; max-height: min(360px, calc(100vh - 460px)); min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 0 12px; padding: 18px; gap: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--glass); box-shadow: var(--shadow-md); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); flex: 0 1 auto; }
.copilot--home:not(:has(.copilot-msg)) .copilot__messages { display: none; }
.copilot--home .copilot-msg--assistant { grid-template-columns: 25px minmax(0, 1fr); gap: 9px; }
.copilot--home .copilot-msg__avatar { width: 25px; height: 25px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.copilot--home .copilot-msg--user > .copilot-msg__body { margin-inline-start: 60px; background: var(--surface-2); border-radius: 10px; }
.copilot--home .copilot-msg--proposal { padding-inline-start: 34px; }
.copilot--home .copilot__dock { position: static; padding: 0; background: none; }
.copilot--home .copilot__status { margin: 0 0 6px; padding: 0 4px; text-shadow: 0 1px 6px var(--ocean); }
.copilot--home .copilot__status:not(:empty)::before { width: 17px; height: 3px; border-radius: 2px; background: var(--brand-red); animation: em-working 1.5s ease-in-out infinite; }
.copilot--home .copilot-composer__box { padding: 14px 14px 10px 16px; border: 1px solid var(--glass-border); border-radius: 13px; background: var(--glass); box-shadow: var(--shadow-float); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.copilot--home .copilot-composer textarea[data-copilot-input] { min-height: 2.4em; max-height: 12em; padding: 0; line-height: 1.6; }
.copilot--home .copilot-composer__bar { min-height: 30px; margin-top: 6px; }
.copilot--home .copilot-composer__attach.icon-btn { width: 28px; height: 28px; }
.copilot-composer__mode { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 6px; color: var(--text-muted); font-size: var(--copilot-font-3xs); white-space: nowrap; }
.copilot--home .copilot-composer__hint { display: none; }
.copilot--home .copilot-composer__send, .copilot--home .copilot-composer__stop { width: 30px; height: 30px; border-radius: 7px; }
.copilot--home .copilot-composer__send { color: var(--accent-solid-ink); }
.copilot-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }
.copilot-suggestions > li { max-width: none; }
.copilot-suggestions form { margin: 0; }
.copilot-suggestion { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 6px 11px; border: 1px solid var(--glass-border); border-radius: 7px; background: var(--glass); color: var(--text); font: inherit; font-size: var(--copilot-font-xs); cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background var(--ease), border-color var(--ease); }
.copilot-suggestion:hover { background: var(--surface); border-color: var(--accent-border); }
.copilot-suggestion .icon { color: var(--text-muted); }
.copilot--home:has(.copilot-msg) .copilot-suggestions { display: none; }
.copilot-composer__foot--home { margin-top: 8px; font-size: var(--copilot-font-3xs); color: var(--text-muted); text-shadow: 0 1px 6px var(--ocean); }
/* The selected shipment's card on the Copilot home (2026-11-10): a smaller card on the stage's right edge, in line with
   the shipments count above it. The conversation never changes size for it. Where the stage is wide enough for the
   conversation to start on the top line (1126px, above), the column beside the conversation is at least 263px: the
   edge's 19px, the card's 228px and a 16px gap. On a narrower stage the card steps aside until the conversation ends.
   While the card is open the conversation's surface goes to 80% and keeps only a trace of blur (1.5px), so the shipment
   in focus shows through it; the text keeps its full strength. fleet.js moves the map so the shipment's destination
   sits just under the card. */
.map-stage--home .map-card { top: 76px; inset-inline-end: 19px; width: 228px; padding: 14px; }
.map-stage--home:has(.copilot-msg) .map-card { top: 64px; }
.copilot--home .copilot__messages { transition: background-color 220ms ease-out, backdrop-filter 220ms ease-out, -webkit-backdrop-filter 220ms ease-out; }
@container copilot-stage (width < 1126px) { .map-stage--home:has(.copilot-msg) .map-card { display: none; } }
@container copilot-stage (min-width: 1126px) {
  .map-stage--home:has(.map-card:not([hidden])) .copilot__messages { background-color: color-mix(in srgb, var(--surface) 80%, transparent); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); }
}

/* ---- next on the horizon ---- */
.arrivals { margin-top: 23px; }
.arrivals__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.arrival-card { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border-radius: 10px; color: var(--text); text-decoration: none; transition: border-color var(--ease); }
.arrival-card:hover { border-color: var(--accent); }
.arrival-card__icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-muted); }
.arrival-card__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.arrival-card__route { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arrival-card__route .icon { width: 13px; height: 13px; color: var(--text-muted); }
.arrival-card__ref { color: var(--text-muted); font-size: 11px; }
.arrival-card__date { margin-inline-start: auto; text-align: end; font-size: 12px; white-space: nowrap; }
.arrival-card__date small { display: block; color: var(--text-muted); font-size: 10.5px; }
.arrivals__none { margin: 0; color: var(--text-muted); font-size: 12px; }

/* ---- lists: queue tabs, filter bar, the table card (src/portal/views/shipments-list.ts) ---- */
.list-tabs { margin-bottom: 18px; }
.toolbar.filterbar { align-items: center; gap: 10px; padding: 0; margin-bottom: 18px; border: none; background: transparent; }
.filterbar .field { margin: 0; min-width: 0; }
.filterbar select { width: auto; min-height: 38px; padding: 8px 30px 8px 12px; font-size: 11.5px; }
.filterbar .check { margin: 0; min-height: 38px; font-size: 11.5px; font-weight: 400; color: var(--text-muted); }
.filterbar__search { flex: 0 1 320px; min-width: 250px; }
.filterbar__search .search-input { width: 100%; min-width: 0; }
.search-input input[type='search'] { width: 100%; min-width: 0; }
.filterbar__spacer { flex: 1 1 auto; }
.search-input { display: flex; align-items: center; gap: 8px; min-width: 250px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text-muted); transition: border-color var(--ease), box-shadow var(--ease); }
.search-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.search-input input[type='search'] { min-height: 38px; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 11.5px; }
.search-input input[type='search']:focus { box-shadow: none; }
/* The box draws the border, its input none: the generic input rule (specificity 0,6,1) outranked the line above (0,2,1)
   and drew a second border inside every search box (Shipments, Partners, Vessels). */
.search-input input[type='search']:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='hidden']):not([type='file']) {
  min-height: 38px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 11.5px;
}
.card.tbl-card { padding: 0; overflow: hidden; }
.tbl-card .tbl-wrap { margin: 0; border: none; border-radius: 0; }
.tbl-card .tbl th:first-child { border-start-start-radius: 0; }
.tbl td small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.tbl-ref { display: block; color: inherit; text-decoration: none; }
.tbl-ref strong { font-weight: 500; font-size: 12px; }
.tbl-ref:hover strong { color: var(--accent-ink); }
.tbl td.tbl-open { width: 1%; padding-block: 8px; text-align: end; }
.tbl td.tbl-open .icon-btn { width: 30px; height: 30px; }
.tbl-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: 12px 17px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 11px; }
.tbl-foot .pager { margin: 0; }
.legend { margin-top: 14px; }
@media (max-width: 760px) {
  .filterbar__search, .search-input { flex: 1 1 100%; min-width: 0; width: 100%; }
  .filterbar select { flex: 1 1 auto; }
  .filterbar__spacer { display: none; }
}

/* ---- the shipment detail header ---- */
.back-link { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 16px; color: var(--text-muted); font-size: 11.5px; text-decoration: none; }
.back-link:hover { color: var(--text); }
.page-head--detail { align-items: flex-end; }
.page-head--detail h1.mono { font-family: var(--mono); font-size: 25px; font-weight: 500; letter-spacing: -0.02em; }
.page-head--detail .page-sub { font-size: 11.5px; }
.detail-status { margin-top: -6px; }
/* what a created shipment still waits for, under the status line (2026-11-10) */
.status-note { margin: 8px 0 0; max-width: 92ch; color: var(--text-muted); font-size: 12.5px; line-height: 1.5; }

/* ---- API & integrations (src/portal/integration.ts) ---- */
.api { display: flex; flex-direction: column; gap: 22px; }
.card.api-hero { display: flex; justify-content: space-between; gap: 20px; padding: 27px; margin: 0; }
.api-hero__copy { min-width: 0; }
.api-hero .card__title { margin: 9px 0; font-size: 23px; font-weight: 600; letter-spacing: -0.035em; }
.api-hero p:not(.eyebrow) { max-width: 560px; margin: 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.8; }
.api-hero .actions { margin: 17px 0 0; }
.api-hero__icon { display: grid; place-items: center; flex: none; width: 78px; height: 78px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--accent-soft); color: var(--accent-ink); }
.api-hero__icon .icon { width: 32px; height: 32px; }
.api-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 22px; align-items: start; }
.api-grid__main, .api-grid__side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.api-grid .card { margin: 0; }
.api-grid .card + .card { margin-top: 0; }
.api-grid .card__title { font-size: 17px; letter-spacing: -0.035em; }
.code-block--dark { overflow: hidden; border-radius: 10px; background: var(--code-bg); margin: 0 0 var(--sp-3); }
.code-block__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px 9px 15px; background: var(--code-head); border-bottom: 1px solid var(--code-border); color: var(--code-ink); font-family: var(--font); font-size: 11px; }
.code-block__method { margin-inline-end: 6px; color: var(--code-key); font-weight: 600; }
.code-block--dark .copy-btn { position: static; min-height: 28px; padding: 4px 10px; border-color: var(--code-border); background: transparent; color: var(--code-ink); }
.code-block--dark .copy-btn:hover { background: var(--code-border); }
.code-block--dark pre.json, .code-block--dark pre.code { margin: 0; padding: 18px; border: none; border-radius: 0; }
.api-steps__list { list-style: none; margin: 0; padding: 0; }
.api-steps__list li { display: flex; align-items: center; gap: 11px; max-width: none; padding: 13px 0; border-bottom: 1px solid var(--border); }
.api-steps__list li:last-child { border-bottom: none; padding-bottom: 0; }
.api-steps__n { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-ink); font-size: 11px; }
.api-steps__list strong { display: block; font-size: 12px; font-weight: 600; }
.api-steps__list small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 11px; }
.endpoints { list-style: none; margin: 0; padding: 0; }
.endpoints li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 2px 9px; align-items: center; max-width: none; padding: 11px 0; border-bottom: 1px solid var(--border); }
.endpoints li:last-child { border-bottom: none; padding-bottom: 0; }
.endpoints__method { grid-row: span 2; justify-self: start; padding: 3px 5px; border-radius: 3px; background: var(--accent-soft); color: var(--accent-ink); font-size: 9.5px; font-weight: 600; letter-spacing: 0.03em; }
.endpoints__path { font-size: 11px; overflow-wrap: anywhere; }
.endpoints__what { color: var(--text-muted); font-size: 11px; }
#connection { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding-inline-start: 14px; }
#connection::before { display: none; }
@media (max-width: 1000px) {
  .api-grid { grid-template-columns: minmax(0, 1fr); }
  .api-hero__icon { display: none; }
}

/* ---- the Overview board (src/portal/views/dashboard.ts) ---- */
.dash-board { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, 1fr); gap: 20px; align-items: start; }
.dash-board__main, .dash-board__side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.dash-board--quiet { margin-top: var(--sp-4); }
.map-stage--overview { height: 340px; }
.map-stage--overview .map-card { top: 62px; inset-inline-end: 56px; width: 232px; }
.map-stage--overview .map-controls { bottom: 34px; }
.dash .card.dash-card { padding: 22px; border-radius: var(--radius-lg); }
.dash .dash-card__head { margin-bottom: 10px; }
.dash .dash-card__head h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.dash .dash-count { min-width: 0; height: auto; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-muted); font-family: var(--font); font-size: 11px; font-weight: 500; }
.dash .dash-count::after { content: '\00a0items'; }
.dash .dash-count.is-on { background: var(--warning-soft); color: var(--warning); }
#dash-replies .dash-count.is-on, #dash-arrivals .dash-count.is-on { background: var(--accent-soft); color: var(--accent-ink); }
.dash .dash-row { padding: 13px 0; }
.dash .dash-row + .dash-row { border-top: 1px solid var(--border); }
.dash .dash-row__ref { font-family: var(--mono); font-size: 12px; font-weight: 500; }
.dash .dash-row__why { font-size: 11.5px; }
.dash-copilot { padding: 22px; background: var(--accent-soft); border-color: var(--accent-border); }
.dash-copilot .eyebrow { margin: 0 0 8px; }
.dash-copilot h3 { margin: 0 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -0.035em; }
.dash-copilot p { margin: 0 0 16px; color: var(--text-muted); font-size: 12px; }
.eyebrow { font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); }
@media (max-width: 1000px) {
  .dash-board { grid-template-columns: minmax(0, 1fr); }
}

@keyframes em-route-flow { to { stroke-dashoffset: -400; } }
@keyframes em-position-pulse { 0% { transform: scale(0.8); opacity: 0.2; } 50% { opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes em-working { 50% { opacity: 0.25; transform: scaleX(0.6); } }

@media (min-width: 1550px) {
  .copilot-overlay { width: min(calc(var(--copilot-font) * 30 + 310px), max(700px, calc(100% - 500px))); }
}
@media (max-width: 1200px) {
  .map-card { width: 226px; inset-inline-end: 52px; }
  .copilot-overlay { width: min(600px, calc(100% - 92px)); }
}
@media (max-width: 1000px) {
  .map-card { width: 208px; inset-inline-end: 45px; }
  .copilot-overlay { width: calc(100% - 55px); }
  .arrivals__grid { gap: 8px; }
  .arrival-card { padding: 11px; gap: 7px; }
  .arrival-card__icon { display: none; }
  .page-date { display: none; }
}
@media (max-width: 760px) {
  .map-stage { height: 460px; }
  .map-stage--home { height: 600px; }
  .map-topline { inset-inline: 12px; top: 12px; }
  .map-filter { padding: 6px 8px; font-size: 10.5px; }
  .map-filter strong, .map-filter__sep { display: none; }
  .map-filter select { max-width: 110px; }
  .map-live { font-size: 10px; }
  .map-card { width: 200px; top: 58px; inset-inline-end: 12px; padding: 13px; }
  .map-stage--home .map-card { display: none; }
  .copilot-overlay { width: calc(100% - 24px); bottom: 36px; }
  .copilot-greeting h2 { font-size: 21px; }
  .map-controls { inset-inline-end: 12px; top: 58px; bottom: auto; }
  .map-stage--home .map-controls { display: none; }
  .map-legend { inset-inline-start: 12px; gap: 4px 9px; font-size: 9px; }
  .map-stage--home .map-legend { display: none; }
  .arrivals__grid { grid-template-columns: 1fr; }
  .arrival-card__icon { display: grid; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 17px; }
  .stat { padding: 14px 15px; gap: 8px; }
  .stat__value { font-size: 25px; }
  .copilot--home .copilot-msg--user > .copilot-msg__body { margin-inline-start: 30px; }
}
/* ===== end Atlas (2026-11-08) ======================================================================================= */

/* ===== master data: vessels (stream A, 2026-11-08) ================================================================== */
/* Admin → Master data → Vessels (src/admin/views-vessels.ts): former names wrap under the name; the Israeli customs vessel
   code (ILVesselCode) is a small mono chip next to the IMO; the import card sits under the table with its own gap. */
.vessels-tbl td small.vessel-former { white-space: normal; max-width: 40ch; }
.vessel-il { display: inline-block; padding: 1px 7px; border: 1px solid var(--info-border); border-radius: var(--radius-sm); background: var(--info-soft); color: var(--text); font-weight: 600; }
.card.vessels-import { margin-top: var(--sp-8); }
.vessels-import > .section-head:first-child { margin-top: 0; }
.vessels-import .form { margin-bottom: var(--sp-4); }
.vessels-import .fold { margin-bottom: var(--sp-4); }
/* ===== end master data: vessels ====================================================================================== */


/* ===== master data: shipments synced from Freightools (stream B, 2026-11-08) ======================================= */
/* The list's sync status line (src/portal/views/ft-sync.ts): one quiet row above the queue tabs, amber-free — a sync
   is not a customs state; the running line carries a small spinner (still under reduced motion: a static ring). */
.ft-sync-status { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 var(--sp-3); padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.ft-sync-status > svg { flex: none; margin-top: 2px; }
.ft-sync-status strong { color: var(--text); font-weight: 500; }
.ft-sync-status--running { border-color: var(--info-border); background: var(--info-soft); color: var(--info); }
.ft-sync-status--done > svg { color: var(--success); }
.ft-sync-status--failed { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger); }
.ft-sync-status__spin { flex: none; width: 13px; height: 13px; margin-top: 2px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: journey-spin 900ms linear infinite; }
@media (prefers-reduced-motion: reduce) { .ft-sync-status__spin { animation: none; border-inline-end-color: currentColor; opacity: 0.6; } }
.ft-sync-form { display: inline-flex; }

/* the "Freightools" chip (list rows, the detail subtitle) and the Freightools status badge */
.chip.chip--ft { min-height: 20px; padding: 1px 7px; margin-inline-start: 6px; border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-ink); font-family: inherit; font-size: 10.5px; font-weight: 500; letter-spacing: 0.01em; vertical-align: middle; }
.tbl-ref .chip--ft { margin-inline-start: 6px; }
.page-sub .chip--ft { margin-inline-start: 4px; }
.ft-cs-status { white-space: nowrap; }

/* the Import pop-up */
.ft-import { display: grid; gap: var(--sp-3); }
.ft-import__lead { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.55; }
.ft-import .field { margin: 0; }
.ft-import .notice { margin: 0; }
.ft-import .actions { display: flex; gap: var(--sp-2); justify-content: flex-end; margin: 0; }

/* the detail header's Sync with "Synced 10:42" beside it */
.ft-sync-action { display: inline-flex; align-items: center; gap: var(--sp-2); }
.ft-synced-at { font-size: 11.5px; white-space: nowrap; }

/* the Overview of a synced shipment: the latest events and the "managed in Freightools" note */
.ft-events { display: grid; gap: 6px; margin: 0 0 var(--sp-4); padding: 0; list-style: none; font-size: 12px; }
.ft-events li { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.ft-events__at { min-width: 9.5em; font-variant-numeric: tabular-nums; }
.ft-managed { max-width: 72ch; }
@media (max-width: 760px) {
  .ft-sync-action { flex-wrap: wrap; }
  .ft-events__at { min-width: 0; width: 100%; }
}
/* ===== end master data: shipment sync ================================================================================ */


/* ===== master data: partners (stream C, 2026-11-08) ================================================================= */
/* The Partners page (src/partners/views.ts): the sync strip above the search (the status pill takes its colours from the
   .tone-* family, so only the border width and style are set here; the Sync button on the right), the table's name /
   roles / code cells, and the External code pop-up. Atlas tokens only. */
.partner-sync { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin: 0 0 var(--sp-4); }
.partner-sync__status { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; min-height: 32px; max-width: 100%; padding: 6px 12px; border-width: 1px; border-style: solid; border-radius: var(--radius-md); font-size: 12px; line-height: 1.45; }
.partner-sync__status .icon { flex: none; }
.partner-sync__form { margin: 0; }
.partner-tbl__name strong { font-weight: 500; }
.partner-tbl__name small { display: block; margin-top: 4px; }
.partner-tbl td.partner-tbl__roles { white-space: normal; min-width: 14ch; }
.partner-tbl__roles .badge { margin: 0 4px 4px 0; }
.partner-code-chip { display: inline-block; padding: 2px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font-size: 11.5px; overflow-wrap: anywhere; }
.partner-code__who { margin-bottom: var(--sp-5); }
.partner-code .field > input { max-width: none; }
.partner-code__error { margin: 0; font-size: 12px; }
.partner-code__actions { justify-content: flex-end; margin: var(--sp-5) 0 0; }
.partner-code__loading { min-height: 120px; }
@media (max-width: 720px) {
  .partner-sync { flex-direction: column; align-items: stretch; }
  .partner-sync__form .btn { width: 100%; justify-content: center; }
}
/* ===== end master data: partners ===================================================================================== */


/* ===== registration (stream R, 2026-11-08) =========================================================================== */
/* The Self-registered / Not connected chips of Admin → Companies. (The registration pages themselves are styled by
   site.css, like every sign-in screen since the UI handover.) */
.company-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
/* the Activation card of a company that registered itself (Admin → Companies → Environments), above the environments */
.company-activation { margin-bottom: var(--sp-5); }
.company-activation > p { max-width: 78ch; }
/* ===== end registration ============================================================================================== */


/* ===== usage and billing (stream U, 2026-11-08) ====================================================================== */
/* Settings → Usage & billing (src/billing/views.ts usageSection), the Overview banner, the 402 alert of the shipment
   forms, Admin → Usage and the company's Usage & billing tab (src/billing/admin.ts). Tokens only, so both themes work. */
.usage .settings-row__value { color: var(--text); }
.usage-figure { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.usage-figure strong { color: var(--text); font-weight: 600; }
.usage-free { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.usage-dots { display: inline-flex; gap: 4px; }
.usage-dots__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border-strong); }
.usage-dots__dot.is-used { background: var(--accent); box-shadow: none; }
.usage-pay { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-4) 0 var(--sp-2); }
.usage-pay .help { margin: 0; max-width: 44ch; }
.usage-request, .usage-closed, .usage-who { margin-top: var(--sp-4); }
.usage__title { margin: var(--sp-6) 0 var(--sp-3); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.usage-months { margin-bottom: var(--sp-3); }
/* Row headers (the month, the company) read as ordinary first cells, not as sticky column headers. */
.usage-months tbody th, .usage-admin tbody th, .usage-admin tfoot th { position: static; background: none; box-shadow: none; border-bottom-color: var(--border); font-size: 12px; color: var(--text); padding-block: 0.5rem; }
.usage-months tbody th { font-weight: 500; white-space: nowrap; }
.usage-months__empty td { color: var(--text-subtle); }
.usage-help { max-width: 72ch; }
.billing-banner { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-6); padding: 14px 16px; border: 1px solid var(--info-border); border-radius: var(--radius-lg); background: var(--info-soft); color: var(--text); }
.billing-banner--closed { border-color: var(--warning-border); background: var(--warning-soft); }
.billing-banner__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--surface); color: var(--info); }
.billing-banner--closed .billing-banner__icon { color: var(--warning); }
.billing-banner__text { flex: 1 1 auto; min-width: 0; }
.billing-banner__text strong { display: block; font-size: 13px; font-weight: 600; }
.billing-banner__text p { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); }
.billing-banner__action { flex: none; }
.billing-alert__next { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.billing-alert__link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.usage-admin thead th { white-space: normal; font-family: inherit; vertical-align: bottom; }
.usage-admin th.usage-admin__month { text-align: center; border-inline-start: 1px solid var(--border); }
.usage-admin tbody th { font-weight: 400; white-space: normal; min-width: 16ch; }
.usage-admin tfoot th, .usage-admin tfoot td { font-weight: 600; border-bottom: none; background: var(--surface-2); }
.usage-company__form { margin-top: var(--sp-5); max-width: 560px; }
@media (max-width: 719px) {
  .usage-free { align-items: flex-start; }
  .billing-banner { flex-wrap: wrap; }
  .billing-banner__action { margin-inline-start: calc(34px + var(--sp-3)); }
}
/* ===== end usage and billing ========================================================================================= */


/* ===== the shipment's cargo, drawn (2026-11-11) ===================================================================== */
/* Freight unit art (src/ui/freight-art.ts): a container, a pallet or a carton drawn as what it is. Used by the shipment
   page's deck (src/portal/views/detail-shipment.ts: cargo, parties, booking, with a "+" for every value still to come)
   and by the cargo editor (the wizard's Cargo step: the drawing above each row, the type tiles). The drawings carry
   their own paint; everything around them uses theme tokens, so both themes work. */
.fa-svg { display: block; width: 100%; height: auto; color: var(--text); }

.ship-deck { display: grid; gap: var(--sp-6); margin: var(--sp-6) 0 var(--sp-8); }
.deck-hint { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0; padding: 10px 14px; border: 1px solid var(--accent-border); border-radius: var(--radius); background: var(--accent-soft); color: var(--text); font-size: 12.5px; }
.deck-hint .icon { flex: none; margin-top: 2px; color: var(--accent-ink); }
.deck { min-width: 0; }
.deck__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.deck__head h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.deck__sum { margin: 2px 0 0; color: var(--text-muted); font-size: 12.5px; }
.deck-edit { flex: none; }

.unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: var(--sp-4); }
.unit { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.unit__art { position: relative; padding: 14px 18px 6px; background: linear-gradient(180deg, var(--surface-2), var(--surface-3)); border-bottom: 1px solid var(--border); }
.unit__art--pkg { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); padding: 12px 18px; }
.unit__art--pkg .fa-svg { width: 132px; flex: none; }
.unit__art--ghost { opacity: 0.38; filter: grayscale(1); }
.unit__count { font-family: var(--mono); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.unit__body { display: grid; gap: 10px; padding: 14px 18px 16px; min-width: 0; }
.unit__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.unit__title { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0; }
.unit__title .mono { font-size: 14.5px; letter-spacing: 0.02em; }
.unit__type { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--surface-3); color: var(--text-muted); font-size: 11.5px; white-space: nowrap; }
.unit__type .mono { color: var(--text); font-weight: 600; font-size: 11px; }
.unit__note { margin: 0; color: var(--text-muted); font-size: 12px; }
.unit__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px 14px; margin: 0; }
.unit__fact { min-width: 0; }
.unit__fact dt { margin: 0 0 3px; color: var(--text-muted); font-size: 11px; }
.unit__fact dd { margin: 0; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.unit__goods { display: grid; gap: 4px; margin: 0; padding: 10px 0 0; list-style: none; border-top: 1px dashed var(--border); }
.unit__goods li { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }
.unit__desc { font-size: 12.5px; overflow-wrap: anywhere; }
.unit__hs { color: var(--text-muted); font-size: 11.5px; }
.unit__adds { display: flex; gap: 6px; flex-wrap: wrap; }

/* a value that is not there yet: one click into the editor, on that field */
.deck-add { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 2px 9px 2px 5px; border: 1px dashed var(--accent-border); border-radius: 999px; background: transparent; color: var(--accent-ink); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.deck-add:hover { background: var(--accent-soft); border-style: solid; }
.deck-add:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.deck-add .icon { width: 14px; height: 14px; }
.deck-none { color: var(--text-muted); font-size: 12px; font-weight: 400; }

.party-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: var(--sp-4); }
.party { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.party.is-customer { border-color: var(--accent-border); box-shadow: inset 0 0 0 1px var(--accent-border); }
.party--ghost { border-style: dashed; background: transparent; justify-items: start; }
.party__role { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.party__tag { padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 10.5px; letter-spacing: 0.02em; text-transform: none; }
.party__name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.party__place, .party__later { margin: 0; color: var(--text-muted); font-size: 12.5px; overflow-wrap: anywhere; }
.party__later { margin-bottom: 6px; }
.party__id { font-size: 12px; }
.party__adds { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.party__adds:empty { display: none; }

.book { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 14px var(--sp-5); margin: 0; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.book__item { min-width: 0; }
.book__item dt { margin: 0 0 4px; color: var(--text-muted); font-size: 11px; }
.book__item dd { margin: 0; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }

/* the cargo editor: the unit drawn above its fields, and tiles that pick its type */
.wz-unit { display: grid; gap: 8px; margin: 0 calc(-1 * var(--sp-4)) 0; padding: 10px var(--sp-4) 10px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--surface), var(--surface-3)); }
.wiz-row > .wiz-row__head + .wz-unit { margin-top: calc(-1 * var(--sp-1)); border-top: 1px solid var(--border); }
.wz-unit__art { min-height: 60px; }
.wz-unit--container .wz-unit__art .fa-svg { max-width: 340px; margin: 0 auto; }
.wz-unit--package .wz-unit__art { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); }
.wz-unit--package .wz-unit__art .fa-svg { width: 104px; flex: none; }
.wz-unit__count { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--text); }
.wz-unit__count:empty { display: none; }
.wz-unit[aria-busy="true"] .wz-unit__art { opacity: 0.6; }
.wz-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 6px; }
.wz-type { display: grid; justify-items: center; gap: 1px; min-width: 0; padding: 4px 4px 5px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: 11px; cursor: pointer; }
.wz-type:hover { border-color: var(--accent); }
.wz-type[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.wz-type:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.wz-type .fa-svg { width: 58px; }
.wz-type--pkg .fa-svg { width: 40px; }
.wz-type__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
  .deck__head { align-items: flex-start; }
  .unit__art--pkg .fa-svg { width: 104px; }
}
@media (prefers-reduced-motion: no-preference) {
  .unit { transition: border-color 0.15s ease; }
  .unit:hover { border-color: var(--border-strong); }
}
.review-card__units { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin: 0 0 12px; padding: 10px 12px 8px; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, var(--surface-2), var(--surface-3)); }
.review-card__unit { display: grid; justify-items: center; gap: 2px; min-width: 0; color: var(--text-muted); font-size: var(--copilot-font-2xs); font-weight: 500; }
.review-card__unit .fa-svg { width: 104px; }
.review-card__unit--pkg .fa-svg { width: 52px; }
.review-card__unit--more { align-self: center; }
.review-card__later { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; color: var(--text-muted); font-size: var(--copilot-font-sm); }
.review-card__later .icon { flex: none; margin-top: 1px; }
/* ===== end the shipment's cargo, drawn =============================================================================== */


/* ===== Freightools master data (2026-11-10) ========================================================================== */
/* Admin → Freightools master data (src/admin/views-ft-master.ts): the Vessels page's layout — the last-load card under
   the figures, long addresses and descriptions wrapping in their cell, the refresh and CSV cards under the table with
   their own gap, and the report's list of what changed. Tokens only, so both themes work. */
.card.ftm-last { margin-bottom: var(--sp-5); }
.ftm-last > .section-head:first-child { margin-top: 0; }
.ftm-last .kv { margin: 0; }
.ftm-tbl td .ftm-wrap { display: block; white-space: normal; min-width: 18ch; max-width: 42ch; }
.card.ftm-refresh, .card.ftm-import { margin-top: var(--sp-8); }
.ftm-refresh > .section-head:first-child, .ftm-import > .section-head:first-child { margin-top: 0; }
.ftm-refresh__form { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; margin: 0; }
.ftm-refresh__form .field { margin: 0; min-width: min(100%, 320px); }
.ftm-refresh__form .actions { margin: 0; }
.ftm-import .form { margin-bottom: var(--sp-4); }
.ftm-import .actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.ftm-import .fold { margin-bottom: var(--sp-4); }
.ftm-changes { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.ftm-changes li { overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .ftm-refresh__form { flex-direction: column; align-items: stretch; }
  .ftm-refresh__form .btn, .ftm-import .actions .btn { width: 100%; justify-content: center; }
}
/* ===== end Freightools master data =================================================================================== */