/* ══ APPLE FEEL (2026-10-10) ═════════════════════════════════════════════════
   Feel layer only, loaded last. Nothing here changes a handler, a credit, a
   price or an element id.
     - instant press feedback (scale .97, 100ms) and no 300ms tap delay
     - top bar and bottom nav as translucent material with scroll-edge fades
     - drawers, modals and the help panel move on one critically damped curve,
       modals grow from the point that opened them
     - size-specific tracking and leading, rem spacing
     - reduced motion = cross-fades, reduced transparency = solid,
       high contrast = solid with a defined edge
   No backslashes, backticks or dollar-brace in this block: it lives in a
   server template literal. */
:root{
  --font-ui:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',system-ui,'Segoe UI',Roboto,sans-serif;
  --fs-2xs:.6875rem;--fs-xs:.75rem;--fs-sm:.8125rem;--fs-md:.875rem;--fs-lg:1rem;--fs-xl:1.25rem;--fs-2xl:1.5rem;
  --sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-6:1.5rem;--sp-8:2rem;
  --vb-spring:cubic-bezier(.32,.72,0,1);
}
body{
  --vb-mat:color-mix(in srgb,var(--s1) 72%,transparent);
  --vb-mat-fx:blur(22px) saturate(180%);
  --vb-scrim:rgba(6,10,20,.5);
  --vb-top-h:60px;
  --vb-bot-h:calc(60px + env(safe-area-inset-bottom,0px));
}
@media (max-width:768px){ body{--vb-top-h:calc(60px + env(safe-area-inset-top,0px));} }

/* ── Touch: no double-tap delay, no grey flash, instant :active ── */
html,body{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
button,a,label,select,summary,[onclick],[role="button"],.btn,.ni,.mbn-item{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
button:not(:disabled):active,.btn:not(:disabled):active,.chip[onclick]:active,.ni:active,.mbn-item:active,.mbn-drawer-item:active,
.vb-ss-pill:active,.vb-st-pill:active,.vb-stat:active,.vb-m:active,.vb-cta:active,.vb-lvl:active,.pcard:active,.disc-card[onclick]:active,
.stat[onclick]:active,.vb-hcard[onclick]:active,.tb-btn:active,.hamburger:active,.s-btn:active,.upg-btn:active{
  transform:scale(.97);
  transition-duration:.1s;
  transition-timing-function:ease-out;
}
/* Touch screens keep :hover after a tap, which left lifted buttons stuck up. */
@media (hover:none){
  .btn.pr:hover,.s-btn:hover,.upg-btn:hover,.vb-cta:hover,.vb-stat:hover,.vb-m:hover,.stat:hover,.vbhelp-fab:hover{transform:none;}
}

/* ── Material: top bar and bottom nav float over the content ── */
.topbar{background:var(--vb-mat);-webkit-backdrop-filter:var(--vb-mat-fx);backdrop-filter:var(--vb-mat-fx);border-bottom:0;box-shadow:none;}
.mobile-bottom-nav{background:var(--vb-mat);-webkit-backdrop-filter:var(--vb-mat-fx);backdrop-filter:var(--vb-mat-fx);border-top:0;box-shadow:none;}
/* Scroll-edge fades replace the hard hairlines: content blurs and dissolves
   where it meets the floating chrome. */
body::before,body::after{content:'';position:fixed;left:0;right:0;height:1.25rem;pointer-events:none;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 70%,transparent),transparent);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent);mask-image:linear-gradient(to bottom,#000,transparent);}
body::before{top:var(--vb-top-h);z-index:49;}
body::after{display:none;bottom:var(--vb-bot-h);z-index:149;
  background:linear-gradient(to top,color-mix(in srgb,var(--bg) 70%,transparent),transparent);
  -webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent);}
@media (min-width:769px){ body:not(.mobile-view)::before{left:232px;} }
@media (max-width:768px){
  body::before{z-index:190;}
  body::after{display:block;}
  .topbar{padding-top:env(safe-area-inset-top,0px);height:var(--vb-top-h);}
  /* The bar is 60px (+ the status-bar inset); the old 54px left the first 6px of every page under it. */
  .main{padding-top:var(--vb-top-h);padding-bottom:calc(var(--vb-bot-h) + 1rem);}
  .pw-overlay{top:var(--vb-top-h)!important;bottom:var(--vb-bot-h)!important;}
}
body.mobile-view::after{display:block;}
body.mobile-view .main{padding-bottom:calc(var(--vb-bot-h) + 1rem)!important;}
body.mobile-view .pw-overlay{bottom:var(--vb-bot-h)!important;}
.mobile-bottom-nav{padding-bottom:env(safe-area-inset-bottom,0px);height:var(--vb-bot-h);}
.mbn-item{transition:color .2s var(--vb-spring),transform .1s ease-out;}
.mbn-label{font-size:.625rem;font-weight:500;letter-spacing:.01em;}
.mbn-active .mbn-label{font-weight:650;}

/* ── Drawers, scrims, sheets: one critically damped curve ── */
.sidebar{transition:transform .42s var(--vb-spring),box-shadow .3s ease;touch-action:pan-y;overscroll-behavior:contain;}
@media (max-width:768px){
  .sidebar-overlay{display:block!important;opacity:0;pointer-events:none;background:var(--vb-scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .38s var(--vb-spring);}
  .sidebar-overlay.open{opacity:1;pointer-events:auto;}
}
body.mobile-view .sidebar-overlay{display:block!important;opacity:0;pointer-events:none;background:var(--vb-scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .38s var(--vb-spring);}
body.mobile-view .sidebar-overlay.open{opacity:1;pointer-events:auto;}
.vbhelp-panel{transition:transform .42s var(--vb-spring);}
.vbhelp-ov{transition:opacity .3s var(--vb-spring);}
.ov{background:var(--vb-scrim);-webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%);transition:opacity .3s var(--vb-spring);}
.modal{opacity:0;transform:scale(.94);transform-origin:var(--vb-ox,50%) var(--vb-oy,50%);transition:transform .38s var(--vb-spring),opacity .22s ease-out;}
.ov.open .modal{opacity:1;transform:none;}
/* The More sheet rises from the tab that opened it and leaves the same way. */
#mobile-tab-drawer{transform-origin:50% 100%;animation:vbSheetIn .38s var(--vb-spring) both;padding-top:calc(1rem + env(safe-area-inset-top,0px))!important;}
#mobile-tab-drawer.vb-out{animation:vbSheetOut .22s cubic-bezier(.4,0,1,1) both;pointer-events:none;}
@keyframes vbSheetIn{from{opacity:0;transform:translateY(1.75rem) scale(.98)}to{opacity:1;transform:none}}
@keyframes vbSheetOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(1.75rem) scale(.98)}}

/* ── Type: tracking and leading follow size, hierarchy follows weight ── */
body{line-height:1.5;letter-spacing:-.006em;}
.pgt{font-size:1.0625rem;font-weight:650;letter-spacing:-.014em;line-height:1.2;}
.st,.vb-ph-t,.vb-next-t{font-weight:650;letter-spacing:-.024em;line-height:1.12;}
.vb-j-t,.vb-lvl-name,.pw-overlay .pw-title,.mhname{font-weight:650;letter-spacing:-.016em;line-height:1.25;}
.vb-stat-v,.sv,.vb-ring-n{letter-spacing:-.03em;line-height:1;}
.vb-ph-s,.vb-next-d,.vb-lvl-sub,.vb-empty-s{line-height:1.5;}
.vb-stat-l,.vb-m-d,.vb-home-note,.ts,.mhsub,.chip,.ni-badge,.nsec{letter-spacing:.01em;line-height:1.4;}
.btn,.s-btn,.upg-btn,.vb-cta{font-weight:600;letter-spacing:-.003em;}
.ni{font-weight:500;}

/* ── Pipeline cards at phone width: buttons stay inside the card ── */
.pcard{min-width:0;}
.pcard .btn,.pcard button{max-width:100%;min-width:0;box-sizing:border-box;white-space:normal;text-align:center;line-height:1.3;flex-wrap:wrap;justify-content:center;row-gap:.25rem;}

/* ══ Accessibility media ═════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  /* cross-fades only: nothing slides, scales or bounces */
  html{scroll-behavior:auto;}
  button:not(:disabled):active,.btn:not(:disabled):active,.chip[onclick]:active,.ni:active,.mbn-item:active,.mbn-drawer-item:active,
  .vb-ss-pill:active,.vb-st-pill:active,.vb-stat:active,.vb-m:active,.vb-cta:active,.vb-lvl:active,.pcard:active,.disc-card[onclick]:active,
  .stat[onclick]:active,.vb-hcard[onclick]:active,.tb-btn:active,.hamburger:active,.s-btn:active,.upg-btn:active{transform:none;opacity:.7;}
  .modal{transform:none;transition:opacity .2s ease-out;}
  .ov.open .modal{transform:none;}
  .vbhelp-panel{transform:none;opacity:0;visibility:hidden;transition:opacity .2s ease-out,visibility 0s linear .2s;}
  .vbhelp-panel.open{opacity:1;visibility:visible;transition:opacity .2s ease-out;}
  #mobile-tab-drawer{animation:vbFadeIn .2s ease-out both;}
  #mobile-tab-drawer.vb-out{animation:vbFadeOut .2s ease-out both;}
  @keyframes vbFadeIn{from{opacity:0}to{opacity:1}}
  @keyframes vbFadeOut{from{opacity:1}to{opacity:0}}
  @keyframes vbFadeUp{from{opacity:0}to{opacity:1}}
  @keyframes fi{from{opacity:0}to{opacity:1}}
  @keyframes vbPop{from{opacity:.6}to{opacity:1}}
  .fi,.vb-m.just{animation-duration:.2s;}
  .btn.pr:hover,.s-btn:hover,.upg-btn:hover,.vb-cta:hover,.vb-stat:hover,.vb-m:hover,.stat:hover{transform:none!important;}
}
@media (prefers-reduced-motion:reduce) and (max-width:768px){
  .sidebar{transform:none!important;opacity:0;visibility:hidden;transition:opacity .2s ease-out,visibility 0s linear .2s;}
  .sidebar.open{opacity:1;visibility:visible;transition:opacity .2s ease-out;}
}
@media (prefers-reduced-motion:reduce){
  body.mobile-view .sidebar{transform:none!important;opacity:0;visibility:hidden;transition:opacity .2s ease-out,visibility 0s linear .2s;}
  body.mobile-view .sidebar.open{opacity:1;visibility:visible;transition:opacity .2s ease-out;}
}
@media (prefers-reduced-transparency:reduce){
  body,body.light,html[data-theme="light"] body{--vb-mat:var(--s1);--vb-mat-fx:none;--vb-scrim:rgba(6,10,20,.72);}
  .topbar,.mobile-bottom-nav,.ov,.sidebar-overlay,.vbhelp-ov,.pw-overlay,#free-tier-gate{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
  .pw-overlay,#free-tier-gate{background:var(--bg)!important;}
  body::before,body::after{-webkit-backdrop-filter:none;backdrop-filter:none;}
}
@media (prefers-contrast:more){
  body,body.light,html[data-theme="light"] body{--vb-mat:var(--s1);--vb-mat-fx:none;--vb-scrim:rgba(0,0,0,.8);--tx2:var(--tx);--tx3:var(--tx2);--b1:var(--b3);--b2:var(--b3);}
  .topbar{border-bottom:1px solid var(--b3);}
  .mobile-bottom-nav{border-top:1px solid var(--b3);}
  .topbar,.mobile-bottom-nav,.ov,.sidebar-overlay,.pw-overlay{-webkit-backdrop-filter:none;backdrop-filter:none;}
  body::before,body::after{display:none;}
  .btn,.chip,.vb-ss-pill,.vb-st-pill,.pcard,.vb-stat,.vb-m{border-color:var(--b3);}
  .btn:focus-visible,button:focus-visible,a:focus-visible,.ni:focus-visible{outline:2px solid var(--tx);outline-offset:2px;box-shadow:none;}
}
/* One keyboard focus ring app-wide (2026-10-11, UX audit F20). Some controls
   showed the browser default, some nothing, some a 3px glow. Mouse clicks do
   not trigger :focus-visible, so this only paints for keyboard users. */
:focus-visible{outline:2px solid var(--vb-focus-ring,#067a55);outline-offset:2px;}
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,[role="button"]:focus-visible,[role="link"]:focus-visible,[tabindex]:focus-visible,
.btn:focus-visible,.tb-btn:focus-visible,.ni:focus-visible,.vb-mt:focus-visible,.vb-tier:focus-visible,.vb-ss-pill:focus-visible,.vb-st-pill:focus-visible,
.lf-radius button:focus-visible,.lf-more-sum:focus-visible,.vb-disc-note summary:focus-visible{outline:2px solid var(--vb-focus-ring,#067a55);outline-offset:2px;box-shadow:none;}
body:not(.light) {--vb-focus-ring:#34d399;}
@media (prefers-contrast:more){ :focus-visible,button:focus-visible,a:focus-visible,.btn:focus-visible,.ni:focus-visible{outline-color:var(--tx);} }