/* =====================================================================
   FuelRoute — новый дизайн, шаг 1: токены, шрифт, каркас.
   Источник: дизайн-система FuelRoute (README, tokens.json, bundle.css).
   Проверено по чек-листу ui-ux-pro-max: контраст 4.5:1 в обеих темах,
   цели нажатия ≥44px, видимый фокус, aria-current, skip-link,
   reduced-motion, safe-area, 100dvh, без горизонтальной прокрутки на 375px.
   Только стили — логика приложения не меняется. Подключается последним.
   ===================================================================== */

/* ---------- токены: светлая ---------- */
:root {
  color-scheme: light;
  --canvas: #ECECEE;
  --surface: #F5F5F7;
  --card: #FFFFFF;
  --card-glass: rgba(255, 255, 255, 0.85);
  --ink: #111111;
  --ink-muted: #6B6B70;
  --on-ink: #FFFFFF;
  --logo-plate: #FFFFFF;
  --hairline: #E6E6EA;
  --field-line: #C7C7CC;
  --track: #DCDCE0;
  --stop-idle: #8E8E94;
  --fuel: #F08A3C;
  --on-fuel: #111111;
  --fuel-text: #A3480A;
  --fuel-soft: #FDEDE0;
  --fuel-pile: #F6C7A0;
  --transit: #7C3AED;
  --transit-text: #7C3AED;
  --transit-soft: #EFE8FD;
  --chart-line: #3B82F6;
  --chart-fill: rgba(59, 130, 246, 0.10);
  --success-text: #166534;
  --success-soft: #E3F4E8;
  --danger-text: #B91C1C;
  --danger-soft: #FCE8E8;
  --neutral-text: #55555B;
  --neutral-soft: #EDEDF0;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.05), 0 14px 32px rgba(0, 0, 0, 0.07);
  --shadow-float: 0 4px 12px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.08);
  --font-sans: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* движение: подъём карточки 200ms, подсказки 150ms, отклик нажатия 100ms */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 200ms;
  --dur-fast: 150ms;
  --dur-press: 100ms;
  /* слои */
  --z-rail: 50;
  --z-pop: 60;
  --z-skip: 100;
  /* размеры */
  --rail-w: 72px;
  --tap: 44px;
  --icon: 20px;
  --tabbar-h: 68px;
}

/* ---------- токены: тёмная (как в системе: фон #0F0F11, карточки #1A1A1D) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #0A0A0B;
    --surface: #0F0F11;
    --card: #1A1A1D;
    --card-glass: rgba(26, 26, 29, 0.85);
    --ink: #F2F2F4;
    --ink-muted: #9A9AA2;
    --on-ink: #111111;
    --hairline: #2A2A2E;
    --field-line: #3A3A40;
    --track: #2E2E33;
    --stop-idle: #76767E;
    --fuel-text: #F5A766;
    --fuel-soft: #3A2414;
    --fuel-pile: #8A5530;
    --transit-text: #B794F6;
    --transit-soft: #2A1F45;
    --chart-fill: rgba(59, 130, 246, 0.16);
    --success-text: #6EE7A0;
    --success-soft: #15291D;
    --danger-text: #FCA5A5;
    --danger-soft: #3A1A1A;
    --neutral-text: #B4B4BC;
    --neutral-soft: #26262A;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.28);
    --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.45), 0 14px 32px rgba(0, 0, 0, 0.45);
    --shadow-float: 0 4px 12px rgba(0, 0, 0, 0.50), 0 16px 40px rgba(0, 0, 0, 0.50);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0A0A0B;
  --surface: #0F0F11;
  --card: #1A1A1D;
  --card-glass: rgba(26, 26, 29, 0.85);
  --ink: #F2F2F4;
  --ink-muted: #9A9AA2;
  --on-ink: #111111;
  --hairline: #2A2A2E;
  --field-line: #3A3A40;
  --track: #2E2E33;
  --stop-idle: #76767E;
  --fuel-text: #F5A766;
  --fuel-soft: #3A2414;
  --fuel-pile: #8A5530;
  --transit-text: #B794F6;
  --transit-soft: #2A1F45;
  --chart-fill: rgba(59, 130, 246, 0.16);
  --success-text: #6EE7A0;
  --success-soft: #15291D;
  --danger-text: #FCA5A5;
  --danger-soft: #3A1A1A;
  --neutral-text: #B4B4BC;
  --neutral-soft: #26262A;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.45), 0 14px 32px rgba(0, 0, 0, 0.45);
  --shadow-float: 0 4px 12px rgba(0, 0, 0, 0.50), 0 16px 40px rgba(0, 0, 0, 0.50);
}

/* ---------- старые переменные приложения → новые токены (обе темы) ---------- */
:root,
:root[data-theme="dark"] {
  --bg: var(--surface);
  --panel: var(--card);
  --field: var(--surface);
  --soft: var(--surface);
  --soft2: var(--neutral-soft);
  --muted: var(--ink-muted);
  --muted-2: var(--stop-idle);
  --line: var(--hairline);
  --line-strong: var(--field-line);
  --brand: var(--ink);
  --accent: var(--ink);
  --accent-dark: var(--ink);
  --accent-soft: var(--neutral-soft);
  --accent-line: var(--field-line);
  --on-accent: var(--on-ink);
  --amber: var(--fuel);
  --amber-dark: var(--fuel);
  --amber-ink: var(--fuel-text);
  --ok: var(--success-text);
  --ok-soft: var(--success-soft);
  --ok-ink: var(--success-text);
  --warn-soft: var(--fuel-soft);
  --warn-ink: var(--fuel-text);
  --warn-line: var(--fuel-pile);
  --info-soft: var(--transit-soft);
  --info-ink: var(--transit-text);
  --danger: var(--danger-text);
  --danger-line: var(--danger-soft);
  --shadow: var(--shadow-card);
  --shadow-sm: rgba(0, 0, 0, 0.06);
  --shadow-accent: rgba(0, 0, 0, 0.06);
  --focus: rgba(17, 17, 17, 0.12);
  --backdrop: rgba(10, 10, 11, 0.45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--surface);
    --panel: var(--card);
    --field: var(--surface);
    --soft: var(--surface);
    --soft2: var(--neutral-soft);
    --muted: var(--ink-muted);
    --muted-2: var(--stop-idle);
    --line: var(--hairline);
    --line-strong: var(--field-line);
    --brand: var(--ink);
    --accent: var(--ink);
    --accent-dark: var(--ink);
    --accent-soft: var(--neutral-soft);
    --accent-line: var(--field-line);
    --on-accent: var(--on-ink);
    --amber: var(--fuel);
    --amber-dark: var(--fuel);
    --amber-ink: var(--fuel-text);
    --ok: var(--success-text);
    --ok-soft: var(--success-soft);
    --ok-ink: var(--success-text);
    --warn-soft: var(--fuel-soft);
    --warn-ink: var(--fuel-text);
    --warn-line: var(--fuel-pile);
    --info-soft: var(--transit-soft);
    --info-ink: var(--transit-text);
    --danger: var(--danger-text);
    --danger-line: var(--danger-soft);
    --focus: rgba(242, 242, 244, 0.14);
  }
}

/* ---------- 1. основа: шрифт, фон, текст ---------- */
html,
body {
  background: var(--canvas);
}
body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
}
body {
  color: var(--ink);
  font-size: 15px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* жирнее 600 не бывает: иерархия — размером и цветом */
h1, h2, h3, strong, b { font-weight: 600; }
h2 { font-weight: 500; letter-spacing: -0.01em; }
.eyebrow {
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.fr-num,
.tile strong,
.reg-table td:first-child { font-variant-numeric: tabular-nums; }

/* фокус: 2px ink с отступом — ≥16:1 на любой поверхности, в обеих темах */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }
/* старое правило гасило обводку у кнопок и строк таблицы — возвращаем */
button:focus-visible,
summary:focus-visible,
.tool:focus-visible,
.reg-row:focus-visible,
a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: none;
}
.reg-row:focus-visible td { background: var(--surface); }

/* «Перейти к содержимому» — первая остановка Tab */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: var(--z-skip);
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: none; }
#appMain:focus { outline: none; }

/* нажатия без задержки и без «прыжков» разметки */
button,
a,
summary,
label,
select,
.tool { touch-action: manipulation; }
button,
summary,
select,
.tool,
[role="button"] { cursor: pointer; }

/* ---------- 2. каркас: контейнер приложения ---------- */
body { padding: var(--space-4); }
.app-shell {
  position: relative;
  width: auto;
  max-width: none;
  min-height: calc(100dvh - 2 * var(--space-4));
  margin: 0;
  padding: var(--space-6) var(--space-6) var(--space-8) calc(var(--rail-w) + var(--space-6));
  border-radius: var(--radius-xl);
  background: var(--surface);
}

/* шапка: подпись + заголовок экрана слева, колокольчик и связь справа */
.topbar,
.topbar:is(*) {
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.topbar .brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; cursor: pointer; }
.page-title { display: block; flex: 1 1 auto; min-width: 0; text-align: left; }
.topbar .brand, .pills { flex: none; }
.page-title .eyebrow { margin: 0 0 2px; }
.page-title h1 {
  margin: 0;
  color: var(--ink);
  font-size: 32px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.pills { align-items: center; gap: var(--space-2); }
.state-pill,
button.state-pill {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--card);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}
.state-pill::before { width: 7px; height: 7px; background: var(--fuel); }
.state-pill.ready::before { background: var(--success-text); }

button.bell {
  width: var(--tap);
  height: var(--tap);
  min-height: var(--tap);
  border: 0;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
button.bell[aria-expanded="true"] { box-shadow: var(--shadow-card-hover); }
.bell-count { border-color: var(--surface); background: var(--fuel); color: var(--on-fuel); }
.bell-count.danger { background: var(--danger-text); color: var(--card); }
.bell-panel {
  z-index: var(--z-pop);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: var(--shadow-float);
}

/* ---------- 3. навигация: иконки Lucide 1.5 ---------- */
svg.lucide {
  width: var(--icon);
  height: var(--icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tabs .tab-badge,
.tabs .tab-badge:is(*) {
  position: absolute;
  min-width: 18px;
  height: 18px;
  margin: 0;
  padding: 0 5px;
  border: 2px solid var(--surface);
  border-radius: var(--radius-pill);
  background: var(--fuel);
  color: var(--on-fuel);
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
}

/* rail 72px: компьютер, планшет и телефон боком */
@media (min-width: 641px) {
  .tabs,
  .tabs:is(*) {
    position: fixed;
    top: var(--space-4);
    bottom: var(--space-4);
    left: var(--space-4);
    z-index: var(--z-rail);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    width: var(--rail-w);
    margin: 0;
    padding: var(--space-5) 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .side-brand { display: flex; justify-content: center; margin: 0 0 var(--space-6); cursor: pointer; }
  .side-brand > div { display: none; }
  .side-plate {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--logo-plate);
    box-shadow: var(--shadow-card);
  }
  .side-plate .side-logo { width: 30px; height: 30px; }
  .tabs button,
  .tabs button:is(*) {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    box-shadow: none;
    color: var(--ink);
    font-size: 0;
    transform: none;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .tabs button:hover:not(:disabled) { background: var(--card); box-shadow: none; color: var(--ink); transform: none; }
  .tabs button.active.active,
  .tabs button.active.active:hover {
    background: var(--ink);
    box-shadow: none;
    color: var(--on-ink);
  }
  .tabs button.active svg.lucide { stroke: var(--on-ink); }
  .tabs .tab-inner,
  .tabs .tab-inner:is(*) {
    position: static;
    display: grid;
    place-items: center;
    width: auto;
    height: auto;
    min-height: 0;
    gap: 0;
  }
  .tabs .tab-long,
  .tabs .tab-short { display: none !important; }
  .tabs .tab-badge,
  .tabs .tab-badge:is(*) { top: 0; right: -2px; }
  .side-foot,
  .side-foot:is(*) { display: none; }

  /* подсказка с полным названием — на hover и на фокусе с клавиатуры */
  .tabs button[aria-label]::after {
    content: attr(aria-label);
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    z-index: var(--z-pop);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: var(--ink);
    box-shadow: var(--shadow-float);
    color: var(--on-ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-4px, -50%);
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .tabs button[aria-label]:hover::after,
  .tabs button[aria-label]:focus-visible::after {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
/* телефон боком / низкий экран — меню прокручивается, а не обрезается */
@media (min-width: 641px) and (max-height: 520px) {
  .tabs,
  .tabs:is(*) { gap: 2px; padding: var(--space-3) 0; overflow-y: auto; scrollbar-width: none; }
  .side-brand { margin-bottom: var(--space-3); }
  .tabs button[aria-label]::after { display: none; }
}

/* телефон: плавающая нижняя панель, 5 разделов с подписями */
@media (max-width: 640px) {
  body { padding: 0; }
  html { scroll-padding-bottom: calc(var(--tabbar-h) + 32px + env(safe-area-inset-bottom)); }
  .app-shell {
    min-height: 100dvh;
    padding: calc(var(--space-4) + env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right))
      calc(var(--tabbar-h) + 36px + env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
    border-radius: 0;
  }
  .topbar,
  .topbar:is(*) { align-items: flex-start; margin-bottom: var(--space-5); }
  .page-title h1 { font-size: 28px; line-height: 36px; letter-spacing: -0.015em; }
  .page-title .eyebrow { font-size: 12px; line-height: 16px; }
  .pills { flex: none; }
  /* связь — в колокольчике; в шапке телефона только он */
  .pills .state-pill,
  .pills button.state-pill { display: none; }
  .topbar .brand { display: flex !important; }
  /* телефон: бренд и колокольчик в первой строке, заголовок экрана — под ними слева */
  .topbar,
  .topbar:is(*) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand pills" "title title";
    align-items: center;
    row-gap: var(--space-3);
  }
  .topbar .brand { grid-area: brand; }
  .topbar .pills { grid-area: pills; }
  .topbar .page-title { grid-area: title; }
  .side-brand,
  .side-foot { display: none !important; }

  .tabs,
  .tabs:is(*) {
    position: fixed;
    right: max(8px, env(safe-area-inset-right));
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    z-index: var(--z-rail);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    min-height: var(--tabbar-h);
    margin: 0;
    padding: 6px 4px;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--card-glass);
    box-shadow: var(--shadow-float);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .tabs button,
  .tabs button:is(*) {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 56px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    box-shadow: none;
    color: var(--ink);
    font-size: 12px;
    font-weight: 500;
    transform: none;
  }
  .tabs button:hover:not(:disabled),
  .tabs button.active.active,
  .tabs button.active.active:hover { background: transparent; box-shadow: none; transform: none; color: var(--ink); }
  .tabs .tab-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 56px;
  }
  .tabs svg.lucide {
    box-sizing: content-box;
    padding: 6px;
    border-radius: var(--radius-pill);
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .tabs button.active svg.lucide { background: var(--ink); color: var(--on-ink); }
  .tabs .tab-badge,
  .tabs .tab-badge:is(*) { top: 0; right: calc(50% - 22px); border-color: var(--card); }
  .tabs .tab-long { display: none; }
  .tabs .tab-short { display: inline; }
}

/* ---------- 4. базовые элементы ---------- */

/* карточки: без рамок, тень, 20px */
.panel,
.tile,
.plan-card,
.fleet-card,
.shift-item,
.req-files {
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.panel { padding: var(--space-5); }

/* кнопки: главная — чёрная pill 44px; вторичная — белая; ghost — без фона */
button {
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 500;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), opacity var(--dur-press) linear;
}
button,
.tool {
  min-height: var(--tap);
  border: 0;
  background: var(--card);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}
button.primary,
.primary,
button.cta,
.cta,
.tool.cta {
  border: 0;
  background: var(--ink);
  box-shadow: none;
  color: var(--on-ink);
  font-weight: 500;
}
button.ghost,
.ghost {
  background: transparent;
  box-shadow: none;
  color: var(--ink);
}
/* наведение — только там, где есть мышь (на тачскрине «залипает») */
@media (hover: hover) {
  button:hover:not(:disabled),
  .tool:hover {
    background: var(--card);
    box-shadow: var(--shadow-card-hover);
  }
  button.primary:hover:not(:disabled),
  button.cta:hover:not(:disabled),
  .tool.cta:hover {
    background: var(--ink);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
  }
  button.ghost:hover:not(:disabled) { background: var(--neutral-soft); box-shadow: none; }
}
/* отклик нажатия ≤100ms: прозрачность, без сдвига разметки */
button:active:not(:disabled),
.tool:active,
summary:active { opacity: 0.72; transform: none; transition-duration: var(--dur-press); }
button:disabled,
button[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* поля: заливка surface, внутренний контур field-line, 44px, радиус 10; фокус — 2px ink */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
  min-height: var(--tap);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--field-line);
  color: var(--ink);
  font-family: var(--font-sans);
}
@media (hover: hover) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
  select:hover,
  textarea:hover { box-shadow: inset 0 0 0 1px var(--stop-idle); }
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--ink);
}
input::placeholder,
textarea::placeholder { color: var(--ink-muted); opacity: 1; }
input[type="checkbox"],
input[type="radio"] { accent-color: var(--ink); }
label { color: var(--ink); font-weight: 500; }
/* iOS не увеличивает страницу при вводе, если текст поля ≥16px */
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea { font-size: 16px; }
}

/* статусы — pill: бледный фон, точка, слово (не только цвет) */
.badge {
  height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--neutral-soft);
  color: var(--neutral-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}
.badge::before { width: 6px; height: 6px; background: currentColor; }
.badge.live { background: var(--transit-soft); color: var(--transit-text); }
.badge.hang { background: var(--fuel-soft); color: var(--fuel-text); }
.badge.burn,
.badge.burned,
.badge.dupe { background: var(--danger-soft); color: var(--danger-text); }
.badge.done { background: var(--success-soft); color: var(--success-text); }
.badge.dead { background: var(--neutral-soft); color: var(--neutral-text); }

/* таблицы: без рамок, строки через 1px hairline, hover — surface */
.table-wrap { border: 0; border-radius: 0; background: transparent; }
.reg-table th,
table th {
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.reg-table td,
table td { border-bottom: 1px solid var(--hairline); }
@media (hover: hover) {
  .reg-table tr.reg-row:hover td { background: var(--surface); }
}

/* сегменты и фильтры: подложка surface, выбранный — белая pill */
.chips,
.sub-nav {
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface);
}
.chips button,
.sub-nav button {
  min-height: 36px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink-muted);
  font-size: 13px;
}
.chips button.active,
.sub-nav button.active {
  background: var(--card);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}
@media (max-width: 640px) {
  .chips button,
  .sub-nav button { min-height: var(--tap); }
}

/* меню «⋯ Ещё», всплывающие окна, диалоги */
.more-menu > summary {
  min-height: var(--tap);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.more-pop {
  z-index: var(--z-pop);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
}
.more-pop button { min-height: 40px; border-radius: var(--radius-sm); box-shadow: none; }
dialog {
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-float);
  color: var(--ink);
}
dialog::backdrop { background: var(--backdrop); }

/* ---------- 5. меньше движения — по настройке системы ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  button:hover:not(:disabled) { transform: none !important; }
}

/* =====================================================================
   Шаг 2 — «Реестр доверенностей» (ScreenReestr / ScreenReestrMobile)
   4 KPI-плитки · таблица + боковая колонка 320px · фильтр-сегменты ·
   на 375px — плитки 2×2 и строки-карточки внутри одной карточки.
   ===================================================================== */

#regMain:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas:
    "tiles tiles"
    "list side";
  gap: var(--space-4);
  align-items: start;
}
#regMain > .tiles { grid-area: tiles; }
#regMain > .reg-list-panel { grid-area: list; min-width: 0; }
#regMain > .batches-panel { grid-area: side; }
@media (max-width: 1100px) {
  #regMain:not([hidden]) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tiles" "list" "side";
  }
}

/* ---------- KPI-плитки (KpiTile): подпись, иконка в круге, цифра, пояснение ---------- */
.tiles,
.tiles:is(*) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 1100px) {
  .tiles,
  .tiles:is(*) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
.tile,
.tile:is(*) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  min-height: 0;
  padding: var(--space-5);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  text-align: left;
  font-weight: 400;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (hover: hover) {
  .tile:hover:not(:disabled) { background: var(--card); box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
}
/* выбранный фильтр — тонкое кольцо ink, а не цвет (цвет не единственный признак) */
.tile.selected,
.tile.selected:is(*) { box-shadow: inset 0 0 0 1.5px var(--ink), var(--shadow-card); }
.tile-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.tile .tile-label {
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile-ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
}
.tile-ico svg.lucide { width: 16px; height: 16px; }
.tile-value { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.tile strong,
.tile.hang strong,
.tile.burn strong,
.tile.done strong {
  color: var(--ink);
  font-size: 28px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.tile .tile-of { color: var(--ink-muted); font-size: 15px; font-weight: 500; }
.tile .tile-of:empty { display: none; }
.tile .tile-sub {
  min-height: 16px;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile .tile-sub.warn { color: var(--fuel-text); }

/* штриховая шкала (HatchProgress): 2px полоска, 2px просвет; значение продублировано текстом */
.hatch {
  --pct: 0%;
  position: relative;
  display: block;
  width: 100%;
  height: 20px;
  background: repeating-linear-gradient(90deg, var(--track) 0 2px, transparent 2px 4px);
}
.hatch::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pct);
  background: repeating-linear-gradient(90deg, var(--fuel) 0 2px, transparent 2px 4px);
  transition: width 600ms var(--ease);
}

/* ---------- боковая колонка: «Чистые бланки · Пачки доверок» ---------- */
.batches-panel .fold-head,
.batches-panel .fold-head:is(*) { align-items: flex-start; }
.batches-panel .fold-title h2::before {
  content: "Чистые бланки";
  display: block;
  margin-bottom: 2px;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.batches-panel .fold-title h2 { font-size: 20px; line-height: 28px; font-weight: 500; }
/* главная кнопка экрана — в таблице; здесь «+ Пачка» вторичная (белая) */
.batches-panel #batchAddToggle,
.batches-panel #batchAddToggle:is(*) {
  min-height: 36px;
  padding: 0 14px;
  background: var(--card);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  font-size: 13px;
}
.batch-stock { gap: var(--space-2); }
.stock-chip,
.stock-chip:is(*) {
  flex: 1 1 100%;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface);
}
.stock-chip strong,
.stock-chip:is(*) strong { color: var(--ink); font-size: 22px; line-height: 28px; font-weight: 500; font-variant-numeric: tabular-nums; }
.stock-chip span { font-weight: 500; }
.stock-chip small { color: var(--ink-muted); }
.batch-stock .hint { color: var(--ink-muted); }

/* ---------- таблица доверенностей: тулбар, сегменты, строки ---------- */
.reg-list-panel .reg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
/* сегменты статусов снова видны — как в системе; плитки остаются быстрыми фильтрами */
#regFilters [data-filter="active"],
#regFilters [data-filter="hang"],
#regFilters [data-filter="burn"],
#regFilters [data-filter="done"] { display: inline-flex; }
#regFilters,
#regFilters:is(*) {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 100%;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface);
}
#regFilters button {
  align-items: center;
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
}
#regFilters .chip-warn,
#regFilters .chip-warn:is(*) { color: var(--danger-text); }
.reg-list-panel .reg-toolbar select,
.reg-list-panel .reg-toolbar input { flex: 1 1 140px; width: auto; min-width: 0; }
.reg-list-panel .reg-toolbar #regContractor { flex: 0 1 200px; }
.reg-list-panel .reg-toolbar .reg-more { flex: none; }
.reg-list-panel .reg-toolbar input[type="search"] {
  border-radius: var(--radius-pill);
  padding-left: 16px;
}

#regBody td,
#regBody td:nth-child(n) {
  padding: 12px;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
  line-height: 20px;
  vertical-align: middle;
}
.reg-list-panel .reg-table th { padding: 10px 12px; font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; }
.reg-list-panel .reg-table th:first-child,
#regBody td:first-child { padding-left: 0; }
#regBody td:first-child strong { font-weight: 500; font-variant-numeric: tabular-nums; }
#regBody td:nth-child(3) > div { font-weight: 500; }
#regBody td small { display: block; color: var(--ink-muted); font-size: 12px; line-height: 16px; }
#regBody td:nth-child(4),
#regBody td:nth-child(5) { font-variant-numeric: tabular-nums; white-space: nowrap; }
#regBody .badge { white-space: nowrap; }

/* заголовок дня в таблице — тихая строка на surface */
#regBody tr.grp-row td { padding: 0; background: transparent; border-bottom: 1px solid var(--hairline); }
#regBody button.grp-btn {
  min-height: 40px;
  padding: 0 4px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
}
#regBody .grp-meta { font-size: 12px; font-weight: 400; }

/* ---------- 375px: карточки 2×2, строки-карточки внутри одной карточки ---------- */
@media (max-width: 640px) {
  .tiles,
  .tiles:is(*) { gap: var(--space-3) !important; }
  .tile,
  .tile:is(*) { gap: var(--space-2); padding: var(--space-4); }
  .tile strong,
  .tile.hang strong,
  .tile.burn strong,
  .tile.done strong { font-size: 22px; line-height: 28px; }
  .tile .tile-label { white-space: normal; }
  .tile .tile-sub { white-space: normal; }
  .tile-ico { width: 32px; height: 32px; }
  .hatch { height: 12px; }
  .reg-list-panel,
  .batches-panel { padding: var(--space-4); }

  .reg-list-panel .reg-toolbar #regContractor { flex: 1 1 100%; }
  .reg-list-panel .reg-toolbar input[type="search"] { flex: 1 1 0; }
  #regFilters,
  #regFilters:is(*) { width: 100%; }
  #regFilters button { flex: 0 0 auto; height: 36px; min-height: 36px; }

  /* строки — без отдельных рамок, разделены hairline (как .fr-table--stack) */
  #regBody tr.reg-row,
  #regBody tr.reg-row:is(*) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    margin: 0;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--hairline);
    border-radius: 0;
    background: transparent;
  }
  #regBody tr.reg-row td,
  #regBody tr.reg-row td:nth-child(n) { display: block; padding: 0; border: 0; background: transparent; }
  #regBody tr.reg-row td::before { display: none; }
  /* № слева, контрагент справа */
  #regBody tr.reg-row td:nth-child(1) { grid-row: 1; grid-column: 1; font-size: 15px; }
  #regBody tr.reg-row td:nth-child(2) { grid-row: 1; grid-column: 2; justify-self: end; color: var(--ink); font-size: 14px; font-weight: 500; }
  /* держатель и госномера — на всю ширину */
  #regBody tr.reg-row td:nth-child(3) { grid-row: 2; grid-column: 1 / -1; }
  #regBody tr.reg-row td:nth-child(3) > div,
  #regBody tr.reg-row td:nth-child(3) small { display: block; margin: 0; }
  /* дата слева, статус справа */
  #regBody tr.reg-row td:nth-child(4) { grid-row: 3; grid-column: 1; align-self: center; color: var(--ink); font-size: 14px; }
  #regBody tr.reg-row td:nth-child(4)::before { display: inline; content: "прогр. "; color: var(--ink-muted); font-size: 12px; font-weight: 400; }
  #regBody tr.reg-row td:nth-child(5) { display: none; }
  #regBody tr.reg-row td:nth-child(6) { grid-row: 3; grid-column: 2; justify-self: end; align-self: center; }
  #regBody tr.reg-row td:nth-child(7) { grid-row: 4; grid-column: 1 / -1; color: var(--ink-muted); font-size: 12px; }
  #regBody tr.reg-row td:nth-child(7):empty { display: none; }
  #regBody tr.grp-row,
  #regBody tr.grp-row:is(*) { margin: 0; padding: 0; border: 0; background: transparent; }
  #regBody button.grp-btn,
  #regBody button.grp-btn:is(*) { min-height: var(--tap); padding: 0; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; background: transparent; }
}

/* боковая колонка на широком экране: пачки всегда раскрыты, заголовок слева, «+ Пачка» справа */
.batches-panel .fold-head .fold-title { flex: 1 1 0; min-width: 0; order: 0; }
@media (min-width: 1101px) {
  #regMain > .batches-panel .fold-btn { display: none; }
  #regMain > .batches-panel [data-fold-body][hidden] { display: grid; }
  #regMain > .batches-panel.folded { padding: var(--space-5); }
  #regMain > .batches-panel .fold-head,
  #regMain > .batches-panel .fold-head:is(*) { flex-wrap: wrap; }
  #regMain > .batches-panel .batch-stock { flex: 1 1 100%; order: 3; }
}
/* пачки: заголовок и «+ Пачка» в строку, остатки бланков — ниже на всю ширину */
.batches-panel .fold-head .fold-title { display: contents; }
.batches-panel .fold-head h2 { flex: 1 1 0; min-width: 0; margin: 0; }
.batches-panel .fold-head .batch-stock { flex: 1 1 100%; order: 3; }
.batches-panel .fold-head .fold-btn { order: 2; }
.batches-panel .fold-head,
.batches-panel .fold-head:is(*) { flex-wrap: wrap; align-items: center; }

/* =====================================================================
   Шаг 3 — «Заявки» (ScreenZayavki)
   Компьютер ≥1100px: две колонки — слева ① Файлы ② Параметры
   ③ Доверенности, справа предпросмотр, проверка и список. Все шаги сразу.
   Уже 1100px — мастер по шагам (как было), в новом оформлении.
   ===================================================================== */

#tabRequests.req-wizard { max-width: none; gap: var(--space-4); counter-reset: reqsec; }

/* заголовки секций с номером в чёрном круге: «1 Файлы», «2 Параметры», «3 Доверенности» */
.req-files-title,
.req-step-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
}
/* «Файлы»: строка-сводка и зоны загрузки XLSX */
.req-files.panel { padding: 0; }
.req-files > summary { padding: var(--space-5); }
.req-chip { height: 24px; display: inline-flex; align-items: center; padding: 0 10px; font-size: 12px; font-weight: 500; background: var(--fuel-soft); color: var(--fuel-text); }
.req-chip.ok { background: var(--success-soft); color: var(--success-text); }
.req-files-toggle { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--stop-idle); font-weight: 500; }
.req-files-body { padding: 0 var(--space-5) var(--space-5); border-top: 0; gap: var(--space-4); }
.req-files-body .field:first-child { margin-top: 0; }
.req-files-body .field > label { font-size: 13px; line-height: 18px; font-weight: 500; }

/* зона выбора файла (.fr-drop): заливка surface, тонкий контур, кнопка-пилюля */
#tabRequests input[type="file"] {
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--field-line);
  color: var(--ink-muted);
  font: 400 13px/18px var(--font-sans);
  cursor: pointer;
}
#tabRequests input[type="file"]::file-selector-button {
  height: 36px;
  margin-right: var(--space-3);
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--card);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  font: 500 13px/18px var(--font-sans);
  cursor: pointer;
}
#tabRequests input[type="file"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) {
  #tabRequests input[type="file"]:hover { box-shadow: inset 0 0 0 1px var(--stop-idle); }
}
#tabRequests .hint { color: var(--ink-muted); font-size: 12px; line-height: 16px; }

/* «Настройка листа «дов.»» — тихая раскрывашка */
#tabRequests .advanced { border: 0; border-top: 1px solid var(--hairline); border-radius: 0; background: transparent; padding: var(--space-3) 0 0; }
#tabRequests .advanced summary { font-size: 14px; font-weight: 500; }

/* режим: сегменты — белая pill на подложке surface */
#tabRequests .segmented {
  display: flex;
  gap: 2px;
  padding: 4px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
}
#tabRequests .segmented label { flex: 1 1 0; font-weight: 500; }
#tabRequests .segmented span {
  min-height: 36px;
  border-radius: var(--radius-pill);
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 500;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
#tabRequests .segmented input:checked + span { background: var(--card); box-shadow: var(--shadow-card); color: var(--ink); }
#tabRequests .segmented input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

/* шаг «Доверенности»: пачка, кнопки, строки */
#tabRequests textarea { min-height: 120px; padding: 12px 14px; border-radius: var(--radius-md); line-height: 22px; }
#parseBatch,
#clearRows,
#addRow { min-height: 36px; padding: 0 14px; font-size: 13px; }
#clearRows { background: transparent; box-shadow: none; }
#tabRequests .row-editor-head h2 { font-size: 15px; font-weight: 500; }
#tabRequests .record-row { gap: var(--space-2); }
#tabRequests .icon-button {
  width: var(--tap);
  min-width: var(--tap);
  height: var(--tap);
  background: transparent;
  box-shadow: none;
  color: var(--ink-muted);
}
@media (hover: hover) {
  #tabRequests .icon-button:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger-text); box-shadow: none; }
}

/* предпросмотр: заголовок с числом, «Проверить» (вторичная) и «Сформировать файл» (главная) */
#tabRequests .preview-panel { padding: var(--space-5); }
#tabRequests .preview-head .eyebrow { font-size: 13px; }
#previewTitle { margin: 2px 0 0; font-size: 28px; line-height: 36px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
#checkRequest { background: var(--card); box-shadow: var(--shadow-card); }

/* проверка заявки: строки на surface, знак в круге */
#tabRequests .check-panel { margin-top: var(--space-4); padding: 0; border: 0; border-radius: 0; background: transparent; }
#tabRequests .check-panel h3 { font-size: 17px; line-height: 24px; font-weight: 500; }
#tabRequests .check-list { gap: var(--space-2); }
#tabRequests .check-item {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface);
}
#tabRequests .check-mark { width: 28px; height: 28px; font-size: 13px; font-weight: 600; }
#tabRequests .check-item.ok .check-mark { background: var(--success-soft); color: var(--success-text); }
#tabRequests .check-item.error .check-mark { background: var(--danger-soft); color: var(--danger-text); }
#tabRequests .check-item strong { font-size: 14px; line-height: 20px; font-weight: 500; }
#tabRequests .check-item p { margin-top: 0; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
#tabRequests .message { border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); background: var(--success-soft); color: var(--success-text); font-size: 13px; }
#tabRequests .message.error { background: var(--danger-soft); color: var(--danger-text); }
#tabRequests .download-link { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 18px; border-radius: var(--radius-pill); background: var(--ink); color: var(--on-ink); font-weight: 500; text-decoration: none; }
#tabRequests .download-link[hidden] { display: none; }

/* таблица позиций */
#tabRequests .preview-panel table { min-width: 0; }
#tabRequests .preview-panel th { padding: 10px 12px; font-size: 12px; font-weight: 500; }
#tabRequests .preview-panel td { padding: 12px; font-size: 14px; }
#tabRequests .preview-panel th:first-child,
#tabRequests .preview-panel td:first-child { padding-left: 0; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* шаги (уже 1100px): степпер — белые карточки, текущий шаг с кольцом ink */
.req-stepper button { border: 0; background: var(--card); box-shadow: var(--shadow-card); border-radius: var(--radius-lg); min-height: 64px; }
.req-stepper li.current button { box-shadow: inset 0 0 0 1.5px var(--ink), var(--shadow-card); }
.req-stepper li.current b { background: var(--ink); color: var(--on-ink); }
.req-stepper li.done b { background: var(--success-soft); color: var(--success-text); }
.req-stepper b { font-weight: 600; }
.req-stepper span { font-weight: 500; }
.req-nav .primary { min-width: 0; padding: 0 20px; }

/* ---------- компьютер: две колонки, все шаги видны ---------- */
@media (max-width: 640px) {
  #tabRequests .preview-head { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  #tabRequests .preview-actions { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
  #tabRequests .preview-actions button { width: 100%; white-space: nowrap; }
  #tabRequests .preview-actions #generateFile { order: -1; }
  /* таблица позиций — стопкой: № и номер, водитель справа, данные второй строкой */
  #tabRequests .preview-panel .table-wrap,
  #tabRequests .preview-panel table { overflow: visible; }
  #tabRequests .preview-panel thead { display: none; }
  #tabRequests .preview-panel tbody tr {
    display: grid;
    grid-template-columns: 24px auto minmax(0, 1fr);
    gap: 2px var(--space-2);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--hairline);
  }
  #tabRequests .preview-panel tbody td { padding: 0; border: 0; }
  #tabRequests .preview-panel tbody td:nth-child(3) { text-align: right; overflow-wrap: anywhere; }
  #tabRequests .preview-panel tbody td:nth-child(4) { grid-column: 2 / -1; font-size: 13px; line-height: 18px; color: var(--ink-muted); overflow-wrap: anywhere; }
  #tabRequests .preview-panel tbody td:nth-child(5) { display: none; }
  .req-files > summary { padding: var(--space-4); }
  .req-files-body { padding: 0 var(--space-4) var(--space-4); }
  #tabRequests .record-row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) var(--tap); }
}
#tabRequests .advanced summary { min-height: var(--tap); display: flex; align-items: center; }

/* =====================================================================
   Шаг 4 — «Рейсы» (ScreenReisy)
   Подвкладки остаются (Входящие · Реестр рейсов · Планы вывоза · Из MAX),
   внутри — как в дизайн-системе: карточки планов с двухслойной штриховой
   шкалой, входящие с подсветкой выбранных, реестр с KPI на surface.
   ===================================================================== */

/* подвкладки на телефоне переносятся, а не обрезаются */
@media (max-width: 640px) {
  #tripsMain .sub-nav,
  #tripsMain .sub-nav:is(*) { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; overflow: visible; border-radius: var(--radius-lg); }
  #tripsMain .sub-nav button { justify-content: center; }
  .plans-panel .section-head,
  .plans-panel .section-head:is(*) { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
}

/* ---------- Планы вывоза: сами карточки на холсте ---------- */
.plans-panel,
.plans-panel:is(*) { padding: 0; background: transparent; box-shadow: none; border: 0; }
.plans-panel .section-head { margin-bottom: var(--space-1); }
#planAdd { background: var(--card); color: var(--ink); box-shadow: var(--shadow-card); }
@media (hover: hover) { #planAdd:hover { box-shadow: var(--shadow-card-hover); } }
#plansEmpty { padding: var(--space-5); border-radius: var(--radius-xl); background: var(--card); box-shadow: var(--shadow-card); }
.plans-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: var(--space-4); }
.plan-closed-toggle,
.plan-closed-toggle:is(*) {
  grid-column: 1 / -1;
  min-height: var(--tap);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--stop-idle);
  font-weight: 500;
}

.plan-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.plan-card.is-complete { border: 0; box-shadow: inset 0 0 0 1.5px var(--success-text), var(--shadow-card); }
.plan-card.is-closed { opacity: 1; background: var(--surface); box-shadow: none; color: var(--ink-muted); }
/* мета (заказчик · с даты) над маршрутом */
.plan-card-head > div:first-child { display: flex; flex-direction: column-reverse; gap: 2px; min-width: 0; }
.plan-route { font-size: 17px; line-height: 24px; font-weight: 500; overflow-wrap: anywhere; }
.plan-meta { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.plan-late { color: var(--danger-text); font-weight: 500; }
.plan-actions { gap: var(--space-2); flex-wrap: nowrap; }
.plan-actions button { min-height: 36px; padding: 0 12px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.plan-actions button:last-child:not(.primary):not(.danger-text) { background: var(--card); box-shadow: var(--shadow-card); }
.plan-actions .danger-text { color: var(--danger-text); }

/* легенда · процент / двухслойная штриховая шкала */
.plan-progress {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas: "l1 l2 . pct" "bar bar bar bar";
  align-items: end;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0;
}
.plan-progress::before,
.plan-progress::after {
  padding-left: 14px;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 16px;
  background: linear-gradient(var(--fuel), var(--fuel)) left center / 8px 8px no-repeat;
}
.plan-progress::before { content: "вывезено"; grid-area: l1; }
.plan-progress::after { content: "на проверке"; grid-area: l2; background-image: linear-gradient(var(--transit), var(--transit)); }
.plan-pct { grid-area: pct; min-width: 0; font-size: 22px; line-height: 28px; font-weight: 500; font-variant-numeric: tabular-nums; }
.plan-bar {
  grid-area: bar;
  height: 20px;
  border-radius: 0;
  background: repeating-linear-gradient(90deg, var(--track) 0 2px, transparent 2px 4px);
}
.plan-bar-done { background: repeating-linear-gradient(90deg, var(--fuel) 0 2px, transparent 2px 4px); }
.plan-bar-pending { background: repeating-linear-gradient(90deg, var(--transit) 0 2px, transparent 2px 4px); }
.plan-card.is-complete .plan-bar-done { background: repeating-linear-gradient(90deg, var(--success-text) 0 2px, transparent 2px 4px); }
.plan-card.is-closed .plan-progress::before,
.plan-card.is-closed .plan-progress::after { display: none; }

/* четыре показателя */
.plan-stats { gap: var(--space-2); }
.plan-stat { gap: 2px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface); }
.plan-card.is-closed .plan-stat { background: var(--card); }
.plan-stat-label { color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.plan-stat strong { font-size: 22px; line-height: 28px; font-weight: 500; font-variant-numeric: tabular-nums; }
.plan-stat-sub { color: var(--ink-muted); font-size: 12px; line-height: 16px; }
.plan-stat-left,
.plan-stat-left:is(*) { background: var(--fuel-soft); }
.plan-stat-left strong,
.plan-stat-left .plan-stat-label,
.plan-stat-left .plan-stat-sub { color: var(--fuel-text); }
.plan-drivers { margin: var(--space-4) 0 0; font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.plan-drivers-label { color: var(--ink); font-weight: 500; }

/* форма плана — своя карточка */
.plan-form,
.plan-form:is(*) { margin-bottom: var(--space-4); padding: var(--space-5); border: 0; border-radius: var(--radius-xl); background: var(--card); box-shadow: var(--shadow-card); }
.plan-form h3 { font-size: 17px; line-height: 24px; font-weight: 500; }
.plan-form-grid { gap: var(--space-3) var(--space-4); }
.plan-form-grid label { gap: 6px; color: var(--ink-muted); font-size: 13px; font-weight: 500; }
.plan-form-grid :is(input, select) { font-size: 14px; }
@media (max-width: 640px) { .plan-form-grid :is(input, select) { font-size: 16px; } }

/* ---------- Входящие ---------- */
.inbox-panel,
.inbox-panel:is(*) { border: 0; }
.inbox-all { min-height: var(--tap); font-weight: 500; }
#tabTrips input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--ink); cursor: pointer; }
#inboxBody td { vertical-align: top; }
#inboxBody td:first-child { width: 44px; }
#inboxBody td:nth-child(3) strong { font-weight: 500; font-variant-numeric: tabular-nums; }
#inboxBody td:nth-child(4) > div { font-weight: 500; }
#inboxBody td small { color: var(--ink-muted); font-size: 12px; line-height: 16px; }
#inboxBody td:nth-child(6),
#inboxBody td:nth-child(7) { font-variant-numeric: tabular-nums; }
#inboxBody td:nth-child(7) { text-align: right; }
.inbox-table th:nth-child(7) { text-align: right; }
#inboxBody tr:has(input:checked) td { background: var(--fuel-soft); }
/* действия: причина отказа · «Отклонить» · «Принять» справа */
.inbox-actions { display: flex; align-items: center; gap: var(--space-2); }
.inbox-actions #inboxNote { order: 1; flex: 1 1 220px; }
.inbox-actions #inboxReject { order: 2; }
.inbox-actions #inboxAccept { order: 3; }

/* ---------- Реестр рейсов ---------- */
.trip-log-panel .section-head .inline-actions { gap: var(--space-2); }
#logApplyRoutes { background: transparent; box-shadow: none; }
#logExcel,
#logExcel:is(*) { background: var(--card); color: var(--ink); box-shadow: var(--shadow-card); }
@media (hover: hover) { #logExcel:hover { box-shadow: var(--shadow-card-hover); } }
.log-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.log-toolbar select { flex: 0 1 240px; min-width: 0; }
.log-toolbar input[type="search"] { flex: 1 1 200px; min-width: 0; border-radius: var(--radius-pill); }
.log-custom { display: flex; align-items: center; gap: var(--space-2); }

/* KPI на surface: подпись сверху, число крупно */
.log-tiles,
.log-tiles:is(*) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.log-tiles .tile,
.log-tiles .tile:is(*) {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 2px;
  min-height: 0;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
}
.log-tiles .tile span { color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.log-tiles .tile span::first-letter { text-transform: uppercase; }
.log-tiles .tile strong,
.log-tiles .tile:is(*) strong { color: var(--ink); font-size: 28px; line-height: 32px; font-weight: 500; font-variant-numeric: tabular-nums; }
.log-tiles .tile.hang:not(.is-zero) { background: var(--fuel-soft); }
.log-tiles .tile.hang:not(.is-zero) span,
.log-tiles .tile.hang:not(.is-zero) strong { color: var(--fuel-text); }

#logBody td { font-variant-numeric: tabular-nums; }
#logBody td:nth-child(2) { font-weight: 500; }
#logBody td small { display: block; color: var(--ink-muted); font-size: 12px; line-height: 16px; }
@media (min-width: 641px) {
  #logBody td:nth-child(7),
  .log-table th:nth-child(6),
  .log-table th:nth-child(7) { text-align: right; }
  #logBody td:nth-child(7) { white-space: nowrap; }
}
/* заголовок дня — тихая строка, как в реестре доверенностей */
#logBody tr.grp-row td { padding: 0; background: transparent; border-bottom: 1px solid var(--hairline); }
#logBody button.grp-btn { min-height: 40px; padding: 0 4px; border-radius: 0; background: transparent; box-shadow: none; font-size: 13px; font-weight: 500; }
#logBody .grp-meta { font-size: 12px; font-weight: 400; }

/* ---------- Из MAX ---------- */
.trips-panel textarea { min-height: 160px; padding: 12px 14px; border-radius: var(--radius-md); line-height: 22px; }
#parseTrips,
#copyExcel { background: var(--card); box-shadow: var(--shadow-card); }
#clearTrips { background: transparent; box-shadow: none; }
#tripBody td:nth-child(2) strong { font-weight: 500; }
#tripBody td small { color: var(--ink-muted); }

/* ---------- 375px ---------- */
@media (max-width: 1100px) {
  .log-tiles,
  .log-tiles:is(*) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .plan-card { padding: var(--space-4); }
  .plan-card-head { gap: var(--space-2); }
  .plan-actions { justify-content: flex-start; margin-left: -12px; }
  .plan-actions button { min-height: var(--tap); }
  .plan-progress { grid-template-columns: auto 1fr auto; grid-template-areas: "l1 l2 pct" "bar bar bar"; gap: var(--space-2) var(--space-3); }
  .plan-stat strong { font-size: 20px; }
  .plan-form-grid { grid-template-columns: 1fr; }

  /* шапки панелей: заголовок, под ним кнопки в ряд */
  .trip-log-panel .section-head .inline-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .trip-log-panel .section-head #logApplyRoutes { grid-column: 1 / -1; order: 3; }
  .trip-log-panel .section-head #logExcel { order: 2; }
  .trip-log-panel .section-head .inline-actions button { padding: 0 12px; white-space: nowrap; }
  .log-toolbar select { flex: 1 1 100%; }
  .log-toolbar #logPeriod,
  .log-toolbar input[type="search"],
  .log-custom { flex: 1 1 100%; }
  .log-custom input { flex: 1 1 0; min-width: 0; }
  .log-tiles .tile strong,
  .log-tiles .tile:is(*) strong { font-size: 22px; line-height: 28px; }

  /* строки рейсов и входящих — без рамок, через hairline (как .fr-table--stack) */
  #logBody tr.reg-row,
  #logBody tr.reg-row:is(*) {
    gap: 2px 12px;
    margin: 0;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--hairline);
    border-radius: 0;
    background: transparent;
  }
  #logBody tr.reg-row td:nth-child(2) { font-weight: 500; }
  #logBody tr.reg-row td:nth-child(6) { font-weight: 500; text-align: right; }
  #logBody tr.reg-row td:nth-child(6)::after { font-weight: 400; color: var(--ink-muted); }
  #logBody tr.grp-row,
  #logBody tr.grp-row:is(*) { margin: 0; padding: 0; border: 0; background: transparent; }
  #logBody button.grp-btn,
  #logBody button.grp-btn:is(*) { min-height: var(--tap); padding: 0; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; background: transparent; }

  #inboxBody tr,
  #inboxBody tr:is(*) {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 2px 12px;
    margin: 0;
    padding: 12px 8px;
    border: 0;
    border-bottom: 1px solid var(--hairline);
    border-radius: 0;
    background: transparent;
  }
  #inboxBody tr:has(input:checked) { background: var(--fuel-soft); border-radius: var(--radius-md); }
  #inboxBody tr:has(input:checked) td { background: transparent; }
  #inboxBody td,
  #inboxBody td:nth-child(n) { display: block; width: auto; padding: 0; border: 0; }
  #inboxBody td::before { display: none; }
  #inboxBody td:nth-child(1) { grid-row: 1 / span 4; grid-column: 1; width: auto; padding-top: 2px; }
  #inboxBody td:nth-child(3) { grid-row: 1; grid-column: 2; }
  #inboxBody td:nth-child(3) small { display: inline; margin-left: 6px; }
  #inboxBody td:nth-child(7) { grid-row: 1; grid-column: 3; font-weight: 500; }
  #inboxBody td:nth-child(7):not(:empty)::after { content: " т"; font-weight: 400; color: var(--ink-muted); }
  #inboxBody td:nth-child(4) { grid-row: 2; grid-column: 2 / -1; }
  #inboxBody td:nth-child(5) { grid-row: 3; grid-column: 2 / -1; font-size: 13px; }
  #inboxBody td:nth-child(2) { grid-row: 4; grid-column: 2; font-size: 13px; color: var(--ink-muted); }
  #inboxBody td:nth-child(6) { grid-row: 4; grid-column: 3; font-size: 13px; color: var(--ink-muted); text-align: right; }
  #inboxBody td:nth-child(6)::before { display: inline; content: "ТТН "; }
  #inboxBody td:nth-child(8) { grid-row: 5; grid-column: 2 / -1; margin-top: 4px; }
  #inboxBody td:nth-child(8) .badge { white-space: nowrap; }
  .inbox-actions { flex-wrap: wrap; }
  .inbox-actions #inboxAccept { order: 0; flex: 1 1 100%; }
  .inbox-actions #inboxNote { flex: 1 1 100%; }
  .inbox-actions #inboxReject { flex: 1 1 100%; }

  /* карточки-таблицы во «Из MAX» и остальных разделах: surface, без пунктира */
  .reg-table tr { border: 0; border-radius: var(--radius-md); background: var(--surface); padding: var(--space-2) var(--space-4); }
  .reg-table td,
  .reg-table td:nth-child(n) { border-top: 1px solid var(--hairline); }
  .reg-table td:first-child { border-top: 0; }
  .reg-table td::before { color: var(--ink-muted); font-weight: 500; }
  .trips-panel .inline-actions button { flex: 1 1 auto; }
}

/* =====================================================================
   Шаг 5 — «Подбор машин» (ScreenPodbor)
   Подписи над полями, маршрут — один раз в форме, а не в каждом варианте.
   ===================================================================== */
.fleet-bar .fleet-plan span,
.fleet-route label { color: var(--ink-muted); font-size: 13px; line-height: 18px; font-weight: 500; }
.fleet-route { align-items: flex-end; gap: var(--space-3); }
.fleet-route label,
.fleet-route label:is(*) { flex-direction: column; align-items: stretch; gap: 6px; }
.fleet-route select,
.fleet-bar select { font-weight: 400; }
.fleet-route select,
.fleet-route select:is(*) { margin-left: 0; }
.fleet-route-arrow { align-self: flex-end; padding-bottom: 12px; }
/* маршрут уже выбран в форме выше — в карточках вариантов не повторяем */
.fleet-card .fleet-route-line { display: none; }
@media (max-width: 640px) {
  .fleet-route { gap: var(--space-3); }
  .fleet-route label > :first-child { min-width: 0; }
}

/* =====================================================================
   Шаг 6 — «Справочники» (ScreenSprav)
   Разделы — одна строка; на телефоне строки справочника в две строки, как в реестре.
   ===================================================================== */
@media (max-width: 640px) {
  .dir-nav,
  .dir-nav:is(*) {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--space-4));
    padding-inline: var(--space-4);
  }
  .dir-nav::-webkit-scrollbar { display: none; }
  .dir-nav button,
  .dir-nav button:is(*) { flex: 0 0 auto; min-height: var(--tap); padding-inline: var(--space-4); font-size: 14px; overflow: visible; }

  #dirBody tr,
  #dirBody tr:is(*) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--space-3);
    margin: 0;
    padding: var(--space-3) 0;
    border: 0;
    border-bottom: 1px solid var(--hairline);
    border-radius: 0;
    background: transparent;
  }
  #dirBody td,
  #dirBody td:nth-child(n) {
    display: inline;
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    padding: 0;
    border: 0;
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 18px;
  }
  #dirBody td::before { content: attr(data-label) " "; font-size: 13px; font-weight: 400; color: var(--ink-muted); opacity: 0.75; }
  #dirBody td:first-child .dir-sub { display: inline; margin-left: 6px; color: var(--ink-muted); font-size: 13px; font-weight: 400; }
  #dirBody td:first-child { flex: 1 1 100%; color: var(--ink); font-size: 15px; line-height: 22px; }
  #dirBody td:first-child::before,
  #dirBody td[data-label=""]::before { content: none; }
  #dirBody td[data-label=""]:not(:empty) { display: inline; }
}

/* =====================================================================
   «Рейсы» на телефоне: заказчик и водитель — за кнопкой «Фильтры»
   ===================================================================== */
.log-filters-btn { display: none; }
@media (max-width: 640px) {
  #tripsMain .sub-nav,
  #tripsMain .sub-nav:is(*) {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #tripsMain .sub-nav::-webkit-scrollbar { display: none; }
  #tripsMain .sub-nav button { flex: 0 0 auto; white-space: nowrap; }

  /* период — во всю ширину; ниже поиск и «Фильтры» в одну строку; заказчик и водитель — под ними */
  .log-toolbar input[type="search"],
  .log-toolbar input[type="search"]:is(*) { order: 1; flex: 1 1 0; min-width: 0; }
  .log-toolbar #logCustomer,
  .log-toolbar #logDriver { order: 3; }
  .log-filters-btn,
  .log-filters-btn:is(*) {
    display: inline-flex;
    order: 2;
    flex: 0 0 auto;
    align-items: center;
    min-height: var(--tap);
    padding: 0 var(--space-4);
    border: 1px solid var(--field-line);
    border-radius: var(--radius-pill);
    background: var(--card);
    color: var(--ink);
    font-weight: 500;
    white-space: nowrap;
  }
  .log-toolbar:not(.filters-open) #logCustomer,
  .log-toolbar:not(.filters-open) #logDriver { display: none; }
}

/* ---------- «Сегодня»: карточки сводки в стиле плиток реестра ---------- */
.today { padding: 0; }
.today-grid { gap: var(--space-4); align-items: start; }
.today .card {
  gap: var(--space-3);
  padding: var(--space-5);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.today .card-label {
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.today .card-value {
  color: var(--ink);
  font-size: 28px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.today .card-status-inner { gap: var(--space-3); margin-top: 0; }
.today .status-label { color: var(--ink-muted); font-size: 12px; font-weight: 400; }
.today .status-value { color: var(--ink); font-size: 22px; line-height: 28px; font-weight: 500; font-variant-numeric: tabular-nums; }
.today #cardShift { grid-column: 1 / -1; }
/* «На смене»: сводка слева, экипажи плитками — госномер сверху, водитель под ним */
.today #cardShift { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.crew-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.crew-sum { display: flex; align-items: baseline; gap: var(--space-3); }
.crew-cars { color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.crew-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.crew-item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface); }
.crew-plate { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid var(--field-line); border-radius: 6px; background: var(--card); color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crew-plate.is-none { border-style: dashed; color: var(--ink-muted); font-weight: 400; letter-spacing: 0; }
.crew-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; }
.crew-name { color: var(--ink); font-size: 15px; line-height: 20px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-meta { color: var(--ink-muted); font-size: 12px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-meta:empty { display: none; }
.crew-empty { color: var(--ink-muted); font-size: 14px; line-height: 20px; padding: var(--space-3) 0; }
#themeBtn svg.lucide { stroke: currentColor; }
/* три карточки в ряд; «Статус» и «На смене» — на всю ширину, по тем же боковым границам */
@media (min-width: 641px) {
  .today-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .today #cardStatus { grid-column: 1 / -1; }
  .today .card-status-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .today-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .today .card { padding: var(--space-4); border-radius: var(--radius-md); }
  .today .card-value { font-size: 24px; line-height: 28px; }
  .today #cardStatus { grid-column: 1 / -1; }
  .today .card-status-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
  .today .status-label { font-size: 11px; }
  /* на телефоне — список: номер слева, водитель справа */
  .today #cardShift { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .crew-head { flex-direction: row; align-items: baseline; justify-content: space-between; }
  .crew-sum { flex-direction: row; align-items: baseline; gap: var(--space-2); }
  .crew-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .crew-item { flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-radius: 0; background: none; border-top: 1px solid var(--hairline); }
  .crew-plate { flex: 0 0 116px; justify-content: center; }
}