/* yards.css — where equipment is stored between trips.
   ───────────────────────────────────────────────────────────────────────────
   The overview leads with the count, because "how many cars are at Croton
   right now" is the question the page exists to answer. Everything else on a
   card is subordinate to that number, so it's set large in mono while the
   name and line sit quietly beneath it.

   Colors come from styles.css; only the away-from-base accent is local. */

.yards-page {
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --away: #d29922;
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  overflow-y: auto;
}

.yards-header {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  padding: calc(14px + env(safe-area-inset-top)) 20px 14px;
  border-bottom: 1px solid var(--panel-border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 3;
}
.yards-back { align-self: center; }
.yards-title { display: flex; flex-direction: column; gap: 2px; }
.yards-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.yards-title h1 { font-size: 17px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.yards-status {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

.yards-note {
  margin: 0;
  padding: 10px 20px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 62ch;
}

.yards-main { padding: 4px 20px calc(28px + env(safe-area-inset-bottom)); }

/* ─── Yard cards ─────────────────────────────────────────────────────────── */

.yards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}
.yard-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 12px 10px;
  background: rgba(22, 27, 34, 0.85);
  border: 1px solid var(--panel-border);
  border-left: 3px solid var(--panel-border);
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s;
}
.yard-card:hover { background: rgba(22, 27, 34, 1); border-color: #484f58; }
.yard-card.is-selected { border-left-color: var(--early); background: rgba(22, 27, 34, 1); }
.yard-card.is-empty { opacity: 0.45; }
.yard-card:focus-visible { outline: 2px solid var(--early); outline-offset: 2px; }

.yard-count {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.yard-name { font-size: 12.5px; }
.yard-meta {
  display: flex;
  gap: 7px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}
.yard-locos { color: var(--loco, #b0703a); }

/* ─── Detail panel ───────────────────────────────────────────────────────── */

.yards-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.yards-tabs button {
  background: rgba(22, 27, 34, 0.85);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  padding: 4px 12px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.yards-tabs button:hover { border-color: #484f58; }
.yards-tabs button.active { color: var(--text); border-color: #484f58; }

.yards-body-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: 6px;
}
.yards-empty { color: var(--muted); font-size: 12.5px; padding: 20px 0; line-height: 1.5; }

.yards-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.yards-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 10px 6px 0;
}
.yards-table td { padding: 6px 10px 6px 0; border-top: 1px solid #1b2026; }
.yards-table tr:hover td { background: rgba(255, 255, 255, 0.025); }
.cell-car { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.cell-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cell-muted { color: var(--muted); font-size: 11.5px; }
.cell-away { color: var(--away); }
.loco-dot { color: var(--loco, #b0703a); }

/* Deadhead arrivals are the high-confidence ones — nobody deadheads to a
   platform — so they're marked rather than left to look identical to a
   scheduled terminus. */
.tag-dh {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(88, 166, 255, 0.15);
  color: var(--early);
}

.link-btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--early);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }

/* ─── Home base distribution ─────────────────────────────────────────────── */

.home-base { margin: 10px 0 16px; max-width: 460px; }
.home-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.home-row {
  display: grid;
  grid-template-columns: 140px 1fr 40px;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  font-size: 12px;
}
.home-bar { height: 8px; background: #1b2026; border-radius: 1px; overflow: hidden; }
.home-bar i { display: block; height: 100%; background: var(--early); }
.home-pct {
  font-family: var(--mono);
  font-size: 11px;
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
  .yards-header, .yards-main, .yards-note { padding-left: 14px; padding-right: 14px; }
  .yards-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .yard-count { font-size: 20px; }
  .home-row { grid-template-columns: 100px 1fr 36px; }
}


/* ─── Equipment class filter ─────────────────────────────────────────────────
   Diesels are the default because they're what people track by number: a few
   dozen units with names and liveries, against hundreds of near-identical
   EMU cars that would bury them. */
.yards-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 20px 12px;
}
.class-chip {
  background: rgba(22, 27, 34, 0.85);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  padding: 4px 11px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background-color 0.12s;
}
.class-chip:hover { border-color: #484f58; }
.class-chip.is-on {
  color: var(--text);
  border-color: var(--early);
  background: rgba(88, 166, 255, 0.1);
}
.class-chip.is-reset { margin-left: auto; color: var(--muted); font-size: 11px; }
.class-chip.is-reset:hover { color: var(--text); }

.yard-of { opacity: 0.7; }
.head-hidden { color: var(--muted); text-transform: none; letter-spacing: 0; }

@media (max-width: 620px) {
  .yards-filters { padding-left: 14px; padding-right: 14px; }
  .class-chip.is-reset { margin-left: 0; }
}