/* Time Is Luck — main app styles (index.html) */ :root { --text-primary: #1C1917; --text-muted: #57534e; --text-subtle: #78716c; --text-placeholder: #A8A29E; --surface: #FFFFFF; --surface-muted: #F5F5F4; --border: rgba(28, 25, 23, 0.14); --border-soft: rgba(28, 25, 23, 0.10); --border-strong: rgba(28, 25, 23, 0.18); /* Horizontal rules — one weight app-wide */ --line-color: rgba(28, 25, 23, 0.18); --line: 1.5px solid var(--line-color); --nav-gap: 20px; --line-accent: 2px solid rgba(28, 25, 23, 0.15); --surface-shadow: 0 1px 2px rgba(28, 25, 23, 0.04); --btn-primary-bg: #2A2724; --btn-primary-text: #FAFAF9; --btn-secondary-bg: #FFFFFF; --btn-secondary-text: #57534e; --stage-entry: #FAFAF9; --stage-mist: #D0E0D1; --stage-warmup: var(--stage-mist); /* alias */ --stage-green: #BBD3BE; --stage-green-sage: #BBCAB3; --stage-yellow: #DCC99C; --stage-purple: #C6BFCB; --stage-bg-ms: 3000ms; --stage-bg-ease: cubic-bezier(0.33, 0, 0.67, 1); /* Safe-area insets. Under edge-to-edge, Capacitor injects reliable --safe-area-inset-* values onto (needed on older Android WebViews where env() is unreliable); env() is the fallback for iOS / web. Use var(--sa-*) everywhere instead of raw env(). */ --sa-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)); --sa-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px)); --sa-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)); --sa-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px)); /* Dark menu panel — see menu-kit-preview.html */ --menu-bg: #2A2724; --menu-surface: rgba(255, 255, 255, 0.06); --menu-surface-hover: rgba(255, 255, 255, 0.09); --menu-border: rgba(255, 255, 255, 0.10); --menu-border-soft: rgba(255, 255, 255, 0.07); --menu-text: rgba(250, 250, 249, 0.88); --menu-text-muted: rgba(250, 250, 249, 0.72); --menu-text-subtle: rgba(250, 250, 249, 0.50); --menu-heading: rgba(250, 250, 249, 0.88); --menu-link: #A8B89C; --menu-link-hover: #C8D6BE; --menu-accent: #DCC99C; --menu-accent-soft: rgba(220, 201, 156, 0.18); --menu-btn-primary-bg: #FAFAF9; --menu-btn-primary-text: #2A2724; --menu-input-line: rgba(255, 255, 255, 0.22); --menu-input-line-focus: rgba(250, 250, 249, 0.55); --menu-label: rgba(250, 250, 249, 0.40); --menu-error: #E8A598; --menu-success: #A8B89C; } * { box-sizing: border-box; margin: 0; padding: 0; } html { overscroll-behavior: none; background-color: #FAFAF9; transition: background-color var(--stage-bg-ms) var(--stage-bg-ease); } body { font-family: 'Geist', 'DM Sans', -apple-system, sans-serif; min-height: 100vh; min-height: 100dvh; background-color: #FAFAF9; color: #1C1917; line-height: 1.6; transition: background-color var(--stage-bg-ms) var(--stage-bg-ease); overscroll-behavior: none; padding-top: var(--sa-top); padding-bottom: var(--sa-bottom); padding-left: var(--sa-left); padding-right: var(--sa-right); } /* Native boot — gold LaunchScreen until first render handoff (see app.js) */ html.native-shell, html.native-shell body { background-color: #C9A960; transition: none !important; } html.native-shell body.content-behind-journey .journey-strip-floor { background-color: #C9A960 !important; transition: none !important; } /* Light journey palette — 6 stages (see palette-preview.html) */ body.stage-entry, body.stage-red, html:has(body.stage-entry), html:has(body.stage-red) { background-color: var(--stage-entry); } body.stage-mist, body.stage-orange, html:has(body.stage-mist), html:has(body.stage-orange), body.stage-mist, body.stage-orange-muted, html:has(body.stage-mist), html:has(body.stage-orange-muted) { background-color: var(--stage-warmup); } body.stage-green, html:has(body.stage-green) { background-color: var(--stage-green); } body.stage-green-sage, html:has(body.stage-green-sage) { background-color: var(--stage-green-sage); } body.stage-yellow, html:has(body.stage-yellow) { background-color: var(--stage-yellow); } body.stage-purple, html:has(body.stage-purple) { background-color: var(--stage-purple); } /* Frost 14% surfaces — tinted stages blend with stage colour; entry stays pure white */ body.stage-entry, body.stage-red, body.stage-setup { --surface: #FFFFFF; --surface-muted: #F5F5F4; --btn-secondary-bg: #FFFFFF; --text-placeholder: #A8A29E; } body.stage-mist, body.stage-orange, body.stage-mist, body.stage-orange-muted { --surface: color-mix(in srgb, var(--stage-warmup) 14%, white 86%); --surface-muted: color-mix(in srgb, var(--stage-warmup) 22%, white 78%); --btn-secondary-bg: rgba(255, 255, 255, 0.72); --text-placeholder: #78716c; } body.stage-green { --surface: color-mix(in srgb, var(--stage-green) 14%, white 86%); --surface-muted: color-mix(in srgb, var(--stage-green) 22%, white 78%); --btn-secondary-bg: rgba(255, 255, 255, 0.72); --text-placeholder: #78716c; } body.stage-green-sage { --surface: color-mix(in srgb, var(--stage-green-sage) 14%, white 86%); --surface-muted: color-mix(in srgb, var(--stage-green-sage) 22%, white 78%); --btn-secondary-bg: rgba(255, 255, 255, 0.72); --text-placeholder: #78716c; } body.stage-yellow { --surface: color-mix(in srgb, var(--stage-yellow) 14%, white 86%); --surface-muted: color-mix(in srgb, var(--stage-yellow) 22%, white 78%); --btn-secondary-bg: rgba(255, 255, 255, 0.72); --text-placeholder: #78716c; } body.stage-purple { --surface: color-mix(in srgb, var(--stage-purple) 14%, white 86%); --surface-muted: color-mix(in srgb, var(--stage-purple) 22%, white 78%); --btn-secondary-bg: rgba(255, 255, 255, 0.72); --text-placeholder: #78716c; } /* Confetti canvas */ #confetti-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1000; } /* Single fixed UI container - prevents Chrome compositor crashes from multiple fixed layers */ .fixed-ui { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 100; } .fixed-ui > * { pointer-events: auto; } /* Journey overlay — fixed behind content (index.html) */ .journey-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none; } .container { max-width: 560px; margin: 0 auto; padding: 24px 40px 80px 40px; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; text-align: left; position: relative; z-index: 1; } /* Old header-bg and safe-area-bar hidden - safe area handled natively on iOS */ .header-bg, .safe-area-bar { display: none !important; } .icon-wrapper { text-align: center; } .icon { margin-bottom: 20px; opacity: 0.95; } .icon svg { width: 72px; height: 72px; stroke: white; fill: none; } /* Typography */ h2 { font-size: 2rem; font-weight: 300; margin-bottom: 16px; letter-spacing: -0.02em; } p { font-size: 1.1rem; opacity: 0.8; margin-bottom: 24px; font-weight: 300; } p.helper { opacity: 0.6; font-size: 0.95rem; } strong { font-weight: 500; } /* Input - minimal underline style */ textarea { width: 100%; background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px; color: white; font-size: 1.15rem; font-family: inherit; font-weight: 400; padding: 14px 16px; resize: none; min-height: 56px; overflow: hidden; margin-bottom: 0; text-align: left; box-sizing: border-box; } textarea::placeholder { color: rgba(255, 255, 255, 0.4); } textarea:focus { outline: none; border-color: rgba(255, 255, 255, 0.8); } /* Context - minimal, no box */ .context { margin-bottom: 24px; padding-left: 16px; border-left: 2px solid rgba(255, 255, 255, 0.2); text-align: left; } .context.context-subtle { opacity: 0.6; font-size: 0.9rem; margin-top: 8px; margin-bottom: 16px; } .context-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.5; margin-bottom: 4px; } .context-text { font-size: 1rem; opacity: 0.85; } /* Expandable values summary */ .values-expand-toggle { font-size: 0.75rem; opacity: 0.5; cursor: pointer; margin-top: 8px; display: inline-block; } .values-expand-toggle:hover { opacity: 0.8; } .values-full-summary { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .values-full-summary.expanded { display: block; } .values-full-summary ul { list-style: none; padding: 0; margin: 0; text-align: left; } .values-full-summary li { margin-bottom: 12px; font-size: 1rem; line-height: 1.4; } .values-full-summary li strong { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.5; margin-bottom: 4px; } /* Approach section (emotional strategy) */ .approach-section { margin-bottom: 24px; padding-left: 16px; border-left: 2px solid rgba(255, 255, 255, 0.3); text-align: left; } .approach-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.6; margin-bottom: 4px; } .approach-text { font-size: 0.95rem; opacity: 0.8; line-height: 1.5; } /* Action step hero (step_focus) — dark journey default; light theme overrides below */ .approach-section.action-step-card { padding: 14px 16px 14px 18px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); border-left-width: 3px; border-left-color: rgba(255, 255, 255, 0.55); } .action-step-card .approach-text { font-size: 1.05rem; font-weight: 500; opacity: 1; color: white; } /* Radio options */ .options { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; text-align: left; } .option { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; padding: 16px; cursor: pointer; } /* hover removed to prevent browser rendering crash */ .option.selected { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.6); } .option input { display: none; } .option label { cursor: pointer; display: block; font-weight: 400; } /* Buttons — one row layout: edge actions, middle item(s) centred between */ .buttons { display: flex; gap: 16px; margin-top: 20px; justify-content: space-between; align-items: center; } .buttons .btn { min-width: 0; } /* Explicit .split kept for templates that already use it — same layout */ .buttons.split { justify-content: space-between; } /* Lone Back (choice screens) — pin left */ .buttons:has(> .btn-secondary:only-child) { justify-content: flex-start; } /* Lone Continue / primary — pin right */ .buttons:has(> .btn-primary:only-child) { justify-content: flex-end; } /* Stacked layout for 3+ buttons: primary on top, secondary below */ .buttons-stacked { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; } .buttons-stacked .btn-primary { width: 100%; } .buttons-stacked .buttons-row { display: flex; gap: 12px; justify-content: center; } .buttons-stacked .buttons-row .btn { flex: 1; } .btn { padding: 16px 32px; border-radius: 30px; font-size: 1rem; font-weight: 400; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.4); background: transparent; color: white; } /* hover removed to prevent browser rendering crash */ .btn-primary { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); min-width: 160px; } /* hover removed to prevent browser rendering crash */ .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; } .btn-secondary { opacity: 0.7; } /* hover removed to prevent browser rendering crash */ /* Current step display */ .current-step-display { font-size: 1.5rem; font-weight: 300; padding: 32px 0; margin-bottom: 24px; } /* Completed steps list */ .completed-steps { margin: 24px 0; text-align: left; } .completed-step { display: flex; align-items: center; gap: 12px; padding: 8px 0; opacity: 0.7; font-size: 0.95rem; } .completed-step .tick { opacity: 0.9; } /* Suggestions */ .suggestions { margin: 24px 0; text-align: left; } .suggestion { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; padding: 14px 16px; margin-bottom: 8px; cursor: pointer; } /* Celebration animation - DISABLED to prevent browser crash */ /* Stats for completion */ .stats { display: flex; justify-content: center; gap: 48px; margin: 32px 0; } .stat { text-align: center; } .stat-number { font-size: 3rem; font-weight: 300; } .stat-label { font-size: 0.85rem; opacity: 0.6; } /* List styling */ ul { text-align: left; margin: 20px 0; padding-left: 24px; opacity: 0.8; } ul li { margin-bottom: 8px; } /* Hint toggle */ .hint-toggle { font-size: 0.9rem; color: rgba(255, 255, 255, 0.5); cursor: pointer; margin-top: 0; margin-bottom: 16px; } /* hover removed to prevent browser rendering crash */ .hint-content { display: none; margin-top: -8px; margin-bottom: 16px; font-size: 0.95rem; opacity: 0.75; text-align: left; } .hint-content.visible { display: block; } .hint-content p { margin-bottom: 12px; } .hint-content ul { margin: 0; padding-left: 20px; } .hint-content li { margin-bottom: 8px; } /* Always-visible help card */ .help-card { background: rgba(0, 0, 0, 0.1); border-radius: 12px; padding: 24px 28px; margin-top: 20px; margin-bottom: 0; text-align: left; } .help-card p, .help-card li { font-size: 0.85rem; font-weight: 300; color: rgba(255, 255, 255, 0.6); line-height: 1.5; margin-bottom: 8px; } .help-card p:last-child, .help-card li:last-child { margin-bottom: 0; } .help-card ul, .help-card ol { margin: 0; padding-left: 22px; opacity: 1; } .help-card .pro-line { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.85rem; color: rgba(255, 255, 255, 0.4); cursor: pointer; } .help-card .pro-line span { color: rgba(255, 255, 255, 0.55); } /* New: pro-line moved to top of help card, brighter, larger star. Apply by adding `pro-line-top` alongside `pro-line` on the div. */ .help-card .pro-line-top { margin-top: 0; margin-bottom: 16px; padding-top: 0; padding-bottom: 12px; border-top: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: #ffffff; } .help-card .pro-line-top span { color: #ffffff; } .help-card .pro-line-top .pro-star { /* Star inherits the surrounding 0.85rem text size. The earlier 1.15rem version pushed the line off the right edge on iPhone Mini-class screens (~360px wide), wrapping the upsell to two lines. Inheriting keeps everything on one line. */ margin-right: 2px; } /* Centre the "Go Pro to talk this through with AI" upsell line. Applied via the .pro-upgrade-line modifier (added by the JS proUpgradeLine helper) so the Pro user's "Talk this through with AI" link — which uses .pro-line-top alone — stays left-aligned as before. */ .help-card .pro-upgrade-line { text-align: center; } .help-card-toggle { display: none; } .help-card-toggle.visible { display: block; } /* Email signup form — inline, app-styled */ .email-signup { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 4px; } .email-signup form { display: flex; flex-direction: column; gap: 10px; } .email-signup-note { font-size: 0.85rem; font-weight: 300; color: rgba(255, 255, 255, 0.6); line-height: 1.5; margin-bottom: 10px; } .email-signup form { display: flex; flex-direction: row; gap: 8px; align-items: stretch; } .email-signup input[type="email"] { flex: 1; min-width: 0; background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px; color: white; font-size: 0.85rem; font-family: inherit; font-weight: 400; padding: 10px 12px; box-sizing: border-box; } .email-signup input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.4); } .email-signup input[type="email"]:focus { outline: none; border-color: rgba(255, 255, 255, 0.6); } .email-signup .btn { flex-shrink: 0; padding: 10px 16px; font-size: 0.85rem; min-width: 0; } .email-signup-success p { color: rgba(255, 255, 255, 0.8); font-size: 0.85rem; margin-top: 8px; } .email-signup-close { display: block; margin-top: 14px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.35); text-decoration: none; text-align: right; cursor: pointer; } /* Links row — two subtle links, left and right */ .links-row { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; margin-bottom: 0; } .links-row .link-item { font-size: 0.9rem; color: rgba(255, 255, 255, 0.5); cursor: pointer; } /* Step inputs for bridge */ .step-inputs { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; } .step-input-row { display: flex; align-items: center; gap: 12px; } .step-number { font-size: 0.85rem; opacity: 0.5; min-width: 24px; } .step-input-row input { flex: 1; background: transparent; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); color: white; font-size: 1rem; font-family: inherit; padding: 12px 0; } .step-input-row input::placeholder { color: rgba(255, 255, 255, 0.4); } .step-input-row input:focus { outline: none; border-bottom-color: rgba(255, 255, 255, 0.8); } .step-row-actions { display: flex; gap: 4px; opacity: 0.5; } /* hover removed to prevent browser rendering crash */ .step-row-btn { background: rgba(255, 255, 255, 0.15); border: none; color: white; width: 24px; height: 24px; border-radius: 50%; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* hover removed to prevent browser rendering crash */ .thorn-pairs { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; } .thorn-pair-card { display: flex; flex-direction: column; gap: 12px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; padding: 10px 14px; background: rgba(255, 255, 255, 0.04); } .thorn-pair-beat { display: flex; flex-direction: column; gap: 4px; } .thorn-pair-label { font-size: 0.75rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; } .thorn-pair-fields { flex: 1; display: flex; flex-direction: column; gap: 4px; } .thorn-pair-input { background: transparent; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.25); color: white; /* Must stay >= 16px or iOS auto-zooms the page on focus and leaves it horizontally over-scrolled. See architecture.md. */ font-size: 1rem; font-family: inherit; padding: 8px 0; width: 100%; } .thorn-pair-input:focus { outline: none; border-bottom-color: rgba(255, 255, 255, 0.7); } .thorn-pair-remove:not(.step-row-btn), .thorn-pair-add { display: none; } .thorn-pair-actions { display: flex; flex-direction: column; gap: 4px; opacity: 0.55; } .thorn-pair-btn { background: rgba(255, 255, 255, 0.15); border: none; color: white; width: 24px; height: 24px; border-radius: 50%; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; } .step-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .add-step-btn { display: flex; align-items: center; gap: 6px; background: transparent; border: none; color: rgba(255, 255, 255, 0.5); font-size: 0.9rem; font-family: inherit; cursor: pointer; padding: 8px 0; } /* hover removed to prevent browser rendering crash */ .add-step-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; } .step-actions .hint-toggle, .step-actions .pro-assist-trigger { margin: 0; font-size: 0.9rem; } /* Step list for action screen */ .step-list { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; } .step-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .step-item.step-done { opacity: 0.6; } .step-item.step-done .step-text { text-decoration: line-through; } .step-tick { color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; min-width: 50px; text-align: center; } .step-done-btn { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); color: white; padding: 6px 12px; border-radius: 16px; font-size: 0.85rem; font-family: inherit; cursor: pointer; min-width: 50px; } /* hover removed to prevent browser rendering crash */ .step-text { flex: 1; font-size: 1rem; } .well-done { color: white; font-weight: 500; font-size: 0.9rem; margin-left: auto; padding-left: 12px; white-space: nowrap; } .progress-text { opacity: 0.7; font-size: 0.9rem; margin-bottom: 8px; } /* Split Button */ .split-btn { display: inline-flex; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.3); } .split-btn-timer, .split-btn-start { background: rgba(255, 255, 255, 0.15); border: none; color: white; padding: 8px 14px; font-size: 0.85rem; font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 4px; } .split-btn-timer { border-right: 1px solid rgba(255, 255, 255, 0.2); } /* hover removed to prevent browser rendering crash */ .split-btn-timer svg { width: 14px; height: 14px; } /* Timer Dropdown — anchored to the right edge of .step-item because the split-btn (Timer | Start) sits on the right side of the row. Was left:0 when the pill was on the left. */ .timer-dropdown { position: absolute; top: 100%; right: 0; margin-top: 4px; background: inherit; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); overflow: hidden; z-index: 100; min-width: 120px; } .timer-option { padding: 10px 16px; color: white; cursor: pointer; font-size: 0.9rem; } /* hover removed to prevent browser rendering crash */ .step-item { position: relative; } /* Saved dropdown — used on the home screen's bottom button row. Wraps the trigger button + the absolute-positioned panel so the panel anchors below the trigger. */ .saved-dropdown-wrap { position: relative; display: inline-flex; } /* Web variant: btn-secondary styled trigger with a down-chevron appended via ::after. Matches the existing big-button family used elsewhere on web. */ .btn.btn-secondary.dropdown { display: inline-flex; align-items: center; gap: 8px; } .btn.btn-secondary.dropdown::after { content: ""; display: block; width: 14px; height: 14px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml;utf8,"); } /* Panel — absolute-positioned below the trigger, anchored to the left so it grows rightward (trigger sits on the LEFT of its row). Inherits stage background colour like .timer-dropdown. */ .saved-dropdown-panel { position: absolute; top: 100%; left: 0; margin-top: 6px; background: inherit; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); overflow: hidden; z-index: 100; min-width: 160px; } .saved-dropdown-item { padding: 12px 16px; color: white; cursor: pointer; font-size: 0.9rem; white-space: nowrap; } .saved-dropdown-item + .saved-dropdown-item { border-top: 1px solid rgba(255, 255, 255, 0.08); } /* Timer Display */ .timer-display { font-size: 4rem; font-weight: 300; letter-spacing: 2px; margin: 24px 0; font-variant-numeric: tabular-nums; } .timer-bar { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.2); border-radius: 3px; margin-bottom: 32px; overflow: hidden; } .timer-bar-fill { height: 100%; background: rgba(255, 255, 255, 0.7); border-radius: 3px; transition: width 1s linear; } /* Timer ended animation - DISABLED to prevent browser crash */ .timer-ended { opacity: 0.7; } .focus-step-text { font-size: 1.3rem; margin-bottom: 16px; padding: 16px 24px; background: rgba(255, 255, 255, 0.1); border-radius: 12px; } /* Celebration */ .celebrate-big { font-size: 3rem; margin-bottom: 16px; } .celebrate-step { font-size: 1.1rem; opacity: 0.8; padding: 12px 20px; background: rgba(255, 255, 255, 0.1); border-radius: 8px; display: inline-block; margin-bottom: 24px; } /* Hidden */ .hidden { display: none !important; } /* Hide old fixed header elements - now using hamburger menu */ .header-links, .audio-toggle, .audio-menu, .help-toggle, .help-popup { display: none !important; } /* Desktop: show fixed logo at top-left */ .fixed-ui .logo { position: absolute; top: 24px; left: 24px; font-family: 'DM Sans', -apple-system, sans-serif; font-size: 1.25rem; font-weight: 300; letter-spacing: -0.02em; } /* Fixed blog link at bottom-left — homepage only, auto-hidden otherwise */ .fixed-ui .blog-link { position: absolute; bottom: calc(20px + var(--sa-bottom)); left: calc(24px + var(--sa-left)); font-family: 'DM Sans', -apple-system, sans-serif; font-size: 0.85rem; font-weight: 300; color: rgba(255, 255, 255, 0.45); text-decoration: none; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; pointer-events: none; } .fixed-ui .blog-link.visible { opacity: 1; visibility: visible; pointer-events: auto; } .fixed-ui .blog-link:hover { color: rgba(255, 255, 255, 0.85); } /* Fixed app icon at bottom-right — mirrors blog-link positioning */ .fixed-ui .brand-mark { position: absolute; bottom: calc(20px + var(--sa-bottom)); right: calc(24px + var(--sa-right)); display: block; line-height: 0; text-decoration: none; opacity: 0.35; transition: opacity 0.2s ease; } .fixed-ui .brand-mark img { display: block; width: 28px; height: 28px; border-radius: 6px; } .fixed-ui .brand-mark:hover { opacity: 0.6; } @media (max-width: 500px) { /* On mobile the fixed-position link overlaps the Continue button — hide it and render an inline version at the end of the homepage content instead (see .blog-link-inline below). */ .fixed-ui .blog-link { display: none !important; } } /* Inline blog link — rendered in the setup_task screen template, shown only on mobile (where the fixed-position version is hidden). */ .blog-link-inline { display: none; } @media (max-width: 500px) { .blog-link-inline { display: block; text-align: center; margin-top: 32px; padding: 12px 0 8px; font-size: 0.85rem; font-weight: 300; color: rgba(255, 255, 255, 0.45); text-decoration: none; } .blog-link-inline:hover { color: rgba(255, 255, 255, 0.85); } } /* Desktop: hide scrolling logo in container */ .container .logo { display: none; } /* Scrolling logo styles (for mobile) */ .logo { font-family: 'DM Sans', -apple-system, sans-serif; font-size: 1.25rem; font-weight: 300; letter-spacing: -0.02em; margin-bottom: 24px; text-align: left; } .logo .time { color: rgba(255, 255, 255, 0.99); } .logo .is { color: rgba(255, 255, 255, 0.70); } .logo .luck { color: rgba(255, 255, 255, 0.99); } .logo .app { color: rgba(255, 255, 255, 0.70); } .logo .tagline { display: block; font-size: 0.7rem; color: rgba(255, 255, 255, 0.5); margin-top: 1px; letter-spacing: 0; } /* Audio toggle */ .audio-toggle { position: absolute; top: 20px; right: 20px; background: rgba(0, 0, 0, 0.15); border: none; color: rgba(255, 255, 255, 0.5); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* hover removed to prevent browser rendering crash */ .audio-toggle.playing { color: rgba(255, 255, 255, 0.9); background: rgba(0, 0, 0, 0.25); } .audio-toggle svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.5; fill: none; } /* Audio menu */ .audio-menu { position: absolute; top: 70px; right: 20px; background: rgba(0, 0, 0, 0.85); border-radius: 12px; padding: 8px 0; min-width: 160px; max-height: calc(100vh - 100px); overflow-y: auto; display: none; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } .audio-menu.visible { display: block; } .audio-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: rgba(255, 255, 255, 0.8); cursor: pointer; font-size: 0.95rem; } /* hover removed to prevent browser rendering crash */ .audio-menu-item.active { color: white; font-weight: 500; } .audio-menu-item svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; flex-shrink: 0; } .audio-menu-divider { height: 1px; background: rgba(255, 255, 255, 0.15); margin: 8px 0; } /* Help button */ .help-toggle { position: absolute; bottom: 20px; right: 20px; background: rgba(0, 0, 0, 0.15); border: none; border-radius: 50%; width: 44px; height: 44px; color: rgba(255, 255, 255, 0.6); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 300; } .help-toggle.active { background: rgba(0, 0, 0, 0.25); color: rgba(255, 255, 255, 0.9); } /* Help popup */ .help-popup { position: absolute; bottom: 80px; right: 20px; background: white; border-radius: 16px; padding: 24px; width: 300px; max-width: calc(100vw - 40px); display: none; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); color: #333; } .help-popup.visible { display: block; } .help-popup h3 { margin: 0 0 12px 0; font-size: 1.1rem; font-weight: 500; color: #222; } .help-popup p { margin: 0 0 16px 0; font-size: 0.95rem; line-height: 1.5; color: #555; } .help-popup a { color: #b85450; text-decoration: none; } .help-popup a:hover { text-decoration: underline; } .help-popup-close { position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 1.5rem; color: #999; cursor: pointer; line-height: 1; } /* Header links */ .header-links { position: absolute; top: 20px; right: 80px; height: 44px; display: flex; align-items: center; gap: 20px; font-size: 0.85rem; } .header-link { color: rgba(255, 255, 255, 0.5); cursor: pointer; text-decoration: none; } .header-link:hover { color: rgba(255, 255, 255, 0.8); } .header-link.active { color: rgba(255, 255, 255, 0.9); } /* Hamburger menu button */ .hamburger-btn { position: relative; float: right; margin-top: 12px; margin-right: 12px; width: 44px; height: 44px; background: rgba(0, 0, 0, 0.2); border: none; border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; z-index: 1000; padding: 0; } .hamburger-btn span { display: block; width: 20px; height: 2px; background: rgba(255, 255, 255, 0.8); border-radius: 1px; transition: all 0.2s ease; } .hamburger-btn.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger-btn.open span:nth-child(2) { opacity: 0; visibility: hidden; } .hamburger-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } .hamburger-btn.open { position: fixed; top: var(--sa-top); right: 0; float: none; } /* Hamburger menu panel */ .hamburger-menu { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 320px; background: var(--menu-bg); z-index: 999; transform: translateX(100%); transition: transform 0.3s ease; display: flex; flex-direction: column; overflow: hidden; padding-top: var(--sa-top); padding-bottom: var(--sa-bottom); } .hamburger-menu.open { transform: translateX(0); } .hamburger-menu-header { display: flex; align-items: center; gap: 8px; padding: 16px 16px 16px 20px; border-bottom: 1px solid var(--menu-border-soft); min-height: 60px; background: var(--menu-bg); } .hamburger-menu-back { color: var(--menu-text-muted); cursor: pointer; font-size: 0.88rem; display: none; flex: 0 0 auto; min-width: 4.5rem; } .hamburger-menu-back.visible { display: block; } .hamburger-menu-title { flex: 1 1 auto; min-width: 0; color: var(--menu-text); font-size: 0.95rem; font-weight: 500; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hamburger-menu-header:not(:has(.hamburger-menu-back.visible)) .hamburger-menu-title { text-align: left; } .hamburger-menu-close { flex: 0 0 44px; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 1px solid var(--menu-border); border-radius: 8px; background: var(--menu-surface); color: var(--menu-text); font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .hamburger-menu-close:hover { background: var(--menu-surface-hover); } .hamburger-menu-content { flex: 1; overflow-y: auto; padding: 8px 0; } .hamburger-menu-view { display: none; } .hamburger-menu-view.active { display: block; } .hamburger-menu-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; color: var(--menu-text); cursor: pointer; font-size: 1rem; } .hamburger-menu-item:hover { background: var(--menu-surface-hover); } .hamburger-menu-item .label { flex: 1; } .hamburger-menu-item .arrow { color: var(--menu-text-subtle); } .hamburger-menu-item .status { color: var(--menu-text-muted); font-size: 0.85rem; } .hamburger-menu-item.highlight { color: var(--menu-accent); } .hamburger-menu-item.logout { color: var(--menu-text-subtle); margin-top: 16px; } .hamburger-menu-divider { height: 1px; background: var(--menu-border-soft); margin: 8px 20px; } /* Section titles — same size as links; quieter colour only */ .hamburger-menu-group { margin: 18px 20px 4px; padding: 12px 0 0; font-size: 1rem; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--menu-text-subtle); } .hamburger-menu-item--quiet .label { color: var(--menu-text-subtle); font-size: 0.9rem; } /* Menu forms + actions */ .hamburger-menu .menu-pad { padding: 20px; } .hamburger-menu .menu-intro { color: var(--menu-text-muted); margin-bottom: 16px; font-size: 0.95rem; line-height: 1.5; } .hamburger-menu .menu-note { color: var(--menu-text-subtle); font-size: 0.75rem; margin-bottom: 16px; line-height: 1.45; } .hamburger-menu .menu-meta { color: var(--menu-text-subtle); font-size: 0.8rem; margin-bottom: 18px; } .hamburger-menu .menu-field { margin-bottom: 20px; } .hamburger-menu .menu-field label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--menu-label); margin-bottom: 8px; } .hamburger-menu .menu-field input, .hamburger-menu .menu-pad > input[type="text"], .hamburger-menu .menu-pad > input[type="email"], .hamburger-menu .menu-pad > input[type="password"], .hamburger-menu .menu-pad > input[type="number"], .hamburger-menu .upgrade-content input[type="text"], .hamburger-menu .upgrade-content input[type="number"], .hamburger-menu .menu-seats-row input[type="number"] { width: 100%; padding: 10px 0; border: none; border-bottom: 1.5px solid var(--menu-input-line); background: transparent; color: var(--menu-heading); font-family: inherit; font-size: 1rem; outline: none; box-sizing: border-box; } .hamburger-menu .menu-field input::placeholder, .hamburger-menu .menu-pad > input::placeholder, .hamburger-menu .upgrade-content input::placeholder { color: var(--menu-text-subtle); } .hamburger-menu .menu-field input:focus, .hamburger-menu .menu-pad > input:focus, .hamburger-menu .upgrade-content input:focus, .hamburger-menu .menu-seats-row input:focus { border-bottom-color: var(--menu-input-line-focus); } /* Browser autofill paints a light blue fill — keep menu fields on the dark panel */ .hamburger-menu input:-webkit-autofill, .hamburger-menu input:-webkit-autofill:hover, .hamburger-menu input:-webkit-autofill:focus, .hamburger-menu input:-webkit-autofill:active, .hamburger-menu input:autofill { -webkit-box-shadow: 0 0 0 1000px var(--menu-bg) inset !important; box-shadow: 0 0 0 1000px var(--menu-bg) inset !important; -webkit-text-fill-color: var(--menu-heading) !important; color: var(--menu-heading) !important; caret-color: var(--menu-heading); transition: background-color 99999s ease-out 0s; } .hamburger-menu .menu-field .pw-wrap input { padding-right: 44px; } .hamburger-menu .menu-btn { width: 100%; padding: 14px; border-radius: 8px; font-family: inherit; font-size: 0.95rem; font-weight: 500; cursor: pointer; margin-bottom: 10px; } .hamburger-menu .menu-btn-primary { background: var(--menu-btn-primary-bg); color: var(--menu-btn-primary-text); border: none; } .hamburger-menu .menu-btn-secondary { background: transparent; color: var(--menu-text-muted); border: 1px solid var(--menu-border); } .hamburger-menu .menu-btn-ghost { background: transparent; color: var(--menu-text-subtle); border: 1px solid var(--menu-border-soft); } .hamburger-menu .menu-btn-danger { background: transparent; color: var(--menu-error); border: 1px solid rgba(232, 165, 152, 0.35); } .hamburger-menu .menu-btn-danger-fill { background: rgba(232, 165, 152, 0.85); color: #FAFAF9; border: none; } .hamburger-menu .menu-accent-link, .hamburger-menu .menu-accent-link span { color: var(--menu-accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .hamburger-menu .menu-muted-link, .hamburger-menu .menu-muted-link span { color: var(--menu-text-subtle); cursor: pointer; } .hamburger-menu .menu-toggle-line { text-align: center; font-size: 0.88rem; color: var(--menu-text-subtle); margin-top: 16px; } .hamburger-menu .menu-forgot-row { text-align: right; margin-bottom: 16px; } .hamburger-menu .menu-pro-badge { color: var(--menu-accent); margin: 0 0 8px; font-size: 0.95rem; } .hamburger-menu .menu-divider-line { height: 1px; background: var(--menu-border-soft); margin: 8px 0 20px; } .hamburger-menu .menu-message { font-size: 0.85rem; text-align: center; margin-bottom: 16px; } .hamburger-menu .menu-message-success { color: var(--menu-success); } .hamburger-menu .menu-message-error { color: var(--menu-error); } .hamburger-menu .menu-message-accent { color: var(--menu-accent); } .hamburger-menu .menu-alert-ended { background: rgba(232, 165, 152, 0.12); border: 1px solid rgba(232, 165, 152, 0.28); border-radius: 8px; padding: 14px; margin-bottom: 20px; color: var(--menu-text); font-size: 0.95rem; } .hamburger-menu .menu-delete-confirm { margin-top: 16px; background: rgba(232, 165, 152, 0.1); border: 1px solid rgba(232, 165, 152, 0.28); border-radius: 8px; padding: 16px; } .hamburger-menu .menu-delete-confirm p { color: var(--menu-text-muted); font-size: 0.9rem; margin-bottom: 12px; } .hamburger-menu .menu-subscribed-via { color: var(--menu-text-subtle); font-size: 0.8rem; text-align: center; margin: 0 0 16px; } .hamburger-menu .menu-post-title { color: var(--menu-heading); font-size: 1.3rem; font-weight: 500; margin-bottom: 8px; text-align: center; } .hamburger-menu .menu-post-lead { color: var(--menu-text-muted); font-size: 0.9rem; margin-bottom: 28px; text-align: center; } .hamburger-menu .menu-auth-error-box { display: none; color: var(--menu-error); font-size: 0.85rem; margin-bottom: 12px; padding: 10px; background: rgba(232, 165, 152, 0.1); border-radius: 8px; } .hamburger-menu .menu-tracks-lead { padding: 16px 20px; color: var(--menu-text-muted); margin-bottom: 0; font-size: 0.9rem; } /* Track items in menu */ .hamburger-track-item { display: flex; align-items: center; padding: 14px 20px; color: var(--menu-text-muted); cursor: pointer; font-size: 0.95rem; } .hamburger-track-item:hover { background: var(--menu-surface-hover); } .hamburger-track-item.active { color: var(--menu-heading); font-weight: 500; } .hamburger-track-item .track-indicator { width: 24px; margin-right: 12px; text-align: center; } /* Password toggle */ .pw-wrap { position: relative; } .pw-wrap input { padding-right: 44px !important; } .pw-toggle { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--menu-text-subtle); cursor: pointer; padding: 4px; font-size: 0; line-height: 1; } .pw-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Feedback content in menu */ .hamburger-feedback { padding: 20px; color: var(--menu-text-muted); font-size: 0.95rem; line-height: 1.6; } .hamburger-feedback p { margin-bottom: 16px; } .hamburger-feedback p:last-child { margin-bottom: 0; } .hamburger-feedback strong { color: var(--menu-text); font-weight: 500; } .hamburger-feedback a { color: var(--menu-link); text-decoration: underline; text-underline-offset: 3px; } .hamburger-feedback a:hover { color: var(--menu-link-hover); } .hamburger-feedback .menu-meta, .hamburger-feedback .updated { color: var(--menu-text-subtle); font-size: 0.8rem; margin-bottom: 18px; } .hamburger-feedback .menu-muted { opacity: 1; color: var(--menu-text-subtle); margin-top: 24px; } /* Upgrade view */ .upgrade-content { padding: 20px; color: var(--menu-text); } .upgrade-content > h3 { margin: 0 0 8px; font-size: 1.15rem; font-weight: 500; color: var(--menu-heading); } .upgrade-content > .upgrade-lead { color: var(--menu-text-muted); margin: 0 0 24px; font-size: 0.92rem; line-height: 1.5; } .upgrade-status { text-align: center; padding: 16px; margin-bottom: 20px; background: var(--menu-surface); border-radius: 12px; } .upgrade-status.is-pro { background: var(--menu-accent-soft); } .upgrade-status h3 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 500; color: var(--menu-heading); } .upgrade-status p { margin: 0; color: var(--menu-text-muted); font-size: 0.9rem; } .upgrade-options { margin-bottom: 24px; } .upgrade-option { display: flex; justify-content: space-between; align-items: center; padding: 16px; margin-bottom: 12px; background: var(--menu-surface); border: 1px solid var(--menu-border-soft); border-radius: 12px; cursor: pointer; transition: background 0.2s; } .upgrade-option:hover { background: var(--menu-surface-hover); } .upgrade-option-info { flex: 1; } .upgrade-option-name { font-weight: 500; margin-bottom: 4px; color: var(--menu-heading); } .upgrade-option-price { color: var(--menu-text-muted); font-size: 0.9rem; } .upgrade-option-badge { background: var(--menu-accent-soft); color: var(--menu-accent); padding: 4px 10px; border-radius: 20px; font-size: 0.8rem; } .upgrade-content .upgrade-section-label { margin: 24px 0 12px; font-size: 1rem; font-weight: 500; color: var(--menu-text); } .upgrade-content .upgrade-toggle { color: var(--menu-text-muted); font-size: 0.9rem; cursor: pointer; margin: 0 0 4px; } .upgrade-content .upgrade-panel { display: none; margin: 12px 0 16px; padding: 16px; background: var(--menu-surface); border-radius: 10px; border: 1px solid var(--menu-border-soft); } .upgrade-content .upgrade-panel.is-open { display: block; } .upgrade-content .upgrade-panel-note { color: var(--menu-text-subtle); font-size: 0.75rem; margin: 0 0 10px; line-height: 1.4; } .upgrade-content .upgrade-restore { color: var(--menu-text-subtle); font-size: 0.8rem; text-align: center; margin: 16px 0 8px; cursor: pointer; } .upgrade-content .upgrade-footer { color: var(--menu-text-subtle); font-size: 0.75rem; text-align: left; margin-top: 20px; line-height: 1.6; } .upgrade-content .upgrade-footer span { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .upgrade-benefits { margin-top: 24px; } .upgrade-benefits h4 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--menu-text-subtle); margin-bottom: 16px; } .upgrade-benefit { display: flex; align-items: flex-start; margin-bottom: 14px; font-size: 0.95rem; line-height: 1.5; color: var(--menu-text-muted); } .upgrade-benefit strong { color: var(--menu-text); } .upgrade-benefit-icon { margin-right: 12px; opacity: 0.8; } .upgrade-note { margin-top: 24px; padding: 16px; background: var(--menu-surface); border-radius: 8px; font-size: 0.85rem; color: var(--menu-text-subtle); line-height: 1.5; } /* Team admin in menu */ .hamburger-menu .menu-team h3 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 500; color: var(--menu-heading); } .hamburger-menu .menu-team-card { background: var(--menu-surface); border-radius: 10px; padding: 14px 16px; margin-bottom: 20px; border: 1px solid var(--menu-border-soft); } .hamburger-menu .menu-team-member { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--menu-border-soft); } .hamburger-menu .menu-team-member:last-child { border-bottom: none; } .hamburger-menu .menu-team-member-email { font-size: 0.8rem; color: var(--menu-text-subtle); } .hamburger-menu .menu-team-remove { color: var(--menu-error); font-size: 0.8rem; cursor: pointer; margin-left: 8px; } .hamburger-menu .menu-loading, .hamburger-menu .menu-empty { color: var(--menu-text-subtle); text-align: center; padding: 20px; } .hamburger-menu .menu-seats-row { display: flex; align-items: center; gap: 10px; } .hamburger-menu .menu-seats-row input { width: 70px; text-align: center; padding: 8px 0; border: none; border-bottom: 1.5px solid var(--menu-input-line); background: transparent; color: var(--menu-heading); font-family: inherit; font-size: 1rem; outline: none; box-sizing: border-box; } .hamburger-menu .menu-seats-row button { padding: 8px 16px; background: var(--menu-surface); color: var(--menu-text); border: 1px solid var(--menu-border); border-radius: 8px; font-size: 0.85rem; cursor: pointer; } .upgrade-content .upgrade-restore:hover { color: var(--menu-text-muted); } .upgrade-content #restore-purchases-message a { color: var(--menu-link); } /* Isolate menu from light-stage typography (body[class*="stage-"] h3/p) */ body.app-process .hamburger-menu p, body.app-process .hamburger-menu li { color: var(--menu-text-muted); font-size: 0.95rem; opacity: 1; } body.app-process .hamburger-menu h3, body.app-process .hamburger-menu h4 { color: var(--menu-text); font-family: 'Geist', -apple-system, sans-serif; font-weight: 500; } body.app-process .hamburger-menu strong { color: rgba(250, 250, 249, 0.82); font-weight: 500; } /* Menu overlay */ .hamburger-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 998; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .hamburger-overlay.open { opacity: 1; visibility: visible; } /* Auth modal */ /* Generic confirmation modal — used by any "are you sure?" prompt across the app. Built dynamically by confirmModal() in app.js. Two button variants: .primary (non-destructive, dark neutral) and .destructive (delete-style, warm red). The colour palette is warm neutrals (off-white / charcoal) so the modal sits comfortably on any of the app's coloured stage backgrounds without the jarring pure-white-on-anything contrast a default modal would have. */ .confirm-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; opacity: 0; transition: opacity 0.18s ease-out; } .confirm-modal-overlay.visible { opacity: 1; } .confirm-modal { background: #F7F4EE; border-radius: 16px; padding: 28px; width: 100%; max-width: 380px; transform: translateY(8px); transition: transform 0.22s ease-out; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22); } .confirm-modal-overlay.visible .confirm-modal { transform: translateY(0); } .confirm-modal-title { margin: 0 0 12px; color: #2C2823; font-size: 1.2rem; font-weight: 600; } .confirm-modal-body { margin: 0 0 24px; color: #5A5249; font-size: 0.95rem; line-height: 1.5; } .confirm-modal-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* Modal buttons match the rest of the app's button language: pill shape (border-radius: 30px), generous tap target, light weight. Sized so three buttons (Cancel / Update / New name) fit comfortably on a 380-wide modal at narrow phone widths. All three carry a transparent 1px border so heights stay identical regardless of whether the variant happens to draw a visible border. */ .confirm-modal-btn { padding: 10px 22px; border-radius: 30px; border: 1px solid transparent; font-size: 0.95rem; font-weight: 400; cursor: pointer; transition: background 0.15s ease; font-family: inherit; min-width: 80px; } .confirm-modal-btn.cancel { background: rgba(44, 40, 35, 0.08); color: #5A5249; } .confirm-modal-btn.cancel:hover { background: rgba(44, 40, 35, 0.14); } .confirm-modal-btn.primary { background: #3A332B; color: white; } .confirm-modal-btn.primary:hover { background: #4A4138; } .confirm-modal-btn.destructive { background: #C4554F; color: white; } .confirm-modal-btn.destructive:hover { background: #B14843; } /* Middle button in 3-button modals (e.g. Cancel / Update / New name). Outlined warm-dark — visually distinct from Cancel (filled muted) and Primary (filled dark) without competing for emphasis. */ .confirm-modal-btn.secondary { background: transparent; color: #3A332B; border: 1px solid rgba(44, 40, 35, 0.35); } .confirm-modal-btn.secondary:hover { background: rgba(44, 40, 35, 0.06); } /* My Plan card footer — Edit on the left, Delete on the right. Delete uses muted text by default and turns red on hover/tap to signal destructive intent. */ .plan-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .plan-card-footer-action { font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); cursor: pointer; transition: color 0.15s ease; } .plan-card-footer-action:hover { color: rgba(255, 255, 255, 0.8); } .plan-card-footer-action.destructive:hover { color: #E89B96; } .auth-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: none; align-items: center; justify-content: center; z-index: 300; } .auth-modal-overlay.visible { display: flex; } .auth-modal { background: white; border-radius: 16px; padding: 32px; width: 90%; max-width: 360px; } .auth-modal h2 { margin: 0 0 24px; color: #333; font-size: 1.5rem; font-weight: 500; } .auth-modal-tabs { display: flex; gap: 24px; margin-bottom: 24px; border-bottom: 1px solid #eee; } .auth-modal-tab { padding-bottom: 12px; color: #999; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .auth-modal-tab.active { color: #333; border-bottom-color: #333; } .auth-input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem; margin-bottom: 16px; box-sizing: border-box; } .auth-input:focus { outline: none; border-color: #999; } .auth-submit { width: 100%; padding: 14px; background: #333; color: white; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; } .auth-submit:hover { opacity: 0.9; } .auth-error { color: #e74c3c; font-size: 0.9rem; margin-bottom: 16px; } .auth-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 1.5rem; color: #999; cursor: pointer; } /* Wins panel */ .wins-panel { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: inherit; transform: translateY(100%); transition: transform 0.3s ease-out; z-index: 1001; display: flex; padding-top: var(--sa-top); padding-bottom: var(--sa-bottom); flex-direction: column; overflow-y: auto; } .wins-panel.visible { transform: translateY(0); } .wins-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; flex-shrink: 0; max-width: 560px; margin-left: auto; margin-right: auto; width: 100%; position: sticky; top: 0; background: inherit; z-index: 1; } .wins-panel-title { font-size: 1.1rem; font-weight: 400; opacity: 0.9; } .wins-close { background: rgba(0, 0, 0, 0.15); border: none; border-radius: 50%; width: 36px; height: 36px; color: rgba(255, 255, 255, 0.7); font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; } .wins-list { padding: 0 24px 24px; display: flex; flex-direction: column; gap: 16px; max-width: 560px; margin-left: auto; margin-right: auto; width: 100%; } .win-item { background: rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 16px; } .win-task-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; } .win-task { font-size: 0.85rem; opacity: 0.6; flex: 1; min-width: 0; } .win-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.5; flex-shrink: 0; } .win-reflection { font-size: 1rem; line-height: 1.5; font-style: italic; } .wins-empty { text-align: center; opacity: 0.7; padding: 48px 24px; line-height: 1.6; } .wins-loading { text-align: center; opacity: 0.6; padding: 48px 24px; } /* Quick Starts panel — saved session blueprints. Visual treatment mirrors the wins panel for consistency. */ .quickstarts-panel { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: inherit; transform: translateY(100%); transition: transform 0.3s ease-out; z-index: 1001; display: flex; padding-top: var(--sa-top); padding-bottom: var(--sa-bottom); flex-direction: column; overflow-y: auto; } .quickstarts-panel.visible { transform: translateY(0); } .quickstarts-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; flex-shrink: 0; max-width: 560px; margin-left: auto; margin-right: auto; width: 100%; position: sticky; top: 0; background: inherit; z-index: 1; } .quickstarts-panel-title { font-size: 1.1rem; font-weight: 400; opacity: 0.9; } .quickstarts-close { background: rgba(0, 0, 0, 0.15); border: none; border-radius: 50%; width: 36px; height: 36px; color: rgba(255, 255, 255, 0.7); font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; } .quickstarts-list { padding: 0 24px 24px; display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin-left: auto; margin-right: auto; width: 100%; } /* How this works panel — content styles only. Panel chrome reuses .quickstarts-panel / .quickstarts-panel-header / .quickstarts-close / .quickstarts-list CSS. */ .hiw-content { padding: 0 24px 40px; max-width: 560px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 0; } .hiw-intro { font-size: 0.95rem; font-weight: 300; color: rgba(255, 255, 255, 0.7); line-height: 1.6; margin-bottom: 24px; } .hiw-image-slot { border-radius: 12px; margin-bottom: 20px; } .hiw-image-slot img { width: 100%; height: auto; display: block; border-radius: 12px; } .hiw-faq-item { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 18px 0; } .hiw-faq-item:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .hiw-faq-q { font-size: 0.95rem; font-weight: 500; color: rgba(255, 255, 255, 0.9); margin-bottom: 8px; } .hiw-faq-a { font-size: 0.88rem; font-weight: 300; color: rgba(255, 255, 255, 0.6); line-height: 1.6; margin: 0; } .hiw-cta { margin-top: 28px; text-align: center; } .quickstart-item { background: rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 12px; transition: background 0.15s ease; } .quickstart-item-main { flex: 1; min-width: 0; cursor: pointer; } .quickstart-item-main:hover { opacity: 0.85; } .quickstart-item-name { font-size: 1rem; font-weight: 500; margin-bottom: 4px; word-break: break-word; } .quickstart-item-task { font-size: 0.8rem; opacity: 0.55; word-break: break-word; } .quickstart-item-delete { background: rgba(0, 0, 0, 0.08); border: none; border-radius: 50%; width: 28px; height: 28px; color: rgba(255, 255, 255, 0.35); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s ease, color 0.15s ease; } .quickstart-item-delete:hover { background: rgba(196, 85, 79, 0.4); color: white; } /* Empty-state message in the Quick Starts panel. Styled like the in-app help-card pattern (rounded box, left-aligned, subtle background) so it reads as helpful guidance rather than an apologetic placeholder. */ .quickstarts-empty { background: rgba(0, 0, 0, 0.1); border-radius: 12px; padding: 20px 22px; margin-top: 8px; text-align: left; line-height: 1.55; } .quickstarts-empty p { margin: 0 0 10px; font-size: 0.9rem; font-weight: 300; color: rgba(255, 255, 255, 0.75); } .quickstarts-empty p:last-child { margin-bottom: 0; } .quickstarts-empty p strong { font-weight: 500; color: rgba(255, 255, 255, 0.95); } .quickstarts-loading { text-align: center; opacity: 0.6; padding: 48px 24px; } /* inputModal additions — text-input variant of confirmModal. */ .confirm-modal-label { display: block; margin: 0 0 6px; color: #5A5249; font-size: 0.85rem; font-weight: 500; } .confirm-modal-input { width: 100%; box-sizing: border-box; padding: 12px 14px; margin: 0 0 24px; border: 1px solid rgba(44, 40, 35, 0.18); border-radius: 8px; font-size: 1rem; font-family: inherit; color: #2C2823; background: white; outline: none; transition: border-color 0.15s ease; } .confirm-modal-input:focus { border-color: #3A332B; } .community-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; cursor: pointer; user-select: none; } .community-toggle span { font-size: 0.85rem; opacity: 0.7; letter-spacing: 0.02em; white-space: nowrap; } .toggle-track { width: 36px; height: 20px; border-radius: 10px; background: rgba(255,255,255,0.15); position: relative; transition: background 0.2s; } .toggle-track.on { background: rgba(255,255,255,0.5); } .toggle-thumb { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,0.6); position: absolute; top: 2px; left: 2px; transition: transform 0.2s; /* Keep this thumb on its own stable compositor layer so Chrome doesn't create/destroy a layer on every toggle click. Without this, the layer churn occasionally caused a one-frame black flash of the page on Chrome desktop. */ will-change: transform; } .toggle-track.on .toggle-thumb { transform: translateX(16px); background: white; } .community-section-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 0 8px; } .community-section-title { font-size: 0.85rem; opacity: 0.5; text-transform: uppercase; letter-spacing: 0.05em; } .community-section-toggle { font-size: 0.8rem; opacity: 0.4; cursor: pointer; background: none; border: none; color: inherit; padding: 4px 0; } .community-item { background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 14px 16px; font-style: italic; font-size: 0.95rem; line-height: 1.5; opacity: 0.7; } /* Pro assist trigger */ .pro-assist-trigger { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; cursor: pointer; margin-top: 0; margin-bottom: 16px; } .pro-assist-trigger:hover { background: var(--menu-accent-soft); } .pro-assist-trigger .sparkle { font-size: 0.85rem; } /* Slide-up conversation panel. Height is driven by JS from window.visualViewport so the panel spans exactly "top of screen -> top of keyboard" on every platform (see syncConversationViewport). bottom is left auto — height wins. */ .conversation-panel { position: fixed; top: 0; bottom: auto; left: 0; right: 0; height: 100%; box-sizing: border-box; background: inherit; transform: translateY(100%); transition: transform 0.3s ease-out; z-index: 200; display: flex; flex-direction: column; overflow: hidden; padding-top: var(--sa-top); /* Nav-bar / home-indicator clearance is handled once, by .conversation-input-area (the bottom-most child). Keep this 0 so the safe-area inset isn't reserved twice (double gap under input). */ padding-bottom: 0; } .conversation-panel.visible { transform: translateY(0); } .conversation-panel-header { display: flex; justify-content: flex-end; padding: 16px 60px 16px 20px; flex-shrink: 0; } .conversation-close { background: rgba(0, 0, 0, 0.15); border: none; border-radius: 50%; width: 36px; height: 36px; color: rgba(255, 255, 255, 0.7); font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; } .conversation-messages { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 24px 8px; display: flex; flex-direction: column; gap: 16px; max-width: 560px; margin-left: auto; margin-right: auto; width: 100%; } .conversation-tail-spacer { flex: 1 1 0; min-height: 0; } .conversation-scroll-anchor { flex: 0 0 0; height: 0; overflow: hidden; } /* Fade top edge when older messages are scrolled out of view above. */ .conversation-messages.has-more-above { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); } .conversation-message { max-width: 85%; line-height: 1.65; font-size: 1.0625rem; white-space: pre-line; } .conversation-message.assistant { align-self: flex-start; color: rgba(255, 255, 255, 0.95); } .conversation-message.user { align-self: flex-end; color: rgba(255, 255, 255, 0.7); padding-left: 20px; } .conversation-message.user::before { content: '> '; opacity: 0.5; } .conversation-suggestion { background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 16px; margin-top: 8px; } .conversation-suggestion-label { font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 8px; } .conversation-suggestion-text { font-size: 1.0625rem; color: rgba(255, 255, 255, 0.95); font-style: italic; } .conversation-suggestion-buttons { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .conversation-suggestion-btn { background: rgba(255, 255, 255, 0.15); border: none; border-radius: 8px; padding: 8px 14px; color: rgba(255, 255, 255, 0.9); font-size: 0.9rem; cursor: pointer; } .conversation-input-area { padding: 8px 20px; /* Nav-bar / home-indicator clearance + the same 8px breathing gap used above the keyboard, so the pill lifts clear of the nav buttons instead of sitting flush against them. */ padding-bottom: calc(var(--sa-bottom) + 8px); background: inherit; flex-shrink: 0; max-width: 560px; margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; } body.platform-web .conversation-input-area { padding-bottom: 40px; } /* Keyboard is open → safe-area / nav-bar space is hidden behind it, so drop the env() padding to a tight 12px. Applies to native (iOS home indicator, Android nav bar) and web mobile alike. */ body.keyboard-open .conversation-input-area { padding-bottom: 8px; } /* Body scroll lock while conversation panel is open. Stops iOS WKWebView from scrolling the body when the chat input gains focus, which previously dragged the (z=1000) hamburger button off-screen while the (fixed) X close button stayed put. */ body.conversation-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } /* During AI chat: only the X (close) is offered. Hides the hamburger so the user has one clear action: finish the chat, then navigate. */ body.conversation-open .hamburger-btn { display: none; } .conversation-input-row { display: flex; gap: 8px; align-items: center; background: rgba(0, 0, 0, 0.2); border-radius: 22px; padding: 4px 4px 4px 16px; min-height: 44px; } .conversation-input { flex: 1; background: transparent; border: none; padding: 0; color: white; font-family: 'Geist', 'DM Sans', -apple-system, sans-serif; font-size: 1.0625rem; line-height: 1.4; min-height: 36px; } .conversation-input::placeholder { color: rgba(255, 255, 255, 0.4); } .conversation-input:focus { outline: none; } .conversation-send { background: rgba(255, 255, 255, 0.25); border: none; border-radius: 50%; width: 32px; height: 32px; color: white; font-size: 1rem; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .conversation-typing { display: flex; gap: 4px; padding: 8px 0; } .conversation-typing span { width: 8px; height: 8px; background: var(--text-primary); border-radius: 50%; animation: typing 1.4s infinite ease-in-out; } .conversation-typing span:nth-child(2) { animation-delay: 0.2s; } .conversation-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } } @keyframes toastSlideIn { from { opacity: 0; transform: translateX(-50%) translateY(-20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes toastSlideOut { from { opacity: 1; transform: translateX(-50%) translateY(0); } to { opacity: 0; transform: translateX(-50%) translateY(-20px); } } /* Mobile responsive */ @media (max-width: 500px) { /* Mobile: hide fixed logo, show scrolling logo */ .fixed-ui .logo { display: none; } .container .logo { display: block; } .logo { font-size: 1rem; margin-bottom: 16px; } /* Smaller main headline on phones — 32px was dominating the viewport and pushing key inputs below the fold. */ h2 { font-size: 1.6rem; } .logo .tagline { display: none; } .container { padding: 16px 20px 70px 20px; } .mobile-hide { display: none !important; } .mobile-help { display: block; } .help-card.expanded { padding: 20px 22px; margin-top: 16px; } /* Action screen: tighter Timer / Start pill so the step text gets more horizontal room. Without this the pill consumed ~50% of a narrow phone viewport, cramping the step text. */ .split-btn-timer, .split-btn-start { padding: 6px 10px; font-size: 0.78rem; gap: 0; } /* Hide the clock icon on mobile to claw back another ~17px of pill width. Text "Timer" is self-explanatory. */ .split-btn-timer svg { display: none; } } /* Mobile help button at bottom of content */ .mobile-help { display: none; text-align: center; margin-top: 32px; padding-bottom: 24px; } .mobile-help-btn { background: rgba(0, 0, 0, 0.15); border: none; border-radius: 50%; width: 36px; height: 36px; color: rgba(255, 255, 255, 0.6); font-size: 1.2rem; cursor: pointer; } /* ── Redesign: light journey (Loops-inspired, +25% palette) ── Reference: loops.so — dark text on soft tinted backgrounds, Geist body, Newsreader headlines. Applies to all body.stage-* screens in index.html. */ body[class*="stage-"] { color: var(--text-primary); } body[class*="stage-"] h2 { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; font-size: 2.375rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; color: var(--text-primary); } body[class*="stage-"] h3 { color: var(--text-primary); } body[class*="stage-"] p { font-family: 'Geist', -apple-system, sans-serif; color: var(--text-muted); opacity: 1; } body[class*="stage-"] p.helper { color: var(--text-subtle); opacity: 1; } body[class*="stage-"] .icon svg { stroke: var(--text-primary); opacity: 0.75; } body[class*="stage-"] textarea { font-family: 'Geist', -apple-system, san-serif; font-size: 0.9375rem; font-weight: 400; color: var(--text-primary); background: var(--surface); border: 1px solid var(--border-soft); box-shadow: var(--surface-shadow); } body[class*="stage-"] textarea::placeholder { color: var(--text-placeholder); } body[class*="stage-"] textarea:focus { border-color: var(--border-strong); outline: none; } body[class*="stage-"] .btn { font-family: 'Geist', -apple-system, san-serif; font-size: 0.9375rem; font-weight: 500; border-color: var(--border-soft); } body[class*="stage-"] .btn-primary { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-text); opacity: 1; } body[class*="stage-"] .btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); opacity: 1; } body[class*="stage-"] .btn-primary.dropdown::after, body[class*="stage-"] .btn-secondary.dropdown::after { background-image: url("data:image/svg+xml;utf8,"); } body[class*="stage-"] .btn.btn-secondary.dropdown::after { background-image: url("data:image/svg+xml;utf8,"); } /* Context blocks (bridge, stuck, etc.) */ body[class*="stage-"] .context { border-left-color: rgba(28, 25, 23, 0.12); } body[class*="stage-"] .context-label, body[class*="stage-"] .context-text { color: var(--text-muted); opacity: 1; } body[class*="stage-"] .approach-section { border-left-color: rgba(28, 25, 23, 0.15); } body[class*="stage-"] .approach-section.action-step-card { background: var(--surface); border: 1px solid var(--border-soft); border-left: 3px solid var(--text-subtle); border-radius: 10px; padding: 14px 16px; margin-bottom: 24px; box-shadow: var(--surface-shadow); } body[class*="stage-"] .action-step-card .approach-label { color: var(--text-muted); opacity: 1; } body[class*="stage-"] .action-step-card .approach-text { color: var(--text-primary); font-size: 1.05rem; font-weight: 500; opacity: 1; } body[class*="stage-"] .approach-label, body[class*="stage-"] .approach-text { color: var(--text-muted); opacity: 1; } body[class*="stage-"] .values-expand-toggle { color: var(--text-subtle); opacity: 1; } body[class*="stage-"] .values-full-summary { border-top: var(--line); } body[class*="stage-"] .values-full-summary li { color: var(--text-muted); } /* Radio / choice options */ body[class*="stage-"] .option { background: var(--surface); border-color: rgba(28, 25, 23, 0.12); color: var(--text-primary); } body[class*="stage-"] .option.selected { background: rgba(28, 25, 23, 0.06); border-color: var(--border-strong); } body[class*="stage-"] .help-card { background: transparent; border: none; padding: 0; margin-top: 16px; } body[class*="stage-"] .help-card.expanded { background: var(--surface-muted); border: 1px solid rgba(28, 25, 23, 0.06); padding: 20px 22px; margin-top: 16px; } body[class*="stage-"] .help-card:not(.expanded) > * { display: none; } body[class*="stage-"] .help-card p, body[class*="stage-"] .help-card li { color: var(--text-muted); } body[class*="stage-"] .help-card a { color: var(--text-primary); } body[class*="stage-"] .help-card .pro-line, body[class*="stage-"] .help-card .pro-line span { color: var(--text-subtle); border-color: rgba(28, 25, 23, 0.08); } body[class*="stage-"] .help-card .pro-line-top, body[class*="stage-"] .help-card .pro-line-top span { color: var(--text-primary); border-color: rgba(28, 25, 23, 0.08); } body[class*="stage-"] .hint-toggle, body[class*="stage-"] .pro-assist-trigger { color: var(--text-subtle); } body[class*="stage-"] .pro-assist-trigger:hover { background: rgba(28, 25, 23, 0.06); } body[class*="stage-"] .hint-content { color: var(--text-muted); opacity: 1; } /* Bridge step inputs — grouped surface card */ body[class*="stage-"] .step-inputs { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; box-shadow: var(--surface-shadow); gap: 0; padding: 0; } body[class*="stage-"] .step-input-row { padding: 10px 14px; border-top: 1px solid var(--border-soft); } body[class*="stage-"] .step-input-row:first-child { border-top: none; } body[class*="stage-"] .step-number { color: var(--text-subtle); opacity: 1; } body[class*="stage-"] .step-input-row input { font-family: 'Geist', -apple-system, san-serif; font-size: 0.9375rem; font-weight: 400; color: var(--text-primary); background: transparent; border: none; border-bottom: none; padding: 4px 0; } body[class*="stage-"] .step-input-row input::placeholder { color: var(--text-placeholder); } body[class*="stage-"] .step-input-row input:focus { outline: none; border-bottom-color: transparent; } body[class*="stage-"] .step-row-btn { background: rgba(28, 25, 23, 0.07); color: var(--text-muted); } body[class*="stage-"] .add-step-btn { color: var(--text-subtle); } /* Thorn pairs (values deepening) */ body[class*="stage-"] .thorn-pair-label { color: var(--text-muted); opacity: 1; } body[class*="stage-"] .thorn-pair-card { background: var(--surface); border-color: rgba(28, 25, 23, 0.12); } body[class*="stage-"] .thorn-pair-input { font-family: 'Geist', -apple-system, san-serif; color: var(--text-primary); border-bottom-color: rgba(28, 25, 23, 0.2); } body[class*="stage-"] .thorn-pair-input::placeholder { color: var(--text-placeholder); } body[class*="stage-"] .thorn-pair-input:focus { border-bottom-color: var(--border-strong); } body[class*="stage-"] .thorn-pair-btn { background: rgba(28, 25, 23, 0.08); color: var(--text-primary); } body[class*="stage-"] .thorn-pair-add { display: block; font-family: 'Geist', -apple-system, sans-serif; font-size: 0.9375rem; color: var(--text-subtle); padding: 12px 0 8px; border: none; background: none; text-align: left; cursor: pointer; } body[class*="stage-"] .thorn-pair-add:hover { color: var(--text-muted); } body[class*="stage-"] .thorn-pair-remove { display: none; } body[class*="stage-"] .thorn-pair-remove.step-row-btn { display: flex; } /* Action screen step list */ body[class*="stage-"] .step-item { border-bottom: var(--line); } body[class*="stage-"] .step-tick { color: var(--text-primary); } body[class*="stage-"] .step-text { color: var(--text-primary); } body[class*="stage-"] .step-done-btn { background: var(--btn-secondary-bg); border-color: var(--border-soft); color: var(--btn-secondary-text); font-family: 'Geist', -apple-system, san-serif; font-weight: 500; } body[class*="stage-"] .well-done { color: var(--text-primary); } body[class*="stage-"] .progress-text { color: var(--text-subtle); opacity: 1; } body[class*="stage-"] .step-text { font-family: 'Geist', -apple-system, san-serif; } body[class*="stage-"] .split-btn { border-color: var(--border-soft); } body[class*="stage-"] .split-btn-timer, body[class*="stage-"] .split-btn-start { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); font-family: 'Geist', -apple-system, san-serif; font-weight: 500; } body[class*="stage-"] .split-btn-timer { border-right-color: var(--border-soft); } body[class*="stage-"] .timer-dropdown { box-shadow: 0 4px 20px rgba(28, 25, 23, 0.12); border: 1px solid rgba(28, 25, 23, 0.08); } body[class*="stage-"] .timer-option { color: var(--text-primary); } body[class*="stage-"] .saved-dropdown-panel { border-color: rgba(28, 25, 23, 0.12); box-shadow: 0 4px 20px rgba(28, 25, 23, 0.12); } body[class*="stage-"] .saved-dropdown-item { color: var(--text-primary); } body[class*="stage-"] .saved-dropdown-item + .saved-dropdown-item { border-top: var(--line); } body[class*="stage-"] .timer-bar { background: rgba(28, 25, 23, 0.12); } body[class*="stage-"] .timer-bar-fill { background: rgba(28, 25, 23, 0.55); } body[class*="stage-"] .focus-step-text, body[class*="stage-"] .celebrate-step { background: rgba(28, 25, 23, 0.06); color: var(--text-primary); } body[class*="stage-"] .celebrate-big { color: var(--text-primary); } /* Email signup on complete screen */ body[class*="stage-"] .email-signup { border-top: var(--line); } body[class*="stage-"] .email-signup-note { color: var(--text-muted); } body[class*="stage-"] .email-signup input[type="email"] { color: var(--text-primary); background: var(--surface); border-color: var(--border); } body[class*="stage-"] .email-signup input[type="email"]::placeholder { color: var(--text-placeholder); } body[class*="stage-"] .email-signup input[type="email"]:focus { border-color: var(--border-strong); } body[class*="stage-"] .email-signup-success p { color: var(--text-muted); } body[class*="stage-"] .email-signup-close { color: var(--text-subtle); } /* My Plan (purple stage) card footer */ body[class*="stage-"] .plan-card-footer { border-top: var(--line); } body[class*="stage-"] .plan-card-footer-action { color: var(--text-subtle); } body[class*="stage-"] .plan-card-footer-action:hover { color: var(--text-primary); } body[class*="stage-"] .plan-card-footer-action.destructive:hover { color: #C4554F; } /* My Plan — list layout, saved context, form inputs (redesign) */ body.app-process .plan-breadcrumb { font-family: 'Geist', -apple-system, sans-serif; font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-subtle); margin: -12px 0 28px; } body.app-process .plan-breadcrumb span { margin: 0 0.35em; text-transform: none; letter-spacing: 0; } body.app-process .plan-topics { margin: 0; } body.app-process .plan-topic { margin: 0 0 56px; padding: 0; border: none; background: transparent; box-shadow: none; } body.app-process .plan-topic:last-child { margin-bottom: 0; } body.app-process .plan-topic-drive { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle); margin-bottom: 6px; } body.app-process .plan-topic-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px 20px; } body.app-process .plan-topic-goal { flex: 1; min-width: 0; font-size: clamp(1.0625rem, 2.8vw, 1.1875rem); font-weight: 500; color: var(--text-primary); line-height: 1.4; margin: 0; overflow-wrap: anywhere; word-break: break-word; } body.app-process .plan-topic-actions { display: flex; flex-shrink: 0; align-items: baseline; gap: 1.25em; margin-top: 2px; font-family: 'Geist', -apple-system, sans-serif; font-size: 0.9375rem; } body.app-process .plan-task-list { border-top: var(--line); margin-top: var(--nav-gap); } body.app-process .plan-task-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: var(--line); } body.app-process .plan-task-checkbox { width: 20px; height: 20px; border: 1.5px solid rgba(28, 25, 23, 0.22); border-radius: 4px; flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: var(--text-primary); background: transparent; margin-top: 2px; } body.app-process .plan-task-checkbox.ongoing { border-radius: 50%; } body.app-process .plan-task-checkbox.completed { background: rgba(28, 25, 23, 0.06); border-color: rgba(28, 25, 23, 0.28); } body.app-process .plan-task-text { flex: 1; font-size: 0.9375rem; color: var(--text-primary); line-height: 1.4; } body.app-process .plan-task-text.completed { text-decoration: line-through; color: var(--text-subtle); opacity: 1; } body.app-process .plan-task-ticks { font-size: 0.7rem; color: var(--text-muted); margin-left: 4px; } body.app-process .plan-task-start { flex-shrink: 0; margin-left: auto; margin-top: 2px; } body.app-process .plan-task-start.pick-pulse { animation: planStartPulse 2s ease-in-out infinite; } @keyframes planStartPulse { 0%, 100% { color: var(--text-subtle); } 50% { color: var(--text-primary); } } body.app-process .plan-topic-action { font-size: 0.9375rem; padding: 0; } body.app-process .plan-topic-action--delete:hover { color: #C4554F; } body.app-process #plan-task-inputs { margin: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0; border-top: var(--line); } body.app-process #plan-task-inputs .step-input-row { padding-left: 0; padding-right: 0; border-bottom: var(--line); } body.app-process #plan-task-inputs .step-row-actions { gap: 12px; } body.app-process .task-ongoing-btn.process-inline-link { flex-shrink: 0; font-size: 0.875rem; color: var(--text-subtle); } body.app-process .task-ongoing-btn.process-inline-link.is-active { color: var(--text-primary); font-weight: 500; } body.app-process .plan-supplemental { margin-top: 32px; } body.app-process .plan-supplemental .approach-section { border-left: var(--line-accent); padding-left: 16px; margin-bottom: 0; } body.app-process .plan-supplemental .approach-text { font-family: 'Geist', -apple-system, sans-serif; font-size: 0.95rem; font-style: normal; font-weight: 400; color: var(--text-muted); line-height: 1.5; opacity: 1; } body.app-process #plan-task-inputs .step-input { font-size: clamp(1.0625rem, 3vw, 1.1875rem); } body.app-process .task-ongoing-btn.is-active { color: var(--text-primary); font-weight: 500; } /* My Plan screens — hide static journey strip (no pan on this flow) */ body.app-process.screen-direction .journey-overlay, body.app-process.screen-direction .journey-strip-floor { display: none !important; } body.app-process.screen-direction.content-behind-journey .container { padding-bottom: calc(var(--dock-h) + 24px + var(--sa-bottom)); } body.app-process[class*="stage-"] .direction-link-option { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--surface-shadow); } body.app-process[class*="stage-"] .direction-link-option:hover { border-color: var(--border-strong); } body.app-process[class*="stage-"] .direction-link-option.selected { background: var(--surface-muted); border-color: var(--border-strong); } body.app-process[class*="stage-"] .direction-drive { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle); } body.app-process[class*="stage-"] .direction-goal { font-size: 0.95rem; color: var(--text-primary); margin-top: 2px; } /* Logo mantra — Geist chrome, lighter/smaller than Newsreader h2 */ body[class*="stage-"] .logo.logo-mantra { font-family: 'Geist', -apple-system, sans-serif; font-size: 0.8rem; font-weight: 300; letter-spacing: 0.01em; line-height: 1.48; color: var(--text-placeholder); } /* Near-white entry — keep tagline soft */ body.stage-entry .logo.logo-mantra, body.stage-red .logo.logo-mantra, body.stage-setup .logo.logo-mantra { color: var(--text-placeholder); } /* Tinted journey stages — match YOUR TASK (--text-muted) for sharper contrast */ body.stage-mist .logo.logo-mantra, body.stage-orange .logo.logo-mantra, body.stage-orange-muted .logo.logo-mantra, body.stage-green .logo.logo-mantra, body.stage-green-sage .logo.logo-mantra, body.stage-yellow .logo.logo-mantra, body.stage-purple .logo.logo-mantra { color: var(--text-muted); } body[class*="stage-"] .logo-mantra .logo-line { display: block; } body[class*="stage-"] .logo-mantra .logo-line + .logo-line { margin-top: 0.18em; } body[class*="stage-"] .fixed-ui .logo.logo-mantra { top: 32px; left: 36px; } @media (max-width: 500px) { body[class*="stage-"] .logo.logo-mantra { font-size: 0.8rem; margin-bottom: 20px; padding-top: 8px; padding-left: 4px; } } body[class*="stage-"] .header-link { color: var(--text-subtle); } body[class*="stage-"] .header-link:hover, body[class*="stage-"] .header-link.active { color: var(--text-primary); } body[class*="stage-"] .hamburger-btn { background: rgba(28, 25, 23, 0.06); } body[class*="stage-"] .hamburger-btn span { background: var(--text-primary); } body[class*="stage-"] .fixed-ui .blog-link { color: var(--text-subtle); } body[class*="stage-"] .fixed-ui .blog-link:hover { color: var(--text-primary); } body[class*="stage-"] .blog-link-inline { color: var(--text-subtle); } body[class*="stage-"] .blog-link-inline:hover { color: var(--text-primary); } body[class*="stage-"] .fixed-ui .brand-mark { opacity: 0.28; } body[class*="stage-"] .fixed-ui .brand-mark:hover { opacity: 0.5; } /* Slide-up panels (How this works, Wins, Quick starts) */ body[class*="stage-"] .quickstarts-panel-title, body[class*="stage-"] .wins-panel-title { color: var(--text-primary); } body[class*="stage-"] .quickstarts-close, body[class*="stage-"] .wins-close { color: var(--text-muted); background: rgba(28, 25, 23, 0.06); } body[class*="stage-"] .hiw-intro { color: var(--text-muted); } body[class*="stage-"] .hiw-faq-item { border-color: rgba(28, 25, 23, 0.08); } body[class*="stage-"] .hiw-faq-q { color: var(--text-primary); } body[class*="stage-"] .hiw-faq-a { color: var(--text-muted); } body[class*="stage-"] .hiw-faq-a a { color: var(--text-primary); } body[class*="stage-"] .win-item { background: var(--surface); border: 1px solid rgba(28, 25, 23, 0.06); } body[class*="stage-"] .win-task, body[class*="stage-"] .win-reflection { color: var(--text-subtle); opacity: 1; } body[class*="stage-"] .win-label { color: var(--text-primary); } body[class*="stage-"] .wins-empty { color: var(--text-subtle); } /* Quick Starts panel items */ body[class*="stage-"] .quickstart-item { background: var(--surface); border: 1px solid rgba(28, 25, 23, 0.06); } body[class*="stage-"] .quickstart-item-name { color: var(--text-primary); } body[class*="stage-"] .quickstart-item-task { color: var(--text-subtle); opacity: 1; } body[class*="stage-"] .quickstart-item-delete { color: var(--text-subtle); background: rgba(28, 25, 23, 0.06); } body[class*="stage-"] .quickstarts-empty { background: var(--surface-muted); } body[class*="stage-"] .quickstarts-empty p { color: var(--text-muted); } body[class*="stage-"] .quickstarts-empty p strong { color: var(--text-primary); } body[class*="stage-"] .quickstarts-loading { color: var(--text-subtle); opacity: 1; } /* Pro assist conversation panel */ body[class*="stage-"] .conversation-close { color: var(--text-muted); background: rgba(28, 25, 23, 0.06); } body[class*="stage-"] .conversation-message.assistant { color: var(--text-primary); } body[class*="stage-"] .conversation-message.user { color: var(--text-muted); } body[class*="stage-"] .conversation-suggestion { background: rgba(28, 25, 23, 0.06); } body[class*="stage-"] .conversation-suggestion-label { color: var(--text-subtle); } body[class*="stage-"] .conversation-suggestion-text { color: var(--text-primary); } body[class*="stage-"] .conversation-suggestion-btn { background: rgba(28, 25, 23, 0.06); color: var(--text-primary); } body[class*="stage-"] .conversation-input-row { background: var(--surface); border: 1px solid rgba(28, 25, 23, 0.12); } body.app-process[class*="stage-"] .conversation-input-row { background: rgba(28, 25, 23, 0.1); border: none; border-radius: 22px; } body[class*="stage-"] .conversation-input { color: var(--text-primary); } body[class*="stage-"] .conversation-input::placeholder { color: var(--text-placeholder); } body[class*="stage-"] .conversation-send { background: var(--text-primary); color: var(--stage-entry); } /* Journey hills — subtle tint on all light stages */ body[class*="stage-"] .journey-scene svg path { fill: rgba(28, 25, 23, 0.04); } /* Summit sun — white SVG rings vanish on light yellow; warm radiance instead */ body.stage-yellow .scene-summit::before { content: ''; position: absolute; top: 8%; left: 50%; transform: translateX(-50%); width: min(90vw, 560px); height: min(90vw, 560px); border-radius: 50%; background: radial-gradient( circle, rgba(255, 252, 240, 0.85) 0%, rgba(255, 244, 210, 0.45) 28%, rgba(255, 232, 175, 0.18) 52%, rgba(220, 201, 156, 0) 72% ); pointer-events: none; /* Keep radiance in the sky — fade out before main content */ -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 52%); mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 52%); } body.stage-yellow .scene-summit svg circle:nth-of-type(1) { fill: rgba(255, 228, 165, 0.28); } body.stage-yellow .scene-summit svg circle:nth-of-type(2) { fill: rgba(255, 238, 195, 0.38); } body.stage-yellow .scene-summit svg circle:nth-of-type(3) { fill: rgba(255, 247, 225, 0.48); } body.stage-yellow .scene-summit svg path:nth-of-type(1) { fill: rgba(130, 95, 35, 0.09); } body.stage-yellow .scene-summit svg path:nth-of-type(2) { fill: rgba(130, 95, 35, 0.13); } /* De-clutter — hide screen icons but keep vertical spacing */ body[class*="stage-"] .icon-wrapper .icon { visibility: hidden; } /* ═══════════════════════════════════════════════════════════════════════════ Process / journey UI — index.html (body.app-process) Ported from palette-preview.html#process-kit and #final-preview ═══════════════════════════════════════════════════════════════════════════ */ body.app-process { --strip-art-h: clamp(200px, 30vh, 300px); --strip-feather-h: clamp(24px, 4vh, 32px); /* scroll-fade at top of floor panel only */ --strip-cover-h: var(--strip-art-h); /* floor = art height; no band above hills */ --strip-mask-solid: 86%; /* art overlay fade (was 78%) */ --strip-mask-solid-frac: 0.86; /* for calc() — keep in sync with mask % */ --strip-cue-size: 44px; --strip-cue-gap: clamp(4px, 1vh, 8px); /* below text fade top, into art */ --strip-cue-top: calc(var(--strip-art-h) - var(--strip-cue-gap) - var(--strip-cue-size) / 2); --strip-cue-bottom: calc(var(--strip-cue-top) - var(--strip-cue-size)); --strip-h: var(--strip-art-h); /* alias — padding/overlay use art height */ --dock-h: 64px; --page-gutter: max(16px, var(--sa-left)); --page-gutter-right: max(16px, var(--sa-right)); --pan: 0; /* Nav bar colours — OPAQUE per-stage bakes so nothing shows through (animations + scrolling text safe). Reads roughly grey in context, matching palette-preview. --forward-bg = primary/dark cell, --forward-back-bg = secondary/light cell. */ --stage-bg: var(--stage-entry); --forward-bg: #ABAAA8; --forward-back-bg: #DFDFDD; --line-color: rgba(28, 25, 23, 0.18); --line: 1.5px solid var(--line-color); --line-focus: rgba(28, 25, 23, 0.45); --field-warning: #A16207; --field-warning-soft: rgba(161, 98, 7, 0.12); --field-warning-border: rgba(161, 98, 7, 0.55); } /* ── Tinted per stage — opaque bake of palette .process-screen.tinted. Each forward/back pair is the palette's translucent colour flattened onto its stage bg, so it looks like palette-preview but can never be seen through. Light (back) cells use the palette's deeper off-white tone; cells lighten on hover (see hover rule below). ── */ body.app-process.stage-entry, body.app-process.stage-red, body.app-process.stage-setup { --stage-bg: var(--stage-entry); --forward-bg: #ABAAA8; --forward-back-bg: #DFDFDD; } body.app-process.stage-mist, body.app-process.stage-orange, body.app-process.stage-orange-muted { --stage-bg: var(--stage-warmup); --forward-bg: #B8C5B8; --forward-back-bg: #D3DDD4; } body.app-process.stage-green { --stage-bg: var(--stage-green); --forward-bg: #A6BAA8; --forward-back-bg: #C6D4C8; } body.app-process.stage-green-sage { --stage-bg: var(--stage-green-sage); --forward-bg: #A6B39E; --forward-back-bg: #C6D0C2; } body.app-process.stage-yellow { --stage-bg: var(--stage-yellow); --forward-bg: #C2B28B; --forward-back-bg: #DACFB4; } body.app-process.stage-purple { --stage-bg: var(--stage-purple); --forward-bg: #B0A9B3; --forward-back-bg: #CDC8D0; } /* Hide legacy fixed chrome — page column replaces it */ body.app-process .fixed-ui .fixed-ui-mantra, body.app-process .fixed-ui .blog-link, body.app-process .fixed-ui .brand-mark { display: none !important; } body.app-process .blog-link-inline { display: none !important; } @media (max-width: 500px) { body.app-process .page-blog-link { display: none !important; } } /* Book/page column — all UI except full-bleed journey strip */ body.app-process .page-column { position: relative; z-index: 2; width: 100%; max-width: 640px; margin: 0 auto; padding-left: var(--page-gutter); padding-right: var(--page-gutter-right); box-sizing: border-box; min-height: 100dvh; display: flex; flex-direction: column; } body.app-process .page-chrome { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-shrink: 0; /* body already has padding-top: var(--sa-top) — do not add inset again */ padding: 32px 0 0; font-family: 'Geist', -apple-system, sans-serif; font-size: 0.9375rem; } body.app-process .page-chrome-mantra { margin: 0; padding: 0; } /* Mobile whisper brand — lighter than Menu so the headline stays hero */ body.app-process .page-chrome-wordmark { display: none; font-family: 'Geist', -apple-system, sans-serif; font-size: 0.875rem; font-weight: 400; letter-spacing: 0.01em; color: var(--text-subtle); line-height: 1.2; user-select: none; pointer-events: none; } /* Menu link on all sizes; hamburger icon retired on app shell */ body.app-process .page-chrome-menu-link { display: inline; margin: 0; flex-shrink: 0; } body.app-process .page-chrome .hamburger-btn { display: none; } body.app-process .hamburger-btn.open { position: fixed; top: var(--sa-top); right: var(--page-gutter-right); z-index: 1001; float: none; margin: 0; width: 44px; height: 44px; visibility: hidden; pointer-events: none; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); } body.app-process .hamburger-btn.open span { background: rgba(255, 255, 255, 0.85); } /* Entry page — blog at viewport left; brand mark is always visible (see .page-brand-mark) */ body.app-process .page-entry-footer { pointer-events: none; } body.app-process .page-entry-footer[hidden] { display: none !important; } body.app-process .page-blog-link { position: fixed; left: calc(24px + var(--sa-left)); bottom: calc(22px + var(--sa-bottom)); height: 54px; display: flex; align-items: center; z-index: 1; font-family: 'Geist', -apple-system, sans-serif; font-size: 0.8125rem; font-weight: 300; color: var(--text-subtle); text-decoration: none; pointer-events: auto; } body.app-process .page-blog-link:hover { color: var(--text-primary); } body.app-process .page-brand-mark { position: fixed; right: calc(24px + var(--sa-right)); bottom: calc(22px + var(--sa-bottom)); height: 54px; display: flex; align-items: center; z-index: 1; opacity: 1; line-height: 0; pointer-events: auto; } body.app-process .page-brand-mark:hover { opacity: 0.82; } body.app-process .page-brand-mark img { display: block; width: 28px; height: 28px; border-radius: 6px; } /* Wider content column; room for fixed strip + floating nav */ body.app-process .container { max-width: none; width: 100%; margin: 0; padding: 36px 0 calc(var(--strip-h) + var(--dock-h) + 24px + var(--sa-bottom)); flex: 1; } body.app-process.content-behind-journey .container { padding-bottom: calc(var(--strip-cover-h) + var(--dock-h) + 24px + var(--sa-bottom)); } body.app-process .container .logo { display: none !important; } body.app-process h2 { font-size: clamp(2rem, 5.5vw, 2.75rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.08; margin-bottom: 28px; } body.app-process h2 em { font-style: italic; } /* Hidden until headline-motion prepares or animates — prevents pre-animation flash */ body.app-process #container h2:not(.celebrate-big) { opacity: 0; transform: translate3d(0, 8px, 0); } body.app-process #container h2.headline-shown:not(.celebrate-big) { opacity: 1; transform: none; } body.app-process h2 .motion-line { display: block; } body.app-process h2 .motion-line, body.app-process h2[data-motion-block] { will-change: opacity, transform; } @media (prefers-reduced-motion: reduce) { body.app-process #container h2:not(.celebrate-big) { opacity: 1 !important; transform: none !important; } body.app-process h2 .motion-line, body.app-process h2[data-motion-block] { opacity: 1 !important; visibility: visible !important; transform: none !important; transition: none !important; } } /* Headline is king — drop icon chrome entirely */ body.app-process .icon-wrapper { display: none; } /* Task context — no "Your task" label */ body.app-process .context-label { display: none; } body.app-process .context { border-left: none; padding-left: 0; margin-top: 0; margin-bottom: 28px; opacity: 1; } /* Task quote — Newsreader italic (subject of the question, not UI chrome) */ body.app-process .context-text, body.app-process .process-done-task { font-family: 'Newsreader', Georgia, serif; font-size: clamp(1.1875rem, 3.5vw, 1.3125rem); font-style: italic; font-weight: 400; color: var(--text-muted); line-height: 1.45; letter-spacing: -0.01em; max-width: 28ch; opacity: 1; } body.app-process .process-done-task { margin: 0 0 28px; } body.app-process .process-done-task-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: start; margin: 0 0 28px; } body.app-process .process-done-task-row .process-done-task { margin: 0; max-width: none; } body.app-process .process-done-status { font-family: 'Inter', system-ui, sans-serif; font-size: 0.6875rem; font-weight: 600; font-style: normal; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-primary); text-align: right; line-height: 1.45; white-space: nowrap; padding-top: 0.3em; } body.app-process .process-nav-label--short { display: none; } @media (max-width: 500px) { body.app-process .process-nav-label--long { display: none; } body.app-process .process-nav-label--short { display: inline; } } /* Entry screen — epigraph quote below the form (mobile only; desktop has page mantra) */ body.app-process .entry-epigraph { display: none; margin: 0; padding: 0; } @media (max-width: 500px) { body.app-process .entry-epigraph { display: block; } /* Hold quote until Newsreader loads — avoids Georgia fallback 3-line flash */ body.app-process:not(.epigraph-fonts-ready) .entry-epigraph { visibility: hidden; } } body.app-process .entry-epigraph-center { padding-top: 50px; text-align: center; } body.app-process .entry-epigraph-quote { margin: 0 auto; padding: 0; max-width: 32ch; border: none; } /* Full reset of legacy global `p` (1.1rem / opacity 0.8 / margin-bottom 24px) */ body.app-process .entry-epigraph-quote p { font-family: 'Newsreader', Georgia, serif; font-size: 1.1875rem; font-style: normal; font-weight: 400; color: var(--text-subtle); line-height: 1.45; letter-spacing: -0.01em; margin: 0; opacity: 1; } body.app-process .entry-epigraph-quote em { font-style: italic; font-weight: inherit; } /* Action screen — task quote above step progress */ /* Action screen — task name left, Edit link right */ body.app-process .action-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 28px; } body.app-process .action-meta .action-meta-task { margin: 0; flex: 1; min-width: 0; } body.app-process .action-meta-edit { flex-shrink: 0; } body.app-process .context.context-subtle { font-size: inherit; opacity: 1; } /* Multiple-choice answers — editorial link list, not form cards. Each choice is a tappable text row separated by hairlines, with a quiet forward arrow that nudges on hover. No box, no fill — the choice itself is the way forward (the bottom bar is back-only). */ body.app-process .options { display: flex; flex-direction: column; gap: 0; margin: 8px 0 0; border-top: var(--line); text-align: left; } body.app-process .option { position: relative; background: transparent !important; border: none !important; border-bottom: var(--line) !important; border-radius: 0 !important; margin: 0; padding: 20px 40px 20px 0; cursor: pointer; transition: padding-left 0.18s ease; } body.app-process .option label { display: block; cursor: pointer; font-family: 'Geist', -apple-system, sans-serif; font-size: clamp(1.0625rem, 2.6vw, 1.1875rem); font-weight: 500; line-height: 1.4; letter-spacing: 0.01em; color: var(--text-primary); transition: color 0.18s ease; } body.app-process .option::after { content: "→"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: 'Geist', -apple-system, sans-serif; font-size: 1.0625rem; color: var(--text-subtle); transition: transform 0.18s ease, color 0.18s ease; } body.app-process .option:hover { padding-left: 4px; } body.app-process .option:hover label { color: var(--text-primary); } body.app-process .option:hover::after { transform: translate(5px, -50%); color: var(--text-primary); } /* Two-futures framing block (sits between hero question and the choices) */ body.app-process .two-futures { margin: 0 0 24px; } body.app-process .two-futures-line { font-family: 'Geist', -apple-system, sans-serif; font-size: 1.0625rem; line-height: 1.6; color: var(--text-muted); margin: 0 0 6px; } body.app-process .two-futures-line:last-child { margin-bottom: 0; } body.app-process .two-futures-line strong { color: var(--text-primary); font-weight: 600; } /* Underline inputs — process style, not boxed fields */ body.app-process textarea { background: transparent; border: none; border-bottom: var(--line); border-radius: 0; box-shadow: none; padding: 14px 0 16px; font-family: 'Geist', -apple-system, sans-serif; font-size: clamp(1.0625rem, 3vw, 1.25rem); font-weight: 400; color: var(--text-primary); resize: none; min-height: 0; } body.app-process textarea::placeholder { color: var(--text-placeholder); opacity: 1; } body.app-process textarea:focus { outline: none; border-bottom-color: var(--line-focus); } /* Field validation — reusable hint below underline inputs */ body.app-process .field-wrap { margin-bottom: 0; } body.app-process .field-hint { font-family: 'Geist', -apple-system, sans-serif; font-size: 0.875rem; font-weight: 400; line-height: 1.45; margin: 0; padding: 10px 0 0; color: var(--text-subtle); } body.app-process .field-hint[hidden] { display: none !important; } body.app-process .field-hint.is-warning { color: var(--field-warning); } body.app-process .field-wrap.is-invalid textarea { border-bottom-color: var(--field-warning-border); } body.app-process .field-wrap.is-invalid textarea:focus { border-bottom-color: var(--field-warning-border); } body.app-process .step-input-field-wrap { flex: 1; min-width: 0; } body.app-process .step-input-field-wrap .step-input { flex: none; width: 100%; border: none; padding: 0; } body.app-process .field-wrap.is-invalid .field-hint.is-warning { animation: field-hint-in 0.2s ease-out; } @keyframes field-hint-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { body.app-process .field-wrap.is-invalid .field-hint.is-warning { animation: none; } } /* Inline links under the form — How this works, Help */ body.app-process .process-links, body.app-process .process-link-row { margin-top: var(--nav-gap); margin-bottom: 8px; font-family: 'Geist', -apple-system, sans-serif; font-size: 0.9375rem; color: var(--text-subtle); display: flex; flex-wrap: nowrap; gap: 8px 16px; align-items: center; justify-content: space-between; } /* Shared ± controls — bridge rows, thorn toolbars, Help row */ body.app-process .process-links-add, body.app-process .step-row-btn { flex-shrink: 0; width: 28px; height: 28px; min-width: 28px; min-height: 28px; margin: 0; padding: 0; border: none; border-radius: 50%; background: rgba(28, 25, 23, 0.07); color: var(--text-muted); font-family: 'Geist', -apple-system, sans-serif; font-size: 1.125rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 1; -webkit-appearance: none; appearance: none; } body.app-process .process-links-add:hover, body.app-process .step-row-btn:hover { background: rgba(28, 25, 23, 0.12); color: var(--text-primary); } body.app-process .process-links .process-links-add { margin-left: auto; } body.app-process .process-links-left { display: flex; align-items: center; gap: 1.25em; } body.app-process .process-links--form-nav .process-continue-link { margin-left: auto; /* Touch darker than reminder labels so Step done stays primary */ color: #141210; font-weight: 500; } body.app-process .process-links--horizon { margin-top: var(--nav-gap); padding-top: var(--nav-gap); border-top: var(--line); } body.app-process .process-links-right { display: flex; align-items: center; gap: 1.25em; margin-left: auto; flex-shrink: 0; } body.app-process .process-links-right .process-continue-link { margin-left: 0; } body.app-process .process-links--continue-only .process-continue-link { margin-left: auto; } body.app-process .process-links .community-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; cursor: pointer; user-select: none; flex-shrink: 0; background: none; border: none; font-family: inherit; font-size: inherit; color: inherit; } body.app-process .process-links .community-toggle-label { font-family: inherit; font-size: inherit; color: var(--text-muted); opacity: 1; letter-spacing: normal; text-decoration: none; text-underline-offset: 3px; white-space: nowrap; } body.app-process .process-links .community-toggle:hover .community-toggle-label, body.app-process .process-links .community-toggle:focus-visible .community-toggle-label { text-decoration: underline; } body.app-process .process-links .community-toggle-label--short { display: none; } @media (max-width: 500px) { body.app-process .process-links .community-toggle-label--long { display: none; } body.app-process .process-links .community-toggle-label--short { display: inline; } } body.app-process .process-links .toggle-track { width: 36px; height: 20px; border-radius: 10px; background: rgba(28, 25, 23, 0.12); position: relative; flex-shrink: 0; transition: background 0.2s; } body.app-process .process-links .toggle-track.on { background: var(--text-primary); } body.app-process .process-links .toggle-thumb { width: 16px; height: 16px; border-radius: 50%; background: white; position: absolute; top: 2px; left: 2px; transition: transform 0.2s; will-change: transform; } body.app-process .process-links .toggle-track.on .toggle-thumb { transform: translateX(16px); } /* Nav / actions: no standing underline — hover & keyboard focus only. In-prose / help links keep a permanent underline (overrides below). */ body.app-process .process-inline-link { font-family: inherit; font-size: inherit; color: var(--text-muted); background: none; border: none; padding: 0; text-decoration: none; text-underline-offset: 3px; cursor: pointer; } body.app-process .process-inline-link:hover, body.app-process .process-inline-link:focus-visible { color: var(--text-primary); text-decoration: underline; } body.app-process .process-inline-link:disabled { opacity: 0.55; cursor: wait; } /* Body copy + help: permanent underline (true links in text) */ body.app-process .extra-info--long .hiw-intro a, body.app-process .extra-info--long .hiw-intro .process-inline-link, body.app-process .extra-info--long .hiw-faq-item a, body.app-process .notes-panel-body a, body.app-process .notes-panel-body .process-inline-link, body.app-process .help-card.expanded a:not(.process-help-toggle), body.app-process .help-card.extra-info.expanded a, body.app-process .extra-info.help-card.expanded a, body.app-process .help-card.goodbye-footer a, body.app-process .goodbye-footer-line a, body.app-process .process-done-footer-item a { text-decoration: underline; text-underline-offset: 3px; } body.app-process .process-link-suffix { color: var(--text-subtle); font-size: inherit; } /* Extra info — short inline help (per-screen) */ body.app-process .help-card.extra-info.expanded, body.app-process .extra-info.help-card.expanded { margin-top: 20px; padding-top: 0; border-top: none; padding-left: 0; padding-right: 0; padding-bottom: 0; max-width: none; } body.app-process .help-card.extra-info.expanded p, body.app-process .help-card.extra-info.expanded li, body.app-process .extra-info.help-card.expanded p, body.app-process .extra-info.help-card.expanded li { font-family: 'Geist', -apple-system, sans-serif; font-size: 1.0625rem; line-height: 1.65; color: var(--text-muted); margin-bottom: 16px; } body.app-process .help-card.extra-info.expanded p:last-child, body.app-process .help-card.extra-info.expanded li:last-child, body.app-process .extra-info.help-card.expanded p:last-child, body.app-process .extra-info.help-card.expanded li:last-child { margin-bottom: 0; } body.app-process .help-card.extra-info.expanded strong, body.app-process .extra-info.help-card.expanded strong { color: var(--text-primary); font-weight: 500; } body.app-process .help-card.extra-info.expanded ul, body.app-process .extra-info.help-card.expanded ul { padding-left: 1.1em; margin: 0 0 16px; } body.app-process .help-card.extra-info.expanded a, body.app-process .extra-info.help-card.expanded a { color: inherit; } body.app-process .help-card.extra-info.expanded .pro-line, body.app-process .help-card.extra-info.expanded .pro-line-top, body.app-process .help-card.extra-info.expanded .pro-coach-link, body.app-process .extra-info.help-card.expanded .pro-line, body.app-process .extra-info.help-card.expanded .pro-line-top, body.app-process .extra-info.help-card.expanded .pro-coach-link { font-family: 'Geist', -apple-system, sans-serif; font-size: 1.0625rem; font-weight: 500; line-height: 1.65; color: var(--text-primary); margin-bottom: 16px; padding: 0; background: none; border: none; text-align: left; } body.app-process .help-card.extra-info.expanded .pro-coach-link strong, body.app-process .extra-info.help-card.expanded .pro-coach-link strong { font-weight: 500; font-size: inherit; } body.app-process.stage-entry textarea, body.app-process.stage-red textarea { border-bottom: var(--line); } body.app-process.stage-entry textarea::placeholder, body.app-process.stage-red textarea::placeholder { color: var(--text-placeholder); } /* Bridge — typographic step list on the stage, not a frosted card */ body.app-process .step-inputs { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0; gap: 0; overflow: visible; } body.app-process .step-input-row { display: flex; align-items: center; gap: 12px; padding: 18px 0; border-top: none; border-bottom: var(--line); min-width: 0; } body.app-process #step-inputs .step-row-actions { display: flex; align-items: center; justify-content: flex-end; width: 28px; min-width: 28px; flex-shrink: 0; align-self: center; opacity: 1; } /* Thorn pairs — two labelled underline beats, no card (process-kit screen 3) */ body.app-process .thorn-pair-label, body.app-process .step-word, body.app-process .step-number.step-word, body.app-process .approach-label { font-family: 'Geist', -apple-system, sans-serif; font-size: 0.8125rem; font-weight: 400; text-transform: none; letter-spacing: 0.01em; color: var(--text-muted); opacity: 1; } body.app-process .step-number, body.app-process .step-word { min-width: 44px; } body.app-process .thorn-pair-label { margin-bottom: 10px; } body.app-process .step-input-row input { flex: 1; min-width: 0; font-size: 1.0625rem; padding: 0; border: none; background: transparent; } body.app-process .step-input-row input:focus { outline: none; } /* Action list — same line-on-stage language as bridge rows */ body.app-process .step-list { display: flex; flex-direction: column; gap: 0; margin: 12px 0 16px; overflow: visible; } body.app-process .step-item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 18px 0; border-top: none; border-bottom: var(--line); overflow: visible; } body.app-process .step-item--timer-open { padding-bottom: 14px; } /* Style D when expanded — muted solid text + check, no strike / no fade */ body.app-process .step-item.step-done { opacity: 1; } body.app-process .step-item.step-done .step-text { text-decoration: none; color: var(--text-muted); } body.app-process .step-item.step-done .step-tick { color: var(--text-muted); } body.app-process .step-text { flex: 1; min-width: 0; font-family: 'Geist', -apple-system, sans-serif; font-size: 1.0625rem; font-weight: 400; line-height: 1.35; color: var(--text-primary); } body.app-process .step-tick { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--text-primary); min-width: 28px; } /* G — collapsed “N Done”; tap to expand style-D list */ body.app-process .action-done-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: 14px 0; border: none; border-bottom: var(--line); background: none; font-family: 'Geist', -apple-system, sans-serif; font-size: 0.9375rem; font-weight: 500; color: var(--text-muted); cursor: pointer; text-align: left; -webkit-appearance: none; appearance: none; } body.app-process .action-done-toggle:hover, body.app-process .action-done-toggle:focus-visible { color: var(--text-primary); } body.app-process .action-done-toggle::after { content: ''; width: 0.45em; height: 0.45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.55; margin-right: 6px; transition: transform 0.15s ease; } body.app-process .action-done-toggle.is-open::after { transform: rotate(-135deg); margin-top: 4px; } body.app-process .action-done-list { margin: 0; padding: 0; } body.app-process .action-done-list[hidden] { display: none !important; } body.app-process .action-done-list .step-item.step-done { padding: 12px 0; } body.app-process .action-done-list .step-item.step-done .step-text { font-size: 1rem; } body.app-process .step-tick svg { width: 18px; height: 18px; stroke: currentColor; fill: none; } body.app-process .step-row-actions--timer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; width: auto; min-width: 0; } body.app-process .step-action-timer-btn { width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%; background: rgba(28, 25, 23, 0.07); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; font-size: 0.9375rem; line-height: 1; } body.app-process .step-action-timer-btn:hover, body.app-process .step-action-timer-btn.is-open { color: var(--text-primary); background: rgba(28, 25, 23, 0.12); } body.app-process .well-done { flex-shrink: 0; font-family: 'Geist', -apple-system, sans-serif; font-size: 0.9375rem; font-weight: 500; color: var(--text-muted); margin-left: 0; padding-left: 0; } body.app-process .progress-text { font-family: 'Geist', -apple-system, sans-serif; font-size: 0.9375rem; color: var(--text-subtle); opacity: 1; margin-bottom: 18px; } body.app-process .step-row-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; opacity: 0.5; } body.app-process .step-item--focus-cue .step-row-actions { opacity: 1; } body.app-process .step-action-dot { color: var(--text-subtle); font-size: 0.9375rem; line-height: 1; user-select: none; } body.app-process .step-action-timer.process-inline-link { font-size: 0.9375rem; color: var(--text-muted); } body.app-process .step-action-start.process-inline-link { font-size: 0.9375rem; color: var(--text-primary); font-weight: 500; } body.app-process .step-item-actions-col { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; margin-left: auto; } /* Duration choices — second row under Timer · Start, right-aligned */ body.app-process .step-timer-choices { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; max-width: min(100%, 320px); } body.app-process .step-action-timer.is-open { color: var(--text-primary); font-weight: 500; } body.app-process .step-timer-choice { font-size: 0.9375rem; color: var(--text-muted); } body.app-process .step-timer-choice.is-active, body.app-process .step-timer-selected { color: var(--text-primary); font-weight: 500; } body.app-process .step-timer-suffix { font-family: 'Geist', -apple-system, sans-serif; font-size: 0.9375rem; color: var(--text-muted); margin-left: 2px; } /* Step focus — step is the h2; quiet instruction; one horizon rule above nav; reminders sit below nav with no second rule / no section eyebrow */ body.app-process .step-focus-headline { margin-bottom: 12px; } body.app-process .step-focus-step { margin: 0; padding: 0; border: none; } body.app-process .step-focus-instruction { font-family: 'Geist', -apple-system, sans-serif; font-size: 0.9375rem; /* same as .process-links / Menu */ font-weight: 400; line-height: 1.4; color: var(--text-muted); /* same as .process-inline-link */ margin: 0; } body.app-process .step-focus-text { font-family: 'Geist', -apple-system, sans-serif; font-size: clamp(1.0625rem, 3vw, 1.25rem); font-weight: 400; line-height: 1.35; color: var(--text-primary); margin: 0; } body.app-process #container:has(.step-focus-step) .process-links--form-nav { margin-bottom: 0; } /* V5 whisper — single column; label + italic value on one line. Multi Don't: first on the label row; extras follow with hidden label. L2 labels: near-black medium (subheads); values quieter italic. P1 gap. */ body.app-process .step-focus-reminders { margin: 48px 0 0; padding: 0; border: none; } body.app-process .step-focus-whisper { display: block; } body.app-process .step-focus-row { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); column-gap: 12px; align-items: baseline; margin: 10px 0 0; font-size: 0.9375rem; /* same as nav */ line-height: 1.45; } body.app-process .step-focus-row:first-child { margin-top: 0; } body.app-process .step-focus-row--follow { margin-top: 4px; } body.app-process .step-focus-lab { /* Solid shade, slightly lighter than Step done (#141210) / primary (#1C1917) — no opacity */ color: #3A3530; font-weight: 500; } body.app-process .step-focus-row--follow .step-focus-lab { visibility: hidden; } body.app-process .step-focus-val { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 400; color: var(--text-muted); min-width: 0; } body.app-process .timer-display { font-family: 'Geist', -apple-system, sans-serif; font-size: 1.5rem; font-weight: 500; color: var(--text-primary); margin: 8px 0 10px; } body.app-process .timer-bar { height: 3px; background: rgba(28, 25, 23, 0.08); border-radius: 2px; margin-bottom: 20px; overflow: hidden; } /* First pending row — calm entry cue (arrow + row wash, then slow text pulse) */ @keyframes step-focus-row-hold { 0%, 82% { background-color: rgba(28, 25, 23, 0.06); } 100% { background-color: transparent; } } @keyframes step-focus-pointer-hold { 0%, 82% { opacity: 1; } 100% { opacity: 0; } } body.app-process .step-item--focus-cue { border-radius: 0; } body.app-process .step-item--focus-cue::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 0; background-color: rgba(28, 25, 23, 0.06); pointer-events: none; animation: step-focus-row-hold 3s ease-out forwards; } body.app-process .step-item--focus-cue > * { position: relative; z-index: 1; } body.app-process .step-item--focus-cue::before { display: none; } body.app-process .step-item--focus-cue .step-action-timer.process-inline-link, body.app-process .step-item--focus-cue .step-action-start.process-inline-link { color: #000000; font-weight: 500; opacity: 1; } body.app-process .step-item--focus-cue .step-action-dot { color: #000000; opacity: 1; } @media (prefers-reduced-motion: reduce) { body.app-process .step-item--focus-cue::after { animation: none; background-color: rgba(28, 25, 23, 0.06); } body.app-process .step-item--focus-cue::before { display: none; } } body.app-process #thorn-pains .step-input-row { gap: 10px; } body.app-process #thorn-pains .step-input-row input, body.app-process #thorn-pains .step-input-row textarea { min-width: 0; } body.app-process #thorn-pains .step-row-actions { flex-shrink: 0; margin-right: 2px; } body.app-process .plan-task-row--highlight { background: rgba(28, 25, 23, 0.06); border-radius: 6px; margin: -4px -6px; padding: 4px 6px; } body.app-process .help-card.expanded .pro-coach-link, body.app-process .help-card.extra-info.expanded .pro-coach-link, body.app-process .extra-info.help-card.expanded .pro-coach-link { font-family: 'Geist', -apple-system, sans-serif; font-size: 1.0625rem; font-weight: 500; line-height: 1.65; color: var(--text-primary); cursor: pointer; text-align: left; padding: 0 0 16px; margin: 0 0 20px; background: none; border: none; border-bottom: var(--line); transition: opacity 0.15s ease; } body.app-process .help-card.expanded .pro-coach-link strong, body.app-process .help-card.extra-info.expanded .pro-coach-link strong, body.app-process .extra-info.help-card.expanded .pro-coach-link strong { font-weight: 500; font-size: inherit; } body.app-process .help-card.expanded .pro-coach-link:hover, body.app-process .help-card.extra-info.expanded .pro-coach-link:hover, body.app-process .extra-info.help-card.expanded .pro-coach-link:hover { opacity: 0.72; } body.app-process .resume-dropdown-wrap { position: relative; } body.app-process .resume-dropdown-trigger { font-weight: 400; } body.app-process .saved-dropdown-panel { border-color: rgba(28, 25, 23, 0.1); box-shadow: 0 8px 24px rgba(28, 25, 23, 0.12); } body.app-process .saved-dropdown-item { color: var(--text-primary); font-family: 'Geist', -apple-system, sans-serif; font-size: 0.9375rem; } body.app-process .saved-dropdown-item + .saved-dropdown-item { border-top-color: rgba(28, 25, 23, 0.08); } /* Thorn pairs — two labelled underline beats, no card (process-kit screen 3) */ body.app-process .thorn-pairs { display: flex; flex-direction: column; gap: 36px; margin: 12px 0 16px; } body.app-process .thorn-pair-card { display: flex; flex-direction: column; gap: 28px; background: transparent; border: none; border-radius: 0; padding: 0; } body.app-process .thorn-pair-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 4px 0 0; padding: 0; } body.app-process .thorn-pair-toolbar--with-help { justify-content: space-between; margin-top: 20px; margin-bottom: 8px; } body.app-process .thorn-pair-toolbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; } body.app-process .thorn-pain-readout { flex: 1; font-family: 'Geist', -apple-system, sans-serif; font-size: 1.0625rem; font-weight: 400; color: var(--text-primary); line-height: 1.4; padding: 0; } body.app-process .thorn-cure-block .thorn-pain-display-row { border-bottom: none; padding-bottom: 8px; } body.app-process .thorn-cure-block .thorn-pain-display-row + .step-input-row { padding-top: 0; } body.app-process .thorn-cure-block:not(:last-child) { margin-bottom: 8px; } body.app-process .thorn-cure-block:not(:last-child) .step-input-row:last-child { border-bottom: var(--line); } body.app-process .thorn-pair-beat { display: flex; flex-direction: column; } body.app-process .thorn-pair-input { width: 100%; background: transparent; border: none; border-bottom: var(--line); border-radius: 0; box-shadow: none; color: var(--text-primary); font-family: 'Geist', -apple-system, sans-serif; font-size: clamp(1.0625rem, 3vw, 1.25rem); font-weight: 400; padding: 14px 0 16px; margin: 0; } body.app-process .thorn-pair-input::placeholder { color: var(--text-placeholder); } body.app-process .thorn-pair-input:focus { outline: none; border-bottom-color: var(--line-focus); } body.app-process .process-step-ghost { display: block; font-family: 'Geist', -apple-system, sans-serif; font-size: 0.9375rem; color: var(--text-subtle); padding: 16px 0 8px; border: none; background: none; text-align: left; cursor: pointer; } body.app-process .process-step-ghost:hover { color: var(--text-muted); } /* Help — inline expansion, not a nav button or cramped box */ body.app-process .help-card, body.app-process .help-card.extra-info { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0; margin-top: 0; } body.app-process .help-card:not(.expanded), body.app-process .help-card.extra-info:not(.expanded) { display: none; } body.app-process .help-card.expanded { margin-top: 20px; padding-top: 0; border-top: none; padding-left: 0; padding-right: 0; padding-bottom: 0; font-size: 1.0625rem; line-height: 1.65; max-width: none; } body.app-process .help-card.expanded p, body.app-process .help-card.expanded li { font-size: 1.0625rem; line-height: 1.65; color: var(--text-muted); } body.app-process .help-card.expanded strong { color: var(--text-primary); font-weight: 500; } /* Long extra info — inline on entry (How this works) */ body.app-process .extra-info--long { display: none; margin-top: 0; padding-top: 0; } body.app-process .extra-info--long.expanded { display: block; margin-top: 20px; } body.app-process .extra-info--long .hiw-intro { margin: 0 0 28px; padding: 0; } body.app-process .extra-info--long .hiw-intro p { font-family: 'Geist', -apple-system, sans-serif; font-size: 1.0625rem; font-weight: 400; line-height: 1.65; color: var(--text-muted); margin: 0 0 16px; max-width: none; } body.app-process .extra-info--long .hiw-intro p strong { color: var(--text-primary); font-weight: 500; } body.app-process .extra-info--long .hiw-intro p:last-of-type { margin-bottom: 0; } body.app-process .extra-info--long .hiw-intro a, body.app-process .extra-info--long .hiw-intro .process-inline-link { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; } body.app-process .extra-info--long .hiw-intro .hiw-email-signup { margin-top: 16px; padding-top: 0; border-top: none; } body.app-process .extra-info--long .hiw-intro .hiw-email-signup form { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } body.app-process .extra-info--long .hiw-intro .hiw-email-signup input[type="email"] { width: 100%; box-sizing: border-box; background: transparent; border: none; border-bottom: var(--line); border-radius: 0; padding: 14px 0 16px; font-family: 'Geist', -apple-system, sans-serif; font-size: clamp(1.0625rem, 3vw, 1.25rem); font-weight: 400; color: var(--text-primary); } body.app-process .extra-info--long .hiw-intro .hiw-email-signup input[type="email"]::placeholder { color: var(--text-placeholder); opacity: 1; } body.app-process .extra-info--long .hiw-intro .hiw-email-signup input[type="email"]:focus { outline: none; border-bottom-color: var(--line-focus); } body.app-process .extra-info--long .hiw-intro .hiw-email-submit { margin-top: 8px; font-size: 1.0625rem; } body.app-process .extra-info--long .hiw-intro .hiw-email-signup .email-signup-success p { font-family: 'Geist', -apple-system, sans-serif; font-size: 0.875rem; line-height: 1.45; color: var(--text-muted); margin: 8px 0 0; } body.app-process .extra-info--long .pro-upgrade-line { font-family: 'Geist', -apple-system, sans-serif; font-size: 1.0625rem; font-weight: 500; line-height: 1.65; color: var(--text-primary); cursor: pointer; text-align: left; background: none; border: none; transition: opacity 0.15s ease; } body.app-process .extra-info--long .pro-upgrade-line:hover { opacity: 0.72; } body.app-process .extra-info--long .hiw-faq-item { margin: 0 0 20px; border: none; border-top: none; border-bottom: none; padding: 0; } body.app-process .extra-info--long .hiw-faq-item p { font-family: 'Geist', -apple-system, sans-serif; font-size: 1.0625rem; font-weight: 400; line-height: 1.65; color: var(--text-muted); margin: 0; max-width: none; } body.app-process .extra-info--long .hiw-faq-item strong { color: var(--text-primary); font-weight: 500; } body.app-process .extra-info--long .hiw-faq-item a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; } body.app-process .extra-info--long .hiw-faq-item ul, body.app-process .extra-info--long .hiw-faq-item ol { font-family: 'Geist', -apple-system, sans-serif; font-size: 1.0625rem; line-height: 1.65; color: var(--text-muted); margin: 12px 0 0; padding-left: 1.1em; } body.app-process .extra-info--long .hiw-faq-item li { margin-bottom: 8px; } body.app-process .extra-info--long .hiw-faq-item li:last-child { margin-bottom: 0; } body.app-process .help-card.expanded .pro-line-top, body.app-process .help-card.expanded .pro-upgrade-line { margin-bottom: 16px; } /* Pro upsell — same size/weight as FAQ subheaders (strong) */ body.app-process .help-card.expanded .pro-upgrade-line, body.app-process .help-card.extra-info.expanded .pro-upgrade-line, body.app-process .extra-info.help-card.expanded .pro-upgrade-line { font-family: 'Geist', -apple-system, sans-serif; font-size: 1.0625rem; font-weight: 500; line-height: 1.65; color: var(--text-primary); cursor: pointer; text-align: left; padding: 0 0 16px; margin: 0 0 20px; background: none; border: none; border-bottom: var(--line); transition: opacity 0.15s ease; } body.app-process .help-card.expanded .pro-upgrade-line:hover, body.app-process .help-card.extra-info.expanded .pro-upgrade-line:hover, body.app-process .extra-info.help-card.expanded .pro-upgrade-line:hover { opacity: 0.72; } body.app-process .extra-info--long .hiw-image-slot { margin: 12px 0 28px; padding: 0; max-width: 100%; } body.app-process .extra-info--long .hiw-image-slot img { width: 100%; height: auto; display: block; margin: 0; padding: 0; border: none; border-radius: 0; box-shadow: none; } /* Legacy nav markup from shared app.js — hidden; app shell uses .process-links */ body.app-process .buttons, body.app-process .compact-nav { display: none !important; } /* Journey — continuous procedural ribbon (built by js/journey-ribbon.js) */ body.app-process .journey-overlay { top: auto; height: var(--strip-h); overflow: hidden; z-index: 0; /* feather the top edge so peaks/treetops dissolve into the page instead of clipping */ -webkit-mask-image: linear-gradient(to top, #000 0%, #000 var(--strip-mask-solid), transparent 100%); mask-image: linear-gradient(to top, #000 0%, #000 var(--strip-mask-solid), transparent 100%); } /* ── EXPERIMENT: content scrolls behind journey strip (not through it) ── Toggle: remove content-behind-journey from in index.html to revert. Page stack: page-column (0) → .journey-strip-floor (1) → .journey-overlay (2, art). Floor height matches art (--strip-cover-h = --strip-art-h); scroll-fade is a thin mask at the top of the floor panel only. Overlay stays --strip-art-h. Floor z-index 1 is the PAGE stack only — overlay internal far/mid/near 1/2/3 are inside their own stacking context. Floor uses background-color + per-stage rules (not var(--stage-bg)) so it transitions in sync with body/html (3s). */ body.app-process .journey-strip-floor { display: none; } body.app-process.content-behind-journey .page-column { z-index: 0; } body.app-process.content-behind-journey .journey-strip-floor { display: block; position: fixed; left: 0; right: 0; bottom: 0; height: var(--strip-cover-h); z-index: 1; background-color: var(--stage-entry); transition: background-color var(--stage-bg-ms) var(--stage-bg-ease); pointer-events: none; /* feather only in the band above the art — solid below */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--strip-feather-h), #000 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 var(--strip-feather-h), #000 100%); } body.app-process.content-behind-journey.stage-entry .journey-strip-floor, body.app-process.content-behind-journey.stage-red .journey-strip-floor, body.app-process.content-behind-journey.stage-setup .journey-strip-floor { background-color: var(--stage-entry); } body.app-process.content-behind-journey.stage-mist .journey-strip-floor, body.app-process.content-behind-journey.stage-orange .journey-strip-floor, body.app-process.content-behind-journey.stage-orange-muted .journey-strip-floor { background-color: var(--stage-warmup); } body.app-process.content-behind-journey.stage-green .journey-strip-floor { background-color: var(--stage-green); } body.app-process.content-behind-journey.stage-green-sage .journey-strip-floor { background-color: var(--stage-green-sage); } body.app-process.content-behind-journey.stage-yellow .journey-strip-floor { background-color: var(--stage-yellow); } body.app-process.content-behind-journey.stage-purple .journey-strip-floor { background-color: var(--stage-purple); } body.app-process.content-behind-journey .journey-overlay { position: fixed; z-index: 2; pointer-events: none; } body.app-process #page-column input, body.app-process #page-column textarea { touch-action: manipulation; } /* Keyboard open — hide fixed strip art so it stays behind the keyboard instead of repositioning above it (iOS WKWebView + Android adjustResize). */ body.app-process.keyboard-open.content-behind-journey .journey-strip-floor, body.app-process.keyboard-open.content-behind-journey .journey-overlay, body.app-process.keyboard-open.content-behind-journey .list-scroll-cue, body.app-process.keyboard-open.content-behind-journey .page-brand-mark { visibility: hidden; opacity: 0; pointer-events: none; } body.app-process.keyboard-open.content-behind-journey .container { padding-bottom: calc(var(--dock-h) + 24px + var(--sa-bottom)); } body.app-process.content-behind-journey .page-brand-mark, body.app-process.content-behind-journey .page-blog-link { z-index: 3; } /* Scroll cue — fully below text fade top (z 10, not masked) */ body.app-process .list-scroll-cue { display: none; } body.app-process.content-behind-journey .list-scroll-cue { display: flex; align-items: center; justify-content: center; position: fixed; left: 50%; bottom: var(--strip-cue-bottom); transform: translateX(-50%); z-index: 10; width: var(--strip-cue-size); height: var(--strip-cue-size); margin: 0; padding: 0; border: none; border-radius: 50%; background: color-mix(in srgb, var(--stage-entry) 88%, white 12%); color: var(--text-primary); opacity: 0; pointer-events: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity 0.2s ease, background-color var(--stage-bg-ms) var(--stage-bg-ease); } body.app-process.content-behind-journey.stage-entry .list-scroll-cue, body.app-process.content-behind-journey.stage-red .list-scroll-cue, body.app-process.content-behind-journey.stage-setup .list-scroll-cue { background: color-mix(in srgb, var(--stage-entry) 88%, white 12%); } body.app-process.content-behind-journey.stage-mist .list-scroll-cue, body.app-process.content-behind-journey.stage-orange .list-scroll-cue, body.app-process.content-behind-journey.stage-orange-muted .list-scroll-cue { background: color-mix(in srgb, var(--stage-warmup) 88%, white 12%); } body.app-process.content-behind-journey.stage-green .list-scroll-cue { background: color-mix(in srgb, var(--stage-green) 88%, white 12%); } body.app-process.content-behind-journey.stage-green-sage .list-scroll-cue { background: color-mix(in srgb, var(--stage-green-sage) 88%, white 12%); } body.app-process.content-behind-journey.stage-yellow .list-scroll-cue { background: color-mix(in srgb, var(--stage-yellow) 88%, white 12%); } body.app-process.content-behind-journey.stage-purple .list-scroll-cue { background: color-mix(in srgb, var(--stage-purple) 88%, white 12%); } body.app-process.content-behind-journey .list-scroll-cue.is-visible:hover, body.app-process.content-behind-journey .list-scroll-cue.is-visible.is-pressed { opacity: 0.88; } body.app-process.content-behind-journey .list-scroll-cue.is-visible { opacity: 1; pointer-events: auto; touch-action: none; } body.app-process.content-behind-journey .list-scroll-cue:disabled { cursor: default; pointer-events: none; } body.app-process.content-behind-journey .list-scroll-cue[hidden] { display: none !important; } body.app-process.content-behind-journey .list-scroll-cue svg { display: block; width: 22px; height: 22px; } /* Hold-to-scroll — keep finger off text selection (iOS/Android long-press) */ body.app-process.content-behind-journey.list-scroll-cue-holding, body.app-process.content-behind-journey.list-scroll-cue-holding .page-column { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } body.app-process.content-behind-journey.list-scroll-cue-holding .page-column { touch-action: none; } @media (max-width: 500px) { body.app-process { --strip-art-h: clamp(150px, 22vh, 220px); --strip-feather-h: clamp(20px, 3.5vh, 28px); } } /* old per-stage top-fade overlay no longer needed — the mask handles feathering */ body.app-process .journey-overlay::before { display: none; } body.app-process.stage-setup .journey-overlay::before, body.app-process.stage-entry .journey-overlay::before, body.app-process.stage-red .journey-overlay::before { background: linear-gradient(to bottom, var(--stage-entry) 0%, transparent 100%); } body.app-process.stage-mist .journey-overlay::before, body.app-process.stage-orange .journey-overlay::before, body.app-process.stage-orange-muted .journey-overlay::before { background: linear-gradient(to bottom, var(--stage-warmup) 0%, transparent 100%); } body.app-process.stage-green .journey-overlay::before { background: linear-gradient(to bottom, var(--stage-green) 0%, transparent 100%); } body.app-process.stage-green-sage .journey-overlay::before { background: linear-gradient(to bottom, var(--stage-green-sage) 0%, transparent 100%); } body.app-process.stage-yellow .journey-overlay::before { background: linear-gradient(to bottom, var(--stage-yellow) 0%, transparent 100%); } /* Summit clouds — normal blend so grey land shows through fog on gold */ body.app-process.stage-yellow .summit-fx .sfx-sea .cloud-mist { mix-blend-mode: normal; } body.app-process.stage-purple .journey-overlay::before { background: linear-gradient(to bottom, var(--stage-purple) 0%, transparent 100%); } body.app-process .journey-scene { transition: opacity 1s ease, transform 0.85s cubic-bezier(0.33, 1, 0.38, 1); } body.app-process .journey-scene svg { bottom: 0; height: 100%; width: auto; min-width: 100%; left: 50%; transform: translateX(calc(-50% + var(--pan) * -4vw)); } /* Suppress full-viewport zoom scales — pan + strip crop instead */ body.app-process.stage-entry .scene-valley, body.app-process.stage-red .scene-valley, body.app-process.stage-entry .scene-valley[data-zoom="1"], body.app-process.stage-red .scene-valley[data-zoom="1"], body.app-process.stage-entry .scene-valley[data-zoom="2"], body.app-process.stage-red .scene-valley[data-zoom="2"], body.app-process.stage-entry .scene-valley[data-zoom="3"], body.app-process.stage-red .scene-valley[data-zoom="3"], body.app-process.stage-entry .scene-valley[data-zoom="4"], body.app-process.stage-red .scene-valley[data-zoom="4"], body.app-process.stage-entry .scene-valley[data-zoom="5"], body.app-process.stage-red .scene-valley[data-zoom="5"], body.app-process.stage-entry .scene-valley[data-zoom="6"], body.app-process.stage-red .scene-valley[data-zoom="6"], body.app-process.stage-entry .scene-valley[data-zoom="7"], body.app-process.stage-red .scene-valley[data-zoom="7"], body.app-process.stage-entry .scene-valley[data-zoom="8"], body.app-process.stage-red .scene-valley[data-zoom="8"], body.app-process.stage-entry .scene-valley[data-zoom="9"], body.app-process.stage-red .scene-valley[data-zoom="9"], body.app-process.stage-entry .scene-valley[data-zoom="10"], body.app-process.stage-red .scene-valley[data-zoom="10"], body.app-process.stage-mist .scene-valley, body.app-process.stage-orange .scene-valley, body.app-process.stage-mist .scene-valley[data-zoom="0"], body.app-process.stage-orange .scene-valley[data-zoom="0"], body.app-process.stage-mist .scene-valley[data-zoom="1"], body.app-process.stage-orange .scene-valley[data-zoom="1"], body.app-process.stage-mist .scene-valley[data-zoom="2"], body.app-process.stage-orange .scene-valley[data-zoom="2"], body.app-process.stage-mist .scene-valley[data-zoom="3"], body.app-process.stage-orange .scene-valley[data-zoom="3"], body.app-process.stage-mist .scene-valley[data-zoom="4"], body.app-process.stage-orange .scene-valley[data-zoom="4"], body.app-process.stage-mist .scene-valley[data-zoom="5"], body.app-process.stage-orange .scene-valley[data-zoom="5"], body.app-process.stage-mist .scene-valley[data-zoom="6"], body.app-process.stage-orange .scene-valley[data-zoom="6"], body.app-process.stage-mist .scene-valley[data-zoom="7"], body.app-process.stage-orange .scene-valley[data-zoom="7"], body.app-process.stage-mist .scene-valley[data-zoom="8"], body.app-process.stage-orange .scene-valley[data-zoom="8"], body.app-process.stage-mist .scene-valley[data-zoom="9"], body.app-process.stage-orange .scene-valley[data-zoom="9"], body.app-process.stage-mist .scene-valley[data-zoom="10"], body.app-process.stage-orange .scene-valley[data-zoom="10"], body.app-process.stage-mist .scene-valley, body.app-process.stage-orange-muted .scene-valley, body.app-process.stage-mist .scene-valley[data-zoom="0"], body.app-process.stage-orange-muted .scene-valley[data-zoom="0"], body.app-process.stage-mist .scene-valley[data-zoom="1"], body.app-process.stage-orange-muted .scene-valley[data-zoom="1"], body.app-process.stage-mist .scene-valley[data-zoom="2"], body.app-process.stage-orange-muted .scene-valley[data-zoom="2"], body.app-process.stage-mist .scene-valley[data-zoom="3"], body.app-process.stage-orange-muted .scene-valley[data-zoom="3"], body.app-process.stage-mist .scene-valley[data-zoom="4"], body.app-process.stage-orange-muted .scene-valley[data-zoom="4"], body.app-process.stage-mist .scene-valley[data-zoom="5"], body.app-process.stage-orange-muted .scene-valley[data-zoom="5"], body.app-process.stage-mist .scene-valley[data-zoom="6"], body.app-process.stage-orange-muted .scene-valley[data-zoom="6"], body.app-process.stage-mist .scene-valley[data-zoom="7"], body.app-process.stage-orange-muted .scene-valley[data-zoom="7"], body.app-process.stage-mist .scene-valley[data-zoom="8"], body.app-process.stage-orange-muted .scene-valley[data-zoom="8"], body.app-process.stage-mist .scene-valley[data-zoom="9"], body.app-process.stage-orange-muted .scene-valley[data-zoom="9"], body.app-process.stage-mist .scene-valley[data-zoom="10"], body.app-process.stage-orange-muted .scene-valley[data-zoom="10"], body.app-process.stage-green .scene-forest, body.app-process.stage-green .scene-forest[data-zoom="1"], body.app-process.stage-green .scene-forest[data-zoom="2"], body.app-process.stage-green .scene-forest[data-zoom="3"], body.app-process.stage-green .scene-forest[data-zoom="4"], body.app-process.stage-green .scene-forest[data-zoom="5"], body.app-process.stage-green .scene-forest[data-zoom="6"], body.app-process.stage-green .scene-forest[data-zoom="7"], body.app-process.stage-green .scene-forest[data-zoom="8"], body.app-process.stage-green .scene-forest[data-zoom="9"], body.app-process.stage-green .scene-forest[data-zoom="10"], body.app-process.stage-green-sage .scene-forest, body.app-process.stage-green-sage .scene-forest[data-zoom="1"], body.app-process.stage-green-sage .scene-forest[data-zoom="2"], body.app-process.stage-green-sage .scene-forest[data-zoom="3"], body.app-process.stage-green-sage .scene-forest[data-zoom="4"], body.app-process.stage-green-sage .scene-forest[data-zoom="5"], body.app-process.stage-green-sage .scene-forest[data-zoom="6"], body.app-process.stage-green-sage .scene-forest[data-zoom="7"], body.app-process.stage-green-sage .scene-forest[data-zoom="8"], body.app-process.stage-green-sage .scene-forest[data-zoom="9"], body.app-process.stage-green-sage .scene-forest[data-zoom="10"], body.app-process.stage-yellow .scene-summit, body.app-process.stage-yellow .scene-summit[data-zoom="1"], body.app-process.stage-yellow .scene-summit[data-zoom="2"], body.app-process.stage-yellow .scene-summit[data-zoom="3"], body.app-process.stage-yellow .scene-summit[data-zoom="4"], body.app-process.stage-yellow .scene-summit[data-zoom="5"], body.app-process.stage-yellow .scene-summit[data-zoom="6"], body.app-process.stage-yellow .scene-summit[data-zoom="7"], body.app-process.stage-yellow .scene-summit[data-zoom="8"], body.app-process.stage-yellow .scene-summit[data-zoom="9"], body.app-process.stage-yellow .scene-summit[data-zoom="10"], body.app-process.stage-purple .scene-valley, body.app-process.stage-purple .scene-valley[data-zoom="1"], body.app-process.stage-purple .scene-valley[data-zoom="2"], body.app-process.stage-purple .scene-valley[data-zoom="3"], body.app-process.stage-purple .scene-valley[data-zoom="4"], body.app-process.stage-purple .scene-valley[data-zoom="5"], body.app-process.stage-purple .scene-valley[data-zoom="6"], body.app-process.stage-purple .scene-valley[data-zoom="7"], body.app-process.stage-purple .scene-valley[data-zoom="8"], body.app-process.stage-purple .scene-valley[data-zoom="9"], body.app-process.stage-purple .scene-valley[data-zoom="10"] { transform: none; } /* Completion flow — giant display title + single headline question */ body.app-process.screen-done-celebration .icon-wrapper { display: none; } body.app-process h2.process-done-display { font-family: 'Newsreader', Georgia, serif; font-size: clamp(2.925rem, 9.9vw, 4.95rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.025em; color: var(--text-primary); margin: 0 0 10px; max-width: none; } body.app-process h2.process-done-headline { font-size: clamp(2rem, 5.5vw, 2.75rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.08; /* Extra air before horizon nav so the rule doesn't cramp the praise */ margin: 0 0 32px; color: var(--text-primary); } body.app-process .process-done-footer { margin: 8px 0 32px; max-width: 38ch; } /* Goodbye — horizon nav first; soft feedback ask fades in below */ body.app-process .goodbye-nav-anchor { display: block; height: 0; margin: 0; padding: 0; overflow: hidden; } body.app-process .goodbye-footer-lines { margin: 0 0 var(--nav-gap); padding: 0 0 var(--nav-gap); border-top: none; border-bottom: var(--line); } body.app-process .goodbye-footer-lines--soft { margin: 20px 0 0; padding: 0; border: none; opacity: 0; animation: goodbye-soft-ask-in 0.9s ease forwards; animation-delay: 1.8s; } @keyframes goodbye-soft-ask-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { body.app-process .goodbye-footer-lines--soft { opacity: 1; animation: none; } } body.app-process .goodbye-footer-line { font-family: 'Geist', -apple-system, sans-serif; font-size: 1.0625rem; font-weight: 400; line-height: 1.65; color: var(--text-muted); margin: 0 0 20px; } /* Same type size as nav links — quieter colour only */ body.app-process .goodbye-footer-lines--soft .goodbye-footer-line { font-size: 0.9375rem; line-height: 1.5; color: var(--text-muted); margin: 0; } body.app-process .goodbye-footer-line:last-child { margin-bottom: 0; } body.app-process .goodbye-footer-line strong { color: var(--text-primary); font-weight: 500; } body.app-process .goodbye-footer-line a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; } body.app-process .goodbye-footer-links a { color: var(--text-muted); } body.app-process .goodbye-footer-line a:hover, body.app-process .goodbye-footer-links a:hover { color: var(--text-primary); } body.app-process .goodbye-footer-links { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 1em; margin-left: 0.25em; } /* Slide-up panels — Saved sessions, Past wins, AI coach */ body.app-process .wins-panel-header, body.app-process .quickstarts-panel-header, body.app-process .conversation-panel-header, body.app-process .notes-panel-header { align-items: flex-end; justify-content: space-between; gap: 12px; padding: 22px var(--page-gutter) 14px; max-width: 640px; border-bottom: var(--line); } body.app-process .slide-panel-title { font-family: 'Newsreader', Georgia, serif; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1; color: var(--text-primary); opacity: 1; margin: 0; padding: 0; flex: 1; min-width: 0; } body.app-process .wins-panel-header .slide-panel-title, body.app-process .quickstarts-panel-header .slide-panel-title, body.app-process .conversation-panel-header .slide-panel-title, body.app-process .notes-panel-header .slide-panel-title { padding: 0 0 3px; transform: translateY(2px); } body.app-process .slide-panel-close, body.app-process .wins-close.slide-panel-close, body.app-process .quickstarts-close.slide-panel-close, body.app-process .conversation-close.slide-panel-close, body.app-process .notes-close.slide-panel-close { width: auto; height: auto; min-width: 0; min-height: 0; border: none; border-radius: 0; background: none; box-shadow: none; outline: none; font-family: 'Geist', -apple-system, sans-serif; font-size: 0.9375rem; font-weight: 400; color: var(--text-muted); text-decoration: none; padding: 0 0 4px; flex-shrink: 0; cursor: pointer; appearance: none; -webkit-appearance: none; } body.app-process .slide-panel-close:hover, body.app-process .wins-close.slide-panel-close:hover, body.app-process .quickstarts-close.slide-panel-close:hover, body.app-process .conversation-close.slide-panel-close:hover, body.app-process .notes-close.slide-panel-close:hover, body.app-process .slide-panel-close:focus-visible, body.app-process .notes-close.slide-panel-close:focus-visible { color: var(--text-primary); background: none; text-decoration: underline; text-underline-offset: 3px; } body.app-process .wins-list, body.app-process .quickstarts-list { gap: 0; padding: 0 var(--page-gutter) max(24px, var(--sa-bottom)); max-width: 640px; } body.app-process .panel-list-row { padding: 18px 0; border-top: var(--line); } body.app-process .wins-list > .panel-list-row:first-child, body.app-process .quickstarts-list > .panel-list-row:first-child { border-top: none; padding-top: 12px; } body.app-process .panel-list-row.quickstart-item { display: flex; align-items: flex-start; gap: 12px; } body.app-process .quickstart-item-main { flex: 1; min-width: 0; cursor: pointer; } body.app-process .panel-list-lead { margin: 0; font-family: 'Geist', -apple-system, sans-serif; font-size: 1.0625rem; font-weight: 400; line-height: 1.65; color: var(--text-muted); } body.app-process .panel-list-lead strong { color: var(--text-primary); font-weight: 500; } body.app-process .panel-list-meta { display: block; font-size: 0.9375rem; color: var(--text-subtle); margin-top: 4px; font-weight: 400; } body.app-process .panel-list-quote { margin: 8px 0 0; font-family: 'Geist', -apple-system, sans-serif; font-size: 1.0625rem; font-weight: 400; line-height: 1.65; color: var(--text-muted); font-style: normal; } body.app-process .panel-list-section { padding-top: 20px; margin-top: 8px; border-top: var(--line); } body.app-process .panel-list-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 4px; } body.app-process .panel-list-section-title { margin: 0; } body.app-process .panel-list-section-toggle { flex-shrink: 0; margin-top: 6px; } body.app-process #community-reflections-section > .panel-list-row:first-child { border-top: none; padding-top: 12px; } body.app-process .panel-list-empty, body.app-process .wins-empty.panel-list-empty, body.app-process .quickstarts-empty.panel-list-empty { text-align: left; opacity: 1; padding: 12px 0 0; background: none; border-radius: 0; margin: 0; } body.app-process .panel-list-empty p, body.app-process .quickstarts-empty.panel-list-empty p { font-family: 'Geist', -apple-system, sans-serif; font-size: 1.0625rem; line-height: 1.65; color: var(--text-muted); margin: 0 0 16px; font-weight: 400; } body.app-process .panel-list-empty p strong, body.app-process .quickstarts-empty.panel-list-empty p strong { color: var(--text-primary); font-weight: 500; } body.app-process .panel-list-empty p:last-child, body.app-process .quickstarts-empty.panel-list-empty p:last-child { margin-bottom: 0; } body.app-process .wins-loading, body.app-process .quickstarts-loading { text-align: left; opacity: 1; padding: 12px 0 0; font-family: 'Geist', -apple-system, sans-serif; font-size: 1.0625rem; color: var(--text-subtle); } body.app-process[class*="stage-"] .win-item, body.app-process[class*="stage-"] .quickstart-item, body.app-process[class*="stage-"] .community-item { background: transparent; border: none; border-radius: 0; padding: 18px 0; box-shadow: none; } body.app-process .quickstart-item-delete { background: none; border: none; border-radius: 0; width: auto; height: auto; min-width: 28px; min-height: 28px; padding: 2px 4px; color: var(--text-subtle); font-size: 1.25rem; line-height: 1; flex-shrink: 0; margin-top: 2px; } body.app-process .quickstart-item-delete:hover { background: none; color: var(--text-primary); } body.app-process .conversation-panel-header, body.app-process .notes-panel-header { margin-left: auto; margin-right: auto; width: 100%; } body.app-process .conversation-messages { max-width: 640px; padding-left: var(--page-gutter); padding-right: var(--page-gutter); } body.app-process .conversation-input-area { border-top: none; max-width: 640px; padding-left: var(--page-gutter); padding-right: var(--page-gutter); } /* Notes sheet — Help / How this works (coach chrome, editorial body) */ body.app-process .notes-panel { position: fixed; top: 0; bottom: auto; left: 0; right: 0; height: 100%; box-sizing: border-box; background: inherit; transform: translateY(100%); transition: transform 0.3s ease-out; z-index: 200; display: flex; flex-direction: column; overflow: hidden; padding-top: var(--sa-top); padding-bottom: 0; } body.app-process .notes-panel.visible { transform: translateY(0); } body.app-process .notes-panel-header { display: flex; flex-shrink: 0; } body.app-process .notes-panel-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; max-width: 640px; width: 100%; margin-left: auto; margin-right: auto; padding: 20px var(--page-gutter) max(28px, var(--sa-bottom)); box-sizing: border-box; } /* Source help-cards stay in DOM for content; never expand inline */ body.app-process .help-card:not(.goodbye-footer) { display: none !important; } /* Notes sheet reuses long extra-info typography */ body.app-process .notes-panel-body .extra-info--long, body.app-process .notes-panel-body .extra-info--long.expanded, body.app-process .notes-panel-body .notes-sheet-content { display: block; margin: 0; padding: 0; } body.app-process .notes-panel-body .pro-upgrade-line, body.app-process .notes-panel-body .pro-line-top { font-family: 'Geist', -apple-system, sans-serif; font-size: 1.0625rem; font-weight: 500; line-height: 1.65; color: var(--text-primary); cursor: pointer; text-align: left; padding: 0 0 16px; margin: 0 0 20px; background: none; border: none; border-bottom: var(--line); } body.app-process .notes-panel-body .pro-upgrade-line:hover { opacity: 0.72; } /* Legacy goodbye help-card — kept for index.html until redesign ships */ body.app-process .help-card.goodbye-footer, body.app-process .help-card.goodbye-footer.expanded { display: block; margin-top: 0; margin-bottom: 28px; padding: 0; background: transparent !important; border: none !important; box-shadow: none !important; } body.app-process .help-card.goodbye-footer .hiw-faq-item { border-top: none; border-bottom: none; padding: 0; } body.app-process .help-card.goodbye-footer .hiw-faq-item:first-child { border-top: var(--line); padding-top: var(--nav-gap); } body.app-process .help-card.goodbye-footer .hiw-faq-item p { font-family: 'Geist', -apple-system, sans-serif; font-size: 1.0625rem; line-height: 1.65; color: var(--text-muted); margin: 0 0 18px; } body.app-process .help-card.goodbye-footer .hiw-faq-item:last-child p { margin-bottom: 0; } body.app-process .help-card.goodbye-footer .hiw-faq-item strong { color: var(--text-primary); font-weight: 500; } body.app-process .help-card.goodbye-footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } body.app-process .process-done-footer-item { font-family: 'Geist', -apple-system, sans-serif; font-size: 0.9375rem; line-height: 1.5; color: var(--text-muted); margin: 0 0 18px; } body.app-process .process-done-footer-item a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } body.app-process .process-done-footer-item a:hover { opacity: 0.72; } @media (max-width: 500px) { /* Option A — in-flow Menu link; headlines get full width. To revert: restore absolute .page-chrome + fixed .hamburger-btn block from git ~v115. */ body.app-process .page-chrome-mantra { display: none; } body.app-process .page-chrome-wordmark { display: block; } body.app-process .page-chrome { justify-content: space-between; align-items: center; padding: 24px 0 0; } body.app-process .page-brand-mark { right: var(--page-gutter-right); bottom: calc(16px + var(--sa-bottom)); } body.app-process .container { padding-top: 28px; } }