:root {
  --bg: #ffffff;
  --text: #222222;
  --muted: #666666;
  --grid: #dddde0;
  --panel: #f7f7f8;
  --border: #dddddd;
  --surface: #ffffff;
  --button-bg: #ffffff;
  --tooltip-bg: #333333;
  --tooltip-text: #ffffff;
  --highlight-stroke: #222222;
  --ring-0: #5ba300;
  --ring-1: #009eb0;
  --ring-2: #c7ba00;
  --ring-3: #e09b96;
  --blip-text: #ffffff;
  color-scheme: light;
}

:root[data-theme="dark"],
body[data-theme="dark"] {
  --bg: #111318;
  --text: #f1f3f5;
  --muted: #a9b0bb;
  --grid: #3a3f48;
  --panel: #242934;
  --border: #343a46;
  --surface: #181c23;
  --button-bg: #20252f;
  --tooltip-bg: #f1f3f5;
  --tooltip-text: #111318;
  --highlight-stroke: #ffffff;
  --ring-0: #9bd95a;
  --ring-1: #5fd7e6;
  --ring-2: #f1dd55;
  --ring-3: #ffaaa5;
  --blip-text: #111111;
  color-scheme: dark;
}


:root.theme-ready body,
:root.theme-ready .app-header,
:root.theme-ready #radar-wrap,
:root.theme-ready #radar-sidebar,
:root.theme-ready .sidebar-panel,
:root.theme-ready #guidance-panel,
:root.theme-ready #legend,
:root.theme-ready button,
:root.theme-ready select,
:root.theme-ready .search-control,
:root.theme-ready .tooltip {
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

/* Base */

html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--bg);
}

button,
select,
input {
  font: inherit;
}

button {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:hover {
  background: var(--panel);
}

button:focus-visible,
summary:focus-visible,
.blip:focus-visible,
.legend-item:focus-visible {
  outline: 2px solid var(--muted);
  outline-offset: 2px;
}

/* Header */

.app-header {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 16px 24px;
  align-items: start;
  padding: 18px 28px 14px;
  border-bottom: 1px solid var(--border);
}

#title-container {
  min-width: 0;
}

h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1.1;
}

.title-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.caption {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 16px;
}

.date {
  display: block;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.controls {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.control-group {
  display: flex;
  gap: 4px;
}

.control-label,
.search-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.radar-selector-label,
.search-group,
.zoom-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.radar-selector-label {
  width: 210px;
}

.radar-selector-label select,
.search-control {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
}

.radar-selector-label select {
  width: 100%;
  padding: 8px 10px;
}

.search-control {
  display: flex;
  align-items: center;
  width: 280px;
  padding: 0 10px;
}

.search-icon {
  color: var(--muted);
  font-size: 16px;
  margin-right: 6px;
}

#radar-search {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  padding: 9px 0;
}

.reset-controls,
.appearance-controls,
.ohno-controls {
  align-items: center;
  height: 38px;
}

.icon-button {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font-size: 16px;
}

.quadrant-icon-controls {
  display: inline-flex;
  align-items: center;
}

.quadrant-icon-controls .icon-button {
  border-radius: 0;
  margin-left: -1px;
}

.quadrant-icon-controls .icon-button:first-child {
  margin-left: 0;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.quadrant-icon-controls .icon-button:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.quadrant-icon-button {
  font-size: 18px;
}


.quadrant-radar-icon {
  display: block;
  width: 1rem;
  height: 1rem;
  overflow: visible;
}

.quadrant-radar-icon-ring,
.quadrant-radar-icon-axis {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quadrant-radar-icon-ring {
  opacity: 0.9;
}

.quadrant-radar-icon-axis {
  opacity: 0.7;
}

.quadrant-radar-icon-centre {
  fill: currentColor;
  stroke: none;
  opacity: 0.85;
}

.reset-button {
  min-width: 42px;
}

.ohno-button {
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols", sans-serif;
  min-width: 42px;
}

.ohno-button[aria-busy="true"] {
  color: #d94336;
}

.theme-toggle-button {
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols", sans-serif;
  line-height: 1;
}

/* Main layout */

main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  padding: 20px 28px;
  overflow: hidden;
}

#radar-wrap {
  flex: 0 1 auto;
  width: min(calc(100vh - 190px), calc(100vw - 480px));
  aspect-ratio: 1 / 1;
  max-width: 900px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}

svg {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}

svg:active {
  cursor: grabbing;
}

#radar-sidebar {
  width: 340px;
  flex: 0 0 340px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Sidebar */

.sidebar-panel,
#guidance-panel {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}

.sidebar-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.sidebar-header,
#guidance-panel summary {
  padding: 12px 16px;
  font-weight: bold;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

#legend {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  background: var(--surface);
}

#guidance-panel {
  flex: 0 0 auto;
  max-height: 45%;
  min-height: 0;
}

#guidance-panel[open] {
  overflow: auto;
}

#guidance-panel:not([open]) summary {
  border-bottom: none;
}

#guidance-panel summary {
  cursor: pointer;
}

/* Guidance */

#guidance {
  padding: 16px;
}

#guidance .guidance-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

#guidance section {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

#guidance h2 {
  font-size: 16px;
  margin: 0 0 12px;
}

#guidance table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

#guidance th,
#guidance td {
  text-align: left;
  vertical-align: top;
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
}

#guidance th {
  color: var(--muted);
  font-weight: bold;
}

#guidance tr:last-child td {
  border-bottom: none;
}

#guidance .guidance-name {
  white-space: nowrap;
  font-weight: bold;
}

/* Legend */

.legend-section {
  margin-bottom: 24px;
}

.legend-section h2 {
  font-size: 17px;
  margin: 0 0 12px;
}

.legend-ring {
  margin-bottom: 16px;
}

.legend-ring h3 {
  font-size: 12px;
  margin: 0 0 6px;
}

.legend-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 6px;
  font-size: 12px;
  line-height: 1.25;
  margin: 4px 0;
  overflow-wrap: anywhere;
}

.legend-item .num {
  color: var(--muted);
  text-align: right;
}

.legend-item a {
  color: inherit;
  text-decoration: none;
}

.legend-item a:hover {
  text-decoration: underline;
}

.legend-item.highlight {
  background: var(--panel);
  border-radius: 4px;
}

.legend-item.dimmed {
  opacity: 0.45;
}

.legend-reason {
  grid-column: 2;
  color: var(--muted);
  font-size: 11px;
}

/* Radar */

.blip circle,
.blip path,
.legend-item {
  transition: opacity 120ms ease, filter 120ms ease, background 120ms ease;
}

.blip.highlight circle,
.blip.highlight path {
  stroke: var(--highlight-stroke);
  stroke-width: 3px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.blip.dimmed {
  opacity: 0.28;
}

/* Oh No lemming animation */

#radar-root.lemming-active .blip,
body[data-lemming-active="true"] .legend-item,
body[data-lemming-active="true"] .legend-item * {
  pointer-events: none;
}

.blip.lemming-target {
  opacity: 1;
}

.blip.lemming-target > circle,
.blip.lemming-target > path {
  stroke: var(--highlight-stroke);
  stroke-width: 3px;
  filter: drop-shadow(0 0 7px rgba(217, 67, 54, 0.55));
}

.lemming-marker-hidden {
  opacity: 0;
}

.lemming-sprite {
  animation: lemming-walk 4.25s ease-in-out forwards;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
}

.lemming-body {
  animation: lemming-step 360ms steps(2, end) infinite;
  transform: scale(0.58);
  transform-box: fill-box;
  transform-origin: center bottom;
}

.lemming-hair {
  fill: #68d641;
  stroke: #1c6f22;
  stroke-width: 1.3px;
}

.lemming-hair-top {
  fill: #79ed4f;
}

.lemming-face {
  fill: #ffc497;
  stroke: #3a261c;
  stroke-width: 1.2px;
}

.lemming-tunic {
  fill: #1f6ed4;
  stroke: #0c2f73;
  stroke-width: 1.2px;
}

.lemming-belt {
  fill: #0f2453;
}

.lemming-eye {
  fill: #1b1b1b;
}

.lemming-arm,
.lemming-leg {
  fill: none;
  stroke: #ffc497;
  stroke-width: 3px;
  stroke-linecap: round;
  animation: lemming-limbs 260ms steps(2, end) infinite;
}

.lemming-boot {
  fill: none;
  stroke: #f7f2df;
  stroke-width: 4px;
  stroke-linecap: square;
  animation: lemming-limbs 260ms steps(2, end) infinite reverse;
}

.lemming-arm-raised {
  display: none;
}

.lemming-wobble .lemming-body {
  animation: none;
}

.lemming-wobble .lemming-arm-walk {
  display: none;
}

.lemming-wobble .lemming-arm-raised {
  display: block;
}

.lemming-hole {
  fill: #111111;
  stroke: #4a4a4a;
  stroke-width: 2px;
  opacity: 0.82;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.45));
}

.lemming-explosion {
  animation: lemming-boom 1050ms steps(5, end) forwards;
  pointer-events: none;
}

.lemming-boom-core {
  fill: #fff06a;
  stroke: #d94336;
  stroke-width: 5px;
}

.lemming-boom-ray {
  stroke: #ff6d2d;
  stroke-width: 7px;
  stroke-linecap: square;
}

.lemming-smoke {
  fill: #d7dbe2;
  stroke: #777f8d;
  stroke-width: 1px;
  opacity: 0.9;
}

.lemming-countdown-number {
  text-anchor: middle;
  dominant-baseline: central;
  font-family: "Courier New", monospace;
  font-size: 18px;
  font-weight: 900;
  paint-order: stroke;
  stroke-width: 3px;
  stroke-linejoin: round;
}

.blip .lemming-countdown-number {
  fill: #111111;
  stroke: #ffffff;
}

:root[data-theme="dark"] .lemming-countdown-number,
body[data-theme="dark"] .lemming-countdown-number {
  fill: #ffffff;
  stroke: #111111;
}

@keyframes lemming-walk {
  0% {
    transform: translate(0, var(--walk-lane));
  }

  50% {
    transform: translate(var(--walk-distance), var(--walk-lane));
  }

  100% {
    transform: translate(0, var(--walk-lane));
  }
}

@keyframes lemming-step {
  0% {
    transform: translateY(0) scale(0.58);
  }

  100% {
    transform: translateY(-1px) scale(0.58);
  }
}

@keyframes lemming-limbs {
  0% {
    transform: rotate(-8deg);
  }

  100% {
    transform: rotate(8deg);
  }
}

@keyframes lemming-boom {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }

  20% {
    transform: scale(1.1);
    opacity: 1;
  }

  55% {
    transform: scale(1.35);
    opacity: 0.92;
  }

  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

.lemming-wobble {
  animation: lemming-wobble 360ms steps(4, end) infinite !important;
}

@keyframes lemming-wobble {
  0% {
    transform: translate(0, var(--walk-lane)) rotate(-8deg);
  }

  50% {
    transform: translate(0, var(--walk-lane)) rotate(8deg);
  }

  100% {
    transform: translate(0, var(--walk-lane)) rotate(-8deg);
  }
}

.ring-label {
  font-size: 42px;
  font-weight: bold;
  opacity: 0.32;
  pointer-events: none;
  user-select: none;
}

.quadrant-label {
  font-size: 18px;
  font-weight: bold;
  fill: var(--text);
  cursor: pointer;
  user-select: none;
}

.blip text {
  fill: var(--blip-text);
  text-anchor: middle;
  dominant-baseline: central;
  font-size: 9px;
  pointer-events: none;
  user-select: none;
}

.ring-name-0 {
  color: var(--ring-0);
}

.ring-name-1 {
  color: var(--ring-1);
}

.ring-name-2 {
  color: var(--ring-2);
}

.ring-name-3 {
  color: var(--ring-3);
}

/* Tooltip */

.tooltip {
  position: fixed;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%);
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 12px;
  max-width: 260px;
  z-index: 10;
}

.tooltip.selected {
  pointer-events: auto;
}

.tooltip a {
  color: inherit;
  font-weight: bold;
}

/* Display options */

body[data-show-title="false"] #title-container,
body[data-show-controls="false"] #controls,
body[data-show-sidebar="false"] #radar-sidebar,
body[data-show-entries="false"] #entries-panel,
body[data-show-guidance="false"] #guidance-panel {
  display: none !important;
}
body[data-show-radar-selector="false"] .radar-selector-label {
  display: none !important;
}

body[data-show-ohno="false"] .ohno-controls {
  display: none !important;
}

body[data-show-title="false"] .app-header {
  grid-template-columns: 1fr;
}

body[data-show-title="false"] #controls {
  width: 100%;
  justify-content: center;
}

body[data-show-title="false"][data-show-controls="false"] .app-header {
  display: none;
}

/* Responsive layout */

@media (max-width: 1100px) {
  .app-header {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .controls {
    justify-content: flex-start;
  }

  .radar-selector-label {
    width: 210px;
  }

  .search-control {
    width: 280px;
  }
}

@media (max-width: 900px) {
  html,
  body {
    height: auto;
  }

  body {
    display: block;
  }

  .app-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px 12px;
  }

  .title-meta {
    display: block;
  }

  .controls {
    width: 100%;
    justify-content: flex-start;
    align-items: flex-end;
  }

  main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px 20px 32px;
    overflow: visible;
  }

  #radar-wrap {
    width: 100%;
    height: auto;
    max-height: none;
    align-self: auto;
  }

  #radar-sidebar {
    width: auto;
    flex: none;
    min-height: auto;
  }

  #legend {
    overflow: visible;
  }

  #guidance-panel {
    max-height: none;
  }
}

@media (max-width: 700px) {
  .controls {
    align-items: stretch;
  }

  .radar-selector-label,
  .search-control {
    width: min(100%, 320px);
  }

  .zoom-controls {
    width: auto;
  }

  .reset-controls,
  .appearance-controls,
  .ohno-controls {
    width: auto;
    align-self: flex-end;
  }
}
/* Radar switching */
body[data-radar-loading="true"] #radar-layout {
  cursor: progress;
}

body[data-radar-loading="true"] #radar-selector {
  cursor: progress;
  opacity: 0.75;
}