/* CITS WP E-Learning Pro — Instructor portal (E20.1 v5).
 *
 * Matches the user-supplied design mock: hero with gradient + 4 stats,
 * quick-action toolbar, search + filter + sort + view toggle bar,
 * 3-column compact exam-card grid with pass-rate bars + date row +
 * action footer + bottom pagination.
 *
 * Everything is namespaced to `.et-wrap` so theme styles don't bleed in
 * and our styles don't bleed out. CSS variables default to the mock's
 * green palette but resolve from `--cits-wpel-primary-color` (operator's
 * Customizer-driven brand color) when set.
 */

.et-wrap {
  /* Resolve brand color from the Customizer; defaults to the mock's
     green if the operator hasn't customized. color-mix() derives the
     dark + mid + pale variants so we never need 4 manual variables. */
  --et-green:       var(--cits-wpel-primary-color, #3a6b35);
  --et-green-dark:  color-mix(in srgb, var(--et-green) 70%, #000);
  --et-green-mid:   color-mix(in srgb, var(--et-green) 80%, #fff);
  --et-green-light: color-mix(in srgb, var(--et-green) 30%, #fff);
  --et-green-pale:  color-mix(in srgb, var(--et-green) 8%, #fff);

  --et-ink:         #1a1f16;
  --et-body:        #3d4a39;
  --et-muted:       #6b7a66;
  --et-border:      #dde5db;
  --et-surface:     #f7f9f6;
  --et-white:       #ffffff;

  --et-gold:        #b8860b;
  --et-gold-pale:   #fef9ec;
  --et-red:         var(--cits-wpel-danger-color, #b83232);
  --et-red-pale:    color-mix(in srgb, var(--et-red) 8%, #fff);

  --et-radius:      12px;
  --et-radius-sm:   8px;
  --et-radius-lg:   16px;
  --et-shadow:      0 1px 4px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05);
  --et-shadow-md:   0 2px 8px rgba(0,0,0,0.09), 0 8px 28px rgba(0,0,0,0.07);
  --et-shadow-lg:   0 8px 32px rgba(0,0,0,0.12);

  /* System font stack mimicking Inter; falls back gracefully. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  color: var(--et-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* CRITICAL: reset margin/padding on ALL descendants — host theme styles
   (Floreo, Astra, Storefront etc.) inject default margins on h2, h3, p,
   div, dl which double the section gaps. Scoped to `.et-wrap *` so this
   never bleeds into the rest of the WC My Account page. */
.et-wrap *, .et-wrap *::before, .et-wrap *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.et-wrap a { text-decoration: none; color: inherit; }
.et-wrap button { cursor: pointer; font-family: inherit; }
/* E23.1.1 — restore the browser default `[hidden] { display: none }` inside
   our scope. Critical: our component selectors set explicit `display: flex/grid`
   with `.et-wrap`-prefixed specificity, which beats the user-agent rule and
   leaves `[hidden]` elements visible. Without this override the inline
   category-create panel never collapses on Cancel (E23.1 bug). */
.et-wrap [hidden] { display: none !important; }
.et-wrap h1, .et-wrap h2, .et-wrap h3, .et-wrap h4, .et-wrap h5, .et-wrap h6 {
    /* Inherit our explicit class-level sizes; defeats theme h-tag rules. */
    font-weight: inherit;
    color: inherit;
}

.et-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;        /* Was 24 — user feedback "extra spaces between sections". */
  padding: 0;
  /* Negative top margin pulls the hero closer to the page header,
     trimming the empty band between WC's content top padding and our
     first section. Bottom margin still gives the page some breathing
     room above the footer. */
  margin: -12px 0 24px 0;
}
/* Defensive: kill any theme-injected top/bottom margins on our direct
   children. The body universal reset SHOULD do it, but some themes
   target `.woocommerce-MyAccount-content > *` with margin rules that
   beat our `.et-wrap *` reset on specificity. */
.et-wrap > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ── HERO ─────────────────────────────────────────────────────────── */
.et-wrap .et-hero {
  background: linear-gradient(135deg, var(--et-green-dark) 0%, var(--et-green) 60%, var(--et-green-mid) 100%);
  border-radius: var(--et-radius-lg);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--et-shadow-lg);
}
.et-wrap .et-hero::before { content:''; position:absolute; top:-50px; right:-50px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,0.06); pointer-events:none; }
.et-wrap .et-hero::after  { content:''; position:absolute; bottom:-30px; left:25%; width:140px; height:140px; border-radius:50%; background:rgba(255,255,255,0.04); pointer-events:none; }

.et-wrap .et-hero-left { position: relative; min-width: 0; }
.et-wrap .et-hero-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin: 0 0 6px 0;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
}
.et-wrap .et-hero-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin: 0;
}
.et-wrap .et-hero-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin: 6px 0 0 0;
  max-width: 460px;
  line-height: 1.55;
}
.et-wrap .et-hero-sub strong { color: rgba(255,255,255,0.95); font-weight: 600; }

.et-wrap .et-hero-stats { display: flex; gap: 2px; position: relative; flex-shrink: 0; }
.et-wrap .et-hero-stat {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 14px 18px;
  text-align: center;
  min-width: 82px;
  /* Stop the % stat tile (e.g. "55.7%") wrapping awkwardly. */
  white-space: nowrap;
}
.et-wrap .et-hero-stat:first-child { border-radius: var(--et-radius-sm) 0 0 var(--et-radius-sm); }
.et-wrap .et-hero-stat:last-child  { border-radius: 0 var(--et-radius-sm) var(--et-radius-sm) 0; }
.et-wrap .et-hero-stat-val {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  line-height: 1;
}
.et-wrap .et-hero-stat-lbl {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── QUICK ACTIONS ────────────────────────────────────────────────── */
.et-wrap .et-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.et-wrap .et-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: var(--et-radius-sm);
  font-size: 13px;
  font-weight: 600;
  padding: 11px 20px;
  transition: all 0.17s ease;
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.et-wrap .et-btn svg { flex-shrink: 0; }
.et-wrap .et-btn-primary {
  background: var(--et-green);
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--et-green) 28%, transparent);
}
.et-wrap .et-btn-primary:hover {
  background: var(--et-green-mid);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--et-green) 35%, transparent);
  color: #fff;
  text-decoration: none;
}
.et-wrap .et-btn-outline {
  background: var(--et-white);
  color: var(--et-green);
  border: 1.5px solid var(--et-border);
  box-shadow: var(--et-shadow);
}
.et-wrap .et-btn-outline:hover {
  border-color: var(--et-green);
  background: var(--et-green-pale);
  transform: translateY(-1px);
  color: var(--et-green);
  text-decoration: none;
}

/* ── TOOLBAR ──────────────────────────────────────────────────────── */
.et-wrap .et-toolbar {
  display: flex;
  /* Stretch so every child has identical height. Children's content
     centers itself via their own align-items / line-height. */
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
  /* Normalised height for every toolbar control. 38px is comfortable
     and matches the search input's natural height with padding 10px
     top/bottom + 1px border + ~16px line-height. */
  --et-toolbar-h: 38px;
}
.et-wrap .et-toolbar > * { min-height: var(--et-toolbar-h); }
.et-wrap .et-search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}
.et-wrap .et-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--et-muted);
  pointer-events: none;
}
.et-wrap .et-search {
  width: 100%;
  height: 100%;        /* Fill the toolbar's normalised height. */
  border: 1.5px solid var(--et-border);
  border-radius: var(--et-radius-sm);
  padding: 0 14px 0 36px;  /* Padding-y becomes 0 — height + line-height handle vertical centering. */
  font-size: 13px;
  line-height: 1;
  font-family: inherit;
  color: var(--et-ink);
  background: var(--et-white);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: var(--et-shadow);
}
.et-wrap .et-search:focus {
  border-color: var(--et-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--et-green) 18%, transparent);
}
.et-wrap .et-search::placeholder { color: var(--et-muted); }

.et-wrap .et-filter-tabs {
  display: flex;
  background: var(--et-white);
  border: 1.5px solid var(--et-border);
  border-radius: var(--et-radius-sm);
  overflow: hidden;
  box-shadow: var(--et-shadow);
}
.et-wrap .et-filter-tab {
  /* Was 9 14 / 12px — user feedback "extra wider". Tightened. */
  padding: 0 11px;       /* Vertical centering via flex (parent stretches). */
  font-size: 11px;
  font-weight: 600;
  color: var(--et-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.14s;
  white-space: nowrap;
  font-family: inherit;
  /* Make each tab fill the toolbar height. */
  display: inline-flex;
  align-items: center;
}
.et-wrap .et-filter-tab:hover { background: var(--et-surface); color: var(--et-ink); }
.et-wrap .et-filter-tab.active { background: var(--et-green); color: #fff; }

.et-wrap .et-sort-select {
  border: 1.5px solid var(--et-border);
  border-radius: var(--et-radius-sm);
  /* Padding-y 0 → height controlled by min-height inherited from
     `.et-toolbar > *`. Keeps the sort same height as search/tabs. */
  padding: 0 32px 0 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  font-family: inherit;
  color: var(--et-body);
  background: var(--et-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7a66' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance: none;
  cursor: pointer;
  outline: none;
  box-shadow: var(--et-shadow);
  transition: border-color 0.15s;
}
.et-wrap .et-sort-select:focus { border-color: var(--et-green); }

.et-wrap .et-view-toggle {
  display: flex;
  background: var(--et-white);
  border: 1.5px solid var(--et-border);
  border-radius: var(--et-radius-sm);
  overflow: hidden;
  box-shadow: var(--et-shadow);
}
.et-wrap .et-view-btn {
  /* Padding-y 0 — fills toolbar height via parent stretch. */
  padding: 0 11px;
  background: transparent;
  border: none;
  color: var(--et-muted);
  cursor: pointer;
  transition: all 0.14s;
  display: flex;
  align-items: center;
}
.et-wrap .et-view-btn:hover { background: var(--et-surface); color: var(--et-ink); }
.et-wrap .et-view-btn.active { background: var(--et-green); color: #fff; }

/* ── SECTION HEADER ───────────────────────────────────────────────── */
.et-wrap .et-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Was 14px — tighten so it sits closer to the card grid below. */
  margin: 0 0 4px 0;
  /* Force full width so `space-between` actually pushes the count pill
     to the right edge. Without this, some themes constrain section-head
     to its intrinsic content width and the pill ends up in the middle. */
  width: 100%;
}
.et-wrap .et-section-head .et-section-title { flex: 1 1 auto; }
.et-wrap .et-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--et-ink);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.et-wrap .et-section-title::before {
  content: '';
  display: block;
  width: 3px;
  height: 16px;
  background: var(--et-green);
  border-radius: 2px;
  flex-shrink: 0;
}
.et-wrap .et-section-count {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  color: var(--et-muted);
  background: var(--et-surface);
  border: 1px solid var(--et-border);
  border-radius: 100px;
  padding: 3px 10px;
}

/* ── EXAM GRID ────────────────────────────────────────────────────── */
.et-wrap .et-exam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.et-wrap .et-exam-grid.is-list-view {
  grid-template-columns: 1fr;
  gap: 8px;
}

/* ── EXAM CARD ────────────────────────────────────────────────────── */
.et-wrap .et-exam-card {
  background: var(--et-white);
  border: 1px solid var(--et-border);
  border-radius: var(--et-radius-lg);
  box-shadow: var(--et-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.et-wrap .et-exam-card:hover {
  box-shadow: var(--et-shadow-md);
  transform: translateY(-2px);
  border-color: var(--et-green-light);
}

.et-wrap .et-card-body { padding: 18px 18px 14px; flex: 1; }

.et-wrap .et-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px 0;
}
.et-wrap .et-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--et-ink);
  line-height: 1.25;
  margin: 0;
}
.et-wrap .et-card-meta {
  font-size: 11px;
  color: var(--et-muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.et-wrap .et-meta-dot {
  width: 3px;
  height: 3px;
  background: var(--et-border);
  border-radius: 50%;
  flex-shrink: 0;
}

.et-wrap .et-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 100px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.et-wrap .et-status-badge.active {
  background: var(--et-green-pale);
  color: var(--et-green);
  border: 1px solid var(--et-green-light);
}
.et-wrap .et-status-badge.active::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--et-green);
  border-radius: 50%;
  animation: et-pulse 2s infinite;
}
.et-wrap .et-status-badge.draft {
  background: var(--et-gold-pale);
  color: var(--et-gold);
  border: 1px solid #f0e0a0;
}
.et-wrap .et-status-badge.inactive {
  background: #f4f4f4;
  color: #888;
  border: 1px solid #e0e0e0;
}
@keyframes et-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* Mini stats grid */
.et-wrap .et-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--et-border);
  border-radius: var(--et-radius-sm);
  overflow: hidden;
  margin: 0 0 12px 0;
}
.et-wrap .et-mini-stat {
  background: var(--et-surface);
  padding: 10px 8px;
  text-align: center;
}
.et-wrap .et-mini-stat-val {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 16px;
  font-weight: 600;
  color: var(--et-green);
  line-height: 1;
}
.et-wrap .et-mini-stat-lbl {
  font-size: 9px;
  color: var(--et-muted);
  margin-top: 3px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Pass bar */
.et-wrap .et-pass-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 5px 0;
}
.et-wrap .et-pass-bar-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--et-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.et-wrap .et-pass-bar-pct {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--et-green);
}
.et-wrap .et-pass-bar-track {
  height: 5px;
  background: var(--et-border);
  border-radius: 100px;
  overflow: hidden;
}
.et-wrap .et-pass-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--et-green), var(--et-green-mid));
  border-radius: 100px;
  transition: width 0.8s cubic-bezier(.4,0,.2,1);
}
.et-wrap .et-pass-bar-empty {
  font-size: 11px;
  color: var(--et-muted);
  padding: 4px 0;
}

/* Date row */
.et-wrap .et-date-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-top: 1px solid var(--et-border);
  overflow: hidden;
}
.et-wrap .et-date-cell {
  flex: 1;
  background: var(--et-white);
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.et-wrap .et-date-cell:first-child { border-right: 1px solid var(--et-border); }
.et-wrap .et-date-icon { flex-shrink: 0; color: var(--et-muted); }
.et-wrap .et-date-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--et-muted);
  line-height: 1;
  margin-bottom: 3px;
}
.et-wrap .et-date-val {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--et-ink);
  line-height: 1;
}
.et-wrap .et-date-val.no-date { color: var(--et-muted); font-style: italic; font-family: inherit; }
.et-wrap .et-date-val.expired  { color: var(--et-red); }
.et-wrap .et-date-val.expiring { color: var(--et-gold); }

/* Card footer */
.et-wrap .et-card-footer {
  border-top: 1px solid var(--et-border);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--et-surface);
  flex-wrap: wrap;
}
.et-wrap .et-card-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--et-muted);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s;
  font-family: inherit;
  text-decoration: none;
}
.et-wrap .et-card-action:hover {
  border-color: var(--et-border);
  background: var(--et-white);
  color: var(--et-green);
  text-decoration: none;
}
.et-wrap .et-card-action.danger:hover {
  color: var(--et-red);
  background: var(--et-red-pale);
  border-color: color-mix(in srgb, var(--et-red) 30%, var(--et-border));
}
.et-wrap .et-card-spacer { flex: 1; }
.et-wrap .et-card-archive-form { margin: 0; padding: 0; display: inline-flex; }

/* ── LIST VIEW VARIANT ────────────────────────────────────────────── */
.et-wrap .et-exam-grid.is-list-view .et-exam-card { flex-direction: column; border-radius: var(--et-radius-sm); }
.et-wrap .et-exam-grid.is-list-view .et-card-stats { grid-template-columns: repeat(4, 1fr); }

/* ── PAGINATION ───────────────────────────────────────────────────── */
.et-wrap .et-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 8px;
}
.et-wrap .et-pagination:empty { display: none; }
.et-wrap .et-page-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--et-border);
  border-radius: var(--et-radius-sm);
  background: var(--et-white);
  color: var(--et-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  box-shadow: var(--et-shadow);
}
.et-wrap .et-page-btn:hover:not(:disabled) {
  border-color: var(--et-green);
  color: var(--et-green);
  background: var(--et-green-pale);
}
.et-wrap .et-page-btn.active {
  background: var(--et-green);
  color: #fff;
  border-color: var(--et-green);
}
.et-wrap .et-page-btn:disabled { opacity: 0.4; pointer-events: none; }
.et-wrap .et-page-ellipsis { font-size: 13px; color: var(--et-muted); padding: 0 4px; }

/* ── EMPTY STATE ──────────────────────────────────────────────────── */
.et-wrap .et-empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--et-white);
  border: 1.5px dashed var(--et-border);
  border-radius: var(--et-radius-lg);
  color: var(--et-muted);
  font-size: 14px;
}
.et-wrap .et-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px;
  color: var(--et-muted);
  font-size: 13px;
}

/* ── RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .et-wrap .et-hero { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
  .et-wrap .et-hero-stats { flex-wrap: wrap; width: 100%; }
  .et-wrap .et-hero-stat { flex: 1; min-width: 60px; }
  .et-wrap .et-exam-grid { grid-template-columns: 1fr; }
  .et-wrap .et-toolbar { gap: 8px; }
  .et-wrap .et-filter-tabs { overflow-x: auto; }
  .et-wrap .et-hero-title { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   E20.2 — My Students page additions.

   Adds: breadcrumb, card wrapper, filter row + select, ghost button + sm
   button, summary tile strip, sortable table, avatars, exam tag, chips,
   mini pass-rate bar, icon action buttons, table-card pagination footer.

   All selectors namespaced to `.et-wrap` so they never leak outside the
   instructor portal context.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── BREADCRUMB ───────────────────────────────────────────────────── */
.et-wrap .et-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--et-muted);
}
.et-wrap .et-breadcrumb a {
  color: var(--et-green);
  font-weight: 500;
  transition: opacity 0.15s;
}
.et-wrap .et-breadcrumb a:hover { opacity: 0.75; }
.et-wrap .et-breadcrumb-sep { color: var(--et-border); }
.et-wrap .et-breadcrumb-current { color: var(--et-ink); font-weight: 600; }

/* Hero title with leading icon — uses existing et-hero-title size/color. */
.et-wrap .et-hero-title-icon {
  display: flex;
  align-items: center;
  gap: 10px;
}
.et-wrap .et-hero-title-icon svg { color: #fff; flex-shrink: 0; }

/* ── CARD WRAPPER + FILTER ROW ───────────────────────────────────── */
.et-wrap .et-card {
  background: var(--et-white);
  border: 1px solid var(--et-border);
  border-radius: var(--et-radius-lg);
  box-shadow: var(--et-shadow);
  overflow: hidden;
}
.et-wrap .et-card-pad { padding: 20px 24px; }

.et-wrap .et-filter-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.et-wrap .et-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 180px; }
.et-wrap .et-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--et-muted);
}

/* Select dropdown — same chevron data-URI as .et-sort-select but
   sized comfortably for a filter card (taller than the toolbar). */
.et-wrap .et-select {
  border: 1.5px solid var(--et-border);
  border-radius: var(--et-radius-sm);
  padding: 10px 36px 10px 12px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.2;
  color: var(--et-ink);
  background: var(--et-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7a66' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: var(--et-shadow);
}
.et-wrap .et-select:focus {
  border-color: var(--et-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--et-green) 18%, transparent);
}

/* Ghost button — neutral surface w/ green-on-hover. Used for Reset +
   table-actions (Export CSV / Message All). */
.et-wrap .et-btn-ghost {
  background: var(--et-surface);
  color: var(--et-body);
  border: 1.5px solid var(--et-border);
}
.et-wrap .et-btn-ghost:hover:not(:disabled) {
  border-color: var(--et-green);
  color: var(--et-green);
  background: var(--et-green-pale);
  text-decoration: none;
}
.et-wrap .et-btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; }
.et-wrap .et-btn-sm { padding: 8px 14px; font-size: 12px; }

/* ── SUMMARY TILE STRIP (icon + value + label) ───────────────────── */
.et-wrap .et-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.et-wrap .et-summary-tile {
  background: var(--et-white);
  border: 1px solid var(--et-border);
  border-radius: var(--et-radius);
  padding: 16px 18px;
  box-shadow: var(--et-shadow);
  display: flex;
  align-items: center;
  gap: 14px;
}
.et-wrap .et-tile-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--et-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.et-wrap .et-tile-icon.green { background: var(--et-green-pale); color: var(--et-green); }
.et-wrap .et-tile-icon.gold  { background: var(--et-gold-pale);  color: var(--et-gold); }
.et-wrap .et-tile-icon.red   { background: var(--et-red-pale);   color: var(--et-red); }
.et-wrap .et-tile-icon.slate { background: var(--et-surface);    color: var(--et-muted); border: 1px solid var(--et-border); }
.et-wrap .et-tile-val {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 22px;
  font-weight: 700;
  color: var(--et-ink);
  line-height: 1;
}
.et-wrap .et-tile-lbl { font-size: 11px; color: var(--et-muted); margin-top: 3px; font-weight: 500; }

/* ── TABLE CARD HEADER ───────────────────────────────────────────── */
.et-wrap .et-table-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--et-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.et-wrap .et-count-pill {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  color: var(--et-muted);
  background: var(--et-surface);
  border: 1px solid var(--et-border);
  border-radius: 100px;
  padding: 3px 10px;
}
.et-wrap .et-table-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── TABLE ────────────────────────────────────────────────────────── */
.et-wrap .et-table-wrap { overflow-x: auto; }
.et-wrap table.et-table {
  width: 100%;
  border-collapse: collapse;
}
.et-wrap table.et-table thead tr {
  background: var(--et-surface);
  border-bottom: 1.5px solid var(--et-border);
}
.et-wrap table.et-table th {
  padding: 11px 16px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--et-muted);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color 0.14s;
}
.et-wrap table.et-table th:hover { color: var(--et-green); }
.et-wrap table.et-table th.sorted { color: var(--et-green); }
.et-wrap .et-sort-arrow { margin-left: 4px; opacity: 0.5; }
.et-wrap table.et-table th.sorted .et-sort-arrow { opacity: 1; }
.et-wrap table.et-table tbody tr {
  border-bottom: 1px solid var(--et-border);
  transition: background 0.12s;
}
.et-wrap table.et-table tbody tr:last-child { border-bottom: none; }
.et-wrap table.et-table tbody tr:hover { background: var(--et-green-pale); }
.et-wrap table.et-table td {
  padding: 14px 16px;
  font-size: 13px;
  vertical-align: middle;
}

/* Student cell (avatar + name) — no email per privacy promise. */
.et-wrap .et-student-cell { display: flex; align-items: center; gap: 10px; }
.et-wrap .et-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.et-wrap .et-student-name { font-weight: 600; color: var(--et-ink); font-size: 13px; }

/* Exam tag (green pill in the Exam column). */
.et-wrap .et-exam-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--et-green-pale);
  border: 1px solid var(--et-green-light);
  border-radius: 100px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--et-green);
  white-space: nowrap;
}

/* Numeric cells (monospace). */
.et-wrap .et-num {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--et-ink);
}
.et-wrap .et-num.muted {
  color: var(--et-muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Pass chips (✓ N / ✗ 0 / —). */
.et-wrap .et-pass-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 100px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 700;
}
.et-wrap .et-pass-chip.pass { background: var(--et-green-pale); color: var(--et-green); border: 1px solid var(--et-green-light); }
.et-wrap .et-pass-chip.fail { background: var(--et-red-pale);   color: var(--et-red);   border: 1px solid color-mix(in srgb, var(--et-red) 24%, var(--et-border)); }
.et-wrap .et-pass-chip.none { background: var(--et-surface);    color: var(--et-muted); border: 1px solid var(--et-border); }

/* Status chips. */
.et-wrap .et-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 100px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 700;
}
.et-wrap .et-status-chip.submitted   { background: var(--et-green-pale); color: var(--et-green); border: 1px solid var(--et-green-light); }
.et-wrap .et-status-chip.in-progress { background: var(--et-gold-pale);  color: var(--et-gold);  border: 1px solid #f0e0a0; }
.et-wrap .et-status-chip.not-started { background: var(--et-surface);    color: var(--et-muted); border: 1px solid var(--et-border); }
.et-wrap .et-status-chip.expired     { background: var(--et-red-pale);   color: var(--et-red);   border: 1px solid color-mix(in srgb, var(--et-red) 24%, var(--et-border)); }
.et-wrap .et-status-chip.abandoned   { background: var(--et-surface);    color: var(--et-muted); border: 1px solid var(--et-border); }

.et-wrap .et-date-cell {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  color: var(--et-muted);
}

/* Per-row icon actions (view / message / remove). */
.et-wrap .et-action-cell { display: flex; gap: 4px; align-items: center; }
.et-wrap .et-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--et-border);
  background: transparent;
  color: var(--et-muted);
  cursor: pointer;
  transition: all 0.14s;
  text-decoration: none;
}
.et-wrap .et-icon-btn:hover:not(:disabled) {
  border-color: var(--et-green);
  color: var(--et-green);
  background: var(--et-green-pale);
}
.et-wrap .et-icon-btn.danger:hover:not(:disabled) {
  border-color: var(--et-red);
  color: var(--et-red);
  background: var(--et-red-pale);
}
.et-wrap .et-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Pass-rate mini bar inside table cells. */
.et-wrap .et-mini-bar-wrap { display: flex; align-items: center; gap: 8px; }
.et-wrap .et-mini-bar-track {
  flex: 1;
  min-width: 60px;
  height: 5px;
  background: var(--et-border);
  border-radius: 100px;
  overflow: hidden;
}
.et-wrap .et-mini-bar-fill { height: 100%; border-radius: 100px; }

/* Table-card pagination footer (different from landing's centered
   .et-pagination). Lives inside the table card and uses space-between. */
.et-wrap .et-card > .et-pagination {
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid var(--et-border);
  background: var(--et-surface);
  gap: 12px;
  flex-wrap: wrap;
}
.et-wrap .et-page-info { font-size: 12px; color: var(--et-muted); }
.et-wrap .et-page-btns { display: flex; gap: 4px; align-items: center; }
.et-wrap .et-card > .et-pagination .et-page-btn {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

/* Empty state inside the table card (different from landing's dashed
   block — softer because the card already gives the frame). */
.et-wrap .et-table-wrap .et-empty {
  background: transparent;
  border: none;
  padding: 48px 24px;
}
.et-wrap .et-empty-icon {
  width: 52px;
  height: 52px;
  background: var(--et-green-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: var(--et-green);
}
.et-wrap .et-empty-title { font-size: 14px; font-weight: 600; color: var(--et-ink); }
.et-wrap .et-empty-sub   { font-size: 12px; color: var(--et-muted); margin-top: 4px; }

/* My Students responsive. */
@media (max-width: 760px) {
  .et-wrap .et-summary-strip { grid-template-columns: repeat(2, 1fr); }
  /* Hide low-priority columns on narrow screens. */
  .et-wrap table.et-table th:nth-child(5),
  .et-wrap table.et-table td:nth-child(5),
  .et-wrap table.et-table th:nth-child(6),
  .et-wrap table.et-table td:nth-child(6) { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   E20.2.2 — Elementor strips inline `style=""` attributes inside text
   widgets, so we can't rely on `style="display:flex"` or
   `style="max-width:280px"` etc. surviving render. Every layout primitive
   that previously used an inline style now has a dedicated class +
   normalized control heights.
   ═══════════════════════════════════════════════════════════════════════ */

/* Filter row — uniform 42px control height, keeps buttons on the same
   line as the fields, search field capped to 280px.
   E20.2.4 — switched from `align-items: flex-end` to `align-items: stretch`
   so every field has the SAME total height (= tallest field). Each field
   then pushes its (label + control) to the bottom via
   `justify-content: flex-end`. Result: every label sits at exactly the
   same Y position regardless of any internal-control height variance. */
.et-wrap .et-filter-row {
  align-items: stretch;
  --et-fr-h: 42px;
}
.et-wrap .et-filter-row .et-field {
  flex: 1 1 200px;
  min-width: 160px;
  justify-content: flex-end;  /* push label + control to the bottom */
}
.et-wrap .et-filter-row .et-field-search { flex: 1 1 240px; max-width: 280px; }
.et-wrap .et-filter-row .et-select {
  height: var(--et-fr-h);
  padding-top: 0;
  padding-bottom: 0;
  line-height: var(--et-fr-h);
}
/* Search wrap inside the filter card: explicit fixed height, never grow.
   E20.2.4 — switched from `flex: 1 1 auto` to `flex: 0 0 auto` so the
   wrap never expands vertically inside a stretched field column. */
.et-wrap .et-filter-row .et-search-wrap {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  height: var(--et-fr-h);
}
.et-wrap .et-filter-row .et-search {
  height: var(--et-fr-h);     /* explicit, not 100% — defeats browser */
  width: 100%;                /* search-input default sizing.        */
  padding: 0 14px 0 34px;
  line-height: var(--et-fr-h);
}
.et-wrap .et-filter-action {
  height: var(--et-fr-h);
  padding-top: 0;
  padding-bottom: 0;
  line-height: var(--et-fr-h);
  white-space: nowrap;
}
/* E20.2.3 — bundle Apply + Reset into ONE flex item. Otherwise narrow
   WC content widths cause flex-wrap to split them onto separate lines
   (Apply wraps first, Reset wraps second → vertical stack on right). */
.et-wrap .et-filter-row .et-filter-actions-group {
  display: flex;
  gap: 8px;
  align-self: flex-end;
  flex: 0 0 auto;            /* never grow, never shrink — wraps as a pair */
  flex-wrap: nowrap;         /* the two buttons inside stay side-by-side */
}

/* Table-header wrapper (title + count pill on the left). Replaces
   Elementor-stripped `style="display:flex;align-items:center;gap:10px;"`.
   E20.2.5 — promoted to !important because previous rules were being
   overridden somewhere in the cascade (likely Blocksy theme or
   Elementor adding inline display rules), and the pill kept wrapping
   under "Student Results" despite flex-wrap:nowrap. */
.et-wrap .et-table-header-left {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 10px;
  min-width: 0;
}
.et-wrap .et-table-header-left .et-section-title { flex: 0 0 auto; }
.et-wrap .et-count-pill { white-space: nowrap; flex: 0 0 auto; }

/* Chips — explicit centering. Without justify-content:center the leading
   whitespace from multi-line PHP echo renders as a visible leading space
   inside the pill (user reported a thin line to the left of "Submitted"). */
.et-wrap .et-pass-chip,
.et-wrap .et-status-chip,
.et-wrap .et-exam-tag,
.et-wrap .et-count-pill {
  justify-content: center;
}
/* And force the actions to the right regardless of justify-content — same
   defense (justify-content survives Elementor, but margin-left:auto is a
   belt-and-braces fallback that also works if the header gets a wrap). */
.et-wrap .et-table-header .et-table-actions { margin-left: auto; }

/* Chips — explicit line-height so the text vertically centers inside
   the pill. Without this, .et-wrap's inherited 1.5 leaves the cap-height
   off-baseline and the label looks high inside the chip. */
.et-wrap .et-pass-chip,
.et-wrap .et-status-chip,
.et-wrap .et-exam-tag { line-height: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   E20.3 — Class Performance drilldown additions.
   KPI grid, score-distribution rows, pass/fail donut, score-trend bar
   chart, student-ranking rows, question performance table, cache note.
   All scoped to `.et-wrap`. No inline styles in markup (E20.2 lesson).
   ═══════════════════════════════════════════════════════════════════════ */

/* Tokens used by this section. */
.et-wrap {
  --et-blue:      #2563a8;
  --et-blue-pale: color-mix(in srgb, var(--et-blue) 8%, #fff);
}

/* Cache note bubble in the hero right column. */
.et-wrap .et-hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
.et-wrap .et-cache-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}
.et-wrap .et-cache-note svg { flex-shrink: 0; }

/* Card head used by every card in the drilldown. */
.et-wrap .et-card-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--et-border);
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.et-wrap .et-card-head-left { flex: 0 0 auto; }
.et-wrap .et-card-sub {
  font-size: 11px;
  color: var(--et-muted);
  flex: 0 0 auto;
}

/* ── KPI CARD GRID ───────────────────────────────────────────────── */
.et-wrap .et-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.et-wrap .et-kpi-card {
  background: var(--et-white);
  border: 1px solid var(--et-border);
  border-radius: var(--et-radius);
  box-shadow: var(--et-shadow);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.17s, transform 0.17s;
}
.et-wrap .et-kpi-card:hover { box-shadow: var(--et-shadow-md); transform: translateY(-2px); }
.et-wrap .et-kpi-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 0 0 var(--et-radius) var(--et-radius);
}
.et-wrap .et-kpi-card-green::after  { background: var(--et-green); }
.et-wrap .et-kpi-card-gold::after   { background: var(--et-gold); }
.et-wrap .et-kpi-card-red::after    { background: var(--et-red); }
.et-wrap .et-kpi-card-blue::after   { background: var(--et-blue); }
.et-wrap .et-kpi-card-slate::after  { background: var(--et-muted); }

.et-wrap .et-kpi-icon {
  width: 36px; height: 36px;
  border-radius: var(--et-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.et-wrap .et-kpi-icon-green  { background: var(--et-green-pale); color: var(--et-green); }
.et-wrap .et-kpi-icon-gold   { background: var(--et-gold-pale);  color: var(--et-gold); }
.et-wrap .et-kpi-icon-red    { background: var(--et-red-pale);   color: var(--et-red); }
.et-wrap .et-kpi-icon-blue   { background: var(--et-blue-pale);  color: var(--et-blue); }
.et-wrap .et-kpi-icon-slate  { background: var(--et-surface);    color: var(--et-muted); border: 1px solid var(--et-border); }

.et-wrap .et-kpi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--et-muted);
}
.et-wrap .et-kpi-val {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 28px;
  font-weight: 700;
  color: var(--et-ink);
  line-height: 1;
}
.et-wrap .et-kpi-sub { font-size: 11px; color: var(--et-muted); margin-top: 2px; }

/* ── TWO + THREE COL LAYOUTS ─────────────────────────────────────── */
.et-wrap .et-two-col   { display: grid; grid-template-columns: 1fr 1fr;  gap: 16px; }
.et-wrap .et-three-col { display: grid; grid-template-columns: 2fr 1fr;  gap: 16px; }

/* ── SCORE DISTRIBUTION BARS ─────────────────────────────────────── */
.et-wrap .et-dist-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
}
.et-wrap .et-dist-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
}
.et-wrap .et-dist-label {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--et-muted);
  min-width: 64px;
  white-space: nowrap;
}
.et-wrap .et-dist-bar-track {
  flex: 1;
  height: 20px;
  background: var(--et-surface);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--et-border);
  min-width: 0;
}
.et-wrap .et-dist-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding-left: 8px;
  transition: width 0.6s cubic-bezier(.4,0,.2,1);
}
.et-wrap .et-dist-bar-num {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.et-wrap .et-dist-bar-green-strong { background: var(--et-green); }
.et-wrap .et-dist-bar-green-mid    { background: var(--et-green-mid); }
.et-wrap .et-dist-bar-green-soft   { background: color-mix(in srgb, var(--et-green) 55%, #fff); }
.et-wrap .et-dist-bar-gold-strong  { background: var(--et-gold); }
.et-wrap .et-dist-bar-gold-soft    { background: color-mix(in srgb, var(--et-gold) 70%, #fff); }
.et-wrap .et-dist-bar-red          { background: var(--et-red); }
.et-wrap .et-dist-count {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--et-ink);
  min-width: 28px;
  text-align: right;
}
.et-wrap .et-dist-pct {
  font-size: 11px;
  color: var(--et-muted);
  min-width: 36px;
  text-align: right;
}

/* ── PASS/FAIL DONUT ─────────────────────────────────────────────── */
.et-wrap .et-donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  gap: 20px;
}
.et-wrap .et-donut-svg { flex-shrink: 0; }
.et-wrap .et-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 240px;
}
.et-wrap .et-legend-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 8px;
}
.et-wrap .et-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.et-wrap .et-legend-dot-pass  { background: var(--et-green); }
.et-wrap .et-legend-dot-fail  { background: var(--et-red); }
.et-wrap .et-legend-dot-total { background: var(--et-border); }
.et-wrap .et-legend-label { font-size: 12px; color: var(--et-body); flex: 1 1 auto; min-width: 0; }
.et-wrap .et-legend-val {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--et-ink);
  white-space: nowrap;
}
.et-wrap .et-legend-pct {
  font-size: 11px;
  color: var(--et-muted);
  min-width: 44px;
  text-align: right;
  white-space: nowrap;
}

/* ── SCORE TIMELINE (BAR CHART) ──────────────────────────────────── */
.et-wrap .et-timeline { padding: 18px 20px; }
.et-wrap .et-chart-wrap { width: 100%; overflow-x: auto; }
.et-wrap .et-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  padding-bottom: 20px;
  position: relative;
}
.et-wrap .et-bar-chart::after {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 0; right: 0;
  height: 1px;
  background: var(--et-border);
}
.et-wrap .et-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1 1 0;
  min-width: 22px;
}
.et-wrap .et-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  transition: opacity 0.15s;
  position: relative;
  cursor: default;
}
.et-wrap .et-bar:hover { opacity: 0.8; }
.et-wrap .et-bar-pass { background: var(--et-green); }
.et-wrap .et-bar-fail { background: var(--et-red); }
.et-wrap .et-bar-lbl {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  color: var(--et-muted);
  text-align: center;
  white-space: nowrap;
}

/* ── STUDENT RANKING ─────────────────────────────────────────────── */
.et-wrap .et-rank-list { display: flex; flex-direction: column; }
.et-wrap .et-rank-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--et-border);
  transition: background 0.12s;
}
.et-wrap .et-rank-row:last-child { border-bottom: none; }
.et-wrap .et-rank-row:hover { background: var(--et-green-pale); }
.et-wrap .et-rank-num {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--et-muted);
  min-width: 24px;
  flex-shrink: 0;
}
.et-wrap .et-rank-num-top { color: #c9a84c; }

/* Avatar palette as classes (replaces inline `style="background:#…;"`
   — Elementor strips inline styles, per the E20.2.2 lesson). */
.et-wrap .et-avatar-p1 { background: var(--cits-wpel-primary-color, #3a6b35); }
.et-wrap .et-avatar-p2 { background: #2d5429; }
.et-wrap .et-avatar-p3 { background: #4d8a47; }
.et-wrap .et-avatar-p4 { background: #b8860b; }
.et-wrap .et-avatar-p5 { background: #2563a8; }
.et-wrap .et-avatar-p6 { background: #7b3f6e; }
.et-wrap .et-avatar-p7 { background: #c05828; }

.et-wrap .et-rank-body { flex: 1 1 auto; min-width: 0; }
.et-wrap .et-rank-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--et-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.et-wrap .et-rank-meta { font-size: 10px; color: var(--et-muted); }
.et-wrap .et-rank-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.et-wrap .et-rank-score {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.et-wrap .et-rank-score-pass { color: var(--et-green); }
.et-wrap .et-rank-score-fail { color: var(--et-red); }
.et-wrap .et-rank-bar-track {
  width: 64px;
  height: 5px;
  background: var(--et-border);
  border-radius: 100px;
  overflow: hidden;
}
.et-wrap .et-rank-bar-fill { height: 100%; width: 0; border-radius: 100px; transition: width 0.5s ease; }
.et-wrap .et-rank-bar-pass { background: var(--et-green); }
.et-wrap .et-rank-bar-fail { background: var(--et-red); }

/* ── QUESTION TABLE ──────────────────────────────────────────────── */
.et-wrap table.et-q-table th { padding: 11px 14px; }
.et-wrap table.et-q-table td { padding: 12px 14px; font-size: 12px; }
.et-wrap .et-q-num {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--et-muted);
}
.et-wrap .et-q-text {
  color: var(--et-ink);
  font-weight: 500;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.et-wrap .et-q-th-rate { min-width: 180px; }
.et-wrap .et-q-correct-rate {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
}
.et-wrap .et-q-bar-track {
  flex: 1;
  min-width: 60px;
  height: 6px;
  background: var(--et-border);
  border-radius: 100px;
  overflow: hidden;
}
.et-wrap .et-q-bar-fill { height: 100%; width: 0; border-radius: 100px; transition: width 0.5s ease; }
.et-wrap .et-q-bar-good { background: linear-gradient(90deg, var(--cits-wpel-primary-color, #3a6b35), #4d8a47); }
.et-wrap .et-q-bar-mid  { background: linear-gradient(90deg, #b8860b, #e0b830); }
.et-wrap .et-q-bar-bad  { background: linear-gradient(90deg, #b83232, #d94f4f); }
.et-wrap .et-q-pct {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  min-width: 36px;
  text-align: right;
  line-height: 1;
}
.et-wrap .et-q-pct-good { color: var(--et-green); }
.et-wrap .et-q-pct-mid  { color: var(--et-gold); }
.et-wrap .et-q-pct-bad  { color: var(--et-red); }
.et-wrap .et-q-correct {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  color: var(--et-green);
  font-weight: 600;
}
.et-wrap .et-q-wrong {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  color: var(--et-red);
  font-weight: 600;
}
.et-wrap .et-difficulty-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 100px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.et-wrap .et-difficulty-easy   { background: var(--et-green-pale); color: var(--et-green); border: 1px solid var(--et-green-light); }
.et-wrap .et-difficulty-medium { background: var(--et-gold-pale);  color: var(--et-gold);  border: 1px solid #f0e0a0; }
.et-wrap .et-difficulty-hard   { background: var(--et-red-pale);   color: var(--et-red);   border: 1px solid color-mix(in srgb, var(--et-red) 24%, var(--et-border)); }

/* Empty-inline state for the small cards (trend, ranking). */
.et-wrap .et-empty-inline {
  padding: 32px 20px;
  text-align: center;
  font-size: 12px;
  color: var(--et-muted);
}

/* Disabled select cap — match the disabled-button look. */
.et-wrap .et-select[disabled],
.et-wrap .et-select[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  background-color: var(--et-surface);
}

/* Date-range field: cap width like the search field in My Students. */
.et-wrap .et-filter-row .et-field-daterange { flex: 0 1 200px; max-width: 200px; }

/* Performance page responsive. */
@media (max-width: 900px) {
  .et-wrap .et-kpi-grid   { grid-template-columns: repeat(3, 1fr); }
  .et-wrap .et-two-col    { grid-template-columns: 1fr; }
  .et-wrap .et-three-col  { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .et-wrap .et-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .et-wrap .et-q-text   { max-width: 180px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   E20.4 + E20.5 — Question Bank + Exam List list-mode additions.
   Re-uses ~95% of existing tokens; the only new visual primitive is the
   `.et-type-chip` (neutral pill for question type) and a few tweaks to
   the existing `.et-q-text` so it renders well outside the performance
   table context.
   ═══════════════════════════════════════════════════════════════════════ */

.et-wrap .et-type-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 100px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  background: var(--et-blue-pale, var(--et-surface));
  color: var(--et-blue, var(--et-body));
  border: 1px solid color-mix(in srgb, var(--et-blue, var(--et-muted)) 24%, var(--et-border));
  white-space: nowrap;
  justify-content: center;
}

/* The Question Bank / Exam List tables reuse .et-q-text from E20.3 but
   need it to play in the broader-column context where Question/Exam
   text is the main column. Allow it to consume any leftover width
   (overrides the 320px cap from E20.3) but keep ellipsis behavior. */
.et-wrap table.et-table .et-q-text { max-width: none; min-width: 200px; }

/* ═══════════════════════════════════════════════════════════════════════
   E20.4b + E20.5b — Form mode (Question + Exam author/edit screens).
   Reuses .et-wrap / .et-card / .et-section-title / .et-btn / .et-select
   from the list-mode design language. Adds form primitives + per-form
   repeater patterns + .et-alert variants for flash messages.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Slim hero variant (no stat-tile column, single-column copy) ────── */
.et-wrap .et-hero-slim { padding: 22px 28px; }
.et-wrap .et-hero-slim .et-hero-left { flex: 1 1 auto; max-width: 720px; }

/* ── Form card section heads ─────────────────────────────────────────── */
.et-wrap .et-form-section { padding: 22px 24px 20px; }
.et-wrap .et-form-section-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--et-border);
}
.et-wrap .et-form-section-sub {
  font-size: 12px;
  color: var(--et-muted);
  padding-left: 12px; /* align under et-section-title accent bar */
  line-height: 1.5;
}

/* ── Form layout (vertical stack of cards + actions) ─────────────────── */
.et-wrap form.et-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.et-wrap .et-form-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.et-wrap .et-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.et-wrap .et-form-row > .et-form-field {
  flex: 1 1 200px;
  min-width: 0;
}

/* ── Radio group (Purpose card) — vertically stacked cards ─────────────
   v1.8.36.76 Ship 5.3.3.1 UX hotfix — the previous unstyled fieldset
   flowed all three options inline as a single paragraph. Stack them
   as clickable cards with clear separation between label + description. */
.et-wrap .et-radio-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.et-wrap .et-radio-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--et-border);
  border-radius: 8px;
  background: var(--et-surface, #fff);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.et-wrap .et-radio-choice:hover {
  border-color: var(--et-accent, #2563eb);
  background: color-mix(in srgb, var(--et-accent, #2563eb) 4%, transparent);
}
.et-wrap .et-radio-choice input[type="radio"] {
  margin: 3px 0 0;
  flex: 0 0 auto;
}
.et-wrap .et-radio-choice input[type="radio"]:checked ~ .et-radio-choice-body {
  color: var(--et-accent, #2563eb);
}
.et-wrap .et-radio-choice:has(input[type="radio"]:checked) {
  border-color: var(--et-accent, #2563eb);
  background: color-mix(in srgb, var(--et-accent, #2563eb) 6%, transparent);
  box-shadow: 0 0 0 1px var(--et-accent, #2563eb) inset;
}
.et-wrap .et-radio-choice-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}
.et-wrap .et-radio-choice-body strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--et-text, #1f2937);
  line-height: 1.4;
}
.et-wrap .et-radio-choice-body small {
  font-size: 12.5px;
  color: var(--et-muted, #6b7280);
  line-height: 1.5;
}
.et-wrap .et-radio-choice:has(input[type="radio"]:checked) .et-radio-choice-body strong {
  color: var(--et-accent, #2563eb);
}

/* ── Field primitives ────────────────────────────────────────────────── */
.et-wrap .et-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.et-wrap .et-form-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--et-ink);
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.et-wrap .et-form-required::after {
  content: " *";
  color: var(--et-red);
  font-weight: 700;
}

.et-wrap .et-form-input,
.et-wrap .et-form-textarea {
  width: 100%;
  background: #fff;
  color: var(--et-ink);
  border: 1.5px solid var(--et-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
  appearance: none;
}
.et-wrap .et-form-input  { height: 38px; padding: 0 12px; }
.et-wrap .et-form-textarea { min-height: 88px; padding: 10px 12px; resize: vertical; }

.et-wrap .et-form-input:focus,
.et-wrap .et-form-textarea:focus,
.et-wrap .et-form-field > select.et-select:focus {
  border-color: var(--et-green);
  box-shadow: 0 0 0 3px var(--et-green-pale);
}
.et-wrap .et-form-input::placeholder,
.et-wrap .et-form-textarea::placeholder { color: var(--et-muted); opacity: 0.7; }

/* When .et-select sits inside a form-field (vs the toolbar context),
   align its height with et-form-input so mixed-control rows look even. */
.et-wrap .et-form-field > select.et-select {
  height: 38px;
  font-size: 13px;
}

.et-wrap .et-form-help {
  font-size: 11px;
  color: var(--et-muted);
  font-style: italic;
  line-height: 1.45;
}

/* ── Option row (question form) ──────────────────────────────────────── */
.et-wrap .et-option-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--et-surface);
  border: 1.5px solid var(--et-border);
  border-radius: 10px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.et-wrap .et-option-row:focus-within {
  border-color: var(--et-green);
  background: #fff;
}
.et-wrap .et-option-row.is-correct {
  background: var(--et-green-pale);
  border-color: var(--et-green-light);
}
.et-wrap .et-option-num {
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--et-border);
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--et-muted);
}
.et-wrap .et-option-row.is-correct .et-option-num {
  background: var(--et-green);
  color: #fff;
  border-color: var(--et-green);
}
.et-wrap .et-option-text {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  background: #fff;
  border: 1.5px solid transparent;
  border-radius: 8px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--et-ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.et-wrap .et-option-text:focus {
  border-color: var(--et-green);
  box-shadow: 0 0 0 3px var(--et-green-pale);
}
.et-wrap .et-option-correct {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  border: 1.5px solid var(--et-border);
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  color: var(--et-muted);
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.et-wrap .et-option-correct input { position: absolute; opacity: 0; pointer-events: none; }
.et-wrap .et-option-correct svg { opacity: 0.5; }
.et-wrap .et-option-row.is-correct .et-option-correct {
  background: var(--et-green);
  border-color: var(--et-green);
  color: #fff;
}
.et-wrap .et-option-row.is-correct .et-option-correct svg { opacity: 1; }

/* ── Exam section repeater (E20.5b) ─────────────────────────────────── */
.et-wrap .et-section-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.et-wrap .et-section-row-card {
  padding: 14px 16px;
  background: var(--et-surface);
  border: 1.5px solid var(--et-border);
  border-radius: 10px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.et-wrap .et-section-row-card:focus-within {
  border-color: var(--et-green);
  background: #fff;
}
.et-wrap .et-section-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.et-wrap .et-section-row-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--et-green);
  color: #fff;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
}
.et-wrap .et-section-row-title {
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--et-ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Alerts (flash + permission notices) ─────────────────────────────── */
.et-wrap .et-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1.5px solid;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}
.et-wrap .et-alert-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.et-wrap .et-alert-success {
  background: var(--et-green-pale);
  border-color: var(--et-green-light);
  color: var(--et-green-dark);
}
.et-wrap .et-alert-error {
  background: var(--et-red-pale);
  border-color: color-mix(in srgb, var(--et-red) 24%, var(--et-border));
  color: color-mix(in srgb, var(--et-red) 75%, #000);
}

/* ── Form actions row (Cancel + Submit) — sits in the gap after the
   last card; no border, the visual separation comes from card edges. */
.et-wrap .et-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 4px 0 0;
}
.et-wrap .et-form-actions-right { display: inline-flex; gap: 8px; }

/* ── Form-mode responsive ────────────────────────────────────────────── */
@media (max-width: 720px) {
  .et-wrap .et-form-row > .et-form-field { flex: 1 1 100%; }
  .et-wrap .et-option-row { flex-wrap: wrap; }
  .et-wrap .et-option-text { flex: 1 1 100%; order: 3; }
  .et-wrap .et-option-correct { order: 2; }
  .et-wrap .et-form-actions { flex-direction: column-reverse; align-items: stretch; }
  .et-wrap .et-form-actions .et-btn,
  .et-wrap .et-form-actions .et-form-actions-right { width: 100%; justify-content: center; }
  .et-wrap .et-form-actions-right .et-btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   E23.2 — Inline + New category affordance (instructor question form).
   ═══════════════════════════════════════════════════════════════════════ */

.et-wrap .et-form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.et-wrap .et-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 2px 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--et-green);
  cursor: pointer;
  letter-spacing: 0.02em;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
}
.et-wrap .et-link-btn:hover,
.et-wrap .et-link-btn:focus-visible {
  color: var(--et-green-dark);
  background: var(--et-green-pale);
  outline: none;
}
.et-wrap .et-link-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--et-green-pale);
}
.et-wrap .et-link-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.et-wrap .et-cat-add-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--et-surface);
  border: 1.5px solid var(--et-green-light);
  border-radius: 8px;
}
.et-wrap .et-cat-add-panel .et-cat-add-input {
  flex: 1 1 200px;
  min-width: 0;
  height: 32px;
  font-size: 12px;
}
.et-wrap .et-cat-add-panel .et-btn-sm {
  padding: 6px 12px;
  font-size: 11px;
  height: 32px;
}
.et-wrap .et-cat-add-status {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
.et-wrap .et-cat-add-status.is-success { color: var(--et-green-dark); }
.et-wrap .et-cat-add-status.is-error   { color: color-mix(in srgb, var(--et-red) 75%, #000); }

/* ═══════════════════════════════════════════════════════════════════════
   E23.3 — Bulk import page (paste-and-save).
   ═══════════════════════════════════════════════════════════════════════ */

/* Radio-group field — used by the format picker on the import page. */
.et-wrap .et-form-radio-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0;
}
.et-wrap .et-form-radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--et-surface);
  border: 1.5px solid var(--et-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.et-wrap .et-form-radio:hover,
.et-wrap .et-form-radio:focus-within {
  border-color: var(--et-green-light);
  background: #fff;
}
.et-wrap .et-form-radio input[type="radio"] {
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--et-green);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.et-wrap .et-form-radio input[type="radio"]:checked + .et-form-radio-body { color: var(--et-ink); }
.et-wrap .et-form-radio:has(input:checked) {
  border-color: var(--et-green);
  background: var(--et-green-pale);
}
.et-wrap .et-form-radio-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--et-body);
}
.et-wrap .et-form-radio-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--et-ink);
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.et-wrap .et-form-radio-help {
  font-size: 11px;
  color: var(--et-muted);
  line-height: 1.45;
  font-style: italic;
}

/* Import paste textarea — monospaced so column alignment is visible
   when the user has tabular content selected. */
.et-wrap .et-import-paste {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  min-height: 240px;
  white-space: pre;
  overflow-x: auto;
}

/* Per-error list rendered after a save. */
.et-wrap .et-import-errors {
  padding: 18px 20px;
}
.et-wrap .et-import-error-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.et-wrap .et-import-error-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--et-surface);
  border: 1px solid var(--et-border);
  border-left: 3px solid var(--et-red);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--et-body);
}
.et-wrap .et-import-error-tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 100px;
  background: var(--et-red-pale);
  color: color-mix(in srgb, var(--et-red) 75%, #000);
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
}
.et-wrap .et-import-error-msg {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}
.et-wrap .et-import-error-msg em {
  font-style: italic;
  color: var(--et-ink);
}

/* ── REDUCED MOTION ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .et-wrap .et-status-badge.active::before { animation: none; }
  .et-wrap .et-exam-card,
  .et-wrap .et-btn,
  .et-wrap .et-card-action,
  .et-wrap .et-page-btn,
  .et-wrap .et-icon-btn,
  .et-wrap .et-kpi-card,
  .et-wrap .et-bar,
  .et-wrap .et-dist-bar-fill,
  .et-wrap .et-rank-bar-fill,
  .et-wrap .et-q-bar-fill,
  .et-wrap .et-form-input,
  .et-wrap .et-form-textarea,
  .et-wrap .et-option-row,
  .et-wrap .et-option-text,
  .et-wrap .et-option-correct,
  .et-wrap .et-section-row-card { transition: none; }
  .et-wrap .et-btn:hover,
  .et-wrap .et-exam-card:hover,
  .et-wrap .et-kpi-card:hover { transform: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   E26d.1 — Course Details list inputs (outcomes / prereqs / audience / FAQ)
   for the Instructor course builder. Scoped under .et-wrap so the styles
   only apply on the instructor portal pages.
   ═════════════════════════════════════════════════════════════════════════ */

.et-wrap .cits-wpel-list-input {
  margin: 0;
}

.et-wrap .cits-wpel-list-input .cits-wpel-list-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.et-wrap .cits-wpel-list-input .cits-wpel-list-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.et-wrap .cits-wpel-list-input .cits-wpel-list-handle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-height: 38px;
  color: #94a3b8;
  font-size: 14px;
  user-select: none;
  cursor: grab;
}

.et-wrap .cits-wpel-list-input .cits-wpel-list-row .et-form-input {
  flex: 1 1 auto;
  min-width: 0;
}

.et-wrap .cits-wpel-list-input .cits-wpel-list-remove {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: #b91c1c;
  background: transparent;
  border: 0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.et-wrap .cits-wpel-list-input .cits-wpel-list-remove:hover,
.et-wrap .cits-wpel-list-input .cits-wpel-list-remove:focus {
  background: rgba(185, 28, 28, 0.08);
  outline: 0;
}

.et-wrap .cits-wpel-list-input .cits-wpel-list-remove:focus-visible {
  box-shadow: 0 0 0 2px var(--cits-etp-primary-color, var(--cits-wpel-primary-color, #3a6b35));
}

.et-wrap .cits-wpel-list-input .cits-wpel-list-actions {
  margin: 10px 0 0;
}

/* FAQ rows — stacked question + answer inside .cits-wpel-faq-fields. */
.et-wrap .cits-wpel-list-input .cits-wpel-faq-row .cits-wpel-faq-fields {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.et-wrap .cits-wpel-list-input .cits-wpel-faq-row .cits-wpel-faq-fields .et-form-input,
.et-wrap .cits-wpel-list-input .cits-wpel-faq-row .cits-wpel-faq-fields .et-form-textarea {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .et-wrap .cits-wpel-list-input .cits-wpel-list-handle { cursor: default; }
}

/* ═════════════════════════════════════════════════════════════════════════
   E26d.2 — Section cards for the instructor course builder. E20 design
   language: outer card chrome wrapping the lesson rows so the parent/child
   relationship reads at a glance.
   ═════════════════════════════════════════════════════════════════════════ */

.et-wrap .cits-wpel-sections-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.et-wrap .cits-wpel-section-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  padding: 16px;
  margin: 0;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.et-wrap .cits-wpel-section-card.is-dragging {
  opacity: 0.45;
  border-style: dashed;
}

.et-wrap .cits-wpel-section-card.is-drop-target {
  border-color: var(--cits-etp-primary-color, var(--cits-wpel-primary-color, #3a6b35));
  background: rgba(58, 107, 53, 0.05);
  box-shadow: 0 0 0 2px rgba(58, 107, 53, 0.15);
}

.et-wrap .cits-wpel-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.et-wrap .cits-wpel-section-handle {
  cursor: grab;
  font-size: 18px;
  color: #94a3b8;
  user-select: none;
  padding: 4px 6px;
  border-radius: 4px;
}

.et-wrap .cits-wpel-section-handle:active { cursor: grabbing; }
.et-wrap .cits-wpel-section-handle:focus-visible {
  outline: 2px solid var(--cits-etp-primary-color, var(--cits-wpel-primary-color, #3a6b35));
  outline-offset: 2px;
}

.et-wrap .cits-wpel-section-num {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  min-width: 32px;
}

.et-wrap .cits-wpel-section-card .cits-wpel-section-title.et-form-input {
  flex: 1 1 auto;
  font-weight: 600;
  font-size: 15px;
}

.et-wrap .cits-wpel-section-remove {
  color: #b91c1c !important;
  flex: 0 0 auto;
}

.et-wrap .cits-wpel-section-desc {
  margin: 0 0 14px 38px;
}

.et-wrap .cits-wpel-section-desc .et-form-textarea {
  width: 100%;
}

.et-wrap .cits-wpel-section-lessons {
  margin-left: 38px;
  padding-left: 14px;
  border-left: 2px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.et-wrap .cits-wpel-section-lessons.is-drop-target {
  border-left-color: var(--cits-etp-primary-color, var(--cits-wpel-primary-color, #3a6b35));
  background: rgba(58, 107, 53, 0.04);
  min-height: 56px;
  padding: 12px;
  border-radius: 6px;
  border-left-style: dashed;
}

.et-wrap .cits-wpel-section-actions {
  margin-left: 38px;
  margin-top: 12px;
}

/* Lesson rows nested inside a section. Override existing margins so
   the spacing comes from `gap` on .cits-wpel-section-lessons. */
.et-wrap .cits-wpel-section-lessons .cits-wpel-lesson-row {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .et-wrap .cits-wpel-section-card,
  .et-wrap .cits-wpel-section-card.is-dragging,
  .et-wrap .cits-wpel-section-card.is-drop-target {
    transition: none;
  }
  .et-wrap .cits-wpel-section-handle,
  .et-wrap .cits-wpel-section-handle:active {
    cursor: default;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   E26d.3 — Lesson preview toggle + per-lesson Resources block.
   E20 design language: card-on-card chrome with subtle background tint to
   visually nest the resources under their parent lesson.
   ═════════════════════════════════════════════════════════════════════════ */

.et-wrap .cits-wpel-lesson-flags {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.et-wrap .cits-wpel-lesson-preview-toggle {
  font-size: 13px;
}

.et-wrap .cits-wpel-resources {
  margin-top: 14px;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.et-wrap .cits-wpel-resources-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.et-wrap .cits-wpel-resources-head strong {
  font-size: 14px;
  color: #1e293b;
}

.et-wrap .cits-wpel-resources-sub {
  color: #64748b;
  font-size: 12px;
  font-style: italic;
}

.et-wrap .cits-wpel-resource-rows {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.et-wrap .cits-wpel-resource-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

.et-wrap .cits-wpel-resource-fields {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.et-wrap .cits-wpel-resource-fields > .et-form-input {
  width: 100%;
}

.et-wrap .cits-wpel-resource-source-toggle {
  display: flex;
  gap: 16px;
  align-items: center;
}

.et-wrap .cits-wpel-resource-source-toggle .et-form-check {
  margin: 0;
  font-size: 13px;
  color: #475569;
}

.et-wrap .cits-wpel-resource-source-attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.et-wrap .cits-wpel-resource-attach-name {
  color: #1e293b;
  font-size: 13px;
  font-style: italic;
  word-break: break-all;
}

.et-wrap .cits-wpel-resource-source-url .et-form-input {
  width: 100%;
}

.et-wrap .cits-wpel-resource-remove {
  flex: 0 0 auto;
  align-self: flex-start;
  color: #b91c1c !important;
}

/* ============================================================
   Import review (1.15.0) — side-by-side diff + per-row decisions
   ============================================================ */
.cits-wpel-instructor-questions--review .cits-wpel-review-card {
    margin-bottom: 16px;
}
.cits-wpel-instructor-questions--review .cits-wpel-review-card--duplicate {
    border-left: 4px solid #f59e0b;
}
.cits-wpel-instructor-questions--review .cits-wpel-review-card--unique {
    border-left: 4px solid #10b981;
}
.cits-wpel-instructor-questions--review .cits-wpel-review-card__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--et-border, #e5e7eb);
}
.cits-wpel-instructor-questions--review .cits-wpel-review-card__title {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.cits-wpel-instructor-questions--review .cits-wpel-review-card__row-num {
    font-size: 11px;
    font-weight: 600;
    color: var(--et-muted, #6b7280);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cits-wpel-instructor-questions--review .cits-wpel-review-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
}
.cits-wpel-instructor-questions--review .cits-wpel-review-card__badge--duplicate {
    background: #fef3c7;
    color: #92400e;
}
.cits-wpel-instructor-questions--review .cits-wpel-review-card__badge--unique {
    background: #d1fae5;
    color: #065f46;
}
.cits-wpel-instructor-questions--review .cits-wpel-review-card__preview {
    color: var(--et-ink, #111827);
    font-size: 14px;
    font-weight: 500;
}

/* Diff: 2 columns at >=720px, stacked below */
.cits-wpel-instructor-questions--review .cits-wpel-review-diff {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
@media (max-width: 720px) {
    .cits-wpel-instructor-questions--review .cits-wpel-review-diff {
        grid-template-columns: 1fr;
    }
}
.cits-wpel-instructor-questions--review .cits-wpel-review-diff__col {
    background: var(--et-surface, #f9fafb);
    border: 1px solid var(--et-border, #e5e7eb);
    border-radius: 8px;
    padding: 12px 14px;
}
.cits-wpel-instructor-questions--review .cits-wpel-review-diff__col--existing {
    background: #fefaf2;
    border-color: #fde68a;
}
.cits-wpel-instructor-questions--review .cits-wpel-review-diff__col--parsed {
    background: #eff6ff;
    border-color: #bfdbfe;
}
.cits-wpel-instructor-questions--review .cits-wpel-review-diff__col-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--et-muted, #6b7280);
    margin-bottom: 8px;
}
.cits-wpel-instructor-questions--review .cits-wpel-review-diff__text {
    color: var(--et-ink, #111827);
    margin-bottom: 10px;
    word-break: break-word;
}
.cits-wpel-instructor-questions--review .cits-wpel-review-diff__opts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cits-wpel-instructor-questions--review .cits-wpel-review-diff__opt {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.6);
    font-size: 13px;
    color: var(--et-ink, #111827);
}
.cits-wpel-instructor-questions--review .cits-wpel-review-diff__opt.is-different {
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
    font-weight: 500;
}
.cits-wpel-instructor-questions--review .cits-wpel-review-diff__opt.is-correct {
    border-left: 3px solid #10b981;
}
.cits-wpel-instructor-questions--review .cits-wpel-review-diff__correct {
    color: #047857;
    font-weight: 700;
    flex-shrink: 0;
}
.cits-wpel-instructor-questions--review .cits-wpel-review-diff__opt-text {
    flex: 1;
    word-break: break-word;
}

/* Decision radio group */
.cits-wpel-instructor-questions--review .cits-wpel-review-decision {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    border: 0;
    padding: 0;
    margin: 0;
}
@media (max-width: 720px) {
    .cits-wpel-instructor-questions--review .cits-wpel-review-decision {
        grid-template-columns: 1fr;
    }
}
.cits-wpel-instructor-questions--review .cits-wpel-review-decision__opt {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--et-border, #e5e7eb);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.cits-wpel-instructor-questions--review .cits-wpel-review-decision__opt:hover {
    border-color: var(--et-green, #2563eb);
    background: rgba(0,0,0,0.025);
}
.cits-wpel-instructor-questions--review .cits-wpel-review-decision__opt input[type="radio"] {
    margin-top: 3px;
    flex-shrink: 0;
}
.cits-wpel-instructor-questions--review .cits-wpel-review-decision__opt strong {
    display: block;
    font-size: 13px;
    color: var(--et-ink, #111827);
}
.cits-wpel-instructor-questions--review .cits-wpel-review-decision__opt small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--et-muted, #6b7280);
    line-height: 1.4;
}

/* Action bar */
.cits-wpel-instructor-questions--review .cits-wpel-review-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* ═══════════════════════════════════════════════════════════════════
 * v1.5.54 — Course Students shortcode
 * Progress-bar cell + course-name cell + responsive table reflow into
 * cards below 720px. Reuses .et-table / .et-hero / .et-card design
 * system for everything else.
 * ═══════════════════════════════════════════════════════════════════ */

/* Course title cell — subtle chip tint to differentiate from ink text. */
.et-wrap .cwl-cs-course-cell {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 100px;
    background: color-mix(in srgb, var(--cits-wpel-primary-color, #3a6b35) 8%, transparent);
    color: var(--et-ink);
    font-size: 12px;
    font-weight: 500;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Progress cell — small horizontal bar + numeric value. */
.et-wrap .cwl-cs-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 110px;
}
.et-wrap .cwl-cs-progress-bar {
    flex: 1;
    height: 6px;
    background: color-mix(in srgb, var(--et-ink, #111827) 8%, transparent);
    border-radius: 999px;
    overflow: hidden;
}
.et-wrap .cwl-cs-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cits-wpel-primary-color, #3a6b35), color-mix(in srgb, var(--cits-wpel-primary-color, #3a6b35) 70%, #ffffff));
    border-radius: inherit;
    transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.et-wrap .cwl-cs-progress-val {
    font-size: 12px;
    font-weight: 600;
    color: var(--et-ink);
    min-width: 34px;
    text-align: right;
    tabular-nums: normal;
    font-variant-numeric: tabular-nums;
}

/* ── Responsive: below 720px viewport the table reflows into cards.
 * data-th attrs on each <td> feed the pseudo-labels. Header row hides.
 * Applies to both viewport @media and container query so it works
 * inside the my-account shell (which uses container-type: inline-size). */
@media (max-width: 720px) {
    .et-wrap .cits-wpel-instructor-coursestudents__table thead { display: none; }
    .et-wrap .cits-wpel-instructor-coursestudents__table,
    .et-wrap .cits-wpel-instructor-coursestudents__table tbody { display: block; }
    .et-wrap .cits-wpel-instructor-coursestudents__table tr {
        display: block;
        border: 1px solid var(--et-border, #e5e7eb);
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 12px;
        background: var(--et-surface, #ffffff);
    }
    .et-wrap .cits-wpel-instructor-coursestudents__table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 6px 0;
        border: none;
    }
    .et-wrap .cits-wpel-instructor-coursestudents__table td::before {
        content: attr(data-th);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--et-ink-muted, #6b7280);
        flex-shrink: 0;
    }
    .et-wrap .cwl-cs-progress { min-width: 0; width: 50%; }
    .et-wrap .cwl-cs-course-cell { max-width: 60vw; }
    /* Filter row collapses to single column. */
    .et-wrap .et-filter-row { flex-direction: column; align-items: stretch; }
    .et-wrap .et-filter-row .et-field,
    .et-wrap .et-filter-row .et-filter-actions-group { width: 100%; }
    /* Hero stats grid shrinks to 2 cols on narrow. */
    .et-wrap .et-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 720px) {
    .et-wrap .cits-wpel-instructor-coursestudents__table thead { display: none; }
    .et-wrap .cits-wpel-instructor-coursestudents__table,
    .et-wrap .cits-wpel-instructor-coursestudents__table tbody { display: block; }
    .et-wrap .cits-wpel-instructor-coursestudents__table tr {
        display: block;
        border: 1px solid var(--et-border, #e5e7eb);
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 12px;
        background: var(--et-surface, #ffffff);
    }
    .et-wrap .cits-wpel-instructor-coursestudents__table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 6px 0;
        border: none;
    }
    .et-wrap .cits-wpel-instructor-coursestudents__table td::before {
        content: attr(data-th);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--et-ink-muted, #6b7280);
        flex-shrink: 0;
    }
    .et-wrap .cwl-cs-progress { min-width: 0; width: 50%; }
    .et-wrap .cwl-cs-course-cell { max-width: 60cqw; }
    .et-wrap .et-filter-row { flex-direction: column; align-items: stretch; }
    .et-wrap .et-filter-row .et-field,
    .et-wrap .et-filter-row .et-filter-actions-group { width: 100%; }
    .et-wrap .et-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── v1.8.31.3 — Question Bank table fit + archive icon + responsive ── */
.cits-wpel-instructor-questions .et-table-wrap {
    /* Give the container an inner scroll only as a last resort; the
     * fixed-layout + col widths below should prevent horizontal
     * overflow at typical shell widths. */
    overflow-x: auto;
}
.cits-wpel-instructor-questions table.et-table {
    table-layout: fixed;
    width: 100%;
}
/* v1.8.31.4 — class-based column widths (safer than nth-last-child now
 * that we dropped the Diff + Updated columns). Total: 56 + 140 + 84 +
 * 70 + 90 + 100 = 540 + fluid Question column. */
.cits-wpel-instructor-questions table.et-table th:first-child,
.cits-wpel-instructor-questions table.et-table td.et-col-num,
.cits-wpel-instructor-questions table.et-table td:first-child { width: 56px; white-space: nowrap; }
/* Question preview takes remaining space; wrap with ellipsis on 2 lines. */
.cits-wpel-instructor-questions table.et-table th:nth-child(2),
.cits-wpel-instructor-questions table.et-table td:nth-child(2) { width: auto; min-width: 200px; }
.cits-wpel-instructor-questions table.et-table .et-q-num {
    display: inline-block;
    white-space: nowrap;
    font-weight: 600;
}
.cits-wpel-instructor-questions table.et-table .et-q-text {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
    min-width: 0;
    word-break: break-word;
}
.cits-wpel-instructor-questions table.et-table th.et-col-author,
.cits-wpel-instructor-questions table.et-table td.et-col-author { width: 140px; }
.cits-wpel-instructor-questions table.et-table th.et-col-type,
.cits-wpel-instructor-questions table.et-table td.et-col-type { width: 84px; }
.cits-wpel-instructor-questions table.et-table th.et-col-marks,
.cits-wpel-instructor-questions table.et-table td.et-col-marks { width: 70px; }
.cits-wpel-instructor-questions table.et-table th.et-col-status,
.cits-wpel-instructor-questions table.et-table td.et-col-status { width: 90px; }
.cits-wpel-instructor-questions table.et-table th.et-col-actions,
.cits-wpel-instructor-questions table.et-table td.et-col-actions { width: 100px; }

.cits-wpel-instructor-questions .et-action-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cits-wpel-instructor-questions .et-action-inline-form {
    display: inline;
    margin: 0;
    padding: 0;
}
button.et-icon-btn.et-icon-btn--danger {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    background: #fff;
    background-image: none;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #b91c1c;
    cursor: pointer;
    line-height: 1;
    font: inherit;
    box-shadow: none;
}
button.et-icon-btn.et-icon-btn--danger:hover {
    background: #fef2f2;
    background-color: #fef2f2;
    border-color: #f87171;
}
button.et-icon-btn.et-icon-btn--danger svg {
    stroke: currentColor;
    width: 13px;
    height: 13px;
    display: block;
}

/* v1.8.31.4 — Responsive class-based column hiding for narrow viewports.
 * Hide order: Marks (least critical) → Type → Author. Keep Q# / Question
 * / Status / Actions always visible. */
@media (max-width: 820px) {
    .cits-wpel-instructor-questions table.et-table th.et-col-marks,
    .cits-wpel-instructor-questions table.et-table td.et-col-marks { display: none; }
}
@media (max-width: 680px) {
    .cits-wpel-instructor-questions table.et-table th.et-col-type,
    .cits-wpel-instructor-questions table.et-table td.et-col-type { display: none; }
}
@media (max-width: 560px) {
    .cits-wpel-instructor-questions table.et-table th.et-col-author,
    .cits-wpel-instructor-questions table.et-table td.et-col-author { display: none; }
}

/* v1.8.31.4 — Scope toggle above the filter card. Segmented pill pair,
 * matches the brand primary color on the active pill. */
.cits-wpel-instructor-questions .et-scope-toggle {
    display: inline-flex;
    gap: 0;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 3px;
    margin: 12px 0;
}
.cits-wpel-instructor-questions .et-scope-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    text-decoration: none;
    background: transparent;
    transition: color 120ms ease, background 120ms ease, box-shadow 120ms ease;
    line-height: 1.2;
}
.cits-wpel-instructor-questions .et-scope-pill:hover {
    color: #111827;
}
.cits-wpel-instructor-questions .et-scope-pill.is-active {
    background: #fff;
    color: var(--cits-wpel-primary-color, #6366f1);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    cursor: default;
}