/* Voice AI Summit — terminal aesthetic
   Shared styles. Color is driven by --accent (set by theme.js, default white). */

:root {
  /* theme colors — overridden at runtime by theme.js. Defaults = Cursor Dark. */
  --bg: #181818;
  --bg-window: #1e1e1e;
  --text: #d4d4d4;
  --accent: #ffffff;
  --accent-dim: #8a8a8a;
  --accent-faint: #2d2d2d;
  --glow: rgba(255, 255, 255, 0.18);

  /* fixed chrome colors */
  --grey: #7d7d7d;
  --red: #ff5f56;
  --yellow: #ffbd2e;
  --green-dot: #27c93f;

  --mono: "SFMono-Regular", "JetBrains Mono", "Fira Code", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  /* Old-school white bitmap sky behind the terminal, independent of the terminal's own theme.
     A white wash sits over the photo so it reads lighter and gives the icon dock more contrast. */
  background-color: #f4f4f2;
  background-image: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)), url("assets/bg-sky.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

/* subtle ambient glow (theme-neutral, kept calm) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.05), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* CRT scanlines + flicker */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.22) 3px,
    rgba(0, 0, 0, 0) 4px
  );
  pointer-events: none;
  z-index: 9;
  animation: flicker 4s infinite steps(60);
}

@keyframes flicker {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.5; }
}

/* Home page: terminal window, centered as before */
.desktop {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

/* Icon dock pinned to the left edge of the page itself (not the terminal),
   like desktop icons docked to a screen corner — stays put regardless of
   how wide the terminal window is. Sits above the CRT scanline overlay
   (z-index 9) so it isn't dimmed by it. */
.folder-rail {
  position: fixed;
  top: 50%;
  left: clamp(10px, 3vw, 36px);
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Fixed dark ink color, independent of the terminal's theme accent — the rail
   sits on the white bitmap desktop, not inside the terminal window. An opaque
   card backing (not just on hover) is what makes it read clearly against the
   busy sky photo. */
.folder-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  width: 88px;
  height: 74px;
  text-decoration: none;
  color: #111;
  padding: 8px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.08s ease;
}
.folder-icon img {
  max-width: 50px;
  max-height: 50px;
  width: auto;
  height: auto;
}
.folder-icon .flabel {
  font-size: 10.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: center;
  color: #111;
}
.folder-icon:hover,
.folder-icon:focus {
  background: #fff;
  border-color: #000;
  outline: none;
  transform: translateX(2px);
}
.folder-icon:hover .flabel,
.folder-icon:focus .flabel { color: #000; }

@media (max-width: 620px) {
  .folder-rail { display: none; }
}

/* Reserve room on the left for the fixed icon dock so the centered terminal
   window never grows underneath it, however narrow the viewport gets.
   Scoped to the home page only, the only page with a rail. */
@media (min-width: 621px) {
  body.rail-page { padding-left: 150px; }
}

.window {
  position: relative;
  z-index: 1;
  width: min(860px, 100%);
  /* Fit the terminal to the viewport; the screen scrolls inside it. */
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--bg-window);
  border: 1px solid var(--accent-faint);
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 30px 80px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.28);
  border-bottom: 1px solid var(--accent-faint);
  flex: 0 0 auto;
}

.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot.r { background: var(--red); }
.dot.y { background: var(--yellow); }
.dot.g { background: var(--green-dot); }

.titlebar .path {
  margin-left: 10px;
  color: var(--grey);
  font-size: 13px;
  letter-spacing: 0.5px;
}

/* Terminal color picker */
.theme-picker {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
}
.theme-picker .label {
  color: var(--grey);
  font-size: 11px;
  margin-right: 2px;
  letter-spacing: 0.5px;
}
.swatch {
  width: 22px;
  height: 15px;
  border-radius: 4px;
  border: 1px solid var(--accent-faint);
  padding: 0;
  cursor: pointer;
  transition: transform 0.1s ease, outline-color 0.1s ease;
  outline: 1.5px solid transparent;
  outline-offset: 1px;
}
.swatch:hover { transform: translateY(-1px); }
.swatch.active { outline-color: rgba(255, 255, 255, 0.85); }
.swatch:focus-visible { outline-color: #fff; }

.screen {
  padding: 28px 30px 34px;
  min-height: 420px;
  /* Scroll the content inside the terminal, titlebar stays pinned. */
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Terminal text */
.line { white-space: pre-wrap; word-break: break-word; }
.prompt { color: var(--accent-dim); }
.ok { color: var(--accent); }
.warn { color: var(--accent); }
.muted { color: var(--grey); }
.accent { color: var(--accent); }

.logo {
  color: var(--accent);
  /* Whole-pixel steps, not a fluid vw size: the ASCII art is built from
     box-drawing glyphs whose strokes only line up cleanly at integer font
     sizes. A fractional computed size (what clamp(..., 1.8vw, ...) produces
     at most viewport widths) makes adjacent glyph cells rasterize half a
     pixel apart, which shows up as a hairline double-stroke / grid seam
     over the logo, worst on mobile. */
  font-size: 13px;
  line-height: 1.15;
  margin: 6px 0 18px;
  text-shadow: 0 0 12px var(--glow);
  white-space: pre;
  overflow-x: auto;
}

@media (max-width: 760px) {
  .logo { font-size: 10px; }
}

@media (max-width: 480px) {
  .logo { font-size: 8px; }
}

.tagline { color: var(--text); margin-bottom: 22px; }

/* blinking cursor */
.cursor {
  display: inline-block;
  width: 10px;
  height: 1.05em;
  background: var(--accent);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: blink 1s steps(1) infinite;
  box-shadow: 0 0 8px var(--glow);
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* Menu */
.menu {
  list-style: none;
  margin: 6px 0 8px;
  display: grid;
  gap: 4px;
}
.menu a {
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  gap: 12px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.menu a .key { color: var(--accent); font-weight: 600; }
.menu a .desc { color: var(--grey); }
.menu a:hover, .menu a:focus {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--accent-faint);
  outline: none;
  transform: translateX(3px);
}
.menu a:hover .desc, .menu a:focus .desc { color: var(--text); }

/* Content pages */
.content h1 {
  color: var(--accent);
  font-size: 20px;
  margin-bottom: 4px;
  text-shadow: 0 0 12px var(--glow);
}
.content h2 {
  color: var(--accent);
  font-size: 15px;
  margin: 22px 0 8px;
  opacity: 0.85;
}
.content p { margin: 8px 0; color: var(--text); }
.content ul { list-style: none; margin: 8px 0; }
.content li { padding: 4px 0; }
.content li::before { content: "> "; color: var(--accent-dim); }
.content a.inline { color: var(--accent); text-decoration: none; border-bottom: 1px dashed var(--accent-dim); }
.content a.inline:hover { opacity: 0.8; }

.back {
  display: inline-block;
  margin-top: 26px;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--accent-faint);
  padding: 7px 14px;
  border-radius: 6px;
  transition: background 0.12s ease;
}
.back:hover { background: rgba(255, 255, 255, 0.06); }

.footer {
  margin-top: 26px;
  color: var(--grey);
  font-size: 12px;
  border-top: 1px solid var(--accent-faint);
  padding-top: 14px;
}

/* Forms (register + sponsor) — theme-aware via --accent */
#content { opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease; }
.form { display: grid; gap: 14px; max-width: 460px; margin-top: 14px; }
.form label { display: block; color: var(--grey); font-size: 13px; margin-bottom: 5px; }
.form input, .form select, .form textarea {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  border: 1px solid var(--accent-faint);
  border-radius: 6px;
  padding: 10px 12px;
}
.form textarea { resize: vertical; min-height: 78px; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--glow);
}
.form button {
  background: var(--accent);
  color: var(--bg);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 14px;
  border: 0;
  border-radius: 6px;
  padding: 11px 16px;
  cursor: pointer;
  transition: filter 0.12s ease;
}
.form button:hover { filter: brightness(1.1); }
.note { color: var(--grey); font-size: 12px; }
#err { display: none; color: #ff6b6b; }
/* honeypot: kept off-screen for humans, visible to dumb bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form-done { display: none; color: var(--accent); margin-top: 14px; }

/* Primary call-to-action link (register on Luma) */
.cta {
  display: inline-block;
  margin-top: 20px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-radius: 6px;
  padding: 12px 20px;
  transition: filter 0.12s ease;
}
.cta:hover { filter: brightness(1.1); }

/* Ticket tiers on the register page */
.tiers { display: grid; gap: 12px; max-width: 520px; margin-top: 16px; }
.tier {
  border: 1px solid var(--accent-faint);
  border-radius: 6px;
  padding: 12px 14px;
}
.tier .name { color: var(--text); }
.tier .price { color: var(--accent); font-weight: 600; float: right; }
.tier .who { color: var(--grey); font-size: 13px; margin-top: 4px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.card {
  border: 1px solid var(--accent-faint);
  border-radius: 8px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
}
.card h3 { color: var(--accent); font-size: 14px; margin-bottom: 6px; }
.card .meta { color: var(--grey); font-size: 12px; }
.card .status { color: var(--accent-dim); font-size: 12px; margin-top: 8px; }
.card p { margin-top: 8px; margin-bottom: 0; }
.card .avatar {
  width: 72px;
  height: 72px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--accent-faint);
  filter: grayscale(1) contrast(1.05);
  flex-shrink: 0;
}
.card.speaker { display: flex; align-items: center; gap: 14px; }
.card.speaker .speaker-info { min-width: 0; }
.card.speaker h3 .aka { color: var(--grey); font-weight: 400; font-size: 12px; }

@media (max-width: 560px) {
  body { padding: 10px; font-size: 14px; }
  .window { max-height: calc(100dvh - 20px); }
  .screen { padding: 20px 16px 26px; min-height: 380px; }
  .theme-picker .label { display: none; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; opacity: 0.3; }
  .cursor { animation: none; }
}