/* GoStargazing — shared component patterns.
 *
 * These classes appear across map + observatory + demo + sandbox. The
 * observatory's HUD is the reference implementation for this visual
 * language.
 */

/* --- Panel -------------------------------------------------------------
 * Translucent surface with a fine border and blurred backdrop. Used for
 * every floating card on every page (map results, observatory HUD, sandbox
 * sidebar, design doc sections).
 */
.gs-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-0);
  padding: var(--sp-4);
  box-shadow: var(--shadow-panel);
}

/* --- Chip / Badge ------------------------------------------------------
 * Small label rendered in a colored pill. Variants (good/warn/bad/accent)
 * tint both background and text from the matching status token.
 */
.gs-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
}
.gs-chip--good    { color: var(--good); background: var(--good-dim); border-color: color-mix(in oklab, var(--good), transparent 60%); }
.gs-chip--warn    { color: var(--warn); background: var(--warn-dim); border-color: color-mix(in oklab, var(--warn), transparent 60%); }
.gs-chip--bad     { color: var(--bad);  background: var(--bad-dim);  border-color: color-mix(in oklab, var(--bad),  transparent 60%); }
.gs-chip--accent  { color: var(--accent); background: color-mix(in oklab, var(--accent), transparent 82%); border-color: var(--accent-dim); }

/* --- Score bar --------------------------------------------------------
 * Horizontal progress track. Fill color picked by JS via --bar-color.
 */
.gs-bar-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.gs-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.gs-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--bar-color, var(--accent));
  transition: width var(--t-slow) var(--ease);
}

/* --- Button -----------------------------------------------------------
 * Ghost button with a subtle background. .gs-btn--accent uses the accent
 * color; hover brightens both.
 */
.gs-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.gs-btn:hover,
.gs-btn:focus-visible {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-strong);
}
.gs-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.gs-btn--accent { color: var(--accent); border-color: var(--accent-dim); }
.gs-btn--accent:hover,
.gs-btn--accent:focus-visible { color: var(--ink); background: color-mix(in oklab, var(--accent), transparent 92%); border-color: var(--accent); }

/* --- Nav link ---------------------------------------------------------
 * Small uppercase navigation item. Used in observatory top-nav, design-doc
 * header, sandbox toolbar.
 */
.gs-link-nav {
  font-family: inherit;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink-dim);
  text-decoration: none;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-0);
  background: rgba(7, 8, 11, calc(0.55 + var(--daylight) * 0.32));
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.gs-link-nav:hover,
.gs-link-nav:focus-visible { color: var(--accent); border-color: var(--accent-dim); }
.gs-link-nav--accent { color: var(--accent); border-color: var(--accent-dim); }

/* --- Section label ----------------------------------------------------
 * Tiny uppercase label used above data blocks. Two variants for hierarchy.
 */
.gs-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.gs-label--strong { color: var(--ink-dim); letter-spacing: var(--tracking-widest); }