@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Courier+Prime:wght@400;700&display=swap');

/* ── Design tokens ──────────────────────────────────────────────────────────
   Single source of truth for the planner's color palette. Every component
   pulls from these — to retheme, change only the values here.

   Naming pattern:
   - --bg / --bg-*       : opaque background surfaces (canvas, nav strip)
   - --panel-*           : translucent panel surfaces (right palette, structure panel)
   - --border-*          : dividers, input/button strokes
   - --t-*               : text scale, from --t-display (brightest cream)
                           down through --t-tiny (faintest olive)
   - --accent / --accent-*: bright green emphasis family (focus, selected, hover)
   - --danger / --danger-*: red family (clear, delete, reset)
*/
:root {
  /* Surfaces */
  --bg:                #0d0f0a;
  --bg-nav:            #14180e;
  --border-dim:        #1a2010;
  --border-subtle:     #1e2414;
  --border:            #2a2e1e;
  --border-track:      #2a3a1a;

  --panel-floating:    rgba(8,10,6,0.85);
  --panel:             rgba(8,10,6,0.92);
  --panel-strong:      rgba(8,10,6,0.94);
  --panel-header:      rgba(10,12,8,0.95);

  /* Text scale — brightest to dimmest */
  --t-display:         #e8d5b0;
  --t-emphasis:        #d4c89a;
  --t-primary:         #c8b89a;
  --t-bright:          #c8d49a;
  --t-accent:          #aabf7a;
  --t-default:         #9aaa7a;
  --t-muted:           #8f9c7b;
  --t-muted-2:         #8b9f6c;
  --t-cat-hover:       #8a9a6a;
  --t-btn:             #7a8a5a;
  --t-header:          #6b7a5a;
  --t-label:           #6a7a4a;
  --t-cat:             #5a6a3a;
  --t-tiny:            #3a4a22;

  /* Accents */
  --accent:            #a8c860;
  --accent-mid:        #7a9a4a;
  --accent-edge:       #5a7a3a;
  --accent-glow:       rgba(80,100,50,0.15);
  --accent-glow-strong:rgba(80,100,50,0.25);
  --accent-glow-ctrl:  rgba(80,100,30,0.20);

  /* Danger */
  --danger:            #c06262;
  --danger-strong:     #ce5656;
  --danger-hover:      #aa5050;
  --danger-border:     #2a1e1e;
  --danger-border-hv:  #8a4040;
}

/* ── Splash screen ─────────────────────────────────────────────────────────── */
#splash {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  transition: opacity 0.5s ease-out;
}
#splash.hide { opacity: 0; pointer-events: none; }
#splash .splash-title {
  font-family: 'Playfair Display', serif; font-size: 42px; color: var(--t-display);
  letter-spacing: 0.08em;
}
#splash .splash-subtitle {
  font-family: 'Courier Prime', monospace; font-size: 11px; color: var(--t-muted);
  letter-spacing: 0.25em; text-transform: uppercase;
}
#splash .splash-progress {
  width: 220px; height: 2px; background: var(--border-subtle);
  margin-top: 24px; position: relative; overflow: hidden;
}
#splash .splash-progress::after {
  content: ''; position: absolute; inset: 0 100% 0 0;
  background: linear-gradient(to right, var(--accent-edge), var(--t-accent));
  animation: splash-fill 5s linear forwards;
}
#splash .splash-status {
  font-family: 'Courier Prime', monospace; font-size: 9px; color: var(--t-cat);
  letter-spacing: 0.3em; text-transform: uppercase; margin-top: 6px;
}
@keyframes splash-fill {
  from { right: 100%; }
  to   { right: 0; }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--t-primary); font-family: 'Courier Prime', monospace; overflow: hidden; height: 100vh; }
#canvas-container {
  position: fixed; inset: 0;
  /* Disable browser-default touch handling on the canvas so our touchmove
     listeners get every pinch/pan event — without this, iPad Safari steals
     two-finger gestures as page zoom and ignores our handlers entirely. */
  touch-action: none;
}
canvas { display: block; }

#header {
  position: fixed; top: 0; left: 0; right: 0;
  padding: 12px 20px;
  background: linear-gradient(to bottom, var(--panel-header), transparent);
  display: flex; align-items: baseline; gap: 16px;
  z-index: 10; pointer-events: none;
}
#header h1 { font-family: 'Playfair Display', serif; font-size: 18px; color: var(--t-display); letter-spacing: 0.05em; }
#header span { font-size: 11px; color: var(--t-header); letter-spacing: 0.15em; text-transform: uppercase; }

#palette {
  position: fixed; right: 0; top: 0; bottom: 0; width: 240px;
  background: var(--panel); border-left: 1px solid var(--border);
  padding: 52px 0 16px; display: flex; flex-direction: column;
  z-index: 10; overflow-y: auto;
}
#palette-title { font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--t-muted); padding: 0 14px 10px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 8px; }

.building-btn {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  cursor: pointer; border: none; background: none; color: var(--t-default);
  font-family: 'Courier Prime', monospace; font-size: 12px; text-align: left;
  transition: background-color 0.15s, color 0.15s, border-left-color 0.15s;
  border-left: 2px solid transparent;
}
.building-btn:hover { background: var(--accent-glow); color: var(--t-emphasis); border-left-color: var(--accent-mid); }
.building-btn.selected { background: var(--accent-glow-strong); color: var(--t-display); border-left-color: var(--accent); }
.building-btn .icon { width: 22px; height: 22px; border-radius: 2px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.palette-cat { border-bottom: 1px solid var(--border-dim); }
.palette-cat > summary { list-style: none; cursor: pointer; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t-cat); padding: 11px 14px; display: flex; align-items: center; gap: 10px; user-select: none; }
.palette-cat > summary::-webkit-details-marker { display: none; }
.palette-cat > summary::before { content: '▸'; font-size: 10px; color: var(--t-muted); transition: transform 0.12s ease; display: inline-block; }
.palette-cat[open] > summary::before { transform: rotate(90deg); }
.palette-cat > summary:hover { color: var(--t-cat-hover); }
.palette-cat[open] > summary { color: var(--t-accent); }
.palette-cat > .building-btn { padding-left: 28px; }
.terrain-tools, .ground-tools { padding: 6px 14px 10px 28px; }
.ground-tools { border-bottom: 1px solid var(--border-dim); }
.terrain-tools label, .ground-tools label { font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--t-muted); display: block; margin-bottom: 6px; }
.terrain-tools .tt-value, .ground-tools .tt-value { float: right; color: var(--t-accent); font-size: 10px; letter-spacing: 0.05em; }
.terrain-tools input[type=range], .ground-tools input[type=range] { -webkit-appearance: none; width: 100%; height: 3px; background: var(--border-track); outline: none; border-radius: 2px; }
.terrain-tools input[type=range]::-webkit-slider-thumb, .ground-tools input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%; background: var(--accent-mid); cursor: pointer; }
.track-subsection { padding: 8px 14px 4px 14px; font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--t-muted); }
.road-tools { padding: 6px 14px 10px 28px; }
.road-tools label { font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--t-muted); display: block; margin-bottom: 6px; }
.road-tools .tt-value { float: right; color: var(--t-accent); font-size: 10px; letter-spacing: 0.05em; }
.road-tools input[type=range] { -webkit-appearance: none; width: 100%; height: 3px; background: var(--border-track); outline: none; border-radius: 2px; }
.road-tools input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%; background: var(--accent-mid); cursor: pointer; }
.admin-tools { padding: 6px 14px 10px 28px; }
.admin-tools label { font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--t-muted); display: block; margin-bottom: 6px; margin-top: 10px; }
.admin-tools label:first-child { margin-top: 0; }
.admin-tools .tt-value { float: right; color: var(--t-accent); font-size: 10px; letter-spacing: 0.05em; }
.admin-tools input[type=range] { -webkit-appearance: none; width: 100%; height: 3px; background: var(--border-track); outline: none; border-radius: 2px; }
.admin-tools input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%; background: var(--accent-mid); cursor: pointer; }
.admin-tools input[type=color] { width: 100%; height: 28px; border: 1px solid var(--border); background: none; cursor: pointer; padding: 2px; }
.admin-tools .admin-reset { margin-top: 12px; background: none; border: 1px solid var(--danger-border); color: var(--danger); font-family: 'Courier Prime', monospace; font-size: 10px; padding: 5px 8px; cursor: pointer; width: 100%; letter-spacing: 0.1em; }
.admin-tools .admin-reset:hover { border-color: var(--danger-strong); color: var(--danger-hover); }
.grass-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 12px; }
.grass-picker button { padding: 0; border: 1px solid var(--border); background: none; cursor: pointer; overflow: hidden; aspect-ratio: 1; border-radius: 2px; font-family: 'Courier Prime', monospace; font-size: 9px; color: var(--t-label); letter-spacing: 0.05em; }
.grass-picker button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grass-picker button:hover { border-color: var(--accent-edge); color: var(--t-accent); }
.grass-picker button.selected { border-color: var(--accent); border-width: 2px; }
.grass-picker .none-btn { background: var(--bg); display: flex; align-items: center; justify-content: center; }

#controls { position: fixed; bottom: 16px; left: 16px; z-index: 10; display: flex; gap: 8px; align-items: center; }
.ctrl-btn {
  background: var(--panel-floating); border: 1px solid var(--border); color: var(--t-btn);
  font-family: 'Courier Prime', monospace; font-size: 11px; padding: 6px 12px;
  cursor: pointer; letter-spacing: 0.1em;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.ctrl-btn:hover { border-color: var(--accent-edge); color: var(--t-accent); }
.ctrl-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-glow-ctrl); }

/* Solid backdrop strip that sits beneath the bottom controls so text/buttons
   have guaranteed contrast against the green board. */
#bottom-nav {
  position: fixed; left: 0; right: 190px; bottom: 0; height: 50px;
  background: var(--bg-nav);
  border-top: 1px solid var(--border-track);
  z-index: 5;            /* below the bottom buttons (z-index 10) */
  pointer-events: none;  /* don't intercept canvas drags */
}
#status {
  position: fixed; bottom: 18px;
  /* Sit centered in the gap between the bottom-left control cluster
     (~360px wide incl. left padding) and the bottom-right grid toggle
     (~336px wide incl. right offset). That gives us a clean, non-overlapping
     band whose midpoint is roughly the screen center + a small rightward nudge. */
  left: 380px; right: 356px;
  font-size: 11px; color: var(--t-bright);        /* ~9:1 contrast on var(--bg-nav) */
  letter-spacing: 0.13em; text-transform: uppercase;
  z-index: 10; pointer-events: none;
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

#placed-list { margin-top: auto; padding: 10px 14px 0; border-top: 1px solid var(--border-subtle); }
#placed-title { font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--t-tiny); margin-bottom: 6px; }
#placed-items { font-size: 10px; color: var(--t-muted-2); max-height: 100px; overflow-y: auto; line-height: 1.8; font-variant-numeric: tabular-nums; }
#clear-btn { margin: 6px 14px 0; background: none; border: 1px solid var(--danger-border); color: var(--danger); font-family: 'Courier Prime', monospace; font-size: 10px; padding: 4px 8px; cursor: pointer; width: calc(100% - 28px); text-align: left; letter-spacing: 0.1em; }
#clear-btn:hover { border-color: var(--danger-border-hv); color: var(--danger-hover); }
#io-row { display: flex; gap: 6px; padding: 6px 14px 0; }
#io-row button { flex: 1; background: none; border: 1px solid var(--border); color: var(--t-label); font-family: 'Courier Prime', monospace; font-size: 10px; padding: 4px 6px; cursor: pointer; letter-spacing: 0.1em; text-align: center; }
#io-row button:hover { border-color: var(--accent-edge); color: var(--t-accent); }
#grid-toggle { position: fixed; bottom: 16px; right: 256px; z-index: 10; }

/* Cursor states */
#canvas-container { cursor: grab; }
#canvas-container.dragging { cursor: grabbing; }
#canvas-container.placing { cursor: crosshair; }

/* Train speed slider */
#train-controls {
  position: fixed; bottom: 48px; left: 16px; z-index: 10;
  display: flex; align-items: center; gap: 10px;
}
#train-controls label { font-size: 10px; color: var(--t-muted); letter-spacing: 0.1em; text-transform: uppercase; }
#speed-slider { -webkit-appearance: none; width: 90px; height: 3px; background: var(--border-track); outline: none; border-radius: 2px; }
#speed-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%; background: var(--accent-mid); cursor: pointer; }

/* Structure edit panel (left) */
#structure-panel {
  position: fixed; left: 0; top: 0; bottom: 0; width: 240px;
  background: var(--panel-strong); border-right: 1px solid var(--border);
  padding: 52px 0 16px; display: none; flex-direction: column;
  z-index: 11;
}
#structure-panel.active { display: flex; }
#structure-panel .sp-title { font-family: 'Playfair Display', serif; font-size: 14px; color: var(--t-display); padding: 0 16px 12px; border-bottom: 1px solid var(--border-subtle); letter-spacing: 0.05em; }
#structure-panel .sp-section { padding: 16px; flex: 1; overflow-y: auto; }
#structure-panel .sp-row { margin-bottom: 16px; }
#structure-panel .sp-row label { display: block; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--t-label); margin-bottom: 6px; }
#structure-panel .sp-row .sp-value { font-size: 10px; color: var(--t-accent); float: right; letter-spacing: 0.05em; }
#structure-panel input[type=range] { -webkit-appearance: none; width: 100%; height: 3px; background: var(--border-track); outline: none; border-radius: 2px; }
#structure-panel input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%; background: var(--accent-mid); cursor: pointer; }
#structure-panel input[type=color] { width: 100%; height: 30px; border: 1px solid var(--border); background: none; cursor: pointer; padding: 2px; }
#structure-panel .sp-buttons { display: flex; gap: 8px; padding: 0 16px; }
#structure-panel .sp-btn { flex: 1; background: var(--panel-floating); border: 1px solid var(--border); color: var(--t-btn); font-family: 'Courier Prime', monospace; font-size: 10px; padding: 8px 10px; cursor: pointer; letter-spacing: 0.1em; text-transform: uppercase; }
#structure-panel .sp-btn:hover { border-color: var(--accent-edge); color: var(--t-accent); }
#structure-panel .sp-btn.danger { border-color: var(--danger-border); color: var(--danger); }
#structure-panel .sp-btn.danger:hover { border-color: var(--danger-border-hv); color: var(--danger-hover); }
#structure-panel .facade-picker, #structure-panel .roof-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
#structure-panel .facade-picker button, #structure-panel .roof-picker button { padding: 0; border: 1px solid var(--border); background: none; cursor: pointer; overflow: hidden; aspect-ratio: 1; border-radius: 2px; font-family: 'Courier Prime', monospace; font-size: 8px; color: var(--t-label); letter-spacing: 0.05em; }
#structure-panel .facade-picker button img, #structure-panel .roof-picker button img { width: 100%; height: 100%; object-fit: cover; display: block; }
#structure-panel .facade-picker button:hover, #structure-panel .roof-picker button:hover { border-color: var(--accent-edge); color: var(--t-accent); }
#structure-panel .facade-picker button.selected, #structure-panel .roof-picker button.selected { border-color: var(--accent); border-width: 2px; }
#structure-panel .facade-picker .none-btn, #structure-panel .roof-picker .none-btn { background: var(--bg); display: flex; align-items: center; justify-content: center; }

/* ── Pass 1: accessibility + polish ─────────────────────────────────────────
   Tabular figures so numeric value labels (slider readouts, coordinate logs)
   keep their digit columns aligned regardless of digit width.
   Focus rings shown only on keyboard focus (not mouse clicks) via :focus-visible.
   Skip-link lets keyboard users jump past the panels straight to the canvas. */
.tt-value, .sp-value,
#status,
#train-controls label,
.admin-tools input[type=range],
.terrain-tools input[type=range],
.ground-tools input[type=range],
.road-tools input[type=range],
#structure-panel input[type=range] {
  font-variant-numeric: tabular-nums;
}

:focus-visible { outline: none; }  /* reset the harsh browser default */
.building-btn:focus-visible,
.ctrl-btn:focus-visible,
.palette-cat > summary:focus-visible,
#clear-btn:focus-visible,
#io-row button:focus-visible,
.grass-picker button:focus-visible,
.admin-tools .admin-reset:focus-visible,
#structure-panel .sp-btn:focus-visible,
#structure-panel .facade-picker button:focus-visible,
#structure-panel .roof-picker button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  /* Lift the focused element above neighboring borders so the ring isn't clipped. */
  position: relative; z-index: 1;
}
input[type=range]:focus-visible,
input[type=color]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── Pass 2: pressed states + empty-category handling ───────────────────────
   `:active` micro-shifts on click give the interface a physical, weighty feel.
   `:has()` (modern browsers, Chrome 105+/Safari 15.4+/FF 121+) lets us hide
   palette categories that contain nothing but their <summary>. */
.building-btn:active { transform: translateX(1px); }
.ctrl-btn:active,
#clear-btn:active,
#io-row button:active,
.admin-tools .admin-reset:active,
#structure-panel .sp-btn:active { transform: translateY(1px); }
.grass-picker button:active,
#structure-panel .facade-picker button:active,
#structure-panel .roof-picker button:active { transform: scale(0.97); }
/* Include transform in the explicit transition lists so the press lifts off smoothly. */
.building-btn { transition: background-color 0.15s, color 0.15s, border-left-color 0.15s, transform 0.08s; }
.ctrl-btn { transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.08s; }

/* Hide empty palette categories (only a summary, nothing else). The Industrial
   shell currently has no buildings — instead of an expandable-but-empty drawer
   we just collapse it out of the layout until a button is added back. */
.palette-cat:not(:has(> :not(summary))) { display: none; }

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 9999;
  /* Hidden off-screen by default; appears on focus. */
  transform: translateY(-200%);
  background: var(--border-dim); color: var(--t-accent);
  padding: 10px 16px; border: 1px solid var(--accent-edge);
  font-family: 'Courier Prime', monospace; font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.18s ease-out;
}
.skip-link:focus,
.skip-link:focus-visible { transform: translateY(0); outline: 2px solid var(--t-bright); outline-offset: 2px; }
/* Make the canvas container programmatically focusable (no visible default focus) */
#canvas-container:focus { outline: none; }