/* ═══════════════════════════════════════════════════════════════════════════
   checkpoint.css — the widget's looks, in ONE file read by BOTH page systems.

   /checkpoint.js runs on two kinds of page that share no build: the AI
   Course's twelve module pages are prerendered static HTML that <link> this
   file directly, and the five library courses' module pages are React routes
   where Checkpoint.jsx imports it and Vite bundles it. Putting the rules in
   course/course.css would have styled only the first - the React pages never
   load that stylesheet - and the fix that suggests itself is a second copy,
   which is how nine forked builders happened.

   Every colour is an existing --ga-* token. Pass and fail borrow
   --ga-green/--ga-red and their -bg pairs, which are already defined for both
   themes; nothing here introduces a palette.
   ═══════════════════════════════════════════════════════════════════════════ */
.cp{margin-top:2rem}

.cp-spec{margin:0 0 1rem;font-family:var(--ga-mono);font-size:.8125rem;color:var(--ga-fg3)}

.cp-note{
  padding:1rem 1.125rem;
  border:1px solid var(--ga-border);
  border-radius:var(--ga-radius);
  background:var(--ga-surface);
}
.cp-note p{margin:0 0 .75rem;color:var(--ga-fg2);font-size:.9375rem}
.cp-note p:last-child{margin-bottom:0}

.cp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* 48px, not 44: the same minimum every other tappable thing on these pages
     uses (.ac-gate a above), and the one the mobile audit sweeps for. */
  min-height:48px;
  padding:.75rem 1.25rem;
  border:1px solid var(--ga-border-strong);
  border-radius:var(--ga-radius);
  background:var(--ga-surface);
  color:var(--ga-fg1);
  font:inherit;
  font-weight:600;
  font-size:.9375rem;
  text-decoration:none;
  cursor:pointer;
}
.cp-btn:hover{background:var(--ga-hover);text-decoration:none}
.cp-btn[disabled]{opacity:.6;cursor:default}
.cp-btn-primary{
  border-color:var(--ga-accent);
  background:var(--ga-accent);
  color:#fff;
}
.cp-btn-primary:hover{background:var(--ga-accent);opacity:.9}

.cp-q{
  margin:0 0 1.25rem;
  padding:1rem 1.125rem;
  border:1px solid var(--ga-border);
  border-radius:var(--ga-radius);
  background:var(--ga-surface);
}
.cp-q-stem{
  padding:0;
  font-weight:600;
  font-size:.9375rem;
  line-height:1.5;
  color:var(--ga-fg1);
}

/* The whole row is the target, not the 16px dot. */
.cp-opt{
  display:flex;
  gap:.625rem;
  align-items:flex-start;
  min-height:44px;
  margin-top:.5rem;
  padding:.5rem .625rem;
  border-radius:var(--ga-radius-sm);
  cursor:pointer;
}
.cp-opt:hover{background:var(--ga-hover)}
.cp-opt input{margin-top:.2rem;flex:none}
.cp-opt-letter{
  font-family:var(--ga-mono);
  font-size:.8125rem;
  color:var(--ga-fg3);
  flex:none;
}
.cp-opt-text{font-size:.9375rem;line-height:1.5;color:var(--ga-fg2)}

.cp-status{margin:.75rem 0 0;font-size:.875rem;color:var(--ga-fg3);min-height:1.25rem}

.cp-result{
  padding:1rem 1.125rem;
  border:1px solid var(--ga-border);
  border-radius:var(--ga-radius);
}
.cp-result h3{margin:0 0 .25rem;font-size:1.125rem}
.cp-pass{border-color:var(--ga-green);background:var(--ga-green-bg)}
.cp-fail{border-color:var(--ga-red);background:var(--ga-red-bg)}
.cp-score{margin:0;font-family:var(--ga-mono);font-size:.8125rem;color:var(--ga-fg2)}

.cp-review{margin:1.25rem 0;padding-left:0;list-style:none}
.cp-review-row{
  margin-bottom:.75rem;
  padding:.75rem .875rem;
  border-left:3px solid var(--ga-border);
  background:var(--ga-surface);
  border-radius:0 var(--ga-radius-sm) var(--ga-radius-sm) 0;
}
.cp-review-row.cp-ok{border-left-color:var(--ga-green)}
.cp-review-row.cp-no{border-left-color:var(--ga-red)}
.cp-review-stem{margin:0 0 .25rem;font-size:.9375rem;color:var(--ga-fg1)}
.cp-review-verdict{margin:0;font-family:var(--ga-mono);font-size:.8125rem;color:var(--ga-fg3)}

/* A set the parser could not read is shown verbatim rather than dropped - it
   is still answerable, and a blank box would be the worse failure. */
.cp-raw{
  white-space:pre-wrap;
  padding:1rem;
  border:1px solid var(--ga-border);
  border-radius:var(--ga-radius);
  background:var(--ga-surface);
  font-size:.875rem;
  line-height:1.6;
}