/* ==========================================================================
   Railway Control Desktop — night-shift control room
   Palette: dark CRT glass, amber phosphor, signal green.
   ========================================================================== */

:root {
  --ink: #050806;
  --glass: #0b120e;
  --panel: #0e1712;
  --panel-2: #121e17;
  --panel-hi: #16261d;
  --edge: #244034;
  --edge-soft: #1a2c22;
  --amber: #ffb454;
  --amber-dim: #b97c34;
  --amber-glow: rgba(255, 180, 84, 0.55);
  --green: #57f5a0;
  --green-dim: #2f9a68;
  --green-glow: rgba(87, 245, 160, 0.5);
  --red: #ff6a5e;
  --red-dim: #a13f38;
  --blue: #6fc3ff;
  --violet: #c79bff;
  --text: #cfe6d8;
  --text-dim: #7f9a8c;
  --text-faint: #55705f;
  --warn: #ffd166;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.72), 0 2px 0 rgba(255, 255, 255, 0.02) inset;
  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select { font-family: inherit; font-size: inherit; color: inherit; }

/* --- Ambient room -------------------------------------------------------- */

#room {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 700px at 50% -10%, #10201a 0%, #070b09 55%, #040605 100%);
}

#room::after {
  /* faint wall grime / desk light pool */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 300px at 20% 110%, rgba(255, 180, 84, 0.06), transparent 70%),
    radial-gradient(700px 320px at 88% 112%, rgba(87, 245, 160, 0.05), transparent 70%);
  pointer-events: none;
}

/* CRT glass overlay: scanlines, vignette, slow flicker */
#crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  mix-blend-mode: screen;
  opacity: 0.5;
}
#crt .scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.22) 3px,
    rgba(0, 0, 0, 0) 4px
  );
}
#crt .sweep {
  position: absolute;
  left: 0; right: 0; height: 22%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(180, 255, 210, 0.045), rgba(255, 255, 255, 0));
  animation: sweep 7.5s linear infinite;
}
@keyframes sweep { from { top: -25%; } to { top: 110%; } }
#crt .vig {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
}
#room.flicker { animation: flicker 6s steps(1, end) infinite; }
@keyframes flicker {
  0%, 96%, 100% { filter: none; }
  96.5% { filter: brightness(0.86) contrast(1.06); }
  97% { filter: brightness(1.04); }
  97.5% { filter: brightness(0.93); }
}
body.calm #crt { opacity: 0.22; }
body.calm #room.flicker { animation: none; }

/* --- Top status rail ----------------------------------------------------- */

#toprail {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 34px;
  z-index: 4000;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  background: linear-gradient(to bottom, #0d1712, #0a120e);
  border-bottom: 1px solid var(--edge);
  box-shadow: 0 1px 0 rgba(255, 180, 84, 0.08);
  font-size: 11.5px;
  letter-spacing: 0.06em;
}
#toprail .brand {
  color: var(--amber);
  text-shadow: 0 0 10px var(--amber-glow);
  font-weight: 700;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
#toprail .sep { width: 1px; height: 18px; background: var(--edge); }
#toprail .stat { color: var(--text-dim); white-space: nowrap; }
#toprail .stat b { color: var(--text); font-weight: 600; }
#toprail .clock {
  margin-left: auto;
  color: var(--green);
  text-shadow: 0 0 10px var(--green-glow);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}
#toprail .livebadge {
  padding: 1px 7px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}
#toprail .livebadge.live { color: var(--green); border-color: var(--green-dim); }
#toprail .livebadge.snap { color: var(--warn); border-color: #6b5a24; }
#toprail .livebadge.down { color: var(--red); border-color: var(--red-dim); }

/* --- Desktop / windows --------------------------------------------------- */

#desk {
  position: fixed;
  inset: 34px 0 62px 0;
  overflow: hidden;
}

.win {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  min-height: 140px;
  background: linear-gradient(to bottom, var(--panel), var(--glass));
  border: 1px solid var(--edge);
  border-radius: 3px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: opacity 0.12s linear;
}
.win::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 180, 84, 0.035), transparent 40%);
}
.win.dragging { transition: none; }
.win.minimized { display: none; }
.win.focused { border-color: var(--amber-dim); }
.win.focused .win-title { color: var(--amber); text-shadow: 0 0 8px var(--amber-glow); }
.win.alert { border-color: var(--red-dim); }
.win.alert .win-title { color: var(--red); }

.win-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 27px;
  padding: 0 6px 0 9px;
  background: linear-gradient(to bottom, var(--panel-2), #0c1410);
  border-bottom: 1px solid var(--edge-soft);
  cursor: grab;
  user-select: none;
  touch-action: none;
  flex: 0 0 auto;
}
.win.dragging .win-titlebar { cursor: grabbing; }
.win-titlebar .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-dim);
  box-shadow: 0 0 6px var(--green-glow);
  flex: 0 0 auto;
}
.win.alert .win-titlebar .dot { background: var(--red); box-shadow: 0 0 6px rgba(255,106,94,0.7); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.win-title {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
}
.win-title .tag { color: var(--text-faint); letter-spacing: 0.06em; text-transform: none; }
.win-btns { display: flex; gap: 3px; flex: 0 0 auto; }
.win-btns button {
  width: 20px; height: 18px;
  line-height: 1;
  background: #0b130f;
  border: 1px solid var(--edge-soft);
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
  font-size: 12px;
}
.win-btns button:hover { background: var(--panel-hi); color: var(--amber); border-color: var(--edge); }
.win-btns button:focus-visible { outline: 1px solid var(--amber); outline-offset: 1px; }

.win-body {
  flex: 1 1 auto;
  overflow: auto;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--edge) transparent;
}
.win-body::-webkit-scrollbar { width: 9px; height: 9px; }
.win-body::-webkit-scrollbar-thumb { background: var(--edge); border: 2px solid transparent; background-clip: content-box; }
.win-resize {
  position: absolute;
  right: 0; bottom: 0;
  width: 16px; height: 16px;
  cursor: nwse-resize;
  touch-action: none;
  background: linear-gradient(135deg, transparent 45%, var(--edge) 46%, var(--edge) 58%, transparent 59%);
}

/* --- Shared panel widgets ------------------------------------------------ */

.pad { padding: 8px 10px; }
.row { display: flex; align-items: center; gap: 8px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.mono-num { font-variant-numeric: tabular-nums; }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.amber { color: var(--amber); }
.green { color: var(--green); }
.red { color: var(--red); }
.warn { color: var(--warn); }
.blue { color: var(--blue); }
.small { font-size: 11px; }
.tiny { font-size: 10px; letter-spacing: 0.04em; }
.hr { height: 1px; background: var(--edge-soft); margin: 7px 0; }
.sect-title {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-faint); margin: 2px 0 6px;
}

.btn {
  background: #0d1611;
  border: 1px solid var(--edge);
  color: var(--text);
  padding: 5px 9px;
  cursor: pointer;
  border-radius: 2px;
  letter-spacing: 0.04em;
  min-height: 26px;
}
.btn:hover { background: var(--panel-hi); border-color: var(--amber-dim); color: var(--amber); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 1px solid var(--amber); outline-offset: 1px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary { border-color: var(--green-dim); color: var(--green); }
.btn.primary:hover { background: #10301f; border-color: var(--green); color: #bfffe0; }
.btn.danger { border-color: var(--red-dim); color: var(--red); }
.btn.danger:hover { background: #2a1412; border-color: var(--red); color: #ffd2cd; }
.btn.sm { padding: 3px 7px; min-height: 22px; font-size: 11px; }
.btn.on { background: #14251b; border-color: var(--green-dim); color: var(--green); }

.pill {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pill.g { color: var(--green); border-color: var(--green-dim); }
.pill.a { color: var(--amber); border-color: var(--amber-dim); }
.pill.r { color: var(--red); border-color: var(--red-dim); }
.pill.b { color: var(--blue); border-color: #2c5878; }
.pill.d { color: var(--text-dim); }

table.grid { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.grid th {
  text-align: left; font-weight: 600; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint);
  padding: 4px 6px; border-bottom: 1px solid var(--edge); position: sticky; top: 0;
  background: var(--panel); z-index: 1;
}
table.grid td { padding: 4px 6px; border-bottom: 1px solid var(--edge-soft); }
table.grid tr:hover td { background: rgba(255, 180, 84, 0.04); }
table.grid tr.hot td { background: rgba(255, 106, 94, 0.06); }
table.grid tr.sel td { background: rgba(87, 245, 160, 0.08); }

.log-line { padding: 3px 0; border-bottom: 1px dotted var(--edge-soft); display: flex; gap: 8px; }
.log-line .t { color: var(--text-faint); flex: 0 0 auto; }
.log-line .m { flex: 1 1 auto; }
.log-line.k-inc .m { color: var(--red); }
.log-line.k-dec .m { color: var(--amber); }
.log-line.k-ok .m { color: var(--green); }
.log-line.k-radio .m { color: var(--blue); }

.radio-line { padding: 5px 0; border-bottom: 1px dotted var(--edge-soft); }
.radio-line .who { color: var(--amber); letter-spacing: 0.08em; }
.radio-line .who small { color: var(--text-faint); letter-spacing: 0; }
.radio-line .tx { color: var(--text); }
.radio-line .tx.static { color: var(--text-faint); font-style: italic; }

/* Map window */
.map-wrap { position: relative; width: 100%; height: 100%; background: #060b09; }
.map-wrap canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.map-toolbar {
  position: absolute; top: 6px; left: 6px; right: 6px;
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  pointer-events: none;
}
.map-toolbar > * { pointer-events: auto; }
.map-toolbar .grp {
  display: flex; gap: 4px; align-items: center;
  background: rgba(8, 16, 12, 0.86);
  border: 1px solid var(--edge);
  border-radius: 3px;
  padding: 3px 6px;
  backdrop-filter: blur(2px);
}
.map-legend {
  position: absolute; left: 6px; bottom: 6px;
  background: rgba(8, 16, 12, 0.86);
  border: 1px solid var(--edge);
  border-radius: 3px;
  padding: 5px 8px;
  font-size: 10px;
  color: var(--text-dim);
  max-width: 240px;
}
.map-legend .k { display: inline-flex; align-items: center; gap: 4px; margin-right: 9px; }
.map-legend .sw { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.train-inspector {
  position: absolute; right: 6px; bottom: 6px; width: 258px; max-width: calc(100% - 12px);
  background: rgba(8, 16, 12, 0.94);
  border: 1px solid var(--edge);
  border-radius: 3px;
  padding: 8px 9px;
  font-size: 11px;
  max-height: 74%;
  overflow: auto;
}
.train-inspector.hidden { display: none; }
.train-inspector .id { color: var(--amber); letter-spacing: 0.1em; font-weight: 700; }
.actgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 7px; }
.actgrid .btn { width: 100%; }
select.sel {
  background: #0b130f; border: 1px solid var(--edge); color: var(--text);
  padding: 3px 5px; border-radius: 2px; width: 100%;
}

/* Handover + notices */
.notice {
  border: 1px solid var(--edge);
  border-left: 3px solid var(--amber-dim);
  background: rgba(255, 180, 84, 0.05);
  padding: 7px 9px; margin-bottom: 7px;
}
.notice.urgent { border-left-color: var(--red); background: rgba(255, 106, 94, 0.07); }
.notice.ok { border-left-color: var(--green); background: rgba(87, 245, 160, 0.05); }
.notice .h { color: var(--amber); letter-spacing: 0.08em; }
.notice.urgent .h { color: var(--red); }
.notice.ok .h { color: var(--green); }

/* Diagram */
.diagram svg { width: 100%; height: auto; display: block; }

/* --- Bottom ticker + taskbar -------------------------------------------- */

#ticker {
  position: fixed;
  left: 0; right: 0; bottom: 34px;
  height: 28px;
  z-index: 4000;
  background: #070d0a;
  border-top: 1px solid var(--edge-soft);
  border-bottom: 1px solid var(--edge-soft);
  overflow: hidden;
  display: flex;
  align-items: center;
}
#ticker .tk-label {
  flex: 0 0 auto; height: 100%; display: flex; align-items: center;
  padding: 0 10px; background: linear-gradient(to right, #1a1206, #0d0b05);
  color: var(--amber); letter-spacing: 0.18em; font-size: 10px;
  border-right: 1px solid var(--edge);
}
#ticker .tk-track { position: relative; flex: 1 1 auto; height: 100%; overflow: hidden; }
#ticker .tk-run {
  position: absolute; white-space: nowrap; top: 0; line-height: 28px;
  font-size: 11.5px; color: var(--text-dim);
  animation: tk 46s linear infinite;
}
#ticker .tk-run b { color: var(--amber); font-weight: 600; }
#ticker .tk-run i { color: var(--red); font-style: normal; }
#ticker .tk-run u { color: var(--green); text-decoration: none; }
@keyframes tk { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

#taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 34px;
  z-index: 4000;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  background: linear-gradient(to top, #0c1511, #0a110d);
  border-top: 1px solid var(--edge);
  overflow-x: auto;
  overflow-y: hidden;
}
#taskbar::-webkit-scrollbar { height: 6px; }
#taskbar::-webkit-scrollbar-thumb { background: var(--edge); }
.tb-btn {
  flex: 0 0 auto;
  height: 24px;
  padding: 0 10px;
  background: #0d1611;
  border: 1px solid var(--edge-soft);
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.07em;
  cursor: pointer;
  white-space: nowrap;
}
.tb-btn:hover { color: var(--amber); border-color: var(--edge); }
.tb-btn.active { color: var(--amber); border-color: var(--amber-dim); background: #14231a; }
.tb-btn.alert { color: var(--red); border-color: var(--red-dim); }
.tb-btn:focus-visible { outline: 1px solid var(--amber); outline-offset: 1px; }
#taskbar .tb-gap { flex: 1 1 auto; }

/* --- Modal (handover / prompts) ----------------------------------------- */

.modal-scrim {
  position: fixed; inset: 0; z-index: 6000;
  background: rgba(3, 6, 4, 0.66);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modal-scrim.hidden { display: none; }
.modal {
  width: min(560px, 100%);
  max-height: 86vh;
  overflow: auto;
  background: linear-gradient(to bottom, var(--panel), var(--glass));
  border: 1px solid var(--amber-dim);
  box-shadow: var(--shadow), 0 0 40px rgba(255, 180, 84, 0.12);
  border-radius: 3px;
}
.modal header {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid var(--edge);
  background: linear-gradient(to bottom, #17251c, #0d1611);
}
.modal header h2 { margin: 0; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); flex: 1 1 auto; }
.modal .body { padding: 12px; }
.modal footer { padding: 10px 12px; border-top: 1px solid var(--edge); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* Toast */
#toasts { position: fixed; right: 10px; top: 42px; z-index: 7000; display: flex; flex-direction: column; gap: 6px; max-width: 320px; }
.toast {
  background: rgba(10, 18, 14, 0.96);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--amber-dim);
  padding: 7px 10px; font-size: 11.5px; box-shadow: var(--shadow);
  animation: toastIn 0.18s ease-out;
}
.toast.urgent { border-left-color: var(--red); }
.toast.ok { border-left-color: var(--green); }
.toast .h { color: var(--amber); letter-spacing: 0.08em; font-size: 10px; text-transform: uppercase; }
.toast.urgent .h { color: var(--red); }
.toast.ok .h { color: var(--green); }
@keyframes toastIn { from { opacity: 0; transform: translateX(14px); } }

/* --- Narrow viewports ---------------------------------------------------- */

#mobile-hint { display: none; }

@media (max-width: 720px) {
  html, body { font-size: 12.5px; overflow: auto; }
  #desk { position: fixed; inset: 34px 0 62px 0; overflow: hidden; }
  #toprail { gap: 8px; padding: 0 8px; font-size: 10.5px; }
  #toprail .hide-sm { display: none; }
  .win {
    left: 4px !important; right: 4px !important;
    width: auto !important;
    max-width: none;
  }
  .win-body { max-height: none; }
  #toprail {
    flex-wrap: wrap;
    height: 54px;
    align-content: center;
    row-gap: 1px;
    gap: 8px;
    padding: 3px 8px;
    font-size: 10px;
  }
  #toprail .brand { letter-spacing: 0.08em; }
  #toprail .clock { font-size: 12px; }
  #toprail .stat { font-size: 10px; }
  #toprail .livebadge { font-size: 9px; padding: 1px 5px; }
  #desk { inset: 54px 0 68px 0; }
  .btn { min-height: 40px; padding: 8px 11px; }
  .btn.sm { min-height: 34px; }
  .win-btns button { width: 34px; height: 32px; }
  .win-titlebar { height: 34px; }
  select.sel { min-height: 36px; }
  .tb-btn { height: 32px; padding: 0 9px; font-size: 10.5px; }
  #taskbar { height: 72px; flex-wrap: wrap; align-content: center; overflow-x: hidden; overflow-y: auto; }
  #taskbar > .row { flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
  #ticker { bottom: 72px; }
  #desk { inset: 54px 0 100px 0; }
  .map-toolbar { flex-direction: column; align-items: flex-start; }
  .train-inspector { width: calc(100% - 12px); left: 6px; right: 6px; max-height: 52%; }
  .map-legend { display: none; }
  #ticker .tk-label { letter-spacing: 0.1em; padding: 0 7px; }
  #toasts { top: 60px; right: 6px; left: 6px; max-width: none; }
  .modal { width: 100%; }
  #mobile-hint {
    display: block; position: fixed; left: 6px; right: 6px; top: 60px; z-index: 4500;
    background: rgba(8,16,12,0.94); border: 1px solid var(--edge); border-radius: 3px;
    padding: 5px 8px; font-size: 10.5px; color: var(--text-dim);
  }
}

@media (prefers-reduced-motion: reduce) {
  #crt .sweep { animation: none; opacity: 0; }
  #room.flicker { animation: none; }
  #ticker .tk-run { animation-duration: 120s; }
}