/* Atomic components: buttons, forms, tables, modals, badges. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: var(--font-size-body);
  border: 1px solid transparent;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  white-space: nowrap;
}
.btn-primary { background: var(--color-accent); color: var(--color-text-inverse); border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.btn-secondary:hover { background: var(--color-surface-alt); }
.btn-ghost { background: transparent; color: var(--color-text); }
.btn-ghost:hover { background: var(--color-surface-alt); }
.btn-danger { background: var(--color-danger); color: var(--color-text-inverse); border-color: var(--color-danger); }
.btn-danger:hover { filter: brightness(0.93); }
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--font-size-sm); }
.btn[disabled], .btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Readability backstop for native controls that aren't wrapped in a
   themed container (.field / .filter-row / etc.). reset.css gives them
   `color: inherit` but no background, so a bare <select>/<input> would
   render as a white box with light inherited text in dark mode. Colors
   only — borders/padding are left to the component rules so this can't
   shift any existing layout. Checkboxes/radios/ranges keep native
   accent rendering (driven by color-scheme). */
select,
textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
  background-color: var(--color-surface);
  color: var(--color-text);
}

/* The OPEN <select> popup. Because every select in the app sets an explicit
   background-color, the browser stops using `color-scheme` to colour the
   option list and falls back to white — so in dark mode the list renders
   white with light, near-invisible text (the "Approve AI run" model picker
   was the visible symptom). Theming option/optgroup directly fixes the
   popup for every dropdown at once, in both Chromium and Firefox. */
option,
optgroup {
  background-color: var(--color-surface);
  color: var(--color-text);
}

/* Chrome paints autofilled fields with its own near-white background and
   dark text — a hard scheme mismatch on dark-mode login / forms. Pin the
   fill to the themed surface + text so autofill matches the rest. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--color-text);
  -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset;
  box-shadow: 0 0 0 1000px var(--color-surface) inset;
  caret-color: var(--color-text);
}

.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.field-row > .field { margin-bottom: 0; }
.field label { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: 500; }
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="date"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  min-height: 36px;
}
.field textarea { min-height: 96px; resize: vertical; }
.field .help { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.field .error-text { font-size: var(--font-size-sm); color: var(--color-danger); }

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.project-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.project-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.project-card h3 { font-size: var(--font-size-lg); }
.project-card p { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.project-card-meta {
  display: flex;
  justify-content: space-between;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: 999px;
  font-size: var(--font-size-sm);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  font-weight: 500;
}
.badge-accent { background: var(--color-accent-soft); color: var(--color-accent-hover); border-color: transparent; }
.badge-success { background: var(--color-success-soft); color: var(--color-success); border-color: transparent; }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: transparent; }

.empty-state {
  padding: var(--space-10) var(--space-6);
  text-align: center;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.empty-state h2 { color: var(--color-text); }

.banner {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}
.banner-info { background: var(--color-accent-soft); color: var(--color-accent-hover); border-color: transparent; }
.banner-success { background: var(--color-success-soft); color: var(--color-success); border-color: transparent; }

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.table th, .table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.table th { background: var(--color-surface-alt); font-weight: 600; font-size: var(--font-size-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: var(--color-surface-alt); }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  display: grid;
  place-items: center;
  padding: var(--space-4);
  z-index: 40;
}
.modal {
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
}
.modal h2 { margin-bottom: var(--space-4); }
.modal-wide { max-width: 760px; }

/* Phase 106 — a sticky action bar so Save/Create is always reachable without
   scrolling a tall modal. The negative margins bleed it to the modal's padded
   edges; the surface background lets content scroll cleanly behind it. */
.modal-actions-sticky {
  position: sticky;
  bottom: calc(-1 * var(--space-6));
  margin: var(--space-4) calc(-1 * var(--space-6)) calc(-1 * var(--space-6));
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.radio-group { display: flex; flex-direction: column; gap: var(--space-3); }
.radio-option {
  border: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-3);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.radio-option:hover { border-color: var(--color-accent); background: var(--color-surface-alt); }
.radio-option input { margin-top: 4px; }
.radio-option strong { display: block; margin-bottom: var(--space-1); }
.radio-option small { color: var(--color-text-muted); font-size: var(--font-size-sm); }

.topbar-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.document-detail {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-5);
}
@media (max-width: 960px) {
  .document-detail { grid-template-columns: 1fr; }
}
.document-content {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  white-space: pre-wrap;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.7;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}
.document-metadata {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  align-self: start;
  position: sticky;
  top: 72px;
}

.upload-zone {
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.upload-zone:hover, .upload-zone.is-drag { border-color: var(--color-accent); background: var(--color-accent-soft); }

.upload-progress-list {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.upload-progress-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}
.progress-bar {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 2px;
}
.progress-bar > span {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--color-accent);
  transition: width 120ms ease;
}

.toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.filter-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
.filter-row label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.filter-row input, .filter-row select {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}

.action-row { display: flex; align-items: center; gap: var(--space-2); }
.muted { color: var(--color-text-muted); }
.mono { font-family: var(--font-mono); font-size: var(--font-size-sm); }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-1); }

details.kv-edit { margin-top: var(--space-4); }
details.kv-edit summary { cursor: pointer; font-weight: 500; color: var(--color-text-muted); margin-bottom: var(--space-2); }

.storage-notice {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
  border-left: 3px solid var(--color-accent);
}

/* ---------- Phase 2: codebook tree ---------- */

.codebook-tree-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.codebook-tree {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  max-height: 100%;
  overflow-y: auto;
}
/* QA #3 — Account page themed tabs. */
.account-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.account-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
  cursor: pointer;
  margin-bottom: -1px;
}
.account-tab:hover { color: var(--color-text); }
.account-tab.is-active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  font-weight: 600;
}

.code-row {
  display: grid;
  grid-template-columns: 22px 14px 1fr auto auto;
  align-items: center;
  gap: var(--space-2);
  /* QA #8 — compact rows (dot · code · count · ⋯ on one line) so more codes
     fit on screen. Halved the vertical padding and tightened line-height. */
  padding: 3px 8px 3px 0;
  line-height: 1.25;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  color: var(--color-text);
  user-select: none;
}
.code-row:last-child { border-bottom: 0; }
.code-row:hover { background: var(--color-surface-alt); }
.code-row.is-active { background: var(--color-accent-soft); }
.code-row.is-dragging { opacity: 0.5; }
.code-row.is-drop-target { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.code-disclose {
  background: transparent;
  border: 0;
  font-size: 12px;
  color: var(--color-text-muted);
  cursor: pointer;
  width: 22px;
  text-align: center;
  padding: 0;
}
.code-disclose.is-leaf { cursor: default; color: var(--color-border-strong); }
.code-disclose:hover:not(.is-leaf) { color: var(--color-text); }
.code-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  display: inline-block;
}
.code-name-wrap {
  /* The wrapper occupies the 1fr column in .code-row. It's a flexbox
     so the description sibling can grow to fill leftover space and
     truncate cleanly with ellipsis, while the name stays at its
     natural width on the left. min-width: 0 is required so the
     flex children honour overflow:hidden inside a grid track. */
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  overflow: hidden;
}
.code-name { font-size: var(--font-size-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.code-description {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 0;
}
.code-count { justify-self: end; }
.code-menu-btn {
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.code-menu-btn:hover { background: var(--color-accent-soft); color: var(--color-accent-hover); }

.code-root-drop {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.code-root-drop.is-drop-target { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-soft); }
/* QA #17 — while a code is being dragged, make the root drop-zone obvious so
   it's discoverable that you can drop a code at the top level. */
.codebook-tree-wrap.codebook-dnd .code-root-drop {
  border-color: var(--color-accent);
  border-style: solid;
  color: var(--color-accent);
  background: var(--color-accent-soft);
}
/* QA #27 — bold parent codes (those with children) so hierarchy reads at a glance. */
.code-name.is-parent { font-weight: 600; }

.codebook-tree-host {
  margin-top: var(--space-4);
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  border-radius: var(--radius-md);
}

/* ---------- Coding workspace ---------- */

/* Org-admin announcement banner (web/js/lib/org-branding.js). Slim full-width
   strip above the app for the org's members; its height (--org-banner-h) is
   subtracted by the full-height coding workspace below. */
/* Org name shown next to the brand when an org admin enables it. */
.topbar-org-name {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding-left: var(--space-2);
  margin-left: var(--space-1);
  border-left: 1px solid var(--color-border);
  white-space: nowrap;
}

.org-banner {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  background: var(--color-accent, #1f5280);
  color: var(--color-text-inverse, #fff);
  font-size: var(--font-size-sm);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-coding {
  /* QA #7 — pin the workspace to the viewport so the three panes scroll
     independently and the codebook stays docked (doesn't scroll away with the
     document). Subtract the org banner height when present. */
  height: calc(100vh - var(--org-banner-h, 0px));
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--color-bg);
}
.coding-body {
  display: grid;
  grid-template-columns: 320px 1fr 360px;
  min-height: 0; /* QA #7 — let the 1fr track shrink so panes scroll internally */
  border-top: 1px solid var(--color-border);
}
@media (max-width: 1200px) {
  .coding-body { grid-template-columns: 280px 1fr 320px; }
}
@media (max-width: 960px) {
  .coding-body { grid-template-columns: 1fr; }
  .coding-left, .coding-right { border-right: 0; border-left: 0; border-bottom: 1px solid var(--color-border); }
}
/* Phase 88 — shell-less coding view embedded in a Coder-Canvas iframe window:
   no breadcrumb row, so the three-pane body (1fr) + status (auto) fill the frame. */
.page-coding.is-embed { height: 100vh; min-height: 0; grid-template-rows: 1fr auto; }
.page-coding.is-embed .coding-body { min-height: 0; }

.coding-left, .coding-right {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  padding: var(--space-4);
}
.coding-right { border-right: 0; border-left: 1px solid var(--color-border); }

.coding-left-inner, .coding-right-inner { display: flex; flex-direction: column; gap: var(--space-3); }
.coding-left-header, .coding-right-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.coding-left-header h2, .coding-right-header h2 {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.coding-left-search input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
}
.coding-left-footer { margin-top: auto; padding-top: var(--space-3); border-top: 1px dashed var(--color-border); }

.coding-text-host {
  background: var(--color-bg);
  overflow-y: auto;
  padding: var(--space-5) var(--space-6);
}
.coding-doc {
  max-width: 820px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.coding-doc-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.coding-doc-title { font-family: var(--font-serif); font-size: var(--font-size-lg); }
.coding-doc-spacer { flex: 1; }
.btn-group { display: inline-flex; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); }
.btn-group .btn {
  border: 0;
  border-radius: 0;
  /* Each button gets enough horizontal padding to fit its full label
     even in the active (filled-background) state. Previously the
     parent's overflow:hidden clipped the trailing characters of the
     last child when it carried the accent fill. */
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  min-width: max-content;
  flex: 0 0 auto;
}
.btn-group .btn:first-child {
  border-top-left-radius: calc(var(--radius-md) - 1px);
  border-bottom-left-radius: calc(var(--radius-md) - 1px);
}
.btn-group .btn:last-child {
  border-top-right-radius: calc(var(--radius-md) - 1px);
  border-bottom-right-radius: calc(var(--radius-md) - 1px);
}
.btn-group .btn.is-active { background: var(--color-accent); color: var(--color-text-inverse); }

.coding-text {
  padding: var(--space-6) var(--space-6);
  line-height: 1.7;
  font-family: var(--font-serif);
  color: var(--color-text);
  white-space: pre-wrap;
  outline: none;
}
.coding-text-inner { white-space: pre-wrap; }
.coding-text .seg { cursor: pointer; border-radius: 2px; transition: background 80ms ease; }
.coding-text .seg:hover { filter: brightness(1.05); }

/* PHASE-101 Fix E — make the active selection clearly visible in the coding
   pane, even over an existing (translucent) code highlight: a solid accent
   block stands out against the 28%-opacity code backgrounds, so the coder
   always sees exactly what they're about to code. */
.coding-text ::selection { background: var(--color-accent); color: var(--color-text-inverse); }
.coding-text ::-moz-selection { background: var(--color-accent); color: var(--color-text-inverse); }

/* PHASE-101 Fix F — the New-code modal's quoted selection preview, tinted with
   the chosen code colour (set inline + updated live in codebook.js). */
.code-selection-preview {
  padding: var(--space-2) var(--space-3);
  margin: 0;
  border-radius: var(--radius-sm);
  max-height: 8em;
  overflow: auto;
  font-style: normal;
  white-space: pre-wrap;
  color: var(--color-text);
}

/* PHASE-102 — code-builder: tokenise a coded selection into clickable chips to
   build the code name (prefix/suffix), add tags, or capture segment metadata. */
.code-builder { display: flex; flex-direction: column; gap: var(--space-2); }
.code-builder-modes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.code-builder-hint { font-size: var(--font-size-sm); margin-right: var(--space-1); }
.code-builder-sublabel { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.code-builder-empty { font-size: var(--font-size-sm); }
.code-builder-tokens, .code-builder-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.token-chip {
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  font-size: var(--font-size-sm);
  cursor: pointer;
}
.token-chip:hover { border-color: var(--color-accent); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px var(--space-2);
  font-size: var(--font-size-sm);
}
.chip-x { border: none; background: none; cursor: pointer; color: var(--color-text-muted); font-size: 1.1em; line-height: 1; padding: 0 2px; }
.chip-x:hover { color: var(--color-danger); }

/* PHASE-103 — related-coding deep-linking: a subtle mark on frequently-coded
   words + the popover card surfacing the related codes + example sentences. */
.related-marked {
  text-decoration: underline dotted var(--color-accent);
  text-underline-offset: 3px;
  cursor: help;
}
.related-card {
  position: absolute;
  z-index: 200;
  max-width: 360px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.related-card-head { font-weight: 500; }
.related-card-codes { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.related-card-seg { display: flex; align-items: center; gap: var(--space-2); }
.related-card-snippet { flex: 1; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* PHASE-100 — Question Identification panel: the questions asked + the answers
   given, each answer with a Jump affordance into the document. */
.qa-intro { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0 0 var(--space-3) 0; }
.qa-panel { display: flex; flex-direction: column; gap: var(--space-3); max-height: 50vh; overflow-y: auto; }
.qa-empty { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.qa-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-surface-alt);
}
.qa-question { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); }
.qa-q-ordinal {
  flex: none;
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-accent);
}
.qa-q-text { font-weight: 500; }
.qa-answers { display: flex; flex-direction: column; gap: var(--space-1); padding-left: var(--space-3); border-left: 2px solid var(--color-border); }
.qa-answer { display: flex; align-items: center; gap: var(--space-2); }
.qa-answer-text { flex: 1; font-size: var(--font-size-sm); color: var(--color-text); }
.qa-jump { flex: none; }
.qa-no-answer { font-size: var(--font-size-sm); color: var(--color-text-muted); font-style: italic; }
/* §100.7 — advisory AI grade badge on a question (answer-quality estimate). */
.qa-grade {
  flex: none;
  margin-left: auto;
  font-size: var(--font-size-xs, var(--font-size-sm));
  font-weight: 600;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  background: var(--color-info-soft);
  color: var(--color-info);
}
.qa-grade-addresses, .qa-grade-strong { background: var(--color-success-soft); color: var(--color-success); }
.qa-grade-partial, .qa-grade-adequate { background: var(--color-warning-soft); color: var(--color-warning); }
.qa-grade-offtopic, .qa-grade-gaps { background: var(--color-danger-soft); color: var(--color-danger); }

/* PHASE-100 — full panel: source/status badges, item actions, coverage banner,
   AI toggle, cross-document matrix. All token-only. */
.qa-select { flex: none; margin-right: var(--space-1); }
.qa-source {
  flex: none; font-size: var(--font-size-xs, var(--font-size-sm)); font-weight: 600;
  padding: 0 var(--space-1); border-radius: var(--radius-sm);
  background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-muted);
}
.qa-source-ai { background: var(--color-accent-soft); color: var(--color-accent); border-color: var(--color-accent-muted); }
.qa-source-questionnaire { background: var(--color-info-soft); color: var(--color-info); border-color: var(--color-info); }
.qa-status-proposed {
  flex: none; font-size: var(--font-size-xs, var(--font-size-sm)); font-style: italic;
  color: var(--color-accent); padding: 0 var(--space-1);
}
.qa-promoted { flex: none; font-size: var(--font-size-xs, var(--font-size-sm)); color: var(--color-success); font-weight: 600; }
.qa-rejected { text-decoration: line-through; color: var(--color-text-muted); }
.qa-item-rejected { opacity: 0.6; }
.qa-item-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.qa-ai-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-sm); cursor: pointer; }
.qa-footer { flex-wrap: wrap; gap: var(--space-2); }
.qa-coverage {
  border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2);
  background: var(--color-surface-alt);
}
.qa-coverage-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.qa-coverage-tag { font-size: var(--font-size-xs, var(--font-size-sm)); color: var(--color-text-muted); }
.qa-coverage-rationale { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.qa-matrix { display: flex; flex-direction: column; gap: var(--space-3); max-height: 60vh; overflow-y: auto; }
.qa-matrix-row { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.qa-matrix-q { display: flex; align-items: baseline; gap: var(--space-2); font-weight: 500; margin-bottom: var(--space-2); }
.qa-matrix-cells { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.qa-matrix-cell {
  flex: 1 1 220px; min-width: 200px; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: var(--space-2); background: var(--color-surface-alt);
}
.qa-matrix-doc { font-weight: 600; font-size: var(--font-size-sm); color: var(--color-accent); text-decoration: none; }
.qa-matrix-doc:hover { text-decoration: underline; }
.qa-matrix-preview { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-1); }

.coding-status {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-5);
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Floating toolbar near text selection */
.coding-float {
  position: absolute;
  z-index: 100;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  align-items: center;
  flex-wrap: wrap;
  max-width: 520px;
}
/* QA #6 — drag grip so the coder can move the toolbar off the text. */
.coding-float-grip {
  cursor: grab;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  user-select: none;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.coding-float-grip:hover { color: var(--color-text); }
.coding-float.is-dragging { cursor: grabbing; }
.coding-float.is-dragging .coding-float-grip { cursor: grabbing; }
.coding-float-recents { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.coding-float-recents .btn { white-space: nowrap; }
.coding-float-picker input {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  min-width: 180px;
}

/* Segment detail panel */
.segment-quote {
  background: var(--color-surface-alt);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-3);
  font-family: var(--font-serif);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-body);
}
.segment-codes-list { display: flex; flex-direction: column; gap: var(--space-2); padding: 0; list-style: none; }
.segment-code-item {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
}
.segment-code-name { font-weight: 500; }
.segment-annotation { display: flex; flex-direction: column; gap: var(--space-2); }
.segment-annotation label { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.segment-annotation textarea {
  min-height: 84px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  resize: vertical;
}

.meta-row { display: grid; grid-template-columns: 130px 1fr; gap: var(--space-2); padding: var(--space-1) 0; }
.meta-k { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.meta-v { font-size: var(--font-size-body); }

/* ---------- Memo system (Phase 3) ---------- */

.memo-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--space-4);
}

.memo-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.memo-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}
.memo-card-head h3 { font-size: var(--font-size-lg); margin: 0; }

.memo-target {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.memo-preview {
  font-family: var(--font-serif);
  line-height: 1.6;
  color: var(--color-text);
  max-height: 220px;
  overflow: hidden;
  position: relative;
}
.memo-preview h3 { font-family: var(--font-sans); font-size: var(--font-size-lg); margin: var(--space-2) 0 var(--space-1); }
.memo-preview p { margin: var(--space-2) 0; }
.memo-preview ul, .memo-preview ol { margin: var(--space-2) 0; padding-left: var(--space-5); }
.memo-preview a { color: var(--color-accent); }

.memo-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-surface-alt);
}

.memo-editor {
  min-height: 220px;
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-serif);
  line-height: 1.6;
  outline: none;
}
.memo-editor:focus { box-shadow: 0 0 0 2px var(--color-focus); border-color: var(--color-focus); }
.memo-editor p { margin: 0 0 var(--space-2); }
.memo-editor h3 { font-family: var(--font-sans); font-size: var(--font-size-lg); margin: var(--space-3) 0 var(--space-2); }
.memo-editor ul, .memo-editor ol { padding-left: var(--space-5); margin: var(--space-2) 0; }
.memo-editor a { color: var(--color-accent); }

.memo-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  min-height: 36px;
}
.memo-tags input {
  border: 0;
  background: transparent;
  color: var(--color-text);
  flex: 1;
  min-width: 120px;
  outline: none;
}
.memo-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.btn-inline-x {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: var(--font-size-sm);
  padding: 0 var(--space-1);
}
.btn-inline-x:hover { color: var(--color-danger); }

/* Journal ------------------------------------------------------ */

.journal-host { display: flex; flex-direction: column; gap: var(--space-4); }
.journal-entry {
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  border-top: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.journal-entry-head {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: var(--space-3);
  align-items: baseline;
}
.journal-entry-head time {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}
.journal-entry-head h3 { font-size: var(--font-size-lg); margin: 0; }

.journal-quickadd {
  padding: var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.journal-quickadd h3 { margin: 0 0 var(--space-2); }

/* Audit trail -------------------------------------------------- */

.audit-table td { vertical-align: top; }
.audit-row-actions { display: flex; gap: var(--space-2); white-space: nowrap; }
.audit-table .mono { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.audit-details-pre {
  background: var(--color-surface-alt);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-text);
  margin: 0;
}
.audit-pager {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  padding: var(--space-4) 0;
}

/* Wide / tall modal variants used by the memo editor */
.modal.modal-tall { max-height: 90vh; overflow-y: auto; }

/* Search & query (Phase 4) ------------------------------------- */

.search-page { display: flex; flex-direction: column; gap: var(--space-4); }
.search-toolbar { display: flex; flex-direction: column; gap: var(--space-3); }
.search-toolbar-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}
.search-input {
  flex: 1 1 320px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  min-height: 38px;
  font-size: var(--font-size-body);
}
.search-input:disabled { background: var(--color-surface-alt); color: var(--color-text-muted); }

.search-logic-row { display: flex; gap: var(--space-3); align-items: center; }
.search-logic-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  font-size: var(--font-size-sm);
}
.search-logic-help { font-size: var(--font-size-sm); }

.search-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.search-summary-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
}
.search-summary-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }

.search-body {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 1024px) {
  .search-body { grid-template-columns: 1fr; }
}

.search-filters {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.search-filters.is-collapsed { padding: var(--space-2) var(--space-3); }
.search-filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-filters-header h2 { font-size: var(--font-size-lg); margin: 0; }
.search-filters-body { display: flex; flex-direction: column; gap: var(--space-3); }
.search-filters .field { margin-bottom: 0; }
.search-filters select,
.search-filters input[type="date"] {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  min-height: 36px;
}

.search-code-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
  margin-top: var(--space-2);
}
.search-code-picker h3 { margin: 0; font-size: var(--font-size-body); }
.search-code-summary { font-size: var(--font-size-sm); }

.search-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 200px;
}
.search-section { display: flex; flex-direction: column; gap: var(--space-3); }
.search-section h2 { font-size: var(--font-size-lg); margin: 0; color: var(--color-text-muted); }

.search-doc-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.search-doc-head { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.search-doc-title { font-weight: 600; color: var(--color-text); text-decoration: none; }
.search-doc-title:hover { color: var(--color-accent); }

.search-hit {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.search-hit-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}
.search-hit-title { font-weight: 600; color: var(--color-text); text-decoration: none; }
.search-hit-title:hover { color: var(--color-accent); }
.search-hit-link { color: var(--color-accent); text-decoration: none; font-size: var(--font-size-sm); }
.search-hit-link:hover { text-decoration: underline; }

.search-snippet {
  display: block;
  color: inherit;
  text-decoration: none;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}
.search-snippet mark,
.search-context-segment {
  background: var(--color-accent-soft);
  color: var(--color-text);
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 600;
}

.search-context {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}
.search-context-side { white-space: pre-wrap; }
.search-annotation {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-accent-soft);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-style: italic;
  font-size: var(--font-size-sm);
}

.search-code-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* Codebook checkbox (selectable mode) — Phase 4 */
.code-row .code-select {
  margin-right: var(--space-2);
  cursor: pointer;
}

/* Transient highlight for a search-result jump in the coding workspace */
.is-search-highlight {
  background: var(--color-warning-soft);
  outline: 2px solid var(--color-warning);
  border-radius: var(--radius-sm);
  transition: background 1.5s ease, outline-color 1.5s ease;
  animation: search-highlight-pulse 2.5s ease forwards;
}
@keyframes search-highlight-pulse {
  0%   { background: var(--color-warning-soft); outline-color: var(--color-warning); }
  60%  { background: var(--color-warning-soft); outline-color: var(--color-warning); }
  100% { background: transparent; outline-color: transparent; }
}

.btn-ghost.is-active { background: var(--color-accent-soft); color: var(--color-accent-hover); }

/* Badge variants for Phase 6 collaboration. */
.badge-muted { background: var(--color-surface-alt); color: var(--color-text-muted); border-color: var(--color-border); }
.badge-danger { background: var(--color-danger-soft); color: var(--color-danger); border-color: transparent; }

/* Phase 109B — protocol badge + the Word-like data-collection editor. */
.badge-protocol { background: var(--color-accent-soft); color: var(--color-accent-hover); border-color: transparent; font-weight: 600; }
.rte { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.rte-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-alt); }
.rte-btn { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-sm); padding: 2px 8px; cursor: pointer; font-size: var(--font-size-sm); color: var(--color-text); }
.rte-btn:hover { background: var(--color-surface-alt); }
.rte-editor { min-height: 420px; padding: var(--space-4); outline: none; overflow: auto; background: var(--color-surface); line-height: 1.6; }
.rte-editor:focus { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.rte-table { border-collapse: collapse; width: 100%; margin: var(--space-2) 0; }
.rte-table td, .rte-table th { border: 1px solid var(--color-border); padding: 4px 8px; }

/* Phase 109C — a backdrop click on a no-dismiss modal (the code editor) nudges it. */
@keyframes modal-nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.modal.modal-nudge { animation: modal-nudge 180ms ease-in-out; }
@media (prefers-reduced-motion: reduce) { .modal.modal-nudge { animation: none; } }

/* Assignment dashboard (Phase 6). */
.page-assignments { padding: var(--space-6); }
.assignments-main { max-width: 1100px; }
.my-assignments { margin-top: var(--space-5); }
.assign-pick-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 200px; overflow-y: auto; }
.assign-pick-item { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
.assign-pick-item:hover { background: var(--color-surface-alt); }
.table-scroll { overflow-x: auto; }
.assignments-icr-link { padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }

/* ICR dashboard and detail (Phase 6). */
.page-icr, .page-icr-detail { padding: var(--space-6); }
.icr-main, .icr-detail-main { max-width: 1100px; }
.icr-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
}
.icr-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.icr-stat-label { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.icr-stat-value { font-size: var(--font-size-xl); font-weight: 600; }
.icr-stat-interp { font-size: var(--font-size-sm); }
.icr-resolved td { background: var(--color-success-soft); }
.icr-disagree td { background: var(--color-danger-soft); }

/* Multi-coder filter select in coding toolbar (Phase 6). */
.coder-filter-select {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

/* Modal form group. */
.form-group { margin-bottom: var(--space-4); }
.form-group label { display: block; font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: 500; margin-bottom: var(--space-1); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }

/* Visualizations (Phase 7). */
.page-viz { padding: 0; }
.viz-main { padding: var(--space-6); max-width: 1200px; margin: 0 auto; }
.viz-header { margin-bottom: var(--space-4); }
.viz-header h1 { font-size: var(--font-size-xl); margin-bottom: var(--space-1); }
.viz-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.viz-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.viz-tab {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--font-size-body);
  font-weight: 500;
}
.viz-tab:hover { background: var(--color-surface-alt); }
.viz-tab.is-active {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}
.viz-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}
.viz-filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
}
.viz-filter-label { color: var(--color-text-muted); font-weight: 500; }
.viz-filter select {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  min-width: 180px;
}
.viz-export-bar {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-end;
}
.viz-export-bar:empty { display: none; }

.viz-chart-host {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  min-height: 400px;
}
.viz-chart-wrap {
  width: 100%;
  overflow-x: auto;
}
.viz-chart-wrap canvas { display: block; }
.viz-chart-wrap svg { display: block; max-width: 100%; height: auto; color: var(--color-text); }
.viz-wordcloud canvas { background: var(--color-surface-canvas); border-radius: var(--radius-sm); }

.viz-crumb-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) 0 var(--space-3);
  font-size: var(--font-size-sm);
}
.viz-crumb {
  background: transparent;
  border: 0;
  color: var(--color-accent);
  cursor: pointer;
  padding: 0;
  font-size: var(--font-size-sm);
}
.viz-crumb:hover { text-decoration: underline; }
.viz-crumb.is-current { color: var(--color-text); font-weight: 500; cursor: default; }

.viz-multi summary {
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 180px;
  justify-content: space-between;
}
.viz-multi-list {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 240px;
  overflow-y: auto;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.viz-multi-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  padding: var(--space-1);
}
.viz-multi-item:hover { background: var(--color-surface-alt); }

/* ---------- Phase 8: export center ---------- */
.export-scope-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-surface);
}
.export-scope-panel h2 { margin-bottom: var(--space-2); }
.export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
}
.export-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.export-card h3 {
  font-size: var(--font-size-body);
  margin: 0;
}
.picker-list {
  /* QA #29 — show more codes before scrolling in the code-picker. */
  max-height: min(60vh, 560px);
  overflow-y: auto;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.picker-item {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  cursor: pointer;
  padding: var(--space-1);
}
.picker-item:hover { background: var(--color-surface-alt); }
.toggle {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  cursor: pointer;
}

/* Phase 19 — Real-time presence. Avatar stack lives in the document
   coding toolbar; the focus marker is a left-edge bracket on segments
   another live viewer has opened. */
.coding-presence-host {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-2);
}
.presence-stack {
  display: inline-flex;
  align-items: center;
}
.presence-stack > * + * { margin-left: -6px; }
.presence-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--color-text-inverse, #fff);
  font-size: 11px;
  font-weight: 600;
  border: 2px solid var(--color-surface);
  letter-spacing: 0.5px;
  user-select: none;
  cursor: default;
  transition: opacity 120ms ease;
}
.presence-avatar.is-stale { opacity: 0.6; }
.presence-avatar-sm { width: 22px; height: 22px; font-size: 10px; }
.presence-overflow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: 11px;
  font-weight: 600;
  border: 2px solid var(--color-surface);
  cursor: pointer;
}
.presence-overflow:hover { background: var(--color-border); }
.presence-overflow-popover {
  z-index: 200;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
  min-width: 200px;
  max-height: 60vh;
  overflow-y: auto;
}
.presence-overflow-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}
.presence-overflow-row:hover { background: var(--color-surface-alt); }
.presence-overflow-name { font-weight: 500; }
.presence-overflow-meta { font-size: var(--font-size-sm); }

/* Focus marker: tiny coloured pill anchored to the start of the
   segment span. Doesn't disturb text flow because the .seg span is
   the relative parent. */
.coding-text .seg { position: relative; }
.presence-focus-marker {
  position: absolute;
  left: -6px;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 2px;
  pointer-events: none;
}

/* Phase 25 — AI usage meter on the Account page. */
.ai-usage-bar {
  height: 10px;
  border-radius: 5px;
  background: var(--color-surface-alt);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.ai-usage-bar-fill {
  height: 100%;
  background: var(--color-accent);
  transition: width 240ms ease;
}
.ai-usage-bar.tone-warn .ai-usage-bar-fill { background: var(--color-warning); }
.ai-usage-bar.tone-danger .ai-usage-bar-fill { background: var(--color-danger); }


/* Phase 23 — methodology phase ribbons. Stack is sticky to the
   workspace shell; ribbons pile vertically with 8px gaps.  Pills
   are rounded squircles colored from --phase-color so the
   methodology palette controls visual identity. */
.phase-ribbon-host {
  position: sticky;
  top: 56px; /* below the topbar */
  z-index: 4;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.phase-ribbon-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  max-height: 35vh;
  overflow-y: auto;
}
.phase-ribbon-collapse {
  align-self: flex-end;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2px var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}
.phase-ribbon-collapse:hover { background: var(--color-surface-alt); }
.phase-ribbon {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.phase-ribbon-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.phase-ribbon-name { font-weight: 600; }
.phase-ribbon-meta { font-size: var(--font-size-sm); }
.phase-ribbon-pills {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.phase-pill {
  --phase-color: #888;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  border-radius: 999px;
  font-size: var(--font-size-sm);
  border: 2px solid var(--phase-color);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: background 120ms ease, opacity 120ms ease;
  /* Pills size to their text. The phase-ribbon-pills row uses
     flex-wrap so pills break to the next line if the row runs out
     of horizontal space — better than truncating the phase name,
     which is the user's anchor for what each step does. */
  white-space: nowrap;
  flex-shrink: 0;
}
.phase-pill[disabled] { cursor: default; opacity: 0.85; }
.phase-pill:hover:not([disabled]) { background: color-mix(in srgb, var(--phase-color) 18%, transparent); }
.phase-pill .phase-pill-num {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--phase-color);
  color: var(--color-text-inverse);
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
}
.phase-pill .phase-pill-name { font-size: var(--font-size-sm); }
.phase-pill.is-past { background: color-mix(in srgb, var(--phase-color) 18%, transparent); opacity: 0.65; }
.phase-pill.is-current { background: color-mix(in srgb, var(--phase-color) 28%, transparent); font-weight: 600; }
.phase-pill.is-future { /* default outline-only */ }
.phase-pill.is-skipped .phase-pill-name { text-decoration: line-through; }
.phase-arrow {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2px var(--space-2);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.phase-arrow:hover:not([disabled]) { background: var(--color-surface-alt); }
.phase-arrow[disabled] { opacity: 0.4; cursor: not-allowed; }

.phase-ribbon-summary {
  padding: var(--space-2) var(--space-5);
}
.phase-ribbon-summary-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.phase-ribbon-summary-toggle:hover { text-decoration: underline; }
.phase-pill-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
}
.phase-ribbon-summary-extra { font-size: var(--font-size-sm); }

/* Methodology multi-pick widget for the New Project + Project info dialogs. */
.methodology-multipick {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.methodology-multipick-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.methodology-multipick-row:hover { background: var(--color-surface-alt); }
.methodology-multipick-row.is-selected { border-color: var(--color-accent); background: var(--color-accent-soft); }
.methodology-multipick-author { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Phase 25 — estimate chip rendered inline next to AI buttons. */
.ai-est-chip {
  display: inline-block;
  padding: 1px 6px;
  margin-left: var(--space-1);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  vertical-align: middle;
}
.ai-est-chip.local { color: var(--color-success); border-color: currentColor; }
.ai-est-chip.blocked {
  color: var(--color-danger);
  border-color: currentColor;
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
}
.ai-est-chip-host { display: inline-block; }

/* Phase 25 — post-call usage line under AI result panels. */
.ai-usage-line {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
  font-size: var(--font-size-sm);
}
/* Phase 26 — highlight cache savings inside the usage line. */
.ai-cache-saved { color: var(--color-success); font-weight: 500; }

/* Phase 29 — async batch progress bar in the AI batch panel. */
.ai-batch-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-surface-alt, #ececec);
  border-radius: 4px;
  overflow: hidden;
  margin: var(--space-2, 8px) 0;
}
.ai-batch-progress-fill {
  height: 100%;
  background: var(--color-accent, #4a6cf7);
  transition: width 200ms ease-out;
}
.ai-batch-actions {
  display: flex;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
  margin-bottom: var(--space-2, 8px);
}

/* Phase 29 — Account → Usage dashboard. */
.page-account-usage {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-5, 32px);
}
.page-account-usage .usage-controls {
  display: flex;
  gap: var(--space-3, 12px);
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: var(--space-4, 24px);
}
.page-account-usage .usage-controls label {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-sm, 14px);
  gap: var(--space-1, 4px);
}
.page-account-usage .usage-summary-row {
  display: flex;
  gap: var(--space-3, 16px);
  flex-wrap: wrap;
  align-items: baseline;
  margin-bottom: var(--space-3, 16px);
}
.page-account-usage .usage-summary-row .lbl {
  color: var(--color-text-muted, #777);
  margin-left: var(--space-3, 16px);
}
.page-account-usage .usage-summary-row .lbl:first-child {
  margin-left: 0;
}
.page-account-usage .usage-chart-host {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: 6px;
  padding: var(--space-3, 16px);
  margin-bottom: var(--space-4, 24px);
}
.page-account-usage .usage-chart {
  width: 100%;
  height: auto;
  display: block;
}
.page-account-usage .usage-rollups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4, 24px);
}
.page-account-usage .usage-rollup {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: 6px;
  padding: var(--space-3, 16px);
}
.page-account-usage .usage-rollup h3 {
  margin-top: 0;
  font-size: var(--font-size-md, 15px);
}
.page-account-usage .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm, 14px);
}
.page-account-usage .data-table td {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  border-bottom: 1px solid var(--color-border, #efefef);
}
.page-account-usage .data-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Phase 38 — trial banner. Renders for trial / read_only / archived
   account states. Sits between the topbar and the page main area. */
.trial-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-2, 8px) var(--space-4, 24px);
  border-bottom: 1px solid var(--color-border, #e5e5e5);
  font-size: var(--font-size-sm, 14px);
}
.trial-banner-info { background: var(--color-info-soft); color: var(--color-text); }
.trial-banner-warn { background: var(--color-warning-soft); color: var(--color-text); }
.trial-banner-danger { background: var(--color-danger-soft); color: var(--color-text); }
.trial-banner .trial-banner-copy { flex: 1; }
.trial-banner-dismiss {
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
}
.trial-banner-dismiss:hover { opacity: 1; }

/* Phase 38 — tier picker on the Account page. Three side-by-side
   cards. */
.tier-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3, 12px);
  margin-top: var(--space-3, 12px);
}
.tier-card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: 6px;
  padding: var(--space-3, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}
.tier-card.tier-card-current {
  border-color: var(--color-accent, #4a6cf7);
  box-shadow: 0 0 0 2px var(--color-accent-soft, #eef2ff);
}
.tier-card-name { font-weight: 600; font-size: var(--font-size-md, 15px); }
.tier-card-price { font-size: var(--font-size-lg, 18px); font-weight: 600; }
.tier-card-included { color: var(--color-text-muted, #777); font-size: var(--font-size-sm, 14px); }
.tier-card-models {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tier-card-models .badge {
  background: var(--color-surface-alt, #f4f4f4);
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: var(--font-size-xs, 12px);
}
.tier-card-cta { margin-top: auto; }

/* Phase 38 — onboarding nudge panel. Fixed-position right edge.
   Trial users only; auto-collapses when all milestones done. */
.onboarding-nudge {
  position: fixed;
  right: var(--space-3, 16px);
  bottom: var(--space-4, 24px);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: 8px;
  padding: var(--space-3, 16px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  z-index: 50;
  width: 260px;
  font-size: var(--font-size-sm, 14px);
}
.onboarding-nudge h4 {
  margin: 0 0 var(--space-2, 8px) 0;
  font-size: var(--font-size-md, 15px);
}
.onboarding-nudge ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.onboarding-nudge li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.onboarding-nudge li.done {
  color: var(--color-text-muted, #777);
  text-decoration: line-through;
}
.onboarding-nudge-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--color-text-muted, #777);
}

/* Phase 31 — license store landing page. */
.store-page { min-height: 100vh; background: var(--color-bg, #fafafa); }
.topbar-public {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.store-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
}
.store-sku-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.store-sku-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.store-sku-card.store-sku-lifetime {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}
.store-sku-card.store-sku-trial {
  border-style: dashed;
}
.store-sku-card h3 { margin: 0; font-size: var(--font-size-lg); }
.store-sku-price {
  font-size: var(--font-size-xl, 22px);
  font-weight: 700;
  color: var(--color-text);
}
.store-sku-price-discounted {
  display: flex;
  align-items: baseline;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
}
.store-sku-price-was {
  font-size: var(--font-size-md, 16px);
  font-weight: 500;
  color: var(--color-text-muted, #6b7280);
  text-decoration: line-through;
}
.store-sku-price-now {
  color: var(--color-accent, #2563eb);
}
.store-sku-discount-badge {
  display: inline-block;
  margin-top: var(--space-1, 4px);
  padding: 2px 8px;
  border-radius: var(--radius-pill, 999px);
  background: var(--color-accent-soft, rgba(37, 99, 235, 0.12));
  color: var(--color-accent, #2563eb);
  font-size: var(--font-size-sm, 13px);
  font-weight: 600;
}
.store-sku-tagline {
  font-size: var(--font-size-sm);
  min-height: 2.4em;
  margin: 0;
}
.store-sku-meta {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.store-sku-cta { margin-top: auto; }

.store-trial,
.store-check {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.store-trial h2,
.store-check h2 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-lg);
}
.store-trial-form {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
  margin: var(--space-3) 0;
}
.store-trial-form input {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  min-height: 36px;
}

/* Phase 31 — license panel on the Account page. */
.license-panel-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.license-panel-row:last-child { border-bottom: none; }
.license-panel-label { color: var(--color-text-muted); min-width: 120px; }

/* Phase 38 — first-action panel on the empty workspace. */
.first-action-panel {
  text-align: left;
  max-width: 640px;
  margin: var(--space-5) auto;
}
.first-action-list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0 0;
}
.first-action-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  background: var(--color-surface);
}
.first-action-item.is-active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-soft, rgba(37, 99, 235, 0.12));
}
.first-action-step {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.first-action-body {
  flex: 1;
}
.first-action-body p {
  margin: var(--space-1) 0 var(--space-2) 0;
}

/* Phase 38 — methodology wizard modal. */
.methodology-wizard {
  min-width: 480px;
}
.methodology-wizard h2 {
  margin-top: 0;
}
.methodology-wizard-answer {
  width: 100%;
}
.methodology-wizard-result h3 {
  margin-top: 0;
}

/* Phase 73 — go-live config-gap highlighting on the admin console.
   A warm, translucent light-red tint (works over light + dark card
   backgrounds) plus a gentle pulse. Colour is never the sole signal —
   a title/aria-label names the missing key(s) for AT + colour-blind users. */
.golive-missing {
  background: var(--golive-warn-bg) !important;
  border-color: var(--golive-warn-border) !important;
  animation: golive-pulse 2.2s ease-in-out infinite;
  cursor: help;
}
.golive-missing:hover {
  background: var(--golive-warn-bg-strong) !important;
}
@keyframes golive-pulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 5px var(--golive-pulse-shadow); }
}
@media (prefers-reduced-motion: reduce) {
  .golive-missing { animation: none; }
}
/* The field-level tint inside a flagged keys-page provider card. */
.golive-missing-field {
  background: var(--golive-warn-field);
  border-radius: var(--radius-sm, 4px);
}
/* Banner summarising overall go-live readiness on the admin landing. */
.golive-banner {
  background: var(--golive-warn-bg);
  border: 1px solid var(--golive-warn-banner-border);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
/* Green "go-live ready" banner + per-section checklist. */
.golive-ready {
  background: var(--golive-ok-bg);
  border: 1px solid var(--golive-ok-border);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.golive-ok-check { color: var(--golive-ok-fg); font-weight: 700; }
.golive-checklist { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.golive-checklist li { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); }
/* Environment-mode badge (dev / uat / production). */
.env-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.env-badge-dev { background: var(--env-dev-bg); color: var(--env-dev-fg); }
.env-badge-uat { background: var(--env-uat-bg); color: var(--env-uat-fg); }
.env-badge-production { background: var(--env-prod-bg); color: var(--env-prod-fg); }
/* Compact topbar variant (non-prod indicator). */
.env-pill { margin-left: var(--space-2); vertical-align: middle; }

/* Phase 77 — per-user default-project toggle. The ★/☆ glyph is the primary
   state indicator (WCAG: not colour-alone); accent colour is secondary. */
.default-star {
  background: none;
  border: none;
  padding: 0 var(--space-1);
  cursor: pointer;
  color: var(--color-text-muted);
  transition: color 0.15s ease, transform 0.1s ease;
}
.default-star:hover { color: var(--color-accent); transform: scale(1.1); }
.default-star.is-default { color: var(--color-accent); }
.sidebar-default-toggle.is-default { color: var(--color-accent); font-weight: 600; }

/* Phase 78 — logo project switcher dropdown. */
.logo-menu { position: relative; display: inline-flex; }
.logo-menu-panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: 1000;
  min-width: 320px;
  max-width: 420px;
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--space-2);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #d9dee5);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-lg, 0 8px 28px rgba(0,0,0,0.18));
}
.logo-menu-panel[hidden] { display: none; }
.logo-menu-search {
  width: 100%;
  margin-bottom: var(--space-2);
  padding: var(--space-2);
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border, #d9dee5);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-bg, #fff);
  color: var(--color-text, #1c2733);
}
.logo-menu-list { list-style: none; margin: 0; padding: 0; }
.logo-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-sm, 6px);
}
.logo-menu-row:hover, .logo-menu-row:focus-within { background: var(--color-bg-subtle, #f3f5f8); }
.logo-menu-row.is-current { background: var(--color-bg-subtle, #f3f5f8); }
.logo-menu-row-main { display: flex; flex-direction: column; min-width: 0; }
.logo-menu-row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-menu-row-meta { font-size: var(--font-size-xs, 12px); text-transform: capitalize; }
.logo-menu-row-actions { display: flex; gap: var(--space-1); flex-shrink: 0; }
.logo-menu-open, .logo-menu-open-new {
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border, #d9dee5);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-bg, #fff);
  color: var(--color-accent, #1f5280);
  cursor: pointer;
}
.logo-menu-open:hover:not([disabled]), .logo-menu-open-new:hover { background: var(--color-accent, #1f5280); color: var(--color-text-inverse); }
.logo-menu-open[disabled] { color: var(--color-text-muted, #6b7785); cursor: default; }
.logo-menu-loading, .logo-menu-empty { padding: var(--space-2); font-size: var(--font-size-sm); }

/* Phase 80 — Coder Canvas (freeform multi-panel desk). */
.canvas-main { display: flex; flex-direction: column; min-height: 0; }
.canvas-palette { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.btn-icon { font-size: 1.05em; line-height: 1; }
.canvas-width-advisory {
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  background: var(--color-bg-subtle, #f3f5f8);
  border: 1px solid var(--color-border, #d9dee5);
  border-left: 3px solid var(--color-accent, #1f5280);
  border-radius: var(--radius-sm, 6px);
}
.canvas-stage {
  position: relative;
  flex: 1;
  min-height: calc(100vh - 240px);
  margin-top: var(--space-3);
  overflow: auto;
  background:
    linear-gradient(var(--color-border, #e7ebf0) 1px, transparent 1px) 0 0 / 100% 28px,
    var(--color-bg, #fff);
  border: 1px solid var(--color-border, #d9dee5);
  border-radius: var(--radius-md, 8px);
}
.canvas-surface { position: relative; min-width: 100%; min-height: 100%; }
.canvas-empty { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); max-width: 32rem; text-align: center; }
.canvas-panel {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #d9dee5);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-lg, 0 8px 28px rgba(0,0,0,0.18));
  overflow: hidden;
}
.canvas-panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-subtle, #f3f5f8);
  border-bottom: 1px solid var(--color-border, #d9dee5);
  cursor: move;
  user-select: none;
}
.canvas-panel-bar:focus-visible { outline: 2px solid var(--color-accent, #1f5280); outline-offset: -2px; }
.canvas-panel-title { font-weight: 600; font-size: var(--font-size-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.canvas-panel-close { background: none; border: none; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--color-text-muted, #6b7785); padding: 0 var(--space-1); }
.canvas-panel-close:hover { color: var(--color-danger, #b4232a); }
.canvas-panel-body { flex: 1; overflow: auto; padding: var(--space-3); }
/* Phase 88 — a coding window's body hosts the embedded coding iframe flush. */
.canvas-panel-body.is-coding { padding: 0; overflow: hidden; }
.canvas-coding-frame { width: 100%; height: 100%; border: 0; display: block; }
.canvas-panel-resize { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, var(--color-border, #b9c2cc) 50%); }
.canvas-doc-text { white-space: pre-wrap; font-size: var(--font-size-sm); line-height: 1.6; }
.canvas-note { width: 100%; height: 100%; min-height: 8rem; border: none; resize: none; font: inherit; font-size: var(--font-size-sm); background: transparent; color: var(--color-text, #1c2733); }
.canvas-note:focus-visible { outline: 2px solid var(--color-accent, #1f5280); }
.canvas-journal-entry { margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border, #e7ebf0); }
.canvas-picker-list { display: flex; flex-direction: column; gap: var(--space-1); max-height: 50vh; overflow-y: auto; }
.canvas-picker-item { text-align: left; justify-content: flex-start; }

/* Phase 81 — team-leader role badge fallback */
.badge-info { background: var(--color-accent, #1f5280); color: var(--color-text-inverse); }

/* Phase 79 — multi-screen present & record. */
.present-stage {
  display: flex; align-items: center; justify-content: center;
  min-height: 40vh; padding: var(--space-4);
  background: var(--color-bg-subtle, #f3f5f8);
  border: 1px solid var(--color-border, #d9dee5);
  border-radius: var(--radius-md, 8px);
}
.present-prompt { text-align: center; }
.present-prompt-text { font-size: clamp(1.5rem, 4vw, 3rem); font-weight: 600; line-height: 1.25; }
.present-prompt-options { margin-top: var(--space-3); list-style: none; padding: 0; font-size: 1.25rem; }
.present-image { max-width: 100%; max-height: 70vh; object-fit: contain; }
.present-doc-body { white-space: pre-wrap; font-size: 1.1rem; line-height: 1.7; max-height: 70vh; overflow: auto; text-align: left; }
.present-chooser-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 50vh; overflow: auto; }
.present-blank-card { padding: var(--space-4); text-align: center; color: var(--color-text-muted, #6b7785); }
/* The presenter window: distraction-free, full-bleed, dark for projection. */
.present-presenter {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 4vmin; background: var(--color-projector-bg, #0b0f14); color: var(--color-projector-fg, #f4f6f8);
}
.present-presenter .present-prompt-text { font-size: clamp(2rem, 8vw, 6rem); }
.present-presenter .present-image { max-height: 92vh; }

/* Phase 105 §105.6 — sequential multi-document coding session navigator. */
.code-session-nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--color-surface, #fff);
  border-bottom: 1px solid var(--color-border, #e2e2e2);
  padding: var(--space-2, 8px) var(--space-4, 16px);
}
.code-session-navrow { display: flex; align-items: center; gap: var(--space-3, 12px); flex-wrap: wrap; }
.code-session-pos { white-space: nowrap; }
.code-session-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-session-jump { max-width: 260px; }
.code-session-strip { display: flex; gap: 6px; margin-top: var(--space-2, 8px); flex-wrap: wrap; }
.code-session-dot {
  width: 20px; height: 8px; border-radius: 4px; border: none; padding: 0; cursor: pointer;
  background: var(--color-border, #cbd5e1);
}
.code-session-dot.is-current { background: var(--color-accent, #2a6ff5); }
.code-session-dot:hover { filter: brightness(0.92); }

/* PHASE-105 §105.9 — Protocol panel: match an interview protocol against a
   document and review its questions as a pre-checked checklist. */
.protocol-panel { display: flex; flex-direction: column; gap: var(--space-2); }
.protocol-controls { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.protocol-picker {
  flex: 1 1 auto; min-width: 12rem; padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text); font-size: 14px;
}
.protocol-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-surface);
}
.protocol-row.is-unmatched { opacity: 0.7; }
.protocol-row-main { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; flex: 1 1 auto; }
.protocol-row-main input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; }
.protocol-row-text { display: flex; flex-direction: column; gap: 2px; }
.protocol-q { color: var(--color-text); line-height: 1.4; }
.protocol-answer { color: var(--color-text-muted); font-size: 13px; line-height: 1.4; }
.protocol-score {
  flex: 0 0 auto; align-self: center; font-size: 12px; font-weight: 600;
  padding: 2px var(--space-1); border-radius: var(--radius-sm); white-space: nowrap;
}
.protocol-score.is-matched { color: var(--color-text-inverse); background: var(--color-accent); }
.protocol-score.is-unmatched { color: var(--color-text-muted); background: var(--color-surface-alt); }