/* ===========================================================
   NAV-SYS // PATHFINDING ENGINE
   Design tokens
   A restrained, instrument-panel palette: near-black charcoal
   base, cool electric blue as the structural/primary accent,
   cyan-teal as a secondary signal color, a green-teal for
   confirmed paths, amber for active search state, and red
   reserved for failure states. Sharp, small corner radii,
   thin technical borders, and subtle glow rather than
   generic rounded "SaaS card" chrome.
   =========================================================== */
:root {
  --bg: #07090c;
  --bg-deep: #05060a;
  --panel: #0c1015;
  --panel-alt: #10151b;
  --panel-raised: #131922;
  --border: #1c232c;
  --border-soft: #151b22;
  --border-bright: #2c3948;

  --text-primary: #dbe6f2;
  --text-secondary: #7c8b9e;
  --text-tertiary: #495261;

  --blue: #4c8dff;
  --blue-dim: #23324a;
  --blue-glow: rgba(76, 141, 255, 0.35);
  --cyan: #34d1e0;
  --cyan-dim: #1c3a3f;
  --teal: #2bd6a3;
  --teal-dim: #17352c;
  --amber: #f2a93b;
  --amber-dim: #3a2c14;
  --red: #ef5b5b;
  --red-dim: #3a1c1c;

  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  position: relative;
}

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

/* ===========================================================
   Background instrumentation layer
   Extremely faint grid lines + a soft radial glow + a slow
   traveling scan line. Purely decorative, sits behind
   everything, animated lightly via Anime.js (scan line) so it
   reads as "alive" without competing with the pathfinding grid.
   =========================================================== */
.bg-decor {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-decor__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(76, 141, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 141, 255, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 90%);
}

.bg-decor__glow {
  position: absolute;
  top: -20%;
  left: 50%;
  width: 1400px;
  height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(76, 141, 255, 0.08), transparent 70%);
}

.bg-decor__scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 140px;
  background: linear-gradient(180deg, transparent, rgba(52, 209, 224, 0.05), transparent);
  opacity: 0.6;
}

.app {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 100vh;
}

/* ===========================================================
   Top bar
   =========================================================== */
.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}

.topbar__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 8px;
}

.topbar__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  margin: 0 0 5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
}

.topbar__title-sub {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--blue);
  text-transform: uppercase;
}

.topbar__subtitle {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-family: var(--font-mono);
}

.topbar__status {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  white-space: nowrap;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-tertiary);
  box-shadow: 0 0 0 3px rgba(124, 139, 158, 0.12);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.status-dot.is-running {
  background: var(--amber);
  box-shadow: 0 0 0 3px rgba(242, 169, 59, 0.18);
  animation: pulse-dot 1.1s ease-in-out infinite;
}

.status-dot.is-success {
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(43, 214, 163, 0.2);
}

.status-dot.is-failure {
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(239, 91, 91, 0.2);
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.4); }
}

/* ===========================================================
   Layout
   =========================================================== */
.layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr) 272px;
  gap: 14px;
  align-items: start;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 15px;
  opacity: 0;
}

.panel--left, .panel--right {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.panel--center {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 560px;
  padding: 12px;
}

/* ===========================================================
   Control groups (shared by left/right sidebars)
   =========================================================== */
.control-group__title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}

.control-group__hint {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 8px 0 0;
}

.control-group__hint--tight {
  margin-top: 6px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field--inline {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.field__label {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}

.algo-description {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-tertiary);
  min-height: 16px;
}

.select {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  outline-offset: 2px;
}

.select--compact {
  padding: 6px 8px;
  font-size: 12.5px;
}

.select:focus-visible, .btn:focus-visible, .segmented__option:focus-visible {
  outline: 2px solid var(--blue);
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  overflow: hidden;
  font-family: var(--font-mono);
}

.segmented__option {
  background: var(--panel-alt);
  border: none;
  color: var(--text-secondary);
  padding: 8px 0;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border-right: 1px solid var(--border);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.segmented__option:last-child {
  border-right: none;
}

.segmented__option:hover {
  color: var(--text-primary);
}

.segmented__option.is-active {
  background: var(--blue-dim);
  color: #d9e6ff;
  box-shadow: inset 0 -2px 0 var(--blue);
}

.button-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 10px 12px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}

.btn:hover:not(:disabled) {
  border-color: var(--border-bright);
  background: var(--panel-raised);
  transform: translateY(-1px);
}

.btn:active:not(:disabled) {
  transform: translateY(0);
}

.btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #051022;
  font-weight: 600;
}

.btn--primary:hover:not(:disabled) {
  background: #6ba0ff;
  border-color: #6ba0ff;
  box-shadow: 0 0 0 3px var(--blue-glow);
}

.btn--ghost {
  background: transparent;
}

.btn--outline {
  background: transparent;
  border-color: var(--cyan-dim);
  color: var(--cyan);
}

.btn--outline:hover:not(:disabled) {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(52, 209, 224, 0.14);
}

.slider {
  width: 100%;
  accent-color: var(--blue);
}

.config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.config-row__label {
  font-size: 12.5px;
  color: var(--text-secondary);
}

.badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--blue);
  background: rgba(76, 141, 255, 0.1);
  border: 1px solid var(--blue-dim);
  padding: 3px 8px;
  border-radius: var(--radius-xs);
}

/* ===========================================================
   Grid stage - the hero element
   =========================================================== */
.grid-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0 2px;
}

.grid-toolbar__hint {
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: var(--text-tertiary);
}

.grid-stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(76, 141, 255, 0.05), transparent 70%),
    linear-gradient(var(--border-soft) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px) 0 0 / 24px 100%,
    var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  overflow: hidden;
}

.grid-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid transparent;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.5);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
  gap: 2px;
  width: 100%;
  aspect-ratio: var(--cols) / var(--rows);
  max-height: 74vh;
  position: relative;
  touch-action: none;
}

.grid--locked {
  cursor: progress;
}

.cell {
  background: #0a0e13;
  border: 1px solid rgba(255, 255, 255, 0.02);
  border-radius: 2px;
  position: relative;
  transform-origin: center;
  transition: background-color 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.grid:not(.grid--locked) .cell:hover {
  background: #131a22;
  border-color: rgba(76, 141, 255, 0.18);
}

.cell--obstacle {
  background-color: #171b21;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(242, 169, 59, 0.07) 0px,
    rgba(242, 169, 59, 0.07) 2px,
    transparent 2px,
    transparent 7px
  );
  border-color: rgba(242, 169, 59, 0.1);
}

.cell--frontier {
  background-color: rgba(76, 141, 255, 0.12);
}

.cell--current {
  background-color: rgba(242, 169, 59, 0.5);
  box-shadow: 0 0 0 1px rgba(242, 169, 59, 0.4), 0 0 10px rgba(242, 169, 59, 0.25);
}

.cell--explored {
  background-color: rgba(76, 141, 255, 0.14);
}

.cell--explored.cell--frontier {
  background-color: rgba(76, 141, 255, 0.14);
}

.cell--path {
  background-color: rgba(43, 214, 163, 0.24);
  box-shadow: inset 0 0 0 1px rgba(43, 214, 163, 0.55), 0 0 8px rgba(43, 214, 163, 0.18);
}

.cell--start {
  background-color: rgba(76, 141, 255, 0.08);
}

.cell--target {
  background-color: rgba(239, 91, 91, 0.06);
}

.cell--start, .cell--target {
  cursor: grab;
  z-index: 2;
}

/* ===========================================================
   Start / target overlay markers
   Real elements (not pseudo-content) positioned above the grid
   like the robot marker, so Anime.js can drive their radar-ring
   and pulse loops directly.
   =========================================================== */
.marker {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 4;
}

.marker--start {
  width: 26px;
  height: 26px;
}

.marker--target {
  width: 30px;
  height: 30px;
}

.marker__core {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 42%;
  height: 42%;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(76, 141, 255, 0.22), 0 0 12px rgba(76, 141, 255, 0.55);
}

.marker__ring {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  border: 1.5px solid var(--blue);
  opacity: 0.7;
}

.marker--target .marker__ring {
  border-color: var(--red);
  width: 100%;
  height: 100%;
}

.marker__reticle {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 58%;
  height: 58%;
  border-radius: 50%;
  border: 2px solid var(--red);
  background:
    linear-gradient(var(--red), var(--red)) center / 100% 1.5px no-repeat,
    linear-gradient(90deg, var(--red), var(--red)) center / 1.5px 100% no-repeat;
  transform-origin: center;
}

/* Reduced-motion fallback rings (static, no JS loop applied) */
@media (prefers-reduced-motion: reduce) {
  .marker__ring { animation: none !important; }
}

/* ===========================================================
   Robot marker
   Outer .robot handles grid-relative position (left/top,
   centering translate). .robot__inner handles heading rotation.
   .robot__svg is where the idle pulse (scale) is applied, kept
   isolated so it never fights the outer centering transform.
   =========================================================== */
.robot {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 6;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 6px rgba(76, 141, 255, 0.35));
}

.robot__inner {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}

.robot__svg {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  display: block;
}

.robot__body {
  fill: #d7e2f2;
}

.robot__head {
  fill: var(--blue);
}

.robot__eye {
  fill: #05070a;
}

.robot__antenna {
  stroke: var(--cyan);
  stroke-width: 1.4;
}

/* ===========================================================
   Stats & comparison (right sidebar) - "live telemetry"
   =========================================================== */
.stat-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  gap: 12px;
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-row dt {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

.stat-row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.empty-state {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.5;
  border: 1px dashed var(--border);
  border-radius: var(--radius-xs);
  padding: 12px;
  font-family: var(--font-mono);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.comparison-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-tertiary);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 6px;
  border-bottom: 1px solid var(--border);
}

.comparison-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.comparison-table tr:last-child td {
  border-bottom: none;
}

.comparison-table td.is-best {
  color: var(--teal);
}

.comparison-table td.is-fail {
  color: var(--red);
}

/* ===========================================================
   Legend
   =========================================================== */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 11px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  opacity: 0;
}

.legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend__swatch {
  width: 13px;
  height: 13px;
  border-radius: var(--radius-xs);
  display: inline-block;
  border: 1px solid var(--border);
}

.legend__swatch--start { background: rgba(76, 141, 255, 0.3); box-shadow: inset 0 0 0 2px var(--blue); }
.legend__swatch--target { background: rgba(239, 91, 91, 0.16); box-shadow: inset 0 0 0 2px var(--red); }
.legend__swatch--obstacle { background: #171b21; box-shadow: inset 0 0 0 1px rgba(242, 169, 59, 0.2); }
.legend__swatch--frontier { background: rgba(76, 141, 255, 0.14); }
.legend__swatch--explored { background: rgba(76, 141, 255, 0.24); }
.legend__swatch--path { background: rgba(43, 214, 163, 0.35); }

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 1080px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .panel--center {
    order: -1;
  }
  .grid {
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot.is-running,
  .robot {
    animation: none !important;
    transition: none !important;
  }
}