/* ──────────────────────────────────────────────────────────────────────────
   TestGen · Studio theme — drop-in replacement for public/css/style.css

   This rewrites the visual layer while preserving every existing class name
   that the JavaScript depends on (.btn-*, .input-*, .tab-btn, .modal*, etc).
   You can swap this file in by replacing public/css/style.css.

   Aesthetic: warm parchment Studio direction.
     · Soft stone/sand neutrals + muted terracotta accent
     · Newsreader (display serif) + Geist (UI sans) via Google Fonts
     · Calmer borders, larger consistent type/button sizes
     · No saturated maroon
   ────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  --header-h: 56px;

  /* Brand · terracotta accent (replaces maroon) */
  --accent:        #BC6841;
  --accent-dk:     #9E4F2C;
  --accent-soft:   #F1DECF;
  --sage:          #6F7F62;
  --sage-soft:     #DCE3D2;
  --info:          #3E5C76;
  --info-soft:     #E6EDF5;

  /* Surfaces · warm parchment */
  --surface-0:     #FFFFFF;
  --surface-1:     #F4F1EA;
  --surface-2:     #E9E4D8;
  --surface-3:     #DCD5C3;

  /* Text */
  --text-primary:   #1B1E26;
  --text-secondary: #525663;
  --text-muted:     #9A9CA4;

  /* Borders */
  --border:    #E4DFD2;
  --border-dk: #C9C2AC;
  --rule-soft: #EDE9DD;

  /* Semantic */
  --correct: var(--accent);
  --success: var(--sage);
  --danger:  #C8584F;
  --danger-bg: #FBE9E7;
  --danger-border: #E0BBB4;

  /* Radii */
  --radius-sm:  6px;
  --radius:     8px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  18px;

  /* Toolbar height — shared so the Question Bank's .panel-toolbar and the Exam
     Workshop's .workshop-topbar render at the same height: 8px pad ×2 + 36px
     control (--control-h) + 1px bottom border = 53px. (Both bars now carry a
     bottom hairline only — no top rule.) */
  --toolbar-h:  53px;

  /* Control height — one crisp value for every text box / pill / filter across
     the Question Bank + Exam Workshop, so they pixel-snap identically rather
     than drifting (34.75 / 35 / 35.5) from line-height + padding differences. */
  --control-h:  36px;

  /* Page gutter — left/right inset for the top bars + the Question Bank's
     toolbar / subbar / data-table cells. 20px matches the Exam Workshop topbar's
     original gutter (the Bank was narrowed from 32 to match). The Workshop's
     other bands keep their own tighter originals (section-tabs 14, rail 18,
     outline 26) — they're not driven by this token. */
  --page-gutter: 20px;

  /* Secondary-band height — the Question Bank sub-bar (#bank-subbar) and the
     Exam Workshop section-tabs band (.wb-secpills) share this so they match.
     52px clears the 35px section tabs (35 + 8+8 padding + 1px border). */
  --subbar-h: 52px;

  /* Shadows */
  --shadow-xs: 0 1px 0 rgba(27,30,38,.02);
  --shadow-sm: 0 1px 2px rgba(27,30,38,.04), 0 0 0 1px rgba(27,30,38,.04);
  --shadow:    0 2px 6px rgba(27,30,38,.06), 0 0 0 1px rgba(27,30,38,.04);
  --shadow-md: 0 6px 16px -6px rgba(27,30,38,.14), 0 1px 0 rgba(27,30,38,.04);
  --shadow-lg: 0 24px 48px -16px rgba(27,30,38,.22);

  /* Type */
  --font:      'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  /* Legacy alias retained so any leftover references still resolve */
  --cu-maroon:    var(--accent);
  --cu-maroon-dk: var(--accent-dk);
  --cu-maroon-lt: var(--accent);
  --cu-gold:      var(--sage);
  --cu-gold-lt:   var(--sage-soft);
  --primary:      var(--accent);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scrollbar-gutter: auto; }

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--surface-1);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hidden { display: none !important; }
.muted  { color: var(--text-muted); }
.mono   { font-family: var(--font-mono); }

/* ── App header (dark navy → light cream) ────────────────────────────────── */
.app-header {
  background: var(--surface-0);
  border-bottom: 1px solid var(--border);
  height: var(--header-h);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: stretch;
  gap: 0;
}
.header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 24px;
  margin-right: 8px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
}
.header-home-link {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -.01em;
  text-decoration: none;
}
.header-home-link:hover { color: var(--accent); }
.header-title {
  font-size: 14px; font-weight: 500;
  color: var(--text-secondary); letter-spacing: -.005em;
}
.header-title:not(:empty)::before {
  content: "/";
  /* Equal space before and after the slash. With .app-crumbs gap:0, these
     symmetric margins are the only spacing between crumbs. */
  margin: 0 10px;
  color: var(--text-muted);
  font-weight: 400;
}
button.header-class-link {
  background: none; border: 0; padding: 0;
  font-family: inherit; cursor: pointer;
  transition: color .15s;
}
button.header-class-link:empty { display: none; }
button.header-class-link:hover { color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.header-dashboard-link, .header-signout-btn, .btn-logout {
  display: inline-flex; align-items: center;
  font-family: var(--font);
  font-size: 13px; font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  padding: 7px 13px;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
}
.header-dashboard-link:hover, .header-signout-btn:hover, .btn-logout:hover {
  background: var(--surface-2); color: var(--text-primary);
  border-color: var(--border-dk);
}

/* ── Tab nav (in header) ─────────────────────────────────────────────────── */
.tab-nav {
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: 4px;
  margin-left: 8px;
}
.tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  padding: 0 14px;
  font-size: 14px;
  font-family: var(--font);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color .12s;
  white-space: nowrap;
  letter-spacing: -.005em;
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* ── Main layout ─────────────────────────────────────────────────────────── */
.app-main {
  padding: 0;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }
#tab-preview.active {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--header-h) - 48px);
}

/* ── Panel toolbar ───────────────────────────────────────────────────────── */
.panel-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0;
  padding: 8px 32px;
}

/* Shared top-bar chrome for the Question Bank toolbar (.panel-toolbar) and the
   Exam Workshop top bar (.workshop-topbar). One definition for height, gutter,
   hairline, fill + box model so the two bars can't drift. Per-surface specifics
   (Bank's flex-wrap multi-row; the Workshop's stacking context) stay in their
   own scoped rules. Defined AFTER .panel-toolbar so it wins on equal specificity
   (overrides the generic 1px border + 8px 32px padding). */
.app-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--toolbar-h);
  box-sizing: border-box;
  padding: 8px var(--page-gutter);
  background: var(--surface-0);
  border: none;
  border-bottom: 1px solid var(--rule-soft);
}
.toolbar-left  { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.toolbar-right { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; flex-wrap: wrap; }
.panel-heading {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -.015em;
}

/* ── Bank subbar ─────────────────────────────────────────────────────────── */
.bank-subbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 32px;
  background: transparent;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border: 1px solid var(--border);
  border-left: none;
  border-bottom: none;
  /* Shared secondary-band height — every sub-bar (Bank, Pools detail, the
     Workshop browse column) matches the Workshop section-tabs band. */
  min-height: var(--subbar-h);
  gap: 10px;
}

/* When panel-toolbar is directly followed by bank-subbar, fuse them into
   one continuous card: square the touching corners, drop the gap, and let
   the panel-toolbar's bottom border serve as the divider. */
.panel-toolbar:has(+ .bank-subbar) {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: none;
}
.panel-toolbar + .bank-subbar {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.bank-subbar-left {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600;
  color: var(--accent-dk);
}
.bank-subbar-left.hidden { display: none; }
.bank-subbar-right {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto;
}
.bank-page-size-select {
  font-family: var(--font);
  font-size: 12.5px;
  /* Fixed width sized for the longest option ("500 / page") + the native
     dropdown arrow, so the box never clips and never resizes between values. */
  width: 108px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-0);
  cursor: pointer;
}
.bank-pagination { display: inline-flex; gap: 4px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 13.5px;
  font-family: var(--font);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: -.005em;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary {
  background: var(--text-primary);
  color: var(--surface-0);
  border-color: var(--text-primary);
  box-shadow: 0 1px 0 rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-primary:hover:not(:disabled) {
  background: #2A2E3A;
}

.btn-accent {
  background: var(--accent);
  color: var(--surface-0);
  border-color: var(--accent-dk);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.btn-accent:hover:not(:disabled) { background: var(--accent-dk); }

.btn-secondary {
  background: var(--surface-0);
  color: var(--text-primary);
  border-color: var(--border-dk);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--text-secondary);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--surface-1);
  color: var(--text-primary);
}

.btn-danger {
  background: var(--surface-0);
  color: var(--danger);
  border-color: var(--danger-border);
}
.btn-danger:hover:not(:disabled) {
  background: var(--danger-bg);
  color: var(--danger);
}

.btn-small { padding: 5px 11px; font-size: 12px; }
.btn-icon-only { padding: 7px 9px; }

/* Keep icon-only toolbar buttons (e.g. the Settings gear) the same height
   as adjacent text buttons. Without this, the SVG-only buttons render
   ~4px shorter than text+icon siblings because of line-height math. */
.panel-toolbar .btn:not(.btn-small):not(.btn-icon-only) { min-height: 36px; }

.link-btn {
  background: none; border: none; color: var(--accent);
  cursor: pointer; text-decoration: none;
  font-family: var(--font); font-size: inherit; font-weight: 500;
  text-underline-offset: 3px;
}
.link-btn:hover { color: var(--accent-dk); text-decoration: underline; }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.input-text, .input-select, .input-textarea, .input-search, .input-short,
.form-input {
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
  transition: border-color .12s, box-shadow .12s;
  line-height: 1.4;
}
.input-text:focus, .input-select:focus, .input-textarea:focus,
.input-search:focus, .input-short:focus, .form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input-text     { width: 100%; }
.input-select   { min-width: 130px; cursor: pointer; }
.input-search   { width: 220px; }
.input-short    { width: 120px; }
.input-textarea { width: 100%; resize: vertical; min-height: 80px; line-height: 1.55; }
.form-input-sm  { font-size: 13px; padding: 7px 10px; }

.option-input { resize: none; overflow: visible; }

.field-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}
.required { color: var(--accent); font-weight: 600; }

/* ── Form rows ───────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-group label {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.form-row { margin-bottom: 0px; }
.form-row.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.q-text-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.q-text-points-label {
  font-size: 13px; color: var(--text-secondary); font-weight: 500;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table-wrap {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.data-table thead th {
  text-align: left;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
  white-space: nowrap;
}
.data-table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
  color: var(--text-primary);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--surface-1); }
.data-table tbody tr.selected { background: var(--accent-soft); }

.sort-th { cursor: pointer; user-select: none; }
.sort-indicator { color: var(--text-muted); font-size: 10px; margin-left: 4px; }

.col-wide { min-width: 280px; }

/* Type pills inside the table */
.type-pill {
  display: inline-block;
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: .04em;
  background: var(--accent-soft);
  color: var(--accent-dk);
}
.type-pill[data-type="TF"], .type-pill.tf { background: var(--sage-soft); color: #536546; }
.type-pill[data-type="ES"], .type-pill.es { background: #E6E2D2; color: #71684D; }

/* Topic chips */
.topic-chip {
  display: inline-block;
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  margin-right: 4px;
}

/* Question Bank / Pools topics cell — chips never shrink. If the row can't
   fit them all, JS hides the overflow chips and reveals a trailing
   `.topic-chip-more` "+N" counter (see Utils.fitTopicChips). */
:is(#tab-bank, #tab-pools, #modal-pool-add) .topics-cell .topics-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
:is(#tab-bank, #tab-pools, #modal-pool-add) .topics-cell .topic-chip {
  flex: 0 0 auto;
  margin-right: 0;         /* gap handles spacing instead */
  white-space: nowrap;
}
:is(#tab-bank, #tab-pools, #modal-pool-add) .topics-cell .topic-chip.hidden { display: none; }
/* When the only visible chip is wider than its cell, ellipsis inside the
   pill instead of getting hard-clipped mid-word. Toggled by
   Utils.fitTopicChips after the per-chip fit pass. */
:is(#tab-bank, #tab-pools, #modal-pool-add) .topics-cell .topic-chip.topic-chip-clip {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(#tab-bank, #tab-pools, #modal-pool-add) .topics-cell .topic-chip-more {
  background: var(--surface-2);
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: .01em;
}

/* Question Bank actions cell (last column) — keep the comment/flag/more
   buttons on a single line. Without this they wrap when the topics column
   widens, doubling the row height. */
#tab-bank .data-table tbody td:last-child {
  white-space: nowrap;
}

/* ── Badge / count ───────────────────────────────────────────────────────── */
.badge-count {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: .04em;
}

/* ── Class card (dashboard) ──────────────────────────────────────────────── */
.class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.class-card {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 168px;
}
.class-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(188,104,65,.3);
}
.class-card-name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: -.01em;
  margin: 0 0 4px;
  line-height: 1.2;
}
.class-card-meta {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.class-card-count {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}
.class-card-actions {
  display: flex; justify-content: flex-end; gap: 4px;
  margin-bottom: 8px;
}
.class-card-actions button {
  background: none; border: none; border-radius: var(--radius-sm);
  padding: 5px; cursor: pointer; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.class-card-actions button:hover { background: var(--surface-1); color: var(--text-primary); }
.class-card-actions .btn-del:hover { color: var(--danger); }

.class-card-shared-by { font-size: 12px; color: var(--text-muted); margin: 2px 0 8px; }

/* ── Permission badge ────────────────────────────────────────────────────── */
.perm-badge, .perm-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.perm-badge.view,  .perm-pill.view  { background: var(--info-soft); color: var(--info); }
.perm-badge.exam,  .perm-pill.exam  { background: var(--sage-soft); color: #536546; }
.perm-badge.edit,  .perm-pill.edit  { background: var(--accent-soft); color: var(--accent-dk); }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 56px 24px;
  color: var(--text-muted);
}
.empty-state p {
  margin: 8px 0 0;
  font-size: 14px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 18px;
  color: var(--text-secondary);
}

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal, .modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(27,30,38,.32);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal.hidden, .modal-backdrop:not(.open) { display: none !important; }
.modal-backdrop.open { display: flex; }

.modal-box {
  background: var(--surface-0);
  border-radius: var(--radius-xl);
  padding: 28px 32px 24px;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  max-height: 90vh;
  overflow-y: auto;
}
.modal-box-sm { max-width: 420px; }
.modal-box-md { max-width: 600px; }
.modal-box-lg { max-width: 760px; }

.modal-header-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 14px; gap: 12px;
}
.modal-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: -.015em;
  margin: 0;
  line-height: 1.2;
}
.modal-hint {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin: 0 0 18px;
  line-height: 1.5;
}
.modal-close-btn {
  background: transparent; border: none; cursor: pointer;
  color: var(--text-muted); line-height: 1;
  padding: 0; border-radius: var(--radius-sm);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
}
.modal-close-btn:hover { background: transparent; color: var(--text-primary); }

.modal-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin: 0;
}

/* Inline message variants */
.inline-msg {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: var(--radius);
  margin-top: 8px;
  display: none;
}
.inline-msg.success {
  background: var(--sage-soft); color: #536546; border: 1px solid #C5D2B7;
}
.inline-msg.error {
  background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border);
}

/* ── Toast ───────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 2000;
  padding: 12px 18px; border-radius: var(--radius-md);
  background: var(--text-primary); color: var(--surface-0);
  font-size: 13.5px; font-weight: 500;
  box-shadow: var(--shadow-lg);
  max-width: 360px;
  animation: toastIn .25s ease;
}
.toast-success, .toast.success { background: var(--sage); }
.toast-error,   .toast.error   { background: var(--danger); }
.toast-warn,    .toast.warn    { background: #D8A878; color: #3D2F18; }
.toast.hidden  { display: none; }
@keyframes toastIn {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

/* ── Autosave indicator ──────────────────────────────────────────────────── */
.autosave-indicator {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font);
  font-size: 12.5px; color: var(--text-secondary);
  padding: 5px 10px; border-radius: var(--radius-sm);
}
.autosave-indicator::before {
  content: "";
  width: 7px; height: 7px; border-radius: 7px;
  background: var(--text-muted);
}
.autosave-indicator.autosave-saved::before { background: var(--sage); box-shadow: 0 0 0 3px rgba(111,127,98,.15); }
.autosave-indicator.autosave-dirty::before { background: var(--accent); }
.autosave-indicator.autosave-warn::before  { background: var(--danger); }

/* ── Preview / Saved exams (workspace tab) ───────────────────────────────── */
.preview-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
}
.toolbar-divider {
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 4px;
}
.preview-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 14px;
  flex: 1;
  min-height: 0;
}
.version-panel {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  overflow-y: auto;
}
.version-panel-header {
  padding: 0 4px 10px;
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 8px;
}
.version-panel-title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.version-list { display: flex; flex-direction: column; gap: 3px; }
.version-item {
  padding: 10px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.version-item:hover { background: var(--surface-1); }
.version-item.active {
  background: var(--surface-1);
  border-color: var(--border);
}
.version-item-name {
  font-size: 13.5px; font-weight: 500;
  color: var(--text-primary);
  display: block; margin-bottom: 4px;
}
.version-item-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: .04em;
}
.version-empty {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  padding: 24px 12px;
  font-style: italic;
}
.preview-content-wrap {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px;
  overflow: auto;
  position: relative;
}
.preview-content {
  max-width: 1340px;
  margin: 0 auto;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 56px 80px 72px;
  box-shadow: var(--shadow-lg);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11pt;
  color: #000;
  line-height: 1.5;
  min-height: 800px;
}
.preview-section-card { margin-bottom: 24px; }
.preview-q-text { font-weight: 600; margin-bottom: 8px; font-size: 13.5px; }
.preview-question-edited { background: var(--accent-soft); }
.preview-close-btn {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 32px; height: 32px; border-radius: 32px;
  background: var(--surface-0); border: 1px solid var(--border);
  cursor: pointer; font-size: 14px; color: var(--text-secondary);
}

/* ── New question chooser / settings menu / dropdowns ────────────────────── */
.new-question-wrap, .bank-settings-wrap, .dash-help-wrap {
  position: relative;
}
.new-question-menu, .bank-settings-menu, .dash-help-drop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  z-index: 50;
  overflow: hidden;
  padding: 6px;
}
.new-question-menu.hidden, .bank-settings-menu.hidden, .dash-help-drop:not(.open) { display: none; }
.dash-help-drop.open { display: block; }
.new-question-menu-item, .settings-menu-item,
.dash-help-item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  background: none;
  border: none;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  border-radius: var(--radius-sm);
}
.new-question-menu-item:hover, .settings-menu-item:hover,
.dash-help-item:hover { background: var(--surface-1); }

/* ── Columns modal — Apply/Cancel show/order editor ───────────────────────── */
/* Reference implementation of MODAL-STANDARD.md. Content-specific width lives
   here (a scoped class), never as an inline style on .modal-box. */
.tg-cols-modal-box {
  max-width: 380px;
  width: 100%;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  /* Overrides modal-box overflow so the editor list can scroll independently. */
  overflow: hidden !important;
}
/* Vertically center the title with the X (shared header uses flex-start).
   line-height:1 strips the serif's leading so the glyph block — not the
   padded line-box — is what centers against the X. */
.tg-cols-modal-box .modal-header-row { align-items: center; }
.tg-cols-modal-box .modal-title { line-height: 1; }
.tg-cols-editor-pane {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px 0;
}
/* §3: no divider; Reset pinned far-left, Apply far-right (self-governed —
   excluded from the general .modal-actions flex-end rule in app-inline.css). */
.tg-cols-modal-box .modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 0;
  border-top: none;
}
/* Reset is the tertiary action but stays full-strength black, not muted ghost-grey. */
.tg-cols-modal-box #tg-cols-reset { color: var(--text-primary); }
.tg-columns-head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  padding: 4px 12px 6px;
}
.tg-columns-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tg-col-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: default;
  user-select: none;
  font-size: 13px;
  color: var(--text-primary);
  border-radius: 0;
  transition: background 0.1s;
}
.tg-col-row:hover { background: var(--surface-1); }
.tg-col-row[draggable="true"] { cursor: grab; }
.tg-col-row[draggable="true"]:active { cursor: grabbing; }
.tg-col-grip {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.5;
}
.tg-col-vis {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--accent, #3b82f6);
}
.tg-col-lock {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--text-secondary);
  opacity: 0.55;
}
.tg-col-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tg-col-row.is-dragging {
  opacity: 0.45;
}
/* Drop insertion line — shows the exact gap the dragged row will land in. */
.tg-col-row.tg-drop-above::before,
.tg-col-row.tg-drop-below::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: var(--accent, #3b82f6);
  border-radius: 1px;
  pointer-events: none;
  z-index: 2;
}
.tg-col-row.tg-drop-above::before { top: -1px; }
.tg-col-row.tg-drop-below::after  { bottom: -1px; }
.tg-columns-reset {
  display: block;
  width: calc(100% - 24px);
  margin: 6px 12px 0;
  padding: 5px 0;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
}
.tg-columns-reset:hover {
  background: var(--surface-1);
  color: var(--text-primary);
}

/* ── Question type chooser cards ─────────────────────────────────────────── */
.new-question-chooser-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.new-question-chooser-card {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: left;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.new-question-chooser-card:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.new-question-chooser-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
  letter-spacing: -.01em;
}
.new-question-chooser-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ── Export option cards (in modals) ─────────────────────────────────────── */
.export-option-cards { display: grid; gap: 10px; margin: 14px 0; }
.export-option-card {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, box-shadow .15s;
  display: block;
}
.export-option-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.export-option-title {
  display: block;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.export-option-desc {
  display: block;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* ── Section/eyebrow styles (used inside cards & landing) ────────────────── */
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 12px;
}
.section-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 44px;
  letter-spacing: -.02em;
  color: var(--text-primary);
  line-height: 1.05;
  margin: 0 0 14px;
}
.section-sub {
  font-family: var(--font);
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 640px;
  margin: 0 auto;
}

/* ── AI review (Review extracted questions) ──────────────────────────────── */
.aig-review-topbar {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px;
}
.aig-review-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.aig-review-progress-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width .25s;
}
.aig-review-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .04em;
}

.air-card-approve { background: rgba(111,127,98,.06); border-color: var(--sage) !important; }
.air-card-reject  { background: rgba(200,88,79,.04); border-color: var(--danger) !important; }

/* ── File picker (import) ────────────────────────────────────────────────── */
.file-picker {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 28px 16px;
  text-align: center;
  background: var(--surface-1);
  transition: border-color .15s, background .15s;
}
.file-picker:hover, .file-picker.drag-over {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.file-picker-empty p {
  font-size: 14px; color: var(--text-secondary); margin-top: 12px;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ── Verify banner ───────────────────────────────────────────────────────── */
.verify-banner {
  background: #FBF1DD;
  border: 1px solid #E8C97A;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 13.5px;
  color: #5C4B12;
  margin: 0 0 16px;
}

/* ── Dragging affordance ─────────────────────────────────────────────────── */
.dragging { opacity: .45; }
.drag-source { background: var(--surface-1); }
.option-drop-indicator {
  height: 2px;
  background: var(--accent);
  margin: 2px 0;
  border-radius: 2px;
}
.section-drag-handle {
  color: var(--text-muted);
  cursor: grab;
  font-size: 14px;
}

/* ── Pool detail ─────────────────────────────────────────────────────────── */
.pool-q-text-cell { max-width: 460px; line-height: 1.5; }
.flagged { color: #C29B3B; }

/* ── Headings (generic) ──────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--text-primary);
}
h1 { font-size: 36px; line-height: 1.1; font-weight: 400; }
h2 { font-size: 26px; line-height: 1.15; }
h3 { font-size: 18px; line-height: 1.3; }

/* ── Utility ─────────────────────────────────────────────────────────────── */
.w-full { width: 100%; }
hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}
code {
  font-family: var(--font-mono);
  font-size: .92em;
  background: var(--surface-1);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

/* ── Focus-visible polish ────────────────────────────────────────────────── */
button:focus-visible, a:focus-visible,
.input-text:focus-visible, .input-select:focus-visible,
.input-textarea:focus-visible, .input-search:focus-visible,
.input-short:focus-visible, .form-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Learning Objectives tab ──────────────────────────────────────────
   Brought in line with Question Bank: a flush data toolbar, a bank-style
   sub-bar (bulk actions + count/page-size/pagination), then a full-bleed
   scrolling table with a sticky header and selection model. Ported from the
   design handoff (Workbench - Objectives.html); all rules scoped under
   #tab-learning-objectives so they don't bleed into other surfaces. */
#tab-learning-objectives.active {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-h));
  overflow: hidden;
}
html:has(#tab-learning-objectives.active),
body:has(#tab-learning-objectives.active) { overflow: hidden; height: 100vh; }
/* The shared .app-main is itself a scroll container — on this surface the
   section manages its own height + internal scroll, so app-main must not
   scroll (kills the outer 15px strip AND any outer shift on select). */
.app-main:has(#tab-learning-objectives.active) { overflow: hidden; scrollbar-gutter: auto; }

/* Slim data toolbar — search + primary actions on one flush row. Chrome matches
   the Question Bank's .app-bar exactly (gutter, height, gaps). */
#tab-learning-objectives > .lo-page-header {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--toolbar-h);
  background: var(--surface-0);
  padding: 8px var(--page-gutter);
  border-bottom: 1px solid var(--rule-soft);
  flex-shrink: 0;
}
#tab-learning-objectives > .lo-page-header > .panel-toolbar {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  gap: 10px;
}
#tab-learning-objectives > .lo-page-header .toolbar-right { display: flex; align-items: center; gap: 6px; }
/* Pin the action buttons to the shared control height so the LO header is the
   exact same 53px as the Question Bank's .app-bar (text buttons otherwise
   render ~0.9px taller than the --control-h pills and grow the row). */
#tab-learning-objectives > .lo-page-header .toolbar-right .btn { height: var(--control-h); }

/* Bank-style sub-bar: bulk actions (left) + count / page-size / pagination.
   Chrome matches #tab-bank #bank-subbar exactly (gutter, height, transparent
   bg); the bulk + pagination buttons reuse the Bank classes verbatim. */
#tab-learning-objectives > .lo-subbar {
  flex-shrink: 0;
  padding: 8px var(--page-gutter);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule-soft);
  border-radius: 0;
  min-height: var(--subbar-h);
  transition: background .2s;
}
#tab-learning-objectives > .lo-subbar.has-selection { background: var(--accent-soft); }
/* Count badge — mono/muted, identical to #tab-bank #bank-subbar #bank-count. */
#tab-learning-objectives > .lo-subbar #lo-count-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .08em;
}

/* Single scrolling table — identical chrome to the Question Bank: rows scroll,
   the scrollbar belongs to the table. */
#tab-learning-objectives > .lo-table-wrap {
  background: var(--surface-0);
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
}
/* First-run empty LO list → full-bleed hero: drop the toolbar + sub-bar so the
   page is a single centered onboarding moment. The hero fills via flex. */
#tab-learning-objectives.is-empty-hero > .lo-page-header,
#tab-learning-objectives.is-empty-hero > .lo-subbar { display: none; }
#tab-learning-objectives > #lo-hero-empty { flex: 1; min-height: 0; }

#lo-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
#lo-table .lo-col-check { width: 56px; }
#lo-table .lo-col-code  { width: 88px; }
#lo-table .lo-col-bloom { width: 150px; }
#lo-table .lo-col-q     { width: 104px; }
#lo-table .lo-col-act   { width: 96px; }

/* Header cells — identical to the bank's .data-table thead: sentence-case,
   weight 500, transparent, static (NOT sticky), flush --page-gutter inset. */
#lo-table thead th {
  background: transparent;
  font-family: var(--font);
  font-size: 11px; font-weight: 500;
  letter-spacing: -.003em;
  color: var(--text-muted);
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule-soft);
}
#lo-table thead th:first-child { padding-left: var(--page-gutter); }
#lo-table thead th:last-child  { padding-right: var(--page-gutter); text-align: right; }
#lo-table thead th .th-chk-cell { display: inline-flex; align-items: center; cursor: pointer; line-height: 0; }

/* Body cells — bank row rhythm (13px 16px), flush --page-gutter gutters. */
#lo-table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
  font-size: 13.5px;
}
#lo-table tbody td:first-child { padding-left: var(--page-gutter); }
#lo-table tbody td:last-child  { padding-right: var(--page-gutter); text-align: right; }
#lo-table tbody tr:hover { background: var(--surface-1); }
#lo-table tbody tr.row-selected { background: var(--accent-soft); }

/* Custom checkbox — real <input>, faithful to the Question Bank. The
   checkmark/dash are drawn via ::after, absolutely centered + out of flow, so
   toggling never changes the box's height and nudges the row. */
#tab-learning-objectives .data-table input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; flex: 0 0 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border);
  background-color: var(--surface-0);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .12s;
  position: relative; vertical-align: middle; margin: 0;
}
#tab-learning-objectives .data-table input[type="checkbox"]:checked { background-color: var(--accent); border-color: var(--accent); }
#tab-learning-objectives .data-table input[type="checkbox"]:checked::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 12 10 18 20 6'/></svg>") center/contain no-repeat;
}
#tab-learning-objectives .data-table input[type="checkbox"]:indeterminate { background-color: var(--accent); border-color: var(--accent); }
#tab-learning-objectives .data-table input[type="checkbox"]:indeterminate::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 9px; height: 2px; background: #fff; border-radius: 1px;
}
#lo-table .lo-code { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; color: var(--text-primary); }
#lo-table .lo-objective { color: var(--text-primary); line-height: 1.5; }
#lo-table .lo-qcount { font-family: var(--font-mono); color: var(--text-secondary); }
#lo-table .lo-qcount.is-zero { color: var(--text-muted); }
.lo-row-actions { display: flex; gap: 2px; justify-content: flex-end; }
.lo-row-actions .btn-icon {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted); cursor: pointer;
  transition: background .12s, color .12s;
}
.lo-row-actions .btn-icon:hover { background: var(--surface-2); color: var(--text-primary); }
.lo-row-actions .btn-icon.is-danger:hover { background: var(--danger-bg); color: var(--danger); }

/* Bloom badge — one calm neutral pill (NOT a rainbow); a 7×7 dot follows the
   earthy sequential ramp (cool sage → warm terracotta) used by the
   composition panel, so the two surfaces agree. */
.bloom-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 500;
  padding: 3px 9px 3px 8px;
  border-radius: 999px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  white-space: nowrap;
}
.bloom-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px;
  background: var(--bloom-dot, var(--text-muted)); flex-shrink: 0;
}
.bloom-badge[data-bloom="remember"]   { --bloom-dot:#6F7F62; }
.bloom-badge[data-bloom="understand"] { --bloom-dot:#8C9152; }
.bloom-badge[data-bloom="apply"]      { --bloom-dot:#B59A4D; }
.bloom-badge[data-bloom="analyze"]    { --bloom-dot:#C98A47; }
.bloom-badge[data-bloom="evaluate"]   { --bloom-dot:#BC6841; }
.bloom-badge[data-bloom="create"]     { --bloom-dot:#9E4F2C; }
.bloom-badge.is-none { color: var(--text-muted); }
.bloom-badge.is-none::before { display: none; }

#lo-empty-filtered { padding: 48px 24px; }

/* Keep the short serif modal titles on a single line. */
#modal-lo-edit .modal-title,
#modal-lo-import .modal-title,
#modal-lo-bulk-bloom .modal-title { white-space: nowrap; }

/* Editor LO picker (toggle chips) */
.lo-picker { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lo-picker-empty { font-size: 0.85rem; }
.lo-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-1); color: var(--text-muted); cursor: pointer;
  font-size: 0.82rem; font-weight: 600; line-height: 1.2;
}
.lo-chip:hover { background: var(--surface-2); }
.lo-chip.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.lo-chip .lo-chip-code { font-family: var(--font-mono); }

/* Shared "search + pill" token input (sections/token-input.js) — used by the
   workshop rail filters, the editor Learning Objectives field, and the bank
   topic/LO filters. De-scoped from the workshop so any surface can host it. */
.token-wrap { position: relative; }
.token-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  min-height: 34px; padding: 5px 6px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--surface-0);
}
.token-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.token {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px 2px 9px; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent-dk);
  font-family: var(--font); font-size: 11.5px; font-weight: 500;
}
.token-rm { display: inline-flex; align-items: center; border: 0; background: transparent; color: var(--accent-dk); cursor: pointer; padding: 1px; border-radius: 50%; }
.token-rm:hover { background: rgba(158, 79, 44, .14); color: var(--danger); }
.token-input { flex: 1; min-width: 84px; border: 0; outline: 0; background: transparent; font-family: var(--font); font-size: 13px; color: var(--text-primary); padding: 3px 2px; }
.token-input::placeholder { color: var(--text-muted); }
.token-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
  max-height: 220px; overflow-y: auto;
  display: flex; flex-direction: column;
  background: var(--surface-0); border: 1px solid var(--border-dk); border-radius: 8px;
  box-shadow: var(--shadow-lg); padding: 4px;
}
.token-opt { text-align: left; border: 0; background: transparent; padding: 7px 9px; border-radius: 6px; cursor: pointer; font-family: var(--font); font-size: 12.5px; color: var(--text-primary); }
.token-opt:hover, .token-opt.is-active { background: var(--surface-1); }
.token-empty { padding: 7px 9px; font-family: var(--font); font-size: 12px; color: var(--text-muted); }

/* AI-review LO chips: matched (plain pill) vs unmatched "+ CODE" create button */
.air-pill.air-lo-pill { font-family: var(--font); }
/* Code badge inside an LO pill — "[1.2]" prefix, slightly smaller + muted */
.lo-pill-code { font-family: var(--font-mono); font-size: 0.78em; font-weight: 600; opacity: 0.65; margin-right: 0.15em; }
button.air-lo-create {
  font: inherit; font-family: var(--font-mono); cursor: pointer;
  border: 1px dashed var(--accent); background: var(--accent-soft); color: var(--text);
}
button.air-lo-create:hover { background: var(--surface-2); }
button.air-lo-create:disabled { opacity: 0.5; cursor: default; }

/* Extracted-but-unknown LO codes — "+ CODE" suggestions rendered inside the
   rail's Learning Objectives card, under the picker (never the card header). */
.air-lo-suggest {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin-top: 6px;
}
.air-lo-suggest-label {
  font-family: var(--font); font-size: 11px; color: var(--text-muted);
  margin-right: 2px;
}
/* Cap visible suggestions at 2; the rest reveal when .is-expanded is toggled by
   the "+N more" button (display:contents keeps chips in the parent flex flow). */
.air-lo-chips { display: contents; }
.air-lo-suggest:not(.is-expanded) .air-lo-chips > .air-lo-create:nth-child(n+3) { display: none; }
.air-lo-more {
  font: inherit; font-family: var(--font); font-size: 11px;
  color: var(--accent); background: none; border: none; cursor: pointer;
  padding: 2px 4px; text-decoration: underline;
}
.air-lo-suggest.is-expanded .air-lo-more { display: none; }

/* LO code badges shown in the Objectives column of the question bank. */
.lo-badges { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-right: 5px; vertical-align: middle; }
.lo-badge {
  display: inline-block; padding: 0 5px; border-radius: 4px;
  background: var(--accent-soft); color: var(--text);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; line-height: 16px;
}

/* ── Interactive product tour (public/js/tour.js) ─────────────────────────
   The Tour module creates a fixed-position highlight ring + a floating
   tooltip card with Skip / Back / Next controls. Ported from preview.html's
   .sp-* sneak-peek pattern (originally lived here pre-Studio rewrite).        */
.tour-highlight {
  position: fixed;
  pointer-events: none;
  z-index: 9000;
  border-radius: var(--radius);
  box-shadow:
    0 0 0 9999px rgba(27, 30, 38, .55),
    0 0 0 2px rgba(255, 255, 255, .45);
  transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease;
}
.tour-tooltip {
  position: fixed;
  z-index: 9001;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 320px;
  padding: 18px;
  transition: top .22s ease, left .22s ease;
}
.tour-step-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.tour-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.tour-body  { font-size: 14px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 14px; }
.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-skip {
  font-family: inherit;
  font-size: 12px;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-right: auto;
}
.tour-skip:hover { color: var(--text-primary); }
.tour-back,
.tour-next {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.tour-back {
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.tour-back:hover { background: var(--surface-3); }
.tour-next {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent-dk);
}
.tour-next:hover { background: var(--accent-dk); }
.tour-key-hint {
  margin-top: 10px;
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: .01em;
}
@media (max-width: 700px) {
  .tour-tooltip { width: calc(100vw - 24px); max-width: 320px; }
}

/* ── Scoped modal-box sizing (MODAL-STANDARD.md §2 — no inline widths) ───── */
.canvas-export-modal-box { width: 480px; }
.duplicates-modal-box    { width: 860px; max-width: 95vw; }
/* pool-add-modal-box: existing rules in app-inline.css are MERGED here.
   The inline style previously on the element carried all these declarations. */
.pool-add-modal-box {
  width: 1100px;
  max-width: 96vw;
  min-width: 560px;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  min-height: 420px;
  resize: horizontal;
  overflow: hidden;
}

/* ── Edit-figure modal (features/visuals/figure-editor.js) ─────────────────── */
.fig-editor { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center;
  justify-content: center; background: rgba(0,0,0,0.55); }
.fig-editor.hidden { display: none; }
/* Fixed size (not max-height:auto) so resizing the grid via Rows/Cols scrolls
   the grid internally instead of growing the whole window. min() shrinks it on
   small screens; the cap keeps it from being a mostly-empty oversized slab. */
.fig-editor-panel { background: #fff; border-radius: 10px; width: min(1080px, 94vw);
  height: min(660px, 88vh); display: flex; flex-direction: column; box-shadow: 0 16px 48px rgba(0,0,0,0.3); }
.fig-editor-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid #e5e7eb; }
.fig-editor-head-actions { display: flex; align-items: center; gap: 8px; }
.fig-editor-title { font-weight: 600; }
.fig-editor-close { background: none; border: none; cursor: pointer; color: #444; padding: 4px; }
/* Body fills the panel; the whole modal never scrolls. The figure stays put
   (sticky) and only the data form scrolls if it's taller than the viewport. */
.fig-editor-body { flex: 1 1 auto; min-height: 0; display: grid;
  grid-template-columns: 1fr 440px; gap: 18px; padding: 18px; overflow: hidden; }
.fig-editor-canvas { display: flex; align-items: center; justify-content: center;
  align-self: stretch; min-height: 320px; }
.fig-editor-canvas svg { width: 100%; max-width: 560px; height: auto; }
.fig-editor-stage { position: relative; display: inline-block; }
/* Chart preview fills the fluid left column (the svg carries a small hardcoded
   width attr; width:100% scales it up, capped so it stays sane on wide modals). */
.fig-editor--chart .fig-editor-stage { display: block; width: 100%; text-align: center; }
.fig-editor-form { min-height: 0; overflow: auto; }
/* In the modal there's vertical room (the form scrolls), so stack the chart
   meta single-column — avoids the cramped/clipped 2-up label+input pairs. */
.fig-editor-form .vis-chart-meta { grid-template-columns: 1fr; }

/* Tables: a single full-width editable spreadsheet grid (no form, no SVG). The
   grid scrolls; the toolbar stays stuck to the bottom of the modal body. */
/* min-width:0 down the flex/grid chain is what keeps a wide grid from pushing
   the panel past the viewport — instead the grid scrolls inside the wrap. */
.fig-editor--table .fig-editor-body { grid-template-columns: minmax(0, 1fr); overflow: hidden; min-width: 0; }
.fig-editor--table .fig-editor-form { display: none; }
.fig-editor--table .fig-editor-canvas { flex-direction: column; align-items: stretch;
  position: static; min-height: 0; min-width: 0; padding: 0; gap: 0; }
.fig-editor-grid-wrap { flex: 1 1 auto; min-height: 0; min-width: 0; max-width: 100%;
  overflow: auto; padding-bottom: 12px; }
.fig-editor-grid { display: grid; gap: 0; border: 1px solid var(--border, #cbd5e1);
  border-right: 0; border-bottom: 0; width: max-content; min-width: 100%; }
.fig-editor-gridcell { min-width: 0; padding: 7px 9px; font: 13px Arial, sans-serif;
  border: 0; border-right: 1px solid var(--border, #cbd5e1);
  border-bottom: 1px solid var(--border, #cbd5e1); outline: none; background: #fff; }
.fig-editor-gridcell:focus { box-shadow: inset 0 0 0 2px #3b82f6; position: relative; z-index: 1; }
/* Header cells: works both as input+gridhead (table) and as a standalone div (chart). */
.fig-editor-gridhead { font-weight: 700; background: #f1f5f9; padding: 7px 9px;
  font: 700 13px Arial, sans-serif; border-right: 1px solid var(--border, #cbd5e1);
  border-bottom: 1px solid var(--border, #cbd5e1); }

/* Charts: interactive preview (left) + data grid pane (right) that scrolls with a
   bottom-stuck Type/Points toolbar — mirrors the table column layout. */
.fig-editor--chart .fig-editor-form { display: flex; flex-direction: column;
  min-height: 0; min-width: 0; overflow: hidden; padding: 0; }
.fig-editor--chart .fig-editor-typesel { width: auto; }
/* Sticky bottom toolbar: Title/Caption + Rows + Cols, each a labeled field with
   the label on top and the input below (labels align on one row, boxes on the
   next). Same layout for chart and table. */
.fig-editor-table-toolbar { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 16px;
  flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border, #e5e7eb); }
.fe-fld { display: flex; flex-direction: column; gap: 4px; }
.fe-fld--cap { flex: 1 1 200px; }
.fe-lbl { font-size: 12px; color: var(--text-muted, #666); }
.fe-fld .fig-editor-tbl-caption { width: 100%; padding: 5px 7px; font-size: 13px;
  border: 1px solid var(--border, #d0d0d0); border-radius: 6px; }
.fe-fld .fig-editor-dim { width: 56px; padding: 5px 6px; font-size: 13px;
  border: 1px solid var(--border, #d0d0d0); border-radius: 6px; text-align: center; }

@media (max-width: 760px) { .fig-editor-body { grid-template-columns: 1fr; overflow: auto; }
  .fig-editor-canvas { position: static; } }

/* Canvas overlays — inline text hotspots (Task 4) + drag handles (Task 5). */
.fig-editor-hotspots { position: absolute; inset: 0; pointer-events: none; }
.fig-editor-hotspot { position: absolute; pointer-events: auto; background: transparent;
  border: 1px dashed transparent; border-radius: 3px; cursor: text; padding: 0; }
.fig-editor-hotspot:hover { border-color: #3b82f6; background: rgba(59,130,246,0.08); }
.fig-editor-inline-input { position: absolute; z-index: 2; font: 12px Arial, sans-serif;
  text-align: center; border: 1px solid #3b82f6; border-radius: 3px; padding: 0 2px; }
.fig-editor-handle { position: absolute; pointer-events: auto; background: #3b82f6;
  border: 2px solid #fff; border-radius: 3px; cursor: ns-resize; padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3); opacity: 0.85; }
.fig-editor-handle:hover { opacity: 1; }
.fig-editor-tip { position: absolute; z-index: 3; width: 54px; font: 11px Arial, sans-serif;
  text-align: center; border: 1px solid #3b82f6; border-radius: 3px; padding: 1px 2px; background: #fff; }