:root {
  --bg-deep: #070a0d;
  --bg-shell: #090e12;
  --panel: #12181d;
  --panel-raised: #182128;
  --panel-inset: #0a1116;
  --line: rgba(148, 174, 184, 0.18);
  --line-strong: rgba(148, 174, 184, 0.34);
  --text: #e1e7e8;
  --muted: #91a0a4;
  --dim: #59676b;
  --accent: #39c6c4;
  --accent-dark: #174d50;
  --ok: #43c277;
  --warn: #f0b92e;
  --danger: #ef5350;
  --metal: #a9a49b;
  --font: Inter, "Segoe UI", Arial, sans-serif;
  --mono: "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
}

/* E0 production cells v1 */
.production-capacity-summary,
.production-order-v1,
.production-inline-preview,
.production-upgrade-card,
.production-wip,
.production-cell-row {
  min-width: 0;
  overflow-wrap: anywhere;
}

.production-capacity-summary,
.production-upgrade-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line, #344454);
  background: var(--panel, #111923);
}

.production-capacity-warning {
  color: var(--warning, #f1b45c);
}

.production-order-v1,
.production-inline-preview,
.production-wip {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--line, #344454);
}

.production-inline-preview strong {
  font: 800 9px/1.35 var(--mono);
}

.production-inline-preview span {
  color: var(--muted);
  font: 7px/1.4 var(--mono);
}

.production-order-counters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
}

.production-cell-row {
  display: grid;
  gap: 3px;
  padding: 8px;
  border-left: 3px solid var(--accent, #65c9ff);
  background: rgba(255, 255, 255, 0.03);
}

.production-cell-row.waiting-storage,
.production-cell-row.waiting-materials,
.production-cell-row.finishing-committed {
  border-left-color: var(--warning, #f1b45c);
}

.production-cell-count-control {
  display: grid;
  grid-template-columns: auto 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
}

.production-cell-count-control small {
  grid-column: 1 / -1;
}

.production-primary-command {
  min-height: 48px;
}

.standard-bottom-preview.production-upgrade-preview {
  position: sticky;
  bottom: calc(var(--bottom-nav-height, 64px) + env(safe-area-inset-bottom));
  z-index: 4;
  display: grid;
  gap: 8px;
  max-width: 100%;
  padding: 14px;
  border: 1px solid var(--accent, #65c9ff);
  background: var(--panel, #111923);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.35);
}

.production-upgrade-preview-line {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 0;
  border-top: 1px solid var(--line, #344454);
  overflow-wrap: anywhere;
}

.production-upgrade-preview-line.missing small {
  color: var(--warning, #f1b45c);
}

@media (max-width: 390px) {
  .production-screen,
  .production-screen * {
    max-width: 100%;
  }

  .production-launch-controls,
  .production-order-v1,
  .production-upgrade-card {
    width: 100%;
  }
}

/* M7.5 rare-resource and station-storage branch */
.mining-node-selector,
.m75-teaching-card,
.station-infrastructure-summary,
.station-x300-controls,
.station-x300-preview,
.warehouse-x300-source {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(70, 196, 201, 0.28);
  background: rgba(7, 16, 20, 0.78);
}

.mining-node-selector-heading,
.m75-teaching-heading,
.station-infrastructure-heading,
.station-x300-preview-heading,
.warehouse-x300-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.mining-node-selector-heading > div,
.m75-teaching-heading > div,
.station-infrastructure-heading > div,
.station-x300-preview-heading > div,
.warehouse-x300-heading > div,
.warehouse-x300-batch > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.mining-node-grid,
.station-infrastructure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.mining-node-card,
.station-infrastructure-grid > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  background: rgba(3, 11, 15, 0.68);
  color: var(--text);
  text-align: left;
}

.mining-node-card {
  cursor: pointer;
}

.mining-node-card.selected {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent), 0 0 16px rgba(70, 196, 201, 0.08);
}

.mining-node-card:disabled {
  cursor: default;
  opacity: 0.42;
}

.mining-node-card.selected:disabled {
  opacity: 1;
}

.mining-node-card small,
.station-infrastructure-grid span,
.station-infrastructure-grid small,
.warehouse-x300-source > small {
  color: var(--muted);
}

.mining-node-card > span,
.station-infrastructure-heading > span,
.warehouse-x300-heading > span {
  color: var(--accent);
  font: 800 11px/1.3 var(--mono);
}

.m75-teaching-card {
  border-color: rgba(225, 176, 72, 0.42);
  box-shadow: inset 3px 0 0 var(--warn);
}

.m75-teaching-card ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 22px;
  color: var(--text);
}

.m75-teaching-card p,
.mining-node-selector p,
.station-x300-controls > p,
.station-x300-preview > p,
.warehouse-x300-source > p {
  margin: 0;
  color: var(--muted);
}

.station-project-sections,
.m75-station-projects {
  display: grid;
  gap: 12px;
}

.station-infrastructure-summary {
  margin-bottom: 12px;
}

.station-x300-preview {
  border-color: rgba(225, 176, 72, 0.5);
  background: rgba(18, 15, 7, 0.88);
}

.warehouse-x300-source {
  margin-top: 10px;
  border-color: rgba(70, 196, 201, 0.38);
  box-shadow: inset 3px 0 0 rgba(70, 196, 201, 0.72);
}

.warehouse-x300-batch {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

@media (max-width: 390px) {
  .mining-node-grid,
  .station-infrastructure-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mining-node-selector-heading,
  .m75-teaching-heading,
  .station-infrastructure-heading,
  .station-x300-preview-heading,
  .warehouse-x300-heading,
  .warehouse-x300-batch {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Sigma-7 / Orbital Gateway P8 — functional information architecture. */
.stations-screen {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow: auto;
}

.stations-selector {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(112px, 1fr);
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.stations-selector::-webkit-scrollbar {
  display: none;
}

.stations-selector-button,
.gateway-tab {
  min-height: 36px;
  border: 1px solid rgba(112, 139, 151, 0.28);
  background: rgba(7, 16, 20, 0.72);
  color: var(--muted);
  font: 700 8px/1.2 var(--mono);
  text-transform: uppercase;
}

.stations-selector-button.active,
.gateway-tab.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(55, 196, 199, 0.1);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.ordinary-station-page,
.gateway-station-page,
.gateway-section-content,
.sigma-surface-page {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.station-page-hero,
.gateway-station-hero,
.gateway-primary-status,
.gateway-workstream,
.gateway-logistics-card,
.gateway-project-card,
.gateway-stock-list,
.sigma-empty-state,
.sigma-surface-hero,
.sigma-resource-row,
.sigma-equipment-summary,
.planetary-action-preview {
  border: 1px solid rgba(112, 139, 151, 0.26);
  background: rgba(7, 16, 20, 0.76);
  padding: 10px;
}

.station-page-hero h1,
.gateway-station-hero h1,
.gateway-primary-status h2,
.sigma-surface-hero h2,
.sigma-empty-state h2 {
  margin: 3px 0;
  color: var(--text);
  font: 800 16px/1.1 var(--mono);
  text-transform: uppercase;
}

.station-page-hero small,
.gateway-station-hero small,
.gateway-primary-status small,
.sigma-surface-hero small,
.sigma-empty-state small,
.planetary-action-preview small {
  color: var(--accent);
  font: 700 7px/1.2 var(--mono);
  letter-spacing: 0.08em;
}

.station-page-hero p,
.gateway-station-hero p,
.gateway-primary-status p,
.gateway-logistics-card p,
.gateway-project-card p,
.sigma-empty-state p,
.sigma-surface-hero p,
.planetary-action-preview p {
  margin: 6px 0;
  color: var(--muted);
  font: 8px/1.45 var(--mono);
}

.station-page-facts,
.sigma-equipment-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.station-page-facts > div,
.sigma-equipment-summary > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 7px;
  background: rgba(255, 255, 255, 0.025);
}

.station-page-facts span,
.sigma-equipment-summary span {
  color: var(--muted);
  font: 6px/1.2 var(--mono);
}

.station-page-facts strong,
.sigma-equipment-summary strong {
  color: var(--text);
  font: 800 10px/1.2 var(--mono);
}

.station-page-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.gateway-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(72px, 1fr));
  gap: 3px;
  overflow-x: auto;
}

.gateway-workstreams,
.sigma-resource-list {
  display: grid;
  gap: 6px;
}

.gateway-workstream > div:first-child,
.gateway-section-heading,
.sigma-resource-heading,
.planetary-action-preview-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.gateway-workstream strong,
.gateway-section-heading strong,
.sigma-resource-heading strong,
.planetary-action-preview-heading strong {
  color: var(--text);
  font: 800 9px/1.25 var(--mono);
}

.gateway-workstream p,
.gateway-section-heading span,
.gateway-stock-row,
.sigma-resource-meta,
.planetary-flight-card {
  color: var(--muted);
  font: 7px/1.35 var(--mono);
}

.gateway-workstream.running,
.gateway-primary-status.running,
.gateway-logistics-card.running,
.sigma-resource-row.running {
  border-color: rgba(55, 196, 199, 0.38);
}

.gateway-workstream.waiting,
.gateway-primary-status.waiting,
.gateway-logistics-card.waiting,
.gateway-project-card.waiting,
.sigma-resource-row.waiting {
  border-color: rgba(255, 183, 77, 0.45);
}

.gateway-stock-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-height: 32px;
  border-top: 1px solid rgba(112, 139, 151, 0.16);
}

.gateway-stock-row strong,
.sigma-resource-meta strong {
  color: var(--text);
}

.planetary-flight-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  padding: 8px;
  margin: 6px 0;
  background: rgba(55, 196, 199, 0.06);
}

.planetary-flight-card small {
  grid-column: 1 / -1;
}

.sigma-resource-heading > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sigma-resource-heading small {
  color: var(--muted);
  font: 6px/1.25 var(--mono);
}

.sigma-buffer-bar {
  height: 5px;
  margin: 8px 0 5px;
  background: rgba(255, 255, 255, 0.06);
}

.sigma-buffer-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.sigma-resource-row.waiting .sigma-buffer-bar span {
  background: #ffb74d;
}

.sigma-resource-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.sigma-equipment-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sigma-equipment-summary .control-button {
  grid-column: 1 / -1;
}

.planetary-action-preview {
  position: sticky;
  z-index: 4;
  bottom: 0;
  border-color: rgba(255, 183, 77, 0.58);
  box-shadow: 0 -12px 24px rgba(0, 0, 0, 0.45);
}

.planetary-action-preview-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  margin-top: 8px;
  font: 8px/1.3 var(--mono);
}

.planetary-action-preview-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 6px;
}

.gateway-section-heading > div,
.planetary-action-preview-heading > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.x300-rule-card .form-grid,
.x300-active-batch {
  display: grid;
  gap: 7px;
}

.x300-rule-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  padding: 8px;
  border: 1px solid rgba(112, 139, 151, 0.18);
  color: var(--muted);
  font: 7px/1.35 var(--mono);
}

.x300-rule-row strong {
  color: var(--text);
}

.x300-rule-row small {
  grid-column: 1 / -1;
  color: var(--accent);
}

.x300-active-batch {
  padding: 9px;
  border: 1px solid rgba(55, 196, 199, 0.24);
  background: rgba(55, 196, 199, 0.035);
}

.limited-order-card,
.production-upgrade-card {
  display: grid;
  gap: 7px;
}

.production-upgrade-card .inline-warning {
  color: #ffb74d;
}

@media (max-width: 390px) {
  .stations-screen button,
  .stations-screen select,
  .stations-screen input {
    min-height: 44px;
  }

  .gateway-tabs {
    grid-template-columns: repeat(5, minmax(82px, 1fr));
  }

  .station-page-actions {
    grid-template-columns: 1fr;
  }
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: auto;
  overflow-y: auto;
}

body,
#app {
  width: 100%;
  min-height: 100%;
  height: auto;
  margin: 0;
  overflow: visible;
}

body {
  color: var(--text);
  background:
    linear-gradient(rgba(57, 198, 196, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 198, 196, 0.03) 1px, transparent 1px),
    #0b0c0e;
  background-size: 32px 32px;
  font-family: var(--font);
  font-size: 13px;
}

button {
  border: 0;
  color: inherit;
  font: inherit;
}

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

button:disabled {
  cursor: not-allowed;
}

.coach-target {
  position: relative;
  z-index: 20;
  outline: 2px solid var(--warn) !important;
  outline-offset: 2px;
  animation: coach-target-pulse 1.15s ease-in-out infinite;
}

.form-field.coach-target {
  outline-offset: 1px;
}

@keyframes coach-target-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 2px rgba(240, 185, 46, 0.55));
  }

  50% {
    filter: drop-shadow(0 0 7px rgba(240, 185, 46, 0.95));
  }
}

@media (prefers-reduced-motion: reduce) {
  .coach-target {
    animation: none;
    filter: drop-shadow(0 0 4px rgba(240, 185, 46, 0.75));
  }
}

h1,
h2,
p {
  margin: 0;
}

.mobile-v2-page {
  width: 100%;
  min-height: 100vh;
  height: auto;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: 14px;
  overflow: visible;
}

.app-shell {
  position: relative;
  width: min(430px, 100%);
  max-width: 100%;
  min-width: 0;
  height: min(900px, calc(100vh - 28px));
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) 66px;
  overflow: hidden;
  background: var(--bg-shell);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(57, 198, 196, 0.2);
}

.app-shell * {
  min-width: 0;
}

.app-header {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 8px;
  padding: 10px 12px 9px;
  background:
    linear-gradient(135deg, transparent 0 13px, rgba(255, 255, 255, 0.025) 13px 14px, transparent 14px),
    linear-gradient(180deg, #182127, #0b1115);
  box-shadow:
    inset 0 -1px 0 rgba(57, 198, 196, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.header-primary {
  min-height: 38px;
  display: grid;
  grid-template-columns: 1fr auto 34px;
  align-items: center;
  gap: 8px;
}

.node-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.node-identity > div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.node-identity strong {
  font: 700 15px/1 var(--mono);
}

.node-identity small,
.workspace-heading small,
.unit-heading small,
.focus-header small {
  color: var(--accent);
  font: 8px/1.2 var(--mono);
}

.node-mark {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  transform: rotate(45deg);
  background: #111a20;
  box-shadow: inset 0 0 0 3px #090e12;
}

.node-mark i {
  width: 8px;
  height: 8px;
  display: block;
  background: var(--metal);
  transform: rotate(-45deg);
  clip-path: polygon(50% 0, 100% 100%, 50% 76%, 0 100%);
}

.header-title {
  color: var(--accent);
  font: 700 10px/1 var(--mono);
  white-space: nowrap;
}

.header-icon-button,
.speed-control {
  min-height: 34px;
  cursor: pointer;
  background: #151c21;
  box-shadow:
    inset 0 0 0 1px var(--line-strong),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.header-icon-button {
  width: 34px;
  padding: 0;
  color: var(--metal);
  font: 20px var(--mono);
}

.header-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 58px;
  gap: 5px;
}

.header-metric {
  min-width: 0;
  min-height: 34px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 0 0 1px var(--line);
}

.header-metric span {
  color: var(--muted);
  font: 7px/1 var(--mono);
}

.header-metric strong,
.speed-control {
  color: var(--accent);
  font: 700 12px/1 var(--mono);
}

.app-main {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background:
    linear-gradient(rgba(57, 198, 196, 0.027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 198, 196, 0.022) 1px, transparent 1px),
    var(--bg-deep);
  background-size: 22px 22px;
}

.app-main::-webkit-scrollbar {
  width: 5px;
}

.app-main::-webkit-scrollbar-thumb {
  background: var(--accent-dark);
}

.dispatcher-screen {
  display: grid;
  gap: 7px;
  padding: 8px;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
  padding: 0 2px;
}

.panel-heading strong {
  color: var(--accent);
  font: 700 9px/1 var(--mono);
}

.panel-heading span {
  color: var(--muted);
  font: 7px/1 var(--mono);
}

.system-overview {
  display: grid;
  gap: 5px;
  padding: 6px;
  background: rgba(18, 24, 29, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.station-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(87px, 1fr);
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.station-strip::-webkit-scrollbar {
  display: none;
}

.station-node {
  position: relative;
  height: 94px;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 9px 7px 7px;
  text-align: left;
  cursor: pointer;
  background: var(--panel-inset);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px var(--line);
}

.station-node::before,
.station-node::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  pointer-events: none;
}

.station-node::before {
  top: 0;
  left: 0;
  border-top: 1px solid var(--dim);
  border-left: 1px solid var(--dim);
}

.station-node::after {
  right: 0;
  bottom: 0;
  border-right: 1px solid var(--dim);
  border-bottom: 1px solid var(--dim);
}

.station-node.active {
  background: #102126;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(57, 198, 196, 0.35);
}

.station-node.active::before,
.station-node.active::after {
  border-color: var(--accent);
}

.station-node > strong {
  min-height: 20px;
  overflow: hidden;
  color: var(--metal);
  font: 700 9px/1.1 var(--mono);
  text-transform: uppercase;
}

.station-node.active > strong {
  color: var(--accent);
}

.station-capacity-label {
  color: var(--text);
  font: 9px/1 var(--mono);
}

.capacity-track,
.cycle-progress {
  position: relative;
  height: 5px;
  display: block;
  overflow: hidden;
  background: #6e7272;
}

.capacity-track i,
.cycle-progress i {
  height: 100%;
  display: block;
  background: var(--accent);
}

.station-node.waiting .capacity-track i {
  background: var(--warn);
}

.station-node.critical .capacity-track i {
  background: var(--danger);
}

.process-pips {
  display: flex;
  gap: 3px;
  height: 8px;
}

.process-pips i {
  width: 6px;
  height: 6px;
  background: #243036;
}

.process-pips i.on {
  background: var(--ok);
}

.process-pips i.wait {
  background: var(--warn);
}

.process-pips i.alert {
  background: var(--danger);
}

.station-status-legend {
  display: flex;
  gap: 6px;
  align-items: center;
}

.station-status-legend > span {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  color: var(--muted);
  font: 6px/1 var(--mono);
}

.station-status-legend i {
  width: 5px;
  height: 5px;
  background: var(--dim);
}

.station-status-legend i.running {
  background: var(--ok);
}

.station-status-legend i.waiting {
  background: var(--warn);
}

.station-status-legend i.critical {
  background: var(--danger);
}

.station-node small {
  color: var(--muted);
  font: 7px/1.1 var(--mono);
}

.ui-panel {
  position: relative;
  background: var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 4px 8px rgba(0, 0, 0, 0.25);
}

.ui-panel-bracketed::before,
.ui-panel-bracketed::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 9px;
  height: 9px;
  pointer-events: none;
}

.ui-panel-bracketed::before {
  top: 0;
  left: 0;
  border-top: 2px solid var(--accent-dark);
  border-left: 2px solid var(--accent-dark);
}

.ui-panel-bracketed::after {
  right: 0;
  bottom: 0;
  border-right: 2px solid var(--accent-dark);
  border-bottom: 2px solid var(--accent-dark);
}

.station-focus {
  display: grid;
  gap: 8px;
  padding: 11px;
}

.focus-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.focus-header h1 {
  margin-top: 3px;
  color: var(--text);
  font: 700 18px/1 var(--mono);
}

.system-state,
.status-chip {
  flex: 0 0 auto;
  padding: 5px 7px;
  font: 700 8px/1 var(--mono);
  background: var(--panel-inset);
  box-shadow: inset 0 0 0 1px var(--line);
}

.system-state.stable,
.system-state.running,
.status-chip.running {
  color: var(--ok);
}

.system-state.waiting,
.status-chip.waiting {
  color: var(--warn);
}

.system-state.critical,
.status-chip.critical {
  color: var(--danger);
}

.status-chip.idle {
  color: var(--muted);
}

.focus-stock {
  display: grid;
  gap: 5px;
  padding: 8px;
  background: var(--panel-inset);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.focus-stock-heading {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font: 8px/1 var(--mono);
}

.stock-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 12px;
}

.stock-preview > div {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 5px;
  font-size: 10px;
}

.stock-preview span {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-preview b {
  color: var(--text);
  font: 700 10px/1 var(--mono);
}

.process-selector {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.process-button {
  min-width: 0;
  min-height: 44px;
  display: grid;
  place-items: stretch;
  padding: 0;
  cursor: pointer;
  background: var(--panel-raised);
  box-shadow: inset 0 0 0 1px var(--line);
}

.process-button > span {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px;
  padding: 6px;
}

.process-button b {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  font-weight: 600;
  text-overflow: ellipsis;
}

.process-button strong {
  color: var(--text);
  font: 700 11px var(--mono);
}

.process-button.active {
  background: #123036;
  box-shadow: inset 0 -2px 0 var(--accent);
}

.process-button.active b,
.process-button.active strong {
  color: var(--accent);
}

.process-button:disabled {
  opacity: 0.42;
}

.action-workspace {
  display: grid;
  gap: 8px;
  padding: 11px;
  background: #10161b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 -1px 0 rgba(0, 0, 0, 0.8);
}

.workspace-heading,
.unit-heading,
.cycle-readout,
.unit-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.workspace-heading > div:first-child,
.unit-heading > div:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.workspace-heading h2 {
  color: var(--text);
  font: 700 18px/1.1 var(--mono);
}

.yield-readout {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.yield-readout span {
  color: var(--accent);
  font: 700 16px/1 var(--mono);
}

.yield-readout small,
.workspace-code {
  color: var(--muted);
  font: 8px/1 var(--mono);
}

.status-panel {
  display: grid;
  gap: 6px;
  padding: 8px;
  background: var(--panel-inset);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.status-list {
  display: grid;
  gap: 4px;
}

.status-row {
  width: 100%;
  min-height: 43px;
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 6px 7px;
  border: 0;
  color: var(--text);
  text-align: left;
  background: rgba(255, 255, 255, 0.025);
}

.status-row.actionable {
  cursor: pointer;
}

.status-row.actionable:active {
  background: rgba(54, 198, 201, 0.09);
}

.status-row > i {
  width: 3px;
  height: 100%;
  background: var(--muted);
}

.status-row.waiting > i {
  background: var(--warn);
}

.status-row.critical > i {
  background: var(--danger);
}

.status-row.running > i {
  background: var(--ok);
}

.status-row > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.status-row strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-row span,
.empty-inline {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

.status-row em {
  color: var(--accent);
  font: 7px/1.2 var(--mono);
  font-style: normal;
  letter-spacing: 0.04em;
}

.primary-command {
  min-height: 48px;
  padding: 10px 14px;
  color: #071113;
  font: 800 13px var(--mono);
  cursor: pointer;
  background: var(--accent);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}

.mining-unit-list {
  display: grid;
  gap: 7px;
}

.mining-scout-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  background: rgba(57, 198, 196, 0.055);
  box-shadow:
    inset 3px 0 var(--accent),
    inset 0 0 0 1px rgba(57, 198, 196, 0.2);
}

.mining-scout-action > div {
  display: grid;
  gap: 3px;
}

.mining-scout-action small {
  color: var(--accent);
  font: 700 6px var(--mono);
}

.mining-scout-action strong {
  color: var(--text);
  font: 700 9px var(--mono);
}

.mining-scout-action span {
  color: var(--muted);
  font: 7px/1.35 var(--mono);
}

.mining-scout-action .control-button {
  max-width: 105px;
  min-height: 38px;
  font: 7px/1.25 var(--mono);
}

.mining-unit {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 10px;
  background: var(--panel-inset);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.mining-unit::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--muted);
}

.mining-unit.running::before {
  background: var(--ok);
}

.mining-unit.waiting::before {
  background: var(--warn);
}

.mining-unit.critical::before {
  background: var(--danger);
}

.unit-heading strong {
  overflow-wrap: anywhere;
  font: 700 12px/1.2 var(--mono);
}

.cycle-readout {
  color: var(--muted);
  font: 9px/1 var(--mono);
}

.cycle-readout b {
  color: var(--accent);
}

.cycle-progress {
  height: 7px;
  background: #263136;
}

.unit-warning {
  padding: 7px 8px;
  color: var(--warn);
  background: rgba(240, 185, 46, 0.08);
  font-size: 9px;
  line-height: 1.35;
}

.cycle-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.cycle-button,
.control-button,
.text-danger-button {
  min-height: 40px;
  padding: 7px 8px;
  cursor: pointer;
  background: var(--panel-raised);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.cycle-button {
  color: var(--text);
  font: 700 12px var(--mono);
}

.cycle-button.primary,
.control-button.primary {
  color: var(--accent);
  box-shadow:
    inset 0 0 0 1px rgba(57, 198, 196, 0.48),
    inset 0 -2px 0 var(--accent-dark);
}

.unit-footer {
  min-height: 32px;
}

.unit-footer span {
  color: var(--muted);
  font-size: 9px;
}

.text-danger-button {
  min-height: 32px;
  color: var(--danger);
  font-size: 9px;
}

.station-drone-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding-top: 2px;
}

.control-button {
  color: var(--muted);
  font-size: 10px;
}

.control-button.danger {
  color: var(--danger);
}

.control-button:disabled {
  opacity: 0.36;
}

.empty-state {
  min-height: 100px;
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 18px;
  text-align: center;
  background: var(--panel-inset);
}

.empty-state strong {
  font: 700 13px var(--mono);
}

.empty-state span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.bottom-nav {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #090d10;
  box-shadow: inset 0 1px 0 var(--line-strong);
}

.nav-button {
  min-width: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 3px;
  padding: 6px 2px 5px;
  cursor: pointer;
  background: transparent;
  box-shadow: inset -1px 0 0 var(--line);
}

.nav-button:last-child {
  box-shadow: none;
}

.nav-button.active {
  color: var(--accent);
  background: rgba(57, 198, 196, 0.08);
  box-shadow:
    inset 0 2px 0 var(--accent),
    inset -1px 0 0 var(--line);
}

.nav-button:disabled {
  opacity: 0.42;
}

.nav-icon {
  height: 26px;
  font: 21px/1 var(--mono);
}

.nav-button small {
  max-width: 100%;
  overflow: hidden;
  font: 7px/1 var(--mono);
  text-overflow: ellipsis;
}

.toast {
  position: absolute;
  z-index: 10;
  right: 12px;
  bottom: 78px;
  left: 12px;
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 10px 13px;
  color: var(--text);
  text-align: center;
  background: #172229;
  box-shadow:
    inset 3px 0 0 var(--accent),
    0 12px 30px rgba(0, 0, 0, 0.55);
  font-size: 10px;
  line-height: 1.35;
}

@media (max-width: 520px) {
  .mobile-v2-page {
    padding: 0;
  }

  .app-shell {
    width: 100%;
    height: 100%;
  }
}

@media (max-height: 720px) {
  .app-shell {
    grid-template-rows: auto minmax(0, 1fr) 58px;
  }

  .station-node {
    height: 84px;
  }

  .nav-icon {
    height: 22px;
    font-size: 18px;
  }
}

/* Penpot Dispatcher composition: Header -> System -> Focus -> Action -> Navigation. */
button {
  border: 1px solid var(--line-strong);
  border-radius: 0;
}

.app-shell {
  width: min(390px, calc(100vw - 28px));
  height: 844px;
  flex: 0 0 844px;
  grid-template-areas:
    "header"
    "goal-compact"
    "goal-panel"
    "main"
    "contribution-preview"
    "bottom-nav";
  grid-template-rows: 62px auto auto minmax(0, 1fr) auto 74px;
  border: 1px solid #24535a;
}

.app-shell > .app-header {
  grid-area: header;
}

.app-shell > .goal-context-compact {
  grid-area: goal-compact;
}

.app-shell > .goal-context-panel {
  grid-area: goal-panel;
}

.app-shell > .app-main {
  grid-area: main;
}

.app-shell > .contribution-preview-panel {
  grid-area: contribution-preview;
}

.app-shell > .bottom-nav {
  grid-area: bottom-nav;
}

.app-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0;
  padding: 7px 10px;
  background: #0d171b;
  box-shadow:
    inset 0 -1px 0 var(--line-strong),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.app-header::before,
.panel-brackets::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  pointer-events: none;
}

.app-header::after,
.panel-brackets::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  pointer-events: none;
}

.identity {
  display: grid;
  grid-template-columns: 28px auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
}

.identity-mark {
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  color: var(--accent);
  font: 14px var(--mono);
}

.identity strong {
  font: 700 14px var(--mono);
}

.identity small {
  color: var(--accent);
  font: 7px var(--mono);
  text-transform: uppercase;
}

.header-state {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--accent);
  font: 9px var(--mono);
  white-space: nowrap;
}

.header-metrics {
  display: grid;
  grid-template-columns: auto 32px 20px;
  align-items: center;
  gap: 7px;
}

.credits {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 4px;
  text-align: right;
}

.credits strong {
  font: 700 13px var(--mono);
}

.credits span {
  color: var(--warn);
  font: 8px var(--mono);
}

.clock {
  grid-column: 1 / -1;
  min-height: 0;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  font: 7px var(--mono);
  text-align: right;
}

.icon-button {
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--text);
  background: var(--panel-raised);
  font: 14px var(--mono);
}

.briefing-button {
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
}

.briefing-button b {
  color: var(--accent);
  font: 700 7px var(--mono);
}

.app-main {
  min-height: 0;
  overflow: hidden;
  scrollbar-gutter: auto;
}

.dispatcher-screen {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.dispatcher-screen > .system-overview,
.dispatcher-screen > .system-coordination-panel {
  flex: 0 0 auto;
}

.system-overview,
.station-focus,
.related-operations-panel,
.specialized-screen {
  position: relative;
  min-width: 0;
  margin: 4px 4px 0;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}

.system-overview {
  padding: 6px 5px;
}

.panel-heading {
  min-height: 15px;
  margin-bottom: 5px;
  padding: 0;
}

.panel-heading h2 {
  color: var(--text);
  font: 700 11px var(--mono);
  text-transform: uppercase;
}

.panel-heading h2::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 13px;
  margin-right: 5px;
  vertical-align: -2px;
  background: var(--accent);
}

.panel-heading span {
  color: var(--muted);
  font: 6px var(--mono);
  text-transform: uppercase;
}

.station-strip {
  display: grid;
  grid-auto-flow: initial;
  grid-auto-columns: auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  overflow: visible;
}

.station-node {
  height: 88px;
  padding: 5px;
  display: grid;
  grid-template-rows: auto 24px auto 5px auto;
  align-content: stretch;
  gap: 3px;
  background: #0c1418;
  box-shadow: none;
}

.station-node::before,
.station-node::after {
  display: none;
}

.station-node.active {
  border-color: var(--accent);
  background: #0c1418;
  box-shadow: inset 0 0 0 1px rgba(57, 198, 196, 0.14);
}

.station-node.locked {
  opacity: 0.46;
}

.station-node > strong {
  min-height: 0;
  color: var(--text);
  font: 700 7px var(--mono);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.station-node.active > strong {
  color: var(--accent);
}

.station-signal {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
}

.station-glyph {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  color: var(--accent);
  font: 7px var(--mono);
}

.process-pips {
  display: grid;
  gap: 2px;
  height: auto;
}

.process-pips i {
  width: auto;
  height: 3px;
}

.station-capacity-label {
  font: 7px var(--mono);
}

.station-node small {
  font: 6px var(--mono);
  text-align: center;
}

.station-focus {
  padding: 7px;
  display: flex;
  flex-direction: column;
  min-height: clamp(280px, 42dvh, 340px);
  flex: 0 0 auto;
  overflow: hidden;
}

.clean-start-notice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  padding: 8px;
  color: var(--text);
  background: linear-gradient(90deg, rgba(36, 211, 204, 0.12), rgba(14, 20, 26, 0.92));
  border-left: 2px solid var(--accent);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}

.clean-start-notice > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.clean-start-notice strong {
  color: var(--text);
  font: 700 11px/1.15 var(--mono);
}

.clean-start-notice span,
.clean-start-notice small {
  color: var(--muted);
  font: 8px/1.25 var(--mono);
}

.clean-start-notice .control-button {
  min-height: 28px;
  white-space: nowrap;
}

.focus-layout {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 39% minmax(0, 1fr);
  gap: 7px;
}

.warehouse-snapshot,
.process-snapshot {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--panel-inset);
}

.warehouse-snapshot {
  padding: 7px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.snapshot-topline {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  margin-bottom: 7px;
  color: var(--accent);
  font: 7px var(--mono);
  text-transform: uppercase;
}

.warehouse-list {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 0;
  padding-right: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.warehouse-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  font: 9px var(--mono);
}

.warehouse-row span {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warehouse-row strong {
  color: var(--text);
  font-size: 10px;
}

.warehouse-row.missing strong {
  color: var(--warn);
}

.process-snapshot {
  padding: 6px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.process-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 6px;
}

.process-tabs button {
  min-height: 28px;
  padding: 4px 2px;
  color: var(--muted);
  background: var(--panel-raised);
  font: 6px var(--mono);
  text-transform: uppercase;
}

.process-tabs button.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(57, 198, 196, 0.08);
}

.process-list {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 0;
  padding-right: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.process-card {
  min-height: 48px;
  padding: 6px;
  display: grid;
  gap: 3px;
  text-align: left;
  background: #101b20;
}

.process-card.static {
  border: 1px solid var(--line-strong);
}

.process-card.selected {
  border-color: var(--warn);
  box-shadow: inset 3px 0 var(--warn);
}

.process-card strong {
  overflow: hidden;
  font: 700 7px var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.process-meta {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  color: var(--muted);
  font: 6px var(--mono);
  text-transform: uppercase;
}

.tone-waiting {
  color: var(--warn) !important;
}

.tone-running {
  color: var(--ok) !important;
}

.tone-critical {
  color: var(--danger) !important;
}

.process-progress {
  height: 5px;
  overflow: hidden;
  background: #344248;
}

.process-progress span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.related-operations-panel {
  min-height: 0;
  padding: 9px 10px;
  flex: 0 0 auto;
  overflow: visible;
}

.related-content {
  display: grid;
  align-content: start;
  gap: 9px;
}

.source-process-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  font: 7px var(--mono);
}

.source-process-line span {
  color: var(--muted);
}

.source-process-line strong {
  overflow: hidden;
  color: var(--accent);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-card {
  position: relative;
  min-height: 94px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 9px 12px;
  padding: 11px 11px 11px 14px;
  background: var(--panel-inset);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 3px 0 var(--muted);
}

.operation-card.running {
  box-shadow: inset 3px 0 var(--ok);
}

.operation-card.waiting {
  box-shadow: inset 3px 0 var(--warn);
}

.operation-card.critical {
  box-shadow: inset 3px 0 var(--danger);
}

.operation-type {
  display: grid;
  gap: 5px;
}

.operation-type span,
.operation-facts {
  color: var(--muted);
  font: 7px var(--mono);
  text-transform: uppercase;
}

.operation-type strong {
  font: 700 13px var(--mono);
}

.operation-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
}

.open-operation-button {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: stretch;
  min-width: 104px;
  padding: 8px 10px;
  color: var(--accent);
  background: var(--panel-raised);
  border-color: rgba(57, 198, 196, 0.48);
  font: 700 9px var(--mono);
  text-transform: uppercase;
}

.panel-note {
  color: var(--muted);
  font: 8px/1.45 var(--mono);
}

.action-content {
  min-height: 100%;
  display: grid;
  align-content: start;
  gap: 10px;
}

.empty-action {
  min-height: 100%;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
}

.empty-action strong {
  font: 700 12px var(--mono);
}

.empty-action p {
  color: var(--muted);
  font: 9px/1.45 var(--mono);
}

.specialized-screen {
  height: calc(100% - 8px);
  min-height: 0;
  padding: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.specialized-content {
  min-height: 100%;
  display: grid;
  align-content: start;
  gap: 11px;
}

.specialized-toolbar {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-strong);
}

.specialized-toolbar > div {
  display: grid;
  gap: 2px;
}

.specialized-toolbar small {
  color: var(--muted);
  font: 7px var(--mono);
}

.specialized-toolbar h1 {
  color: var(--accent);
  font: 700 16px var(--mono);
  text-transform: uppercase;
}

.back-button {
  width: 34px;
  height: 34px;
  min-height: 34px;
}

.toolbar-button {
  min-height: 34px;
  padding: 7px 9px;
  color: var(--muted);
  background: var(--panel-raised);
  font: 8px var(--mono);
}

.source-context-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  background: rgba(57, 198, 196, 0.055);
  box-shadow: inset 3px 0 var(--accent);
}

.source-context-bar span {
  color: var(--muted);
  font: 7px var(--mono);
}

.source-context-bar strong {
  overflow: hidden;
  font: 700 8px var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.specialized-screen .workspace-heading {
  padding: 0;
}

.specialized-screen .mining-unit {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px var(--line);
}

.launch-confirmation {
  display: grid;
  gap: 9px;
  padding: 10px;
  background: rgba(67, 194, 119, 0.07);
  box-shadow: inset 3px 0 var(--ok);
}

.launch-confirmation > div:first-child {
  display: grid;
  gap: 4px;
}

.launch-confirmation strong {
  color: var(--ok);
  font: 700 10px var(--mono);
  text-transform: uppercase;
}

.launch-confirmation span {
  color: var(--muted);
  font: 8px/1.4 var(--mono);
}

.return-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.return-actions .primary {
  grid-column: 1 / -1;
}

.bottom-nav {
  min-height: 74px;
  border-top: 1px solid var(--line-strong);
  background: #081014;
}

.nav-button {
  min-height: 73px;
  gap: 5px;
  padding: 5px 2px;
  border-width: 0 1px 0 0;
  color: #8b989a;
  background: transparent;
  box-shadow: none;
}

.nav-button:last-child {
  border-right: 0;
}

.nav-button.active {
  color: var(--accent);
  background: rgba(57, 198, 196, 0.08);
  box-shadow: inset 0 2px var(--accent);
}

.nav-button:disabled {
  opacity: 0.52;
}

.nav-icon {
  width: 23px;
  height: 23px;
  object-fit: contain;
  opacity: 0.65;
}

.nav-button.active .nav-icon {
  opacity: 1;
  filter: saturate(1.8) brightness(1.3);
}

.nav-button small {
  font: 7px var(--mono);
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 3px;
  background: var(--panel-inset);
  box-shadow: inset 0 0 0 1px var(--line);
}

.segmented-control button {
  min-height: 32px;
  padding: 6px;
  color: var(--muted);
  background: transparent;
  font: 700 8px var(--mono);
  text-transform: uppercase;
}

.segmented-control button.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(57, 198, 196, 0.08);
  box-shadow: inset 0 -2px var(--accent);
}

.hangar-unit-list,
.route-plan-list,
.cargo-editor-list {
  display: grid;
  gap: 8px;
}

.hangar-unit,
.route-plan-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 9px;
  background: var(--panel-inset);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 3px 0 var(--muted);
}

.hangar-unit.running,
.route-plan-card.running {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 3px 0 var(--ok);
}

.hangar-unit.waiting,
.route-plan-card.waiting {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 3px 0 var(--warn);
}

.hangar-unit.critical,
.route-plan-card.critical {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 3px 0 var(--danger);
}

.hangar-unit.selected,
.route-plan-card.selected {
  outline: 1px solid rgba(57, 198, 196, 0.55);
  outline-offset: -1px;
}

.hangar-unit-summary,
.route-plan-summary {
  min-height: 42px;
  padding: 0 0 7px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-width: 0 0 1px;
  border-color: var(--line);
  color: var(--text);
  background: transparent;
  text-align: left;
}

.hangar-unit-summary > div,
.route-plan-summary > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.hangar-unit-summary small,
.route-plan-summary small {
  color: var(--muted);
  font: 7px var(--mono);
}

.hangar-unit-summary strong,
.route-plan-summary strong {
  overflow-wrap: anywhere;
  font: 700 10px/1.3 var(--mono);
}

.unit-facts,
.route-plan-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 9px;
  color: var(--muted);
  font: 7px/1.35 var(--mono);
  text-transform: uppercase;
}

.unit-route-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 7px;
  background: rgba(57, 198, 196, 0.045);
  color: var(--muted);
  font: 7px var(--mono);
}

.unit-route-line strong {
  color: var(--accent);
}

.unit-actions,
.route-plan-actions,
.monitor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.unit-actions .control-button,
.route-plan-actions .control-button,
.monitor-actions .control-button {
  min-height: 30px;
  padding: 6px 8px;
  font-size: 7px;
}

.route-screen .specialized-content {
  gap: 9px;
}

.route-view-tabs,
.route-type-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.route-builder,
.route-monitor {
  display: grid;
  gap: 9px;
}

.route-fuel-aid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 9px 9px 12px;
  background: rgba(224, 164, 52, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 3px 0 var(--warn);
}

.route-fuel-aid-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.route-fuel-aid-copy strong {
  color: var(--warn);
  font: 700 8px var(--mono);
}

.route-fuel-aid-copy span {
  overflow-wrap: anywhere;
  color: var(--text);
  font: 700 8px/1.35 var(--mono);
}

.route-fuel-aid-copy small {
  color: var(--muted);
  font: 7px/1.4 var(--mono);
}

.route-fuel-aid .control-button {
  min-height: 34px;
  padding: 7px 9px;
  border-color: var(--warn);
  color: var(--warn);
  white-space: nowrap;
}

.route-vector-card {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 8px;
  background: rgba(57, 198, 196, 0.045);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: center;
}

.route-vector-card strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font: 700 8px/1.3 var(--mono);
}

.route-vector-card span {
  color: var(--accent);
  font: 700 12px var(--mono);
}

.route-vector-card.two-leg span {
  color: var(--warn);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.form-grid.compact {
  gap: 5px;
}

.form-field {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 4px;
}

.form-field > span {
  color: var(--muted);
  font: 7px var(--mono);
  text-transform: uppercase;
}

.form-field > small {
  color: var(--muted);
  font: 6px var(--mono);
}

.form-field select,
.form-field input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 5px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--text);
  background: #0a1216;
  font: 8px var(--mono);
}

.form-field select:focus,
.form-field input:focus {
  border-color: var(--accent);
  outline: 1px solid rgba(57, 198, 196, 0.25);
}

.form-field select:disabled,
.form-field input:disabled {
  opacity: 0.46;
}

.route-capability {
  padding: 7px 8px;
  color: var(--muted);
  background: var(--panel-raised);
  box-shadow: inset 3px 0 var(--accent);
  font: 7px/1.4 var(--mono);
}

.destination-hangar-panel {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--line);
  background: rgba(7, 16, 20, 0.82);
  box-shadow: inset 3px 0 rgba(57, 198, 196, 0.48);
}

.destination-hangar-heading,
.destination-hangar-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.destination-hangar-heading > div,
.destination-hangar-row > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.destination-hangar-heading small,
.destination-hangar-row small {
  color: var(--muted);
  font: 7px/1.35 var(--mono);
}

.destination-hangar-heading strong,
.destination-hangar-row strong {
  overflow: hidden;
  color: var(--text);
  font: 800 9px/1.3 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.destination-hangar-heading .control-button {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 7px;
  white-space: nowrap;
}

.destination-hangar-list {
  display: grid;
  gap: 4px;
}

.destination-hangar-row {
  padding: 7px;
  background: var(--panel-inset);
  box-shadow: inset 0 0 0 1px var(--line);
}

.destination-hangar-row > span {
  flex: 0 0 auto;
  max-width: 46%;
  font: 700 7px/1.25 var(--mono);
  text-align: right;
}

.destination-hangar-panel > p {
  margin: 0;
  color: var(--muted);
  font: 8px/1.4 var(--mono);
}

.destination-hangar-scope {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid rgba(57, 198, 196, 0.28);
  background: rgba(57, 198, 196, 0.07);
  color: var(--muted);
  font: 8px/1.35 var(--mono);
}

.destination-hangar-scope .control-button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 8px;
  font-size: 7px;
}

.cargo-slot-editor {
  display: grid;
  gap: 6px;
  padding: 8px;
  background: var(--panel-inset);
  box-shadow: inset 0 0 0 1px var(--line);
}

.slot-heading,
.leg-heading,
.route-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.leg-heading {
  align-items: flex-start;
}

.leg-heading-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.leg-heading-copy > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot-heading strong,
.leg-heading strong {
  color: var(--accent);
  font: 700 8px var(--mono);
}

.slot-heading span,
.leg-heading span {
  color: var(--muted);
  font: 7px var(--mono);
}

.leg-heading .leg-warehouse-space {
  flex: 0 0 auto;
  padding: 3px 5px;
  color: var(--ok);
  background: rgba(67, 194, 119, 0.07);
  box-shadow: inset 0 0 0 1px rgba(67, 194, 119, 0.28);
  font: 700 6px/1.2 var(--mono);
  white-space: nowrap;
}

.leg-heading .leg-warehouse-space.warning {
  color: var(--danger);
  background: rgba(239, 83, 80, 0.08);
  box-shadow: inset 0 0 0 1px rgba(239, 83, 80, 0.34);
}

.inline-warning {
  color: var(--warn);
  font: 7px/1.4 var(--mono);
}

.inline-warning.critical {
  color: var(--danger);
}

.fuel-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 8px;
  padding: 7px 8px;
  background: var(--panel-raised);
  box-shadow: inset 3px 0 var(--ok);
  font-family: var(--mono);
}

.fuel-preview.warning {
  box-shadow: inset 3px 0 var(--warn);
}

.fuel-preview > span {
  color: var(--muted);
  font-size: 7px;
}

.fuel-preview strong {
  color: var(--ok);
  font-size: 8px;
  text-align: right;
}

.fuel-preview.warning strong {
  color: var(--warn);
}

.fuel-preview small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 6px;
}

.route-leg-block {
  display: grid;
  gap: 7px;
  padding: 8px;
  background: rgba(57, 198, 196, 0.025);
  box-shadow: inset 0 0 0 1px var(--line);
}

.route-leg-block.return {
  background: rgba(245, 179, 67, 0.025);
}

.route-leg-block.return .leg-heading strong {
  color: var(--warn);
}

.route-summary {
  padding: 8px;
  color: var(--muted);
  background: #0a1216;
  box-shadow: inset 0 0 0 1px var(--line);
  font: 7px/1.4 var(--mono);
}

.route-summary strong {
  color: var(--text);
}

.two-leg-summary {
  display: grid;
  justify-content: stretch;
}

.route-submit-button {
  min-height: 44px;
  padding: 9px;
  border-color: var(--accent);
  color: #071112;
  background: var(--accent);
  font: 800 10px var(--mono);
  text-transform: uppercase;
}

.route-submit-button:disabled {
  border-color: var(--line-strong);
  color: var(--muted);
  background: var(--panel-raised);
  opacity: 0.58;
}

.monitor-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.monitor-summary-button {
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 3px;
  min-height: 50px;
  padding: 5px;
  border: 0;
  border-radius: 0;
  background: var(--panel-inset);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  transition: background 120ms ease, box-shadow 120ms ease;
}

.monitor-summary-button:hover {
  background: var(--panel-raised);
}

.monitor-summary-button:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.monitor-summary-button.selected {
  background: rgba(57, 198, 196, 0.08);
  box-shadow:
    inset 0 0 0 1px var(--accent),
    inset 0 3px var(--accent);
}

.monitor-summary-button strong {
  color: var(--accent);
  font: 700 16px var(--mono);
}

.monitor-summary-button.waiting strong {
  color: var(--warn);
}

.monitor-summary-button.completed strong {
  color: var(--ok);
}

.monitor-summary-button span {
  color: var(--muted);
  font: 6px var(--mono);
}

.monitor-summary-button.selected span {
  color: var(--text);
}

.production-screen .specialized-content {
  gap: 9px;
}

.production-process-hero {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 10px;
  background: var(--panel-raised);
  box-shadow:
    inset 3px 0 var(--accent),
    inset 0 1px rgba(255, 255, 255, 0.045),
    0 4px 10px rgba(0, 0, 0, 0.22);
}

.production-process-hero.waiting {
  box-shadow:
    inset 3px 0 var(--warn),
    inset 0 1px rgba(255, 255, 255, 0.045),
    0 4px 10px rgba(0, 0, 0, 0.22);
}

.production-process-hero.critical {
  box-shadow:
    inset 3px 0 var(--danger),
    inset 0 1px rgba(255, 255, 255, 0.045),
    0 4px 10px rgba(0, 0, 0, 0.22);
}

.production-process-heading,
.production-cycle-line,
.production-output-line,
.production-spec-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.production-process-heading > div {
  display: grid;
  gap: 3px;
}

.production-process-heading small,
.production-output-line > span,
.production-spec-heading span {
  color: var(--muted);
  font: 7px/1.3 var(--mono);
  text-transform: uppercase;
}

.production-process-heading h2 {
  color: var(--text);
  font: 700 14px/1.2 var(--mono);
}

.production-cycle-line {
  color: var(--muted);
  font: 7px var(--mono);
}

.production-cycle-line strong {
  color: var(--accent);
  font-size: 9px;
}

.production-process-hero.waiting .production-cycle-line strong {
  color: var(--warn);
}

.production-process-hero.critical .production-cycle-line strong {
  color: var(--danger);
}

.production-progress {
  height: 7px;
  background: var(--panel-inset);
  box-shadow: inset 0 0 0 1px var(--line);
}

.production-output-line {
  padding-top: 1px;
  color: var(--muted);
  font: 7px var(--mono);
}

.production-output-line strong {
  color: var(--text);
  font-size: 8px;
}

.production-market-value {
  display: grid;
  gap: 5px;
  padding: 7px 8px;
  background: rgba(5, 13, 17, 0.72);
  box-shadow: inset 0 0 0 1px rgba(55, 199, 199, 0.2);
}

.production-market-value.unavailable {
  box-shadow: inset 0 0 0 1px rgba(130, 147, 153, 0.18);
}

.production-market-value-heading,
.production-market-quote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.production-market-value-heading strong {
  color: var(--text);
  font: 700 7px var(--mono);
}

.production-market-value-heading > span,
.production-market-value-note {
  color: var(--dim);
  font: 6px/1.35 var(--mono);
}

.production-market-quote {
  min-width: 0;
  padding-top: 5px;
  border-top: 1px solid rgba(130, 147, 153, 0.14);
}

.production-market-quote > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.production-market-quote > span strong {
  overflow: hidden;
  color: var(--muted);
  font: 700 7px var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-market-quote > span small,
.production-market-quote > small {
  color: var(--dim);
  font: 5px/1.3 var(--mono);
}

.production-market-quote > strong {
  color: var(--accent);
  font: 700 8px var(--mono);
  white-space: nowrap;
}

.production-market-quote.unavailable > strong {
  color: var(--dim);
  font-size: 6px;
}

.production-order-plan {
  display: grid;
  gap: 6px;
  padding: 8px;
  background: var(--panel-inset);
  box-shadow: inset 3px 0 var(--accent);
}

.production-order-plan.waiting {
  box-shadow: inset 3px 0 var(--warn);
}

.production-order-plan-heading,
.production-order-shortage-heading,
.production-order-shortage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.production-order-plan-heading strong {
  color: var(--text);
  font: 700 8px var(--mono);
}

.production-order-plan-heading span {
  color: var(--accent);
  font: 700 7px var(--mono);
}

.production-order-plan.waiting .production-order-plan-heading span {
  color: var(--warn);
}

.production-order-plan-summary {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.production-order-plan-summary > div {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 5px 4px;
  background: rgba(255, 255, 255, 0.025);
  text-align: center;
}

.production-order-plan-summary small {
  overflow: hidden;
  color: var(--dim);
  font: 6px/1.15 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-order-plan-summary strong {
  color: var(--text);
  font: 700 9px var(--mono);
}

.production-order-plan-message {
  color: var(--muted);
  font: 7px/1.4 var(--mono);
}

.production-order-shortage {
  display: grid;
  gap: 1px;
  background: rgba(240, 185, 46, 0.04);
  box-shadow: inset 0 1px var(--line);
}

.production-order-shortage-heading,
.production-order-shortage-row {
  min-height: 25px;
  padding: 5px 6px;
  box-shadow: inset 0 -1px var(--line);
}

button.production-order-shortage-row {
  width: 100%;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

button.production-order-shortage-row.selected {
  background: rgba(57, 198, 196, 0.065);
  box-shadow:
    inset 3px 0 var(--accent),
    inset 0 -1px var(--line);
}

.production-order-shortage-heading span {
  color: var(--dim);
  font: 6px/1.2 var(--mono);
}

.production-order-shortage-heading span:last-child {
  text-align: right;
}

.production-order-shortage-row span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font: 7px var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-order-shortage-row strong {
  flex: 0 0 auto;
  color: var(--warn);
  font: 700 7px var(--mono);
}

.production-waiting-note,
.production-hard-block {
  padding: 8px 9px;
  color: var(--warn);
  background: rgba(240, 185, 46, 0.07);
  box-shadow: inset 3px 0 var(--warn);
  font: 7px/1.45 var(--mono);
}

.production-hard-block {
  color: var(--danger);
  background: rgba(239, 83, 80, 0.07);
  box-shadow: inset 3px 0 var(--danger);
}

.production-specification {
  display: grid;
  background: var(--panel-inset);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}

.production-spec-heading {
  min-height: 30px;
  padding: 7px 9px;
  box-shadow: inset 0 -1px var(--line-strong);
}

.production-spec-heading strong {
  color: var(--accent);
  font: 700 8px var(--mono);
}

.production-requirement-row {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(35px, 0.55fr));
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  color: var(--muted);
  background: transparent;
  box-shadow: inset 0 -1px var(--line);
  font: 7px/1.25 var(--mono);
  text-align: left;
}

button.production-requirement-row {
  cursor: pointer;
}

.production-requirement-row > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-requirement-row strong {
  color: var(--text);
  font-size: 8px;
  text-align: right;
}

.production-requirement-row.header {
  min-height: 25px;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.015);
  font-size: 6px;
  text-transform: uppercase;
}

.production-requirement-row.header strong {
  color: var(--dim);
  font-size: 6px;
}

.production-requirement-row.missing strong:last-child {
  color: var(--warn);
}

.production-requirement-row.ready strong:last-child {
  color: var(--ok);
}

.production-requirement-row.selected {
  color: var(--accent);
  background: rgba(57, 198, 196, 0.065);
  box-shadow:
    inset 3px 0 var(--accent),
    inset 0 -1px var(--line);
}

.production-resource-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px;
  background: rgba(57, 198, 196, 0.045);
  box-shadow: inset 3px 0 var(--accent);
}

.resource-action-copy {
  display: grid;
  gap: 3px;
}

.resource-action-copy small {
  color: var(--muted);
  font: 6px var(--mono);
}

.resource-action-copy strong {
  color: var(--accent);
  font: 700 9px var(--mono);
}

.resource-action-copy span,
.resource-action-empty {
  color: var(--muted);
  font: 6px/1.4 var(--mono);
}

.resource-action-buttons {
  display: grid;
  gap: 5px;
}

.resource-action-buttons .control-button {
  min-height: 29px;
  padding: 5px 7px;
  font-size: 7px;
}

.production-launch-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.production-extension-preview {
  grid-column: 1 / -1;
}

.production-quantity-control {
  min-height: 42px;
  display: grid;
  grid-template-columns: 32px minmax(44px, 1fr) 32px;
  grid-template-rows: auto 31px;
  align-items: center;
  gap: 4px;
  padding: 5px 6px;
  background: var(--panel-inset);
  box-shadow: inset 0 0 0 1px var(--line);
}

.production-quantity-control > span {
  grid-column: 1 / -1;
  color: var(--muted);
  font: 6px var(--mono);
}

.production-quantity-control input,
.quantity-step-button {
  width: 100%;
  height: 31px;
  min-height: 31px;
  border: 0;
  border-radius: 0;
  color: var(--text);
  background: var(--panel-raised);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font: 700 10px var(--mono);
  text-align: center;
}

.production-quantity-control input:focus {
  outline: 1px solid var(--accent);
}

.quantity-step-button {
  cursor: pointer;
  color: var(--accent);
  font-size: 14px;
}

.production-primary-command {
  min-height: 51px;
  padding: 7px 9px;
  cursor: pointer;
  color: #071112;
  background: var(--accent);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.25),
    inset 0 -3px var(--accent-dark);
  font: 800 9px var(--mono);
  text-transform: uppercase;
}

.production-cancel {
  min-height: 32px;
  font: 7px var(--mono);
}

.warehouse-screen .specialized-content {
  gap: 9px;
}

.briefings-screen .specialized-content {
  gap: 9px;
}

.briefings-screen {
  background:
    linear-gradient(rgba(66, 70, 72, 0.25), rgba(66, 70, 72, 0.25)),
    url("../../../assets/mobile-v2/briefings-network-background.png") center top / cover no-repeat,
    var(--panel);
}

/* Briefings background transparency experiment. Baseline:
   GD/visual_experiments/briefings_background/BRIEFINGS_VISUAL_EXPERIMENT_BASELINE_RU.md */
.briefings-screen .briefing-summary > div,
.briefings-screen .briefing-requirement,
.briefings-screen .briefing-project-rows > div,
.briefings-screen .briefing-progress > span {
  background: rgba(10, 17, 22, 0.5);
}

.briefings-screen .segmented-control {
  background: rgba(10, 17, 22, 0.5);
}

.briefings-screen .segmented-control button {
  background: rgba(24, 33, 40, 0.78);
}

.briefings-screen .segmented-control button.active {
  background: rgba(30, 76, 79, 0.82);
}

.briefings-screen .briefing-card {
  background: rgba(18, 24, 29, 0.5);
}

.briefings-screen .briefing-learning-guide {
  background: rgba(20, 48, 51, 0.5);
}

.briefings-screen .briefing-reward {
  background: rgba(58, 47, 17, 0.5);
}

.briefings-screen .briefing-project {
  background: rgba(24, 33, 40, 0.5);
}

.briefings-screen .control-button,
.briefings-screen .icon-button,
.briefings-screen .toolbar-button {
  background: rgba(24, 33, 40, 0.82);
}

.briefing-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.briefing-summary > div {
  display: grid;
  gap: 3px;
  padding: 8px;
  background: var(--panel-inset);
  box-shadow: inset 0 0 0 1px var(--line);
}

.briefing-summary span {
  color: var(--dim);
  font: 6px var(--mono);
}

.briefing-summary strong {
  color: var(--accent);
  font: 800 11px var(--mono);
}

.briefing-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.briefing-list {
  display: grid;
  gap: 8px;
}

.briefing-card {
  position: relative;
  display: grid;
  gap: 9px;
  padding: 10px;
  background: var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 3px 0 var(--line-strong);
}

.briefing-card.guide {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 3px 0 var(--accent);
}

.briefing-card.waiting {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 3px 0 var(--warn);
}

.briefing-card.running {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 3px 0 var(--ok);
}

.status-chip.guide {
  color: var(--accent);
  background: rgba(57, 198, 196, 0.08);
}

.briefing-card-heading,
.briefing-project-heading,
.briefing-reward {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 9px;
}

.briefing-card-heading > div {
  display: grid;
  gap: 3px;
}

.briefing-card-heading small {
  color: var(--accent);
  font: 7px var(--mono);
}

.briefing-card-heading h2 {
  color: var(--text);
  font: 700 12px/1.25 var(--mono);
}

.briefing-card-heading .status-chip {
  max-width: 118px;
  flex: 0 0 auto;
  text-align: center;
}

.briefing-description {
  color: var(--muted);
  font: 8px/1.45 var(--mono);
}

.briefing-learning-guide {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  background: rgba(57, 198, 196, 0.055);
  box-shadow:
    inset 3px 0 var(--accent),
    inset 0 0 0 1px rgba(57, 198, 196, 0.2);
}

.briefing-learning-guide small {
  color: var(--accent);
  font: 700 6px var(--mono);
}

.briefing-learning-guide > strong {
  color: var(--text);
  font: 700 9px/1.35 var(--mono);
}

.briefing-learning-guide ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 17px;
}

.briefing-learning-guide li {
  padding-left: 2px;
  color: var(--muted);
  font: 7px/1.45 var(--mono);
}

.briefing-requirements,
.briefing-project-rows {
  display: grid;
  gap: 4px;
}

.briefing-requirement,
.briefing-project-rows > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  background: var(--panel-inset);
  box-shadow: inset 0 0 0 1px var(--line);
}

.briefing-requirement > div,
.briefing-project-rows > div > div {
  display: grid;
  gap: 3px;
}

.briefing-requirement strong,
.briefing-project-rows strong {
  color: var(--text);
  font: 700 8px var(--mono);
}

.briefing-requirement span,
.briefing-project-rows span {
  color: var(--dim);
  font: 6px/1.3 var(--mono);
}

.briefing-requirement > b,
.briefing-project-rows > div > b {
  color: var(--accent);
  font: 800 9px var(--mono);
}

.briefing-requirement.objective {
  grid-template-columns: 1fr;
  box-shadow:
    inset 3px 0 var(--warn),
    inset 0 0 0 1px var(--line);
}

.briefing-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  gap: 7px;
}

.briefing-progress > span {
  height: 6px;
  padding: 1px;
  background: var(--panel-inset);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.briefing-progress i {
  display: block;
  height: 100%;
  background: var(--accent);
}

.briefing-progress b {
  color: var(--accent);
  font: 700 7px var(--mono);
  text-align: right;
}

.briefing-reward {
  align-items: center;
  padding: 7px 8px;
  background: rgba(240, 185, 46, 0.05);
  box-shadow: inset 0 0 0 1px rgba(240, 185, 46, 0.18);
}

.briefing-reward span {
  color: var(--warn);
  font: 7px var(--mono);
}

.briefing-reward strong {
  color: var(--text);
  font: 700 8px/1.3 var(--mono);
  text-align: right;
}

.briefing-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.briefing-actions .control-button {
  min-height: 34px;
  padding: 6px;
  font: 7px/1.2 var(--mono);
}

.briefing-actions .primary:first-child:last-child {
  grid-column: 1 / -1;
}

.briefing-project {
  display: grid;
  gap: 6px;
  padding: 8px;
  background: var(--panel-raised);
  box-shadow: inset 0 0 0 1px rgba(57, 198, 196, 0.22);
}

.briefing-project-heading strong {
  color: var(--accent);
  font: 700 8px var(--mono);
}

.briefing-project-heading span {
  color: var(--muted);
  font: 6px var(--mono);
}

.briefing-project-rows > div {
  grid-template-columns: minmax(0, 1fr) auto 54px;
}

.briefing-project-rows .control-button {
  min-height: 28px;
  padding: 4px;
  font: 7px var(--mono);
}

.briefing-project > .control-button {
  min-height: 36px;
}

.briefing-empty {
  min-height: 190px;
}

.warehouse-station-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.warehouse-station-tabs button {
  min-height: 34px;
  padding: 5px 3px;
  cursor: pointer;
  color: var(--muted);
  background: var(--panel-inset);
  box-shadow: inset 0 0 0 1px var(--line);
  font: 700 7px/1.2 var(--mono);
  text-transform: uppercase;
}

.warehouse-station-tabs button.active {
  color: var(--accent);
  background: rgba(57, 198, 196, 0.08);
  box-shadow:
    inset 0 -2px var(--accent),
    inset 0 0 0 1px rgba(57, 198, 196, 0.28);
}

.warehouse-capacity,
.warehouse-resource-detail,
.warehouse-queue-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 10px;
  background: var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 3px 0 var(--accent);
}

.warehouse-capacity.waiting,
.warehouse-queue-card.waiting {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 3px 0 var(--warn);
}

.warehouse-capacity.critical,
.warehouse-queue-card.critical {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 3px 0 var(--danger);
}

.warehouse-capacity-heading,
.warehouse-detail-heading,
.warehouse-list-heading,
.warehouse-queue-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}

.warehouse-capacity-heading > div,
.warehouse-detail-heading > div,
.warehouse-list-heading > div,
.warehouse-queue-heading > div {
  display: grid;
  gap: 3px;
}

.warehouse-capacity-heading small,
.warehouse-detail-heading small,
.warehouse-list-heading small,
.warehouse-queue-heading small {
  color: var(--dim);
  font: 7px var(--mono);
}

.warehouse-capacity-heading h2,
.warehouse-detail-heading h2,
.warehouse-list-heading h2,
.warehouse-queue-heading h3 {
  overflow: hidden;
  color: var(--text);
  font: 700 11px var(--mono);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.warehouse-capacity-bar {
  height: 8px;
  padding: 2px;
  background: var(--panel-inset);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.warehouse-capacity-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.warehouse-capacity.waiting .warehouse-capacity-bar span {
  background: var(--warn);
}

.warehouse-capacity.critical .warehouse-capacity-bar span {
  background: var(--danger);
}

.warehouse-capacity-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.warehouse-capacity-facts > div {
  display: grid;
  gap: 3px;
  padding: 6px 5px;
  background: var(--panel-inset);
  box-shadow: inset 0 0 0 1px var(--line);
}

.warehouse-capacity-facts span {
  color: var(--dim);
  font: 6px/1.15 var(--mono);
}

.warehouse-capacity-facts strong {
  color: var(--accent);
  font: 700 9px var(--mono);
}

.warehouse-capacity > p {
  color: var(--muted);
  font: 7px/1.4 var(--mono);
}

.warehouse-view-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.warehouse-stock-view,
.warehouse-resource-list,
.warehouse-queue-list {
  display: grid;
  gap: 6px;
}

.warehouse-list-heading {
  padding: 4px 2px;
}

.warehouse-list-heading > span {
  color: var(--accent);
  font: 700 8px var(--mono);
}

.warehouse-resource-row {
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  cursor: pointer;
  text-align: left;
  background: var(--panel-inset);
  box-shadow: inset 0 0 0 1px var(--line);
}

.warehouse-resource-row.selected {
  background: rgba(57, 198, 196, 0.08);
  box-shadow:
    inset 3px 0 var(--accent),
    inset 0 0 0 1px rgba(57, 198, 196, 0.28);
}

.warehouse-resource-row.empty {
  opacity: 0.6;
}

.warehouse-resource-row > div {
  display: grid;
  gap: 3px;
}

.warehouse-resource-row > div:last-child {
  justify-items: end;
  text-align: right;
}

.warehouse-resource-row strong {
  overflow: hidden;
  color: var(--text);
  font: 700 9px var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warehouse-resource-row > div:last-child strong {
  color: var(--accent);
  font-size: 10px;
}

.warehouse-resource-row span {
  color: var(--dim);
  font: 7px var(--mono);
}

.warehouse-resource-detail {
  margin-top: 2px;
  background: var(--panel-raised);
}

.warehouse-detail-heading > strong {
  color: var(--accent);
  font: 800 12px var(--mono);
}

.warehouse-detail-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 7px;
  background: var(--panel-inset);
}

.warehouse-detail-facts span {
  color: var(--muted);
  font: 7px var(--mono);
}

.warehouse-detail-actions,
.warehouse-queue-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 5px;
}

.warehouse-detail-actions .control-button {
  min-height: 31px;
  padding: 5px;
  font: 8px var(--mono);
}

.warehouse-detail-actions .control-button:only-child {
  grid-column: 1 / -1;
}

.warehouse-queue-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 3px 0 var(--line-strong);
}

.warehouse-queue-heading .status-chip {
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warehouse-queue-card > p,
.warehouse-queue-note {
  color: var(--muted);
  font: 7px/1.4 var(--mono);
}

.warehouse-requirements,
.warehouse-receiving-cargo {
  display: grid;
  gap: 4px;
}

.warehouse-requirements > div,
.warehouse-receiving-cargo > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px;
  background: var(--panel-inset);
  box-shadow: inset 0 0 0 1px var(--line);
}

.warehouse-requirements strong,
.warehouse-receiving-cargo strong {
  overflow: hidden;
  color: var(--text);
  font: 700 8px var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warehouse-requirements span,
.warehouse-receiving-cargo span {
  color: var(--warn);
  font: 7px var(--mono);
  text-align: right;
}

.warehouse-receiving-cargo span {
  color: var(--accent);
}

.warehouse-queue-footer > span {
  color: var(--muted);
  font: 7px var(--mono);
}

.warehouse-queue-footer .control-button,
.warehouse-queue-card > .control-button {
  min-height: 30px;
  padding: 5px 7px;
  font: 8px var(--mono);
}

.warehouse-empty {
  min-height: 170px;
}

.market-screen .specialized-content {
  gap: 9px;
}

.market-station-summary,
.market-quotes,
.market-order-panel,
.market-delivery-options {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 10px;
  background: var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 3px 0 var(--line-strong);
}

.market-station-summary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 3px 0 var(--accent);
}

.market-station-heading,
.market-order-heading,
.market-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.market-station-heading > div,
.market-order-heading > div,
.market-section-heading > div,
.market-delivery-options > div:first-child {
  display: grid;
  gap: 3px;
}

.market-station-heading small,
.market-order-heading small,
.market-section-heading small {
  color: var(--dim);
  font: 6px var(--mono);
  letter-spacing: 0;
}

.market-station-heading strong,
.market-order-heading h2,
.market-section-heading h2 {
  color: var(--text);
  font: 700 11px var(--mono);
  text-transform: uppercase;
}

.market-station-summary > p,
.market-delivery-options span {
  color: var(--muted);
  font: 7px/1.45 var(--mono);
}

.market-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.market-metrics > div {
  display: grid;
  gap: 3px;
  padding: 7px;
  background: var(--panel-inset);
  box-shadow: inset 0 0 0 1px var(--line);
}

.market-metrics span,
.market-order-facts span {
  color: var(--dim);
  font: 6px var(--mono);
}

.market-metrics strong {
  color: var(--accent);
  font: 700 8px var(--mono);
}

.market-mode-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.market-section-heading > span,
.market-order-heading > span {
  color: var(--accent);
  font: 700 7px var(--mono);
  white-space: nowrap;
}

.market-quote-list {
  display: grid;
  gap: 4px;
}

.market-quote-row {
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  cursor: pointer;
  text-align: left;
  background: var(--panel-inset);
  box-shadow: inset 0 0 0 1px var(--line);
}

.market-quote-row:hover,
.market-quote-row:focus-visible {
  background: rgba(57, 198, 196, 0.055);
}

.market-quote-row.selected {
  background: rgba(57, 198, 196, 0.08);
  box-shadow:
    inset 3px 0 var(--accent),
    inset 0 0 0 1px rgba(57, 198, 196, 0.28);
}

.market-quote-row.empty,
.market-quote-row.locked {
  opacity: 0.62;
}

.market-quote-name,
.market-quote-price {
  display: grid;
  gap: 3px;
}

.market-quote-name strong {
  overflow: hidden;
  color: var(--text);
  font: 700 8px var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-quote-name span,
.market-quote-price small {
  color: var(--dim);
  font: 6px var(--mono);
}

.market-quote-price {
  justify-items: end;
  text-align: right;
}

.market-quote-price strong {
  color: var(--accent);
  font: 700 9px var(--mono);
}

.market-order-panel {
  background: var(--panel-raised);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 3px 0 var(--accent);
}

.market-order-panel.locked {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 3px 0 var(--warn);
}

.market-order-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 6px 7px;
  background: var(--panel-inset);
}

.market-quantity-control {
  display: grid;
  grid-template-columns: 32px minmax(52px, 1fr) 32px 48px;
  grid-template-rows: auto 32px;
  align-items: center;
  gap: 4px;
}

.market-quantity-control > span {
  grid-column: 1 / -1;
  color: var(--muted);
  font: 6px var(--mono);
}

.market-quantity-control input,
.market-quantity-control .quantity-step-button,
.market-max-button {
  width: 100%;
  height: 32px;
  min-height: 32px;
  border: 0;
  border-radius: 0;
  color: var(--text);
  background: var(--panel-inset);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font: 700 10px var(--mono);
  text-align: center;
}

.market-quantity-control input:focus {
  outline: 1px solid var(--accent);
}

.market-max-button {
  cursor: pointer;
  color: var(--accent);
  font-size: 7px;
}

.market-order-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 8px;
  padding: 8px;
  background: var(--panel-inset);
  box-shadow: inset 0 0 0 1px var(--line);
}

.market-order-total > span {
  color: var(--muted);
  font: 7px var(--mono);
}

.market-order-total > strong {
  color: var(--ok);
  font: 800 12px var(--mono);
}

.market-order-total > small {
  grid-column: 1 / -1;
  color: var(--dim);
  font: 6px/1.35 var(--mono);
}

.market-order-reason {
  min-height: 10px;
  color: var(--warn);
  font: 7px/1.4 var(--mono);
}

.market-trade-command {
  min-height: 44px;
  padding: 8px;
  cursor: pointer;
  color: #071112;
  background: var(--accent);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.25),
    inset 0 -3px var(--accent-dark);
  font: 800 9px var(--mono);
  text-transform: uppercase;
}

.market-trade-command:disabled {
  color: var(--dim);
  background: var(--panel-inset);
  box-shadow: inset 0 0 0 1px var(--line);
}

.market-delivery-options {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 3px 0 var(--warn);
}

.market-delivery-options strong {
  color: var(--warn);
  font: 700 8px var(--mono);
  text-transform: uppercase;
}

.market-delivery-buttons {
  display: grid;
  gap: 4px;
}

.market-delivery-buttons .control-button {
  min-height: 31px;
  font: 7px var(--mono);
}

.market-confirmation {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.market-confirmation .control-button {
  min-height: 30px;
  padding: 5px 8px;
  font: 7px var(--mono);
}

@media (max-width: 420px) {
  .mobile-v2-page {
    padding: 0;
  }

  .app-shell {
    width: 100%;
  }
}

.process-pips i.goal {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(42, 224, 216, 0.55);
}

.station-node.objective {
  box-shadow:
    inset 0 0 0 1px rgba(42, 224, 216, 0.22),
    0 0 14px rgba(42, 224, 216, 0.08);
}

.station-node.objective-ready {
  box-shadow:
    inset 0 0 0 1px rgba(52, 211, 153, 0.42),
    0 0 14px rgba(52, 211, 153, 0.14);
}

.process-pips i.goal.ready {
  background: #34d399;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.55);
}

.station-node .objective-label {
  color: var(--accent);
}

.station-node.objective-ready .objective-label {
  color: #34d399;
}

.goal-context-compact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 30px;
  margin: 0 8px 8px;
  padding: 6px 8px;
  border: 0;
  background: rgba(13, 20, 27, 0.96);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  text-align: left;
}

.goal-context-compact span,
.goal-context-compact small {
  color: var(--accent);
  font: 700 8px/1.1 var(--mono);
  text-transform: uppercase;
}

.goal-context-compact strong {
  overflow: hidden;
  color: var(--text);
  font: 800 10px/1.15 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goal-context-panel,
.relocation-recovery,
.route-missing-unit,
.contribution-preview-panel {
  border: 1px solid rgba(91, 120, 132, 0.35);
  background: rgba(13, 20, 27, 0.96);
  padding: 10px;
}

.goal-context-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.goal-context-panel small,
.contribution-preview-heading small {
  display: block;
  color: var(--accent);
  font: 700 8px/1.2 var(--mono);
  letter-spacing: 0.08em;
}

.goal-context-panel strong,
.contribution-preview-heading strong {
  color: var(--text);
  font: 800 10px/1.25 var(--mono);
}

.goal-context-meta {
  display: grid;
  gap: 2px;
  color: var(--muted);
  text-align: right;
  font: 8px/1.25 var(--mono);
}

.goal-context-details {
  display: grid;
  grid-column: 1 / -1;
  gap: 3px;
  color: var(--muted);
  font: 8px/1.3 var(--mono);
}

.route-missing-unit,
.relocation-recovery {
  display: grid;
  gap: 8px;
  margin: 8px 0;
}

.route-missing-unit span,
.relocation-recovery span {
  color: var(--muted);
  font: 8px/1.4 var(--mono);
}

.contribution-preview-panel {
  margin: 0 8px 8px;
  display: grid;
  gap: 8px;
}

.app-shell > .contribution-preview-panel {
  grid-area: auto;
  position: fixed;
  z-index: 12;
  right: auto;
  bottom: 74px;
  left: 50%;
  width: min(374px, calc(100vw - 16px));
  max-height: calc(100vh - 90px);
  margin: 0;
  overflow: hidden;
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.48);
  transform: translateX(-50%);
}

.contribution-preview-panel.zeroing {
  border-color: rgba(255, 183, 77, 0.55);
}

.contribution-preview-heading,
.contribution-preview-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.contribution-preview-rows {
  display: grid;
  gap: 4px;
  max-height: 118px;
  overflow: auto;
}

.contribution-preview-rows > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  font: 8px/1.25 var(--mono);
}

.contribution-preview-rows small,
.contribution-preview-panel p {
  color: var(--muted);
  font: 7px/1.35 var(--mono);
}

.control-button.compact {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 8px;
}

@media (max-width: 390px) {
  .route-screen button,
  .route-screen select,
  .route-screen input {
    min-height: 44px;
  }

  .route-screen button {
    min-width: 44px;
  }

  .route-screen .control-button {
    min-height: 44px;
  }

  .route-screen button:focus-visible,
  .route-screen select:focus-visible,
  .route-screen input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}

/* Mobile V2 usability pass: visible navigation, natural rows and viewport-safe shell. */
.mobile-v2-page {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.app-shell {
  width: min(450px, calc(100vw - 28px));
  height: min(900px, calc(100vh - 28px));
  height: min(900px, calc(100dvh - 28px));
  max-height: calc(100vh - 28px);
  max-height: calc(100dvh - 28px);
  flex: 0 1 auto;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto 74px;
}

.stations-screen {
  grid-auto-rows: max-content;
  align-content: start;
}

.stations-selector,
.gateway-tabs {
  grid-auto-flow: row;
  grid-auto-columns: unset;
  gap: 6px;
  overflow: visible;
  scrollbar-width: auto;
}

.stations-selector {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stations-selector:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stations-selector:has(> :nth-child(5):last-child),
.gateway-tabs {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.stations-selector:has(> :nth-child(5):last-child) > *,
.gateway-tabs > * {
  grid-column: span 2;
}

.stations-selector:has(> :nth-child(5):last-child) > :nth-child(n + 4),
.gateway-tabs > :nth-child(n + 4) {
  grid-column: span 3;
}

.stations-selector-button,
.gateway-tab {
  min-height: 52px;
  height: auto;
  padding: 8px 5px;
  font-size: 10px;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

.stations-screen .control-button:not(.compact),
.stations-screen select,
.stations-screen input,
.stations-screen textarea {
  min-height: 44px;
}

.stations-screen .station-page-hero small,
.stations-screen .gateway-station-hero small,
.stations-screen .gateway-primary-status small,
.stations-screen .sigma-surface-hero small,
.stations-screen .sigma-empty-state small,
.stations-screen .planetary-action-preview small {
  font-size: 9px;
  line-height: 1.3;
}

.stations-screen .station-page-hero p,
.stations-screen .gateway-station-hero p,
.stations-screen .gateway-primary-status p,
.stations-screen .gateway-logistics-card p,
.stations-screen .gateway-project-card p,
.stations-screen .sigma-empty-state p,
.stations-screen .sigma-surface-hero p,
.stations-screen .planetary-action-preview p,
.stations-screen .gateway-workstream p,
.stations-screen .gateway-stock-row,
.stations-screen .sigma-resource-meta,
.stations-screen .planetary-flight-card {
  font-size: 10px;
}

.stations-screen .station-page-facts span,
.stations-screen .sigma-equipment-summary span,
.stations-screen .sigma-resource-heading small {
  font-size: 9px;
}

.station-strip {
  grid-auto-flow: row;
  grid-auto-columns: unset;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: visible;
}

.station-strip:has(> :nth-child(5):last-child) {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.station-strip:has(> :nth-child(5):last-child) > * {
  grid-column: span 2;
}

.station-strip:has(> :nth-child(5):last-child) > :nth-child(n + 4) {
  grid-column: span 3;
}

.station-strip:has(> :nth-child(5):last-child) .station-node {
  height: 104px;
  grid-template-rows: auto 20px auto 4px auto auto;
  padding: 5px 7px;
}

.station-strip:has(> :nth-child(5):last-child) .station-signal {
  grid-template-columns: 20px minmax(0, 1fr);
}

.station-strip:has(> :nth-child(5):last-child) .station-glyph {
  width: 20px;
  height: 20px;
}

.dispatcher-screen > .gateway-handoff-card {
  margin: 4px 4px 0;
}

/* Dispatcher information-panel background pilot.
   Baseline and rollback notes:
   GD/visual_experiments/dispatcher_information_background/DISPATCHER_INFORMATION_BACKGROUND_BASELINE_RU.md */
.system-overview {
  background:
    linear-gradient(rgba(7, 16, 20, 0.24), rgba(7, 16, 20, 0.46)),
    url("../../../assets/mobile-v2/dispatcher-system-overview-background.png") center top / 100% 100% no-repeat,
    #071014;
}

.system-overview .station-node {
  background: rgba(12, 20, 24, 0.5);
}

.system-overview .station-node.active {
  background: rgba(16, 33, 38, 0.5);
}

/* Hooks for the post-C22 handoff, recommended next step and explicit status counts. */
.handoff-card,
.gateway-handoff-card,
.next-step-card,
.gateway-next-step {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(57, 198, 196, 0.42);
  background:
    linear-gradient(135deg, rgba(57, 198, 196, 0.1), transparent 62%),
    rgba(7, 16, 20, 0.92);
  box-shadow: inset 3px 0 0 var(--accent);
}

.next-step-card,
.gateway-next-step {
  border-color: rgba(240, 185, 46, 0.42);
  background:
    linear-gradient(135deg, rgba(240, 185, 46, 0.09), transparent 62%),
    rgba(7, 16, 20, 0.92);
  box-shadow: inset 3px 0 0 var(--warn);
}

.handoff-card small,
.gateway-handoff-card small,
.next-step-card small,
.gateway-next-step small {
  color: var(--accent);
  font: 700 9px/1.25 var(--mono);
  text-transform: uppercase;
}

.next-step-card small,
.gateway-next-step small {
  color: var(--warn);
}

.handoff-card h2,
.gateway-handoff-card h2,
.next-step-card h2,
.gateway-next-step h2,
.handoff-card strong,
.gateway-handoff-card strong,
.next-step-card strong,
.gateway-next-step strong {
  color: var(--text);
  font: 800 12px/1.3 var(--mono);
}

.handoff-card p,
.gateway-handoff-card p,
.next-step-card p,
.gateway-next-step p {
  color: var(--muted);
  font: 10px/1.45 var(--mono);
}

.handoff-card .control-button,
.gateway-handoff-card .control-button,
.next-step-card .control-button,
.gateway-next-step .control-button {
  min-height: 44px;
}

.handoff-card > div,
.gateway-handoff-card > div {
  display: grid;
  gap: 4px;
}

.new-badge,
.station-new-badge {
  display: inline-flex;
  width: max-content;
  min-height: 20px;
  align-items: center;
  padding: 3px 6px;
  color: #071112;
  background: var(--accent);
  font: 800 9px/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.status-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.status-count {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(7, 16, 20, 0.72);
  font: 700 10px/1.2 var(--mono);
}

button.status-count {
  min-height: 44px;
  cursor: pointer;
}

.status-count::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  background: var(--dim);
}

.status-count.running::before {
  background: var(--ok);
}

.status-count.waiting::before {
  background: var(--warn);
}

.status-count.critical::before {
  background: var(--danger);
}

.station-node .status-counts {
  align-content: start;
  gap: 3px 5px;
}

.station-node .status-count {
  min-height: 11px;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 7px;
  line-height: 1;
  white-space: nowrap;
}

.station-node .status-count::before {
  width: 4px;
  height: 4px;
  flex-basis: 4px;
}

/* Nested Dispatcher panels may expand to their full height and have no internal
   scroll range. Let wheel input continue to the outer Dispatcher at their
   boundary; dragging an actual inner scrollbar still works. */
.dispatcher-screen .process-list,
.dispatcher-screen .warehouse-list,
.dispatcher-screen .related-operations-panel {
  overscroll-behavior-y: auto;
}

@media (max-width: 520px) {
  .mobile-v2-page {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: 0;
  }

  .app-shell {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-right: 0;
    border-left: 0;
  }
}

@media (max-width: 360px) {
  .stations-selector-button,
  .gateway-tab {
    padding-right: 3px;
    padding-left: 3px;
    font-size: 9px;
  }

  .station-strip {
    gap: 4px;
  }
}

/* WEB-P0 closed Alpha: explicit speed controls, version/backup tools and offline summary. */
.web-clock-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

.web-clock-row .clock {
  grid-column: auto;
  text-align: left;
}

.web-speed-control {
  display: grid;
  grid-template-columns: repeat(3, 28px);
  gap: 3px;
}

.web-speed-button {
  min-width: 28px;
  min-height: 20px;
  padding: 2px 3px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(7, 16, 20, 0.82);
  font: 700 8px/1 var(--mono);
  cursor: pointer;
}

.web-speed-button.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(57, 198, 196, 0.14);
  box-shadow: inset 0 0 0 1px rgba(57, 198, 196, 0.18);
}

.web-tools-panel,
.offline-summary-panel {
  position: absolute;
  right: 8px;
  bottom: 82px;
  left: 8px;
  z-index: 20;
  display: grid;
  gap: 10px;
  max-height: calc(100% - 98px);
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--line-strong);
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(57, 198, 196, 0.08), transparent 52%),
    rgba(7, 16, 20, 0.98);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.72), inset 3px 0 0 var(--accent);
}

.offline-summary-panel {
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.72), inset 3px 0 0 var(--warn);
}

.web-tools-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.web-tools-heading > div {
  display: grid;
  gap: 3px;
}

.web-tools-heading small,
.web-tools-panel > small,
.offline-summary-panel > small {
  color: var(--accent);
  font: 700 8px/1.35 var(--mono);
}

.offline-summary-panel .web-tools-heading small {
  color: var(--warn);
}

.web-tools-heading strong {
  font: 800 12px/1.3 var(--mono);
}

.web-tools-panel p,
.offline-summary-panel p {
  color: var(--muted);
  font: 10px/1.45 var(--mono);
}

.web-tools-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.web-tools-actions .control-button {
  min-height: 44px;
  white-space: normal;
}

.web-backup-input {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.offline-summary-rows {
  display: grid;
  gap: 5px;
}

.offline-summary-rows > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
  font: 9px/1.3 var(--mono);
}

.offline-summary-rows b {
  color: var(--accent);
}

.web-warning {
  padding: 7px 8px;
  border-left: 2px solid var(--warn);
  color: var(--warn) !important;
  background: rgba(240, 185, 46, 0.08);
}

@media (max-width: 340px) {
  .web-speed-control {
    grid-template-columns: repeat(3, 25px);
  }

  .web-speed-button {
    min-width: 25px;
  }

  .web-tools-actions {
    grid-template-columns: 1fr;
  }
}

/* M7 pre-gate progression: taxonomy, station projects and PG5 readiness. */
.production-category-filters {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  margin: 8px 0;
}

.production-category-filters > button {
  grid-column: span 2;
  min-width: 0;
  min-height: 34px;
  padding: 5px 3px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(7, 16, 20, 0.74);
  font: 700 8px/1.2 var(--mono);
  overflow-wrap: anywhere;
}

.production-category-filters > button:nth-child(n + 4) {
  grid-column: span 3;
}

.production-category-filters > button.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(57, 198, 196, 0.1);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.production-taxonomy-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 4px 0 8px;
}

.production-taxonomy-badges > span {
  padding: 3px 6px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
  font: 700 7px/1.2 var(--mono);
}

.production-taxonomy-badges > span:last-child {
  border-color: rgba(57, 198, 196, 0.42);
  color: var(--accent);
}

.m7-teaching-card,
.m7-nearest-locked,
.m7-project-card,
.m7-readiness-summary,
.m7-readiness-detail {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line-strong);
  background: rgba(7, 16, 20, 0.82);
  overflow-wrap: anywhere;
}

.m7-teaching-card {
  display: grid;
  gap: 8px;
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, rgba(57, 198, 196, 0.11), rgba(7, 16, 20, 0.86) 45%);
}

.m7-teaching-card > div,
.m7-nearest-locked > div {
  display: grid;
  gap: 3px;
}

.m7-teaching-card small,
.m7-nearest-locked small,
.m7-projects-title small,
.m7-project-heading small,
.m7-readiness-summary small {
  color: var(--accent);
  font: 700 8px/1.3 var(--mono);
  letter-spacing: 0.06em;
}

.m7-teaching-card strong,
.m7-nearest-locked strong,
.m7-project-heading strong {
  color: var(--text);
  font: 800 11px/1.3 var(--mono);
}

.m7-teaching-card p,
.m7-nearest-locked > span,
.m7-project-card p,
.m7-project-heading > div > span,
.m7-project-building span,
.m7-readiness-summary p,
.m7-readiness-summary > small:last-child,
.m7-readiness-row small {
  margin: 0;
  color: var(--muted);
  font: 9px/1.45 var(--mono);
}

.m7-nearest-locked {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-left: 3px solid var(--dim);
  opacity: 0.78;
}

.ordinary-station-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.m7-station-projects,
.m7-readiness-page,
.m7-readiness-groups {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.m7-projects-title,
.m7-project-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.m7-projects-title > div,
.m7-project-heading > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.m7-projects-title h2,
.m7-readiness-summary h2 {
  margin: 2px 0 0;
  color: var(--text);
  font: 800 14px/1.2 var(--mono);
  text-transform: uppercase;
}

.m7-projects-title > span {
  color: var(--dim);
  font: 700 7px/1.2 var(--mono);
  text-align: right;
}

.m7-project-card.running,
.m7-readiness-summary.complete,
.m7-readiness-detail.running {
  border-color: rgba(67, 194, 119, 0.46);
}

.m7-project-card.waiting,
.m7-readiness-detail.waiting {
  border-color: rgba(240, 185, 46, 0.48);
}

.m7-project-card.idle,
.m7-readiness-detail.idle {
  opacity: 0.72;
}

.m7-project-requirements,
.m7-project-building {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.m7-project-requirement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(82px, auto);
  gap: 7px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}

.m7-project-requirement > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.m7-project-requirement strong,
.m7-project-requirement b,
.m7-project-building strong,
.m7-readiness-row strong {
  color: var(--text);
  font: 800 9px/1.3 var(--mono);
}

.m7-project-requirement small {
  color: var(--muted);
  font: 8px/1.35 var(--mono);
}

.m7-project-requirement .project-network-summary {
  color: var(--accent);
}

.project-network-toggle,
.project-network-details {
  grid-column: 1 / -1;
}

.project-network-toggle {
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  color: var(--accent);
  background: rgba(57, 198, 196, 0.045);
  font: 700 7px/1.3 var(--mono);
  text-align: left;
}

.project-network-details {
  display: grid !important;
  gap: 4px !important;
}

.project-network-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: center;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line);
  color: var(--text);
  background: var(--panel-inset);
  text-align: left;
}

.project-network-entry > span {
  color: var(--accent);
  font: 700 6px/1.25 var(--mono);
}

.project-network-entry > strong,
.project-network-entry > small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.project-network-entry > strong {
  font: 800 8px/1.3 var(--mono);
}

.project-network-entry > small {
  color: var(--muted);
  font: 7px/1.35 var(--mono);
}

.project-network-entry > b {
  grid-column: 2;
  grid-row: 1 / span 3;
  color: var(--warn);
  font: 700 7px/1.25 var(--mono);
  text-align: right;
}

.project-network-entry.transit > span,
.project-network-entry.production > span {
  color: var(--ok);
}

.m7-project-requirement.complete {
  opacity: 0.64;
}

.m7-project-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 9px;
}

.m7-project-completed {
  color: var(--ok) !important;
}

.m7-readiness-summary {
  display: grid;
  gap: 8px;
  border-top: 3px solid var(--accent);
}

.m7-future-gate-entry {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px dashed rgba(57, 198, 196, 0.46);
  color: var(--accent);
  background: rgba(57, 198, 196, 0.055);
  font: 800 9px/1.35 var(--mono);
}

.m7-future-gate-entry span {
  color: var(--muted);
  font-weight: 400;
}

.m7-readiness-group {
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(7, 16, 20, 0.74);
  font: 700 8px/1.3 var(--mono);
  text-align: left;
}

.m7-readiness-group.active {
  border-color: var(--accent);
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--accent);
}

.m7-readiness-group.running {
  color: var(--ok);
}

.m7-readiness-group.waiting {
  color: var(--warn);
}

.m7-readiness-detail {
  display: grid;
  gap: 5px;
}

.m7-readiness-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}

.m7-readiness-row > span {
  color: var(--warn);
  font: 800 10px/1.2 var(--mono);
}

.m7-readiness-row > div {
  display: grid;
  gap: 2px;
}

.m7-readiness-row.ready > span {
  color: var(--ok);
}

@media (max-width: 390px) {
  .production-category-filters > button,
  .m7-project-card .control-button,
  .m7-readiness-summary .control-button {
    min-height: 44px;
  }

  .m7-project-requirement {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .m7-project-requirement > .control-button {
    grid-column: 1 / -1;
  }

  .m7-nearest-locked,
  .m7-projects-title,
  .m7-project-heading {
    flex-direction: column;
  }

  .m7-projects-title > span {
    text-align: left;
  }
}
/* Production cells-first navigation */
.production-cell-grid,
.production-recipe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.production-cell-card,
.production-recipe-card,
.production-queue-row {
  min-width: 0;
  min-height: 88px;
  border: 1px solid rgba(70, 196, 201, 0.28);
  background: rgba(7, 16, 20, 0.76);
  color: var(--text-primary, #dbe7e8);
  padding: 12px;
  text-align: left;
}

.production-cell-card.selected,
.production-cell-card:focus-visible,
.production-recipe-card:focus-visible {
  border-color: var(--accent, #43c7ca);
  box-shadow: inset 0 0 0 1px rgba(67, 199, 202, 0.48);
}

.production-cell-card-heading,
.production-queue-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.production-cell-card-heading {
  align-items: flex-start;
}

.production-cell-card-heading > strong {
  flex: 0 0 auto;
}

.production-cell-card-heading > .status-chip {
  min-width: 0;
  max-width: calc(100% - 32px);
  line-height: 1.25;
  overflow-wrap: normal;
  text-align: right;
}

.production-cell-card > span,
.production-recipe-card > span,
.production-recipe-card > small,
.production-queue-row > span,
.production-queue-row > small {
  display: block;
  margin-top: 6px;
}

.production-cell-card-recipe {
  color: var(--accent, #43c7ca);
  overflow-wrap: anywhere;
}

.production-cell-card-detail {
  color: var(--muted, #8ba0a3);
  line-height: 1.35;
}

.production-queue-command,
.production-cell-guidance,
.production-recipe-catalog,
.production-logical-queue {
  margin-top: 12px;
}

.production-queue-list {
  display: grid;
  gap: 8px;
}

.production-queue-row {
  width: 100%;
  min-height: 56px;
  align-items: center;
  flex-wrap: wrap;
}

.production-focus-cell,
.production-focus-queue,
.gateway-system-card {
  min-height: 68px;
}

.gateway-open-command {
  width: 100%;
  margin-top: 8px;
}

@media (max-width: 390px) {
  .production-cell-grid,
  .production-recipe-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .production-cell-card,
  .production-recipe-card,
  .production-queue-row {
    min-height: 48px;
  }
}

/* M7.5B Nexus Communications Node and NPC contracts */
.communications-node-panel,
.npc-contract-calendar,
.npc-contract-card,
.npc-contract-detail,
.npc-store-balance,
.npc-store-product,
.npc-package-selection {
  min-width: 0;
  border: 1px solid var(--line);
  background: rgba(9, 17, 22, 0.82);
}

.communications-node-panel {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border-color: rgba(57, 198, 196, 0.42);
  box-shadow: inset 3px 0 0 var(--accent);
}

.communications-node-heading,
.npc-contract-screen-heading,
.npc-contract-card-heading,
.npc-contract-detail-heading,
.npc-store-product-heading,
.npc-contract-group-heading,
.npc-contract-card-footer,
.npc-store-price {
  display: flex;
  min-width: 0;
  justify-content: space-between;
  align-items: flex-start;
  gap: 9px;
}

.communications-node-heading > div,
.npc-contract-screen-heading > div,
.npc-contract-card-heading > div,
.npc-contract-detail-heading > div,
.npc-store-product-heading > div,
.npc-contract-group-heading > div {
  min-width: 0;
}

.communications-node-heading small,
.npc-contract-screen-heading small,
.npc-contract-card-heading small,
.npc-contract-detail-heading small,
.npc-store-product-heading small,
.npc-contract-detail-section > small,
.npc-contract-calendar span,
.npc-store-balance span,
.npc-store-price span,
.npc-contract-group-heading small {
  display: block;
  color: var(--accent);
  font: 700 8px/1.3 var(--mono);
  letter-spacing: 0.08em;
}

.communications-node-heading h2,
.npc-contract-screen-heading h1,
.npc-contract-detail-heading h1,
.npc-contract-group-heading h2 {
  margin: 2px 0 0;
  color: var(--text);
  font: 800 13px/1.2 var(--mono);
  overflow-wrap: anywhere;
}

.communications-node-summary,
.npc-contract-calendar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.communications-node-summary > div,
.npc-contract-calendar > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--panel-inset);
}

.communications-node-summary span,
.communications-node-panel p,
.npc-contract-card p,
.npc-contract-detail p,
.npc-store-product p,
.npc-package-selection p {
  margin: 0;
  color: var(--muted);
  font: 8px/1.45 var(--mono);
}

.communications-node-summary strong,
.npc-contract-calendar strong,
.npc-store-balance strong,
.npc-store-price strong {
  color: var(--text);
  font: 800 11px/1.2 var(--mono);
}

.contracts-screen {
  display: grid;
  align-content: start;
  gap: 10px;
  overflow-x: hidden;
}

.npc-contract-screen-heading {
  align-items: center;
}

.npc-contract-screen-heading > .control-button {
  flex: 0 0 auto;
}

.npc-contract-calendar {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  padding: 8px;
  border-color: rgba(57, 198, 196, 0.32);
}

.npc-contract-calendar > .control-button {
  align-self: stretch;
}

.npc-contract-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  position: sticky;
  z-index: 2;
  top: -1px;
  padding: 3px;
  border: 1px solid var(--line);
  background: rgba(7, 12, 16, 0.97);
}

.npc-contract-tabs > button {
  min-width: 0;
  min-height: 38px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font: 800 8px/1.15 var(--mono);
  overflow-wrap: anywhere;
}

.npc-contract-tabs > button.active {
  border-color: var(--accent-dark);
  background: rgba(57, 198, 196, 0.12);
  color: var(--accent);
}

.npc-contract-offer-groups,
.npc-contract-active-list,
.npc-contract-store,
.npc-store-group,
.npc-contract-offer-group {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.npc-contract-offer-group,
.npc-store-group {
  padding-top: 2px;
}

.npc-contract-group-heading {
  align-items: center;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
}

.npc-contract-group-heading > span {
  min-width: 24px;
  padding: 3px 6px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  text-align: center;
  font: 800 8px/1 var(--mono);
}

.npc-contract-card,
.npc-contract-detail,
.npc-store-product,
.npc-package-selection {
  display: grid;
  gap: 10px;
  padding: 11px;
  overflow-wrap: anywhere;
}

.npc-contract-card.tier-medium {
  border-left: 3px solid var(--warn);
}

.npc-contract-card.tier-hard {
  border-left: 3px solid var(--danger);
}

.npc-contract-card.tier-easy,
.npc-contract-card.active.running {
  border-left: 3px solid var(--ok);
}

.npc-contract-card.active.waiting {
  border-left: 3px solid var(--warn);
}

.npc-contract-card-heading > div > strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font: 800 10px/1.3 var(--mono);
  overflow-wrap: anywhere;
}

.npc-contract-card-heading > .status-chip,
.npc-store-product-heading > .status-chip,
.npc-contract-detail-heading > .status-chip {
  flex: 0 1 auto;
  max-width: 46%;
  white-space: normal;
  text-align: right;
}

.npc-contract-requirement-list,
.npc-contract-evidence-list {
  display: grid;
  gap: 5px;
}

.npc-contract-requirement-row,
.npc-contract-evidence-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  background: var(--panel-inset);
}

.npc-contract-requirement-row > div,
.npc-contract-evidence-row > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.npc-contract-requirement-row strong,
.npc-contract-evidence-row strong,
.npc-contract-requirement-row b,
.npc-contract-evidence-row b {
  color: var(--text);
  font: 800 9px/1.25 var(--mono);
  overflow-wrap: anywhere;
}

.npc-contract-requirement-row small,
.npc-contract-evidence-row small,
.npc-contract-card-footer small,
.npc-store-price small {
  color: var(--muted);
  font: 7px/1.35 var(--mono);
}

.npc-contract-requirement-row.missing {
  border-color: rgba(240, 185, 46, 0.5);
}

.npc-contract-evidence-row.complete {
  border-color: rgba(67, 194, 119, 0.42);
  box-shadow: inset 2px 0 0 var(--ok);
}

.npc-contract-reward {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid rgba(57, 198, 196, 0.28);
  background: rgba(57, 198, 196, 0.06);
  color: var(--text);
  font: 800 9px/1.2 var(--mono);
}

.npc-contract-reward strong {
  color: var(--accent);
}

.npc-contract-card-footer {
  align-items: center;
  padding-top: 2px;
}

.npc-contract-card-footer > .control-button {
  flex: 0 0 auto;
}

.npc-contract-detail-section {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.npc-contract-note {
  padding-left: 8px;
  border-left: 2px solid var(--accent-dark);
}

.npc-contract-expiry-warning,
.project-package-consumption-warning {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid rgba(240, 185, 46, 0.5);
  background: rgba(240, 185, 46, 0.07);
  color: var(--warn);
  font: 8px/1.4 var(--mono);
}

.npc-store-balance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-color: rgba(57, 198, 196, 0.42);
}

.npc-store-product.owned {
  border-color: rgba(67, 194, 119, 0.42);
  box-shadow: inset 3px 0 0 var(--ok);
}

.npc-store-price {
  align-items: baseline;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.npc-package-station {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 44px;
  padding: 9px;
  border: 1px solid var(--line);
  background: var(--panel-inset);
  color: var(--muted);
  text-align: left;
}

.npc-package-station > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.npc-package-station strong {
  color: var(--text);
  font: 800 9px/1.2 var(--mono);
}

.npc-package-station small {
  font: 7px/1.3 var(--mono);
}

.npc-package-station.selected {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.npc-contract-preview-panel {
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

.npc-contract-preview-panel .contribution-preview-rows > div {
  grid-template-columns: minmax(0, 1fr) auto;
}

@media (max-width: 390px) {
  .contracts-screen .control-button,
  .communications-node-panel .control-button,
  .npc-package-selection .control-button,
  .npc-store-product .control-button,
  .npc-contract-preview-panel .control-button {
    min-height: 44px;
  }

  .npc-contract-calendar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .npc-contract-calendar > .control-button {
    grid-column: 1 / -1;
  }

  .npc-contract-card-footer,
  .npc-contract-detail-heading,
  .npc-store-product-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .npc-contract-card-footer > .control-button,
  .npc-contract-card-heading > .status-chip,
  .npc-store-product-heading > .status-chip,
  .npc-contract-detail-heading > .status-chip {
    width: 100%;
    max-width: none;
    text-align: left;
  }
}

@media (max-width: 340px) {
  .npc-contract-tabs {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* M7.75 — unlock journal, Institute and persistent planning */
.briefing-development-view,
.development-roadmap,
.development-roadmap-group,
.development-roadmap-list,
.briefing-section-heading {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.development-roadmap {
  padding: 12px;
  border: 1px solid rgba(57, 198, 196, 0.42);
  background: rgba(10, 17, 22, 0.72);
  box-shadow: inset 3px 0 0 var(--accent-dark);
}

.development-roadmap-heading,
.development-roadmap-card-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.development-roadmap-heading > div,
.development-roadmap-card-heading > div,
.briefing-section-heading {
  min-width: 0;
}

.development-roadmap-heading > div,
.development-roadmap-card-heading > div {
  display: grid;
  gap: 4px;
}

.development-roadmap-heading h2,
.briefing-section-heading h2 {
  margin: 0;
  color: var(--text);
  font: 800 14px/1.2 var(--mono);
}

.development-roadmap-heading p,
.development-roadmap-card p,
.development-roadmap-complete span,
.development-roadmap-note {
  margin: 0;
  color: var(--muted);
  font: 8px/1.45 var(--mono);
  overflow-wrap: anywhere;
}

.development-roadmap small,
.briefing-section-heading small {
  color: var(--dim);
  font: 700 7px/1.35 var(--mono);
  letter-spacing: 0.08em;
}

.development-roadmap-card {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  background: rgba(18, 24, 29, 0.72);
}

.development-roadmap-card.current {
  border-color: rgba(57, 198, 196, 0.58);
  box-shadow: inset 3px 0 0 var(--accent);
}

.development-roadmap-card.upcoming {
  background: rgba(18, 24, 29, 0.56);
}

.development-roadmap-card.future {
  border-style: dashed;
  border-color: rgba(240, 185, 46, 0.36);
  background: rgba(58, 47, 17, 0.18);
}

.development-roadmap-card strong {
  color: var(--text);
  font: 800 10px/1.3 var(--mono);
  overflow-wrap: anywhere;
}

.development-roadmap-card.compact {
  gap: 7px;
}

.development-roadmap-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.development-roadmap-facts > div,
.development-roadmap-complete {
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid var(--line);
  background: rgba(10, 17, 22, 0.62);
}

.development-roadmap-progress {
  color: var(--accent) !important;
}

.development-roadmap-note {
  padding-top: 2px;
  color: var(--dim);
}

.briefing-section-heading {
  gap: 3px;
  padding: 3px 2px 0;
}

.unlock-journal-list,
.institute-technology-list,
.planning-card-list,
.production-plan-draft-list,
.coordination-row-list,
.coordination-blocker-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.unlock-journal-card,
.unlock-journal-detail,
.technology-institute-panel,
.institute-research-slot,
.institute-activation-queue,
.institute-technology-card,
.planning-library-summary,
.planning-editor,
.planning-card,
.production-plan-draft-row,
.logistics-plan-save-command,
.system-coordination-panel,
.coordination-summary,
.coordination-group,
.coordination-row,
.coordination-blocker-list > div {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--panel);
}

.unlock-journal-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 68px;
  padding: 11px 12px;
  color: var(--text);
  text-align: left;
}

.unlock-journal-card > div,
.unlock-journal-detail-heading > div,
.technology-institute-panel-heading > div,
.institute-technology-heading > div,
.planning-card-heading > div,
.planning-editor-heading > div,
.system-coordination-panel > div,
.coordination-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.unlock-journal-card small,
.unlock-journal-detail small,
.technology-institute-panel small,
.institute-screen small,
.planning-screen small,
.logistics-plan-save-command small,
.coordination-screen small,
.system-coordination-panel small {
  color: var(--muted);
  font: 700 7px/1.35 var(--mono);
  letter-spacing: 0.08em;
}

.unlock-journal-card strong,
.unlock-journal-card span,
.unlock-journal-detail p,
.technology-institute-panel span,
.institute-technology-card p,
.planning-library-summary p,
.planning-card span,
.planning-card p,
.logistics-plan-save-command span,
.coordination-row span,
.coordination-boundary,
.system-coordination-panel span {
  overflow-wrap: anywhere;
}

.unlock-journal-card span,
.institute-technology-card p,
.planning-library-summary p,
.planning-card p,
.coordination-boundary,
.system-coordination-panel span {
  color: var(--muted);
  font: 8px/1.45 var(--mono);
}

.unlock-journal-card.unread {
  border-color: rgba(57, 198, 196, 0.56);
  box-shadow: inset 3px 0 0 var(--accent);
}

.unlock-journal-card.unread > b {
  color: var(--accent);
}

.unlock-journal-card.read {
  background: var(--panel-inset);
}

.unlock-journal-card > b {
  color: var(--muted);
  font: 800 8px/1 var(--mono);
}

.unlock-journal-detail,
.planning-editor {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.unlock-journal-detail-heading,
.technology-institute-panel-heading,
.institute-research-slot-heading,
.institute-technology-heading,
.planning-card-heading,
.planning-editor-heading,
.institute-catalog-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.unlock-journal-detail h1,
.planning-editor h1 {
  margin: 0;
  overflow-wrap: anywhere;
  font: 800 16px/1.15 var(--mono);
}

.unlock-journal-items,
.unlock-journal-answers {
  display: grid;
  gap: 7px;
}

.unlock-journal-items > div,
.unlock-journal-answers > div {
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid var(--line);
  background: var(--panel-inset);
}

.unlock-journal-items > div {
  grid-template-columns: auto minmax(0, 1fr);
}

.unlock-journal-items > div > span {
  color: var(--accent);
}

.unlock-journal-answers p {
  margin: 0;
}

.technology-institute-panel,
.system-coordination-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-color: rgba(57, 198, 196, 0.38);
  box-shadow: inset 3px 0 0 var(--accent-dark);
}

.technology-institute-panel-facts,
.coordination-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.technology-institute-panel-facts > div,
.coordination-summary > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  background: var(--panel-inset);
}

.technology-institute-panel-facts span,
.coordination-summary span {
  color: var(--muted);
  font: 700 7px/1.35 var(--mono);
}

.technology-institute-panel-facts strong,
.coordination-summary strong {
  color: var(--text);
  overflow-wrap: anywhere;
  font: 800 13px/1.15 var(--mono);
}

.institute-research-slot,
.institute-activation-queue,
.institute-technology-card,
.planning-library-summary,
.planning-card,
.production-plan-draft-row,
.logistics-plan-save-command,
.coordination-group {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.institute-research-slot.active,
.institute-technology-card.owned {
  border-color: rgba(240, 185, 46, 0.46);
  box-shadow: inset 3px 0 0 var(--warn);
}

.institute-research-slot.idle,
.institute-technology-card.active {
  border-color: rgba(67, 194, 119, 0.46);
  box-shadow: inset 3px 0 0 var(--ok);
}

.institute-research-slot p,
.institute-technology-card p,
.planning-card p,
.coordination-boundary {
  margin: 0;
}

.institute-queue-list,
.institute-dependencies,
.institute-technology-meta,
.planning-card-rows {
  display: grid;
  gap: 6px;
}

.institute-queue-list > div,
.institute-dependencies > span,
.planning-card-rows > div,
.coordination-blocker-list > div {
  display: grid;
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--panel-inset);
}

.institute-queue-list > div {
  grid-template-columns: auto minmax(0, 1fr);
}

.institute-queue-list b,
.production-plan-row-order > b {
  color: var(--accent);
  font: 800 9px/1 var(--mono);
}

.institute-technology-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  color: var(--muted);
  font: 700 7px/1.35 var(--mono);
}

.planning-library,
.institute-screen .specialized-content,
.planning-screen .specialized-content,
.coordination-screen .specialized-content {
  display: grid;
  gap: 12px;
}

.planning-library-summary {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.planning-library-summary > div {
  display: grid;
  gap: 2px;
  min-width: 64px;
}

.planning-library-summary > div > span {
  color: var(--muted);
  font: 700 7px/1 var(--mono);
}

.planning-library-summary > div > strong {
  color: var(--accent);
  font: 800 22px/1 var(--mono);
}

.planning-editor-note {
  display: grid;
  gap: 5px;
  padding: 9px;
  border-left: 3px solid var(--accent-dark);
  background: var(--panel-inset);
  color: var(--muted);
  font: 8px/1.4 var(--mono);
}

.planning-editor-note strong {
  color: var(--accent);
  font-size: 7px;
}

.production-plan-row-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 44px;
  gap: 6px;
  align-items: center;
}

.production-plan-row-order > .control-button,
.production-plan-draft-row > .control-button.compact {
  min-height: 44px;
}

.planning-card-rows > div {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.planning-card-rows .control-button {
  min-height: 40px;
}

.planning-card-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.planning-card-actions .control-button {
  min-width: 0;
  min-height: 44px;
  white-space: normal;
}

.logistics-plan-save-command {
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.65fr) auto;
  align-items: end;
  border-color: rgba(57, 198, 196, 0.32);
}

.logistics-plan-save-command > div,
.logistics-plan-route {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.logistics-plan-save-command input {
  min-width: 0;
  min-height: 44px;
}

.logistics-plan-route {
  padding: 9px;
  border: 1px solid var(--line);
  background: var(--panel-inset);
}

.system-coordination-panel {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin-bottom: 10px;
}

.coordination-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.coordination-boundary {
  padding: 10px;
  border: 1px solid rgba(240, 185, 46, 0.38);
  background: rgba(240, 185, 46, 0.06);
}

.coordination-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: var(--panel-inset);
}

.m775-preview-panel {
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

@media (min-width: 760px) {
  .development-roadmap-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .unlock-journal-list,
  .institute-technology-list,
  .planning-card-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .unlock-journal-detail,
  .planning-editor,
  .institute-research-slot,
  .institute-activation-queue,
  .institute-catalog-heading,
  .coordination-summary,
  .coordination-boundary,
  .coordination-group {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .development-roadmap-heading,
  .development-roadmap-card-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .development-roadmap-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .development-roadmap .control-button {
    min-height: 44px;
  }

  .technology-institute-panel-facts,
  .planning-library-summary,
  .logistics-plan-save-command,
  .system-coordination-panel,
  .planning-card-rows > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .coordination-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .planning-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .planning-card-actions > .control-button.danger {
    grid-column: 1 / -1;
  }

  .unlock-journal-detail-heading,
  .technology-institute-panel-heading,
  .institute-research-slot-heading,
  .institute-technology-heading,
  .planning-card-heading,
  .planning-editor-heading,
  .institute-catalog-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .unlock-journal-card,
  .coordination-row {
    align-items: stretch;
  }

  .unlock-journal-detail .control-button,
  .technology-institute-panel .control-button,
  .institute-screen .control-button,
  .planning-screen .control-button,
  .logistics-plan-save-command .control-button,
  .coordination-screen .control-button,
  .system-coordination-panel .control-button,
  .m775-preview-panel .control-button {
    min-height: 44px;
  }
}