/* ============================================================
   Strategy Dashboard — the strategy dashboard overlay and its charts.
   ============================================================ */
#strategyOverlay.open { display: flex; }
#strategyPanel {
  width: 94vw; height: 92vh; max-width: 1500px;
  background: linear-gradient(160deg, #10121f 0%, #0b0c16 100%);
  border: 1px solid rgba(212,175,55,0.18); border-radius: var(--r-xl);
  box-shadow: 0 24px 80px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.03);
  display: flex; flex-direction: column; overflow: hidden;
  animation: cmdFadeIn 0.15s ease;
}
#stratHeader {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
  background: rgba(212,175,55,0.03);
}
#stratHeader img { width: 22px; height: 22px; }
#stratTitle { font-size: 15px; font-weight: 700; color: var(--gold); letter-spacing: 0.02em; }
#stratSub { font-size: 11px; color: var(--txt2); font-family: 'Share Tech Mono', monospace; }
#stratModeBadge {
  margin-left: auto; font-family: 'Share Tech Mono', monospace; font-size: 10.5px;
  padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid rgba(212,175,55,0.3);
  background: rgba(212,175,55,0.08); color: var(--gold); white-space: nowrap;
  cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
#stratModeBadge:hover { background: rgba(212,175,55,0.16); border-color: rgba(212,175,55,0.55); }
#stratCloseBtn {
  width: 28px; height: 28px; border-radius: var(--r-sm); background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08); color: var(--txt2); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
#stratCloseBtn:hover { background: rgba(242,54,69,0.15); color: var(--red); border-color: rgba(242,54,69,0.4); }
#stratTabs {
  display: flex; gap: 2px; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0; background: rgba(0,0,0,0.15);
}
.stratTab {
  padding: 10px 16px; font-size: 12px; color: var(--txt2); cursor: pointer;
  border-bottom: 2px solid transparent; transition: color 0.12s, border-color 0.12s;
  font-family: 'Inter', sans-serif; user-select: none;
}
.stratTab:hover { color: var(--txt1); }
.stratTab.active { color: var(--gold); border-bottom-color: var(--gold); }
#stratBody { flex: 1; overflow-y: auto; padding: 18px; min-height: 0; }
.stratPane { display: none; }
.stratPane.active { display: block; animation: cmdFadeIn 0.12s ease; }

/* Quiet-system alert */
#stratQuietAlert {
  display: none; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px;
  background: rgba(242,54,69,0.08); border: 1px solid rgba(242,54,69,0.3); border-radius: var(--r-md);
  color: #ff8a95; font-size: 12.5px; font-family: 'Inter', sans-serif;
}
#stratQuietAlert.show { display: flex; }

/* Scorecard strip */
.stratScoreRow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px; }
.stratScoreRow.cols2 { grid-template-columns: repeat(2, 1fr); }
.stratScoreCard {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius);
  padding: 12px 14px;
}
.stratScoreCard .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--txt2); font-family: 'Inter', sans-serif; }
.stratScoreCard .v { font-size: 20px; font-weight: 700; color: var(--txt1); font-family: 'Share Tech Mono', monospace; margin-top: 4px; }
.stratScoreCard .v.good { color: var(--green); }
.stratScoreCard .v.bad  { color: var(--red); }

/* PHASE 6D PART 5: "Today at a glance" strip -- always visible at the top of the
   Strategy panel regardless of which tab is active, so the four questions Kev
   actually wakes up with (win rate, today's trades, Weight Lab state, last
   playbook update) are answerable without opening a single tab. Same card
   language as .stratScoreCard on purpose -- a native part of this panel, not a
   bolted-on widget. */
#stratGlanceStrip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding: 10px 20px; border-bottom: 1px solid var(--card-border);
}
.stratGlanceCard {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius);
  padding: 8px 12px; cursor: pointer; transition: filter 0.15s;
}
.stratGlanceCard:hover { filter: brightness(1.15); }
.stratGlanceCard .k {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--txt2);
  font-family: 'Inter', sans-serif;
}
.stratGlanceCard .v {
  font-size: 12.5px; font-weight: 600; color: var(--txt1); font-family: 'Inter', sans-serif;
  margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stratGlanceCard .v.good { color: var(--green); }
.stratGlanceCard .v.bad  { color: var(--red); }

.stratSectionLabel {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--txt2);
  font-family: 'Inter', sans-serif; font-weight: 600; margin: 20px 0 10px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
}
.stratSectionLabel:first-child { margin-top: 0; }
/* PHASE 1 FOUNDATION: the small trailing annotation after a section title (9 identical
   inline occurrences -- Elliot's Suggestions/Equity Curve/Setup Volume/Shadow Tag+Combo/
   Weekly Regret/Combo Leaderboard/Planned R:R/Self-Check Rate) and the extra top margin
   the Confluence Tags glossary heading needed on its own (not first-child, so the
   :first-child reset above doesn't apply to it). */
.stratSectionSub {
  font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--txt3); font-size: 10px;
}
.stratSectionSpaced { margin-top: 18px; }

/* PHASE 21: Learn tab. The old Learning Mode toggle is gone -- (i) icons are always
   visible everywhere and deep-link into the Learn pane instead of popping a tooltip.
   The Glossary (concepts + tag registry) is now a real .stratPane, so it inherits
   #stratBody's working overflow-y:auto instead of being clipped by #strategyPanel's
   fixed height (PHASE 17's bug: it lived outside #stratBody as a plain sibling). */
.stratLearnIcon {
  display: inline-flex; width: 14px; height: 14px; border-radius: 50%;
  background: rgba(155,89,182,0.18); color: #b39ddb; border: 1px solid rgba(155,89,182,0.45);
  font-size: 9.5px; line-height: 1; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; font-family: 'Inter', sans-serif; font-weight: 700;
  user-select: none;
}
.stratLearnIcon:hover { background: rgba(155,89,182,0.3); }

/* ============================================================================
   PHASE 6D LEARN TAB REDESIGN -- "The Trading Floor"
   Concept: every stat on this dashboard was produced by one of six named
   roles the rest of the site already uses in its prose (Dexter scans/counts,
   Chev judges, Elliot digests, Jax keeps the real ledger, George enforces
   risk, Mike Ross tracks the shadow "what-ifs"). Instead of one undifferen-
   tiated wall of paragraphs, every entry gets a colored left accent + a small
   role chip so you always know who's talking, a sticky rail groups the
   Sections list by that same role so you can jump straight to what you want,
   and the Confluence Tags glossary becomes a color-coded card grid grouped
   by what the tag actually measures (structure, momentum, trend, etc.)
   instead of one long alphabetical list. No JS hooks/ids touched beyond the
   two purely-additive fields (data-owner, a title) drawing.js now also
   writes into these same existing containers.
   ============================================================================ */

/* Six-color role system, reused for both Sections/Concepts (by WHO reports it)
   and, separately, Confluence Tags (by WHAT it measures -- see far below). */
:root {
  --role-dexter:   #4dd0e1;
  --role-chev:     var(--gold);
  --role-elliot:   #9b59b6;
  --role-jax:      var(--green);
  --role-george:   #ff8a3d;
  --role-mikeross: #5dade2;
}

/* ---- Hub navigation shell (v2): landing screen -> Team / Strategy / Dashboard /
   Indicators, instead of one flat scroll. Same show/hide convention .stratPane.active
   already uses, one level deeper -- .learnHub / .learnHub.active, reusing the existing
   cmdFadeIn keyframe (defined elsewhere in this file for command-palette-style panels). ---- */
.stratPane[data-spane="learn"].active { display: block; }
.learnHub { display: none; }
.learnHub.active { display: block; animation: cmdFadeIn 0.12s ease; }

.learnHubIntro {
  font-size: 15px; font-weight: 600; color: var(--txt1); font-family: 'Inter', sans-serif;
  margin-bottom: 18px;
}
.learnHubGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 640px; }
.learnHubCard {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius);
  padding: 22px 20px; cursor: pointer; text-align: left; transition: border-color 0.15s, transform 0.15s;
}
.learnHubCard:hover { border-color: var(--gold); transform: translateY(-2px); }
.learnHubCard .lhcEmoji { font-size: 26px; margin-bottom: 4px; }
.learnHubCard .lhcTitle { font-size: 14.5px; font-weight: 700; color: var(--txt1); font-family: 'Inter', sans-serif; }
.learnHubCard small { font-size: 11px; color: var(--txt2); font-family: 'Inter', sans-serif; }

.learnBackBtn {
  display: inline-block; margin-bottom: 16px; padding: 6px 14px; border-radius: var(--r-sm);
  background: none; border: 1px solid var(--border); color: var(--txt2); cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 11.5px;
}
.learnBackBtn:hover { color: var(--txt1); border-color: var(--txt2); }

.learnComingSoon {
  font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--txt2);
  background: var(--card-bg); border: 1px dashed var(--card-border); border-radius: var(--card-radius);
  padding: 20px; max-width: 520px;
}

/* ---- Meet the Team: bio card grid + detail panel ---- */
#learnTeamGrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px;
  margin-bottom: 18px;
}
.learnTeamCard {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  background: var(--card-bg); border: 1px solid var(--card-border); border-left: 3px solid var(--border2);
  border-radius: var(--card-radius); padding: 14px 16px; cursor: pointer; text-align: left;
  transition: border-color 0.15s;
}
.learnTeamCard[data-owner="dexter"]   { border-left-color: var(--role-dexter); }
.learnTeamCard[data-owner="chev"]     { border-left-color: var(--role-chev); }
.learnTeamCard[data-owner="elliot"]   { border-left-color: var(--role-elliot); }
.learnTeamCard[data-owner="jax"]      { border-left-color: var(--role-jax); }
.learnTeamCard[data-owner="george"]   { border-left-color: var(--role-george); }
.learnTeamCard[data-owner="mikeross"] { border-left-color: var(--role-mikeross); }
.learnTeamCard:hover { border-color: var(--gold); }
.learnTeamCard .ltcEmoji { font-size: 22px; }
.learnTeamCard .ltcName { font-size: 13px; font-weight: 700; color: var(--txt1); font-family: 'Inter', sans-serif; }
.learnTeamCard .ltcMission { font-size: 10.5px; color: var(--txt2); font-family: 'Inter', sans-serif; line-height: 1.4; }

.learnTeamDetailCard {
  background: var(--card-bg); border: 1px solid var(--card-border); border-left: 3px solid var(--border2);
  border-radius: var(--card-radius); padding: 18px 20px; max-width: 560px;
}
.learnTeamDetailCard[data-owner="dexter"]   { border-left-color: var(--role-dexter); }
.learnTeamDetailCard[data-owner="chev"]     { border-left-color: var(--role-chev); }
.learnTeamDetailCard[data-owner="elliot"]   { border-left-color: var(--role-elliot); }
.learnTeamDetailCard[data-owner="jax"]      { border-left-color: var(--role-jax); }
.learnTeamDetailCard[data-owner="george"]   { border-left-color: var(--role-george); }
.learnTeamDetailCard[data-owner="mikeross"] { border-left-color: var(--role-mikeross); }
.ltdHeader { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ltdEmoji { font-size: 24px; }
.ltdName { font-size: 16px; font-weight: 700; color: var(--txt1); font-family: 'Inter', sans-serif; }
.ltdMission { font-size: 12.5px; color: var(--txt2); font-family: 'Inter', sans-serif; line-height: 1.5; margin-bottom: 14px; }
.ltdRow { margin-bottom: 12px; }
.ltdLabel {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--txt3); font-family: 'Inter', sans-serif; margin-bottom: 5px;
}
.ltdGood { font-size: 11.5px; color: var(--green); font-family: 'Inter', sans-serif; margin-top: 2px; }
.ltdBad { font-size: 11.5px; color: var(--red); font-family: 'Inter', sans-serif; margin-top: 2px; }
.ltdChips { display: flex; gap: 6px; flex-wrap: wrap; }
.ltdWorksWith {
  background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 12px;
  padding: 3px 11px; font-size: 10.5px; color: var(--txt2); font-family: 'Inter', sans-serif; cursor: pointer;
}
.ltdWorksWith:hover { color: var(--txt1); border-color: var(--gold); }
.ltdOwns { display: flex; flex-direction: column; gap: 2px; }
.ltdOwnsLink { font-size: 11.5px; color: var(--gold); font-family: 'Inter', sans-serif; text-decoration: none; }
.ltdOwnsLink:hover { text-decoration: underline; }
.ltdNone { font-size: 11px; color: var(--txt3); font-family: 'Inter', sans-serif; font-style: italic; }

/* ---- Dashboard hub: sticky rail + main content (rescoped from the whole Learn pane,
   which now hosts 4 separate hub views, to just this one view). 3 explicit grid children
   here (Back button, Quick Nav, Main Col) -- auto-placement alone would put the Back
   button in the narrow 172px column instead of spanning full width, so every child gets
   an explicit row/column rather than relying on source-order placement. ---- */
.learnHub[data-lview="dashboard"].active {
  display: grid; grid-template-columns: 172px 1fr; grid-template-rows: auto 1fr; gap: 12px 26px; align-items: start;
}
.learnHub[data-lview="dashboard"] > .learnBackBtn { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0; }
.learnQuickNav {
  position: sticky; top: 0; display: flex; flex-direction: column; gap: 16px;
  padding-right: 14px; border-right: 1px solid var(--border);
  grid-column: 1; grid-row: 2;
}
.lqnGroupLabel {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--txt3); font-family: 'Inter', sans-serif; margin-bottom: 5px;
  padding-left: 8px; border-left: 2px solid var(--border2);
}
.lqnGroupLabel[data-owner="dexter"]   { border-left-color: var(--role-dexter); }
.lqnGroupLabel[data-owner="chev"]     { border-left-color: var(--role-chev); }
.lqnGroupLabel[data-owner="elliot"]   { border-left-color: var(--role-elliot); }
.lqnGroupLabel[data-owner="jax"]      { border-left-color: var(--role-jax); }
.lqnGroupLabel[data-owner="george"]   { border-left-color: var(--role-george); }
.lqnGroupLabel[data-owner="mikeross"] { border-left-color: var(--role-mikeross); }
.learnQuickNav a {
  display: block; font-size: 11px; color: var(--txt2); text-decoration: none;
  font-family: 'Inter', sans-serif; padding: 3px 8px; border-radius: 5px; line-height: 1.4;
}
.learnQuickNav a:hover { background: rgba(255,255,255,0.06); color: var(--txt1); }
.learnMainCol { min-width: 0; grid-column: 2; grid-row: 2; }

@media (max-width: 720px) {
  .learnHub[data-lview="dashboard"].active { grid-template-columns: 1fr; }
  .learnHub[data-lview="dashboard"] > .learnBackBtn,
  .learnQuickNav, .learnMainCol { grid-column: 1; }
  .learnQuickNav { grid-row: 2; }
  .learnMainCol { grid-row: 3; }
  .learnQuickNav {
    position: static; flex-direction: row; flex-wrap: wrap; gap: 6px 16px;
    padding-right: 0; padding-bottom: 12px; border-right: none; border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
  }
  .lqnGroup { display: flex; align-items: center; gap: 6px; }
  .lqnGroupLabel { margin-bottom: 0; }
  .learnHubGrid { grid-template-columns: 1fr; }
}

/* ---- Mode toggle: premium segmented control instead of two loose pills ---- */
.learnModeToggleRow {
  display: inline-flex; gap: 2px; margin-bottom: 18px; padding: 3px;
  background: var(--s1); border: 1px solid var(--border); border-radius: var(--r-md);
}
.learnModeToggleRow .pill {
  border: none; background: transparent; border-radius: calc(var(--r-md) - 3px);
  padding: 7px 16px; font-size: 11.5px; color: var(--txt2);
}
.learnModeToggleRow .pill.active { background: var(--gold); color: #201a08; font-weight: 700; }

/* ---- Search bar: premium sizing + focus glow ---- */
#glossarySearch {
  width: 100%; box-sizing: border-box; padding: 10px 14px; margin-bottom: 14px;
  background: var(--s1); border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--txt1); font-family: 'Inter', sans-serif; font-size: 12.5px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#glossarySearch:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,0.15);
}

/* ---- Base card treatment shared by Sections + Concept Glossary entries ----
   (Confluence Tags gets its own denser grid card further below -- 100+ tags
   need a tighter format than 19 sections + 6 concepts do.) */
#stratLearnSections, #stratConceptGlossary { margin-bottom: 24px; }
#stratLearnSections .learnEntry, #stratConceptGlossary .learnEntry {
  padding: 14px 16px; margin-bottom: 8px; border-bottom: none;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-left: 3px solid var(--border2); border-radius: var(--card-radius);
  scroll-margin-top: 12px;
}
#stratLearnSections .learnEntry:last-child, #stratConceptGlossary .learnEntry:last-child { margin-bottom: 0; }
#stratLearnSections .learnEntry[data-owner="dexter"],   #stratConceptGlossary .learnEntry[data-owner="dexter"]   { border-left-color: var(--role-dexter); }
#stratLearnSections .learnEntry[data-owner="chev"],     #stratConceptGlossary .learnEntry[data-owner="chev"]     { border-left-color: var(--role-chev); }
#stratLearnSections .learnEntry[data-owner="elliot"],   #stratConceptGlossary .learnEntry[data-owner="elliot"]   { border-left-color: var(--role-elliot); }
#stratLearnSections .learnEntry[data-owner="jax"],      #stratConceptGlossary .learnEntry[data-owner="jax"]      { border-left-color: var(--role-jax); }
#stratLearnSections .learnEntry[data-owner="george"],   #stratConceptGlossary .learnEntry[data-owner="george"]   { border-left-color: var(--role-george); }
#stratLearnSections .learnEntry[data-owner="mikeross"], #stratConceptGlossary .learnEntry[data-owner="mikeross"] { border-left-color: var(--role-mikeross); }

.learnEntry .gName {
  font-size: 13.5px; font-weight: 700; color: var(--txt1); font-family: 'Inter', sans-serif;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.learnEntry .gOwner {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  font-family: 'Share Tech Mono', monospace; color: var(--txt3);
  background: rgba(255,255,255,0.05); border-radius: 10px; padding: 2px 9px; white-space: nowrap;
}
.learnEntry[data-owner="dexter"]   .gOwner { color: var(--role-dexter);   background: rgba(77,208,225,0.12); }
.learnEntry[data-owner="chev"]     .gOwner { color: var(--role-chev);     background: rgba(212,175,55,0.12); }
.learnEntry[data-owner="elliot"]   .gOwner { color: var(--role-elliot);   background: rgba(155,89,182,0.15); }
.learnEntry[data-owner="jax"]      .gOwner { color: var(--role-jax);      background: rgba(8,153,129,0.14); }
.learnEntry[data-owner="george"]   .gOwner { color: var(--role-george);   background: rgba(255,138,61,0.14); }
.learnEntry[data-owner="mikeross"] .gOwner { color: var(--role-mikeross); background: rgba(93,173,226,0.14); }

.learnEntry .gCode { font-size: 9px; color: var(--txt3); font-family: 'Share Tech Mono', monospace; margin-left: 6px; }
.learnEntry .gPoints { font-size: 9px; color: #b39ddb; font-family: 'Share Tech Mono', monospace; margin-left: 6px; }
/* Quick Answer -- always visible, meant to be read in 2 seconds. Bolder/lighter than
   gDef below it so it visually reads as the "fast" layer, not just more body text. */
.learnEntry .gQuick { font-size: 12px; color: var(--txt1); font-family: 'Inter', sans-serif; margin-top: 6px; line-height: 1.5; font-weight: 500; }
.learnEntry .gDef { font-size: 11.5px; color: var(--txt2); font-family: 'Inter', sans-serif; margin-top: 8px; line-height: 1.6; }
.learnEntry .gHow { font-size: 10.5px; color: var(--txt3); font-family: 'Inter', sans-serif; margin-top: 6px; font-style: italic; }
/* Persistent highlight after a deep-link jump -- stays lit (survives a
   Definition/Story Time toggle, which rebuilds this list's HTML) until you
   click the highlighted entry itself to clear it. */
.learnEntry.learnPinned { background: rgba(155,89,182,0.20); border-color: rgba(155,89,182,0.5); cursor: pointer; transition: background 0.25s ease-out; }

/* ---- Progressive disclosure layers (PHASE 6D PART 2): Story/Deep Dive/Real
   Example/Common Mistake/Related, each an independently expandable <details>
   below the always-visible Quick Answer + primary explanation. Native
   <details>/<summary> -- same no-JS-collapsible convention already used
   elsewhere in this codebase (Elliot's Suggestions evidence rows, the
   Settings Size submenu). */
.learnEntry .learnLayer { margin-top: 8px; }
.learnEntry .learnLayer summary {
  font-size: 10.5px; font-weight: 700; color: var(--txt2); font-family: 'Inter', sans-serif;
  cursor: pointer; outline: none; list-style: none; user-select: none;
}
.learnEntry .learnLayer summary::-webkit-details-marker { display: none; }
.learnEntry .learnLayer summary::before { content: '▸ '; color: var(--txt3); }
.learnEntry .learnLayer[open] summary::before { content: '▾ '; }
.learnEntry .learnLayer summary:hover { color: var(--txt1); }
.learnEntry .learnLayer .gLayerBody {
  font-size: 11px; color: var(--txt2); font-family: 'Inter', sans-serif; line-height: 1.6;
  margin-top: 5px; padding-left: 14px; border-left: 2px solid var(--border2);
}

/* Real Example card -- built entirely from real, already-fetched decision/shadow
   records (see _realExampleHTML in drawing.js), never a fabricated number. */
.learnExample { font-family: 'Share Tech Mono', monospace; }
.learnExample .leSymbol { font-size: 11.5px; font-weight: 700; color: var(--txt1); }
.learnExample .leTf, .learnExample .leScore { color: var(--txt3); font-weight: 400; margin-left: 6px; }
.learnExample .leOutcome { font-size: 10.5px; color: var(--txt2); margin-top: 4px; font-family: 'Inter', sans-serif; }
.learnExample .leDetail { font-size: 10px; color: var(--txt3); margin-top: 4px; font-family: 'Inter', sans-serif; font-style: italic; }

.gRelated { display: flex; flex-wrap: wrap; gap: 6px; }
.gRelatedLink {
  background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 12px;
  padding: 3px 11px; font-size: 10.5px; color: var(--gold); font-family: 'Inter', sans-serif;
  text-decoration: none;
}
.gRelatedLink:hover { border-color: var(--gold); text-decoration: underline; }

/* ---- Confluence Tags: color-coded card grid, grouped by WHAT each tag
   measures (not who reports it -- a functional category matters more here
   than it does for Sections). Colors keyed off the data-search attribute
   already emitted per tag (name + code, lowercased) -- zero JS changes,
   same category groupings _tagStoryText() in drawing.js already uses for
   Story Time, so the visual accent and the story text never disagree. ---- */
#stratTagGlossary {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px;
}
#stratTagGlossary .learnEntry {
  padding: 11px 13px; margin-bottom: 0; border-bottom: none;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-left: 3px solid var(--border2); border-radius: var(--card-radius);
  scroll-margin-top: 12px;
}
#stratTagGlossary .learnEntry .gDef { margin-top: 4px; }
#stratTagGlossary .learnEntry .gHow { margin-top: 5px; }

/* Structure & S/R */
#stratTagGlossary .learnEntry[data-search*="support"],
#stratTagGlossary .learnEntry[data-search*="resistance"] { border-left-color: var(--green); }
/* Patterns & Market Structure (Elliot's domain) */
#stratTagGlossary .learnEntry[data-search*="triangle"],
#stratTagGlossary .learnEntry[data-search*="wedge"],
#stratTagGlossary .learnEntry[data-search*="flag"],
#stratTagGlossary .learnEntry[data-search*="pennant"],
#stratTagGlossary .learnEntry[data-search*="channel"],
#stratTagGlossary .learnEntry[data-search*="double top"],
#stratTagGlossary .learnEntry[data-search*="double bottom"],
#stratTagGlossary .learnEntry[data-search*="triple top"],
#stratTagGlossary .learnEntry[data-search*="triple bottom"],
#stratTagGlossary .learnEntry[data-search*="head & shoulders"],
#stratTagGlossary .learnEntry[data-search*="rectangle"],
#stratTagGlossary .learnEntry[data-search*="pattern"],
#stratTagGlossary .learnEntry[data-search*="market structure"] { border-left-color: var(--role-elliot); }
/* Fibonacci & Golden Pocket */
#stratTagGlossary .learnEntry[data-search*="fibonacci"],
#stratTagGlossary .learnEntry[data-search*="golden pocket"] { border-left-color: var(--gold); }
/* Momentum (RSI/Divergence) */
#stratTagGlossary .learnEntry[data-search*="rsi"],
#stratTagGlossary .learnEntry[data-search*="divergence"] { border-left-color: var(--role-mikeross); }
/* Trend & Volatility (EMA, Bollinger) */
#stratTagGlossary .learnEntry[data-search*="ema"],
#stratTagGlossary .learnEntry[data-search*="bollinger"] { border-left-color: var(--role-dexter); }
/* Volume, Derivatives & Liquidity */
#stratTagGlossary .learnEntry[data-search*="volume"],
#stratTagGlossary .learnEntry[data-search*="vwap"],
#stratTagGlossary .learnEntry[data-search*="open interest"],
#stratTagGlossary .learnEntry[data-search*="funding"],
#stratTagGlossary .learnEntry[data-search*="prior day"],
#stratTagGlossary .learnEntry[data-search*="opening range"],
#stratTagGlossary .learnEntry[data-search*="liquidity sweep"],
#stratTagGlossary .learnEntry[data-search*="candle"] { border-left-color: var(--role-george); }

/* Live feed cards */
#stratFeedFilters { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.stratFeedCard {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-bottom: 6px;
  background: var(--card-bg); border: 1px solid var(--card-border); border-left: 3px solid var(--border2);
  border-radius: var(--card-radius); font-family: 'Inter', sans-serif; position: relative; overflow: hidden;
}
.stratFeedCard.isSkip {
  border-left-color: var(--red);
  background: linear-gradient(90deg, rgba(242,54,69,0.15) 0%, var(--s1) 40%);
}
.stratFeedCard.isPost {
  border-left-color: var(--green);
  background: linear-gradient(90deg, rgba(8,153,129,0.15) 0%, var(--s1) 40%);
}
.stratFeedCard.isReject {
  border-left-color: #ff8a3d;
  background: linear-gradient(90deg, rgba(255,138,61,0.13) 0%, var(--s1) 40%);
}
.stratFeedCard .stratEmoji { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.stratFeedCard .stratFeedMain { flex: 1; min-width: 0; }
.stratFeedCard .stratFeedTop { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
.stratFeedCard .stratSym { font-weight: 700; font-size: 12.5px; color: var(--txt1); }
.stratFeedCard .stratTf { font-size: 10px; color: var(--txt3); font-family: 'Share Tech Mono', monospace; }
.stratFeedCard .stratDecPill {
  font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill);
  text-transform: uppercase; letter-spacing: 0.05em; font-family: 'Share Tech Mono', monospace;
}
.stratDecPill.SKIP { background: rgba(242,54,69,0.15); color: #ff8a95; }
.stratDecPill.POST { background: rgba(8,153,129,0.18); color: #5fd6bc; }
.stratDecPill.REJECT, .stratDecPill.GATE_REJECT, .stratDecPill.STRUCT_REJECT,
.stratDecPill.MTF_TAX_REJECT, .stratDecPill.GEOMETRY_REJECT, .stratDecPill.FORMAT_ERROR {
  background: rgba(255,138,61,0.15); color: #ffb27a;
}
.stratFeedCard .stratScore { font-size: 10px; color: var(--txt2); font-family: 'Share Tech Mono', monospace; margin-left: auto; }
.stratFeedCard .stratReason { font-size: 12px; color: var(--txt1); line-height: 1.5; }
.stratFeedCard .stratDetail {
  font-size: 11px; color: var(--txt2); line-height: 1.5; margin-top: 4px;
  padding-top: 4px; border-top: 1px dashed rgba(255,255,255,0.06);
}
.stratVagueTag {
  font-size: 8.5px; color: var(--gold); background: rgba(212,175,55,0.1);
  border: 1px solid rgba(212,175,55,0.3); border-radius: var(--r-pill);
  padding: 1px 6px; margin-left: auto; font-family: 'Share Tech Mono', monospace;
}
.stratFeedCard .stratTs { font-size: 9.5px; color: var(--txt3); font-family: 'Share Tech Mono', monospace; margin-top: 3px; }

/* PHASE 7B-4: feed-card shadow badges -- reuses .stratDecPill's shape/sizing (pill,
   9px mono, small padding) but with a dashed violet border, the same quarantine accent
   as the rest of the shadow section, so it never reads as a real decision pill. */
.stratShadowBadge {
  font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill);
  font-family: 'Share Tech Mono', monospace; border: 1px dashed rgba(147,112,219,0.5);
}
.stratShadowBadge.dodged  { background: rgba(8,153,129,0.12); color: #5fd6bc; }
.stratShadowBadge.missed  { background: rgba(242,54,69,0.12); color: #ff8a95; }
.stratShadowBadge.pending { background: rgba(255,255,255,0.04); color: var(--txt3); }

/* Funnel */
.stratFunnelRow { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.stratFunnelLabel { width: 190px; flex-shrink: 0; font-size: 11.5px; color: var(--txt1); font-family: 'Inter', sans-serif; }
.stratFunnelBarWrap { flex: 1; background: var(--s2); border-radius: var(--r-xs); height: 20px; overflow: hidden; position: relative; }
.stratFunnelBar { height: 100%; border-radius: var(--r-xs); transition: width 0.3s ease; }
.stratFunnelCount { width: 54px; text-align: right; font-size: 12px; font-family: 'Share Tech Mono', monospace; color: var(--txt1); flex-shrink: 0; }

/* Reason breakdown / tag leaderboard bars (shared style) */
.stratBarRow { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.stratBarLabel { width: 170px; flex-shrink: 0; font-size: 11.5px; color: var(--txt1); font-family: 'Inter', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stratBarTrack { flex: 1; background: var(--s2); border-radius: var(--r-xs); height: 16px; overflow: hidden; }
.stratBarFill { height: 100%; border-radius: var(--r-xs); }
.stratBarVal { width: 64px; text-align: right; font-size: 11px; font-family: 'Share Tech Mono', monospace; color: var(--txt2); flex-shrink: 0; }
/* Skip-reason-category labels ("Reward too small for the required stop (R:R /
   cost / ATR floor)") run longer than a tag/decision-code name -- same
   wrap-instead-of-truncate treatment already used for combo labels, scoped only
   to this new container. */
#stratSkipCategoryBars .stratBarLabel {
  width: 210px; white-space: normal; overflow: visible; text-overflow: unset; line-height: 1.3;
}

/* PHASE 2 FOLLOW-UP (2026-07-17): Skip Reason Robustness -- same bar shape as above,
   own container so its wide-label treatment and status pill don't leak into the plain
   count bars. */
#stratSkipRobustnessBars .stratBarLabel {
  width: 210px; white-space: normal; overflow: visible; text-overflow: unset; line-height: 1.3;
}
#stratSkipRobustnessBars .stratBarRow { align-items: flex-start; margin-bottom: 12px; }
#stratSkipRobustnessBars .stratBarTrack { margin-top: 3px; }
.stratRobustnessMeta { display: flex; flex-direction: column; gap: 4px; }
.stratRobustnessPill {
  display: inline-block; font-size: 9.5px; font-family: 'Share Tech Mono', monospace;
  text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 7px; border-radius: var(--r-xs);
  width: fit-content;
}
.stratRobustnessPill.robust             { background: rgba(38,166,154,0.15); color: var(--green); border: 1px solid rgba(38,166,154,0.35); }
.stratRobustnessPill.not_robust         { background: rgba(242,54,69,0.10); color: #ff8a95; border: 1px solid rgba(242,54,69,0.3); }
.stratRobustnessPill.awaiting_confirmation { background: rgba(255,183,3,0.12); color: var(--gold); border: 1px solid rgba(255,183,3,0.35); }
.stratRobustnessPill.insufficient_data  { background: var(--s2); color: var(--txt3); border: 1px solid var(--border); }

/* Reminder banner -- gold "worth a look" tone, distinct from the red quiet-system alert.
   Same show/hide toggle pattern as #stratQuietAlert. */
#stratRobustnessAlert {
  display: none; align-items: center; gap: 10px; padding: 10px 14px; margin: 10px 0 14px;
  background: rgba(255,183,3,0.08); border: 1px solid rgba(255,183,3,0.3); border-radius: var(--r-md);
  color: var(--gold); font-size: 12.5px; font-family: 'Inter', sans-serif;
}
#stratRobustnessAlert.show { display: flex; }

/* Heatmap */
/* PHASE 25: 6 four-hour blocks instead of 24 hour columns. */
#stratHeatmap { display: grid; grid-template-columns: 34px repeat(6, 1fr); gap: 2px; margin-top: 6px; }
.stratHeatCell { aspect-ratio: 1; border-radius: 3px; background: var(--s2); }
.stratHeatHourLabel, .stratHeatDayLabel { font-size: 8px; color: var(--txt3); font-family: 'Share Tech Mono', monospace; text-align: center; }
.stratHeatDayLabel { text-align: right; padding-right: 4px; align-self: center; }

/* Grade / R-multiple mini bars */
.stratGradeGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px,1fr)); gap: 10px; }
.stratGradeCard { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: 10px 12px; text-align: center; }
.stratGradeCard .g { font-size: 11px; color: var(--txt2); font-family: 'Inter', sans-serif; }
.stratGradeCard .wr { font-size: 18px; font-weight: 700; font-family: 'Share Tech Mono', monospace; margin-top: 2px; }
.stratGradeCard .n  { font-size: 9.5px; color: var(--txt3); font-family: 'Share Tech Mono', monospace; }

#stratEquityChart { width: 100%; height: 220px; }

/* PHASE 13: system-over-time charts -- same LightweightCharts sizing convention as the
   equity curve above, stacked one per row (mobile-first, no side-by-side layout needed). */
.tsChart { width: 100%; height: 160px; margin-bottom: 10px; }
.stratSubCaption { font-size: 10px; opacity: 0.75; }
.tsAnnotTip {
  position: absolute; z-index: 20; pointer-events: none; background: #10121f;
  border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-sm); padding: 5px 8px;
  font-size: 10px; font-family: 'Inter', sans-serif; color: var(--txt1); white-space: nowrap;
  display: none; box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* Raw table */
.stratRawCaption { font-size: 10.5px; color: var(--txt3); font-family: 'Inter', sans-serif; font-style: italic; margin-bottom: 8px; }
#stratRawTable { width: 100%; border-collapse: collapse; font-family: 'Share Tech Mono', monospace; font-size: 11px; }
#stratRawTable th {
  text-align: left; padding: 7px 8px; color: var(--txt2); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 0.06em; border-bottom: 1px solid var(--border2); position: sticky; top: 0; background: #10121f;
}
#stratRawTable td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--txt1); vertical-align: top; }
#stratRawTable tr:hover td { background: rgba(255,255,255,0.02); }

/* PHASE 18: Indicator Scoreboard table. Horizontal scroll on the wrapper (not the whole
   panel) so 6 columns survive a 380px viewport without breaking anything else. */
#stratScoreboardWrap { overflow-x: auto; }
#stratScoreboardTable { width: 100%; min-width: 460px; border-collapse: collapse; font-family: 'Share Tech Mono', monospace; font-size: 11px; }
#stratScoreboardTable th {
  text-align: left; padding: 7px 8px; color: var(--txt2); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 0.06em; border-bottom: 1px solid var(--border2); white-space: nowrap;
}
#stratScoreboardTable th[data-sort] { cursor: pointer; user-select: none; }
#stratScoreboardTable th[data-sort]:hover { color: var(--txt1); }
#stratScoreboardTable th .sbSortArrow { opacity: 0.6; margin-left: 3px; }
#stratScoreboardTable td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--txt1); vertical-align: middle; }
#stratScoreboardTable tr:hover td { background: rgba(255,255,255,0.02); }
#stratScoreboardTable tr.dimRow td { opacity: 0.4; }
.sbIndicatorName { font-family: 'Inter', sans-serif; font-size: 11px; }
.sbIndicatorCode { font-size: 8.5px; color: var(--txt3); margin-left: 5px; }
.sbSpark { display: flex; align-items: flex-end; gap: 1.5px; height: 20px; width: 64px; }
.sbSparkBar { width: 3px; border-radius: 1px; min-height: 2px; flex-shrink: 0; }
/* PHASE 7B-2's quarantine convention (violet, dashed) applied at cell scale -- a shadow
   number can never be mistaken for a real green/red/gold one, even inside a dense table. */
.sbShadowWr {
  display: inline-block; padding: 1px 6px; border: 1px dashed rgba(147,112,219,0.5);
  border-radius: var(--r-sm); color: #b39ddb; background: rgba(147,112,219,0.06); font-size: 10px;
}

.stratEmptyState { color: var(--txt3); font-size: 12px; font-family: 'Inter', sans-serif; padding: 20px; text-align: center; }

/* PHASE 7B-2: Shadow Outcomes (counterfactual) — visually quarantined from real stats.
   Deliberately its own accent hue (violet), unused elsewhere on the page, so shadow
   numbers can never be mistaken for real green/red/gold performance data at a glance. */
.stratShadowSection {
  margin-top: 16px; padding: 14px; border: 1px dashed rgba(147,112,219,0.4);
  border-radius: var(--r-md); background: rgba(147,112,219,0.04);
}
.stratShadowSection .stratSectionLabel:first-child { margin-top: 0; color: #b39ddb; }
.stratShadowCaveat {
  font-size: 10.5px; color: var(--txt2); font-family: 'Inter', sans-serif; font-style: italic;
  margin-bottom: 12px; line-height: 1.5;
}
.stratShadowCoverage {
  font-size: 11px; color: var(--txt2); font-family: 'Share Tech Mono', monospace;
  margin: 2px 0 14px; text-align: center;
}
/* Full Report tab (counterfactual_report.py's build_report(), served in-app) --
   same monospace family every other terminal-style block in this app uses. */
#ctfReportRefreshBtn {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-size: 11px; color: var(--txt3); padding: 0 4px;
}
#ctfReportRefreshBtn:hover { color: var(--gold); }
.stratReportBox {
  white-space: pre-wrap; word-break: break-word; overflow-x: auto;
  font-family: 'Share Tech Mono', monospace; font-size: 11px; line-height: 1.5;
  color: var(--txt1); background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-md);
  padding: 14px; margin: 0;
}
.stratBarSplit { display: flex; height: 100%; }
.stratBarSplit .right   { background: var(--green); }
.stratBarSplit .wrong   { background: var(--red); }
.stratBarSplit .pending { background: var(--txt3); }
#stratShadowGateGrid .wr.na { color: var(--txt3); font-size: 14px; }
/* PHASE 24: shadow leaderboard rows now carry a full plain-English phrase ("If taken:
   won 71% · would've made +8.28R · from 73 setups") -- too long to share a line with
   the label+bar at 380px. Scoped ONLY to these two shadow containers (the real
   #stratTagBars/#stratComboBars rows are untouched, same PHASE 7B-3 isolation as
   before). The row wraps so the phrase drops to its own line under the label+bar; the
   phrase's own fragments ALSO wrap independently, so nothing is ever cramped or
   truncated at any width -- no media query, same flexbox-reflow convention the rest of
   this page already uses. */
#stratShadowTagBars .stratBarRow, #stratShadowComboBars .stratBarRow { flex-wrap: wrap; row-gap: 4px; }
#stratShadowTagBars .stratBarVal, #stratShadowComboBars .stratBarVal {
  width: 100%; flex-basis: 100%; text-align: left; color: var(--txt2);
  display: flex; flex-wrap: wrap; gap: 3px 8px; margin-top: 1px;
}
#stratShadowTagBars .stratBarVal .svLead, #stratShadowComboBars .stratBarVal .svLead { color: var(--txt3); }
#stratShadowTagBars .stratBarVal .svFrag, #stratShadowComboBars .stratBarVal .svFrag { white-space: nowrap; }
/* Replication badge -- same green/red vocabulary as .stratShadowBadge.dodged/.missed
   above, so "checked and it held up" / "checked and it didn't" read consistently with
   the rest of the shadow section's color language. No badge at all (replicated=None)
   means "not enough data in one half yet to judge" -- silence, not a third color. */
#stratShadowTagBars .svRepOk, #stratShadowComboBars .svRepOk   { color: #5fd6bc; font-weight: 700; }
#stratShadowTagBars .svRepBad, #stratShadowComboBars .svRepBad { color: #ff8a95; font-weight: 700; }
/* Combo labels (e.g. "EMA 13 + EMA 21 + Sweep") run far longer than single-tag names --
   the shared 170px/ellipsis .stratBarLabel truncated them mid-combo. Widened + allowed to
   wrap instead of ellipsis-clipping, scoped to the two combo containers only (single-tag
   leaderboards keep the original 170px/ellipsis behavior, unchanged). */
#stratShadowComboBars .stratBarLabel, #stratComboBars .stratBarLabel {
  width: 230px; white-space: normal; overflow: visible; text-overflow: unset; line-height: 1.3;
}
/* PHASE 7B-4: hand-rolled sparkline (no charting library — matches the funnel/heatmap's
   own hand-rolled-div convention rather than the equity curve's LightweightCharts one,
   since this is a glanceable trend strip, not an interactive chart). */
.stratSparkRow { display: flex; align-items: flex-end; gap: 5px; height: 50px; margin-top: 6px; }
.stratSparkBar { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--red); transition: height 0.3s ease; }
.stratSparkLabels { display: flex; gap: 5px; margin-top: 3px; }
.stratSparkLabels span { flex: 1; text-align: center; font-size: 8px; color: var(--txt3); font-family: 'Share Tech Mono', monospace; }
.stratFilterPill {
  font-size: 10.5px; padding: 4px 10px; border-radius: var(--r-pill); cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: var(--txt2);
  font-family: 'Inter', sans-serif; transition: all 0.12s;
}
.stratFilterPill:hover { color: var(--txt1); }
.stratFilterPill.active { background: rgba(212,175,55,0.15); color: var(--gold); border-color: rgba(212,175,55,0.4); }

/* Performance stats bar */
#perfSection { flex-shrink: 0; border-top: 1px solid rgba(255,255,255,0.04); }
.perfBar {
  display: flex; align-items: stretch; gap: 0;
  background: var(--bg); padding: 6px 0;
}
.perfBlock {
  display: flex; flex-direction: column; align-items: center; flex: 1;
  padding: 4px 6px; border-right: 1px solid rgba(255,255,255,0.04);
}
.perfBlock:last-child { border-right: none; }
.perfLabel { font-size: 7px; color: var(--txt3); text-transform: uppercase; letter-spacing: 0.09em; font-family: 'Inter', sans-serif; font-weight: 600; margin-bottom: 2px; }
.perfValue { font-size: 14px; font-family: 'Inter', sans-serif; font-weight: 700; color: var(--txt2); }
.perfValue.up { color: var(--green); }
.perfValue.down { color: var(--red); }
.perfValue.gold { color: var(--gold); }
.perfSipRow { text-align: center; padding: 4px 14px 6px; font-size: 8px; font-family: 'Inter', sans-serif; color: var(--txt3); border-top: 1px solid rgba(255,255,255,0.04); }
.perfSipRow span { color: var(--gold); }

/* PHASE C, LEARNING GAPS series: Self-Check Rate rows (plain-English per asset) */
.vkRow { display: flex; align-items: baseline; gap: 8px; padding: 6px 4px; font-size: 12px; font-family: 'Inter', sans-serif; color: var(--txt2); }
.vkRow .perfValue { font-size: 13px; min-width: 12px; }

/* PHASE D, LEARNING GAPS series: Elliot's Suggestions digest card */
.elliotRow { padding: 8px 4px; font-size: 12px; font-family: 'Inter', sans-serif; color: var(--txt2); border-bottom: 1px solid rgba(255,255,255,0.05); }
.elliotRow:last-child { border-bottom: none; }
.elliotRowMain { display: flex; align-items: baseline; gap: 8px; }
.elliotIcon { flex-shrink: 0; }
.elliotRowActions { display: flex; align-items: center; gap: 10px; margin-top: 6px; margin-left: 22px; }
.elliotRowActions summary { font-size: 10px; color: var(--txt3); cursor: pointer; outline: none; }
.elliotEvidence { font-size: 10px; color: var(--txt3); margin-top: 4px; font-family: monospace; }
.elliotEvKey { color: var(--txt2); }
.elliotGoBtn { font-size: 10px; padding: 3px 8px; }
.elliotGeneratedAt { font-size: 10px; padding: 2px 4px 8px; }

/* Chev's Read — ENGINE tab narrative */
.dexterNarrative {
  background: rgba(212,175,55,0.03); border-left: 3px solid rgba(212,175,55,0.4);
  border-radius: 0 var(--r-md) var(--r-md) 0; padding: 12px 14px;
  font-family: 'Share Tech Mono', monospace; font-size: 10px;
  color: var(--txt2); line-height: 1.8; flex-shrink: 0;
}
.dexterNarrative b { color: var(--gold); font-weight: 700; }
.dexterNarrative .nGreen { color: var(--green); }
.dexterNarrative .nRed { color: var(--red); }

/* Chat context line */
#chatContextLine {
  font-size: 8px; color: var(--txt3); font-family: 'Inter', sans-serif;
  letter-spacing: 0.04em; padding: 3px 10px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04); background: var(--bg);
  flex-shrink: 0;
}