/* ===================================================
   Theme tokens (dark, default). Every color used below is defined here so a
   future :root[data-theme="light"] override block can redefine just this
   list rather than touching every rule. Names are grouped by role, not by
   which selector first used them - several selectors intentionally share
   one token (e.g. all the glass panels share --glass-bg).
=================================================== */
:root {

  /* backgrounds */
  --bg-app-solid: #141414;
  --bg-loading-gradient-a: rgb(17, 17, 17);
  --bg-loading-gradient-b: rgb(3, 3, 3);
  --bg-panel-gradient-a: rgb(26, 26, 26);
  --bg-panel-gradient-b: rgb(3, 3, 3);
  --bg-skel-a: #1c1c1c;
  --bg-skel-b: #2a2a2a;

  /* glass / frosted panels (modals, buttons, trading panel chrome) */
  --glass-bg: rgba(10, 10, 16, 0.55);
  --glass-bg-hover: rgba(10, 10, 16, 0.7);
  --glass-bg-active: rgba(10, 10, 16, 0.85);
  --glass-bg-elevated: rgba(10, 10, 16, 0.92);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-top: rgba(255, 255, 255, 0.35);
  --glass-shadow: rgba(0, 0, 0, 0.45);

  /* text */
  --text-primary: #e2e8f0;
  --text-secondary: #cbd5e1;
  --text-muted: gray;
  --text-dim: lightgray;
  --text-wordmark: whitesmoke;

  /* borders / dividers (white-based on the dark background) */
  --border-faint: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-medium: rgba(255, 255, 255, 0.15);
  --border-strong: rgba(255, 255, 255, 0.25);
  --border-hover-fill: rgba(255, 255, 255, 0.16);
  --border-label-dim: rgba(255, 255, 255, 0.5);
  --border-subtitle-dim: rgba(255, 255, 255, 0.822);
  --border-drkbord-teal: rgba(0, 139, 139, 0.253);

  /* brand accents - buy/sell */
  --accent-buy: orangered;
  --accent-sell: darkcyan;
  --accent-buy-soft-border: rgba(245, 58, 1, 0.55);
  --accent-buy-soft-shadow: rgba(245, 58, 1, 0.25);
  --accent-buy-executing: rgba(255, 69, 0, 0.55);
  --accent-ideas-shine: rgba(255, 174, 92, 0.65);
  --accent-ideas-glow: rgba(255, 106, 0, 0.55);
  --accent-ideas-glow-transparent: rgba(255, 106, 0, 0);

  /* gauges / trade buttons (strat.js rows) */
  --gauge-buy-green: #4dff88;
  --gauge-sell-red: #ff5a5a;
  --gauge-curve-blue: #1e3a8a;
  --gauge-track-bg: rgb(60, 60, 60);
  --gauge-tick-color: rgba(255, 200, 0, 0.6);

  /* chart series accents */
  --chart-forecast-violet: #462b5a;
  --chart-cool-cyan: cyan;
  --city-marker-blue: #176B9E; /* "PRIVATE BETA" text and the city name in dark mode */

  /* market ticker gradients */
  --mrkttop-gradient-a: #ff3c00;
  --mrkttop-gradient-b: rgb(22, 22, 22);
  --mrktbot-gradient-a: rgb(8, 8, 8);
  --mrktbot-gradient-b: var(--city-marker-blue); /* was rgb(2, 160, 172) */

  /* modals */
  --modal-overlay: rgba(0, 0, 0, 0.6);
  --modal-error: #f87171;
  --modal-success: #4ade80;

  /* forecast/prediction-market value readouts (index.html #forcpredval, #ngpredval) */
  --forecast-value-cream: rgb(252, 230, 203);

  /* misc component colors */
  --strat-next-month-bg: rgba(45, 45, 45, 0.55);
  --pmtextbox-bg: #1a1310;
  --pillbutton-bg: rgb(19, 19, 19);
  --pillbutton-bg-alt: rgb(39, 39, 39);
  --bsbut-active-text: #141414;
  --glbut-bg: dimgray;
  --glbut2-bg: rgb(53, 52, 52);
  --glbutpress-bg: darkred;
  --predcircle-bg: blue;
  --border-black: black;
  --text-hollow-fill: black;
  --text-on-accent: white;
}

/* ===================================================
   Theme tokens (light). Overrides the dark set above when <html> carries
   data-theme="light" (toggle JS: still to be wired up). Background is a
   bone-white -> light warm-gray gradient; glass panels flip from onyx to
   alabaster; buy/sell accent is a dark saturated yellow / dark royal blue
   pair instead of orangered/darkcyan, since that pair read too
   washed-out on a light ground.

   Left un-overridden on purpose (they're small dark "chip" style buttons -
   glbut/glbut2/glbutpress/predcircle-bg/text-on-accent - that read fine as
   dark accents against either background; revisit if they turn out to
   still be live UI that should go light too): --glbut-bg, --glbut2-bg,
   --glbutpress-bg, --predcircle-bg, --text-on-accent.
=================================================== */
:root[data-theme="light"] {

  /* backgrounds */
  --bg-app-solid: #8E8E8E;
  --bg-loading-gradient-a: #A6A6A6; /* page background (was #8E8E8E, then #3A3A3A) */
  --bg-loading-gradient-b: #969696; /* was #7C7C7C, then #2A2A2A */
  --bg-panel-gradient-a: #FAF8F3;
  --bg-panel-gradient-b: #E5E2DB;
  --bg-skel-a: #E8E5DE;
  --bg-skel-b: #F5F3ED;

  /* glass / frosted panels - onyx flips to alabaster; the "top highlight"
     edge flips from a lighter-than-base white sliver to a brighter one
     still, since it's simulating light hitting the top of the glass same
     as before, just now against a light backdrop */
  --glass-bg: rgba(255, 255, 255, 0.70);
  --glass-bg-hover: rgba(255, 255, 255, 0.85);
  --glass-bg-active: rgba(255, 255, 255, 0.95);
  --glass-bg-elevated: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(32, 28, 20, 0.10);
  --glass-border-top: rgba(255, 255, 255, 0.80);
  --glass-shadow: rgba(32, 28, 20, 0.14);

  /* text */
  --text-primary: #211F1B;
  --text-secondary: #6E6A62;
  --text-muted: #8A8478;
  --text-dim: #6E6A62;
  --text-wordmark: #211F1B;

  /* borders / dividers (dark-based on the light background) */
  --border-faint: rgba(32, 28, 20, 0.05);
  --border-subtle: rgba(32, 28, 20, 0.10);
  --border-medium: rgba(32, 28, 20, 0.14);
  --border-strong: rgba(32, 28, 20, 0.22);
  --border-hover-fill: rgba(32, 28, 20, 0.10);
  --border-label-dim: rgba(32, 28, 20, 0.55);
  --border-subtitle-dim: rgba(32, 28, 20, 0.82);
  --border-drkbord-teal: rgba(14, 124, 124, 0.35);
  /* .toppltext/.hollowtext's "hollow" trick only works when this matches
     whatever they render over - light theme's is bone-white, same as
     --bg-app-solid; re-check against the actual title-bar backdrop */
  --border-black: rgba(32, 28, 20, 0.15);
  --text-hollow-fill: #FAF8F3;

  /* brand accents - buy/sell (dark saturated yellow / dark royal blue) */
  --accent-buy: #FFE100; /* bright yellow (was darkgoldenrod) */
  --accent-sell: #1E3A8A;
  --accent-buy-soft-border: rgba(255, 225, 0, 0.45);
  --accent-buy-soft-shadow: rgba(255, 225, 0, 0.20);
  --accent-buy-executing: rgba(255, 225, 0, 0.55);
  --accent-ideas-shine: rgba(233, 120, 72, 0.55);
  --accent-ideas-glow: rgba(217, 68, 68, 0.35);
  --accent-ideas-glow-transparent: rgba(217, 68, 68, 0);

  /* gauges / trade buttons (strat.js rows) */
  --gauge-buy-green: #15803D;
  --gauge-sell-red: #C0392B;
  --gauge-track-bg: #A8A296;
  --gauge-tick-color: rgba(180, 110, 0, 0.85);

  /* chart series accents - lightened so they don't go muddy against a
     light chart backdrop */
  --chart-forecast-violet: #7C5CBF;
  --chart-cool-cyan: #0E7490;

  /* market ticker gradients - the near-black stop that used to blend into
     the dark page background now fades to the buy/sell accents instead */
  --mrkttop-gradient-a: var(--accent-buy);
  --mrkttop-gradient-b: lightgray;
  --mrktbot-gradient-a: #EDE9E0;
  --mrktbot-gradient-b: var(--accent-sell);

  /* modals - overlay stays dark even in light mode, to keep focus on the
     modal in front of it */
  --modal-overlay: rgba(20, 18, 14, 0.45);
  --modal-error: #DC2626;
  --modal-success: #16A34A;

  /* the pale cream reads as a light-on-dark accent; needs to go dark-on-light instead */
  --forecast-value-cream: #8A5A1E;

  /* misc component colors */
  /* plain gray tint, slightly darker than the modal's own glass background, instead of dark
     mode's teal tint - reads as a subtly shaded section rather than a distinct color */
  --strat-next-month-bg: rgba(32, 28, 20, 0.08);
  --pmtextbox-bg: #FBF3EC;
  --pillbutton-bg: #EDEAE2;
  --pillbutton-bg-alt: #E4E0D6;
  --bsbut-active-text: #211F1B;
}

/* #mainchart's .drkbackg div (header row + chart + trade box) has no glass of its own: its contents float on the
   screen. The border stays (transparent) so the layout keeps the same size. The id in the selector beats .drkbackg's
   opaque gradient (defined later in this file). */
#mainchart .drkbackg,
:root[data-theme="light"] #mainchart .drkbackg {
  background-color: transparent;
  background-image: none;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* the trade box: a thin, wide rounded-border panel with the credits readout (small text) above the trade buttons. It sits
   just above the Portfolio / Ideas panel (#countrytrade, same width and centering); navi.js pressTrade() sets its bottom
   so there is 5px between the two, and shows / hides it with the trading panel. */
.tradebar {
  position: absolute;
  left: 50%;
  width: 350px;
  margin-left: -175px;
  bottom: 120px;
  z-index: 2;
  box-sizing: border-box;
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  border-radius: 14px;
  padding: 6px 12px 8px 12px;
}
.tradebar-credits {
  display: flex;
  justify-content: space-between;
  padding: 0 4px 5px 4px;
  font-size: 11px;
  color: var(--text-muted);
}
.tradebar-credits span {
  font-size: 11px !important; /* wmcalc.js writes these spans with an inline 12px */
}


/* #countrytrade normally shares .ctbutton's frosted --glass-bg - swap it to the same gray
   gradient as #mainchart above so the two panels read as one family in light mode. */
:root[data-theme="light"] #countrytrade {
  background: linear-gradient(160deg, #707070 0%, #636363 100%);
}

/* #acctname (the username pill in the title bar) is inline-styled to --bg-app-solid
   (index.html), which is bone-white in light mode - darken it to stand out as its own bubble.
   !important needed to beat that inline background-color. Text is inline-styled to
   --accent-buy (yellow), too low-contrast against the darkgray fill, so pin it to black too. */
:root[data-theme="light"] #acctname {
  background-color: darkgray !important;
  color: black !important;
}

/* #countrytrade's "VIEW" bracket label is inline-styled to --text-muted (index.html), which in
   light mode is a warm mid-gray tuned for a bone-white background - against the dark gray
   gradient above it's too dim, so lighten it here (!important beats the inline color). */
:root[data-theme="light"] #countrytrade .view-label {
  color: lightgray !important;
}

/* against that gray gradient, force every text color inside #mainchart to white, except the
   buy/sell buttons (#buybp/#sellbp) which keep their own accent-buy/accent-sell coloring, and the info column
   (#mainchart-info) and the 10YR / Curve / Market row (#mainchart-stats), which get their own light-mode colors below.
   !important is needed since most of the colors in here (tpcity, tpmonth, centmid, and the
   10yr/curv/mdif value spans wmbars.js injects) are set as inline styles, which normal
   specificity can't beat. */
:root[data-theme="light"] #mainchart,
:root[data-theme="light"] #mainchart *:not(#buybp):not(#buybp *):not(#sellbp):not(#sellbp *):not(#promptmonth-toggle *):not(#mainchart-info):not(#mainchart-info *):not(#mainchart-stats):not(#mainchart-stats *) {
  color: white !important;
}

/* Pr/NM toggle (#promptmonth-toggle, excluded from the white-text rule above): the selected
   button is lightgray with dark text, the unselected one dark gray with white text. */
:root[data-theme="light"] #promptmonth-toggle .bsbut {
  background-color: dimgray;
  color: white;
}
:root[data-theme="light"] #promptmonth-toggle .bsbut-active {
  background-color: lightgray;
  color: #211F1B;
}

/* #tknprices sits over the same gray gradient. Its label text (Buy Token Price:, Credits Used:,
   etc.) goes black - !important beats its own inline color: var(--text-muted). The changing
   values (buytknprice/selltknprice/margin/credavail's spans) set their own inline color too
   (--text-muted/--text-dim, both mid-gray in light mode) which now sits almost flush against the
   darkened gray gradient background - force them white instead so they still read. */
/* light-mode text colors for the trading panel's info: city name yellow, month blue, everything else black; the
   Buy Token Price value is yellow and the Sell Token Price value blue (--accent-sell). !important beats the inline colors. */
:root[data-theme="light"] #mainchart-info,
:root[data-theme="light"] #mainchart-stats,
:root[data-theme="light"] #mainchart-stats *,
:root[data-theme="light"] #tradebar .tradebar-credits,
:root[data-theme="light"] #tradebar .tradebar-credits * {
  color: black !important;
}
:root[data-theme="light"] #tpcity {
  color: var(--accent-buy) !important;
}
:root[data-theme="light"] #tpcity span, /* the state / country after the name */
:root[data-theme="light"] #tpindex,
:root[data-theme="light"] #tknprices #buytknprice,
:root[data-theme="light"] #tknprices #selltknprice {
  color: black !important;
}
:root[data-theme="light"] #tpmonth {
  color: var(--accent-sell) !important;
}
:root[data-theme="light"] #tknprices span {
  font-weight: bold;
}
:root[data-theme="light"] #tknprices #buytknprice span {
  color: var(--accent-buy) !important;
}
:root[data-theme="light"] #tknprices #selltknprice span {
  color: var(--accent-sell) !important;
}

/* buy/sell action buttons: solid crimson/petrol-blue fills (the accent-buy/accent-sell pairing)
   instead of the default .bsbut pill gray. Both fills are dark/low-luminance themselves, so black
   label text only hit ~3:1 contrast (illegible) - white label + white value both read clearly
   (~6.5:1 on crimson, ~7.3:1 on the blue). */
:root[data-theme="light"] #buybp {
  background-color: var(--accent-buy);
  color: white;
}
:root[data-theme="light"] #sellbp {
  background-color: var(--accent-sell);
  color: white;
}
:root[data-theme="light"] #buybp span,
:root[data-theme="light"] #sellbp span {
  color: white !important;
}

/* #totval (title bar portfolio value) uses .toppltext's hollow-text trick by default - fill
   matches the background, only the accent-buy stroke shows, so it reads as an outline. Solid
   yellow fill + stroke instead here (size stays whatever its inline style says - same 42px for
   both themes); !important needed to beat those inline styles. */
:root[data-theme="light"] #totval {
  color: var(--accent-buy) !important;
  -webkit-text-stroke: 1px var(--accent-buy) !important;
}

/* light mode: the "PRIVATE BETA" line uses the same yellow as #totval (inline color, hence !important) */
:root[data-theme="light"] #privatebeta {
  color: var(--accent-buy) !important;
}

/* Singles (#portfolio-modal) and Strategies (#strategy-portfolio-modal) portfolio modals: all
   their gray text (headers, subtitles, totals, and the JS-injected non-negative PL/net values -
   see execu.js/strat.js's plColor/netColor/totalColor ternaries) reads through --text-dim/
   --text-muted. Redefining those two tokens locally on the modals turns all of that black
   without touching the colored values (--accent-buy, --accent-sell, --gauge-sell-red,
   --modal-error/--modal-success), which are separate tokens and cascade right through this. */
:root[data-theme="light"] #portfolio-modal,
:root[data-theme="light"] #strategy-portfolio-modal {
  --text-dim: black;
  --text-muted: black;
}

/* light mode: a darker background for the Singles portfolio, Strategies portfolio and Ideas modal boxes
   (the default is a near-white glass). Their text is black here, so keep this a mid-light gray - going
   much darker would make the black text hard to read. The ids beat .btn-glass-onyx2 and its :hover. */
:root[data-theme="light"] #portfolio-modal .login-modal,
:root[data-theme="light"] #strategy-portfolio-modal .login-modal,
:root[data-theme="light"] #strategy-modal .login-modal {
  background: rgba(170, 170, 170, 0.88);
}

/* Strategies portfolio (strat.js's buildSpreadRow-equivalent): volume/PL columns get bolded in
   light mode only, same intent as the Singles portfolio's bolded Buy/Sell/PL/Total PL (execu.js) -
   there those are inline styles since execu.js has no per-theme branching, but strat.js's rows
   are tagged with these classes instead so the weight can be scoped to light mode here. */
:root[data-theme="light"] .spread-vol-col,
:root[data-theme="light"] .spread-pl-col {
  font-weight: bold;
}

/* same deal for the BUY/SELL leg labels next to each city image - tagged with .spread-leg-label
   in strat.js so the weight can be scoped to light mode here. */
:root[data-theme="light"] .spread-leg-label {
  font-weight: bold;
}

/* app is a fixed single-screen mobile layout (absolute/fixed positioned panels) - lock the
   page itself so it can never scroll, even by the few stray pixels a rounding/margin quirk
   would otherwise allow */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

#app-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background-color: var(--bg-app-solid);
  background-image: radial-gradient( circle 660px at 0.4% 48%,  var(--bg-loading-gradient-a) 0%, var(--bg-loading-gradient-b) 97.5% );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  opacity: 1;
  transition: opacity 0.3s ease;
}

#app-loading-overlay.app-loading-hide {
  opacity: 0;
  pointer-events: none;
}

.app-loading-wordmark {
  font-family: 'Teko', sans-serif;
  font-size: 22px;
  font-weight: bold;
  color: var(--text-wordmark);
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.app-loading-skel {
  border-radius: 10px;
  background: linear-gradient(90deg, var(--bg-skel-a) 25%, var(--bg-skel-b) 37%, var(--bg-skel-a) 63%);
  background-size: 400% 100%;
  animation: app-loading-shimmer 1.4s ease infinite;
}

.app-loading-skel-bar {
  width: min(280px, 80vw);
  height: 14px;
  border-radius: 7px;
}

.app-loading-skel-circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.app-loading-skel-chart {
  width: min(320px, 85vw);
  height: 160px;
}

.app-loading-skel-row {
  display: flex;
  gap: 10px;
  width: min(320px, 85vw);
}

.app-loading-skel-btn {
  flex: 1 1 0;
  height: 30px;
  border-radius: 14px;
}

.app-loading-label {
  color: var(--text-muted);
  font-family: 'Teko', sans-serif;
  font-size: 15px;
  letter-spacing: 0.5px;
}

@keyframes app-loading-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.flex {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
  }


.fteko{
    font-family: 'Teko', sans-serif;
}

.fanton{
font-family: "Anton", sans-serif;
font-weight: 100;
font-style: light;
}


.fexo {
  font-family: "Exo 2", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* #iconbar: the right-edge icon bar, formatted like the desktop page's (wmage_dt.css .dt-iconbar-panel): a dark panel of round buttons,
   with the queen and knight together in a pill. */
.iconbar{
  position: fixed;
  right: 6px;
  top: calc(40% + 55px);
  width: max-content;
  box-sizing: border-box;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(13, 13, 13, 0.55) 0%, rgba(2, 2, 2, 0.38) 100%);
}
/* light mode: a lighter gray panel (the desktop one is near black); the light-gray buttons still stand out against it and the pale globe */
:root[data-theme="light"] .iconbar{
  background: linear-gradient(160deg, rgba(90, 90, 90, 0.72) 0%, rgba(70, 70, 70, 0.66) 100%);
}
/* a pill holding a few buttons together (the queen and knight: my positions) */
.icon-pill{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(60, 60, 60, 0.75);
}

/* launch greeting: centered in the empty upper half of the screen, typed out by navi.js startWelcomeMessage() */
#welcome-msg{
  position: fixed;
  left: 50%;
  top: 120px;
  width: 280px;
  margin-left: -140px;
  z-index: 2;
  display: none;
  text-align: center;
  white-space: pre-line; /* a \n in the typed text becomes a line break (textContent ignores <br>) */
  font-family: 'Teko', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.5px;
  color: lightgray;
  pointer-events: none;
}
:root[data-theme="light"] #welcome-msg{
  color: black;
}
#welcome-msg.typing::after{
  content: "|";
  margin-left: 1px;
  color: var(--accent-buy);
  animation: welcome-blink 0.8s steps(1) infinite;
}
@keyframes welcome-blink{
  50%{ opacity: 0; }
}

/* caption in the globe area's upper-left corner explaining the selected icon's presentation (globe.js
   updateGlobeCaption; its top is set by sizeGlobe). No background; the corner is clear of the round globe. */
#globe-caption{
  position: fixed;
  left: 14px;
  max-width: 270px;
  z-index: 2;
  font-family: 'Teko', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1;
  color: #a9a9a9; /* dark mode body: a notch below lightgray so it doesn't compete with the arcs */
  cursor: pointer; /* tap it to dismiss it (globe.js dismissGlobeCaption) */
  display: none;
}
:root[data-theme="light"] #globe-caption{
  color: black;
}
:root[data-theme="light"] #globe-caption b{
  color: var(--accent-sell); /* title: the navy accent, set apart from the black body */
}
#globe-caption b{
  color: var(--accent-buy); /* title: the orangered accent, set apart from the lightgray body (white was too close to read as different) */
  display: block;
  font-weight: 500;
  letter-spacing: 1px;
  padding-bottom: 2px;
}

.iconbar-btn{
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  font-size: 12px;
  user-select: none;
}
.iconbar-btn:hover{
  background: rgba(255, 255, 255, 0.14);
}
/* a drawing that is on (the eraser has no on state) */
.iconbar-btn.selected,
:root[data-theme="light"] .iconbar-btn.selected{
  color: var(--accent-buy);
  border-color: var(--accent-buy-soft-border);
}
/* the ENSO icon: three waves, drawn inline (Font Awesome 4.7 has none); takes the button's color */
.icon-waves{
  width: 1.5em;
  height: 1.5em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* the tropical storms icon: a two-armed spiral with an eye, drawn inline (Font Awesome 4.7 has none); takes the button's color */
.icon-storm{
  width: 1.5em;
  height: 1.5em;
}
.icon-storm path{
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-storm circle{
  fill: currentColor;
  stroke: none;
}
.icon-text{
  font-size: 15px;
  line-height: 1;
}
.icon-small{
  font-size: 10px;
  font-weight: 600;
}

/* globe.gl hover labels (.float-tooltip-kap, styled by globe.gl's own injected stylesheet with a
   `font:` shorthand - hence !important): Teko Light. Teko runs small, so the size is bumped from 12px. */
.float-tooltip-kap{
  font-family: 'Teko', sans-serif !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  color: gray !important;
  border: 1px solid dimgray !important;
  border-radius: 5px !important;
}
/* the spread's basis ("ENSO based") in the buy accent, "next month" in the blue. Dark mode: orangered and the
   city-marker blue; light mode: that mode's own accents (--accent-buy gold, --accent-sell navy). */
.float-tooltip-kap .gtip-basis{ color: var(--accent-buy); }
:root[data-theme="light"] .float-tooltip-kap .gtip-basis{ color: darkgoldenrod; } /* the light-mode box is near white, so bright yellow would vanish there */
:root:not([data-theme="light"]) .float-tooltip-kap .gtip-next{ color: var(--city-marker-blue); }
:root[data-theme="light"] .float-tooltip-kap .gtip-next{ color: var(--accent-sell); }
/* light mode: an almost white box (globe.gl's own default is a translucent black) */
:root[data-theme="light"] .float-tooltip-kap{ background: rgba(250, 250, 250, 0.95) !important; }

/* dark mode: inside the singles and strategies portfolio modals and the ideation (ideas) modal, the dark cyan (--accent-sell) and the
   bright cyan (--chart-cool-cyan) are swapped for the blue accent. Overriding the variables on the modal
   roots recolors every inline var() use below them (sell labels, notional, NM badge, ...) in one place. */
:root:not([data-theme="light"]) #portfolio-modal,
:root:not([data-theme="light"]) #strategy-portfolio-modal,
:root:not([data-theme="light"]) #strategy-modal {
  --accent-sell: var(--city-marker-blue);
  --chart-cool-cyan: var(--city-marker-blue);
}

/* Buy / Sell trade modals (single-city, prediction-market, and the spread trade modal): no dark cyan in
   either mode. Their sell-side colors come from --accent-sell, --chart-cool-cyan and the teal
   .drkbord border, so those are redefined on the modal roots - dark mode: the blue accent; light mode:
   its own sell accent (navy). Every inline var() use inside the modals picks the new value up. */
:root:not([data-theme="light"]) #buy-modal,
:root:not([data-theme="light"]) #sell-modal,
:root:not([data-theme="light"]) #predbuy-modal,
:root:not([data-theme="light"]) #predsell-modal,
:root:not([data-theme="light"]) #spread-trade-modal {
  --accent-sell: var(--city-marker-blue);
  --chart-cool-cyan: var(--city-marker-blue);
  --border-drkbord-teal: rgba(23, 107, 158, 0.5);
}
:root[data-theme="light"] #buy-modal,
:root[data-theme="light"] #sell-modal,
:root[data-theme="light"] #predbuy-modal,
:root[data-theme="light"] #predsell-modal,
:root[data-theme="light"] #spread-trade-modal {
  --chart-cool-cyan: var(--accent-sell);
  --border-drkbord-teal: rgba(30, 58, 138, 0.4);
}

/* Single Trades portfolio: the "B:" buy volume (inline --accent-buy yellow) and the "/CAT" suffix
   (inline darkgray) are too faint on the light panel, so darken both here (!important beats inline). */
:root[data-theme="light"] #portfolio-modal-body .pf-buy {
  color: #FFE100 !important;
}
:root[data-theme="light"] #portfolio-modal-body .pf-cat {
  color: dimgray !important;
}

.mainchart{

width: 340px;
height: 340px;
position: absolute;
left: 50%;
top: 0%;
margin-left: -2000px; /* off-screen until a market orb on the globe is tapped (navi.js pressTrade) */
margin-top: 72px; /* where the top map used to be, just under the title bar (was 92, then 82); sizeMainChart() adds the 10px back to the height so the bottom edge stays put */
z-index: 1;

}

.predchart{

width: 340px;
height: 335px;
position: absolute;
left: 50%;
top: 5%;
margin-left: -2000px;
margin-top: 280px;
z-index: 1;

}

/* the account name pill: same row as the "PRIVATE BETA" line, pinned to the title bar's right edge (under the PL) */
.acctname{
position: absolute;
right: 15px;
top: 42px; /* 3px under the PL's digits, on the "PRIVATE BETA" row */
font-size: 11px;
color: var(--accent-buy);
padding: 2px 20px;
background-color: var(--bg-app-solid);
border: 1px solid var(--border-black);
border-radius: 10px;
}

.titlebar{

width: 100%;
height: 50px;
position: absolute;
left: 0%;
top: 0%;
margin-left: 1px;
margin-top: 5px;
z-index: 10;

}

/* the trading panel's left info column (#mainchart-info): city picture, name, month, index traded, then the token prices */
/* #chart1 fills the right-hand box beside the info column; its svg is taken out of the flow so it never props that box open */
#chart1{
position: relative;
}
#chart1 > svg{
position: absolute;
left: 0;
top: 0;
}
.mainchart-info{
flex: 0 0 30%;
width: 30%;
box-sizing: border-box;
padding: 0 6px 0 8px;
text-align: left;
}
.tpimg{
display: block;
width: 100%;
height: 78px;
object-fit: cover;
border: 1px solid var(--accent-buy);
border-radius: 5px;
margin-bottom: 4px;
}
.tpcity{
color: var(--accent-sell);
font-size: 20px;
line-height: 1.05;
}
/* the month and the index traded share a row (the index text is smaller); it wraps below the month if it doesn't fit */
.tpmonthrow{
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 6px;
}
.tpmonth{
color: var(--accent-sell);
font-size: 20px;
line-height: 1.1;
}
.tpindex{
color: var(--text-muted);
font-size: 12px;
}
.tknprices{
margin-top: 10px; /* space between the index line and the token prices */
color: var(--text-muted);
font-size: 12px;
}


.drkbord{

border-color: var(--border-drkbord-teal);
border-radius: 10px;
border-style: solid;
border-width: 1px;

}

.drkbackg{

text-align: center;
border-color: var(--border-black);
border-radius: 10px;
padding: 5px 20px 5px 10px;
border-style: solid;
border-width: 1px;
background-color: var(--bg-app-solid); background-image: radial-gradient( circle 660px at 0.4% 48%,  var(--bg-panel-gradient-a) 0%, var(--bg-panel-gradient-b) 97.5% );

}

/*--border-color: rgba(0, 139, 139, 0.253);-------------------------------------------*/


.drkbackgpred{

text-align: center;
border-color: var(--border-black);
border-radius: 10px;
padding: 5px 20px 5px 10px;
border-style: solid;
border-width: 1px;
background-color: var(--bg-app-solid); background-image: radial-gradient( circle 660px at 0.4% 48%,  var(--bg-panel-gradient-a) 0%, var(--bg-panel-gradient-b) 97.5% );

}

/*--border-color: rgba(0, 139, 139, 0.253);-------------------------------------------*/

.drkbackgnobord{

text-align: center;
border-color: var(--border-black);
border-radius: 10px;
padding: 5px;
border-style: solid;
border-width: 1px;
background-color: var(--bg-app-solid); background-image: radial-gradient( circle 660px at 0.4% 48%,  var(--bg-panel-gradient-a) 0%, var(--bg-panel-gradient-b) 97.5% );

}


.ctbutton{

width: 350px; /* widened another 10px from 340px to fit the theme toggle next to the tutorial/exit icons */
height: auto; /* grows upward to fit the "VIEW" bracket row added above the trade-type buttons -
                 bottom stays pinned at 10px, so the buttons keep the same distance from the
                 screen edge instead of the box needing a hand-tuned taller fixed height */
position: absolute;
left: 50%;
bottom: 10px;
margin-left: -175px; /* half of width, so the panel is centered horizontally */

 border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  border-radius: 14px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);

z-index: 1;

}

.ideas-shine {
  position: relative;
  overflow: hidden;
  animation: ideas-glow 3.2s ease-in-out infinite;
}

.ideas-shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    var(--accent-ideas-shine) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  animation: ideas-sweep 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ideas-sweep {
  0% { left: -75%; }
  20% { left: 175%; }
  100% { left: 175%; }
}

@keyframes ideas-glow {
  0%, 60%, 100% { box-shadow: 0 0 0 var(--accent-ideas-glow-transparent); }
  20% { box-shadow: 0 0 10px 1px var(--accent-ideas-glow); }
}

.glbut{
  text-align: center;
  border-radius: 12px;
  padding: 5px 5px 5px 5px;
  background-color: var(--glbut-bg);
  color: var(--text-on-accent);

}

.glbut2{
  text-align: center;
  border-radius: 8px;
  padding: 5px 5px 5px 5px;
  background-color: var(--glbut2-bg);
  color: var(--text-on-accent);

}

.glbutpress{
  text-align: center;
  border-radius: 5px;
  padding: 1px 5px 1px 5px;
  background-color: var(--glbutpress-bg);
  color: var(--text-on-accent);

}

.onyxback{

background: var(--glass-bg);
backdrop-filter: blur(16px) saturate(160%);

}

.btn-glass-onyx {
  text-align: center;
  display: inline-block;
  padding: 10px 20px 10px 5px;
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  border-radius: 14px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  color: var(--text-primary);

  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 12px 30px var(--glass-shadow);
  transition: background 0.2s ease;
}
.btn-glass-onyx:hover {
  background: var(--glass-bg-hover);
}
.btn-glass-onyx:active {
  background: var(--glass-bg-active);
}
.btn-glass-onyx:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.btn-glass-onyx:disabled {
  opacity: 0.5;
  cursor: default;
}

.btn-glass-onyx2 {
  text-align: center;
  display: inline-block;
  padding: 10px 15px 10px 15px;
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  border-radius: 14px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  color: var(--text-primary);
   font-weight: 400;

  cursor: pointer;
  box-shadow: 0 12px 30px var(--glass-shadow);
  transition: background 0.2s ease;
}
.btn-glass-onyx2:hover {
  background: var(--glass-bg-hover);
}
.btn-glass-onyx2:active {
  background: var(--glass-bg-active);
}
.btn-glass-onyx2:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.btn-glass-onyx2:disabled {
  opacity: 0.5;
  cursor: default;
}

/* strategy-modal's exit button and its section-jump nav buttons - 10px shorter than a normal
   btn-glass-onyx2 (5px off top+bottom padding) with a smaller font, to fit more in the footer */
.strategy-nav-btn {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 13px;
}

/* the 4 section-jump buttons above the exit button: same size/background as .strategy-nav-btn,
   gray text with a dark gray border */
.strategy-nav-btn-section {
  color: var(--text-muted);
  border: 1px solid var(--glbut-bg);
}

.strategy-nav-btn-row {
  display: flex;
  gap: 8px;
  width: 100%;
}
.strategy-nav-btn-row .strategy-nav-btn {
  flex: 1 1 0;
}

/* footer row shared by the portfolio/strategy-portfolio/strategy modals: left half holds the
   singles/strategies/ideas view-switch icons, right half is the Exit button */
.modal-exit-row {
  display: flex;
  gap: 8px;
  width: 100%;
}
.modal-exit-row .modal-view-switch {
  display: flex;
  gap: 6px;
  flex: 1 1 50%;
}
.modal-exit-row .modal-view-switch .modal-view-btn {
  flex: 1 1 0;
}
.modal-exit-row .modal-exit-btn {
  flex: 1 1 50%;
}

/* strategy-modal's footer only: adds a tutorial trigger to the right of Exit, sized to match
   one of the singles/strategies/ideas view-switch buttons (1 part) - the view-switch group is
   3 of those buttons (3 parts, unchanged from the plain .modal-exit-row's 50%), so Exit shrinks
   from 3 parts to 2 to make room */
.modal-exit-row-tutorial .modal-view-switch {
  flex: 3 1 0;
}
.modal-exit-row-tutorial .modal-exit-btn {
  flex: 2 1 0;
}
.modal-exit-row-tutorial .modal-tutorial-btn {
  flex: 1 1 0;
}

/* used while a trade is being written to the database (executeBuy/executeSell/executeSpreadTrade),
   so a slow save can't be double-fired by a second click before the first finishes */
.btn-executing,
.btn-executing:disabled {
  background: var(--accent-buy-executing) !important;
  opacity: 1 !important;
  cursor: wait !important;
  color: var(--text-on-accent);
}




/* dark mode: the cyans inside #mainchart (city/month header, the SELL price, and the Sell Token Price value under the buttons) use the same blue; inline
   styles, hence !important. The #mrktbotarea fade is --mrktbot-gradient-b above. */
:root:not([data-theme="light"]) #mainchart #tpcity,
:root:not([data-theme="light"]) #mainchart #tpmonth,
:root:not([data-theme="light"]) #tradebar #sellbp span, /* the trade box sits outside #mainchart now */
:root:not([data-theme="light"]) #selltknprice span {
  color: var(--city-marker-blue) !important;
}

/* dark mode: the "PRIVATE BETA" line uses the city marker blue (inline style, hence !important) */
:root:not([data-theme="light"]) #privatebeta {
  color: var(--city-marker-blue) !important;
}

 .toppltext{
z-index: 3;
font-size: 40px;
color:var(--text-hollow-fill);
text-align: right;
align-items: center;
-webkit-text-stroke: 1px var(--accent-buy);
 }

.hollowtext{
z-index: 3;
color:var(--text-hollow-fill);
text-align: right;
align-items: center;
-webkit-text-stroke: 1px var(--accent-buy);
 }



/* button row inside the #countrytrade panel: portfolio/ideas share the remaining
   space evenly, the tutorial trigger and exit button are fixed-size icon buttons at the end */
.countrytrade-btn-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.countrytrade-flex-btn {
  flex: 1 1 0;
  background-color: var(--pillbutton-bg);
  padding: 5px;
  border-radius: 14px;
  cursor: pointer;
}
.countrytrade-icon-btn {
  flex: 0 0 auto;
  background-color: var(--pillbutton-bg);
  padding: 5px 11px;
  border-radius: 14px;
  cursor: pointer;
}

/* the "?" (tour) and X (close) icons: their own small pill at the right of the 10YR / Curve / Market row. Icon color
   stays var(--accent-buy) in both themes (already crimson in light, orangered in dark) - only the pill itself needs
   a per-theme background. */
.panel-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
  border-radius: 14px;
  background-color: black;
}
:root[data-theme="light"] .panel-pill {
  background-color: #3a3a3a;
}
/* light mode: the ? and X are light gray on the dark gray pill (!important beats the white that #mainchart's light-mode rule forces) */
:root[data-theme="light"] #panel-pill i {
  color: lightgray !important;
}

/* light mode: the buttons inside #countrytrade (Portfolio, Ideas, tour, theme, exit) get a dark backing -
   same #3a3a3a as the trading-panel "?" bubble above - so the yellow icons read clearly. Their labels
   are inline-styled to --text-dim (gray in light mode), which would be too faint on dark, so those go
   light gray here (!important beats the inline style). */
:root[data-theme="light"] #countrytrade .countrytrade-flex-btn,
:root[data-theme="light"] #countrytrade .countrytrade-icon-btn {
  background-color: #3a3a3a;
}
:root[data-theme="light"] #countrytrade .countrytrade-flex-btn > div,
:root[data-theme="light"] #countrytrade .countrytrade-icon-btn > div {
  color: lightgray !important;
}

/* light mode, same treatment for the menu buttons in the Singles portfolio, Strategies portfolio and
   Ideas modals (view switch icons, Exit, tour, and the ST Arb / ENSO / NAO section buttons): a dark
   #3a3a3a backing with light gray labels. The <i> icons keep their own inline accent colors. */
:root[data-theme="light"] #portfolio-modal button.btn-glass-onyx2,
:root[data-theme="light"] #strategy-portfolio-modal button.btn-glass-onyx2,
:root[data-theme="light"] #strategy-modal button.btn-glass-onyx2 {
  background: #3a3a3a;
  color: lightgray;
}

/* theme toggle icon in #countrytrade's footer row: pure-CSS sun/moon swap keyed off
   [data-theme] on <html> so there's no flash-of-wrong-icon while JS is still loading -
   toggleTheme() (index.html) only ever flips the attribute + localStorage */
.theme-toggle-icon:before {
  content: "\f185"; /* fa-sun-o - shown while dark is active, click to go light */
}
:root[data-theme="light"] .theme-toggle-icon:before {
  content: "\f186"; /* fa-moon-o - shown while light is active, click to go dark */
}

/* driver.js popover re-skinned to match the app's glass/onyx modal look instead of its
   default white theme */
.driver-popover.wmage-tour-popover {
  background: var(--glass-bg-elevated);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  border-radius: 14px;
  color: var(--text-primary);
}
.wmage-tour-popover .driver-popover-title {
  color: var(--accent-buy);
}
:root[data-theme="light"] .wmage-tour-popover .driver-popover-title {
  color: var(--accent-sell); /* light mode's --accent-buy is yellow, hard to read on the light card */
}
.wmage-tour-popover .driver-popover-description {
  color: var(--text-secondary);
}
.wmage-tour-popover .driver-popover-footer button {
  text-shadow: none;
  background: var(--border-faint);
  color: var(--text-primary);
  border: 1px solid var(--glass-border);
}
.wmage-tour-popover .driver-popover-footer button:hover {
  background: var(--border-hover-fill);
}
.wmage-tour-popover .driver-popover-progress-text {
  color: var(--text-muted);
}

.login-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--modal-overlay);
}

.login-modal {
  width: 280px;
  max-width: 85vw;
  padding: 28px 24px 24px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* singles and strategies portfolio modals open at the same fixed vertical size regardless of
   how many positions each has - their scrollable body areas (portfolio-modal-body /
   spread-portfolio-modal-scroll) flex-grow to fill it instead of sizing off their content */
#portfolio-modal .login-modal,
#strategy-portfolio-modal .login-modal {
  height: min(640px, 82vh);
}

#portfolio-modal .login-modal,
#strategy-portfolio-modal .login-modal,
#strategy-modal .login-modal {
  max-height: calc(100vh - 20px);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

.login-modal h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.login-modal p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.login-modal p.login-modal-error {
  color: var(--modal-error);
}

.login-modal p.login-modal-success {
  color: var(--modal-success);
}

.login-modal button {
  width: 100%;
}

.bsbut {
font-size: 10px;
color:var(--text-dim);
background-color: var(--pillbutton-bg-alt);
padding: 5px; border-radius: 14px;

}

.bsbut-active {
background-color: var(--text-muted);
color: var(--bsbut-active-text);
}

#buybp, #sellbp {
font-size: 14px;
text-align: center; /* label and value centred in the button */
}

#predbuybp, #predsellbp {
font-size: 17px;
}






/*---------------------------------------------*/

.chartsizemob {
  height: 300px;
  width: auto;
  }

/* html/body are 100% x 100% and sit above the z-index:-1 globe, so they would swallow every mouse
   drag meant for it. Let events fall through them; their direct children (every panel, #mainb)
   turn pointer events back on, and descendants inherit that. */
html, body{
  pointer-events: none;
}
body > *{
  pointer-events: auto;
}

/* globe.gl container: full-window layer behind the UI (globe.js) */
#mainb{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  touch-action: none; /* a drag that starts on the globe (or on one of its orbs) rotates the globe, never pans the page */
  overscroll-behavior: none;
}

/* ===================================================
   Strategy panel (strat.js)
=================================================== */

#sp_internal {
  display: block;
  width: 100%;
  box-sizing: border-box;
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  text-align: left;
}

.strat-subtitle {
  font-size: 15px;
   color: var(--border-subtitle-dim);
  margin: 2px 0 8px 0;
}

.strat-next-month-divider {
  color: var(--accent-sell);
  padding-top: 15px;
  padding-bottom: 15px;
}

/* wraps a type's next-month divider + duplicate rows so the whole block reads as visually
   distinct from the prompt-month rows above it while scrolling */
.strat-next-month-section {
  background: var(--strat-next-month-bg);
  border-radius: 6px;
}

.strat-next-month-section .strat-next-month-divider {
  padding-left: 6px;
}

.strat-next-month-section .strat-row {
  padding-left: 8px;
  padding-right: 8px;
}

.strat-subtitle-enso {
  padding: 30px 0 10px 0;
}

.strat-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border-subtle);
}

.strat-header {
  padding: 0 4px 6px 4px;
  border-bottom: 1px solid var(--border-strong);
}

.strat-header .strat-header-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--border-label-dim);
}

.strat-header-slider {
  justify-content: center;
}

.strat-row:last-child {
  border-bottom: none;
}

.strat-col-cities {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 110px;
}

.strat-city {
  display: flex;
  align-items: center;
  gap: 6px;
}

.strat-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.strat-row-starb .strat-thumb {
  width: 31px;
  height: 31px;
}

.strat-cityname {
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.strat-enso-image {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 6px;
  margin: 0 0 10px 0;
}

.strat-enso-desc {
  font-family: "Anton", sans-serif;
  font-weight: 100;
  font-style: light;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-muted);
  margin: 0 0 10px 0;
}

.strat-correl-bubble {
  align-self: center;
  font-size: 14px;
  line-height: 1.3;
  color: var(--accent-buy);
  background: var(--border-faint);
  border: 1px solid var(--border-medium);
  border-radius: 10px;
  padding: 4px 8px;
  white-space: normal;
  text-align: center;
}

.strat-row-starb .strat-correl-bubble {
  font-size: 11px;
  color: var(--accent-sell);
  background: none;
  border: none;
  padding: 4px 0;
}

/* connector line for ST Arb rows only: a vertical line from the bottom of city1's thumb to the
   top of city2's thumb, with a short branch pointing at the "xx% R^2" bubble sitting between
   them. top/bottom are both set to the .strat-row-starb thumb's 31px height, which pins the
   line's ends to the thumb edges regardless of the bubble's own height, and also means the
   line's vertical midpoint always lands exactly on the column's 50% mark - so the branch just
   needs top:50% to hit it, no separate midpoint math needed. left:15px is the thumb's center
   (31px / 2). */
.strat-row-starb .strat-col-cities {
  position: relative;
}

.strat-row-starb .strat-col-cities::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 31px;
  bottom: 31px;
  width: 1px;
  background: var(--glass-border-top);
}

.strat-row-starb .strat-col-cities::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 15px;
  height: 1px;
  background: var(--glass-border-top);
  transform: translateY(-50%);
}

.strat-correl-bubble-gray {
  color: var(--text-muted);
}

.strat-correl-bubble-label {
  font-size: 11px;
}

/* Ideation modal, ENSO/NAO (type 2/3) rows in light mode: the bubble between the two cities sits on
   a dark gray fill so its yellow "avg ... spread" label stands out; the month and value inside it
   (.strat-correl-bubble-gray, --text-muted by default - too dim on dark gray) go light gray.
   ST Arb rows (.strat-row-starb) keep their plain no-background bubble. */
:root[data-theme="light"] .strat-row:not(.strat-row-starb) .strat-correl-bubble {
  background: #4A4A4A;
  border-color: #3A3A3A;
}
:root[data-theme="light"] .strat-row:not(.strat-row-starb) .strat-correl-bubble-gray {
  color: #D0D0D0;
}

.strat-col-merge {
  flex: 0 0 18px;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.strat-merge-icon {
  width: 18px;
  height: 100%;
  min-height: 30px;
}

.strat-merge-icon line,
.strat-merge-icon .strat-merge-arm {
  stroke: var(--glass-border-top);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.strat-merge-icon .strat-merge-out {
  stroke: var(--accent-buy);
}

.strat-merge-icon circle {
  fill: var(--accent-buy);
}

.strat-col-slider {
  flex: 1 1 auto;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.strat-gauge-track {
  position: relative;
  flex: 1 1 auto;
  height: 8px;
  background: var(--gauge-track-bg);
  border-radius: 4px;
  overflow: hidden;
}

/* light mode: dark gray gauge tracks so the fill colors stand out (--gauge-track-bg is a mid tan-gray there) */
:root[data-theme="light"] .strat-gauge-track {
  background: #4A4A4A;
}

.strat-gauge-center {
  position: absolute;
  left: 50%;
  top: -2px;
  width: 1px;
  height: 12px;
  background: var(--glass-border-top);
  z-index: 2;
}

.strat-gauge-tick {
  position: absolute;
  top: -2px;
  width: 1px;
  height: 12px;
  background: var(--gauge-tick-color);
  z-index: 2;
}

.strat-gauge-fill {
  position: absolute;
  top: 0;
  height: 100%;
  width: 0%;
  left: 50%;
  border-radius: 4px;
  transition: left 0.3s ease, width 0.3s ease, background 0.3s ease;
}

.strat-gauge-fill.strat-fill-sell {
  background: var(--accent-buy);
}

.strat-gauge-fill.strat-fill-buy {
  background: var(--gauge-buy-green);
}

/* light mode: the green/blue fills are lightened so they read against the dark gray track */
:root[data-theme="light"] .strat-gauge-fill.strat-fill-buy {
  background: #4ADE80;
}
:root[data-theme="light"] .strat-gauge-fill-curve.strat-fill-sell,
:root[data-theme="light"] .strat-gauge-fill-curve.strat-fill-buy {
  background: #6E9BF2;
}

/* curve gauge (type 2 strats) always shows dark blue, regardless of sign, to set it apart from the market gauge above it */
.strat-gauge-fill-curve.strat-fill-sell,
.strat-gauge-fill-curve.strat-fill-buy {
  background: var(--gauge-curve-blue);
}

.strat-gauge-value {
  flex: 0 0 34px;
  text-align: right;
  font-size: 12px;
  color: var(--text-dim);
}

.strat-gauge-value:not(.strat-gauge-value-standalone) {
  font-size: 14px;
}

.strat-col-slider-dual {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 2px 10px;
}

.strat-gauge-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.strat-gauge-value.strat-gauge-value-standalone {
  flex: 0 0 auto;
  padding: 0 2px;
}

.strat-gauge-label {
  flex: 0 0 26px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--border-label-dim);
}

.strat-col-trigger {
  flex: 0 0 40px;
  text-align: center;
  font-size: 14px;
  color: var(--text-dim);
}

.strat-col-button {
  flex: 0 0 52px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.strat-trade-btn {
  font-size: 10px;
  line-height: 1.2;
  color: var(--text-dim);
  background-color: var(--pillbutton-bg);
  border: none;
  border-radius: 10px;
  padding: 6px 4px;
  width: 100%;
  white-space: normal;
  word-break: break-word;
}

.strat-trade-btn:not(.strat-buy):not(.strat-sell) {
  font-size: 14px;
}

.strat-trade-btn.strat-buy {
  color: var(--gauge-buy-green);
}

.strat-trade-btn.strat-sell {
  color: var(--gauge-sell-red);
}

/* chart2's 2nd series (navi.js's updatePredMarketChart(): the NO/"cooler" side of a prediction
   market, series[1]/ct-series-b) - cyan to stay visually paired with predsellbp's darkcyan
   COOLER label. #chart2-scoped so this wins over dcagcolors2.css's generic .ct-series-b rules
   (loaded after this file) without touching that shared stylesheet. */
#chart2.ct-chart .ct-series-b .ct-line {
  stroke: var(--chart-cool-cyan);
  stroke-width: 2px;
}

#chart2.ct-chart .ct-series-b .ct-point {
  stroke: var(--chart-cool-cyan);
  stroke-width: 1px;
  stroke-linecap: round;
}

/* #mdif's delta icon (wmbars.js/index.html) - Font Awesome 4.7 has no delta glyph, so this is
   the literal Greek character (&Delta;) instead of an <i class="fa ..."> icon; bolded so it
   still reads as an icon-weight glyph inline with the surrounding text. */
.fa-delta {
  font-weight: bold;
}


/* ---------------------------------------------------
   Globe market orbs (globe.js showGlobeOrbs): a small glowing orb on every tradable location - cyan for the
   temperature cities, darkviolet for the snowfall resorts. The element is zero-size and the orb is drawn centered
   on it, so it sits exactly on the location. The invisible ::after circle makes the tap target bigger than the dot.
--------------------------------------------------- */
.gorb{
  touch-action: none;
  --orb-core: #e6ffff;
  --orb-mid: #00e5ff;
  --orb-glow: 0, 229, 255; /* rgb of the glow, used with different alphas below */
  --orb-scale: 0.35; /* overall size, glow included (1 = the original 8px orb) */
  position: relative;
  width: 0;
  height: 0;
  pointer-events: auto;
  cursor: pointer;
}
.gorb::after{
  content: '';
  position: absolute;
  left: -14px;
  top: -14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.gorb::before{
  content: '';
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: scale(var(--orb-scale)); /* scales the orb and its glow together, around its center */
  background: radial-gradient(circle at 38% 35%, var(--orb-core) 0%, var(--orb-mid) 55%, rgba(var(--orb-glow), 0.6) 100%);
  box-shadow:
    0 0 5px 1px rgba(var(--orb-glow), 0.9),
    0 0 12px 4px rgba(var(--orb-glow), 0.45),
    0 0 22px 8px rgba(var(--orb-glow), 0.18);
}
/* light mode: the app's light-mode gold (--accent-buy, #FFE100), with a slightly deeper glow so it shows on the pale globe */
:root[data-theme="light"] .gorb{
  --orb-core: #fff9c2;
  --orb-mid: #FFE100;
  --orb-glow: 255, 200, 0;
}
/* market name beside the orb: shown only while the globe is zoomed in far enough (globe.js adds .gl-labels to #mainb at an altitude
   of GLOBE_LABEL_ALTITUDE or closer). It is a child of the orb, so pressing it is pressing the orb. */
.gorb-label{
  position: absolute;
  left: 8px;
  top: -9px;
  line-height: 18px;
  white-space: nowrap;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
#mainb.gl-labels .gorb-label{
  opacity: 1;
}
:root[data-theme="light"] .gorb-label{
  color: #1a1a1a;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9), 0 0 6px rgba(255, 255, 255, 0.7);
}
/* snowfall resorts: darkviolet in both themes (the second selector outranks the light-mode cyan above) */
.gorb.gorb-snow,
:root[data-theme="light"] .gorb.gorb-snow{
  --orb-core: #f0d9ff;
  --orb-mid: #9400d3;
  --orb-glow: 148, 0, 211;
}


/* =============================================================================================================
   #chart1: the SVG price chart (chart_dt.js, shared with the desktop page; wmbars.js feeds it). It replaced the Chartist
   line chart and the two side bars. The zone above the market fades in the old top bar's color and the zone below in the
   old bottom bar's (--mrkttop-gradient-a / --mrktbot-gradient-b), so both themes keep their colors. Dark mode is the
   default look; the light-mode block after it swaps the white strokes and labels for dark ones on the gray panel.
   ============================================================================================================= */
#chart1 .dt-chart {
  display: block;
  overflow: visible;
  --zone-up: var(--mrkttop-gradient-a);
  --zone-down: var(--mrktbot-gradient-b);
}
#chart1 .dt-chart-stop-up { stop-color: var(--zone-up); }
#chart1 .dt-chart-stop-down { stop-color: var(--zone-down); }
#chart1 .dt-chart-frame { fill: rgba(255, 255, 255, 0.02); stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }
#chart1 .dt-chart-grid { stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; }
#chart1 .dt-chart-grid-mid { stroke: rgba(255, 255, 255, 0.22); stroke-dasharray: 3 3; }
#chart1 .dt-chart-grid-day { stroke: rgba(255, 255, 255, 0.05); }
#chart1 .dt-chart-label { fill: rgba(255, 255, 255, 0.55); font-family: inherit; font-size: 10px; }
#chart1 .dt-chart-label-raw { fill: rgba(255, 255, 255, 0.7); } /* the index-unit labels (the old top / bottom numbers) */
#chart1 .dt-chart-actual { stroke: #ffffff; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
#chart1 .dt-chart-forecast { stroke: #b794ff; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
#chart1 .dt-chart-baseline { stroke: rgba(255, 255, 255, 0.42); stroke-width: 1.3; stroke-dasharray: 4 3; }
#chart1 .dt-chart-history { stroke: var(--accent-buy); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; } /* the market's recent ticks */
#chart1 .dt-chart-curve-dot { fill: #ffffff; }
#chart1 .dt-chart-curve-label { fill: rgba(255, 255, 255, 0.85); font-family: inherit; font-size: 9px; font-weight: 600; letter-spacing: 0.5px; }
#chart1 .dt-chart-level { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; stroke-dasharray: 2 3; }
#chart1 .dt-chart-dot { fill: #ffffff; }
#chart1 .dt-chart-dot-glow { fill: rgba(255, 255, 255, 0.28); }
#chart1 .dt-chart-value-bg { fill: rgba(0, 0, 0, 0.7); stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; }
#chart1 .dt-chart-value { fill: #ffffff; font-family: inherit; font-size: 10px; font-weight: 600; }
#chart1 .dt-chart-empty { fill: rgba(255, 255, 255, 0.4); font-family: inherit; font-size: 12px; }

/* light mode: the panel is mid-gray, so labels and gridlines go dark; the white curve and the dot read fine on it */
:root[data-theme="light"] #chart1 .dt-chart-frame { fill: rgba(255, 255, 255, 0.06); stroke: rgba(0, 0, 0, 0.3); }
:root[data-theme="light"] #chart1 .dt-chart-grid { stroke: rgba(0, 0, 0, 0.2); }
:root[data-theme="light"] #chart1 .dt-chart-grid-mid { stroke: rgba(0, 0, 0, 0.38); }
:root[data-theme="light"] #chart1 .dt-chart-grid-day { stroke: rgba(0, 0, 0, 0.1); }
:root[data-theme="light"] #chart1 .dt-chart-label { fill: rgba(0, 0, 0, 0.7); }
:root[data-theme="light"] #chart1 .dt-chart-label-raw { fill: rgba(0, 0, 0, 0.85); }
:root[data-theme="light"] #chart1 .dt-chart-forecast { stroke: var(--chart-forecast-violet); }
:root[data-theme="light"] #chart1 .dt-chart-baseline { stroke: rgba(255, 255, 255, 0.7); }
:root[data-theme="light"] #chart1 .dt-chart-level { stroke: rgba(0, 0, 0, 0.55); }
:root[data-theme="light"] #chart1 .dt-chart-empty { fill: rgba(0, 0, 0, 0.55); }

/* light mode: the up / down zones fade in at 0.8 opacity at the plot's top and bottom edges (chart_dt.js draws them at 0.5, which
   washes out on the gray panel); they still fade to nothing at the market level. The edge stop is the up gradient's first
   stop and the down gradient's last one. */
:root[data-theme="light"] #chart1 .dt-chart-stop-up:first-child { stop-opacity: 0.8; }
:root[data-theme="light"] #chart1 .dt-chart-stop-down:last-child { stop-opacity: 0.8; }


/* the ENSO wrap's color scale inside the globe caption (globe_enso.js): a bar and its three tick labels under the caption text */
#globe-caption .enso-bar{
  display: block;
  width: 170px;
  height: 7px;
  margin-top: 5px;
  border-radius: 4px;
  background: linear-gradient(90deg, #0000cd 0%, #00bfff 25%, #ffffff 50%, #ffd700 68%, #ff4500 85%, #8b0000 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
:root[data-theme="light"] #globe-caption .enso-bar{
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}
#globe-caption .enso-ticks{
  display: flex;
  justify-content: space-between;
  width: 170px;
  padding-top: 1px;
  font-size: 14px;
}


/* the ENSO tab's live sea surface temperature picture (strat.js loadEnsoSst): shown whole on a dark background (the continents are
   transparent in it, so they read as the panel), with its color scale and the Niño 3.4 line under it */
.strat-enso-image.strat-enso-sst{
  height: auto;
  background: #1c1f24;
  margin-bottom: 4px;
}
.strat-enso-image.strat-enso-sst[hidden]{
  display: none;
}
.strat-sst-bar{
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, #0000cd 0%, #00bfff 25%, #ffffff 50%, #ffd700 68%, #ff4500 85%, #8b0000 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.strat-sst-ticks{
  display: flex;
  justify-content: space-between;
  padding: 2px 0 4px;
  font-size: 11px;
  color: var(--text-muted);
}
.strat-sst-info{
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-muted);
  margin: 0 0 10px 0;
}

/* polar vortex controls (globe_vortex.js): a slim bar above the bottom buttons, left of the icon bar; only shown while the snowflake icon is on */
#vortex-bar{
  position: fixed;
  left: 14px;
  right: 46px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
  z-index: 5;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(13, 13, 13, 0.62) 0%, rgba(2, 2, 2, 0.5) 100%);
  color: #cfcfcf;
  font-family: 'Teko', sans-serif;
  font-size: 17px;
  line-height: 1;
}
:root[data-theme="light"] #vortex-bar{
  background: linear-gradient(160deg, rgba(90, 90, 90, 0.78) 0%, rgba(70, 70, 70, 0.72) 100%);
  color: #fff;
}
#vortex-play{
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  padding: 0;
  cursor: pointer;
}
#vortex-day{
  flex: 1 1 auto;
  min-width: 0;
  accent-color: #78ebff;
}
#vortex-date{
  flex: 0 0 auto;
  min-width: 62px;
  text-align: right;
  white-space: nowrap;
}


/* tropical storm controls (globe_tropical.js): previous / next storm, the storm's name and the detail level; sits where the polar vortex bar does */
#tropical-bar{
  position: fixed;
  left: 14px;
  right: 46px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
  z-index: 5;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(13, 13, 13, 0.62) 0%, rgba(2, 2, 2, 0.5) 100%);
  color: #cfcfcf;
  font-family: 'Teko', sans-serif;
  font-size: 17px;
  line-height: 1;
}
#tropical-prev, #tropical-next{
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  padding: 0;
  cursor: pointer;
}
#tropical-name{
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
#tropical-detail{
  flex: 0 0 auto;
  min-width: 78px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Teko', sans-serif;
  font-size: 16px;
  padding: 0 10px;
  cursor: pointer;
}