/* MetroBuild — Popsicle (light) + Popsicle Dark (§15). All colour via tokens.
   Layout rule: the canvas fills the viewport and every piece of chrome floats
   over it. Nothing on this page ever scrolls except the settings panel body and
   the tool rail, both of which scroll inside their own container. */

:root, :root[data-theme="light"] {
  --bg: #f6f5fa; --surface: #ffffff; --surface2: #efedf8;
  --border: #e2def0; --ink: #241f33; --muted: #6f6885;
  --accent: #e2570e; --accent-ink: #ffffff;
  --teal: #0a9d90; --grape: #6b4de6; --danger: #d64545; --gold: #e0a400;
  --glass: rgba(255,255,255,0.80);
  --shadow: 0 6px 20px rgba(20,27,46,0.12);
  --radius: 15px;
}
:root[data-theme="dark"] {
  --bg: #191625; --surface: #241f33; --surface2: #2e2840;
  --border: #3b3352; --ink: #f2eef9; --muted: #a69dba;
  --accent: #ff8a3d; --accent-ink: #2a1206;
  --teal: #2fd4c4; --grape: #ab8dff; --danger: #ff6b78; --gold: #e0b24d;
  --glass: rgba(36,31,51,0.78);
  --shadow: 0 10px 26px rgba(0,0,0,0.46);
  --radius: 15px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
input, select, textarea { -webkit-user-select: auto; user-select: auto; }
body {
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", "Nunito", system-ui, sans-serif;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
button { font-family: inherit; cursor: pointer; }

#app { position: fixed; inset: 0; height: 100dvh; width: 100vw; }

#city-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  touch-action: none; -webkit-touch-callout: none;
}

/* --- Boot splash --------------------------------------------------------- */
#boot {
  position: absolute; inset: 0; z-index: 40; display: grid; place-items: center;
  background: var(--bg); transition: opacity .45s ease;
}
#boot.gone { opacity: 0; pointer-events: none; }
.boot-card { text-align: center; }
.boot-logo { font-size: 62px; animation: bob 2.2s ease-in-out infinite; }
.boot-title { font-size: 30px; font-weight: 800; letter-spacing: .3px; margin-top: 4px; }
.boot-sub { color: var(--muted); font-size: 14px; margin-top: 6px; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .boot-logo { animation: none; } }

/* --- Top bar ------------------------------------------------------------- */
#topbar {
  position: absolute; z-index: 10;
  top: env(safe-area-inset-top); left: env(safe-area-inset-left); right: env(safe-area-inset-right);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 12px;
  background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.brand .logo { font-size: 20px; }
.brand .title { font-weight: 800; font-size: 17px; letter-spacing: .2px; }

.stats { display: flex; gap: 14px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.stat { display: flex; flex-direction: column; line-height: 1.12; }
.stat .label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.stat .val { font-size: 15px; font-weight: 800; }

.controls { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.pill { display: inline-flex; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.pill button {
  border: 0; background: transparent; color: var(--ink); padding: 5px 9px;
  font-size: 12px; font-weight: 700; min-width: 32px; min-height: 32px;
}
.pill button.active { background: var(--accent); color: var(--accent-ink); }
.chip {
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  border-radius: 999px; padding: 5px 11px; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
}
.chip.icon { min-width: 34px; justify-content: center; padding: 5px 8px; font-size: 15px; }
.chip.clock { min-width: 84px; }
.chip:active { transform: scale(.96); }

/* --- Bottom tool rail ---------------------------------------------------- */
#toolbar-wrap {
  position: absolute; z-index: 10;
  left: env(safe-area-inset-left); right: env(safe-area-inset-right);
  bottom: calc(env(safe-area-inset-bottom) + 6px);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0 8px; pointer-events: none;
}
.hint {
  pointer-events: none;
  font-size: 12px; font-weight: 600; color: var(--ink);
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px;
  max-width: min(94vw, 560px); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.toolbar {
  pointer-events: auto;
  display: flex; gap: 6px; align-items: stretch;
  max-width: 100%;
  padding: 7px; border-radius: calc(var(--radius) + 6px);
  background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  /* Contained scroll — the page itself never scrolls sideways. */
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.toolbar::-webkit-scrollbar { height: 5px; }
.toolbar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.tool {
  scroll-snap-align: center;
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-width: 60px; min-height: 54px; padding: 5px 8px;
  border: 1px solid transparent; border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font-weight: 700; font-size: 11px;
  transition: transform .1s ease, background .15s ease;
}
.tool .ti { font-size: 19px; line-height: 1; }
.tool:active { transform: scale(.94); }
.tool.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.tool .swatch { width: 22px; height: 3px; border-radius: 2px; }

/* --- Tile inspector ------------------------------------------------------ */
#inspector {
  position: absolute; z-index: 11;
  left: calc(env(safe-area-inset-left) + 12px);
  bottom: calc(env(safe-area-inset-bottom) + 96px);
  width: min(240px, calc(100vw - 24px));
  background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 10px 12px;
}
.inspector-close {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px;
  border: 0; border-radius: 999px; background: var(--surface2); color: var(--muted); font-size: 12px;
}
.inspector-title { font-weight: 800; font-size: 14px; margin-bottom: 6px; padding-right: 26px; }
.inspector-rows { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12.5px; }
.inspector-rows dt { color: var(--muted); }
.inspector-rows dd { margin: 0; font-weight: 700; text-align: right; }

/* --- Perf readout -------------------------------------------------------- */
#perf {
  position: absolute; z-index: 11;
  top: calc(env(safe-area-inset-top) + 56px); right: calc(env(safe-area-inset-right) + 12px);
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 6px 9px; font-size: 11px; font-weight: 700; line-height: 1.5;
  color: var(--muted); font-variant-numeric: tabular-nums; white-space: pre;
}

/* --- Settings panel ------------------------------------------------------ */
#scrim { position: absolute; inset: 0; z-index: 20; background: rgba(15,12,26,.42); }
#panel {
  position: absolute; z-index: 21; top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  display: flex; flex-direction: column;
  background: var(--bg); border-left: 1px solid var(--border); box-shadow: var(--shadow);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) 0;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.panel-head h2 { margin: 0; font-size: 17px; font-weight: 800; }
/* The one region in the app allowed to scroll — see §3 fallback (2). */
.panel-body { flex: 1 1 auto; overflow-y: auto; padding: 10px 14px 24px; -webkit-overflow-scrolling: touch; }

details {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 9px; overflow: hidden;
}
summary {
  cursor: pointer; list-style: none; padding: 11px 13px;
  font-weight: 800; font-size: 13.5px; display: flex; align-items: center; justify-content: space-between;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: '⌄'; color: var(--muted); font-size: 15px; transition: transform .18s ease; }
details[open] > summary::after { transform: rotate(180deg); }
details > *:not(summary) { padding-left: 13px; padding-right: 13px; }
details > *:last-child { padding-bottom: 12px; }

.rows { display: flex; flex-direction: column; gap: 2px; }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 0; font-size: 13px; border-top: 1px solid var(--border);
}
.rows .row:first-child { border-top: 0; }
.row > span { color: var(--muted); }
.row > b { font-weight: 800; text-align: right; }
.row select, .row input[type="time"] {
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 9px; padding: 5px 8px; min-height: 32px;
}
.row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; }
.btn {
  flex: 1 1 auto; min-height: 38px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface2); color: var(--ink); font-weight: 800; font-size: 13px;
}
.btn.accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn:disabled { opacity: .55; }
.btn:active { transform: scale(.97); }

.note { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin: 9px 0 0; }
.log-title { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-top: 12px; }
.log { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; max-height: 190px; overflow-y: auto; }
.log li { font-size: 12px; display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-top: 1px solid var(--border); }
.log li:first-child { border-top: 0; }
.log time { color: var(--muted); flex: 0 0 auto; font-size: 11px; }
.save-row b { display: flex; gap: 6px; align-items: center; }
.save-row .mini { border: 1px solid var(--border); background: var(--surface2); color: var(--ink); border-radius: 8px; padding: 3px 8px; font-size: 11.5px; font-weight: 700; }

/* --- Toasts -------------------------------------------------------------- */
#toast-wrap {
  position: absolute; z-index: 30;
  left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top) + 58px);
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  pointer-events: none; width: max-content; max-width: 92vw;
}
.toast {
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  box-shadow: var(--shadow); padding: 7px 15px; font-size: 13px; font-weight: 700;
  animation: pop .2s ease; max-width: 100%; text-align: center;
}
.toast.good { border-color: var(--teal); color: var(--teal); }
.toast.warn { border-color: var(--gold); color: var(--gold); }
.toast.bad { border-color: var(--danger); color: var(--danger); }
@keyframes pop { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }

#update-bar {
  position: absolute; z-index: 32; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 108px);
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--accent); border-radius: 999px;
  box-shadow: var(--shadow); padding: 6px 8px 6px 16px; font-weight: 700; font-size: 13px;
}
#update-bar .btn { min-height: 32px; padding: 5px 14px; }

/* --- Narrow phones ------------------------------------------------------- */
@media (max-width: 620px) {
  /* Single row, no wrapping — a wrapped top bar was 85px tall on an iPhone,
     eating a tenth of the screen from a view that should feel full-bleed. */
  #topbar { flex-wrap: nowrap; gap: 6px; padding: 5px 8px; }
  .brand .title { display: none; }
  .stats { gap: 9px; }
  .stat .val { font-size: 13px; }
  .stat .label { font-size: 9px; }
  .controls { gap: 5px; }
  .chip { padding: 4px 8px; }
  .chip.icon { min-width: 30px; min-height: 30px; padding: 4px 6px; font-size: 14px; }
  .chip.clock { min-width: 0; padding: 4px 7px; font-size: 11.5px; gap: 4px; }
  .pill button { min-width: 27px; min-height: 30px; padding: 4px 5px; font-size: 11px; }
  #theme { display: none; }          /* lives in the settings panel on phones */
  .tool { min-width: 54px; min-height: 50px; font-size: 10px; }
  .tool .ti { font-size: 17px; }
  #inspector { bottom: calc(env(safe-area-inset-bottom) + 92px); }
}
@media (max-width: 460px) {
  .stats .stat:nth-child(n+3) { display: none; }  /* keep Zoned + Built only */
  #speed button[data-speed="3"] { display: none; }  /* pause / 1x / 2x is enough */
}
@media (max-width: 380px) {
  .stats .stat:nth-child(n+2) { display: none; }  /* Zoned only */
}
/* Landscape phone: the top bar must not eat the short viewport. */
@media (max-height: 460px) {
  #topbar { padding: 4px 10px; }
  .stat .label { display: none; }
  .hint { display: none; }
  .tool { min-height: 44px; }
}