/* ─────────────────────────────────────────────────────────────
   code.jdoner.me — design tokens + component styles
   ─────────────────────────────────────────────────────────── */

/* Respect prefers-reduced-motion system setting. Any CSS transition or
   animation below treats this as an instant state change instead of an
   animated one. PLAN §13 + WCAG 2.3.3. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

:root {
  --bg:             #f6f8fa;
  --surface:        #ffffff;
  --surface-raised: #ffffff;
  --text:           #1d2430;
  --text-subtle:    #3d4653;
  --muted:          #5f6b7c;
  --accent:         #1a5490;
  --accent-hover:   #143f6b;
  --accent-soft:    #e7eff8;
  --ok:             #0f7a30;
  --ok-bg:          #e4f6ea;
  --ok-border:      #bfe3cc;
  --bad:            #b42318;
  --bad-bg:         #fdecec;
  --bad-border:     #f7c5c0;
  --warn:           #8a6514;
  --warn-bg:        #fef7e6;
  --warn-border:    #ebd69f;
  --border:         #dde2e8;
  --border-strong:  #c4cbd4;
  /* VS Code Dark+-inspired palette for the IDE textarea + Prism code blocks.
     Keeps enough contrast on small screens while matching what students see
     in every tutorial + in the lab machines. */
  /* EWU Red — reserved for Accept/Save/mutating actions in classroom
     components. Does NOT recolor the existing blue --accent used for
     practice-side hover/focus states. */
  --action:         #a7191e;
  --action-hover:   #83141c;
  --action-soft:    #fdecec;
  --code-bg:        #1e1e1e;
  --code-fg:        #d4d4d4;
  --code-keyword:   #569cd6;   /* public, static, void, if, else */
  --code-type:      #4ec9b0;   /* String, int, class, method names */
  --code-string:    #ce9178;   /* "Hello, World!" */
  --code-number:    #b5cea8;   /* 42, 3.14 */
  --code-comment:   #6a9955;   /* // ... */
  --code-operator:  #d4d4d4;   /* +, ==, etc. — deliberately plain */
  --code-selection: #264f78;
  --radius-sm:      4px;
  --radius-md:      6px;
  --radius-lg:      10px;
  --shadow-sm:      0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md:      0 2px 8px rgba(16, 24, 40, .08);
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
}

/* Disable programming-font ligatures globally. Java/C source uses `==`,
   `!=`, `->`, `>=`, etc., and JetBrains Mono (+ most modern mono fonts)
   collapse those into single glyphs that confuse learners who are trying
   to SEE the operator characters they need to type. */
code, pre, textarea, .code-input, .code-block,
.blank-input, .blanks td code,
.problem-body pre, .problem-body pre code,
pre[class*="language-"], code[class*="language-"] {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0, "clig" 0, "dlig" 0;
  -webkit-font-feature-settings: "liga" 0, "calt" 0, "clig" 0, "dlig" 0;
  -moz-font-feature-settings: "liga=0, calt=0, clig=0, dlig=0";
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { color: var(--text); line-height: 1.25; }
h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; margin-top: 0; }
h2 { font-size: 20px; font-weight: 600; }
h3 { font-size: 17px; font-weight: 600; }
p  { margin: 0 0 1em; }
a  { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.wrap { max-width: 960px; margin: 0 auto; padding: 0 1.5rem; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ── Header ──────────────────────────────────────────────── */
.site-header {
  background: white;
  border-bottom: 1px solid var(--border);
  padding: .9em 0;
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: saturate(180%) blur(8px);
  background: rgba(255,255,255,.85);
}
.site-header .wrap { display: flex; align-items: center; gap: 1.5em; }
.site-header .brand {
  font-weight: 700; font-size: 17px; color: var(--text);
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}
.site-header nav { margin-left: auto; display: flex; gap: 1.1em; align-items: center; flex-wrap: wrap; }
.site-header nav a { color: var(--text-subtle); font-weight: 500; }
.site-header nav a:hover { color: var(--accent); text-decoration: none; }
.site-header nav .who {
  color: var(--muted); font-size: 13px;
  display: inline-flex; align-items: center; gap: .5em;
  padding-left: .9em; border-left: 1px solid var(--border);
}
.site-header nav .who .avatar { border-radius: 50%; display: block; }
.site-header nav form.inline { margin: 0; padding: 0; }
.linklike {
  background: none; border: none; color: var(--accent); cursor: pointer;
  font: inherit; padding: 0; font-weight: 500;
}
.linklike:hover { text-decoration: underline; }

main { padding: 2.2em 0 3.2em; }


/* ── Cards & tables ──────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5em;
  box-shadow: var(--shadow-sm);
}
.table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.table th, .table td {
  padding: .65em .95em; text-align: left;
  border-bottom: 1px solid var(--border);
}
.table th { background: #eef2f6; font-weight: 600; font-size: 13px;
            text-transform: uppercase; letter-spacing: .03em;
            color: var(--text-subtle); }
.table td.num { font-variant-numeric: tabular-nums; text-align: right; }
.table-wide td { padding-top: .9em; padding-bottom: .9em; }
.table tr:hover td { background: #f9fbfd; }

/* ── Tags / badges ───────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: .3em;
  font-size: 12px; padding: 3px 9px;
  border-radius: 999px; font-weight: 600; line-height: 1.2;
}
.tag-ok { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-border); }
.tag-bad { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad-border); }
.tag-pending { background: #eef2f6; color: var(--muted); border: 1px solid var(--border); }
.tag-neutral { background: #f1f4f8; color: var(--text-subtle); border: 1px solid var(--border); font-weight: 500; }

/* ── Flash messages ──────────────────────────────────────── */
.flash { padding: .75em 1.1em; border-radius: var(--radius-md); margin: 0 0 1em; }
.flash-error { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad-border); }
.flash-ok { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-border); }

/* ── Sign-in ─────────────────────────────────────────────── */
.signin {
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.8em;
  box-shadow: var(--shadow-sm);
}
.signin label {
  display: block; margin-bottom: 1.1em; font-weight: 600;
  color: var(--text); font-size: 14px;
}
.signin input[type=email], .signin input[type=text] {
  display: block; width: 100%;
  padding: .6em .8em; margin-top: .35em;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  font: inherit; background: white;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.signin input[type=email]:focus, .signin input[type=text]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ── Buttons ─────────────────────────────────────────────── */
button.primary, a.primary {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .6em 1.4em;
  background: var(--accent); color: white;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  font-weight: 600; font-size: 15px;
  cursor: pointer;
  transition: background .12s ease, box-shadow .12s ease, transform .05s ease;
  text-decoration: none;
}
button.primary:hover, a.primary:hover {
  background: var(--accent-hover); border-color: var(--accent-hover);
  text-decoration: none;
}
button.primary:active { transform: translateY(1px); }
button.secondary, a.secondary {
  padding: .6em 1.2em;
  background: white; color: var(--accent);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-weight: 500; font-size: 15px; cursor: pointer;
  text-decoration: none;
}
button.secondary:hover, a.secondary:hover {
  border-color: var(--accent); background: var(--accent-soft);
}

/* ── Dashboard category grid ─────────────────────────────── */
.cat-grid {
  display: grid; gap: 1.1em;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin: 1.5em 0 2em;
}
.cat-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.3em 1.5em;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
  box-shadow: var(--shadow-sm);
}
.cat-card:hover {
  border-color: var(--accent);
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.cat-card h2 { margin: 0 0 .35em; font-size: 17px; color: var(--text); }
.cat-card .count { margin: 0 0 .7em; color: var(--muted); font-size: 13px; }
.progress {
  height: 7px; background: #e8edf3;
  border-radius: 999px; overflow: hidden;
}
.progress .fill { height: 100%; background: var(--accent); transition: width .4s ease; }
.cat-card.done .progress .fill { background: var(--ok); }

/* ── Problem body ────────────────────────────────────────── */
.problem-body { margin: 1em 0 1.6em; }

/* The code block itself: dark card. */
.problem-body pre, .code-block {
  background: var(--code-bg);
  color: var(--code-fg);
  padding: 1.1em 1.3em;
  border-radius: var(--radius-lg);
  overflow-x: auto;
  line-height: 1.55;
  font-family: var(--font-mono);
  font-size: 13.5px;
  margin: 1.2em 0;
  box-shadow: var(--shadow-sm);
  tab-size: 4;
}

/* Code inside a pre block: no pill, no padding, inherit font+color.
   This rule has higher specificity than .problem-body code below so it wins.
   The previous version of this file had .problem-body code overriding
   .code-block code — which painted every line with a light-gray pill
   against the dark background, making text unreadable.  */
.problem-body pre code {
  background: transparent !important;
  color: inherit;
  padding: 0;
  font: inherit;
  font-family: var(--font-mono) !important;
}

/* Inline code (only in paragraphs, tables, list items, etc. — not inside pre) */
.problem-body :not(pre) > code,
.problem-body p code,
.problem-body td code {
  font-family: var(--font-mono);
  background: #eef2f6;
  color: var(--text);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 92%;
  border: 1px solid var(--border);
}

/* When Prism.js runs, it injects its own theme classes. Our dark background
   still wins because of the .problem-body pre rule above. */
pre[class*="language-"] { background: var(--code-bg) !important; }
:not(pre) > code[class*="language-"] { background: var(--code-bg) !important; color: var(--code-fg) !important; }

/* ── Blanks table ────────────────────────────────────────── */
.answer-form { margin-top: 1em; }
.blanks {
  width: auto;
  border-collapse: separate; border-spacing: 0;
  margin: 1em 0;
}
.blanks th {
  text-align: left;
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600;
  padding: .4em 1.1em .4em 0;
  border-bottom: 1px solid var(--border);
}
.blanks td {
  padding: .5em 1em .5em 0;
  vertical-align: middle;
}
.blanks td code {
  font-family: var(--font-mono); font-size: 13.5px;
  background: #eef2f6; color: var(--text);
  padding: 3px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.blank-input {
  padding: .42em .7em;
  font-family: var(--font-mono); font-size: 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  width: 13em; background: white;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.blank-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.blank-input.ok  { border-color: var(--ok);  background: var(--ok-bg);  }
.blank-input.bad { border-color: var(--bad); background: var(--bad-bg); }
.blank-input.empty { border-color: var(--border-strong); background: #f8fafc; }
.marker { width: 2em; text-align: center; font-size: 15px; }
.marker .tag { padding: 2px 7px; font-size: 14px; font-weight: 700; }

/* ── Action buttons ──────────────────────────────────────── */
.actions { margin: 1.4em 0 .6em; display: flex; gap: .7em; flex-wrap: wrap; }

/* ── Result banner ──────────────────────────────────────── */
.result {
  display: flex; align-items: center; gap: .9em;
  padding: 1em 1.2em;
  border-radius: var(--radius-md);
  margin: 1.2em 0;
  border-width: 1px; border-style: solid;
  border-left-width: 4px;
  font-size: 15px;
}
.result > div { flex: 1; }
.result-ok {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: var(--ok-border);
  font-size: 16px;
}
.result-partial { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); }
.result-icon {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ok);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(15, 122, 48, .25);
}
.canvas-status { margin-left: .3em; }

/* ── Source tag (problem metadata line) ─────────────────── */
.meta-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: .7em;
  color: var(--muted); font-size: 13px;
  margin: -.3em 0 1.2em;
}
.meta-line .source-pill,
.meta-line .points-pill {
  display: inline-block;
  padding: 3px 10px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-subtle);
}

/* ── Back link on problem / category pages ──────────────── */
.back-link {
  display: inline-block;
  color: var(--muted); font-size: 13px; font-weight: 500;
  margin-bottom: .8em;
}
.back-link:hover { color: var(--accent); text-decoration: none; }

/* ── Empty state ─────────────────────────────────────────── */
.empty {
  text-align: center; padding: 2.5em 1em;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}

/* ── GitHub sign-in button ───────────────────────────────── */
.gh-button {
  display: inline-flex; align-items: center; gap: .55em;
  background: #24292f; border-color: #24292f;
}
.gh-button:hover { background: #1f242a; border-color: #1f242a; }
.gh-button svg { flex: none; }

/* ── Toasts (Phase K) — corner on desktop, top on mobile ── */
.toast-stack {
  position: fixed; z-index: 100;
  bottom: 20px; right: 20px;
  display: grid; gap: .55em;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: grid; gap: .15em;
  padding: .85em 1.05em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 260px; max-width: 340px;
  font-size: 14px;
  transition: opacity .35s ease, transform .35s ease;
  position: relative;
}
.toast.toast-leave { opacity: 0; transform: translateY(12px); }
.toast-title { font-weight: 600; display: block; }
.toast-body  { color: var(--text-subtle); }
.toast-close {
  position: absolute; top: 4px; right: 8px;
  background: transparent; border: 0; color: var(--muted);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px;
}
.toast-achievement { border-left-color: var(--accent); }
.toast-full-credit  { border-left-color: var(--ok); }
.toast-level        { border-left-color: #b45c1f; }
.toast-info         { border-left-color: var(--muted); }

@media (max-width: 640px) {
  .toast-stack {
    top: 10px; right: 10px; left: 10px; bottom: auto;
  }
  .toast { max-width: none; min-width: 0; }
}

/* ── Skill bars (Phase K /me/skills) ──────────────────── */
.skill-list, .achievement-list { list-style: none; padding: 0; margin: 1em 0; display: grid; gap: .8em; }
.skill-row {
  padding: .85em 1em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.skill-head {
  display: flex; justify-content: space-between;
  align-items: baseline; gap: .7em;
  margin-bottom: .3em;
}
.skill-row .progress { margin: .3em 0; }

.achievement-list li {
  padding: .8em 1em;
  background: var(--ok-bg); border: 1px solid var(--ok-border);
  border-radius: var(--radius-md);
}
.achievement-list li p { margin: .3em 0 0; font-size: 13px; color: var(--text-subtle); }

/* ── Course settings (Phase I) ─────────────────────────── */
.settings-section {
  margin: 1.8em 0;
  padding: 1.2em 1.4em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.settings-section h2 { margin-top: 0; }
.settings-form .field { margin: .85em 0; display: grid; gap: .3em; }
.settings-form label { font-weight: 500; font-size: 14px; }
.settings-form input[type=text],
.settings-form input[type=number],
.settings-form select {
  padding: .5em .7em;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  font: inherit; background: white;
  min-height: 44px;
}
.settings-form input:focus, .settings-form select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.checkbox-inline { display: flex; align-items: center; gap: .5em; font-weight: 400; }
.checkbox-inline input { width: 18px; height: 18px; }

/* ── Classroom: dashboard tabs + lab cards ───────────────── */

.dashboard-tabs {
  display: flex;
  gap: 0;
  margin: 1.2em 0 1.5em;
  border-bottom: 1px solid var(--border);
}
.dashboard-tab {
  padding: .55em 1em;
  font-weight: 500;
  color: var(--text-subtle);
  text-decoration: none;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  margin-bottom: -1px;
  font-size: 14.5px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.dashboard-tab:hover {
  color: var(--text);
  background: var(--accent-soft);
  text-decoration: none;
}
.dashboard-tab.is-active {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
  border-bottom-color: var(--surface);
  font-weight: 600;
}
.dashboard-tab:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 1px;
}
.dashboard-tab-admin { margin-left: auto; color: var(--action); }

.lab-list {
  list-style: none; padding: 0; margin: 1em 0 0;
  display: grid; gap: .85em;
}
.lab-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: 3px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
.lab-state-available { border-left-color: var(--action); }
.lab-state-accepted  { border-left-color: #4a7fa8; }
.lab-state-graded    { border-left-color: var(--ok); }
.lab-state-locked    { opacity: .6; }

.lab-card-link {
  display: block;
  padding: .95em 1.1em;
  color: inherit;
  text-decoration: none;
}
.lab-card-link:hover { background: #fafbfd; text-decoration: none; }
.lab-card-link:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: -2px;
}
.lab-card-disabled { cursor: not-allowed; }
.lab-card-disabled:hover { background: inherit; }

.lab-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .9em;
  margin-bottom: .4em;
}
.lab-card-title { margin: 0; font-size: 16.5px; font-weight: 600; }
.lab-card-meta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.lab-card-state-line {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .55em;
  font-size: 13.5px;
}
.lab-card-hint { display: inline-flex; gap: .35em; align-items: baseline; }
.lab-card-repo { margin-top: .6em; }
.lab-card-cta  { margin-top: .55em; }

.lab-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
}
.lab-badge-locked    { background: #eef1f5; color: var(--muted); border-color: var(--border); }
.lab-badge-available { background: var(--action-soft); color: var(--action); border-color: var(--action); }
.lab-badge-accepted  { background: #eaf2fa; color: #1a5490; border-color: #c4d7ea; }
.lab-badge-graded    { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); }

.lab-score {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.lab-score-num   { color: var(--ok); }
.lab-score-sep   { color: var(--muted); margin: 0 .15em; }
.lab-score-total { color: var(--text-subtle); }

.repo-ref {
  display: inline-flex;
  gap: .5em;
  align-items: center;
}
.repo-ref-name {
  font-family: var(--font-mono);
  font-size: 13px;
  background: #f4f6f9;
  color: var(--text);
  padding: 3px 7px;
  border-radius: 2px;
  border: 1px solid var(--border);
  overflow-wrap: anywhere;
}
.repo-ref-copy {
  font-size: 12px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 2px;
  background: transparent;
  color: var(--text-subtle);
  border: 1px solid var(--border);
  cursor: pointer;
  min-height: 28px;
}
.repo-ref-copy:hover { color: var(--action); border-color: var(--action); }
.repo-ref-copy:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 1px;
}

.action-link {
  color: var(--action);
  font-weight: 600;
}

/* ── Classroom: lab detail ─────────────────────────────── */

.lab-detail-head { margin-bottom: 1.4em; }
.lab-detail-head h1 { margin-bottom: .25em; }
.lab-detail-meta {
  display: flex; flex-wrap: wrap; gap: .4em;
  color: var(--text-subtle);
  font-size: 13.5px;
}
.lab-detail-meta-sep { color: var(--muted); }
.lab-detail-meta-item { color: inherit; }

.lab-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1em 1.2em;
  margin: 1em 0;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
.lab-panel-title {
  margin: 0 0 .55em;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-subtle);
  font-weight: 600;
}
.lab-panel-score .lab-score { font-size: 22px; }
.lab-panel-score p { margin: .35em 0 0; }

.lab-actions {
  display: flex; flex-wrap: wrap; gap: .5em;
  margin-top: .7em;
}

.action-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: .55em 1em;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
}
.action-button:hover {
  border-color: var(--action);
  color: var(--action);
  text-decoration: none;
}
.action-button:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}
.action-button:disabled {
  opacity: .55; cursor: not-allowed; border-color: var(--border);
  color: var(--muted);
}
.action-button-primary {
  background: var(--action);
  border-color: var(--action);
  color: white;
  font-weight: 600;
}
.action-button-primary:hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
  color: white;
}
.action-button-primary:disabled { background: #c4878a; border-color: #c4878a; color: #f7dcde; }
.action-button-large { padding: .75em 1.4em; font-size: 15.5px; min-height: 48px; }

.lab-accept-explain {
  background: #fcfdfe;
  border: 1px solid var(--border);
  border-left: 3px solid var(--action);
  border-radius: 3px;
  padding: 1em 1.2em;
  margin: 1.2em 0;
}
.lab-accept-explain-list {
  padding-left: 1.2em; margin: .3em 0 .4em;
  font-size: 14px; line-height: 1.55;
}
.lab-accept-explain-list li + li { margin-top: .25em; }
.lab-accept-explain-list code.repo-ref-name { margin: 0 2px; }

.lab-accept-form {
  margin: 1em 0;
  display: flex; align-items: center; gap: .8em; flex-wrap: wrap;
}
.lab-accept-hint { font-size: 13px; }

.lab-description {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
}
.lab-description pre {
  white-space: pre-wrap;
  font-family: var(--font-sans);
  font-size: 14.5px;
  background: transparent;
  padding: 0; margin: .3em 0 1em;
  color: var(--text);
}
.lab-description-details { margin: 1em 0; }
.lab-description-details summary {
  cursor: pointer; padding: .25em 0;
  color: var(--text-subtle); font-weight: 500;
}

.flash-info {
  background: #eaf2fa;
  color: #1a5490;
  border: 1px solid #c4d7ea;
}

@media (max-width: 640px) {
  .lab-actions .action-button { flex: 1 0 100%; }
  .action-button-large { width: 100%; }
  .lab-detail-meta { font-size: 13px; gap: .3em; }
}

/* ── Classroom: admin panel ────────────────────────────── */

.admin-head {
  display: flex; align-items: baseline; gap: .6em;
  margin-bottom: .5em;
}
.admin-head h1 { margin: 0; }
.admin-role-pill {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: 2px;
  border: 1px solid var(--border);
  color: var(--text-subtle);
  background: #f4f6f9;
}
.admin-role-instructor { color: var(--action); border-color: var(--action); background: var(--action-soft); }
.admin-role-ta { color: #1a5490; border-color: #c4d7ea; background: #eaf2fa; }

.admin-bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: .7em; margin: .9em 0;
  flex-wrap: wrap;
}
.admin-bar p { margin: 0; }

.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.admin-table th, .admin-table td {
  padding: .45em .75em;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.admin-table thead th {
  background: #eef2f6;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-subtle);
  position: sticky; top: 0; z-index: 1;
}
.admin-table td.num, .admin-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.admin-table tr:hover td { background: #fafbfd; }
.admin-slug {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
  background: #f4f6f9;
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid var(--border);
  overflow-wrap: anywhere;
}

.matrix-wrap { max-height: 70vh; }
.admin-matrix .matrix-student-head, .admin-matrix .matrix-student {
  position: sticky; left: 0;
  background: var(--surface);
  min-width: 180px;
  z-index: 2;
  text-align: left;
  border-right: 1px solid var(--border);
}
.admin-matrix .matrix-student-head {
  background: #eef2f6;
  z-index: 3;  /* above lab headers and student cells */
}
.admin-matrix .matrix-lab-head {
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
  writing-mode: initial;
  text-align: center;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-matrix .matrix-cell {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}
.admin-matrix .matrix-cell-accepted { color: var(--text); }
.admin-matrix .matrix-cell-graded   { color: var(--ok); font-weight: 600; }
.admin-matrix .matrix-cell a { color: inherit; text-decoration: none; }
.admin-matrix .matrix-cell a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .dashboard-tabs { gap: 0; }
  .dashboard-tab { padding: .5em .8em; font-size: 14px; }
  .dashboard-tab-admin { margin-left: 0; }
  .lab-card-head { flex-direction: column; gap: .2em; }
  .lab-card-meta { align-self: flex-start; }
  .repo-ref { flex-wrap: wrap; }
}

/* ── Course dashboard: week timeline + set cards (Phase H) ── */
.weeks { list-style: none; padding: 0; margin: 1.4em 0; display: grid; gap: 1.2em; }
.week-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1em 1.2em 1.3em;
  box-shadow: var(--shadow-sm);
}
.week-block.current {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-md);
}
.week-head {
  display: flex; align-items: baseline; gap: .9em;
  padding-bottom: .6em; border-bottom: 1px solid var(--border);
  margin-bottom: .9em;
}
.week-label {
  font-family: var(--font-mono); font-size: 13px; color: var(--muted);
  letter-spacing: .04em;
}
.week-title { margin: 0; font-size: 18px; font-weight: 600; }

.set-card {
  display: block;
  color: inherit; text-decoration: none;
  padding: .75em .95em;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-top: .55em;
  background: var(--surface);
  transition: border-color .15s ease, background .15s ease;
}
.set-card:hover {
  border-color: var(--accent);
  text-decoration: none;
  background: var(--accent-soft);
}
.set-card.state-locked {
  opacity: .5; cursor: not-allowed;
  background: #f3f5f8;
}
.set-card.state-complete {
  border-color: var(--ok-border);
  background: var(--ok-bg);
}
.set-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5em;
}
.set-kind { font-weight: 500; }
.set-progress {
  display: flex; align-items: center; gap: .8em; margin-top: .45em;
}
.set-progress .progress { flex: 1; }
.no-content { margin: .35em 0 0; }
.unlocks { margin: .35em 0 0; }

.set-items { list-style: none; padding: 0; margin: 1em 0; display: grid; gap: .55em; }
.set-item {
  display: flex; align-items: center; gap: .7em;
  padding: .75em .95em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.set-item.done { border-color: var(--ok-border); background: var(--ok-bg); }
.set-item a {
  flex: 1;
  display: flex; align-items: baseline; gap: .8em;
  color: var(--text);
  text-decoration: none;
}
.set-item a:hover .item-title { color: var(--accent); text-decoration: underline; }
.item-title { font-weight: 500; }
.item-type  { font-family: var(--font-mono); }

/* ── Polymorphic problem inputs (Phase D) ───────────────── */
.short-answer-input { width: 100%; max-width: 30em; font-size: 15px; }

.mc-options { border: 0; padding: 0; margin: 1em 0; display: grid; gap: .55em; }
.mc-option {
  display: flex; align-items: flex-start; gap: .7em;
  padding: .7em .95em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer; min-height: 44px;
}
.mc-option input { margin-top: .25em; flex: none; }
.mc-option:hover { border-color: var(--accent); }
.mc-option.picked, .mc-option:has(input:checked) {
  border-color: var(--accent); background: var(--accent-soft);
}

.code-input {
  display: block;
  width: 100%;
  padding: 1em 1.1em;
  font-family: var(--font-mono); font-size: 13.5px;
  line-height: 1.6;
  background: var(--code-bg); color: var(--code-fg);
  border: 1px solid #3c3c3c;
  border-top: 3px solid #007acc;   /* VSCode active-editor top stripe */
  border-radius: var(--radius-md);
  tab-size: 4; resize: vertical;
  caret-color: #aeafad;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02), var(--shadow-sm);
}
.code-input::selection { background: var(--code-selection); }
.code-input:focus-visible {
  outline: 0;
  border-color: #007acc;
  box-shadow: 0 0 0 2px rgba(0,122,204,.35), var(--shadow-md);
}
.code-input.ok  { border-color: var(--ok);  box-shadow: 0 0 0 2px var(--ok-bg);  }
.code-input.bad { border-color: var(--bad); box-shadow: 0 0 0 2px var(--bad-bg); }

/* Prism token colors — aligned with the dark+ palette. Only override the
   ones we actively hit in Java/C code. Prism's default theme still applies
   for tokens we don't touch. */
pre[class*="language-"], code[class*="language-"] {
  background: var(--code-bg) !important;
  color: var(--code-fg) !important;
}
.token.keyword, .token.builtin { color: var(--code-keyword) !important; }
.token.class-name, .token.function, .token.variable { color: var(--code-type) !important; }
.token.string, .token.char { color: var(--code-string) !important; }
.token.number, .token.boolean { color: var(--code-number) !important; }
.token.comment { color: var(--code-comment) !important; font-style: italic; }
.token.operator, .token.punctuation { color: var(--code-operator) !important; }

.check-list { list-style: none; padding: 0; margin: 1em 0; display: grid; gap: .35em; }
.check-list li { display: flex; align-items: center; gap: .6em; }

.grader-output { margin: 1em 0; }
.grader-output summary { cursor: pointer; padding: .25em 0; }

/* ── Course switcher (native <select> on all sizes; mobile-friendly by default) */
.course-switcher { margin: 0; display: inline-flex; align-items: center; }
.course-switcher select {
  font: inherit;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: .35em 2.1em .35em .75em;
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 15px) 50%,
    calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
  min-height: 36px;   /* ≥44pt touch target reached with padding on mobile */
}
.course-switcher select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}
.course-badge {
  display: inline-block;
  padding: 3px 10px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent);
  font-weight: 600; font-size: 13px;
  border: 1px solid var(--accent);
}
.instructor-badge {
  display: inline-block;
  padding: 3px 10px; border-radius: var(--radius-sm);
  background: var(--warn-bg); color: var(--warn);
  font-weight: 600; font-size: 12px;
  border: 1px solid var(--warn-border);
  text-transform: uppercase; letter-spacing: .04em;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Enroll / course-pick lists ─────────────────────────── */
.enroll-form { margin-top: 1.2em; }
.course-list { list-style: none; padding: 0; margin: 1.4em 0; display: grid; gap: .8em; }
.course-option {
  display: flex; align-items: flex-start; gap: .9em;
  padding: 1.1em 1.3em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
  min-height: 44px;
}
a.course-option:hover, .course-option:has(input:focus-visible),
.course-option:has(input:checked), .course-option.chosen {
  border-color: var(--accent); box-shadow: var(--shadow-md);
  text-decoration: none;
}
.course-option input { margin-top: .2em; flex: none; width: 18px; height: 18px; }
.course-option-body { display: grid; gap: .15em; }
.course-option .course-code { font-family: var(--font-mono); color: var(--text); }
.course-option .course-title { font-weight: 500; }
.course-option .course-term { font-size: 13px; }

.course-head { margin-bottom: 1.2em; }
.course-head h1 { margin-bottom: .15em; }

.week-list {
  list-style: none; padding: 0; margin: 1em 0;
  display: grid; gap: .5em;
}
.week-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline; gap: 1em;
  padding: .6em .9em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.week-num { font-family: var(--font-mono); color: var(--muted); font-size: 13px; min-width: 4.5em; }
.week-theme { font-weight: 500; }
.week-dates { justify-self: end; }


/* ── Mobile (< 640px) ────────────────────────────────────── */
@media (max-width: 640px) {
  html { font-size: 14px; }
  .wrap { padding: 0 1rem; }
  h1 { font-size: 22px; }
  h2 { font-size: 17px; }
  main { padding: 1.4em 0 2.4em; }

  .site-header .wrap { flex-wrap: wrap; gap: .6em; row-gap: .8em; }
  .site-header nav { width: 100%; gap: .7em 1em; row-gap: .4em; justify-content: flex-start; margin-left: 0; }
  .site-header nav .who { padding-left: 0; border-left: none; }
  .site-header nav .who-name { max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .cat-grid { grid-template-columns: 1fr; gap: .8em; }
  .cat-card { padding: 1em 1.1em; }
  .cat-card h2 { font-size: 16px; }

  .problem-body pre, .code-block {
    padding: .8em .9em;
    font-size: 12.5px;
    border-radius: var(--radius-md);
    /* Let the pre scroll horizontally but keep it in the content column */
    margin-left: -1rem; margin-right: -1rem;
    border-radius: 0;
  }

  /* Stack the blanks table as card-like rows instead of a two-column table */
  .blanks, .blanks tbody, .blanks tr, .blanks td { display: block; }
  .blanks thead { display: none; }
  .blanks tr {
    border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: .55em .8em; margin-bottom: .7em;
    background: var(--surface);
  }
  .blanks td { padding: 0; }
  .blanks td:first-child {
    font-size: 13px; color: var(--muted);
    margin-bottom: .3em;
  }
  .blanks td code { font-size: 13px; }
  .blank-input { width: 100%; font-size: 15px; padding: .5em .7em; }
  .marker { text-align: left; width: auto; margin-top: .3em; }

  /* Tables become horizontally scrollable on very narrow screens */
  .table { font-size: 13px; }
  .table th, .table td { padding: .5em .6em; }

  .actions { gap: .5em; }
  button.primary, a.primary, button.secondary, a.secondary {
    width: 100%; justify-content: center;
  }

  .signin { padding: 1.3em 1.1em; }
  .gh-button { width: 100%; justify-content: center; }

  .meta-line { gap: .4em; font-size: 12px; }

  /* 320px fallback — critical paths must not horizontal-scroll */
  main { padding-top: 1.1em; }
  h1 { font-size: 20px; }

  /* Course switcher — make the native select prominent on mobile */
  .course-switcher select {
    font-size: 15px;
    padding: .55em 2.2em .55em .9em;
    min-height: 44px;           /* Apple minimum touch target */
  }
  .week-row {
    grid-template-columns: 1fr;
    gap: .25em;
  }
  .week-dates { justify-self: start; }
}