/**
 * SHELL CSS SYNC WARNING - THREE COPIES OF THIS STYLESHEET EXIST.
 *   This copy (paper-trading-shell.css) is loaded by: chart.html ONLY.
 *   Siblings:
 *     - paper-trading-shell.20260723e.css  (options, portfolio, portfolio-hub, research, news-desk, coach-hub) [canonical/newest]
 *     - paper-trading-shell.20260723c.css  (shared.html, faq.html, all 40 stock/*.html)
 *   ANY change to SHARED chrome must be applied to all three, or it silently misses
 *   those pages. Known INTENTIONAL per-copy deltas (do not "fix" by blind-merging):
 *     - this copy alone has the "More stays clickable when active" rule + broader is-preview overflow selectors
 *     - .20260723e alone has the 2026-07-30 coach in-flow positioning (is-preview gated)
 *     - .20260723c alone has the prod coach-hide block (html:not(.is-preview) [data-coach-header])
 *   Full physical consolidation is tracked as audit finding #26 (needs before/after verification).
 *
 * Shared chrome for Paper Trading: Hub, Chart (/game?mode=invest), Portfolio.
 * One header height, one stats strip shape — switching tabs should feel seamless.
 */

/* iOS Safari: kill native search chrome, inset hairlines, and icon separators. */
.symbol-input,
#symbolSearch,
.pt-search,
input.symbol-input,
input.pt-search {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
input[type="search"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
}

.pt-appbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 88px;
  min-height: 88px;
  max-height: 88px;
  padding: 0 16px;
  /* Flex + order: Switch + logo + Hub/Chart/Portfolio cluster left;
     search/stats mid; auth (avatar + Report + Sign out + settings) right. */
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border-bottom: 1px solid #e4e8ee;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Chart search dropdown must paint below the 56px bar — not clipped */
body.invest-mode #stickyHud {
  overflow: visible !important;
  z-index: 200 !important;
}

/* Chart page uses #stickyHud — same flex shell as .pt-appbar (desktop only).
   Never pin 88px/nowrap on phones — that clips the wrapped search row and the
   header border-bottom cuts through #symbolSearch (~390px iPhone Safari). */
@media (min-width: 901px) {
  body.invest-mode #stickyHud {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
    padding: 0 16px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e4e8ee !important;
  }
}

body.invest-mode #stickyHud .pt-appbar-center,
body.invest-mode #stickyHud .header-center {
  position: relative;
  z-index: 210;
  overflow: visible;
}

.pt-appbar-left {
  order: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
}

.pt-nav-slot {
  order: 2;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 6;
  flex: 0 0 auto;
}

.pt-appbar-center {
  order: 3;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}
/* Coach mount: never grow into the leftover gap (that parked the pill on Go Pro). */
.pt-appbar-center[data-coach-header],
#coachHeaderSlot {
  flex: 0 0 auto;
  justify-content: flex-start;
  padding: 0 0 0 8px;
}

.pt-stats-slot {
  order: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 1 auto;
  max-width: 320px;
  min-width: 0;
  overflow: hidden;
  margin-left: auto !important; /* pin money + auth far right; Coach stays after the nav */
}

.pt-auth-slot {
  order: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
  box-sizing: border-box;
  margin-left: auto !important; /* Sign out far right when stats absent */
}
.pt-stats-slot + .pt-auth-slot {
  margin-left: 0 !important; /* stats already absorbed free space */
}
/* Chart invest: hide Portfolio / Buying power from header (ticket has BP).
   Stats leave flex when display:none — force auth margin-left back on. */
body.invest-mode #stickyHud .pt-stats-slot {
  display: none !important;
}
body.invest-mode #stickyHud .pt-auth-slot,
body.invest-mode #stickyHud .header-right {
  margin-left: auto !important;
}

/* Auth column — room for avatar + Report + Sign out + settings */
body.invest-mode .pt-auth-slot,
body.paper-trading .pt-auth-slot {
  min-width: 0;
  max-width: none;
  width: auto;
  padding-left: 12px;
  padding-right: 2px;
  border-left: 1px solid #e4e8ee;
}

body.invest-mode #stickyHud .pt-appbar-left,
body.invest-mode #stickyHud .header-left { order: 1; flex: 0 0 auto; }
body.invest-mode #stickyHud .pt-nav-slot { order: 2; flex: 0 0 auto; }
body.invest-mode #stickyHud .pt-appbar-center:not([data-coach-header]),
body.invest-mode #stickyHud .header-center:not([data-coach-header]) { order: 3; flex: 1 1 auto; min-width: 0; }
body.invest-mode #stickyHud [data-coach-header],
body.invest-mode #stickyHud #coachHeaderSlot { order: 3; flex: 0 0 auto; min-width: 0; }
body.invest-mode #stickyHud .pt-stats-slot { order: 4; flex: 0 1 auto; max-width: 320px; }
body.invest-mode #stickyHud .pt-auth-slot,
body.invest-mode #stickyHud .header-right { order: 5; flex: 0 0 auto; }

.pt-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--jag-ink, #1a1f29);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.pt-brand-logo {
  height: 56px !important;
  width: auto !important;
  display: block;
  max-height: 56px;
}

.pt-brand-mark {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: #117a37;
  flex-shrink: 0;
}

.pt-back {
  font-size: 12px;
  font-weight: 600;
  color: #6b7480;
  text-decoration: none;
  border: 1px solid #d6dce4;
  border-radius: 6px;
  padding: 5px 11px;
  white-space: nowrap;
  line-height: 1.2;
}

.pt-back:hover { color: var(--jag-ink, #1a1f29); border-color: var(--jag-green, var(--jag-green)); }

.pt-view-nav {
  display: inline-flex;
  border: 1px solid #d6dce4;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  height: 34px;
}

.pt-view-tab {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  height: 34px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: var(--jag-green, var(--jag-green));
  background: #fff;
  border: none;
  border-right: 1px solid #d6dce4;
  font-family: inherit;
  white-space: nowrap;
  line-height: 1;
  box-sizing: border-box;
}

/* Keep every tab (incl. Research / Options) the same brand green + weight — visited/
   unvisited defaults and nested PRO chips must not recolor the label. */
.pt-view-tab:link,
.pt-view-tab:visited,
.pt-view-tab:hover,
.pt-view-tab:active {
  color: var(--jag-green, var(--jag-green));
  font-weight: 600;
}

.pt-view-tab:last-child { border-right: none; }
/* ══ GO PRO ════════════════════════════════════════════════════════════════
   Four separate things were making this "not a button I want to click":

   1. #046a49 is a muddy rust that appears nowhere else in the brand. Against the
      green site and the orange Coach Jag pill it read as neither - closer to a
      disabled state than a call to action.
   2. border-radius: 0 6px 6px 0 - square on the left, round on the right. It was
      being drawn as the LAST SEGMENT of the nav tab group, so it inherited that
      group's shape while trying to be a standalone button.
   3. border-left plus margin-left: 6px produced the visible gap-and-divider
      between Options and it, which is the seam the owner spotted.
   4. :hover went DARKER than the base, which reads as pressed, not hoverable.

   It is a standalone pill now, in the same green as every other upgrade surface
   on the site (the portfolio rail card, the Pro lock on the chart), so "upgrade"
   looks like one consistent idea wherever it appears. Coach Jag keeps orange, so
   the two adjacent pills stay distinguishable. */
.pt-view-tab.pt-gopro {
  background: linear-gradient(180deg, #0a7a55 0%, #046a49 100%) !important;
  color: #fff !important;
  font-weight: 800 !important;
  margin-left: 10px;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 7px 18px !important;
  letter-spacing: .01em;
  box-shadow: 0 6px 16px -8px rgba(4, 106, 73, .6);
  transition: background .15s ease, box-shadow .15s ease, transform .12s ease;
}
.pt-view-tab.pt-gopro:link,
.pt-view-tab.pt-gopro:visited { color: #fff !important; }
.pt-view-tab.pt-gopro:hover {
  color: #fff !important;
  background: linear-gradient(180deg, #0b8a5f 0%, #057753 100%) !important;
  box-shadow: 0 8px 20px -8px rgba(4, 106, 73, .7);
}
.pt-view-tab.pt-gopro:active { transform: translateY(1px); }

/* Never upsell a Pro user: hide "Go Pro" once entitlement.js stamps html.is-pro. (base copy for chart.html) */
html.is-pro .pt-view-tab.pt-gopro { display: none !important; }
html.is-pro .pt-nav-pro,
html.is-pro .pt-tab-pro,
html.is-pro .jm-link .pro,
html.is-pro .jm-gopro,
html.is-pro .research-unlock-hero,
html.is-pro #newsUnlockHero,
html.is-pro .ndt-cta,
html.is-pro .newsb-pro { display: none !important; }
html.is-pro .newsb-intel { display: flex !important; }

.pt-view-tab.active {
  background: var(--jag-green-soft, #E8F7EF);
  color: var(--jag-green-deep, #00563D);
  pointer-events: none;
}
/* More stays clickable even when marked active (e.g. News desk). */
.pt-more-btn.pt-view-tab.active,
button.pt-more-btn.active {
  pointer-events: auto;
  cursor: pointer;
}
.pt-view-tab.active:link,
.pt-view-tab.active:visited,
.pt-view-tab.active:hover {
  color: var(--jag-green-deep, #00563D);
}

.pt-view-tab:not(.active):hover { background: var(--jag-card-2, #f7f9fb); }

/* Preview-only rooms (Research / Options primary tabs + News under More).
   Default HIDDEN; boot script adds html.is-preview on non-production hosts. */
.pt-feature-tab { display: none !important; }
html.is-preview .pt-feature-tab { display: inline-flex !important; }
/* Signed-OUT visitors don't need the in-app nav (it just bounces to a login wall). Hide it
   for logged-out; logged-in users (html.is-signed-in, set pre-paint) keep it. Shared chrome:
   also in paper-trading-shell.20260723c.css and paper-trading-shell.20260723e.css. */
html:not(.is-signed-in) .pt-view-nav .pt-view-tab { display: none !important; }
html:not(.is-signed-in) .pt-nav-slot { pointer-events: none; }

/* PUBLIC app-bar pages (plans, leaderboard, shared) are reached logged-OUT, and the rule above
   strips the in-app tabs — leaving a guest with NO nav. Provide a guest-nav fallback that shows
   ONLY when logged out (and re-enable clicks; the slot is pointer-events:none for guests). Same
   app-bar, so the site stays consistent. Owner 2026-08-09: no page may render without a nav. */
.pt-guest-nav { display: none; order: 2; }
html:not(.is-signed-in) .pt-view-nav .pt-view-tab.pt-gopro { display: none !important; }
html:not(.is-signed-in) .pt-guest-nav {
  display: flex; align-items: center; gap: 22px; pointer-events: auto;
  /* 2026-08-16 — the guest nav is order:2 with flex:0 0 auto, so it clamped to the
     logo while .pt-appbar-center (order:3, flex:1 1 auto) ate the whole middle and
     shoved the auth buttons to the far right. Reads as a left-hugging cluster with a
     hole in it, unlike every other site. Taking the middle slot and centring inside
     it puts the links where people look for them. */
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}
html.is-signed-in .pt-guest-nav { display: none !important; }
.pt-guest-nav a {
  color: #334155; text-decoration: none; font-weight: 600; font-size: 15px;
  white-space: nowrap; padding: 6px 2px; line-height: 1;
}
.pt-guest-nav a:hover { color: var(--jag-green, var(--jag-green)); }
.pt-guest-nav a[aria-current="page"] { color: var(--jag-green, var(--jag-green)); font-weight: 800; }
/* Same explore links as the homepage. Phones: Menu (auth CTAs stay in the bar). */
.pt-guest-menu { display: none; order: 2; position: relative; flex: 0 0 auto; }
.pt-guest-menu > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid #d6dce4; background: #fff; color: #0f3d2e;
  font-weight: 800; font-size: 13px; font-family: inherit;
  border-radius: 9px; padding: 0 10px; height: 36px;
}
.pt-guest-menu > summary::-webkit-details-marker { display: none; }
.pt-guest-menu-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 220px; padding: 8px;
  background: #fff; border: 1px solid #e4e8ee; border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .18); z-index: 10050;
}
.pt-guest-menu-panel a {
  display: block; padding: 12px 14px; border-radius: 9px;
  text-decoration: none; font-size: 15px; font-weight: 700; color: #0f172a;
}
.pt-guest-menu-panel a:hover { background: #f0f5f2; color: var(--jag-green, var(--jag-green)); }
html.is-signed-in .pt-guest-menu { display: none !important; }
@media (max-width: 720px) {
  html:not(.is-signed-in) .pt-guest-nav { display: none !important; }
  html:not(.is-signed-in) .pt-guest-menu { display: block; pointer-events: auto; }
  /* PIN IT TO THE VIEWPORT, NOT TO THE BUTTON. The panel is position:absolute with
     right:0 and min-width:220px, anchored to a flex item carrying order:2 - so it is
     only safely on-screen if that button happens to sit far enough from the left edge.
     On a 375px phone it can extend past it, which is what was reported. Anchoring both
     edges to the menu's positioning context with a viewport-relative width removes the
     dependency on where the button lands: it cannot overflow either side by
     construction, at any width. (owner 2026-09-02) */
  .pt-guest-menu { position: static; }
  .pt-guest-menu-panel {
    left: 12px; right: 12px; min-width: 0; width: auto;
    max-width: calc(100vw - 24px);
  }
}
/* Coach Jag is a signed-in feature. Never show its pill on a logged-OUT/external page (owner
   2026-08-09: "does not make any sense for the shit to show on external pages"). coach-jag.js
   also hard-gates boot() on auth; this is belt-and-suspenders against any flash before JS runs. */
html:not(.is-signed-in) [data-coach-header] { display: none !important; }

/* Belt: html.is-signed-in is set from the token pre-paint. Guest CTAs must
   never share the bar with Coach Jag on a logged-in phone. */
html.is-signed-in .sim-login-btn,
html.is-signed-in .sim-signup-btn-pill { display: none !important; }

/* More dropdown — preview only (News; Research/Options are primary tabs). */
.pt-more {
  position: relative;
  display: none !important;
  align-items: stretch;
  flex: 0 0 auto;
  z-index: 5;
}
html.is-preview .pt-more.pt-feature-tab { display: inline-flex !important; }
.pt-more-btn {
  border-right: none;
  cursor: pointer;
  font-family: inherit;
  pointer-events: auto;
}
.pt-more-btn::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: 1px;
  opacity: 0.7;
}
.pt-more.is-open .pt-more-btn {
  background: var(--jag-green-soft, #E8F7EF);
  color: var(--jag-green-deep, #00563D);
}
.pt-more-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 168px;
  background: #fff;
  border: 1px solid #d6dce4;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  padding: 6px;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pt-more-menu[hidden] { display: none !important; }
.pt-more-menu a,
.pt-more-menu span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--jag-green, var(--jag-green));
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
}
.pt-more-menu a:hover { background: var(--jag-card-2, #f7f9fb); }
.pt-more-menu span.on,
.pt-more-menu a[aria-current="page"] {
  background: var(--jag-green-soft, #E8F7EF);
  color: var(--jag-green-deep, #00563D);
  pointer-events: none;
}

/* Preview: More menu must not clip under overflow (nav scroll + 34px pill).
   JS also fixed-positions the open menu; CSS is the safety net. */
html.is-preview .pt-nav-slot,
html.is-preview .pt-nav-slot .pt-view-nav,
html.is-preview .pt-view-nav,
html.is-preview .pt-appbar,
html.is-preview #stickyHud,
html.is-preview body.invest-mode #stickyHud .pt-nav-slot,
html.is-preview body.invest-mode #stickyHud .pt-view-nav {
  overflow: visible !important;
}
html.is-preview .pt-more.is-open {
  z-index: 10040;
}
html.is-preview .pt-nav-slot {
  max-width: min(78vw, 760px);
  position: relative;
  z-index: 40;
}

/* Coach toggle — preview only. Never show on jagsim.com / www. */
#coachSlot,
.coach-toggle-row,
#coachPanel { display: none !important; }
html.is-preview #coachSlot { display: block !important; }
html.is-preview .coach-toggle-row { display: flex !important; }
html.is-preview #coachPanel.is-open { display: block !important; }

/* Header Coach Jag + soft Pro cards. Coach is live — never hard-kill the orange pill. */
html:not(.is-preview) .jag-pro-upsell,
html:not(.is-preview) #hubProUpsell,
html:not(.is-preview) #holdingsProUpsell {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Canonical PRO chip on Research / Options tabs — one style site-wide. Soft
   green fill + green ink (matches hub pills / design system; not solid white-on-green
   and not outline-only). */
.pt-nav-pro,
.pt-tab-pro {
  display: inline-block;
  margin-left: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.4;
  padding: 1px 5px;
  border-radius: 4px;
  /* Copper PRO chip: paid language. Green is Trade / Buy. */
  background: #fbeee7;
  color: #046a49;
  border: 1px solid #ecd0bb;
  vertical-align: middle;
  box-sizing: border-box;
}

/* Status / meta row under the app bar (Hub + Holdings): every chip is the same
   pill — same size, weight, radius, separator style. No plain-text mix-ins. */
.disclaim-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.disclaim-row > .pill,
.disclaim-row > .market-status-pill,
.disclaim-row > .disclaim-note,
.disclaim-row > .mkt-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7480;
  background: var(--jag-card-2, #f7f9fb);
  border: 1px solid #e3e8ee;
  padding: 4px 9px;
  border-radius: 4px;
  line-height: 1.35;
  box-sizing: border-box;
  margin: 0;
}
.disclaim-row .market-dot,
.disclaim-row .mkt-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
@media (max-width: 640px) {
  /* Each pill is content-width, so on a 375px phone the two static/evergreen ones
     ("Live quotes...", "Paper trading...") don't fit next to anything and each
     claims a full-width row of its own — three stacked boxes before any real number
     (owner 2026-08-14: "Performance Summary looks bad for mobile"). Keep only the
     ACTUAL signal (live market-open/closed status); the boilerplate reassurance
     copy doesn't need repeating on every visit. */
  .disclaim-row > .pill,
  .disclaim-row > .disclaim-note {
    display: none;
  }
}

/* Three equal stat pills — Chart + Portfolio use identical markup.
   Must fit the stats column (≤320px) so they never cover Hub/Chart/Portfolio. */
.pt-stats {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  max-width: 320px;
  height: 40px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-sizing: border-box;
  flex-shrink: 1;
  min-width: 0;
}

.pt-stat-pill {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  padding: 5px 8px;
  background: var(--jag-card-2, #f7f9fb);
  border: 1px solid #e3e8ee;
  border-radius: 6px;
  flex-shrink: 1;
}

.pt-stat-pill .pt-stat-k {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7480;
  line-height: 1;
}

.pt-stat-pill .pt-stat-v {
  font-size: 11px;
  font-weight: 700;
  color: var(--jag-ink, #1a1f29);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pt-stat-pill--pnl.pt-stat-pill--up .pt-stat-v { color: #117a37; }
.pt-stat-pill--pnl.pt-stat-pill--down .pt-stat-v { color: #b4232a; }
.pt-stat-pill .pt-stat-v.pos { color: #117a37; }
.pt-stat-pill .pt-stat-v.neg { color: #b4232a; }

/* Legacy single-strip stats (hub etc.) */
.hud-pnl-equity.pt-stats-compact {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  flex-shrink: 0;
  min-width: 0;
  box-sizing: border-box;
}

.pt-stat,
.hud-pnl-equity.pt-stats-compact .hud-stat-line {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  align-items: flex-start;
  white-space: nowrap;
  min-width: 0;
}

.pt-stat-k,
.hud-pnl-equity.pt-stats-compact .hud-stat-lbl {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7480;
  line-height: 1;
  font-family: 'Inter', sans-serif;
}

.pt-stat-v,
.hud-pnl-equity.pt-stats-compact .hud-equity,
.hud-pnl-equity.pt-stats-compact .hud-pnl-val,
.hud-pnl-equity.pt-stats-compact .hud-cash-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--jag-ink, #1a1f29);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  font-family: 'Inter', sans-serif;
}

.pt-stat-v.pos,
.hud-pnl-equity.pt-stats-compact .hud-stat-line--pnl.hud-pnl-up .hud-pnl-val { color: #117a37; }

.pt-stat-v.neg,
.hud-pnl-equity.pt-stats-compact .hud-stat-line--pnl.hud-pnl-down .hud-pnl-val { color: #b4232a; }

[data-sim-header-auth] {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-shrink: 1;
}

/* Header control pills (Report / Settings / Sign out) are now unified in
   auth-modal.js via CSS custom properties and already read correctly on the
   light Paper Trading shell (white bg, dark ink). The old per-mode !important
   overrides here duplicated — and fought with — that spec (they also forced
   Report to stay red). Removed so there is one source of truth; Sign-out keeps
   its red destructive hover from the base spec. Only the Sign-out sizing floor
   and the user-name ink fix (which the light shell still needs) remain. */
body.paper-trading .sim-signout-btn,
body.paper-trading #sim-signout-btn,
body.invest-mode .sim-signout-btn,
body.invest-mode #sim-signout-btn {
  flex-shrink: 0;
}

body.paper-trading [data-sim-header-auth] #sim-user-name,
body.invest-mode [data-sim-header-auth] #sim-user-name,
body.paper-trading .sim-user-name,
body.invest-mode .sim-user-name {
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Light Paper Trading header: the name span inherits a near-white color
     (#e2e8f0) which is invisible on the light shell. Force a dark readable ink.
     Targets the .sim-user-name CLASS — the element has no #sim-user-name id. */
  color: var(--jag-ink, #1a1f29) !important;
}

/* Page shell — footer pinned to bottom */
.pt-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f4f6f8;
}

.pt-main {
  flex: 1 0 auto;
  width: 100%;
}

.pt-wrap {
  max-width: 1480px;
  margin: 0 auto;
  padding: 22px 24px 32px;
  width: 100%;
  box-sizing: border-box;
}

.pt-layout {
  display: grid;
  /* Side board: fits full trader names (≤20 chars) + Value + Return.
     Badges sit under the name so they never ellipsize it to "g…". */
  grid-template-columns: minmax(0, 1fr) minmax(440px, 480px);
  gap: 22px;
  align-items: stretch;
}

.pt-col-main { min-width: 0; }

.pt-col-side {
  position: sticky;
  top: 68px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.pt-lb-panel {
  background: #ffffff;
  border: 1px solid #e4e8ee;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 680px;
}

.pt-lb-head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid #e4e8ee;
  background: var(--jag-card-2, #f7f9fb);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.pt-lb-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--jag-ink, #1a1f29);
  margin: 0;
}

.pt-lb-meta {
  font-size: 11px;
  color: #6b7480;
}

.pt-lb-scroll {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 620px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

/* Full-width compact leaderboard. NEVER set display:flex on <td> itself
   — that drops table-cell layout and breaks row borders. */
.pt-lb-panel .lb-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
.pt-lb-panel .lb-table th:nth-child(1),
.pt-lb-panel .lb-table td:nth-child(1) { width: 44px; }
.pt-lb-panel .lb-table th:nth-child(2),
.pt-lb-panel .lb-table td:nth-child(2) { width: auto; }
.pt-lb-panel .lb-table th:nth-child(3),
.pt-lb-panel .lb-table td:nth-child(3) { width: 100px; }
.pt-lb-panel .lb-table th:nth-child(4),
.pt-lb-panel .lb-table td:nth-child(4) { width: 84px; }
.pt-lb-panel .lb-table td,
.pt-lb-panel .lb-table th {
  border-bottom: 1px solid #e4e8ee;
  vertical-align: middle;
}
.pt-lb-panel .lb-table tbody tr:last-child td { border-bottom: none; }
/* Name + "View portfolio" pill on ONE line, name fully visible (never ellipsis). */
.pt-lb-panel .lb-table .td-name-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow: visible;
  min-width: 0;
}
.pt-lb-panel .lb-table .td-uname {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}
.pt-lb-panel .lb-table .td-uname .lb-name-btn {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}
.pt-lb-panel .lb-table .td-name-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.pt-lb-panel .lb-table .td-val,
.pt-lb-panel .lb-table .td-ret {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pt-lb-fade {
  /* Disabled 20260723e: overlay washed the last visible Top Portfolios row
     light-gray (looked like a muted/dormant trader at ~#13/#14). Keep the
     element for DOM compat but never paint it. Scroll hint text remains. */
  display: none !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36px;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.98));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.pt-lb-fade.show { opacity: 0; display: none !important; }

.pt-lb-panel .lb-table td,
.pt-lb-panel .lb-table th {
  padding-top: 11px;
  padding-bottom: 11px;
}

.pt-footer {
  flex-shrink: 0;
  margin-top: auto;
  width: 100%;
  border-top: 1px solid #e4e8ee;
  background: #ffffff;
  padding: 16px 24px;
  font-size: 11px;
  color: #6b7480;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  box-sizing: border-box;
}

.pt-footer a { color: #6b7480; text-decoration: none; }
.pt-footer a:hover { color: var(--jag-ink, #1a1f29); }

.pt-footer-disc {
  flex: 1;
  min-width: 200px;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 960px) {
  .pt-layout {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  /* Never sticky-overlay the main hub column on phones. */
  .pt-col-side {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: auto !important;
    align-self: stretch;
  }
  .pt-col-main { min-width: 0; width: 100%; }
  .pt-lb-panel { max-height: none; width: 100%; }
  .pt-lb-scroll { max-height: 420px; overflow-x: auto; }
  .pt-wrap { overflow-x: clip; max-width: 100%; }
}


/* Hide empty spacer centers; keep Coach mount. */
.pt-appbar-center:not([data-coach-header]):not(:has(.sim-coach-btn)) { display: none !important; }

/* Coach pill sits in the flex flow AFTER the tab strip (including Go Pro).
   Absolute left:50% used to land on Go Pro / the Coach Jag tab on a long nav. */
@media (min-width: 901px) {
  html.is-signed-in .pt-appbar [data-coach-header],
  html.is-signed-in .pt-appbar #coachHeaderSlot,
  html.is-preview .pt-appbar [data-coach-header],
  html.is-preview .pt-appbar #coachHeaderSlot,
  html.is-preview body.invest-mode #stickyHud [data-coach-header],
  html.is-preview body.invest-mode #stickyHud #coachHeaderSlot,
  html.is-signed-in body.invest-mode #stickyHud [data-coach-header],
  html.is-signed-in body.invest-mode #stickyHud #coachHeaderSlot,
  html.is-preview body.invest-mode #stickyHud .header-center[data-coach-header] {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 0 0 8px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    order: 3 !important;
    overflow: visible !important;
    z-index: 8 !important;
    pointer-events: auto;
  }
  html.is-signed-in .pt-appbar [data-coach-header] .sim-coach-btn,
  html.is-signed-in .pt-appbar #coachHeaderSlot .sim-coach-btn,
  html.is-preview .pt-appbar [data-coach-header] .sim-coach-btn,
  html.is-preview .pt-appbar #coachHeaderSlot .sim-coach-btn,
  html.is-preview body.invest-mode #stickyHud [data-coach-header] .sim-coach-btn,
  html.is-preview body.invest-mode #stickyHud #coachHeaderSlot .sim-coach-btn,
  html.is-signed-in body.invest-mode #stickyHud [data-coach-header] .sim-coach-btn,
  html.is-signed-in body.invest-mode #stickyHud #coachHeaderSlot .sim-coach-btn {
    pointer-events: auto;
    width: auto;
    min-width: 128px;
    justify-content: center;
    color: #fff !important;
    background: #E86B1F !important;
    border: 1.5px solid #E86B1F !important;
  }
  html.is-preview .pt-appbar [data-coach-header] .sim-coach-btn .cj-fab-label,
  html.is-preview body.invest-mode #stickyHud [data-coach-header] .sim-coach-btn .cj-fab-label {
    color: #fff !important;
  }
  html.is-preview .pt-appbar [data-coach-header] .sim-coach-btn .cj-fab-dot,
  html.is-preview body.invest-mode #stickyHud [data-coach-header] .sim-coach-btn .cj-fab-dot {
    background: #fff !important;
  }
}

@media (max-width: 900px) {
  .pt-stats,
  .hud-pnl-equity.pt-stats-compact { display: none !important; }
  /* Two-row mobile appbar: logo+auth on row 1, FULL tab strip scrollable on row 2.
     Old single-row + overflow:hidden clipped "Holdings" to "Ho…" and fought Report/Settings. */
  .pt-appbar {
    padding: 6px 10px 8px;
    gap: 6px 8px;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    flex-wrap: wrap;
    align-items: center;
  }
  /* Chart #stickyHud must wrap like .pt-appbar. Fixed 88px + nowrap left the
     header border-bottom cutting through the mobile search input (~390px). */
  body.invest-mode #stickyHud {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    padding: 6px 10px 8px !important;
    gap: 6px 8px !important;
    align-items: center !important;
  }
  body.invest-mode #stickyHud .pt-appbar-center,
  body.invest-mode #stickyHud .header-center {
    display: flex !important;
    order: 4;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-content: center;
    align-items: center;
    padding: 6px 0 8px !important;
    margin: 0 !important;
    border: none !important;
    position: relative !important;
    z-index: 3 !important;
    isolation: isolate !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }
  body.invest-mode #stickyHud #symbolSearch,
  body.invest-mode #stickyHud .symbol-input {
    width: min(420px, 100%);
    max-width: 420px;
    margin: 0 auto;
    position: relative;
    z-index: 4;
    box-sizing: border-box !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 14px !important;
    line-height: 40px !important;
    border: 1px solid #cfd6df !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background: #ffffff !important;
    background-image: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transform: translateZ(0);
  }
  /* One hairline under the FULL wrapped header — never border-bottom on the
     88px box or .header-center (that drew a line through the search input). */
  body.invest-mode #stickyHud {
    border-bottom: none !important;
    box-shadow: 0 1px 0 0 #e4e8ee !important;
  }
  body.invest-mode #stickyHud:has(+ #cryptoOpenBanner.is-shown) {
    box-shadow: none !important;
  }
  body.invest-mode #stickyHud:has(+ #cryptoOpenBanner.is-shown) .pt-appbar-center,
  body.invest-mode #stickyHud:has(+ #cryptoOpenBanner.is-shown) .header-center {
    padding-bottom: 4px !important;
  }
  body.invest-mode #stickyHud.app-header {
    border-top: none !important;
  }
  body.invest-mode #cryptoOpenBanner.is-shown {
    border-top: none;
  }
  /* Logo stays readable on mobile (desktop is 56px; 32px was illegible in ads). */
  .pt-brand-logo { height: 44px !important; max-height: 44px; width: auto !important; }

  /* Hub/Holdings: hide empty spacer centers; keep Coach header mount visible. */
  .pt-appbar-center:not([data-coach-header]):not(:has(.sim-coach-btn)) { display: none !important; }
  html.is-signed-in.jm-ready .pt-appbar {
    flex-wrap: nowrap;
    padding: 8px 8px;
    gap: 4px;
  }
  html.is-signed-in.jm-ready .pt-brand-logo { height: 36px !important; max-height: 36px; }
  .pt-appbar-center[data-coach-header],
  #coachHeaderSlot {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    position: relative !important;
    left: auto !important;
    transform: none !important;
    pointer-events: auto;
    order: 3;
  }
  /* Coach is the primary header CTA on phones (avatar/gear moved into Menu). Filled orange, not the settings gear. */
  .pt-appbar-center[data-coach-header] .sim-coach-btn,
  #coachHeaderSlot .sim-coach-btn {
    color: #fff !important;
    background: #E86B1F !important;
    border: 1.5px solid #E86B1F !important;
    width: auto !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    gap: 6px !important;
    justify-content: center !important;
  }
  .pt-appbar-center[data-coach-header] .sim-coach-btn .cj-fab-label,
  #coachHeaderSlot .sim-coach-btn .cj-fab-label {
    display: inline !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em;
  }
  .pt-appbar-center[data-coach-header] .sim-coach-btn .cj-fab-dot,
  #coachHeaderSlot .sim-coach-btn .cj-fab-dot {
    background: #fff !important;
    width: 8px !important;
    height: 8px !important;
    margin: 0 !important;
  }
  /* Signed-in phones: Logo · Coach · Menu. Sign out moved into the Menu sheet (2026-08-14). */
  html.is-signed-in.jm-ready .pt-appbar-left {
    flex: 0 1 auto;
    max-width: 34%;
  }
  html.is-signed-in.jm-ready .pt-auth-slot {
    display: flex !important;
    order: 2;
    margin-left: auto;
    flex: 0 0 auto;
    max-width: none;
    padding-left: 0;
  }
  html.is-signed-in.jm-ready .pt-appbar-center[data-coach-header],
  html.is-signed-in.jm-ready #coachHeaderSlot {
    order: 3;
    margin-left: 4px;
  }
  html.is-signed-in.jm-ready .jm-burger {
    order: 4;
    margin-left: 4px;
    margin-right: 0;
  }
  /* This icon-only collapse used to kick in at 380px because "Sign out" also had to
     fit in the same row. Sign out moved into the Menu sheet (2026-08-14), which freed
     enough width that the "Coach Jag" label can stay on real phones (iPhone SE and up
     are 375px+); only drop to icon-only below that. */
  @media (max-width: 340px) {
    .pt-appbar-center[data-coach-header] .sim-coach-btn .cj-fab-label,
    #coachHeaderSlot .sim-coach-btn .cj-fab-label { display: none !important; }
    .pt-appbar-center[data-coach-header] .sim-coach-btn,
    #coachHeaderSlot .sim-coach-btn {
      width: 36px !important;
      padding: 0 !important;
    }
  }
  .pt-appbar-left {
    order: 1;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 38%;
  }
  .pt-nav-slot {
    order: 4;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    justify-content: flex-end;
    overflow: visible;
    padding-bottom: 0;
  }
  html.is-signed-in.jm-ready .pt-nav-slot { display: none !important; }
  html.is-signed-in.jm-ready .jm-burger {
    order: 4;
    flex: 0 0 auto;
    margin-left: 0;
  }
  .pt-nav-slot::-webkit-scrollbar { display: none; }
  .pt-nav-slot .pt-view-nav {
    display: inline-flex;
    width: max-content;
    max-width: none;
  }
  .pt-stats-slot { display: none; }
  .pt-auth-slot {
    order: 2;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    padding-left: 4px;
    padding-right: 0;
    max-width: none;
    width: auto;
    flex: 0 0 auto;
    margin-left: auto;
    border-left: none;
  }
  .pt-auth-slot .sim-user-name { display: none !important; }
  .pt-auth-slot .sim-user-avatar { width: 28px; height: 28px; font-size: 12px; }
  .pt-auth-slot .sim-settings-btn {
    width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0;
  }
  body.invest-mode #stickyHud { flex-wrap: wrap !important; }
  html.is-signed-in.jm-ready body.invest-mode #stickyHud .pt-appbar-center:not([data-coach-header]),
  html.is-signed-in.jm-ready body.invest-mode #stickyHud .header-center:not([data-coach-header]) {
    order: 10 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  /* Back button: compact + shorten text on mobile */
  .pt-back { font-size: 11px; padding: 4px 8px; }
  .pt-back { font-size: 0 !important; }
  .pt-back::before { content: "← Switch"; font-size: 11px; font-weight: 600; }
  /* Nav tabs: never truncate mid-label — scroll the strip instead */
  .pt-view-tab {
    font-size: 13px;
    padding: 0 12px;
    white-space: nowrap;
    flex-shrink: 0;
    overflow: visible;
    text-overflow: clip;
  }
}

/* ── Positions / Orders / History tabs (Paper Trading chart) ─────────────────
   Dark-theme .poshist-tab rules bleed through on the light shell — inactive
   tabs were nearly invisible gray-on-gray. These override only in invest mode. */
body.invest-mode .poshist-tabs {
  padding: 0 0 10px;
  gap: 8px;
}

body.invest-mode .poshist-tab {
  background: #ffffff;
  border: 1px solid #c5d0de;
  color: #1e293b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body.invest-mode .poshist-tab:hover:not(.active) {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

body.invest-mode .poshist-tab.active {
  color: var(--jag-green-deep, #00563D);
  border-color: var(--jag-green, var(--jag-green));
  background: var(--jag-green-soft, #E8F7EF);
  box-shadow: 0 0 0 1px rgba(0, 110, 78, 0.2);
}


/* Logged-in traders get the clean app chart, not the SEO marketing wall (that stays for search visitors). */
html.is-signed-in .seo-blurb, html.is-signed-in .seo-related { display:none !important; }

/* ─── PHONES: auth always visible; tabs on their own scrollable row (≤900px) ─
   Sign-up must never leave the screen. Leaderboard scrolls sideways in-box. */
@media (max-width: 700px) {
  .pt-auth-slot .sim-signup-btn-pill {
    padding: 0 10px !important;
    font-size: 12.5px !important;
    white-space: nowrap;
    max-width: none;
  }
  .pt-auth-slot .sim-login-btn {
    padding: 0 8px !important;
    font-size: 12.5px !important;
    white-space: nowrap;
  }
  /* Thumbs need something to hit: 40px minimum on the auth controls. */
  .pt-auth-slot .sim-signup-btn-pill,
  .pt-auth-slot .sim-login-btn { min-height: 40px; display: inline-flex; align-items: center; }

  /* The leaderboard table is 423px wide against a 375px screen, and its wrapper
     was overflow-x:hidden -- so the right-hand columns were CLIPPED with no way
     to reach them. Let it scroll sideways inside its own box instead. The page
     itself still never scrolls sideways. (measured 2026-07-20) */
  .pt-lb-scroll { overflow-x: auto; }

  /* Tab strip: 38px is the smallest a thumb reliably hits without mis-taps. */
  .pt-view-tab { min-height: 38px; display: inline-flex; align-items: center; }
}
@media (max-width: 430px) {
  .pt-view-tab { padding: 0 10px !important; font-size: 13px !important; }
  .pt-auth-slot .sim-login-btn { padding: 0 7px !important; font-size: 12px !important; }
  /* Shorter CTA label so both buttons fit on a 390px phone next to the logo */
  .pt-auth-slot .sim-signup-btn-pill { font-size: 0 !important; padding: 0 11px !important; }
  .pt-auth-slot .sim-signup-btn-pill::after {
    content: "Sign up";
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.01em;
  }
}

/* ── Mobile baseline (2026-07-31) ──────────────────────────────────────────
   iOS Safari auto-zooms a focused input whose font-size is under 16px, which then
   scrolls the viewport and cuts the header/nav/content off the left edge (owner bug,
   recurring). Force 16px on every input at phone widths + guard horizontal overflow.
   Lives in the shared shells so every page that loads one inherits it. */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px !important; }
  html, body { overflow-x: hidden; max-width: 100%; }
}

/* ── Tap targets (mobile) ───────────────────────────────────────────────────
   Interactive chips, pills, toggles, tabs and small buttons get a 40px touch
   floor so phone taps do not miss. min-height only lifts, never shrinks, so
   controls already >=40px are untouched. Shared here so JS-injected components
   (same class names) inherit it too. */
/* Touch targets for real chip/tab controls only — not card-like [role="button"]. */
@media (max-width: 640px) {
  .chip, .pill, .tool-btn, .seg-btn, .poshist-tab, .iwl-chip,
  [role="tab"] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* First-eight-seconds line on each room. Not a feature list. */
.room-intent {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  color: #5b6675;
  max-width: 62ch;
  min-width: 0;
}
@media (max-width: 640px) {
  /* Onboarding flavor text, not information — cut it on phones so vertical space
     goes to the real numbers instead (owner 2026-08-14: "wasted space"). */
  .room-intent { display: none; }
}

.paper-activity {
  margin: 0 0 18px;
  padding: 14px 16px 12px;
  background: #fff;
  border: 1px solid #e9edf1;
  border-radius: 12px;
  min-width: 0;
}
.paper-activity h2 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.paper-activity .pa-sub {
  margin: 0 0 10px;
  font-size: 12px;
  color: #5b6675;
  line-height: 1.4;
}
.paper-activity .pa-empty { margin: 0; font-size: 13px; color: #5b6675; }
.paper-activity .pa-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid #f0f3f5;
  min-width: 0;
}
.paper-activity .pa-row:first-of-type { border-top: 0; }
.paper-activity .pa-text { font-size: 13px; line-height: 1.4; min-width: 0; color: var(--pf-ink, #111820); text-decoration: none; }
.paper-activity .pa-text b { font-weight: 800; margin-right: 4px; }
.paper-activity .pa-ago { flex: 0 0 auto; font-size: 11px; color: #6b7480; white-space: nowrap; }
#jag-activity-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(12px);
  z-index: 12050;
  max-width: min(92vw, 420px);
  background: #0f172a;
  color: #fff;
  font: 700 13px/1.35 ui-sans-serif, system-ui, sans-serif;
  padding: 11px 16px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
#jag-activity-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
#jag-activity-toast a { color: #fff; text-decoration: none; }
.df { margin: 12px 0 18px; padding: 16px 16px 14px; background: #fff; border: 1px solid #e9edf1; border-radius: 14px; min-width: 0; }
.df-h { margin: 0 0 4px; font-size: 16px; font-weight: 800; }
.df-note { margin: 0 0 12px; font-size: 12px; color: #5b6675; line-height: 1.4; }
.df-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .df-grid { grid-template-columns: 1fr; } }
.df-card { background: var(--jag-card-2, #f7f9fb); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.df-card .k, .df-news .k { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5b6675; }
.df-card .v { font-size: 15px; font-weight: 800; margin-top: 4px; }
.df-card .s { font-size: 12px; color: #5b6675; margin-top: 4px; line-height: 1.4; }
.df-news { margin-top: 12px; }
.df-news ul { margin: 6px 0 8px; padding-left: 18px; }
.df-news a { color: var(--jag-green, var(--jag-green)); font-weight: 700; text-decoration: none; }
.df-more { font-size: 13px; font-weight: 800; color: var(--jag-green, var(--jag-green)); text-decoration: none; }
.df-skel { font-size: 13px; color: #5b6675; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE HEADER + PRO ENTRY POINT. Added 2026-08-18.

   Two real problems, both measured on a 390px phone:

   1. THE MENU BUTTON SAT IN THE MIDDLE-LEFT. Measured: logo at x=8, Coach Jag at
      x=101, Menu at x=213 -- with ~200px of empty space to its RIGHT. Every phone
      app puts the menu in the top-right corner, so users hunted for it and
      concluded there was no way to sign out. Sign out was in the sheet the whole
      time; it was the ENTRY POINT that was hidden in plain sight.

   2. NO WAY TO BUY PRO ON A PHONE. `.pt-gopro` is styled only inside
      @media (min-width: 901px), so it does not exist below that width, and the
      nav that holds it is hidden on mobile anyway. A signed-in non-Pro user on a
      phone had no upgrade affordance on any page. That is a revenue hole, and
      most traffic is phones.
   ═══════════════════════════════════════════════════════════════════════════ */
/* The mobile Pro pill is injected into .pt-appbar on EVERY width, but it is only
   styled inside the phone block below -- so on desktop it rendered as a bare blue
   link in the top-left corner of the header. It is a phone affordance only; desktop
   already has its own Go Pro tab. */
@media (min-width: 901px) {
  .pt-appbar .pt-mob-pro { display: none !important; }
}

@media (max-width: 900px) {
  /* Menu goes where every phone app puts it: hard right.
     The push comes from the CENTRE slot, not from the burger. Putting
     `margin-left:auto` on the burger broke the moment the Go Pro pill existed:
     the sibling rule below matched even while the pill was display:none for Pro
     members, so the burger took 6px instead of auto and drifted back to the
     middle. Pushing from the left-hand side works whether the pill renders or
     not. */
  .pt-appbar { align-items: center; }
  /* TWO elements carry .pt-appbar-center. The first is display:none, and an auto
     margin on a hidden flex item contributes nothing -- which is why the burger
     stayed 209px short of the right edge on a 500px bar. The VISIBLE one is
     #coachHeaderSlot, so the push has to come from there. */
  /* MATCH THE SPECIFICITY THAT IS ALREADY WINNING. A rule earlier in this file,
     `html.is-signed-in.jm-ready .jm-burger { margin-left: 4px }`, carries two
     classes on <html> plus a class -- so a plain `.pt-appbar > #jm-burger` lost,
     and the margin-right:auto I put on the centre slot never applied either
     (measured live at 390px: coachHeaderSlot margin-right computed 0px, burger
     99px short of the right edge). This selector matches that specificity and
     comes later, so the menu finally pins right. */
  html.is-signed-in.jm-ready .pt-appbar > #jm-burger.jm-burger,
  .pt-appbar > #jm-burger.jm-burger {
    margin-left: auto !important;
    margin-right: 8px !important;
  }

  /* Wave 3 (2026-08-23): header Sign out sits under Coach × and logs people out.
     Sign out lives in Menu → Account only. Same-ID specificity as the old
     “show it in the bar” override so this actually wins. */
  html.is-signed-in.jm-ready .pt-appbar #sim-header-auth .sim-signout-btn,
  html.is-signed-in .pt-appbar #sim-header-auth .sim-signout-btn,
  html.is-signed-in.jm-ready .pt-appbar .sim-signout-btn,
  html.is-signed-in .pt-appbar .sim-signout-btn {
    display: none !important;
  }
  /* Menu (and Coach) stay on screen while the page scrolls. */
  html.is-signed-in .pt-appbar,
  html.is-signed-in body.invest-mode #stickyHud {
    position: -webkit-sticky;
    position: sticky !important;
    top: 0 !important;
    z-index: 10050 !important;
  }
  /* JCPENNEY MODEL, at the owner's direction: hamburger hard LEFT, logo beside it,
     account controls on the RIGHT. Sign out was landing at x=91 -- immediately
     after the logo -- because .pt-auth-slot sits early in the DOM, and the owner
     read that as broken: "normally sites have the menu in the top left."
     Menu takes order 0 and loses the auto margin; Sign out takes the auto margin
     and is pushed to the right edge instead. */
  html.is-signed-in.jm-ready .pt-appbar > #jm-burger.jm-burger,
  .pt-appbar > #jm-burger.jm-burger {
    order: 0 !important;
    margin-left: 0 !important; margin-right: 8px !important;
  }
  .pt-appbar > .pt-appbar-left { order: 1; }
  html.is-signed-in .pt-appbar > .pt-auth-slot {
    order: 98; margin-left: auto !important;
  }

  /* A compact Pro pill for signed-in users who are NOT already Pro. Sits left of
     the menu so it is seen without competing with it. Hidden for Pro members,
     who have nothing to buy. */
  .pt-appbar .pt-mob-pro {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; margin-right: 6px;
    padding: 0 12px; height: 34px; border-radius: 999px;
    background: #BB5C2D; color: #fff !important; font-weight: 800; font-size: 13px;
    text-decoration: none; white-space: nowrap; border: 0;
  }
  .pt-appbar .pt-mob-pro { margin-left: 0; }
  html.is-pro .pt-appbar .pt-mob-pro,
  html:not(.is-signed-in) .pt-appbar .pt-mob-pro { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STICKY SECTION BAR. Added 2026-08-19.
   A thin row of section links under the header, scrolling sideways so it never
   becomes a second line that eats the screen. Built from the same list the Menu
   uses, so the two can never disagree.
   ═══════════════════════════════════════════════════════════════════════════ */
/* MOBILE ONLY. Desktop already has the vertical section rail down the left side of
   Portfolio; adding a second horizontal one there was duplicate navigation the owner
   never asked for. This exists because the rail COLLAPSES below 1080px.

   width/max-width are pinned to the viewport and every child is allowed to shrink:
   without that the row of chips made the whole PAGE wider than the screen, so the
   body scrolled sideways and the layout appeared shoved left with a blank strip on
   the right -- which is exactly what the owner photographed. The bar scrolls inside
   itself; the page must never scroll with it. */
.jm-secbar { display: none; }
/* DESKTOP ONLY now. It replaces the vertical rail on wide screens; on mobile the
   portfolio page is back to what it was before this bar existed. */
@media (min-width: 1081px) {
  .jm-secbar {
    /* top MUST clear .pt-appbar, which is sticky at top:0 and 88px tall on the
       desktop widths this bar renders at. At 53px the bar slid up UNDER the header
       and disappeared as the page scrolled -- reported twice before it was measured
       rather than guessed at. */
    position: sticky; top: 88px; z-index: 95;
    display: flex; gap: 6px; align-items: center;
    padding: 7px 12px;
    background: var(--pf-card, #fff);
    border-bottom: 1px solid var(--pf-line, #e6ebf2);
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    width: 100%; max-width: 100vw; min-width: 0; box-sizing: border-box;
  }
}
.jm-secbar::-webkit-scrollbar { display: none; }
.jm-secbar button {
  flex: 0 0 auto; border: 1px solid transparent; background: transparent;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap;
  color: var(--pf-muted, #6b7480);
}
.jm-secbar button:hover { color: var(--pf-ink, #1a1f29); }
.jm-secbar button.on {
  background: rgba(0,110,78,.10);
  border-color: rgba(0,110,78,.28);
  color: var(--pf-brand, var(--jag-green));
}


/* ═══════════════════════════════════════════════════════════════════════════
   THE CLOSED MENU DRAWER WAS WIDENING THE PAGE. Added 2026-08-19.

   .jm-sheet is position:fixed with transform:translateX(100%), so when the menu is
   shut it parks just off the right edge. A transformed fixed box still contributes
   to the document's scroll width, so on a 390px phone the document measured 1210px
   -- 820px of empty space to the right. The page could be scrolled sideways, which
   is why the layout looked shoved left with a blank strip beside it.

   `clip` rather than `hidden` on purpose: overflow-x:hidden on html/body creates a
   scroll container and silently kills position:sticky, which the section bar and the
   app bar both rely on. `clip` cuts the overflow without creating one.
   ═══════════════════════════════════════════════════════════════════════════ */
/* TWO GUARDS ON PURPOSE. `clip` is the correct modern value -- it stops the overflow
   without creating a scroll container, which is what keeps position:sticky working for
   the app bar and the section bar. But Safari propagates ROOT overflow to the viewport,
   and its support for propagating `clip` is newer than for `hidden`: on an older iOS the
   clip is ignored at the viewport level and the document scrolls sideways anyway. That
   is exactly the split seen here -- locked in a desktop engine, still drifting on a real
   iPhone.

   So `hidden` is declared first as the widely-supported floor, and `clip` second for
   engines that understand it. A browser that supports clip uses clip (sticky intact); one
   that does not falls back to hidden, which still propagates from the ROOT and therefore
   does not break sticky on descendants of body. */
html { overflow-x: hidden; overflow-x: clip; max-width: 100%; }
body { overflow-x: clip; max-width: 100%; }


/* RECENT ACTIVITY WAS BLACK-ON-BLACK. (2026-08-21)
   .pa-text hardcoded color:#111820 with no dark rule, so on a dark desk the
   ticker and the action ("MSFT bought 100 shares") vanished entirely and every
   row read as a bare price with no context. The owner's screenshot showed rows
   that looked empty. Same class of failure as the leaderboard: the ink was
   flipped nowhere, so it stayed near-black on a near-black surface. */
html[data-chart-theme="dark"] .paper-activity .pa-text,
html[data-intel-theme="dark"] .paper-activity .pa-text { color: #E6EDF3; }
html[data-chart-theme="dark"] .paper-activity .pa-text b,
html[data-intel-theme="dark"] .paper-activity .pa-text b { color: #FFFFFF; }
html[data-chart-theme="dark"] .paper-activity .pa-ago,
html[data-intel-theme="dark"] .paper-activity .pa-ago { color: #97A3B4; }
html[data-chart-theme="dark"] .paper-activity .pa-row,
html[data-intel-theme="dark"] .paper-activity .pa-row { border-top-color: #2A3442; }

/* GO PRO IS NOT A TAB. (2026-08-21, owner approved, asked three times)
   The sibling rules above already hide it for Pro users and for signed-out
   visitors -- which left exactly one audience seeing it: signed-in FREE users,
   the people it was aimed at, all day, next to Chart. That is advertising, and
   they go blind to it. The instrumented impressions that were supposed to prove
   otherwise turned out to be logged for a card with display:none, so there was
   never evidence it worked.
   This rule lives HERE, beside its siblings, because the earlier attempts put it
   in chart-desk-page.css (loads only on /chart) and then in the #anav stylesheet
   injected by app-nav.js (a different nav component entirely) -- so it kept
   vanishing on one page and staying on every other.
   The PRO tag on Intel is untouched: that is a label, not an ad. Pro stays
   reachable from the account menu and every in-context lock.
   Delete this block to put the tab back. */
.pt-view-nav .pt-view-tab.pt-gopro,
.pt-view-tab.pt-gopro,
a.pt-gopro,
.jm-gopro { display: none !important; }


/* ── COACH PILL CHROME LIVES HERE, NOT ONLY IN JS ───────────────────────────────
   The owner keeps catching this button as a bare orange rectangle: "coach Jag keeps
   appearing as this rectangle."

   Its base appearance was defined ONLY inside the ~536-line <style> blob that
   js/coach-jag.js builds and appends to <head>. Between first paint and that blob
   landing, .sim-coach-btn renders as an unstyled <button> - square corners, default
   metrics, wrong font. On a slow load that frame is long enough to see and screenshot.

   Chrome that ships above the fold must not wait on a template literal. Duplicated
   here so the pill is right from the first frame; coach-jag.js still appends later and
   would win if it ever needs to differ. Keep the two in sync, or delete the JS copy.
   (owner 2026-08-21) */
.sim-coach-btn {
  height: 40px; box-sizing: border-box; padding: 0 16px; border-radius: 999px;
  /* Label colour is INHERITED from this button, so fixing .cj-fab-label alone never
     worked - no rule matched the label at all. #fff on this orange is 3.20:1. */
  border: 1.5px solid #b8540d; background: #b8540d; color: #ffffff;
  font: 800 13px/1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .01em;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; flex-shrink: 0; box-shadow: 0 1px 3px rgba(232, 107, 31, .35);
}
/* #fff on the Pro orange measured 3.20:1 - under the floor, on the most-clicked
   control on the site, in BOTH themes. Four stylesheets set this label white and
   coach-jag.js re-asserts it with !important, so it is corrected at every source
   rather than out-shouted from one. #ffffff reads 5.52:1. */
.sim-coach-btn .cj-fab-label { color: #ffffff; white-space: nowrap; }
.sim-coach-btn .cj-fab-chev {
  width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid #fff; margin-left: 1px; flex: 0 0 auto;
}


/* ── COACH BUTTON INK: settled with an ID, after five attempts with classes ──────
   White on the Pro orange measures 3.20:1 - under the floor, in BOTH themes, on the
   most-clicked control on the site.

   Five class-based fixes failed, and the diagnosis is worth recording because the
   normal debugging story does not apply. Asking the live page which rules matched
   returned ruleCount: 0 for the label AND ruleCount: 0 for the button - neither element
   has a colour rule that JS can see, yet both compute white. One stylesheet on the page
   cannot be enumerated from script, so the winning rule is somewhere I cannot read.

   Rather than keep guessing at a cascade I cannot inspect, this uses the button's ID
   (specificity 1,0,0) plus !important, which outranks any class-based rule wherever it
   lives. The colour is the lightest ink that clears 4.5:1 on all three button grounds:
     rest #E86B1F 6.20   hover #d45e16 5.12   expanded #c95512 4.54
   `color` covers the label too, which inherits rather than setting its own. */
#sim-coach-btn,
#sim-coach-btn .cj-fab-label,
#sim-coach-btn:hover,
#sim-coach-btn:hover .cj-fab-label,
#sim-coach-btn[aria-expanded="true"],
#sim-coach-btn[aria-expanded="true"] .cj-fab-label {
  color: #ffffff !important;
}