/* UI chrome over the face: on-screen controls, diagnostics and map.
   Every colour is a token set per look on <html data-look="…">, so switching the face restyles the UI. */

:root, :root[data-look="murmuration"] {
  --ui-font: system-ui, -apple-system, "Segoe UI", Ubuntu, sans-serif;
  --ui-text: #ece8ff;
  --ui-muted: #a59cc9;
  --ui-veil: rgba(6, 4, 18, .78);            /* diagnostics backdrop over the live face */
  --ui-panel: rgba(14, 10, 32, .66);         /* controls panel */
  --ui-surface: rgba(28, 20, 58, .72);
  --ui-surface-hover: rgba(44, 32, 86, .82);
  --ui-border: rgba(170, 140, 255, .26);
  --ui-accent: #b9a4ff;
  --ui-accent-ink: #160f33;
  --ui-focus: #7ef0dc;
  --ui-ok: #6fe3c7; --ui-warn: #f2c26b; --ui-error: #ff8aa8; --ui-stale: #8f86b3;
  --ui-radius: 12px;
  --ui-glow: 0 0 18px rgba(150, 120, 255, .28);
  --ui-text-glow: none;
  --ui-heading-case: none;
  --ui-overlay: radial-gradient(circle at 20% 15%, rgba(120, 90, 255, .16), transparent 45%),
                radial-gradient(circle at 85% 80%, rgba(60, 220, 200, .12), transparent 40%);
  --map-bg: #04030b; --map-free: #0d0a1f; --map-unknown: #1b1636; --map-occupied: #c8b8ff;
  --map-robot: #fff4dc; --map-goal: #5ff0d4; --map-path: #b48cff; --map-grid: none; --map-glow: 14;
}

:root[data-look="liquid_glass"] {
  --ui-text: #2a2c48;
  --ui-muted: #6b6a8f;
  --ui-veil: rgba(238, 232, 255, .56);
  --ui-panel: rgba(255, 255, 255, .5);
  --ui-surface: rgba(255, 255, 255, .55);
  --ui-surface-hover: rgba(255, 255, 255, .78);
  --ui-border: rgba(255, 255, 255, .85);
  --ui-accent: #6b7cff;
  --ui-accent-ink: #ffffff;
  --ui-focus: #ff6fa8;
  --ui-ok: #22a88a; --ui-warn: #c98a12; --ui-error: #e04d72; --ui-stale: #8c8aa8;
  --ui-radius: 20px;
  --ui-glow: 0 8px 30px rgba(110, 90, 180, .18), inset 0 1px 0 rgba(255, 255, 255, .9);
  --ui-overlay: linear-gradient(120deg, rgba(170, 180, 255, .35), rgba(255, 210, 225, .3) 55%, rgba(255, 228, 200, .35));
  --map-bg: #efe9fb; --map-free: #fbf8ff; --map-unknown: #ddd4ef; --map-occupied: #5b5c9a;
  --map-robot: #ff5f97; --map-goal: #3f6dff; --map-path: #14a99b; --map-grid: none; --map-glow: 0;
}

:root[data-look="hologram"] {
  --ui-font: ui-monospace, "SF Mono", "JetBrains Mono", "DejaVu Sans Mono", Menlo, monospace;
  --ui-text: #d8fbff;
  --ui-muted: #6fb9cc;
  --ui-veil: rgba(0, 9, 16, .86);
  --ui-panel: rgba(0, 18, 28, .72);
  --ui-surface: rgba(4, 34, 50, .55);
  --ui-surface-hover: rgba(8, 58, 82, .7);
  --ui-border: rgba(80, 220, 255, .38);
  --ui-accent: #46d4ff;
  --ui-accent-ink: #00141f;
  --ui-focus: #ffd166;
  --ui-ok: #5cf2ff; --ui-warn: #ffc94d; --ui-error: #ff5c7a; --ui-stale: #4c8796;
  --ui-radius: 4px;
  --ui-glow: 0 0 14px rgba(70, 212, 255, .35), inset 0 0 18px rgba(70, 212, 255, .08);
  --ui-text-glow: 0 0 6px rgba(90, 230, 255, .6);
  --ui-heading-case: uppercase;
  --ui-overlay: repeating-linear-gradient(0deg, rgba(70, 212, 255, .06) 0 1px, transparent 1px 4px);
  --map-bg: #000a12; --map-free: #021521; --map-unknown: #06212f; --map-occupied: #46d4ff;
  --map-robot: #f4feff; --map-goal: #ffc94d; --map-path: #7dffb2; --map-grid: rgba(70, 212, 255, .12); --map-glow: 16;
}

/* ---------- on-screen controls ---------- */
#controls {
  position: fixed; left: 50%; bottom: 14px; z-index: 10; width: min(980px, calc(100vw - 24px));
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  display: grid; gap: 8px; padding: 10px; box-sizing: border-box; border-radius: calc(var(--ui-radius) + 4px);
  background: var(--ui-panel); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--ui-border); box-shadow: var(--ui-glow);
  font: 13px/1.2 var(--ui-font); color: var(--ui-text); text-shadow: var(--ui-text-glow);
}
body.ui #controls { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
body[data-view] #controls { display: none; }
#controls .row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
#controls > .row:first-child { gap: 6px 18px; }
#controls .grp { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ui-muted); margin-right: 2px; }
#controls #hide { margin-left: auto; }
#controls .hint { margin-left: auto; font-size: 11px; color: var(--ui-muted); }
#menu-hint {
  position: fixed; left: 50%; bottom: 22px; z-index: 9; transform: translateX(-50%); pointer-events: none;
  padding: 9px 16px; border-radius: 999px; font: 14px var(--ui-font); color: var(--ui-text); text-shadow: var(--ui-text-glow);
  background: var(--ui-panel); border: 1px solid var(--ui-border); box-shadow: var(--ui-glow);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: menu-hint 6s ease forwards;
}
body.ui #menu-hint, body[data-view] #menu-hint { display: none; }
@keyframes menu-hint { 0% { opacity: 0; } 10%, 80% { opacity: 1; } 100% { opacity: 0; } }
#controls button {
  font: inherit; color: inherit; min-height: 32px; padding: 0 9px; border-radius: 999px; cursor: pointer;
  background: var(--ui-surface); border: 1px solid var(--ui-border); text-shadow: inherit;
}
#controls button:hover { background: var(--ui-surface-hover); }
#controls button[aria-pressed="true"] { background: var(--ui-accent); color: var(--ui-accent-ink); border-color: var(--ui-accent); text-shadow: none; }
#controls button.look, #controls button.expr { text-transform: capitalize; }
#controls button.look { font-weight: 600; }
#controls button.open-view { border-style: dashed; }
#controls :focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
#controls .pad {
  position: relative; width: 120px; height: 40px; border-radius: calc(var(--ui-radius) - 2px); touch-action: none; cursor: crosshair;
  border: 1px solid var(--ui-border);
  background: linear-gradient(var(--ui-border), var(--ui-border)) center / 1px 100% no-repeat,
    linear-gradient(var(--ui-border), var(--ui-border)) center / 100% 1px no-repeat, var(--ui-surface);
}
#controls .pad i { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ui-accent); box-shadow: 0 0 10px var(--ui-accent); pointer-events: none; }
#controls .pad .ax { position: absolute; left: 6px; top: 3px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-muted); pointer-events: none; }
#controls .follow { display: inline-flex; gap: 6px; align-items: center; color: var(--ui-muted); }
#controls .follow input { accent-color: var(--ui-accent); }

/* ---------- shared view chrome ---------- */
.view { position: fixed; inset: 0; z-index: 20; cursor: default; font-family: var(--ui-font); color: var(--ui-text); }
.view[hidden] { display: none; }
.nav-button {
  min-height: 44px; padding: 10px 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-text); font: 500 14.4px var(--ui-font); cursor: pointer;
  touch-action: manipulation; box-shadow: var(--ui-glow); text-shadow: var(--ui-text-glow);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.nav-button:hover { background: var(--ui-surface-hover); }
.nav-button.primary { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-accent-ink); text-shadow: none; }
.nav-button:focus-visible, .diag-row summary:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; }

/* ---------- diagnostics ---------- */
#diag-layer {
  background: var(--ui-overlay), var(--ui-veil);
  backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15);
  padding: 28px; box-sizing: border-box; flex-direction: column; gap: 20px;
}
#diag-layer:not([hidden]) { display: flex; }
.diag-toolbar { display: flex; align-items: center; gap: 16px; }
.diag-heading { flex: 1; min-width: 0; }
.diag-header { margin: 0; font-size: 25.2px; font-weight: 600; letter-spacing: -.5px; text-transform: var(--ui-heading-case); text-shadow: var(--ui-text-glow); }
:root[data-look="hologram"] .diag-header { letter-spacing: .12em; }
.diag-hint { margin: 4px 0 0; font-size: 12.6px; color: var(--ui-muted); }
#diag-list { flex: 1; min-height: 0; overflow-y: auto; font-size: 16.2px; padding: 4px; scrollbar-color: var(--ui-border) transparent; }
.diag-row {
  margin-bottom: 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-surface); overflow: hidden; box-shadow: var(--ui-glow);
}
.diag-row summary {
  display: grid; grid-template-columns: 8px minmax(0, 1fr) auto 12px; align-items: center; gap: 12px;
  min-height: 48px; padding: 12px 16px; cursor: pointer; list-style: none; touch-action: manipulation;
}
.diag-row summary::-webkit-details-marker { display: none; }
.diag-row summary:hover { background: var(--ui-surface-hover); }
.diag-row summary::after {
  content: ''; width: 6px; height: 6px; border-right: 1.5px solid var(--ui-muted); border-bottom: 1.5px solid var(--ui-muted);
  transform: rotate(-45deg);
}
.diag-row[open] summary::after { transform: rotate(45deg); }
.diag-name { display: block; font-weight: 550; overflow-wrap: anywhere; text-shadow: var(--ui-text-glow); }
.diag-msg { display: block; margin-top: 3px; color: var(--ui-muted); font-size: 16.2px; overflow-wrap: anywhere; }
.diag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-stale); box-shadow: 0 0 8px currentColor; }
.diag-level { font-size: 12.6px; color: var(--ui-muted); text-transform: var(--ui-heading-case); }
.level-0 .diag-dot { background: var(--ui-ok); color: var(--ui-ok); }   .level-0 .diag-level { color: var(--ui-ok); }
.level-1 .diag-dot { background: var(--ui-warn); color: var(--ui-warn); } .level-1 .diag-level { color: var(--ui-warn); }
.level-2 .diag-dot { background: var(--ui-error); color: var(--ui-error); } .level-2 .diag-level { color: var(--ui-error); }
.diag-body { padding: 14px 16px 16px 36px; border-top: 1px solid var(--ui-border); font-size: 12.6px; color: var(--ui-muted); overflow-wrap: anywhere; }
.diag-hw { margin-bottom: 10px; }
.diag-kvs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px 20px; margin: 0; }
.diag-kvs dt { color: var(--ui-muted); }
.diag-kvs dd { margin: 0; color: var(--ui-text); white-space: pre-wrap; }
#diag-empty { padding: 60px 16px; text-align: center; font-size: 18px; color: var(--ui-muted); }
@media (max-width: 520px) {
  #diag-layer { padding: 16px; gap: 12px; }
  .diag-toolbar { flex-wrap: wrap; gap: 10px; }
  .diag-heading { order: -1; flex-basis: 100%; }
  #diag-map-btn { margin-left: auto; }
  .diag-row summary { padding: 12px; gap: 10px; }
  .diag-body { padding-left: 30px; }
}

/* ---------- map ---------- */
#map-layer { background: var(--map-bg); }
#map-canvas { width: 100vw; height: 100vh; display: block; cursor: crosshair; }
.map-toolbar { position: absolute; top: 24px; left: 32px; z-index: 1; display: flex; gap: 10px; }
#map-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
  font-size: 20px; letter-spacing: 4px; text-transform: uppercase; color: var(--ui-muted); text-shadow: var(--ui-text-glow);
}
#map-empty[hidden] { display: none; }
#map-legend {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 20px; padding: 8px 14px;
  background: var(--ui-panel); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-glow);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 14px var(--ui-font); pointer-events: none;
  text-transform: var(--ui-heading-case);
}
#map-legend .robot { color: var(--map-robot); }
#map-legend .goal { color: var(--map-goal); }
#map-legend .path { color: var(--map-path); }
:root[data-look="hologram"] #map-layer::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(70, 212, 255, .05) 0 1px, transparent 1px 3px);
}

@media (prefers-reduced-motion: reduce) { #controls { transition: none; } }