/*
 * This is a manifest file that'll be compiled into application.css.
 *


 */

:root {
  --brand:     #7c3aed;
  --brand-d:   #6d28d9;
  --brand-dd:  #4c1d95;
  --brand-l:   #ede9fe;
  --brand-xl:  #faf7ff;

  --ink:       #1a1a1a;
  --slate:     #4a4a4a;
  --mid:       #6b6b6b;
  --muted:     #9a9a9a;

  --border:    #e5e5e5;
  --border-b:  #d8c9f0;

  --bg:        #ffffff;
  --bg-alt:    #f7f9f8;

  --amber:     #d97706;
  --amber-bg:  #fef3c7;
  --amber-bd:  #fde68a;

  --danger:    #7f1d1d;
  --danger-bg: #fef2f2;
  --success:   #065f46;
  --success-bg:#ecfdf5;

  /* Score legend bands (HeatmapColorBands), shared by the heatmap and 3D
     report legend rows so both always agree with the tile colors. */
  --band-green:      #55CE97;
  --band-lightgreen: #BCE9BC;
  --band-amber:      #FFF1B1;
  --band-lightred:   #FCAD97;
  --band-red:        #EE5C5C;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 16px rgba(124, 58, 237, 0.18);
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);

  --ff-body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-display: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --ff-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
}

h1, h2, h3 {
  font-family: var(--ff-display);
  color: var(--ink);
  margin: 0 0 12px;
}
h1 { font-size: 24px; font-weight: 600; }
h2 { font-size: 16px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }

a { color: var(--brand-dd); text-decoration: none; }
a:hover { text-decoration: underline; }

.app-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px;
}

.mono-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
}

/* ==========================================================================
   Top bar, breadcrumbs, survey header, tab nav, export bar, scope bar
   ========================================================================== */

.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 24px;
  height: 52px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.top-nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-nav .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--brand);
  color: #fff;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 12px;
}

.top-nav .brand {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--brand-dd);
}

.top-nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jump-search {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  min-width: 260px;
}
.jump-search svg { color: var(--muted); flex: none; }
.jump-search span { flex: 1; font-size: 13px; color: var(--muted); }
.jump-search kbd {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 1px 5px;
}

.logout-link {
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 13px;
  font-weight: 600;
  color: var(--mid);
}
.logout-link:hover { color: var(--brand-dd); border-color: var(--border-b); text-decoration: none; }

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 9px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  font-family: var(--ff-mono);
  font-size: 12.5px;
}
.breadcrumbs a { color: var(--mid); font-weight: 500; }
.breadcrumbs a:hover { color: var(--brand-dd); text-decoration: none; }
.breadcrumbs .crumb-current { color: var(--brand-dd); font-weight: 600; }
.breadcrumbs .crumb-sep { color: var(--muted); }

/* Survey header: account eyebrow/status, title + switch, meta, actions */
.survey-header {
  padding: 20px 24px 0;
}
.survey-header-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.survey-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.survey-status-pill {
  padding: 2px 8px;
  background: var(--brand-l);
  color: var(--brand-dd);
  font-size: 11px;
  font-weight: 600;
}
.survey-title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.survey-title-row h1 { font-size: 27px; margin: 0; letter-spacing: -0.01em; }
.survey-meta { margin: 4px 0 0; font-size: 12.5px; color: var(--mid); font-family: var(--ff-mono); }
.survey-actions { display: flex; align-items: center; gap: 8px; }

/* Tab nav: bottom-bordered row, active tab has its own colored underline */
.tab-nav {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 14px 24px 0;
  border-bottom: 2px solid var(--ink);
}
.tab-nav-link {
  padding: 5px 4px 9px;
  margin-right: 22px;
  margin-bottom: -2px;
  border: none;
  background: transparent;
  border-bottom: 3px solid transparent;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--mid);
  cursor: pointer;
}
.tab-nav-link:hover { color: var(--brand-dd); text-decoration: none; }
.tab-nav-link.is-active { color: var(--brand-dd); border-bottom-color: var(--brand); }

/* Export bar: dark, toggled open from the survey header's Export button */
.export-bar {
  padding: 14px 24px;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.export-bar-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.export-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.export-bar-btn {
  padding: 7px 12px;
  border: 1px solid var(--slate);
  background: transparent;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.export-bar-btn:hover { border-color: var(--brand); background: var(--brand-dd); }
.export-bar-close {
  margin-left: auto;
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

/* Scope bar: active filters as removable chips, respondent count */
.scope-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 11px 24px;
  background: var(--brand-xl);
  border-bottom: 1px solid var(--border-b);
}
.scope-bar-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
}
.scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px 4px 10px;
  background: var(--brand-l);
  border: 1px solid var(--brand);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-dd);
}
.scope-chip-key { font-weight: 500; color: var(--mid); }
.scope-chip-clear { cursor: pointer; font-size: 13px; line-height: 1; color: var(--brand); }
.scope-bar-n {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--mid);
  padding-left: 6px;
  border-left: 1px solid var(--border-b);
  white-space: nowrap;
  margin-left: auto;
}

/* ==========================================================================
   Auth (login) page — split screen, sharp corners, editorial serif headline
   ========================================================================== */

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
@media (max-width: 860px) { .auth-shell { grid-template-columns: 1fr; } }

.auth-brand-pane {
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 2px solid var(--ink);
}
.auth-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--brand);
  color: #fff;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 14px;
}
.auth-brand-row { display: flex; align-items: center; gap: 10px; }
.auth-headline {
  margin: 0 0 20px;
  font-family: var(--ff-display);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 12em;
}
.auth-footer-row { display: flex; gap: 28px; font-size: 12px; color: var(--muted); font-family: var(--ff-mono); }

.auth-card-pane {
  display: flex;
  align-items: center;
  padding: 64px 56px;
  background: var(--brand-xl);
}
.auth-card { width: 100%; max-width: 360px; }

.auth-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
}
.auth-title { font-family: var(--ff-display); font-size: 24px; font-weight: 600; margin: 0 0 8px; }
.auth-subtitle { color: var(--mid); font-size: 13.5px; margin: 0 0 24px; }

.auth-form { text-align: left; }
.auth-field { margin-bottom: 18px; }
.auth-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate);
}
.auth-field input {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: 11px 12px;
  border: 1px solid var(--border-b);
  background: #fff;
  color: var(--ink);
}
.auth-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-l); }

.auth-btn-primary { width: 100%; justify-content: flex-start; text-align: left; margin-top: 4px; padding: 13px 16px; }

.auth-flash { padding: 10px 14px; font-size: 13px; margin-bottom: 16px; text-align: left; }
.auth-flash-alert { background: var(--danger-bg); color: var(--danger); border: 1px solid #fecaca; }
.auth-flash-notice { background: var(--success-bg); color: var(--success); border: 1px solid #a7f3d0; }

/* ==========================================================================
   Buttons, forms, chips, cards (generic)
   ========================================================================== */

.card {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 20px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 13px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}
.btn:hover { background: var(--brand-d); }

.btn-secondary {
  background: var(--bg);
  color: var(--brand-dd);
  border: 1px solid var(--border-b);
}
.btn-secondary:hover { background: var(--brand-xl); }

.btn-quiet {
  background: var(--bg);
  color: var(--slate);
  border: 1px solid var(--border);
}
.btn-quiet:hover { border-color: var(--border-b); color: var(--brand-dd); }

.checkbox-group { display: flex; flex-wrap: wrap; gap: 8px; }
.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 13px;
  cursor: pointer;
}
.checkbox-row:has(input:checked) { background: var(--brand-l); border-color: var(--brand); color: var(--brand-dd); }
.checkbox-row input { accent-color: var(--brand); }

select, .renewal-filter-select {
  font-family: var(--ff-body);
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--border-b);
  background: var(--bg);
  color: var(--ink);
}
select:focus, .renewal-filter-select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-l); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
th { color: var(--mid); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; font-family: var(--ff-mono); }

.pill { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 11px; font-weight: 600; background: var(--brand-l); color: var(--brand-dd); }
.pill-muted { background: var(--bg-alt); color: var(--mid); }

/* ==========================================================================
   eNPS mix bar + disclosure (expandable) cards
   ========================================================================== */

.enps-mix-bar { display: flex; height: 8px; background: var(--bg-alt); overflow: hidden; }
.enps-mix-promoters { background: var(--band-green); }
.enps-mix-passives { background: #FBBF24; }
.enps-mix-detractors { background: var(--band-red); }

.disclosure-card summary { cursor: pointer; list-style: none; }
.disclosure-card summary::-webkit-details-marker { display: none; }
.disclosure-card summary::marker { content: ""; }
.disclosure-card summary:hover .disclosure-title { color: var(--brand-dd); }

.disclosure-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.disclosure-chevron { flex: none; color: var(--muted); transition: transform 0.15s var(--ease); }
.disclosure-card[open] .disclosure-chevron { transform: rotate(90deg); }
.disclosure-body { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

/* ==========================================================================
   Overview: KPI strip + driver list/detail split
   ========================================================================== */

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-bottom-color: var(--ink);
  margin-bottom: 28px;
}
.kpi-cell { padding: 16px 18px; border-right: 1px solid var(--border); }
.kpi-cell:last-child { border-right: none; }
.kpi-cell.disclosure-card summary { display: block; }
.kpi-value-row { display: flex; align-items: baseline; gap: 8px; }
.kpi-value { font-family: var(--ff-display); font-size: 30px; font-weight: 600; line-height: 1; color: var(--brand-dd); }
.kpi-delta { font-size: 12.5px; font-weight: 600; }
.kpi-label { font-family: var(--ff-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mid); margin-bottom: 8px; }
.kpi-note { margin-top: 10px; font-size: 12px; color: var(--mid); }

.overview-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
@media (max-width: 760px) { .overview-split { grid-template-columns: 1fr; } }

.overview-split-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
}

.driver-list { display: flex; flex-direction: column; }
.driver-row {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-top: none;
  cursor: pointer;
  background: var(--bg);
  color: inherit;
}
.driver-list a.driver-row:first-child { border-top: 1px solid var(--border); }
.driver-row:hover { text-decoration: none; background: var(--brand-xl); }
.driver-row.is-active { background: var(--brand-xl); box-shadow: inset 3px 0 0 var(--brand); }
.driver-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.driver-row-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.driver-row-score-group { display: flex; align-items: baseline; gap: 10px; }
.driver-row-score { font-family: var(--ff-display); font-size: 17px; font-weight: 600; min-width: 2.2em; text-align: right; }
.driver-bar-track { margin-top: 8px; height: 5px; background: var(--bg-alt); position: relative; }
.driver-bar-fill { height: 100%; background: var(--brand); }

.driver-detail-pane {
  border: 1px solid var(--border);
  border-top: 2px solid var(--ink);
  padding: 18px 20px;
  position: sticky;
  top: 16px;
}

/* ==========================================================================
   Typeahead dropdown (account + manager pickers, global jump search)
   ========================================================================== */

.typeahead { position: relative; }

.typeahead-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border-b);
  background: var(--bg);
}
.typeahead-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-l); }
.typeahead-box svg { color: var(--muted); flex: none; }
.typeahead-box input { flex: 1; border: none; outline: none; font-family: inherit; font-size: 14px; background: transparent; color: var(--ink); }

.typeahead-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

.typeahead-result { display: block; padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.typeahead-result:last-child { border-bottom: none; }
.typeahead-result:hover, .typeahead-result.is-active { background: var(--brand-xl); text-decoration: none; }
.typeahead-result-title { font-weight: 600; color: var(--ink); font-size: 13.5px; }
.typeahead-result-sub { color: var(--mid); font-size: 12px; }
.typeahead-empty { padding: 14px; color: var(--mid); font-size: 13px; text-align: center; }

.typeahead-checkbox-result { display: flex; align-items: center; gap: 10px; }
.typeahead-checkbox-result input[type="checkbox"] { accent-color: var(--brand); flex: none; }

.chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 12px;
  background: var(--brand-l);
  color: var(--brand-dd);
  font-size: 12.5px;
  font-weight: 600;
}
.chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: rgba(124, 58, 237, 0.16);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
}
.chip-remove:hover { background: var(--brand); color: #fff; }

/* ==========================================================================
   Accounts (subdomain) picker: search + "recently viewed" list
   ========================================================================== */

.accounts-search-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid var(--brand);
  background: var(--bg);
  margin-bottom: 32px;
}
.accounts-search-row svg { color: var(--brand); flex: none; }
.accounts-search-row input { flex: 1; border: none; outline: none; font-family: inherit; font-size: 14px; background: transparent; }
.accounts-search-count { font-family: var(--ff-mono); font-size: 11px; color: var(--muted); white-space: nowrap; }

.recent-list-head {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
}
.recent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-top: none;
  color: var(--ink);
}
.recent-row:hover { background: var(--brand-xl); text-decoration: none; }
.recent-row-name { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.recent-row-name .name { font-family: var(--ff-display); font-size: 16px; font-weight: 600; }
.recent-row-name .subdomain { font-family: var(--ff-mono); font-size: 12px; color: var(--muted); }
.recent-row-meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--mid); white-space: nowrap; }
.recent-row-arrow { color: var(--brand); }

/* ==========================================================================
   Heatmap + 3D Report matrices, legend, attribute tabs
   ========================================================================== */

.matrix-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 10px;
}
.matrix-head-tabs { display: flex; align-items: center; gap: 0; }
.matrix-head-tabs .mono-label { margin-right: 14px; }
.matrix-head-actions { display: flex; align-items: center; gap: 8px; }

.heatmap-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  background: var(--bg);
  min-width: 190px;
}
.heatmap-search svg { color: var(--muted); flex: none; }
.heatmap-search input { border: none; outline: none; font-family: inherit; font-size: 12.5px; background: transparent; width: 100%; }

.legend-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 0 14px; }
.legend-swatches { display: flex; align-items: stretch; border: 1px solid var(--border); }
.legend-swatch { padding: 4px 11px; font-size: 12px; font-weight: 600; color: var(--ink); border-right: 1px solid #fff; }
.legend-swatch:last-child { border-right: none; }
.legend-hint { font-size: 12px; color: var(--mid); }

.heatmap-scroll { overflow-x: auto; border: 1px solid var(--border); }

.heatmap-matrix { min-width: 100%; border-collapse: collapse; }
.heatmap-matrix th, .heatmap-matrix td { white-space: nowrap; }
.heatmap-matrix thead th {
  position: sticky;
  top: 0;
  padding: 9px 10px;
  background: var(--bg-alt);
  border-bottom: 2px solid var(--ink);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  text-align: center;
  z-index: 1;
}
.heatmap-matrix thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  text-align: left;
  padding: 9px 14px;
  border-right: 1px solid var(--border);
}
.heatmap-matrix thead th.col-n { text-align: right; border-left: 1px solid var(--border); }

.heatmap-matrix tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: left;
  font-weight: normal;
  text-transform: none;
  letter-spacing: normal;
}
.heatmap-matrix tbody th a,
.heatmap-matrix tbody th span.row-label {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.heatmap-matrix tbody th a:hover { background: var(--brand-xl); color: var(--brand-dd); text-decoration: none; }

.heatmap-tile {
  padding: 10px 10px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  color: #1a1a1a;
  min-width: 78px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
}
.heatmap-tile-empty { color: var(--muted); font-weight: 400; }
.heatmap-matrix td.col-n {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
  text-align: right;
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--mid);
}

.anonymity-note { margin: 12px 0 0; font-size: 12px; color: var(--muted); }

.pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 12px; }
.pagination button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 11px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--slate);
  cursor: pointer;
}
.pagination button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-dd); }
.pagination button.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.pagination button:disabled { opacity: 0.4; cursor: default; }
.pagination-status { font-size: 12px; color: var(--mid); margin-left: 8px; }
/* ==========================================================================
   Revamp layer — survey header, tab nav, scope bar, KPI strip, driver
   master-detail, heatmap matrix, export dialog, loaders.
   Reuses the tokens already declared in application.css (--brand, --ink, …).
   Drop this file in app/assets/stylesheets/ (require_tree . picks it up) and
   move `*= require_self` ABOVE `*= require_tree .` in application.css so
   these overrides win.
   ========================================================================== */

:root {
  /* Aliases for the v2 stylesheet, which is written against a different set of
     token names (--accent, --surface, ...). Without these every v2 component —
     export cards, the manager-preview popover, the drill-down drawer, the
     command palette — silently falls back to the hardcoded hex in each
     var(name, #fallback) and stops following the theme: change --brand and
     they would all stay purple. Same colours, one source.

     --muted is deliberately NOT aliased: this app already defines it, as a
     LIGHTER grey (#9a9a9a) than v2 means by it (#6b6b6b). Those usages were
     rewritten to --mid instead, which is this app's name for that value. */
  --accent: var(--brand);
  --accent-strong: var(--brand-dd);
  --accent-tint: var(--brand-l);
  --accent-wash: var(--brand-xl);
  --accent-border: var(--border-b);
  --surface: var(--bg);
  --muted-soft: var(--muted);
  --ink-soft: var(--slate);
  --border-soft: var(--border);

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-pill: 999px;
  --ff-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sk-1: #f1f0f4;
  --sk-2: var(--brand-xl);
}

/* Any class that sets its own `display` (e.g. .entity-row's `display: flex`)
   otherwise outranks the browser's default `[hidden] { display: none }` UA
   rule, since a class selector is more specific than an attribute selector
   — silently defeating `element.hidden = true`. Found live: the Surveys
   page's search/status filter (table_filter_controller.js) toggled
   `row.hidden` on `.entity-row` rows and nothing visually hid. This single
   rule makes every `[hidden]` toggle in the app work regardless of what
   other display rules a target element's class carries. */
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ icons */

/* Icons sit INSIDE their label/button rather than beside it, so they inherit
   colour and never wrap onto their own line. flex: none stops them being
   squashed when the label is long. */
.icon { flex: none; vertical-align: -0.125em; }

.btn .icon, .btn-quiet .icon, .btn-secondary .icon { margin-right: 7px; }
.btn, .btn-quiet, .btn-secondary { display: inline-flex; align-items: center; }

.kpi-label { display: flex; align-items: center; gap: 6px; }
.kpi-icon { color: var(--brand); opacity: 0.85; }

.crumb-sep { display: inline-flex; align-items: center; color: var(--muted); }

.viewing-as { display: inline-flex; align-items: center; gap: 8px; }

.account-menu-item .icon { color: var(--muted); }
.account-menu-item:hover .icon { color: currentColor; }

/* ------------------------------------------------------------ empty states */

/* An empty result is a normal outcome here (anonymity withholds small groups
   constantly), so it gets a real explanation of WHY rather than one grey line. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 34px 24px;
  border: 1px dashed var(--border-b);
  border-radius: var(--r-lg);
  background: var(--bg);
  text-align: center;
}
.empty-state .icon { color: var(--muted); margin-bottom: 4px; }
.empty-state-title { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.empty-state-text { margin: 0; max-width: 46em; font-size: 12.5px; color: var(--mid); text-wrap: pretty; }

/* --------------------------------------------------------------- app shell */

/* The generous bottom padding is deliberate: the last row of a heatmap or a
   survey list otherwise sits flush against the window edge with nothing under
   it, which reads as a page that got cut off rather than one that ended. */
.app-shell { max-width: 1240px; padding: 24px 24px 72px; margin: 0; }

.mono-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------------------------------------------------------- left menu */

.app-body { display: flex; align-items: stretch; }
.app-column { flex: 1; min-width: 0; }

/* The old sidebar markup is replaced by shared/_side_nav. */
.app-sidebar { display: none; }

.side-nav {
  width: 226px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 0;
  border-right: 1px solid var(--border);
  background: var(--brand-xl);

  /* Sticky and viewport-tall, NOT stretched to the content. .app-body is a
     flex row, so without align-self the sidebar grows to match a long
     heatmap and its footer (the account block) ends up thousands of pixels
     below the fold — which is exactly where the old "Log out" button was
     hiding. This also keeps the nav on screen while scrolling a long table. */
  position: sticky;
  top: 56px;
  align-self: flex-start;
  height: calc(100vh - 56px);
  overflow-y: auto;
}

.side-nav-caption {
  margin: 0 0 6px;
  padding: 0 18px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.side-nav-context {
  margin: 0 0 8px;
  padding: 0 18px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--brand-dd);
}

.side-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-left: 3px solid transparent;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--slate);
  transition: background 0.15s var(--ease);
}
.side-nav-link:hover { background: var(--brand-l); color: var(--brand-dd); text-decoration: none; }
.side-nav-link svg { flex: none; opacity: 0.9; }
.side-nav-link.is-active {
  background: var(--brand-l);
  border-left-color: var(--brand);
  font-weight: 600;
  color: var(--brand-dd);
}

/* ------------------------------------------------------- account block */

.side-nav-foot { margin-top: auto; padding: 14px 12px 4px; position: relative; }

.account-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.account-button:hover { background: var(--bg); border-color: var(--border); }

.account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.account-avatar-lg { width: 46px; height: 46px; font-size: 15px; }

.account-identity { min-width: 0; flex: 1; }
.account-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-role {
  display: block;
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-chevron { flex: none; color: var(--muted); }

.account-menu {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% - 8px);
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  box-shadow: 0 12px 32px rgba(26, 26, 26, 0.16);
  z-index: 20;
}
.account-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--slate);
}
.account-menu-item:hover { background: var(--brand-xl); color: var(--brand-dd); text-decoration: none; }
.account-menu-item-danger:hover { background: var(--danger-bg); color: var(--danger); }
.account-menu-sep { height: 1px; margin: 5px 6px; background: var(--border); }

/* --------------------------------------------------- profile / access */

.profile-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg);
}
.profile-identity-name { font-family: var(--ff-display); font-size: 19px; font-weight: 600; color: var(--ink); }
.profile-identity-sub { margin-top: 2px; font-size: 12.5px; color: var(--mid); }

.info-callout {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border-b);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-md);
  background: var(--brand-xl);
  font-size: 13px;
  color: var(--slate);
  text-wrap: pretty;
}
.info-callout strong { color: var(--brand-dd); }
.info-callout-warn { border-left-color: var(--amber); background: var(--amber-bg); }
.info-callout-warn strong { color: var(--ink); }

.capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.capability-card {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
}
.capability-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  border-radius: var(--r-sm);
  background: var(--brand-l);
  color: var(--brand-dd);
}
.capability-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.capability-text { margin: 0; font-size: 12.5px; color: var(--mid); text-wrap: pretty; }

/* ------------------------------------------------ access-today summary */

.access-now {
  margin-top: 14px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg);
}
.access-now-main { display: flex; align-items: center; gap: 16px; }

.access-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.access-facts dt {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.access-facts dd { margin: 5px 0 0; font-size: 13px; font-weight: 600; color: var(--ink); text-wrap: pretty; }

.access-now-note { margin: 16px 0 0; font-size: 12.5px; color: var(--mid); text-wrap: pretty; }

.preview-badge {
  padding: 4px 10px;
  border: 1px dashed var(--border-b);
  border-radius: var(--r-pill);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  white-space: nowrap;
}

.role-legend { display: flex; flex-direction: column; gap: 7px; margin: 16px 0 18px; }
.role-legend-item { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--mid); }

/* Sample rows should not read as live records. */
.table-plain.is-preview tbody tr { opacity: 0.72; }
.table-plain.is-preview tbody tr:hover { opacity: 1; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ------------------------------------------------------------------ top nav */

.top-nav { height: 56px; padding: 0 24px; }
.top-nav .brand-mark { width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--brand); }

.nav-search {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 260px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg);
  font-size: 13px;
  color: var(--muted);
}
.nav-search svg { flex: none; }
.nav-search kbd {
  font-family: var(--ff-mono);
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--muted);
}

.breadcrumbs { font-family: var(--ff-mono); font-size: 12.5px; }

/* ----------------------------------------------------------- survey header */

.survey-header { border-bottom: 1px solid var(--border-b); }

.survey-header-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  /* The bottom padding was 0, and with align-items: flex-end that pushed the
     Preview / Export buttons flat onto the scope bar directly beneath them —
     a raised button sitting on a filled band with no gap at all. */
  padding: 20px 24px 18px;
}

.survey-eyebrow-row { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }

.survey-status-pill {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--brand-l);
  color: var(--brand-dd);
  font-size: 11px;
  font-weight: 600;
}

.survey-title-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.survey-title-row h1 { margin: 0; font-size: 27px; letter-spacing: -0.01em; }

.survey-meta { margin: 4px 0 0; font-family: var(--ff-mono); font-size: 12.5px; color: var(--mid); }

.survey-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.btn-quiet {
  background: var(--bg);
  color: var(--slate);
  border: 1px solid var(--border);
}
/* var(--brand-xl) is a near-white tint — on a white page it read as no hover
   state at all, so "Preview as manager" looked inert next to the solid Export
   button. This gives it a real, visible lift. */
.btn-quiet {
  transition: background 130ms var(--ease), border-color 130ms var(--ease),
              color 130ms var(--ease), box-shadow 130ms var(--ease);
}
.btn-quiet:hover {
  background: var(--brand-l);
  border-color: var(--brand);
  color: var(--brand-dd);
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.16);
  text-decoration: none;
}
.btn-quiet:hover .icon { color: var(--brand); }
.btn-quiet:active { background: var(--brand-l); box-shadow: none; }

.btn, .btn-secondary, .btn-quiet { border-radius: var(--r-sm); }

/* -------------------------------------------------------------- tab nav */

.tab-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 14px 24px 0;
  border-bottom: 1px solid var(--border);
}

.tab-nav-link {
  padding: 5px 2px 9px;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mid);
}
.tab-nav-link:hover { color: var(--brand-dd); text-decoration: none; }
.tab-nav-link.is-active { color: var(--brand-dd); border-bottom-color: var(--brand); }

/* ------------------------------------------------------------- scope bar */

.scope-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 11px 24px;
  background: var(--brand-xl);
}

.scope-bar-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
}

.scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px 4px 12px;
  border: 1px solid var(--brand);
  border-radius: var(--r-pill);
  background: var(--brand-l);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-dd);
}
.scope-chip-key { font-weight: 500; color: var(--mid); }
.scope-chip-clear { color: var(--brand); font-size: 13px; line-height: 1; }
.scope-chip-clear:hover { text-decoration: none; }

.scope-chip-static {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border: 1px dashed var(--border-b);
  border-radius: var(--r-pill);
  background: var(--bg);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-dd);
}

.scope-bar-n {
  margin-left: auto;
  padding-left: 12px;
  border-left: 1px solid var(--border-b);
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--mid);
  white-space: nowrap;
}

/* -------------------------------------------------------------- KPI strip */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1px;
  margin: 0 0 30px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.05);
}

.kpi-card {
  background: var(--bg);
  border: none;
  border-radius: 0;
  padding: 16px 18px;
}

.kpi-label {
  margin: 0 0 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
}

.kpi-value { font-size: 30px; line-height: 1; color: var(--brand-dd); }
.kpi-note { margin: 10px 0 0; font-size: 12px; color: var(--mid); text-wrap: pretty; }

.enps-mix-bar { margin-top: 12px; }

/* --------------------------------------------------------- section heading */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border-b);
  margin-bottom: 2px;
}
.section-head h2 { margin: 0; font-size: 18px; }

/* ------------------------------------------------------- driver master-detail */

.driver-split { display: flex; gap: 32px; }
.driver-list { width: auto; flex: 1 1 380px; gap: 0; }

.driver-row {
  padding: 13px 16px;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.driver-row:hover { border-color: var(--border-b); box-shadow: 0 2px 10px rgba(124, 58, 237, 0.09); }
.driver-row.is-active {
  border-color: var(--brand);
  background: var(--brand-xl);
  box-shadow: 0 3px 14px rgba(124, 58, 237, 0.13);
}

.driver-row-name { font-size: 13.5px; color: var(--ink); }
.driver-row-score { font-size: 17px; }

.driver-bar-track { height: 6px; border-radius: var(--r-pill); background: var(--sk-1); }
.driver-bar-fill { border-radius: var(--r-pill); background: var(--brand); }

.driver-detail-pane {
  flex: 1 1 360px;
  border-radius: var(--r-lg);
  padding: 20px 22px;
  position: sticky;
  top: 16px;
}
.driver-detail-pane h3 { font-size: 20px; margin-bottom: 2px; }
.driver-detail-meta { margin: 0 0 16px; font-family: var(--ff-mono); font-size: 12.5px; color: var(--mid); }

/* ------------------------------------------------------------------ tables */

.table-plain th {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border-b);
}
.table-plain td { font-size: 13px; text-wrap: pretty; }
.table-plain .num { text-align: right; font-family: var(--ff-display); font-size: 15px; font-weight: 600; white-space: nowrap; }

.row-link-table tbody tr:hover { background: var(--brand-xl); }

/* ------------------------------------------------------- manager preview */

/* "View as manager" indirect-view grid — a small card per driver, since
   there's no per-employee breakdown to put in a table for this one (it's a
   single aggregated row for the whole downline). */
.driver-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.driver-card {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
}
.driver-card-name { font-size: 12px; color: var(--mid); margin-bottom: 6px; }
.driver-card-score { font-size: 20px; font-weight: 600; color: var(--brand-dd); }

/* ------------------------------------------------------------ heatmap matrix */

.heatmap-scroll,
.matrix-pane {
  margin: 0 -24px;
  max-height: calc(100vh - 190px);
  overflow: auto;
  overscroll-behavior: contain;
  border: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg);
}

.heatmap-matrix {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
}
.heatmap-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  min-width: 104px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-b);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-align: center;
}
.heatmap-matrix thead th:first-child { text-align: left; }
.heatmap-matrix thead th:first-child { position: sticky; left: 0; top: 0; z-index: 3; }
.heatmap-matrix tbody th { position: sticky; left: 0; z-index: 2; min-width: 180px; background: var(--bg); }
.heatmap-matrix tbody th a { display: block; padding: 12px 16px; color: var(--ink); }
.heatmap-matrix tbody th a:hover { background: var(--brand-xl); color: var(--brand-dd); text-decoration: none; }
.heatmap-matrix tbody th { padding: 0; }

.heatmap-tile {
  padding: 12px 14px;
  border: 2px solid var(--bg);
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
}

.heatmap-n {
  text-align: right;
  border-left: 1px solid var(--border);
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--mid);
  white-space: nowrap;
}

.heatmap-legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 0 14px; }
.heatmap-legend-scale { display: flex; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.heatmap-legend-scale span {
  padding: 4px 11px;
  border-right: 1px solid var(--bg);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.heatmap-legend-scale span:last-child { border-right: none; }
.heatmap-legend-note { font-size: 12px; color: var(--mid); }

.heatmap-search { border-radius: var(--r-pill); padding: 6px 12px; }
.pagination button { border-radius: var(--r-sm); }

/* ------------------------------------------------------------------- lists */

.entity-list { display: flex; flex-direction: column; gap: 8px; }

.entity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--ink);
}
.entity-row:hover { background: var(--brand-xl); border-color: var(--border-b); text-decoration: none; }
.entity-row-title { font-family: var(--ff-display); font-size: 16px; font-weight: 600; }
.entity-row-sub { font-family: var(--ff-mono); font-size: 12px; color: var(--muted); }
.entity-row-meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--mid); white-space: nowrap; }

.typeahead-box { border-radius: var(--r-md); }
.typeahead-panel { border-radius: var(--r-md); }
.card { border-radius: var(--r-lg); }
select, .renewal-filter-select, .auth-field input { border-radius: var(--r-sm); }

/* --------------------------------------------------------- export dialog */

/* The <dialog> ELEMENT fills the viewport and is transparent; the visible
   panel is .export-dialog-panel inside it.

   This is what makes "click outside to close" possible at all. With the dialog
   sized to its content, a click on the backdrop fires NO event anywhere —
   verified: neither a click nor a mousedown reached the dialog OR the document,
   so the handler that was supposed to close it could never run. Everything
   behind a modal dialog is inert, and ::backdrop is not an element you can
   listen on. Making the dialog itself cover the viewport means an outside
   click lands on the dialog element, which is a thing events fire on. */
.export-dialog {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  padding: 0;
  border: none;
  background: transparent;
  overflow: auto;
  /* Centres the panel, and gives a short dialog room to breathe on a phone. */
  display: grid;
  place-items: center;
}
.export-dialog:not([open]) { display: none; }

.export-dialog-panel {
  width: min(560px, calc(100vw - 48px));
  max-height: 88vh;
  overflow: auto;
  border-radius: 16px;
  background: var(--bg);
  box-shadow: 0 24px 64px rgba(26, 26, 26, 0.28);
  color: var(--ink);
}
.export-dialog::backdrop { background: rgba(26, 26, 26, 0.42); backdrop-filter: blur(2px); }
.export-dialog[open] .export-dialog-panel { animation: dialog-in 0.18s var(--ease) both; }

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.export-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px;
}
.export-dialog-head h2 { margin: 0 0 3px; font-size: 21px; }
.export-dialog-head p { margin: 0; font-size: 12.5px; color: var(--mid); }

.export-dialog-close {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--mid);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.export-dialog-close:hover { border-color: var(--border-b); background: var(--brand-xl); color: var(--brand-dd); }

.export-dialog-section { padding: 0 24px; }
.export-dialog-section + .export-dialog-section { padding-top: 20px; }

.export-dialog-label {
  display: block;
  margin-bottom: 9px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
}

.export-format-list { display: flex; flex-direction: column; gap: 8px; }

.export-format {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.export-format:hover { border-color: var(--border-b); }
.export-format:has(input:checked) { border-color: var(--brand); background: var(--brand-xl); }
.export-format input { flex: none; margin: 3px 0 0; accent-color: var(--brand); }
.export-format-title { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.export-format-desc { display: block; margin-top: 2px; font-size: 12px; color: var(--mid); text-wrap: pretty; }

.export-filename {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 24px 0;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--bg-alt);
  font-family: var(--ff-mono);
  font-size: 12px;
  word-break: break-all;
}
.export-filename-note { font-family: var(--ff-body); font-size: 11.5px; color: var(--mid); white-space: nowrap; }

.export-dialog-progress { margin: 14px 24px 0; }
.export-dialog-progress p { margin: 8px 0 0; font-size: 12px; color: var(--mid); }

.export-dialog-done {
  margin: 14px 24px 0;
  padding: 11px 14px;
  border: 1px solid #a7f3d0;
  border-radius: var(--r-md);
  background: var(--success-bg);
  color: var(--success);
  font-size: 12.5px;
  font-weight: 600;
}

.export-dialog-done { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.export-download-link {
  padding: 5px 12px;
  border-radius: var(--r-sm);
  background: var(--success);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
}
.export-download-link:hover { text-decoration: none; opacity: 0.9; }

.export-dialog-hint { font-family: var(--ff-body); font-size: 11.5px; font-weight: 400; color: var(--mid); }

.export-dialog-error {
  margin: 14px 24px 0;
  padding: 11px 14px;
  border: 1px solid var(--danger);
  border-radius: var(--r-md);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 12.5px;
  font-weight: 600;
}

/* A small "i" a person can hover for the definition of a term the app can't
   assume they already know (eNPS, anonymity threshold, n, ...). Plain
   title-attribute tooltips on purpose: no JS, works on every element, and
   screen readers announce it. */
.info-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  border-radius: var(--r-pill);
  background: var(--brand-l);
  color: var(--brand-dd);
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  cursor: default;
  vertical-align: middle;
}
.info-dot:hover { background: var(--brand); color: #fff; }

.export-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 20px 24px 22px;
}

/* -------------------------------------------------------------- loaders */

/* Turbo Drive's own navigation bar, recolored to brand. */
.turbo-progress-bar { height: 3px; background: var(--brand); }

.bar-indeterminate {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--brand-l);
  overflow: hidden;
}
.bar-indeterminate span {
  display: block;
  height: 100%;
  background: var(--brand);
  animation: indeterminate 1.05s ease-in-out infinite;
}

@keyframes indeterminate {
  0% { transform: translateX(-100%) scaleX(0.35); }
  50% { transform: translateX(20%) scaleX(0.6); }
  100% { transform: translateX(100%) scaleX(0.35); }
}

.loading-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
}
.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--brand-l);
  border-top-color: var(--brand);
  border-radius: var(--r-pill);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.sk {
  background: linear-gradient(90deg, var(--sk-1) 0%, var(--sk-2) 40%, var(--sk-1) 80%);
  background-size: 420px 100%;
  border-radius: 6px;
  animation: shimmer 1.15s linear infinite;
}
@keyframes shimmer {
  0% { background-position: -420px 0; }
  100% { background-position: 420px 0; }
}

.sk-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 16px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

/* A Turbo Frame fetching its replacement — dim it rather than leaving the
   old content looking live. */
turbo-frame[aria-busy="true"] { opacity: 0.5; transition: opacity 0.15s var(--ease); }
turbo-frame[aria-busy="true"] .sk { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .sk, .spinner, .bar-indeterminate span, .export-dialog[open] { animation: none; }
}

/* ------------------------------------------------------------ focus rings */

/* Containers that draw their OWN focus ring (a search box lights up its whole
   pill via :focus-within) must not also give the bare <input> inside an
   outline — that painted two concentric purple rectangles, one hugging the
   text and one around the box. The container ring is the real one; the input's
   is suppressed just inside those containers, never globally, so keyboard
   focus stays visible everywhere else. */
.typeahead-box input:focus-visible,
.heatmap-search input:focus-visible,
.accounts-search-row input:focus-visible,
.auth-field input:focus-visible {
  outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ------------------------------------------------------------ sign-in page */

.auth-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.auth-split-brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: 64px 56px;
  border-right: 1px solid var(--border);
}

.auth-split-mark { display: flex; align-items: center; gap: 10px; }
.auth-split-mark .brand-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--brand); }
.auth-split-mark .brand { font-family: var(--ff-display); font-weight: 600; font-size: 17px; color: var(--brand-dd); }

.auth-headline {
  margin: 0 0 20px;
  font-family: var(--ff-display);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 12em;
  text-wrap: pretty;
}

.auth-sub { margin: 0; color: var(--mid); font-size: 15px; max-width: 30em; text-wrap: pretty; }
.auth-split-foot { margin: 0; font-family: var(--ff-mono); font-size: 12px; color: var(--muted); }

.auth-split-form {
  display: flex;
  align-items: center;
  padding: 64px 56px;
  background: var(--brand-xl);
}
.auth-split-form-inner { width: 100%; max-width: 360px; }

/* The old centered card is replaced by the split; keep these aligned to it. */
.auth-eyebrow { margin: 0 0 12px; font-family: var(--ff-mono); letter-spacing: 0.12em; }
.auth-title { margin: 0 0 4px; font-size: 24px; }
.auth-subtitle { margin: 0 0 28px; }
.auth-field label {
  font-family: var(--ff-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.auth-btn-primary { justify-content: flex-start; border-radius: var(--r-sm); }
.auth-flash { border-radius: var(--r-sm); }

@media (max-width: 860px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-split-brand { border-right: none; border-bottom: 1px solid var(--border); padding: 40px 28px; gap: 32px; }
  .auth-headline { font-size: 30px; }
  .auth-split-form { padding: 40px 28px; }
}

/* ---------------------------------------------------------- narrow screens */

@media (max-width: 760px) {
  .survey-header-top { padding: 16px 16px 14px; }
  .survey-title-row h1 { font-size: 22px; }
  .tab-nav, .scope-bar { padding-left: 16px; padding-right: 16px; }
  .scope-bar-n { margin-left: 0; border-left: none; padding-left: 0; }
  .app-shell { padding: 16px; }
  .driver-split { flex-direction: column; }
  .driver-detail-pane { position: static; width: 100%; }
  .nav-search { display: none; }
}

@media (max-width: 900px) {
  .app-body { display: block; }
  .side-nav {
    width: auto;
    min-height: 0;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    gap: 0;
    padding: 0 8px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .side-nav-caption, .side-nav-context, .side-nav-foot { display: none; }
  .side-nav-link {
    border-left: none;
    border-bottom: 3px solid transparent;
    padding: 12px 14px;
    white-space: nowrap;
  }
  .side-nav-link.is-active { border-left: none; border-bottom-color: var(--brand); }
  .heatmap-scroll, .matrix-pane { margin: 0 -16px; max-height: calc(100vh - 150px); }
}

/* ------------------------------------------------------------- dropdowns */

/* Native select, themed caret — no custom listbox, no radio circles. */
.select-wrap { position: relative; display: inline-flex; align-items: center; }
.select-wrap-block { display: flex; width: 100%; }
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 7px 30px 7px 11px;
  border: 1px solid var(--border-b);
  border-radius: var(--r-sm);
  background: var(--bg);
  font-family: var(--ff-body);
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
}
.select-wrap-block select { padding: 11px 38px 11px 13px; border-radius: var(--r-md); font-size: 13.5px; font-weight: 600; }
.select-wrap select:hover { border-color: var(--brand); }
.select-caret { position: absolute; right: 11px; pointer-events: none; font-size: 10px; color: var(--mid); }
.select-wrap-block .select-caret { right: 14px; font-size: 11px; }

/* ------------------------------------------------------- page head + filters */

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.page-head h1 { margin: 0 0 4px; font-size: 28px; }
.page-head-sub { margin: 0; font-size: 13.5px; color: var(--mid); }
.filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

/* --------------------------------------------------------- report builder */

.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.report-field label { display: block; }
.report-number {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-b);
  border-radius: var(--r-sm);
  background: var(--bg);
  font-family: var(--ff-body);
  font-size: 13.5px;
  color: var(--ink);
}
.report-hint { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); text-wrap: pretty; }

.checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.checkbox-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.checkbox-chip:hover { border-color: var(--border-b); }
.checkbox-chip:has(input:checked) { border-color: var(--brand); background: var(--brand-xl); color: var(--brand-dd); font-weight: 600; }
.checkbox-chip input { accent-color: var(--brand); }

.report-summary {
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px dashed var(--border-b);
  border-radius: var(--r-md);
  background: var(--brand-xl);
  font-size: 13px;
  color: var(--slate);
  text-wrap: pretty;
}
.report-summary strong { color: var(--brand-dd); }

/* ------------------------------------------------------- user management */

.user-cell { display: flex; align-items: center; gap: 11px; }
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: var(--brand-l);
  color: var(--brand-dd);
  font-size: 11.5px;
  font-weight: 600;
}
.user-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.user-email { display: block; font-family: var(--ff-mono); font-size: 11.5px; color: var(--muted); }

.status-pill { padding: 3px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; }
.status-active { background: var(--success-bg); color: var(--success); }
.status-invited { background: var(--amber-bg); color: var(--amber); }
.status-suspended { background: var(--danger-bg); color: var(--danger); }

/* ------------------------------------------------------- typeahead polish */

.typeahead-mark {
  padding: 0 1px;
  border-radius: 3px;
  background: var(--brand-l);
  color: var(--brand-dd);
  font-weight: 700;
}
.typeahead-empty { padding: 14px 16px; font-size: 12.5px; color: var(--muted); }

/* The "go deeper" actions sit directly under the KPI strip rather than at the
   bottom of the page: they're the next thing most people want after reading
   the headline numbers, and below the driver list they were under the fold. */
.deeper-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 26px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
}
.deeper-bar .mono-label { margin-right: 4px; }

/* --------------------------------------------------------- loading pill */

/* Fixed, top-centre, above everything: the app's slow work is server-side, so
   the indicator must not depend on the page content that hasn't arrived yet. */
.loading-pill {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg);
  box-shadow: 0 6px 24px rgba(26, 26, 26, 0.16);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--slate);
  animation: pill-in 0.18s var(--ease) both;
}

@keyframes pill-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Turbo's own bar, made actually noticeable rather than a 3px hairline. */
.turbo-progress-bar { height: 4px; background: var(--brand); }

@media (prefers-reduced-motion: reduce) {
  .loading-pill { animation: none; }
}

/* .driver-row is a <button> now (the pane switches client-side rather than
   navigating), so it needs the block/appearance a link gave it for free. */
button.driver-row {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg);
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* ------------------------------------------------------ manager preview */

.manager-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0 0 20px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
}
.manager-preview-copy { min-width: 0; }
.manager-preview-copy .mono-label { display: inline-flex; align-items: center; gap: 6px; }
.manager-preview-copy p { margin: 5px 0 0; font-size: 12.5px; color: var(--mid); max-width: 62ch; text-wrap: pretty; }
.manager-preview-search { flex: 1 1 300px; max-width: 380px; position: relative; }

/* "Select all managers" affordance in the export picker. */
.link-button {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--brand);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.link-button:hover { color: var(--brand-dd); }
.manager-picker-summary { margin-top: 8px; }
.chip-count { background: var(--brand-l); color: var(--brand-dd); font-weight: 600; }
.chip-clear {
  margin-left: 8px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--mid);
  cursor: pointer;
  text-decoration: underline;
}

.pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 14px 0; }
.pagination-gap { padding: 0 2px; color: var(--muted); }

/* ==========================================================================
   Account picker, typeahead dropdown and survey listing
   ========================================================================== */

/* ------------------------------------------------------------- search hero */

/* The account picker is the app's front door and was a bare input on white.
   The panel gives the search somewhere to sit and makes the page read as a
   deliberate starting point rather than an unstyled form. */
.hero {
  position: relative;
  /* Deliberately NOT overflow:hidden — the search dropdown is a child of this
     panel and was being clipped to the panel's edge, leaving a visible header
     and no results. Backgrounds are clipped to border-radius on their own, so
     the rounded gradient needs no help. */
  padding: 30px 32px 32px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 100% 0%, var(--brand-l) 0%, rgba(237, 233, 254, 0) 55%),
    linear-gradient(180deg, var(--brand-xl) 0%, var(--bg) 60%);
  box-shadow: var(--shadow-sm);
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.hero h1 { margin: 0 0 6px; font-size: 32px; letter-spacing: -0.01em; }
.hero-sub { margin: 0 0 20px; max-width: 62ch; color: var(--mid); font-size: 14px; line-height: 1.55; }

/* A live count, so the box says how much it is searching over instead of
   leaving that to a guess. */
.hero-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid var(--border-b);
  border-radius: var(--r-pill);
  background: var(--bg);
  font-family: var(--ff-mono);
  font-size: 11.5px;
  color: var(--brand-dd);
  white-space: nowrap;
}
.hero-count b { font-weight: 600; }

.search-hero .typeahead-box {
  padding: 14px 16px;
  border-width: 1.5px;
  border-color: var(--border-b);
  border-radius: 12px;
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 160ms var(--ease), border-color 160ms var(--ease);
}
.search-hero .typeahead-box:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-l), 0 6px 20px rgba(124, 58, 237, 0.10);
}
.search-hero .typeahead-box input { font-size: 15px; }

/* Tells people the shortcut exists rather than hiding it. Hidden once the
   box has focus — at that point it is noise, and it would sit under the
   caret on a long query. */
.search-kbd {
  display: inline-flex;
  gap: 3px;
  flex: none;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--muted);
}
.search-kbd kbd {
  min-width: 20px;
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--bg-alt);
  font: inherit;
  text-align: center;
}
.typeahead-box:focus-within .search-kbd { display: none; }

/* ------------------------------------------------------- typeahead results */

/* The base rule makes the PANEL itself the scroller, which would scroll the
   count header and keyboard legend away with the results. Scrolling moves to
   .typeahead-scroll instead so both stay pinned. */
.typeahead-panel {
  z-index: 30;
  display: flex;
  flex-direction: column;
  max-height: min(420px, calc(100vh - 200px));
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

.typeahead-head,
.typeahead-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  background: var(--bg-alt);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.typeahead-head { border-bottom: 1px solid var(--border); }
.typeahead-foot { border-top: 1px solid var(--border); text-transform: none; letter-spacing: 0; }
.typeahead-foot kbd {
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  font: inherit;
  color: var(--mid);
}
.typeahead-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.typeahead-head, .typeahead-foot { flex: none; }

/* Results are a row of [monogram][name/detail], so the eye lands on a
   consistent left edge instead of on names of wildly different lengths. */
.typeahead-result { display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.typeahead-result .mono-tile { width: 30px; height: 30px; font-size: 11px; }
.typeahead-result-body { min-width: 0; }
.typeahead-result-title,
.typeahead-result-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.typeahead-result-body { display: block; }
.typeahead-result-go { margin-left: auto; flex: none; color: var(--brand); opacity: 0; transition: opacity 120ms var(--ease); }
.typeahead-result:hover .typeahead-result-go,
.typeahead-result.is-active .typeahead-result-go { opacity: 1; }

/* --------------------------------------------------------------- monograms */

/* A stable, non-random colour per account/survey: the same name always gets
   the same tile, so the list is recognisable at a glance on the way back to
   an account someone opens often. */
.mono-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--brand-l);
  color: var(--brand-dd);
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.mono-tile-1 { background: #ede9fe; color: #5b21b6; }
.mono-tile-2 { background: #dbeafe; color: #1e40af; }
.mono-tile-3 { background: #d1fae5; color: #065f46; }
.mono-tile-4 { background: #fef3c7; color: #92400e; }
.mono-tile-5 { background: #fee2e2; color: #991b1b; }
.mono-tile-6 { background: #e0e7ff; color: #3730a3; }

/* ------------------------------------------------------------ recent cards */

.recent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.recent-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--ink);
  transition: transform 140ms var(--ease), box-shadow 140ms var(--ease), border-color 140ms var(--ease);
}
.recent-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-b);
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.10);
  text-decoration: none;
}
.recent-card-body { min-width: 0; }
.recent-card-title {
  display: block;
  font-family: var(--ff-display);
  font-size: 15.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-card-sub {
  display: block;
  margin-top: 2px;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-card-go { margin-left: auto; flex: none; color: var(--brand); }

/* --------------------------------------------------------- survey listing */

.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-alt);
}
.filter-bar .heatmap-search { flex: 1 1 240px; max-width: 320px; background: var(--bg); border: 1px solid var(--border); }
.filter-bar-count { margin-left: auto; font-family: var(--ff-mono); font-size: 11.5px; color: var(--mid); white-space: nowrap; }

.survey-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--ink);
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease), background 140ms var(--ease);
}
.survey-row:hover {
  border-color: var(--border-b);
  background: var(--brand-xl);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.07);
  text-decoration: none;
}
.survey-row-body { min-width: 0; }
.survey-row-title {
  display: block;
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The second line is the survey's facts — dates, type, whether eNPS was on —
   which is what tells two identically-titled runs apart. Several accounts
   have three surveys called "2026 Pulse Survey". */
.survey-row-facts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 5px;
  font-size: 12px;
  color: var(--mid);
}
.survey-row-facts .dot { color: var(--border-b); }
.survey-row-meta { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.survey-row-go { color: var(--brand); }

/* Status carries meaning here, so it carries colour: a live survey is still
   collecting and its numbers will move, an ended one is final. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-running { background: var(--success-bg); color: var(--success); }
.status-published { background: var(--amber-bg); color: var(--amber); }
.status-ended { background: var(--bg-alt); color: var(--mid); }

/* A metric with no value. Muted and lighter than a real number so an empty
   card never reads as a score of zero — see IconHelper#metric. */
.metric-empty { color: var(--muted); font-weight: 400; }

/* Text input in the user form — matches .report-number, which was number-only. */
.report-text {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
}
.report-text:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-l); }
.filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }

/* ------------------------------------------------------------------- logo */

.logo-lockup { display: block; flex: none; }
.top-nav-left .logo-lockup { height: 30px; width: auto; }

/* The loading indicator is the mark itself — four cells lighting in sequence.
   The cells are listed clockwise in the markup, so the sequence reads as
   rotation WITHOUT rotating the grid, which the identity spec forbids. */
.logo-spinner { flex: none; }
.logo-spinner-cell {
  animation: logo-cell 1.2s ease-in-out infinite;
  transform-origin: center;
}
.logo-spinner-cell:nth-of-type(2) { animation-delay: 0s; }
.logo-spinner-cell:nth-of-type(3) { animation-delay: 0.15s; }
.logo-spinner-cell:nth-of-type(4) { animation-delay: 0.3s; }
.logo-spinner-cell:nth-of-type(5) { animation-delay: 0.45s; }

@keyframes logo-cell {
  0%, 70%, 100% { fill: #a78bfa; }
  25%           { fill: #ffffff; }
}

/* A pulsing four-cell grid is a lot of motion for anyone who asked for less.
   The mark still shows — it just stops animating, rather than disappearing
   and leaving the pill looking broken. */
@media (prefers-reduced-motion: reduce) {
  .logo-spinner-cell { animation: none; }
  .logo-spinner-cell:nth-of-type(5) { fill: #ffffff; }
}
.brand-link { display: inline-flex; align-items: center; }
.brand-link:hover { opacity: 0.82; text-decoration: none; }
/* Superseded by the lockup partial; kept as a no-op guard so any straggling
   markup doesn't render a stray "CM" tile next to the new mark. */
.top-nav-left .brand-mark, .auth-split-brand .brand-mark { display: none; }
/* ==========================================================================
   revamp v2 — additions only. Load AFTER revamp.css:




   Everything here is new UI: the export dialog's scope/format/include groups,
   the manager-tab checklist, the manager-preview menu and banner, the
   scope-bar filter popover, the command palette and the cell drill-down.
   Existing selectors are not restyled — the only overrides are the two
   .heatmap-tile.is-drillable rules, which add the affordance for cells that
   now open something.

   Colours come from the same custom properties revamp.css defines; the
   fallbacks after each var() are there so a partial adoption of this file
   still renders sanely.
   ========================================================================== */

/* — export dialog: scope segmented control — */
.export-dialog-label-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.link-button {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--accent, #7c3aed); text-decoration: underline; text-underline-offset: 3px;
}
.export-seg {
  display: flex; overflow: hidden;
  border: 1px solid var(--accent-border, #d8c9f0); border-radius: 10px;
}
.export-seg-opt {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 9px 10px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft, #4a4a4a);
  background: var(--surface, #fff);
}
.export-seg-opt + .export-seg-opt { border-left: 1px solid var(--accent-border, #d8c9f0); }
.export-seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.export-seg-opt:hover { background: var(--accent-wash, #faf7ff); }
.export-seg-opt:has(input:checked) { background: var(--accent, #7c3aed); color: #fff; }
.export-seg-opt:has(input:focus-visible) { outline: 2px solid var(--accent, #7c3aed); outline-offset: -2px; }

/* — export dialog: format cards — */
.export-cards { display: flex; flex-direction: column; gap: 8px; }
.export-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start; gap: 11px;
  padding: 12px 13px; cursor: pointer;
  border: 1px solid var(--border, #e5e5e5); border-radius: 10px;
  background: var(--surface, #fff);
}
.export-card:hover { border-color: var(--accent-border, #d8c9f0); background: var(--accent-wash, #faf7ff); }
.export-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.export-card:has(input:checked) { border-color: var(--accent, #7c3aed); background: var(--accent-wash, #faf7ff); }
.export-card:has(input:focus-visible) { outline: 2px solid var(--accent, #7c3aed); outline-offset: 2px; }
.export-card-dot {
  width: 15px; height: 15px; margin-top: 3px; border-radius: 999px;
  border: 1px solid var(--accent-border, #d8c9f0); background: var(--surface, #fff);
}
.export-card:has(input:checked) .export-card-dot { border: 5px solid var(--accent, #7c3aed); }
.export-card-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.export-card-label { font-size: 13.5px; font-weight: 600; }
.export-card-desc { font-size: 12px; color: var(--mid); text-wrap: pretty; }
.export-card-note { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* — export dialog: include list — */
.export-includes { display: flex; flex-direction: column; gap: 2px; }
.export-include {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.export-include:hover { background: var(--accent-wash, #faf7ff); }
.export-include input { position: absolute; opacity: 0; width: 0; height: 0; }
.export-include-box {
  width: 17px; height: 17px; border-radius: 5px;
  border: 1px solid var(--accent-border, #d8c9f0); background: var(--surface, #fff);
  position: relative;
}
.export-include:has(input:checked) .export-include-box {
  border-color: var(--accent, #7c3aed); background: var(--accent, #7c3aed);
}
.export-include:has(input:checked) .export-include-box::after {
  content: ""; position: absolute; left: 5px; top: 2px;
  width: 5px; height: 9px; border: 2px solid #fff; border-top: 0; border-left: 0;
  transform: rotate(42deg);
}
.export-include:has(input:focus-visible) .export-include-box { outline: 2px solid var(--accent, #7c3aed); outline-offset: 2px; }
.export-include-label { font-size: 13px; font-weight: 600; }
.export-include-note { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* — export dialog: manager checklist — */
.manager-checklist { border: 1px solid var(--border, #e5e5e5); border-radius: 10px; overflow: hidden; }
.manager-checklist-search {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid var(--border, #e5e5e5);
}
.manager-checklist-search input { flex: 1; border: 0; padding: 0; font: inherit; font-size: 13px; background: none; }
.manager-checklist-search input:focus { outline: none; }
.manager-checklist-rows { max-height: 172px; overflow: auto; }
.manager-checklist-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 9px 12px; cursor: pointer; background: var(--surface, #fff);
}
.manager-checklist-row + .manager-checklist-row { border-top: 1px solid var(--border-soft, #f1f0f4); }
.manager-checklist-row:has(input:checked) { background: var(--accent-wash); }
/* :has() fallback for older engines — the class is still applied on render. */
.manager-checklist-row.is-selected { background: var(--accent-wash); }
.manager-checklist-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.manager-checklist-box {
  width: 17px; height: 17px; border-radius: 5px; position: relative;
  border: 1px solid var(--accent-border, #d8c9f0); background: var(--surface, #fff);
}
/* Driven by the checkbox's OWN :checked state, not by a class JavaScript has
   to remember to add. It was `.is-selected .manager-checklist-box`, and
   #toggle only updated the internal Set — so ticking a box changed the hidden
   input and the count, and drew nothing. The real input is visually hidden, so
   the row simply never looked selected. State now comes from the one thing
   that cannot desync from what will actually be submitted. */
.manager-checklist-row input:checked ~ .manager-checklist-box {
  border-color: var(--accent); background: var(--accent);
}
.manager-checklist-row input:checked ~ .manager-checklist-box::after {
  content: ""; position: absolute; left: 5px; top: 2px;
  width: 5px; height: 9px; border: 2px solid #fff; border-top: 0; border-left: 0;
  transform: rotate(42deg);
}
.manager-checklist-name { font-size: 13px; font-weight: 600; }
.manager-checklist-meta { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.manager-checklist-empty { margin: 0; padding: 14px 12px; font-size: 12.5px; color: var(--mid); }

/* — manager preview: header popover — */
.preview-menu { position: relative; display: inline-flex; }
.preview-menu .btn.is-previewing {
  border-color: var(--accent, #7c3aed);
  background: var(--accent-tint, #ede9fe);
  color: var(--accent-strong, #4c1d95);
}
.preview-menu-panel {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 45;
  width: 340px; padding: 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--accent-border, #d8c9f0); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(26, 26, 26, 0.16);
}
.preview-menu-head { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border, #e5e5e5); }
.preview-menu-title { margin: 0 0 3px; font-size: 15px; font-weight: 600; }
.preview-menu-copy { margin: 0; font-size: 12px; color: var(--mid); text-wrap: pretty; }
/* Inside the popover the results list is part of the flow, not an overlay
   floating above the page. */
.preview-menu-panel .typeahead-panel-inline {
  position: static; margin-top: 8px; max-height: 240px; overflow: auto;
  box-shadow: none; border: 1px solid var(--border, #e5e5e5);
}

/* — manager preview: banner — */
.preview-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 24px;
  background: var(--accent-strong, #4c1d95); color: #fff;
}
.preview-banner-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600;
}
.preview-banner-name { font-size: 13px; font-weight: 600; }
.preview-banner-meta { font-size: 12px; color: var(--accent-border, #d8c9f0); }
.preview-banner-exit {
  margin-left: auto; padding: 5px 12px;
  border: 1px solid #a78bfa; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: #fff; text-decoration: none;
}
.preview-banner-exit:hover { background: #5b21b6; color: #fff; }

/* — scope bar: filter popover — */
.scope-filter { position: relative; display: inline-flex; }
.scope-filter-button {
  padding: 4px 10px; cursor: pointer;
  border: 1px dashed var(--accent-border, #d8c9f0); border-radius: 999px;
  background: var(--surface, #fff);
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent-strong, #4c1d95);
}
.scope-filter-button:hover { border-style: solid; border-color: var(--accent, #7c3aed); }
.scope-filter-panel {
  position: absolute; top: calc(100% + 9px); left: 0; z-index: 44;
  width: 300px; padding: 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--accent-border, #d8c9f0); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(26, 26, 26, 0.16);
}
.scope-filter-title {
  margin: 0 0 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border, #e5e5e5);
  font-size: 15px; font-weight: 600;
}
.scope-filter-field + .scope-filter-field { margin-top: 12px; }
.scope-filter-field label {
  display: block; margin-bottom: 5px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mid);
}
.scope-filter-actions { display: flex; gap: 8px; margin-top: 16px; }
.scope-chip-locked { opacity: 0.9; }

/* — command palette — */
.palette-trigger {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  margin-left: auto; min-width: 280px; padding: 6px 10px;
  border: 1px solid var(--border, #e5e5e5); border-radius: 999px;
  background: var(--surface, #fff);
  font: inherit; font-size: 13px; color: var(--muted); text-align: left;
}
.palette-trigger span:first-of-type { flex: 1; }
.palette-trigger:hover { border-color: var(--accent-border, #d8c9f0); background: var(--accent-wash, #faf7ff); }
.palette-trigger-key {
  font-size: 11px; border: 1px solid var(--border, #e5e5e5);
  border-radius: 5px; padding: 1px 5px;
}
.palette { border: 0; padding: 0; background: none; max-width: 560px; width: 100%; }
.palette::backdrop { background: rgba(26, 26, 26, 0.38); }
.palette-box {
  background: var(--surface, #fff); border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(26, 26, 26, 0.3);
}
.palette-input {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border, #e5e5e5);
}
.palette-input input { flex: 1; border: 0; padding: 0; font: inherit; font-size: 14.5px; background: none; }
.palette-input input:focus { outline: none; }
.palette-esc {
  font-size: 11px; color: var(--muted);
  border: 1px solid var(--border, #e5e5e5); border-radius: 5px; padding: 1px 5px;
}
.palette-results { max-height: 60vh; overflow: auto; padding: 8px 0; }
.palette-group {
  margin: 8px 0 4px; padding: 0 16px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}
.palette-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px; text-decoration: none; color: inherit;
}
.palette-item:hover, .palette-item.is-active {
  background: var(--accent-wash, #faf7ff); color: var(--accent-strong, #4c1d95);
}
.palette-item-label { flex: 1; font-size: 13.5px; }
.palette-item-hint { font-size: 11.5px; color: var(--muted); }
.palette-empty { margin: 0; padding: 16px; font-size: 13px; color: var(--mid); }

/* — cell drill-down — */
.heatmap-tile.is-drillable { cursor: pointer; }
.heatmap-tile.is-drillable:hover,
.heatmap-tile.is-drillable:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent-strong, #4c1d95); outline: none;
}
.drilldown { border: 0; padding: 0; background: none; max-width: none; width: 100%; height: 100%; margin: 0 0 0 auto; }
.drilldown::backdrop { background: rgba(26, 26, 26, 0.38); }
.drilldown-panel {
  position: relative; margin-left: auto;
  width: min(520px, 100%); height: 100%; overflow: auto;
  padding: 22px 24px 28px;
  background: var(--surface, #fff);
  box-shadow: -18px 0 48px rgba(26, 26, 26, 0.18);
}
.drilldown-close {
  position: absolute; top: 18px; right: 20px;
  width: 30px; height: 30px; cursor: pointer;
  border: 1px solid var(--border, #e5e5e5); border-radius: 999px;
  background: var(--surface, #fff); color: var(--mid);
  font-size: 15px; line-height: 1;
}
.drilldown-close:hover { border-color: var(--accent-border, #d8c9f0); background: var(--accent-wash, #faf7ff); color: var(--accent-strong, #4c1d95); }
.drilldown-head { padding-right: 44px; }
.drilldown-head h2 { margin: 6px 0 0; font-size: 22px; }
.drilldown-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1px;
  margin: 18px 0; background: var(--border, #e5e5e5);
  border: 1px solid var(--border, #e5e5e5);
}
.drilldown-stats > div {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px; background: var(--surface, #fff);
}
.drilldown-stats strong { font-size: 22px; color: var(--accent-strong, #4c1d95); }
.drilldown-table { width: 100%; border-collapse: collapse; }
.drilldown-table th {
  text-align: left; padding: 6px 0;
  border-bottom: 1px solid var(--accent-border, #d8c9f0);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mid);
}
.drilldown-table td { padding: 10px 0; border-bottom: 1px solid var(--border, #e5e5e5); font-size: 13px; }
.drilldown-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.drilldown-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 20px; }
.drilldown-loading { padding-top: 24px; }