/* =====================================================================
   Fable5 app skin — Surveys (list + single-page builder).
   Token-driven; loads after tokens.css + brand.css + app.css.
   Deliberately thin: the list reuses .listing-table/.listing-toolbar and
   the builder reuses .settings-stack/.settings-field. Only the question
   editor and its two drag contexts are new.
   ===================================================================== */

/* ---- list ---- */
.survey-title-link { font-weight: 600; color: var(--ink-1); }
.survey-title-link:hover { color: var(--brand-600); }
.listing-table tr.survey.archived .survey-title-link { color: var(--ink-3); }

/* Survey statuses use the shared .status-pill states in app.css. The old
   .survey-status-* colours lived here and drifted from the box and poll chips;
   the draft one had also been dead for a while, because it mixed against an
   undefined --primary and the browser dropped the declaration. */

.survey-row-actions { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }

/* ---- builder shell ---- */
.survey-builder { max-width: 1120px; margin: 0 auto; padding-top: var(--space-4); }
/* Sticky action bar so Save is always visible while the questions scroll. */
.survey-builder-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-4); padding: var(--space-3) 0;
  background: var(--surface-0); border-bottom: 1px solid var(--line);
}
.survey-builder-actions { display: flex; gap: var(--space-2); align-items: center; padding-right: var(--space-2); }
/* Disabled-look action (e.g. Export with no responses). No pointer-events:none — we keep hover so the
   native title tooltip still shows; the anchor has no href so it never navigates. */
.survey-builder-actions .btn.is-disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
/* Self-contained CSS tooltip for the Export button (upsell / no-responses). Works even on the
   disabled-look control and on 0-response pages where the widget JS tooltip is not loaded. */
.survey-builder-actions .btn[data-tip] { position: relative; }
.survey-builder-actions .btn[data-tip]:hover::after,
.survey-builder-actions .btn[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 7px); right: 0;
  background: var(--ink-1); color: #fff;
  font-size: .72rem; font-weight: 600; line-height: 1.3; white-space: nowrap;
  padding: .4rem .6rem; border-radius: 8px; box-shadow: var(--shadow-2);
  z-index: 50; pointer-events: none;
}
.survey-builder-actions .btn[data-tip]:hover::before,
.survey-builder-actions .btn[data-tip]:focus-visible::before {
  content: ""; position: absolute; top: calc(100% + 1px); right: 16px;
  border: 6px solid transparent; border-bottom-color: var(--ink-1);
  z-index: 50; pointer-events: none;
}

/* Owner results header: title + status/count sit under the crumb bar, matching
   the create/edit page rhythm. */
.survey-owner-head { margin-bottom: var(--space-4); }
.survey-owner-head .header-title { margin: 0 0 var(--space-2); }

/* Two columns: header/settings left (pinned), questions right (scrolls). */
.survey-builder-cols {
  display: grid; grid-template-columns: minmax(400px, 460px) 1fr;
  gap: var(--space-5); align-items: start;
}
/* No independent column scroll — the whole page scrolls, both columns grow
   with their content. */
.survey-builder-left { align-self: start; }
/* Normal block flow (not flex-gap) so the first card aligns top with the
   right column's first question card — both sit one section-head below. */
.survey-builder-left .card { margin-bottom: var(--space-4); }
.survey-builder-left .card:last-child { margin-bottom: 0; }
.survey-builder-right { min-width: 0; }

@media (max-width: 991.98px) {
  .survey-builder-cols { grid-template-columns: 1fr; }
  .survey-builder-left { position: static; max-height: none; overflow: visible; }
}

.survey-ai-banner {
  display: flex; align-items: flex-start; gap: var(--space-3);
  background: color-mix(in srgb, var(--brand-accent) 6%, var(--surface-0));
  border: 1px solid color-mix(in srgb, var(--brand-accent) 30%, white);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.survey-ai-banner .fe { color: var(--brand-accent); flex: none; margin-top: 2px; }

/* Owner preview bar: label on the left, "back to editing" link on the right. */
.survey-preview-bar { align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.survey-preview-bar-label { display: inline-flex; align-items: center; gap: var(--space-2); }
.survey-preview-edit {
  display: inline-flex; align-items: center; flex: none;
  font-weight: 600; color: var(--brand-accent); text-decoration: none; white-space: nowrap;
}
.survey-preview-edit:hover { text-decoration: underline; }
.survey-preview-edit .fe { color: var(--brand-accent); margin-top: 0; }

/* ---- question cards ---- */
.survey-questions { margin-bottom: var(--space-4); }

.survey-q {
  background: var(--surface-0);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-3);
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.survey-q:hover { border-color: var(--brand-200); }
.survey-q-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.survey-q-index {
  font-size: var(--text-xs); font-weight: 600; color: var(--ink-3);
  white-space: nowrap;
}
.survey-q-typepill {
  font-size: var(--text-xs); font-weight: 600; color: var(--ink-3);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-full); padding: 2px 10px;
}
.survey-q-spacer { flex: 1 1 auto; }

/* progressive disclosure: advanced config only once it's relevant */
.survey-q-advanced { margin-top: var(--space-3); }
.survey-q-advanced[hidden] { display: none; }
.survey-q-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3);
}

/* ---- drag handles + drag states (questions and options) ---- */
.survey-grip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none;
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--ink-3); cursor: grab;
}
.survey-grip:hover { background: var(--surface-2); color: var(--ink-1); }
.survey-grip:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 1px; }
.survey-grip:active { cursor: grabbing; }
.survey-grip-sm { width: 24px; height: 24px; }

.survey-dragging { opacity: .4; }
/* insertion rule shown on the element the drop would land before/after */
.survey-drop-before { box-shadow: inset 0 3px 0 0 var(--brand-300); }
.survey-drop-after  { box-shadow: inset 0 -3px 0 0 var(--brand-300); }

/* ---- option editor ---- */
.survey-options { margin-top: var(--space-2); }
.survey-option {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.survey-option-marker { color: var(--ink-3); font-size: var(--text-sm); width: 1em; flex: none; text-align: center; }
.survey-option .form-control { padding: 5px 10px; font-size: var(--text-sm); }
.survey-option-remove { flex: none; }

/* ---- Opinion Scale preview ---- */
.survey-scale-preview { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.survey-scale-point {
  font-size: var(--text-xs); color: var(--ink-3);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-full); padding: 3px 10px;
}

/* ---- add-question + limit affordance ---- */
.survey-add-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); }
.survey-limit-note { font-size: var(--text-xs); color: var(--ink-3); }
.survey-limit-note.is-reached { color: var(--brand-accent); font-weight: 600; }

/* At the question cap the add button stays clickable and opens the inline upsell.
   It must therefore read as GATED, not disabled. Dimming it to .65 opacity was
   the whole problem: a faded button is the universal sign for "this does
   nothing", so nobody clicked it and nobody ever saw the upsell behind it.
   Full opacity, the accent colour the rest of the paid affordances use, and a
   padlock instead of a plus. */
.survey-add-row .btn.is-limited {
  opacity: 1;
  cursor: pointer;
  color: var(--brand-accent);
  border-color: color-mix(in srgb, var(--brand-accent) 35%, transparent);
  background: color-mix(in srgb, var(--brand-accent) 8%, transparent);
}

.survey-add-row .btn.is-limited:hover {
  background: color-mix(in srgb, var(--brand-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--brand-accent) 55%, transparent);
}


/* ---- AI screen ---- */
.survey-ai { max-width: 620px; margin: 0 auto; }
.survey-ai-head { text-align: center; margin-bottom: var(--space-6); }
.survey-ai-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--brand-accent) 10%, white);
  color: var(--brand-accent); font-size: 24px; margin-bottom: var(--space-3);
}
.survey-ai-examples { display: grid; gap: var(--space-2); margin-top: var(--space-5); }
.survey-ai-example {
  text-align: left; font-size: var(--text-sm); color: var(--ink-2);
  background: var(--surface-0); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.survey-ai-example:hover { border-color: var(--brand-300); background: var(--brand-50); color: var(--brand-700); }
.survey-ai-error { color: var(--danger); font-size: var(--text-sm); margin-top: var(--space-2); }

/* ---- touch: HTML5 drag events don't fire, so show explicit move buttons ---- */
.survey-move-btns { display: none; gap: 2px; }
@media (hover: none) and (pointer: coarse) {
  .survey-grip { display: none; }
  .survey-move-btns { display: inline-flex; }
}

@media (max-width: 575.98px) {
  .survey-builder-bar { align-items: flex-start; }
  .survey-q { padding: var(--space-3) var(--space-4); }
}

/* =====================================================================
   Surveys v2 — create chooser, owner results, respondent flow.
   ===================================================================== */

/* ---- create chooser (3 tiles) ---- */
.survey-create-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4); margin-top: var(--space-4);
}
.survey-create-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; gap: var(--space-2); padding: var(--space-6);
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg, 14px);
  color: var(--ink-1); text-decoration: none; cursor: pointer; transition: box-shadow .15s, transform .15s, border-color .15s;
}
.survey-create-tile:hover { box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.08)); transform: translateY(-2px); border-color: var(--brand-300, var(--line)); }
.survey-create-tile-ai { border-color: color-mix(in srgb, var(--brand-600) 40%, var(--line)); background: color-mix(in srgb, var(--brand-600) 5%, var(--surface-1)); }
.survey-create-badge {
  position: absolute; top: var(--space-3); right: var(--space-3);
  font-size: var(--text-xs); font-weight: 600; color: var(--brand-600);
  background: color-mix(in srgb, var(--brand-600) 12%, white); padding: 2px 8px; border-radius: 999px;
}
.survey-create-art {
  width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--brand-600) 12%, white); color: var(--brand-600); font-size: 24px; margin-bottom: var(--space-2);
}
.survey-create-tile-ai .survey-create-art { background: var(--brand-600); color: #fff; }
.survey-create-tile-title { font-size: var(--text-lg); font-weight: 600; margin: 0; }
.survey-create-tile-body { color: var(--ink-3); margin: 0; font-size: var(--text-sm); }

/* Duplicate picker: the search sits above the list and spans the card, unlike the
   fixed-width one in a listing toolbar. */
.survey-duplicate-search { display: flex; width: 100%; margin-bottom: var(--space-4); }
.survey-duplicate-search .listing-search-input { width: 100%; }
.survey-duplicate-noresults { margin: var(--space-3) 0 0; }

.survey-duplicate-list { list-style: none; margin: 0; padding: 0; }
.survey-duplicate-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.survey-duplicate-row:last-child { border-bottom: none; }
.survey-duplicate-name { font-weight: 500; }

/* ---- owner results ---- */
/* Full container width, so the results line up with the shared owner header and
   with every other app screen. It used to cap at 900px, which left the page
   visibly narrower than its own header. Bottom breathing room keeps the last
   question card off the viewport edge. */
.survey-results-page { padding-bottom: var(--space-10); }
/* One question per full-width row — scroll down through them. */
.survey-summary-grid { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }
.survey-summary-card .card-body { padding: var(--space-5); }
.survey-summary-q { font-weight: 600; color: var(--ink-1); margin-bottom: 2px; }
.survey-summary-meta { font-size: var(--text-sm); color: var(--ink-3); margin-bottom: var(--space-3); }

.survey-stat-row { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); }
.survey-stat { text-align: center; }
.survey-stat-num { font-size: var(--text-xl); font-weight: 700; color: var(--ink-1); }
.survey-stat-label { font-size: var(--text-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }

.survey-dist { display: flex; flex-direction: column; gap: var(--space-2); }
.survey-dist-row { display: grid; grid-template-columns: minmax(70px, 30%) 1fr auto; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.survey-dist-label { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.survey-dist-track { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.survey-dist-fill { display: block; height: 100%; background: var(--brand-600); border-radius: 999px; }
.survey-dist-count { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.survey-text-answers { margin: 0; padding-left: var(--space-4); display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.survey-text-answers li { color: var(--ink-2); font-size: var(--text-sm); }

.survey-responses { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.survey-response-card .card-body { padding: var(--space-4); }
.survey-response-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.survey-response-num { font-weight: 600; color: var(--ink-1); }
.survey-response-answers { margin: 0; display: grid; grid-template-columns: minmax(120px, 32%) 1fr; gap: 6px var(--space-4); }
.survey-response-answers dt { color: var(--ink-3); font-weight: 500; font-size: var(--text-sm); }
.survey-response-answers dd { margin: 0; color: var(--ink-1); font-size: var(--text-sm); }
.survey-response-card.is-decoy { filter: blur(5px); user-select: none; pointer-events: none; opacity: .7; }

.survey-response-lock {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  background: color-mix(in srgb, var(--brand-600) 6%, var(--surface-1)); border: 1px dashed color-mix(in srgb, var(--brand-600) 40%, var(--line));
  border-radius: var(--radius-lg, 14px); margin-top: calc(var(--space-4) * -1); position: relative; z-index: 2;
}
.survey-response-lock .fe-lock { font-size: 22px; color: var(--brand-600); }
.survey-response-lock-title { font-weight: 600; color: var(--ink-1); }
.survey-response-lock-sub { font-size: var(--text-sm); color: var(--ink-3); }
.survey-response-lock .btn { margin-left: auto; }

/* ---- respondent flow ---- */
.survey-respond-shell { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-4); }
.survey-respond-card { width: 100%; max-width: 820px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg, 16px); padding: var(--space-8); box-shadow: var(--shadow-sm, 0 2px 10px rgba(0,0,0,.05)); }
.survey-respond-closed { text-align: center; }
.survey-respond-title { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-2); }
.survey-respond-desc { color: var(--ink-3); margin-bottom: var(--space-2); }

.survey-respond-progress { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin-bottom: var(--space-5); }
.survey-respond-progress-fill { height: 100%; width: 0; background: var(--brand-600); transition: width .25s ease; }

.survey-respond-qnum { font-size: var(--text-sm); color: var(--ink-3); margin-bottom: var(--space-2); }
.survey-respond-qtext { font-size: var(--text-lg); font-weight: 600; color: var(--ink-1); margin-bottom: var(--space-1); }
.survey-respond-req { color: var(--danger); }
.survey-respond-helper { font-size: var(--text-sm); color: var(--ink-3); margin-bottom: var(--space-3); }
.survey-respond-input { margin: var(--space-3) 0 var(--space-5); }

/* Choices wrap on a row so short options share a line (was full-width stacked). */
.survey-respond-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.survey-respond-choices-list { flex-direction: row; }
.survey-respond-scale { flex-wrap: wrap; }
.survey-respond-choice {
  border: 1px solid var(--line); background: var(--surface-1); color: var(--ink-1);
  padding: 10px 16px; border-radius: 10px; cursor: pointer; font-size: var(--text-sm); transition: border-color .12s, background .12s;
}
.survey-respond-choices-list .survey-respond-choice { text-align: left; }
.survey-respond-other-input { flex-basis: 100%; }
.survey-respond-choice:hover { border-color: var(--brand-600); }
.survey-respond-choice.is-selected { border-color: var(--brand-600); background: color-mix(in srgb, var(--brand-600) 12%, white); font-weight: 600; }
.survey-respond-other-input { margin-top: var(--space-2); }

/* Inline per-field validation message (under the field). */
.survey-respond-field-error { color: var(--danger); font-size: var(--text-sm); margin-top: 6px; }
.survey-respond-block.has-error .form-control { border-color: var(--danger); }

.survey-respond-nav { display: flex; gap: var(--space-2); align-items: center; }
.survey-respond-nav .btn-primary { margin-left: auto; }
.survey-respond-error { color: var(--danger); font-size: var(--text-sm); margin-top: var(--space-3); }
.survey-respond-done { text-align: center; }

/* ---- v2.1: builder breathing room + AI template gallery ---- */
.survey-builder, .survey-ai { padding-bottom: var(--space-10); }

.survey-ai-templates {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3); margin-top: var(--space-3);
}
.survey-ai-template {
  text-align: left; padding: var(--space-4); border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px); background: var(--surface-1); color: var(--ink-1);
  cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s;
}
.survey-ai-template:hover { border-color: var(--brand-600); box-shadow: var(--shadow-sm, 0 2px 10px rgba(0,0,0,.06)); transform: translateY(-1px); }
.survey-ai-template-title { font-weight: 600; font-size: var(--text-base); margin: 0 0 2px; }
.survey-ai-template-desc { font-size: var(--text-sm); color: var(--ink-3); margin: 0; }

/* Themed, clickable breadcrumb — replaces the old gray back button on the
   survey create/edit/results pages. First crumb links to the list; the
   current page is plain bold text. */
.survey-crumbs {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 500; color: var(--ink-3);
  flex-wrap: wrap; min-width: 0;
  padding-left: var(--space-2);
}
.survey-crumbs a {
  color: var(--ink-3); text-decoration: none; border-radius: 6px;
  transition: color .12s ease;
}
.survey-crumbs a:hover { color: var(--brand); }
.survey-crumbs .sep { color: var(--ink-4, var(--ink-3)); font-size: .8em; opacity: .7; }
.survey-crumbs .current {
  color: var(--ink-1); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch;
}

/* Whole-page respondent mode: space between question blocks. */
.survey-respond-block { margin-bottom: var(--space-6); }
.survey-respond-block:last-child { margin-bottom: 0; }

/* Public "do you own this?" prompt (top-right of the public nav). */
.public-owner-prompt { font-size: var(--text-sm); color: var(--ink-3); display: flex; align-items: center; gap: 6px; margin-right: var(--space-3); }
.public-owner-prompt a { color: var(--brand-600); font-weight: 600; text-decoration: none; white-space: nowrap; }
.public-owner-prompt a:hover { text-decoration: underline; }
@media (max-width: 575.98px) { .public-owner-prompt span { display: none; } }

/* Survey-type visual tiles (one-at-a-time vs whole page). */
.survey-typetiles { display: flex; gap: var(--space-3); }
.survey-typetile {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg, 12px);
  color: var(--ink-3); cursor: pointer; text-align: center;
  transition: border-color .12s, background .12s, color .12s;
}
.survey-typetile input { position: absolute; opacity: 0; width: 0; height: 0; }
.survey-typetile:hover { border-color: var(--brand-300, var(--line)); color: var(--ink-1); }
/* Selection highlight is driven by the .is-selected class (set by survey-builder.js
   on load + change). Avoid :has() here — it froze style invalidation for these
   tiles in testing. */
.survey-typetile.is-selected { border-color: var(--brand-600); color: var(--brand-700); background: var(--brand-50); }
.survey-typetile-art { width: 56px; height: 40px; }
.survey-typetile-label { font-size: var(--text-sm); font-weight: 600; }

/* Compact option tiles (email alerts) — smaller than survey-type, icon + label.
   Shared control: the box add + settings alert pickers use these too, so the
   rules are not survey-only despite the class prefix. */
.survey-typetiles-sm { gap: var(--space-2); }
.survey-typetile-sm { padding: var(--space-2) var(--space-3); gap: 4px; }
.survey-typetile-icon { font-size: 18px; line-height: 1; }
.survey-typetile-sm .survey-typetile-label { font-size: var(--text-xs); }

/* Persistent title/description header on the respondent page (whole-page mode
   shows it above the questions; stepper shows it above the Start gate). */
.survey-respond-header { margin-bottom: var(--space-5); }

/* ============================================================================
   OWNER RESULTS — per-question widgets (rendered by survey-results.js).
   A token bridge maps the mockup's variable names onto the app's real tokens
   so the ported widget CSS below can stay as-is. Light-only. Scoped to
   .survey-results-page so nothing leaks into the rest of the app.
   ============================================================================ */
.survey-results-page{
  --surface: var(--surface-0); --surface-2: #F1F4F9; --surface-3: #E9EDF4;
  --border: var(--line); --border-strong: #D3D7E3;
  --text: var(--ink-1); --muted: var(--ink-2); --faint: var(--ink-3);
  --brand: var(--brand-600); --survey: var(--warning);
  --pos: var(--success); --neu: var(--ink-3); --neg: var(--danger);
  --radius: var(--radius-lg); --shadow-sm: var(--shadow-1);
}

.survey-q-section{ margin-top: var(--space-6); }
#surveyQuestions{ display: grid; gap: var(--space-4); }

/* card */
.survey-results-page .q{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 1.3rem 1.5rem; }
/* Header: row 1 = data type + count (left) and view filters (right); row 2 = question. */
.survey-results-page .q-head{ margin-bottom: 1.1rem; }
.survey-results-page .q-toprow{ display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: .45rem; }
.survey-results-page .q-badge{ font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: .2rem .45rem; border-radius: 6px; flex: none; }
.survey-results-page .q-count{ font-size: .74rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.survey-results-page .q-tools{ display: flex; align-items: center; gap: .7rem; flex: none; margin-left: auto; }
.survey-results-page .q-title{ font-size: 1rem; margin: 0; color: var(--ink-1); letter-spacing: -.01em; }
.survey-results-page .q-pane{ animation: sr-fade .28s ease both; }
.survey-results-page .q-pane[hidden]{ display: none; }

/* view switcher */
.survey-results-page .viewseg{ display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 2px; }
.survey-results-page .viewseg button{ border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .72rem; font-weight: 600; padding: .28rem .55rem; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.survey-results-page .viewseg button[aria-pressed="true"]{ background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.survey-results-page .viewseg button:disabled{ opacity: .4; cursor: not-allowed; }

.survey-results-page .ai-inline{ display: inline-flex; align-items: center; gap: .3rem; font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); padding: .15rem .4rem; border-radius: 6px; }
.survey-results-page .ai-inline svg{ width: 11px; height: 11px; }

/* AI insights band (free upsell teaser) */
.survey-results-page .survey-ai-band{ background: color-mix(in srgb, var(--brand) 5%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--brand) 40%, var(--border)); border-radius: var(--radius); padding: 1.1rem 1.35rem; margin-bottom: var(--space-4); }
.survey-results-page .survey-ai-band .ai-head{ margin-bottom: .7rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* Scope qualifier next to the AI INSIGHTS pill. Quiet on purpose: it disambiguates the band
   from the per-question callouts without competing with the summary itself. */
.survey-results-page .survey-ai-band .ai-scope{ font-size: .72rem; color: var(--faint); }
.survey-results-page .ai-band-row{ display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.survey-results-page .ai-band-copy{ flex: 1; min-width: 220px; }
.survey-results-page .ai-band-copy .t{ font-weight: 700; font-size: .98rem; }
.survey-results-page .ai-band-copy .s{ color: var(--muted); font-size: .86rem; margin-top: .1rem; }

/* ranked bars */
.survey-results-page .bars{ display: flex; flex-direction: column; gap: .6rem; }
.survey-results-page .bar{ display: grid; grid-template-columns: 1fr auto; gap: .2rem .7rem; align-items: center; }
.survey-results-page .bar .lb{ font-size: .88rem; font-weight: 500; }
.survey-results-page .bar.top .lb{ font-weight: 700; }
.survey-results-page .bar .val{ font-size: .82rem; color: var(--muted); font-weight: 600; text-align: right; }
.survey-results-page .bar .track{ grid-column: 1 / -1; height: 9px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.survey-results-page .bar .track i{ display: block; height: 100%; border-radius: 5px; background: color-mix(in srgb, var(--survey) 55%, var(--brand)); animation: sr-grow 1s ease both; }
.survey-results-page .bar.top .track i{ background: var(--survey); }
.survey-results-page .softnote{ font-size: .72rem; color: var(--faint); font-style: italic; }
.survey-results-page .dom-cap{ font-size: .74rem; color: var(--muted); margin-bottom: .5rem; }

/* pie / donut */
.survey-results-page .pie-wrap{ display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.survey-results-page .pie{ flex: none; }
.survey-results-page .slice{ stroke: var(--surface); stroke-width: 2; cursor: default; animation: sr-fade .5s ease both; transition: opacity .12s; }
.survey-results-page .slice:hover{ opacity: .85; }
.survey-results-page .donut-num{ fill: var(--text); font-size: 1.5rem; font-weight: 800; }
.survey-results-page .donut-cap{ fill: var(--muted); font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; }
.survey-results-page .pie-legend{ display: flex; flex-direction: column; gap: .4rem; font-size: .84rem; min-width: 170px; }
.survey-results-page .pie-legend .r{ display: flex; align-items: center; gap: .45rem; cursor: default; }
.survey-results-page .pie-legend .dot{ width: 10px; height: 10px; border-radius: 3px; flex: none; }
.survey-results-page .pie-legend .pl{ flex: 1; }
.survey-results-page .pie-legend .pv{ font-weight: 700; color: var(--muted); }

/* rating */
.survey-results-page .rating-wrap{ display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.survey-results-page .rating-big{ text-align: center; flex: none; }
.survey-results-page .rating-big .n{ font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.survey-results-page .rating-big .stars{ color: var(--survey); font-size: 1rem; margin-top: .2rem; letter-spacing: 2px; }
.survey-results-page .rating-big .of{ font-size: .72rem; color: var(--muted); margin-top: .15rem; }
.survey-results-page .rating-dist{ flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: .35rem; }
.survey-results-page .rating-dist .r{ display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: center; font-size: .8rem; cursor: default; }
.survey-results-page .rating-dist .r .s{ color: var(--muted); width: 3.6em; }
.survey-results-page .rating-dist .r .track{ height: 7px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.survey-results-page .rating-dist .r .track i{ display: block; height: 100%; background: var(--survey); border-radius: 4px; animation: sr-grow 1s ease both; }
.survey-results-page .rating-dist .r .c{ color: var(--muted); width: 2.4em; text-align: right; }

/* half gauge */
.survey-results-page .gauge-wrap{ position: relative; width: 210px; text-align: center; margin: .4rem auto; }
.survey-results-page .gauge-big{ position: absolute; left: 0; right: 0; bottom: 20px; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
.survey-results-page .gauge-cap{ position: absolute; left: 0; right: 0; bottom: 0; font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.survey-results-page .gauge-arc{ animation: sr-fade .6s ease both; }

/* nps */
.survey-results-page .nps-wrap{ display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.survey-results-page .nps-gauge{ position: relative; width: 200px; flex: none; text-align: center; }
.survey-results-page .nps-gauge .score{ position: absolute; left: 0; right: 0; bottom: 6px; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
.survey-results-page .nps-gauge .cap{ position: absolute; left: 0; right: 0; bottom: -14px; font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.survey-results-page .nps-split{ flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: .5rem; }
.survey-results-page .nps-seg{ display: flex; height: 14px; border-radius: 8px; overflow: hidden; }
.survey-results-page .nps-seg span{ display: block; height: 100%; }
.survey-results-page .nps-rows{ display: flex; flex-direction: column; gap: .4rem; font-size: .84rem; }
.survey-results-page .nps-rows .r{ display: flex; align-items: center; gap: .45rem; cursor: default; }
.survey-results-page .nps-rows .r .dot{ width: 9px; height: 9px; border-radius: 50%; }
.survey-results-page .nps-rows .r .p{ margin-left: auto; font-weight: 700; }

/* likert */
.survey-results-page .likert-bar{ display: flex; height: 16px; border-radius: 8px; overflow: hidden; margin-bottom: .7rem; }
.survey-results-page .likert-bar span{ display: block; height: 100%; cursor: default; }
.survey-results-page .likert-legend{ display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .78rem; color: var(--muted); }
.survey-results-page .likert-legend .r{ display: flex; align-items: center; gap: .35rem; }
.survey-results-page .likert-legend .r .dot{ width: 9px; height: 9px; border-radius: 3px; }
.survey-results-page .likert-net{ margin-top: .6rem; font-size: .85rem; }
.survey-results-page .likert-net b{ font-weight: 750; color: var(--pos); }
.survey-results-page .diverge{ margin-top: .2rem; }
.survey-results-page .dv-bar{ display: flex; height: 18px; border-radius: 9px; overflow: hidden; margin-bottom: .6rem; }
.survey-results-page .dv-bar span{ display: block; height: 100%; cursor: default; }
.survey-results-page .dv-legend{ display: flex; justify-content: space-between; gap: .6rem; font-size: .82rem; font-weight: 600; flex-wrap: wrap; }

/* yesno */
.survey-results-page .yn{ display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.survey-results-page .yn-big{ font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; }
.survey-results-page .yn-big small{ font-size: .8rem; color: var(--muted); font-weight: 600; display: block; letter-spacing: 0; }
.survey-results-page .yn-split{ flex: 1; min-width: 220px; }
.survey-results-page .yn-seg{ display: flex; height: 16px; border-radius: 8px; overflow: hidden; margin-bottom: .5rem; }
.survey-results-page .yn-seg span{ display: block; height: 100%; cursor: default; }
.survey-results-page .yn-rows{ display: flex; gap: 1.2rem; font-size: .84rem; }
.survey-results-page .yn-rows .r{ display: flex; align-items: center; gap: .4rem; }
.survey-results-page .yn-rows .r .dot{ width: 9px; height: 9px; border-radius: 50%; }

/* histogram + stats */
.survey-results-page .stat-row{ display: flex; gap: 1.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.survey-results-page .stat .n{ font-size: 1.5rem; font-weight: 750; letter-spacing: -.02em; }
.survey-results-page .stat .l{ font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.survey-results-page .histo{ display: flex; align-items: flex-end; gap: 5px; height: 80px; }
.survey-results-page .histo .b{ flex: 1; background: color-mix(in srgb, var(--brand) 35%, transparent); border-radius: 4px 4px 0 0; min-height: 4px; animation: sr-growH .8s ease both; cursor: default; transition: background .12s; }
.survey-results-page .histo .b:hover{ background: color-mix(in srgb, var(--brand) 60%, transparent); }
.survey-results-page .histo-x{ display: flex; justify-content: space-between; font-size: .68rem; color: var(--faint); margin-top: .35rem; }

/* date / time bars */
.survey-results-page .timeline-bars{ display: flex; align-items: flex-end; gap: 4px; height: 70px; }
.survey-results-page .timeline-bars .b{ flex: 1; background: color-mix(in srgb, var(--survey) 45%, transparent); border-radius: 4px 4px 0 0; min-height: 4px; animation: sr-growH .8s ease both; cursor: default; transition: background .12s; }
.survey-results-page .timeline-bars .b:hover{ background: color-mix(in srgb, var(--survey) 70%, transparent); }
.survey-results-page .timeline-x{ display: flex; justify-content: space-between; font-size: .68rem; color: var(--faint); margin-top: .35rem; }

/* email contact list */
.survey-results-page .email-head{ display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.survey-results-page .valid-pill{ display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; color: var(--pos); background: color-mix(in srgb, var(--pos) 13%, transparent); padding: .3rem .7rem; border-radius: 20px; }
.survey-results-page .email-sub{ font-size: .82rem; color: var(--muted); }
.survey-results-page .q-actions{ display: flex; gap: .6rem; margin: 0 0 1rem; flex-wrap: wrap; }
.survey-results-page .q-btn{ display: inline-flex; align-items: center; gap: .4rem; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font: inherit; font-size: .82rem; font-weight: 600; padding: .45rem .8rem; border-radius: 10px; cursor: pointer; text-decoration: none; }
.survey-results-page .q-btn:hover{ border-color: var(--border-strong); }
.survey-results-page .q-btn.primary{ background: var(--brand); border-color: var(--brand); color: #fff; }
.survey-results-page .q-btn svg{ width: 15px; height: 15px; }
.survey-results-page .q-lock{ display: inline-flex; color: var(--brand); }
.survey-results-page .q-lock svg{ width: 14px; height: 14px; }

/* smart text: word cloud + unique list */
.survey-results-page .cloud-cap{ font-size: .74rem; color: var(--muted); margin-bottom: .5rem; }
.survey-results-page .cloud{ display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .85rem; line-height: 1.15; padding: .3rem 0 .6rem; }
.survey-results-page .cloud .w{ font-weight: 700; cursor: pointer; transition: transform .12s; animation: sr-fade .5s ease both; display: inline-block; }
.survey-results-page .cloud .w:hover{ transform: translateY(-2px); text-decoration: underline; }
.survey-results-page .cloud .w:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.survey-results-page .uq{ display: flex; flex-direction: column; gap: .7rem; }
.survey-results-page .uq-top{ display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.survey-results-page .uq-stat{ display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--muted); font-weight: 600; }
.survey-results-page .uq-stat svg{ width: 14px; height: 14px; color: var(--faint); }
.survey-results-page .uq-searchwrap{ position: relative; flex: 1; min-width: 160px; display: flex; }
.survey-results-page .uq-search{ flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: .45rem 2rem .45rem .75rem; font: inherit; font-size: .85rem; color: var(--text); }
.survey-results-page .uq-clear{ position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-3); cursor: pointer; }
.survey-results-page .uq-clear:hover{ background: var(--surface-3); color: var(--ink-1); }
.survey-results-page .uq-clear svg{ width: 14px; height: 14px; }
.survey-results-page .uq-note{ font-size: .78rem; color: var(--faint); font-style: italic; }
.survey-results-page .uq-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; max-height: 230px; overflow: auto; }
.survey-results-page .uq-list li{ background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: .32rem .65rem; font-size: .85rem; }
.survey-results-page .uq-list.rows{ flex-direction: column; flex-wrap: nowrap; gap: .5rem; max-height: 340px; }
.survey-results-page .uq-list.rows li{ width: 100%; display: flex; gap: .5rem; align-items: baseline; border-radius: 10px; padding: .55rem .75rem; font-size: .88rem; line-height: 1.45; }
/* raw answers/addresses as a light table with divider lines */
.survey-results-page .answers-scroll{ max-height: 340px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.survey-results-page .answers-table{ width: 100%; border-collapse: collapse; font-size: .88rem; }
.survey-results-page .answers-table td{ padding: .55rem .8rem; border-bottom: 1px solid var(--border); color: var(--text); line-height: 1.45; }
.survey-results-page .answers-table tr:last-child td{ border-bottom: 0; }
.survey-results-page .answers-table tr:hover td{ background: var(--surface-2); }
.survey-results-page .uq-back{ display: inline-flex; align-items: center; gap: .3rem; align-self: flex-start; background: none; border: 0; padding: 0 0 .2rem; font: inherit; font-size: .8rem; font-weight: 600; color: var(--brand); cursor: pointer; }
.survey-results-page .uq-back:hover{ text-decoration: underline; }
.survey-results-page .uq-back svg{ width: 15px; height: 15px; }
.survey-results-page .pane-lock{ display: flex; align-items: center; gap: .7rem; background: var(--surface-2); border: 1px dashed color-mix(in srgb, var(--brand) 40%, var(--border)); border-radius: 12px; padding: .9rem 1.1rem; }
.survey-results-page .pane-lock .t{ flex: 1; font-size: .88rem; }
.survey-results-page .pane-lock .t small{ display: block; color: var(--muted); font-weight: 500; }

/* per-question data table */
.survey-results-page .dtable{ width: 100%; border-collapse: collapse; font-size: .86rem; }
.survey-results-page .dtable th{ text-align: left; font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); padding: .45rem .6rem; border-bottom: 1px solid var(--border); }
.survey-results-page .dtable th.tnum{ text-align: right; }
.survey-results-page .dtable td{ padding: .5rem .6rem; border-bottom: 1px solid var(--border); }
.survey-results-page .dtable td.tnum{ text-align: right; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.survey-results-page .dtable tr:last-child td{ border-bottom: 0; }
.survey-results-page .tnum{ font-variant-numeric: tabular-nums; }

/* floating tooltip (appended to body — uses global tokens, not the bridge) */
.tip{ position: fixed; z-index: 1080; pointer-events: none; left: 0; top: 0; background: var(--ink-1); color: #fff; font-size: .72rem; font-weight: 650; padding: .32rem .55rem; border-radius: 8px; box-shadow: var(--shadow-2); opacity: 0; transform: translateY(3px); transition: opacity .12s ease, transform .12s ease; white-space: nowrap; max-width: 280px; }
.tip.on{ opacity: 1; transform: none; }
.tip .tt-sub{ display: block; font-weight: 500; opacity: .75; font-size: .66rem; margin-top: .05rem; }

@keyframes sr-grow{ from{ width: 0 !important; } }
@keyframes sr-growH{ from{ height: 0 !important; } }
@keyframes sr-fade{ from{ opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce){ .survey-results-page *{ animation: none !important; } .tip{ transition: none; } }

/* ============================================================================
   PUBLIC RESULTS INFOGRAPHIC (survey-public-results.js) — /s/{id}/results.
   Charts + stats only, light-only, real tokens via a scoped bridge.
   ============================================================================ */
.survey-public-page{
  --surface: var(--surface-0); --surface-2: #F1F4F9; --surface-3: #E9EDF4;
  --border: var(--line); --text: var(--ink-1); --muted: var(--ink-2); --faint: var(--ink-3);
  --brand: var(--brand-600); --survey: var(--warning);
  --pos: var(--success); --neu: var(--ink-3); --neg: var(--danger);
  background: var(--surface-1); padding: var(--space-6) 0 var(--space-16);
}
.survey-public-wrap{ max-width: 900px; margin: 0 auto; padding: 0 var(--space-4); }
.survey-public-page .tnum{ font-variant-numeric: tabular-nums; }

.survey-public-brand{ display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: var(--space-4); color: var(--ink-1); }
.survey-public-mark{ width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--brand), var(--survey)); display: grid; place-items: center; color: #fff; }
.survey-public-brand-sub{ color: var(--faint); font-weight: 600; font-size: .78rem; }

.survey-public-hero{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-2); padding: clamp(1.6rem,4vw,2.6rem); text-align: center; margin-bottom: var(--space-4);
  background-image: radial-gradient(90% 120% at 50% -10%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 60%); }
.survey-public-kicker{ font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.survey-public-hero h1{ font-size: clamp(1.5rem,4vw,2.3rem); margin: .5rem auto .7rem; color: var(--ink-1); max-width: 22ch; }
.survey-public-meta{ display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); font-weight: 600; font-size: .9rem; }

.survey-public-metrics{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: var(--space-4); }
@media (max-width: 720px){ .survey-public-metrics{ grid-template-columns: repeat(2, 1fr); } }
.survey-public-page .pm{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: 1.1rem; text-align: center; }
.survey-public-page .pm-k{ font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: .45rem; }
.survey-public-page .pm-v{ font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.survey-public-page .pm-v.brand{ color: var(--brand); }
.survey-public-page .pm-stars{ color: var(--survey); margin-top: .3rem; letter-spacing: 2px; }
.survey-public-page .pm-foot{ font-size: .72rem; color: var(--faint); margin-top: .4rem; }

.survey-public-grid{ display: grid; gap: 1rem; }
.survey-public-page .pcard{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: 1.3rem 1.5rem; }
.survey-public-page .pcard h3{ font-size: 1rem; margin: 0 0 1rem; color: var(--ink-1); }
.survey-public-page .softnote{ font-size: .72rem; color: var(--faint); font-style: italic; margin-top: .6rem; }

/* bars */
.survey-public-page .pbars{ display: flex; flex-direction: column; gap: .7rem; }
.survey-public-page .pbar .top{ display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: .25rem; }
.survey-public-page .pbar .top .lb{ font-weight: 600; }
.survey-public-page .pbar.win .top .lb{ font-weight: 800; }
.survey-public-page .pbar .top .val{ color: var(--muted); font-weight: 600; }
.survey-public-page .pbar .track{ height: 10px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.survey-public-page .pbar .track i{ display: block; height: 100%; border-radius: 6px; background: color-mix(in srgb, var(--survey) 55%, var(--brand)); }
.survey-public-page .pbar.win .track i{ background: var(--survey); }

/* donut */
.survey-public-page .pie-wrap{ display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.survey-public-page .pslice{ stroke: var(--surface); stroke-width: 2; }
.survey-public-page .pdonut-num{ fill: var(--text); font-size: 1.4rem; font-weight: 800; }
.survey-public-page .pdonut-cap{ fill: var(--muted); font-size: .56rem; text-transform: uppercase; letter-spacing: .08em; }
.survey-public-page .plegend{ display: flex; flex-direction: column; gap: .45rem; font-size: .85rem; min-width: 150px; }
.survey-public-page .plegend .r{ display: flex; align-items: center; gap: .45rem; }
.survey-public-page .plegend .dot{ width: 10px; height: 10px; border-radius: 3px; flex: none; }
.survey-public-page .plegend .pl{ flex: 1; }
.survey-public-page .plegend .pv{ font-weight: 700; color: var(--muted); }

/* rating */
.survey-public-page .prating{ display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.survey-public-page .prating-big{ text-align: center; flex: none; }
.survey-public-page .prating-big .n{ font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.survey-public-page .prating-big .of{ font-size: .72rem; color: var(--muted); }
.survey-public-page .prating-dist{ flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: .35rem; }
.survey-public-page .prating-dist .r{ display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: center; font-size: .8rem; }
.survey-public-page .prating-dist .r .s{ color: var(--muted); width: 3.4em; }
.survey-public-page .prating-dist .r .track{ height: 7px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.survey-public-page .prating-dist .r .track i{ display: block; height: 100%; background: var(--survey); border-radius: 4px; }
.survey-public-page .prating-dist .r .c{ color: var(--muted); width: 2.4em; text-align: right; }

/* gauge / segments */
.survey-public-page .pgauge{ position: relative; width: 200px; text-align: center; margin: 0 auto .6rem; }
.survey-public-page .pgauge-big{ position: absolute; left: 0; right: 0; bottom: 14px; font-size: 1.8rem; font-weight: 800; }
.survey-public-page .pgauge-cap{ position: absolute; left: 0; right: 0; bottom: -2px; font-size: .64rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.survey-public-page .pseg{ display: flex; height: 16px; border-radius: 9px; overflow: hidden; margin-bottom: .55rem; }
.survey-public-page .pseg span{ display: block; height: 100%; }
.survey-public-page .pseg-rows{ display: flex; justify-content: space-between; gap: .6rem; font-size: .82rem; font-weight: 600; flex-wrap: wrap; }

/* likert stacked */
.survey-public-page .pstack{ display: flex; height: 16px; border-radius: 8px; overflow: hidden; margin-bottom: .7rem; }
.survey-public-page .pstack span{ display: block; height: 100%; }
.survey-public-page .plegend-row{ display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .78rem; color: var(--muted); }
.survey-public-page .plegend-row .dot{ width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: .3rem; }

/* number histogram */
.survey-public-page .pstat-row{ display: flex; gap: 1.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.survey-public-page .pstat .n{ font-size: 1.5rem; font-weight: 750; letter-spacing: -.02em; }
.survey-public-page .pstat .l{ font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.survey-public-page .phisto{ display: flex; align-items: flex-end; gap: 5px; height: 80px; }
.survey-public-page .phisto .b{ flex: 1; background: color-mix(in srgb, var(--brand) 35%, transparent); border-radius: 4px 4px 0 0; min-height: 4px; }

/* yesno + count-only */
.survey-public-page .pyn{ display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.survey-public-page .pyn-big{ font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; }
.survey-public-page .pyn-big small{ font-size: .8rem; color: var(--muted); font-weight: 600; display: block; }
.survey-public-page .pcount{ font-size: 1rem; color: var(--muted); }
.survey-public-page .pcount .tnum{ font-size: 1.8rem; font-weight: 800; color: var(--ink-1); }

/* empty + cta + madein */
.survey-public-empty{ text-align: center; color: var(--muted); padding: var(--space-8) 0; }
.survey-public-cta{ text-align: center; margin-top: var(--space-6); background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 10%, var(--surface)), var(--surface) 65%); border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--border)); border-radius: var(--radius-xl); padding: 2rem 1.4rem; }
.survey-public-cta h2{ font-size: 1.3rem; margin: 0 0 .4rem; color: var(--ink-1); }
.survey-public-cta p{ color: var(--muted); margin: 0 0 1.1rem; }
.survey-public-madein{ text-align: center; margin-top: var(--space-4); font-size: .78rem; color: var(--faint); }

/* ---- Survey results AI (Pro): summary/themes + live band ---- */
.survey-results-page .ai-summary{ margin:0 0 .75rem; font-size:.95rem; line-height:1.6; color:var(--text); }
.survey-results-page .ai-themes{ display:flex; flex-wrap:wrap; gap:.4rem; }
.survey-results-page .ai-theme{ font-size:.8rem; font-weight:600; color:var(--brand);
  background:color-mix(in srgb,var(--brand) 12%,transparent); border-radius:999px; padding:.25rem .7rem; }
.survey-results-page .ai-gather{ font-size:.9rem; color:var(--faint); display:flex; align-items:center; gap:.4rem; }

/* Per-question AI callout: always visible under the question title, above the views.
   Solid border = real data, dashed (.pane-lock) = locked, matching the survey band. */
.survey-results-page .q-ai-callout{ margin-bottom: 1.1rem; animation: sr-fade .28s ease both; }
.survey-results-page .q-ai-callout.is-live{
  background: color-mix(in srgb, var(--brand) 5%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
  border-radius: 12px; padding: .85rem 1rem;
}
.survey-results-page .q-ai-callout.is-live > .ai-inline{ margin-bottom: .55rem; }
.survey-results-page .q-ai-callout .ai-summary{ margin: 0 0 .6rem; font-size: .9rem; }
.survey-results-page .q-ai-callout .ai-themes{ margin-bottom: .7rem; }
.survey-results-page .q-ai-callout > :last-child{ margin-bottom: 0; }
.survey-results-page .survey-ai-band.is-live{ background:color-mix(in srgb,var(--brand-600,#2d77e0) 6%,var(--surface-0,#fff));
  border:1px solid color-mix(in srgb,var(--brand-600,#2d77e0) 20%,transparent); border-radius:var(--radius-lg,12px); padding:1rem 1.25rem; }
.survey-results-page .survey-ai-band.is-live .ai-band-summary{ margin-top:.5rem; font-size:.95rem; line-height:1.6; color:var(--ink-1,#1a1a2e); }
.survey-results-page .ai-live-row{ display:flex; align-items:center; gap:1.25rem; margin-top:.5rem; }

/* ---------- lazy AI skeletons ----------
   Shown only while the AI panes are actually being computed. The page itself is already
   painted by this point, so these never delay anything the owner came to read.
   Tokenised rather than the hardcoded greys in the box owner view's version, so the
   shimmer follows the surface colours instead of fighting them. */
.survey-results-page .ai-skeleton { padding: .35rem 0 .1rem; }
.survey-results-page .skeleton-line {
  height: 12px; border-radius: 4px; margin-bottom: 8px;
  background: linear-gradient(90deg,
    var(--surface-2) 25%,
    var(--surface-3) 50%,
    var(--surface-2) 75%);
  background-size: 200% 100%;
}
.survey-results-page .skeleton-line:nth-child(2) { width: 92%; }
.survey-results-page .skeleton-line:nth-child(3) { width: 78%; margin-bottom: 0; }
.survey-results-page .skeleton-animate { animation: sr-shimmer 1.5s infinite linear; }

@keyframes sr-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Respect a reduced-motion preference: keep the placeholder, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .survey-results-page .skeleton-animate { animation: none; }
}

/* ---- "your survey is live" banner ----
   Only for a relaunch that already has responses. With none, the owner empty
   state carries the news instead (Views/Survey/Results.cshtml), so this is the
   narrow case and stays a one-line strip rather than a second share card. */
.survey-live-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  margin-bottom: var(--space-4);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-md);
  background: var(--brand-50);
  color: var(--brand-700);
}
.survey-live-emoji { font-size: 18px; line-height: 1; }
.survey-live-text { flex: 1; font-size: var(--text-sm); font-weight: 600; }
.survey-live-close {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--brand-700);
  opacity: .6;
  padding: 4px;
  line-height: 1;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.survey-live-close:hover { opacity: 1; background: var(--brand-100); }