/* Humans v Robots chrome for the open Drafting Table. Loaded after styles.css.
   Scoped to the open-* pages only, so cohort pages keep the neutral styling. */

:root {
  --black: #0B0B0B;
  --volt: #C8FF3D;
  --hot: #FF5A1F;
  --paper: #FFFFFF;
  --panel: #17170F;
  --volt-ink: #4F6B00;
  --ink70: rgba(11,11,11,.72);
  --ink55: rgba(11,11,11,.55);
  --disp: 'Bricolage Grotesque', Georgia, serif;
  --body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --text: #0B0B0B;
  --muted: rgba(11,11,11,.55);
  --accent: #0B0B0B;
}

/* Background is deliberately left alone: open-builder sets its own paper ground. */
body {
  font-family: var(--body);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.7rem;
  border-bottom: 2px solid var(--black);
  padding-bottom: 0.7rem;
  margin-bottom: 1.25rem;
}
.site-header .back-link {
  flex-basis: 100%;
  order: -1;
  margin-bottom: 0.15rem;
  font-family: var(--body);
  font-weight: 500;
  color: var(--ink55);
}
.site-header .back-link:hover { color: var(--black); }

.hvr-lockup {
  display: inline-flex;
  align-items: baseline;
  gap: .06em;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--black);
  white-space: nowrap;
  line-height: 1;
}
.hvr-mk {
  width: .62em;
  height: .62em;
  margin: 0 .2em;
  display: inline-block;
  vertical-align: baseline;
  transform: translateY(.02em);
  color: var(--black);
  overflow: visible;
  --head: var(--hot);
}

.site-header h1 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  color: var(--black);
  border-left: 2px solid rgba(11,11,11,.18);
  padding-left: 0.7rem;
  line-height: 1;
}
.site-header .sub {
  flex-basis: 100%;
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink55);
  margin-top: 0.35rem;
}

/* ── Type ─────────────────────────────────────────────────────────────────── */
.greeting,
.chat-done-heading,
.build-plan-title,
.handoff-title,
#reveal-gate h3 {
  font-family: var(--disp);
  font-weight: 800;
  letter-spacing: -.02em;
}
.msg-role,
.card h2,
.trio-label {
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: .18em;
}

a { color: var(--volt-ink); }
a:hover { color: var(--black); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--body);
  font-weight: 700;
  border-radius: 0;
  border: 2px solid var(--black);
  min-height: 44px;
}
.btn-primary {
  background: var(--black);
  color: var(--paper);
  box-shadow: none;
}
.btn-primary:hover { background: var(--panel); border-color: var(--panel); }
.btn-primary:disabled { opacity: .38; cursor: default; }
.btn-secondary {
  background: var(--paper);
  color: var(--black);
  border-color: var(--black);
}
.btn-secondary:hover { background: var(--black); color: var(--paper); }
.btn-ghost { border: none; min-height: 0; color: var(--ink55); }

/* The one volt field on the page. Black type on volt is 15.1:1. */
#claim-btn.btn-primary {
  background: var(--volt);
  color: var(--black);
  border-color: var(--black);
}
#claim-btn.btn-primary:hover {
  background: var(--black);
  color: var(--paper);
  border-color: var(--black);
}

/* ── Chat ─────────────────────────────────────────────────────────────────── */
#chat-panel {
  border: 2px solid var(--black);
  border-radius: 0;
}
#messages { background: #FAFAF7; }
.msg-text { border-radius: 0; }
.msg.user .msg-text { background: var(--black); color: var(--paper); }
#chat-input {
  font-family: var(--body);
  border-radius: 0;
  border: 2px solid rgba(11,11,11,.18);
}
#chat-input:focus { border-color: var(--black); }
.chat-input-area { border-top: 2px solid var(--black); }
.btn-mic { border-radius: 0; border: 2px solid var(--black); background: var(--paper); }
.btn-mic:hover { background: #f2f2ec; }

/* ── Gate ─────────────────────────────────────────────────────────────────── */
.reveal-fields input {
  font-family: var(--body);
  border-radius: 0;
  border: 2px solid rgba(11,11,11,.18);
}
.reveal-fields input:focus { border-color: var(--black); }

/* ── Badges, cards, footer ────────────────────────────────────────────────── */
.fluency-badge {
  border-radius: 0;
  background: var(--volt);
  color: var(--black);
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: .14em;
}
.card, details.came-in-with, .handoff-prompt {
  border-radius: 0;
  border: 2px solid rgba(11,11,11,.18);
}
.build-plan-heading { border-left: 4px solid var(--hot); border-radius: 0; background: #FAFAF7; }
.chat-done-icon { color: var(--volt-ink); }

footer {
  border-top: 2px solid var(--black);
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: .04em;
  color: var(--ink55);
}
footer .hvr-lockup { font-size: 0.85rem; color: var(--ink70); }
footer .hvr-mk { color: var(--ink70); }