/* ══════════════════════════════════════════════════════════════════════ dashboard v2 — the approved mock's skin (Aug 23 2026) DESIGN ONLY. Every id/hook/price/gate the plumbing uses is untouched; this file restyles the existing DOM. Scoped to the signed-in dashboard. Loaded LAST from me/index.html so it wins the cascade. ══════════════════════════════════════════════════════════════════════ */ body.is-signed-in{ --dbg:#1b1730; --dbg2:#2a1f3a; --dpanel:#241d38; --dline:#3b3160; --dink:#f4ebdd; --dink2:#9a8770; --dgold:#cf9a5e; --easy:#5fa86c; --good:#cf9a5e; --mixed:#9bb0d6; --hard:#d05a47; background:var(--dbg) !important; color:var(--dink); } /* ── broad safety net: every card-ish surface goes dark, all text cream ── */ body.is-signed-in .state-signed-in{color:var(--dink);} body.is-signed-in .state-signed-in :is(h1,h2,h3,h4,h5,h6){color:var(--dink);} body.is-signed-in .state-signed-in :is(.bt,.band,.ss-cell,.life-card,.rep-card, .mh-hero,.cw-cards li,.ss-layer,.ss-mech,.money-room,.al-panel){ background:var(--dpanel);border:1px solid var(--dline);color:var(--dink); } body.is-signed-in .state-signed-in a{color:var(--dgold);} /* ═══════════════ THE SIDE RAIL (desktop) / BOTTOM BAR (mobile) ═══════════════ */ body.is-signed-in .board-toggle{ position:fixed;left:0;top:0;bottom:0;width:88px;z-index:60; display:flex !important;flex-direction:column;align-items:center;justify-content:flex-start; gap:6px;padding:26px 0 0 !important;margin:0 !important; background:var(--dbg2) !important;border-right:1px solid var(--dline);border-radius:0 !important; overflow:visible; } body.is-signed-in .board-toggle::before{ content:'✦';color:var(--dgold);font-size:1.3rem;margin-bottom:16px; } body.is-signed-in .bt-seg{ width:72px;padding:10px 0 !important;border-radius:12px !important; font-size:0 !important;line-height:0;color:var(--dink2) !important; background:none !important;display:flex;flex-direction:column;align-items:center;gap:3px; white-space:normal !important; } body.is-signed-in .bt-seg::before{font-size:1.15rem;line-height:1.3;} body.is-signed-in .bt-seg::after{font-size:.72rem;line-height:1.4;letter-spacing:.02em;} body.is-signed-in .bt-seg.on{background:var(--dline) !important;color:var(--dink) !important;font-weight:400 !important;} body.is-signed-in .bt-seg:hover{color:var(--dink) !important;} body.is-signed-in #seg-season::before{content:'🌗';} body.is-signed-in #seg-season::after{content:'today';} body.is-signed-in #seg-read::before{content:'✨';} body.is-signed-in #seg-read::after{content:'you';} body.is-signed-in #seg-compat::before{content:'♡';} body.is-signed-in #seg-compat::after{content:'love';} body.is-signed-in #seg-travel::before{content:'✈️';} body.is-signed-in #seg-travel::after{content:'travel';} body.is-signed-in #seg-ask::before{content:'💬';} body.is-signed-in #seg-ask::after{content:'ask';} body.is-signed-in #seg-constellation::before{content:'⭐'} body.is-signed-in #seg-constellation::after{content:'stars';} /* the board content clears the rail */ body.is-signed-in .state-signed-in > .wrap{padding-left:104px;} @media(max-width:900px){ body.is-signed-in .board-toggle{ top:auto;right:0;bottom:0;left:0;width:auto;height:64px;flex-direction:row; justify-content:space-around;padding:0 !important;border-right:none;border-top:1px solid var(--dline); } body.is-signed-in .board-toggle::before{display:none;} body.is-signed-in .bt-seg{width:auto;padding:6px 6px !important;} body.is-signed-in .bt-seg::after{font-size:.6rem;} body.is-signed-in .state-signed-in > .wrap{padding-left:0;padding-bottom:84px;} } /* the old capsule row + controls strip melt away */ body.is-signed-in .board-controls{background:none !important;border:none !important;padding:0 !important;margin:0 !important;} /* ═══════════════ TODAY + CYCLE + SEASONS — the weather report ═══════════════ */ body.is-signed-in .ss-hero{ background:linear-gradient(160deg,#3b3160,#2a1f3a 70%) !important; border:1px solid var(--dline) !important;border-radius:22px !important; padding:34px 30px 26px !important;text-align:center; } body.is-signed-in .ss-hero .bt-eye{color:var(--dink2);letter-spacing:.14em;font-size:.72rem;} body.is-signed-in .ss-hero h3{ font-family:'Cormorant Garamond',Georgia,serif;font-size:2.4rem;line-height:1.15; color:var(--dgold);font-weight:600;margin:.5rem auto .6rem;max-width:640px; } body.is-signed-in .ss-hero .hero-body{max-width:560px;margin:0 auto;font-size:1rem;line-height:1.7;opacity:.92;} body.is-signed-in .ss-cols{display:block;} body.is-signed-in .ss-bars{max-width:620px;margin:18px auto 0;} /* the two fast cells become weather tiles */ body.is-signed-in .ss-cells{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:640px;margin:16px auto 0;} body.is-signed-in .ss-cell{border-radius:16px !important;padding:16px 14px !important;text-align:center;} body.is-signed-in .ss-cell .ss-eye{font-size:.66rem;color:var(--dink2);letter-spacing:.08em;} body.is-signed-in .ss-cell .ss-t{font-size:1.25rem;margin-top:6px;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;} body.is-signed-in .ss-cell .ss-s{font-size:.78rem;color:var(--dink2);margin-top:6px;line-height:1.55;} @media(max-width:640px){ body.is-signed-in .ss-cells{grid-template-columns:1fr;} } body.is-signed-in .hero-skynote{color:var(--dink2);font-size:.7rem;margin-top:18px;} /* progress bars — chapter + the moon cycle (marks kept, they teach) */ body.is-signed-in .prog{margin-top:14px;} body.is-signed-in .prog-top{display:flex;justify-content:space-between;font-size:.76rem;color:var(--dink2);margin-bottom:10px;gap:10px;flex-wrap:wrap;} body.is-signed-in .prog-track{position:relative;height:8px;border-radius:4px;background:var(--dline);} body.is-signed-in .prog-fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,#6a5a9c,var(--dgold));} body.is-signed-in .pm{position:absolute;top:50%;transform:translate(-50%,-50%);width:15px;height:15px;border-radius:50%;background:var(--dbg);border:2px solid var(--dline);} body.is-signed-in .pm.pm-on{border-color:var(--dgold);} body.is-signed-in .pm-full{background:var(--dink);} body.is-signed-in .pm-q1{background:linear-gradient(90deg,var(--dink) 50%,var(--dbg) 50%);} body.is-signed-in .pm-q3{background:linear-gradient(90deg,var(--dbg) 50%,var(--dink) 50%);} body.is-signed-in .prog-legend{display:flex;justify-content:space-between;font-size:.66rem;color:var(--dink2);margin-top:8px;} /* section heads */ body.is-signed-in .band{background:none;border:none;padding:0;margin-top:30px;} body.is-signed-in .band-head{display:flex;justify-content:space-between;align-items:baseline;margin:0 4px 10px;} body.is-signed-in .band-head h2{font-size:.8rem;letter-spacing:.14em;color:var(--dink2);font-weight:400;text-transform:lowercase;} body.is-signed-in .band-meta{font-size:.68rem;color:var(--dink2);} /* this season band */ body.is-signed-in .ss-season{background:linear-gradient(160deg,#2a1f3a,#241d38);border:1px solid var(--dline);border-radius:16px;padding:20px 22px;} body.is-signed-in .ss-band-eye{font-size:.7rem;letter-spacing:.12em;color:var(--dgold);margin-bottom:8px;} body.is-signed-in .ss-season-body{font-size:.92rem;line-height:1.65;} /* by life area cards */ body.is-signed-in .life-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;} @media(max-width:640px){ body.is-signed-in .life-row{grid-template-columns:1fr;} } body.is-signed-in .life-card{border-radius:16px !important;padding:16px !important;} body.is-signed-in .life-eye{font-size:.72rem;color:var(--dink2);} body.is-signed-in .life-t{font-size:1.15rem;margin-top:6px;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;color:var(--dink);} body.is-signed-in .life-b{font-size:.8rem;color:var(--dink2);line-height:1.6;} body.is-signed-in .life-more{color:var(--dgold);font-size:.76rem;cursor:pointer;} /* everything running right now — the layers list */ body.is-signed-in .ss-layers{background:var(--dpanel);border:1px solid var(--dline);border-radius:16px;overflow:hidden;} body.is-signed-in .ss-layer{display:flex;gap:12px;padding:14px 18px;border:none !important;border-bottom:1px solid var(--dline) !important;border-radius:0 !important;background:none !important;} body.is-signed-in .ss-layer:last-child{border-bottom:none !important;} body.is-signed-in .ss-glyph{font-size:1.05rem;color:var(--dgold);flex:none;padding-top:2px;} body.is-signed-in .ss-layer details{flex:1;} body.is-signed-in .ss-layer summary{cursor:pointer;list-style:none;} body.is-signed-in .ss-layer summary::-webkit-details-marker{display:none;} body.is-signed-in .ss-layer h4{font-size:1rem;font-weight:400;margin:2px 0;} body.is-signed-in .ss-layer-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap;} body.is-signed-in .ss-eye2{font-size:.66rem;letter-spacing:.1em;color:var(--dink2);} body.is-signed-in .ss-why{font-size:.8rem;color:var(--dink2);line-height:1.6;} body.is-signed-in .ss-span{display:flex;justify-content:space-between;font-size:.68rem;color:var(--dink2);margin-top:8px;} body.is-signed-in .ss-track{height:5px;border-radius:3px;background:var(--dline);margin-top:6px;position:relative;overflow:hidden;} body.is-signed-in .ss-fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--dgold);} body.is-signed-in .ss-cue{font-size:.74rem;color:var(--dgold);margin-top:8px;} body.is-signed-in .ss-chip{border:1px solid var(--dline);border-radius:999px;padding:2px 10px;font-size:.64rem;color:var(--dink2);background:none;} body.is-signed-in .ss-open{padding-top:10px;} body.is-signed-in .ss-guide{margin-top:8px;} body.is-signed-in .ss-g-eye{font-size:.66rem;letter-spacing:.1em;color:var(--dink2);margin-bottom:6px;} body.is-signed-in .ss-g-row{display:flex;gap:8px;font-size:.8rem;line-height:1.6;color:var(--dink2);margin-bottom:4px;} body.is-signed-in .ss-g-row b{color:var(--dink);font-weight:400;} body.is-signed-in .ss-edu{margin-top:10px;padding-top:10px;border-top:1px dashed var(--dline);} body.is-signed-in .ss-edu p{font-size:.8rem;line-height:1.7;color:var(--dink2);margin:.2rem 0 .7rem;} body.is-signed-in .ss-receipt{font-size:.7rem;color:var(--dink2);line-height:1.6;margin-top:8px;} body.is-signed-in .ss-receipt b{color:var(--dgold);font-weight:400;} /* what changes next — the forecast list */ body.is-signed-in .ss-tl{background:var(--dpanel);border:1px solid var(--dline);border-radius:16px;overflow:hidden;} body.is-signed-in .ss-tl > *{padding:13px 18px;border-bottom:1px solid var(--dline);font-size:.88rem;} body.is-signed-in .ss-tl > *:last-child{border-bottom:none;} /* the mechanics fold */ body.is-signed-in .ss-mech{border-radius:16px !important;margin-top:26px;} body.is-signed-in .ss-mech summary{padding:14px 18px;font-size:.8rem;color:var(--dink2);cursor:pointer;list-style:none;} body.is-signed-in .ss-mech summary::-webkit-details-marker{display:none;} body.is-signed-in .ss-mech table{width:100%;border-collapse:collapse;font-size:.74rem;} body.is-signed-in .ss-mech th{color:var(--dink2);font-weight:400;text-align:left;padding:8px 18px;border-bottom:1px solid var(--dline);} body.is-signed-in .ss-mech td{padding:8px 18px;border-bottom:1px solid var(--dline);} body.is-signed-in .ss-mech tr:last-child td{border-bottom:none;} body.is-signed-in .ss-mech-note{padding:12px 18px 16px;font-size:.7rem;color:var(--dink2);line-height:1.6;} /* pills + ctas — gold outline, the mock's buttons */ body.is-signed-in :is(.al-hear,.hero-cta,.mh-windows-go,.ss-retry,.ss-alt summary){ background:none;border:1px solid var(--dgold);color:var(--dgold); border-radius:999px;padding:7px 18px;font-size:.82rem;cursor:pointer; } body.is-signed-in :is(.al-hear,.hero-cta,.mh-windows-go):hover{background:var(--dline);} body.is-signed-in .ss-loading{color:var(--dink2);font-size:.82rem;padding:14px 18px;} /* the voice is lowercase — undo any uppercase transforms from the base sheet */ body.is-signed-in .state-signed-in :is(.bt-eye,.ss-eye,.ss-eye2,.ss-band-eye,.band-head h2, .band-meta,.prog-top,.prog-legend,.life-eye,.ss-g-eye,.hero-skynote,.ss-span){ text-transform:lowercase !important;letter-spacing:.08em; } /* hear/share pills sit inline, not full width */ body.is-signed-in .ss-hero button:not(.bt-seg){ display:inline-flex;width:fit-content;max-width:100%;justify-content:center; margin:10px 4px 0;align-self:center; } /* the retrograde band + preview join the theme */ body.is-signed-in .state-signed-in :is(.retro-banner,.ss-retro){ background:var(--dpanel) !important;border:1px solid var(--dline) !important; border-left:3px solid var(--mixed) !important;color:var(--dink) !important;border-radius:12px !important; } body.is-signed-in .state-signed-in :is(.retro-banner,.ss-retro) :is(.ss-retro-h,.retro-banner-eye,b){color:var(--dink);} body.is-signed-in .state-signed-in :is(.ss-retro-s,.retro-banner-body){color:var(--dink2);} /* chart admin strip (refresh · rebuild · edit birth data) */ body.is-signed-in .recalc-bar{ background:var(--dpanel);border:1px solid var(--dline);color:var(--dink2);border-radius:12px; } body.is-signed-in .recalc-bar button{ background:none;border:1px solid var(--dline);color:var(--dink2);border-radius:999px; } body.is-signed-in .recalc-bar button:hover{color:var(--dink);border-color:var(--dgold);} /* ═══════════════ LOVE & SEX ═══════════════ */ /* the year bar — jan→dec, tap a block */ body.is-signed-in .cw-year{margin:14px 0 4px;} body.is-signed-in .cw-year-eye{font-size:.7rem;letter-spacing:.1em;color:var(--dink2);margin-bottom:8px;text-transform:lowercase;} body.is-signed-in .cw-year-track{position:relative;height:34px;border-radius:8px;background:var(--dline);overflow:hidden;} body.is-signed-in .cw-yb{position:absolute;top:0;bottom:0;border:none;cursor:pointer;opacity:.85;padding:0;min-width:5px;} /* the blocks are absolutely positioned, so the next one paints over the outline of the one before it and the highlight loses a side (Nik, Sep 5 2026). lift the hovered/selected block. */ body.is-signed-in .cw-yb:hover{opacity:1;outline:2px solid var(--dink);outline-offset:-2px;z-index:2;} body.is-signed-in .cw-yb-strong{background:var(--easy);} body.is-signed-in .cw-yb-good{background:var(--good);} body.is-signed-in .cw-yb-mixed{background:var(--mixed);} body.is-signed-in .cw-yb-hard{background:var(--hard);} body.is-signed-in .cw-year-cal{display:flex;justify-content:space-between;font-size:.66rem;color:var(--dink2);margin-top:6px;} body.is-signed-in .cw-flash{outline:2px solid var(--dgold);outline-offset:2px;border-radius:14px;transition:outline-color 1.2s ease;} /* windows panel + stats + cards */ body.is-signed-in .cw-panel{color:var(--dink);} body.is-signed-in .cw-eye{font-size:.72rem;letter-spacing:.12em;color:var(--dgold);text-transform:lowercase;} body.is-signed-in .cw-head a{color:var(--dgold);} body.is-signed-in .cw-stats{display:flex;gap:44px;align-items:center;background:var(--dpanel);border:1px solid var(--dline);border-radius:14px;padding:14px 22px;width:100%;cursor:pointer;color:var(--dink);flex-wrap:wrap;text-align:left;} body.is-signed-in .cw-stat{padding-right:44px;border-right:1px solid var(--dline);} body.is-signed-in .cw-stat:last-of-type{border-right:none;} body.is-signed-in .cw-statn{display:block;font-size:1.3rem;color:var(--dgold);font-family:'Cormorant Garamond',Georgia,serif;} body.is-signed-in .cw-statl{font-size:.68rem;color:var(--dink2);} body.is-signed-in .cw-statwhy{color:var(--dgold);font-size:.76rem;margin-left:auto;} body.is-signed-in .cw-spread,body.is-signed-in .cw-intro{color:var(--dink2);font-size:.8rem;} body.is-signed-in .cw-half{background:var(--dpanel);border:1px solid var(--dline);border-radius:12px;padding:12px 16px;font-size:.78rem;line-height:1.65;color:var(--dink2);} body.is-signed-in .cw-half b{color:var(--dink);font-weight:400;} body.is-signed-in .cw-cards li{border-radius:16px !important;} body.is-signed-in .cw-band{border-radius:999px;padding:2px 10px;font-size:.64rem;} body.is-signed-in .cw-band-strong{background:var(--easy);color:#10240f;} body.is-signed-in .cw-band-good{background:var(--good);color:#2c2017;} body.is-signed-in .cw-band-mixed{background:var(--mixed);color:#141d2e;} body.is-signed-in .cw-band-hard{background:var(--hard);color:#2b0d08;} /* THE DATE IS THE POINT OF THE CARD. (Nik, Aug 30 2026: "the dates on the relationship box is purple on purple we cant read".) /me/index.html sets .cw-dates to var(--astro-deep,#3b3160) — a dark purple written for the old cream page. On this night panel that is the same purple as the card behind it. Cream, and loud enough to be the first thing read. */ body.is-signed-in .cw-dates{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.35rem; color:var(--dink) !important;font-weight:600;line-height:1.15;} body.is-signed-in .cw-ghost .cw-dates{color:var(--dink2) !important;} body.is-signed-in :is(.cw-slab,.cw-len,.cw-flav){color:var(--dink2);} body.is-signed-in .cwb-t{background:var(--dline);border-radius:3px;overflow:hidden;} body.is-signed-in .cwb-t i{background:var(--dgold);} body.is-signed-in .cw-unlock{border:1px solid var(--dgold) !important;background:var(--dpanel) !important;} body.is-signed-in .cw-untag{color:var(--easy);border:1px solid var(--easy);border-radius:999px;display:inline-block;padding:2px 10px;font-size:.66rem;} body.is-signed-in :is(#cw-unlock-go,#cw-showall,#cw-share){background:none;border:1px solid var(--dgold);color:var(--dgold);border-radius:999px;padding:7px 16px;cursor:pointer;} /* the check form + match report */ body.is-signed-in .state-signed-in :is(input,select,textarea){ background:var(--dbg) !important;border:1px solid var(--dline) !important;color:var(--dink) !important;border-radius:10px; } body.is-signed-in .state-signed-in ::placeholder{color:var(--dink2);} body.is-signed-in .state-signed-in label{text-transform:lowercase;letter-spacing:.06em;} body.is-signed-in .state-signed-in :is(.cp-lab,.rp-lab,.fd-eye){text-transform:lowercase !important;color:var(--dink2);} body.is-signed-in .mh-hero{border-radius:18px !important;} body.is-signed-in .kuta-top{color:var(--dink);} body.is-signed-in .kuta-desc{color:var(--dink2);} body.is-signed-in .state-signed-in [class*="err"],body.is-signed-in .state-signed-in .cw-error{ background:var(--dpanel) !important;border:1px solid var(--hard) !important;color:var(--dink) !important;border-radius:12px; } /* ═══════════════ YOU (v3) ═══════════════ */ body.is-signed-in .state-signed-in [class^="v3-"],body.is-signed-in .state-signed-in [class*=" v3-"]{color:var(--dink);} body.is-signed-in .state-signed-in :is(.v3-sub,.v3-sfine,.v3-gfine,.v3-e,.v3-m){color:var(--dink2);} body.is-signed-in .state-signed-in :is(.v3-cell,.v3-gcard,.v3-dsec){ background:var(--dpanel) !important;border:1px solid var(--dline) !important;color:var(--dink) !important;border-radius:14px; } body.is-signed-in .state-signed-in :is(.v3-cell,.v3-gcard) :is(h3,h4,b,.v3-v){color:var(--dink) !important;} body.is-signed-in .state-signed-in :is(.v3-gbtn,.v3-sbtn){ background:none;border:1px solid var(--dgold);color:var(--dgold);border-radius:999px;padding:7px 18px;cursor:pointer; } body.is-signed-in .state-signed-in .v3-receipt{color:var(--dink2);font-size:.7rem;} body.is-signed-in .state-signed-in .v3-fade:after{background:linear-gradient(transparent,var(--dpanel));} /* ═══════════════ TRAVEL & HOME ═══════════════ */ body.is-signed-in .state-signed-in :is(.rep-card,.r-card){border-radius:16px !important;} body.is-signed-in .state-signed-in .rep-card:hover{border-color:var(--dgold) !important;} body.is-signed-in .state-signed-in :is(.bo-btn,.bo-form button){ background:none;border:1px solid var(--dgold);color:var(--dgold);border-radius:999px;padding:8px 18px;cursor:pointer; } body.is-signed-in .state-signed-in .bo-out{background:var(--dpanel);border:1px solid var(--dline);border-radius:14px;color:var(--dink);} body.is-signed-in .state-signed-in .bo-divider{border-color:var(--dline);} body.is-signed-in .state-signed-in [class^="acg-"],body.is-signed-in .state-signed-in [class*=" acg-"]{color:var(--dink);} body.is-signed-in .state-signed-in .acg-how-t{color:var(--dgold);} body.is-signed-in .state-signed-in :is(.tcell,.today-strip){background:var(--dpanel) !important;border:1px solid var(--dline) !important;color:var(--dink) !important;border-radius:14px;} body.is-signed-in .state-signed-in :is(.tcell-eye,.tcell-s){color:var(--dink2);} body.is-signed-in .state-signed-in .fd-rest{color:var(--dink2);} /* generic light-surface killer: any leftover pale card goes dark */ body.is-signed-in .state-signed-in :is(.r-empty,.money-room,.money-jots,.dm-sec,.bo-lead,.bo-honest){color:var(--dink);} /* ═══════════════ SITE HEADER on the dashboard — joins the night ═══════════════ */ body.is-signed-in nav{ background:var(--dbg2) !important;border-bottom:1px solid var(--dline);color:var(--dink); } body.is-signed-in nav :is(a,span,b,.nav-line){color:var(--dink);} body.is-signed-in nav #greet-date,body.is-signed-in nav #nav-chapter{color:var(--dink2);} body.is-signed-in nav .nav-act{ background:none;border:1px solid var(--dgold);color:var(--dgold);border-radius:999px; } body.is-signed-in nav .nav-act.demo-cta{background:var(--dgold);color:#2c2017;border-color:var(--dgold);} /* ═══════════════ THE TWELVE ROOMS + long arcs (both render paths) ═══════════════ */ body.is-signed-in .state-signed-in :is(.tr-card,.v3-rm,.ac-card){ background:var(--dpanel) !important;border:1px solid var(--dline) !important; color:var(--dink) !important;border-radius:14px !important; } body.is-signed-in .state-signed-in :is(.tr-h,.v3-h,.ac-card-name){color:var(--dgold) !important;font-size:.68rem;letter-spacing:.1em;text-transform:lowercase !important;} body.is-signed-in .state-signed-in :is(.tr-t,.v3-t,.ac-card-value){color:var(--dink) !important;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;} body.is-signed-in .state-signed-in :is(.tr-s,.v3-s,.tr-l,.v3-l,.tr-a,.ac-card-note){color:var(--dink2) !important;} body.is-signed-in .state-signed-in .tr-head{background:none !important;} body.is-signed-in .state-signed-in .tr-card:hover{border-color:var(--dgold) !important;} body.is-signed-in .state-signed-in .tr-chev{color:var(--dink2);} /* the you-v3 reading pane + sidebar + gates */ body.is-signed-in .state-signed-in :is(.v3-wrap,.v3-ch) h3{color:var(--dink);} body.is-signed-in .state-signed-in .v3-k{color:var(--dgold);} body.is-signed-in .state-signed-in :is(.v3-gover,.v3-wb){color:var(--dink);} body.is-signed-in .state-signed-in .v3-gcard{ background:linear-gradient(160deg,#3b3160,#241d38) !important;border:1px solid var(--dline) !important;color:var(--dink) !important;border-radius:16px !important; } body.is-signed-in .state-signed-in .v3-rooms{opacity:1;} /* generic: any inline-styled light backgrounds that slip through */ body.is-signed-in .state-signed-in [style*="background:#fff"], body.is-signed-in .state-signed-in [style*="background: #fff"], body.is-signed-in .state-signed-in [style*="background:#fbf5ea"]{ background:var(--dpanel) !important;color:var(--dink) !important; } /* windows load-failure card joins the theme */ body.is-signed-in .state-signed-in .cw-loading, body.is-signed-in .state-signed-in .cw-fail{ background:var(--dpanel) !important;border:1px solid var(--hard) !important; color:var(--dink) !important;border-radius:12px;padding:14px 18px; } body.is-signed-in .state-signed-in .cw-fail-why{color:var(--dink2);} /* love panel polish — kill the cream wrapper, dark stats, readable values */ body.is-signed-in .state-signed-in .cw-panel{background:transparent !important;border:none !important;} body.is-signed-in .state-signed-in .cw-stat{background:transparent !important;border:none !important;color:var(--dink);} body.is-signed-in .state-signed-in .cw-stats{background:var(--dpanel) !important;} body.is-signed-in .state-signed-in .cw-sval{color:var(--dink) !important;} body.is-signed-in .state-signed-in .cw-starname{color:var(--dgold) !important;} body.is-signed-in .state-signed-in :is(.cw-slab,.cwb-l,.cw-statl,.cw-untag,.cw-len){text-transform:lowercase !important;letter-spacing:.06em;} body.is-signed-in .state-signed-in .cw-unlock b{color:var(--dgold);} body.is-signed-in .state-signed-in .cw-morebar #cw-showall{background:var(--dpanel) !important;border:1px solid var(--dgold) !important;color:var(--dgold) !important;} body.is-signed-in .state-signed-in .cw-headbtns :is(a,button){border:1px solid var(--dgold);border-radius:999px;padding:6px 14px;color:var(--dgold);background:none;} body.is-signed-in .state-signed-in .cw-spread b{color:var(--dgold);} /* the reading pane — lead jots, gate, status lines all readable on dark */ body.is-signed-in .state-signed-in :is(.rp-lead,.rp-lead-j,.rp-lead p,.bo-lead){color:var(--dink) !important;} body.is-signed-in .state-signed-in .rp-lead-j.fade{color:var(--dink2) !important;} body.is-signed-in .state-signed-in .rp-lead-gate{ background:linear-gradient(160deg,#3b3160,#241d38) !important;border:1px solid var(--dline) !important; color:var(--dink) !important;border-radius:14px !important; } body.is-signed-in .state-signed-in .rp-lead-gate .gk{color:var(--dink2);} body.is-signed-in .state-signed-in :is(.rcount,.pe){color:var(--dink2) !important;} body.is-signed-in .state-signed-in :is(.muted,.small,.soft){color:var(--dink2) !important;} body.is-signed-in .state-signed-in .rep-chip{border:1px solid var(--dline);color:var(--dink);background:var(--dpanel);border-radius:999px;} body.is-signed-in .state-signed-in .rep-chip:hover{border-color:var(--dgold);} /* ════════════════════════════════════════════════════════════════════════ THE MOCK'S OWN COMPONENT CSS (Nik, Aug 23 2026) — scoped under .v2. the mock is the page: these rules ARE mockdashboardv2.html's stylesheet, machine-scoped so nothing from the old sheet can bleed into it. ════════════════════════════════════════════════════════════════════════ */ body.is-signed-in{ --bg:#1b1730; --bg2:#2a1f3a; --panel:#241d38; --line:#3b3160; --ink:#f4ebdd; --ink2:#9a8770; --gold:#cf9a5e; --easy:#5fa86c; --good:#cf9a5e; --mixed:#9bb0d6; --hard:#d05a47; } body.is-signed-in .v2{font-size:18px;color:var(--ink);} body.is-signed-in .v2 .lwhy{color:var(--ink2);} body.is-signed-in .v2 .lspan{color:var(--ink2);font-size:.68rem;} body.is-signed-in .v2 .fr .d small{display:block;font-size:.62rem;color:var(--ink2);} body.is-signed-in .v2 .fr .d{width:84px;} body.is-signed-in .v2 .fmore{padding:12px 18px;font-size:.74rem;color:var(--ink2);} body.is-signed-in .v2 .v2-loading{padding:14px 18px;font-size:.82rem;color:var(--ink2);} body.is-signed-in .v2 .why .ss-alt{margin-top:8px;color:var(--ink2);} body.is-signed-in .v2 .why .ss-alt summary{cursor:pointer;color:var(--gold);font-size:.72rem;} body.is-signed-in .v2{box-sizing:border-box;} body.is-signed-in .v2 /* ── side rail (v9 style) ── */ .rail{position:fixed;left:0;top:0;bottom:0;width:84px;background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding-top:22px;gap:6px;z-index:10;} body.is-signed-in .v2 .wrap{margin:0 auto;padding:34px 26px 90px;max-width:940px;} body.is-signed-in .v2 /* ── hero = the weather report ── */ .hero{background:linear-gradient(160deg,#3b3160,#2a1f3a 70%);border:1px solid var(--line);border-radius:22px;padding:34px 30px 26px;text-align:center;} body.is-signed-in .v2 .eye{font-size:.72rem;letter-spacing:.14em;text-transform:lowercase;color:var(--ink2);} body.is-signed-in .v2 .day-glyph{font-size:3.4rem;margin:14px 0 2px;} body.is-signed-in .v2 .day-word{font-size:3rem;line-height:1.1;color:var(--good);} body.is-signed-in .v2 .day-line{margin:10px auto 0;max-width:420px;font-size:1.02rem;color:var(--ink);opacity:.92;} body.is-signed-in .v2 .day-src{margin-top:10px;font-size:.72rem;color:var(--ink2);} body.is-signed-in .v2 .day-read{margin:16px auto 0;max-width:520px;font-size:.86rem;line-height:1.65;color:var(--ink);opacity:.85;border-top:1px solid var(--line);padding-top:14px;} body.is-signed-in .v2 .sig{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:16px;} body.is-signed-in .v2 .sig span{border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:.7rem;color:var(--ink2);} /* the four pills open a plain explanation of that placement (Sep 6 2026) */ body.is-signed-in .v2 .sig span[data-sig]{cursor:pointer;} body.is-signed-in .v2 .sig span[data-sig]:hover,body.is-signed-in .v2 .sig span[data-sig]:focus-visible{border-color:var(--gold);color:var(--ink);outline:none;} body.is-signed-in .v2 .retro{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--mixed);border-radius:12px;padding:12px 16px;margin:12px 0 0;font-size:.8rem;} body.is-signed-in .v2 .retro .r-ic{font-size:1.05rem;} body.is-signed-in .v2 .retro small{color:var(--ink2);display:block;margin-top:2px;font-size:.72rem;} body.is-signed-in .v2 .mech{margin-top:26px;background:var(--panel);border:1px solid var(--line);border-radius:16px;} body.is-signed-in .v2 .mech summary{padding:14px 18px;font-size:.8rem;color:var(--ink2);cursor:pointer;list-style:none;} body.is-signed-in .v2 .mech summary::-webkit-details-marker{display:none;} body.is-signed-in .v2 .mech table{width:100%;border-collapse:collapse;font-size:.74rem;} body.is-signed-in .v2 .mech th{color:var(--ink2);font-weight:normal;text-align:left;padding:8px 18px;border-bottom:1px solid var(--line);} body.is-signed-in .v2 .mech td{padding:8px 18px;border-bottom:1px solid var(--line);color:var(--ink);} body.is-signed-in .v2 .mech tr:last-child td{border-bottom:none;} body.is-signed-in .v2 .mech .m-note{padding:12px 18px 16px;font-size:.7rem;color:var(--ink2);line-height:1.6;} body.is-signed-in .v2 .askline{display:inline-block;margin-top:8px;color:var(--gold);font-size:.76rem;cursor:pointer;} body.is-signed-in .v2 .hear{display:inline-block;margin-top:14px;border:1px solid var(--gold);color:var(--gold);border-radius:999px;padding:5px 16px;font-size:.8rem;cursor:pointer;background:none;font-family:inherit;} body.is-signed-in .v2 .legend{display:flex;justify-content:center;gap:16px;margin-top:18px;font-size:.72rem;color:var(--ink2);} body.is-signed-in .v2 .legend b{font-weight:normal;} body.is-signed-in .v2 .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:1px;} body.is-signed-in .v2 .d-easy{background:var(--easy);} body.is-signed-in .v2 .d-good{background:var(--good);} body.is-signed-in .v2 .d-mixed{background:var(--mixed);} body.is-signed-in .v2 .d-hard{background:var(--hard);} body.is-signed-in .v2 /* ── conditions row (weather widgets) ── */ .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px;} body.is-signed-in .v2 .tile{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 14px;text-align:center;} /* the season tile carries the two questions of the chapter read (Sep 5 2026) */ body.is-signed-in .v2 .tile-season{text-align:left;cursor:pointer;} body.is-signed-in .v2 .tile-season .money-jots{max-width:none;margin:8px 0 6px;font-size:.92rem;line-height:1.5;} body.is-signed-in .v2 .tile-season .t-sub{margin-top:4px;} body.is-signed-in .v2 .tile .t-eye{font-size:.66rem;color:var(--ink2);letter-spacing:.08em;} body.is-signed-in .v2 .ring{width:74px;height:74px;margin:10px auto 6px;position:relative;} body.is-signed-in .v2 .ring svg{transform:rotate(-90deg);} body.is-signed-in .v2 .ring .track{stroke:var(--line);} body.is-signed-in .v2 .ring .fill{stroke:var(--gold);stroke-linecap:round;transition:stroke-dashoffset 1.6s ease;} body.is-signed-in .v2 .ring .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1.15rem;} body.is-signed-in .v2 .ring .mid small{font-size:.62rem;color:var(--ink2);} body.is-signed-in .v2 .tile .t-word{font-size:.92rem;margin-top:2px;} body.is-signed-in .v2 .tile .t-sub{font-size:.7rem;color:var(--ink2);margin-top:4px;line-height:1.5;} body.is-signed-in .v2 .tile .big{font-size:1.9rem;margin:12px 0 4px;} body.is-signed-in .v2 /* ── the moon-cycle bar (kept — it teaches) ── */ .strip{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin-top:12px;} body.is-signed-in .v2 .strip .top{display:flex;justify-content:space-between;font-size:.76rem;color:var(--ink2);margin-bottom:12px;} body.is-signed-in .v2 .track{position:relative;height:8px;border-radius:4px;background:var(--line);} body.is-signed-in .v2 .fillbar{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,#6a5a9c,var(--gold));width:0;transition:width 1.6s ease;} body.is-signed-in .v2 .pm{position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--line);} body.is-signed-in .v2 .pm.on{border-color:var(--gold);} body.is-signed-in .v2 .pm.full{background:var(--ink);} body.is-signed-in .v2 .pm.half{background:linear-gradient(90deg,var(--ink) 50%,var(--bg) 50%);} body.is-signed-in .v2 .pm.half2{background:linear-gradient(90deg,var(--bg) 50%,var(--ink) 50%);} /* ── THE MOON READ (Nik, Aug 29 2026) ──────────────────────────────────────── Lives in tile 4 of the today split. Only rendered for three days either side of a full moon or an eclipse — the rest of the month the tile is hidden and the row is three across. Deliberately plain: every card in that instagram feed is a black-and-purple portal graphic, so a quiet one in his own gold stops the scroll. */ body.is-signed-in .v2 .mn-read{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;} body.is-signed-in .v2 .mn-disc{flex:0 0 34px;height:34px;border-radius:50%;margin-top:2px; background:radial-gradient(circle at 34% 30%,#fffaf0 0%,#f0e2c8 52%,#c8b492 100%); box-shadow:0 0 24px -4px rgba(240,226,200,.5), inset -5px -4px 9px -5px rgba(40,25,15,.55);} body.is-signed-in .v2 .mn-disc.is-red{ background:radial-gradient(circle at 34% 30%,#e8b48c 0%,#bf6f4a 52%,#8a3f27 100%); box-shadow:0 0 26px -4px rgba(191,111,74,.55), inset -5px -4px 9px -5px rgba(35,12,6,.6);} body.is-signed-in .v2 .mn-body{flex:1;min-width:0;} body.is-signed-in .v2 .mn-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:5px;} body.is-signed-in .v2 .mn-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.3rem;line-height:1.1;color:var(--ink);} body.is-signed-in .v2 .mn-when{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);} body.is-signed-in .v2 .mn-lands{font-size:.78rem;line-height:1.55;color:var(--ink2);} /* the line people actually screenshot, so it carries the weight on the bar too */ body.is-signed-in .v2 .mn-line{font-size:.94rem;line-height:1.6;color:var(--ink);margin-top:4px;} body.is-signed-in .v2 .mn-share{flex:0 0 auto;align-self:center;background:none; border:1px solid var(--line);border-radius:999px;padding:7px 15px;font:inherit;font-size:.76rem; color:var(--ink2);cursor:pointer;transition:border-color .18s,color .18s;} body.is-signed-in .v2 .mn-share:hover{border-color:var(--gold);color:var(--gold);} body.is-signed-in .v2 .mn-share[disabled]{opacity:.55;cursor:default;} @media(max-width:620px){ body.is-signed-in .v2 .mn-read{flex-wrap:wrap;gap:11px;} body.is-signed-in .v2 .mn-share{width:100%;align-self:stretch;text-align:center;} } body.is-signed-in .v2 .strip .lg{display:flex;justify-content:space-between;font-size:.66rem;color:var(--ink2);margin-top:10px;} body.is-signed-in .v2 /* ── section heads ── */ h2{font-size:.8rem;letter-spacing:.14em;color:var(--ink2);font-weight:normal;margin:30px 4px 10px;display:flex;justify-content:space-between;align-items:baseline;} body.is-signed-in .v2 h2 span{font-size:.68rem;letter-spacing:0;} body.is-signed-in .v2 /* ── right now: 3 chips ── */ .now{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;} body.is-signed-in .v2 .chip{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;cursor:pointer;} body.is-signed-in .v2 .chip .c-eye{font-size:.72rem;color:var(--ink2);} body.is-signed-in .v2 .chip .c-word{font-size:1.25rem;margin-top:6px;} body.is-signed-in .v2 .chip .c-body{font-size:.8rem;color:var(--ink2);line-height:1.55;margin-top:8px;max-height:0;overflow:hidden;transition:max-height .35s ease;} body.is-signed-in .v2 .chip.open .c-body{max-height:120px;} body.is-signed-in .v2 .chip .c-tap{font-size:.64rem;color:var(--ink2);margin-top:8px;opacity:.7;} body.is-signed-in .v2 /* ── forecast list ── */ .fc{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;} body.is-signed-in .v2 .fr{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);cursor:pointer;} body.is-signed-in .v2 .fc > div:last-of-type,body.is-signed-in .v2 .fc .fr:nth-last-child(2){border-bottom:none;} body.is-signed-in .v2 .fr .d{width:64px;font-size:.74rem;color:var(--ink2);flex:none;} body.is-signed-in .v2 .fr .i{width:26px;text-align:center;flex:none;font-size:1.05rem;} body.is-signed-in .v2 .fr .w{flex:1;font-size:.9rem;} body.is-signed-in .v2 .why{display:none;font-size:.78rem;color:var(--ink2);line-height:1.55;padding:0 18px 14px 104px;border-bottom:1px solid var(--line);} body.is-signed-in .v2 .fr.open + .why{display:block;} body.is-signed-in .v2 /* ── layers: collapsed rows ── */ .ly{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;} body.is-signed-in .v2 .lr{padding:14px 18px;border-bottom:1px solid var(--line);cursor:pointer;} body.is-signed-in .v2 .lr:last-child{border-bottom:none;} body.is-signed-in .v2 .lr .row1{display:flex;align-items:center;gap:12px;} body.is-signed-in .v2 .lr .n{flex:1;font-size:.9rem;} body.is-signed-in .v2 .lr .n small{color:var(--ink2);font-size:.72rem;margin-left:8px;} body.is-signed-in .v2 .lr .mini{width:110px;height:5px;border-radius:3px;background:var(--line);position:relative;flex:none;} body.is-signed-in .v2 .lr .mini i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--gold);} body.is-signed-in .v2 .lr .more{max-height:0;overflow:hidden;transition:max-height .35s ease;font-size:.8rem;color:var(--ink2);line-height:1.6;} body.is-signed-in .v2 .lr.open .more{max-height:600px;padding-top:10px;} body.is-signed-in .v2 .lesson{display:none;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);line-height:1.7;} body.is-signed-in .v2 .lesson.open{display:block;} body.is-signed-in .v2 .lesson b{color:var(--gold);font-weight:normal;} body.is-signed-in .v2 .lr .more b{color:var(--ink);font-weight:normal;} body.is-signed-in .v2 .season{background:linear-gradient(160deg,#2a1f3a,#241d38);border:1px solid var(--line);border-radius:16px;padding:20px 22px;font-size:.9rem;line-height:1.65;color:var(--ink);} body.is-signed-in .v2 .season .eye{margin-bottom:8px;} body.is-signed-in .v2 .note{text-align:center;font-size:.7rem;color:var(--ink2);margin-top:26px;line-height:1.6;} body.is-signed-in .v2 /* ── pages ── */ .page{display:none;} body.is-signed-in .v2 from{opacity:0;transform:translateY(8px);} body.is-signed-in .v2 to{opacity:1;transform:none;} body.is-signed-in .v2 /* ── you tab ── */ .shelf-eye{padding:12px 18px 4px;font-size:.68rem;letter-spacing:.14em;color:var(--gold);} body.is-signed-in .v2 .lr .lk{font-size:.8rem;color:var(--ink2);flex:none;} body.is-signed-in .v2 .lr .lk.free{color:var(--easy);border:1px solid var(--easy);border-radius:999px;padding:2px 10px;font-size:.66rem;} body.is-signed-in .v2 .lifebar{position:relative;display:flex;height:26px;border-radius:8px;overflow:hidden;} body.is-signed-in .v2 .lifebar span{cursor:pointer;opacity:.85;} body.is-signed-in .v2 .lifebar span:hover{opacity:1;} body.is-signed-in .v2 .now-pin{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--ink);} body.is-signed-in .v2 .now-pin b{position:absolute;top:-16px;left:-12px;font-size:.62rem;color:var(--ink2);font-weight:normal;} body.is-signed-in .v2 .rooms{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;} body.is-signed-in .v2 .room{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center;cursor:pointer;font-size:1.15rem;color:var(--gold);} body.is-signed-in .v2 .room:hover{border-color:var(--gold);} body.is-signed-in .v2 .room small{display:block;font-size:.68rem;color:var(--ink2);margin-top:6px;line-height:1.45;} body.is-signed-in .v2 .unlockbar{text-align:center;margin-top:30px;} body.is-signed-in .v2 .unlockbar small{display:block;margin-top:8px;font-size:.7rem;color:var(--ink2);} body.is-signed-in .v2 /* ── love tab ── */ .lovewrap{margin-top:22px;} body.is-signed-in .v2 .pair{display:flex;align-items:center;justify-content:center;gap:6px;} body.is-signed-in .v2 .pcirc{width:58px;height:58px;border-radius:50%;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:.85rem;position:relative;background:var(--bg2);} body.is-signed-in .v2 .pcirc.them{color:var(--hard);} body.is-signed-in .v2 .pinlab{position:absolute;top:64px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.64rem;color:var(--ink2);} body.is-signed-in .v2 .pairword{font-size:1.5rem;margin:26px 0 10px;} body.is-signed-in .v2 .yearbar{display:flex;gap:2px;height:34px;border-radius:8px;overflow:hidden;} body.is-signed-in .v2 .yearbar span{flex:1;cursor:pointer;opacity:.8;transition:opacity .15s;} /* Sep 2 2026: the ring was cream only, invisible on the pale-blue 'mixed' stretches. A thin dark line inside the cream shows on every colour. */ body.is-signed-in .v2 .yearbar span:hover,body.is-signed-in .v2 .yearbar span.sel{opacity:1;outline:2px solid var(--ink);outline-offset:-2px;box-shadow:inset 0 0 0 4px var(--bg,#1a1230);} body.is-signed-in .v2 .pairread{margin-top:14px;} body.is-signed-in .v2 .lovewrap .lg{display:flex;justify-content:space-between;font-size:.66rem;color:var(--ink2);margin-top:8px;} body.is-signed-in .v2 .pbars{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:560px;margin:0 auto;} body.is-signed-in .v2 .pb span{font-size:.68rem;color:var(--ink2);} body.is-signed-in .v2 .pb i{display:block;height:6px;border-radius:3px;background:var(--line);margin-top:4px;position:relative;overflow:hidden;} body.is-signed-in .v2 .pb b{display:block;height:100%;border-radius:3px;background:var(--gold);transition:width .5s ease;} body.is-signed-in .v2 .pairfoot{margin-top:12px;font-size:.8rem;color:var(--ink2);line-height:1.6;} body.is-signed-in .v2 .glance{display:flex;align-items:center;gap:22px;} body.is-signed-in .v2 .big-ring{width:110px;height:110px;flex:none;position:relative;} body.is-signed-in .v2 .glance-txt{font-size:.9rem;line-height:1.65;} body.is-signed-in .v2 .glance-txt small{color:var(--ink2);display:block;margin-top:6px;font-size:.72rem;} body.is-signed-in .v2 .kutas{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:8px 22px;} body.is-signed-in .v2 .kr{display:flex;align-items:center;gap:10px;font-size:.8rem;} body.is-signed-in .v2 .kr .kn{width:130px;flex:none;} body.is-signed-in .v2 .kr i{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden;display:block;} body.is-signed-in .v2 .kr b{display:block;height:100%;background:var(--gold);border-radius:3px;} body.is-signed-in .v2 .kr .kv{width:34px;text-align:right;color:var(--ink2);font-size:.7rem;flex:none;} body.is-signed-in .v2 .wlock{filter:blur(3px);opacity:.55;pointer-events:none;user-select:none;} body.is-signed-in .v2 .wlock-note{padding:12px 18px;font-size:.76rem;color:var(--gold);border-bottom:1px solid var(--line);} body.is-signed-in .v2 /* ── the reader (full reading view) ── */ #reader{display:none;position:fixed;inset:0;background:rgba(10,8,20,.88);z-index:96;overflow-y:auto;padding:40px 16px;} body.is-signed-in #reader.open{display:block;} body.is-signed-in .rd-pane{max-width:720px;margin:0 auto;background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:34px 38px 30px;position:relative;} body.is-signed-in .rd-count{position:absolute;top:22px;right:26px;font-size:.68rem;color:var(--ink2);} body.is-signed-in .rd-eye{font-size:.7rem;letter-spacing:.12em;color:var(--ink2);} body.is-signed-in .rd-pane h4{font-size:1.7rem;margin:6px 0 4px;color:var(--gold);font-weight:normal;} body.is-signed-in .rd-sec h5{font-size:1.02rem;color:var(--ink);margin:22px 0 6px;font-weight:normal;border-bottom:1px solid var(--line);padding-bottom:6px;} body.is-signed-in .rd-sec p{font-size:.88rem;line-height:1.7;color:var(--ink);opacity:.9;} body.is-signed-in .rd-receipt{margin-top:24px;padding-top:12px;border-top:1px solid var(--line);font-size:.7rem;color:var(--ink2);} body.is-signed-in .rd-fade{max-height:150px;overflow:hidden;position:relative;} body.is-signed-in .rd-fade:after{content:'';position:absolute;left:0;right:0;bottom:0;height:80px;background:linear-gradient(transparent,var(--bg2));} body.is-signed-in .rd-gate{margin-top:14px;background:linear-gradient(160deg,#3b3160,#241d38);border:1px solid var(--line);border-radius:14px;padding:22px;text-align:center;} body.is-signed-in .rd-gate .g-eye{font-size:.68rem;letter-spacing:.12em;color:var(--ink2);} body.is-signed-in .rd-gate h6{font-size:1.05rem;font-weight:normal;margin:8px 0 14px;} body.is-signed-in .rd-gate small{display:block;margin-top:10px;font-size:.7rem;color:var(--ink2);} body.is-signed-in .rd-hook{margin-top:24px;background:linear-gradient(160deg,#3b3160,#2a1f3a);border:1px solid var(--line);border-radius:14px;padding:18px 20px;font-size:.82rem;line-height:1.6;} body.is-signed-in .rd-hook .g-eye{font-size:.66rem;letter-spacing:.12em;color:var(--ink2);margin-bottom:6px;} body.is-signed-in .rd-nav{display:flex;justify-content:space-between;margin-top:26px;gap:10px;} body.is-signed-in .rd-nav button{background:none;border:1px solid var(--line);color:var(--ink2);border-radius:999px;padding:8px 18px;font-family:inherit;font-size:.76rem;cursor:pointer;} body.is-signed-in .rd-nav button:hover{color:var(--ink);border-color:var(--gold);} body.is-signed-in .rd-close{position:absolute;top:20px;left:22px;background:none;border:none;color:var(--ink2);font-size:1rem;cursor:pointer;font-family:inherit;} body.is-signed-in .v2 /* ── love: check form + deep report ── */ .checkform{display:grid;grid-template-columns:1fr 1fr;gap:12px;} body.is-signed-in .v2 .cf-field{display:flex;flex-direction:column;gap:5px;font-size:.72rem;color:var(--ink2);} body.is-signed-in .v2 .cf-field input,body.is-signed-in .v2 .cf-field select{background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:9px 12px;font-family:inherit;font-size:.82rem;} body.is-signed-in .v2 .cf-wide{grid-column:1/-1;} body.is-signed-in .v2 .cf-check{grid-column:1/-1;font-size:.76rem;color:var(--ink2);display:flex;align-items:center;gap:8px;} body.is-signed-in .v2 .cf-note{grid-column:1/-1;font-size:.68rem;color:var(--ink2);} body.is-signed-in .v2 .savedchecks{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;} body.is-signed-in .v2 .sv{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.72rem;color:var(--ink2);cursor:pointer;} body.is-signed-in .v2 .sv b{color:var(--ink);font-weight:normal;} body.is-signed-in .v2 .sv i{font-style:normal;margin-left:6px;opacity:.6;} body.is-signed-in .v2 .karmic{background:linear-gradient(160deg,#3b3160,#241d38);border:1px solid var(--gold);border-radius:14px;padding:18px 20px;margin-top:14px;} body.is-signed-in .v2 .karmic .g-eye{font-size:.68rem;letter-spacing:.12em;color:var(--gold);} body.is-signed-in .v2 .karmic h6{font-size:1.05rem;font-weight:normal;margin:6px 0 6px;} body.is-signed-in .v2 .karmic p{font-size:.82rem;line-height:1.6;color:var(--ink);opacity:.9;} body.is-signed-in .v2 .karmic small{display:block;margin-top:8px;font-size:.66rem;color:var(--ink2);} body.is-signed-in .v2 .flowgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;} body.is-signed-in .v2 .flowcol{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;} body.is-signed-in .v2 .flowcol h6{font-size:.86rem;font-weight:normal;margin-bottom:10px;color:var(--gold);} body.is-signed-in .v2 .flowcol li{font-size:.78rem;line-height:1.6;color:var(--ink);opacity:.9;margin-left:16px;margin-bottom:6px;} body.is-signed-in .v2 .deepsec{border-top:1px solid var(--line);margin-top:18px;padding-top:14px;} body.is-signed-in .v2 .deepsec h6{font-size:.9rem;font-weight:normal;margin-bottom:8px;} body.is-signed-in .v2 .deepsec p{font-size:.8rem;line-height:1.65;color:var(--ink);opacity:.88;} body.is-signed-in .v2 .synchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;} body.is-signed-in .v2 .sc{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.72rem;color:var(--ink2);} body.is-signed-in .v2 .sc b{color:var(--ink);font-weight:normal;} body.is-signed-in .v2 .verdict{font-size:.64rem;border:1px solid var(--line);border-radius:999px;padding:2px 8px;color:var(--ink2);margin-left:8px;white-space:nowrap;} body.is-signed-in .v2 .winstats{display:flex;gap:48px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 24px;margin-bottom:12px;flex-wrap:wrap;} body.is-signed-in .v2 .winstats .ws{padding-right:48px;border-right:1px solid var(--line);} body.is-signed-in .v2 .winstats .ws:nth-last-child(2){border-right:none;} body.is-signed-in .v2 .ws b{display:block;font-size:1.3rem;color:var(--gold);font-weight:normal;} body.is-signed-in .v2 .ws span{font-size:.68rem;color:var(--ink2);} body.is-signed-in .v2 .ws-spread{font-size:.72rem;color:var(--ink2);flex:1;min-width:200px;line-height:1.5;} body.is-signed-in .v2 /* ── travel: map lock,body.is-signed-in .v2 categories,body.is-signed-in .v2 lookup,body.is-signed-in .v2 vastu form ── */ .maplock{position:relative;} body.is-signed-in .v2 .lockover{display:none;position:absolute;inset:0;background:rgba(27,23,48,.86);border-radius:16px;z-index:5;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;} body.is-signed-in .v2 .lockover .big{font-size:1.6rem;} body.is-signed-in .v2 .lockover p{font-size:.82rem;color:var(--ink2);max-width:380px;line-height:1.6;} body.is-signed-in .v2 .catrow{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);font-size:.84rem;cursor:pointer;} body.is-signed-in .v2 .catrow:last-child{border-bottom:none;} body.is-signed-in .v2 .catrow .cat{width:150px;flex:none;color:var(--gold);} body.is-signed-in .v2 .catrow .place{flex:1;} body.is-signed-in .v2 .catrow small{color:var(--ink2);font-size:.72rem;} body.is-signed-in .v2 .lookup{display:flex;gap:10px;margin-top:12px;} body.is-signed-in .v2 .lookup input{flex:1;background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:10px 18px;font-family:inherit;font-size:.82rem;} body.is-signed-in .v2 .northbox{border:1px solid var(--gold);border-radius:12px;padding:14px 16px;font-size:.78rem;line-height:1.6;color:var(--ink);margin:14px 0;} body.is-signed-in .v2 .dropzone{border:2px dashed var(--line);border-radius:14px;padding:26px;text-align:center;font-size:.8rem;color:var(--ink2);cursor:pointer;margin-bottom:12px;} body.is-signed-in .v2 .dropzone:hover{border-color:var(--gold);color:var(--ink);} body.is-signed-in .v2 .vgate{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap;} body.is-signed-in .v2 .adjust li{font-size:.8rem;line-height:1.65;color:var(--ink);opacity:.9;list-style:none;margin-bottom:8px;} body.is-signed-in .v2 .fold{margin-top:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;} body.is-signed-in .v2 .fold summary{padding:13px 18px;font-size:.78rem;color:var(--ink2);cursor:pointer;list-style:none;} body.is-signed-in .v2 .fold summary::-webkit-details-marker{display:none;} body.is-signed-in .v2 .fold .fin{padding:0 18px 16px;font-size:.78rem;line-height:1.65;color:var(--ink);opacity:.88;} body.is-signed-in .v2 /* ── travel tab ── */ .doorrow{display:flex;justify-content:center;gap:10px;margin-top:12px;} body.is-signed-in .v2 .door{border:1px solid var(--gold);background:none;color:var(--gold);border-radius:999px;padding:8px 20px;font-family:inherit;font-size:.82rem;cursor:pointer;} body.is-signed-in .v2 .door:hover{background:var(--line);} body.is-signed-in .v2 .rooms.vastu .room{font-size:1.5rem;color:var(--ink);border-left:4px solid var(--line);} body.is-signed-in .v2 .room.v-good{border-left-color:#5b8a5b;} body.is-signed-in .v2 .room.v-adj{border-left-color:#b07043;} body.is-signed-in .v2 .room.v-neu{border-left-color:#8a7a55;} @media(max-width:640px){ body.is-signed-in .v2 .rooms{grid-template-columns:repeat(2,1fr);} body.is-signed-in .v2 .kutas{grid-template-columns:1fr;} body.is-signed-in .v2 .glance{flex-direction:column;text-align:center;} body.is-signed-in .v2 .tiles[style]{grid-template-columns:repeat(2,1fr) !important;} body.is-signed-in .v2 .wrap{padding:22px 14px 110px;} body.is-signed-in .v2 .why{padding-left:18px;} body.is-signed-in .v2 .strip .top{flex-direction:column;gap:4px;} body.is-signed-in .v2 .tiles{grid-template-columns:repeat(2,1fr);} body.is-signed-in .v2 .now{grid-template-columns:1fr;} body.is-signed-in .v2 .day-word{font-size:2.3rem;} body.is-signed-in .v2 .fr .why{padding-left:18px;} } /* the free place strip — mock dress for the real #free-door-strip */ body.is-signed-in .v2 .free-door{background:linear-gradient(160deg,#3b3160,#241d38);border:1px solid var(--line); border-radius:16px;padding:18px 20px;margin:0 0 14px;text-align:center;color:var(--ink);} body.is-signed-in .v2 .free-door .fd-eye{display:block;font-size:.7rem;letter-spacing:.12em;color:var(--gold);margin-bottom:6px;} body.is-signed-in .v2 .free-door b{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.3rem;font-weight:600;} body.is-signed-in .v2 .free-door .fd-rest{color:var(--ink2);font-size:.74rem;display:block;margin-top:8px;} body.is-signed-in .v2 .cw-yb.sel{outline:2px solid var(--ink);outline-offset:-2px;opacity:1;z-index:2;} body.is-signed-in .v2 .cw-year-track{position:relative;height:34px;border-radius:8px;background:var(--line);overflow:hidden;margin-top:16px;} body.is-signed-in .v2 .cw-year-cal{display:flex;justify-content:space-between;font-size:.66rem;color:var(--ink2);margin-top:6px;} body.is-signed-in .v2 .cw-year-eye{font-size:.7rem;letter-spacing:.1em;color:var(--ink2);margin-top:8px;} body.is-signed-in .v2 .pairword{font-size:1.5rem;margin:22px 0 0;} /* the mock's right-now chips — unique names so the host .chip/.now can't touch them */ body.is-signed-in .v2 .rnow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;} @media(max-width:640px){ body.is-signed-in .v2 .rnow{grid-template-columns:1fr;} } body.is-signed-in .v2 .rnchip{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;cursor:pointer;} body.is-signed-in .v2 .rnchip .c-eye{font-size:.72rem;color:var(--ink2);text-transform:lowercase;letter-spacing:.06em;} body.is-signed-in .v2 .rnchip .c-word{font-size:1.15rem;margin-top:6px;color:var(--ink);font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;text-transform:none;letter-spacing:0;} body.is-signed-in .v2 .rnchip .c-body{font-size:.8rem;color:var(--ink2);line-height:1.55;margin-top:8px;max-height:0;overflow:hidden;transition:max-height .35s ease;} body.is-signed-in .v2 .rnchip.open .c-body{max-height:220px;} body.is-signed-in .v2 .rnchip .c-tap{font-size:.64rem;color:var(--gold);margin-top:8px;opacity:.8;text-transform:lowercase;} /* ════════════════════════════════════════════════════════════════════════ THE YOU TAB (regular accounts) JOINS THE MOCK (Nik, Aug 23 2026 night). markup untouched — the float library becomes the mock's full-width list, the injected reading pane becomes the mock reader panel. every hook the code reaches for (.rp-list, .rep-chip, #you-chips, .rp-body) stays put. ════════════════════════════════════════════════════════════════════════ */ body.is-signed-in #you-chips.rp-list{ display:flex !important;flex-direction:column;float:none !important; background:var(--panel);border:1px solid var(--line);border-radius:16px; overflow:hidden;padding:0 !important;gap:0 !important; } body.is-signed-in #you-chips .rep-chip{ float:none !important;width:100% !important;max-width:none !important; display:flex;align-items:center;gap:12px;text-align:left; background:none !important;border:none !important;border-bottom:1px solid var(--line) !important; border-radius:0 !important;padding:14px 18px !important;color:var(--ink) !important; box-shadow:none !important;cursor:pointer; } body.is-signed-in #you-chips .rep-chip:last-child{border-bottom:none !important;} body.is-signed-in #you-chips .rep-chip:hover{background:var(--bg2) !important;} body.is-signed-in #you-chips .rep-chip[aria-expanded="true"]{background:var(--bg2) !important;} body.is-signed-in #you-chips .rep-chip i{color:var(--gold);font-style:normal;flex:none;width:1.2em;} body.is-signed-in #you-chips .rp-lab{font-size:1rem;color:var(--ink);} body.is-signed-in #you-chips .rp-sub{font-size:.74rem;color:var(--ink2);display:block;} body.is-signed-in #you-chips .rep-chip .lk{margin-left:auto;color:var(--ink2);} body.is-signed-in #you-chips .rp-shelf-h{ padding:14px 18px 6px;font-size:.68rem;letter-spacing:.14em;color:var(--gold); text-transform:lowercase;border-bottom:1px solid var(--line);background:var(--bg2); } /* the reading pane — the mock's reader panel, full width (his mobile rule) */ body.is-signed-in .rp-list .rp-body{ float:none !important;width:100% !important;max-width:none !important; background:linear-gradient(160deg,#2a1f3a,#241d38) !important; border:1px solid var(--line) !important;border-bottom:1px solid var(--line) !important; border-radius:0 !important;padding:26px 30px !important;color:var(--ink) !important; } body.is-signed-in .rp-list .rp-body h1,body.is-signed-in .rp-list .rp-body h2, body.is-signed-in .rp-list .rp-body h3,body.is-signed-in .rp-list .rp-body h4{ font-family:'Cormorant Garamond',Georgia,serif;color:var(--gold);font-weight:600; } body.is-signed-in .rp-list .rp-body p{line-height:1.7;} @media(max-width:640px){ body.is-signed-in .rp-list .rp-body{padding:20px 14px !important;margin:0 -8px !important;} } /* the free natal preview panel + its pills */ body.is-signed-in .rp-lead{ background:linear-gradient(160deg,#3b3160,#241d38) !important;border:1px solid var(--line) !important; border-radius:20px !important;color:var(--ink) !important; } body.is-signed-in .rp-lead .rp-lead-go,body.is-signed-in .rp-lead [data-natal-pill]{border-radius:999px;} body.is-signed-in .you-anchors .rep-chip{ border:1px solid var(--gold) !important;color:var(--gold) !important;border-radius:999px !important; background:none !important;width:auto !important; } /* everything running right now — rich open rows (Nik, Aug 23 late) */ body.is-signed-in .v2 .lr .lchips{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;} body.is-signed-in .v2 .lchip{border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:.62rem;color:var(--ink2);text-transform:lowercase;letter-spacing:.06em;white-space:nowrap;} body.is-signed-in .v2 .lr .lwhy{font-size:.82rem;color:var(--ink2);line-height:1.6;margin-top:8px;} body.is-signed-in .v2 .lr .lspan{display:flex;justify-content:space-between;font-size:.68rem;color:var(--ink2);margin-top:10px;} body.is-signed-in .v2 .lr .ltrack{height:6px;border-radius:3px;background:var(--line);margin-top:6px;position:relative;overflow:hidden;} body.is-signed-in .v2 .lr .ltrack i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,#6a5a9c,var(--gold));} body.is-signed-in .v2 .lr .askline{margin-top:10px;display:inline-block;} body.is-signed-in .v2 .lr .lesson{line-height:1.7;} /* the forecast — description visible under every change */ body.is-signed-in .v2 .fr .why-in{display:block;font-size:.78rem;color:var(--ink2);line-height:1.6;margin-top:6px;font-weight:400;} body.is-signed-in .v2 .fr .w b{font-size:.95rem;} body.is-signed-in .v2 .fr{align-items:flex-start;} body.is-signed-in .v2 .fr .dot{margin-top:6px;} /* jots are READABLE — the old sheet faded .money-jots for the light theme */ body.is-signed-in .money-jots li{color:var(--ink) !important;opacity:1 !important;font-size:.9rem;line-height:1.7;} body.is-signed-in .money-jots li::marker{color:var(--gold);} body.is-signed-in .v2 .day-read .money-jots{text-align:left;max-width:520px;margin:0 auto;} body.is-signed-in .v2 .tp-open{margin-top:10px;} /* the 3-part pop-up card */ body.is-signed-in .board-overlay .bo-panel{background:var(--panel) !important;border:1px solid var(--line) !important;color:var(--ink) !important;border-radius:20px !important;} body.is-signed-in .board-overlay #bo-title{color:var(--gold) !important;font-family:'Cormorant Garamond',Georgia,serif;} body.is-signed-in .board-overlay .bo-x{color:var(--ink2);} body.is-signed-in .tp-sec{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);} body.is-signed-in .tp-sec:first-child{border-top:none;margin-top:0;padding-top:0;} body.is-signed-in .tp-sec h5{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.15rem;font-weight:600;color:var(--gold);margin:0 0 6px;} /* ══════════════════════════════════════════════════════════════════════ FINAL TOUCHES (Nik, Aug 23 2026) — notes 7 + 8, and the layout breaks he could see on the live board. Design only, no hooks touched. ══════════════════════════════════════════════════════════════════════ */ /* ── tier 3: the button that opens the full in-depth read ── */ body.is-signed-in .v2 .lr .ldeep{ display:inline-block;margin-top:12px;background:none;font-family:inherit; border:1px solid var(--gold);color:var(--gold);border-radius:999px; padding:7px 20px;font-size:.8rem;cursor:pointer; } body.is-signed-in .v2 .lr .ldeep:hover{background:var(--line);} /* the reader panel has to be READABLE on the dark board — the old sheet hard-coded paragraph text to brown for the cream theme. */ body.is-signed-in .board-overlay .bo-panel p{color:var(--ink);opacity:.9;line-height:1.75;} body.is-signed-in .board-overlay .bo-panel .tp-sec p + p{margin-top:.8rem;} body.is-signed-in .board-overlay .bo-panel{max-width:640px;} /* note 8 — ON A PHONE THE IN-DEPTH VIEW IS FULL WIDTH. edge to edge, not a squished pane. */ @media(max-width:700px){ body.is-signed-in .board-overlay{padding:0;align-items:stretch;} body.is-signed-in .board-overlay .bo-panel{ max-width:none;width:100%;max-height:100vh;height:100%; border-radius:0 !important;border:none !important; padding:64px 20px 40px !important;overflow:auto; } body.is-signed-in .board-overlay .bo-x{position:fixed;top:14px;right:16px;font-size:1.6rem;z-index:2;} body.is-signed-in .board-overlay #bo-title{font-size:1.5rem;} } /* ── love: the old "compatibility" heading strip is not in the mock ── it left a heading, a rule and a run of dead space above the first card. */ body.is-signed-in #board-compat > .band > .band-head > h2{display:none;} body.is-signed-in #board-compat > .band > .band-head{ border-bottom:none;padding-bottom:0;min-height:0;justify-content:flex-end; } body.is-signed-in #board-compat > .band > .band-head:empty{display:none;} body.is-signed-in #board-compat > .band{gap:0;} body.is-signed-in #board-compat .feature-pad{padding-top:0;} /* ── every tab starts right under the bar, not 120px below it ── */ body.is-signed-in .state-signed-in > .wrap{padding-top:22px;} body.is-signed-in .board-compat,body.is-signed-in .board-travel, body.is-signed-in .board-season,body.is-signed-in .board-reading{margin-top:0;} body.is-signed-in .board-compat > .band,body.is-signed-in .board-travel > .band, body.is-signed-in .board-season > .band,body.is-signed-in .board-reading > .band{margin-top:0 !important;} /* ── love: the check form sits INSIDE its card, like every other block ── */ body.is-signed-in #board-compat .feature-pad{ background:var(--panel);border:1px solid var(--line);border-radius:16px; padding:22px 24px; } body.is-signed-in #board-compat .feature-pad > *{max-width:100%;} /* ── love: the four bars line up across all four cards ── */ body.is-signed-in .v2 .cw-cards li,body.is-signed-in .cw-cards li{ display:flex;flex-direction:column; } body.is-signed-in .cw-cards li .cw-flav{flex:1 0 auto;min-height:3.4em;} body.is-signed-in .cw-cards li .cw-bars,body.is-signed-in .cw-cards li .pb{margin-top:auto;} /* the you tab was rebuilt from scratch (v3) while these were being written, so its old selectors are dead. Left out on purpose rather than guessed at — the reading's text column and title band get looked at on the live board. */ /* ══ THE SQUISH (Nik, Aug 23 2026: "LOOK AT THE SIDES COMING IN") ══════════ The board sat in a box that was centred first and THEN pushed right to clear the rail, so it lost ~100px off the right and read as narrow on a wide screen. */ body.is-signed-in .state-signed-in > .wrap{ max-width:none;width:100%;margin:0; padding-left:104px;padding-right:32px; } @media(min-width:1500px){ /* on a big screen the reading column still needs an end — but a generous one */ body.is-signed-in .state-signed-in > .wrap{padding-right:clamp(32px,4vw,90px);} } /* ══ AND IT HAS TO LET GO ON A PHONE (Nik, Aug 29 2026) ═══════════════════ The squish fix above carries padding-left:104px to clear the side rail, with no media query on it. Line 62 already resets that to 0 under 900px — but this rule sits ~760 lines LATER at the same specificity, so it quietly won, and every phone got a 104px dead strip down the left with the content jammed against the right edge. That is the "it looks exactly like these screenshots" he showed me: the board pushed sideways, not narrow. Under 900px the rail is a bottom bar, so there is nothing left to clear. */ @media(max-width:900px){ body.is-signed-in .state-signed-in > .wrap{padding-left:14px;padding-right:14px;} } /* ══ ON A PHONE, STOP PUTTING EVERYTHING IN A BOX (Nik, Aug 29 2026) ═══════ "you also put everything in a text box and that takes up space on the page instead of having it on [the page]." He is right, and the arithmetic is brutal on a 390px screen: the wrap pays 14px a side, then the hero pays another 30px a side for its own inset, then the border and the 22px radius. That is ~90px of a 390px screen spent on chrome before a single word is set — a quarter of the phone. On desktop the card edge is what separates the read from the page. On a phone the screen edge already does that job, so the card is pure cost. The panels go full-bleed: the gradient stays (it IS the read), the box around it goes. */ @media(max-width:620px){ body.is-signed-in .v2 .hero, body.is-signed-in .v2 .strip{ margin-left:-14px;margin-right:-14px; /* cancel the wrap's gutter */ border-left:0;border-right:0;border-radius:0; } body.is-signed-in .v2 .hero{padding:26px 16px 22px;} body.is-signed-in .v2 .strip{padding:16px;background:transparent;border-top-color:var(--line);} /* the tiles stay cards on purpose — they are genuinely separate objects, and three full-bleed bands in a row would read as one long undifferentiated page. */ } /* ── LOVE OPENS ON THE MATCHES, NOT ON TWO BUTTONS (Nik, Aug 29 2026) ────── "every time I go back to love, it doesn't just start matches by birthday, it shows that it's going to read every time." On a phone .cw-headbtns wraps onto its own line ABOVE the heading, so the first thing on the screen is "share" and "read your match with someone" — the two things he is NOT there for — and the birthday bar he came for is pushed below the fold. Source order stays as it is (desktop is fine); on a phone the buttons are simply ordered after the heading they belong to. */ @media(max-width:620px){ body.is-signed-in .state-signed-in .cw-head{display:flex;flex-direction:column;} body.is-signed-in .state-signed-in .cw-eye{order:1;} body.is-signed-in .state-signed-in .cw-head h2, body.is-signed-in .state-signed-in .cw-head .cw-title{order:2;} body.is-signed-in .state-signed-in .cw-headbtns{order:3;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px;} body.is-signed-in .state-signed-in .cw-headbtns :is(a,button){font-size:.78rem;padding:5px 12px;} } /* ══ THE ASK TAB (Nik, Aug 29 2026) ═══════════════════════════════════════ "i want the chat at the bottom and working from top down for conversation (similar to claude and gpt) ... give it a circle like chat gpt in a way, let it show the client it's thinking in response, and make the chat flow a little stars like." Scoped to #board-ask-view so the old cream .ask-bar rules in me/index.html are left alone for wherever else they still apply. The orb is cream-to-gold at the core fading into the house purple - it has to read as astrolife, not as somebody else's assistant. */ body.is-signed-in #board-ask-view .ask-bar{ display:flex;flex-direction:column;min-height:min(72vh,640px);margin:0; background:radial-gradient(120% 80% at 50% 0%,#3a2e59 0%,#251d3c 62%); border:1px solid var(--line);border-radius:20px;overflow:hidden;position:relative;} body.is-signed-in #board-ask-view .ask-head{display:flex;align-items:center;gap:10px; padding:12px 16px;border-bottom:1px solid var(--line);} body.is-signed-in #board-ask-view .ask-orb-mini{width:22px;height:22px;border-radius:50%;flex:none; background:radial-gradient(circle at 36% 30%,#fffaf0,#e8d2ad 42%,#a98fd0 80%,#6a5a9c);} body.is-signed-in #board-ask-view .ask-bar-eye{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);} body.is-signed-in #board-ask-view .ask-persona{margin-left:auto;font-size:.74rem;color:var(--ink2);} body.is-signed-in #board-ask-view .ask-persona b{color:var(--gold);font-weight:500;} body.is-signed-in #board-ask-view .ask-persona button{background:none;border:0;color:var(--ink2);font:inherit;font-size:.74rem;text-decoration:underline;cursor:pointer;padding:0 0 0 4px;} /* the flow: oldest at the top, newest at the bottom, scrolls under the composer */ body.is-signed-in #board-ask-view .ask-thread{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:16px;} body.is-signed-in #board-ask-view .ask-empty{margin:auto;text-align:center;} body.is-signed-in #board-ask-view .ask-empty[hidden]{display:none;} body.is-signed-in #board-ask-view .ask-orb{width:96px;height:96px;border-radius:50%;margin:0 auto 20px; background:radial-gradient(circle at 36% 30%,#fffaf0 0%,#e8d2ad 40%,#a98fd0 78%,#6a5a9c 100%); box-shadow:0 0 60px -6px rgba(168,143,208,.7),0 0 130px -22px rgba(207,154,94,.45); animation:ask-breathe 5.5s ease-in-out infinite;} @keyframes ask-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}} body.is-signed-in #board-ask-view .ask-lead{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.55rem;margin:0 0 6px;color:var(--ink);} body.is-signed-in #board-ask-view .ask-sub{font-size:.82rem;color:var(--ink2);margin:0 0 20px;} body.is-signed-in #board-ask-view .ask-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;} body.is-signed-in #board-ask-view .ask-chip{border:1px solid var(--line);border-radius:999px;padding:7px 14px; font:inherit;font-size:.78rem;color:var(--ink2);background:none;cursor:pointer;transition:border-color .18s,color .18s;} body.is-signed-in #board-ask-view .ask-chip:hover{border-color:var(--gold);color:var(--ink);} body.is-signed-in #board-ask-view .ask-msg.ask-me{align-self:flex-end;max-width:80%; background:rgba(142,127,191,.2);border:1px solid rgba(142,127,191,.3); border-radius:16px 16px 4px 16px;padding:10px 14px;font-size:.93rem;line-height:1.55;color:var(--ink);} body.is-signed-in #board-ask-view .ask-msg.ask-them{align-self:flex-start;max-width:92%; font-size:.95rem;line-height:1.72;color:rgba(244,235,221,.93);padding-left:34px;position:relative;} body.is-signed-in #board-ask-view .ask-msg.ask-them::before{content:'';position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%; background:radial-gradient(circle at 36% 30%,#fffaf0,#e8d2ad 42%,#a98fd0 80%,#6a5a9c);} /* thinking: the orb speeds up and brightens, and three dots drift */ body.is-signed-in #board-ask-view .ask-msg.think{color:var(--ink2);font-style:italic;} body.is-signed-in #board-ask-view .ask-msg.think::before{animation:ask-think 1.4s ease-in-out infinite;} @keyframes ask-think{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.16);filter:brightness(1.35)}} body.is-signed-in #board-ask-view .ask-msg.think b{display:inline-block;width:4px;height:4px;border-radius:50%; background:var(--astro,#8e7fbf);margin-left:4px;animation:ask-dot 1.3s ease-in-out infinite;} body.is-signed-in #board-ask-view .ask-msg.think b:nth-of-type(2){animation-delay:.16s} body.is-signed-in #board-ask-view .ask-msg.think b:nth-of-type(3){animation-delay:.32s} @keyframes ask-dot{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}} /* the composer is pinned to the bottom - that is the whole ask */ /* ══ ONE FIELD. (Nik, Aug 30 2026) ══════════════════════════════════════════ "the text box looks like something toddlers made, it does not look clean and flush ... it's a text box, make it clean, they just need an arrow button to send if anything." Two things were wrong and both are named here so they cannot come back: 1 · A BOX INSIDE A BOX. Line ~251 of this file styles EVERY input on the signed-in board with `background / border / !important` and a 10px radius. The rules below said `background:none;border:0` with no !important, so they lost — a hard-edged rectangle sat inside the rounded pill. The pill is the only surface now, and the input is invisible on top of it. 2 · THE ARROW WAS ON THE LEFT. me/index.html has `@media(max-width:560px){ .ask-bar input{ order:2 } }` from the old one-line ask bar. This input is inside .ask-bar, so on every phone the input was sent to the back and the send button led. Order is pinned here for both. */ body.is-signed-in #board-ask-view .ask-composer{padding:12px 14px 16px;border-top:1px solid var(--line);} body.is-signed-in #board-ask-view .ask-pill{display:flex;align-items:center;gap:6px; background:rgba(11,8,20,.55);border:1px solid var(--line);border-radius:26px; padding:4px 4px 4px 18px;transition:border-color .18s;} body.is-signed-in #board-ask-view .ask-pill:focus-within{border-color:var(--gold);} body.is-signed-in #board-ask-view .ask-pill input{ order:0 !important;flex:1 1 auto !important;width:auto !important;min-width:0; background:transparent !important;border:0 !important;border-radius:0 !important; outline:0 !important;box-shadow:none !important;-webkit-appearance:none;appearance:none; color:var(--ink) !important;font:inherit;font-size:1rem;line-height:1.3;padding:11px 0;margin:0;} body.is-signed-in #board-ask-view .ask-pill input::placeholder{color:var(--ink2);opacity:1;} body.is-signed-in #board-ask-view .ask-pill #board-ask{ order:1;flex:0 0 auto;width:38px;height:38px;padding:0;border-radius:50%;border:0; display:flex;align-items:center;justify-content:center; background:var(--gold);color:#2b2113;font:inherit;font-size:1.05rem;line-height:1; cursor:pointer;transition:filter .15s,opacity .15s;} body.is-signed-in #board-ask-view .ask-pill #board-ask:hover{filter:brightness(1.1);} body.is-signed-in #board-ask-view .ask-pill #board-ask[disabled]{opacity:.45;cursor:default;} /* ══ the caveat is one line until they want it (Nik, Aug 30 2026) ══ */ body.is-signed-in .state-signed-in details.cw-half{padding:0;background:none;border:0;} body.is-signed-in .state-signed-in details.cw-half > summary{ list-style:none;cursor:pointer;font-size:.86rem;color:var(--dink,#f4ebdd); padding:10px 0;display:flex;align-items:center;gap:8px;} body.is-signed-in .state-signed-in details.cw-half > summary::-webkit-details-marker{display:none;} body.is-signed-in .state-signed-in details.cw-half > summary::after{ content:'\25BE';margin-left:auto;color:var(--dgold,#cf9a5e);font-size:.8rem;transition:transform .18s;} body.is-signed-in .state-signed-in details.cw-half[open] > summary::after{transform:rotate(180deg);} body.is-signed-in .state-signed-in details.cw-half p{ font-size:.82rem;line-height:1.7;color:var(--dink2,#9a8770);margin:0 0 10px;} body.is-signed-in .state-signed-in details.cw-half b{color:var(--dink,#f4ebdd);font-weight:400;} body.is-signed-in #board-ask-view .ask-fine{text-align:center;font-size:.66rem;color:rgba(244,235,221,.32);margin-top:8px;} @media(max-width:620px){ body.is-signed-in #board-ask-view .ask-bar{min-height:74vh;border-left:0;border-right:0;border-radius:0;margin:0 -14px;} body.is-signed-in #board-ask-view .ask-persona{display:none;} /* the head is not the point on a phone */ body.is-signed-in #board-ask-view .ask-orb{width:76px;height:76px;} } /* ══ THE TODAY SPLIT (Nik, Aug 29 2026) ═══════════════════════════════════ "on desktop the cards should be seen with that big message, so much dead space — one box to the left and on the right the 3 cards with a moon card for 4, with the progress bar underneath." And then, on the first mock: "it could be one box to the left and then a 2x2 card that MATCHES THE HEIGHT of the box beside it so it's aligned." Hence stretch + two equal rows rather than letting them ragged. Only above 1100px. Below that this is a plain block and nothing changes. */ @media(min-width:1100px){ body.is-signed-in .v2 .today-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;} /* The moon bar moved INSIDE this grid on Aug 30 so that on a phone it falls directly under the read, where Nik asked for it. Auto-flow would have dropped it in the right-hand column; the three children are placed by hand instead, so the approved desktop layout — read left, tiles right, bar underneath — is exactly what it was. */ /* THE DOM ORDER IS THE PHONE'S ORDER — moon bar, eclipse, read, cards. Desktop wants something different and says so here rather than by reshuffling markup: row 1 the moon bar, full width row 2 the read on the left, the eclipse on the right row 3 the read still, the two cards under the eclipse .hero spans rows 2→3 so it stays as tall as the stack beside it, which is the alignment he asked for. When there is no eclipse in range #mn-slot is display:none, row 2 collapses to nothing, and the layout closes up on its own. */ body.is-signed-in .v2 .today-split{grid-template-rows:auto auto 1fr;} body.is-signed-in .v2 .today-split > .strip{grid-column:1 / -1;grid-row:1;margin:0 0 4px;} body.is-signed-in .v2 .today-split > .hero{grid-column:1;grid-row:2 / -1;height:100%;margin:0;} body.is-signed-in .v2 .today-split > .tile-moon{grid-column:2;grid-row:2;margin:0;} /* the two cards take the height the read leaves them, so the right-hand column ends level with the left instead of trailing off into empty purple */ body.is-signed-in .v2 .today-split > .tiles{grid-column:2;grid-row:3; grid-template-columns:1fr 1fr;grid-auto-rows:1fr;align-content:stretch;height:100%;margin:0;} body.is-signed-in .v2 .today-split .tile{display:flex;flex-direction:column;justify-content:center;} body.is-signed-in .v2 .today-split .tile-moon{justify-content:flex-start;} } /* the moon tile is a paragraph, not a stat — it reads left, and the share button goes UNDERNEATH rather than beside, or it squeezes the one line people actually screenshot down to three words wide. */ body.is-signed-in .v2 .tile-moon{text-align:left;border-color:rgba(207,154,94,.34);} body.is-signed-in .v2 .tile-moon .mn-share{width:100%;flex:1 0 100%;text-align:center;margin-top:12px;} body.is-signed-in .v2 .tile-moon[hidden]{display:none !important;} /* ── the tile row is not four-across on anything but a wide desktop ── */ body.is-signed-in .v2 .tiles{grid-template-columns:repeat(3,1fr);} @media(max-width:1180px){body.is-signed-in .v2 .tiles{grid-template-columns:repeat(2,1fr);}} @media(max-width:620px){ body.is-signed-in .v2 .tiles{grid-template-columns:1fr;gap:10px;} body.is-signed-in .v2 .tile{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px;} body.is-signed-in .v2 .tile .ring{margin:0;flex:none;width:56px;height:56px;} body.is-signed-in .v2 .tile .big{margin:0;flex:none;font-size:1.5rem;} body.is-signed-in .v2 .tile .t-eye{display:block;} } /* this season lives behind its tile now — the block still hydrates, off-board */ body.is-signed-in .v2 .ss-offstage{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} /* ── MOBILE, before he has to find it ── */ @media(max-width:620px){ /* the three "right now" chips stack instead of squeezing into thirds */ body.is-signed-in .v2 .now,body.is-signed-in .v2 .rnrow{grid-template-columns:1fr !important;} /* the love window cards go one-up, not four across a 390px phone */ body.is-signed-in .cw-cards{grid-template-columns:1fr !important;} /* the forecast rows keep their date column from crushing the headline */ body.is-signed-in .v2 .fr{flex-wrap:wrap;} body.is-signed-in .v2 .fr .d{width:auto;min-width:74px;} body.is-signed-in .v2 .fr .w{flex:1 1 100%;} /* the check form is one column on a phone */ body.is-signed-in #board-compat .cf-grid,body.is-signed-in #board-compat .feature-pad form{grid-template-columns:1fr !important;} body.is-signed-in #board-compat .feature-pad{padding:16px 14px;} /* the year bar is scrollable rather than 36 invisible slivers */ body.is-signed-in .v2 .yearbar,body.is-signed-in .cw-year-track{min-width:520px;} body.is-signed-in .v2 .lovewrap,body.is-signed-in .cw-year-wrap{overflow-x:auto;} /* the travel line rows wrap instead of clipping the place name */ body.is-signed-in .v2 .catrow{flex-wrap:wrap;} body.is-signed-in .v2 .catrow .cat{width:auto;} /* nothing on the board may push the page sideways */ body.is-signed-in .state-signed-in{overflow-x:hidden;} body.is-signed-in .v2 table{display:block;overflow-x:auto;} } /* ── the moon in the today hero wears its own cycle (Nik, Aug 23 2026) ── */ body.is-signed-in .v2 .day-glyph.moon-ring{ position:relative;width:96px;height:96px;margin:14px auto 2px; display:flex;align-items:center;justify-content:center;font-size:2.6rem;line-height:1; } body.is-signed-in .v2 .moon-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);} body.is-signed-in .v2 .moon-ring .mr-track{fill:none;stroke:var(--line);stroke-width:5;} body.is-signed-in .v2 .moon-ring .mr-fill{ fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round; transition:stroke-dashoffset 1.6s ease; } body.is-signed-in .v2 .moon-ring .mr-glyph{position:relative;z-index:1;} /* ══ THE READER — COPIED FROM mock-dashboard-v2.html, NOT REWRITTEN ═══════ Nik: "you have a mock, you have an HTML file, just copy this same file into my dashboard." These are his rules, verbatim. Do not re-author them. */ body.is-signed-in #reader{display:none;position:fixed;inset:0;background:rgba(10,8,20,.88);z-index:96;overflow-y:auto;padding:40px 16px;} body.is-signed-in #reader.open{display:block;} body.is-signed-in #reader .rd-pane{max-width:720px;margin:0 auto;background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:34px 38px 30px;position:relative;} body.is-signed-in #reader .rd-count{position:absolute;top:22px;right:26px;font-size:.68rem;color:var(--ink2);} body.is-signed-in #reader .rd-eye{font-size:.7rem;letter-spacing:.12em;color:var(--ink2);} body.is-signed-in #reader .rd-pane h4{font-size:1.7rem;margin:6px 0 4px;color:var(--gold);font-weight:normal;font-family:'Cormorant Garamond',Georgia,serif;} body.is-signed-in #reader .rd-sec h5{font-size:1.02rem;color:var(--ink);margin:22px 0 6px;font-weight:normal;border-bottom:1px solid var(--line);padding-bottom:6px;} body.is-signed-in #reader .rd-sec p{font-size:.88rem;line-height:1.7;color:var(--ink);opacity:.9;margin-bottom:.7rem;} body.is-signed-in #reader .rd-receipt{margin-top:24px;padding-top:12px;border-top:1px solid var(--line);font-size:.7rem;color:var(--ink2);} body.is-signed-in #reader .rd-fade{max-height:150px;overflow:hidden;position:relative;} body.is-signed-in #reader .rd-fade:after{content:'';position:absolute;left:0;right:0;bottom:0;height:80px;background:linear-gradient(transparent,var(--bg2));} body.is-signed-in #reader .rd-gate{margin-top:14px;background:linear-gradient(160deg,#3b3160,#241d38);border:1px solid var(--line);border-radius:14px;padding:22px;text-align:center;} body.is-signed-in #reader .rd-gate .g-eye{font-size:.68rem;letter-spacing:.12em;color:var(--ink2);} body.is-signed-in #reader .rd-gate h6{font-size:1.05rem;font-weight:normal;margin:8px 0 14px;} body.is-signed-in #reader .rd-gate small{display:block;margin-top:10px;font-size:.7rem;color:var(--ink2);} body.is-signed-in #reader .rd-hook{margin-top:24px;background:linear-gradient(160deg,#3b3160,#2a1f3a);border:1px solid var(--line);border-radius:14px;padding:18px 20px;font-size:.82rem;line-height:1.6;color:var(--ink);} body.is-signed-in #reader .rd-hook .g-eye{font-size:.66rem;letter-spacing:.12em;color:var(--ink2);margin-bottom:6px;} body.is-signed-in #reader .rd-hook .askline{color:var(--gold);cursor:pointer;} body.is-signed-in #reader .rd-nav{display:flex;justify-content:space-between;margin-top:26px;gap:10px;} body.is-signed-in #reader .rd-nav button{background:none;border:1px solid var(--line);color:var(--ink2);border-radius:999px;padding:8px 18px;font-family:inherit;font-size:.76rem;cursor:pointer;} body.is-signed-in #reader .rd-nav button:hover{color:var(--ink);border-color:var(--gold);} body.is-signed-in #reader .rd-close{position:absolute;top:20px;left:22px;background:none;border:none;color:var(--ink2);font-size:1rem;cursor:pointer;font-family:inherit;} body.is-signed-in #reader .hear{display:inline-block;border:1px solid var(--gold);color:var(--gold);border-radius:999px;padding:5px 16px;font-size:.8rem;cursor:pointer;background:none;font-family:inherit;} @media(max-width:640px){ body.is-signed-in #reader{padding:0;} body.is-signed-in #reader .rd-pane{max-width:none;border-radius:0;border:none;min-height:100vh;padding:64px 18px 40px;} } /* the first write of a reading takes ~45s — show it moving, not a dead word */ body.is-signed-in #reader .rd-wait{height:4px;border-radius:2px;background:var(--line);margin-top:16px;overflow:hidden;} body.is-signed-in #reader .rd-wait i{display:block;height:100%;width:38%;border-radius:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:rdwait 1.5s ease-in-out infinite;} @keyframes rdwait{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}} /* ══ THE READING DROPS DOWN UNDER ITS ROW (Nik, Aug 23 2026) ═══════════════ "i think it would be better off as a drop down text than a pop up card." */ body.is-signed-in .rd-drop{display:none;padding:0 22px 22px;border-bottom:1px solid var(--line);} body.is-signed-in .rd-drop.open{display:block;} body.is-signed-in .rd-drop .rd-head{display:flex;justify-content:space-between;align-items:baseline; gap:12px;padding:4px 0 10px;} body.is-signed-in .rd-drop .rd-eye{font-size:.7rem;letter-spacing:.12em;color:var(--ink2);} body.is-signed-in .rd-drop .rd-count{font-size:.68rem;color:var(--ink2);white-space:nowrap;} /* ══ THE READING — OPTION A, "THE LETTER" ════════════════════════════════ Nik picked this one out of three previews (reading-options.html, Aug 23 2026). One narrow column, generous margins, a drop cap that opens it like a book, and serif section headings with a small number after them and a hairline beneath. It is deliberately quiet: the writing is the thing, the layout gets out of the way. Do not "tidy" the margins away — the air is the design. */ body.is-signed-in .rd-drop{padding:0 0 44px;} body.is-signed-in .rd-drop > *{max-width:none;margin-left:0;margin-right:0;padding-left:40px;padding-right:40px;} /* the eyeline: where it comes from, and how long it takes */ body.is-signed-in .rd-drop .rd-head{ display:flex;justify-content:space-between;align-items:baseline;gap:16px; padding-top:26px;padding-bottom:0; } body.is-signed-in .rd-drop .rd-eye{ font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold); } body.is-signed-in .rd-drop .rd-count{ font-size:.64rem;letter-spacing:.1em;color:var(--ink2);white-space:nowrap;text-transform:lowercase; } body.is-signed-in .rd-drop .rd-rule{ height:1px;background:linear-gradient(90deg,var(--gold),transparent);opacity:.55; margin:10px auto 0;padding:0;max-width:calc(66ch - 80px); } /* the opening line, with the drop cap */ body.is-signed-in .rd-drop .rd-lead{ font-family:'Cormorant Garamond',Georgia,serif;font-size:1.72rem;line-height:1.42; font-weight:600;color:var(--ink);margin:30px auto 6px; } body.is-signed-in .rd-drop .rd-lead::first-letter{ font-size:3.4rem;float:left;line-height:.82;padding:6px 12px 0 0;color:var(--gold); } /* each section: serif heading, its number, a hairline, then the writing */ body.is-signed-in .rd-drop .rd-sec{margin:40px auto 0;border:none;} body.is-signed-in .rd-drop .rd-sec h5{ font-family:'Cormorant Garamond',Georgia,serif;font-size:1.4rem;font-weight:600; color:var(--gold);margin:0 0 4px;padding:0;border:none;line-height:1.25; display:flex;align-items:baseline;gap:.75rem; } body.is-signed-in .rd-drop .rd-sec h5 .rd-num{ font-family:'Inter',system-ui,sans-serif;font-size:.58rem;letter-spacing:.18em; color:var(--ink2);font-weight:500;flex:none; } body.is-signed-in .rd-drop .rd-hair{ height:1px;background:var(--line);margin:10px 0 16px;padding:0;max-width:none; } body.is-signed-in .rd-drop .rd-body-txt p{ font-size:1rem;line-height:1.88;color:var(--ink);opacity:.9;margin:0 0 1.1rem; } body.is-signed-in .rd-drop .rd-body-txt p:last-child{margin-bottom:0;} body.is-signed-in .rd-drop .rd-receipt{margin-top:20px;padding-top:12px;border-top:1px solid var(--line); font-size:.7rem;color:var(--ink2);} body.is-signed-in .rd-drop .rd-hook{margin-top:18px;background:linear-gradient(160deg,#3b3160,#2a1f3a); border:1px solid var(--line);border-radius:14px;padding:16px 18px;font-size:.82rem;line-height:1.6;color:var(--ink);} body.is-signed-in .rd-drop .rd-hook .g-eye{font-size:.66rem;letter-spacing:.12em;color:var(--ink2);margin-bottom:6px;} body.is-signed-in .rd-drop .rd-hook .askline{color:var(--gold);cursor:pointer;} body.is-signed-in .rd-drop .rd-nav{display:flex;justify-content:flex-end;margin-top:18px;} body.is-signed-in .rd-drop .rd-nav button{background:none;border:1px solid var(--line);color:var(--ink2); border-radius:999px;padding:7px 16px;font-family:inherit;font-size:.76rem;cursor:pointer;} body.is-signed-in .rd-drop .rd-nav button:hover{color:var(--ink);border-color:var(--gold);} body.is-signed-in .rd-drop .rd-gate{margin-top:14px;background:linear-gradient(160deg,#3b3160,#241d38); border:1px solid var(--line);border-radius:14px;padding:20px;text-align:center;} body.is-signed-in .rd-drop .rd-fade{max-height:150px;overflow:hidden;position:relative;} /* the pop-up panel is retired — the reading lives in the row now */ body.is-signed-in #reader{display:none !important;} @media(max-width:640px){ body.is-signed-in .rd-drop{padding:0 0 30px;} body.is-signed-in .rd-drop > *{padding-left:20px;padding-right:20px;} body.is-signed-in .rd-drop .rd-rule{max-width:calc(100% - 40px);} body.is-signed-in .rd-drop .rd-lead{font-size:1.38rem;} body.is-signed-in .rd-drop .rd-lead::first-letter{font-size:2.7rem;padding:4px 9px 0 0;} body.is-signed-in .rd-drop .rd-sec{margin-top:32px;} body.is-signed-in .rd-drop .rd-sec h5{font-size:1.22rem;} body.is-signed-in .rd-drop .rd-body-txt p{font-size:.97rem;line-height:1.82;} } /* ══ THE LONG ARCS EXPLAIN THEMSELVES (Nik, Aug 23 2026) ══════════════════ One plain opening sentence for someone who knows nothing about astrology, then a drop-down with three beats. The third beat's TENSE follows the chapter: what it left you with / how to work with it / what it will ask of you. */ body.is-signed-in .v3-arcpanel{max-width:70ch;margin:22px auto 0;text-align:left;} body.is-signed-in .v3-arcopen{ font-family:'Cormorant Garamond',Georgia,serif;font-size:1.24rem;line-height:1.5; color:var(--ink);opacity:.95;margin:0 0 14px; } body.is-signed-in .v3-arcmore{ background:none;border:1px solid var(--line);color:var(--gold);border-radius:999px; padding:7px 18px;font-family:inherit;font-size:.78rem;cursor:pointer; } body.is-signed-in .v3-arcmore:hover{border-color:var(--gold);background:rgba(207,154,94,.08);} body.is-signed-in .v3-arcbody{display:none;margin-top:20px;} body.is-signed-in .v3-arcbody.open{display:block;} body.is-signed-in .v3-arcsec{margin-top:22px;} body.is-signed-in .v3-arcsec:first-child{margin-top:0;} body.is-signed-in .v3-arcsec h6{ font-family:'Cormorant Garamond',Georgia,serif;font-size:1.12rem;font-weight:600; color:var(--gold);margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid var(--line); } body.is-signed-in .v3-arcsec p{font-size:.95rem;line-height:1.85;color:var(--ink);opacity:.9;margin:0;} @media(max-width:640px){ body.is-signed-in .v3-arcpanel{padding:0 4px;} body.is-signed-in .v3-arcopen{font-size:1.1rem;} } /* ── PARAGRAPH SPACING, FORCED. (Nik, Aug 23 2026) ──────────────────────── The paragraphs were running straight into each other because a bare p rule further up the page zeroes the margin and beat mine on order. This is the spacing between one idea and the next — it is not optional, so it is !important and it is the last word in the sheet. */ body.is-signed-in .rd-drop .rd-body-txt p{ margin:0 0 1.5rem !important; line-height:1.9 !important; } body.is-signed-in .rd-drop .rd-body-txt p:last-child{margin-bottom:0 !important;} body.is-signed-in .rd-drop .rd-sec{margin-top:46px !important;} body.is-signed-in .rd-drop .rd-sec h5{margin-bottom:6px !important;} body.is-signed-in .rd-drop .rd-hair{margin:12px 0 22px !important;} body.is-signed-in .rd-drop .rd-lead{margin:34px auto 10px !important;} body.is-signed-in .v3-arcsec p{margin:0 !important;line-height:1.9 !important;} /* the chapter panel is centred with the rest of the arcs block, not shoved left */ body.is-signed-in .v3-arcpanel{text-align:left;margin:24px auto 0;padding:0 24px;} body.is-signed-in .v3-arcopen{text-align:center;max-width:60ch;margin:0 auto 16px !important;} body.is-signed-in .v3-arcmore{display:block;margin:0 auto;} body.is-signed-in .v3-arcbody{max-width:66ch;margin:22px auto 0;} /* ══ ONE ALIGNMENT, NOT THREE. (Nik, Aug 23 2026) ═════════════════════════ "what kind of alignment is the fucking text in the arcs about" — fair: the caption was centred, the opening line was centred but indented, and the button was hard left. Three alignments stacked in one box. Everything in the arcs block is now one centred column, and the reading uses the full width of the page. */ body.is-signed-in .v3-life, body.is-signed-in .v3-arcpanel{width:100%;max-width:none;padding:0;text-align:center;} body.is-signed-in .v3-lbline{text-align:center !important;max-width:72ch;margin:14px auto 0 !important;} body.is-signed-in .v3-arcopen{text-align:center !important;max-width:60ch;margin:18px auto 0 !important;} body.is-signed-in .v3-arcbtns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px;} body.is-signed-in .v3-arcmore, body.is-signed-in .v3-arcbtns .al-hear{display:inline-block;margin:0;} /* the three parts read as a column, left-aligned inside a centred block */ body.is-signed-in .v3-arcbody{max-width:70ch;margin:26px auto 0;text-align:left;} /* ── THE READING USES THE PAGE. ─────────────────────────────────────────── It sat in a 66ch column pinned to the left of a very wide panel, so half the screen was empty. The column is wider and genuinely centred now. */ body.is-signed-in .rd-drop{width:100%;} /* FULL WIDTH (Nik, Sep 5 2026: "so much dead space in the you tab, make it full width on whatever screen it's on"). the 78ch letter column is gone; the reading spans the panel with a 48px gutter each side. */ body.is-signed-in .rd-drop > *{ max-width:none !important;margin-left:0 !important;margin-right:0 !important; padding-left:48px !important;padding-right:48px !important; } body.is-signed-in .rd-drop .rd-rule{max-width:calc(100% - 96px) !important;} body.is-signed-in .rd-drop .rd-retry{background:none;border:1px solid var(--gold);color:var(--gold);border-radius:999px;padding:4px 12px;margin-left:8px;cursor:pointer;font:inherit;font-size:.8rem;} body.is-signed-in .rd-tools{display:flex;justify-content:flex-start;margin-top:16px;} body.is-signed-in .rd-drop .al-hear, body.is-signed-in .v3-arcbtns .al-hear{ background:none;border:1px solid var(--gold);color:var(--gold);border-radius:999px; padding:7px 18px;font-family:inherit;font-size:.78rem;cursor:pointer; } body.is-signed-in .rd-drop .al-hear:hover, body.is-signed-in .v3-arcbtns .al-hear:hover{background:rgba(207,154,94,.1);} @media(max-width:640px){ body.is-signed-in .rd-drop > *{padding-left:20px !important;padding-right:20px !important;} body.is-signed-in .rd-drop .rd-rule{max-width:calc(100% - 40px) !important;} } /* when the next read lands — quiet, but there */ body.is-signed-in .v2 .hero-when{display:block;margin-top:8px;color:var(--gold);opacity:.9;} /* ══ TRAVEL ROOM v3 (Nik, Aug 24 2026 — approved mock mock-travel-v3.html) ══ the map on the page, question-rooms, folding groups, search + continents. everything prefixed tw- so nothing collides with the host page. */ body.is-signed-in .v2-travel .tw-hero{padding:9px 18px;margin-bottom:8px;} body.is-signed-in .v2-travel .tw-h1{font-size:1.35rem;} /* slim tool tiles — icon left, words middle, open right */ body.is-signed-in .v2-travel .tw-tiles{grid-template-columns:1fr 1fr;gap:8px;margin:0 0 10px;} body.is-signed-in .v2-travel .tw-tile{display:flex;align-items:center;gap:13px;text-align:left;padding:10px 16px;cursor:pointer;} body.is-signed-in .v2-travel .tw-tile .big{font-size:1.5rem;margin:0;flex:none;} body.is-signed-in .v2-travel .tw-tile .tw-mid{min-width:0;} body.is-signed-in .v2-travel .tw-tile .t-word{font-size:.95rem;margin:0;} body.is-signed-in .v2-travel .tw-tile .t-sub{margin:0;font-size:.74rem;} body.is-signed-in .v2-travel .tw-tile .askline{margin-left:auto;white-space:nowrap;} /* the one door for accounts without a map */ body.is-signed-in .v2-travel .tw-door{background:linear-gradient(135deg,#2c2350,var(--panel));border:1px solid var(--gold);border-radius:14px;padding:22px;text-align:center;margin-bottom:20px;} body.is-signed-in .v2-travel .tw-door b{color:var(--gold);} body.is-signed-in .v2-travel .tw-door p{color:var(--ink2);font-size:.9rem;margin:6px auto 12px;max-width:56ch;} body.is-signed-in .v2-travel .tw-door-go{font:inherit;font-weight:700;color:var(--bg);background:var(--gold);border:none;border-radius:22px;padding:9px 22px;cursor:pointer;} body.is-signed-in .v2-travel .tw-loading{color:var(--ink2);padding:26px 0;text-align:center;} /* the map, right on the page */ body.is-signed-in .v2-travel .tw-mapcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:22px;} body.is-signed-in .v2-travel .tw-mapcard h2{font-size:1.1rem;margin:0 0 2px;} body.is-signed-in .v2-travel .tw-sub{color:var(--ink2);font-size:.85rem;margin-bottom:12px;} body.is-signed-in .v2-travel .tw-mapbox{background:#171331;border:1px solid var(--line);border-radius:12px;padding:8px;overflow:hidden;} body.is-signed-in .v2-travel .tw-mapbox svg{display:block;width:100%;height:auto;} body.is-signed-in .v2-travel .tw-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:10px;font-size:.78rem;color:var(--ink2);} body.is-signed-in .v2-travel .tw-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px;} body.is-signed-in .v2-travel .tw-legend i.lg{background:var(--easy,#5fa86c);} body.is-signed-in .v2-travel .tw-legend i.lh{background:var(--hard,#d05a47);} body.is-signed-in .v2-travel .tw-legend i.ln{background:var(--mixed,#9bb0d6);} body.is-signed-in .v2-travel .tw-deep{font:inherit;font-size:.85rem;color:var(--gold);background:none;border:none;cursor:pointer;padding:0;margin-top:12px;} body.is-signed-in .v2-travel .tw-note{color:var(--ink2);font-size:.78rem;margin:10px 0 0;} /* band headers + top places */ body.is-signed-in .v2-travel .tw-bh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:24px 0 12px;flex-wrap:wrap;} body.is-signed-in .v2-travel .tw-bh h2{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);font-weight:600;margin:0;} body.is-signed-in .v2-travel .tw-bh span{font-size:.76rem;color:var(--ink2);} body.is-signed-in .v2-travel .tw-tops{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;} body.is-signed-in .v2-travel .tw-top{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;} body.is-signed-in .v2-travel .tw-te{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-bottom:6px;} body.is-signed-in .v2-travel .tw-tc{font-weight:700;font-size:1rem;} body.is-signed-in .v2-travel .tw-tr{color:var(--ink2);font-size:.78rem;margin-bottom:8px;} body.is-signed-in .v2-travel .tw-top ul{margin:0;padding:0;list-style:none;} body.is-signed-in .v2-travel .tw-top li{color:var(--ink2);font-size:.8rem;padding-left:12px;position:relative;line-height:1.55;} body.is-signed-in .v2-travel .tw-top li::before{content:"·";position:absolute;left:2px;color:var(--gold);} /* search + browse */ body.is-signed-in .v2-travel .tw-browse{padding:2px 0 10px;border-bottom:1px solid var(--line);margin-bottom:8px;} body.is-signed-in .v2-travel .tw-q{width:100%;font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 16px;outline:none;} body.is-signed-in .v2-travel .tw-q::placeholder{color:var(--ink2);opacity:.75;} body.is-signed-in .v2-travel .tw-conts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;} body.is-signed-in .v2-travel .tw-chip{font:inherit;font-size:.78rem;color:var(--ink2);background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:5px 13px;cursor:pointer;} body.is-signed-in .v2-travel .tw-chip.on{color:var(--bg);background:var(--gold);border-color:var(--gold);font-weight:700;} body.is-signed-in .v2-travel .tw-big3{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px;} body.is-signed-in .v2-travel .tw-b3{font:inherit;border-radius:12px;padding:10px 8px;text-align:center;cursor:pointer;border:1px solid var(--line);background:var(--panel);} body.is-signed-in .v2-travel .tw-b3 b{display:block;font-size:.95rem;} body.is-signed-in .v2-travel .tw-b3 small{color:var(--ink2);font-size:.68rem;} body.is-signed-in .v2-travel .tw-b3.g b{color:var(--easy,#5fa86c);} body.is-signed-in .v2-travel .tw-b3.n b{color:var(--mixed,#9bb0d6);} body.is-signed-in .v2-travel .tw-b3.m b{color:var(--good,#c8a86a);} body.is-signed-in .v2-travel .tw-b3.b b{color:var(--hard,#d05a47);} body.is-signed-in .v2-travel .tw-voln{font-size:.76rem;color:var(--ink2);margin:10px 0 2px;} /* sections, rooms, groups */ body.is-signed-in .v2-travel .tw-sect{margin-top:28px;} body.is-signed-in .v2-travel .tw-sh{display:flex;align-items:center;gap:10px;margin-bottom:6px;} body.is-signed-in .v2-travel .tw-sh h2{font-size:1.15rem;margin:0;} body.is-signed-in .v2-travel .tw-pill{font-size:.76rem;font-weight:700;padding:3px 12px;border-radius:20px;} body.is-signed-in .v2-travel .tw-pill.g{color:var(--easy,#5fa86c);background:rgba(95,168,108,.14);} body.is-signed-in .v2-travel .tw-pill.n{color:var(--mixed,#9bb0d6);background:rgba(155,176,214,.14);} body.is-signed-in .v2-travel .tw-pill.b{color:var(--hard,#d05a47);background:rgba(208,90,71,.14);} body.is-signed-in .v2-travel .tw-blurb{color:var(--ink2);font-size:.88rem;max-width:70ch;margin:0 0 14px;} body.is-signed-in .v2-travel .tw-room{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:4px 18px 14px;margin-bottom:14px;} body.is-signed-in .v2-travel .tw-rh{position:sticky;top:8px;z-index:9;background:var(--panel);display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:13px 0 8px;border-bottom:1px solid var(--line);} body.is-signed-in .v2-travel .tw-rh h3{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.15rem;color:var(--gold);margin:0;} body.is-signed-in .v2-travel .tw-cnt{font-size:.72rem;color:var(--ink2);white-space:nowrap;} body.is-signed-in .v2-travel .tw-rd{color:var(--ink2);font-size:.82rem;margin:8px 0 2px;} body.is-signed-in .v2-travel .tw-grp{padding:4px 0;border-bottom:1px solid rgba(59,49,96,.5);} body.is-signed-in .v2-travel .tw-grp:last-child{border-bottom:none;} body.is-signed-in .v2-travel .tw-grp-t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;cursor:pointer;padding:9px 4px;border-radius:10px;min-height:26px;} body.is-signed-in .v2-travel .tw-grp-t:hover{background:rgba(59,49,96,.35);} body.is-signed-in .v2-travel .tw-grp-t b{font-size:.98rem;} body.is-signed-in .v2-travel .tw-chev{color:var(--gold);font-size:.8rem;transition:transform .15s;display:inline-block;transform:rotate(-90deg);} body.is-signed-in .v2-travel .tw-grp.open .tw-chev{transform:none;} body.is-signed-in .v2-travel .tw-pl{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);} body.is-signed-in .v2-travel .tw-pn{font-size:.7rem;color:var(--ink2);margin-left:auto;} body.is-signed-in .v2-travel .tw-grp-b{display:none;padding:0 4px 8px;} body.is-signed-in .v2-travel .tw-grp.open .tw-grp-b{display:block;} body.is-signed-in .v2-travel .tw-grp-d{color:var(--ink2);font-size:.82rem;margin:2px 0 10px;} body.is-signed-in .v2-travel .tw-twin{display:inline-block;font-size:.7rem;color:var(--mixed,#9bb0d6);background:rgba(155,176,214,.14);border-radius:8px;padding:3px 9px;margin:0 0 10px;cursor:pointer;} body.is-signed-in .v2-travel .tw-learn{font:inherit;font-size:.8rem;color:var(--gold);background:none;border:1px solid var(--line);border-radius:20px;padding:6px 14px;cursor:pointer;margin:0 0 10px;} body.is-signed-in .v2-travel .tw-lesson{display:none;background:#2a2244;border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin:0 0 12px;} body.is-signed-in .v2-travel .tw-lesson.open{display:block;} body.is-signed-in .v2-travel .tw-lesson p{color:var(--ink2);font-size:.85rem;margin:0 0 10px;} body.is-signed-in .v2-travel .tw-full{font:inherit;font-size:.8rem;font-weight:700;color:var(--bg);background:var(--gold);border:none;border-radius:20px;padding:7px 16px;cursor:pointer;} /* place rows */ body.is-signed-in .v2-travel .tw-rows{display:flex;flex-direction:column;gap:2px;} body.is-signed-in .v2-travel .tw-row{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;padding:8px 10px;border-radius:10px;} body.is-signed-in .v2-travel .tw-row:hover{background:rgba(59,49,96,.35);} body.is-signed-in .v2-travel .tw-nm{font-weight:600;font-size:.9rem;color:var(--ink);} body.is-signed-in .v2-travel .tw-nm small{display:block;font-weight:400;color:var(--ink2);font-size:.72rem;} body.is-signed-in .v2-travel .tw-nm.tw-dim{color:var(--ink2);font-weight:400;font-size:.8rem;} body.is-signed-in .v2-travel .tw-km{font-variant-numeric:tabular-nums;color:var(--gold);font-size:.84rem;white-space:nowrap;text-align:right;} body.is-signed-in .v2-travel .tw-sect.n .tw-km{color:var(--ink2);} body.is-signed-in .v2-travel .tw-vol{grid-column:1/-1;height:3px;border-radius:2px;background:#171331;overflow:hidden;} body.is-signed-in .v2-travel .tw-vol i{display:block;height:100%;border-radius:2px;} body.is-signed-in .v2-travel .tw-row.g .tw-vol i{background:var(--easy,#5fa86c);} body.is-signed-in .v2-travel .tw-row.b .tw-vol i{background:var(--hard,#d05a47);} body.is-signed-in .v2-travel .tw-row.m .tw-vol i,body.is-signed-in .v2-travel .tw-cty.m .tw-vol i{background:linear-gradient(90deg,var(--easy,#5fa86c),var(--hard,#d05a47));} body.is-signed-in .v2-travel .tw-cc{display:inline-block;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mixed,#9bb0d6);background:rgba(155,176,214,.14);border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:1px;} body.is-signed-in .v2-travel .tw-more{font:inherit;font-size:.8rem;color:var(--gold);background:none;border:none;cursor:pointer;padding:8px 10px;text-align:left;} body.is-signed-in .v2-travel .tw-empty{color:var(--ink2);text-align:center;padding:28px 0;} /* phones: everything stacks, the sticky header lets go */ @media (max-width:820px){ body.is-signed-in .v2-travel .tw-tiles{grid-template-columns:1fr;} body.is-signed-in .v2-travel .tw-tops{grid-template-columns:1fr 1fr;} body.is-signed-in .v2-travel .tw-rh{position:static;} } @media (max-width:520px){ body.is-signed-in .v2-travel .tw-tops{grid-template-columns:1fr;} body.is-signed-in .v2-travel .tw-big3{grid-template-columns:1fr 1fr;gap:6px;} body.is-signed-in .v2-travel .tw-b3 small{display:none;} body.is-signed-in .v2-travel .tw-pn{flex-basis:100%;margin-left:22px;} } /* travel v3.1 — the simple browse (search / continents / good-bad-neutral) */ body.is-signed-in .v2-travel .tw-b3.on{border-color:var(--gold);background:#2a2244;} body.is-signed-in .v2-travel .tw-row.n .tw-km{color:var(--ink2);} body.is-signed-in .v2-travel .tw-row{cursor:pointer;} body.is-signed-in .v2-travel .tw-read{max-width:70ch;} body.is-signed-in .v2-travel .tw-read p{color:var(--ink2);font-size:.9rem;margin:0 0 12px;} body.is-signed-in .v2-travel .tw-door-note{color:var(--ink2);font-size:.8rem;margin-top:10px;} .bo-panel .tw-qa{padding:12px 0;border-bottom:1px solid var(--line,#3b3160);} .bo-panel .tw-qa:last-of-type{border-bottom:none;} .bo-panel .tw-qa-q{font-family:Georgia,serif;color:var(--gold,#cf9a5e);font-size:1rem;margin-bottom:4px;} .bo-panel .tw-qa-a{font-size:.95rem;} .bo-panel .tw-qa-foot{color:var(--ink2,#b9aed6);font-size:.78rem;margin-top:12px;} .bo-panel .tw-qa-also{font-size:.85rem;color:var(--ink2,#b9aed6);margin-top:5px;} /* top places — a swipeable strip: two cards wide on desktop, one on a phone. a sliver of the next card peeks out so people know to swipe. tap = answers. */ body.is-signed-in .v2-travel .tw-tops{display:flex;overflow-x:auto;gap:12px;padding-bottom:10px; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;} body.is-signed-in .v2-travel .tw-top{flex:0 0 calc(47% - 6px);scroll-snap-align:start;cursor:pointer;} @media (max-width:820px){ body.is-signed-in .v2-travel .tw-top{flex:0 0 86%;} } body.is-signed-in .v2-travel .tw-top-cue{color:var(--gold);font-size:.78rem;margin-top:10px;} body.is-signed-in .v2-travel .tw-top-drop{display:none;border-top:1px solid var(--line);margin-top:10px;padding-top:4px;} body.is-signed-in .v2-travel .tw-top.open .tw-top-drop{display:block;} body.is-signed-in .v2-travel .tw-top-drop .tw-qa{padding:10px 0;border-bottom:1px solid rgba(59,49,96,.5);} body.is-signed-in .v2-travel .tw-top-drop .tw-qa:last-of-type{border-bottom:none;} body.is-signed-in .v2-travel .tw-top-drop .tw-qa-q{font-family:"Cormorant Garamond",Georgia,serif;color:var(--gold);font-size:.95rem;margin-bottom:3px;} body.is-signed-in .v2-travel .tw-top-drop .tw-qa-a{font-size:.86rem;color:var(--ink);} body.is-signed-in .v2-travel .tw-top-drop .tw-qa-also{font-size:.78rem;color:var(--ink2);margin-top:4px;} body.is-signed-in .v2-travel .tw-top-drop .tw-qa-foot{color:var(--ink2);font-size:.72rem;margin-top:8px;} /* top places v2 — two FIXED cards (4-line / 3-line), the place pages inside */ body.is-signed-in .v2-travel .tw-tops2{display:grid;grid-template-columns:1fr 1fr;gap:12px;} @media (max-width:820px){ body.is-signed-in .v2-travel .tw-tops2{grid-template-columns:1fr;} } body.is-signed-in .v2-travel .tw-pager{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 40px 12px;} body.is-signed-in .v2-travel .tw-pager .tw-te{margin-bottom:8px;} body.is-signed-in .v2-travel .tw-arr{position:absolute;top:50%;transform:translateY(-50%);font:inherit;font-size:1.3rem;line-height:1;color:var(--gold);background:none;border:none;cursor:pointer;padding:8px;} body.is-signed-in .v2-travel .tw-arr.l{left:4px;} body.is-signed-in .v2-travel .tw-arr.r{right:4px;} body.is-signed-in .v2-travel .tw-dots{display:flex;gap:6px;justify-content:center;margin-top:12px;flex-wrap:wrap;} body.is-signed-in .v2-travel .tw-dot{width:8px;height:8px;border-radius:50%;border:none;background:var(--line);cursor:pointer;padding:0;} body.is-signed-in .v2-travel .tw-dot.on{background:var(--gold);} body.is-signed-in .v2-travel .tw-count{font-size:.72rem;color:var(--ink2);letter-spacing:.04em;} body.is-signed-in .v2-travel .tw-pager .tw-top-drop{display:none;border-top:1px solid var(--line);margin-top:10px;padding-top:4px;} body.is-signed-in .v2-travel .tw-pager.open .tw-top-drop{display:block;} body.is-signed-in .v2-travel .tw-pager .tw-qa{padding:10px 0;border-bottom:1px solid rgba(59,49,96,.5);} body.is-signed-in .v2-travel .tw-pager .tw-qa:last-of-type{border-bottom:none;} body.is-signed-in .v2-travel .tw-pager .tw-qa-q{font-family:"Cormorant Garamond",Georgia,serif;color:var(--gold);font-size:.95rem;margin-bottom:3px;} body.is-signed-in .v2-travel .tw-pager .tw-qa-a{font-size:.86rem;color:var(--ink);} body.is-signed-in .v2-travel .tw-pager .tw-qa-also{font-size:.78rem;color:var(--ink2);margin-top:4px;} body.is-signed-in .v2-travel .tw-pager .tw-qa-foot{color:var(--ink2);font-size:.72rem;margin-top:8px;} body.is-signed-in .v2-travel .tw-pager .tw-verdict{font-size:.82rem;padding:8px 11px;} /* ── THE HARD PAGER MUST NOT LOOK LIKE A RECOMMENDATION. (Nik, Aug 30 2026) ── Same card, same read, but the eye has to know at a glance that this is the "so you can see it coming" list and not the "go here" list. */ body.is-signed-in .v2-travel .tw-pager-hard{border-color:rgba(208,90,71,.45);} body.is-signed-in .v2-travel .tw-pager-hard .tw-te{color:var(--hard,#d05a47);} body.is-signed-in .v2-travel .tw-pager-hard .tw-tc{color:var(--ink);} /* on a phone the vertically-centred ‹ › land right beside the bullet markers and the card reads cramped. They drop to the dots row, where they flank the pager controls instead of the sentences, and the card gets its side padding back. */ @media(max-width:600px){ body.is-signed-in .v2-travel .tw-pager{padding:16px 16px 12px;} body.is-signed-in .v2-travel .tw-arr{top:auto;bottom:6px;transform:none;padding:6px 12px;} body.is-signed-in .v2-travel .tw-arr.l{left:2px;} body.is-signed-in .v2-travel .tw-arr.r{right:2px;} body.is-signed-in .v2-travel .tw-dots{margin-top:14px;padding:0 34px;} /* the bullet markers were sitting on the card's own edge, half clipped */ body.is-signed-in .v2-travel .tw-pgbody ul{padding-left:1.1rem;margin:0;} body.is-signed-in .v2-travel .tw-pgbody li{padding-left:2px;} /* ── THE TWO DOORS ARE ONE LINE EACH. (Nik, Aug 30 2026) ───────────────── "the going somewhere, and your home's energy need to be one smaller line so that it doesn't take up so much real estate." They are a coming-soon note and a $4.99 upsell sitting above the map people actually came for — three lines and an icon each, most of the first screen. Icon, name, and the open arrow on one row; the sell copy is folded away. */ body.is-signed-in .v2-travel .tw-tiles{gap:8px;} body.is-signed-in .v2 .tile.tw-tile{ display:flex;align-items:center;gap:10px;padding:11px 14px;text-align:left;} body.is-signed-in .v2 .tile.tw-tile > .big{font-size:1.15rem;margin:0;flex:none;float:none;} body.is-signed-in .v2 .tile.tw-tile .tw-mid{flex:1 1 auto;min-width:0;} body.is-signed-in .v2 .tile.tw-tile .t-word{font-size:.92rem;margin:0;line-height:1.3;} body.is-signed-in .v2 .tile.tw-tile .t-eye{font-size:.62rem;margin:0;line-height:1.3;} body.is-signed-in .v2 .tile.tw-tile .t-sub{display:none;} /* the sell, folded away */ body.is-signed-in .v2 .tile.tw-tile .askline{flex:none;font-size:.78rem;} body.is-signed-in .v2 .tile.tw-tile::after{display:none;} /* ── THE ASK PANEL STARTS AT THE TOP. (Nik, Aug 30 2026) ───────────────── "on the ask tab can you remove the dead space?" Yes, and it touches nothing else: body.view-ask is stamped by showView, so this applies on that tab only. The panel is the whole screen there — it has no reason to sit under a strip of page background. */ body.is-signed-in.view-ask .state-signed-in > .wrap{padding-top:0;} body.is-signed-in.view-ask .greet{display:none;} body.is-signed-in #board-ask-view .ask-bar{margin-top:0;} } /* ══ LOVE, FLAT ON THE PAGE (Nik, Aug 25 2026: "the visual needs to be on the page instead of text boxes, and full width") — the year bar and the date cards sit directly on the page like the travel room does. box-in-box gone. display only: every id and hook the wiring uses stays exactly where it was. */ body.is-signed-in #board-compat > .band.feature-band{border:none !important;background:transparent !important;padding:0 !important;max-width:none !important;} body.is-signed-in #board-compat .feature-pad{padding:0 !important;max-width:none !important;} body.is-signed-in #board-compat .v2 .hero{background:transparent !important;border:none !important;border-radius:0 !important;padding:8px 0 0 !important;max-width:none !important;} body.is-signed-in #board-compat .cw-panel{max-width:none !important;} /* ══════════════════════════════════════════════════════════════════════════ ONE RESPONSIVE LAYER — PHONE · TABLET · DESKTOP (Nik, Aug 30 2026) "You keep putting a text box over a text box, which makes the website look squishy... It needs to be full width on mobile so people can read it... Find a way to make it optimized for desktop and mobile and iPad differently." Everything above this comment is the desktop design and is left alone. This block is last in the file, so where it disagrees with an earlier rule at the same specificity it wins — which is the whole point: the phone rules kept losing to desktop rules written later in the file. Measured, not guessed. Every rule below was written against a headless render of this stylesheet at 390 / 430 / 768 / 1024 / 1512, checking three things on every tab: nothing runs past the screen edge, no bordered box sits inside another bordered box, and no paragraph is narrower than ~300px. THE THREE SIZES phone <= 600px one column, panels full-bleed, no card inside a card tablet 601-1024 two-up cards, panels keep their edges, wider gutter desktop >= 1025 untouched ══════════════════════════════════════════════════════════════════════════ */ /* the gutter every rule below shares, so a full-bleed panel cancels exactly the padding the wrap applied and not a number someone guessed. */ body.is-signed-in{--al-gut:14px;} @media(min-width:601px){ body.is-signed-in{--al-gut:24px;} } @media(min-width:1025px){ body.is-signed-in{--al-gut:28px;} } body.is-signed-in .state-signed-in > .wrap{padding-left:var(--al-gut);padding-right:var(--al-gut);} @media(min-width:901px){ body.is-signed-in .state-signed-in > .wrap{padding-left:calc(88px + var(--al-gut));} } /* ─────────────────────────── PHONE ─────────────────────────── */ @media(max-width:600px){ /* 1 · NOTHING MAY PUSH THE PAGE SIDEWAYS. border-box everywhere on the board: half the overflow was a width:100% box that then added its own padding and border on top. */ body.is-signed-in .state-signed-in :where(#chart-output, #chart-output *){box-sizing:border-box;} body.is-signed-in .state-signed-in{overflow-x:hidden;} /* 2 · NO BOX INSIDE A BOX. The outer holders stop being surfaces. The cards INSIDE them keep their own edges, because those are real separate objects — it is the wrapper around them that was pure wasted width. */ body.is-signed-in .state-signed-in :is( .band, .feature-band, .feature-pad, .today-strip, .cw-panel, .al-panel, .v2 .strip, #compat-pad, .lovewrap ){ background:transparent !important; border:0 !important; border-radius:0 !important; padding-left:0 !important; padding-right:0 !important; /* me/index.html pulls .cw-panel out by -1rem to fake full width. The wrap's gutter is 14px, not 16px, so that overshot the screen by 2px a side and the whole love tab could be scrolled sideways. The gutter is cancelled by the token above or not at all — never by a second guess at the number. */ margin-left:0 !important; margin-right:0 !important; max-width:none !important; } /* 3 · THE READING SURFACES GO EDGE TO EDGE. The gradient stays — it IS the read. The box around it goes, and the text gets the phone's full width with one comfortable thumb-margin inside. */ body.is-signed-in .state-signed-in :is( .v2 .hero, .ss-hero, .ss-season, .mh-hero, .free-door, .v2 .life-card ){ margin-left:calc(var(--al-gut) * -1) !important; margin-right:calc(var(--al-gut) * -1) !important; border-left:0 !important;border-right:0 !important; border-radius:0 !important; padding-left:18px !important;padding-right:18px !important; max-width:none !important; } /* love's hero is already flat (it is drawn straight on the page) — it must NOT get the negative margins as well or it hangs 15px off both edges, which is exactly what the render showed at 390px. */ body.is-signed-in #board-compat .v2 .hero{ margin-left:0 !important;margin-right:0 !important; padding-left:0 !important;padding-right:0 !important; } /* 4 · ONE COLUMN. EVERYWHERE. The 2-up tile grid is a DESKTOP idea. On a 390px phone two tiles leave the caption 140px wide, which is the squish. `.tiles[style]` carries an inline style and an !important from a 640px rule, so it is named here explicitly rather than hoped away. */ body.is-signed-in .v2 .tiles, body.is-signed-in .v2 .tiles[style]{grid-template-columns:1fr !important;gap:10px;} body.is-signed-in .v2 :is(.rooms,.kutas,.now,.rnrow,.life-row,.ss-cells,.big-three,.sky-grid){ grid-template-columns:1fr !important;} body.is-signed-in .cw-cards{grid-template-columns:1fr !important;} body.is-signed-in .v2 .today-split{display:block !important;} /* 5 · TEXT IS NEVER CRUSHED INTO A COLUMN. A flex child with no min-width falls back to min-content, which on a phone means one word per line. This is the single most common cause of it here. */ body.is-signed-in .state-signed-in :is(.v2,.cw-panel) :is(.jt,.fr,.catrow,.glance,.rnrow,.prog-top) > *{ min-width:0;} body.is-signed-in .state-signed-in :is(.v2 .fr,.v2 .catrow,.v2 .glance,.cw-head){flex-wrap:wrap;} /* THE TILE IS A GRID, NOT A FLEX ROW. display:flex put EVERY child on one line — the eyebrow, the headline, the caption and the number all side by side — which left the caption 159px wide on a 390px phone. Two columns: the ring or the big number on the left spanning the whole tile, every line of text stacked in a full-width column beside it. A tile with no ring simply has an empty 0-wide first column. */ body.is-signed-in .v2 .tile{display:block;text-align:left;padding:14px 16px;} body.is-signed-in .v2 .tile > :is(.ring,.big){float:left;margin:0 14px 4px 0;} body.is-signed-in .v2 .tile::after{content:'';display:block;clear:both;} body.is-signed-in .v2 .tile > *{min-width:0;} body.is-signed-in .v2 .tile .big{font-size:1.6rem;} body.is-signed-in .v2 .tile .ring{width:56px;height:56px;} body.is-signed-in .v2 .tile .t-eye{display:block;} body.is-signed-in .v2 .tile .t-sub{font-size:.78rem;} /* the moon tile is a sentence people screenshot — it gets the whole row */ body.is-signed-in .v2 .tile-moon{display:block;} /* it left the .tiles grid on Aug 30 to sit above the read, so it carries its own spacing now instead of borrowing the grid's gap */ body.is-signed-in .v2 .today-split > .tile-moon{margin:10px 0 0;} body.is-signed-in .v2 .tile .mn-share{grid-column:1 / -1;} /* SECTION HEADS STACK. Every one of these is a flex row holding a title and a small note; with nowrap the note became a 168px ribbon running down the side of the screen. The heads themselves are flex too, not just .band-head. */ body.is-signed-in .state-signed-in :is(.band-head,.v2 h2,.v2 h3,.section-head){ flex-wrap:wrap;gap:2px 10px;} body.is-signed-in .state-signed-in :is(.band-meta,.band-head > span,.v2 h2 > span){ flex:1 1 100%;min-width:0;} /* a card that already sits inside the wrap's gutter must not add its own */ body.is-signed-in .state-signed-in :is(.cw-stats,.cw-half,.cw-intro,.cw-cards){ margin-left:0 !important;margin-right:0 !important;} /* the moon marks sit ON the track, so at 0% and 100% half the circle hangs off the screen. Inset the track by the mark's radius and they land inside it. */ body.is-signed-in .prog-track{margin-left:8px;margin-right:8px;} /* 6 · THE YEAR BAR IS THE WIDTH OF THE PHONE. (Nik, Aug 30 2026) It used to be forced to 520px and .lovewrap made a sideways scroller, so reaching december dragged the whole hero with it — the "you" circle slid off the left edge, "jan" vanished, and the easy/peace/sex/luck row lost its first bar. His words: "the bar was still phone width and I was scrolling between each coloured thing... I didn't have to scroll the page left or right." So the bar fits, jan to dec, on one screen. The blocks get thin, which is why they keep a floor width and a tall touch area. Nothing here scrolls. */ body.is-signed-in :is(.v2 .yearbar,.cw-year-track){min-width:0 !important;width:100%;} body.is-signed-in :is(.v2 .lovewrap,.cw-year-wrap,.cw-year-scroll){ overflow-x:visible !important;width:100%;} body.is-signed-in .cw-year-track{height:44px;border-radius:10px;} /* the drag needs the finger; without this the page scrolls instead of scrubbing */ body.is-signed-in .cw-year-track,body.is-signed-in .cw-yb{touch-action:none;} /* the per-period tools sit on one line and wrap rather than stack into a column */ body.is-signed-in .v2 .lrow-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;} body.is-signed-in .v2 .lrow-tools > *{flex:0 1 auto;} body.is-signed-in .cw-yb{min-width:4px;} /* a thin block is hard to hit, so the selected one gets a mark you can see */ body.is-signed-in .v2 .cw-yb.sel{outline:2px solid var(--ink);outline-offset:-2px;z-index:2;} body.is-signed-in .pair{flex-wrap:wrap;justify-content:center;} body.is-signed-in .v2 table{display:block;overflow-x:auto;} body.is-signed-in .state-signed-in :is(.cw-stats,.v2 .bt,.band,.tcell){max-width:100%;} body.is-signed-in .cw-stats{flex-direction:column;align-items:flex-start;gap:14px;padding:14px 0;} body.is-signed-in .cw-stat{padding-right:0;border-right:none;} /* 7a · LOVE OPENS ON THE MATCHES, NOT ON TWO BUTTONS. The share row is a SIBLING of the hero and comes before it in the markup, so no amount of ordering inside .cw-head could ever move it — which is why the last two attempts at this did nothing. The panel becomes a flex column and the hero is pulled to the front of it. Source order is untouched, so every hook and handler still finds what it expects. */ body.is-signed-in #board-compat .cw-panel{display:flex;flex-direction:column;} body.is-signed-in #board-compat .cw-panel > .hero{order:-1;margin-top:0;} body.is-signed-in #board-compat .cw-head{margin-top:18px;} /* 7 · THE HEADINGS COME BEFORE THE BUTTONS. .cw-head holds an eyebrow and a button group and nothing else — the earlier fix ordered `h2`/.cw-title, which this markup does not contain, so it did nothing. Ordering the elements that are actually there. */ body.is-signed-in .state-signed-in .cw-head{display:flex;flex-direction:column;align-items:flex-start;gap:10px;} body.is-signed-in .state-signed-in .cw-head .cw-eye{order:1;} body.is-signed-in .state-signed-in .cw-head :is(h2,.cw-title){order:2;} body.is-signed-in .state-signed-in .cw-headbtns{order:3;display:flex;gap:8px;flex-wrap:wrap;margin:0;} body.is-signed-in .state-signed-in .cw-headbtns :is(a,button){font-size:.78rem;padding:5px 12px;} /* 8 · ROOM AT THE BOTTOM FOR THE NAV BAR THE PHONE ACTUALLY HAS. */ body.is-signed-in .state-signed-in > .wrap{ padding-bottom:calc(84px + env(safe-area-inset-bottom,0px));} } /* ─────────────────────────── TABLET (iPad) ─────────────────────────── */ /* An iPad is not a big phone and not a small desktop. It has the width for two cards but not for four, and it keeps its card edges — at this size the edge is what separates one thing from the next, which is the job the screen edge does on a phone and a mouse does on a desktop. */ @media(min-width:601px) and (max-width:1024px){ body.is-signed-in .v2 .tiles, body.is-signed-in .v2 .tiles[style]{grid-template-columns:repeat(2,1fr) !important;gap:14px;} body.is-signed-in .v2 :is(.rooms,.life-row,.ss-cells,.big-three){grid-template-columns:repeat(2,1fr) !important;} body.is-signed-in .cw-cards{grid-template-columns:repeat(2,minmax(0,1fr)) !important;} body.is-signed-in .v2 .today-split{display:block;} body.is-signed-in .state-signed-in :is(.feature-pad,.today-strip,.cw-panel){padding-left:18px;padding-right:18px;} /* .cw-stats is width:100% AND carries a 1rem side margin from the cream-era sheet, so on an iPad it measured 750px inside a 750px column and hung 7px off the right edge. The gutter belongs to the wrap, not to the button. */ body.is-signed-in .state-signed-in :is(.cw-stats,.cw-half,.cw-intro,.cw-cards){ margin-left:0 !important;margin-right:0 !important;} body.is-signed-in .cw-panel{margin-left:0 !important;margin-right:0 !important;} body.is-signed-in .state-signed-in :is(.v2 .hero,.ss-hero){padding:30px 26px 24px;border-radius:20px;} /* the year bar fits here, so it does not need to scroll */ body.is-signed-in :is(.v2 .yearbar,.cw-year-track){min-width:0;} body.is-signed-in .state-signed-in :is(.v2,.cw-panel) :is(.jt,.fr,.catrow,.glance) > *{min-width:0;} } /* Sep 2 2026: the match's score lines had a track tinted DARK brown at 10% — invisible on the dark dashboard, so a 0-point line showed nothing at all and a half-point line just stopped. A faint light track now sits under every line, so zero reads as an empty bar. */ body.is-signed-in .kuta-track{background:rgba(244,235,221,.14);} body.is-signed-in .kuta-wait .kuta-track{background:none;border-color:rgba(244,235,221,.28);} /* ── the season's transits, grouped by the part of life they touch (Sep 2 2026) ── */ body.is-signed-in .v2 .ly.ss-grouped{background:none;border:none;border-radius:0;overflow:visible;} body.is-signed-in .v2 .ss-grp{margin:0 0 26px;} body.is-signed-in .v2 .ss-grp-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 10px 4px;} body.is-signed-in .v2 .ss-grp-h span{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:600;color:var(--ink);} body.is-signed-in .v2 .ss-grp-h small{font-size:.7rem;color:var(--ink2);letter-spacing:.04em;} body.is-signed-in .v2 .ss-strip{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;} body.is-signed-in .v2 .ss-strip .lr{padding:10px 16px;} body.is-signed-in .v2 .ss-strip .lr .lwhy{margin-top:4px;} body.is-signed-in .v2 .ss-cards .lr{background:var(--panel);border:1px solid var(--line) !important;border-radius:14px;margin-bottom:10px;padding:14px 18px;} body.is-signed-in .v2 .ss-cards .lr:last-child{margin-bottom:0;} /* closed: title, the plain sentence, the bar. open: the lesson and the buttons too. */ body.is-signed-in .v2 .lr .lcue{display:block;text-align:right;font-size:.66rem;color:var(--ink2);margin-top:8px;letter-spacing:.04em;} body.is-signed-in .v2 .lr .askline,body.is-signed-in .v2 .lr .lrow-tools{display:none;} body.is-signed-in .v2 .lr.lr-open .lcue{display:none;} body.is-signed-in .v2 .lr.lr-open .askline{display:inline-block;} body.is-signed-in .v2 .lr.lr-open .lrow-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;} body.is-signed-in .v2 .lr:hover{border-color:var(--gold) !important;} @media (max-width:700px){ body.is-signed-in .v2 .ss-grp-h{margin-left:0;} body.is-signed-in .v2 .ss-cards .lr,body.is-signed-in .v2 .ss-strip .lr{padding:12px 14px;} } /* the moon card between events: the coming moon, dimmed, with the date (Sep 2 2026) */ body.is-signed-in .v2 .mn-eye{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-right:2px;} body.is-signed-in .v2 .mn-read.is-live .mn-eye{color:var(--gold);} body.is-signed-in .v2 .mn-read.is-ahead .mn-disc{opacity:1;} /* the moon stays fully drawn between events too */ body.is-signed-in .v2 .mn-read.is-ahead .mn-name{color:var(--ink2);} body.is-signed-in .v2 .mn-read.is-past .mn-disc{opacity:1;} /* travel (Sep 2 2026): rows show good + bad */ body.is-signed-in .v2-travel .tw-nm .tw-gb{display:block;font-weight:400;font-size:.74rem;line-height:1.5;margin-top:2px;} body.is-signed-in .v2-travel .tw-gb em{display:block;font-style:normal;} body.is-signed-in .v2-travel .tw-gb .g{color:var(--easy,#5fa86c);} body.is-signed-in .v2-travel .tw-gb .b{color:var(--hard,#d05a47);} body.is-signed-in .v2-travel .tw-gb .n{color:var(--ink2);} /* travel: countries first, cities on tap (Sep 2 2026) */ body.is-signed-in .v2-travel .tw-cty{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;padding:12px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);margin-top:8px;cursor:pointer;} body.is-signed-in .v2-travel .tw-cty:hover,body.is-signed-in .v2-travel .tw-cty.open{border-color:var(--gold);} body.is-signed-in .v2-travel .tw-cty .tw-nm{font-size:1rem;} body.is-signed-in .v2-travel .tw-cty .tw-vol{grid-column:1/-1;} body.is-signed-in .v2-travel .tw-cue{grid-column:1/-1;font-size:.7rem;color:var(--gold);letter-spacing:.06em;margin-top:4px;} body.is-signed-in .v2-travel .tw-cities{margin:4px 0 6px 14px;padding-left:12px;border-left:1px solid var(--line);} @media (max-width:700px){ body.is-signed-in .v2-travel .tw-cities{margin-left:6px;padding-left:8px;} }