/* Friendly, rounded self-hosted fonts (OFL, subset to latin). Nunito for body — high x-height, very legible for younger readers; Fredoka for display headings — rounded and playful. Both are VARIABLE (one file covers the whole weight range). Self-hosted so the strict CSP is happy and the app renders in-font offline (both files are precached in sw.js). font-display:swap so first paint never blocks on the download; the system-ui fallback tail below covers that moment. */ @font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("/fonts/nunito-var.woff2?v=1") format("woff2"); } @font-face { font-family: "Fredoka"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/fonts/fredoka-var.woff2?v=1") format("woff2"); } :root { color-scheme: dark; --font-display: "Fredoka", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --bg: #0b0b0b; --surface: #1a1a19; --surface-2: #242422; --border: #2f2f2c; --text-1: #ffffff; --text-2: #b9b8b1; --accent: #3987e5; --accent-2: #1baf7a; --good: #2ecc71; /* success/mastered green — was used (learn plan) but never defined here */ --track: #33332f; --danger: #d95926; /* Medium severity. Never the only carrier of that meaning — every severity chip also spells its level out in words (see .chip.sev), because colour alone excludes the ~1 in 12 men with a colour-vision deficiency on a screen that gates publication. */ --warn: #d9a12b; /* Height reserved at the bottom of the viewport for the fixed bottom bar (version label + create button — one transparent overlay now, no separate version strip). Every element that anchors near the bottom edge adds this to its own offset, so the bar overlays nothing. One number, one place to change it. Signed out the bar holds only the version line, and the override further down shrinks this to match. */ --navbar-h: 56px; } :root[data-theme="light"] { color-scheme: light; --bg: #f4f4f2; --surface: #ffffff; --surface-2: #f0f0ed; --border: #e2e2dd; --text-1: #0b0b0b; --text-2: #52514e; --accent: #2a78d6; --accent-2: #008300; --good: #0a8a3f; --track: #e6e6e2; /* Darker than the dark theme's: #d9a12b on white is under 3:1 and unreadable. */ --warn: #8a5a00; /* Same reasoning, and it had been missed. Measured in the browser, not eyeballed: the dark theme's #d95926 scored 3.53:1 on this background — under AA — and it is used BOTH as a text colour (rejection reasons, overdue ages, the quiz "Not quite") and as a fill behind WHITE text (.chip.sev-high, .chip.st-terminated), which scored 3.88:1 the other way. Both readings were failing, so darkening fixes both at once: 5.89:1 as text here, 6.49:1 for white on it. */ --danger: #a8380f; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; margin: 0; overscroll-behavior-y: none; } /* The pager is 300vw wide (context + feed + stats side by side); its off-screen pages must be clipped at the ROOT, or the document itself scrolls sideways — clipping on alone does not reduce documentElement.scrollWidth. `clip` (not `hidden`) because it clips without turning into a scroll container, so the feed and the stats page keep owning their own vertical scrolling inside. */ /* overscroll-behavior-x: none disables the browser's swipe-from-edge history navigation (2026-07-25). The whole app is built on horizontal swipes — the feed pager, and now the profile's right-swipe to Settings — and a right-swipe starting near the left edge would otherwise be eaten by "go back" instead of moving the pager/panel. The feed pager already preventDefaults its gesture; this protects the rest, defence-in-depth. */ html { overflow-x: clip; overscroll-behavior-x: none; } body { background: var(--bg); color: var(--text-1); font: 16px/1.5 "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow-x: clip; overscroll-behavior-x: none; } /* Headings carry the playful display face app-wide; the fallback tail keeps them sane pre-load. */ h1, h2, h3 { font-family: var(--font-display); } /* ---- the feed: one poll per screen, snap on swipe ---------------------- */ /* ---- the horizontal pager: [ context | feed | results ] -------------------- Three full-width pages in one 300vw row, the feed in the middle. data-view slides between them; the drag itself is tracked live by js/statspager.js, which sets an inline transform and the .dragging class (transition off) so the page follows the finger, then hands back to this transition to settle. The RESTING position is -100vw (the feed), which is why every offset below is one page further left than the two-page version of this pager. */ .pager { display: flex; width: 400vw; /* [ context | feed | stats | comments ] — comments joined the strip 2026-07-24 */ height: 100dvh; transform: translateX(-100vw); transition: transform .3s cubic-bezier(.22, .61, .36, 1); will-change: transform; } /* Tell the browser up front that only vertical panning is native here, so a horizontal touch stream is left to the pager's JS. This is defense-in-depth: what actually decides the gesture is statspager.js cancelling the FIRST touchmove (the browser grants exactly one cancelable move — see the JITTER_PX comment there), but pan-y is the declared contract real browsers use for arbitration, and it prevents the UA starting a scroll during any window JS has not yet claimed. It sits on the two PAGES (the scroll containers), not on .pager: arbitration walks the chain from the touched element up to the scroller, and .pager is above the scroller, so a value there never enters the decision — measured, not assumed (tests/e2e/swipe.spec.js failed with it on .pager). */ /* touch-action: pan-y must sit on the actual SCROLL CONTAINER, or the pager cannot claim a horizontal swipe from it (statspager.js preventDefaults the first cancelable touchmove; an `auto` scroller never yields one — measured). The stats/context pages ARE the scroller (.results-page), but the comments page delegates scrolling to .comments-body (its .comments-page is overflow:hidden), so that inner scroller needs pan-y too — without it, you could not swipe back OUT of the comments page on a real phone (2026-07-25). */ #feed, .results-page, .comments-body { touch-action: pan-y; } .pager[data-view="context"] { transform: translateX(0); } .pager[data-view="stats"] { transform: translateX(-200vw); } .pager[data-view="comments"] { transform: translateX(-300vw); } .pager.dragging { transition: none; } /* A quiz or bracket has no stats page (the breakdown is poll-only). Collapse the empty stats page so its COMMENTS become the immediate left-swipe (statspager.js's `.no-stats` mode) — instead of the left-swipe opening a blank page, or, as before this, being refused entirely so nothing happened (owner, 2026-07-26). Comments then sits where stats did, at -200vw. */ .pager.no-stats #results { display: none; } .pager.no-stats[data-view="comments"] { transform: translateX(-200vw); } #feed { flex: 0 0 100vw; width: 100vw; height: 100dvh; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; scrollbar-width: none; } #feed::-webkit-scrollbar { display: none; } .slide { height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; display: grid; grid-template-rows: auto 1fr auto; /* The topbar is fixed and overlays the slide, so the first row (the badges) has to start below it — otherwise a category badge sits under the wordmark. Only showed up once polls actually carried a category. */ /* The bottom padding also clears the fixed version footer AND the tab bar beneath it — without both, the like/share rail and the last option row sit underneath them. */ /* 8px side gutters, down from 18 (product owner, 2026-07-23): the post takes the full width of the screen. */ padding: calc(max(10px, env(safe-area-inset-top)) + 58px) 8px calc(max(18px, env(safe-area-inset-bottom)) + var(--navbar-h)); position: relative; } /* Desktop: don't stretch a phone layout across a monitor. */ @media (min-width: 760px) { .slide { max-width: 620px; margin: 0 auto; } } /* ---- the ambient backdrop (product owner, 2026-07-23) ---------------------- A slide is no longer a dead black/white rectangle: js/render.js drops a decorative layer behind every post. It is absolutely positioned and clipped, so it changes not one thing about the grid the content sits in, and the content rows are lifted above it by z-index alone (below). pointer-events:none so nothing here can ever swallow a tap meant for an option or the rail. */ .slide-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .slide > .badge-row, .slide > .middle, .slide > .foot { position: relative; z-index: 1; } /* The colour wash: two soft blobs of the poll's own hue, one warm-shifted, fading to nothing through the middle so the base background still carries the text's contrast. Painted UNDER the blurred image (a real child, so it stacks on top) — the image wins where there is one, the wash carries every text-only post. */ .slide-bg::before { content: ""; position: absolute; inset: -20%; /* A four-stop MESH rather than the two blobs this started as (2026-07-24): three hues stepped off the post's own, plus a deep anchor, so a text-only post reads as a considered gradient instead of a flat tint. inset:-20% gives the drift below room to move without ever exposing an edge. */ /* Layer one is fine grain, over the mesh. A flat CSS gradient bands visibly across a phone-sized dark screen; a little noise breaks the banding up and reads as texture rather than as a defect. The SVG is inline (no request), tiles at its intrinsic 140px, and the rect's own alpha keeps the effective strength around .06 — present when you look for it, invisible when you do not. */ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"), radial-gradient(62% 48% at 14% 10%, hsl(var(--slide-hue, 220) 74% 54% / .42), transparent 62%), radial-gradient(58% 46% at 88% 22%, hsl(calc(var(--slide-hue, 220) + 38) 70% 50% / .34), transparent 64%), radial-gradient(64% 52% at 78% 88%, hsl(calc(var(--slide-hue, 220) + 72) 68% 52% / .36), transparent 66%), radial-gradient(70% 60% at 30% 76%, hsl(calc(var(--slide-hue, 220) - 28) 62% 42% / .28), transparent 70%); /* Very slow, very small: a 34s breathe that a reader notices only as the screen feeling alive, never as movement competing with a video post or the answer flourish. Paused outright under reduced motion (below). */ animation: bg-drift 34s ease-in-out infinite alternate; /* Deliberately NO will-change: this pseudo-element exists on every slide in the feed, and a promoted layer each would cost real memory on a phone for a 34s drift the compositor promotes by itself while it runs. */ } @keyframes bg-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(2.5%, -2%, 0) scale(1.06); } } /* The post's own picture, blurred to a colour field — the "now-playing" bloom. Scaled up so the blur has no hard edges, dimmed so the large bold text stays legible over the base background showing through. */ .slide-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); filter: blur(60px) saturate(1.35); opacity: .40; } /* A gentle top-and-bottom scrim toward the base colour, so the badges and the footer row keep a clean ground while the colour blooms in the middle where the question is. */ .slide-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--bg), transparent 18% 76%, var(--bg)); opacity: .64; } :root[data-theme="light"] .slide-bg-img { opacity: .30; } .badge-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .badge { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); padding: 5px 10px; border-radius: 999px; } .badge.ai { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } /* The Following feed's "{name} reposted" attribution (Phase 20). A link, not a label — it points at whoever surfaced this — so it drops the uppercase/letter-spacing shout of a category chip and reads as a sentence, tinted the same green the inbox uses for the `reposted` notification so the two obviously mean the same thing. */ .badge.repost { display: inline-flex; align-items: center; gap: 5px; text-transform: none; letter-spacing: 0; font-weight: 650; color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 40%, transparent); text-decoration: none; max-width: 100%; } .badge.repost span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .badge.repost svg { flex: none; } /* The feed-mode switch (Phase 20), centred in the topbar. Absolutely positioned so it sits dead-centre regardless of how wide the wordmark or the action cluster are, and pointer-events re-enabled because the topbar itself disables them (it is a gradient scrim that must not eat taps meant for the feed). Hidden until signed in. */ /* TikTok-style top tabs (owner, 2026-07-26): plain text, the active one lit and underlined, the rest dimmed — NOT a centred pill. It was an absolutely-centred pill before, which grew wide enough with a third tab to slide under the bell and dashboard icons. Now it is an in-flow, flex-shrinkable strip that lives in its OWN track between the wordmark and the icons, so it can never overlap them. When the tabs outgrow that track they scroll horizontally and fade out at the edges ("morph into invisible") rather than pushing anything. */ .feed-modes { display: none; flex: 0 1 auto; min-width: 0; gap: 2px; margin: 0 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; pointer-events: auto; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); } .feed-modes::-webkit-scrollbar { display: none; } html.signed-in .feed-modes { display: flex; } .feed-mode { flex: 0 0 auto; position: relative; border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 4px 6px; line-height: 1.15; white-space: nowrap; opacity: 0.65; } .feed-mode.is-active { color: var(--text-1); opacity: 1; } /* The active underline, inset so it sits under the word, not the tap padding. */ .feed-mode.is-active::after { content: ''; position: absolute; left: 7px; right: 7px; bottom: -1px; height: 2.5px; border-radius: 2px; background: var(--accent); } .feed-mode:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* Wheel selector (tabwheel.js adds .tw). The same tabs, laid out as a rolling picker: JS positions each tab every frame with an inline transform + opacity, so these rules only set the stage — a fixed-height, clipped, edge-faded strip whose children stack at its centre. touch-action:none hands every drag to the wheel (it would otherwise try to pan the page). */ /* Shown to EVERYONE (2026-08-09): a signed-out reader lands in Learn and needs the wheel to move between Learn and the feed. The per-account tabs (Following/Updates/Inbox/Dashboard) are hidden individually until auth reveals them, so an anonymous wheel carries just Latest + Learn. */ .feed-modes.tw { display: block; } .feed-modes.tw { position: relative; height: 34px; overflow: hidden; flex: 1 1 auto; min-width: 0; margin: 0 6px; perspective: 340px; /* the dial's 3D depth — tabs angle away in it (tabwheel.js) */ touch-action: none; user-select: none; -webkit-user-select: none; -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent); } /* CYLINDRICAL SHADING — top and bottom edges fade to the background so the row reads as the curved face of a round dial; the tabs themselves are the ones that rotate away in 3D. Inert. */ .feed-modes.tw::after { content: ''; position: absolute; inset: 0; z-index: 101; pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 78%, transparent), transparent 32%, transparent 68%, color-mix(in srgb, var(--bg) 78%, transparent)); } .feed-modes.tw .feed-mode { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* JS appends the per-tab dial transform (rotateY + depth) */ transform-origin: center center; backface-visibility: hidden; will-change: transform, opacity; padding: 3px 8px; font-size: 14px; opacity: 1; transition: color 0.15s ease; } /* POSITION DOTS — one per wheel tab, under the dial (the dial only shows ~3 at once). They tell the reader how many tabs there are and which one is selected. Built + tracked by tabwheel.js. */ .feed-dots { display: flex; position: absolute; left: 0; right: 0; bottom: 8px; z-index: 102; justify-content: center; align-items: center; gap: 4px; pointer-events: none; } .feed-dot { width: 3px; height: 3px; border-radius: 50%; background: color-mix(in srgb, var(--text-1) 26%, transparent); transition: width 0.2s ease, background-color 0.2s ease; } .feed-dot.on { width: 9px; border-radius: 2px; background: var(--accent); } /* min-width: 0 for the same reason as min-height: 0 — a grid item's min size is auto, so wide content (the bracket tree's columns) would otherwise blow the track open past the slide's padding instead of shrinking to fit. Seen, not theorised: the champion view rendered with its title unwrapped and its button cut off at the viewport edge. */ /* `safe center` centres the content when it FITS, but falls back to top-alignment when it does not — without it, a tall post (image + four options + a source line) overflows a flex column equally top AND bottom, and the image rode up UNDER the category badges (owner's screenshot, 2026-07-23). `safe` keeps the image below the badges and lets the overflow fall off the bottom instead, where the slide's own padding already clears the chrome. */ .middle { display: flex; flex-direction: column; justify-content: safe center; min-height: 0; min-width: 0; } .q { font-size: clamp(26px, 6.4vw, 40px); font-weight: 750; line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 20px; text-wrap: balance; } /* ---- generated media and news attribution ------------------------------ */ /* The image sits ABOVE the question and is capped by viewport height, not by a fixed pixel size: one poll fills one screen here, so an image tall enough to push the options below the fold breaks the whole interaction on a short phone. */ .slide-media { /* Capped a little lower than before (was 38vh/320) so an image post with four options and a source line has room to fit one screen instead of overflowing — the other half of the badge-clip fix above. A small top margin keeps a hair of air between the image and the badges even when `safe center` does align to the top. */ width: 100%; max-height: min(31vh, 270px); object-fit: cover; border-radius: 14px; border: 1px solid var(--border); margin: 6px 0 16px; background: var(--surface-2); /* A missing or slow image must not shift the question downward as it loads. */ aspect-ratio: 16 / 9; } /* A quiz/bracket also carries a title, a progress line and up to four choices, so its banner is capped shorter than a poll's to keep the answers on one screen (owner, 2026-07-26: the ambient bloom alone read as "no image"). */ .quiz-media { max-height: min(20vh, 180px); margin: 4px 0 12px; } /* ---- the full-bleed video post (owner, 2026-07-23) ------------------------ A video post fills the whole slide with the clip, TikTok-style, and the question and options float on top of it. The clip is a full-bleed element behind the content; object-fit: cover fills a portrait screen from a landscape clip by cropping the sides (the subject is centre-framed by the generation prompt). pointer-events: none so a tap always reaches the option under the finger, never the video. z-index sits it above the hue-wash backdrop but below the content rows (which are z-index 1). */ .slide-fill { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } /* A legibility scrim over the clip. The content (question + options) is one block anchored to the BOTTOM, so the scrim is clear across the top — where the clip is the hero — and darkens through the lower half where the text sits. A light touch at the very top keeps the badges legible. Painted after the fill, before the content. */ .slide.video-post::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.42) 0%, rgba(0,0,0,.12) 15%, transparent 32%, transparent 44%, rgba(0,0,0,.45) 68%, rgba(0,0,0,.84) 100%); } /* Question and options are ONE cohesive block anchored to the bottom of the slide, with the clip as a full-bleed hero above (owner, 2026-07-28). The old layout split them — question pinned top, options pinned bottom via margin-bottom:auto — which left a dead strip of empty video between them. The clip is the full-bleed BACKGROUND, visible behind everything, so grouping the content hides none of it; it just stops wasting the middle of the screen. */ .slide.video-post .middle { justify-content: flex-end; } .slide.video-post .q { text-shadow: 0 2px 14px rgba(0,0,0,.65); } .slide.video-post .source { text-shadow: 0 1px 8px rgba(0,0,0,.7); } .slide.video-post .count { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.7); } /* Semi-transparent option pills with a frosted blur, so the reader sees the video THROUGH them and can still read and tap each one. The fill bar and the voted/mine states are unchanged — they layer inside the same translucent pill. */ .slide.video-post .opt { background: color-mix(in srgb, var(--surface) 52%, transparent); border-color: color-mix(in srgb, #fff 22%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); } @media (hover: hover) { .slide.video-post .opt:hover { border-color: var(--accent); } } /* The admin video panel's toggle and success line. */ .video-toggle { display: flex; align-items: center; gap: 8px; margin: 6px 0 16px; font-weight: 600; } .video-ok { color: var(--accent-2); font-weight: 600; margin: 8px 0 0; } /* The found-photo credit: legible but subordinate — it must not compete with the question. Sits tight under the image, eating into its bottom margin. */ .media-credit { display: block; margin: -14px 2px 14px; font-size: 11px; color: var(--text-2); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.media-credit:hover { text-decoration: underline; } /* On a quiz/bracket card the credit follows the source line rather than an image, so the negative top margin (which tucks it under a poll's photo) would drag it up over the source. Stack them instead. */ .source + .media-credit { margin-top: 6px; } .source { /* align-self, NOT display:inline-block. `.middle` is a flex column, so this anchor is a flex item and stretches to the full card width regardless of its display — which drew the underline right across the card as if it were a divider. */ align-self: flex-start; margin-top: 16px; font-size: 13px; color: var(--text-2); text-decoration: none; border-bottom: 1px solid var(--border); } .source:hover, .source:focus-visible { color: var(--accent); border-bottom-color: var(--accent); } /* Closed is stated in words in the badge and the footer; the colour only reinforces it, so nothing here is the sole carrier of the meaning. */ .badge.closed { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); } /* The AI marker beside a simulated user's name. Small, but never subtle enough to miss: disclosure that a reader has to hunt for is not disclosure. */ .badge.sm { font-size: 10px; padding: 1px 6px; letter-spacing: 0.06em; vertical-align: middle; } /* Right padding keeps every option's percentage text (right-aligned inside the pill) clear of the action rail, which floats over the lower-right corner of the slide — see .actions below. Shared by polls and quizzes; both render into .opts. */ .opts { display: flex; flex-direction: column; gap: 10px; padding-right: 62px; } /* Two-per-row when the options are short (render.js's optionsLayout) — half the vertical space, so more of the card is usable (owner, 2026-07-26). Slightly tighter type/padding so a date or short phrase sits comfortably on half the width. */ .opts.two-col { display: grid; grid-template-columns: 1fr 1fr; align-content: start; } .opts.two-col .opt { min-height: 50px; padding: 12px 14px; font-size: 15px; } .opts.two-col .opt .label { gap: 8px; } .opt { position: relative; width: 100%; text-align: left; font: inherit; font-weight: 600; color: var(--text-1); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 15px 18px; min-height: 56px; cursor: pointer; overflow: hidden; transition: transform .12s ease, border-color .15s ease, background .15s ease; } .opt:active { transform: scale(.985); } .opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (hover: hover) { .opt:hover { border-color: var(--accent); } } /* Result state: the bar is a background layer inside the same pill, so the option doesn't jump position when results appear. */ .opt .bar { position: absolute; inset: 0 auto 0 0; width: 0; background: color-mix(in srgb, var(--accent) 26%, transparent); /* No leading edge until results exist, or a 0%-wide bar shows a sliver. */ border-right: 0 solid var(--accent); transition: width .5s cubic-bezier(.22,.8,.28,1); } .voted .opt .bar { border-right-width: 2px; } .opt.mine .bar { background: color-mix(in srgb, var(--accent-2) 26%, transparent); border-right-color: var(--accent-2); } .opt .label { position: relative; display: flex; justify-content: space-between; gap: 14px; align-items: center; } .opt .pct { font-variant-numeric: tabular-nums; font-weight: 750; opacity: 0; transition: opacity .3s ease .15s; } .voted .opt .pct { opacity: 1; } .voted .opt { cursor: default; } .tick { color: var(--accent-2); font-weight: 800; } /* ---- the answer flourish (product owner, 2026-07-23) ---------------------- Voting or answering should feel like something happened. Three light touches, none of which move layout: The bars sweep in as a CASCADE rather than all at once — each option's fill starts a beat after the one above, so the result "counts up the board" instead of snapping. (The delay only applies once .voted is on, so it never delays the empty resting bar.) */ .voted .opts .opt:nth-child(2) .bar { transition-delay: .05s; } .voted .opts .opt:nth-child(3) .bar { transition-delay: .10s; } .voted .opts .opt:nth-child(4) .bar { transition-delay: .15s; } .voted .opts .opt:nth-child(5) .bar { transition-delay: .20s; } /* The option the reader actually chose gives a single spring of acknowledgement. Driven by js/vote.js adding .just-voted on the optimistic paint ONLY — never on a scroll-back re-render of an already-voted poll, which would replay it uninvited. */ @keyframes opt-confirm { 0% { transform: scale(1); } 35% { transform: scale(1.03); } 100% { transform: scale(1); } } /* A glowing ring that flares out of the chosen option and dissolves — the "something happened!" flash, paired with the confetti and the buzz js/vote.js fires (owner, 2026-07-23: "make it exciting"). Two animations on the one element, comma-separated: the spring above and this glow. */ @keyframes confirm-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-2) 60%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } } .opt.just-voted { animation: opt-confirm .45s cubic-bezier(.34,1.56,.64,1), confirm-glow .6s ease-out; } /* A quiz reveals its answer through a full re-render, so a CSS animation on the freshly marked options fires on its own — no JS hook needed. */ .quiz-opt.right, .quiz-opt.wrong { animation: opt-confirm .45s cubic-bezier(.34,1.56,.64,1); } /* The tick/cross pops in with a spring instead of just appearing. */ @keyframes tick-pop { 0% { transform: scale(0); opacity: 0; } 55% { transform: scale(1.35); } 100% { transform: scale(1); opacity: 1; } } .tick { display: inline-block; } .opt.mine .tick, .quiz-opt.right .tick, .quiz-opt.wrong .tick { animation: tick-pop .4s cubic-bezier(.34,1.56,.64,1) both; } /* ---- quizzes (Phase 8) --------------------------------------------------- A quiz reuses .opt so a question looks like a poll — same target size, same rhythm — and adds only what marking an answer right or wrong requires. */ .quiz-title { margin: 0 0 4px; font-size: 19px; font-weight: 750; color: var(--text-2); } .quiz .q { margin: 0 0 14px; } .quiz-progress { font-size: 13px; margin: 0 0 6px; } /* .dim is defined once, further down, and already carries the colour and size this needs. A second copy here was redundant — the later rule won anyway. */ /* Correct and incorrect are carried by a tick/cross in the label as well as by colour, because colour alone is invisible to a reader who cannot tell red from green — the same rule .badge.closed follows above. */ .quiz-opt.right { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, var(--surface)); } .quiz-opt.wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, var(--surface)); } .quiz-opt:disabled { cursor: default; opacity: 1; } .quiz-opt.wrong .tick { color: var(--danger); } .quiz-feedback { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; } .quiz-feedback .quiz-verdict { margin: 0; font-weight: 750; } .quiz-feedback.right .quiz-verdict { color: var(--accent-2); } .quiz-feedback.wrong .quiz-verdict { color: var(--danger); } .quiz-feedback .explain { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.45; } .quiz-feedback .btn { align-self: flex-start; margin-top: 6px; } .quiz-error { color: var(--danger); font-size: 14px; margin: 10px 0 0; } .quiz-retake { margin-top: 14px; } /* The score comparison (owner, 2026-07-24): You / Average / Best side by side, so a finished quiz answers "how did I do against everyone else", not just "here is a number". Three equal columns; the reader's own cell is tinted with the accent so the eye lands on where THEY placed first, and the best cell is warmed so the target reads as the thing to chase. */ .quiz-beat { margin: 12px 0 0; font-size: 15px; font-weight: 650; color: var(--text-1); } .quiz-beat strong { color: var(--accent); } /* Tone-tuned finish headline: WOW a strong score, warmly ENCOURAGE a weak one. */ .quiz-beat.tone-wow { font-size: 17px; font-weight: 800; color: #ffd23f; } .quiz-beat.tone-wow strong { color: #ffd23f; } .quiz-beat.tone-encourage { color: var(--text-1); font-weight: 700; } .quiz-compare { margin: 10px 0 2px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 340px; } .quiz-compare .cmp { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); } .quiz-compare .cmp-n { font-size: 22px; font-weight: 800; line-height: 1; color: var(--text-1); } .quiz-compare .cmp-l { font-size: 12px; font-weight: 600; color: var(--text-2); } .quiz-compare .cmp-you { background: color-mix(in srgb, var(--accent) 20%, var(--surface-2)); border-color: var(--accent); } .quiz-compare .cmp-you .cmp-n { color: var(--accent); } .quiz-compare .cmp-best { background: color-mix(in srgb, var(--accent-2) 16%, var(--surface-2)); border-color: var(--accent-2); } .quiz-compare-n { font-size: 12px; margin: 4px 0 0; } .quiz-compare-few { font-size: 14px; margin: 12px 0 0; line-height: 1.45; max-width: 340px; } /* ---- brackets (Phase 10) ------------------------------------------------- */ .bracket-progress { font-size: 13px; margin: 0 0 6px; } .bracket-start { margin-top: 10px; } /* The matchup: two big cards with a small "vs" between — one thumb-reach column, reusing .opt so the tap targets match a poll's. */ .bracket-vs { display: flex; flex-direction: column; gap: 6px; } .bracket-vs .bracket-opt { min-height: 72px; } .bracket-vs-label { align-self: center; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; } /* The personal tree (R4.3): one column per round, space-around so a later round's boxes sit between the pair that fed them. Wide brackets scroll inside their own box rather than the page — same rule as every wide element here. */ .tree { display: flex; gap: 10px; align-items: stretch; margin: 12px 0; overflow-x: auto; max-width: 100%; } .tree-col { display: flex; flex-direction: column; justify-content: space-around; gap: 4px; min-width: 0; flex: 1; } .tn { border: 1px solid var(--border); border-radius: 8px; padding: 3px 8px; font-size: 12px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 15ch; } .tn.bye { border-style: dashed; opacity: .35; min-height: 1.6em; } .tn.champ { border-color: var(--accent-2); font-weight: 750; background: color-mix(in srgb, var(--accent-2) 14%, var(--surface)); } .bracket-crowd { margin: 4px 0 0; font-size: 14px; line-height: 1.45; } .bracket-retake { margin-top: 12px; } /* ---- composing a quiz --------------------------------------------------- */ .quiz-question { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px 14px; margin: 0 0 12px; min-width: 0; } .quiz-question legend { font-size: 13px; font-weight: 700; color: var(--text-2); padding: 0 6px; } /* The radio and its text field on one row, so "which of these is right" reads as a single choice down the column rather than as eight unrelated controls. */ .quiz-choice-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .quiz-choice-row .quiz-choice { flex: 1; min-width: 0; margin: 0; } /* A radio is a small target; the label around it gives it a comfortable one without changing how it looks. */ .quiz-correct { display: flex; align-items: center; padding: 8px; margin: -8px 0 -8px -8px; cursor: pointer; } /* A button that reads as a link. Used for "Making a quiz instead?" — it is a control, not navigation, so it stays a