@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Mono:wght@300;400;500;600&display=swap');

/* ── CSS Variables ─────────────────────────────────────────────────────────── */
:root {
  --bg: #0a0c0f;
  --surface: #111318;
  --surface2: #181c23;
  --border: #1e2430;
  --accent-5yr: #e040a0;
  --accent-15yr: #8b3a2a;
  --accent-lt: #2563eb;       /* long-term: 34-yr / 35-yr / 40-yr — set per asset */
  --accent-combined: #22c55e;
  --bull: #22c55e;
  --bear: #ef4444;
  --chop: #f59e0b;
  --text: #e2e8f0;
  --muted: #64748b;
  --dim: #94a3b8;

  /* Market Profiling tab (js/profiling.js) — .kptp- prefixed accents */
  --kptp-compression: #2563eb;   /* blue */
  --kptp-expansion: #e040a0;     /* pink */
  --kptp-normal: #64748b;        /* muted grey */
  --kptp-asian: #8b5cf6;
  --kptp-london: #2563eb;
  --kptp-ny: #22c55e;
  --kptp-overlap: #f59e0b;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ──────────────────────────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
  padding: 32px 24px;
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.header {
  border-left: 4px solid var(--accent-combined);
  padding-left: 20px;
  margin-bottom: 40px;
}

.header h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 52px;
  letter-spacing: 4px;
  color: #fff;
  line-height: 1;
}

.header .sub {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 6px;
}

/* ── Legend ────────────────────────────────────────────────────────────────── */
.legend {
  display: flex;
  gap: 24px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 1px;
}

.legend-dot { width: 10px; height: 10px; border-radius: 50%; }

/* ── Section Labels ────────────────────────────────────────────────────────── */
.section-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 3px;
  color: var(--muted);
  text-transform: uppercase;
  margin: 36px 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.section-label span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* ── Tables ────────────────────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}

thead tr { background: var(--surface2); }

thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--surface2); }

tbody td {
  padding: 9px 14px;
  color: var(--dim);
  vertical-align: top;
}

tbody td:first-child {
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
}

/* ── Signal Tags ───────────────────────────────────────────────────────────── */
.bull-tag, .bear-tag, .chop-tag, .neutral-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.bull-tag    { background: rgba(34,197,94,0.15);  color: var(--bull);  border: 1px solid rgba(34,197,94,0.3); }
.bear-tag    { background: rgba(239,68,68,0.15);  color: var(--bear);  border: 1px solid rgba(239,68,68,0.3); }
.chop-tag    { background: rgba(245,158,11,0.12); color: var(--chop);  border: 1px solid rgba(245,158,11,0.3); }
.neutral-tag { background: rgba(100,116,139,0.15); color: var(--muted); border: 1px solid rgba(100,116,139,0.3); }

/* ── Week Grid (individual TF tables) ─────────────────────────────────────── */
.wk-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 4px;
}

.wk-cell {
  border-radius: 3px;
  padding: 4px 6px;
  font-size: 10px;
  text-align: center;
  letter-spacing: 0.5px;
}

.wk-bull { background: rgba(34,197,94,0.15); color: var(--bull); border: 1px solid rgba(34,197,94,0.2); }
.wk-bear { background: rgba(239,68,68,0.15); color: var(--bear); border: 1px solid rgba(239,68,68,0.2); }
.wk-chop { background: rgba(245,158,11,0.1);  color: var(--chop); border: 1px solid rgba(245,158,11,0.2); }

/* ── Combined Table Wrapper ────────────────────────────────────────────────── */
.combined-wrap {
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: 6px;
  overflow-x: auto;
  box-shadow: 0 0 30px rgba(34,197,94,0.04);
}

.combined-wrap thead tr { background: rgba(34,197,94,0.06); }
.combined-wrap thead th { color: rgba(34,197,94,0.6); }

/* ── Accordion ─────────────────────────────────────────────────────────────── */
.acc-table { width: 100%; border-collapse: collapse; }

.acc-table thead tr { background: rgba(34,197,94,0.06); }

.acc-table thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(34,197,94,0.6);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.acc-row-month {
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.acc-row-month:hover { background: var(--surface2); }
.acc-row-month.is-open { background: rgba(34,197,94,0.04); }

.acc-row-month td { padding: 10px 14px; vertical-align: middle; }

.acc-row-month td:first-child {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Sticky Month column on the accordion ──────────────────────────────────
   .combined-wrap already scrolls horizontally (overflow-x:auto above) rather
   than blowing out the page, but without a sticky first column, scrolling
   right to reach the Signal/Conviction/Trade Note columns loses the Month
   label entirely — the actual complaint, not a missing scroll container.
   Mirrors the .table-wrap sticky-column pattern further down this file, but
   the accordion has three row backgrounds (default/hover/open) that pattern
   doesn't, each needing its own sticky-cell background — a semi-transparent
   background on a sticky cell would let scrolled-under content show through,
   so these are --bg-composited solid approximations of the row tints above.
   Scoped to .acc-table specifically, NOT a bare "table" descendant selector
   — .combined-wrap also contains the nested .wk-table (the expanded
   week-by-week breakdown inside each open row) — its own <tr> elements
   carry no class, so a selector scoped to tr.acc-row-month specifically
   (rather than a bare tbody/tr descendant chain, which would still reach
   into the nested table regardless of DOM depth) excludes it correctly: a
   first attempt using ".combined-wrap table tbody td:first-child" caught
   the nested table too, sticking its "Wk N" cell to the outer scroll
   container's edge and overlapping it with the Action/Note column text. */
.combined-wrap .acc-table thead th:first-child,
.combined-wrap .acc-table tbody tr.acc-row-month td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 2px 0 6px rgba(0,0,0,0.5);
}
.combined-wrap .acc-table thead th:first-child {
  background: #0b1714; /* rgba(34,197,94,0.06) pre-composited over --bg */
  z-index: 3;
}
.acc-row-month td:first-child { background: var(--bg); }
.acc-row-month:hover td:first-child { background: var(--surface2); }
.acc-row-month.is-open td:first-child { background: #0b1312; /* rgba(34,197,94,0.04) pre-composited over --bg */ }

.chevron {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.25s;
  flex-shrink: 0;
  margin-top: 2px;
}

.is-open .chevron { transform: rotate(45deg); margin-top: -2px; }

.acc-row-weeks {
  display: none;
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid var(--border);
}

.acc-row-weeks.is-open { display: table-row; }
.acc-row-weeks td { padding: 0; }

.weeks-inner { padding: 6px 14px 12px 38px; }

.wk-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  font-size: 11.5px;
}

.wk-table th {
  padding: 5px 10px;
  font-size: 9.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-weight: 500;
}

.wk-table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(30,36,48,0.6);
  color: var(--dim);
  vertical-align: middle;
}

.wk-table tr:last-child td { border-bottom: none; }
.wk-table td:first-child { color: var(--text); font-weight: 500; width: 60px; }

/* ── Current Month Badge ───────────────────────────────────────────────────── */
.acc-row-month.current-month td:first-child::after {
  content: 'NOW';
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--accent-combined);
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
}

/* Current month row in TF tables (5-YR, 15-YR, long-term) */
.table-wrap tr.current-month td:first-child {
  color: var(--accent-combined);
  font-weight: 600;
}
.table-wrap tr.current-month {
  background: rgba(34, 197, 94, 0.04);
}

/* ── AI Panel ──────────────────────────────────────────────────────────────── */
.ai-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  margin-top: 12px;
}

.ai-panel .ai-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--accent-combined);
  text-transform: uppercase;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-label::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--accent-combined);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ── AI cache bar (shown above cached result) ── */
.ai-cache-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.02);
  border: 1px solid #1e2430;
  border-radius: 4px;
  padding: 5px 10px;
  margin-bottom: 10px;
  font-family: 'IBM Plex Mono', monospace;
}
.ai-cache-note {
  font-size: 10px;
  color: #475569;
  letter-spacing: 0.4px;
}
.ai-cache-clear-btn {
  background: transparent;
  border: 1px solid #334155;
  color: #64748b;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.ai-cache-clear-btn:hover { color: #94a3b8; border-color: #475569; }

.ai-bar-actions { display: flex; align-items: center; gap: 6px; }
.ai-download-btn {
  background: transparent;
  border: 1px solid #334155;
  color: #64748b;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.ai-download-btn:hover { color: var(--accent-combined); border-color: var(--accent-combined); }

.ai-output {
  color: var(--dim);
  line-height: 1.8;
  white-space: pre-wrap;
  font-size: 12.5px;
  overflow-x: auto; /* scroll boundary lives on the PARENT — see .ai-output
    table below for why display:block+overflow-x on the table itself doesn't
    work (min-width beats width in CSS's own conflict resolution) */
}

/* Markdown output styles (when marked.js renders HTML into ai-output) */
.ai-output h2 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  white-space: normal;
}

.ai-output table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 18px;
  font-size: 11.5px;
  white-space: normal;
  /* The bare `table` selector elsewhere in this file sets min-width:700px on
     the table element itself — CSS resolves a width/min-width conflict by
     always honoring min-width, so display:block+overflow-x:auto put directly
     on the table (tried first) has nothing to scroll: the table's own OUTER
     box just becomes 700px and pushes its parent wider, since there's no
     narrower box around it to contain that overflow. The scroll boundary
     has to live one level up, on .ai-output itself (see above) — this table
     is otherwise the one element in the site with no scroll container of
     its own, so without that parent-level fix a markdown table from an AI
     response would force the whole page to scroll horizontally. */
}

.ai-output th {
  text-align: left;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}

.ai-output td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(30,36,48,0.6);
  vertical-align: top;
  white-space: normal;
}

.ai-output td:first-child {
  color: var(--accent-combined);
  font-size: 10px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  width: 130px;
}

.ai-output strong { color: var(--text); font-weight: 600; }
.ai-output em     { color: var(--chop); font-style: normal; }

.ai-output p {
  margin: 0 0 10px;
  white-space: normal;
}

.ai-output ul {
  margin: 0 0 12px;
  padding-left: 18px;
  white-space: normal;
}

.ai-output li {
  margin-bottom: 5px;
  white-space: normal;
}

.loading {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 1px;
  animation: blink 1.2s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

.run-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.35);
  color: var(--bull);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 20px;
  transition: all 0.2s;
}

.run-btn:hover {
  background: rgba(34,197,94,0.2);
  box-shadow: 0 0 16px rgba(34,197,94,0.15);
}

.run-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Utility ───────────────────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--border); margin: 48px 0; }

.footnote {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.5px;
  margin-top: 36px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.footnote .copyright {
  display: block;
  margin-top: 8px;
  color: var(--dim);
  letter-spacing: 0.5px;
}

/* ── Topbar (asset pages) ──────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10,12,15,0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 10px 24px;
  margin: -32px -24px 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}
@media (max-width: 600px) {
  /* Six non-shrinking children in one nowrap row is what forces the whole
     page to scroll horizontally on phones — let it wrap to a second row
     instead of overflowing. */
  .topbar { flex-wrap: wrap; row-gap: 8px; }
}

.back-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 10px;
  letter-spacing: 1.2px;
  transition: color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.back-link:hover { color: var(--text); }

.topbar-title {
  color: var(--dim);
  font-size: 11px;
  letter-spacing: 1px;
  flex: 1;
  min-width: 0; /* flex items default to min-width:auto, which silently defeats
                   the ellipsis below by refusing to shrink past content width */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-date-chip {
  font-size: 9px;
  color: var(--accent-combined);
  letter-spacing: 1.5px;
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: 4px;
  padding: 3px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Container (max-width centering on generated pages) ───────────────────── */
.container {
  max-width: 1400px;
  margin: 0 auto;
}

/* ── FX pages' Long/Short component cards (mobile override) ─────────────────
   .component-grid itself is NOT defined in this shared file — each of the 28
   assets/fx-*.html pages defines it inline in its own <head><style> block as
   a fixed `grid-template-columns: 1fr 1fr`. A media query here needs
   !important to win: the page's own inline <style> has equal CSS specificity
   for this selector and comes later in the cascade (linked stylesheet, then
   inline block), so without !important this rule would silently lose on
   every one of those 28 pages rather than override them. */
@media (max-width: 600px) {
  .component-grid { grid-template-columns: 1fr !important; }
}

/* ── Prev / Next navigation ────────────────────────────────────────────────── */
.asset-nav {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.asset-nav-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.4;
}
.asset-nav-btn:hover {
  color: var(--text);
  border-color: var(--dim);
  background: var(--surface2);
}

/* ── Tab Navigation (asset pages) ─────────────────────────────────────────── */
.kpt-tabs {
  display: flex;
  flex-wrap: wrap; /* at desktop widths all 7 tabs already fit on one line, so
                       this changes nothing there; on phones it wraps whole
                       buttons to a second row instead of the row overflowing
                       (inherited by .kpt-subtabs, which shares this class) */
  gap: 0;
  margin: 0 0 28px;
  border-bottom: 1px solid var(--border);
}

.kpt-tab-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 18px;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: -1px;
  white-space: nowrap; /* pairs with .kpt-tabs' flex-wrap above: the ROW wraps,
                           not the label text inside a button (which used to
                           split e.g. "Live Price" across two lines) */
}
.kpt-tab-btn:hover { color: var(--text); }
.kpt-tab-btn.active {
  color: var(--accent-combined);
  border-bottom-color: var(--accent-combined);
}

/* The leading "html " is a deliberate specificity bump, not decoration: a
   tagged element with its own display rule of equal specificity (e.g.
   .month-quickjump{display:flex} at line ~670, which sits AFTER this rule
   in source order) would otherwise win the tie on source order alone and
   stay visible on every tab regardless of active state — this is exactly
   how the quick-jump bar leaked onto every non-Seasonals tab before this
   fix. Deliberately NOT !important: the secondary TF sub-tab system (below)
   hides/shows some of these same elements via inline el.style.display, and
   !important on an author stylesheet rule would beat that inline style
   outright, breaking the Combined/5-YR/15-YR/LT toggle while on the
   Seasonals tab. A plain specificity bump beats same-specificity component
   rules but still correctly loses to inline styles either way. */
html [data-kpt-panel] { display: none; }
[data-kpt-panel].kpt-panel-active { display: block; }
/* .legend/.legend-header/.month-quickjump are flex rows — restore that once
   active (the block rule above would otherwise collapse them to a stacked
   layout whenever their tab is active). */
.legend[data-kpt-panel].kpt-panel-active,
.legend-header[data-kpt-panel].kpt-panel-active,
.month-quickjump[data-kpt-panel].kpt-panel-active { display: flex; }

/* Dividers hidden when tabs are active */
.kpt-divider-hidden { display: none; }

/* ── Secondary TF sub-tabs (within Seasonals panel) ───────────────────────── */
/* Sits immediately after the primary tab bar in DOM — cancel its 28px bottom-margin
   so the two rows sit flush, then indent slightly to signal subordination. */
.kpt-subtabs {
  margin-top: -28px;   /* cancel kpt-tabs margin-bottom so subBar sits flush under tabBar */
  margin-bottom: 28px;
  padding-left: 8px;   /* subtle indent signals secondary hierarchy */
  /* no border-top — tabBar's border-bottom already provides the dividing line */
}
/* Active state for sub-tabs uses per-button inline color (set by JS).
   The .active class here only sets the border-bottom width/style;
   color and border-bottom-color are overridden inline per TF accent. */
.kpt-subtab-btn.active {
  border-bottom-color: var(--accent-combined); /* fallback; overridden inline */
  color: var(--accent-combined);               /* fallback; overridden inline */
}

/* ── Month Quick-Jump ──────────────────────────────────────────────────────── */
.month-quickjump {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.qj-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.qj-btn:hover {
  color: var(--text);
  border-color: var(--dim);
  background: var(--surface2);
}
.qj-btn.qj-current {
  color: var(--accent-combined);
  border-color: rgba(34,197,94,0.35);
  background: rgba(34,197,94,0.07);
}

/* ── Conviction Pips (replaces ★☆ text in accordion) ─────────────────────── */
.conv-pips {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  vertical-align: middle;
}

.conv-pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}
.conv-pip.filled { background: var(--accent-combined); }

/* Conviction pips on index cards */
.card-signal .conv-pips { margin-left: auto; }

/* ── Legend Collapsible ────────────────────────────────────────────────────── */
.legend-header {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  gap: 12px;
}

.legend-toggle-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 9px;
  cursor: pointer;
  transition: all 0.15s;
  margin-left: auto;
  flex-shrink: 0;
}
.legend-toggle-btn:hover { color: var(--text); }

.legend { transition: opacity 0.2s; }
.legend-collapsed .legend { display: none; }

/* ── TradingView Skeleton Loader ───────────────────────────────────────────── */
.tv-skeleton {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(90deg,
    var(--surface) 0%,
    var(--surface2) 50%,
    var(--surface) 100%);
  background-size: 200% 100%;
  animation: kpt-shimmer 1.6s infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes kpt-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.tradingview-widget-container { position: relative; }

/* ── Sticky first column on TF tables ─────────────────────────────────────── */
.table-wrap table thead th:first-child,
.table-wrap table tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 2px 0 6px rgba(0,0,0,0.5);
}
.table-wrap table thead th:first-child {
  background: var(--surface2);
  z-index: 3;
}
.table-wrap table tbody td:first-child {
  background: var(--surface);
}
.table-wrap table tbody tr:hover td:first-child {
  background: var(--surface2);
}

/* ── AI Panel Hint Text ────────────────────────────────────────────────────── */
.ai-hint {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.5px;
  margin-top: 6px;
  line-height: 1.6;
}

/* ── Phase 5: Provider selector ────────────────────────────────────────────── */
.ai-provider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.ai-provider-label {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.ai-provider-btns {
  display: flex;
  gap: 6px;
}

.ai-provider-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}

.ai-provider-btn:hover {
  border-color: var(--accent-combined);
  color: var(--text);
}

.ai-provider-btn.active {
  background: rgba(34,197,94,0.1);
  border-color: rgba(34,197,94,0.4);
  color: var(--accent-combined);
}

.ai-settings-toggle {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  margin-left: auto;
  transition: all 0.15s;
}

.ai-settings-toggle:hover {
  color: var(--text);
  border-color: var(--muted);
}

/* ── Phase 5: Settings panel ───────────────────────────────────────────────── */
.ai-settings-panel {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 12px;
}

.ai-settings-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 12px;
}

.ai-sett-label {
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--muted);
  white-space: nowrap;
}

.ai-sett-input {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  padding: 5px 8px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
}

.ai-sett-input:focus { border-color: rgba(34,197,94,0.4); }

.ai-sett-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-sett-save {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 14px;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.35);
  border-radius: 3px;
  color: var(--accent-combined);
  cursor: pointer;
  transition: all 0.15s;
}

.ai-sett-save:hover { background: rgba(34,197,94,0.2); }

.ai-sett-saved {
  font-size: 10px;
  color: var(--accent-combined);
  letter-spacing: 0.5px;
}

.ai-sett-note {
  font-size: 9px;
  color: var(--muted);
  margin-left: auto;
}

/* ── Phase 5: Context bar ──────────────────────────────────────────────────── */
.ai-ctx-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.ai-ctx-label {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}

.ai-ctx-chip {
  font-size: 9px;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 20px;
  border: 1px solid transparent;
}

.ai-ctx-ok {
  color: var(--accent-combined);
  border-color: rgba(34,197,94,0.3);
  background: rgba(34,197,94,0.06);
}

.ai-ctx-na {
  color: var(--muted);
  border-color: var(--border);
  background: transparent;
}

/* ── Search Bar (index page) ───────────────────────────────────────────────── */
.search-wrap {
  margin: 0 0 24px;
  position: relative;
}

.search-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.4px;
  padding: 11px 60px 11px 38px;
  outline: none;
  transition: border-color 0.2s;
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus { border-color: rgba(34,197,94,0.4); box-shadow: 0 0 0 1px rgba(34,197,94,0.1); }

.search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 14px;
  pointer-events: none;
  line-height: 1;
}

.search-count {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1px;
  pointer-events: none;
}

.asset-card.search-hidden { display: none !important; }
.asset-card.sig-hidden    { display: none !important; }
.grid-section.section-all-hidden { opacity: 0.25; }

/* ── Signal filter bar ─────────────────────────────────────────────────────── */
.signal-filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto 12px;
  max-width: 900px;
  padding: 0 20px;
  flex-wrap: wrap;
}
.signal-filter-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-right: 4px;
}
.sig-filter-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.sig-filter-btn:hover        { color: var(--text); border-color: #334155; }
.sig-filter-btn.active       { color: var(--text); border-color: #475569; background: rgba(255,255,255,0.04); }
.sig-filter-btn.bull-filter.active { border-color: #22c55e; color: #22c55e; background: rgba(34,197,94,0.06); }
.sig-filter-btn.bear-filter.active { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,0.06); }
.sig-filter-btn.chop-filter.active { border-color: #f59e0b; color: #f59e0b; background: rgba(245,158,11,0.06); }
.signal-filter-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  margin-left: 4px;
}

/* ── Defer / Performance ───────────────────────────────────────────────────── */
/* (scripts use defer — no style changes needed here) */
/* This Week accordion styles are in index.html <style> block (index-only) */

/* ══════════════════════════════════════════════════════════════════════════════
   UPLOAD PANEL — Seasonal Tendency view (js/upload.js)
   .bt-* names kept from the pre-Tier-4 js/backtest.js this view replaced —
   upload.js reuses these classes directly rather than duplicating them.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Upload area (initial / empty state) ─────────────────────────────────── */
.bt-upload-area {
  padding: 40px 28px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 8px;
  margin-bottom: 32px;
}
.bt-desc {
  color: var(--dim);
  font-size: 13px;
  line-height: 1.7;
  max-width: 540px;
  margin: 0 auto 24px;
}
.bt-upload-btn {
  display: inline-block;
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent-combined);
  border: none;
  border-radius: 4px;
  padding: 9px 20px;
  transition: opacity 0.15s;
}
.bt-upload-btn:hover { opacity: 0.85; }
.bt-hint {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.5px;
  margin: 14px 0 0;
  line-height: 1.6;
}

/* ── Results container ───────────────────────────────────────────────────── */
.bt-results { margin-bottom: 32px; }

/* ── Summary chips ───────────────────────────────────────────────────────── */
.bt-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.bt-chip {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--accent-combined);
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: 3px;
  padding: 4px 10px;
}

/* ── Section sub-headings ────────────────────────────────────────────────── */
.bt-section-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 28px 0 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── Section interpretive text ───────────────────────────────────────────── */
.bt-section-desc {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  line-height: 1.65;
  color: #94a3b8;
  margin: 0 0 14px;
}
.bt-section-desc strong { color: #cbd5e1; }
.bt-section-desc em     { color: #94a3b8; font-style: normal; opacity: 0.8; }

.bt-threshold-note {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1.6;
  color: #64748b;
  border-left: 2px solid #1e2430;
  padding: 6px 0 6px 12px;
  margin: 0 0 14px;
}

/* ── Collapsible "How to read this" toggle ───────────────────────────────── */
.bt-desc-toggle {
  margin: 0 0 14px;
}
.bt-desc-toggle summary {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #475569;
  cursor: pointer;
  list-style: none;           /* hide default marker */
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  margin-bottom: 10px;
}
.bt-desc-toggle summary::before {
  content: '▶';
  font-size: 8px;
  transition: transform 0.15s ease;
  display: inline-block;
}
.bt-desc-toggle[open] summary::before {
  transform: rotate(90deg);
}
.bt-desc-toggle summary:hover { color: #94a3b8; }
.bt-desc-toggle summary::-webkit-details-marker { display: none; }

/* ── Upload guide steps ──────────────────────────────────────────────────── */
.bt-upload-steps {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  line-height: 1.85;
  color: #64748b;
  margin: 16px auto 24px;
  max-width: 540px;
  text-align: left;
  counter-reset: step-counter;
  list-style: none;
  padding: 0 0 0 28px;   /* indent for the absolute numbers */
  position: relative;
}
.bt-upload-steps li {
  position: relative;
  margin-bottom: 5px;
}
.bt-upload-steps li::before {
  content: counter(step-counter) '.';
  counter-increment: step-counter;
  position: absolute;
  left: -24px;
  color: #2d3f55;
  font-size: 10.5px;
}
.bt-upload-steps strong { color: #7dd3fc; font-weight: normal; }

/* ── Heatmap legend ──────────────────────────────────────────────────────── */
.bt-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.bt-leg-item {
  font-size: 11px;
  letter-spacing: 0.5px;
}
.bt-leg-bull  { color: #22c55e; }
.bt-leg-mid   { color: #f59e0b; }
.bt-leg-bear  { color: #ef4444; }
.bt-leg-chop  { color: var(--muted); }

/* ── Win-rate heatmap table ──────────────────────────────────────────────── */
.bt-heatmap-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.bt-table {
  border-collapse: collapse;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  width: 100%;
  min-width: 600px;
  margin-bottom: 4px;
}
.bt-table thead th {
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--muted);
  padding: 6px 4px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  font-weight: 400;
}
.bt-corner { width: 46px; }

.bt-row-label {
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--dim);
  padding: 0 8px 0 0;
  white-space: nowrap;
  vertical-align: middle;
  text-align: right;
}

/* ── Heatmap cells ───────────────────────────────────────────────────────── */
.bt-cell {
  text-align: center;
  padding: 5px 2px;
  border: 1px solid var(--border);
  vertical-align: middle;
  cursor: default;
  min-width: 44px;
}
.bt-cell:hover { filter: brightness(1.15); }

.bt-arrow {
  display: block;
  font-size: 10px;
  line-height: 1.3;
}
.bt-rate {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

/* Cell colour variants */
.bt-cell-bull {
  background: rgba(34,197,94,0.12);
  color: #22c55e;
}
.bt-cell-mid {
  background: rgba(245,158,11,0.10);
  color: #f59e0b;
}
.bt-cell-bear {
  background: rgba(239,68,68,0.10);
  color: #ef4444;
}
.bt-cell-chop {
  background: var(--surface);
  color: var(--muted);
}
.bt-cell-nodata {
  background: var(--surface);
  color: var(--muted);
  opacity: 0.5;
}

/* ── Monthly return chart ─────────────────────────────────────────────────── */
.bt-chart-wrap {
  position: relative;
  height: 220px;
  margin-bottom: 20px;
}

/* ── Footer note + clear button ──────────────────────────────────────────── */
.bt-note {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 20px;
}
.bt-clear-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.8px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 14px;
  cursor: pointer;
  margin-top: 12px;
  transition: color 0.15s, border-color 0.15s;
}
.bt-clear-btn:hover {
  color: #ef4444;
  border-color: rgba(239,68,68,0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MACRO PANEL — ForexFactory calendar embed
   ═══════════════════════════════════════════════════════════════════════════ */

.macro-panel {
  padding: 0;
  margin-bottom: 32px;
}

/* ── Header row ─────────────────────────────────────────────────────────── */
.macro-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.macro-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.macro-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
}

.macro-currencies {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.macro-currency-chip {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.8px;
  color: #7dd3fc;
  background: rgba(125,211,252,0.08);
  border: 1px solid rgba(125,211,252,0.2);
  border-radius: 3px;
  padding: 2px 7px;
}

.macro-links {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.macro-open-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.6px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 14px;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.macro-open-btn:hover {
  color: #7dd3fc;
  border-color: rgba(125,211,252,0.35);
}

/* ── Two-column body ─────────────────────────────────────────────────────── */
.macro-body {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* ── Embed container (left column, fixed width) ──────────────────────────── */
.macro-embed-outer {
  flex: 0 0 680px;
  height: 560px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.macro-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  filter: invert(1) hue-rotate(180deg);
  color-scheme: dark;
}

/* ── Guide panel (right column, fills remaining space) ───────────────────── */
.macro-guide {
  flex: 1;
  min-width: 0;
}

/* ── Guide toggle (<details>) ────────────────────────────────────────────── */
.macro-guide-toggle {
  margin: 0;
}

.macro-guide-toggle > summary {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #475569;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  margin-bottom: 18px;
}

.macro-guide-toggle > summary::before {
  content: '▶';
  font-size: 8px;
  transition: transform 0.15s ease;
  display: inline-block;
}

.macro-guide-toggle[open] > summary::before {
  transform: rotate(90deg);
}

.macro-guide-toggle > summary:hover { color: #94a3b8; }
.macro-guide-toggle > summary::-webkit-details-marker { display: none; }

/* ── Guide content sections ──────────────────────────────────────────────── */
.macro-guide-section {
  margin-bottom: 22px;
}

.macro-guide-section--impact {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.macro-guide-heading {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #334155;
  margin-bottom: 10px;
}

/* ── Impact legend rows ──────────────────────────────────────────────────── */
.macro-impact-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 7px;
}

.macro-imp {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.8px;
  border-radius: 3px;
  padding: 2px 6px;
  flex-shrink: 0;
}

.macro-imp-high { background: rgba(239,68,68,0.12);  color: #ef4444; }
.macro-imp-med  { background: rgba(245,158,11,0.12); color: #f59e0b; }
.macro-imp-low  { background: rgba(100,116,139,0.12); color: #64748b; }

.macro-imp-desc {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: #475569;
  line-height: 1.55;
}

/* ── Guide body text + lists ─────────────────────────────────────────────── */
.macro-guide-body-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: #475569;
  line-height: 1.75;
  margin: 0;
}

.macro-guide-body-text strong { color: #64748b; font-weight: 500; }
.macro-guide-body-text em     { color: #7dd3fc; font-style: normal; }

.macro-guide-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.macro-guide-item {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: #475569;
  line-height: 1.65;
  padding-left: 14px;
  position: relative;
  margin-bottom: 8px;
}

.macro-guide-item::before {
  content: '·';
  position: absolute;
  left: 0;
  color: #334155;
}

.macro-guide-item strong { color: #64748b; font-weight: 500; }

/* ── Responsive: stack columns below 1100px ──────────────────────────────── */
@media (max-width: 1100px) {
  .macro-body { flex-direction: column; }
  .macro-embed-outer { flex: none; width: 100%; max-width: 700px; }
}

/* ── Source note ─────────────────────────────────────────────────────────── */
.macro-source {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: #334155;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEASONAL CURVE PANEL (Phase 4 — js/seasonal-chart.js)
   ═══════════════════════════════════════════════════════════════════════════ */

.scurve-panel {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 0 0 24px;
}

/* ── Header ── */
.sc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 12px;
  margin-bottom: 20px;
}

.sc-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sc-label {
  font-family: 'Bebas Neue', cursive, sans-serif;
  font-size: 20px;
  color: #f1f5f9;
  letter-spacing: 1.5px;
  line-height: 1;
}

.sc-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: #64748b;
  letter-spacing: 0.4px;
}

/* ── "NOW" badge ── */
.sc-now {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 4px;
  padding: 6px 12px;
  flex-shrink: 0;
}

.sc-now-dot {
  color: #f59e0b;
  font-size: 11px;
  line-height: 1;
}

.sc-now-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: #f59e0b;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.sc-now-signal {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: #94a3b8;
  border-left: 1px solid rgba(245, 158, 11, 0.25);
  padding-left: 10px;
  margin-left: 2px;
  white-space: nowrap;
}

/* ── Canvas wrapper ── */
.sc-chart-wrap {
  position: relative;
  height: 250px;
  width: 100%;
}

/* ── Explainer (inside bt-desc-toggle) ── */
.sc-explainer {
  margin-bottom: 18px;
}

.sc-exp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .sc-exp-grid { grid-template-columns: 1fr; }
}

.sc-exp-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sc-exp-heading {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #64748b;
  margin: 0 0 4px;
  border-bottom: 1px solid #1e2430;
  padding-bottom: 6px;
}

.sc-exp-body {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: #64748b;
  line-height: 1.65;
  margin: 0;
}

.sc-exp-body strong { color: #94a3b8; font-weight: 500; }
.sc-exp-body em     { color: #94a3b8; font-style: normal; }

.sc-exp-legend {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: #64748b;
  line-height: 1.55;
}

.sc-exp-legend strong { color: #94a3b8; font-weight: 500; }

.sc-exp-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Dashed swatch for the "today" amber line */
.sc-exp-swatch--dashed {
  background: transparent;
  border-top: 2px dashed #f59e0b;
  border-radius: 0;
  height: 2px;
  margin-top: 7px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UPLOAD PANEL — Intraday Timing view (js/upload.js)
   .idt-* names kept from the pre-Tier-4 js/intraday.js this view replaced —
   upload.js reuses these classes directly rather than duplicating them.
   ═══════════════════════════════════════════════════════════════════════════ */

.idt-panel {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 0 0 24px;
}

/* ── Header ── */
.idt-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.idt-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.idt-label {
  font-family: 'Bebas Neue', cursive, sans-serif;
  font-size: 20px;
  color: #f1f5f9;
  letter-spacing: 1.5px;
  line-height: 1;
}

.idt-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: #64748b;
  letter-spacing: 0.4px;
}

/* ── Current signal badge ── */
.idt-now {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.idt-now-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: #475569;
  letter-spacing: 0.4px;
}

.idt-now-sig {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
}

.idt-now-week {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: #64748b;
  white-space: nowrap;
}

/* ── Explainer ── */
.idt-explainer {
  margin-bottom: 4px;
}

.idt-exp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .idt-exp-grid { grid-template-columns: 1fr; }
}

.idt-exp-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Upload area ── */
.idt-upload-area {
  border: 1px dashed #1e2430;
  border-radius: 6px;
  padding: 36px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s;
  margin-bottom: 20px;
}

.idt-upload-area:hover,
.idt-upload-area.idt-drag {
  border-color: #334155;
  background: rgba(30,36,48,0.4);
}

.idt-upload-inner { cursor: pointer; }

.idt-upload-icon {
  font-size: 28px;
  margin-bottom: 10px;
  line-height: 1;
}

.idt-upload-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 6px;
}

.idt-upload-hint {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: #475569;
  letter-spacing: 0.3px;
}

/* ── Timezone selector row ── */
.idt-tz-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
  flex-wrap: wrap;
}
.idt-tz-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: #64748b;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.idt-tz-select {
  background: #0d1117;
  border: 1px solid #1e2430;
  color: #94a3b8;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
}
.idt-tz-note {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: #475569;
  letter-spacing: 0.2px;
}

/* ── Meta row ── */
.idt-meta-row {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: #475569;
  margin-bottom: 16px;
  letter-spacing: 0.4px;
}

/* ── Controls row (filter + clear) ── */
.idt-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.idt-filter-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: #475569;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.idt-filter-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.idt-filter-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  padding: 4px 12px;
  border: 1px solid #1e2430;
  background: transparent;
  color: #475569;
  cursor: pointer;
  border-radius: 3px;
  letter-spacing: 0.4px;
  transition: color 0.1s, background 0.1s, border-color 0.1s;
}

.idt-filter-btn:hover { color: #94a3b8; border-color: #334155; }

.idt-filter-btn.active {
  background: #1e2430;
  color: #f1f5f9;
  border-color: #334155;
}

/* Ring on the button matching the current seasonal signal */
.idt-filter-btn--current {
  box-shadow: 0 0 0 1px #f59e0b;
}

.idt-clear-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  padding: 4px 10px;
  border: 1px solid #1e2430;
  background: transparent;
  color: #475569;
  cursor: pointer;
  border-radius: 3px;
  margin-left: auto;
  transition: color 0.1s, border-color 0.1s;
}

.idt-clear-btn:hover { color: #ef4444; border-color: #ef4444; }

/* ── Hourly chart ── */
.idt-chart-section { margin-bottom: 24px; }

.idt-chart-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: #64748b;
  letter-spacing: 0.5px;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.idt-chart-wrap {
  position: relative;
  height: 260px;
  width: 100%;
}

/* ── Session shading legend ── */
.idt-session-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.idt-sess-chip {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: #94a3b8;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid transparent;
  letter-spacing: 0.3px;
}

/* ── Lower section (sessions + DoW side by side) ── */
.idt-lower {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 900px) {
  .idt-lower { grid-template-columns: 1fr; }
}

.idt-section-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: #64748b;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* ── Session cards ── */
.idt-sess-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.idt-sess-card {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  border-left-width: 3px;
}
@media (max-width: 600px) {
  /* Four columns of nowrap stat text squeeze into overflow at phone widths
     with no scroll container of their own — stack instead. */
  .idt-sess-card { grid-template-columns: 1fr; gap: 4px; text-align: left; }
}

.idt-card--bull { border-left-color: #22c55e; }
.idt-card--bear { border-left-color: #ef4444; }

.idt-card-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: #f1f5f9;
  font-weight: 500;
}

.idt-card-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: #475569;
}

.idt-card-return {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.idt-card--bull .idt-card-return { color: #22c55e; }
.idt-card--bear .idt-card-return { color: #ef4444; }

.idt-card-pct,
.idt-card-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: #64748b;
  white-space: nowrap;
}
.idt-count-tip {
  display: inline-block;
  margin-left: 4px;
  font-size: 9px;
  color: #475569;
  cursor: help;
  vertical-align: middle;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.idt-count-tip:hover { opacity: 1; }

/* Session cards: adjust grid for cards without sub-label (DoW cards) */
.idt-sess-card.idt-dow-card {
  grid-template-columns: 60px auto auto;
}

/* ── Day-of-week cards ── */
.idt-dow-cards {
  display: flex;
  gap: 8px;
}
@media (max-width: 600px) {
  /* 7 equal-width flex:1 cards in one unwrapped row squeeze too far on
     phones (nowrap stat text inside each forces the row wider than the
     viewport) — wrap to roughly 3 per row instead. */
  .idt-dow-cards { flex-wrap: wrap; }
  .idt-dow-card { flex: 1 1 30%; }
}

.idt-dow-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  border-top-width: 3px;
  text-align: center;
}

.idt-dow-card.idt-card--bull { border-top-color: #22c55e; }
.idt-dow-card.idt-card--bear { border-top-color: #ef4444; }

.idt-dow-card .idt-card-name {
  font-size: 12px;
  font-weight: 600;
}

.idt-dow-card .idt-card-return {
  font-size: 11px;
}

.idt-dow-card .idt-card-pct {
  font-size: 9px;
}

.idt-dow-card .idt-card-count {
  font-size: 9px;
  color: #4a5568;
}

/* ── Status message ── */
.idt-status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: #f59e0b;
  margin-top: 12px;
  display: none;
}

/* ── Footer note ── */
.sc-footer {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: #334155;
  margin: 10px 0 0;
  text-align: center;
  letter-spacing: 0.3px;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT STYLES
   Supports PDF export / Ctrl+P of any asset dashboard page.
   All panels are shown (tab visibility overridden), navigation hidden,
   dark backgrounds replaced with white, text inverted to black.
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {

  /* ── Reset dark-mode base ───────────────────────────────────────────────── */
  :root {
    --bg:       #ffffff;
    --surface:  #f8f8f8;
    --surface2: #f0f0f0;
    --border:   #cccccc;
    --text:     #000000;
    --muted:    #555555;
    --dim:      #444444;
    --bull:     #1a7a2e;
    --bear:     #b91c1c;
    --chop:     #92400e;

    /* Market Profiling tab (js/profiling.js) — darkened for legibility on
       the white print background, same treatment as --bull/--bear/--chop
       above; without this, Profiling's charts would keep their dark-theme
       colors on a white page. */
    --kptp-compression: #1e40af;
    --kptp-expansion:   #a3175f;
    --kptp-normal:      #555555;
    --kptp-asian:       #6d28d9;
    --kptp-london:      #1e40af;
    --kptp-ny:          #1a7a2e;
    --kptp-overlap:     #92400e;
  }

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body, .container {
    background: #fff !important;
    color: #000 !important;
  }

  /* ── Hide interactive / navigation chrome ───────────────────────────────── */
  .topbar,
  .kpt-tabs,
  .kpt-subtabs,
  .legend-toggle-btn,
  .bt-clear-btn,
  .bt-upload-area,          /* hide the upload dropzone — data is already shown */
  .run-btn,
  #run-btn,
  .ai-provider-row,
  .ai-settings-toggle,
  .ai-settings-panel,
  .ai-ctx-bar,
  .idt-filter-row,
  .macro-links,
  .qj-btn,
  .month-quickjump,
  canvas + .bt-note,        /* "Note: spot vs futures basis" in backtest — marginal on print */
  .bt-desc-toggle summary,  /* hide "How to read this" toggles */
  .idt-chart-wrap           /* hide Chart.js canvas — stat cards convey the same info */
  { display: none !important; }

  /* ── Show ALL panels regardless of tab state ────────────────────────────── */
  [data-kpt-panel],
  [data-kpt-panel]:not(.kpt-panel-active),
  .table-wrap,
  [data-tf-section] {
    display: block !important;
    visibility: visible !important;
  }

  /* ── Legend ─────────────────────────────────────────────────────────────── */
  .legend { display: flex !important; }

  /* ── Remove backgrounds / borders that look bad on white ───────────────── */
  .surface, .up-panel, .bt-section,
  .scurve-panel, .macro-panel, .ai-panel {
    background: #f9f9f9 !important;
    border-color: #ccc !important;
    box-shadow: none !important;
  }

  .bt-heatmap-scroll { overflow: visible !important; }

  /* ── Accordion rows ─────────────────────────────────────────────────────── */
  .acc-details { display: table-row-group !important; }  /* show all expanded rows */

  /* ── TF tables — show all, no sub-tab hiding ────────────────────────────── */
  [data-tf-section="five"],
  [data-tf-section="fifteen"],
  [data-tf-section="lt"] { display: block !important; }

  /* ── Signal tags — ensure readable on white ──────────────────────────────── */
  .bull-tag  { background: #bbf7d0 !important; color: #14532d !important; border-color: #16a34a !important; }
  .bear-tag  { background: #fecaca !important; color: #7f1d1d !important; border-color: #dc2626 !important; }
  .chop-tag  { background: #fde68a !important; color: #78350f !important; border-color: #d97706 !important; }

  /* ── Backtest heatmap cells ──────────────────────────────────────────────── */
  .bt-cell-bull { background: #bbf7d0 !important; color: #14532d !important; }
  .bt-cell-mid  { background: #fde68a !important; color: #78350f !important; }
  .bt-cell-bear { background: #fecaca !important; color: #7f1d1d !important; }
  .bt-cell-chop { background: #e5e7eb !important; color: #374151 !important; }

  /* ── Intraday session cards ──────────────────────────────────────────────── */
  .idt-card { background: #f3f4f6 !important; border-color: #d1d5db !important; }

  /* ── AI output ───────────────────────────────────────────────────────────── */
  .ai-output { color: #000 !important; }
  .ai-output table { border-collapse: collapse; width: 100%; }
  .ai-output th, .ai-output td { border: 1px solid #999 !important; padding: 4px 8px !important; color: #000 !important; }

  /* ── Macro panel ─────────────────────────────────────────────────────────── */
  .macro-body     { flex-direction: column !important; }
  .macro-embed-outer { display: none !important; }        /* iframe won't print; skip it */
  .macro-guide    { width: 100% !important; min-width: 0; }

  /* ── Seasonal curve panel ────────────────────────────────────────────────── */
  .sc-chart-wrap canvas { max-width: 100% !important; height: auto !important; }

  /* ── TradingView chart ───────────────────────────────────────────────────── */
  #tv-chart-section, .tv-widget-inner { display: none !important; } /* iframe won't print */

  /* ── Page breaks ─────────────────────────────────────────────────────────── */
  .combined-wrap      { page-break-before: always; }
  .scurve-panel       { page-break-before: always; }
  .up-panel           { page-break-before: always; }
  .ai-panel           { page-break-before: always; }
  tr                  { page-break-inside: avoid; }
  .acc-month-row      { page-break-inside: avoid; }

  /* ── Footnote ────────────────────────────────────────────────────────────── */
  .footnote, .copyright {
    color: #444 !important;
    border-color: #ccc !important;
  }

  /* ── Typography overrides ────────────────────────────────────────────────── */
  h1, h2, h3, .section-label, .bt-section-title, .idt-label, .sc-label {
    color: #000 !important;
  }

  a { color: #000 !important; text-decoration: none !important; }

  /* ── Single-tab print mode (triggered by "Print this tab" button) ──────── */
  /* When .print-single-tab is on <body>, hide ALL panels except the active one */
  body.print-single-tab [data-kpt-panel] {
    display: none !important;
  }
  body.print-single-tab [data-kpt-panel].kpt-panel-active {
    display: block !important;
  }
  /* Also hide the Print tab button itself */
  .topbar-print-btn { display: none !important; }

}

/* ── Print tab button (screen only) ─────────────────────────────────────── */
.topbar-print-btn {
  background: transparent;
  border: 1px solid #1e2430;
  color: #64748b;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  margin-left: 8px;
  transition: color 0.15s, border-color 0.15s;
}
.topbar-print-btn:hover {
  color: #94a3b8;
  border-color: #334155;
}

/* ══════════════════════════════════════════════════════════════════════════
   Market Profiling tab (js/profiling.js, js/profiling-charts.js)
   All classes below are namespaced .kptp- — ported from KPT-Market-Profiling's
   dashboard/css/dashboard.css, which was seeded from an early ~11KB snapshot
   of this file. Do not assume its class names still match this file's own —
   audit before reusing. See docs/MARKET_PROFILING_INTEGRATION.md §5.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tab header row ────────────────────────────────────────────────────── */
.kptp-tab-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.kptp-tab-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 2px;
  color: #fff;
}
.kptp-tab-sub {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 4px;
}
.kptp-calendar-link-btn {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-combined);
  text-decoration: none;
  border: 1px solid rgba(34,197,94,0.3);
  background: rgba(34,197,94,0.07);
  padding: 6px 14px;
  border-radius: 20px;
  white-space: nowrap;
}
.kptp-calendar-link-btn:hover { background: rgba(34,197,94,0.15); }

/* ── Section labels / notes ────────────────────────────────────────────── */
.kptp-section-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 3px;
  color: var(--muted);
  text-transform: uppercase;
  margin: 40px 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.kptp-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.kptp-section-note {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 16px;
  max-width: 720px;
}

/* ── Granularity switcher (Daily/Weekly/Monthly/Yearly, within Profiling tab) ──
   Underline-tab style, matching .kpt-tab-btn's visual language (this is now
   the primary navigation for the tab's content, not a minor toggle like the
   lookback dial below) — but sized down slightly and namespaced .kptp- since
   it's a sub-level control, not the page's own top-level tab bar. */
.kptp-gran-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 28px;
  border-bottom: 1px solid var(--border);
}
.kptp-gran-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: -1px;
}
.kptp-gran-btn:hover { color: var(--text); }
.kptp-gran-btn.active {
  color: var(--accent-combined);
  border-bottom-color: var(--accent-combined);
}
.kptp-gran-panel[hidden] { display: none; }

/* ── Lookback dial slot (Profiling tab granularity panels) ────────────────
   The dial itself (built once, relocated per active panel — see
   js/profiling.js's switchGranularity()) needs clear air on both sides:
   above, so it doesn't read as glued to the last profile card in the
   Profile Taxonomy grid above it; below, .kptp-dial's own margin-bottom
   already separates it from the Range Distribution label that follows. */
.kptp-dial-slot { margin-top: 40px; } /* matches .kptp-section-label's own top margin, for the same rhythm */
.kptp-dial-slot:empty { margin-top: 0; } /* no gap while parked in a hidden panel */

/* ── Upload tab view switcher (Seasonal Tendency / Intraday Timing) ───────
   Same underline-tab visual language as .kptp-gran-switch — only shown when
   an upload's detected timeframe supports both views. */
.up-view-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 28px;
  border-bottom: 1px solid var(--border);
}
.up-view-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: -1px;
}
.up-view-btn:hover { color: var(--text); }
.up-view-btn.active {
  color: var(--accent-combined);
  border-bottom-color: var(--accent-combined);
}
.up-view-panel[hidden] { display: none; }

/* ── Lookback dial ──────────────────────────────────────────────────────── */
.kptp-dial {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 18px;
}
@media (max-width: 600px) {
  /* inline-flex with no wrap + overflow:hidden clips rather than adapting
     when the dial has several options — let it scroll instead. overflow-x
     here overrides only that axis; overflow-y stays hidden from the rule
     above, keeping the rounded-corner clipping intact. */
  .kptp-dial { overflow-x: auto; max-width: 100%; }
}
.kptp-dial button {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dim);
  background: var(--surface);
  border: none;
  border-right: 1px solid var(--border);
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.15s;
}
.kptp-dial button:last-child { border-right: none; }
.kptp-dial button:hover { background: var(--surface2); color: var(--text); }
.kptp-dial button.active { background: rgba(34,197,94,0.1); color: var(--bull); }

/* ── Stat tiles ─────────────────────────────────────────────────────────── */
.kptp-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.kptp-stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
}
.kptp-stat-tile .kptp-stat-label {
  font-size: 9.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.kptp-stat-tile .kptp-stat-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  letter-spacing: 1px;
  color: #fff;
}
.kptp-stat-tile .kptp-stat-value .kptp-unit {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  margin-left: 3px;
  letter-spacing: 0;
}

/* ── Panel cards ────────────────────────────────────────────────────────── */
.kptp-panel-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.kptp-panel-title {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 14px;
}
.kptp-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) { .kptp-two-col { grid-template-columns: 1fr; } }

/* ── Range distribution (percentile strip) ─────────────────────────────── */
.kptp-range-strip-wrap { margin-bottom: 6px; }
.kptp-range-strip-svg { width: 100%; height: 60px; display: block; }
.kptp-range-strip-caption {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  color: var(--muted);
  letter-spacing: 0.5px;
  margin-top: 4px;
}
.kptp-range-strip-caption .kptp-median-note { color: var(--text); }

/* ── Time-of-extreme heatmap strip ─────────────────────────────────────── */
.kptp-clock-svg { width: 100%; height: 70px; display: block; }
.kptp-clock-caption {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 10px;
  color: var(--dim);
  margin-top: 8px;
}
.kptp-clock-caption b { color: var(--text); }

.kptp-session-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 9.5px;
  color: var(--muted);
  margin-top: 10px;
  letter-spacing: 0.5px;
}
.kptp-session-legend .kptp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }

.kptp-concentration-badge {
  display: inline-block;
  font-size: 9.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 8px;
}
.kptp-conc-low  { background: rgba(239,68,68,0.12); color: var(--bear); border: 1px solid rgba(239,68,68,0.25); }
.kptp-conc-mid  { background: rgba(245,158,11,0.1); color: var(--chop); border: 1px solid rgba(245,158,11,0.25); }
.kptp-conc-high { background: rgba(34,197,94,0.12); color: var(--bull); border: 1px solid rgba(34,197,94,0.25); }

/* ── Bar charts (weekday / week-of-month / profile distribution) ─────────── */
.kptp-bar-chart-svg { width: 100%; height: 160px; display: block; }

/* ── Profile grid ───────────────────────────────────────────────────────── */
.kptp-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.kptp-profile-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  border-left: 3px solid var(--card-accent, var(--muted));
  display: block;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.kptp-profile-card:hover { background: var(--surface); border-color: var(--card-accent, var(--muted)); }
.kptp-profile-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.kptp-profile-icon { flex-shrink: 0; opacity: 0.9; }
.kptp-profile-card .kptp-profile-name { font-size: 12px; color: var(--text); font-weight: 600; margin-bottom: 4px; }
.kptp-profile-card .kptp-profile-pct { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: #fff; letter-spacing: 1px; }
.kptp-profile-card-link {
  font-size: 9.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--card-accent, var(--muted));
  margin-top: 10px;
}
.kptp-profile-card .kptp-profile-meta { font-size: 10px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* ── Profile detail page (profiling-profiles/detail.html) ─────────────────── */
.kptp-profile-detail-header {
  display: flex;
  align-items: center;
  gap: 20px;
  border-left-color: var(--card-accent, var(--accent-combined));
}
.kptp-profile-icon-large { flex-shrink: 0; opacity: 0.95; }
.kptp-profile-detail-text { font-size: 12px; color: var(--dim); line-height: 1.7; }
.kptp-profile-detail-text b { color: var(--text); }
.kptp-profile-detail-axes {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 10.5px;
  color: var(--muted);
}
.kptp-profile-detail-axes b { color: var(--text); }
.kptp-candlestick-svg { width: 100%; height: 240px; display: block; }
.kptp-profile-nav-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.kptp-profile-nav-pill {
  font-size: 10.5px;
  letter-spacing: 0.5px;
  color: var(--dim);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: all 0.15s;
}
.kptp-profile-nav-pill:hover { border-color: var(--pill-accent, var(--muted)); color: var(--text); }
.kptp-profile-nav-pill.active { border-color: var(--pill-accent, var(--accent-combined)); color: var(--text); background: var(--surface2); }

/* ── Calendar (profiling-calendar/) ────────────────────────────────────────── */
.kptp-calendar-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.kptp-calendar-nav-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--dim);
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}
.kptp-calendar-nav-btn:hover { border-color: var(--accent-combined); color: var(--text); }
.kptp-calendar-select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
}
.kptp-calendar-label { font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 1.5px; color: var(--muted); margin-left: 8px; }
.kptp-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 14px; }
.kptp-calendar-header-cell { font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); text-align: center; padding-bottom: 4px; }
.kptp-calendar-cell {
  aspect-ratio: 1;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--dim);
  background: var(--surface);
  border: 1px solid var(--border);
}
.kptp-calendar-cell.has-data {
  cursor: pointer;
  background: color-mix(in srgb, var(--cell-color) 18%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cell-color) 45%, var(--border));
  color: var(--text);
  transition: all 0.15s;
}
.kptp-calendar-cell.has-data:hover { background: color-mix(in srgb, var(--cell-color) 32%, var(--surface)); border-color: var(--cell-color); }
.kptp-calendar-cell.is-gap { background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 4px, var(--surface2) 4px, var(--surface2) 8px); color: var(--muted); }
.kptp-calendar-cell.no-data { opacity: 0.25; }
.kptp-calendar-profile-legend { margin-bottom: 20px; }
.kptp-calendar-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
  padding: 5px 0;
  border-bottom: 1px solid rgba(30,36,48,0.6);
}
.kptp-calendar-detail-row b { color: var(--text); font-weight: 500; }
.kptp-calendar-detail-row:last-child { border-bottom: none; }
.kptp-muted-inline { color: var(--muted); font-size: 10px; }
.kptp-calendar-context-label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.kptp-profile-link { display: inline-flex; align-items: center; gap: 6px; color: var(--card-accent, var(--text)); text-decoration: none; font-weight: 500; }
.kptp-profile-link:hover { text-decoration: underline; }
.kptp-profile-link svg { width: 18px; height: 18px; }

/* ── Tooltip + glossary ─────────────────────────────────────────────────── */
.kptp-tooltip {
  position: fixed;
  z-index: 1000;
  display: none;
  max-width: 260px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 11px;
  font-size: 11px;
  color: var(--dim);
  line-height: 1.5;
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
  pointer-events: none;
}
.kptp-tooltip b { color: #fff; text-transform: capitalize; }
.kptp-glossary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  color: var(--muted);
  font-size: 9px;
  line-height: 1;
  cursor: help;
  margin-left: 4px;
  vertical-align: 2px;
  transition: all 0.15s;
}
.kptp-glossary-icon:hover, .kptp-glossary-icon:focus { border-color: var(--accent-combined); color: var(--accent-combined); outline: none; }
.kptp-hoverable { cursor: pointer; }
.kptp-hoverable:hover { opacity: 1 !important; filter: brightness(1.25); }

/* ── Mode markers on range strips ──────────────────────────────────────── */
.kptp-mode-note {
  font-size: 9.5px;
  color: var(--muted);
  margin-top: 6px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.kptp-mode-note b { color: var(--text); font-weight: 500; }

/* ── Panel-scoped footnote (mirrors .footnote without reusing the class) ─── */
.kptp-footnote {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.5px;
  margin-top: 36px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.kptp-footnote .copyright { display: block; margin-top: 8px; color: var(--dim); letter-spacing: 0.5px; }

/* ── Back-link (profiling-calendar/ & profiling-profiles/ standalone pages) ── */
.kptp-back-link {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 18px;
}
.kptp-back-link:hover { color: var(--dim); }