/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --color-primary: #1a56db;
  --color-primary-dark: #1e429f;
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-border: #e2e8f0;
  --color-text: #1e293b;
  --color-muted: #64748b;
  --color-user-bubble: #1a56db;
  --color-bot-bubble: #f1f5f9;
  --color-error: #dc2626;
  --color-success: #16a34a;
  --color-primary-soft: #dbeafe;     /* tint of the primary color: perspective bars */
  --color-primary-ink: #1e3a8a;
  --color-divider: #cbd5e1;          /* the bars between the code page's panes */
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.1);
}

html { font-size: 16px; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ===== Header ===== */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: .5rem 0;
}
.site-header .container { display: flex; align-items: center; }
.site-title { font-weight: 600; font-size: 1.1rem; color: var(--color-primary); }
/* The students' header: the Coached Thinking logo, and the light / dark switch on the right; edge to edge */
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1.5rem; }
.site-footer-inner { padding: 0 1.5rem; }
.pub-header-inner--wide { padding: 0 1.5rem; }
.site-brand { display: flex; align-items: center; }
.site-brand-logo { height: 44px; }
body.full-screen .site-header { flex-shrink: 0; padding: .2rem 0; }
body.full-screen .site-header-inner { padding: 0 .75rem; }

/* ══ Impression and Hold to Account fill the window: the questions on the left (scrolling, their
   button always in view), the case / instructions / the locked code on the right, wide; drag the
   bar between them (work-split.js) ══ */
.work-split { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: row-reverse; }   /* the pane left, the questions right */
.work-form {
  flex: 0 0 auto; width: var(--work-form-w, 42%); min-width: 340px; max-width: 70%;
  display: flex; flex-direction: column; min-height: 0; background: var(--color-bg);
}
.work-split:not(:has(.work-pane)) .work-form { width: 100%; max-width: none; }
.work-form-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 1.25rem 1.5rem; }
.work-split:not(:has(.work-pane)) .work-form-scroll > * { max-width: 860px; margin-left: auto; margin-right: auto; }
.work-actions {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .65rem 1.5rem; background: var(--color-surface); border-top: 1px solid var(--color-border);
}
.work-actions .btn { margin-left: auto; }
.work-grip:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -1px; }
.work-pane { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--color-surface); }
.work-pane .side-pane-body { font-size: .95rem; line-height: 1.7; }
.work-split .hold-code-side { position: static; max-height: none; border: 0; border-radius: 0; }
/* The questions' heading and the instructor's optional note above them */
.impression-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 .75rem; color: var(--color-text); }
.impression-intro {
  margin: 0 0 1rem; padding: .75rem 1rem; border-radius: var(--radius); white-space: pre-wrap; line-height: 1.6;
  background: var(--color-primary-soft, #eef4ff); color: var(--color-text); border: 1px solid var(--color-border);
}
@media (max-width: 900px) {
  body.full-screen:has(.work-split) { height: auto; overflow: auto; }
  body.full-screen:has(.work-split) .main-content { display: block; }
  .work-split { flex-direction: column; }
  .work-form { width: auto; max-width: none; min-width: 0; }
  .work-form-scroll { overflow: visible; }
  .work-actions { position: sticky; bottom: 0; }
  .work-grip { display: none; }
  .work-pane { order: -1; max-height: 55vh; border-bottom: 1px solid var(--color-border); }
}
body.full-screen .site-brand-logo { height: 46px; margin: -6px 0; }   /* the image's own padding, trimmed */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0;
  padding: 0; border: 1px solid var(--color-border); border-radius: 999px; background: transparent;
  color: var(--color-muted); cursor: pointer; transition: background .15s, color .15s;
}
.theme-toggle:hover { background: var(--color-bot-bubble); color: var(--color-text); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .theme-toggle-sun { display: none; }
html.coach-dark .theme-toggle .theme-toggle-sun { display: block; }
html.coach-dark .theme-toggle .theme-toggle-moon { display: none; }
body.full-screen .theme-toggle { width: 30px; height: 30px; }
/* The logo's black lettering, white in the dark theme (its blues stay blue) */
html.coach-dark .site-logo-img:not(.site-logo-img--header) { filter: invert(1) hue-rotate(180deg) brightness(1.15); }

/* The signed-in student in the header (_StudentMenu): My assignments, and their name opening Your account / Sign out */
.site-header-right { display: flex; align-items: center; gap: .75rem; }
.student-menu { display: flex; align-items: center; gap: .9rem; font-size: .875rem; }
.student-menu-link { color: var(--color-muted); text-decoration: none; white-space: nowrap; }
.student-menu-link:hover { color: var(--color-text); }
.student-menu-who { position: relative; }
.student-menu-who > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .3rem;
  padding: .3rem .6rem; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text);
}
.student-menu-who > summary::-webkit-details-marker { display: none; }
.student-menu-who > summary::after { content: "▾"; font-size: .7rem; color: var(--color-muted); }
.student-menu-who > summary:hover { background: var(--color-bot-bubble); }
.student-menu-who > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.student-menu-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student-menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 170px; padding: .3rem;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}
.student-menu-pop form { margin: 0; }
.student-menu-pop a, .student-menu-pop button {
  display: block; width: 100%; text-align: left; padding: .45rem .7rem; border: 0; border-radius: 6px;
  background: none; color: var(--color-text); font: inherit; text-decoration: none; cursor: pointer;
}
.student-menu-pop a:hover, .student-menu-pop button:hover { background: var(--color-bot-bubble); }
body.full-screen .student-menu { font-size: .8rem; gap: .7rem; }
body.full-screen .student-menu-who > summary { padding: .15rem .55rem; }
@media (max-width: 600px) {
  .student-menu-link { display: none; }
  .student-menu-name { max-width: 110px; }
  .pub-header-inner--wide .pub-header-left .pub-nav-link { display: none; }   /* The Framework */
}

/* ===== Footer ===== */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 1rem 0;
  margin-top: 3rem;
  color: var(--color-muted);
  font-size: .875rem;
}
.site-footer a { color: var(--color-muted); }

/* ===== Main content ===== */
.main-content { padding: 1.5rem; }   /* edge to edge: no centred container */

/* ===== Card ===== */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
}
.card-title { font-size: 1.25rem; font-weight: 600; margin: 0 0 1rem; }
.card-subtitle { color: var(--color-muted); margin-bottom: 1.5rem; font-size: .925rem; }

/* ===== Forms ===== */
.form-group { margin-bottom: 1.25rem; }
label { display: block; font-weight: 500; margin-bottom: .35rem; font-size: .925rem; }
.form-control {
  width: 100%;
  padding: .55rem .75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color .15s;
  background: var(--color-surface);
  color: var(--color-text);
}
.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26,86,219,.15);
}
textarea.form-control { resize: vertical; min-height: 100px; }
select.form-control { cursor: pointer; }

.form-hint { font-size: .8rem; color: var(--color-muted); margin-top: .25rem; }

.check-group { display: flex; flex-direction: column; gap: .5rem; }
.check-item { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.check-item input[type=checkbox], .check-item input[type=radio] { cursor: pointer; }

.likert-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.likert-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  color: var(--color-muted);
  cursor: pointer;
}
.likert-option input[type=radio] { cursor: pointer; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem 1.25rem;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, opacity .15s;
  text-decoration: none;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-dark); }
.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.btn-outline:hover:not(:disabled) { background: rgba(26,86,219,.06); }
.btn-danger { background: var(--color-error); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #b91c1c; }
.btn-sm { padding: .35rem .8rem; font-size: .875rem; }
.btn-block { width: 100%; justify-content: center; }

/* ===== Alerts ===== */
.alert {
  padding: .85rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: .925rem;
}
.alert-error { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; }
.alert-success { background: #dcfce7; border: 1px solid #86efac; color: #166534; }
.alert-info { background: #dbeafe; border: 1px solid #93c5fd; color: #1e40af; }
.alert-warning { background: #fef9c3; border: 1px solid #fde047; color: #854d0e; }

/* ===== Step indicator ===== */
.step-bar {
  display: flex;
  gap: .5rem;
  margin-bottom: 2rem;
  align-items: center;
}
.step { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--color-muted); }
.step.active { color: var(--color-primary); font-weight: 600; }
.step.done { color: var(--color-success); }
.step-dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700;
  flex-shrink: 0;
}
.step.active .step-dot { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.step.done .step-dot { background: var(--color-success); color: #fff; border-color: var(--color-success); }
.step-connector { height: 2px; background: var(--color-border); flex: 1; min-width: 12px; }

/* ===== Case display ===== */
.case-body {
  background: #fafafa;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  font-size: .95rem;
  line-height: 1.7;
  max-height: 55vh;
  overflow-y: auto;
  margin-bottom: 1.25rem;
}

/* ===== Chat interface ===== */
.chat-layout {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 190px);
  min-height: 400px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius) var(--radius) 0 0;
}

.message {
  max-width: 78%;
  padding: .65rem 1rem;
  border-radius: 18px;
  font-size: .95rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
/* ===== Case markdown rendering ===== */
.case-markdown-body * { margin: 0; margin-block: 0; padding: 0; }
.case-markdown-body p { margin-bottom: .6rem; }
.case-markdown-body h1, .case-markdown-body h2,
.case-markdown-body h3, .case-markdown-body h4,
.case-markdown-body ul, .case-markdown-body ol { margin-bottom: .35rem; }
.case-markdown-body *:last-child { margin-bottom: 0; }
.case-markdown-body h1 { font-weight: 700; font-size: 1.2rem; }
.case-markdown-body h2 { font-weight: 700; font-size: 1.05rem; }
.case-markdown-body h3, .case-markdown-body h4 { font-weight: 700; font-size: 1rem; }
.case-markdown-body ul, .case-markdown-body ol { padding-left: 1.25rem; }
.case-markdown-body strong { font-weight: 700; }
.case-markdown-body hr { border: none; border-top: 1px solid var(--color-border); margin: .4rem 0; }
.case-markdown-body table { border-collapse: collapse; margin-bottom: .6rem; font-size: .9em; }
.case-markdown-body th, .case-markdown-body td { border: 1px solid var(--color-border); padding: .3rem .5rem; text-align: left; vertical-align: top; }
.case-markdown-body th { font-weight: 600; background: var(--color-bg, #f8fafc); }
.case-markdown-body img { max-width: 100%; height: auto; }
.case-markdown-body em { font-style: italic; }
.case-markdown-body blockquote { border-left: 3px solid var(--color-border); padding-left: .75rem; margin-bottom: .6rem; }

.message.assistant { white-space: normal; }
.message.assistant p { margin: 0 0 .5rem; }
.message.assistant p:last-child { margin-bottom: 0; }
.message.assistant ul, .message.assistant ol { margin: .25rem 0 .5rem 1.25rem; padding: 0; }
.message.assistant li { margin-bottom: .2rem; }
.message.assistant strong { font-weight: 600; }
.message.assistant code { background: rgba(0,0,0,.07); border-radius: 3px; padding: .1em .35em; font-size: .88em; }
.message.assistant pre { background: rgba(0,0,0,.07); border-radius: 6px; padding: .6rem .8rem; overflow-x: auto; margin: .4rem 0; }
.message.assistant pre code { background: none; padding: 0; }
.message.user {
  background: var(--color-user-bubble);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.message.assistant {
  background: var(--color-bot-bubble);
  color: var(--color-text);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.message.error { background: #fee2e2; color: #991b1b; align-self: flex-start; }
.message-time {
  font-size: .7rem;
  color: var(--color-muted);
  margin-top: .15rem;
  text-align: right;
}
.message.assistant + .message-time { text-align: left; }

.chat-input-area {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: .75rem;
}
.chat-input-row {
  display: flex;
  gap: .5rem;
  align-items: flex-end;
}
#messageInput {
  flex: 1;
  resize: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .5rem .75rem;
  font-family: inherit;
  font-size: .95rem;
  min-height: 44px;
  max-height: 180px;
  overflow-y: auto;
}
#messageInput:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26,86,219,.12);
}
.typing-indicator {
  display: none;
  color: var(--color-muted);
  font-size: .85rem;
  padding: .25rem .5rem;
  font-style: italic;
}

.submit-section {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
}

/* ===== Modal ===== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 2rem;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.modal-title { font-size: 1.15rem; font-weight: 600; margin: 0 0 .75rem; }
.modal-body { color: var(--color-muted); margin-bottom: 1.25rem; font-size: .95rem; }
.modal-actions { display: flex; gap: .75rem; justify-content: flex-end; }
.lock-grade { color: var(--color-text, #1e293b); }

/* ===== Hold to Account for code (FinalRecommendation, python-data) ===== */
.hold-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.25rem; align-items: start; }
.hold-code-side {
  position: sticky; top: 1rem; max-height: calc(100vh - 2rem);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
}
.hold-code-head {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .55rem .9rem; border-bottom: 1px solid var(--color-border); background: #f8fafc;
  font-weight: 600; font-size: .9rem;
}
.hold-code-name { font-weight: 400; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; color: var(--color-muted); }
.hold-code-tabs { display: flex; gap: .25rem; flex-wrap: wrap; }
.hold-code-tab {
  border: 1px solid var(--color-border); background: #fff; color: var(--color-text); border-radius: 6px;
  padding: .15rem .55rem; font: 400 .8rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; cursor: pointer;
}
.hold-code-tab.active { background: #eef2ff; border-color: #a5b4fc; color: #3730a3; }
.hold-code-body { overflow: auto; flex: 1; }
.hold-code { font: .82rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: .4rem 0; min-width: max-content; }
.hold-line { display: flex; white-space: pre; padding-right: 1rem; }
.hold-line.hl { background: #fef9c3; box-shadow: inset 3px 0 0 #eab308; }
.hold-ln { flex: none; width: 3.2rem; padding-right: .9rem; text-align: right; color: #7c8799; user-select: none; }
.hold-grade { margin: .75rem 0 0; font-size: .92rem; }
.hold-grading { display: inline-flex; align-items: center; gap: .55rem; color: var(--color-muted); }
.hold-grading .py-ring { width: 1.1rem; height: 1.1rem; border-width: .18rem; }
.hold-lines {
  display: inline-block; margin-right: .35rem; padding: .05rem .5rem; border-radius: 999px;
  border: 1px solid #fcd34d; background: #fffbeb; color: #92400e; font-size: .75rem; font-weight: 600; cursor: pointer;
  vertical-align: 1px;
}
.hold-lines:hover { background: #fef3c7; }
.hold-p + .hold-p { border-top: 1px solid var(--color-border); margin-top: 1.1rem; padding-top: 1.1rem; }
.hold-p-scenario { margin: 0 0 .5rem; font-size: .92rem; }
.hold-p-tag {
  display: inline-block; margin-right: .35rem; padding: .05rem .5rem; border-radius: 999px; vertical-align: 1px;
  background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd; font-size: .72rem; font-weight: 700;
}
.hold-p-actions:not([hidden]) { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .6rem; }
.hold-p-status { font-size: .85rem; color: var(--color-muted); display: inline-flex; align-items: center; gap: .45rem; }
.hold-p-ring { width: 1rem; height: 1rem; border-width: .16rem; }
.hold-p-result { margin-top: .75rem; }
.hold-p-runs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; }
.hold-p-run-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #4f46e5; font-weight: 700; margin-bottom: .3rem; }
.hold-p-out {
  margin: 0; padding: .55rem .7rem; max-height: 16rem; overflow: auto; background: #f8fafc; border: 1px solid var(--color-border);
  border-radius: 6px; font: .78rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre;
}
.hold-p-out mark, .hold-p-out.changed { background: #fef9c3; }
.hold-p-err { margin-top: .4rem; color: #b91c1c; background: #fef2f2; border-color: #fecaca; white-space: pre-wrap; }
.hold-p-note, .hold-p-problem { margin: 0; font-size: .88rem; color: var(--color-muted); }
.hold-p-follow { margin: .9rem 0 0; }
@media (max-width: 600px) { .hold-p-runs { grid-template-columns: 1fr; } }
.hold-loading { display: flex; align-items: center; gap: .75rem; color: var(--color-muted); font-size: .92rem; }
@media (max-width: 900px) {
  .hold-layout { grid-template-columns: 1fr; }
  .hold-code-side { position: static; max-height: 70vh; order: -1; }
}
.lock-warn { color: #b45309; }

/* ===== Tables (admin) ===== */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--color-border); }
th { font-weight: 600; background: #f1f5f9; }
tr:last-child td { border-bottom: none; }
.badge {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 9999px;
  font-size: .75rem;
  font-weight: 600;
}
.badge-treatment { background: #dbeafe; color: #1e40af; }
.badge-control { background: #f3e8ff; color: #6b21a8; }
.badge-test { background: #fef9c3; color: #854d0e; }
.badge-submitted { background: #dcfce7; color: #166534; }
.badge-progress { background: #e0f2fe; color: #0369a1; }
.badge-consented { background: #f1f5f9; color: #475569; }

/* ===== Admin layout ===== */
.admin-body { background: #f1f5f9; }
.admin-header {
  background: #1e293b;
  padding: .75rem 0;
}
.admin-header .site-title { color: #e2e8f0; }
.admin-header .container { display: flex; align-items: center; justify-content: space-between; }
.admin-nav { display: flex; gap: 1.25rem; }
.admin-nav a { color: #94a3b8; text-decoration: none; font-size: .9rem; }
.admin-nav a:hover { color: #e2e8f0; }

/* ===== Consent ===== */
.consent-box {
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  font-size: .9rem;
  max-height: 320px;
  overflow-y: auto;
  line-height: 1.65;
}
.consent-checkbox { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1.25rem; }
.consent-checkbox input { margin-top: .2rem; cursor: pointer; flex-shrink: 0; }

/* ===== Misc utilities ===== */
.text-muted { color: var(--color-muted); }
.text-center { text-align: center; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.gap-1 { gap: .5rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.w-full { width: 100%; }
.success-icon { font-size: 3rem; color: var(--color-success); margin-bottom: 1rem; }
hr { border: none; border-top: 1px solid var(--color-border); margin: 1.5rem 0; }
.mono { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: .9em; }
.text-left { text-align: left !important; }
.nowrap { white-space: nowrap; }

/* ===== Icon button ===== */
.icon-btn {
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  padding: .2rem .55rem;
  border-radius: 4px;
  font-size: .8rem;
  color: var(--color-muted);
  transition: background .15s, color .15s;
  white-space: nowrap;
  font-family: inherit;
  line-height: 1.6;
}
.icon-btn:hover { background: var(--color-border); color: var(--color-text); }

/* ===== Chat layout (updated) ===== */
.chat-outer {
  display: flex;
  flex-direction: row-reverse;   /* the case / instructions / work on the left, the coach on the right */
  gap: 1rem;
  height: calc(100vh - 190px);
  min-height: 400px;
}
.chat-outer .chat-layout {
  flex: 1;
  min-width: 0;
  height: 100%;
}
.chat-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}
.chat-instruction-card {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius);
  padding: .85rem 1rem;
  font-size: .88rem;
  line-height: 1.6;
  align-self: stretch;
  flex-shrink: 0;
}
.chat-instruction-card > strong { display: block; margin-bottom: .25rem; color: #1e40af; font-size: .9rem; }
.chat-instruction-card p { margin: 0; color: #1e40af; }
.phase-progress-bar { display: flex; align-items: center; gap: .65rem; padding: .4rem 1rem; background: #eff6ff; border-bottom: 1px solid #bfdbfe; flex-shrink: 0; }
.phase-progress-label { font-size: .75rem; color: #1e40af; white-space: nowrap; }
.phase-segments { display: flex; gap: 3px; flex: 1; }
.phase-segment { flex: 1; height: 6px; border-radius: 3px; background: #bfdbfe; }
.phase-segment.filled { background: #1e40af; }

/* A bar in the chat where each perspective starts; earlier perspectives' messages are faded */
.phase-divider {
  display: flex; align-items: center; justify-content: center;
  margin: 1.1rem 0 .7rem; padding: .4rem .9rem; border-radius: 999px;
  background: var(--color-primary-soft); color: var(--color-primary-ink);
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  font-size: .82rem; letter-spacing: .01em; text-align: center;
}
.phase-divider strong { font-weight: 700; }
.phase-divider--current {
  background: var(--color-primary); color: #fff; border-color: var(--color-primary);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.message--earlier { opacity: .6; transition: opacity .15s ease; }
.message.message--earlier:hover { opacity: 1; }

/* ===== Impression page two-column layout ===== */
.impression-outer {
  position: relative;
}
.impression-form-side {
  margin-right: 396px;
}
.impression-case-side {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 380px;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.impression-case-side .case-overlay-body {
  flex: 1;
  overflow-y: auto;
}

/* ===== Case slide-over overlay ===== */
.case-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 92vw);
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: -4px 0 28px rgba(0,0,0,.14);
  z-index: 50;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s ease;
}
.case-overlay.open { transform: translateX(0); }

.case-overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.18);
  z-index: 49;
  display: none;
}
.case-overlay-backdrop.open { display: block; }

.case-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  background: #f8fafc;
}
.case-overlay-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
}

/* ===== Pinned case panel (in-flow) ===== */
.case-pinned-panel {
  display: none;
  width: 380px;
  flex-shrink: 0;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
}
.case-pinned-panel.visible { display: flex; }

/* ===== Submission panel (slides up from bottom) ===== */
.submission-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-top: 2px solid var(--color-primary);
  box-shadow: 0 -4px 24px rgba(0,0,0,.12);
  z-index: 40;
  transform: translateY(100%);
  transition: transform .3s ease;
  max-height: 50vh;
  display: flex;
  flex-direction: column;
}
.submission-panel.open { transform: translateY(0); }

.submission-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  background: #f0f7ff;
  user-select: none;
}
.submission-panel.minimized .submission-panel-header {
  cursor: pointer;
  border-bottom: none;
}
.submission-panel-body {
  padding: 1rem 1.25rem;
  overflow-y: auto;
  flex: 1;
}

/* ===== Completion certificate ===== */
.completion-cert {
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.completion-cert-header {
  background: var(--color-primary);
  color: #fff;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.completion-cert-badge {
  font-size: 1.5rem;
  width: 46px;
  height: 46px;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.completion-cert-title { font-size: 1.1rem; font-weight: 700; }
.completion-cert-subtitle { font-size: .85rem; opacity: .85; margin-top: .1rem; }
.completion-cert-rows {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.completion-cert-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--color-border);
}
.completion-cert-row:last-child { border-bottom: none; padding-bottom: 0; }
.completion-cert-label {
  font-size: .85rem;
  color: var(--color-muted);
  font-weight: 500;
  min-width: 130px;
  flex-shrink: 0;
}
.completion-cert-value { font-weight: 500; text-align: right; word-break: break-all; }
.completion-cert-footer {
  background: #f8fafc;
  padding: .9rem 1.5rem;
  font-size: .82rem;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  line-height: 1.65;
}

/* ===== Likert Scale ===== */
.likert-item {
  padding: 1.25rem 0;
}
.likert-item--bordered {
  border-bottom: 1px solid var(--color-border);
}
.likert-question {
  margin: 0 0 .85rem;
  font-weight: 500;
  line-height: 1.5;
}
.likert-scale {
  display: flex;
  gap: .25rem;
  align-items: flex-start;
}
.likert-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
.likert-label input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.likert-circle {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-muted);
  transition: border-color .15s, background .15s, color .15s;
}
.likert-label:hover .likert-circle {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.likert-circle.selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.likert-anchor {
  font-size: .68rem;
  color: var(--color-muted);
  text-align: center;
  line-height: 1.3;
}

/* ===== Public / Marketing Layout ===== */

.pub-body { background: var(--color-bg); }

/* Public header */
.pub-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 30;
}
.pub-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.pub-header-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.pub-logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
}
.pub-logo-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
  letter-spacing: -.01em;
}
.coach-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
  letter-spacing: 0;
}
.coach-mark--sm { width: 22px; height: 22px; font-size: .8rem; border-radius: 5px; }

.pub-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.pub-nav-link {
  color: var(--color-muted);
  text-decoration: none;
  font-size: .925rem;
  transition: color .15s;
}
.pub-nav-link:hover { color: var(--color-text); }

/* Public footer */
.pub-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: 2rem 0;
  margin-top: 0;
}
.pub-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  text-align: center;
}
.pub-footer-brand {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  font-size: .95rem;
}
.pub-footer-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.pub-footer-links a {
  color: var(--color-muted);
  text-decoration: none;
  font-size: .875rem;
}
.pub-footer-links a:hover { color: var(--color-text); }
.pub-footer-copy {
  font-size: .8rem;
  color: var(--color-muted);
  margin: 0;
}

/* ===== Hero Section ===== */
.hero {
  padding: 5rem 0 4rem;
}
.hero-inner {
  display: flex;
  align-items: center;
  gap: 4rem;
}
.hero-copy {
  flex: 1;
  min-width: 0;
}
.hero-eyebrow {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 .75rem;
}
.hero-headline {
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 1.25rem;
  letter-spacing: -.02em;
  color: var(--color-text);
}
.hero-sub {
  font-size: 1.075rem;
  color: var(--color-muted);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 0 2rem;
}
.hero-cta-row {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.btn-lg { padding: .75rem 1.75rem; font-size: 1.025rem; }
.hero-student-link {
  font-size: .875rem;
  color: var(--color-muted);
  margin: 0;
}
.hero-student-link a { color: var(--color-primary); text-decoration: none; }
.hero-student-link a:hover { text-decoration: underline; }

/* Hero device mockup */
.hero-visual {
  flex: 0 0 420px;
  max-width: 420px;
}
.hero-device {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,.1);
  overflow: hidden;
}
.hero-device-bar {
  height: 36px;
  background: #f1f5f9;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
}
.hero-device-bar::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%; background: #fca5a5; display: block;
  box-shadow: 14px 0 0 #fcd34d, 28px 0 0 #86efac;
}
.hero-device-content {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.hd-bubble {
  padding: .65rem .9rem;
  border-radius: 14px;
  font-size: .85rem;
  line-height: 1.55;
}
.hd-bubble--student {
  background: var(--color-user-bubble);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  max-width: 88%;
}
.hd-bubble--ai {
  background: var(--color-bot-bubble);
  color: var(--color-text);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  max-width: 88%;
}

/* ===== Marketing Sections ===== */
.marketing-section {
  padding: 4.5rem 0;
}
.marketing-section.bg-alt {
  background: #f1f5f9;
}
.section-header {
  text-align: center;
  margin-bottom: 3rem;
}
.section-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  margin: 0 0 .75rem;
  letter-spacing: -.01em;
}
.section-sub {
  color: var(--color-muted);
  font-size: 1rem;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.65;
}
.section-cta {
  text-align: center;
  margin-top: 2.5rem;
}
.content-narrow {
  max-width: 720px;
  margin: 0 auto;
}
.content-narrow h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 1rem;
}
.content-narrow p {
  color: var(--color-muted);
  line-height: 1.75;
  margin-bottom: 1rem;
}

/* ===== Problem / Solution two-col ===== */
.two-col-problem {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.problem-col {
  padding: 2rem;
  border-radius: 12px;
}
.problem-col--left {
  background: #fff8f8;
  border: 1px solid #fca5a5;
}
.problem-col--right {
  background: #f0fdf4;
  border: 1px solid #86efac;
}
.problem-icon {
  font-size: 2rem;
  margin-bottom: .75rem;
}
.problem-heading {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 .75rem;
}
.problem-col p {
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0;
  font-size: .95rem;
}

/* ===== COACH Cards ===== */
.coach-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}
.coach-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem;
  transition: box-shadow .2s, transform .2s;
}
.coach-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  transform: translateY(-2px);
}
.coach-card-letter {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.coach-card-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 .5rem;
}
.coach-card-body {
  color: var(--color-muted);
  font-size: .875rem;
  line-height: 1.65;
  margin: 0;
}

/* ===== How It Works Steps ===== */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  position: relative;
}
.step-item {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.step-number {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step-title {
  font-size: 1rem;
  font-weight: 700;
  margin: .25rem 0 0;
}
.step-body {
  color: var(--color-muted);
  font-size: .9rem;
  line-height: 1.65;
  margin: 0;
}

/* ===== Research note ===== */
.research-note {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 2rem;
  max-width: 820px;
  margin: 0 auto;
}
.research-note-icon { font-size: 2rem; flex-shrink: 0; }
.research-note-body h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .5rem; }
.research-note-body p { color: #1e40af; line-height: 1.7; margin: 0 0 .5rem; font-size: .925rem; }
.research-note-body p:last-child { margin: 0; }

/* ===== CTA Band ===== */
.cta-band {
  background: var(--color-primary);
  padding: 4rem 0;
}
.cta-band-inner {
  text-align: center;
}
.cta-band-heading {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 .75rem;
  letter-spacing: -.01em;
}
.cta-band-sub {
  color: rgba(255,255,255,.8);
  font-size: 1rem;
  margin: 0 0 2rem;
  line-height: 1.6;
}
.btn-white {
  background: #fff;
  color: var(--color-primary);
  font-weight: 700;
}
.btn-white:hover { background: #f0f7ff; }

/* ===== Auth cards (login / register) ===== */
.auth-card-wrap {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}
.auth-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
}
.auth-card--wide { max-width: 520px; }
.auth-card-logo {
  text-align: center;
  margin-bottom: 1.25rem;
}
.auth-card-title {
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  margin: 0 0 .35rem;
  letter-spacing: -.01em;
}
.auth-card-sub {
  color: var(--color-muted);
  text-align: center;
  margin: 0 0 1.75rem;
  font-size: .925rem;
}
.auth-switch {
  color: var(--color-muted);
  font-size: .875rem;
  text-align: center;
  margin: 0;
}
.auth-switch a { color: var(--color-primary); text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

/* The sign-in pages (Students/*, Faculty/Register): the compass atop the card; dark mode turns its black
   pivot white and keeps the blue (as the header logo) */
.auth-mark { display: inline-block; width: 64px; height: 64px; }
html.coach-dark .auth-mark { filter: invert(1) hue-rotate(180deg) brightness(1.15); }
.auth-readonly { padding: .55rem .75rem; border: 1px dashed var(--color-border); border-radius: var(--radius); word-break: break-all; }
.auth-google-form { margin: 0; }
.btn-google {
  background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 500; gap: .6rem;
}
.btn-google:hover:not(:disabled) { background: #f8f9fa; }
html.coach-dark .btn-google { background: #131314; color: #e3e3e3; border-color: #8e918f; }
html.coach-dark .btn-google:hover:not(:disabled) { background: #1f1f20; }
.auth-or { display: flex; align-items: center; gap: .75rem; margin: 1.1rem 0; color: var(--color-muted); font-size: .8rem; text-align: center; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--color-border); }
.auth-domain-hint {
  margin: -1rem 0 1.25rem; padding: .5rem .75rem; border-radius: 8px; font-size: .85rem; text-align: center;
  background: var(--color-primary-soft, #eef4ff); color: var(--color-primary-ink, #1e40af);
}
.auth-email-line { text-align: center; font-weight: 600; margin: -1rem 0 1.25rem; word-break: break-all; }
.auth-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; }
@media (max-width: 420px) { .auth-name-row { grid-template-columns: 1fr; } }
.auth-notice-icon { font-size: 2.4rem; text-align: center; margin-bottom: .5rem; }
.auth-card form + .auth-switch { margin-top: 1rem; }
.auth-switch + .auth-switch { margin-top: .4rem; }
.auth-faculty { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--color-border); font-size: .8rem; }
.join-code-input { font-size: 1.4rem; letter-spacing: .2em; text-align: center; text-transform: uppercase; font-weight: 700; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* The student's pages: My assignments (My/Index), their account, and reviewing submitted work (My/Review) */
.my-page { max-width: 820px; margin: 2rem auto 3rem; padding: 0 1rem; }
.my-page--wide { max-width: 960px; }
.my-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1rem; }
.my-title { font-size: 1.6rem; font-weight: 800; margin: 0; letter-spacing: -.01em; color: var(--color-text); }
.my-back { display: inline-block; font-size: .85rem; color: var(--color-muted); text-decoration: none; margin-bottom: .35rem; }
.my-back:hover { color: var(--color-text); }
.my-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px;
  padding: 1.25rem 1.5rem; margin-bottom: 1rem;
}
.my-card-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 .35rem; color: var(--color-text); }
.my-card-sub { font-size: .95rem; font-weight: 700; margin: 1.25rem 0 .6rem; }
.my-card-note { color: var(--color-muted); font-size: .9rem; margin: 0 0 1rem; }
.my-card > .my-card-note:last-child { margin-bottom: 0; }
.my-course-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.my-course-who { color: var(--color-muted); font-size: .85rem; }
.my-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.my-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--color-border); }
.my-item form { margin: 0; flex-shrink: 0; }
.my-item .btn { flex-shrink: 0; }
.my-item-title { font-weight: 600; color: var(--color-text); }
.my-item-meta { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .8rem; color: var(--color-muted); margin-top: .15rem; }
/* The instructor's folders (as on their course page), each opening and closing */
.my-folder { margin-top: .5rem; border-top: 1px solid var(--color-border); }
.my-folder-head {
  display: flex; align-items: center; gap: .5rem; width: 100%; padding: .7rem 0 .55rem; border: 0; background: none;
  font: inherit; color: var(--color-text); text-align: left; cursor: pointer;
}
.my-folder-head:hover .my-folder-name { text-decoration: underline; }
.my-folder-head:focus-visible { outline: 2px solid var(--color-primary, #2563eb); outline-offset: 2px; border-radius: 4px; }
.my-folder-chev { display: inline-block; width: .9rem; text-align: center; color: var(--color-muted); transition: transform .15s; }
.my-folder-chev::before { content: "▾"; }
.my-folder.is-folded .my-folder-chev { transform: rotate(-90deg); }
.my-folder-name { font-weight: 700; }
.my-folder-count { margin-left: auto; font-size: .8rem; color: var(--color-muted); white-space: nowrap; }
.my-folder-list { margin: 0 0 0 1.4rem; }
.my-folder.is-folded .my-folder-list { display: none; }
.my-list--loose { margin-top: .5rem; }
.my-date { color: var(--color-muted); font-size: .8rem; }
.my-date--past { color: #b45309; font-weight: 600; }   /* due, and the due date has passed */
.my-done { color: var(--color-success); font-weight: 600; }
.my-going { color: var(--color-primary); font-weight: 600; }
html.coach-dark .my-going { color: #4daafc; }
.my-join-form { display: flex; gap: .6rem; margin-top: .6rem; }
.my-join-form .form-control { max-width: 320px; text-transform: uppercase; letter-spacing: .08em; }
.my-join-form .form-control::placeholder, .join-code-input::placeholder { text-transform: none; letter-spacing: normal; font-weight: 400; font-size: 1rem; }
.my-readonly { padding: .55rem .75rem; border: 1px dashed var(--color-border); border-radius: var(--radius); color: var(--color-muted); }
.my-form { max-width: 520px; }
.rv-title { display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; font-weight: 700; margin: 0 0 .9rem; color: var(--color-text); }
.rv-letter {
  display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; flex-shrink: 0;
  border-radius: 50%; background: #4f46e5; color: #fff; font-size: .85rem;
}
.rv-qa { margin: 0; }
.rv-qa dt { font-weight: 600; font-size: .88rem; color: var(--color-text); margin-top: .9rem; }
.rv-qa dt:first-child { margin-top: 0; }
.rv-qa dd { margin: .3rem 0 0; padding: .55rem .75rem; background: var(--color-bg); border-radius: 8px; font-size: .92rem; white-space: pre-wrap; line-height: 1.6; }
.rv-final { white-space: pre-wrap; line-height: 1.6; padding: .75rem .9rem; margin-bottom: 1rem; border-radius: 8px;
            background: var(--color-primary-soft, #eef2ff); border: 1px solid var(--color-border); }
.rv-chat { display: flex; flex-direction: column; gap: .6rem; }
.rv-msg { max-width: 82%; padding: .55rem .8rem; border-radius: 12px; font-size: .92rem; line-height: 1.55; }
.rv-msg--assistant { background: var(--color-bot-bubble); color: var(--color-text); align-self: flex-start; }
.rv-msg--user { background: var(--color-user-bubble); color: #fff; align-self: flex-end; }
.rv-msg--user .rv-msg-body { white-space: pre-wrap; }
.rv-msg-meta { font-size: .72rem; opacity: .75; margin-bottom: .2rem; }
.rv-msg-body p { margin: 0 0 .45rem; }
.rv-msg-body p:last-child { margin-bottom: 0; }
.rv-msg-body ul, .rv-msg-body ol { margin: 0 0 .45rem; padding-left: 1.2rem; }
.rv-msg-body pre, .rv-msg-body code { background: var(--code-bg, rgba(0, 0, 0, .06)); border-radius: 4px; }
.rv-msg-body pre { padding: .5rem .7rem; overflow-x: auto; }
.rv-mc { margin: 0; padding-left: 1.3rem; }
.rv-mc-q { margin-bottom: 1rem; }
.rv-mc-stem { margin-bottom: .35rem; }
.rv-mc-stem p { margin: 0 0 .3rem; }
.rv-mc-ans { display: flex; gap: .45rem; font-size: .9rem; padding: .2rem 0; }
.rv-mc-ans p { display: inline; margin: 0; }
.rv-mc-ans.ok .rv-mc-mark { color: var(--color-success); }
.rv-mc-ans.bad .rv-mc-mark { color: var(--color-error); }
.rv-mc-feedback { font-size: .85rem; color: var(--color-muted); padding-left: 1.3rem; }
.rv-score { margin: 0 0 .6rem; }
.rv-tests { width: 100%; border-collapse: collapse; font-size: .86rem; margin-bottom: .8rem; }
.rv-tests th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); padding: .3rem .5rem; background: none; }
.rv-tests td { padding: .4rem .5rem; border-top: 1px solid var(--color-border); vertical-align: top; }
.rv-tests tr.pass .rv-tests-icon { color: var(--color-success); }
.rv-tests tr.fail .rv-tests-icon { color: var(--color-error); }
.rv-tests tr.notrun td { color: var(--color-muted); }
.rv-tests-pts { white-space: nowrap; }
.rv-tests-msg { color: var(--color-muted); white-space: pre-wrap; word-break: break-word; }
.rv-tests-hidden { margin-left: .4rem; font-size: .7rem; border: 1px solid var(--color-border); color: var(--color-muted); border-radius: 999px; padding: .02rem .45rem; }
.rv-file { margin-top: .5rem; }
.rv-file summary { cursor: pointer; font-size: .88rem; }
.rv-code { margin: .35rem 0 0; padding: .6rem .75rem; background: #0f172a; color: #e2e8f0; border-radius: 8px;
           font: .8rem/1.5 ui-monospace, 'SF Mono', Menlo, monospace; white-space: pre; overflow-x: auto; max-height: 480px; }
@media (max-width: 640px) {
  .my-item { flex-direction: column; align-items: flex-start; }
  .rv-msg { max-width: 100%; }
}
@media print {
  .pub-header, .pub-footer, .rv-print, .my-back { display: none !important; }
  .my-card { break-inside: auto; border-color: #ccc; }
  .rv-msg { break-inside: avoid; }
}

/* ===== Page hero (inner pages like Framework) ===== */
.page-hero {
  background: #f8fafc;
  border-bottom: 1px solid var(--color-border);
  padding: 3.5rem 0 2.5rem;
  text-align: center;
}
.page-hero-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  margin: 0 0 .75rem;
  letter-spacing: -.02em;
}
.page-hero-sub {
  color: var(--color-muted);
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ===== Framework practice sections ===== */
.fw-practice {
  padding: 4rem 0;
}
.fw-practice.bg-alt { background: #f1f5f9; }
.fw-practice-inner {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}
.fw-practice-letter {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 900;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fw-practice-body { flex: 1; }
.fw-practice-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0 0 .25rem;
  letter-spacing: -.01em;
}
.fw-practice-stage {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 1rem;
}
.fw-practice-body p {
  color: var(--color-muted);
  line-height: 1.75;
  margin: 0 0 .9rem;
  font-size: .95rem;
}
.fw-practice-body p:last-child { margin-bottom: 0; }
.fw-why-it-matters {
  background: #eff6ff;
  border-left: 3px solid var(--color-primary);
  padding: .75rem 1rem;
  border-radius: 0 6px 6px 0;
  font-size: .9rem;
  color: #1e40af;
  line-height: 1.6;
  margin-top: 1rem;
}

/* ===== Framework summary table ===== */
.fw-table-wrap { max-width: 900px; margin: 0 auto; }
.fw-table { font-size: .875rem; }
.fw-table th { background: #f1f5f9; white-space: nowrap; }
.fw-table td:first-child { white-space: nowrap; }

/* ===== Faculty Portal ===== */
.faculty-portal-body { background: #f1f5f9; }

.faculty-header {
  background: #1e293b;
  padding: .75rem 0;
}
.faculty-header-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.faculty-portal-nav {
  display: flex;
  align-items: center;
  gap: 1.35rem;
}
/* Where to go, after the logo; the site's administration and the instructor's own, on the right */
.faculty-nav-side { margin-left: auto; gap: 1rem; }
.faculty-nav-link--active { position: relative; }
.faculty-nav-main .faculty-nav-link--active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.55rem; height: 2px; border-radius: 2px; background: #60a5fa;
}
/* Courses and Masters: each course on a line, its code first */
.faculty-nav-courses { min-width: 280px; max-width: 420px; max-height: 70vh; overflow-y: auto; }
.faculty-nav-dropdown-item.faculty-nav-course { display: flex; align-items: baseline; gap: .6rem; white-space: normal; }
.faculty-nav-course.is-current { background: #273449; color: #e2e8f0; }
.faculty-nav-pill { flex-shrink: 0; font-size: .74rem; font-weight: 700; color: #93c5fd; letter-spacing: .01em; }
.faculty-nav-course-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faculty-nav-dropdown-note { padding: .6rem 1rem; font-size: .84rem; color: #64748b; }
.faculty-nav-link {
  color: #94a3b8;
  text-decoration: none;
  font-size: .9rem;
  transition: color .15s;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.faculty-nav-link:hover { color: #e2e8f0; }
.faculty-nav-link--active { color: #e2e8f0; }

/* Admin menu (site admins only) */
.faculty-nav-menu { position: relative; }
.faculty-nav-menu-btn { display: flex; align-items: center; gap: .35rem; }
.faculty-nav-menu-btn[aria-expanded="true"] .faculty-nav-chevron { transform: rotate(180deg); }
.faculty-nav-menu .faculty-nav-dropdown { left: 0; right: auto; min-width: 220px; }
.faculty-nav-menu .faculty-nav-dropdown-item { white-space: nowrap; }
.faculty-nav-side .faculty-nav-menu .faculty-nav-dropdown { left: auto; right: 0; }
.faculty-nav-badge {
  background: #ef4444; color: #fff; border-radius: 9999px;
  font-size: .68rem; font-weight: 700; padding: .05rem .4rem; line-height: 1.4;
  display: inline-block; white-space: nowrap;
}
.faculty-nav-dropdown-item .faculty-nav-badge { margin-left: .35rem; }

/* Faculty profile dropdown */
.faculty-nav-user { position: relative; }
.faculty-nav-user-btn {
  display: flex; align-items: center; gap: .45rem;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: .9rem; padding: .3rem .6rem .3rem 1rem;
  border-left: 1px solid #334155; border-radius: 0 6px 6px 0;
  color: #94a3b8; transition: background .15s, color .15s;
}
.faculty-nav-user-btn:hover { background: #334155; color: #e2e8f0; }
.faculty-nav-initials {
  width: 26px; height: 26px; border-radius: 50%;
  background: #3b82f6; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700; flex-shrink: 0; letter-spacing: .02em;
}
.faculty-nav-username { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faculty-nav-chevron { font-size: .72rem; transition: transform .18s; }
.faculty-nav-user-btn[aria-expanded="true"] .faculty-nav-chevron { transform: rotate(180deg); }

.faculty-nav-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + .5rem);
  min-width: 190px; background: #1e293b;
  border: 1px solid #334155; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.4); z-index: 300; overflow: hidden;
}
.faculty-nav-dropdown.open { display: block; }
.faculty-nav-dropdown-item {
  display: block; width: 100%; padding: .6rem 1rem;
  color: #94a3b8; text-decoration: none; font-size: .875rem;
  background: none; border: none; cursor: pointer;
  font-family: inherit; text-align: left;
  transition: background .12s, color .12s;
}
.faculty-nav-dropdown-item:hover { background: #334155; color: #e2e8f0; }
.faculty-nav-dropdown-divider { border-top: 1px solid #334155; margin: .25rem 0; }

.faculty-main { padding: 2rem 1.5rem 4rem; }
@media (max-width: 820px) {
  .faculty-header-inner { gap: 1.1rem; }
  .faculty-portal-nav { gap: .9rem; }
  .faculty-nav-username { display: none; }
  .faculty-nav-user-btn { padding-left: .7rem; }
}
@media (max-width: 560px) {
  .faculty-header-inner { flex-wrap: wrap; row-gap: .5rem; }
  .faculty-nav-main { order: 3; width: 100%; }
  .faculty-nav-main .faculty-nav-link--active::after { bottom: -.3rem; }
  .faculty-nav-courses { min-width: 0; width: calc(100vw - 2rem); }
}
.faculty-page-header { margin-bottom: 1.5rem; }
.faculty-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

/* Faculty stats grid */
.faculty-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: .5rem;
}
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}
.stat-label {
  font-size: .825rem;
  color: var(--color-muted);
  font-weight: 500;
}

/* Generate codes form */
.form-row-3 {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* New codes display */
.new-codes-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.code-chip {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  padding: .25rem .65rem;
  font-size: .9rem;
  letter-spacing: .05em;
}

/* ===== Admin faculty review cards ===== */
.faculty-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.faculty-review-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  box-shadow: var(--shadow);
}
.frc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
}
.frc-name { font-weight: 700; font-size: 1.05rem; }
.frc-institution { font-size: .875rem; color: var(--color-muted); }
.frc-email { font-size: .875rem; color: var(--color-primary); text-decoration: none; }
.frc-email:hover { text-decoration: underline; }
.frc-profile-link {
  font-size: .875rem;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}
.frc-profile-link:hover { text-decoration: underline; }
.frc-date { font-size: .8rem; }
.frc-actions {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .25rem;
}
.deny-details summary::-webkit-details-marker { display: none; }
.deny-form {
  margin-top: .65rem;
  padding: .85rem;
  background: #fff8f8;
  border: 1px solid #fca5a5;
  border-radius: var(--radius);
  width: 100%;
}

/* ===== Pending page ===== */
.pending-card { text-align: left; }
.pending-icon { font-size: 2.5rem; text-align: center; margin-bottom: 1rem; }
.pending-lead {
  font-size: 1.05rem;
  color: var(--color-muted);
  text-align: center;
  margin: 0 0 1.75rem;
}
.pending-steps {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.pending-step {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1rem;
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.pending-step-icon { font-size: 1.35rem; flex-shrink: 0; line-height: 1; }
.pending-step-body strong { display: block; margin-bottom: .25rem; font-size: .95rem; }
.pending-step-body p { margin: 0; color: var(--color-muted); font-size: .875rem; line-height: 1.6; }
.pending-step-body a { color: var(--color-primary); }

/* ===== Section detail view ===== */
.faculty-section-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .5rem;
}
.faculty-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}
.gen-codes-summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .95rem;
  padding: .5rem 0;
  color: var(--color-primary);
  list-style: none;
}
.gen-codes-summary::-webkit-details-marker { display: none; }
.gen-codes-summary::before { content: '▸ '; }
details[open] .gen-codes-summary::before { content: '▾ '; }
.gen-codes-body { padding-top: 1rem; }

/* ===== Two-column form row ===== */
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .hero-inner { flex-direction: column; gap: 2.5rem; }
  .hero-visual { flex: none; max-width: 100%; width: 100%; }
  .two-col-problem { grid-template-columns: 1fr; }
  .fw-practice-inner { flex-direction: column; }
  .faculty-stats-grid { grid-template-columns: 1fr 1fr; }
  .form-row-3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hero { padding: 3rem 0 2rem; }
  .pub-nav .pub-nav-link { display: none; }
  .coach-cards { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .faculty-stats-grid { grid-template-columns: 1fr; }
}

/* ===== Print styles ===== */
@media print {
  .site-header, .site-footer, .no-print, .btn { display: none !important; }
  body { background: #fff; }
  .main-content { padding: 0; }
  .container { max-width: 100%; }
  .completion-cert { border: 2px solid #000; box-shadow: none; }
  .completion-cert-header {
    background: #1a56db !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ===== Logo image ===== */
.site-logo-img {
  height: 68px;
  width: auto;
  display: block;
  object-fit: contain;
}
.site-logo-img--sm {
  height: 32px;
}
.site-logo-img--header {
  height: 48px;
  filter: brightness(0) invert(1);   /* white logo on dark headers */
}
.admin-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* ===== Workstream D: Python Data Module workbench tabs & REPL ===== */

/* Workbench tab bar */
.workbench-header { padding: 0 !important; }
/* The header is light (.case-overlay-header), so the tabs use dark text */
.workbench-tabs {
  display: flex;
  gap: 0;
  padding: .5rem .75rem 0;
}
.workbench-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #64748b;
  cursor: pointer;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .35rem .75rem .4rem;
  transition: color .15s, border-color .15s;
}
.workbench-tab-btn:hover { color: #0f172a; }
.workbench-tab-btn.active {
  border-bottom-color: #1a56db;
  color: #1a56db;
}

/* Workbench panel content area */
.workbench-body { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.workbench-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  font-size: .875rem;
}
.workbench-instructions { line-height: 1.65; }

/* Dataset schema table */
.ds-schema {
  border-collapse: collapse;
  font-size: .8rem;
  width: 100%;
  margin: .75rem 0;
}
.ds-schema th, .ds-schema td {
  border: 1px solid #e2e8f0;
  padding: .3rem .5rem;
  text-align: left;
}
.ds-schema th { background: #f1f5f9; font-weight: 600; }
.ds-schema code { font-size: .75rem; }
.ds-desc  { font-weight: 600; margin-bottom: .25rem; }
.ds-rows  { color: #64748b; margin-bottom: .25rem; }
.ds-summary { color: #64748b; font-size: .8rem; }

/* Pyodide loading state */
.pyodide-loading-state {
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.pyodide-progress-bar-track {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 9999px;
  overflow: hidden;
}
.pyodide-progress-bar-fill {
  height: 100%;
  background: #1a56db;
  border-radius: 9999px;
  transition: width .4s ease;
}

/* REPL layout */
.repl-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
}
.repl-output-area {
  flex: 1;
  overflow-y: auto;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .8rem;
  padding: .5rem;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 6px 6px 0 0;
  min-height: 120px;
}
.repl-input-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .5rem;
  border-top: 1px solid #334155;
  background: #1e293b;
  border-radius: 0 0 6px 6px;
}
.repl-prompt {
  color: #94a3b8;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .8rem;
  padding-top: .35rem;
  user-select: none;
  flex-shrink: 0;
}
.repl-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #e2e8f0;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .8rem;
  resize: none;
  outline: none;
  line-height: 1.5;
  min-height: 1.5rem;
}
.repl-actions {
  padding: .5rem;
  border-top: 1px solid #e2e8f0;
}

/* Cell display */
.repl-cell { margin-bottom: .5rem; }
.repl-cell-input {
  color: #93c5fd;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: .2rem;
}
.repl-cell-output {
  color: #e2e8f0;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.repl-error { color: #f87171; }
.repl-plot {
  max-width: 100%;
  border-radius: 4px;
  margin-top: .4rem;
  display: block;
}
.repl-banner {
  background: #1e3a5f;
  border-left: 3px solid #3b82f6;
  color: #93c5fd;
  font-size: .78rem;
  padding: .4rem .75rem;
  margin-bottom: .75rem;
  border-radius: 0 4px 4px 0;
}

/* Fix panel height inside pinned layout for python-data */
.case-pinned .case-pinned-panel .workbench-body {
  height: calc(100% - 2.5rem);
}
.case-pinned .case-pinned-panel #panel-console {
  padding: .5rem;
  flex-direction: column;
}
/* display:flex would override the hidden attribute, which switches tabs */
.case-pinned .case-pinned-panel #panel-console:not([hidden]) { display: flex; }

/* ══ Full-screen chat pages: case study (case | chat) and code (instructions | code window | chat) ══ */
body.full-screen { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
body.full-screen .main-content { flex: 1; min-height: 0; max-width: none; margin: 0; padding: 0; display: flex; }
body.full-screen .chat-outer { flex: 1; height: auto; min-height: 0; min-width: 0; gap: 0; }   /* never wider than the window: the code window gives way */
body.full-screen .chat-layout { height: 100%; background: var(--color-surface); }
body.full-screen .chat-topbar { margin: 0; padding: .45rem .75rem; border-bottom: 1px solid var(--color-border); gap: .5rem; }
body.full-screen .chat-messages { border: 0; border-radius: 0; }
body.full-screen .chat-input-area { border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; padding: .6rem; }
body.full-screen .case-pinned-panel { border-radius: 0; border-width: 0 1px 0 0; }
/* Code pages: the chat keeps a width of its own (drag the bar), the code window takes the rest */
.ide-layout .chat-layout { flex: 0 0 auto; width: var(--ide-chat-w, 380px); min-width: 260px; max-width: 60vw; }
.ide-splitter { flex: 0 0 4px; cursor: col-resize; background: var(--color-divider); touch-action: none; }
.ide-splitter:hover, .ide-splitter.dragging { background: #0078d4; }
.ide-splitter[hidden], .chat-layout[hidden] { display: none !important; }
/* Code pages: » in the coach's bar folds it to a strip on the right edge */
.chat-hide { margin-left: .25rem; font-size: 1.05rem; line-height: 1; padding: .1rem .4rem; color: inherit; }

/* The case / instructions pane on the left (case study, code pages): open, or folded to a strip
   along the left edge that brings it back */
.side-pane {
  position: relative; flex: 0 0 auto; width: 380px; min-width: 260px; max-width: 50vw; height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
}
.side-pane[hidden] { display: none; }
body.full-screen .side-pane { border-width: 0 1px 0 0; border-radius: 0; }
.side-pane-grip { position: absolute; z-index: 2; right: 0; top: 0; bottom: 0; width: 5px; cursor: col-resize; touch-action: none; }
.side-pane-grip:hover, .side-pane-grip.dragging { background: var(--color-primary); opacity: .5; }
.side-pane-head {
  display: flex; align-items: center; gap: .35rem; flex-shrink: 0; padding: .45rem .5rem .45rem 1rem;
  background: #f8fafc; border-bottom: 1px solid var(--color-border);
}
.side-pane-title { flex: 1; min-width: 0; font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-pane-hide { font-size: 1.1rem; line-height: 1; padding: .15rem .45rem; }
.side-pane-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }
.side-strip {
  flex: 0 0 30px; width: 30px; height: 100%; display: flex; flex-direction: column; align-items: center; gap: .6rem;
  padding: .75rem 0; margin: 0; cursor: pointer; font: inherit;
  background: var(--color-primary-soft); color: var(--color-primary-ink);
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent); border-radius: var(--radius);
}
.side-strip[hidden] { display: none; }
body.full-screen .side-strip { border-width: 0 1px 0 0; border-radius: 0; }
body.full-screen .side-strip.chat-strip { border-width: 0 0 0 1px; }
.side-strip:hover, .side-strip:focus-visible { background: color-mix(in srgb, var(--color-primary) 22%, #fff); outline: none; }
.side-strip-chev { font-size: 1.1rem; line-height: 1; }
.side-strip-label { writing-mode: vertical-rl; font-size: .8rem; font-weight: 600; letter-spacing: .05em; }
.ide-layout #csWorkbenchPanel.case-pinned-panel { flex: 1; width: auto; min-width: 0; border-radius: 0; border: 0; }
/* Code page: the instructions' drag handle is a divider like the chat's (the bar right of the instructions) */
body.full-screen .ide-layout .side-pane { border-right-width: 0; padding-right: 4px; }
.ide-layout .side-pane-grip { width: 4px; background: var(--color-divider); }
.ide-layout .side-pane-grip:hover, .ide-layout .side-pane-grip.dragging { background: #0078d4; opacity: 1; }

/* ══ The code page in the dark theme (its code window's ⚙ menu: html.coach-dark): the chat, the
   instructions pane and its pop-out window, and dialogs, after VS Code's dark colours ══ */
html.coach-dark {
  color-scheme: dark;
  --color-primary: #0078d4; --color-primary-dark: #026ec1;
  --color-bg: #1f1f1f; --color-surface: #181818; --color-border: #2b2b2b;
  --color-text: #cccccc; --color-muted: #9d9d9d;
  --color-user-bubble: #0078d4; --color-bot-bubble: #2a2d2e;
  --color-primary-soft: #1b2b3f; --color-primary-ink: #9cc8ff;
  --color-divider: #3c3c3c;
  /* the multiple-choice panel's and the C# workbench's own variables */
  --card-bg: #181818; --border-color: #2b2b2b; --text-muted: #9d9d9d; --code-bg: rgba(255, 255, 255, .08);
  --surface-hover: #2a2d2e; --color-info-bg: #1b2b3f; --color-info-border: #2c4a6e; --color-info-text: #9cc8ff;
}
html.coach-dark .message a, html.coach-dark .case-markdown-body a { color: #4daafc; }
html.coach-dark .btn-outline { color: #4daafc; border-color: #3c3c3c; }
html.coach-dark .btn-outline:hover:not(:disabled) { background: rgba(255, 255, 255, .06); }
html.coach-dark .chat-instruction-card { background: var(--color-primary-soft); border-color: #2c4a6e; }
html.coach-dark .chat-instruction-card > strong, html.coach-dark .chat-instruction-card p { color: var(--color-primary-ink); }
html.coach-dark .phase-progress-bar { background: var(--color-primary-soft); border-bottom-color: #2c4a6e; }
html.coach-dark .phase-progress-label { color: var(--color-primary-ink); }
html.coach-dark .phase-segment { background: #2c4a6e; }
html.coach-dark .phase-segment.filled { background: #4daafc; }
html.coach-dark .message.assistant code, html.coach-dark .message.assistant pre { background: rgba(255, 255, 255, .08); }
html.coach-dark .message.error { background: #4b1d1d; color: #fca5a5; }
html.coach-dark #messageInput { background: #313131; color: var(--color-text); border-color: #3c3c3c; }
html.coach-dark #messageInput:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 120, 212, .3); }
html.coach-dark .icon-btn:hover { background: #2a2d2e; }
html.coach-dark .side-pane-head { background: var(--color-bg); }
html.coach-dark .side-strip:hover, html.coach-dark .side-strip:focus-visible { background: #24384f; }
html.coach-dark .case-markdown-body th { background: #252526; }
html.coach-dark .case-markdown-body code { background: rgba(255, 255, 255, .08); border-radius: 3px; padding: .1em .3em; }
html.coach-dark .case-markdown-body pre { background: rgba(255, 255, 255, .06); border-radius: 6px; padding: .6rem .8rem; overflow-x: auto; }
html.coach-dark .case-markdown-body pre code { background: none; padding: 0; }
html.coach-dark .case-markdown-body mark { background: #5c4a00; color: inherit; }
html.coach-dark .lock-warn { color: #e2c08d; }
/* The other student pages: alerts, tables, the case, Hold to Account, multiple choice, the console */
html.coach-dark .alert-error { background: #3d1d1d; border-color: #6e2b2b; color: #fca5a5; }
html.coach-dark .alert-success { background: #1b3326; border-color: #2f5c3f; color: #86efac; }
html.coach-dark .alert-info { background: #1b2b3f; border-color: #2c4a6e; color: #9cc8ff; }
html.coach-dark .alert-warning { background: #3a3000; border-color: #5c4d00; color: #e2c08d; }
html.coach-dark th { background: #252526; }
html.coach-dark .case-body, html.coach-dark .case-overlay-header, html.coach-dark .hold-code-head { background: var(--color-bg); }
html.coach-dark .hold-code-tab { background: transparent; }
html.coach-dark .hold-code-tab.active { background: #1b2b3f; border-color: #2c4a6e; color: #9cc8ff; }
html.coach-dark .hold-line.hl { background: rgba(234, 179, 8, .16); }
html.coach-dark .hold-ln { color: #6e7681; }
html.coach-dark .hold-lines { background: #3a3000; border-color: #5c4d00; color: #e2c08d; }
html.coach-dark .hold-lines:hover { background: #4a3d00; }
html.coach-dark .hold-p-tag { background: #2e2350; border-color: #4c3a8a; color: #c4b5fd; }
html.coach-dark .hold-p-run-title { color: #a5b4fc; }
html.coach-dark .hold-p-out { background: var(--color-bg); }
html.coach-dark .hold-p-out mark, html.coach-dark .hold-p-out.changed { background: rgba(234, 179, 8, .18); color: inherit; }
html.coach-dark .hold-p-err { background: #3d1d1d; border-color: #6e2b2b; color: #fca5a5; }
html.coach-dark .mc-option.mc-option-selected { background: #1b2b3f; border-color: #4daafc; }
html.coach-dark .mc-option input[type="radio"] { accent-color: #4daafc; }
html.coach-dark .mc-console-badge, html.coach-dark .mc-status-ok { background: #1b3326; border-color: #2f5c3f; color: #86efac; }
html.coach-dark .mc-status-error { background: #3d1d1d; border-color: #6e2b2b; color: #fca5a5; }
html.coach-dark .workbench-tab-btn { color: #9d9d9d; }
html.coach-dark .workbench-tab-btn:hover { color: #ffffff; }
html.coach-dark .workbench-tab-btn.active { color: #4daafc; border-bottom-color: #4daafc; }
html.coach-dark .ds-schema th { background: #252526; }
html.coach-dark .ds-schema th, html.coach-dark .ds-schema td { border-color: #2b2b2b; }
html.coach-dark .ds-rows, html.coach-dark .ds-summary { color: var(--color-muted); }
html.coach-dark .pyodide-progress-bar-track { background: #2b2b2b; }
html.coach-dark .repl-output-area { background: #181818; }
html.coach-dark .repl-input-row { background: #1f1f1f; border-top-color: #2b2b2b; }
/* The landing page's background */
html.coach-dark .join-hero { background: linear-gradient(135deg, #172033 0%, #1f1f1f 60%, #15261c 100%); }
html.coach-dark .modal-box { border: 1px solid var(--color-border); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }

/* ── The code window (python-workspace.js), after VS Code: theme colours as variables ── */
.vsc {
  --vsc-bg: #1f1f1f; --vsc-side: #181818; --vsc-bar: #181818; --vsc-border: #2b2b2b;
  --vsc-fg: #cccccc; --vsc-fg-dim: #9d9d9d; --vsc-fg-strong: #ffffff;
  --vsc-hover: #2a2d2e; --vsc-select: #37373d; --vsc-active: #04395e; --vsc-accent: #0078d4;
  --vsc-btn2: #313131; --vsc-btn2-border: #3c3c3c; --vsc-input: #313131; --vsc-menu: #1f1f1f;
  --vsc-term-cmd: #6cb6ff; --vsc-term-err: #f48771; --vsc-term-info: #8b8b8b; --vsc-term-warn: #e2c08d;
  --vsc-guide: #585858;
  flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column;
  background: var(--vsc-bg); color: var(--vsc-fg);
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
.vsc--light, html.coach-light .vsc {
  --vsc-bg: #ffffff; --vsc-side: #f8f8f8; --vsc-bar: #f8f8f8; --vsc-border: #e5e5e5;
  --vsc-fg: #3b3b3b; --vsc-fg-dim: #6f6f6f; --vsc-fg-strong: #1f1f1f;
  --vsc-hover: #f2f2f2; --vsc-select: #e4e6f1; --vsc-active: #cce4f7; --vsc-accent: #005fb8;
  --vsc-btn2: #e5e5e5; --vsc-btn2-border: #cecece; --vsc-input: #ffffff; --vsc-menu: #ffffff;
  --vsc-term-cmd: #005fb8; --vsc-term-err: #c72e0f; --vsc-term-info: #6f6f6f; --vsc-term-warn: #895503;
  --vsc-guide: #c4c4c4;
}
.vsc { position: relative; }
.vsc [hidden] { display: none !important; }
.vsc button { font: inherit; color: inherit; }
.vsc svg { width: 16px; height: 16px; display: block; fill: currentColor; }

/* Title bar: the gear (far left, above the Explorer), the open file, ▶ Run and Submit (right) */
.vsc-titlebar {
  flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; height: 36px; padding: 0 .5rem 0 .25rem;
  background: var(--vsc-bar); border-bottom: 1px solid var(--vsc-border);
}
.vsc-title { flex: 1; min-width: 0; text-align: center; color: var(--vsc-fg-dim); font-size: 12px;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsc-actions { display: flex; align-items: center; gap: .4rem; }
.vsc-btn {
  height: 26px; padding: 0 .75rem; border-radius: 4px; cursor: pointer; white-space: nowrap;
  background: var(--vsc-btn2); border: 1px solid var(--vsc-btn2-border); color: var(--vsc-fg-strong);
}
.vsc-btn:hover:not(:disabled) { filter: brightness(1.2); }
.vsc .vsc-btn--primary { background: var(--vsc-accent); border-color: var(--vsc-accent); color: #fff; }   /* .vsc: over .vsc button's inherit */
.vsc-btn:disabled { opacity: .45; cursor: default; }
.vsc-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  background: none; border: 0; border-radius: 5px; color: var(--vsc-fg); cursor: pointer;
}
.vsc-icon-btn:hover { background: var(--vsc-hover); }
.vsc-icon-btn[aria-expanded="true"] { background: var(--vsc-select); }
.vsc-gear { position: relative; }
.vsc-gear .vsc-icon-btn { width: 30px; height: 30px; }
.vsc-gear .vsc-icon-btn svg { width: 20px; height: 20px; }
.vsc-menu {
  position: absolute; z-index: 30; top: calc(100% + 2px); left: 0; min-width: 230px; padding: 4px;
  background: var(--vsc-menu); border: 1px solid var(--vsc-border); border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.vsc-menu[hidden] { display: none; }
.vsc-menu-item {
  display: block; width: 100%; text-align: left; padding: 4px 10px; border: 0; border-radius: 4px;
  background: none; cursor: pointer; white-space: nowrap;
}
.vsc-menu-item:hover, .vsc-menu-item:focus-visible { background: var(--vsc-accent); color: #fff; outline: none; }
.vsc-menu-item[hidden] { display: none; }
.vsc-menu-sep { height: 1px; margin: 4px 6px; background: var(--vsc-border); }
.vsc-menu-item { display: flex; justify-content: space-between; gap: 1.5rem; }
.vsc-dropdown { position: relative; }
.vsc-menu--right { left: auto; right: 0; }
/* The instructor's window: Starter files | Reference solution (next to ⚙), row actions shown on hover */
.vsc { --vsc-ref: #7b3fc4; }
.vsc-modes { display: flex; gap: 2px; padding: 2px; border-radius: 6px; background: var(--vsc-btn2); border: 1px solid var(--vsc-btn2-border); flex-shrink: 0; }
.vsc .vsc-mode {
  height: 24px; padding: 0 .75rem; border: 0; border-radius: 4px; background: none; cursor: pointer; white-space: nowrap;
  color: var(--vsc-fg-dim);
}
.vsc .vsc-mode:hover { color: var(--vsc-fg-strong); background: var(--vsc-hover); }
.vsc .vsc-mode.is-active { background: var(--vsc-accent); color: #fff; }
.vsc-mode.is-active[data-root="reference"] { background: var(--vsc-ref); }
.vsc-mode.is-drop-target { outline: 1px dashed var(--vsc-accent); outline-offset: 1px; }
.vsc-mode.is-flash { animation: vsc-flash 1.2s ease-out; }
@keyframes vsc-flash { from { box-shadow: 0 0 0 3px var(--vsc-accent); } to { box-shadow: 0 0 0 3px transparent; } }
.vsc.is-reference .vsc-statusbar { background: var(--vsc-ref); color: #fff; border-top-color: var(--vsc-ref); }
.vsc.is-reference .vsc-status-right { color: rgba(255, 255, 255, .85); }
.vsc-status-mode { font-weight: 600; white-space: nowrap; }
.vsc-row-act { display: none !important; width: 20px; height: 20px; flex-shrink: 0; }
.vsc-row:hover .vsc-row-act, .vsc-row-act.is-on { display: inline-flex !important; }
.vsc-row-act svg, .vsc-row-badge svg { width: 16px; height: 16px; flex-shrink: 0; }
.vsc-row-badge { display: inline-flex; width: 20px; justify-content: center; }
.vsc-row-act.is-on { color: var(--vsc-fg-dim); }
.vsc-row-act.is-on:hover { color: var(--vsc-fg); }
.vsc-ficon--cs { color: #b180d7; }
.vsc-ficon--cs::before { content: 'C#'; }
.vsc-menu-item kbd { font: inherit; opacity: .7; }
.vsc-menu--context { top: 0; left: 0; min-width: 180px; }
.vsc-tree-note { margin: .5rem .9rem; color: var(--vsc-fg-dim); font-size: 12px; }
.vsc-tree-note p { margin: 0 0 .5rem; }

/* Body: Explorer | editor (tabs, editor, panel) */
.vsc-body { flex: 1; min-height: 0; display: flex; }
.vsc-sidebar {
  flex: 0 0 auto; width: var(--vsc-side-w, 220px); min-width: 140px; max-width: 45%;
  display: flex; flex-direction: column; background: var(--vsc-side); border-right: 1px solid var(--vsc-border);
}
.vsc-sidebar-head { display: flex; align-items: center; gap: 2px; height: 35px; padding: 0 .4rem 0 .9rem; flex-shrink: 0; }
.vsc-sidebar-title { flex: 1; min-width: 0; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--vsc-fg-dim);
                     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsc-tree { flex: 1; min-height: 0; overflow: auto; padding-bottom: 1rem; outline: none; }
.vsc-row {
  display: flex; align-items: center; gap: 4px; height: 22px; padding-right: 6px; cursor: pointer;
  white-space: nowrap; border: 1px solid transparent; user-select: none;
}
.vsc-row:hover { background: var(--vsc-hover); }
.vsc-row { position: relative; }
.vsc-guide { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--vsc-guide); pointer-events: none; }
.vsc-row.is-selected { background: var(--vsc-select); }
.vsc-tree:focus-within .vsc-row.is-selected { background: var(--vsc-active); border-color: var(--vsc-accent); }
.vsc-row.is-active .vsc-row-name { color: var(--vsc-fg-strong); }
.vsc-twistie { flex: 0 0 16px; display: flex; justify-content: center; color: var(--vsc-fg); }
.vsc-twistie svg { width: 14px; height: 14px; transition: transform .1s; }
.vsc-row.is-collapsed .vsc-twistie svg { transform: rotate(-90deg); }
.vsc-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vsc-row-badge { color: var(--vsc-fg-dim); font-size: 11px; }
.vsc-row-del { visibility: hidden; width: 20px; height: 20px; }
.vsc-row:hover .vsc-row-del { visibility: visible; }
.vsc-row input {
  flex: 1; min-width: 0; height: 20px; padding: 0 4px; font: inherit; color: var(--vsc-fg-strong);
  background: var(--vsc-input); border: 1px solid var(--vsc-accent); outline: none;
}
.vsc-row.is-dragging { opacity: .5; }
.vsc-row.is-drop-target, .vsc-tree.is-drop-root { background: color-mix(in srgb, var(--vsc-accent) 22%, transparent); }
.vsc-row.is-drop-target { outline: 1px dashed var(--vsc-accent); outline-offset: -1px; }
.vsc-row-error { margin: 2px 8px 4px 28px; padding: 3px 6px; font-size: 12px; color: #fff; background: #5a1d1d; border: 1px solid #be1100; }
/* File icons: a small coloured glyph per kind */
.vsc-ficon { flex: 0 0 16px; height: 16px; display: flex; align-items: center; justify-content: center;
             font: 700 9px/1 ui-monospace, Menlo, Consolas, monospace; border-radius: 3px; }
.vsc-ficon--py { color: #3b8eea; }
.vsc-ficon--py::before { content: 'py'; }
/* Reset to the starter files: what it does, confirmed (python-workspace.js) */
.vsc dialog.py-reset { width: calc(100% - 2rem); max-width: 31rem; padding: 1.1rem 1.25rem 1rem; border: 1px solid var(--vsc-border); border-radius: 8px;
                       background: var(--vsc-bg); color: var(--vsc-fg); font-size: 13px; line-height: 1.5; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.vsc dialog.py-reset::backdrop { background: rgba(0,0,0,.45); }
.py-reset h2 { margin: 0 0 .55rem; font-size: 15px; font-weight: 600; color: var(--vsc-fg-strong); }
.py-reset p { margin: 0 0 .6rem; }
.py-reset .py-reset-what { margin: .7rem 0 .15rem; font-weight: 600; color: var(--vsc-fg-strong); }
.py-reset ul { margin: 0 0 .5rem; padding-left: 1.25rem; font: 12px/1.55 ui-monospace, 'SF Mono', Menlo, monospace; word-break: break-all; }
.py-reset .py-reset-warn { margin-top: .8rem; color: var(--vsc-term-warn); }
.py-reset-ok { display: flex; align-items: center; gap: .45rem; margin: .5rem 0 .9rem; cursor: pointer; }
.py-reset-ok input { width: 15px; height: 15px; margin: 0; }
.py-reset-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.vsc .py-reset-go { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.vsc .py-reset-go:hover:not(:disabled) { background: #991b1b; border-color: #991b1b; }
.vsc .py-reset-go:disabled { opacity: .45; cursor: not-allowed; }
.vsc-ficon--r { color: #2266b8; }
.vsc-ficon--r::before { content: 'R'; font-weight: 700; }
.vsc-ficon--csv { color: #4ec9b0; }
.vsc-ficon--csv::before { content: '▦'; font-size: 13px; }
.vsc-ficon--db { color: #d7ba7d; }
.vsc-ficon--db::before { content: '🗄'; font-size: 11px; filter: grayscale(.3); }
.vsc-ficon--txt::before { content: '≡'; font-size: 14px; color: var(--vsc-fg-dim); }
.vsc-ficon--json { color: #cbcb41; }
.vsc-ficon--json::before { content: '{}'; }
.vsc-ficon--md { color: #519aba; }
.vsc-ficon--md::before { content: 'M↓'; font-size: 8px; }
.vsc-ficon--folder { color: #dcb67a; }
.vsc-ficon--folder svg { width: 16px; height: 16px; }
.vsc-ficon--lock { color: var(--vsc-fg-dim); }

.vsc-sash { flex: 0 0 4px; background: transparent; touch-action: none; position: relative; z-index: 2; }
.vsc-sash--v { cursor: col-resize; margin: 0 -2px; }
.vsc-sash--h { cursor: row-resize; margin: -2px 0; }
.vsc-sash:hover, .vsc-sash.dragging { background: var(--vsc-accent); }

.vsc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vsc-tabs { flex: 0 0 auto; display: flex; height: 35px; overflow-x: auto; overflow-y: hidden; background: var(--vsc-side); scrollbar-width: thin; }
.vsc-tab {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px; height: 35px; padding: 0 6px 0 12px; cursor: pointer; white-space: nowrap;
  color: var(--vsc-fg-dim); background: var(--vsc-side); border-right: 1px solid var(--vsc-border);
  border-top: 1px solid transparent; border-bottom: 1px solid var(--vsc-border);
}
.vsc-tab:hover { background: var(--vsc-hover); }
.vsc-tab.is-active { color: var(--vsc-fg-strong); background: var(--vsc-bg); border-top-color: var(--vsc-accent); border-bottom-color: transparent; }
.vsc-tab-name, .vsc-tab-dir { flex-shrink: 0; }   /* (a long name: a wider tab, never two lines) */
.vsc-tab-dir { color: var(--vsc-fg-dim); font-size: 11px; }
.vsc-tab-close { width: 20px; height: 20px; border-radius: 4px; visibility: hidden; }
.vsc-tab.is-active .vsc-tab-close, .vsc-tab:hover .vsc-tab-close, .vsc-tab.is-dirty .vsc-tab-close { visibility: visible; }
.vsc-tab.is-dirty .vsc-tab-close svg { display: none; }
.vsc-tab.is-dirty .vsc-tab-close::before { content: '●'; font-size: 11px; }
.vsc-tab.is-dirty .vsc-tab-close:hover svg { display: block; }
.vsc-tab.is-dirty .vsc-tab-close:hover::before { content: none; }
.vsc-tabs-fill { flex: 1; border-bottom: 1px solid var(--vsc-border); }

.vsc-editor-area { flex: 1 1 auto; min-height: 60px; position: relative; background: var(--vsc-bg); }
.vsc-editor-area > .py-editor { position: absolute; inset: 0; }
.py-editor-msg { padding: 1rem; color: var(--vsc-fg-dim); }
.py-binary, .vsc-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; padding: 2rem; text-align: center; color: var(--vsc-fg-dim); background: var(--vsc-bg);
}
.py-binary[hidden], .vsc-empty[hidden], .py-editor[hidden] { display: none; }
.py-binary p, .vsc-empty p { margin: 0; max-width: 32rem; line-height: 1.55; }
.py-binary-title { color: var(--vsc-fg); font-size: 14px; }
.py-binary-icon { font-size: 2rem; opacity: .8; }

/* Panel under the editor: Terminal (▶ output and a few commands) and the Submission results */
.vsc-panel {
  flex: 0 0 auto; height: var(--vsc-panel-h, 32%); min-height: 90px; max-height: 80%;
  display: flex; flex-direction: column; background: var(--vsc-side); border-top: 1px solid var(--vsc-border);
}
.vsc-panel-head { display: flex; align-items: center; gap: .25rem; height: 35px; padding: 0 .5rem 0 .75rem; flex-shrink: 0; }
.vsc-panel-tab {
  height: 100%; padding: 0 .6rem; border: 0; border-bottom: 1px solid transparent; background: none; cursor: pointer;
  font-size: 11px !important; letter-spacing: .04em; text-transform: uppercase; color: var(--vsc-fg-dim) !important;
}
.vsc-panel-tab:hover { color: var(--vsc-fg) !important; }
.vsc-panel-tab.is-active { color: var(--vsc-fg-strong) !important; border-bottom-color: var(--vsc-accent); }
.vsc-panel-tab[hidden] { display: none; }
.py-term-status { flex: 1; min-width: 0; padding-left: .5rem; color: var(--vsc-fg-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.py-term-btn { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px; border: 0; border-radius: 4px; background: none; cursor: pointer; font-size: 12px; }
.py-term-btn:hover { background: var(--vsc-hover); }
.py-term-btn[hidden] { display: none; }
.py-term-stop { color: var(--vsc-term-err); }

.py-term {
  flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--vsc-side); color: var(--vsc-fg);
  font: 13px/1.45 Menlo, Monaco, Consolas, 'Courier New', monospace;
}
.py-term[hidden] { display: none; }
.py-term-body { flex: 1; min-height: 0; overflow: auto; padding: .2rem .9rem; white-space: pre-wrap; word-break: break-word; }
.py-term-body .py-term-cmd { color: var(--vsc-term-cmd); }
.py-term-body .py-term-err { color: var(--vsc-term-err); }
.py-term-body .py-term-info { color: var(--vsc-term-info); }
.py-term-body .py-term-warn { color: var(--vsc-term-warn); }
.py-term-plot { display: block; max-width: 100%; max-height: 260px; margin: .4rem 0; background: #fff; border-radius: 4px; }
.py-term-input-row { display: flex; align-items: center; gap: .5rem; padding: .25rem .9rem .4rem; }
.py-term-prompt { color: #23d18b; font-weight: 700; }
.vsc--light .py-term-prompt, html.coach-light .vsc .py-term-prompt { color: #00873d; }
/* C#: what the student typed as their program's input, echoed */
.vsc .py-term-stdin { color: var(--vsc-term-cmd); }
.py-term-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--vsc-fg-strong); font: inherit; padding: 0; }
.py-term-input::placeholder { color: var(--vsc-fg-dim); opacity: .6; }
.py-term-input:disabled { opacity: .5; }
/* C#: the terminal is xterm.js (coach-console.js), so programs can move the cursor, colour text, read keys */
.py-term-body.coach-xterm-host { position: relative; padding: 0; overflow: hidden; white-space: normal; }
.coach-xterm { position: absolute; inset: 4px 4px 2px 14px; }
.coach-xterm .xterm { height: 100%; }
.coach-xterm .xterm-viewport { scrollbar-width: thin; }
/* While a program runs the terminal fills the code window; "Show code" (.vsc-term-size) gives it back */
.vsc-main.is-term-max > .vsc-tabs, .vsc-main.is-term-max > .vsc-editor-area, .vsc-main.is-term-max > .vsc-sash--h { display: none; }
.vsc-main.is-term-max > .vsc-panel { flex: 1 1 auto; height: auto; max-height: none; }
.py-term-btn.vsc-term-size { color: var(--vsc-fg); }
.py-term-btn.vsc-term-size svg { width: 14px; height: 14px; }
.py-term-btn.vsc-term-size.is-max { color: var(--vsc-fg-strong); box-shadow: inset 0 0 0 1px var(--vsc-accent); }

.py-results { flex: 1; min-height: 0; overflow: auto; background: #fff; color: #1e293b; }
.py-results[hidden] { display: none; }
.py-results-body { font-size: .82rem; }
.py-results-hint { margin: 0; padding: .4rem .75rem; color: #64748b; font-size: .78rem; }
.py-results-error { margin: 0; padding: .5rem .75rem; color: #991b1b; background: #fef2f2; }
.py-test-summary { margin: 0; padding: .45rem .75rem; font-weight: 600; border-bottom: 1px solid var(--color-border); }
.py-test-summary.pass { color: #166534; }
.py-test-summary.fail { color: #991b1b; }
.py-progress { display: flex; align-items: center; gap: .9rem; padding: .9rem .75rem; }
.py-ring { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; border: .25rem solid #dbeafe;
           border-top-color: #1a56db; animation: py-spin .9s linear infinite; }
@keyframes py-spin { to { transform: rotate(360deg); } }
.py-progress-info { flex: 1; min-width: 0; }
.py-progress-step { font-weight: 600; color: #1e293b; margin-bottom: .4rem; font-size: .82rem; }
.py-progress-bar { height: .4rem; border-radius: 999px; background: #e0e7ff; overflow: hidden; }
.py-progress-bar span { display: block; height: 100%; width: 0; background: #1a56db; border-radius: 999px; transition: width .2s linear; }
.py-progress-bar--indeterminate span { width: 35%; animation: py-slide 1.3s ease-in-out infinite; }
@keyframes py-slide { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.py-progress-time { margin-top: .35rem; font-size: .74rem; color: #64748b; }
@media (prefers-reduced-motion: reduce) { .py-ring, .py-progress-bar--indeterminate span { animation-duration: 3s; } }
.py-submit-ok { margin: 0; padding: .5rem .75rem; background: #f0fdf4; color: #166534; border-bottom: 1px solid #bbf7d0; }
/* In the code window: the Submission panel in the window's theme (dark, or .vsc--light) */
.vsc {
  --vsc-ok: #89d185; --vsc-ok-bg: rgba(137, 209, 133, .1); --vsc-ok-line: rgba(137, 209, 133, .3);
  --vsc-bad: #f48771; --vsc-bad-bg: rgba(244, 135, 113, .1);
}
.vsc--light, html.coach-light .vsc {
  --vsc-ok: #166534; --vsc-ok-bg: #f0fdf4; --vsc-ok-line: #bbf7d0; --vsc-bad: #991b1b; --vsc-bad-bg: #fef2f2;
}
.vsc .py-results { background: var(--vsc-bg); color: var(--vsc-fg); }
.vsc .py-results-hint, .vsc .py-progress-time { color: var(--vsc-fg-dim); }
.vsc .py-progress-step { color: var(--vsc-fg-strong); }
.vsc .py-progress-bar { background: color-mix(in srgb, var(--vsc-accent) 25%, transparent); }
.vsc .py-progress-bar span { background: var(--vsc-accent); }
.vsc .py-ring { border-color: color-mix(in srgb, var(--vsc-accent) 25%, transparent); border-top-color: var(--vsc-accent); }
.vsc .py-submit-ok { background: var(--vsc-ok-bg); color: var(--vsc-ok); border-bottom-color: var(--vsc-ok-line); }
.vsc .py-submit-ok strong { color: var(--vsc-fg-strong); }
.vsc .py-results-error { background: var(--vsc-bad-bg); color: var(--vsc-bad); }
.vsc .py-test-summary { border-bottom-color: var(--vsc-border); }
.vsc .py-test-summary.pass { color: var(--vsc-ok); }
.vsc .py-test-summary.fail { color: var(--vsc-bad); }
.vsc .cs-test-row { border-bottom-color: var(--vsc-border); }
.vsc .cs-test-file, .vsc .cs-test-together { border-bottom-color: var(--vsc-border); }
.vsc .cs-test-file .cs-test-file-name { color: var(--vsc-fg-strong); }
.vsc .cs-test-file.pass .cs-test-file-name { color: var(--vsc-ok); }
.vsc .cs-test-file.fail .cs-test-file-name { color: var(--vsc-bad); }
.vsc .cs-test-row.pass { background: var(--vsc-ok-bg); }
.vsc .cs-test-row.fail { background: var(--vsc-bad-bg); }
.vsc .cs-test-row.pass .cs-test-icon { color: var(--vsc-ok); }
.vsc .cs-test-row.fail .cs-test-icon { color: var(--vsc-bad); }
/* Didn't run (the code doesn't compile): not a failed check */
.vsc .cs-test-row.notrun { background: transparent; }
.vsc .cs-test-row.notrun .cs-test-icon, .vsc .cs-test-row.notrun .cs-test-name { color: var(--vsc-fg-dim); }
.vsc .py-compile-errors { margin: 0 0 .6rem; padding: .5rem .7rem; border-left: 3px solid var(--vsc-bad); background: var(--vsc-bad-bg); font-size: .8rem; }
.vsc .py-compile-errors pre { margin: .35rem 0 0; white-space: pre-wrap; font-size: .76rem; color: var(--vsc-fg-strong); }
.vsc .cs-test-name { color: var(--vsc-fg-strong); }
.vsc .cs-test-msg, .vsc .cs-test-dur { color: var(--vsc-fg-dim); }

/* Status bar */
.vsc-statusbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 1rem; height: 22px; padding: 0 .6rem;
  font-size: 12px; background: var(--vsc-bar); color: var(--vsc-fg); border-top: 1px solid var(--vsc-border);
}
.vsc-statusbar .py-save-state { color: inherit; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsc-status-right { margin-left: auto; display: flex; gap: 1rem; color: var(--vsc-fg-dim); white-space: nowrap; overflow: hidden; min-width: 0; flex-shrink: 1; }
.py-last-submission[hidden] { display: none; }

@media (max-width: 900px) {
  .ide-layout.chat-outer { flex-direction: column; }
  .ide-layout .chat-layout { width: auto; max-width: none; height: 42%; }
  .ide-splitter { display: none; }
  .vsc-sidebar { width: 150px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Workstream E — MC Assessment Stage
   ═══════════════════════════════════════════════════════════════════════════ */

/* Locked chat notice */
.mc-chat-locked-notice {
  padding: .65rem 1rem;
  background: var(--color-info-bg, #eff6ff);
  border-top: 1px solid var(--color-info-border, #bfdbfe);
  color: var(--color-info-text, #1e40af);
  font-size: .875rem;
  text-align: center;
}

/* MC panel fills the right side exactly like workbench */
.mc-question-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.mc-question-list {
  flex: 1;
  overflow-y: auto;
  padding: .75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Individual question card */
.mc-question {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  padding: 1rem 1.125rem;
}

.mc-tier-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .35rem;
}

.mc-console-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  border-radius: 4px;
  padding: .1rem .4rem;
  margin-bottom: .5rem;
}

.mc-stem {
  font-size: .9rem;
  line-height: 1.55;
  margin-bottom: .75rem;
}
.mc-stem p { margin: 0 0 .4em; }
.mc-stem code {
  background: var(--code-bg, #f3f4f6);
  border-radius: 3px;
  padding: .1em .35em;
  font-size: .85em;
}

/* Option rows */
.mc-option-list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.mc-option {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .55rem .75rem;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 6px;
  cursor: pointer;
  transition: background .1s, border-color .1s;
  line-height: 1.45;
}

.mc-option:hover {
  background: var(--surface-hover, #f9fafb);
  border-color: var(--color-primary, #1a56db);
}

.mc-option.mc-option-selected {
  background: #eff6ff;
  border-color: #1a56db;
}

.mc-option input[type="radio"] {
  margin-top: .2rem;
  flex-shrink: 0;
  accent-color: #1a56db;
}

.mc-option-text {
  font-size: .875rem;
}
.mc-option-text p  { margin: 0; }
.mc-option-text code {
  background: var(--code-bg, #f3f4f6);
  border-radius: 3px;
  padding: .1em .35em;
  font-size: .85em;
}

/* Submit area */
.mc-submit-area {
  flex-shrink: 0;
  padding: .875rem 1rem;
  border-top: 1px solid var(--border-color, #e5e7eb);
  background: var(--card-bg, #fff);
}

.btn-block { width: 100%; }

.mc-status-msg {
  font-size: .875rem;
  margin-bottom: .5rem;
  padding: .4rem .65rem;
  border-radius: 5px;
}
.mc-status-ok    { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.mc-status-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ═══════════════════════════════════════════════════════════════════════════
   C# Workbench shell — Workstream J
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shell: file-explorer (left) + main (right) ────────────────────────── */
#csWorkbenchPanel.case-pinned-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cs-shell {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  height: 100%;
}

/* ── File Explorer ─────────────────────────────────────────────────────── */
.cs-explorer {
  width: 180px;
  min-width: 120px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-color, #e5e7eb);
  background: #f8fafc;
  overflow: hidden;
  flex-shrink: 0;
}

.cs-explorer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .4rem .65rem;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  background: #f1f5f9;
}

.cs-explorer-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #64748b;
  text-transform: uppercase;
}

.cs-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  color: #475569;
  padding: .1rem .3rem;
  border-radius: 3px;
}
.cs-icon-btn:hover { background: #e2e8f0; }

.cs-file-tree {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: .25rem 0;
}

.cs-file-row {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .65rem;
  cursor: pointer;
  font-size: .82rem;
  color: #334155;
  position: relative;
  user-select: none;
}
.cs-file-row:hover { background: #e2e8f0; }
.cs-file-row.active { background: #dbeafe; color: #1e40af; }

.cs-file-icon { font-size: .85rem; flex-shrink: 0; }

.cs-file-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-file-del-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: .7rem;
  color: #94a3b8;
  padding: 0 .2rem;
  line-height: 1;
  flex-shrink: 0;
}
.cs-file-del-btn:hover { color: #ef4444; }
.cs-file-row:hover .cs-file-del-btn { display: block; }

.cs-file-readonly {
  font-size: .7rem;
  flex-shrink: 0;
  color: #94a3b8;
  margin-left: auto;
}

.cs-rename-input {
  flex: 1 1 auto;
  font-size: .82rem;
  border: 1px solid #3b82f6;
  border-radius: 3px;
  padding: 1px 4px;
  outline: none;
}

.cs-loading-hint, .cs-empty-hint {
  font-size: .8rem;
  color: #94a3b8;
  padding: .5rem .75rem;
  margin: 0;
}

/* ── Main: tabs + Monaco + bottom panel ────────────────────────────────── */
.cs-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ── Tabs bar ───────────────────────────────────────────────────────────── */
.cs-tabs-bar {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  background: #f1f5f9;
  flex-shrink: 0;
  overflow: hidden;
}

.cs-tab-list {
  display: flex;
  flex: 1 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.cs-tab-list::-webkit-scrollbar { display: none; }

.cs-tab {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .35rem .7rem;
  font-size: .8rem;
  color: #475569;
  border-right: 1px solid var(--border-color, #e5e7eb);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 60px;
  max-width: 140px;
}
.cs-tab:hover { background: #e2e8f0; }
.cs-tab.active { background: #fff; color: #1e40af; border-bottom: 2px solid #3b82f6; }

.cs-tab-name {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
}
.cs-tab-dot { color: #3b82f6; font-size: .65rem; flex-shrink: 0; }
.cs-tab-close {
  background: none; border: none; cursor: pointer; font-size: .65rem;
  color: #94a3b8; padding: 0; line-height: 1; flex-shrink: 0;
}
.cs-tab-close:hover { color: #ef4444; }

/* ── Toolbar (Run / Stop / Test buttons) ───────────────────────────────── */
.cs-toolbar {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .5rem;
  flex-shrink: 0;
  border-left: 1px solid var(--border-color, #e5e7eb);
}

.cs-toolbar-btn {
  font-size: .78rem;
  padding: .25rem .55rem;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 500;
  line-height: 1.4;
}
.cs-run-btn  { background: #16a34a; color: #fff; border-color: #15803d; }
.cs-run-btn:hover:not(:disabled) { background: #15803d; }
.cs-stop-btn { background: #ef4444; color: #fff; border-color: #dc2626; }
.cs-stop-btn:hover { background: #dc2626; }
.cs-test-btn { background: #6366f1; color: #fff; border-color: #4f46e5; }
.cs-test-btn:hover:not(:disabled) { background: #4f46e5; }
.cs-toolbar-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Monaco editor container ────────────────────────────────────────────── */
.cs-editor-container {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
  min-height: 0;
  background: #fff;
}

.cs-editor-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: .875rem;
}

.cs-runner-banner {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  background: #fef9c3;
  color: #854d0e;
  border-bottom: 1px solid #fde68a;
  font-size: .78rem;
  padding: .35rem .75rem;
}

/* ── Resizer ────────────────────────────────────────────────────────────── */
.cs-resizer {
  height: 5px;
  cursor: row-resize;
  background: var(--border-color, #e5e7eb);
  flex-shrink: 0;
  transition: background .15s;
}
.cs-resizer:hover { background: #3b82f6; }

/* ── Bottom panel ───────────────────────────────────────────────────────── */
.cs-bottom-panel {
  display: flex;
  flex-direction: column;
  height: 200px;
  min-height: 80px;
  border-top: none;
  background: #fff;
  overflow: hidden;
  flex-shrink: 0;
}

.cs-bottom-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  background: #f8fafc;
  flex-shrink: 0;
}

.cs-bottom-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: .35rem .75rem;
  font-size: .78rem;
  cursor: pointer;
  color: #64748b;
  white-space: nowrap;
}
.cs-bottom-tab-btn:hover { color: #1e293b; background: #e2e8f0; }
.cs-bottom-tab-btn.active {
  color: #1e40af;
  border-bottom-color: #3b82f6;
  background: #fff;
}

.cs-badge {
  display: inline-block;
  background: #ef4444;
  color: #fff;
  font-size: .65rem;
  min-width: 1.1em;
  padding: 0 .2em;
  border-radius: 9px;
  text-align: center;
  margin-left: .2rem;
  vertical-align: middle;
}

.cs-bottom-content {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
  flex-direction: column;
}
.cs-bottom-content.active { display: flex; }
.cs-bottom-content:not([hidden]) { display: flex; }

/* ── Console ────────────────────────────────────────────────────────────── */
#cs-panel-console {
  display: flex;
  flex-direction: column;
}

.cs-console-output {
  flex: 1 1 auto;
  overflow-y: auto;
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: .78rem;
  line-height: 1.5;
  padding: .4rem .6rem;
  white-space: pre-wrap;
  word-break: break-all;
  background: #0f172a;
  color: #e2e8f0;
}

.cs-console-stdout { color: #e2e8f0; }
.cs-console-stderr { color: #f87171; }

.cs-console-input-row {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .5rem;
  border-top: 1px solid #1e293b;
  background: #0f172a;
  flex-shrink: 0;
}

.cs-console-prompt {
  color: #94a3b8;
  font-family: monospace;
  font-size: .85rem;
  flex-shrink: 0;
}

#csStdinInput {
  flex: 1 1 auto;
  background: transparent;
  border: none;
  outline: none;
  color: #e2e8f0;
  font-family: 'Cascadia Code', monospace;
  font-size: .78rem;
  caret-color: #60a5fa;
}
#csStdinInput::placeholder { color: #475569; }

.cs-stdin-send {
  background: none;
  border: 1px solid #334155;
  color: #94a3b8;
  border-radius: 3px;
  padding: .1rem .35rem;
  font-size: .75rem;
  cursor: pointer;
  flex-shrink: 0;
}
.cs-stdin-send:hover { border-color: #60a5fa; color: #60a5fa; }

/* ── Test Results ───────────────────────────────────────────────────────── */
.cs-test-summary {
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  background: #f8fafc;
  font-size: .82rem;
  flex-shrink: 0;
}

.cs-test-count { font-weight: 600; }
.cs-test-count.pass { color: #166534; }
.cs-test-count.fail { color: #991b1b; }
.cs-test-loading { color: #6366f1; }
.cs-test-error   { color: #991b1b; }

.cs-test-list { flex: 1 1 auto; overflow-y: auto; }

.cs-test-row {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  padding: .4rem .75rem;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  font-size: .8rem;
}
.cs-test-row.pass { background: #f0fdf4; }
.cs-test-row.fail { background: #fef2f2; }
.cs-test-row.notrun { background: #f8fafc; color: #64748b; }
/* Grouped by test (rowsHtml): the test's line, then its [Test]s indented */
.cs-test-file { display: flex; align-items: baseline; gap: .5rem; padding: .45rem .75rem .3rem; font-size: .8rem; font-weight: 700;
                border-bottom: 1px solid var(--border-color, #e5e7eb); }
.cs-test-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cs-test-file-note { font-size: .72rem; font-weight: 400; opacity: .7; }
.cs-test-file.pass .cs-test-file-name { color: #166534; }
.cs-test-file.fail .cs-test-file-name { color: #991b1b; }
.cs-test-row.cs-test-sub { padding-left: 1.75rem; }
.cs-test-together { padding: .25rem .75rem .25rem 1.75rem; font-size: .74rem; opacity: .75; border-bottom: 1px solid var(--border-color, #e5e7eb); }
.py-compile-errors { margin: 0 0 .6rem; padding: .5rem .7rem; border-left: 3px solid #dc2626; background: #fef2f2; font-size: .8rem; }
.py-compile-errors pre { margin: .35rem 0 0; white-space: pre-wrap; font-size: .76rem; }

.cs-test-icon {
  font-size: .85rem;
  flex-shrink: 0;
  margin-top: .05rem;
}
.cs-test-row.pass .cs-test-icon { color: #16a34a; }
.cs-test-row.fail .cs-test-icon { color: #dc2626; }

.cs-test-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  overflow: hidden;
}

.cs-test-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-test-msg {
  color: #6b7280;
  font-size: .76rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.cs-test-dur {
  font-size: .72rem;
  color: #94a3b8;
  flex-shrink: 0;
  white-space: nowrap;
  align-self: center;
}

.cs-test-footer {
  padding: .5rem .75rem;
  border-top: 1px solid var(--border-color, #e5e7eb);
  background: #f8fafc;
  flex-shrink: 0;
}

/* ── Problems ───────────────────────────────────────────────────────────── */
.cs-problems-list { overflow-y: auto; }

.cs-problem-row {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  padding: .35rem .75rem;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  font-size: .79rem;
  cursor: pointer;
}
.cs-problem-row:hover { background: #f1f5f9; }

.cs-problem-icon { flex-shrink: 0; }
.cs-problem-msg  { flex: 1 1 auto; color: #334155; word-break: break-word; }
.cs-problem-loc  { font-size: .72rem; color: #94a3b8; white-space: nowrap; flex-shrink: 0; }

/* ── The C# workbench in the dark theme (html.coach-dark), after VS Code ── */
html.coach-dark #csWorkbenchPanel { --border-color: #2b2b2b; background: #1f1f1f; color: #cccccc; }
html.coach-dark .cs-explorer, html.coach-dark .cs-explorer-header, html.coach-dark .cs-tabs-bar,
html.coach-dark .cs-bottom-panel, html.coach-dark .cs-bottom-tabs { background: #181818; }
html.coach-dark .cs-explorer-title { color: #9d9d9d; }
html.coach-dark .cs-icon-btn, html.coach-dark .cs-file-row { color: #cccccc; }
html.coach-dark .cs-icon-btn:hover, html.coach-dark .cs-file-row:hover, html.coach-dark .cs-tab:hover,
html.coach-dark .cs-problem-row:hover { background: #2a2d2e; }
html.coach-dark .cs-file-row.active { background: #04395e; color: #ffffff; }
html.coach-dark .cs-rename-input { background: #313131; color: #ffffff; border-color: #0078d4; }
html.coach-dark .cs-tab { color: #9d9d9d; }
html.coach-dark .cs-tab.active { background: #1f1f1f; color: #ffffff; border-bottom-color: #0078d4; }
html.coach-dark .cs-editor-container { background: #1e1e1e; }
html.coach-dark .cs-runner-banner { background: #3a3000; color: #e2c08d; border-bottom-color: #5c4d00; }
html.coach-dark .cs-resizer { background: #2b2b2b; }
html.coach-dark .cs-resizer:hover { background: #0078d4; }
html.coach-dark .cs-bottom-tab-btn { color: #9d9d9d; }
html.coach-dark .cs-bottom-tab-btn:hover { color: #ffffff; background: #2a2d2e; }
html.coach-dark .cs-bottom-tab-btn.active { color: #ffffff; background: #1f1f1f; border-bottom-color: #0078d4; }
html.coach-dark .cs-console-output, html.coach-dark .cs-console-input-row { background: #181818; border-top-color: #2b2b2b; }
html.coach-dark .cs-test-summary, html.coach-dark .cs-test-footer { background: #1f1f1f; }
html.coach-dark .cs-test-count.pass { color: #89d185; }
html.coach-dark .cs-test-count.fail, html.coach-dark .cs-test-error { color: #f48771; }
html.coach-dark .cs-test-loading { color: #a5b4fc; }
html.coach-dark .cs-test-row.pass { background: rgba(137, 209, 133, .1); }
html.coach-dark .cs-test-row.fail { background: rgba(244, 135, 113, .1); }
html.coach-dark .cs-test-row.pass .cs-test-icon { color: #89d185; }
html.coach-dark .cs-test-row.fail .cs-test-icon { color: #f48771; }
html.coach-dark .cs-test-name { color: #e5e5e5; }
html.coach-dark .cs-test-msg, html.coach-dark .cs-test-dur, html.coach-dark .cs-problem-loc { color: #9d9d9d; }
html.coach-dark .cs-problem-msg { color: #cccccc; }

/* ── Faculty dashboard: per-student assignment lines ───────────────────── */
/* A student's assignments on the roster: one grid, so the columns line up (status | title | where they are |
   Review | Code | Reset); each line is a row of it (subgrid) */
.attempt-grid { display: grid; grid-template-columns: 7.6rem max-content minmax(0, 1fr) max-content 6.6rem max-content; column-gap: .8rem; align-items: center; }
.attempt-line { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; padding: .3rem 0; font-size: .85rem; }
.attempt-line + .attempt-line { border-top: 1px dashed var(--color-border); }
.attempt-line > .badge { justify-self: start; }
.attempt-line-title { font-weight: 500; white-space: nowrap; }
.attempt-line-progress { font-size: .8rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attempt-line-link { font-size: .8rem; font-weight: 600; white-space: nowrap; }
@media (max-width: 760px) {
  .attempt-grid { display: block; }
  .attempt-line { display: flex; flex-wrap: wrap; gap: .5rem; }
}
.attempt-line-reset { margin: 0; }
.attempt-line-reset button { background: none; border: 0; padding: 0 0 0 .4rem; font: inherit; font-size: .8rem;
                             color: #94a3b8; cursor: pointer; border-left: 1px solid var(--color-border); }
.attempt-line-reset button:hover { color: var(--color-error); text-decoration: underline; }

/* Privacy notice: sections and lists */
.privacy h2 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
.privacy p, .privacy li { line-height: 1.6; }
.privacy ul { margin: 0 0 .75rem 1.25rem; padding: 0; }
.privacy li { margin: .35rem 0; }
.privacy ul ul { margin-top: .35rem; }

/* Live editing (coach-collab.js): who else is in the code, in the code window's title bar */
.vsc-presence { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; margin-right: 4px; border-radius: 12px;
  font-size: 12px; white-space: nowrap; color: var(--vsc-fg-dim); background: var(--vsc-hover); }
.vsc-presence[hidden] { display: none; }
.vsc-presence.is-here { color: #fff; background: #e8590c; font-weight: 600; }

/* An instructor in a student's code, live (Faculty/Code): a bar, then the instructions | the code window */
.lc-page { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lc-bar { display: flex; align-items: center; gap: .75rem; padding: .4rem .75rem; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.lc-title { font-size: .95rem; }
.lc-sep { color: var(--color-muted); margin: 0 .2rem; }
.lc-note { flex: 1; min-width: 12rem; text-align: right; font-size: .8rem; color: var(--color-muted); }
.lc-row { flex: 1; min-height: 0; display: flex; }
.lc-instr { width: clamp(240px, 26vw, 420px); flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid var(--color-border); background: var(--color-surface); }
.lc-instr-head { padding: .55rem .9rem; font-weight: 600; border-bottom: 1px solid var(--color-border); }
.lc-instr-body { flex: 1; overflow: auto; padding: .9rem; }

/* A code window's side bar folded away (vsc-sidebar.js): the editor takes its room */
.vsc.vsc--side-hidden > .vsc-body > .vsc-sidebar,
.vsc.vsc--side-hidden > .vsc-body > .vsc-sash--v { display: none !important; }
.vsc-side-toggle .vsc-side-fill { fill: none; }
.vsc-side-toggle[aria-pressed="true"] .vsc-side-fill { fill: currentColor; opacity: .55; }

/* ── A course's gradebook (its Gradebook tab), like a spreadsheet ─────────────
   The header row and the names stay put while it scrolls; a cell's ⤢ shows on hover and opens its
   details in the panel on the right. */
.gb-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .75rem; }
.gb-search { width: 15rem; max-width: 100%; }
.gb-chips { display: flex; gap: .3rem; flex-wrap: wrap; }
.gb-chip { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: 999px;
           padding: .2rem .7rem; font: inherit; font-size: .8rem; cursor: pointer; }
.gb-chip:hover { border-color: var(--color-primary); }
.gb-chip.is-on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.gb-count { font-size: .8rem; color: var(--color-muted); }
.gb-actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.gb-actions form { margin: 0; }
.gb-wrap { display: flex; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; background: var(--color-surface); }
.gb-scroll { flex: 1; min-width: 0; overflow: auto; max-height: 70vh; }
.gb-table { border-collapse: separate; border-spacing: 0; font-size: .85rem; width: max-content; min-width: 100%; }
.gb-table th, .gb-table td { border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: .35rem .55rem;
                             text-align: center; vertical-align: middle; white-space: nowrap; background: var(--color-surface); }
.gb-table thead th { position: sticky; top: 0; z-index: 2; background: #f8fafc; padding: 0; vertical-align: bottom; }
.gb-table .gb-student { position: sticky; left: 0; z-index: 1; text-align: left; min-width: 14rem; }
.gb-table thead .gb-student { z-index: 3; }
.gb-table tfoot th, .gb-table tfoot td { position: sticky; bottom: 0; z-index: 1; background: #f8fafc; border-bottom: 0; }
.gb-table tfoot .gb-student { z-index: 3; }
.gb-table tbody tr:hover > * { background: #f8fafc; }
.gb-sort { display: flex; flex-direction: column; align-items: center; gap: .05rem; width: 100%; min-width: 8.5rem; padding: .45rem .6rem;
           border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.gb-student .gb-sort { flex-direction: row; justify-content: flex-start; gap: .35rem; font-weight: 600; }
.gb-sort:hover { background: rgba(100,116,139,.1); }
.gb-col-folder { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); }
.gb-col-title { font-weight: 600; font-size: .82rem; white-space: normal; max-width: 11rem; }
.gb-col-basis { font-size: .68rem; color: var(--color-muted); font-weight: 500; }
.gb-arrow { font-size: .6rem; color: var(--color-primary); min-height: .7rem; }
th[aria-sort="ascending"] .gb-arrow::after { content: "▲"; }
th[aria-sort="descending"] .gb-arrow::after { content: "▼"; }
.gb-name { display: block; font-weight: 600; }
.gb-email { display: block; font-size: .72rem; color: var(--color-muted); font-weight: 400; }
.gb-cell { position: relative; min-width: 6.5rem; padding-right: 1.9rem !important; padding-left: 1.9rem !important; }
.gb-cell--avg { padding: .35rem .55rem !important; }
.gb-cell.gb-cell--match { box-shadow: inset 0 0 0 2px #f59e0b; }
.gb-cell.is-open { box-shadow: inset 0 0 0 2px var(--color-primary); }
.gb-grade { display: inline-block; min-width: 3rem; padding: .1rem .45rem; border-radius: 999px; font-weight: 700; }
.gb-tone-5 { background: #dcfce7; color: #166534; }
.gb-tone-4 { background: #e0f2fe; color: #075985; }
.gb-tone-3 { background: #f1f5f9; color: #334155; }
.gb-tone-2 { background: #ffedd5; color: #9a3412; }
.gb-tone-1 { background: #fee2e2; color: #991b1b; }
.gb-status { font-size: .74rem; color: #94a3b8; }
.asg-present-form { display: inline; margin: 0 .35rem 0 0; }
.asg-ungraded { margin-left: .25rem; color: #64748b; font-size: .92em; }
.gb-flag { margin-left: .25rem; color: #ea580c; font-size: .8rem; cursor: help; }
.gb-flag-level { display: inline-flex; margin: 0; font-size: .8rem; color: var(--color-muted, #64748b); }
.gb-flag-level select { margin-left: .3rem; font-size: .8rem; padding: .1rem .3rem; border-radius: 6px; border: 1px solid var(--color-border, #cbd5e1); background: var(--color-surface, #fff); color: inherit; }
.gb-work { margin: .6rem 0; padding: .55rem .65rem; border-radius: 8px; background: var(--color-surface-2, #f8fafc); border: 1px solid var(--color-border, #e2e8f0); font-size: .82rem; }
.gb-work.is-flagged { border-color: #fdba74; background: #fff7ed; }
html.coach-dark .gb-work.is-flagged { background: #3a2412; border-color: #9a3412; }
.gb-work-title { font-weight: 700; margin-bottom: .3rem; }
.gb-work-item { margin: .25rem 0; }
.gb-done { font-size: .82rem; font-weight: 600; color: #15803d; }
html.coach-dark .gb-done { color: #86efac; }
.gb-cell--avg .gb-status { display: block; }
.gb-late { display: inline-block; margin-left: .25rem; padding: 0 .35rem; border-radius: 999px; background: #fee2e2; color: #991b1b;
           font-size: .66rem; font-weight: 700; cursor: help; }
.gb-own { font-size: .7rem; margin-left: .15rem; cursor: help; }
.gb-avg { font-weight: 700; }
.gb-more { position: absolute; top: 50%; right: .25rem; transform: translateY(-50%); width: 1.45rem; height: 1.45rem; padding: 0;
           border: 1px solid var(--color-border); border-radius: 5px; background: var(--color-surface); color: var(--color-primary);
           font-size: .78rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .1s; }
.gb-cell:hover .gb-more, .gb-more:focus-visible, .gb-cell.is-open .gb-more { opacity: 1; }
.gb-more:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.gb-panel { width: 21rem; flex: none; border-left: 1px solid var(--color-border); background: var(--color-surface); max-height: 70vh; overflow: auto; }
.gb-panel[hidden] { display: none; }
.gb-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; padding: .75rem .9rem;
                 border-bottom: 1px solid var(--color-border); position: sticky; top: 0; background: var(--color-surface); }
.gb-panel-kicker { font-size: .75rem; color: var(--color-muted); }
.gb-panel-title { margin: .1rem 0 0; font-size: 1.02rem; }
.gb-panel-nav { display: flex; gap: .25rem; flex: none; }
.gb-panel-btn { width: 1.8rem; height: 1.8rem; border: 1px solid var(--color-border); border-radius: 6px; background: none; color: var(--color-text); cursor: pointer; }
.gb-panel-btn:hover { background: rgba(100,116,139,.12); }
.gb-panel-body { padding: .9rem; }
.gb-panel-grade { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.gb-panel-grade span { font-size: .85rem; font-weight: 600; color: var(--color-muted); }
.gb-panel-grade--none { font-size: 1.05rem; color: var(--color-muted); }
.gb-panel-basis { font-size: .75rem; color: var(--color-muted); }
.gb-facts { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .4rem .6rem; font-size: .84rem; margin: .8rem 0 1rem; }
.gb-facts dt { color: var(--color-muted); font-weight: 600; font-size: .78rem; }
.gb-facts dd { margin: 0; overflow-wrap: anywhere; }
.gb-fact-note { font-size: .75rem; color: var(--color-muted); margin-top: .15rem; }
.gb-panel-links { display: flex; gap: .4rem; flex-wrap: wrap; }
.gb-note { font-size: .78rem; color: var(--color-muted); margin: .6rem 0 0; max-width: 60rem; }
@media (max-width: 900px) {
    .gb-panel { position: fixed; right: 0; top: 0; bottom: 0; max-height: none; z-index: 50; box-shadow: -8px 0 24px rgba(15,23,42,.15); }
}

/* ── The grader (Faculty/Grade): the student's code | the grading panel ────────── */
.gr-page .lc-bar { gap: 1rem; }
.gr-nav { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.gr-nav select { width: auto; min-width: 16rem; max-width: 24rem; padding: .25rem .5rem; font-size: .88rem; }
.gr-step { min-width: 2.2rem; font-size: 1.05rem; line-height: 1; }
.gr-step[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.gr-progress { font-size: .8rem; color: var(--color-muted); white-space: nowrap; }
.gr-row > .vsc { flex: 1; min-width: 0; }
/* The grader's pages: tabs under the student bar; each page's work on the left, the panel on the right */
.gr-pages { display: flex; gap: .25rem; padding: 0 .75rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface, #fff); overflow-x: auto; }
.gr-page-tab { display: inline-flex; align-items: baseline; gap: .45rem; padding: .5rem .8rem; border: 0; border-bottom: 2px solid transparent; background: none;
               color: var(--color-muted); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.gr-page-tab:hover { color: var(--color-text); }
.gr-page-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.gr-page-pts { font-size: .75rem; font-weight: 500; color: var(--color-muted); }
.gr-main { flex: 1; min-width: 0; display: flex; }
.gr-pane { flex: 1; min-width: 0; overflow: auto; }
.gr-pane[hidden] { display: none; }
.gr-pane--code { display: flex; overflow: hidden; }
.gr-pane--code > .vsc { flex: 1; min-width: 0; }
.gr-work { max-width: 54rem; margin: 0 auto; padding: 1rem 1.25rem 3rem; }
.gr-work-title { display: flex; align-items: baseline; gap: .55rem; margin: .4rem 0 .8rem; font-size: 1.1rem; }
.gr-work-title small { font-size: .8rem; font-weight: 400; color: var(--color-muted); }
.gr-letter { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #4f46e5;
             color: #fff; font-size: .85rem; flex-shrink: 0; align-self: center; }
.gr-q { padding: .9rem 1rem; margin-bottom: .9rem; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface, #fff); }
.gr-q-text { margin: 0 0 .45rem; font-size: .92rem; font-weight: 600; }
.gr-answer { white-space: pre-wrap; line-height: 1.55; padding: .55rem .7rem; background: #f8fafc; border-radius: 8px; font-size: .92rem; }
.gr-part { margin-top: .6rem; padding: .55rem .7rem; border-radius: 8px; background: #f5f7ff; border: 1px solid #e0e7ff; }
.gr-part--yours { border-color: #a5b4fc; }
.gr-part--uncounted { background: #f8fafc; border-color: var(--color-border); }
.gr-ai { font-size: .82rem; line-height: 1.45; margin-bottom: .4rem; }
.gr-ai--none { color: var(--color-muted); font-style: italic; }
.gr-ai-tag { display: inline-block; padding: 0 .35rem; border-radius: 4px; background: #e0e7ff; color: #3730a3; font-size: .68rem; font-weight: 700; margin-right: .2rem; }
.gr-ai-why { display: block; color: #475569; margin-top: .15rem; }
/* Rate this answer again (the AI's rating's ↻) */
.gr-rerate { margin-left: .35rem; padding: 0 .4rem; border: 1px solid var(--color-border, #d0d7de); border-radius: 999px; background: none; color: inherit; cursor: pointer; font-size: .85rem; line-height: 1.4; }
.gr-rerate:hover:not(:disabled) { border-color: currentColor; }
.gr-use-ai { margin-top: .25rem; border: 0; background: none; padding: 0; color: var(--color-primary); font-size: .78rem; cursor: pointer; text-decoration: underline; }
.gr-part-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.gr-part-points { display: inline-flex; align-items: center; gap: .3rem; margin: 0; white-space: nowrap; color: var(--color-muted); font-size: .85rem; }
.gr-src { font-size: .72rem; color: var(--color-muted); min-width: 4.2rem; }
.gr-part--yours .gr-src { color: #4338ca; font-weight: 600; }
.gr-uncounted { font-size: .78rem; color: var(--color-muted); }
.gr-reset[hidden] { display: none; }
.gr-chat-wrap { margin-top: .6rem; }
.gr-chat-wrap > summary { cursor: pointer; font-size: .82rem; color: var(--color-muted); }
.gr-chat { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.gr-msg { max-width: 86%; padding: .45rem .7rem; border-radius: 10px; font-size: .88rem; line-height: 1.5; }
.gr-msg--assistant { background: #f1f5f9; align-self: flex-start; }
.gr-msg--user { background: #e0e7ff; align-self: flex-end; }
.gr-msg--user .gr-msg-body { white-space: pre-wrap; }
.gr-msg-meta { font-size: .68rem; color: var(--color-muted); margin-bottom: .1rem; }
.gr-msg-body p { margin: 0 0 .4rem; }
.gr-msg-body p:last-child { margin-bottom: 0; }
.gr-mc { padding-left: 1.3rem; margin: .9rem 0 0; }
.gr-mc-q { margin-bottom: .8rem; }
.gr-mc-ans { font-size: .88rem; margin-top: .2rem; }
.gr-mc-ans.ok > span { color: #16a34a; font-weight: 700; }
.gr-mc-ans.bad > span { color: #dc2626; font-weight: 700; }
.gr-test-part { padding: .45rem 0; border-top: 1px dashed var(--color-border); }
.gr-test-file { margin-top: .5rem; padding-top: .45rem; border-top: 1px solid var(--color-border); font-size: .82rem; font-weight: 700; }
.gr-test-part--sub { margin-left: .8rem; }
.gr-cases { list-style: none; margin: .25rem 0 0; padding: 0; font-size: .78rem; }
.gr-case { padding: .1rem 0; }
.gr-case--pass .gr-test-icon { color: #16a34a; }
.gr-case--fail .gr-test-icon { color: #dc2626; }
.gr-case--notrun { color: var(--color-muted); }
.gr-case-why { display: block; margin-left: 1.25rem; color: var(--color-muted); white-space: pre-wrap; }
.gr-left-out { margin: .3rem 0 0; padding: .35rem .55rem; border-radius: 6px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
               font-size: .78rem; white-space: pre-wrap; word-break: break-word; }
.gr-test-head { display: flex; gap: .4rem; align-items: baseline; font-size: .85rem; font-weight: 600; cursor: help; }
.gr-test-part .gr-part { margin-top: .3rem; padding: .4rem .5rem; }
.gr-test-part.gr-test--pass .gr-test-icon { color: #16a34a; }
.gr-test-part.gr-test--fail .gr-test-icon { color: #dc2626; }
.gr-test-part.gr-test--notrun .gr-test-head { color: var(--color-muted); }
.gr-hidden-tag { margin-left: .35rem; font-size: .68rem; font-weight: 500; background: #f1f5f9; color: #64748b; border-radius: 999px; padding: 0 .4rem; }
.gr-override { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-weight: 600; }
.gr-override input { width: 6rem; text-align: right; font-weight: 700; }
.gr-ai-state { padding: .6rem 0; border-bottom: 1px solid var(--color-border); }
.gr-ai-state .btn { margin-top: .35rem; }
[data-only][hidden] { display: none; }
.gr-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--color-muted); }
.gr-panel { width: clamp(300px, 28vw, 440px); flex-shrink: 0; overflow: auto; border-left: 1px solid var(--color-border);
            background: var(--color-surface); padding: .9rem 1rem 1.25rem; font-size: .9rem; }
.gr-total { padding: .2rem 0 .8rem; border-bottom: 1px solid var(--color-border); }
.gr-total-label { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-muted); }
.gr-total-value { font-size: 1.6rem; font-weight: 700; line-height: 1.25; }
.gr-total-sub { font-size: .8rem; color: var(--color-muted); }
.gr-held { margin-top: .45rem; padding: .3rem .55rem; border-radius: 6px; font-size: .78rem; background: #fef3c7; color: #92400e; }
.gr-held--released { background: #dcfce7; color: #166534; }
.gr-release { margin: 0; }
.gr-flash { padding: .4rem 1rem; font-size: .85rem; background: #ecfdf5; color: #065f46; border-bottom: 1px solid #a7f3d0; }
.gr-sec { padding: .8rem 0; border-bottom: 1px solid var(--color-border); }
.gr-h { margin: 0 0 .45rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); }
.gr-note { margin: .3rem 0 0; font-size: .8rem; color: var(--color-muted); }
.gr-changes { margin: 0; font-weight: 600; }
.gr-added { color: #16a34a; }
.gr-removed { color: #dc2626; }
/* An ⓘ beside a heading: its note on hover or focus */
.gr-info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; margin-left: .3rem;
           border: 1px solid currentColor; border-radius: 50%; font: italic 700 .65rem/1 Georgia, serif; text-transform: none; letter-spacing: 0;
           vertical-align: .05rem; cursor: help; }
.gr-info:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.gr-tip { position: absolute; z-index: 20; top: calc(100% + 6px); left: -.4rem; width: 17rem; padding: .5rem .65rem; border-radius: 6px;
          background: #1e293b; color: #f1f5f9; font: 400 .78rem/1.45 system-ui, sans-serif; text-transform: none; letter-spacing: 0;
          box-shadow: 0 4px 14px rgba(15, 23, 42, .25); visibility: hidden; opacity: 0; transition: opacity .12s; }
.gr-info:hover .gr-tip, .gr-info:focus .gr-tip { visibility: visible; opacity: 1; }
.gr-tests { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .82rem; }
.gr-test { display: flex; gap: .45rem; align-items: baseline; padding: .15rem 0; cursor: help; }
.gr-test-icon { width: 1rem; text-align: center; font-weight: 700; }
.gr-test-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-test-pts { color: var(--color-muted); white-space: nowrap; }
.gr-test--pass .gr-test-icon { color: #16a34a; }
.gr-test--fail .gr-test-icon { color: #dc2626; }
.gr-test--notrun { color: var(--color-muted); }
.gr-item { padding: .6rem 0; border-top: 1px dashed var(--color-border); }
.gr-item:first-of-type { border-top: 0; padding-top: .1rem; }
.gr-item-head { display: flex; align-items: center; gap: .5rem; }
.gr-item-name { flex: 1; font-weight: 600; }
.gr-item-points { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; color: var(--color-muted); }
.gr-points { width: 4.5rem; padding: .2rem .4rem; text-align: right; font-weight: 700; }
.gr-criteria { margin: .3rem 0 0; font-size: .82rem; color: var(--color-muted); white-space: pre-wrap; }
.gr-quick { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .4rem; }
.gr-quick-btn { border: 1px solid var(--color-border); background: none; color: var(--color-text); border-radius: 999px; padding: .1rem .6rem;
                font: inherit; font-size: .76rem; cursor: pointer; }
.gr-quick-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.gr-fb-wrap { margin-top: .45rem; }
.gr-fb { width: 100%; min-height: 6rem; }
.gr-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding: .9rem 0 .2rem; position: sticky; bottom: -1.25rem;
              background: var(--color-surface); }
.gr-state { flex: 1; font-size: .8rem; color: var(--color-muted); }
.gr-state--dirty { color: #b45309; }
.gr-state--ok { color: #16a34a; }
.gr-state--error { color: #b91c1c; }
.gr-instr summary { cursor: pointer; }
.gr-instr-body { font-size: .85rem; max-height: 40vh; overflow: auto; }
/* The grader's changes in the code: as VS Code marks them (a bar for added or changed lines, a wedge where some went) */
.gr-line-added { background: rgba(34,197,94,.10); }
.gr-gutter-added { border-left: 3px solid #22c55e; margin-left: 3px; }
.gr-gutter-removed { border-left: 0; margin-left: 3px; }
.gr-gutter-removed::before { content: ""; display: block; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
                             border-left: 6px solid #ef4444; margin-top: -4px; }
/* The grader in the dark theme (html.coach-dark: the code window's ⚙, or the header's switch): its answers, scores and
   conversations on dark surfaces, as the student pages' (their light backgrounds would leave the dark theme's light text unreadable) */
html.coach-dark .gr-answer { background: #252526; color: var(--color-text); }
html.coach-dark .gr-part { background: #1d2230; border-color: #2c3a5e; color: var(--color-text); }
html.coach-dark .gr-part--yours { border-color: #5865c7; }
html.coach-dark .gr-part--uncounted { background: #222222; border-color: var(--color-border); }
html.coach-dark .gr-part--yours .gr-src { color: #a5b4fc; }
html.coach-dark .gr-ai-tag { background: #2e2350; color: #c4b5fd; }
html.coach-dark .gr-ai-why { color: #c8c8c8; }
html.coach-dark .gr-use-ai { color: #4daafc; }
html.coach-dark .gr-quick-btn { border-color: #3c3c3c; }
html.coach-dark .gr-quick-btn:hover { border-color: #4daafc; color: #4daafc; }
html.coach-dark .gr-msg--assistant { background: #2a2d2e; color: var(--color-text); }
html.coach-dark .gr-msg--user { background: #1b2b3f; color: #d6e6ff; }
html.coach-dark .gr-msg-body code, html.coach-dark .gr-msg-body pre { background: rgba(255, 255, 255, .08); }
html.coach-dark .gr-msg-body a { color: #4daafc; }
html.coach-dark .gr-hidden-tag { background: #2a2d2e; color: #9d9d9d; }
html.coach-dark .gr-left-out { background: #3a2a10; border-color: #6b4a1a; color: #fdba74; }
html.coach-dark .gr-held { background: #3a3000; color: #e2c08d; }
html.coach-dark .gr-held--released { background: #1b3326; color: #86efac; }
html.coach-dark .gr-flash { background: #1b3326; color: #86efac; border-bottom-color: #2f5c3f; }
html.coach-dark .gr-mc-ans.ok > span, html.coach-dark .gr-case--pass .gr-test-icon, html.coach-dark .gr-test--pass .gr-test-icon { color: #4ade80; }
html.coach-dark .gr-mc-ans.bad > span, html.coach-dark .gr-case--fail .gr-test-icon, html.coach-dark .gr-test--fail .gr-test-icon { color: #f87171; }
.gb-grade-col { display: block; margin: .3rem auto -.1rem; width: max-content; padding: .05rem .5rem; border-radius: 999px; border: 1px solid var(--color-border);
                font-size: .7rem; font-weight: 600; color: var(--color-primary); text-decoration: none; background: var(--color-surface); }
.gb-grade-col:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.gb-grade.gb-grade--provisional { background: transparent !important; box-shadow: inset 0 0 0 1px currentColor; opacity: .8; }
.gb-release { margin: .25rem auto -.1rem; width: max-content; }
.gb-release-btn { display: block; padding: .05rem .5rem; border-radius: 999px; border: 1px solid #f59e0b; background: #fef3c7; color: #92400e;
                  font-size: .7rem; font-weight: 600; cursor: pointer; }
.gb-release-btn:hover { background: #f59e0b; color: #fff; }
.gb-held-tag { display: block; margin: .25rem auto -.1rem; width: max-content; font-size: .68rem; color: #92400e; }
.gb-held { margin-left: .3rem; font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #b45309; }

/* ── What an instructor graded by hand (_HandGrades), and what they'll look for (_HandGradedAhead) ── */
.hg-total { margin: 0 0 .6rem; }
.hg-breakdown { display: block; font-size: .82rem; color: var(--color-muted, #64748b); margin-top: .15rem; }
.hg-items { list-style: none; margin: 0 0 .6rem; padding: 0; }
.hg-item { padding: .55rem 0; border-top: 1px solid var(--color-border, #e2e8f0); }
.hg-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.hg-item-name { font-weight: 600; }
.hg-item-pts { white-space: nowrap; font-size: .88rem; }
.hg-item--pending .hg-item-pts { color: var(--color-muted, #94a3b8); font-style: italic; }
.hg-criteria { font-size: .82rem; color: var(--color-muted, #64748b); white-space: pre-wrap; margin-top: .2rem; }
.hg-md { margin-top: .35rem; padding: .5rem .7rem; background: var(--code-bg, #f8fafc); border-left: 3px solid #6366f1; border-radius: 4px;
         font-size: .9rem; line-height: 1.55; white-space: pre-wrap; }
.hg-md--html { white-space: normal; }
.hg-md p { margin: 0 0 .45rem; }
.hg-md p:last-child { margin-bottom: 0; }
.hg-md ul, .hg-md ol { margin: 0 0 .45rem; padding-left: 1.2rem; }
.hg-overall { margin-top: .4rem; }
.hg-overall-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-primary-ink, #4f46e5); font-weight: 700; }
.hg-link { margin: .6rem 0 0; }
.hg-held-note { margin: 0 0 .6rem; padding: .35rem .6rem; border-radius: 6px; font-size: .82rem; background: #fef3c7; color: #92400e; }
html.coach-dark .hg-held-note { background: #3a2f12; color: #fcd34d; }
.hg-held-note--released { background: #dcfce7; color: #166534; }
html.coach-dark .hg-held-note--released { background: #12301f; color: #86efac; }
/* A part's points and the instructor's feedback, under it on the student's review page */
.hg-part { margin-top: .45rem; }
.hg-part-pts { display: inline-block; font-size: .78rem; font-weight: 700; padding: .05rem .5rem; border-radius: 999px;
               background: var(--color-primary-soft, #eef2ff); color: var(--color-primary-ink, #3730a3); }
.rv-tests tr.rv-tests-sub td:nth-child(2) { padding-left: 1.4rem; }
.rv-tests tr.rv-tests-together td { padding-top: .2rem; padding-bottom: .2rem; font-size: .78rem; opacity: .75; border-top: 0; }
.rv-tests-note { font-size: .74rem; opacity: .75; }
.rv-tests-given { margin-left: .3rem; color: var(--color-primary-ink, #3730a3); cursor: help; }
.rv-hand { margin-top: .8rem; }
.rv-hand-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-primary-ink, #4f46e5); font-weight: 700; }
.rv-hand-item { padding: .5rem 0; border-top: 1px solid var(--color-border, #e2e8f0); }
.rv-hand-head { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; }
.hg-ahead { margin-top: 1rem; padding: .7rem .85rem; border: 1px solid var(--color-info-border, #c7d2fe); background: var(--color-primary-soft, #eef2ff);
            border-radius: 8px; font-size: .9rem; }
.hg-ahead-title { font-weight: 700; margin-bottom: .2rem; }
.hg-ahead p { margin: 0 0 .35rem; }
.hg-ahead ul { margin: 0; padding-left: 1.2rem; }
.hg-ahead li + li { margin-top: .3rem; }
.hg-ahead-pts { color: var(--color-muted, #64748b); font-size: .82rem; }

/* ── Notebooks (.ipynb, notebook.js), after VS Code's: cells, their outputs, and the kernel ── */
.vsc-ficon--nb { color: #f37726; }
.vsc-ficon--nb::before { content: 'nb'; }
.vsc-ficon--deck { color: #d24726; }
.vsc-ficon--deck::before { content: '▭'; font-size: 12px; }
.vsc-ficon--sheet { color: #21a366; }
.vsc-ficon--sheet::before { content: '▦'; font-size: 12px; }
.py-notebooks { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--vsc-bg); }
.py-nb { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.py-nb[hidden] { display: none; }
.vsc-title-link { margin-left: 8px; padding: 0 6px; border: 1px solid var(--vsc-btn2-border); border-radius: 4px; background: var(--vsc-btn2);
                  color: var(--vsc-fg); font: inherit; font-size: 12px; cursor: pointer; }
.py-notebooks[hidden] { display: none; }
.nb { --nb-font: 14px; flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--vsc-bg); color: var(--vsc-fg); outline: none;
      --nb-sel: var(--vsc-accent); --nb-cell-bg: color-mix(in srgb, var(--vsc-fg) 5%, var(--vsc-bg)); }
.nb[hidden] { display: none; }
.nb { container-type: inline-size; }
/* A narrow code window: the toolbar's buttons as icons (their names in their tooltips) */
@container (max-width: 620px) { .nb-label { display: none; } .nb-kernel-text { max-width: 9em; overflow: hidden; text-overflow: ellipsis; } }
.nb-bar { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 2px; padding: 3px 8px; min-height: 32px; flex-wrap: wrap;
          border-bottom: 1px solid var(--vsc-border); background: var(--vsc-bg); }
.nb-btn { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 7px; border: 0; border-radius: 4px; background: transparent;
          color: var(--vsc-fg); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.nb-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.nb-btn:hover:not(:disabled) { background: var(--vsc-hover); }
.nb-btn:disabled { opacity: .45; cursor: default; }
.nb-btn[data-act="run-all"] svg, .nb-run svg { color: #89d185; }
.vsc--light .nb-btn[data-act="run-all"] svg, html.coach-light .nb-btn[data-act="run-all"] svg,
.vsc--light .nb-run svg, html.coach-light .nb-run svg { color: #388a34; }
.nb-sep { width: 1px; height: 16px; margin: 0 4px; background: var(--vsc-border); }
.nb-fill { flex: 1; }
.nb-note { padding: 0 8px; font-size: 11.5px; color: var(--vsc-fg-dim); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@container (max-width: 760px) { .nb-note { display: none; } }
.nb-kernel { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; font-size: 12px; color: var(--vsc-fg-dim); white-space: nowrap; }
.nb-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--vsc-fg-dim); }
.nb[data-kernel="idle"] .nb-dot { background: #89d185; border-color: #89d185; }
.nb[data-kernel="busy"] .nb-dot { background: #e2c08d; border-color: #e2c08d; }
.nb[data-kernel="starting"] .nb-dot { border-color: var(--vsc-accent); border-top-color: transparent; animation: nb-spin .8s linear infinite; }
.nb-menu { position: absolute; top: 100%; z-index: 30; min-width: 220px; padding: 4px; background: var(--vsc-menu); border: 1px solid var(--vsc-border);
           border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.nb-menu-item { display: block; width: 100%; padding: 5px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--vsc-fg);
                font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.nb-menu-item:hover, .nb-menu-item:focus { background: var(--vsc-active); color: var(--vsc-fg-strong); outline: none; }
.nb-broken { margin: 16px; padding: 12px 14px; border: 1px solid var(--vsc-border); border-radius: 6px; font-size: 13px; }
.nb-broken p { margin: 0 0 8px; }
.nb-broken .nb-btn { display: inline-flex; border: 1px solid var(--vsc-btn2-border); background: var(--vsc-btn2); }
.nb-scroll { flex: 1; min-height: 0; overflow: auto; padding: 8px 0 40vh; }
.nb-scroll[hidden] { display: none; }
.nb-cells { max-width: 1400px; }
/* A cell: the run button and [n] on the left, the editor (or formatted Markdown), then its outputs */
.nb-cell { position: relative; padding: 0 16px 0 0; outline: none; }
.nb-row { display: flex; align-items: stretch; }
.nb-gutter { flex: 0 0 52px; display: flex; flex-direction: column; align-items: center; padding-top: 6px; gap: 2px; }
.nb-count { font: 11px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--vsc-fg-dim); }
.nb-run { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: transparent;
          color: var(--vsc-fg); cursor: pointer; visibility: hidden; }
.nb-run svg { width: 15px; height: 15px; }
.nb-cell:hover .nb-run, .nb-cell.is-selected .nb-run, .nb-cell.is-running .nb-run, .nb-cell.is-queued .nb-run { visibility: visible; }
.nb-cell.is-running .nb-run svg, .nb-cell.is-queued .nb-run svg { color: var(--vsc-fg); }
.nb-run:hover { background: var(--vsc-hover); }
.nb-main { position: relative; flex: 1; min-width: 0; border: 1px solid transparent; border-radius: 4px; }
.nb-cell--code .nb-main { background: var(--nb-cell-bg); border-color: var(--vsc-border); }
.nb-cell.is-selected .nb-main { border-color: color-mix(in srgb, var(--nb-sel) 55%, var(--vsc-border)); }
.nb-cell.is-editing .nb-main { border-color: var(--nb-sel); }
/* The bar on the left of the picked cell, as VS Code marks it */
.nb-cell.is-selected::before { content: ''; position: absolute; left: 44px; top: 4px; bottom: 4px; width: 3px; border-radius: 2px;
                               background: color-mix(in srgb, var(--nb-sel) 45%, transparent); }
.nb-cell.is-selected:focus::before, .nb-cell.is-editing::before { background: var(--nb-sel); }
.nb-gap + .nb-row .nb-gutter { padding-top: 6px; }
.nb-input { min-height: 20px; }
.nb-input[hidden] { display: none; }
.nb-input .monaco-editor, .nb-input .monaco-editor .overflow-guard { border-radius: 4px; }
.nb-cell--code .nb-input .monaco-editor, .nb-cell--code .nb-input .monaco-editor-background,
.nb-cell--code .nb-input .monaco-editor .margin { background: var(--nb-cell-bg); }
.nb-cell--markdown .nb-main { padding: 0; }
.nb-cell--markdown.is-md-editing .nb-main { background: var(--nb-cell-bg); border-color: var(--vsc-border); }
.nb-cell--markdown.is-md-editing.is-selected .nb-main { border-color: var(--nb-sel); }
.nb-md { padding: 4px 8px; min-height: 24px; cursor: default; }
.nb-md[hidden] { display: none; }
.nb-md-empty { margin: 0; color: var(--vsc-fg-dim); font-style: italic; font-size: 13px; }
.nb-state { min-height: 0; padding: 0 8px; font-size: 11.5px; color: var(--vsc-fg-dim); }
.nb-state:not(:empty) { padding: 0 8px 4px; }
.nb-state.is-ok { color: #89d185; }
.vsc--light .nb-state.is-ok, html.coach-light .nb-state.is-ok { color: #388a34; }
.nb-state.is-error { color: var(--vsc-term-err); }
.nb-state.is-running::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: -1px; border-radius: 50%;
                               border: 1.5px solid var(--vsc-accent); border-top-color: transparent; animation: nb-spin .8s linear infinite; }
@keyframes nb-spin { to { transform: rotate(360deg); } }
/* The cell's own buttons: top right, when it's picked or pointed at */
.nb-tools { position: absolute; z-index: 5; top: -13px; right: 8px; display: none; gap: 1px; padding: 1px; border: 1px solid var(--vsc-border);
            border-radius: 4px; background: var(--vsc-bg); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.nb-cell:hover .nb-tools, .nb-cell.is-selected .nb-tools { display: flex; }
.nb-tools:empty { display: none !important; }
.nb-tool { width: 24px; height: 22px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 3px; background: transparent;
           color: var(--vsc-fg); cursor: pointer; }
.nb-tool svg { width: 14px; height: 14px; }
.nb-tool:hover { background: var(--vsc-hover); }
.nb-tool[data-act="run-above"] svg, .nb-tool[data-act="run-below"] svg { color: #89d185; }
.nb-glyph { font: 700 10px/1 ui-monospace, Menlo, Consolas, monospace; }
.nb-md-done { display: none !important; }
.nb-cell.is-md-editing .nb-md-done { display: flex !important; }
.nb-tool[data-act="delete"]:hover { color: var(--vsc-term-err); }
/* Between cells: + Code / + Markdown, when pointed at */
.nb-gap { height: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-left: 52px; opacity: 0; transition: opacity .12s; }
.nb-gap:hover, .nb-gap.is-open, .nb-gap:focus-within { opacity: 1; }
.nb-tail .nb-gap { height: 34px; }
.nb-gap-btn { height: 20px; padding: 0 9px; border: 1px solid var(--vsc-btn2-border); border-radius: 4px; background: var(--vsc-bg); color: var(--vsc-fg);
              font: inherit; font-size: 11.5px; cursor: pointer; }
.nb-gap-btn:hover { border-color: var(--vsc-accent); }
/* Outputs */
.nb-outputs { display: none; position: relative; margin-left: 52px; padding: 4px 0 2px; }
.nb-cell.has-outputs .nb-outputs { display: flex; }
.nb-out-gutter { position: absolute; left: -10px; top: 4px; bottom: 2px; width: 8px; cursor: pointer; border-radius: 3px; }
.nb-out-gutter:hover { background: color-mix(in srgb, var(--vsc-accent) 35%, transparent); }
.nb-out-clear { position: absolute; left: -40px; top: 0; width: 22px; height: 22px; display: none; align-items: center; justify-content: center; border: 0;
                border-radius: 3px; background: transparent; color: var(--vsc-fg-dim); cursor: pointer; }
.nb-out-clear svg { width: 12px; height: 12px; }
.nb-outputs:hover .nb-out-clear { display: flex; }
.nb-out-clear:hover { background: var(--vsc-hover); color: var(--vsc-fg); }
.nb-out-list { flex: 1; min-width: 0; padding: 0 8px; }
.nb-cell.outputs-hidden .nb-out-list { display: none; }
.nb-out-hidden { border: 0; background: transparent; color: var(--vsc-fg-dim); font: inherit; font-size: 12px; font-style: italic; cursor: pointer; padding: 2px 8px; }
.nb-out-hidden[hidden] { display: none; }
.nb-out + .nb-out { margin-top: 4px; }
.nb-stream, .nb-error { margin: 0; padding: 2px 0; max-height: 480px; overflow: auto; white-space: pre-wrap; word-break: break-word;
                        font: calc(var(--nb-font) - 1px)/1.45 ui-monospace, Menlo, Consolas, 'Courier New', monospace; color: var(--vsc-fg); background: transparent; }
.nb-stderr { background: color-mix(in srgb, var(--vsc-term-err) 9%, transparent); }
.nb-error { color: var(--vsc-fg); background: color-mix(in srgb, var(--vsc-term-err) 11%, transparent); padding: 6px 8px; border-radius: 3px; max-height: none; }
.nb-img { display: block; max-width: 100%; height: auto; background: #fff; border-radius: 2px; }
.nb-html { display: block; width: 100%; height: 40px; border: 0; background: transparent; }
/* Formatted Markdown (cells, and Markdown outputs) */
.nb-markdown { font-size: var(--nb-font); line-height: 1.55; overflow-wrap: break-word; }
.nb-markdown > :first-child { margin-top: 0; }
.nb-markdown > :last-child { margin-bottom: 0; }
.nb-markdown h1, .nb-markdown h2, .nb-markdown h3, .nb-markdown h4, .nb-markdown h5, .nb-markdown h6 { color: var(--vsc-fg-strong); font-weight: 600; line-height: 1.25; margin: .9em 0 .45em; }
.nb-markdown h1 { font-size: 1.85em; padding-bottom: .2em; border-bottom: 1px solid var(--vsc-border); }
.nb-markdown h2 { font-size: 1.45em; padding-bottom: .15em; border-bottom: 1px solid var(--vsc-border); }
.nb-markdown h3 { font-size: 1.2em; }
.nb-markdown h4 { font-size: 1em; }
.nb-markdown p, .nb-markdown ul, .nb-markdown ol, .nb-markdown blockquote, .nb-markdown table, .nb-markdown pre { margin: 0 0 .7em; }
.nb-markdown ul, .nb-markdown ol { padding-left: 1.8em; }
.nb-markdown li + li { margin-top: .15em; }
.nb-markdown a { color: #4daafc; }
.vsc--light .nb-markdown a, html.coach-light .nb-markdown a { color: #005fb8; }
.nb-markdown code { padding: .1em .35em; border-radius: 3px; font: .9em ui-monospace, Menlo, Consolas, monospace; background: color-mix(in srgb, var(--vsc-fg) 11%, transparent); }
.nb-markdown pre { padding: 8px 10px; border-radius: 4px; overflow: auto; background: color-mix(in srgb, var(--vsc-fg) 7%, transparent); }
.nb-markdown pre code { padding: 0; background: transparent; font-size: .88em; }
.nb-markdown blockquote { padding: 0 1em; color: var(--vsc-fg-dim); border-left: 3px solid var(--vsc-border); }
.nb-markdown table { border-collapse: collapse; }
.nb-markdown th, .nb-markdown td { padding: 4px 10px; border: 1px solid var(--vsc-border); }
.nb-markdown th { font-weight: 600; background: color-mix(in srgb, var(--vsc-fg) 5%, transparent); }
.nb-markdown img { max-width: 100%; }
.nb-markdown hr { border: 0; border-top: 1px solid var(--vsc-border); margin: 1em 0; }
.nb-markdown .katex-display { margin: .6em 0; overflow-x: auto; overflow-y: hidden; }
.nb-md-out { padding: 2px 0; }
/* Read-only (locked work, a student's work looked at): nothing to add, move or delete */
.nb.is-readonly .nb-edit-only, .nb.no-run .nb-run-only { display: none !important; }
/* Terminal colours in outputs (Jupyter's tracebacks): VS Code's palette */
.nb-bold { font-weight: 700; } .nb-uline { text-decoration: underline; }
.nb-fg30 { color: #6e7681; } .nb-fg31 { color: #f14c4c; } .nb-fg32 { color: #23d18b; } .nb-fg33 { color: #e5c07b; }
.nb-fg34 { color: #3b8eea; } .nb-fg35 { color: #d670d6; } .nb-fg36 { color: #29b8db; } .nb-fg37 { color: #cccccc; }
.nb-fg90 { color: #8b949e; } .nb-fg91 { color: #f14c4c; } .nb-fg92 { color: #23d18b; } .nb-fg93 { color: #f5f543; }
.nb-fg94 { color: #3b8eea; } .nb-fg95 { color: #d670d6; } .nb-fg96 { color: #29b8db; } .nb-fg97 { color: #e5e5e5; }
.nb-bg41 { background: rgba(241, 76, 76, .25); } .nb-bg42 { background: rgba(35, 209, 139, .25); } .nb-bg43 { background: rgba(229, 192, 123, .25); }
.nb-bg44 { background: rgba(59, 142, 234, .25); } .nb-bg45 { background: rgba(214, 112, 214, .25); } .nb-bg46 { background: rgba(41, 184, 219, .25); }
.nb--light .nb-fg30 { color: #3b3b3b; } .nb--light .nb-fg31, .nb--light .nb-fg91 { color: #cd3131; } .nb--light .nb-fg32, .nb--light .nb-fg92 { color: #00865c; }
.nb--light .nb-fg33, .nb--light .nb-fg93 { color: #8a6500; } .nb--light .nb-fg34, .nb--light .nb-fg94 { color: #0451a5; }
.nb--light .nb-fg35, .nb--light .nb-fg95 { color: #bc05bc; } .nb--light .nb-fg36, .nb--light .nb-fg96 { color: #0598bc; }
.nb--light .nb-fg37, .nb--light .nb-fg97 { color: #555555; } .nb--light .nb-fg90 { color: #6f6f6f; }

/* ── Presenting an assignment in class (Faculty/Present, _PresentBar): the presenter's bar instead of the header ── */
.present-bar { flex-shrink: 0; display: flex; align-items: center; gap: .4rem; padding: .25rem .6rem; min-height: 34px; flex-wrap: wrap;
               background: #111827; color: #e5e7eb; font-size: 13px; border-bottom: 1px solid #374151; }
.present-live { color: #f87171; font-weight: 700; letter-spacing: .02em; }
.present-title { font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
.present-fill { flex: 1; }
.present-btn { display: inline-flex; align-items: center; gap: .3rem; height: 26px; padding: 0 .6rem; border: 1px solid #4b5563; border-radius: 6px;
               background: #1f2937; color: #e5e7eb; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.present-btn:hover { background: #374151; border-color: #6b7280; }
.present-exit { border-color: #7f1d1d; }
.present-exit:hover { background: #7f1d1d; }
.present-form { display: inline; margin: 0; }
.present-zoom { display: inline-flex; align-items: center; gap: .25rem; }
.present-zoom-level { min-width: 3.2em; text-align: center; font-variant-numeric: tabular-nums; color: #9ca3af; font-size: 12px; }
@media (max-width: 700px) { .present-btn span { display: none; } }
/* Full screen: the bar slims down */
body.is-fullscreen .present-bar { min-height: 28px; padding: .1rem .5rem; }
body.is-fullscreen .present-title { font-size: 12px; }

/* ── Replay (Faculty/Replay, replay.js): a student's work played back ── */
.rp { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--color-surface, #fff); }
.rp-head { display: flex; align-items: center; gap: 1rem; padding: .45rem .9rem; border-bottom: 1px solid var(--color-border, #e2e8f0); font-size: .9rem; }
.rp-back { white-space: nowrap; }
.rp-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #7c3aed; font-weight: 700; }
.rp-clock { display: flex; gap: .8rem; font-variant-numeric: tabular-nums; color: var(--color-muted, #64748b); white-space: nowrap; }
.rp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 230px 1fr 340px; }
.rp-panes, .rp-events { overflow: auto; border-right: 1px solid var(--color-border, #e2e8f0); padding: .5rem 0; }
.rp-events { border-right: 0; border-left: 1px solid var(--color-border, #e2e8f0); padding: .5rem .4rem; }
.rp-side-title { padding: 0 .75rem .4rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted, #64748b); }
.rp-count { font-weight: 600; opacity: .8; }
.rp-note { padding: .5rem .75rem; color: var(--color-muted, #64748b); font-size: .85rem; }
.rp-group { padding: .5rem .75rem .15rem; font-size: .78rem; font-weight: 700; color: var(--color-text, #0f172a); }
.rp-pane { display: flex; align-items: center; gap: .4rem; width: 100%; padding: .3rem .75rem; border: 0; background: transparent; text-align: left;
           font: inherit; font-size: .84rem; color: inherit; cursor: pointer; }
.rp-pane.is-sub { padding-left: 1.4rem; }
.rp-pane:hover { background: var(--color-primary-soft, #eef2ff); }
.rp-pane.is-shown { background: var(--color-primary-soft, #eef2ff); font-weight: 600; box-shadow: inset 3px 0 0 #6366f1; }
.rp-pane.is-typing .rp-pane-name::after { content: ' ✎'; color: #6366f1; }
.rp-pane-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-pane-count { font-size: .72rem; color: var(--color-muted, #64748b); font-variant-numeric: tabular-nums; }
.rp-badge { font-size: .68rem; padding: 0 .35rem; border-radius: 999px; white-space: nowrap; }
.rp-badge--paste { background: #ffedd5; color: #9a3412; }
.rp-main { min-width: 0; display: flex; flex-direction: column; position: relative; }
.rp-editor-head { display: flex; align-items: center; gap: .75rem; padding: .35rem .75rem; border-bottom: 1px solid var(--color-border, #e2e8f0); font-size: .85rem; }
.rp-pane-title { flex: 1; font-weight: 600; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; }
.rp-follow, .rp-skip { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--color-muted, #64748b); white-space: nowrap; cursor: pointer; }
.rp-editor { flex: 1; min-height: 0; }
.rp-editor[hidden], .rp-empty[hidden] { display: none; }
.rp-empty { padding: 2rem; color: var(--color-muted, #64748b); }
.rp-typed { background: rgba(34, 197, 94, .28); }
.rp-pasted { background: rgba(234, 88, 12, .35); }
.rp-instructor { background: rgba(124, 58, 237, .25); }
.rp-grader { background: rgba(13, 148, 136, .28); }   /* the grader's changes (never in the student's files) */
.rp-ev { margin: 0 0 .25rem; border-radius: 6px; opacity: .45; border-left: 3px solid var(--rp-k, #94a3b8); background: var(--color-surface-2, #f8fafc); }
.rp-ev.is-past { opacity: 1; }
.rp-ev.is-now { box-shadow: 0 0 0 2px var(--rp-k, #94a3b8); }
.rp-ev-head { display: flex; gap: .5rem; width: 100%; padding: .3rem .5rem; border: 0; background: transparent; text-align: left; font: inherit; font-size: .8rem; color: inherit; cursor: pointer; }
.rp-ev-time { font-variant-numeric: tabular-nums; color: var(--color-muted, #64748b); min-width: 3.2em; }
.rp-ev-label { flex: 1; min-width: 0; font-weight: 600; }
.rp-ev-text { padding: 0 .5rem .45rem 4.1em; font-size: .78rem; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; color: var(--color-text, #0f172a); }
.rp-ev-text[hidden] { display: none; }
.rp-ev--coach .rp-ev-text { color: var(--color-muted, #475569); }
.rp-k-grading { --rp-k: #0d9488; } .rp-mark.rp-k-grading { top: 13px; }
.rp-k-paste { --rp-k: #ea580c; } .rp-k-run { --rp-k: #16a34a; } .rp-k-error { --rp-k: #dc2626; } .rp-k-chat { --rp-k: #7c3aed; }
.rp-k-away { --rp-k: #94a3b8; } .rp-k-stage { --rp-k: #0ea5e9; }
.rp-controls { display: flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border-top: 1px solid var(--color-border, #e2e8f0); }
.rp-btn { width: 34px; height: 30px; border: 1px solid var(--color-border, #cbd5e1); border-radius: 6px; background: var(--color-surface, #fff); color: inherit; cursor: pointer; font-size: .95rem; }
.rp-play { width: 44px; background: #4f46e5; border-color: #4f46e5; color: #fff; }
.rp-speed { height: 30px; border-radius: 6px; border: 1px solid var(--color-border, #cbd5e1); background: var(--color-surface, #fff); color: inherit; }
.rp-track { position: relative; flex: 1; height: 36px; border-radius: 6px; background: var(--color-surface-2, #f1f5f9); cursor: pointer; overflow: hidden; }
.rp-track canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rp-marks { position: absolute; inset: 0; }
.rp-mark { position: absolute; top: 2px; width: 3px; height: 9px; margin-left: -1px; border-radius: 2px; background: var(--rp-k); }
.rp-mark.rp-k-chat { top: 13px; } .rp-mark.rp-k-run, .rp-mark.rp-k-error { top: 24px; }
.rp-band { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, rgba(148,163,184,.25) 0 4px, transparent 4px 8px); }
.rp-head-line { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #111827; }
html.coach-dark .rp-head-line { background: #f8fafc; }
.rp-legend { display: flex; gap: .55rem; font-size: .72rem; color: var(--color-muted, #64748b); white-space: nowrap; }
.rp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 3px; background: var(--rp-k); vertical-align: 0; }
@media (max-width: 1100px) { .rp-body { grid-template-columns: 180px 1fr 260px; } .rp-legend { display: none; } }

/* Team work (Teams): the student's team on their list */
.my-item-team { font-size: .8rem; color: var(--color-muted, #64748b); }
/* Pictures in the chat: waiting to be sent (removable), and with their message */
.chat-pics { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .4rem; }
.chat-pic { position: relative; display: inline-block; }
.chat-pic img { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--color-border, #d0d7de); }
.chat-pic.is-uploading img { opacity: .55; }
.chat-pic button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: #1f2328; color: #fff; font-size: .7rem; line-height: 20px; cursor: pointer; }
.chat-pic-btn { flex: 0 0 auto; align-self: flex-end; padding: .35rem .55rem; font-size: 1rem; line-height: 1.2; }
.chat-input-area.is-dropping { outline: 2px dashed var(--color-primary, #0b57d0); outline-offset: 2px; }
.msg-pics { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.msg-pics img { display: block; max-width: 220px; max-height: 180px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .12); background: #fff; }
/* The AI didn't answer as a perspective began: Try again */
.chat-opening-failed { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .75rem 0; padding: .6rem .8rem; border: 1px solid #f0c36d; border-radius: 8px; background: #fff8e6; color: #7a4b00; font-size: .9rem; }
html.coach-dark .chat-opening-failed { background: #3a2e12; border-color: #8a6a1f; color: #f5d27a; }
.chat-team { margin: .5rem 0; padding: .45rem .7rem; border-radius: 8px; background: var(--color-primary-soft, #eef2ff); color: var(--color-primary-ink, #3730a3); font-size: .85rem; }
.message-author { font-weight: 600; margin-right: .2rem; }

/* Teams (the course page's Teams tab) */
.tm-intro { margin: 0 0 .8rem; font-size: .9rem; }
.tm-actions { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: center; margin-bottom: 1rem; }
.tm-inline { display: inline-flex; align-items: center; gap: .4rem; margin: 0; flex-wrap: wrap; font-size: .9rem; }
.tm-size { width: 4.2rem; } .tm-who { width: auto; } .tm-name { width: 12rem; }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; }
.tm-team { border: 1px solid var(--color-border, #e2e8f0); border-radius: 10px; padding: .6rem .7rem; background: var(--color-surface, #fff); }
.tm-head { display: flex; align-items: center; gap: .4rem; margin: 0 0 .3rem; }
.tm-title { flex: 1; min-width: 0; font-weight: 700; border: 1px solid transparent; border-radius: 6px; padding: .1rem .3rem; background: transparent; color: inherit; font-size: .95rem; }
.tm-title:hover, .tm-title:focus { border-color: var(--color-border, #cbd5e1); background: var(--color-surface-2, #f8fafc); }
.tm-badge { font-size: .7rem; padding: 0 .4rem; border-radius: 999px; background: #dcfce7; color: #166534; white-space: nowrap; }
.tm-members { list-style: none; margin: 0 0 .4rem; padding: 0; font-size: .88rem; }
.tm-members li { display: flex; justify-content: space-between; align-items: center; padding: .12rem 0; }
.tm-x { border: 0; background: transparent; color: var(--color-muted, #94a3b8); cursor: pointer; font-size: 1rem; line-height: 1; }
.tm-x:hover { color: #dc2626; }
.tm-add select { font-size: .82rem; padding: .2rem .4rem; }
.tm-delete { margin: .4rem 0 0; text-align: right; }
.btn-link-danger { border: 0; background: transparent; color: #b91c1c; font-size: .78rem; cursor: pointer; padding: 0; }
.tm-unteamed { margin: .9rem 0 0; font-size: .88rem; }
.rp-pane-title::after { content: attr(data-who); margin-left: .8rem; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 600; color: #7c3aed; }

/* ═══ A file's views in a code window (file-views.js): a Markdown file's formatting bar and preview (Edit | Split |
   Preview), a CSV's table (Text | Table). Code-window colours (dark or light) ═══ */
.fv-bar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-height: 32px; padding: 3px 8px;
  background: var(--vsc-bg); border-bottom: 1px solid var(--vsc-border); color: var(--vsc-fg); font-size: 12px;
}
.fv-tools { display: flex; gap: 2px; padding-right: .5rem; border-right: 1px solid var(--vsc-border); }
.fv-tool {
  min-width: 26px; height: 24px; padding: 0 6px; border: 1px solid transparent; border-radius: 4px; background: none;
  color: var(--vsc-fg); cursor: pointer; font: inherit; font-size: 13px; line-height: 1;
}
.fv-tool:hover { background: var(--vsc-hover); border-color: var(--vsc-btn2-border); color: var(--vsc-fg-strong); }
.fv-tool:focus-visible, .fv-mode:focus-visible { outline: 1px solid var(--vsc-accent); outline-offset: 1px; }
.fv-switch { display: inline-flex; border: 1px solid var(--vsc-btn2-border); border-radius: 4px; overflow: hidden; }
.fv-mode { height: 22px; padding: 0 .65rem; border: 0; background: var(--vsc-btn2); color: var(--vsc-fg); cursor: pointer; font: inherit; }
.fv-mode + .fv-mode { border-left: 1px solid var(--vsc-btn2-border); }
.fv-mode:hover { color: var(--vsc-fg-strong); }
.fv-mode.is-active { background: var(--vsc-accent); color: #fff; }
.fv-count { margin-left: auto; color: var(--vsc-fg-dim); white-space: nowrap; }
/* A SQL file's database (as VS Code's SQL connection) */
.fv-db { display: inline-flex; align-items: center; gap: .45rem; margin: 0; }
.fv-db-label { color: var(--vsc-fg-dim); }
.fv-db-label::before { content: '🗄'; margin-right: .3rem; }
.fv-db-pick { height: 24px; max-width: 320px; padding: 0 6px; border: 1px solid var(--vsc-btn2-border); border-radius: 4px; background: var(--vsc-input); color: var(--vsc-fg-strong); font: inherit; }
.fv-db-pick.is-unset { border-color: var(--vsc-warn, #cca700); color: var(--vsc-fg); }
.fv-db-pick:focus-visible { outline: 1px solid var(--vsc-accent); outline-offset: 1px; }
.fv-db-note { margin-left: .25rem; }

.fv-preview {
  position: absolute; inset: 0; overflow: auto; padding: 16px 22px 40px; background: var(--vsc-bg); color: var(--vsc-fg);
}
.fv-preview--half { left: 50%; border-left: 1px solid var(--vsc-border); }
.fv-preview[hidden], .fv-table[hidden] { display: none; }
.fv-md { --nb-font: 15px; max-width: 46rem; overflow-wrap: normal; hyphens: auto; }
.fv-md h1 { font-size: 1.55em; }
.fv-md h2 { font-size: 1.3em; }
.fv-md h3 { font-size: 1.12em; }
.fv-md table { border-collapse: collapse; }
.fv-md th, .fv-md td { border: 1px solid var(--vsc-border); padding: .3em .6em; }
.fv-empty { color: var(--vsc-fg-dim); font-style: italic; }

.fv-table { position: absolute; inset: 0; overflow: auto; background: var(--vsc-bg); color: var(--vsc-fg); font-size: 13px; }
.fv-table table { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.fv-table th, .fv-table td {
  max-width: 22rem; padding: 3px 10px; border-right: 1px solid var(--vsc-border); border-bottom: 1px solid var(--vsc-border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; cursor: default;
}
.fv-table thead th { position: sticky; z-index: 1; background: var(--vsc-side); }
.fv-table .fv-letters th { top: 0; height: 22px; color: var(--vsc-fg-dim); font-weight: 400; font-size: 11px; text-align: center; }
.fv-table .fv-head th { top: 22px; color: var(--vsc-fg-strong); font-weight: 600; box-shadow: inset 0 -2px 0 var(--vsc-border); }
.fv-table .fv-rownum { position: sticky; left: 0; z-index: 2; min-width: 3rem; background: var(--vsc-side); color: var(--vsc-fg-dim); font-weight: 400; text-align: right; }
.fv-table thead .fv-rownum { z-index: 3; }
.fv-table tbody tr:hover td { background: var(--vsc-hover); }
.fv-table td.fv-num { text-align: right; font-variant-numeric: tabular-nums; }
.fv-table .fv-missing { background: repeating-linear-gradient(45deg, transparent 0 4px, var(--vsc-hover) 4px 8px); }
.fv-table tr.fv-ragged > .fv-rownum { color: var(--vsc-term-warn); }
.fv-note { padding: .6rem 1rem; color: var(--vsc-fg-dim); }

/* ═══ Slide decks (.deck) in a code window (deck-editor.js): the slide list, the slide (16:9), its fields; ▶ Present.
   The window's colours around the slides; each slide in its deck's theme ═══ */
.py-docs, .py-deck, .py-sheet { position: absolute; inset: 0; background: var(--vsc-bg); }
.py-docs[hidden], .py-deck[hidden], .py-sheet[hidden] { display: none; }
.dk { position: absolute; inset: 0; display: flex; flex-direction: column; color: var(--vsc-fg); font-size: 13px; container-type: inline-size; }
.dk-bar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: 5px 8px; border-bottom: 1px solid var(--vsc-border); background: var(--vsc-bg); }
.dk-btn {
  height: 26px; padding: 0 .7rem; border-radius: 4px; border: 1px solid var(--vsc-btn2-border); background: var(--vsc-btn2);
  color: var(--vsc-fg-strong); cursor: pointer; font: inherit; white-space: nowrap;
}
.dk-btn:hover:not(:disabled) { border-color: var(--vsc-accent); }
.dk .dk-btn--primary, .dk .dk-btn--primary:hover { background: var(--vsc-accent); border-color: var(--vsc-accent); color: #fff; }
.dk-btn--danger:hover:not(:disabled) { color: var(--vsc-term-err); border-color: var(--vsc-term-err); }
.dk-btn:disabled { opacity: .45; cursor: default; }
.dk-btn:focus-visible, .dk-thumb:focus-visible { outline: 1px solid var(--vsc-accent); outline-offset: 1px; }
.dk-add { position: relative; }
.dk-menu {
  position: absolute; top: 100%; left: 0; z-index: 20; min-width: 190px; margin-top: 3px; padding: 4px;
  background: var(--vsc-menu); border: 1px solid var(--vsc-border); border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}
.dk-menu[hidden] { display: none; }
.dk-menu button { display: block; width: 100%; padding: 6px 10px; border: 0; border-radius: 4px; background: none; color: var(--vsc-fg); font: inherit; text-align: left; cursor: pointer; }
.dk-menu button:hover, .dk-menu button:focus-visible { background: var(--vsc-hover); color: var(--vsc-fg-strong); }
.dk-theme { display: inline-flex; align-items: center; gap: .35rem; margin-left: .4rem; color: var(--vsc-fg-dim); }
.dk-theme select, .dk-input { background: var(--vsc-input); color: var(--vsc-fg-strong); border: 1px solid var(--vsc-btn2-border); border-radius: 4px; font: inherit; }
.dk-theme select { height: 26px; padding: 0 .3rem; }
.dk-spacer { flex: 1; }
.dk-main { flex: 1; min-height: 0; display: flex; }
.dk-thumbs { flex: 0 0 172px; margin: 0; padding: 8px; overflow-y: auto; list-style: none; border-right: 1px solid var(--vsc-border); background: var(--vsc-side); }
.dk-thumb { display: flex; align-items: flex-start; gap: 6px; width: 100%; margin-bottom: 6px; padding: 4px; border: 2px solid transparent; border-radius: 6px; background: none; color: var(--vsc-fg-dim); cursor: pointer; }
.dk-thumb:hover { background: var(--vsc-hover); }
.dk-thumb.is-current { border-color: var(--vsc-accent); color: var(--vsc-fg-strong); }
.dk-num { flex: 0 0 1.2rem; font-size: 11px; text-align: right; }
.dk-mini { position: relative; flex: 1; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; box-shadow: 0 0 0 1px var(--vsc-border); pointer-events: none; }
.dk-mini > .dk-slide, .dk-stage > .dk-slide, .dk-present-stage > .dk-slide { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.dk-work { flex: 1; min-width: 0; overflow-y: auto; padding: 14px 18px 30px; }
.dk-stage-wrap { position: relative; width: 100%; max-width: 880px; aspect-ratio: 16 / 9; margin: 0 auto 14px; overflow: hidden; border-radius: 6px; box-shadow: 0 2px 12px rgba(0, 0, 0, .28); }
.dk-stage { position: absolute; inset: 0; }
.dk-form { display: grid; gap: 10px; max-width: 880px; margin: 0 auto; }
.dk-row { display: flex; flex-direction: column; gap: 4px; }
.dk-label { color: var(--vsc-fg-strong); font-size: 12px; font-weight: 600; }
.dk-input { box-sizing: border-box; width: 100%; padding: 6px 8px; }
textarea.dk-input { resize: vertical; line-height: 1.45; }
.dk-input:focus { outline: none; border-color: var(--vsc-accent); }
.dk-input[readonly] { opacity: .8; }
.dk-mono { font-family: Menlo, Consolas, 'Courier New', monospace; font-size: 12.5px; }
.dk-hint { color: var(--vsc-fg-dim); font-size: 11.5px; }
.dk-broken { padding: 2rem; color: var(--vsc-fg); }
.dk-broken[hidden] { display: none; }
.dk.is-broken .dk-main, .dk.is-broken .dk-bar { display: none; }
/* A narrow window (the coach and instructions beside it): a narrower slide list, so the slide has the room */
@container (max-width: 760px) {
  .dk-thumbs { flex-basis: 96px; padding: 6px 4px; }
  .dk-num { display: none; }
  .dk-work { padding: 10px 10px 24px; }
}

/* A slide, on its 960×540 stage */
.dk-slide { box-sizing: border-box; width: 960px; height: 540px; padding: 44px 56px; overflow: hidden; font-family: Calibri, 'Segoe UI', Arial, sans-serif; text-align: left; }
.dk-h { margin: 0 0 22px; font-size: 38px; font-weight: 700; line-height: 1.15; }
.dk-h1 { margin: 0; font-size: 52px; font-weight: 700; line-height: 1.1; }
.dk-sub { margin: 14px 0 0; font-size: 26px; }
.dk-center { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; }
.dk-rule { width: 110px; height: 5px; margin-top: 22px; border-radius: 3px; }
.dk-section { display: flex; align-items: center; gap: 26px; height: 100%; }
.dk-sbar { align-self: stretch; width: 9px; margin: 150px 0; border-radius: 4px; }
.dk-slide ul { margin: 0; padding-left: 30px; }
.dk-body li { margin: 0 0 10px; font-size: 28px; line-height: 1.35; }
.dk-slide li.dk-l1 { margin-left: 34px; font-size: 23px; }
.dk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.dk-cols h3 { margin: 0 0 12px; font-size: 28px; }
.dk-cols li { margin: 0 0 8px; font-size: 24px; line-height: 1.3; }
.dk-table table { width: 100%; border-collapse: collapse; font-size: 22px; }
.dk-table th, .dk-table td { padding: 8px 12px; border-bottom: 1px solid rgba(127, 127, 127, .35); text-align: left; }
.dk-chart { display: flex; flex-direction: column; align-items: center; }
.dk-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 6px; font-size: 17px; }
.dk-legend i { display: inline-block; width: 14px; height: 14px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.dk-quote { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 0 40px; }
.dk-qmark { font-family: Georgia, serif; font-size: 140px; line-height: .6; }
.dk-quote blockquote { margin: 10px 0 0; font-family: Georgia, serif; font-size: 36px; font-style: italic; line-height: 1.35; }
.dk-image { display: flex; align-items: center; justify-content: center; height: 360px; }
.dk-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dk-caption { margin: 10px 0 0; font-size: 20px; text-align: center; }
.dk-ph { font-style: italic; opacity: .45; }
.dk-imgph { padding: 60px 40px; border: 3px dashed currentColor; font-size: 24px; }
.dk-empty { padding: 60px; font-size: 22px; }

/* ▶ Present: full screen, a slide at a time */
.dk-present { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: #000; outline: none; cursor: pointer; }
.dk-present-stage { position: relative; overflow: hidden; }
.dk-present-bar { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; padding: 8px 16px; color: #aaa; font-size: 13px; opacity: 0; transition: opacity .2s; cursor: default; }
.dk-present:hover .dk-present-bar { opacity: 1; }

/* ═══ Spreadsheets (.sheet) in a code window (sheet-editor.js): the grid, the formula bar, the selection's sum.
   The window's colours, as a spreadsheet's ═══ */
.sh { position: absolute; inset: 0; display: flex; flex-direction: column; color: var(--vsc-fg); font-size: 13px; outline: none; --sh-pt: #1f9d55; }
.sh-bar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: 5px 8px; border-bottom: 1px solid var(--vsc-border); }
.sh-btn { height: 26px; padding: 0 .7rem; border-radius: 4px; border: 1px solid var(--vsc-btn2-border); background: var(--vsc-btn2); color: var(--vsc-fg-strong); cursor: pointer; font: inherit; }
.sh-btn:hover { border-color: var(--vsc-accent); }
.sh-fmt { display: inline-flex; align-items: center; gap: .35rem; color: var(--vsc-fg-dim); }
.sh-fmt select { height: 26px; background: var(--vsc-input); color: var(--vsc-fg-strong); border: 1px solid var(--vsc-btn2-border); border-radius: 4px; font: inherit; }
.sh-spacer { flex: 1; }
.sh-stats { color: var(--vsc-fg-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sh-formula { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-bottom: 1px solid var(--vsc-border); }
.sh-name { min-width: 4.5rem; padding: 3px 6px; border: 1px solid var(--vsc-btn2-border); border-radius: 3px; color: var(--vsc-fg-strong); font-family: Menlo, Consolas, monospace; font-size: 12px; text-align: center; }
.sh-fx { color: var(--vsc-fg-dim); font-style: italic; }
.sh-fbox { flex: 1; display: flex; }
.sh-finput { flex: 1; padding: 4px 6px; background: var(--vsc-input); color: var(--vsc-fg-strong); border: 1px solid var(--vsc-btn2-border); border-radius: 3px; font-family: Menlo, Consolas, monospace; font-size: 12.5px; }
.sh-finput:focus { outline: none; border-color: var(--vsc-accent); }
.sh-grid-wrap { flex: 1; min-height: 0; overflow: auto; outline: none; }
.sh-grid { table-layout: fixed; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; user-select: none; }
.sh-grid th, .sh-grid td { height: 24px; padding: 0 6px; border-right: 1px solid var(--vsc-border); border-bottom: 1px solid var(--vsc-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-grid td { color: var(--vsc-fg-strong); cursor: cell; }
/* A column's width: drag its heading's right edge (double-click: fit) */
.sh-resize { position: absolute; top: 0; right: 0; width: 6px; height: 100%; cursor: col-resize; }
.sh-resize:hover { background: var(--vsc-accent); }
.sh.is-resizing, .sh.is-resizing * { cursor: col-resize !important; }
.sh.is-readonly .sh-resize { display: none; }
/* A reference being pointed at while a formula is typed */
.sh-grid td.sh-pt { background: color-mix(in srgb, var(--sh-pt) 10%, transparent); }
.sh-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--vsc-side); color: var(--vsc-fg-dim); font-weight: 400; text-align: center; }
.sh-grid th.sh-row { position: sticky; left: 0; z-index: 1; min-width: 40px; background: var(--vsc-side); color: var(--vsc-fg-dim); font-weight: 400; text-align: center; }
.sh-grid th.sh-corner { position: sticky; top: 0; left: 0; z-index: 3; background: var(--vsc-side); }
.sh-grid th.sh-hl { background: var(--vsc-select); color: var(--vsc-fg-strong); }
.sh-grid td.sh-num { text-align: right; }
.sh-grid td.sh-bool, .sh-grid td.sh-err { text-align: center; }
.sh-grid td.sh-err { color: var(--vsc-term-err); }
.sh-grid td.sh-sel { background: color-mix(in srgb, var(--vsc-accent) 14%, transparent); }
.sh-grid td.sh-cur { box-shadow: inset 0 0 0 2px var(--vsc-accent); }
.sh-grid td.sh-editing { padding: 0; overflow: visible; }
.sh-edit { box-sizing: border-box; width: 100%; height: 23px; padding: 0 5px; border: 2px solid var(--vsc-accent); background: var(--vsc-input); color: var(--vsc-fg-strong); font: inherit; outline: none; }
.sh-broken { padding: 2rem; }
.sh-broken[hidden] { display: none; }
.sh.is-broken .sh-bar, .sh.is-broken .sh-formula, .sh.is-broken .sh-grid-wrap { display: none; }

/* A .sql file's results in the terminal: each query's rows as a table */
.py-term-table { margin: 4px 0 8px; max-width: 100%; overflow-x: auto; font-family: inherit; }
.py-term-table table { border-collapse: collapse; font-size: 12.5px; }
.py-term-table th, .py-term-table td { padding: 2px 10px; border: 1px solid var(--vsc-border); text-align: left; white-space: nowrap; }
.py-term-table th { background: var(--vsc-side); color: var(--vsc-fg-strong); font-weight: 600; }
.py-term-table td { color: var(--vsc-fg); }
.py-term-table td.py-num { text-align: right; font-variant-numeric: tabular-nums; }
.py-term-table td.py-null { color: var(--vsc-fg-dim); font-style: italic; }
.py-term-table-note { margin-top: 2px; color: var(--vsc-term-info); font-size: 12px; }

/* ═══ A stakeholder interview in the conversation: the persona's banner, their answers, the divider ═══ */
.chat-persona { margin: .5rem 0 .75rem; padding: .6rem .85rem; border-radius: 8px; border: 1px solid #f5d0a9; background: #fff7ed; color: #7c2d12; font-size: .88rem; line-height: 1.45; }
.message.assistant.message--persona { border-left: 3px solid #ea580c; }
.phase-divider--interview span { color: #c2410c; }
.stage-add-interview { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 1rem 0; padding: .75rem 1rem; border: 1px dashed var(--color-border, #cbd5e1); border-radius: 8px; font-size: .88rem; }
.stage-add-interview select { width: auto; min-width: 12rem; }
.stage-remove { display: inline; margin-left: auto; }
html.coach-dark .chat-persona, [data-theme="dark"] .chat-persona { background: #3b1d0a; border-color: #7c2d12; color: #fed7aa; }

/* ═══ Peer review: the student's reviews (their classmates' work beside the questions), what classmates said, the link ═══ */
.my-peer { display: inline-block; margin-top: .35rem; font-size: .82rem; font-weight: 600; color: var(--color-primary, #2563eb); text-decoration: none; }
.my-peer:hover { text-decoration: underline; }
.my-peer.is-done { color: #15803d; }
.pr-page { max-width: 1200px; }
.pr-intro { color: var(--color-muted); font-size: .92rem; }
.pr-tabs { display: flex; gap: .35rem; margin: .75rem 0; border-bottom: 1px solid var(--color-border); }
.pr-tab { padding: .45rem .9rem; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; color: var(--color-muted); text-decoration: none; font-weight: 600; }
.pr-tab.is-active { border-color: var(--color-border); background: var(--color-surface, #fff); color: var(--color-text); margin-bottom: -1px; }
.pr-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 860px) { .pr-split { grid-template-columns: 1fr; } }
.pr-work { max-height: 75vh; overflow: auto; }
.pr-piece { margin: 1rem 0 .35rem; font-size: .95rem; color: var(--color-text); }
.pr-text { margin: 0; padding: .6rem .75rem; white-space: pre-wrap; word-break: break-word; font-size: .85rem; background: var(--color-bg, #f8fafc); border: 1px solid var(--color-border); border-radius: 6px; }
.pr-md { font-size: .92rem; line-height: 1.55; }
.pr-question { margin: 0 0 1rem; padding: 0; border: 0; }
.pr-question legend { font-weight: 600; margin-bottom: .35rem; }
.pr-stars { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; font-size: .88rem; }
.pr-stars label { display: inline-flex; align-items: center; gap: .2rem; cursor: pointer; }
.pr-stars-hint { color: var(--color-muted); font-size: .78rem; }
.pr-answer { margin: .5rem 0; }
.pr-q { font-weight: 600; font-size: .88rem; }
.pr-rating { color: #d97706; letter-spacing: .1em; }
.pr-comment { white-space: pre-wrap; font-size: .9rem; }
.pr-received { margin: .6rem 0; padding: .6rem .8rem; border: 1px solid var(--color-border); border-radius: 8px; }
.pr-received-who { font-weight: 700; margin-bottom: .25rem; }
.ae-peer { margin: .5rem 0 0 1.6rem; }
.ar-sub { font-size: .95rem; margin: .8rem 0 .4rem; }

/* ═══ Diagrams (.diagram) in a code window (diagram-editor.js): the bar, the canvas (a white sheet, as a diagram is drawn) ═══ */
.py-diagram { position: absolute; inset: 0; background: var(--vsc-bg); }
.py-diagram[hidden] { display: none; }
.dg { position: absolute; inset: 0; display: flex; flex-direction: column; color: var(--vsc-fg); font-size: 13px; }
.dg-bar { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; padding: 5px 8px; border-bottom: 1px solid var(--vsc-border); }
.dg-btn { height: 26px; padding: 0 .6rem; border-radius: 4px; border: 1px solid var(--vsc-btn2-border); background: var(--vsc-btn2); color: var(--vsc-fg-strong); cursor: pointer; font: inherit; white-space: nowrap; }
.dg-btn:hover { border-color: var(--vsc-accent); }
.dg-btn.is-on { background: var(--vsc-accent); border-color: var(--vsc-accent); color: #fff; }
.dg-btn--danger:hover { color: var(--vsc-term-err); border-color: var(--vsc-term-err); }
.dg-sep { width: 1px; height: 18px; margin: 0 .2rem; background: var(--vsc-border); }
.dg-spacer { flex: 1; }
.dg-colors { display: inline-flex; gap: 3px; }
.dg-color { width: 18px; height: 18px; padding: 0; border: 2px solid; border-radius: 50%; cursor: pointer; }
.dg-zoom { min-width: 3rem; text-align: center; color: var(--vsc-fg-dim); }
.dg-body { flex: 1; min-height: 0; display: flex; }
.dg-canvas { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden; background: #ffffff; outline: none; }
/* The palette: shapes to drag onto the diagram */
.dg-palette { flex: 0 0 auto; width: 172px; overflow-y: auto; padding: 4px 6px 10px; border-right: 1px solid var(--vsc-border); background: var(--vsc-side); }
.dg.is-readonly .dg-palette { display: none; }
.dg-pal-head { display: block; width: 100%; margin: 8px 0 4px; padding: 2px 2px; border: 0; border-radius: 3px; background: none; color: var(--vsc-fg-dim); cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.dg-pal-head::before { content: '▸'; display: inline-block; width: 1em; font-size: 9px; }
.dg-pal-sec.is-open > .dg-pal-head::before { content: '▾'; }
.dg-pal-head:hover { background: var(--vsc-hover); color: var(--vsc-fg-strong); }
.dg-pal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.dg-pal-sec:not(.is-open) > .dg-pal-grid { display: none; }
.dg-pal-line { cursor: pointer; }
.dg-pal-line.is-on { background: var(--vsc-accent); color: #fff; }
.dg-pal-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px 3px; border: 1px solid transparent; border-radius: 4px;
  background: none; color: var(--vsc-fg); cursor: grab; font: inherit; font-size: 10px; line-height: 1.15; text-align: center; overflow-wrap: break-word; hyphens: auto;
}
.dg-pal-item:hover { background: var(--vsc-hover); border-color: var(--vsc-btn2-border); color: var(--vsc-fg-strong); }
.dg-pal-item:active { cursor: grabbing; }
.dg-pal-item:focus-visible { outline: 1px solid var(--vsc-accent); outline-offset: 1px; }
.dg-pal-item svg { width: 48px; height: 32px; padding: 0 2px; border-radius: 3px; background: #ffffff; }
.dg-pal-toggle { display: block; margin: 0 0 0 auto; padding: 0 6px; border: 0; border-radius: 3px; background: none; color: var(--vsc-fg-dim); cursor: pointer; font: inherit; font-size: 14px; line-height: 20px; }
.dg-pal-toggle:hover { background: var(--vsc-hover); color: var(--vsc-fg-strong); }
/* Narrowed: one column of shapes, their names as tooltips, the groups a line apart */
.dg.is-compact .dg-palette { width: 66px; }
.dg.is-compact .dg-pal-grid { grid-template-columns: minmax(0, 1fr); }
.dg.is-compact .dg-pal-item span { display: none; }
.dg.is-compact .dg-pal-head { margin: 8px 0 3px; padding: 2px 0; border-top: 1px solid var(--vsc-border); border-radius: 0; font-size: 0; text-align: center; }
.dg.is-compact .dg-pal-head::before { display: none; }
.dg.is-compact .dg-pal-head::after { content: attr(data-short); font-size: 9.5px; letter-spacing: 0; text-transform: none; }
.dg.is-compact .dg-pal-toggle { margin: 0 auto; }
.dg-svg { position: absolute; inset: 0; width: 100%; height: 100%; cursor: default; user-select: none; }
.dg-svg .dg-node { cursor: move; }
.dg-svg .dg-resize { cursor: nwse-resize; }
.dg-svg .dg-link { cursor: crosshair; }
.dg-svg [data-edge] { cursor: pointer; }
.dg-svg .dg-port { cursor: crosshair; }
.dg-svg .dg-end { cursor: move; }
.dg-btn:disabled, .dg-color:disabled { opacity: .4; cursor: default; }
.dg-btn:disabled:hover { border-color: var(--vsc-btn2-border); }
.dg-btn--end { display: inline-flex; align-items: center; gap: 1px; padding: 0 .35rem; font-size: 10px; }
.dg-btn--end svg { background: #ffffff; border-radius: 2px; }
/* A line's ends: a menu of them */
.dg-menu { position: absolute; z-index: 5; display: grid; gap: 1px; padding: 4px; border: 1px solid var(--vsc-border); border-radius: 6px; background: var(--vsc-side); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.dg-menu button { display: flex; align-items: center; gap: .5rem; padding: 3px 8px 3px 4px; border: 0; border-radius: 4px; background: none; color: var(--vsc-fg); cursor: pointer; font: inherit; font-size: 12px; text-align: left; white-space: nowrap; }
.dg-menu button:hover { background: var(--vsc-hover); }
.dg-menu button.is-on { background: var(--vsc-accent); color: #fff; }
.dg-menu svg { background: #ffffff; border-radius: 3px; }
/* A new diagram: which kind */
.dg-start { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: min(36rem, calc(100% - 2rem)); padding: 1rem 1.1rem .8rem; border: 1px solid #e2e8f0;
  border-radius: 10px; background: #ffffff; box-shadow: 0 8px 28px rgba(15,23,42,.12); color: #0f172a; }
.dg-start[hidden] { display: none; }
.dg-start-q { margin: 0 0 .6rem; font-weight: 600; font-size: 15px; }
.dg-start-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.dg-start-type { display: flex; flex-direction: column; gap: 2px; padding: .55rem .6rem; border: 1px solid #cbd5e1; border-radius: 6px; background: #f8fafc; color: #0f172a; cursor: pointer; font: inherit; font-size: 12px; text-align: left; }
.dg-start-type strong { font-size: 13px; }
.dg-start-type span { color: #64748b; line-height: 1.25; }
.dg-start-type:hover { border-color: #0ea5e9; background: #f0f9ff; }
.dg-start-or { margin: .6rem 0 0; color: #64748b; font-size: 12px; }
.dg-tip { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); margin: 0; padding: 3px 10px; border-radius: 999px; background: #0f172a; color: #fff; font-size: 12px; pointer-events: none; }
.dg-tip[hidden] { display: none; }
.dg-hint { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); max-width: 26rem; margin: 0; color: #64748b; text-align: center; pointer-events: none; }
.dg-text { position: absolute; z-index: 2; box-sizing: border-box; padding: 6px; border: 2px solid #0ea5e9; border-radius: 4px; background: #ffffff; color: #0f172a; font: 14px 'Segoe UI', Arial, sans-serif; text-align: center; resize: none; outline: none; }
.dg-text.is-rows { padding: 3px 6px; font-size: 12.5px; line-height: 20px; text-align: left; }
.dg-broken { padding: 2rem; }
.dg-broken[hidden] { display: none; }
.dg.is-broken .dg-bar, .dg.is-broken .dg-body { display: none; }
.vsc-ficon--diagram { color: #0891b2; }
.vsc-ficon--diagram::before { content: '◇'; font-size: 12px; }

/* (the code window sizes its icons' SVGs to 16px: not a diagram's canvas, nor a slide's chart) */
.vsc .dg .dg-svg { width: 100%; height: 100%; display: block; fill: none; }
.vsc .dg .dg-pal-item svg { width: 48px; height: 32px; display: block; fill: none; }
.vsc .dg .dg-btn--end svg { width: 30px; height: 16px; display: block; fill: none; }
.vsc .dg .dg-menu svg { width: 40px; height: 18px; display: block; fill: none; }
.vsc .dk-slide svg { width: auto; height: auto; display: inline; fill: none; }

/* ═══ New File's menu of kinds, ⬇ Download, data files shown (coach-files.js) ═══ */
.cf-menu { position: absolute; z-index: 40; min-width: 250px; padding: 4px 0; }
.cf-menu .cf-item { display: flex; align-items: center; gap: .55rem; width: 100%; }
.cf-menu .cf-icon { flex: 0 0 16px; }
.cf-menu .cf-label { flex: 1; text-align: left; }
.cf-menu kbd { color: var(--vsc-fg-dim); font-size: 11px; }
.vsc-dl-btn[hidden] { display: none; }
.vsc-ficon--docx { color: #2b579a; }
.vsc-ficon--docx::before { content: 'W'; font-weight: 700; font-size: 11px; }
.vsc-ficon--img { color: #a074c4; }
.vsc-ficon--img::before { content: '▣'; font-size: 12px; }
.vsc-ficon--pdf { color: #e5534b; }
.vsc-ficon--pdf::before { content: 'PDF'; font-size: 7px; font-weight: 700; }
.py-binary.py-binary--fill { justify-content: flex-start; padding: 12px; overflow: auto; }
.py-binary-img { max-width: 100%; max-height: calc(100% - 60px); object-fit: contain; background: #fff; border: 1px solid var(--vsc-border); }
.py-binary-pdf { flex: 1; width: 100%; min-height: 300px; border: 1px solid var(--vsc-border); background: #fff; }
.py-binary-note { margin: .5rem 0 0; font-size: 12px; }

/* A document written in place (file-views.js: a .md or .docx file's Document view) */
.fv-preview.nb-markdown { --nb-font: 15px; line-height: 1.6; }
.fv-preview > * { max-width: 48rem; }
.fv-preview.fv-doc { outline: none; cursor: text; caret-color: var(--vsc-fg-strong); }
.fv-preview.fv-doc:focus-visible { box-shadow: inset 0 0 0 1px var(--vsc-accent); }
.fv-preview.fv-doc:empty::before { content: 'Start writing…'; color: var(--vsc-fg-dim); font-style: italic; }
/* The Grading tab's rubric (a case study's, a project's items graded by hand) */
.ae-hg-cell { padding-top: .25rem; }
.ae-hg-intro { margin: 0 0 .5rem; font-size: .85rem; }
.ae-hg { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .5rem; }
.ae-hg-row { display: grid; grid-template-columns: 1fr auto auto; gap: .35rem .5rem; align-items: center; padding: .55rem; border: 1px solid var(--color-border, #d0d7de); border-radius: 6px; }
.ae-hg-pts { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.ae-hg-points { width: 5.5rem; }
.ae-hg-del { border: 0; background: none; color: inherit; opacity: .6; cursor: pointer; font-size: 1rem; }
.ae-hg-del:hover { opacity: 1; color: #cf222e; }
.ae-hg-criteria { grid-column: 1 / -1; font-size: .875rem; }
.ae-hg-vis { grid-column: 1 / -1; font-size: .85rem; display: flex; align-items: center; gap: .35rem; }
.ae-hg-none { margin: 0; font-size: .875rem; }
.gr-item-criteria { margin: -.15rem 0 .35rem; font-size: .8rem; color: var(--color-text-muted, #59636e); }
.fv-preview.fv-doc table td, .fv-preview.fv-doc table th { min-width: 4rem; }