/* The platform's stylesheet.
 *
 * ONE RULE ORGANISES EVERYTHING HERE:
 *
 *   Newsreader italic, in warm paper-white, is reserved for text a person says
 *   out loud — every question this product generates. IBM Plex (sans for the
 *   interface, mono for codes and data) is everything the machine says.
 *
 * That isn't decoration. The rubric prompt insists a question must be
 * "speakable exactly as written", because the interviewer reads it aloud under
 * time pressure. So generated questions are set like a script: a reading face,
 * generous leading, a short measure, warm against the cool interface around it.
 * If you add a new surface, ask which of the two voices it is and pick the face
 * from that — never from what looks nice in isolation.
 *
 * The palette stays in the side panel's family (same blue, same dark ground) so
 * the site and the plugin read as one product; the interviewer moves between
 * them minutes apart.
 */

:root {
  /* Ground. Deeper than the panel — the site is a room, not a rail. */
  --ink: #0b0d12;
  --ink-raised: #131722;
  --ink-sunk: #070910;

  --rule: #222836;
  --rule-soft: #191e29;

  /* Cool type: the interface's own voice. */
  --paper: #e6e9f0;
  --paper-dim: #949cb0;
  --paper-faint: #767f96;

  /* Warm type: reserved for what gets spoken aloud. Nothing else. */
  --spoken: #f0eadf;

  --accent: #7aa2f7;
  --accent-deep: #2f4372;
  --accent-glow: #7aa2f71a;

  --ok: #5fd08a;
  --ok-deep: #245139;
  --bad: #ef6d6d;
  --bad-deep: #5a2b2b;
  --warn: #e5b567;
  --warn-deep: #4a3d22;

  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --read: "Newsreader", Georgia, "Times New Roman", serif;

  --maxw: 1060px;
  --radius: 12px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The one shared eyebrow. Mono, because it labels — it does not speak. */
.eyebrow {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

/* ── chrome ───────────────────────────────────────────────────────────────── */

.topbar {
  border-bottom: 1px solid var(--rule-soft);
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar .wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 13px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--paper);
  flex: 1;
}
.brand:hover { text-decoration: none; color: var(--paper); }

/* A quote mark, not a generic dot: the product's output is something said. */
.brand-mark {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--accent-deep);
  position: relative;
  flex: none;
}
.brand-mark::after {
  content: "“";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 600 17px/1 var(--read);
  color: var(--accent);
  padding-top: 7px;
}

.who { color: var(--paper-dim); font-size: 13px; }

main { max-width: var(--maxw); margin: 0 auto; padding: 34px 24px 80px; }
/* Pages that own the whole viewport — the landing is one. */
main.full { max-width: none; padding: 0; }

h1 {
  font: 500 26px/1.15 var(--sans);
  letter-spacing: -0.025em;
  margin: 0 0 5px;
}
h2 { font: 500 15px/1.3 var(--sans); margin: 0 0 10px; letter-spacing: -0.01em; }

.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 26px; }
.page-head > div:first-child { flex: 1; min-width: 0; }
.sub { color: var(--paper-dim); font-size: 14px; margin: 0; max-width: 62ch; }

/* ── cards ────────────────────────────────────────────────────────────────── */

.card {
  background: var(--ink-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}
.card > h2 {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: 14px;
}
.card.accent {
  border-color: var(--accent-deep);
  background: linear-gradient(180deg, #161d2e, #131826);
}

/* THE SPOKEN VOICE. Generated questions only. */
.question {
  font: 400 21px/1.5 var(--read);
  font-style: italic;
  font-optical-sizing: auto;
  color: var(--spoken);
  letter-spacing: 0.005em;
  margin: 0;
  max-width: 54ch;
  text-wrap: pretty;
}

.muted { color: var(--paper-dim); font-size: 13px; }
.ok { color: var(--ok); }
.bad { color: var(--bad); }
.empty { color: var(--paper-dim); font-style: italic; }

code {
  font: 400 12.5px/1.4 var(--mono);
  background: var(--ink-sunk);
  border: 1px solid var(--rule-soft);
  padding: 1px 6px;
  border-radius: 5px;
}

.notice {
  background: #211c12;
  border: 1px solid var(--warn-deep);
  color: var(--warn);
  border-radius: 10px;
  padding: 13px 15px;
  font-size: 13.5px;
  margin-bottom: 16px;
}
.notice.error { background: #1f1414; border-color: var(--bad-deep); color: var(--bad); }
.notice strong { display: block; margin-bottom: 3px; }
.notice a { color: inherit; text-decoration: underline; }

/* ── tags & pills ─────────────────────────────────────────────────────────── */

.tag {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-dim);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 5px 10px;
  white-space: nowrap;
}
.tag-scheduled { color: var(--accent); border-color: var(--accent-deep); }
.tag-live { color: var(--ok); border-color: var(--ok-deep); }
.tag-ended { color: var(--paper-faint); }

.rail { display: flex; flex-wrap: wrap; gap: 7px; }
.pill {
  font-size: 12.5px;
  border-radius: 999px;
  padding: 4px 12px;
  border: 1px solid var(--rule);
  background: var(--ink-sunk);
  color: var(--paper-dim);
}
.pill-w3 { color: var(--accent); border-color: var(--accent-deep); }

/* ── event list ───────────────────────────────────────────────────────────── */

.rows { display: flex; flex-direction: column; gap: 10px; }
.row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ink-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px 18px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.row:hover { border-color: #333c4e; transform: translateY(-1px); }
.row .grow { flex: 1; min-width: 0; }
.row .name { font-weight: 500; letter-spacing: -0.01em; font-size: 15.5px; }
.row .name a { color: var(--paper); }
.row .meta { color: var(--paper-dim); font-size: 12.5px; margin-top: 3px; }
.row .meta code { font-size: 11.5px; }

/* ── forms ────────────────────────────────────────────────────────────────── */

label {
  display: block;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: 7px;
}

input[type="text"], input[type="number"], input[type="url"],
input[type="datetime-local"], textarea, select {
  width: 100%;
  background: var(--ink-sunk);
  border: 1px solid var(--rule);
  border-radius: 9px;
  color: var(--paper);
  font: 400 14px/1.5 var(--sans);
  padding: 10px 12px;
  resize: vertical;
  transition: border-color 0.15s ease, background 0.15s ease;
}
input::placeholder, textarea::placeholder { color: var(--paper-faint); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  background: #090c14;
}
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--paper-dim) 50%),
    linear-gradient(135deg, var(--paper-dim) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
  cursor: pointer;
}
/* Meet link is a machine string — show it as one. */
input.mono { font-family: var(--mono); font-size: 13px; letter-spacing: -0.01em; }

.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.hint { color: var(--paper-faint); font-size: 12px; margin: 7px 0 0; }

.or {
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin: 12px 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.or::after { content: ""; flex: 1; height: 1px; background: var(--rule-soft); }

/* Drop target for a PDF. Reads as a slot, not as a browser control. */
.drop {
  position: relative;
  border: 1px dashed var(--rule);
  border-radius: 9px;
  background: var(--ink-sunk);
  padding: 16px;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-glow); }
.drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.drop-label { font-size: 13.5px; color: var(--paper-dim); pointer-events: none; }
.drop-label b { color: var(--paper); font-weight: 500; }
.drop.filled { border-style: solid; border-color: var(--ok-deep); background: #0c1410; }
.drop.filled .drop-label b { color: var(--ok); }

/* Topic checkboxes. The hint is the substance, so it gets the room. */
.topics { display: flex; flex-direction: column; gap: 3px; }
.topic {
  display: flex;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 9px;
  border: 1px solid transparent;
  border-left: 2px solid var(--rule-soft);
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.topic:hover { background: #171c27; }
.topic:has(input:checked) { background: #141a27; border-left-color: var(--accent); }
.topic:has(input:focus-visible) { border-color: var(--accent); }
.topic input { margin: 4px 0 0; flex: none; accent-color: var(--accent); }
.topic .t-label { font-size: 14px; font-weight: 500; }
.topic .t-hint { color: var(--paper-dim); font-size: 12.5px; margin-top: 3px; line-height: 1.5; }
.topic .t-weight {
  font: 500 9.5px/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--paper-faint);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px 6px;
  margin-left: 8px;
  vertical-align: 2px;
}
.topic:has(input:checked) .t-weight { color: var(--accent); border-color: var(--accent-deep); }

/* ── buttons ──────────────────────────────────────────────────────────────── */

button, .btn {
  background: var(--accent);
  color: #0b0d12;
  border: 0;
  border-radius: 9px;
  padding: 11px 18px;
  font: 600 14px/1 var(--sans);
  cursor: pointer;
  display: inline-block;
  transition: filter 0.15s ease, opacity 0.15s ease;
}
button:hover, .btn:hover { filter: brightness(1.08); text-decoration: none; }
button:disabled { opacity: 0.45; cursor: default; filter: none; }

button.secondary, .btn.secondary {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--rule);
}
button.secondary:hover, .btn.secondary:hover { background: #1a2029; filter: none; }

button.ghost {
  background: transparent;
  color: var(--paper-dim);
  border: 1px solid var(--rule);
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 500;
}
button.ghost:hover { background: #1a2029; color: var(--paper); filter: none; }

button.danger { background: transparent; color: var(--bad); border: 1px solid var(--bad-deep); }
button.danger:hover { background: #1f1414; filter: none; }

.actions { display: flex; gap: 12px; align-items: center; margin-top: 22px; }

/* ── extracted-document preview ───────────────────────────────────────────── */

.doc {
  background: var(--ink-sunk);
  border: 1px solid var(--rule-soft);
  border-radius: 9px;
  padding: 14px 16px;
  max-height: 260px;
  overflow-y: auto;
  white-space: pre-wrap;
  font: 400 12.5px/1.6 var(--mono);
  color: #b9c0cf;
}
.src { font: 500 10px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.src-pdf { color: var(--ok); }
.src-llm { color: var(--warn); }
.src-typed { color: var(--paper-dim); }
.src-failed { color: var(--bad); }

.plan { margin: 0; padding-left: 22px; }
.plan li { margin-bottom: 10px; font: 400 16px/1.55 var(--read); color: var(--spoken); }
.plan li::marker { font-family: var(--mono); font-size: 11px; color: var(--paper-faint); }

.rubric-item { border-top: 1px solid var(--rule-soft); padding-top: 15px; margin-top: 15px; }
.rubric-item:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.rubric-item h3 { font: 500 14px/1.3 var(--sans); margin: 0 0 6px; }
.rubric-item ul { margin: 7px 0 0; padding-left: 20px; font-size: 13.5px; color: #b9c0cf; }
.rubric-item li { margin-bottom: 5px; }

/* ══ LANDING ══════════════════════════════════════════════════════════════════

   The page is a specimen. Its whole argument is one question that could only be
   asked of one candidate — so the question gets the page, and signing in is a
   quiet affordance beneath it.                                                */

.hero-wrap {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 48px 24px;
}
.hero { width: 100%; max-width: 680px; }

.hero-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 52px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hero-claim {
  font: 500 30px/1.22 var(--sans);
  letter-spacing: -0.03em;
  margin: 0 0 34px;
  max-width: 17ch;
}

/* The loop, played out. Two voices, two type treatments:
   `.heard` is transcription — cool, small, Plex, arriving progressively.
   `.said`  is what the product writes for you to speak — warm, Newsreader. */
.flow {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-left: 2px;
}

.beat {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.beat.in { opacity: 1; transform: none; }

/* Same speaker chips as the panel's transcript, so the demo and the product
   are visibly the same thing. */
.who {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 3px;
  border-radius: 5px;
  font: 500 10px/19px var(--mono);
  text-align: center;
  background: var(--ink-sunk);
  border: 1px solid var(--rule);
  color: var(--paper-faint);
}
.who-c { color: var(--accent); border-color: var(--accent-deep); }

.heard {
  margin: 0;
  font: 400 14px/1.6 var(--sans);
  color: var(--paper-dim);
  min-height: 1.6em;
}
.heard.typing::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 1em;
  margin-left: 2px;
  background: var(--accent);
  vertical-align: -0.16em;
  animation: caret 0.9s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.said {
  margin: 0;
  font: 400 18px/1.5 var(--read);
  font-style: italic;
  font-optical-sizing: auto;
  color: var(--spoken);
  text-wrap: pretty;
}

/* A card beat is the product speaking up, so it indents past the speaker rail
   and carries the panel's own card treatment. */
.card-beat { padding-left: 32px; }
.minicard {
  flex: 1;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--ink-raised);
  padding: 14px 16px;
}
.minicard.accent {
  border-color: var(--accent-deep);
  background: linear-gradient(180deg, #161d2e, #131826);
}
.minicard .eyebrow { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }

.minicard .chip,
.minicard .flag {
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-style: normal;
  border-radius: 999px;
  padding: 4px 7px;
  border: 1px solid var(--rule);
  color: var(--paper-dim);
}
.minicard .chip { color: var(--accent); border-color: var(--accent-deep); }
.flag-vague { color: var(--warn); border-color: var(--warn-deep); }
.flag-strong { color: var(--ok); border-color: var(--ok-deep); }

.hero-cite {
  margin: 30px 0 0;
  padding-left: 15px;
  border-left: 1px solid var(--rule);
  font: 400 12px/1.7 var(--mono);
  color: var(--paper-faint);
}
.hero-cite span { color: var(--paper-dim); display: block; }

.replay {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 8px;
  font: 400 12px/1.7 var(--mono);
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.replay:hover { filter: none; background: none; }

/* Deliberately NOT animated. The reveal above is the argument's; this is the
   page's actual job, and a sign-in button that fades in after two seconds is a
   button that isn't there when someone reaches for it. */
.hero-foot {
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.hero-foot .lede { flex: 1; min-width: 210px; font-size: 13.5px; color: var(--paper-dim); }

.gbtn {
  background: var(--paper);
  color: #16181d;
  border: 0;
  border-radius: 9px;
  padding: 12px 18px;
  font: 600 14px/1 var(--sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.gbtn:hover { filter: brightness(0.94); }
.gbtn svg { flex: none; }

.hero-status { margin: 14px 0 0; font-size: 12.5px; color: var(--paper-dim); }
.hero-status.bad { color: var(--bad); }

@media (prefers-reduced-motion: reduce) {
  /* The flow's JS already renders every beat immediately; this is the belt to
     that braces, in case the script never runs at all. */
  .beat { opacity: 1; transform: none; transition: none; }
  .heard.typing::after { display: none; }
  .row:hover { transform: none; }
}

/* ══ COMPOSE (new interview) ══════════════════════════════════════════════════

   Two columns: the fields, and a rail that assembles the interview as you type.
   The rail exists for one reason — the Meet code is the join between this site
   and the plugin, and it is parsed out of whatever you paste. Showing that parse
   resolve, live, is the difference between trusting the gate and guessing.     */

.compose { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 26px; align-items: start; }
.compose-fields { min-width: 0; }

.rail-card {
  position: sticky;
  top: 88px;
  background: var(--ink-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px;
}
.rail-card > .eyebrow { display: block; margin-bottom: 15px; }

.summary { display: flex; flex-direction: column; gap: 0; margin-bottom: 18px; }
.sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 13px;
}
.sum:last-child { border-bottom: 0; }
.sum dt { color: var(--paper-faint); font: 400 12px/1.4 var(--sans); }
.sum dd { margin: 0; text-align: right; color: var(--paper); min-width: 0; }
.sum dd.pending { color: var(--paper-faint); font-style: italic; }
.sum dd.code { font: 500 12.5px/1.4 var(--mono); color: var(--ok); letter-spacing: -0.01em; }
.sum dd.code.invalid { color: var(--bad); font-style: normal; }

.rail-card button[type="submit"] { width: 100%; }
.rail-note { margin: 11px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--paper-faint); }

/* Honest waiting: real elapsed seconds, no invented progress bar. */
.building { display: none; align-items: center; gap: 9px; margin-top: 11px; font-size: 12px; color: var(--paper-dim); }
.building.on { display: flex; }
.spinner {
  width: 12px;
  height: 12px;
  flex: none;
  border: 1.5px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

@media (max-width: 900px) {
  .compose { grid-template-columns: 1fr; }
  .rail-card { position: static; }
}
@media (max-width: 620px) {
  main { padding: 24px 18px 60px; }
  .grid2 { grid-template-columns: 1fr; }
  .row { flex-wrap: wrap; }
  .hero-claim { font-size: 24px; max-width: none; }
  .hero-mark { margin-bottom: 36px; }
}

/* ── edit mode ────────────────────────────────────────────────────────────── */

/* What is already stored on this interview. Without this an untouched file
   input reads as "nothing attached", and people re-upload a resume that was
   never lost. */
.kept {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 13px;
  margin-bottom: 12px;
  border: 1px solid var(--rule-soft);
  border-left: 2px solid var(--ok-deep);
  border-radius: 8px;
  background: var(--ink-sunk);
  font-size: 12.5px;
  color: var(--paper-dim);
}

/* Shown only once something the rubric actually depends on has moved. */
.rewrite {
  display: none;
  padding: 11px 13px;
  margin-bottom: 14px;
  border: 1px solid var(--warn-deep);
  border-radius: 9px;
  background: #1c1810;
}
.rewrite.on { display: block; }
.rewrite .eyebrow { color: var(--warn); display: block; margin-bottom: 5px; }
.rewrite p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--paper-dim); }

/* Lets a label carry a lowercase aside without breaking the mono-caps rule. */
label .lc { text-transform: none; letter-spacing: 0; }