/* Survey.cool - shared shell. Tokens first, everything else by role.

   The look comes out of the logo: a block of ice. Cold neutrals instead of
   warm grey, the mark's own cyan-to-azure ramp for every accent, surfaces lit
   along the top edge the way ice catches light, and a slow wash of cold air
   sitting behind the page. */

/* Self-hosted: no third party learns who visited, and the type is same-origin
   and preloaded so it does not arrive late enough to shift the page. Space
   Grotesk carries anything meant to look engineered - headings, numbers,
   buttons, labels. Inter carries everything meant to be read. The latin-ext
   files only download if a page actually contains those characters. */
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('./fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('./fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'InterVar'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('./fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'InterVar'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('./fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * If a woff2 ever does arrive after the first paint, the text that was already
 * drawn must not move when it swaps in. These two faces are the local
 * Arial-metric fonts, stretched to the exact proportions of the real ones:
 * the ratios were measured in a browser (Inter renders 1.061x Arial's width,
 * Space Grotesk 1.013x), the ascent and descent come from the files' own hhea
 * tables, divided by that same stretch. Anything that is not Arial-metric
 * falls through to the rest of the stack and is simply unadjusted.
 */
@font-face {
  font-family: 'InterFallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans'), local('Arimo');
  size-adjust: 106.1%; ascent-override: 91.3%; descent-override: 22.7%; line-gap-override: 0%;
}
@font-face {
  font-family: 'GroteskFallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans'), local('Arimo');
  size-adjust: 101.3%; ascent-override: 97.1%; descent-override: 28.8%; line-gap-override: 0%;
}

:root {
  color-scheme: light;
  /* Daylight on ice. */
  --bg: #edf3f8;
  --surface: #ffffff;
  --surface-2: #f1f6fb;
  --line: #dbe6f0;
  --line-strong: #bdd1e1;
  --text: #06182a;
  --text-2: #3d5568;
  --muted: #586e80;  /* AA on every surface it lands on, wash included */
  --accent: #0069e8;
  --accent-strong: #00419c;
  --accent-wash: #e2effd;
  --frost: #43bdf9;
  /* The ".cool" in the wordmark. Deep enough to clear AA as text on every
     surface it lands on, while still reading as ice rather than navy. */
  --ice-ink: #0b7396;
  /* The boundary of a control -- an input, a radio, a scale step -- which is
     often the only thing saying a control is there, so WCAG 1.4.11 asks for
     3:1 against what is behind it. Separate from --line, which is a card's
     own decorative edge and has no such job. */
  --control-edge: #7e96ab;
  --good: #06795a;
  --danger: #bf2436;
  /* The lit top edge of a surface, and the button's own gradient. */
  --edge: rgba(255, 255, 255, .95);
  --on-accent: #ffffff;
  --btn-top: #2a90f2;
  --btn-bot: #0062e0;
  /* The two washes of cold air behind the page, and how much grain sits over it. */
  --air-1: rgba(58, 169, 245, .22);
  --air-2: rgba(0, 105, 232, .13);
  --grain: .022;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(6, 34, 66, .06), 0 10px 30px rgba(6, 34, 66, .07);
  --glow: 0 6px 22px rgba(0, 105, 232, .26);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: 'InterVar', 'InterFallback', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: 'Space Grotesk', 'GroteskFallback', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Deep ice: the same cube, lit from inside, at night. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #05090f;
    --surface: #0d1621;
    --surface-2: #142132;
    --line: #1d2c3d;
    --line-strong: #2c4256;
    --text: #e9f4fc;
    --text-2: #a5bdd2;
    --muted: #7691a8;
    --accent: #3fbdf9;
    --accent-strong: #9adcfd;
    --accent-wash: #0c2537;
    --frost: #8fe0fb;
    --ice-ink: #6fd2fb;
  --control-edge: #7d93ab;
    --good: #35c08c;
    --danger: #ff7f7f;
    --edge: rgba(180, 230, 255, .11);
    --on-accent: #04192a;
    --btn-top: #7fd6ff;
    --btn-bot: #2fb0f2;
    --air-1: rgba(63, 189, 249, .22);
    --air-2: rgba(0, 90, 226, .20);
    --grain: .03;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 38px rgba(0, 0, 0, .45);
    --glow: 0 6px 24px rgba(63, 189, 249, .3);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #05090f;
  --surface: #0d1621;
  --surface-2: #142132;
  --line: #1d2c3d;
  --line-strong: #2c4256;
  --text: #e9f4fc;
  --text-2: #a5bdd2;
  --muted: #7691a8;
  --accent: #3fbdf9;
  --accent-strong: #9adcfd;
  --accent-wash: #0c2537;
  --frost: #8fe0fb;
  --ice-ink: #6fd2fb;
  --control-edge: #7d93ab;
  --good: #35c08c;
  --danger: #ff7f7f;
  --edge: rgba(180, 230, 255, .11);
  --on-accent: #04192a;
  --btn-top: #7fd6ff;
  --btn-bot: #2fb0f2;
  --air-1: rgba(63, 189, 249, .22);
  --air-2: rgba(0, 90, 226, .20);
  --grain: .03;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 38px rgba(0, 0, 0, .45);
  --glow: 0 6px 24px rgba(63, 189, 249, .3);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* The page colour lives on html so body's two fixed layers can sit above the
   canvas and below everything else. */
html { background: var(--bg); }

body {
  margin: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Cold air: two wide washes off the top corners, fixed so they do not scroll
   away and the page never reads as a flat slab. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(58% 44% at 8% -10%, var(--air-1), transparent 68%),
    radial-gradient(54% 42% at 95% -6%, var(--air-2), transparent 70%);
}

/* A breath of grain over the whole page, so gradients never band and the
   surface has a texture rather than a finish. Felt, not seen. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url('./frost.png');
  background-size: 128px 128px;
  opacity: var(--grain);
}

a { color: var(--accent); text-underline-offset: 2px; }

::selection { background: color-mix(in srgb, var(--frost) 40%, transparent); color: var(--text); }

h1, h2, h3 {
  font-family: var(--display);
  line-height: 1.16; margin: 0; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
h1 { font-size: clamp(1.85rem, 1.2rem + 2.2vw, 2.7rem); font-weight: 700; letter-spacing: -.035em; }
h2 { font-size: 1.32rem; font-weight: 600; }
h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -.015em; }

p { margin: 0 0 1rem; }
.lede { color: var(--text-2); font-size: 1.05rem; max-width: 41rem; }
.muted { color: var(--muted); font-size: .88rem; }
.small { font-size: .86rem; color: var(--text-2); }

/* ---------------------------------------------------------------- layout */

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 820px; }
.wrap.wide { max-width: 1340px; }

header.site {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  backdrop-filter: saturate(170%) blur(14px);
  -webkit-backdrop-filter: saturate(170%) blur(14px);
}
/* A hairline that fades out at both ends instead of ruling the full width -
   the one detail that stops the shell reading as a default template. */
header.site::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
}
header.site .bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 4px;
  min-height: 58px; max-width: 1120px; margin: 0 auto; padding: 9px 16px;
}
/* The name, set once. Anywhere Survey.cool is written it is this markup, so
   the ".cool" is always the same ice and the letterfit never drifts. */
.wordmark { font-family: var(--display); font-weight: 700; letter-spacing: -.035em; }
.wordmark .tld { color: var(--ice-ink); }

/* Mark plus name. Every measurement is in em, so the same markup is the header
   brand at one size and the hero lockup at another, and the flight between the
   two is a single scale factor rather than a pile of tweens. */
.lockup { display: inline-flex; align-items: center; gap: .35em; line-height: 1; }
.lockup-mark { flex: 0 0 auto; display: block; width: 1.58em; height: 1.58em; }

.brand { text-decoration: none; color: var(--text); font-size: 1.04rem; }
.brand-mark { transition: transform .5s cubic-bezier(.2, .8, .3, 1); }
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); }
.brand svg { display: block; }
nav.site-nav { margin-left: auto; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
nav.site-nav a {
  color: var(--text-2); text-decoration: none; font-size: .88rem;
  font-family: var(--display); font-weight: 500; letter-spacing: -.01em;
  padding: 7px 12px; border-radius: 999px;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
nav.site-nav a:hover { background: var(--surface-2); color: var(--text); }
nav.site-nav a[aria-current="page"] {
  background: var(--accent-wash); color: var(--accent-strong);
  box-shadow: inset 0 1px 0 var(--edge);
}
.tight-list { margin: 12px 0 0; padding-left: 20px; font-size: .89rem; color: var(--text-2); line-height: 1.75; }
.tight-list li { margin-bottom: 5px; }
/*
 * The header names the three tools directly, in the order a survey goes
 * through them, rather than hiding them in a menu: there are only three, and
 * a menu that has to be opened to discover the Review page exists was the
 * main reason people asked where their results went. About is the technical
 * page and lives in the footer. On a phone the wordmark gives up its text to
 * the mark alone, so the whole row fits on one line.
 */
@media (max-width: 520px) { header.site .brand-text { display: none; } }

/* ------------------------------------------------------------- front door */

/* Ice light behind the opening lines: a cold bloom, and a horizon hairline
   under it that fades out at both ends. */
.halo { position: relative; margin-bottom: 30px; }
.halo::before {
  /* Stays inside the element: bleeding sideways would widen the page on phones. */
  content: ""; position: absolute; inset: -52px 0 0;
  background: radial-gradient(76% 120% at 50% 0%,
    color-mix(in srgb, var(--frost) 26%, transparent), transparent 66%);
  pointer-events: none; z-index: -1;
}
.hero.center { text-align: center; padding: 40px 0 16px; }
.hero.center h1 {
  font-size: clamp(2.2rem, 1.1rem + 4.6vw, 4rem);
  letter-spacing: -.045em; font-weight: 700; line-height: 1.02;
}
/* One word carved out of the logo's own ramp. */
.hero.center h1 .ice {
  background: linear-gradient(112deg, var(--frost), var(--accent) 62%, var(--accent-strong));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.hero.center .lede { margin: 18px auto 0; max-width: 32rem; font-size: 1.08rem; }

/*
 * The page signs itself: the mark and the name, once, big, in the middle of
 * the hero. As you scroll it is this element that travels up to the header and
 * becomes the brand there - see assets/home-hero.js. While it travels it rides
 * above the bar, so it lands on top rather than sliding under.
 */
.hero-lockup {
  /*
   * Below the header while it sits still. The Get Started menu can only ever
   * reach z-index 30, because it is trapped inside the header's own stacking
   * context, so a lockup at 40 would outrank the whole bar and cover the menu.
   * It is lifted above the bar only while it is actually travelling, which is
   * the one moment it needs to pass over the background rather than under it.
   */
  position: relative; z-index: 1;
  width: max-content; max-width: 100%; margin: 0 auto 24px;
  font-size: clamp(1.75rem, .9rem + 3.2vw, 2.9rem);
  color: var(--text);
  transform-origin: 0 0;
}
html.home.lockup-flying .hero-lockup { z-index: 40; }

.hero-lockup .lockup-mark {
  filter: drop-shadow(0 8px 22px color-mix(in srgb, var(--accent) 42%, transparent));
}

/* At the top of the front door the bar is bare: no background, no hairline,
   no nav, and no brand, because the brand is still down in the hero. */
/* With the bar transparent at rest, the hero can start lower down: it gives
   the page air and gives the lockup a flight long enough to read as one. */
html.home .hero.center { padding-top: clamp(54px, 10vh, 124px); }

/* The default lives on the same element the script writes to, so the inline
   value wins; declared on the header it would shadow what is inherited. */
html.home { --navp: 0; }
html.home header.site { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.home header.site::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  backdrop-filter: saturate(170%) blur(14px);
  -webkit-backdrop-filter: saturate(170%) blur(14px);
  opacity: var(--navp);
}
html.home header.site::after { opacity: var(--navp); }
/*
 * Only the name waits. About, Get Started and the theme switch are there from
 * the first frame on every page, the front door included: they are the way out
 * of a page, and hiding the way out to make an entrance is a poor trade.
 *
 * Exactly one of the two lockups is on screen, and at the hand-off they are
 * the same pixels, so the swap cannot be seen.
 */
html.home header.site .brand { visibility: hidden; }
html.home.lockup-landed header.site .brand { visibility: visible; }
html.home.lockup-landed .hero-lockup { visibility: hidden; }

.doors { display: grid; gap: 16px; }
@media (min-width: 760px) { .doors { grid-template-columns: 1fr 1fr; } }
/* The front page's three, in the order a survey goes through them. */
@media (min-width: 900px) { .doors.three { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) and (max-width: 899px) { .doors.three > :last-child { grid-column: 1 / -1; } }
.door {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px 24px;
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), border-color .18s ease, box-shadow .18s ease;
}
/* A band of light sweeps across the face on hover, the way it runs over ice
   when you turn it. Parked off to the left until then. */
.door::after {
  content: ""; position: absolute; top: -60%; bottom: -60%; left: -75%; width: 46%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--frost) 20%, transparent), transparent);
  transform: skewX(-14deg); pointer-events: none;
  transition: left .62s cubic-bezier(.3, .7, .3, 1);
}
.door:hover::after, .door:focus-visible::after { left: 125%; }
.door:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: inset 0 1px 0 var(--edge), var(--shadow), var(--glow);
}
@media (prefers-reduced-motion: reduce) {
  .door, .door::after { transition: none; }
  .door:hover { transform: none; }
  .door:hover::after, .door:focus-visible::after { left: -75%; }
}
.door:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.door.primary { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-wash); }
.door-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 13px; margin-bottom: 15px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--frost) 30%, transparent),
    color-mix(in srgb, var(--accent) 16%, transparent));
  box-shadow: inset 0 1px 0 var(--edge);
  color: var(--accent-strong);
}
.door .who {
  font-family: var(--display); font-size: .71rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.door h2 { font-size: 1.42rem; margin-bottom: 9px; letter-spacing: -.03em; }
.door p { font-size: .93rem; color: var(--text-2); margin: 0 0 18px; }
.door-go {
  margin-top: auto; font-family: var(--display); font-size: .9rem; font-weight: 600;
  color: var(--accent-strong);
}
.door:hover .door-go { color: var(--accent); }

/* Three short claims under the headline, in place of three paragraphs. */
.claims {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
}
.claims li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .86rem; color: var(--text-2);
  padding: 6px 14px 6px 11px; border-radius: 999px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--frost) 10%, transparent), transparent),
              color-mix(in srgb, var(--surface) 70%, transparent);
  box-shadow: inset 0 1px 0 var(--edge);
  backdrop-filter: blur(6px);
}
.claims li::before {
  content: ""; flex: 0 0 auto; width: 14px; height: 14px;
  background: var(--accent);
  -webkit-mask: no-repeat center/14px url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9.6 17.2 4.4 12l1.6-1.6 3.6 3.6 8-8L19.2 7.6z"/></svg>');
  mask: no-repeat center/14px url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9.6 17.2 4.4 12l1.6-1.6 3.6 3.6 8-8L19.2 7.6z"/></svg>');
}

/*
 * A disclosure. Detail that a casual reader does not need is one click away
 * rather than on the page, which is the only honest way to keep a page short
 * without deleting things somebody will eventually want.
 */
.more { margin: 0 0 30px; }
.more > summary {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  color: var(--accent-strong);
  padding: 13px 17px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--edge);
  transition: border-color .14s ease, background .14s ease;
}
.more > summary::-webkit-details-marker { display: none; }
/* A chevron drawn from two borders: right-pointing closed, down when open. */
.more > summary::before {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-left: 3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transform-origin: 60% 60%;
  transition: transform .18s ease;
}
.more[open] > summary::before { transform: rotate(45deg); }
.more > summary:hover { background: var(--surface-2); border-color: var(--line-strong); }
.more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.more-body { padding-top: 14px; }
.more-body > .card:last-child, .more-body > .cols:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .more > summary::before { transition: none; } }

/*
 * The same idea at the scale of one heading.
 *
 * Most explanation on this site is read once and never again: what a response
 * link is, where answers are kept, why a file has to be downloaded. Left on
 * the page it is wall after wall of text around the two or three controls that
 * actually do something. So the heading becomes the button, the explanation
 * lives behind it, and a small "i" says there is something to open.
 *
 * It is a <details>, which means it works with no JavaScript, is a button to a
 * screen reader with its open state announced, and is searchable in-page by
 * the browser (Chromium expands a closed <details> to show a find-in-page
 * match; others do not, which is a trade for not reimplementing a disclosure
 * in script).
 */
.tip { margin: 0; }
.tip > summary {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  cursor: pointer; list-style: none;
  border-radius: 10px;
}
.tip > summary::-webkit-details-marker { display: none; }
/*
 * The chip takes its size from the summary rather than from the heading inside
 * it, so one "i" is the same 18px beside a hero h1 and beside a small label.
 * It is an affordance, not a title: it should not grow with the type.
 */
.tip > summary::after {
  content: "i";
  flex: 0 0 auto;
  width: 18px; height: 18px;
  font: italic 600 11px/18px var(--display);
  text-align: center;
  color: var(--accent-strong);
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 999px;
  transition: background .14s ease, color .14s ease;
}
.tip[open] > summary::after {
  color: var(--on-accent);
  background: var(--accent);
  border-color: transparent;
}
.tip > summary:hover::after { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.tip > summary:hover > h1, .tip > summary:hover > h2, .tip > summary:hover > h3 {
  color: var(--accent-strong);
}
.tip > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tip-body { padding-top: 9px; }
.tip-body > :last-child { margin-bottom: 0; }

/* Where there is no heading to hang it on, the summary is its own small label:
   a question somebody might actually have, rather than the word "Help". */
.tip.quiet > summary {
  font-family: var(--display); font-weight: 600; font-size: .84rem;
  color: var(--accent-strong);
  width: max-content; max-width: 100%;
  padding: 2px 0;
}
.tip.quiet > summary:hover { color: var(--accent); }
.tip.ends-tip { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .tip > summary::after { transition: none; } }

/*
 * The three views of the Record page, which installed on a phone is the whole
 * app. Pills rather than underlined words, matching the Android build's own
 * tab bar: the view you are in is a filled shape, so there is never a question
 * which one is live.
 */
.view-tabs {
  display: flex; gap: 3px; flex-wrap: wrap;
  margin-top: 16px; padding: 5px;
  width: max-content; max-width: 100%;
  border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--edge);
}
.view-tab {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid transparent; background: none; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: .86rem;
  color: var(--text-2);
  padding: 8px 15px; border-radius: 999px;
  transition: background .14s ease, color .14s ease;
}
.view-tab:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.view-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.view-tab[aria-current="page"] {
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--btn-top), var(--btn-bot));
  border-color: color-mix(in srgb, var(--accent-strong) 55%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 34%, transparent);
}
.tab-count {
  font-variant-numeric: tabular-nums; font-size: .78rem; line-height: 1;
  padding: 3px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-strong);
}
.view-tab[aria-current="page"] .tab-count {
  background: color-mix(in srgb, #fff 26%, transparent); color: var(--on-accent);
}
@media (prefers-reduced-motion: reduce) { .view-tab { transition: none; } }

/*
 * One saved response per row: what it says, when it was taken, and the three
 * things anybody wants to do with it. The buttons wrap under the text on a
 * phone rather than squeezing it to nothing.
 */
/* The survey page's own title block. */
.card.survey-bar { padding-bottom: 14px; }

/*
 * Inside somebody else's page.
 *
 * No page furniture, no air wash behind it and no grain: those belong to
 * survey.cool, and this is a guest. The background is transparent so the code
 * takes the colour of whatever it is dropped into, which is the single thing
 * that makes an embed look like it belongs rather than like a box.
 */
html.embedded, html.embedded body { background: transparent; }
html.embedded body::before, html.embedded body::after { content: none; }
.embed-body { min-height: 0; }
.embed-wrap { max-width: 44rem; margin: 0 auto; padding: 4px 4px 0; }
.embed-card {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--edge);
  padding: 20px;
}
.embed-title { font-size: 1.3rem; font-weight: 600; }
.embed-card h2 { font-size: 1.15rem; }
.embed-by { margin: 10px 0 4px; text-align: right; font-size: .74rem; }
.embed-by a { color: var(--muted); text-decoration: none; }
.embed-by a:hover { color: var(--accent-strong); }

/* The QR code in its dialog: white behind it whatever the theme, because a
   code on a dark background is a code half the readers in the world refuse. */
/* The Share dialog: one tab per way of handing the survey over. */
.share-tabs { margin: 0 0 16px; }
.share-panel { min-height: 120px; }
.share-lede { margin: 0 0 12px; color: var(--text-2); }
.file-summary { margin: 0; }
.qr-holder {
  display: flex; justify-content: center;
  padding: 16px; border-radius: var(--radius);
  background: #ffffff; border: 1px solid var(--line);
}
.qr-holder > svg { width: min(100%, 320px); height: auto; display: block; }
.snippet { height: 92px; min-height: 92px; white-space: pre; }
@media (max-width: 480px) { .embed-card { padding: 16px; } }

.rec-list { margin-top: 16px; display: grid; gap: 8px; }
.rec-row {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.rec-main { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rec-main b { font-weight: 600; overflow-wrap: anywhere; }
.rec-meta {
  font-size: .8rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rec-btns { flex: 0 0 auto; gap: 6px; }
.rec-detail {
  flex: 1 1 100%; margin: 4px 0 0; padding-top: 11px;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; gap: 6px 14px;
  font-size: .86rem;
}
.rec-detail dt { color: var(--muted); overflow-wrap: anywhere; }
.rec-detail dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 460px) {
  .rec-detail { grid-template-columns: 1fr; gap: 2px; }
  .rec-detail dd { margin-bottom: 8px; }
}

/* The two ways onto a phone, side by side in one card. The auto margin pushes
   both buttons to the bottom so they line up however long the lists above
   them run; stacked on a narrow screen it simply does nothing. */
.pick-side { position: relative; display: flex; flex-direction: column; }
.pick-side h3 { margin-bottom: 9px; }
.pick-side > .btn-row { margin-top: auto; }
.pick-side .tight-list { margin-top: 10px; }

/*
 * A rule between the two options, so no line of text is ambiguous about which
 * one it describes. Side by side it stands up between the columns; stacked in
 * one column on a phone it runs across instead.
 *
 * Solid, unlike the hairlines under the header and over the footer, which fade
 * out at their ends. Faded, this one was easy to miss, and a divider nobody
 * notices is not doing its job.
 *
 * .grid.pick-split is qualified on purpose: unqualified it ties with .grid on
 * specificity and loses on source order, leaving the gap in place, which puts
 * the rule half a gap off the true midpoint.
 */
.grid.pick-split { gap: 0; }
.pick-split > .pick-side + .pick-side { margin-top: 20px; padding-top: 20px; }
.pick-split > .pick-side + .pick-side::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--line-strong);
}
@media (min-width: 720px) {
  /* Each side is inset by the same amount instead of sharing a gap, so the two
     columns stay equal and the rule lands exactly between them. */
  .pick-split > .pick-side:first-child { padding-right: 28px; }
  .pick-split > .pick-side + .pick-side { margin-top: 0; padding-top: 0; padding-left: 28px; }
  .pick-split > .pick-side + .pick-side::before {
    right: auto; top: 0; bottom: 0; height: auto; width: 1px;
  }
}

.steps-list { margin: 12px 0 0; padding-left: 20px; font-size: .92rem; color: var(--text-2); line-height: 1.9; }
.steps-list strong { color: var(--text); }

/* Three steps across, each carrying its number as an ornament rather than a
   bullet - a stack of identical cards is what makes a page look unconsidered. */
.steps { display: grid; gap: 14px; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 56px 18px 20px; min-height: 104px;
}
.step-n {
  position: absolute; top: -4px; right: 12px;
  font-family: var(--display); font-size: 4.2rem; font-weight: 700; line-height: 1;
  color: color-mix(in srgb, var(--accent) 17%, transparent);
  letter-spacing: -.05em; pointer-events: none;
}
.step p { position: relative; margin: 0; font-size: .93rem; color: var(--text-2); }
.step strong { color: var(--text); font-weight: 600; }

.mini-grid { display: grid; gap: 10px; }
@media (min-width: 640px) { .mini-grid { grid-template-columns: 1fr 1fr; } }
.mini {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px;
  background: var(--surface-2);
  transition: border-color .14s ease, background .14s ease;
}
.mini:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.mini h3 {
  flex: 1 1 150px; font-family: var(--display); font-size: .95rem; font-weight: 600;
  letter-spacing: -.02em;
}

/* A dot of real colour on a page that is otherwise all one temperature. Sized
   and nudged so it sits on the text's baseline rather than floating above it. */
.emoji, .pick-emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.05em; line-height: 1; margin-right: .5em;
  position: relative; top: .06em;
}
.mini .btn-row { gap: 6px; }
/* The record page lists a survey as a block: its title, what is held on the
   device, then the buttons. The row .mini was built for -- a title and a
   button on one line -- has nowhere to put that middle line. */
.mini.col { flex-direction: column; align-items: stretch; gap: 0; }
.mini.col h3 { flex: 0 0 auto; }

/* The response count on a launcher row is itself the way into the responses:
   somebody tapping "3 responses" is asking to see them. A real link, so it
   can be opened in a new tab like anything else, but underlined only on
   hover -- in a grid of rows, permanent underlines turn the list into noise. */
.held-count { color: var(--accent-strong); text-decoration: none; font-weight: 600; }
.held-count:hover { text-decoration: underline; }
.held-count.muted { color: var(--muted); font-weight: 400; }

.link-field {
  width: 100%; margin-top: 4px; font-family: var(--mono); font-size: .78rem;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-2);
}
#link-out:empty { display: none; }

main { padding: 28px 0 72px; }
section { margin: 0 0 30px; }
.stack > * + * { margin-top: 14px; }

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

/* Ice. Every raised surface takes a faint cold gradient down from the top and
   a single lit pixel along its upper edge, the way a block of ice catches the
   light on its top face. One rule, so the whole product is lit the same way. */
.card, .door, .kpi, .step, .modal, .chart-tip {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--frost) 7%, transparent), transparent 112px);
  box-shadow: inset 0 1px 0 var(--edge), var(--shadow);
}
/* The repeating pieces get the lit edge but not the shadow: a builder page is
   twenty of these, and twenty shadows is soup. */
.q-item, .mini, .rule-box, .pick, .file-chip, .dropzone {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--frost) 5%, transparent), transparent 84px);
  box-shadow: inset 0 1px 0 var(--edge);
}
.card + .card { margin-top: 14px; }
.card h2 + .lede, .card h2 + .small { margin-top: 6px; }

.grid { display: grid; gap: 14px; }
/* Grid gap does the spacing; the stacked-card margin would offset every cell
   after the first inside its own track. */
.grid > .card + .card { margin-top: 0; }
@media (min-width: 720px) { .grid.two { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------- controls */

/* Lit from the top like the surfaces, with the cold glow only on hover, so a
   row of buttons stays quiet until you reach for one. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-family: var(--display); font-weight: 600; font-size: .92rem;
  letter-spacing: -.01em;
  padding: 10px 17px; border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--btn-top), var(--btn-bot));
  color: var(--on-accent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 34%, transparent);
  cursor: pointer; text-decoration: none;
  transition: filter .12s ease, background .12s ease, box-shadow .16s ease, border-color .12s ease;
}
.btn:hover { filter: brightness(1.05); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 34%, transparent), var(--glow); }
.btn:active { filter: brightness(.95); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 34%, transparent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.secondary {
  background: var(--surface); color: var(--accent); border-color: var(--line-strong);
  box-shadow: inset 0 1px 0 var(--edge);
}
.btn.secondary:hover {
  background: var(--surface-2); border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong));
  box-shadow: inset 0 1px 0 var(--edge), 0 0 0 3px color-mix(in srgb, var(--accent) 11%, transparent);
}
.btn.ghost { background: transparent; color: var(--text-2); border-color: var(--line); box-shadow: none; }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--line-strong); box-shadow: none; }
.btn.danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); box-shadow: none; }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.btn.small { padding: 6px 12px; font-size: .82rem; }
.btn.ghost.small { font-variant-numeric: tabular-nums; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Not label.field: the style picker is a div, because a <label> wrapping
   buttons would fire the first one whenever its text was clicked. */
.field { display: block; margin-bottom: 12px; }
.field > span {
  display: block; font-family: var(--display); font-size: .78rem; font-weight: 600;
  color: var(--text-2); margin-bottom: 5px; letter-spacing: .01em;
}
/* Everything typed into, by exclusion, so a new input type is never missed.
   A colour well is not typed into: left in, it stretches to 100% and the row
   around it falls off the side of the card. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]), textarea, select {
  width: 100%; font: inherit; font-size: .95rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 9px 11px;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent);
}
textarea { resize: vertical; min-height: 88px; font-family: var(--mono); font-size: .85rem; line-height: 1.5; }
.check { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--text); cursor: pointer; }
.check input { width: auto; accent-color: var(--accent); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display); font-size: .72rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent-strong);
  box-shadow: inset 0 1px 0 var(--edge);
}
.pill.grayed { background: var(--surface-2); color: var(--muted); }

.dropzone {
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius);
  padding: 34px 20px; text-align: center; background: var(--surface-2);
  transition: border-color .15s ease, background .15s ease;
}
.dropzone.over { border-color: var(--accent); background: var(--accent-wash); }

.notice { border-radius: var(--radius-sm); padding: 11px 13px; font-size: .9rem; border: 1px solid; }
.notice.err { background: color-mix(in srgb, var(--danger) 8%, transparent); border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); color: var(--danger); }
.notice.ok { background: color-mix(in srgb, var(--good) 9%, transparent); border-color: color-mix(in srgb, var(--good) 30%, var(--line)); color: var(--good); }
.notice.info { background: var(--surface-2); border-color: var(--line); color: var(--text-2); }

table.data { width: 100%; border-collapse: collapse; font-size: .87rem; }
table.data th, table.data td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data th {
  color: var(--muted); font-family: var(--display); font-weight: 600; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .09em;
  position: sticky; top: 0; background: var(--surface);
}
table.data td { font-variant-numeric: tabular-nums; }
table.data tbody tr:hover { background: var(--surface-2); }
.table-scroll { overflow: auto; max-height: 460px; border: 1px solid var(--line); border-radius: var(--radius-sm); }

.theme-toggle, .palette-btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.theme-toggle:hover, .palette-btn:hover { background: var(--surface-2); color: var(--text); }
.palette-btn svg { display: block; }
nav.site-nav .palette-btn { margin-left: 4px; }

@media (max-width: 640px) {
  header.site .bar {
    padding: calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right))
             8px calc(12px + env(safe-area-inset-left));
    gap: 8px;
  }
  .brand { font-size: .95rem; }
  nav.site-nav a { padding: 6px 9px; font-size: .84rem; }
  .theme-toggle, .palette-btn { width: 30px; height: 30px; }
}
@media (max-width: 430px) {
  .brand { font-size: .94rem; }
  nav.site-nav { gap: 2px; }
  nav.site-nav a { padding: 6px 7px; font-size: .8rem; }
}

/* The footer's links sit on the page colour rather than on a card, where the
   plain accent is a hair under AA; the deeper stop clears it easily. */
footer.site a { color: var(--accent-strong); }
footer.site {
  position: relative; padding: 28px 0; color: var(--muted); font-size: .85rem;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent) 1;
}

/* Cold scrollbars, so the chrome around the page matches the page. */
* { scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  .brand:hover .brand-mark { transform: none; }
}

/*
 * Installed on a phone, the page is told to paint under the notch and the home
 * indicator (viewport-fit=cover in every head), so the chrome has to hold its
 * own content clear of them. Every env() here is 0 in a browser tab and on a
 * desktop, so these rules cost nothing anywhere else.
 */
header.site .bar {
  padding-top: calc(9px + env(safe-area-inset-top));
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
}
.wrap {
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
}
main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
footer.site { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
#editor-card:fullscreen {
  padding-top: calc(18px + env(safe-area-inset-top));
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
  padding-left: calc(clamp(16px, 5vw, 48px) + env(safe-area-inset-left));
  padding-right: calc(clamp(16px, 5vw, 48px) + env(safe-area-inset-right));
}
.modal-backdrop {
  padding-top: calc(6vh + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

/*
 * The hidden attribute only sets display: none in the UA stylesheet, so any
 * author rule that sets display beats it. .btn is display: inline-flex, which
 * meant a hidden button was still on the page -- and still clickable.
 */
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------- dashboard pieces */

.kpi-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); margin-bottom: 14px; }
.kpi-row.tight { margin: 0; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px; }
.kpi-value {
  font-family: var(--display); font-size: 2.05rem; font-weight: 700;
  letter-spacing: -.045em; line-height: 1.05; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.kpi-label {
  font-family: var(--display); font-size: .74rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 4px;
}
.kpi-sub { font-size: .76rem; color: var(--muted); margin-top: 5px; }

.chart-host { width: 100%; }
.chart-host svg { display: block; max-width: 100%; }

/* Keyboard focus on a chart's invisible per-datum hit rect (bar row, time
   point, heatmap cell) -- otherwise Tab lands on it with no visible cue at
   all, since it has no fill of its own. */
.chart-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.chart-tip {
  position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 9px;
  padding: 8px 11px; font-size: .84rem; line-height: 1.45;
  box-shadow: var(--shadow); opacity: 0; transition: opacity .1s ease;
  max-width: 280px;
}
.chart-tip b { font-weight: 650; }

.filters { padding: 16px 18px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
label.field.inline { margin: 0; min-width: 132px; }
label.field.inline.grow { flex: 1 1 200px; }

.q-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.q-head h3 { flex: 1 1 auto; min-width: 0; }

.section-head {
  margin: 30px 0 6px; font-family: var(--display); font-size: .76rem; font-weight: 600;
  color: var(--muted); letter-spacing: .1em; text-transform: uppercase;
}

.text-samples { margin: 0; padding-left: 18px; color: var(--text-2); font-size: .9rem; }
.text-samples li { margin-bottom: 5px; }

.file-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 6px 5px 13px; font-size: .85rem;
}
.chip-x {
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 1.05rem; line-height: 1; padding: 3px 7px; border-radius: 999px;
}
.chip-x:hover { background: var(--line); color: var(--text); }
#files { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#files:empty { display: none; }

table.data td.blank { color: var(--muted); }

/* --------------------------------------------------------- builder pieces */

.q-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.q-item + .q-item { margin-top: 12px; }
.q-item.rule-target { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

/*
 * Folding, in the editor.
 *
 * A survey of twenty questions is a very long page, and the thing somebody is
 * usually doing in it is finding the one question they want. A folded question
 * keeps its number, its title and enough of its shape to be reordered without
 * being opened.
 */
.q-fold {
  flex: 0 0 auto; width: 22px; height: 22px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: 6px;
  cursor: pointer; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.q-fold::before {
  content: ""; width: 7px; height: 7px; margin-top: -2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .16s ease;
}
.q-fold[aria-expanded="false"]::before { transform: rotate(-45deg); margin: 0 3px 0 0; }
.q-fold:hover { color: var(--text); background: var(--surface-2); }
.q-fold:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.q-item.is-folded { padding: 10px 14px; }
.q-item.is-folded .q-head { margin-bottom: 0; }
.q-folded-note {
  margin: 2px 0 0 54px; font-size: .78rem; color: var(--muted);
}
@media (prefers-reduced-motion: reduce) { .q-fold::before { transition: none; } }

/*
 * The editor's own sections. Same disclosure idea as .more and .tip, at the
 * scale of a block of the page, and open by default because this is the work
 * rather than an aside.
 */
.fold { border-top: 1px solid var(--line); }
.fold:first-of-type { border-top: 0; }
.fold > summary {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; list-style: none; padding: 14px 0 12px;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin: 0 1px 0 4px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform .16s ease;
}
.fold[open] > summary::before { transform: rotate(45deg); margin-top: -3px; }
.fold > summary:hover h3 { color: var(--accent-strong); }
.fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fold-count {
  margin-left: auto; font-size: .78rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.fold-body { padding: 0 0 18px; }
@media (prefers-reduced-motion: reduce) { .fold > summary::before { transition: none; } }

/* However much room the editor has -- and on a wide screen with the preview
   hidden it has the whole window -- it still wants a readable line length
   rather than inputs a metre wide, so its content is centred in that room,
   toolbar included, or the buttons float off on their own. */
#editor-card > * { max-width: 64rem; margin-inline: auto; }
.q-index {
  font-family: var(--display); font-variant-numeric: tabular-nums;
  color: var(--muted); font-weight: 600; font-size: .85rem; min-width: 20px;
}
.opt-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.opt-row input[type="text"] { flex: 1 1 auto; }
.opt-meta { display: flex; gap: 14px; flex-wrap: wrap; margin: -2px 0 12px 0; }
.rule-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin-top: 12px; }
.rule-values { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.cols { display: grid; gap: 14px; }

/* ----------------------------------------------------------- editor panes */

/*
 * The editor page (editor.html), shaped like the survey page: the slim bar
 * it shares with survey.html, and the editor filling the window under it.
 * The editor's own buttons sit in its head, beside its title.
 */
.editor-page { --editor-top-h: 52px; }
.editor-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin-bottom: 6px;
}
.editor-title { flex: 1 1 auto; margin: 0; font-size: 1.3rem; letter-spacing: -.02em; }
.editor-tools { gap: 6px; justify-content: flex-end; }

/*
 * The Mobile preview, docked beside the editor where there is room: a column
 * just wide enough for the phone, holding still while the questions scroll.
 * Where there is not room it covers the page instead, with a way to close it.
 */
.phone-pane { display: flex; flex-direction: column; min-height: 0; }
.phone-pane-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--display); font-weight: 650; font-size: .95rem;
  padding: 2px 2px 10px;
}
.phone-holder { flex: 1 1 auto; min-height: 0; position: relative; }
/* Pinned to the holder's box, so the phone measures the room it is given
   rather than growing the holder to its own full height. */
.phone-holder > .phone-preview { position: absolute; inset: 0; }
/* The editor's slim bar spans the editor, which spans the window. */
.editor-slim .survey-top-bar { max-width: none; }
.phone-pane.is-overlay {
  position: fixed; inset: 0; z-index: 55;
  background: var(--bg);
  padding: calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right))
           calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
}
body.phone-open { overflow: hidden; }
@media (min-width: 1040px) {
  .phone-pane-head .btn { display: none; }   /* the editor's own button closes it */
}

.editor-main {
  padding: 14px calc(18px + env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom))
           calc(18px + env(safe-area-inset-left));
}
.editor-main #status:not(:empty) { margin-bottom: 12px; }
/*
 * On a screen wide enough for the two panes, the editor is an app: the window
 * is exactly the bar and the panes, and the page itself never scrolls. That
 * makes the status line a toast rather than a row, because a row appearing
 * above the panes would push their bottoms off the screen every time a
 * question was missing its title.
 */
@media (min-width: 1040px) {
  .editor-main { padding-bottom: 16px; }
  .editor-main #status {
    position: fixed; z-index: 40; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom));
    transform: translateX(-50%); width: min(560px, calc(100vw - 48px));
    pointer-events: none;
  }
  .editor-main #status:not(:empty) { margin: 0; }
  .editor-main #status .notice {
    pointer-events: auto;
    box-shadow: 0 10px 30px -12px rgb(8 24 40 / .45), 0 1px 3px rgb(8 24 40 / .12);
    background-color: var(--surface);
    background-image: linear-gradient(var(--notice-tint, transparent), var(--notice-tint, transparent));
  }
  .editor-main #status .notice.err { --notice-tint: color-mix(in srgb, var(--danger) 9%, transparent); }
  .editor-main #status .notice.ok { --notice-tint: color-mix(in srgb, var(--good) 10%, transparent); }
}
.cols.two-up { margin-top: 20px; }
/* Grid gap does the spacing here; the stacked-card margin would offset the second one. */
.cols.two-up > .card + .card { margin-top: 0; }
@media (min-width: 860px) { .cols.two-up { grid-template-columns: 1fr 1fr; align-items: start; } }

@media (min-width: 1040px) {
  .cols.builder {
    grid-template-columns: minmax(0, 1fr) 430px;
    align-items: start;
  }
  /* A tablet or a desktop window needs more room to be readable at all. */
  .cols.builder.preview-tablet, .cols.builder.preview-desktop {
    grid-template-columns: minmax(0, 1fr) minmax(430px, 46%);
  }
  .cols.builder.no-preview { grid-template-columns: minmax(0, 1fr); }
  /*
   * The editor scrolls on its own, and overscroll-behavior stops it carrying
   * the page along when it hits its end; the phone beside it holds still.
   */
  .editor-pane, .phone-pane {
    height: calc(100svh - var(--editor-top-h, 52px) - 32px);
  }
  .editor-pane {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 10px;
  }
  .editor-pane::-webkit-scrollbar { width: 9px; }
  .editor-pane::-webkit-scrollbar-thumb {
    background: var(--line-strong); border-radius: 5px;
    border: 2px solid var(--bg); background-clip: padding-box;
  }
  .editor-pane::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }
  .phone-pane { position: sticky; top: calc(var(--editor-top-h, 52px) + 14px); }
}

.hero { padding: 18px 0 8px; }
.hero .btn-row { margin-top: 20px; }
code.inline { font-family: var(--mono); font-size: .85em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }

/* --------------------------------------------------------- example picker */

.sample-picker { margin: 0; }
.sample-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.sample-row .btn { flex: 0 0 auto; }
.sample-blurb { margin: 10px 0 0; color: var(--muted); font-size: .86rem; }

.example-grid { display: grid; gap: 14px; }
@media (min-width: 700px) { .example-grid { grid-template-columns: 1fr 1fr; } }
.example { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 17px 19px; }
.example h3 { margin-bottom: 6px; }
.example p { font-size: .89rem; color: var(--text-2); margin: 0 0 13px; }


/* ------------------------------------------------------------ survey form */

/*
 * One set of rules for the answerable form, used inside every device shell and
 * on the page people respond on. Colours come from whatever scope encloses it,
 * so the same markup reads as the app inside a phone and as the site outside.
 */
.sform-q {
  background: var(--f-card); border: 1px solid var(--f-line);
  border-radius: var(--f-radius, 10px); padding: var(--f-pad, 13px 14px);
}
.sform-q + .sform-q { margin-top: var(--f-gap, 10px); }
.sform-q.off { opacity: .5; }
.sform-title {
  font-weight: 600; font-size: calc(var(--f-size, 1rem) * .92); line-height: 1.35;
  color: var(--f-text);
}
.sform-req { color: var(--f-danger); }
.sform-desc { font-size: .78rem; color: var(--f-muted); margin-top: 4px; line-height: 1.45; }
.sform-err { font-size: .78rem; color: var(--f-danger); margin-top: 7px; font-weight: 600; }
.sform-note { font-size: .78rem; color: var(--f-muted); margin: 10px 2px 0; }
.sform-empty { color: var(--f-muted); font-size: .85rem; text-align: center; padding: 30px 10px; }

.sform-opt {
  display: flex; align-items: center; gap: 9px; padding: 7px 2px;
  font-size: calc(var(--f-size, 1rem) * .88); cursor: pointer; line-height: 1.35;
  color: var(--f-text);
}
.sform-q.off .sform-opt { cursor: not-allowed; }
.sform-dot { width: 17px; height: 17px; flex: 0 0 auto; border: 2px solid var(--f-edge); border-radius: 50%; }
.sform-dot.box { border-radius: 4px; }
.sform-opt.on .sform-dot { border-color: var(--f-accent); background: var(--f-accent); box-shadow: inset 0 0 0 3px var(--f-card); }
.sform-opt.on .sform-dot.box { box-shadow: inset 0 0 0 2px var(--f-card); }
.sform-ends { color: var(--f-muted); font-size: .74rem; }

.sform-input {
  width: 100%; margin-top: 7px; padding: 8px 10px; font: inherit;
  font-size: calc(var(--f-size, 1rem) * .87);
  border: 1px solid var(--f-edge); border-radius: calc(var(--f-radius, 10px) * .8);
  background: var(--f-field); color: var(--f-text);
}
.sform-input:disabled { background: var(--f-disabled); color: var(--f-muted); }
.sform-other { margin-left: 26px; width: calc(100% - 26px); }
textarea.sform-input { font-family: inherit; min-height: 0; resize: vertical; }

.sform-scale { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.sform-scale-label { font-size: .74rem; color: var(--f-muted); max-width: 8em; line-height: 1.25; }
.sform-step {
  min-width: 34px; padding: 7px 4px; cursor: pointer;
  border-radius: calc(var(--f-radius, 10px) * .8);
  border: 1px solid var(--f-edge); background: var(--f-field); color: var(--f-text);
  font: inherit; font-size: .85rem; font-variant-numeric: tabular-nums;
}
.sform-step.on { background: var(--f-accent); border-color: var(--f-accent); color: var(--f-on-accent); font-weight: 650; }
.sform-step:disabled { opacity: .5; cursor: not-allowed; }

/* The site's own scope, for the record page outside any device shell. */
.sform-host {
  --f-card: var(--surface); --f-line: var(--line); --f-text: var(--text);
  --f-muted: var(--muted); --f-accent: var(--accent); --f-danger: var(--danger);
  --f-edge: var(--control-edge); --f-field: var(--surface); --f-disabled: var(--surface-2);
  --f-on-accent: var(--on-accent); --f-head: var(--text); --f-bg: transparent;
}

/* ------------------------------------------------------- survey styles */

/*
 * A survey carries its own look as one word in the file (see assets/
 * styles.js), and that word becomes this attribute. Everything below is
 * literal hex rather than a var(), for two reasons: a style is a fixed look
 * rather than a tint of the site's, and tests/styles.test.mjs reads these
 * blocks as text to check every colour pair against WCAG ratios. A style
 * nobody can read is worse than no style at all, and these are chosen for
 * strangers to answer on a phone, outdoors.
 *
 * "ice" is the exception: it is the site's own look, and follows the
 * reader's light or dark setting rather than fixing one.
 */
[data-survey-style] {
  background: var(--f-bg);
  font-family: var(--f-font, inherit);
}
/* The type choice reaches the controls too, which inherit `font: inherit`
   from their own rules and would otherwise stay on the site's face. */
[data-survey-style] .sform-title,
[data-survey-style] .sform-opt,
[data-survey-style] .sform-desc,
[data-survey-style] .sform-input,
[data-survey-style] .sform-step,
[data-survey-style] .embed-title,
[data-survey-style] h1, [data-survey-style] h2, [data-survey-style] h3,
[data-survey-style] .btn { font-family: var(--f-font, inherit); }

/* Centred, for a survey that wants to look like an invitation rather than a
   form. Only the headings and the page's own furniture: a centred question
   with left-aligned options underneath reads as a mistake.

   Two shapes to reach. In the embed the style sits on the card itself, so its
   heading and buttons are direct children (`> h2`). On survey.html the style
   sits on the window and they are a card deeper, which is why every rule
   below has its `.card >` twin. */
[data-survey-align="center"] .embed-title,
[data-survey-align="center"] > h2,
[data-survey-align="center"] .survey-head,
[data-survey-align="center"] .card > h2,
[data-survey-align="center"] .card > p { text-align: center; }
/* The title is inside a flex summary when the survey has a description, and
   text-align does nothing to a flex line. */
[data-survey-align="center"] .survey-head > summary { justify-content: center; }
[data-survey-align="center"] .sform-title { text-align: center; }
[data-survey-align="center"] .sform-desc { text-align: center; }
[data-survey-align="center"] .sform-scale { justify-content: center; }
[data-survey-align="center"] > .btn-row,
[data-survey-align="center"] .card > .btn-row { justify-content: center; }
[data-survey-align="center"] .survey-actions { justify-content: center; }

/* Corners reach the cards the form sits in as well as the questions. */
[data-survey-style] .embed-card,
[data-survey-style].card,
[data-survey-style] .card { border-radius: var(--f-radius, var(--radius)); }
[data-survey-style] .btn { border-radius: calc(var(--f-radius, 10px) * .8); }
/* The responder's name box and anything else outside the question list: the
   .sform-input rule above only covers the answers themselves. The same four
   :not()s as the site's own input rule, because without them this selector is
   LESS specific than it and the corners stay soft. */
[data-survey-style] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
[data-survey-style] textarea,
[data-survey-style] select {
  border-radius: calc(var(--f-radius, 10px) * .8);
}

/*
 * Inside a styled survey, the site's own chrome gives way: the responder's
 * name field, the buttons under the form and anything else that would
 * otherwise still be Survey.cool blue in the middle of somebody's green
 * survey. A style that coloured only the questions would look like a mistake.
 */
[data-survey-style] .field > span { color: var(--f-muted); }
/* The same four :not()s as the base rule above, because without them this
   selector is LESS specific than it and a styled survey keeps white inputs. */
[data-survey-style] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
[data-survey-style] textarea,
[data-survey-style] select {
  color: var(--f-text); background: var(--f-field); border-color: var(--f-edge);
}
[data-survey-style] input::placeholder, [data-survey-style] textarea::placeholder {
  color: var(--f-muted); opacity: .75;
}
[data-survey-style] input:focus,
[data-survey-style] textarea:focus,
[data-survey-style] select:focus {
  outline-color: var(--f-accent); border-color: var(--f-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--f-accent) 20%, transparent);
}
[data-survey-style] .btn {
  background: var(--f-accent); color: var(--f-on-accent); border-color: transparent;
  box-shadow: none;
}
[data-survey-style] .btn.secondary {
  background: var(--f-card); color: var(--f-accent); border-color: var(--f-edge);
}
[data-survey-style] .btn.ghost {
  background: transparent; color: var(--f-muted); border-color: var(--f-edge);
}
[data-survey-style] .btn.ghost:hover,
[data-survey-style] .btn.secondary:hover { background: var(--f-disabled); }
[data-survey-style] .btn:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 2px; }
[data-survey-style] .embed-title, [data-survey-style] h2 { color: var(--f-head); }
[data-survey-style] .small:not(.btn), [data-survey-style] .muted { color: var(--f-muted); }

/* ------------------------------------------------------- the mobile preview */

/*
 * A phone's frame around survey.html at a phone's own size (phone-preview.js).
 * The frame is scaled as a whole, never reflowed, so the layout inside is the
 * real phone layout. The holder decides the room; the phone fits it.
 */
.phone-preview {
  display: flex; align-items: flex-start; justify-content: center;
  width: 100%; height: 100%; min-height: 0; overflow: hidden; padding-top: 4px;
}
.phone-scaler {
  --phone-scale: 1;
  width: calc(var(--outer-w, 414px) * var(--phone-scale));
  height: calc(var(--outer-h, 900px) * var(--phone-scale));
  flex: 0 0 auto;
}
/*
 * The device: its screen inside a frame drawn from custom properties that
 * phone-preview.js sets per device -- a phone's bezel, a tablet's even
 * border, or a browser window's title bar with its three dots.
 */
.phone-body {
  position: relative;
  width: var(--outer-w, 414px); height: var(--outer-h, 900px);
  padding: var(--frame-top, 34px) var(--frame-side, 12px) var(--frame-bottom, 22px);
  border-radius: var(--frame-radius, 46px); background: #0b0f16;
  box-shadow: 0 0 0 1px #2a3240, 0 24px 60px -20px rgb(0 0 0 / .55);
  transform: scale(var(--phone-scale)); transform-origin: top left;
}
.phone-notch {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 64px; height: 6px; border-radius: 3px; background: #2a3240;
}
.phone-screen {
  display: block; width: var(--device-w, 390px); height: var(--device-h, 844px);
  border: 0; border-radius: 10px; background: var(--bg);
}
.browser-dots { display: none; }
.phone-preview[data-device="tablet"] .phone-notch { width: 8px; height: 8px; top: 8px; border-radius: 50%; }
.phone-preview[data-device="tablet"] .phone-screen { border-radius: 8px; }
.phone-preview[data-device="desktop"] .phone-body { background: #d9e0e8; box-shadow: 0 0 0 1px #b9c3ce, 0 24px 60px -20px rgb(0 0 0 / .45); }
.phone-preview[data-device="desktop"] .phone-notch { display: none; }
.phone-preview[data-device="desktop"] .phone-screen { border-radius: 0 0 12px 12px; }
.phone-preview[data-device="desktop"] .browser-dots {
  display: flex; gap: 8px; position: absolute; top: 10px; left: 14px;
}
.browser-dots i { width: 11px; height: 11px; border-radius: 50%; background: #f26b5b; }
.browser-dots i:nth-child(2) { background: #f5be4f; }
.browser-dots i:nth-child(3) { background: #5fc454; }
:root[data-theme="dark"] .phone-preview[data-device="desktop"] .phone-body { background: #2a3240; box-shadow: 0 0 0 1px #3a4454, 0 24px 60px -20px rgb(0 0 0 / .6); }

/* The device switch above the preview. */
.phone-pane-head .device-seg { flex: 0 1 auto; }
.phone-pane-head .device-seg .seg-btn { padding: 6px 12px; }

/* ------------------------------------------------- the survey view's window */

/*
 * survey.html is one survey and nothing else: no site nav, and the style set
 * on #skin reaches the whole window rather than one card in the middle of it.
 * That means the page's own furniture -- the bar across the top, the view
 * tabs, the saved-response rows -- has to take the survey's colours too. A
 * style that coloured only the questions, with Survey.cool blue pills under
 * them, would read as a mistake.
 *
 * Every rule below is a descendant selector, so none of it touches the embed,
 * where the style sits on the card itself (see .embed-card above).
 */
.survey-skin { min-height: 100svh; display: flex; flex-direction: column; }
.survey-main { flex: 1 0 auto; padding-top: 18px; }

.survey-top {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--f-line, var(--line));
  background: color-mix(in srgb, var(--f-card, var(--surface)) 82%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
.survey-top-bar {
  max-width: 820px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: calc(9px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right))
           9px calc(16px + env(safe-area-inset-left));
}
.survey-back { flex: 0 0 auto; text-decoration: none; }
/* The way back to the Respond page is only there when that is where the
   survey was opened from (survey.html marks it). A link somebody was sent
   shows the survey on its own, with the site's name as the only way out. */
:root:not(.from-site) .survey-skin .survey-back { display: none; }
:root:not(.from-site) .survey-skin .survey-lockup { justify-content: flex-start; }
/* The view tabs, and the way into the editor at the far end of the same row. */
.survey-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 16px;
}
.survey-actions .view-tabs { margin-top: 0; }
.survey-edit { text-decoration: none; }
/* In the Mobile preview the page is shown exactly, but its ways out would
   navigate the frame they are in, so they are pictures, not links. */
.is-preview .survey-back, .is-preview .survey-edit, .is-preview .survey-install,
.is-preview .survey-lockup { pointer-events: none; }
.survey-extras { display: flex; flex-wrap: wrap; gap: 8px; }
.survey-back span { font-size: 1.15em; line-height: 1; }
/* Centred between the two controls, and allowed to shrink before they do:
   on a narrow phone the way out matters more than the wordmark. */
.survey-lockup {
  flex: 1 1 auto; justify-content: center; min-width: 0;
  font-size: 1rem; color: var(--f-head, var(--text));
  overflow: hidden; white-space: nowrap; text-decoration: none;
}
.survey-top .theme-toggle, .survey-top .palette-btn { flex: 0 0 auto; }
@media (max-width: 420px) {
  .survey-lockup .wordmark { font-size: .92rem; }
}

/* The whole window in the survey's colours. */
[data-survey-style] { color: var(--f-text); }
[data-survey-style] .card {
  background: var(--f-card); border-color: var(--f-line); box-shadow: none;
}
[data-survey-style] .survey-top { border-bottom-color: var(--f-line); }
[data-survey-style] h3 { color: var(--f-head); }
[data-survey-style] .tip > summary { color: var(--f-head); }
/* The "i" chip, which is otherwise Survey.cool blue sitting beside somebody
   else's heading. */
[data-survey-style] .tip > summary::after {
  color: var(--f-accent);
  background: color-mix(in srgb, var(--f-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--f-accent) 26%, transparent);
}
[data-survey-style] .tip[open] > summary::after {
  color: var(--f-on-accent); background: var(--f-accent); border-color: transparent;
}
[data-survey-style] .tip > summary:hover > h1,
[data-survey-style] .tip > summary:hover > h2,
[data-survey-style] .tip > summary:hover > h3 { color: var(--f-accent); }
[data-survey-style] .tip.quiet > summary { color: var(--f-accent); }
[data-survey-style] .view-tabs {
  background: var(--f-disabled); border-color: var(--f-line); box-shadow: none;
}
[data-survey-style] .view-tab { color: var(--f-muted); }
[data-survey-style] .view-tab:hover {
  color: var(--f-head); background: color-mix(in srgb, var(--f-accent) 12%, transparent);
}
[data-survey-style] .view-tab[aria-current="page"] {
  background: var(--f-accent); color: var(--f-on-accent);
  border-color: transparent; box-shadow: none;
}
[data-survey-style] .tab-count {
  background: color-mix(in srgb, var(--f-accent) 16%, transparent); color: var(--f-accent);
}
[data-survey-style] .view-tab[aria-current="page"] .tab-count {
  background: color-mix(in srgb, #fff 26%, transparent); color: var(--f-on-accent);
}
[data-survey-style] .rec-row { background: var(--f-disabled); border-color: var(--f-line); }
[data-survey-style] .rec-main b { color: var(--f-text); }
[data-survey-style] .rec-meta { color: var(--f-muted); }
[data-survey-style] .rec-detail { border-top-color: var(--f-line); }
[data-survey-style] .rec-detail dt { color: var(--f-muted); }
[data-survey-style] .rec-detail dd { color: var(--f-text); }
/*
 * Notices. The site's own are built from --danger and --good, which are
 * Survey.cool's red and green: a green "Saved" bar in the middle of a rose
 * survey is the one thing on the page still wearing somebody else's colours.
 * So a confirmation takes the survey's accent and a problem takes its danger
 * colour, and the text stays --f-text, which every preset already guarantees
 * against --f-bg -- a tinted panel and a coloured edge carry the signal
 * without betting legibility on a colour somebody picked.
 */
[data-survey-style] .notice {
  background: color-mix(in srgb, var(--f-accent) 9%, transparent);
  border-color: color-mix(in srgb, var(--f-accent) 30%, var(--f-line));
  color: var(--f-text);
}
[data-survey-style] .notice.err {
  background: color-mix(in srgb, var(--f-danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--f-danger) 34%, var(--f-line));
  color: var(--f-text);
}
[data-survey-style] .notice.info {
  background: var(--f-disabled); border-color: var(--f-line); color: var(--f-muted);
}

/* The last two things still painted in the site's blue: a highlight dragged
   across a question, and any link that is not already a button. */
[data-survey-style] ::selection {
  background: color-mix(in srgb, var(--f-accent) 26%, transparent);
  color: var(--f-text);
}
[data-survey-style] a:not(.btn) { color: var(--f-accent); }

/* Delete keeps its own colour: an accent-filled Delete beside an
   accent-filled Submit is the one button nobody should press by accident. */
[data-survey-style] .btn.danger {
  background: transparent; color: var(--f-danger);
  border-color: color-mix(in srgb, var(--f-danger) 40%, var(--f-line));
}
[data-survey-style] .btn.danger:hover {
  background: color-mix(in srgb, var(--f-danger) 10%, transparent);
}

/*
 * Choosing the look, in the editor. Each swatch is painted in its own style's
 * colours, so the row itself is the comparison: a list of names would make
 * somebody pick one, look at the preview, and come back.
 */
.style-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.style-pick {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 9px 7px; cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: .74rem; color: var(--text-2);
  transition: border-color .14s ease, background .14s ease;
}
.style-pick:hover { border-color: var(--line-strong); background: var(--surface-2); }
.style-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.style-pick.on {
  border-color: var(--accent); background: var(--accent-wash); color: var(--accent-strong);
  font-weight: 650;
}
.style-name { font-family: var(--display); letter-spacing: -.01em; }

/* ------------------------------------------------- the style designer */

/* Settings > Styles: the controls alone. The editor's Preview, at whichever
   device, is where the style is seen, wearing it on the real page. */
.style-controls { display: grid; gap: 4px; }
/* The default palette follows the site, so its thumbnail's page is the site's. */
.style-thumb[data-survey-style="ice"] { --f-bg: var(--bg); }

.style-group { margin-top: 22px; }
.style-group:first-child { margin-top: 0; }
.style-group > h4 {
  font-family: var(--display); font-size: .95rem; font-weight: 650;
  margin: 0 0 10px; letter-spacing: -.015em;
}

/* Palettes, each a tiny window of its own. */
.style-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)); gap: 8px; }
.style-pick {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 6px 6px 7px; cursor: pointer; width: 100%;
  background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: .76rem; color: var(--text-2); text-align: center;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.style-pick:hover { border-color: var(--line-strong); background: var(--surface-2); }
.style-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.style-pick.on {
  border-color: var(--accent); background: var(--accent-wash); color: var(--accent-strong);
  box-shadow: 0 0 0 1px var(--accent); font-weight: 650;
}
.style-name { font-family: var(--display); letter-spacing: -.01em; }
.style-thumb {
  display: flex; flex-direction: column; aspect-ratio: 5 / 4; overflow: hidden;
  border-radius: 6px; border: 1px solid var(--f-line);
  background: var(--f-bg);
}
.style-thumb-bar { flex: 0 0 15%; background: var(--f-card); border-bottom: 1px solid var(--f-line); }
.style-thumb-card {
  flex: 1 1 auto; margin: 10% 13% 0; padding: 9% 12% 0;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--f-card); border: 1px solid var(--f-line); border-bottom: 0;
  border-radius: 4px 4px 0 0;
}
.style-thumb-line { height: 4px; width: 72%; border-radius: 2px; background: var(--f-head); }
.style-thumb-line.short { width: 46%; background: var(--f-muted); opacity: .55; }
.style-thumb-pill {
  margin-top: 4px; height: 8px; width: 48%; border-radius: 4px; background: var(--f-accent);
}

/* Colours: five tiles, the well itself the swatch. */
.colour-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.colour-tile {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface);
}
.colour-tile.is-set { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.colour-pick { display: flex; flex-direction: column; gap: 5px; cursor: pointer; }
.colour-well {
  display: block; width: 100%; height: 34px; padding: 0; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 6px; background: none;
}
.colour-well::-webkit-color-swatch-wrapper { padding: 0; }
.colour-well::-webkit-color-swatch { border: 0; border-radius: 5px; }
.colour-well::-moz-color-swatch { border: 0; border-radius: 5px; }
.colour-name { font-family: var(--display); font-size: .8rem; font-weight: 600; color: var(--text); }
.colour-hex, .colour-reset { font-size: .74rem; color: var(--muted); }
.colour-hex { font-family: var(--mono); }
.colour-reset { align-self: flex-start; padding: 0; }
.colour-dark-note { margin: 10px 0 0; font-size: .8rem; }

/* Type and shape: one segmented control per choice. */
.style-choices { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.style-choice { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
.style-choice-label {
  font-family: var(--display); font-size: .8rem; font-weight: 600; color: var(--text-2);
}
.seg {
  display: flex; flex-wrap: wrap; gap: 3px; padding: 3px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2);
  width: max-content; max-width: 100%;
}
.seg-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-family: var(--display); font-size: .82rem; font-weight: 600;
  padding: 6px 11px; border-radius: 8px; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--text-2);
  transition: background .14s ease, color .14s ease;
}
.seg-btn:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.seg-btn.on {
  background: var(--surface); color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow: 0 1px 2px rgb(10 30 50 / .08);
}
.seg-face { font-size: .95rem; font-weight: 500; line-height: 1; }
.seg-corner {
  width: 11px; height: 11px; border: 2px solid currentColor;
  border-right: 0; border-bottom: 0; opacity: .8;
}
@media (prefers-reduced-motion: reduce) { .seg-btn { transition: none; } }
@media (prefers-reduced-motion: reduce) { .style-pick { transition: none; } }
[data-survey-style="slate"] {
  --f-bg: #eef1f4; --f-card: #ffffff; --f-line: #d4dae1; --f-edge: #78828c;
  --f-text: #1b2229; --f-muted: #5b6670; --f-accent: #3f5468; --f-on-accent: #ffffff;
  --f-danger: #b3261e; --f-field: #ffffff; --f-disabled: #f2f4f7; --f-head: #1b2229;
}
[data-survey-style="meadow"] {
  --f-bg: #edf5ed; --f-card: #ffffff; --f-line: #cfe2cf; --f-edge: #6f8f78;
  --f-text: #13251a; --f-muted: #4f6655; --f-accent: #1f6b3a; --f-on-accent: #ffffff;
  --f-danger: #b3261e; --f-field: #ffffff; --f-disabled: #f0f6f1; --f-head: #17502f;
}
[data-survey-style="rose"] {
  --f-bg: #fdeef1; --f-card: #ffffff; --f-line: #f0d3d9; --f-edge: #a3737e;
  --f-text: #2a1419; --f-muted: #73535a; --f-accent: #a62447; --f-on-accent: #ffffff;
  --f-danger: #b3261e; --f-field: #ffffff; --f-disabled: #faf0f2; --f-head: #8a1d3b;
}
[data-survey-style="sand"] {
  --f-bg: #f7f0e4; --f-card: #fffdf8; --f-line: #e3d7c2; --f-edge: #938263;
  --f-text: #2a2216; --f-muted: #6b5d46; --f-accent: #8a5a1b; --f-on-accent: #ffffff;
  --f-danger: #a3271f; --f-field: #fffdf8; --f-disabled: #f4ecdf; --f-head: #6b4512;
}
[data-survey-style="mono"] {
  --f-bg: #ffffff; --f-card: #ffffff; --f-line: #8c8c8c; --f-edge: #595959;
  --f-text: #000000; --f-muted: #4a4a4a; --f-accent: #000000; --f-on-accent: #ffffff;
  --f-danger: #8c0000; --f-field: #ffffff; --f-disabled: #ededed; --f-head: #000000;
}
/* The same palettes after dark: the reader's own setting picks the version. */
:root[data-theme="dark"] [data-survey-style="slate"] {
  --f-bg: #0f1215; --f-card: #181c21; --f-line: #2c333b; --f-edge: #7d8894;
  --f-text: #e6eaee; --f-muted: #a2acb6; --f-accent: #a9bdd2; --f-on-accent: #0f1215;
  --f-danger: #ff8a80; --f-field: #13171b; --f-disabled: #1f242b; --f-head: #f2f4f6;
}
:root[data-theme="dark"] [data-survey-style="meadow"] {
  --f-bg: #0b1410; --f-card: #13201a; --f-line: #26392d; --f-edge: #71997d;
  --f-text: #e2f0e6; --f-muted: #9fbca8; --f-accent: #72d192; --f-on-accent: #06140b;
  --f-danger: #ff8a80; --f-field: #0f1a14; --f-disabled: #1a2b22; --f-head: #bdeccb;
}
:root[data-theme="dark"] [data-survey-style="rose"] {
  --f-bg: #170b0f; --f-card: #2a1820; --f-line: #3e2531; --f-edge: #a37d89;
  --f-text: #f6e6eb; --f-muted: #c9a5b0; --f-accent: #ff93b3; --f-on-accent: #2a0812;
  --f-danger: #ff9a8a; --f-field: #1c0f15; --f-disabled: #2d1922; --f-head: #ffc4d5;
}
:root[data-theme="dark"] [data-survey-style="sand"] {
  --f-bg: #15110b; --f-card: #201a12; --f-line: #3b3123; --f-edge: #9c8968;
  --f-text: #f3eadb; --f-muted: #c4b397; --f-accent: #e2a85e; --f-on-accent: #1d1206;
  --f-danger: #ff8f7f; --f-field: #1a150e; --f-disabled: #2a2218; --f-head: #f6d8a6;
}
:root[data-theme="dark"] [data-survey-style="mono"] {
  --f-bg: #000000; --f-card: #0b0b0b; --f-line: #7a7a7a; --f-edge: #a8a8a8;
  --f-text: #ffffff; --f-muted: #c6c6c6; --f-accent: #ffffff; --f-on-accent: #000000;
  --f-danger: #ff8a8a; --f-field: #000000; --f-disabled: #1f1f1f; --f-head: #ffffff;
}

/* --------------------------------------------------------------- dialogs */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: color-mix(in srgb, #05070c 62%, transparent);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 18px 24px; overflow-y: auto;
  opacity: 0; transition: opacity .16s ease;
}
/* While fading out it is invisible but still on top, so stop it eating clicks. */
.modal-backdrop { pointer-events: none; }
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal {
  width: min(560px, 100%);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: 0 24px 64px rgba(0, 0, 0, .4);
  padding: 22px 24px 24px;
  transform: translateY(10px); transition: transform .18s ease;
}
.modal.wide { width: min(780px, 100%); }
.modal-backdrop.open .modal { transform: none; }
.modal-head { display: flex; align-items: flex-start; gap: 12px; }
.modal-head h2 { flex: 1 1 auto; font-size: 1.2rem; }
.modal-x {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 1.45rem; line-height: 1; padding: 0 6px; border-radius: 6px;
}
.modal-x:hover { color: var(--text); background: var(--surface-2); }
.modal-desc { font-size: .9rem; color: var(--text-2); margin: 9px 0 0; }
.modal-body { margin-top: 18px; }

/* Deleting: type the word, then say yes again (confirmDelete in modal.js). */
.danger-what { margin: 0 0 14px; color: var(--text-2); }
.danger-sure { margin: 0 0 6px; font-family: var(--display); font-size: 1.15rem; font-weight: 650; }
.danger-field { margin: 0; }
.danger-key {
  font-family: var(--mono); font-weight: 700; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 5px;
  color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.danger-word { font-family: var(--mono); letter-spacing: .06em; }
.danger-actions { margin-top: 18px; justify-content: flex-end; }
.btn.danger.solid {
  background: var(--danger); color: var(--surface); border-color: transparent;
}
.btn.danger.solid:hover { background: color-mix(in srgb, var(--danger) 88%, #000); }
.btn.danger.solid:disabled { opacity: .4; cursor: not-allowed; }

/*
 * A dialog raised inside a styled survey (survey.html passes its skin as the
 * host) takes the survey's colours like everything else on that page, rather
 * than appearing in Survey.cool's own in the middle of it.
 */
[data-survey-style] .modal {
  background: var(--f-card); border-color: var(--f-line); color: var(--f-text);
  border-radius: var(--f-radius, var(--radius));
}
[data-survey-style] .modal-head h2 { color: var(--f-head); }
[data-survey-style] .modal-x { color: var(--f-muted); }
[data-survey-style] .modal-x:hover { color: var(--f-text); background: var(--f-disabled); }
[data-survey-style] .danger-what { color: var(--f-muted); }
[data-survey-style] .danger-key {
  color: var(--f-danger); background: color-mix(in srgb, var(--f-danger) 12%, transparent);
}
[data-survey-style] .btn.danger.solid {
  background: var(--f-danger); color: var(--f-card); border-color: transparent;
}
/* Two different things can go wrong in the Design with AI dialog -- the file
   attached to the prompt, and the JSON pasted back -- so they report in two
   places, under the control each one belongs to, and carry different classes
   so neither code nor a test can mistake one for the other. */
.modal-err, .attach-err {
  color: var(--danger); font-size: .85rem; font-weight: 600; margin-top: 10px;
}
.modal-err:empty, .attach-err:empty { display: none; }

.pick-list { display: grid; gap: 8px; }
.pick {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px 15px; color: var(--text);
}
.pick:hover { border-color: var(--accent); background: var(--accent-wash); }
.pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick-top { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.pick-top strong { font-family: var(--display); font-size: .97rem; font-weight: 600; letter-spacing: -.015em; }
.pick-meta { font-size: .76rem; color: var(--muted); white-space: nowrap; }
.pick-blurb { display: block; font-size: .83rem; color: var(--text-2); margin-top: 5px; line-height: 1.45; }

/*
 * The box a survey is pasted into. Deliberately short: what lands here is a
 * block of JSON nobody reads, and a tall box of it was the biggest thing in
 * the dialog while being the part that needs the least looking at. It still
 * takes a survey of any size, and still drags taller for anyone who wants it.
 */
.paste-box {
  width: 100%; height: 86px; min-height: 86px; resize: vertical;
  font-family: var(--mono); font-size: .78rem; line-height: 1.45;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text);
  white-space: pre; overflow: auto;
}

/* What goes to the assistant with the prompt: the draft, or a file. */
.ai-send { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.ai-send .btn-row { align-items: center; gap: 10px; }

/* A button that is really a link: used mid-sentence, where a button shape
   would be louder than the sentence around it. */
.linkish {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; color: var(--accent-strong); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.linkish:hover { color: var(--accent); }

.door-quiet { cursor: default; }
.door-quiet:hover { transform: none; border-color: var(--line); }

/* ------------------------------------------------- preview, filling the page */

/* Full screen hands the editor to the browser; it still wants the page's colour. */
#editor-card:fullscreen {
  background: var(--bg); color: var(--text); overflow-y: auto;
  padding: 18px clamp(16px, 5vw, 48px) 32px;
}

/*
 * "A new version is ready." Low and out of the way, because it is never
 * urgent: the page it is sitting on works, and the person may be halfway
 * through answering something.
 */
.update-bar {
  position: fixed; z-index: 60;
  left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: calc(100vw - 32px);
  padding: 10px 12px 10px 16px; border-radius: 999px;
  font-size: .88rem; color: var(--text);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 var(--edge), 0 10px 30px rgba(6, 24, 42, .18);
  backdrop-filter: blur(8px);
}
@media (max-width: 520px) {
  .update-bar {
    border-radius: var(--radius); left: 16px; right: 16px;
    transform: none; max-width: none;
    padding: 12px 14px;
  }
  .update-bar span { flex: 1 1 100%; }
  .update-bar .btn { flex: 1 1 0; }
}

.step-head { font-size: .95rem; font-weight: 650; margin: 0 0 12px; color: var(--text); }
.disabled-link { opacity: .45; pointer-events: none; }

/* ------------------------------------------------------------ small screens */

@media (max-width: 720px) {
  /* Tap targets. A mouse can hit a 30px button; a thumb wants more. */
  .btn { min-height: 42px; }
  .btn.small { min-height: 38px; padding: 8px 13px; }
  .chip-x { min-width: 30px; min-height: 30px; }

  /* The editor's buttons: a tidy grid rather than ragged wrapped rows, with
     Share / Respond, the one that finishes the job, across the bottom. */
  .editor-tools { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .editor-tools .btn { width: 100%; }
  .editor-tools #share-btn { grid-column: 1 / -1; }

  /* Cards and heroes lose some of their inset, which is dead space here. */
  .card { padding: 17px 16px; }
  .hero { padding-top: 10px; }
  .hero.center { padding: 22px 0 6px; }
  .door { padding: 19px 18px 17px; }

  /* Example rows stack, so the buttons get a full-width line of their own. */
  .mini { align-items: stretch; flex-direction: column; gap: 10px; }
  .mini h3 { flex: 0 0 auto; }
  .mini .btn-row { gap: 8px; }
  .mini .btn-row .btn { flex: 1 1 0; }

  /* Stacked, the step needs no reserved height - only the numeral's gutter. */
  .step { padding: 17px 50px 15px 16px; min-height: 0; }
  .step-n { font-size: 3.4rem; right: 10px; }

  .claims { gap: 8px 16px; font-size: .86rem; }
  .door .who, .example .who { font-size: .72rem; }

  /* Dialogs sit closer to the top and use the width they have. */
  .modal-backdrop {
    padding: calc(3vh + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right))
             calc(20px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
  }
  .modal { padding: 18px 17px 20px; }
  .modal-head h2 { font-size: 1.08rem; }

  /* Filters and output rows stack rather than squeezing side by side. */
  .filter-row { gap: 10px; }
  label.field.inline { min-width: 0; width: 100%; }
  .kpi { padding: 13px 14px; }
  .kpi-value { font-size: 1.7rem; }
}

@media (max-width: 430px) {
  .btn-row { gap: 8px; }
}

/* ------------------------------------------------------- site colours */

/*
 * The palette button (assets/site-style.js) repaints the site by setting its
 * own tokens on <html>. A survey shown inside a site page -- the editor's
 * miniature, the palette thumbnails -- is the survey's look, not the site's,
 * so these put the type and corners back inside one, and give the "ice"
 * palette back its own colours rather than the site's new ones.
 */
:root[data-site-style] [data-survey-style] {
  --sans: 'InterVar', 'InterFallback', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: 'Space Grotesk', 'GroteskFallback', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 14px; --radius-sm: 9px;
}
:root[data-site-style] [data-survey-style="ice"] {
  --bg: #edf3f8; --surface: #ffffff; --surface-2: #f1f6fb; --line: #dbe6f0;
  --line-strong: #bdd1e1; --text: #06182a; --text-2: #3d5568; --muted: #586e80;
  --accent: #0069e8; --accent-strong: #00419c; --accent-wash: #e2effd;
  --frost: #43bdf9; --ice-ink: #0b7396; --control-edge: #7e96ab; --danger: #bf2436;
  --on-accent: #ffffff; --btn-top: #2a90f2; --btn-bot: #0062e0;
}
:root[data-site-style][data-theme="dark"] [data-survey-style="ice"] {
  --bg: #05090f; --surface: #0d1621; --surface-2: #142132; --line: #1d2c3d;
  --line-strong: #2c4256; --text: #e9f4fc; --text-2: #a5bdd2; --muted: #7691a8;
  --accent: #3fbdf9; --accent-strong: #9adcfd; --accent-wash: #0c2537;
  --frost: #8fe0fb; --ice-ink: #6fd2fb; --control-edge: #7d93ab; --danger: #ff7f7f;
  --on-accent: #04192a; --btn-top: #7fd6ff; --btn-bot: #2fb0f2;
}
.palette-label {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 16px 0 8px;
}
.palette-body > .palette-label:first-child { margin-top: 0; }

/* ------------------------------------------------------- front door: how */

.how { margin-top: 34px; }
.how-title { font-size: 1.3rem; margin: 0 0 14px; letter-spacing: -.02em; }
.how .card h3 { font-size: 1.04rem; margin: 0 0 8px; }
.how .card .small { margin: 0; }

/* ------------------------------------------------------ about: technical */

.tech { display: grid; gap: 14px; }
.tech .card h2 { font-size: 1.12rem; margin: 0 0 8px; }
.tech .card .small { margin: 0; }
.tech .card .small + .small { margin-top: 10px; }
.tech code {
  font-family: var(--mono); font-size: .86em;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 0 4px;
}

/* --------------------------------------------------------------- install */

.install {
  text-align: center; padding: clamp(28px, 8vh, 72px) 0 24px;
  display: flex; flex-direction: column; align-items: center;
}
.install-icon {
  width: 96px; height: 96px; border-radius: 24px;
  box-shadow: var(--glow), 0 1px 0 var(--edge) inset;
  margin-bottom: 22px;
}
.install h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); letter-spacing: -.035em; margin: 0; }
.install .lede { margin: 10px 0 26px; }
.install-go { font-size: 1.02rem; padding: 14px 28px; box-shadow: var(--glow); }
.install-note { max-width: 34em; margin: 14px auto 0; min-height: 1.5em; font-size: .86rem; }
.install-perks {
  list-style: none; padding: 0; margin: 40px 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  width: 100%; max-width: 520px;
}
.install-perks li {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 8px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: inset 0 1px 0 var(--edge);
  font-family: var(--display); font-size: .86rem; font-weight: 500; color: var(--text-2);
}
.install-perks svg { color: var(--accent); }

/* ------------------------------------------------- collecting responses */

.collect-field { margin-top: 4px; }
.collect-note strong { color: var(--f-text, var(--text)); font-weight: 600; }
.live-link {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
}
.live-link .field { flex: 1 1 260px; }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--good);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent);
}
.sheet-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.sheet-steps > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; font-size: .92rem; line-height: 1.5; }
.sheet-n {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-family: var(--display);
  font-size: .8rem; font-weight: 600; background: var(--accent-wash); color: var(--accent-strong);
}
.sheet-script {
  width: 100%; font-family: var(--mono); font-size: .76rem; line-height: 1.45;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px; resize: vertical; white-space: pre;
}

/* ------------------------------------------- shared-link options (editor) */

.link-options {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px 4px; margin: 18px 0 0; display: grid; gap: 4px;
}
.link-options legend {
  padding: 0 6px; font-size: .78rem; font-weight: 600; color: var(--text-2);
  font-family: var(--display);
}
.link-option-hint { margin: 2px 0 10px 26px; }
.install-choices { display: grid; gap: 8px; margin: 0 0 12px 26px; }
.install-choices[hidden] { display: none; }
.install-choice {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; font-size: .9rem;
}
.install-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.install-choice input { width: auto; margin-top: 3px; accent-color: var(--accent); }
.install-choice strong { display: block; color: var(--text); font-weight: 600; }
.install-choice .muted { display: block; font-size: .82rem; margin-top: 2px; }
.held-waiting {
  margin: -4px 0 10px; font-size: .82rem; color: var(--text-2);
  padding: 6px 10px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

/* ------------------------------------------- editor: Items and Settings */

/* The two parts, as an underlined row across the card. */
.editor-tabs {
  display: flex; gap: 4px; margin: 10px 0 18px;
  border-bottom: 1px solid var(--line);
}
.editor-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--text-2);
  padding: 10px 14px 12px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.editor-tab:hover { color: var(--text); background: var(--surface-2); }
.editor-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.editor-tab[aria-selected="true"] { color: var(--accent-strong); border-bottom-color: var(--accent); }
.editor-tab .tab-count, .settings-tab .tab-count {
  font-size: .76rem; font-weight: 500; color: var(--muted);
}
.editor-tab .tab-count:empty, .settings-tab .tab-count:empty { display: none; }
.editor-panel[hidden], .settings-panel[hidden] { display: none; }

/* Settings' own four, as the pill strip the survey page uses for its views. */
.settings-tabs {
  display: flex; gap: 3px; flex-wrap: wrap; padding: 5px; margin: 0 0 18px;
  width: max-content; max-width: 100%;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--edge);
}
.settings-tab {
  appearance: none; border: 1px solid transparent; background: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display); font-weight: 600; font-size: .86rem; color: var(--text-2);
  padding: 7px 14px; border-radius: 999px;
}
.settings-tab:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.settings-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-tab[aria-selected="true"] {
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--btn-top), var(--btn-bot));
  border-color: color-mix(in srgb, var(--accent-strong) 55%, transparent);
}
.settings-tab[aria-selected="true"] .tab-count { color: inherit; opacity: .85; }
.settings-panel > div > :first-child { margin-top: 0; }

/* Sharing opens on the way to Share / Respond, then where answers go. */
.sharing-lead {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 16px;
  flex-wrap: wrap; padding: 12px 14px; margin-bottom: 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
}
.link-options:disabled { opacity: .55; }

/* Info's version history. */
.version-history { margin: 6px 0 10px; }
.version-history h4 { font-size: .86rem; margin: 0 0 6px; }
.version-list { margin: 0; padding-left: 20px; font-size: .88rem; line-height: 1.7; }
/* The pane is a grid item, whose minimum is its content's: without this the
   pill strip's natural width stretched the card past a phone's screen. */
.editor-pane, #editor-card { min-width: 0; }
@media (max-width: 420px) {
  .settings-tabs { width: 100%; justify-content: space-between; }
  .settings-tab { padding: 7px 10px; }
}
#version-input { max-width: 140px; }

/* The Notes box (Settings > Options), in the survey's own type rather than
   the browser's default for a textarea, which is a typewriter face. */
.notes-field textarea { font: inherit; font-family: var(--f-font, var(--sans)); width: 100%; resize: vertical; }

/* ------------------------------------------- the answering-side settings */

/* Styles > Logo: small, above the title. */
.survey-logo { display: block; max-width: 240px; max-height: 64px; width: auto; height: auto; margin: 0 0 12px; }
[data-survey-align="center"] .survey-logo, [data-survey-align="center"] + * .survey-logo { margin-inline: auto; }
.logo-preview { margin: 6px 0 0; }

/* Info: who runs it, and until when. */
.survey-contact, .survey-closes { font-size: .82rem; margin: 8px 0 0; }
.survey-welcome p { margin: 0 0 10px; line-height: 1.6; }
.survey-welcome p:first-child { font-size: 1.04rem; }

/* Options > Progress. */
.survey-progress { display: grid; gap: 6px; margin: 0 0 14px; }
.survey-progress-track {
  display: block; height: 8px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--f-accent, var(--accent)) 14%, var(--f-card, var(--surface)));
}
.survey-progress-fill {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: var(--f-accent, var(--accent)); transition: width .25s ease;
}
.survey-progress-label { font-size: .8rem; color: var(--f-muted, var(--muted)); }
@media (prefers-reduced-motion: reduce) { .survey-progress-fill { transition: none; } }

/* Options > Check before submitting. */
.survey-review .rec-detail { margin: 0; }

/* Styles > Larger text: the form and everything around it, a step up. */
.large-text { --f-size: 1.14rem; font-size: 1.1rem; }
.large-text .sform-desc, .large-text .small, .large-text .muted { font-size: .92rem; }
.large-text .sform-title { font-size: calc(var(--f-size) * .98); }

/* The editor: the CSS box, the link builder, the QR and embed controls. */
.code-input { font-family: var(--mono); font-size: .82rem; }
.prefill-row { margin-top: 8px; }
.prefill-row > span { min-width: 9em; }
.prefill .tip-body { padding-top: 8px; }
.qr-look {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px;
  margin: 16px auto 0; max-width: 560px;
}
.qr-look .field { margin: 0; }
.qr-look .grow { flex: 1 1 200px; }
.brand-controls { display: grid; gap: 6px; }
.brand-controls input[type="file"] { max-width: 100%; font-size: .85rem; }

/* Items: Collapse all sits with the questions, at the right of a slim bar. */
.items-bar { display: flex; justify-content: flex-end; margin: -6px 0 10px; }
.items-bar:has(+ #question-list:empty) { display: none; }

/* Settings: a heading per part of a tab, and the line that opens a tab. */
.settings-head {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  margin: 26px 0 0; font-family: var(--display); font-weight: 600;
}
.settings-panel .settings-head:first-child { margin-top: 0; }
.settings-lead { margin: 0 0 4px; color: var(--text-2); }
.settings-head + .link-options, .settings-head + .sharing-lead { margin-top: 10px; }

/*
 * On a phone: the browser's full screen adds next to nothing to an editor
 * that already fills the screen, so that button goes, and the other two
 * share a row above Share / Respond. The Share dialog's five tabs stay on one
 * row and scroll sideways rather than leaving one stranded on a second line.
 * And in the full-screen Preview a small frame sits in the middle, not
 * against the top.
 */
@media (max-width: 640px) {
  .editor-tools #fullscreen-editor { display: none; }
  .share-tabs { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
  .share-tabs::-webkit-scrollbar { display: none; }
  .share-tabs .seg-btn { flex: 0 0 auto; padding-inline: 11px; }
}
.phone-pane.is-overlay .phone-preview { align-items: center; padding-top: 0; }
.style-controls > .style-group { margin: 20px 0 0; }
.style-controls > .settings-lead + .style-group { margin-top: 12px; }
/* The logo picker as a button: the browser's own file input is hidden
   inside its label, which is what is clicked. */
.file-button { position: relative; overflow: hidden; cursor: pointer; }
.file-button input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }

/* Where each response is on its way to the Sheet (survey page, Responses). */
.up-tag {
  display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap;
  border: 1px solid currentColor;
}
.up-tag.up-ok { color: var(--good); }
.up-tag.up-wait { color: var(--warn, #b26b00); }
.up-tag.up-sent { color: var(--muted); }
.upload-summary .btn-row { margin-top: 10px; }

/* Quick entry: today's count and whether the page will work offline. */
.field-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px; margin: 0 0 14px; font-size: 13px;
}
.today-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.ready-chip {
  padding: 2px 10px; border-radius: 999px; font-weight: 600; font-size: 12px;
  border: 1px solid currentColor; white-space: nowrap;
}
.ready-chip[hidden] { display: none; }
.ready-chip.is-ready { color: var(--good); }
.ready-chip.not-ready { color: var(--warn, #b26b00); }