/* =========================================================
   tsl210.css (FULL UPDATED) - v2
   - Premium "finance terminal" polish
   - Written Archive added to right rail
   - Archive search box styling included
   - Lens Brief episode list styling added
   - No HTML/JS changes required beyond the archive/podcast hooks
   - ✅ FIX: iPad Mini / tablet layout stabilized
   - ✅ FIX: Europe + Asia secondary city/time labels show on tablet
   - ✅ FIX: Commodity / Currency / Crypto secondary labels aligned on desktop + tablet
   - ✅ FIX: U.S. heading placement on iPad-mini-style widths
   - ✅ FIX (COMBINED): Keeps your *correct* iPad-mini heading/grid rules
                         AND keeps your *premium* Lens Brief audio player styling
   - ✅ NEW FIX: Hero image now shows full image without cropping
   - ✅ NEW: Adds "Play on MP3 Player" button styling
   - ✅ NEW: Adds premium standalone MP3 player modal styling
   - ✅ NEW FIX: Mobile popups/modals now start below ticker and fit viewport better
   ========================================================= */

/* 0. RESET & BASE LAYOUT */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: clip;
  max-width: 100%;
}

html {
  scroll-behavior: smooth;
}

:root{
  --bg: #020617;
  --bg2: #030a1a;
  --panel: #f9fafb;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --muted2: #cbd5f5;
  --ink: #0f172a;
  --ink2: #0b1220;
  --borderDark: #111827;
  --borderLight: #e5e7eb;
  --blue: #60a5fa;
  --blue2:#0369a1;
  --spotify:#1DB954;
  --radius: 16px;
  --radiusSm: 12px;
  --shadow1: 0 10px 28px rgba(15,23,42,.18);
  --shadow2: 0 16px 40px rgba(15,23,42,.22);
  --shadow3: 0 22px 70px rgba(2,6,23,.35);
}

::selection{
  background: rgba(96,165,250,0.28);
}

/* =========================================================
   ✅ MOBILE TAP HIGHLIGHT / "BLUE SQUARE" REMOVAL (CSS ONLY)
   ========================================================= */
*{
  -webkit-tap-highlight-color: transparent;
}

a, button,
.circle, .label-circle,
.news-logo-square,
.header-link, .dropbtn,
.side-menu .section, .side-menu a,
.node .factor-cycle-btn,
.node-system .rundown a, .node-system .share-link a{
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Remove default focus outline on touch taps, but KEEP for keyboard via :focus-visible */
:where(
  a, button, [role="button"],
  .circle, .label-circle,
  .news-logo-square,
  .header-link, .dropbtn,
  .side-menu .section, .side-menu a,
  .node .factor-cycle-btn,
  .node-system .rundown a, .node-system .share-link a
):focus:not(:focus-visible){
  outline: none;
}

/* Nice “pressed” feel on touch devices (no blue overlay) */
@media (hover: none) and (pointer: coarse){
  .circle:active,
  .label-circle:active{
    transform: translateY(0) scale(0.98);
  }

  .node-system .rundown a:active,
  .node-system .share-link a:active,
  .side-menu .section:active,
  .side-menu .submenu a:active,
  .side-menu > ul > li > a:active,
  .header-link:active,
  button:active{
    opacity: 0.88;
  }

  .news-logo-square:active{
    filter: brightness(1.15);
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: radial-gradient(1200px 700px at 50% -10%, rgba(96,165,250,0.10), transparent 55%),
              radial-gradient(900px 600px at 10% 20%, rgba(34,197,94,0.06), transparent 55%),
              radial-gradient(900px 600px at 90% 30%, rgba(239,68,68,0.05), transparent 55%),
              var(--bg);
  color: var(--text);
  overflow-x: clip;
}

/* subtle scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }

.content-wrapper {
  flex: 1;
  position: relative;
  min-height: auto;
  width: 100%;
}

/* 1. HEADER */
header {
  background: rgba(2,6,23,0.78);
  color: #f9fafb;
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 1200;
  border-bottom: 1px solid rgba(17,24,39,0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 100%;
}

header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,0.35), transparent);
  pointer-events:none;
}

.hamburger {
  display: inline-block !important;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: #e5e7eb;
  margin-right: 16px;
  z-index: 1300;
  transition: transform .15s ease, color .15s ease;
}

.hamburger:hover {
  color: var(--blue);
  transform: translateY(-1px);
}
.hamburger:active { transform: translateY(0); }

.logo-container {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
}

.logo {
  height: 32px;
  margin-right: 0;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
}

.logo-text {
  font-size: 18px;
  font-weight: 720;
  letter-spacing: 0.02em;
  color: #f9fafb;
}

.main-nav {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.header-link {
  color: #e5e7eb;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(31,41,55,0.9);
  background: rgba(2,6,23,0.55);
  transition: border-color .15s ease, color .15s ease, transform .15s ease, background .15s ease;
}

.header-link i { font-size: 14px; }

.header-link:hover {
  border-color: rgba(96,165,250,0.65);
  color: #f9fafb;
  background: rgba(96,165,250,0.10);
  transform: translateY(-1px);
}
.header-link:active{ transform: translateY(0); }

/* 2. SLIDE-OUT SIDE-MENU */
.side-menu {
  position: fixed;
  top: 60px;
  left: 0;
  /* Scales with viewport: narrow on phones, proportional on tablets, capped on desktop */
  width: clamp(260px, 75vw, 320px);
  height: calc(100% - 60px);
  background: rgba(2,6,23,0.92);
  color: #e5e7eb;
  padding: 20px 10px;
  transform: translateX(calc(-100% - 10px));
  transition: transform .3s ease;
  z-index: 1100;
  overflow-y: auto;
  border-right: 1px solid rgba(17,24,39,0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.side-menu.open::after{
  content:"";
  position: fixed;
  inset: 60px 0 0 0;
  background: rgba(2,6,23,0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: -1;
}

.side-menu.open { transform: translateX(0); }

.side-menu .section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 8px;
  font-weight: 650;
  cursor: pointer;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 8px;
  color: #e5e7eb;
  transition: background .15s ease;
}

.side-menu .section:hover { background: rgba(96,165,250,0.08); }

.side-menu .toggle {
  transition: transform .3s ease, color .15s ease;
  font-size: 11px;
  color: #9ca3af;
}

.expandable.open .toggle {
  transform: rotate(45deg);
  color: var(--blue);
}

.side-menu .submenu {
  display: none;
  margin: 4px 0 10px 18px;
  list-style: none;
  padding: 0;
}

.side-menu .expandable { margin-block-end: 2px; }

.side-menu a,
.side-menu a:visited {
  color: #d1d5db;
  text-decoration: none;
  font-size: 13px;
}

.side-menu .submenu a {
  display: block;
  padding: 5px 0 5px 22px;
  position: relative;
  font-weight: 450;
  transition: color .15s ease;
}

.side-menu .submenu a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border: 1px solid rgba(107,114,128,0.9);
  border-radius: 50%;
  background: rgba(2,6,23,0.9);
}

.side-menu .submenu a:hover,
.side-menu > ul > li > a:hover {
  color: #f9fafb;
}

.side-menu > ul > li > a {
  display: block;
  padding: 9px 8px;
  font-weight: 650;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}

.side-menu > ul > li > a:hover{ background: rgba(96,165,250,0.08); }

.side-menu ul {
  list-style: none;
  margin: 0;
  padding: 0 0 60px;
}

.welcome {
  padding: 10px 8px;
  font-weight: 550;
  font-size: 13px;
  opacity: .95;
  border-bottom: 1px solid rgba(17,24,39,0.9);
  margin-bottom: 10px;
}

.brand {
  margin-top: auto;
  padding: 12px 8px;
  font-size: 12px;
  text-align: center;
  opacity: .65;
  transition: opacity .15s ease;
}

.brand:hover { opacity: .85; }

/* 3. LEGACY DROPDOWNS */
.dropdown { position: relative; }

.dropbtn {
  background: none;
  border: none;
  color: #f9fafb;
  font-size: 13px;
  cursor: pointer;
  padding: 8px;
}

.dropbtn a {
  color: inherit;
  text-decoration: none;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #f9fafb;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  z-index: 10;
  border-radius: 10px;
  overflow: hidden;
}

.dropdown-content a {
  display: block;
  padding: 10px 12px;
  color: #0f172a;
  text-decoration: none;
}

.dropdown-content a:hover { background: #e5e7eb; }

.dropdown:hover .dropdown-content { display: block; }

/* 4. STOCK-TICKER */
.stock-tickers {
  background: rgba(2,6,23,0.9);
  overflow: hidden;
  padding: 10px 20px;
  white-space: nowrap;
  border-bottom: 1px solid rgba(17,24,39,0.9);
  position: relative;
  width: 100%;
  /* The ticker is a single-line strip (~42px on every view). Cap its box so it
     can never grow tall if its content momentarily stacks — a tall ticker box
     inflated the chrome-height measurement and pushed the page content down,
     leaving a gap under the ticker on load. Single-line height is unaffected. */
  max-height: 42px;
}

.stock-tickers::before,
.stock-tickers::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 70px;
  z-index: 2;
  pointer-events:none;
}
.stock-tickers::before{
  left:0;
  background: linear-gradient(90deg, rgba(2,6,23,0.95), transparent);
}
.stock-tickers::after{
  right:0;
  background: linear-gradient(270deg, rgba(2,6,23,0.95), transparent);
}

.ticker-wrapper { overflow: hidden; }

.ticker-content {
  display: inline-block;
  white-space: nowrap;
  animation: ticker-scroll 34s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 80px;
  font-size: 13px;
  color: #e5e7eb;
}

.ticker-symbol { font-weight: 700; color: #e5e7eb; }

.ticker-price {
  margin: 0 2px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ticker-arrow { vertical-align: middle; }

/* 5. NODE-NETWORK & VISUALS */
.node-network-container {
  position: relative;
  padding: 12px 10px 210px;
  min-height: 6700px;
  width: min(100%, 1300px);
  margin-left: auto;
  margin-right: auto;
  background:
    radial-gradient(1100px 650px at 50% 0%, rgba(96,165,250,0.08), transparent 60%),
    radial-gradient(900px 550px at 10% 35%, rgba(34,197,94,0.05), transparent 60%),
    radial-gradient(900px 550px at 90% 35%, rgba(239,68,68,0.04), transparent 60%),
    var(--bg);
}

.node-network-container::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: 0.15;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(circle at 50% 20%, black 0 55%, transparent 85%);
}

.node-network {
  position: relative;
  width: 900px;
  height: 1200px;
}

.system-text {
  position: absolute;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}

.node { position: absolute; }

/* Circles */
.circle {
  width: 80px;
  height: 80px;
  background: var(--panel);
  border-radius: 50%;
  border: 1px solid rgba(203,213,245,0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(15,23,42,.14);
  position: relative;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.circle:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(15,23,42,.18);
  border-color: rgba(96,165,250,0.55);
}

.circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.label-circle {
  background: #020617;
  color: #f9fafb;
  font-weight: 760;
  font-size: 13px;
  line-height: 1.2;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 80px;
  height: 80px;
  padding: 0 8px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid rgba(96,165,250,0.95);
  position: relative;
  box-shadow: 0 10px 26px rgba(2,6,23,.35);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.label-circle:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(2,6,23,.45);
  border-color: rgba(147,197,253,0.95);
}

/* =========================================
   ✅ NODE PULSE (subtle, premium)
   Applies to every node circle + label circle
   ========================================= */

@keyframes tslPulse {
  0%   { transform: scale(1); box-shadow: 0 8px 18px rgba(15,23,42,.14); }
  50%  { transform: scale(1.04); box-shadow: 0 16px 34px rgba(96,165,250,.20); }
  100% { transform: scale(1); box-shadow: 0 8px 18px rgba(15,23,42,.14); }
}

/* Pulse the node container so the inner image stays stable */
.node .circle,
.node .label-circle{
  animation: tslPulse 2.2s ease-in-out infinite;
  transform-origin: center;
}

/* Optional: pause pulse on hover so it feels controlled */
.node .circle:hover,
.node .label-circle:hover{
  animation-play-state: paused;
}

/* impact rings */
.node.impact-pos .circle::after,
.node.impact-pos .label-circle::after,
.node.impact-neg .circle::after,
.node.impact-neg .label-circle::after,
.node.impact-neu .circle::after,
.node.impact-neu .label-circle::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  pointer-events: none;
  border: 3px solid transparent;
  box-shadow: 0 0 14px rgba(0,0,0,0.06);
}
.node.impact-pos .circle::after,
.node.impact-pos .label-circle::after { border-color: rgba(34,197,94,0.85); }
.node.impact-neg .circle::after,
.node.impact-neg .label-circle::after { border-color: rgba(239,68,68,0.85); }
.node.impact-neu .circle::after,
.node.impact-neu .label-circle::after { border-color: rgba(148,163,184,0.9); }

/* CARD WRAPPER */
.node-system {
  position: absolute;
  width: 400px;
  height: 520px;
  border: 1px solid rgba(229,231,235,0.95);
  border-radius: var(--radius);
  background: #f9fafb;
  box-shadow: var(--shadow1);
  z-index: 1;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.node-system::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(135deg, rgba(15,23,42,0.02), rgba(15,23,42,0.06));
}

.node-system > * { position: relative; z-index: 1; }

.node-system:hover{
  transform: translateY(-2px);
  transition: transform .18s ease;
}

/* nodes container */
.node-system .nodes-container {
  position: absolute;
  left: 50%;
  top: 72px;
  width: 400px;
  height: 460px;
  transform: translateX(-50%);
  transform-origin: top center;
}

/* Put subheadings (index-label) INSIDE the card */
.index-label {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 760;
  margin: 0;
  z-index: 999;
  color: var(--ink2);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  flex-wrap: nowrap;
}

.index-label .flag-icon {
  width: 30px;
  height: 20px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(15,23,42,0.18);
}

/* Commodity and crypto icons are globes/coins — clip to circle */
#system19 .flag-icon, #system20 .flag-icon, #system21 .flag-icon,
#system25 .flag-icon, #system26 .flag-icon, #system27 .flag-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(15,23,42,0.18);
}

/* ACTION LINKS */
.node-system .rundown,
.node-system .share-link {
  position: absolute;
  top: 38px;
  display: flex;
  align-items: center;
  z-index: 12;
}

.node-system .rundown { left: 44px; }
.node-system .share-link { right: 44px; left: auto; }

/* ✅ Save button: centered under the graph on desktop, bottom of card on mobile */
.node-system .save-lens {
  position: absolute;
  top: auto;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  z-index: 12;
}

.node-system .rundown a,
.node-system .share-link a,
.node-system .save-lens a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 11.5px;
  line-height: 1;
  background: linear-gradient(135deg, rgba(3,10,35,0.82), rgba(15,30,80,0.78)) !important;
  border: 1px solid rgba(96,165,250,0.22) !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(2,6,23,0.32), inset 0 1px 0 rgba(255,255,255,0.07) !important;
  color: #f1f5f9 !important;
  text-decoration: none;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color .14s ease, background .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}

.node-system .rundown a:hover,
.node-system .share-link a:hover,
.node-system .save-lens a:hover {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(15,30,80,0.92), rgba(37,99,235,0.75)) !important;
  border-color: rgba(96,165,250,0.45) !important;
  box-shadow: 0 4px 14px rgba(37,99,235,0.28), inset 0 1px 0 rgba(255,255,255,0.10) !important;
  transform: translateY(-1px);
  text-decoration: none;
}

.node-system .rundown a:active,
.node-system .share-link a:active,
.node-system .save-lens a:active { transform: translateY(0); }

.node-system .save-lens a.is-saved {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(5,46,22,0.85), rgba(22,101,52,0.80)) !important;
  border-color: rgba(74,222,128,0.35) !important;
}

/* Auto-saved state — blue-green glow, rotating icon */
.node-system .save-lens a.is-autosaved {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(3,30,80,0.90), rgba(37,99,235,0.72)) !important;
  border-color: rgba(96,165,250,0.60) !important;
  box-shadow: 0 0 0 2px rgba(96,165,250,0.18), 0 4px 14px rgba(37,99,235,0.25), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
.node-system .save-lens a.is-autosaved i {
  animation: tslSpin 2.4s linear infinite;
}
@keyframes tslSpin {
  to { transform: rotate(360deg); }
}

.node-system .rundown i,
.node-system .share-link i,
.node-system .save-lens i {
  color: currentColor;
  margin: 0;
  display: inline-block;
}

/* ── Per-lens save popup ─────────────────────────────────────────────────── */
.tsl-save-popup {
  /* Fixed + portaled to <body> so the lens card's overflow can't clip it.
     JS (_positionSavePopup) sets left/top and the --arrow-x anchor. */
  position: fixed;
  min-width: 218px;
  background: linear-gradient(145deg, rgb(4,12,42), rgb(12,28,72));
  border: 1px solid rgba(96,165,250,0.28);
  border-radius: 14px;
  padding: 13px 15px 12px;
  box-shadow: 0 12px 40px rgba(2,6,23,0.80), 0 2px 8px rgba(37,99,235,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
  z-index: 100001;
  white-space: nowrap;
  animation: tslPopupIn 0.13s cubic-bezier(0.22,1,0.36,1);
}
@keyframes tslPopupIn {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
/* Arrow: points down when the popup sits above the button, up when below. */
.tsl-save-popup::after {
  content: '';
  position: absolute;
  left: var(--arrow-x, 50%);
  transform: translateX(-50%);
  border: 6px solid transparent;
}
.tsl-save-popup:not(.is-below)::after {
  top: 100%;
  border-top-color: rgba(96,165,250,0.28);
}
.tsl-save-popup.is-below::after {
  bottom: 100%;
  border-bottom-color: rgba(96,165,250,0.28);
}

/* "Save for today" button inside popup */
.tsl-sp-save-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: rgba(37,99,235,0.12);
  border: 1px solid rgba(96,165,250,0.20);
  border-radius: 9px;
  padding: 9px 13px;
  color: #e2e8f0;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.13s ease, border-color 0.13s ease, color 0.13s ease;
  text-align: left;
}
.tsl-sp-save-btn:hover {
  background: rgba(37,99,235,0.22);
  border-color: rgba(96,165,250,0.40);
  color: #fff;
}
.tsl-sp-save-btn i { font-size: 12px; color: rgba(148,163,184,0.85); }

/* Divider */
.tsl-sp-divider {
  height: 1px;
  background: rgba(96,165,250,0.12);
  margin: 10px 0;
}

/* Auto Save row */
.tsl-sp-autosave-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 1px;
}
.tsl-sp-autosave-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tsl-sp-autosave-label {
  font-size: 12.5px;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1;
}
.tsl-sp-autosave-sub {
  font-size: 10.5px;
  color: rgba(148,163,184,0.72);
  font-weight: 400;
  line-height: 1;
}

/* "Auto Save is ON" compact popup header */
.tsl-sp-as-header {
  font-size: 12px;
  font-weight: 700;
  color: rgba(96,165,250,0.92);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* iOS-style toggle */
.tsl-sp-toggle {
  flex-shrink: 0;
  position: relative;
  width: 40px;
  height: 23px;
  border-radius: 999px;
  background: rgba(51,65,85,0.70);
  border: 1px solid rgba(100,116,139,0.35);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
}
.tsl-sp-toggle.is-on {
  background: #22c55e;
  border-color: rgba(74,222,128,0.55);
  box-shadow: 0 0 0 2px rgba(34,197,94,0.20);
}
.tsl-sp-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.30);
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.tsl-sp-toggle.is-on .tsl-sp-toggle-knob {
  transform: translateX(17px);
}

/* ✅ Share popup overlay + modal */
#tslShareOverlay {
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s ease;
}
#tslShareOverlay.is-visible { opacity: 1; }

.tsl-share-modal {
  background: #fff;
  border-radius: 20px;
  padding: 28px 28px 24px;
  width: min(420px, calc(100vw - 32px));
  box-shadow: 0 24px 64px rgba(2,6,23,0.28), 0 0 0 1px rgba(2,6,23,0.07);
  transform: translateY(14px) scale(0.97);
  transition: transform 0.2s cubic-bezier(.22,.68,0,1.2);
}
#tslShareOverlay.is-visible .tsl-share-modal { transform: translateY(0) scale(1); }

.tsl-share-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.tsl-share-modal-title {
  font-weight: 800;
  font-size: 17px;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.tsl-share-modal-close {
  background: none;
  border: none;
  color: rgba(15,23,42,0.38);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 7px;
  border-radius: 8px;
  line-height: 1;
  transition: color 0.12s, background 0.12s;
}
.tsl-share-modal-close:hover { color: #0f172a; background: rgba(15,23,42,0.07); }

.tsl-share-modal-lens {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #f8fafc;
  border: 1.5px solid rgba(226,232,240,0.9);
  border-radius: 12px;
  padding: 11px 15px;
  margin-bottom: 16px;
}
.tsl-share-lens-name {
  font-weight: 750;
  font-size: 14px;
  color: #0f172a;
}
.tsl-share-lens-date {
  font-size: 12px;
  color: rgba(15,23,42,0.45);
  font-weight: 600;
  white-space: nowrap;
}

.tsl-share-modal-desc {
  font-size: 13px;
  color: rgba(15,23,42,0.52);
  margin: 0 0 16px;
  line-height: 1.55;
}

.tsl-share-link-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.tsl-share-link-input {
  flex: 1;
  min-width: 0;
  border: 1.5px solid rgba(226,232,240,0.95);
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 12px;
  color: #334155;
  background: #f8fafc;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: inherit;
}
.tsl-share-link-input:focus { border-color: rgba(99,102,241,0.5); }

.tsl-share-copy-btn {
  padding: 10px 20px;
  border-radius: 10px;
  border: none;
  background: #0f172a;
  color: #fff;
  font-weight: 750;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.14s, transform 0.1s;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
}
.tsl-share-copy-btn:hover { background: #1e293b; }
.tsl-share-copy-btn:active { transform: scale(0.95); }
.tsl-share-copy-btn.is-copied { background: #16a34a; }

.tsl-share-copied {
  font-size: 12.5px;
  color: #16a34a;
  font-weight: 700;
  text-align: center;
  opacity: 0;
  height: 18px;
  transition: opacity 0.15s;
}
.tsl-share-copied.is-visible { opacity: 1; }

/* ✅ Shared lens save-prompt banner */
.tsl-shared-save-banner {
  background: linear-gradient(135deg, rgba(15,23,42,0.96) 0%, rgba(30,41,59,0.97) 100%);
  border: 1.5px solid rgba(99,102,241,0.35);
  border-radius: 16px;
  padding: 20px 24px;
  margin: 0 auto 28px;
  max-width: 460px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.tsl-shared-save-banner-icon {
  font-size: 26px;
  flex-shrink: 0;
  line-height: 1;
}
.tsl-shared-save-banner-body { flex: 1; min-width: 0; }
.tsl-shared-save-banner-title {
  font-weight: 800;
  font-size: 14.5px;
  color: #e2e8f0;
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}
.tsl-shared-save-banner-sub {
  font-size: 12.5px;
  color: rgba(226,232,240,0.6);
  line-height: 1.45;
}
.tsl-shared-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 10px;
  border: none;
  background: #6366f1;
  color: #fff;
  font-weight: 750;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.14s, transform 0.1s;
  font-family: inherit;
  text-decoration: none;
}
.tsl-shared-save-btn:hover { background: #4f46e5; }
.tsl-shared-save-btn:active { transform: scale(0.95); }
.tsl-shared-save-btn.is-saved { background: #16a34a; cursor: default; pointer-events: none; }

/* ✅ Save-lens toast popup ("Lens saved!" / "Lens already saved!") */
.tsl-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(15,23,42,0.96);
  color: #f9fafb;
  font-size: 13.5px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.25);
  box-shadow: 0 18px 40px rgba(0,0,0,0.4);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.tsl-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ✅ Top-of-page progress bar, shown while a bulk save/autosave/delete is in flight */
/* ── Circular logo loader overlay ──────────────────────────────── */
.tsl-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 22, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.tsl-loader-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}
.tsl-loader-ring-wrap {
  position: relative;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tsl-loader-ring {
  position: absolute;
  inset: 0;
  width: 110px;
  height: 110px;
  animation: tslLoaderSpin 1.1s linear infinite;
}
.tsl-loader-ring circle {
  fill: none;
  stroke: url(#tslLoaderGrad);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 70;
}
.tsl-loader-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  animation: tslLoaderPulse 1.8s ease-in-out infinite;
}
@keyframes tslLoaderSpin {
  to { transform: rotate(360deg); }
}
@keyframes tslLoaderPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .75; transform: scale(.93); }
}

/* ✅ Inline mini-spinner shown next to a group's controls while it saves */
.tsl-group-controls .tsl-saving-note {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(147,197,253,0.9);
}
.tsl-group-controls.is-saving .tsl-saving-note { display: inline-flex; }
.tsl-mini-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(147,197,253,0.3);
  border-top-color: #60a5fa;
  animation: tslSpin .7s linear infinite;
}
@keyframes tslSpin { to { transform: rotate(360deg); } }

/* ✅ Shared confirm dialog (used for "unsave lens" and similar destructive confirmations) */
.tsl-confirm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,0.65);
  backdrop-filter: blur(2px);
  z-index: 10100;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tsl-confirm-overlay.open { display: flex; }
.tsl-confirm-box {
  width: 100%;
  max-width: 380px;
  background: #0f172a;
  border: 1px solid rgba(148,163,184,0.25);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.tsl-confirm-box p {
  margin: 0 0 20px;
  font-size: 15px;
  color: #e5e7eb;
  line-height: 1.5;
}
.tsl-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.tsl-confirm-actions button {
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(148,163,184,0.25);
}
.tsl-confirm-cancel { background: transparent; color: #e5e7eb; }
.tsl-confirm-cancel:hover { background: rgba(148,163,184,0.12); }
.tsl-confirm-delete { background: #dc2626; color: #fff; border-color: #dc2626; }
.tsl-confirm-delete:hover { background: #b91c1c; }

/* ✅ "Save All" / "Auto Save" group controls, shown next to each region heading */
.tsl-group-controls {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-left: 16px;
  font-weight: 600;
  vertical-align: middle;
}

/* nowrap on desktop is set globally; wrap only on mobile (see @media max-width:768px) */
#lensesSectionHeadingControls .tsl-group-controls {
  margin-left: 0;
}
.tsl-group-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(229,231,235,0.8);
  cursor: pointer;
  white-space: nowrap;
}
.tsl-group-checkbox input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--blue, #3b82f6);
  cursor: pointer;
  flex-shrink: 0;
}
.tsl-info-icon {
  color: rgba(148,163,184,0.7);
  font-size: 14px;
  cursor: pointer;
}
.tsl-info-icon:hover { color: rgba(191,219,254,0.95); }

.tsl-info-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,0.65);
  backdrop-filter: blur(2px);
  z-index: 10100;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tsl-info-overlay.open { display: flex; }
.tsl-info-box {
  width: 100%;
  max-width: 380px;
  max-height: 100%;
  overflow-y: auto;
  background: #0f172a;
  border: 1px solid rgba(148,163,184,0.25);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.tsl-info-box h3 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #f9fafb;
}
.tsl-info-box p {
  margin: 0 0 20px;
  font-size: 14px;
  color: #e5e7eb;
  line-height: 1.55;
}
.tsl-info-box-actions { display: flex; justify-content: flex-end; }
.tsl-info-box-actions button {
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(148,163,184,0.25);
  background: transparent;
  color: #e5e7eb;
}
.tsl-info-box-actions button:hover { background: rgba(148,163,184,0.12); }

/* ── Per-lens "About this lens" info icon (left of the flag) + dialog ── */
.index-label .lens-info-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(37,99,235,0.75);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  border-radius: 50%;
  transition: color .15s ease, background .15s ease;
}
.index-label .lens-info-icon:hover { color: #2563eb; background: rgba(37,99,235,0.12); }
.index-label .lens-info-icon i { margin: 0; }
.tsl-lensinfo-box p { margin-bottom: 14px !important; }
/* "How does this lens work?" usage guide — visually set apart (top divider,
   slightly muted) from the asset-specific description above it, so the two
   never read as one run-on block. Hidden (via inline display:none) when the
   dialog is opened from the standalone shared-lens "How does this lens
   work?" link, which shows only this guide. */
.tsl-lensinfo-generic {
  border-top: 1px solid rgba(148,163,184,0.16);
  padding-top: 14px;
  margin-bottom: 20px;
  color: rgba(226,232,240,0.85);
}
.tsl-lensinfo-generic p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: rgba(226,232,240,0.85); }
.tsl-lensinfo-generic ul { margin: 0; padding-left: 18px; list-style: disc; }
.tsl-lensinfo-generic li { margin-bottom: 9px; font-size: 13.5px; line-height: 1.5; color: rgba(226,232,240,0.85); }
.tsl-lensinfo-generic li:last-child { margin-bottom: 0; }
.tsl-lensinfo-generic li strong { color: #f9fafb; }
.tsl-lensinfo-foot {
  font-size: 12px;
  color: rgba(148,163,184,0.85);
  border-top: 1px solid rgba(148,163,184,0.18);
  padding-top: 10px;
  margin-bottom: 16px;
  line-height: 1.45;
}

/* IMPACT ARROW */
.node-system .impact-arrow{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 40px;
  pointer-events: none;
  z-index: 10;
  top: 38px;
  isolation: isolate;
  border-radius: 8px;
}

/* Shade color depends on arrow type */
.node-system.arrow-green { --impactArea: rgba(22,163,74,0.16); }
.node-system.arrow-red   { --impactArea: rgba(220,38,38,0.16); }
/* "We don't know" — a shared link to a date this lens's close was never
   archived for. Deliberately gray rather than defaulting to green (which
   would misleadingly imply "up" for a day that might have closed down). */
.node-system.arrow-neutral { --impactArea: rgba(148,163,184,0.14); }

.node-system .impact-arrow::before{
  content: "";
  position: absolute;
  inset: 3px 4px 8px 4px;
  border-radius: 7px;
  z-index: 0;
  pointer-events: none;

  background:
    linear-gradient(to bottom, var(--impactArea) 0%, rgba(0,0,0,0) 78%),
    repeating-linear-gradient(
      to right,
      rgba(15,23,42,0.08) 0 1px,
      transparent 1px 18px
    ),
    repeating-linear-gradient(
      to top,
      rgba(15,23,42,0.06) 0 1px,
      transparent 1px 10px
    );

  opacity: 0.95;
}
.node-system .impact-arrow::after{
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 3px;
  height: 10px;
  z-index: 1;
  pointer-events: none;
  --axis: rgba(15,23,42,0.45);
  background:
    linear-gradient(var(--axis), var(--axis)) left 50% / calc(100% - 8px) 1px no-repeat,
    linear-gradient(45deg, var(--axis) 0 50%, transparent 50% 100%) right 50% / 6px 6px no-repeat,
    linear-gradient(-45deg, var(--axis) 0 50%, transparent 50% 100%) right 50% / 6px 6px no-repeat;
  opacity: 0.95;
}

.node-system.arrow-green .impact-arrow{ color: #16a34a; }
.node-system.arrow-red   .impact-arrow{ color: #dc2626; }
.node-system.arrow-neutral .impact-arrow{ color: #94a3b8; }
.node-system.arrow-neutral .impact-arrow-draw{ animation-play-state: paused !important; clip-path: inset(0 0 0 0); }

/* The "draw" reveal is a left-to-right clip-path wipe on this box, not a
   stroke-dasharray/dashoffset animation on the path. dasharray under a
   flipped (negative-scale) transform — needed here for the down-trend
   arrow — is a known source of cross-browser dash-rendering glitches: some
   mobile browsers get the dash pattern's reference point wrong once the
   stroke direction is mirrored, which showed up as a broken/gapped line. A
   clip-path has no such failure mode: the path is always drawn whole
   underneath, just progressively uncovered. clip-path insets are percentages
   of THIS element's own box, so the same keyframes work unchanged at the
   130px mobile size below — no per-breakpoint keyframe values needed. The
   scale transform that used to sit on the svg (and its down-trend flip) now
   lives here on the wrapper instead, so the wipe itself stays axis-aligned.
   (A box-size-only alternative to this transform was tried, to sidestep a
   documented non-scaling-stroke-under-CSS-transform bug — Mozilla 1247218,
   1420851, 1413126 — but the size math didn't account for the svg's own
   default preserveAspectRatio="meet" letterboxing, and produced visible
   overflow/distortion on real devices. Reverted to this proven positioning;
   the mobile thin-line issue is addressed via a thicker base stroke-width
   below instead.) */
.node-system .impact-arrow-draw{
  width: 110px;
  height: 30px;
  position: absolute;
  top: 2px;
  left: 0;
  z-index: 2;
  transform: scaleX(0.88) scaleY(1.45);
  transform-origin: 50% 50%;
  will-change: clip-path, opacity;
  animation: impactDraw 2s ease-in-out infinite;
  /* Paused by default; JS adds .in-view when the node scrolls on-screen so
     only visible mini-graphs redraw, keeping the main thread free and
     stopping the visible graphs from stuttering. */
  animation-play-state: paused;
}
.node-system.in-view .impact-arrow-draw{
  animation-play-state: running;
}

.node-system.arrow-red .impact-arrow-draw{
  transform: scaleX(0.88) scaleY(1.45) scaleY(-1);
  transform-origin: 50% 50%;
}

.node-system .impact-arrow-draw svg{
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

.node-system .impact-arrow path{
  fill: none !important;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

@keyframes impactDraw{
  0%   { clip-path: inset(0 100% 0 0); opacity: 0; }
  8%   { opacity: 1; }
  65%  { clip-path: inset(0 0 0 0);    opacity: 1; }
  88%  { clip-path: inset(0 0 0 0);    opacity: 0; }
  100% { clip-path: inset(0 100% 0 0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .node-system .impact-arrow-draw{ animation: none; width: 110px; opacity: 0.95; }
}

/* keep non-mobile positioning */
@media (min-width: 769px){
  .node-system .rundown,
  .node-system .share-link{ top: 55px !important; }
  .node-system .impact-arrow{ top: 55px !important; }
  .node-system .save-lens{ top: 100px !important; left: 50% !important; bottom: auto !important; transform: translateX(-50%) !important; }
}

@keyframes walkCycle {
  from { transform: translateX(0); }
  to   { transform: translateX(2px); }
}
.node-system .rundown i { animation: walkCycle .6s infinite alternate ease-in-out; }

/* Info text */
.info-box {
  position: absolute;
  width: 150px;
  min-height: 28px;
  height: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-size: 11px;
  font-weight: 700;
  color: rgba(15,23,42,0.92);
  text-align: center;
  line-height: 1.15;
  padding: 6px 6px;
  z-index: 4;
  transform: translateX(-35px);
}

/* Replaces node1's caption (e.g. "S&P 500", "Apple" — the node that opens
   this lens's chart/news modal when clicked) with a single direction
   triangle (initInfoBoxTriangles() in tsl210.js) — same glyph/colors as the
   top ticker's ▲/▼ (updateLensPriceLabel), so it reads as the same signal
   wherever it appears. Purely CSS-driven off the node's own
   .arrow-green/.arrow-red/.arrow-neutral class, so it can never drift out
   of sync with the mini trend-line graph below it — both read the same
   state. .info-box's own text-align:center centers it, same as the caption
   text it replaced. */
.info-box-triangle {
  display: inline-block;
  font-size: 15px;
  line-height: 1;
}
.node-system.arrow-green .info-box-triangle::before { content: "\25B2"; color: #16a34a; }
.node-system.arrow-red   .info-box-triangle::before { content: "\25BC"; color: #dc2626; }
/* Neutral (no archived close for this date) gets its own flat glyph, not a
   muted up/down triangle — a grayed-out ▲ or ▼ still visually reads as a
   direction, which is exactly the wrong impression for "we don't know". */
.node-system.arrow-neutral .info-box-triangle::before { content: "\25AC"; color: #94a3b8; }

.info-box[id$="-info-top"] { left: 160px !important; }

/* animated dots */
.moving-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--blue);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  left: 0;
  top: 0;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 0 6px rgba(96,165,250,0.55);
  /* Compositor-driven motion so the dots stay smooth even when the main thread
     is busy. 2800ms matches the previous JS DOT_DURATION, so the speed is
     unchanged. Start/end points are supplied per-dot via the CSS variables. */
  transform: translate3d(var(--dot-sx, 0px), var(--dot-sy, 0px), 0);
  animation: tslDotFlow 2800ms linear infinite;
}
@keyframes tslDotFlow {
  from { transform: translate3d(var(--dot-sx, 0px), var(--dot-sy, 0px), 0); }
  to   { transform: translate3d(var(--dot-ex, 0px), var(--dot-ey, 0px), 0); }
}
@media (prefers-reduced-motion: reduce){
  .moving-dot{ animation: none; }
}

/* NEWS ICON SQUARES */
.news-logo-square{
  position: absolute;
  z-index: 50;
  transform: translate(-50%, -50%);
  height: 26px;
  min-width: 26px;
  padding: 0 6px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: #000000 !important;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 10px 22px rgba(0,0,0,.45);
  cursor: pointer;
  color: #ffffff !important;
  transition: transform .14s ease, box-shadow .14s ease;
}

.news-logo-square *,
.news-logo-square span,
.news-logo-square a{ color: #ffffff !important; }

.news-logo-square.badge-square{ width: 26px; height: 26px; padding: 0; flex-shrink: 0; }
.news-logo-square.badge-pill{
  width: auto;
  max-width: 56px;
  padding: 0 8px;
}

.news-logo-square span{
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}

.news-logo-square:hover{
  transform: translate(-50%, -50%) translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(96,165,250,0.25);
}

/* default h2 used in node-network */
h2 {
  font-size: 16px;
  color: var(--ink);
  text-align: center;
  position: absolute;
}

.news-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
  font-weight: 650;
}

.news-logo { width: 25px; height: 25px; object-fit: contain; }
.news-title { font-size: 14px; color: var(--ink); }

/* modal */
.modal {
  display: none;
  position: fixed;
  z-index: 2600;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 84px 12px 24px;
  background: rgba(15,23,42,.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-content {
  background: #f9fafb;
  margin: 0 auto;
  padding: 20px 20px 22px;
  border: 1px solid #e5e7eb;
  width: min(86%, 640px);
  max-width: 640px;
  max-height: calc(100dvh - 108px);
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 14px;
  text-align: left;
  box-shadow: 0 18px 60px rgba(15,23,42,.35);
  color: #0f172a;
  position: relative;
}

.modal-content h2 { position: static; margin: 0 36px 10px 0; }

.close-button {
  color: #9ca3af;
  position: sticky;
  top: 0;
  float: right;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  z-index: 5;
  background: #f9fafb;
  border-radius: 999px;
  padding: 0 4px;
}

.close-button:hover,
.close-button:focus {
  color: #111827;
  text-decoration: none;
}

#summaryContent {
  font-size: 15px;
  line-height: 1.55;
  color: #111827;
  margin-top: 10px;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#summaryContent.loading {
  font-style: italic;
  color: #9ca3af;
}

/* Keep modal internals from forcing horizontal scroll */
.modal-content *,
#summaryContent * {
  max-width: 100%;
  box-sizing: border-box;
}

.modal-content img,
.modal-content video,
.modal-content iframe,
#summaryContent img,
#summaryContent video,
#summaryContent iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

.modal-content .news-btn,
.modal-content button,
.modal-content a[class*="btn"] {
  max-width: 100%;
  white-space: normal;
}

.modal-content .hero-actions,
.modal-content .archive-audio-actions,
.modal-content .popup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* =========================================================
   ✅ MODAL CAROUSEL ARROWS (Prev/Next inside modal)
   ========================================================= */

.tsl-modal-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.18);
  background: rgba(2,6,23,0.65);
  color: #f9fafb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 50;
  box-shadow: 0 10px 26px rgba(0,0,0,0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .14s ease, background .14s ease, border-color .14s ease, opacity .14s ease;
}

.tsl-modal-nav span{
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
  transform: translateY(-1px);
}

.tsl-modal-prev{ left: -18px; }
.tsl-modal-next{ right: -18px; }

.tsl-modal-nav:hover{
  background: rgba(96,165,250,0.22);
  border-color: rgba(96,165,250,0.6);
  transform: translateY(-50%) scale(1.04);
}

.tsl-modal-nav:active{
  transform: translateY(-50%) scale(0.98);
}

.tsl-modal-nav.is-disabled,
.tsl-modal-nav:disabled{
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.2);
  box-shadow: none;
}

@media (max-width: 768px){
  .tsl-modal-nav{
    width: 40px;
    height: 40px;
  }
  .tsl-modal-prev{ left: -10px; }
  .tsl-modal-next{ right: -10px; }
}

/* HEADING LOOK */
.us-market-heading h2,
.us-market-heading .ny-subheading,
.intl-main-heading,
.asia-main-heading {
  position: static !important;
  text-align: left !important;
}

.asia-main-heading .asia-heading-text {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Fixed height so the date/time always sits at the same vertical position
   regardless of whether the controls inside wrap or not. */
.intl-main-heading,
.asia-main-heading,
.us-market-heading h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: #f9fafb !important;
  letter-spacing: 0.02em;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  gap: 8px !important;
}

.ny-subheading,
.intl-subheading,
.asia-subheading {
  display: block !important;
  margin-top: 8px !important;
  line-height: 1.35 !important;
  font-size: 15px !important;
  color: var(--muted2) !important;
}

/* region headings (desktop default) */
#us-lenses,
#us-nyc-2,
#us-nyc-3,
#europe-lenses,
#intl-frankfurt,
#intl-paris,
#asia-nikkei,
#asia-hangseng,
#asia-shanghai,
#stock-nyc-1,
#stock-nyc-2,
#stock-nyc-3,
#stock-nyc-4,
#stock-nyc-5,
#stock-nyc-6,
#stock-nyc-7,
#stock-nyc-8,
#stock-nyc-9,
#commodity-1,
#commodity-2,
#commodity-3,
#currency-1,
#currency-2,
#currency-3,
#crypto-1,
#crypto-2,
#crypto-3 {
  position: absolute;
  width: 400px;
  text-align: left;
  font-size: 15px;
  z-index: 10;
  border-left: 3px solid rgba(96,165,250,0.75);
  padding-left: 14px;
  padding-top: 10px;
  min-height: 60px;
  transform: translateY(5px);
}

/* Heading text lifted above the bar — bar frames only the date/time area */
.asia-heading .asia-main-heading,
.intl-heading .intl-main-heading {
  position: absolute !important;
  top: -46px !important;
  left: 0 !important;
  width: 420px !important;
  margin: 0 !important;
  border: none !important;
  padding-left: 0 !important;
}

/* Date/time sits inside bar with padding already from container */
.ny-subheading,
.intl-subheading,
.asia-subheading {
  padding-left: 0;
  margin-top: 0;
}

/* =========================================================
   SECTION SPACING — push each major section down 100px more
   than the previous so sections are visually distinct.
   Heading containers already get transform via the rule above;
   these overrides replace that value per section.
   Cards (node-system) are pushed the same offset.
   ========================================================= */

/* All inter-section gaps = 100px (matching US→Europe).
   Formula: heading_shift chosen so gap = 100px; cards = heading_shift - 5 */

/* Europe: heading +50, cards +45 */
#europe-lenses, #intl-frankfurt, #intl-paris { transform: translateY(50px); }
#system4, #system5, #system6                  { transform: translateY(45px); }

/* Asia: heading +95, cards +90 */
#asia-nikkei, #asia-hangseng, #asia-shanghai  { transform: translateY(95px); }
#system7, #system8, #system9                  { transform: translateY(90px); }

/* Stocks: heading +140, cards +135 */
#stock-nyc-1, #stock-nyc-2, #stock-nyc-3,
#stock-nyc-4, #stock-nyc-5, #stock-nyc-6,
#stock-nyc-7, #stock-nyc-8, #stock-nyc-9    { transform: translateY(140px); }
#system10, #system11, #system12,
#system13, #system14, #system15,
#system16, #system17, #system18              { transform: translateY(135px); }

/* Commodity: heading +445, cards +440  (60px gap after stock row 3) */
#commodity-1, #commodity-2, #commodity-3    { transform: translateY(445px); }
#system19, #system20, #system21              { transform: translateY(440px); }

/* Currency: heading +450, cards +445  (60px gap after commodity) */
#currency-1, #currency-2, #currency-3       { transform: translateY(450px); }
#system22, #system23, #system24              { transform: translateY(445px); }

/* Crypto: heading +455, cards +450  (60px gap after currency) */
#crypto-1, #crypto-2, #crypto-3             { transform: translateY(455px); }
#system25, #system26, #system27              { transform: translateY(450px); }

/* keep second/third desktop labels vertically aligned with first */
.spacer-heading{
  visibility: hidden !important;
  display: block !important;
  min-height: 32px !important;
  margin: 0 0 10px 0 !important;
}

/* =========================================================
   DESKTOP: pin each row's heading top with !important so the
   2nd/3rd-column (spacer) headings can't be knocked out of
   place by JS that strips their inline top on load. Keeps the
   date/time bar aligned across all three columns in every row.
   Mobile (max-width:768px) is excluded so cards can stack.
   ========================================================= */
@media (min-width: 769px){
  #us-lenses, #us-nyc-2, #us-nyc-3             { top: 50px   !important; }
  #europe-lenses, #intl-frankfurt, #intl-paris { top: 700px  !important; }
  #asia-nikkei, #asia-hangseng, #asia-shanghai { top: 1350px !important; }
  #stock-nyc-1, #stock-nyc-2, #stock-nyc-3     { top: 2000px !important; }
  #stock-nyc-4, #stock-nyc-5, #stock-nyc-6     { top: 2650px !important; }
  #stock-nyc-7, #stock-nyc-8, #stock-nyc-9     { top: 3300px !important; }
  #commodity-1, #commodity-2, #commodity-3     { top: 3650px !important; }
  #currency-1, #currency-2, #currency-3        { top: 4300px !important; }
  #crypto-1, #crypto-2, #crypto-3              { top: 4950px !important; }

  /* Align each heading/date-time bar with its column's card left edge
     (cards sit at left 0/450/900; headings were 30px to the right). */
  #us-lenses, #europe-lenses, #asia-nikkei,
  #stock-nyc-1, #stock-nyc-4, #stock-nyc-7,
  #commodity-1, #currency-1, #crypto-1         { left: 0   !important; }

  #us-nyc-2, #intl-frankfurt, #asia-hangseng,
  #stock-nyc-2, #stock-nyc-5, #stock-nyc-8,
  #commodity-2, #currency-2, #crypto-2         { left: 450px !important; }

  #us-nyc-3, #intl-paris, #asia-shanghai,
  #stock-nyc-3, #stock-nyc-6, #stock-nyc-9,
  #commodity-3, #currency-3, #crypto-3         { left: 900px !important; }
}

/* ===== TABLET (iPad / 769-1024px): single vertical column (mobile-style, larger) =====
   Pure CSS, scoped so desktop (>1024px) and mobile (<=768px) are untouched.
   One lens per row, heading+date/time above each card, cards at full desktop size,
   centred. Content bottom ~17865px; min-height 17965px keeps footer clear.
   Range 769-1279 matches ensureFooterReachable()'s tablet band and covers
   iPad portrait (820) and landscape (1180). */
@media (min-width: 769px) and (max-width: 1279px){
  .node-network-container{ width:min(100%,460px)!important; margin-left:auto!important; margin-right:auto!important; min-height:17965px!important; padding-bottom:60px!important; }
  #us-lenses,#system1,#us-nyc-2,#system2,#us-nyc-3,#system3,#europe-lenses,#system4,#intl-frankfurt,#system5,#intl-paris,#system6,#asia-nikkei,#system7,#asia-hangseng,#system8,#asia-shanghai,#system9,#stock-nyc-1,#system10,#stock-nyc-2,#system11,#stock-nyc-3,#system12,#stock-nyc-4,#system13,#stock-nyc-5,#system14,#stock-nyc-6,#system15,#stock-nyc-7,#system16,#stock-nyc-8,#system17,#stock-nyc-9,#system18,#commodity-1,#system19,#commodity-2,#system20,#commodity-3,#system21,#currency-1,#system22,#currency-2,#system23,#currency-3,#system24,#crypto-1,#system25,#crypto-2,#system26,#crypto-3,#system27 { position:absolute!important; transform:none!important; width:400px!important; }
  #us-lenses{ top:110px!important; left:30px!important; }
  #system1{ top:185px!important; left:30px!important; }
  #us-nyc-2{ top:770px!important; left:30px!important; }
  #system2{ top:845px!important; left:30px!important; }
  #us-nyc-3{ top:1430px!important; left:30px!important; }
  #system3{ top:1505px!important; left:30px!important; }
  #europe-lenses{ top:2090px!important; left:30px!important; }
  #system4{ top:2165px!important; left:30px!important; }
  #intl-frankfurt{ top:2750px!important; left:30px!important; }
  #system5{ top:2825px!important; left:30px!important; }
  #intl-paris{ top:3410px!important; left:30px!important; }
  #system6{ top:3485px!important; left:30px!important; }
  #asia-nikkei{ top:4070px!important; left:30px!important; }
  #system7{ top:4145px!important; left:30px!important; }
  #asia-hangseng{ top:4730px!important; left:30px!important; }
  #system8{ top:4805px!important; left:30px!important; }
  #asia-shanghai{ top:5390px!important; left:30px!important; }
  #system9{ top:5465px!important; left:30px!important; }
  #stock-nyc-1{ top:6050px!important; left:30px!important; }
  #system10{ top:6125px!important; left:30px!important; }
  #stock-nyc-2{ top:6710px!important; left:30px!important; }
  #system11{ top:6785px!important; left:30px!important; }
  #stock-nyc-3{ top:7370px!important; left:30px!important; }
  #system12{ top:7445px!important; left:30px!important; }
  #stock-nyc-4{ top:8030px!important; left:30px!important; }
  #system13{ top:8105px!important; left:30px!important; }
  #stock-nyc-5{ top:8690px!important; left:30px!important; }
  #system14{ top:8765px!important; left:30px!important; }
  #stock-nyc-6{ top:9350px!important; left:30px!important; }
  #system15{ top:9425px!important; left:30px!important; }
  #stock-nyc-7{ top:10010px!important; left:30px!important; }
  #system16{ top:10085px!important; left:30px!important; }
  #stock-nyc-8{ top:10670px!important; left:30px!important; }
  #system17{ top:10745px!important; left:30px!important; }
  #stock-nyc-9{ top:11330px!important; left:30px!important; }
  #system18{ top:11405px!important; left:30px!important; }
  #commodity-1{ top:11990px!important; left:30px!important; }
  #system19{ top:12065px!important; left:30px!important; }
  #commodity-2{ top:12650px!important; left:30px!important; }
  #system20{ top:12725px!important; left:30px!important; }
  #commodity-3{ top:13310px!important; left:30px!important; }
  #system21{ top:13385px!important; left:30px!important; }
  #currency-1{ top:13970px!important; left:30px!important; }
  #system22{ top:14045px!important; left:30px!important; }
  #currency-2{ top:14630px!important; left:30px!important; }
  #system23{ top:14705px!important; left:30px!important; }
  #currency-3{ top:15290px!important; left:30px!important; }
  #system24{ top:15365px!important; left:30px!important; }
  #crypto-1{ top:15950px!important; left:30px!important; }
  #system25{ top:16025px!important; left:30px!important; }
  #crypto-2{ top:16610px!important; left:30px!important; }
  #system26{ top:16685px!important; left:30px!important; }
  #crypto-3{ top:17270px!important; left:30px!important; }
  #system27{ top:17345px!important; left:30px!important; }
}


/* footer */
footer {
  background: rgba(2,6,23,0.95);
  color: #9ca3af;
  padding: 16px 10px;
  text-align: center;
  border-top: 1px solid rgba(17,24,39,0.9);
  width: 100%;
}

footer p {
  margin: 4px 0 2px;
  font-size: 12px;
}

.social-icons {
  text-align: center;
  margin-top: 8px;
}

.social-icons a {
  color: #e5e7eb;
  margin: 0 8px;
  font-size: 19px;
  text-decoration: none;
  transition: color .15s ease, transform .15s ease;
}

.social-icons a:hover {
  color: var(--blue);
  transform: translateY(-1px);
}

/* 6. MOBILE / PHONE OVERRIDES */
@media (max-width: 768px) {
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 12px;
  }

  .content-wrapper { padding-top: 110px; }

  .logo-container { margin-left: 8px; flex: 1; }
  .logo-container .logo-text {
    font-size: 15px;
    white-space: nowrap;
  }
  nav.main-nav {
    flex-shrink: 0;
    margin-left: auto;
    gap: 6px !important;
    flex-wrap: nowrap;
  }
  nav.main-nav .header-link {
    padding: 6px 9px !important;
    font-size: 12px !important;
  }
  nav.main-nav .header-link i {
    font-size: 12px !important;
  }

  #us-lenses,
  #us-nyc-2,
  #us-nyc-3,
  #europe-lenses,
  #intl-frankfurt,
  #intl-paris,
  #asia-nikkei,
  #asia-hangseng,
  #asia-shanghai,
  #stock-nyc-1,
  #stock-nyc-2,
  #stock-nyc-3,
  #stock-nyc-4,
  #stock-nyc-5,
  #stock-nyc-6,
  #stock-nyc-7,
  #stock-nyc-8,
  #stock-nyc-9,
  #commodity-1,
  #commodity-2,
  #commodity-3,
  #currency-1,
  #currency-2,
  #currency-3,
  #crypto-1,
  #crypto-2,
  #crypto-3 {
    position: static !important;
    width: auto !important;
    text-align: left !important;
    margin: 28px 16px 14px !important;
    z-index: 10 !important;
  }

  /* Mobile only: lift the region heading + its Save All / Auto Save buttons UP
     into the empty space between the lenses (translateY), AND shift them left so
     they start in line with where the date-time line begins (translateX). Uses
     transform (visual only), so it moves ONLY the heading — the date-time line,
     the lens card, and every other space stay exactly where they are. Scoped to
     headings that carry the group controls (region headings only); per-lens
     headings and desktop/tablet (>768px) are untouched. */
  .asia-heading:has(.tsl-group-controls) .asia-main-heading,
  .intl-heading:has(.tsl-group-controls) .intl-main-heading {
    transform: translate(-16px, -75px) !important;
  }

  /* Left-align the Save All / Auto Save buttons with the heading text (they
     carry a 16px indent on the wrapped line). Region headings only. */
  .asia-main-heading .tsl-group-controls,
  .intl-main-heading .tsl-group-controls {
    margin-left: 0 !important;
  }

  /* U.S. Lenses ONLY: unlike the other regions it sits right under "The Market
     Lens" heading (no lens card above it), so the 75px lift would collide with
     it. Add space above the U.S. block to keep a clear gap. */
  #us-lenses {
    margin-top: 55px !important;
  }

  /* Commodity Lenses ONLY: the desktop grid transforms (lines ~1902-1911) shift
     it down +445px, which is calibrated for the 3-row desktop Stocks grid. On
     mobile Stocks is a single 9-row column, so that offset produces a ~400px
     empty gap above Commodity. Pull the whole Commodity-onward block up with a
     negative margin (margin moves flow, so Currency/Crypto follow and keep their
     own gaps) to bring the Commodity gap back in line (~142px, like the others). */
  #commodity-1 {
    margin-top: -260px !important;
  }

  /* reset fixed height so headings can grow naturally on mobile */
  .intl-main-heading,
  .asia-main-heading,
  .us-market-heading h2 {
    height: auto !important;
    flex-wrap: wrap !important;
  }

  .ny-subheading,
  .intl-subheading,
  .asia-subheading {
    display: block !important;
    padding-left: 18px !important;
    margin-top: 8px !important;
    margin-bottom: 6px !important;
    line-height: 1.35 !important;
  }

  .node-network-container {
    position: relative;
    /* min-height is set dynamically by ensureFooterReachable() so the footer
       always clears the last stacked card (no spillover). Forcing auto here
       previously overrode that and let the last card overlap the footer. */
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 220px !important;
  }

  .node-system {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: calc(100% - 32px) !important;
    max-width: 420px !important;
    /* A flat, deliberately generous height — NOT a cqw-based formula. The
       fluid scale below (up to a 1.05× ceiling) makes the content taller on
       wider phones, and this card's own overflow:hidden would clip it if
       the card didn't grow too (confirmed live: at 428px wide, content
       reached 546px into a flat 520px card). Tried computing this height
       from the SAME cqw ratio first, but a card sizing ITS OWN height off
       its own container-query width hit an undocumented browser fallback
       that pinned the result to the clamp's ceiling case regardless of the
       actual width (confirmed via an isolated test element, so it wasn't
       specific to this card) — not something to trust in production. 600px
       flat safely covers the worst case (92px top offset + 460px content at
       the 1.05× ceiling ≈ 575px, plus margin) at every width in this
       breakpoint, at the cost of some empty space below the content on the
       narrowest phones (previously an exact 520px fit). Revert: change back
       to a flat `520px`. */
    height: 600px !important;
    margin: 10px auto 92px auto !important;
    border: 1px solid rgba(229,231,235,0.95) !important;
    border-radius: var(--radius) !important;
    background: #f9fafb !important;
    box-shadow: var(--shadow1) !important;
    overflow: hidden !important;
    z-index: 1 !important;
    /* Lets .nodes-container below query this card's OWN rendered width (via
       cqw units) instead of guessing from the viewport — the card itself
       already scales fluidly (calc(100% - 32px), capped at 420px) across
       phone/tablet widths, but everything drawn INSIDE it used to be pinned
       to one fixed scale regardless, so wider phones — where the card grows
       toward its 420px cap — showed the exact same tiny content as the
       narrowest phones. */
    container-type: inline-size;
  }

  .node-system .nodes-container {
    position: absolute !important;
    left: 50% !important;
    top: 92px !important;
    width: 400px !important;
    height: 460px !important;
    /* Fluid scale = this card's own width ÷ 400 (nodes-container's native,
       unscaled width) — grows continuously as the card grows, instead of
       the single fixed 0.88 every phone/tablet used to get regardless of
       its actual width. Clamped to the SAME 0.88 floor as before (so the
       narrowest phones render byte-identical to the old fixed behavior —
       no regression there) and a 1.05 ceiling (matches the ratio the card's
       own 420px max-width already produces, so this is a safety cap, not a
       new limit in practice). Revert: change back to a flat `scale(0.88)`. */
    transform: translateX(-50%) scale(clamp(0.88, calc(100cqw / 400px), 1.05)) !important;
    transform-origin: top center !important;
  }

  .node-system .circle,
  .node-system .label-circle {
    width: 88px !important;
    height: 88px !important;
  }

  .node-system .circle img {
    width: 100% !important;
    height: 100% !important;
  }

  .node-network-container .node-system:first-of-type {
    margin-top: 6px !important;
  }

  .index-label {
    position: absolute !important;
    top: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    z-index: 100 !important;
    text-align: center !important;
    width: 90% !important;
    white-space: nowrap !important;
  }

  .rundown {
    position: absolute !important;
    top: 58px !important;
    left: 12px !important;
    gap: 6px !important;
  }

  .share-link {
    position: absolute !important;
    top: 58px !important;
    right: 12px !important;
    left: auto !important;
  }

  .rundown a,
  .share-link a {
    font-size: 11.5px !important;
    white-space: nowrap !important;
    padding: 5px 10px !important;
  }

  .node-system .impact-arrow{
    top: 44px !important;
    width: 130px;
    height: 80px;
  }
  .node-system .impact-arrow-draw{
    width: 130px;
    height: 70px;
    top: 4px;
    transform: scaleX(0.88) scaleY(1.45) !important;
  }
  .node-system.arrow-red .impact-arrow-draw{
    transform: scaleX(0.88) scaleY(1.45) scaleY(-1) !important;
  }
  .node-system .impact-arrow::before{
    inset: 6px 6px 14px 6px;
  }
  .node-system .impact-arrow::after{
    bottom: 6px;
  }

  .node-system .save-lens{
    bottom: 12px !important;
    left: 50% !important;
    top: auto !important;
    transform: translateX(-50%) !important;
  }

  .info-box {
    width: 120px !important;
    min-height: 26px !important;
    height: auto !important;
    max-height: 34px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    padding: 4px 6px !important;
    transform: translateX(-20px) !important;
  }

  .info-box[id$="-info-top"] { left: 160px !important; }

  .node-network-container h2:not(.index-label),
  .node-network-container .news-item {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    margin: 10px 16px !important;
    text-align: left !important;
  }

  .stock-tickers {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 1900;
    padding: 10px 10px;
    font-size: 14px;
    min-height: 20px;
    width: 100%;
    margin: 0 !important;
  }

  .ticker-wrapper { display: flex; align-items: center; }
  .ticker { margin-right: 40px; }

  /* ✅ Mobile modal / popup starts below header + ticker */
  .modal{
    z-index: 2600 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 126px 10px 18px !important;
  }

  .modal-content{
    width: min(100%, 420px) !important;
    max-width: calc(100vw - 20px) !important;
    margin: 0 auto !important;
    max-height: calc(100dvh - 144px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 16px 14px 18px !important;
    border-radius: 16px !important;
  }

  .modal-content h2{
    margin: 0 34px 8px 0 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  .close-button{
    position: sticky !important;
    top: 0 !important;
    right: 0;
    font-size: 24px !important;
    line-height: 1 !important;
    z-index: 10 !important;
    background: #f9fafb !important;
    border-radius: 999px !important;
    padding: 0 4px !important;
  }

  .modal-content .news-btn,
  .modal-content button,
  .modal-content a[class*="btn"]{
    width: auto;
    max-width: 100%;
    min-height: 38px;
    justify-content: center;
  }

  .modal-content .hero-actions,
  .modal-content .archive-audio-actions,
  .modal-content .popup-actions{
    display: grid;
    gap: 8px;
  }

  #summaryContent{
    font-size: 14px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .modal-content *,
  #summaryContent *{
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .modal-content img,
  .modal-content video,
  .modal-content iframe,
  #summaryContent img,
  #summaryContent video,
  #summaryContent iframe{
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  footer {
    position: relative !important;
    margin-top: 20px !important;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* FACTOR CYCLER */
.node { position: absolute; }

.node .factor-cycle-btn {
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.25);
  background: rgba(249,250,251,0.95);
  color: #0f172a;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 2px 6px rgba(15,23,42,.18);
  transition: transform .14s ease, border-color .14s ease, color .14s ease;
}

.node.has-factor-stack .factor-cycle-btn { display: flex; }

.node .factor-cycle-btn:hover {
  border-color: rgba(96,165,250,0.65);
  color: var(--blue2);
  transform: translateY(-50%) translateX(1px);
}

.node .factor-cycle-btn:active { transform: translateY(-50%) scale(0.96); }

.node .factor-cycle-badge {
  position: absolute;
  right: -18px;
  top: calc(50% - 18px);
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 800;
  background: #0f172a;
  color: #f9fafb;
  border-radius: 999px;
  padding: 1px 6px;
  display: none;
  z-index: 21;
}

.node.has-factor-stack .factor-cycle-badge { display: inline-block; }

/* ── New-news notification badge ────────────────────────────────────── */
.node .news-new-dot {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: #dc2626;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 30;
  pointer-events: none;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .node .factor-cycle-btn {
    right: -16px;
    width: 24px;
    height: 24px;
  }
  .node .factor-cycle-badge { right: -16px; }
}

/* ── Tablet side-menu scaling (769px – 1279px) ──────────────────────────────
   On tablets the 260px fixed-width menu is too narrow relative to the screen.
   clamp() on the base width helps, but we also bump fonts and touch targets
   so the menu feels proportional whether you're on an iPad mini or iPad Pro. */

/* ACCESSIBILITY: focus styles (keyboard only) */
:where(
  a, button, [role="button"],
  .circle, .label-circle,
  .news-logo-square,
  .dropbtn, .header-link,
  .side-menu .section, .side-menu a,
  .node .factor-cycle-btn,
  .node-system .rundown a, .node-system .share-link a
):focus-visible{
  outline: 2px solid rgba(96,165,250,0.9);
  outline-offset: 3px;
  border-radius: 10px;
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================================================
   ✅ NEWS HOMEPAGE LAYER
   ========================================================= */

.news-shell{
  width: 100%;
  padding: 18px 16px 6px;
}

.news-grid{
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}

.news-main{ min-width: 0; }

.news-rail{
  position: sticky;
  top: 78px;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rail-card{
  background: rgba(2,6,23,0.75);
  border: 1px solid rgba(31,41,55,0.9);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.20);
  backdrop-filter: blur(10px);
}

.rail-title{
  font-weight: 820;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
  color: #f9fafb;
}

.rail-text{ color: #cbd5f5; margin: 0 0 10px; font-size: 13px; line-height: 1.35; }

.rail-links{
  display: grid;
  gap: 8px;
}

.rail-links a{
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(31,41,55,0.75);
  color: #e5e7eb;
  text-decoration: none;
  font-weight: 650;
  font-size: 13px;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.rail-links a:hover{
  transform: translateY(-1px);
  border-color: rgba(96,165,250,0.55);
  background: rgba(96,165,250,0.10);
}

.rail-metrics{
  display: grid;
  gap: 10px;
}

.metric{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  background: rgba(15,23,42,0.45);
  border: 1px solid rgba(31,41,55,0.7);
  border-radius: 12px;
}
.metric-label{ color: #cbd5f5; font-weight: 650; font-size: 12px; }
.metric-value{ color: #f9fafb; font-weight: 820; font-variant-numeric: tabular-nums; }

/* ✅ ARCHIVE RAIL + SEARCH */
.archive-card{
  display: flex;
  flex-direction: column;
  min-height: 320px;
}

.archive-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.archive-head .rail-title{
  margin-bottom: 0;
}

.archive-meta{
  color: rgba(203,213,245,0.70);
  font-size: 12px;
  font-weight: 650;
}

.archive-search-wrap{
  position: relative;
  margin-bottom: 10px;
}

.archive-search-icon{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(203,213,245,0.68);
  font-size: 12px;
  pointer-events: none;
}

.archive-search{
  width: 100%;
  height: 40px;
  padding: 0 40px 0 34px;
  border-radius: 12px;
  border: 1px solid rgba(31,41,55,0.9);
  background: rgba(2,6,23,0.55);
  color: #f9fafb;
  outline: none;
  font-size: 13px;
  font-weight: 600;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.archive-search::placeholder{
  color: rgba(203,213,245,0.62);
  font-weight: 500;
}

.archive-search:focus{
  border-color: rgba(96,165,250,0.8);
  box-shadow: 0 0 0 3px rgba(96,165,250,0.18);
  background: rgba(8,15,32,0.72);
}

.archive-clear-btn{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(203,213,245,0.72);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, opacity .14s ease;
}

.archive-clear-btn:hover{
  background: rgba(96,165,250,0.12);
  color: #f9fafb;
}

.archive-clear-btn.is-hidden{
  opacity: 0;
  pointer-events: none;
}

.archive-search-help{
  margin: -2px 0 10px;
  color: rgba(203,213,245,0.62);
  font-size: 11px;
  line-height: 1.35;
}

.archive-list{
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding: 2px 4px 2px 0;
}

.archive-item{
  display: grid;
  gap: 6px;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(15,23,42,0.45);
  border: 1px solid rgba(31,41,55,0.7);
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}

.archive-item:hover{
  transform: translateY(-1px);
  border-color: rgba(96,165,250,0.5);
}

.archive-item-title{
  color: #f9fafb;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 820;
}

.archive-item-meta{
  color: rgba(203,213,245,0.75);
  font-size: 12px;
  font-weight: 650;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Full archive card layout ──────────────────────────────── */
.archive-item.arc-card{
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.arc-card__body{
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.arc-card__title{
  color: #f9fafb;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 820;
}
.arc-card__dek{
  color: rgba(203,213,245,0.78);
  font-size: 12px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.arc-card__meta{
  color: rgba(203,213,245,0.65);
  font-size: 11px;
  font-weight: 650;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 2px;
}
.arc-card__date{ opacity: .85; }
.arc-card__readtime{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: .75;
}
.arc-card__readtime i{ font-size: 10px; }
/* ─────────────────────────────────────────────────────────── */

.archive-item .src-badge{
  background: rgba(203,213,245,0.95);
  color: #0b1220;
}

.archive-empty{
  padding: 12px 10px;
  border-radius: 14px;
  background: rgba(15,23,42,0.35);
  border: 1px solid rgba(31,41,55,0.55);
  color: rgba(203,213,245,0.82);
  font-size: 13px;
  line-height: 1.45;
}

.archive-skel{
  height: 52px;
  border-radius: 14px;
  background: rgba(15,23,42,0.35);
  border: 1px solid rgba(31,41,55,0.55);
  position: relative;
  overflow: hidden;
}

.archive-skel::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,0.12), transparent);
  transform: translateX(-100%);
  animation: skel 1.2s linear infinite;
}

/* =========================================================
   ✅ PREMIUM AUDIO STRIPS (Lens Brief)
   ========================================================= */

.archive-item.lens-brief-episode{
  cursor: default;
  overflow: hidden;
}

.archive-audio{
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(2,6,23,0.40);
  border: 1px solid rgba(31,41,55,0.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.archive-audio audio{
  width: 100%;
  max-width: 100%;
  display: block;
  height: 34px;
  border-radius: 12px;
  background: transparent;
  outline: none;
  accent-color: var(--blue);
}

.archive-audio audio::-webkit-media-controls-panel{
  background: rgba(249,250,251,0.92);
  border-radius: 12px;
}
.archive-audio audio::-webkit-media-controls-enclosure{
  border-radius: 12px;
}

/* ✅ NEW: Audio strip CTA row */
.archive-audio-actions{
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.lens-brief-player-btn{
  min-height: 38px;
  padding: 9px 14px;
  border-radius: 12px;
  border-color: rgba(96,165,250,0.55);
  background:
    linear-gradient(180deg, rgba(96,165,250,0.18), rgba(59,130,246,0.10)),
    rgba(96,165,250,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 20px rgba(2,6,23,0.16);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.lens-brief-player-btn i{
  color: #bfdbfe;
}

.lens-brief-player-btn:hover{
  border-color: rgba(147,197,253,0.95);
  background:
    linear-gradient(180deg, rgba(96,165,250,0.24), rgba(59,130,246,0.16)),
    rgba(96,165,250,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 14px 26px rgba(2,6,23,0.22);
}

@media (max-width: 768px){
  .archive-audio{ padding: 8px; }
  .archive-audio audio{ height: 32px; }

  .archive-audio-actions{
    display: grid;
  }

  .lens-brief-player-btn{
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   ✅ PREMIUM MP3 PLAYER MODAL
   ========================================================= */

.lens-brief-player-modal{
  position: fixed;
  inset: 0;
  z-index: 2500;
}

.lens-brief-player-backdrop{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 50% 15%, rgba(96,165,250,0.14), transparent 60%),
    rgba(2,6,23,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lens-brief-player-panel{
  position: relative;
  z-index: 1;
  width: min(560px, calc(100% - 28px));
  margin: 64px auto 24px;
  padding: 18px 18px 20px;
  border-radius: 24px;
  border: 1px solid rgba(96,165,250,0.22);
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(96,165,250,0.18), transparent 55%),
    linear-gradient(180deg, rgba(8,15,32,0.96), rgba(2,6,23,0.98));
  box-shadow:
    0 28px 90px rgba(2,6,23,0.48),
    inset 0 1px 0 rgba(255,255,255,0.05);
  color: #f9fafb;
  overflow: hidden;
}

.lens-brief-player-panel::before{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.16;
  mask-image: radial-gradient(circle at 50% 20%, black 0 58%, transparent 88%);
}

.lens-brief-player-close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.24);
  background: rgba(15,23,42,0.64);
  color: #f9fafb;
  font-size: 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(2,6,23,0.22);
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}

.lens-brief-player-close:hover{
  transform: translateY(-1px);
  border-color: rgba(96,165,250,0.55);
  background: rgba(96,165,250,0.14);
}

.lens-brief-player-topline{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.lens-brief-player-date{
  color: rgba(203,213,245,0.82);
  font-size: 12px;
  font-weight: 700;
}

.lens-brief-player-title{
  position: static !important;
  margin: 0 42px 6px 0;
  color: #f9fafb;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  font-weight: 900;
  z-index: 1;
}

.lens-brief-player-subtitle{
  color: rgba(203,213,245,0.82);
  font-size: 13px;
  font-weight: 650;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.lens-brief-player-art{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 190px;
  margin-bottom: 18px;
  border-radius: 20px;
  border: 1px solid rgba(96,165,250,0.20);
  background:
    radial-gradient(380px 220px at 50% 50%, rgba(96,165,250,0.28), transparent 70%),
    linear-gradient(135deg, rgba(15,23,42,0.75), rgba(3,10,26,0.95));
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 16px 40px rgba(2,6,23,0.26);
}

.lens-brief-player-art::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(191,219,254,0.08) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: lensPlayerSweep 4s linear infinite;
}

@keyframes lensPlayerSweep{
  to{ transform: translateX(100%); }
}

.lens-brief-player-art-inner{
  width: 92px;
  height: 92px;
  border-radius: 999px;
  border: 1px solid rgba(191,219,254,0.22);
  background:
    radial-gradient(circle at 35% 30%, rgba(191,219,254,0.18), rgba(96,165,250,0.08) 48%, rgba(2,6,23,0.75) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dbeafe;
  font-size: 34px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 18px 36px rgba(2,6,23,0.24);
}

#lensBriefPlayerAudio{
  display: none;
}

.lens-brief-player-controls-shell{
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.lens-brief-control-btn{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.24);
  background: rgba(15,23,42,0.62);
  color: #f9fafb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 12px 24px rgba(2,6,23,0.20);
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.lens-brief-control-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(96,165,250,0.52);
  background: rgba(96,165,250,0.12);
}

.lens-brief-control-btn:active{
  transform: translateY(0);
}

.lens-brief-control-btn.is-primary{
  width: 62px;
  height: 62px;
  border-color: rgba(96,165,250,0.48);
  background:
    linear-gradient(180deg, rgba(96,165,250,0.22), rgba(59,130,246,0.12)),
    rgba(96,165,250,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 18px 34px rgba(2,6,23,0.26);
}

.lens-brief-control-btn.is-primary i{
  font-size: 18px;
}

.lens-brief-player-progress-wrap{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.lens-brief-player-time{
  color: rgba(203,213,245,0.86);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  text-align: center;
}

.lens-brief-player-progress{
  position: relative;
  width: 100%;
  cursor: pointer;
  outline: none;
}

.lens-brief-player-progress-track{
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(148,163,184,0.20);
  overflow: visible;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.22);
}

.lens-brief-player-progress-fill{
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(147,197,253,0.95), rgba(59,130,246,0.95));
  box-shadow: 0 0 16px rgba(96,165,250,0.25);
}

.lens-brief-player-progress-thumb{
  position: absolute;
  top: 50%;
  left: 0%;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #f9fafb;
  border: 2px solid rgba(59,130,246,0.95);
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 16px rgba(2,6,23,0.22);
}

.lens-brief-player-progress:focus-visible .lens-brief-player-progress-track{
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.22),
    0 0 0 3px rgba(96,165,250,0.22);
}

@media (max-width: 768px){
  .lens-brief-player-panel{
    width: calc(100% - 20px);
    margin: 48px auto 18px;
    padding: 16px 14px 18px;
    border-radius: 20px;
  }

  .lens-brief-player-title{
    font-size: 21px;
    margin-right: 38px;
  }

  .lens-brief-player-art{
    height: 164px;
    border-radius: 18px;
  }

  .lens-brief-player-art-inner{
    width: 80px;
    height: 80px;
    font-size: 30px;
  }

  .lens-brief-player-controls-shell{
    gap: 10px;
  }

  .lens-brief-control-btn{
    width: 44px;
    height: 44px;
  }

  .lens-brief-control-btn.is-primary{
    width: 56px;
    height: 56px;
  }

  .lens-brief-player-progress-wrap{
    gap: 8px;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
  }

  .lens-brief-player-time{
    font-size: 11px;
    min-width: 0;
  }
}

/* ✅ LENS BRIEF PODCAST SECTION */
.lens-brief-wrap{
  margin-top: 16px;
  border-radius: 18px;
  border: 1px solid rgba(31,41,55,0.9);
  background: rgba(2,6,23,0.72);
  padding: 14px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.22);
}

.lens-brief-head{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.lens-brief-copy{
  min-width: 0;
}

.lens-brief-copy .section-title{
  margin-bottom: 4px;
}

.lens-brief-search-wrap{
  position: relative;
  margin-bottom: 10px;
}

.lens-brief-search-icon{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(203,213,245,0.68);
  font-size: 12px;
  pointer-events: none;
}

.lens-brief-search{
  width: 100%;
  height: 42px;
  padding: 0 40px 0 34px;
  border-radius: 12px;
  border: 1px solid rgba(31,41,55,0.9);
  background: rgba(2,6,23,0.55);
  color: #f9fafb;
  outline: none;
  font-size: 13px;
  font-weight: 600;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.lens-brief-search::placeholder{
  color: rgba(203,213,245,0.62);
  font-weight: 500;
}

.lens-brief-search:focus{
  border-color: rgba(96,165,250,0.8);
  box-shadow: 0 0 0 3px rgba(96,165,250,0.18);
  background: rgba(8,15,32,0.72);
}

.lens-brief-clear{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(203,213,245,0.72);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, opacity .14s ease;
}

.lens-brief-clear:hover{
  background: rgba(96,165,250,0.12);
  color: #f9fafb;
}

.lens-brief-clear.is-hidden{
  opacity: 0;
  pointer-events: none;
}

.lens-brief-help{
  margin: -2px 0 10px;
  color: rgba(203,213,245,0.62);
  font-size: 11px;
  line-height: 1.35;
}

.lens-brief-list{
  display: grid;
  gap: 8px;
}

.lens-brief-item{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(15,23,42,0.45);
  border: 1px solid rgba(31,41,55,0.72);
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}

.lens-brief-item:hover{
  transform: translateY(-1px);
  border-color: rgba(96,165,250,0.5);
}

.lens-brief-main{
  min-width: 0;
  display: grid;
  gap: 6px;
}

.lens-brief-title{
  color: #f9fafb;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 860;
  margin: 0;
}

.lens-brief-meta{
  color: rgba(203,213,245,0.75);
  font-size: 12px;
  font-weight: 650;
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap: wrap;
}

.lens-brief-meta .src-badge{
  background: rgba(203,213,245,0.95);
  color: #0b1220;
}

.lens-brief-spotify-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  min-width: 132px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(29,185,84,0.55);
  background: rgba(29,185,84,0.14);
  color: #f9fafb;
  text-decoration: none;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.lens-brief-spotify-btn i{
  color: var(--spotify);
  font-size: 14px;
}

.lens-brief-spotify-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(29,185,84,0.9);
  background: rgba(29,185,84,0.22);
  box-shadow: 0 10px 24px rgba(29,185,84,0.12);
}

.lens-brief-spotify-btn:active{
  transform: translateY(0);
}

.lens-brief-empty{
  padding: 12px 10px;
  border-radius: 14px;
  background: rgba(15,23,42,0.35);
  border: 1px solid rgba(31,41,55,0.55);
  color: rgba(203,213,245,0.82);
  font-size: 13px;
  line-height: 1.45;
}

.lens-brief-note{
  margin-top: 10px;
  color: rgba(203,213,245,0.72);
  font-size: 12px;
  font-weight: 650;
}

.lens-brief-skel{
  height: 58px;
  border-radius: 14px;
  background: rgba(15,23,42,0.35);
  border: 1px solid rgba(31,41,55,0.55);
  position: relative;
  overflow: hidden;
}

.lens-brief-skel::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,0.12), transparent);
  transform: translateX(-100%);
  animation: skel 1.2s linear infinite;
}

.rail-form{ display: grid; gap: 10px; }
.rail-input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(31,41,55,0.9);
  background: rgba(2,6,23,0.55);
  color: #f9fafb;
  outline: none;
}
.rail-input::placeholder{ color: rgba(203,213,245,0.65); }
.rail-input:focus{
  border-color: rgba(96,165,250,0.8);
  box-shadow: 0 0 0 3px rgba(96,165,250,0.18);
}

.breaking-bar{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(2,6,23,0.60);
  border: 1px solid rgba(31,41,55,0.9);
  margin-bottom: 14px;
  backdrop-filter: blur(10px);
}
.breaking-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.06em;
  font-size: 11px;
  color: #0b1220;
  background: rgba(34,197,94,0.95);
}
.breaking-text{ color: #cbd5f5; font-weight: 600; font-size: 13px; }

.hero-grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  margin-bottom: 16px;
}

.hero-card{
  border-radius: 18px;
  border: 1px solid rgba(31,41,55,0.9);
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(96,165,250,0.18), transparent 60%),
    radial-gradient(900px 420px at 80% 0%, rgba(34,197,94,0.10), transparent 62%),
    rgba(2,6,23,0.72);
  padding: 16px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.22);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.hero-card:hover{
  transform: translateY(-2px);
  border-color: rgba(96,165,250,0.55);
}

.hero-kicker{
  display:flex;
  align-items:center;
  gap: 8px;
  color: rgba(203,213,245,0.85);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.kicker-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(96,165,250,0.9);
  box-shadow: 0 0 14px rgba(96,165,250,0.35);
}
.kicker-sep{ opacity: 0.55; }

.hero-card-wrap{ position: relative; }

.hero-cycle-btn{
  position: absolute;
  top: 50%;
  right: -14px;
  transform: translateY(-50%);
  z-index: 5;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(15,23,42,0.92);
  color: rgba(226,232,240,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.hero-cycle-btn:hover{
  background: rgba(96,165,250,0.25);
  border-color: rgba(96,165,250,0.6);
}
.hero-cycle-btn:active{ transform: translateY(-50%) scale(0.92); }

/* ✅ HERO IMAGE FIX: show full image with no cropping */
.hero-media{
  width: 100%;
  height: 260px;
  margin: 12px 0 14px;
  border-radius: 16px;
  overflow: hidden;
  display: block;
  background:
    linear-gradient(180deg, rgba(15,23,42,0.18), rgba(2,6,23,0.28)),
    rgba(15,23,42,0.45);
  border: 1px solid rgba(31,41,55,0.75);
}

.hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center 28% !important;
  display: block;
}

.hero-title{
  margin: 10px 0 8px;
  color: #f9fafb;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  position: static !important;
}

.hero-dek{
  margin: 0 0 14px;
  color: rgba(203,213,245,0.9);
  font-size: 14px;
  line-height: 1.55;
  max-width: 62ch;
}

.hero-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.news-btn{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(96,165,250,0.55);
  background: rgba(96,165,250,0.15);
  color: #f9fafb;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.news-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(96,165,250,0.9);
  background: rgba(96,165,250,0.22);
}
.news-btn:active{ transform: translateY(0); }

.news-btn.ghost{
  border-color: rgba(31,41,55,0.9);
  background: rgba(2,6,23,0.35);
}
.news-btn.ghost:hover{
  border-color: rgba(96,165,250,0.55);
  background: rgba(96,165,250,0.10);
}
.news-btn.full{ width: 100%; border-radius: 14px; }

.news-btn.spotify-btn,
a.news-btn.spotify-btn{
  border-color: rgba(29,185,84,0.55);
  background: rgba(29,185,84,0.14);
}
.news-btn.spotify-btn:hover,
a.news-btn.spotify-btn:hover{
  border-color: rgba(29,185,84,0.9);
  background: rgba(29,185,84,0.22);
}
.news-btn.spotify-btn i,
a.news-btn.spotify-btn i{
  color: var(--spotify);
}

.top-stories-card{
  border-radius: 18px;
  border: 1px solid rgba(31,41,55,0.9);
  background: rgba(2,6,23,0.72);
  padding: 14px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.22);
}

.top-stories-head{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.top-stories-head h3{
  margin: 0;
  color: #f9fafb;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.mini-muted{
  color: rgba(203,213,245,0.70);
  font-size: 12px;
  font-weight: 650;
}

.top-stories{
  display:grid;
  gap: 8px;
}
.top-story{
  display:grid;
  gap: 6px;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(15,23,42,0.45);
  border: 1px solid rgba(31,41,55,0.7);
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease;
}
.top-story:hover{
  transform: translateY(-1px);
  border-color: rgba(96,165,250,0.5);
}
.top-story-title{
  color: #f9fafb;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 820;
}
.top-story-meta{
  color: rgba(203,213,245,0.75);
  font-size: 12px;
  font-weight: 650;
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap: wrap;
}
.src-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #0b1220;
  background: rgba(203,213,245,0.95);
}

.top-story-skel,
.feed-skel{
  height: 46px;
  border-radius: 14px;
  background: rgba(15,23,42,0.35);
  border: 1px solid rgba(31,41,55,0.55);
  position: relative;
  overflow: hidden;
}
.top-story-skel::after,
.feed-skel::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,0.12), transparent);
  transform: translateX(-100%);
  animation: skel 1.2s linear infinite;
}
@keyframes skel{ to{ transform: translateX(100%); } }

.latest-wrap{
  margin-top: 6px;
  border-radius: 18px;
  border: 1px solid rgba(31,41,55,0.9);
  background: rgba(2,6,23,0.72);
  padding: 14px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.22);
}

.section-head{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.section-title{
  margin: 0;
  color: #f9fafb;
  font-size: 16px;
  font-weight: 920;
  letter-spacing: 0.02em;
  position: static !important;
}

.section-subtitle{
  margin: 6px 0 0;
  color: rgba(203,213,245,0.85);
  font-size: 13px;
  line-height: 1.35;
}

.section-tools{ display:flex; gap: 8px; flex-wrap: wrap; }

.chip{
  border-radius: 999px;
  padding: 7px 10px;
  border: 1px solid rgba(31,41,55,0.9);
  background: rgba(15,23,42,0.45);
  color: rgba(203,213,245,0.9);
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
.chip:hover{
  transform: translateY(-1px);
  border-color: rgba(96,165,250,0.55);
}
.chip.active{
  border-color: rgba(96,165,250,0.85);
  background: rgba(96,165,250,0.14);
  color: #f9fafb;
}

.latest-feed{
  display:grid;
  gap: 8px;
}

.feed-row{
  display:grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-radius: 16px;
  background: rgba(15,23,42,0.45);
  border: 1px solid rgba(31,41,55,0.75);
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease;
  text-decoration: none;
  color: inherit;
}
.feed-row:hover{
  transform: translateY(-1px);
  border-color: rgba(96,165,250,0.55);
}
a.feed-row:visited { color: inherit; }

.feed-media{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(2,6,23,0.55);
  border: 1px solid rgba(31,41,55,0.9);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(203,213,245,0.75);
  font-weight: 900;
  letter-spacing: 0.06em;
  font-size: 11px;
}
.feed-media img{ width:100%; height:100%; object-fit: cover; display:block; }
.feed-media[data-src="CNBC"]         { background:#1a0000; color:#e31837; }
.feed-media[data-src="Yahoo Finance"]{ background:#1a0d2e; color:#7c3aed; }
.feed-media[data-src="Bloomberg"]    { background:#1a1a1a; color:#f59e0b; }
.feed-media[data-src="MarketWatch"]  { background:#0f2a0f; color:#4ade80; }

.feed-title{
  margin: 0;
  color: #f9fafb;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.25;
}
.feed-meta{
  margin-top: 6px;
  display:flex;
  gap: 8px;
  align-items:center;
  color: rgba(203,213,245,0.75);
  font-size: 12px;
  font-weight: 700;
  flex-wrap: wrap;
}

.lens-section-head{
  margin-top: 16px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(31,41,55,0.9);
  background: rgba(2,6,23,0.55);
  backdrop-filter: blur(10px);
}

/* Responsive */
@media (max-width: 1100px){
  .news-grid{ grid-template-columns: 1fr; }
  .news-rail{ position: static; }
  .hero-title{ font-size: 24px; }
}

@media (max-width: 768px){
  .news-shell{ padding: 14px 12px 0; }
  .hero-grid{ grid-template-columns: 1fr; }
  .feed-row{ grid-template-columns: 52px 1fr; }
  .feed-media{ width: 52px; height: 52px; border-radius: 12px; }

  .archive-card{
    min-height: auto;
  }

  .archive-list{
    max-height: 240px;
  }

  .archive-search{
    font-size: 13px;
  }

  .lens-brief-item{
    grid-template-columns: 1fr;
    align-items: start;
  }

  .lens-brief-spotify-btn{
    width: 100%;
    min-width: 0;
  }

  .lens-section-head{
    align-items: flex-start;
  }

  /* ✅ Hero image height on mobile */
  .hero-media{
    height: 220px;
  }
}

/* Ensure ticker never wraps on story page */
.ticker-bar, .ticker, .ticker-wrap {
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* If your ticker uses an inner moving track */
.ticker-track, .ticker-inner {
  display: inline-flex;
  gap: 28px;
  white-space: nowrap !important;
}
/* =========================================================
   ✅ SINGLE LENS VIEW (used by Saved Lens detail page)
   - Isolated under .tsl-single-lens-view so it can NEVER
     affect the homepage / premium dashboard layout.
   - Hides everything except the one targeted .node-system
   ========================================================= */
.tsl-single-lens-view .news-shell { display: none !important; }

.tsl-single-lens-view .node-network-container {
  position: relative !important;
  min-height: auto !important;
  padding: 0 !important;
  background: none !important;
}
.tsl-single-lens-view .node-network-container::before { display: none !important; }

.tsl-single-lens-view .node-network {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
}

.tsl-single-lens-view .node-network-container > *:not(.moving-dot):not(.news-logo-square) { display: none !important; }

.tsl-single-lens-view .node-network-container > .node-system.tsl-active-lens {
  display: block !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: 400px !important;
  height: 520px !important;
  margin: 0 auto !important;
  border: 1px solid rgba(229,231,235,0.95) !important;
  border-radius: var(--radius) !important;
  background: #f9fafb !important;
  box-shadow: var(--shadow1) !important;
  overflow: hidden !important;
}

/* Everything below (.nodes-container, .circle, .index-label, .rundown,
   .share-link, .save-lens, .impact-arrow) intentionally falls back to the
   same rules used on the homepage cards, so the saved-lens view renders
   pixel-identical to the live homepage lens. */

/* ✅ Override the display:contents region-heading wrappers (higher specificity
   than the bare #id !important rules) so they're truly hidden in single-lens view */
.tsl-single-lens-view #market-lens,
.tsl-single-lens-view #us-lenses,
.tsl-single-lens-view #us-nyc-2,
.tsl-single-lens-view #us-nyc-3,
.tsl-single-lens-view #europe-lenses,
.tsl-single-lens-view #intl-frankfurt,
.tsl-single-lens-view #intl-paris,
.tsl-single-lens-view #asia-nikkei,
.tsl-single-lens-view #asia-hangseng,
.tsl-single-lens-view #asia-shanghai,
.tsl-single-lens-view #stock-nyc-1,
.tsl-single-lens-view #stock-nyc-2,
.tsl-single-lens-view #stock-nyc-3,
.tsl-single-lens-view #stock-nyc-4,
.tsl-single-lens-view #stock-nyc-5,
.tsl-single-lens-view #stock-nyc-6,
.tsl-single-lens-view #stock-nyc-7,
.tsl-single-lens-view #stock-nyc-8,
.tsl-single-lens-view #stock-nyc-9,
.tsl-single-lens-view #commodity-1,
.tsl-single-lens-view #commodity-2,
.tsl-single-lens-view #commodity-3,
.tsl-single-lens-view #currency-1,
.tsl-single-lens-view #currency-2,
.tsl-single-lens-view #currency-3,
.tsl-single-lens-view #crypto-1,
.tsl-single-lens-view #crypto-2,
.tsl-single-lens-view #crypto-3 {
  display: none !important;
}

/* ── Envelope notification (added by subscription system) ── */
/* Additional override to ensure header uses flex for the envelope alignment */
header#tslHeader {
  display: flex !important;
  align-items: center !important;
}


/* ── Image protection ── */
img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}