:root {
  /* Raven-Tech.co — Light (Apple-esque) */
  --bg: #f5f5f7;
  --bg2: #ffffff;
  --logoTileBg: rgba(18, 18, 22, 0.92); /* Dark charcoal backdrop for transparent/light logos */

  /* Glass surfaces */
  --surface: rgba(255, 255, 255, 0.70);
  --surfaceElev: rgba(255, 255, 255, 0.86);
  --surfaceSolid: #ffffff;

  /* Neutrals */
  --border: rgba(15, 23, 42, 0.10);
  --border-strong: rgba(15, 23, 42, 0.14);
  --line: rgba(15, 23, 42, 0.08);
  --text: #0b0b0f;
  --muted: rgba(11, 11, 15, 0.62);
  --muted2: rgba(11, 11, 15, 0.48);

  /* Accents */
  --blue: rgba(0, 122, 255, 0.95);
  --green: rgba(52, 199, 89, 0.95);
  --amber: rgba(255, 159, 10, 0.95);
  --red: rgba(255, 59, 48, 0.95);

  /* Elevation */
  --shadow: 0 10px 30px rgba(15, 20, 30, 0.08);
  --shadow-glass: 0 1px 0 rgba(255,255,255,0.85) inset, 0 10px 30px rgba(15, 20, 30, 0.08);

  /* Focus + hover */
  --hover: rgba(2, 6, 23, 0.03);
  --focus-ring: rgba(0, 122, 255, 0.22);

  /* Radii */
  --radius-card: 18px;
  --radius-control: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(1000px 700px at 18% -10%, rgba(0, 122, 255, 0.12), transparent 56%),
    radial-gradient(900px 600px at 85% 10%, rgba(52, 199, 89, 0.08), transparent 58%),
    var(--bg);
  color: var(--text);
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 20px 64px;
}

.appHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.appBrand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brandLogo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  box-shadow: 0 10px 26px rgba(15, 20, 30, 0.10);
}

.appHeaderText {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.appTitle {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.appSubtitle {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.controlBar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 10px 12px 10px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.controlBarForm {
  display: flex;
  gap: 12px;
  align-items: center;
  height: 56px;
}

/* Engine 2 (SPX) control bar: fit controls without horizontal overflow */
.controlBarForm.controlBarForm--engine2 {
  /* Match Engine 1 look/spacing */
  display: flex;
  gap: 12px;
  align-items: center;
  height: 56px;
}

.controlBarForm.controlBarForm--engine2 #runBtn {
  min-width: 140px;
}

/* Engine 2: static "input-like" value box (for Underlying = SPX) */
.controlStatic {
  height: 36px;
  background: var(--surfaceElev);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 10px;
  outline: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.80) inset;
  display: inline-flex;
  align-items: center;
  min-width: 120px;
}

.tickerInputRow .controlStatic {
  flex: 1;
  min-width: 0;
}

.controlGroup {
  display: grid;
  gap: 6px;
  min-width: 220px;
}

.controlGroup--underlying {
  min-width: 176px;
}

.toggleRow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.toggleText {
  color: var(--muted);
  font-size: 12px;
}

.mcOverrideRow {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 8px;
  align-items: center;
}

.controlLabel {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.1px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.controlSpacer {
  flex: 1;
  min-width: 10px;
}

.controlInput, .controlSelect {
  height: 36px;
  background: var(--surfaceElev);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 10px;
  outline: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.80) inset;
}

.controlInput::placeholder {
  color: rgba(11, 11, 15, 0.35);
}

.controlInput:focus, .controlSelect:focus {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 4px var(--focus-ring), 0 1px 0 rgba(255,255,255,0.85) inset;
}

.primaryButton {
  height: 36px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.70));
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-glass);
  transition: background 140ms ease, border-color 140ms ease, transform 80ms ease, box-shadow 140ms ease;
}

.primaryButton:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.76));
  border-color: rgba(15, 23, 42, 0.18);
}

.primaryButton:active {
  transform: translateY(0.5px);
}

.primaryButton:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring), var(--shadow-glass);
}

.primaryButton:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btnSpinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(11,11,15,0.22);
  border-top-color: rgba(11,11,15,0.65);
  display: none;
}

.isLoading .btnSpinner { display: inline-block; animation: spin 0.8s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

.status {
  margin-top: 8px;
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.status.isError { color: var(--red); }
.status.isOk { color: rgba(11,11,15,0.70); }
.status.isRunning { color: rgba(11,11,15,0.62); }

.results.hidden { display: none; }
.hidden { display: none !important; }

.surface {
  margin-top: 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  /* Tooltips: each surface is a stacking context (due to backdrop-filter). Make it
     positionable so we can raise the active surface above later siblings. */
  position: relative;
  z-index: 0;
}

/* When a tooltip is open/hovered/focused inside a surface, raise that entire surface
   above following sections so the tooltip isn't hidden behind the next card/table. */
.surface:has(.tipWrap.isOpen),
.surface:has(.tipWrap:hover),
.surface:has(.tipWrap:focus-within) {
  z-index: 1000;
}

.sectionHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.sectionTitle {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.15px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.sectionMeta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.muted { color: var(--muted); }

.info {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.60);
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}

.metricGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.metricGrid.metricGrid--regime {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.metricGrid.metricGrid--skewWingsTop {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metricGrid.metricGrid--eventRisk {
  /* Give "Top Drivers" a wider lane so we don't truncate */
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
}

.metricGrid.metricGrid--snapshot {
  /* Avoid awkward empty “holes” when we have 5–6 cards */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.metricGrid.metricGrid--snapshot #recCard {
  grid-column: 1 / -1;
}

/* Snapshot should visually match TA “instrument cards” (more glass + depth). */
.metricGrid.metricGrid--snapshot .metricCard {
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

/* Engine 2 Conditions: keep scan cards compact, push verbosity into "This Week Details" */
.e2Conditions .taCardInterp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.e2Conditions details .taCardInterp {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
  overflow: visible;
}

.e2Conditions .macroEventLine {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Engine 1: Summary + Regime overlay now use TA panel structure */
.e1Panel .taHeaderTitle .tipWrap { margin-left: 8px; }
.e1Panel .taCardTitle { display: inline-flex; align-items: center; gap: 8px; }
.e1Panel .tipBtn {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--ta-divider);
  background: transparent;
  font-weight: 900;
  color: var(--ta-muted);
  cursor: pointer;
}

.e1Panel #bufferTargetGrid.miniGrid { margin-top: 10px; }

/* Engine 1 Conditions: keep scan cards compact, push verbosity into Live details */
.e1Conditions .taCardInterp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.e1Conditions #bufferTargetCard .taCardInterp,
.e1Conditions details .taCardInterp {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
  overflow: visible;
}

/* Regime overlay should match TA “instrument cards” (glass + depth). */
.metricGrid.metricGrid--regime .metricCard {
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.metricGrid.metricGrid--regime #regimeMessage.metricValue--message {
  font-size: 14px;
  line-height: 1.40;
  letter-spacing: 0.02px;
}

.metricGrid.metricGrid--regime .info {
  cursor: pointer;
}

@media (max-width: 980px) {
  .metricGrid.metricGrid--snapshot #recCard {
    grid-column: auto;
  }
}

@media (max-width: 1200px) {
  .metricGrid.metricGrid--regime {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .metricGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .controlBarForm { flex-wrap: wrap; height: auto; padding: 8px 0; }
  .controlSpacer { display: none; }
}

@media (max-width: 640px) {
  .metricGrid.metricGrid--skewWingsTop { grid-template-columns: 1fr; }
}

.metricGrid.metricGrid--skewWingsBottom {
  grid-template-columns: 1fr;
}

.metricCard {
  padding: 14px 14px 12px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.78);
  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset;
}

.metricCard.isMuted {
  opacity: 0.65;
}

.metricLabel {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.metricValue {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0.12px;
}

.metricGrid--regime .metricValue {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0.12px;
}

.metricGrid--regime .metricValue .pill {
  font-weight: 600;
}

.metricValue--message {
  font-size: 20px;
  line-height: 1.18;
  letter-spacing: 0.10px;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ============================================================
   Technicals (Daily) Panel — desk scan UI (glass tokens)
   ============================================================ */
:root {
  /* Bind TA panel tokens to global app tokens so the whole app feels cohesive. */
  --ta-radius-lg: var(--radius-card);
  --ta-radius-md: var(--radius-control);
  --ta-blur: 18px;
  --ta-glass-bg: var(--surface);
  --ta-glass-border: var(--border);
  --ta-shadow: var(--shadow);
  --ta-text: var(--text);
  --ta-muted: var(--muted);
  --ta-divider: var(--line);
  --ta-pos: rgba(46, 204, 113, 0.14);
  --ta-neu: rgba(120, 140, 255, 0.12);
  --ta-neg: rgba(255, 77, 77, 0.12);
}

/* Dark-mode handled by global tokens; TA panel inherits via the bindings above. */

.taPanel {
  display: grid;
  gap: 12px;
  color: var(--ta-text);
}

.taGlass {
  background: var(--ta-glass-bg);
  border: 1px solid var(--ta-glass-border);
  border-radius: var(--ta-radius-lg);
  box-shadow: var(--ta-shadow);
  backdrop-filter: blur(var(--ta-blur));
}

.taHeader {
  padding: 14px 14px 10px;
  border-radius: var(--ta-radius-lg);
  background: var(--ta-glass-bg);
  border: 1px solid var(--ta-glass-border);
  box-shadow: var(--ta-shadow);
  backdrop-filter: blur(var(--ta-blur));
}

.taHeaderRow {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.taHeaderRow--sub {
  margin-top: 10px;
  justify-content: flex-start;
}

.taHeaderTitle {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08px;
}

.taHeaderMeta {
  font-size: 12px;
  color: var(--ta-muted);
  font-weight: 650;
}

.taBiasPill {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08px;
  border: 1px solid var(--ta-divider);
}

.taBiasPill--pos { background: var(--ta-pos); }
.taBiasPill--neu { background: var(--ta-neu); }
.taBiasPill--neg { background: var(--ta-neg); }

.taConf {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 0 6px;
}

.taDot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  border: 1px solid var(--ta-divider);
  background: transparent;
}

.taDot.isOn {
  background: rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
  .taDot.isOn { background: rgba(255, 255, 255, 0.72); }
}

.taChips {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.taChip {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--ta-divider);
  font-size: 12px;
  font-weight: 650;
  color: var(--ta-muted);
  background: rgba(0, 0, 0, 0.02);
}

@media (prefers-color-scheme: dark) {
  .taChip { background: rgba(255, 255, 255, 0.02); }
}

.taHeaderActions {
  margin-left: auto;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.taModeToggle {
  display: inline-flex;
  border: 1px solid var(--ta-divider);
  border-radius: 999px;
  overflow: hidden;
}

.taModeBtn {
  padding: 6px 10px;
  background: transparent;
  border: 0;
  font-size: 12px;
  font-weight: 750;
  color: var(--ta-muted);
  cursor: pointer;
}

.taModeBtn.isOn {
  color: var(--ta-text);
  background: rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
  .taModeBtn.isOn { background: rgba(255, 255, 255, 0.08); }
}

.taActionBtn {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ta-divider);
  background: transparent;
  font-size: 12px;
  font-weight: 750;
  color: var(--ta-text);
  cursor: pointer;
}

.taActionBtn:focus,
.taModeBtn:focus,
.taLinkBtn:focus,
.taInfoBtn:focus {
  outline: 2px solid rgba(110, 168, 254, 0.55);
  outline-offset: 2px;
}

.taGrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 920px) {
  .taGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.taGrid.taGrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 920px) { .taGrid.taGrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 540px) { .taGrid.taGrid--4 { grid-template-columns: 1fr; } }

.taCard {
  padding: 12px;
  border-radius: var(--ta-radius-lg);
  border: 1px solid var(--ta-glass-border);
  background: var(--ta-glass-bg);
  box-shadow: var(--ta-shadow);
  backdrop-filter: blur(var(--ta-blur));
  cursor: default;
}

.taCardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.taCardTitle {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08px;
  color: var(--ta-muted);
}

.taInfoBtn {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--ta-divider);
  background: transparent;
  font-weight: 900;
  color: var(--ta-muted);
  cursor: pointer;
}

.taCardVis {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
}

.taVis { width: 100%; max-width: 120px; height: auto; }

.taCardState {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0.06px;
}

.taCardInterp {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ta-muted);
  line-height: 1.28;
}

.taCardMoreRow {
  margin-top: 8px;
}

.taCardExplain {
  font-size: 11px;
  line-height: 1.30;
  color: var(--ta-muted);
}

.taBreaks {
  padding: 12px;
  background: linear-gradient(0deg, var(--ta-neg), var(--ta-neg)), var(--ta-glass-bg);
}

.taBreaksTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.taBreaksTitle {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06px;
}

.taAnalysis {
  padding: 12px;
}

.taAnalysisTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.taAnalysisTitle {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06px;
}

.taNarrativeText {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ta-text);
  white-space: pre-wrap;
}

.taLinkBtn {
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: var(--ta-muted);
  font-weight: 800;
  cursor: pointer;
}

.taList,
.taMiniList {
  margin: 8px 0 0 18px;
  padding: 0;
  display: grid;
  gap: 6px;
  color: var(--ta-text);
  font-size: 12px;
  line-height: 1.35;
}

.taMiniList {
  font-size: 12px;
  color: var(--ta-muted);
}

.taDetails {
  padding: 12px;
  border-radius: var(--ta-radius-lg);
  border: 1px solid var(--ta-glass-border);
  background: var(--ta-glass-bg);
  box-shadow: var(--ta-shadow);
  backdrop-filter: blur(var(--ta-blur));
}

.taDetails summary {
  cursor: pointer;
  font-weight: 850;
  color: var(--ta-muted);
}

/* Calendar: +N expand panel (month cells use dynamic height) */

.calExpandPanel {
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.90);
  box-shadow: 0 18px 50px rgba(15, 20, 30, 0.16);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  display: flex;
  flex-direction: column;
  z-index: 50;
}

.calExpandTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.calExpandTitle {
  font-size: 12px;
  font-weight: 900;
  color: rgba(11,11,15,0.70);
  letter-spacing: 0.10px;
}

.calExpandBody {
  padding: 10px 12px 12px;
  overflow: auto;
}

.calExpandPills,
.calExpandEvents {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.calExpandTicker {
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.06px;
}

.calExpandTicker:hover { background: var(--hover); }
.calExpandTicker:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Popover (card details) */
.taPopoverOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  display: grid;
  place-items: center;
  padding: 18px;
  z-index: 9999;
}

@media (prefers-color-scheme: dark) {
  .taPopoverOverlay { background: rgba(0, 0, 0, 0.45); }
}

.taPopover {
  width: min(560px, 92vw);
  max-height: min(78vh, 680px);
  overflow: auto;
  padding: 14px;
}

.taPopoverTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ta-divider);
}

.taPopoverTitle {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.06px;
}

.taPopoverClose {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--ta-divider);
  background: transparent;
  font-size: 18px;
  font-weight: 900;
  color: var(--ta-muted);
  cursor: pointer;
}

.taPopoverBody {
  padding-top: 10px;
}

.taPopoverValue {
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.04px;
}

.taPopoverDelta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ta-muted);
}

.taPopoverLevels {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ta-divider);
  display: grid;
  gap: 8px;
}

.taLevelRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
}

.taLevelK {
  font-size: 12px;
  color: var(--ta-muted);
  font-weight: 800;
}

.taLevelV {
  font-size: 12px;
  font-weight: 850;
}

/* Tooltip popover (card info 'i') */
.taTipPop {
  position: fixed;
  z-index: 10000;
  width: min(420px, 86vw);
  padding: 10px 12px;
  border-radius: 14px;
}

.taTipPopBody {
  font-size: 12px;
  line-height: 1.35;
  color: var(--ta-text);
}

/* Micro-visual strokes */
.taArcBase { stroke: var(--ta-divider); stroke-width: 6; stroke-linecap: round; }
.taArc { stroke-width: 6; stroke-linecap: round; stroke-dasharray: 130; stroke-dashoffset: 0; opacity: 0.22; }
.taArc--positive { stroke: rgba(46, 204, 113, 0.85); }
.taArc--neutral { stroke: rgba(120, 140, 255, 0.85); }
.taArc--negative { stroke: rgba(255, 77, 77, 0.85); }
.taArcDot { fill: var(--ta-text); }

.taBarBase { fill: rgba(0, 0, 0, 0.08); }
@media (prefers-color-scheme: dark) { .taBarBase { fill: rgba(255, 255, 255, 0.10); } }
.taBarFill { fill: rgba(120, 140, 255, 0.55); }
.taBarDot { fill: var(--ta-text); }

.taBadgeLine { fill: rgba(0, 0, 0, 0.10); }
@media (prefers-color-scheme: dark) { .taBadgeLine { fill: rgba(255, 255, 255, 0.12); } }
.taBadgeDot--positive { fill: rgba(46, 204, 113, 0.75); }
.taBadgeDot--neutral { fill: rgba(120, 140, 255, 0.75); }
.taBadgeDot--negative { fill: rgba(255, 77, 77, 0.75); }
.taBadgeDot--mixed { fill: rgba(200, 200, 210, 0.75); }

.taStackLine { fill: rgba(0, 0, 0, 0.10); }
@media (prefers-color-scheme: dark) { .taStackLine { fill: rgba(255, 255, 255, 0.12); } }
.taStackDot--positive { fill: rgba(46, 204, 113, 0.75); }
.taStackDot--negative { fill: rgba(255, 77, 77, 0.75); }
.taStackDot--mixed { fill: rgba(200, 200, 210, 0.75); }

/* Snapshot-specific tightening (Engine 2) */
#recMain {
  font-size: 20px;
  line-height: 1.12;
  letter-spacing: 0.10px;
}

.snapshotLines {
  margin-top: 8px;
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 550;
  color: rgba(11,11,15,0.74);
}

.snapLine {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  align-items: start;
}

.snapKey {
  color: rgba(11,11,15,0.48);
  font-weight: 650;
  letter-spacing: 0.08px;
}

.pillRow {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.pill.pill--mini {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 650;
}

.snapDetails {
  margin-top: 2px;
}

.snapDetails summary {
  list-style: none;
  cursor: pointer;
  color: rgba(0, 122, 255, 0.90);
  font-weight: 650;
  user-select: none;
}

.snapDetails summary::-webkit-details-marker { display: none; }

.snapDetails summary:after {
  content: " ▾";
  color: rgba(0, 122, 255, 0.70);
  font-weight: 700;
}

.snapDetails[open] summary:after { content: " ▴"; }

.snapDetailBody {
  margin-top: 8px;
  color: rgba(11,11,15,0.70);
  font-weight: 550;
  line-height: 1.35;
}

.chipRow {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.62);
  font-size: 12px;
  font-weight: 650;
  color: rgba(11,11,15,0.72);
}

.chip .k { color: rgba(11,11,15,0.50); font-weight: 700; }

/* Macro week list formatting (Engine 2 Snapshot) */
.macroEventList {
  margin-top: 6px;
  display: grid;
  gap: 6px;
}

.macroEventLine {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.metricGrid--regime #bufferTargetCard .segmented {
  margin-top: 8px;
}

.metricGrid--regime #bufferTargetCard .segButton {
  padding: 5px 9px;
  font-size: 11px;
}

.metricGrid--regime #bufferTargetCard .miniGrid {
  margin-top: 10px;
}

.metricValueSub {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.1px;
}

.segmented {
  margin-top: 10px;
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(2, 6, 23, 0.02);
}

.controlGroup .segmented {
  /* In control bars, the label + control are already vertically spaced by the grid gap. */
  margin-top: 0;
}

.underlyingToggle {
  padding: 3px;
  gap: 4px;
  justify-self: start;
  width: max-content;
}

.segButton.segButton--logo {
  padding: 2px;
  border-radius: 10px;
  line-height: 0;
  background: rgba(11, 11, 15, 0.88);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset;
}

.segButton.segButton--logo.isActive {
  /* Override the generic white active state for logo tiles */
  background: rgba(11, 11, 15, 0.96);
  border-color: rgba(10, 132, 255, 0.35);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.18), 0 1px 0 rgba(255,255,255,0.14) inset;
  color: rgba(255,255,255,0.92);
}

.segButton.segButton--logo:hover {
  background: rgba(11, 11, 15, 0.92);
}

.segButton.segButton--logo:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring), 0 1px 0 rgba(255,255,255,0.14) inset;
}

.underlyingLogo {
  width: 34px;
  height: 34px;
  display: block;
}

.segButton {
  border: 1px solid transparent;
  background: transparent;
  color: rgba(11,11,15,0.62);
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.segButton.isActive {
  background: rgba(255,255,255,0.80);
  border-color: var(--border);
  color: rgba(11,11,15,0.88);
}

.segButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.miniGrid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  font-size: 13px;
}

.miniGrid .k {
  color: var(--muted);
  font-weight: 500;
}

.miniGrid .v {
  font-weight: 650;
}

.tradeBuilder {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.tradeBuilderControls {
  display: grid;
  gap: 10px;
}

.tbRow {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 10px;
}

@media (max-width: 820px) {
  .tbRow { grid-template-columns: 1fr; }
}

.tbLabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.tbInputs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.tradeBuilderOutputs {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 820px) {
  .tradeBuilderOutputs { grid-template-columns: 1fr; }
}

.tbColTitle {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1px;
  color: rgba(11,11,15,0.72);
  margin-bottom: 6px;
}

.advCol { display: none; }
.showAdvanced .advCol { display: table-cell; }

.metricCaption {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.metricCard,
.quarterCard {
  transition: background 120ms ease, border-color 120ms ease;
}

.metricCard:hover,
.quarterCard:hover {
  border-color: rgba(15, 23, 42, 0.16);
  background: rgba(255,255,255,0.88);
}

.actionSummary {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1px;
}

.tradeReadStrip {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.70);
  color: rgba(11, 11, 15, 0.78);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sectionDivider {
  height: 1px;
  background: var(--line);
  margin: 16px 2px 2px;
  border-radius: 999px;
}

.regimeValidationGrid {
  display: grid;
  gap: 8px;
  font-size: 13px;
}

.rvLine {
  color: var(--muted);
  font-weight: 500;
}

.execNote {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.70);
}

.execNoteTitle {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.execNoteBody {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

.execNoteRule {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.9;
}

.mono, .num, td.num, th.num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-variant-numeric: tabular-nums;
}

.quarterGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1100px) {
  .quarterGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.quarterCard {
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.78);
  padding: 14px;
}

.quarterTop {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.quarterHeading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.quarterLabel {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.kv {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 10px;
  margin-top: 12px;
  font-size: 13px;
}

.kv .k { color: var(--muted); font-weight: 500; }
.kv .v { font-weight: 600; }

.finePrint {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
}

.tableWrap {
  margin-top: 8px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,0.78);
  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset;
}

.dataTable {
  border-collapse: collapse;
  width: 100%;
  min-width: 1150px;
  font-size: 13px;
}

th, td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  vertical-align: top;
  white-space: nowrap;
}

thead th {
  position: sticky;
  top: 0;
  background: rgba(245, 245, 247, 0.92);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  z-index: 1;
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

tbody tr:hover { background: var(--hover); }

tr.row--breach { background: rgba(255, 59, 48, 0.08); }
tr.row--near { background: rgba(255, 159, 10, 0.08); }

.ref {
  opacity: 0.75;
  font-size: 12px;
}

.regimeCell .pill {
  padding: 3px 10px;
}

.regimeMult {
  margin-left: 8px;
  color: var(--muted2);
  font-weight: 600;
  font-size: 12px;
}

.gateCell .pill {
  padding: 4px 12px;
  font-weight: 700;
}

.linkButton {
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.linkButton:hover { filter: brightness(0.95); }

.spacerDot { margin: 0 8px; color: rgba(11,11,15,0.30); }

.breachCell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.breachDot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  vertical-align: middle;
}

.breachDot--bad {
  background: rgba(255, 59, 48, 0.18);
  border-color: rgba(255, 59, 48, 0.35);
}

.breachDot--good {
  background: rgba(52, 199, 89, 0.16);
  border-color: rgba(52, 199, 89, 0.32);
}

.breachLabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1px;
  background: rgba(255,255,255,0.55);
}

.pill.good { color: var(--green); border-color: rgba(52, 199, 89, 0.30); }
.pill.bad { color: var(--red); border-color: rgba(255, 59, 48, 0.32); }
.pill.warn { color: var(--amber); border-color: rgba(255, 159, 10, 0.28); }
.pill.neutral { color: rgba(11,11,15,0.55); border-color: var(--border); }

.eventRiskList {
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(11,11,15,0.74);
  font-size: 13px;
  font-weight: 550;
}

.eventRiskBody {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.08px;
  line-height: 1.25;
}

.eventRiskBody .eventRiskList {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.28;
}

.eventRiskBody .eventRiskMuted {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
}

.eventRiskList li {
  margin: 6px 0;
}

.eventRiskMuted {
  color: rgba(11,11,15,0.55);
  font-weight: 500;
}

.eventRiskKicker {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.60);
  font-size: 12px;
  font-weight: 650;
  color: rgba(11,11,15,0.72);
}

.delta {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.delta.pos { color: var(--red); }
.delta.neg { color: var(--green); }
.delta.zero { color: var(--muted); font-weight: 600; }

/* ---- Tooltips (Engine 2 + general) ---- */
.tipWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tipBtn {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.60);
  color: rgba(11,11,15,0.62);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}

/* ===========================
   Calendar Front Page (v1)
   =========================== */

.calHero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 10px 0 14px;
}

.calHeroLeft {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.calHeroLogo {
  width: 62px;
  height: 62px;
  object-fit: contain;
  border-radius: 18px;
  background: var(--bg2);
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(15, 20, 30, 0.10);
}

.calHeroText { min-width: 0; }

.calHeroTitle {
  font-size: 26px;
  font-weight: 850;
  letter-spacing: -0.4px;
}

.calHeroSubtitle {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.calHeroRight {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.calTopBar {
  margin-top: 6px;
}

.calTopBarRow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.calNav {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.calTitleWrap {
  min-width: 220px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calRangeTitle {
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -0.2px;
}

.calRangeSub {
  font-size: 12px;
  font-weight: 550;
}

.calGridWrap { margin-top: 14px; }

.calGrid {
  display: grid;
  gap: 12px;
}

.calGrid--month { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.calGrid--week { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.calGrid--day { grid-template-columns: 1fr; }
.calGrid--month { grid-auto-rows: auto; }
.calGrid--week { grid-auto-rows: auto; }

@media (max-width: 1100px) { .calGrid--month { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .calGrid--month { grid-template-columns: repeat(2, minmax(0, 1fr)); } .calGrid--week { grid-template-columns: 1fr; } }

.calCell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  padding: 10px;
  min-height: 170px;
  position: relative;
  overflow: hidden;
}

.calHeadCell {
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 850;
  color: rgba(11,11,15,0.55);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.calCell.isOutside { opacity: 0.55; }

.calCell.isWeekend {
  background: rgba(255,255,255,0.58);
}

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

.calCellDate {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
}

.calDow {
  font-size: 11px;
  font-weight: 750;
  color: rgba(11,11,15,0.55);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.calDayNum {
  font-size: 16px;
  font-weight: 850;
  letter-spacing: -0.2px;
}

.calEvents {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.pill.pill--event {
  font-size: 11px;
  font-weight: 750;
  padding: 3px 10px;
  background: rgba(255,255,255,0.70);
}

.pill.pill--event.holiday { color: rgba(115, 78, 166, 0.95); border-color: rgba(115, 78, 166, 0.25); }
.pill.pill--event.earlyClose { color: rgba(60, 60, 67, 0.78); border-color: rgba(60, 60, 67, 0.22); }
.pill.pill--event.fed { color: rgba(255, 149, 0, 0.95); border-color: rgba(255, 149, 0, 0.28); }
.pill.pill--event.econ { color: rgba(10, 132, 255, 0.95); border-color: rgba(10, 132, 255, 0.25); }
.pill.pill--event.treasury { color: rgba(48, 209, 88, 0.95); border-color: rgba(48, 209, 88, 0.25); }
.pill.pill--event.opex { color: rgba(255, 59, 48, 0.88); border-color: rgba(255, 59, 48, 0.22); }

.calEGroup { margin-top: 8px; }

.calEGroupHead {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(11,11,15,0.52);
  letter-spacing: 0.25px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

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

.calGrid--month .calTiles {
  /* Month grid cells are narrow; use a consistent 2-column tile layout (≈4 rows max when capped). */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.calGrid--week .calTiles,
.calGrid--day .calTiles {
  /* Match Month: 2-column tile grid. Use fixed tile widths so cards don't stretch wide. */
  display: grid;
  grid-template-columns: repeat(2, 112px);
  gap: 8px;
  justify-content: start; /* left-justify within the day cell */
}

.calGrid--month .calTile {
  /* Tighten spacing so the logo can be larger (better density in month view). */
  padding: 4px 6px;
  gap: 3px;
}

.calGrid--month .calTileLogo {
  width: 58px;
  height: 58px;
}

.calGrid--month .calTileTicker {
  font-size: 10px;
}

.calGrid--week .calTile,
.calGrid--day .calTile {
  /* Match month view density for visual consistency across views. */
  padding: 6px 8px;
  gap: 4px;
  width: auto;           /* override base 100% so it doesn't become a wide pill */
  min-width: 0;
  aspect-ratio: 1 / 1;   /* keep square shape (especially when only 1 ticker exists) */
  justify-self: start;   /* left-justify a single tile in the grid */
}

.calGrid--week .calTileLogo,
.calGrid--day .calTileLogo {
  width: 58px;
  height: 58px;
}

.calGrid--week .calTileTicker,
.calGrid--day .calTileTicker {
  font-size: 10px;
}

.calGrid--week .calTileMore,
.calGrid--day .calTileMore {
  justify-self: start;
}

.calTile {
  appearance: none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.80);
  color: rgba(11,11,15,0.88);
  border-radius: 14px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset;
  transition: transform 80ms ease, background 140ms ease, border-color 140ms ease;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 66px;
  width: 100%;
}

.calTile:hover {
  background: rgba(255,255,255,0.92);
  border-color: rgba(15, 23, 42, 0.18);
}

.calTile:active { transform: translateY(0.5px); }

.calTileLogo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 12px;
  /* Dark charcoal so white/transparent logos (e.g. BA, NKE) remain visible. */
  background: var(--logoTileBg);
  border: 1px solid rgba(15, 23, 42, 0.16);
  box-shadow: 0 10px 26px rgba(15, 20, 30, 0.08);
  /* Adds contrast for light/white marks on transparent PNGs. */
  filter: drop-shadow(0 1px 2px rgba(15, 20, 30, 0.22));
}

.calTile--noLogo .calTileLogo { display: none; }

.calTileTicker {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.25px;
}

.tickerInputRow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tickerLogo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 10px;
  background: var(--logoTileBg);
  border: 1px solid rgba(15, 23, 42, 0.16);
  box-shadow: 0 10px 18px rgba(15, 20, 30, 0.06);
  filter: drop-shadow(0 1px 2px rgba(15, 20, 30, 0.22));
}

.popoverTitleRow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.popoverLogo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 12px;
  background: var(--logoTileBg);
  border: 1px solid rgba(15, 23, 42, 0.16);
  filter: drop-shadow(0 1px 2px rgba(15, 20, 30, 0.22));
}

.calEventPill {
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
}

.calEventPill.pill {
  border: 1px solid var(--border);
  padding: 6px 10px;
}

.macroMeta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
}

.macroSection {
  margin-top: 12px;
}

.macroSectionTitle {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2px;
  margin-bottom: 6px;
}

.macroBullets ul {
  margin: 0;
  padding-left: 18px;
  color: rgba(11,11,15,0.80);
  font-size: 12px;
  line-height: 1.4;
}

.macroBullets li { margin: 6px 0; }

.calTileMore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px dashed rgba(15, 23, 42, 0.18);
  background: rgba(255,255,255,0.55);
  font-size: 12px;
  font-weight: 800;
  color: rgba(11,11,15,0.55);
  cursor: pointer;
  appearance: none;
}

.calTileMore:hover { background: var(--hover); }
.calTileMore:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(10, 14, 22, 0.18);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  z-index: 5000;
}

.modalCard {
  width: min(720px, 92vw);
  border-radius: 22px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.86);
  box-shadow: 0 18px 50px rgba(15, 20, 30, 0.16);
  overflow: hidden;
}

.modalHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.modalTitle {
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.2px;
}

.modalBody { padding: 14px 16px 6px; }

.modalSection { padding: 10px 0 14px; border-bottom: 1px solid rgba(15, 23, 42, 0.06); }
.modalSection:last-child { border-bottom: none; }

.modalSectionTitle {
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.18px;
  color: rgba(11,11,15,0.65);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.modalChecks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
@media (max-width: 560px) { .modalChecks { grid-template-columns: 1fr; } }

.checkRow {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  font-weight: 650;
  color: rgba(11,11,15,0.78);
}

.modalFoot {
  padding: 14px 16px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  display: flex;
  justify-content: flex-end;
}

.iconBtn {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.75);
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  color: rgba(11,11,15,0.65);
}

/* Popover (ticker detail) */
.popover {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: min(520px, calc(100vw - 36px));
  z-index: 6000;
}

.popoverCard {
  border-radius: 22px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.88);
  box-shadow: 0 18px 50px rgba(15, 20, 30, 0.18);
  overflow: hidden;
}

.popoverHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.popoverTitle {
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.2px;
}

.popoverBody { padding: 14px 16px 10px; }
.popoverFoot { padding: 12px 16px 14px; border-top: 1px solid rgba(15, 23, 42, 0.08); }

/* Allow popovers to work on smaller viewports (so bottom rows are reachable). */
.popoverBody {
  max-height: min(70vh, 640px);
  overflow: auto;
}

.popGrid { display: grid; gap: 8px; }
.popRow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.popKey { color: rgba(11,11,15,0.55); font-size: 12px; font-weight: 700; }
.popVal { font-size: 13px; font-weight: 800; color: rgba(11,11,15,0.86); }

.rankChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.70);
  font-weight: 900;
  letter-spacing: 0.3px;
}
.rankChip--A { color: var(--green); border-color: rgba(52, 199, 89, 0.30); }
.rankChip--B { color: rgba(0, 122, 255, 0.90); border-color: rgba(0, 122, 255, 0.25); }
.rankChip--C { color: rgba(11,11,15,0.70); border-color: rgba(11,11,15,0.18); }
.rankChip--D { color: var(--amber); border-color: rgba(255, 159, 10, 0.28); }
.rankChip--F { color: var(--red); border-color: rgba(255, 59, 48, 0.30); }

.tipBtn:hover {
  background: rgba(255,255,255,0.82);
  border-color: rgba(15, 23, 42, 0.16);
}

.tipBtn:active { transform: translateY(0.5px); }

.tipBtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring), 0 1px 0 rgba(255,255,255,0.85) inset;
}

.tipPanel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 76vw);
  z-index: 1001;
  padding: 12px 12px 11px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 40px rgba(15, 20, 30, 0.18);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  color: rgba(11,11,15,0.88);
  display: none;
  max-height: min(60vh, 520px);
  overflow: auto;
}

.tipWrap.isOpen .tipPanel {
  display: block;
}

/* In popovers, make tooltips fixed-position + JS-positioned so they never get clipped. */
.tipWrap--fixed .tipPanel {
  position: fixed;
  top: 0;
  left: 0;
  transform: none;
  width: min(440px, calc(100vw - 28px));
  z-index: 9999;
}
.tipWrap--fixed .tipPanel:before { display: none; }

/* --- Engine 2: Dealer Gamma Map (clean hover chart) --- */
.chartCard {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255,255,255,0.78);
  box-shadow: 0 12px 32px rgba(15, 20, 30, 0.10);
  padding: 12px;
  overflow: hidden;
}

/* --- Engine 2: Net $GEX Heat Map --- */
.gexHeatmap {
  width: 100%;
  min-height: 240px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255,255,255,0.55);
  overflow: hidden;
}

.gexMetrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.gexMetric {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255,255,255,0.62);
  border-radius: 14px;
  padding: 10px 12px;
}

.gexMetricK {
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.1px;
  color: rgba(11,11,15,0.70);
}

.gexMetricV {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 850;
  color: rgba(11,11,15,0.92);
}

.gexStabilityChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255,255,255,0.72);
  font-weight: 900;
  letter-spacing: 0.1px;
}
.gexStabilityChip.isStable { background: rgba(22, 163, 74, 0.10); border-color: rgba(22, 163, 74, 0.18); }
.gexStabilityChip.isAsym { background: rgba(234, 179, 8, 0.12); border-color: rgba(234, 179, 8, 0.20); }
.gexStabilityChip.isFragile { background: rgba(220, 38, 38, 0.10); border-color: rgba(220, 38, 38, 0.18); }

.gexSvg {
  display: block;
  width: 100%;
  height: auto;
}

.gexBg { fill: rgba(255,255,255,0.55); }

.gexAxis {
  font-size: 11px;
  font-weight: 750;
  fill: rgba(11, 11, 15, 0.52);
  user-select: none;
  pointer-events: none;
}
.gexAxis--x { letter-spacing: -0.2px; }
.gexAxis--y { letter-spacing: 0.0px; }

.gexCell {
  shape-rendering: geometricPrecision;
  stroke: rgba(15, 23, 42, 0.06);
  stroke-width: 0.7;
}

.gexBoundary {
  stroke: rgba(15, 23, 42, 0.45);
  stroke-width: 1.4;
  stroke-dasharray: 6 6;
}
.gexBoundary--down { stroke: rgba(220, 38, 38, 0.55); }
.gexBoundary--up { stroke: rgba(22, 163, 74, 0.55); }

.gexBoundaryLabel {
  font-size: 11px;
  font-weight: 850;
  fill: rgba(11, 11, 15, 0.58);
  letter-spacing: -0.1px;
  user-select: none;
  pointer-events: none;
}

.gexSpot {
  stroke: rgba(11, 11, 15, 0.32);
  stroke-width: 1.2;
}
.gexSpotLabel {
  font-size: 11px;
  font-weight: 900;
  fill: rgba(11, 11, 15, 0.46);
  letter-spacing: -0.1px;
  user-select: none;
  pointer-events: none;
}

.gammaChart {
  width: 100%;
  height: 260px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255,255,255,0.55);
}

.gammaSvg {
  display: block;
  width: 100%;
  height: 260px;
}

.gammaBg { fill: rgba(255,255,255,0.55); }

.gammaPrice {
  fill: none;
  stroke: rgba(15, 23, 42, 0.86);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gammaLine {
  stroke-width: 1.4;
  opacity: 0.55;
  stroke-linecap: round;
}
.gammaLine.isHover { opacity: 0.95; stroke-width: 2.4; }

.gammaLine--putWall { stroke: rgba(220, 38, 38, 0.95); stroke-dasharray: 6 6; }
.gammaLine--callWall { stroke: rgba(22, 163, 74, 0.95); stroke-dasharray: 6 6; }
.gammaLine--cluster { stroke: rgba(11, 11, 15, 0.44); stroke-dasharray: 3 6; }
.gammaLine--gammaPeak { stroke: rgba(99, 102, 241, 0.92); stroke-dasharray: 2 7; }
.gammaLine--gammaFlip { stroke: rgba(17, 24, 39, 0.72); stroke-dasharray: 10 6; }

.gammaCross {
  stroke: rgba(11, 11, 15, 0.20);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.gammaDot { fill: rgba(15, 23, 42, 0.85); }

.gammaLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.chipToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255,255,255,0.60);
  color: rgba(11,11,15,0.72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.1px;
  cursor: pointer;
  user-select: none;
}
.chipToggle:hover { background: rgba(255,255,255,0.78); }
.chipToggle.isOn {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.14);
  color: rgba(11,11,15,0.92);
}

.chartTip {
  position: absolute;
  z-index: 40;
  min-width: 220px;
  max-width: 240px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 18px 50px rgba(15, 20, 30, 0.14);
  pointer-events: none;
}
.chartTipTitle { font-size: 12px; font-weight: 900; letter-spacing: 0.1px; margin-bottom: 4px; }
.chartTipBody { font-size: 12px; color: rgba(11,11,15,0.78); line-height: 1.35; }
.chartTipDivider { height: 1px; background: rgba(15, 23, 42, 0.08); margin: 8px 0; }

.tipPanel:before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.92);
  border-left: 1px solid rgba(15, 23, 42, 0.12);
  border-top: 1px solid rgba(15, 23, 42, 0.12);
}

.tipTitle {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1px;
  margin-bottom: 6px;
}

.tipBody {
  font-size: 12px;
  font-weight: 550;
  line-height: 1.35;
  color: rgba(11,11,15,0.78);
  white-space: normal;
}

.tipBody p {
  margin: 8px 0 0;
}

.tipBody p:first-child { margin-top: 0; }

.tipBody ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.tipBody li { margin: 6px 0; }

/* AskRaven chat removed */

/* ===========================
   Landing Page (root domain)
   =========================== */

body.landingPage {
  background:
    radial-gradient(1000px 700px at 18% -10%, rgba(0, 122, 255, 0.09), transparent 60%),
    radial-gradient(900px 600px at 88% 10%, rgba(52, 199, 89, 0.06), transparent 62%),
    var(--bg2);
}

.landingShell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 20px 56px;
}

.landingHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-glass);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.landingBrand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.landingNav { display: inline-flex; align-items: center; gap: 10px; }

.landingLogo {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  box-shadow: 0 10px 26px rgba(15, 20, 30, 0.10);
}

.landingBrandText { min-width: 0; }
.landingBrandName { font-weight: 900; letter-spacing: -0.3px; font-size: 16px; }
.landingBrandTagline { margin-top: 2px; font-size: 12px; color: var(--muted); font-weight: 650; }

.landingPill {
  margin-left: 6px;
  height: 26px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.70);
  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset;
  color: rgba(11,11,15,0.72);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: -0.1px;
  white-space: nowrap;
}

.landingHero {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 0.95fr 1.35fr;
  gap: 18px;
  align-items: stretch;
}

.landingHeroCopy {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-glass);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.landingH1 {
  margin: 0;
  font-size: 36px;
  font-weight: 950;
  letter-spacing: -0.6px;
  line-height: 1.08;
}

.landingLead {
  margin: 12px 0 0;
  color: rgba(11, 11, 15, 0.72);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
}

.landingCtas {
  margin-top: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.landingBullets {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.landingBullets li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: rgba(11, 11, 15, 0.74);
}

.landingBullets li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 122, 255, 0.18);
  border: 1px solid rgba(0, 122, 255, 0.22);
  box-shadow: 0 1px 0 rgba(255,255,255,0.75) inset;
}

.landingHeroMedia {
  margin: 0;
  border-radius: 22px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--border);
  box-shadow: 0 18px 60px rgba(15, 20, 30, 0.10);
  overflow: hidden;
}

.landingHeroFrame {
  border-radius: 18px;
  background:
    radial-gradient(900px 600px at 12% 12%, rgba(0, 122, 255, 0.07), transparent 55%),
    radial-gradient(900px 600px at 92% 18%, rgba(52, 199, 89, 0.05), transparent 58%),
    rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 18px 18px 16px;
}

.landingHeroImage {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  background: var(--bg2);
}

.landingHeroCaption {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
}

.landingFeatures {
  margin-top: 18px;
}

.landingFeatureGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.landingCard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.70);
  box-shadow: var(--shadow-glass);
  padding: 14px 14px;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.landingCard:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset, 0 18px 55px rgba(15, 20, 30, 0.10);
}

.landingCard:active {
  transform: translateY(0px);
}

.landingCardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.landingCardLeft {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.landingCardIcon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.landingCardIcon img {
  width: 20px;
  height: 20px;
  display: block;
}

.landingCardTitle {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.1px;
  min-width: 0;
}

.landingCardChip {
  height: 24px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(15, 23, 42, 0.04);
  color: rgba(11,11,15,0.74);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: -0.1px;
  white-space: nowrap;
}

.landingCardBody {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  color: rgba(11, 11, 15, 0.72);
}

.landingFooter {
  margin-top: 18px;
  padding: 14px 2px 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.landingFootLine {
  font-size: 12px;
  font-weight: 650;
  color: rgba(11, 11, 15, 0.72);
}

.landingFootMuted {
  margin-top: 6px;
  color: rgba(11, 11, 15, 0.55);
}

@media (max-width: 980px) {
  .landingHero { grid-template-columns: 1fr; }
  .landingH1 { font-size: 30px; }
  .landingFeatureGrid { grid-template-columns: 1fr; }
  .landingHeroFrame { padding: 14px 14px 12px; }
}

@media (max-width: 640px) {
  .landingShell { padding: 18px 14px 46px; }
  .landingHeader { padding: 10px 12px; flex-wrap: wrap; }
  .landingPill { margin-left: 0; }
  .landingH1 { font-size: 28px; }
  .landingHeroCopy { padding: 16px; }
  .landingHeroMedia { padding: 10px; }
  .landingCtas { gap: 8px; }
}