/* Basic layout structure */
html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.d-flex {
  display: flex;
  flex: 1;
}

/* ─── Top Bar ───────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 1rem;
  height: 56px;
  background-color: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #dee2e6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 1;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.topbar-toggle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  border: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.3s ease;
}

.topbar-toggle:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

/* Left toggle — tinted with the current section's color */
.topbar-toggle-section {
  background-color: var(--section-color, #001738);
  color: #ffffff;
}

.topbar-toggle-section:hover,
.topbar-toggle-section:focus {
  background-color: color-mix(in srgb, var(--section-color, #001738) 88%, black);
  color: #ffffff;
}

.topbar-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.topbar-breadcrumbs {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.topbar-breadcrumbs::-webkit-scrollbar { display: none; }

.topbar-breadcrumbs .breadcrumb {
  flex-wrap: nowrap;
  white-space: nowrap;
  font-size: 0.9rem;
}

.topbar-breadcrumbs .breadcrumb-item a {
  color: #6c757d;
}
.topbar-breadcrumbs .breadcrumb-item a:hover {
  color: var(--section-color, #0d6efd);
}
.topbar-breadcrumbs .breadcrumb-item.active {
  color: #001738;
  font-weight: 500;
}
.topbar-breadcrumbs .breadcrumb-item i {
  color: var(--section-color, #6c757d);
}

/* Section-tinted accent bar under the topbar */
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--section-color, transparent);
  opacity: 0.7;
  transition: background 0.3s ease;
  pointer-events: none;
}

/* ─── Left Sidebar (section sub-pages) ──────────────────────── */
.sidebar {
  width: 280px;
  flex-shrink: 0;
  background-color: rgba(248, 249, 250, 0.98);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px);
  transition: transform 0.3s ease, visibility 0.3s ease;
  position: fixed;
  top: 68px;
  left: 12px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 1030;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.sidebar-hidden {
  transform: translateX(calc(-100% - 24px));
  visibility: hidden;
}

.sidebar-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: rgba(248, 249, 250, 0.95);
  backdrop-filter: blur(10px);
  padding: 1rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #dee2e6;
  min-height: 56px;
  border-radius: 16px 16px 0 0;
}

.sidebar-title {
  color: #001738;
  font-size: 1.25rem;
}

.sidebar-body {
  flex-grow: 1;
  overflow-y: auto;
  scrollbar-width: thin;
}

.sidebar-body::-webkit-scrollbar {
  width: 5px;
}

.sidebar-body::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.sidebar-body::-webkit-scrollbar-thumb {
  background: #888;
}

.sidebar-footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background-color: rgba(248, 249, 250, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid #dee2e6;
  min-height: 56px;
  display: flex;
  align-items: center;
  padding: 1rem 0;
  border-radius: 0 0 16px 16px;
}

.sidebar .nav-link {
  color: #475569;
  border-radius: 10px;
  padding: 0.55rem 0.9rem;
  margin-bottom: 0.1rem;
  font-size: 0.9rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar .nav-link:hover {
  background-color: rgba(0, 0, 0, 0.04);
  color: #001738;
}

/* Group headings inside a section's sidenav: a label, not a control. */
.sidebar .nav-heading {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4, #8a8474);
  padding: 0.9rem 0.9rem 0.25rem;
}
.sidebar .nav-heading:first-child {
  padding-top: 0.25rem;
}

.sidebar .nav-link.active {
  color: var(--section-color, #001738);
  font-weight: 600;
  background-color: color-mix(in srgb, var(--section-color, #0d6efd) 10%, transparent);
}

.sidebar-title i {
  color: var(--section-color, #001738);
}

.sidebar h5 {
  color: var(--section-color, #001738);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
  padding: 0 0.9rem;
}

/* ─── Right Sidebar (Section Switcher — Google Apps grid) ───── */
.section-switcher {
  width: 320px;
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 0.99);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px);
  max-height: 560px;
  transition: transform 0.3s ease, visibility 0.3s ease, opacity 0.3s ease;
  position: fixed;
  top: 68px;
  right: 12px;
  border-radius: 20px;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.16),
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  z-index: 1030;
  overflow: hidden;
}

.section-switcher-hidden {
  transform: translateX(calc(100% + 24px)) scale(0.96);
  opacity: 0;
  visibility: hidden;
}

.section-switcher-header {
  padding: 1.25rem 1.25rem 0.75rem;
  display: flex;
  align-items: flex-start;
  background: transparent;
  border: none;
}

.section-switcher-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #001738;
  letter-spacing: -0.01em;
}

/* The header's home link: the house icon sits where "Apps" stood. */
.section-switcher-home {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.section-switcher-home i {
  font-size: 1.1rem;
  color: var(--section-color, #20261d);
}
.section-switcher-home:hover .section-switcher-title {
  text-decoration: underline;
}

.section-switcher-subtitle {
  font-size: 0.7rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.section-switcher-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 0.25rem 0.75rem 1.25rem;
}

/* ─── Apps Grid ──────────────────────────────────────────────── */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
  padding: 0.5rem 0.25rem;
}

.app-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0.25rem 0.85rem;
  border-radius: 14px;
  text-decoration: none;
  color: #334155;
  position: relative;
  transition: background-color 0.18s ease, transform 0.18s ease;
  --tile-color: #001738;
}

.app-tile:hover {
  background-color: rgba(0, 0, 0, 0.035);
  transform: translateY(-1px);
}

.app-tile:active {
  transform: translateY(0) scale(0.98);
}

.app-tile-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--tile-color) 12%, transparent);
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.app-tile:hover .app-tile-icon-wrap {
  background-color: color-mix(in srgb, var(--tile-color) 18%, transparent);
  transform: scale(1.05);
}

.app-tile-icon-wrap i {
  font-size: 1.5rem;
  color: var(--tile-color);
  line-height: 1;
}

.app-tile-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: #475569;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Active app: subtle indicator dot below the icon */
.app-tile-active .app-tile-label {
  color: var(--tile-color);
  font-weight: 600;
}

.app-tile-active::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--tile-color);
}

/* ─── Content area (always full width; sidebars are overlays) ─ */
.content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 0px);
  width: 100%;
  margin-left: 0;
}

body:not(:has(.sidebar)) .content-wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

.container {
  flex: 1 0 auto;
  margin: 0 auto;
  width: 100%;
  padding: 1rem;
}

/* ─── Page header (section-themed) ───────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--edge);
}

.page-header-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background-color: color-mix(in srgb, var(--section-color, #001738) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.page-header-icon i {
  font-size: 1.4rem;
  color: var(--section-color, #001738);
}

.page-header-text {
  flex: 1;
  min-width: 0;
}

.page-header-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #001738;
  margin: 0;
  letter-spacing: -0.01em;
}

.page-header-subtitle {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 2px 0 0;
}

.page-header-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* The unit switcher, right-aligned in the title row on unit-scoped sections. */
.page-header-scope {
  display: flex;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
}

/* ─── Cards ──────────────────────────────────────────────────── */
.card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

/* ─── Subtle button (for Back / Cancel) ──────────────────────── */
/* More visible than btn-outline-secondary, less heavy than btn-secondary. */
.btn-subtle {
  background-color: var(--rail);
  border: 1px solid var(--edge-2);
  color: var(--ink-2);
  font-weight: 500;
}
.btn-subtle:hover {
  background-color: color-mix(in srgb, var(--ink-3) 12%, var(--rail));
  border-color: var(--ink-4);
  color: var(--ink);
}
.btn-subtle:active,
.btn-subtle:focus {
  background-color: color-mix(in srgb, var(--ink-3) 18%, var(--rail));
  border-color: var(--ink-3);
  color: var(--ink);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--ink-3) 25%, transparent);
}

.card-hover:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  transition: all 0.2s ease;
}

/* Field group for dl-style key/value pairs */
.detail-list {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0.5rem 1rem;
  margin: 0;
}

.detail-list dt {
  color: #6b7280;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  align-self: center;
}

.detail-list dd {
  margin: 0;
  color: #111827;
  font-size: 0.95rem;
  align-self: center;
}

/* User avatar */
.user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  flex-shrink: 0;
}

.user-avatar-lg {
  width: 72px;
  height: 72px;
  font-size: 1.6rem;
  border-radius: 20px;
}

/* ─── Backdrop overlay (shared, used by both sidebars) ───────── */
.sidebar-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1025;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-backdrop.show {
  opacity: 1;
  visibility: visible;
}

/* ─── Mobile adjustments ─────────────────────────────────────── */
@media (max-width: 991px) {
  .container {
    padding: 1rem 15px;
  }

  .topbar {
    padding: 0.5rem 0.75rem;
  }

  .topbar-logo img {
    height: 28px !important;
  }

  .sidebar {
    left: 8px;
    top: 64px;
    height: calc(100vh - 72px);
    width: min(280px, calc(100vw - 16px));
  }

  .section-switcher {
    right: 8px;
    top: 64px;
    height: calc(100vh - 72px);
    width: min(240px, calc(100vw - 16px));
  }
}

/* Turbo frame loading indicator */
turbo-frame[busy] {
  opacity: 0.6;
}

/* ─── Sign-in page ───────────────────────────────────────────── */
.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}

.login-card {
  width: 400px;
  max-width: 100%;
  padding: 2rem;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.login-brand {
  text-align: center;
  margin-bottom: 1.5rem;
}

.login-brand-name {
  margin-top: 0.75rem;
  font-weight: 600;
  color: #001738;
  letter-spacing: -0.01em;
}

/* ─── Pulse mission-control (2026-09-17) ─────────────────────────
   A control room at night. The plant's paper token NAMES live on, re-valued to
   the dark signal palette, so every rule that themed on them (topbar, sidebars,
   switcher, cards, tables, forms, buttons) follows without being rewritten. The
   light/dark axis is inverted: --deck darkens to the page, the --ink scale
   brightens to text. Pulse is cloud/web-accessed, so the mockup's fonts load
   from Google Fonts (linked in application.html.erb): Chakra Petch for the HUD
   display, IBM Plex Sans/Mono for body and telemetry. */
:root {
  color-scheme: dark;
  --deck:  #050c11;   /* the page — near-black teal */
  --panel: #0b1a24;   /* a card, a bar */
  --rail:  #0f2735;   /* a card header, a raised control */
  --well:  #06111a;   /* recessed: inputs, table heads, code */
  --edge:   #173340;
  --edge-2: #245160;
  --ink:   #e9f7f8;   /* brightest text (was the darkest) */
  --ink-2: #cbe0e3;
  --ink-3: #84a2ab;
  --ink-4: #7693a0;   /* 5.43:1 on panel, 4.74:1 on rail */
  --green: #14c8bd;  --green-ink: #7fe6dc;   /* primary / links → cyan */
  --rust:  #ff3d84;  --rust-ink:  #ff86b3;   /* danger → magenta */
  --gold:  #ffb42a;  --gold-ink:  #ffcf7a;   /* warning → amber */
  /* the full signal set the control-room views draw on */
  --cyan:#26e6e6; --lime:#9dff57; --magenta:#ff3d84; --amber:#ffb42a; --violet:#9280ff; --sky:#38a8ff;
  --disp: "Chakra Petch", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* depth and overlays, per theme */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-bar: 0 2px 14px rgba(0, 0, 0, 0.45);
  --shadow:     0 12px 48px rgba(0, 0, 0, 0.6);
  --shadow-lg:  0 24px 60px rgba(0, 0, 0, 0.5);
  --veil: rgba(2, 6, 9, 0.72);          /* behind a modal */
  --on-accent: #04140c;                 /* text on a --green fill */
  /* Bootstrap's own RGB triplets (it composes rgba() from these, so they cannot
     be var() references): the SCSS palette's, restated here so light can swap them. */
  --bs-primary-rgb: 20, 200, 189;   --bs-secondary-rgb: 36, 81, 96;  --bs-success-rgb: 157, 255, 87;
  --bs-info-rgb: 56, 168, 255;      --bs-warning-rgb: 255, 180, 42;  --bs-danger-rgb: 255, 61, 132;
  --bs-light-rgb: 15, 39, 53;       --bs-dark-rgb: 5, 12, 17;
  --bs-body-color-rgb: 203, 224, 227; --bs-body-bg-rgb: 11, 26, 36; --bs-emphasis-color-rgb: 233, 247, 248;
  --bs-link-color-rgb: 127, 230, 220; --bs-focus-ring-color: rgba(20, 200, 189, 0.25);
}

/* Day shift: a light palette of its own under the SAME token names, so every
   rule above and below follows. Not the dark signal hues on paper: warm-neutral
   surfaces, stepped greys held to 4.5:1 on a panel, and deep, desaturated
   signals (teal, magenta-red, amber-brown, green) that badges wear as dark text
   on a pale tint of the same hue. Set by the switcher's theme toggle
   (theme_controller.js) on <html data-theme>. */
:root[data-theme="light"] {
  color-scheme: light;
  --deck:  #f5f7f8;   /* cool near-white page */
  --panel: #ffffff;   /* cards, bars, modals: white on a crisp edge */
  --rail:  #eef2f4;   /* the selected row, table heads */
  --well:  #f8fafb;   /* recessed: inputs, table heads */
  --edge:   #dbe1e5;
  --edge-2: #bfc8ce;
  --ink:   #0f1417;   /* 18.5:1 on white */
  --ink-2: #262f35;   /* 13.6:1 */
  --ink-3: #4a555c;   /* 7.65:1 on white, 6.8:1 on rail */
  --ink-4: #56626a;   /* 6.27:1 on white, 5.56:1 on rail */
  --green: #0a766e;  --green-ink: #075a54;   /* primary, links: teal, 5.48:1 / 8.08:1 */
  --rust:  #c4124f;  --rust-ink:  #9c0d3f;   /* danger: magenta-red, 5.92:1 / 8.26:1 */
  --gold:  #a86400;  --gold-ink:  #7a4300;   /* warning: amber, 4.68:1 / 7.98:1 */
  --cyan:#0e6f78; --lime:#2f7a1a; --magenta:#c4124f; --amber:#a86400; --violet:#4f43a3; --sky:#1d6fb0;
  --lime-ink: #235e13; --sky-ink: #155587;
  --tint: 16%;        /* a badge's or chip's pale ground: its hue over white */
  --shadow-sm:  0 1px 2px rgba(16, 24, 32, 0.06), 0 1px 3px rgba(16, 24, 32, 0.08);
  --shadow-pop: 0 6px 16px rgba(16, 24, 32, 0.10);
  --shadow-bar: 0 1px 0 rgba(0, 0, 0, 0.04);
  --shadow:     0 12px 36px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 16px 40px rgba(0, 0, 0, 0.08);
  --veil: rgba(23, 25, 27, 0.32);
  --on-accent: #ffffff;
  --bs-primary-rgb: 10, 118, 110;   --bs-secondary-rgb: 74, 85, 92;   --bs-success-rgb: 47, 122, 26;
  --bs-info-rgb: 29, 111, 176;      --bs-warning-rgb: 168, 100, 0;    --bs-danger-rgb: 196, 18, 79;
  --bs-light-rgb: 238, 242, 244;    --bs-dark-rgb: 15, 20, 23;
  --bs-body-color-rgb: 38, 47, 53;  --bs-body-bg-rgb: 255, 255, 255;  --bs-emphasis-color-rgb: 15, 20, 23;
  --bs-link-color-rgb: 7, 90, 84;   --bs-focus-ring-color: rgba(10, 118, 110, 0.25);
  --bs-code-color: var(--rust-ink);
}

/* Bootstrap's root variables read the tokens, in either theme: its components
   (dropdowns, nav tabs, list groups, form validation, borders) follow the toggle. */
:root {
  --bs-body-bg: var(--panel);
  --bs-body-color: var(--ink-2);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--ink-3);
  --bs-tertiary-color: var(--ink-4);
  --bs-border-color: var(--edge);
  --bs-link-color: var(--green-ink);
  --bs-link-hover-color: var(--green);
  --bs-primary: var(--green); --bs-danger: var(--rust); --bs-warning: var(--gold);
  --bs-success: var(--lime);  --bs-info: var(--sky);
  --bs-form-valid-color: var(--lime); --bs-form-valid-border-color: var(--lime);
  --bs-form-invalid-color: var(--rust); --bs-form-invalid-border-color: var(--rust);
}
/* The light theme's Bootstrap surfaces (dark keeps its current look). */
:root[data-theme="light"] {
  --bs-secondary-bg: var(--rail);
  --bs-tertiary-bg: var(--well);
  --bs-border-color-translucent: rgba(11, 26, 36, 0.12);
}
/* Section hues: the layout and each switcher tile carry both (section_hue_style);
   the theme picks one. */
.main-wrapper { --section-color: var(--section-dark); }
.app-tile { --tile-color: var(--tile-dark, #001738); }
:root[data-theme="light"] .main-wrapper { --section-color: var(--section-light); }
:root[data-theme="light"] .app-tile { --tile-color: var(--tile-light, var(--ink-2)); }

/* The Growel logo: the white-lettered art in the dark, the navy-lettered art
   (growel_logo_light.png: growel_icon.png cut out and cropped) on paper. */
.brand-logo-light { display: none; }
:root[data-theme="light"] .brand-logo-dark { display: none; }
:root[data-theme="light"] .brand-logo-light { display: inline-block; }

/* ── Light: components that the dark look lights up, set flat on paper ──── */
:root[data-theme="light"] .topbar { background-color: color-mix(in srgb, var(--panel) 92%, transparent); }
:root[data-theme="light"] .topbar::after { box-shadow: none; opacity: 0.9; }
:root[data-theme="light"] .topbar-toggle { box-shadow: none; }
:root[data-theme="light"] .topbar-toggle-section,
:root[data-theme="light"] .topbar-toggle-section:hover,
:root[data-theme="light"] .topbar-toggle-section:focus {
  background-color: color-mix(in srgb, var(--section-color) 12%, var(--panel));
  color: var(--section-color);
  border: 1px solid color-mix(in srgb, var(--section-color) 22%, var(--panel));
}
:root[data-theme="light"] .topbar .btn-dark.topbar-toggle {
  background: var(--panel); color: var(--ink-2); border: 1px solid var(--edge);
}
:root[data-theme="light"] .topbar .btn-dark.topbar-toggle:hover { background: var(--rail); color: var(--ink); }
:root[data-theme="light"] :is(.page-header-icon, .app-tile-icon-wrap, .landing-tile .app-tile-icon-wrap) { box-shadow: none; }
:root[data-theme="light"] .page-header-icon { background-color: color-mix(in srgb, var(--section-color) 18%, var(--panel)); }
:root[data-theme="light"] .app-tile-icon-wrap { background-color: color-mix(in srgb, var(--tile-color) 12%, var(--panel)); }
:root[data-theme="light"] .app-tile:hover .app-tile-icon-wrap { background-color: color-mix(in srgb, var(--tile-color) 18%, var(--panel)); }
:root[data-theme="light"] .sidebar .nav-link.active {
  background-color: color-mix(in srgb, var(--section-color) 10%, var(--panel)); color: var(--section-color);
}
:root[data-theme="light"] .card { background: var(--panel); border-color: var(--edge); box-shadow: var(--shadow-sm); }
:root[data-theme="light"] .card-header { background: var(--rail); }
:root[data-theme="light"] .login-card { background: var(--panel); box-shadow: var(--shadow); border-color: var(--edge); }
:root[data-theme="light"] .btn-primary { box-shadow: none; }
:root[data-theme="light"] .btn-primary:hover, :root[data-theme="light"] .btn-primary:focus { background: var(--green-ink); border-color: var(--green-ink); }
:root[data-theme="light"] :is(.table thead th, .table thead.table-light th, .table-light) {
  background: var(--rail); color: var(--ink-2); border-bottom-color: var(--edge-2);
}
:root[data-theme="light"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: color-mix(in srgb, var(--rail) 45%, transparent); --bs-table-striped-color: var(--ink-2);
}
:root[data-theme="light"] .table-hover > tbody > tr:hover > * { background: color-mix(in srgb, var(--section-color, var(--green)) 5%, var(--panel)); }
:root[data-theme="light"] :is(code, .form-control, .form-select) { background-color: var(--panel); border-color: var(--edge-2); }
:root[data-theme="light"] :is(.form-control:focus, .form-select:focus) {
  background-color: var(--panel); border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent);
}
:root[data-theme="light"] .scope-menu-list { background: var(--panel); }
:root[data-theme="light"] .typeahead-list { background: var(--panel); box-shadow: var(--shadow-pop); }
:root[data-theme="light"] .user-avatar { background: var(--green); }
/* Badges: pale ground, dark text of the same hue. */
:root[data-theme="light"] .badge.bg-success { background-color: color-mix(in srgb, var(--lime) 14%, var(--panel)) !important; color: var(--lime-ink); }
:root[data-theme="light"] .badge.bg-danger  { background-color: color-mix(in srgb, var(--rust) 12%, var(--panel)) !important; color: var(--rust-ink); }
:root[data-theme="light"] .badge.bg-warning { background-color: color-mix(in srgb, var(--gold) 14%, var(--panel)) !important; color: var(--gold-ink); }
:root[data-theme="light"] .badge.text-bg-secondary { background-color: color-mix(in srgb, var(--ink-3) 14%, var(--panel)) !important; color: var(--ink-2) !important; }
:root[data-theme="light"] :is(.text-bg-primary, .text-bg-success, .text-bg-danger, .text-bg-info, .text-bg-dark) { color: #fff !important; }
:root[data-theme="light"] .text-bg-warning { background-color: color-mix(in srgb, var(--gold) 16%, var(--panel)) !important; color: var(--gold-ink) !important; }
:root[data-theme="light"] .text-bg-light { background-color: var(--rail) !important; color: var(--ink) !important; }
:root[data-theme="light"] .badge.qc-status-hold { background: color-mix(in srgb, var(--gold) 22%, var(--panel)); }
:root[data-theme="light"] .badge.qc-status-concession { background: color-mix(in srgb, var(--rust) 10%, color-mix(in srgb, var(--gold) 14%, var(--panel))); color: var(--rust-ink); }
:root[data-theme="light"] .badge.qc-status-completed { background: var(--rail); color: var(--ink-2); }
:root[data-theme="light"] .material-card-highlight { box-shadow: 0 0 0 1px var(--gold); }
/* The MMN screens on paper: white cards lifted off the page by a shadow, not grey
   fills inside white; the current step a warm cream; headings in the darkest ink. */
:root[data-theme="light"] :is(.gate-step, .gate-ctl-step) { background: var(--panel); box-shadow: var(--shadow-sm); }
:root[data-theme="light"] :is(.gate-step, .gate-ctl-step).is-current { background: color-mix(in srgb, var(--gold) 8%, var(--panel)); border-color: var(--gold); }
:root[data-theme="light"] :is(.gate-card, .gate-xhead, .gate-mmn-index, .gate-mmn-items) { background: var(--panel); box-shadow: var(--shadow-sm); }
:root[data-theme="light"] .gate-card:hover { box-shadow: var(--shadow-pop); }
:root[data-theme="light"] :is(.page-header-title, .gate-mmn-no, .gate-step-name) { color: var(--ink); font-weight: 600; }
:root[data-theme="light"] .mmn-open-in-chip.is-current { background: color-mix(in srgb, var(--chip-color) 18%, var(--panel)); }

/* Pills Bootstrap compiled with the palette's hex: the lit control, in either theme. */
.nav-pills { --bs-nav-pills-link-active-bg: var(--green); --bs-nav-pills-link-active-color: var(--on-accent); }
/* Buttons Bootstrap compiled with the dark palette's hex: re-pointed at the
   tokens in light (btn-primary/outline-secondary/outline-danger/dark are
   themed below for both). */
:root[data-theme="light"] :is(.btn-success, .btn-info, .btn-warning, .btn-danger, .btn-secondary) {
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
:root[data-theme="light"] .btn-success   { --bs-btn-bg: var(--lime);  --bs-btn-border-color: var(--lime);  --bs-btn-hover-bg: color-mix(in srgb, var(--lime) 85%, #000);  --bs-btn-hover-border-color: var(--lime);  --bs-btn-active-bg: var(--lime); }
:root[data-theme="light"] .btn-info      { --bs-btn-bg: var(--sky);   --bs-btn-border-color: var(--sky);   --bs-btn-hover-bg: color-mix(in srgb, var(--sky) 85%, #000);   --bs-btn-hover-border-color: var(--sky);   --bs-btn-active-bg: var(--sky); }
:root[data-theme="light"] .btn-warning   { --bs-btn-bg: var(--gold);  --bs-btn-border-color: var(--gold);  --bs-btn-hover-bg: color-mix(in srgb, var(--gold) 85%, #000);  --bs-btn-hover-border-color: var(--gold);  --bs-btn-active-bg: var(--gold); }
:root[data-theme="light"] .btn-danger    { --bs-btn-bg: var(--rust);  --bs-btn-border-color: var(--rust);  --bs-btn-hover-bg: color-mix(in srgb, var(--rust) 85%, #000);  --bs-btn-hover-border-color: var(--rust);  --bs-btn-active-bg: var(--rust); }
:root[data-theme="light"] .btn-secondary { --bs-btn-bg: var(--ink-3); --bs-btn-border-color: var(--ink-3); --bs-btn-hover-bg: var(--ink-2); --bs-btn-hover-border-color: var(--ink-2); --bs-btn-active-bg: var(--ink-2); }
:root[data-theme="light"] .btn-light     { --bs-btn-bg: var(--rail);  --bs-btn-border-color: var(--edge);  --bs-btn-color: var(--ink); --bs-btn-hover-bg: var(--edge); --bs-btn-hover-color: var(--ink); --bs-btn-active-bg: var(--edge); }
:root[data-theme="light"] .btn-outline-primary { --bs-btn-color: var(--green-ink); --bs-btn-border-color: var(--green); --bs-btn-hover-bg: var(--green); --bs-btn-hover-border-color: var(--green); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--green); --bs-btn-active-color: #fff; }
:root[data-theme="light"] .btn-outline-success { --bs-btn-color: var(--lime); --bs-btn-border-color: var(--lime); --bs-btn-hover-bg: var(--lime); --bs-btn-hover-border-color: var(--lime); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--lime); --bs-btn-active-color: #fff; }
:root[data-theme="light"] .btn-outline-warning { --bs-btn-color: var(--gold-ink); --bs-btn-border-color: var(--gold); --bs-btn-hover-bg: var(--gold); --bs-btn-hover-border-color: var(--gold); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--gold); --bs-btn-active-color: #fff; }
:root[data-theme="light"] .btn-outline-info    { --bs-btn-color: var(--sky); --bs-btn-border-color: var(--sky); --bs-btn-hover-bg: var(--sky); --bs-btn-hover-border-color: var(--sky); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--sky); --bs-btn-active-color: #fff; }
:root[data-theme="light"] .btn-outline-light   { --bs-btn-color: var(--ink-3); --bs-btn-border-color: var(--edge-2); --bs-btn-hover-bg: var(--rail); --bs-btn-hover-color: var(--ink); --bs-btn-active-bg: var(--rail); }
:root[data-theme="light"] .btn-outline-dark    { --bs-btn-color: var(--ink); --bs-btn-border-color: var(--ink); --bs-btn-hover-bg: var(--ink); --bs-btn-hover-color: var(--deck); --bs-btn-active-bg: var(--ink); }

body { background: var(--deck); color: var(--ink-2); font-family: var(--body); }

.topbar {
  background-color: color-mix(in srgb, var(--well) 82%, transparent);
  border-bottom-color: var(--edge);
  box-shadow: var(--shadow-bar);
}
.breadcrumb-item, .breadcrumb-item.active { color: var(--ink-3); }
.breadcrumb-item a { color: var(--green-ink); }

.sidebar, .section-switcher { background: var(--panel); border-color: var(--edge-2); }
.sidebar-header, .section-switcher-header { border-bottom: 1px solid var(--edge); }
.sidebar .nav-link { color: var(--ink-2); }
.sidebar .nav-link:hover { background: var(--rail); color: var(--ink); }
.sidebar .nav-link.active { background: var(--well); color: var(--ink); }
.section-switcher-title { color: var(--ink); }
.section-switcher-subtitle { color: var(--ink-3); }

.section-switcher-footer {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--edge);
  font-size: 0.85rem;
  color: var(--ink-2);
}

.card { background: var(--panel); border-color: var(--edge); }
.card-header { background: var(--rail); border-bottom-color: var(--edge); color: var(--ink); }
.card-body { color: var(--ink-2); }

.table { color: var(--ink-2); border-color: var(--edge); --bs-table-bg: transparent; }
.table > :not(caption) > * > * { border-bottom-color: var(--edge); }
.table-light, .table thead.table-light th { background: var(--well); color: var(--ink-3); }
.table-hover > tbody > tr:hover > * { background: var(--rail); }

/* background-COLOR, never the `background` shorthand: the only thing that says
   a <select> is a dropdown is the caret Bootstrap paints as a background-image
   on .form-select, and the shorthand resets that image to none. This file loads
   after the built bootstrap, so the shorthand here flattened every select in
   the app, silently. Guarded by test/assets/stylesheets_test.rb. */
code, .form-control, .form-select { background-color: var(--well); color: var(--ink); border-color: var(--edge-2); }
.form-control:focus, .form-select:focus {
  background-color: var(--well); color: var(--ink);
  border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}

a { color: var(--green-ink); }
.text-muted { color: var(--ink-3) !important; }

.btn-primary { background: var(--green); border-color: var(--green-ink); }
.btn-primary:hover, .btn-primary:focus { background: var(--green-ink); border-color: var(--green-ink); }
.btn-dark, .topbar .btn-dark { background: var(--ink); border-color: var(--ink); color: var(--deck); }
.btn-outline-secondary { color: var(--ink-3); border-color: var(--edge-2); }
.btn-outline-secondary:hover { background: var(--rail); color: var(--ink); border-color: var(--edge-2); }
.btn-outline-danger { color: var(--rust-ink); border-color: var(--rust); }
.btn-outline-danger:hover { background: var(--rust); border-color: var(--rust); color: #fff; }

.badge.bg-success { background-color: var(--green) !important; }
.badge.bg-danger { background-color: var(--rust) !important; }
.badge.bg-warning { background-color: var(--gold) !important; color: #fff; }

/* Production run + bin status badges — signal tints, tokenised (no hard-coded hues). */
.badge.status-open     { background: color-mix(in srgb, var(--green) var(--tint, 20%), transparent); color: var(--green-ink); }
.badge.status-closed   { background: var(--rail); color: var(--ink-3); }
.badge.status-consumed { background: color-mix(in srgb, var(--green) var(--tint, 20%), transparent); color: var(--green-ink); }
.badge.status-unmapped { background: color-mix(in srgb, var(--gold) var(--tint, 22%), transparent); color: var(--gold-ink); }

/* ── paper, part two: the hard-coded stragglers the sweep found ──
   Everything Bootstrap now generates from the remapped SCSS palette; these are
   the rules in THIS file (and a few components) that carried their own navy,
   slate and white and out-specified or ignored the first theme block. */
a:hover { color: var(--green); }

.topbar-breadcrumbs .breadcrumb-item a { color: var(--green-ink); }
.topbar-breadcrumbs .breadcrumb-item a:hover { color: var(--green); }
.topbar-breadcrumbs .breadcrumb-item.active { color: var(--ink); }
.topbar-breadcrumbs .breadcrumb { --bs-breadcrumb-divider-color: var(--ink-4); }

.sidebar-header, .sidebar-footer { background-color: var(--panel); border-color: var(--edge); }
.sidebar-title { color: var(--ink); }
.sidebar { box-shadow: var(--shadow-pop); }
.sidebar-body::-webkit-scrollbar-track { background: var(--rail); }
.sidebar-body::-webkit-scrollbar-thumb { background: var(--edge-2); }

.section-switcher { box-shadow: var(--shadow-pop); }
.app-tile, .app-tile-label { color: var(--ink-2); }
.app-tile:hover { background: var(--rail); }

.page-header { border-bottom-color: var(--edge); }
.page-header-title { color: var(--ink); }
.page-header-subtitle { color: var(--ink-3); }

.login-card { background: var(--panel); border-color: var(--edge-2); box-shadow: var(--shadow-pop); }
.login-brand-name { color: var(--ink); }

.btn-subtle { background: var(--rail); border-color: var(--edge-2); color: var(--ink-2); }
.btn-subtle:hover { background: var(--well); color: var(--ink); border-color: var(--edge-2); }
.btn-subtle:active, .btn-subtle:focus {
  background: var(--well); color: var(--ink); border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent);
}

.detail-list dt { color: var(--ink-3); }
.detail-list dd { color: var(--ink); }

.user-avatar { background: linear-gradient(135deg, var(--green), var(--gold)); }

input::placeholder, textarea::placeholder { color: var(--ink-4); }

/* ─── The house landing (2026-08-05) ─────────────────────────────
   Root is a page now instead of a redirect: the mark, a live clock, and the
   sections this user can open. Centred and calm on the paper deck. */
.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: clamp(1.5rem, 6vh, 3.5rem) 1rem 3rem;
  text-align: center;
}

.landing-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: clamp(1.5rem, 5vw, 2.5rem) clamp(1.75rem, 7vw, 3.5rem);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
}

/* The logo art is drawn on white; multiply drops that white into whatever the
   deck is doing behind it. */
.landing-mark {
  width: min(268px, 62vw);
  height: auto;
  mix-blend-mode: multiply;
}

.landing-wordmark {
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
               "Times New Roman", serif;
  font-size: clamp(1.45rem, 4vw, 2.1rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.landing-clock {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: 0.9rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink);
}

.landing-clock-hm {
  font-size: clamp(3.1rem, 13vw, 5.25rem);
  font-weight: 500;
  letter-spacing: -0.025em;
}

.landing-clock-sec {
  font-size: clamp(1.2rem, 4.5vw, 1.85rem);
  font-weight: 500;
  color: var(--ink-3);
}

.landing-clock-sec::before {
  content: ":";
  margin-right: 0.05em;
  opacity: 0.5;
}

.landing-date {
  margin: 0.45rem 0 0;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

/* The launchpad. Same tile language as the switcher, sized for a landing.

   THREE PER ROW, which is the owner's instruction and also what the switcher
   beside it has always done (.apps-grid) — the two panels show the same tiles
   and had no business laying them out differently.

   A GRID rather than a wrapping flex row, because "three per row" is a thing a
   grid can be told and a flex row can only be nudged towards: with five
   sections the old row wrapped 4 + 1 at a wide window and 3 + 2 at a narrower
   one, so the shape of the launchpad depended on how far the reader had dragged
   their browser. The columns are fixed at the tile's own width and the track is
   centred, so a short last row sits under the middle of the one above it
   instead of hugging the left edge.

   The count steps DOWN rather than letting the tiles shrink: three 122px tiles
   on a phone is three cramped tiles, and the label under the icon is the part
   that goes first. Two columns hold from ~34rem, one below ~22rem — the widths
   at which a row of tiles plus the deck's own padding stops fitting. */
.landing-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 132px));
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}

@media (max-width: 34rem) {
  .landing-tiles { grid-template-columns: repeat(2, minmax(0, 132px)); }
}

@media (max-width: 22rem) {
  .landing-tiles { grid-template-columns: minmax(0, 132px); }
}

.landing-tile {
  gap: 0.7rem;
  padding: 1.25rem 0.5rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--edge);
}

.landing-tile:hover {
  background: var(--rail);
  border-color: var(--edge-2);
}

.landing-tile .app-tile-icon-wrap { width: 58px; height: 58px; border-radius: 17px; }
.landing-tile .app-tile-icon-wrap i { font-size: 1.75rem; }
.landing-tile .app-tile-label { font-size: 0.85rem; font-weight: 600; }

.landing-empty {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-3);
}

/* ── The deck carries the hour ───────────────────────────────────
   The clock controller writes data-daypart (dawn/day/dusk/night) and
   data-season on .landing; everything below is CSS. Three colours are all
   that change — registered so they INTERPOLATE, which is what makes the turn
   of the hour read as light moving rather than a slide flipping. Browsers
   without @property still get the right colours, just instantly. */
@property --wash-horizon { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --wash-sky     { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --wash-veil    { syntax: "<color>"; inherits: true; initial-value: transparent; }

.landing {
  --wash-horizon: transparent;
  --wash-sky: transparent;
  --wash-veil: transparent;
  --season-accent: var(--edge-2);
  transition: --wash-horizon 2s ease, --wash-sky 2s ease, --wash-veil 2s ease;
}

/* One fixed pane behind the whole page: a glow off the bottom edge, a wash
   down from the top, and a veil over everything. Day leaves all three clear,
   so the deck is simply paper. */
.landing::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: -8%;
  bottom: -8%;
  z-index: -1;
  pointer-events: none;
  background-color: var(--wash-veil);
  background-image:
    radial-gradient(125% 55% at 50% 108%, var(--wash-horizon) 0%, transparent 70%),
    linear-gradient(to bottom, var(--wash-sky) 0%, transparent 50%);
}

/* The horizon breathes by a couple of percent of the viewport over the best
   part of a minute — enough to be alive, not enough to notice you are watching
   it. A transform, so the compositor carries it and nothing repaints; and only
   when there is something to move, which means a plain-paper working day is
   perfectly still. */
.landing[data-daypart="dawn"]::before,
.landing[data-daypart="dusk"]::before,
.landing[data-daypart="night"]::before {
  animation: landing-light 54s ease-in-out infinite alternate;
}

@keyframes landing-light {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -2.5%, 0); }
}

/* Dawn (5–8): a faint gold rising off the horizon. */
.landing[data-daypart="dawn"] {
  --wash-horizon: color-mix(in srgb, var(--gold) 34%, transparent);
  --wash-sky: color-mix(in srgb, var(--gold) 9%, transparent);
  --wash-veil: transparent;
}

/* Day (8–17): plain paper. The room needs no help. */
.landing[data-daypart="day"] {
  --wash-horizon: transparent;
  --wash-sky: transparent;
  --wash-veil: transparent;
}

/* Dusk (17–20): a rust band low down with the last gold above it. */
.landing[data-daypart="dusk"] {
  --wash-horizon: color-mix(in srgb, var(--rust) 30%, transparent);
  --wash-sky: color-mix(in srgb, var(--gold) 11%, transparent);
  --wash-veil: transparent;
}

/* Night (20–5): the deck deepens toward ink, darkest overhead. */
.landing[data-daypart="night"] {
  --wash-horizon: color-mix(in srgb, var(--gold) 7%, transparent);
  --wash-sky: color-mix(in srgb, var(--ink) 20%, transparent);
  --wash-veil: color-mix(in srgb, var(--ink) 16%, transparent);
}

.landing-panel {
  border-top: 2px solid var(--season-accent);
  transition: box-shadow 2s ease, border-top-color 2s ease;
}

/* …and the panel is the lit thing in the dim room. */
.landing[data-daypart="night"] .landing-panel {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 26%, transparent),
    0 0 90px 20px color-mix(in srgb, var(--gold) 13%, transparent),
    var(--shadow-pop);
}

/* A hairline of the season across the top of the panel. Restraint is the
   point: one 2px rule, four times a year. */
.landing[data-season="summer"]  { --season-accent: var(--rust); }
.landing[data-season="monsoon"] { --season-accent: var(--green); }
.landing[data-season="harvest"] { --season-accent: var(--gold); }
.landing[data-season="winter"]  { --season-accent: var(--green-ink); }

@media (prefers-reduced-motion: reduce) {
  .landing[data-daypart]::before { animation: none; }
  .landing, .landing-panel { transition: none; }
}

/* ─── Mission-control character (2026-09-17) ─────────────────────
   The dark tokens re-skinned every surface; these rules give the surfaces the
   control-room CHARACTER — HUD display type, mono telemetry, signal-edged
   instrument panels — on top of the existing structure, no markup changes. */

/* Display face on titles; HUD labels and telemetry in mono. */
h1, h2, h3, h4, h5,
.page-header-title, .sidebar-title, .section-switcher-title,
.login-brand-name, .card-header {
  font-family: var(--disp);
  letter-spacing: -0.01em;
}
.page-header-subtitle, .sidebar .nav-heading, .detail-list dt,
.section-switcher-subtitle, .badge {
  font-family: var(--mono);
  letter-spacing: 0.06em;
}
/* Plant data reads as instrument: mono, tabular, in the tables and detail lists. */
.table, .detail-list dd, code { font-variant-numeric: tabular-nums; }
.table td, .table th { font-family: var(--mono); }

/* Status strip: the section-tinted underline glows. */
.topbar { backdrop-filter: blur(8px); }
.topbar::after {
  opacity: 1;
  box-shadow: 0 0 12px var(--section-color, var(--cyan));
}

/* Cards → instrument panels: a dark gradient body, a section-tinted hairline
   inside the edge, a deeper shadow so they sit above the deck. */
.card {
  background: linear-gradient(180deg, var(--panel), var(--well));
  box-shadow:
    var(--shadow-sm),
    0 0 0 1px color-mix(in srgb, var(--section-color, var(--edge-2)) 14%, transparent) inset;
}
.card-header {
  background: color-mix(in srgb, var(--section-color, var(--rail)) 12%, var(--rail));
  color: var(--ink);
  letter-spacing: 0.01em;
}

/* Telemetry table head: a sunk strip, small uppercase mono. */
.table thead th, .table thead.table-light th {
  background: var(--well);
  color: var(--ink-3);
  border-bottom: 1px solid var(--edge-2);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.table-hover > tbody > tr:hover > * {
  background: color-mix(in srgb, var(--section-color, var(--cyan)) 8%, var(--rail));
}

/* Primary button reads like a lit control. */
.btn-primary {
  color: var(--on-accent);
  font-weight: 600;
  box-shadow: 0 0 16px color-mix(in srgb, var(--green) 32%, transparent);
}
.btn-primary:hover, .btn-primary:focus { color: var(--on-accent); }

/* Section-colour icon chips (page header, tiles) get a soft glow. */
.page-header-icon, .app-tile-icon-wrap, .landing-tile .app-tile-icon-wrap {
  box-shadow: 0 0 22px color-mix(in srgb, var(--section-color, var(--tile-color, var(--cyan))) 22%, transparent);
}

/* Sign-in card: a lit panel in the dark room. */
.login-card {
  background: linear-gradient(180deg, var(--panel), var(--well));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cyan) 16%, transparent),
    var(--shadow-lg);
}

/* ── Scope switchers: location (topbar) + org unit (page title row) ───────────────────────────
   No .d-flex in here: layout.css gives every .d-flex `flex: 1`, which would
   stretch the chips across the topbar. */
.scope-switcher { position: relative; display: inline-flex; align-items: center; }
.scope-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.2rem 0.65rem; border: 1px solid var(--edge); border-radius: 999px;
  font-family: "IBM Plex Mono", monospace; font-size: 0.85rem; color: var(--ink);
  white-space: nowrap;
}
.scope-menu > summary { cursor: pointer; list-style: none; }
.scope-menu > summary::-webkit-details-marker { display: none; }
.scope-menu[open] > summary .bi-chevron-down { transform: rotate(180deg); }
.scope-menu-list {
  position: absolute; right: 0; top: calc(100% + 0.3rem); z-index: 1030;
  min-width: 14rem; margin: 0; padding: 0.3rem 0; list-style: none;
  background: var(--well); border: 1px solid var(--edge); border-radius: 0.5rem;
  box-shadow: var(--shadow-pop);
}
.scope-menu-item { display: block; padding: 0.4rem 0.8rem; color: var(--ink); text-decoration: none; }
.scope-menu-item:hover { background: color-mix(in srgb, var(--section-color, var(--cyan)) 12%, transparent); }
.scope-code { font-family: "IBM Plex Mono", monospace; }
.scope-name { margin-left: 0.6rem; color: var(--ink-3); }
.scope-form { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; }
.scope-select { width: auto; }
@media (max-width: 575.98px) {
  .scope-name { display: none; }
}

/* ── Raw data nav ──────────────────────────────────────────────────────────
   Native <details>: the group summary is the section heading and the toggle. */
.sidebar .nav-group { list-style: none; }
.sidebar .nav-group > details > summary.nav-heading {
  display: flex; align-items: center; gap: 0.4rem; cursor: pointer; list-style: none;
}
.sidebar .nav-group > details > summary::-webkit-details-marker { display: none; }
.sidebar .nav-group-chevron { margin-left: auto; transition: transform 0.15s ease; }
.sidebar .nav-group > details[open] .nav-group-chevron { transform: rotate(180deg); }
.sidebar .nav-group .nav-link .bi { margin-left: 0.3rem; font-size: 0.8em; color: var(--ink-3); }
.records-table td { white-space: nowrap; font-size: 0.8rem; }

/* ── Gate: list + detail ─────────────────────────────────────────────────────
   Flex rows written without .d-flex (layout.css gives every .d-flex `flex: 1`). */
.gate-list-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.gate-dot.is-mine { box-shadow: 0 0 0 1px var(--panel), 0 0 0 2px var(--ink-3); }
/* The MMN register's tabs (Gate::MmnRegisterComponent): each tab's count, and a queue card's Now mark. */
.mmn-tab-count { font-family: "IBM Plex Mono", monospace; font-size: var(--t12); color: var(--ink-3); margin-left: 0.25rem; }
.nav-link.active .mmn-tab-count { color: var(--ink); }
.badge.gate-now { background: color-mix(in srgb, var(--cyan) var(--tint, 20%), transparent); color: var(--ink); }
.gate-row-vehicle { font-family: "IBM Plex Mono", monospace; }
.gate-row.active .gate-row-state, .gate-row.active .text-muted { color: inherit !important; }

/* ── The modal (layouts/_modal, modal_controller) ──────────────────────────── */
.pmodal {
  width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem);
  padding: 0; border: 1px solid var(--edge-2); border-radius: 0.5rem;
  background: var(--panel); color: var(--ink-2); box-shadow: var(--shadow);
}
.pmodal::backdrop { background: var(--veil); }
.pmodal-card { position: relative; padding: 1rem 1.25rem 1.25rem; }
.pmodal-close {
  position: absolute; top: 0.5rem; right: 0.6rem; border: 0; background: none;
  color: var(--ink-3); font-size: 1.1rem; line-height: 1; padding: 0.25rem;
}
.pmodal-close:hover { color: var(--ink); }
.pmodal-title { font-family: var(--disp); font-size: 1.05rem; margin: 0 2rem 0.9rem 0; color: var(--ink); }
.pmodal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }

/* ── Type-ahead (typeahead_controller) ─────────────────────────────────────── */
.typeahead { position: relative; }
.typeahead-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 0.25rem 0;
  list-style: none; max-height: 14rem; overflow-y: auto;
  background: var(--rail); border: 1px solid var(--edge-2); border-radius: 0.375rem;
}
.typeahead-item, .typeahead-empty { padding: 0.3rem 0.75rem; font-size: 0.875rem; }
.typeahead-item { cursor: pointer; }
.typeahead-item.active, .typeahead-item:hover { background: color-mix(in srgb, var(--green) var(--tint, 24%), transparent); color: var(--ink); }
.typeahead-empty { color: var(--ink-3); }

/* ── Gate: vehicle cards ───────────────────────────────────────────────────── */
.gate-card { display: block; color: inherit; text-decoration: none; }
.gate-card ~ .gate-list-empty { display: none; }
.gate-card:hover { border-color: var(--edge-2); color: inherit; }
.gate-card-body { cursor: pointer; }
.gate-card-people { margin-top: 0.15rem; }
.gate-crossing { display: block; }
.gate-crossing-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin: 0 2rem 0.8rem 0; }
.gate-section-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
/* The lab's marks (Qc::VerdictDotComponent, Qc::StatusChipComponent) */
.qc-dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--rail); vertical-align: middle; }
.qc-dot-pass { background: var(--green); }
.qc-dot-fail { background: var(--rust); }
.qc-dot-none { background: var(--rail); }
.badge.qc-status-pending    { background: color-mix(in srgb, var(--gold) var(--tint, 26%), transparent); color: var(--gold-ink); }
.badge.qc-status-completed  { background: color-mix(in srgb, var(--ink-3) 22%, transparent); color: var(--ink); }
.badge.qc-status-passed     { background: color-mix(in srgb, var(--green) var(--tint, 26%), transparent); color: var(--green-ink); }
.badge.qc-status-failed     { background: color-mix(in srgb, var(--rust) var(--tint, 26%), transparent); color: var(--rust-ink); }
.badge.qc-status-hold       { background: color-mix(in srgb, var(--gold) var(--tint, 40%), transparent); color: var(--gold-ink); }
.badge.qc-status-concession { background: color-mix(in srgb, var(--gold) 55%, var(--rust) 20%); color: var(--rust-ink); }
.badge.qc-status-closed     { background: var(--rail); color: var(--ink-3); }
.qc-closed { opacity: .8; }
/* The register card (Gate::RegisterCardComponent): the number, then one rail per item. */
.gate-card .gate-mmn-no { font-size: var(--t16); letter-spacing: 0.02em; }

/* ── Gate: card badges, filters, icons ───────────────────────────────────── */
.gate-waiting { background: color-mix(in srgb, var(--gold) var(--tint, 22%), transparent); color: var(--gold-ink); }
.gate-qc-warning { background: color-mix(in srgb, var(--rust) var(--tint, 26%), transparent); color: var(--rust-ink); }
#gate-scope { margin-right: 0.75rem; }
.gate-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.gate-icons { display: inline-flex; align-items: center; gap: 0.25rem; }
.btn-icon { color: var(--ink-3); border: 1px solid transparent; padding: 0.15rem 0.4rem; line-height: 1; }
.btn-icon:hover, .btn-icon:focus-visible { color: var(--ink); border-color: var(--edge-2); }
.gate-dl dd { margin-bottom: 0.35rem; }
.gate-cell-typeahead { min-width: 12rem; }
.gate-register-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.75rem; }
.gate-filter-field :is(.form-control, .form-select) { min-width: 9rem; }
.gate-filter-typeahead { min-width: 13rem; }
.gate-filter-search { min-width: 14rem; flex: 1 1 14rem; max-width: 24rem; }

/* ── Materials: the register as a tree of cards (Materials::TreeComponent) ─── */
.materials-node { margin-bottom: 0.4rem; }
.materials-node .materials-node { margin-left: 1.1rem; }
.materials-node-summary { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none;
  padding: 0.35rem 0.5rem; border-radius: 0.375rem; background: var(--rail); color: var(--ink); }
.materials-node-summary::-webkit-details-marker { display: none; }
.materials-node-chevron { transition: transform 0.15s ease; color: var(--ink-3); }
.materials-node[open] > .materials-node-summary .materials-node-chevron { transform: rotate(90deg); }
.materials-node-body { padding: 0.5rem 0 0.25rem; }
.materials-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-left: 1.1rem; }
@media (max-width: 960px) { .materials-cards { grid-template-columns: 1fr; } }
.material-card .card-body { padding: 0.6rem 0.75rem; }
.material-card-head { display: flex; align-items: center; gap: 0.5rem; }
.material-card-code { font-family: var(--mono); }
.material-card-name { color: var(--ink); margin: 0.15rem 0 0.35rem; }
.material-card-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0.2rem 1.25rem; margin: 0; font-size: 0.78rem; }
.material-card-facts dt { color: var(--ink-4); font-weight: normal; }
.material-card-facts dd { margin: 0; }
.material-card-inactive { opacity: 0.6; }
.material-card-highlight { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.materials-tabs-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; border-bottom: 1px solid var(--edge); }
.materials-tabs-row .nav-tabs { border-bottom: 0; }
.materials-cards-flat { margin-left: 0; }

/* ── Gate forms: one field to a row (label above) ──────────────────────────── */
.gate-form-fields { display: flex; flex-direction: column; gap: 0.5rem; }
.gate-form-fields > .gate-field { width: 100%; }

/* ── The MMN: shell, crossing timeline, index, item timelines, step cards, drawer ──
   The approved mock-up's scale (gateline.html): type 12/13/14/16/20/24, spacing
   4/8/12/16/24/32, 36px controls (28px small). Colours are the theme tokens, so
   both palettes follow. */
:root {
  --t12: 12px; --t13: 13px; --t14: 14px; --t16: 16px; --t20: 20px; --t24: 24px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --r: 6px; --ctl: 36px; --ctl-sm: 28px;
}

/* The register is a list page; the note is its own page, full width, Back above it. */
.gate-mmn-page { display: grid; gap: var(--s3); min-width: 0; }
.gate-mmn-back { display: flex; align-items: center; }
.gate-mmn-back .btn-sm { display: inline-flex; align-items: center; height: var(--ctl); padding: 0 var(--s3); font-size: var(--t14); }
.gate-mmn-back { flex-wrap: wrap; gap: var(--s2) var(--s3); }
/* "Open in": the same note in each of the viewer's apps, each chip in its app's hue. */
.mmn-open-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin-left: auto; }
.mmn-open-in-label { color: var(--ink-3); font-size: var(--t12); letter-spacing: 0.04em; text-transform: uppercase; }
.mmn-open-in-chip { --chip-color: var(--chip-dark, var(--cyan));
  display: inline-flex; align-items: center; height: var(--ctl-sm); padding: 0 var(--s3); border: 1px solid var(--edge); border-radius: 999px;
  font-size: var(--t13); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
:root[data-theme="light"] .mmn-open-in-chip { --chip-color: var(--chip-light, var(--ink-2)); }
.mmn-open-in-chip:hover, .mmn-open-in-chip:focus-visible { color: var(--ink); border-color: var(--chip-color); }
.mmn-open-in-chip.is-current { color: var(--chip-color); border-color: var(--chip-color); background: color-mix(in srgb, var(--chip-color) 14%, transparent); font-weight: 600; }
@media (max-width: 575.98px) { .mmn-open-in { margin-left: 0; } }
.gate-mmn-frame { display: block; min-width: 0; }
.gate-mmn { display: grid; gap: var(--s3); font-size: var(--t14); }
.gate-mmn .btn-sm { display: inline-flex; align-items: center; height: var(--ctl); padding: 0 var(--s3); font-size: var(--t14); border-radius: var(--r); }
.gate-mmn .btn:not(.btn-sm) { height: var(--ctl); }

/* The header: the note's number and the crossing timeline. */
.gate-mmn-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); min-height: var(--ctl); }
.gate-mmn-no { font-family: var(--disp); font-weight: 700; font-size: var(--t24); line-height: 1.2; letter-spacing: 0.04em; color: var(--ink); }
.gate-mmn-head .gate-row-vehicle { font-size: var(--t16); color: var(--ink); }
.gate-mmn-head .ms-auto { margin-left: auto; }
.gate-xhead { display: grid; gap: var(--s3); background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r); padding: var(--s4); }
.gate-ctl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); list-style: none; padding: 0; margin: 0; }
.gate-ctl-step { position: relative; display: grid; gap: var(--s2); align-content: start; min-width: 0; background: var(--well); border: 1px solid var(--edge); border-radius: var(--r); padding: var(--s3) var(--s4); }
.gate-ctl-step::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; border-radius: var(--r) var(--r) 0 0; background: var(--edge-2); }
.gate-ctl-step.is-done::before { background: var(--green); }
.gate-ctl-step.is-warning::before { background: var(--rust); }
.gate-ctl-step.is-current::before { background: var(--gold); }
.gate-ctl-step.is-current { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, var(--well)); }
/* Pending reads from its grey bar and chip; no opacity, so its text keeps 4.5:1. */
.gate-ctl .gate-entry-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
.gate-ctl .gate-entry-facts dt { font-size: var(--t12); }
.gate-ctl .gate-entry-facts dd + dt { margin-top: var(--s1); }

/* The index column and the item's timeline. */
.gate-mmn-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.gate-mmn-grid > * { min-width: 0; }
.gate-mmn-index, .gate-mmn-items { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r); min-width: 0; }
.gate-mmn-index { position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)); }
.gate-mmn-items { display: block; }
.gate-mmn-index-head { display: flex; align-items: center; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--edge); min-height: 52px; font-size: var(--t16); color: var(--ink); }
.gate-mmn-index-head .text-muted { font-size: var(--t13); }
.gate-mmn-index-head .btn { margin-left: auto; }
.gate-ix-list { display: grid; }
.gate-ix-frame { display: block; }
.gate-ix { display: grid; gap: var(--s1); width: 100%; text-align: left; padding: var(--s3) var(--s4); border: 0; border-bottom: 1px solid var(--edge); background: transparent; color: inherit; font: inherit; line-height: 1.35; cursor: pointer; }
.gate-ix:hover { background: color-mix(in srgb, var(--rail) 60%, transparent); }
.gate-ix[aria-pressed="true"] { background: var(--rail); box-shadow: inset 3px 0 0 var(--gold); }
.gate-ix-material { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: baseline; column-gap: var(--s2); color: var(--ink); font-weight: 500; font-size: var(--t14); }
.gate-ix-name { min-width: 0; overflow-wrap: anywhere; }
.gate-ix-material .gate-qty { font-size: var(--t13); font-weight: 400; }
.gate-ix-party { font-size: var(--t13); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gate-ix-rail { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; column-gap: var(--s2); min-height: 22px; }
.gate-dots { display: inline-flex; align-items: center; gap: var(--s1); }
.gate-ix-rail .gate-chip { justify-self: end; display: inline-block; max-width: 100%; line-height: 22px; overflow: hidden; text-overflow: ellipsis; }
.gate-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--edge); }
.gate-dot.is-done { background: var(--green); }
.gate-dot.is-todo { background: var(--gold); opacity: 0.55; }
.gate-dot.is-part { background: var(--gold); }
.gate-dot.is-warn { background: var(--rust); }
.gate-ledger { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: var(--s1) var(--s2); padding: var(--s3) var(--s4); font-size: var(--t13); line-height: 1.35; }
.gate-ledger:empty { display: none; }
.gate-ledger > div:not(.gate-ledger-head) { display: contents; }
.gate-ledger-head { grid-column: 1 / -1; font-size: var(--t12); }
.gate-ledger-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gate-ledger-num { text-align: right; font-variant-numeric: tabular-nums; }

.gate-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--edge); min-height: 52px; }
.gate-item-head strong { color: var(--ink); }
.gate-item-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); flex: 1 1 auto; min-width: 0; }
.gate-item-title > .text-muted { font-size: var(--t13); }
.gate-item-party { white-space: nowrap; }
.gate-item-party::before { content: "·"; margin-right: var(--s2); color: var(--ink-3); }
.gate-item-declared { margin-left: auto; font-size: var(--t13); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gate-tl { list-style: none; padding: var(--s4) 0 var(--s1); margin: 0; }
.gate-tl-step { position: relative; padding: 0 var(--s4) var(--s3) 52px; min-width: 0; }
/* The card's frame carries the step's node and state (replaced whole by a write), and
   draws the connector against the unpositioned frame's li. */
.gate-tl-card { display: block; min-width: 0; }
.gate-tl-card::before { content: ""; position: absolute; left: 27px; top: 37px; bottom: -4px; width: 2px; background: var(--edge); }
.gate-tl-step:last-child > .gate-tl-card::before { display: none; }
.gate-tl-card.is-done::before { background: var(--green); }
.gate-tl-card.is-warning::before { background: var(--rust); }
.gate-tl-node { position: absolute; left: var(--s4); top: calc(var(--s3) + 1px); width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--edge-2); background: var(--panel); display: grid; place-items: center; font: 500 var(--t12) var(--mono); color: var(--ink-3); }
.gate-tl-card.is-done .gate-tl-node { background: var(--green); border-color: var(--green); color: var(--on-accent); }
.gate-tl-card.is-warning .gate-tl-node { background: var(--rust); border-color: var(--rust); color: var(--on-accent); }
.gate-tl-card.is-current .gate-tl-node { border-color: var(--gold); color: var(--gold-ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent); }
.gate-tl-card.is-na .gate-tl-node { border-style: dashed; color: var(--ink-4); }

/* A step card: header, roll-up, the entries in time order, the owner's action. */
.gate-step { display: grid; gap: var(--s2); min-width: 0; background: var(--well); border: 1px solid var(--edge); border-radius: var(--r); padding: var(--s3) var(--s4); }
.gate-step.is-current { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 7%, var(--well)); }
.gate-step.is-warning { border-color: color-mix(in srgb, var(--rust) 55%, transparent); }
.gate-step.is-na { border-style: dashed; background: transparent; }
.gate-step.is-na .gate-step-name { color: var(--ink-3); font-weight: 500; }
.gate-step-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--s2); min-height: 24px; }
.gate-step-name { font-weight: 600; font-size: var(--t14); color: var(--ink); }
.gate-step-owner { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t12); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); }
.gate-step-head .badge { justify-self: end; }
.gate-step-roll { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-height: 22px; }
.gate-step-roll:empty { display: none; }
:is(.gate-register, .gate-mmn) .gate-chip { display: inline-flex; align-items: center; gap: var(--s1); height: 22px; padding: 0 var(--s2); border-radius: var(--s1); font-size: var(--t12); line-height: 1; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.gate-chip.is-done { background: color-mix(in srgb, var(--green) var(--tint, 26%), transparent); color: var(--green-ink); }
.gate-chip.is-todo { background: color-mix(in srgb, var(--gold) var(--tint, 22%), transparent); color: var(--gold-ink); }
.gate-chip.is-part { background: color-mix(in srgb, var(--gold) var(--tint, 14%), transparent); color: var(--gold-ink); }
.gate-chip.is-warn { background: color-mix(in srgb, var(--rust) var(--tint, 26%), transparent); color: var(--rust-ink); }
.gate-chip.is-none { background: color-mix(in srgb, var(--ink-3) 12%, var(--panel)); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--edge); }
.gate-chip.is-info { background: color-mix(in srgb, var(--sky) var(--tint, 22%), transparent); color: var(--ink); }
.gate-entries { display: grid; gap: var(--s2); list-style: none; padding: 0; margin: 0; }
.gate-entry { display: grid; gap: var(--s1); min-width: 0; border-left: 2px solid var(--edge-2); padding: var(--s1) 0 var(--s1) var(--s3); font-size: var(--t13); line-height: 1.4; }
.gate-entry-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-height: 22px; color: var(--ink); }
/* A goods line a correction took back: struck through, its reversal beneath it. */
.gate-entry[data-entry=goods_void] > .gate-entry-head > span:first-child,
.gate-entry[data-entry=goods_void] .gate-entry-facts dd { text-decoration: line-through; color: var(--ink-3); }
.gate-entry[data-entry=goods_reversal] { border-left-style: dashed; }
.gate-entry-meta { font-size: var(--t12); line-height: 1.35; color: var(--ink-3); }
.gate-entry-facts { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s1) var(--s3); margin: 0; font-size: var(--t13); line-height: 1.4; }
.gate-entry-facts:empty { display: none; }
.gate-entry-facts dt { color: var(--ink-3); font-weight: 400; }
.gate-entry-facts dd { margin: 0; color: var(--ink); }
.gate-entry-actions, .gate-step-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.gate-entry-actions { margin-top: var(--s1); }

/* The one drawer: a right-hand sheet, single-column forms. */
.pdrawer { width: min(480px, 100vw); max-width: none; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: 0; border: 0; border-left: 1px solid var(--edge-2); background: var(--panel); color: var(--ink-2); box-shadow: var(--shadow-lg); font-size: var(--t14); }
.pdrawer::backdrop { background: var(--veil); }
.pdrawer-card { position: relative; height: 100%; overflow-y: auto; padding: var(--s4); padding-top: calc(var(--s4) + env(safe-area-inset-top, 0px)); padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px)); }
.pdrawer-close { position: absolute; top: var(--s3); right: var(--s3); width: var(--ctl-sm); height: var(--ctl-sm); border: 0; border-radius: var(--r); background: none; color: var(--ink-3); font-size: var(--t16); line-height: 1; }
.pdrawer-close:hover { color: var(--ink); background: var(--rail); }
.pdrawer-title { font-family: var(--body); font-weight: 600; font-size: var(--t16); line-height: 1.3; min-height: var(--ctl-sm); display: flex; align-items: center; margin: 0 var(--s6) var(--s4) 0; color: var(--ink); }
.pdrawer .form-control, .pdrawer .form-select { height: var(--ctl); font-size: var(--t14); }
.pdrawer textarea.form-control { height: auto; min-height: 72px; }
.pdrawer .form-label { font-size: var(--t13); color: var(--ink-3); margin-bottom: var(--s1); }
.pdrawer-actions { display: flex; justify-content: space-between; gap: var(--s2); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--edge); }
.pdrawer-actions .btn { height: var(--ctl); }

/* ── MMN alignment: one grid per repeated row ────────────────────────────────
   Rows that repeat (register cards, item lines, drawer fields, table cells) sit on
   fixed columns, so the same field starts at the same x on every row; numbers are
   right-aligned in tabular figures; every control is 36px, every chip 22px. */
.gate-mmn .gate-ix-rail .gate-chip { display: block; line-height: 22px; }

/* The register: tabs, purpose pills and filters on the 36px control line. The filter
   rules are scoped to the MMN register's filters and Stores › Movements' (the class is shared
   by other filter forms across the app, which keep their own sizing). */
.gate-register .nav-link { display: inline-flex; align-items: center; height: var(--ctl); padding: 0 var(--s3); font-size: var(--t14); }
.mmn-filters { align-items: flex-end; gap: var(--s2) var(--s3); }
.mmn-filters .form-label { font-size: var(--t13); color: var(--ink-3); margin-bottom: var(--s1); }
.mmn-filters :is(.form-control, .form-select, .btn, .input-group-text) { height: var(--ctl); font-size: var(--t14); }
.mmn-filters .btn { display: inline-flex; align-items: center; justify-content: center; }
.mmn-filters .gate-filter-field:last-child { display: flex; gap: var(--s2); }

/* A register card: the note's line on fixed columns, then its people, then one
   line per item on the item grid. */
.gate-card-body { display: grid; gap: var(--s1); padding: var(--s3) var(--s4); font-size: var(--t14); }
.gate-row-line { display: grid; grid-template-columns: 9rem 8.5rem 8.5rem minmax(0, 1fr) max-content; align-items: center; column-gap: var(--s3); min-height: 24px; }
.gate-row-line > :not(.gate-row-chips) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gate-card .gate-row-line .gate-mmn-no { font-variant-numeric: tabular-nums; }
.gate-row-purpose { font-size: var(--t13); }
.gate-row-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); min-width: 0; }
.gate-row-state { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--s2); font-size: var(--t13); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gate-row-stamp { font-family: var(--mono); font-size: var(--t12); }
.gate-card-people { font-size: var(--t13); }
.gate-card-item { display: grid; grid-template-columns: minmax(0, 1fr) 7rem minmax(0, 1fr) max-content; align-items: center; column-gap: var(--s3); min-height: 22px; font-size: var(--t13); }
.gate-card-item > :not(.gate-ix-rail) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gate-card-material { color: var(--ink); }
.gate-qty { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gate-card-item .gate-ix-rail { grid-template-columns: calc(6 * 10px + 5 * var(--s1)) 6rem; min-height: 0; }
.gate-card-item .gate-dots { justify-content: flex-end; }
.gate-rail-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The page header's actions and the unit switcher sit on the 36px control line too. */
.page-header-actions .btn { display: inline-flex; align-items: center; height: var(--ctl); padding: 0 var(--s4); font-size: var(--t14); }
.page-header-scope .scope-select { height: var(--ctl); font-size: var(--t14); }

/* The QC step's readings grid (Qc::ReadingsGridComponent, owned by QC, so styled from
   here only inside the MMN): Spec and Value are numbers, right-aligned in tabular
   figures with their headers; the verdict dot's column shows its header, centred. */
.gate-mmn table[id^="qc-readings-"] :is(th, td):is(:nth-child(2), :nth-child(3)) { text-align: right; font-variant-numeric: tabular-nums; }
.gate-mmn table[id^="qc-readings-"] col:nth-child(5) { width: 5rem !important; }
.gate-mmn table[id^="qc-readings-"] :is(th, td):nth-child(5) { text-align: center; }
.gate-mmn table[id^="qc-readings-"] th:nth-child(5) .visually-hidden { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; clip: auto !important; white-space: nowrap !important; }
.gate-mmn table[id^="qc-readings-"] td:nth-child(5) .qc-dot { vertical-align: middle; }

/* The drawer: facts and fields share one label column. */
.pdrawer-grid { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s2) var(--s3); align-items: center; margin: 0 0 var(--s3); }
.pdrawer-grid dt { color: var(--ink-3); font-weight: 400; font-size: var(--t13); }
.pdrawer-grid dd { margin: 0; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.pdrawer form > .mb-2:has(> .form-label) { display: grid; grid-template-columns: 9rem minmax(0, 1fr); column-gap: var(--s3); row-gap: var(--s1); align-items: center; }
.pdrawer form > .mb-2:has(> .form-label) > .form-label { margin: 0; }
.pdrawer form > .mb-2:has(> .form-label) > :not(.form-label) { grid-column: 2; min-width: 0; }
.pdrawer form > .mb-2:has(> textarea, > .d-block) { align-items: start; }
.pdrawer form > .mb-2:has(> textarea, > .d-block) > .form-label { padding-top: var(--s2); }
.pdrawer .btn, .pdrawer .input-group-text { font-size: var(--t14); }
.pdrawer .input-group-text { height: var(--ctl); }

@media (max-width: 575.98px) {
  .gate-row-line { grid-template-columns: max-content minmax(0, 1fr); grid-template-areas: "no veh" "pur chips" "state state"; row-gap: var(--s1); }
  .gate-row-line > .gate-mmn-no { grid-area: no; }
  .gate-row-line > .gate-row-vehicle { grid-area: veh; }
  .gate-row-line > .gate-row-purpose { grid-area: pur; }
  .gate-row-line > .gate-row-chips { grid-area: chips; }
  .gate-row-line > .gate-row-state { grid-area: state; justify-content: flex-start; }
  .gate-card-item { grid-template-columns: minmax(0, 1fr) max-content; row-gap: var(--s1); padding-top: var(--s1); }
  .gate-card-item + .gate-card-item { border-top: 1px solid var(--edge); }
  .mmn-filters > .gate-filter-field { flex: 1 1 100%; min-width: 0; max-width: none; }
  .mmn-filters > .gate-filter-field:has(input[type="date"]) { flex: 1 1 calc(50% - var(--s3)); }
  .mmn-filters .gate-filter-field :is(.form-control, .form-select) { min-width: 0; }
  .mmn-filters .gate-filter-field:last-child { justify-content: flex-end; }
  .gate-register #gate-filter { flex-wrap: nowrap; overflow-x: auto; }
  .gate-register .nav-link { white-space: nowrap; }
  .page-header-title { font-size: var(--t20); }
}
@media (max-width: 399.98px) {
  .gate-entry-facts { grid-template-columns: max-content minmax(0, 1fr); }
  .pdrawer-grid, .pdrawer form > .mb-2:has(> .form-label) { grid-template-columns: minmax(0, 1fr); }
  .pdrawer form > .mb-2:has(> .form-label) > :not(.form-label) { grid-column: auto; }
  .pdrawer-grid dd + dt { margin-top: var(--s1); }
  .pdrawer-grid { row-gap: 0; }
}

@media (max-width: 960px) { .gate-ctl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .gate-mmn-grid { grid-template-columns: minmax(0, 1fr); }
  .gate-mmn-index { position: static; }
  .gate-ix-list { display: flex; overflow-x: auto; gap: var(--s2); padding: var(--s2); }
  .gate-ix { min-width: 220px; border: 1px solid var(--edge); border-radius: var(--r); }
  .gate-ix[aria-pressed="true"] { box-shadow: inset 0 3px 0 var(--gold); }
  .gate-ledger { display: none; }
}
@media (max-width: 560px) {
  .gate-ctl { grid-template-columns: minmax(0, 1fr); }
  .gate-tl-step { padding-left: 40px; }
  .gate-tl-card::before { left: 21px; }
  .gate-tl-node { left: var(--s2); }
  :is(.gate-register, .gate-mmn) .gate-chip { white-space: normal; height: auto; min-height: 22px; padding-block: 3px; line-height: 1.25; max-width: 100%; }
  .gate-mmn .gate-ix-rail .gate-chip { white-space: nowrap; height: 22px; padding-block: 0; line-height: 22px; }
}

/* ── Production: the indent page — head, the five cards that are its tabs, the section,
      in-place grids, bars (Runsheet V6) ─────────────────────────────────────────────── */
.prod-crumbs { font-size: var(--t13); color: var(--ink-3); margin-bottom: var(--s2); }
.prod-crumbs a { color: var(--ink-2); }
.prod-head { display: block; background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r); padding: var(--s3) var(--s4); }
.prod-head-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.prod-formula { font-size: var(--t16); font-weight: 600; color: var(--ink); }
.prod-facts { display: flex; flex-wrap: wrap; gap: var(--s3); color: var(--ink-3); font-size: var(--t13); }
.prod-facts b { color: var(--ink); font-weight: 500; }
.prod-dets { font-size: var(--t13); color: var(--ink-3); }
.prod-dets[open] { display: grid; gap: var(--s1); }
.prod-acts { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--s2); }
.prod-cards { list-style: none; margin: var(--s3) 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); }
.prod-card-frame { display: block; height: 100%; }
.prod-card-link { display: grid; gap: var(--s1); height: 100%; padding: var(--s3); background: var(--well); border: 1px solid var(--edge); border-top-width: 3px; border-radius: var(--r); color: var(--ink-2); text-decoration: none; }
.prod-card-link:hover { border-color: var(--edge-2); color: var(--ink); }
.prod-card-frame.is-done .prod-card-link { border-top-color: var(--green); }
.prod-card-frame.is-active .prod-card-link { border-top-color: var(--gold); }
.prod-card-frame.is-warning .prod-card-link { border-top-color: var(--rust); }
.prod-card.is-current .prod-card-link { background: var(--panel); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 35%, transparent); }
.prod-card-top { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.prod-card-name { font-weight: 600; color: var(--ink); }
.prod-card-owner { font-size: var(--t12); color: var(--ink-3); margin-right: auto; }
.prod-card-head { font-size: 1.35rem; color: var(--ink); }
.prod-card-sub { font-size: var(--t12); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-section { display: block; background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r); }
.prod-section-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--edge); }
.prod-section-h h2 { font-size: var(--t16); margin: 0; color: var(--ink); }
.prod-section-h .spacer, .prod-grid-actions .spacer { flex: 1; }
.prod-section-b { padding: var(--s3) var(--s4); }
.prod-section-b + .prod-section-b { border-top: 1px solid var(--edge); }
.prod-label { font-size: var(--t12); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: var(--s2); }
.prod-kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s3); margin: 0; font-size: var(--t13); }
.prod-kv dt { color: var(--ink-3); font-weight: 400; }
.prod-kv dd { margin: 0; color: var(--ink); }
/* position: a visually-hidden (absolute) header label anchors inside the scroller, not on the page, so a wide grid never widens a 390px screen. */
.prod-grid-wrap { overflow-x: auto; position: relative; }
.prod-grid { width: 100%; min-width: 640px; table-layout: fixed; border-collapse: collapse; font-size: var(--t14); }
.prod-grid th, .prod-grid td { padding: var(--s2); border-bottom: 1px solid var(--edge); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }
.prod-grid th { font-weight: 500; font-size: var(--t12); color: var(--ink-3); text-align: left; }
.prod-grid .num { text-align: right; font-family: var(--mono); }
/* A sortable header (Ui::SortableHeaderComponent): the label is the link, the active column darker with its arrow. */
.sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.sort-link:hover, .sort-link:focus-visible { color: var(--ink); text-decoration: underline; }
.sort-link.is-active { color: var(--ink); }
.sort-arrow { font-size: var(--t12); margin-left: 2px; }
/* History's sort bar over the MMN cards (no header row there). */
.mmn-sort { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); font-size: var(--t13); color: var(--ink-3); }
.prod-grid tfoot th { color: var(--ink); }
.prod-grid tr.is-edit td { padding: var(--s1) var(--s2); background: var(--well); }
.prod-grid tr.is-edit input, .prod-grid tr.is-edit select { width: 100%; height: var(--ctl-sm); font-size: var(--t13); border: 1px solid var(--edge-2); border-radius: var(--r); background: var(--panel); color: var(--ink); padding: 0 var(--s2); }
.prod-grid tr.is-edit input[inputmode] { text-align: right; font-family: var(--mono); }
/* A type-ahead in a grid row (RM consumption's Add material): its match list must not be
   clipped by the cell or the scrolling wrap while it is open. */
.prod-grid tr.is-edit td:has(.typeahead) { overflow: visible; }
.prod-grid .gate-cell-typeahead { min-width: 0; }
.prod-grid-wrap:has(.typeahead-list:not([hidden])) { overflow: visible; }
.prod-grid-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); }
.prod-errors { margin: var(--s3) var(--s4) 0; }
.prod-bar { display: inline-block; width: 100%; max-width: 160px; height: 6px; border-radius: 3px; background: var(--rail); overflow: hidden; vertical-align: middle; }
.prod-bar > i { display: block; height: 100%; background: var(--green); }
.prod-bar.is-part > i { background: var(--gold); }
.prod-bar.is-over > i { background: var(--rust); }
.prod-prog { display: flex; align-items: center; gap: var(--s2); }
@media (max-width: 900px) { .prod-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .prod-acts { margin-left: 0; } }
@media (max-width: 560px) { .prod-cards { grid-template-columns: 1fr; } }
/* The production modal forms (New indent, Edit header, Complete): centred, ~720 px, one column. */
.pmodal:has(.pmodal-form) { width: min(720px, calc(100vw - 2rem)); }
.pmodal-form .form-control, .pmodal-form .form-select { height: var(--ctl); font-size: var(--t14); }
.pmodal-form textarea.form-control { height: auto; min-height: 72px; }
.pmodal-form .form-label { font-size: var(--t13); color: var(--ink-3); margin-bottom: var(--s1); }
.prod-labref { display: grid; gap: var(--s2); padding: var(--s3) 0; border-bottom: 1px solid var(--edge); }
.prod-labref:last-child { border-bottom: 0; }
.prod-labref-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.prod-conds { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s1); font-size: var(--t13); }

/* ── Production: the per-unit landing ── */
.prod-units { display: grid; gap: var(--s6); }
.prod-unit { display: grid; gap: var(--s3); }
.prod-unit-h { display: flex; align-items: baseline; gap: var(--s3); }
.prod-unit-h h2 { font-size: var(--t16); margin: 0; color: var(--ink); }
.prod-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s2); }
.prod-tile { display: grid; gap: var(--s1); padding: var(--s3); background: var(--well); border: 1px solid var(--edge); border-left: 3px solid var(--edge-2); border-radius: var(--r); font-size: var(--t13); }
.prod-tile.is-running { border-left-color: var(--green); }
.prod-tile-top { display: flex; align-items: center; gap: var(--s2); }
.prod-tile-code { font-weight: 600; color: var(--ink); }
.prod-tile-kv { display: flex; justify-content: space-between; gap: var(--s2); }
.prod-tile-kv b { color: var(--ink); font-weight: 500; }
.prod-queue { display: grid; gap: var(--s2); }
.prod-queue-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.prod-queue-h h3 { font-size: var(--t14); margin: 0; color: var(--ink); }
.prod-queue-h .spacer, .prod-icard-t .spacer { flex: 1; }
.prod-icard { display: grid; gap: var(--s2); padding: var(--s3); background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r); }
.prod-icard-t { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); color: var(--ink-2); text-decoration: none; }
.prod-icard-t:hover { color: var(--ink); }
.prod-icard-t .prod-bar { max-width: 120px; }
.prod-skus { display: grid; gap: var(--s1); }
.prod-skurow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(80px, 1fr) max-content max-content; align-items: center; gap: var(--s3); font-size: var(--t13); }
.prod-skurow-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .prod-skurow { grid-template-columns: 1fr max-content; } .prod-skurow .prod-bar { display: none; } }

/* ── Admin: landing roll-ups and registers (reuses prod-cards / prod-section / prod-grid) ── */
.admin-home { display: grid; gap: var(--s5); }
.admin-home .prod-cards { margin: 0; }
.admin-rollup.has-hue .prod-card-link { border-top-color: var(--chip-dark, var(--edge-2)); }
:root[data-theme="light"] .admin-rollup.has-hue .prod-card-link { border-top-color: var(--chip-light, var(--edge-2)); }
/* Register rows are 44 px tall: a comfortable touch target on the plant floor's tablets. */
.admin-grid tbody td { height: 44px; }
/* Level and location chips: a pill in the section's hue (section_hue_style prefix "chip"), as .mmn-open-in-chip. */
.admin-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.admin-chip { --chip-color: var(--chip-dark, var(--ink-2));
  display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s2); border: 1px solid var(--chip-color); border-radius: 999px;
  font-size: var(--t12); color: var(--chip-color); background: color-mix(in srgb, var(--chip-color) 14%, transparent); white-space: nowrap; }
:root[data-theme="light"] .admin-chip { --chip-color: var(--chip-light, var(--ink-2)); }
.admin-grid td[data-sections], .admin-grid td[data-locations] { white-space: normal; }
/* The user page: head, Sections / Locations / Sessions stacked. */
.admin-user { display: grid; gap: var(--s4); }
.admin-user .page-header { margin-bottom: var(--s2); }
.admin-user-meta { font-size: var(--t13); color: var(--ink-3); }
.admin-user-seen { margin-left: var(--s2); }
.admin-dot { display: inline-block; width: 8px; height: 8px; margin-right: var(--s2); border-radius: 50%; background: var(--chip-dark, var(--edge-2)); vertical-align: middle; }
:root[data-theme="light"] .admin-dot { background: var(--chip-light, var(--edge-2)); }
/* The level segmented control: one bordered strip, each segment a button_to form (or a mark for a reader). */
.admin-seg { display: inline-flex; border: 1px solid var(--edge-2); border-radius: var(--r); overflow: hidden; }
.admin-seg > form, .admin-seg > span { display: flex; }
.admin-seg > form + form, .admin-seg > span + span { border-left: 1px solid var(--edge-2); }
.admin-seg .btn { height: var(--ctl-sm); min-width: 56px; padding: 0 var(--s3); border: 0; border-radius: 0; font-size: var(--t13); color: var(--ink-3); background: transparent; }
.admin-seg button.btn:hover, .admin-seg button.btn:focus-visible { color: var(--ink); background: var(--well); }
.admin-seg .btn.is-current { color: var(--ink); background: var(--rail); font-weight: 600; }

/* ── QC: landing roll-ups over the lab's day (reuses prod-cards / prod-section / prod-grid / admin-chip) ── */
.qc-home { display: grid; gap: var(--s5); }
.qc-home .prod-cards { margin: 0; }
.qc-home .prod-section-h .gate-register-filters { margin: 0; }
/* Stores › Stocks: the roll-ups over the register; the live beacons take no room. */
.stock-home { display: grid; gap: var(--s5); }
.stock-home .prod-cards { margin: 0; }
/* Stores › Movements: eight columns hold their widths and scroll inside the wrap on a phone. */
#stock-movements { min-width: 960px; }
#stock-movements td { white-space: nowrap; }
.stock-beacon { display: none; }
/* A count sheet (Stock::CountSheetComponent): the head's facts, then the sheet — Counted
   typed in place in 36px tabular fields, the Difference red for a loss, green for a gain. */
.count-sheet-head { margin-bottom: var(--s3); }
.count-sheet-section .prod-grid, .count-sheet-section .prod-grid .num { font-variant-numeric: tabular-nums; }
.prod-grid.count-sheet tr.is-edit input[name^="counts["] { height: var(--ctl); font-size: var(--t14); }
.prod-grid.count-sheet tr[data-add-material] td { overflow: visible; }
.count-sheet .is-loss { color: var(--rust-ink); font-weight: 600; }
.count-sheet .is-gain { color: var(--green-ink); font-weight: 600; }
.count-sheet-summary { margin-left: var(--s2); font-weight: 400; font-size: var(--t12); color: var(--ink-3); }
/* A count just recorded, marked on the Verifications register. */
.prod-grid tr.is-highlighted td { background: color-mix(in srgb, var(--gold) 18%, transparent); }
.qc-day-chip { text-decoration: none; }
.qc-day-chip:hover, .qc-day-chip:focus-visible { color: var(--ink); }
.qc-day-chip.is-current { font-weight: 600; background: color-mix(in srgb, var(--chip-color) 28%, transparent); }
.admin-seg span.btn { cursor: default; }
.admin-chip .admin-chip-x { margin-left: var(--s1); margin-right: calc(-1 * var(--s1)); padding: 0 var(--s1); color: inherit; }

/* ── QC masters: registers with an actions column and grouped rows ── */
.admin-grid td.admin-actions { text-align: right; white-space: nowrap; }
.admin-grid td.admin-actions form { display: inline; }
.admin-grid td.admin-actions .btn + .btn, .admin-grid td.admin-actions .btn + form, .admin-grid td.admin-actions form + form { margin-left: var(--s1); }
.admin-grid tr.admin-group-head td { background: var(--well); color: var(--ink); font-weight: 600; }
.admin-grid tbody.admin-group + tbody.admin-group tr.admin-group-head td { border-top: 1px solid var(--edge-2); }
.admin-grid td .form-control-sm, .admin-grid td .form-select-sm { font-size: var(--t13); }

/* ── QC: registers and the FG lab page (reuses prod-scopes / prod-section / prod-grid / admin-grid) ── */
.qc-wide-grid { min-width: 960px; }
.qc-fg-lab { display: grid; gap: var(--s4); }
.qc-fg-lab .page-header { margin-bottom: var(--s2); }
.qc-fg-lab-shifts { margin-left: var(--s2); }
.qc-row-form { display: flex; align-items: center; gap: var(--s1); }
.qc-row-form .form-control { max-width: 112px; }
.qc-ref-input { max-width: 128px; }
.qc-analysis-acts { display: flex; gap: var(--s2); }
.qc-analysis-acts form { display: inline; }

/* ── QC: a sample's page of its own (in-process job order, external sample) — head, details, readings ── */
.qc-sample, .qc-sample-body { display: grid; gap: var(--s4); }
.qc-sample .page-header { margin-bottom: var(--s2); }
.prod-section-h .qc-row-form .form-select { max-width: 200px; }

/* ── QC: the RM sample page (the MIS analysis sheet) and the lab queue ── */
.qc-rm-facts { padding: var(--s3) var(--s4); }
.qc-fields { display: grid; gap: var(--s3); max-width: 480px; }
.qc-fields .form-label { margin-bottom: var(--s1); }
.qc-fields .form-check { margin: 0; }
.qc-status-row { display: flex; align-items: center; gap: var(--s2); }
.qc-status-row .form-select { max-width: 240px; }
.qc-lab-queue td, .qc-lab-queue th { height: 44px; }
.qc-lab-queue td a { font-weight: 500; }