/*
 * The galaxy theme, carried through the public flows.
 *
 * Loaded after admin.css, never instead of it. admin.css is almost entirely
 * driven by custom properties -- one hardcoded colour in the whole file --
 * so redefining the palette on .cosmos re-skins the layout it already
 * defines, and this file only has to handle what a light-to-dark switch
 * genuinely changes: surfaces that now sit over a moving starfield, form
 * controls the browser paints itself, and the one hardcoded hex.
 *
 * Why the survey needed it
 * ------------------------
 * The landing page is deep space and the survey behind it was paper. Clicking
 * "Begin your Self Map" dropped you out of the product and into an admin
 * tool, which is the wrong impression at exactly the moment somebody has
 * decided to trust it with a birth time and a problem.
 *
 * Readability over a starfield
 * ----------------------------
 * The backdrop moves, so nothing legible sits directly on it. Every panel,
 * field and option row gets its own near-opaque surface -- 0.82 alpha over
 * the deep background, not a light wash -- and text sits on that rather than
 * on the stars. Contrast is measured against --bg-panel, not against whatever
 * a star happens to be doing behind it.
 */

.cosmos {
  /* The landing page's palette, reused exactly so the two pages are the
     same product rather than two takes on a similar idea. */
  --bg-deep: #0a0b16;
  --bg-panel: #14162b;
  --nebula-violet: #5b3f8c;
  --nebula-rose: #9c5b7d;
  --star-gold: #e8c77e;
  --text-warm: #f2efe9;
  --text-muted: #b8b3c9;

  /* admin.css's variables, redefined. Everything built on them follows. */
  --paper: #0f1120;
  --surface: rgba(20, 22, 43, 0.82);
  --ink: var(--text-warm);
  --muted: var(--text-muted);
  --rule: rgba(184, 179, 201, 0.18);
  --rule-strong: rgba(184, 179, 201, 0.34);

  /* The three lenses keep their identity but lift off the dark background;
     the paper-theme versions are too dark to read against it. */
  --psych: #7aa7cc;
  --astro: #d69a6a;
  --numer: #8fb87a;

  --flag: #e59b9b;
  --flag-wash: rgba(163, 59, 59, 0.22);
  --ok: #8fc9a6;

  background: var(--bg-deep);
  color: var(--text-warm);
  /* The survey scrolls. The landing page sets overflow:hidden on html and
     body to pin its single viewport hero; that must not leak in here or a
     long reading becomes unreachable. */
  min-height: 100%;
}

html:has(> .cosmos) {
  background: var(--bg-deep);
}

/* The canvas is fixed, so content scrolls over a backdrop that stays put. */
#galaxy-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  /* Decorative: never take a click meant for a form control above it. */
  pointer-events: none;
}

/* Everything except the canvas stacks above it. Written as :not() rather
   than relying on #galaxy-canvas winning on ID specificity, which is true
   but is the kind of true that breaks when somebody reorders the file. */
.cosmos > *:not(#galaxy-canvas) {
  position: relative;
  z-index: 1;
}

/* --- Step list (top of the page content) --------------------------------- */

.cosmos .kids-steps__done { color: var(--star-gold); }
.cosmos .kids-steps__now { color: var(--text-warm); }

/* --- Surfaces ------------------------------------------------------------ */

.cosmos .panel,
.cosmos .kids-combined,
.cosmos .selfmap-signal,
.cosmos .selfmap-combined,
.cosmos .selfmap-section--practical,
.cosmos .selfmap-section--reflection,
.cosmos .selfmap-reflect,
.cosmos .kids-intro,
.cosmos .consent,
.cosmos .place-picker {
  background: var(--surface);
  border-color: var(--rule-strong);
  backdrop-filter: blur(8px);
}

.cosmos .notice {
  background: rgba(20, 22, 43, 0.75);
  backdrop-filter: blur(8px);
}

.cosmos .notice--warning { border-left-color: var(--star-gold); }
.cosmos .notice--error { border-left-color: var(--flag); }
.cosmos .notice--success { border-left-color: var(--ok); }
.cosmos .notice--calm { border-left-color: var(--star-gold); }

/* Headings in the display face, as on the landing page. */
.cosmos h1,
.cosmos .kids-ask__question,
.cosmos .selfmap-combined h2,
.cosmos .selfmap-section h2,
.cosmos .selfmap-card__headline,
.cosmos .kids-report h2 {
  font-family: 'Cormorant Garamond', var(--font-serif);
  color: var(--text-warm);
}

/* The four flip cards: dark, gold-edged, a soft gold glow on hover so they
   read as touchable in a way a flat border does not. The glow moves to
   focus-visible too, so a keyboard user sees the same invitation a mouse
   user does. */
.cosmos .selfmap-card__face {
  background: var(--bg-panel);
  border-color: rgba(232, 199, 126, 0.45);
}

.cosmos .selfmap-card:hover .selfmap-card__face,
.cosmos .selfmap-card:focus-visible .selfmap-card__face {
  border-color: var(--star-gold);
  box-shadow: 0 0 18px rgba(232, 199, 126, 0.25);
}

.cosmos .selfmap-card:focus-visible { outline-color: var(--star-gold); }

.cosmos .selfmap-card__icon { filter: drop-shadow(0 0 4px rgba(232, 199, 126, 0.35)); }

.cosmos .hero-title em,
.cosmos .selfmap-asked em { color: var(--star-gold); }

/* --- Form controls ------------------------------------------------------- */
/*
 * admin.css styles text inputs and textareas but not date, time, number or
 * select -- on paper the browser default was close enough to invisible. On
 * dark it is a white box, so these are styled here rather than left to it.
 */
.cosmos input[type="text"],
.cosmos input[type="password"],
.cosmos input[type="email"],
.cosmos input[type="date"],
.cosmos input[type="time"],
.cosmos input[type="number"],
.cosmos textarea,
.cosmos select {
  background: rgba(10, 11, 22, 0.66);
  border: 1px solid var(--rule-strong);
  color: var(--text-warm);
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 0.55rem 0.7rem;
  width: 100%;
  border-radius: 2px;
}

.cosmos textarea {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.55;
}

/* Tells the browser to paint its own widgets -- the date picker, the select
   arrow, the calendar icon -- in dark rather than light. */
.cosmos input,
.cosmos select,
.cosmos textarea {
  color-scheme: dark;
}

.cosmos input::placeholder,
.cosmos textarea::placeholder { color: rgba(184, 179, 201, 0.6); }

.cosmos input:focus-visible,
.cosmos select:focus-visible,
.cosmos textarea:focus-visible {
  outline: 2px solid var(--star-gold);
  outline-offset: 1px;
  border-color: var(--star-gold);
}

.cosmos select:disabled {
  background: rgba(10, 11, 22, 0.35);
  color: rgba(184, 179, 201, 0.55);
}

/* --- Buttons ------------------------------------------------------------- */
/*
 * The gold outline the landing page's CTA uses, so the button that starts
 * the survey and the button that moves through it are the same button.
 */
.cosmos .button {
  background: transparent;
  border: 1px solid var(--star-gold);
  color: var(--star-gold);
  border-radius: 2px;
}

.cosmos .button:hover {
  background: var(--star-gold);
  color: var(--bg-deep);
}

.cosmos .button--danger {
  border-color: var(--flag);
  color: var(--flag);
}

.cosmos .button--danger:hover {
  background: var(--flag);
  color: var(--bg-deep);
}

.cosmos .actions { border-top-color: var(--rule); }
.cosmos .kids-ask__note { color: var(--text-muted); }
.cosmos .date-echo { color: var(--text-muted); }
/* The confirmed date is the thing being checked, so it gets the accent. */
.cosmos .date-echo--set { color: var(--text-warm); }
.cosmos .date-echo--set strong { color: var(--star-gold); }

/* The public flow is always on this theme, so this is the hover suppression
   that actually runs: the gold fill would otherwise keep saying "press me"
   at a button that is already working. */
.cosmos .is-submitting .button--big:hover {
  background: transparent;
  color: var(--star-gold);
}
.cosmos .kids-back { color: var(--text-muted); }
.cosmos .kids-back:hover { color: var(--star-gold); }

/* --- The question options ------------------------------------------------ */

.cosmos .kids-option {
  background: rgba(20, 22, 43, 0.8);
  border-color: var(--rule-strong);
  color: var(--text-warm);
  backdrop-filter: blur(8px);
}

.cosmos .kids-option:hover { border-color: var(--star-gold); }

.cosmos .kids-option:has(input:checked) {
  border-color: var(--star-gold);
  box-shadow: inset 0 0 0 1px var(--star-gold);
  background: rgba(232, 199, 126, 0.12);
}

.cosmos .kids-option input { accent-color: var(--star-gold); }

/* --- Progress ------------------------------------------------------------ */

.cosmos .kids-progress__track {
  background: rgba(10, 11, 22, 0.7);
  border-color: var(--rule-strong);
}

.cosmos .kids-progress__fill { background: var(--star-gold); }
.cosmos .kids-report__bar { background: var(--star-gold); }

/* --- Report ------------------------------------------------------------- */

.cosmos .kids-report { border-top-color: var(--rule); }
.cosmos .kids-report__themes li { border-left-color: var(--astro); }
.cosmos .kids-report--stop .kids-report__list { color: var(--flag); }
.cosmos .kids-combined dt { color: var(--star-gold); }
.cosmos .cases__meta { color: var(--text-muted); }

.cosmos .pill {
  border-color: var(--rule-strong);
  color: var(--text-muted);
}

.cosmos a { color: var(--star-gold); }

/* --- Motion -------------------------------------------------------------- */
/*
 * The backdrop already freezes under prefers-reduced-motion (the scene still
 * renders, nothing moves). This covers the CSS transitions on top of it.
 */
@media (prefers-reduced-motion: reduce) {
  .cosmos .kids-option,
  .cosmos .button,
  .cosmos .kids-progress__fill { transition: none; }
}

/*
 * Small screens carry the heaviest cost for a full-viewport WebGL canvas and
 * the least benefit, since the backdrop is mostly behind content anyway. The
 * surfaces go more opaque so text stays readable without relying on blur,
 * which is expensive on mobile GPUs.
 */
@media (max-width: 640px) {
  .cosmos {
    --surface: rgba(20, 22, 43, 0.93);
  }
  .cosmos .panel,
  .cosmos .kids-option,
  .cosmos .kids-combined,
  .cosmos .selfmap-signal,
  .cosmos .selfmap-combined,
  .cosmos .notice,
  .cosmos .place-picker { backdrop-filter: none; }
}

/* ---- Accounts (Google sign-in) ----------------------------------------- */

.cosmos .signin-google {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.signin-google__mark { width: 18px; height: 18px; flex: none; }

.cosmos .my-readings {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cosmos .my-readings li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}

.cosmos .my-readings li:last-child { border-bottom: 0; }

/* /login when the sign-in gate sent somebody here: which feature they were
   heading for. */
.cosmos .login__continue {
  color: var(--star-gold);
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}