@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@300;400;500&family=IBM+Plex+Serif:ital,wght@0,400;1,400;1,700&display=swap');

/* ═══════════════════════════════════════════════════════════
   THEME SYSTEM — Dark / Light / Zen modes
   ═══════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  --bg-page:         #0c0d0f;
  --bg-surface:      #13151a;
  --bg-elevated:     #1c1f28;
  --bg-card:         #13151a;
  --bg-input:        #21242e;
  
  --border-light:    rgba(255,255,255,0.06);
  --border-medium:   rgba(255,255,255,0.12);
  --border-strong:   rgba(255,255,255,0.16);
  
  --text-primary:    #e8eaf0;
  --text-secondary:  #8891a4;
  --text-muted:      #525b6e;
  --text-accent:     #4ade80cc; /*#4ade80;*/
  
  --accent:          #4ade80cc;
  --accent-dim:      rgba(74,222,128,0.12);
  --accent-glow:     rgba(74,222,128,0.25);
  
  --navbar-bg:       linear-gradient(to bottom, #13151a, #0f1014);
  --navbar-active:   linear-gradient(to bottom, #1c1f28, #17191f);
  --navbar-text:     #e8eaf0;
  
  --card-shadow:     0 8px 32px rgba(0,0,0,0.6);
  --chart-grid:      rgba(255,255,255,0.04);
  --scrollbar:       #3d4f6e;
  
  --news-headline:   #cbd5e1;
  --news-source:     #6b7280;
  
  --pill-bg:         #21242e;
  --pill-text:       #8891a4;
  --pill-border:     rgba(255,255,255,0.12);

  --snd-change-positive: #4ade80;
  --snd-change-negative: #fb7185;
  --snd-change-neutral:  var(--text-muted);
}

[data-theme="light"] {
  --bg-page:         #EFF1F1;
  --bg-surface:      #F7F7F7;
  --bg-elevated:     #ffffff;
  --bg-card:         #ffffff;
  --bg-input:        #f3f5f7;
  
  --border-light:    #e2e5ec;
  --border-medium:   #c8cdd8;
  --border-strong:   #0f1621;
  
  --text-primary:    #0f1621;
  --text-secondary:  #4a5568;
  --text-muted:      #9aa5b4;
  --text-accent:     #0f1621;
  
  --accent:          #16803c;
  --accent-dim:      rgba(22,128,60,0.09);
  --accent-glow:     rgba(22,128,60,0.2);
  
  --navbar-bg:       #ffffff;
  --navbar-active:   linear-gradient(to bottom, #f0eeea, #f5f4f0);
  --navbar-text:     var(--text-primary);
  
  --card-shadow:     0 1px 3px rgba(15,22,33,0.07), 0 1px 2px rgba(15,22,33,0.04);
  --chart-grid:      rgba(0,0,0,0.05);
  --scrollbar:       #c8cdd8;
  
  --news-headline:   #0f1621;
  --news-source:     #6b7280;
  --bg-hover:        #eef0f4;
  
  --pill-bg:         #ffffff;
  --pill-text:       #0f1621;
  --pill-border:     #c8cdd8;

  --snd-change-positive: #16803c;
  --snd-change-negative: #c62828;
  --snd-change-neutral:  var(--text-muted);
}

/* Light-mode carousel tab pills — inactive state only; :hover and .active
   keep their own accent-color feedback (defined later, same specificity,
   so source order lets them win over this). */
[data-theme="light"] .eb-tab {
  border-width: 2px;
  border-color: #FFFFFF;
  color: var(--text-primary);
  font-weight: 700;
}
/* Count badge on inactive pills — .active's own rule (higher specificity)
   keeps its translucent-black fill, untouched by this. */
[data-theme="light"] .eb-tab-count {
  background: #FFFFFF;
}

[data-theme="zen"] {
  --bg-page:         #1a1710;
  --bg-surface:      #211e15;
  --bg-elevated:     #2a2618;
  --bg-card:         #211e15;
  --bg-input:        #302c1e;
  
  --border-light:    rgba(210,185,130,0.08);
  --border-medium:   rgba(210,185,130,0.16);
  --border-strong:   rgba(210,185,130,0.22);
  
  --text-primary:    #e8dfc0;
  --text-secondary:  #9e9070;
  --text-muted:      #5a5240;
  --text-accent:     #c9a84c;
  
  --accent:          #c9a84c;
  --accent-dim:      rgba(201,168,76,0.1);
  --accent-glow:     rgba(201,168,76,0.22);
  
  --navbar-bg:       linear-gradient(90deg, #211e15, #25200f);
  --navbar-active:   linear-gradient(90deg, #2a2618, #2d2718);
  --navbar-text:     #e8dfc0;
  
  --card-shadow:     0 8px 32px rgba(0,0,0,0.55);
  --chart-grid:      rgba(210,185,130,0.05);
  --scrollbar:       #302c1e;
  
  --news-headline:   #d4c898;
  --news-source:     #7a7050;
  
  --pill-bg:         #302c1e;
  --pill-text:       #9e9070;
  --pill-border:     rgba(210,185,130,0.16);

  --snd-change-positive: #7fbf7f;
  --snd-change-negative: #d97b6c;
  --snd-change-neutral:  var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════
   ORIGINAL CSS WITH THEME VARIABLES APPLIED
   ═══════════════════════════════════════════════════════════ */

:root {
  --font-family: "IBM Plex Sans", "Verdana", sans-serif;
    /* --font-family: 'IBM Plex Mono', monospace; */
  --font-size: 12px;  /* ← CHANGE THIS to adjust ALL font sizes proportionally */

  /* Calculated font sizes (will scale with --font-size) */
  --font-xs: calc(var(--font-size) * 1.1);   /* ~9.5px at 12px base */
  --font-sm: calc(var(--font-size) * 1.15);   /* ~11px at 12px base */
  --font-base: var(--font-size);              /* 12px */
  --font-md: calc(var(--font-size) * 1.2);   /* ~13px at 12px base */
  --font-lg: calc(var(--font-size) * 1.25);   /* ~14px at 12px base */

  --navbar-height: 50px;
  --navbar-gap: 0px;

  --fieldset-border-color: var(--border-medium);

  /* Shared inactive (unselected) background for menu/commodity tab pills.
     Consumed by the Analytics #menu fieldset labels (analytics_v2.css) and by the
     News Feed .nf-chip commodity buttons. Resolves per theme because --bg-input is
     declared on [data-theme="…"], which matches the same <html> element as :root.
     Change here to move both components together — do not re-hardcode the value. */
  --ui-menu-tab-bg: var(--bg-input);

  --container-border-width: 0px;
  --output-border-width: 0px;

  --news-width: 22vw;
  --filters-width: 15vw;

  --chart-min-h: 360px;
  --table-min-h: 180px;

  --chart-debug-border: 0px;

  --menu-h: 15vh;
  --menu-w-commodity: 30%;  /* Expanded - viewmode moved out */
  --menu-w-dataset: 70%;    /* Expanded - viewmode moved out */
  --menu-w-viewmode: 100%;  /* Now full width inside output container */
  --menu-output-gap: 10px;
  --logo-to-title-gap: 0px;
  --title-to-menu-gap: 5px;

  --title-font-size: var(--font-base);
  --title-font-weight: 650;

  /* Semantic data font sizes — shared across CFTC chart, S&D table, ESR table */
  --eb-data-number-size: 11px;
  --eb-table-header-size: 11px;

  /* Transition timing */
  --transition: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ───────────────────────── Base fonts & body ───────────────────────── */
html {
  font-family: var(--font-family);
  font-size: var(--font-size);
  overscroll-behavior: none;  /* prevents iOS Safari rubber-band bounce */
}

body, input, select, textarea, button, table { 
  font: inherit; 
}

body {
  padding-top: var(--navbar-height);
  margin: 2px;
  background: var(--bg-page);
  color: var(--text-primary);
  transition: background var(--transition), color var(--transition);
  position: relative;
  font-size: var(--font-base);
  overflow: hidden;
  overscroll-behavior: none;  /* prevents iOS Safari rubber-band bounce */
}

/* Light mode subtle grid texture */
[data-theme="light"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(15,22,33,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,22,33,0.015) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}
/* ───────────────────────── Navbar ───────────────────────── */
.navbar {
  height: var(--navbar-height);
  position: fixed;
  left: 0;
  top: var(--navbar-gap);
  width: 100%;
  display: flex;
  align-items: center;
  background: var(--navbar-bg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  z-index: 900;
  transition: background var(--transition), box-shadow var(--transition) ;
  border-bottom: 1px solid var(--border-medium); 
  padding: 0 20px;
}

/* Light mode: strong navbar border */
[data-theme="light"] .navbar {
  border-bottom: 2px solid var(--text-primary);
  box-shadow: 0 1px 3px rgba(15,22,33,0.07), 0 1px 2px rgba(15,22,33,0.04);
}

.navbar ul { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
  display: flex;
  align-items: center;
  gap: 0;
}

.navbar li { 
  position: relative; 
}

.navbar a {
  display: flex;
  align-items: center;
  padding: 0 18px;
  height: var(--navbar-height);
  font-family: var(--font-family);
  font-size: var(--font-lg);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: all 0.18s ease;
  position: relative;
}

.navbar a:hover { 
  color: var(--text-secondary);
}

.navbar li.active a {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* Light mode: red underline for active state */
[data-theme="light"] .navbar li.active a {
  color: var(--text-primary);
  border-bottom-color: #d62828;
}

/* Separator between nav items */
.navbar li:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: var(--border-medium);
}

[data-theme="light"] .navbar li:not(:first-child)::before {
  background: var(--border-dark);
}

.logo-img { 
  height: 40px;
  border-radius: 5px;
}

/* ───────────────────────── Top ribbon (menus) ───────────────────────── */
.top-ribbon {
  position: sticky;
  top: var(--navbar-height);
  z-index: 10;
  width: 100%;
  background: var(--bg-surface);
  transition: background var(--transition);
}

/* Light mode: flat panel background */
[data-theme="light"] .top-ribbon {
  background: var(--bg-surface);
  border-bottom: none solid var(--border-medium);
}

.menu-container {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 2px;
  gap: 10px;
  padding: 8px 12px;
  background: transparent;
}

.menu-container fieldset {
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  padding: 32px 16px 10px 16px;  /* top padding makes room for abs-positioned legend */
  margin: 0;
  box-sizing: border-box;
  background: var(--bg-surface);
  transition: background var(--transition), border-color var(--transition);
  position: relative;
}

/* Light mode */
[data-theme="light"] .menu-container {
  background: transparent;
}

[data-theme="light"] .menu-container fieldset {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
}

.menu-container fieldset:nth-child(1) {
  width: auto !important;
  height: auto !important;
  flex-shrink: 0;
}

.menu-container fieldset:nth-child(2) {
  flex: 1 1 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0;
}

legend { 
  font-family: var(--font-family); 
  font-size: var(--font-base);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  padding: 0 0 5px 0;
  margin-bottom: 0.1px;
  border-bottom: 0.1px solid var(--border-light); 
  width: 100%;
  transition: color var(--transition), border-color var(--transition);
}

/* Menu fieldset legends: absolutely positioned so they don't break the border */
.menu-container fieldset > legend {
  position: absolute !important;
  top: 8px !important;
  left: 14px !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: none !important;
  color: var(--accent) !important;
  font-size: var(--font-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  grid-column: unset !important;
  float: none !important;
}

/* Light mode: visible legend with better contrast */
[data-theme="light"] legend {
  color: var(--text-muted);
  border-bottom-color: var(--border-light);
}

input[type=checkbox] { 
  accent-color: var(--accent); 
}

/* Light mode: darker checkbox accent */
[data-theme="light"] input[type=checkbox] {
  accent-color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════
   DOCKED LAYOUT WRAPPER
   ═══════════════════════════════════════════════════════════ */
.main-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: flex-start;
  max-height: 100vh;
  max-height: 100svh;
  padding: 0 12px 12px 12px;
  box-sizing: border-box;
  overflow-x: auto;
}

/* ═══════════════════════════════════════════════════════════
   OUTPUT CONTAINER
   ═══════════════════════════════════════════════════════════ */
#output-container {
  max-height: calc(100vh - var(--nav-offset) - var(--menu-h) - 25px);
  max-height: calc(100svh - var(--nav-offset) - var(--menu-h) - 25px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: none;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar) transparent;

  border: none;
  border-radius: 10px;

  padding: 0;
  box-sizing: border-box;
  background: var(--bg-page);

  order: 0;
  flex: 1 1 0;
  min-width: 600px;
  transition: background var(--transition);
}

#output-container::-webkit-scrollbar { 
  width: 6px; 
}

#output-container::-webkit-scrollbar-track { 
  background: transparent; 
}

#output-container::-webkit-scrollbar-thumb { 
  background: var(--scrollbar); 
  border-radius: 3px; 
}

/* ═══════════════════════════════════════════════════════════
   SECTION CONTAINER
   ═══════════════════════════════════════════════════════════ */
#output-container > section {
  border: none;
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  
  margin: 0;
  padding: 10px 10px 10px 2px;
  background: var(--bg-card);
  color: var(--text-primary);
  
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: calc(100vh - var(--nav-offset) - var(--menu-h) - 65px);
  height: calc(100svh - var(--nav-offset) - var(--menu-h) - 65px);
  overflow: hidden;
  
  transition: background var(--transition), border-color var(--transition), 
              box-shadow var(--transition), color var(--transition);
}

/* Light mode: clean flat background with subtle shadow */
[data-theme="light"] #output-container > section {
  background: var(--bg-elevated);
  border: none;
  box-shadow: 0 1px 3px rgba(15,22,33,0.07), 0 1px 2px rgba(15,22,33,0.04);
}

#output-container > section h3 {
  font-family: var(--font-family); 
  font-size: var(--font-base); 
  font-weight: var(--title-font-weight);
  color: var(--text-accent);
  margin: 0 0 6px 0;
  padding-bottom: 0px;
  border-bottom: 1px solid var(--border-light);
  line-height: 1.2;
  background: transparent;
  transition: color var(--transition), border-color var(--transition);
}

/* ─── inner layout ─── */
.output-layout {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  box-sizing: border-box;
  height: calc(100% - 2.0rem);
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.output-layout.table-only .viz-area {
  grid-template-rows: 1fr;
}

.output-layout.table-only .viz-area .table {
  grid-row: 1;
}

/* filters sidebar */
.output-layout .filters {
  flex: 0 0 var(--filters-width);
  width: var(--filters-width);

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;

  background: transparent;
  position: relative;
  z-index: 2;

  min-height: 0;
  overflow: auto;
}

.filters {
  margin-top: 20px;
}

.filters label { 
  display: block; 
  font-weight: 700; 
  margin: 0;
  color: var(--text-primary);
  transition: color var(--transition);
}

.filters label select,
.filters select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 2px;
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  padding: 6px 8px;
  transition: background var(--transition), border-color var(--transition), 
              color var(--transition);
}

.section-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}

.loading-indicator {
  font-size: var(--font-base);
  color: var(--text-secondary);
  transition: color var(--transition);
}

/* ═══════════════════════════════════════════════════════════
   VIZ AREA
   ═══════════════════════════════════════════════════════════ */
.output-layout .viz-area {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;

  display: grid;
  grid-template-rows:
    minmax(var(--chart-min-h), 1fr)
    minmax(var(--table-min-h), 0.70fr);

  gap: 3px;
  overflow: hidden;
}

.viz-area {
  padding: 15px;
  padding-top: 10px;
  box-sizing: border-box;
}

/* chart */
.chart {
  height: 100%;
  min-width: 0;
  min-height: var(--chart-min-h); 
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--bg-elevated);
  transition: background var(--transition), border-color var(--transition);
}

/* Light mode: clean white chart background with defined border */
[data-theme="light"] .chart {
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-medium);
}

/* Table container */
.table {
  min-width: 0;
  min-height: var(--table-min-h);
  overflow: auto;
  box-sizing: border-box;
}

.table table {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-collapse: collapse;
  width: 100%;
}

.table th {
  background: var(--bg-input);
  color: var(--text-secondary);
  font-weight: 600;
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid var(--border-medium);
  transition: background var(--transition), color var(--transition);
}

.table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-light);
  transition: border-color var(--transition);
}

/* Shared header style for section titles & news feed */
.card-title {
  font-family: var(--font-family); 
  font-size: var(--font-base);
  font-weight: var(--title-font-weight);
  color: var(--text-accent);

  margin: 0 0 6px 0;
  padding-bottom: 4px;

  border-bottom: 1px solid var(--border-light);
  line-height: 1.2;
  transition: color var(--transition), border-color var(--transition);
}

/* ═══════════════════════════════════════════════════════════
   NEWS PANEL
   ═══════════════════════════════════════════════════════════ */
.news-panel {
  order: 1;
  width: var(--news-width);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  max-height: 80vh;
  transition: background var(--transition), border-color var(--transition), 
              box-shadow var(--transition);
}

/* ── Full-page news (News Feed tab) ─────────────────────────── */
body.news-mode .main-row {
  padding: 0 12px 12px 12px;
  gap: 0;
  height: calc(100vh - var(--nav-offset));
  height: calc(100svh - var(--nav-offset));
  max-height: calc(100vh - var(--nav-offset));
  max-height: calc(100svh - var(--nav-offset));
  overflow: hidden;
  box-sizing: border-box;
}

.news-panel.news-full {
  width: 99vw;
  max-width: 99vw;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  border-radius: 0;
  flex-shrink: 1;
  box-sizing: border-box;
  overflow: hidden;
}
/* Light mode: flat panel background with strong border */
[data-theme="light"] .news-panel {
  background: #ffffff; /* Pure white surface */
  border: 1.5px solid var(--border-medium);
}
/* Full-page News: outer panel shell removed — individual cards define boundaries */
.news-panel.news-full,
[data-theme="light"] .news-panel.news-full {
  border: none;
  box-shadow: none;
  background: transparent;
}

.news-panel-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

.news-header {
  padding: 14px 14px 14px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
  background: var(--bg-elevated);
  transition: background var(--transition), border-color var(--transition);
}
.news-panel-header {
  padding: 14px 14px 14px;
  display: flex;
  align-items: flex-start;   /* 👈 aligns header top with left title */
}
.news-panel-header h2 {
  font-family: var(--font-family); 
  font-size: var(--font-base);
  font-weight: var(--title-font-weight);
  color: var(--text-accent);
  border-bottom: 1px solid var(--border-light);
}

/* Light mode: white header with strong border */
[data-theme="light"] .news-header {
  background: #ffffff;
  border-bottom: 1.5px solid var(--border-dark); /* Stronger separator */
  padding: 13px 16px;
}
[data-theme="light"] .news-header-label {
  font-family: var(--font-family); 
  font-size: var(--font-base);
  font-weight: 500;
  color: #0f1621;
}

.news-header h3 {
  font-family: var(--font-family); 
  font-size: var(--font-base);
  font-weight: var(--title-font-weight);
  color: var(--text-accent);
  margin: 0 0 4px 0;
  transition: color var(--transition);
}  

.news-meta {
  
  font-size: var(--font-xs);
  color: var(--text-muted);
  font-family: var(--font-family); 
  transition: color var(--transition);
}

.news-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: none;
  /* padding: 6px 0;*/
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar) transparent;
  padding: 14px 14px 14px;
}

.news-list::-webkit-scrollbar { width: 6px; }
.news-list::-webkit-scrollbar-track { background: transparent; }
.news-list::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; }

.news-item {
  padding: 14px 14px 14px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 0.12s;
  display: flex;
  flex-direction: column;
  
}

.news-item:hover {
  background: var(--accent-dim);
}

/* Light mode: cleaner hover state */
[data-theme="light"] .news-item {
  border-bottom: 1px solid var(--border-light);
}

[data-theme="light"] .news-item:hover {
  background: #eef0f4;
}

/* ── old class names kept for safety ── */
.news-source-row a {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--news-source);
  margin-bottom: 6px;
  font-family: var(--font-family);
  font-weight: 400;
  line-height: 1.3;
}
.news-source {
  color: var(--news-source);
  font-size: 10px;
}

/* ── Actual JS-rendered class names from renderNewsFeed.js ── */

/* Card wrapper */
.news-card {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 0.12s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.news-card:hover {
  background: var(--accent-dim);
}
[data-theme="light"] .news-card:hover {
  background: #eef0f4;
}

/* Headline link */
.news-title {
  color: var(--text-primary) !important;
  text-decoration: none !important;
  font-size: var(--font-base) !important;
  font-weight: 600;
  line-height: 1.45;
  font-family: var(--font-family);
  transition: color 0.15s ease;
  flex: 1;
}
.news-title:hover {
  color: var(--accent) !important;
  text-decoration: none !important;
}

/* Score badge */
.news-score {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  padding-top: 2px;
  font-family: var(--font-family);
}

/* Source + date meta line */
.news-card .news-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px !important;
  font-weight: 400 !important;
  color: var(--news-source) !important;
  font-family: var(--font-family);
  line-height: 1.3;
  margin-bottom: 2px;
}

/* Tag chips */
.news-tag {
  font-size: 9.5px;
  font-family: var(--font-family);
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 500;
  border: 1px solid transparent;
  background: var(--bg-input);
  color: var(--text-secondary);
  border-color: var(--border-medium);
}

/* Fallback old classes */
.news-time {
  font-size: 10px;
  color: var(--text-muted);
  transition: color var(--transition);
}
.score-badge {
  font-family: var(--font-family);
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
/* ───────────────────────── Color-Coded Tags ───────────────────────── */

.news-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 2px;
}

.news-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.tag {
  font-size: 9.5px;
  font-family: var(--font-family); 
  padding: 2px 7px;
  border-radius: 2px;
  font-weight: 500;
  border: 1px solid transparent;
}

/* Replace generic .news-tag with these: */
.news-tag { font-size: 9.5px; font-family: var(--font-family); padding: 2px 7px; border-radius: 4px; font-weight: 500; border: 1px solid transparent; }
.news-tag[data-tag="Price"],  .news-tag-price   { background: #fff7e6; color: #b45309; border-color: rgba(180,83,9,0.2); }
.news-tag[data-tag="Trade"],  .news-tag-trade   { background: #eff6ff; color: #1e40af; border-color: rgba(30,64,175,0.2); }
.news-tag[data-tag="Weather"],.news-tag-weather { background: #f0fdf4; color: #166534; border-color: rgba(22,101,52,0.2); }
.news-tag[data-tag="Policy"], .news-tag-policy  { background: #faf5ff; color: #6b21a8; border-color: rgba(107,33,168,0.2); }
/* ═══════════════════════════════════════════════════════════
   MENU ↔ OUTPUT GAP CONTROL
   ═══════════════════════════════════════════════════════════ */
.top-ribbon {
  margin-bottom: var(--menu-output-gap) !important;
}

.main-row {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#output-container {
  margin-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   DATASET: tighter grid, no slider
   ═══════════════════════════════════════════════════════════ */
:root {
  --dataset-cols: 5;
  --dataset-mincol: 130px;
  --dataset-colgap: 10px;
  --dataset-rowgap: 0.5px;
}

#fieldset-dataset {
  display: grid !important;
  grid-auto-flow: row;
  align-content: start;

  grid-template-columns: repeat(var(--dataset-cols), minmax(var(--dataset-mincol), 1fr)) !important;
  column-gap: var(--dataset-colgap) !important;
  row-gap: var(--dataset-rowgap) !important;

  width: 100% !important;
  max-width: 100% !important;

  overflow: visible !important;
  padding: 32px 16px 10px 16px !important;
}

#fieldset-dataset > label {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin: 0;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: var(--font-base);
  transition: color var(--transition);
}

#fieldset-dataset > label:hover {
  color: var(--text-primary);
}

/* Show the legend! */
#fieldset-dataset > legend {
  display: block !important;
  grid-column: 1 / -1 !important;
  position: relative;
  z-index: 2;
  margin: 0 0 0.1px 0 !important;
  padding: 0 0 5px 0 !important;
  font-family: var(--font-family); 
  font-size: var(--font-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   CHECKBOX GRIDS FOR ALL MENU SECTIONS
   ═══════════════════════════════════════════════════════════ */

/* General label styling for all checkboxes */
.menu-container label {
  display: flex !important;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: var(--font-base);
  transition: color var(--transition);
  cursor: pointer;
  margin: 0;
  white-space: nowrap;
}

.menu-container label:hover {
  color: var(--text-primary);
}

/* Commodity fieldset — 2 column grid */
.menu-container fieldset:nth-child(1) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 12px;
  row-gap: var(--dataset-rowgap);
  align-content: start;
  padding: 32px 16px 10px 16px !important;
}

/* keep legend full width */
.menu-container fieldset:nth-child(1) > legend {
  grid-column: 1 / -1;
  display: block !important;
  margin-bottom: 0.1px;
}

/* labels */
.menu-container fieldset:nth-child(1) > label {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* View fieldset - single column */
.menu-container fieldset:nth-child(3) {
  display: flex !important;
  flex-direction: column;
  padding: 13px 20px !important;
}

.menu-container fieldset:nth-child(3) > legend {
  display: block !important;
  margin-bottom: 9px;
}

.menu-container fieldset:nth-child(3) label {
  margin: 2px 0;
}

/* View fieldset */
.menu-container fieldset:nth-child(3) > legend {
  display: block !important;
}

/* ✅ Viewmode container — chip tag design */
.viewmode-container {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-surface);
}

.viewmode-container fieldset {
  border: none;
  border-radius: 0;
  padding: 0px 16px 0px 2px;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  transition: background var(--transition), border-color var(--transition);
}

.viewmode-container fieldset legend {
  font-family: var(--font-family);
  font-size: var(--font-base);
  font-weight: var(--title-font-weight);
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-accent);
  padding: 0;
  width: auto;
  float: left;
  margin-right: 12px;
  border-bottom: none;
  line-height: 1.2;
}

.viewmode-container fieldset label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-family);
  font-size: var(--font-base);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-input, var(--bg-page));
  border: 1px solid var(--border-medium);
  border-radius: 5px;
  padding: 4px 10px;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: all 0.18s ease;
}

.viewmode-container fieldset label:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

.viewmode-container fieldset label.vm-active {
  background: var(--accent);
  color: var(--bg-card);
  border-color: var(--accent);
  font-weight: 500;
  box-shadow: 0 2px 6px var(--accent-glow);
}

.viewmode-container fieldset label input[type="checkbox"] {
  display: none;
}

#fieldset-dataset {
  position: relative;
  overflow-y: visible !important;
}

/* ═══════════════════════════════════════════════════════════
   FILTERS: PILL + SEARCHABLE POPOVER
   ═══════════════════════════════════════════════════════════ */
.output-layout .filters {
  overflow: visible;
}

/* ── Filter pills — styled like the theme switcher ── */
.filters .filter-pill-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.filters .filter-pill-title {
  font-size: var(--font-base);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  transition: color var(--transition);
  padding: 0 2px;
}

/* The trigger button — matches theme-switcher container */
.filters .filter-pill {
  width: 100%;
  text-align: left;
  padding: 3px 3px 3px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-medium);
  background: var(--bg-input);
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1.2;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: var(--font-base);
  font-weight: 500;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition);
}

/* Active value chip inside pill — matches .theme-btn.active */
.filters .filter-pill .pill-value {
  background: var(--accent);
  color: var(--bg-card);
  font-weight: 500;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: var(--font-base);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 24px);
  box-shadow: 0 2px 6px var(--accent-glow);
  transition: background var(--transition), box-shadow var(--transition);
}

.filters .filter-pill:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.filters .filter-pill:focus {
  outline: 2px solid var(--accent-glow);
  outline-offset: 2px;
}

/* Chevron indicator */
.filters .pill-chevron {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1;
  transition: transform 0.2s ease, color var(--transition);
  flex-shrink: 0;
}

.filters .filter-pill[aria-expanded="true"] .pill-chevron {
  transform: rotate(180deg);
  color: var(--text-secondary);
}

.filters .filter-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;

  background: var(--bg-elevated);
  border: 1px solid var(--border-medium);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 10px;
  z-index: 1000;
  transition: background var(--transition), border-color var(--transition), 
              box-shadow var(--transition);
}

.filters .filter-search {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-medium);
  margin: 0 0 8px 0;
  background: var(--bg-input);
  color: var(--text-primary);
  transition: background var(--transition), border-color var(--transition), 
              color var(--transition);
}

.filters .filter-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow: auto;
  padding-right: 4px;
}

.filters .filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 2px 2px;
  white-space: nowrap;
  color: var(--text-primary);
  transition: color var(--transition);
}

.filters .filter-option-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.filters input.filter-opt-cb {
  margin: 0;
  transform: scale(0.95);
  transform-origin: left center;
}

/* If a section has no table content, let the chart use full height */
.output-layout.no-table .viz-area {
  grid-template-rows: 1fr !important;
}

.output-layout.no-table .viz-area .table {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   MENU RIBBON - Legends now visible, no pseudo titles needed
   ═══════════════════════════════════════════════════════════ */
:root {
  --nav-offset: calc(var(--navbar-height) + var(--navbar-gap));
  --menu-title-strip: 0px;  /* No longer needed, using real legends */
}

body:not(.lp-mode) {
  padding-top: var(--nav-offset) !important;
}
body {
  background: var(--bg-page);
  color: var(--text-primary);
  /* Demo uses Libre Franklin for body text */
  font-family: var(--font-family);
  font-size: 13px;
  line-height: 1.5;
}

.top-ribbon {
  top: var(--nav-offset) !important;
  padding-top: 12px !important;
  background: var(--bg-surface);
  overflow: visible !important;
  z-index: 50;
}

.menu-container {
  margin-top: 0 !important;
  overflow: visible !important;
}

.menu-container fieldset {
  padding: 32px 16px 10px 16px !important;
  overflow: visible !important;
  position: relative;
  z-index: 1;
}

/* Hide native legend is removed - we want them visible now */
.menu-container fieldset > legend {
  display: block !important;
}

/* Remove the pseudo-element title since we have real legends */
.menu-container fieldset::before {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   THEME SWITCHER (add this to your HTML navbar)
   ═══════════════════════════════════════════════════════════ */
.theme-switcher {
  display: flex;
  gap: 4px;
  background: var(--bg-input);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border-medium);
  margin-left: auto;
  margin-right: 30px;
  transition: background var(--transition), border-color var(--transition);
}

.theme-btn {
  padding: 5px 14px;
  border-radius: 5px;
  font-family: var(--font-family); 
  font-size: var(--font-base);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.theme-btn:hover {
  color: var(--text-primary);
}

.theme-btn.active {
  background: var(--accent);
  color: var(--bg-card);
  font-weight: 500;
  box-shadow: 0 2px 8px var(--accent-glow);
}

/* ═══════════════════════════════════════════════════════════
   MARKET SUMMARY — COMMODITY SEGMENTED BUTTON GROUP
   Mirrors .theme-switcher / .theme-btn pattern
   ═══════════════════════════════════════════════════════════ */
.ma-seg-group {
  display: inline-flex;
  gap: 4px;
  background: var(--bg-input);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border-medium);
  flex-wrap: wrap;
  transition: background var(--transition), border-color var(--transition);
}

.ma-seg-btn {
  padding: 5px 10px;
  border-radius: 5px;
  font-family: var(--font-family);
  font-size: var(--font-base);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.ma-seg-btn:hover {
  color: var(--text-primary);
}

.ma-seg-btn--active {
  background: var(--accent);
  color: var(--bg-card);
  font-weight: 500;
  box-shadow: 0 2px 8px var(--accent-glow);
}

/* ═══════════════════════════════════════════════════════════
   MARKET SUMMARY — YEAR & MONTH TABS
   ═══════════════════════════════════════════════════════════ */

/* Unchecked year tab — same color as month tabs, no opacity dimming */
.ma-yr-tab.ma-tab--unchecked {
  background: var(--bg-input);
  color: var(--text-muted);
  border-color: var(--border-medium);
  cursor: default;
}

/* ═══════════════════════════════════════════════════════════
   ZEN MODE SPECIAL EFFECTS
   ═══════════════════════════════════════════════════════════ */
[data-theme="zen"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(201,168,76,0.04), transparent);
  z-index: 0;
}

[data-theme="zen"] .news-headline {
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════
   MARKET ANNOTATIONS MODULE
   ═══════════════════════════════════════════════════════════ */
#ma-root { display:flex; flex-direction:column; height:calc(100vh - var(--nav-offset,50px) - 12px); height:calc(100svh - var(--nav-offset,50px) - 12px); padding:10px 18px 0; overflow:hidden; }
#ma-body { display:flex; gap:12px; flex:1; min-height:0; overflow:hidden; }

.ma-controls { display:flex; align-items:center; justify-content:space-between; padding:6px 0 8px; flex-shrink:0; gap:12px; flex-wrap:wrap; }
.ma-controls-left { display:flex; align-items:center; gap:10px; }
.ma-controls-right { display:flex; align-items:center; gap:14px; }
.ma-label { font-family:var(--font-family); font-size:var(--font-xs); font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--text-muted); }
.ma-period { font-family:var(--font-family); font-size:var(--font-md); font-weight:500; color:var(--text-primary); font-variant-numeric:tabular-nums; }

/* ── Chart zone layout ── */
#ma-chart-zone { display:flex; gap:0; width:55vw; flex-shrink:0; height:100%; }

/* Year panel: checkboxes + tabs */
#ma-year-panel { display:flex; flex-direction:column; gap:2px; padding:26px 0 4px; flex-shrink:0; overflow-y:auto; scrollbar-width:none; }
#ma-year-panel::-webkit-scrollbar { display:none; }

.ma-yr-row { display:flex; align-items:center; gap:0; }

/* Year checkbox */
.ma-yr-cb { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; margin:0 3px 0 0; }

/* Year tab */
.ma-yr-tab { font-family:var(--font-family); font-size:11px; font-weight:600; padding:5px 6px; text-align:center; border-radius:6px 0 0 6px; border:2px solid var(--border-medium); border-right:none; background:var(--bg-input); color:var(--text-muted); cursor:pointer; transition:all .15s; user-select:none; white-space:nowrap; min-width:38px; }
.ma-yr-tab:hover { color:var(--text-primary); background:var(--bg-elevated); }

/* Checked year: colored background */
.ma-yr-tab.ma-tab--checked { color:var(--bg-card); font-weight:700; border-color:transparent; }

/* Unchecked year: grayed out */
.ma-yr-tab.ma-tab--unchecked { opacity:1; background:var(--bg-input); color:var(--text-muted); border-color:var(--border-medium); cursor:default; }

/* Focused tab (year or month): RED border */
.ma-yr-tab.ma-tab--focus { border:2px solid #ef4444 !important; border-right:none !important; }
.ma-mo-tab.ma-tab--focus { border:2px solid #ef4444 !important; border-bottom:none !important; }

/* Chart column */
#ma-chart-col { display:flex; flex-direction:column; flex:1; min-width:0; min-height:0; }

/* Month tabs — aligned to chart plot area */
#ma-month-tabs { display:flex; gap:2px; flex-shrink:0; overflow-x:auto; scrollbar-width:none; margin-left:52px; margin-right:12px; }
#ma-month-tabs::-webkit-scrollbar { display:none; }

.ma-mo-tab { font-family:var(--font-family); font-size:10px; font-weight:600; padding:4px 0; text-align:center; flex:1; min-width:28px; border-radius:6px 6px 0 0; border:2px solid var(--border-medium); border-bottom:none; background:var(--bg-input); color:var(--text-muted); cursor:pointer; transition:all .15s; user-select:none; text-transform:uppercase; letter-spacing:.04em; }
.ma-mo-tab:hover { color:var(--text-primary); background:var(--bg-elevated); }
.ma-mo-tab.ma-tab--on { background:var(--accent-dim); color:var(--text-accent); font-weight:700; }

/* Chart */
#ma-chart-wrap { position:relative; flex:1; min-height:200px; border-radius:0 10px 10px 0; overflow:hidden; border:1px solid var(--border-medium); border-left:none; background:var(--bg-elevated); touch-action:none; }
[data-theme="light"] #ma-chart-wrap { border-width:1.5px; border-left:none; }
#ma-chart { width:100%; height:100%; }

/* Feed */
#ma-feed-wrap { flex:1; display:flex; flex-direction:column; min-height:0; min-width:0; overflow:hidden; }
.ma-feed-hdr { display:flex; align-items:baseline; gap:10px; padding-bottom:6px; flex-shrink:0; border-bottom:1px solid var(--border-light); margin-bottom:2px; }
.ma-feed-title { font-family:var(--font-family); font-size:var(--font-base); font-weight:var(--title-font-weight); color:var(--text-accent); margin:0; }
.ma-feed-count { font-family:var(--font-family); font-size:var(--font-xs); color:var(--text-muted); }
#ma-feed-filter { font-family:var(--font-family); font-size:10px; color:var(--text-muted); font-style:italic; padding:2px 0 4px; flex-shrink:0; min-height:16px; }
.ma-feed { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:3px; padding:2px 0 12px; scrollbar-width:thin; scrollbar-color:var(--scrollbar) transparent; }
.ma-feed::-webkit-scrollbar { width:6px; }
.ma-feed::-webkit-scrollbar-track { background:transparent; }
.ma-feed::-webkit-scrollbar-thumb { background:var(--scrollbar); border-radius:3px; }

/* Card */
.ma-card { display:grid; grid-template-columns:54px 1fr; gap:0 10px; padding:8px 12px; border-radius:8px; border:1px solid transparent; background:transparent; cursor:pointer; transition:background .15s,border-color .15s,transform .12s; }
.ma-card:hover,.ma-card.ma-card--hl { background:var(--accent-dim); border-color:var(--border-medium); transform:translateX(2px); }
.ma-card-date { grid-row:1/3; display:flex; flex-direction:column; align-items:center; justify-content:center; padding-right:8px; border-right:2px solid var(--border-light); }
.ma-card-mo { font-family:var(--font-family); font-size:9px; text-transform:uppercase; letter-spacing:.8px; color:var(--text-muted); font-weight:600; }
.ma-card-dy { font-family:var(--font-family); font-size:18px; font-weight:700; color:var(--text-primary); line-height:1.15; }
.ma-card-yr { font-family:var(--font-family); font-size:9px; color:var(--text-muted); }
.ma-card-tags { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:1px; }
.ma-card-tag { display:inline-block; font-family:var(--font-family); font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; padding:1px 6px; border-radius:3px; }
.ma-card-tag--commodity { background:var(--accent-dim); color:var(--text-accent); }
.ma-card-tag--event { background:var(--bg-input); color:var(--text-secondary); border:1px solid var(--border-medium); }
.ma-card-ttl { font-family:var(--font-family); font-size:var(--font-base); font-weight:600; color:var(--text-primary); line-height:1.35; margin:0 0 2px; }
.ma-card-sum { grid-column:2; font-family:var(--font-family); font-size:var(--font-xs); color:var(--text-secondary); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;-webkit-box-orient:vertical; overflow:hidden; }

/* Search box */
.ma-search-wrap { position:relative; display:flex; align-items:center; }
.ma-search-icon { position:absolute; left:7px; font-size:15px; color:var(--text-muted); pointer-events:none; line-height:1; }
.ma-search-input { font-family:var(--font-family); font-size:var(--font-base); color:var(--text-primary); background:var(--bg-input); border:1px solid var(--border-medium); border-radius:6px; padding:4px 8px 4px 24px; width:160px; outline:none; transition:border-color .15s, width .2s; }
.ma-search-input::placeholder { color:var(--text-muted); }
.ma-search-input:focus { border-color:var(--accent); width:220px; }
.ma-search-input::-webkit-search-cancel-button { cursor:pointer; }

/* Add note button */
.ma-add-btn { font-family:var(--font-family); font-size:var(--font-xs); font-weight:600; padding:4px 10px; border-radius:6px; border:1px solid var(--border-medium); background:var(--bg-input); color:var(--text-primary); cursor:pointer; transition:all .15s; }
.ma-add-btn:hover { background:var(--accent-dim); border-color:var(--accent); color:var(--text-accent); }

/* User note card */
.ma-card { position:relative; }
.ma-card--user { border-color:rgba(56,189,248,0.2); }
.ma-card--user .ma-card-date { border-right-color:rgba(56,189,248,0.25); }
.ma-card-tag--mine { background:rgba(56,189,248,0.12); color:#38bdf8; }
.ma-card-del { position:absolute; top:6px; right:8px; background:none; border:none; color:var(--text-muted); font-size:11px; cursor:pointer; padding:2px 5px; border-radius:3px; line-height:1; }
.ma-card-del:hover { color:#ef4444; background:rgba(239,68,68,0.12); }

/* Add Note Modal */
.ma-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:9999; display:flex; align-items:center; justify-content:center; }
.ma-modal { background:var(--bg-card); border:1px solid var(--border-strong); border-radius:12px; width:380px; max-width:90vw; box-shadow:var(--card-shadow); }
.ma-modal-hdr { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; border-bottom:1px solid var(--border-light); }
.ma-modal-title { font-family:var(--font-family); font-size:var(--font-md); font-weight:700; color:var(--text-primary); }
.ma-modal-close { background:none; border:none; color:var(--text-muted); font-size:14px; cursor:pointer; padding:2px 6px; border-radius:4px; }
.ma-modal-close:hover { color:var(--text-primary); background:var(--bg-input); }
.ma-modal-form { padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; }
.ma-modal-label { font-family:var(--font-family); font-size:var(--font-xs); font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; display:flex; flex-direction:column; gap:4px; }
.ma-modal-input { font-family:var(--font-family); font-size:var(--font-base); color:var(--text-primary); background:var(--bg-input); border:1px solid var(--border-medium); border-radius:6px; padding:6px 9px; outline:none; }
.ma-modal-input:focus { border-color:var(--accent); }
.ma-modal-ta { resize:vertical; min-height:64px; }
.ma-modal-footer { display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }
.ma-modal-cancel { font-family:var(--font-family); font-size:var(--font-base); padding:6px 14px; border-radius:6px; border:1px solid var(--border-medium); background:transparent; color:var(--text-secondary); cursor:pointer; }
.ma-modal-cancel:hover { background:var(--bg-input); }
.ma-modal-submit { font-family:var(--font-family); font-size:var(--font-base); font-weight:600; padding:6px 14px; border-radius:6px; border:none; background:var(--accent); color:var(--bg-card); cursor:pointer; }
.ma-modal-submit:hover { opacity:.88; }

@media(max-width:900px){
  #ma-body{flex-direction:column}
  #ma-chart-zone{width:100%;height:50vh;min-height:260px}
  #ma-root{padding:6px 8px 0}
  .ma-controls{flex-direction:column;align-items:flex-start;gap:4px}
  #ma-month-tabs{margin-left:40px;margin-right:8px}
  .ma-card{grid-template-columns:1fr}
  .ma-card-date{grid-row:auto;flex-direction:row;gap:6px;border-right:none;border-bottom:1px solid var(--border-light);padding:0 0 4px;margin-bottom:3px}
}

/* ═══════════════════════════════════════════════════════════
   PLOTLY CHART THEMING HELPER
   Put this JS after Plotly renders your chart
   ═══════════════════════════════════════════════════════════ */

/* Example usage in your HTML:
<script>
function getThemeColors() {
  const style = getComputedStyle(document.documentElement);
  return {
    paper_bgcolor: style.getPropertyValue('--bg-elevated').trim(),
    plot_bgcolor: style.getPropertyValue('--bg-elevated').trim(),
    font_color: style.getPropertyValue('--text-primary').trim(),
    grid_color: style.getPropertyValue('--chart-grid').trim(),
  };
}

function applyThemeToPlotly(chartDivId) {
  const colors = getThemeColors();
  Plotly.relayout(chartDivId, {
    'paper_bgcolor': colors.paper_bgcolor,
    'plot_bgcolor': colors.plot_bgcolor,
    'font.color': colors.font_color,
    'xaxis.gridcolor': colors.grid_color,
    'yaxis.gridcolor': colors.grid_color,
  });
}

// Call this when theme changes
function setTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.setItem('theme', theme);
  
  // Update active button
  document.querySelectorAll('.theme-btn').forEach(btn => btn.classList.remove('active'));
  document.querySelector(`[data-theme-btn="${theme}"]`).classList.add('active');
  
  // Update all Plotly charts
  applyThemeToPlotly('your-chart-div-id');
}

// Restore saved theme on load
const savedTheme = localStorage.getItem('theme') || 'dark';
setTheme(savedTheme);
</script>
*/

/* ═══════════════════════════════════════════════════════════
   LANDING PAGE  (#lp-shell and related)
   ═══════════════════════════════════════════════════════════ */

#lp-shell {
  display: none;
  flex-direction: column;
  min-height: 100vh;
  background: #ffffff;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: #0f1621;
  -webkit-font-smoothing: antialiased;
}
#lp-shell.lp-visible { display: flex; }

/* ── top bar ── */
#lp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 48px;
  border-bottom: 1px solid #e2e5ec;
  flex-shrink: 0;
  position: relative;
}
.lp-wordmark { font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; color: #6c747f; }
.lp-wordmark b { color: #16803c; font-weight: 400; }
.lp-topbar-mid {
  display: flex; align-items: center; gap: 28px;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.lp-com { font-size: 15px; letter-spacing: 0.13em; text-transform: uppercase; color: #9aa5b4; transition: color 0.15s; }
.lp-com:hover { color: #4a5568; }
.lp-topbar-right { display: flex; align-items: center; gap: 16px; }
.lp-tag { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #9aa5b4; }
.lp-signin-btn {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; background: none; border: 1px solid #c8cdd8;
  color: #4a5568; padding: 7px 18px; cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.lp-signin-btn:hover { border-color: #0f1621; color: #0f1621; }

/* ── main two-col layout ── */
#lp-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  padding: 64px 48px 48px;
  gap: 0;
  align-items: start;
  min-height: 0;
}
.lp-divider {
  background: #e2e5ec;
  margin: 0 52px;
  align-self: stretch;
}

/* ── LEFT: word art ── */
.lp-left {
  padding-right: 24px;
  opacity: 0;
  animation: lpFadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.05s forwards;
}
.lp-eyebrow {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #16803c; margin-bottom: 28px;
  display: flex; align-items: center; gap: 10px;
}
.lp-eyebrow::before {
  content: ''; display: inline-block; width: 20px; height: 1px; background: #16803c;
}
.lp-pre-line {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9aa5b4;
  margin-bottom: 4px;
  display: block;
}
.lp-faster {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(2.4rem, 5.5vw, 4.8rem);
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #0f1621;
  line-height: 1;
  display: block;
  margin: 6px 0 20px;
}
.lp-serif-line {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #16803c;
  display: block;
}
.lp-body {
  font-size: 13px; color: #9aa5b4; line-height: 1.8;
  max-width: 100%; margin: 28px 0 36px;
}
.lp-body strong { color: #4a5568; font-weight: 400; }
.lp-cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.lp-cta-primary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; background: #0f1621; color: #ffffff;
  border: none; padding: 12px 22px; cursor: pointer; transition: opacity 0.15s;
}
.lp-cta-primary:hover { opacity: 0.82; }
.lp-cta-secondary {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #9aa5b4; background: none; border: none;
  border-bottom: 1px solid #c8cdd8; padding-bottom: 2px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.lp-cta-secondary:hover { color: #0f1621; border-color: #0f1621; }

/* ── RIGHT: selling points ── */
.lp-right { padding-left: 24px; }
.lp-points-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.lp-point {
  padding: 20px 20px 20px 0;
  opacity: 0;
  transform: translateY(8px);
  animation: lpFadeUp 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
}
.lp-point:nth-child(even) { padding-left: 20px; }
.lp-point:nth-child(5) { grid-column: 1 / -1; padding-right: 0; }
.lp-point:nth-child(1) { animation-delay: 0.2s; }
.lp-point:nth-child(2) { animation-delay: 0.3s; }
.lp-point:nth-child(3) { animation-delay: 0.4s; }
.lp-point:nth-child(4) { animation-delay: 0.5s; }
.lp-point:nth-child(5) { animation-delay: 0.6s; }

/* Match menu ribbon label sizing (--font-base / --font-xs) */
.lp-pt-num  { font-size: var(--font-base); color: #9aa5b4; letter-spacing: 0.06em; display: block; margin-bottom: 8px; }
.lp-pt-body h3 {
  font-family: 'IBM Plex Mono', monospace; font-size: var(--font-base); font-weight: 400;
  color: #0f1621; letter-spacing: 0.03em; margin-bottom: 5px; line-height: 1.4;
}
.lp-pt-body p { font-size: var(--font-xs); color: #9aa5b4; line-height: 1.7; }

/* ── animations ── */
@keyframes lpFadeUp { to { opacity: 1; transform: translateY(0); } }

/* ── sign-in modal ── */
#lp-auth-modal {
  display: none; position: fixed; inset: 0;
  background: rgba(15,22,33,0.4); z-index: 9000;
  align-items: center; justify-content: center;
}
#lp-auth-modal.lp-modal-open { display: flex; }
.lp-modal-card {
  background: #ffffff; border: 1px solid #c8cdd8;
  padding: 36px 32px 28px; width: 340px; position: relative;
}
.lp-modal-title {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #9aa5b4; margin-bottom: 24px;
}
.lp-modal-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; font-size: 18px; color: #9aa5b4; cursor: pointer; line-height: 1;
}
.lp-modal-close:hover { color: #0f1621; }
.lp-field {
  width: 100%; padding: 9px 10px; margin-bottom: 8px;
  border: 1px solid #c8cdd8; background: #fafafa; color: #0f1621;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; outline: none; transition: border-color 0.15s;
}
.lp-field:focus { border-color: #0f1621; }
.lp-field::placeholder { color: #9aa5b4; }
#lp-auth-error { color: #b91c1c; font-size: 11px; min-height: 16px; margin-bottom: 8px; }
.lp-submit {
  width: 100%; padding: 10px; background: #0f1621; color: #ffffff; border: none;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; cursor: pointer; margin-bottom: 12px; transition: opacity 0.15s;
}
.lp-submit:hover { opacity: 0.82; }
.lp-modal-foot { font-size: 11px; color: #9aa5b4; text-align: center; }
.lp-modal-foot a { color: #16803c; text-decoration: none; cursor: pointer; }
#lp-reset-msg { font-size: 11px; min-height: 16px; margin-bottom: 8px; }

/* ── responsive ── */
@media (max-width: 900px) {
  #lp-topbar { padding: 16px 24px; }
  .lp-topbar-mid { display: none; }
  #lp-main { grid-template-columns: 1fr; padding: 40px 24px 32px; }
  .lp-divider { display: none; }
  .lp-left { padding-right: 0; margin-bottom: 48px; }
  .lp-right { padding-left: 0; }
}

/* ── hide app chrome when landing shown ── */
body.lp-mode .navbar,
body.lp-mode .top-ribbon { display: none !important; }
body.lp-mode { padding-top: 0; margin: 0; }

/* ═══════════════════════════════════════════════════════════
   STORIES OF THE WEEK — match right-side news list font sizes
   nf-card-title: 13px / 500  |  nf-card-meta: 11px
   ═══════════════════════════════════════════════════════════ */

/* Theme card title → matches nf-card-title */
.nf-theme-title {
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Story summary block → matches nf-card-meta size, slightly more readable */
.nf-stories-summary {
  font-size: 13px !important;
}

/* ═══════════════════════════════════════════════════════════
   EXECUTIVE BRIEF  (#executive section)
   All rules scoped under #executive to avoid conflicts
   ═══════════════════════════════════════════════════════════ */

#executive {
  display: none;
  width: 100%;
  height: calc(100vh - var(--navbar-height, 50px));
  height: calc(100svh - var(--navbar-height, 50px));  /* svh = small viewport: always fits even with Safari chrome visible */
  background: var(--bg-page);
  /* Was overflow:hidden — the Cross-Market card's 280px minimum (below) can now need more
     vertical room than a short viewport's fixed #executive height provides. Rather than clip
     content or force every card taller than necessary, the page itself scrolls vertically when
     content exceeds the viewport; horizontal overflow stays clipped (the horizontal scroll-snap
     track already owns its own horizontal scrolling). */
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* legacy Edge/IE */
  --eb-surface:           var(--bg-elevated, #fff);
  --eb-surface-2:         var(--bg-surface, #fafafa);
  --eb-border:            var(--border-light, #e2e5ec);
  --eb-border-2:          var(--border-medium, #c8cdd8);
  --eb-text:              var(--text-primary, #0f1621);
  --eb-text-2:            var(--text-secondary, #4a5568);
  --eb-text-3:            var(--text-muted, #9aa5b4);
  --eb-green:             var(--accent, #16803c);
  --eb-green-dim:         var(--accent-dim, rgba(22,128,60,0.08));
  --eb-red:               #c0392b;
  --eb-red-dim:           rgba(192,57,43,0.08);
  --eb-amber:             #b45309;
  --eb-amber-dim:         rgba(180,83,9,0.08);
  --eb-orange-dim:        rgba(234,88,12,0.12);
  --eb-radius:            8px;
  --eb-radius-lg:         12px;
  --eb-shadow:            var(--card-shadow, 0 1px 3px rgba(15,22,33,0.07));
  --eb-card-bg:           var(--eb-surface);
  --eb-panel-bg:          var(--eb-surface);
  --eb-control-bg:        transparent;
  --eb-control-active-bg: var(--eb-border);

  /* Carousel geometry — single source of truth, page-scoped (not :root).
     Uses cqw (container query width — 1% of #eb-charts's own content box,
     via its container-type:inline-size below), not vw: vw is relative to
     the whole browser viewport, so it doesn't account for anything else on
     the page consuming horizontal space (scrollbar, ancestor padding,
     etc.), which threw the left/right edges out of sync in practice. cqw
     is measured against the real container instead.
     A normal card's width is intrinsic to its own position among normal
     cards (1st, 3rd, 5th... = odd width; 2nd, 4th, 6th... = even width) —
     fixed to the card itself, not to whichever visual side it currently
     lands on. Flexbox lays visible (non-hidden) cards out in DOM order,
     so no explicit left/right track assignment is needed. Fixed 5-way
     split of 100cqw: 0 left edge, odd card (100cqw - even - gap), 3px
     center gap, 55 even card, 0 right edge. */
  --eb-carousel-edge:       0cqw;
  --eb-carousel-gap:        3px;
  --eb-carousel-even-width: 55cqw;
  --eb-carousel-odd-width:  calc(100cqw - var(--eb-carousel-even-width) - var(--eb-carousel-gap));
  --eb-carousel-full-width: calc(100cqw - (var(--eb-carousel-edge) * 2));
}
#executive.exec-visible { display: flex; flex-direction: column; }
#executive::-webkit-scrollbar { width: 0; height: 0; display: none; }   /* Chrome/Edge/Safari */

/* Light-mode overrides for Executive Brief tokens */
[data-theme="light"] #executive {
  --eb-card-bg:           #ffffff;
  --eb-panel-bg:          #ffffff;
  --eb-border:            #d8dde7;
  --eb-border-2:          #c7ceda;
  --eb-text:              #0f172a;
  --eb-text-2:            #64748b;
  --eb-control-bg:        #ffffff;
  --eb-control-active-bg: #eef2f7;
}

/* ── Page layout ── */
#eb-page {
  display: flex;
  flex-direction: column;
  /* Was height:100% + overflow:hidden — with #executive now the scrolling ancestor (above),
     this must be allowed to grow past 100% of #executive's fixed viewport-derived height (via
     min-height:100% + height:auto) rather than clip its own content at exactly that height, and
     must not itself add a second, redundant overflow:hidden that would re-clip what #executive
     is now meant to scroll. */
  height: auto;
  min-height: 100%;
  padding: 10px 12px;
  gap: 0;
  overflow: visible;
  box-sizing: border-box;
}

/* ── Status bar ── */
#eb-status {
  display: grid;
  grid-template-columns: 1fr 18vw;
  gap: 3px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

/* Left cell of #eb-status — price+chart card and prod cards side by side */
#eb-status-left {
  display: flex;
  flex-direction: row;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}

/* Shared card base — uses --eb-card-bg so light/dark tokens apply uniformly */
.eb-cal-card, .eb-price-chart-card, .eb-prod-card, .eb-commodity-selector,
.eb-chart-card, .eb-data-table-card, #eb-stories {
  background: var(--eb-card-bg, var(--eb-surface));
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius-lg);
  box-shadow: var(--eb-shadow);
}
/* No internal card padding — spacing is owned by header/filter/frame children */
.eb-chart-card,
.eb-card-shell {
  padding: 0 !important;
}

/* .eb-price-card removed — merged into .eb-price-chart-card */
.eb-bias-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 9px; border-radius: 4px; width: fit-content; margin-top: 3px;
}
.eb-bearish { background: var(--eb-red-dim); color: var(--eb-red); }
.eb-bullish  { background: var(--eb-green-dim); color: var(--eb-green); }
.eb-neutral  { background: var(--eb-amber-dim); color: var(--eb-amber); }

/* Status mid — wasde top strip fills remaining flex space */
.eb-status-mid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}

/* Seasonal calendar */
.eb-cal-card { padding: 10px 12px; }

/* ── Combined futures price + chart card ── */
.eb-price-chart-card {
  display: flex;
  flex-direction: row;
  padding: 8px 10px;
  gap: 10px;
  overflow: hidden;
  flex: 0 0 28vw;              /* matches .eb-snap-card = S&D table card width */
  min-width: 0;
}

/* LEFT: price snapshot column — fixed width matching original price card */
.price-snapshot {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 2px;
  gap: 1px;
  flex: 0 0 130px;
  width: 130px;
}
.price-snapshot-change {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}
.eb-price-big {
  font-family: var(--font-family);
  font-size: 24px;
  font-weight: 600;
  color: var(--eb-text);
  letter-spacing: -0.02em;
  line-height: 1;
}
.eb-price-delta {
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-family);
}
.eb-price-pct {
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-family);
  opacity: 0.85;
}
.eb-price-label { font-size: 11px; color: var(--eb-text-3); margin-top: 6px; }
.eb-price-stamp-label { font-size: 12px; font-weight: 500; color: var(--eb-text-3); letter-spacing: 0.03em; font-family: var(--font-family); text-transform: uppercase; margin-top: 6px; }
.eb-price-stamp { font-size: 12px; font-weight: 500; color: var(--eb-text-3); letter-spacing: 0.02em; font-family: var(--font-family); }
.eb-price-stamp + .eb-price-stamp { opacity: 0.7; letter-spacing: 0; text-transform: none; margin-top: 1px; }

/* RIGHT: chart fills top, tabs pinned to bottom-right */
.price-chart-right {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

/* Range tabs — sit below chart, aligned right */
.price-range-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.price-range-btn {
  font-size: 8px;
  font-weight: 600;
  padding: 1px 5px;
  border: 1px solid var(--eb-border);
  border-radius: 3px;
  background: none;
  color: var(--eb-text-3);
  cursor: pointer;
  font-family: var(--font-family);
  letter-spacing: 0.03em;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.price-range-btn:hover { color: var(--eb-text-2); border-color: var(--eb-text-3); }
.price-range-btn.active {
  color: var(--eb-text);
  background: var(--eb-border);
  border-color: transparent;
}
/* ══════════════════════════════════════════════════════════════
   Shared Executive Brief layout primitives
   These classes are used by all EB cards (Cross-Market, ESR,
   Funds, Crop Progress, etc.) for consistent structure.
   ══════════════════════════════════════════════════════════════ */

/* Canonical card shell — all EB chart/data cards inherit from this
   (most already use .eb-chart-card which shares the same bg/border/radius;
    add .eb-card-shell for cards that need explicit flex-column + no-overflow) */
.eb-card-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--eb-card-bg);
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius-lg);
  box-shadow: var(--eb-shadow);
}

/* Canonical filter bar — no second border; spacing only */
.eb-card-filter-bar,
.eb-esr-filter-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 14px !important;
  border-bottom: none !important;
}

/* Canonical inner chart frame — layout only, no inner border */
.eb-card-frame,
#eb-progress-chart-wrap,
#eb-funds-chart-wrap,
#eb-crossmarket-chart-frame,
#eb-quality-plotly,
#eb-condition-plotly,
#eb-drought-plotly,
#eb-esr-weekly-plotly,
#eb-esr-commit-plotly,
#eb-crush-cumulative-plotly,
#eb-crush-monthly-plotly {
  flex: 1 1 auto;
  min-height: 0;
  margin: 10px 14px 12px;
  overflow: hidden;
  background: transparent;
  box-sizing: border-box;
}
/* EB: remove inner plot-area borders — outer card border and title underline are kept */
#executive .eb-card-frame,
#executive #eb-progress-chart-wrap,
#executive #eb-funds-chart-wrap,
#executive #eb-crossmarket-chart-frame,
#executive #eb-quality-plotly,
#executive #eb-condition-plotly,
#executive #eb-drought-plotly,
#executive #eb-esr-weekly-plotly,
#executive #eb-esr-commit-plotly,
#executive #eb-crush-cumulative-plotly,
#executive #eb-crush-monthly-plotly {
  border: none !important;
  box-shadow: none !important;
}
/* The shared .chart class gets a light-mode border (analytics tab use).
   Strip it inside EB cards so chart areas inherit no inner border. */
#executive .chart {
  border: none !important;
  box-shadow: none !important;
}
.eb-card-frame > div {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#eb-crossmarket-chart-frame {
  flex: 1 1 auto;
  /* Was min-height:0 (the flexbox "allow full shrink" default), which let this card's plot
     collapse to as little as ~196px on some viewports — well under the ~290-310px it needs to
     read ~24 horizontal bars without cramming rows to a few px each. Cross-Market-only (this is a
     unique ID, not a shared class like .eb-card-frame — no other EB chart is affected).
     tickfont/textfont sizes, bar count, and Plotly config are unchanged; this is purely container
     geometry. */
  min-height: 280px;
  width: auto;
  height: auto;
  overflow: hidden;
  position: relative;
}

#eb-crossmarket-chart-wrap {
  width: 100%;
  height: 100%;
  min-height: 280px;   /* propagates the frame's minimum through the wrap so it isn't re-collapsed */
  overflow: hidden;
}

#eb-cm-plotly {
  width: 100%;
  height: 100%;
  min-height: 280px;
}


/* ── Shared EB filter control (pill, button, dropdown trigger) ── */
.eb-filter-btn,
.eb-sel-btn,
.eb-card-filter-bar button,
.eb-esr-filter-bar button,
.eb-cm-pill,
.eb-cm-sort-pill,
#eb-cm-group-btn {
  height: 24px;
  padding: 0 11px;
  border: 1px solid var(--eb-border-2);
  border-radius: 6px;
  background: var(--eb-control-bg);
  color: var(--eb-text-2);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-family, sans-serif);
  letter-spacing: 0.02em;
  line-height: 22px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.eb-filter-btn:hover,
.eb-sel-btn:hover,
.eb-card-filter-bar button:hover,
.eb-esr-filter-bar button:hover,
.eb-cm-pill:hover,
.eb-cm-sort-pill:hover,
#eb-cm-group-btn:hover {
  color: var(--eb-text);
  background: var(--eb-control-active-bg);
}
.eb-filter-btn.active,
.eb-sel-btn.active,
.eb-card-filter-bar button.active,
.eb-esr-filter-bar button.active,
.eb-cm-pill.active,
.eb-cm-sort-pill.active {
  color: var(--eb-text);
  background: var(--eb-control-active-bg);
  border-color: var(--eb-border-2);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* ── Cross-Market Rank/Group segmented toggle ── */
/* Scoped to #eb-cm-sort-pills.eb-cm-sort-toggle only — does not affect range
   pills, other Executive Brief buttons, or Analytics filters. Overrides the
   shared .eb-cm-sort-pill rule above (border/radius/background/height),
   hence the !important on border/radius there being countered here. */
#eb-cm-sort-pills.eb-cm-sort-toggle {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  height: 24px;
  border: 1px solid var(--eb-border-2);
  border-radius: 6px;
  overflow: hidden;
  background: var(--eb-control-bg);
  box-sizing: border-box;
}
#eb-cm-sort-pills.eb-cm-sort-toggle .eb-cm-sort-pill {
  height: 22px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none;
  margin: 0;
  color: var(--eb-text-2);
  font-family: var(--font-family, sans-serif);
}
#eb-cm-sort-pills.eb-cm-sort-toggle .eb-cm-sort-pill + .eb-cm-sort-pill {
  border-left: 1px solid var(--eb-border-2) !important;
}
#eb-cm-sort-pills.eb-cm-sort-toggle .eb-cm-sort-pill:hover {
  color: var(--eb-text);
  background: var(--eb-control-active-bg);
}
#eb-cm-sort-pills.eb-cm-sort-toggle .eb-cm-sort-pill.active {
  color: var(--eb-text);
  background: var(--eb-control-active-bg);
}

/* ── Shared EB dropdown panel ── */
.eb-cm-group-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 120;
  min-width: 200px;
  max-height: min(420px, calc(100vh - 180px));
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  background: var(--eb-panel-bg);
  border: 1px solid var(--eb-border);
  border-radius: 8px;
  padding: 6px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
}
/* Dropdown header label */
.eb-cm-group-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--eb-text);
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--eb-border);
}
/* Group headings inside dropdown (GRAINS, SOFTS, etc.) */
.eb-cm-group-heading {
  padding: 6px 12px 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--eb-text-3);
  font-family: var(--font-family);
}
.eb-cm-group-action {
  padding: 5px 12px;
  font-size: 10px;
  color: var(--eb-text-2);
  cursor: pointer;
  font-family: var(--font-family);
  letter-spacing: 0.02em;
}
.eb-cm-group-action:hover { color: var(--eb-text); background: var(--eb-border); }
.eb-cm-group-hr {
  margin: 4px 0;
  border: none;
  border-top: 1px solid var(--eb-border);
}
.eb-cm-group-check {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 10px;
  color: var(--eb-text-2);
  cursor: pointer;
  font-family: var(--font-family);
  user-select: none;
}
.eb-cm-group-check:hover { color: var(--eb-text); background: var(--eb-border); }
.eb-cm-group-check input[type="checkbox"] {
  width: 11px;
  height: 11px;
  accent-color: var(--accent, #4caf76);
  cursor: pointer;
}

/* ── Cross-Market card — uses canonical classes above ── */
#eb-crossmarket-card {
  padding: 0 !important;
  /* Stays overflow:hidden (via .eb-card-shell) — no internal card scrollbar. The lower row
     (#eb-body/#eb-charts/#eb-card-track) is now given enough min-height for the 280px Cross-
     Market plot to fit without needing this card to scroll on its own; if the viewport itself is
     shorter than that, #executive scrolls the whole Executive Brief instead (see #executive). */
}
.price-chart-svg-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  /* Default (dark theme) SVG color vars */
  --chart-tick-color:     rgba(255,255,255,0.45);
  --chart-grid-color:     rgba(255,255,255,0.06);
  --chart-baseline-color: rgba(255,255,255,0.08);
  --chart-prevline-color: rgba(255,255,255,0.30);
}
/* Light mode overrides — dark-on-light values */
[data-theme="light"] .price-chart-svg-wrap {
  --chart-tick-color:     rgba(30,30,30,0.55);
  --chart-grid-color:     rgba(30,30,30,0.10);
  --chart-baseline-color: rgba(30,30,30,0.15);
  --chart-prevline-color: rgba(30,30,30,0.40);
}
.price-chart-svg-wrap svg { display: block; width: 100%; height: 100%; }
.price-chart-empty {
  font-size: 10px;
  color: var(--eb-text-3);
  padding: 8px 0;
  align-self: center;
}
.eb-section-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--eb-green); margin-bottom: 5px;
}
.eb-cal-header { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-bottom: 7px; }
.eb-cal-legend { display: flex; flex-wrap: wrap; gap: 8px 8px; }
.eb-cal-leg {
  font-size: 10px; padding: 0 6px; border-radius: 2px; font-weight: 600;
  height: 13px; display: flex; align-items: center;
}
.eb-leg-plant { background: #4ade80; color: #14532d; }
.eb-leg-poll  { background: #f472b6; color: #831843; }
.eb-leg-harv  { background: #fbbf24; color: #78350f; }
.eb-cal-rows { display: flex; flex-direction: column; gap: 3px; }
.eb-cal-row { display: flex; align-items: center; gap: 6px; }
.eb-cal-crop { font-size: 9.5px; color: var(--eb-text-2); width: 62px; flex-shrink: 0; }
.eb-cal-months { display: flex; gap: 1px; flex: 1; }
.eb-cal-m {
  flex: 1; height: 13px; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
  background: var(--eb-border); color: var(--eb-text-3);
}
.eb-cal-plant { background: #4ade80; color: #14532d; }
.eb-cal-poll  { background: #f472b6; color: #831843; }
.eb-cal-harv  { background: #fbbf24; color: #78350f; }

/* ── Crop Calendar snap card (half-month Gantt) ─────────────────────────────
   Palette unchanged: .eb-cal-plant / .eb-cal-poll / .eb-cal-harv above.
   Silk, Bloom and Heading all reuse the pollination colour.            */
.eb-calendar-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;

  /* Scaling knobs — page-specific to this card, not shared elsewhere, so
     scoped here rather than :root (STYLING_SOP.md §4). Two font tiers only:
     data text (region/share/stage-bar labels) and chrome text (headers,
     month labels, hemisphere labels, NOW tag, footnote) — chrome is already
     set apart by uppercase/letter-spacing/weight/colour, so size doesn't
     need finer steps than that. Every rule below takes one variable
     directly; no calc() on font sizes. */
  --eb-cal-base:        12px;  /* data text size */
  --eb-cal-small:       10px;  /* chrome text size */
  --eb-cal-row-h:       21px;  /* stage-bar row height */
  --eb-cal-col-region: 108px;  /* region column width */
  --eb-cal-col-prod:    40px;  /* prod-share column width */
  --eb-cal-col-export:  46px;  /* export-share column width */
  --eb-cal-col-gap:      9px;  /* gap between the three fixed columns and the track */
}
.eb-calendar-card-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 4px 20px 14px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--eb-border-2) transparent;
}
.eb-calendar-card-body::-webkit-scrollbar {
  width: 5px;
  height: 0;
}
.eb-calendar-card-body::-webkit-scrollbar-track {
  background: transparent;
}
.eb-calendar-card-body::-webkit-scrollbar-thumb {
  background: var(--eb-border-2);
  border-radius: 999px;
}
.eb-calendar-card-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.eb-calx-row,
.eb-calx-head {
  display: grid;
  grid-template-columns: var(--eb-cal-col-region) var(--eb-cal-col-prod) var(--eb-cal-col-export) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--eb-cal-col-gap);
}

/* Month header sticks to the top of the scrolling body */
.eb-calx-head {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 4px 0 5px;
  margin-bottom: 3px;
  background: var(--eb-card-bg, var(--eb-surface));
  border-bottom: 1px solid var(--eb-border);
}
.eb-calx-head .eb-calx-region,
.eb-calx-head .eb-calx-share {
  font-size: var(--eb-cal-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eb-text-3);
}
.eb-calx-head .eb-calx-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  height: calc(var(--eb-cal-small) + 4px);
  background: none;
}
.eb-calx-mon {
  font-size: var(--eb-cal-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--eb-text-3);
  overflow: hidden;
}

.eb-calx-region {
  font-size: var(--eb-cal-base);
  font-weight: 600;
  color: var(--eb-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eb-calx-share {
  font-size: var(--eb-cal-base);
  color: var(--eb-text-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Export share is a country-level figure repeated across a country's rows —
   dimmed so it doesn't read as a second per-row quantity. An asterisk marks
   the figures that appear on more than one row. */
.eb-calx-share--exp {
  color: var(--eb-text-3);
  opacity: 0.75;
  cursor: help;
}
.eb-calx-star {
  color: var(--eb-amber, var(--eb-text-2));
  font-weight: 700;
  margin-left: 2px;
}

.eb-calx-track { position: relative; min-width: 0; }

/* 24 half-month slots; faint rule every whole month */
.eb-calx-grid {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  align-items: center;
  height: var(--eb-cal-row-h);
  background-image: repeating-linear-gradient(
    90deg,
    var(--eb-border) 0, var(--eb-border) 1px,
    transparent 1px, transparent 8.3333%
  );
}

.eb-calx-seg {
  height: calc(var(--eb-cal-row-h) - 2px);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--eb-cal-base);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
  cursor: default;
}

/* Current half-month marker */
.eb-calx-now {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 0;
  border-left: 1px solid var(--eb-red);
  opacity: 0.85;
  pointer-events: none;
  z-index: 2;
}
.eb-calx-now-tag {
  position: absolute;
  top: -13px;            /* sits above the month row, not over it */
  left: 0;
  transform: translateX(-50%);
  padding: 0 3px;
  font-size: var(--eb-cal-small);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--eb-red);
  background: var(--eb-card-bg, var(--eb-surface));
}

#eb-calendar-filter-row .eb-card-filter-bar {
  padding: 0 0 4px 20px !important;
}
/* Stage legend shares the toggle line, pushed to the right edge */
#eb-calendar-filter-row .eb-cal-legend {
  padding: 0 20px 4px 0;
  gap: 6px;
}

.eb-calx-group {
  display: grid;
  grid-template-columns: var(--eb-cal-col-region) var(--eb-cal-col-prod) var(--eb-cal-col-export) minmax(0, 1fr);
  column-gap: var(--eb-cal-col-gap);
  align-items: end;
  margin: 9px 0 2px;
}
.eb-calx-group:first-child { margin-top: 2px; }
.eb-calx-group-label {
  grid-column: 1 / 4;
  font-size: var(--eb-cal-small);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eb-text-3);
  opacity: 0.85;
  white-space: nowrap;
}
/* The NOW tag rides on this line instead of the month row */
.eb-calx-group .eb-calx-track { height: calc(var(--eb-cal-small) + 2px); }
.eb-calx-group .eb-calx-now { top: 0; bottom: -7px; }
.eb-calx-group .eb-calx-now-tag { top: 0; }

.eb-calx-foot {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--eb-border);
  font-size: var(--eb-cal-small);
  color: var(--eb-text-3);
}
.eb-calx-note {
  flex: 1 0 100%;
  line-height: 1.5;
  opacity: 0.9;
}
.eb-calx-note--dim { opacity: 0.65; }
.eb-calx-empty {
  font-size: var(--eb-cal-base);
  color: var(--eb-text-3);
  padding: 12px 0;
}

@media (max-width: 900px) {
  .eb-calendar-card {
    --eb-cal-base:        10px;
    --eb-cal-small:        8.5px;
    --eb-cal-row-h:       18px;
    --eb-cal-col-region:  84px;
    --eb-cal-col-prod:    34px;
    --eb-cal-col-export:  38px;
    --eb-cal-col-gap:      6px;
  }
  .eb-calendar-card-body { padding: 10px 12px 12px; }
}

/* WASDE top strip — replaces individual prod cards */
#eb-prod-cards {
  display: block;
  min-width: 0;
}

.eb-wasde-top-strip {
  background: var(--eb-card-bg, var(--eb-surface));
  border: 1px solid var(--eb-border);
  border-radius: 14px;
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  box-sizing: border-box;
}

/* Matches .eb-section-label exactly */
.eb-wasde-top-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eb-green);
  margin-bottom: 0;
}

.eb-wasde-top-card-row {
  display: flex;
  flex-direction: row;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.eb-wasde-top-card-row::-webkit-scrollbar { display: none; }

.eb-wasde-mini-card {
  flex: 1 1 0;
  min-width: 90px;
  background: transparent;
  border: 1px solid var(--eb-border);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
}

.eb-wasde-region {
  font-size: 16px;
  font-weight: 800;
  color: var(--eb-text);
  letter-spacing: 0.04em;
  line-height: 1.1;
}

.eb-wasde-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--eb-text);
  line-height: 1.1;
  font-family: var(--font-family);
}
.eb-wasde-unit {
  font-size: 11px;
  font-weight: 400;
  color: var(--eb-text-3);
}

.eb-wasde-share {
  font-size: 10px;
  color: var(--eb-text-3);
  margin-top: 2px;
}

.eb-wasde-yoy {
  font-size: 10px;
  color: var(--eb-text-2);
}

.eb-wasde-pm {
  font-size: 10px;
  color: var(--eb-text-3);
}

.eb-wasde-up { color: var(--eb-green); }
.eb-wasde-dn { color: var(--eb-red); }

/* Legacy prod-card classes kept for .eb-up/.eb-dn/.eb-neu used elsewhere */
.eb-up  { color: var(--eb-green); }
.eb-dn  { color: var(--eb-red); }
.eb-neu { color: var(--eb-text-3); }
.eb-pos { color: var(--eb-green); }
.eb-neg { color: var(--eb-red); }

/* eb-status-mid holds the strip alongside the calendar card */
#eb-prod-cards { display: block; }

@media (max-width: 1100px) {
  .eb-wasde-mini-card { min-width: 80px; }
}
@media (max-width: 860px) {
  .eb-wasde-mini-card { min-width: 70px; }
}
.eb-up  { color: var(--eb-green); }
.eb-dn  { color: var(--eb-red); }
.eb-neu { color: var(--eb-text-3); }
.eb-pos { color: var(--eb-green); }
.eb-neg { color: var(--eb-red); }

/* Commodity selector */
.eb-commodity-selector { padding: 10px 12px; }
.eb-cs-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.eb-cs-pill {
  font-size: 12px; padding: 4px 11px; border-radius: 6px;
  border: 1px solid var(--eb-border-2); background: transparent;
  color: var(--eb-text-2); cursor: pointer;
  transition: all 0.12s; font-family: var(--font-family); font-weight: 500;
}
.eb-cs-pill:hover { border-color: var(--eb-green); color: var(--eb-green); background: var(--eb-green-dim); }
.eb-cs-pill.active { background: var(--eb-green); border-color: var(--eb-green); color: var(--bg-page, #0c0d0f); font-weight: 700; }

/* ── Analytics tab carousel rail ── */
#eb-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-shrink: 0;
  padding: 4px 0;
}
#eb-tab-rail {
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(100% - 80px);
  display: flex;
  align-items: center;
  justify-content: safe center;
  gap: 4px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 2px 0;
}
#eb-tab-rail::-webkit-scrollbar { display: none; }
.eb-tab {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 11px;
  border: 1px solid var(--eb-border-2);
  background: transparent;
  color: var(--eb-text-2);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.12s;
  white-space: nowrap;
  font-family: var(--font-family);
  flex: 0 0 auto;
  line-height: 1.4;
}
.eb-tab:hover { border-color: var(--eb-green); color: var(--eb-green); background: var(--eb-green-dim); }
.eb-tab.active {
  background: var(--eb-green);
  border-color: var(--eb-green);
  color: var(--bg-page, #0c0d0f);
  font-weight: 700;
}
.eb-tab.active .eb-tab-count { background: rgba(0,0,0,0.2); color: inherit; }
.eb-tab-count {
  font-size: 9px; background: var(--eb-border); color: var(--eb-text-3);
  border-radius: 99px; padding: 1px 5px; margin-left: 4px; font-weight: 500;
}

/* ── Main body — takes all remaining height after status + tabs ── */
#eb-body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;   /* single row fills available flex space */
  gap: 0;
  flex: 1 1 0;
  /* Was min-height:0 — the Cross-Market card's 280px minimum (below) needs the whole lower row
     to be at least this tall so it isn't squeezed back down; every card in the row still shares
     this same height via .eb-snap-card's align-self:stretch, so all cards stay equal-height. */
  min-height: 410px;
  overflow: hidden;
}

/* ── Charts area — carousel viewport ── */
#eb-charts {
  display: flex;
  flex-direction: column;
  min-height: 410px;   /* see #eb-body above — same reasoning, propagated down the chain */
  overflow: hidden;
  align-self: stretch;
  position: relative;
  order: 1;
  container-type: inline-size;
  container-name: eb-charts;
}

/* ── Carousel track — base = compact/mobile/tablet, one card at a time ── */
#eb-card-track {
  --eb-carousel-is-compact: 1;
  flex: 1 1 0;
  min-width: 0;
  min-height: 410px;   /* see #eb-body above — same reasoning, propagated down the chain */
  display: flex;
  flex-direction: row;
  gap: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  box-sizing: border-box;
}
#eb-card-track::-webkit-scrollbar { display: none; }

/* Each snap card — compact base: full width, one per view */
#eb-card-track .eb-snap-card {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  align-self: stretch;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Make sure the iframe container fills the full card */
.eb-snap-card--basis > .eb-chart-card,
#eb-basis-wrap {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

/* Make sure both Weather iframe containers fill the full card */
.eb-snap-card--wx-forecast > .eb-chart-card,
#eb-wx-forecast-wrap,
#eb-wx-performance-wrap {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

/* ── Desktop (≥1100px container width) — Flexbox, not Grid: a normal
   card's width is intrinsic to its own position among normal cards (odd =
   44cqw, even = 55cqw, both fixed against #eb-charts's own box), so
   visible cards simply lay out left-to-right in DOM order at their own
   fixed width — no left/right track assignment. Fixed split of 100cqw:
   0 left edge, 44 odd card, 1 center gap, 55 even card, 0 right edge.
   Weather ×2 and Basis Map are individual full-width stops (100cqw,
   edges are 0, no gap). ── */
@container eb-charts (min-width: 1100px) {
  #eb-card-track {
    --eb-carousel-is-compact: 0;
    display: flex;
    flex-direction: row;
    gap: var(--eb-carousel-gap);
    padding: 0 var(--eb-carousel-edge);
    box-sizing: border-box;
    overflow: hidden;
    scroll-snap-type: none;
    scroll-behavior: auto;
  }

  #eb-card-track .eb-snap-card:not(.eb-snap-card--full-width):not(.is-carousel-full):nth-child(odd) {
    flex: 0 0 var(--eb-carousel-odd-width);
    width: var(--eb-carousel-odd-width);
    min-width: 0;
  }
  #eb-card-track .eb-snap-card:not(.eb-snap-card--full-width):not(.is-carousel-full):nth-child(even) {
    flex: 0 0 var(--eb-carousel-even-width);
    width: var(--eb-carousel-even-width);
    min-width: 0;
  }

  /* Structural full-width cards (Weather ×2, Basis), plus the isolated-
     single-normal-card stop fallback the JS stop model already supports
     (dormant in the current card order, kept correct regardless). */
  #eb-card-track .eb-snap-card.is-carousel-full,
  #eb-card-track .eb-snap-card.eb-snap-card--full-width {
    flex: 0 0 var(--eb-carousel-full-width);
    width: var(--eb-carousel-full-width);
    min-width: 0;
  }

  #eb-card-track .eb-snap-card.is-carousel-hidden { display: none; }
}

/* ── Tab rail nav arrows ── */
.eb-nav-arrow {
  font-size: 20px; line-height: 1;
  background: var(--eb-surface, rgba(255,255,255,0.06));
  border: 1px solid var(--eb-border);
  border-radius: 7px;
  cursor: pointer;
  color: var(--eb-text);
  padding: 0 10px;
  transition: all 0.12s;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-family);
  flex: 0 0 auto;
  height: 28px;
  min-width: 32px;
  font-weight: 600;
}
.eb-nav-arrow:hover { color: var(--eb-green); border-color: var(--eb-green); background: var(--eb-green-dim); }
.eb-nav-arrow.disabled { opacity: 0.2; cursor: default; pointer-events: none; }

/* Chart card — fills snap card completely */
.eb-chart-card {
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 5px;
  flex: 1 1 0;
  min-height: 0; overflow: hidden;
  box-sizing: border-box;
}
.eb-card-header { display: flex; align-items: baseline; justify-content: space-between; flex-shrink: 0; }
.eb-card-title  { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--eb-green); }
.eb-card-sub    { font-size: 12px; color: var(--eb-text-3); }

/* Filter bar row that also holds a trailing badge/sub row on the same
   line — e.g. Crop Condition's STATE/YEARS filters with the current/
   prior-year/5yr-avg badges pushed to the right via space-between. */
.eb-card-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-shrink: 0;
}
/* Right-edge inset matching .eb-card-filter-bar's own 14px side padding —
   scoped to these cards only, .eb-card-sub is shared with other cards. */
#eb-condition-subtitle,
#eb-quality-subtitle,
#eb-drought-summary { padding-right: 14px; }

/* Drought Monitor header badge row — same role as .eb-card-sub on Crop
   Condition, but holds multiple badge spans so it owns its own row layout */
.eb-drought-summary { display: flex; flex-wrap: wrap; gap: 4px; }

/* Drought Monitor category pills reuse the shared .eb-card-filter-bar button
   rule (height/padding/border/bg/hover/.active) — only focus styling is new */
.eb-drought-category-pill:focus-visible {
  outline: 2px solid var(--eb-green);
  outline-offset: 2px;
}
.eb-legend      { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
.eb-leg-item    { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--eb-text-2); }
.eb-leg-dot     { width: 8px; height: 3px; border-radius: 1px; flex-shrink: 0; }
.eb-chart-area  {
  flex: 1 1 0; min-height: 0;
  background: var(--eb-surface-2); border: 1px solid var(--eb-border);
  border-radius: 6px; overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.eb-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Data table card */
.eb-data-table-card {
  display: flex; flex-direction: column;
  flex: 1 1 0; min-height: 0; overflow: hidden;
}
.eb-table-scroll { flex: 1 1 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--eb-border-2) transparent; }
table.eb-dt { width: 100%; border-collapse: collapse; font-size: 10.5px; }
table.eb-dt thead th {
  font-size: var(--eb-table-header-size); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--eb-text-3); padding: 5px 8px 3px; text-align: left;
  border-bottom: 1px solid var(--eb-border); background: var(--eb-surface-2);
  position: sticky; top: 0;
}
table.eb-dt thead th:not(:first-child) { text-align: right; }
table.eb-dt tbody td {
  padding: 4px 8px; border-bottom: 1px solid var(--eb-border); color: var(--eb-text-2);
  font-size: var(--eb-data-number-size);
}
table.eb-dt tbody td:not(:first-child) { text-align: right; font-family: var(--font-family); }
table.eb-dt tbody td:first-child { font-weight: 500; color: var(--eb-text); }
table.eb-dt tbody tr:last-child td { border-bottom: none; }
table.eb-dt tbody tr:hover td { background: var(--eb-orange-dim); }
/* ── S&D row color coding (moved from renderExecutiveBrief.js
   _buildExecutiveDOM injection) ── */
.eb-dt tr.eb-snd-green td { background: var(--eb-green-dim); }
.eb-dt tr.eb-snd-peach td { background: var(--eb-amber-dim); }
.eb-dt tr.eb-snd-gray  td { background: var(--eb-border); }
#eb-panel-sd .eb-card-title { padding: 10px 12px 8px; border-bottom: 1px solid var(--eb-border); }

/* ESR Sales table — explicit scoped size control (class added in renderExecutiveBrief.js) */
#eb-esr-sales-card .eb-esr-sales-table tbody td {
  font-size: var(--eb-data-number-size);
}
#eb-esr-sales-card .eb-esr-sales-table thead th {
  font-size: var(--eb-table-header-size);
}
/* Table's own left/right margin — wrapper-level padding-inline, the same
   mechanism #eb-snd-table-wrap uses (uniform on both sides, independent of
   any column/indent, rather than per-cell padding). Scrollbar is hidden
   too, so it doesn't visually eat into the 22px like the default
   .eb-table-scroll thin scrollbar would. */
#eb-esr-sales-table-wrap {
  padding-inline: 22px;
  padding-bottom: 25px;
  box-sizing: border-box;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#eb-esr-sales-table-wrap::-webkit-scrollbar {
  width: 0; height: 0; display: none;
}

/* Bar chart rows (export destinations) */
.eb-bar-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.eb-bar-label { font-size: 12px; width: 68px; flex-shrink: 0; color: var(--eb-text-2); }
.eb-bar-track { flex: 1; background: var(--eb-border); border-radius: 2px; height: 6px; }
.eb-bar-fill  { height: 100%; background: #60a5fa; border-radius: 2px; }
.eb-bar-pct   { font-size: 10px; font-family: var(--font-family); color: var(--eb-text-2); width: 28px; text-align: right; }

/* ── Stories panel ── */
#eb-stories { order: 2; display: flex; flex-direction: column; min-height: 0; overflow: hidden; align-self: stretch; }
.eb-stories-header {
  padding: 10px 12px 7px; border-bottom: 1px solid var(--eb-border);
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
}
.eb-stories-title { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--eb-green); }
/* #eb-stories-scroll: flex column filling the card body */
#eb-stories-scroll,
.eb-stories-scroll {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#eb-stories-scroll::-webkit-scrollbar,
.eb-stories-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Headlines card: no extra scroll wrapper padding */
.eb-snap-card--headlines .eb-stories-scroll { padding: 0; }

/* Story item — fills available height as flex column */
.eb-snap-card--headlines .eb-story-item {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px 14px 12px 14px !important;
  border-bottom: none;
}

/* Commodity + verdict on one row */
.eb-story-heading-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px 0;
  min-width: 0;
}
.eb-story-commodity {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--eb-text);
  white-space: nowrap;
  flex: 0 0 auto;
}
.eb-story-verdict {
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eb-bull { background: var(--eb-green-dim); color: var(--eb-green); }
.eb-bear { background: var(--eb-red-dim);   color: var(--eb-red); }
.eb-mix  { background: var(--eb-amber-dim); color: var(--eb-amber); }

/* Story item (non-headlines cards) */
.eb-story-item { border-bottom: 1px solid var(--eb-border); padding-bottom: 8px; }
.eb-story-item:last-child { border-bottom: none; padding-bottom: 0; }
.eb-story-summary { font-size: 12px; line-height: 1.6; color: var(--eb-text-2); }
.eb-story-themes  { margin-top: 4px; }

/* ── Theme deck container ─────────────────────────────────────────────────── */
.eb-story-themes.eb-theme-deck {
  --card-gap: 14px;
  --stack-step: 118px;  /* how far down back cards start */
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* ── Base card ── */
.eb-theme-row {
  position: relative;
  box-sizing: border-box;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--eb-surface-2);
  border: 1px solid var(--eb-border);
  box-shadow: 0 5px 16px rgba(15,23,42,.10);
  cursor: pointer;
  outline: none;
  user-select: none;
  font-family: var(--font-family);
  transition:
    top .22s ease, left .22s ease, bottom .22s ease,
    transform .18s ease, box-shadow .18s ease,
    border-color .18s ease, opacity .18s ease;
}
.eb-theme-row:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(15,23,42,.14); }
.eb-theme-row:focus-visible { outline: 2px solid var(--eb-green); outline-offset: 2px; }

/* ── 1 card: full width + height ── */
.eb-theme-count-1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0;
  height: 100%;
}
.eb-theme-count-1 .eb-theme-row { position: relative; width: 100%; height: 100%; }

/* ── 2 cards: two columns, full height ── */
.eb-theme-count-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  grid-template-rows: 1fr;
  gap: var(--card-gap);
  height: 100%;
}
.eb-theme-count-2 .eb-theme-row { position: relative; width: 100%; height: 100%; }

/* ── 3 cards: three horizontal columns, full height ── */
.eb-theme-count-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  grid-template-rows: 1fr;
  gap: var(--card-gap);
  height: 100%;
}
.eb-theme-count-3 .eb-theme-row { position: relative; width: 100%; height: 100%; }

/* ── 4+ cards: 2-col grid, front row fills space, back row peeks ── */
.eb-theme-count-4,
.eb-theme-count-5,
.eb-theme-count-6,
.eb-theme-count-7,
.eb-theme-count-8 {
  --peek: 253px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr var(--peek);
  column-gap: var(--card-gap);
  row-gap: 0;
  height: 100%;
}

/* grid placement */
.eb-theme-count-4 .eb-theme-row:nth-child(1),
.eb-theme-count-5 .eb-theme-row:nth-child(1),
.eb-theme-count-6 .eb-theme-row:nth-child(1),
.eb-theme-count-7 .eb-theme-row:nth-child(1),
.eb-theme-count-8 .eb-theme-row:nth-child(1) { grid-column: 1; grid-row: 1; }

.eb-theme-count-4 .eb-theme-row:nth-child(2),
.eb-theme-count-5 .eb-theme-row:nth-child(2),
.eb-theme-count-6 .eb-theme-row:nth-child(2),
.eb-theme-count-7 .eb-theme-row:nth-child(2),
.eb-theme-count-8 .eb-theme-row:nth-child(2) { grid-column: 2; grid-row: 1; }

.eb-theme-count-4 .eb-theme-row:nth-child(3),
.eb-theme-count-5 .eb-theme-row:nth-child(3),
.eb-theme-count-6 .eb-theme-row:nth-child(3),
.eb-theme-count-7 .eb-theme-row:nth-child(3),
.eb-theme-count-8 .eb-theme-row:nth-child(3) { grid-column: 1; grid-row: 2; }

.eb-theme-count-4 .eb-theme-row:nth-child(4),
.eb-theme-count-5 .eb-theme-row:nth-child(4),
.eb-theme-count-6 .eb-theme-row:nth-child(4),
.eb-theme-count-7 .eb-theme-row:nth-child(4),
.eb-theme-count-8 .eb-theme-row:nth-child(4) { grid-column: 2; grid-row: 2; }

/* back-row cards clip overflow so only --peek height is visible */
.eb-theme-count-4 .eb-theme-row:nth-child(n+3),
.eb-theme-count-5 .eb-theme-row:nth-child(n+3),
.eb-theme-count-6 .eb-theme-row:nth-child(n+3),
.eb-theme-count-7 .eb-theme-row:nth-child(n+3),
.eb-theme-count-8 .eb-theme-row:nth-child(n+3) { overflow: hidden; }

/* ── Expanded back card: spans both rows, covers its column ── */
.eb-theme-count-4 .eb-theme-row:nth-child(3).expanded,
.eb-theme-count-5 .eb-theme-row:nth-child(3).expanded,
.eb-theme-count-6 .eb-theme-row:nth-child(3).expanded,
.eb-theme-count-7 .eb-theme-row:nth-child(3).expanded,
.eb-theme-count-8 .eb-theme-row:nth-child(3).expanded,
.eb-theme-count-4 .eb-theme-row:nth-child(3)[aria-expanded="true"],
.eb-theme-count-5 .eb-theme-row:nth-child(3)[aria-expanded="true"],
.eb-theme-count-6 .eb-theme-row:nth-child(3)[aria-expanded="true"],
.eb-theme-count-7 .eb-theme-row:nth-child(3)[aria-expanded="true"],
.eb-theme-count-8 .eb-theme-row:nth-child(3)[aria-expanded="true"] {
  grid-row: 1 / span 2;
  grid-column: 1;
  z-index: 10;
}

.eb-theme-count-4 .eb-theme-row:nth-child(4).expanded,
.eb-theme-count-5 .eb-theme-row:nth-child(4).expanded,
.eb-theme-count-6 .eb-theme-row:nth-child(4).expanded,
.eb-theme-count-7 .eb-theme-row:nth-child(4).expanded,
.eb-theme-count-8 .eb-theme-row:nth-child(4).expanded,
.eb-theme-count-4 .eb-theme-row:nth-child(4)[aria-expanded="true"],
.eb-theme-count-5 .eb-theme-row:nth-child(4)[aria-expanded="true"],
.eb-theme-count-6 .eb-theme-row:nth-child(4)[aria-expanded="true"],
.eb-theme-count-7 .eb-theme-row:nth-child(4)[aria-expanded="true"],
.eb-theme-count-8 .eb-theme-row:nth-child(4)[aria-expanded="true"] {
  grid-row: 1 / span 2;
  grid-column: 2;
  z-index: 10;
}

/* ── Expanded card styling (all) ── */
.eb-theme-row.expanded,
.eb-theme-row[aria-expanded="true"] {
  overflow: hidden;
  border-color: var(--eb-green);
  box-shadow: 0 12px 30px rgba(15,23,42,.20);
}

/* ── Card header ── */
.eb-theme-row-header,
.eb-theme-title-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 7px;
}
.eb-theme-arrow { flex: 0 0 18px; width: 18px; height: 18px; }
.eb-theme-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 900;
  color: var(--eb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

/* Tag below title row */
.eb-theme-tag {
  flex: 0 0 auto;
  align-self: flex-start;
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-bottom: 8px;
}

/* Collapsed preview — 6 lines */
.eb-theme-preview {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  font-size: 11px;
  color: var(--eb-text-2);
  line-height: 1.5;
}

/* Expanded full body — scrolls inside card */
.eb-theme-full {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 6px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: none;
}
.eb-theme-full::-webkit-scrollbar { display: none; }
.eb-theme-row.expanded .eb-theme-preview,
.eb-theme-row[aria-expanded="true"] .eb-theme-preview { display: none; }
.eb-theme-row.expanded .eb-theme-full,
.eb-theme-row[aria-expanded="true"] .eb-theme-full { display: block; overflow-y: auto; }
.eb-theme-full .eb-theme-body    { font-size: 12px; color: var(--eb-text-2); line-height: 1.6; }
.eb-theme-full .eb-theme-sources { font-size: 10px; color: var(--eb-text-3); margin-top: 6px; font-style: italic; }

/* Collapsed fade */
.eb-theme-row:not(.expanded)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 28px;
  background: linear-gradient(to bottom, transparent, var(--eb-surface-2));
  pointer-events: none;
}

/* ── Mobile fallback ── */
@media (max-width: 900px) {
  #eb-stories-scroll { overflow: auto; }

  .eb-snap-card--headlines .eb-story-item {
    padding: 10px 12px 12px !important;
    height: auto;
    min-height: 100%;
  }

  .eb-story-heading-row { flex-wrap: wrap; gap: 8px; }

  .eb-story-themes.eb-theme-deck,
  .eb-theme-count-1, .eb-theme-count-2, .eb-theme-count-3,
  .eb-theme-count-4, .eb-theme-count-5, .eb-theme-count-6,
  .eb-theme-count-7, .eb-theme-count-8 {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    height: auto;
    overflow: auto;
  }

  .eb-theme-row {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-height: 160px;
    overflow: hidden;
  }

  .eb-theme-row.expanded,
  .eb-theme-row[aria-expanded="true"] { max-height: 480px; }
}

/* ── Light mode tweaks ── */
[data-theme="light"] .eb-cal-plant { background: #4ade80; }
[data-theme="light"] .eb-cal-poll  { background: #f472b6; }
[data-theme="light"] .eb-cal-harv  { background: #fbbf24; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  #eb-status { grid-template-columns: 1fr 22vw; }
  .eb-status-mid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  #eb-status { grid-template-columns: 1fr; }
  #eb-status-left { flex-direction: column; }
  .eb-price-chart-card { flex: 0 0 auto; }
  .eb-status-mid { grid-template-columns: repeat(3, 1fr); }
  .eb-commodity-selector { grid-column: 1 / -1; }
  .eb-commodity-selector { grid-column: 1/-1; }
  #eb-tabs { padding-left: 0; }
  .eb-panel { grid-template-columns: 1fr; grid-template-rows: repeat(4, auto); }
}

/* ── ESR Cumulative Exports chart (Plotly) ───────────────────── */
.eb-snd-loading {
  font-size: 12px; color: var(--eb-text-3);
  padding: 12px; text-align: center; width: 100%;
}

/* ── Hide Plotly toolbar on touch/tablet devices ── */
@media (pointer: coarse), (max-width: 1024px) {
  #overview .modebar,
  #eb-root .modebar,
  .js-plotly-plot .modebar { display: none !important; }
}

/* SND table card fills its snap card */
#eb-snd-table-card {
  flex: 1 1 0;
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
#eb-snd-table-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

#eb-snd-table-card table.eb-dt thead th,
#eb-snd-table-card table.eb-dt tbody td {
  padding-left: 25px;
  padding-right: 25px;
}

/* WASDE S&D attribute hierarchy — level 0 is always the least indented. */
/* These rules override the generic padding-left above for the first cell. */
#eb-snd-table-card .eb-dt tbody td.eb-snd-attribute {
  padding-inline-start: 8px;
}
#eb-snd-table-card .eb-dt tbody td.eb-snd-attribute.eb-snd-indent-0 {
  padding-inline-start: 8px;
}
#eb-snd-table-card .eb-dt tbody td.eb-snd-attribute.eb-snd-indent-1 {
  padding-inline-start: 22px;
}
#eb-snd-table-card .eb-dt tbody td.eb-snd-attribute.eb-snd-indent-2 {
  padding-inline-start: 36px;
}

/* ── WASDE S&D scroll containers ────────────────────────── */
/* Override eb-table-scroll: outer handles horizontal scroll only */
#eb-snd-table-wrap {
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-inline: 22px;
  box-sizing: border-box;
}

/* Left inset aligned with #eb-snd-table-wrap's 22px padding-inline */
#eb-snd-filter-bar {
  padding-inline-start: 22px !important;
}

/* Inner div: shared vertical-scroll behavior (no width here — set per mode) */
#eb-snd-table-wrap .eb-snd-y-scroll {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 25px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#eb-snd-table-wrap .eb-snd-y-scroll::-webkit-scrollbar {
  width: 0; height: 0; display: none;
}

/* Normal wrapper: fills card width so fixed-layout % columns resolve correctly */
#eb-snd-table-wrap .eb-snd-y-scroll--normal {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

/* All Changes wrapper: expands to content width for horizontal scroll */
#eb-snd-table-wrap .eb-snd-y-scroll--all-changes {
  width: max-content;
  min-width: 100%;
}

/* ── WASDE S&D column widths ──────────────────────────────── */
/* Normal S&D table:
   Attribute 35 | Value 20 | VS PM 15 | VS PY 15 | Unit 15 */
#eb-snd-table-card .eb-snd-table--normal {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  table-layout: fixed;
}
#eb-snd-table-card .eb-snd-col-attribute {
  width: 35%;
}

#eb-snd-table-card .eb-snd-col-value {
  width: 20%;
}

#eb-snd-table-card .eb-snd-col-prior-report,
#eb-snd-table-card .eb-snd-col-prior-my {
  width: 15%;
}

#eb-snd-table-card .eb-snd-col-unit {
  width: 15%;
}

/* All Changes (6 cols, auto): Country fits content; Attribute absorbs remaining */
#eb-snd-table-card .eb-snd-table--all-changes {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}
#eb-snd-table-card .eb-snd-all-col-country      { width: 1%; }
#eb-snd-table-card .eb-snd-all-col-attribute    { width: auto; }
#eb-snd-table-card .eb-snd-all-col-value        { width: 14%; }
#eb-snd-table-card .eb-snd-all-col-prior-report,
#eb-snd-table-card .eb-snd-all-col-prior-my     { width: 12%; }
#eb-snd-table-card .eb-snd-all-col-unit         { width: 1%; }

/* ── WASDE S&D cell alignment (semantic classes, no nth-child) ── */
/* Country: content-fit, no wrap */
#eb-snd-table-card .eb-snd-table--all-changes th:first-child,
#eb-snd-table-card .eb-snd-table--all-changes td.eb-snd-country-cell {
  width: 1%;
  white-space: nowrap;
}

/* Attribute: left-align, no wrap */
#eb-snd-table-card .eb-dt tbody td.eb-snd-attribute { white-space: nowrap; }

/* Value and comparison cells: right-aligned, no wrap */
#eb-snd-table-card .eb-snd-value-cell,
#eb-snd-table-card .eb-snd-comparison-cell {
  white-space: nowrap;
  text-align: right;
}

/* Tabular nums + smooth theme transition on comparison cells */
#eb-snd-table-card .eb-snd-comparison-cell {
  font-variant-numeric: tabular-nums;
  transition: color var(--transition, 0.2s ease);
}

/* Sign colors — scoped to S&D card; does not affect any other table */
#eb-snd-table-card .eb-snd-change-positive {
  color: var(--snd-change-positive);
  font-weight: 600;
}
#eb-snd-table-card .eb-snd-change-negative {
  color: var(--snd-change-negative);
  font-weight: 600;
}
#eb-snd-table-card .eb-snd-change-neutral {
  color: var(--snd-change-neutral);
  font-weight: 400;
}

/* Unit cell: no wrap, left-aligned (overrides generic non-first-child right-align) */
#eb-snd-table-card .eb-snd-unit-cell { white-space: nowrap; }
#eb-snd-table-card .eb-snd-table thead th:last-child { text-align: left; }

/* All Changes Unit col: content-fit, no wrap */
#eb-snd-table-card .eb-snd-table--all-changes th:last-child,
#eb-snd-table-card .eb-snd-table--all-changes td.eb-snd-unit-cell {
  white-space: nowrap;
}

/* Narrow screens */
@media (max-width: 640px) {
  #eb-snd-table-card .eb-snd-table--normal      { min-width: 520px; }
  #eb-snd-table-card .eb-snd-table--all-changes { min-width: 620px; }
}

/* ── WASDE S&D sortable headers ─────────────────────────────────── */
#eb-snd-table-card .eb-snd-sort-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: flex-start;
  gap: 4px; margin: 0; padding: 0; border: 0; background: transparent;
  color: inherit; font: inherit; font-size: inherit; font-weight: inherit;
  letter-spacing: inherit; line-height: inherit; text-transform: inherit;
  cursor: pointer; white-space: inherit;
}
#eb-snd-table-card .eb-snd-sort-btn--numeric {
  justify-content: flex-end; text-align: right;
}
#eb-snd-table-card .eb-snd-sort-label { min-width: 0; }
#eb-snd-table-card .eb-snd-sort-indicator {
  flex: 0 0 9px; width: 9px; text-align: center;
  opacity: 0; font-size: 8px; line-height: 1;
}
#eb-snd-table-card .eb-snd-sort-btn.is-active { color: var(--eb-green); }
#eb-snd-table-card .eb-snd-sort-btn.is-active .eb-snd-sort-indicator { opacity: 1; }
#eb-snd-table-card .eb-snd-sort-btn:hover { color: var(--eb-text); }
#eb-snd-table-card .eb-snd-sort-btn:focus-visible {
  outline: 2px solid var(--eb-green); outline-offset: 2px; border-radius: 2px;
}

/* Unified card header — same distance from card top on every card,
   including the 7-Day Themes panel which is the visual reference */
.eb-snd-card-header,
.eb-card-header,
.eb-stories-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex-shrink: 0;
  padding: 14px 14px 10px !important;
  border-bottom: 1px solid var(--eb-border) !important;
  box-sizing: border-box;
}
/* CPC header: title + window toggle side-by-side — override column default */
#eb-cpc-header {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.eb-sel-wrap { position: relative; }
/* .eb-sel-btn sizing/color handled by shared filter-control rule above;
   these carry only the properties the shared rule does not set. */
.eb-sel-btn { letter-spacing: 0.04em; }
.eb-sel-btn:hover { color: var(--eb-green); border-color: var(--eb-green); }
.eb-sel-panel {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 200;
  background: var(--eb-panel-bg);
  border: 1px solid var(--eb-border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
  min-width: 160px; max-height: 220px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--eb-border-2) transparent;
}
.eb-sel-panel.open { display: block; }
.eb-sel-item {
  padding: 5px 10px; font-size: 10px; cursor: pointer;
  color: var(--eb-text-2); transition: background 0.1s;
}
.eb-sel-item:hover { background: var(--eb-control-active-bg); }
.eb-sel-item.active { color: var(--eb-green); font-weight: 600; }

/* ── Unified checkbox panel (All | None | Search header + item list) ── */
.eb-cpanel-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--eb-border-2);
  flex-shrink: 0;
}
.eb-cpanel-btn {
  height: 20px;
  padding: 0 7px;
  font-size: 9px;
  flex-shrink: 0;
}
.eb-cpanel-search {
  flex: 1;
  min-width: 0;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--eb-border-2);
  border-radius: 5px;
  background: var(--eb-control-bg);
  color: var(--eb-text);
  font-size: 9px;
  font-family: var(--font-family, sans-serif);
  outline: none;
  transition: border-color 0.15s;
}
.eb-cpanel-search:focus { border-color: var(--eb-green); }
.eb-cpanel-search::placeholder { color: var(--eb-text-2); opacity: 0.6; }
.eb-cpanel-list {
  overflow-y: auto;
  max-height: 230px;
  padding: 3px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--eb-border-2) transparent;
}
.eb-cpanel-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--eb-text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s;
}
.eb-cpanel-item:hover { background: var(--eb-control-active-bg); }
.eb-cpanel-item.is-filtered-out { display: none !important; }
.eb-cpanel-item input[type="checkbox"] {
  width: 11px; height: 11px;
  cursor: pointer;
  flex-shrink: 0;
}

/* All Changes button active state */
.eb-snd-changes-btn.active {
  background: var(--eb-green);
  color: #fff;
  border-color: var(--eb-green);
}

/* Unit toggle: iOS-style switch with US / Metric labels */
.eb-snd-unit-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.eb-unit-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--eb-text-2);
  transition: color 0.15s;
  user-select: none;
  cursor: pointer;
}
.eb-unit-label--active {
  color: var(--eb-text);
}
.eb-toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.eb-toggle-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.eb-toggle-track {
  display: block;
  width: 34px;
  height: 18px;
  border-radius: 9px;
  background: var(--eb-border-2);
  transition: background 0.2s;
  position: relative;
}
.eb-toggle-switch input:checked + .eb-toggle-track {
  background: var(--eb-green);
}
.eb-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.2s;
}
.eb-toggle-switch input:checked + .eb-toggle-track .eb-toggle-thumb {
  transform: translateX(16px);
}

/* ESR plotly card + wrap fill their snap card completely */
.eb-esr-plotly-card {
  flex: 1 1 0;
  padding: 0;
  min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.eb-esr-plotly-wrap {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  /* Plotly autosize reads offsetWidth/offsetHeight — must be non-zero */
  position: relative;
}
/* Force Plotly's generated divs to fill the wrapper */
.eb-esr-plotly-wrap > .js-plotly-plot,
.eb-esr-plotly-wrap > .js-plotly-plot > .plot-container,
.eb-esr-plotly-wrap > .js-plotly-plot > .plot-container > .svg-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
/* ── WASDE S&D Trend chart (Plotly) ─────────────────────────── */
.eb-trend-plotly-card {
  flex: 1 1 0;
  padding: 0;
  overflow: hidden;
  min-height: 0;
  display: flex; flex-direction: column;
}
.eb-trend-plotly-wrap {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  position: relative;
}
.eb-trend-plotly-wrap > .js-plotly-plot,
.eb-trend-plotly-wrap > .js-plotly-plot > .plot-container,
.eb-trend-plotly-wrap > .js-plotly-plot > .plot-container > .svg-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* ── FGIS Inspection filter bar ─────────────────────────────── */

/* Multi-select dropdown wrapper — piggybacks on .eb-sel-btn / .eb-sel-panel */
.eb-fgis-filter-bar .eb-sel-btn {
  font-size: 10px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Checkbox label rows inside the multi-select panel */
.eb-fgis-filter-bar .eb-sel-panel label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-size: 10px;
  cursor: pointer;
  color: var(--eb-text-2);
  white-space: nowrap;
  transition: background 0.1s;
}
.eb-fgis-filter-bar .eb-sel-panel label:hover {
  background: var(--eb-surface-2);
}
.eb-fgis-filter-bar .eb-sel-panel input[type="checkbox"] {
  accent-color: var(--eb-green);
  cursor: pointer;
  flex-shrink: 0;
}

/* "All" separator label at top of each multi-select */
.eb-fgis-filter-bar .eb-sel-panel label:first-child {
  border-bottom: 1px solid var(--eb-border);
  margin-bottom: 2px;
  padding-bottom: 5px;
  font-weight: 600;
  color: var(--eb-text);
}

/* Year checkbox bar — same look as ESR weekly */
.eb-fgis-year-filter-bar label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  cursor: pointer;
  color: var(--eb-text-2);
  transition: color 0.1s;
}
.eb-fgis-year-filter-bar label:hover { color: var(--eb-text); }
.eb-fgis-year-filter-bar input[type="checkbox"] {
  accent-color: var(--eb-green);
  cursor: pointer;
}

/* ══ News: 7-day themes redesign (v2 summary + theme cards) ═══════════════ */

/* Summary card outer wrapper */
.nf-theme-summary-card {
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  border: 0.5px solid var(--border-medium, rgba(0,0,0,0.12));
  margin-bottom: 10px;
}

/* Tinted header */
.nf-theme-summary-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid transparent;
}
.nf-theme-summary-header--bull {
  background: #EAF3DE;
  border-bottom-color: #C0DD97;
}
.nf-theme-summary-header--bear {
  background: #FDECEA;
  border-bottom-color: #F5AEAA;
}
.nf-theme-summary-header--mix {
  background: #FEF9EC;
  border-bottom-color: #E8D8A0;
}

/* Two-row summary header: commodity icon on the left, then a stacked
   title ("Corn: Bullish — Export demand surge") and meta ("3 themes · 12 articles").
   The element also keeps .nf-theme-summary-header + its --bull/--bear/--mix modifier,
   which own the verdict tint, border and the dark/zen overrides — so the net view is
   still expressed by the header colour even though the badge is gone.
   Superseded by this block and removed: .nf-theme-summary-header-main,
   .nf-theme-summary-verdict, .nf-theme-summary-driver (+ per-verdict and per-theme
   overrides), .nf-theme-summary-meta, .nf-theme-summary-count, .nf-theme-row-comm. */
.nf-summary-header {
  padding: 5px 20px;
  gap: 10px;
}

.nf-summary-header__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nf-summary-header__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.nf-summary-header__meta {
  font-size: 11px;
  color: var(--text-secondary);
}

/* White content area below tinted header */
.nf-theme-summary-body {
  padding: 14px 18px;
  background: var(--bg-surface, #ffffff);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nf-theme-summary-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-primary, #1e293b);
}

/* Theme pill chips row */
.nf-theme-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nf-theme-summary-chip {
  border-radius: 20px;
  font-size: 11px;
  padding: 3px 10px;
  border: 0.5px solid;
  white-space: nowrap;
}
.nf-theme-summary-chip--bull {
  background: #EAF3DE;
  color: #3a6b2a;
  border-color: #9ec87a;
}
.nf-theme-summary-chip--bear {
  background: #FDECEA;
  color: #8c2f2a;
  border-color: #e9928e;
}
.nf-theme-summary-chip--mix {
  background: #FEF9EC;
  color: #7a5c18;
  border-color: #d4b86a;
}

/* ── Theme card v2 (vertical single-column) ──────────────────────────────── */
.nf-theme-card-v2 {
  background: var(--bg-surface, #ffffff);
  border: 0.5px solid var(--border-subtle, rgba(0,0,0,0.10));
  border-radius: 0 var(--radius-md, 10px) var(--radius-md, 10px) 0;
  border-left-width: 3px;
  border-left-style: solid;
  overflow: hidden;
  margin-bottom: 8px;
  transition: box-shadow 0.15s;
}
.nf-theme-card-v2--bull { border-left-color: #4ade80; }
.nf-theme-card-v2--bear { border-left-color: #f87171; }
.nf-theme-card-v2--mix  { border-left-color: #fbbf24; }

.nf-theme-card-v2.nf-theme-card--clickable { cursor: pointer; }
.nf-theme-card-v2.nf-theme-card--clickable:hover {
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}
.nf-theme-card-v2.nf-theme-card--active {
  outline: 1.5px solid var(--accent, #22c55e);
  outline-offset: 0;
}

.nf-theme-card-v2__body {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nf-theme-card-v2__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #1e293b);
  line-height: 1.4;
}
/* Shared with Market Voices body text (nf-mv-voice__view, nf-mv-context-card__text)
   so the two panes read as one typography system — see style SOP §3. */
.nf-theme-card-v2__text,
.nf-mv-voice__view,
.nf-mv-context-card__text {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-primary, #334155);
}
.nf-theme-card-v2__meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.nf-theme-card-v2__sources {
  font-size: 11px;
  color: var(--text-secondary, #94a3b8);
}

.nf-theme-card-v2__link {
  font-size: 12px;
  cursor: pointer;
}
.nf-theme-card-v2__link--bull { color: #16a34a; }
.nf-theme-card-v2__link--bear { color: #dc2626; }
.nf-theme-card-v2__link--mix  { color: #ca8a04; }
.nf-theme-card-v2__link:hover { text-decoration: underline; }

/* Dark theme overrides */
[data-theme="dark"] .nf-theme-summary-card {
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .nf-theme-summary-header--bull {
  background: rgba(74,222,128,0.10);
  border-bottom-color: rgba(74,222,128,0.22);
}
[data-theme="dark"] .nf-theme-summary-header--bear {
  background: rgba(248,113,113,0.10);
  border-bottom-color: rgba(248,113,113,0.22);
}
[data-theme="dark"] .nf-theme-summary-header--mix {
  background: rgba(251,191,36,0.10);
  border-bottom-color: rgba(251,191,36,0.22);
}
/* (Dark .nf-theme-summary-verdict / -driver overrides removed with the two-row header
   redesign — the title now uses var(--text-primary), which is already theme-aware.) */
[data-theme="dark"] .nf-theme-summary-body    { background: var(--bg-card, rgba(255,255,255,0.03)); }
[data-theme="dark"] .nf-theme-summary-text    { color: rgba(255,255,255,0.82); }
[data-theme="dark"] .nf-theme-summary-chip--bull { background: rgba(74,222,128,0.12); color: #86efac; border-color: rgba(74,222,128,0.30); }
[data-theme="dark"] .nf-theme-summary-chip--bear { background: rgba(248,113,113,0.12); color: #fca5a5; border-color: rgba(248,113,113,0.30); }
[data-theme="dark"] .nf-theme-summary-chip--mix  { background: rgba(251,191,36,0.12); color: #fde68a; border-color: rgba(251,191,36,0.30); }
[data-theme="dark"] .nf-theme-card-v2 {
  background: var(--bg-card, rgba(255,255,255,0.03));
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .nf-theme-card-v2__title  { color: #f1f5f9; }
[data-theme="dark"] .nf-theme-card-v2__text,
[data-theme="dark"] .nf-mv-voice__view,
[data-theme="dark"] .nf-mv-context-card__text { color: rgba(255,255,255,0.75); }
[data-theme="dark"] .nf-theme-card-v2--bull { border-left-color: #22c55e; }
[data-theme="dark"] .nf-theme-card-v2--bear { border-left-color: #f87171; }
[data-theme="dark"] .nf-theme-card-v2--mix  { border-left-color: #eab308; }
[data-theme="dark"] .nf-theme-card-v2__link--bull { color: #4ade80; }
[data-theme="dark"] .nf-theme-card-v2__link--bear { color: #f87171; }
[data-theme="dark"] .nf-theme-card-v2__link--mix  { color: #facc15; }

/* BEGIN EXTRACTED: _injectDockedStyles */
/* ═════════════════════════════════════════════════════════
   NEWS DOCKED PANEL (nd-*)
   Moved from renderNewsFeed.js _injectDockedStyles()
   ══════════════════════════════════════════════════════════ */
.nd-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.07));
}
.nd-item:last-child { border-bottom: none; }
.nd-title {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: #60a5fa;
  text-decoration: none;
  margin-bottom: 4px;
}
.nd-title:hover { text-decoration: underline; }
.nd-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary, #94a3b8);
  margin-bottom: 5px;
}
.nd-source { font-weight: 600; }
.nd-dot { opacity: 0.45; }
.nd-date { font-variant-numeric: tabular-nums; }
.nd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.nd-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid;
  line-height: 1.6;
}
[data-theme="light"] .nd-title { color: #1d4ed8; }
[data-theme="light"] .nd-item { border-bottom-color: #e2e8f0; }
/* END EXTRACTED: _injectDockedStyles */

/* BEGIN EXTRACTED: _injectStyles */
/* ═════════════════════════════════════════════════════════
   NEWS FEED FULL PAGE (nf-*)
   Moved from renderNewsFeed.js _injectStyles()
   ═════════════════════════════════════════════════════════ */
/* ══ NF root ══════════════════════════════════════════════════════════════════ */
.nf-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: var(--font-family, system-ui, sans-serif);
  color: var(--text-primary, #e2e8f0);
  background: var(--bg-base, #0f1117);
}

/* ══ Filters bar ══════════════════════════════════════════════════════════════ */
.nf-filters {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.08));
  flex-shrink: 0;
  flex-wrap: wrap;
  background: var(--bg-elevated, #151b26);
}

.nf-filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nf-filter-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary, #94a3b8);
  white-space: nowrap;
}

/* Market chips */
.nf-market-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Gen 1. Only the declarations below are still live — border/background/color/
   font-size and the former :hover and .active blocks were fully superseded by the
   later generations (see the Gen 2 block and the live Gen 4 block near the end of
   this file) and have been removed. */
.nf-chip {
  padding: 4px 13px;
  border-radius: 5px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

/* Date range inputs */
.nf-date-range-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.nf-date-text-input {
  flex: 0 1 auto;
  width: 9ch;
  min-width: 64px;
  height: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-primary, #e2e8f0);
  font-size: 11.5px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
  box-sizing: border-box;
}
.nf-date-text-input::placeholder { color: var(--text-muted, #64748b); }
.nf-date-text-input[aria-invalid="true"] {
  color: #f87171;
  box-shadow: inset 0 -2px 0 0 #f87171;
}
.nf-date-arrow {
  color: var(--text-muted, #64748b);
  font-size: 13px;
  flex-shrink: 0;
}
.nf-date-apply-btn {
  height: 30px;
  padding: 0 11px;
  border-radius: 8px;
  border: none;
  background: var(--accent, #22c55e);
  color: #000;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.nf-date-apply-btn:hover { background: #16a34a; }
[data-theme="light"] .nf-date-text-input[aria-invalid="true"] {
  color: #dc2626;
  box-shadow: inset 0 -2px 0 0 #dc2626;
}
[data-theme="light"] .nf-date-apply-btn { background: #16a34a; color: #fff; }
[data-theme="light"] .nf-date-apply-btn:hover { background: #15803d; }

/* Keyword search in list col */
.nf-list-keyword-wrap {
  padding: 8px 14px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-light, rgba(148,163,184,0.16));
}
.nf-list-keyword-wrap .nf-keyword-input {
  width: 100%;
  box-sizing: border-box;
}
[data-theme="light"] .nf-list-keyword-wrap {
  border-bottom-color: #e5e7eb;
}

.nf-keyword-input {
  height: 28px;
  padding: 0 10px;
  border-radius: 20px;
  border: 1px solid var(--border-medium, rgba(255,255,255,0.13));
  background: transparent;
  color: var(--text-primary, #e2e8f0);
  font-size: 12px;
  font-family: inherit;
  width: 340px;
  outline: none;
  transition: border-color 0.15s, width 0.2s;
}
.nf-keyword-input::placeholder {
  color: var(--text-primary, #e2e8f0);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 400;
  font-style: normal;
  opacity: 1;
}
.nf-keyword-input:focus {
  border-color: var(--accent, #22c55e);
  width: 400px;
}
[data-theme="light"] .nf-keyword-input {
  border-color: #cbd5e1;
  color: #1e293b;
}
[data-theme="light"] .nf-keyword-input:focus { border-color: #16a34a; }

/* ══ Body ═════════════════════════════════════════════════════════════════════ */
.nf-body {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 0;
  overflow: hidden;
}

/* ══ Left column — Live Headlines ════════════════════════════════════════════ */
.nf-list-col {
  flex: 0 0 30vw;
  width: 30vw;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-light, rgba(255,255,255,0.08));
  background: var(--bg-base, #0f1117);
  overflow: hidden;
}

.nf-list-header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.06));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Live badge with pulse dot */
.nf-live-badge {
  display: flex;
  align-items: center;
  gap: 7px;
}
.nf-live-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f87171;
  flex-shrink: 0;
  position: relative;
}
.nf-live-pulse::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: rgba(248,113,113,0.3);
  animation: nf-pulse-ring 2s ease-out infinite;
}
@keyframes nf-pulse-ring {
  0%   { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(1.8); opacity: 0; }
}
.nf-live-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-primary, #e2e8f0);
}

.nf-count-chip {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  background: var(--bg-elevated, rgba(255,255,255,0.05));
  border: 1px solid var(--border-light, rgba(255,255,255,0.07));
  border-radius: 10px;
  padding: 1px 8px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.nf-list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.nf-list::-webkit-scrollbar { width: 4px; }
.nf-list::-webkit-scrollbar-track { background: transparent; }
.nf-list::-webkit-scrollbar-thumb { background: var(--scrollbar, rgba(255,255,255,0.10)); border-radius: 3px; }

/* Live headline card — compact ticker style */
.nf-card {
  padding: 10px 14px 11px;
  border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.055));
  transition: background 0.1s;
  cursor: default;
}
.nf-card:last-child { border-bottom: none; }
.nf-card:hover {
  background: var(--bg-elevated, rgba(255,255,255,0.04));
}

.nf-card-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.nf-favicon {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  object-fit: contain;
  flex-shrink: 0;
}
.nf-source {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #94a3b8);
}
.nf-dot { opacity: 0.35; font-size: 11px; color: var(--text-muted, #64748b); }
.nf-date { font-size: 9.5px; color: var(--text-muted, #64748b); font-variant-numeric: tabular-nums; }
.nf-headline-only-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border: 1px solid var(--border-subtle, rgba(127,127,127,0.35));
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: transparent;
  white-space: nowrap;
}

.nf-card-title {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--text-primary, #e2e8f0);
  text-decoration: none;
}
.nf-card-title:hover { color: var(--accent, #22c55e); }

/* ══ AI Chat — anchored top of left column ═══════════════════════════════════ */
.nf-chat {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.08));
  background: var(--bg-elevated, #151b26);
}

.nf-chat-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: transparent;
  border: none;
  color: var(--text-secondary, #94a3b8);
  font-size: 11.5px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s;
}
.nf-chat-toggle:hover { color: var(--accent, #22c55e); }
.nf-chat-toggle svg { opacity: 0.7; flex-shrink: 0; }
.nf-chat-toggle span:first-of-type { flex: 1; }
.nf-chat-toggle-caret { font-size: 8px; opacity: 0.5; }

.nf-chat-panel {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-light, rgba(255,255,255,0.06));
}

.nf-chat-msgs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 4px;
  overflow-y: auto;
  max-height: 260px;
}
.nf-chat-msgs:empty { display: none; }
.nf-chat-msgs::-webkit-scrollbar { width: 4px; }
.nf-chat-msgs::-webkit-scrollbar-thumb { background: var(--scrollbar, rgba(255,255,255,0.12)); border-radius: 2px; }

.nf-chat-msg { display: flex; flex-direction: column; }
.nf-chat-msg--user { align-items: flex-end; }
.nf-chat-msg--ai   { align-items: flex-start; }

.nf-chat-bubble {
  max-width: 88%;
  padding: 7px 11px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.55;
}
.nf-chat-msg--user .nf-chat-bubble {
  background: var(--accent, #22c55e);
  color: #000;
  border-bottom-right-radius: 3px;
}
.nf-chat-msg--ai .nf-chat-bubble {
  background: var(--bg-card, rgba(255,255,255,0.06));
  color: var(--text-primary, #e2e8f0);
  border: 1px solid var(--border-light, rgba(255,255,255,0.08));
  border-bottom-left-radius: 3px;
}
.nf-chat-msg--ai .nf-chat-bubble ul { margin: 4px 0 4px 16px; padding: 0; }
.nf-chat-msg--ai .nf-chat-bubble li { margin-bottom: 2px; }

.nf-chat-bubble--typing { display: flex; align-items: center; gap: 4px; padding: 10px 14px; min-height: 36px; }
@keyframes nf-dot-bounce {
  0%, 80%, 100% { transform: translateY(0);   opacity: 0.4; }
  40%            { transform: translateY(-4px); opacity: 1;   }
}
.nf-chat-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted, #64748b); animation: nf-dot-bounce 1.2s ease-in-out infinite; }
.nf-chat-dot:nth-child(2) { animation-delay: 0.2s; }
.nf-chat-dot:nth-child(3) { animation-delay: 0.4s; }

.nf-chat-input-row { display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px; }
.nf-chat-input {
  flex: 1; resize: none; overflow: hidden;
  min-height: 34px; max-height: 120px;
  padding: 7px 11px;
  border-radius: 18px;
  border: 1px solid var(--border-medium, rgba(255,255,255,0.13));
  background: var(--bg-base, #0f1117);
  color: var(--text-primary, #e2e8f0);
  font-family: var(--font-family, system-ui, sans-serif);
  font-size: 12.5px; line-height: 1.45;
  outline: none; transition: border-color 0.15s; overflow-y: auto;
}
.nf-chat-input::placeholder { color: var(--text-muted, #64748b); }
.nf-chat-input:focus { border-color: var(--accent, #22c55e); }
.nf-chat-send {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--accent, #22c55e); color: #000;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s, transform 0.1s; margin-bottom: 1px;
}
.nf-chat-send:hover:not(:disabled) { background: #16a34a; transform: scale(1.06); }
.nf-chat-send:active:not(:disabled) { transform: scale(0.94); }
.nf-chat-clear {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border-medium, rgba(255,255,255,0.13));
  background: transparent; color: var(--text-muted, #64748b);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.15s; margin-bottom: 1px;
}
.nf-chat-clear:hover { border-color: #f87171; color: #f87171; transform: scale(1.06); }
.nf-chat-clear:active { transform: scale(0.94); }

/* ══ Right column — Intelligence panel ═══════════════════════════════════════ */
.nf-right-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar, rgba(255,255,255,0.12)) transparent;
}
.nf-right-col::-webkit-scrollbar { width: 5px; }
.nf-right-col::-webkit-scrollbar-track { background: transparent; }
.nf-right-col::-webkit-scrollbar-thumb { background: var(--scrollbar, rgba(255,255,255,0.12)); border-radius: 3px; }

/* ── Morning Briefing card ──────────────────────────────────────────────────── */
.nf-morning-brief {
  padding: 16px 20px;
  border-bottom: none;
  flex-shrink: 0;
}
.nf-morning-brief:empty { display: none; }

/* ── Intel sub-tabs (7-Day Themes / Signal Heatmap) ────────────────────────── */
.nf-intel-tabs-box {
  border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.08));
  flex-shrink: 0;
}
.nf-intel-tab-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.08));
}
.nf-intel-tabs {
  display: flex;
  gap: 0;
}
.nf-intel-tab {
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.nf-intel-tab:hover { color: var(--text-secondary, #94a3b8); }
.nf-intel-tab.active {
  color: var(--accent, #22c55e);
  border-bottom-color: var(--accent, #22c55e);
}
.nf-intel-pane--hidden { display: none; }
#nf-pane-heatmap { padding: 16px 20px; }

/* Shared theme-card interaction and title styles */
.nf-theme-card--clickable { cursor: pointer; }
.nf-theme-card--clickable:hover {
  border-color: var(--border-medium, rgba(255,255,255,0.16));
  background: var(--bg-elevated, rgba(255,255,255,0.055));
}
.nf-theme-card--active {
  border-color: var(--accent, #22c55e) !important;
  background: rgba(34,197,94,0.06) !important;
}

.nf-theme-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary, #e2e8f0);
  flex: 1;
}
/* Sentiment chart */
.nf-sentiment-chart {
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow-y: auto;
  flex: 1;
}
.nf-sentiment-chart::-webkit-scrollbar { width: 4px; }
.nf-sentiment-chart::-webkit-scrollbar-thumb { background: var(--scrollbar, rgba(255,255,255,0.1)); border-radius: 2px; }

.nf-sent-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nf-sent-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #94a3b8);
  width: 78px;
  flex-shrink: 0;
  line-height: 1.2;
}

.nf-sent-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nf-sent-bar {
  display: flex;
  height: 10px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--border-light, rgba(255,255,255,0.06));
}
.nf-bar-bull { background: #4ade80; transition: width 0.4s ease; }
.nf-bar-neu  { background: #64748b; transition: width 0.4s ease; }
.nf-bar-bear { background: #f87171; transition: width 0.4s ease; }

.nf-sent-pcts {
  display: flex;
  gap: 8px;
  font-size: 9px;
  align-items: center;
}
.nf-pct-bull { color: #4ade80; }
.nf-pct-neu  { color: #64748b; }
.nf-pct-bear { color: #f87171; }
.nf-signals  { color: var(--text-muted, #64748b); margin-left: auto; }

/* Summary */
.nf-summary-body {
  flex: 1;
  overflow-y: auto;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-secondary, #94a3b8);
}
.nf-summary-body p { margin: 0 0 10px; }
.nf-summary-body::-webkit-scrollbar { width: 4px; }
.nf-summary-body::-webkit-scrollbar-thumb { background: var(--scrollbar, rgba(255,255,255,0.1)); border-radius: 2px; }

/* Utility */
.nf-loading { color: var(--text-muted, #64748b); font-size: 12px; padding: 12px 0; }
.nf-empty   { color: var(--text-muted, #64748b); font-size: 12px; padding: 12px 0; }
.nf-scroll-sentinel { height: 1px; width: 100%; flex-shrink: 0; pointer-events: none; }
.nf-error   { color: #f87171; font-size: 12px; padding: 12px 0; }

/* ══ Light theme overrides ════════════════════════════════════════════════════ */
[data-theme="light"] .nf-root {
  background: #f8fafc;
  color: #1e293b;
}
[data-theme="light"] .nf-filters {
  background: #ffffff;
  border-bottom-color: #e2e8f0;
}
/* Base/.active light declarations removed — superseded by the Gen 4 light block near
   the end of this file. This :hover rule is still live: no later light-theme .nf-chip
   hover rule exists, and it outranks the unprefixed .nf-chip:hover on specificity. */
[data-theme="light"] .nf-chip:hover { border-color: #16a34a; color: #16a34a; }
[data-theme="light"] .nf-list-col {
  background: #ffffff;
  border-right-color: #e2e8f0;
}
[data-theme="light"] .nf-list-header { border-bottom-color: #e2e8f0; }
[data-theme="light"] .nf-live-text { color: #1e293b; }
[data-theme="light"] .nf-count-chip { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }
[data-theme="light"] .nf-card {
  background: #ffffff;
  border-bottom-color: #f1f5f9;
}
[data-theme="light"] .nf-card:hover { background: #f8fafc; }
[data-theme="light"] .nf-card-title { color: #1e293b; }
[data-theme="light"] .nf-source { color: #334155; }
[data-theme="light"] .nf-sent-bar { background: #f1f5f9; }
[data-theme="light"] .nf-summary-body { color: #475569; }
[data-theme="light"] .nf-theme-card--clickable:hover { background: #f8fafc; border-color: #cbd5e1; }
[data-theme="light"] .nf-theme-title { color: #1e293b; }
[data-theme="light"] .nf-chat {
  background: #ffffff;
  border-bottom-color: #e2e8f0;
}
[data-theme="light"] .nf-chat-toggle { color: #64748b; }
[data-theme="light"] .nf-chat-toggle:hover { color: #16a34a; }
[data-theme="light"] .nf-chat-panel { border-top-color: #e2e8f0; }
[data-theme="light"] .nf-chat-input {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #1e293b;
}
[data-theme="light"] .nf-chat-input:focus { border-color: #16a34a; }
[data-theme="light"] .nf-chat-msg--ai .nf-chat-bubble {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #1e293b;
}
[data-theme="light"] .nf-chat-msg--user .nf-chat-bubble { background: #16a34a; color: #fff; }
[data-theme="light"] .nf-chat-send { background: #16a34a; }
[data-theme="light"] .nf-chat-send:hover:not(:disabled) { background: #15803d; }
[data-theme="light"] .nf-chat-clear { border-color: #cbd5e1; color: #94a3b8; }
[data-theme="light"] .nf-chat-clear:hover { border-color: #e11d48; color: #e11d48; }
/* ══ Zen theme overrides ═════════════════════════════════════════════════════ */
/* (The former [data-theme="zen"] .nf-chip.active rule was removed: it set
   background: var(--accent), which is exactly what the live Gen 4 .nf-chip.active
   rule already resolves to in zen. Redundant, so zen now inherits the base rule.) */

/* ══ Cluster heatmap ═════════════════════════════════════════════════════════ */
.nf-heatmap-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.nf-hm-table {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}

.nf-hm-header-row,
.nf-hm-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.nf-hm-row-label {
  font-size: var(--font-base, 12px);
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  line-height: 1.4;
  flex: 0 0 30%;
  width: 30%;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  cursor: default;
  padding-right: 8px;
  box-sizing: border-box;
}
.nf-hm-row-label--clickable {
  cursor: pointer;
  border-radius: 4px;
  padding-left: 4px;
  transition: color 0.15s, background 0.15s;
}
.nf-hm-row-label--clickable:hover {
  color: var(--accent, #22c55e);
  background: var(--accent-dim, rgba(74,222,128,0.08));
}
.nf-hm-row-label--active {
  color: var(--accent, #22c55e);
  background: var(--accent-dim, rgba(74,222,128,0.12));
  font-weight: 700;
}
[data-theme="light"] .nf-hm-row-label--clickable:hover { color: #16a34a; background: rgba(22,128,60,0.07); }
[data-theme="light"] .nf-hm-row-label--active { color: #16a34a; background: rgba(22,128,60,0.1); }

.nf-hm-cells {
  display: flex;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.nf-hm-col-head {
  flex: 1;
  min-width: 0;
  font-size: var(--font-sm, 11px);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--text-secondary, #94a3b8);
  text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.08));
  transition: color 0.15s;
}
.nf-hm-col-head.nf-hm-col-active {
  color: var(--accent, #22c55e);
  border-bottom-color: var(--accent, #22c55e);
}

.nf-hm-cell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 6px 2px;
  border-radius: 6px;
  cursor: default;
  transition: opacity 0.15s, filter 0.15s;
  min-width: 0;
}
.nf-hm-cell.nf-hm-dim { opacity: 0.35; }
.nf-hm-cell:hover { filter: brightness(0.92); }

.nf-hm-arrows {
  font-size: var(--font-md, 13px);
  font-weight: 700;
  line-height: 1;
}
.nf-hm-word {
  font-size: var(--font-base, 12px);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  word-break: break-word;
}

/* ── Cell colour palettes (dark default) ─────────────────────────── */
.nf-hm-sbull { background: rgba(34,197,94,0.22);  }
.nf-hm-sbull .nf-hm-arrows, .nf-hm-sbull .nf-hm-word { color: #4ade80; }
.nf-hm-bull  { background: rgba(34,197,94,0.11);  }
.nf-hm-bull  .nf-hm-arrows, .nf-hm-bull  .nf-hm-word { color: #86efac; }
.nf-hm-neub  { background: rgba(250,204,21,0.10); }
.nf-hm-neub  .nf-hm-arrows, .nf-hm-neub  .nf-hm-word { color: #fde047; }
.nf-hm-neu   { background: rgba(100,116,139,0.12);}
.nf-hm-neu   .nf-hm-arrows, .nf-hm-neu   .nf-hm-word { color: #94a3b8; }
.nf-hm-bear  { background: rgba(248,113,113,0.11);}
.nf-hm-bear  .nf-hm-arrows, .nf-hm-bear  .nf-hm-word { color: #fca5a5; }
.nf-hm-sbear { background: rgba(248,113,113,0.22);}
.nf-hm-sbear .nf-hm-arrows, .nf-hm-sbear .nf-hm-word { color: #f87171; }

/* ── Light-mode overrides ─────────────────────────────────────────── */
[data-theme="light"] .nf-hm-sbull { background: #dcfce7; }
[data-theme="light"] .nf-hm-sbull .nf-hm-arrows,
[data-theme="light"] .nf-hm-sbull .nf-hm-word { color: #166534; }
[data-theme="light"] .nf-hm-bull  { background: #f0fdf4; }
[data-theme="light"] .nf-hm-bull  .nf-hm-arrows,
[data-theme="light"] .nf-hm-bull  .nf-hm-word { color: #16a34a; }
[data-theme="light"] .nf-hm-neub  { background: #fefce8; }
[data-theme="light"] .nf-hm-neub  .nf-hm-arrows,
[data-theme="light"] .nf-hm-neub  .nf-hm-word { color: #a16207; }
[data-theme="light"] .nf-hm-neu   { background: #f8fafc; }
[data-theme="light"] .nf-hm-neu   .nf-hm-arrows,
[data-theme="light"] .nf-hm-neu   .nf-hm-word { color: #64748b; }
[data-theme="light"] .nf-hm-bear  { background: #fff1f2; }
[data-theme="light"] .nf-hm-bear  .nf-hm-arrows,
[data-theme="light"] .nf-hm-bear  .nf-hm-word { color: #e11d48; }
[data-theme="light"] .nf-hm-sbear { background: #ffe4e6; }
[data-theme="light"] .nf-hm-sbear .nf-hm-arrows,
[data-theme="light"] .nf-hm-sbear .nf-hm-word { color: #be123c; }
[data-theme="light"] .nf-hm-row-label { color: #334155; }

.nf-hm-cell {
  position: relative;
}
.nf-hm-cell[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: normal;
  width: 220px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-secondary, #94a3b8);
  background: var(--bg-elevated, #1e2533);
  border: 1px solid var(--border-medium, rgba(255,255,255,0.15));
  border-radius: 6px;
  padding: 6px 9px;
  pointer-events: none;
  z-index: 100;
  word-break: break-word;
}
.nf-hm-cell[data-tip]:hover::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--border-medium, rgba(255,255,255,0.15));
  z-index: 101;
  pointer-events: none;
}
[data-theme="light"] .nf-hm-cell[data-tip]:hover::after {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #334155;
}
[data-theme="light"] .nf-hm-cell[data-tip]:hover::before {
  border-top-color: #e2e8f0;
}

/* ══ Stories of the Week box — full masonry content ════════════════════════ */
.nf-stories-week-label {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted, #64748b);
  margin-left: auto;
}
.nf-stories-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nf-sv-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}
.nf-sv-bull { background: rgba(74,222,128,0.13); color: #4ade80; }
.nf-sv-bear { background: rgba(248,113,113,0.13); color: #f87171; }
.nf-sv-mix  { background: rgba(148,163,184,0.13); color: #94a3b8; }
[data-theme="light"] .nf-sv-bull { background: #dcfce7; color: #15803d; }
[data-theme="light"] .nf-sv-bear { background: #fee2e2; color: #dc2626; }
[data-theme="light"] .nf-sv-mix  { background: #f1f5f9; color: #475569; }

.nf-sb-wrap {
  display: inline-block;
  width: 52px;
  height: 4px;
  border-radius: 2px;
  background: rgba(248,113,113,0.25);
  flex-shrink: 0;
  overflow: hidden;
  vertical-align: middle;
}
.nf-sb-fill {
  display: block;
  height: 100%;
  background: #4ade80;
  border-radius: 2px;
  transition: width 0.3s;
}
[data-theme="light"] .nf-sb-wrap  { background: rgba(220,38,38,0.15); }
[data-theme="light"] .nf-sb-fill  { background: #16a34a; }

/* ── stories/theme classes defined above in layout section ───────────────── */

/* ══ Story filter status badge ════════════════════════════════════════════ */
.nf-filter-status {
  display: none;
  align-items: center;
}
.nf-sfb-icon { font-size: 12px; line-height: 1; }
.nf-sfb-count {
  font-size: 10px;
  color: var(--text-muted, #64748b);
  background: rgba(148,163,184,0.1);
  border-radius: 8px;
  padding: 1px 6px;
}
.nf-sfb-clear {
  background: none;
  border: none;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  font-size: 12px;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.15s;
}
.nf-sfb-clear:hover { color: #f87171; }


/* ══ AI mode toggle ════════════════════════════════════════════════════════ */
.nf-chat-mode-row {
  display: flex;
  align-items: center;
  padding: 5px 10px 0;
}
.nf-chat-mode-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--border-medium, rgba(255,255,255,0.13));
  background: transparent;
  color: var(--text-muted, #64748b);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.nf-chat-mode-btn:hover { border-color: var(--accent, #22c55e); color: var(--text-secondary, #94a3b8); }
.nf-chat-mode-btn.nf-mode-open { border-color: #3b82f6; color: #60a5fa; background: rgba(59,130,246,0.08); }
.nf-mode-icon { font-size: 11px; line-height: 1; }
.nf-mode-label { font-weight: 600; letter-spacing: 0.03em; }
[data-theme="light"] .nf-chat-mode-btn { border-color: #cbd5e1; color: #64748b; }
[data-theme="light"] .nf-chat-mode-btn:hover { border-color: #16a34a; color: #374151; }
[data-theme="light"] .nf-chat-mode-btn.nf-mode-open { border-color: #3b82f6; color: #2563eb; background: #eff6ff; }

/* ── Morning brief padding override for All view (overview table) ─────────── */
.nf-morning-brief { padding: 0; }

/* ── Commodity sections (All view) ───────────────────────────────────────── */
.nf-comm-section {
  border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.08));
  padding-bottom: 4px;
}
.nf-comm-section:last-child { border-bottom: none; }
.nf-comm-anchor { height: 0; overflow: hidden; pointer-events: none; }
[data-theme="light"] .nf-comm-section { border-bottom-color: #f1f5f9; }


/* ═════════════════════════════════════════════════════════════════════════════
   News redesign v2 — left filter rail + live headlines + large theme desk
   Matches the three-zone mockup: filter rail / live feed / 7-day themes.
   ═════════════════════════════════════════════════════════════════════════════ */
body.news-mode::after { display: none !important; }

.nf-root {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg-base, #0f1117);
}

.nf-filters {
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 12px 14px;
  border-right: none;
  border-bottom: none;
  background: color-mix(in srgb, var(--bg-base, #0f1117) 88%, transparent);
  overflow: visible;
  flex-shrink: 0;
}

.nf-body {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(360px, 32vw) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
}

.nf-filter-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 0;
}

.nf-tag-group { margin-bottom: 0; }
.nf-date-group { margin-top: 0; }

.nf-filter-label {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary, #0f1621);
  margin: 0 0 8px;
  white-space: normal;
}

.nf-chip-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
}

.nf-market-chips,
.nf-tag-chips {
  display: contents;
}

.nf-tag-loading,
.nf-tag-empty {
  color: var(--text-muted, #94a3b8);
  font-size: 11px;
  font-style: italic;
}

/* Gen 2. The geometry below (height/padding/border-radius/font-size/line-height) is
   still live — the Gen 4 block near the end of this file declares none of it. The
   border/background/color declarations that used to sit here were superseded by
   Gen 4 and have been removed. */
.nf-chip,
.nf-tag-chip {
  height: 24px;
  padding: 0 11px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 22px;
}
.nf-chip:hover,
.nf-tag-chip:hover {
  border-color: var(--accent, #16a34a);
  color: var(--accent, #16a34a);
}
/* Active glow. Split so the commodity buttons use the theme-aware accent token while
   the topic tags keep their existing hardcoded shade unchanged. */
.nf-chip.active {
  box-shadow: 0 2px 8px var(--accent-glow);
}
.nf-tag-chip.active {
  box-shadow: 0 2px 8px rgba(22,163,74,0.22);
}

.nf-keyword-input {
  width: 100%;
  height: 30px;
  border-radius: 14px;
  border: 1px solid var(--border-light, rgba(148,163,184,0.25));
  padding: 0 13px;
  font-size: 12px;
  background: var(--bg-card, rgba(255,255,255,0.05));
  color: var(--text-primary, #e2e8f0);
}

.nf-filter-status {
  margin-top: 28px;
  display: none;
  justify-content: center;
  width: 100%;
}

.nf-list-col {
  width: auto;
  flex: unset;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: none;
  border-right: 1px solid var(--border-light, rgba(148,163,184,0.18));
  background: color-mix(in srgb, var(--bg-base, #0f1117) 92%, transparent);
}

/* Controls row: keyword search (left 50%) + date range (right 50%) */
.nf-list-controls-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nf-list-controls-row .nf-keyword-input {
  flex: 1 1 0;
  min-width: 0;
  width: auto;                    /* cancel Gen 1 width:340px */
  transition: border-color 0.15s; /* cancel Gen 1 width animation */
}
.nf-list-controls-row .nf-keyword-input:focus {
  width: auto;                    /* cancel Gen 1 width:400px */
}
.nf-list-controls-row .nf-date-range-row {
  flex: 1 1 0;
  min-width: 0;
  flex-wrap: nowrap;              /* cancel Gen 1 flex-wrap:wrap */
  gap: 4px;
}
.nf-list-controls-row .nf-date-text-input {
  flex: 1 1 0;
  min-width: 0;                   /* cancel Gen 1 min-width:72px */
}
/* Scoped to outrank the rule above (written for the never-shipped standalone
   .nf-date-range-row generation) so the live start/end inputs, now nested one
   level deeper inside .nf-date-trigger, keep their DD-MMM-YYYY sizing instead
   of collapsing to flex-basis 0. */
.nf-list-controls-row .nf-date-trigger .nf-date-text-input {
  flex: 0 1 auto;
  width: 9ch;
  min-width: 64px;
}

/* ── Date picker control ─────────────────────────────────────────────────────── */
.nf-date-control {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
}
.nf-date-trigger {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 4px 0 10px;
  border: 1px solid var(--border-light, rgba(148,163,184,0.22));
  border-radius: 6px;
  background: var(--bg-input, rgba(255,255,255,0.05));
  color: var(--text-secondary, #94a3b8);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  transition: border-color 0.15s;
}
.nf-date-trigger:hover,
.nf-date-trigger:focus-within { border-color: var(--accent, #22c55e); }
.nf-date-trigger-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  padding: 0;
  border-radius: 4px;
  background: var(--bg-elevated, rgba(255,255,255,0.06));
  color: var(--text-muted, #64748b);
  cursor: pointer;
  font: inherit;
}

.nf-date-presets { display: flex; gap: 4px; flex-shrink: 0; }
.nf-date-preset {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border-light, rgba(148,163,184,0.22));
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted, #64748b);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
}
.nf-date-preset:hover { border-color: var(--accent, #22c55e); color: var(--text-secondary, #94a3b8); }
.nf-date-preset.is-active {
  background: var(--accent, #22c55e);
  border-color: var(--accent, #22c55e);
  color: var(--bg-card, #0f1117);
}

.nf-date-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 500;
  width: 268px;
  background: var(--bg-card, rgba(30,41,59,0.98));
  border: 1px solid var(--border-light, rgba(148,163,184,0.18));
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.32);
  padding: 10px;
  user-select: none;
}
.nf-date-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.nf-date-month-label {
  height: 26px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: 5px;
  background: var(--bg-elevated, rgba(255,255,255,0.06));
  color: var(--text-primary, #f1f5f9);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.nf-date-nav { display: flex; gap: 4px; }
.nf-date-nav-btn {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-light, rgba(148,163,184,0.18));
  border-radius: 5px;
  background: transparent;
  color: var(--text-secondary, #94a3b8);
  font-size: 16px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.nf-date-nav-btn:hover:not(:disabled) { border-color: var(--accent, #22c55e); color: var(--text-primary, #f1f5f9); }
.nf-date-nav-btn:disabled { opacity: 0.3; cursor: default; }

.nf-date-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.nf-date-weekdays span {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  padding: 2px 0;
}

.nf-date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.nf-date-day {
  display: flex; align-items: center; justify-content: center;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary, #f1f5f9);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  padding: 0;
}
.nf-date-day:hover:not(.is-disabled):not(.is-selected) { background: var(--bg-elevated, rgba(255,255,255,0.06)); }
.nf-date-day--empty { background: transparent; cursor: default; pointer-events: none; }
.nf-date-day.is-disabled { color: var(--text-muted, #64748b); opacity: 0.35; cursor: default; pointer-events: none; }
.nf-date-day.is-today { color: var(--accent, #22c55e); font-weight: 700; }
.nf-date-day.is-in-range {
  background: var(--accent-dim, rgba(34,197,94,0.12));
  border-radius: 0;
  color: var(--text-primary, #f1f5f9);
}
.nf-date-day.is-selected {
  background: var(--accent, #22c55e);
  color: var(--bg-card, #0f1117);
  font-weight: 700;
  border-radius: 6px;
}
.nf-date-day.is-range-start:not(.is-range-end) { border-radius: 6px 0 0 6px; }
.nf-date-day.is-range-end:not(.is-range-start)  { border-radius: 0 6px 6px 0; }
.nf-date-day.is-selected.is-range-start.is-range-end { border-radius: 6px; }

[data-theme="light"] .nf-date-trigger { background: #f8fafc; border-color: #dbe3ef; color: #374151; }
[data-theme="light"] .nf-date-trigger:hover { border-color: #16a34a; }
[data-theme="light"] .nf-date-trigger-icon { background: #f1f5f9; color: #64748b; }
[data-theme="light"] .nf-date-preset { border-color: #dbe3ef; color: #64748b; }
[data-theme="light"] .nf-date-preset:hover { border-color: #16a34a; color: #374151; }
[data-theme="light"] .nf-date-preset.is-active { background: #16a34a; border-color: #16a34a; color: var(--bg-card, #fff); }
[data-theme="light"] .nf-date-popover { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
[data-theme="light"] .nf-date-month-label { background: #f1f5f9; color: #1e293b; }
[data-theme="light"] .nf-date-nav-btn { border-color: #e2e8f0; color: #64748b; }
[data-theme="light"] .nf-date-nav-btn:hover:not(:disabled) { border-color: #16a34a; color: #374151; }
[data-theme="light"] .nf-date-weekdays span { color: #94a3b8; }
[data-theme="light"] .nf-date-day { color: #1e293b; }
[data-theme="light"] .nf-date-day:hover:not(.is-disabled):not(.is-selected) { background: #f1f5f9; }
[data-theme="light"] .nf-date-day.is-disabled { color: #94a3b8; }
[data-theme="light"] .nf-date-day.is-today { color: #16a34a; }
[data-theme="light"] .nf-date-day.is-in-range { background: rgba(22,163,74,0.10); }
[data-theme="light"] .nf-date-day.is-selected { background: #16a34a; color: var(--bg-card, #fff); }

.nf-chat {
  order: 0;
  min-height: 76px;
  border-bottom: 1px solid var(--border-light, rgba(148,163,184,0.18));
  background: transparent;
}
.nf-chat-toggle {
  min-height: 76px;
  padding: 0 14px;
  justify-content: flex-start;
  font-size: 12px;
  letter-spacing: 0.03em;
}
.nf-chat-panel { border-top: 1px solid var(--border-light, rgba(148,163,184,0.16)); }

.nf-list-header {
  order: 1;
  min-height: 56px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border-light, rgba(148,163,184,0.16));
  background: transparent;
}
.nf-list { order: 2; flex: 1; min-height: 0; }

.nf-live-text {
  font-size: 12px;
  letter-spacing: 0.08em;
}
.nf-count-chip {
  border-radius: 13px;
  padding: 4px 10px;
  font-size: 11px;
  background: rgba(148,163,184,0.13);
}
.nf-card {
  padding: 12px 14px 14px;
  border-bottom: 1px solid var(--border-light, rgba(148,163,184,0.16));
  background: transparent;
}
.nf-card-meta {
  margin-bottom: 5px;
  gap: 7px;
}
.nf-favicon { width: 14px; height: 14px; }
.nf-source {
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 800;
}
.nf-date { font-size: 11px; }
.nf-card-title {
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 650;
}

.nf-right-col {
  min-width: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: none;
  background: color-mix(in srgb, var(--bg-base, #0f1117) 92%, transparent);
}
.nf-intel-tabs-box {
  flex: 1;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-bottom: none;
}
.nf-intel-tab-bar {
  min-height: 50px;
  flex-shrink: 0;
  padding: 0 20px;
  border-bottom: 1px solid var(--border-light, rgba(148,163,184,0.16));
}
.nf-intel-tab {
  padding: 17px 15px 13px;
  font-size: 11px;
  letter-spacing: 0.10em;
}
.nf-stories-week-label {
  font-size: 11px;
  color: var(--text-muted, #64748b);
}
.nf-intel-pane {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
}
.nf-intel-pane--hidden { display: none; }

.nf-theme-title { font-size: 13px; }

[data-theme="light"] .nf-root {
  color: #0f172a;
  background: transparent;
}
[data-theme="light"] .nf-filters,
[data-theme="light"] .nf-list-col,
[data-theme="light"] .nf-right-col {
  background: #ffffff;
  border-color: var(--border-light, #e2e5ec);
}
[data-theme="light"] .nf-filter-label { color: #0f1621; }
/* (Gen 3 light .nf-chip/.nf-tag-chip base and .active rules removed — every property
   they set is redeclared at the same specificity by the Gen 4 light block below.) */
[data-theme="light"] .nf-keyword-input { background: #f8fafc; border-color: #dbe3ef; color: #0f172a; }
[data-theme="light"] .nf-stories-week-label { color: #94a3b8; }
[data-theme="light"] .nf-chat { border-bottom-color: var(--border-light, #e2e5ec); }
[data-theme="light"] .nf-list-header,
[data-theme="light"] .nf-intel-tab-bar,
[data-theme="light"] .nf-card { border-color: #e5e7eb; }
[data-theme="light"] .nf-source { color: #334155; }
[data-theme="light"] .nf-card-title { color: #0f172a; }
[data-theme="light"] .nf-card-title:hover { color: #16a34a; }




/* ══ News page refinement — header status, ASK AI container, editorial themes ══ */
.nf-chat {
  min-height: auto;
  background: transparent;
}
.nf-chat-header {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border-light, rgba(148,163,184,0.16));
}
.nf-chat-toggle {
  width: auto;
  min-height: 0;
  flex: 0 0 auto;
  padding: 0;
  justify-content: flex-start;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.nf-chat-toggle span:first-of-type { flex: 0 0 auto; }
.nf-chat-toggle-caret { margin-left: 4px; }
.nf-chat-panel {
  border-top: none;
  background: transparent;
}
/* Input row lives in the header — always visible */
.nf-chat-input-row {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  align-items: center;
}
.nf-chat-field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  height: var(--nf-control-height, 38px);
  box-sizing: border-box;
  padding-left: 12px;
  border: 1px solid var(--border-medium, rgba(255,255,255,0.13));
  border-radius: 19px;
  background: var(--bg-base, #0f1117);
  transition: border-color 0.15s;
}
.nf-chat-field:focus-within { border-color: var(--accent, #22c55e); }
.nf-chat-field .nf-chat-toggle {
  border-right: 1px solid var(--border-light, rgba(148,163,184,0.18));
  padding-right: 10px;
}
.nf-chat-header .nf-chat-input {
  min-width: 0;
  max-height: 38px;
  border: none;
  border-radius: 0 19px 19px 0;
  background: transparent;
  padding-left: 10px;
}
.nf-chat-header .nf-chat-input:focus { border-color: transparent; }
[data-theme="light"] .nf-chat-field {
  background: #f8fafc;
  border-color: #cbd5e1;
}
[data-theme="light"] .nf-chat-field:focus-within { border-color: #16a34a; }
[data-theme="light"] .nf-chat-header .nf-chat-input {
  background: transparent;
}
.nf-chat-mode-row { display: none; }
.nf-chat-mode-btn {
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 14px;
}

.nf-count-chip--theme {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: min(68%, 520px);
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary, #94a3b8);
  background: rgba(34,197,94,0.06);
  border-color: rgba(34,197,94,0.25);
  border-radius: 16px;
  padding: 4px 9px;
  font-size: 11px;
  line-height: 1.3;
}
.nf-count-chip--theme strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary, #e2e8f0);
  font-weight: 700;
}
.nf-count-chip--theme .nf-theme-filter-text { flex-shrink: 0; }
.nf-count-chip--theme .nf-sfb-count { flex-shrink: 0; }
.nf-count-chip--theme .nf-sfb-clear { flex-shrink: 0; }
[data-theme="light"] .nf-count-chip--theme {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #475569;
}
[data-theme="light"] .nf-count-chip--theme strong { color: #0f172a; }

/* Shared theme-card presentation overrides */
.nf-theme-title {
  font-size: 16px;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.nf-theme-card--clickable:hover {
  background: transparent;
  border-top-color: var(--accent, #22c55e);
}
.nf-theme-card--active {
  background: rgba(34,197,94,0.045) !important;
  border-top-color: var(--accent, #22c55e) !important;
  outline: 1px solid rgba(34,197,94,0.40);
  outline-offset: 6px;
}
.nf-sv-mix { background: rgba(250,204,21,0.16); color: #eab308; }
[data-theme="light"] .nf-sv-mix { background: #fef9c3; color: #a16207; }

/* ══ News card-shell — EB Commodity card equivalent ════════════════════════ */
.nf-root {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  background: transparent;
  min-height: 0;
  overflow: hidden;
}
.nf-body { gap: 10px; min-height: 0; }
.nf-filters {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--bg-elevated);
  box-shadow: var(--card-shadow);
  overflow-y: auto;
  overflow-x: hidden;
}
.nf-list-col {
  gap: 10px;
  background: transparent;
  border: none;
  min-height: 0;
}
.nf-right-col {
  gap: 10px;
  background: transparent;
  border: none;
  min-height: 0;
  overflow: visible;
}
.nf-headlines-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--bg-elevated);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.nf-headlines-shell .nf-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.nf-list-keyword-wrap {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--bg-elevated);
  box-shadow: var(--card-shadow);
  padding: 8px 12px;
  overflow: visible;
  flex-shrink: 0;
}
.nf-intel-tabs-box {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--bg-elevated);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
/* ASK AI tab pane — flex:1 makes it fill nf-intel-tabs-box as a flex child */
#nf-chat {
  flex: 1;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}
/* display:flex only when visible — :not() means .nf-intel-pane--hidden { display:none }
   still wins cleanly (the :not() selector simply does not match when hidden) */
#nf-chat:not(.nf-intel-pane--hidden) {
  display: flex;
}
/* Chat panel fills the pane height; msgs scroll within it */
#nf-chat .nf-chat-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
#nf-chat .nf-chat-msgs {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}
/* Chat header promoted into tab-bar: fill left, suppress own padding/border */
.nf-intel-tab-bar .nf-chat-header {
  flex: 1;
  min-width: 0;
  border-bottom: none;
  padding: 0;
}
/* Neutralize Gen 2 column background/border rules — containers are now transparent */
[data-theme="light"] .nf-list-col,
[data-theme="light"] .nf-right-col { background: transparent; border: none; }
[data-theme="light"] .nf-filters,
[data-theme="light"] .nf-headlines-shell,
[data-theme="light"] .nf-list-keyword-wrap,
[data-theme="light"] .nf-intel-tabs-box {
  background: var(--bg-elevated, #ffffff);
  border-color: var(--border-light, #e2e5ec);
}

/* ── Inner theme card blend: dark mode ───────────────────────────────────── */
[data-theme="dark"] .nf-theme-card-v2 {
  background: color-mix(in srgb, var(--bg-elevated) 85%, var(--bg-page));
  border-color: var(--border-light);
}
[data-theme="dark"] .nf-theme-summary-card {
  border-color: var(--border-light);
}
[data-theme="dark"] .nf-theme-summary-body {
  background: color-mix(in srgb, var(--bg-elevated) 90%, var(--bg-page));
}
/* ── Zen theme card overrides ─────────────────────────────────────────────── */
[data-theme="zen"] .nf-theme-card-v2 {
  background: color-mix(in srgb, var(--bg-elevated) 85%, var(--bg-page));
  border-color: var(--border-light);
}
[data-theme="zen"] .nf-theme-summary-card {
  border-color: var(--border-light);
}
[data-theme="zen"] .nf-theme-summary-header--bull {
  background: rgba(163,196,118,0.10);
  border-bottom-color: rgba(163,196,118,0.20);
}
[data-theme="zen"] .nf-theme-summary-header--bear {
  background: rgba(178,100,100,0.10);
  border-bottom-color: rgba(178,100,100,0.20);
}
[data-theme="zen"] .nf-theme-summary-header--mix {
  background: rgba(201,168,76,0.10);
  border-bottom-color: rgba(201,168,76,0.20);
}
/* (Zen .nf-theme-summary-verdict / -driver overrides removed with the two-row header
   redesign — same reason as the dark block above.) */
[data-theme="zen"] .nf-theme-summary-body    { background: color-mix(in srgb, var(--bg-elevated) 90%, var(--bg-page)); }
[data-theme="zen"] .nf-theme-summary-text    { color: var(--text-primary); }
[data-theme="zen"] .nf-theme-card-v2__title  { color: var(--text-primary); }
[data-theme="zen"] .nf-theme-card-v2__text,
[data-theme="zen"] .nf-mv-voice__view,
[data-theme="zen"] .nf-mv-context-card__text { color: var(--text-secondary); }
[data-theme="zen"] .nf-theme-card-v2--bull   { border-left-color: rgba(163,196,118,0.70); }
[data-theme="zen"] .nf-theme-card-v2--bear   { border-left-color: rgba(178,100,100,0.70); }
[data-theme="zen"] .nf-theme-card-v2--mix    { border-left-color: rgba(201,168,76,0.70); }

/* ── Zen summary chips: sentiment colors, muted for dark background ──────────── */
[data-theme="zen"] .nf-theme-summary-chip--bull {
  background: rgba(74, 222, 128, 0.14);
  border-color: rgba(74, 222, 128, 0.22);
  color: #4ade80;
}
[data-theme="zen"] .nf-theme-summary-chip--bear {
  background: rgba(248, 113, 113, 0.14);
  border-color: rgba(248, 113, 113, 0.22);
  color: #f87171;
}
[data-theme="zen"] .nf-theme-summary-chip--mix {
  background: rgba(201, 168, 76, 0.14);
  border-color: rgba(201, 168, 76, 0.22);
  color: #c9a84c;
}

/* ══ News typography + chips — match EB Commodity Selector ═════════════════ */

/* Section headings: font-size/weight/color from EB card heading system */
.nf-filter-label {
  font-size: var(--font-base);
  font-weight: var(--title-font-weight);
  color: var(--text-accent);
}
.nf-live-text { color: var(--text-accent); }
.nf-chat-toggle span:first-of-type { color: var(--text-accent); }
.nf-intel-tab.active {
  color: var(--text-accent);
  border-bottom-color: var(--text-accent);
}

/* Market/tag chips + date presets: match .eb-cs-pill exactly.
   This is the live generation for border/background/color/type. */
.nf-chip,
.nf-tag-chip,
.nf-date-preset {
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid var(--border-medium);
  background: transparent;
  color: var(--text-secondary);
}
/* Commodity buttons only — filled to match the Analytics commodity menu tabs via the
   shared token. Topic tags (.nf-tag-chip) and date presets keep the transparent
   background set above; do not fold this back into the grouped rule. */
.nf-chip {
  background: var(--ui-menu-tab-bg);
}
.nf-chip.active,
.nf-tag-chip.active,
.nf-date-preset.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-page);
  font-weight: 700;
}

/* Search input + date trigger: match Ask AI input surface */
.nf-keyword-input,
.nf-date-trigger {
  background: var(--bg-base, #0f1117);
  border-color: var(--border-light);
  border-radius: 18px;
}

/* Light-mode overrides — cascade after existing Gen 1/2 light rules */
[data-theme="light"] .nf-filter-label         { color: var(--text-accent); }
[data-theme="light"] .nf-live-text            { color: var(--text-accent); }
[data-theme="light"] .nf-chat-toggle span:first-of-type { color: var(--text-accent); }
[data-theme="light"] .nf-intel-tab.active     { color: var(--text-accent); border-bottom-color: var(--text-accent); }
[data-theme="light"] .nf-tag-chip             { background: transparent; border-color: var(--border-medium, #c8cdd8); color: var(--text-secondary); }
/* Split from .nf-tag-chip: the commodity buttons keep the shared filled token here,
   otherwise this light-theme rule would reset them back to transparent. */
[data-theme="light"] .nf-chip                 { background: var(--ui-menu-tab-bg);  border-color: var(--border-medium, #c8cdd8); color: var(--text-secondary); }
[data-theme="light"] .nf-chip.active,
[data-theme="light"] .nf-tag-chip.active      { background: var(--accent); border-color: var(--accent); color: var(--bg-page, #ffffff); }
[data-theme="light"] .nf-date-preset          { background: transparent; border-color: var(--border-medium, #c8cdd8); color: var(--text-secondary); }
[data-theme="light"] .nf-date-preset.is-active { background: var(--accent); border-color: var(--accent); color: var(--bg-page, #ffffff); }
[data-theme="light"] .nf-keyword-input        { background: var(--bg-input, #ffffff); border-color: var(--border-medium, #c8cdd8); }
[data-theme="light"] .nf-date-trigger         { background: var(--bg-input, #ffffff); border-color: var(--border-medium, #c8cdd8); }

/* Desktop News: normalize input heights ─────────────────────────────────── */
@media (min-width: 1181px) {
  body.news-mode {
    --nf-control-height: 34px;
  }
  /* Normalize all three controls to the same height */
  body.news-mode .nf-chat-input,
  body.news-mode .nf-keyword-input,
  body.news-mode .nf-date-trigger {
    height: var(--nf-control-height);
    min-height: var(--nf-control-height);
    max-height: var(--nf-control-height);
    box-sizing: border-box;
  }
}

/* ══ Tablet / iPad (≤ 1180px) — switch to vertical stack ═════════════════ */
@media (max-width: 1180px) {
  /* iPad/tablet: allow full News page to scroll vertically */
  body.news-mode .main-row {
    height: auto;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .news-panel.news-full,
  .news-panel-inner {
    height: auto;
    min-height: 100%;
    max-height: none;
    overflow: visible;
  }
  .nf-root {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100%;
    overflow: visible;
  }
  .nf-filters {
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 20px;
    padding: 12px 14px 14px;
    border-right: none;
    border-bottom: 1px solid var(--border-light, rgba(148,163,184,0.20));
    overflow: visible;
  }
  .nf-tag-group  { flex: 1 1 100%; margin-bottom: 2px; }
  .nf-date-group { flex: 1 1 300px; max-width: none; margin-top: 0; }
  .nf-filter-group { margin-bottom: 0; }
  .nf-filter-label { text-align: left; font-size: 11px; margin-bottom: 6px; }
  .nf-date-range-row { flex-wrap: wrap; }
  .nf-date-text-input { flex: 1 1 110px; min-width: 0; }
  .nf-date-apply-btn  { flex: 0 0 auto; }
  /* .nf-list-controls-row-scoped so this outranks both the bare
     .nf-date-text-input rule above AND the always-on, higher-specificity
     .nf-list-controls-row .nf-date-text-input rule near .nf-date-control's
     definition — both belong to a superseded generation of this control and
     would otherwise collapse the live start/end inputs to zero width. */
  .nf-list-controls-row .nf-date-trigger .nf-date-text-input { flex: 0 1 auto; width: 8ch; min-width: 56px; }
  .nf-body {
    display: flex;
    flex-direction: column;
    overflow: visible;
    gap: 0;
  }
  .nf-list-col {
    width: 100%;
    height: auto;
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-light, rgba(148,163,184,0.18));
  }
  .nf-list { max-height: 60vh; }
  /* card-shell responsive overrides */
  .nf-body { gap: 10px; }
  .nf-list-col { border: none; }
  .nf-headlines-shell { max-height: 60vh; }
  .nf-filters { border: 1px solid var(--border-light); }
  .nf-filter-label { font-size: var(--font-base); }
  .nf-list-controls-row { flex-wrap: wrap; gap: 6px; }
  .nf-list-controls-row .nf-keyword-input,
  .nf-list-controls-row .nf-date-range-row,
  .nf-list-controls-row .nf-date-control { flex: 1 1 100%; }
  .nf-right-col {
    width: 100%;
    height: auto;
    min-height: auto;
    overflow: visible;
  }
  .nf-intel-tabs-box {
    flex: unset;
    height: auto;
    min-height: 520px;
    overflow: visible;
  }
  .nf-intel-pane {
    overflow: visible;
    min-height: auto;
    flex: unset;
  }
}

/* ══ Tablet layout (768–1180px): two-column content grid ════════════════════ */
@media (max-width: 1180px) and (min-width: 768px) {
  /* Rearrange body as an explicit grid — wrappers are flattened with display:contents */
  .nf-body {
    display: grid;
    grid-template-columns: 42% 58%;
    gap: 10px;
    overflow: visible;
  }

  /* Collapse transparent wrappers so their children participate directly in .nf-body grid */
  .nf-list-col,
  .nf-right-col {
    display: contents;
  }

  /* Row 1: Tags filter — full width */
  .nf-filters {
    grid-row: 1;
    grid-column: 1 / -1;
    overflow: visible;
  }

  /* Row 2: Search / Date — full width */
  .nf-list-keyword-wrap {
    grid-row: 2;
    grid-column: 1 / -1;
    overflow: visible;
  }

  /* Row 3 left: Live Headlines — fixed height, independent scroll */
  .nf-headlines-shell {
    grid-row: 3;
    grid-column: 1;
    height: 70vh;
    max-height: 70vh;
    overflow: hidden;
  }

  .nf-headlines-shell .nf-list {
    max-height: none;
  }

  /* Row 3 right: 7-Day Themes / Signal Heatmap — fixed height, independent scroll */
  .nf-intel-tabs-box {
    grid-row: 3;
    grid-column: 2;
    height: 70vh;
    max-height: 70vh;
    min-height: unset;
    overflow: hidden;
  }

  .nf-intel-pane {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ══ Intel tab-bar: two-row layout on tablet/iPad (≤ 1180px) ══════════════
   Row 1: 7-DAY THEMES | SIGNAL HEATMAP
   Row 2: ASK AI input (full width)                                        */
@media (max-width: 1180px) {
  .nf-intel-tab-bar {
    flex-wrap: wrap;
    min-height: unset;
    padding: 0 14px;
  }
  .nf-intel-tabs {
    flex: 0 0 100%;
    border-bottom: 1px solid var(--border-light, rgba(148,163,184,0.16));
  }
  .nf-intel-tab-bar .nf-chat-header {
    flex: 0 0 100%;
    min-width: 0;
    padding: 6px 0;
  }
}

/* ══ Small mobile (≤ 720px) ══════════════════════════════════════════════ */
@media (max-width: 720px) {
  .nf-filters { padding: 10px 12px 12px; gap: 10px 14px; }
  .nf-date-range-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .nf-date-arrow { display: none; }
  .nf-date-text-input { flex: 1 1 auto; }
  .nf-date-apply-btn  { width: 100%; }
  .nf-date-control { flex-wrap: wrap; }
  .nf-date-trigger { flex: 1 1 100%; flex-wrap: wrap; height: auto; min-height: 30px; padding: 4px 6px 4px 10px; }
  /* .nf-list-controls-row-scoped for the same specificity reason as the
     ≤1180px block above — outranks the always-on rule near .nf-date-control's
     definition so the live inputs wrap cleanly instead of collapsing. */
  .nf-list-controls-row .nf-date-trigger .nf-date-text-input { flex: 1 1 40%; min-width: 56px; }
  .nf-date-presets { width: 100%; justify-content: space-between; }
  .nf-date-preset  { flex: 1; justify-content: center; }
  .nf-date-popover { right: 0; left: 0; width: auto; }
  .nf-list-keyword-wrap { padding: 8px 10px; }
  .nf-keyword-input { font-size: 14px; }
  .nf-card { padding: 10px 10px 12px; }
  .nf-card-title { font-size: 13px; }
  .nf-intel-tabs-box { min-height: 420px; }
  .nf-list-keyword-wrap { padding: 6px 10px; }
  .nf-headlines-shell { max-height: 55vh; }
}

/* ══ Theme list container and shared commodity label ══════════════════════ */
.nf-theme-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 16px 16px;
}
.nf-morning-brief > .nf-theme-list {
  padding-bottom: 0;
}
.nf-morning-brief .nf-theme-summary-card {
  margin-bottom: 0;
}
/* (.nf-theme-row-comm removed with the two-row header redesign — the standalone
   uppercase commodity label it styled is gone; the name is now part of the title.) */

/* Commodity icon in the News summary header.
   The artwork in /images is full-colour, so it is rendered as a plain <img> (see
   _commodityIconHtml in renderNewsFeed.js) rather than a CSS mask — a mask keeps only
   the source's shape and repaints it with currentColor, which reduced these to flat
   silhouettes. The trade-off is that the icons no longer follow the theme's text
   colour, so the artwork itself has to read well on dark, light and zen backgrounds.
   object-fit keeps non-square artwork undistorted inside the square box.
   Swapping an icon means overwriting the file in /images, with no change here. */
.nf-comm-icon {
  flex: none;
  display: block;
  width: 50px;
  height: 50px;
  margin-top: 0;
  object-fit: contain;
  object-position: center;
}

/* ═════════════════════════════════════════════════════════════════════════════
   News Feed — Market Voices pane (nf-mv-*)
   Moved from renderNewsFeed.js _ensureMarketVoicesStyles() so styling lives in
   CSS, not injected from JS (Style SOP §5). Reuses the same surface, border,
   radius, and typography tokens as the 7-Day Themes pane (.nf-theme-card-v2,
   .nf-theme-summary-card, .nf-filter-label) so the two tabs read as one
   component inside .nf-intel-tabs-box, instead of a parallel design system.
   Body text is shared directly with .nf-theme-card-v2__text — see that rule.
   ═════════════════════════════════════════════════════════════════════════════ */
.nf-market-voices {
  padding: 8px 16px 16px;
  /* Two-sided debate accent: side A reuses the shared accent token (same green/
     gold used by .nf-intel-tab.active and nf-sv-bull); side B mirrors nf-sv-bear's
     palette since there is no shared "opposing/negative" token yet. */
  --mv-side-a: var(--accent);
  --mv-side-b: #f87171;
}
[data-theme="light"] .nf-market-voices { --mv-side-b: #dc2626; }

/* ── Cards: same surface treatment as .nf-theme-card-v2 / .nf-theme-summary-card ── */
.nf-mv-focus,
.nf-mv-stand,
.nf-mv-context-card,
.nf-mv-question,
.nf-mv-details {
  border: 0.5px solid var(--border-medium, rgba(0,0,0,0.12));
  border-radius: var(--radius-md, 10px);
  background: var(--bg-surface, #ffffff);
}
[data-theme="dark"] .nf-mv-focus,
[data-theme="dark"] .nf-mv-stand,
[data-theme="dark"] .nf-mv-context-card,
[data-theme="dark"] .nf-mv-question,
[data-theme="dark"] .nf-mv-details,
[data-theme="zen"] .nf-mv-focus,
[data-theme="zen"] .nf-mv-stand,
[data-theme="zen"] .nf-mv-context-card,
[data-theme="zen"] .nf-mv-question,
[data-theme="zen"] .nf-mv-details {
  background: color-mix(in srgb, var(--bg-elevated) 85%, var(--bg-page));
  border-color: var(--border-light);
}

/* ── Typography tiers, mapped to the equivalent 7-Day Themes hierarchy ── */

/* Main question/headline — same level as the commodity summary headline
   (.nf-summary-header__title): the single "focus" heading for the pane. */
.nf-mv-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

/* Analyst name / question-rail title — emphasized subsection heading, same
   level as an individual theme card's title (.nf-theme-card-v2__title). */
.nf-mv-voice__name,
.nf-mv-question__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary);
}

/* Section labels (WHERE VOICES STAND / WHY IT MATTERS / WATCH NEXT / kicker) —
   the same section-label convention used app-wide by .nf-filter-label. */
.nf-mv-kicker,
.nf-mv-section-title,
.nf-mv-context-card__title {
  margin: 0;
  font-size: var(--font-base);
  font-weight: var(--title-font-weight);
  color: var(--text-accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Compact uppercase field tags (fact labels, commodity tag) */
.nf-mv-fact__label,
.nf-mv-question__commodity {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nf-mv-fact__label { color: var(--text-secondary); }
.nf-mv-question__commodity { color: var(--accent); }

/* Metadata (dates, orgs, sources, captions) — same size/color as
   .nf-theme-card-v2__sources / .nf-summary-header__meta. */
.nf-mv-topline,
.nf-mv-count,
.nf-mv-question__event,
.nf-mv-section-note,
.nf-mv-fact__sub,
.nf-mv-reference-unit,
.nf-mv-voice__org,
.nf-mv-voice__quote,
.nf-mv-side__count,
.nf-mv-position-label--mid,
.nf-mv-divide,
.nf-mv-timeline__date,
.nf-mv-timeline__detail,
.nf-mv-watch__reason,
.nf-mv-evidence-note,
.nf-mv-empty-side,
.nf-mv-change {
  font-size: 11px;
  color: var(--text-secondary);
}
.nf-mv-change strong { color: var(--text-primary); }

.nf-mv-deck {
  font-size: var(--font-base);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ── Structural layout (geometry only — no colors/fonts beyond the above) ── */
.nf-mv-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.nf-mv-topline { margin-top: 3px; line-height: 1.35; }
.nf-mv-count { flex: 0 0 auto; padding: 5px 8px; border: 1px solid var(--border-medium); border-radius: 999px; background: var(--bg-surface); font-weight: 700; }

.nf-mv-question-rail { display: flex; gap: 7px; overflow-x: auto; padding: 1px 1px 8px; scrollbar-width: thin; }
.nf-mv-question { appearance: none; min-width: 210px; max-width: 285px; padding: 9px 10px; text-align: left; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease; }
.nf-mv-question:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--border-medium)); }
.nf-mv-question.is-active { border-color: color-mix(in srgb, var(--accent) 55%, var(--border-medium)); background: var(--accent-dim); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent); }
.nf-mv-question__meta { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-bottom: 5px; }
/* resolution_date can arrive as a full sentence instead of a short date (e.g. when
   the source evidence doesn't state an exact calendar date) — clamp so it never
   overflows the rail card into its neighbors. No title tooltip: it renders as an
   opaque native tooltip box on some platforms, which reads as a UI glitch. */
.nf-mv-question__event { flex: 0 1 auto; min-width: 0; max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nf-mv-focus { overflow: hidden; }
.nf-mv-focus__head { padding: 15px 16px 13px; }
.nf-mv-focus__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.nf-mv-badge { display: inline-flex; align-items: center; border: 1px solid var(--border-medium); border-radius: 999px; padding: 4px 8px; color: var(--text-secondary); background: var(--bg-input); font-size: 10px; font-weight: 600; letter-spacing: 0.03em; }
.nf-mv-badge--live { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 28%, var(--border-medium)); background: var(--accent-dim); }
.nf-mv-focus__facts { display: grid; grid-template-columns: minmax(150px,.72fr) minmax(230px,1.5fr) minmax(180px,1fr); border-top: 1px solid var(--border-light); }
.nf-mv-fact { padding: 11px 13px; min-width: 0; }
.nf-mv-fact + .nf-mv-fact { border-left: 1px solid var(--border-light); }
.nf-mv-fact__value { margin-top: 4px; font-size: var(--font-base); line-height: 1.4; font-weight: 600; color: var(--text-primary); }
.nf-mv-fact__value--strong { font-weight: 700; }
.nf-mv-reference-number { font-size: 20px; line-height: 1; font-weight: 800; letter-spacing: -0.025em; color: var(--text-primary); }
.nf-mv-reference-unit { margin-left: 3px; font-weight: 650; }
.nf-mv-reference-text { font-size: var(--font-base); line-height: 1.35; font-weight: 650; color: var(--text-primary); }
.nf-mv-fact__sub { margin-top: 4px; line-height: 1.35; }

.nf-mv-section { margin-top: 14px; }
.nf-mv-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 0 1px 7px; }
.nf-mv-section-note { text-align: right; }

.nf-mv-stand { overflow: hidden; }
.nf-mv-stand__summary { padding: 11px 13px; border-bottom: 1px solid var(--border-light); }
.nf-mv-position-bar { display: flex; height: 7px; overflow: hidden; border-radius: 999px; background: var(--border-light); }
.nf-mv-position-bar > span { min-width: 0; }
.nf-mv-position-bar__a { background: var(--mv-side-a); }
.nf-mv-position-bar__mid { background: var(--text-muted); }
.nf-mv-position-bar__b { background: var(--mv-side-b); }
.nf-mv-position-labels { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; margin-top: 7px; align-items: start; }
.nf-mv-position-label { font-size: var(--font-sm); line-height: 1.35; font-weight: 700; color: var(--text-primary); }
.nf-mv-position-label--mid { text-align: center; white-space: nowrap; }
.nf-mv-position-label--b { text-align: right; }

.nf-mv-voice-grid { display: grid; grid-template-columns: 1fr .82fr 1fr; }
.nf-mv-side { min-width: 0; padding: 11px; }
.nf-mv-side + .nf-mv-side { border-left: 1px solid var(--border-light); }
.nf-mv-side__label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; font-size: var(--font-sm); font-weight: 700; }
.nf-mv-side__label--a { color: var(--mv-side-a); }
.nf-mv-side__label--b { color: var(--mv-side-b); }
.nf-mv-side__count { font-weight: 600; }
.nf-mv-voice { padding: 9px 0; border-top: 1px solid var(--border-light); }
.nf-mv-voice:first-of-type { border-top: 0; padding-top: 0; }
.nf-mv-voice__head { display: flex; justify-content: space-between; gap: 9px; align-items: flex-start; }
.nf-mv-voice__org { margin-top: 1px; }
.nf-mv-voice__number { flex: 0 0 auto; font-size: 13px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; color: var(--text-primary); }
.nf-mv-voice__view { margin-top: 5px; }
.nf-mv-voice__quote { margin-top: 6px; padding-left: 8px; border-left: 2px solid var(--border-light); }
.nf-mv-source { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--text-secondary); text-decoration: none; }
a.nf-mv-source { color: var(--accent); }
a.nf-mv-source:hover { text-decoration: underline; }
.nf-mv-more { margin-top: 6px; }
.nf-mv-more > summary { cursor: pointer; list-style: none; color: var(--accent); font-size: 11px; font-weight: 700; }
.nf-mv-more > summary::-webkit-details-marker { display: none; }
.nf-mv-empty-side { padding: 3px 0 5px; }

.nf-mv-context-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 9px; }
.nf-mv-context-card { padding: 12px; min-width: 0; }
.nf-mv-context-card__text { margin-top: 5px; }
.nf-mv-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.nf-mv-case { padding: 8px; border-radius: 9px; background: var(--bg-input); font-size: 11px; line-height: 1.4; color: var(--text-secondary); }
.nf-mv-case strong { display: block; margin-bottom: 2px; color: var(--text-primary); font-size: 11px; }
.nf-mv-watch-list { display: grid; gap: 6px; margin-top: 7px; }
.nf-mv-watch { display: grid; grid-template-columns: auto 1fr; gap: 7px; align-items: start; }
.nf-mv-watch__role { min-width: 46px; padding: 3px 5px; border-radius: 999px; background: var(--bg-input); color: var(--text-secondary); font-size: 9px; font-weight: 700; text-align: center; text-transform: uppercase; }
.nf-mv-watch__role--resolves { color: var(--accent); background: var(--accent-dim); }
.nf-mv-watch__label { font-size: var(--font-sm); font-weight: 600; line-height: 1.35; color: var(--text-primary); }
.nf-mv-watch__reason { margin-top: 1px; }

.nf-mv-details { margin-top: 9px; }
.nf-mv-details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; font-size: 11px; font-weight: 700; color: var(--text-primary); }
.nf-mv-details > summary::-webkit-details-marker { display: none; }
.nf-mv-details[open] > summary { border-bottom: 1px solid var(--border-light); }
.nf-mv-details__body { padding: 10px 11px; }
.nf-mv-change { margin-bottom: 8px; }
.nf-mv-timeline { display: grid; gap: 0; }
.nf-mv-timeline__row { display: grid; grid-template-columns: 74px 1fr; gap: 8px; padding: 7px 0; border-top: 1px solid var(--border-light); }
.nf-mv-timeline__row:first-child { border-top: 0; }
.nf-mv-timeline__event { font-size: var(--font-sm); font-weight: 600; line-height: 1.35; color: var(--text-primary); }
.nf-mv-timeline__detail { margin-top: 2px; }
.nf-mv-evidence-note { margin-top: 8px; }

.nf-mv-actions { display: flex; justify-content: flex-end; margin-top: 9px; }
.nf-mv-ask { border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border-medium)); background: var(--accent-dim); color: var(--accent); border-radius: 9px; padding: 7px 9px; cursor: pointer; font-size: 11px; font-weight: 700; }
.nf-mv-ask:hover { background: color-mix(in srgb, var(--accent) 14%, var(--accent-dim)); }

@media (max-width: 900px) {
  .nf-mv-focus__facts { grid-template-columns: 1fr; }
  .nf-mv-fact + .nf-mv-fact { border-left: 0; border-top: 1px solid var(--border-light); }
  .nf-mv-voice-grid { grid-template-columns: 1fr; }
  .nf-mv-side + .nf-mv-side { border-left: 0; border-top: 1px solid var(--border-light); }
  .nf-mv-context-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .nf-market-voices { padding: 9px; }
  .nf-mv-question { min-width: 185px; }
  .nf-mv-position-labels { grid-template-columns: 1fr; }
  .nf-mv-position-label--mid, .nf-mv-position-label--b { text-align: left; }
  .nf-mv-cases { grid-template-columns: 1fr; }
}

/* ══ Custom HTML legend (render5yearavg) ════════════════════════════════════ */
.chart-custom-legend {
  position: absolute;
  top: 60px;       /* fallback only; JS overrides via positionCustomLegend() */
  left: auto;
  right: 10px;     /* fallback only */
  width: 160px;
  z-index: 100;
  pointer-events: auto;
  font-family: var(--chart-font-family, 'IBM Plex Sans', Verdana, sans-serif);
  font-size: var(--chart-legend-size, 11px);
  color: var(--text-primary, #e8eaf0);
  user-select: none;
}
.custom-legend-title {
  font-weight: var(--chart-legend-title-weight, 700);
  color: var(--text-primary);
  margin-bottom: 4px;
  padding-left: 2px;
}
.custom-legend-row {
  display: grid;
  grid-template-columns: 24px 54px minmax(0, 1fr);
  align-items: center;
  column-gap: 3px;
  row-gap: 0;
  height: 20px;
  padding: 0 2px;
  cursor: pointer;
  border-radius: 3px;
  pointer-events: auto;
}
.custom-legend-row:hover,
.custom-legend-row.is-hovered {
  background: rgba(255,255,255,0.06);
}
.chart-custom-legend .custom-legend-row.is-hovered {
  background: var(--chart-highlight-legend-bg, transparent);
}
.chart-custom-legend .custom-legend-row.is-hovered .custom-legend-swatch {
  background: var(--chart-highlight-color, #FFA500) !important;
  height: var(--chart-highlight-swatch-height, 2px);
}
.chart-custom-legend .custom-legend-row.is-hovered .custom-legend-name {
  font-weight: var(--chart-highlight-name-weight, 700) !important;
}
.chart-custom-legend .custom-legend-row.is-hovered .custom-legend-value {
  color: var(--chart-highlight-color, #FFA500) !important;
  font-weight: var(--chart-highlight-value-weight, 700) !important;
}
.custom-legend-row.is-sticky .custom-legend-name,
.custom-legend-row.is-hovered .custom-legend-name {
  font-weight: var(--chart-legend-title-weight, 700);
}
.custom-legend-swatch {
  display: block;
  height: 2px;
  border-radius: 999px;
}
.custom-legend-swatch.is-range {
  height: 8px;
  border-radius: 2px;
  opacity: 0.4;
}
.custom-legend-name {
  color: var(--text-primary, #e8eaf0);
  font-weight: var(--chart-legend-weight, 500);
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
.custom-legend-value {
  text-align: right;
  font-weight: var(--chart-legend-value-weight, 500);
  white-space: nowrap;
}

/* ── Shared dynamic-series legend (CFTC, ESR Total Commitment, ESR Weekly) ── */
/* Matches the base .chart-custom-legend layout exactly; explicit here for     */
/* clarity and to override any chart-specific overrides added in the future.   */
.chart-custom-legend--dynamic-series {
  width: 150px;
  box-sizing: border-box;
}

.chart-custom-legend--dynamic-series .custom-legend-row {
  grid-template-columns: 20px 54px max-content;
  justify-content: start;
  column-gap: 2px;
  height: 20px;
  padding: 0 2px;
}

.chart-custom-legend--dynamic-series .custom-legend-value {
  justify-self: start;
  text-align: left;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.chart-custom-legend--crush-cumulative {
  width: 150px;
  pointer-events: none;
}

.chart-custom-legend--crush-cumulative .custom-legend-row {
  grid-template-columns: 24px minmax(70px, 1fr) auto;
  column-gap: 4px;
  cursor: default;
}

.chart-custom-legend--crush-cumulative .custom-legend-value {
  text-align: right;
  white-space: nowrap;
}

/* ══ WASDE S&D Trend legend (Executive Brief) ════════════════════════════ */
.chart-custom-legend--snd-trend {
  width: 164px;
  max-height: calc(100% - 12px);
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: none;
  scrollbar-width: thin;
  scrollbar-color: var(--eb-border-2) transparent;
}
.chart-custom-legend--snd-trend::-webkit-scrollbar { width: 4px; }
.chart-custom-legend--snd-trend::-webkit-scrollbar-track { background: transparent; }
.chart-custom-legend--snd-trend::-webkit-scrollbar-thumb {
  background: var(--eb-border-2);
  border-radius: 999px;
}
.chart-custom-legend--snd-trend .custom-legend-row {
  grid-template-columns: 22px minmax(76px, 1fr) auto;
  column-gap: 4px;
  cursor: default;
  pointer-events: none;
}
.chart-custom-legend--snd-trend .custom-legend-row:hover,
.chart-custom-legend--snd-trend .custom-legend-row.is-hovered {
  background: none;
}
.chart-custom-legend--snd-trend .custom-legend-value {
  text-align: right;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

/* Narrow: stack legend below chart rather than overlap */
@media (max-width: 640px) {
  .chart-custom-legend--snd-trend {
    position: static !important;
    width: 100% !important;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px 12px;
    padding: 6px 4px 2px;
    border-top: 1px solid var(--eb-border, rgba(255,255,255,0.1));
    margin-top: 4px;
  }
  .chart-custom-legend--snd-trend .custom-legend-title {
    grid-column: 1 / -1;
  }
}

/* END EXTRACTED: _injectStyles */

/* ═══════════════════════════════════════════════════════════
   7-DAY THEMES — HORIZONTAL LANDSCAPE CARDS
   ═══════════════════════════════════════════════════════════ */

.eb-snap-card--headlines .eb-story-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Stack full-width horizontal cards from top to bottom */
.eb-snap-card--headlines .eb-story-themes.eb-theme-deck {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  gap: 8px;

  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;

  margin: 0;
  padding: 0 4px 4px 0;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  scrollbar-width: thin;
  scrollbar-color: var(--eb-border-2) transparent;
}

.eb-snap-card--headlines
.eb-story-themes.eb-theme-deck::-webkit-scrollbar {
  width: 5px;
  height: 0;
}

.eb-snap-card--headlines
.eb-story-themes.eb-theme-deck::-webkit-scrollbar-track {
  background: transparent;
}

.eb-snap-card--headlines
.eb-story-themes.eb-theme-deck::-webkit-scrollbar-thumb {
  background: var(--eb-border-2);
  border-radius: 999px;
}

/* Each theme becomes one wide landscape card */
.eb-snap-card--headlines .eb-theme-row {
  position: relative !important;

  display: grid !important;
  grid-template-columns:
    minmax(170px, 34%)
    minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 6px;

  flex: 0 0 auto !important;

  width: 100% !important;
  height: auto !important;
  min-width: 0;
  min-height: 118px;
  max-height: 140px;

  padding: 12px 14px;

  grid-column: auto !important;
  grid-row: auto !important;

  overflow: hidden;
}

/* Left column: direction arrow and headline */
.eb-snap-card--headlines .eb-theme-row-header {
  grid-column: 1;
  grid-row: 1;

  align-self: start;
  min-width: 0;
}

/* Left column: bullish/bearish classification */
.eb-snap-card--headlines .eb-theme-tag {
  grid-column: 1;
  grid-row: 2;

  align-self: start;
  justify-self: start;
  margin: 0;
}

/* Right column: preview text */
.eb-snap-card--headlines .eb-theme-preview {
  grid-column: 2;
  grid-row: 1 / 4;

  align-self: stretch;
  min-width: 0;
  min-height: 0;

  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;

  overflow: hidden;
}

/* Expanded text remains in the right column */
.eb-snap-card--headlines .eb-theme-full {
  grid-column: 2;
  grid-row: 1 / 4;

  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow-y: auto;
}

/* Neutralize all old card-count grid placement */
.eb-snap-card--headlines
.eb-theme-count-1 .eb-theme-row,
.eb-snap-card--headlines
.eb-theme-count-2 .eb-theme-row,
.eb-snap-card--headlines
.eb-theme-count-3 .eb-theme-row,
.eb-snap-card--headlines
.eb-theme-count-4 .eb-theme-row,
.eb-snap-card--headlines
.eb-theme-count-5 .eb-theme-row,
.eb-snap-card--headlines
.eb-theme-count-6 .eb-theme-row,
.eb-snap-card--headlines
.eb-theme-count-7 .eb-theme-row,
.eb-snap-card--headlines
.eb-theme-count-8 .eb-theme-row {
  position: relative !important;
  grid-column: auto !important;
  grid-row: auto !important;
  inset: auto !important;
  transform: none;
  width: 100% !important;
}

/* Expanded card gets more vertical room, not more width */
.eb-snap-card--headlines .eb-theme-row.expanded,
.eb-snap-card--headlines
.eb-theme-row[aria-expanded="true"] {
  width: 100% !important;
  height: auto !important;
  min-height: 170px;
  max-height: 280px;

  grid-column: auto !important;
  grid-row: auto !important;

  z-index: 2;
}

/* Prevent hover from shifting the card and disturbing the stack */
.eb-snap-card--headlines .eb-theme-row:hover {
  transform: none;
}

/* Smaller screens: retain landscape layout until space is too narrow */
@media (max-width: 700px) {
  .eb-snap-card--headlines .eb-theme-row {
    grid-template-columns: minmax(130px, 38%) minmax(0, 1fr);
    column-gap: 10px;
    min-height: 125px;
  }
}

/* Phone fallback: switch to a normal vertical card internally */
@media (max-width: 520px) {
  .eb-snap-card--headlines .eb-theme-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-height: 210px;
  }

  .eb-snap-card--headlines .eb-theme-tag {
    margin-bottom: 6px;
  }
}

/* ═══════════════════════════════════════════════════════════
   7-DAY THEMES — HORIZONTAL STACK, VERTICAL CARD CONTENT
   Keep cards in a horizontal rail, but stack each card's
   header/tag/text vertically like the reference image.
   ═══════════════════════════════════════════════════════════ */

/* Keep the outer rail horizontal */
.eb-snap-card--headlines .eb-story-themes.eb-theme-deck {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/* Each card is a horizontal item in the rail,
   but its INTERNAL content flows top-to-bottom */
.eb-snap-card--headlines .eb-theme-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  justify-content: flex-start;

  position: relative;
  flex: 0 0 calc((100% - 12px) / 2);
  width: auto !important;
  height: 100%;
  min-width: 0;
  min-height: 0;

  padding: 14px 16px;
  overflow: hidden;
  scroll-snap-align: start;

  /* neutralize any earlier 2-column / grid styling */
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}

/* Expanded card can still widen if desired */
.eb-snap-card--headlines .eb-theme-row.expanded,
.eb-snap-card--headlines .eb-theme-row[aria-expanded="true"] {
  flex-basis: 100%;
  width: 100% !important;
  max-width: 100%;
}

/* Header row stays on top */
.eb-snap-card--headlines .eb-theme-row-header,
.eb-snap-card--headlines .eb-theme-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 8px;

  grid-column: auto !important;
  grid-row: auto !important;
}

/* Tag sits below title, left-aligned */
.eb-snap-card--headlines .eb-theme-tag {
  align-self: flex-start;
  margin: 0 0 10px 0;

  grid-column: auto !important;
  grid-row: auto !important;
  max-width: 100%;
}

/* Preview text sits BELOW header and tag */
.eb-snap-card--headlines .eb-theme-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  line-clamp: 7;

  overflow: hidden;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;

  grid-column: auto !important;
  grid-row: auto !important;
}

/* Expanded body also sits below header/tag */
.eb-snap-card--headlines .eb-theme-full {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  margin-top: 0;

  grid-column: auto !important;
  grid-row: auto !important;
}

/* If you previously added a two-column layout, this neutralizes it */
.eb-snap-card--headlines .eb-theme-row > * {
  grid-column: auto !important;
  grid-row: auto !important;
}

/* Optional: show 3 cards on very wide screens */
@media (min-width: 1500px) {
  .eb-snap-card--headlines .eb-theme-row {
    flex-basis: calc((100% - 24px) / 3);
  }

  .eb-snap-card--headlines .eb-theme-row.expanded,
  .eb-snap-card--headlines .eb-theme-row[aria-expanded="true"] {
    flex-basis: 100%;
  }
}

/* Tablet / smaller widths: one larger card at a time */
@media (max-width: 900px) {
  .eb-snap-card--headlines .eb-theme-row {
    flex: 0 0 88%;
  }
}

/* ═══════════════════════════════════════════════════════════
   7-DAY THEMES — VERTICAL THEME STACK
   Individual card content remains vertically arranged.
   Theme cards stack from top to bottom.
   ═══════════════════════════════════════════════════════════ */

.eb-snap-card--headlines .eb-story-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Stack individual theme cards vertically */
.eb-snap-card--headlines .eb-story-themes.eb-theme-deck {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start;

  gap: 6px;

  flex: 1 1 auto;
  width: 100%;
  height: auto !important;
  min-height: 0;

  margin: 0;
  padding: 0 6px 8px 0;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;
  scrollbar-color: var(--eb-border-2) transparent;
}

/* Vertical scrollbar */
.eb-snap-card--headlines
.eb-story-themes.eb-theme-deck::-webkit-scrollbar {
  width: 5px;
  height: 0;
}

.eb-snap-card--headlines
.eb-story-themes.eb-theme-deck::-webkit-scrollbar-track {
  background: transparent;
}

.eb-snap-card--headlines
.eb-story-themes.eb-theme-deck::-webkit-scrollbar-thumb {
  background: var(--eb-border-2);
  border-radius: 999px;
}

/* Each theme occupies one full-width row */
.eb-snap-card--headlines .eb-theme-row {
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;

  flex: 0 0 auto !important;

  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 150px;

  box-sizing: border-box;

  grid-column: auto !important;
  grid-row: auto !important;

  scroll-snap-align: start;
  overflow: hidden;
}

/* Keep expanded cards full-width and allow more vertical room */
.eb-snap-card--headlines .eb-theme-row.expanded,
.eb-snap-card--headlines
.eb-theme-row[aria-expanded="true"] {
  flex: 0 0 auto !important;

  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 280px;
  max-height: none;

  grid-column: auto !important;
  grid-row: auto !important;

  z-index: 2;
}

/* Neutralize old card-count grid placement */
.eb-snap-card--headlines
.eb-theme-count-1 .eb-theme-row,
.eb-snap-card--headlines
.eb-theme-count-2 .eb-theme-row,
.eb-snap-card--headlines
.eb-theme-count-3 .eb-theme-row,
.eb-snap-card--headlines
.eb-theme-count-4 .eb-theme-row,
.eb-snap-card--headlines
.eb-theme-count-5 .eb-theme-row,
.eb-snap-card--headlines
.eb-theme-count-6 .eb-theme-row,
.eb-snap-card--headlines
.eb-theme-count-7 .eb-theme-row,
.eb-snap-card--headlines
.eb-theme-count-8 .eb-theme-row {
  position: relative !important;
  inset: auto !important;

  flex: 0 0 auto !important;

  width: 100% !important;
  height: auto !important;

  grid-column: auto !important;
  grid-row: auto !important;

  transform: none;
}

/* Prevent hover movement from disturbing the vertical stack */
.eb-snap-card--headlines .eb-theme-row:hover {
  transform: none;
}

/* Ensure tablet rules do not restore the horizontal rail */
@media (max-width: 900px) {
  .eb-snap-card--headlines
  .eb-story-themes.eb-theme-deck {
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .eb-snap-card--headlines .eb-theme-row {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
  }

  .eb-snap-card--headlines .eb-theme-row.expanded,
  .eb-snap-card--headlines
  .eb-theme-row[aria-expanded="true"] {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   7-DAY THEMES — DEFINITIVE COMPACT VERTICAL LIST
   ═══════════════════════════════════════════════════════════ */

.eb-snap-card--headlines {
  --eb-theme-content-x: 22px;
}

.eb-snap-card--headlines #eb-stories-scroll {
  overflow-x: hidden;
  overflow-y: auto;
}

.eb-snap-card--headlines .eb-story-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 12px 0 16px !important;
}

.eb-snap-card--headlines .eb-story-heading-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
  padding-right: var(--eb-theme-content-x);
  padding-left: var(--eb-theme-content-x);
}

.eb-snap-card--headlines .eb-story-commodity {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  color: var(--eb-text);
}

.eb-snap-card--headlines .eb-story-verdict {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  max-width: calc(100% - 72px) !important;
  margin: 0 !important;
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eb-snap-card--headlines .eb-story-verdict.eb-bull {
  background: var(--eb-green-dim);
  color: var(--eb-green);
}

.eb-snap-card--headlines .eb-story-verdict.eb-bear {
  background: var(--eb-red-dim);
  color: var(--eb-red);
}

.eb-snap-card--headlines .eb-story-verdict.eb-mix {
  background: var(--eb-amber-dim);
  color: var(--eb-amber);
}

.eb-snap-card--headlines .eb-story-themes.eb-theme-deck {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start;
  gap: 3px;
  width: 100%;
  height: auto !important;
  min-height: 0;
  margin-right: 0;
  margin-left: 0;
  padding: 4px var(--eb-theme-content-x) 10px;
  box-sizing: border-box;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: var(--eb-border-2) transparent;
}

.eb-snap-card--headlines
.eb-story-themes.eb-theme-deck::-webkit-scrollbar {
  width: 5px;
  height: 0;
}

.eb-snap-card--headlines
.eb-story-themes.eb-theme-deck::-webkit-scrollbar-track {
  background: transparent;
}

.eb-snap-card--headlines
.eb-story-themes.eb-theme-deck::-webkit-scrollbar-thumb {
  background: var(--eb-border-2);
  border-radius: 999px;
}

.eb-snap-card--headlines .eb-theme-row {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  align-items: stretch;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-width: 0;
  min-height: 0;
  max-height: none;
  margin: 0;
  box-sizing: border-box;
  padding: 8px 16px;
  grid-column: auto !important;
  grid-row: auto !important;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--eb-card-bg, var(--eb-surface));
  box-shadow: none;
  overflow: hidden;
  transform: none;
  transition: border-color .18s ease, background-color .18s ease;
}

.eb-snap-card--headlines .eb-theme-row:hover {
  border-color: var(--eb-border);
  box-shadow: none;
  transform: none;
}

.eb-snap-card--headlines
.eb-theme-row:not(.expanded):not([aria-expanded="true"]) {
  min-height: 0;
  height: auto !important;
}

.eb-snap-card--headlines .eb-theme-row:focus-visible {
  outline: 2px solid var(--eb-green);
  outline-offset: 2px;
}

.eb-snap-card--headlines .eb-theme-row.expanded,
.eb-snap-card--headlines .eb-theme-row[aria-expanded="true"] {
  width: 100% !important;
  min-height: 180px;
  max-height: 280px;
  border-color: var(--eb-border);
  box-shadow: none;
}

.eb-snap-card--headlines .eb-theme-updated {
  flex: 0 0 auto;
  align-self: flex-end;
  margin: 0 0 7px;
  color: var(--eb-text-3);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.eb-snap-card--headlines .eb-theme-title {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0 0 2px;
  color: var(--eb-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eb-snap-card--headlines .eb-theme-signal {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: none;
}

.eb-snap-card--headlines .eb-theme-signal.eb-bull {
  background: transparent;
  color: var(--eb-green);
}

.eb-snap-card--headlines .eb-theme-signal.eb-bear {
  background: transparent;
  color: var(--eb-red);
}

.eb-snap-card--headlines .eb-theme-signal.eb-mix {
  background: transparent;
  color: var(--eb-amber);
}

.eb-snap-card--headlines .eb-theme-preview {
  display: -webkit-box;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  margin: 3px 0 0;
  color: var(--eb-text-2);
  font-size: 12px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.eb-snap-card--headlines .eb-theme-full {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0 4px 0 0;
  overflow-y: auto;
}

.eb-snap-card--headlines .eb-theme-row.expanded .eb-theme-preview,
.eb-snap-card--headlines
.eb-theme-row[aria-expanded="true"] .eb-theme-preview {
  display: none;
}

.eb-snap-card--headlines .eb-theme-row.expanded .eb-theme-full,
.eb-snap-card--headlines
.eb-theme-row[aria-expanded="true"] .eb-theme-full {
  display: block;
}

.eb-snap-card--headlines .eb-theme-full .eb-theme-body {
  color: var(--eb-text-2);
  font-size: 12px;
  line-height: 1.55;
}

.eb-snap-card--headlines .eb-theme-full .eb-theme-sources {
  margin-top: 8px;
  color: var(--eb-text-3);
  font-size: 12px;
  font-style: italic;
}

.eb-snap-card--headlines .eb-theme-row::after {
  display: none !important;
}

@media (max-width: 900px) {
  .eb-snap-card--headlines #eb-stories-scroll {
    overflow: auto;
  }

  .eb-snap-card--headlines .eb-story-item {
    height: auto;
    min-height: 100%;
    padding: 12px 0 !important;
  }

  .eb-snap-card--headlines .eb-theme-row {
    min-height: 0;
    max-height: none;
  }
}

/* ── contact / beta-access modal (landing page, current generation) ── */
#lp-contact-backdrop { position: fixed; inset: 0; background: rgba(26,24,21,.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
#lp-contact-backdrop[hidden] { display: none; }
#lp-contact-modal {
  --lp-contact-label-width: 132px;
  --lp-contact-row-gap: 18px;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 8px; box-shadow: 8px 8px 0 var(--ink); max-width: 620px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 28px; position: relative; font-family: 'Newsreader', Georgia, serif;
}
#lp-contact-modal .lp-modal-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border: 1.5px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
#lp-contact-modal .lp-modal-close:hover { background: var(--ink); color: var(--paper); }
#lp-contact-modal h2 { font-family: 'Newsreader', serif; font-size: 22px; font-weight: 500; margin: 0 0 6px; padding-right: 32px; }
#lp-contact-access-desc { margin: 0 0 18px; }
#lp-contact-modal .lp-contact-form { display: grid; gap: 10px; margin-bottom: 16px; }
#lp-contact-modal .lp-contact-row { display: grid; grid-template-columns: var(--lp-contact-label-width) minmax(0, 1fr); align-items: center; column-gap: var(--lp-contact-row-gap); min-height: 46px; padding: 8px 12px; border: 1px solid var(--rule); background: rgba(255,255,255,.35); box-sizing: border-box; }
#lp-contact-modal .lp-contact-row label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
#lp-contact-modal .lp-contact-row input { min-width: 0; width: 100%; box-sizing: border-box; background: transparent; border: none; border-bottom: 1.5px solid var(--ink); padding: 6px 2px; font-family: 'Newsreader', serif; font-size: 16px; color: var(--ink); outline: none; }
#lp-contact-modal .lp-contact-row input:focus { border-bottom-color: var(--lime-deep); background: linear-gradient(transparent 88%, rgba(191,232,58,.4) 88%); }
#lp-contact-modal .lp-contact-message-row { align-items: start; padding-top: 12px; padding-bottom: 12px; }
#lp-contact-modal .lp-contact-message-row label { padding-top: 7px; }
#lp-contact-modal .lp-contact-row textarea { background: transparent; border: 1.5px solid var(--ink); border-radius: 4px; padding: 8px; font-family: 'Newsreader', serif; font-size: 16px; color: var(--ink); outline: none; width: 100%; min-height: 110px; resize: vertical; box-sizing: border-box; }
#lp-contact-modal .lp-contact-row textarea:focus { border-color: var(--lime-deep); }
#lp-contact-modal .lp-field-optional-tag { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; margin-left: 4px; }
#lp-contact-modal .lp-hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
#lp-contact-modal .lp-modal-status { font-family: 'JetBrains Mono', monospace; font-size: 12px; min-height: 18px; margin: -6px 0 14px; }
#lp-contact-modal .lp-modal-status.lp-status-ok { color: #16803c; }
#lp-contact-modal .lp-modal-status.lp-status-err { color: #b91c1c; }
@media (max-width: 560px) {
  #lp-contact-modal { padding: 22px; max-height: 92vh; }
  #lp-contact-modal .lp-contact-row { grid-template-columns: 1fr; row-gap: 5px; min-height: 0; }
  #lp-contact-modal .lp-contact-row label, #lp-contact-modal .lp-contact-message-row label { padding-top: 0; white-space: normal; }
}