/* ===========================================================================
   GROWTH TOOL v2  -  SHARED STYLESHEET for all three pages
   (reporting.html / targeting.html / engagement.html)
   One file so the three directions cannot drift apart between pages.
   =========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* --- shared, never themed ------------------------------------------- */
  --ink:#ffffff;
  --ink-2:#b3b3b3;
  --ink-3:#7c7c7c;
  --g:#b4ff3c;

/* == THE COLOUR SYSTEM · one meaning per colour, no collisions ==============
   A source type and the metric it produces share a colour on purpose: green
   is followers AND the fans they bring AND the ratio that measures it. That
   is what makes it muscle memory rather than eight hues to memorise.

     --c-fans    green   Followers source . New fans . Follow back ratio
     --c-likes   pink    Likers source    . New post likes . Like back ratio
     --c-views   cyan    Hashtag source   . Story views
     --c-slikes  orange  Story likes      (an action we take)
     --c-plikes  violet  Post likes given (an action we take)

   Nothing else on the page may use these five. Neon is chart and data only,
   per ui-revamp-sop.md.                                                     */
  --c-fans:#b4ff3c;
  --c-likes:#FF2E88;
  --c-views:#00E5FF;
  --c-slikes:#FF8A00;
  --c-plikes:#A855F7;
                       /* the house green, on every direction */
  --g-soft:rgba(180,255,60,.12);

  --display:'Anton',sans-serif;
  --sans:'DM Sans',-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.32,.72,0,1);
  --rail:252px;

  /* --- themed, redefined per direction --------------------------------- */
  --ground:#0a0a0a;
  --rail-bg:#0d0d0d;
  --card:#151515;
  --card-up:#1e1e1e;
  --card-shadow:none;
  --r-card:20px;
  --r-sm:12px;
  --hair:rgba(255,255,255,.07);
  --hair-soft:rgba(255,255,255,.045);
  --rule-bg:rgba(255,255,255,.07);   /* the editorial hairline rules */
  --fill-1:rgba(255,255,255,.06);    /* quiet fills: chips, toggles, segments */
  --fill-2:rgba(255,255,255,.12);
}

/* ── DIRECTION 1 · MIDNIGHT ───────────────────────────────────────────────
   Flat near-black. Nothing glows, nothing gradients. The page is carried by
   the type and the folio numbers, the way the website is.                  */
[data-theme="midnight"]{
  --ground:#0a0a0a; --rail-bg:#0d0d0d;
  --card:#151515; --card-up:#1e1e1e;
  --r-card:20px; --r-sm:12px;
  --rule-bg:rgba(255,255,255,.07);
}
[data-theme="midnight"] .amb{
  background:radial-gradient(760px 420px at 8% -14%,rgba(180,255,60,.045),transparent 70%);
}

/* ── DIRECTION 2 · AURORA ─────────────────────────────────────────────────
   One very large soft field, no boundary anywhere. Cards are translucent so
   the field reads through them. The roundest and airiest of the three, and
   the section rules are dropped in favour of space.                        */
[data-theme="aurora"]{
  --ground:#050505; --rail-bg:transparent;
  --card:rgba(255,255,255,.042); --card-up:rgba(255,255,255,.075);
  --card-shadow:0 30px 80px -46px rgba(0,0,0,.95);
  --r-card:28px; --r-sm:16px;
  --hair:rgba(255,255,255,.06); --hair-soft:rgba(255,255,255,.035);
  --rule-bg:transparent;
  --fill-1:rgba(255,255,255,.07); --fill-2:rgba(255,255,255,.14);
}
[data-theme="aurora"] .amb{
  background:
    radial-gradient(1400px 860px at 44% -24%,rgba(180,255,60,.17),transparent 64%),
    radial-gradient(1000px 760px at 92% 22%,rgba(255,255,255,.05),transparent 68%),
    radial-gradient(1100px 900px at 2% 74%,rgba(180,255,60,.08),transparent 70%);
}
[data-theme="aurora"] .sect{padding:92px 0}
[data-theme="aurora"] .shead{margin-bottom:34px}

/* ── DIRECTION 3 · CARBON ─────────────────────────────────────────────────
   True black with a fine dot field, so the ground has material rather than
   being empty. Cards sit closer to the ground, carry a top highlight, and
   the rhythm is tighter: this is the "instrument" reading.                 */
[data-theme="carbon"]{
  --ground:#000000; --rail-bg:#070707;
  --card:#101010; --card-up:#181818;
  --card-shadow:inset 0 1px 0 rgba(255,255,255,.055);
  --r-card:16px; --r-sm:10px;
  --rule-bg:rgba(255,255,255,.05);
  --fill-1:rgba(255,255,255,.055); --fill-2:rgba(255,255,255,.11);
}
/* NO DOT GRID. A dot or line grid reads as AI-generated, so Carbon gets its
   material from grain on true black instead - the same call the design system
   already made for the site. (feedback_never_use_a_grid_background)          */
[data-theme="carbon"] .amb{
  background:radial-gradient(760px 460px at 14% -10%,rgba(180,255,60,.06),transparent 70%);
}
[data-theme="carbon"] .amb::after{
  content:"";position:absolute;inset:0;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="carbon"] .sect{padding:60px 0}
[data-theme="carbon"] .stat{padding:20px 22px 18px;min-height:158px;gap:20px}
[data-theme="carbon"] .bento{gap:12px}

/* ═══════════════════════════════════════════════════════════════════════ */

/* scrollbar-gutter: a tab short enough not to scroll lost the 17px Windows
   scrollbar and the whole layout jumped sideways between tabs (FBI-EDITS
   2026-09-19). The gutter is always reserved, so every tab sits identically. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{
  background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;min-height:100dvh;overflow-x:hidden;
  font-variant-numeric:tabular-nums;
  transition:background-color .8s var(--ease);
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}
::selection{background:rgba(180,255,60,.3);color:#fff}

/* the ambience field. Fixed and inert, and it has no edge in any direction. */
.amb{position:fixed;inset:0;z-index:0;pointer-events:none;
  transition:opacity .8s var(--ease)}

/* ── THEME SWITCHER (review tool, not part of the design) ─────────────────*/
.sw{position:fixed;top:14px;right:16px;z-index:60;display:flex;align-items:center;gap:6px;
  padding:6px;border-radius:999px;background:rgba(18,18,18,.86);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 10px 34px -14px rgba(0,0,0,1)}
.sw i{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);padding:0 8px 0 10px}
.sw button{padding:7px 14px;border-radius:999px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  transition:color .5s var(--ease),background-color .5s var(--ease)}
.sw button:hover{color:var(--ink-2)}
.sw button.on{color:#0d1400;background:var(--g)}

/* ═══════════════════════════════════════════════════════════════════════
   SIDEBAR  -  every row is a real item from the live d2-nav.php.
   No border-right in any direction: the rail is separated by value, not
   by a line. That seam was the most visible edge on the page.
   ═══════════════════════════════════════════════════════════════════════ */
.side{position:fixed;top:0;left:0;bottom:0;width:var(--rail);z-index:30;
  display:flex;flex-direction:column;background:var(--rail-bg);
  transition:background-color .8s var(--ease)}
.side-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:18px 10px 8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
.side-scroll::-webkit-scrollbar{width:8px}
.side-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px;
  border:2px solid transparent;background-clip:content-box}

.logo{display:flex;align-items:center;gap:10px;padding:4px 10px 22px}
.logo svg{width:20px;height:20px;fill:var(--g);flex:none}
.logo span{font-size:13px;font-weight:700}

.sh-lab{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);padding:0 10px 10px}
.side-sp{height:24px}

.acc{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--r-sm);
  transition:background-color .5s var(--ease)}
.acc:hover{background:var(--fill-1)}
.acc .av{position:relative;width:40px;height:40px;flex:none}
.acc .av img{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block}
.acc .av i{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;
  background:var(--g);box-shadow:0 0 0 2.5px var(--ground),0 0 14px rgba(180,255,60,.5)}
.acc .av.stopped i{background:#5c5c5c;box-shadow:0 0 0 2.5px var(--ground)}
.acc .t{min-width:0;flex:1}
.acc .n{display:block;font-size:13.5px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc .s{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  color:var(--g);margin-top:3px}
.acc .s.idle{color:var(--ink-3)}

.sub{display:flex;flex-direction:column;gap:1px;margin:3px 0 4px 30px;
  padding-left:13px;border-left:1px solid var(--hair)}
.sub a{position:relative;display:flex;align-items:center;gap:11px;padding:8px 10px;
  border-radius:var(--r-sm);font-size:13px;font-weight:500;color:var(--ink-2);
  transition:color .5s var(--ease),background-color .5s var(--ease)}
.sub a svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.sub a:hover{color:var(--ink);background:var(--fill-1)}
.sub a.on{color:var(--g);background:var(--g-soft)}
.sub a.on::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;
  border-radius:3px;background:var(--g)}

/* -- THE UPSELL. The one saturated object in the rail. --------------------*/
.upsell{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;
  border-radius:var(--r-card);background:var(--g);color:#0d1400;
  transition:transform .5s var(--ease),filter .5s var(--ease)}
.upsell:hover{filter:brightness(1.08);transform:scale(1.015)}
.upsell:active{transform:scale(.985)}
.upsell .ic{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(13,20,0,.16);font-size:17px;line-height:1;
  transition:transform .6s var(--ease)}
.upsell:hover .ic{transform:rotate(90deg)}
.upsell .t{min-width:0;flex:1}
.upsell .n{display:block;font-size:13px;font-weight:700}
.upsell .p{display:block;font-family:var(--mono);font-size:10.5px;margin-top:2px;opacity:.72}
.upsell .go{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;opacity:.55;
  transition:transform .5s var(--ease),opacity .5s var(--ease)}
.upsell:hover .go{transform:translate(2px,-2px);opacity:1}
.upsell-m{display:none}

.mod{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:var(--r-sm);
  font-size:13.5px;font-weight:500;color:var(--ink-2);
  transition:color .5s var(--ease),background-color .5s var(--ease)}
.mod svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.mod:hover{color:var(--ink);background:var(--fill-1)}
/* the Modules rows need an active state too: Engagement is a page */
.mod.on{color:var(--g);background:var(--g-soft)}
.mod .tagx{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--g);background:var(--g-soft);border-radius:99px;
  padding:3px 8px}

.side-foot{flex:none;padding:12px}
.side-foot .row{display:flex;align-items:center;gap:9px;padding:0 4px 11px;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-3)}
.side-foot .row a{transition:color .45s var(--ease)}
.side-foot .row a:hover{color:var(--ink)}
.side-foot .row span{opacity:.35}
.badge{display:flex;align-items:center;gap:11px;padding:8px;border-radius:var(--r-sm);
  transition:background-color .5s var(--ease)}
.badge:hover{background:var(--fill-1)}
.badge img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none}
.badge .bn{display:block;font-size:13px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge .bp{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--g);margin-top:2px}

/* -- MOBILE TAB BAR -------------------------------------------------------*/
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:35;
  padding:9px 10px calc(9px + env(safe-area-inset-bottom));
  background:rgba(9,9,9,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.tabbar .in{display:flex;align-items:center;justify-content:space-around;gap:4px}
/* C: the active tab. The class was already set, only the rule was missing. */
.tabbar a.on{color:var(--g)}
.tabbar a.on svg{stroke:var(--g)}
.tabbar a.on b{color:var(--g)}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:5px;padding:4px 8px;
  color:var(--ink-3);transition:color .45s var(--ease)}
.tabbar a svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.tabbar a b{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:400}
.tabbar a.home span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--g)}
.tabbar a.home svg{width:17px;height:17px;fill:#0d1400;stroke:none}

/* ═══════════════════════════════════════════════════════════════════════
   PAGE. Edge to edge: no panel, no gutter, no seam.
   ═══════════════════════════════════════════════════════════════════════ */
.page{position:relative;z-index:1;margin-left:var(--rail)}
.bound{width:100%;max-width:1180px;margin:0 auto;padding:0 44px}
.sect{padding:76px 0;transition:padding .6s var(--ease)}
.sect.tight{padding:0 0 76px}

.eyeb{display:inline-flex;align-items:center;gap:8px;border-radius:999px;
  padding:5px 13px 5px 11px;background:var(--fill-1);
  font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2)}
.eyeb .dot{width:6px;height:6px;border-radius:50%;background:var(--g);flex:none;
  box-shadow:0 0 14px rgba(180,255,60,.5)}
.eyeb .dot.off{background:#5c5c5c;box-shadow:none}
.eyeb .dot.live{animation:breathe 2.8s var(--ease) infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.45}}

/* -- IDENTITY / HERO ------------------------------------------------------*/
.hero{position:relative;padding:72px 0 0}
.hero .grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:flex-end}
.hero .pic{width:170px;height:170px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 10px 40px -10px rgba(0,0,0,.95)}
.hero .who{min-width:0}
.hero h1{font-family:var(--display);font-weight:400;
  font-size:clamp(38px,6.2vw,82px);line-height:.96;letter-spacing:.005em;
  text-transform:uppercase;margin:15px 0 0;overflow-wrap:anywhere}
.hero .meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px;
  font-size:14px;color:var(--ink-2)}
.hero .meta b{color:var(--ink);font-weight:700}
.hero .meta .hdl{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.hero .meta .sep{width:4px;height:4px;border-radius:50%;background:var(--ink-3);opacity:.7}
.hero .act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:28px}

/* -- PILL CTA, nested trailing icon ---------------------------------------*/
.cta{position:relative;display:inline-flex;align-items:center;gap:13px;
  border-radius:999px;padding:9px 9px 9px 22px;background:var(--fill-1);
  font-size:13.5px;font-weight:700;
  transition:transform .5s var(--ease),background-color .5s var(--ease),color .5s var(--ease)}
.cta:hover{background:var(--fill-2)}
.cta:active{transform:scale(.978)}
.cta .kn{width:31px;height:31px;border-radius:999px;background:var(--fill-2);flex:none;
  display:grid;place-items:center;
  transition:transform .5s var(--ease),background-color .5s var(--ease)}
.cta .kn svg{width:14px;height:14px}
.cta:hover .kn{transform:translate(3px,-1px) scale(1.06)}
.cta.solid{background:var(--g);color:#0d1400}
.cta.solid:hover{filter:brightness(1.08);background:var(--g)}
.cta.solid .kn{background:rgba(13,20,0,.16)}
.cta.quiet{background:transparent;color:var(--ink-2);padding:9px 0;font-weight:500;gap:8px}
.cta.quiet:hover{background:transparent;color:var(--ink)}
/* the arrow belongs to the label, not to a box of its own */
.cta.quiet .kn{width:auto;height:auto;background:transparent;border-radius:0}
.cta.quiet:hover .kn{transform:translate(3px,-1px)}
.cta.danger:hover{background:var(--fill-2);color:#ff9bbd}

/* -- SECTION HEAD · the fanbaseintel editorial signature ------------------
   Folio + kicker + rule. AURORA drops the rule (--rule-op:0) and leans on
   space instead, which is the point of that direction.                     */
.srule{height:1px;background:var(--rule-bg);margin-bottom:26px;
  transition:background-color .6s var(--ease)}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;
  margin-bottom:26px}
.shead .sl{display:flex;align-items:flex-start;gap:20px;min-width:0}
.folio{font-family:var(--display);font-weight:400;font-size:52px;line-height:.96;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);flex:none;margin-top:2px;
  letter-spacing:.005em}
.kick{display:block;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-2)}
.shead h2{font-family:var(--display);font-weight:400;
  font-size:clamp(28px,3.4vw,44px);line-height:.96;letter-spacing:.005em;
  text-transform:uppercase;margin-top:13px}
.shead p{font-size:14px;line-height:1.55;color:var(--ink-3);margin-top:11px;max-width:50ch}

/* -- RANGE SEGMENT --------------------------------------------------------*/
.rng{position:relative;display:inline-flex;padding:4px;border-radius:999px;
  background:var(--fill-1);flex:none}
.rng .ind{position:absolute;top:4px;left:4px;height:calc(100% - 8px);border-radius:999px;
  background:var(--fill-2);transition:transform .6s var(--ease),width .6s var(--ease)}
.rng button{position:relative;z-index:1;padding:7px 17px;border-radius:999px;
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--ink-3);
  transition:color .5s var(--ease)}
.rng button:hover{color:var(--ink-2)}
.rng button.on{color:var(--ink)}

/* -- SECTION SWITCHER -----------------------------------------------------
   Targeting / Research / Report, MOBILE ONLY. Derek 2026-09-22: the sections
   "should have that filter menu that you already setup" - so this is .rng
   above, same pill, same fills, same mono, same ease. Nothing new invented.

   It exists because the mobile tabbar has no room for all three: it carries
   Accounts / Targeting / F / Engage / Profile, Report IS the F key, and
   Research was not reachable on a phone at all. Above 700px the sidebar owns
   these rows (v2-shell.js), so showing it there would be the same menu twice.

   Unlike .rng this has NO sliding .ind - these are links and each one is a
   page load, so there is nothing to slide between. The active item carries
   the indicator's fill directly, which is what .ind looks like at rest. */
.secnav{display:none}
@media(max-width:700px){
  /* Values are .rng's, verbatim. The skin (v2-sc.css SQUARE CONTROLS) and the
     theme (v2-editorial.css outlined controls) both now list .secnav next to
     .rng, so a retune of one retunes the other. That listing is the fix for
     2026-09-22, when .rng went outlined and square and this kept a filled
     pill, because each place styled .rng by name and not this. */
  .secnav{display:flex;padding:4px;border-radius:999px;background:var(--fill-1);
    margin:14px 0 0;gap:0}
  .secnav a{flex:1;display:flex;align-items:center;justify-content:center;
    min-height:40px;padding:0 10px;border-radius:999px;border:1px solid transparent;
    font-family:var(--mono);font-size:11px;letter-spacing:.05em;
    color:var(--ink-3);text-decoration:none;
    transition:color .5s var(--ease),background .5s var(--ease),border-color .5s var(--ease)}
  .secnav a.on{background:var(--fill-2);color:var(--ink)}
}

/* -- THE BENTO ------------------------------------------------------------*/
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.b-chart{grid-column:span 8;grid-row:span 2}
.b-fans,.b-fbr,.b-nlk,.b-lbr,.b-vws{grid-column:span 4}
.b-slk,.b-plk{grid-column:span 6}

/* -- CARD. No border in any direction. Value only. ------------------------*/
.card{background:var(--card);border-radius:var(--r-card);height:100%;overflow:hidden;
  box-shadow:var(--card-shadow);
  transition:background-color .5s var(--ease),border-radius .6s var(--ease)}
.card:hover{background:var(--card-up)}
.card.flat:hover{background:var(--card)}

.stat{display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  padding:24px 26px 22px;height:100%;min-height:172px;position:relative}
.stat .lab{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.stat .lab .sw2{width:7px;height:7px;border-radius:2px;flex:none}
.stat .num{font-family:var(--display);font-weight:400;
  font-size:clamp(36px,4.3vw,54px);letter-spacing:.01em;line-height:1}
.stat .num.big{font-size:clamp(52px,6.4vw,80px)}
.stat .cap{font-size:12.5px;color:var(--ink-3);margin-top:8px}
.stat .cap b{color:var(--ink-2);font-weight:500}
.stat .foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.stat.lead .num{color:var(--g)}
.stat.ratio{justify-content:flex-start;gap:0}
.stat.ratio .dial{margin:auto 0}

.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px 4px 8px;
  background:var(--fill-1);font-family:var(--mono);font-size:10.5px;color:var(--ink-2)}
.chip svg{width:11px;height:11px;flex:none}
.chip.up{color:var(--g);background:var(--g-soft)}

.spark{width:100%;height:42px;overflow:visible}
.spark path.ln{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.spark path.ar{stroke:none}

.dial{display:flex;align-items:center;gap:18px}
.dial .ring{width:72px;height:72px;flex:none;position:relative}
.dial .ring svg{transform:rotate(-90deg)}
.dial .ring circle{fill:none;stroke-width:5;stroke-linecap:round}
.dial .ring .bg{stroke:rgba(255,255,255,.1)}
.dial .ring .fg{transition:stroke-dashoffset 1.6s var(--ease)}
.dial .rd{min-width:0}
.dial .rd .num{font-size:clamp(26px,3vw,38px)}

/* -- CHART CARD -----------------------------------------------------------*/
.chart{display:flex;flex-direction:column;height:100%;padding:24px 26px 20px}
.chart .top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.chart .hl{font-family:var(--display);font-weight:400;
  font-size:clamp(38px,4.4vw,56px);letter-spacing:.01em;line-height:1;margin-top:12px}
.chart .hlsub{font-size:13px;color:var(--ink-3);margin-top:9px}
.chart .hlsub b{color:var(--ink);font-weight:700}
.cwrap{position:relative;margin-top:24px;flex:1;min-height:230px}
/* H: the pill says Hover on a mouse, Tap on a touch screen */
.nb-tap{display:none}
.cwrap svg.main{width:100%;height:100%;min-height:230px}
.cwrap svg.main .gl{stroke:rgba(255,255,255,.055);stroke-width:1}
.cwrap svg.main .gapline{stroke:rgba(255,255,255,.12);stroke-width:1;stroke-dasharray:2 5}
.cwrap svg.main path.ser{fill:none;stroke-linecap:round;stroke-linejoin:round}
.cwrap svg.main .xl{font-family:var(--mono);font-size:9.5px;fill:var(--ink-3);letter-spacing:.05em}
.cwrap .hair{position:absolute;top:0;bottom:26px;width:1px;background:rgba(255,255,255,.2);
  opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.tip{position:absolute;pointer-events:none;opacity:0;transform:translateY(6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
  border-radius:var(--r-sm);padding:12px 14px;min-width:172px;
  background:#282828;box-shadow:0 16px 40px -14px rgba(0,0,0,1);z-index:3}
.tip.on{opacity:1;transform:translateY(0)}
.tip .d{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px}
.tip .r{display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:12.5px;
  padding:2.5px 0;color:var(--ink-2)}
.tip .r .nm{display:flex;align-items:center;gap:7px}
.tip .r .sw2{width:7px;height:7px;border-radius:2px;flex:none}
.tip .r b{color:var(--ink);font-weight:700}
.tip .gapmsg{font-size:12px;color:var(--ink-3);line-height:1.45}

/* -- SERIES TOGGLES · one line, never two --------------------------------*/
.tgl{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--hair-soft);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tgl::-webkit-scrollbar{display:none}
.tgl .cap{flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);margin-right:4px;white-space:nowrap}
.tg{flex:none;display:inline-flex;align-items:center;gap:7px;border-radius:999px;
  padding:6px 12px 6px 9px;background:var(--fill-1);font-size:12px;font-weight:500;
  color:var(--ink-3);white-space:nowrap;
  transition:color .5s var(--ease),background-color .5s var(--ease),transform .5s var(--ease)}
.tg .sw2{width:8px;height:8px;border-radius:2px;flex:none;opacity:.35;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.tg:hover{color:var(--ink-2);background:var(--fill-2)}
.tg:active{transform:scale(.97)}
.tg.on{color:var(--ink);background:var(--fill-2)}
.tg.on .sw2{opacity:1;transform:scale(1.1)}

/* -- TABLE ----------------------------------------------------------------*/
.tbl{padding:6px 8px 8px}
table{width:100%;border-collapse:collapse}
th,td{text-align:right;padding:12px 16px;font-size:13px;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:400;color:var(--ink-3);padding-top:16px;padding-bottom:12px}
tbody tr{transition:background-color .4s var(--ease)}
tbody tr:hover{background:var(--fill-1)}
tbody td{color:var(--ink-2);border-top:1px solid var(--hair-soft)}
tbody td:first-child{color:var(--ink);font-family:var(--mono);font-size:12px}
tbody td b{color:var(--g);font-weight:700}
tbody tr.gap td,tbody tr.gap td:first-child{color:var(--ink-3)}
tr.tot td{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  color:var(--ink);font-weight:700;background:var(--fill-1)}
tr.tot td:first-child{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:400;color:var(--ink-3)}
tr.tot td b{color:var(--g)}
.more{display:flex;justify-content:center;padding:16px 0 8px}
.tnote{display:flex;align-items:center;gap:9px;padding:16px 22px 4px;font-size:12px;color:var(--ink-3)}
.tnote .dash{font-family:var(--mono);color:var(--ink-2)}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.rv{opacity:0;transform:translateY(26px);filter:blur(5px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),filter .55s var(--ease);
  transition-delay:var(--d,0ms);will-change:transform,opacity}
.rv.in{opacity:1;transform:translateY(0);filter:blur(0);will-change:auto}

.foot{padding:32px 0 60px;display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;border-top:1px solid var(--hair-soft);margin-top:22px}
.foot p{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3)}

/* == RESPONSIVE ===========================================================*/
@media(max-width:1280px){
  .b-chart{grid-column:span 12;grid-row:auto}
  .b-fans,.b-fbr,.b-nlk,.b-lbr,.b-vws,.b-slk,.b-plk{grid-column:span 6}
  .bound{padding:0 30px}
}
@media(max-width:1024px){
  :root{--rail:224px}
  .bound{padding:0 22px}
  .hero .pic{width:134px;height:134px}
}
@media(max-width:700px){
  .side{display:none}
  .tabbar{display:block}
  .page{margin-left:0;padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .bound{padding:0 16px}
  /* B: no hairline above a section head on a phone */
  .srule{display:none}
  /* K: the tab strip was flex:none, so it pushed past the screen edge */
  .tabs{flex:0 1 auto;min-width:0}
  .sect,[data-theme] .sect{padding:48px 0}
  .sect.tight{padding:0 0 48px}
  .hero{padding:24px 0 0}
  .hero .grid{grid-template-columns:1fr;gap:16px;align-items:flex-start}
  .hero .pic{width:104px;height:104px}
  .hero .meta{gap:4px 12px}
  .hero .meta .sep{display:none}
  .upsell-m{display:flex;margin-top:26px;padding:14px 16px}
  .upsell-m .ic{width:38px;height:38px;font-size:19px}
  .upsell-m .n{font-size:14px}
  .bento,[data-theme] .bento{gap:16px}
  .b-chart,.b-fans,.b-fbr,.b-nlk,.b-lbr,.b-vws,.b-slk,.b-plk{grid-column:span 12}
  .shead,[data-theme] .shead{margin-bottom:24px}
  .folio{font-size:40px}
  .chart{padding:16px}
  .nb-hover{display:none} .nb-tap{display:inline}
  .cwrap{margin-top:12px}
  .stat,[data-theme] .stat{padding:16px;min-height:0;gap:12px}
  .tbl{padding:4px 0 8px}
  th,td{padding:12px;font-size:12px}
  .dial{gap:12px}
  .dial .ring{width:60px;height:60px}
  .foot{padding:32px 0}
  .sw{top:auto;bottom:86px;right:10px;left:10px;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none;filter:none}
}
.sw .sw-gap{margin-left:6px;padding-left:14px;border-left:1px solid rgba(255,255,255,.14)}