/* owner 2026-10-02: app base text 18px (rem sizes scale from here; px rules unchanged) */ html{font-size:112.5%} :root{ /* Brand palette — matches the KP Stellar Astro logo (navy/gold/vermillion). */ --bg:#f7f5f0; --card:#ffffff; --line:#e5e1d6; --line-strong:#cbc5b4; --primary:#2e3192; --primary-dark:#23267a; --primary-soft:#ecebf8; --accent:#a8401a; --gold:#d8a53a; --blue:var(--primary); --text:#1b1d33; --muted:#525770; --heading:#1e2057; /* --accent's own hue (coral/vermillion), ink darkened for AA small text on --card (C19: "hue kept, ink darkened" -- NOT a hue swap to navy). --accent itself measures 4.11:1 light / 2.88:1 dark on --card, under the 4.5:1 AA body-text floor; this is 5.16:1 light. Shared with F2's own accent-hued small text (coordinate token, not F3b-only). */ --green:#1a9c4c; --amber:#e0a017; --red:#e0392b; --shadow:0 1px 2px rgba(23,32,79,.08), 0 2px 8px rgba(23,32,79,.06); --shadow-md:0 4px 16px rgba(20,22,60,.10); --shadow-lg:0 10px 34px rgba(20,22,60,.14); /* Home page + Admin Panel tiles. Previously a saturated indigo wash with a heavy border, which made twelve tiles read as twelve competing objects rather than one list. They now sit as plain cards on the page tint; the page background (--bg) is what separates them, not a fill of their own. */ --tile-tint:var(--card); --tile-line:var(--line); --sunk-soft:#efece4; /* Buttons are a soft indigo wash rather than a solid navy fill: a page with four solid dark buttons reads as four heavy blocks whatever their size. The trade-off is that .btn no longer shouts, so .abtn.solid stays solid and remains the one treatment that marks a genuine primary action. */ --btn-soft-line:rgba(46,49,146,.22); --btn-soft-hover:#e1e0f3; --faint-text:#62677f; /* Redesign (2026-09): a warm paper tint for the one surface on a screen that is "the thing you are reading" (active nav item, feature tiles, the ask box, the chart), and a dark gold that stays legible as TEXT on it (--gold itself is a fill colour and fails as small text on light). Three type roles: serif for titles and key statements, sans for body, mono for KP notation, birth details, periods and nav numbers. */ --sheet:#fcfaf4; --gold-ink:#775400; --primary-hover:#23267a; --on-primary:#ffffff; /* Admin stat tiles in the top bar: a translucent card over the page. */ --stat-fill:color-mix(in srgb, var(--card) 72%, var(--bg)); --serif:"Fraunces", "Iowan Old Style", "Sitka Display", Georgia, ui-serif, serif; --sans:"Source Sans 3", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Noto Sans", Helvetica, Arial, sans-serif; --mono:ui-monospace,"Cascadia Mono","Segoe UI Mono",Consolas,monospace; /* Small-badge good/bad TEXT. Deliberately NOT --green/--red: those are dual-role (also solid fills carrying white text, e.g. .tbanner/.lwopen), so they cannot be lightened for dark without wrecking white-on-fill. Measured as small text on --sunk-soft: --green/--red give 3.18/3.92 in light and 2.95/2.39 in dark, all under the 4.5:1 AA floor. These pass in both (4.85/4.86 light, 6.01/4.59 dark). */ --dig-good:#1c7a45; --dig-bad:#b3302f; /* U2B F2 parity spec section 2.1: the mockup's own state colours (strong/likely/possible/none), hue kept from mock.css, ink darkened to pass AA on the soft chip background (precedence rule 6). F3b reuses --accent-ink for small accent-coloured text that fails AA (e.g. .tl-now's label) -- same token, same values, added once here so neither unit's merge is a no-op fight. */ --tw-strong:#1c7a45; --tw-strong-soft:#e3f3ea; --tw-likely:#3149b8; --tw-likely-soft:#e9edfb; --tw-possible:#8a5a00; --tw-possible-soft:#fbf0d9; --tw-none:#5b6079; --tw-none-soft:#eeeef3; --tw-on-bar:#ffffff; --accent-ink:#a8401a; /* R3 ruling (architect, F2-U review): --muted on --sunk-soft fails AA for .tl-empty/.jc-why-sub (4.497, just under 4.5) -- F2-only token, hue/saturation kept, lightness 46.1->47.5. Dark already passes (5.35) so it just reuses --muted there, unchanged. */ --jc-muted-sunk:#525770; /* R3 ruling: .jc-btn.solid in dark mode (white on --primary #6d87ff) measures 3.20, under AA -- a darker, same-hue fill restores it (5.32) without touching --primary itself or the app-wide .abtn.solid pair that shares it (flagged for F4, not changed here). Light keeps --primary unchanged (already passing). */ --jc-btn-solid-bg:var(--primary); /* ONE height for every interactive control -- inputs, selects, .btn, .abtn, .row button, tabs. They previously ran 30/32/36px, which is invisible on a phone (where .btn goes full width and everything stacks) and obvious on desktop, where a toolbar puts three of them side by side. */ --ctl-h:36px; } /* Dark mode. Safe to do broadly because the whole page already reads colors through these variables (see the block above) rather than hardcoded hex -- flipping the palette here recolors the large majority of the app for free. A genuinely exhaustive audit of every literal hex value on a page this size was not attempted; this covers the systemic surface (backgrounds/text/borders/cards) and was checked visually across the main panels, not every corner. Respects the OS preference by default; an explicit toggle (see setColorScheme() in app.js) can override it either way via documentElement[data-theme], which wins over the media query. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ /* Medium dark gray, not near-black -- reported live that the first pass (#12141c/#181a22) read as "too dark". */ --bg:#0e1024; --card:#1a1d3d; --line:#2c3063; --line-strong:#454a8e; /* --primary (#1B2A6B) is a dark navy meant for TEXT on a light page -- .btn and most .abtn/.homebtn-style buttons read it as their text color, so left alone it became dark-navy-on-dark-gray: unreadable (reported live). It ALSO doubles as a solid FILL with white text in several places (.abtn.solid, active tabs, chat bubbles, tab chips) -- one variable serving both roles means it can't go as pale as a pure text color would want without white-on-fill contrast suffering. #6d87ff is the middle ground: clearly readable as text against --bg/--card, and still dark/saturated enough that white text on a --primary-filled button stays legible. --accent/--gold are bright/ warm enough already to stay legible on dark and were left untouched. */ --primary:#a3acff; --primary-dark:#c3c9ff; --accent:#ff9b73; --gold:#f0c96a; --on-primary:#10122b; --primary-soft:#272b61; --text:#eeecf8; --muted:#b6b8d8; --heading:#e4e2ff; --tile-tint:var(--card); --tile-line:var(--line); --sunk-soft:#161936; --btn-soft-line:rgba(255,255,255,.2); --btn-soft-hover:#2f3470; --faint-text:#a2a5c8; --sheet:#1f1e36; --gold-ink:#f0c96a; --primary-hover:#b8bfff; --dig-good:#5fd394; --dig-bad:#ff8f86; --tw-strong:#5fd394; --tw-strong-soft:#15311f; --tw-likely:#a4b5ff; --tw-likely-soft:#232a5a; --tw-possible:#f0c96a; --tw-possible-soft:#332c1a; --tw-none:#b0b3d1; --tw-none-soft:#22254a; --tw-on-bar:#0e1024; --accent-ink:#ff9b73; --jc-muted-sunk:var(--muted); --jc-btn-solid-bg:var(--primary); --stat-fill:color-mix(in srgb, var(--card) 60%, var(--bg)); --shadow:0 1px 2px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3); --shadow-md:0 4px 16px rgba(0,0,0,.4); --shadow-lg:0 10px 34px rgba(0,0,0,.45); } } :root[data-theme="dark"]{ --bg:#0e1024; --card:#1a1d3d; --line:#2c3063; --line-strong:#454a8e; --primary:#a3acff; --primary-dark:#c3c9ff; --accent:#ff9b73; --gold:#f0c96a; --on-primary:#10122b; --primary-soft:#272b61; --text:#eeecf8; --muted:#b6b8d8; --heading:#e4e2ff; --tile-tint:var(--card); --tile-line:var(--line); --sunk-soft:#161936; --btn-soft-line:rgba(255,255,255,.2); --btn-soft-hover:#2f3470; --faint-text:#a2a5c8; --sheet:#1f1e36; --gold-ink:#f0c96a; --primary-hover:#b8bfff; --dig-good:#5fd394; --dig-bad:#ff8f86; --tw-strong:#5fd394; --tw-strong-soft:#15311f; --tw-likely:#a4b5ff; --tw-likely-soft:#232a5a; --tw-possible:#f0c96a; --tw-possible-soft:#332c1a; --tw-none:#b0b3d1; --tw-none-soft:#22254a; --tw-on-bar:#0e1024; --accent-ink:#ff9b73; --jc-muted-sunk:var(--muted); --jc-btn-solid-bg:var(--primary); --stat-fill:color-mix(in srgb, var(--card) 60%, var(--bg)); --shadow:0 1px 2px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3); --shadow-md:0 4px 16px rgba(0,0,0,.4); --shadow-lg:0 10px 34px rgba(0,0,0,.45); } /* --- Window Backtest panel --------------------------------------------- These live here, not in site.css: index.html does not load site.css at all (only panchang.html does), so styles put there never reach the app and the chart rendered as unstyled black bars. */ .btchart{ display:block; margin:4px 0 2px; max-width:100%; } .btgrid{ stroke:var(--line); stroke-width:1; } .btgrid.mid{ stroke:var(--muted); stroke-dasharray:5 4; opacity:.75; } .btaxis{ fill:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; } .btaxis.mid{ font-size:10px; letter-spacing:.04em; } .btlbl{ fill:var(--text); font-size:12px; } .btlbl.dim{ fill:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; } .btlbl.warn{ fill:var(--amber); } /* Colour encodes the EDGE, not raw accuracy — see btChart() in app.js. */ .btcol.up{ fill:var(--green); } .btcol.down{ fill:var(--red); } .btcol.flat{ fill:var(--primary); opacity:.55; } .btcol.ctrl{ fill:var(--line-strong); } .btedge{ font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; } .btedge.up{ fill:var(--green); } .btedge.down{ fill:var(--red); } .btedge.flat{ fill:var(--muted); } .btlegend{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; font-size:.8rem; color:var(--muted); margin:10px 0 6px; } .btlegend .sw{ display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px; } .btlegend .sw.up{ background:var(--green); } .btlegend .sw.down{ background:var(--red); } .btlegend .sw.ctrl{ background:var(--line-strong); } .btlegend-note{ flex-basis:100%; font-style:italic; opacity:.85; } .btbar{ display:inline-block; width:84px; height:9px; border-radius:5px; background:var(--line); overflow:hidden; vertical-align:middle; margin-right:7px; } .btbar-fill{ height:100%; background:var(--primary); } .bt-head{ display:flex; align-items:baseline; gap:12px; margin:10px 0; } .bt-big{ font-size:1.9rem; font-weight:700; font-variant-numeric:tabular-nums; color:var(--heading); } #panel-backtest table td.n, #panel-backtest table th.n{ text-align:right; font-variant-numeric:tabular-nums; } #panel-backtest tr.dim td{ opacity:.62; } #panel-backtest td.pos{ color:var(--green); font-weight:600; } #panel-backtest td.neg{ color:var(--red); font-weight:600; } /* Live "today" windows. State is carried by a colour band AND a word, never colour alone — a red/green-only cue is unreadable to a colour-blind user and ambiguous on a projector. */ /* All-instruments overview: a heading, then its table, repeated. */ .lwsec{ margin:18px 0 0; padding-top:14px; border-top:2px solid var(--line-strong); } .lwsec:first-of-type{ border-top:none; } h4.lwhead{ margin:0 0 8px; font-size:1rem; display:flex; align-items:center; gap:8px; } .lwopen{ font-size:.64rem; font-weight:700; letter-spacing:.08em; color:#fff; background:var(--green); border-radius:20px; padding:2px 8px; } .lwtot{ display:flex; gap:20px; flex-wrap:wrap; align-items:center; padding:12px 14px; border:1px solid var(--line-strong); border-radius:8px; background:var(--primary-soft); margin:10px 0; font-size:.88rem; } .lwtot b{ font-variant-numeric:tabular-nums; } .lwtot .lwtotcall{ margin-left:auto; } @media (max-width:640px){ .lwtot .lwtotcall{ margin-left:0; } } /* Small INLINE button. The page's .btn is full-width by design, so it cannot sit beside a sentence — using it here would have stretched a "Save as PDF" control across the whole panel. */ .lwbtn{ display:inline-block; width:auto; margin:0 0 0 8px; padding:4px 12px; font-size:.78rem; font-weight:600; color:var(--primary); background:var(--primary-soft); border:1px solid var(--line-strong); border-radius:6px; cursor:pointer; } .lwbtn:hover{ background:var(--card); border-color:var(--primary); } /* Date separator in the upcoming table — turns a long list into a calendar. */ tr.lwday td{ background:var(--primary-soft) !important; font-weight:700; font-size:.8rem; letter-spacing:.03em; border-radius:6px; padding:6px 10px; border-left:none !important; } /* Is the chart time behind these boundaries a fact or a guess? Measured: a 30-minute shift in an assumed time relocates every window, zero overlap. That has to be visible where the times are read, not buried in a note. */ .lwtb{ font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-radius:20px; padding:1px 7px; margin-left:6px; white-space:nowrap; cursor:help; } .lwtb.ok{ color:#0f7a3d; background:#e6f6ec; border:1px solid #b6e3c6; } .lwtb.warn{ color:#8a5d00; background:var(--card)6e3; border:1px solid #f0d79a; } .lwwrap{ overflow-x:auto; } table.lwtable{ width:100%; border-collapse:separate; border-spacing:0 6px; } table.lwtable th{ text-align:left; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:#6a7086; padding:0 10px 4px; font-weight:700; } table.lwtable td{ padding:10px; background:var(--card); vertical-align:top; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); } table.lwtable td:first-child{ border-left:5px solid #b9bed0; border-top-left-radius:8px; border-bottom-left-radius:8px; } table.lwtable td:last-child{ border-right:1px solid var(--line-strong); border-top-right-radius:8px; border-bottom-right-radius:8px; } .lwrow .lwtime{ font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; } .lwrow .lwtier{ font-weight:700; } .lwrow .lwwhy{ font-size:.82rem; color:#5a5f70; margin-top:3px; } .lwrow .lwmove{ font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; } .lwrow .lwstate{ font-weight:700; white-space:nowrap; } /* P&L colour follows profit and loss, which is not always the row's state: an amber "too early" window still has a live number. */ /* Entry/exit instructions. The verb is what the eye should land on, so it carries the weight and the colour; the time sits beside it in the same tabular figures used everywhere else in this panel. */ .lwact{ white-space:nowrap; line-height:1.5; } .lwact b{ display:inline-block; min-width:6.4em; font-size:.74rem; letter-spacing:.04em; } .lwact b.bu{ color:var(--green); } .lwact b.sh{ color:var(--red); } .lwact b.ex{ color:#5a5f70; } table.lwtable .lwmove.up{ color:var(--green); } table.lwtable .lwmove.down{ color:var(--red); } /* Legend: the same swatch shapes the rows use, so the key is literally the thing being keyed rather than an approximation of it. */ .lwkey{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; padding:10px 12px; border:1px solid var(--line-strong); border-radius:8px; background:#fafbfd; margin:10px 0; font-size:.84rem; } .lwkey span{ display:flex; gap:7px; align-items:center; } .lwkey i{ width:13px; height:13px; border-radius:3px; display:inline-block; border-left:5px solid currentColor; background:currentColor; opacity:.9; } .lwrow.on_track td{ background:#f2fbf5; } .lwrow.on_track td:first-child{ border-left-color:var(--green); } .lwrow.on_track .lwstate, .lwrow.on_track .lwmove{ color:var(--green); } .lwrow.against td{ background:#fdf3f2; } .lwrow.against td:first-child{ border-left-color:var(--red); } .lwrow.against .lwstate, .lwrow.against .lwmove{ color:var(--red); } .lwrow.too_early td{ background:var(--card)af0; } .lwrow.too_early td:first-child{ border-left-color:var(--amber); } .lwrow.too_early .lwstate{ color:var(--amber); } /* Flat is grey, not amber: amber says "wait", and a closed window is done. */ .lwrow.neutral td, .lwrow.no_data td, .lwrow.flat td{ background:#fafbfd; } .lwrow.upcoming .lwstate, .lwrow.neutral .lwstate, .lwrow.no_data .lwstate, .lwrow.flat .lwstate{ color:#767c90; } /* An open window is still provisional; the hatch says so without words. */ .lwrow.live td{ background-image:repeating-linear-gradient(135deg, rgba(0,0,0,.028) 0 8px, transparent 8px 16px); } .lwlive{ font-size:.68rem; font-weight:700; color:var(--primary); background:var(--primary-soft); border-radius:20px; padding:1px 8px; margin-left:6px; } /* A finished window says so. Without it the only way to tell a settled verdict from a running one was to read the end time against the clock. */ .lwdone{ font-size:.64rem; font-weight:700; letter-spacing:.07em; color:#6a7086; background:#eceef4; border-radius:20px; padding:1px 8px; margin-left:6px; } .lwbar{ height:5px; border-radius:3px; background:#e7e9f0; margin-top:6px; overflow:hidden; } .lwbar > i{ display:block; height:100%; background:var(--primary); } .warnchip{ font-size:.72rem; padding:1px 8px; border-radius:9px; background:rgba(224,160,23,.16); border:1px solid rgba(224,160,23,.5); color:#8a6412; } .notice{ padding:10px 13px; border-radius:8px; margin:10px 0; font-size:.9rem; } .notice.warn{ background:rgba(224,160,23,.12); border:1px solid rgba(224,160,23,.45); } *{ box-sizing:border-box; } /* Keyboard skip-link: off-screen until focused, then visible top-left. */ .skip-link{ position:absolute; left:-9999px; top:0; z-index:3000; background:var(--primary); color:var(--on-primary); padding:10px 16px; border-radius:0 0 8px 0; font-weight:700; text-decoration:none; } .skip-link:focus{ left:0; } html{ scroll-behavior:smooth; } html,body{ background:var(--bg); overflow-x:hidden; max-width:100%; height:100%; } body{ margin:0; color:var(--text); font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height:1.45; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:transparent; } ::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:20px; border:2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover{ background:#a9aec2; } /* ---- app shell: fixed left sidebar + independently-scrolling main column ---- */ .app-shell{ display:flex; min-height:100vh; align-items:stretch; } .sidenav{ flex:none; width:224px; background:var(--card); border-right:1px solid var(--line); position:sticky; top:0; height:100vh; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; display:flex; flex-direction:column; padding:22px 14px 14px; } .sidenav::-webkit-scrollbar{ display:none; } .sidenav .brand{ padding:0 4px 20px; display:flex; align-items:center; gap:10px; text-decoration:none; cursor:pointer; } .sidenav .brand:hover h1{ opacity:.85; } .sidenav .brand img{ width:38px; height:38px; flex:none; } .sidenav .brand h1{ margin:0; font-size:1.08rem; font-weight:800; letter-spacing:-.01em; line-height:1.2; color:var(--primary); } .sidenav .brand p{ margin:2px 0 0; color:var(--muted); font-size:.68rem; line-height:1.3; } @media (max-width:640px){ .sidenav .brand img{ width:30px; height:30px; } } .navlist{ display:flex; flex-direction:column; gap:3px; margin-top:4px; } .navlist :is(button,a){ position:relative; display:flex; align-items:center; gap:10px; text-align:left; width:100%; padding:11px 12px 11px 15px; background:none; color:var(--muted); border:1px solid transparent; border-radius:10px; cursor:pointer; font-weight:600; font-size:.9rem; transition:background .15s,color .15s,transform .12s; text-decoration:none; box-sizing:border-box; } /* .navlist :is(button,a){display:flex} (class+element, specificity 0,1,1) otherwise outranks the plain .hidden{display:none} (0,1,0), so a nav button given just the "hidden" class stayed visible regardless -- the same class of bug fixed for #ar_preview_photo above. This silently broke two things: tab-community's guest-hide toggle (classList.toggle('hidden', ...)), and any feature-flag-gated tab, which had to fall back to an inline-style hack in applyFeatureFlags() instead of just using .hidden. Fixed once, here, for every nav button rather than per-button workarounds. */ .navlist :is(button,a).hidden{ display:none; } .navlist :is(button,a):hover{ background:var(--primary-soft); color:var(--primary); transform:translateX(1px); } .navlist :is(button,a).active{ background:var(--primary-soft); color:var(--primary); } /* The active rail was gold, which needs a dark ground to read. On paper the terracotta accent is the one that carries at 3px wide. */ .navlist :is(button,a).active::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:2px; background:var(--accent); } .navlist .navicon{ flex:none; width:20px; text-align:center; font-size:1rem; } .navlist .navicon svg{ width:18px; height:18px; vertical-align:middle; } .sidenav .sidefoot{ padding:6px 4px 0; font-size:.68rem; color:var(--muted); line-height:1.6; } /* Collapsible sidebar (desktop only — mobile already has its own overlay drawer via .navtoggle/nav-open, untouched below). Fixed/expanded is the default; a user's choice to collapse it is remembered per-browser via localStorage (see toggleSidenavCollapse) so it stays collapsed across visits once they pick that, without affecting any other visitor. */ .sidenav-collapse-btn{ position:absolute; top:18px; right:-12px; width:24px; height:24px; border-radius:50%; background:var(--card); border:1px solid var(--line-strong); color:var(--primary); font-size:.8rem; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(20,22,34,.25); z-index:2; } .sidenav-collapse-btn:hover{ background:var(--primary-soft); } /* Settings button pinned at the bottom-left of the nav — same visual language as the section buttons above it, always reachable whether the sidebar is expanded or collapsed (icon-only when collapsed, same as every nav button). */ .sidenav-settings{ display:flex; align-items:center; gap:10px; width:100%; margin-top:10px; padding:11px 12px 11px 15px; background:none; color:var(--muted); border:1px solid var(--line); border-radius:10px; cursor:pointer; font-weight:600; font-size:.9rem; text-align:left; } .sidenav-settings:hover{ background:var(--primary-soft); color:var(--primary); } .sidenav-settings .navicon{ flex:none; width:20px; text-align:center; font-size:1rem; } @media (min-width:641px){ .sidenav{ transition:width .18s ease; } body.sidenav-collapsed .sidenav{ width:64px; } body.sidenav-collapsed .sidenav .brand p, body.sidenav-collapsed .sidenav .brand h1, body.sidenav-collapsed .navlist :is(button,a) span:not(.navicon), body.sidenav-collapsed .navgroup-label, body.sidenav-collapsed .sidebar-trust, body.sidenav-collapsed .sidefoot, body.sidenav-collapsed .sidenav-settings span:not(.navicon){ display:none; } body.sidenav-collapsed .sidenav .brand{ justify-content:center; padding:0 0 20px; } body.sidenav-collapsed .sidenav .brand img{ width:30px; height:30px; } body.sidenav-collapsed .navlist :is(button,a), body.sidenav-collapsed .sidenav-settings{ justify-content:center; padding:11px 0; } body.sidenav-collapsed .sidenav-collapse-btn{ transform:rotate(180deg); } /* Hover-to-peek: while permanently collapsed, hovering the rail expands it as a floating overlay (doesn't reflow the page - the collapsed 64px still reserves its layout space) and auto-collapses on mouseleave. The manual «/» toggle above still controls the PERSISTED state (localStorage) independently of this transient hover peek. */ body.sidenav-collapsed .sidenav:hover{ width:224px; position:fixed; top:0; left:0; height:100vh; z-index:1500; box-shadow:var(--shadow-lg); } body.sidenav-collapsed .sidenav:hover .brand p, body.sidenav-collapsed .sidenav:hover .brand h1, body.sidenav-collapsed .sidenav:hover .navlist :is(button,a) span:not(.navicon), body.sidenav-collapsed .sidenav:hover .navgroup-label, body.sidenav-collapsed .sidenav:hover .sidebar-trust, body.sidenav-collapsed .sidenav:hover .sidefoot, body.sidenav-collapsed .sidenav:hover .sidenav-settings span:not(.navicon){ display:revert; } body.sidenav-collapsed .sidenav:hover .brand{ justify-content:flex-start; padding:0 4px 20px; } body.sidenav-collapsed .sidenav:hover .brand img{ width:38px; height:38px; } body.sidenav-collapsed .sidenav:hover .navlist :is(button,a), body.sidenav-collapsed .sidenav:hover .sidenav-settings{ justify-content:flex-start; padding:11px 12px 11px 15px; } body.sidenav-collapsed .sidenav:hover .sidenav-collapse-btn{ transform:none; } } @media (max-width:640px){ .sidenav-collapse-btn{ display:none; } } .langswitch{ flex:none; width:auto; padding:7px 9px; font-size:.8rem; border:1px solid var(--line-strong); border-radius:8px; background:var(--card); color:var(--text); cursor:pointer; } .langswitch:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); } .liveagent{ font-weight:700; } .themetoggle{ padding:0; width:var(--ctl-h); height:var(--ctl-h); display:inline-flex; align-items:center; justify-content:center; font-size:1rem; flex:none; } /* ---- Back-to-Home bar: a persistent, always-visible way back on every non-home panel. The topbar's icon-only Home button already did this, but a plain house glyph with no text is easy to miss entirely and the SPA has no URL/history support of its own — a user who doesn't spot the icon and reaches for the browser Back button gets nothing useful either, since the address bar never changes. This bar is the visible half of that fix; show()/popstate below wire the other half (real hash-based history so the browser Back button also works). Deliberately NOT a full-width bordered strip: sitting directly under the topbar and (when active) the colored announcement banner, a second heavy bar there read as broken layout — three stacked strips competing for the same sliver of space. This is sized and inset like a plain in-page breadcrumb instead: no border, no full-width background, just enough presence to be findable without adding another "bar". .panel-backbar-inner reuses .topbar-inner's exact max-width/margin/ padding recipe (see the comment on .topbar-inner above) so the back button's left edge lines up with the Home icon and search box above it and the report content below it, rather than sitting flush against the raw viewport edge on anything wider than the 1440px content column. ---- */ .panel-backbar{ padding-top:8px; } .panel-backbar.hidden{ display:none; } .panel-backbar-inner{ max-width:1440px; width:100%; margin:0 auto; padding:0 20px; } @media (max-width:640px){ .panel-backbar-inner{ padding:0 16px; } } /* Left edge matches where every .card's own content actually starts (.wrap's 20px page margin + .card's 18px internal padding = 38px), not the page margin alone -- otherwise Back visually floats 18px to the left of the heading/fields it sits above. */ .panel-backbar-btn{ display:inline-flex; align-items:center; gap:5px; background:none; border:none; color:var(--muted); font-weight:600; font-size:.78rem; cursor:pointer; padding:4px 6px; margin-left:12px; border-radius:7px; } .panel-backbar-btn:hover{ color:var(--primary); background:var(--primary-soft); } /* ---- FAQ chat widget: minimized bubble, bottom-right ---- */ .faqchat{ position:fixed; right:20px; bottom:20px; z-index:1600; } .faqchat-bubble{ width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:var(--on-primary); border:none; font-size:1.5rem; box-shadow:0 8px 24px rgba(20,22,34,.25); cursor:pointer; } .faqchat-bubble:hover{ transform:translateY(-2px); } .faqchat-bubble{ position:relative; } .faqchat-dot{ position:absolute; top:2px; right:2px; width:12px; height:12px; border-radius:50%; background:var(--accent); border:2px solid #fff; } .faqchat-dot.hidden{ display:none; } .faqchat-panel{ position:absolute; right:0; bottom:68px; width:330px; max-width:calc(100vw - 32px); height:440px; max-height:70vh; background:var(--card); border-radius:16px; box-shadow:0 12px 34px rgba(20,22,34,.25); display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); } .faqchat-panel.hidden{ display:none; } .faqchat-head{ background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:var(--on-primary); padding:12px 14px; display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:.9rem; flex:none; } .faqchat-head-actions{ display:flex; align-items:center; gap:10px; } .faqchat-clear{ background:none; border:none; color:var(--on-primary); font-size:.95rem; cursor:pointer; line-height:1; opacity:.85; } .faqchat-clear:hover{ opacity:1; } .faqchat-close{ background:none; border:none; color:var(--on-primary); font-size:1.3rem; cursor:pointer; line-height:1; } .faqchat-msgs{ flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; font-size:.85rem; } .faqchat-msg{ padding:8px 11px; border-radius:12px; max-width:85%; line-height:1.4; } .faqchat-msg.bot{ background:var(--bg); align-self:flex-start; color:var(--text); } .faqchat-msg.user{ background:var(--primary); color:var(--on-primary); align-self:flex-end; } .faqchat-msg.err{ background:#fdecea; color:#a0271e; align-self:flex-start; } .faqchat-topics{ display:flex; flex-wrap:wrap; gap:6px; padding:8px 10px; border-top:1px solid var(--line); max-height:104px; overflow-y:auto; flex:none; } .faqchat-chip{ padding:5px 10px; border-radius:14px; border:1px solid var(--line-strong); background:var(--card); font-size:.74rem; cursor:pointer; color:var(--primary); font-weight:600; } .faqchat-chip:hover{ background:var(--primary-soft); border-color:var(--primary); } .faqchat-inputrow{ display:flex; gap:6px; padding:10px; border-top:1px solid var(--line); flex:none; } .faqchat-inputrow input{ flex:1; padding:8px 10px; border:1px solid var(--line); border-radius:20px; font-size:.85rem; } .faqchat-inputrow input:focus{ outline:none; border-color:var(--primary); } .faqchat-inputrow button{ width:36px; height:36px; flex:none; border-radius:50%; border:none; background:var(--primary); color:var(--on-primary); cursor:pointer; font-size:1rem; } .faqchat-mic{ background:var(--card) !important; border:1px solid var(--line-strong); color:var(--primary) !important; } .faqchat-mic.listening{ background:var(--accent) !important; color:var(--on-status) !important; animation:atk-pulse 1.4s ease-out infinite; } @keyframes atk-pulse{ 0%{ box-shadow:0 0 0 0 rgba(217,79,43,.55); } 70%{ box-shadow:0 0 0 5px rgba(217,79,43,0); } 100%{ box-shadow:0 0 0 0 rgba(217,79,43,0); } } .faqchat-footrow{ text-align:center; padding:6px 10px 10px; border-top:1px solid var(--line); flex:none; } .faqchat-footrow a{ font-size:.74rem; color:var(--muted); text-decoration:underline; cursor:pointer; } .faqchat-footrow a:hover{ color:var(--primary); } @media (max-width:480px){ .faqchat{ right:12px; bottom:12px; } .faqchat-panel{ width:calc(100vw - 24px); } } /* ---- User Guide floating icon: fixed top-right, always BELOW the topbar (never overlapping its search box / Live Agent / language / account controls) since it sits outside topbar-inner's own flex row entirely. ---- */ .userguide-fab, .verdictlegend-fab{ position:fixed; right:18px; z-index:900; width:44px; height:44px; border-radius:50%; background:var(--card); border:1px solid var(--line-strong); color:var(--primary); font-size:1.15rem; box-shadow:0 6px 18px rgba(20,22,34,.18); cursor:pointer; display:flex; align-items:center; justify-content:center; } .userguide-fab:hover, .verdictlegend-fab:hover{ transform:translateY(-2px); background:var(--primary-soft); } .userguide-fab{ top:76px; } .verdictlegend-fab{ top:130px; } @media (max-width:640px){ .userguide-fab, .verdictlegend-fab{ right:12px; width:40px; height:40px; font-size:1.05rem; } /* Below the sticky top bar, which on a phone is one row (~52px) signed out and two (~100px, with search) signed in. At 96px the first button sat on top of the search box's right edge. */ .userguide-fab{ top:112px; } .verdictlegend-fab{ top:160px; } } /* Admin stat tiles (Total hits · Total signups · Today's signups), in the top bar between the search box and Live Agent, admins only. History: speedometer gauges, then an analog odometer (both rejected as "not looking good"), then a grey-green LCD readout. This is the fourth look, approved as docs/redesign-mockup/admin-stats.html (2026-09-14): calm, widget-like tiles in the /app design language rather than a skeuomorphic instrument. Each tile is a hairline rounded rectangle with a translucent token fill, a small gradient glyph badge (the one place a vivid colour earns its keep: it tells the three numbers apart at a glance), the number in tabular figures with a small-caps label, and a 7-day sparkline from /api/admin/ticker. The one rule kept from every earlier round: a value shows exactly its own digits, never zero-padded (grouping separators only). Cheap on purpose: plain spans and ~1KB of inline SVG per tile, rebuilt only on the existing 30s poll tick (see _renderStatTile / refreshAdminHitsInline in app.js). A number rolls up once, only when its value changed since the last tick; nothing moves under reduced motion. 641–1100px folds each tile to glyph + number; phones hide it (below). */ .admin-hits-inline{ display:flex; align-items:center; gap:6px; } .stat{ display:flex; align-items:center; gap:8px; height:38px; padding:0 10px 0 7px; background:var(--card); border:1px solid var(--line); border-radius:12px; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; } @supports (background:color-mix(in srgb, red 50%, blue)){ .stat{ background:var(--stat-fill); } } @supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){ .stat{ -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px); } } .stat:hover{ border-color:var(--line-strong); transform:translateY(-1px); box-shadow:0 3px 10px rgba(20,22,34,.08); } .stat-glyph{ flex:none; width:22px; height:22px; border-radius:6.5px; display:grid; place-items:center; color:#fff; box-shadow:inset 0 0 0 .5px rgba(255,255,255,.25), 0 1px 2px rgba(20,22,34,.18); } .stat-glyph svg{ width:14px; height:14px; } .stat-glyph.g-hits{ background:linear-gradient(160deg,#4a63d8 0%,#1B2A6B 100%); } .stat-glyph.g-users{ background:linear-gradient(160deg,#f6cf63 0%,#d49a1a 100%); } .stat-glyph.g-today{ background:linear-gradient(160deg,#f4845c 0%,#c73e1e 100%); } .stat-body{ display:flex; flex-direction:column; justify-content:center; min-width:0; line-height:1; } .stat-num{ display:block; height:17px; overflow:hidden; white-space:nowrap; color:var(--text); font:600 16px/17px ui-sans-serif,-apple-system,"SF Pro Display",system-ui,"Segoe UI",sans-serif; font-variant-numeric:tabular-nums; letter-spacing:-.02em; } .stat-num > span{ display:block; } .stat-lbl{ margin-top:3px; font-size:.6rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--faint-text); white-space:nowrap; } .stat-lbl .delta{ font-weight:500; letter-spacing:0; text-transform:none; color:var(--faint-text); } .stat-spark{ flex:none; width:44px; height:14px; color:var(--muted); } .stat-spark polyline{ fill:none; stroke:currentColor; stroke-opacity:.6; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; } .stat-spark circle{ fill:currentColor; } .stat-num.roll > span{ animation:statRoll .25s cubic-bezier(.2,.8,.3,1); } @keyframes statRoll{ from{ transform:translateY(60%); opacity:0; } to{ transform:none; opacity:1; } } @media (prefers-reduced-motion:reduce){ .stat, .stat:hover{ transition:none; transform:none; } .stat-num.roll > span{ animation:none; } } /* Measured, not guessed: an admin's second bar row (tiles, Live Agent, theme, language, bell, Admin Panel, account) needs ~1,080px beside the sidebar with full tiles, which a 1366px window has and a 1280px one does not. So full tiles from 1360px, glyph + number below that; and on desktop the Admin Panel button takes chip size and the ADMIN badge is dropped (the Admin Panel button already says it), so the bar is no taller than the LCD readout's. */ @media (min-width:641px) and (max-width:1359px){ .stat{ height:34px; gap:7px; padding:0 9px 0 7px; } .stat-lbl, .stat-spark{ display:none; } } @media (min-width:1360px){ .admin-hits-inline{ gap:5px; } .stat{ gap:6px; padding:0 8px 0 6px; } .stat-spark{ width:34px; } } @media (min-width:641px){ .topbar .acctbar .abtn.solid.adminpanel-btn{ height:30px; padding:0 12px; border-radius:99px; font-size:.78rem; } .topbar .acctbar .badge-admin{ display:none; } .topbar .langswitch{ max-width:92px; } } /* The right-edge buttons start below the top bar, whatever its height. They were pinned at fixed offsets, so an admin's bar (which wraps to two or three rows on a laptop or tablet) sat underneath them. --topbar-h is the bar's measured height, kept current by a ResizeObserver in app.js; max() keeps the original offsets as the floor. */ @media (min-width:641px){ .userguide-fab{ top:max(76px, calc(var(--topbar-h, 0px) + 14px)); } .verdictlegend-fab{ top:max(130px, calc(var(--topbar-h, 0px) + 68px)); } } /* Home "Coming up in your family" (BI-C): dasha changes due in 60 days on the saved birth charts, inside the Now running card. */ .nr-up{ margin:0 0 10px; } .nr-up-list{ list-style:none; margin:6px 0 0; padding:0; } .nr-up-row{ display:block; width:100%; text-align:left; font:inherit; font-size:.86rem; color:var(--text); background:none; border:0; border-top:1px solid var(--line); padding:7px 0; cursor:pointer; } .nr-up-list li:first-child .nr-up-row{ border-top:0; } .nr-up-row:hover{ color:var(--primary); } .nr-up-row b{ font-weight:600; } @media (max-width:700px){ .nr-up-row{ min-height:44px; } } .main-col{ flex:1; min-width:0; display:flex; flex-direction:column; } /* Sticky: the top bar (menu, Home, search, account) stays put while the panel scrolls under it, in the browser and the installed app alike. z-index sits above page content (the search dropdown is 80 inside this bar's own stacking context) and below the mobile nav drawer (1500) and modals (2000), so nothing that should cover it is covered by it. */ .topbar{ background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:70; min-height:22px; } /* Same max-width + side padding as .wrap below, so the search bar's left edge and overall column line up exactly with the prediction/report content underneath instead of floating independently against the sidebar. */ .topbar-inner{ max-width:1440px; width:100%; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .topsearch-wrap{ position:relative; flex:1 1 0; min-width:200px; max-width:520px; } .topsearch-icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; } .topsearch-wrap input{ width:100%; padding:10px 14px 10px 38px; background:var(--bg); border:1px solid var(--line-strong); border-radius:10px; font-size:.88rem; transition:.15s; } .topsearch-wrap input:hover{ border-color:var(--line-strong); background:var(--card); } .topsearch-wrap input:focus{ outline:none; border-color:var(--primary); background:var(--card); box-shadow:0 0 0 3px var(--primary-soft); } .topsearch-out{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:80; background:var(--card); border:1px solid var(--line-strong); border-radius:12px; box-shadow:var(--shadow); max-height:360px; overflow-y:auto; } .topsearch-out:empty{ display:none; } .topsearch-out .muted, .topsearch-out .err{ padding:10px 12px; font-size:.82rem; } .topbar-right{ margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; } /* App-bar layout on mobile, not a shrunk desktop row: hamburger + Home pinned to the left edge, the action cluster pinned to the right (via .topbar-right's own margin-left:auto, unchanged), search dropping to its own full-width row underneath. `justify-content:center` used to wrap all of this into one centered, ragged blob -- hamburger, Home, Live Agent, theme, language, notifications, Admin Panel all bunched in the middle instead of reading as a normal app toolbar. */ /* Phones: the bar is sticky now, so every row it wraps onto is screen height lost on every panel. The action cluster used to take a full-width row of its own; it now shares the first row with the menu and Home buttons, with its text labels (Live Agent, Admin Panel, the account name) folded to icons. Only the signed-in search keeps a second row. Every selector is scoped under .topbar on purpose: the base .acctbar and .abtn rules come LATER in this stylesheet, and at equal specificity they silently won -- the first version of this block did nothing on a phone. */ @media (max-width:640px){ .topbar .topbar-inner{ justify-content:flex-start; flex-wrap:wrap; gap:6px; padding:8px 10px; } .topbar .topsearch-wrap{ order:3; flex-basis:100%; max-width:none; } .topbar .navtoggle, .topbar .homebtn, .topbar .themetoggle{ width:36px; height:36px; } .topbar .topbar-right{ margin-left:auto; width:auto; min-width:0; flex-wrap:nowrap; gap:4px; justify-content:flex-end; } .topbar .admin-hits-inline{ display:none; } .topbar .topbar-right .abtn{ height:36px; } .topbar .liveagent, .topbar .adminpanel-btn, .topbar .acctbar [onclick^="openSupportModal"]{ font-size:0; gap:0; padding:0; width:36px; min-width:36px; } .topbar .liveagent::before{ content:"🎧"; font-size:1rem; } .topbar .adminpanel-btn::before{ content:"🛠"; font-size:1rem; } .topbar .acctbar [onclick^="openSupportModal"]::before{ content:"🙏"; font-size:1rem; } .topbar .langswitch{ max-width:80px; height:36px; padding:0 4px; } .topbar .acctbar{ flex-wrap:nowrap; gap:4px; } .topbar .acctbar .who{ display:none; } .topbar .acctbar .abtn.solid{ padding:0 12px; } /* Signed in: the account button printed the full name or phone number beside the avatar and pushed the whole cluster onto a second row. The avatar alone opens the same menu, whose header still names the account; the PREMIUM/ADMIN badge repeats what that menu already says. */ .topbar .who-btn .who-label, .topbar .who-btn .caret, .topbar .acctbar .badge-admin{ display:none; } .topbar .who-btn{ padding:0 3px; height:36px; } .topbar .acctbar .credits{ white-space:nowrap; height:36px; padding:0 8px; } } .sitefooter{ margin-top:auto; padding:22px 20px; border-top:1px solid var(--line); background:var(--bg); } /* Grid, not flex-wrap -- explicit correction, 2026-09-08: flex-wrap + space-between left the social row orphaned on the left with dead space to its right whenever it wrapped onto its own line (there was only one item on that line, so space-between had nothing to distribute it against). A 3-column grid pins brand/links/social to fixed slots that hold their position regardless of content width, and the copyright row is a deliberate second grid row, visually separated by its own divider rather than just trailing whitespace. */ .sitefooter-inner{ max-width:1440px; margin:0 auto; display:grid; grid-template-columns:auto 1fr auto; align-items:center; column-gap:32px; row-gap:14px; } .sitefooter-brand{ grid-column:1; display:flex; align-items:center; gap:8px; font-weight:700; color:var(--primary); font-size:.85rem; } .sitefooter-brand img{ width:20px; height:20px; } .sitefooter-links{ grid-column:2; display:flex; justify-content:center; gap:18px; flex-wrap:wrap; } .sitefooter-links a{ color:var(--muted); font-size:.82rem; text-decoration:none; white-space:nowrap; } .sitefooter-links a:hover{ color:var(--primary); text-decoration:underline; } /* The "More" disclosure sits inline with the other footer links (not a block/full-width dropdown) — summary styled to match its siblings so it reads as "one more footer link" that happens to expand, and its own links appear right after it, in the same flex-wrapped line/row, once opened. */ .sitefooter-more{ display:inline-flex; align-items:center; } /* Closed: sits as one ordinary pill among its siblings. Open: takes the whole flex row (its parent is display:flex; flex-wrap:wrap), so the expanded link list gets a full-width line of its own below the always-visible links, instead of being squeezed into whatever inline space was left. */ .sitefooter-more[open]{ flex-basis:100%; } .sitefooter-more summary{ display:inline; color:var(--muted); font-size:.82rem; cursor:pointer; list-style:none; } .sitefooter-more summary::-webkit-details-marker{ display:none; } .sitefooter-more summary::after{ content:" \25be"; } .sitefooter-more[open] summary::after{ content:" \25b4"; } .sitefooter-more summary:hover{ color:var(--primary); text-decoration:underline; } .sitefooter-more-links{ display:flex; flex-wrap:wrap; gap:18px; margin-top:10px; } .sitefooter-more-links a{ color:var(--muted); font-size:.82rem; text-decoration:none; white-space:nowrap; } .sitefooter-more-links a:hover{ color:var(--primary); text-decoration:underline; } .sitefooter-social{ grid-column:3; display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-self:end; } .sitefooter-copy{ grid-column:1 / -1; margin:0; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:.76rem; line-height:1.5; text-align:center; } @media (max-width:900px){ .sitefooter-inner{ grid-template-columns:1fr; justify-items:center; text-align:center; row-gap:12px; } .sitefooter-brand, .sitefooter-links, .sitefooter-social{ grid-column:1; justify-self:center; } } .footlink{ color:var(--primary); font-weight:600; text-decoration:none; } .footlink:hover{ text-decoration:underline; } /* ---- "Share this site" — public, no sign-in needed ---- */ .sharesite{ display:flex; align-items:center; gap:10px; } .sharesite-label{ color:var(--muted); font-size:.78rem; } .sharebtn{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--line-strong); background:var(--card); cursor:pointer; color:var(--muted); position:relative; } .sharebtn:hover{ background:var(--sunk-soft); border-color:var(--primary); } .sharebtn.fb{ border-color:#1877F2; color:#1877F2; } .sharebtn.x{ border-color:#111; color:#111; } .sharebtn.pin{ border-color:#E60023; color:#E60023; } /* Instagram's mark is a gradient; a single brand pink reads correctly at 16px and keeps the row consistent with its neighbours. An here, not a