/* The existing object surface consumes the same fading inset frame as closed lines/stations. */
.cityrail-depot-panel[data-shortage="true"] {
  --operation-frame-shadow: var(--ui-operation-frame), var(--material-shadow,var(--ui-shadow));
}
.depot-stock-summary {
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
}
.depot-kpis {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 20px;
  margin: 0;
}
.depot-kpi {
  min-width: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--ui-line);
}
.depot-kpi dt {
  font-size: 12px;
  font-weight: 500;
  color: var(--ui-muted);
}
.depot-kpi dd {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 5px 0 0;
}
.depot-kpi strong {
  font-size: 25px;
  font-weight: 650;
  line-height: 1.15;
  font-optical-sizing: auto;
}
.depot-kpi dd span {
  font-size: 12px;
  color: var(--ui-muted);
}
.depot-stock-note {
  font-size: 11px;
  line-height: 1.55;
  color: var(--ui-muted);
  margin: 12px 0 20px;
}
.depot-supply-status {
  margin: 18px 0;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--ui-line);
}
.depot-supply-status h3 {
  font-size: 17px;
  font-weight: 650;
  line-height: 1.35;
  margin: 0 0 7px;
}
.depot-supply-status[data-shortage="true"] h3,
.depot-shortage-list > li > b {
  --cr-readable-text: var(--ui-danger,#e53935);
  color: var(--cr-readable-text);
}
.depot-supply-status p,
.depot-shortage-list small {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ui-muted);
}
.depot-supply-status p {
  margin: 5px 0;
}
.depot-shortage-list {
  padding: 0;
  margin: 12px 0 0;
  list-style: none;
}
.depot-shortage-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 7px 0;
  font-size: 12px;
}
.depot-shortage-list li > div {
  min-width: 0;
}
.depot-shortage-list strong {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.depot-shortage-list small {
  display: block;
}
.depot-shortage-list li > b {
  white-space: nowrap;
  font-weight: 600;
}


/* Depot connection editor; the runtime no longer injects these panel rules. */
.depot-conn-route {
  display:flex;
  align-items:center;
  gap:10px;
  border: 0;
  padding: 10px 0;
}
.depot-conn-route strong {
  display:block;
  font-size:14px;
  font-weight:850;
  color:var(--cr-object-text,#f8fafc);
}
.depot-conn-route small {
  display:block;
  margin-top:3px;
  font-size:12px;
  color:var(--cr-object-muted,rgba(235,241,248,.62));
}
.depot-conn-rails,
.depot-conn-tools {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.depot-conn-rails button,
.depot-conn-tools button {
  min-height:36px;
  border:1px solid var(--cr-object-border,rgba(255,255,255,.13));
  border-radius:8px;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
  box-shadow:none;
  background:rgba(255,255,255,.055);
  color:var(--cr-object-text,#f8fafc);
}
.depot-conn-rails button[aria-pressed="true"],
.depot-conn-tools .primary {
  background:var(--cr-object-accent,#0a84ff);
  border-color:var(--cr-object-accent,#0a84ff);
  color:#fff;
}
.depot-conn-tools .secondary {
  background:rgba(255,255,255,.055);
  color:var(--cr-object-text,#f8fafc);
}
.depot-conn-node-field {
  align-items:start;
}
.depot-conn-node-list {
  display:grid;
  gap:7px;
  min-width:0;
}
.depot-conn-node-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  min-height:44px;
  padding:8px 9px;
  border-radius:10px;
  border:1px solid var(--cr-object-line,rgba(255,255,255,.095));
  background:rgba(5,8,12,.28);
  color:var(--cr-object-text,#f8fafc);
  text-align:left;
  cursor:pointer;
  box-shadow:none;
}
.depot-conn-node-row.active {
  border-color:var(--cr-object-accent,#0a84ff);
  background:rgba(10,132,255,.16);
}
.depot-conn-node-row b {
  display:block;
  font-size:12px;
  font-weight:850;
}
.depot-conn-node-row small {
  display:block;
  margin-top:2px;
  font-size:11px;
  color:var(--cr-object-faint,rgba(235,241,248,.42));
  font-variant-numeric:tabular-nums;
}
.depot-conn-node-row i {
  font-style:normal;
  flex:0 0 auto;
  font-size:12px;
  font-weight:850;
  color:#ffb4ad;
  padding:7px 9px;
  border-radius:9px;
  background:rgba(255,69,58,.12);
}

.depot-size-controls {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
}
.depot-size-controls button {
  min-width: 0;
  min-height: var(--ui-control-height,44px);
  padding: 0 8px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-field);
  color: var(--ui-text);
  font-weight: 600;
}
.depot-size-controls button[aria-pressed="true"] {
  background: var(--cr-object-accent);
  border-color: var(--cr-object-accent);
  color: #fff;
}

.cityrail-depot-panel[data-maintenance-shortage="true"] {
  --operation-frame-shadow: var(--ui-operation-frame), var(--material-shadow,var(--ui-shadow));
}
/* Engineering settings share the outer depot surface; selection uses an underline. */
.engineering-panel { display: grid; gap: 20px; color: var(--ui-text); }
.engineering-panel[hidden], .engineering-stock[hidden], .cityrail-depot-panel .depot-actions[hidden] { display: none; }
.engineering-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.engineering-tabs { border-bottom: 1px solid var(--ui-line); margin-bottom: 20px; }
#cityrail-depot-modal .engineering-buttons button,
#cityrail-depot-modal .engineering-sections button,
#cityrail-depot-modal .engineering-count button {
  position: relative; border: 0; border-radius: 0; padding: 10px 8px;
  min-height: 44px; background: transparent; color: var(--ui-muted);
  box-shadow: none; font: inherit; cursor: pointer; touch-action: manipulation;
}
.engineering-buttons button { flex: 1 1 auto; }
#cityrail-depot-modal .engineering-buttons button[aria-pressed="true"] {
  color: var(--ui-text); font-weight: 650;
}
#cityrail-depot-modal .engineering-buttons button[aria-pressed="true"]::after {
  content: ''; position: absolute; bottom: 0; left: 12%; right: 12%; height: 2px;
  background: currentColor; border-radius: 1px;
}
#cityrail-depot-modal .engineering-panel button:focus-visible,
#cityrail-depot-modal .engineering-tabs button:focus-visible { outline: 2px solid var(--ui-text); outline-offset: 2px; }
#cityrail-depot-modal .engineering-panel button:disabled { opacity: .35; cursor: default; }
.engineering-vehicles, .engineering-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.engineering-vehicles { flex-wrap: wrap; }
.engineering-vehicles > .engineering-buttons { flex: 1; min-width: 120px; }
.engineering-count { display: flex; align-items: center; }
#cityrail-depot-modal .engineering-count button { min-width: 44px; color: var(--ui-text); }
#cityrail-depot-modal .engineering-count input { width: 52px; min-height: 44px; padding: 4px; text-align: center; border: 0; background: transparent; color: var(--ui-text); font: inherit; }
.engineering-section { border-top: 1px solid var(--ui-line); padding-top: 18px; }
.engineering-section h3 { margin: 0 0 12px; font-size: inherit; font-weight: 650; }
.engineering-control-row {
  flex-wrap: wrap;
}
.engineering-control-row > .engineering-buttons {
  flex-shrink: 0;
  white-space: nowrap;
}
.engineering-row h3 { margin: 0; }
.engineering-muted, .engineering-timing dt { color: var(--ui-muted); }
.engineering-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #d99b2c; margin-right: 7px; vertical-align: middle; }
.engineering-timing { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; text-align: center; }
.engineering-timing dd { margin: 8px 0 0; font-size: 1.12em; font-weight: 650; font-variant-numeric: tabular-nums; }
.engineering-panel summary { cursor: pointer; min-height: 44px; line-height: 44px; font-weight: 600; }
.engineering-sections { display: grid; }
#cityrail-depot-modal .engineering-sections button { display: flex; justify-content: space-between; gap: 12px; text-align: left; border-bottom: 1px solid var(--ui-line); }
#cityrail-depot-modal .engineering-sections button[aria-pressed="true"] { color: var(--ui-text); font-weight: 650; }
.engineering-status { padding: 14px 0; border-bottom: 1px solid var(--ui-line); }
.engineering-status .engineering-row { flex-wrap: wrap; }
.engineering-warning { color: var(--danger,#ff453a); margin: 12px 0 0; }
.engineering-empty { text-align: center; color: var(--ui-muted); padding: 24px 0; }
.engineering-help { margin: 0; padding-top: 12px; border-top: 1px solid var(--ui-line); color: var(--ui-muted); font-size: 12px; line-height: 1.65; }

@media (max-width: 600px) {
  #cityrail-depot-modal .engineering-count input { font-size: 16px; }
}