/* Boffin Hub brand tokens - matched exactly to boffinhubsite/index.html
   :root so this page merges cleanly later (SPEC.md 16.3/17.1). The three
   extras (--live-green/--error-red/--gold*) are voice-page-only. Status
   colours carry WCAG AA (4.5:1) values for text use in BOTH schemes:
   green 5.41:1/#FDFAF5 light, 9.25:1/#120D06 dark; error 6.13/6.36;
   rust as button fill 5.46/6.52; gold under --ink text 11.15/5.17
   (computed 2026-09-10, see 2026-09-10-design-compliance-gap-analysis.md). */
:root {
  --cream: #F5EFE3;
  --cream-dark: #EDE5D4;
  --ink: #1A1108;
  --ink-muted: #5C4D3A;
  --ink-soft: #6E5F4A;
  --rust: #B04422;
  --rust-ink: #B04422;
  --rust-dark: #A8421F;
  --white: #FDFAF5;
  --live-green: #267347;
  --error-red: #B03022;
  --gold: #E9C46A;
  --gold-focus: #E9C46A; /* consent outline sits on the dark backdrop in both schemes */
  --backdrop: rgba(26, 17, 8, 0.68);
  --border: rgba(26, 17, 8, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root {
    --cream: #1A1108;
    --cream-dark: #261A0C;
    --ink: #F0E8D8;
    --ink-muted: #C8B49A;
    --ink-soft: #A6957C;
    --rust: #E07A52;
    --rust-ink: #E07A52;
    --rust-dark: #EA8A63;
    --white: #120D06;
    --live-green: #7CC29A;
    --error-red: #E8705D;
    --gold: #7A5B14;
    --border: rgba(240, 232, 216, 0.16);
  }
}

/* Keyboard focus ring: rust clears 3:1 against cream/white panels in both
   schemes (4.96:1 light, 6.27:1 dark). */
:focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 2px;
}

/* Motion clarifies, never decorates; honour the OS reduce setting for the
   two looping animations (status pulse, level meter bounce). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .status-dot, .level-bar { animation: none; }
  .talk-btn { transition: none; }
}

* { box-sizing: border-box; }

/* Several elements below set an explicit `display` (grid/flex) at equal CSS
   specificity to the UA [hidden] rule - author styles win that tie, so
   without this override, setting the `hidden` attribute silently fails to
   hide them. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Header */
.bh-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.bh-logo {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 20px;
}

main {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px 120px;
}

/* Hero */
.hero {
  text-align: center;
  padding: 64px 0 40px;
}
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rust-ink);
  margin: 0 0 20px;
}
.hero h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.hero-sub {
  font-size: 17px;
  color: var(--ink-muted);
  max-width: 460px;
  margin: 0 auto 32px;
}

.talk-btn {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--white);
  background: var(--ink);
  border: none;
  border-radius: 999px;
  padding: 20px 40px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.talk-btn:hover { background: var(--rust); transform: translateY(-1px); }
.talk-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.talk-btn-icon {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: currentColor;
}

.link-btn {
  display: block;
  margin: 16px auto 0;
  background: none;
  border: none;
  color: var(--ink-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

.permission-hint {
  max-width: 420px;
  margin: 20px auto 0;
  font-size: 14px;
  color: var(--error-red);
}

/* Call surface */
.call-surface {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-top: 8px;
  background: var(--white);
}
.call-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-muted);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.status-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ink-soft);
}
.status-idle { background: var(--ink-soft); }
.status-connecting { background: var(--rust-ink); animation: pulse 1s ease-in-out infinite; }
.status-live { background: var(--live-green); box-shadow: 0 0 6px var(--live-green); }
.status-error { background: var(--error-red); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.call-timer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}
.call-timer.warning { color: var(--error-red); }

.call-controls { margin-left: auto; display: flex; gap: 8px; }
.icon-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.icon-btn:hover { background: var(--cream-dark); }
.icon-btn:active { background: var(--border); }
.icon-btn[aria-pressed="true"] { background: var(--cream-dark); }
.end-btn { color: var(--error-red); border-color: var(--error-red); }

.level-meter {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 20px;
  margin-bottom: 12px;
}
.level-bar {
  width: 4px;
  height: 6px;
  background: var(--rust-ink);
  border-radius: 2px;
  animation: levelBounce 1.1s ease-in-out infinite;
}
.level-bar:nth-child(2) { animation-delay: 0.1s; }
.level-bar:nth-child(3) { animation-delay: 0.2s; }
.level-bar:nth-child(4) { animation-delay: 0.3s; }
.level-bar:nth-child(5) { animation-delay: 0.4s; }
@keyframes levelBounce { 0%, 100% { height: 6px; } 50% { height: 18px; } }

.transcript {
  height: 260px;
  overflow-y: auto;
  padding: 8px 4px;
  font-size: 16px;
}
.transcript .turn { margin-bottom: 8px; }
.transcript .turn .who {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 2px;
}
.transcript .turn.dave .who { color: var(--rust-ink); }
.transcript .turn.system .who { color: var(--error-red); }

.text-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.text-form input {
  flex: 1;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--cream);
  color: var(--ink);
}
.text-form button {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 8px;
  border: none;
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
}
.text-form button:hover { background: var(--rust); }

.call-notice {
  margin: 12px 0 0;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--cream-dark);
  font-size: 14px;
  color: var(--ink-muted);
}
.call-notice.error { background: rgba(176, 48, 34, 0.1); color: var(--error-red); }

/* Brief + conversion panels */
.panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}
.brief-panel, .conversion-panel {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  background: var(--white);
}
.brief-panel h2, .conversion-panel h2 {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  margin: 0 0 16px;
}
.brief-panel dt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-top: 16px;
}
.brief-panel dt:first-child { margin-top: 0; }
.brief-panel dd {
  margin: 4px 0 0;
  font-size: 16px;
}
.brief-empty { color: var(--ink-soft); font-style: italic; }

.conversion-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.conversion-tab {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}
.conversion-tab:hover { background: var(--cream-dark); }
.conversion-tab.active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.conversion-form { display: flex; flex-direction: column; gap: 8px; }
.conversion-form label {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 8px;
}
.conversion-form input[type="text"],
.conversion-form input[type="email"] {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--cream);
  color: var(--ink);
}
.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
}
.consent-label input { margin-top: 4px; }
.conversion-form button {
  margin-top: 12px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  border: none;
  background: var(--rust);
  color: var(--white);
  cursor: pointer;
}
.conversion-form button:hover { background: var(--rust-dark); }
.conversion-form button:disabled { opacity: 0.6; cursor: default; }

.conversion-result {
  margin: 16px 0 0;
  font-size: 14px;
  min-height: 1.2em;
}
.conversion-result.ok { color: var(--live-green); }
.conversion-result.error { color: var(--error-red); }

/* Footer */
.bh-footer {
  border-top: 1px solid var(--border);
  padding: 20px 24px 40px;
  text-align: center;
}
.bh-footer p {
  max-width: 560px;
  margin: 0 auto;
  font-size: 14px;
  color: var(--ink-soft);
}
.bh-footer a { color: var(--rust-ink); }

/* Mobile */
@media (max-width: 768px) {
  main { padding: 0 16px 140px; }
  .hero { padding: 40px 0 28px; }
  .hero h1 { font-size: clamp(26px, 7vw, 36px); }
  .panels { grid-template-columns: 1fr; }

  /* Bottom-anchored talk button while idle, thumb-reachable (SPEC 5.1 #2) */
  body:has(#callSurface[hidden]) .talk-btn {
    position: fixed;
    left: 16px; right: 16px; bottom: 20px;
    z-index: 20;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(26, 17, 8, 0.25);
  }
  body:has(#callSurface[hidden]) .hero { padding-bottom: 100px; }
}