:root {
  --bg: #f8f7f4;
  --surface: #ffffff;
  --surface2: #f2f0ec;
  --border: rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.15);
  --text: #1a1917;
  --text-2: #6b6964;
  --text-3: #9e9b96;
  --green: #1D9E75;
  --green-bg: #E8F7F1;
  --blue: #2563EB;
  --blue-bg: #EFF4FF;
  --amber: #B45309;
  --amber-bg: #FEF3C7;
  --red: #DC2626;
  --red-bg: #FEF2F2;
  --purple: #6D28D9;
  --purple-bg: #F5F3FF;
  --r: 10px;
  --r-sm: 6px;
  --font: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --nav-w: 220px;
  --transition: 150ms ease;
}

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

/* ── LAYOUT ── */
.app { display: flex; height: 100vh; overflow: hidden; }
.sidebar { width: var(--nav-w); flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
.main { flex: 1; overflow: hidden; display: flex; flex-direction: column; }

/* ── SIDEBAR ── */
.sb-logo { padding: 20px 18px 16px; border-bottom: 1px solid var(--border); }
.sb-logo-mark { display: flex; align-items: center; gap: 8px; }
.sb-icon { width: 28px; height: 28px; background: var(--green); border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.sb-icon svg { width: 14px; height: 14px; stroke: white; fill: none; stroke-width: 2.5; }
.sb-name { font-size: 13px; font-weight: 500; color: var(--text); }
.sb-version { font-size: 11px; color: var(--text-3); margin-top: 1px; }

.sb-section { padding: 16px 12px 8px; }
.sb-section-label { font-size: 10px; font-weight: 500; letter-spacing: .07em; color: var(--text-3); padding: 0 6px; margin-bottom: 4px; }
.sb-nav { flex: 1; overflow-y: auto; padding-bottom: 16px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-sm); cursor: pointer; margin: 1px 6px; transition: background var(--transition); }
.nav-item:hover { background: var(--surface2); }
.nav-item.active { background: var(--surface2); }
.nav-item.active .nav-icon { color: var(--green); }
.nav-item.active .nav-label { color: var(--text); font-weight: 500; }
.nav-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-3); }
.nav-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.nav-label { font-size: 13px; color: var(--text-2); }
.nav-count { margin-left: auto; font-size: 10px; color: var(--text-3); background: var(--surface2); padding: 1px 6px; border-radius: 10px; }

.sb-divider { height: 1px; background: var(--border); margin: 8px 12px; }

/* ── TOP BAR ── */
.topbar { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; flex-wrap: wrap; }
.view-title { font-size: 16px; font-weight: 500; color: var(--text); flex: 1; }
.view-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.search-wrap { position: relative; }
.search-input { border: 1px solid var(--border); border-radius: 7px; padding: 7px 12px 7px 32px; font-size: 13px; font-family: var(--font); background: var(--surface2); color: var(--text); width: 220px; outline: none; transition: border-color var(--transition); }
.search-input:focus { border-color: var(--green); background: white; }
.search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-3); width: 14px; height: 14px; }
.search-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.btn { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 7px; font-size: 13px; font-family: var(--font); cursor: pointer; transition: all var(--transition); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); }
.btn:hover { background: var(--surface2); }
.btn.primary { background: var(--green); color: white; border-color: var(--green); }
.btn.primary:hover { background: #188a64; }
.btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── CONTENT AREA ── */
.content { flex: 1; overflow-y: auto; padding: 24px; }

/* ── VIEW TOGGLE TABS ── */
.view-tabs { display: flex; gap: 2px; background: var(--surface2); border-radius: 8px; padding: 3px; }
.vtab { padding: 6px 14px; border-radius: 6px; font-size: 12px; cursor: pointer; color: var(--text-2); transition: all var(--transition); }
.vtab.active { background: white; color: var(--text); font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* ── FUNDER VIEW ── */
.funder-layout { display: flex; gap: 0; height: 100%; overflow: hidden; }
.funder-list { width: 280px; flex-shrink: 0; overflow-y: auto; border-right: 1px solid var(--border); }
.funder-detail { flex: 1; overflow-y: auto; padding: 24px; }

.funder-item { padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; transition: background var(--transition); }
.funder-item:hover { background: var(--surface2); }
.funder-item.active { background: var(--surface); border-left: 3px solid var(--green); }
.funder-card { padding: 14px 16px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background var(--transition); }
.funder-card:hover { background: var(--surface2); }
.funder-card.active { background: var(--surface); border-left: 3px solid var(--green); }
.fc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fc-name { font-size: 13px; font-weight: 500; color: var(--text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-cat { font-size: 9px; font-weight: 500; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: .04em; }
.fc-cat.active { background: var(--green-bg); color: var(--green); }
.fc-cat.potential { background: var(--blue-bg); color: var(--blue); }
.fc-cat.unlikely { background: var(--surface2); color: var(--text-3); }
.fc-meta { display: flex; gap: 12px; font-size: 11px; color: var(--text-3); }
.fi-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fi-info { flex: 1; min-width: 0; }
.fi-name { font-size: 12px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-status { font-size: 10px; color: var(--text-3); margin-top: 1px; }

.detail-header { margin-bottom: 20px; }
.detail-accent { width: 4px; height: 44px; border-radius: 3px; flex-shrink: 0; }
.detail-name { font-size: 20px; font-weight: 500; color: var(--text); }
.detail-type { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.status-badge { font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; margin-left: auto; }

.detail-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.dtab { padding: 8px 16px; font-size: 13px; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--transition); }
.dtab:hover { color: var(--text); }
.dtab.active { color: var(--text); border-bottom-color: var(--green); font-weight: 500; }

.next-action { background: #FFFBEB; border: 1px solid #FDE68A; border-radius: var(--r); padding: 12px 14px; margin-bottom: 20px; }
.na-label { font-size: 10px; font-weight: 500; letter-spacing: .06em; color: #92400E; margin-bottom: 4px; }
.na-text { font-size: 13px; color: var(--text); line-height: 1.6; }

.info-grid { display: grid; grid-template-columns: 100px 1fr; gap: 6px 12px; margin-bottom: 16px; font-size: 13px; }
.ig-label { color: var(--text-3); }
.ig-value { color: var(--text); }

.section-heading { font-size: 10px; font-weight: 500; letter-spacing: .07em; color: var(--text-3); margin-bottom: 10px; margin-top: 16px; }

.grant-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--border); }
.grant-amount { font-size: 14px; font-weight: 500; color: var(--text); }
.grant-meta { font-size: 11px; color: var(--text-3); }
.grant-note { font-size: 11px; color: var(--text-2); }
.unrestricted-tag { font-size: 9px; background: var(--green-bg); color: var(--green); padding: 2px 7px; border-radius: 10px; margin-left: 8px; font-weight: 500; }

.contact-card { border: 1px solid var(--border); border-radius: var(--r); padding: 14px; margin-bottom: 10px; }
.contact-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; flex-shrink: 0; letter-spacing: .02em; }
.c-name { font-size: 13px; font-weight: 500; color: var(--text); }
.c-role { font-size: 11px; color: var(--text-3); }
.warmth-dots { display: flex; gap: 3px; margin-left: auto; }
.w-dot { width: 7px; height: 7px; border-radius: 50%; background: #e5e3df; }
.w-dot.on { background: var(--green); }
.key-tag { font-size: 9px; background: var(--green-bg); color: var(--green); padding: 1px 6px; border-radius: 10px; margin-left: 6px; }
.dep-tag { font-size: 9px; background: var(--red-bg); color: var(--red); padding: 1px 6px; border-radius: 10px; }
.c-notes { font-size: 12px; color: var(--text-2); line-height: 1.6; }
.c-email { font-size: 11px; color: var(--blue); display: block; margin-top: 4px; text-decoration: none; }
.c-email:hover { text-decoration: underline; }

.notes-text { font-size: 13px; color: var(--text-2); line-height: 1.7; }

/* ── ORG VIEW ── */
.org-layout { display: flex; gap: 0; height: 100%; overflow: hidden; }
.org-tree { width: 260px; flex-shrink: 0; border-right: 1px solid var(--border); overflow-y: auto; padding: 16px 12px; }
.org-detail { flex: 1; overflow-y: auto; padding: 24px; }
.org-roster { flex: 1; overflow-y: auto; overflow-x: auto; }

.tier-section { margin-bottom: 20px; }
.tier-header { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer; transition: background var(--transition); margin-bottom: 4px; }
.tier-header:hover { background: var(--surface2); }
.tier-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tier-name { font-size: 12px; font-weight: 500; color: var(--text); flex: 1; }
.tier-count { font-size: 10px; color: var(--text-3); }
.tier-connector { width: 1px; height: 12px; background: var(--border); margin: 0 15px; }
.person-node { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 24px; border-radius: var(--r-sm); cursor: pointer; transition: background var(--transition); }
.person-node:hover { background: var(--surface2); }
.person-node.selected { background: var(--green-bg); }
.pn-av { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 500; flex-shrink: 0; }
.pn-name { font-size: 12px; color: var(--text); flex: 1; }
.pn-role { font-size: 10px; color: var(--text-3); }

.person-card-full { max-width: 560px; }
.pcf-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.pcf-av { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; flex-shrink: 0; }
.pcf-name { font-size: 18px; font-weight: 500; color: var(--text); }
.pcf-role { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.pcf-org { font-size: 13px; color: var(--blue); margin-top: 3px; }
.tier-badge { font-size: 10px; font-weight: 500; padding: 3px 9px; border-radius: 20px; }

.campaign-box { background: var(--surface2); border-radius: var(--r); padding: 12px 14px; margin-bottom: 14px; }
.cb-title { font-size: 13px; font-weight: 500; color: var(--text); }
.cb-status { font-size: 12px; color: var(--text-2); margin-top: 3px; }
.progress-bar { height: 3px; background: var(--border); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--green); border-radius: 2px; }

/* ── ROSTER TABLE ── */
.roster-filters { display: flex; gap: 6px; padding: 14px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; align-items: center; }
.filter-btn { padding: 5px 12px; border-radius: 20px; font-size: 12px; cursor: pointer; border: 1px solid var(--border); color: var(--text-2); background: var(--surface); transition: all var(--transition); }
.filter-btn.active { background: var(--green); color: white; border-color: var(--green); }
.roster-search { margin-left: auto; }
.roster-search input { border: 1px solid var(--border); border-radius: 7px; padding: 5px 10px; font-size: 12px; font-family: var(--font); background: var(--surface2); color: var(--text); width: 180px; outline: none; }
.tier-pill { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 20px; display: inline-block; }

/* ── RELATIONSHIP VIEW ── */
.rel-layout { display: flex; gap: 0; height: 100%; overflow: hidden; }

/* ── INTERACTION LOG ── */
.int-item { padding: 12px 0; border-bottom: 1px solid var(--border); }
.int-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.int-date { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); }
.int-type { font-size: 10px; background: var(--surface2); border-radius: 8px; padding: 1px 7px; color: var(--text-2); }
.int-person { font-size: 11px; color: var(--blue); }
.int-summary { font-size: 13px; color: var(--text); line-height: 1.5; }
.int-outcome { font-size: 11px; color: var(--text-3); font-style: italic; margin-top: 2px; }

/* ── LOG FORM ── */
.log-form { background: var(--surface2); border-radius: var(--r); padding: 16px; margin-bottom: 20px; }
.form-row { margin-bottom: 10px; }
.form-label { font-size: 11px; color: var(--text-3); margin-bottom: 4px; display: block; }
.form-row input, .form-row select, .form-row textarea { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font-size: 13px; font-family: var(--font); background: white; color: var(--text); outline: none; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--green); }
.form-row textarea { resize: vertical; min-height: 70px; }
.form-row .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

/* ── EMPTY STATE ── */
.empty { text-align: center; padding: 60px 20px; color: var(--text-3); font-size: 14px; }
.empty-icon { width: 40px; height: 40px; margin: 0 auto 12px; opacity: .3; }

/* ── UPLOADS ─────────────────────────────────────────────────────────────
   The Upload data view follows the Requested changes precedent:
   "+ New upload" button top-right of the page header, modal for the
   create flow, a stats bar with click-to-filter, status filter dropdown,
   and a tight <table class="data-table"> for the list — same shape as
   Requested changes. Click a row to open the per-upload detail modal
   (description, status note, comment thread, reply, download, delete).
   Drag-anywhere shows a full-tab overlay that opens the create modal
   pre-loaded with the dropped files. */
/* Inline note + summary blocks live INSIDE the detail modal (replacing
   the old row-level renderings). Names kept stable for grep history. */
.up-row-summary { font-size: 12px; color: #065F46; background: #F0FDF4; padding: 8px 12px; border-radius: 6px; margin-bottom: 14px; line-height: 1.45; }
.up-row-asknote { font-size: 13px; color: #92400E; background: #FFFBEB; padding: 10px 12px; border-radius: 6px; margin-bottom: 14px; line-height: 1.5; white-space: pre-wrap; border-left: 3px solid #D97706; }
.up-row-rejnote { font-size: 13px; color: #991B1B; background: #FEF2F2; padding: 10px 12px; border-radius: 6px; margin-bottom: 14px; line-height: 1.5; white-space: pre-wrap; border-left: 3px solid #DC2626; }
.up-comment { font-size: 12px; padding: 8px 10px; background: var(--surface2); border-radius: 6px; margin-top: 6px; line-height: 1.5; }
.up-comment.system { border-left: 3px solid #DC2626; background: #FEF2F2; }
.up-comment-meta { font-size: 10px; color: var(--text-3); margin-bottom: 2px; }
.up-status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; flex-shrink: 0; }
.up-status-uploaded { background: var(--surface2); color: var(--text-2); }
.up-status-needs_info { background: #FFEDD5; color: #9A3412; }
.up-status-done { background: #E8F7F1; color: #1D9E75; }
.up-status-rejected { background: #FEE2E2; color: #991B1B; }
/* New LLM-pipeline statuses (spec: 2026-05-10-spreadsheet-ingest.md). */
.up-status-processing { background: #DBEAFE; color: #1E40AF; }
.up-status-proposal_ready { background: #FEF3C7; color: #92400E; }
.up-status-approved { background: #E8F7F1; color: #1D9E75; }
.up-status-not_ingestable { background: var(--surface2); color: var(--text-3); }
.up-status-failed { background: #FEE2E2; color: #991B1B; }
.up-status-failed_human_rejected { background: #FEE2E2; color: #991B1B; }
/* CR-D859EE4A: chat-driven pre-extract states. */
.up-status-initial_review { background: var(--purple-bg); color: var(--purple); }
.up-status-awaiting_answers { background: #FFEDD5; color: #9A3412; }
.up-status-ready_to_process { background: #E8F7F1; color: #1D9E75; }
/* 2026-05-18: revert applied. Plan: ~/.claude/plans/i-want-to-design-curried-cerf.md */
.up-status-reverted { background: var(--red-bg); color: #991B1B; }

/* Revert panel — twin of the proposal panel, lives inside the upload
 * detail modal. Mockup: docs/briefs/_mockup-2026-05-18-upload-revert.html.
 * Reuses up-proposal-panel base + chip + section primitives; only adds
 * the bucket-specific colours and the conflict-row affordance. */
.up-chip-delete { background: var(--red-bg); color: #991B1B; }
.up-chip-restore { background: var(--green-bg); color: #166534; }
.up-chip-conflict { background: var(--amber-bg); color: #92400E; }
.up-chip-gone { background: var(--surface); color: var(--text-3); border: 1px dashed var(--border-strong); }

.up-revert-section-pill { font-size: 10px; padding: 2px 8px; border-radius: 999px; font-weight: 600; margin-left: 6px; }
.up-revert-section-pill.delete { background: var(--red-bg); color: #991B1B; }
.up-revert-section-pill.restore { background: var(--green-bg); color: #166534; }
.up-revert-section-pill.conflict { background: var(--amber-bg); color: #92400E; }
.up-revert-section-pill.gone { background: var(--surface2); color: var(--text-3); }

.up-row-conflict { background: #FFFBEB; }
.up-row-conflict td:first-child { border-left: 3px solid #D97706; }
.up-row-gone td { color: var(--text-3); }
.up-row-gone td:first-child { border-left: 3px dashed var(--border-strong); }
.up-diff-list { margin: 4px 0 0; font-size: 11px; line-height: 1.55; font-family: var(--font-mono); }
.up-diff-list > div { padding: 1px 0; }
.up-diff-field { color: var(--text-3); }
.up-diff-snapshot { color: #166534; }
.up-diff-current { color: var(--amber); }
.up-diff-note { font-size: 11px; color: var(--amber); margin-top: 4px; font-style: italic; }

.up-conflict-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.up-conflict-pill { font-size: 10px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); background: white; color: var(--text-2); cursor: pointer; font-family: var(--font); }
.up-conflict-pill.on { background: var(--amber-bg); border-color: #D97706; color: #92400E; font-weight: 500; }
.up-conflict-pill.danger.on { background: var(--red-bg); border-color: var(--red); color: #991B1B; }

.up-revert-banner { background: var(--red-bg); border: 1px solid #FCA5A5; border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; display: flex; gap: 12px; align-items: flex-start; }
.up-revert-banner .ico { font-size: 18px; line-height: 1; color: var(--red); flex-shrink: 0; }
.up-revert-banner .body { font-size: 12px; line-height: 1.55; color: #991B1B; }
.up-revert-banner .body strong { font-weight: 600; }

.up-revert-confirm { background: var(--red-bg); border: 1px solid #FCA5A5; border-radius: 8px; padding: 12px 14px; margin-top: 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.up-revert-confirm .body { flex: 1; font-size: 12px; color: #991B1B; }
.up-revert-confirm .body strong { font-weight: 600; }
.up-revert-confirm .actions { display: flex; gap: 8px; }

.up-revert-done { background: var(--green-bg); border: 1px solid #A7F3D0; border-radius: 10px; padding: 14px 16px; margin: 14px 0; }
.up-revert-done h3 { font-size: 13px; font-weight: 600; color: #166534; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.up-revert-done .summary { font-size: 12px; color: #166534; line-height: 1.5; }
.up-revert-done .meta { font-size: 11px; color: var(--text-3); margin-top: 8px; font-family: var(--font-mono); }

.up-revert-empty { background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 10px; padding: 14px 16px; margin: 14px 0; display: flex; gap: 12px; align-items: flex-start; }
.up-revert-empty .ico { font-size: 18px; line-height: 1; color: var(--text-3); flex-shrink: 0; }
.up-revert-empty .body { font-size: 13px; color: var(--text-2); line-height: 1.55; }
.up-revert-empty .body strong { color: var(--text); }

.btn.danger-ghost { color: var(--red); border-color: #FCA5A5; background: white; }
.btn.danger-ghost:hover { background: var(--red-bg); }
.btn.danger { background: var(--red); color: white; border-color: var(--red); }
.btn.danger:hover { background: #b91c1c; }
/* Proposal preview panel inside the upload detail modal. */
.up-proposal-panel { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 14px 0; }
.up-proposal-meta { font-size: 11px; color: var(--text-3); margin-bottom: 10px; }
.up-proposal-state { font-size: 13px; padding: 8px 12px; border-radius: 6px; margin: 8px 0 12px; display: flex; align-items: center; gap: 8px; }
.up-proposal-state-processing { background: #DBEAFE; color: #1E3A8A; }
.up-proposal-state-failed { background: #FEE2E2; color: #991B1B; gap: 12px; }
.up-proposal-state-rejected { background: #FEE2E2; color: #991B1B; }
.up-proposal-state-approved { background: #E8F7F1; color: #166534; }
.up-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: up-spin 0.8s linear infinite; }
@keyframes up-spin { to { transform: rotate(360deg); } }
.up-proposal-reason { background: var(--surface); border-left: 3px solid var(--text-3); padding: 10px 14px; border-radius: 4px; font-size: 13px; color: var(--text); margin: 10px 0; line-height: 1.5; }
.up-proposal-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.up-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; }
.up-chip-add { background: #E8F7F1; color: #166534; }
.up-chip-edit { background: #FEF3C7; color: #92400E; }
.up-proposal-detail { display: flex; flex-direction: column; gap: 12px; max-height: 480px; overflow-y: auto; padding-right: 4px; margin: 10px 0; }
.up-proposal-section h4 { margin: 0 0 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); position: sticky; top: 0; background: var(--surface2); padding: 4px 0; z-index: 1; }
.up-proposal-section-empty h4 { color: var(--text-3); opacity: 0.6; }
.up-proposal-empty { font-size: 12px; color: var(--text-3); font-style: italic; padding: 4px 0; }
.up-proposal-table { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--surface); border-radius: 6px; overflow: hidden; }
.up-proposal-table th { text-align: left; padding: 6px 10px; background: var(--surface2); color: var(--text-3); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.up-proposal-table td { padding: 6px 10px; border-top: 1px solid var(--border); color: var(--text); vertical-align: top; }
.up-change-old { color: var(--text-3); text-decoration: line-through; }
.up-change-new { color: var(--text); }
.up-proposal-history { margin-top: 12px; }
.up-proposal-history summary { font-size: 12px; color: var(--text-2); cursor: pointer; padding: 6px 0; }
.up-history-entry { padding: 6px 0; border-top: 1px solid var(--border); font-size: 12px; }
.up-history-meta { color: var(--text-3); margin-bottom: 4px; }
.up-history-comment { color: var(--text); }
.up-proposal-feedback { margin-top: 14px; }
.up-proposal-feedback label { display: block; font-size: 11px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.up-proposal-feedback textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: var(--font); background: var(--surface); color: var(--text); resize: vertical; min-height: 56px; box-sizing: border-box; }
.up-proposal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.up-proposal-actions button.btn:first-child { margin-right: auto; }
@media (max-width: 600px) {
  .up-proposal-detail { display: none; }
  .up-proposal-mobile-hint { display: block !important; font-size: 12px; color: var(--text-3); padding: 8px 0; }
  .up-proposal-actions { flex-direction: column; align-items: stretch; }
  .up-proposal-actions button.btn:first-child { margin-right: 0; }
  .up-proposal-actions button { min-height: 44px; }
}

/* ── CR-D859EE4A: Upload chatbot — pre-extract clarifying chat ─────────
   Spec: docs/specs/2026-05-14-upload-data-chatbot.md
   Lives inside the upload detail modal, rendered by chat-panel.js. */
.up-chat-panel { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 14px 0; }
.up-chat { display: flex; flex-direction: column; gap: 12px; margin: 10px 0; max-height: 50vh; overflow-y: auto; }
.up-chat-turn { display: flex; flex-direction: column; }
.up-chat-turn-bot { align-items: flex-start; }
.up-chat-turn-user { align-items: flex-end; }
.up-bubble { max-width: 78%; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.55; }
.up-bubble-bot { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.up-bubble-bot-confused { background: #FFFBEB; border-color: transparent; border-left: 3px solid #D97706; color: #92400E; }
.up-bubble-bot-rejected { background: var(--red-bg); border-color: transparent; border-left: 3px solid var(--red); color: #991B1B; }
.up-bubble-bot-ready    { background: var(--green-bg); border-color: transparent; border-left: 3px solid var(--green); color: #0f5c44; }
.up-bubble-user { background: var(--text); color: white; border-bottom-right-radius: 4px; }
.up-bubble-pending { display: inline-flex; align-items: center; gap: 10px; font-style: italic; color: var(--text-2); }
.up-bubble-meta { font-size: 10px; color: var(--text-3); margin-top: 4px; }
.up-bubble-qlist { margin: 8px 0 0; }
.up-bubble-q { margin: 5px 0; line-height: 1.5; }
.up-bubble-qnum { font-weight: 600; color: var(--text); margin-right: 3px; }
.up-bot-avatar { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); margin-bottom: 4px; }
.up-bot-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--text-3); color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; }
.up-bot-dot-questions { background: #D97706; }
.up-bot-dot-rejected  { background: var(--red); }
.up-bot-dot-ready     { background: var(--green); }
.up-pending-label { font-size: 13px; }
.up-chat-turncount { font-size: 10px; color: var(--text-3); text-align: center; margin: 4px 0; }
.up-chat-reply-row { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.up-chat-reply-input { flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-family: var(--font); font-size: 13px; resize: none; min-height: 40px; outline: none; transition: border-color .15s, box-shadow .15s; background: var(--surface); color: var(--text); }
.up-chat-reply-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }
.up-chat-reply-input::placeholder { color: var(--text-3); }
.up-chat-send-btn { background: var(--green); color: white; border: none; border-radius: 8px; padding: 9px 16px; font-family: var(--font); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s; white-space: nowrap; }
.up-chat-send-btn:hover:not(:disabled) { background: #188a64; }
.up-chat-send-btn:disabled { opacity: .4; cursor: not-allowed; }
.up-chat-cta-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.up-chat-cta-sub { font-size: 11px; color: var(--text-3); line-height: 1.4; }
.up-chat-cta-cost { font-size: 11px; color: var(--text-3); margin-left: auto; font-family: var(--font-mono); }
.up-chat-cap-note { font-size: 12px; color: var(--text-2); padding: 8px 12px; background: #FFFBEB; border-left: 3px solid #D97706; border-radius: 4px; margin-top: 10px; }
@media (max-width: 768px) {
  .up-bubble { max-width: 85%; }
  .up-chat-reply-input { min-height: 44px; font-size: 14px; }
  .up-chat-send-btn { min-height: 44px; padding: 10px 18px; }
  .up-chat-reply-row { position: sticky; bottom: 0; background: var(--surface2); z-index: 1; }
  .up-chat-cta-row { flex-direction: column; align-items: stretch; }
  .up-chat-cta-cost { margin-left: 0; }
  .up-chat-cta-row .btn { min-height: 44px; }
}
/* Placeholder row in the Everyone view — non-clickable, muted background. */
.data-table tr.up-placeholder-tr td { background: var(--surface2); color: var(--text-2); cursor: default; }
.data-table tr.up-placeholder-tr:hover td { background: var(--surface2); }
.data-table tr.up-placeholder-tr .who { font-weight: 500; color: var(--text); }
/* Tighter row hint — filename truncates, monospace short code stays narrow. */
.data-table td.up-cell-code { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); white-space: nowrap; }
.data-table td.up-cell-when, .data-table td.up-cell-size { color: var(--text-3); font-size: 12px; white-space: nowrap; }
.data-table td.up-cell-reporter { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.data-table td.up-cell-file { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-table td.up-cell-desc { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
/* "Mine / Everyone" segmented toggle — same shape as wireframe. */
.up-scope-toggle { display: inline-flex; background: var(--surface2); padding: 3px; border-radius: 8px; gap: 2px; }
.up-scope-toggle button { border: 0; background: transparent; padding: 5px 14px; border-radius: 5px; font-size: 12px; font-weight: 500; color: var(--text-3); cursor: pointer; font-family: var(--font); }
.up-scope-toggle button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.up-scope-toggle button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* Secondary tab strip (All / Active / Done / Recently deleted). */
/* Warn variant for "Awaiting your reply" stat (mine view). */
.stats-bar .stat-warn .stat-num { color: #D97706; }
/* "stat.warn" gets a soft amber background only when filter is active. */
.stats-bar .stat-warn.stat-clickable.active { background: #FFFBEB; }
.stats-bar .stat-warn.stat-clickable.active .stat-num,
.stats-bar .stat-warn.stat-clickable.active .stat-label { color: #92400E; }
/* Modal-internal drop zone (uses cr-dropzone visuals). */
.up-modal-drop { border: 2px dashed var(--border); border-radius: 8px; padding: 22px 16px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; background: var(--surface2); }
.up-modal-drop:hover, .up-modal-drop.dragover { border-color: var(--green); background: rgba(29,158,117,0.06); }
.up-modal-drop:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.up-modal-drop .dz-title { font-size: 14px; font-weight: 500; color: var(--text-2); margin-bottom: 4px; }
.up-modal-drop .dz-sub { font-size: 11px; color: var(--text-3); }
.up-file-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.up-file-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface2); padding: 8px 12px; border-radius: 6px; font-size: 13px; }
.up-file-row .up-file-name { color: var(--text); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-file-row .up-file-size { color: var(--text-3); font-size: 11px; flex-shrink: 0; }
.up-file-row .up-file-x { width: 28px; height: 28px; min-width: 28px; border: 0; background: transparent; color: var(--text-3); cursor: pointer; border-radius: 6px; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.up-file-row .up-file-x:hover { background: rgba(0,0,0,0.06); color: var(--red); }
.up-file-row .up-file-x:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.up-modal-progress { font-size: 11px; color: var(--text-3); margin-top: 10px; display: flex; gap: 8px; align-items: center; }
.up-modal-progress .bar { flex: 1; height: 6px; background: var(--surface2); border-radius: 999px; overflow: hidden; }
.up-modal-progress .bar > div { height: 100%; background: var(--green); width: 0; transition: width .15s; }
/* Drag-anywhere full-tab overlay (only active on Upload data view). */
.up-drag-overlay { position: absolute; inset: 0; background: rgba(29,158,117,0.08); border: 3px dashed var(--green); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: var(--green); pointer-events: none; z-index: 50; }
/* CR-034EE593 — Mobile responsive Phase 1.
   - 16px form-control font-size: prevents iOS Safari zooming the page on
     focus when the input is below 16px.
   - 44×44 touch targets on close/X icons (Apple HIG floor).
   - Sidebar becomes an off-canvas drawer; hamburger button toggles it.
   - Modals go full-screen with a sticky header.
   Phase 2 (per-list card layouts, filter sheet, stats grid) is deferred
   until we see how Phase 1 lands. */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
  .modal-close { min-height: 44px; min-width: 44px; }
  .cr-thumb-remove { width: 28px; height: 28px; font-size: 18px; }

  /* Sidebar → off-canvas drawer. transform animates the slide-in. */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 950;
    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
    width: 260px;
  }
  body.drawer-open .sidebar { transform: translateX(0); }

  /* Backdrop appears when drawer is open. Click closes. */
  .drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 940;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s;
  }
  body.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }

  /* Hamburger button visible only on small screens. */
  .nav-hamburger {
    display: flex !important;
    position: fixed; top: 10px; left: 10px;
    z-index: 920;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; cursor: pointer; padding: 0;
    font-size: 22px; line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }
  /* Push the page-title row right so the hamburger doesn't overlap it. */
  .topbar { padding-left: 64px !important; }

  /* Modals go full-screen on phones. Sticky modal-header (when present)
     keeps the close button reachable while scrolling long content. */
  .modal-overlay { padding: 0; }
  .modal-panel, .modal-panel.wide {
    width: 100vw !important; height: 100vh !important;
    max-width: none !important; max-height: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .modal-header { position: sticky; top: 0; z-index: 3; }

  /* Table cells: drop nowrap so timestamp/code/short cells wrap rather
     than forcing the whole table to scroll horizontally. */
  .data-table td, .data-table th { white-space: normal !important; }
  .data-table td.up-cell-code,
  .data-table td.up-cell-when,
  .data-table td.up-cell-size { font-size: 11px; }

  /* Phase 2: tables become row-cards on phone. The thead disappears, each
     <tr> becomes a self-contained block with visible separation, and each
     <td> stacks vertically within its row. The first cell of each row
     gets emphasis since it's almost always the row's identifier (name /
     code / title) — losing the column header is acceptable given the
     visual hierarchy. Inline styles on <tr> (cursor:pointer etc.) are
     preserved; we only override layout properties. */
  .data-table-wrap { overflow-x: visible; }
  .data-table { display: block; }
  .data-table thead { display: none; }
  .data-table tbody { display: block; }
  .data-table tr {
    display: block !important;
    width: 100% !important;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 10px 14px;
    box-sizing: border-box;
  }
  .data-table tr:hover { background: var(--surface) !important; }
  .data-table td {
    display: block !important;
    width: 100% !important;
    padding: 4px 0 !important;
    border: none !important;
    text-align: left !important;
  }
  .data-table td:first-child {
    font-weight: 500;
    font-size: 14px;
    color: var(--text);
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--border) !important;
    margin-bottom: 4px;
  }
  /* Some tables have empty placeholder cells (width:0 or visibility:hidden)
     for layout — keep them out of the flow on phone. */
  .data-table td:empty { display: none !important; }
}

/* Default (desktop): hide the hamburger entirely. */
.nav-hamburger { display: none; }

@media (max-width: 480px) {
  /* On narrow screens the data-table-wrap already scrolls horizontally
     (see .data-table-wrap base rule); keep description/file column caps
     a bit tighter so the visible columns stay readable when scrolled. */
  .data-table td.up-cell-file { max-width: 180px; }
  .data-table td.up-cell-desc { max-width: 200px; }
  .up-modal-drop { padding: 28px 14px; }
  .up-modal-drop .dz-title { font-size: 15px; }
  .up-file-row .up-file-x { width: 44px; height: 44px; min-width: 44px; }
  .btn { min-height: 44px; }
}


/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }

/* ── TOAST ── */
.toast { position: fixed; bottom: 88px; right: 24px; background: var(--text); color: white; padding: 10px 18px; border-radius: 8px; font-size: 13px; opacity: 0; transform: translateY(8px); transition: all .25s; pointer-events: none; z-index: 100; }
.toast.show { opacity: 1; transform: translateY(0); }
/* Re-enable interaction when there's an Undo action — without this the
   default pointer-events:none lets clicks fall through to whatever's
   behind the toast (e.g. an event card), which silently opens that
   card's modal instead of triggering Undo. */
.toast.with-undo { pointer-events: auto; }
.toast.with-undo #toast-undo { display:inline-block; padding:4px 10px; margin-left:14px; border:1px solid #7DD3B5; border-radius:6px; cursor:pointer; font-weight:500; color:#7DD3B5; transition:background .15s; }
.toast.with-undo #toast-undo:hover { background: rgba(125,211,181,0.15); }

/* ── FLAG REVIEW BADGE ── */

/* ── FLAG PANEL ── */

/* ── EVENT FEED ── */
.event-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; padding: 24px; }
.event-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; transition: box-shadow var(--transition); position: relative; }
.event-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.06); }
/* 180px (was 160px) so portrait WhatsApp photos aren't cropped to a sliver.
   object-position center keeps the focal point visible on landscape too. */
.event-photo { width: 100%; height: 180px; background: var(--surface2); display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 32px; position: relative; overflow: hidden; }
.event-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.event-photo .event-photo-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-3); }
.event-photo .event-photo-placeholder svg { width: 36px; height: 36px; opacity: 0.5; }
.event-photo .event-photo-placeholder-label { font-size: 11px; opacity: 0.7; }
.event-type-badge { position: absolute; top: 10px; left: 10px; font-size: 10px; font-weight: 500; padding: 3px 10px; border-radius: 20px; backdrop-filter: blur(8px); z-index: 2; }
/* Country flag chip — top-right corner of the event card. */
.event-flag { position: absolute; top: 10px; right: 10px; font-size: 18px; line-height: 1; padding: 3px 7px; border-radius: 14px; background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); z-index: 2; }
.event-body { padding: 14px; }
.event-title { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 6px; }
.event-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--text-3); margin-bottom: 8px; }
.event-meta-item { display: flex; align-items: center; gap: 3px; }
.event-stats { display: flex; gap: 12px; margin-bottom: 8px; }
.event-stat { display: flex; flex-direction: column; align-items: center; padding: 8px 12px; background: var(--surface2); border-radius: var(--r-sm); flex: 1; }
.event-stat-num { font-size: 18px; font-weight: 500; color: var(--text); }
.event-stat-label { font-size: 10px; color: var(--text-3); }
.event-notes { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.event-reporter { font-size: 11px; color: var(--text-3); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.event-attendees { display: flex; gap: -4px; margin-top: 8px; }
.event-att-av { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 500; border: 2px solid white; margin-left: -4px; }
.event-att-av:first-child { margin-left: 0; }

.event-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.event-filters select, .event-filters input[type="date"] { border: 1px solid var(--border); border-radius: 7px; padding: 6px 10px; font-size: 12px; font-family: var(--font); background: var(--surface); color: var(--text); outline: none; }

/* ── EVENTS TABLE ── */
/* Edge-to-edge data table used by People, Events, and (sub-view) Unis.
 * Header is grey, body is white, rows separated by a faint border.
 * No outer rounding or padding — the table sits flush against the
 * viewport edges. */
.data-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.data-table th { font-size: 10px; font-weight: 500; letter-spacing: .06em; color: var(--text-3); padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); background: var(--surface2); white-space: nowrap; position: sticky; top: 0; }
.data-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); }
.data-table tr:hover td { background: var(--surface2); cursor: pointer; }
.data-table tr:last-child td { border-bottom: none; }
/* Wrapper applied to the parent so wide tables can scroll horizontally
 * without the rest of the page going wider than the viewport. */
.data-table-wrap { width: 100%; overflow-x: auto; }
/* Legacy alias — older code referenced .events-table / .roster-table. */
.events-table, .roster-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.events-table th, .roster-table th { font-size: 10px; font-weight: 500; letter-spacing: .06em; color: var(--text-3); padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); background: var(--surface2); white-space: nowrap; }
.events-table td, .roster-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); }
.events-table tr:hover td, .roster-table tr:hover td { background: var(--surface2); cursor: pointer; }
.events-table tr:last-child td, .roster-table tr:last-child td { border-bottom: none; }

/* ── MAP ── */
.events-map { width: 100%; height: calc(100vh - 200px); border-radius: var(--r); border: 1px solid var(--border); overflow: hidden; }

/* ── UNI LAYOUT ── */
.uni-layout { display: flex; gap: 0; height: 100%; overflow: hidden; }
.uni-list-panel { width: 320px; flex-shrink: 0; border-right: 1px solid var(--border); overflow-y: auto; }
.uni-detail-panel { flex: 1; overflow-y: auto; padding: 24px; }
.uni-item { padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background var(--transition); }
.uni-item:hover { background: var(--surface2); }
.uni-item.active { background: var(--surface); border-left: 3px solid var(--green); }
.uni-status-won { display: inline-block; font-size: 9px; font-weight: 500; padding: 2px 7px; border-radius: 10px; background: var(--green-bg); color: var(--green); }
.uni-status-active { display: inline-block; font-size: 9px; font-weight: 500; padding: 2px 7px; border-radius: 10px; background: var(--blue-bg); color: var(--blue); }
.uni-link { color: var(--blue); cursor: pointer; text-decoration: none; }
.uni-link:hover { text-decoration: underline; }

/* ── ANALYTICS ── */
.analytics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; text-align: center; }
.stat-card-num { font-size: 28px; font-weight: 500; color: var(--text); }
.stat-card-label { font-size: 11px; color: var(--text-3); margin-top: 4px; }

.chart-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; margin-bottom: 16px; }
.chart-title { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 14px; }
.bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 140px; }
.bar-col { display: flex; flex-direction: column; align-items: center; flex: 1; gap: 4px; }
.bar { background: var(--green); border-radius: 3px 3px 0 0; width: 100%; min-height: 2px; transition: height .3s; }
.bar-label { font-size: 9px; color: var(--text-3); white-space: nowrap; }
.bar-value { font-size: 10px; color: var(--text-2); font-weight: 500; }

.table-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; margin-bottom: 16px; }
.table-section-title { font-size: 13px; font-weight: 500; color: var(--text); padding: 16px 16px 12px; }
.mini-table { width: 100%; border-collapse: collapse; }
.mini-table th { font-size: 10px; font-weight: 500; letter-spacing: .05em; color: var(--text-3); padding: 8px 16px; text-align: left; border-bottom: 1px solid var(--border); background: var(--surface2); }
.mini-table td { padding: 8px 16px; font-size: 12px; color: var(--text); border-bottom: 1px solid var(--border); }
.mini-table tr:last-child td { border-bottom: none; }

.analytics-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .analytics-two-col { grid-template-columns: 1fr; } }

/* ── DASHBOARD ── */
.dash-metrics { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.dash-metric { flex: 1; min-width: 140px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px; text-align: center; }
.dm-num { font-size: 26px; font-weight: 500; color: var(--text); }
.dm-label { font-size: 11px; color: var(--text-3); margin-top: 4px; }
.dm-change { font-size: 11px; margin-top: 4px; }
.dm-change.warn { color: var(--amber); }
.dm-change.good { color: var(--green); }

.dash-table { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.dash-table-title { font-size: 14px; font-weight: 500; padding: 16px 20px 12px; color: var(--text); }
.dash-table table { width: 100%; border-collapse: collapse; }
.dash-table th { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; color: var(--text-3); padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--border); background: var(--surface2); }
.dash-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); }
.dash-table tr:hover td { background: var(--surface2); cursor: pointer; }
.dash-table tr:last-child td { border-bottom: none; }
.dash-table tr.dim td { opacity: 0.45; }

.pbu-pill { font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 12px; display: inline-block; white-space: nowrap; }
.pbu-confirmed { background: #E8F7F1; color: #1D9E75; }
.pbu-interested { background: #EFF4FF; color: #2563EB; }
.pbu-possible { background: #FEF3C7; color: #92400E; }
.pbu-unlikely { background: #FEF2F2; color: #DC2626; }
.pbu-unknown { background: var(--surface2); color: var(--text-3); }

.ar-tag { font-size: 10px; padding: 2px 7px; border-radius: 8px; background: #FEF3C7; color: #92400E; }
.pbu-tag { font-size: 10px; padding: 2px 7px; border-radius: 8px; background: #E8F7F1; color: #1D9E75; }

.dash-pipeline-label { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; color: var(--text-3); text-transform: uppercase; padding: 6px 16px; }
.dash-section-row { background: var(--surface2); }
.dash-section-row td { font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.05em; color: var(--text-3) !important; text-transform: uppercase; padding: 8px 16px !important; }

/* ── SHARED MODAL ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-panel { background: white; border-radius: 14px; width: 600px; max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.15); }
.modal-panel.wide { width: 720px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: white; z-index: 2; border-radius: 14px 14px 0 0; }
.modal-header h2 { font-size: 16px; font-weight: 500; color: var(--text); margin: 0; }
.modal-close { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 4px 12px; font-size: 12px; cursor: pointer; color: var(--text-2); font-family: var(--font); }
.modal-close:hover { background: var(--border); }
.modal-section { padding: 0 24px; }
.modal-section-title { font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--text-3); text-transform: uppercase; margin: 20px 0 10px; }
.modal-body { padding: 16px 24px 24px; }
.modal-info-grid { display: grid; grid-template-columns: 100px 1fr; gap: 6px 12px; font-size: 13px; margin-bottom: 16px; }
.modal-info-grid .label { color: var(--text-3); font-size: 12px; }
.modal-info-grid .value { color: var(--text); }

/* ── CHANGE-REQUEST FAB + MODAL ── */
/* z-index above Leaflet (~700) so the FAB doesn't disappear behind the
   universities map. Below modal overlays (1000+) so it can be hidden by
   body.modal-open instead of fighting overlays for clicks. */
/* CR-943DA299: bumped from 800 → 1100. Leaflet's overlay pane sits at
   z-index 600 by default, but tooltip/popup containers + custom map
   controls push to 700–1000, which was hiding the FAB on the unis map.
   Modals are 2000+ so the FAB still gets hidden under them via the
   body.modal-open rule below. */
.cr-fab { position: fixed; bottom: max(24px, env(safe-area-inset-bottom)); right: 24px; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 4px 14px rgba(0,0,0,0.10); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1100; transition: background 0.15s, transform 0.1s, box-shadow 0.15s, color 0.15s; color: var(--text-2); }
/* Hide the FAB while any modal is open — it has nothing to do while the
   user is mid-task and would compete for clicks at the corner. */
body.modal-open .cr-fab { display: none !important; }
/* Hide the global "Suggest a change" FAB on the Ask-the-data tab — it
   collides with the sticky send button, and the per-answer 👎 button on
   each Ask card is the right feedback channel for that surface. */
body.on-ask-the-data-view .cr-fab { display: none !important; }
.cr-fab:hover { background: var(--green); color: white; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.cr-fab:active { transform: translateY(0); }
.cr-fab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cr-fab-tooltip { position: absolute; right: 56px; top: 50%; transform: translateY(-50%); background: var(--text); color: white; padding: 5px 10px; border-radius: 6px; font-size: 12px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s; }
.cr-fab:hover .cr-fab-tooltip { opacity: 1; }
.cr-textarea { width: 100%; min-height: 140px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-family: var(--font); font-size: 13px; resize: vertical; box-sizing: border-box; color: var(--text); background: var(--surface); }
.cr-textarea:focus { outline: none; border-color: var(--green); }
.cr-dropzone { border: 2px dashed var(--border); border-radius: 10px; padding: 18px; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; background: var(--surface2); margin-top: 12px; }
.cr-dropzone:hover, .cr-dropzone.dragover { border-color: var(--green); background: rgba(29,158,117,0.06); }
.cr-dropzone-primary { font-size: 14px; font-weight: 500; color: var(--text-2); margin-bottom: 4px; }
.cr-dropzone-hint { font-size: 11px; color: var(--text-3); }
.cr-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cr-thumb { position: relative; width: 80px; height: 80px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); background: var(--surface2); }
.cr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-thumb-remove { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,0.6); color: white; font-size: 13px; line-height: 1; cursor: pointer; border: none; display: flex; align-items: center; justify-content: center; padding: 0; }
.cr-thumb-remove:hover { background: var(--red); }
.cr-meta { font-size: 11px; color: var(--text-3); margin-top: 14px; line-height: 1.5; }
.cr-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
@media (max-width: 640px) {
  .cr-fab { width: 44px; height: 44px; bottom: max(16px, env(safe-area-inset-bottom)); right: 16px; }
  .cr-fab-tooltip { display: none; }
}

/* ── DEPARTED ROW ── */
.row-departed td { opacity: 0.4; }
.row-departed:hover td { opacity: 0.7; }

/* ── PILL TOGGLES ── */
.pill-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pill { font-size: 11px; padding: 4px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; transition: all var(--transition); user-select: none; white-space: nowrap; }
.pill:hover { border-color: var(--border-strong); color: var(--text); }
.pill.active { background: var(--green-bg); border-color: var(--green); color: var(--green); font-weight: 500; }

/* ── STATS BAR ── */
.stats-bar { display: flex; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; flex-wrap: wrap; align-items: center; }
.stats-bar .stat-item { text-align: center; flex: 1 1 0; min-width: 70px; padding: 4px 8px; border-radius: 6px; }
/* Faint vertical separator between Total and the per-country counts. */
.stats-bar .stat-divider { width: 1px; align-self: stretch; background: var(--border); margin: 4px 4px; flex: 0 0 auto; }
.stats-bar .stat-num { font-size: 20px; font-weight: 500; color: var(--text); }
.stats-bar .stat-label { font-size: 10px; color: var(--text-3); margin-top: 2px; }
.stats-bar .stat-clickable { cursor: pointer; transition: background var(--transition); }
.stats-bar .stat-clickable:hover { background: var(--surface2); }
.stats-bar .stat-clickable.active { background: var(--green-bg); }
.stats-bar .stat-clickable.active .stat-num { color: var(--green); }
.stats-bar .stat-clickable.active .stat-label { color: var(--green); }

/* ── UPLOAD SUCCESS TICK (CR-151D6659) ──
 * Trailing cell on rows whose primary status is a success outcome
 * (done / approved). Failed / rejected rows are terminal too but do
 * not get the tick — a green check on a rejected upload would lie. */
.up-cell-tick { width: 28px; text-align: center; color: var(--green); }
.up-success-tick { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--green); }
.up-success-tick svg { width: 16px; height: 16px; }

/* sr-only — visually hidden, accessible to screen readers. Used by the
 * trailing tick column's <th> label. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── MULTI-SELECT DROPDOWN ── */
/* Used by the People filters bar. Single-line button that opens a
 * popover of checkboxes. State lives in state.peopleFilters[id]. */
.ms { position: relative; display: inline-block; }
.ms-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px 5px 10px; font-family: var(--font); background: white; color: var(--text); cursor: pointer; max-width: 220px; }
.ms-btn:hover { background: var(--surface2); }
.ms-btn .ms-summary { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.ms-btn .ms-label { color: var(--text-3); }
.ms-btn .ms-chev { width: 12px; height: 12px; opacity: 0.5; flex-shrink: 0; }
.ms-popover { position: absolute; top: calc(100% + 4px); left: 0; min-width: 200px; max-height: 320px; overflow-y: auto; background: white; border: 1px solid var(--border); border-radius: 7px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); z-index: 30; padding: 4px; }
.ms-clear { font-size: 11px; color: var(--blue); padding: 6px 10px; cursor: pointer; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.ms-clear:hover { background: var(--surface2); }
.ms-opt { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; border-radius: 4px; }
.ms-opt:hover { background: var(--surface2); }
.ms-opt input { margin: 0; cursor: pointer; }
.ms-opt-count { margin-left: auto; color: var(--text-3); font-size: 10px; }

/* ── FILTER BAR (matches the events tab pattern) ── */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 24px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
.filter-bar .filter-label { font-size: 11px; color: var(--text-3); margin-left: 4px; }
.filter-bar .filter-date { font-size: 12px; border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; font-family: var(--font); outline: none; background: white; }
.filter-bar .filter-search { font-size: 12px; border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-family: var(--font); background: var(--surface2); color: var(--text); outline: none; width: 200px; margin-left: auto; }
/* CR-DFA71B27: when a filter input has a non-default value, give it a
   green border + halo so it's obvious from a glance the list is being
   narrowed. The filter-bar itself also picks up a green-tinted left
   accent when ANY filter is active (set via .has-active by the render
   helpers). Without this it was easy to land on a filtered list and
   wonder where half the rows went. */
.filter-bar.has-active { box-shadow: inset 4px 0 0 var(--green); }
.filter-bar input.filter-search:not(:placeholder-shown),
.filter-bar input.filter-date[data-active="true"],
.filter-bar select.filter-select[data-active="true"],
.filter-bar [data-filter-active="true"] {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 1px var(--green);
}


/* ── ACTIVE TOGGLE ── */
.toggle-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.toggle-switch { width: 32px; height: 18px; border-radius: 9px; background: var(--border-strong); position: relative; cursor: pointer; transition: background var(--transition); }
.toggle-switch.on { background: var(--green); }
.toggle-switch::after { content: ''; width: 14px; height: 14px; border-radius: 50%; background: white; position: absolute; top: 2px; left: 2px; transition: transform var(--transition); }
.toggle-switch.on::after { transform: translateX(14px); }

/* ── PENDING (WhatsApp ingest) ── */
.sb-badge { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; margin-left:auto; border-radius:9999px; background:var(--green); color:white; font-size:11px; font-weight:500; line-height:1; }
.nav-item .sb-badge { margin-left:auto; }
/* Pending section header — flush-left with the sidebar (the .data-table
   cells below already sit edge-to-edge; the 24px inset was a residual
   that misaligned the section banner). 2026-05-18: dropped to 0 per
   the frontend unification plan. */
.pending-section-header { display:flex; align-items:center; gap:10px; padding:14px 0 8px; font-size:11px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:var(--green); }
.pending-section-header::before { content:''; flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--green); }
.pending-section-header::after { content:''; flex:1; height:1px; background:linear-gradient(to right, var(--green), transparent); opacity:0.3; }
.approved-section-header { padding:14px 24px 8px; font-size:11px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-3); }
.pending-card { border:2px dashed var(--green) !important; background:linear-gradient(135deg, var(--green-bg) 0%, var(--surface) 100%); position:relative; }
.pending-chip { display:inline-flex; align-items:center; gap:4px; position:absolute; top:10px; left:10px; background:var(--green); color:white; font-size:10px; font-weight:500; padding:3px 8px; border-radius:9999px; z-index:2; }
/* Top-right chip on pending cards (where camps put UPCOMING). Universities use
   this for the fuzzy-match confidence indicator: HIGH 94% / MED 72% / "Likely
   new". Solid background (not translucent) so contrast holds over any photo —
   adversarial-editor a11y finding. */
.event-confidence-chip { position:absolute; top:10px; right:10px; font-size:10px; font-weight:500; padding:3px 10px; border-radius:9999px; color:#fff; z-index:2; }
.event-confidence-chip.high { background:var(--green); }
.event-confidence-chip.med { background:var(--amber); }
.event-confidence-chip.low { background:rgba(0,0,0,0.6); }
.pending-row { background:linear-gradient(90deg, var(--green-bg) 0%, transparent 60%); border-left:4px solid var(--green) !important; }
.confidence-chip { display:inline-flex; align-items:center; font-size:10px; font-weight:500; padding:1px 6px; border-radius:9999px; margin-left:6px; vertical-align:middle; }
.confidence-chip.high { background:#F3F4F6; color:#6B7280; }
.confidence-chip.med { background:var(--amber-bg); color:var(--amber); }
.confidence-chip.low { background:var(--red-bg); color:var(--red); }
.stat-pending-sub { font-size:10px; font-weight:500; color:var(--green); margin-top:2px; }
.bulk-action-bar { display:flex; align-items:center; gap:12px; padding:8px 16px; background:var(--green-bg); border:1px solid var(--green); border-radius:8px; margin:8px 0; font-size:12px; }
.bulk-action-bar .count { font-weight:500; color:var(--green); }
.bulk-action-bar .spacer { flex:1; }
.btn-approve { background:var(--green); color:white; border:none; padding:6px 14px; border-radius:6px; font-size:12px; font-weight:500; cursor:pointer; font-family:var(--font); }
.btn-approve:hover { opacity:0.9; }
.btn-reject { background:white; color:var(--red); border:1px solid var(--red); padding:6px 14px; border-radius:6px; font-size:12px; font-weight:500; cursor:pointer; font-family:var(--font); }
.btn-reject:hover { background:var(--red-bg); }
.status-filter { display:inline-flex; gap:0; background:var(--surface2); border-radius:8px; padding:2px; font-size:12px; }
.status-filter .opt { padding:4px 10px; border-radius:6px; cursor:pointer; color:var(--text-2); font-weight:500; }
.status-filter .opt.active { background:white; color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,0.05); }
.source-block { background:var(--surface2); border-radius:8px; padding:12px; font-size:12px; margin:8px 0; }
.source-block .label { font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-3); margin-bottom:4px; }
.source-block .text { color:var(--text-2); line-height:1.5; font-style:italic; }

/* ── ASK-THE-DATA TAB ── */
.ask-content { display:flex; flex-direction:column; }
.ask-conversation { padding:20px 24px 12px; max-width:920px; width:100%; margin:0 auto; }
.ask-empty { padding:40px 24px; max-width:760px; margin:0 auto; }
.ask-capability { color:var(--text-2); font-size:14px; line-height:1.55; padding:14px 16px; background:var(--surface2); border-radius:10px; margin-bottom:18px; }
.ask-chips { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ask-chip { text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 14px; font:inherit; font-size:13px; color:var(--text); cursor:pointer; transition:background var(--transition), border-color var(--transition); }
.ask-chip:hover { background:var(--surface2); border-color:var(--border-strong); }
.ask-chip:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.ask-empty-footer { color:var(--text-3); font-size:12px; margin-top:14px; }
.ask-turn { padding:18px 0; border-top:1px solid var(--border); }
.ask-turn:first-child { border-top:none; padding-top:0; }
.ask-q { display:flex; justify-content:flex-end; margin-bottom:10px; }
.ask-q-bubble { background:var(--surface2); border-radius:10px; padding:10px 14px; max-width:80%; white-space:pre-wrap; font-size:14px; }
.ask-a { display:block; }
.ask-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 18px; }
.ask-card.ask-error { border-color:var(--red); background:var(--red-bg); }
.ask-card-text { font-size:15px; line-height:1.55; color:var(--text); }
.ask-card-text p { margin:0 0 12px 0; }
.ask-card-text p:last-child { margin-bottom:0; }
.ask-card-muted { color:var(--text-3); font-style:italic; }
.ask-warnings { margin-top:8px; font-size:12px; color:var(--amber); background:var(--amber-bg); padding:6px 10px; border-radius:6px; }
.ask-chart-wrap { margin-top:14px; padding:10px; background:var(--surface2); border-radius:8px; }
.ask-chart-title { font-size:12px; font-weight:500; color:var(--text-2); margin-bottom:6px; }
.ask-chart-canvas { width:100% !important; height:280px !important; max-height:40vh; }
.ask-table-toggle { margin-top:12px; }
.ask-table-scroll { margin-top:10px; overflow-x:auto; max-height:340px; overflow-y:auto; border:1px solid var(--border); border-radius:8px; }
.ask-table { width:100%; border-collapse:collapse; font-size:13px; }
.ask-table th, .ask-table td { padding:8px 12px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
.ask-table th { background:var(--surface2); font-weight:500; position:sticky; top:0; z-index:1; }
.ask-table tr:last-child td { border-bottom:none; }
.ask-details { margin-top:14px; }
.ask-details summary { cursor:pointer; color:var(--text-2); font-size:12px; padding:6px 0; user-select:none; }
.ask-details summary:hover { color:var(--text); }
.ask-details summary:focus-visible { outline:2px solid var(--green); outline-offset:2px; border-radius:4px; }
.ask-details-pre { font-family:'DM Mono', ui-monospace, monospace; font-size:11px; line-height:1.5; color:var(--text-2); background:var(--surface2); padding:10px 12px; border-radius:8px; white-space:pre-wrap; word-break:break-word; max-height:260px; overflow:auto; }
.ask-card-actions { display:flex; align-items:center; gap:8px; margin-top:14px; }
.ask-action-spacer { flex:1; }
.ask-btn-secondary { background:var(--surface2); border:1px solid var(--border); color:var(--text); padding:6px 12px; border-radius:6px; font-size:12px; font-weight:500; cursor:pointer; font-family:var(--font); }
.ask-btn-secondary:hover { background:var(--bg); }
.ask-btn-secondary:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.ask-btn-icon { background:transparent; border:1px solid var(--border); border-radius:6px; padding:4px 8px; font-size:14px; cursor:pointer; }
.ask-btn-icon:hover { background:var(--surface2); }
.ask-btn-icon:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.ask-feedback.is-active { background:var(--green-bg); border-color:var(--green); }
.ask-status { display:flex; align-items:center; gap:12px; padding:14px 18px; color:var(--text-2); font-size:13px; }
.ask-spinner { width:14px; height:14px; border:2px solid var(--border-strong); border-top-color:var(--green); border-radius:50%; animation:askSpin 0.9s linear infinite; }
@keyframes askSpin { to { transform:rotate(360deg); } }
@keyframes costsPulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }
.costs-skeleton-bar { border-radius:3px; background:var(--border); animation:costsPulse 1.5s ease-in-out infinite; }
/* Skeleton primitives — used by lib/table.js skeleton variant and any
 * per-view cold-load placeholders. Holds layout dimensions so the page
 * doesn't collapse → flash when real rows arrive. */
.skel-line { display:block; height:12px; border-radius:4px; background:var(--border); animation:costsPulse 1.5s ease-in-out infinite; }
.skel-cell { width:70%; }
.skel-row td { padding:14px 12px; }
.health-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--border); vertical-align:middle; }
.health-dot.green { background:var(--green); }
.health-dot.amber { background:var(--amber); }
.health-dot.red { background:var(--red); }
@media (max-width:600px) { .health-ts { display:none; } }
.ask-inputbar { position:sticky; bottom:0; background:var(--surface); border-top:1px solid var(--border); padding:12px 24px calc(12px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; column-gap:10px; row-gap:6px; align-items:end; }
.ask-input { width:100%; min-height:42px; max-height:140px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-family:var(--font); font-size:14px; resize:none; line-height:1.4; background:var(--surface); color:var(--text); }
.ask-input:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-bg); }
.ask-send { background:var(--green); color:white; border:none; border-radius:10px; padding:10px 20px; font:inherit; font-weight:500; font-size:14px; cursor:pointer; min-width:72px; height:42px; }
.ask-send:hover:not(:disabled) { opacity:0.9; }
.ask-send:disabled { opacity:0.55; cursor:default; }
.ask-meta { grid-column:1 / -1; font-size:11px; color:var(--text-3); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ask-meta-sep { opacity:0.5; }

@media (max-width: 768px) {
  .ask-conversation { padding:14px 14px 10px; }
  .ask-empty { padding:24px 14px; }
  .ask-chips { grid-template-columns:1fr; }
  .ask-q-bubble { max-width:92%; }
  .ask-chart-canvas { height:240px !important; }
  .ask-inputbar { padding:10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .ask-send { min-width:64px; padding:10px 14px; }
}

/* ── COUNTRIES TAB (added 2026-05-17) ─────────────────────────────────── */
/* Country-card coords block (cards.js renders coord-row inside .event-body). */
.event-card .event-flag { position:absolute; top:10px; right:10px; background:rgba(255,255,255,0.95); padding:4px 8px; border-radius:9999px; font-size:14px; box-shadow:0 1px 2px rgba(0,0,0,.12); z-index:2; line-height:1; }
.activity-block { background:var(--surface2); border-radius:var(--r-sm); padding:10px 12px; margin-bottom:12px; }
.activity-block .header { font-size:9px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-3); margin-bottom:6px; font-weight:500; }
.activity-item { display:flex; gap:8px; padding:4px 0; font-size:12px; line-height:1.4; align-items:flex-start; }
.activity-item + .activity-item { border-top:1px solid var(--border); padding-top:5px; margin-top:1px; }
.activity-date { color:var(--text-3); font-size:11px; flex-shrink:0; width:50px; padding-top:1px; }
.activity-tag { font-size:9px; padding:2px 7px; border-radius:9999px; font-weight:500; flex-shrink:0; text-transform:uppercase; letter-spacing:0.02em; }
.tag-press    { background:var(--amber-bg);  color:var(--amber); }
.tag-gov      { background:var(--blue-bg);   color:var(--blue); }
.tag-partners { background:var(--green-bg);  color:var(--green); }
.tag-other    { background:var(--purple-bg); color:var(--purple); }
.activity-text { color:var(--text); flex:1; }
.activity-empty { font-size:11px; color:var(--text-3); font-style:italic; padding:2px 0; }
.activity-more { font-size:11px; color:var(--blue); margin-top:6px; cursor:pointer; }

.coord-block { margin-top:auto; padding-top:10px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:6px; }
.coord-row { display:flex; align-items:flex-start; gap:8px; font-size:11px; }
.coord-row .label { font-size:9px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-3); font-weight:500; flex-shrink:0; width:64px; padding-top:3px; }
.coord-row .people { display:flex; align-items:center; gap:6px; flex-wrap:wrap; flex:1; }
.coord-avatar { width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:white; font-size:9px; font-weight:500; flex-shrink:0; }
.coord-name { color:var(--text); cursor:pointer; }
.coord-name:hover { color:var(--blue); }
.coord-scope { color:var(--text-3); font-size:10px; }
.ml-tag { font-size:9px; padding:1px 6px; border-radius:9999px; background:var(--purple-bg); color:var(--purple); text-transform:uppercase; letter-spacing:0.04em; font-weight:500; margin-left:4px; }

/* Clickable list rows inside country modals — shared with the events-modal
 * attendee row pattern; both consumers should converge in a follow-up CR. */
.list { display:flex; flex-direction:column; gap:4px; }
.list-row { display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer; transition:background var(--transition); }
.list-row:hover { background:var(--surface2); }
.list-row .avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:10px; font-weight:500; flex-shrink:0; }
.list-row .name { font-size:13px; font-weight:500; color:var(--text); }
.list-row .sub { font-size:11px; color:var(--text-3); margin-top:1px; }
.list-row .body { flex:1; min-width:0; }
.list-row .pill { font-size:10px; padding:2px 8px; border-radius:9999px; flex-shrink:0; }
.pill-won { background:var(--green-bg); color:var(--green); }
.pill-active { background:var(--blue-bg); color:var(--blue); }
.pill-building { background:var(--amber-bg); color:var(--amber); }
.pill-dormant { background:var(--surface2); color:var(--text-3); }
.pill-lead { background:var(--green-bg); color:var(--green); }
.pill-ambassador { background:var(--blue-bg); color:var(--blue); }
.pill-contact { background:var(--surface2); color:var(--text-2); }

/* Full activity log inside the country modal */
.activity-full { background:var(--surface2); border-radius:var(--r-sm); padding:4px 14px; }
.activity-full .activity-item { padding:10px 0; }
.activity-full .activity-item + .activity-item { border-top:1px solid var(--border); }
.activity-full .activity-text { font-size:12px; }
.activity-full .activity-date { width:60px; font-size:11px; }

/* Show-more pattern used by Universities / Events / People sections */
.show-more { font-size:12px; color:var(--blue); cursor:pointer; padding:8px 12px; text-align:center; border:1px dashed var(--border); border-radius:var(--r-sm); margin-top:4px; }

/* Create-country picker grid + delete-confirm panel */
.country-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:6px; max-height:240px; overflow-y:auto; padding:8px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); }
.country-opt { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:var(--r-sm); cursor:pointer; font-size:12px; }
.country-opt:hover { background:var(--surface2); }
.country-opt .flg { font-size:16px; }
.country-opt.disabled { opacity:0.4; cursor:not-allowed; }
.country-opt.disabled .check { color:var(--green); font-size:10px; margin-left:auto; }
@media (max-width:640px) {
  .country-grid { grid-template-columns:1fr; }
}

.danger-panel { background:var(--red-bg); border:1px solid var(--red); border-radius:var(--r-sm); padding:14px; font-size:13px; color:var(--text); line-height:1.5; }
.danger-panel .head { font-weight:500; color:var(--red); margin-bottom:6px; }
.confirm-input { padding:8px 10px; border:1px solid var(--border-strong); border-radius:var(--r-sm); font-size:13px; font-family:var(--font); width:100%; background:var(--surface); margin-top:6px; }
.confirm-input.matched { border-color:var(--red); background:var(--red-bg); }

.count-tail { font-size:11px; font-weight:400; color:var(--text-3); text-transform:none; letter-spacing:0; margin-left:4px; }
.add-inline { font-size:11px; font-weight:400; color:var(--green); cursor:pointer; padding:2px 8px; border:1px solid var(--green); border-radius:6px; background:var(--green-bg); text-transform:none; letter-spacing:0; }

/* Green "Coordinates" panel on the augmented person modal */
.coordinates-block { background:var(--green-bg); border:1px solid rgba(29,158,117,0.15); border-radius:var(--r); padding:14px; margin-bottom:16px; }
.coordinates-block .h { font-size:10px; font-weight:600; color:var(--green); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px; }
.coordinates-block .scope { font-size:12px; color:var(--text-2); margin-bottom:10px; }
.coordinates-block .uni-list { display:flex; flex-direction:column; gap:6px; }

/* ── SHARED PRIMITIVES (lib/*) ──
   Classes emitted by public/js/lib/{buttons,search,image,avatar,badges,empty-state}.js.
   These are the contract — feature code should NOT redefine them. */

/* lib/buttons.js — .btn variants extend the existing .btn at line 98. */
.btn.icon { padding: 4px; width: 28px; height: 28px; justify-content: center; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface2); color: var(--text); }
.topbar-actions { margin-left: auto; display: flex; gap: 8px; }

/* lib/search.js — single search-input class, three sizes. Replaces 12+
   bespoke inline-styled inputs in modals/filters. */
.search-box { border: 1px solid var(--border); border-radius: 7px; font-family: var(--font); background: var(--surface2); color: var(--text); outline: none; transition: border-color var(--transition); }
.search-box:focus { border-color: var(--green); background: white; }
.search-box::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-box.search-sm { padding: 5px 10px; font-size: 12px; width: 160px; }
.search-box.search-md { padding: 7px 12px; font-size: 13px; width: 220px; }
/* CR-108: font drops 14px → 13px so it matches the sidebar nav-label
   (.nav-label is 13px). Padding + width keep the lg variant prominent;
   only the type scale unifies. */
.search-box.search-lg { padding: 9px 14px; font-size: 13px; width: 320px; }
/* Width-overrides for embedded modal search boxes that want to fill
   their container instead of using the size token's natural width. */
.search-box.cu-person-search-full,
.search-box.eu-lc-search-full,
.search-box.wa-add-search-full,
.search-box.pu-search-full,
.search-box.pm-addcoord-search { width: 100%; }
.search-box#cr-search { width: 100%; max-width: 420px; }
.search-box.ec-nc-search { width: 180px; }

/* lib/image.js — bare img wrapper. Keeps natural object-fit on cards. */
.app-image { width: 100%; height: 100%; object-fit: cover; display: block; }

/* lib/avatar.js — wraps .avatar (line 164) with size variants. The
   existing .avatar default is 36px (md). sm = 22px, lg = 52px. */
.avatar-sm { width: 22px; height: 22px; font-size: 9px; }
.avatar-md { width: 36px; height: 36px; font-size: 11px; }
.avatar-lg { width: 52px; height: 52px; font-size: 15px; }
.avatar-sm, .avatar-md, .avatar-lg { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 500; flex-shrink: 0; letter-spacing: .02em; overflow: hidden; }
.avatar-sm > img, .avatar-md > img, .avatar-lg > img { width: 100%; height: 100%; object-fit: cover; }

/* lib/badges.js — .cr-status-pill (new), plus per-state colours.
   .up-status-* live at line 263; .pbu-* at 687; .tier-pill at 188. */
.cr-status-pill { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 20px; display: inline-block; white-space: nowrap; }
.cr-status-new      { background: #FEF3C7; color: #92400E; }
.cr-status-planned  { background: #F5F3FF; color: #6D28D9; }
.cr-status-done     { background: #E8F7F1; color: #1D9E75; }
.cr-status-rejected { background: #FEE2E2; color: #991B1B; }
.cr-status-wontfix  { background: #FEE2E2; color: #991B1B; }
.country-pill { font-size: 10px; padding: 2px 7px; border-radius: 10px; background: var(--surface2); color: var(--text-2); display: inline-block; white-space: nowrap; }

/* lib/empty-state.js — extends existing .empty (line 243). */
.empty-title { font-size: 14px; color: var(--text-2); font-weight: 500; margin-bottom: 4px; }
.empty-hint { font-size: 13px; color: var(--text-3); }
.empty-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.empty-chip { font-size: 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; font-family: var(--font); transition: all var(--transition); }
.empty-chip:hover { background: var(--surface2); color: var(--text); }