/* Theme layer — loaded after event.css.
   LIGHT is the default: these rules re-surface the dark bands (gate, topbar,
   hero, footer) in cream with ink text. Dark mode restores the base design in
   event.css untouched, so it needs no overrides here. Intentional dark accents
   (event summary, room panel, prompt boxes, video placeholder) stay dark in
   both themes. Toggle: html[data-theme="dark"], persisted as tvf_theme. */

html:not([data-theme="dark"]) body { background: var(--page); color: var(--ink); }

html:not([data-theme="dark"]) .gate { background: var(--cream); color: var(--ink); }
html:not([data-theme="dark"]) .gate-header { border-bottom-color: rgba(10, 10, 10, 0.12); }
html:not([data-theme="dark"]) .brand-wordmark { color: var(--ink); }
html:not([data-theme="dark"]) .event-state { color: #8a847b; }
html:not([data-theme="dark"]) .gate-intro h1 { color: var(--ink); }
html:not([data-theme="dark"]) .gate-copy { color: #5f584f; }
html:not([data-theme="dark"]) .gate-card {
  border-color: rgba(10, 10, 10, 0.12);
  background: var(--surface);
}
html:not([data-theme="dark"]) .form-intro { color: #5f584f; }
html:not([data-theme="dark"]) label { color: var(--ink); }
html:not([data-theme="dark"]) input {
  border-color: rgba(10, 10, 10, 0.28);
  background: var(--surface);
  color: var(--ink);
}
html:not([data-theme="dark"]) input::placeholder { color: #8a847b; }
html:not([data-theme="dark"]) .form-message { color: #5f584f; }
html:not([data-theme="dark"]) .gate-details { border-top-color: rgba(10, 10, 10, 0.12); }
html:not([data-theme="dark"]) .gate-details dt { color: #8a847b; }
html:not([data-theme="dark"]) .gate-details dd { color: var(--ink); }
html:not([data-theme="dark"]) .wifi-banner,
html:not([data-theme="dark"]) .topbar-wifi { color: var(--ink); background: rgba(240, 154, 26, 0.10); }
html:not([data-theme="dark"]) .wifi-details > span { color: #5f584f; }
html:not([data-theme="dark"]) .wifi-details b,
html:not([data-theme="dark"]) .wifi-details i { color: #8a847b; }
html:not([data-theme="dark"]) .wifi-password { color: var(--ink); }

html:not([data-theme="dark"]) .topbar {
  background: var(--cream);
  border-bottom-color: rgba(10, 10, 10, 0.12);
}
html:not([data-theme="dark"]) .portal-nav { border-top-color: rgba(10, 10, 10, 0.12); }
html:not([data-theme="dark"]) .portal-nav > a { color: #8a847b; }
html:not([data-theme="dark"]) .portal-nav > a:hover,
html:not([data-theme="dark"]) .portal-nav > a[aria-current="location"] { color: var(--ink); }
html:not([data-theme="dark"]) .text-button { color: #8a847b; }
html:not([data-theme="dark"]) .text-button:hover { color: var(--ink); }
html:not([data-theme="dark"]) .presenter .brand-wordmark { color: var(--on-dark); }
html:not([data-theme="dark"]) .portal-hero { background: var(--cream); color: var(--ink); }
html:not([data-theme="dark"]) .welcome-copy { color: #5f584f; }
html:not([data-theme="dark"]) .hero-event-details { border-color: rgba(10, 10, 10, 0.12); }
html:not([data-theme="dark"]) .hero-event-details dt { color: #8a847b; }
html:not([data-theme="dark"]) .hero-event-details dd { color: var(--ink); }
html:not([data-theme="dark"]) .footer {
  background: var(--cream);
  border-top: 0.5px solid rgba(10, 10, 10, 0.12);
  color: #8a847b;
}
html:not([data-theme="dark"]) .loading-card { color: #5f584f; }
html[data-theme="dark"] { color-scheme: dark; }

.event-recording { margin-bottom: 28px; padding: 22px; border: .5px solid var(--rule); background: var(--surface); }
.event-recording > div { margin-bottom: 18px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.event-recording h3 { margin: 0; font-size: 28px; }
.event-recording iframe { width: 100%; aspect-ratio: 16/9; display: block; border: 0; background: var(--dark); }

/* Layout for the header controls added with the theme toggle */
.gate-header-right { display: flex; align-items: center; gap: 24px; }
.topbar-actions { display: flex; align-items: center; gap: 28px; }

/* Workshop files — setup steps, prompts, folder map (content area is light in
   both themes, so these are theme-independent) */
.setup-note, .setup-steps, .build-steps, .folder-map { margin-top: 24px; }
.setup-note { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.setup-steps .simple-card p { margin-bottom: 10px; }
.setup-steps .simple-card p:last-child { margin-bottom: 0; }

/* Prompt boxes stay dark in both themes — matches the course deck. */
.prompt-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 4px 0 12px;
  padding: 16px 18px;
  background: var(--dark);
  border-left: 2px solid var(--amber);
}
.prompt-box code {
  color: var(--cream);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.copy-prompt {
  flex-shrink: 0;
  min-height: 40px;
  padding: 8px 16px;
  border: 0.5px solid rgba(255, 255, 255, 0.30);
  background: transparent;
  color: var(--cream);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 120ms linear, color 120ms linear;
}
.copy-prompt:hover, .copy-prompt.copied { border-color: var(--amber); color: var(--amber); }

.folder-tree {
  margin: 0 0 12px;
  padding: 18px;
  overflow-x: auto;
  border: 0.5px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.9;
}

@media (max-width: 920px) {
  .setup-note, .setup-steps, .build-steps, .folder-map { margin-top: 0; }
}

@media (max-width: 640px) {
  .gate-header { padding-block: 12px; flex-wrap: wrap; row-gap: 8px; }
  .gate-header-right { width: 100%; justify-content: space-between; }
  .gate-header-right { gap: 14px; }
  .setup-note { grid-template-columns: 1fr; }
  .prompt-box { flex-direction: column; align-items: stretch; }
}