/* ===== 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; }
.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-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;
  justify-content: space-between;
}
.faculty-portal-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.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-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; }
.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'; }
.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;
  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-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; }
.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; }

.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-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); }
.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-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 ───────────────────── */
.attempt-line { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .15rem 0; font-size: .85rem; }
.attempt-line + .attempt-line { border-top: 1px dashed var(--color-border); padding-top: .35rem; margin-top: .2rem; }
.attempt-line-title { font-weight: 500; }
.attempt-line-progress { font-size: .8rem; }
.attempt-line-link { margin-left: auto; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.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; }