/* FrontierOR — light theme foundation (CORAL-style). */

:root {
  --brand-purple: #52487b;
  --brand-purple-light: #6b5fa0;
  --brand-purple-dark: #3d345e;
  --brand-gold: #a68349;
  --brand-gold-light: #c39e63;
  --brand-gold-dark: #7d5f33;
}

html,
body {
  background: #ffffff;
  color: #18181b; /* zinc-900 */
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  padding: 0.1em 0.35em;
  background: rgb(244 244 245); /* zinc-100, neutral */
  border-radius: 4px;
  color: rgb(63 63 70); /* zinc-700 */
}
/* Inside <pre> blocks, the <code> child should inherit cleanly — no pill.
   !important guards against the global `code {…}` above winning specificity
   ties when third-party stylesheets reorder. */
pre code,
pre > code {
  background: transparent !important;
  padding: 0 !important;
  font-size: inherit !important;
  color: inherit !important;
  border-radius: 0 !important;
  border: 0 !important;
}

/* Hero / panel highlight on light bg: subtle warm-cool wash. */
.hero-gradient {
  background:
    radial-gradient(circle at 18% 12%, rgba(82, 72, 123, 0.10), transparent 55%),
    radial-gradient(circle at 82% 24%, rgba(166, 131, 73, 0.08), transparent 55%),
    #ffffff;
}

/* Selection. */
::selection {
  background: rgba(82, 72, 123, 0.25);
  color: var(--brand-purple-dark);
}

/* Snapshot slider ---------------------------------------------------------- */
.time-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    rgba(82, 72, 123, 0.35),
    rgba(166, 131, 73, 0.45)
  );
  outline: none;
}
.time-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-purple);
  border: 2px solid #ffffff;
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--brand-purple);
  transition: transform 120ms ease;
  position: relative;
  z-index: 2;
}
.time-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}
.time-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-purple);
  border: 2px solid #ffffff;
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--brand-purple);
}
.time-slider:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Tick circles overlaid on the slider track. */
.time-slider-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.time-slider-tick {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  background: rgba(82, 72, 123, 0.25);
  border: 1px solid var(--brand-purple);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition: background 120ms ease, transform 120ms ease;
  z-index: 1;
}
.time-slider-tick:hover,
.time-slider-tick:focus-visible {
  background: rgba(82, 72, 123, 0.55);
  transform: translate(-50%, -50%) scale(1.4);
  outline: none;
}

/* Snapshot popup. */
.snap-popup {
  margin-top: 0.9rem;
  padding: 0.75rem 0.95rem;
  background: #ffffff;
  border: 1px solid rgb(228 228 231); /* zinc-200 */
  border-radius: 0.6rem;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.08);
}

/* Collapsible <details> section: hide native disclosure marker. */
.collapsible-section > summary {
  list-style: none;
}
.collapsible-section > summary::-webkit-details-marker {
  display: none;
}
.collapsible-section > summary::marker {
  content: "";
}

/* Soft scrollbar (Chromium / WebKit) for code-preview <pre> blocks. */
pre::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
pre::-webkit-scrollbar-thumb {
  background: rgba(82, 72, 123, 0.25);
  border-radius: 4px;
}
pre::-webkit-scrollbar-thumb:hover {
  background: rgba(82, 72, 123, 0.45);
}

/* Top-3 medals for performance-table rank cells. Riffs on the
   einsia/frontier-eng style (crown-wobble for gold + subtle pulse for
   silver/bronze). Used on leaderboard.html + task.html. */
@keyframes medal-wobble {
  0%, 70%, 100% { transform: rotate(0deg) scale(1); }
  80%           { transform: rotate(-12deg) scale(1.18); }
  90%           { transform: rotate(10deg)  scale(1.10); }
}
@keyframes medal-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.medal {
  display: inline-block;
  transform-origin: center bottom;
  line-height: 1;
  font-size: 1.15em;
}
.medal-gold   { animation: medal-wobble 2.6s ease-in-out infinite; }
.medal-silver { animation: medal-pulse  3.2s ease-in-out infinite; }
.medal-bronze { animation: medal-pulse  3.6s ease-in-out infinite; }