/* Exercise engine skin. Loaded alongside capstone.css.

   Uniform hairline on every card edge — no accent rib, ever.

   Trap: correct/wrong is never hue alone. An option that is the key carries
   the word in the feedback block and a ✓ after its label; a wrong one carries
   ✕. Removing either glyph makes the state invisible to a learner who cannot
   separate --ok from --no, so they are content, not decoration. */

.ex {
  padding: 20px 22px;
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}
.ex-head h3 { margin: 4px 0 6px; font-size: var(--fs-xl); }
.ex-lede { font-size: var(--fs-md); line-height: 1.6; color: var(--muted-foreground); }

/* Dots and an explicit n/m together: dots stop being countable past about
   six, so the fraction is the reading and the dots are the shape. */
.ex-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 14px;
  padding-bottom: 12px;
  border-bottom: var(--hairline) solid var(--border);
}
.dots { display: flex; gap: 6px; }
.step-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.step-dot.now { border-color: var(--ring); transform: scale(1.3); }
.step-dot.hit { background: var(--ok); border-color: var(--ok); }
.step-dot.miss { border-color: var(--no); box-shadow: inset 0 0 0 2px var(--no); }

.ex-q { margin-bottom: 14px; font-size: var(--fs-lg); line-height: 1.55; }

.opts { display: flex; flex-direction: column; gap: 8px; }
.opts.row { flex-direction: row; flex-wrap: wrap; }
.opt {
  padding: 10px 14px;
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  font-size: var(--fs-md);
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.opts.row .opt { flex: 1 1 150px; text-align: center; }
.opt:hover:not(:disabled) { border-color: var(--ring); background: var(--muted); }
.opt:disabled { cursor: default; }
.opt.is-key { border-color: var(--ok); color: var(--ok); }
.opt.is-key::after { content: ' ✓'; }
.opt.is-wrong { border-color: var(--no); color: var(--no); }
.opt.is-wrong::after { content: ' ✕'; }

.ex-feedback {
  margin-top: 14px;
  padding: 12px 14px;
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
  font-size: var(--fs-md);
  line-height: 1.6;
  animation: fb-in .25s ease both;
}
.ex-feedback.ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.ex-feedback.no { border-color: color-mix(in srgb, var(--no) 45%, var(--border)); }
.ex-feedback .label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--label);
  font-size: var(--fs-2xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.ex-feedback.ok .label { color: var(--ok); }
.ex-feedback.no .label { color: var(--no); }
.ex-feedback p + p { margin-top: 8px; }
.caveat { font-size: var(--fs-sm); color: var(--muted-foreground); }
@keyframes fb-in { from { opacity: 0; transform: translateY(-4px); } }

.ex-foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; min-height: 1px; }
.ex-foot .counter { margin-right: auto; }

/* ---------- rank ---------- */

.rank-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background);
}
.rank-row[data-moved] { border-color: var(--ring); }
.rank-n { flex: none; width: 18px; font-size: var(--fs-xs); color: var(--muted-foreground); }
.rank-t { flex: 1; font-size: var(--fs-md); }
.rank-ctl { display: flex; gap: 4px; flex: none; }
.mv {
  width: 27px;
  height: 27px;
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.mv:hover:not(:disabled) { color: var(--foreground); border-color: var(--ring); }
.mv:disabled { opacity: .3; cursor: not-allowed; }
.prior { margin: 6px 0 10px 20px; font-size: var(--fs-sm); color: var(--muted-foreground); }

.ex-prompt { margin-top: 18px; }
.ex-prompt p { margin-bottom: 8px; font-size: var(--fs-md); line-height: 1.6; }

/* ---------- grid ---------- */

.grid-wrap { overflow-x: auto; }
.grid { border-collapse: collapse; width: 100%; min-width: 520px; }
.grid th, .grid td { border: var(--hairline) solid var(--border); padding: 0; }
.grid thead th {
  padding: 8px 10px;
  font-family: var(--label);
  font-size: var(--fs-2xs);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--muted-foreground);
}
.grid tbody th {
  width: 40%;
  padding: 8px 12px;
  font-weight: 400;
  font-size: var(--fs-sm);
  text-align: left;
}
.cell {
  width: 100%;
  min-height: 36px;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  font-family: var(--label);
  font-size: var(--fs-2xs);
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background .16s ease, color .16s ease;
}
.cell:hover { background: var(--muted); color: var(--foreground); }
/* On states print their own label, so the fill is a second channel. */
.cell.on { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--brand-ink); }

/* ---------- plot ---------- */

.tray { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tchip {
  padding: 4px 10px;
  border: var(--hairline) solid var(--border);
  border-radius: 999px;
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  font-family: var(--label);
  font-size: var(--fs-2xs);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.tchip:hover { border-color: var(--ring); }
.tchip.sel { border-color: var(--ring); color: var(--brand-ink); background: var(--muted); }
.tchip.placed { opacity: .45; }
.hint { margin-bottom: 12px; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted-foreground); }

.plot { position: relative; padding-left: 22px; padding-bottom: 22px; }
.pgrid {
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  gap: 2px;
  padding: 2px;
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--muted);
}
.pcell {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-content: flex-start;
  min-height: 62px;
  padding: 4px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.pcell:hover { background: var(--accent); border-color: var(--ring); }
.pchip {
  padding: 2px 6px;
  border: var(--hairline) solid color-mix(in srgb, var(--primary) 40%, var(--border));
  border-radius: 999px;
  background: var(--card);
  font-family: var(--label);
  font-size: var(--fs-2xs);
  color: var(--brand-ink);
}
.ax {
  position: absolute;
  font-family: var(--label);
  font-size: var(--fs-2xs);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.ax-x { bottom: 0; left: 22px; }
/* Anchored bottom-left and rotated anticlockwise so the axis reads upward,
   in the direction the arrow points. */
.ax-y { left: 0; bottom: 24px; transform-origin: 0 100%; transform: rotate(-90deg); white-space: nowrap; }

@media (max-width: 700px) {
  .ex { padding: 16px 14px; }
  .pcell { min-height: 52px; }
  .opts.row .opt { flex: 1 1 100%; }
}