/* The Slider — Mockup F polish. The SVG stage uses viewBox="0 0 390 844" + preserveAspectRatio="xMidYMid meet", so the browser natively scales-and-centers the spec frame inside any viewport. No CSS transforms, no JS scale logic. Type stacks: webfonts loaded in (Google Fonts). Source Serif 4 for question text, Inter for all chrome. System fallbacks present so the page reads correctly while fonts load (display=swap). */ :root { --serif: "Source Serif 4", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; --mono: ui-monospace, "SF Mono", Menlo, monospace; --t-fast: 120ms ease; --t-theme: 220ms ease; /* color swap when theme toggles */ } /* Light palette (spec §2.10) — the default, applied at :root. JS sets data-theme="light" or data-theme="dark" at boot based on localStorage, falling back to prefers-color-scheme when no explicit override exists. --chip-bg / --accent-gold are M2 phase C additions for the tutorial chip. */ :root { --bg: #FDFCF9; --ink: #1A1A1A; --secondary: #6F6D67; --rule: #D9D5CB; --puck: #1A1A1A; --puck-glow: none; --sheet-bg: #F4F0E8; --chip-bg: #1A1A1A; /* dark grey/black pill */ --accent-gold: #C5950E; /* WCAG AA on --chip-bg (~6.8:1) */ } /* Dark palette (spec §2.10). Applied when data-theme="dark" is set on the root element. Puck gets an outer glow per spec. */ :root[data-theme="dark"] { --bg: #0E0E10; --ink: #F3EEE3; --secondary: #8A867D; --rule: #2B2B2E; --puck: #F3EEE3; --puck-glow: drop-shadow(0 0 16px rgba(243, 238, 227, 0.35)); --sheet-bg: #16161A; --chip-bg: #1F1F22; /* slightly lighter than page bg, distinct */ --accent-gold: #E0B83A; /* brighter on dark page (~9:1 on chip-bg) */ } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; overscroll-behavior: none; touch-action: manipulation; /* Smooth theme swap so the page doesn't snap from light to dark. Targets the colors that actually change; avoids transitioning everything (which would also animate gesture-driven puck redraws unnecessarily). */ transition: background-color var(--t-theme), color var(--t-theme); } #stage { display: block; width: 100vw; height: 100dvh; /* dynamic viewport height — accounts for iOS URL bar */ user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: pan-y; /* allow vertical page scroll on the canvas; the puck (below) still captures its own drag */ } /* The puck owns its drag — dragging it must never scroll the page. Its hit circle opts out of scrolling, so a touch ON the slider engages it while a touch elsewhere on #stage falls through to a normal vertical page scroll (Jonny, 2026-06-30). */ #puckHit { touch-action: none; } /* The arc-shaped drag band (index.html #arcHit) is no-scroll along the entire line, so the finger stays on a non-scrolling surface for the whole drag — only this strip is no-scroll, leaving the area above/below the arc free to pan. */ #arcHit { touch-action: none; cursor: grab; } #puckGroup.dragging #arcHit { cursor: grabbing; } /* SVG text styles ---------------------------------------------------------- */ .counter { font-family: var(--sans); font-size: 17px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--ink); font-variant-numeric: tabular-nums; /* "1 / 5" and "10 / 12" align identically */ } .progress-bg { stroke: var(--rule); stroke-width: 2.5; } .progress-fg { stroke: var(--ink); stroke-width: 2.5; } .live-label { font-family: var(--sans); /* Bumped 17 → 28 px to match the question's visual weight — the founder's call 2026-05-07: "important for them to be aware of their answer when they present it." Longest label ("Yes Yes Yes Yes Yes") at 28 px is slightly wider than the question's column; that's intentional — it lets the answer dominate as the puck approaches an extreme. */ font-size: 28px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--ink); opacity: 0; transition: opacity 120ms ease; } .live-label.visible { opacity: 1; } .arc-track { stroke: var(--rule); stroke-width: 3.5; stroke-linecap: butt; transition: stroke var(--t-theme); } /* Theme-color transitions on the major chrome elements so the swap is smooth end-to-end, not just on body. Excluded: the puck (no transition — it needs to track the user's thumb in real time) and the live-label visibility class (its own 120 ms fade). */ .counter, .live-label, .end-label, #puck { transition: fill var(--t-theme); } .progress-bg, .progress-fg { transition: stroke var(--t-theme); } .tutorial-chip rect { transition: fill var(--t-theme); } .tutorial-chip text, .tutorial-skip-label { transition: fill var(--t-theme); } .corner-icon { transition: fill var(--t-theme), stroke var(--t-theme); } .corner-label { transition: fill var(--t-theme); } .picker-sheet, .completion, .interstitial { transition: background-color var(--t-theme); } .end-label { font-family: var(--sans); font-size: 22px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--secondary); } /* Gold accents — applied on the visible-joke step at the end of the tutorial (the "both sides are YES" reveal). End labels + live label tint gold so the user gets the joke at a glance. Tutorial-only; toggled by render(). */ .end-label.gold, .live-label.gold { fill: var(--accent-gold); } #puck { fill: var(--puck); pointer-events: none; /* hits pass through to #puckHit */ filter: var(--puck-glow); /* dark-mode glow per §2.10 */ } #puckHit { cursor: grab; } #puckGroup.dragging #puckHit { cursor: grabbing; } /* HTML inside foreignObject ----------------------------------------------- */ .question { margin: 0; font-family: var(--serif); font-weight: 400; /* 22 px is the spec default (§2.1). Short questions used to look weirdly emphasized at the 28 px we tried; this size feels right for both 3-word and 3-line prompts. JS fitQuestionText() shrinks toward 18 px only for particularly long questions. */ font-size: 22px; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); } /* Info-screen reading mode (question_type === "info_screen"). Preserve the admin's line breaks, left/top-align, and scroll if the content overruns the tall reading box (foreignObject height is bumped to 560 px in JS). */ .question.info-screen { white-space: pre-wrap; text-align: left; height: 100%; max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 6px; } .status { /* M1 instrumentation — gesture-math signals after each commit. Hidden by default in the polished build; the JS boot code removes `hidden-debug` when ?debug=1 is in the URL so the panel re-appears for development. */ font-size: 10px; line-height: 1.4; color: var(--secondary); font-family: var(--mono); white-space: pre-wrap; pointer-events: none; min-height: 14px; } /* Default: hide the entire status foreignObject. JS un-hides on ?debug=1. */ foreignObject.status-fo { display: none; } foreignObject.status-fo.debug { display: block; } /* CW-221: a failed save is surfaced HERE (un-hidden with .error) as readable text, not as the 10px mono instrumentation the panel normally carries. Cleared on the next attempt. */ foreignObject.status-fo.error { display: block; } foreignObject.status-fo.error .status { font-family: inherit; font-size: 14px; line-height: 1.35; text-align: center; color: var(--ink, currentColor); } /* ----- Navigation buttons (Mockup F "ghost-pill" §2.1 item 5) ------------- 1 px primary-ink border, transparent fill, 40 px tall, pill radius 999 px. Inter Medium 13 px UPPERCASE letter-spaced 0.08em. Phase A cut — final Mockup F polish lands later. */ .nav { display: flex; justify-content: center; align-items: center; gap: 12px; height: 100%; } .ghost-pill { appearance: none; -webkit-appearance: none; background: transparent; border: 1px solid var(--ink); border-radius: 999px; height: 40px; padding: 0 18px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; outline: none; /* Brief 90 ms color flash on tap; longer 220 ms theme swap for the border + text color so the buttons follow the global theme transition. */ transition: background-color 90ms ease, color 90ms ease, border-color var(--t-theme); } .ghost-pill:active { background: var(--ink); color: var(--bg); } /* Visible focus only on keyboard navigation — taps never get a ring. */ .ghost-pill:focus { outline: none; } .ghost-pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .ghost-pill[hidden] { display: none; } /* Anchor flavour of the pill (e.g. the completion screen's "See your results") — same look as the button, plus the flex centering an needs. */ a.see-results { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; margin-bottom: 14px; } .ghost-pill.skip { border-color: var(--secondary); color: var(--secondary); } .ghost-pill.skip:active { background: var(--secondary); color: var(--bg); } /* Reposition placeholders — question + live label show their location hints so the user understands what they're positioning relative to. Slightly muted (secondary color, italic question) so they read as "this will be replaced" rather than as real content. */ .question.placeholder { color: var(--secondary); font-style: italic; } .live-label.placeholder { fill: var(--secondary); } /* End labels in reposition mode use an external transparent hit rect (see #labelHitNo / #labelHitYes in the SVG) for a forgiving tap target. The text element itself doesn't catch pointer events — pointer-events:none on the text avoids stealing taps when the user touches the rendered glyph. */ .end-label.draggable-label { cursor: grab; pointer-events: none; } .end-label.draggable-label.dragging { cursor: grabbing; } .label-hit-area { cursor: grab; -webkit-tap-highlight-color: transparent; touch-action: none; } .label-hit-area.dragging { cursor: grabbing; } /* Drag-cue glyphs that sit immediately to the left of each end label in reposition mode. Visual hint only — actual drag is on the label text. */ .label-drag-glyph { fill: none; stroke: var(--secondary); stroke-width: 1.4; stroke-linecap: round; pointer-events: none; opacity: 0.7; } /* ===== Reposition mode (§2.7) =================================== */ /* Top bar — replaces counter + progress while in reposition mode. */ .repo-title { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; fill: var(--ink); } .repo-cancel { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--secondary); cursor: pointer; } .repo-done { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--ink); cursor: pointer; } .repo-divider { stroke: var(--rule); stroke-width: 1; } #repoCancelHit, #repoDoneHit { cursor: pointer; -webkit-tap-highlight-color: transparent; } /* Arc handles. 32 px diameter solid disc + 3 px outer ring in background color so the disc reads cleanly against the arc stroke. Hit area is a transparent circle behind the disc, larger than the visible target. */ .arc-handle { cursor: grab; -webkit-tap-highlight-color: transparent; } .arc-handle.dragging { cursor: grabbing; } .handle-disc { fill: var(--ink); } .handle-ring { fill: none; stroke: var(--bg); stroke-width: 3; } .handle-cue { stroke: var(--bg); stroke-width: 1.4; stroke-linecap: round; fill: none; pointer-events: none; } .handle-hit { fill: transparent; } /* Bottom sheet — Layouts. Theme-adaptive background per §2.7.6. */ .repo-sheet-bg { fill: var(--sheet-bg); transition: fill var(--t-theme); } .repo-sheet-border { stroke: var(--rule); stroke-width: 1; transition: stroke var(--t-theme); } .repo-sheet-title { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--secondary); } /* Preset chips. Active = filled primary background, bg-color text + dot. Inactive = 1 px primary border, transparent fill, primary-color text. */ .preset-chip { cursor: pointer; -webkit-tap-highlight-color: transparent; } .preset-chip .chip-bg { fill: none; stroke: var(--ink); stroke-width: 1; transition: fill var(--t-theme), stroke var(--t-theme); } .preset-chip .chip-label { font-family: var(--sans); font-size: 13px; font-weight: 500; fill: var(--ink); transition: fill var(--t-theme); } .preset-chip .chip-dot { fill: transparent; } .preset-chip.active .chip-bg { fill: var(--ink); stroke: var(--ink); } .preset-chip.active .chip-label { fill: var(--bg); } .preset-chip.active .chip-dot { fill: var(--bg); } /* ----- Tutorial top bar (chip + skip) — M2 phase C, beyond spec §2.11 --- */ .tutorial-chip rect { fill: var(--chip-bg); } .tutorial-chip text { fill: var(--accent-gold); font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .tutorial-skip-label { fill: var(--secondary); font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } /* ----- Bottom-corner controls (theme toggle, Reposition stub) §2.1 ------ */ .corner-button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .corner-button.disabled { cursor: default; opacity: 0.55; } .corner-label { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--secondary); } .corner-icon { fill: var(--secondary); stroke: var(--secondary); } /* ----- Skip-reason picker (modal sheet) ---------------------------------- Body-level fixed overlay (not inside the SVG) — see index.html note. */ .picker-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(26, 26, 26, 0.35); display: flex; align-items: flex-end; justify-content: center; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .picker-backdrop[hidden] { display: none; } .picker-sheet { width: 100%; background: var(--bg); border-top: 1px solid var(--rule); padding: 22px 20px 28px; display: flex; flex-direction: column; gap: 12px; } .picker-title { margin: 0 0 4px; font-family: var(--serif); font-size: 22px; color: var(--ink); text-align: center; } .picker-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .picker-reasons button { width: 100%; height: 48px; background: transparent; border: 1px solid var(--ink); border-radius: 12px; font-family: var(--sans); font-size: 16px; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; } .picker-reasons button:active { background: var(--ink); color: var(--bg); } /* Keyboard navigation highlight (↑/↓ through the skip menu). */ .picker-reasons button.kb-active { background: var(--ink); color: var(--bg); outline: 2px solid var(--accent-gold, #C5950E); outline-offset: 2px; } .skip-cancel { align-self: center; margin-top: 6px; } /* ----- Completion overlay ------------------------------------------------ */ .completion { position: fixed; inset: 0; z-index: 1000; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 24px; text-align: center; touch-action: manipulation; } .completion[hidden] { display: none; } /* CW-065 — embedded recs on the Life-snapshot completion screen. Constrained width + own scroll so several cards never push the See-your-results / Back controls off a small phone. Left-aligned card text reads better than the centered completion line above it. Empty + hidden unless recs are live. */ #completionRecs { width: min(440px, 88vw); max-height: 46vh; overflow-y: auto; margin: 16px 0 4px; text-align: left; } #completionRecs .rec-card { border: 1px solid var(--rule); border-left: 3px solid var(--ink); border-radius: 12px; padding: 12px 14px; margin: 0 0 10px; } #completionRecs .rec-card.gold { border-left-color: var(--accent-gold); } #completionRecs .rec-t { font-weight: 700; margin: 0 0 4px; font-size: 0.98rem; } #completionRecs .rec-b { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--ink); } #completionRecs .rec-sub { margin: 4px 0 0; font-size: 0.78rem; color: var(--secondary); line-height: 1.5; } #completionRecs .rec-link { display: inline-block; margin-top: 10px; font-size: 0.82rem; color: var(--accent-gold); text-decoration: none; font-weight: 600; } #completionRecs[hidden] { display: none; } /* ----- Sign-in overlay (M2 phase E) -------------------------------------- */ .signin { position: fixed; inset: 0; z-index: 2000; background: var(--bg); color: var(--ink); display: flex; align-items: center; justify-content: center; padding: 32px; text-align: center; touch-action: manipulation; } .signin[hidden] { display: none; } .signin-card { max-width: 320px; width: 100%; } .signin-title { margin: 0 0 6px; font-family: var(--serif); font-size: 32px; line-height: 1.2; color: var(--ink); } .signin-sub { margin: 0 0 24px; font-family: var(--sans); font-size: 14px; color: var(--secondary); } #signinForm { display: flex; flex-direction: column; gap: 12px; } #signinEmail { font-family: var(--sans); font-size: 17px; padding: 12px 16px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg); color: var(--ink); width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none; outline: none; transition: border-color var(--t-fast); } #signinEmail:focus { border-color: var(--ink); } .signin-status { margin: 16px 0 0; font-family: var(--sans); font-size: 14px; color: var(--secondary); min-height: 20px; } /* ----- Tutorial interstitial (§2.11) ------------------------------------- */ .interstitial { position: fixed; inset: 0; z-index: 1100; /* above completion just in case */ background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 0 32px; text-align: center; pointer-events: none; /* purely visual, auto-dismisses */ } .interstitial[hidden] { display: none; } .interstitial-text { margin: 0; font-family: var(--serif); font-size: 32px; line-height: 1.3; color: var(--ink); } .completion-text { margin: 0 0 40px; font-family: var(--serif); font-size: 32px; line-height: 1.3; color: var(--ink); } /* ===== Preview chrome (admin "Preview as respondent") ===================== */ /* A slim pill pinned to the top-center so it doesn't cover the slider's own counter/progress at the corners. Only shown when JS adds [hidden]=false in PREVIEW_MODE. */ .preview-bar { position: fixed; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; background: var(--chip-bg); border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,0.18); font-family: var(--sans); } .preview-bar[hidden] { display: none; } .preview-back { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,0.12); color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; line-height: 1; } .preview-back:hover { background: rgba(255,255,255,0.22); } .preview-badge { color: var(--accent-gold); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; padding-right: 6px; } /* ===== Multiple-choice layer (CW-054) ===================================== A DOM overlay for MC questions per DESIGN-MULTIPLE-CHOICE §3-§5. The puck keeps its SVG; MC uses HTML so it gets real portrait/landscape reflow. Maps 1:1 to the design system: Source Serif 4 question, Inter options, the app's high-contrast --ink/--bg inversion for the selected state, light + dark via the same data-theme vars. Mirrors app/public/mc-proto.html (the reference). */ /* CW-054 (rework): multiple-choice renders INSIDE the SVG stage via #mcFO — reusing the slider's question, counter, progress and Back/Skip/Next, so the two screen types are pixel-identical and only the middle (arc ↔ option list) swaps. Sizes below are in SVG user units (viewBox 390×844), so everything scales with the stage exactly like the puck. */ .mc-body { height: 100%; display: flex; flex-direction: column; min-height: 0; } /* "Select one" / "Select multiple" line — sits directly below the question. */ .mc-sub { flex: 0 0 auto; margin: 0 0 12px; font-family: var(--sans); font-size: 14px; line-height: 1.35; color: var(--secondary); } /* Options: a vertical stack that scrolls inside the box if they overflow. Selection = the whole box filling; the entire box is the tap target and stays big for easy tapping. */ .mc-opts { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; padding: 2px; align-content: start; } .mc-opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font-family: var(--sans); font-size: 18px; font-weight: 500; color: var(--ink); /* Jonny: bump option text a touch for small phones */ background: var(--sheet-bg); border: 1.5px solid transparent; border-radius: 14px; padding: 20px 18px; cursor: pointer; min-height: 70px; -webkit-tap-highlight-color: transparent; /* CC-064: +25% tap target for small phones */ transition: none; } /* Jonny: no animated fill/scale — animating a repaint inside the viewBox-scaled foreignObject made the tapped box flash toward the bottom on iOS (worse the higher up it was). Instant. */ .mc-opt:hover { border-color: var(--rule); } .mc-opt:active { background: var(--rule); } /* press feedback, but NO scale transform (it mis-composited in the foreignObject) */ .mc-opt > * { pointer-events: none; } /* the whole box is the tap target */ .mc-opt.on { background: var(--ink); border-color: var(--ink); color: var(--bg); } .mc-opt.on:active { background: var(--ink); } .mc-opt .mc-key { margin-left: auto; font-family: var(--sans); font-size: 12px; color: var(--secondary); font-variant-numeric: tabular-nums; } .mc-opt.on .mc-key { color: var(--bg); opacity: .7; } .mc-opt:focus { outline: none; } .mc-opt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* CW-067/CC-067 §1.5: the "Something else" write-in, kept right below the options. */ .mc-other-input { flex: 0 0 auto; width: 100%; box-sizing: border-box; margin: 8px 0 0; font-family: var(--sans); font-size: 18px; color: var(--ink); background: var(--sheet-bg); border: 1.5px solid var(--rule); border-radius: 14px; padding: 16px 18px; min-height: 56px; -webkit-tap-highlight-color: transparent; } .mc-other-input:focus { outline: none; border-color: var(--ink); } .mc-other-input[hidden] { display: none; } /* CC-067: live "N characters left" under the write-in field. */ .mc-other-count { flex: 0 0 auto; margin: 6px 4px 0; text-align: right; font-family: var(--sans); font-size: 13px; color: var(--secondary); } .mc-other-count[hidden] { display: none; } /* CC-067: the write-in option is a fill-in — no number badge. */ .mc-writein .mc-key { display: none; } /* CC-067 single-select "short answer" screen: once the write-in is chosen, the other options step aside so the field takes the stage; the chosen write-in box stays as the header. */ .mc-opts.writein .mc-opt:not(.on) { display: none; } /* Landscape: options reflow into 2 columns; the question + nav stay put. */ @media (orientation: landscape) and (min-width: 560px) { .mc-opts { flex-direction: row; flex-wrap: wrap; } .mc-opt { width: calc(50% - 5px); } /* CC-067: the single-select "short answer" view stays one column so the lone write-in header spans the full width of the field beneath it (was collapsing to a half-width column). */ .mc-opts.writein { flex-direction: column; } .mc-opts.writein .mc-opt { width: 100%; } } /* Respect reduced motion — drop the confirm/scale animations (§5). */ @media (prefers-reduced-motion: reduce) { .mc-opt { transition: none; } .mc-opt:active { transform: none; } } /* CW-227 (R4 A1/C3): visible focus for the SVG controls that are now keyboard-reachable. */ #puckGroup:focus { outline: none; } #puckGroup:focus-visible #puck { stroke: var(--accent-gold, #C5950E); stroke-width: 5px; } #skipTutorialBtn:focus, #themeToggle:focus { outline: none; } #skipTutorialBtn:focus-visible rect, #themeToggle:focus-visible rect { stroke: var(--accent-gold, #C5950E); stroke-width: 2px; }