:root{ --bg:#050505; /* Dark-theme text brightened for legibility (owner: letters must be more distinct even in dark). num d6->e8, body 9a->b6, cap 5c->7a. */ --num:#e8e8e8; --body:#b6b6b6; --cap:#7a7a7a; --white:#ffffff; /* Phase 24 light mode: the foreground gray and the pure-white overlay are now tokens (used ~95 and ~12 times as rgba(var(--fg-rgb),A) and rgba(var(--hi-rgb),A)). Overriding just these two in the light theme flips every border, hairline and subtle fill in one place, and --line (which references --fg-rgb) recomputes with them. */ --fg-rgb:214,214,214; --hi-rgb:255,255,255; --line:rgba(var(--fg-rgb),0.10); --green:#3fb27f; --amber:#c79a3a; --red:#c0503f; /* Phase 17 motion tokens (one block, reused everywhere). Only transform and opacity are ever animated; nothing exceeds 300ms. Entrances/exits use ease-out; drawers/sheets use a gentle spring-like ease-out. */ --motion-fast:150ms; --motion-base:200ms; --motion-slow:300ms; --ease-out:cubic-bezier(0.22,1,0.36,1); --ease-standard:ease; /* Phase 17: render every native control (dropdown option lists, date and month pickers, checkboxes, radios, scrollbars) in the dark theme instead of the light OS default, and tint checkable controls with the brand green. One declaration fixes what looked light-on-dark app-wide. */ color-scheme:dark; accent-color:var(--green); } /* Phase 24: light ("day") mode. Set by data-theme="light" on from the top-left toggle (persisted in localStorage, applied before first paint to avoid a flash). Absence of the attribute is the default dark theme, left entirely unchanged. Most of the UI reads the semantic tokens plus the tokenized --fg-rgb/--hi-rgb, so overriding those flips the bulk of it; the few surfaces that hardcoded a dark hex are overridden right after. */ :root[data-theme="light"]{ /* Light theme softened off pure white (owner: too bright) and text darkened for more contrast (owner: font too dull). bg fff->f6f5f3, body 4b->2f, cap 8a->69; num already near-black. */ --bg:#f6f5f3; --num:#141414; --body:#2f2f2f; --cap:#696969; --white:#161616; --fg-rgb:26,26,26; --hi-rgb:0,0,0; --green:#2f9e6b; --amber:#9a6f1c; --red:#b23f2e; color-scheme:light; } :root[data-theme="light"] .panel, :root[data-theme="light"] #whatifSheet, :root[data-theme="light"] .menu, :root[data-theme="light"] .toast, :root[data-theme="light"] .tour-card{ background:#ffffff; } :root[data-theme="light"] .panel{ box-shadow:-8px 0 40px rgba(0,0,0,0.10); } :root[data-theme="light"] .menu, :root[data-theme="light"] .tour-card, :root[data-theme="light"] #whatifSheet{ box-shadow:0 8px 40px rgba(0,0,0,0.14); } :root[data-theme="light"] input, :root[data-theme="light"] .wiz-onefield, :root[data-theme="light"] .wiz-typeit-textarea{ background:#eceae7; } :root[data-theme="light"] select{ background-color:#eceae7; } :root[data-theme="light"] input::placeholder, :root[data-theme="light"] #wizard .wiz-input::placeholder{ color:#9a9a9a; } /* Filled buttons use background:var(--white) with color:#000; in light mode --white is near-black, so the label must flip to white to stay readable. */ :root[data-theme="light"] .btn-primary, :root[data-theme="light"] .btn.primary, :root[data-theme="light"] .toast-btn{ color:#ffffff; } :root[data-theme="light"] .btn-primary:hover, :root[data-theme="light"] .btn.primary:hover{ background:#333333; } /* The on/off switch: a light track + white knob when off. */ :root[data-theme="light"] .toggle{ background:#dcdcdc; } :root[data-theme="light"] .toggle.on i{ background:#ffffff; } /* The day/night toggle icon: sun shown in dark mode (tap for day), moon in light mode (tap for night). */ .themebtn .theme-moon{ display:none; } :root[data-theme="light"] .themebtn .theme-sun{ display:none; } :root[data-theme="light"] .themebtn .theme-moon{ display:inline; } /* Phase 17 button tiers (defined once, consumed by the redesign splices). Baselined to the current button looks so adopting them is a no-op until a surface is redesigned onto them. Exactly three tiers: primary (filled, one per screen), secondary (outlined), tertiary (text). */ /* Phase 17: the three button tiers, spliced from the Claude Design component sheet. Softer 6px corner, generous padding, and the full state set (hover, active press, focus ring, disabled), the same across the app. */ .btn-primary,.btn-secondary,.btn-tertiary{ font-family:inherit;cursor:pointer;white-space:nowrap;letter-spacing:0.04em; border-radius:6px;transition:border-color var(--motion-fast) var(--ease-standard),background var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-out); } .btn-primary{background:var(--white);color:#000;border:1px solid var(--white);padding:10px 18px;font-size:13px} .btn-primary:hover{background:#eaeaea} .btn-secondary{background:none;color:var(--num);border:1px solid rgba(var(--fg-rgb),0.2);padding:10px 18px;font-size:13px} .btn-secondary:hover{border-color:rgba(var(--fg-rgb),0.45)} .btn-tertiary{background:none;color:var(--body);border:1px solid transparent;padding:10px 14px;font-size:13px} .btn-tertiary:hover{color:var(--num)} .btn-primary:active,.btn-secondary:active,.btn-tertiary:active{transform:translateY(1px)} .btn-primary:disabled,.btn-secondary:disabled,.btn-tertiary:disabled{opacity:0.45;cursor:not-allowed;transform:none} /* Phase 17: reduced motion collapses every animation to an instant change, honored globally so no surface has to remember it. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important} } *{box-sizing:border-box} /* Phase 17: one thin, quiet scrollbar everywhere (color-scheme already darks the native one; this makes it consistent and premium across every scroll region, matching the drawer body). */ *::-webkit-scrollbar{width:8px;height:8px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:rgba(var(--fg-rgb),0.12);border-radius:8px} *::-webkit-scrollbar-thumb:hover{background:rgba(var(--fg-rgb),0.22)} html,body{height:100%;margin:0} body{ background:var(--bg); color:var(--body); font-family:"Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif; font-weight:300; overflow:hidden; -webkit-font-smoothing:antialiased; display:flex;flex-direction:column;height:100vh;height:100dvh; } .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .mono{font-family:"SF Mono",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace} /* Phase 17 root-cause fix: this reset used to be button.plain (0,1,1), which silently BEAT every single-class style (0,1,0) on the same button, so .checkin/.rung/.rung-coast/.mincome and friends never received their intended font-size, padding, or color and fell back to inherited 16px with zero padding, the exact ragged spacing seen on the dashboard. :where() keeps the reset but at ZERO specificity, so the design's own class rules finally win. */ :where(button.plain){background:none;border:0;color:inherit;font:inherit;cursor:pointer;text-align:inherit;padding:0;letter-spacing:inherit} .label{font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--cap);font-weight:400} /* Phase 17: the keyboard focus ring standard from the Claude Design component sheet, a 2px ring at a 2px offset, applied everywhere the keyboard can land. Text controls opt out of the outline and show their own brighter border + glow instead (defined with the input family below), so a focused field never carries two rings at once. */ :focus-visible{outline:2px solid var(--num);outline-offset:2px;border-radius:3px} input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none} #bg{position:fixed;inset:0;z-index:0;pointer-events:none} #heroGlow{ position:fixed;left:50%;top:46%;width:820px;height:820px;transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(var(--hi-rgb),0.055) 0%,rgba(var(--hi-rgb),0.02) 32%,transparent 62%); z-index:0;pointer-events:none; } #bar{ position:relative;z-index:3;height:48px;display:flex;align-items:center; padding:0 22px;gap:14px;border-bottom:1px solid rgba(var(--fg-rgb),0.07); } /* Phase 17: the wordmark is the home affordance, it links back to the landing page (/welcome) so a signed-out visitor is never trapped in the app shell. Styled as the same quiet wordmark, brightening on hover. */ #bar .brand{color:var(--num);font-size:14px;letter-spacing:0.36em;text-transform:uppercase;font-weight:400;text-decoration:none;cursor:pointer;transition:color var(--motion-fast) var(--ease-standard)} #bar .brand:hover{color:var(--white)} #bar .spacer{flex:1} .iconbtn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--body);position:relative;border-radius:8px;transition:color var(--motion-fast) var(--ease-standard),background var(--motion-fast) var(--ease-standard)} .iconbtn:hover{color:var(--num);background:rgba(var(--fg-rgb),0.05)} .bell-dot{position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:50%} #grid{ position:relative;z-index:2;flex:1 1 auto;min-height:0; display:grid; grid-template-columns:250px 1fr 372px; grid-template-rows:1fr; grid-template-areas:"ladder hero action"; } #bar{flex:none} /* Phase 9 F1: a small, permanent legal footer row */ #legalFooter{flex:none;display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap;padding:6px 16px;font-size:10px} #legalFooter a{color:var(--cap);text-decoration:none;letter-spacing:0.04em} #legalFooter a:hover{color:var(--num)} .legal-strip{color:var(--cap);letter-spacing:0.02em} /* Phase 17 (Claude Design dashboard): the three columns are separated by hairlines, exactly as the design draws them (removed in the phone stack). */ #ladder{grid-area:ladder;position:relative;padding:32px 22px 32px 28px;overflow-y:auto;min-height:0;border-right:1px solid rgba(var(--fg-rgb),0.06)} /* Phase 17 (Claude Design dashboard, applied exactly): the hero is a single LEFT-ALIGNED editorial column, caps kicker, mono headline number with a lighter rupee, one quiet facts line, the progress hairline, the freedom date as the big editorial line, and one row of actions. */ /* min-height:0 + overflow-y:auto (the same guard #ladder and #actions carry): without it, #hero's content height becomes the grid row's minimum and forces the whole grid taller than the viewport on a short window, spilling the columns over the legal footer (owner-reported overlap 2026-07-17). Now it scrolls internally instead, like the other two columns. */ #hero{grid-area:hero;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;padding:0 36px;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden} .hero-kicker{font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--cap);margin-bottom:16px} .hero-subrow{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px;font-size:12px;color:var(--cap);letter-spacing:0.03em;line-height:1.5} .hero-actions{display:flex;align-items:center;gap:12px;margin-top:34px;flex-wrap:wrap} /* Owner: the secondary hero actions (Income blueprint, Share your date) read as plain text, not buttons. Give them the same bordered affordance as the What-if button so it is obvious they are tappable. */ .hero-actions button.checkin{font-size:12px;border:1px solid rgba(var(--fg-rgb),0.22);padding:9px 15px;border-radius:6px;color:var(--num);letter-spacing:0.04em;background:rgba(var(--fg-rgb),0.02);transition:border-color var(--motion-fast) var(--ease-standard),background var(--motion-fast) var(--ease-standard)} .hero-actions button.checkin:hover{border-color:rgba(var(--fg-rgb),0.42);background:rgba(var(--fg-rgb),0.05)} #ladder,#actions{min-width:0} /* This column holds the Ask box, the monthly plan and the STEP cards, which easily exceed the viewport on a short (landscape iPad) window. It used to be overflow:hidden, so that content was simply clipped and unreachable; it now scrolls independently exactly like the ladder column beside it. */ #actions{grid-area:action;padding:32px 28px 16px 26px;display:flex;flex-direction:column;gap:18px;overflow-y:auto;overflow-x:hidden;min-height:0;-webkit-overflow-scrolling:touch;border-left:1px solid rgba(var(--fg-rgb),0.06)} /* HERO */ .hero-draw{color:var(--num);line-height:1;display:flex;align-items:baseline;gap:10px;justify-content:flex-start;flex-wrap:wrap;text-align:left} .hero-draw .rupee{font-size:clamp(22px,3vw,34px);font-weight:200;color:var(--body)} .hero-draw .big{color:var(--white);font-family:"SF Mono",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;font-size:clamp(40px,5.4vw,72px);font-weight:400;letter-spacing:-0.02em;font-variant-numeric:tabular-nums} .hero-draw .rest{font-size:clamp(16px,2vw,24px);font-weight:200;color:var(--body)} .progwrap{margin-top:32px;width:100%;max-width:460px;text-align:left} .progbar{height:3px;border-radius:3px;background:rgba(var(--fg-rgb),0.14);position:relative;overflow:hidden} /* Phase 17: slightly thicker and rounded so the hero progress reads as a deliberate element, not a hairline. Fill width is set by the engine. */ .progbar i{position:absolute;left:0;top:0;bottom:0;background:var(--num);display:block;border-radius:3px} .progmeta{margin-top:10px;font-size:12px;letter-spacing:0.04em;color:var(--body);display:flex;gap:8px;justify-content:flex-start} .progmeta .pct{color:var(--num)} /* the freedom date as the design's big editorial line, not an underlined small link. button-qualified: these are plain buttons, and button.plain's font:inherit outweighs a bare class selector. */ button.verdict{margin-top:36px;font-size:clamp(24px,3vw,30px);font-weight:200;color:var(--num);letter-spacing:-0.01em;text-align:left;line-height:1.25} button.verdict:hover{color:var(--white)} .verdict .u{border-bottom:0;padding-bottom:0} .freedomcap{margin-top:12px;font-size:12px;color:var(--cap);letter-spacing:0.03em;line-height:1.5;text-align:left} button.freedomrange{display:block;margin:8px 0 0;font-size:12px;color:var(--cap);letter-spacing:0.02em;border-bottom:0;padding-bottom:0;text-align:left} button.freedomrange:hover{color:var(--body)} /* the runway warning as a quiet caption, not inherited 16px body text */ button.runway-line{font-size:12px;color:var(--body);line-height:1.5} .mincome{margin-top:10px;font-size:11px;color:var(--cap);letter-spacing:0.04em} .mincome .num{color:var(--num)} /* the honest caveat under each portfolio-income line (average/volatile vs real cash), quieter than the figure it qualifies */ .mincome-sub{margin-top:2px;font-size:10px;color:var(--cap);opacity:0.8;letter-spacing:0.03em;max-width:340px} .hero-ongoing{margin-top:6px;font-size:11px;line-height:1.5;color:var(--body);opacity:0.85;max-width:400px} /* ASK YOUR PLAN */ .ask-box{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid rgba(var(--fg-rgb),0.08)} .ask-label{font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--cap);font-weight:400;margin-bottom:8px} .ask-quota{font-size:11px;color:var(--cap);margin-top:8px;font-variant-numeric:tabular-nums} .ask-quota.out{color:var(--amber)} .ask-row{display:flex;gap:8px} .ask-row input.wide{flex:1 1 auto} .ask-row button{border:1px solid rgba(var(--fg-rgb),0.2);color:var(--num);background:none;padding:0 16px;font-size:12px;letter-spacing:0.04em;border-radius:6px;cursor:pointer;white-space:nowrap} .ask-row button:hover{border-color:rgba(var(--fg-rgb),0.4)} .ask-row button:disabled{opacity:0.4;cursor:default} .ask-chips{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap} .ask-chip{border:1px solid rgba(var(--fg-rgb),0.14);color:var(--body);background:none;padding:5px 10px;font-size:11px;letter-spacing:0.02em;border-radius:12px;cursor:pointer;text-align:left} .ask-chip:hover{border-color:rgba(var(--fg-rgb),0.4);color:var(--num)} .ask-result{margin-top:12px;padding:12px 14px;border:1px solid rgba(var(--fg-rgb),0.14);border-radius:6px;font-size:13px;color:var(--num);line-height:1.6} .ask-result .ask-tested{color:var(--cap);font-size:11px;letter-spacing:0.04em;margin-bottom:6px;text-transform:uppercase} .ask-result .ask-answer{color:var(--num)} .ask-result .ask-actions{margin-top:10px;display:flex;gap:8px} /* ACTIONS */ .acard{padding:15px 16px;position:relative;border:1px solid transparent;border-radius:6px;transition:border-color var(--motion-fast) var(--ease-standard),background var(--motion-fast) var(--ease-standard);text-align:left;display:block;width:100%} .acard:hover{border-color:rgba(var(--fg-rgb),0.18)} .acard .n{position:absolute;left:-2px;top:14px;font-size:10px;color:var(--cap)} .acard .ins{font-size:15px;line-height:1.35;color:var(--num);letter-spacing:0.01em} .acard .why{font-size:12px;line-height:1.5;color:var(--cap);margin-top:8px} /* Phase 17: the one action loudest. The top card earns a defined border and fill so it reads as the hero of the column, hierarchy through space and containment, not a new colour; the rest stay a calm minimal list. */ .acard.top{background:rgba(var(--hi-rgb),0.035);border-color:rgba(var(--fg-rgb),0.14)} .acard.top .ins{color:var(--white);font-weight:400} .acard.crit .ins{color:var(--white)} .acards-label{margin-bottom:2px} .acard-step{font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--cap);margin-bottom:6px} .acard-lead{font-size:12px;color:var(--body);letter-spacing:0.02em;margin:2px 0 8px;line-height:1.5} .acard-insbtn{display:block;width:100%;text-align:left} .acard-acts{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap} .acard-btn{border:1px solid rgba(var(--fg-rgb),0.28);color:var(--num);background:rgba(var(--fg-rgb),0.035);padding:8px 14px;font-size:11px;letter-spacing:0.04em;border-radius:6px;cursor:pointer;white-space:nowrap;transition:border-color var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard),background var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-out)} .acard-btn:hover{border-color:rgba(var(--fg-rgb),0.5);color:var(--num);background:rgba(var(--fg-rgb),0.07)} .done-sect{margin-top:8px;border-top:1px solid rgba(var(--fg-rgb),0.08);padding-top:6px} .done-toggle{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--cap);padding:6px 0} .done-toggle:hover{color:var(--num)} .done-list .acard{opacity:0.6} .coachnote{margin-top:14px;border-top:1px solid rgba(var(--fg-rgb),0.08);padding-top:12px} .coachnote-label{font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--cap);font-weight:400;margin-bottom:8px} .coachnote-bullet{font-size:13px;color:var(--body);line-height:1.6;margin-bottom:5px;padding-left:12px;position:relative} .coachnote-bullet:before{content:"\2022";position:absolute;left:0} .coachnote-disclaimer{font-size:10px;color:var(--cap);letter-spacing:0.02em;margin-top:8px;line-height:1.5} /* LADDER */ .ladder-label{margin-bottom:16px} .rung{position:relative;display:flex;gap:12px;padding:15px 0;width:100%;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer} .rung:hover .rung-amt{color:var(--white)} .rail{position:relative;flex:none;width:14px;display:flex;justify-content:center} .rail .pip{width:7px;height:7px;border-radius:50%;border:1px solid var(--cap);background:transparent;position:relative;z-index:1;margin-top:3px} .rail::before{content:"";position:absolute;top:-11px;bottom:-11px;left:50%;width:1px;background:rgba(var(--fg-rgb),0.12);transform:translateX(-50%)} .rung.first .rail::before{top:50%} .rung.last .rail::before{bottom:50%} .rung.reached .pip{background:var(--num);border-color:var(--num)} .rung.next .pip{border-color:var(--num);box-shadow:0 0 0 3px rgba(var(--fg-rgb),0.06)} .rung-body{flex:1;min-width:0} .rung-top{display:flex;align-items:baseline;justify-content:space-between;gap:6px;flex-wrap:wrap} .rung-amt{font-size:13px;color:var(--num)} .rung.next .rung-amt{color:var(--white)} .rung-state{font-size:10px;letter-spacing:0.03em;color:var(--cap);font-variant-numeric:tabular-nums;white-space:nowrap} .rung.reached .rung-state{color:var(--green)} .rung-mid{margin-top:3px;font-size:11px;line-height:1.45;color:var(--body)} .rung-income{color:var(--num)} .rung.next .rung-income{color:var(--white)} /* Phase 17 (Claude Design dashboard): the milestone label as its own quiet uppercase caption, one clean line under the income. */ .rung-tag{margin-top:3px;font-size:9px;letter-spacing:0.09em;text-transform:uppercase;color:var(--cap)} .rung.next .rung-tag{color:var(--body)} /* Phase 8 F2: the Coast point's own rung style, deliberately distinct from the corpus-level rungs above (no rail/pip/amount, just its own sentence on a dashed divider). */ .rung-coast{padding:12px 0;margin:6px 0;font-size:11px;line-height:1.55;color:var(--body);border-top:1px dashed rgba(var(--fg-rgb),0.18);border-bottom:1px dashed rgba(var(--fg-rgb),0.18);display:block;width:100%;text-align:left} .rung-coast:hover{color:var(--white)} .rung-meaning{color:var(--cap);font-size:10px;letter-spacing:0.02em} /* Phase 13 F1: withdrawal survival ladder accents. Worst start reads amber (or red if it actually ran dry), best start green, so the range of real outcomes is legible at a glance. */ .rung-worst .pip{border-color:var(--amber);background:var(--amber)} .rung-worst.reached .rung-meaning{color:var(--amber)} .rung-worst:not(.reached) .pip{border-color:var(--red);background:var(--red)} .rung-worst:not(.reached) .rung-meaning{color:var(--red)} .rung-best .pip{border-color:var(--green);background:var(--green)} .rung-best .rung-meaning{color:var(--green)} /* small inline link, reused by the CPI rate suggestion. 12px = the design's quiet-link size (now actually applied, see the :where(button.plain) fix) */ .checkin{font-size:12px;color:var(--body);letter-spacing:0.04em;white-space:nowrap;line-height:1.5} /* Phase 7 F4: a full-sentence prompt, unlike .checkin's short nowrap labels */ .ladder-prompt{white-space:normal;text-align:left;max-width:100%} /* Phase 8 F3: the runway line is also a full sentence, same fix */ .runway-line{white-space:normal;text-align:left;max-width:100%;display:block;margin-bottom:14px} .checkin:hover{color:var(--num)} /* Phase 11: same fix as .ladder-prompt/.runway-line above, but as a composable modifier (checkin plain wrap) since these are still real buttons, not full paragraphs: found at 320px width, where several new dossier/LTCG link-style buttons carry a full phrase rather than a short chip label and were overflowing the panel horizontally. */ .checkin.wrap{white-space:normal;text-align:left;max-width:100%;display:block} /* PANELS. Phase 17: one drawer frame, one motion. The scrim fades and the drawer slides with the shared motion tokens and an ease-out settle, so every drawer in the app (holdings, assumptions, milestones, the year in money, every stepper) opens with the same premium feel. */ #scrim{position:fixed;inset:0;background:rgba(3,3,3,0.62);z-index:8;opacity:0;pointer-events:none;transition:opacity var(--motion-base) var(--ease-standard)} #scrim.show{opacity:1;pointer-events:auto} .panel{ position:fixed;top:0;right:0;height:100%;height:100dvh;width:520px;max-width:94vw;background:#080808; border-left:1px solid rgba(var(--fg-rgb),0.10);z-index:9;transform:translateX(100%); transition:transform var(--motion-base) var(--ease-out);display:flex;flex-direction:column; } .panel.show{transform:none} .panel-head{display:flex;align-items:center;padding:22px 26px 14px;gap:12px;flex:none} .panel-head h2{margin:0;font-size:13px;letter-spacing:0.2em;text-transform:uppercase;color:var(--num);font-weight:400} .panel-head .spacer{flex:1} /* height:100dvh above sizes the drawer to the VISIBLE viewport (not iOS's larger layout viewport), so on an iPad with the Safari bar showing the content overflows this scroll area instead of running off the bottom of the screen where it could not be reached. -webkit-overflow-scrolling keeps momentum scroll on older iOS; overscroll-behavior stops the scroll from chaining to the dashboard behind the drawer. */ /* Base body type for every panel. Without this, any element added without a class inherited the 16px document default and clashed with the 13px .prose body text (owner: "no consistency in font"). 13px is now the panel baseline so a bare div/span reads as ordinary body text, and the deliberate tiers (.row-title, .sect-title, .num, .story-note) step off it intentionally. */ .panel-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:6px 26px 40px;font-size:13px;line-height:1.55;color:var(--body)} /* The name/title of a listed item (a goal, card, loan, holding, category): one step above body so a row's title reads as its heading. */ .row-title{font-size:14px;line-height:1.4;color:var(--num)} .panel-body::-webkit-scrollbar{width:8px} .panel-body::-webkit-scrollbar-thumb{background:rgba(var(--fg-rgb),0.12)} /* Phase 4 F2: what-if bottom sheet, a distinct overlay from the side drawers above so it can genuinely slide up from the bottom. */ #whatifScrim{position:fixed;inset:0;background:rgba(3,3,3,0.62);z-index:10;opacity:0;pointer-events:none;transition:opacity var(--motion-base) var(--ease-standard)} #whatifScrim.show{opacity:1;pointer-events:auto} #whatifSheet{ position:fixed;left:0;right:0;bottom:0;max-height:88vh;width:100%;max-width:620px;margin:0 auto; background:#080808;border-top:1px solid rgba(var(--fg-rgb),0.14);border-radius:16px 16px 0 0; z-index:11;transform:translateY(100%);transition:transform var(--motion-base) var(--ease-out); display:flex;flex-direction:column;overflow:hidden; } #whatifSheet.show{transform:translateY(0)} .whatif-grabber{width:36px;height:4px;border-radius:2px;background:rgba(var(--fg-rgb),0.2);margin:10px auto 0} .whatif-body{flex:1;overflow-y:auto;padding:14px 26px 28px} .whatif-slider-row{margin-top:20px} .whatif-slider-row label{display:block;font-size:12px;color:var(--body);margin-bottom:8px} /* Phase 17: app range sliders were unstyled (native blue); style them to match the calculator pages exactly (2px track, 18px --num thumb, focus). */ /* Bigger touch target + smoother drag (owner request). The input is a tall 36px hit zone with a transparent background; the thin visible rail is drawn by the track pseudo-element, and the thumb is centered over it. touch-action none stops the page stealing the drag so the thumb tracks the finger at the device's native refresh. */ input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;outline:none;margin:2px 0;touch-action:none;cursor:pointer} input[type=range]::-webkit-slider-runnable-track{height:3px;background:rgba(var(--fg-rgb),0.18);border-radius:2px} input[type=range]::-moz-range-track{height:3px;background:rgba(var(--fg-rgb),0.18);border-radius:2px} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--num);cursor:pointer;border:0;margin-top:-10.5px} input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--num);cursor:pointer;border:0} input[type=range]:focus-visible{outline:2px solid var(--num);outline-offset:6px} .whatif-slider-row input[type=range]{width:100%} .whatif-slider-val{font-size:12px;color:var(--num);margin-top:4px} .whatif-result{margin-top:22px;padding:14px;border:1px solid rgba(var(--fg-rgb),0.14);border-radius:10px;font-size:13px;color:var(--num);line-height:1.5} .whatif-actions{display:flex;gap:10px;margin-top:18px} .fieldrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid rgba(var(--fg-rgb),0.05)} .fieldrow label{font-size:12px;color:var(--body);letter-spacing:0.02em} .fieldrow .hint{font-size:10px;color:var(--cap);margin-top:2px} /* Phase 17: the input family, spliced from the Claude Design component sheet. Softer 6px corner matched to the buttons, a slightly firmer resting border, and a real focus treatment (brighter border + a quiet ring) the app never had before. Error state ties to the semantic red token. */ input[type=number],input[type=text],input[type=email],input[type=password],input[type=month],input[type=date]{ background:#0d0d0d;border:1px solid rgba(var(--fg-rgb),0.12);color:var(--num); font:inherit;font-size:13px;padding:8px 11px;width:130px;text-align:right;border-radius:6px; font-variant-numeric:tabular-nums; transition:border-color var(--motion-fast) var(--ease-standard),box-shadow var(--motion-fast) var(--ease-standard); } input[type=email],input[type=password],input[type=month],input[type=date]{text-align:left} input::placeholder{color:#4a4a4a} input.wide{width:100%;text-align:left} input[type=number]:focus,input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=month]:focus,input[type=date]:focus{ outline:none;border-color:rgba(var(--fg-rgb),0.5);box-shadow:0 0 0 3px rgba(var(--fg-rgb),0.07); } input.err,input[aria-invalid="true"]{border-color:var(--red)} input.err:focus,input[aria-invalid="true"]:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(192,80,63,0.14)} input:disabled{opacity:0.5;cursor:not-allowed} /* select matched to the text-input box, same 6px corner, same focus ring. */ select{-webkit-appearance:none;appearance:none;background:#0d0d0d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;background-size:15px;border:1px solid rgba(var(--fg-rgb),0.12);color:var(--num);font:inherit;font-size:13px;padding:8px 28px 8px 11px;border-radius:6px;cursor:pointer;transition:border-color var(--motion-fast) var(--ease-standard),box-shadow var(--motion-fast) var(--ease-standard)} select:focus{outline:none;border-color:rgba(var(--fg-rgb),0.5);box-shadow:0 0 0 3px rgba(var(--fg-rgb),0.07)} /* Phase 17: the ON toggle now reads green (the semantic positive token) with a white knob, matched to the Claude Design component sheet; OFF stays a quiet grey knob on the raised surface. */ .toggle{width:44px;height:24px;border-radius:12px;background:#1a1a1a;position:relative;border:1px solid rgba(var(--fg-rgb),0.10);cursor:pointer;transition:background var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard)} .toggle i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--cap);transition:transform var(--motion-fast) var(--ease-out),background var(--motion-fast) var(--ease-standard)} .toggle.on{background:var(--green);border-color:var(--green)} .toggle.on i{transform:translateX(20px);background:#fff} /* Owner: buttons read as text. Stronger border + a faint fill so a .btn is unmistakably a button in both themes. */ .btn{border:1px solid rgba(var(--fg-rgb),0.28);color:var(--num);padding:10px 18px;font-size:13px;letter-spacing:0.04em;background:rgba(var(--fg-rgb),0.035);cursor:pointer;border-radius:6px;white-space:nowrap;transition:border-color var(--motion-fast) var(--ease-standard),background var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-out)} .btn:hover{border-color:rgba(var(--fg-rgb),0.5);background:rgba(var(--fg-rgb),0.07)} .btn:hover{border-color:rgba(var(--fg-rgb),0.45)} .btn.primary{background:var(--white);color:#000;border-color:var(--white)} .btn.primary:hover{background:#eaeaea} .btn:disabled{opacity:0.45;cursor:not-allowed} /* Owner rule (2026-07-17): secondary/inline actions in the rooms must read as buttons, never plain text. .btn.mini is the compact dashboard-style button used for Edit/Remove/Add rows so they stay unmistakably tappable and consistent with the primary .btn. */ .btn.mini{padding:6px 12px;font-size:12px;border-radius:6px} /* Phase 17: every button acknowledges the press with a 1px settle (transform only, so it is cheap and honours reduced motion). The audit found no :active state anywhere in the app. */ .btn:active,button.modebtn:active,.acard-btn:active,.checkin:active,.wiz-next:active,.toast-btn:active{transform:translateY(1px)} .btn:disabled:active{transform:none} /* Phase 17 (Claude Design holdings): the add-holding actions as one even, wrapping row of equal-height chips, replacing the old oversized bordered boxes and full-width stacked buttons. */ .addrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px} .addrow .btn{flex:0 0 auto} table.holdings{width:100%;border-collapse:collapse;margin-top:6px} table.holdings th{font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--cap);text-align:left;font-weight:400;padding:6px 6px} table.holdings td{padding:5px 4px;border-top:1px solid rgba(var(--fg-rgb),0.05)} table.holdings input{width:100%;text-align:left;font-size:12px;padding:5px 6px} table.holdings input.rt{text-align:right} table.holdings.hide-codes .codecol{display:none} table.holdings td:first-child{min-width:160px} table.holdings td:first-child input{text-overflow:ellipsis} /* CAS import review: one card per holding, readable at any width (the panel is a narrow drawer, so the old 5-column table squeezed the parsed name to one word per line). */ .casreview{margin-top:8px;display:flex;flex-direction:column;gap:10px} .casrow{border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:rgba(var(--hi-rgb),0.012)} .casrow.off{opacity:0.5} .casrow-head{display:flex;gap:10px;align-items:flex-start;cursor:pointer} .casrow-head input{margin-top:3px;flex:0 0 auto;width:auto} .casrow-name{color:var(--num);font-size:13px;line-height:1.4} .casrow-meta{display:flex;gap:16px;flex-wrap:wrap;margin:9px 0 0 26px;font-size:11px;color:var(--cap)} .casrow-val{color:var(--body)} .casrow-match{margin:11px 0 0 26px} .casrow-match-label{display:block;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--cap);margin-bottom:5px} .casrow-match select{width:100%} button.rm{color:var(--cap);font-size:14px;line-height:1;padding:4px} button.rm:hover{color:var(--red)} .totrow td{color:var(--num);font-size:12px;border-top:1px solid rgba(var(--fg-rgb),0.14);padding-top:9px} /* Phase 2: auto-valued (units x NAV) holdings */ .autoval{display:flex;align-items:center;justify-content:flex-end;gap:6px} .autotag{font-size:8px;letter-spacing:0.08em;text-transform:uppercase;color:var(--bg);background:var(--green);border-radius:4px;padding:1px 4px;font-weight:600} .navasof{font-size:9px;color:var(--cap);text-align:right;margin-top:2px} .navstale{font-size:9px;color:var(--amber);text-align:right;margin-top:2px} /* Phase 3 F2: fund vs index comparison line */ .comparefund{font-size:9px;color:var(--cap);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap} /* Phase 4 F4: household owner chip */ .ownerchip{display:inline-block;font-size:8px;letter-spacing:0.06em;text-transform:uppercase;color:var(--cap);border:1px solid rgba(var(--fg-rgb),0.18);border-radius:4px;padding:1px 5px;margin-top:3px} .ownerchip:hover{color:var(--body);border-color:rgba(var(--fg-rgb),0.3)} /* Phase 4 F1: life events list + form */ .eventrow{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:10px 0;border-top:1px solid rgba(var(--fg-rgb),0.08)} .eventrow:first-child{border-top:none} .eventacts{display:flex;gap:8px;flex-shrink:0} .eventform{margin-top:8px;padding:12px;border:1px solid rgba(var(--fg-rgb),0.14);border-radius:8px} .eventform .fieldrow{margin-top:8px} .sect-title{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--cap);margin:22px 0 4px} .prose{font-size:13px;line-height:1.75;color:var(--body)} /* Money-story list items share the exact prose size/leading so bullets and paragraphs read as one consistent scale; .story-note is the muted aside. */ .story-bullet{display:flex;gap:8px;font-size:13px;line-height:1.75;color:var(--body);padding:2px 0} .story-dot{flex:0 0 auto;color:var(--cap)} .story-note{font-size:12px;line-height:1.6;color:var(--cap);margin-top:5px} .prose b{color:var(--num);font-weight:400} .arith{font-size:12px;line-height:1.9;color:var(--body)} .arith .r{color:var(--num)} .menu{position:fixed;z-index:9;background:#0c0c0c;border:1px solid rgba(var(--fg-rgb),0.12);border-radius:10px;padding:6px;min-width:190px} .menu button{display:block;width:100%;text-align:left;padding:9px 12px;font-size:12px;color:var(--body);letter-spacing:0.03em;border-radius:6px} .menu button:hover{background:rgba(var(--fg-rgb),0.06);color:var(--num)} /* Phase 24: menu items that carry a one-line explanation under the label. */ .menu button.menuitem-desc-wrap{padding:9px 12px} .menu .menuitem-label{font-size:12px;color:var(--num);letter-spacing:0.03em} .menu .menuitem-desc{font-size:10.5px;color:var(--cap);line-height:1.4;margin-top:3px;white-space:normal} .menu button.menuitem-desc-wrap:hover .menuitem-desc{color:var(--body)} /* Phase 25: the "tappable" hint under an interactive dashboard number, plus the hover cue on the numbers themselves so it is obvious they open a drawer. The glyph is a small tap/pointer icon (CSS-masked SVG). */ .taphint{display:inline-flex;align-items:center;gap:5px;margin-top:7px;font-size:11px;letter-spacing:0.04em;color:var(--cap)} .taphint-ico{width:12px;height:12px;flex:none;background-color:var(--cap);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11.5V6a1.5 1.5 0 0 1 3 0v5'/%3E%3Cpath d='M12 11V4.5a1.5 1.5 0 0 1 3 0V11'/%3E%3Cpath d='M15 11V6.5a1.5 1.5 0 0 1 3 0V14a6 6 0 0 1-6 6h-2a6 6 0 0 1-5.2-3l-1.6-3a1.5 1.5 0 0 1 2.6-1.5L6 11'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11.5V6a1.5 1.5 0 0 1 3 0v5'/%3E%3Cpath d='M12 11V4.5a1.5 1.5 0 0 1 3 0V11'/%3E%3Cpath d='M15 11V6.5a1.5 1.5 0 0 1 3 0V14a6 6 0 0 1-6 6h-2a6 6 0 0 1-5.2-3l-1.6-3a1.5 1.5 0 0 1 2.6-1.5L6 11'/%3E%3C/svg%3E") center/contain no-repeat} .hero-draw:hover .big,.hero-draw:focus-visible .big{color:var(--white)} .hero-draw .big{transition:color var(--motion-fast) var(--ease-standard)} button.verdict:hover .u{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:rgba(var(--fg-rgb),0.4)} /* Phase 25: the feature quick-nav under the header. A row of pills for the key rooms (Tax, Find opportunities, The year in money, Family emergency page, How this works), horizontally scrollable on a phone, hidden when empty (during the wizard / before onboarding). */ #featureNavHost{flex:none;display:flex;gap:8px;padding:9px 22px;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid rgba(var(--fg-rgb),0.06);scrollbar-width:none;-ms-overflow-style:none} #featureNavHost::-webkit-scrollbar{display:none} #featureNavHost:empty{display:none} .featchip{flex:none;padding:6px 13px;font-size:12px;letter-spacing:0.03em;color:var(--body);border:1px solid rgba(var(--fg-rgb),0.16);border-radius:999px;background:none;cursor:pointer;white-space:nowrap;transition:border-color var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard)} .featchip:hover{border-color:rgba(var(--fg-rgb),0.42);color:var(--num)} @media(max-width:520px){ #featureNavHost{padding:8px 16px} } .menu .sep{height:1px;background:rgba(var(--fg-rgb),0.08);margin:4px 0} .lang-row{display:flex;align-items:center;justify-content:center;gap:2px;padding:4px 12px 6px;font-size:11px;color:var(--cap)} .lang-btn{width:auto!important;display:inline-block!important;padding:4px 8px!important;color:var(--cap)} .lang-btn.on{color:var(--num);font-weight:400} .alert-item{padding:13px 0;border-bottom:1px solid rgba(var(--fg-rgb),0.06)} .alert-item .top{display:flex;align-items:center;gap:9px} .alert-item .adot{width:7px;height:7px;border-radius:50%;flex:none} .alert-item .aname{font-size:13px;color:var(--num)} .alert-item .amsg{font-size:12px;color:var(--cap);line-height:1.55;margin-top:6px;padding-left:16px} .alert-item .dismiss{font-size:10px;color:var(--cap);letter-spacing:0.06em;margin-left:auto} .alert-item .dismiss:hover{color:var(--num)} .empty{font-size:12px;color:var(--cap);padding:22px 0;text-align:center} .statusline{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--cap);margin-top:14px} /* MODE SELECTOR */ .modeseg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} /* Phase 17: these are used as "modebtn plain", and button.plain (a more specific selector) was stripping their border, padding and font. Qualifying with button. raises specificity to win, restoring the segmented cells. */ button.modebtn{border:1px solid rgba(var(--fg-rgb),0.14);color:var(--body);padding:9px 4px;font-size:11px;letter-spacing:0.03em;text-align:center;border-radius:8px;background:none;cursor:pointer;transition:border-color var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard),background var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-out)} button.modebtn:hover{border-color:rgba(var(--fg-rgb),0.35);color:var(--num)} button.modebtn.on{background:rgba(var(--hi-rgb),0.06);color:var(--white);border-color:rgba(var(--fg-rgb),0.5)} .modewarn{display:flex;align-items:flex-start;gap:8px;font-size:11px;color:var(--body);margin-top:10px;line-height:1.5} .modewarn .d{width:6px;height:6px;border-radius:50%;background:var(--amber);margin-top:4px;flex:none} .strip-fail{font-size:10px;color:var(--cap);letter-spacing:0.04em;padding-left:22px} /* TICKER */ #ticker{flex:none;height:30px;display:flex;align-items:center;border-top:1px solid rgba(var(--fg-rgb),0.06);z-index:3;position:relative;background:var(--bg);overflow:hidden} .ticker-label{flex:none;font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--cap);padding:0 16px;border-right:1px solid rgba(var(--fg-rgb),0.08);height:100%;display:flex;align-items:center} .ticker-view{flex:1;overflow:hidden;position:relative;height:100%} .ticker-track{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;gap:26px;white-space:nowrap;padding-left:20px;will-change:transform} .tick{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--body)} .tick .nm{color:var(--cap);font-size:10px;letter-spacing:0.06em} .tick .nav{color:var(--num);font-variant-numeric:tabular-nums} .tick .chg{font-size:10px;color:var(--body);font-variant-numeric:tabular-nums} /* SKELETON */ @keyframes shimmer{0%{background-position:-220px 0}100%{background-position:260px 0}} .skel{display:inline-block;height:9px;border-radius:2px;background:linear-gradient(90deg,rgba(var(--fg-rgb),0.05) 25%,rgba(var(--fg-rgb),0.13) 37%,rgba(var(--fg-rgb),0.05) 63%);background-size:420px 100%;animation:shimmer 1.4s ease-in-out infinite;vertical-align:middle} /* AUTH */ .authform{display:flex;flex-direction:column;gap:16px;margin-top:10px;max-width:360px} .authfield{display:flex;flex-direction:column;gap:7px} .authfield label{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--cap)} /* Phase 17: comfortable, full-width auth fields and a full-width primary CTA, the first impression a new account sees. */ .authfield input{width:100%;text-align:left;padding:11px 12px} .authrow{display:flex;gap:10px;align-items:center;margin-top:4px} .authrow .btn{flex:1;text-align:center;padding:12px 15px;font-size:13px} .authlinks{display:flex;gap:18px;margin-top:6px;flex-wrap:wrap} .authlink{font-size:11px;color:var(--body);letter-spacing:0.03em;background:none;border:0;cursor:pointer;padding:0} .authlink:hover{color:var(--num)} .autherr{font-size:11px;color:var(--body);min-height:14px;display:flex;align-items:center;gap:8px} .consent-field{gap:8px} .consent-label{display:flex;align-items:flex-start;gap:10px;cursor:pointer} .consent-label input[type=checkbox]{margin-top:2px;flex:none;width:16px;height:16px;cursor:pointer} .consent-text{font-size:12px;color:var(--body);line-height:1.5} .consent-links{display:flex;gap:14px;padding-left:26px;flex-wrap:wrap} .consent-links a{font-size:11px;color:var(--cap);text-decoration:underline} .consent-links a:hover{color:var(--num)} .autherr .d{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none} .authok{font-size:11px;color:var(--body);min-height:14px;display:flex;align-items:center;gap:8px} .authok .d{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none} .authnote{font-size:11px;color:var(--cap);line-height:1.65} .acct-email{font-size:13px;color:var(--num);word-break:break-all} .danger{border-color:rgba(192,80,63,0.5)} .danger:hover{border-color:var(--red);color:var(--num)} .alert-date{font-size:9px;color:var(--cap);letter-spacing:0.06em;margin-left:8px} .hdot{width:7px;height:7px;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:7px;flex:none} /* ASSUMPTIONS: two grouped sections */ .sect-title.major{font-size:11px;color:var(--num);letter-spacing:0.2em;margin-top:26px;padding-top:18px;border-top:1px solid rgba(var(--fg-rgb),0.10)} .sect-title.major:first-child{border-top:0;padding-top:0;margin-top:6px} .badge-sourced{font-size:9px;letter-spacing:0.05em;color:var(--cap);border:1px solid rgba(var(--fg-rgb),0.14);border-radius:10px;padding:2px 7px;margin-left:8px;white-space:nowrap;vertical-align:middle} .reset-mini{font-size:10px;color:var(--cap);letter-spacing:0.03em;margin-left:8px;background:none;border:0;cursor:pointer;padding:0;vertical-align:middle} .reset-mini:hover{color:var(--num)} /* INCOME BLUEPRINT */ .ibp-input-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 0 20px;border-bottom:1px solid rgba(var(--fg-rgb),0.05)} .ibp-input-row label{font-size:12px;color:var(--body);letter-spacing:0.02em;max-width:280px;line-height:1.4} .ibp-big{font-size:36px;color:var(--white);font-weight:100;letter-spacing:-0.01em;margin-top:18px} .ibp-sub{font-size:11px;color:var(--cap);margin-top:6px;letter-spacing:0.03em} .ibp-grid{display:flex;gap:28px;flex-wrap:wrap;margin:18px 0 4px} .ibp-stat .v{font-size:19px;color:var(--num);font-weight:200} .ibp-stat .l{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--cap);margin-top:5px} /* Phase 17 (Claude Design income blueprint): the allocation as calm cards, not a cramped 7-column table. Name + amount on top, a dot-separated meta line, and the tax note as its own muted line. Naturally responsive. */ .alloc-list{margin-top:8px} .alloc-card{padding:11px 0;border-top:1px solid rgba(var(--fg-rgb),0.06)} .alloc-card:first-child{border-top:0} .alloc-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .alloc-name{font-size:13px;color:var(--num)} .alloc-amt{font-size:13px;color:var(--num);white-space:nowrap} .alloc-meta{margin-top:4px;font-size:11px;color:var(--body);letter-spacing:0.02em;line-height:1.5} .alloc-tax{margin-top:3px;font-size:11px;color:var(--cap);letter-spacing:0.02em;line-height:1.5} .alloc-card.ineligible{opacity:0.5} .cap-marker{color:var(--amber);font-size:9px;margin-left:4px} /* Phase 17 (Claude Design family emergency page): the fillable details as a grouped checklist. A small group header, then label + value-or-"+Add" rows, each an edit affordance, with a muted sub-line for extra context. */ .dossier-grp{font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--cap);margin:18px 0 2px} .dossier-field{display:flex;align-items:baseline;justify-content:space-between;gap:14px;width:100%;background:none;border:0;border-top:1px solid rgba(var(--fg-rgb),0.06);padding:11px 0;text-align:left;cursor:pointer;color:inherit;font:inherit;transition:border-color var(--motion-fast) var(--ease-standard)} .dossier-grp + .dossier-field,.dossier-grp + .dossier-note{border-top:0} .df-label{font-size:12px;color:var(--body);letter-spacing:0.01em} .dossier-field.empty .df-label{color:var(--cap)} .df-value{font-size:13px;color:var(--num);text-align:right} .dossier-field:hover .df-value{color:var(--white)} .df-add{font-size:11px;color:var(--body);border:1px dashed rgba(var(--fg-rgb),0.3);border-radius:6px;padding:4px 12px;white-space:nowrap;flex:0 0 auto;transition:border-color var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard)} .dossier-field:hover .df-add{border-color:rgba(var(--fg-rgb),0.5);color:var(--num)} .df-sub{font-size:10px;color:var(--cap);letter-spacing:0.02em;margin:-4px 0 4px} .dossier-note{display:block;width:100%;background:none;border:0;border-top:1px solid rgba(var(--fg-rgb),0.06);padding:11px 0;text-align:left;cursor:pointer;color:inherit;font:inherit} .df-para{font-size:13px;color:var(--num);line-height:1.55;text-align:left;white-space:pre-wrap} .ibp-ladder{display:flex;margin-top:10px;border-top:1px solid rgba(var(--fg-rgb),0.10);border-bottom:1px solid rgba(var(--fg-rgb),0.10)} .ibp-ladder-cell{flex:1;padding:12px 8px;text-align:center;border-left:1px solid rgba(var(--fg-rgb),0.06)} .ibp-ladder-cell:first-child{border-left:0} .ibp-ladder-cell .y{font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--cap)} .ibp-ladder-cell .p{font-size:15px;color:var(--num);margin-top:6px;font-weight:200} .ibp-today{margin-top:20px;padding:14px;border:1px solid rgba(var(--fg-rgb),0.08);border-radius:8px;font-size:13px} .ibp-foot{font-size:11px;color:var(--cap);line-height:1.6;margin-top:20px} /* ONBOARDING WIZARD */ /* Phase 17 (Claude Design onboarding wizard): ONE left-aligned content column. Every element, the step bar, the question, the sub-hint, the input and the actions, shares the SAME left edge and the SAME width so the flow reads as a single clean column instead of a ragged stack of centered blocks of different widths. --wiz-col is that shared width. */ #wizard{position:fixed;inset:0;z-index:20;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:left;overflow-y:auto;--wiz-col:min(440px,88vw)} .wiz-progress{width:var(--wiz-col);margin-bottom:44px} .wiz-steplabel{font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--cap);margin-bottom:9px} .wiz-progressbar{height:2px;background:rgba(var(--fg-rgb),0.12);border-radius:2px;overflow:hidden} .wiz-progressbar i{display:block;height:100%;background:var(--num);border-radius:2px;transition:width var(--motion-base) var(--ease-out)} .wiz-q{width:var(--wiz-col);font-size:clamp(24px,3.6vw,30px);color:var(--num);font-weight:200;line-height:1.3;letter-spacing:-0.01em} .wiz-sub{width:var(--wiz-col);font-size:13px;color:var(--cap);margin-top:10px;line-height:1.5} .wiz-inwrap{width:var(--wiz-col);display:flex;flex-direction:column;align-items:stretch;gap:16px;margin-top:30px} .wiz-inwrap.stack{gap:20px} .wiz-onefield{display:flex;align-items:center;gap:10px;width:100%;background:#0d0d0d;border:1px solid rgba(var(--fg-rgb),0.2);border-radius:8px;padding:14px 16px;transition:border-color var(--motion-fast) var(--ease-standard),box-shadow var(--motion-fast) var(--ease-standard)} .wiz-onefield:focus-within{border-color:rgba(var(--fg-rgb),0.5);box-shadow:0 0 0 3px rgba(var(--fg-rgb),0.07)} .wiz-flabel{font-size:11px;color:var(--cap);letter-spacing:0.04em;margin-bottom:8px;display:block} .wiz-rupee{font-size:clamp(20px,4.4vw,24px);color:var(--cap);font-weight:200;line-height:1} /* #wizard-scoped so it beats the global input[type=text] box (else the field would draw its own inner border inside the .wiz-onefield box). */ #wizard .wiz-input{background:none;border:0;border-radius:0;color:var(--white);font-size:clamp(22px,5vw,28px);font-weight:200;text-align:left;width:100%;flex:1;min-width:0;padding:0;font-variant-numeric:tabular-nums} #wizard .wiz-input:focus{outline:none;box-shadow:none;border:0} #wizard .wiz-input::placeholder{color:#3a3a3a} .wiz-actions{width:var(--wiz-col);margin-top:34px;display:flex;align-items:center;gap:24px} .wiz-next{border:1px solid rgba(var(--fg-rgb),0.3);color:var(--num);background:none;padding:12px 30px;font-size:13px;letter-spacing:0.04em;cursor:pointer;border-radius:6px} .wiz-next:hover{border-color:var(--num);background:rgba(var(--hi-rgb),0.04)} .wiz-link{font-size:12px;color:var(--body);background:none;border:0;cursor:pointer;letter-spacing:0.03em;padding:0} .wiz-link:hover{color:var(--num)} .wiz-skip{position:fixed;top:20px;right:18px;font-size:12px;color:var(--cap);background:none;border:0;cursor:pointer;letter-spacing:0.03em;z-index:21;padding:6px 10px} /* Phase 6 F4: type-it onboarding */ .wiz-typeit-link{margin-top:14px;align-self:flex-start} .wiz-typeit-box{display:flex;flex-direction:column;align-items:stretch;gap:14px;width:var(--wiz-col);margin-top:24px} .wiz-typeit-textarea{background:#0d0d0d;border:1px solid rgba(var(--fg-rgb),0.16);color:var(--white);font:inherit;font-size:14px;padding:12px 14px;width:100%;min-height:88px;border-radius:6px;resize:vertical;text-align:left;line-height:1.5} .wiz-typeit-textarea:focus{border-color:rgba(var(--fg-rgb),0.4)} .wiz-typeit-hint{font-size:12px;color:var(--cap);line-height:1.5;text-align:left} .wiz-typeit-consent{font-size:11px;color:var(--cap);line-height:1.5;text-align:left} .wiz-typeit-consentbtn{border:1px solid rgba(var(--fg-rgb),0.3);color:var(--num);background:none;padding:11px 22px;font-size:13px;letter-spacing:0.04em;cursor:pointer;border-radius:6px;align-self:flex-start} .wiz-typeit-consentbtn:disabled{opacity:0.5;cursor:default} .wiz-typeit-status{font-size:12px;color:var(--cap)} .wiz-typeit-back{align-self:flex-start} /* Phase 7 F7: the fine-tune expander, closed by default */ .fine-tune{margin-top:18px;border-top:1px solid rgba(var(--fg-rgb),0.15);padding-top:4px} .fine-tune summary{cursor:pointer;padding:10px 0;font-size:13px;color:var(--cap);list-style:none} .fine-tune summary::-webkit-details-marker{display:none} .fine-tune summary:before{content:"+ ";color:var(--num)} .fine-tune[open] summary:before{content:"- "} /* Phase 7 F3: two-door onboarding choice, stacked in the same column */ .wiz-doors{display:flex;flex-direction:column;gap:14px;margin-top:30px;width:var(--wiz-col)} .wiz-door-btn{border:1px solid rgba(var(--fg-rgb),0.2);background:none;color:var(--num);padding:20px 18px;border-radius:8px;cursor:pointer;text-align:left} .wiz-door-btn:hover{border-color:rgba(var(--fg-rgb),0.5);background:rgba(var(--hi-rgb),0.02)} .wiz-door-title{font-size:16px;color:var(--white);margin-bottom:6px} .wiz-door-sub{font-size:13px;color:var(--cap);line-height:1.5} /* Phase 4 F4: wizard yes/no step, left-aligned in the column */ .wiz-yesno{display:flex;gap:14px;justify-content:flex-start;margin-top:2px;width:var(--wiz-col)} .wiz-yn-btn{flex:1 1 0;border:1px solid rgba(var(--fg-rgb),0.3);color:var(--num);background:none;padding:16px 24px;font-size:16px;letter-spacing:0.04em;cursor:pointer;border-radius:8px;text-align:center} .wiz-yn-btn:hover{border-color:var(--num);background:rgba(var(--hi-rgb),0.04)} .wiz-yn-btn.on{border-color:var(--num);background:rgba(var(--hi-rgb),0.08);color:var(--white)} .wiz-skip:hover{color:var(--num)} /* EXAMPLE BANNER */ #offlineBannerHost:empty{display:none} .offlinebanner{background:rgba(var(--fg-rgb),0.06);border-bottom:1px solid var(--line);color:var(--cap);font-size:12px;padding:7px 22px;text-align:center;position:relative;z-index:4} #installHintHost:empty{display:none} .installhint{background:rgba(63,178,127,0.08);border-bottom:1px solid rgba(63,178,127,0.25);color:var(--num);font-size:13px;padding:9px 22px;display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:4} .installhint button{border:1px solid rgba(var(--fg-rgb),0.3);color:var(--num);background:none;padding:6px 14px;font-size:11px;border-radius:6px;cursor:pointer;letter-spacing:0.04em} .installhint button.primary{background:var(--num);color:var(--bg);border-color:var(--num)} .installhint button:hover{border-color:var(--num)} /* Phase 5 F2: quiet, one-time milestone-crossed banner. Deliberately as restrained as the example-data banner, no colour, no celebration motion. */ .milestone-banner{background:rgba(var(--hi-rgb),0.03);border-bottom:1px solid rgba(var(--fg-rgb),0.10);color:var(--num);font-size:13px;padding:9px 22px;display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:4} .milestone-banner button{border:0;background:none;color:var(--cap);font-size:11px;cursor:pointer;letter-spacing:0.04em} .milestone-banner button:hover{color:var(--num)} /* Phase 13 F1: withdrawal ("after the date") mode. */ .wd-offer{max-width:620px;margin:0 auto 20px;padding:16px 20px;border:1px solid rgba(63,178,127,0.28);border-radius:8px;background:rgba(63,178,127,0.05);text-align:left} .wd-offer-title{color:var(--num);font-size:14px;letter-spacing:0.03em;margin-bottom:6px} .wd-offer-body{color:var(--body);font-size:13px;line-height:1.65} .wd-offer-actions{display:flex;align-items:center;gap:16px;margin-top:14px;flex-wrap:wrap} .wd-head{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:620px;margin:0 auto 14px;flex-wrap:wrap} .wd-badge{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--green);border:1px solid rgba(63,178,127,0.34);border-radius:6px;padding:3px 9px} .wd-worst{max-width:560px;margin-left:auto;margin-right:auto;line-height:1.6} .wd-window{max-width:560px;margin:12px auto 0;color:var(--body);line-height:1.6} .wd-window:hover{color:var(--num)} .wd-caveat{max-width:560px;margin-left:auto;margin-right:auto;line-height:1.6;color:var(--cap)} .wd-goal-ok{max-width:560px;margin:12px auto 0;font-size:13px;line-height:1.6;color:var(--green)} .wd-goal-risk{max-width:560px;margin:12px auto 0;font-size:13px;line-height:1.6;color:var(--amber)} /* Phase 13 F2: three-bucket cards in the withdrawal advice column. */ .bucket-card{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-top:10px;background:rgba(var(--hi-rgb),0.015)} .bucket-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .bucket-name{font-size:13px;color:var(--num);letter-spacing:0.03em} .bucket-have{font-size:14px;color:var(--white)} .bucket-meta{font-size:11px;color:var(--cap);margin-top:3px;letter-spacing:0.02em} .bucket-bar{height:3px;background:rgba(var(--fg-rgb),0.10);border-radius:2px;margin-top:9px;overflow:hidden} .bucket-bar i{display:block;height:100%;background:var(--green);border-radius:2px} .bucket-bar i.short{background:var(--amber)} .bucket-short{font-size:11px;color:var(--amber);margin-top:8px;line-height:1.55} .bucket-full{font-size:11px;color:var(--green);margin-top:8px} /* Phase 5 F1: the monthly letter's in-app card, top of the dashboard. */ .monthcard{max-width:920px;margin:18px auto 0;padding:16px 22px;border:1px solid rgba(var(--fg-rgb),0.12);border-radius:8px;background:rgba(var(--hi-rgb),0.02);position:relative;z-index:4} .monthcard .mc-label{font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--cap);font-weight:400;margin-bottom:8px} .monthcard .mc-line{font-size:13px;color:var(--num);line-height:1.6;margin-bottom:4px} .monthcard .mc-action{font-size:13px;color:var(--num);line-height:1.6} .monthcard .mc-ai-disclaimer{font-size:10px;color:var(--cap);letter-spacing:0.02em;margin-top:6px;line-height:1.5} .monthcard .mc-foot{display:flex;align-items:center;gap:16px;margin-top:12px} .monthcard .mc-toggle{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--cap)} .monthcard .mc-dismiss{margin-left:auto;border:0;background:none;color:var(--cap);font-size:11px;cursor:pointer;letter-spacing:0.04em} .monthcard .mc-dismiss:hover{color:var(--num)} /* Phase 11 F2: the family emergency dossier. On screen it is just another dark panel (the app's own default styling already applies, nothing extra needed); this block only covers what changes for print: hide every other on-screen element, force black-on-white for the page itself, and drop interactive controls (the panel's own close button, every edit/print button) since a printed page has nothing to click. */ @media print{ /* Reset the app's dark surfaces to white and drop everything that is not the family sheet, so the print is not padded with black overflow pages (the dark body background and the fixed top/bottom bars were printing as solid black pages after page 1). */ html, body{background:#fff !important} #bg, #heroGlow, #bar, #ticker, #featureNavHost, #whatifScrim, #whatifSheet{display:none !important} body > *:not(#panelRoot){display:none !important} body *{visibility:hidden !important} #panelRoot{position:static !important;height:auto !important} #panelRoot, #panelRoot .dossier-panel, #panelRoot .dossier-panel *{visibility:visible !important} /* Flow the drawer normally and remove its fixed height / scroll so the full sheet prints (not just the first viewport) and no black overflow remains. */ #panelRoot .dossier-panel{position:static !important;left:auto;top:auto;width:100%;height:auto !important;max-height:none !important;overflow:visible !important;background:#fff !important;box-shadow:none !important;transform:none !important} #panelRoot .dossier-panel .panel-body{max-height:none !important;overflow:visible !important;height:auto !important} .dossier-panel .panel-head .iconbtn, .dossier-panel button:not(.dossier-field){display:none !important} /* Phase 17: the checklist rows are buttons so they stay keyboard-editable on screen; in print keep the FILLED ones (they carry the values the family needs) but drop the empty to-dos and the "+ Add" chips, which are only meaningful to the owner while filling the page in. */ .dossier-panel .dossier-field{display:flex !important} .dossier-panel .dossier-note{display:block !important} .dossier-panel .dossier-field.empty, .dossier-panel .df-add{display:none !important} .dossier-panel .panel-head h2{color:#000 !important} .dossier-panel, .dossier-panel *{color:#000 !important;background:#fff !important;border-color:#000 !important} .dossier-panel .sect-title{color:#000 !important;border-bottom:1px solid #000;padding-bottom:2px} } /* Pre-auth: a signed-out visitor is in the app only to complete sign-in on top of a blank branded background (auth is entered from the welcome page, there is no in-app account gate screen). Hide the dashboard entirely so it never shows, not even dimmed behind the sign-in drawer. */ body.preauth #grid, body.preauth #ticker, body.preauth #legalFooter{visibility:hidden !important} /* SIGN-IN NUDGE TOAST */ .toast{position:fixed;left:50%;bottom:48px;transform:translateX(-50%);background:#141414;border:1px solid rgba(var(--fg-rgb),0.16);border-radius:10px;padding:13px 18px;display:flex;align-items:center;gap:16px;font-size:13px;color:var(--num);z-index:16;width:min(440px,92vw);box-shadow:0 8px 30px rgba(0,0,0,0.55)} .toast-msg{flex:1 1 auto;min-width:0;line-height:1.4} .toast-btn{border:1px solid var(--white);background:var(--white);color:#000;padding:6px 14px;border-radius:6px;font-size:11px;cursor:pointer;white-space:nowrap} .toast-x{background:none;border:0;color:var(--cap);font-size:11px;cursor:pointer;white-space:nowrap} .toast-x:hover{color:var(--num)} /* RESPONSIVE: below 900px reflow to one vertical column, vertical scroll only */ @media (max-width:900px){ html,body{height:auto} body{overflow-x:hidden;overflow-y:auto;min-height:100vh;min-height:100dvh;display:block} #bar{padding:0 16px;position:sticky;top:0;background:var(--bg);z-index:5} #heroGlow{width:560px;height:560px;top:30%} #grid{display:flex;flex-direction:column;grid-template-columns:none;grid-template-rows:none;grid-template-areas:none;min-height:0} #hero{order:1;padding:24px 20px 22px} /* Owner: mobile dashboard felt cramped. More vertical room between the three stacked zones and a hairline to separate them (the desktop column borders are dropped in the stack). */ #actions{order:2;overflow:visible;padding:22px 20px 26px;gap:18px;border-left:0;border-top:1px solid rgba(var(--fg-rgb),0.08)} #ladder{order:3;overflow:visible;padding:24px 20px 34px;border-right:0;border-top:1px solid rgba(var(--fg-rgb),0.08)} /* the month banner aligns with the column padding instead of full bleed */ .monthcard{margin:14px 16px 0;padding:14px 16px} .hero-draw{gap:8px} .hero-draw .rupee{font-size:clamp(18px,5vw,24px)} .hero-draw .big{font-size:clamp(32px,9.6vw,54px)} .hero-draw .rest{font-size:clamp(14px,3.8vw,18px)} .progwrap{width:min(460px,86vw)} .panel{width:100%;max-width:100%;border-left:0} #ticker{position:sticky;bottom:0} } @media (max-width:520px){ /* Phase 17 (Claude Design holdings): the editable holdings table reflows into one card per holding, each field a labelled row, instead of the old sideways-scrolling seven-column grid. Pure layout, the inputs and their handlers are untouched. */ table.holdings,table.holdings tbody{display:block;width:100%} table.holdings thead{display:none} table.holdings tr{display:block;border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-top:10px;position:relative;background:rgba(var(--hi-rgb),0.012)} table.holdings td{display:block;padding:6px 0;border:0} table.holdings td[data-label]::before{content:attr(data-label);display:block;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--cap);margin-bottom:4px} table.holdings td[data-col=name]{padding:0 30px 8px 0} table.holdings td[data-col=name] input{width:100%;font-size:14px} table.holdings td input{width:100%;text-align:left} table.holdings td select{width:100%} table.holdings td.rmcol{position:absolute;top:10px;right:8px;padding:0} table.holdings .autoval{justify-content:flex-start} table.holdings .navasof,table.holdings .navstale{text-align:left} /* total row stays a compact summary, not a card */ table.holdings tr.totrow{border:0;border-top:1px solid rgba(var(--fg-rgb),0.14);border-radius:0;padding:12px 0 0;background:none;display:flex;gap:20px;flex-wrap:wrap;align-items:baseline} table.holdings tr.totrow td{padding:0} table.holdings tr.totrow td:empty{display:none} table.holdings tr.totrow td[data-label]::before{display:inline;margin:0 5px 0 0} .ibp-ladder{flex-wrap:wrap} .ibp-ladder-cell{min-width:33%} /* Phase 17 (Claude Design onboarding wizard): the primary Next sits full-width low in thumb reach on phone, the quiet Back beneath it, both inside the same left-aligned content column. */ .wiz-actions{flex-direction:column-reverse;align-items:stretch;gap:14px} .wiz-next{width:100%} .wiz-actions .wiz-link{align-self:center} } /* Phase 20 F2: the admin room. A full-screen overlay above everything else (same fixed/inset pattern as #wizard, one z-index higher so it can never be hidden behind anything already on screen), built entirely from existing tokens/classes (.label, .btn, .fieldrow, button.modebtn for the tabs) plus a small, self-contained table style that mirrors table.holdings' 390px card-stack behaviour without inheriting its editable-input styling, since every admin table is read-only. */ #adminPanel{position:fixed;inset:0;z-index:30;background:var(--bg);overflow-y:auto;padding:28px 24px 60px;text-align:left} .admin-head{display:flex;align-items:center;gap:16px;margin-bottom:18px} .admin-head h1{font-size:13px;letter-spacing:0.18em;text-transform:uppercase;color:var(--num);font-weight:400;margin:0} .admin-range{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px} .admin-range input[type=date]{background:none;border:1px solid rgba(var(--fg-rgb),0.2);color:var(--num);padding:8px 10px;border-radius:6px;font-size:12px} .admin-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px} .admin-tabs button.modebtn{padding:8px 16px;border-radius:20px} .admin-section{margin-bottom:30px} .admin-section-head{display:flex;align-items:center;gap:12px;margin-bottom:10px} .admin-stat{font-size:26px;color:var(--white);font-weight:200;font-variant-numeric:tabular-nums} table.admin-table{width:100%;border-collapse:collapse} table.admin-table th{font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--cap);text-align:left;font-weight:400;padding:7px 10px} table.admin-table td{padding:6px 10px;border-top:1px solid rgba(var(--fg-rgb),0.06);font-size:12px;color:var(--num)} .admin-tablewrap{overflow-x:auto} @media (max-width:900px){ #adminPanel{padding:20px 16px 60px} table.admin-table,table.admin-table tbody{display:block;width:100%} table.admin-table thead{display:none} table.admin-table tr{display:block;border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin-top:10px} table.admin-table td{display:block;padding:5px 0;border:0} table.admin-table td[data-label]::before{content:attr(data-label);display:block;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--cap);margin-bottom:2px} } /* Phase 21 F1/F2: the permanent header help control. Same .iconbtn base as bell/account/menu, widened into a horizontal pill so the icon sits next to a VISIBLE text label (F2's simplicity rule: no icon-only controls without a text label). */ .iconbtn-labeled{width:auto;padding:0 10px;gap:6px} .iconbtn-labeled .iconbtn-label{font-size:11px;letter-spacing:0.03em;white-space:nowrap} /* Phase 21 F1: the guided tour overlay. Two layers do the "dim everything except one element" trick with no clip-path and no per-step DOM diffing: .tour-backdrop is a transparent full-screen click-catcher (blocks every interaction with the dashboard underneath while the tour is open, so a spotlighted control can never be accidentally activated through the overlay); .tour-spot is a small box positioned exactly over the current target with an enormous box-shadow, which paints the entire dimmed surround in one paint, cut out around the target's rounded rect. Moving between steps is a transform/position transition only (collapses to instant under the global prefers-reduced-motion rule already in this file, nothing tour-specific to guard here). */ #tourOverlay{position:fixed;inset:0;z-index:24} .tour-backdrop{position:fixed;inset:0;background:transparent} .tour-spot{ position:fixed;border-radius:8px;box-shadow:0 0 0 9999px rgba(5,5,5,0.86); pointer-events:none; transition:top var(--motion-base) var(--ease-out),left var(--motion-base) var(--ease-out), width var(--motion-base) var(--ease-out),height var(--motion-base) var(--ease-out); } .tour-card{ position:fixed;z-index:26;width:min(320px,88vw);background:#0c0c0c; border:1px solid rgba(var(--fg-rgb),0.14);border-radius:10px;padding:18px; box-shadow:0 8px 30px rgba(0,0,0,0.55);color:var(--num); max-height:min(420px,80vh);overflow-y:auto; transition:top var(--motion-base) var(--ease-out),left var(--motion-base) var(--ease-out); } .tour-skip{position:absolute;top:10px;right:10px;font-size:11px;color:var(--cap);background:none;border:0;cursor:pointer;letter-spacing:0.03em;padding:8px} .tour-skip:hover{color:var(--num)} .tour-stepcount{font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--cap);margin:0 40px 10px 0} .tour-text{font-size:13px;line-height:1.5;color:var(--num);margin-bottom:14px} .tour-dots{display:flex;gap:6px;margin-bottom:14px} .tour-dot{width:6px;height:6px;border-radius:50%;background:rgba(var(--fg-rgb),0.2)} .tour-dot.on{background:var(--num)} .tour-nav{display:flex;gap:10px;align-items:center} .tour-nav .btn{flex:0 0 auto} .tour-nav .spacer{flex:1} @media (max-width:520px){ /* Phase 21 F1: on phone the card is always a bottom sheet, never positioned near the target, so it can never render off-screen; the target itself is scrolled into view before the spot is placed (startTour/showTourStep in app.js). Back/Next are full 44px-minimum touch targets, thumb-reachable at the foot of the screen. */ .tour-card{position:fixed;left:0;right:0;bottom:0;top:auto !important;width:auto;max-width:100%;max-height:78vh;border-radius:14px 14px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom))} .tour-nav .btn{min-height:44px;min-width:44px;flex:1 1 auto;text-align:center} .tour-skip{min-height:44px;min-width:44px} }