/* ponytail: when you change this file, bump ?v= on the stylesheet link in index.html; the host caches css for 7 days */
:root { --bg:#0b1020; --panel:#121a2e; --panel-border:#243052; --text:#cfd6ea; --dim:#7d88a6;
  --accent:#5aa9ff; --green:#39d353; --amber:#f0b429; --red:#ff4d4f;
  --hud-h: 32px; /* --side-w-left, --side-w-right, --bottom-h: docked panel sizes, set by ui.js */
  --row: #18223b; --mono: ui-monospace, Menlo, Consolas, monospace; }
:root { color-scheme: dark; } /* dark scrollbars and form controls */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; color: var(--text);
  font: 13px/1.45 system-ui, sans-serif; }
canvas#map { position: fixed; inset: 0; display: block; touch-action: none; }
.mono { font-family: var(--mono); }
.dim { color: var(--dim); }

#hud { position: fixed; top: 0; left: 0; right: 0; height: var(--hud-h); display: flex; align-items: center;
  gap: 12px; padding: 0 12px; background: color-mix(in srgb, var(--panel) 88%, transparent); border-bottom: 1px solid var(--panel-border); z-index: 10;
  white-space: nowrap; overflow: hidden; }
#hud .wordmark { display: flex; align-items: center; height: 18px; margin-right: 2px; }
#hud .wordmark img { height: 18px; display: block; }
#hud .wordmark .glyph { display: none; }
#hud .spacer { flex: 1; }
#hud-clock { font: 600 14px var(--mono); color: var(--text); min-width: 5ch; }
#hud-sky { position: relative; width: 16px; display: inline-block; }
#hud-sky i { position: absolute; left: 0; top: -9px; font-style: normal; }
#hud-sky .sun { color: var(--amber); }
#hud-sky .moon { color: var(--text); }
#hud-auto { min-width: 76px; font-weight: 600; letter-spacing: 1px; color: var(--amber); border-color: rgba(240,180,41,.45); }
#hud-auto.on { color: var(--green); border-color: rgba(57,211,83,.4); }
#hud-seed { font-family: var(--mono); color: var(--text); }
#hud-seed::before { content: 'seed '; color: var(--dim); font-family: system-ui, sans-serif; }
#hud button[data-panel] { color: var(--dim); }
#hud button.on { color: var(--accent); }
@media (max-width: 1160px) { #hud .wordmark .full { display: none; } #hud .wordmark .glyph { display: block; } #hud { gap: 8px; } } /* room for the zoom buttons */
@media (max-width: 1000px) { #hud-seed { display: none; } }
button, select, input { font: inherit; }
button { background: var(--panel); color: var(--accent); border: 1px solid var(--panel-border);
  border-radius: 4px; padding: 2px 8px; cursor: pointer; }
button:hover { border-color: var(--accent); }
select, input { background: var(--bg); color: var(--text); border: 1px solid var(--panel-border); border-radius: 4px; padding: 1px 4px; }
input[type=radio], input[type=checkbox] { accent-color: var(--accent); }

/* Docking: a fixed grid under the HUD. Side docks span the full height, the bottom dock runs between them, and
   #dock-center (what they leave free) is where the map gets fitted. Empty docks collapse to nothing. */
#docks { position: fixed; inset: var(--hud-h) 0 0 0; display: grid; z-index: 5; pointer-events: none;
  grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; }
#dock-left { grid-area: 1 / 1 / 3 / 2; }
#dock-center { grid-area: 1 / 2 / 2 / 3; }
#dock-right { grid-area: 1 / 3 / 3 / 4; }
#dock-bottom { grid-area: 2 / 2 / 3 / 3; display: flex; min-width: 0; position: relative; }
#dock-left, #dock-right { display: flex; flex-direction: column; min-height: 0; position: relative; }
/* A dock's 6 px resize handle straddles its inner edge, over its panels (flex items keep their z-index 6); hidden
   while the dock holds no visible panel (ui.js sets .empty). */
.dock-handle { position: absolute; z-index: 7; pointer-events: auto; touch-action: none; }
#dock-left > .dock-handle, #dock-right > .dock-handle { top: 0; bottom: 0; width: 6px; cursor: col-resize; }
#dock-left > .dock-handle { right: -3px; }
#dock-right > .dock-handle { left: -3px; }
#dock-bottom > .dock-handle { left: 0; right: 0; top: -3px; height: 6px; cursor: row-resize; }
.dock-handle:hover, .dock-handle.active { background: rgba(90,169,255,.4); }
.empty > .dock-handle, body.bare .dock-handle { display: none; }

.panel { position: fixed; width: 300px; max-height: calc(100vh - var(--hud-h) - 24px); background: var(--panel);
  border: 1px solid var(--panel-border); border-radius: 6px; font: 12px/1.4 system-ui, sans-serif; z-index: 6;
  display: flex; flex-direction: column; pointer-events: auto; box-shadow: 0 4px 16px rgba(4,8,20,.45); }
#panel-board, #panel-log { width: 420px; max-height: 50vh; }
#panel-legend { width: 340px; }
#panel-settings { width: 280px; }
#panel-about { width: 360px; }
#panel-about p { margin: 0 0 8px; }
.panel a { color: var(--accent); text-decoration: none; }
.panel a:hover { text-decoration: underline; }
body > .panel { resize: both; overflow: hidden; min-width: 220px; min-height: 60px; } /* floating */
.panel.hidden { display: none; }
.panel.dragging { z-index: 20; opacity: .92; }
.panel-title { display: flex; justify-content: space-between; align-items: center; padding: 3px 4px 3px 8px; cursor: grab;
  border-bottom: 1px solid var(--panel-border); color: var(--dim); text-transform: uppercase; letter-spacing: 1px;
  user-select: none; touch-action: none; flex: none; }
.panel-hide { color: var(--dim); border-color: transparent; background: none; padding: 0 6px; line-height: 1.2; }
.panel-body { flex: 1; overflow: auto; padding: 6px 8px; min-height: 0; }
/* #docks in front so these beat the per-panel floating sizes above. */
#docks .panel { position: static; max-height: none; border-radius: 0; box-shadow: none; }
#docks .panel.dock-left, #docks .panel.dock-right { flex: 1 1 0; min-height: 0; }
#docks .panel.dock-left { width: var(--side-w-left); border-width: 0 1px 1px 0; }
#docks .panel.dock-right { width: var(--side-w-right); border-width: 0 0 1px 1px; }
#docks .panel.dock-bottom { height: var(--bottom-h); flex: 1 1 0; min-width: 0; width: auto; border-width: 1px 1px 0 0; }
/* The seed popover, under the HUD seed (ui.js sets left); a panel, but not a floating one that resizes. */
#seed-pop { width: auto; padding: 0; top: calc(var(--hud-h) + 4px); z-index: 11; resize: none; min-height: 0; white-space: nowrap; }
#seed-pop input { width: 120px; font-family: var(--mono); }
body.bare #hud, body.bare .panel { display: none; }
body.bare #docks { inset: 0; }
.panel.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* Tables and rows */
table { border-collapse: collapse; width: 100%; }
th { font-weight: normal; color: var(--dim); text-align: left; }
table.board { table-layout: fixed; }
table.board th, table.board td { padding: 2px 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.board thead th { position: sticky; top: -6px; background: var(--panel); border-bottom: 1px solid var(--panel-border); }
table.board tbody tr[data-train] { cursor: pointer; }
table.board tbody tr:hover, table.board tr.sel { background: var(--row); }
table.board tr.done { color: var(--dim); }
table.board tr.queued td:not(:first-child) { color: var(--dim); }
table.board td.id { font-family: var(--mono); }
.c-id { width: 17%; } .c-type { width: 15%; } .c-ft { width: 28%; } .c-track { width: 13%; } .c-status { width: 17%; } .c-delay { width: 10%; }
.num { text-align: right; }
.delay { font-family: var(--mono); }
.delay.late { color: var(--amber); }
.delay.early { color: var(--green); }
#panel-log .panel-body > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#panel-log .t { font-family: var(--mono); color: var(--dim); }
#panel-log .warn { color: var(--amber); }
table.kv th { width: 92px; padding: 1px 8px 1px 0; vertical-align: top; }
table.kv td { padding: 1px 0; }
.sub { margin: 8px 0 3px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; font-size: 11px; }
.exit { margin: 2px 0; }
.exit button, table.kv button, .sub button { padding: 0 6px; }
.armed { color: var(--accent); }
kbd { font: 11px var(--mono); color: var(--text); border: 1px solid var(--panel-border); border-radius: 3px; padding: 0 4px; white-space: nowrap; }
#panel-legend table.kv th { width: 1%; white-space: nowrap; }

/* Swatches: lamps (flashing ones blink ~1 Hz), train colours, track colours */
.sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 1px; }
.bar { display: inline-block; width: 22px; height: 4px; border-radius: 2px; margin-right: 8px; vertical-align: 3px; }
.heads { display: inline-flex; flex-direction: column; gap: 2px; vertical-align: middle; }
.lamp { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.lamp.R { background: #ff3b30; } .lamp.Y { background: #ffcc00; } .lamp.G { background: #34c759; }
.lamp.flash { animation: lampflash 1s steps(1) infinite; }
body.noflash .lamp.flash { animation: none; }
@keyframes lampflash { 50% { background: #283252; } }
table.legend td, table.legend th { padding: 2px 4px; }
table.legend td:not(:first-child), table.legend th:not(:first-child) { text-align: center; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 8px; }

/* Settings */
#panel-settings .row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
#panel-settings .k { width: 56px; color: var(--dim); }
#panel-settings input[name=seed] { width: 110px; font-family: var(--mono); }