/* challenge.css -- the few things a challenge page needs that paths.css does
 * not already carry. Loaded after tokens-b.css and paths.css.
 *
 * Every colour, radius and font family here is a token from tokens-b.css. No
 * literal colour appears below, which is the same rule paths.css follows.
 */

/* ---- what this challenge certifies --------------------------------------- */

ol.certified { list-style: none; padding-left: 0; counter-reset: cert; }

li.cert {
  counter-increment: cert;
  position: relative;
  padding: 1rem 1.1rem 1rem 2.8rem;
  margin-bottom: 0.7rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-line);
  border-radius: var(--radius);
  background: var(--surface-1);
}

li.cert::before {
  content: counter(cert);
  position: absolute;
  left: 1rem;
  top: 1.05rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

li.cert .observable { margin: 0 0 0.5rem; }
li.cert .how { color: var(--muted); font-size: 0.94rem; margin: 0 0 0.4rem; }
li.cert .partial { color: var(--muted); font-size: 0.9rem; margin: 0; }
li.cert .partial .label { margin-right: 0.35rem; }

/* A method signature is longer than the column, so each one is its own line
   that wraps with a hanging indent rather than scrolling sideways. A spec line
   a reader has to scroll to finish is a spec line that gets half read. */
ul.headers {
  list-style: none;
  padding: 0.9rem 1rem;
  margin: 0 0 1rem;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
ul.headers li {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.55;
  padding-left: 1.6rem;
  text-indent: -1.6rem;
  margin: 0 0 0.35rem;
  overflow-wrap: anywhere;
}
ul.headers li:last-child { margin-bottom: 0; }

/* ---- a check ------------------------------------------------------------- */

.check {
  padding: 1rem 1.1rem;
  margin-bottom: 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
}
.check h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.check .why { margin-bottom: 0.8rem; font-size: 0.94rem; }
.check pre { margin-bottom: 0; }

.io { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.io > div > .label { display: block; margin-bottom: 0.35rem; }

@media (max-width: 34rem) {
  .io { grid-template-columns: 1fr; }
}

/* ---- what to watch for --------------------------------------------------- */

ul.watch { list-style: none; padding-left: 0; }

li.trap {
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
}
li.trap .name { margin: 0 0 0.35rem; }
li.trap .sees { color: var(--muted); font-size: 0.94rem; margin: 0; }
li.trap.unseen { border-style: dashed; background: none; }

/* ---- the attestation control, added with slice U4 ------------------------
   One checkbox and one statement. It is deliberately the same shape as a task
   in a room, because a student has already checked a hundred of those and this
   is the same act: saying they did something. Nothing here is styled as a
   button to press or a prize to win. The block is written into the page hidden
   and revealed by challenge-page.js, so with scripting off none of this shows. */

.block.attest { border-top-style: dashed; }

.attest-line {
  padding: 0.9rem 1rem;
  margin: 0 0 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
}
.attest-line label { display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer; }
.attest-box { margin-top: 0.35rem; width: 1rem; height: 1rem; accent-color: var(--accent); flex: none; }
.attest-text { flex: 1; }

.block.attest.done .attest-line {
  border-color: var(--highlight-line);
  background: var(--highlight-soft);
}

.attest-state {
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--muted);
}

/* ---- the author block, which is not part of a student page --------------- */

.authornote { border-top-style: dashed; }
.authornote h3 { font-size: 0.95rem; }
.authornote li { color: var(--muted); font-size: 0.94rem; }
.authornote .idlabel {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--text);
}

/* ---- the challenge index ------------------------------------------------- */

li.challenge {
  padding: 1.5rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
}
li.challenge h3 { margin-top: 0; font-size: 1.2rem; }
li.challenge.blocked { background: none; border-style: dashed; }
li.challenge .badges + .audience { margin-top: 0.8rem; }