/* AI Benchmarking Exercise — site styles.
   Palette nods to the Public Data Project slide (slate blue + stamp black). */

:root {
  --paper: #faf9f6;
  --ink: #16191b;
  --slate: #7fa0a8;      /* PDP slide blue */
  --slate-deep: #40616b; /* links, accents */
  --rule: #d9d5cc;
  --flag-bg: #fdf3d7;
  --flag-ink: #6b5410;
  --gone: #8c1d18;
  --high: #b3541e;
  --moderate: #8a6d00;
  --ok: #2e6b3a;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.6;
  /* Keeps the footer on the bottom edge rather than floating mid-screen
     on the short pages. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

/* Header / nav */
header.site {
  border-bottom: 3px solid var(--ink);
  background: var(--slate);
}
header.site .inner {
  max-width: 52rem;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
}
header.site .wordmark {
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
}
nav.site a {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink);
  text-decoration: none;
  margin-right: 1rem;
}
nav.site a[aria-current="page"] { border-bottom: 2px solid var(--ink); }
nav.site a:hover { text-decoration: underline; }

main {
  max-width: 52rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--slate-deep);
  margin: 0 0 0.5rem;
}

h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
}
h2 {
  font-size: 1.35rem;
  margin: 2.5rem 0 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.backlink + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
h3 { font-size: 1.1rem; margin: 1.5rem 0 0.4rem; }

a { color: var(--slate-deep); }
p.meta { font-size: 0.9rem; color: #555; margin-top: 0; }
p.hint { font-size: 0.95rem; color: #444; }

.lede { font-size: 1.15rem; max-width: 42rem; }

.backlink { font-family: var(--mono); font-size: 0.82rem; margin: 0 0 1.5rem; }

/* Entry page — the whole card is the control, so the label isn't said twice.
   Centred in the viewport and given real height so the page doesn't read as a
   header with a stub of content under it. */
main.entry { display: flex; flex-direction: column; justify-content: center; }
main.entry .lede { margin-bottom: 2.25rem; }
.choices { display: grid; gap: 1rem; }
.choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border: 1.5px solid var(--ink);
  background: #fff;
  padding: 1.6rem;
  text-decoration: none;
  color: var(--ink);
}
.choice:hover { background: var(--ink); color: var(--paper); }
.choice-label {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.choice-go { font-family: var(--mono); font-size: 1.5rem; line-height: 1; }

/* Phase cards on landing */
.phases { display: grid; gap: 1rem; margin: 1.5rem 0; }
@media (min-width: 640px) { .phases { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.phase-card {
  border: 1.5px solid var(--ink);
  padding: 1rem;
  background: #fff;
}
.phase-card h3 { margin-top: 0; }
.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.45rem;
  border: 1px solid currentColor;
  margin-bottom: 0.5rem;
}
.badge.open   { color: var(--ok); }
.badge.guided { color: var(--high); }
.badge.team   { color: var(--slate-deep); }

/* Buttons */
.btn, button.copy {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.9rem;
  padding: 0.55rem 1rem;
  background: var(--ink);
  color: var(--paper);
  border: none;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover, button.copy:hover { background: var(--slate-deep); }
/* Two or more buttons side by side, wrapping on a narrow screen. */
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.btn.secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
/* A link that refuses the click, e.g. Continue to Phase 2 before Phase 1 is
   filled in. Kept in the flow so the reason underneath it makes sense. */
.btn.disabled { opacity: 0.45; cursor: not-allowed; }
/* Nav destinations that are closed for now. Still legible, clearly not live. */
nav.site a.blocked { opacity: 0.45; cursor: not-allowed; }
/* The wordmark never dims — it simply stops being a link. */
a.wordmark.inert { cursor: default; }
.btn.disabled:hover { background: var(--ink); }
/* Locked Phase 1 fields, once Phase 2 has been opened. */
:disabled { background: #f2f1ed; color: #666; cursor: not-allowed; }

/* Team-decision flags */
.flag, .flag-block {
  background: var(--flag-bg);
  color: var(--flag-ink);
  font-family: var(--mono);
  font-size: 0.82rem;
}
.flag { padding: 0.05rem 0.35rem; }
.flag-block { padding: 0.6rem 0.8rem; border-left: 3px solid var(--flag-ink); }

/* Participant asides — "for you, not the bot". Deliberately upright: italics are
   reserved for language we're suggesting you type at the agent, which is why the
   <em> runs inside these boxes stand out. */
aside.participant {
  border-left: 3px solid var(--slate);
  background: #f0f3f4;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
}
aside.participant .label {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate-deep);
  margin-bottom: 0.25rem;
}
aside.participant ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }
aside.participant li { margin-bottom: 0.25rem; }
aside.participant li:last-child { margin-bottom: 0; }

/* Checklist variant, for guidance that is a sequence of steps rather than
   something to read. Step numbers come from a counter, so the markup carries
   none of its own. */
aside.participant .todo-intro { margin: 0 0 0.6rem; }
aside.participant ol.todo {
  list-style: none;
  counter-reset: todo;
  margin: 0;
  padding: 0;
}
aside.participant ol.todo li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 0;
  padding: 0.6rem 0;
  border-top: 1px solid #dde3e4; /* the aside's own background, a shade down */
}
aside.participant ol.todo li::before {
  counter-increment: todo;
  content: counter(todo);
  flex: 0 0 1.45rem;
  height: 1.45rem;
  border: 1.5px solid var(--slate);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.45rem;
  text-align: center;
  color: var(--slate-deep);
}
/* Closing reminder or caution under a checklist — not one of the steps. */
aside.participant .todo-note { margin: 0.9rem 0 0; }

/* Do / Don't lists */
.dodont { display: grid; gap: 1rem; margin: 1rem 0; }
@media (min-width: 640px) { .dodont { grid-template-columns: 1fr 1fr; } }
.dodont section { border: 1px solid var(--rule); background: #fff; padding: 1rem; }
.dodont h3 { margin-top: 0; font-family: var(--mono); font-size: 0.9rem; text-transform: uppercase; }
.dodont ul { margin: 0; padding-left: 1.1rem; }
.dodont li { margin-bottom: 0.5rem; }

/* Forms / pickers */
.picker { display: grid; gap: 1rem; margin: 1rem 0; }
.picker label { font-family: var(--mono); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 0.3rem; }
select, input[type="text"], textarea {
  width: 100%;
  font: inherit;
  padding: 0.5rem;
  border: 1.5px solid var(--ink);
  background: #fff;
}
#dataset-card { border: 1px solid var(--rule); background: #fff; padding: 1rem 1.25rem; margin: 1rem 0; }
#dataset-card h3 { margin-top: 0; }
#custom-dataset-fields { display: grid; gap: 0.75rem; border: 1px dashed var(--slate-deep); padding: 1rem; }
/* An ID selector outranks the UA stylesheet's [hidden] { display: none }, so the
   hidden attribute needs restating here or the fields never actually hide. */
#custom-dataset-fields[hidden] { display: none; }

/* Phase 1 worksheet — the participant's own rating, saved and carried to Phase 2 */
.worksheet {
  display: grid;
  gap: 0.75rem;
  border-left: 3px solid var(--slate);
  background: #fff;
  padding: 0.9rem 1rem;
  margin: -0.75rem 0 1.75rem;
}
.worksheet-title {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate-deep);
}
@media (min-width: 640px) {
  .worksheet { grid-template-columns: 14rem 1fr; align-items: start; }
}

/* Phase 2 carry-over panel — context, never something to paste */
.carryover {
  border: 1.5px solid var(--slate-deep);
  border-left-width: 5px;
  background: #f0f3f4;
  padding: 1rem 1.25rem;
  margin: 1rem 0 1.75rem;
}
.carryover.missing { border-color: var(--high); background: #fdf1ea; }
.carryover .label {
  margin: 0 0 0.5rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate-deep);
}
.carryover.missing .label { color: var(--high); }
.carryover p { margin: 0 0 0.5rem; }
.carryover .meta { display: block; font-size: 0.9rem; color: #555; }
.carryover .cats-intro { margin-top: 0.75rem; font-size: 0.95rem; }
.carryover ul.cats { margin: 0 0 0.5rem; padding-left: 1.1rem; }
.carryover ul.cats li { margin-bottom: 0.25rem; }
.carryover .hint { margin-top: 0.75rem; }

.rating-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.4rem;
  border: 1px solid currentColor;
  vertical-align: 0.1em;
}
.rating-badge.none { color: #777; font-style: normal; }

/* Phase 2 "what the AI added" notes */
.ai-note {
  border: 1px solid var(--rule);
  background: #fff;
  padding: 1rem 1.25rem;
  margin: 0 0 1rem;
}
.ai-note h3 { margin-top: 0; }
.ai-note .prior {
  font-size: 0.92rem;
  color: #444;
  border-left: 3px solid var(--rule);
  padding-left: 0.75rem;
  margin: 0 0 0.75rem;
}
.ai-note .prior span {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate-deep);
  display: block;
}
.ai-note .prior.empty { color: #777; }
.ai-note label {
  font-family: var(--mono);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 0.3rem;
}

/* Rubric tables */
table.rubric { border-collapse: collapse; width: 100%; background: #fff; margin: 0.5rem 0 1.5rem; }
table.rubric th, table.rubric td {
  border: 1px solid var(--rule);
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: top;
  font-size: 0.95rem;
}
th.lvl { font-family: var(--mono); font-size: 0.8rem; white-space: nowrap; width: 9.5rem; }
.lvl-gone { color: var(--gone); }
.lvl-high-risk { color: var(--high); }
.lvl-moderate-risk { color: var(--moderate); }
.lvl-no-known-issue { color: var(--ok); }

/* Prompt blocks */
.prompt-block { position: relative; margin: 1rem 0 2rem; }
.prompt-block pre {
  background: var(--ink);
  color: #e8e6df;
  padding: 1.25rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.55;
  white-space: pre-wrap;
  margin: 0;
}
.prompt-block button.copy { position: absolute; top: 0.5rem; right: 0.5rem; background: var(--slate-deep); }

/* Submission feedback under the Phase 1 submit button */
.status { font-family: var(--mono); font-size: 0.85rem; min-height: 1.2em; margin-top: 0.5rem; }
.status.ok { color: var(--ok); }
.status.error { color: var(--gone); }
.optional { font-family: var(--sans); text-transform: none; letter-spacing: normal; color: #777; }

.ai-note select + label,
.ai-note textarea + label { margin-top: 1rem; }

/* "Before you start" callout. Heavier than an aside on purpose — the 50 minutes
   and the no-AI rule were being read past. */
.callout {
  position: relative;
  border: 3px solid var(--ink);
  background: var(--flag-bg);
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
}
/* Locked / blocked variant: light red so it reads as a stop, and clearly not the
   cream "Before you start" note. */
.callout.locked { background: #fbece9; border-color: var(--gone); }
.callout.locked .callout-title { color: var(--gone); }

/* The padlock that freezes or re-enables the Phase 1 answers. Sits in the
   corner of its notice, sized to read as a secondary control rather than a
   call to action. */
#phase1-lock .callout-title, #phase1-lock .lock-note { padding-right: 6.5rem; }
.lock-toggle {
  position: absolute;
  top: 0.65rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.5rem;
  background: transparent;
  border: 1.5px solid currentColor;
  color: var(--gone);
  cursor: pointer;
}
.callout:not(.locked) .lock-toggle { color: var(--slate-deep); }
.lock-toggle:hover { background: rgba(0, 0, 0, 0.06); }
.lock-toggle svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lock-toggle-text {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.callout p { margin: 0; }
.callout p + p { margin-top: 0.35rem; }
.callout-title {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Solo category picker */
.checkset { border: 1.5px solid var(--ink); background: #fff; padding: 1rem 1.25rem; }
.checkset legend {
  font-family: var(--mono);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 0.4rem;
}
/* Overrides the uppercase mono treatment .picker gives its labels — these read as
   sentences, not field names. */
label.check {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
  font-family: var(--sans);
  font-size: 1rem;
  text-transform: none;
  letter-spacing: normal;
}
label.check input { width: auto; margin: 0; }
.checkset .hint { margin: 0.75rem 0 0; }

/* Thinking-mode cards, one per provider */
.provider-cards { display: grid; gap: 1rem; margin: 1rem 0 2rem; }
@media (min-width: 640px) { .provider-cards { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }
.provider { border: 1px solid var(--rule); background: #fff; padding: 0.9rem 1rem; }
.provider p { margin: 0; font-size: 0.95rem; }
.provider p + p { margin-top: 0.35rem; }
.provider-name {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate-deep);
}
.arrow { font-family: var(--mono); }

/* Results — three assessments of one dataset, side by side */
table.compare-table { border-collapse: collapse; width: 100%; background: #fff; margin: 1.5rem 0 2.5rem; }
table.compare-table th, table.compare-table td {
  border: 1px solid var(--rule);
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: middle;
  font-size: 0.95rem;
}
table.compare-table thead th {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom-width: 1.5px;
  border-bottom-color: var(--ink);
}
table.compare-table tbody th { font-weight: 600; }
table.compare-table select { font-size: 0.9rem; padding: 0.3rem; border-width: 1px; }

/* Banners: guided-only notice, and the answer-key warning on the results page */
.banner {
  background: var(--high);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.85rem;
  padding: 0.6rem 1rem;
  margin-bottom: 1.5rem;
}

footer.site {
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
}
footer.site .inner {
  max-width: 52rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
  font-size: 0.85rem;
  color: #555;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
footer.site p { margin: 0; }
.footer-logo { display: block; width: 190px; height: auto; }

:focus-visible { outline: 3px solid var(--slate-deep); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------------
   Track gating — LAST IN THE FILE ON PURPOSE.

   Solo runs Phase 1 only; a guided session runs Phases 1 and 2. Both tracks'
   markup ships on every page and CSS hides what doesn't apply, with <html
   data-track> set from the head so nothing flashes before paint.

   These rules must beat every display declaration above them. The `html`
   prefix lifts them to (0,1,1) so they outrank single-class rules like .btn on
   specificity, and sitting at the end of the file means they also win on source
   order. Belt and braces: get either wrong and a gated element — a submit
   button, a phase card — stays visible to the wrong track, which is silent and
   easy to miss. Do not move this block.
   --------------------------------------------------------------------------- */
html [data-only] { display: none; }
html[data-track="solo"] [data-only="solo"],
html[data-track="group"] [data-only="group"] { display: revert; }