/* Sorting practice — the exercise's own styles.

   Every rule is scoped to `.sa`, the wrapper class on the practice panels, so
   nothing here can reach the rest of the portal. The page frame (container,
   header, cards and buttons outside the panels) is Bootstrap and portal.css. */
.sa {
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #1d2433;
  --muted: #5b6477;
  --block: #3b6fd8;
  --block-text: #ffffff;
  --selected: #f2a007;
  --placed: #2e9e5b;
  --border: #d9deea;
  --primary: #3b6fd8;
  --done: #2e9e5b;
  --settled: #30353f;
  --settled-text: #e9ecf3;
}
@media (prefers-color-scheme: dark) {
  .sa {
    --bg: #12151c;
    --card: #1b202b;
    --text: #e7eaf2;
    --muted: #9aa3b5;
    --block: #4c7fe6;
    --selected: #f5b331;
    --placed: #3bb26b;
    --border: #2d3444;
    --primary: #4c7fe6;
    --settled: #04060a;
    --settled-text: #9aa3b5;
  }}

.sa .controls {
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 16px;
}
.sa .controls label { display: flex; gap: 6px; align-items: center; font-size: 0.95rem; }
.sa .controls select { font: inherit; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }

.sa .goal { margin: 20px 0 8px; font-size: 1.1rem; text-align: center; }
.sa .goal strong { color: var(--primary); }

.sa .board { overflow-x: auto; padding: 24px 0; }
.sa .blockrow { display: flex; gap: 10px; justify-content: center; min-width: min-content; padding: 0 8px; }

.sa .block {
  position: relative;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 700;
  background: var(--block); color: var(--block-text);
  border: 3px solid transparent; border-radius: 10px;
  cursor: pointer; user-select: none;
  transition: transform 0.35s ease, background 0.2s, border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}
.sa .block:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.18); }
.sa .block:focus-visible { outline: 3px solid var(--selected); outline-offset: 2px; }
.sa .block.selected { background: var(--selected); color: #1d1d1d; transform: translateY(-10px); }
.sa .block.placed { border-color: var(--placed); }
.sa .block .idx {
  position: absolute; bottom: -22px; left: 0; right: 0;
  font-size: 0.75rem; font-weight: 400; color: var(--muted); text-align: center;
}
.sa .blockrow.done .block { background: var(--done); cursor: default; }
.sa .blockrow.done .block:hover { box-shadow: none; }

.sa .actions { display: flex; gap: 12px; justify-content: center; margin: 16px 0; }
.sa button {
  font: inherit; padding: 8px 16px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
}
.sa button.primary { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; padding: 10px 28px; font-size: 1.05rem; }
.sa button:disabled { opacity: 0.45; cursor: not-allowed; }

.sa .stats { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.sa .stat {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 20px; min-width: 130px; text-align: center;
}
.sa .stat .label { display: block; font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.sa .stat .value { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.sa .message { text-align: center; color: var(--muted); min-height: 1.4em; }

.sa .result {
  margin: 16px auto; max-width: 560px;
  background: var(--card); border: 2px solid var(--done); border-radius: 12px;
  padding: 16px 20px; text-align: center;
}
.sa .result h2 { margin: 0 0 8px; color: var(--done); }
.sa .result p { margin: 6px 0; }

.sa .help { margin-top: 28px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; }
.sa .help summary { cursor: pointer; font-weight: 600; }
.sa kbd { border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; font-size: 0.85em; }

@media (max-width: 600px) {
  .sa .block { width: 44px; height: 44px; font-size: 1.1rem; }
  .sa .blockrow { gap: 6px; }}/* ---------- tabs and panels ---------- */

/* ---------- watch mode ---------- */
.sa .block.static { cursor: default; }
.sa .block.static:hover { box-shadow: none; }
.sa .block.comparing { background: var(--selected); color: #1d1d1d; transform: translateY(-10px); }
.sa .block.swapping { background: var(--selected); color: #1d1d1d; }
.sa .block.locked { background: var(--settled); color: var(--settled-text); border-color: transparent; box-shadow: none; }

.sa .controls input[type="range"] { width: 140px; }

.sa .twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
@media (max-width: 720px) { .sa .twocol { grid-template-columns: 1fr; }}
.sa .card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; }
.sa .card h3 { margin: 0 0 8px; font-size: 1rem; }

.sa .code {
  margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88rem; line-height: 1.5; white-space: pre; overflow-x: auto;
}
.sa .codeline { padding: 1px 6px; border-radius: 4px; border-left: 3px solid transparent; }
.sa .codeline.active { background: rgba(242, 160, 7, 0.22); border-left-color: var(--selected); font-weight: 600; }

.sa .legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; color: var(--muted); font-size: 0.82rem; margin: 12px 0 0; }
.sa .key { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 4px; }
.sa .key.comparing, .sa .key.swapping { background: var(--selected); }
.sa .key.locked { background: var(--settled); }

.sa #aCompare table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.sa #aCompare th, .sa #aCompare td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--border); }
.sa #aCompare th:first-child, .sa #aCompare td:first-child { text-align: left; }
.sa #aCompare th { color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.sa .tiny { font-size: 0.8rem; color: var(--muted); }

.sa .message { min-height: 2.6em; }

/* ---------- guided sweeps ---------- */
.sa .blockrow.addr .block .idx { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.68rem; }
.sa .blockrow.addr { padding-bottom: 8px; }
.sa .block.inrange { outline: 2px dashed rgba(59, 111, 216, 0.45); outline-offset: 4px; }
.sa .block.target { box-shadow: 0 0 0 3px var(--selected); }
.sa .block.locked.inrange { outline: none; }

.sa .sweepcard { max-width: 760px; margin: 8px auto 0; }
.sa .sweepcard h3 { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; }
.sa ol.sweep { margin: 0; padding-left: 22px; line-height: 2.4; }
.sa ol.sweep li { margin-bottom: 4px; }

.sa input.blank {
  font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  width: 104px; padding: 4px 8px; text-align: center;
  border: 0; border-bottom: 2px solid var(--primary); border-radius: 4px 4px 0 0;
  background: rgba(59, 111, 216, 0.08); color: var(--text);
}
.sa input.blank.narrow { width: 56px; }
.sa input.blank:focus { outline: none; background: rgba(242, 160, 7, 0.18); border-bottom-color: var(--selected); }
.sa input.blank.bad { background: rgba(214, 64, 64, 0.16); border-bottom-color: #d64040; }
.sa input.blank.good { background: rgba(46, 158, 91, 0.16); border-bottom-color: var(--placed); }
.sa input.blank:disabled { opacity: 0.4; }
.sa .check.inline { display: inline-flex; gap: 6px; margin-left: 10px; font-size: 0.9rem; color: var(--muted); }
.sa .actions.left { justify-content: flex-start; margin: 14px 0 0; }

.sa .message.bad-msg { color: #d64040; }
.sa .message.good-msg { color: var(--placed); }

.sa ol.log { margin: 0; padding-left: 22px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; line-height: 1.9; color: var(--muted); }
.sa ol.log li::marker { color: var(--border); }
.sa .nowrap { white-space: nowrap; }

/* sweep navigation */
.sa .sweepnav { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.sa .sweepnav h3 { margin: 0; }
.sa .navbtn {
  width: 34px; height: 34px; padding: 0; line-height: 1;
  border-radius: 8px; font-size: 1.05rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--border);
}
.sa .navbtn:not(:disabled):hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.sa .tag {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px;
}
.sa ol.log li { cursor: pointer; }
.sa ol.log li:hover { color: var(--text); }
.sa ol.log li.current { color: var(--primary); font-weight: 600; }

/* global algorithm bar */
.sa .globalbar {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 16px; margin: 14px 0 6px;
}
.sa .globalbar label { display: flex; gap: 8px; align-items: center; font-size: 0.95rem; color: var(--muted); }
.sa .globalbar label.big { font-size: 1.05rem; font-weight: 600; color: var(--text); }
.sa .globalbar select { font: inherit; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.sa .globalbar label.big select { font-weight: 600; padding: 7px 10px; }
.sa input.blank.wide { width: 170px; text-align: left; }

/* reset sits directly above the array */
.sa .boardbar { display: flex; justify-content: flex-end; margin: 18px 0 -8px; }
.sa button.small { padding: 4px 14px; font-size: 0.88rem; }

/* exchange sort: one decision row per comparison in the sweep */
.sa .sweep.exchange { padding: 0; }
.sa .xhead { margin: 0 0 10px; }
.sa .xhead code { font-size: 0.95em; }
.sa ol.cmprows { margin: 0; padding-left: 22px; }
.sa .cmprow {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 5px 10px; margin-bottom: 4px; border-radius: 8px;
  border: 1px solid transparent;
}
.sa .cmprow .cmptext code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.sa .cmprow.bad { background: rgba(214, 64, 64, 0.12); border-color: rgba(214, 64, 64, 0.4); }
.sa .cmprow.good { background: rgba(46, 158, 91, 0.12); border-color: rgba(46, 158, 91, 0.35); }
.sa .cmpchoice { display: inline-flex; gap: 6px; margin-left: auto; }
.sa .cmpchoice input {        /* visually hidden, still focusable and keyboard-operable */
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sa .cmpchoice label.choice {
  cursor: pointer; padding: 3px 14px; border-radius: 999px; font-size: 0.88rem;
  border: 1px solid var(--border); background: var(--bg); color: var(--muted); user-select: none;
}
.sa .cmpchoice input:checked + label.choice.swap { background: var(--selected); border-color: var(--selected); color: #1d1d1d; font-weight: 600; }
.sa .cmpchoice input:checked + label.choice.keep { background: var(--settled); border-color: var(--settled); color: var(--settled-text); font-weight: 600; }
.sa .cmpchoice input:focus-visible + label.choice { outline: 2px solid var(--primary); outline-offset: 2px; }
.sa .cmpchoice input:disabled + label.choice { cursor: default; opacity: 0.85; }

/* exchange rows act as you click them: one live row, the rest waiting or done */
.sa .cmprow.waiting { opacity: 0.42; }
.sa .cmprow.active { background: rgba(59, 111, 216, 0.08); border-color: rgba(59, 111, 216, 0.35); }
.sa .cmprow.done .cmptext { opacity: 0.7; }
.sa .cmpchoice label.choice.hint { outline: 2px dashed var(--selected); outline-offset: 2px; }
.sa .cmprow.waiting .cmpchoice label.choice { cursor: default; }/* sign-in strip and the teacher's results table */
/* a sweep that did not follow the algorithm */
.sa .tag.tag-bad { color: #d64040; border-color: rgba(214, 64, 64, 0.5); }
.sa ol.log li.offpath { color: #d64040; }
.sa .offpath-tag { font-style: italic; opacity: 0.85; }
.sa .result.result-bad { border-color: #d64040; }
.sa .result.result-bad h2 { color: #d64040; }

/* the C functions written beside a run.

   One pane per function, side by side while there is room. The signature and
   the braces are page furniture, not text in the box: the student only ever
   edits the body, so the thing they are asked for is the thing they can type
   in. The frame draws the border so signature, body and closing brace read as
   one function rather than a caption above a field. */
.sa .codegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; }
.sa .codepane { min-width: 0; }
.sa .codepane .codelabel {
  display: block; margin: 0 0 6px; font-size: 0.8rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.sa .codeframe {
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88rem; line-height: 1.5;
}
.sa .codeframe:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(59, 111, 216, 0.22); }
.sa .codeframe .sig { display: block; color: var(--text); white-space: pre; overflow-x: auto; }
.sa .codeframe .brace { display: block; color: var(--muted); }
.sa textarea.codebox {
  display: block; width: 100%; resize: vertical; tab-size: 4;
  font: inherit; color: var(--text); background: transparent;
  border: 0; border-left: 2px solid var(--border); border-radius: 0;
  margin: 2px 0; padding: 2px 0 2px 10px;
}
.sa textarea.codebox::placeholder { color: var(--muted); opacity: 0.7; }
.sa textarea.codebox:focus { outline: none; border-left-color: var(--primary); }
.sa #codeStatus { color: var(--muted); align-self: center; }

/* The verdict: one line, because that is all the student gets. */
.sa .verdict {
  margin: 12px 0 0; padding: 10px 14px; border-radius: 8px; font-size: 0.95rem;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.sa .verdict.good { border-color: var(--done); color: var(--done); font-weight: 600; }
.sa .verdict.bad { border-color: #d64040; color: #d64040; }
.sa .verdict pre {
  margin: 8px 0 0; white-space: pre-wrap; font-size: 0.82rem; color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.sa .verdict.working { color: var(--muted); }
@media (max-width: 760px) {
  .sa .codegrid { grid-template-columns: 1fr; }
}

/* Cards nested inside a practice panel take their surface from `.sa`, which
   follows prefers-color-scheme, but Bootstrap still paints their headings and
   muted text from the light theme -- unreadable once the surface goes dark. */
.sa .card h3, .sa .card h4 { color: var(--text); }
.sa .card .text-secondary { color: var(--muted) !important; }