/* One stylesheet, no framework, no fonts to fetch. A candidate on a slow connection in
   Nairobi or Lagos should get a usable page on the first paint, because their five minutes
   start when the page is ready, not when it finishes loading assets. */

:root {
  color-scheme: light dark;
  --bg: #f6f6f4;
  --card: #ffffff;
  --ink: #1a1a18;
  --muted: #6b6b66;
  --line: #e2e2dd;
  --accent: #1f5f4f;
  --accent-ink: #ffffff;
  --warn: #9a5b12;
  --danger: #a3231d;
  --focus: #2f7fd8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16171a;
    --card: #1e2024;
    --ink: #ececea;
    --muted: #9b9b96;
    --line: #32353a;
    --accent: #4bab90;
    --accent-ink: #10221c;
    --warn: #e0a45c;
    --danger: #e8756c;
    --focus: #6fb1f0;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.75rem;
}

@media (max-width: 30rem) {
  .wrap { padding: 1.25rem 0.75rem 3rem; }
  .card { padding: 1.15rem; border-radius: 10px; }
}

h1 { font-size: 1.35rem; line-height: 1.35; margin: 0 0 0.85rem; font-weight: 650; }
.sub { font-size: 0.95rem; font-weight: 700; margin: 1.4rem 0 0.4rem; }
.prompt { font-size: 1.2rem; margin-bottom: 0.6rem; }
p { margin: 0 0 0.9rem; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.rules { margin: 0 0 1.1rem; padding-left: 1.15rem; }
.rules li { margin-bottom: 0.55rem; }

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.bar.bottom {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.commit { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-left: auto; }
.actions:empty { display: none; }
.card > .actions { margin-top: 1rem; }

.progress { font-size: 0.85rem; font-weight: 600; color: var(--muted); }

.clock-wrap { display: inline-flex; align-items: baseline; gap: 0.5rem; }
.clock-label:empty { display: none; }
.clock {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.clock.warn { color: var(--warn); border-color: currentColor; }
.clock.danger { color: var(--danger); border-color: currentColor; }

/* Segmented progress. Each segment's width is its share of the recommended time, not an equal
   slice, so the bar answers "how much is left" rather than "how many questions are left". */
.track { display: flex; gap: 3px; margin-bottom: 0.5rem; }
.seg {
  position: relative;
  flex-basis: 0;
  height: 1.45rem;
  border-radius: 5px;
  background: var(--line);
  overflow: hidden;
}
.seg-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--accent);
  transition: width 0.3s ease;
}
.seg-tag {
  position: relative;
  display: block;
  padding: 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.45rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
}
.seg.current { box-shadow: inset 0 0 0 1.5px var(--accent); }
.seg.current .seg-tag, .seg.done .seg-tag { color: var(--ink); }
/* The finished segment is solid accent, so its label has to flip to read against it. */
.seg.done .seg-tag { color: var(--accent-ink); }

.track-note { margin: 0 0 1.35rem; line-height: 1.5; }

.context { font-size: 0.92rem; margin-bottom: 1rem; }

/* The brief: reference material that stays put while the candidate works through a part. It
   is visually recessed so the question itself stays the thing you read first. */
.brief {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.1rem 0.6rem;
  margin: 0 0 1.5rem;
  font-size: 0.92rem;
}
.brief-h {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 0.7rem;
}
/* pre-line, so a multi-paragraph memo written with blank lines in the builder reads as
   paragraphs rather than collapsing into one block. */
.brief p { margin: 0 0 0.75rem; white-space: pre-line; }
.brief-sub {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 1.1rem 0 0.45rem;
}
.brief-sub:first-of-type { margin-top: 0.2rem; }
.brief ul { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.brief ul li { margin-bottom: 0.3rem; }
.brief-table { overflow-x: auto; margin: 0 0 0.85rem; }
.brief-table table { border-collapse: collapse; width: 100%; font-size: 0.86rem; }
.brief-table th, .brief-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.35rem 0.55rem;
  border-bottom: 1px solid var(--line);
}
.brief-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.quote {
  margin: 0 0 0.85rem;
  padding: 0.7rem 0.85rem;
  border-left: 3px solid var(--accent);
  background: var(--card);
  border-radius: 0 6px 6px 0;
}
.quote figcaption {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.quote p { font-style: italic; margin-bottom: 0.5rem; }
.quote ol { margin: 0 0 0.5rem; padding-left: 1.2rem; }
.quote ol li { font-style: italic; margin-bottom: 0.45rem; }
.quote > p:last-child { margin-bottom: 0; }

.datalink {
  display: inline-block;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 7px;
  padding: 0.5rem 0.85rem;
  margin-bottom: 0.85rem;
}
.datalink:hover { filter: brightness(1.08); }
.datalink::after { content: " ↗"; }

.stack { display: grid; gap: 0.35rem; margin-bottom: 0.4rem; }
.lbl { font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-top: 0.55rem; }

input[type="text"], input[type="email"], textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
}
textarea { min-height: 11rem; resize: vertical; line-height: 1.5; }
input:focus-visible, textarea:focus-visible, button:focus-visible, label:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.opts { display: grid; gap: 0.5rem; }
.opt {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  background: var(--bg);
}
.opt:hover { border-color: var(--accent); }
.opt input { margin: 0.25rem 0 0; flex: none; accent-color: var(--accent); }
.opt.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.counter { font-size: 0.78rem; color: var(--muted); text-align: right; margin: 0.3rem 0 0; }
.counter.over { color: var(--danger); font-weight: 600; }

/* --- Formatting editor. Headings inside it are sized down deliberately: an h2 that matches the
   question's own heading makes the answer look like part of the page furniture. --- */
.rt-bar {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 6px; margin-bottom: -1px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
}
.rt-btn {
  font: inherit; font-size: 0.82rem; line-height: 1.1;
  min-width: 2rem; padding: 0.32rem 0.5rem;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 5px; cursor: pointer;
}
.rt-btn:hover { border-color: var(--accent); color: var(--accent); }
.rt-b { font-weight: 800; }
.rt-i { font-style: italic; }
.rt-u { text-decoration: underline; }
.rt-btn:active { background: var(--bg); }

.rt-edit {
  min-height: 12rem; max-height: 60vh; overflow-y: auto;
  padding: 0.7rem 0.8rem;
  font: inherit; line-height: 1.55;
  color: inherit; background: var(--bg);
  border: 1px solid var(--line); border-radius: 0 0 8px 8px;
}
.rt-edit:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}
.rt-edit > *:first-child { margin-top: 0; }
.rt-edit > *:last-child { margin-bottom: 0; }
.rt-edit h2 { font-size: 1.05rem; font-weight: 700; margin: 1rem 0 0.4rem; }
.rt-edit h3 { font-size: 0.95rem; font-weight: 700; margin: 0.85rem 0 0.35rem; }
.rt-edit p { margin: 0 0 0.65rem; }
.rt-edit ul, .rt-edit ol { margin: 0 0 0.65rem; padding-left: 1.5rem; }
.rt-edit li { margin-bottom: 0.3rem; }

button.primary {
  font: inherit;
  font-weight: 600;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 8px;
  padding: 0.68rem 1.15rem;
  cursor: pointer;
}
button.primary:hover { filter: brightness(1.08); }
button.primary[disabled] { opacity: 0.55; cursor: default; filter: none; }

button.secondary {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 0.55rem 0.95rem;
  cursor: pointer;
}
button.secondary:hover { background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
button.secondary[disabled] { opacity: 0.55; cursor: default; }

.err { color: var(--danger); font-size: 0.9rem; margin: 0.6rem 0 0; }

/* The submitted file, shown wherever an answer is read back. Deliberately not styled as an
   afterthought: on a question answered with a file and no text, this line IS the answer. */
.review-file {
  font-size: 0.88rem; margin: 0.4rem 0 0; padding: 0.4rem 0.6rem;
  border-left: 2px solid var(--accent); background: rgba(127, 127, 127, 0.07);
  border-radius: 0 4px 4px 0;
}

/* The pause before the final answer. Quiet rather than alarming: it is a check, not a warning. */
.confirm-final {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem;
  margin: 0.9rem 0 0; padding: 0.75rem 0.9rem;
  border: 1px solid var(--accent); border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
}
.confirm-final p { margin: 0; font-size: 0.9rem; flex: 1 1 18rem; }

.draft-note { margin: 0 0 0.6rem; }

.looking-back {
  font-size: 0.85rem; padding: 0.5rem 0.7rem; margin: 0 0 0.9rem;
  border-radius: 6px; border: 1px solid var(--warn); color: var(--warn);
  background: rgba(154, 91, 18, 0.07);
}

/* --- Upload questions. The file is sent when it is chosen, so the status line is the only
   feedback a candidate gets that it worked; it is deliberately wordy about what happens next. */
.upload { display: block; }
.upload-input {
  display: block; width: 100%; font: inherit; font-size: 0.92rem;
  padding: 0.6rem; border: 1px dashed var(--line); border-radius: 8px;
  background: var(--card); color: inherit; cursor: pointer;
}
.upload-input:hover { border-color: var(--accent); }
.upload-status { margin: 0.45rem 0 0.9rem; }
.upload-status.ok { color: var(--accent); font-weight: 600; }

/* --- Review: previously submitted answers, to look at and nothing more. A dialog rather than a
   screen, so the question underneath keeps whatever has been typed into it. --- */
.review-open {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0;
  cursor: pointer;
}
.review-open:hover { filter: brightness(1.15); }

dialog.review {
  width: min(44rem, calc(100vw - 2rem));
  max-height: 85vh;
  overflow-y: auto;
  padding: 1.5rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}
dialog.review::backdrop { background: rgba(0, 0, 0, 0.55); }
.review-head { margin-bottom: 1.2rem; }
.review-head h2 { font-size: 1.15rem; font-weight: 650; margin: 0 0 0.35rem; }
.review-head p { margin: 0; }

.review-item {
  padding: 0.9rem 0 0.2rem;
  border-top: 1px solid var(--line);
}
.review-q { font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-bottom: 0.5rem; }
.review-a { white-space: pre-wrap; }
.review-a > *:first-child { margin-top: 0; }
.review-a h3 { font-size: 1rem; font-weight: 700; margin: 0.7rem 0 0.3rem; }
.review-a h4 { font-size: 0.92rem; font-weight: 700; margin: 0.6rem 0 0.25rem; }
.review-a ul, .review-a ol { margin: 0 0 0.6rem; padding-left: 1.4rem; }
.review-a li { margin-bottom: 0.25rem; }

.review-foot {
  position: sticky;
  bottom: -1.5rem;
  display: flex;
  justify-content: flex-end;
  padding: 1rem 0 0;
  margin-top: 0.5rem;
  border-top: 1px solid var(--line);
  background: var(--card);
}

/* Internal testing affordances. Loud on purpose: if this is ever visible to a candidate,
   somebody should notice immediately rather than it passing for part of the page. */
.testing-only {
  margin-top: 1.5rem;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--warn);
  border-radius: 8px;
  background: color-mix(in srgb, var(--warn) 8%, transparent);
}
.testing-only p { font-size: 0.85rem; margin: 0 0 0.7rem; color: var(--ink); }
.testing-only code { font-size: 0.82rem; }
.ghost-btn {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--warn);
  border-radius: 7px;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
}
.ghost-btn:hover { background: var(--bg); }
.ghost-btn[disabled] { opacity: 0.55; cursor: default; }