/* ============================================================================
   GLASS — the approved "Stone" glassmorphism direction, applied to the live app.
   Frosted cards float over a fixed cinematic photo (one per tab). Cool/unisex
   palette: white text, ice-cyan (charge) + steel-blue (ease). Loads LAST so it
   wins the cascade over styles.css + sunrise.css.
   ============================================================================ */

:root{
  /* accents → cool, unisex (charge = cyan, ease = steel-blue) */
  --sk-coral:#5fd0f5; --sk-coral-deep:#7fe3ff;
  --sk-blue:#6f9fd0;  --sk-blue-ink:#a9c6e6;
  --sk-tan:#8f9aa8;   --sk-slate:#a3a8d6;
  /* surfaces / lines → translucent */
  --sk-card:rgba(18,22,31,0.46);
  --sk-line:rgba(255,255,255,0.16); --sk-line2:rgba(255,255,255,0.12);
  /* text → light (ink is also used as a few button bgs — those are overridden below) */
  --sk-ink:#eef3f8; --sk-soft:rgba(233,240,247,0.74); --sk-mute:rgba(228,236,246,0.56);
  --sk-pill-ink:#0f1320;
  /* base (styles.css) vars */
  --ink:#eef3f8; --soft:rgba(233,240,247,0.74); --muted:rgba(228,236,246,0.56);
  --line:rgba(255,255,255,0.16); --card:rgba(18,22,31,0.46); --bg:#0a0c12;
  --glass:rgba(18,22,31,0.46); --glass-dark:rgba(12,15,23,0.56);
  --ink-soft:rgba(228,236,246,0.7); --tan:#9aa7c0;  /* were warm; now cool so nothing reads orange */
  --gblur:saturate(125%) blur(22px);
  --gborder:1px solid rgba(255,255,255,0.16);
  --gshadow:inset 0 1px 0 rgba(255,255,255,0.13), 0 18px 40px -16px rgba(0,0,0,0.66);
}

/* ---- fixed cinematic background + scrim (one photo per tab) --------------- */
#glass-bg{position:fixed;inset:0;z-index:-2;background:#0a0c12 center/cover no-repeat;
  background-image:url(/static/bg-today.jpg?v=glass1);}
#glass-scrim{position:fixed;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,10,16,.28) 0%,rgba(8,10,16,.40) 46%,rgba(8,10,16,.60) 100%);}
body[data-tab="today"] #glass-bg{background-image:url(/static/bg-today.jpg?v=glass1)}
body[data-tab="forecast"] #glass-bg{background-image:url(/static/bg-ahead.jpg?v=glass1)}
body[data-tab="personality"] #glass-bg{background-image:url(/static/bg-you.jpg?v=glass1)}
body[data-tab="me"] #glass-bg{background-image:url(/static/bg-path.jpg?v=glass1)}
body[data-tab="home"] #glass-bg{background-image:url(/static/bg-you.jpg?v=glass1)}

/* ---- HOME · Block 1 "Today in 2s" — the hook card (glass + brand tokens) ---- */
.home-hero-card{padding:20px;}
.home-eyebrow2{font-size:15px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sk-coral-deep);}
.home-hero-card .home-head{font-family:var(--serif,"Fraunces","Georgia",serif);font-weight:500;
  font-size:clamp(23px,6.2vw,30px);line-height:1.15;letter-spacing:-.01em;color:#fff;margin:10px 0 0;}
.home-hero-card .home-sentence{font-size:16.5px;line-height:1.5;color:var(--sk-ink);margin:12px 0 0;}
.home-hero-card .home-sentence strong{color:var(--sk-coral-deep);font-weight:600;}
.home-bars{display:flex;flex-direction:column;gap:16px;}
.home-bar .hb-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.home-bar .hb-k{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(228,236,246,.6);}
.home-bar .hb-v{font-family:var(--serif,"Fraunces",serif);font-size:18px;font-weight:500;color:#fff;}
.home-bar .hb-track{height:9px;border-radius:99px;background:rgba(255,255,255,.13);overflow:hidden;}
.home-bar .hb-track>span{display:block;height:100%;border-radius:99px;background:var(--sk-coral-deep);transition:width .55s ease;}
/* section header — Ask no longer sits top-right, so titles get the full width */
.home-top{padding:12px 20px 2px;}
.home-title{font-family:var(--serif,"Fraunces",serif);font-weight:600;font-size:27px;line-height:1.06;
  letter-spacing:-.01em;color:#fff;}
/* Best for / Avoid — plain day-guidance rows */
/* Best for / Avoid — its own card; each row taps to expand 2–3 lines of detail */
.home-guide-card .home-eyebrow2{margin-bottom:13px;}
.hg-item{display:block;width:100%;text-align:left;background:none !important;border:none !important;
  box-shadow:none !important;padding:0 !important;cursor:pointer;}
.hg-item + .hg-item{margin-top:15px;border-top:1px solid var(--sk-line2);padding-top:15px !important;}
.hg-head{display:flex;align-items:center;gap:9px;font-size:16px;line-height:1.5;color:var(--sk-ink);}
.hg-head .hg-good,.hg-head .hg-bad{font-weight:600;flex:none;}
.hg-head .hg-good{color:var(--sk-coral-deep);}
.hg-head .hg-bad{color:var(--sk-blue-ink);}
.hg-head .hg-short{flex:1;}
.hg-plus{flex:none;width:19px;height:19px;color:var(--sk-coral-deep);}
.hg-plus .hg-v{transition:opacity .2s ease;}
.hg-item.open .hg-plus .hg-v{opacity:0;}   /* + becomes − when expanded */
.hg-more{font-size:16px;line-height:1.62;color:var(--sk-ink);margin-top:11px;}
/* primary CTA → today's full prognosis (pinned to the bottom of the screen) */
.home-cta{width:100%;margin-top:auto;}
#pane-home{padding-bottom:0;}
/* on Home, Ask sits top-right so the cards own the full bottom space */
body[data-tab="home"] .ask-fab{top:14px;bottom:auto;right:16px;}
/* app-like full-screen sections that snap as you scroll (Pattern / Co-Star feel) */
body.home-active{scroll-snap-type:y proximity;}
.home-section{min-height:calc(100svh - 64px);scroll-snap-align:start;
  display:flex;flex-direction:column;padding:6px 0 16px;}
.home-section > .sk-col{flex:1;display:flex;flex-direction:column;gap:13px;}
/* slightly more solid home cards so text reads cleanly over the photo */
body[data-tab="home"] .sc{background:rgba(14,18,28,0.64) !important;}
/* Section 2 — Major transits: the two great tides, both compact cards on one screen */
.home-sub{font-size:15.5px;line-height:1.45;color:var(--sk-soft);margin-top:7px;}
/* two cards that split the screen and centre their content — fills the space, stays readable */
.hs-trends > .sk-col{gap:14px;}
.tr-card{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
  padding:22px 20px;position:relative;overflow:hidden;}
.tr-glyph{position:absolute;top:16px;right:18px;font-size:38px;line-height:1;opacity:.5;pointer-events:none;
  font-family:"Apple Symbols","Segoe UI Symbol",serif;}
.rare{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#bdeeff;background:rgba(127,227,255,.14);border:1px solid rgba(127,227,255,.34);border-radius:999px;padding:5px 12px;}
.tr-name{font-family:var(--serif,"Fraunces",serif);font-weight:500;font-size:clamp(24px,6.2vw,29px);
  line-height:1.1;letter-spacing:-.01em;color:#fff;margin:11px 0 0;}
.tr-river{margin:14px 0 2px;}
.tr-river svg{width:100%;height:auto;display:block;}
.tr-line{font-size:16.5px;line-height:1.52;color:#eef3f8;margin:12px 0 0;}
.rvlab{font-size:11px;fill:#8c97ac;font-family:Inter,sans-serif;font-weight:600;}
.rvlab.cy{fill:#7FE3FF;}
.rvcap{fill:#8c97ac;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:9.5px;}
.rvnow{fill:#fff;font-weight:700;font-size:11px;letter-spacing:.08em;
  paint-order:stroke;stroke:rgba(10,13,20,.8);stroke-width:3px;}
/* the honest one-liner on every season/tide card: live vs coming vs quiet */
.ssn-state{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#8c97ac;
  margin:2px 0 4px;}
.ssn-state.on{color:#7fe3ff;font-weight:600;}
.ssn-sdot{width:7px;height:7px;border-radius:50%;background:#7fe3ff;
  box-shadow:0 0 8px rgba(127,227,255,.8);}
/* the week's shape card inside the week report — same strip, not tappable */
.wk-shape .ahw-col{cursor:default;}
/* one-time pointer under an Ask answer given without a generated forecast */
.ask-hint{margin:10px 4px 2px;padding:10px 13px;border-radius:12px;
  background:rgba(127,227,255,.10);border:1px solid rgba(127,227,255,.30);
  color:#3f4b60;font-size:13.5px;line-height:1.5;cursor:pointer;}
.ask-hint b{color:#16324a;}
/* Section 3 — About you: three separated blocks, kept airy and un-repetitive.
   Serif runs at book weight (400) — elegant, not heavy — and the two facets get
   a soft accent edge + colour so they don't read as identical boxes. */
.hs-you > .sk-col{gap:13px;}
.yc-identity{flex:0 0 auto;padding:20px 20px 24px;}
.yc-chart{display:flex;justify-content:center;margin-bottom:2px;}
.yc-chart svg{width:190px;height:190px;}
.yc-sig{font-size:13px;letter-spacing:.04em;color:var(--sk-soft);text-align:center;margin-top:4px;}
.yc-essence{font-family:var(--serif,"Fraunces",serif);font-weight:400;font-size:22px;line-height:1.36;
  color:#f2f6fb;text-align:center;margin:13px 6px 0;}
.yc-fac{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;padding:20px 20px 20px 24px;}
.yc-fac::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:3px;opacity:.85;}
.yc-fac-power::before{background:var(--sk-coral-deep);}
.yc-fac-grow::before{background:var(--sk-blue-ink);}
.yc-fk{font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px;}
.yc-fac-power .yc-fk{color:var(--sk-coral-deep);}
.yc-fac-grow .yc-fk{color:var(--sk-blue-ink);}
/* descriptions read as prose (sans), NOT as another serif headline */
.yc-fl{font-family:var(--sans,"Inter",sans-serif);font-weight:400;font-size:16px;line-height:1.62;
  letter-spacing:.005em;color:var(--sk-ink);}
.yc-open{width:100%;margin-top:2px;flex:0 0 auto;}
.home-you-empty{padding:24px 22px !important;text-align:center;}
.hye-line{font-size:17px;line-height:1.55;color:var(--sk-ink);margin-bottom:16px;}

/* ============================================================================
   TODAY vNext — mode word + energy curve + season + the pre-reading gate
   ============================================================================ */
#pane-today .sc{background:rgba(14,18,28,0.64) !important;}
.td-screen{min-height:calc(100svh - 84px);display:flex;flex-direction:column;padding:6px 0 10px;}
.td-screen > .sk-col{flex:1;display:flex;flex-direction:column;gap:13px;}
.td-hero{padding:22px 20px 24px;}
.td-chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.02em;
  color:#bdeeff;background:rgba(127,227,255,.12);border:1px solid rgba(127,227,255,.30);
  border-radius:999px;padding:6px 13px;}
.td-dot{width:7px;height:7px;border-radius:50%;background:var(--sk-coral-deep);
  box-shadow:0 0 8px rgba(127,227,255,.8);}
.td-word{font-family:var(--serif,"Fraunces",serif);font-weight:600;font-size:clamp(56px,17vw,74px);
  line-height:1.02;letter-spacing:-.015em;color:#fff;margin:14px 0 0;}
.td-sentence{font-family:var(--serif,"Fraunces",serif);font-weight:400;font-size:21.5px;line-height:1.42;
  color:#e9eff7;margin:12px 0 0;min-height:1.4em;}
.td-curve-card{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding:18px 18px 16px;}
.td-curve-k{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#bdeeff;margin-bottom:6px;}
.td-curve-card svg{width:100%;height:auto;display:block;}
.td-rows{margin-top:10px;display:flex;flex-direction:column;gap:11px;}
.td-row{display:flex;gap:10px;align-items:baseline;}
.td-row-ic{flex:none;width:18px;text-align:center;font-size:14px;}
.td-row-ic.good,.td-row-k.good{color:var(--sk-coral-deep);}
.td-row-ic.bad,.td-row-k.bad{color:var(--sk-blue-ink);}
.td-row-ic.fr,.td-row-k.fr{color:#9aa7e8;}
.td-row-k{font-weight:600;font-size:15px;margin-right:7px;}
.td-row-v{font-size:15px;line-height:1.5;color:var(--sk-ink);}
.td-season{display:flex !important;align-items:center;gap:12px;width:100%;text-align:left;
  padding:15px 17px;cursor:pointer;border-radius:18px;}
.td-season-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--sk-coral-deep);
  box-shadow:0 0 10px rgba(127,227,255,.7);}
.td-season-tx{flex:1;display:flex;flex-direction:column;gap:3px;}
.td-season-k{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#bdeeff;}
.td-season-t{font-family:var(--serif,"Fraunces",serif);font-weight:500;font-size:17.5px;color:#fff;line-height:1.25;}
.td-season-ch{flex:none;font-size:22px;color:var(--sk-soft);}
.td-hint{text-align:center;font-size:13px;color:var(--sk-mute);margin-top:9px;}
/* --- the pre-reading gate ------------------------------------------------- */
.pr-top{display:flex;align-items:center;gap:14px;padding:16px 18px 4px;}
.pr-progress{flex:1;height:3px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;}
.pr-progress span{display:block;height:100%;width:25%;border-radius:99px;background:var(--sk-coral-deep);
  transition:width .3s ease;}
.pr-skip{flex:none;background:none;border:none;color:var(--sk-soft);font-size:14.5px;font-weight:600;
  cursor:pointer;padding:6px 2px;}
.pr-col{padding-top:10px;}
.pr-eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#bdeeff;padding:0 4px;}
.pr-q{font-family:var(--serif,"Fraunces",serif);font-weight:500;font-size:clamp(27px,7.4vw,33px);
  line-height:1.12;color:#fff;padding:0 4px;margin-top:2px;}
.pr-q2k{font-size:15.5px;font-weight:600;color:var(--sk-soft);padding:0 4px;margin-top:14px;}
.pr-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px;}
.pr-chip{font-size:15px;font-weight:600;color:var(--sk-ink);background:rgba(14,18,28,0.55);
  border:1px solid rgba(255,255,255,.20);border-radius:14px;padding:13px 16px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;}
.pr-chip.on{background:rgba(127,227,255,.16);border-color:rgba(127,227,255,.65);color:#dff6ff;}
.pr-ack{margin-top:6px;border:1px solid rgba(127,227,255,.35) !important;padding:15px 17px;}
.pr-ack-k{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#bdeeff;}
.pr-ack-l{font-family:var(--serif,"Fraunces",serif);font-weight:400;font-size:19px;line-height:1.4;
  color:#fff;margin-top:6px;}
.pr-cta{width:100%;margin-top:auto;}

/* ============================================================================
   THE READING REPORT — orbit loader, sky seal, readable glance, clear door
   ============================================================================ */
/* orbit loader: a planet circling while the stage lines advance */
.orbit-wrap{position:relative;width:96px;height:96px;margin:2px auto 4px;}
.orbit-ring{position:absolute;inset:0;border:1.5px dashed rgba(255,255,255,.22);border-radius:50%;}
.orbit-ring.r2{inset:17px;border-color:rgba(127,227,255,.20);border-style:solid;border-width:1px;}
.orbit-core{position:absolute;top:50%;left:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #d8f4ff, #7fe3ff 62%, #4db9de);
  box-shadow:0 0 18px rgba(127,227,255,.85);}
.orbit-sat{position:absolute;top:0;left:0;width:96px;height:96px;animation:orbitspin 2.8s linear infinite;}
.orbit-sat::before{content:"";position:absolute;top:-4.5px;left:50%;margin-left:-4.5px;width:9px;height:9px;
  border-radius:50%;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.95);}
@keyframes orbitspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.orbit-sat{animation:none;}}
/* the sky seal — moon face + glyph-pair forces */
.sky-card{padding:18px 19px 15px;}
.sky-top{display:flex;align-items:center;gap:13px;margin-top:10px;}
.moon-disc{width:40px;height:40px;flex:none;filter:drop-shadow(0 0 10px rgba(230,238,248,.25));}
.sky-tx{flex:1;}
.sky-phase{font-family:var(--serif,"Fraunces",serif);font-weight:500;font-size:19px;color:#fff;line-height:1.2;}
.sky-time{font-size:14px;line-height:1.45;color:var(--sk-soft);margin-top:3px;}
.sky-forces{margin-top:15px;display:flex;flex-direction:column;}
.fp-row{padding:13px 0 !important;background:none !important;border:none !important;box-shadow:none !important;
  cursor:pointer;text-align:left;width:100%;}
.fp-row + .fp-row{border-top:1px solid var(--sk-line2) !important;}
.fp-pair{display:flex;align-items:center;gap:9px;}
.fp-g{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:19px;color:#eaf3fc;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  font-family:"Apple Symbols","Segoe UI Symbol",serif;}
.fp-line{flex:1;height:14px;min-width:26px;}
.fp-a{flex:none;font-size:15px;color:#bdeeff;font-family:"Apple Symbols","Segoe UI Symbol",serif;}
.fp-name{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:600;color:#f2f6fb;margin-top:9px;}
.fp-span{font-size:10.5px;font-weight:700;letter-spacing:.09em;color:#9fb3cb;
  border:1px solid rgba(255,255,255,.20);border-radius:999px;padding:3px 9px;}
.fp-name .force-toggle{margin-left:auto;color:var(--sk-coral-deep);font-size:17px;}
.fp-row .force-explain{margin-top:9px;font-size:15px;line-height:1.6;color:var(--sk-ink);}
/* at a glance — big, white, symbol bullets */
.glance-card{padding:18px 19px;}
.glance-wrap{margin-top:11px;display:flex;flex-direction:column;gap:13px;}
.glance-b{display:flex;gap:11px;align-items:flex-start;font-size:17px !important;line-height:1.6 !important;
  color:#fff !important;}
.glance-b .gb-mark{flex:none;font-size:15px;line-height:1.75;}
.glance-b strong{color:#bdeeff;}
/* the door into the report */
.read-cta{width:100%;margin-top:4px;}
#subview .td-hint{margin-top:-2px;}
/* dot meters replace the inline reading bars */
.rvd{display:flex;gap:7px;margin-top:7px;}
.rvd i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14);}
.rvd i.on{background:var(--sk-coral-deep);box-shadow:0 0 8px rgba(127,227,255,.55);}
/* moon illumination tag — the disc and the phase name agree out loud */
.sky-illum{font-family:var(--sans,"Inter",sans-serif);font-size:13.5px;font-weight:600;
  color:var(--sk-soft);letter-spacing:.01em;}
/* section pages: nav at the TOP (a slim next-link stays at the bottom) */
.read-nav-top{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:2px 20px 10px;font-size:12.5px;font-weight:700;letter-spacing:.07em;
  color:rgba(228,236,246,0.85) !important;}
.read-nav-top .rn-prev,.read-nav-top .rn-next{padding:8px 0;-webkit-tap-highlight-color:transparent;}
.read-nav-top .rn-next{text-align:right;color:#bdeeff;}
/* each section's graphs lead the sheet — visual before verbal */
.sec-visuals{margin:2px 0 16px;padding:14px 15px 13px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;gap:13px;}
.sec-visuals .rv{margin:0 !important;}
/* the life-areas star chart on the sky card */
.sky-radar-k{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#bdeeff;margin:18px 0 2px;}
.sky-radar svg{width:100%;height:auto;display:block;}
.rd-k{font-size:12.5px;font-weight:600;fill:#eaf3fc;font-family:Inter,sans-serif;}
.rd-w{font-size:11px;font-weight:700;font-family:Inter,sans-serif;letter-spacing:.03em;}
.sky-info{display:block;background:none !important;border:none !important;box-shadow:none !important;
  color:var(--sk-soft);font-size:13.5px;font-weight:600;cursor:pointer;padding:4px 0 0 !important;text-align:left;}
.sky-info .ski-plus{color:var(--sk-coral-deep);}
.sky-explain{font-size:14px;line-height:1.6;color:var(--sk-soft);margin-top:8px;
  border-top:1px solid var(--sk-line2);padding-top:10px;}
/* the astrology whisper — small, quiet, credible */
.rv-why{display:flex;gap:8px;align-items:baseline;margin-top:18px;padding-top:12px;
  border-top:1px dashed rgba(255,255,255,.16);}
.rv-why .why-k{flex:none;color:var(--sk-coral-deep);font-size:12px;}
.rv-why .why-t{font-size:13px;line-height:1.5;color:rgba(228,236,246,.62);
  letter-spacing:.02em;font-style:italic;}
/* section sheet: editorial number watermark + title rule */
#subview .read-sheet{position:relative;overflow:hidden;}
.rs-num{position:absolute;top:2px;right:14px;font-family:var(--serif,"Fraunces",serif);
  font-size:74px;font-weight:600;line-height:1;color:rgba(255,255,255,.07);pointer-events:none;}
.rs-rule{width:44px;height:3px;border-radius:3px;background:var(--sk-coral-deep);
  opacity:.85;margin:10px 0 2px;}
/* descenders (y, g, p) must never clip on the serif title */
#subview .read-sheet .read-title{line-height:1.28 !important;padding-bottom:3px;}

/* ============================================================================
   MOBILE HARDENING — the nav is sacred; nothing may cover or clip it
   ============================================================================ */
.bottomnav,.bottomnav-icons{z-index:200 !important;
  padding-bottom:calc(9px + env(safe-area-inset-bottom)) !important;}
/* …except the Ask sheet: it's a modal with a backdrop, and the "sacred nav"
   was sitting ON TOP of its composer — hiding the message box entirely */
.ask-sheet{z-index:240 !important;}
/* content never hides behind the fixed nav (raised Ask orb adds height) */
.tabpane,#subview{padding-bottom:96px !important;}
/* …and the FIRST header of every tab clears the phone's status bar / island
   (env() is 0 in a plain browser tab, so the web is untouched) */
.tabpane{padding-top:calc(env(safe-area-inset-top, 0px)) !important;}
/* slim sub-view hero (sections): just the buttons, no dead space */
.subv-slim{min-height:0 !important;padding-bottom:0 !important;}
.subv-slim .sk-statusbar{margin-bottom:0 !important;}
/* top nav: long titles ellipsize instead of pushing off-screen */
.read-nav-top{padding:6px 18px 10px;}
.read-nav-top .rn-prev,.read-nav-top .rn-next{max-width:42%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.rn-count{flex:none;font-size:12px;font-weight:700;color:rgba(228,236,246,.5);letter-spacing:.06em;}
/* bottom next-link: room for descenders, never clipped by the sheet edge */
#subview .read-sheet .read-nav{margin-top:16px;padding:12px 2px 4px;line-height:1.5;}
/* the Moon block, labelled as the Moon, with its meaning */
.sky-moon-k{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#bdeeff;margin-bottom:3px;}
.sky-mean{font-size:14px;line-height:1.5;color:var(--sk-soft);margin-top:3px;}
.sky-time{font-size:14px;line-height:1.55;color:var(--sk-soft);margin-top:12px;
  padding-top:10px;border-top:1px solid var(--sk-line2);}
.sky-time-k{font-weight:700;color:rgba(234,241,249,.85);}
/* inline graphs: ONE visual language — same track, same labels, full width */
.rvd{display:flex;justify-content:space-between;gap:0;margin-top:8px;}
.rvd i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.13);}
.rvd i.on{background:var(--sk-coral-deep);box-shadow:0 0 8px rgba(127,227,255,.55);}
.rv .rv-top{display:flex;justify-content:space-between;align-items:baseline;}
.rv .rv-lab,.rv .rv-poles span,.rv .rv-poles .rv-mid{font-size:13px !important;font-weight:600;
  color:rgba(228,236,246,.78) !important;letter-spacing:.02em;}
.rv .rv-val{font-size:13.5px;font-weight:700;color:#bdeeff;}
.rv .rv-line{height:6px;border-radius:99px;background:rgba(255,255,255,.13);position:relative;margin-top:8px;}
.rv .rv-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:13px;height:13px;
  border-radius:50%;background:#7fe3ff;box-shadow:0 0 9px rgba(127,227,255,.6);}
.rv .rv-poles{display:flex;justify-content:space-between;margin-top:7px;}
/* the ask-doors under every section */
.ask-under .ask-q{font-size:15px;}

/* ============================================================================
   AHEAD vNext — week strip · month band · the seasons rail
   ============================================================================ */
#pane-forecast .sc{background:rgba(14,18,28,0.64) !important;}
.ah-screen{padding:6px 0 10px;}
.ah-screen > .sk-col{gap:13px;}
.ah-card{padding:18px 18px 15px;}
.ahw-row{display:flex;gap:5px;margin-top:12px;}
.ahw-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;
  background:none !important;border:1px solid transparent !important;box-shadow:none !important;
  padding:8px 2px !important;border-radius:12px;-webkit-tap-highlight-color:transparent;}
.ahw-col.on{background:rgba(127,227,255,.08) !important;border-color:rgba(127,227,255,.4) !important;}
.ahw-wd{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--sk-mute);text-transform:uppercase;}
.ahw-barwrap{height:52px;display:flex;align-items:flex-end;}
.ahw-bar{width:9px;border-radius:99px;box-shadow:0 0 8px rgba(127,227,255,.3);}
.ahw-word{font-size:10.5px;font-weight:700;letter-spacing:.02em;}
.ahw-dn{font-size:12px;color:var(--sk-soft);}
.ahw-line{font-size:14.5px;line-height:1.55;color:var(--sk-ink);margin-top:11px;}
/* the month's meaning, as rows a human can act on */
.ahm-rows{margin-top:12px;display:flex;flex-direction:column;gap:11px;}
.ahm-row{display:flex;gap:11px;align-items:baseline;}
.ahm-ic{flex:none;width:18px;text-align:center;font-size:15px;}
.ahm-tx{font-size:14.5px;line-height:1.55;color:var(--sk-ink);}
.ahm-tx b{color:#fff;}
/* ============================================================================
   YOU · the depth ladder — built %, Big Three, planet-by-planet
   ============================================================================ */
.mixp-sub{font-size:13.5px;color:var(--sk-soft);line-height:1.5;margin:8px 0 4px;}
.mixp{margin-top:13px;}
.mixp-top{display:flex;align-items:baseline;gap:8px;}
.mixp-dot{flex:none;width:9px;height:9px;border-radius:50%;align-self:center;}
.mixp-k{font-size:15.5px;font-weight:600;color:#f2f6fb;}
.mixp-tag{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#bdeeff;background:rgba(127,227,255,.13);border-radius:999px;padding:2.5px 8px;}
.mixp-pct{margin-left:auto;font-size:15px;font-weight:700;color:#bdeeff;}
.mixp-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:6px;}
.mixp-bar span{display:block;height:100%;border-radius:99px;}
.mixp-mean{font-size:13.5px;color:var(--sk-soft);margin-top:5px;}
/* the Big Three — three DISTINCT inner cards, not three list rows */
.b3-box{display:flex;gap:14px;align-items:flex-start;margin-top:12px;
  padding:16px 16px;border-radius:16px;background:rgba(255,255,255,.055);
  border:1px solid rgba(127,227,255,.18);}
.b3-g{flex:none;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:23px;color:#bdeeff;background:rgba(127,227,255,.11);border:1px solid rgba(127,227,255,.36);
  box-shadow:0 0 16px rgba(127,227,255,.18);
  font-family:"Apple Symbols","Segoe UI Symbol",serif;}
.b3-term{font-family:var(--serif,"Fraunces",serif);font-weight:500;font-size:20px;color:#fff;line-height:1.2;}
.b3-role{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#bdeeff;margin-top:4px;}
.b3-line{font-size:15px;line-height:1.55;color:#e9eff7;margin-top:5px;}
/* the planet ladder — grouped, airier, high contrast */
.pl-sub{font-size:14.5px;color:rgba(228,236,246,.75);line-height:1.55;margin:7px 0 2px;}
.pl-group{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:#bdeeff;margin:18px 0 2px;padding-bottom:8px;border-bottom:1px solid rgba(127,227,255,.22);}
.pl-row{display:flex;flex-wrap:wrap;gap:0 13px;align-items:center;padding:15px 0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;}
.pl-row + .pl-row{border-top:1px solid var(--sk-line2);}
.pl-g{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:19px;color:#eaf3fc;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  font-family:"Apple Symbols","Segoe UI Symbol",serif;}
.pl-main{flex:1;min-width:0;}
.pl-t{font-size:16.5px;font-weight:600;color:#fff;}
.pl-house{font-weight:500;color:rgba(228,236,246,.72);font-size:14px;}
.pl-role{font-size:14px;color:rgba(228,236,246,.78);margin-top:3px;}
.pl-row .force-toggle{color:var(--sk-coral-deep);font-size:18px;}
/* the expanded story — an inset panel: sentence-by-sentence, cyan bolds */
.pl-story{flex-basis:100%;margin-top:12px;padding:15px 16px;border-radius:13px;
  background:rgba(10,14,22,0.55);border:1px solid rgba(127,227,255,.24);}
.pl-story p{font-size:15.5px;line-height:1.62;color:#eef3f8;margin:0;}
.pl-story p + p{margin-top:11px;}
.pl-story strong,.pl-story b{color:#7fe3ff;}
.pl-story em,.pl-story i{color:#c7d5e8;}

/* ============================================================================
   YOU · same glass as every other tab (ONE design language) + visible headlines
   ============================================================================ */
#pane-personality .sc{background:rgba(14,18,28,0.64) !important;
  border:1px solid rgba(255,255,255,0.13) !important;}
/* section headlines: big, white, with a glowing cyan dash — THE app-wide header.
   Applied on You, Ahead and the reading deck so every tab speaks the same. */
#pane-personality .sc > .sk-label,
#pane-personality .sc .sc-rowb > .sk-label,
#pane-forecast .ah-card > .sk-label,
#subview .sky-card > .sk-label,
#subview .glance-card > .sk-label{
  font-size:16px !important;font-weight:700 !important;color:#fff !important;
  letter-spacing:.05em !important;display:flex;align-items:center;gap:10px;}
/* the header mark is a ✦ star — a dash read as a collapse toggle it wasn't */
#pane-personality .sc > .sk-label::before,
#pane-personality .sc .sc-rowb > .sk-label::before,
#pane-forecast .ah-card > .sk-label::before,
#subview .sky-card > .sk-label::before,
#subview .glance-card > .sk-label::before{
  content:"✦";flex:none;color:var(--sk-coral-deep);font-size:13px;line-height:1;
  text-shadow:0 0 9px rgba(127,227,255,.65);}
/* planet rows become their own small platforms (the Big-Three treatment) */
#pane-personality .pl-row{background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.13) !important;border-radius:14px;
  padding:13px 14px !important;margin-top:10px;}
#pane-personality .pl-group{font-size:13px;color:#dff2ff;border-bottom:none;
  margin:20px 0 2px;}
/* the bright portrait door keeps its own look (no dark override) */
#pane-personality .you-portrait-quick{background:rgba(255,255,255,0.94) !important;
  border:none !important;}

/* the portrait door on You — a BRIGHT call to action, like the primary pills
   (#pane-personality-scoped so it outranks every generic .sc glass rule) */
#pane-personality .you-portrait-quick{display:flex;align-items:center;gap:12px;width:100%;
  text-align:left;cursor:pointer;
  background:rgba(255,255,255,0.94) !important;border:none !important;
  box-shadow:0 10px 28px -12px rgba(0,0,0,.6) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;}
#pane-personality .you-portrait-quick .sk-label{color:#0f1320 !important;font-weight:700 !important;}
.ypq-tx{flex:1;display:flex;flex-direction:column;gap:3px;}
#pane-personality .ypq-sub{font-size:14px;color:#41506a !important;line-height:1.4;}
#pane-personality .you-portrait-quick .rd-begin{color:#0a6f98 !important;font-weight:700 !important;}
/* READABILITY bump for the You-tab small text (nothing under ~14px, brighter) */
.pl-role{font-size:14px !important;color:rgba(228,236,246,.78) !important;}
.pl-house{font-size:14px !important;}
.pl-sub,.mixp-sub{font-size:14.5px !important;color:rgba(228,236,246,.75) !important;}
.mixp-mean{font-size:14.5px !important;color:rgba(228,236,246,.78) !important;}
.b3-line{font-size:15px !important;}
.b3-role{font-size:12.5px !important;}
.pl-story{font-size:15px !important;line-height:1.65 !important;}
.sky-info{font-size:14.5px !important;}
/* THE PORTRAIT deck — cover, contents, bullets */
.pc-cover{padding:22px 20px;text-align:center;}
.pc-title{font-family:var(--serif,"Fraunces",serif);font-weight:500;font-size:clamp(24px,6.4vw,30px);
  line-height:1.18;color:#fff;}
.pc-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:13px;}
.pc-chip{font-size:13.5px;font-weight:600;color:#dff2ff;background:rgba(127,227,255,.10);
  border:1px solid rgba(127,227,255,.30);border-radius:999px;padding:6px 13px;
  font-family:"Apple Symbols","Segoe UI Symbol",Inter,sans-serif;}
.pc-meta{font-size:13.5px;color:var(--sk-mute);margin-top:12px;}
.pc-list{padding:8px 18px !important;}
.pc-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;
  background:none !important;border:none !important;box-shadow:none !important;
  padding:14px 0 !important;-webkit-tap-highlight-color:transparent;}
.pc-row + .pc-row{border-top:1px solid var(--sk-line2) !important;}
.pc-ic{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:18px;color:#bdeeff;background:rgba(127,227,255,.09);border:1px solid rgba(127,227,255,.26);
  font-family:"Apple Symbols","Segoe UI Symbol",serif;}
.pc-ic.pw{color:#7fe3ff;}
.pc-ic.kr{color:#9aa7e8;border-color:rgba(154,167,232,.4);background:rgba(154,167,232,.10);}
.pc-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.pc-tx b{font-family:var(--serif,"Fraunces",serif);font-weight:500;font-size:18.5px;color:#fff;line-height:1.25;}
.pc-tx i{font-style:normal;font-size:14px;color:rgba(228,236,246,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pc-n{flex:none;font-family:var(--serif,"Fraunces",serif);font-size:17px;color:rgba(255,255,255,.4);}
.pc-row{padding:16px 0 !important;}
.pc-row + .pc-row{border-top:1px solid rgba(255,255,255,.14) !important;}
/* the living-profile row — quiet, at the end of You */
.you-settings{opacity:.92;}
.ypq-sub2{font-size:13.5px;color:var(--sk-soft);line-height:1.4;font-weight:400;}
.ms-view{margin-top:12px;font-size:15px;line-height:1.65;color:var(--sk-ink);white-space:pre-wrap;}
.ms-view.placeholder{color:var(--sk-mute);font-style:italic;}
.ms-account{opacity:.9;}
/* morning push prefs (native app) */
.ms-push{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.09);}
.ms-push-row{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--sk-ink);cursor:pointer;}
.ms-push-row input{width:17px;height:17px;accent-color:#7fe3ff;}
.ms-push select{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  color:var(--sk-ink);border-radius:9px;padding:7px 10px;font:inherit;font-size:14px;}
/* account deletion — quiet until armed, unmistakable after */
.ms-danger{margin-top:16px;padding-top:13px;border-top:1px solid rgba(255,255,255,.09);}
.ms-del-btn{background:none;border:none;padding:4px 0;font:inherit;font-size:13.5px;
  font-weight:600;color:#c98a8a;cursor:pointer;}
.ms-del-btn.armed{color:#ff9d9d;font-weight:700;}
.ms-del-btn:disabled{opacity:.6;}
.ms-del-note{margin:8px 0 0;font-size:13px;line-height:1.55;color:#d9a0a0;}
/* AI consent on the birth form */
.consent-row{display:flex;gap:10px;align-items:flex-start;margin:4px 0 16px;cursor:pointer;}
.consent-row input{margin-top:3px;width:17px;height:17px;accent-color:#7fe3ff;flex:none;}
.consent-row span{font-size:13.5px;line-height:1.55;color:#aeb9c9;}
.consent-row a{color:#7fe3ff;}
/* share-today button in the mode hero */
.td-hero{position:relative;}
.td-share{position:absolute;top:13px;right:13px;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#bde6f5;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.td-share svg{width:19px;height:19px;}
.td-share:active{transform:scale(.94);}
/* offline pill — shown when the app boots without network */
.offline-pill{position:fixed;top:calc(10px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  z-index:300;background:rgba(20,26,38,.92);border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:8px 16px;font-size:13px;font-weight:600;color:#bde6f5;box-shadow:0 6px 24px rgba(0,0,0,.4);}
.ah-ctas{gap:11px;}
.pc-deeper .sk-label{margin-bottom:11px;}
.pc-deep{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.pc-area{font-size:15px;font-weight:600;color:#eaf3fc;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.16) !important;
  border-radius:13px;padding:13px 15px !important;box-shadow:none !important;}
.pc-offer{padding:24px 20px;text-align:center;}
.pc-sub{font-size:15px;line-height:1.6;color:var(--sk-soft);margin:10px 0 16px;}
.pc-offer .sk-pill{width:100%;}
/* superpower / kryptonite bullets as icon rows */
.pb-list{display:flex;flex-direction:column;gap:12px;margin-top:4px;}
.pb-b{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border-radius:13px;
  background:rgba(244,247,252,0.97);color:#1c2430;font-size:16px;line-height:1.55;}
.pb-b .pb-ic{flex:none;font-size:15px;line-height:1.6;color:#0a8fc0;
  font-family:"Apple Symbols","Segoe UI Symbol",serif;}
.pb-b.pw .pb-ic{color:#0a8fc0;}
.pb-b.kr{background:rgba(20,26,40,0.92);color:#eef3f8;border:1px solid rgba(154,167,232,.35);}
.pb-b.kr .pb-ic{color:#9aa7e8;}
/* bold + italic must READ on their card: dark on light, light on dark
   (#subview-scoped so it outranks the generic subview text colours) */
#subview .pb-b strong,#subview .pb-b b{color:#0a6f98 !important;}
#subview .pb-b.kr strong,#subview .pb-b.kr b{color:#bdeeff !important;}
#subview .pb-b em,#subview .pb-b i{color:#3f4b60 !important;font-style:italic;}
#subview .pb-b.kr em,#subview .pb-b.kr i{color:rgba(228,236,246,.85) !important;}

/* ============================================================================
   YOU · final — sky map hero, planets rail, season detail
   ============================================================================ */
.you-top{display:flex;justify-content:space-between;align-items:center;padding:14px 20px 4px;}
.you-map-card{padding:18px 17px 17px;}
.ym-k{font-size:16px;font-weight:700;color:#fff;letter-spacing:.04em;}
.ym-wrap{display:flex;justify-content:center;margin-top:6px;}
.ym-svg{width:min(258px,78vw);height:auto;touch-action:manipulation;}
.ym-svg text{font-family:"Apple Symbols","Segoe UI Symbol",serif;pointer-events:none;}
.ym-node:active circle:first-child{stroke:#7fe3ff;}
.ym-hint{text-align:center;font-size:13px;color:var(--sk-mute);margin-top:2px;}
.ym-ess{font-family:var(--serif,"Fraunces",serif);font-weight:400;font-size:18.5px;line-height:1.46;
  color:#fff;text-align:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--sk-line2);}
/* the personal ⇄ slow planets rail */
.yp-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:13px 16px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.yp-rail::-webkit-scrollbar{display:none;}
.yp-card{flex:0 0 88%;max-width:370px;scroll-snap-align:center;padding:16px 15px !important;}
.yp-head{display:flex;align-items:baseline;gap:10px;}
.yp-t{font-size:16px;font-weight:700;color:#fff;letter-spacing:.03em;}
.yp-hint{margin-left:auto;font-size:12px;font-weight:700;color:#bdeeff;letter-spacing:.04em;}
.yp-sub{font-size:13.5px;color:var(--sk-soft);margin-top:3px;}
.yp-row{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;margin-top:10px;
  padding:12px 13px;border-radius:14px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);}
/* season detail sheet */
.sd-state{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;
  color:#eaf3fc;margin-top:11px;}
.sd-orb{width:9px;height:9px;border-radius:50%;box-shadow:0 0 10px rgba(127,227,255,.7);}
.sd-frames{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:13px;}
.sd-frame{text-align:center;padding:11px 6px;border-radius:13px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);}
.sd-frame.on{background:rgba(127,227,255,.10);border-color:rgba(127,227,255,.4);}
.sd-fk{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--sk-mute);}
.sd-frame.on .sd-fk{color:#bdeeff;}
.sd-fv{font-family:var(--serif,"Fraunces",serif);font-weight:500;font-size:17px;color:#fff;margin-top:4px;}
.sd-p{font-size:15.5px;line-height:1.62;color:var(--sk-ink);margin-top:10px;}
.sd-p b{color:#bdeeff;}
.sd-passes{margin-top:14px;padding-top:12px;border-top:1px solid var(--sk-line2);}
.sd-pk2{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#bdeeff;}
.sd-pass{display:flex;align-items:baseline;gap:10px;margin-top:10px;}
.sd-pdot{flex:none;width:8px;height:8px;border-radius:50%;align-self:center;}
.sd-pd{font-size:15px;font-weight:600;color:#fff;}
.sd-pk{font-size:13px;color:var(--sk-soft);}

/* ============================================================================
   ONBOARDING — the learning-loop pitch + the first-run tour
   ============================================================================ */
.ob-learn{margin:14px 0 4px;padding:16px 16px 14px;border-radius:16px;
  background:rgba(127,227,255,.07);border:1px solid rgba(127,227,255,.28);}
.ob-learn-t{font-family:var(--serif,"Fraunces",serif);font-weight:500;font-size:19px;color:#fff;}
.ob-li{display:flex;gap:10px;align-items:flex-start;margin-top:11px;
  font-size:14.5px;line-height:1.5;color:var(--sk-ink);}
.ob-li b{color:#fff;}
.ob-ic{flex:none;color:var(--sk-coral-deep);font-size:13px;line-height:1.6;
  text-shadow:0 0 8px rgba(127,227,255,.6);}
.ob-learn-s{margin-top:13px;font-family:var(--serif,"Fraunces",serif);font-size:15.5px;
  color:#bdeeff;font-style:italic;}
/* the tour overlays */
.tour-ov{position:fixed;inset:0;z-index:400;background:rgba(6,8,13,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:22px;}
.tour-card{max-width:340px;width:100%;text-align:center;padding:26px 22px 18px;border-radius:22px;
  background:rgba(14,18,28,.92);border:1px solid rgba(127,227,255,.3);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.9);}
.tour-card-low{margin-top:auto;margin-bottom:118px;}
.tour-ov:has(.tour-card-low){align-items:flex-end;}
.tour-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#bdeeff;}
.tour-title{font-family:var(--serif,"Fraunces",serif);font-weight:500;font-size:25px;
  line-height:1.18;color:#fff;margin-top:9px;}
.tour-p{font-size:15px;line-height:1.6;color:var(--sk-soft);margin:11px 0 17px;}
.tour-pulse{width:100%;animation:tourpulse 1.8s ease-in-out infinite;}
@keyframes tourpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.35);}50%{box-shadow:0 0 0 12px rgba(255,255,255,0);}}
@media (prefers-reduced-motion: reduce){.tour-pulse{animation:none;}}
.tour-skip{display:block;margin:13px auto 0;background:none;border:none;cursor:pointer;
  color:var(--sk-mute);font-size:13.5px;font-weight:600;}
.tour-ring{position:fixed;width:76px;height:76px;border-radius:50%;
  border:2.5px solid #7fe3ff;box-shadow:0 0 24px rgba(127,227,255,.75), inset 0 0 18px rgba(127,227,255,.3);
  animation:tourpulse 1.8s ease-in-out infinite;pointer-events:none;}

/* the short day sheet */
.dayx-card{padding:20px;}
.dayx-word{font-family:var(--serif,"Fraunces",serif);font-weight:600;font-size:44px;
  line-height:1.05;letter-spacing:-.01em;color:#fff;margin:12px 0 0;}
.dayx-feel{font-size:14px;color:var(--sk-soft);margin-top:5px;}
.dayx-rows{margin-top:15px;}
.dayx-sum{font-family:var(--serif,"Fraunces",serif);font-weight:400;font-size:18px;
  line-height:1.45;color:#e9eff7;margin:14px 0 0;}
/* the seasons rail — swipable full cards */
.ah-seasons-top{padding-top:20px;}
.ah-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:12px 16px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.ah-rail::-webkit-scrollbar{display:none;}
.ssn-card{flex:0 0 86%;max-width:360px;scroll-snap-align:center;}
.ssn-lessonk{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:#bdeeff;margin-top:13px;}
.ssn-lesson{font-family:var(--serif,"Fraunces",serif);font-weight:400;font-size:17.5px;
  line-height:1.42;color:#fff;margin-top:5px;}
.ssn-flash{outline:2px solid rgba(127,227,255,.65);outline-offset:2px;transition:outline .3s ease;}
.ah-ctas{margin-top:8px;}
/* Home transit cards are doors now */
.home-tr{cursor:pointer;}
.tr-more{font-size:13px;font-weight:600;color:#bdeeff;margin-top:10px;}

body{background:#0a0c12 !important;color:var(--sk-ink);}
main.wrap,#screen-dashboard,.screen,.tabpane,.sk-col{background:transparent !important;}
.masthead h1,.masthead .tagline{color:#fff !important;text-shadow:0 1px 18px rgba(0,0,0,.55);}
/* in the native shell there's no browser chrome — keep the masthead clear of
   the status bar / Dynamic Island (env() is 0 wherever it doesn't apply) */
.masthead{padding-top:calc(env(safe-area-inset-top, 0px) + 6px);}

/* ---- HEROES: transparent so the photo shows; white text over it ---------- */
.sk-hero,.today-hero,.you-sky,#path-hero,#fc-hero,.subv-hero,.ask-sky{
  background:transparent !important;background-image:none !important;box-shadow:none !important;}
.sk-sun,#today-hero .sk-sun,.dash-sprig{display:none !important;}
.sk-eyebrow,.sk-title,.sk-teaser,.today-sub,.you-sig,#you-sig,#today-hero .sk-eyebrow,
#path-eyebrow,#fc-hero-title,.sk-statusbar{color:#fff !important;text-shadow:0 1px 16px rgba(0,0,0,.5);}
.you-sky .sk-mini,#you-sig{color:rgba(255,255,255,.85) !important;}

/* ---- GLASS SURFACES ------------------------------------------------------ */
.sc,.tile,.card.screen,.rings-card,.read-card,.me-card,.sk-listcard,.dial-card,
.ask-panel,.ask-intro,.ask-group,.reading,.synth-card,.beta-feedback,
#subview .sc,#checkin-view .sc,.cards .rcard,
.rcard-gist,.rcard-task,.rcard-opportunity,.rcard-kryptonite,.rcard-lesson{
  background:var(--glass) !important;
  -webkit-backdrop-filter:var(--gblur);backdrop-filter:var(--gblur);
  border:var(--gborder) !important;
  box-shadow:var(--gshadow) !important;
  color:var(--sk-ink);
}
/* read/plain-words cards a touch darker for crisp body text */
.read-card,.reading,.synth-card,#subview .read-sheet,.ask-intro,.ask-group{
  background:var(--glass-dark) !important;}
.rcard-task,.rcard-kryptonite{border-color:rgba(127,227,255,.28) !important;}
.rcard-opportunity,.rcard-lesson{border-color:rgba(159,182,214,.30) !important;}

/* ---- TEXT → light -------------------------------------------------------- */
.sk-label,.sk-mini,.dial-k,.tile-k,.cl-ring-k,.heat-leg,.s-k,.ask-label,
.rcard h3,.reading h3,.read-nav,.force-name .fn-when,.portrait-hint .topic,
.lr-mid,.sk-seg button,.fc-retro,.retro-txt,#pane-today .sk-label,#pane-today .cl-ring-k{
  color:rgba(228,236,246,0.58) !important;}
.muted,.small,p.muted,.sc .muted,.read-sheet .muted{color:rgba(228,236,246,0.56) !important;}
.cl-read,.reading p,.rcard p,.read-sheet p,.portrait-teaser,.yr-para,.yr-arc-line,.wl-p,
.checkin-mini,.sk-lrow .lr-mid,.glance-b,.mix-grid,.vc-line,.dial-v,.tile-v,
#today-body p,#fc-month-body p,#synth-body p,#personality-body p,.reading li,.rcard li{
  color:var(--sk-ink) !important;}
.sk-title,.read-title,.rstack-head h1,.reading h1,.lr-date,.s-num,.you-arch,#you-arch,
.cl-ringval{color:var(--sk-ink);}
.cl-ringval{fill:var(--sk-ink);}
.cl-ringval.coral{fill:var(--sk-coral-deep);}
.cl-read .hl,.hl{color:var(--sk-coral-deep) !important;}
.cl-read .hl-b,.hl-b{color:var(--sk-blue-ink) !important;}
.sk-coral{color:var(--sk-coral-deep) !important;} .sk-blue{color:var(--sk-blue-ink) !important;}
.sk-seg button.on,.sk-seg .topic.active,.portrait-hint .topic.active{color:#fff !important;}

/* ---- PRIMARY BUTTONS → frosted white pill (pops on dark glass) ----------- */
.sk-pill,#go-auth,#go-chart,#go-dash,#preview-signup,#ci-save,.dd-cta,
.ask-thread .bubble.q,.ask-composer .composer-send,.ci-scale2 button.active,
.ci-tags2 button.active,.hero-btn{
  background:rgba(255,255,255,0.93) !important;color:#0f1320 !important;border:none !important;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.6) !important;}
.ask-fab{background:rgba(255,255,255,0.95) !important;color:#0f1320 !important;}
.ask-fab .fab-ic{stroke:#0f1320 !important;}
.composer-send{color:#0f1320 !important;}
.yr-fill{background:var(--sk-coral-deep) !important;}

/* secondary / ghost buttons + chips → glass outline */
.ghost,.ghost2,.chip,.ask-chip,.ask-group .ask-q,.ci-scale2 button,.ci-tags2 button,.ask-chips .qchip,.ask-chips button,
.card.screen input,.card.screen select,.card.screen textarea,
#memory-input,#feedback-text,.ask-composer,.composer-input,#ask-input,.ask-thread .bubble.a{
  background:rgba(255,255,255,0.06) !important;color:var(--sk-ink) !important;
  border:1px solid rgba(255,255,255,0.18) !important;}
.chip.active{background:rgba(255,255,255,0.9) !important;color:#0f1320 !important;}
::placeholder{color:rgba(228,236,246,0.4) !important;}

/* ---- NAV → glass bar ----------------------------------------------------- */
.bottomnav,.bottomnav-icons{
  background:rgba(12,15,23,0.62) !important;
  -webkit-backdrop-filter:blur(20px) saturate(125%);backdrop-filter:blur(20px) saturate(125%);
  border-top:1px solid rgba(255,255,255,0.12) !important;box-shadow:0 -10px 30px rgba(0,0,0,.4) !important;}
.bottomnav .tab,.bottomnav-icons .tab{color:rgba(228,236,246,0.55) !important;}
.bottomnav .tab.active,.bottomnav-icons .tab.active{color:#fff !important;}
.bottomnav-icons .tab.active .nav-ic{stroke:var(--sk-coral-deep) !important;}
/* active tab reads cyan (icon + label), matching the shared menu mockup */
.bottomnav-icons .tab.active span{color:var(--sk-coral-deep) !important;}
/* ---- center Ask → raised cyan orb (adapts the mockup, keeps our accent) --- */
.bottomnav-icons.has-center{align-items:center !important;}
.nav-ask{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;margin:-22px 10px 0;border-radius:50%;border:none;cursor:pointer;padding:0;
  background:radial-gradient(120% 120% at 50% 20%, #baf0ff 0%, #7fe3ff 56%, #55cdf1 100%) !important;
  box-shadow:0 10px 26px -8px rgba(92,211,245,.75), 0 3px 12px rgba(0,0,0,.42);
  -webkit-tap-highlight-color:transparent;transition:transform .14s ease;}
.nav-ask:active{transform:scale(.92);}
.nav-ask .nav-ask-ic{width:25px;height:25px;fill:none;stroke:#08202b;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;}

/* ---- tracks / bars / heat / sigil --------------------------------------- */
.force-track2,.yr-bar,.force-track{background:rgba(255,255,255,0.13) !important;}
.heat-cell.future{border:1px dashed rgba(255,255,255,0.2) !important;}
.heat-cell.today{outline:1.5px solid #fff !important;}
.you-sky .sig-path{stroke:rgba(255,255,255,0.95);} .you-sky .sig-node{fill:#fff;}

/* ---- SUB-VIEWS + ASK SHEET → glass over the photo ------------------------ */
.subv{background:rgba(10,12,18,0.5) !important;
  -webkit-backdrop-filter:blur(26px) saturate(120%);backdrop-filter:blur(26px) saturate(120%);}
/* a reading screen shows the SAME photo backdrop as the tabs (NOT a darker overlay):
   make #subview transparent and hide the tab panes behind it so #glass-bg shows through */
#subview{background:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;}
body.sub-open .tabpane{visibility:hidden !important;}
.ask-panel{background:rgba(12,15,23,0.7) !important;border-top:1px solid rgba(255,255,255,0.14) !important;
  -webkit-backdrop-filter:blur(28px) saturate(120%);backdrop-filter:blur(28px) saturate(120%);}
.ask-backdrop{background:rgba(6,8,13,0.55) !important;}
.subv-x,.subv-listen{background:rgba(255,255,255,0.18) !important;color:#fff !important;}
.read-sheet p.action,.cards .rcard p.action{border-left-color:var(--sk-coral-deep) !important;}

/* ---- declutter cream-era texture ---------------------------------------- */
body.on-dash::after{display:none !important;}
.skel-line{background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.13),rgba(255,255,255,.06)) !important;background-size:200% 100% !important;}

/* ============================================================================
   READABILITY (long-form readings) + LOADING STATES
   ============================================================================ */
/* readings use the SAME glass tone as the tab cards (never darker, never white);
   heavy blur turns the photo behind into a smooth wash so long text stays legible */
#subview .sc,#subview .read-card,.read-sheet,.cards .rcard,#subview .reading,
#subview article.reading,#personality-body,#synth-body,
.rcard-gist,.rcard-task,.rcard-opportunity,.rcard-kryptonite,.rcard-lesson{
  background:var(--glass-dark) !important;
  -webkit-backdrop-filter:blur(36px) saturate(130%) !important;backdrop-filter:blur(36px) saturate(130%) !important;
  border:1px solid rgba(255,255,255,0.16) !important;}
/* bigger, airier, crisp-white body copy + a soft shadow for legibility on glass */
.read-sheet p,.reading p,.rcard p,#personality-body p,#today-body p,#synth-body p,
#subview .reading li,#subview .rcard li,.read-sheet .glance-b,.wl-p,.yr-arc-line,.yr-para{
  color:#f4f7fb !important;font-size:18px !important;line-height:1.84 !important;
  text-shadow:0 1px 12px rgba(0,0,0,0.5) !important;}
.read-sheet .read-title,.reading h1,.rstack-head h1,#subview .sk-title{color:#fff !important;text-shadow:0 1px 14px rgba(0,0,0,0.5);}

/* spinner → visible on dark glass */
.spinner{border:2px solid rgba(255,255,255,0.22) !important;border-top-color:#7fe3ff !important;}

/* "generating your reading" card */
.gen-load{display:flex;flex-direction:column;align-items:center;text-align:center;gap:13px;
  padding:44px 24px !important;}
.gen-spin{width:38px;height:38px;border-radius:50%;
  border:3px solid rgba(255,255,255,0.18);border-top-color:#7fe3ff;
  animation:spin 0.9s linear infinite;}
.gen-title{font-family:var(--serif);font-size:1.32rem;color:#fff;line-height:1.2;}
.gen-sub{font-size:14.5px;color:rgba(228,236,246,0.64);max-width:32ch;line-height:1.55;}
.gen-dots::after{content:"";animation:gendots 1.4s steps(1,end) infinite;}
@keyframes gendots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}100%{content:""}}

/* (reverted the light "reading mode" sheet — readings stay dark glass, matching
    the tabs, per owner: not white, not darker than the rest.) */

/* ============================================================================
   READABILITY OVERHAUL (v6) — bigger type, stronger contrast, kill the leftover
   warm/tan colors. Rule: no label below 14px, no faint/low-contrast text.
   ============================================================================ */
/* COLOR — labels & kickers readable (not faint, never tan) */
.sk-label,.sk-mini,.sk-eyebrow,.dial-k,.tile-k,.cl-ring-k,.ring-k,.heat-leg,.s-k,.ask-label,
.read-nav,.rcard h3,.reading h3,.force-name .fn-when,.lr-tag,.portrait-hint .topic,
.sk-seg,.sk-seg button,.sk-seg .topic,.ask-group-label,
#pane-today .sk-label,#pane-today .cl-ring-k,#pane-today .tile-k{
  color:rgba(234,241,249,0.82) !important;}
.cl-ring-sub,.tile-sub,.ring-sub,#pane-today .cl-ring-sub,#pane-today .tile-sub,
.portrait-teaser,.yr-arc-line,.retro-txt,.fc-retro,.rsig,.reading .rsig{
  color:rgba(228,236,246,0.76) !important;}
.muted,.small,p.muted,.sc .muted,.read-sheet .muted{color:rgba(228,236,246,0.74) !important;}
.sk-seg .sep,.portrait-hint .sep{color:rgba(255,255,255,0.30) !important;}
.sk-seg button.on,.sk-seg .topic.active,.portrait-hint .topic.active{color:#fff !important;}
/* the chart-signature subtitle ("Sun in Pisces…") is an <em> getting the old tan --ink-soft */
.reading em,.read-sheet em,#personality-body em,.reading h1 + p em,.rsig,.reading .rsig{
  color:rgba(228,236,246,0.76) !important;font-style:italic;}
/* SIZE — bump every tiny label to >=14px (no 10–13px micro text) */
.sk-label,.sk-mini,.dial-k,.tile-k,.cl-ring-k,.ring-k,.heat-leg,.s-k,.ask-label,
.read-nav,.rcard h3,.reading h3,.force-name .fn-when,.lr-tag,.portrait-hint .topic,
.sk-seg,.sk-seg button,.cl-ring-sub,.tile-sub,.ring-sub{font-size:14px !important;}
.bottomnav-icons .tab span{font-size:11.5px !important;letter-spacing:.05em !important;}
.tile-v,.dial-v{font-size:18px !important;}
.muted,.small,.sc .muted,.sc .small{font-size:14.5px !important;}

/* reading sub-views match the TODAY cards exactly — same glass tone (not darker,
   not a light pop-up); legibility comes from heavy blur + white text */
#subview .sc,#subview .read-card,.read-sheet,.cards .rcard,#subview .reading,
#subview article.reading,#personality-body,
.rcard-gist,.rcard-task,.rcard-opportunity,.rcard-kryptonite,.rcard-lesson{
  background:var(--glass) !important;}
/* a clear, tappable close ✕ on every sub-view */
.subv-x,.ask-x{width:38px !important;height:38px !important;font-size:19px !important;
  background:rgba(255,255,255,0.20) !important;color:#fff !important;border-radius:50% !important;}
.subv-tools{display:flex;align-items:center;gap:9px;}

/* ============================================================================
   READABILITY + EMPHASIS round
   ============================================================================ */
/* big-text readings: larger, much airier, brighter — the real fix for long text */
.read-sheet p,.reading p,#personality-body p,#today-body p,
#subview .reading li,#subview .rcard li{
  font-size:19px !important;line-height:1.95 !important;color:#fff !important;
  text-shadow:0 1px 16px rgba(0,0,0,0.55) !important;margin-top:1.05em !important;letter-spacing:.004em;}
.read-sheet p:first-of-type,#personality-body p:first-of-type{margin-top:.55em !important;}
.read-sheet .read-title,#personality-body h1,#subview .reading h1{margin-bottom:.12em !important;}
#subview .sc{padding:22px 20px !important;}

/* ring sublabels ("how loud the day is") — soft mint, slightly bolder so they don't blend */
.cl-ring-sub,#pane-today .cl-ring-sub{color:#9fe4e8 !important;font-weight:500 !important;font-size:14px !important;}

/* AHEAD windows — push / rest / brace read as clear, important tags */
.sk-lrow{padding:13px 0 !important;}
.sk-lrow .lr-tag{font-size:12.5px !important;font-weight:700 !important;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 12px !important;border-radius:999px !important;}
.sk-lrow .lr-tag.sk-coral{background:rgba(127,227,255,0.18) !important;color:#bdeeff !important;}
.sk-lrow .lr-tag.sk-blue{background:rgba(159,182,214,0.18) !important;color:#cfe0f2 !important;}
.sk-lrow .lr-mid{font-size:15.5px !important;color:rgba(234,241,249,0.9) !important;}
.sk-lrow .lr-date{font-size:17px !important;}

/* Today: "friction ahead" bigger/clearer; check-in quieter (friction is the priority) */
.ahead-teaser .at-line{font-size:16px !important;font-weight:600 !important;color:#fff !important;}
.checkin-mini{opacity:.82;}
.checkin-mini span{font-size:14.5px !important;}

/* Rx row: a clear tappable affordance */
.fc-retro-card .retro-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.retro-more{margin-left:auto;color:#7fe3ff !important;font-size:13.5px !important;font-weight:600;white-space:nowrap;}

/* AHEAD — clear tappable 14-day date strip */
.fc-strip{display:flex;gap:8px;overflow-x:auto;padding:16px 2px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.fc-strip::-webkit-scrollbar{display:none;}
.fc-day{flex:0 0 auto;min-width:50px;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:10px 8px 9px;border-radius:15px;border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.05);color:#fff;cursor:pointer;font:inherit;}
.fc-day .fcd-wd{font-size:11.5px;color:rgba(234,241,249,0.62);letter-spacing:.05em;text-transform:uppercase;}
.fc-day .fcd-dn{font-size:17px;font-weight:600;line-height:1;}
.fc-day .fcd-dot{width:7px;height:7px;border-radius:50%;}
.fc-day.on{background:rgba(127,227,255,0.16);border-color:rgba(127,227,255,0.5);}
.fc-hint{font-size:14px !important;color:rgba(228,236,246,0.66) !important;margin-top:8px;}

/* clean line-icon rating (replaces 👍👎) */
.rate button{color:rgba(255,255,255,0.66) !important;background:none !important;border:none !important;padding:4px 6px !important;}
.rate button.active{color:var(--sk-coral-deep) !important;}
.rate .rt-ic{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block;}
.rate .rt-ic.flip{transform:rotate(180deg);}
.rate-label,.rate-msg{color:rgba(228,236,246,0.6) !important;}

/* ============================================================================
   READING — DRAMATIC legibility pass (loads last → wins). A solid-enough reading
   card on the photo (not pure black, not white) + large, very airy book text.
   Applies to today's reading sections AND the You portrait (same treatment).
   ============================================================================ */
#subview .sc.read-sheet,#subview .read-sheet,#subview .reading,
#subview article.reading,#subview .sc:has(#personality-body),#subview .sc{
  background:var(--glass-dark) !important;   /* = the loved "in plain words" tone, NOT darker */
  -webkit-backdrop-filter:blur(30px) saturate(120%) !important;backdrop-filter:blur(30px) saturate(120%) !important;
  border:1px solid rgba(255,255,255,0.14) !important;
  padding:26px 22px !important;border-radius:26px !important;}
.read-sheet p,.reading p,#personality-body p,#today-body p,
#subview .reading li,#personality-body li,.read-sheet li{
  font-size:19.5px !important;line-height:1.9 !important;color:#eef3f8 !important;font-weight:400 !important;
  margin:0 0 1.25em !important;letter-spacing:.004em !important;text-shadow:0 1px 10px rgba(0,0,0,0.4) !important;}
.read-sheet p:last-child,.reading p:last-child,#personality-body p:last-child{margin-bottom:0 !important;}
.read-sheet .read-title,#personality-body h1,#subview .reading h1{
  font-size:2.1rem !important;margin-bottom:.35em !important;line-height:1.12 !important;color:#fff !important;}
.reading h2,#personality-body h2{font-family:var(--sans) !important;font-size:13px !important;
  letter-spacing:.16em !important;text-transform:uppercase !important;color:#9fe4e8 !important;
  font-weight:700 !important;margin:1.7em 0 .55em !important;border:none !important;padding:0 !important;}
.reading em,#personality-body em,.reading h1 + p em{font-size:16.5px !important;}
.read-sheet .read-nav{margin-top:1.5em !important;}
/* portrait: the body sits directly on the (solid) wrapper — one panel, no card-in-card */
#subview .sc:has(#personality-body) #personality-body{
  background:transparent !important;border:none !important;box-shadow:none !important;padding:0 !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;margin-top:.5em !important;}
/* the cyan "action" line keeps its accent but with the airy spacing */
.read-sheet p.action,.cards .rcard p.action{padding-left:16px !important;margin-top:.4em !important;}

/* ============================================================================
   KILL THE ORANGE BOLD — .reading strong was var(--accent-deep) = coral.
   Bold emphasis is now clean white (not orange, not heavy-black). App-wide.
   ============================================================================ */
:root{--accent:#5fd0f5;--accent-deep:#34b5dd;--coral:#5fd0f5;--coral-deep:#34b5dd;}
.reading strong,.read-sheet strong,#personality-body strong,.rcard strong,#subview strong,#subview b,.reading b{
  color:#ffffff !important;font-weight:600 !important;}
.reading em,.read-sheet em,#personality-body em,.reading h1 + p em{color:rgba(228,236,246,0.78) !important;font-style:italic !important;}
.read-sheet p.action,.cards .rcard p.action{border-left-color:#7fe3ff !important;}
.read-sheet .hl,.reading .hl,#personality-body .hl{color:#7fe3ff !important;}
.read-sheet .hl-b,.reading .hl-b,#personality-body .hl-b{color:#a9c6e6 !important;}

/* ============================================================================
   READING — AIRY CHUNKS (glass-14). Owner: "still very dark; make it more
   transparent; create chunks/blocks that stand out." So: drop the dark slab,
   render EACH paragraph as its own lighter frosted block, photo showing between.
   ============================================================================ */
#subview .sc.read-sheet,#subview .sc:has(#personality-body),#subview .reading,
#subview article.reading,#personality-body{
  background:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  border:none !important;box-shadow:none !important;padding:0 !important;}
/* each paragraph = a standout frosted chunk (lighter/more transparent than the old slab) */
.read-sheet p,.reading p,#personality-body p,#today-body p{
  background:rgba(20,24,34,0.34) !important;
  -webkit-backdrop-filter:blur(26px) saturate(125%) !important;backdrop-filter:blur(26px) saturate(125%) !important;
  border:1px solid rgba(255,255,255,0.14) !important;border-radius:18px !important;
  padding:18px 20px !important;margin:0 0 13px !important;
  font-size:19px !important;line-height:1.72 !important;color:#fff !important;font-weight:400 !important;
  text-shadow:none !important;letter-spacing:.004em !important;
  box-shadow:0 10px 26px -14px rgba(0,0,0,0.5) !important;}
.read-sheet p:first-of-type,#personality-body p:first-of-type{font-size:20px !important;}
/* the directive/action chunk pops in cyan */
.read-sheet p.action,.cards .rcard p.action{
  background:rgba(127,227,255,0.13) !important;border:1px solid rgba(127,227,255,0.30) !important;
  border-left:3px solid #7fe3ff !important;padding-left:18px !important;}
/* title + chart-signature subtitle sit free on the photo (not chunks) */
.read-sheet .read-title,#personality-body h1,#subview .reading h1{
  color:#fff !important;text-shadow:0 1px 16px rgba(0,0,0,0.6) !important;margin-bottom:.45em !important;}
.reading h1 + p,#personality-body h1 + p{
  background:transparent !important;border:none !important;box-shadow:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;padding:0 2px 6px !important;}
.reading h1 + p em,#personality-body h1 + p em,.reading em{
  color:rgba(234,241,249,0.85) !important;text-shadow:0 1px 12px rgba(0,0,0,.5) !important;}
.reading h2,#personality-body h2{text-shadow:0 1px 12px rgba(0,0,0,.5) !important;margin:1.5em 0 .5em !important;}
.read-sheet .read-nav{margin-top:6px !important;}
/* the audio "Listen" player button was a warm brown gradient — THE orange on the
   portrait/deep-dives. Recolour it cool to match the app. */
.listen-btn,.listen-primary,#listen-btn,.listen-row button,.listen-wrap button{
  background:rgba(127,227,255,0.16) !important;background-image:none !important;
  border:1px solid rgba(127,227,255,0.42) !important;color:#bdeeff !important;}

/* remove the static "For reflection, not prediction…" footer entirely */
.foot{display:none !important;}

/* ============================================================================
   READING — LIGHT chunks + DARK font (glass-17). Owner: blocks too transparent →
   make them brighter; white font doesn't help → darker font (not mint, not pure
   black). Keeps the frosted, chunked design — just light blocks with ink text.
   ============================================================================ */
.read-sheet p,.reading p,#personality-body p,#today-body p{
  background:rgba(231,236,245,0.66) !important;
  -webkit-backdrop-filter:blur(22px) saturate(115%) !important;backdrop-filter:blur(22px) saturate(115%) !important;
  border:1px solid rgba(255,255,255,0.55) !important;border-radius:18px !important;
  color:#232b38 !important;font-weight:400 !important;text-shadow:none !important;
  box-shadow:0 12px 28px -16px rgba(0,0,0,0.45) !important;}
/* dark emphasis inside the light blocks (NOT orange, NOT mint, NOT pure black) */
.reading strong,.read-sheet strong,#personality-body strong,#subview strong,#subview b,.reading b{
  color:#0f1620 !important;font-weight:600 !important;}
.read-sheet p em,#personality-body p em{color:#4a5a72 !important;font-style:italic !important;}
.read-sheet .hl,.reading .hl,#personality-body .hl{color:#0a6f98 !important;}
.read-sheet .hl-b,.reading .hl-b,#personality-body .hl-b{color:#3a5e86 !important;}
/* the action/directive block: light cyan, deep accent, dark text */
.read-sheet p.action,.cards .rcard p.action{
  background:rgba(120,205,235,0.24) !important;border:1px solid rgba(10,143,192,0.30) !important;
  border-left:3px solid #0a8fc0 !important;color:#16222e !important;}
/* the chart-signature subtitle stays free on the photo (light) */
.reading h1 + p,#personality-body h1 + p{
  background:transparent !important;border:none !important;box-shadow:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;}
.reading h1 + p em,#personality-body h1 + p em{color:rgba(234,241,249,0.85) !important;}
/* deep-dive section headers float between the light blocks → readable on the photo */
.reading h2,#personality-body h2{color:#cdeffb !important;text-shadow:0 1px 12px rgba(0,0,0,0.65) !important;}

/* ============================================================================
   FIX dark-on-dark (glass-18). Two contexts, never mixed:
   • DATA/viz cards (shape caption, forces, glance, stats) = dark glass → LIGHT text.
   • PROSE reading blocks = BRIGHT light block → DARK ink.
   ============================================================================ */
/* DEFAULT in sub-views = light text (so bold on the dark data cards is visible) */
#subview p,#subview li,#subview .force-name,#subview .glance-b,#subview .cap,
#subview .day-ask-q,#subview .yr-arc-line,#subview .yr-para{color:#eef3f8 !important;}
#subview strong,#subview b{color:#ffffff !important;font-weight:600 !important;}
#subview .hl{color:#7fe3ff !important;} #subview .hl-b{color:#a9c6e6 !important;}
#subview .force-name .fn-when{color:rgba(234,241,249,0.6) !important;}
/* PROSE reading paragraphs → BRIGHT light block + DARK ink (override the default) */
#subview .read-sheet p,#subview .reading p,#subview #personality-body p{
  background:rgba(237,241,248,0.92) !important;
  -webkit-backdrop-filter:blur(18px) saturate(110%) !important;backdrop-filter:blur(18px) saturate(110%) !important;
  border:1px solid rgba(255,255,255,0.6) !important;border-radius:18px !important;
  color:#222a37 !important;font-weight:400 !important;text-shadow:none !important;
  box-shadow:0 12px 28px -16px rgba(0,0,0,0.45) !important;padding:18px 20px !important;margin:0 0 13px !important;}
#subview .read-sheet p strong,#subview .reading p strong,#subview #personality-body p strong,
#subview .read-sheet p b,#subview .reading p b,#subview #personality-body p b{color:#0f1620 !important;}
#subview .read-sheet p em,#subview .reading p em,#subview #personality-body p em{color:#4a5a72 !important;}
#subview .read-sheet p .hl,#subview .reading p .hl,#subview #personality-body p .hl{color:#0a6f98 !important;}
#subview .read-sheet p .hl-b,#subview .reading p .hl-b,#subview #personality-body p .hl-b{color:#3a5e86 !important;}
/* ONLY the actual italic chart-signature line (.rsig) floats free on the photo.
   (Was `h1 + p`, which wrongly blanked a portrait's first PROSE paragraph when the
   reading had no signature line — made old portraits transparent/unreadable.) */
#subview .reading .rsig,#subview #personality-body .rsig{
  background:transparent !important;border:none !important;box-shadow:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;color:rgba(234,241,249,.85) !important;}
#subview .reading .rsig em,#subview #personality-body .rsig em{color:rgba(234,241,249,.85) !important;}
/* the action/directive prose block: light cyan, dark text */
#subview .read-sheet p.action{background:rgba(120,205,235,0.26) !important;border:1px solid rgba(10,143,192,0.32) !important;border-left:3px solid #0a8fc0 !important;color:#16222e !important;}

/* glass-19: bullet LISTS were white-on-dark (Superpowers/Kryptonite) — give them the
   same bright block + dark ink as paragraphs, and make all blocks near-solid bright. */
#subview .read-sheet p,#subview .reading p,#subview #personality-body p,
#subview .reading li,#subview #personality-body li,#subview .read-sheet li{
  background:rgba(238,242,248,0.96) !important;color:#202732 !important;
  border:1px solid rgba(255,255,255,0.7) !important;border-radius:16px !important;
  padding:16px 18px !important;margin:0 0 11px !important;text-shadow:none !important;list-style:none !important;}
#subview .reading ul,#subview #personality-body ul,#subview .reading ol,#subview #personality-body ol{
  padding:0 !important;margin:0 !important;list-style:none !important;}
#subview .reading li strong,#subview #personality-body li strong,#subview .read-sheet li strong{color:#0d1118 !important;font-weight:600 !important;}
#subview .reading li em,#subview #personality-body li em{color:#4a5a72 !important;}
#subview .reading li .hl,#subview #personality-body li .hl{color:#0a6f98 !important;}

/* ============================================================================
   glass-22: reading blocks NEAR-SOLID (not see-through); ASK sheet bright/white +
   dark text (all-text surface); "Your year" → a clear call-to-action.
   ============================================================================ */
#subview .read-sheet p,#subview .reading p,#subview #personality-body p,
#subview .reading li,#subview #personality-body li,#subview .read-sheet li{
  background:rgba(244,247,252,0.975) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  color:#1e2632 !important;}

/* ASK = bright, almost-white, dark text */
.ask-panel{background:rgba(247,249,252,0.98) !important;-webkit-backdrop-filter:blur(8px) !important;backdrop-filter:blur(8px) !important;border-top:1px solid rgba(0,0,0,0.06) !important;}
.ask-sky{background:transparent !important;}
.ask-sky .sk-eyebrow{color:#5b6675 !important;}
.ask-sky .ask-x,.ask-panel .subv-x{background:rgba(0,0,0,0.08) !important;color:#1e2632 !important;}
.ask-intro,.ask-group{background:#ffffff !important;border:1px solid rgba(0,0,0,0.08) !important;color:#1e2632 !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;}
.ask-intro,.ask-group .ask-q,.ask-group-label{color:#2a3340 !important;}
.ask-chips .qchip,.ask-chips button,.ask-chip,.ask-group .ask-q{background:rgba(10,143,192,0.08) !important;border:1px solid rgba(10,143,192,0.25) !important;color:#0a5f86 !important;}
.ask-thread .bubble.a{background:#ffffff !important;color:#1e2632 !important;border:1px solid rgba(0,0,0,0.08) !important;}
.ask-thread .bubble.a strong{color:#0a5f86 !important;}
.ask-thread .bubble.q{background:#22344f !important;color:#eef3fb !important;}   /* dark blue, matches the app (was bright #2a9fd0) */

/* "Regenerate this" — refresh a portrait/deep-dive that was saved by an older engine */
#subview .regen-btn{display:inline-flex;align-items:center;gap:6px;margin:16px 0 4px;
  padding:10px 16px;border-radius:999px;font-size:13.5px;font-weight:600;cursor:pointer;
  background:rgba(127,227,255,0.14);color:#bdeeff;border:1px solid rgba(127,227,255,0.4);}
.ask-composer{background:#ffffff !important;border:1px solid rgba(0,0,0,0.14) !important;}
.ask-composer .composer-input{color:#1e2632 !important;}
/* the global glass rule sets #ask-input to the dark-theme light ink (#id beats the
   class rule above) → invisible white text on the bright composer. Override by #id. */
#ask-input{color:#1e2632 !important;}
#ask-input::placeholder{color:#8a93a0 !important;}
.ask-composer .composer-input::placeholder{color:#8a93a0 !important;}
.ask-composer .composer-send{background:#2a4a6e !important;color:#ffffff !important;}   /* dark blue to match */

/* glass-32: ASK readability — owner: "letters are tiny", make the font heavier + bigger */
.ask-sky .sk-eyebrow{font-size:12.5px !important;font-weight:800 !important;letter-spacing:.09em !important;}
.ask-intro{font-size:16px !important;line-height:1.5 !important;font-weight:600 !important;color:#222b38 !important;padding:15px 17px !important;border-radius:14px !important;}
.ask-group-label{font-size:12px !important;font-weight:800 !important;letter-spacing:.07em !important;color:#5b6675 !important;}
.ask-chips .ask-chip,.ask-group .ask-q{font-size:15.5px !important;font-weight:600 !important;line-height:1.4 !important;color:#0a5f86 !important;padding:13px 15px !important;border-radius:13px !important;}
.ask-thread .bubble.a,.ask-thread .bubble.q{font-size:15.5px !important;line-height:1.55 !important;font-weight:500 !important;}
.ask-composer .composer-input,.ask-composer .composer-input::placeholder{font-size:15.5px !important;}

/* glass-32: the daily "forces" are now tap-to-expand (owner: "not obvious what
   these forces are and how they affect — make it clickable expandable") */
#subview .forces-wrap .force-item{cursor:pointer;padding:11px 0 7px;border-bottom:1px solid rgba(255,255,255,0.08);}
#subview .forces-wrap .force-item:last-child{border-bottom:none;padding-bottom:2px;}
#subview .forces-wrap .force-name{display:flex !important;align-items:center;gap:7px;}
#subview .force-toggle{margin-left:auto;font-size:19px;line-height:1;color:#7fe3ff;opacity:.85;flex:0 0 auto;}
#subview .forces-wrap .force-name{font-size:17px !important;font-weight:600 !important;}
#subview .force-explain{margin:12px 2px 4px;font-size:16.5px !important;line-height:1.72 !important;color:#e3edf8;}
#subview .force-explain b{color:#fff;font-weight:700;}

/* You-tab "in plain words" → tap to expand the explanation (no sign jargon) */
#you-read{cursor:pointer;}
#you-read .sc-rowb{display:flex !important;align-items:center;}
#you-read .yr-tog{margin-left:auto;color:#7fe3ff;font-size:20px;line-height:1;}
#you-read .cl-read{font-size:17px !important;line-height:1.65 !important;}
.you-explain{margin-top:13px !important;font-size:16.5px !important;line-height:1.85 !important;color:#e3edf8 !important;}
.you-explain b{color:#fff !important;font-weight:700 !important;}

/* glass-34: Ask answers had invisible italics on the white bubble + were too small.
   Bigger, more air, and every inline run is dark/visible. */
.ask-thread .bubble.a,.ask-thread .bubble.q{font-size:16.5px !important;line-height:1.8 !important;}
.ask-thread .bubble.a{color:#1e2632 !important;}
.ask-thread .bubble.a em{color:#41506a !important;font-style:italic !important;}
.ask-thread .bubble.a strong,.ask-thread .bubble.a b{color:#0a5f86 !important;font-weight:700 !important;}
.ask-thread .bubble.a .hl,.ask-thread .bubble.a .hl-b,.ask-thread .bubble.a a{color:#0a5f86 !important;}
.ask-intro{font-size:16.5px !important;line-height:1.6 !important;}
/* more air inside the expandable explanations too */
#subview .force-explain{line-height:1.85 !important;}

/* glass-34: AHEAD windows (brace / push / rest) are now tap-to-expand too */
#fc-windows .force-item{cursor:pointer;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.07);}
#fc-windows .force-item:last-child{border-bottom:none;}
#fc-windows .force-item .sk-lrow{display:flex;align-items:center;gap:10px;}
#fc-windows .force-item .lr-mid{flex:1 1 auto;}
#fc-windows .force-toggle{flex:0 0 auto;color:#7fe3ff;font-size:18px;line-height:1;}
#fc-windows .force-explain{margin:10px 2px 12px;font-size:16px;line-height:1.7;color:#e3edf8;}
#fc-windows .force-explain b{color:#fff;font-weight:600;}

/* AHEAD "Your year" → obvious tappable CTA */
#fc-year{background:rgba(127,227,255,0.13) !important;border:1px solid rgba(127,227,255,0.4) !important;}
#fc-year .sk-mini{color:#7fe3ff !important;}
#fc-year .yr-cta{color:#7fe3ff !important;font-weight:700;white-space:nowrap;letter-spacing:.02em;}

/* glass-23 reverted — readings stay on the WHITE/light blocks (glass-22 above). */
/* glass-27: directive line = FROSTED DARK-BLUE GLASS (matches the app's dark cards,
   not flat black) + white text + cyan accent. Dark, but on-design. */
#subview .read-sheet p.action,#subview .reading p.action,#subview #personality-body p.action{
  background:rgba(22,30,46,0.55) !important;color:#f1f4f9 !important;
  -webkit-backdrop-filter:blur(24px) saturate(125%) !important;backdrop-filter:blur(24px) saturate(125%) !important;
  border:1px solid rgba(255,255,255,0.14) !important;border-left:3px solid #7fe3ff !important;
  border-radius:14px !important;padding:16px 18px !important;}
#subview .read-sheet p.action strong,#subview .reading p.action strong,#subview #personality-body p.action strong{color:#ffffff !important;}
#subview .read-sheet p.action em,#subview .reading p.action em{color:rgba(228,236,246,0.78) !important;}
#subview .read-sheet p.action .hl,#subview .read-sheet p.action .hl-b{color:#7fe3ff !important;}
/* the floating Ask button blocked the reading's Next/nav at the bottom —
   on sub-views move it to the TOP-LEFT so it's available but never covers content */
body.sub-open .ask-fab{
  top:calc(12px + env(safe-area-inset-top)) !important;bottom:auto !important;
  left:16px !important;right:auto !important;z-index:125 !important;}

/* LISTEN → a real call-to-action (icon + label, prominent) */
.subv-listen{display:inline-flex !important;align-items:center;gap:8px;padding:10px 18px !important;
  font-size:15px !important;font-weight:700 !important;letter-spacing:.03em;
  background:rgba(127,227,255,0.20) !important;color:#bdeeff !important;
  border:1px solid rgba(127,227,255,0.45) !important;border-radius:999px !important;}
.subv-listen .lst-ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

/* ============================================================================
   glass-28: READABILITY — one authoritative spacing rule for every reading block
   (kills the ~8 conflicting line-height rules above). Generous air between lines
   + clear gaps between blocks, per repeated "space every 2-3 lines" request.
   ============================================================================ */
#subview .read-sheet p,#subview .reading p,#subview #personality-body p,
#subview .reading li,#subview #personality-body li,#subview .read-sheet li{
  line-height:2.25 !important;
  font-size:18px !important;
  letter-spacing:.003em !important;
  padding:19px 21px !important;
  margin:0 0 16px !important;
}
#subview .read-sheet p.action,#subview .reading p.action,#subview #personality-body p.action{
  line-height:2.1 !important;padding:19px 21px !important;margin:6px 0 16px !important;}
#subview .read-sheet p:last-child,#subview .reading p:last-child,
#subview #personality-body p:last-child,#subview .read-sheet li:last-child{margin-bottom:0 !important;}

/* glass-30: INLINE READING VISUALS — small dark-glass viz the engine writes into
   the prose (bar / scale / peak). Distinct from the white text blocks so the
   reading reads as text + graphs woven together. */
#subview .rv{margin:2px 0 15px !important;padding:14px 16px !important;border-radius:14px !important;
  background:rgba(16,24,38,0.52) !important;border:1px solid rgba(127,227,255,0.22) !important;
  -webkit-backdrop-filter:blur(20px) saturate(125%) !important;backdrop-filter:blur(20px) saturate(125%) !important;
  color:#e9eef5 !important;box-shadow:0 10px 24px -18px rgba(0,0,0,0.6) !important;}
#subview .rv-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;}
#subview .rv-lab{font-size:13px;font-weight:600;letter-spacing:.01em;color:#dde7f5;}
#subview .rv-val{font-size:13px;font-weight:700;color:#7fe3ff;}
#subview .rv-track{height:9px;border-radius:99px;background:rgba(255,255,255,0.13);overflow:hidden;}
#subview .rv-track>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#5fd0f5,#7fe3ff);}
#subview .rv-poles{display:flex;justify-content:space-between;font-size:12px;color:rgba(217,229,244,0.72);}
#subview .rv-scale .rv-poles{margin-bottom:11px;font-weight:600;color:#cfdbec;font-size:12.5px;}
#subview .rv-line{position:relative;height:2px;border-radius:2px;background:rgba(255,255,255,0.2);margin:11px 5px;}
#subview .rv-dot{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#7fe3ff;
  box-shadow:0 0 0 4px rgba(127,227,255,0.2);transform:translate(-50%,-50%);}
#subview .rv-peak .rv-poles{margin-top:9px;}
#subview .rv-peak .rv-mid{color:#7fe3ff;font-weight:600;}

/* ============================================================================
   CHAT COMPACT (v6-4→5): the sheet fits its content — a fresh chat is a small
   sheet; a long conversation grows to a cap and scrolls. Type calms down a
   notch so answers read dense-but-airy instead of inflated.
   ============================================================================ */
.ask-panel{height:auto !important;min-height:0 !important;max-height:74dvh !important;}
.ask-thread{max-height:none;}                /* the panel cap rules; no double caps */
.ask-thread .bubble.a,.ask-thread .bubble.q{font-size:15.5px !important;line-height:1.62 !important;}
.ask-thread .bubble{padding:11px 14px;max-width:92%;}
.ask-intro{font-size:14px !important;padding:12px 14px !important;line-height:1.5 !important;}
.ask-chips .ask-chip,.ask-group .ask-q{font-size:14.5px !important;padding:11px 13px !important;}
.ask-sky{min-height:0 !important;padding-top:12px !important;padding-bottom:6px !important;}

/* ============================================================================
   WHITE-SHEET READABILITY (v6-8): the deep-dive/story sheets. List chunks lose
   the phantom 40px left indent, prose calms from ~2.1 to 1.72 line-height,
   and italics stop vanishing into the white.
   ============================================================================ */
#subview .read-sheet ul,#subview .read-sheet ol{padding-left:0 !important;margin:10px 0 !important;list-style:none !important;}
#subview .read-sheet li{margin-left:0 !important;}
#subview .read-sheet p,#subview .read-sheet li{line-height:1.72 !important;}
#subview .read-sheet em{color:#3f4b60 !important;}

/* ============================================================================
   VOICE (v6-9): spoken replies toggle in the chat header, tap-to-replay
   bubbles, the composer mic, and the Listen states on long-form sheets.
   ============================================================================ */
.ask-sky{position:relative;}
.ask-voice{position:absolute;top:10px;right:58px;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(0,0,0,.12) !important;background:rgba(0,0,0,.05) !important;color:#5b6675;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.ask-voice svg{width:18px;height:18px;}
.ask-voice.on{background:rgba(10,143,192,.14) !important;border-color:rgba(10,143,192,.45) !important;color:#0a5f86;}
.composer-mic{width:40px;height:40px;flex:none;align-self:flex-end;border-radius:50%;
  border:1px solid rgba(0,0,0,.12);background:rgba(0,0,0,.04);color:#5b6675;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;}
.composer-mic svg{width:19px;height:19px;}
.composer-mic.rec{background:#ffe9e6;border-color:#e09a90;color:#c0392b;animation:micpulse 1.2s ease-in-out infinite;}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(220,80,60,.35);}50%{box-shadow:0 0 0 9px rgba(220,80,60,0);}}
.subv-listen.loading{opacity:.55;}
.subv-listen.speaking{color:#7fe3ff !important;}
.ask-thread .bubble.a.loading{opacity:.75;}
.ask-thread .bubble.a.speaking{outline:2px solid rgba(10,143,192,.4);outline-offset:1px;}

/* narration pause state — dimmed ring says "tap to continue" */
.ask-thread .bubble.a.paused{outline:2px dashed rgba(10,143,192,.35);outline-offset:1px;opacity:.9;}
.subv-listen.paused{color:#8fb8c9 !important;opacity:.75;}

/* ============================================================================
   SECTION NAVIGATION AS REAL BUTTONS (v6-16). The prev/next words looked like
   decoration — now they read as controls, and the bottom "Next" is a proper
   CTA pill on the white sheet.
   ============================================================================ */
.read-nav-top .rn-prev,.read-nav-top .rn-next{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:9px 14px !important;color:#eef4fa !important;
  font-weight:700;cursor:pointer;}
.read-nav-top .rn-next{color:#bdeeff !important;border-color:rgba(127,227,255,.35);}
#subview .read-sheet .read-nav{margin-top:20px;padding:14px 0 2px;border-top:1px solid rgba(0,0,0,.07);}
#subview .read-sheet .read-nav .rn-next{
  display:block;text-align:center;background:#eaf7fd;border:1.5px solid rgba(10,143,192,.5);
  border-radius:999px;padding:13px 18px;color:#0a5f86 !important;font-weight:800;
  font-size:15px;cursor:pointer;}
#subview .read-sheet .read-nav .rn-next:active{transform:scale(.985);}
/* generated graphs: labels always breathe */
#subview .rv-poles{gap:14px;}
#subview .rv .rv-top{display:flex;justify-content:space-between;gap:12px;}
.sec-visuals{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;}

/* progressive deck: the "still writing" states */
.gen-writing{color:var(--sk-soft) !important;font-size:14px !important;}
#deck-writing{opacity:.8;animation:writepulse 2.2s ease-in-out infinite;}
@keyframes writepulse{0%,100%{opacity:.8;}50%{opacity:.45;}}

/* Home hero sentence skeleton — shown while the Opus today-line loads, so the
   plainer template line never flashes first (single-source hero sentence). */
.home-sentence .home-sk, p.home-sentence > .home-sk {
  display:block; height:2.35em; border-radius:8px; margin-top:2px;
  background:linear-gradient(100deg, rgba(255,255,255,.05) 30
/* Home hero sentence skeleton — shown while the Opus today-line loads, so the
   plainer template line never flashes first (single-source hero sentence). */
.home-sentence .home-sk, p.home-sentence > .home-sk {
  display:block; height:2.35em; border-radius:8px; margin-top:2px;
  background:linear-gradient(100deg, rgba(255,255,255,.05) 30%, rgba(255,255,255,.13) 50%, rgba(255,255,255,.05) 70%);
  background-size:200% 100%; animation:homeSkShim 1.2s linear infinite;
}
@keyframes homeSkShim { to { background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce){ .home-sk{ animation:none; opacity:.5; } }

/* "How to play today": a row with no expandable detail (dynamic day-mode "Avoid"
   has only the short line) shows no + and no pointer. */
.hg-item.no-exp .hg-plus { display:none; }
.hg-item.no-exp { cursor:default; }

/* Home HEADLINE skeleton — same shimmer as the sentence, shown until the Opus
   today-line loads (so the "A day with an edge" template never flashes first). */
.home-head .home-sk-head {
  display:block; height:1.5em; width:72%; border-radius:8px; margin:2px 0 8px;
  background:linear-gradient(100deg, rgba(255,255,255,.05) 30%, rgba(255,255,255,.13) 50%, rgba(255,255,255,.05) 70%);
  background-size:200% 100%; animation:homeSkShim 1.2s linear infinite;
}
@media (prefers-reduced-motion:reduce){ .home-sk-head{ animation:none; opacity:.5; } }