:root {
  --bg: oklch(99% 0.002 200);          /* page + sidebar background (seamless) */
  --bg-elev: #ffffff;                  /* cards */
  --bg-elev-2: oklch(97% 0.003 200);   /* hover tint (nav, ghost/icon buttons, code chip) */
  --border: oklch(91% 0.005 200);      /* card borders, table header rule */
  --border-soft: oklch(94% 0.003 200); /* row dividers */
  --text: oklch(20% 0.01 240);         /* primary text / headings */
  --text-dim: oklch(48% 0.01 240);     /* subtitles, dates */
  --text-muted: oklch(58% 0.01 240);   /* section labels, hints */

  /* Primary — teal. Every first-party interactive/brand element. */
  --accent: oklch(50% 0.09 195);
  --accent-tint: oklch(93% 0.03 195);
  --accent-tint-strong: oklch(96% 0.025 195);
  --accent-border: oklch(85% 0.06 195);
  --accent-wash: oklch(97% 0.015 195);

  /* Purple. In salewise this was reserved for the external CrowdVoice link;
     here the app IS CrowdVoice, so purple is a regular secondary tint
     (used for the proposal_delivered stage pill). */
  --purple: oklch(48% 0.1 300);
  --purple-tint: oklch(93% 0.04 300);
  --purple-wash: oklch(97% 0.014 300);
  --purple-border: oklch(87% 0.045 300);

  /* Semantic — status bands */
  --good: oklch(40% 0.14 150);
  --good-bg: oklch(93% 0.06 150);
  --good-border: oklch(80% 0.08 150);
  --mid: oklch(46% 0.13 70);
  --mid-bg: oklch(94% 0.06 75);
  --mid-border: oklch(82% 0.08 75);
  --low: oklch(48% 0.16 25);
  --low-bg: oklch(93% 0.06 25);
  --low-border: oklch(85% 0.07 25);

  --radius: 14px;
  --shadow: 0 1px 2px rgba(20,30,40,.04);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: 236px;
  flex-shrink: 0;
  background: var(--bg);
  border-right: 1px solid var(--border);
  padding: 22px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.sidebar nav { flex: 1; }
.brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 22px; }
.brand-logo { display: block; height: 22px; width: auto; }
.bd-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  color: var(--accent); background: var(--accent-tint);
  padding: 2px 6px; border-radius: 6px;
}
.nav-section {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-muted); margin: 6px 10px 8px;
}
/* :not(:first-child), not the "+" adjacent-sibling combinator — each section's
   nav-link <a> items sit between the .nav-section divs, so they're never
   direct siblings of each other. */
.nav-section:not(:first-child) { margin-top: 22px; padding-top: 22px; position: relative; }
.nav-section:not(:first-child)::before {
  content: ""; position: absolute; top: 0; left: 10px; right: 10px;
  height: 1px; background: var(--border-soft);
}
.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  color: var(--text-dim); text-decoration: none;
  font-weight: 500; font-size: 13.5px; transition: background .12s, color .12s;
}
.nav-link:hover { background: var(--bg-elev-2); color: var(--text); }
.nav-link.active { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.nav-icon { width: 17px; height: 17px; flex-shrink: 0; }
.nav-cnt { margin-left: auto; font-size: 11px; color: var(--text-muted); font-weight: 500; }

.org-foot {
  border-top: 1px solid var(--border-soft);
  padding: 12px 8px;
  position: relative;
}
.user-pill {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 6px;
  background: transparent; border: none; border-radius: 8px;
  cursor: pointer; color: inherit; font: inherit; text-align: left;
}
.user-pill:hover {
  background: var(--bg-elev-2);
}
.user-avatar {
  flex-shrink: 0; width: 17px; height: 17px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-tint-strong); border-radius: 50%; color: var(--accent);
}
.user-info { min-width: 0; flex: 1; }
/* Shared two-line caption style: bold/dark primary line, smaller/muted
   secondary line — used for the sidebar footer (org name, then user name)
   and the Lead workspace section's active-lead subtitle. */
.caption-primary { font-weight: 600; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caption-secondary { font-weight: 500; font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-section-sub {
  margin: -6px 10px 10px; text-transform: none; letter-spacing: normal;
  color: oklch(71% 0.01 240);
}
.user-menu {
  display: none; position: absolute; bottom: 100%; left: 8px; right: 8px; margin-bottom: 8px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: var(--shadow); z-index: 1000;
}
.user-menu[data-open] {
  display: block;
}
.menu-item {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: none;
  background: transparent; color: var(--text); cursor: pointer; font: inherit; text-align: left;
  font-size: 13px; text-decoration: none;
}
.menu-item:hover {
  background: var(--bg-elev-2);
}
.menu-item.logout { color: var(--low); }
.menu-item.logout:hover { background: var(--low-bg); }
.menu-item.current { color: var(--accent); font-weight: 600; }
.menu-icon { flex-shrink: 0; opacity: .8; }
.menu-item .menu-check { margin-left: auto; color: var(--accent); font-weight: 700; }
.menu-section {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-muted); padding: 9px 12px 4px;
}
.menu-divider { height: 1px; background: var(--border-soft); margin: 4px 0; }

/* ---------- Content ---------- */
/* min-width: 0 — .content is a flex item (body is the flex container), and a flex
   item's default min-width:auto lets any long unwrappable descendant (e.g. a nowrap
   .note-preview-text holding a long note/FAQ answer) blow the whole page out to the
   right. min-width:0 breaks that chain so inner ellipsis rules can actually apply. */
.content { flex: 1; padding: 40px 32px; max-width: 1180px; min-width: 0; }
.content.wide { max-width: none; }
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 26px;
}
h1 { font-size: 26px; margin: 0 0 6px; letter-spacing: -.4px; font-weight: 700; color: var(--text); }
.subtitle { color: var(--text-dim); margin: 0; max-width: 900px; font-size: 14px; }
/* A <button> that reads as a link — for actions that belong mid-sentence (e.g. the no-lead
   page's "choose one now", which opens the breadcrumb picker instead of navigating). A real
   button, not an <a href="#">, so it's keyboard- and screen-reader-correct. */
.linklike {
  padding: 0; border: 0; background: none; font: inherit; cursor: pointer;
  color: var(--accent); text-decoration: underline;
}
.linklike:hover { text-decoration: none; }
.content.wide .page-head .subtitle { max-width: none; }
.card-title { font-size: 15px; margin: 0 0 10px; font-weight: 700; color: var(--text); }
h2 { font-size: 18px; margin: 0 0 12px; }

/* ---------- Cards / layout ---------- */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  margin-bottom: 20px;
}
.resource-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.resource-grid > .card { margin-bottom: 0; }
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.pricing-grid > .card { margin-bottom: 0; }
@media (max-width: 980px) { .resource-grid, .pricing-grid { grid-template-columns: 1fr; } }
.resource-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.resource-notes { margin: 8px 0 0; }
.pricing-body { color: var(--text-dim); margin: 12px 0 0; white-space: pre-line; }
.doc-tile {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  background: var(--accent-tint-strong); border: 1px solid var(--accent-border);
  color: var(--accent); display: flex; align-items: center; justify-content: center;
}
.coming-soon { opacity: .75; }
.coming-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ---------- Tables ---------- */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  position: relative;
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-muted); font-weight: 600; padding: 0 12px 12px; border-bottom: 1px solid var(--border);
}
.data-table td { padding: 16px 12px; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table .right, th.right { text-align: right; }
.strong { font-weight: 600; font-size: 14px; color: var(--text); }
.muted { color: var(--text-dim); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.empty { text-align: center; color: var(--text-muted); padding: 28px 12px; }
.next-step, .action-items-cell { max-width: 220px; }
.row-archived { opacity: .55; }
.truncate-1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.clamp-3 {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 220px;
}
.clamp-4 {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 220px;
}
.col-client { max-width: 190px; }
.stage-col { width: 96px; }

/* Custom hover tooltip (native title="" can't be styled/sized) */
[data-tooltip] { position: relative; cursor: default; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; top: 100%; margin-top: 6px; z-index: 50;
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20,30,40,.16);
  padding: 10px 13px; font-size: 13.5px; font-weight: 400; line-height: 1.5;
  white-space: pre-line; max-width: 320px; width: max-content;
  /* Reset properties a labelled trigger (e.g. an uppercase field label)
     would otherwise inherit into the tooltip bubble's own text. */
  text-transform: none; letter-spacing: normal; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .12s ease;
}
[data-tooltip].tooltip-left::after { left: 0; }
[data-tooltip].tooltip-right::after { right: 0; }
/* Opens upward instead of down — for triggers with their own content
   sitting directly beneath them (e.g. a field label above its value). */
[data-tooltip].tooltip-top::after { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 6px; }
[data-tooltip]:hover::after { opacity: 1; visibility: visible; }

/* ---------- Table header: sort + filter ---------- */
/* Column label and filter icon stack instead of sitting side by side, so
   filterable columns don't need extra horizontal room for the icon. */
.th-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.th-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.th-btn:hover { color: var(--text); }
.th-btn.active { color: var(--accent); }
.sort-arrow { font-size: 8px; width: 8px; display: inline-block; }
.th-filter-btn {
  background: none; border: none; padding: 2px; margin: 0; border-radius: 4px;
  color: var(--text-muted); cursor: pointer; font-size: 10px; line-height: 1;
}
.th-filter-btn:hover { color: var(--text); background: var(--bg-elev-2); }
.th-filter-btn.active { color: var(--accent); background: var(--accent-tint-strong); }
.th-filter-panel {
  position: absolute; top: 100%; left: 0; margin-top: 6px; z-index: 30;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20,30,40,.14); padding: 10px 12px; min-width: 150px;
  text-transform: none; letter-spacing: normal;
}
.th-filter-panel-wide { min-width: 190px; }
.th-filter-panel label {
  display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500;
  color: var(--text-dim); margin-bottom: 7px; cursor: pointer; white-space: nowrap;
}
.th-filter-panel label:last-of-type { margin-bottom: 0; }
.th-filter-panel input { width: auto; margin: 0; }
.filter-panel-actions {
  display: flex; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft);
}
.filter-panel-actions button {
  background: none; border: none; padding: 0; font-size: 11.5px; font-weight: 600;
  color: var(--accent); cursor: pointer;
}
.filter-panel-actions button:hover { text-decoration: underline; }

/* ---------- Drag-to-reorder handle ---------- */
.drag-col { width: 24px; padding: 0 0 0 8px !important; }
.drag-handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; color: var(--text-muted); cursor: grab;
}
.drag-handle:hover { color: var(--text-dim); }
tr.dragging { opacity: .4; }
.leads-table.drag-disabled .drag-handle { opacity: .25; cursor: not-allowed; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-elev); color: var(--text); cursor: pointer;
  text-decoration: none; transition: filter .12s, background .12s, border-color .12s;
}
.btn:hover { background: var(--bg-elev-2); }
/* Without this, a disabled button (e.g. the slides-popup Generate button while the
   logo/images are still loading) is functionally inert but LOOKS identical to an
   enabled one — no dimming, still a pointer cursor — reading as clickable when it isn't. */
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:disabled:hover { background: var(--bg-elev); filter: none; }
.btn.primary {
  background: var(--accent); border: none; color: #fff;
  padding: 11px 18px; border-radius: 9px; font-weight: 700; font-size: 13.5px;
}
.btn.primary:hover { filter: brightness(1.08); }
.btn.primary:disabled:hover { filter: none; }
.btn.ghost { background: transparent; padding: 7px 12px; font-size: 12.5px; }
.btn.ghost:hover { background: var(--bg-elev-2); }
.btn.danger { color: var(--low); border-color: var(--low-border); background: transparent; }
.btn.danger:hover { background: var(--low-bg); }
/* Solid destructive button — the confirm dialog's primary action. */
.btn.danger-solid {
  background: var(--low); border: none; color: #fff;
  padding: 11px 18px; border-radius: 9px; font-weight: 700; font-size: 13.5px;
}
.btn.danger-solid:hover { filter: brightness(1.08); }
.btn.tiny { padding: 5px 10px; font-size: 12px; }
/* .btn's own `display` otherwise beats the UA [hidden] rule (author origin wins), so a
   button rendered hidden — e.g. the slides popup's "New photos" until prep lands — would
   still show. */
.btn[hidden] { display: none; }
.btn.copied { color: var(--good); border-color: var(--good-border); }
.wide-btn { width: 100%; margin-top: 6px; }
.inline { display: inline; }
form.inline { margin: 0; }

/* Height is fixed rather than left to padding + icon size: a row of actions
   mixes 13–18px glyphs, and implicit heights made neighbouring buttons in the
   same strip disagree by a few pixels. */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elev); color: oklch(30% 0.01 240); cursor: pointer; text-decoration: none; }
.icon-btn:hover { background: var(--bg-elev-2); }
.icon-btn.danger { border-color: var(--low-border); color: var(--low); }
.icon-btn.danger:hover { background: var(--low-bg); }
/* The Google Drive mark carries its own brand fills, so there's no colour to
   inherit — only the button chrome around it reacts to hover. */
.icon-btn.drive { color: inherit; }
.actions-row { display: inline-flex; gap: 6px; }

/* ---------- Pills / chips ---------- */
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
/* Lead stage pills */
.pill.stage-neutral   { background: oklch(93% 0.005 240); color: oklch(50% 0.01 240); }
.pill.stage-teal-soft { background: var(--accent-tint-strong); color: var(--accent); }
.pill.stage-teal      { background: var(--accent-tint); color: var(--accent); }
.pill.stage-purple    { background: var(--purple-tint); color: var(--purple); }
.pill.stage-good      { background: var(--good-bg); color: var(--good); }
.pill.stage-mid       { background: var(--mid-bg); color: var(--mid); }
.pill.stage-muted     { background: oklch(95% 0.003 240); color: var(--text-muted); }

.weight-chip {
  font-size: 11px; font-weight: 600; color: var(--accent);
  background: var(--accent-tint-strong); padding: 2px 8px; border-radius: 999px;
}
/* ---------- Stars ---------- */
.stars { letter-spacing: 1px; font-size: 15px; white-space: nowrap; }
.stars .star { color: var(--border); }
.stars .star.on { color: var(--accent); }
.star-input { display: flex; gap: 2px; margin-top: 6px; }
.star-input button {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  font-size: 22px; line-height: 1; color: var(--border); transition: color .1s;
}
.star-input button.on { color: var(--accent); }
.star-input button:hover { color: var(--accent-border); }
.star-input button.on:hover { color: var(--accent); }


/* ---------- Banners ---------- */
.banner { padding: 10px 14px; border-radius: 8px; margin-bottom: 18px; font-weight: 500; }
.banner.warn { background: var(--mid-bg); color: var(--mid); border: 1px solid var(--mid-border); }
.hint { color: var(--text-muted); font-size: 12.5px; margin: 16px 0 0; }
.hint strong { color: oklch(40% 0.01 240); }

/* ---------- Forms ---------- */
label { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 500; color: var(--text-dim); }
input, select, textarea {
  width: 100%; margin-top: 6px; padding: 9px 11px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-family: inherit; font-size: 14px;
}
textarea { resize: vertical; }
/* The width:100% above is for text-like fields; checkboxes and radios must never take
   the full input width or they stretch and shove their labels off to the side. Without
   this global reset every checkbox/radio row needs its own width:auto override — the
   Generate-slides popup (logo radios, use-case rows, modules toggle) regressed for
   exactly that reason. */
input[type=checkbox], input[type=radio] { width: auto; margin: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
input[type=file] { padding: 7px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* ---------- Modal ---------- */
.modal {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-elev); color: var(--text); padding: 24px;
  width: 440px; max-width: 92vw; box-shadow: 0 8px 30px rgba(20,30,40,.14);
}
.modal.modal-lg { width: 760px; }
.modal::backdrop { background: rgba(15,20,28,.5); }
.modal h2 { margin-top: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* ---------- Confirmation dialog ---------- */
.confirm-modal { width: 420px; }
.confirm-head { display: flex; align-items: center; gap: 12px; }
.confirm-head h2 { margin: 0; font-size: 17px; }
.confirm-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; flex: none;
}
.confirm-icon.danger { background: var(--low-bg); color: var(--low); }
.confirm-icon.neutral { background: var(--accent-tint-strong); color: var(--accent); }
.confirm-message { color: var(--text-dim); font-size: 13.5px; line-height: 1.5; margin: 12px 0 22px; }

/* ---------- Lead workspace pages ---------- */
.crumb {
  font-size: 13.5px; font-weight: 600; margin-bottom: 10px;
  color: var(--text-dim);
}
.crumb a { color: var(--accent); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb .crumb-sep { color: var(--text-muted); font-weight: 500; margin: 0 4px; }
.hpill { vertical-align: 4px; margin-left: 10px; }
.leads-table tbody tr[data-id] { cursor: pointer; }
.leads-table tbody tr[data-id]:hover td { background: var(--bg-elev-2); }
/* Edit/delete stacked instead of side by side — narrows the actions column. */
.leads-table .actions-row { flex-direction: column; gap: 4px; }

/* Breadcrumb lead switcher — click the caret to search/jump to another lead
   without leaving the current subpage. Anchored dropdown, not a modal. */
.crumb-lead { position: relative; display: inline-block; }
.crumb-lead-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; font-weight: 600; font-size: 13.5px; color: var(--accent); cursor: pointer;
}
.crumb-lead-btn:hover { text-decoration: underline; }
.crumb-lead-btn.crumb-lead-empty { color: var(--text-dim); font-style: italic; }
.crumb-caret { font-size: 10px; color: var(--text-muted); }
.crumb-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  width: 300px; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(20,30,40,.14); padding: 12px;
}
.crumb-dropdown-search { margin: 0 0 8px; }
.crumb-dropdown-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.crumb-dropdown-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px; border-radius: 7px; text-decoration: none;
  color: var(--text); font-weight: 500; font-size: 13px;
}
.crumb-dropdown-row:hover { background: var(--bg-elev-2); }
.crumb-dropdown-client { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb-dropdown-row .pill { flex-shrink: 0; }
.crumb-dropdown-all {
  display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft);
  color: var(--accent); font-weight: 600; font-size: 12.5px; text-decoration: none;
}
.crumb-dropdown-all:hover { text-decoration: underline; }

/* Overview page: structured fields (BD leader, stage, stars) in one compact
   row, open-text fields (contact / next step / BD goal / comments) in a
   second row of equal columns — both rows read left-to-right, top-aligned
   since the text column heights vary. */
.field-strip { display: grid; grid-template-columns: repeat(6, 1fr); }
.field-item { padding: 0 18px; }
.field-item:first-child { padding-left: 0; }
.field-item:last-child { padding-right: 0; }
.field-item + .field-item { border-left: 1px solid var(--border-soft); }
.field-item .l, .text-field .l {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); margin-bottom: 6px;
}
.field-item .v { font-size: 14px; font-weight: 600; color: var(--text); }
@media (max-width: 900px) {
  .field-strip { grid-template-columns: repeat(3, 1fr); row-gap: 16px; }
  .field-item { border-left: none !important; padding: 0 !important; }
}

/* No align-items override: grid's default (stretch) makes every column's box
   fill the row's full height, so the border-left dividers below span edge to
   edge instead of stopping wherever that column's own text ends. */
.text-fields { display: grid; grid-template-columns: repeat(4, 1fr); }
.text-field { padding: 0 20px; }
.text-field:first-child { padding-left: 0; }
.text-field:last-child { padding-right: 0; }
.text-field + .text-field { border-left: 1px solid var(--border-soft); }
.text-field .v { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }
@media (max-width: 900px) {
  .text-fields { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .text-field { border-left: none !important; padding: 0 !important; }
}

.tcard { padding: 16px 18px; border-radius: 12px; }
.tcard h4 {
  margin: 0 0 6px; font-size: 13.5px; color: var(--text);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.tcard-stat { margin: 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.55; }
.tcard-go {
  display: inline-block; margin-top: 10px; font-size: 12.5px;
  color: var(--accent); font-weight: 600; text-decoration: none;
}
.tcard-go:hover { text-decoration: underline; }

/* Overview page: Action items (left) next to a stack of the four tool cards
   (right, each at roughly half height so all four fit alongside it). Grid's
   default row-stretch makes the Action items card match the stack's total
   height; its body scrolls internally instead of growing the card further.
   minmax(0, 1fr) (not bare 1fr) keeps both columns exactly 50/50 — otherwise
   the tool-stack cards' intrinsic content width can push past their share
   and squeeze Action items narrower. */
.overview-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 20px; }
/* min-width: 0 on both grid items too — minmax(0, 1fr) alone only stops the
   *track* from growing to fit content; without this the cards' own nowrap/
   ellipsis text still forces the card wider than its track ("grid blowout"),
   pushing the tool-stack past the page's right edge. */
.overview-split > * { min-width: 0; }
/* overflow: hidden here isn't primarily about clipping — per the CSS Grid
   spec, a grid item's automatic minimum size is content-based (auto) unless
   its own overflow is non-visible, in which case it drops to 0. That's what
   lets this card be capped at the tool-stack's shorter natural height instead
   of forcing the grid row to grow to fit long action-item text; the excess
   then scrolls inside .action-items-body instead. Because of this, the
   "Action items" label's tooltip can't safely pop *upward* here (it would be
   clipped by this same overflow) — see the mdfield() call site, which omits
   tooltip-top so it opens downward, inside the card's own bounds, instead. */
.action-items-card { display: flex; flex-direction: column; margin-bottom: 0; overflow: hidden; }
.action-items-card .l {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); margin-bottom: 6px; flex-shrink: 0;
}
.action-items-card .v { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }
.action-items-body { flex: 1 1 auto; overflow-y: auto; }
.tool-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); gap: 10px; min-width: 0; }
.tool-stack > .card { margin-bottom: 0; min-width: 0; overflow: hidden; }
.tcard-compact { padding: 12px 16px 10px; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; }
.tcard-compact h4 { margin: 0 0 4px; font-size: 12.5px; line-height: 1.2; }
.tcard-compact h4 .pill { line-height: 1.2; }
/* Second line: subtitle (left, truncates) + go-link (right, under the pill) on one row */
.tcard-compact .tcard-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; min-width: 0; }
.tcard-compact .tcard-stat {
  margin: 0; font-size: 11.5px; line-height: 1.4;
  flex: 0 1 auto; min-width: 0; max-width: 75%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tcard-compact .tcard-go { margin-top: 0; font-size: 11.5px; flex-shrink: 0; }
@media (max-width: 900px) { .overview-split { grid-template-columns: 1fr; } }

/* Pitch page: two columns — Templates (org-wide) | Client pitches (per-lead) —
   each holding any number of matching cards, or the add-mechanism tiles when empty. */
.pitch-page { max-width: 1160px; }
.pitch-columns {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start;
  margin-top: 20px;
}
/* 8px between rows, matching .uc-decks — the 14px gap here was tuned for the tall
   preview cards these replaced, and reads as drift now that both surfaces use doc-row-card.
   The gap after the column head stays larger (see .pitch-col-head). */
.pitch-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pitch-col-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
/* Half-width columns: clamp each line rather than let it wrap. Scoped to .pitch-col so the
   full-width surfaces using doc-row-card (Context docs, Q&A docs) keep wrapping, where they
   have the room for it. Full text is in each element's title attribute. */
.pitch-col .doc-row-body > .strong,
.pitch-col .doc-row-body > .muted {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pitch-col-head h2 { margin: 0; font-size: 17px; }
.pitch-col-add { margin-left: auto; padding: 6px 12px; font-size: 12.5px; }
@media (max-width: 980px) { .pitch-columns { grid-template-columns: 1fr; } }

/* ---------- Notes: collapsed-by-default, expandable, inline-editable rows ---------- */
.note-card { padding: 14px 20px; }
.note-row { display: flex; align-items: center; gap: 8px; }
.note-row-toggle {
  display: flex; align-items: center; gap: 14px; cursor: pointer; flex: 1; min-width: 0;
  margin: -14px 0 -14px -20px; padding: 14px 10px 14px 20px;
  border-radius: var(--radius) 0 0 var(--radius);
}
.note-row-toggle:hover { background: var(--bg-elev-2); }
.note-row-meta { display: flex; align-items: baseline; gap: 10px; flex-shrink: 0; }
/* Own ellipsis rule instead of the shared .truncate-1 (built for the leads
   table's narrow column, capped at 200px) — this row is much wider and
   should use all the space its flex siblings leave it. */
.note-preview-text {
  flex: 1; min-width: 0; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.note-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform .15s ease; }
.note-row-toggle[aria-expanded="true"] .note-chevron { transform: rotate(180deg); }
.note-row-actions { flex-shrink: 0; }
.note-view, .note-edit-form {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft);
}
.note-view { color: var(--text-dim); }
.note-edit-form .modal-actions { margin-top: 12px; }

/* Split "+ Add note" / "▾" button pair reading as one connected control,
   plus the small coming-soon menu the ▾ opens (see main.js data-dropdown-toggle). */
.note-add-split { position: relative; display: inline-flex; }
.note-add-split .btn.primary:first-child { border-radius: 9px 0 0 9px; }
.note-add-split .btn.primary.icon-only {
  border-radius: 0 9px 9px 0; border-left: 1px solid rgba(255,255,255,.35); padding: 11px 12px;
}
.dropdown-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  width: 260px; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(20,30,40,.14); padding: 6px;
}
.dropdown-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 10px; border-radius: 7px; font-size: 13px; font-weight: 500;
}
.dropdown-item.disabled { color: var(--text-muted); cursor: default; }
/* A dropdown item that's a real link (e.g. the use case generator's Export menu) —
   reset the anchor's default blue/underline so it reads like .dropdown-item-btn. */
a.dropdown-item { color: var(--text); text-decoration: none; }
a.dropdown-item:hover { background: var(--bg-elev-2); }
/* A dropdown item that's a real action (e.g. the FAQ page's "✨ Add from Q&A"),
   not an inert "Soon" entry — reset button chrome so it reads like .dropdown-item. */
.dropdown-menu form { margin: 0; }
.dropdown-item-btn {
  display: flex; width: 100%; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 7px; font: inherit; font-size: 13px; font-weight: 500;
  background: none; border: none; color: var(--text); text-align: left; cursor: pointer;
}
.dropdown-item-btn:hover { background: var(--bg-elev-2); }
.dropdown-item-btn:disabled { color: var(--text-muted); cursor: default; }
.dropdown-item-btn:disabled:hover { background: none; }

/* ---------- Inline markdown editor (richtext.js) — one contenteditable
   surface that shows styled markdown as you type (no raw-source pane). ------ */
.richtext { margin-bottom: 20px; }
.richtext-toolbar { display: flex; gap: 6px; margin-bottom: 8px; }
.richtext-surface {
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px;
  background: var(--bg-elev); min-height: 88px; overflow-y: auto;
  cursor: text;
}
.richtext-surface:focus {
  outline: none; border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.richtext-surface:empty::before {
  content: attr(data-placeholder); color: var(--text-muted); pointer-events: none;
}
/* First/last children flush so the caret sits where the border padding expects. */
.richtext-surface > :first-child { margin-top: 0; }
.richtext-surface > :last-child { margin-bottom: 0; }

/* ---------- Markdown-rendered fields (lead Next step / Comments) ---------- */
.md-content p { margin: 0 0 6px; }
.md-content p:last-child { margin-bottom: 0; }
.md-content ul, .md-content ol { margin: 4px 0; padding-left: 20px; }
.md-content li { margin-bottom: 2px; }
.md-content code { background: var(--bg-elev-2); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.md-content pre { background: var(--bg-elev-2); padding: 8px 10px; border-radius: 8px; overflow-x: auto; margin: 4px 0; }
.md-content pre code { background: none; padding: 0; }
.md-content a { color: var(--accent); }
.md-content blockquote {
  border-left: 3px solid var(--border); margin: 4px 0; padding-left: 10px; color: var(--text-muted);
}
/* GFM task-list checkboxes ("- [ ] "/"- [x] " — see app/md.py). Targeted
   structurally (:has(), not a class) — the checkbox is inserted as the <li>'s
   first child both server-side (md.py) and client-side (richtext.js), and
   nh3's sanitizer allow-list doesn't need widening for a class attribute this
   way. Read-only checkboxes (server-rendered, or the .field-view display) stay
   disabled; only the .richtext-surface editor's are click-to-toggle (its
   hydrate() re-enables them — see richtext.js). Plain inline flow, not flex —
   the item's text is a bare text node (no wrapping <span>), and turning it
   into an anonymous flex item shrank/pushed it outside the card entirely. */
.md-content ul:has(> li > input[type="checkbox"]) { list-style: none; padding-left: 2px; }
.md-content li:has(> input[type="checkbox"]) { list-style: none; }
.md-content li:has(> input[type="checkbox"]) input[type="checkbox"] {
  /* Reset the generic `input, select, textarea` form-field rule (width:100%,
     padding, background, border...) — meant for text inputs, but it also
     matches this bare checkbox and was stretching it full-width. */
  all: revert; accent-color: var(--accent); vertical-align: middle;
  margin: 0 7px 0 0; position: relative; bottom: 1px; /* optical baseline nudge */
}
.md-content li:has(> input[type="checkbox"]:not(:disabled)) input[type="checkbox"] { cursor: pointer; }

/* ---------- Documents ---------- */
.doc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.doc-tile-thumb {
  width: 96px; height: 64px; flex-shrink: 0; padding: 0; overflow: hidden;
  background: #fff; border-radius: 8px;
}
.doc-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-fallback-icon { display: inline-flex; align-items: center; justify-content: center; }

/* Document lists: full-width rows (like Notes) but keeping the doc-tile
   icon/thumbnail. Shared by Proposals, Contracts, Context docs, Q&A reference
   docs and the admin KB; 8px matches .uc-decks and .pitch-col. */
.resource-list { display: flex; flex-direction: column; gap: 8px; }
.doc-row-card { padding: 16px 20px; margin-bottom: 0; }
.doc-row { display: flex; align-items: center; gap: 16px; }
.doc-row-body { flex: 1; min-width: 0; }
.doc-row-body .resource-notes { margin: 6px 0 0; }
/* 6px (matching .actions-row) rather than the 10px this had when the row's
   primary action was a wide text button: the actions are all icon buttons now
   and should read as one strip. */
.doc-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* ---------- Media thumb (shared: pitch card, demo cards) — full-bleed
   image/fallback strip at the top of a card, clipped by the card's own
   border-radius via overflow:hidden on the parent. ---------- */
.media-thumb {
  width: 100%; background: #fff; border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.media-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-fallback { display: flex; align-items: center; justify-content: center; color: var(--accent); }

/* Inline checkbox row (e.g. the disabled "Add use case slides" option in the
   create-from-template modal). The `all: revert` undoes the generic form-field
   rule (width:100%, padding…) that otherwise stretches a bare checkbox. */
.checkline { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.checkline input[type="checkbox"] { all: revert; accent-color: var(--accent); margin: 0; }

/* ---------- Busy overlay (slow Drive POSTs) — a top-layer <dialog> with a spinner ---------- */
dialog.busy-overlay {
  border: none; background: transparent; padding: 0;
  max-width: none; max-height: none; overflow: visible;
}
dialog.busy-overlay::backdrop { background: rgba(15,20,28,.5); }
.busy-box {
  background: var(--bg-elev); border-radius: 14px; padding: 26px 30px;
  box-shadow: 0 14px 44px rgba(20,30,40,.28);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 340px; text-align: center;
}
.busy-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--accent-tint); border-top-color: var(--accent);
  animation: busy-spin .8s linear infinite;
}
@keyframes busy-spin { to { transform: rotate(360deg); } }
.busy-msg { font-weight: 700; font-size: 15px; color: var(--text); }
.busy-sub { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }

/* ---------- Add-mechanism option tiles (templates: 2, client decks: 3) — shown
   stacked inside an empty column, and in a row inside the "+ Add" chooser modals. ---------- */
.deck-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.pitch-col .deck-options { grid-template-columns: 1fr; }
.deck-option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  min-height: 200px; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  padding: 22px; border-radius: 16px; border: 1px solid var(--border);
  background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow);
  transition: border-color .14s, background .14s, box-shadow .14s, transform .14s;
}
.deck-option:hover {
  border-color: var(--accent-border); background: var(--accent-wash);
  box-shadow: 0 10px 26px rgba(20,30,40,.10); transform: translateY(-2px);
}
.deck-option-icon {
  width: 54px; height: 54px; border-radius: 14px; font-size: 25px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  /* Lighter tint than the original accent-tint — the teal icon inside was getting
     lost against a too-green square (see the copy/upload/link glyphs). Kept a shade
     above accent-wash so the square stays visible on the accent-wash hover bg. */
  background: var(--accent-tint-strong); color: var(--accent);
}
.deck-option-text { display: flex; flex-direction: column; gap: 5px; }
.deck-option-title { font-weight: 700; font-size: 15.5px; color: var(--text); }
.deck-option-desc { font-size: 12.8px; color: var(--text-muted); line-height: 1.45; }
.modal .deck-options { margin: 8px 0 4px; }
/* Why "Create from template" isn't offered — it used to be hidden with no explanation,
   which reads as the feature having disappeared. Both this and .pitch-tpl-warn (the
   matching hint on the template card itself) exist purely to make that gate legible. */
.deck-option-gate { font-size: 12.8px; color: var(--text-muted); line-height: 1.5; margin: 2px 0 0; }
.pitch-tpl-warn { color: var(--warn-text, #9a6700); cursor: help; border-bottom: 1px dotted currentColor; }

/* ---------- Demo cards (full-bleed thumb on top) ---------- */
/* The thumb rounds its own top corners rather than being clipped by the card:
   `overflow: hidden` on the card would also clip the [data-tooltip] bubbles on
   the edit/delete buttons in the card body. */
.demo-card { padding: 0; }
.demo-card .media-thumb {
  height: 160px;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.demo-card-body { padding: 18px 20px 20px; }

/* ---------- Login (standalone) ---------- */
body.standalone { display: block; background: var(--bg); }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: 380px; max-width: 94vw; padding: 32px 30px; }
.login-brand { padding: 0 0 18px; }
.login-brand .brand-logo { height: 30px; }
.login-card h1 { font-size: 20px; margin-bottom: 18px; }
.password-field { position: relative; margin-top: 6px; }
.password-field input { margin-top: 0; padding-right: 40px; }
.password-toggle {
  position: absolute; top: 0; right: 0; height: 100%; width: 38px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer; color: var(--text-muted);
}
.password-toggle:hover { color: var(--text-dim); }
.password-toggle .eye-off-icon { display: none; }

/* ---------- Overview inline editing (overview.js) ---------- */

/* Live star widget in the compact field strip — smaller than the modal's 22px. */
.field-item .live-stars { margin-top: 2px; }
.field-item .live-stars button { font-size: 18px; }

/* BD leader: click-to-edit short text */
.editable-text {
  display: inline-flex; align-items: center; max-width: 100%;
  margin: -2px -6px; padding: 2px 6px; border-radius: 6px; cursor: text;
}
.editable-text:hover { background: var(--bg-elev-2); }
.editable-text:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-wash); }
.editable-text .editable-input {
  width: 100%; margin: 0; padding: 3px 6px; font-size: 14px; font-weight: 600;
}

/* Stage: pill trigger + a small menu of stage pills */
.stage-editor { position: relative; display: inline-block; }
button.stage-trigger { border: none; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; }
button.stage-trigger::after { content: " \25be"; font-size: 9px; opacity: .55; }
.dropdown-menu.stage-menu {
  width: auto; min-width: 160px; left: 0; right: auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
}
.dropdown-menu.stage-menu[hidden] { display: none; } /* beat the UA [hidden] rule our display:flex overrides */
button.stage-option { border: none; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; }
button.stage-option:hover { box-shadow: inset 0 0 0 1px var(--border); }

/* Long-text cards: hover-revealed edit affordance + inline editor */
.field-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.editable-field .inline-edit-toggle {
  width: 24px; height: 24px; flex-shrink: 0; opacity: 0; transition: opacity .1s;
}
.editable-field:hover .inline-edit-toggle { opacity: 1; }
.editable-field .inline-edit-toggle:focus-visible { opacity: 1; }
.inline-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.field-edit .richtext-surface { min-height: 70px; }

/* Transient save-error toast */
.toast {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--low-bg); color: var(--low); border: 1px solid var(--low-border);
  padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
  box-shadow: 0 8px 24px rgba(20,30,40,.14);
  opacity: 0; pointer-events: none; z-index: 100;
  transition: opacity .15s, transform .15s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Q&A page family (/qa, /qa/faq, /qa/docs) ---------- */
.qa-tabs {
  display: flex; gap: 6px; margin: -6px 0 20px;
  border-bottom: 1px solid var(--border); padding-bottom: 0;
}
.qa-tab {
  padding: 8px 14px 10px; font-size: 13.5px; font-weight: 600;
  color: var(--text-muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.qa-tab:hover { color: var(--text); }
.qa-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.banner.ok { background: var(--good-bg); color: var(--good); border: 1px solid var(--good); }

/* Ask tab. The exchange list and the FAQ list both reuse the Notes page's
   expandable-row pattern (.note-card/.note-row/.note-view + data-note-toggle in
   main.js) so all three surfaces read the same. */
.qa-ask-card { margin-bottom: 20px; }
.qa-ask-label { display: block; font-weight: 600; font-size: 13px; }
.qa-ask-card textarea { width: 100%; margin-top: 6px; resize: vertical; }
.qa-ask-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.qa-exchange-question {
  font-weight: 600; font-size: 14px; margin-bottom: 10px;
}
.qa-answer { font-size: 13.5px; max-width: 900px; }
.qa-answer h1, .qa-answer h2, .qa-answer h3 { font-size: 14px; margin: 14px 0 6px; }
.qa-answer h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 16px 0 4px; }
.qa-answer table { border-collapse: collapse; margin: 8px 0; }
.qa-answer th, .qa-answer td { border: 1px solid var(--border); padding: 5px 10px; text-align: left; }
.qa-answer th { background: var(--bg-elev-2); }
/* The trailing References list (after the #### References heading) reads as a footnote. */
.qa-answer h4 + ol, .qa-answer h4 + ul { font-size: 12px; color: var(--text-muted); }
.qa-section-title { font-size: 14px; font-weight: 700; margin: 26px 0 10px; }

/* Row-1 tweaks on top of the shared note-row pattern: the question is the row's
   subject — bold, first, and given the flexible space (it reuses .note-preview-text's
   flex/ellipsis). The Ask tab's byline (who asked, when) sits after it, de-emphasized. */
.qa-row-question { color: var(--text); font-weight: 600; }
.qa-row-byline { color: var(--text-muted); font-size: 12px; gap: 8px; }
.qa-byline-name { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faq-block { margin-bottom: 12px; }
.faq-block-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); margin-bottom: 4px;
}
.faq-list { margin: 0; padding-left: 18px; font-size: 13px; }
.faq-list li { margin-bottom: 3px; }
.faq-actions { justify-content: flex-end; border-top: 1px solid var(--border); padding-top: 10px; }
.radio-row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 8px 0; }
.radio-row input { width: auto; margin: 0; }
/* "Add from Q&A" suggestion picker rows */
.suggest-row {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
}
.suggest-row:hover { background: var(--bg-elev-2); }
.suggest-row input { width: auto; margin: 3px 0 0; flex-shrink: 0; }
.suggest-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* ============================================================ Admin site + accounts */

/* Admin tag on the sidebar brand + admin avatar — purple, to set the admin site apart
   from the teal org site at a glance. */
.bd-tag.admin-tag {
  color: var(--purple); background: var(--purple-tint);
}
.user-avatar.admin-avatar {
  background: var(--purple-tint); color: var(--purple);
}
.admin-sidebar .nav-link.active { background: var(--purple-tint); color: var(--purple); }

/* ---------- Destination chooser (choose.html) ---------- */
.chooser-card-wrap { width: 460px; max-width: 94vw; }
.chooser-card-wrap .subtitle { margin: -8px 0 4px; }
.chooser-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 6px;
}
.chooser-form { margin: 0; display: block; }
.chooser-card {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; text-decoration: none; cursor: pointer;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; color: var(--text); font: inherit; transition: border-color .12s, background .12s, transform .06s;
}
.chooser-card:hover { border-color: var(--accent-border); background: var(--accent-wash); }
.chooser-card:active { transform: translateY(1px); }
.chooser-card.admin:hover { border-color: var(--purple-border); background: var(--purple-wash); }
.chooser-icon {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; margin-bottom: 6px;
  background: var(--accent-tint); color: var(--accent);
}
.chooser-card.admin .chooser-icon { background: var(--purple-tint); color: var(--purple); }
.chooser-label { font-weight: 700; font-size: 15px; }
.chooser-sub { font-size: 12px; color: var(--text-muted); }
.chooser-logout { margin: 14px 0 0; text-align: center; }

/* ---------- Org selector (admin submitted-questions) ---------- */
.org-select-form { margin: 0; }
.org-select-label {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-dim);
}
.org-select-label select { width: auto; min-width: 180px; }

/* ---------- Admin sections (orgs & users) ---------- */
.admin-section { margin-top: 26px; }
.admin-section:first-of-type { margin-top: 8px; }
.admin-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px;
}
.admin-section-head h2 { font-size: 16px; margin: 0; }

.admin-org-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.admin-org-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px;
}
.admin-org-body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.admin-org-name { font-weight: 700; font-size: 14px; }

/* Users table — a table scans and scales to many rows far better than the stacked
   per-user cards this replaced (name/email/orgs/role align in columns; edit opens a
   modal instead of inline forms eating vertical space). */
.admin-users-table-wrap { padding: 4px 24px; }
.admin-users-table td { padding: 11px 12px; }
.admin-users-table .role-badge { margin-left: 0; }
.row-actions-inline { justify-content: flex-end; }
.admin-field-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted);
}

.checkbox-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 12.5px; font-weight: 500; cursor: pointer; background: var(--bg-elev);
}
.chip-check:hover { border-color: var(--accent-border); }
.chip-check input { width: auto; margin: 0; flex-shrink: 0; }
.chip-check.toggle { border-radius: 8px; }
/* .chip-check's own `display` otherwise beats the `[hidden]` UA rule (equal-origin
   author CSS wins over the default stylesheet) — toggling `hidden` on the admin-access
   row (see admin_orgs.html) would silently no-op without this. */
.chip-check[hidden] { display: none; }

.role-badge {
  display: inline-block; flex-shrink: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  padding: 2px 8px; border-radius: 999px; vertical-align: middle; margin-left: 4px;
  background: var(--accent-tint); color: var(--accent);
}
.role-badge.admin { background: var(--purple-tint); color: var(--purple); }
.role-badge.super { background: var(--good-bg); color: var(--good); }

.btn.small { padding: 6px 12px; font-size: 12.5px; }

/* Info icon with a hover tooltip — replaces static subtitle text on the admin Q&A tabs.
   Reuses the [data-tooltip] bubble; sized to sit beside an h1. */
.info-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; vertical-align: middle; position: relative; top: -2px;
  margin-left: 8px; color: var(--text-muted); cursor: help;
}
.info-icon:hover, .info-icon:focus-visible { color: var(--accent); outline: none; }
.info-icon svg { display: block; }

/* ---------------------------------------------------------- Use case generator */
/* Basics: 6-col grid so the two free-text fields (client name / website) get half-width
   each, and the three selects share the second row a third each. */
.uc-basics-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px 18px; align-items: start; }
.uc-basics-grid > label { margin: 0; }
.uc-basics-grid .uc-col-3 { grid-column: span 3; }
.uc-basics-grid .uc-col-2 { grid-column: span 2; }
.uc-basics-grid .uc-col-full { grid-column: 1 / -1; }
.uc-basics-grid textarea { min-height: 68px; }
.uc-field-hint { display: block; margin-top: 5px; font-weight: 400; }
@media (max-width: 820px) {
  .uc-basics-grid { grid-template-columns: 1fr 1fr; }
  .uc-basics-grid .uc-col-3, .uc-basics-grid .uc-col-2 { grid-column: span 1; }
}
/* Number-of-use-cases slider + live value bubble. */
.uc-slider-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.uc-slider-row input[type=range] {
  flex: 1; width: auto; min-width: 0; margin: 0; padding: 0; height: 6px;
  accent-color: var(--accent); cursor: pointer;
}
.uc-slider-value {
  flex-shrink: 0; min-width: 1.75em; text-align: center; font-weight: 700; font-size: 15px;
  color: var(--accent);
}
.uc-export-btn { display: inline-flex; align-items: center; gap: 6px; }
.uc-docs { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.uc-docs-head { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.uc-doc-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.uc-doc-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg-elev-2);
  font-size: 13px; cursor: pointer;
}
.uc-doc-item input { width: auto; margin: 0; flex-shrink: 0; }
.uc-doc-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-gen-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; flex-wrap: wrap;
}
.uc-sources-actions { margin-top: 10px; }
.uc-section-title { margin: 26px 0 12px; font-size: 17px; }
.uc-section-title-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 26px 0 12px;
}
.uc-section-title-row .uc-section-title { margin: 0; }

.uc-list { display: flex; flex-direction: column; gap: 16px; }
/* The head rounds its own top corners rather than being clipped by the card:
   `overflow: hidden` on the card would also clip the [data-tooltip] bubble on
   the head's delete button, and these cards render collapsed by default — the
   card is barely taller than the head, so there'd be nowhere for it to show. */
.uc-card { padding: 0; }
.uc-card.uc-selected { border-color: var(--accent-border); box-shadow: 0 0 0 1px var(--accent-border); }
.uc-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 18px; background: var(--accent-wash); border-bottom: 1px solid var(--border);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
/* Collapsed (the default): the body is display:none, so the head is the last
   visible box and has to round the card's bottom corners as well. */
.uc-card:has(> .uc-card-body[hidden]) .uc-card-head {
  border-bottom-left-radius: calc(var(--radius) - 1px);
  border-bottom-right-radius: calc(var(--radius) - 1px);
}
/* Use-case cards reuse the Notes/Q&A collapsible pattern verbatim (main.js's
   toggleNoteRow + .note-card/.note-chevron/.note-view, collapsed by default, no JS
   changes) for independent per-card expand/collapse. The toggle row here sits inside
   this card's own head padding (not note-card's edge-to-edge padding), so reset
   note-row-toggle's negative margins/radius back to neutral. */
.uc-card-head .note-row-toggle { margin: 0; padding: 0; border-radius: 0; }
.uc-selected-pill { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.uc-card-title { margin: 2px 0 8px; font-size: 18px; }
.uc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.uc-card-actions { flex-shrink: 0; }

.uc-card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; }
/* .uc-card-body doubles as .note-view (collapsible body) — its own `display: flex`
   ties in specificity with the native [hidden] rule and (author origin beats UA origin)
   wins, silently ignoring `hidden`. Force it back off explicitly when hidden. */
.uc-card-body[hidden] { display: none; }
.uc-section h4 { font-size: 13px; margin: 0 0 6px; color: var(--text); }
.uc-section ul, .uc-section ol { margin: 0; padding-left: 18px; }
.uc-section li { font-size: 13.5px; line-height: 1.5; margin-bottom: 3px; }

.uc-modules { display: flex; flex-direction: column; gap: 12px; }
.uc-module { border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.uc-module-name { font-weight: 600; font-size: 13.5px; margin: 0 0 6px; }
/* The KPI line is the title only on pre-name rows; under a module name it reads as a
   normal metadata line. */
.uc-module-name + .uc-kpi { font-weight: 400; font-size: 13px; color: var(--text-dim); }
.uc-kpi { font-weight: 600; font-size: 13.5px; margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; }
.uc-kpi-label {
  flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--accent); background: var(--accent-tint); border-radius: 5px; padding: 2px 6px;
}
.uc-questions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.uc-q { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.5; }
.uc-q-followup { margin-left: 22px; }
.uc-q-chain { flex: none; color: var(--text-muted); font-weight: 600; }
.uc-q-type {
  flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  border-radius: 5px; padding: 2px 7px; white-space: nowrap;
  background: var(--bg-elev-2); color: var(--text-dim);
}
.uc-q-positiveFactors { background: var(--good-bg); color: var(--good); }
.uc-q-negativeFactors { background: var(--low-bg); color: var(--low); }
.uc-q-barriers { background: var(--mid-bg); color: var(--mid); }
.uc-q-ideasForImprovement { background: var(--accent-tint); color: var(--accent); }
.uc-q-behavioral, .uc-q-knowledge, .uc-q-experience, .uc-q-imaginative {
  background: var(--purple-tint); color: var(--purple);
}
.uc-support-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.uc-support-item { font-size: 13px; line-height: 1.5; }
.uc-support-note { font-size: 12.5px; margin-top: 1px; }

/* Header actions: title + info-icon (left) and Export / Generate (right, always
   visible regardless of active step — the Generate button uses form="uc-wizard-form"
   to submit the wizard form from outside its DOM position, see lead_usecases.html). */
.uc-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uc-export-wrap { position: relative; display: inline-block; }

/* 4-step wizard header (Basics / Documents / Web Sources / Use Cases). Each step is a
   clickable button (main.js's showStep) — free, non-linear navigation, since every
   step's data is already loaded in the page. */
.uc-stepper {
  display: flex; align-items: flex-start; gap: 0; margin: 18px 0 22px; overflow-x: auto;
}
.uc-step {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  background: none; border: none; padding: 0; cursor: pointer; font: inherit; text-align: left;
}
.uc-step-num {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; font-size: 13px; font-weight: 700;
  background: var(--bg-elev-2); color: var(--text-muted); border: 2px solid var(--border);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.uc-step-label {
  font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap;
  transition: color .15s ease;
}
.uc-step.active .uc-step-num { background: var(--accent); border-color: var(--accent); color: #fff; }
.uc-step.active .uc-step-label { color: var(--text); }
.uc-step-connector { flex: 1; height: 2px; background: var(--border); margin: 0 10px; align-self: center; min-width: 20px; }

/* Step panels — shown/hidden purely via the [hidden] attribute (main.js's showStep). */
.uc-step-panel-foot {
  display: flex; justify-content: space-between; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--border-soft);
}

/* Documents step: context docs (with usability status) + extra uploads, side by side
   on wide screens. */
.uc-doc-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 860px) { .uc-doc-columns { grid-template-columns: 1fr; } }
.uc-doc-item.uc-doc-disabled { opacity: .55; cursor: not-allowed; }
.uc-doc-item.uc-doc-disabled input { cursor: not-allowed; }
/* A non-selectable doc row (extra uploads: always used, so no checkbox — just name +
   pill + remove). Default cursor since there's nothing to toggle. */
.uc-doc-item.uc-doc-static { cursor: default; }
.uc-doc-remove { flex-shrink: 0; margin: 0; }
.uc-doc-remove .icon-btn { width: 24px; height: 24px; }
/* "＋ Add document": the real file input is hidden and triggered by this styled label,
   which auto-submits the upload on change (main.js data-auto-upload). */
.uc-upload { margin-top: 12px; }
.uc-upload input[type=file] { display: none; }
.uc-add-doc-btn { cursor: pointer; }
.uc-cap-note { margin-top: 8px; }

/* External web sources: two rows per entry (title, then a clickable URL), a distinct
   tinted type pill (not grey, which read as disabled). */
.uc-source-item {
  display: flex; align-items: flex-start; gap: 11px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg-elev-2);
}
.uc-source-item > input[type=checkbox] { width: auto; margin: 3px 0 0; flex-shrink: 0; cursor: pointer; }
.uc-source-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.uc-source-title { font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; }
.uc-source-url {
  font-size: 12px; color: var(--accent); text-decoration: none; word-break: break-all;
}
.uc-source-url:hover { text-decoration: underline; }
.uc-type-pill { flex-shrink: 0; background: var(--accent-tint); color: var(--accent); }
/* The researched "condensed" content per source (what actually grounds generation) —
   collapsed by default so the list stays scannable, expandable to review quality. */
.uc-source-condensed { margin-top: 4px; }
.uc-source-condensed > summary {
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--accent);
  list-style: none; width: max-content;
}
.uc-source-condensed > summary::before { content: "▸ "; font-size: 10px; }
.uc-source-condensed[open] > summary::before { content: "▾ "; }
.uc-source-condensed-body {
  margin-top: 6px; font-size: 12.5px; line-height: 1.55; color: var(--text-dim);
  white-space: pre-wrap; border-left: 2px solid var(--border); padding-left: 10px;
}
.uc-source-reason { margin: 2px 0 0; }

/* ---- Admin: Use case generator KB (/admin/usecases) ---- */
.kb-view { margin-top: 6px; }
.kb-view > summary {
  cursor: pointer; font-weight: 600; color: var(--accent);
  list-style: none; width: max-content;
}
.kb-view > summary::before { content: "▸ "; font-size: 10px; }
.kb-view[open] > summary::before { content: "▾ "; }
.kb-pre {
  margin: 8px 0 0; padding: 12px 14px; max-height: 420px; overflow: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}

/* ---- Use case generator: v2 polish ---- */
/* The hidden attribute must beat .pill's display rule (same UA-vs-author gotcha as the
   admin-access row) — without this, "✓ Selected" pills show on unselected cards. */
.pill[hidden] { display: none; }
/* Unified empty-state CTA for steps 3/4/5 (Web Sources / Use Cases / Slides): a centered
   prompt + one big green generate/search button. Once content exists the action moves to
   the top-right (.uc-section-title-row > .uc-header-actions) and this card is replaced by
   the content — same pattern across all three steps. */
.uc-generate-cta { text-align: center; padding: 40px 24px 44px; }
.uc-generate-cta p { max-width: 560px; margin: 0 auto 6px; }
.uc-cta-btn { margin: 14px 0 10px; padding: 12px 26px; font-size: 14.5px; }
/* Required-field marker (Basics: client website). */
.uc-req { color: var(--low); font-weight: 700; }
/* Step 5: the stored decks, newest first (a lead keeps several so configurations can be
   compared). These used to be capped at 720px, which wasted most of a wide screen and forced
   the recap onto three lines. No cap now: `usecases` is in base.html's `wide_pages`, so the
   section header and the Back button are unbounded too — capping only the cards left them
   visibly short of the header. The recap is clamped to one line instead (see the deck card in
   lead_usecases.html). */
.uc-slides-form { margin-top: 10px; }
.uc-decks { display: flex; flex-direction: column; gap: 8px; }
.uc-decks-note { max-width: 820px; margin: -4px 0 10px; }
/* One line, ellipsized — the full configuration is in the row's title attribute. */
.uc-deck-summary { margin-top: 2px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
/* The deck just built: a brief tint so it's obvious which row is new after the redirect. */
.uc-deck-new { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft, rgba(2,128,144,.10)); }

/* Generate-slides popup: logo choices as compact thumbnail chips. Stacked full-width rows
   filled the whole popup (the search returns half a dozen candidates) and pushed the slide
   review below the fold. */
.uc-logo-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.uc-logo-option { position: relative; width: 104px; padding: 8px 6px 6px; display: flex;
  flex-direction: column; align-items: center; gap: 6px; text-align: center;
  border: 1px solid var(--border); border-radius: 9px; cursor: pointer; background: var(--bg-elev-2); }
.uc-logo-option:hover { border-color: var(--accent); }
.uc-logo-option:has(input:checked) { border-color: var(--accent);
  background: var(--accent-soft, rgba(2,128,144,.06)); box-shadow: inset 0 0 0 1px var(--accent); }
.uc-logo-option input[type="radio"] { position: absolute; top: 6px; left: 6px; margin: 0; }
.uc-logo-option img { height: 38px; width: 100%; object-fit: contain;
  background: #fff; border-radius: 4px; padding: 3px; }
.uc-logo-none-mark { height: 38px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--muted); }
.uc-logo-caption { font-size: 11px; line-height: 1.25; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.uc-logo-filename { margin: 2px 0 10px; }
/* Section header inside the popup: title left, its own action (New photos / Upload) right. */
.uc-slides-sec-head { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 14px; }
.uc-slides-sec-head .uc-docs-head { margin: 0; }
.uc-slides-sec-actions { display: flex; align-items: center; gap: 6px; }
.uc-prep-note { margin: -4px 0 10px; }

/* Generate-slides popup: use-case review rows, spinners, modules toggle. */
.uc-slides-cases { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 12px; }
.uc-slides-case { display: flex; align-items: center; gap: 10px; padding: 8px;
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.uc-slides-case:hover { border-color: var(--accent); }
.uc-slides-case:has(input[name="uc_ids"]:checked) { border-color: var(--accent);
  background: var(--accent-soft, rgba(2,128,144,.05)); }
.uc-slides-case > input[type="checkbox"] { flex: none; }
.uc-slides-thumb { flex: none; width: 96px; height: 54px; border-radius: 5px; overflow: hidden;
  background: var(--surface-2, #f2f4f5); display: flex; align-items: center; justify-content: center; }
.uc-slides-thumb img { width: 100%; height: 100%; object-fit: cover; }
.uc-slides-thumb-empty { font-size: 11px; color: var(--muted); }
.uc-slides-case-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  align-items: flex-start; }
/* Per-slide photo replacement: a small link-ish control wrapping a hidden file input —
   one bare "Choose file" widget per row read as clutter. */
.uc-slides-case-upload { margin-top: 3px; font-size: 12px; color: var(--accent);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-slides-case-upload:hover { opacity: .8; }
.uc-toggle-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.uc-toggle-disabled { opacity: .55; cursor: not-allowed; }
/* Prominent loader while the popup fetches logo/images — a large centered spinner over a
   dashed placeholder block, so it's obvious work is in progress (the old tiny inline
   spinner was easy to miss). */
.uc-prep-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 30px 16px; text-align: center; font-size: 13px; color: var(--text-muted);
  border: 1px dashed var(--border); border-radius: 9px; background: var(--bg-elev-2);
}
.uc-prep-loading .uc-spinner { width: 30px; height: 30px; border-width: 3px; }
.uc-spinner { width: 13px; height: 13px; border: 2px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%; display: inline-block;
  animation: uc-spin .7s linear infinite; }
@keyframes uc-spin { to { transform: rotate(360deg); } }