/* =========================================
   PRODUCTION - Рабочее место руководителя
   =========================================
   Единая сетка: отступы кратны 4, типографика — 11/12/13/14/16/20/22
   + 32 display-only портала,
   радиусы — 6/10/14, одна тень и одна линия на весь раздел.
   ========================================= */

:root {
  --production-ink: #1d2733;
  --production-muted: #5f6b78;
  --production-subtle: #7b8794;
  --production-line: #e3e8ed;
  --production-line-strong: #cdd6df;
  --production-panel: #ffffff;
  --production-canvas: #f5f7f9;
  --production-surface-muted: #f8fafb;
  --production-surface-sunken: #eef2f6;
  --production-accent: #2457a6;
  --production-accent-strong: #1b4485;
  --production-accent-soft: #eaf1fb;
  --production-accent-soft-strong: #dde9f8;
  --production-accent-line: #c7d8f0;
  --production-accent-line-strong: #aec6e7;
  --production-positive: #17734a;
  --production-positive-soft: #e7f4ed;
  --production-positive-line: #c3e3d1;
  --production-warning: #8a5a10;
  --production-warning-soft: #fdf3df;
  --production-warning-line: #ecd9ae;
  --production-negative: #a03434;
  --production-negative-soft: #fbeaea;
  --production-negative-line: #eec8c8;

  --production-space-1: 4px;
  --production-space-2: 8px;
  --production-space-3: 12px;
  --production-space-4: 16px;
  --production-space-5: 24px;
  --production-space-6: 32px;

  --production-text-xs: 11px;
  --production-text-sm: 12px;
  --production-text-base: 13px;
  --production-text-md: 14px;
  --production-text-lg: 16px;
  --production-text-xl: 20px;
  --production-text-2xl: 22px;
  --production-text-3xl: 32px;

  --production-radius-sm: 6px;
  --production-radius-md: 10px;
  --production-radius-lg: 14px;
  --production-shadow: 0 1px 2px rgba(23, 42, 62, 0.04), 0 6px 18px rgba(23, 42, 62, 0.04);
  --production-shadow-raised: 0 8px 30px rgba(23, 42, 62, 0.07);
  --production-gutter: 32px;
  --production-sidebar-width: 268px;
  --production-characteristics-columns: minmax(0, 1fr) 168px;
}

turbo-frame[id^="production-row-"],
turbo-frame[id^="foreman_row_"],
turbo-frame[id^="foreman_schedules_"] { display: contents; }

/* --- База ------------------------------------------------------------ */

.production-body {
  min-height: 100vh;
  color: var(--production-ink);
  background: var(--production-canvas);
  font-size: var(--production-text-base);
  line-height: 1.5;
}

.production-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 1440px;
  margin: 0 auto;
}

.production-muted {
  color: var(--production-muted);
  font-size: var(--production-text-sm);
  line-height: 1.55;
}

.production-eyebrow {
  margin-bottom: var(--production-space-1);
  color: var(--production-accent);
  font-size: var(--production-text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.production-link {
  color: var(--production-accent);
  font-size: var(--production-text-base);
  font-weight: 600;
  text-decoration: none;
}
.production-link:hover { color: var(--production-accent-strong); text-decoration: underline; }

/* --- Шапка и каркас -------------------------------------------------- */

.production-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--production-space-5);
  min-height: 76px;
  padding: var(--production-space-4) var(--production-gutter);
  background: var(--production-panel);
  border-bottom: 1px solid var(--production-line);
}
.production-header__title { min-width: 0; }
.production-header h1 { font-size: var(--production-text-2xl); font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; }
.production-header__note { margin-top: var(--production-space-1); color: var(--production-muted); font-size: var(--production-text-sm); line-height: 1.5; }
.production-header__note .production-link { margin-left: var(--production-space-1); }
.production-header__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--production-space-2); }

.production-manager { font-size: var(--production-text-base); font-weight: 600; }

.production-flash {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--production-space-4) var(--production-gutter) 0;
}
/* Пустой flash не должен занимать место: шаблон оставляет только
   комментарии-маркеры, поэтому :empty здесь не срабатывает. */
.production-flash:not(:has(.production-alert, .production-notice)) { display: none; }

/* Скрытый, но доступный скринридеру текст: обратная связь без визуального
   шума и без сдвига макета. */
.production-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.production-layout {
  display: grid;
  grid-template-columns: var(--production-sidebar-width) minmax(0, 1fr);
  flex: 1;
  align-items: start;
  background: linear-gradient(to right, var(--production-surface-muted) var(--production-sidebar-width), transparent var(--production-sidebar-width));
}

.production-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  padding: var(--production-space-5) var(--production-space-4);
  overflow-y: auto;
  border-right: 1px solid var(--production-line);
}

.production-main {
  display: grid;
  gap: var(--production-space-4);
  align-content: start;
  min-width: 0;
  padding: var(--production-space-6) var(--production-gutter) 56px;
}
.production-main--narrow { width: 100%; max-width: 960px; margin: 0 auto; }

.production-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--production-space-4);
  margin-bottom: var(--production-space-5);
}
.production-page-header h2 { font-size: var(--production-text-xl); font-weight: 650; letter-spacing: -0.01em; }
.production-page-header h2 + .production-muted { margin-top: var(--production-space-1); }

/* --- Навигация по шагам ---------------------------------------------- */

.production-nav { display: grid; gap: 2px; }
.production-nav__item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 8px;
  gap: var(--production-space-2);
  align-items: start;
  padding: var(--production-space-2) var(--production-space-3);
  color: var(--production-ink);
  text-decoration: none;
  border-radius: var(--production-radius-sm);
  box-shadow: inset 3px 0 0 transparent;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.production-nav__item:hover { background: var(--production-surface-sunken); }
.production-nav__item.is-current { background: var(--production-accent-soft); box-shadow: inset 3px 0 0 var(--production-accent); }
.production-nav__item--overview { margin-bottom: var(--production-space-2); padding-bottom: var(--production-space-3); border-bottom: 1px solid var(--production-line); border-radius: 0; }
.production-nav__item--overview.is-current { border-radius: var(--production-radius-sm); }

.production-nav__number {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--production-muted);
  background: var(--production-surface-sunken);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.production-nav__item.is-current .production-nav__number { color: #fff; background: var(--production-accent); }
.production-nav__body { min-width: 0; }
.production-nav__body strong { display: block; font-size: var(--production-text-base); font-weight: 600; line-height: 1.35; }
.production-nav__body small { display: block; margin-top: 2px; color: var(--production-muted); font-size: var(--production-text-xs); line-height: 1.4; }

.production-nav__state { width: 7px; height: 7px; margin-top: 6px; background: transparent; border: 1px solid var(--production-line-strong); border-radius: 50%; }
.production-nav__state--ready { background: var(--production-positive); border-color: var(--production-positive); }
.production-nav__state--in_progress { background: var(--production-warning); border-color: var(--production-warning); }
.production-nav__state--changed { background: var(--production-accent); border-color: var(--production-accent); }
.production-nav__state--filled { background: var(--production-surface-sunken); border-color: var(--production-positive); }
.production-nav__state--not_started { background: transparent; border-color: var(--production-line-strong); }

/* --- Кнопки и действия ----------------------------------------------- */

.production-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 var(--production-space-3);
  color: var(--production-ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--production-radius-sm);
  font: inherit;
  font-size: var(--production-text-base);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.production-button--primary { color: #fff; background: var(--production-accent); border-color: var(--production-accent); }
.production-button--primary:hover { background: var(--production-accent-strong); border-color: var(--production-accent-strong); }
.production-button--secondary { color: var(--production-accent); background: var(--production-accent-soft); border-color: var(--production-accent-line); }
.production-button--secondary:hover { background: var(--production-accent-soft-strong); border-color: var(--production-accent-line-strong); }
.production-button--quiet { color: var(--production-muted); background: transparent; border-color: var(--production-line-strong); }
.production-button--quiet:hover { color: var(--production-ink); background: var(--production-surface-muted); }

.production-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 var(--production-space-2);
  color: var(--production-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--production-radius-sm);
  font: inherit;
  font-size: var(--production-text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.production-action:hover { color: var(--production-ink); background: var(--production-surface-sunken); }
.production-action--danger { color: var(--production-negative); }
.production-action--danger:hover { color: var(--production-negative); background: var(--production-negative-soft); }

/* --- Метки состояния -------------------------------------------------- */

.production-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--production-space-2);
  color: var(--production-muted);
  background: var(--production-surface-sunken);
  border-radius: 999px;
  font-size: var(--production-text-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.production-badge--in_database { color: var(--production-muted); background: var(--production-surface-sunken); }
.production-badge--new { color: var(--production-accent); background: var(--production-accent-soft); }
.production-badge--changed { color: var(--production-warning); background: var(--production-warning-soft); }
.production-badge--marked_for_deletion,
.production-badge--source_missing,
.production-badge--deletion_mark { color: var(--production-negative); background: var(--production-negative-soft); }
.production-badge--succeeded,
.production-badge--applied { color: var(--production-positive); background: var(--production-positive-soft); }
.production-badge--queued { color: var(--production-muted); background: var(--production-surface-sunken); }
.production-badge--processing,
.production-badge--running { color: var(--production-accent); background: var(--production-accent-soft); }
.production-badge--failed,
.production-badge--planning_failed,
.production-badge--cancelled,
.production-badge--conflict { color: var(--production-negative); background: var(--production-negative-soft); }
.production-badge--readonly { color: var(--production-muted); background: transparent; border: 1px dashed var(--production-line-strong); }
.production-badge--upcoming { color: var(--production-warning); background: var(--production-warning-soft); }
.production-badge--mode { color: var(--production-muted); background: var(--production-surface-sunken); }

.production-source { color: var(--production-subtle); font-size: var(--production-text-xs); white-space: nowrap; }

/* Единый шеврон раскрытия. Рисуется маской, поэтому остаётся чётким на любом
   DPI и наследует цвет текста; при раскрытии поворачивается, а не меняет
   глиф, — так состояние читается движением, а не мелким символом. */
:root {
  --production-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.production-disclosure-toggle::before,
.production-guide__summary::before,
.production-guide__more > summary::before,
.production-group__disclosure > summary::before,
.production-change > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--production-chevron) center / 16px 16px no-repeat;
  mask: var(--production-chevron) center / 16px 16px no-repeat;
  transition: transform 0.15s ease;
}
.production-guide[open] > .production-guide__summary::before,
.production-guide__more[open] > summary::before,
.production-group__disclosure[open] > summary::before,
.production-change[open] > summary::before {
  transform: rotate(90deg);
}

/* --- Контекст шага ---------------------------------------------------- */

/* Пояснение шага — тихая полоса, а не ещё одна карточка: заливка вместо
   тени. Отступы держат иерархию 32 (край страницы) > 24 (между блоками) >
   16 (внутри полосы), иначе блок прилипает к карточке и отрывается от верха. */
.production-guide {
  margin: 0 0 var(--production-space-5);
  background: var(--production-surface-muted);
  border: 1px solid var(--production-line);
  border-radius: var(--production-radius-md);
}
/* Пунктир остаётся признаком справочного раздела, а не украшением. */
.production-guide--readonly { border-style: dashed; }

.production-guide__summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--production-space-2);
  padding: var(--production-space-4) var(--production-space-5);
  list-style: none;
  cursor: pointer;
}
.production-guide__summary::-webkit-details-marker { display: none; }
.production-guide__summary::before { color: var(--production-subtle); }
.production-guide__summary:hover { background: var(--production-surface-sunken); }
.production-guide__summary:hover::before { color: var(--production-accent); }
.production-guide__summary-hint { flex: 1; min-width: 200px; color: var(--production-ink); font-size: var(--production-text-base); font-weight: 600; }
.production-guide__summary-more { margin-left: auto; color: var(--production-accent); font-size: var(--production-text-xs); font-weight: 600; }
.production-guide[open] .production-guide__summary-more { display: none; }

.production-guide__body { padding: 0 var(--production-space-5) var(--production-space-5); }
.production-guide__purpose { max-width: 78ch; color: var(--production-muted); font-size: var(--production-text-base); line-height: 1.6; }
.production-guide__result { max-width: 78ch; margin-top: var(--production-space-2); color: var(--production-ink); font-size: var(--production-text-base); line-height: 1.5; }
.production-guide__result-label { margin-right: var(--production-space-2); color: var(--production-positive); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.production-guide__flow { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--production-space-3); margin-top: var(--production-space-4); }
.production-guide__label { color: var(--production-subtle); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.production-flow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--production-space-1); margin: 0; padding: 0; list-style: none; }
.production-flow__item { display: flex; align-items: center; gap: var(--production-space-1); color: var(--production-muted); font-size: var(--production-text-sm); }
.production-flow__item + .production-flow__item::before { content: "→"; color: var(--production-line-strong); font-size: var(--production-text-xs); }
.production-flow__item a { color: var(--production-muted); text-decoration: none; border-bottom: 1px solid transparent; }
.production-flow__item a:hover { color: var(--production-accent); border-bottom-color: var(--production-accent-line); }
.production-flow__item.is-current a { color: var(--production-ink); font-weight: 650; border-bottom-color: var(--production-ink); }

.production-guide__dep { display: inline-flex; align-items: baseline; gap: var(--production-space-1); color: var(--production-muted); font-size: var(--production-text-sm); }
.production-guide__dep-label { color: var(--production-subtle); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.production-guide__dep a { color: var(--production-accent); text-decoration: none; }
.production-guide__dep a:hover { text-decoration: underline; }

.production-guide__order { margin-top: var(--production-space-4); padding-top: var(--production-space-4); border-top: 1px solid var(--production-line); }
.production-guide__order h3 { margin-bottom: var(--production-space-2); color: var(--production-subtle); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.production-guide__steps { display: grid; gap: var(--production-space-1); margin: 0; padding-left: var(--production-space-5); font-size: var(--production-text-base); line-height: 1.55; }
.production-guide__steps li::marker { color: var(--production-accent); font-weight: 650; }

.production-guide__more { margin-top: var(--production-space-3); }
.production-guide__more > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--production-space-1);
  color: var(--production-accent);
  font-size: var(--production-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}
.production-guide__more > summary::-webkit-details-marker { display: none; }
.production-guide__more > summary::before { width: 14px; height: 14px; background-size: 14px 14px; }
.production-guide__more p { max-width: 88ch; margin-top: var(--production-space-2); color: var(--production-muted); font-size: var(--production-text-sm); line-height: 1.6; }

/* --- Обзор: маршрут и метрики ---------------------------------------- */

.production-map__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--production-space-5); margin: var(--production-space-4) 0 0; padding: 0; list-style: none; }
.production-map__link {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: var(--production-space-3);
  align-items: center;
  padding: var(--production-space-2) var(--production-space-3);
  color: var(--production-ink);
  text-decoration: none;
  border-radius: var(--production-radius-sm);
  transition: background 0.12s ease;
}
.production-map__link:hover { background: var(--production-surface-muted); }
.production-map__item.is-next .production-map__link { background: var(--production-accent-soft); }
.production-map__number {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--production-muted);
  background: var(--production-surface-sunken);
  border-radius: 50%;
  font-size: var(--production-text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.production-map__item.is-next .production-map__number { color: #fff; background: var(--production-accent); }
.production-map__body strong { display: block; font-size: var(--production-text-base); font-weight: 600; }
.production-map__body small { display: block; margin-top: 2px; color: var(--production-muted); font-size: var(--production-text-sm); line-height: 1.45; }
.production-map__status { font-size: var(--production-text-xs); font-weight: 600; white-space: nowrap; }
.production-map__status--ready { color: var(--production-positive); }
.production-map__status--changed { color: var(--production-accent); }
.production-map__status--in_progress { color: var(--production-warning); }
.production-map__status--filled { color: var(--production-positive); }
.production-map__status--not_started { color: var(--production-subtle); }
.production-map__next {
  display: inline-block;
  margin-right: var(--production-space-1);
  padding: 1px var(--production-space-2);
  color: #fff;
  background: var(--production-accent);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.production-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--production-space-3);
  margin-bottom: var(--production-space-4);
}
.production-metric {
  display: grid;
  gap: var(--production-space-1);
  padding: var(--production-space-4) var(--production-space-5);
  background: var(--production-panel);
  border: 1px solid var(--production-line);
  border-radius: var(--production-radius-md);
  box-shadow: var(--production-shadow);
}
.production-metric span { color: var(--production-muted); font-size: var(--production-text-sm); }
.production-metric strong { font-size: var(--production-text-2xl); font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.1; }
.production-metric__hint { color: var(--production-muted); font-size: var(--production-text-sm); line-height: 1.35; }
.production-metric--positive strong { color: var(--production-positive); }
.production-metric--negative strong { color: var(--production-negative); }

.production-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--production-space-3);
  margin-bottom: var(--production-space-4);
}
.production-columns .production-card { display: flex; flex-direction: column; gap: var(--production-space-2); margin: 0; }
.production-columns .production-card > :last-child { margin-top: auto; }
.production-next-step { font-size: var(--production-text-base); line-height: 1.55; }

.production-registry-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--production-space-5); margin-top: var(--production-space-4); }
.production-registry-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--production-space-3); padding: var(--production-space-2) 0; border-bottom: 1px solid var(--production-line); }
.production-registry-item span { color: var(--production-muted); font-size: var(--production-text-sm); }
.production-registry-item strong { font-size: var(--production-text-md); font-weight: 650; font-variant-numeric: tabular-nums; }

/* --- Карточки --------------------------------------------------------- */

.production-card {
  padding: var(--production-space-5);
  margin: 0 0 var(--production-space-4);
  background: var(--production-panel);
  border: 1px solid var(--production-line);
  border-radius: var(--production-radius-md);
  box-shadow: var(--production-shadow);
}
.production-card__heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--production-space-4); }
.production-card__heading > div { min-width: 0; }
.production-card h2 { font-size: var(--production-text-lg); font-weight: 650; letter-spacing: -0.01em; }
.production-card h3 { font-size: var(--production-text-md); font-weight: 650; }
.production-card h2 + .production-muted,
.production-card h3 + .production-muted { margin-top: var(--production-space-1); }

/* --- Вкладки типов ---------------------------------------------------- */

.production-tabs {
  display: flex;
  gap: 2px;
  margin: 0 0 var(--production-space-4);
  overflow-x: auto;
  border-bottom: 1px solid var(--production-line);
  scrollbar-width: none;
}
.production-tabs::-webkit-scrollbar { display: none; }
.production-tabs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--production-space-2);
  padding: var(--production-space-2) var(--production-space-3) 11px;
  margin-bottom: -1px;
  color: var(--production-muted);
  font-size: var(--production-text-base);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.production-tabs__item:hover { color: var(--production-ink); background: var(--production-surface-muted); }
.production-tabs__item.is-current { color: var(--production-accent); border-bottom-color: var(--production-accent); }
.production-tabs__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--production-space-1);
  color: var(--production-muted);
  background: var(--production-surface-sunken);
  border-radius: 999px;
  font-size: var(--production-text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.production-tabs__item.is-current .production-tabs__count { color: var(--production-accent); background: var(--production-accent-soft); }

/* --- Секция и строки реестра ----------------------------------------- */

.production-section {
  background: var(--production-panel);
  border: 1px solid var(--production-line);
  border-radius: var(--production-radius-md);
  box-shadow: var(--production-shadow);
  overflow: hidden;
}
.production-section__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--production-space-2) var(--production-space-4);
  min-height: 62px;
  padding: 14px var(--production-space-5);
  border-bottom: 1px solid var(--production-line);
}
.production-section__heading { display: flex; align-items: baseline; gap: var(--production-space-2); min-width: 0; }
.production-section__heading h3 { font-size: var(--production-text-md); font-weight: 650; letter-spacing: -0.01em; }
.production-section__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--production-space-1);
  color: var(--production-muted);
  background: var(--production-surface-sunken);
  border-radius: 999px;
  font-size: var(--production-text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.production-section__hint { flex: 1; min-width: 220px; color: var(--production-muted); font-size: var(--production-text-sm); line-height: 1.5; }
.production-section__lede { padding: var(--production-space-3) var(--production-space-5) 0; color: var(--production-muted); font-size: var(--production-text-sm); line-height: 1.55; }
.production-section__actions { display: flex; flex-wrap: wrap; gap: var(--production-space-2); justify-content: flex-end; margin-left: auto; }
.production-section__empty { padding: var(--production-space-4) var(--production-space-5); color: var(--production-muted); font-size: var(--production-text-base); line-height: 1.55; }

/* Группа реестра: заголовок (строка записи + полоса раскрытия) и содержимое.
   Линия есть только между группами, поэтому любая линия означает «дальше
   другая запись», а не «дальше раскрытие». Заголовок подсвечивается целиком:
   наведение на строку или на полосу раскрытия даёт один и тот же отклик. */
.production-group-list { display: grid; }
.production-group-list .production-group {
  --group-head-bg: transparent;
  --group-head-bg-hover: var(--production-surface-muted);
  border: 0;
  border-top: 1px solid var(--production-line);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.production-group-list .production-group:first-child { border-top: 0; }
.production-group-list .production-group:has(> .production-group__disclosure[open]) {
  --group-head-bg: var(--production-surface-muted);
  --group-head-bg-hover: var(--production-surface-sunken);
  padding-bottom: var(--production-space-3);
}
.production-group:has(.production-record-row--readonly) {
  --group-head-bg: var(--production-surface-muted);
  --group-head-bg-hover: var(--production-surface-muted);
}

/* Заголовок группы — один визуальный блок: строка и полоса раскрытия.
   Строка лежит внутри turbo-frame, поэтому опираемся на класс, а не на «>». */
.production-group .production-record-row--head,
.production-group > .production-group__disclosure > summary {
  background: var(--group-head-bg, transparent);
  transition: background 0.12s ease;
}
.production-group:has(.production-record-row--head:hover) .production-record-row--head,
.production-group:has(.production-record-row--head:hover) > .production-group__disclosure > summary,
.production-group:has(> .production-group__disclosure > summary:hover) .production-record-row--head,
.production-group:has(> .production-group__disclosure > summary:hover) > .production-group__disclosure > summary {
  background: var(--group-head-bg-hover, var(--production-surface-muted));
}

.production-record-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--production-space-2) var(--production-space-3);
  padding: var(--production-space-3) var(--production-space-5);
  transition: background 0.12s ease;
}
.production-group-list .production-record-row { border-radius: 0; }
.production-record-row:hover { background: var(--production-surface-muted); }
.production-record-row--readonly .production-record-row__name { color: var(--production-muted); font-weight: 500; }

.production-record-row__identity { display: grid; gap: 3px; flex: 1; min-width: 0; }
.production-record-row__title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--production-space-2); }
.production-record-row__name { font-size: var(--production-text-base); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.production-record-row__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--production-space-1) var(--production-space-3); color: var(--production-muted); font-size: var(--production-text-sm); line-height: 1.45; }
.production-record-row__relation { color: var(--production-muted); }
/* Метка бригады в строке — только когда выборка смешана бригадами. */
.production-record-row__team { color: var(--production-muted); font-size: var(--production-text-sm); }
.production-record-row__warning { color: var(--production-warning); font-size: var(--production-text-sm); font-weight: 600; }
.production-record-row__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-left: auto; }
.production-record-row__actions form { display: inline-flex; }

.production-record-edit { padding: var(--production-space-4) var(--production-space-5); background: var(--production-surface-muted); }
.production-record-edit__header { display: grid; gap: 2px; margin-bottom: var(--production-space-4); }
.production-record-edit__header strong { font-size: var(--production-text-md); font-weight: 650; }
.production-record-edit__header small { color: var(--production-muted); font-size: var(--production-text-sm); }

/* Полоса раскрытия — вторая строка заголовка группы. Она во всю ширину,
   чтобы попадать курсором, но набрана как подпись: мелкий кегль, шеврон
   по левому краю имени, счётчик-пилюля. */
.production-group__disclosure { border-top: 0; }
.production-group__disclosure > summary {
  display: flex;
  align-items: center;
  gap: var(--production-space-2);
  padding: 2px var(--production-space-5) var(--production-space-3);
  color: var(--production-muted);
  font-size: var(--production-text-sm);
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.production-group__disclosure > summary::-webkit-details-marker { display: none; }
.production-group__disclosure > summary::before { color: var(--production-subtle); }
.production-group__disclosure[open] > summary { padding-bottom: var(--production-space-1); }
.production-group__disclosure > summary:hover { color: var(--production-ink); }
.production-group__disclosure > summary:hover::before { color: var(--production-accent); }
.production-group__toggle-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  color: var(--production-muted);
  background: var(--production-surface-sunken);
  border-radius: 999px;
  font-size: var(--production-text-xs);
  font-variant-numeric: tabular-nums;
}
.production-group__disclosure[open] .production-group__toggle-count { color: var(--production-accent); background: var(--production-accent-soft); }

.production-group__body {
  margin: 0 var(--production-space-5) 0 calc(var(--production-space-5) + 5px);
  padding: var(--production-space-1) 0 var(--production-space-1) var(--production-space-3);
  border-left: 2px solid var(--production-line-strong);
}

.production-tree__caption { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--production-space-1); margin: 0 0 var(--production-space-2); color: var(--production-muted); font-size: var(--production-text-xs); line-height: 1.45; }
.production-tree__caption-parent { color: var(--production-ink); font-weight: 600; }
.production-tree__caption-sep { color: var(--production-line-strong); }

.production-tree__children { display: grid; gap: var(--production-space-1); }
.production-tree__children .production-record-row { padding: var(--production-space-2) var(--production-space-3); background: var(--production-surface-muted); border: 1px solid var(--production-line); border-radius: var(--production-radius-sm); }
.production-tree__children .production-record-row:hover { background: var(--production-surface-sunken); }
.production-tree__children .production-record-edit { padding: var(--production-space-4); background: var(--production-panel); border: 1px solid var(--production-line); border-radius: var(--production-radius-sm); }
.production-tree__empty { padding: var(--production-space-1) 0; color: var(--production-muted); font-size: var(--production-text-base); line-height: 1.5; }
/* Действия над списком, а не под ним: в длинном маршруте подвал терялся за
   десятком строк. Ряд тихих ссылок без рамок — как панель таблицы. */
.production-tree__toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--production-space-1); margin: 0 0 var(--production-space-2); }
.production-tree__toolbar .production-action { color: var(--production-accent); }
.production-tree__toolbar .production-action:hover { color: var(--production-accent-strong); background: var(--production-accent-soft); }

.production-empty {
  display: grid;
  gap: var(--production-space-1);
  padding: var(--production-space-5);
  color: var(--production-muted);
  font-size: var(--production-text-base);
  text-align: center;
  background: var(--production-surface-muted);
  border: 1px dashed var(--production-line-strong);
  border-radius: var(--production-radius-sm);
}
.production-empty strong { color: var(--production-ink); font-weight: 600; }

/* --- Характеристики внутри номенклатуры ------------------------------- */

.production-characteristics__head {
  display: grid;
  grid-template-columns: var(--production-characteristics-columns);
  gap: 0 var(--production-space-4);
  padding: 0 var(--production-space-3) var(--production-space-2);
  color: var(--production-subtle);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.production-characteristics__head > :last-child { text-align: right; }
.production-characteristics__row {
  display: grid;
  grid-template-columns: var(--production-characteristics-columns);
  gap: 0 var(--production-space-4);
  align-items: center;
  padding: var(--production-space-2) var(--production-space-3);
  border-top: 1px solid var(--production-line);
  transition: background 0.12s ease;
}
.production-characteristics__row:hover { background: var(--production-surface-muted); }
.production-characteristics__name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--production-space-2); }
.production-characteristics__name strong { font-size: var(--production-text-base); font-weight: 600; }
.production-characteristics__actions { display: flex; flex-wrap: wrap; gap: 2px; justify-content: flex-end; }
.production-characteristics__actions form { display: inline-flex; }
.production-characteristics__empty { padding: var(--production-space-3); color: var(--production-muted); font-size: var(--production-text-base); }
.production-characteristics .production-record-edit { margin: 0 0 var(--production-space-2); }

/* --- Формы ------------------------------------------------------------ */

.production-form { display: grid; max-width: 680px; margin: 0; }
.production-form__title { margin: 0 0 var(--production-space-4); font-size: var(--production-text-lg); font-weight: 650; letter-spacing: -0.01em; }
.production-form__hint { max-width: 68ch; margin: 0 0 var(--production-space-1); color: var(--production-muted); font-size: var(--production-text-sm); line-height: 1.55; }
.production-form__hint--warning { color: var(--production-warning); }
.production-form__hint .production-link { margin-left: var(--production-space-1); }

.production-form__section { min-width: 0; margin: 0; padding: 0; border: 0; }
.production-form__section + .production-form__section { margin-top: var(--production-space-5); padding-top: var(--production-space-4); border-top: 1px solid var(--production-line); }
.production-form__section legend { padding: 0; margin-bottom: var(--production-space-1); color: var(--production-ink); font-size: var(--production-text-base); font-weight: 650; }
.production-form__section-note { margin: 0 0 var(--production-space-1); color: var(--production-muted); font-size: var(--production-text-sm); line-height: 1.55; }

.production-form label { margin-top: var(--production-space-3); margin-bottom: var(--production-space-1); color: var(--production-ink); font-size: var(--production-text-sm); font-weight: 600; }
.production-form label:first-of-type { margin-top: 0; }
.production-form__section > label:first-of-type { margin-top: var(--production-space-2); }
.production-form input:not([type="hidden"]):not([type="checkbox"]):not([type="submit"]),
.production-form select,
.production-form textarea {
  width: 100%;
  min-height: 38px;
  padding: var(--production-space-2) var(--production-space-3);
  color: var(--production-ink);
  background: var(--production-panel);
  border: 1px solid var(--production-line-strong);
  border-radius: var(--production-radius-sm);
  font: inherit;
  font-size: var(--production-text-base);
}
.production-form textarea { min-height: 88px; padding: 9px var(--production-space-3); resize: vertical; }
.production-form input:focus,
.production-form select:focus,
.production-form textarea:focus { outline: none; border-color: var(--production-accent); box-shadow: 0 0 0 3px var(--production-accent-soft); }
.production-form input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--production-accent); }
.production-form__check { display: flex; align-items: center; gap: var(--production-space-2); margin-top: var(--production-space-3); }
.production-form__check label { margin: 0; font-weight: 500; }
.production-form__actions { display: flex; flex-wrap: wrap; gap: var(--production-space-2); justify-content: flex-end; margin-top: var(--production-space-5); }
.production-form input[type="submit"].production-button { width: auto; }
/* Поиск в форме связи: поле и тихая кнопка в одну строку — как шаг поиска
   в выдаче мастера. Форма остаётся grid, ряд — её отдельный ребёнок. */
.production-form__search { display: flex; flex-wrap: wrap; align-items: center; gap: var(--production-space-2); }
.production-form .production-form__search input[type="search"] { flex: 1 1 12ch; width: auto; min-width: 0; }
.production-form__section-note .production-link { margin-left: var(--production-space-1); }

turbo-frame#production-step-content > .production-form {
  max-width: 720px;
  padding: var(--production-space-5);
  background: var(--production-panel);
  border: 1px solid var(--production-line);
  border-radius: var(--production-radius-md);
  box-shadow: var(--production-shadow);
}
.production-tree__children > .production-form { padding: var(--production-space-4); background: var(--production-panel); border: 1px solid var(--production-line); border-radius: var(--production-radius-sm); }
/* Форма стоит над диаграммой: правка связи и граф — в одном экране.
   Между блоками 8, а не 4, как между строками списка. */
.production-tree__children > .production-form,
.production-tree__children > .production-route { margin-bottom: var(--production-space-2); }

/* --- Сообщения, детали, служебные блоки ------------------------------- */

.production-alert,
.production-notice {
  margin: 0 0 var(--production-space-4);
  padding: var(--production-space-3) var(--production-space-4);
  border: 1px solid;
  border-radius: var(--production-radius-sm);
  font-size: var(--production-text-base);
  line-height: 1.5;
}
.production-alert { color: var(--production-negative); background: var(--production-negative-soft); border-color: var(--production-negative-line); }
.production-notice { color: var(--production-positive); background: var(--production-positive-soft); border-color: var(--production-positive-line); }

.production-details { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--production-space-2) var(--production-space-4); margin: var(--production-space-4) 0; font-size: var(--production-text-base); }
.production-details dt { color: var(--production-muted); }
.production-details dd { margin: 0; overflow-wrap: anywhere; }

.production-change { margin-top: var(--production-space-2); background: var(--production-surface-muted); border: 1px solid var(--production-line); border-radius: var(--production-radius-sm); }
.production-change > summary {
  display: flex;
  align-items: center;
  gap: var(--production-space-2);
  padding: var(--production-space-2) var(--production-space-4);
  color: var(--production-ink);
  font-size: var(--production-text-sm);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.production-change > summary::-webkit-details-marker { display: none; }
.production-change > summary::before { color: var(--production-subtle); }
.production-change > summary:hover::before { color: var(--production-accent); }
.production-change .production-details { margin: 0; padding: var(--production-space-4); border-top: 1px solid var(--production-line); }

/* --- Проверка и применение ------------------------------------------- */

.production-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--production-space-3); margin-top: var(--production-space-4); }
.production-totals .production-metric { padding: var(--production-space-3) var(--production-space-4); background: var(--production-surface-muted); border-color: var(--production-line); box-shadow: none; }
.production-review-errors { display: grid; gap: var(--production-space-2); margin: var(--production-space-3) 0; }
.production-review-errors .production-alert { margin: 0; }
.production-review-errors .production-link { margin-left: var(--production-space-1); }
.production-review-hint { margin: 0; color: var(--production-muted); font-size: var(--production-text-sm); }
.production-review-blocked {
  margin: var(--production-space-3) 0 0;
  padding: var(--production-space-3) var(--production-space-4);
  color: var(--production-warning);
  background: var(--production-warning-soft);
  border: 1px solid var(--production-warning-line);
  border-radius: var(--production-radius-sm);
  font-size: var(--production-text-base);
  line-height: 1.55;
}
.production-review-group { padding: var(--production-space-3) 0; border-bottom: 1px solid var(--production-line); }
.production-review-group:last-child { border-bottom: 0; }
.production-review-group h4 { margin-bottom: var(--production-space-1); font-size: var(--production-text-base); font-weight: 650; }
.production-review-list { display: grid; gap: var(--production-space-1); margin-top: var(--production-space-2); padding-left: var(--production-space-5); font-size: var(--production-text-base); }
.production-review-record { display: flex; align-items: center; justify-content: space-between; gap: var(--production-space-3); padding: var(--production-space-2) 0; border-bottom: 1px solid var(--production-line); font-size: var(--production-text-base); }
.production-review-record:last-child { border-bottom: 0; }
.production-review-record__name { font-weight: 600; }
.production-review-record__relation { color: var(--production-muted); font-size: var(--production-text-sm); }

/* --- Заказы: контекст, таблица, фильтр, догрузка ---------------------- */

.production-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--production-space-2) var(--production-space-4);
  margin: 0 0 var(--production-space-4);
  padding: var(--production-space-3) var(--production-space-4);
  background: var(--production-accent-soft);
  border: 1px solid var(--production-accent-line);
  border-radius: var(--production-radius-md);
}
.production-context__body { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--production-space-2); min-width: 0; }
.production-context__label { color: var(--production-accent-strong); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.production-context__id { font-size: var(--production-text-lg); font-weight: 650; }
.production-context__meta { color: var(--production-muted); font-size: var(--production-text-sm); }
.production-context__actions { display: flex; align-items: center; gap: var(--production-space-3); margin-left: auto; }

.production-filter { display: flex; align-items: center; flex-wrap: wrap; gap: var(--production-space-2); margin-left: auto; }
.production-filter__label { color: var(--production-muted); font-size: var(--production-text-sm); font-weight: 600; }
.production-filter__input {
  width: 180px;
  min-height: 36px;
  height: 36px;
  padding: 0 var(--production-space-3);
  color: var(--production-ink);
  background: var(--production-panel);
  border: 1px solid var(--production-line-strong);
  border-radius: var(--production-radius-sm);
  font: inherit;
  font-size: var(--production-text-base);
}
.production-filter__input:focus { outline: none; border-color: var(--production-accent); box-shadow: 0 0 0 3px var(--production-accent-soft); }
/* Кнопка фильтра одной высоты с полем — как в контуре мастера. */
.production-filter .production-button { height: 36px; }

.production-table { width: 100%; border-collapse: collapse; font-size: var(--production-text-base); }
.production-table th {
  padding: var(--production-space-2) var(--production-space-4);
  color: var(--production-subtle);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
  border-bottom: 1px solid var(--production-line);
  white-space: nowrap;
}
.production-table td { padding: var(--production-space-3) var(--production-space-4); vertical-align: top; border-bottom: 1px solid var(--production-line); }
.production-table tbody tr:last-child td { border-bottom: 0; }
.production-table tbody tr:hover { background: var(--production-surface-muted); }
.production-table td:nth-child(n+2):nth-child(-n+5) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.production-table__meta { margin-top: 3px; color: var(--production-muted); font-size: var(--production-text-xs); line-height: 1.45; }
.production-table__wrap { max-width: 320px; color: var(--production-muted); overflow-wrap: anywhere; }
.production-table__action { text-align: right; white-space: nowrap; }

/* Облачный контур: режим диспетчеризации — сегментированный выбор
   «одно из двух». Признак выбора — радиокружок слева и заливка сегмента;
   неактивный сегмент приглушён. */
.production-segments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--production-space-1);
  margin: var(--production-space-4) var(--production-space-5) var(--production-space-5);
  padding: var(--production-space-1);
  background: var(--production-surface-sunken);
  border: 1px solid var(--production-line);
  border-radius: var(--production-radius-md);
}
.production-segments__item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: var(--production-space-3);
  width: 100%;
  padding: var(--production-space-3) var(--production-space-4);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--production-radius-sm);
  color: var(--production-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.production-segments__mark {
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background: var(--production-panel);
  border: 1.5px solid var(--production-line-strong);
  border-radius: 50%;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.production-segments__text { display: grid; gap: 2px; min-width: 0; }
.production-segments__item:hover { color: var(--production-ink); background: var(--production-panel); }
.production-segments__item:hover .production-segments__mark { border-color: var(--production-accent-line-strong); }
.production-segments__item.is-selected {
  color: var(--production-ink);
  background: var(--production-panel);
  border-color: var(--production-accent-line);
  box-shadow: 0 1px 2px rgba(23, 42, 62, 0.06);
}
.production-segments__item.is-selected .production-segments__mark {
  background: var(--production-accent);
  border-color: var(--production-accent);
}
.production-segments__item.is-selected .production-segments__mark::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid var(--production-panel);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.production-segments__name { font-size: var(--production-text-md); font-weight: 650; line-height: 1.3; }
.production-segments__item.is-selected .production-segments__name { color: var(--production-accent-strong); }
.production-segments__note { color: var(--production-muted); font-size: var(--production-text-xs); line-height: 1.4; }

.production-page-header__note {
  max-width: 420px;
  color: var(--production-muted);
  font-size: var(--production-text-sm);
  line-height: 1.5;
}

/* Вертикальный ритм задаёт только gap контейнера: собственные нижние
   отступы детей давали 40/16/32 вперемешку. Правило — только для контура
   мастера, чтобы не менять ритм облачной страницы. */
.production-page-sections { display: grid; gap: var(--production-space-4); }
.foreman-sections > * { margin-top: 0; margin-bottom: 0; }

.production-module-list { display: grid; margin: 0; padding: 0; list-style: none; }
.production-module-list .production-record-row + .production-record-row { border-top: 1px solid var(--production-line); }

/* Переключатель независимого модуля: кнопка-свитч без JS. Позиция —
   aria-checked, фокус — общий блок focus-visible, зона клика расширена
   наложением. */
.production-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  padding: 0;
  background: var(--production-surface-sunken);
  border: 0;
  border-radius: 13px;
  box-shadow: inset 0 0 0 1px var(--production-line-strong);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.production-switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(23, 42, 62, 0.25);
  transition: transform 0.15s ease;
}
.production-switch::after { content: ""; position: absolute; inset: -8px; }
.production-switch[aria-checked="true"] { background: var(--production-accent); box-shadow: inset 0 0 0 1px var(--production-accent); }
.production-switch[aria-checked="true"]::before { transform: translateX(20px); }
.production-switch:not(:disabled):hover { box-shadow: inset 0 0 0 1px var(--production-line-strong), 0 0 0 3px var(--production-accent-soft); }
.production-switch[aria-checked="true"]:not(:disabled):hover { box-shadow: inset 0 0 0 1px var(--production-accent), 0 0 0 3px var(--production-accent-soft); }
.production-switch:disabled { opacity: 0.45; cursor: not-allowed; }

.production-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--production-space-2); padding: var(--production-space-3) var(--production-space-5); border-top: 1px solid var(--production-line); background: var(--production-surface-muted); }
.production-pager__status { color: var(--production-muted); font-size: var(--production-text-sm); }
.production-pager__hint { color: var(--production-subtle); font-size: var(--production-text-xs); }

/* --- Вход ------------------------------------------------------------- */

.production-login { display: grid; place-items: center; min-height: 100vh; padding: var(--production-space-5); }
.production-login__panel {
  width: 100%;
  max-width: 430px;
  padding: var(--production-space-6);
  background: var(--production-panel);
  border: 1px solid var(--production-line);
  border-radius: var(--production-radius-lg);
  box-shadow: var(--production-shadow-raised);
}
.production-login__panel h1 { margin-bottom: var(--production-space-2); font-size: var(--production-text-2xl); font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; }
.production-login .production-form { margin-top: var(--production-space-5); }
.production-login .production-form input[type="submit"] { width: 100%; margin-top: var(--production-space-2); }
.production-login .production-form input:not([type="hidden"]) { min-height: 44px; }
.production-login .production-form input[type="submit"] { min-height: 44px; }
.production-login .production-alert { margin-bottom: var(--production-space-4); }

/* --- Маршрут операций (диаграмма) ------------------------------------- */

.production-route {
  display: grid;
  gap: var(--production-space-2);
  min-width: 0;
  max-width: 100%;
  padding: var(--production-space-3);
  background: var(--production-panel);
  border: 1px solid var(--production-line);
  border-radius: var(--production-radius-sm);
}

/* Маршрут читается в натуральном масштабе: ужимать полотно нельзя — при
   восьми уровнях подпись падает до 6px. Длинный маршрут прокручивается,
   но без «коробки»: тени у краёв проявляются только пока есть скрытая часть
   (local-градиенты уезжают вместе с содержимым), скроллбар тонкий. */
.production-route__scroller {
  display: block;
  min-width: 0;
  max-width: 100%;
  padding-bottom: var(--production-space-1);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--production-line-strong) transparent;
  background:
    linear-gradient(to right, var(--production-panel), transparent) left center / 24px 100% no-repeat local,
    linear-gradient(to left, var(--production-panel), transparent) right center / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(29, 39, 51, 0.10), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(29, 39, 51, 0.10), transparent) right center / 12px 100% no-repeat scroll;
}
.production-route__scroller::-webkit-scrollbar { height: 6px; }
.production-route__scroller::-webkit-scrollbar-track { background: transparent; }
.production-route__scroller::-webkit-scrollbar-thumb {
  background: var(--production-line-strong);
  border-radius: 999px;
}
.production-route__scroller::-webkit-scrollbar-thumb:hover { background: var(--production-subtle); }
.production-route__head { display: grid; gap: 2px; }
.production-route__title { font-size: var(--production-text-base); font-weight: 650; line-height: 1.4; }
.production-route__legend { color: var(--production-muted); font-size: var(--production-text-xs); line-height: 1.45; }
.production-route__node rect { fill: var(--production-panel); stroke: var(--production-line-strong); stroke-width: 1; }
.production-route__node-name { fill: var(--production-ink); font-size: var(--production-text-xs); font-weight: 600; }
.production-route__badge { font-size: var(--production-text-xs); font-weight: 600; }
.production-route__node[data-state="new"] .production-route__badge { fill: var(--production-accent); }
.production-route__node[data-state="changed"] .production-route__badge { fill: var(--production-warning); }
.production-route__node[data-state="marked_for_deletion"] .production-route__badge,
.production-route__node[data-state="source_missing"] .production-route__badge { fill: var(--production-negative); }
.production-route__node[data-state="marked_for_deletion"] rect { stroke-dasharray: 4 3; }
.production-route__edge-line { fill: none; stroke: var(--production-line-strong); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.production-route__edge[data-dashed] .production-route__edge-line { stroke-dasharray: 5 4; }
.production-route__arrow { fill: var(--production-line-strong); }
.production-route__empty { color: var(--production-muted); font-size: var(--production-text-base); line-height: 1.5; }
.production-route__remainder { color: var(--production-muted); font-size: var(--production-text-xs); line-height: 1.45; }
.production-route__note { color: var(--production-warning); font-size: var(--production-text-xs); line-height: 1.45; }

/* --- Фокус ------------------------------------------------------------ */

.production-button:focus-visible,
.production-action:focus-visible,
.production-link:focus-visible,
.production-nav__item:focus-visible,
.production-tabs__item:focus-visible,
.production-guide__summary:focus-visible,
.production-guide__more > summary:focus-visible,
.production-group__disclosure > summary:focus-visible,
.production-change > summary:focus-visible,
.production-map__link:focus-visible,
.production-route__scroller:focus-visible,
.production-switch:focus-visible,
.production-segments__item:focus-visible {
  outline: 2px solid var(--production-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .production-button,
  .production-action,
  .production-nav__item,
  .production-tabs__item,
  .production-record-row,
  .production-characteristics__row,
  .production-map__link,
  .production-switch,
  .production-segments__item { transition: none; }
}

/* --- Адаптив ---------------------------------------------------------- */

@media (max-width: 1199px) {
  :root { --production-gutter: 24px; --production-sidebar-width: 232px; }
  .production-main { padding: var(--production-space-5) var(--production-gutter) 48px; }
}

@media (max-width: 900px) {
  .production-map__list { grid-template-columns: 1fr; }
  .production-metrics,
  .production-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .production-columns { grid-template-columns: 1fr; }
  .production-registry-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root { --production-gutter: 16px; }
  .production-header { align-items: flex-start; flex-direction: column; gap: var(--production-space-3); padding: var(--production-space-4) var(--production-gutter); }
  .production-header__actions { flex-wrap: wrap; }
  .production-header h1 { font-size: var(--production-text-xl); }
  .production-layout { display: block; background: none; }
  .production-sidebar { position: static; max-height: none; padding: var(--production-space-3); overflow-x: auto; overflow-y: visible; border-right: 0; border-bottom: 1px solid var(--production-line); }
  .production-nav { display: flex; min-width: max-content; }
  .production-nav__item { min-width: 180px; }
  .production-nav__item--overview { margin-bottom: 0; padding-bottom: var(--production-space-2); border-bottom: 0; border-right: 1px solid var(--production-line); border-radius: var(--production-radius-sm); }
  .production-main { padding: var(--production-space-4) var(--production-gutter) 40px; }
  .production-card { padding: var(--production-space-4); }
  .production-guide__summary { padding: var(--production-space-3) var(--production-space-4); }
  .production-guide__body { padding: 0 var(--production-space-4) var(--production-space-4); }
  .production-guide__summary-more { margin-left: 0; }
  .production-page-header { align-items: flex-start; flex-direction: column; }
  .production-card__heading { flex-direction: column; }
  .production-section__head { align-items: flex-start; padding: var(--production-space-3) var(--production-space-4); }
  .production-section__actions { margin-left: 0; }
  .production-section__heading { flex-wrap: wrap; }
  .production-section__hint { flex-basis: 100%; min-width: 0; }
  .production-section__lede { padding: var(--production-space-2) var(--production-space-4) 0; }
  .production-section__empty { padding: var(--production-space-3) var(--production-space-4); }
  .production-record-row { align-items: flex-start; padding: var(--production-space-3) var(--production-space-4); }
  .production-record-row__actions { width: 100%; margin-left: 0; justify-content: flex-start; }
  .production-group__disclosure > summary { padding: 2px var(--production-space-4) var(--production-space-3); }
  .production-group__disclosure[open] > summary { padding-bottom: var(--production-space-1); }
  .production-group__body {
    margin: 0 var(--production-space-4) 0 calc(var(--production-space-4) + 5px);
    padding: var(--production-space-1) 0 var(--production-space-1) var(--production-space-3);
  }
  .production-characteristics__head { display: none; }
  .production-characteristics__row { grid-template-columns: 1fr; gap: var(--production-space-1); }
  .production-characteristics__actions { justify-content: flex-start; }
  .production-details { grid-template-columns: 1fr; gap: 2px; }
  .production-details dt { margin-top: var(--production-space-2); }
  .production-form__actions { justify-content: flex-start; }
  turbo-frame#production-step-content > .production-form { padding: var(--production-space-4); }
  .production-login__panel { padding: var(--production-space-5); }
  .production-flash { padding-top: var(--production-space-3); }
  .production-filter { margin-left: 0; }
  .production-filter__input { width: 100%; }
  .production-context__actions { margin-left: 0; }
  .production-table { display: block; overflow-x: auto; }
  .production-pager { padding: var(--production-space-3) var(--production-space-4); }
}

@media (max-width: 520px) {
  .production-metrics,
  .production-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .production-registry-summary,
  .production-segments { grid-template-columns: 1fr; }
}

/* Контур мастера: фильтры контекста выдачи.
   Сетка, а не свободная flex-строка: подпись всегда остаётся в своей группе
   с полем; кнопки «Применить» нет — смена поля применяет фильтр сама. */
.foreman-filter__head { border-bottom: 0; min-height: auto; padding-bottom: 0; }
.foreman-filter__form {
  display: grid;
  grid-template-columns:
    minmax(190px, 1.3fr)
    minmax(180px, 1.1fr)
    minmax(140px, 0.9fr);
  align-items: end;
  gap: var(--production-space-3);
  padding: var(--production-space-3) var(--production-space-5) var(--production-space-4);
}
.foreman-field { display: grid; gap: var(--production-space-1); min-width: 0; }
.foreman-field > .production-filter__label { margin: 0; }
/* Одна высота у всех полей: иначе строка фильтра выглядит рваной.
   На узких экранах высоту поднимает общий порог 44px. */
.foreman-field > .production-filter__input { width: 100%; min-width: 0; height: 36px; padding-block: 0; }
/* Экран плана: заказ, бригада, сотрудник и статус. */
.foreman-filter__form--wide {
  grid-template-columns:
    minmax(150px, 1.15fr)
    minmax(140px, 1.05fr)
    minmax(110px, 0.8fr)
    minmax(140px, 1fr);
}

/* Полоса контекста: выбранные фильтры чипами и счётчик видимых швей.
   Она отвечает на вопрос «что я сейчас вижу», не занимая отдельной карточки. */
.foreman-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--production-space-2);
  padding: var(--production-space-2) var(--production-space-5) var(--production-space-3);
  border-top: 1px solid var(--production-line);
}
.foreman-context__counter { color: var(--production-muted); font-size: var(--production-text-sm); }
.foreman-context__stat { color: var(--production-muted); font-size: var(--production-text-sm); font-variant-numeric: tabular-nums; }
.foreman-context__reset { margin-left: auto; color: var(--production-muted); font-size: var(--production-text-sm); font-weight: 600; text-decoration: none; }
.foreman-context__reset:hover { color: var(--production-ink); text-decoration: underline; }

.foreman-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--production-space-2);
  min-height: 26px;
  padding: 0 var(--production-space-2) 0 var(--production-space-3);
  color: var(--production-ink);
  background: var(--production-accent-soft);
  border: 1px solid var(--production-accent-line);
  border-radius: 999px;
  font-size: var(--production-text-sm);
  text-decoration: none;
}
.foreman-chip:hover { background: var(--production-accent-soft-strong); }
.foreman-chip__label { color: var(--production-muted); }
.foreman-chip__value { font-weight: 600; }
.foreman-chip__remove { color: var(--production-muted); font-size: var(--production-text-md); line-height: 1; }

.foreman-filter__fallback { padding: 0 var(--production-space-5) var(--production-space-3); }

/* Группа должности: заголовок один раз, ниже — только имена сотрудников.
   Счётчик — текстом в линии капса: пилюля осталась только у секции, иначе
   на экране два одинаковых счётчика одного смысла. */
.foreman-position + .foreman-position { border-top: 1px solid var(--production-line); }
.foreman-position__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--production-space-2);
  padding: var(--production-space-3) var(--production-space-5) var(--production-space-2);
  background: var(--production-surface-muted);
}
.foreman-position__name {
  color: var(--production-muted);
  font-size: var(--production-text-xs);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.foreman-position__count { font-weight: 650; font-variant-numeric: tabular-nums; }
.foreman-position__shift { margin-left: auto; color: var(--production-subtle); font-size: var(--production-text-xs); }
.foreman-position .production-group-list .production-group:first-child { border-top: 0; }
.foreman-position .production-record-row { padding-top: var(--production-space-2); padding-bottom: var(--production-space-2); }

/* Форма выдачи: основной путь — выбрать операцию и задать нормы; поиск по
   паспорту или операции — альтернатива ему, отделённая линией «ИЛИ». */
.foreman-issue__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--production-space-3); }
.foreman-issue__or {
  margin: var(--production-space-3) 0 0;
  padding-top: var(--production-space-2);
  color: var(--production-muted);
  border-top: 1px solid var(--production-line);
  font-size: var(--production-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.foreman-issue__search { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--production-space-2); }
.foreman-issue__query { min-width: 0; }
.foreman-issue__search .production-button { min-height: 38px; }
/* Inline-форма строки: кнопки под полями у левого края, а не у правого края
   колонки полей — там они читались как случайно поставленные. */
.production-record-edit .production-form__actions { justify-content: flex-start; }
.production-record-edit__context { color: var(--production-muted); }

/* Переключатель охвата экрана плана. */
/* Статус запуска в шапке: бейдж и свёрнутые детали. */
.production-page-header__meta { display: flex; align-items: center; gap: var(--production-space-2); }
.foreman-run > summary { cursor: pointer; color: var(--production-muted); font-size: var(--production-text-sm); list-style: none; }
.foreman-run > summary::-webkit-details-marker { display: none; }
.foreman-run > summary::after { content: "▾"; margin-left: var(--production-space-1); }
.foreman-run[open] > summary::after { content: "▴"; }
.foreman-run .production-details { margin: var(--production-space-2) 0 0; grid-template-columns: 96px minmax(0, 1fr); font-size: var(--production-text-sm); }

/* Плоская карточка — для пустого состояния, без двойной рамки и тени. */
@media (max-width: 900px) {
  .production-action,
  .production-button,
  .production-group__disclosure > summary { min-height: 44px; }
  .production-filter__input,
  .production-form input:not([type="hidden"]):not([type="submit"]),
  .production-form select { min-height: 44px; }
}

/* Две колонки: поля не оставляют пустых клеток и не переносятся по одному. */
@media (max-width: 960px) {
  .foreman-filter__form--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .foreman-filter__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .foreman-context { padding: var(--production-space-2) var(--production-space-4) var(--production-space-3); }
  .foreman-context__reset { margin-left: 0; }
  .foreman-position__head { padding: var(--production-space-3) var(--production-space-4) var(--production-space-2); }
  .foreman-position__shift { margin-left: 0; flex-basis: 100%; }
  .foreman-issue__grid { grid-template-columns: 1fr; }
  .foreman-issue__search { grid-template-columns: 1fr; }
}

/* Четыре метрики в одну колонку на узком экране съедают почти пол-экрана:
   в контуре мастера держим 2×2. */

/* Мобильные браузеры (особенно iOS) автоматически зумируют страницу при
   фокусе на поле с кеглем меньше 16px: после клика по select визуальный
   вьюпорт «схлопывается» и кажется, что окно уменьшилось. Держим 16px
   у полей ввода и выбора на узких экранах. */
@media (max-width: 760px) {
  .production-form input:not([type="hidden"]):not([type="checkbox"]):not([type="submit"]),
  .production-form select,
  .production-filter__input { font-size: var(--production-text-lg); }
}

@media (max-width: 560px) {
  .foreman-filter__form { grid-template-columns: 1fr; }
}

/* На длинном списке контекст должен оставаться на виду: фильтр прилипает
   к верху, чтобы мастер не терял выбранный заказ при прокрутке. */
@media (min-width: 761px) and (min-height: 900px) {
  .foreman-filter {
    position: sticky;
    top: 0;
    z-index: 3;
    align-self: start;
  }
}

/* На невысоких окнах липкий фильтр с полосой контекста может съесть больше
   трети экрана — там он прокручивается вместе с содержимым. */

/* В контуре мастера действие остаётся в строке и на телефоне: перенос
   кнопки на отдельную строку удваивал высоту каждого сотрудника. */
@media (max-width: 900px) {
  .foreman-position .production-record-row { align-items: center; }
  .foreman-position .production-record-row__actions {
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
  }
}

/* Ритм задаёт только gap контейнера: собственные отступы детей давали
   24/16/16 вперемешку. */
.production-main > * { margin-block: 0; }
.production-main > turbo-frame { display: grid; gap: var(--production-space-4); align-content: start; min-width: 0; }
.production-main > turbo-frame > * { margin-block: 0; }

/* ==== Строгий каркас: шапка по сетке, гайд-popover, строки, аффордансы ==== */

/* Шапка повторяет сетку каркаса: бренд/роль в колонке сайдбара,
   заголовок и действия — в колонке контента. */
.production-header {
  display: grid;
  grid-template-columns: var(--production-sidebar-width) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  min-height: 76px;
}
.production-header__brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--production-space-1);
  min-width: 0;
  padding: var(--production-space-4);
  border-right: 1px solid var(--production-line);
}
.production-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--production-space-5);
  min-width: 0;
  padding: var(--production-space-4) var(--production-gutter);
}
.production-header__title { min-width: 0; }
/* Узкие страницы без сайдбара: та же колонка контента, без бренда. */
.production-header--narrow { display: block; }
.production-header--narrow .production-header__bar {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--production-space-4) var(--production-gutter);
}
.production-header__actions .production-button--quiet { white-space: nowrap; }

/* Popover — примитив всплывающей панели: в потоке не занимает места, пока его
   не открыли. От него расширяются гайд и панель завершения по QR, чтобы
   подложка, тень и закрытие по Esc не разъезжались между панелями. */
.production-popover {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(720px, calc(100vw - 32px));
  max-height: min(80vh, 720px);
  padding: var(--production-space-5);
  color: var(--production-ink);
  background: var(--production-panel);
  border: 1px solid var(--production-line-strong);
  border-radius: var(--production-radius-lg);
  box-shadow: var(--production-shadow-raised);
  overflow-y: auto;
}
.production-popover::backdrop { background: rgba(23, 42, 62, 0.18); }
.production-popover__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--production-space-4);
  margin-bottom: var(--production-space-3);
}
.production-popover__head h2 { font-size: var(--production-text-xl); font-weight: 650; }
.production-guide-panel .production-guide__body { padding: 0; }

/* Панель завершения по QR: один герой — камера, затем ручной код, затем лента
   пачки листов. Подложка плотнее гайдовой: за панелью меняются строки и
   метрики, и движение под слабой подложкой оттягивает взгляд. */
.foreman-qr { width: min(560px, calc(100vw - 32px)); }
.foreman-qr::backdrop { background: rgba(23, 42, 62, 0.32); }
.foreman-qr__body { display: grid; gap: var(--production-space-3); }
.foreman-qr__video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--production-surface-sunken);
  border: 1px solid var(--production-line-strong);
  border-radius: var(--production-radius-md);
}
.foreman-qr__hint { color: var(--production-muted); font-size: var(--production-text-sm); }
.foreman-qr__form {
  display: grid;
  gap: var(--production-space-2);
  padding-top: var(--production-space-3);
  border-top: 1px solid var(--production-line);
}
.foreman-qr__entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--production-space-2); }
.foreman-qr__input { min-width: 0; }
.foreman-qr__feed {
  display: grid;
  gap: var(--production-space-1);
  max-height: 144px;
  margin: 0;
  padding: var(--production-space-2) 0 0;
  overflow-y: auto;
  border-top: 1px solid var(--production-line);
  font-size: var(--production-text-sm);
  list-style: none;
  scrollbar-width: thin;
}
.foreman-qr__line { color: var(--production-muted); }
.foreman-qr__code { font-weight: 600; font-variant-numeric: tabular-nums; }
.foreman-qr__line--success .foreman-qr__code { color: var(--production-positive); }
.foreman-qr__line--error .foreman-qr__code { color: var(--production-warning); }
.foreman-qr__detail { color: var(--production-ink); }

/* Строка реестра: переключатель раскрытия — компактная кнопка в строке,
   второй полосы summary больше нет. */
.production-action--toggle {
  gap: var(--production-space-1);
  min-height: 24px;
  padding: 0 var(--production-space-2);
  color: var(--production-muted);
  background: var(--production-surface-muted);
  border-color: var(--production-line);
  border-radius: 999px;
  font-size: var(--production-text-xs);
}
.production-action--toggle:hover { color: var(--production-ink); background: var(--production-surface-sunken); }
.production-action__chevron {
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--production-chevron) center / 12px 12px no-repeat;
  mask: var(--production-chevron) center / 12px 12px no-repeat;
  transform: rotate(0deg);
  transition: transform 0.15s ease;
}
.production-group:has(> details[open]) .production-action__chevron { transform: rotate(90deg); }
.production-group-list .production-group { border-top-color: var(--production-line-strong); }
.production-group:has(> details[open]) .production-group__body {
  padding-top: var(--production-space-2);
  border-top: 1px solid var(--production-line-strong);
}

/* Навигация в строке отличается от мутации стрелкой, а inline-ссылка —
   подчёркиванием: один смысл — один аффорданс. */
.production-action--nav::after {
  content: "→";
  margin-left: var(--production-space-1);
  color: var(--production-subtle);
}
.production-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--production-accent-line-strong);
  text-underline-offset: 2px;
}
.production-link:hover { text-decoration-color: var(--production-accent-strong); }

@media (max-width: 1024px) {
  .production-header__bar { padding: var(--production-space-4) var(--production-gutter); }
}

@media (max-width: 900px) {
  .production-header,
  .production-header--narrow { display: flex; flex-direction: column; gap: var(--production-space-3); padding: var(--production-space-4); }
  .production-header__brand { flex-direction: row; align-items: baseline; gap: var(--production-space-2); padding: 0; border-right: 0; }
  .production-header__bar,
  .production-header--narrow .production-header__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--production-space-3);
    width: 100%;
    max-width: none;
    padding: 0;
  }
  .production-header__actions { width: 100%; }
  .production-action--toggle { min-height: 44px; }
  .production-popover { width: calc(100vw - 16px); max-height: 88vh; padding: var(--production-space-4); }
}

@media (max-width: 600px) {
  .production-header__brand .production-eyebrow { display: none; }
  .production-header__note { display: none; }
}

/* Скрытая подпись details не должна занимать полосу: видимая кнопка в строке
   управляет раскрытием, summary остаётся только для семантики. */
.production-group__disclosure > summary.production-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}