/* =============================================================
   Achieva — Satisfaction Survey Management System
   Component styles. Every value is taken from the design handoff
   (README "Design Tokens" + the prototype's inline styles).
   ============================================================= */

* { box-sizing: border-box; }
body { margin: 0; }
/* Author `display` rules otherwise beat the UA stylesheet's [hidden]. */
[hidden] { display: none !important; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-light); text-decoration: underline; }
input, select, textarea, button { font-family: var(--font-sans); }
::placeholder { color: var(--fg-3); }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Visually hidden but still focusable and announced by screen readers. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  border: 0;
}

/* Keyboard focus must always be visible. */
:focus-visible { outline: 2.5px solid var(--teal); outline-offset: 2px; }
.sr-only:focus-visible { outline: none; }
label:has(.sr-only:focus-visible),
.choice-btn:focus-within, .scale-btn:focus-within, .star-btn:focus-within,
.nps-btn:focus-within {
  outline: 2.5px solid var(--teal); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Shell ─────────────────────────────────────────────────── */
.app {
  display: flex;
  min-height: 100vh;
  background: var(--bg-page);
  font-family: var(--font-sans);
  color: var(--fg-1);
  font-size: 14px;
  line-height: 1.6;
}

.sidebar {
  width: 264px;
  flex: 0 0 264px;
  background: var(--teal);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar__brand { padding: 20px 18px 16px; display: flex; flex-direction: column; gap: 4px; }
.sidebar__logo { height: 26px; width: auto; align-self: flex-start; }
.sidebar__label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62); padding-left: 2px;
}
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 11px 16px; cursor: pointer;
  font-size: 14px; font-weight: 500; border-left: 3px solid transparent;
  background: transparent; color: rgba(255, 255, 255, .82); text-decoration: none;
  transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}
.nav-item:hover { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .82); text-decoration: none; }
.nav-item.is-active {
  border-left-color: var(--gold);
  background: rgba(255, 255, 255, .15);
  color: #fff;
}
.nav-item.is-active:hover { color: #fff; }
.sidebar__footer { padding: 16px 18px; border-top: 1px solid rgba(255, 255, 255, .14); }
.sidebar__product { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .92); }
.sidebar__copy { font-size: 13px; color: rgba(255, 255, 255, .6); margin-top: 2px; }
.sidebar__dev { padding: 16px 18px 0; }
.sidebar__eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55); margin-bottom: 8px;
}
.sidebar__role {
  width: 100%; background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25); color: #fff; border-radius: 8px;
  padding: 9px 10px; font-size: 13px; font-weight: 500; line-height: 1.35;
}
.sidebar__note { font-size: 12.5px; color: rgba(255, 255, 255, .7); margin-top: 8px; line-height: 1.45; }

.dev-banner {
  background: var(--red); color: #fff; font-size: 12.5px; font-weight: 600;
  letter-spacing: .01em; padding: 8px 32px; text-align: center;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 64px; flex: 0 0 64px; background: #fff;
  border-bottom: 1px solid var(--border); display: flex; align-items: center;
  justify-content: space-between; padding: 0 32px; position: sticky; top: 0; z-index: 20;
}
.topbar__left { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.topbar__title { font-size: 22px; font-weight: 700; margin: 0; line-height: 1.15; }
.topbar__sub { font-size: 12.5px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__right { display: flex; align-items: center; gap: 10px; }
.pill-campaign {
  display: inline-flex; align-items: center; gap: 6px; background: var(--status-info-bg);
  color: var(--status-info-fg); border-radius: 999px; padding: 5px 12px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.avatar {
  width: 40px; height: 40px; border-radius: 999px; background: var(--teal);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; letter-spacing: .01em; flex: 0 0 40px;
}
.userchip { display: flex; align-items: center; gap: 11px; min-width: 0; }
.userchip__text {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0;
}
.userchip__name {
  font-size: 15px; font-weight: 700; line-height: 1.15; color: var(--fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}
.userchip__role {
  background: #f4ecf4; color: var(--purple); border-radius: 999px; padding: 2px 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.5; white-space: nowrap;
}
.btn-signout {
  display: inline-flex; align-items: center; gap: 8px; background: #fff;
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 16px;
  font-size: 14px; font-weight: 500; color: var(--fg-1); text-decoration: none;
  white-space: nowrap; transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}
.btn-signout:hover {
  color: var(--teal); border-color: var(--soft-teal); background: var(--bg-brand-soft);
  text-decoration: none;
}
.content { flex: 1; padding: 28px 32px 56px; max-width: 1400px; width: 100%; }

/* ── Generic surfaces ──────────────────────────────────────── */
.screen { display: flex; flex-direction: column; gap: 16px; }
.screen--dash, .screen--surveys { gap: 20px; }
.screen--narrow { max-width: 900px; }

.card {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
}
.card__head { padding: 18px 22px; border-bottom: 1px solid var(--border); }
.card__head--sm { padding: 16px 20px; }
.card__head--row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card__title { margin: 0; font-size: 15px; font-weight: 600; }
.card__note { font-size: 12.5px; color: var(--fg-2); }
.card__body { padding: 22px; }
.card__sub { margin: 5px 0 0; font-size: 12.5px; color: var(--fg-2); }

.eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-2);
}
.muted { font-size: 12.5px; color: var(--fg-2); }
.spacer { flex: 1; }
.empty-line { font-size: 13.5px; color: var(--fg-2); }
.empty-block { padding: 40px 20px; text-align: center; color: var(--fg-2); font-size: 13.5px; }

.pill { border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.pill--standard { background: var(--gray-200); color: var(--fg-2); gap: 5px; }
.chip-type {
  background: var(--bg-brand-soft); color: var(--teal-dark); border-radius: 6px;
  padding: 2px 8px; font-size: 11.5px; font-weight: 700;
}
.chip-logic {
  display: inline-flex; align-items: center; gap: 5px; background: #f4ecf4;
  color: var(--purple); border-radius: 6px; padding: 2px 8px; font-size: 11.5px;
  font-weight: 700;
}
.chip-option {
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 9px; font-size: 12.5px; color: var(--fg-2);
}
.dot-8 { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ── Form controls ─────────────────────────────────────────── */
.select, .input, .textarea {
  border: 1.5px solid var(--border); border-radius: 8px; padding: 8px 10px;
  font-size: 13px; background: #fff; color: var(--fg-1); font-family: var(--font-sans);
}
.select { cursor: pointer; }
.select--md, .input--md { padding: 9px 11px; font-size: 13px; }
.input--md { font-size: 13.5px; }
.select--lg, .input--lg, .textarea--lg { padding: 10px 12px; font-size: 14px; }
.input--search { width: 100%; padding: 9px 12px 9px 33px; font-size: 13.5px; }
.textarea { resize: vertical; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--gap8 { gap: 8px; }
.field-full { width: 100%; min-width: 0; max-width: 100%; }
/* A multiple select is a list box, not a menu: it needs room to breathe per option and
   an obvious selected state, since nothing collapses to show the current value. */
.select--multi {
  cursor: default; padding: 4px; overflow-y: auto;
}
.select--multi option {
  padding: 5px 7px; border-radius: 5px; cursor: pointer;
}
.select--multi option:checked {
  /* Set both, because Firefox paints a selected option with the system highlight and
     ignores `background` alone. */
  background: var(--bg-brand-soft) linear-gradient(0deg, var(--bg-brand-soft), var(--bg-brand-soft));
  color: var(--teal-dark); font-weight: 600;
}
.select--multi:disabled { background: var(--bg-subtle); opacity: .6; cursor: not-allowed; }
.checkbox { width: 17px; height: 17px; accent-color: #006269; cursor: pointer; }
.checkbox--sm { width: 16px; height: 16px; }
.check-row { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; border: none; font-family: var(--font-sans); text-decoration: none;
  transition: all 200ms cubic-bezier(.4, 0, .2, 1); white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn--teal { background: var(--teal); color: #fff; }
.btn--teal:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 98, 105, .3); }
.btn--outline-teal { background: #fff; color: var(--teal); border: 1.5px solid var(--teal); }
.btn--outline-teal:hover { background: var(--bg-brand-soft); color: var(--teal); }
.btn--outline-purple { background: #fff; color: var(--purple); border: 1.5px solid var(--purple); }
.btn--outline-purple:hover { background: #f4ecf4; color: var(--purple); }
.btn--ghost { background: transparent; color: var(--fg-2); padding: 9px 12px; }
.btn--ghost:hover { color: var(--teal); background: var(--bg-subtle); }
.btn--gold { background: var(--gold); color: #3b2a00; font-weight: 700; padding: 10px 14px; }
.btn--gold:hover { color: #3b2a00; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255, 184, 28, .35); }
.btn--danger-ghost { background: transparent; color: var(--fg-2); padding: 9px 12px; }
.btn--danger-ghost:hover { color: var(--red); background: var(--status-danger-bg); }
.btn--quiet {
  background: #fff; border: 1px solid var(--border); color: var(--fg-2);
  border-radius: 8px; padding: 10px 18px; font-size: 13.5px; font-weight: 600;
}
.btn--quiet:hover { color: var(--teal); border-color: var(--soft-teal); }
.btn--send { padding: 9px 15px; }
.btn--link {
  background: none; border: none; color: var(--teal); font-size: 12.5px;
  font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0;
  align-self: flex-start; font-family: var(--font-sans);
}
.btn--plain {
  background: none; border: none; color: var(--teal); font-size: 12.5px;
  font-weight: 600; cursor: pointer; font-family: var(--font-sans); padding: 0;
}
/* A disabled button had no styling of its own, so it still looked clickable and
   still lifted and glowed on hover. Neutral fill for every variant, and the hover
   rules explicitly undone — those are more specific than the base variant. */
.btn:disabled, .btn[disabled] {
  background: var(--gray-200); color: var(--fg-3); border-color: var(--border);
  cursor: not-allowed; box-shadow: none;
}
.btn:disabled:hover, .btn[disabled]:hover {
  background: var(--gray-200); color: var(--fg-3); border-color: var(--border);
  transform: none; box-shadow: none;
}
/* align-items matters: without it the row stretches its children, so a bare span
   of text sits at the top of the row while a button centres its own label. */
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Filter bar ────────────────────────────────────────────── */
.filterbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #fff;
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .07); padding: 14px 18px;
}

/* ── Dashboard ─────────────────────────────────────────────── */
/* auto-fit rather than a fixed count, so adding a KPI does not leave one orphaned on
   a row of its own. */
.kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px;
}
.kpi {
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .07); padding: 20px 22px; display: flex;
  flex-direction: column; gap: 6px;
}
.kpi__value-row { display: flex; align-items: baseline; gap: 8px; }
.kpi__value { font-size: 36px; font-weight: 700; line-height: 1.05; }
.kpi__unit { font-size: 13px; color: var(--fg-2); }
.kpi__note { font-size: 12.5px; color: var(--fg-2); }

.grid-15-1 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.grid-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.chart-legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--fg-2); }
.chart-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dash { width: 12px; height: 3px; border-radius: 2px; }
.chart-wrap { padding: 18px 22px 12px; }
.chart-wrap svg { width: 100%; height: 230px; display: block; }

.nps-body { padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.nps-score-row { display: flex; align-items: baseline; gap: 10px; }
.nps-score { font-size: 48px; font-weight: 700; line-height: 1; color: var(--teal); }
.nps-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--gray-200); }
.nps-rows { display: flex; flex-direction: column; gap: 10px; }
.nps-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.nps-row__label { flex: 1; }
.nps-row__pct { font-weight: 600; }
.nps-row__n { color: var(--fg-2); width: 34px; text-align: right; }

.rate-body { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.rate-row { display: flex; flex-direction: column; gap: 6px; }
.rate-row__head { display: flex; justify-content: space-between; font-size: 13px; gap: 12px; }
.rate-row__name { font-weight: 500; }
.rate-row__pct { color: var(--fg-1); font-weight: 600; }
.track-10 { height: 10px; border-radius: 999px; background: var(--gray-200); overflow: hidden; }
.track-10 > div {
  height: 100%; border-radius: 999px;
  transition: width 320ms cubic-bezier(.4, 0, .2, 1);
}

.need-body { padding: 22px; display: flex; flex-direction: column; gap: 13px; }
.need-row { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.need-row__label { width: 150px; flex: 0 0 150px; }
.need-track { flex: 1; height: 22px; background: var(--gray-200); border-radius: 6px; overflow: hidden; }
.need-track > div { height: 100%; background: var(--soft-teal); border-radius: 6px; }
.need-row__n { width: 28px; text-align: right; font-weight: 600; }

.demo-body { padding: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.demo-group { display: flex; flex-direction: column; gap: 12px; }
.demo-row { display: flex; flex-direction: column; gap: 4px; }
.demo-row__head { display: flex; justify-content: space-between; font-size: 12.5px; gap: 10px; }
.demo-row__meta { color: var(--fg-2); white-space: nowrap; }
.track-7 { height: 7px; background: var(--gray-200); border-radius: 999px; overflow: hidden; }
.track-7 > div, .track-8 > div { height: 100%; border-radius: 999px; }

/* Program questions — one block per question, two up */
.pq-body { padding: 22px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.pq { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pq__label { font-size: 14px; font-weight: 600; line-height: 1.45; text-wrap: pretty; }
.pq__alt { font-size: 12.5px; color: var(--fg-2); line-height: 1.45; text-wrap: pretty; }
.pq__meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 2px; }
.pq__headline { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.pq__value { font-size: 28px; font-weight: 700; line-height: 1.1; }
.pq .quote { margin-top: 2px; }
.pq__delta {
  font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px;
  background: var(--status-success-bg); color: var(--status-success-fg);
}
.pq__delta.is-down { background: var(--status-danger-bg); color: var(--status-danger-fg); }

.themes-body { padding: 22px; display: grid; grid-template-columns: 340px 1fr; gap: 32px; }
.theme-list { display: flex; flex-direction: column; gap: 12px; }

/* ── Donut view ────────────────────────────────────────────
   The alternative to the bar view. Every slice is named in the legend with its share,
   because two of the brand hues are close enough under deuteranopia that color alone
   would not tell them apart. */
.donut { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.donut__ring { width: 132px; height: 132px; flex: 0 0 auto; overflow: visible; }
.donut__total {
  font-family: var(--font-display); font-size: 21px; font-weight: 700; fill: var(--fg-1);
}
.donut__unit { font-size: 8.5px; fill: var(--fg-2); letter-spacing: .04em; text-transform: uppercase; }
.donut__legend { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 170px; }
.donut__key {
  display: flex; align-items: baseline; gap: 8px; font-size: 12.5px;
  padding: 2px 5px; margin-inline-start: -5px; border-radius: 6px;
  transition: background 140ms ease, opacity 140ms ease;
}
.donut__keylabel { flex: 1; color: var(--fg-1); text-wrap: pretty; }
.donut__keyval { color: var(--fg-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The bars/donuts switch, sized and colored like the other filter controls. */
.viewswitch { display: inline-flex; border: 1.5px solid var(--border); border-radius: 9px; overflow: hidden; }
.viewswitch a {
  padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--fg-2);
  background: #fff; text-decoration: none; transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}
.viewswitch a + a { border-inline-start: 1.5px solid var(--border); }
.viewswitch a:hover { color: var(--teal); text-decoration: none; }
.viewswitch a.is-on { background: var(--teal); color: #fff; }

/* ── The Map screen ──────────────────────────────────────────────────────────
   One box, two renderers: ECharts paints a canvas into it, Leaflet fills it with
   tiles and DOM. Both need an explicit height — neither can size itself from its
   contents, and a height of 0 is the most common way each of them "fails". */
/* Shaped to Pennsylvania rather than given a fixed height. A taller box does not draw
   a bigger map — the shape is fitted to whichever dimension runs out first, and the
   extra height becomes empty space above and below it. 17:10 is the state's own
   proportions once ECharts has applied its 0.75 latitude correction: 5.83 degrees of
   longitude by 2.56 of latitude. Change this and the map is either clipped or floating,
   so it is a measurement rather than a preference. */
.map-canvas { width: 100%; aspect-ratio: 17 / 10; min-height: 360px; max-height: 680px; }
.map-canvas.is-broken {
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-2); font-size: 13.5px; background: var(--gray-100);
  border-radius: 12px; text-align: center; padding: 20px;
}
/* Leaflet draws its own panes inside; keep its controls under the app's overlays. */
.map-canvas .leaflet-container { font-family: var(--font-sans); border-radius: 12px; }
.map-canvas .leaflet-pane, .map-canvas .leaflet-control { z-index: 1; }

/* A gradient bar, because the shading is continuous. If this ever becomes a classed
   map — equal-count buckets rather than a linear ramp — this has to become discrete
   swatches with their boundaries printed, or the legend stops describing the map. */
.map-legend { display: inline-flex; align-items: center; gap: 8px; }
.map-legend__ramp {
  width: 140px; height: 10px; border-radius: 999px;
  background: linear-gradient(to right, #fee5d9, #fcbba1, #fc9272, #fb6a4a, #de2d26, #a50f15);
}
.map-legend__end { font-size: 12px; font-weight: 600; color: var(--fg-2); }

/* Footnote for everything the map could not draw. Quiet, but never omitted: it is
   what keeps the figures above it and the shapes below it telling the same story. */
.map-note {
  margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--fg-2);
  text-wrap: pretty;
}

/* The same counts as a list — exact, copyable, and what a screen reader reads. */
.ziptable { display: flex; flex-direction: column; }
.ziptable__row {
  display: flex; align-items: center; gap: 14px; padding: 9px 0;
  border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.ziptable__row:last-child { border-bottom: 0; }
.ziptable__zip { font-weight: 600; width: 62px; font-variant-numeric: tabular-nums; }
.ziptable__bar { flex: 1; height: 8px; background: var(--gray-200); border-radius: 999px; overflow: hidden; }
.ziptable__bar span { display: block; height: 100%; background: var(--teal); border-radius: 999px; }
.ziptable__count { width: 34px; text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; }

/* The street view when there is no CARTO key: shown, and shown to be unavailable,
   rather than quietly dropped from the switch. */
.viewswitch .is-off {
  padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--fg-3);
  background: var(--gray-100); border-inline-start: 1.5px solid var(--border);
  cursor: not-allowed;
}

/* Provenance line under the themes card. Quiet, but not hidden: it is the only
   place the dashboard says whether a model or a keyword list produced the labels. */
.themes-source {
  margin: 0; padding: 0 22px 18px; font-size: 12.5px; line-height: 1.6;
  color: var(--fg-2); border-top: 1px solid var(--border); padding-top: 14px;
  text-wrap: pretty;
}
.themes-source strong { color: var(--gold-dark); font-weight: 600; }
.theme-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.theme-row__label { flex: 1; }
.track-8 { width: 110px; height: 8px; background: var(--gray-200); border-radius: 999px; overflow: hidden; }
.theme-row__n { width: 26px; text-align: right; font-weight: 600; }
.quotes { display: flex; flex-direction: column; gap: 14px; }
.quote {
  margin: 0; padding: 14px 18px; background: var(--bg-subtle);
  border-left: 3px solid var(--soft-teal); border-radius: 0 8px 8px 0;
}
.quote p { margin: 0; font-size: 14px; line-height: 1.6; text-wrap: pretty; }
.quote__meta { font-size: 12.5px; color: var(--fg-2); margin-top: 8px; }

/* ── Surveys ───────────────────────────────────────────────── */
.intro-copy { margin: 0; max-width: 660px; color: var(--fg-2); font-size: 14px; }
.survey-group { display: flex; flex-direction: column; gap: 12px; }
.survey-group__head { display: flex; align-items: center; gap: 10px; }
.survey-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.survey-card {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .07); padding: 20px 22px; display: flex;
  flex-direction: column; gap: 14px; transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}
.survey-card:hover { box-shadow: 0 2px 14px rgba(0, 98, 105, .10); border-color: var(--soft-teal); }
.survey-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.survey-card__titles { display: flex; flex-direction: column; gap: 6px; }
.survey-card__title { margin: 0; font-size: 15px; font-weight: 600; }
.pill-row { display: flex; gap: 8px; align-items: center; }
.survey-card__count { text-align: right; }
.survey-card__count-n { font-size: 22px; font-weight: 700; line-height: 1.1; }
.survey-card__count-label { font-size: 11.5px; color: var(--fg-2); }
.survey-card__meta { display: flex; gap: 20px; font-size: 12.5px; color: var(--fg-2); flex-wrap: wrap; }
.link-note {
  display: flex; align-items: center; gap: 8px; background: var(--bg-subtle);
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px;
}
.link-note span { flex: 1; font-size: 12.5px; color: var(--fg-2); }

/* ── Builder ───────────────────────────────────────────────── */
.builder-grid { display: grid; grid-template-columns: 1fr 380px; gap: 16px; align-items: start; }
.builder-list { display: flex; flex-direction: column; gap: 14px; }
.section-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.section-head__note { font-size: 12.5px; color: var(--fg-2); margin-left: auto; }
.section-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }

.q-row {
  border: 1.5px solid var(--border); background: #fff; border-radius: 10px;
  padding: 14px 16px; cursor: pointer; display: flex; gap: 14px; align-items: flex-start;
  transition: all 200ms cubic-bezier(.4, 0, .2, 1); text-decoration: none; color: inherit;
}
.q-row:hover { text-decoration: none; color: inherit; }
.q-row.is-selected { border-color: var(--teal); background: var(--bg-brand-soft); }
.q-row.is-locked { background: var(--bg-subtle); cursor: default; }
.q-row__num {
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); width: 22px;
  flex: 0 0 22px; padding-top: 2px;
}
/* A section header in the list. Still a row — it moves, duplicates and deletes like
   anything else — but styled as the divider it renders as, so it is not mistaken for a
   question that lost its answer type. */
.q-row--header { background: var(--bg-brand-soft); border-style: dashed; }
.q-row--header .q-row__label {
  font-family: var(--font-display); font-size: 14.5px; font-weight: 700;
  color: var(--teal);
}
.q-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.q-row__label { font-size: 14px; font-weight: 500; text-wrap: pretty; }
.q-row__meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.q-row__required { color: var(--red); font-size: 11.5px; font-weight: 700; }
.q-row__options { font-size: 12.5px; color: var(--fg-2); }
.q-row__actions { display: flex; gap: 4px; flex: 0 0 auto; }
.icon-btn {
  width: 28px; height: 28px; border: 1px solid var(--border); background: #fff;
  border-radius: 6px; color: var(--fg-2); cursor: pointer; display: flex;
  align-items: center; justify-content: center; padding: 0;
  transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}
.icon-btn:hover { color: var(--teal); border-color: var(--soft-teal); }
.icon-btn--danger:hover { color: var(--red); border-color: var(--red); }
.icon-btn--lg { width: 32px; height: 32px; flex: 0 0 32px; }

.inspector { position: sticky; top: 88px; }
.inspector__body { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.inspector__empty {
  padding: 28px 20px; display: flex; flex-direction: column; gap: 10px;
  align-items: center; text-align: center;
}
.inspector__empty p { margin: 0; font-size: 13.5px; color: var(--fg-2); max-width: 240px; }
.option-repeater { display: flex; flex-direction: column; gap: 9px; }
.option-row { display: flex; gap: 7px; align-items: center; }
.option-row input {
  flex: 1; min-width: 0; border: 1.5px solid var(--border); border-radius: 8px;
  padding: 8px 11px; font-size: 13.5px; color: var(--fg-1);
}
.btn--add-choice {
  align-self: flex-start; background: var(--bg-brand-soft); color: var(--teal);
  border: 1px dashed var(--soft-teal); border-radius: 8px; padding: 8px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font-sans);
}
.inspector__kpi {
  display: flex; gap: 8px; align-items: flex-start; background: var(--status-info-bg);
  border: 1px solid var(--soft-teal); border-radius: 8px; padding: 10px 12px;
  font-size: 12.5px; line-height: 1.5; color: var(--teal-dark);
}
.inspector__kpi svg { flex: 0 0 14px; margin-top: 2px; }

.logic-block {
  display: flex; flex-direction: column; gap: 9px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.logic-block p { margin: 0; font-size: 12.5px; color: var(--fg-2); }

/* ── Roster ────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: 6px; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; padding: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
  flex-wrap: wrap;
}
.tab {
  border: none; border-radius: 8px; padding: 10px 16px; font-size: 13.5px;
  font-weight: 600; cursor: pointer; background: transparent; color: var(--fg-2);
  text-decoration: none; transition: all 200ms cubic-bezier(.4, 0, .2, 1);
  font-family: var(--font-sans);
}
.tab:hover { text-decoration: none; }
.tab span { font-weight: 400; opacity: .75; }
.tab.is-active { color: #fff; }

.roster-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.roster-col { display: flex; flex-direction: column; gap: 16px; }
.roster-toolbar {
  padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex;
  flex-wrap: wrap; gap: 10px; align-items: center;
}
.search-wrap { position: relative; flex: 1; min-width: 180px; }
.search-wrap svg { position: absolute; left: 11px; top: 11px; }
.rowarn {
  display: flex; align-items: center; gap: 9px; padding: 11px 20px;
  background: var(--status-warning-bg); border-bottom: 1px solid var(--border);
  font-size: 12.5px; color: var(--status-warning-fg); flex-wrap: wrap;
}
.rowarn svg { flex: 0 0 15px; }
.rowarn span { flex: 1; min-width: 200px; }
.tactions__none {
  font-size: 12px; color: var(--status-warning-fg); white-space: nowrap;
  background: var(--status-warning-bg); border-radius: 6px; padding: 5px 9px;
}

.jobstrip {
  display: flex; flex-direction: column; gap: 7px; padding: 12px 20px;
  background: var(--status-info-bg); border-bottom: 1px solid var(--soft-teal);
}
.jobstrip.is-done { background: var(--bg-subtle); border-bottom-color: var(--border); }
.jobstrip__label { font-size: 12.5px; font-weight: 600; color: var(--status-info-fg); }
.jobstrip.is-done .jobstrip__label { color: var(--fg-2); }
.jobstrip__track { height: 6px; border-radius: 999px; background: var(--gray-200); overflow: hidden; }
.jobstrip__fill {
  height: 100%; background: var(--teal); border-radius: 999px;
  transition: width 320ms cubic-bezier(.4, 0, .2, 1);
}
.jobstrip__error { font-size: 12px; color: var(--status-danger-fg); }

.table-scroll { overflow-x: auto; }
.trow {
  display: grid;
  grid-template-columns: 36px minmax(150px, 1.4fr) minmax(150px, 1.2fr)
                         minmax(104px, .9fr) minmax(120px, 1fr) minmax(160px, auto);
  column-gap: 14px; min-width: 840px;
}
.trow--head {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-2); padding: 11px 20px; border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.trow--body {
  align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--gray-200);
  font-size: 13.5px; transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}
.trow--body:hover { background: rgba(0, 98, 105, .03); }
.tcell-right { text-align: right; }
.tname { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tname__main { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tname__sub { font-size: 12px; color: var(--fg-2); }
.tcontact { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--fg-2); min-width: 0; }
.tcontact span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taud { font-size: 12.5px; }
.tvia { display: block; font-size: 11.5px; color: var(--fg-2); margin-top: 3px; }
.tactions { display: flex; gap: 6px; justify-content: flex-end; }
.btn--row {
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; font-size: 12px; font-weight: 600; color: var(--fg-2);
  cursor: pointer; white-space: nowrap; font-family: var(--font-sans);
  text-decoration: none; display: inline-flex; align-items: center;
}
.btn--row:hover { color: var(--teal); border-color: var(--soft-teal); text-decoration: none; }
.btn--fill {
  background: var(--gold); border: none; border-radius: 6px; padding: 6px 12px;
  font-size: 12px; font-weight: 600; color: #3b2a00; cursor: pointer;
  white-space: nowrap; font-family: var(--font-sans); text-decoration: none;
  display: inline-flex; align-items: center;
}
.btn--fill:hover { color: #3b2a00; text-decoration: none; }
/* Completed, but still a way in: quieter than the gold "Fill for them" so a row that
   needs collecting still reads first, and clearly a button rather than a dead label. */
.btn--fill.is-done { background: var(--gray-200); color: var(--fg-2); }
.btn--fill.is-done:hover { background: var(--gray-300); color: var(--fg-1); text-decoration: none; }
.table-foot {
  padding: 13px 20px; display: flex; justify-content: space-between;
  font-size: 12.5px; color: var(--fg-2); gap: 12px;
}

.upload-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.upload-selects { display: grid; grid-template-columns: 1fr; gap: 8px; }
.dropzone {
  border: 1.5px dashed var(--soft-teal); background: var(--bg-subtle);
  border-radius: 10px; padding: 24px 18px; display: flex; flex-direction: column;
  align-items: center; gap: 8px; text-align: center; cursor: pointer;
  transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}
.dropzone.is-dragging { border-color: var(--teal); background: var(--bg-brand-soft); }
.dropzone__title { font-size: 13.5px; font-weight: 600; color: var(--teal); }
.dropzone__hint { font-size: 12.5px; color: var(--fg-2); }
.csv-preview {
  border: 1px solid var(--soft-teal); background: var(--bg-brand-soft);
  border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 11px;
}
.csv-preview__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.csv-preview__name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csv-preview__discard {
  background: none; border: none; color: var(--fg-2); font-size: 12.5px;
  cursor: pointer; text-decoration: underline; font-family: var(--font-sans); padding: 0;
}
.csv-rows { display: flex; flex-direction: column; gap: 5px; }
.csv-row {
  display: flex; gap: 8px; font-size: 12px; background: #fff;
  border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px;
}
.csv-row__name { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csv-row__contact { color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csv-row.is-duplicate { opacity: .6; border-style: dashed; }
.csv-row.is-duplicate .csv-row__contact { color: var(--status-warning-fg); }
.csv-warning {
  font-size: 12px; color: var(--status-warning-fg); background: var(--status-warning-bg);
  border-radius: 6px; padding: 7px 9px;
}
.add-body { padding: 20px; display: flex; flex-direction: column; gap: 11px; }
.add-names { display: flex; gap: 8px; }
.add-names input { flex: 1 1 0; min-width: 0; }

/* ── Standard questions ────────────────────────────────────── */
.info-banner {
  display: flex; gap: 12px; align-items: flex-start; background: var(--status-info-bg);
  border: 1px solid var(--soft-teal); border-radius: 10px; padding: 16px 18px;
}
.info-banner svg { flex: 0 0 18px; margin-top: 2px; }
.info-banner h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--teal-dark); }
.info-banner p { margin: 0; font-size: 13.5px; color: var(--teal-dark); text-wrap: pretty; }
.globals-body { padding: 8px 20px 16px; }
.global-row {
  padding: 16px 0; border-bottom: 1px solid var(--gray-200); display: grid;
  grid-template-columns: 1fr 190px; gap: 20px; align-items: start;
}
.global-row:last-child { border-bottom: none; }
.global-row__left { display: flex; flex-direction: column; gap: 8px; }
.global-row__input {
  border: 1.5px solid var(--border); border-radius: 8px; padding: 9px 12px;
  font-size: 14px; font-weight: 500; color: var(--fg-1); width: 100%;
  font-family: var(--font-sans);
}
.global-row__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.global-row__logic { font-size: 12.5px; color: var(--purple); font-weight: 600; }
.global-row__right { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.global-row__report { font-size: 12px; color: var(--fg-2); }
.global-row__controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ── Responses ─────────────────────────────────────────────── */
.rtable {
  display: grid;
  grid-template-columns: minmax(170px, 1.3fr) minmax(150px, 1.1fr) minmax(120px, .9fr)
                         minmax(110px, .8fr) minmax(90px, .6fr) minmax(200px, 1.4fr);
  column-gap: 14px; min-width: 900px;
}
.rtable--head {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-2); padding: 11px 20px; border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.rtable--body {
  align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--gray-200);
  font-size: 13.5px; color: inherit; text-decoration: none;
  transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}
.rtable--body:hover { background: rgba(0, 98, 105, .03); color: inherit; text-decoration: none; }
.rscore { font-weight: 600; }
.rcomment {
  font-size: 12.5px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.answer-row {
  padding: 16px 0; border-bottom: 1px solid var(--gray-200); display: grid;
  grid-template-columns: 1fr 190px; gap: 20px; align-items: start;
}
.answer-row:last-child { border-bottom: none; }
.answer-row__label { font-size: 14px; font-weight: 500; text-wrap: pretty; }
.answer-row__value { font-size: 14px; color: var(--fg-1); margin-top: 6px; text-wrap: pretty; }
.answer-row__value--empty { color: var(--fg-3); }
.meta-list { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.meta-item { display: flex; flex-direction: column; gap: 3px; }
.meta-item__value { font-size: 14px; }

/* ── Administration ────────────────────────────────────────── */
.admin-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
/* One column of stacked cards. Both sides of the admin grid are one of these, so a
   card can be moved between them without carrying layout with it. */
.admin-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.admin-form { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.admin-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.admin-actions {
  padding: 16px 20px; border-top: 1px solid var(--border); display: flex;
  justify-content: flex-end; gap: 10px; align-items: center;
  /* Without this, two buttons in the narrow right-hand column overflow the card
     instead of stacking. */
  flex-wrap: wrap;
}
.utable { display: flex; flex-direction: column; }
.urow {
  display: grid;
  grid-template-columns: minmax(220px, 1.7fr) minmax(150px, 1fr) minmax(190px, 1.2fr)
                         minmax(110px, .7fr) minmax(250px, auto);
  column-gap: 14px; row-gap: 10px; align-items: start; padding: 14px 20px;
  border-bottom: 1px solid var(--gray-200); font-size: 13.5px; min-width: 940px;
  transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}
.urow:last-child { border-bottom: none; }
.urow:hover { background: rgba(0, 98, 105, .03); }
.urow--head {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-2); background: var(--bg-subtle); border-bottom: 1px solid var(--border);
  padding: 11px 20px; align-items: center;
}
.urow--head:hover { background: var(--bg-subtle); }
.urow.is-inactive .tname { opacity: .55; }

/* The field group participates in the row grid so each account stays one row. */
.urow__fields { display: contents; }

.urow__name { font-weight: 600; display: flex; align-items: center; gap: 7px; }
.urow__you {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--bg-brand-soft); color: var(--teal-dark); border-radius: 999px;
  padding: 1px 7px;
}
.urow__email { font-size: 12.5px; color: var(--fg-2); }
.urow__seen { font-size: 11.5px; color: var(--fg-3); }
.urow__warn {
  display: block; font-size: 11.5px; color: var(--status-warning-fg); margin-top: 4px;
}
/* Empty most of the time, so it must not reserve a line when it has nothing to say. */
.urow__hint { display: block; font-size: 11.5px; color: var(--fg-3); margin-top: 4px; }
.urow__hint:empty { display: none; }
.urow__actions {
  display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; padding-top: 1px;
}
.btn--row-danger { color: var(--red); }
.btn--row-danger:hover { color: var(--red); border-color: var(--red); background: var(--status-danger-bg); }

.urow__password {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px;
}
.urow__password input { width: 220px; }
.color-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.color-swatch {
  width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--border);
  cursor: pointer; padding: 0;
}
.color-swatch.is-active { border-color: var(--fg-1); box-shadow: 0 0 0 2px var(--bg-brand-soft); }
.campaign-row {
  padding: 18px 0; border-bottom: 1px solid var(--gray-200); display: grid;
  grid-template-columns: 1fr 200px; gap: 20px; align-items: start;
}
.campaign-row:last-child { border-bottom: none; }
.campaign-row__main { display: flex; flex-direction: column; gap: 12px; }
.campaign-row__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.campaign-row__name { max-width: 340px; }
.campaign-row__dates { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.campaign-row__actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.campaign-row__actions .btn--row { justify-content: center; }

.event-row {
  display: grid; grid-template-columns: 150px 160px 1fr; gap: 14px; padding: 11px 20px;
  border-bottom: 1px solid var(--gray-200); font-size: 12.5px; align-items: baseline;
}
.event-row:last-child { border-bottom: none; }
.event-row__time { color: var(--fg-2); font-family: var(--font-mono); font-size: 12px; }
.event-row__actor { font-weight: 600; }

/* ── Modal ─────────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; background: rgba(28, 43, 51, .5); z-index: 70;
  display: flex; align-items: flex-start; justify-content: center; padding: 64px 24px;
  overflow-y: auto;
}
.modal {
  background: #fff; border-radius: 14px; box-shadow: 0 6px 28px rgba(0, 98, 105, .14);
  width: 100%; max-width: 520px; animation: slideUp 250ms cubic-bezier(.4, 0, .2, 1);
}
.modal__head { padding: 20px 24px; border-bottom: 1px solid var(--border); }
.modal__title { margin: 0; font-size: 18px; font-weight: 700; }
.modal__sub { margin: 5px 0 0; font-size: 13px; color: var(--fg-2); }
.modal__body { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.modal__foot {
  padding: 16px 24px; border-top: 1px solid var(--border); display: flex;
  justify-content: flex-end; gap: 10px;
}
.segment { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.segment button {
  border: 1.5px solid var(--border); background: #fff; border-radius: 8px;
  padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--fg-1);
  cursor: pointer; font-family: var(--font-sans);
}
.segment button.is-active { border-color: var(--teal); background: var(--bg-brand-soft); }
.error-strip {
  background: var(--status-danger-bg); color: var(--status-danger-fg);
  border-radius: 8px; padding: 11px 14px; font-size: 13px; font-weight: 600;
}

/* ── Toast ─────────────────────────────────────────────────── */
.toast-stack {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 90;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.toast {
  background: var(--gray-900); color: #fff; border-radius: 10px; padding: 13px 20px;
  font-size: 13.5px; font-weight: 500; box-shadow: 0 6px 28px rgba(0, 98, 105, .14);
  animation: slideUp 250ms cubic-bezier(.4, 0, .2, 1);
}
.toast--error { background: var(--red); }

/* ── Survey runner ─────────────────────────────────────────── */
.runner {
  position: fixed; inset: 0; background: var(--bg-page); z-index: 60; overflow-y: auto;
  /* Shared by the header and the progress track below it, which sticks at exactly
     the header's height so the two stay locked together while the body scrolls. */
  --runner-header-h: 64px;
}
.runner__header {
  background: #fff; border-bottom: 1px solid var(--border); padding: 0 24px;
  height: var(--runner-header-h);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 5;
}
.runner__logo { height: 26px; width: auto; }
.runner__headright { display: flex; align-items: center; gap: 12px; }
.runner__progresslabel { font-size: 12.5px; color: var(--fg-2); }

/* Language picker. Every option is written in its own language and script, so
   someone who cannot read the current page can still find their own. */
.langpick {
  display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 999px; color: var(--fg-2);
  background: #fff; transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}
.langpick:hover, .langpick:focus-within { border-color: var(--soft-teal); color: var(--teal); }
.langpick:focus-within { box-shadow: 0 0 0 3px rgba(0, 98, 105, .15); }
.langpick__select {
  border: none; background: none; font-family: var(--font-sans); font-size: 13px;
  font-weight: 600; color: inherit; cursor: pointer; padding: 0 2px;
  max-width: 9.5em; text-overflow: ellipsis;
}
.langpick__select:focus { outline: none; }
.langpick__select option { color: var(--fg-1); }
/* The picker submits the form so answers survive the switch. With scripting the
   change event does it, and this button is the fallback that keeps it working
   without. */
.langpick__go {
  border: none; background: var(--teal); color: #fff; border-radius: 999px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 5px 10px;
}
.langpick__go.is-hidden { display: none; }
.runner__close {
  background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px;
  font-size: 13px; font-weight: 600; color: var(--fg-2); cursor: pointer;
  font-family: var(--font-sans); text-decoration: none; display: inline-flex; align-items: center;
}
.runner__close:hover { color: var(--teal); border-color: var(--soft-teal); text-decoration: none; }
/* Stays visible while answering: the bar is the only running indication of how much
   is left, so it pins directly under the sticky header instead of scrolling away. */
.runner__track {
  height: 4px; background: var(--gray-200);
  position: sticky; top: var(--runner-header-h); z-index: 4;
}
.runner__fill {
  height: 100%; width: 0; background: var(--gold);
  transition: width 200ms cubic-bezier(.4, 0, .2, 1);
}
.runner__proxy {
  background: var(--purple); color: #fff; padding: 12px 24px; display: flex;
  flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center;
  font-size: 13.5px;
}
.runner__proxy select {
  background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .35);
  color: #fff; border-radius: 8px; padding: 6px 10px; font-size: 12.5px; cursor: pointer;
}
.runner__proxy select option { color: #1c2b33; }
.runner__body {
  max-width: 760px; margin: 0 auto; padding: 36px 24px 80px; display: flex;
  flex-direction: column; gap: 20px;
}
.runner__intro { display: flex; flex-direction: column; gap: 10px; }
.runner__eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal);
}
.runner__title {
  margin: 0; font-family: var(--font-display); font-size: 32px; font-weight: 700;
  line-height: 1.15; color: var(--teal);
}
.runner__introcopy {
  margin: 0; font-size: 15px; line-height: 1.7; color: var(--fg-1); max-width: 620px;
  text-wrap: pretty;
}
.qcard {
  background: #fff; border: 1.5px solid var(--border); border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .07); padding: 22px 24px; display: flex;
  flex-direction: column; gap: 16px;
}
.qcard.is-conditional { border-color: var(--purple); }
.qcard.is-missing { border-color: var(--red); }
.qcard__head { display: flex; gap: 12px; align-items: baseline; }
.qcard__num { font-family: var(--font-mono); font-size: 13px; color: var(--fg-2); }
.qcard__label { font-size: 16px; font-weight: 600; line-height: 1.45; text-wrap: pretty; flex: 1; }
.qcard__required { color: var(--red); }

/* A section header. Deliberately not a card: it sits in the same column with a rule
   above it and more room than the gap between questions, so it reads as the start of a
   group rather than as a question whose controls failed to load. */
.qhead {
  margin: 14px 0 0; padding-top: 22px; border-top: 2px solid var(--soft-teal);
  font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.2;
  color: var(--teal); text-wrap: pretty;
}
.qhead.is-conditional { border-top-color: var(--purple); color: var(--purple); }

.scale-row { display: flex; gap: 8px; flex-wrap: wrap; }
.scale-btn {
  flex: 1; min-width: 118px; min-height: 74px; border: 1.5px solid var(--border);
  background: #fff; color: var(--fg-1); border-radius: 10px; padding: 12px 10px;
  font-size: 13.5px; font-weight: 600; cursor: pointer; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  transition: all 200ms cubic-bezier(.4, 0, .2, 1); font-family: var(--font-sans);
  text-align: center;
}
.scale-btn__v { font-size: 19px; font-weight: 700; }
.scale-btn__label { text-wrap: pretty; line-height: 1.3; }
.scale-btn.is-on { border-color: var(--teal); background: var(--teal); color: #fff; }

.choice-list { display: flex; flex-direction: column; gap: 8px; }
.choice-btn {
  /* `start`, not `left` — this text runs right-to-left in Arabic. */
  text-align: start; min-height: 48px; border: 1.5px solid var(--border); background: #fff;
  color: var(--fg-1); border-radius: 10px; padding: 12px 16px; font-size: 14.5px;
  font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 12px;
  transition: all 200ms cubic-bezier(.4, 0, .2, 1); width: 100%;
  font-family: var(--font-sans);
}
.choice-btn.is-on { border-color: var(--teal); background: var(--bg-brand-soft); }
.choice-mark {
  width: 20px; height: 20px; flex: 0 0 20px; border: 2px solid var(--border-strong);
  background: #fff; border-radius: 999px; display: flex; align-items: center;
  justify-content: center;
}
.choice-mark--multi { border-radius: 5px; }
.choice-btn.is-on .choice-mark { border-color: var(--teal); background: var(--teal); }
.choice-mark svg { display: none; }
.choice-btn.is-on .choice-mark svg { display: block; }
.choice-label { text-wrap: pretty; }

.stars-row { display: flex; gap: 8px; align-items: center; }
.star-btn {
  width: 52px; height: 52px; border: 1.5px solid var(--border); background: #fff;
  border-radius: 10px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: all 200ms cubic-bezier(.4, 0, .2, 1); padding: 0;
  flex: 0 0 52px;
}
.star-btn svg { fill: none; stroke: var(--border-strong); display: block; }
.star-btn.is-on { border-color: var(--gold); background: #fffaf0; }
.star-btn.is-on svg { fill: var(--gold); stroke: var(--gold-dark); }
.stars-label { font-size: 13.5px; color: var(--fg-2); margin-inline-start: 8px; }

.nps-wrap { display: flex; flex-direction: column; gap: 10px; }
.nps-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.nps-btn {
  width: 54px; height: 54px; border: 1.5px solid var(--border); background: #fff;
  color: var(--fg-1); border-radius: 10px; font-size: 16px; font-weight: 700;
  cursor: pointer; transition: all 200ms cubic-bezier(.4, 0, .2, 1);
  font-family: var(--font-sans); display: flex; align-items: center;
  justify-content: center; flex: 0 0 54px;
}
.nps-btn.is-on { border-color: var(--teal); background: var(--teal); color: #fff; }
.nps-ends { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--fg-2); }

.runner__textarea {
  border: 1.5px solid var(--border); border-radius: 10px; padding: 13px 15px;
  font-size: 14.5px; line-height: 1.6; resize: vertical; color: var(--fg-1);
  font-family: var(--font-sans); width: 100%;
}

/* Address block — five boxes that are one answer.

   Laid out on a grid rather than as five stacked rows so the shape of an envelope is
   visible at a glance: street and unit full width, then city / state / ZIP across one
   line the way they are written. The columns collapse to full width on a narrow screen,
   where a 3-across row of 90px boxes would be unusable. Each box keeps its own visible
   label above it: a placeholder vanishes the moment someone types, and "PA" in an
   unlabelled box is not self-explanatory when they come back to check their answers. */
.address-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px 12px; }
.address-field { display: flex; flex-direction: column; gap: 6px; grid-column: 1 / -1; }
.address-field--city { grid-column: span 3; }
.address-field--state { grid-column: span 3; }
.address-field--zip { grid-column: span 2; }
.address-field__label { font-size: 12.5px; font-weight: 600; color: var(--fg-2); }
.address-field__input {
  border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 15px;
  font-size: 14.5px; line-height: 1.4; color: var(--fg-1);
  font-family: var(--font-sans); width: 100%; min-height: 48px;
  transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}
.address-field__input:hover { border-color: var(--soft-teal); }
.address-field__input:focus-visible { outline: 2.5px solid var(--teal); outline-offset: 2px; }
/* Answered. The state dropdown next to it turns teal when it has a value, so a filled
   city box that stayed grey would read as the one part that was not accepted. */
.address-field__input.is-on { border-color: var(--teal); background: var(--bg-brand-soft); }
/* The state box is narrower than a dropdown question's full-width control, so its
   prompt is cut off rather than allowed to wrap the row out of alignment — a longer
   translation of "Choose a state" would otherwise make that one box two lines tall. */
.address-field .runner__select, .address-field .dropdown__toggle { white-space: nowrap; }
.address-field .dropdown__value { overflow: hidden; text-overflow: ellipsis; }
/* Left empty on a failed submit. The card is already outlined red; this says which of
   the five boxes it is waiting for. */
.address-field.is-blank .address-field__input,
.address-field.is-blank .runner__select,
.address-field.is-blank .dropdown__toggle { border-color: var(--red); }

@media (max-width: 560px) {
  .address-grid { grid-template-columns: 1fr; }
  .address-field--city, .address-field--state, .address-field--zip { grid-column: 1 / -1; }
}
/* Dropdown, for a list too long to show as buttons. Deliberately the same shape as
   .choice-btn — 48px tall, 1.5px border, 10px radius, same type and the same teal
   "answered" state — so a question answered by dropdown does not look like it belongs
   to a different app than the one above it. */
.runner__selectwrap { position: relative; display: block; }
.runner__select {
  appearance: none; -webkit-appearance: none;
  width: 100%; min-height: 48px; border: 1.5px solid var(--border); background: #fff;
  color: var(--fg-1); border-radius: 10px; font-size: 14.5px; font-weight: 500;
  font-family: var(--font-sans); line-height: 1.4; cursor: pointer;
  transition: all 200ms cubic-bezier(.4, 0, .2, 1);
  /* Logical properties throughout: this control is also rendered right-to-left. */
  padding-block: 12px; padding-inline: 16px 44px;
  text-overflow: ellipsis;
}
.runner__select:hover { border-color: var(--soft-teal); }
/* Matches the outline the choice buttons and stars use, rather than inventing a ring. */
.runner__select:focus-visible { outline: 2.5px solid var(--teal); outline-offset: 2px; }
/* Answered, mirroring .choice-btn.is-on. */
.runner__select.is-on { border-color: var(--teal); background: var(--bg-brand-soft); }
/* Unanswered: the placeholder reads as prompt text, not as a chosen value. */
.runner__select.is-empty { color: var(--fg-3); font-weight: 400; }
.runner__chevron {
  position: absolute; inset-inline-end: 15px; top: 50%; transform: translateY(-50%);
  display: flex; color: var(--fg-2); pointer-events: none;
  transition: transform 200ms cubic-bezier(.4, 0, .2, 1);
}
.runner__select.is-on + .runner__chevron { color: var(--teal); }

/* Dropdown, enhanced.
   Once scripting has replaced the native option list, the select itself is hidden and
   this button plus listbox is the control. Both are shaped like .choice-btn so the
   dropdown and the radio questions above it read as the same family. */
.runner__selectwrap.is-enhanced { position: relative; }
.dropdown__toggle {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px;
  border: 1.5px solid var(--border); background: #fff; color: var(--fg-1);
  border-radius: 10px; padding-block: 12px; padding-inline: 16px 44px;
  font-size: 14.5px; font-weight: 500; font-family: var(--font-sans); line-height: 1.4;
  text-align: start; cursor: pointer;
  transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}
.dropdown__toggle:hover { border-color: var(--soft-teal); }
.dropdown__toggle:focus-visible { outline: 2.5px solid var(--teal); outline-offset: 2px; }
.dropdown__toggle.is-on { border-color: var(--teal); background: var(--bg-brand-soft); }
.dropdown__toggle.is-empty { color: var(--fg-3); font-weight: 400; }
.dropdown__toggle[aria-expanded="true"] { border-color: var(--teal); }
.dropdown__toggle[aria-expanded="true"] .runner__chevron { transform: translateY(-50%) rotate(180deg); }
.dropdown__value { flex: 1; min-width: 0; text-wrap: pretty; }

.dropdown__list {
  position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 20;
  margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1.5px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(28, 43, 51, .16);
  /* Roughly eight rows before scrolling, so the list never swallows the page. */
  max-height: 320px; overflow-y: auto; overscroll-behavior: contain;
}
/* Flipped when there is more room above than below. */
.runner__selectwrap.is-above .dropdown__list { top: auto; bottom: calc(100% + 6px); }
.dropdown__option {
  padding: 11px 14px; border-radius: 8px; font-size: 14.5px; font-weight: 500;
  color: var(--fg-1); cursor: pointer; text-align: start; text-wrap: pretty;
}
/* One highlight, driven by the keyboard and by the pointer alike, so arrowing and
   hovering never disagree about which row is current. */
.dropdown__option.is-active { background: var(--bg-subtle); }
.dropdown__option.is-selected { color: var(--teal-dark); font-weight: 600; }
.dropdown__option.is-selected.is-active { background: var(--bg-brand-soft); }
.dropdown__option--empty { color: var(--fg-3); font-weight: 400; }
.runner__submitwrap { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.runner__error {
  background: var(--status-danger-bg); color: var(--status-danger-fg);
  border-radius: 10px; padding: 13px 16px; font-size: 13.5px; font-weight: 600;
}
.runner__submit {
  align-self: flex-start; background: var(--teal); color: #fff; border: none;
  border-radius: 10px; padding: 15px 32px; font-size: 16px; font-weight: 700;
  cursor: pointer; transition: all 200ms cubic-bezier(.4, 0, .2, 1);
  font-family: var(--font-sans);
}
.runner__submit:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 98, 105, .3); }
.runner__privacy { margin: 0; font-size: 12.5px; color: var(--fg-2); max-width: 520px; }

.thanks {
  max-width: 560px; margin: 0 auto; padding: 80px 24px; display: flex;
  flex-direction: column; gap: 18px; align-items: flex-start;
  animation: slideUp 250ms cubic-bezier(.4, 0, .2, 1);
}
.thanks__badge {
  width: 56px; height: 56px; border-radius: 999px; background: var(--status-success-bg);
  display: flex; align-items: center; justify-content: center;
}
.thanks__title {
  margin: 0; font-family: var(--font-display); font-size: 30px; font-weight: 700;
  color: var(--teal); line-height: 1.2;
}
.thanks p { margin: 0; font-size: 15px; line-height: 1.7; text-wrap: pretty; }
.thanks__cta {
  background: var(--teal); color: #fff; border: none; border-radius: 10px;
  padding: 13px 26px; font-size: 15px; font-weight: 600; cursor: pointer;
  font-family: var(--font-sans); text-decoration: none; display: inline-flex;
  align-items: center; transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}
.thanks__cta:hover { color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 98, 105, .3); }

/* ── Sign in ───────────────────────────────────────────────── */
.signin {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg-page); padding: 48px 24px; font-family: var(--font-sans);
  color: var(--fg-1);
}
.signin__card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 6px 28px rgba(0, 98, 105, .14); width: 100%; max-width: 420px;
  padding: 32px; display: flex; flex-direction: column; gap: 18px;
}
.signin__brand { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.signin__brand img { height: 30px; width: auto; }
.signin__title { margin: 0; font-size: 22px; font-weight: 700; }
.signin__sub { margin: 0; font-size: 13.5px; color: var(--fg-2); }
/* The form is nested inside the card now that single sign-on can sit above it, so it
   carries the spacing the card used to provide. */
.signin__form { display: flex; flex-direction: column; gap: 18px; }
.signin__sso { justify-content: center; padding: 12px 20px; font-size: 14px; }
/* A labelled rule between the two ways in. */
.signin__or {
  display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--fg-3);
}
.signin__or::before, .signin__or::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .grid-15-1, .grid-1-1, .builder-grid, .roster-grid, .detail-grid, .admin-grid,
  .survey-grid, .themes-body { grid-template-columns: 1fr; }
  .inspector { position: static; }
  .demo-body, .pq-body { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 860px) {
  .sidebar {
    position: static; width: 100%; flex: 0 0 auto; height: auto;
  }
  .app { flex-direction: column; }
  .sidebar__nav { flex-direction: row; flex-wrap: wrap; padding: 6px 10px; }
  .nav-item { border-left: none; border-bottom: 3px solid transparent; }
  .nav-item.is-active { border-left-color: transparent; border-bottom-color: var(--gold); }
  .content { padding: 20px 16px 48px; }
  .topbar { padding: 0 16px; height: auto; min-height: 64px; flex-wrap: wrap; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  /* Keep the avatar and sign out reachable; the name is in the tooltip. */
  .userchip__text { display: none; }
  .btn-signout span { display: none; }
  .btn-signout { padding: 10px; }
  .kpi-row { grid-template-columns: 1fr; }
  .global-row, .answer-row { grid-template-columns: 1fr; gap: 10px; }
  .admin-form__row { grid-template-columns: 1fr; }
}

/* ── Translation (Administration) ──────────────────────────── */
.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.lang-pick {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer;
  transition: all 200ms cubic-bezier(.4, 0, .2, 1); background: #fff;
}
.lang-pick:has(input:checked) { border-color: var(--teal); background: var(--bg-brand-soft); }
.lang-pick__name { font-size: 14px; font-weight: 600; display: block; }
.lang-pick__native { font-size: 13px; color: var(--fg-2); }
.lang-pick__note { font-size: 11.5px; color: var(--fg-3); display: block; margin-top: 3px; }

.cov-row {
  display: grid; grid-template-columns: 150px 1fr 130px; gap: 14px; align-items: center;
  padding: 11px 8px; margin: 0 -8px; border-bottom: 1px solid var(--border);
  border-radius: 8px; color: inherit; text-decoration: none;
  transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}
.cov-row:hover { background: var(--bg-subtle); color: inherit; text-decoration: none; }
.cov-row:hover .cov-name { color: var(--teal); }
.cov-row:last-child { border-bottom: none; }
.cov-name { font-size: 13.5px; font-weight: 600; }
.cov-native { font-size: 12.5px; color: var(--fg-2); font-weight: 400; }
.cov-track { height: 8px; border-radius: 999px; background: var(--gray-200); overflow: hidden; }
.cov-fill { height: 100%; background: var(--teal); border-radius: 999px; transition: width 320ms cubic-bezier(.4, 0, .2, 1); }
.cov-count { font-size: 12.5px; color: var(--fg-2); text-align: right; }

/* ── Translation editor ────────────────────────────────────── */
.screen--narrow-wide { max-width: 1080px; }

.tl-row {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.tl-row:last-child { border-bottom: none; }
/* One English line and its own field, on the same grid row, so the columns stay
   level no matter how long either side runs. */
.tl-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; }
.tl-en { font-size: 13.5px; line-height: 1.5; text-wrap: pretty; }
.tl-note {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-3);
}
/* The translation is typed in its own script and direction, not the page's. */
.tl-pair textarea, .tl-pair input { width: 100%; }
.tl-flag { font-size: 11.5px; color: var(--fg-3); }
.tl-flag--warn { color: var(--status-warning-fg); }
.tl-flag--bad { color: var(--status-danger-fg); }

/* The runner must stay fully usable on a phone. */
@media (max-width: 640px) {
  .runner__body { padding: 24px 16px 64px; }
  .runner__title { font-size: 26px; }
  .qcard { padding: 18px 16px; }
  .qhead { font-size: 19px; padding-top: 18px; }
  .langpick__select { max-width: 6.5em; }
  .cov-row { grid-template-columns: 1fr; gap: 6px; }
  .tl-pair { grid-template-columns: 1fr; gap: 4px; }
  .cov-count { text-align: start; }
  .scale-btn { min-width: calc(50% - 4px); }
  .nps-btn { width: 48px; height: 48px; }
  .star-btn { width: 46px; height: 46px; }
}

@media print {
  .sidebar, .topbar__right, .toast-stack { display: none; }
}


/* ── Sign-in log ───────────────────────────────────────────
   A dense table: an admin scanning for a bad address should get many rows on screen
   at once, and a failure should be findable without reading every line. */
.proxy-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; }
.proxy-facts code {
  display: block; font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-1);
  word-break: break-all; margin-top: 3px;
}
.filterbar--inset { padding: 12px 20px; border-bottom: 1px solid var(--border); margin: 0; }
.signin-table { display: flex; flex-direction: column; }
.signin-row {
  display: grid; grid-template-columns: 150px 190px 1fr 130px 1.2fr; gap: 12px;
  align-items: baseline; padding: 9px 20px; font-size: 12.5px;
  border-bottom: 1px solid var(--gray-200);
}
.signin-row:last-child { border-bottom: 0; }
.signin-row__time { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.signin-row__what { font-weight: 600; color: var(--teal); }
.signin-row.is-bad .signin-row__what { color: var(--red); }
.signin-row__who { color: var(--fg-1); word-break: break-all; }
.signin-row__ip { font-family: var(--font-mono); font-size: 12px; color: var(--fg-1); }
.signin-row__detail { color: var(--fg-2); text-wrap: pretty; }
.signin-row__flag {
  display: inline-block; margin-inline-start: 6px; padding: 1px 6px; border-radius: 5px;
  background: var(--status-warning-bg); color: var(--status-warning-fg); font-size: 11px;
}
@media (max-width: 1100px) {
  .signin-row { grid-template-columns: 1fr 1fr; gap: 4px 12px; }
  .proxy-facts { grid-template-columns: 1fr; }
}

/* A whole-page error that has to be readable to a non-developer. */
.errorpage { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--gray-50); }
.errorpage__card {
  background: #fff; border: 1.5px solid var(--border); border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .07); padding: 32px; max-width: 560px;
  display: flex; flex-direction: column; gap: 14px;
}
.errorpage__title {
  margin: 0; font-family: var(--font-display); font-size: 24px; color: var(--teal);
}
.errorpage__card p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--fg-1); }
.errorpage__fix { padding: 12px 14px; background: var(--bg-brand-soft); border-radius: 9px; }
.errorpage__detail { font-size: 12px; color: var(--fg-2); font-family: var(--font-mono); }
.errorpage__card .btn { align-self: flex-start; margin-top: 4px; }

/* ── Pager ─────────────────────────────────────────────────
   Every control is a link, so paging works without scripting and each page can be
   bookmarked. Sits directly under the rows it belongs to. */
.pager {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  padding: 12px 20px; border-top: 1px solid var(--border); font-size: 12.5px;
  color: var(--fg-2);
}
.pager__count { margin-inline-end: auto; }
.pager__count strong { color: var(--fg-1); font-variant-numeric: tabular-nums; }
.pager__size { display: inline-flex; align-items: center; gap: 4px; }
.pager__size > span { color: var(--fg-3); margin-inline-end: 2px; }
.pager__size a, .pager__pages a, .pager__pages span {
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; color: var(--fg-2); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.pager__size a:hover, .pager__pages a:hover {
  color: var(--teal); border-color: var(--soft-teal); text-decoration: none;
}
.pager__size a.is-on, .pager__pages a.is-on {
  background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600;
}
.pager__pages { display: inline-flex; gap: 3px; align-items: center; }
.pager__pages .is-off { color: var(--fg-3); cursor: default; }
.pager__gap { color: var(--fg-3); padding: 0 2px; }
@media (max-width: 700px) {
  .pager { justify-content: space-between; }
  .pager__count { margin-inline-end: 0; flex: 1 0 100%; }
}

/* ── Donut hover ───────────────────────────────────────────
   Pointer-only enhancement. Every value is already permanent text in the legend, so
   nothing here is the sole route to a number — see donuts.js. */
.donut { position: relative; }
.donut__slice { transition: stroke-width 140ms ease, opacity 140ms ease; }
/* The hovered arc lifts and the rest recede, so the pointer visibly does something.
   Only while actually hovering: at rest every slice is full strength. */
.donut.is-hovering .donut__slice { opacity: .35; }
.donut.is-hovering .donut__slice.is-hot { opacity: 1; stroke-width: 26; }
.donut.is-hovering .donut__key { opacity: .5; }
.donut.is-hovering .donut__key.is-hot { opacity: 1; background: var(--bg-brand-soft); }
/* A wider transparent arc so a pointer merely near the ring still counts. SVG hit-tests
   painted dashes only, so the gaps between slices stay inert. */
.donut__hit { cursor: default; }
.donut.is-interactive .donut__hit { cursor: pointer; }

.donut__tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--fg-1); color: #fff; border-radius: 8px; padding: 7px 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22); max-width: 220px;
  display: flex; flex-direction: column; gap: 1px; line-height: 1.35;
}
/* A short stroke of the slice colour keys the row — at this density a filled box is
   data-weight ink doing a label's job. */
.donut__tip::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 9px;
  width: 3px; height: calc(100% - 18px); border-radius: 2px;
  background: var(--tip-color, var(--teal));
}
.donut__tipvalue {
  font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding-inline-start: 7px;
}
.donut__tiplabel {
  font-size: 12px; color: rgba(255, 255, 255, .78); text-wrap: pretty;
  padding-inline-start: 7px;
}

/* Someone who asked for less motion gets the highlight without the animation. */
@media (prefers-reduced-motion: reduce) {
  .donut__slice, .donut__key { transition: none; }
}
/* ── Help & instructions ───────────────────────────────────
   A reading screen rather than a working one, so it sets its own measure: prose caps at
   a comfortable line length while screenshots run the full width of the column, since a
   screenshot shrunk to text width is a picture nobody can read. */
.help-layout {
  display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 24px;
  align-items: start;
}
.help-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.help-rail {
  position: sticky; top: 20px; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 1px 4px rgba(0, 0, 0, .07); padding: 16px 14px;
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.help-rail__list {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 1px; counter-reset: help;
}
.help-rail__list a {
  display: flex; align-items: baseline; gap: 6px; padding: 6px 8px; border-radius: 7px;
  color: var(--fg-1); text-decoration: none; font-size: 13px; line-height: 1.35;
}
.help-rail__list a::before {
  counter-increment: help; content: counter(help);
  color: var(--fg-3); font-size: 11px; font-variant-numeric: tabular-nums; min-width: 12px;
}
.help-rail__list a:hover { background: var(--bg-brand-soft); color: var(--teal); }
/* A section belonging to a role this account does not have. Still listed — the manual
   describes the whole system — but it should not read as somewhere to go. */
.help-rail__list a.is-other { color: var(--fg-2); }
.help-rail__tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-3);
  white-space: nowrap;
}
.help-rail__foot {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--fg-2); line-height: 1.5;
}

.help-section { scroll-margin-top: 20px; }
.help-h2 {
  font-size: 21px; font-weight: 700; color: var(--fg-1); margin: 0 0 10px;
  letter-spacing: -.01em;
}
.help-h3 {
  font-size: 15px; font-weight: 700; color: var(--teal); margin: 26px 0 8px;
}
.help-section p, .help-intro p {
  font-size: 14.5px; line-height: 1.65; color: var(--fg-1); margin: 0 0 12px;
  max-width: 72ch; text-wrap: pretty;
}
.help-list, .help-steps { margin: 0 0 12px; padding-inline-start: 22px; max-width: 72ch; }
.help-list { list-style: disc; }
.help-steps { list-style: decimal; }
.help-list li, .help-steps li {
  font-size: 14.5px; line-height: 1.6; color: var(--fg-1); margin-bottom: 7px;
}
.help-section code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  background: var(--gray-200); border-radius: 4px; padding: 1px 5px;
}
.help-role-line { color: var(--fg-2); }
.help-foot { color: var(--fg-2); margin-top: 18px; }

.help-defs { margin: 0; }
.help-defs dt {
  font-size: 14.5px; font-weight: 700; color: var(--fg-1); margin-top: 16px;
}
.help-defs dt:first-child { margin-top: 0; }
.help-defs dd {
  margin: 4px 0 0; padding-inline-start: 14px; border-inline-start: 2px solid var(--soft-teal);
  font-size: 14.5px; line-height: 1.6; color: var(--fg-1); max-width: 72ch;
}

.help-note {
  background: var(--bg-brand-soft); border: 1px solid var(--soft-teal); border-radius: 10px;
  padding: 14px 16px; margin: 16px 0; max-width: 72ch;
}
.help-note__title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--teal-dark); margin-bottom: 5px;
}
.help-note__body { font-size: 14px; line-height: 1.6; color: var(--fg-1); }

/* Screenshots are inert illustrations of prose that stands without them, so they get a
   plain frame and a caption rather than any interaction of their own — bar the link to
   the full-size file, for a screen small enough that the inline copy is too dense. */
.help-fig { margin: 14px 0 22px; }
/* The frame is what has the size, not the image: a full-screen capture fills the column
   and is cropped to its top, a component clip sits at its own size. Never `width: 100%`
   on the image itself — that upscales a 250px crop to a thousand and shreds it. */
.help-fig__frame {
  display: block; width: fit-content; max-width: 100%; max-height: 620px;
  overflow: hidden; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .07); background: var(--gray-50);
  position: relative;
}
.help-fig__frame img { display: block; max-width: 100%; width: auto; height: auto; }
/* A clip is small enough that shrinking it to fit keeps it legible, so it is scaled
   rather than cropped — cropping a sidebar would cut off the items being described. */
.help-fig__frame.is-clip { max-height: none; }
.help-fig__frame.is-clip img { max-height: 620px; width: auto; }
/* A whole-screen capture is too tall to sit in the flow, so it is shown to the top and
   faded where it is cut, rather than pretending that is where the screen ends. */
.help-fig__frame.is-tall::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 72px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .96));
  pointer-events: none;
}
.help-fig figcaption {
  font-size: 12.5px; color: var(--fg-2); line-height: 1.5; margin-top: 7px;
  max-width: 72ch;
}
.help-fig__more { color: var(--teal); text-decoration: none; white-space: nowrap; }
.help-fig__more::before { content: "\2192\00a0"; }
.help-fig__more:hover { text-decoration: underline; }

.help-tablewrap { overflow-x: auto; margin: 4px 0 14px; }
.help-table { border-collapse: collapse; width: 100%; min-width: 620px; }
.help-table th, .help-table td {
  text-align: start; font-size: 13px; padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.help-table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-2);
  font-weight: 700; white-space: nowrap;
}
.help-table td:first-child { font-weight: 600; }

@media (max-width: 1000px) {
  .help-layout { grid-template-columns: minmax(0, 1fr); }
  .help-rail { position: static; max-height: none; }
}