/* CueFlip — styles for /survey/ only. Kept out of the shared stylesheet so the legal and support pages carry none of this weight. Same variables, same restraint: monochrome, one accent for the selected state, no shadows beyond the one that lifts the language thumb, and no animation that a reader has to wait for. */ /* ---------- bilingual copy ---------- Both languages ship in the markup and CSS hides one of them, so the page is correct before any script runs: is the served state, and the language switch (or the reader's own browser language) flips the root attribute. Using display:none means the hidden language is also hidden from screen readers, which is the point — a reader should hear one language, not both interleaved. Every copy node carries its own lang attribute so VoiceOver picks the right voice for it. */ html[lang="en"] .zh, html[lang="zh"] .en { display: none; } /* ---------- page head ---------- The switch used to sit directly under the lead paragraph with nothing between them — measured at a 0px gap, which read as a stray pill dropped on the end of a sentence. It belongs on the eyebrow line instead: a control with a row of its own, above the title, where a locale switch is looked for. */ .head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; } .head-row .eyebrow { margin: 0; } /* ---------- language switch ---------- */ .lang-switch { /* inline-flex, not flex: as a block the pill stretches to the full measure and reads as a banner rather than a control. */ position: relative; display: inline-flex; flex: none; padding: 3px; background: var(--card); border: 1px solid var(--rule-faint); border-radius: 980px; } /* The moving part. A separate element rather than a background on the pressed button, because a background cannot travel between two elements — swapping it is the hard cut this replaces. */ .lang-thumb { position: absolute; z-index: 0; top: 3px; left: 3px; /* The track's inner width is 100% - 6px (3px of padding each side), so half of it is 50% - 3px. translateX(100%) then moves the thumb by exactly its own width and lands it on the second half. */ width: calc(50% - 3px); height: calc(100% - 6px); background: var(--bg); border: 1px solid var(--rule-faint); border-radius: 980px; transition: transform 280ms cubic-bezier(.32, .72, 0, 1); } .lang-switch:has(button[data-lang="zh"][aria-pressed="true"]) .lang-thumb { transform: translateX(100%); } .lang-switch button { appearance: none; border: 0; background: transparent; color: var(--fg-secondary); font: inherit; font-size: 13px; font-weight: 500; line-height: 1; /* flex-basis 0 with a shared minimum makes both halves exactly equal, which is what lets the thumb be a flat 50% instead of a measured width. */ flex: 1 1 0; min-width: 82px; padding: 9px 4px; border-radius: 980px; cursor: pointer; /* Above the thumb, or the thumb paints over the label. */ position: relative; z-index: 1; transition: color 200ms ease; } .lang-switch button[aria-pressed="true"] { color: var(--fg); font-weight: 600; } @media (prefers-reduced-motion: reduce) { .lang-thumb, .lang-switch button { transition: none; } } /* Hidden until scripting proves it can do anything. Without JS the switch cannot work, and a dead control is worse than no control. */ .lang-switch[hidden] { display: none; } /* ---------- form skeleton ---------- */ form { margin: 0; } fieldset { /* fieldset defaults to min-width:min-content, which stops it shrinking inside a grid or flex parent and forces a horizontal scrollbar on a phone. This single line is what keeps the rating rows narrow. */ min-width: 0; margin: 0; padding: 0; border: 0; } /* A free-text question is a single control, so its prompt is a