/* Fifth Circle — record.css: the site's paper, after tokens.css. The video's paper, in CSS. */
@import url("./tokens.css");

html { background: var(--paper); }
body {
  margin: 0; padding: 0 1rem;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-text); font-size: 1.125rem; line-height: 1.55;
}
h1, h2, h3, .display { font-family: var(--font-display); font-weight: 400; color: var(--ink); letter-spacing: 0.01em; line-height: 1.08; }
h1 { font-size: 2.75rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; }
p { margin: 0 0 1em; }
a { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: 0.15em; }
hr, .hairline { border: 0; border-top: 1px solid var(--rule); margin: 1.5rem 0; }
.label, .sc, th, dt, .running-head, .kicker {
  font-family: var(--font-sc); font-weight: 600; letter-spacing: 0.14em; text-transform: lowercase; color: var(--ink-muted);
}
.epigraph { font-family: var(--font-epigraph); font-style: italic; font-weight: 600; color: var(--ink); }
.muted, .past { color: var(--ink-muted); }
.domain { font-family: var(--font-sc); font-weight: 600; letter-spacing: 0.1em; }

/* seats: a turn in the record carries its seat's ink; Hal's words on paper use the darkened amber */
.seat-secretary { color: var(--seat-secretary); } .seat-chair { color: var(--seat-chair); }
.seat-activist { color: var(--seat-activist); } .seat-treasurer { color: var(--seat-treasurer); }
.seat-hal { color: var(--hal-on-paper); }
.swatch { display: inline-block; width: 0.9em; height: 0.9em; vertical-align: -0.1em; margin-right: 0.4em; }
.swatch.hal { background: var(--hal-amber); outline: 1px solid var(--ink); }

/* the ticket — the object. Card stock, ink rule, a perforated left edge (repeating radial gradient). */
.ticket {
  position: relative; background: var(--paper-deep); border: 2px solid var(--ink);
  padding: 1.5rem 1.75rem 1.5rem 3.25rem; margin: 1.5rem 0; max-width: 40rem;
}
.ticket::before {
  content: ""; position: absolute; left: 0.9rem; top: 0.75rem; bottom: 0.75rem; width: 0.5rem;
  background: radial-gradient(circle at 50% 50%, var(--rule) 0 0.16rem, transparent 0.17rem) 0 0 / 0.5rem 0.9rem repeat-y;
}
.ticket .label { display: block; margin-bottom: 0.4rem; }
.ticket .number { font-family: var(--font-display); font-size: 2.5rem; line-height: 1; margin: 0 0 0.6rem; }
.ticket .question { font-family: var(--font-text); font-style: italic; font-size: 1.25rem; margin: 0 0 0.8rem; }
.ticket .meta { font-family: var(--font-sc); letter-spacing: 0.08em; font-size: 0.8rem; color: var(--ink-muted); }
.ticket .stamp { position: absolute; right: 1rem; top: 0.75rem; }

/* the ledger card */
.ledger { background: var(--paper-deep); border: 1px solid var(--rule); padding: 1rem 1.25rem; max-width: 26rem; }
.ledger table { border-collapse: collapse; width: 100%; }
.ledger th, .ledger td { padding: 0.35rem 0; border-bottom: 1px solid var(--rule); text-align: right; }
.ledger th:first-child, .ledger td:first-child { text-align: left; }

/* the three verdict stamps (D137): display caps in a double rule, rotated, in ink. PNGs in kit/stamps/ are the same. */
.stamp-upheld, .stamp-note, .stamp-overruled {
  display: inline-block; font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.08em; line-height: 1;
  color: var(--ink); padding: 0.45em 0.7em; border: 3px double var(--ink); border-radius: 0.35em;
  transform: rotate(-8deg); opacity: 0.86; white-space: nowrap;
}
.stamp-upheld::after { content: "UPHELD"; }
.stamp-note::after { content: "UPHELD WITH A NOTE"; }
.stamp-overruled::after { content: "OVERRULED"; }

/* the ruling: Hal's terminal is the one surface that is not paper — amber on the measured black */
.ruling { background: var(--hal-black); color: var(--hal-amber); font-family: "VT323", "IBM Plex Mono", monospace; padding: 1.5rem; }

/* the clock is typographic, never a color: past the bell, struck through in the speaker's own ink */
.past-bell { text-decoration: line-through; text-decoration-thickness: 2px; }
.margin-clock { font-family: var(--font-sc); font-size: 0.8em; letter-spacing: 0.1em; color: var(--ink-muted); }

/* Phase 4-form-scanner — the door: the blank-ticket form, additive to .ticket above. */
.door { display: flex; gap: 2rem; flex-wrap: wrap; align-items: flex-start; }
.door-form { flex: 1 1 22rem; }
.door-form .field { display: block; margin: 0 0 1rem; }
.door-form label { display: block; font-family: var(--font-sc); font-size: 0.8rem; letter-spacing: 0.08em; margin-bottom: 0.3rem; }
.door-form textarea, .door-form input[type="text"], .door-form input[type="email"] {
  width: 100%; box-sizing: border-box; font-family: var(--font-text); font-size: 1rem;
  background: var(--paper-deep); color: var(--ink); border: 1px solid var(--rule); padding: 0.5rem 0.6rem;
}
.door-form textarea { min-height: 6rem; resize: vertical; }
.door-form .check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; margin: 0 0 0.5rem; }
.door-form .charcount { font-family: var(--font-sc); font-size: 0.75rem; color: var(--ink-muted); text-align: right; display: block; }
.door-form .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.door-form button { font-family: var(--font-sc); letter-spacing: 0.06em; font-size: 0.95rem; padding: 0.6rem 1.2rem;
  background: var(--ink); color: var(--paper); border: 0; cursor: pointer; }
.door-form button:disabled { opacity: 0.5; cursor: default; }
.door-form .consent { font-size: 0.85rem; color: var(--ink-muted); margin: 0.8rem 0; }
.door-side { flex: 1 1 16rem; }
.door-side .bag-count { font-family: var(--font-display); font-size: 2rem; margin: 0 0 0.2rem; }
.door-result { display: none; }
.door-result.shown { display: block; }
.door-error { color: var(--seat-chair); font-size: 0.9rem; display: none; }
.door-error.shown { display: block; }

footer, .footer { border-top: 1px solid var(--rule); margin-top: 2rem; padding-top: 0.75rem; font-style: italic; color: var(--ink-muted); }