/* Points & Prompts v2 — Clean & premium */ /* === WS-THEME === Pass 1 of Fable's chat-first spec v2 §3 (points-relay repo, mockups/FABLE-CHATFIRST-SPEC.md). ONE semantic token layer, two palettes, switched via [data-theme="dark"|"light"] on -- set pre-paint by the inline script in index.html's , before this stylesheet is even requested, so there is never a flash of the wrong theme. Every color in this file now flows through the tokens below: the legacy --ink/--bg/--brand/--ask-.../--shell-... names (defined right after) are kept as ALIASES onto these semantic tokens -- so every existing rule in this file re-themes with zero further edits -- while new rules should reference the semantic names (--bg-surface, --text-1, --accent-text, etc.) directly. This retires body.theme-ask-dark (the old WS-CLAUDE p2 / WS-CONTRAST dark-only #/ask surface, below) as a special case: the assistant view is just the app, in whichever theme is active, like every other route now. Contrast ratios measured per spec §3.3 (WCAG method). */ :root, :root[data-theme="light"]{ --bg-canvas:#faf8f1; --bg-deep:#f2eee3; --bg-surface:#ffffff; --bg-surface-2:#f6f2e8; --bg-bubble:#e7ecf2; --line:rgba(30,40,51,.10); --line-strong:rgba(30,40,51,.20); --text-1:#1e2833; /* body/headings on surface -- 14.9:1 */ --text-2:#46525e; /* secondary prose -- 8.0:1 */ --text-3:#5c6a77; /* muted labels, still reading text -- 5.6:1 */ --text-4:#75828f; /* faint: >=12px, decorative/non-essential only -- 3.9:1 */ --accent:#c79a3b; /* gold fills/borders/icons -- never text */ --accent-text:#7d5b1d; /* gold TEXT (bronze in light mode) -- 6.2:1 */ --accent-soft:rgba(199,154,59,.14); --accent-on:#14202b; /* text on gold fills -- 6.4:1 */ /* strategy-matrix-redesign: same fill-vs-text split as --accent/--accent-text above, applied to --good. --good itself (#0f766e, defined once below, not per-theme) is a fill/border color -- it's already used as text at 19px/800-weight elsewhere and passes there, but the matrix's best-in-category number is 13.5px/800, which needs 4.5:1, not 3:1. --good-text is that same green, per theme, at a weight that clears 4.5:1 on --bg-surface: 5.32:1 in light (== --good itself already passes), 8.13:1 in dark (a brighter emerald -- --good's own 0f766e only manages ~2.9:1 on the dark surface). */ --good-text:#0f766e; /* == --good; already 5.32:1 on light --bg-surface */ --danger-bg:#fdf2f2; --danger-border:#f3c9c9; --danger-border-strong:#e4a6a2; --danger-ink:#b3261e; --danger-bg-hover:#fdeceb; --bg-surface-translucent:rgba(255,255,255,.92); --shadow:0 1px 2px rgba(20,32,43,.06),0 10px 30px rgba(20,32,43,.08); --dock-shadow:rgba(20,32,43,.18); /* WS-DOCK contrast: upward lift off the canvas */ color-scheme:light; } :root[data-theme="dark"]{ --bg-canvas:#101820; --bg-deep:#0b1219; --bg-surface:#16212c; --bg-surface-2:#1c2a38; --bg-bubble:#20303f; --line:rgba(242,237,227,.09); --line-strong:rgba(242,237,227,.18); --text-1:#f2ede3; /* 13.9:1 */ --text-2:#cfc9bb; /* 9.9:1 */ --text-3:#a4b0bc; /* muted -- 7.4:1 (was 5.6:1 on the old --ask-muted) */ --text-4:#8593a1; /* faint -- 5.2:1 (was the 3.6:1 --ask-faint culprit) */ --accent:#c79a3b; --accent-text:#e5b964; /* 8.9:1 */ --accent-soft:rgba(199,154,59,.14); --accent-on:#14202b; /* 6.4:1 on gold */ --good-text:#34d399; /* brighter emerald for dark: 8.13:1 on --bg-surface, 9.06:1 on --bg-canvas */ --danger-bg:rgba(224,134,104,.14); --danger-border:rgba(224,134,104,.35); --danger-border-strong:rgba(224,134,104,.5); --danger-ink:#e08668; --danger-bg-hover:rgba(224,134,104,.22); --bg-surface-translucent:rgba(22,33,44,.92); --shadow:0 10px 34px rgba(0,0,0,.45); --dock-shadow:rgba(0,0,0,.5); /* WS-DOCK contrast: upward lift off the canvas */ color-scheme:dark; } :root{ /* legacy sitewide tokens -> semantic pass-throughs (old->new map, spec §3.4) */ --ink:var(--text-1); --ink2:var(--text-2); --bg:var(--bg-surface); --bg2:var(--bg-canvas); --brand:#142343; --brand-ink:var(--text-1); --brand-soft:var(--accent-soft); --accent-yellow:#ffeb99; --accent-yellow-ink:#7a5c00; /* constant both themes: a solid highlight chip, not a page surface */ --good:#0f766e; --step:#0f8a6a; --radius:14px; --maxw:1080px; /* Orange accent (wallet.js "Edit points & programs" CTA, Jeremy: "make it orange so it stands out"). Constant across themes like --good/--step -- it's always a solid fill with white text, so it doesn't need a per-theme text variant. #c2410c on white text is ~5.2:1 (AA for normal text in both themes); the darker hover shade stays comfortably >4.5:1 too. */ --orange:#c2410c; --orange-hover:#9a3412; /* PP #30 refinement (backlog P0): the centered content-column width the Ask-AI composer, thread, and Pass-4 answer panel all share -- so the composer reads as a CONTAINED Claude/ChatGPT-style box instead of a full-width bar spanning --maxw. See .dockInner/.chatHistoryInner/ .askHomeCenter below, all of which now key off this one token. */ --chatcol:760px; --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* legacy #/ask dark-surface tokens (WS-CLAUDE p2, below) -> pass-throughs. No longer scoped to body.theme-ask-dark -- the assistant view reads the active [data-theme] like everything else now. */ --ask-canvas:var(--bg-canvas); --ask-surface:var(--bg-surface); --ask-surface-2:var(--bg-surface-2); --ask-line:var(--line); --ask-line-strong:var(--line-strong); --ask-ink:var(--text-1); --ask-ink-dim:var(--text-2); --ask-muted:var(--text-3); --ask-faint:var(--text-4); --ask-gold:var(--accent); --ask-gold-bright:var(--accent-text); --ask-gold-soft:var(--accent-soft); --ask-gold-ink:var(--accent-on); --ask-user-bubble:var(--bg-bubble); --ask-wallet-bg:var(--bg-surface); --ask-wallet-ink:var(--text-2); --ask-bottom-grad-1:var(--bg-canvas); --ask-bottom-grad-2:var(--bg-deep); --ask-chip-border:var(--line-strong); --ask-chip-bg:var(--bg-surface-2); --ask-chip-bg-hover:var(--accent-soft); --ask-chip-ink:var(--text-2); --ask-composer-shadow:rgba(0,0,0,.35); --ask-balance-ink:var(--text-4); --ask-error:var(--danger-ink); --ask-serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif; /* legacy sidebar-shell tokens (WS-SHELL, below) -> pass-throughs. The sidebar is no longer a fixed-dark frame independent of the page -- it follows [data-theme] too, so the whole app (chrome included) is one coherent theme. */ --shell-w:248px; --shell-bg:var(--bg-deep); --shell-surface:var(--bg-surface); --shell-line:var(--line); --shell-line-strong:var(--line-strong); --shell-ink:var(--text-1); --shell-ink-dim:var(--text-2); --shell-muted:var(--text-3); --shell-faint:var(--text-4); --shell-gold:var(--accent); } /* === end WS-THEME tokens === */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font:16px/1.55 var(--font);color:var(--ink);background:var(--bg2)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px} a{color:var(--brand-ink)} h1,h2,h3,h4{line-height:1.14;letter-spacing:-.01em;margin:0 0 .4em} h1{font-size:clamp(31px,5.2vw,50px);font-weight:800} h2{font-size:clamp(22px,3.4vw,31px);font-weight:800} h3{font-size:19px;font-weight:700} .muted{color:var(--ink2)} .btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:13px 22px;font-weight:650;font-size:15px;cursor:pointer;text-decoration:none;transition:transform .05s,box-shadow .15s;font-family:var(--font)} .btn:active{transform:translateY(1px)} .btn.primary{background:var(--brand);color:#fff;box-shadow:var(--shadow)} .btn.ghost{background:var(--bg-surface);color:var(--brand-ink);border:1px solid var(--line)} .btn.block{width:100%;justify-content:center} .btn.sm{padding:9px 15px;font-size:14px} .btn.accent{background:var(--accent);color:var(--accent-on);box-shadow:0 3px 12px rgba(212,166,81,.4);font-weight:750} .btn.accent:hover{background:#c79646} /* Branded "Continue with Google" button (backlog #74). Deliberately NOT themed off --brand/--accent -- Google's sign-in button guidelines call for a fixed neutral surface so the mark reads as an authentic Google control, with dedicated light/dark surface colors (Google publishes both) rather than following the app's own light/dark palette. */ .btn.google{background:#fff;color:#3c4043;border:1px solid #dadce0;box-shadow:none;font-weight:600} .btn.google:hover{background:#f8f9fa;box-shadow:0 1px 2px 0 rgba(60,64,67,.30),0 1px 3px 1px rgba(60,64,67,.15)} .btn.google:focus-visible{outline:2px solid #4285f4;outline-offset:2px} .btn.google[disabled]{opacity:.55;cursor:default;pointer-events:none} .btn.google .googleGIcon{flex-shrink:0} .btn.google .googleGLabel{font-family:'Roboto',var(--font);letter-spacing:.15px} [data-theme="dark"] .btn.google{background:#131314;color:#e3e3e3;border-color:#8e918f} [data-theme="dark"] .btn.google:hover{background:#1e1f20} [data-theme="dark"] .btn.google:focus-visible{outline-color:#a8c7fa} .eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-ink);background:var(--brand-soft);padding:5px 11px;border-radius:999px;margin-bottom:16px} header.nav{position:sticky;top:0;z-index:20;background:var(--bg-surface-translucent);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)} .nav .wrap{display:flex;align-items:center;gap:16px;height:62px} .logo{font-weight:800;letter-spacing:-.02em;font-size:18px;color:var(--ink);cursor:pointer;display:flex;align-items:center;gap:9px} .logo .dot{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--brand),var(--accent))} nav.links{margin-left:auto;display:flex;align-items:center;gap:4px} nav.links a{padding:9px 12px;border-radius:9px;font-size:14.5px;font-weight:600;color:var(--ink2);text-decoration:none;cursor:pointer;white-space:nowrap} nav.links a:hover{background:var(--bg2);color:var(--ink)} nav.links a.active{color:var(--brand-ink)} .view{display:none}.view.on{display:block;animation:fade .25s ease} @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} section{padding:34px 0} .lead{max-width:650px;margin-bottom:22px} .back{cursor:pointer;font-size:14px;color:var(--ink2)} .hero{background:linear-gradient(180deg,var(--bg-surface),var(--bg2));border-bottom:1px solid var(--line)} .save-strip{background:var(--brand);color:#fff;border-radius:var(--radius);padding:22px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap} .save-strip[hidden]{display:none} .save-strip p{margin:0;flex:1;min-width:220px} .save-strip .btn.primary{background:#fff;color:var(--brand)} /* Home hero relaunch (Brief #57) — demo animation -> dissolve -> single AI entry window. Reuses site tokens/classes (.hero, .eyebrow, .chip, .bubble, .chat) via descendant selectors under .ppHero, which win on specificity over the bare global rules without needing !important. */ .ppHero .hero{text-align:center;padding:14px 8px 20px;max-width:780px;margin:0 auto} .ppHero .eyebrow{margin-bottom:14px} .ppHero h1{font-size:clamp(26px,4vw,44px);line-height:1.1;margin:0 0 12px;letter-spacing:-.01em} .ppHero h1 .amp{color:var(--brand)} .ppHero .sub{font-size:17px;color:var(--ink2);max-width:640px;margin:0 auto} .ppHero .stage{position:relative;background:linear-gradient(180deg,var(--bg-surface),var(--bg2));border:1px solid var(--line);border-radius:20px;padding:26px 22px;box-shadow:var(--shadow);overflow:hidden;min-height:300px} .ppHero .scene{display:grid;grid-template-columns:1fr auto 1.15fr;gap:16px;align-items:center;transition:opacity .7s ease,transform .7s ease} .ppHero .stage.dissolved .scene{opacity:0;transform:scale(.96) translateY(-8px);pointer-events:none;position:absolute;inset:26px 22px} .ppHero .col{background:var(--bg-surface);border:1px solid var(--line);border-radius:16px;padding:16px} .ppHero .collabel{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);margin-bottom:12px;display:flex;align-items:center;gap:7px} .ppHero .dotb{width:9px;height:9px;border-radius:50%;background:var(--good);animation:ppPulse 1.8s infinite} @keyframes ppPulse{0%{box-shadow:0 0 0 0 rgba(15,118,110,.45)}70%{box-shadow:0 0 0 7px rgba(15,118,110,0)}100%{box-shadow:0 0 0 0 rgba(15,118,110,0)}} .ppHero .chips{display:flex;flex-direction:column;gap:9px} .ppHero .chip{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:9px 11px;opacity:0;transform:translateY(8px) scale(.98)} .ppHero .chip.in{animation:ppChipin .5s cubic-bezier(.2,.7,.3,1) forwards} @keyframes ppChipin{to{opacity:1;transform:none}} .ppHero .chip .mono{width:26px;height:26px;border-radius:7px;color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none} .ppHero .chip b{font-size:14px;font-weight:700} .ppHero .chip i{margin-left:auto;font-style:normal;font-weight:700;color:var(--brand-ink);font-variant-numeric:tabular-nums;font-size:13.5px} .ppHero .datapill{margin-top:12px;text-align:center;font-size:12px;font-weight:700;color:var(--brand-ink);background:var(--accent-soft);border:1px solid var(--accent);border-radius:999px;padding:6px 10px;opacity:0} .ppHero .datapill.in{animation:ppChipin .5s ease forwards} .ppHero .flow{display:flex;flex-direction:column;gap:7px;align-items:center} .ppHero .flow span{width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:.22} .ppHero .flow.on span{animation:ppFlowpulse 1.1s infinite} .ppHero .flow.on span:nth-child(2){animation-delay:.16s}.ppHero .flow.on span:nth-child(3){animation-delay:.32s} @keyframes ppFlowpulse{0%,100%{opacity:.22;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}} .ppHero .chat{display:flex;flex-direction:column;gap:8px;min-height:130px} .ppHero .exFlag{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:2px 8px;margin-bottom:2px} .ppHero .bubble{padding:11px 13px;border-radius:14px;font-size:14px;line-height:1.45;max-width:96%;margin:0} .ppHero .bubble.me{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:5px} .ppHero .bubble.me:empty{display:none} .ppHero .bubble.ai{align-self:flex-start;background:var(--bg2);border:1px solid var(--line);border-bottom-left-radius:5px} .ppHero .bubble.ai.hide{display:none} .ppHero .ans b{color:var(--brand-ink)} .ppHero .ans .g{color:var(--good);font-weight:800} .ppHero .tip{margin-top:7px;padding-top:7px;border-top:1px dashed var(--line);font-size:13px;color:var(--ink2)} .ppHero .tip b{color:var(--brand-ink)} .ppHero .typing{display:flex;gap:4px;padding:3px 0} .ppHero .typing span{width:6px;height:6px;border-radius:50%;background:var(--text-4);animation:ppBlink 1.2s infinite} .ppHero .typing span:nth-child(2){animation-delay:.2s}.ppHero .typing span:nth-child(3){animation-delay:.4s} .ppHero .typing.hide{display:none} @keyframes ppBlink{0%,100%{opacity:.3}50%{opacity:1}} .ppHero .entry{opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .7s ease .25s,transform .7s ease .25s;max-width:700px;margin:0 auto;text-align:center} .ppHero .stage.dissolved .entry{opacity:1;transform:none;pointer-events:auto} .ppHero .ewelcome{font-size:16px;color:var(--ink);margin-bottom:18px;line-height:1.5} /* Brief #59: the entry bar is the primary affordance on the page — modeled after the large, high-contrast, unmistakably-typeable bar pattern used by Claude.ai/ChatGPT. Bigger font/padding than the persistent .askrow bar elsewhere in the app (this one only ever appears once, dissolved-in, so it can afford to dominate) plus an explicit focus-within ring so the active state reads clearly. Presentation only — PP.homeAsk() is unchanged. */ .ppHero .ebar{display:flex;gap:10px;align-items:center;border:2.5px solid var(--brand);border-radius:999px;padding:10px 10px 10px 26px;background:var(--bg-surface);box-shadow:0 6px 26px rgba(20,32,43,.16);transition:border-color .15s,box-shadow .15s} .ppHero .ebar:focus-within{border-color:var(--brand-ink);box-shadow:0 0 0 5px rgba(20,35,67,.15),0 6px 26px rgba(20,32,43,.16)} .ppHero .ebar input{flex:1;border:0;background:none;font-size:19px;font-weight:600;outline:none;color:var(--ink);font-family:var(--font);min-width:0;padding:16px 0} .ppHero .ebar input::placeholder{color:var(--ink2)} .ppHero .ebar .btn{min-height:44px;font-size:15.5px;padding:14px 24px} @media(max-width:480px){ .ppHero .ebar{flex-wrap:wrap;border-radius:22px;padding:10px 14px} .ppHero .ebar input{flex-basis:100%;width:100%;font-size:17px} .ppHero .ebar .btn{flex:1;justify-content:center} } .ppHero .chips2{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px} .ppHero .chip2[hidden]{display:none} .ppHero .chip2{border:1px solid var(--line);background:var(--bg-surface);border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--ink)} .ppHero .chip2:hover{border-color:var(--brand);color:var(--brand-ink)} .ppHero .chip2.primaryChip{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:750;width:100%;justify-content:center;padding:12px 16px;font-size:14.5px;box-shadow:var(--shadow)} .ppHero .chip2browse{border:1px dashed var(--line-strong);background:none;border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--ink2)} .ppHero .emicro{margin-top:14px;font-size:12px;color:var(--ink2);max-width:520px;margin:14px auto 0} .ppHero .replay{display:inline-block;margin-top:18px;font-size:12.5px;font-weight:600;color:var(--ink2);background:var(--bg-surface);border:1px solid var(--line);border-radius:999px;padding:6px 13px;cursor:pointer} .ppHero .halves{display:grid;grid-template-columns:1fr 1fr;gap:16px} .ppHero .half{background:var(--bg-surface);border:1px solid var(--line);border-radius:16px;padding:18px} .ppHero .htag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:10px} .ppHero .htag.points{color:var(--brand-ink);background:var(--brand-soft)} .ppHero .htag.prompts{color:var(--accent-text);background:var(--accent-soft)} .ppHero .half h3{font-size:18px;font-weight:800;margin:0 0 6px} .ppHero .half p{margin:0;color:var(--ink2);font-size:14.5px} @media(max-width:640px){.ppHero .scene{grid-template-columns:1fr}.ppHero .flow{flex-direction:row}.ppHero .halves{grid-template-columns:1fr}} /* Mobile round 2 (a) -- "ridiculous margins on the landing page" (Jeremy, 390x844). Root cause: .ppHero .stage's own 26px/22px padding plus the nested .col's 16px padding stacked INSIDE the sitewide .wrap's 20px gutter, so the wallet/AI cards' actual content sat ~60px in from each screen edge on a 390px viewport (>30% of the width spent on padding before any content). Scoped to <=640px only -- desktop keeps the original spacious 26px/22px + 16px padding untouched. */ @media(max-width:640px){ .ppHero .stage{padding:16px 12px} .ppHero .col{padding:12px} .ppHero .half{padding:14px} } @media(prefers-reduced-motion:reduce){.ppHero .chip,.ppHero .datapill{opacity:1!important;transform:none!important;animation:none!important}} /* === WS-HOMEORD === */ /* Mobile fix: the demo animation / entry window (#ppStage) was rendering half-hidden below the fold because the eyebrow/h1/sub copy always led. The DOM now puts the stage first (see index.html), so mobile shows the animation immediately with the copy below it by default. On wider screens we restore the original copy-first reading order with flex `order` — no visual change on desktop. */ .ppHero{display:flex;flex-direction:column} .ppHero .ppStageWrap{order:1} .ppHero .ppHeroBlock{order:2} .ppHero .ppHalvesWrap{order:3} @media(min-width:641px){ .ppHero .ppHeroBlock{order:1} .ppHero .ppStageWrap{order:2} } /* === end WS-HOMEORD === */ /* assistant */ .askbox{background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px} .askrow{display:flex;gap:10px;align-items:center;border:2px solid var(--brand-soft);border-radius:999px;padding:8px 8px 8px 22px;background:var(--bg-surface);box-shadow:0 2px 10px rgba(20,32,43,.08);transition:border-color .15s,box-shadow .15s} .askrow:focus-within{border-color:var(--brand);box-shadow:0 0 0 5px rgba(31,58,95,.12)} .askrow input{flex:1;border:0;background:none;font-size:17px;font-weight:600;outline:none;padding:12px 0;color:var(--ink);font-family:var(--font)} /* Ask button must clear the 44px touch-target minimum on its own — don't rely on @media(pointer:coarse), which some mobile browsers/emulators don't match even on a touch device (Brief #42). */ .askrow .btn{min-height:44px} @media(max-width:480px){ .askrow{flex-wrap:wrap;border-radius:22px} .askrow input{flex-basis:100%;width:100%} .askrow .btn{flex:1;justify-content:center} } .starters{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .starter{border:1px solid var(--line);background:var(--bg-surface);border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--ink)} .starter:hover{border-color:var(--brand);color:var(--brand-ink)} .chat{max-width:760px} .bubble{padding:14px 16px;border-radius:16px;margin:10px 0;max-width:88%;font-size:15px;line-height:1.5} .bubble.me{background:var(--brand);color:#fff;margin-left:auto;border-bottom-right-radius:5px} .bubble.ai{background:var(--bg-surface);border:1px solid var(--line);border-bottom-left-radius:5px;box-shadow:var(--shadow)} .bubble.ai strong{color:var(--brand-ink)} .plan{margin:10px 0 2px;padding:0;list-style:none} .plan li{padding:8px 0;border-bottom:1px dashed var(--line);display:flex;gap:10px} .plan li:last-child{border-bottom:0} .plan .step{width:22px;height:22px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);font-weight:800;font-size:12px;display:grid;place-items:center;flex:none} .srcnote{font-size:12px;color:var(--ink2);margin-top:9px;display:flex;align-items:center;gap:6px} /* Mobile audit P0 #1 (2026-07-19): the Strategy matrix's "✓ Data verified as of… — see recent updates · how we verify → · helpful resources →" line reuses .srcnote's flex row, which is fine for its OTHER uses (a single short icon+text run, e.g. the citations disclosure) but wrong here — this is one long sentence containing 3 inline links, and a nowrap flex row with no basis control squeezes each link/text-run down toward its own min-content width instead of letting the whole thing wrap as a paragraph, so on a narrow phone it collapses into ~4 rigid near-equal columns that each word-wrap internally (e.g. "how we verify →" stacked one word per line in a ~40px column) — reads as a broken render, not cramped text. .stratMetaRow drops back to plain block flow: the tags stay inline and the whole line wraps normally at word boundaries at any width, same as it would in a plain

. */ .stratMetaRow{display:block;line-height:1.6} /* Brief #61 item 6: the "✓ Answered in-site..." line is now a

(see srcnoteHTML/citationsHTML in app.js) when the wallet has data to show -- a real disclosure affordance, not static text. */ summary.srcnote{cursor:pointer;list-style:none;user-select:none} summary.srcnote::-webkit-details-marker{display:none} summary.srcnote::after{content:"›";display:inline-block;margin-left:2px;transform:rotate(90deg);transition:transform .15s;font-size:13px} .citationsBlock[open] summary.srcnote::after{transform:rotate(270deg)} .citationsList{margin-top:8px;padding:10px 12px;background:var(--bg2);border-radius:10px;font-size:13px;display:flex;flex-direction:column;gap:7px} .citationRow{display:flex;align-items:center;justify-content:space-between;gap:10px} .citationRow span{color:var(--ink2)} .ai3-status{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2)} .ai3-spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--brand);animation:ai3spin .8s linear infinite;flex:none} @keyframes ai3spin{to{transform:rotate(360deg)}} .ai3-answer{margin:10px 0 2px} /* explore */ .tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto} /* Edge fade hints there's more to scroll when tabs overflow the viewport (Brief #42) — a mask fades the buttons themselves so it works over any background color, unlike a solid gradient overlay. */ @media(max-width:600px){ .tabs{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%)} } /* Mobile audit P0 #2 (2026-07-19): the mask-image fade above is real but subtle enough on a photo/screenshot that testers read it as "zero scroll affordance" — the Strategy matrix's own overflow row pairs its identical mask with a persistent "Swipe for more →" caption (.matrixSwipeHint) that leaves no doubt, so the tab strip gets the same caption here. Hidden by default/on wide screens; exTabsUpdateOverflow() (explore.js) toggles .on only when the tab row's content genuinely doesn't fit, mirroring stratMatrixUpdateOverflow()'s scrollWidth>clientWidth check for the matrix so this never shows on a viewport wide enough to fit every tab. */ .tabsSwipeHint{display:none;align-items:center;gap:4px;font-size:12px;color:var(--ink2);margin:-14px 0 14px} .tabsSwipeHint.on{display:flex} .tab{padding:12px 15px;border:0;background:none;font-size:15px;font-weight:650;color:var(--ink2);cursor:pointer;border-bottom:2.5px solid transparent;white-space:nowrap;font-family:var(--font)} .tab.on{color:var(--brand-ink);border-bottom-color:var(--brand)} .tabpane{display:none}.tabpane.on{display:block} .panel{background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--radius);padding:8px 22px;box-shadow:var(--shadow)} .row{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line)} .row:last-child{border-bottom:0} .row .ico{width:40px;height:40px;border-radius:10px;background:var(--bg2);display:grid;place-items:center;font-weight:800;color:var(--brand-ink);flex:none;font-size:12px} .row .grow{flex:1;min-width:0} .row .val{font-weight:750;color:var(--ink);font-size:14px;text-align:right;white-space:nowrap} .row.hasExtra{flex-wrap:wrap} .row .rowExtra{flex-basis:100%;display:flex;align-items:center;gap:8px;margin-top:10px;padding-left:54px} .pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);margin-left:6px} .pill.good{background:var(--brand-soft);color:var(--brand-ink)} /* "In wallet" (Item #3, Brief #34) gets its own real color, not the same washed-out brand-soft/brand-ink combo as "★ Preferred" — built on --good (#0f766e) with white text, ~5.5:1 contrast, so "you have this" reads at a glance whether it's the ghost-button form (has a balance field to expand) or the plain pill form (no currency to expand). */ /* .btn.ghost (background:#fff, 2 classes) outranks a bare .inWalletBtn (1 class) on specificity regardless of source order — qualify with .btn so the override actually wins. */ .btn.inWalletBtn{background:var(--good);color:#fff;border-color:var(--good)} .btn.inWalletBtn:hover{background:#0b5c55} .pill.inWallet{background:var(--good);color:#fff} /* "Edit points & programs" (wallet hub summary, Jeremy: "make it orange so it stands out") -- same .btn-qualified-for-specificity trick as .btn.inWalletBtn above, since it starts life as a .btn.ghost. Solid --orange fill + white text reads clearly against both the light cream canvas and the dark navy one, unlike the old plain ghost outline which blended into the card in light mode. */ .btn.walletEditBtn{background:transparent;color:var(--orange);border:2px solid var(--orange);display:inline-flex;align-items:center} .btn.walletEditBtn:hover{background:var(--orange);color:#fff} .btn.walletDoneBtn{background:transparent;color:var(--good-text);border:2px solid var(--good-text);display:inline-flex;align-items:center;justify-content:center} .btn.walletDoneBtn:hover{background:var(--good-text);color:#fff} .btn .btnIc{width:15px;height:15px;margin-right:6px;flex:0 0 auto} /* ---- Points Strategy: full multiplier matrix (Brief #36) ---- .matrixScroll is the ONLY element that scrolls horizontally — the page itself never does, even though the table inside it is wider than any phone viewport. The card-name column stays visible via position:sticky while the 7 category columns scroll underneath it. */ .matrixScroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-surface)} /* Brief #48: below 1024px the 8-column matrix (1126px) overflows its container with no visual cue that it scrolls. Reuse .tabs's mask-image edge-fade (Brief #42) so the last column visibly trails off, plus a persistent caption — the fade alone reads as too subtle against this denser grid of numbers. Scoped to <1024px per brief; see COWORK-STATUS.md for a desktop-overflow finding out of this brief's stated scope. */ .matrixSwipeHint{display:none} @media(max-width:1023px){ .matrixScroll{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%)} .matrixSwipeHint{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--ink2);margin:0 0 6px} } /* Brief #50: widened the Strategy section so the matrix fits without scrolling at 1440x900+, but a viewport in the ~1024-1439px gap (or any width where it genuinely still can't fit) fell through both the media query above and the old "desktop never overflows" assumption, getting no affordance at all. stratMatrixUpdateOverflow() in app.js measures real scrollWidth>clientWidth after render/resize and toggles .isOverflowing on .stratMatrix so the same mask+hint show up whenever the table truly overflows, at any width. */ .stratMatrix.isOverflowing .matrixScroll{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%)} .stratMatrix.isOverflowing .matrixSwipeHint{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--ink2);margin:0 0 6px} /* Brief #60: table-layout:fixed makes column widths come from each column's own declared width instead of its widest cell's content — the fix for "8x" and "8.5x" value cells rendering at different widths. th[data-sort-key] (the category headers) and td (the value cells) share one column each, so giving both the same explicit width keeps every value cell identical while letting a long category label (e.g. "Online shopping") wrap to two lines rather than force its column wider. */ /* strategy-matrix-redesign: text-size-adjust:100% turns off the browser's automatic narrow-viewport font boosting for this table specifically — measured (Playwright) the exact same 158px-wide, 2-line card name cell rendering 2 lines at 1440px but silently wrapping to 3 at 390px with no CSS change of ours between them, purely from that auto-boost inflating the effective font size on the "mobile" viewport. Left uncontrolled, that would undercut the one explicit, deliberate row-height rule right below it (uniform row height is the whole point of this redesign) in a way no fixed pixel value could fully outrun. */ .matrixTable{border-collapse:collapse;table-layout:fixed;width:max-content;min-width:100%;font-size:13.5px;-webkit-text-size-adjust:100%;text-size-adjust:100%} .matrixTable th,.matrixTable td{padding:9px 14px;text-align:center;white-space:nowrap;border-bottom:1px solid var(--line)} .matrixTable th[data-sort-key]:not(.matrixCardCol),.matrixTable td{width:110px} .matrixTable thead th{font-weight:750;color:var(--ink2);font-size:12px;text-transform:uppercase;letter-spacing:.02em;background:var(--bg2);white-space:normal} .matrixTable tbody tr:last-child th,.matrixTable tbody tr:last-child td{border-bottom:0} /* .matrixTable th,.matrixTable td (0,1,1) beats a bare .matrixCardCol (0,1,0) regardless of source order, so the nowrap/white-space override below must match that specificity or the sticky column silently stays unwrapped and its intrinsic width overlaps the scrolling columns next to it. */ .matrixTable th.matrixCardCol{position:sticky;left:0;text-align:left;font-weight:650;background:var(--bg-surface);box-shadow:1px 0 0 var(--line);vertical-align:middle;white-space:normal;width:158px;max-width:158px;font-size:12.5px;line-height:1.25} .matrixCardCol .plogo{vertical-align:middle;margin-right:6px} .matrixTable thead .matrixCardCol{background:var(--bg2);z-index:2} .matrixTable tbody .matrixCardCol{z-index:1} /* strategy-matrix-redesign: every data row is forced to the same explicit height — tall enough for the WORST case (a 2-line-or-more card name plus its wallet pill) at the NARROWEST column width the sticky name column ever actually renders at — so every row, held or not, long name or short, is the same height everywhere. Measured empirically (Playwright): (1) min-height on /inline-block name spans is NOT reliably honored by Chromium's table layout under border-collapse (a short row's cell rendered shorter than its own declared min-height) -- an explicit `height` on in tbody is. (2) The name column's rendered width is NOT constant across breakpoints even though its CSS width is: Brief #50's .matrixTable{min-width:100%} deliberately stretches the whole table to fill .matrixScroll on wide screens, and table-layout:fixed distributes that extra width proportionally across every column (158px -> ~188px at 1440px; stays a true 158px once .matrixScroll can't offer more room than the table needs, e.g. <=390px) -- that's Brief #50's own intended desktop behavior, not a bug to undo. So the same "American Express Gold" + wallet pill wraps to 2 lines in the wider desktop column but 3 lines in the true-158px mobile column. 80px is sized for that narrow-column 3-line worst case (measured 78.25px); wider desktop columns just get a little header-room on a short name. */ .matrixTable tbody tr{height:80px} /* strategy-matrix-redesign: wallet membership used to be a row-level green background tint + box-shadow frame (removed here) on top of the best-in-category cell's fill; now it's just the .walletPill next to the card's name (stratMatrixRowHTML), so a held row renders identically to any other row except for that one pill — the goal being every row reads as plainly as possible, with color reserved for the two signals that still carry meaning (best-in-category text, the `*` detail marker). */ .matrixCardCol .pill.walletPill{display:inline-flex;align-items:center;gap:3px;font-size:8px;padding:1px 5px 1px 4px;margin-left:2px;font-weight:700;background:var(--good);color:#fff;vertical-align:middle} .walletPillIcon{width:9px;height:9px;flex:none} /* Sortable column headers (Brief #41) — a real