/* codriver design tokens (dark set) + the cd-* classes the Garage uses.
   Extracted from the repo's styles/tokens.css + styles/components.css so
   this standalone Pages deploy matches the in-app prototype exactly. */

:root {
  --cd-font-ui: "Geist", system-ui, -apple-system, sans-serif;
  --cd-font-mono: "JetBrains Mono", ui-monospace, monospace;

  --cd-fs-xs: 0.6875rem;
  --cd-fs-sm: 0.8125rem;
  --cd-fs-md: 0.9375rem;
  --cd-fs-lg: 1.125rem;

  --cd-ls-snug: -0.02em;
  --cd-ls-mono: 0.04em;
  --cd-ls-caps: 0.14em;
  --cd-fw-semi: 600;

  --cd-s-1: 0.25rem;
  --cd-s-2: 0.5rem;
  --cd-s-3: 0.75rem;
  --cd-s-4: 1rem;
  --cd-s-5: 1.5rem;

  --cd-r-sm: 2px;
  --cd-control-xl: 52px;
  --cd-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Dark theme values */
  --cd-bg: #0e1218;
  --cd-surface-2: #222a36;
  --cd-surface-3: #2c3543;
  --cd-text: #f2f4f7;
  --cd-text-dim: rgba(242, 244, 247, 0.68);
  --cd-text-mute: rgba(242, 244, 247, 0.52);
  --cd-text-on-accent: #0e1218;
  --cd-line: rgba(255, 255, 255, 0.07);
  --cd-line-strong: rgba(255, 255, 255, 0.14);
  --cd-accent: #3d8bff;
  --cd-accent-soft: rgba(61, 139, 255, 0.16);
  --cd-glass: rgba(14, 18, 24, 0.9);
  --cd-glass-blur: blur(10px);
}

* {
  box-sizing: border-box;
}

.cd-eyebrow {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: var(--cd-ls-caps);
  color: var(--cd-accent);
  text-transform: uppercase;
}

.cd-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-s-1);
  padding: 4px var(--cd-s-2);
  background: var(--cd-surface-2);
  color: var(--cd-text);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-r-sm);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: var(--cd-ls-mono);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.cd-badge--solid {
  background: var(--cd-accent);
  color: var(--cd-text-on-accent);
  border-color: transparent;
}

/* ── Garage page styles (mirror of app/(bare)/prototypes/garage/garage.css) ── */

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--cd-bg);
  color: var(--cd-text);
  font-family: var(--cd-font-ui);
}

canvas {
  display: block;
}

#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    120% 90% at 50% 45%,
    transparent 38%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

#topscrim {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 132px;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--cd-bg), transparent);
}

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.anchor {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
  opacity: 0;
  transition: opacity 380ms var(--cd-ease);
  pointer-events: none;
}

.anchor.on {
  opacity: 1;
}

.anchor__line {
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, transparent, var(--cd-accent));
  margin: 0 auto;
}

.anchor__dot {
  width: 5px;
  height: 5px;
  background: var(--cd-accent);
  margin: 0 auto;
  box-shadow: 0 0 0 4px var(--cd-accent-soft);
}

.anchor__card {
  padding: 10px 12px;
  background: var(--cd-glass);
  backdrop-filter: var(--cd-glass-blur);
  -webkit-backdrop-filter: var(--cd-glass-blur);
  border: 1px solid var(--cd-line-strong);
  min-width: 132px;
}

.anchor__k {
  display: block;
  font-family: var(--cd-font-mono);
  font-size: 9px;
  letter-spacing: var(--cd-ls-caps);
  text-transform: uppercase;
  color: var(--cd-text-mute);
}

.anchor__v {
  display: block;
  margin-top: 2px;
  font-size: var(--cd-fs-lg);
  letter-spacing: var(--cd-ls-snug);
}

.anchor__v--mono {
  font-family: var(--cd-font-mono);
  font-variant-numeric: tabular-nums;
}

.anchor__s {
  display: block;
  margin-top: 2px;
  font-family: var(--cd-font-mono);
  font-size: 9px;
  letter-spacing: var(--cd-ls-caps);
  text-transform: uppercase;
  color: var(--cd-accent);
}

#chrome {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

#top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--cd-s-3);
  height: 64px;
  padding: 0 var(--cd-s-4);
  pointer-events: auto;
}

#title {
  display: grid;
  gap: 1px;
  min-width: 0;
}

#heading {
  font-size: var(--cd-fs-md);
  font-weight: var(--cd-fw-semi);
}

#avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--cd-accent-soft);
  border: 1px solid var(--cd-accent-soft);
  font-family: var(--cd-font-mono);
  font-weight: var(--cd-fw-semi);
}

#caption {
  position: absolute;
  left: var(--cd-s-5);
  bottom: 104px;
  max-width: min(360px, 44vw);
  display: grid;
  gap: var(--cd-s-2);
  padding: var(--cd-s-4);
  background: var(--cd-glass);
  backdrop-filter: var(--cd-glass-blur);
  -webkit-backdrop-filter: var(--cd-glass-blur);
  border: 1px solid var(--cd-line-strong);
  border-left: 2px solid var(--cd-accent);
  pointer-events: auto;
}

#capBody {
  margin: 0;
  font-size: var(--cd-fs-sm);
  line-height: 1.55;
  color: var(--cd-text-dim);
}

#rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: var(--cd-s-2);
  justify-content: center;
  flex-wrap: wrap;
  padding: var(--cd-s-4);
  pointer-events: auto;
}

#rail button {
  height: var(--cd-control-xl);
  padding: 0 var(--cd-s-4);
  background: var(--cd-glass);
  backdrop-filter: var(--cd-glass-blur);
  -webkit-backdrop-filter: var(--cd-glass-blur);
  border: 1px solid var(--cd-line-strong);
  color: var(--cd-text-dim);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: var(--cd-ls-caps);
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms, border-color 160ms, background 160ms;
}

#rail button:hover {
  color: var(--cd-text);
  border-color: var(--cd-accent);
}

#rail button[aria-current="true"] {
  background: var(--cd-accent);
  border-color: var(--cd-accent);
  color: var(--cd-text-on-accent);
}

#loading {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--cd-bg);
  z-index: 5;
  transition: opacity 600ms var(--cd-ease);
}

#loading[hidden] {
  display: none;
}

.bar {
  width: 180px;
  height: 2px;
  background: var(--cd-surface-3);
  overflow: hidden;
}

.bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--cd-accent);
  transition: width 240ms linear;
}