/* Playground — Stellar Atlas, dark-first. Same palette + typography as
   the docs and landing. Theme resolved by inline head script in
   playground.astro using the same starlight-theme localStorage key. */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,400;9..144,500;9..144,600;9..144,700;9..144,400..700,30..50&family=JetBrains+Mono:wght@400;500;600&family=Spectral:ital,wght@0,400;0,500;1,400&display=swap");

/* Dark = Night Sky (default). */
:root,
:root[data-theme="dark"] {
  --pg-bg: #050811;
  --pg-bg-elev: #0c1020;
  --pg-bg-code: #0d1224;
  --pg-rule: #1a2240;
  --pg-rule-strong: #2a3458;
  --pg-text: #e8e6dd;
  --pg-text-dim: #8a8b94;
  --pg-text-faint: #4a4d5a;
  --pg-star-primary: #6db4ff;
  --pg-star-companion: #ffa855;
  --pg-accent: var(--pg-star-primary);
  --pg-accent-soft: #1a2a44;
  --pg-err: #ff7a7a;
  --pg-active-bg: rgba(109, 180, 255, 0.06);
  --pg-selection-bg: rgba(109, 180, 255, 0.2);
}

/* Light = Atlas (alternate). */
:root[data-theme="light"] {
  --pg-bg: #f3efe3;
  --pg-bg-elev: #f8f5ec;
  --pg-bg-code: #ebe5d4;
  --pg-rule: #d4cdba;
  --pg-rule-strong: #b8af9a;
  --pg-text: #1a1812;
  --pg-text-dim: #5e574a;
  --pg-text-faint: #94897a;
  --pg-star-primary: #1a4880;
  --pg-star-companion: #b94a1f;
  --pg-accent: var(--pg-star-companion);
  --pg-accent-soft: #f4d4cf;
  --pg-err: #8a3614;
  --pg-active-bg: rgba(185, 74, 31, 0.06);
  --pg-selection-bg: rgba(185, 74, 31, 0.18);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--pg-bg);
  color: var(--pg-text);
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-size: 14px;
}

body {
  display: flex;
  flex-direction: column;
}

.pg-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.2rem;
  margin: 14px 14px 0 14px;
  background: color-mix(in srgb, var(--pg-bg) 55%, transparent);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid var(--pg-rule);
  border-radius: 14px;
  flex: 0 0 auto;
}

.pg-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--pg-text);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
  letter-spacing: -0.018em;
  font-variation-settings:
    "opsz" 144,
    "SOFT" 30;
}
.pg-brand:hover {
  color: var(--pg-accent);
}

/* Binary star mark — same shape as the landing's .binary, namespaced to
   .pg- so it can't collide with site-wide rules. Both stars share an
   `orbit` keyframe so they keep the same angular velocity (always 180°
   apart); each also has its own `pg-twinkle-*` opacity animation so they
   shimmer asynchronously. */
.pg-binary {
  display: inline-block;
  width: 32px;
  height: 32px;
  /* let the star glow paint past the viewBox bounds instead of clipping. */
  overflow: visible;
}
.pg-binary circle {
  transform-box: view-box;
  transform-origin: 50% 50%;
}
.pg-binary .star-a {
  fill: var(--pg-star-primary);
  /* Single shadow — stacked drop-shadows recompute every frame on the
     orbiting star, hurts scroll latency. */
  filter: drop-shadow(0 0 4px var(--pg-star-primary));
  animation:
    pg-orbit 14s linear infinite,
    pg-twinkle-a 4.2s ease-in-out infinite;
}
.pg-binary .star-b {
  fill: var(--pg-star-companion);
  filter: drop-shadow(0 0 4px var(--pg-star-companion));
  animation:
    pg-orbit 14s linear infinite,
    pg-twinkle-b 5.7s ease-in-out infinite;
}
@keyframes pg-orbit {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pg-twinkle-a {
  0%,
  100% {
    opacity: 1;
  }
  45% {
    opacity: 0.78;
  }
}
@keyframes pg-twinkle-b {
  0%,
  100% {
    opacity: 1;
  }
  60% {
    opacity: 0.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pg-binary .star-a,
  .pg-binary .star-b {
    animation: none;
  }
}

.pg-sep {
  color: var(--pg-accent);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-variation-settings:
    "opsz" 144,
    "SOFT" 50;
}

.pg-title {
  color: var(--pg-text-dim);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 1.1rem;
  font-variation-settings:
    "opsz" 36,
    "SOFT" 50;
}

.pg-spacer {
  flex: 1;
}

.pg-sample {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--pg-text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.pg-sample select {
  background: var(--pg-bg-elev);
  color: var(--pg-text);
  border: 1px solid var(--pg-rule);
  padding: 4px 8px;
  border-radius: 3px;
  font-family: "Spectral", serif;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.pg-sample select:hover {
  border-color: var(--pg-rule-strong);
}

.pg-link {
  color: var(--pg-accent);
  text-decoration: none;
  font-size: 13px;
  border-bottom: 1px solid var(--pg-accent-soft);
  padding-bottom: 1px;
  transition: border-color 120ms ease;
}
.pg-link:hover {
  border-bottom-color: var(--pg-accent);
}

.pg-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1 1 auto;
  min-height: 0;
}

.pg-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.pg-pane + .pg-pane {
  border-left: 1px solid var(--pg-rule);
}

.pg-pane-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 1rem;
  background: var(--pg-bg);
  border-bottom: 1px solid var(--pg-rule);
  flex: 0 0 auto;
}

.pg-pane-label {
  color: var(--pg-text-faint);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.pg-status {
  color: var(--pg-text-faint);
  font-size: 11px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.pg-status[data-kind="err"] {
  color: var(--pg-err);
}

.pg-editor {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: var(--pg-bg-code);
}

.pg-editor .cm-editor {
  height: 100%;
  background: var(--pg-bg-code);
  color: var(--pg-text);
}
.pg-editor .cm-gutters {
  background: var(--pg-bg-code);
  color: var(--pg-text-faint);
  border-right: 1px solid var(--pg-rule);
}
.pg-editor .cm-activeLineGutter,
.pg-editor .cm-activeLine {
  background: var(--pg-active-bg);
}
.pg-editor .cm-cursor {
  border-left-color: var(--pg-accent);
}
.pg-editor .cm-selectionBackground,
.pg-editor ::selection {
  background: var(--pg-selection-bg) !important;
}
.pg-editor .cm-focused {
  outline: none;
}

@media (max-width: 720px) {
  .pg-main {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .pg-pane + .pg-pane {
    border-left: none;
    border-top: 1px solid var(--pg-rule);
  }
}