/* ==========================================================================
   OPAN 6606 — Class 3 quiz simulator
   Canvas's structure and restraint, built to a tighter tolerance.
   4px spacing grid. No decoration that does not carry state.
   ========================================================================== */

:root {
  /* ink */
  --ink:        #1f2b33;
  --ink-body:   #37474f;
  --ink-mute:   #64757f;
  --ink-faint:  #8c9aa3;

  /* structure */
  --line:       #c9d0d5;   /* primary box border            */
  --line-soft:  #e3e8ea;   /* internal dividers             */
  --line-hair:  #eef1f2;
  --paper:      #ffffff;
  --shade:      #f4f6f7;   /* header bars                   */
  --shade-2:    #fafbfb;   /* hover                         */

  /* brand + state */
  --link:       #0374b5;
  --link-dark:  #025c8f;
  --link-wash:  #eef6fb;
  --green:      #12794a;
  --green-line: #b6dcc7;
  --green-wash: #f0f8f3;
  --red:        #c8102e;
  --red-line:   #eec3ca;
  --red-wash:   #fdf3f4;
  --amber:      #b45309;
  --amber-line: #f0d9a8;
  --amber-wash: #fdf8ec;
  --pick:       #fdf9e7;   /* selected answer wash          */
  --pick-line:  #ddd2a0;
  --flag:       #b45309;

  --nav:        #34464f;

  --focus:      #0374b5;

  --sans: "Lato Extended", Lato, -apple-system, BlinkMacSystemFont,
          "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
          "Liberation Mono", monospace;

  --pad: 28px;             /* content gutter — the sticky bar mirrors it */
  --r: 3px;                /* the only radius in the product */
  --t: 120ms cubic-bezier(.2, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t: 0ms; }
  * { scroll-behavior: auto !important; animation: none !important; }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--ink); }

/* ==========================================================================
   Frame
   ========================================================================== */

.app { display: flex; min-height: 100vh; padding-left: 76px; }

.rail {
  position: fixed; inset: 0 auto 0 0;
  width: 76px; background: var(--nav); color: #fff;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 8px; gap: 1px; z-index: 30;
}
.rail-item {
  width: 70px; padding: 8px 1px 6px; text-align: center;
  font-size: 9.5px; letter-spacing: .04em; color: rgba(255,255,255,.78);
  line-height: 1.3; border-radius: var(--r); cursor: default;
  text-transform: uppercase; font-weight: 700;
}
.rail-item.on { background: rgba(255,255,255,.13); color: #fff; }
.rail-glyph { display: block; margin: 0 auto 3px; width: 21px; height: 21px; opacity: .92; }
.rail-glyph svg { display: block; width: 21px; height: 21px; }

.coursenav {
  width: 172px; flex: 0 0 172px;
  border-right: 1px solid var(--line-soft); padding: 20px 0 40px;
}
.coursenav h2 {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 8px; padding: 0 16px;
}
.coursenav a {
  display: block; padding: 6px 16px; color: var(--link);
  font-size: 14px; border-left: 3px solid transparent;
  transition: background var(--t), color var(--t);
}
.coursenav a:hover { background: var(--shade); text-decoration: none; }
.coursenav a.on { color: var(--ink); font-weight: 700; border-left-color: var(--ink); background: var(--shade); }
.coursenav .sim-note {
  margin: 18px 16px 0; padding-top: 12px; border-top: 1px solid var(--line-hair);
  font-size: 11px; line-height: 1.5; color: var(--ink-faint);
}

.content { flex: 1 1 auto; min-width: 0; padding: 20px var(--pad) 96px; }
.wrap { max-width: 1160px; }
.wrap.narrow { max-width: 872px; }
.wrap.home   { max-width: 940px; }

.crumbs { font-size: 12px; color: var(--ink-mute); margin-bottom: 12px; }
.crumbs .sep { margin: 0 7px; color: var(--ink-faint); }

h1.page { font-size: 24px; line-height: 1.2; font-weight: 400; letter-spacing: -.011em; margin: 0 0 3px; }
.subline { font-size: 13px; color: var(--ink-mute); margin-bottom: 18px; }

/* ==========================================================================
   Two-column quiz layout
   ========================================================================== */

.cols { display: flex; gap: 32px; align-items: flex-start; }
.main { flex: 1 1 auto; min-width: 0; max-width: 840px; }
.side {
  flex: 0 0 224px; position: sticky; top: 58px;   /* clears the sticky bar */
  max-height: calc(100vh - 74px); overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: thin;
}

/* ==========================================================================
   Sticky progress bar
   ========================================================================== */

.topbar {
  position: sticky; top: 0; z-index: 20;
  margin: -20px calc(-1 * var(--pad)) 14px; padding: 0 var(--pad);
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), box-shadow var(--t);
}
.topbar.stuck { border-bottom-color: var(--line-soft); box-shadow: 0 2px 6px -4px rgba(31,43,51,.22); }
.topbar-in {
  display: flex; align-items: center; gap: 16px;
  height: 0; overflow: hidden; transition: height var(--t);
}
.topbar.stuck .topbar-in { height: 44px; }
.tb-title { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.tb-prog { font-size: 12.5px; color: var(--ink-mute); white-space: nowrap; }
.tb-spacer { flex: 1 1 auto; }
.tb-clock { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-body); white-space: nowrap; }
.tb-clock.low { color: var(--amber); font-weight: 700; }
.tb-clock.crit { color: var(--red); font-weight: 700; }

.progline { height: 2px; background: var(--line-hair); position: relative; }
.progline i {
  position: absolute; inset: 0 auto 0 0; height: 2px;
  background: var(--link); width: 0;
  transition: width 200ms cubic-bezier(.2,0,.2,1);
}

/* ==========================================================================
   Landing page
   ========================================================================== */

.meta-grid {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 3px 32px; margin: 14px 0 20px; font-size: 14px;
}
.meta-grid dt { color: var(--ink-mute); }
.meta-grid dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: break-word; }

.lede { font-size: 14.5px; line-height: 1.6; color: var(--ink-body); max-width: 68ch; overflow-wrap: break-word; }

.rule { border: 0; border-top: 1px solid var(--line-soft); margin: 22px 0; }

.mode-list { border-top: 1px solid var(--line); margin-top: 22px; }
.mode {
  display: flex; align-items: center; gap: 20px;
  padding: 16px 4px; border-bottom: 1px solid var(--line-soft);
}
.mode-body { flex: 1 1 auto; min-width: 0; }
.mode-name { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 2px; letter-spacing: -.006em; }
.mode-desc { font-size: 13px; color: var(--ink-mute); max-width: 62ch; line-height: 1.55; overflow-wrap: break-word; }
.mode-act { flex: 0 0 auto; }

.btn {
  font-family: inherit; font-size: 14px; line-height: 1;
  padding: 9px 15px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-body);
  cursor: pointer; white-space: nowrap;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.btn:hover { background: var(--shade); border-color: #b9c2c8; }
.btn:active { background: #e9edef; }
.btn-primary { background: var(--link); border-color: var(--link); color: #fff; font-weight: 700; }
.btn-primary:hover { background: var(--link-dark); border-color: var(--link-dark); }
.btn-primary:active { background: #014b76; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--paper); border-color: var(--line); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--link); }
.btn-ghost:hover { background: var(--link-wash); border-color: transparent; }

.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
/* the label column absorbs the slack, so the numbers stay in one block
   instead of drifting apart across a wide page */
.tbl th:first-child, .tbl td:first-child { width: 100%; }
.tbl th {
  text-align: left; font-weight: 700; color: var(--ink-mute); font-size: 10.5px;
  letter-spacing: .07em; text-transform: uppercase;
  border-bottom: 1px solid var(--line); padding: 0 12px 7px 0;
}
.tbl td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line-hair); vertical-align: top; }
.tbl tbody tr { transition: background var(--t); }
.tbl tbody tr:hover td { background: var(--shade-2); }
.tbl .num { text-align: right; padding-right: 20px; font-variant-numeric: tabular-nums; }
.tbl .sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 1px; }

.empty { color: var(--ink-mute); font-size: 13.5px; padding: 16px 0; }

.chip {
  display: inline-block; padding: 1px 7px; border-radius: 2px;
  font-size: 11.5px; font-weight: 700; border: 1px solid;
}
.chip.good { color: var(--green); border-color: var(--green-line); background: var(--green-wash); }
.chip.mid  { color: var(--amber); border-color: var(--amber-line); background: var(--amber-wash); }
.chip.bad  { color: var(--red);   border-color: var(--red-line);   background: var(--red-wash); }

/* ==========================================================================
   Question box
   ========================================================================== */

.qbox {
  border: 1px solid var(--line); background: var(--paper);
  margin-bottom: 16px; scroll-margin-top: 64px;
  transition: border-color var(--t), box-shadow var(--t);
}
.qbox.current { border-color: #a9b4bb; box-shadow: 0 0 0 3px rgba(3,116,181,.07); }

.qhead {
  background: var(--shade); border-bottom: 1px solid var(--line);
  padding: 7px 12px; display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; min-height: 34px;
}
.qname { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.qstatus { font-weight: 700; font-size: 13px; }
.qstatus.ok { color: var(--green); }
.qstatus.no { color: var(--red); }
.qstatus.part { color: var(--amber); }
.qstatus.skip { color: var(--ink-mute); }
.qpts { margin-left: auto; color: var(--ink-mute); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.qflag {
  border: 0; background: transparent; padding: 3px 5px; margin: -3px -3px -3px 0;
  cursor: pointer; color: var(--ink-faint); line-height: 0; border-radius: 2px;
  transition: color var(--t), background var(--t);
}
.qflag:hover { color: var(--flag); background: rgba(180,83,9,.09); }
.qflag svg { width: 13px; height: 13px; display: block; }
.qflag.on { color: var(--flag); }
.qflag.on svg { fill: currentColor; }
.qbox.flagged { box-shadow: inset 3px 0 0 var(--flag); }

.qtext { padding: 13px 14px 2px; font-size: 16px; line-height: 1.58; color: var(--ink-body); overflow-wrap: break-word; }
.qtext p { margin: 0 0 9px; }
.qtext strong { color: var(--ink); font-weight: 700; }
.qtext em { font-style: italic; }

code {
  font-family: var(--mono); font-size: .855em;
  background: #f1f4f5; border: 1px solid var(--line-hair);
  border-radius: 2px; padding: 1px 4px; color: var(--ink);
  /* Atomic while it fits, and only then breakable. A viewport media query got
     this wrong: the answer column is narrow long before the viewport is, so a
     long chip used to run past the question box between 760px and 1100px.
     pre-wrap keeps the spacing, and `anywhere` is the last resort for a chip
     with no space in it at all. */
  white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%;
}

.stim { padding: 0 14px; margin: 0 0 6px; }
.stim-cap { font-size: 12.5px; color: var(--ink-mute); margin: 0; }

pre.code, pre.out {
  font-family: var(--mono); font-size: 13px; line-height: 1.6;
  margin: 0 14px 11px; padding: 10px 0 10px 13px;
  background: #fbfcfc; border: 1px solid var(--line-hair);
  border-left: 2px solid #c3ccd1;
  overflow-x: auto; color: var(--ink); tab-size: 2; white-space: pre;
  border-radius: 0 var(--r) var(--r) 0; scrollbar-width: thin;
}
/* A scroll container drops its trailing padding, so the widest line of code
   used to sit flush against the border. The padding belongs to the content. */
pre.code > .cl, pre.out > .cl {
  display: inline-block; min-width: 100%; padding-right: 13px;
}
pre.out { background: var(--shade); border-left-color: #b9c2c8; color: var(--ink-body); }
pre.code .cm { color: #8b9aa3; }
.qtext + pre.code { margin-top: 1px; }

/* ==========================================================================
   Answers
   ========================================================================== */

.answers { padding: 2px 8px 10px; }

.opt {
  display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start;
  padding: 7px 9px; margin-bottom: 1px;
  border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer; font-size: 15.5px; line-height: 1.5; color: var(--ink-body);
  position: relative;
  transition: background var(--t), border-color var(--t);
}
.opt:hover { background: var(--shade-2); border-color: var(--line-hair); }
.opt:active { background: var(--shade); }
.opt.on { background: var(--pick); border-color: var(--pick-line); }
.opt.on .otext { color: var(--ink); }

.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

.opt .box {
  width: 16px; height: 16px; margin-top: 3px;
  border: 1.5px solid #9aa6ad; background: var(--paper);
  display: block; position: relative;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.opt[data-multi="0"] .box { border-radius: 50%; }
.opt[data-multi="1"] .box { border-radius: 2px; }
.opt:hover .box { border-color: #6f7f88; }
.opt.on .box { border-color: var(--link); background: var(--link); }
.opt[data-multi="0"].on .box::after {
  content: ""; position: absolute; inset: 4px; background: #fff; border-radius: 50%;
}
.opt[data-multi="1"].on .box::after {
  content: ""; position: absolute; left: 4.5px; top: 1.5px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 1.8px 1.8px 0;
  transform: rotate(43deg);
}
.opt input:focus-visible + .box { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--focus); }

.opt .otext { min-width: 0; overflow-wrap: break-word; }
.opt.codeopt .otext {
  font-family: var(--mono); font-size: 13.5px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; color: var(--ink);
}
.opt .key {
  position: absolute; right: 9px; top: 7px;
  font-size: 10.5px; color: var(--ink-faint); font-family: var(--mono);
  opacity: 0; transition: opacity var(--t); pointer-events: none;
}
.answers:hover .opt .key { opacity: 1; }

.entry { padding: 2px 14px 12px; }
.entry label { display: block; font-size: 12.5px; color: var(--ink-mute); margin-bottom: 5px; }
.entry input {
  font-family: var(--mono); font-size: 14px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: var(--r);
  width: 100%; max-width: 560px; color: var(--ink); background: var(--paper);
  transition: border-color var(--t), box-shadow var(--t);
}
.entry input.short { max-width: 150px; }
.entry input:hover { border-color: #a9b4bb; }
.entry input:focus { border-color: var(--link); box-shadow: 0 0 0 3px rgba(3,116,181,.12); }

/* ==========================================================================
   Review
   ========================================================================== */

.qbox.correct { box-shadow: inset 3px 0 0 var(--green); }
.qbox.wrong   { box-shadow: inset 3px 0 0 var(--red); }
.qbox.partial { box-shadow: inset 3px 0 0 var(--amber); }
.qbox.blank   { box-shadow: inset 3px 0 0 #b9c2c8; }

.rev { padding: 2px 8px 10px; }
/* 130px, not 118: "Correct answer" is 110px wide and the old column left it
   4px from the border, out of line with every other inset in the box */
.rrow { display: grid; grid-template-columns: 130px 1fr; margin-bottom: 2px; }
.rtag {
  text-align: right; padding: 7px 12px 7px 0;
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-faint); line-height: 1.6; white-space: nowrap;
}
.rtag b { font-weight: 700; display: block; }
.rtag .ok { color: var(--green); }
.rtag .no { color: var(--red); }
.rbody {
  padding: 7px 10px; border: 1px solid transparent; border-radius: var(--r);
  font-size: 15.5px; line-height: 1.5; min-width: 0; overflow-wrap: break-word;
}
.rrow.is-correct .rbody { background: var(--green-wash); border-color: var(--green-line); }
.rrow.is-yours-wrong .rbody { background: var(--red-wash); border-color: var(--red-line); }
.rrow.plain .rbody { color: var(--ink-body); }
.rbody.codeopt { font-family: var(--mono); font-size: 13.5px; white-space: pre-wrap; word-break: break-word; color: var(--ink); }

.given { padding: 2px 14px 12px; font-size: 14px; }
.given .lab { color: var(--ink-faint); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; display: block; margin-bottom: 4px; }
.given code { display: inline-block; white-space: pre-wrap; padding: 4px 7px; }
.given .none { color: var(--ink-faint); font-style: italic; }
.given .blk + .blk { margin-top: 11px; }
.given .note { margin-top: 8px; font-size: 12px; color: var(--ink-mute); }

/* ==========================================================================
   Explanation layer — deliberately not Canvas
   ========================================================================== */

.expl {
  overflow-wrap: break-word;
  margin: -8px 0 16px; padding: 12px 15px 13px;
  border: 1px solid var(--line-hair); border-top: 0;
  border-left: 2px solid #aab6bd; background: #fcfdfd;
  font-size: 13.5px; line-height: 1.62; color: var(--ink-body);
}
.expl h4 {
  margin: 0 0 6px; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 700;
}
.expl p { margin: 0 0 8px; }
.expl p:last-child { margin-bottom: 0; }
.expl .miss { margin-top: 10px; padding-top: 9px; border-top: 1px dashed #d9e0e3; }
.expl .miss h4 { color: var(--red); }
.expl .src { margin-top: 10px; font-size: 11px; color: var(--ink-faint); }
.expl .recur {
  margin-top: 9px; padding: 7px 10px; background: var(--amber-wash);
  border: 1px solid var(--amber-line); border-radius: 2px;
  font-size: 12.5px; color: #7a4a08;
}

/* ==========================================================================
   Sidebar panels
   ========================================================================== */

.panel {
  border: 1px solid var(--line); background: var(--paper);
  margin-bottom: 14px; border-radius: var(--r); overflow: hidden;
}
.panel h3 {
  margin: 0; padding: 8px 12px; font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-mute);
  background: var(--shade); border-bottom: 1px solid var(--line-soft);
}
.panel .pbody { padding: 11px 12px; font-size: 13px; }

.clockbox .clock {
  font-size: 21px; font-variant-numeric: tabular-nums; color: var(--ink);
  letter-spacing: -.01em; line-height: 1.15; transition: color var(--t);
}
.clockbox .lab { font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; }
.clockbox.low .clock { color: var(--amber); font-weight: 700; }
.clockbox.crit .clock { color: var(--red); font-weight: 700; }
.clockbox .bar { height: 3px; background: var(--line-hair); margin-top: 9px; border-radius: 2px; overflow: hidden; }
.clockbox .bar i { display: block; height: 100%; background: var(--link); transition: width 1s linear, background var(--t); }
.clockbox.low .bar i { background: var(--amber); }
.clockbox.crit .bar i { background: var(--red); }

.navgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 11px 12px; }
.navgrid button {
  font-family: inherit; font-size: 12px; font-variant-numeric: tabular-nums;
  height: 28px; border: 1px solid var(--line-soft); background: var(--paper);
  color: var(--ink-mute); border-radius: 2px; cursor: pointer; padding: 0;
  position: relative;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.navgrid button:hover { background: var(--shade); border-color: #b9c2c8; color: var(--ink); }
.navgrid button.done { background: #e8eef2; border-color: #ccd8e0; color: var(--ink); font-weight: 700; }
.navgrid button.here { border-color: var(--ink); color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 1px var(--ink); }
.navgrid button.flag::after {
  content: ""; position: absolute; top: -1px; right: -1px;
  border: 4px solid transparent; border-top-color: var(--flag); border-right-color: var(--flag);
}
.navgrid button.ok  { background: var(--green-wash); border-color: var(--green-line); color: var(--green); font-weight: 700; }
.navgrid button.bad { background: var(--red-wash);   border-color: var(--red-line);   color: var(--red);   font-weight: 700; }

.legend { font-size: 11px; color: var(--ink-faint); padding: 0 12px 10px; line-height: 1.6; }
.legend b { color: var(--ink-mute); font-weight: 700; }

.kbdlist { padding: 9px 12px; font-size: 11.5px; color: var(--ink-mute); line-height: 2; }
.kbdlist kbd {
  font-family: var(--mono); font-size: 10.5px; background: var(--shade);
  border: 1px solid var(--line-soft); border-bottom-width: 2px;
  border-radius: 3px; padding: 1px 4px; color: var(--ink-body); margin-right: 3px;
}

/* ==========================================================================
   Submit
   ========================================================================== */

.submitbar {
  border-top: 1px solid var(--line-soft); padding-top: 16px; margin-top: 6px;
  display: flex; align-items: center; gap: 14px;
}
.submitbar .saved { font-size: 12.5px; color: var(--ink-mute); margin-left: auto; }

.confirm {
  border: 1px solid var(--amber-line); background: var(--amber-wash);
  border-radius: var(--r); padding: 14px 16px; margin-bottom: 16px;
  animation: rise 160ms cubic-bezier(.2,0,.2,1);
}
@keyframes rise { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.confirm h4 { font-size: 14px; margin-bottom: 5px; color: #7a4a08; }
.confirm p { margin: 0 0 10px; font-size: 13.5px; color: #7a4a08; }
.confirm .jump { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.confirm .jump button {
  font-family: inherit; font-size: 12px; font-variant-numeric: tabular-nums;
  padding: 3px 8px; border: 1px solid var(--amber-line); background: var(--paper);
  color: #7a4a08; border-radius: 2px; cursor: pointer; transition: background var(--t);
}
.confirm .jump button:hover { background: #fbf1dc; }
.confirm .acts { display: flex; gap: 9px; }

/* ==========================================================================
   Results
   ========================================================================== */

.result-hero {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 20px; margin-bottom: 20px;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.result-hero.good { box-shadow: inset 3px 0 0 var(--green); }
.result-hero.mid  { box-shadow: inset 3px 0 0 var(--amber); }
.result-hero.bad  { box-shadow: inset 3px 0 0 var(--red); }
.score-big { font-size: 34px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.score-big span { font-size: 17px; color: var(--ink-mute); }
.score-meta { font-size: 12.5px; color: var(--ink-mute); margin-top: 6px; line-height: 1.5; }
.result-hero .verdict { flex: 1 1 260px; min-width: 0; }
.result-hero .verdict h3 { font-size: 15px; margin-bottom: 3px; }
.result-hero .verdict p { margin: 0; font-size: 13.5px; color: var(--ink-mute); line-height: 1.55; }

.toolbar {
  display: flex; align-items: center; gap: 14px;
  padding: 0 0 14px; border-bottom: 1px solid var(--line-hair);
  margin-bottom: 18px; flex-wrap: wrap;
}
.toolbar .spacer { flex: 1 1 auto; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-body); cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track {
  width: 30px; height: 17px; border-radius: 9px; background: #ccd4d8;
  position: relative; transition: background var(--t); flex: 0 0 auto;
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 13px; height: 13px; border-radius: 50%; background: #fff;
  transition: transform var(--t); box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.switch input:checked + .track { background: var(--link); }
.switch input:checked + .track::after { transform: translateX(13px); }
.switch input:focus-visible + .track { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--focus); }

.bd { width: 100%; border-collapse: collapse; font-size: 13px; }
.bd th:first-child, .bd td:first-child { width: 100%; }
.bd th {
  text-align: left; font-weight: 700; font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-mute);
  padding: 0 10px 6px 0; border-bottom: 1px solid var(--line-soft);
}
.bd td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line-hair); }
/* the track carries its own width: a bare block has no intrinsic width, and
   auto table layout will crush the cell to nothing once another column asks
   for the slack */
.bd .bar { width: 120px; }
.bd .bar span {
  display: block; width: 120px; height: 6px;
  background: var(--line-hair); border-radius: 3px; overflow: hidden;
}
@media (max-width: 620px) { .bd .bar, .bd .bar span { width: 76px; } }
.bd .bar span i {
  display: block; height: 100%; min-width: 3px; border-radius: 3px;
  background: var(--green); transition: width 400ms cubic-bezier(.2,0,.2,1);
}
/* a 3px stub for a zero score read as a speck of dirt down the column;
   an empty track says the same thing and says it quietly */
.bd .bar span i[style*="width:0%"] { min-width: 0; }
.bd .bar span i.mid { background: var(--amber); }
.bd .bar span i.bad { background: var(--red); }
.bd .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-mute); }

.verdict-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 14px 10px; padding: 4px 10px; border-radius: 2px;
  font-size: 12.5px; font-weight: 700; border: 1px solid;
  animation: rise 140ms cubic-bezier(.2,0,.2,1);
}
.verdict-chip.ok { background: var(--green-wash); border-color: var(--green-line); color: var(--green); }
.verdict-chip.no { background: var(--red-wash); border-color: var(--red-line); color: var(--red); }
.verdict-chip.part { background: var(--amber-wash); border-color: var(--amber-line); color: var(--amber); }

.picked {
  display: block; padding: 6px 14px 0;
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint);
}

.checkbar { padding: 0 14px 12px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1140px) { :root { --pad: 22px; } .side { flex-basis: 208px; } }
@media (max-width: 1000px) { .coursenav { display: none; } }
@media (max-width: 900px) {
  :root { --pad: 16px; }
  .app { padding-left: 0; }
  .rail { display: none; }
  /* a column flex container keeps align-items from the row rule, which makes
     the children size to their max-content and overflow — stretch them */
  .cols { flex-direction: column; gap: 20px; align-items: stretch; }
  .main, .side { width: 100%; }
  /* questions first; the panels are reference material, not the task */
  .side { position: static; width: 100%; flex-basis: auto; max-height: none; overflow: visible; order: 1; }
  .main { max-width: none; }
  .content { padding: 16px var(--pad) 90px; }
  /* the compact bar is the only place the timer lives on a small screen,
     so it stays open rather than waiting for a scroll */
  .topbar { margin: -16px calc(-1 * var(--pad)) 14px; border-bottom-color: var(--line-soft); }
  .topbar-in { height: 46px; }
  .tb-title { display: none; }
  .side .panel:last-child { display: none; }   /* keyboard hints, no keyboard */
  .navgrid { grid-template-columns: repeat(10, 1fr); }
  h1.page { font-size: 21px; }
}
@media (max-width: 620px) {
  .rrow { grid-template-columns: 1fr; }
  .rtag { text-align: left; padding: 6px 0 0; }
  .mode { flex-direction: column; align-items: stretch; gap: 11px; }
  .mode-act .btn { width: 100%; }
  .navgrid { grid-template-columns: repeat(6, 1fr); }
  .qtext, .opt { font-size: 15px; }
  pre.code, pre.out { font-size: 12px; margin-left: 10px; margin-right: 10px; }
  .score-big { font-size: 28px; }
  .meta-grid { grid-template-columns: 1fr; gap: 0 0; }
  .meta-grid dt { margin-top: 8px; font-size: 12px; }
}

@media print {
  .rail, .coursenav, .side, .toolbar, .submitbar, .topbar { display: none !important; }
  .app { padding-left: 0; }
  .qbox { break-inside: avoid; border-color: #999; }
}

/* ==========================================================================
   Sign in / create account
   ========================================================================== */

body.gate { background: #f7f8f9; }
body.gate .app { display: block; padding: 0; }

.gate-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 32px 20px;
}
.gate-card {
  width: 100%; max-width: 396px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 30px 30px 26px;
  box-shadow: 0 1px 2px rgba(31,43,51,.04), 0 8px 28px -18px rgba(31,43,51,.28);
}
.gate-brand {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; margin-bottom: 12px;
}
.gate-card h1 { font-size: 22px; font-weight: 400; letter-spacing: -.012em; margin-bottom: 7px; }
.gate-sub { font-size: 13.5px; line-height: 1.55; color: var(--ink-mute); margin: 0 0 22px; }

.gate-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line-soft); margin-bottom: 20px; }
.gate-tabs button {
  font-family: inherit; font-size: 13.5px; padding: 8px 2px; margin-right: 20px;
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--ink-mute); cursor: pointer; transition: color var(--t), border-color var(--t);
}
.gate-tabs button:hover { color: var(--ink); }
.gate-tabs button.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--link); }

.gate-form label {
  display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-mute); margin: 0 0 5px; font-weight: 700;
}
.gate-form input {
  width: 100%; font-family: inherit; font-size: 15px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
  color: var(--ink); margin-bottom: 16px;
  transition: border-color var(--t), box-shadow var(--t);
}
.gate-form input:hover { border-color: #a9b4bb; }
.gate-form input:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px rgba(3,116,181,.13); }
.gate-hint { font-size: 11.5px; color: var(--ink-faint); margin: -10px 0 16px; min-height: 15px; }
.gate-err {
  font-size: 13px; color: var(--red); background: var(--red-wash);
  border: 1px solid var(--red-line); border-radius: var(--r);
  padding: 8px 11px; margin-bottom: 14px;
}
.gate-go { width: 100%; padding: 10px; font-size: 14.5px; }
.gate-go[disabled] { opacity: .6; }

/* ==========================================================================
   Class rail + chooser
   ========================================================================== */

.rail-item { display: block; }
.rail-num {
  display: block; margin: 0 auto 4px; width: 26px; height: 26px; line-height: 24px;
  border: 1.5px solid currentColor; border-radius: 50%;
  font-size: 12px; font-weight: 700; opacity: .9;
}
.rail-item.on .rail-num { background: rgba(255,255,255,.16); }
.rail-item { border: 0; background: none; font-family: inherit; cursor: pointer; }
.rail-item:hover { background: rgba(255,255,255,.07); }

.nav-foot {
  margin: 20px 16px 0; padding-top: 13px; border-top: 1px solid var(--line-hair);
}
.nav-foot .who {
  font-size: 12.5px; color: var(--ink); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 5px;
}
.nav-foot .btn-ghost { padding: 3px 7px; margin-left: -7px; }

.class-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 20px; }
.class-card {
  display: block; border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 18px 15px; color: var(--ink-body); text-decoration: none;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.class-card:hover {
  text-decoration: none; border-color: #a9b4bb; background: var(--shade-2);
  box-shadow: 0 1px 0 rgba(31,43,51,.04);
}
.class-card.empty { opacity: .5; cursor: default; }
.class-card.empty:hover { border-color: var(--line); background: none; box-shadow: none; }
.cc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cc-num {
  flex: 0 0 auto; width: 24px; height: 24px; line-height: 22px; text-align: center;
  border: 1.5px solid var(--link); color: var(--link); border-radius: 50%;
  font-size: 12px; font-weight: 700;
}
.cc-name { font-size: 15.5px; font-weight: 700; color: var(--ink); letter-spacing: -.006em; }
.cc-blurb { font-size: 13px; line-height: 1.55; color: var(--ink-mute); margin: 0 0 10px; }
.cc-meta { font-size: 12px; color: var(--ink-faint); }
.cc-meta .chip { margin-left: 2px; }

@media (max-width: 760px) { .class-grid { grid-template-columns: 1fr; } }