/* ───────────────────────────────────────────────────────────────────────────
 * Retro "phosphor terminal" chrome
 *
 * The product's soul is a green 7-segment LED counter and CRT/terminal stats
 * pages. This layer injects that personality into the app chrome (wordmark, auth
 * flow, onboarding) WITHOUT sacrificing legibility: big pixel display type and
 * monospace UI accents over a clean base, with dark phosphor panels reserved for
 * "display" moments (the hero, the counter preview, empty states).
 *
 * Loaded after Tailwind so these opt-in classes win. Class names are namespaced
 * (retro-*, terminal-*, led-*) so they never collide with Tailwind utilities.
 * ─────────────────────────────────────────────────────────────────────────── */

:root {
  --phosphor: #39ff66;          /* the LED green — the brand/primary action color */
  --phosphor-dim: #2bbf4e;
  --crt-bg: #0c100c;            /* near-black with a green cast */
  --crt-bg-soft: #111611;

  --ink: #17131f;               /* near-black with a faint violet cast */
  --canvas: #faf5ea;            /* warm cream paper, the page background */

  /* Memphis accent palette — used in the decorative confetti + small pops. */
  --mem-pink: #ff5d8f;
  --mem-teal: #14c1b4;
  --mem-yellow: #ffcf2e;
  --mem-blue: #4b7bff;
}

/* Warm paper canvas instead of flat white. */
body { background: var(--canvas); }

/* Memphis confetti — decorative shape layer. The parent is `relative
 * overflow-hidden`; this sits behind content and never eats clicks. */
.memphis { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.memphis > * { position: absolute; }
.mem-pink   { color: var(--mem-pink); }
.mem-teal   { color: var(--mem-teal); }
.mem-yellow { color: var(--mem-yellow); }
.mem-blue   { color: var(--mem-blue); }
.mem-ink    { color: var(--ink); }
@keyframes mem-float { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-8px) rotate(var(--r,0deg)); } }
.mem-bob { animation: mem-float 6s ease-in-out infinite; }

/* Cartridge — SimpleBits' chunky arcade-cabinet display face, self-hosted from
 * public/fonts. This is the retro voice of the chrome: video-game marquee, not
 * LCD pixels. Weights map to Tailwind's font-weight scale so `font-black` etc.
 * pick the right cut. */
@font-face { font-family: "Cartridge"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/cartridge/Cartridge-RegularSoft.woff2") format("woff2"); }
@font-face { font-family: "Cartridge"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/cartridge/Cartridge-SemiboldSoft.woff2") format("woff2"); }
@font-face { font-family: "Cartridge"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/cartridge/Cartridge-BoldSoft.woff2") format("woff2"); }
@font-face { font-family: "Cartridge"; font-style: normal; font-weight: 900; font-display: swap; src: url("/fonts/cartridge/Cartridge-BlackSoft.woff2") format("woff2"); }

/* Type ----------------------------------------------------------------------- */
.font-arcade  { font-family: "Cartridge", ui-sans-serif, system-ui; }
.font-mono-ui { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }

/* Wordmark: Cartridge with a blinking terminal cursor. */
.retro-wordmark {
  font-family: "Cartridge", ui-sans-serif, system-ui;
  font-weight: 700;
  letter-spacing: 0.005em;
}
.retro-wordmark::after {
  content: "_";
  margin-left: 0.08em;
  color: var(--phosphor-dim);
  animation: retro-blink 1.1s step-end infinite;
}

/* Big display heading: Cartridge, set tight like an arcade marquee. */
.retro-display {
  font-family: "Cartridge", ui-sans-serif, system-ui;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0;
}

/* A small monospace "prompt" label, e.g. › create-account.sh */
.retro-prompt {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--phosphor-dim);
}

/* Terminal window frame -------------------------------------------------------
 * A light, legible card dressed as an old terminal/desktop window: a title bar
 * with three "traffic light" dots and a monospace filename. Used to wrap forms. */
.terminal-card {
  border: 1px solid #1c1c1c;
  border-radius: 0.625rem;
  background: #fff;
  box-shadow: 0 1px 0 #000, 0 10px 30px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.terminal-titlebar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #161616;
  color: #d8d8d8;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.75rem;
}
.terminal-dot { width: 0.625rem; height: 0.625rem; border-radius: 9999px; display: inline-block; }
.terminal-dot--r { background: #ff5f57; }
.terminal-dot--y { background: #febc2e; }
.terminal-dot--g { background: #28c840; }
.terminal-title { margin-left: 0.25rem; opacity: 0.85; }

/* Dark phosphor panel for "display" surfaces (counter preview, empty state). */
.crt-panel {
  position: relative;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(57, 255, 102, 0.06), transparent 60%),
    var(--crt-bg);
  color: var(--phosphor);
  border: 1px solid rgba(57, 255, 102, 0.22);
  border-radius: 0.625rem;
  overflow: hidden;
}
/* Scanlines + a faint vignette, drawn over the panel without blocking clicks. */
.crt-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.22) 2px 3px);
  mix-blend-mode: multiply;
}
.crt-panel .crt-glow { color: var(--phosphor); text-shadow: 0 0 6px rgba(57, 255, 102, 0.45); }
.crt-muted { color: rgba(57, 255, 102, 0.6); }

/* Chunky arcade button: bright phosphor fill, ink border, hard offset shadow that
 * collapses when pressed — the classic Memphis/arcade "physical button" feel.
 * Used on the light cream canvas. */
.btn-terminal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: "Cartridge", ui-sans-serif, system-ui;
  font-weight: 700;
  color: var(--ink);
  background: var(--phosphor);
  border: 2px solid var(--ink);
  border-radius: 0.5rem;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.05s ease, box-shadow 0.05s ease, filter 0.15s ease;
}
.btn-terminal:hover { filter: brightness(1.04); }
.btn-terminal:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }

/* Same button for use ON dark CRT panels: a colored hard shadow pops on dark. */
.btn-phosphor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: "Cartridge", ui-sans-serif, system-ui;
  font-weight: 700;
  color: var(--crt-bg);
  background: var(--phosphor);
  border: 2px solid var(--phosphor);
  border-radius: 0.5rem;
  box-shadow: 3px 3px 0 var(--mem-pink);
  cursor: pointer;
  transition: transform 0.05s ease, box-shadow 0.05s ease, filter 0.15s ease;
}
.btn-phosphor:hover { filter: brightness(1.04); }
.btn-phosphor:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--mem-pink); }

/* Numbered step badge — a chunky Cartridge numeral in a colored arcade tile.
 * Set --c per step to cycle the Memphis palette. */
.step-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.6rem;
  font-family: "Cartridge", ui-sans-serif, system-ui;
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--ink);
  background: var(--c, var(--phosphor));
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}

@keyframes retro-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }

/* Dashboard / app chrome ------------------------------------------------------
 * Light-canvas counterparts to the dark CRT panels. Same ink-border + hard-shadow
 * language as .terminal-card / .btn-terminal, so the owner UI feels like the same
 * product as the marketing and public pages. */
.dash-panel {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 0.625rem;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 1.25rem;
}
.dash-label {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6570;
}
.dash-stat {
  font-family: "Cartridge", ui-sans-serif, system-ui;
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dash-bar {
  background: color-mix(in srgb, var(--phosphor) 22%, transparent);
  border-radius: 0.25rem;
}

.range-tab {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.8125rem;
  padding: 0.35rem 0.75rem;
  border: 2px solid var(--ink);
  border-radius: 0.4rem;
  background: #fff;
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.05s ease, box-shadow 0.05s ease;
}
.range-tab:hover { filter: brightness(0.98); }
.range-tab--on {
  background: var(--ink);
  color: var(--canvas);
  box-shadow: 2px 2px 0 var(--phosphor);
}

.live-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  background: color-mix(in srgb, var(--phosphor) 12%, #fff);
  border: 2px solid var(--ink);
  border-radius: 0.625rem;
  box-shadow: 3px 3px 0 var(--phosphor-dim);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.875rem;
}
.live-dot {
  position: relative;
  display: inline-flex;
  width: 0.55rem;
  height: 0.55rem;
}
.live-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--phosphor);
  animation: live-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.live-dot::after {
  content: "";
  position: relative;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 9999px;
  background: var(--phosphor-dim);
}
@keyframes live-ping {
  0% { transform: scale(1); opacity: 0.7; }
  75%, 100% { transform: scale(2.2); opacity: 0; }
}

/* Counter stage — frames the LED badge as a physical display on public/landing.
 * Uses --accent when a public theme defines it; falls back to phosphor green. */
.counter-stage {
  --stage-glow: var(--accent, var(--phosphor));
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.35rem 1.75rem;
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--stage-glow) 14%, transparent), transparent 55%),
    var(--crt-bg, #0c100c);
  border: 2px solid color-mix(in srgb, var(--stage-glow) 40%, transparent);
  border-radius: 0.85rem;
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.45),
    0 0 0 3px #0a0c0a,
    4px 4px 0 rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.counter-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.2) 2px 3px);
  mix-blend-mode: multiply;
}
.counter-stage > * {
  position: relative;
  z-index: 1;
}

/* Snippet code well — dark terminal chrome that matches .crt-panel. */
.snippet-well {
  position: relative;
  background: var(--crt-bg);
  border: 2px solid var(--ink);
  border-radius: 0.5rem;
  box-shadow: 3px 3px 0 var(--ink);
  overflow: hidden;
}
.snippet-well pre {
  margin: 0;
  padding: 1rem 4.5rem 1rem 1rem;
  overflow-x: auto;
  color: var(--phosphor);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.snippet-tab {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.8125rem;
  padding: 0.5rem 0.85rem;
  border-bottom: 2px solid transparent;
  color: #6b6570;
  cursor: pointer;
  background: transparent;
}
.snippet-tab--on {
  color: var(--ink);
  border-bottom-color: var(--phosphor);
  font-weight: 600;
}

.site-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 0.625rem;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.site-row:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--phosphor-dim);
}

.app-header {
  border-bottom: 2px solid var(--ink);
  background: color-mix(in srgb, var(--canvas) 88%, #fff);
}

/* Nav links in the app header — subtle phosphor hover, no underline chrome. */
.nav-link {
  color: #6b6570;
  text-decoration: none;
  transition: color 0.1s ease;
}
.nav-link:hover { color: var(--phosphor-dim); }

/* Flash messages ---------------------------------------------------------
 * A slim strip under the header, same ink-bordered language as .app-header,
 * tinted per flash type instead of stock Tailwind red/green. */
.flash-bar {
  border-bottom: 2px solid var(--ink);
  background: color-mix(in srgb, var(--canvas) 94%, #fff);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.875rem;
}
.flash-bar--notice {
  background: color-mix(in srgb, var(--phosphor) 12%, var(--canvas));
  color: color-mix(in srgb, var(--ink) 85%, var(--phosphor-dim));
}
.flash-bar--alert {
  background: color-mix(in srgb, var(--mem-pink) 14%, var(--canvas));
  color: color-mix(in srgb, var(--ink) 82%, var(--mem-pink));
}
.flash-dot {
  display: inline-block;
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background: currentColor;
}

/* App footer — mirrors .app-header's ink rule, muted mono copy. */
.app-footer {
  border-top: 2px solid var(--ink);
  background: color-mix(in srgb, var(--canvas) 88%, #fff);
}

/* On-brand error box for auth forms — ink border + hard shadow instead of a
 * generic Tailwind red-50 alert. */
.form-errors {
  border: 2px solid var(--ink);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--mem-pink) 10%, #fff);
  box-shadow: 2px 2px 0 var(--mem-pink);
  color: var(--ink);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.8125rem;
  padding: 0.75rem 0.9rem;
}

/* Dashboard accent — retints --phosphor from the site's counter color so live
 * pills, range tabs, breakdown bars, and snippet chrome match the badge. */
.dash-accent--green {
  --phosphor: #39ff66;
  --phosphor-dim: #2bbf4e;
}
.dash-accent--amber {
  --phosphor: #ffb347;
  --phosphor-dim: #d4922e;
}
.dash-accent--red {
  --phosphor: #ff4444;
  --phosphor-dim: #cc3333;
}
.dash-accent--blue {
  --phosphor: #4fb6ff;
  --phosphor-dim: #2f8fd1;
}
.dash-accent--white {
  --phosphor: #5a5560;
  --phosphor-dim: #3a3540;
}