/* ═══════════════════════════════════ LIQUID GLASS (Oct 16 2026) ═══════════════════════════════════
   Founder chose direction 1 of _lab-future.html ("Liquid glass"), took it to the site and the way in
   (_lab-glass-entry.html), then: "implement the stylesheet to all app screens and site", "change layout
   too", and "i dont want everything lost somethings i do want carried over and converted".

   HOW IT CONVERTS RATHER THAN REPLACES. app.css draws every surface from ~20 material tokens
   (--plate-fill, --plate-bevel, --chip-fill, --glass-fill, --well-fill, --channel-fill, --canvas ...),
   and ~400 card rules in the pages consume them. Remapping the tokens here turns the machined-steel hull
   into glass on every screen at once, while every layout, number, row and control stays where it was.
   Shared chrome then takes the new layout: a floating glass tab dock, pill segments, pill buttons,
   glass sheets, a calmer topbar, and one slow glow field under everything.

   KEPT AND CONVERTED: the WE disc (now lit), the dial and its lens tabs, the one chartreuse accent
   (now emitted light, not paint), chips/pills/rank colours, rows and their chevrons, the Today pills.

   LOAD ORDER IS LOAD-BEARING. This file is linked LAST in <head>, after app.css AND after the page's own
   <style>, so a same-specificity rule here wins. app.css's HI-FI SPACE block uses !important; the few
   rules below that answer it do too, and nothing else does.

   PERFORMANCE (WKWebView). No `filter:` anywhere: the glows are radial GRADIENTS (soft by construction)
   that only TRANSLATE, so they composite. backdrop-filter only on chrome that floats over scrolling
   content (dock, sheets, toast). Panes over the field skip it: the field is already soft, so a blur
   behind a pane changes nothing you can see and costs a full-screen readback.
   Reduced Motion: the field holds still. glass- prefixed helpers (Tito row 76). ═══════════════════════ */

/* ─────────────────────────────── 1 · TOKENS (dark) ─────────────────────────────── */
:root{
  --gl-bg:#07080C;
  --gl-pane:rgba(255,255,255,.06);  --gl-pane-hi:rgba(255,255,255,.10);
  --gl-edge:rgba(255,255,255,.11);  --gl-hi:rgba(255,255,255,.20);
  --gl-tx2:rgba(235,238,245,.60);
  --gl-glowA:rgba(220,232,92,.17);  --gl-glowB:rgba(95,200,242,.15);  --gl-glowC:rgba(185,166,242,.12);
  --gl-chrome:rgba(18,20,27,.62);   --gl-sheet:rgba(17,19,26,.86);
  --gl-blur:blur(24px) saturate(160%);
  --gl-r:22px;
  --gl-disp:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;

  /* the field (static part; the drifting lights are .phone::before/::after below) */
  --canvas:
    radial-gradient(60% 34% at 88% 0%, rgba(220,232,92,.10), transparent 70%),
    radial-gradient(70% 40% at 0% 70%, rgba(95,200,242,.08), transparent 70%),
    linear-gradient(180deg,#08090E,#07080C 60%,#06070A);

  /* steel ramp → neutral glass darks (solid fills that were hull colour) */
  --st-900:#0B0C11; --st-800:#101218; --st-700:#15171F; --st-600:#1B1E27; --st-500:#272B35; --st-400:#363B47; --st-spec:#E6E9F0;

  /* materials → glass */
  --plate-fill:linear-gradient(180deg, rgba(255,255,255,.078), rgba(255,255,255,.046));
  --plate-bevel:inset 0 1px 0 rgba(255,255,255,.15), inset 0 0 0 1px rgba(255,255,255,.075);
  --plate-lift:0 14px 34px rgba(0,0,0,.24);
  --plate-lift-sm:0 6px 18px rgba(0,0,0,.16);
  --plate-line:1px solid rgba(255,255,255,.10);
  --plate-grain:linear-gradient(transparent,transparent);
  --plate-spec:linear-gradient(transparent,transparent);
  --chip-fill:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.06));
  --chip-bevel:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.08);
  --chip-bevel-flush:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.08);
  --plate-cold-fill:linear-gradient(rgba(255,255,255,.035), rgba(255,255,255,.035));
  --plate-cold-bevel:inset 0 0 0 1px rgba(255,255,255,.07);
  --glass-fill:linear-gradient(180deg, rgba(255,255,255,.072), rgba(255,255,255,.042));
  --glass-line:1px solid rgba(255,255,255,.11);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 14px 34px rgba(0,0,0,.22);
  --glass-shadow-sm:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 18px rgba(0,0,0,.15);
  --well-fill:linear-gradient(rgba(127,127,145,.11), rgba(127,127,145,.11));
  --well-bevel:inset 0 0 0 1px rgba(255,255,255,.06);
  --channel-fill:linear-gradient(rgba(127,127,145,.14), rgba(127,127,145,.14));
  --channel-bevel:inset 0 0 0 1px rgba(255,255,255,.04);

  /* text and glyph tints lose the navy cast: neutral light on neutral dark */
  --tx-2:#EEF0F5; --tx-2a:#ECEEF3; --tx-3:#CDD0D8; --tx-3a:#D2D5DD;
  --tx-m1:#A6AAB4; --tx-m2:#979BA5; --tx-m3:#A3A7B1; --tx-m4:#8D919B; --tx-m5:#969AA4; --tx-m6:#9094A0;
  --icon-1:#A8ACB6; --on-plate-1:#EEF0F5; --on-plate-2:#BFC3CC; --on-plate-3:#ADB1BA;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.14);
  --media-panel:#0E1016;

  /* the accent is emitted light: flat, with a bloom, never a bevelled ramp */
  --accent-fill:linear-gradient(#DCE85C,#DCE85C);
  --accent-fill-press:linear-gradient(#CAD655,#CAD655);
  --accent-glow:0 0 26px rgba(220,232,92,.30);
  --accent-glow-sm:0 0 14px rgba(220,232,92,.24);
}

/* ─────────────────────────────── 1b · TOKENS (light — the pearl field) ─────────────────────────────── */
:root[data-theme="light"]{
  --gl-bg:#F3F2F7;
  --gl-pane:rgba(255,255,255,.60); --gl-pane-hi:rgba(255,255,255,.85);
  --gl-edge:rgba(255,255,255,.95); --gl-hi:#FFFFFF;
  --gl-tx2:rgba(20,21,27,.56);
  --gl-glowA:rgba(200,220,60,.30); --gl-glowB:rgba(120,190,255,.28); --gl-glowC:rgba(185,166,242,.26);
  --gl-chrome:rgba(255,255,255,.66); --gl-sheet:rgba(250,249,253,.90);
  --canvas:
    radial-gradient(60% 34% at 88% 0%, rgba(200,220,60,.20), transparent 70%),
    radial-gradient(70% 40% at 0% 70%, rgba(120,190,255,.18), transparent 70%),
    linear-gradient(180deg,#F5F4F9,#F1F0F6);
  --plate-fill:linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.60));
  --plate-bevel:inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgba(255,255,255,.9), 0 0 0 1px rgba(40,34,80,.05);
  --plate-lift:0 12px 30px rgba(70,60,120,.10);
  --plate-lift-sm:0 5px 16px rgba(70,60,120,.08);
  --plate-line:1px solid rgba(40,34,80,.08);
  --chip-fill:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  --chip-bevel:inset 0 1px 0 #FFFFFF, 0 0 0 1px rgba(40,34,80,.07), 0 2px 6px rgba(70,60,120,.08);
  --chip-bevel-flush:inset 0 1px 0 #FFFFFF, 0 0 0 1px rgba(40,34,80,.07);
  --plate-cold-fill:linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45));
  --plate-cold-bevel:0 0 0 1px rgba(40,34,80,.06);
  --glass-fill:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.58));
  --glass-line:1px solid rgba(255,255,255,.95);
  --glass-shadow:inset 0 1px 0 #FFFFFF, 0 0 0 1px rgba(40,34,80,.05), 0 12px 30px rgba(70,60,120,.10);
  --glass-shadow-sm:inset 0 1px 0 #FFFFFF, 0 0 0 1px rgba(40,34,80,.05), 0 5px 16px rgba(70,60,120,.08);
  --well-fill:linear-gradient(rgba(40,34,80,.05), rgba(40,34,80,.05));
  --well-bevel:inset 0 0 0 1px rgba(40,34,80,.06);
  --channel-fill:linear-gradient(rgba(40,34,80,.06), rgba(40,34,80,.06));
  --channel-bevel:inset 0 0 0 1px rgba(40,34,80,.03);
  --accent-glow:0 8px 24px rgba(143,163,0,.22);
  --accent-glow-sm:0 4px 12px rgba(143,163,0,.18);
}

/* ─────────────────────────────── 2 · THE FIELD ─────────────────────────────── */
html{ background:var(--gl-bg); }
body.wb-live, body.wb-shot{ background:var(--gl-bg); }
:root[data-theme="light"] body.wb-live, :root[data-theme="light"] body.wb-shot{ background:var(--gl-bg); }
/* overflow:CLIP, not hidden. The lights hang past the phone's right edge, and an overflow:hidden box can still be
   scrolled by script: a setup flow focusing a field scrolled .phone sideways and shoved every overlay 114px off the
   left edge. clip makes the box unscrollable (WebKit 16+; the app targets iOS 18). */
.phone{ background:var(--canvas) !important; isolation:isolate; overflow:hidden; overflow:clip; }
/* Two slow lights. Gradients, not blurred discs (no filter), translated only (composited). */
.phone::before, .phone::after{
  content:''; position:absolute; z-index:-1; pointer-events:none; border-radius:50%;
  will-change:transform; animation:glDrift 18s ease-in-out infinite;
}
.phone::before{ width:360px; height:360px; top:-120px; right:-130px;
  background:radial-gradient(circle, var(--gl-glowA), transparent 68%); }
.phone::after{ width:380px; height:380px; top:46%; left:-170px; animation-delay:-8s;
  background:radial-gradient(circle, var(--gl-glowB), transparent 68%); }
@keyframes glDrift{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(22px,-26px,0) scale(1.12); } }
.screen{ background:transparent; }
/* the cosmos stands down (spacebg.js checks for this file too); hidden here in case a page mounted it first */
#wb-spacebg, #wb-spacebg-near{ display:none !important; }

/* ─────────────────────────────── 3 · TYPE ─────────────────────────────── */
.h1{ font-family:var(--gl-disp); font-weight:600; letter-spacing:-.5px; }
.h2{ font-family:var(--gl-disp); font-weight:500; letter-spacing:-.3px; }
.big, .nw-hero .big{ font-family:var(--gl-disp); font-weight:300; letter-spacing:-1px; }

/* ─────────────────────────────── 4 · TOPBAR ─────────────────────────────── */
.topbar .tb-title{ font-family:var(--gl-disp); font-weight:600; letter-spacing:-.2px; }
.topbar::after, [data-theme="light"] .topbar::after{ display:none; }
.appback, .welcome-fwd{ background:var(--gl-pane); box-shadow:inset 0 1px 0 var(--gl-hi), 0 0 0 1px var(--gl-edge); }

/* ─────────────────────────────── 5 · THE DOCK (bottom tab bar → floating glass) ─────────────────────────────── */
.wtabs, [data-theme="light"] .wtabs{
  left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom,0px));
  padding:8px 8px; border-radius:26px; align-items:center;
  background:var(--gl-chrome);
  -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur);
  box-shadow:inset 0 1px 0 var(--gl-hi), 0 0 0 1px var(--gl-edge), 0 14px 36px rgba(0,0,0,.30);
}
[data-theme="light"] .wtabs{ box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgba(40,34,80,.06), 0 14px 34px rgba(70,60,120,.16); }
.wtab{ color:var(--gl-tx2); padding:3px 2px; }
.wtab span{ font-weight:600; letter-spacing:0; }
.wtab.on{ color:var(--tx-1); }
.wtab.on i{ color:var(--chart); }
.wtab.wthome{ padding-bottom:0; }
.wthome .wth{ box-shadow:0 0 22px rgba(var(--chart-rgb),.42), inset 0 1px 0 rgba(255,255,255,.55); font-weight:800; }
.screen.has-wtabs{ padding-bottom:calc(104px + env(safe-area-inset-bottom,0px)); }

/* ─────────────────────────────── 6 · SEGMENTS (lens tabs, world tabs) → pill track, glass selection ─────────────────────────────── */
.mtabs, .dl-tabs, .seg, .seg2, .fx-tabs, .rv-tabs, .tr-sort{
  border-radius:999px !important; background:var(--channel-fill) !important; box-shadow:var(--channel-bevel) !important; border:none !important; padding:3px !important;
}
.mtab, .dl-tabs button, .seg button, .seg2 button, .fx-tabs button, .rv-tabs button, .tr-sort button{
  border-radius:999px !important; font-weight:600 !important; color:var(--gl-tx2) !important;
  transition:background var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out);
}
.mtab.on, .dl-tabs button.on, .seg button.on, .seg2 button.on, .fx-tabs button.on, .rv-tabs button.on, .tr-sort button.on{
  background:var(--gl-pane-hi) !important; color:var(--tx-1) !important;
  box-shadow:inset 0 1px 0 var(--gl-hi), 0 0 0 1px var(--gl-edge) !important;
}
[data-theme="light"] .mtab.on, [data-theme="light"] .dl-tabs button.on, [data-theme="light"] .seg button.on,
[data-theme="light"] .seg2 button.on, [data-theme="light"] .fx-tabs button.on, [data-theme="light"] .rv-tabs button.on,
[data-theme="light"] .tr-sort button.on{
  background:#FFFFFF !important; box-shadow:0 1px 0 rgba(255,255,255,.9), 0 2px 8px rgba(70,60,120,.14), 0 0 0 1px rgba(40,34,80,.05) !important;
}

/* ─────────────────────────────── 7 · BUTTONS ─────────────────────────────── */
.btn{ border-radius:999px; font-weight:700; letter-spacing:-.1px; }
.btn-primary{ background:var(--accent-fill); color:var(--ink-on-accent);
  box-shadow:var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.45); }
.btn-primary:active{ background:var(--accent-fill-press); box-shadow:var(--accent-glow-sm); }
.btn-white, [data-theme="light"] .btn-white{ background:var(--gl-pane); border:none; color:var(--tx-1);
  box-shadow:inset 0 1px 0 var(--gl-hi), 0 0 0 1px var(--gl-edge); letter-spacing:0; }
.btn-ghost{ background:var(--gl-pane); border:1px solid rgba(var(--chart-rgb),.55); box-shadow:inset 0 1px 0 var(--gl-hi); }
.disc-circle, [data-theme="light"] .disc-circle{ background:var(--gl-pane); border:none;
  box-shadow:inset 0 1px 0 var(--gl-hi), 0 0 0 1px var(--gl-edge), 0 0 30px rgba(var(--chart-rgb),.16); }

/* ─────────────────────────────── 8 · PANES (answers app.css's HI-FI SPACE !important block) ─────────────────────────────── */
.surface, .tile, .prow, .tool, .glance, .srow, .glass, .gs-card, .ins-card, .wl-ask, .closer-card{
  background:var(--glass-fill) !important;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border:1px solid var(--gl-edge) !important;
  box-shadow:inset 0 1px 0 var(--gl-hi), 0 12px 30px rgba(0,0,0,.18) !important;
}
[data-theme="light"] .surface, [data-theme="light"] .tile, [data-theme="light"] .prow, [data-theme="light"] .tool,
[data-theme="light"] .glance, [data-theme="light"] .srow, [data-theme="light"] .glass, [data-theme="light"] .gs-card,
[data-theme="light"] .ins-card, [data-theme="light"] .wl-ask, [data-theme="light"] .closer-card{
  background:var(--glass-fill) !important; border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgba(40,34,80,.05), 0 10px 26px rgba(70,60,120,.09) !important;
}
.plate, .money-card, .earn-card, .nw-hero, .sp-card, .qr-grade, .rc-grade, .glasscard{ border-radius:var(--gl-r); }
.inset, .ask-menu, .pth-row{ background:var(--well-fill) !important; border:1px solid rgba(var(--edge-rgb),.06) !important; box-shadow:none !important; }

/* ─────────────────────────────── 9 · SHEETS + OVERLAYS ─────────────────────────────── */
.surface-solid, .sheet, .sb-panel{
  background:var(--gl-sheet) !important;
  -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur);
  box-shadow:inset 0 1px 0 var(--gl-hi), 0 -16px 50px rgba(0,0,0,.40) !important;
}
[data-theme="light"] .surface-solid, [data-theme="light"] .sheet, [data-theme="light"] .sb-panel{
  background:var(--gl-sheet) !important; box-shadow:inset 0 1px 0 #fff, 0 -14px 44px rgba(70,60,120,.18) !important;
}
.sheet::before{ background:none; box-shadow:none; }
.sh-grip, [data-theme="light"] .sh-grip{ background:rgba(127,127,145,.45); box-shadow:none; }
.ov{ background:rgba(4,5,8,.48); }
[data-theme="light"] .ov{ background:rgba(40,30,70,.26); }
.ov > .sheet, .ov > .pm-sheet{ transition:transform var(--d-4) cubic-bezier(.22,1,.36,1); }

/* ─────────────────────────────── 10 · INPUTS ─────────────────────────────── */
.field, .field-at{ background:var(--well-fill); border:1px solid rgba(var(--edge-rgb),.09); box-shadow:none; border-radius:14px; }
.field:focus{ border-color:rgba(var(--chart-rgb),.55); box-shadow:0 0 0 3px rgba(var(--chart-rgb),.14); outline:none; }

/* ─────────────────────────────── 11 · TOAST ─────────────────────────────── */
#toast, :root[data-theme="light"] #toast{
  background:var(--gl-sheet); -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur);
  box-shadow:inset 0 1px 0 var(--gl-hi), 0 0 0 1px var(--gl-edge), 0 12px 30px rgba(0,0,0,.28); border-radius:999px;
}

/* ─────────────────────────────── 12 · MOTION ─────────────────────────────── */
/* The rise settles instead of sliding: a touch further, with a scale-in, on the same timing. */
@keyframes wbRise{ from{ opacity:0; transform:translateY(12px) scale(.985); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .phone::before, .phone::after{ animation:none; }
}

/* ─────────────────────────────── 13 · TYPE ON THE HOMES (the mock's "precise type") ─────────────────────────────── */
/* Figures become light display numerals: the number is the instrument, so it is drawn, not shouted. */
.dl-ctr b, .sp-val, .ph-val, .pt-val, .ac-bal, .ws-big{
  font-family:var(--gl-disp); font-weight:300 !important; letter-spacing:-1px; }
.lp-st b, .mc-val, .dn-p{ font-family:var(--gl-disp); font-weight:400 !important; letter-spacing:-.5px; }
.lp-st b{ font-size:20px; }
/* Greetings and card titles: semibold display instead of black weight. */
.wl-greet, .oh-greet{ font-family:var(--gl-disp); font-weight:600; letter-spacing:-.6px; }
.lp-t b, .mc-t, .paths-h, .sq-t, .wall-h, .sh-h, .tour-t{ font-weight:650; letter-spacing:-.2px; }
.lp-pill{ font-weight:700; }
/* Section labels between panes: quiet mixed case, not engraved capitals. In-card tags stay small caps. */
.wl-lbl, .sec-lab, .sec-lab2, .mh-lab, .objslot-l, .r-eyebrow, .psec-label, .menu-group-label{
  text-transform:none !important; letter-spacing:0 !important; font-size:13px !important; font-weight:600 !important; color:var(--gl-tx2) !important; }

/* ─────────────────────────────── 14 · THE WAY IN (splash, sign-in) ─────────────────────────────── */
#stars{ display:none !important; }                     /* the field replaces the starfield on both entry screens */
.btn.apple, .btn.google, .btn.email{ border-radius:999px !important; }
/* Sign in with Apple keeps Apple's black (HIG: black, white or outlined — never the brand colour). */
.btn.apple{ box-shadow:0 0 0 1px rgba(255,255,255,.16), 0 10px 26px rgba(0,0,0,.35); }
.btn.email{ background:var(--gl-pane) !important; color:var(--tx-1) !important; border:none !important;
  box-shadow:inset 0 1px 0 var(--gl-hi), 0 0 0 1px var(--gl-edge) !important; }
.l-fine{ color:var(--gl-tx2) !important; }

/* ─────────────────────────────── 15 · SHEETS AND POP-UPS ARE SOLID ───────────────────────────────
   Founder, Oct 16: "no visual/translucent errors". Under steel, every sheet that painted itself with --plate-fill
   was opaque. Under glass that token is a translucent tint, so a sheet showed the screen (and the dock) through it.
   A pane on the field may be glass; anything that COVERS other content gets a solid base, with the glass tint on
   top (background-color only, so each sheet's own gradient still sits above it). Inventory: every overlay child
   in the markup, plus every sheet/pop/menu/modal class painted with a material token, plus the setup flows'
   wbi-wrap (built in JS). New sheets: add the class here. */
:root{ --gl-solid:#14161D; }
:root[data-theme="light"]{ --gl-solid:#F8F7FC; }
.sheet, .sb-panel, .surface-solid, .set-sheet, .del-sheet, .gsheet, .ov > .pop, .ov > .paths-card,
.sq-sheet, .st-sheet, .md-sheet, .mc-sheet, .cm-sheet, .cf-sheet, .cap-sheet, .lo-sheet, .su-sheet, .qa-sheet,
.src-sheet, .wbc-sheet, .wbbf-sheet, .wbobj-sheet, .wbmod-sheet, .pm-sheet, .bottom-sheet,
.wk-pop, .wbgs-pop, .ivc-pop, .proj-pop, .proj-pop-card, .src-panel, .qa-panel, .gb-menu, .apmodal, .wbi-wrap{
  background-color:var(--gl-solid) !important;
}
#toast, :root[data-theme="light"] #toast{ background:var(--gl-solid); }
/* the dock stays glass (content blurs under it, as on iOS) but dense enough that nothing behind competes with its labels */
:root{ --gl-chrome:rgba(18,20,27,.80); }
:root[data-theme="light"]{ --gl-chrome:rgba(255,255,255,.82); }
/* Money-world pages repaint their sheets at higher specificity (app.css `body.wb-money .sheet …` and its light twin,
   both !important). Same selectors here, later in the cascade, so the solid base wins there too (Oct 16 audit:
   transactions, investments and goals sheets were see-through). */
body.wb-money .sheet, body.wb-money .gsheet, body.wb-money .sh-sheet, body.wb-money .add-sheet, body.wb-money .lo-sheet,
body.wb-money .pm-sheet, body.wb-money .surface-solid,
[data-theme="light"] body.wb-money .sheet, [data-theme="light"] body.wb-money .gsheet, [data-theme="light"] body.wb-money .sh-sheet,
[data-theme="light"] body.wb-money .add-sheet, [data-theme="light"] body.wb-money .lo-sheet, [data-theme="light"] body.wb-money .pm-sheet,
[data-theme="light"] body.wb-money .surface-solid, .sh-sheet, .add-sheet{
  background-color:var(--gl-solid) !important;
}
/* Sheets written inline, with no class (wesocial #ovOrbAdd): any bottom-anchored direct child of an overlay. */
#ovOrbAdd > div, .ov > div[style*="bottom:0"][style*="position:absolute"]{ background-color:var(--gl-solid) !important; }

/* ── Oct 16 sweep: two more segment controls and one more label set that the first pass missed ── */
.thz{ border-radius:999px !important; background:var(--channel-fill) !important; box-shadow:var(--channel-bevel) !important; border:none !important; padding:3px !important; }
.thz button{ border-radius:999px !important; font-weight:600 !important; color:var(--gl-tx2) !important; }
.thz button.on{ background:var(--gl-pane-hi) !important; color:var(--tx-1) !important; box-shadow:inset 0 1px 0 var(--gl-hi), 0 0 0 1px var(--gl-edge) !important; }
[data-theme="light"] .thz button.on{ background:#FFFFFF !important; box-shadow:0 2px 8px rgba(70,60,120,.14), 0 0 0 1px rgba(40,34,80,.05) !important; }
.lp-mh span{ text-transform:none !important; letter-spacing:0 !important; font-size:13px !important; font-weight:600 !important; color:var(--gl-tx2) !important; }

/* ─────────────────────────────── 16 · THE FEEL PASS (Oct 16 — founder: "all 7 smooth upgrades") ───────────────────────────────
   Every screen is its own document, so these all ride the cross-document view transition (app.css @view-transition).
   The NEW document draws both snapshots; wb-theme.js has already put wb-nav-fwd / -back / -tab and wb-quick on <html>. */

/* 1 · The dock is its own layer in every transition: it holds still while the screen changes under it, and only
   its lit tab cross-fades. Before, it left with the old screen and arrived with the new one on every tap. */
.wtabs{ view-transition-name:wb-dock; }

@media (prefers-reduced-motion: no-preference){
  /* 3 · Push and pop. Forward slides the new screen in from the right over a parallaxed old one; Back slides the
     old screen off to the right to uncover the one beneath. iOS's own curve, about a third of a second.
     Tab switches keep app.css's quick dissolve (a world is a place, not a step). */
  html.wb-nav-fwd::view-transition-old(root){ animation:glPopOut .34s cubic-bezier(.32,.72,0,1) both; }
  html.wb-nav-fwd::view-transition-new(root){ animation:glPushIn .34s cubic-bezier(.32,.72,0,1) both; }
  html.wb-nav-back::view-transition-old(root){ animation:glBackOut .3s cubic-bezier(.32,.72,0,1) both; z-index:2; }
  html.wb-nav-back::view-transition-new(root){ animation:glBackIn .3s cubic-bezier(.32,.72,0,1) both; }
  @keyframes glPushIn{ from{ transform:translateX(100%); } to{ transform:none; } }
  @keyframes glPopOut{ from{ transform:none; opacity:1; } to{ transform:translateX(-28%); opacity:.55; } }
  @keyframes glBackIn{ from{ transform:translateX(-28%); opacity:.55; } to{ transform:none; opacity:1; } }
  @keyframes glBackOut{ from{ transform:none; } to{ transform:translateX(100%); } }
  /* A screen that slides in already has its entrance: the staggered rise stays out of the way. Zero specificity,
     like app.css §12, so a page's own choreography still wins. */
  :where(html.wb-nav-fwd, html.wb-nav-back) :where(.screen:not(.no-rise)) > :where(:not(.topbar):not(style):not(script):not(.ov)){ animation-name:none; }
  /* 7 · A screen already opened this session settles at once: 140ms, no stagger. First visits keep the full rise. */
  :where(html.wb-quick) :where(.screen:not(.no-rise)) > :where(:not(.topbar):not(style):not(script):not(.ov)){ animation-duration:140ms; animation-delay:0ms; }
}
/* four more segment controls found by the screenshot pass (wellness stats, investments detail, log, profile) */
.ws-seg, .iv-seg, .log-seg, .pf-seg{ border-radius:999px !important; background:var(--channel-fill) !important; box-shadow:var(--channel-bevel) !important; border:none !important; padding:3px !important; }
.ws-seg span, .iv-seg span, .log-seg button, .pf-seg button{ border-radius:999px !important; font-weight:600 !important; color:var(--gl-tx2) !important; border-color:transparent !important; }
.ws-seg span.on, .iv-seg span.on, .log-seg button.on, .pf-seg button.on{ background:var(--gl-pane-hi) !important; color:var(--tx-1) !important; box-shadow:inset 0 1px 0 var(--gl-hi), 0 0 0 1px var(--gl-edge) !important; }
[data-theme="light"] .ws-seg span.on, [data-theme="light"] .iv-seg span.on, [data-theme="light"] .log-seg button.on, [data-theme="light"] .pf-seg button.on{
  background:#FFFFFF !important; box-shadow:0 2px 8px rgba(70,60,120,.14), 0 0 0 1px rgba(40,34,80,.05) !important; }


/* ─────────────────────────────── 17 · NO WHITE FLASHES (Oct 17 — founder: "there are some white flashes in transitions -
   eliminate all flashes") ───────────────────────────────
   The push/pop slides move the two snapshots apart: for a beat, part of the screen is covered by neither, and the transition
   layer behind them is transparent, which WebKit paints white. Give it the app's own canvas so the gap is the field. */
html::view-transition{ background:#07080C; }
:root[data-theme="light"]::view-transition{ background:#F3F2F7; }
/* the outgoing screen dims toward the field, never toward white */
html::view-transition-image-pair(root){ isolation:isolate; }

/* the connections count link (WeSocial greeting, MyVault profile) — Oct 17 */
.conn-count{ display:inline-flex; align-items:center; gap:5px; margin-top:6px; color:var(--chart); font-size:13px; font-weight:650; cursor:pointer; text-decoration:none; }
.conn-count[hidden]{ display:none; }
.conn-count::after{ content:'›'; font-size:15px; line-height:1; }
[data-theme="light"] .conn-count{ color:#6B7A00; }