
children per the flex spec, so every data row rendered as a stack of full-width blocks instead of table cells — nothing lined up under the PROGRAM/BALANCE/VALUE headers — and because the browser's column-width algorithm was then only informed by the one real table-row left (

; see the .dock rule near the end of this file), present unconditionally on every route, never toggled by scroll. */ /* === end WS-ASKPROM === */ /* === WS-STRAT8 === */ /* Strategy page overhaul: mini-wallet strip, category-matrix explainer, and the reworked "cards to consider" section (annotated reasons + a diversification caveat + a per-card Ask AI hand-off). See app.js stratMiniWalletHTML/renderStrategyHTML/strategyGapsHTML. */ .stratMiniWallet{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:20px} .stratMiniWalletHead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .stratMiniWalletHead h4{margin:0;font-size:14.5px;font-weight:750;color:var(--ink)} .stratMiniWalletCount{font-weight:500;font-size:13px} .stratMiniWalletChips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .stratMiniChip{display:flex;align-items:center;gap:8px;background:var(--bg-surface);border:1px solid var(--line);border-radius:999px;padding:6px 12px 6px 6px;font-size:13.5px;font-weight:650;color:var(--ink)} .stratMiniChip .ico{width:26px;height:26px;font-size:10px} .stratMiniChip img,.stratMiniChip svg{width:26px;height:26px} /* Category-matrix explainer heading (task #2) uses the same h3/.muted pattern as every other section header on this page (stratMatrixHTML, strategyGapsHTML) rather than inventing new type styles. */ .stratCatHead{color:var(--ink)} /* "Cards to consider" per-suggestion why-list (task #3): plain list, no bullets of its own styling beyond spacing — the concrete before/after sentence (see strategyGapsHTML's whyItems) is the point, not decoration. */ .stratGapWhy{margin:2px 0 10px;padding-left:20px;font-size:13.5px;color:var(--ink2);line-height:1.5} .stratGapWhy li{margin:4px 0} .stratGapAsk{padding:0 0 12px} .stratAskAiBtn{min-height:44px} /* Diversification caveat (task #4): a quiet, factual callout — not an alarm/warning color, just visually distinct from the recommendation rows above and below it so it reads as a separate, honest aside. */ .stratCaveat{background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:10px 14px;margin:0 0 14px;font-size:13.5px;color:var(--ink2);line-height:1.5} @media(max-width:600px){ .stratMiniWalletHead{align-items:flex-start} .stratMiniChip{font-size:13px} } /* === end WS-STRAT8 === */ /* === WS-CHAT === */ /* Item 2/6: the assistant view's ONE ask surface — a persistent input pinned to the bottom of the conversation thread, styled with the same navy/gold treatment as #askBar/#askDock (Item 6) so the whole Ask AI experience reads as one consistent surface rather than the plain white .askbox it used to sit inside. Sticky (not fixed) so it settles at the bottom of the viewport once the thread grows taller than the screen, without ever covering content above it. */ .askThreadBar{position:sticky;bottom:10px;z-index:6;margin-top:18px;padding:14px 18px;background:linear-gradient(180deg,#1c2e57,var(--brand));border-radius:20px;box-shadow:0 16px 34px rgba(20,32,43,.24),0 1px 2px rgba(20,32,43,.08);border:1px solid rgba(255,255,255,.10)} .askThreadRow{display:flex;align-items:center;gap:10px;border:0;padding:0;background:none;box-shadow:none} .askThreadInput{flex:1;min-width:0;width:100%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff;border-radius:999px;padding:12px 18px;font-size:16px;font-family:var(--font);outline:none;min-height:44px} .askThreadInput::placeholder{color:rgba(255,255,255,.68)} .askThreadInput:focus{border-color:var(--accent);background:rgba(255,255,255,.16)} .askThreadBtn.btn.primary{flex:none;background:var(--accent);color:var(--accent-on);box-shadow:none;min-height:44px;padding:12px 22px;font-size:15px} .askThreadBtn.btn.primary:hover{background:#c79646} .askThreadBalance{font-size:12px;color:rgba(255,255,255,.75);margin-top:8px;padding-left:2px} @media(max-width:600px){ /* Brief #61 item 3: stay sticky at the bottom on mobile too, matching desktop -- the flat position:static this replaced left the bar scrolling away with the thread on every phone. It only relaxes back to static, letting the bar flow with the page instead of pinning to the (keyboard-shrunk) viewport bottom, while the input/button inside has focus -- i.e. while the on-screen keyboard is actually open. */ .askThreadBar{position:sticky;bottom:10px;margin-top:14px} .askThreadBar:focus-within{position:static} } /* Item 6: a thin gold rule on every AI answer bubble (the navy is already carried by .bubble.me) so the thread keeps the same brand navy/gold pairing used everywhere else on the site, not just plain white boxes. */ .bubble.ai{border-left:3px solid var(--accent)} /* Item 4: modal copy button + explanation get a little more breathing room than the generic .modal p styling, since this modal now carries two paragraphs of explanation before the textarea. */ .deeperModal p{margin:0 0 10px} .deeperModal p:last-of-type{margin-bottom:14px} /* === end WS-CHAT === */ /* === WS-REALAI === Ask AI reliability + honesty fixes: the honest signed-out bubble and the holdings-confirmation bubble reuse .bubble.ai/.btn.primary/.btn.block/ .btn.sm/.starter exactly as every other chat message on the site — the one genuinely new rule is letting the signed-out bubble's full-width CTA label wrap on narrow screens. Every existing .btn label elsewhere in the app is short enough to never need it, but "Sign in for a real answer grounded in your points →" is not, and without this it would overflow a 390px viewport instead of wrapping to a second line. */ .bubble.ai3-signedout .btn.block{white-space:normal;text-align:center;line-height:1.3} /* Brief #61 item 1: the sign-in nudge now sits below a real free answer rather than being the whole bubble -- this divider keeps "here's your free answer" and "sign in for the real, personalized one" visually distinct instead of running together. */ .signedOutCta{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)} .signedOutCta p{margin:0 0 10px;font-size:14.5px} /* === end WS-REALAI === */ /* === WS-CLAUDE p1 tokens === Retired by WS-THEME (top of file, pass 1 of the chat-first spec v2): the --ask-* scoped tokens this block used to define (light defaults, later overridden by body.theme-ask-dark below) are now plain aliases in the sitewide :root onto the semantic --bg-.../--text-.../--accent-... tokens, so #view-assistant reads the same active [data-theme] as every other route instead of carrying its own separate light/dark system. */ /* === end WS-CLAUDE p1 tokens === */ /* === WS-CHAT1 === Fable Pass 1 chat-shell rebuild for #/ask: one pinned composer, kill "Ask another question" + the floating suggestion box, contextual follow-up chips, wallet pill, the ✦ Go deeper reskin, and the loading/ error/empty states. See FABLE-CHAT-REDESIGN.md §A/§D + the Remove list. (WS-CLAUDE p1 note: the color literals below were converted to the --ask-* tokens above as part of the Claude-style build's token-layer pass -- every default still resolves to the exact same value, so this is a no-visual-diff cleanup, not a restyle. The restyle lives in the body.theme-ask-dark overrides further down.) */ /* §A1 structure, generalized sitewide by WS-DOCK (pass 2): .appShell/ .appMain are now UNCONDITIONALLY a viewport-height flex column (see those rules further down) with #viewsScroll as the one internal scroll region and #dock pinned after it -- so the outer page never double- scrolls against the inner history region, on ANY route, not just this one. #view-assistant additionally subdivides itself into its own pinned-top (#chatWalletBar/#askHomeWrap) + scrolling (#chatHistoryWrap) structure, same as before. Composer/chips/pill are normal flow — never position:fixed — so nothing can ever cover an answer again. */ #view-assistant.view.on{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;animation:none} @media(max-width:780px){ body.viewIsAssistant header.nav .wrap{height:48px} } .chatTopBar{flex:none;padding:10px 20px 0} .chatTopBar .back{cursor:pointer} /* === PP #10/#21: §E2 wallet pill top banner (.chatWalletBar, .chatWalletPill, .chatWalletHint) removed along with its markup in index.html -- see the "PP #10/#21 (legacy wallet-summary top banner removed)" comment there. The composer's bottom "Your Wallet" chip and the #/ask empty-state wallet-preview card keep their own, separate styles untouched. */ /* === PASS5-HANDOFF (Fable v2 §5 row 5) ===: "← Back to {page} (keeps this chat)" -- a plain-text link row, same --ask-* token family the removed wallet pill used to share, only ever visible on #/ask and only when this visit came from a ⤢ handoff (see renderAskBackBar in chat.js). */ .askBackBar{flex:none;padding:8px 20px 0} .askBackBar[hidden]{display:none} .askBackLink{display:inline-flex;align-items:center;font-size:12.5px;font-weight:650;color:var(--ask-gold-bright);text-decoration:none;cursor:pointer} .askBackLink:hover,.askBackLink:focus-visible{text-decoration:underline;outline:none} /* === Back-to-Ask-AI bar ===: the mirror-direction affordance (see renderBackToAskBar in chat.js) -- renders on every non-#/ask route, so it uses the sitewide semantic tokens (--ink2/--brand-ink, theme-aware via [data-theme]) rather than the --ask-* family above, which is #/ask-scoped only. Quiet, plain-text link, same visual weight as .askBackLink but themed for light routes too. */ .backToAskBar{padding:10px 20px 0;position:sticky;top:var(--topnav-h);z-index:19;background:var(--bg2)} .backToAskBar[hidden]{display:none} .backToAskLink{display:inline-flex;align-items:center;font-size:12.5px;font-weight:650;color:var(--ink2);text-decoration:none;cursor:pointer} .backToAskLink:hover,.backToAskLink:focus-visible{color:var(--brand-ink);text-decoration:underline;outline:none} /* §A1 history — the ONLY scrolling region on this view. Centered 760px column on desktop so history/chips/composer read as one connected surface (the actual fix for "isn't connected", complaint #1/#2; 760px matches the Claude-style mockup's --col so the home and chat composers share the same measure -- see Jeremy's feedback #4, never full-bleed). */ .chatHistoryWrap{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--ask-canvas)} .chatHistoryWrap[hidden]{display:none} .chatHistoryInner{max-width:var(--chatcol);margin:0 auto;padding:16px 20px 24px} .chatHistoryInner .chat{max-width:none} /* §A1/§A2 bottom stack: retired by WS-DOCK (pass 2) as a per-view element -- chips + composer + balance line now live in the sitewide #dock (see the .dock rule near the end of this file), not a #chatBottomWrap scoped to #view-assistant. */ /* §A3 contextual follow-up chips — one horizontal-scroll row, ghost pills, directly above the composer. Regenerated per answer (renderFollowupChips in app.js), never appended — an empty row collapses via [hidden]. */ .followupChips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 0 10px;scrollbar-width:none} .followupChips::-webkit-scrollbar{display:none} .followupChips[hidden]{display:none} .chipGhost{flex:none;border:1px solid var(--ask-chip-border);background:var(--ask-chip-bg);color:var(--ask-chip-ink);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:var(--font)} .chipGhost:hover{border-color:var(--ask-gold);background:var(--ask-chip-bg-hover)} .chipGhost:last-child{margin-right:24px} .chipGoDeeper{border-color:var(--ask-gold);color:var(--ask-gold);font-weight:700} /* === GUIDED-AI-INTAKE (client) ===: selected-state for a tapped chip inside the guided-intake collecting card (.collectBandRow / .collectChip --redemption band+choice buttons) -- reuses .chipGhost's own palette tokens rather than inventing new colors, just flips to the filled/ "confirmed" treatment so a tapped answer reads as answered at a glance. */ .chipGhost.sel{background:var(--ask-gold);border-color:var(--ask-gold);color:var(--bg-surface, #fff)} /* guided-intake spend: exact-figure number boxes (replaced the spend bands), styled to match the Wallet Budget tab's $ __ /mo field. */ .collectAmtHint{margin:6px 0 4px;font-size:12px;color:var(--text-2)} .collectAmtRow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px} .collectAmtLabel{font-size:13.5px;font-weight:600;color:var(--text-1)} .collectAmtField{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line-strong);background:var(--bg-surface-2);border-radius:10px;padding:6px 10px;min-height:40px} .collectAmtField:focus-within{border-color:var(--ask-gold);box-shadow:0 0 0 3px var(--accent-soft)} .collectAmtCur{font-size:14px;font-weight:600;color:var(--text-2)} .collectAmtInput{border:0;background:transparent;outline:none;width:74px;text-align:right;font-size:15px;font-weight:600;color:var(--text-1);font-family:var(--font);padding:0 2px} /* JOB3 (iOS focus-zoom, cont'd -- see EOF): a single class, (0,1,0), still outranks the sitewide guard's bare `input` (0,0,1) even though the guard has a type selector too -- class count beats type count regardless of how many types are on the other side. Computed 15px, zoomed on focus. Matched at (0,1,0) here so it wins on source order. */ @media(max-width:899px){ .collectAmtInput{font-size:16px} } .collectAmtUnit{font-size:12px;color:var(--text-2)} /* §A2 the composer — full-width white field, gold focus ring, gold Send pill (disabled at 40% when empty). Auto-grows up to ~4 lines then scrolls internally (height managed in PP.composerInput). WS-DOCK (pass 2): this ONE node now lives permanently in the sitewide #dock -- the old .composerHome hero-position modifier is retired (Decision 4: no hero-centered composer anywhere). */ /* WS-ASKEMPTY (item 2): the composer is now a two-row column -- .composerTop (textarea + Send, same layout the old flat .composer row used) plus a .composerToolbar row underneath holding the persistent "Your Wallet" button, matching the Claude/ChatGPT composer shape (input on top, a toolbar row below, both inside one rounded box). .composer itself keeps the outer box (background/border/radius/shadow) but switches to a column flex so the two rows stack; the 16px left inset the old flat row had moves onto .composerTop specifically (6px box padding + 10px = 16px). */ .composer{display:flex;flex-direction:column;background:var(--bg-surface-2);border:1px solid var(--line-strong);border-radius:20px;padding:6px;box-shadow:0 10px 26px var(--ask-composer-shadow);transition:background .2s,border-color .2s,box-shadow .2s} .composer:focus-within{box-shadow:0 0 0 2px var(--ask-gold),0 10px 26px var(--ask-composer-shadow)} .composerTop{display:flex;align-items:flex-end;gap:8px;padding:0 0 0 10px} .composerInput{flex:1;min-width:0;border:0;outline:none;resize:none;background:transparent;font:15px/1.45 var(--font);color:var(--ask-ink);padding:10px 0;max-height:108px;overflow-y:auto} .composerInput::placeholder{color:var(--ask-muted)} .composerInput:disabled{color:var(--ask-muted);cursor:not-allowed} .composerSend{flex:none;border:0;border-radius:999px;background:var(--ask-gold);color:var(--ask-gold-ink);font-weight:750;font-size:14.5px;padding:11px 20px;min-height:44px;cursor:pointer;font-family:var(--font)} .composerSend:hover:not(:disabled){background:var(--ask-gold-bright)} .composerSend:disabled{opacity:.55;cursor:not-allowed} .composerToolbar{display:flex;align-items:center;gap:8px;padding:6px 8px 4px 10px;margin-top:2px;border-top:1px solid var(--ask-line)} /* Mobile audit P1 #4 (2026-07-19): 32px min-height on the two most persistent, always-visible controls on the entire site (this pill + .composerFeedbackBtn below) was under the 44px floor. Bumped straight to 44px rather than an invisible ::before hit-slop — unlike the tiny matrix icon buttons, these are full visible text pills where the "hit area" and the "visible button" should just be the same box; a taller pill here reads as correctly sized, not bloated. */ .composerWalletBtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ask-line-strong);background:transparent;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:650;color:var(--ask-ink-dim);cursor:pointer;font-family:var(--font);min-height:44px;transition:border-color .15s,background .15s,color .15s} .composerWalletBtn svg{width:15px;height:15px;flex:none} .composerWalletBtn:hover{border-color:var(--ask-gold);background:var(--ask-gold-soft);color:var(--ask-ink)} /* Small "Feedback" button in the AI window's composer toolbar (backlog #85/#86 + Jeremy's note) — same shell as .composerWalletBtn immediately above it, own class only so it can be told apart in the DOM/tests. */ /* §A4 free-balance indicator — muted, gold at <=2, and a distinct message at 0 (composer itself is disabled by renderAskBalance in app.js). */ .composerBalance{text-align:center;font-size:12px;color:var(--ask-balance-ink);padding:8px 4px 0} .composerBalance[hidden]{display:none} .composerBalance.low{color:var(--ask-gold);font-weight:700} .composerBalance.zero{color:var(--ask-gold);font-weight:700} /* §A5/§B5 assistant cards — empty state + answer footer row. */ .assistantCard.emptyCard{border-left:3px solid var(--ask-gold)} .emptyStarterChips{margin-top:12px} .chatFooterRow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--ask-line)} .chatFooterGround{font-size:12px;color:var(--ask-muted)} .chatFooterGround a{color:var(--ask-muted)} /* Brief #61 item 6's citation disclosure, folded into the footer row: the "Grounded in..." text doubles as a

toggle (no default marker, no bullet) when there's real wallet data to cite. */ .chatFooterDetails{min-width:0;flex:1} .chatFooterDetails summary.chatFooterGround{cursor:pointer;list-style:none;user-select:none} .chatFooterDetails summary.chatFooterGround::-webkit-details-marker{display:none} .chatFooterSeeSources{text-decoration:underline} .chatFooterMethodLink{margin-top:8px} .chatFooterMethodLink a{font-size:12px;color:var(--ask-muted)} /* §D1 the ✦ Go deeper button — the ONLY colored action in the footer row, so it reads as the premium next step, not an off-brand pill (complaint #4/#5). Ghost gold border, fills gold on hover/press. Jeremy 2026-07-19: "should be a button with a little logo and a one or two word description, it shouldn't show up as a giant button on every chat response" -- tightened padding/font further and added the icon+gap layout for the shortened "✦ Your AI ↗" label (chat.js footerRowHTML). Click target/behavior unchanged, this is sizing/copy only. */ .goDeeperBtn{flex:none;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--ask-gold);background:transparent;color:var(--ask-gold-bright);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:750;cursor:pointer;white-space:nowrap;font-family:var(--font);min-height:32px} /* P0 fix (2026-07-19): the default ghost state used --ask-gold-ink (--accent-on, "text on gold FILLS" -- 6.4:1 against a solid gold background) as the label/icon color while the button's own background is transparent. Against the assistant card surface -- especially the dark-theme card (#16212c) sitting right next to that same near-black ink (#14202b) -- label + icon were essentially camouflaged: an outlined pill with invisible contents. Swapped to --ask-gold-bright (--accent-text), the token actually designed to be gold TEXT read against a normal surface (6.2:1 light / 8.9:1 dark). The ink token is still correct once the background truly turns solid gold on hover/focus, so it's applied there instead. */ .goDeeperBtn:hover,.goDeeperBtn:focus-visible{background:var(--ask-gold);color:var(--ask-gold-ink)} .goDeeperIcon{font-size:12px;line-height:1} /* §A6 loading state — honest 3-step status, ✦ pulses. */ .loadingCard .ai3-status{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ask-muted)} .starPulse{color:var(--ask-gold);font-size:16px;line-height:1;display:inline-block;animation:wsChatStarPulse 1.2s ease-in-out infinite} @keyframes wsChatStarPulse{0%,100%{opacity:.35}50%{opacity:1}} @media(prefers-reduced-motion:reduce){ .starPulse{animation:none;opacity:1} } /* §A7 error card — inline, never a toast, never a dead end. */ .errorCard{border-left:3px solid var(--ask-error)} @media(pointer:coarse){ .goDeeperBtn{min-height:44px} .chipGhost{min-height:36px;display:inline-flex;align-items:center} } /* === end WS-CHAT1 === */ /* === WS-CLAUDE p2 dark restyle === Retired as a body-class-scoped, #/ask-only surface by WS-THEME (pass 1 of the chat-first spec v2, top of file): the --ask-* tokens this block used to flip on body.theme-ask-dark are now sitewide :root aliases pointed at the semantic --bg-.../--text-.../--accent-... tokens, which follow [data-theme] on like every other route. The selectors below (previously prefixed `body.theme-ask-dark `) are unprefixed now -- same rules, always active, themed by the same mechanism as the rest of the app instead of a special case. Contrast floor per spec §3.3: body copy >= --text-2 (9.9:1 dark / 8.0:1 light), nothing readable-sized drops below --text-4 (5.2:1 dark / 3.9:1 light -- the old #6b7885 3.6:1 culprit is gone). The ✦ pulse's prefers-reduced-motion guard already lives on .starPulse above and isn't theme-scoped, so it keeps working unchanged here. */ #view-assistant{background:var(--ask-canvas)} .chatTopBar .back{color:var(--ask-muted)} .chatTopBar .back:hover{color:var(--ask-ink)} /* Chat bubbles + assistant cards -- scoped under #view-assistant so the home-page demo's identical .bubble classes (.ppHero .bubble) are untouched. */ #view-assistant .bubble.me{background:var(--ask-user-bubble);color:var(--ask-ink)} #view-assistant .bubble.ai{background:var(--ask-surface);border-color:var(--ask-line);color:var(--ask-ink-dim);box-shadow:0 6px 24px rgba(0,0,0,.28)} #view-assistant .bubble.ai strong{color:var(--ask-ink)} /* Receipts -- #receiptScrim is shared by every route (Explore, Wallet, #/ask, ...); these rules are unscoped now so the receipt modal renders in the active [data-theme] no matter which page opened it, instead of only ever being dark from #/ask. */ #view-assistant .receipt-trig{border-bottom-color:var(--ask-muted);color:inherit} #view-assistant .receipt-trig::after{color:var(--ask-muted)} #view-assistant .receipt-trig:hover{border-bottom-color:var(--ask-ink)} #receiptScrim .modal{background:var(--ask-surface-2);border:1px solid var(--ask-line-strong);color:var(--ask-ink-dim)} #receiptScrim .modal .x{color:var(--ask-muted)} #receiptScrim .modal .x:hover{color:var(--ask-ink)} #receiptScrim h3, #receiptScrim h4{color:var(--ask-ink)} #receiptScrim .receiptSrc, #receiptScrim .receiptAsOf{color:var(--ask-muted)} #receiptScrim .receiptSrc a{color:var(--ask-gold-bright)} #receiptScrim .kv, #receiptScrim .receiptChanges{border-color:var(--ask-line)} /* Knowledge pill -- scoped to #/ask instances; the wallet/home pill slots stay light. */ #view-assistant .knowledgePill{background:var(--ask-surface);border-color:var(--ask-line);border-top-color:var(--ask-gold)} #view-assistant .knowledgePillLabel{color:var(--ask-muted)} #view-assistant .knowledgePillText{color:var(--ask-ink-dim)} #view-assistant .pillChip{background:var(--ask-gold-soft);color:var(--ask-gold-bright);border-color:rgba(199,154,59,.35)} /* Go-deeper sheet -- only ever opened from #/ask (PP.deeper()). */ #deepScrim .modal{background:var(--ask-surface);border:1px solid var(--ask-line-strong);color:var(--ask-ink-dim)} #deepScrim h3{color:var(--ask-ink);font-family:var(--ask-serif);font-weight:500;margin:0} #deepScrim .muted{color:var(--ask-muted)} #deepScrim .x{color:var(--ask-muted)} #deepScrim .x:hover{color:var(--ask-ink)} #deepScrim textarea{background:var(--ask-surface-2);border-color:var(--ask-line);color:var(--ask-ink-dim)} #deepScrim .note{color:var(--ask-faint)} #deepScrim .btn.ghost{background:transparent;border-color:var(--ask-line-strong);color:var(--ask-ink-dim)} #deepScrim .btn.accent{background:var(--ask-gold);color:var(--ask-gold-ink)} /* Pass 9 (#24): the modal's ✦ moves from an inline glyph mashed against the heading text into its own small circular badge -- same four-pointed-star glyph and gold tokens used everywhere else (.goDeeperIcon, .starPulse), just given the "clean modern treatment" a modal header deserves. Tokens are the sitewide --ask-* pass-throughs (see WS-THEME at the top of this file) so this reads correctly in both themes with no extra overrides. */ #deepScrim .deeperHead{display:flex;align-items:center;gap:10px;margin-bottom:6px} #deepScrim .deeperSparkle{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--ask-gold-soft);color:var(--ask-gold-bright);font-size:16px;line-height:1} /* Signed-out Instant Read + sign-in upsell (Fable §C/§2.8) -- these render inside #view-assistant too (the honest "computed, no AI" card a signed-out visitor sees), so they inherit the dark restyle the same as everything else on this surface. */ #view-assistant .instantReadCard{background:var(--ask-surface);border-color:var(--ask-line);border-left-color:var(--ask-gold);color:var(--ask-ink-dim)} #view-assistant .instantReadBadge{background:var(--ask-gold-soft);color:var(--ask-gold-bright);border-color:rgba(199,154,59,.35)} #view-assistant .instantReadSubhead{color:var(--ask-muted)} #view-assistant .instantReadValueLine{color:var(--ask-ink)} #view-assistant .instantReadGoesWhere a{color:var(--ask-gold-bright)} #view-assistant .signInUpsellCard{background:var(--ask-surface-2);border-color:var(--ask-line)} #view-assistant .signInUpsellBody, #view-assistant .signInUpsellReassure{color:var(--ask-muted)} #view-assistant .signInUpsellHead{color:var(--ask-ink)} #view-assistant .signedOutCta{border-top-color:var(--ask-line)} /* === end WS-CLAUDE p2 dark restyle === */ /* === WS-CONTRAST === Founder-reported contrast bugs on the live dark #/ask surface (real screenshots, not a spec re-read): several WS-CLAUDE p2 selectors above only covered the CONTAINER (backgrounds/borders) of a few elements, not every child text/link inside them -- so those children kept inheriting pre-dark, light-theme literals (--ink2 #4a5b68, --brand-ink #0e1a33, the global `a{color:var(--brand-ink)}`) that read fine on white but are near-invisible on the #101820/#16212c/#1b2836 dark tokens. Every rule below is scoped the same way the rest of WS-CLAUDE p2 is (body.theme- ask-dark + #view-assistant/#receiptScrim/#deepScrim), so it only ever touches the dark #/ask surface -- no light route is affected. */ /* Bug 1: the footer "Go Deeper" pill's ghost (transparent-bg) state used --ask-gold-ink for its text -- a near-black navy meant for text ON a filled gold background (the :hover state), not for text on the dark canvas showing through the transparent default state. Default text is now the same bright gold as the border; the :hover fill state (which already turns the background solid gold) keeps the dark ink text so it stays legible against its own fill. Label copy itself is renamed in app.js (footerRowHTML) from "✦ Go deeper" to "Use your own AI assistant" -- CSS here only fixes legibility, not position/behavior. */ #view-assistant .goDeeperBtn{color:var(--ask-gold-bright)} #view-assistant .goDeeperBtn:hover{color:var(--ask-gold-ink)} /* Bug 2: the "— see sources" disclosure (citationsHTML, an inline