@font-face {
  font-family: "Suisse Works";
  src: url("fonts/SuisseWorks-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2010-2027, U+20AC;
}

@font-face {
  font-family: "Suisse Works";
  src: url("fonts/SuisseWorks-RegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: fallback;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2010-2027, U+20AC;
}

@font-face {
  font-family: "Suisse Neue";
  src: url("fonts/SuisseNeue-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: fallback;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2010-2027, U+20AC;
}

@font-face {
  font-family: "Suisse Screen";
  src: url("fonts/SuisseScreen-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2010-2027, U+20AC;
}

@font-face {
  font-family: "Suisse Screen";
  src: url("fonts/SuisseScreen-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: fallback;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2010-2027, U+20AC;
}

html {
  color-scheme: light dark;
}

html.dark {
  color-scheme: dark;
}

:root {
  --font-works: "Suisse Works", Georgia, "Times New Roman", serif;
  --font-neue: "Suisse Neue", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-screen: "Suisse Screen", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --text-xs: 11px;
  --text-sm: 14px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-xxl: 36px;
  --text-xxxl: 48px;
  --grayscale-charcoal: light-dark(#2f3538, #d0d4d6);
  --grayscale-gray: light-dark(#6d686e, #9a959c);
  --grayscale-beige: light-dark(#f0ece5, #6d686e);
  --bg: light-dark(#f7f5f2, #1a1a1a);
  --card: light-dark(#ffffff, #2f3538);
  --card-border: light-dark(#f0ece5, transparent);
  --surface-muted: light-dark(#f7f5f2, #363230);
  --track-bg: light-dark(#f7f5f2, #514b48);
  --code-bg: light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.08));
  --primary-magenta: #f32a52;
  --primary-pink: #fec6cc;
  --pro-gold: #c5a26d;
  --primary-black: light-dark(#000000, #ffffff);
  --btn-fg: light-dark(#ffffff, #000000);
  --ink: var(--grayscale-charcoal);
  --pink: var(--primary-magenta);
  --gold: var(--pro-gold);
  --gray: var(--grayscale-gray);
  --line: var(--grayscale-beige);
  --bar-fill: light-dark(var(--pink), rgb(243 42 82 / 0.4));
  --pip-done: light-dark(rgb(243 42 82 / 0.4), rgb(243 42 82 / 0.7));
  --opt-sel-bg: light-dark(var(--primary-pink), rgb(243 42 82 / 0.25));
}

/* Without light-dark() every token above is invalid at computed-value time, which
   drops shorthands like `border: 1px solid var(--ink)` entirely. */
@supports not (color: light-dark(#fff, #000)) {
  :root {
    --grayscale-charcoal: #2f3538;
    --grayscale-gray: #6d686e;
    --grayscale-beige: #f0ece5;
    --bg: #f7f5f2;
    --card: #ffffff;
    --card-border: #f0ece5;
    --surface-muted: #f7f5f2;
    --track-bg: #f7f5f2;
    --code-bg: rgb(0 0 0 / 0.06);
    --primary-black: #000000;
    --btn-fg: #ffffff;
    --bar-fill: var(--pink);
    --pip-done: rgb(243 42 82 / 0.4);
    --opt-sel-bg: var(--primary-pink);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --grayscale-charcoal: #d0d4d6;
      --grayscale-gray: #9a959c;
      --grayscale-beige: #6d686e;
      --bg: #1a1a1a;
      --card: #2f3538;
      --card-border: transparent;
      --surface-muted: #363230;
      --track-bg: #514b48;
      --code-bg: rgb(255 255 255 / 0.08);
      --primary-black: #ffffff;
      --btn-fg: #000000;
      --bar-fill: rgb(243 42 82 / 0.4);
      --pip-done: rgb(243 42 82 / 0.7);
      --opt-sel-bg: rgb(243 42 82 / 0.25);
    }
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-works);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.sans {
  font-family: var(--font-screen);
}

a {
  color: var(--pink);
  text-decoration: none;
}

a:hover {
  opacity: 0.8;
}

:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
}

.programmatic-focus:focus {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
}

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

/* Top bar from the Polls launch landing page (Figma "Polls Download LP", Hero > Nav): always dark,
   in both themes, with the pink glow bleeding in from the top right. */
header.site,
footer.site {
  --hero-bg: linear-gradient(157deg, #2e3034 0%, #0b0b0c 75%);
  --hero-ink: #ffffff;
  --hero-muted: #d9d6d9;
  --hero-faint: #a7a3a8;
  position: relative;
  overflow: hidden;
  background: var(--hero-bg);
  color: var(--hero-ink);
}

header.site {
  margin-bottom: 28px;
  padding: 24px 0;
}

header.site::before {
  content: "";
  position: absolute;
  top: -260px;
  right: -200px;
  width: 720px;
  height: 720px;
  background: url("pink-glow.svg") center / contain no-repeat;
  pointer-events: none;
}

header.site .inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Polls lockup: app icon plus wordmark, white text for a dark background. */
.logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  color: var(--hero-ink);
  font-family: var(--font-screen);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.logo:hover {
  opacity: 1;
}

.logo img {
  display: block;
  width: 40px;
  height: 40px;
}

header.site nav a {
  color: var(--hero-muted);
}

header.site nav a:hover {
  color: var(--hero-ink);
  opacity: 1;
}

/* The signed-in nav is wider than a phone on its own, so it wraps beside a smaller lockup. */
@media (max-width: 480px) {
  .logo {
    font-size: 14px;
  }

  .logo img {
    width: 32px;
    height: 32px;
  }

  header.site nav {
    text-align: right;
  }

  header.site nav a {
    white-space: nowrap;
  }
}

nav a {
  margin-left: 14px;
  color: var(--gray);
  font-family: var(--font-screen);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

nav a.active {
  color: var(--pink);
}

h1,
h2 {
  font-family: var(--font-works);
  font-weight: 400;
}

h1 {
  margin-bottom: 8px;
  font-size: var(--text-xxl);
  line-height: 1.2;
}

h1.hero {
  font-size: var(--text-xxxl);
}

/* "What the community thinks so far." on one line, as in the apps: --text-xxl where the column
   allows, smaller on a phone. The line is ~16.6em wide in Suisse Works; 16.8 leaves a little
   room. The column is the viewport, capped at .wrap's 640px, less its 20px padding each side. */
h1.results-heading {
  font-size: min(var(--text-xxl), calc((min(100vw, 640px) - 40px) / 16.8));
  white-space: nowrap;
}

h2 {
  margin: 24px 0 10px;
  font-size: var(--text-lg);
}

.kicker {
  margin-bottom: 6px;
  color: var(--pink);
  font-family: var(--font-screen);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.meta {
  color: var(--gray);
  font-family: var(--font-screen);
  font-size: 13px;
  font-weight: 400;
}

/* Consent note under the open-text answer box. */
.ft-note {
  margin-top: 8px;
  line-height: 1.4;
}

.lede {
  margin: 16px 0;
  color: var(--gray);
  font-size: 19px;
}

.err {
  margin-top: 8px;
  color: var(--pink);
  font-family: var(--font-screen);
  font-size: var(--text-sm);
}

.share-status {
  margin-left: 8px;
  color: var(--gold);
}

.quote {
  margin: 10px 0;
  font-family: var(--font-screen);
  border-left: 3px solid var(--gold);
  padding-left: 12px;
  font-style: italic;
}

/* "Insights from the community": the AI's themes for a written-answer question. The label
   column has a fixed width so the theme sentences line up down the card. */
.themes-kicker {
  margin-top: 4px;
}

.themes {
  margin: 8px 0 10px;
  list-style: none;
}

.themes li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 10px 0;
}

.themes li:last-child {
  border-bottom: 1px solid var(--line);
}

.share-label {
  flex: none;
  width: 48px;
  color: var(--gray);
  font-family: var(--font-screen);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.themes-foot {
  margin-bottom: 14px;
  font-size: 12px;
}

.themes-note {
  color: var(--pink);
}

.themes-toggle {
  margin: 4px 0 12px;
}

.raw-answers {
  margin: 4px 0 16px;
  font-family: var(--font-screen);
  font-size: var(--text-sm);
}

.raw-answers summary {
  color: var(--gray);
  cursor: pointer;
}

.raw-answers ul {
  margin-top: 8px;
  list-style: none;
}

.raw-answers .quote {
  margin: 6px 0;
}

.hist {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 70px;
}

.hist-bar {
  flex: 1;
  min-height: 2px;
  background: var(--pink);
}

/* The viewer's own slider value: a caret under the bar it is counted in. aria-hidden, because
   the "your answer" words in .slider-avg carry it for screen readers. */
.hist-mine {
  position: relative;
  height: 12px;
  color: var(--pink);
  font-size: 10px;
  line-height: 12px;
}

.hist-mine span {
  position: absolute;
  left: var(--at);
  transform: translateX(-50%);
}

.slider-avg {
  margin: 6px 0;
  font-family: var(--font-neue);
  font-size: 34px;
  font-weight: 500;
}

#slv {
  text-align: center;
}

.card {
  margin-bottom: 16px;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  background: var(--card);
  padding: 24px;
}

.btn {
  display: inline-block;
  border: none;
  background: var(--primary-black);
  padding: 13px 26px;
  color: var(--btn-fg);
  font-family: var(--font-screen);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
}

.btn.pink {
  background: var(--pink);
  color: #fff;
}

.btn.ghost {
  border: 1px solid var(--ink);
  background: none;
  color: var(--ink);
}

.btn:not(:disabled):hover {
  opacity: 0.8;
}

.btn:disabled {
  opacity: 0.4;
  cursor: default;
}

input[type="text"],
input[type="email"],
textarea,
select {
  width: 100%;
  border: 1px solid var(--ink);
  background: var(--card);
  padding: 12px;
  color: var(--ink);
  font-family: var(--font-works);
  font-size: 16px;
}

.opt {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
  padding: 14px 16px;
  color: var(--ink);
  font-family: var(--font-screen);
  font-size: var(--text-md);
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}

.opt:hover {
  border-color: var(--pink);
  background: var(--surface-muted);
}

.opt.sel {
  border-color: transparent;
  background: var(--opt-sel-bg);
  color: var(--ink);
}

.bar-row {
  margin-bottom: 12px;
}

.bar-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-family: var(--font-screen);
  font-size: var(--text-sm);
}

/* The viewer's own pick. A rule in the gutter plus visible words, not a background: in light
   mode --surface-muted is the page bg, and color alone would not reach a screen reader. The
   negative margin keeps this row's bar the same width as the others, so bars still compare. */
.bar-row.mine {
  margin-left: -12px;
  border-left: 3px solid var(--pink);
  padding-left: 9px;
}

.bar-row.mine .bar-label > span:first-child {
  font-weight: 700;
}

.mine-tag {
  color: var(--gray);
  font-weight: 400;
}

.bar-track {
  position: relative;
  height: 22px;
  background: var(--track-bg);
}

.bar-fill {
  height: 22px;
  background: var(--bar-fill);
}

.bar-fill.win {
  background: var(--ink);
}

.pct {
  font-family: var(--font-screen);
  font-size: 13px;
  font-weight: 700;
}

.progress {
  display: flex;
  gap: 6px;
  margin: 18px 0;
}

.progress span {
  flex: 1;
  height: 4px;
  background: var(--line);
}

.progress span.done {
  background: var(--pip-done);
}

.progress span.current {
  background: var(--pink);
}

/* Bottom band from the landing page's closing section (Figma "Final CTA"), plus the site links. */
footer.site {
  margin-top: 0;
  padding: 72px 0 32px;
  font-family: var(--font-screen);
  text-align: center;
}

footer.site .inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 56px;
}

.footer-icon {
  width: 72px;
  height: 72px;
}

.footer-headline {
  margin: 0;
  font-family: var(--font-screen);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.6px;
}

/* The tagline is 10px smaller than the headline at every breakpoint. */
.footer-headline span {
  color: var(--pink);
  font-size: calc(1em - 10px);
}

.footer-sub {
  max-width: 480px;
  margin: 0;
  color: var(--hero-muted);
  font-size: 18px;
  line-height: 1.5;
}

.app-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
}

.app-badge {
  display: block;
  width: max-content;
}

.app-badge img {
  display: block;
  width: auto;
  height: 40px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 8px;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  padding-top: 24px;
  font-size: var(--text-sm);
}

/* Undo the header's `nav a` tab style. */
.footer-links a {
  margin-left: 0;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hero-muted);
  text-decoration: underline;
  text-decoration-color: var(--hero-faint);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.footer-links a:hover {
  opacity: 1;
  color: var(--hero-ink);
  text-decoration-color: currentColor;
}

/* A thin rule between links; it wraps away with the link at the start of a line. */
.footer-links a + a::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.9em;
  margin: 0 14px;
  vertical-align: -0.1em;
  background: var(--hero-faint);
  opacity: 0.5;
}

@media (max-width: 480px) {
  footer.site {
    padding-top: 56px;
  }

  .footer-icon {
    width: 64px;
    height: 64px;
  }

  .footer-headline {
    font-size: 28px;
    letter-spacing: -0.4px;
  }

  .footer-sub {
    font-size: 16px;
  }
}

.tag {
  display: inline-block;
  margin-left: 8px;
  background: var(--gold);
  padding: 3px 8px;
  color: #fff;
  font-family: var(--font-screen);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  vertical-align: middle;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--pink);
}

table.adm {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-screen);
  font-size: 12px;
}

table.adm th,
table.adm td {
  border: 1px solid var(--line);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}

table.adm th {
  background: var(--surface-muted);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.msg-user,
.msg-assistant {
  margin-bottom: 10px;
  padding: 14px 16px;
  border-radius: 4px;
}

.msg-user {
  margin-left: 40px;
  background: var(--primary-black);
  color: var(--btn-fg);
}

.msg-assistant {
  margin-right: 40px;
  border: 1px solid var(--line);
  background: var(--card);
}

.msg-user div {
  white-space: pre-wrap;
}

#msgs a {
  color: var(--pink);
}

#msgs strong {
  font-weight: 700;
}

#msgs em {
  font-style: italic;
}

#msgs ul,
#msgs ol {
  margin: 8px 0 8px 20px;
  padding: 0;
}

#msgs li {
  margin-bottom: 4px;
}

#msgs p {
  margin: 0 0 10px;
}

#msgs p:last-child {
  margin-bottom: 0;
}

#msgs code {
  background: var(--code-bg);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.92em;
}

#msgs pre {
  background: var(--code-bg);
  padding: 10px;
  border-radius: 6px;
  overflow-x: auto;
}

@media (prefers-reduced-motion: no-preference) {
  a,
  .btn,
  .opt {
    transition:
      background-color 150ms ease-out,
      border-color 150ms ease-out,
      color 150ms ease-out,
      opacity 150ms ease-out;
  }

  #qbox > .card {
    animation: q-in 260ms ease-out both;
  }

  #qbox > .card.q-exit {
    animation: q-out 160ms ease-in both;
  }

  @keyframes q-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  @keyframes q-out {
    to {
      opacity: 0;
      transform: translateY(-6px);
    }
  }

  .progress span {
    transition: background-color 200ms ease-out;
  }

  /* Results bars draw in once, as each card scrolls into view: choice bars grow from the left,
     histogram bars rise from the baseline, each a beat after the one before (--i, its index), then
     the viewer's caret fades in under the finished histogram. _results.html marks a card .in-view
     and sets --card-delay so cards arriving together play in turn. Without that script nothing
     here matches and the bars are static. Transforms only, so nothing reflows and the labels,
     which carry the numbers, are on screen from the start. Reader cards only: /admin reloads
     often. */
  article.card .bar-fill {
    transform-origin: left;
  }

  article.card .hist-bar {
    transform-origin: bottom;
  }

  article.card.in-view .bar-fill {
    animation: bar-grow 420ms ease-out both;
    animation-delay: calc(var(--card-delay, 0ms) + var(--i, 0) * 40ms);
  }

  article.card.in-view .hist-bar {
    animation: hist-rise 420ms ease-out both;
    animation-delay: calc(var(--card-delay, 0ms) + min(var(--i, 0) * 15ms, 240ms));
  }

  /* Opacity only: the span's own transform centres it on the bar. 560ms is the last of ten bars
     finishing (9 x 15ms + 420ms). */
  article.card.in-view .hist-mine span {
    animation: fade-in 200ms ease-out both;
    animation-delay: calc(var(--card-delay, 0ms) + 560ms);
  }

  /* Once the script has armed the page, a card not yet seen holds its bars at the animations'
     first frame. Screen only, so a printout shows every bar. */
  @media screen {
    .reveal-results article.card:not(.in-view) .bar-fill {
      transform: scaleX(0);
    }

    .reveal-results article.card:not(.in-view) .hist-bar {
      transform: scaleY(0);
    }

    .reveal-results article.card:not(.in-view) .hist-mine span {
      opacity: 0;
    }
  }

  @keyframes bar-grow {
    from {
      transform: scaleX(0);
    }
  }

  @keyframes hist-rise {
    from {
      transform: scaleY(0);
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }
  }
}