/* Topics Discovery — Assessment Demo
   Plain CSS, no framework. Neutral slate palette with a single indigo accent. */

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-muted: #f1f3f6;
  --border: #e2e6ec;
  --border-strong: #cdd4de;

  --text: #1c2330;
  --text-soft: #51596a;
  --text-faint: #8b93a3;

  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-soft: #eef0fe;
  --accent-ring: rgba(79, 70, 229, 0.32);

  --ok: #15803d;
  --ok-soft: #e7f6ec;
  --warn: #b45309;
  --err: #b42318;
  --err-soft: #fdecea;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08);
  --radius: 14px;
  --radius-sm: 9px;
  --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

code,
kbd,
pre {
  font-family: var(--mono);
  font-size: 0.86em;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 8px 14px;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
}

/* ---------- Header ---------- */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  /* Allow the brand to shrink (grow:0 shrink:1 basis:auto) so the long title
     ellipsizes instead of overlapping the .header-nav (which is flex:none). */
  flex: 0 1 auto;
  min-width: 0;
}
.brand-mark {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), #7c74f0);
  box-shadow: var(--shadow-sm);
}
/* Client logo is primary; the gradient brand-mark is the graceful fallback and
   is hidden unless the image fails to load (see onerror in index.html). */
.brand-logo {
  flex: none;
  height: 40px;
  width: auto;
  max-width: 220px;
  display: block;
  object-fit: contain;
}
.brand-logo ~ .brand-mark {
  display: none;
}
.brand-text {
  min-width: 0;
  overflow: hidden;
}
.brand-text h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  display: block;
  white-space: nowrap;
  /* Ellipsize rather than overflow into the header nav (the brand can shrink
     because .brand and .brand-text are min-width:0 and .brand is flex:0 1 auto,
     while .header-nav is flex:none). */
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-sep {
  color: var(--text-faint);
  font-weight: 400;
}
.subtitle {
  margin: 1px 0 0;
  font-size: 12.5px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
/* Connection pill: show the (short) active session name and never overflow the
   header — cap the width and ellipsize a long name. The base .pill is an
   inline-flex with a leading status dot (::before) + gap; switching to
   inline-block to allow text-overflow:ellipsis drops that gap, so restore the
   dot's trailing space explicitly and keep it from being clipped. */
#connection-pill {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
#connection-pill::before {
  display: inline-block;
  vertical-align: middle;
  margin-right: 7px;
}

/* ---------- Workspace switcher (header) ---------- */

/* The active session reads as a calm "workspace" control in the header: a tidy
   trigger button showing the session name + a compact count summary, which
   opens a clean popover listing every session with Switch / New / Delete
   actions and a one-line helper. Replaces the old cramped strip under the
   header. */
.workspace {
  position: relative;
  flex: none;
  min-width: 0;
}
.workspace-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 280px;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 6px 11px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.workspace-trigger:hover {
  background: var(--surface-muted);
  border-color: var(--border-strong);
}
.workspace-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.workspace-trigger[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
/* A small leading glyph (stacked layers) marks this as the workspace control. */
.workspace-trigger .workspace-icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--accent);
}
.workspace-trigger-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.workspace-trigger-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.workspace-trigger-name {
  font-size: 13.5px;
  font-weight: 620;
  letter-spacing: -0.01em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
/* Compact "12 · 30 · 4" count summary shown on the trigger when there is room. */
.workspace-trigger-counts {
  flex: none;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
.workspace-trigger-chev {
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  margin-top: -2px;
}
.workspace-trigger[aria-expanded="true"] .workspace-trigger-chev {
  transform: rotate(-135deg);
  margin-top: 2px;
}

/* ---- Popover ---- */
.workspace-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 40;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Never let a long list push the popover off-screen. */
  max-height: min(70vh, 520px);
}
/* The author `display: flex` above beats the UA `[hidden] { display: none }`
   rule, so the `hidden` attribute alone never collapses the popover. Restore it
   explicitly (belt-and-suspenders, mirroring `.view[hidden]`). */
.workspace-menu[hidden] {
  display: none;
}
.workspace-menu-head {
  padding: 13px 16px 11px;
  border-bottom: 1px solid var(--border);
}
.workspace-menu-title {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.workspace-menu-help {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.45;
}
/* Scrollable list of sessions so a long list never overflows the popover. */
.workspace-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* One session row: a switch button spanning name + counts, plus a trailing
   delete affordance for non-active sessions. */
.workspace-item {
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.workspace-item-switch {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.workspace-item-switch:hover {
  background: var(--surface-muted);
}
.workspace-item-switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.workspace-item.is-active .workspace-item-switch {
  background: var(--accent-soft);
  border-color: #d4d7fb;
  cursor: default;
}
.workspace-item.is-active .workspace-item-switch:hover {
  background: var(--accent-soft);
}
/* Active marker: a filled indigo dot; inactive rows reserve the same width so
   the names line up. */
.workspace-item-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
}
.workspace-item.is-active .workspace-item-dot {
  opacity: 1;
}
.workspace-item-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.workspace-item-name {
  font-size: 13.5px;
  font-weight: 580;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-item.is-active .workspace-item-name {
  font-weight: 650;
  color: var(--accent);
}
.workspace-item-counts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--text-soft);
}
.workspace-item-counts.is-empty {
  color: var(--text-faint);
  font-style: italic;
}
/* Each discrete count inside a row, e.g. "12 topics". The number is emphasised
   so the metric scans at a glance. */
.workspace-count {
  white-space: nowrap;
}
.workspace-count strong {
  color: var(--text);
  font-weight: 680;
}
.workspace-item-active-tag {
  flex: none;
  align-self: center;
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}
/* Trailing delete button on a non-active row (reuses the .icon-btn look). */
.workspace-item-delete {
  flex: none;
  align-self: center;
}
/* Footer holds the "New session" action / inline create form. */
.workspace-foot {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
}
.workspace-new-btn {
  width: 100%;
  justify-content: center;
}
/* Inline "name this session" create form (no raw prompt()). */
.workspace-new-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.workspace-new-form input[type="text"] {
  width: 100%;
  padding: 8px 11px;
  font-size: 13.5px;
}
.workspace-new-form-actions {
  display: flex;
  gap: 8px;
}
.workspace-new-form-actions .btn {
  flex: 1;
  justify-content: center;
}
/* When disabled while switching, dim the whole popover body but keep it legible.
   `aria-busy` is toggled by app.js during an in-flight switch/create/delete. */
.workspace-menu[aria-busy="true"] .workspace-list,
.workspace-menu[aria-busy="true"] .workspace-foot {
  opacity: 0.55;
  pointer-events: none;
}

/* ---------- Layout blocks ---------- */

.layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding-top: 28px;
  padding-bottom: 8px;
}
.content {
  min-width: 0;
}

.intro {
  max-width: 70ch;
  color: var(--text-soft);
  margin: 0 0 22px;
}

/* ---------- Step navigation (left rail) ---------- */

.step-nav {
  position: sticky;
  top: 84px;
  align-self: start;
}
.step-nav-toggle {
  display: none;
  width: 100%;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
}
.step-nav-toggle-chev {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.step-nav-toggle[aria-expanded="true"] .step-nav-toggle-chev {
  transform: rotate(-135deg);
}
.step-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.step-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 13px;
  font-weight: 540;
  color: var(--text-soft);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.step-nav-item:hover {
  background: var(--surface-muted);
  color: var(--text);
}
.step-nav-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.step-nav-item.is-current {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 620;
}
.step-nav-item.is-section {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding-top: 14px;
}
.step-nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Status indicator on each nav item. */
.nav-dot {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: transparent;
  position: relative;
}
.nav-dot::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  opacity: 0.5;
}
.nav-dot.is-running {
  border-color: #d4d7fb;
  background: var(--accent-soft);
}
.nav-dot.is-running::after {
  background: var(--accent);
  opacity: 1;
  animation: pulse 1.1s ease-in-out infinite;
}
.nav-dot.is-done {
  border-color: #c5e7cf;
  background: var(--ok-soft);
}
.nav-dot.is-done::after {
  display: none;
}
.nav-dot.is-done .nav-check {
  display: block;
  width: 11px;
  height: 11px;
  color: var(--ok);
}
.nav-dot .nav-check {
  display: none;
}
.nav-dot.is-error {
  border-color: #f0c3bf;
  background: var(--err-soft);
}
.nav-dot.is-error::after {
  background: var(--err);
  opacity: 1;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

/* ---------- Pills / badges ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 550;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
.pill-muted {
  color: var(--text-faint);
  background: var(--surface-muted);
  border-color: var(--border);
}
.pill-ok {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: #c5e7cf;
}
.pill-err {
  color: var(--err);
  background: var(--err-soft);
  border-color: #f6cfcb;
}
.pill-warn {
  color: var(--warn);
  background: #fdf3e7;
  border-color: #f3dcbd;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  line-height: 1;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--accent-hover);
}
.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover {
  background: var(--surface-muted);
}
.btn-ghost {
  background: transparent;
  color: var(--text-soft);
  border-color: var(--border);
  padding: 8px 12px;
}
.btn-ghost:hover {
  color: var(--text);
  background: var(--surface-muted);
  text-decoration: none;
}
.btn-sm {
  padding: 7px 12px;
  font-size: 13px;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-faint);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.icon-btn:hover {
  color: var(--err);
  border-color: #f0c3bf;
  background: var(--err-soft);
}
.icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.icon-btn svg {
  width: 16px;
  height: 16px;
}

/* ---------- Step cards ---------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  /* Keep the heading clear of the sticky header when scrolled into view. */
  scroll-margin-top: 84px;
}
.step.is-locked {
  opacity: 0.55;
}
.step.is-active {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.step.is-done {
  border-color: #c5e7cf;
}
.step.is-error {
  border-color: #f0c3bf;
}

.step-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
}
.step-num {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13.5px;
  font-weight: 650;
  background: var(--surface-muted);
  color: var(--text-soft);
  border: 1px solid var(--border);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.step.is-active .step-num {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: #d4d7fb;
}
.step.is-done .step-num {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: #c5e7cf;
}
.step.is-error .step-num {
  background: var(--err-soft);
  color: var(--err);
  border-color: #f0c3bf;
}
.step-num .check {
  display: none;
}
.step.is-done .step-num .check {
  display: block;
  width: 15px;
  height: 15px;
}
.step.is-done .step-num .num-text {
  display: none;
}

.step-heading {
  flex: 1;
  min-width: 0;
}
.step-title {
  margin: 0;
  font-size: 16px;
  font-weight: 620;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.step-desc {
  margin: 3px 0 0;
  font-size: 13.5px;
  color: var(--text-soft);
}
.step-badge {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 6px;
  color: var(--text-faint);
  background: var(--surface-muted);
  border: 1px solid var(--border);
}
.step-badge.is-done {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: #c5e7cf;
}
.step-badge.is-running {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: #d4d7fb;
}
.step-badge.is-error {
  color: var(--err);
  background: var(--err-soft);
  border-color: #f0c3bf;
}

.step-body {
  padding: 0 20px 20px;
  border-top: 1px solid var(--border);
  margin-top: 0;
  padding-top: 18px;
}
.step.is-locked .step-body {
  pointer-events: none;
}

/* ---------- Forms ---------- */

.field {
  margin-bottom: 14px;
}
.field:last-child {
  margin-bottom: 0;
}
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 18px;
}
label.field-label {
  display: block;
  font-size: 13px;
  font-weight: 560;
  margin-bottom: 5px;
  color: var(--text);
}
.field-required {
  color: var(--err);
  margin-left: 2px;
}
.field-help {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.45;
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="file"],
select,
textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea {
  resize: vertical;
  min-height: 72px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
input[type="file"] {
  padding: 7px 11px;
}
input::placeholder {
  color: var(--text-faint);
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.checkbox input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--accent);
  flex: none;
}
.checkbox .checkbox-text {
  font-size: 13.5px;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* ---------- Inline state / messages ---------- */

.state-line {
  font-size: 13px;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.state-line strong {
  color: var(--text);
  font-weight: 600;
}
.inline-msg {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  border: 1px solid transparent;
  display: none;
  /* Long file paths in status lines (e.g. "Loaded from …") must wrap rather
     than overflow the card. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.inline-msg.show {
  display: block;
}
.inline-msg.ok {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: #c5e7cf;
}
.inline-msg.err {
  color: var(--err);
  background: var(--err-soft);
  border-color: #f0c3bf;
}
.inline-msg.info {
  color: var(--text-soft);
  background: var(--surface-muted);
  border-color: var(--border);
}

.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  margin-top: 12px;
  font-size: 13px;
}
.kv dt {
  color: var(--text-faint);
}
.kv dd {
  margin: 0;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12.5px;
  word-break: break-word;
}

/* ---------- Progress ---------- */

.progress-wrap {
  margin-top: 16px;
  display: none;
}
.progress-wrap.show {
  display: block;
}
.progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.progress-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #7c74f0);
  transition: width 0.4s ease;
}
.progress-bar.indeterminate {
  width: 35% !important;
  animation: slide 1.3s ease-in-out infinite;
}
.progress-bar.is-done {
  background: linear-gradient(90deg, var(--ok), #2ea35a);
}
.progress-bar.is-error {
  background: var(--err);
}
@keyframes slide {
  0% {
    margin-left: -35%;
  }
  100% {
    margin-left: 100%;
  }
}

/* ---------- Disclosure (log + api ref) ---------- */

.disclosure {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.disclosure > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 13px;
  font-size: 13px;
  font-weight: 550;
  color: var(--text-soft);
  background: var(--surface-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.disclosure > summary::-webkit-details-marker {
  display: none;
}
.disclosure > summary:hover {
  color: var(--text);
}
.disclosure > summary .chev {
  width: 14px;
  height: 14px;
  transition: transform 0.18s ease;
  color: var(--text-faint);
}
.disclosure[open] > summary .chev {
  transform: rotate(90deg);
}
.disclosure > summary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent-ring);
}
.disclosure-body {
  padding: 13px;
  border-top: 1px solid var(--border);
}

/* "Advanced options" disclosure inside a step's parameter form. Reuses the
   shared .disclosure styling; this just spaces it from the inline fields above
   and keeps a comfortable gap between the advanced grid and any stacked
   (textarea) fields that follow it inside the body. */
.disclosure.params-advanced {
  margin-top: 16px;
}
.disclosure.params-advanced .disclosure-body > .field-grid + div {
  margin-top: 14px;
}

.log-pane {
  margin: 0;
  max-height: 240px;
  overflow: auto;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: #d7dbe4;
  background: #1b2130;
  border-radius: 8px;
  padding: 12px 14px;
  white-space: pre-wrap;
  word-break: break-word;
}
.log-pane:empty::before {
  content: "Waiting for output…";
  color: #6b7488;
}

/* ---------- API reference block ---------- */

.api-ref {
  font-size: 13px;
}
/* Label preceding each request in a multi-request API reference disclosure. */
.api-ref .api-ref-label {
  margin: 12px 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}
.api-ref .api-ref-label:first-child {
  margin-top: 0;
}
.api-ref .api-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.method-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 3px 7px;
  border-radius: 6px;
  color: #fff;
  background: var(--accent);
}
.method-tag.get {
  background: #0e7490;
}
.method-tag.post {
  background: var(--accent);
}
.method-tag.delete {
  background: var(--err);
}
.api-path {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text);
  word-break: break-all;
}
.code-block {
  position: relative;
  margin: 8px 0 0;
}
.code-block pre {
  margin: 0;
  background: #1b2130;
  color: #d7dbe4;
  border-radius: 8px;
  padding: 12px 14px;
  overflow: auto;
  font-size: 12px;
  line-height: 1.5;
}
.code-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin: 12px 0 5px;
}
.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 550;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #d7dbe4;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.copy-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}
.copy-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ---------- Results ---------- */

.results {
  margin: 44px 0 24px;
  scroll-margin-top: 84px;
}
.results:focus {
  outline: none;
}

/* ---------- Configuration panel ---------- */

.config-section {
  margin: 44px 0 24px;
  scroll-margin-top: 84px;
}
.config-section:focus {
  outline: none;
}
.config-host {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.config-editor {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 360px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  tab-size: 2;
  resize: vertical;
}
.config-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.config-note {
  font-size: 12.5px;
  color: var(--text-faint);
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.results-head {
  margin-bottom: 18px;
  padding-bottom: 2px;
}
.results-head h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 680;
  letter-spacing: -0.015em;
}
.results-sub {
  margin: 5px 0 0;
  color: var(--text-soft);
  font-size: 14px;
  max-width: 70ch;
}
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
  overflow-x: auto;
  /* Hide the scrollbar but keep horizontal scroll on narrow screens. */
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tab {
  font: inherit;
  font-size: 14px;
  font-weight: 560;
  color: var(--text-soft);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 11px 15px;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.tab:hover {
  color: var(--text);
  background: var(--surface-muted);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 640;
}
.tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
  border-radius: 6px 6px 0 0;
}

.panel {
  display: none;
}
.panel.is-active {
  display: block;
}
.panel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
/* "Showing N of M" counter — the leading number is emphasised so the at-a-
   glance count is legible; a loading/placeholder state reads as muted. */
.panel-count {
  font-size: 13px;
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
}
.panel-count strong {
  color: var(--text);
  font-weight: 680;
}
.panel-count.is-loading {
  color: var(--text-faint);
}
/* Small inline spinner used in the count line while a tab is (re)loading. */
.panel-count .spinner {
  width: 13px;
  height: 13px;
  border-color: var(--border-strong);
  border-top-color: var(--accent);
}

/* ---------- Results search (above each result list) ---------- */

.result-search {
  position: relative;
  margin-bottom: 10px;
}
.result-search input[type="search"],
.result-search input[type="text"] {
  width: 100%;
  padding-right: 34px;
}
.result-search .search-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.result-search .search-clear:hover {
  color: var(--text);
  background: var(--surface-muted);
}
.result-search.has-value .search-clear {
  display: inline-flex;
}

/* Active-filter chips row (search / document / cross-link) + Clear all. */
.filter-chips {
  display: none;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.filter-chips.show {
  display: flex;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 550;
  padding: 3px 4px 3px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid #d4d7fb;
  color: var(--accent);
  max-width: 100%;
}
.filter-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.filter-chip-remove {
  flex: none;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.filter-chip-remove:hover {
  background: #fff;
}
.filter-chip-remove:focus-visible,
.result-search .search-clear:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.filter-chips-clear {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 3px 11px;
  cursor: pointer;
}
.filter-chips-clear:hover {
  color: var(--text);
  background: var(--surface-muted);
}
.filter-chips-clear:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ---------- Document filter (above Topics / MCQs / Cases) ---------- */

.doc-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
/* Per-document delete affordance in the Documents tab. */
.doc-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.btn-danger {
  background: var(--surface);
  color: var(--err);
  border-color: #f0c3bf;
}
.btn-danger:hover {
  background: var(--err-soft);
}
.doc-filter label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}
.doc-filter select {
  width: auto;
  max-width: 100%;
  min-width: 220px;
  flex: 1 1 240px;
}

/* Clickable cross-link chips (View MCQs / linked topic / Case #N). Built on the
   existing .chip look but interactive. */
.chip-link {
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  font-weight: 560;
  line-height: 1.5;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid #d4d7fb;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.chip-link:hover {
  background: #fff;
  text-decoration: none;
}
.chip-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* MCQ source badge — clearly distinguishes Topic MCQs from Case MCQs. */
.mcq-source-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.mcq-source-badge.is-topic {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: #d4d7fb;
}
.mcq-source-badge.is-case {
  color: var(--warn);
  background: #fdf4e7;
  border-color: #f3dcb5;
}

/* Inline MCQs rendered under a case card (lazy-loaded on expand). */
.case-mcqs {
  margin: 0;
}
.case-mcq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 12px 14px;
  margin-top: 10px;
}
.case-mcq-item:first-child {
  margin-top: 0;
}

.cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.result-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.result-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.result-main {
  min-width: 0;
  flex: 1;
}
.result-title {
  font-size: 14.5px;
  font-weight: 640;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--text);
  line-height: 1.4;
}
.result-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 10px;
}
.chip {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 560;
  line-height: 1.5;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--text-soft);
  white-space: nowrap;
}
.chip.chip-accent {
  background: var(--accent-soft);
  border-color: #d4d7fb;
  color: var(--accent);
}
/* Monospace id badge (e.g. the topic id on a topic card). */
.chip.chip-id {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.01em;
}

/* ---------- Chips field (item-per-item list input) ----------
   Long learning outcomes used to be truncated to a 30-char pill with an
   ellipsis. Stacked the items vertically and let each row wrap to full
   width so an LO like "Critically evaluate the normal structure and
   function of the skin, adnexa..." stays fully visible. The list is
   wrapped in a <details> that starts collapsed once it has items, so a
   32-LO syllabus doesn't dominate the form. */
.chips-field-details {
  margin-bottom: 8px;
}
.chips-field-details[hidden] {
  display: none;
}
.chips-field-list-summary {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  user-select: none;
}
.chips-field-list-summary::-webkit-details-marker {
  display: none;
}
.chips-field-list-summary:hover {
  color: var(--text);
}
.chips-field-details[open] .chips-field-list-summary svg {
  transform: rotate(90deg);
}
.chips-field-list-summary svg {
  transition: transform 0.15s ease;
}
.chips-field-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 0;
}
.chips-field-empty {
  font-size: 12.5px;
  color: var(--text-faint);
}
.chips-field-chip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
  padding: 8px 10px 8px 12px;
  border-radius: 8px;
  background: var(--accent-soft);
  border: 1px solid #d4d7fb;
  color: var(--text);
  width: 100%;
}
.chips-field-chip-text {
  flex: 1 1 auto;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.chips-field-remove {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.chips-field-remove:hover {
  background: rgba(79, 70, 229, 0.14);
}
.chips-field-entry {
  display: flex;
  gap: 8px;
  align-items: center;
}
.chips-field-input {
  flex: 1 1 auto;
  min-width: 0;
}
.chips-field-add {
  flex: none;
}
.chip.chip-ok {
  background: var(--ok-soft);
  border-color: #c5e7cf;
  color: var(--ok);
}
.chip.chip-warn {
  background: #fdf4e7;
  border-color: #f3dcb5;
  color: var(--warn);
}
.result-snippet {
  font-size: 13px;
  color: var(--text-soft);
  margin: 0;
}

/* ---------- Rich result cards (expandable) ---------- */

.result-card.is-rich {
  flex-direction: column;
  align-items: stretch;
}
.result-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.result-referenced {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--border-strong);
  background: var(--surface-muted);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px;
  color: var(--text-soft);
}
.result-referenced .ref-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: 3px;
}
/* Case body "Show more / Show less" toggle (item 5b) — reveals the full
   vignette inline; sits just beneath the (preview or full) case text. */
.case-body .case-body-toggle {
  margin-top: 6px;
}

/* Question + options */
.mcq-stem {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--text);
  line-height: 1.5;
}
.mcq-options {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mcq-option {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.mcq-option.is-correct {
  border-color: #c5e7cf;
  background: var(--ok-soft);
}
.mcq-option-key {
  flex: none;
  font-weight: 700;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-soft);
  width: 1.4em;
}
.mcq-option.is-correct .mcq-option-key {
  color: var(--ok);
}
.mcq-option-text {
  min-width: 0;
}
.mcq-correct-tag {
  margin-left: auto;
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ok);
  align-self: center;
}
/* Open-ended (free-text) case question: the gold-standard model answer block
   shown to curators (the learner sees only the stem + a text box in EOS). */
.open-qna-gold {
  margin: 4px 0 6px;
  padding: 8px 11px;
  border: 1px solid #c5e7cf;
  border-radius: var(--radius-sm);
  background: var(--ok-soft);
}
.open-qna-label {
  margin: 0 0 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ok);
}
/* "View prompt" link on a PRISM step. */
.prompt-link {
  color: var(--accent);
}

.mcq-explanation {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--text-soft);
}
.mcq-explanation strong {
  color: var(--text);
}
.mcq-explanation-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: 3px;
}

/* Source passage / markdown disclosure body */
.passage-pane {
  margin: 0;
  max-height: 320px;
  overflow: auto;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.passage-pane.is-loading {
  color: var(--text-faint);
}

/* Case / assessment key-value rendering */
.kv-block {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 5px 16px;
  margin: 10px 0 0;
  font-size: 13px;
}
.kv-block dt {
  color: var(--text-faint);
  font-weight: 550;
}
.kv-block dd {
  margin: 0;
  color: var(--text);
  word-break: break-word;
}

/* Muted chunk-id line under a topic card */
.result-chunk-id {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--text-faint);
  font-family: var(--mono);
  word-break: break-all;
}

/* ---------- Per-topic actions (Generate MCQ / clinical case) ---------- */

.topic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.topic-run {
  margin-top: 10px;
  display: none;
}
.topic-run.show {
  display: block;
}
.topic-run-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.topic-run-label {
  flex: 1;
  min-width: 0;
}
.topic-run-label.is-ok {
  color: var(--ok);
}
.topic-run-label.is-err {
  color: var(--err);
}
.topic-run .progress-track {
  height: 6px;
}
.topic-run-actions {
  margin-top: 8px;
}

/* ---------- Rendered markdown ---------- */

.markdown-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  word-break: break-word;
}
.markdown-body > :first-child {
  margin-top: 0;
}
.markdown-body > :last-child {
  margin-bottom: 0;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
  margin: 16px 0 8px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.markdown-body h1 {
  font-size: 17px;
}
.markdown-body h2 {
  font-size: 15.5px;
}
.markdown-body h3 {
  font-size: 14px;
}
.markdown-body p {
  margin: 8px 0;
}
.markdown-body ul,
.markdown-body ol {
  margin: 8px 0;
  padding-left: 22px;
}
.markdown-body li {
  margin: 3px 0;
}
.markdown-body code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
}
.markdown-body pre {
  margin: 10px 0;
  background: #1b2130;
  color: #d7dbe4;
  border-radius: 8px;
  padding: 12px 14px;
  overflow: auto;
}
.markdown-body pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: inherit;
}
.markdown-body strong {
  font-weight: 650;
  color: var(--text);
}

.empty-state {
  text-align: center;
  padding: 40px 24px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-faint);
  font-size: 14px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.empty-state-title {
  margin: 0;
  font-size: 15px;
  font-weight: 620;
  color: var(--text-soft);
  letter-spacing: -0.01em;
}
.empty-state-hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-faint);
  max-width: 46ch;
  line-height: 1.5;
}

/* ---------- Toasts ---------- */

.toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(360px, calc(100vw - 40px));
}
.toast {
  background: var(--text);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 12px 15px;
  font-size: 13.5px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: toast-in 0.2s ease;
}
.toast.toast-err {
  background: #7f1d1d;
}
.toast.toast-ok {
  background: #14532d;
}
.toast-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 5px;
  background: currentColor;
  opacity: 0.85;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 40px;
  padding: 22px 0 40px;
  color: var(--text-faint);
  font-size: 13px;
}
.site-footer .container {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.site-footer .dot {
  color: var(--border-strong);
}

/* ---------- Utilities ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex: none;
}
.btn-secondary .spinner,
.btn-ghost .spinner {
  border-color: var(--border-strong);
  border-top-color: var(--accent);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Curation: card actions, edit forms, status badges ---------- */

/* A status badge pinned to the top-right of a card (case review state). Mirrors
   the chip palette but reads as a standalone status, like the step badges. */
.status-badge {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--text-faint);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.status-badge.is-ok {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: #c5e7cf;
}
.status-badge.is-warn {
  color: var(--warn);
  background: #fdf4e7;
  border-color: #f3dcb5;
}
.status-badge.is-err {
  color: var(--err);
  background: var(--err-soft);
  border-color: #f0c3bf;
}

/* The cluster of status badge + delete button at a rich card's top-right. */
.result-card-aside {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* Row of curation actions (Approve / Reject / Edit / Download) under a card. */
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
/* "Add to exam" action (item 5): a button plus an inline picker that drops below
   it. The wrapper takes the full row when the picker opens so the select + Add
   button sit on their own line rather than crowding the action buttons. */
.add-exam {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.add-exam:has(.add-exam-picker:not([hidden])) {
  flex-basis: 100%;
}
.add-exam-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.add-exam-picker[hidden] {
  display: none;
}
.add-exam-picker select {
  min-width: 200px;
  max-width: 100%;
}
.btn-ok {
  background: var(--surface);
  color: var(--ok);
  border-color: #c5e7cf;
}
.btn-ok:hover {
  background: var(--ok-soft);
}

/* Inline expandable edit form inside a card. Sits in its own bordered well so it
   reads as a distinct "editing" surface, not part of the rendered content. */
.card-edit {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
.card-edit .field:last-of-type {
  margin-bottom: 0;
}
.card-edit textarea {
  background: var(--surface);
}
.card-edit .form-actions {
  margin-top: 14px;
}
/* The 4 MCQ option rows in the edit form: a fixed label cell + a flexible
   text input so they line up like the rendered options. */
.option-edit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.option-edit-row .option-edit-label {
  flex: none;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--text-soft);
  width: 1.6em;
  text-align: center;
}
.option-edit-row input[type="text"] {
  flex: 1;
  min-width: 0;
}

/* Reviewer notes shown on an approved/rejected case card. */
.review-notes {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-left: 3px solid var(--border-strong);
  background: var(--surface-muted);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px;
  color: var(--text-soft);
}
.review-notes .ref-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: 3px;
}

/* Case validation issues — surfaces WHY a case is auto_invalid / rejected. */
.case-issues {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-left: 3px solid var(--danger, #c0392b);
  background: var(--surface-muted);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px;
  color: var(--text-soft);
}
.case-issues .ref-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.issue-list {
  margin: 0;
  padding-left: 18px;
}
.issue-list li {
  margin: 2px 0;
}

/* Compact inline run progress used by the assessment "Revalidate" action — a
   slimmer sibling of .topic-run, scoped to a single card's action row. */
.card-run {
  margin-top: 10px;
  display: none;
}
.card-run.show {
  display: block;
}
.card-run-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.card-run-label {
  flex: 1;
  min-width: 0;
}
.card-run-label.is-ok {
  color: var(--ok);
}
.card-run-label.is-err {
  color: var(--err);
}
.card-run .progress-track {
  height: 6px;
}
/* Live-log disclosure inside an EOS run action (item 6, PRISM parity). */
.card-run-log {
  margin-top: 10px;
}

/* ---------- Runs view ---------- */

.run-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.run-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.run-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.run-card-title {
  font-size: 14px;
  font-weight: 620;
  letter-spacing: -0.01em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.run-card-id {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-faint);
}
.run-card-time {
  font-size: 12px;
  color: var(--text-faint);
  white-space: nowrap;
}
.run-card .disclosure {
  margin-top: 10px;
}

/* ---------- Chunks view ---------- */

.chunk-preview {
  font-size: 13px;
  color: var(--text-soft);
  margin: 8px 0 0;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.chunk-full {
  margin: 0;
  max-height: 320px;
  overflow: auto;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .step-nav {
    position: static;
    top: auto;
  }
  .step-nav-toggle {
    display: flex;
  }
  .step-nav-list {
    display: none;
    margin-top: 8px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }
  .step-nav.is-open .step-nav-list {
    display: flex;
  }
}

@media (max-width: 720px) {
  .header-inner {
    flex-wrap: wrap;
  }
  /* The header wraps on small screens; let the workspace control + pill share
     the second row and anchor the popover to the row's right edge so it stays
     within the viewport (its width is already capped to the viewport). */
  .header-nav {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .workspace {
    /* Take the lead position on its row so the popover has room to drop. */
    order: -1;
  }
  .workspace-trigger {
    max-width: 100%;
  }
  .subtitle {
    white-space: normal;
  }
  .brand-text h1 {
    white-space: normal;
  }
  .field-grid {
    grid-template-columns: 1fr;
  }
  .result-card {
    flex-direction: column;
  }
  .result-card-top {
    flex-direction: column;
  }
}

/* On very narrow screens, let the popover span the header width instead of a
   fixed 340px so it never overflows or sits awkwardly off to one side. */
@media (max-width: 460px) {
  .workspace {
    flex: 1 1 100%;
  }
  .workspace-trigger {
    width: 100%;
  }
  .workspace-menu {
    width: 100%;
    left: 0;
    right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Assess & Grade (EOS) ---------- */

/* Section spacing mirrors .results / .config-section so it sits between them. */
.assess-section {
  margin: 44px 0 24px;
  scroll-margin-top: 84px;
}
.assess-section:focus {
  outline: none;
}

/* The three stacked cards. A .card is a plain bordered surface (the layout
   primitive the rest of the panel composes inside). */
.assess-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.assess-card {
  padding: 18px 20px;
}
.assess-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 660;
  letter-spacing: -0.01em;
  color: var(--text);
}
.assess-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.assess-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Create card: selectable answer question list. */
.assess-questions {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.assess-questions-count {
  margin: 0;
  font-size: 13px;
  color: var(--text-soft);
}
.assess-questions-count strong {
  color: var(--text);
  font-weight: 640;
}
.assess-q-card {
  padding: 14px 16px;
}
.assess-q-head {
  margin-bottom: 4px;
}
.assess-q-num {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-faint);
}
.assess-q-stem {
  margin-bottom: 10px;
}
/* Selectable option rows: reuse the .mcq-option look but make them clickable
   (the whole row is a <label>), with the native radio tucked in front. */
.assess-options {
  margin-bottom: 0;
}
.assess-option {
  cursor: pointer;
  align-items: center;
}
.assess-option:hover {
  border-color: var(--border-strong);
  background: var(--surface-muted);
}
.assess-option-input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
  flex: none;
}
.assess-option.is-selected {
  border-color: #d4d7fb;
  background: var(--accent-soft);
}
.assess-option.is-selected .mcq-option-key {
  color: var(--accent);
}
.assess-text-answer {
  margin-top: 2px;
}

/* Submissions list + per-submission detail. */
.assess-time {
  font-size: 12px;
  color: var(--text-faint);
}
.assess-detail {
  margin-top: 4px;
}
.assess-detail:not(:empty) {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.assess-detail-block {
  margin-bottom: 14px;
}
.assess-grades {
  margin-bottom: 14px;
}
.assess-grade-card {
  padding: 14px 16px;
}
.assess-grade-kv {
  margin-top: 10px;
}
.assess-grader {
  text-transform: none;
}
.assess-rationale {
  margin-top: 10px;
}
.assess-misconception {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text-soft);
}
.assess-misconception-label {
  font-weight: 640;
  color: var(--warn);
}
.assess-human-notes {
  margin-top: 8px;
}

/* Override row: a compact editing well (reuses .card-edit). */
.assess-override .field {
  margin-bottom: 0;
}
.assess-override-score {
  max-width: 160px;
}

/* Feedback block + rendered report. */
.assess-feedback-block {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.assess-feedback-report:not(:empty) {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
.assess-report-h {
  margin: 14px 0 6px;
  font-size: 13.5px;
  font-weight: 640;
  color: var(--text);
}
.assess-report-list {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--text-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Cohort insights. */
.assess-cohort {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.assess-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 6px;
}
.assess-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
.assess-kpi-value {
  font-size: 20px;
  font-weight: 680;
  letter-spacing: -0.01em;
  color: var(--text);
}
.assess-kpi-label {
  font-size: 12px;
  color: var(--text-faint);
}
.assess-section-heading {
  margin: 16px 0 6px;
  font-size: 13.5px;
  font-weight: 640;
  color: var(--text);
}
.assess-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.assess-table th,
.assess-table td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.assess-table th {
  font-size: 11.5px;
  font-weight: 640;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-faint);
}
.assess-table td:nth-child(2),
.assess-table td:nth-child(3) {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.assess-table tr:last-child td {
  border-bottom: none;
}
/* Expandable "Hardest questions" cell: a click-to-reveal full-text toggle. */
.assess-q-cell {
  max-width: 0;
  width: 60%;
}
.assess-q-toggle {
  display: flex;
  align-items: baseline;
  gap: 7px;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.assess-q-toggle:hover .assess-q-text {
  color: var(--accent);
}
.assess-q-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-ring);
  border-radius: var(--radius-sm);
}
.assess-q-caret {
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 4px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
}
.assess-q-toggle.is-open .assess-q-caret {
  transform: rotate(45deg);
}
.assess-q-text {
  line-height: 1.5;
  word-break: break-word;
}

/* Expandable detail row beneath a "Hardest questions" row: a full-width cell
   holding the question detail (stem + options + explanation). */
.assess-q-detail-row > .assess-q-detail-cell {
  padding: 2px 12px 12px 30px;
}

/* Full-question REVIEW block, shared by the hardest-questions expander and the
   grading review: stem + lettered options (correct marked, learner pick
   highlighted) + an explanation disclosure. Stems are stem-only, so the options
   are what make a question meaningful. */
.question-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.question-detail-stem {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.45;
}
.question-detail-options {
  margin: 0;
}
.question-detail-meta {
  margin: 0;
  font-size: 12px;
  color: var(--text-faint);
}
.question-detail-explain {
  margin-top: 2px;
}
.question-detail-explain-text {
  margin: 0;
  font-size: 13px;
  color: var(--text-soft);
  white-space: pre-wrap;
}

/* The learner's chosen option in a review context. */
.mcq-option.is-picked {
  box-shadow: inset 0 0 0 2px var(--accent-ring);
}
.mcq-option.is-wrong-pick {
  border-color: #f1c4bf;
  background: var(--err-soft);
}
.mcq-option.is-wrong-pick .mcq-option-key {
  color: var(--err);
}
.mcq-pick-tag {
  margin-left: auto;
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  align-self: center;
}
.mcq-option.is-wrong-pick .mcq-pick-tag {
  color: var(--err);
}
.mcq-option.is-correct.is-picked .mcq-pick-tag {
  color: var(--ok);
}

/* The actual question shown atop each grade card in the review. */
.assess-grade-question {
  margin-bottom: 6px;
}

.muted {
  color: var(--text-faint);
  font-size: 13px;
}
.assess-count {
  color: var(--text-faint);
}
.assess-avh {
  margin-top: 6px;
}

@media (max-width: 720px) {
  .assess-card-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- App views + Home landing ---------- */

/* One document, three client-side views toggled by `hidden` (no reload). The
   attribute selector is belt-and-suspenders alongside the `hidden` property. */
.view[hidden] {
  display: none;
}
.view {
  padding-top: 28px;
  padding-bottom: 8px;
}

/* Home is a vertical stack of cards with comfortable spacing. */
#home-host {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 8px;
}

/* Hero: matches the app's heading scale (see .results-head h2). */
.home-hero {
  max-width: 70ch;
}
.home-hero-title {
  margin: 0;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
}
.home-hero-lede {
  margin: 7px 0 0;
  font-size: 15px;
  color: var(--text-soft);
}

/* Shared card chrome for the Home cards (Connect / Session / modules). */
.home-card {
  padding: 18px 20px;
}
.home-card-head {
  margin-bottom: 14px;
}
.home-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 660;
  letter-spacing: -0.01em;
  color: var(--text);
}
.home-card-sub {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--text-soft);
}
.home-card-prompt {
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--text-soft);
}
.home-muted-note {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-faint);
}

/* The session list reuses .workspace-list / .workspace-item; just cap its
   height so a long list scrolls rather than pushing the modules down. */
.home-session-list {
  max-height: 260px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

/* Inline "New session" create form in the Home session card. */
.home-new-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.home-new-form input[type="text"] {
  flex: 1;
  min-width: 180px;
}
.home-new-form-actions {
  display: flex;
  gap: 8px;
}

/* Two module cards side by side, collapsing to one column on small screens. */
.home-modules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.home-module {
  display: flex;
  flex-direction: column;
}
.home-module-head {
  margin-bottom: 10px;
}
.home-module-title {
  margin: 0;
  font-size: 17px;
  font-weight: 680;
  letter-spacing: -0.01em;
  color: var(--text);
}
.home-module-sub {
  margin: 3px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}
.home-module-body {
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.5;
  flex: 1;
}
.home-module-foot {
  display: flex;
}
.home-module-enter {
  width: 100%;
  justify-content: center;
}
.home-module-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-faint);
}

@media (max-width: 720px) {
  .home-modules {
    grid-template-columns: 1fr;
  }
}

/* ---------- Exams ---------- */

.exam-builder {
  margin-bottom: 14px;
}
.exam-builder-card {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.exam-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.exam-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.exam-lo-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
/* Inline exam editor (revealed on Open) */
.exam-editor {
  display: none;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.exam-editor.is-open {
  display: block;
}
.exam-meta {
  margin-bottom: 14px;
}
/* Exam alignment section (item 7): LO coverage pills + matched concepts. */
.exam-alignment {
  margin-top: 14px;
}
.exam-align-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.exam-align-lo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.exam-align-lo-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.exam-align-lo-text {
  font-size: 13px;
  color: var(--text);
  word-break: break-word;
}
.exam-align-concepts {
  margin: 0 0 0 2px;
}
.exam-align-summary {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  padding: 9px 11px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
}
.exam-align-rationale {
  margin: 0 0 0 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-soft);
}
.exam-align-areas {
  margin-top: 4px;
}
.exam-section-label {
  font-size: 12px;
  font-weight: 640;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin: 14px 0 8px;
}
.exam-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.exam-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
.exam-item-pos {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 640;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.exam-item-main {
  flex: 1;
  min-width: 0;
}
.exam-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.exam-item-label {
  margin: 0;
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}
.exam-item-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.exam-add-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.exam-add-group {
  display: flex;
  flex-direction: column;
}
.exam-add-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.exam-add-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.exam-add-id {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-faint);
}
.exam-add-label {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- EOS exam assessment ---------- */

/* A PRISM-style run action well: parameter form + API-reference disclosure,
   set off from the surrounding card like the pipeline step bodies. */
.assess-action {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 8px 0 4px;
}
.assess-run-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* Read-only case vignette block presented before its MCQs in an exam set. */
.assess-case {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
.assess-case-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.assess-case-title {
  font-size: 14px;
  font-weight: 640;
  color: var(--text);
}
.assess-case-vignette {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-soft);
  white-space: pre-wrap;
}
.assess-case-questions {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Feedback options disclosure (custom prompt + API reference). */
.assess-feedback-options {
  margin-top: 12px;
}

/* Coverage analysis block. */
.assess-coverage-block {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.assess-coverage-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.assess-coverage-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 6px;
}
.assess-coverage-area {
  padding: 12px 14px;
}
.assess-coverage-area-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.assess-coverage-area-name {
  font-size: 13.5px;
  font-weight: 640;
  color: var(--text);
}
.assess-coverage-gaps {
  margin-top: 4px;
  flex-wrap: wrap;
}
.assess-coverage-los {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.assess-coverage-lo {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.assess-coverage-lo-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.assess-coverage-lo-name {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.assess-coverage-lo-related {
  margin: 6px 0 0;
}