/* Shared brand font, self-hosted for both marketing pages and the workspace. The WOFF2
   files are the homepage's lossless copies (fonts/homepage/manifest.json); the homepage
   inlines the same URLs, so every page renders one Manrope (logo included). */
@font-face{font-family:Manrope;src:url('/fonts/homepage/manrope-400-v1-cce81400759e.woff2') format('woff2'),url('/fonts/manrope-400-v1.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url('/fonts/homepage/manrope-500-v1-b983b43ef065.woff2') format('woff2'),url('/fonts/manrope-500-v1.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url('/fonts/homepage/manrope-600-v1-59bee39d2fc6.woff2') format('woff2'),url('/fonts/manrope-600-v1.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url('/fonts/homepage/manrope-700-v1-c5652f6ca741.woff2') format('woff2'),url('/fonts/manrope-700-v1.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}

/* ================================
   CSS Variables & Theme
   ================================ */
:root {
    /* Colors - Purple theme for premium sophisticated look */
    --primary: #2962FF;
    --primary-dark: #1e4dd9;
    --primary-light: #5389ff;
    --secondary: #9b59b6;
    --success: #27ae60;
    --success-light: #2ecc71;
    --warning: #f39c12;
    --danger: #e74c3c;
    --danger-light: #ec7063;
    --info: #17a2b8;

    /* Backgrounds */
    --bg-primary: #1a1d23;
    --bg-secondary: #22262e;
    --bg-tertiary: #2a2f38;
    --bg-card: #272b33;
    --bg-hover: #32373f;

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: #b0b8c4;
    --text-muted: #6c757d;

    /* Borders */
    --border-color: #3a3f48;
    --border-light: #454b55;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4);

    /* Sizing */
    --sidebar-width: 250px;
    --sidebar-collapsed: 70px;
    --header-height: 60px;
    --border-radius: 8px;
    --border-radius-lg: 12px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;
}

/* ================================
   Light theme — overrides of :root color tokens only. Component rules
   reference these variables so everything flips automatically. Accent
   colors (--primary, --success, --warning, --danger, --info) stay since
   they read on both themes.
   ================================ */
html[data-theme="light"] {
    --bg-primary:   #f5f7fa;
    --bg-secondary: #ffffff;
    --bg-card:      #ffffff;
    --bg-tertiary:  #f0f2f5;
    --bg-hover:     #e5e8ee;

    --text-primary:   #333333;
    --text-secondary: #484848;
    --text-muted:     #717171;

    --border-color: #e0e3e8;
    --border-light: #eef0f3;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* Tables are flat-rows + distinct-header on both themes — no zebra stripes.
   Header uses var(--bg-hover), rows inherit wrapper's var(--bg-tertiary).
   Kept: border-color defaults below for logo/header. */
html[data-theme="light"] .logo,
html[data-theme="light"] .header {
    border-color: rgba(0, 0, 0, 0.08);
}

/* ================================
   Reset & Base Styles
   ================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* mobile browsers paint a translucent blue block over whatever you tap
       (buttons, combo rows, table rows). Our own :active / .active styles
       already show the press, so the OS overlay is pure noise. */
    -webkit-tap-highlight-color: transparent;
}

html {
    /* Browser-default 16px root (buildmidas parity — it never overrides it).
       The rem scale below was authored against 14px and read 1.5-2px smaller
       than buildmidas everywhere; at 16px it lands on their rendered sizes. */
    scroll-behavior: smooth;
}

body {
    font-family: Manrope, Arial, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-light);
}

button, input, select, textarea { font-family: inherit; }

/* Marketing font and heading weight, with the workspace's compact size scale. */
h1, h2, h3, h4, h5, h6 {
    font-family: Manrope, Arial, sans-serif;
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.3;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.9rem; }
h6 { font-size: 0.8rem; }

/* ================================
   Layout
   ================================ */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    z-index: 100;
    transition: width var(--transition-normal);
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed);
}

.sidebar.collapsed .nav-item span,
.sidebar.collapsed .logo span,
.sidebar.collapsed .status-indicator span {
    display: none;
}

.sidebar.collapsed .nav-item {
    justify-content: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    height: var(--header-height);
    font-family: Manrope, Arial, sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.55;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    border-bottom: none;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
}

.logo i {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    filter: drop-shadow(0 0 8px rgba(41, 98, 255, 0.4));
}

.logo svg {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

html[data-theme="light"] .sidebar .logo { color: #15171c; }

@media (min-width: 769px) {
    .sidebar.collapsed .logo { padding-inline: 0; justify-content: center; }
}

.nav-menu {
    flex: 1;
    padding: 15px 0;
    overflow-y: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
    cursor: pointer;
}

.nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.nav-item:hover i {
    color: var(--primary);
    transform: scale(1.1);
}

.nav-item.active {
    background: rgba(41, 98, 255, 0.1);
    color: var(--primary);
    border-left-color: var(--primary);
}

.nav-item.active i {
    color: var(--primary);
}

.nav-item i {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.1rem;
    transition: all var(--transition-fast);
    border-radius: 6px;
}

.sidebar-footer {
    padding: 15px 20px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    animation: pulse 2s infinite;
    box-shadow: 0 0 8px var(--success), 0 0 16px rgba(39, 174, 96, 0.3);
}

.status-dot.warning {
    background: var(--warning);
    box-shadow: 0 0 8px var(--warning), 0 0 16px rgba(243, 156, 18, 0.3);
}

.status-dot.danger {
    background: var(--danger);
    box-shadow: 0 0 8px var(--danger), 0 0 16px rgba(231, 76, 60, 0.3);
}

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

/* Main Content */
.main-content {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--transition-normal);
}

.sidebar.collapsed + .main-content {
    margin-left: var(--sidebar-collapsed);
}

/* Header */
.header {
    height: var(--header-height);
    background: var(--bg-secondary);
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 25px;
    position: sticky;
    top: 0;
    z-index: 200;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px;
}

/* Visually-hidden page h1 for SEO/a11y — the app-shell header intentionally
   shows no page title, but crawlers and screen readers still need one. */
.sr-h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
         overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.page-title {
    font-size: 1.3rem;
    font-weight: 600;
}

.header-right {
    display: flex;
    align-items: center;
    /* 16px like buildmidas' header: with the globe gone there are two
       controls (Ask AI pill + avatar chip) and 2px read as one blob
       (owner 2026-09-19) */
    gap: 16px;
}

.icon-btn {
    position: relative;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all var(--transition-fast);
}

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

.icon-btn .badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--danger);
    color: white;
    font-size: 0.65rem;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

/* General badges */
.badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 8px;
}

.badge-info { background: var(--info); color: white; }
.badge-success { background: var(--success); color: white; }
.badge-warning { background: var(--warning); color: white; }
.badge-primary { background: var(--primary); color: white; }
.badge-danger { background: var(--danger); color: white; }

/* Content Wrapper */
.content-wrapper {
    flex: 1;
    min-width: 0;
    padding: 25px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Page */
.page {
    display: none;
}

.page.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ================================
   Cards
   ================================ */
.card {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
}

.card-header h3 {
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-header h3 i {
    color: var(--primary);
    font-size: 1.1rem;
}

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

/* Summary Cards */
.summary-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
}

.card-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
}

.bg-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.bg-success { background: linear-gradient(135deg, var(--success), var(--success-light)); }
.bg-warning { background: linear-gradient(135deg, var(--warning), #e67e22); }
.bg-info { background: linear-gradient(135deg, var(--info), #20c997); }
.bg-secondary { background: linear-gradient(135deg, var(--secondary), #8e44ad); }
.bg-danger { background: linear-gradient(135deg, var(--danger), var(--danger-light)); }

.card-content h3 {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.card-content .value {
    font-size: 1.6rem;
    font-weight: 700;
}

.card-content .value.positive { color: var(--success); }
.card-content .value.negative { color: var(--danger); }

.card-content .change {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.card-content .change.positive { color: var(--success); }
.card-content .change.negative { color: var(--danger); }

/* Chart Cards */
.chart-card {
    padding: 0;
}

.chart-container {
    padding: 20px;
    height: 300px;
    position: relative;
}

/* Token Cost card — over-time + by-agent charts beneath the per-agent table.
   No horizontal padding so the charts line up with the table's left/right edges. */
.tc-chart-block { margin-top: 18px; }
.tc-chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tc-chart-head .tc-chart-title { margin-bottom: 0; }
.tc-chart-title {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-secondary); margin-bottom: 8px;
}
/* Cost/Calls/Tokens metric toggle on the by-agent chart — same pill scheme as the
   Daily/Monthly/Annual returns tabs on the strategy page (--bg-hover default, --primary
   active, text-color lift on hover). */
.tc-metric-toggle { display: inline-flex; gap: 4px; }
.tc-metric-btn {
    font-size: 0.7rem; padding: 4px 12px; border: none; border-radius: 20px; cursor: pointer;
    background: var(--bg-hover); color: var(--text-secondary); transition: all 0.15s;
}
.tc-metric-btn:hover { color: var(--text-primary); }
.tc-metric-btn.active { background: var(--primary); color: #fff; }
/* Definite height keeps Chart.js (maintainAspectRatio:false) from the resize loop.
   The by-agent wrap height is set inline per agent count. */
.tc-chart-wrap { position: relative; height: 220px; }
/* Top Strategies leaderboard: the site's fixed-header table (.claude/rules/frontend.md,
   data-coverage .dc-scroll) — only the BODY scrolls, so the scrollbar runs from the bottom
   of the header down, never alongside it; matching gutters keep the columns aligned; narrow
   windows pan the whole table. */
.ins-lead-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ins-lead-wrap table { min-width: 760px; }
.ins-lead-wrap thead, .ins-lead-wrap tbody { display: block; }
.ins-lead-wrap thead tr, .ins-lead-wrap tbody tr { display: table; width: 100%; table-layout: fixed; }
.ins-lead-wrap thead { overflow-y: hidden; scrollbar-gutter: stable; background: var(--bg-card);
                       border-bottom: 1px solid var(--border-color); }
/* the header ROW carries the rule, so the reserved gutter on its right has it too */
.ins-lead-wrap thead th { border-bottom: none; }
/* the header row's rule is the line under the header: the first row's own top rule
   (inline, from dashboard.js) would double it everywhere except the gutter */
.ins-lead-wrap tbody tr:first-child td { border-top: none !important; }
.ins-lead-wrap tbody { max-height: 420px; overflow-y: auto; scrollbar-gutter: stable; }
.ins-lead-wrap th, .ins-lead-wrap td { overflow: hidden; text-overflow: ellipsis; }
.ins-lead-wrap th:nth-child(1), .ins-lead-wrap td:nth-child(1) { width: 26%; }
.ins-lead-wrap th:nth-child(9), .ins-lead-wrap td:nth-child(9) { width: 13%; }
/* Data Coverage stat-tile values, dashboard vocabulary: neutral total = primary blue, the
   problem counts (gaps / low-coverage / empty) carry the .neg red class in the markup. */
body[data-page-id="data-coverage"] #dcTotal { color: var(--primary); }
/* Data Coverage tables: fixed header + scrollable body, so the scrollbar sits BELOW the
   header (not alongside it). thead/tbody go block; rows become fixed-layout tables so columns
   stay aligned; scrollbar-gutter reserves matching space on both header and body. */
body[data-page-id="data-coverage"] .dc-scroll thead,
body[data-page-id="data-coverage"] .dc-scroll tbody { display: block; }
body[data-page-id="data-coverage"] .dc-scroll thead tr,
body[data-page-id="data-coverage"] .dc-scroll tbody tr { display: table; width: 100%; table-layout: fixed; }
body[data-page-id="data-coverage"] .dc-scroll thead { overflow-y: hidden; scrollbar-gutter: stable; background: var(--bg-tertiary); }
body[data-page-id="data-coverage"] .dc-scroll tbody { max-height: 600px; overflow-y: auto; scrollbar-gutter: stable; }
/* Explicit per-column widths for the 11-col data table (fixed layout): Source, Symbol,
   Exchange, Venue, TF, Coverage, Rows, Gaps, Dupes, Max Gap, Span. */
body[data-page-id="data-coverage"] #dcWorstScroll th:nth-child(1),
body[data-page-id="data-coverage"] #dcWorstScroll td:nth-child(1) { width: 8%; }
body[data-page-id="data-coverage"] #dcWorstScroll th:nth-child(2),
body[data-page-id="data-coverage"] #dcWorstScroll td:nth-child(2) { width: 15%; }
body[data-page-id="data-coverage"] #dcWorstScroll th:nth-child(3),
body[data-page-id="data-coverage"] #dcWorstScroll td:nth-child(3) { width: 9%; }
body[data-page-id="data-coverage"] #dcWorstScroll th:nth-child(4),
body[data-page-id="data-coverage"] #dcWorstScroll td:nth-child(4) { width: 12%; }
body[data-page-id="data-coverage"] #dcWorstScroll th:nth-child(5),
body[data-page-id="data-coverage"] #dcWorstScroll td:nth-child(5) { width: 6%; }
body[data-page-id="data-coverage"] #dcWorstScroll th:nth-child(6),
body[data-page-id="data-coverage"] #dcWorstScroll td:nth-child(6) { width: 9%; }
body[data-page-id="data-coverage"] #dcWorstScroll th:nth-child(7),
body[data-page-id="data-coverage"] #dcWorstScroll td:nth-child(7) { width: 7%; }
body[data-page-id="data-coverage"] #dcWorstScroll th:nth-child(8),
body[data-page-id="data-coverage"] #dcWorstScroll td:nth-child(8) { width: 6%; }
body[data-page-id="data-coverage"] #dcWorstScroll th:nth-child(9),
body[data-page-id="data-coverage"] #dcWorstScroll td:nth-child(9) { width: 6%; }
body[data-page-id="data-coverage"] #dcWorstScroll th:nth-child(10),
body[data-page-id="data-coverage"] #dcWorstScroll td:nth-child(10) { width: 8%; }
body[data-page-id="data-coverage"] #dcWorstScroll th:nth-child(11),
body[data-page-id="data-coverage"] #dcWorstScroll td:nth-child(11) { width: 14%; }
/* Tighter cells + wrap long content so all columns fit without clipping the headers. */
body[data-page-id="data-coverage"] .dc-scroll th,
body[data-page-id="data-coverage"] .dc-scroll td { padding: 8px 10px; }
body[data-page-id="data-coverage"] .dc-scroll td { overflow-wrap: anywhere; }
/* Sortable headers: clickable, highlight on hover, active arrow rendered by JS. */
body[data-page-id="data-coverage"] #dcWorstScroll th.dc-sortable { cursor: pointer; user-select: none; }
body[data-page-id="data-coverage"] #dcWorstScroll th.dc-sortable:hover { color: var(--primary); }
/* Per-page selector menu opens upward (it sits at the bottom of a list). */
.filter-combo-menu.combo-up { top: auto; bottom: calc(100% + 4px); }

/* ================================
   Dashboard Grid
   ================================ */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.dashboard-grid .wide {
    grid-column: span 2;
}

.dashboard-grid .full-width {
    grid-column: 1 / -1;
}

/* ================================
   Tables
   ================================ */
.table-wrapper {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table th,
table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

table th {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg-tertiary);
}

table td {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

table tbody tr {
    transition: background var(--transition-fast);
}

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

/* Sortable table headers */
th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.sortable:hover {
    color: var(--primary-light);
}

th.sortable i {
    margin-left: 4px;
    font-size: 0.7rem;
    opacity: 0.5;
}

th.sortable:hover i,
th.sortable i.fa-sort-up,
th.sortable i.fa-sort-down {
    opacity: 1;
}

/* Pagination controls */
.pagination-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
}
/* 3-zone layout: .pag-info on left, .pag-nav (buttons) centered via auto
   margins, .pag-per-page selector on right. The nav wrapper's margin: 0 auto
   absorbs extra space on both sides, anchoring it in the middle while
   pushing the selector flush to the right edge. */
.pag-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 auto;
}

.pag-btn {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.15s;
}

.pag-btn:hover:not(:disabled) {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.pag-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.pag-info {
    padding: 0 12px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
}

.pag-per-page {
    padding: 2px 8px;
    border: none;
    border-radius: 20px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.pag-per-page:hover {
    background: var(--bg-tertiary);
}
.pag-per-page:focus {
    outline: none;
}

/* Reusable filter-bar control: select + text input. Transparent by
   default (matches the per-page dropdown), --bg-tertiary on hover and
   while focused, primary-color glow on focus (box-shadow, no layout
   shift). Pill-ish 8px radius. Add class="filter-control" to any
   select/input. */
.filter-control {
    padding: 7px 14px;
    border: none;
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 1rem;
    font-family: inherit;
    transition: background var(--transition-fast);
}
input.filter-control { color: var(--text-primary); }
select.filter-control { cursor: pointer; }
.filter-control:hover { background: var(--bg-hover); }
.filter-control:focus {
    outline: none;
    background: var(--bg-hover);
}
.filter-control::placeholder { color: var(--text-muted); }

/* Searchable tag combobox: a .filter-control input that LOOKS like the sibling
   <select> filters (same pill + caret + size) but can be typed into to filter the
   tag list. Native <select> can't be searched; only the search ability is added —
   the resting appearance matches the original tag dropdown. */
.filter-combo { position: relative; display: inline-block; }
/* Compact verification pips (strategies table "Verify" column) — 4 dots for the layers. */
.v-pips { display: inline-flex; gap: 4px; align-items: center; }
.v-pip { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.v-pip.pass { background: #27ae60; }
.v-pip.fail { background: #ef4444; }
.v-pip.skip { background: var(--text-muted); opacity: 0.35; }
/* A filter-combo dropdown is absolutely-positioned inside its card; when the table is
   short the card's overflow:hidden clipped the menu's BOTTOM. Let cards that hold a
   filter combo overflow visibly so the menu can extend past a short card. (The card's
   bottom edge is the pagination row, which has no corner-reaching background, so the
   12px rounded corners stay clean.) */
/* !important to beat the theme-scoped `body:is(...) .card` overflow rules (the
   light-theme one forces hidden, which re-clips the menu). Scoped to combo-cards only. */
.card:has(.filter-combo) { overflow: visible !important; }
.filter-combo > .filter-control {
    width: 150px;            /* fits the longest placeholder at 1rem ("All performance") */
    padding-right: 26px;     /* room for the caret */
    cursor: pointer;
}
.filter-combo::after {       /* dropdown caret, like a native select */
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--text-muted);
    pointer-events: none;
}
.filter-combo-menu {
    position: absolute;
    top: calc(100% + 4px);
    /* Anchor to the combo's right edge so the menu opens leftward, into the page —
       the filter controls sit at the page's right edge, so a left-anchored menu
       (min-width 200px wider than the 127px input) overflowed off the right edge. */
    right: 0;
    z-index: 1000;   /* above sticky table headers (z-index 200) so the open menu is
                        never painted under the table rows below the filter bar */
    min-width: 200px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    scrollbar-width: thin;                 /* Firefox: thin bar */
    scrollbar-color: var(--bg-hover) transparent;
}
/* Keep the scrollbar inside the rounded menu: inset the track top/bottom so it never
   reaches the rounded corners, and pad the thumb off the right edge. */
/* Instrument picker of a Price & Trades chart (paper and live strategy pages):
   a compact combo under the chart title, left-aligned, so its menu opens
   rightward into the card instead of past its left edge. */
.kline-leg-combo { display: block; width: fit-content; margin: 0 0 8px; }
.kline-leg-combo > .kline-leg-select {
    width: auto;
    min-width: 220px;
    max-width: 280px;
    padding: 4px 26px 4px 10px;
    font-size: 12px;
}
.kline-leg-combo .filter-combo-menu { left: 0; right: auto; }
/* A filter in a card title bar (paper Trades): wide enough for its
   "All instruments (12)" placeholder, which the 150px default clipped. */
.pt-card-title .filter-combo > .filter-control { width: 200px; }
.filter-combo-menu::-webkit-scrollbar { width: 10px; }
.filter-combo-menu::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
.filter-combo-menu::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border-radius: 6px;
    border: 3px solid transparent;
    background-clip: padding-box;
}
/* Default menu anchor is right:0 (the filter bars on most pages sit at the right edge).
   The Live Market controls are LEFT-aligned, so their menus must open rightward instead,
   or they'd overflow off the left edge. */
.lm-controls .filter-combo-menu { left: 0; right: auto; }
.filter-combo-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 1rem;      /* match .filter-control — the menu options read at
                             the same size as the pill that opened them */
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}
.filter-combo-item:hover,
.filter-combo-item.is-kbd { background: var(--bg-hover); color: var(--text-primary); }
.filter-combo-item.active { background: rgba(41, 98, 255, 0.14); color: var(--text-primary); }
.filter-combo-count { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.filter-combo-empty { padding: 8px 10px; color: var(--text-muted); font-size: 0.78rem; }
/* <optgroup> heading inside a themed form select (sfThemeSelect). */
.filter-combo-group {
    padding: 8px 12px 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Form fields on pages and cards (Backtest Lab, Import, strategy-page cards):
   the same .filter-control pill and states, stretched to the field's column.
   Text, number, date inputs and textareas take "filter-control sf-field";
   selects become a full-width themed combo via sfThemeSelect (.sf-select). */
.filter-control.sf-field {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
textarea.filter-control {
    border-radius: 16px;
    padding: 10px 14px;
    line-height: 1.45;
    resize: vertical;
}
.filter-control:disabled { opacity: 0.5; cursor: default; }
/* Publish-to-Marketplace dialog (strategy-detail.js sfOpenPublish): spacing only. */
.filter-control.sf-pub-field { margin-bottom: 12px; }
.filter-control.sf-pub-price { width: 160px; margin-bottom: 16px; }
.filter-control:user-invalid,
.filter-control[aria-invalid="true"] { box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.45); }
/* The native date picker's icon and popup follow the theme. */
html:not([data-theme="light"]) .filter-control[type="date"] { color-scheme: dark; }
.filter-combo.sf-select {
    display: block;
    width: 100%;
    min-width: 0;
}
.filter-combo.sf-select > .filter-control {
    width: 100%;
    box-sizing: border-box;
}
.filter-combo.is-disabled > .filter-control { cursor: default; }
.filter-combo.is-disabled::after { opacity: 0.5; }

/* Themed file picker (sfFileDrop): the native input is visually hidden, a
   dashed drop zone holds the idea box's attach button, and the chosen files
   are the chat composer's chips (.chat-file-preview + .chat-file-remove). */
.sf-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.sf-file-drop {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 8px 14px 8px 8px;
    border: 1px dashed var(--border-color);
    border-radius: 16px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.sf-file-drop:hover { border-color: var(--primary); }
.sf-file-drop.is-dragover {
    border-color: var(--primary);
    background: rgba(41, 98, 255, 0.08);
}
.sf-file-drop.is-error { border-color: var(--danger); }
.sf-file-drop-text { flex: 1 1 160px; min-width: 0; }
.sf-file-drop-hint {
    flex-basis: 100%;
    padding-left: 46px;
    color: var(--text-muted);
    font-size: 0.78rem;
}
.sf-file-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sf-file-list:empty { display: none; }
.chat-file-preview.sf-file-chip { max-width: 100%; margin-bottom: 0; box-sizing: border-box; }
.sf-file-chip .sf-file-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
}
.sf-file-chip .sf-file-size { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.sf-file-error { margin-top: 8px; }
.sf-file-error[hidden] { display: none; }
/* Keyboard focus shows the way hover does, never a browser ring. */
.chat-attach-btn:focus-visible {
    outline: none;
    color: var(--primary);
    background: rgba(41, 98, 255, 0.14);
}
.chat-file-remove:focus-visible {
    outline: none;
    color: #ef4444;
    background: var(--bg-hover);
}

/* Status badges in tables */
.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-active,
.status-live,
.status-live_stage {
    background: rgba(39, 174, 96, 0.15);
    color: var(--success);
}

.status-pending {
    background: rgba(243, 156, 18, 0.15);
    color: var(--warning);
}
.status-in_progress {
    background: rgba(41, 98, 255, 0.15);
    color: var(--primary);
}
.status-tested {
    background: rgba(39, 174, 96, 0.15);
    color: var(--success);
}

.status-coding,
.status-verifying,
.status-backtesting,
.status-backtest_stage,
.status-backtest_review,
.status-optimizing,
.status-analyzing,
.status-iterating {
    background: rgba(41, 98, 255, 0.15);
    color: var(--primary);
}

.status-promoting,
.status-risk_review {
    background: rgba(23, 162, 184, 0.15);
    color: var(--info);
}

.status-abandoned,
.status-failed {
    background: rgba(231, 76, 60, 0.15);
    color: var(--danger);
}

.status-retired {
    background: rgba(108, 117, 125, 0.15);
    color: var(--text-muted);
}

.status-paper,
.status-paper_stage {
    background: rgba(155, 89, 182, 0.15);
    color: var(--secondary);
}

.status-idle {
    background: rgba(108, 117, 125, 0.15);
    color: var(--text-muted);
}

.status-running {
    background: rgba(39, 174, 96, 0.15);
    color: var(--success);
}

.status-error,
.status-paused {
    background: rgba(231, 76, 60, 0.15);
    color: var(--danger);
}

/* ================================
   Pipeline Visualization
   ================================ */
.pipeline-flow {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 20px;
    overflow-x: auto;
}

.pipeline-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 100px;
    position: relative;
}

.pipeline-stage-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border: 2px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-muted);
    transition: all var(--transition-normal);
}

.pipeline-stage.completed .pipeline-stage-icon {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.pipeline-stage.active .pipeline-stage-icon {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    animation: pulse 2s infinite;
    box-shadow: 0 0 12px rgba(41, 98, 255, 0.5);
}

.pipeline-stage.failed .pipeline-stage-icon {
    background: var(--danger);
    border-color: var(--danger);
    color: white;
}

.pipeline-stage-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pipeline-stage.completed .pipeline-stage-label {
    color: var(--success);
}

.pipeline-stage.active .pipeline-stage-label {
    color: var(--primary-light);
}

.pipeline-stage.failed .pipeline-stage-label {
    color: var(--danger);
}

.pipeline-connector {
    width: 30px;
    height: 2px;
    background: var(--border-color);
    flex-shrink: 0;
}

.pipeline-connector.completed {
    background: var(--success);
}

/* Pipeline run card */
.pipeline-run-card {
    margin-bottom: 16px;
}

.pipeline-run-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
}

.pipeline-run-header h4 {
    font-size: 0.95rem;
    font-weight: 600;
}

.pipeline-run-header .pipeline-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* ================================
   Activity Feed
   ================================ */
.activity-feed {
    padding: 0;
}
/* Recent Activity: bounded scroll area per page so the card stays compact, with
   pagination below (see activityGoPage in dashboard.js). */
.activity-list {
    max-height: 420px;
    overflow-y: auto;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    transition: background var(--transition-fast);
}

.activity-item:hover {
    background: var(--bg-hover);
}

.activity-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.activity-icon.research { background: rgba(41, 98, 255, 0.15); color: var(--primary); }
.activity-icon.development { background: rgba(23, 162, 184, 0.15); color: var(--info); }
.activity-icon.verification { background: rgba(243, 156, 18, 0.15); color: var(--warning); }
.activity-icon.backtest { background: rgba(39, 174, 96, 0.15); color: var(--success); }
.activity-icon.analysis { background: rgba(155, 89, 182, 0.15); color: var(--secondary); }
.activity-icon.risk { background: rgba(231, 76, 60, 0.15); color: var(--danger); }

/* Recent-activity rows (audit "Strategy Data Integrity" + dashboard feed): the 36px
   status icon is taller than the single-line title, so flex-start left its glyph ~8px
   below the title. Lift it so the icon centers on the title's first line. */
body:is([data-page-id="audit"], [data-page-id="dashboard"]) .activity-icon { margin-top: -8px; }

.activity-content {
    flex: 1;
}

.activity-content .activity-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.activity-content .activity-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.activity-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ================================
   Agent Cards
   ================================ */
.agent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.agent-card {
    padding: 20px;
}

.agent-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.agent-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.agent-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
}

.agent-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.agent-role {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.agent-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.agent-stat {
    background: var(--bg-tertiary);
    padding: 10px;
    border-radius: var(--border-radius);
}

.agent-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.agent-stat-value {
    font-size: 1rem;
    font-weight: 700;
}

/* ================================
   Hypothesis Cards
   ================================ */
.hypothesis-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

.hypothesis-item {
    background: var(--bg-hover);
    border-radius: var(--border-radius);
    padding: 16px;
    transition: all var(--transition-fast);
}

.hypothesis-item-link {
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}
.hypothesis-item:hover {
    background: color-mix(in srgb, var(--bg-tertiary) 85%, #000);
}

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

/* Title: single line + ellipsis by default; click to expand to the full title. */
.hypothesis-title {
    font-weight: 600;
    font-size: 0.95rem;
    flex: 1;
    min-width: 0;
    white-space: normal;   /* full title, no truncation */
}
.hypothesis-header .status { flex-shrink: 0; }

/* Body: shown in full (no clamp). */
.hypothesis-body {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}

/* Tags: first 4 shown; click the "+N more" badge to reveal the rest (footer then wraps).
   Scoped under .hypothesis-footer so the hide beats the base .tag display rule. */
.hypothesis-footer .hyp-tag-extra { display: none; }
.tag-more { cursor: pointer; }
.hypothesis-footer.tags-shown { flex-wrap: wrap; overflow: visible; }
.hypothesis-footer.tags-shown .hyp-tag-extra { display: inline-flex; }
.hypothesis-footer.tags-shown .tag-more { display: none; }

/* Footer: single row of tags (they don't shrink/wrap) so every card is the same height. */
.hypothesis-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    /* wrap instead of clip: at tablet widths (≈1024px) nowrap+hidden cut off
       the "View Strategy" link after the tag chips. flex-wrap only engages
       when the row doesn't fit, so wide desktop rows render exactly as
       before. */
    flex-wrap: wrap;
    row-gap: 6px;
    min-height: 24px;
}
.hypothesis-footer .tag { flex-shrink: 0; white-space: nowrap; }

.hypothesis-strategy-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 4px 12px;
    background: rgba(41, 98, 255, 0.1);
    border: none;
    border-radius: 20px;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-fast);
    cursor: pointer;
    white-space: nowrap;       /* stay one line so the footer height is constant */
    overflow: hidden;
    min-width: 0;
    flex-shrink: 0;
}
.hypothesis-strategy-link:hover {
    background: rgba(41, 98, 255, 0.2);
}

.hypothesis-strategy-link i {
    font-size: 0.7rem;
}

.hypothesis-strategy-link .status {
    font-size: 0.68rem;
    padding: 1px 6px;
}

.hypothesis-strategy-name {
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(41, 98, 255, 0.15);
    color: var(--primary);
}

.tag.priority-high {
    background: rgba(231, 76, 60, 0.15);
    color: var(--danger);
}

.tag.priority-medium {
    background: rgba(243, 156, 18, 0.15);
    color: var(--warning);
}

.tag.priority-low {
    background: rgba(39, 174, 96, 0.15);
    color: var(--success);
}

/* ================================
   Loading & Empty States
   ================================ */
/* Canonical loading indicator — SAME size/styling everywhere (matches the
   chat thinking indicator): 14px spinner + 14px text, 8px gap, centered,
   var(--text-secondary). `.page` variant centers vertically for whole-page
   initial loads. `td.loading-cell` is the in-table equivalent. */
.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-secondary);
    gap: 8px;
    font-size: 14px;
    /* Centred on every page: inside a card grid (agents, marketplace, paper
       strategies …) the indicator spans every column instead of sitting in
       the first cell; inside flex rows it takes the full width. */
    grid-column: 1 / -1;
    width: 100%;
    flex: 1 1 100%;
    text-align: center;
    box-sizing: border-box;
}
.loading-spinner.page { min-height: 45vh; }
.loading-spinner p,
.loading-spinner span { margin: 0; font-size: 14px; }

.loading-spinner i {
    font-size: 14px;
    animation: spin 1s linear infinite;
}

td.loading-cell {
    text-align: center;
    color: var(--text-secondary);
    padding: 24px;
    font-size: 14px;
}
td.loading-cell i { margin-right: 8px; }

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

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-muted);
    text-align: center;
}

.empty-state i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-state p {
    font-size: 0.9rem;
}

/* ================================
   Responsive
   ================================ */
@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sidebar {
        width: var(--sidebar-collapsed);
    }

    .sidebar .nav-item span,
    .sidebar .logo span,
    .sidebar .status-indicator span {
        display: none;
    }

    .sidebar .nav-item {
        justify-content: center;
    }

    .main-content {
        margin-left: var(--sidebar-collapsed);
    }

    .menu-toggle {
        display: block;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-grid .wide {
        grid-column: span 1;
    }

    .agent-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================
   Scrollbar
   ================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

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

::-webkit-scrollbar-thumb:hover {
    background: var(--border-light);
}

/* ================================
   Refresh Indicator
   ================================ */
.refresh-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.refresh-indicator.updating i {
    animation: spin 1s linear infinite;
}

/* Settings page */
.settings-section {
    padding: 20px;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
}

.settings-row:last-child {
    border-bottom: none;
}

/* Theme toggle (on Settings page) — segmented pill with two options */
.theme-toggle {
    display: inline-flex;
    gap: 4px;
    background: var(--bg-tertiary);
    border-radius: 20px;
    padding: 3px;
}
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border: none;
    border-radius: 20px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.theme-toggle-btn:hover {
    color: var(--text-primary);
}
.theme-toggle-btn.active {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.settings-label {
    font-weight: 600;
    font-size: 0.9rem;
}

.settings-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.settings-control input[type="text"],
.settings-control input[type="number"],
.settings-control input[type="password"],
.settings-control select {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    outline: none;
}

.settings-control input:focus,
.settings-control select:focus {
    border-color: var(--primary);
}

/* Verification result icons */
.verification-pass {
    color: var(--success);
}

.verification-fail {
    color: var(--danger);
}

.verification-skip {
    color: var(--text-muted);
}

/* ================================
   Stage Detail Modal
   ================================ */
.stage-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.stage-detail-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.25s ease;
    overflow: hidden;   /* clip .stage-detail-content scrollbar to rounded corners */
}

/* Keep the modal's main scrollbar (.stage-detail-content) above the rounded
   bottom corner of the card (12px = --border-radius-lg). */
.stage-detail-content::-webkit-scrollbar {
    width: 6px;
}
.stage-detail-content::-webkit-scrollbar-track {
    background: transparent;
    margin-bottom: 12px;
}
.stage-detail-content::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.stage-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.stage-detail-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--primary-light);
}

/* Close buttons: ONE rule for every dialog and panel close on the site
   (2026-09-29, operator: "exactly the same styling as the buildmidas close
   button"). Buildmidas' .modal-close-btn: a 36px circle, no border, #f2f2f2
   fill, #636363 two-line X at 18px; hover #e5e5e5 / #1a1a1a. Light mode and
   the marketing pages use exactly those colours; dark mode (buildmidas has
   none) keeps the shape and icon on the site's dark greys. The icon is drawn
   here (a mask of the two-line X) whatever the markup carries — Font Awesome's
   solid xmark, a &times; glyph or an SVG — so every close looks the same. */
html body :is(.modal-close-btn, .sf-modal-close, .lc-close, .mnav-close, .spa-closebtn,
              .stage-detail-header .close-btn) {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--close-bg, var(--bg-tertiary));
    border: none;
    border-radius: 50%;
    color: var(--close-fg, var(--text-secondary));
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
html body :is(.modal-close-btn, .sf-modal-close, .lc-close, .mnav-close, .spa-closebtn,
              .stage-detail-header .close-btn):hover {
    background: var(--close-bg-hover, var(--bg-hover));
    color: var(--close-fg-hover, var(--text-primary));
}
html body :is(.modal-close-btn, .sf-modal-close, .lc-close, .mnav-close, .spa-closebtn,
              .stage-detail-header .close-btn) > * {
    display: none;
}
html body :is(.modal-close-btn, .sf-modal-close, .lc-close, .mnav-close, .spa-closebtn,
              .stage-detail-header .close-btn)::before {
    content: "";
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
html[data-theme="light"] body :is(.modal-close-btn, .sf-modal-close, .lc-close, .mnav-close,
                                  .spa-closebtn, .stage-detail-header .close-btn),
html body.sf-marketing :is(.modal-close-btn, .sf-modal-close, .lc-close, .mnav-close,
                           .spa-closebtn, .stage-detail-header .close-btn) {
    --close-bg: #f2f2f2;
    --close-fg: #636363;
    --close-bg-hover: #e5e5e5;
    --close-fg-hover: #1a1a1a;
}

.stage-detail-content {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.stage-detail-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.stage-detail-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.stage-detail-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.stage-detail-section h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stage-detail-section h4 i {
    color: var(--primary);
    font-size: 0.9rem;
}

.stage-detail-subsection {
    margin-top: 14px;
    padding: 14px 14px 14px 18px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary);
}

.stage-detail-subsection h5 {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.stage-metric {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 7px 8px;
    gap: 12px;
    border-radius: 4px;
}

.stage-metric:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.stage-metric-label {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 500;
    flex-shrink: 0;
}

.stage-metric-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
    word-break: break-word;
}

.stage-metric-value.stage-metric-text {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
}

.stage-detail-layers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.stage-layer-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    text-align: center;
}

.stage-layer-card .layer-icon {
    font-size: 1.2rem;
    line-height: 1;
}

.stage-layer-card .layer-icon.pass { color: var(--success); }
.stage-layer-card .layer-icon.fail { color: var(--danger); }
.stage-layer-card .layer-icon.pending { color: var(--text-muted); }

.stage-layer-card .layer-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.stage-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.stage-badge-pass {
    background: rgba(39, 174, 96, 0.15);
    color: var(--success);
}

.stage-badge-fail {
    background: rgba(231, 76, 60, 0.15);
    color: var(--danger);
}

.stage-badge-pending {
    background: rgba(108, 117, 125, 0.15);
    color: var(--text-muted);
}

.stage-detail-feedback-box {
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.stage-detail-feedback-box h5 {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.stage-detail-feedback {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(0, 0, 0, 0.3);
    padding: 12px 14px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    max-height: 200px;
    overflow-y: auto;
}

.stage-detail-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 14px;
}

.stage-metric-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px 12px;
    text-align: center;
    background: linear-gradient(180deg, rgba(41, 98, 255, 0.04) 0%, var(--bg-tertiary) 40%);
}

.stage-metric-card-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.stage-metric-card-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stage-metric-card-value.positive {
    color: var(--success);
}

.stage-metric-card-value.negative {
    color: var(--danger);
}

/* Walk-forward windows + Parameter search trials: the site's fixed-header
   table (.claude/rules/frontend.md, data-coverage .dc-scroll). Only the BODY
   scrolls, so the scrollbar runs from the header's bottom line to the table's
   bottom, never alongside the header; both get the same scrollbar gutter so
   columns stay aligned; the header row's opaque --bg-hover also paints that
   gutter, so no empty strip shows on its right. Narrow windows pan the table. */
.wf-table-scroll { margin-top: 8px; overflow-x: auto; }
.wf-table-scroll .stage-wf-table { margin-top: 0; min-width: 640px; }
.wf-table-scroll .stage-wf-table thead,
.wf-table-scroll .stage-wf-table tbody,
.wf-table-scroll .stage-wf-table tfoot { display: block; }
.wf-table-scroll .stage-wf-table thead tr,
.wf-table-scroll .stage-wf-table tbody tr,
.wf-table-scroll .stage-wf-table tfoot tr { display: table; width: 100%; table-layout: fixed; }
/* Only the thead paints the header colour (the site's header tint, made
   opaque over the section ground) so the scrollbar gutter at its right reads
   as header, not as a strip of another colour; the cells stay transparent. */
.wf-table-scroll .stage-wf-table thead { overflow-y: hidden; scrollbar-gutter: stable; background: color-mix(in srgb, #2962FF 6%, var(--bg-tertiary)); }
html[data-theme="light"] .wf-table-scroll .stage-wf-table thead { background: color-mix(in srgb, #2962FF 12%, var(--bg-tertiary)); }
.wf-table-scroll .stage-wf-table > thead > tr > th { background: transparent; }
/* The Average row: pinned below the scrolling rows the same way (its own
   gutter, painted by the tfoot alone, so no strip and no drift). */
.wf-table-scroll .stage-wf-table tfoot { overflow-y: hidden; scrollbar-gutter: stable; border-top: 2px solid var(--border-color); background: color-mix(in srgb, #2962FF 4%, var(--bg-tertiary)); }
html[data-theme="light"] .wf-table-scroll .stage-wf-table tfoot { background: color-mix(in srgb, #2962FF 8%, var(--bg-tertiary)); }
.wf-table-scroll .stage-wf-table > tfoot > tr > td,
.wf-table-scroll .stage-wf-table > tfoot > tr:hover > td { background: transparent; border-top: none; border-bottom: none; }
.wf-table-scroll .stage-wf-table tbody { max-height: 420px; overflow-y: auto; scrollbar-gutter: stable; }
.wf-table-scroll .stage-wf-table td { overflow-wrap: anywhere; }
/* Headers on one line on every page, desktop and phone. sfFitWfTables
   (shared.js) sizes each column to its header and cells and floors the table
   at their sum (the wrapper pans); the percentage widths below only apply
   until it has run. .wf-measuring lays rows out to their content for that. */
.wf-table-scroll .stage-wf-table th { white-space: nowrap; overflow-wrap: normal; }
.wf-table-scroll .stage-wf-table.wf-measuring :is(thead, tbody, tfoot) tr { table-layout: auto; width: max-content; }
.wf-table-scroll .stage-wf-table.wf-measuring :is(th, td) { width: auto !important; white-space: nowrap !important; }
.wf-table-scroll .stage-wf-table.wf-has-periods th:nth-child(2),
.wf-table-scroll .stage-wf-table.wf-has-periods td:nth-child(2),
.wf-table-scroll .stage-wf-table.wf-has-periods th:nth-child(3),
.wf-table-scroll .stage-wf-table.wf-has-periods td:nth-child(3) { width: 26%; }
.wf-table-scroll .stage-wf-table td.wf-period { font-size: 0.72rem; color: var(--text-secondary); }
/* the strategy page keeps table cells on one line; a combinatorial window's
   periods are several ranges (one per line) and the trial table's headers
   are long, so those wrap instead of running into the next column */
body[data-page-id="strategy-detail"] .wf-table-scroll .stage-wf-table td.wf-period,
body[data-page-id="lab"] .wf-table-scroll .stage-wf-table td.wf-period,
.wf-table-scroll .stage-wf-table td.wf-period { white-space: normal; }
/* Parameter search: headers and cells on one line; _psFitColumns (shared.js)
   sizes each column to its content and sets the table's min-width, so a
   narrow card pans the table instead of wrapping its headers. */
.wf-table-scroll .stage-wf-table.ps-table :is(th, td) { white-space: nowrap; overflow-wrap: normal; }
.wf-table-scroll .stage-wf-table.ps-table.ps-measuring :is(thead, tbody) tr { table-layout: auto; width: max-content; }
/* Parameter search: one small scatter per searched parameter, then the
   sortable trial table (shared.js _renderParamSearch). */
.ps-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 8px 0 6px; }
.ps-chart-title { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.ps-chart-box { height: 200px; position: relative; }
.ps-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 4px; }
.ps-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgba(41, 98, 255, 0.45); margin-right: -8px; }
.ps-dot-chosen { width: 12px; height: 12px; background: #2962FF; box-shadow: 0 0 0 2px var(--bg-tertiary); }
.ps-axis-note { margin-left: auto; color: var(--text-muted); }
.ps-table th.ps-sortable { cursor: pointer; user-select: none; }
.ps-table td { font-weight: 400 !important; font-variant-numeric: tabular-nums; }
.ps-table tr.ps-chosen td { background: rgba(41, 98, 255, 0.10); }
.ps-chip { display: inline-block; font-size: 0.65rem; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: rgba(41, 98, 255, 0.18); color: var(--text-primary); }
.wf-cpcv-note { font-size: 0.8rem; color: var(--text-secondary); margin: 4px 0 8px; line-height: 1.45; }

.stage-params-table,
.stage-wf-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 0.82rem;
}

.stage-params-table th,
.stage-wf-table th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 10px;
    border-bottom: 2px solid var(--border-color);
    background: rgba(41, 98, 255, 0.06);
}

.stage-params-table td,
.stage-wf-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.stage-params-table td:first-child {
    font-weight: 500;
    color: var(--text-secondary);
}

.stage-params-table td:last-child,
.stage-wf-table td:nth-child(2),
.stage-wf-table td:nth-child(3) {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.stage-params-table tr:last-child td,
.stage-wf-table tr:last-child td {
    border-bottom: none;
}

.stage-params-table tr:hover td,
.stage-wf-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.stage-hyp-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
    line-height: 1.4;
}

.stage-hyp-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 12px;
}

.stage-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(41, 98, 255, 0.15);
    color: var(--primary);
    margin-right: 8px;
}

.stage-tag i {
    font-size: 0.68rem;
}

/* Clickable pipeline stages */
.pipeline-stage.clickable:hover .pipeline-stage-icon {
    transform: scale(1.15);
    transition: transform var(--transition-fast);
}

.pipeline-stage.clickable:hover .pipeline-stage-label {
    color: var(--text-primary);
}

/* ================================
   Code Viewer
   ================================ */
.code-viewer {
    margin-top: 14px;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}

/* Themed dialog (sfDialog) — replaces window.prompt/confirm/alert. */
.sf-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.sf-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 22px 24px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}

.sf-modal-title {
    color: var(--text-primary);
    margin: 0 0 8px;
    font-size: 1.05rem;
}
/* Title row with a round close button (the locale modal's .lc-close pattern). */
.sf-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.sf-modal-head .sf-modal-title { margin: 0; }

.sf-modal-msg {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
    white-space: pre-line;
    margin-bottom: 14px;
}

.sf-modal-input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 14px;
    padding: 9px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font: inherit;
    resize: vertical;
}

.sf-modal-input:focus { outline: none; border-color: var(--primary); }
/* input: 'select' — a themed option list (never a native <select>). */
.sf-modal-filter { margin-bottom: 8px; }
.sf-modal-options { display: grid; gap: 4px; max-height: 40vh; overflow: auto; margin-bottom: 14px;
                    scrollbar-width: thin; }
.sf-modal-option { display: flex; justify-content: space-between; align-items: center; gap: 10px;
                   text-align: left; width: 100%; padding: 8px 10px; border-radius: 10px; cursor: pointer;
                   border: 1px solid var(--border-color); background: var(--bg-tertiary);
                   color: var(--text-primary); font: inherit; font-size: 0.9rem; }
.sf-modal-option:hover { background: var(--bg-hover); }
.sf-modal-option.is-on { border-color: var(--primary); background: rgba(41, 98, 255, 0.10); }
.sf-modal-option-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-modal-option-hint { flex-shrink: 0; font-size: 0.78rem; color: var(--text-muted); }
.sf-modal-option-empty { color: var(--text-muted); font-size: 0.9rem; padding: 10px 4px; }
.sf-modal-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Wider form modal (share track record) */
.sf-modal.sf-modal-wide { max-width: 560px; }
.sf-modal-label { display: block; color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 4px; }
.sf-modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sf-modal-row .sf-modal-input { margin-top: 4px; }
.sf-modal-check { display: flex; align-items: flex-start; gap: 8px; color: var(--text-secondary); font-size: 0.85rem; margin: 4px 0 12px; }
.sf-modal-check input { margin-top: 3px; }
/* The site's checkbox (consent / acknowledge): drawn, not the browser's box. */
.sf-modal-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    border: 1.5px solid var(--text-muted);
    border-radius: 4px;
    background: transparent;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.sf-modal-check input[type="checkbox"]::before {
    content: "";
    width: 8px;
    height: 4px;
    margin-top: -2px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) scale(0);
    transition: transform var(--transition-fast);
}
.sf-modal-check input[type="checkbox"]:hover { border-color: var(--primary); }
.sf-modal-check input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); }
.sf-modal-check input[type="checkbox"]:checked::before { transform: rotate(-45deg) scale(1); }
.sf-modal-check input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(41, 98, 255, 0.35); }
.sf-modal-check input[type="checkbox"]:disabled { opacity: 0.5; cursor: default; }
.sf-modal-check input[type="checkbox"][aria-invalid="true"] { border-color: var(--danger); }
.sf-modal-err { color: var(--danger-light); font-size: 0.85rem; min-height: 1.2em; margin-bottom: 8px; }
/* Real-money consent (sfRealMoneyConsent): what is missing, one line each; a
   long abandon reason scrolls inside the list, never the dialog. */
.sf-modal-gaps { margin: -4px 0 14px; padding: 10px 12px 10px 28px; background: var(--bg-tertiary); border-radius: 8px;
    max-height: 30vh; overflow: auto; color: var(--text-primary); font-size: 0.85rem; line-height: 1.5; overflow-wrap: anywhere; }
.sf-modal-gaps li + li { margin-top: 4px; }
.sf-modal-gaps + .sf-modal-label + .sf-modal-input { margin-bottom: 6px; }
@media (max-width: 640px) { .sf-modal-row { grid-template-columns: 1fr; } }

.sf-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
/* The action buttons share the dialog's content width (Cancel | Port,
   Cancel | Send …): equal widths, taller, easier to hit — 2026-09-13. */
.sf-modal-actions .sf-modal-btn {
    flex: 1 1 0;
    padding: 11px 16px;
    font-size: 0.9rem;
    text-align: center;
}

.sf-modal-btn {
    padding: 8px 16px;
    border-radius: 20px;
    border: none;
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.sf-modal-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.sf-modal-btn.primary { background: var(--primary); color: #fff; }
.sf-modal-btn.primary:hover { filter: brightness(1.08); color: #fff; }
.sf-modal-btn.danger { background: #ef4444; color: #fff; }
.sf-modal-btn.danger:hover { filter: brightness(1.08); color: #fff; }

/* The viewer's bar: the toggle fills it, a copy control sits beside the chevron
   (2026-09-06). A <button> cannot nest inside the toggle <button>, so the bar is
   a flex row holding both as siblings. */
.code-viewer-head {
    display: flex;
    align-items: stretch;
    background: var(--bg-tertiary);
}

.code-viewer-head .code-viewer-toggle { flex: 1; min-width: 0; }

.code-viewer-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.code-viewer-copy:hover { color: var(--primary); background: var(--bg-hover); }
.code-viewer-copy.copied { color: var(--success, #26a69a); }

/* The open-state divider spans the whole bar, not just the toggle. */
.code-viewer-head:has(.code-viewer-toggle.active) {
    background: rgba(41, 98, 255, 0.1);
    border-bottom: 1px solid var(--border-color);
}

.code-viewer-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: none;
    color: var(--primary-light);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

.code-viewer-toggle:hover {
    background: var(--bg-hover);
    color: var(--primary);
}

.code-viewer-toggle.active {
    background: rgba(41, 98, 255, 0.1);
    border-bottom: 1px solid var(--border-color);
}

.code-viewer-toggle .code-viewer-arrow {
    margin-left: auto;
    font-size: 0.72rem;
    transition: transform var(--transition-fast);
}

.code-viewer-content {
    background: #1e1e2e;
    max-height: 400px;
    overflow: auto;
}

.code-viewer pre {
    margin: 0;
    padding: 16px;
    background: transparent;
    overflow-x: auto;
}

.code-viewer code {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.78rem;
    line-height: 1.65;
    color: #abb2bf;
    tab-size: 4;
    white-space: pre;
}

/* Python syntax highlighting */
.py-keyword {
    color: #c678dd;
    font-weight: 600;
}

.py-string {
    color: #98c379;
}

.py-comment {
    color: #5c6370;
    font-style: italic;
}

.py-decorator {
    color: #e5c07b;
}

.py-number {
    color: #d19a66;
}

.py-builtin {
    color: #56b6c2;
    font-weight: 600;
}

/* ================================
   Iteration Timeline
   ================================ */
.iteration-timeline {
    position: relative;
    padding-left: 4px;
}

.iteration-item {
    position: relative;
    padding: 12px 14px 12px 28px;
    margin-left: 10px;
    border-left: 2px solid var(--border-color);
    transition: all var(--transition-fast);
}

.iteration-item:last-child {
    border-left-color: transparent;
}

.iteration-item.current {
    border-left-color: var(--primary);
    background: rgba(41, 98, 255, 0.05);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.iteration-dot {
    position: absolute;
    left: -7px;
    top: 16px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-light);
    z-index: 1;
}

.iteration-item.current .iteration-dot {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 8px rgba(41, 98, 255, 0.4);
}

.iteration-content {
    min-width: 0;
}

.iteration-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.iteration-number {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
}

.iteration-stage {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 10px;
    background: rgba(108, 117, 125, 0.15);
    border-radius: 20px;
}

.iteration-details {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.iteration-details span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.iteration-details i {
    font-size: 0.7rem;
    color: var(--text-muted);
    opacity: 0.7;
}

.iteration-feedback {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.6;
    word-break: break-word;
    background: rgba(0, 0, 0, 0.25);
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 6px;
}
.iteration-feedback p { margin: 4px 0; }
.iteration-feedback strong { color: var(--text); }
.iteration-feedback code {
    background: rgba(41, 98, 255,0.1);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.78rem;
}
.iteration-feedback ol, .iteration-feedback ul {
    margin: 4px 0;
    padding-left: 18px;
}
.iteration-feedback li { margin: 2px 0; }

/* ================================
   Strategy Explanation (How It Works)
   ================================ */
.strategy-explanation {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary);
    border-radius: var(--border-radius);
    padding: 16px 18px;
    margin-bottom: 16px;
}

.strategy-explanation .explanation-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.4;
}

.strategy-explanation .explanation-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 10px;
}

.strategy-explanation .explanation-rationale {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.6;
    font-style: italic;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

/* ================================
   Parameter Toggle
   ================================ */
.params-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 14px;
    background: rgba(41, 98, 255, 0.08);
    border: 1px solid rgba(41, 98, 255, 0.2);
    border-radius: 6px;
    color: var(--primary-light);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.params-toggle-btn:hover {
    background: rgba(41, 98, 255, 0.15);
    border-color: rgba(41, 98, 255, 0.35);
}

.params-toggle-btn i {
    font-size: 0.7rem;
    transition: transform var(--transition-fast);
}

.params-toggle-btn.expanded i {
    transform: rotate(180deg);
}

.params-hidden {
    display: none;
}

/* ================================
   Verification Layer Detail Cards
   ================================ */
.layer-detail {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 10px;
    transition: all var(--transition-fast);
}

.layer-detail:last-child {
    margin-bottom: 0;
}

.layer-detail .layer-status-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.85rem;
}

.layer-detail .layer-status-icon.pass {
    background: none;
    color: var(--success);
}

.layer-detail .layer-status-icon.fail {
    background: none;
    color: var(--danger);
}

.layer-detail .layer-status-icon.pending {
    background: none;
    color: var(--text-muted);
}

.layer-detail .layer-info {
    flex: 1;
    min-width: 0;
}

.layer-detail .layer-info .layer-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.layer-detail .layer-info .layer-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.layer-detail .layer-description {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.layer-detail .layer-error {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--danger);
    line-height: 1.6;
    background: rgba(231, 76, 60, 0.06);
    padding: 8px 10px;
    border-radius: 8px;
    border: none;
    word-break: break-word;
}
.layer-error p { margin: 4px 0; }
.layer-error strong { color: var(--danger); }
.layer-error code {
    background: rgba(231, 76, 60, 0.1);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.78rem;
}
.layer-error ol, .layer-error ul {
    margin: 4px 0;
    padding-left: 18px;
}
.layer-error li { margin: 2px 0; }

/* ================================
   Metric Sections
   ================================ */
.metrics-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 16px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.metrics-section-title:first-child {
    margin-top: 0;
}

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

/* ================================
   Params Comparison Table
   ================================ */
.params-comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 0.82rem;
}

.params-comparison-table th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 10px;
    border-bottom: 2px solid var(--border-color);
    background: rgba(41, 98, 255, 0.06);
}

.params-comparison-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.params-comparison-table td:first-child {
    font-weight: 500;
    color: var(--text-muted);
}

.params-comparison-table tr:last-child td {
    border-bottom: none;
}

.params-comparison-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.param-changed {
    color: var(--primary-light) !important;
    font-weight: 700 !important;
}

.param-changed-indicator {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    margin-left: 6px;
    vertical-align: middle;
}

/* Walk-forward color coding */
.stage-wf-table .wf-positive {
    color: var(--success);
}

.stage-wf-table .wf-negative {
    color: var(--danger);
}

.stage-wf-table .wf-avg-row td {
    font-weight: 700;
    border-top: 2px solid var(--border-color);
    background: rgba(41, 98, 255, 0.04);
}

/* Sensitivity status display */
.sensitivity-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 0.88rem;
}

.sensitivity-status.warn {
    background: rgba(243, 156, 18, 0.12);
    color: #f39c12;
}

.sensitivity-status.pass {
    background: rgba(39, 174, 96, 0.1);
    border: 1px solid rgba(39, 174, 96, 0.2);
    color: var(--success);
}

.sensitivity-status.fail {
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.2);
    color: var(--danger);
}

.sensitivity-status i {
    font-size: 1.1rem;
}

/* Stacked status boxes (Holdout passed + a retention note) get a gap. */
.sensitivity-status + .sensitivity-status {
    margin-top: 8px;
}

/* Optimization phase summary badges */
.opt-phase-summary {
    display: flex;
    gap: 8px;
    margin: 8px 0 12px;
    flex-wrap: wrap;
}
.opt-phase-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
}
.opt-phase-badge.pass {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
    border: 1px solid rgba(34,197,94,0.2);
}
.opt-phase-badge.fail {
    background: rgba(239,68,68,0.1);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,0.2);
}
.opt-phase-badge.warn {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
    border: 1px solid rgba(245,158,11,0.2);
}

/* Metrics comparison table */
.metrics-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 8px;
}
.metrics-comparison-table th,
.metrics-comparison-table td {
    padding: 6px 12px;
    text-align: right;
    border-bottom: 1px solid var(--border);
}
.metrics-comparison-table th:first-child,
.metrics-comparison-table td:first-child {
    text-align: left;
    color: var(--text-muted);
    font-weight: 500;
}
.metrics-comparison-table th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Analysis feedback block */
.analysis-feedback {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text);
    margin-top: 8px;
}
.analysis-feedback p { margin: 6px 0; }
.analysis-feedback strong { color: var(--text); }
.analysis-feedback code {
    background: rgba(41, 98, 255,0.1);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.82rem;
}
.analysis-feedback ol, .analysis-feedback ul {
    margin: 6px 0;
    padding-left: 20px;
}
.analysis-feedback li { margin: 3px 0; }

/* Sensitivity parameter charts grid */
.sensitivity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 12px;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}
.sensitivity-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 10px 12px;
}
.sensitivity-card-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.param-cliff-tag {
    color: #ef4444;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(239,68,68,0.15);
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 4px;
}

@media (max-width: 768px) {
    .stage-detail-card {
        width: 95%;
        max-height: 90vh;
    }

    .stage-detail-summary {
        grid-template-columns: 1fr;
    }

    .stage-detail-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stage-detail-layers {
        grid-template-columns: repeat(2, 1fr);
    }

    .code-viewer-content {
        max-height: 300px;
    }

    .iteration-details {
        flex-direction: column;
        gap: 4px;
    }

    .metrics-2col-grid {
        grid-template-columns: 1fr;
    }

    .layer-detail {
        flex-direction: column;
    }
}

/* ================================
   Strategy Detail Page
   ================================ */

/* Clickable strategy name links */
.strategy-name-link {
    color: var(--primary-light);
    cursor: pointer;
    transition: color var(--transition-fast);
    text-decoration: none;
}

.strategy-name-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* Header */
.sd-header {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 24px;
    margin-bottom: 20px;
}

.sd-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: 16px;
}

.sd-back-btn:hover {
    background: var(--bg-hover);
    color: var(--primary-light);
    border-color: var(--primary);
}

.sd-header-main {
    margin-bottom: 8px;
}

.sd-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.sd-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.sd-iteration-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(41, 98, 255, 0.12);
    color: var(--primary-light);
}

/* Publish-to-Marketplace action in the title row: anchored to the right edge
   (margin-left: auto) so it reads as the page action instead of another badge
   crammed after the title. Pill convention (20px), primary-tinted at rest,
   filled on hover; rgba tint works on both themes. Wraps to its own line on
   narrow viewports via the row's existing flex-wrap. */
.sd-publish-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    /* Same resting pill as every other action in the row (2026-09-06). One
       tinted button among neutral ones reads as "this is the primary thing to
       do", which publishing is not — the row's actions are peers. Meaning is
       carried on hover, the pattern Stop already used.
       The fill is --bg-hover, not --bg-tertiary: on this page (the TradingView
       palette) tertiary is #1e222d on a #131722 card and #f8f9fd on a white
       one — a step too small to read as a button. --bg-hover (#2a2e39 / #e8ebf3)
       is the same neutral, one step heavier. */
    background: var(--bg-hover);
    color: var(--text-secondary);
    transition: background 0.15s ease, color 0.15s ease;
}

.sd-publish-btn:hover {
    background: var(--primary);
    color: #fff;
}

/* Actions live on their own row under the title/subtitle (2026-09-06): the title
   line states what the strategy IS (name, stage, iteration, paused), this row what
   you can DO with it. Inline, the four buttons wrapped into the title on narrow
   screens and put a destructive Stop next to the metadata. */
.sd-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* Inside the actions row the buttons flow left-to-right — the margin-left:auto
   below exists only for the legacy inline placement. */
.sd-actions-row .sd-publish-btn,
.sd-actions-row .sd-ctl-group { margin-left: 0; }

@media (max-width: 640px) {
    .sd-actions-row { gap: 6px; }
    .sd-actions-row .sd-publish-btn,
    .sd-actions-row .sd-ctl-btn { flex: 1 1 auto; justify-content: center; }
}

/* Manual promote-to-paper: neutral at rest like its neighbours; it goes green on
   hover the way Stop goes red — the action's meaning shows when you reach for it. */
.sd-promote-btn:hover:not(:disabled) { background: var(--success, #26a69a); color: #fff; }
.sd-manual-promo-badge { color: var(--warning, #f0b90b); }

/* Owner run controls (pause / resume / stop) — same pill as the publish
   button; stop reads as destructive on hover only. */
.sd-ctl-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;              /* right-aligned like the publish button… */
}
.sd-publish-btn + .sd-ctl-group { margin-left: 0; }   /* …unless it already is */
.sd-ctl-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    background: var(--bg-hover);   /* see .sd-publish-btn: tertiary is too close to the card */
    color: var(--text-secondary);
    transition: background 0.15s ease, color 0.15s ease;
}
.sd-ctl-btn:disabled { opacity: 0.5; cursor: default; }
.sd-ctl-btn:hover:not(:disabled) { background: var(--primary); color: #fff; }
.sd-ctl-btn:focus-visible { outline: none; background: var(--primary); color: #fff; }
.sd-ctl-stop:hover:not(:disabled) { background: #ef4444; color: #fff; }
.sd-paused-badge { color: #f39c12; }

.sd-hypothesis-title {
    font-size: 0.92rem;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.5;
}

.sd-abandon-banner {
    padding: 12px 16px;
    margin-top: 12px;
    margin-bottom: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    border-left: 3px solid var(--danger);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Strategy detail: an optimization report the current iteration cannot claim
   (strategy-detail.js renderStrategyOptimizationHistorySection) — the label
   that says it is history, above the report it describes. */
.sd-opt-history-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: rgba(41, 98, 255, 0.08);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
}

.sd-opt-history-label i {
    color: var(--primary);
    flex-shrink: 0;
}

.sd-abandon-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sd-abandon-banner i {
    font-size: 1rem;
    flex-shrink: 0;
    color: var(--danger);
}

.sd-abandon-lead {
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-abandon-toggle {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.sd-abandon-toggle:hover { background: var(--bg-hover); }

.sd-abandon-full {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Why an in-flight run waits (run_status_text.waiting_reason): a pill on the
   strategies list and the strategy title row, a note under the title. One hue
   per category; tints read on both themes. */
.sf-wait-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
}
.sf-wait-pill i, .sd-wait-badge i { font-size: 0.85em; }
.sf-wait-data_repair { --sf-wait-hue: #d97706; --sf-wait-tint: rgba(217, 119, 6, 0.14); }
.sf-wait-platform { --sf-wait-hue: #e8590c; --sf-wait-tint: rgba(232, 89, 12, 0.14); }
.sf-wait-queue { --sf-wait-hue: var(--text-secondary); --sf-wait-tint: var(--bg-hover); }
.sf-wait-needs_action { --sf-wait-hue: var(--primary); --sf-wait-tint: rgba(41, 98, 255, 0.14); }
/* Light theme: darker hues keep the pill text readable on its pale tint. */
[data-theme="light"] .sf-wait-data_repair { --sf-wait-hue: #b45309; }
[data-theme="light"] .sf-wait-platform { --sf-wait-hue: #c2410c; }
.sf-wait-pill, .sd-wait-badge { color: var(--sf-wait-hue); background: var(--sf-wait-tint); }
.sd-wait-badge { cursor: help; }
.sd-wait-note {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: var(--border-radius);
    background: var(--sf-wait-tint);
    color: var(--text-primary);
    font-size: 0.85rem;
    line-height: 1.5;
}
.sd-wait-since { color: var(--text-secondary); font-size: 0.78rem; white-space: nowrap; }

/* Abandon banner: headline, short explanation, owner-only technical details. */
.sd-abandon-headline { flex: 1; min-width: 0; color: var(--text-primary); font-weight: 600; }
.sd-abandon-explain { margin-top: 4px; color: var(--text-secondary); }
.sd-abandon-banner.sd-abandon-platform i { color: #e8590c; }
.sd-abandon-tech { margin-top: 8px; }
.sd-abandon-tech > summary {
    cursor: pointer;
    color: var(--primary);
    font-size: 0.8rem;
    width: fit-content;
}

/* Quick stats row */
.sd-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.sd-stat {
    text-align: center;
    padding: 12px 8px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.sd-stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.sd-stat-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary);
}

.sd-stat-value.positive {
    color: var(--success);
}

.sd-stat-value.negative {
    color: var(--danger);
}

/* Section cards */
.sd-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    margin-bottom: 20px;
    overflow: hidden;
}

.sd-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.sd-card-header i {
    color: var(--primary);
    font-size: 1rem;
}

.sd-card-badge {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(41, 98, 255, 0.12);
    color: var(--primary-light);
}

.sd-card-body {
    padding: 20px 24px;
}

.sd-section-text {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 12px;
}

.sd-rationale {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
    font-style: italic;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    margin-bottom: 12px;
}

/* Research section */
.research-badges {
    display: flex;
    gap: 8px;
    margin: 10px 0;
    flex-wrap: wrap;
}
.research-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    background: rgba(41, 98, 255, 0.12);
    color: var(--primary);
    border: 1px solid rgba(41, 98, 255, 0.18);
}
.research-badge i {
    font-size: 0.65rem;
    opacity: 0.7;
}
.research-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 8px 0 12px;
}
.research-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    line-height: 1.4;
    background: var(--bg-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.hyp-view-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--primary);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.15s;
}
.hyp-view-link:hover {
    opacity: 1;
    text-decoration: underline;
}
.sd-subsection {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.sd-subsection-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* Hypothesis run cards */
.hyp-run-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.hyp-run-header {
    display: flex;
    align-items: center;
    gap: 10px;
    /* wrap instead of pushing the status badge past the card edge — long
       run titles + "Abandoned" don't fit one row on phones. No-op when the
       row fits (desktop/tablet render unchanged). */
    flex-wrap: wrap;
    row-gap: 4px;
    margin-bottom: 6px;
}
.hyp-run-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--primary);
    text-decoration: none;
}
.hyp-run-title:hover {
    text-decoration: underline;
    opacity: 0.85;
}

.sd-params-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.sd-params-section h4 {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}

/* Code stats row */
.sd-code-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 14px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.sd-code-stats span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sd-code-stats i {
    color: var(--primary);
    font-size: 0.78rem;
}

/* Timeline flow */
.sd-timeline-flow {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 0;
    overflow-x: auto;
}

.sd-timeline-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 100px;
    flex-shrink: 0;
}

.sd-timeline-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    border: 2px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-muted);
    transition: all var(--transition-normal);
}

.sd-timeline-stage.completed .sd-timeline-icon {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.sd-timeline-stage.active .sd-timeline-icon {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    animation: pulse 2s infinite;
    box-shadow: 0 0 16px rgba(41, 98, 255, 0.5);
}

.sd-timeline-stage.failed .sd-timeline-icon {
    background: var(--danger);
    border-color: var(--danger);
    color: white;
}

.sd-timeline-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sd-timeline-stage.completed .sd-timeline-label {
    color: var(--success);
}

.sd-timeline-stage.active .sd-timeline-label {
    color: var(--primary-light);
}

.sd-timeline-stage.failed .sd-timeline-label {
    color: var(--danger);
}

.sd-timeline-connector {
    width: 40px;
    height: 3px;
    background: var(--border-color);
    flex-shrink: 0;
    border-radius: 2px;
}

.sd-timeline-connector.completed {
    background: var(--success);
}

/* Strategy detail page responsive */
@media (max-width: 768px) {
    .sd-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .sd-title {
        font-size: 1.2rem;
    }

    .sd-card-body {
        padding: 16px;
    }

    .sd-header {
        padding: 16px;
    }

    .sd-timeline-flow {
        justify-content: flex-start;
    }

    .sd-timeline-stage {
        min-width: 80px;
    }

    .sd-timeline-icon {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }

    .sd-code-stats {
        flex-direction: column;
        gap: 6px;
    }
}

/* ================================
   Backtest Rich Data Styles
   ================================ */

/* Chart containers */
.backtest-chart-container {
    position: relative;
    width: 100%;
    height: 350px;
    margin: 20px 0;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    padding: 12px;
}

.backtest-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

.backtest-chart-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.backtest-chart-title i {
    color: var(--primary);
}

/* Backtest section grid layout for metrics */
.backtest-section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 12px;
}

@media (max-width: 768px) {
    .backtest-section-grid {
        grid-template-columns: 1fr;
    }
}

.backtest-metrics-block {
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    padding: 14px;
}

.backtest-metrics-block-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.backtest-metrics-block .stage-metric-card {
    margin-bottom: 4px;
}

/* Data Sources table — styled to match the All Trades table exactly: same
   bordered/rounded 600px scroll box, same --bg-tertiary surface, same custom
   scrollbar with the track inset below the 32px sticky header, distinct
   --bg-hover header (via the scoped rules). Columns are left-aligned text (vs
   the trades table's right-aligned numerics) and kept on one line. */
.data-sources-wrapper {
    max-height: 600px;
    overflow-y: auto;
    margin-top: 8px;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
}
.data-sources-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.data-sources-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-tertiary);
    padding: 8px 10px;
    text-align: left;
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}
.data-sources-table td {
    padding: 6px 10px;
    text-align: left;
    white-space: nowrap;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}
.data-sources-table tr:hover {
    background: var(--bg-hover);
}
.data-source-link {
    color: var(--primary);
    text-decoration: none;
    transition: opacity 0.15s;
}
.data-source-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Data preview pagination */
.data-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    flex-wrap: wrap;
}
.data-pagination-info {
    color: var(--text-muted);
    font-size: 0.8rem;
    white-space: nowrap;
}
.data-pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}
.data-page-btn {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 32px;
    text-align: center;
}
.data-page-btn:hover:not([disabled]) {
    background: var(--primary);
    border-color: var(--primary);
}
.data-page-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    font-weight: 700;
}
.data-page-btn[disabled] {
    opacity: 0.3;
    cursor: default;
}
.data-page-ellipsis {
    color: var(--text-muted);
    padding: 0 4px;
    font-size: 0.8rem;
}
.data-pagination-size {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.data-pagination-size select {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.8rem;
    cursor: pointer;
}
.data-preview-table .row-num {
    color: var(--text-muted);
    font-size: 0.7rem;
    opacity: 0.6;
}
/* Data rows are timestamps + numbers — never let a cell wrap to two lines
   (the wrapper scrolls horizontally instead). */
.data-preview-table th,
.data-preview-table td { white-space: nowrap; }

/* Data preview: the table fills its card flush — drop the inset padding so there's
   no gap between the table and its container. overflow:hidden clips the table to
   the card's rounded corners. Scoped to the table block only (the Summary block
   above and the shared .backtest-metrics-block elsewhere keep their padding). */
body[data-page-id="data-preview"] .dp-table-block {
    padding: 0;
    overflow: hidden;
}

/* Options analytics section (strategy detail / pipeline modal) ----------------- */
.opt-section .backtest-metrics-block { margin-top: 12px; }
.opt-grid2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 12px;
    margin-top: 12px;
}
.opt-grid2 > .backtest-metrics-block { margin-top: 0; }
@media (max-width: 860px) {
    .opt-grid2 { grid-template-columns: 1fr; }
}
.opt-chart-wrap {
    position: relative;
    width: 100%;
    margin-top: 6px;
}
.opt-struct-table { width: 100%; }

/* Monthly returns wrapper with scrollbar */
.monthly-returns-wrapper {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 8px;
}
.monthly-returns-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.monthly-returns-wrapper::-webkit-scrollbar-track:vertical {
    background: var(--bg-tertiary);
    margin-top: 32px;
    margin-bottom: 8px;
}
.monthly-returns-wrapper::-webkit-scrollbar-track:horizontal {
    background: var(--bg-tertiary);
    margin-left: 8px;
    margin-right: 8px;
}
.monthly-returns-wrapper::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}
.monthly-returns-wrapper::-webkit-scrollbar-corner {
    background: transparent;
}

/* Returns tab buttons */
.returns-tab-buttons {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.returns-tab-btn {
    padding: 6px 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.returns-tab-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.returns-tab-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Returns table (shared by daily, monthly, annual) */
.returns-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.returns-table th,
.returns-table td {
    padding: 8px 12px;
    text-align: right;
    border-bottom: 1px solid var(--border-color);
}

.returns-table th {
    position: sticky;
    top: 0;
    background: var(--bg-tertiary);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: right;
    z-index: 1;
}

.returns-table th:first-child,
.returns-table td:first-child {
    text-align: left;
}

.returns-table td.positive {
    color: var(--success);
    font-weight: 600;
}

.returns-table td.negative {
    color: var(--danger);
    font-weight: 600;
}

.returns-table tr:hover {
    background: var(--bg-hover);
}

/* Trade list table */
.trades-table-wrapper {
    max-height: 600px;
    overflow-y: auto;
    margin-top: 8px;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
}

.trades-table-wrapper::-webkit-scrollbar,
.data-sources-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;   /* horizontal scrollbar when columns overflow (e.g., inside modal) */
}

/* Vertical scrollbar track — below sticky header, above rounded bottom corner */
.trades-table-wrapper::-webkit-scrollbar-track:vertical,
.data-sources-wrapper::-webkit-scrollbar-track:vertical {
    background: var(--bg-tertiary);
    margin-top: 32px;
    margin-bottom: 8px;
}

/* Horizontal scrollbar track — inset from both rounded bottom corners */
.trades-table-wrapper::-webkit-scrollbar-track:horizontal,
.data-sources-wrapper::-webkit-scrollbar-track:horizontal {
    background: var(--bg-tertiary);
    margin-left: 8px;
    margin-right: 8px;
}

.trades-table-wrapper::-webkit-scrollbar-thumb,
.data-sources-wrapper::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

/* Corner where horizontal + vertical scrollbars meet — transparent so the
   rounded bottom-right corner of the wrapper shows through. */
.trades-table-wrapper::-webkit-scrollbar-corner,
.data-sources-wrapper::-webkit-scrollbar-corner {
    background: transparent;
}

.trades-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.trades-table th {
    position: sticky;
    top: 0;
    background: var(--bg-tertiary);
    padding: 8px 10px;
    text-align: right;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--border-color);
    z-index: 1;
    white-space: nowrap;   /* keep multi-word headers (e.g. "Price PnL") on one line */
}
/* Header carrying an explanatory title tooltip (e.g. "Fee (incl.)"): hint that
   it's hoverable with a help cursor + subtle dotted underline. */
/* Always-visible legend under the trades table — explains the abbreviated columns
   (Lev, Fee) so the headers need no per-column hover tooltip; they render like any
   other column. */
.trades-legend {
    margin-top: 8px;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.trades-table th:first-child,
.trades-table td:first-child {
    text-align: center;
    width: 40px;
}

.trades-table th:nth-child(2),
.trades-table td:nth-child(2) {
    text-align: center;
}

.trades-table td {
    padding: 6px 10px;
    text-align: right;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    white-space: nowrap;
}

.trades-table tr:hover {
    background: var(--bg-hover);
}

.trades-table .side-long {
    color: var(--success);
    font-weight: 600;
}

.trades-table .side-short {
    color: var(--danger);
    font-weight: 600;
}

.trades-table .pnl-positive {
    color: var(--success);
    font-weight: 600;
}

.trades-table .pnl-negative {
    color: var(--danger);
    font-weight: 600;
}

/* No data message */
.backtest-no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 0.85rem;
    gap: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    margin: 8px 0;
}

.backtest-no-data i {
    font-size: 1rem;
}

/* Drawdown chart specific */
.backtest-chart-container.drawdown-chart {
    height: 350px;
}

/* Collapsible section toggle */
.bt-section-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px 0;
    font-size: 0.85rem;
    font-weight: 600;
    width: 100%;
    text-align: left;
    transition: color var(--transition-fast);
}

.bt-section-toggle:hover {
    color: var(--primary-light);
}

.bt-section-toggle i.fa-chevron-down {
    transition: transform var(--transition-fast);
}

.bt-section-toggle.expanded i.fa-chevron-down {
    transform: rotate(180deg);
}

/* ── Idea Submission ──────────────────────────────────────────────────────── */

.idea-submit-card {
    display: flex;
    flex-direction: column;
    height: 100%;           /* force-fill the grid row height */
}
.idea-submit-body {
    padding: 16px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
/* Textarea blends into the card — no nested box. Background transparent,
   no border/radius/padding of its own; the card provides all chrome.
   flex: 1 + min-height: 0 makes it fill the card's available height so the
   left card's content reaches the bottom, matching the hint card's height. */
.idea-textarea {
    width: 100%;
    flex: 1;
    min-height: 140px;
    max-height: none;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 0;
    resize: none;
    box-sizing: border-box;
}
.idea-textarea:focus {
    outline: none;
    border: none;
    box-shadow: none;
}
.idea-textarea::placeholder {
    color: var(--text-muted);
}
/* The card is the input box (no nested pill). Under the textarea: the helper
   line, buildmidas' "+" menu button (Upload files · Model ›) and its round
   send; chosen files list between them. */
.idea-files { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.8rem; color: var(--primary); margin: 8px 0 0; }
.idea-files:empty { display: none; }
.idea-submit-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.idea-submit-actions .idea-submit-helper { flex: 1; min-width: 0; font-size: 0.85rem; color: var(--text-muted); }
.idea-submit-actions .chat-attach-btn, .idea-submit-actions .chat-send-btn { flex-shrink: 0; }
.chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.idea-status {
    margin-top: 10px;
    font-size: 0.85rem;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(41, 98, 255,0.1);
    color: var(--primary);
}
.idea-status-success {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
}
.idea-status-error {
    background: rgba(239,68,68,0.1);
    color: #ef4444;
}

/* ── Idea Submission: GCP-style guided input (centered title + input/hint pair) ── */

.idea-submit-wrapper {
    margin-bottom: 24px;
}
.idea-submit-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: stretch;
}
@media (max-width: 900px) {
    .idea-submit-row { grid-template-columns: 1fr; }
}
.idea-submit-helper {
    flex: 1;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}
/* Hint card — soft TV-blue tint, 12px radius to match the input card.
   Uses its own header + body structure (not .card-header so the TV
   border-bottom hairline doesn't conflict with the blue bg). */
.idea-hint-card {
    background: rgba(41, 98, 255, 0.08);
    border-radius: 12px;
    font-size: 0.88rem;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.idea-hint-header {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(41, 98, 255, 0.18);
}
.idea-hint-header h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.idea-hint-header h3 i {
    color: var(--primary);
    font-size: 13px;
}
.idea-hint-body {
    padding: 16px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.idea-hint-list {
    margin: 0;
    padding-left: 20px;
    color: var(--text-secondary);
}
.idea-hint-list li {
    margin-bottom: 4px;
    line-height: 1.5;
}
.idea-hint-footnote {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    border-top: 1px solid rgba(41, 98, 255, 0.15);
    padding-top: 10px;
    margin-top: auto;
}

/* ── Chat Interface ───────────────────────────────────────────────────────── */

/* Chat page: constrain parent height chain so only messages scroll */
:is(body[data-page-id="chat"], .ai-dock) .main-content {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}
:is(body[data-page-id="chat"], .ai-dock) .content-wrapper {
    overflow: hidden;
}

.chat-wrapper {
    padding: 0 !important;
    display: flex;
    overflow: hidden !important;
    /* Override content-wrapper's flex:1 + overflow-y:auto — chat needs fixed layout */
    flex: 1;
    min-height: 0;
}
.chat-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    min-height: 0;
    flex: 1;
}
.chat-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 8px 16px 0;
    flex-shrink: 0;
}
.chat-new-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.78rem;
    padding: 5px 12px;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.chat-new-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    /* Hard-stop horizontal overflow — a stray wide descendant (code block,
       image, oversized table) must clip itself, not scroll the column. */
    overflow-x: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.chat-messages:hover { scrollbar-color: rgba(128,128,128,0.35) transparent; }
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.chat-messages:hover::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.35); }
.chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
    color: var(--text-muted);
    gap: 8px;
    padding: 40px 20px;
}
.chat-welcome i {
    font-size: 2.5rem;
    color: var(--primary);
    opacity: 0.6;
}
.chat-welcome h3 {
    color: var(--text);
    margin: 8px 0 4px;
    font-size: 20px;
}
.chat-welcome p {
    font-size: 14px;
    max-width: 420px;
}
.chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    justify-content: center;
}
.chat-suggestion {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.82rem;
    color: var(--text);
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.chat-suggestion:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Messages — buildmidas assistant parity: user is a solid primary pill
   (max 80%), the assistant reply flows as a BARE document (max 85%), the
   Claude.ai / ChatGPT pattern — markdown lists / tables / code blocks are
   never cramped inside a rounded box. min-width: 0 on the row AND content
   is required so a wide <pre>/<table> clips inside its own overflow-x
   instead of blowing horizontal scroll onto the whole column. */
.chat-msg {
    display: flex;
    gap: 12px;
    max-width: 85%;
    flex-shrink: 0;
    min-width: 0;
}
.chat-msg-user {
    align-self: flex-end;
    flex-direction: row-reverse;
    max-width: 80%;
}
.chat-msg-assistant {
    align-self: flex-start;
}
.chat-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.chat-msg-user .chat-msg-avatar {
    background: var(--primary);
    color: white;
}
.chat-msg-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Without min-width:0 this flex child expands to its content's intrinsic
       width — a wide table blew a 933px row out of the 460px Ask-AI dock. */
    min-width: 0;
    max-width: 100%;
}
/* Tables + charts scroll INSIDE their own wrapper, never the window — any
   size renders. Headers stay on one line (the wrapper pans instead). */
.chat-table-wrap {
    overflow-x: auto;
    max-width: 100%;
    margin: 8px 0;
}
.chat-table-wrap > table { margin: 0; }
.chat-msg-content th { white-space: nowrap; }
.chat-msg-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.chat-msg-user .chat-msg-label {
    text-align: right;
}
.chat-msg-content {
    /* Bare assistant response — no bubble (buildmidas parity). */
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 4px 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    min-width: 0;
    max-width: 100%;
}
.chat-msg-user .chat-msg-content {
    /* buildmidas' sent bubble (its dashboard chat AND assistant): a gentle
       neutral, not the ink fill (owner 2026-09-19). Dark theme keeps the
       same idea on the dark ground. */
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: var(--text-primary);
    padding: 10px 16px;
    border-radius: 18px;
    line-height: 1.5;
}
html[data-theme="light"] .chat-msg-user .chat-msg-content { background: #f0f0f2; color: #202123; }
.chat-msg-user .chat-msg-content p { margin: 0; }
/* ChatGPT/Gemini rule: a sent message taller than ~7 lines folds behind a chevron */
.chat-msg-user .chat-msg-content.is-clamped { max-height: 168px; overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.chat-msg-expand { align-self: flex-end; margin: 4px 0 0; border: none; background: transparent; color: var(--text-secondary);
    font: inherit; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 9999px; }
.chat-msg-expand:hover { background: var(--bg-hover); color: var(--text-primary); }
.chat-msg-expand i { font-size: 11px; transition: transform .15s; }
.chat-msg-expand.open i { transform: rotate(180deg); }
.chat-msg-user .chat-msg-body { display: flex; flex-direction: column; align-items: flex-end; }
.chat-msg-content h2 {
    margin: 14px 0 8px;
    font-size: 16px;
}
.chat-msg-content h3 {
    margin: 12px 0 6px;
    font-size: 15px;
}
.chat-msg-content h4 {
    margin: 10px 0 5px;
    font-size: 14px;
}
.chat-msg-content ul, .chat-msg-content ol {
    margin: 4px 0;
    padding-left: 20px;
}
.chat-msg-content li {
    margin-bottom: 4px;
}
.chat-msg-content code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}
.chat-msg-content pre {
    background: #1e1e1e;
    color: #d4d4d4;
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
    overflow-x: auto;
    font-size: 13px;
    margin: 8px 0;
    /* The pre must never outgrow its flex parent, or the whole message row
       overflows horizontally instead of the pre itself scrolling. */
    max-width: 100%;
    white-space: pre;
}
.chat-msg-content pre code {
    background: none;
    padding: 0;
    color: inherit;
}
.chat-msg-content strong {
    color: var(--text);
    font-weight: 600;
}
.chat-msg-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 8px 0;
    border: 1px solid var(--border-color);
}
.chat-msg-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin: 8px 0;
}
.chat-msg-content th,
.chat-msg-content td {
    padding: 8px 12px;
    border: 1px solid var(--border);
    text-align: left;
}
.chat-msg-content th {
    background: var(--bg-tertiary);
    font-weight: 600;
}
.chat-msg-content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 12px 0;
}
.chat-msg-content blockquote {
    border-left: 3px solid var(--primary);
    margin: 8px 0;
    padding: 4px 12px;
    color: var(--text-muted);
}
.chat-msg-content p {
    margin: 0 0 8px;
}
.chat-msg-content p:last-child {
    margin-bottom: 0;
}

/* Action cards */
.chat-action {
    display: flex;
    gap: 10px;
    align-items: center;
    background: rgba(34,197,94,0.08);
    border: 1px solid rgba(34,197,94,0.2);
    border-radius: 10px;
    padding: 10px 14px;
    align-self: flex-start;
    max-width: 90%;
}
.chat-action-icon {
    color: #22c55e;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.chat-action-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
}
.chat-action-link {
    color: var(--primary);
    font-size: 0.82rem;
    text-decoration: none;
}
.chat-action-link:hover {
    text-decoration: underline;
}

/* Input area */
/* Composer — buildmidas' AI Assistant input, in the site's tokens: a centred
   26px pill (680px cap), borderless at rest, "+" menu on the left, round send
   on the right; the file preview sits above the pill. */
.chat-input-area {
    padding: 12px 20px 20px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.chat-file-preview { max-width: 680px; width: 100%; }
.chat-input-box {
    max-width: 680px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: 26px;
    padding: 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.chat-input-box:focus-within {
    border-color: var(--primary);
    box-shadow: none;
}
.chat-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    padding: 8px 0;
    resize: none;
    line-height: 1.4;
    min-height: 22px;
    max-height: 120px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.chat-input:placeholder-shown { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-input:focus {
    outline: none;
}
.chat-input::placeholder {
    color: var(--text-muted);
}
.chat-attach-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color var(--transition-fast);
    position: relative;
}
.chat-attach-btn:hover {
    color: var(--primary);
}
.chat-attach-btn input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.chat-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity var(--transition-fast);
}
.chat-send-btn:hover {
    opacity: 0.9;
}
.chat-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.chat-file-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 12px;
    margin-bottom: 4px;
    background: rgba(41, 98, 255,0.06);
    border-radius: 16px;
    font-size: 0.78rem;
    color: var(--text-muted);
    width: fit-content;
}
.chat-file-preview i {
    color: var(--primary);
}
.chat-file-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 2px 4px;
    border-radius: 50%;
}
.chat-file-remove:hover {
    color: #ef4444;
}

/* ================================
   Live-market vocabulary (shared)
   Tighter, denser cards: 8px radius, 16px padding/gap, uppercase
   13/700 headers, --bg-secondary surfaces. Generic so any page can opt in.
   ================================ */
.metric-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.metric-grid {
    display: grid;
    gap: 16px;
}
.metric-grid > .metric-card { margin-bottom: 0; }

.metric-grid--cols-3 { grid-template-columns: 1fr 320px 280px; }
.metric-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.metric-grid--auto   { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

@media (max-width: 1600px) {
    .metric-grid--cols-3 { grid-template-columns: 1fr 320px; }
}
@media (max-width: 1200px) {
    .metric-grid--cols-3,
    .metric-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .metric-grid--cols-3,
    .metric-grid--cols-4 { grid-template-columns: 1fr; }
}

.card-title-sm {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.metric-kv {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
}
.metric-kv-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.metric-kv-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.metric-kv-sub {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

.stat-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: 1px solid transparent;
    background: rgba(176, 184, 196, 0.1);
    color: var(--text-secondary);
    border-color: rgba(176, 184, 196, 0.3);
}
.stat-badge--success { background: rgba(39, 174, 96, 0.12);  color: var(--success);       border-color: rgba(39, 174, 96, 0.3); }
.stat-badge--info    { background: rgba(23, 162, 184, 0.12); color: var(--info);          border-color: rgba(23, 162, 184, 0.3); }
.stat-badge--warning { background: rgba(243, 156, 18, 0.12); color: var(--warning);       border-color: rgba(243, 156, 18, 0.3); }
.stat-badge--danger  { background: rgba(231, 76, 60, 0.12);  color: var(--danger);        border-color: rgba(231, 76, 60, 0.3); }
.stat-badge--neutral { background: rgba(108, 117, 125, 0.12);color: var(--text-muted);    border-color: rgba(108, 117, 125, 0.3); }

.tabular { font-variant-numeric: tabular-nums; }

/* ================================
   Pages that adopt the LM look
   Shared shell rules (card shell + header typography) apply to any page
   listed in the :is() selector. Add more page ids here to opt them in.
   Dashboard-only specifics stay scoped to the dashboard alone below.
   ================================ */
body[data-page-id] .card {
    background: var(--bg-card);
    border-radius: 8px;
    overflow: visible;
}
body[data-page-id] .card-header {
    padding: 12px 16px;
}
body[data-page-id] .card-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
body[data-page-id] .card-header h3 i {
    color: var(--text-secondary);
    font-size: 13px;
}
body:is([data-page-id="dashboard"], [data-page-id="audit"], [data-page-id="autofix"], [data-page-id="alignment"]) .summary-card {
    display: block;
    padding: 16px;
}
body:is([data-page-id="dashboard"], [data-page-id="audit"], [data-page-id="autofix"], [data-page-id="alignment"]) .summary-card .card-icon { display: none; }
body:is([data-page-id="dashboard"], [data-page-id="audit"], [data-page-id="autofix"], [data-page-id="alignment"]) .card-content h3 {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
body:is([data-page-id="dashboard"], [data-page-id="audit"], [data-page-id="autofix"], [data-page-id="alignment"]) .card-content .value {
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
body:is([data-page-id="dashboard"], [data-page-id="audit"], [data-page-id="autofix"], [data-page-id="alignment"]) .dashboard-grid {
    gap: 16px;
}
@media (max-width: 1200px) {
    body:is([data-page-id="dashboard"], [data-page-id="audit"], [data-page-id="autofix"], [data-page-id="alignment"]) .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
    body:is([data-page-id="dashboard"], [data-page-id="audit"], [data-page-id="autofix"], [data-page-id="alignment"]) .dashboard-grid .wide,
    body:is([data-page-id="dashboard"], [data-page-id="audit"], [data-page-id="autofix"], [data-page-id="alignment"]) .dashboard-grid .full-width { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    body:is([data-page-id="dashboard"], [data-page-id="audit"], [data-page-id="autofix"], [data-page-id="alignment"]) .dashboard-grid { grid-template-columns: 1fr; }
}
/* Audit page: space the stacked section cards (summary tiles in the grid keep gap
   spacing, so exempt them); scrollable + paginated flagged-strategies list. */
body:is([data-page-id="audit"], [data-page-id="data-coverage"], [data-page-id="data-preview"], [data-page-id="portfolio"]) .card { margin-bottom: 16px; }
.audit-flagged-list { max-height: 560px; overflow-y: auto; }
/* Feed-row icons (audit flagged list + dashboard Recent Activity): drop the colored circle,
   keep the severity/role-colored glyph — declutters the dense list, color still conveys state. */
body[data-page-id="audit"] .audit-flagged-list .activity-icon,
body[data-page-id="dashboard"] .activity-feed .activity-icon { background: transparent; width: 24px; font-size: 1rem; }
/* Stats tiles reuse the Live Market "Futures Metrics" key-value card styling
   (shared here so the audit page can use the same classes). */
.lm-fut-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.lm-fut-kv { background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 8px; padding: 14px; }
.lm-fut-kv-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 6px; }
.lm-fut-kv-value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.lm-fut-kv-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.lm-fut-kv-value.pos { color: #10b981; }
.lm-fut-kv-value.neg { color: #ef4444; }
/* Tighten chart card inner padding to match LM density */
body[data-page-id="dashboard"] .chart-container {
    padding: 16px;
    height: 280px;
}

/* Hypotheses outer cards use --bg-secondary (matching LM .lm-card / "Flow &
   Regime Analytics" section). The inner .hypothesis-item rows already use
   --bg-tertiary (matching LM .lm-micro-kv sub-cards), so the two-layer
   contrast looks identical to the LM analytics section. */
body[data-page-id="hypotheses"] .card {
    background: var(--bg-secondary);
}
/* Agents page — same two-layer pattern. Outer .agent-card = --bg-secondary,
   inner .agent-stat tiles already use --bg-tertiary. Grid gap tightened
   to 16px to match LM density. */
body[data-page-id="agents"] .card {
    background: var(--bg-secondary);
}
body[data-page-id="agents"] .agent-grid {
    gap: 16px;
}

/* Hypothesis detail page — adopt the LM card vocabulary for .sd-card and
   the inner .hyp-run-card. Scoped under body[data-page-id="hypothesis-detail"]
   so strategy.html (which also uses .sd-card) keeps its existing styling. */
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"], [data-page-id="lab"]) .sd-card {
    background: var(--bg-secondary);
    border: none;
    border-radius: 8px;
}
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"], [data-page-id="lab"]) .sd-card-header {
    padding: 12px 16px;
    border-bottom: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"], [data-page-id="lab"]) .sd-card-header i {
    color: var(--text-secondary);
    font-size: 13px;
}
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"], [data-page-id="lab"]) .sd-card-body {
    padding: 16px;
}
body[data-page-id="hypothesis-detail"] .hyp-run-card {
    background: transparent;
    border: none;
    border-radius: 8px;
}
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"], [data-page-id="lab"]) .sd-header {
    background: var(--bg-secondary);
    border: none;
    border-radius: 8px;
    padding: 16px;
}
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"], [data-page-id="lab"], [data-page-id="paper-trading"]) .sd-back-btn {
    border: none;
    background: var(--bg-tertiary);
}
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"], [data-page-id="lab"], [data-page-id="paper-trading"]) .sd-back-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: transparent;
}
/* First-section inner elements on strategy detail (iteration badge, abandon
   banner, stats row, stat tiles) — LM-ize to match the borderless card shell. */
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"], [data-page-id="lab"]) .sd-iteration-badge {
    border-radius: 20px;
}
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"], [data-page-id="lab"]) .sd-abandon-banner {
    /* Stripe removed 2026-08-07 (operator request) — matches the other
       detail-page sections swept in d59485f; the red tint text/icon still
       signal the abandon state. Pipeline modal keeps its accents. */
    border: none;
}
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"], [data-page-id="lab"]) .sd-stats-row {
    border-top: none;
    padding-top: 0;
}
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"], [data-page-id="lab"]) .sd-stat {
    border: none;
    border-radius: 8px;
}
/* Strategy-detail "Parameters" section wraps the table in .sd-params-section
   (different class than the pipeline modal's .stage-detail-subsection).
   Match the pipeline subsection look: --bg-tertiary bg + 3px primary
   left-edge accent + no top-divider. */
body[data-page-id="strategy-detail"] .sd-params-section,
body[data-page-id="lab"] .sd-params-section {
    margin-top: 14px;
    padding: 14px 14px 14px 18px;
    background: var(--bg-tertiary);
    border: none;
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    border-top: none;
}
/* "Parameters" heading above the params table — LM uppercase 13/700 muted
   to match other section sub-headings (Walk-Forward, Holdout, etc.). */
body[data-page-id="strategy-detail"] .sd-params-section h4,
body[data-page-id="lab"] .sd-params-section h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
/* Tag/badge pills in the How It Works section — drop the 1px border, keep
   the background tint + pill shape (20px radius). */
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"], [data-page-id="lab"]) .research-badge,
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"], [data-page-id="lab"]) .research-tag {
    border: none;
}
/* Paper/Live hypothesis section: keep the tag badges on ONE clipped line with a
   "+N more" expander (same pattern as the hypotheses-page cards' .hypothesis-footer).
   Scoped to these pages so strategy/hypothesis-detail badges still wrap freely. */
body:is([data-page-id="paper-trading"], [data-page-id="live-trading"]) .research-badges {
    flex-wrap: nowrap;
    overflow: hidden;
    align-items: center;
}
body:is([data-page-id="paper-trading"], [data-page-id="live-trading"]) .research-badges .research-badge,
body:is([data-page-id="paper-trading"], [data-page-id="live-trading"]) .research-badges .research-tag {
    flex-shrink: 0;
    white-space: nowrap;
}
body:is([data-page-id="paper-trading"], [data-page-id="live-trading"]) .research-badges .hyp-tag-extra {
    display: none;
}
body:is([data-page-id="paper-trading"], [data-page-id="live-trading"]) .research-badges.tags-shown {
    flex-wrap: wrap;
    overflow: visible;
}
body:is([data-page-id="paper-trading"], [data-page-id="live-trading"]) .research-badges.tags-shown .hyp-tag-extra {
    display: inline-flex;
}
body:is([data-page-id="paper-trading"], [data-page-id="live-trading"]) .research-badges.tags-shown .tag-more {
    display: none;
}
/* Show-all-parameters button + View Source Code wrapper — drop the 1px
   border so they match the borderless LM look. The bg tints (--bg-tertiary
   inside .code-viewer-toggle, purple tint on params-toggle) still read. */
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"], [data-page-id="lab"], [data-page-id="pipeline"]) .params-toggle-btn,
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"], [data-page-id="lab"], [data-page-id="pipeline"]) .code-viewer {
    border: none;
}
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"], [data-page-id="lab"], [data-page-id="pipeline"]) .params-toggle-btn {
    border-radius: 20px;
}
/* Verdict badges in Backtest Review + Analysis sections — drop the 1px
   colored border, keep the semantic bg tint and text color. Full pill. */
body:is([data-page-id="strategy-detail"], [data-page-id="lab"], [data-page-id="pipeline"]) .opt-phase-badge {
    border: none;
    border-radius: 20px;
}

/* Pipeline page — drop the divider line under each run-card header
   (matches site-wide borderless LM look). Also override the shared :is()
   card bg from --bg-card to --bg-secondary so the --bg-tertiary stage
   icons inside get the same contrast they have on strategy-detail's
   sd-card (--bg-secondary). */
body[data-page-id="pipeline"] .pipeline-run-card {
    background: var(--bg-secondary);
}
body[data-page-id="pipeline"] .pipeline-run-header {
    border-bottom: none;
    padding: 12px 16px;
}
/* Pipeline stage icons — drop the 2px ring around each circle. State is
   still legible via bg color (green=completed, purple=active with glow,
   red=failed, --bg-tertiary=pending) and the existing active-state
   box-shadow glow. Same treatment for the strategy detail page's timeline
   icons (.sd-timeline-icon) since they share the stages-flow pattern. */
body[data-page-id="pipeline"] .pipeline-stage-icon,
body[data-page-id="pipeline"] .pipeline-stage.completed .pipeline-stage-icon,
body[data-page-id="pipeline"] .pipeline-stage.active .pipeline-stage-icon,
body[data-page-id="pipeline"] .pipeline-stage.failed .pipeline-stage-icon,
body[data-page-id="strategy-detail"] .sd-timeline-icon,
body[data-page-id="lab"] .sd-timeline-icon,
body[data-page-id="strategy-detail"] .sd-timeline-stage.completed .sd-timeline-icon,
body[data-page-id="lab"] .sd-timeline-stage.completed .sd-timeline-icon,
body[data-page-id="strategy-detail"] .sd-timeline-stage.active .sd-timeline-icon,
body[data-page-id="lab"] .sd-timeline-stage.active .sd-timeline-icon,
body[data-page-id="strategy-detail"] .sd-timeline-stage.failed .sd-timeline-icon,
body[data-page-id="lab"] .sd-timeline-stage.failed .sd-timeline-icon {
    border: none;
}
/* Chat page — apply LM styling to interactive controls. No .card shell
   so we skip the :is() expansion; just update the buttons and input box
   to match the .filter-control pill convention. */
:is(body[data-page-id="chat"], .ai-dock) .chat-new-btn {
    background: var(--bg-tertiary);
    border: none;
    border-radius: 20px;
    color: var(--text-secondary);
    padding: 6px 14px;
    transition: background var(--transition-fast), color var(--transition-fast);
}
:is(body[data-page-id="chat"], .ai-dock) .chat-new-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: transparent;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-input-box {
    background: var(--bg-tertiary);
    border: none;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-input-box:focus-within {
    background: var(--bg-hover);
    box-shadow: none;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-suggestion {
    background: var(--bg-tertiary);
    border: none;
    color: var(--text-secondary);
    transition: background var(--transition-fast), color var(--transition-fast);
}
:is(body[data-page-id="chat"], .ai-dock) .chat-suggestion:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: transparent;
}
/* Chat messages — hide the avatar circle and sender/responder label so
   only the bubble text remains. Bump the bubble corner radius to 20px
   to match the LM pill convention. */
:is(body[data-page-id="chat"], .ai-dock) .chat-msg-avatar,
:is(body[data-page-id="chat"], .ai-dock) .chat-msg-label {
    display: none;
}
/* (bubble-radius override retired — assistant messages are bare document
   flow and the user pill carries its own 18px radius, buildmidas parity) */

/* Chat page — multi-session sidebar + centered max-width content.
   Sidebar holds past conversations (load / switch / delete). The chat
   content (messages + input area) is centered at 800px max-width inside
   .chat-content-wrap so it reads as a focused chat column on wide screens.
   Bubble/avatar/suggestion/input styling is intentionally left alone —
   only page layout changes here. */
:is(body[data-page-id="chat"], .ai-dock) .chat-page-flex {
    display: flex;
    height: 100%;
    min-height: 0;
    flex: 1;
    /* This is a flex ITEM of .chat-wrapper (and of the dock body), so its
       automatic minimum width is its min-content width — and that is the
       widest thing in the thread (a chart's 640px min-width). On a 390px
       phone or in the 460px Ask-AI dock the whole column grew to 712px,
       was clipped by the wrapper, and every table's header cells + right
       columns sat off-screen (the Spanish 50-strategies session,
       2026-09-03). min-width:0 lets the column follow its container, so
       wide content pans inside its own .chat-table-wrap / .chat-chart-container
       scroller instead of widening the column. */
    min-width: 0;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--bg-tertiary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width var(--transition-fast);
}
:is(body[data-page-id="chat"], .ai-dock) .chat-sidebar.collapsed {
    width: 0;
    border-right: 0;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-new-btn-side {
    flex: 1;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 20px;
    color: var(--text-secondary);
    padding: 8px 14px;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast), color var(--transition-fast);
}
:is(body[data-page-id="chat"], .ai-dock) .chat-new-btn-side:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
:is(body[data-page-id="chat"], .ai-dock) .chat-new-btn-side i {
    margin-right: 6px;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-sidebar-toggle,
:is(body[data-page-id="chat"], .ai-dock) .chat-sidebar-expand {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), color var(--transition-fast);
}
:is(body[data-page-id="chat"], .ai-dock) .chat-sidebar-toggle:hover,
:is(body[data-page-id="chat"], .ai-dock) .chat-sidebar-expand:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
:is(body[data-page-id="chat"], .ai-dock) .chat-sidebar-expand {
    display: none;
    align-self: flex-start;
    margin: 12px 4px 0 6px;
    flex-shrink: 0;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-sidebar.collapsed + .chat-sidebar-expand {
    display: inline-flex;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-session-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-session-empty {
    padding: 16px 14px;
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: center;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-session-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-primary);
    background: transparent;
    font-size: 0.86rem;
    line-height: 1.3;
    transition: background var(--transition-fast);
}
:is(body[data-page-id="chat"], .ai-dock) .chat-session-item:hover {
    background: var(--bg-hover);
}
:is(body[data-page-id="chat"], .ai-dock) .chat-session-item.active {
    background: rgba(41, 98, 255, 0.14);
    color: var(--text-primary);
}
:is(body[data-page-id="chat"], .ai-dock) .chat-session-item .chat-session-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-session-item .chat-session-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    line-height: 1.3;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-session-item .chat-session-time {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.2;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-session-item .chat-session-delete {
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-fast), background var(--transition-fast);
    flex-shrink: 0;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-session-item:hover .chat-session-delete,
:is(body[data-page-id="chat"], .ai-dock) .chat-session-item .chat-session-delete:focus {
    opacity: 1;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-session-item .chat-session-delete:hover {
    /* Destructive affordance (autovalueuae pattern: muted -> red on hover). */
    background: var(--bg-card);
    color: var(--danger-light);
}
:is(body[data-page-id="chat"], .ai-dock) .chat-content-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-content-wrap > .chat-container {
    flex: 1;
    min-height: 0;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-content-wrap .chat-messages,
:is(body[data-page-id="chat"], .ai-dock) .chat-content-wrap .chat-input-area,
:is(body[data-page-id="chat"], .ai-dock) .chat-content-wrap .chat-toolbar {
    max-width: 800px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Settings page — drop the divider lines between rows (LM borderless
   look) and give inputs the subtle .filter-control pill treatment. */
body[data-page-id="settings"] .settings-row {
    border-bottom: none;
}
body[data-page-id="settings"] .settings-control input[type="text"],
body[data-page-id="settings"] .settings-control input[type="number"],
body[data-page-id="settings"] .settings-control input[type="password"],
body[data-page-id="settings"] .settings-control select {
    background: var(--bg-tertiary);
    border: none;
    border-radius: 20px;
    padding: 6px 14px;
    transition: background var(--transition-fast);
}
body[data-page-id="settings"] .settings-control input:hover,
body[data-page-id="settings"] .settings-control select:hover,
body[data-page-id="settings"] .settings-control input:focus,
body[data-page-id="settings"] .settings-control select:focus {
    background: var(--bg-hover);
}
/* Change-password Save — pill button matching the settings input row.
   There is no global .btn/.btn-primary class in this stylesheet. */
.settings-control .settings-pill-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 6px 16px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;   /* match the 26px height of the settings pill inputs */
    cursor: pointer;
    transition: background var(--transition-fast);
}
.settings-control .settings-pill-btn:hover { background: var(--primary-dark); }
.settings-control .settings-pill-btn[disabled] { opacity: 0.55; cursor: default; }
/* Change-password row: larger controls than the compact settings pills. */
#pwRow .settings-control input[type="password"] {
    font-size: 0.95rem;
    padding: 0 18px;
    width: 220px;
    height: 36px;
    box-sizing: border-box;
}
#pwRow .settings-pill-btn {
    font-size: 0.95rem;
    padding: 0 24px;
    height: 36px;
    box-sizing: border-box;
}
/* Pipeline stage-detail modal — adopt LM card vocabulary. Outer modal
   card uses --bg-secondary, inner subsections use --bg-tertiary
   (two-layer pattern). Header and section dividers removed. */
body[data-page-id="pipeline"] .stage-detail-card {
    background: var(--bg-secondary);
    border: none;
    border-radius: 8px;
}
body[data-page-id="pipeline"] .stage-detail-header {
    border-bottom: none;
    padding: 12px 16px;
}
body[data-page-id="pipeline"] .stage-detail-header h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
body[data-page-id="pipeline"] .stage-detail-content {
    padding: 16px;
}
body[data-page-id="pipeline"] .stage-detail-summary {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 16px;
}
body[data-page-id="pipeline"] .stage-detail-section {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 16px;
}
body[data-page-id="pipeline"] .stage-detail-subsection,
body[data-page-id="hypothesis-detail"] .sd-card .stage-detail-subsection,
body[data-page-id="strategy-detail"] .sd-card .stage-detail-subsection,
body[data-page-id="lab"] .sd-card .stage-detail-subsection {
    border: none;
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    background: var(--bg-tertiary);
}

/* Strategy-detail + hypothesis-detail: subsections/params/explanation lose the
   3px primary left stripe (operator request 2026-08-02) — flat --bg-tertiary
   tiles; the pipeline MODAL keeps its accent. padding-left drops to 14px to
   stay symmetric now that the stripe no longer eats 3px. */
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"], [data-page-id="lab"]) .stage-detail-subsection,
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"], [data-page-id="lab"]) .sd-card .stage-detail-subsection,
body[data-page-id="strategy-detail"] .sd-params-section,
body[data-page-id="lab"] .sd-params-section,
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"], [data-page-id="lab"]) .strategy-explanation {
    border-left: none;
    padding-left: 14px;
}
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"], [data-page-id="lab"]) .strategy-explanation {
    padding-left: 18px;
}
/* Optimization-section inner elements on the strategy detail page —
   sensitivity status alerts, sensitivity cards, cliff tag. LM-ize. */
body[data-page-id="strategy-detail"] .sd-card .sensitivity-status,
body[data-page-id="lab"] .sd-card .sensitivity-status,
body[data-page-id="pipeline"] .stage-detail-card .sensitivity-status {
    border: none;
    border-radius: 8px;
}
body[data-page-id="strategy-detail"] .sd-card .sensitivity-card,
body[data-page-id="lab"] .sd-card .sensitivity-card,
body[data-page-id="pipeline"] .stage-detail-card .sensitivity-card {
    border: none;
    border-radius: 8px;
    background: var(--bg-tertiary);
}
body[data-page-id="strategy-detail"] .sd-card .param-cliff-tag,
body[data-page-id="lab"] .sd-card .param-cliff-tag,
body[data-page-id="pipeline"] .stage-detail-card .param-cliff-tag {
    border-radius: 20px;
    padding: 1px 8px;
}
body[data-page-id="strategy-detail"] .sd-card .analysis-feedback,
body[data-page-id="lab"] .sd-card .analysis-feedback,
body[data-page-id="hypothesis-detail"] .sd-card .analysis-feedback,
body[data-page-id="pipeline"] .stage-detail-card .analysis-feedback {
    background: var(--bg-tertiary);
    border: none;
    color: var(--text-secondary);
}
/* Inside the pipeline modal AND the strategy detail page, drop the 1px
   borders on inner cards so the VERIFYING layer rows, BACKTESTING metric
   cards, and verification layer grid cards all read as clean LM-style
   tiles on --bg-tertiary. */
body[data-page-id="pipeline"] .stage-detail-card .layer-detail,
body[data-page-id="pipeline"] .stage-detail-card .stage-metric-card,
body[data-page-id="pipeline"] .stage-detail-card .stage-layer-card,
body[data-page-id="strategy-detail"] .sd-card .layer-detail,
body[data-page-id="lab"] .sd-card .layer-detail,
body[data-page-id="strategy-detail"] .sd-card .stage-metric-card,
body[data-page-id="lab"] .sd-card .stage-metric-card,
body[data-page-id="strategy-detail"] .sd-card .stage-layer-card,
body[data-page-id="lab"] .sd-card .stage-layer-card,
body[data-page-id="hypothesis-detail"] .sd-card .stage-metric-card {
    border: none;
}
/* Section headers ("Strategy Code", "Verification", "Backtest", etc.) —
   LM-style uppercase 13/700 in --text-secondary, with icons matching.
   Replaces the primary-purple icon tint. */
body[data-page-id="pipeline"] .stage-detail-card .stage-detail-section h4,
body[data-page-id="strategy-detail"] .sd-card .stage-detail-section h4,
body[data-page-id="lab"] .sd-card .stage-detail-section h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
body[data-page-id="pipeline"] .stage-detail-card .stage-detail-section h4 i,
body[data-page-id="strategy-detail"] .sd-card .stage-detail-section h4 i,
body[data-page-id="lab"] .sd-card .stage-detail-section h4 i {
    color: var(--text-secondary);
    font-size: 13px;
}
/* Backtest section block titles ("Capital", "Performance", "Trading",
   "Risk", "Timing") — drop the divider line and let the title stand on
   its own. */
body[data-page-id="pipeline"] .stage-detail-card .backtest-metrics-block-title,
body[data-page-id="strategy-detail"] .sd-card .backtest-metrics-block-title,
body[data-page-id="lab"] .sd-card .backtest-metrics-block-title {
    border-bottom: none;
    padding-bottom: 0;
}
/* Metric cards — kill the purple-tinted gradient and use solid
   --bg-tertiary to match LM .lm-micro-kv tiles. */
body[data-page-id="pipeline"] .stage-detail-card .stage-metric-card,
body[data-page-id="strategy-detail"] .sd-card .stage-metric-card,
body[data-page-id="lab"] .sd-card .stage-metric-card,
body[data-page-id="hypothesis-detail"] .sd-card .stage-metric-card {
    background: var(--bg-tertiary);
}
/* Pass/Fail/Pending stage badges — pill shape to match LM badges. */
body[data-page-id="pipeline"] .stage-detail-card .stage-badge,
body[data-page-id="strategy-detail"] .sd-card .stage-badge,
body[data-page-id="lab"] .sd-card .stage-badge {
    border-radius: 20px;
}
/* Feedback / code-block container — drop the 1px border, stay on
   --bg-tertiary. */
body[data-page-id="pipeline"] .stage-detail-card .stage-detail-feedback-box,
body[data-page-id="strategy-detail"] .sd-card .stage-detail-feedback-box,
body[data-page-id="lab"] .sd-card .stage-detail-feedback-box {
    border: none;
}
/* Params / walk-forward tables — drop the hard row dividers so the
   rows flow together, matching the strategies table LM treatment. The
   header row background + hover tint still read without a divider. */
body[data-page-id="pipeline"] .stage-detail-card .stage-params-table th,
body[data-page-id="pipeline"] .stage-detail-card .stage-params-table td,
body[data-page-id="pipeline"] .stage-detail-card .stage-wf-table th,
body[data-page-id="pipeline"] .stage-detail-card .stage-wf-table td,
body[data-page-id="strategy-detail"] .sd-card .stage-params-table th,
body[data-page-id="lab"] .sd-card .stage-params-table th,
body[data-page-id="strategy-detail"] .sd-card .stage-params-table td,
body[data-page-id="lab"] .sd-card .stage-params-table td,
body[data-page-id="strategy-detail"] .sd-card .stage-wf-table th,
body[data-page-id="lab"] .sd-card .stage-wf-table th,
body[data-page-id="strategy-detail"] .sd-card .stage-wf-table td,
body[data-page-id="lab"] .sd-card .stage-wf-table td {
    border-bottom: none;
}
/* Params / Walk-Forward tables: flat rows (inherit wrapper). No zebra. */
/* Best Parameters comparison table (3-column: Parameter / Original /
   Optimized) — same LM treatment as .stage-params-table: no dividers,
   two-row zebra, brighter param-name column. */
body[data-page-id="pipeline"] .stage-detail-card .params-comparison-table th,
body[data-page-id="pipeline"] .stage-detail-card .params-comparison-table td,
body[data-page-id="strategy-detail"] .sd-card .params-comparison-table th,
body[data-page-id="lab"] .sd-card .params-comparison-table th,
body[data-page-id="strategy-detail"] .sd-card .params-comparison-table td,
body[data-page-id="lab"] .sd-card .params-comparison-table td {
    border-bottom: none;
}
body[data-page-id="pipeline"] .stage-detail-card .params-comparison-table td:first-child,
body[data-page-id="strategy-detail"] .sd-card .params-comparison-table td:first-child,
body[data-page-id="lab"] .sd-card .params-comparison-table td:first-child {
    color: var(--text-secondary);
}
/* Best Parameters comparison: flat rows (inherit wrapper). No zebra. */
/* Daily / Monthly / Annual tab buttons in the Returns section — LM pill
   treatment. Default: --bg-tertiary pill with no border, --bg-hover on
   hover, solid --primary when active. */
body[data-page-id="pipeline"] .stage-detail-card .returns-tab-btn,
body[data-page-id="strategy-detail"] .sd-card .returns-tab-btn,
body[data-page-id="lab"] .sd-card .returns-tab-btn {
    border: none;
    border-radius: 20px;
    padding: 6px 14px;
    /* --bg-hover (the lightest neutral) so the pill reads consistently whether it sits
       on the card body (Backtest section) or on a --bg-tertiary subsection (Optimization
       section's Optimized Backtest) — the latter shares --bg-tertiary, which made
       --bg-tertiary tabs blend in. Hover still gives feedback via the text-color lift. */
    background: var(--bg-hover);
    color: var(--text-secondary);
}
body[data-page-id="pipeline"] .stage-detail-card .returns-tab-btn:hover,
body[data-page-id="strategy-detail"] .sd-card .returns-tab-btn:hover,
body[data-page-id="lab"] .sd-card .returns-tab-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
body[data-page-id="pipeline"] .stage-detail-card .returns-tab-btn.active,
body[data-page-id="strategy-detail"] .sd-card .returns-tab-btn.active,
body[data-page-id="lab"] .sd-card .returns-tab-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: transparent;
}
/* Keyboard focus on the toggles: the soft primary ring of the site's
   switches (.sf-switch / settings toggle), never the browser's outline. */
.returns-tab-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(41, 98, 255, 0.35);
}
/* Trades table inside the backtest modal AND on the strategy detail page
   — remove the outer border, the heavy 2px divider under the header, and
   the inter-row dividers. The wrapper gets --bg-tertiary so the whole
   table reads as a raised tile distinct from the section --bg-secondary;
   zebra stripe on even rows provides scannability without dividers. */
body[data-page-id="pipeline"] .stage-detail-card .trades-table-wrapper,
body[data-page-id="strategy-detail"] .sd-card .trades-table-wrapper,
body[data-page-id="lab"] .sd-card .trades-table-wrapper,
body[data-page-id="pipeline"] .stage-detail-card .data-sources-wrapper,
body[data-page-id="strategy-detail"] .sd-card .data-sources-wrapper,
body[data-page-id="lab"] .sd-card .data-sources-wrapper {
    border: none;
    /* Top 32px band uses --bg-hover to match the sticky header row — covers
       the 6px scrollbar-column area in the header region. Below 32px, the
       wrapper returns to --bg-tertiary for the scrollable body. */
    background: linear-gradient(to bottom, var(--bg-hover) 32px, var(--bg-tertiary) 32px);
    border-radius: 8px;
}
body[data-page-id="pipeline"] .stage-detail-card .trades-table th,
body[data-page-id="pipeline"] .stage-detail-card .trades-table td,
body[data-page-id="strategy-detail"] .sd-card .trades-table th,
body[data-page-id="lab"] .sd-card .trades-table th,
body[data-page-id="strategy-detail"] .sd-card .trades-table td,
body[data-page-id="lab"] .sd-card .trades-table td,
body[data-page-id="pipeline"] .stage-detail-card .data-sources-table th,
body[data-page-id="pipeline"] .stage-detail-card .data-sources-table td,
body[data-page-id="strategy-detail"] .sd-card .data-sources-table th,
body[data-page-id="lab"] .sd-card .data-sources-table th,
body[data-page-id="strategy-detail"] .sd-card .data-sources-table td,
body[data-page-id="lab"] .sd-card .data-sources-table td {
    border-bottom: none;
}
/* Sticky header on --bg-hover — one shade lighter than the --bg-tertiary
   rows/wrapper, so it reads as a distinct label row on both themes. Using
   --bg-card breaks in the TV palette where card == page-well (invisible).
   Explicit height: 32px pins the header row so it aligns pixel-perfectly
   with the 32px wrapper-gradient top band and the scrollbar-track
   `margin-top: 32px`. Without this, font-size cascade can produce 29-30px
   header heights that don't match the 32px gradient, leaving a visible
   1-3px band below the header text. */
body[data-page-id="pipeline"] .stage-detail-card .trades-table th,
body[data-page-id="strategy-detail"] .sd-card .trades-table th,
body[data-page-id="lab"] .sd-card .trades-table th,
body[data-page-id="pipeline"] .stage-detail-card .data-sources-table th,
body[data-page-id="strategy-detail"] .sd-card .data-sources-table th,
body[data-page-id="lab"] .sd-card .data-sources-table th {
    background: var(--bg-hover);
    height: 32px;
    padding-top: 0;
    padding-bottom: 0;
}
/* Rows stay flat (inherit wrapper --bg-tertiary). Hover uses primary tint
   for clear distinction from flat rows. */
body[data-page-id="pipeline"] .stage-detail-card .trades-table tbody tr:hover,
body[data-page-id="strategy-detail"] .sd-card .trades-table tbody tr:hover,
body[data-page-id="lab"] .sd-card .trades-table tbody tr:hover,
body[data-page-id="pipeline"] .stage-detail-card .data-sources-table tbody tr:hover,
body[data-page-id="strategy-detail"] .sd-card .data-sources-table tbody tr:hover,
body[data-page-id="lab"] .sd-card .data-sources-table tbody tr:hover {
    background: rgba(41, 98, 255, 0.12);
}
/* Returns table (Daily / Monthly / Annual tabs, above All Trades) — same
   LM treatment on BOTH pages: wrapper tile on --bg-tertiary, header on
   --bg-card, row dividers removed, zebra stripe on even rows,
   primary-tint hover. */
body[data-page-id="pipeline"] .stage-detail-card .monthly-returns-wrapper,
body[data-page-id="strategy-detail"] .sd-card .monthly-returns-wrapper,
body[data-page-id="lab"] .sd-card .monthly-returns-wrapper {
    /* Top 32px band = --bg-hover (matches sticky header), below = --bg-tertiary
       (rows). Covers the 6px scrollbar-column area in the header region so
       the header row reads as a single continuous band. */
    background: linear-gradient(to bottom, var(--bg-hover) 32px, var(--bg-tertiary) 32px);
    border-radius: 8px;
}
body[data-page-id="pipeline"] .stage-detail-card .returns-table th,
body[data-page-id="pipeline"] .stage-detail-card .returns-table td,
body[data-page-id="strategy-detail"] .sd-card .returns-table th,
body[data-page-id="lab"] .sd-card .returns-table th,
body[data-page-id="strategy-detail"] .sd-card .returns-table td,
body[data-page-id="lab"] .sd-card .returns-table td {
    border-bottom: none;
}
body[data-page-id="pipeline"] .stage-detail-card .returns-table th,
body[data-page-id="strategy-detail"] .sd-card .returns-table th,
body[data-page-id="lab"] .sd-card .returns-table th {
    background: var(--bg-hover);
    height: 32px;
    padding-top: 0;
    padding-bottom: 0;
}
body[data-page-id="pipeline"] .stage-detail-card .returns-table tbody tr:hover,
body[data-page-id="strategy-detail"] .sd-card .returns-table tbody tr:hover,
body[data-page-id="lab"] .sd-card .returns-table tbody tr:hover {
    background: rgba(41, 98, 255, 0.12);
}

/* Strategies table — drop row dividers, add subtle zebra striping so rows
   are still scannable across the 9-column layout. Hover bg still wins. */
body[data-page-id="strategies"] .content-wrapper table th,
body[data-page-id="strategies"] .content-wrapper table td {
    border-bottom: none;
}
body[data-page-id="strategies"] .pagination-controls,
body[data-page-id="hypotheses"] .pagination-controls,
body[data-page-id="pipeline"] .pagination-controls,
body[data-page-id="paper-trading"] .pagination-controls,
body[data-page-id="live-trading"] .pagination-controls,
body[data-page-id="prediction"] .pagination-controls,
body[data-page-id="business"] .pagination-controls {
    border-top: none;
}
body[data-page-id="strategies"] .content-wrapper table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.025);
}

/* Light-mode flips for the remaining white-overlay stripe/hover rules that
   the earlier light-theme block missed. rgba(255,255,255,X) on a white card
   is invisible — swap to rgba(0,0,0,X) to darken instead. */
html[data-theme="light"] body[data-page-id="strategies"] .content-wrapper table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.03);
}
html[data-theme="light"] .stage-metric:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}
html[data-theme="light"] .stage-params-table tr:hover td,
html[data-theme="light"] .stage-wf-table tr:hover td,
html[data-theme="light"] .params-comparison-table tr:hover td {
    background: rgba(0, 0, 0, 0.03);
}

/* Light-mode table-header fixes — in dark mode, table headers using
   var(--bg-card) are DARKER than the --bg-tertiary wrapper (recessed
   label). In light mode, --bg-card is #ffffff (same as card) and
   --bg-tertiary is #f0f2f5 (slight gray) — so headers become invisible
   against the card. Override to use a distinct darker-gray tint so the
   dark-mode visual hierarchy (wrapper bright, header recessed, rows
   in between) is preserved. */
html[data-theme="light"] .trades-table th,
html[data-theme="light"] .returns-table th,
html[data-theme="light"] .data-sources-table th,
html[data-theme="light"] .pt-trades-table th {
    background: var(--bg-hover);
}
html[data-theme="light"] .stage-params-table th,
html[data-theme="light"] .stage-wf-table th,
html[data-theme="light"] .params-comparison-table th {
    background: rgba(41, 98, 255, 0.12);
}

/* ================================
   TradingView look — dashboard only, dark mode only. Applies cool
   blue-gray palette (#131722 page, #1e222d panels), TradingView blue
   accent (#2962FF), teal-green / soft-red for up/down, reintroduces
   subtle 1px panel borders, moderate 6px radii, and non-uppercase
   card titles. The `html:not([data-theme="light"])` guard ensures TV
   overrides only apply in dark mode — light theme keeps its palette.
   ================================ */
html:not([data-theme="light"]) body[data-page-id] {
    --bg-primary:   #131722;
    --bg-secondary: #131722;
    --bg-card:      #131722;
    --bg-tertiary:  #1e222d;
    --bg-hover:     #2a2e39;

    --text-primary:   #d1d4dc;
    --text-secondary: #787b86;
    --text-muted:     #555963;

    --border-color: #2a2e39;
    --border-light: #363a45;

    --primary:        #2962FF;
    --primary-dark:   #1e4dd9;
    --primary-light:  #5389ff;

    --success:        #26a69a;
    --success-light:  #4fb8ac;
    --danger:         #ef5350;
    --danger-light:   #f38481;
}
html:not([data-theme="light"]) body[data-page-id] .card {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    overflow: hidden;
}
html:not([data-theme="light"]) body[data-page-id="dashboard"] .card.chart-card {
    border: none;
}
html:not([data-theme="light"]) body[data-page-id="dashboard"] .card.chart-card .card-header {
    border-bottom: none;
}
html:not([data-theme="light"]) body[data-page-id="dashboard"] .card.summary-card,
html:not([data-theme="light"]) body[data-page-id="dashboard"] .card:has(> .summary-card),
html:not([data-theme="light"]) body[data-page-id="dashboard"] .card.full-width {
    border-radius: 12px;
}
html:not([data-theme="light"]) body[data-page-id="dashboard"] .card.full-width {
    border: none;
}
/* Data Coverage + Portfolio sections: borderless + 12px radius, matching dashboard cards. */
html:not([data-theme="light"]) body:is([data-page-id="data-coverage"], [data-page-id="data-preview"], [data-page-id="portfolio"]) .card {
    border: none;
    border-radius: 12px;
}
html:not([data-theme="light"]) body[data-page-id="pipeline"] .pipeline-run-card {
    border-radius: 12px;
}
html:not([data-theme="light"]) body[data-page-id="agents"] .agent-card {
    border-radius: 12px;
}
html:not([data-theme="light"]) body[data-page-id="settings"] .card {
    border: none;
    border-radius: 12px;
}
/* Equity curve + Drawdown chart containers — merge with the surrounding
   card/page background so the chart sits flush instead of as a raised
   --bg-tertiary tile. Scoped to strategy detail + pipeline modal. */
html:not([data-theme="light"]) body[data-page-id="strategy-detail"] .backtest-chart-container,
html:not([data-theme="light"]) body[data-page-id="lab"] .backtest-chart-container,
html:not([data-theme="light"]) body[data-page-id="pipeline"] .backtest-chart-container {
    background: transparent;
}
html:not([data-theme="light"]) body[data-page-id="strategies"] .card {
    border: none;
    border-radius: 12px;
}
html:not([data-theme="light"]) body[data-page-id="strategies"] .card .card-header {
    border-bottom: none;
}
html:not([data-theme="light"]) body[data-page-id="hypotheses"] .card {
    border-radius: 12px;
}
html:not([data-theme="light"]) body[data-page-id="hypotheses"] .card:not(.idea-submit-card) {
    border: none;
}
/* "Submit Your Idea" input card — hollow outlined variant: card bg matches
   the page well (--bg-primary), only the 1px border + 12px radius define
   the card. Minimal look; departs from GCP's "paper on desk" contrast. */
html:not([data-theme="light"]) body[data-page-id="hypotheses"] .card.idea-submit-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
/* Filter controls + per-page dropdown: now that --bg-secondary equals
   the page bg, give them --bg-tertiary so they read as raised pills
   above the page. Hover still goes to --bg-hover. */
html:not([data-theme="light"]) body[data-page-id] .filter-control,
html:not([data-theme="light"]) body[data-page-id] .pag-per-page {
    background: var(--bg-hover);
}
html:not([data-theme="light"]) body[data-page-id] .filter-control:hover,
html:not([data-theme="light"]) body[data-page-id] .filter-control:focus,
html:not([data-theme="light"]) body[data-page-id] .pag-per-page:hover {
    background: rgba(255, 255, 255, 0.12);
}
html:not([data-theme="light"]) body[data-page-id] .card-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}
html:not([data-theme="light"]) body[data-page-id] .card-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: 0;
}
html:not([data-theme="light"]) body[data-page-id] .card-header h3 i {
    color: var(--primary);
    font-size: 13px;
}
html:not([data-theme="light"]) body[data-page-id] .card-content h3 {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 8px;
}
html:not([data-theme="light"]) body[data-page-id] .card-content .value {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
html:not([data-theme="light"]) body[data-page-id] .sidebar,
html:not([data-theme="light"]) body[data-page-id] .header {
    background: var(--bg-secondary);
}
html:not([data-theme="light"]) body[data-page-id] .header {
    border-bottom: none;
}
html:not([data-theme="light"]) body[data-page-id] .activity-item {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
}
html:not([data-theme="light"]) body[data-page-id] .chart-container {
    padding: 12px 16px 16px;
    background: var(--bg-card);
}

/* ================================
   TradingView light variant — dashboard only, light mode only. Same
   TV aesthetic but inverted: page = very light blue-gray (#f0f3fa),
   panels = white, borders = soft gray. Accent + up/down colors stay.
   ================================ */
html[data-theme="light"] body[data-page-id] {
    --bg-primary:   #ffffff;
    --bg-secondary: #ffffff;
    --bg-card:      #ffffff;
    --bg-tertiary:  #f8f9fd;
    --bg-hover:     #e8ebf3;

    --text-primary:   #333333;
    --text-secondary: #484848;
    --text-muted:     #717171;

    --border-color: #e0e3eb;
    --border-light: #eef0f4;

    --primary:        #2962FF;
    --primary-dark:   #1e4dd9;
    --primary-light:  #5389ff;

    --success:        #26a69a;
    --success-light:  #4fb8ac;
    --danger:         #ef5350;
    --danger-light:   #f38481;
}
html[data-theme="light"] body[data-page-id] .card {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    overflow: hidden;
}
html[data-theme="light"] body[data-page-id="dashboard"] .card.chart-card {
    border: none;
}
html[data-theme="light"] body[data-page-id="dashboard"] .card.chart-card .card-header {
    border-bottom: none;
}
html[data-theme="light"] body[data-page-id="dashboard"] .card.summary-card,
html[data-theme="light"] body[data-page-id="dashboard"] .card:has(> .summary-card),
html[data-theme="light"] body[data-page-id="dashboard"] .card.full-width {
    border-radius: 12px;
}
html[data-theme="light"] body[data-page-id="dashboard"] .card.full-width {
    border: none;
}
/* Data Coverage + Portfolio sections: borderless + 12px radius, matching dashboard cards. */
html[data-theme="light"] body:is([data-page-id="data-coverage"], [data-page-id="data-preview"], [data-page-id="portfolio"]) .card {
    border: none;
    border-radius: 12px;
}
html[data-theme="light"] body[data-page-id="pipeline"] .pipeline-run-card {
    border-radius: 12px;
}
html[data-theme="light"] body[data-page-id="agents"] .agent-card {
    border-radius: 12px;
}
html[data-theme="light"] body[data-page-id="settings"] .card {
    border: none;
    border-radius: 12px;
}
html[data-theme="light"] body[data-page-id="strategy-detail"] .backtest-chart-container,
html[data-theme="light"] body[data-page-id="lab"] .backtest-chart-container,
html[data-theme="light"] body[data-page-id="pipeline"] .backtest-chart-container {
    background: transparent;
}
html[data-theme="light"] body[data-page-id="strategies"] .card {
    border: none;
    border-radius: 12px;
}
html[data-theme="light"] body[data-page-id="strategies"] .card .card-header {
    border-bottom: none;
}
html[data-theme="light"] body[data-page-id="hypotheses"] .card {
    border-radius: 12px;
}
html[data-theme="light"] body[data-page-id="hypotheses"] .card:not(.idea-submit-card) {
    border: none;
}
html[data-theme="light"] body[data-page-id="hypotheses"] .card.idea-submit-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
html[data-theme="light"] body[data-page-id] .filter-control,
html[data-theme="light"] body[data-page-id] .pag-per-page {
    background: var(--bg-hover);
}
html[data-theme="light"] body[data-page-id] .filter-control:hover,
html[data-theme="light"] body[data-page-id] .filter-control:focus,
html[data-theme="light"] body[data-page-id] .pag-per-page:hover {
    background: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] body[data-page-id] .card-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}
html[data-theme="light"] body[data-page-id] .card-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: 0;
}
html[data-theme="light"] body[data-page-id] .card-header h3 i {
    color: var(--primary);
    font-size: 13px;
}
html[data-theme="light"] body[data-page-id] .card-content h3 {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 8px;
}
html[data-theme="light"] body[data-page-id] .card-content .value {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
html[data-theme="light"] body[data-page-id] .sidebar,
html[data-theme="light"] body[data-page-id] .header {
    background: var(--bg-secondary);
}
html[data-theme="light"] body[data-page-id] .header {
    border-bottom: none;
}
html[data-theme="light"] body[data-page-id] .activity-item {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
}
html[data-theme="light"] body[data-page-id] .chart-container {
    padding: 12px 16px 16px;
    background: var(--bg-card);
}



/* Per-iteration result line (Iteration History) */
.iteration-result { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.85rem; color: var(--text-secondary); }
.iteration-result-sep { color: var(--text-muted); }
.iteration-result-empty { color: var(--text-muted); font-style: italic; }

/* Which stage ended an iteration (shared.js iterationOutcomeLabel). */
.iteration-details .iteration-ended { color: var(--text-secondary); }
.iteration-details .iteration-ended .fa-circle-xmark { color: var(--danger); }
.iteration-details .iteration-ended .fa-rotate { color: var(--warning); }

/* Structured verification feedback: one item per QA issue with a severity
   pill (icon + word, never colour alone), a line reference and its fix. */
.vf-head { margin-bottom: 6px; color: var(--text-secondary); }
.vf-head b { color: var(--text-primary); }
.vf-preamble { margin-bottom: 6px; white-space: pre-wrap; }
.vf-issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vf-issue { margin: 0; }
.vf-issue-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.vf-sev { border-radius: 20px; gap: 5px; text-transform: none; letter-spacing: 0; }
.vf-sev-critical { background: rgba(239, 83, 80, 0.15); color: var(--danger); }
.vf-sev-warning { background: rgba(243, 156, 18, 0.16); color: var(--warning); }
.vf-sev-edge { background: rgba(41, 98, 255, 0.14); color: var(--primary); }
.vf-sev-other { background: rgba(108, 117, 125, 0.15); color: var(--text-muted); }
html[data-theme="light"] .vf-sev-warning { color: #9a5b00; }
html[data-theme="light"] .iteration-details .iteration-ended .fa-rotate { color: #9a5b00; }
.vf-line { font-size: 0.75rem; padding: 1px 6px; border-radius: 4px; background: var(--bg-hover); color: var(--text-secondary); }
.vf-issue-text, .vf-fix { white-space: pre-wrap; overflow-wrap: anywhere; }
.vf-fix { margin-top: 4px; }
.vf-fix-label { font-weight: 700; color: var(--text-primary); }

/* Optimization outcome block (shared.js renderOptimizationOutcome). */
.opt-outcome-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.opt-outcome .sd-section-text { margin-bottom: 8px; }
/* The long per-window result wraps so the count columns stay in view. */
body:is([data-page-id="strategy-detail"], [data-page-id="lab"], [data-page-id="pipeline"]) .opt-outcome-windows td:nth-child(2) { white-space: normal; min-width: 220px; }
/* Nested walk-forward: what became of each window (Result column, added
   2026-10-02). New rules only; the existing column widths are unchanged. */
.wf-table-scroll .stage-wf-table.wf-has-status { min-width: 880px; }
.wf-table-scroll .stage-wf-table.wf-has-status :is(th, td):first-child { width: 9%; }
.wf-table-scroll .stage-wf-table.wf-has-periods.wf-has-status :is(th, td):is(:nth-child(2), :nth-child(3)) { width: 19%; }
.wf-table-scroll .stage-wf-table.wf-has-status :is(th, td):last-child { width: 14%; white-space: normal; }
.wf-table-scroll .stage-wf-table td.wf-status-no_valid_candidate,
.wf-table-scroll .stage-wf-table td.wf-status-outer_rejected,
.wf-table-scroll .stage-wf-table td.wf-status-error { color: var(--danger, #ef5350); }
.wf-table-scroll .stage-wf-table td.wf-status-not_recorded,
.wf-table-scroll .stage-wf-table td.wf-status-incomplete { color: var(--text-muted); }
.opt-outcome-why { margin-top: 4px; font-size: 0.78rem; color: var(--text-secondary); white-space: normal; }
.opt-sens-reason { color: var(--text-secondary); }

/* Nested walk-forward v3 (shared.js _optPlanBlock / _optV3WalkForward /
   _optSignificanceTable, 2026-10-08). New rules only. */
.stage-badge-warn { background: rgba(243, 156, 18, 0.15); color: var(--warning); }
html[data-theme="light"] .stage-badge-warn { color: #9a5b00; }
.opt-outcome-meaning { line-height: 1.55; }
.opt-next { line-height: 1.55; color: var(--text-primary); }
.opt-plan-note { color: var(--text-secondary); line-height: 1.5; overflow-wrap: anywhere; }
.opt-plan-table td:nth-child(3) { color: var(--text-secondary); }
/* Narrow screens pan the table (its .sd-table-scroll wrapper) instead of
   breaking parameter names and roles letter by letter. */
.opt-plan-table { min-width: 520px; }
.opt-plan-table :is(th, td) { white-space: nowrap; }
/* The .sd-table-scroll wrapper is the horizontal scroller on every page that
   renders the optimizer tables (strategy, lab, pipeline); public-chrome.css
   only covered the strategy page, so on lab and pipeline a wide table ran out
   of its card. */
.sd-table-scroll { overflow-x: auto; max-width: 100%; min-width: 0; }
/* Significance table: one real table with automatic layout, so nowrap headers
   widen their columns and the wrapper pans; no runtime fit is needed (ru
   "t-статистика относительно порога" wrapped to 3 lines on a phone). */
.opt-sig-table th { white-space: nowrap; }
.opt-sig-table td { white-space: nowrap; }
.opt-sig-table td:first-child { white-space: normal; }
.wf-table-scroll .stage-wf-table.wf-v3 { min-width: 760px; }
.wf-table-scroll .stage-wf-table.wf-v3 :is(th, td):first-child { width: 10%; }
.wf-table-scroll .stage-wf-table.wf-has-periods.wf-v3 :is(th, td):is(:nth-child(2), :nth-child(3)) { width: 20%; }
.wf-table-scroll .stage-wf-table.wf-v3 :is(th, td):last-child { width: 15%; white-space: normal; }
.wf-table-scroll .stage-wf-table.wf-v3.wf-v3-sel { min-width: 1100px; }
.wf-table-scroll .stage-wf-table.wf-has-periods.wf-v3.wf-v3-sel :is(th, td):is(:nth-child(2), :nth-child(3)) { width: 14%; }
.wf-table-scroll .stage-wf-table.wf-v3.wf-v3-sel :is(th, td):nth-child(8) { width: 22%; }
.wf-table-scroll .stage-wf-table.wf-v3 td.wf-selected { font-size: 0.75rem; color: var(--text-secondary); white-space: normal; }
.wf-table-scroll .stage-wf-table :is(td.wf-status-flat_fallback, td.wf-status-no_trades) { color: var(--warning); }
/* Parameter stability + final parameters per window (shared.js
   _optParamStability / _optFinalByWindow, 2026-10-11). One-line headers;
   the measured min-width floors keep every header on one line, and the
   .sd-table-scroll wrapper pans on narrow screens instead of crushing.
   Measured min-content (2026-10-11): stability 679px, final-per-window 918px. */
.opt-stab-table :is(th, td), .opt-final-win-table :is(th, td) { white-space: nowrap; }
.opt-stab-table { min-width: 720px; }
.opt-stab-table td.opt-stab-chosen { white-space: normal; min-width: 200px; font-size: 0.75rem; color: var(--text-secondary); }
.opt-final-win-table { min-width: 940px; }
.opt-final-win-table td.wf-period { font-size: 0.72rem; color: var(--text-secondary); }
.opt-final-win-table td.wf-selected { white-space: normal; min-width: 140px; font-size: 0.75rem; color: var(--text-secondary); }
/* Cross-market breadth (shared.js _optLowFrequencyBlock, 2026-10-15): up to
   29 markets. Headers stay on one line in every language (a short table is
   one auto-layout table; the .sd-table-scroll wrapper pans). Past 10 rows the
   table takes the site's fixed-header scroll (data-coverage .dc-scroll): only
   the BODY scrolls, from the bottom of the header down; matching gutters keep
   th and td aligned; the thead paints its gutter in the header tint (light:
   0.12, as .stage-params-table th). sfFitWfTables sizes both columns to their
   header and cells and floors the table at their sum, so a narrow card pans.
   Rows are 37px; 389px shows ten and a half, so the cut row says "scroll". */
.opt-breadth-table :is(th, td) { white-space: nowrap; }
.opt-breadth-scroll > .opt-breadth-table > :is(thead, tbody) { display: block; }
.opt-breadth-scroll > .opt-breadth-table > :is(thead, tbody) > tr { display: table; width: 100%; table-layout: fixed; }
.opt-breadth-scroll > .opt-breadth-table > thead { overflow-y: hidden; scrollbar-gutter: stable; background: rgba(41, 98, 255, 0.06); }
html[data-theme="light"] .opt-breadth-scroll > .opt-breadth-table > thead { background: rgba(41, 98, 255, 0.12); }
.opt-breadth-scroll > .opt-breadth-table > thead > tr > th { background: transparent; }
.opt-breadth-scroll > .opt-breadth-table > tbody { max-height: 389px; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; }
.opt-breadth-scroll > .opt-breadth-table > :is(thead, tbody) > tr > :first-child { width: 50%; }
/* Final parameters in each window (_optFinalByWindow): the same fixed-header
   scroll. It used a scrolling wrapper with a sticky th painted --bg-card
   (1f7afbdb58), so its header lost the tint every other table has; the body
   now scrolls below the header, so the header keeps the standard tint. */
.opt-final-scroll > .opt-final-win-table > :is(thead, tbody) { display: block; }
.opt-final-scroll > .opt-final-win-table > :is(thead, tbody) > tr { display: table; width: 100%; table-layout: fixed; }
.opt-final-scroll > .opt-final-win-table > thead { overflow-y: hidden; scrollbar-gutter: stable; background: rgba(41, 98, 255, 0.06); }
html[data-theme="light"] .opt-final-scroll > .opt-final-win-table > thead { background: rgba(41, 98, 255, 0.12); }
.opt-final-scroll > .opt-final-win-table > thead > tr > th { background: transparent; }
.opt-final-scroll > .opt-final-win-table > tbody { max-height: min(520px, 65vh); overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; }
:is(.opt-breadth-scroll > .opt-breadth-table, .opt-final-scroll > .opt-final-win-table).wf-measuring > :is(thead, tbody) > tr { table-layout: auto; width: max-content; }
:is(.opt-breadth-scroll > .opt-breadth-table, .opt-final-scroll > .opt-final-win-table).wf-measuring :is(th, td) { width: auto !important; min-width: 0 !important; white-space: nowrap !important; }
.param-role-tag { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 20px; background: var(--bg-hover); color: var(--text-secondary); font-size: 0.68rem; font-weight: 600; vertical-align: middle; }
.opt-final-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.opt-missing { color: var(--text-secondary); border-left: 3px solid var(--warning); padding-left: 10px; }
/* "Show more" on long analyst prose (shared.js sfExpandableText). */
.sf-more-btn { background: none; border: none; padding: 0; font: inherit; color: var(--primary); cursor: pointer; text-decoration: underline; }
.sf-more-btn:hover { color: var(--primary-light, var(--primary)); }
.sf-more-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(41, 98, 255, 0.35); border-radius: 4px; }
.sf-more-lost { color: var(--text-muted); font-style: italic; }
.opt-reason-label { color: var(--text-secondary); }


/* Pipeline Progress: where an abandoned run stopped. */
.sd-timeline-caption { margin-top: 8px; font-size: 0.85rem; color: var(--text-secondary); }
.sd-timeline-caption i { color: var(--danger); margin-right: 4px; }

/* Audit page — borderless stat tiles + section cards (user preference). In the
   dark TV palette the card bg equals the page bg, so the 1px border was the only
   separation; drop it and use --bg-tertiary contrast instead. Light theme keeps
   its card bg (white on off-white reads fine without a border). Placed after the
   TV blocks so it wins on source order at equal specificity. */
body:is([data-page-id="audit"], [data-page-id="dashboard"], [data-page-id="autofix"], [data-page-id="alignment"], [data-page-id="data-coverage"], [data-page-id="portfolio"], [data-page-id="prediction"], [data-page-id="business"]) .lm-fut-kv { border: none; }
html:not([data-theme="light"]) body:is([data-page-id="audit"], [data-page-id="prediction"], [data-page-id="business"], [data-page-id="stocks"]) .card {
    border: none;
    background: var(--bg-tertiary);
}
html[data-theme="light"] body:is([data-page-id="audit"], [data-page-id="prediction"], [data-page-id="business"], [data-page-id="stocks"]) .card { border: none; }
/* Prediction tiles: labels wrap to 1-2 lines, so without alignment the big
   numbers sit at ragged heights across the row. Grid rows equalize tile
   heights; flex column + auto top margin bottom-aligns every value onto one
   shared baseline. */
body[data-page-id="prediction"] .lm-fut-kv { display: flex; flex-direction: column; }
body[data-page-id="prediction"] .lm-fut-kv-value { margin-top: auto; }
/* Market-name links out to polymarket.com: read as table text at rest,
   reveal as links on hover (no icons on text links — house rule). */
body[data-page-id="prediction"] .pm-mkt-link { color: inherit; text-decoration: none; }
body[data-page-id="prediction"] .pm-mkt-link:hover { color: var(--primary); text-decoration: underline; }



/* ============================================================
   Self-Heal page (autofix.html) — site primitives + theme VARIABLES only
   (no hardcoded hex; --sh = per-status accent → color-mix tints adapt to theme).
   ============================================================ */
/* Full-width borderless cards + 12px radius, matching the dashboard's Factory Health
   card (override the TV 1px-border/6px rule; html-prefixed to win specificity). */
html:not([data-theme="light"]) body:is([data-page-id="autofix"], [data-page-id="alignment"]) .card,
html[data-theme="light"] body:is([data-page-id="autofix"], [data-page-id="alignment"]) .card { border: none; border-radius: 12px; }
body[data-page-id="autofix"] #autofixContent > .card,
body[data-page-id="alignment"] #alignmentContent > .card { margin-bottom: 20px; }
body:is([data-page-id="autofix"], [data-page-id="alignment"]) .sh-stats { margin-bottom: 20px; }
body[data-page-id="autofix"] #autofixContent > .card:last-child,
body[data-page-id="alignment"] #alignmentContent > .card:last-child { margin-bottom: 0; }
body:is([data-page-id="autofix"], [data-page-id="alignment"]) .sh-intro { padding: 14px 16px; font-size: 0.86rem; line-height: 1.55; color: var(--text-secondary); }
body:is([data-page-id="autofix"], [data-page-id="alignment"]) .sh-intro b { color: var(--text-primary); }
body:is([data-page-id="autofix"], [data-page-id="alignment"]) .sh-runs-body { padding: 14px 16px; }

.sh-armed { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.sh-armed.on  { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.sh-armed.off { background: var(--bg-tertiary); color: var(--text-muted); }

.sh-run { --sh: var(--text-muted); background: var(--bg-tertiary); border-radius: 8px; border-left: 3px solid var(--sh); padding: 14px 16px; margin-bottom: 12px; }
.sh-run:last-child { margin-bottom: 0; }
.sh-run.merged          { --sh: var(--success); }
.sh-run.verified_pushed { --sh: var(--primary); }
.sh-run.needs_review, .sh-run.merged_local { --sh: var(--warning); }
.sh-run.rejected, .sh-run.error { --sh: var(--danger); }

.sh-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sh-ic { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: var(--sh); }
.sh-name { font-weight: 700; font-size: 0.95rem; color: var(--text-primary); }
.sh-status { padding: 2px 10px; border-radius: 20px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: color-mix(in srgb, var(--sh) 16%, transparent); color: var(--sh); }
.sh-time { margin-left: auto; font-size: 0.76rem; color: var(--text-muted); white-space: nowrap; }
.sh-branch { font-family: ui-monospace, Menlo, monospace; font-size: 0.74rem; color: var(--text-muted); margin-top: 8px; }

.sh-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 14px 0 6px; }
.sh-finding { font-size: 0.85rem; line-height: 1.5; color: var(--text-secondary); }
.sh-check { font-family: ui-monospace, Menlo, monospace; font-size: 0.76rem; font-weight: 600; color: var(--text-primary); background: var(--bg-card); padding: 1px 7px; border-radius: 6px; margin-right: 6px; }

.sh-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.sh-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
.sh-chip.ok  { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.sh-chip.bad { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }

.sh-sub { background: var(--bg-card); border-radius: 8px; margin-top: 10px; overflow: hidden; }
.sh-sub > summary { cursor: pointer; list-style: none; padding: 10px 13px; font-size: 0.82rem; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; user-select: none; }
.sh-sub > summary::-webkit-details-marker { display: none; }
.sh-sub > summary i { color: var(--primary); font-size: 0.78rem; }
.sh-sub > summary .sh-diffstat { margin-left: auto; font-weight: 400; font-size: 0.74rem; color: var(--text-muted); font-family: ui-monospace, Menlo, monospace; white-space: nowrap; }
.sh-sub pre { margin: 0; padding: 11px 13px; font-size: 0.78rem; line-height: 1.55; overflow: auto; max-height: 440px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
/* Root-cause analysis is prose (rendered as markdown), not code — flow it normally,
   left-aligned, with the same inset the diff <pre> has so it lines up with the summary. */
.sh-sub .sh-analysis { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.55; padding: 11px 13px; text-align: left; }
.sh-sub .sh-analysis p { margin: 0 0 8px; }
.sh-sub .sh-analysis p:last-child { margin-bottom: 0; }
.sh-sub .sh-analysis ul, .sh-sub .sh-analysis ol { margin: 4px 0 8px; padding-left: 20px; }
.sh-sub .sh-analysis li { margin: 2px 0; }
.sh-sub .sh-analysis code { background: var(--bg-hover); padding: 1px 5px; border-radius: 4px; font-size: 0.85em; }

.sh-action { margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sh-rollback { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 20px; border: none; cursor: pointer; font-size: 0.8rem; font-weight: 600; background: var(--bg-card); color: var(--text-secondary); transition: all 0.15s; }
.sh-rollback:hover { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.sh-rollback:disabled { opacity: 0.6; cursor: default; }
.sh-hint { color: var(--text-muted); font-size: 0.76rem; }
.sh-merge-hint { margin-top: 12px; font-size: 0.8rem; color: var(--text-secondary); }
.sh-merge-hint code { background: var(--bg-card); padding: 2px 7px; border-radius: 6px; font-size: 0.76rem; font-family: ui-monospace, Menlo, monospace; }
.sh-rolled { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 20px; background: var(--bg-tertiary); color: var(--text-muted); font-size: 0.78rem; font-weight: 600; }

.sh-empty { text-align: center; padding: 44px 20px; color: var(--text-muted); }
.sh-empty i { font-size: 1.9rem; opacity: 0.5; display: block; margin-bottom: 12px; }

/* ================================
   Mobile layer (≤768px) — ADDITIVE ONLY (frontend.md rule: never rewrite
   desktop layout rules). This block is last in the file so it supersedes the
   earlier ≤768px icon-rail rules: on phones the sidebar becomes an off-canvas
   drawer with full labels (hamburger toggles .mobile-open + body
   .mobile-nav-open — see layout.js), and the content column gets guards
   against CSS-grid track blowout (1fr == minmax(auto,1fr), so one wide table
   stretches every sibling past the viewport and content-wrapper's
   overflow-x:hidden clips the page — the root cause of the cut-off cards).
   ================================ */
@media (max-width: 768px) {
    /* --- Off-canvas nav drawer --- */
    .sidebar,
    .sidebar.collapsed {
        width: var(--sidebar-width);
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
        z-index: 1200;
    }
    .sidebar.mobile-open,
    .sidebar.collapsed.mobile-open {
        transform: translateX(0);
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.45);
    }
    /* A translated RTL drawer can still paint into the scrollbar gutter.
       Closed navigation must neither paint nor receive keyboard focus. */
    .sidebar:not(.mobile-open) { visibility: hidden; }
    /* The drawer always shows full labels — undo the icon-rail hiding from
       both the earlier mobile block and the .collapsed desktop state. */
    .sidebar .nav-item span,
    .sidebar .logo span,
    .sidebar .status-indicator span,
    .sidebar.collapsed .nav-item span,
    .sidebar.collapsed .logo span,
    .sidebar.collapsed .status-indicator span {
        display: inline;
    }
    .sidebar .nav-item,
    .sidebar.collapsed .nav-item {
        justify-content: flex-start;
    }
    .main-content,
    .sidebar.collapsed + .main-content {
        margin-left: 0;
    }
    /* Scrim under the open drawer; tap closes it (layout.js). */
    .mobile-nav-scrim {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1100;
    }
    body.mobile-nav-open .mobile-nav-scrim { display: block; }
    /* Keep the page from scrolling behind the open drawer. */
    body.mobile-nav-open { overflow: hidden; }

    /* --- Density --- */
    .content-wrapper { padding: 12px; }
    .header { padding: 0 14px; }
    .header-left { flex-shrink: 0; }
    .header-right, #accountDropdown { min-width: 0; }
    #accountDropdown > button { max-width: 100%; }
    #accountLabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* --- Grid blowout guards --- */
    /* Must OUT-SPECIFY the body:is(...) page-scoped .dashboard-grid rules
       (repeat(2,1fr)/1fr) or those pages keep the minmax(auto,1fr) blowout. */
    .dashboard-grid,
    body:is([data-page-id="dashboard"], [data-page-id="audit"], [data-page-id="autofix"], [data-page-id="alignment"]) .dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .dashboard-grid > * { min-width: 0; }
    .card { min-width: 0; }
    body[data-page-id="dashboard"] .card canvas { max-width: 100%; }

    /* Wide data tables: the table's immediate WRAPPER becomes the horizontal
       scroller. Tables keep display:table, so a table that fits still
       stretches to width:100% and stays edge-aligned with sibling sections —
       display:block on the table itself shrink-fits the anonymous inner table
       (Token Cost rendered 334px inside a 366px card). An overflow container
       contributes ~0 min-content, so this also breaks the grid blowout chain. */
    .card:has(> table),
    .card :has(> table),
    .table-container:has(> table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        min-width: 0;
    }

    /* Data-coverage tables: handled by the viewport-independent single-line-
       header rules right after this media block (min-width + pan applies to
       desktop and mobile alike). */

    /* Data-coverage filter rail: ONE horizontally-scrollable row of filter
       pills instead of three stacked rows (inline flex-wrap:wrap on the
       container needs the !important). Chip-rail look: scrollbar hidden,
       pills keep their intrinsic width. */
    body:is([data-page-id="data-coverage"], [data-page-id="strategies"]) .card-header > div:has(> .filter-combo) {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        scrollbar-width: none;
    }
    body:is([data-page-id="data-coverage"], [data-page-id="strategies"]) .card-header > div:has(> .filter-combo)::-webkit-scrollbar {
        display: none;
    }
    body:is([data-page-id="data-coverage"], [data-page-id="strategies"]) .filter-combo { flex-shrink: 0; }
    /* The rail is a scroll container, which clips absolutely-positioned
       descendants on BOTH axes — the dropdown menus would be unusable. A
       fixed CENTERED picker escapes the clip deterministically (fixed +
       top:auto static positioning is NOT an option: Chromium resolves the
       hypothetical static position without subtracting ancestor scroll, so
       the menu lands hundreds of px below the viewport). The menu opens as
       a modal-style option dialog in the middle of the screen. */
    body:is([data-page-id="data-coverage"], [data-page-id="strategies"]) .filter-combo-menu,
    body:is([data-page-id="data-coverage"], [data-page-id="strategies"]) .filter-combo-menu.combo-up {
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translate(-50%, -50%);
        width: min(340px, calc(100vw - 32px));
        min-width: 0;
        max-width: none;
        max-height: 60vh;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
    }

    /* Card-header filter pills wrap onto extra rows instead of overflowing. */
    .card-header { flex-wrap: wrap; row-gap: 8px; }
    .filter-control { max-width: 100%; padding: 9px 16px; }

    /* 3-zone pagination bar wraps gracefully. */
    .pagination-controls { flex-wrap: wrap; row-gap: 6px; }

    /* Pipeline/strategy-detail modal fills the phone screen. */
    .stage-detail-card {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    /* Hypothesis rows: tag chips wrap to extra rows instead of clipping
       mid-chip at the card edge. */
    .hypothesis-footer { flex-wrap: wrap; row-gap: 6px; }

    /* Idea card: the helper sentence gets the full row instead of a cramped
       ~70px column beside the send button; the button row sits below it. */
    .idea-submit-actions { flex-wrap: wrap; }
    .idea-submit-helper { flex: 1 1 100%; }

    /* Chat: the 260px session sidebar + min chat column can't share a phone
       screen — chat takes the full width. */
    :is(body[data-page-id="chat"], .ai-dock) .chat-sidebar { display: none; }

    /* Autofix history: inline code spans (file paths, commit refs) wrap on
       phones. (Diffstat wrap is viewport-independent — see below.) */
    .sh-name { overflow-wrap: anywhere; }
    code { overflow-wrap: anywhere; }
    .sh-sub > summary .sh-diffstat { margin-left: 0; }
}

/* Dropdown menus are right-anchored to their combo (correct for right-edge
   combos), but a menu's natural width is max-content — the strategies tags
   menu grew to ~605px of long tag names and extended LEFT past the content
   area, where .content-wrapper's overflow-x:hidden clipped it, looking
   "covered by the sidebar". Cap the width and ellipsize long labels instead;
   counts stay fully visible. Left-anchoring is NOT the fix — combos near the
   right edge would then push their menus off the right side at tablet
   widths. Desktop/tablet only: the mobile centered picker sizes itself. */
@media (min-width: 769px) {
    .filter-combo-menu { max-width: 380px; }
    .filter-combo-item > span:first-child {
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .filter-combo-count { flex-shrink: 0; }
}

/* Autofix diffstat lines exceed 1,100px for multi-file fixes — they overflow
   even a 1440px desktop window, so the wrap applies at EVERY viewport. */
.sh-sub > summary { flex-wrap: wrap; }
.sh-sub > summary .sh-diffstat {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ================================
   Data-coverage tables — single-line column headers at EVERY viewport.
   table-layout:fixed (required by the fixed-header thead/tbody pattern)
   cannot widen a column to fit its header, so instead of letting headers
   wrap or overlap, the table gets a hard minimum width at which every
   nowrap header fits its proportional column (1100px — measured: the
   "Span (first → last)" column is the binding constraint at 149px).
   Windows narrower than that pan the table horizontally inside .dc-scroll;
   header and body stay column-aligned because they pan together.
   ================================ */
body[data-page-id="data-coverage"] .dc-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
body[data-page-id="data-coverage"] .dc-scroll table {
    min-width: 1100px;
}
body[data-page-id="data-coverage"] .dc-scroll th {
    white-space: nowrap;
}

/* ================================
   Language switcher (globe dropdown in the header) + RTL starter.
   Part of Phase-0 i18n (buildmidas pattern; js/i18n.js + js/i18n/languages.js).
   ================================ */
.lang-dropdown {
    position: relative;
}
.lang-globe-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: none;
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.lang-globe-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.lang-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1000;
    min-width: 180px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.lang-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
}
.lang-dropdown-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.lang-dropdown-item.active { background: rgba(41, 98, 255, 0.14); color: var(--text-primary); }
@media (max-width: 768px) {
    /* phone: menu hugs the right edge inside the viewport */
    .lang-dropdown-menu { max-width: calc(100vw - 24px); }
}

/* RTL starter (ar/he/fa/ur — js/i18n.js sets document.documentElement.dir).
   Flips the app shell; content-level polish is i18n phase 2. */
[dir='rtl'] .sidebar { left: auto; right: 0; }
[dir='rtl'] .main-content { margin-left: 0; margin-right: var(--sidebar-width); }
[dir='rtl'] .sidebar.collapsed + .main-content { margin-left: 0; margin-right: var(--sidebar-collapsed); }
[dir='rtl'] .lang-dropdown-menu { right: auto; left: 0; }
[dir='rtl'] .lang-dropdown-item { text-align: right; }
@media (max-width: 768px) {
    [dir='rtl'] .sidebar,
    [dir='rtl'] .sidebar.collapsed { transform: translateX(100%); }
    [dir='rtl'] .sidebar.mobile-open,
    [dir='rtl'] .sidebar.collapsed.mobile-open { transform: translateX(0); }
    [dir='rtl'] .main-content,
    [dir='rtl'] .sidebar.collapsed + .main-content { margin-right: 0; }
}

/* ================================
   Ask-AI dock frame (top-nav assistant overlay). The interior reuses the
   chat page vocabulary verbatim — every chat rule is scoped
   :is(body[data-page-id=chat], .ai-dock) so the dock IS the chat page,
   re-housed in a floating window. Small window by default, .maximized wide.
   ================================ */
/* buildmidas Ask-AI pattern: transparent pill, primary-colored text + the
   Material auto_awesome sparkle (embedded SVG — we do not ship a second
   icon font for one glyph), faint primary tint on hover. */
.ask-ai-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 10px; border: none; border-radius: 9999px;
    background: transparent; color: var(--primary);
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background-color 0.15s ease;
}
.ask-ai-btn:hover { background: rgba(41, 98, 255, 0.08); }
.ask-ai-btn:active { background: rgba(41, 98, 255, 0.14); }
.ask-ai-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ask-ai-btn svg { width: 19px; height: 19px; fill: currentColor; flex-shrink: 0; }
@media (max-width: 640px) { .ask-ai-btn .ask-ai-btn-label { display: none; } }
.ai-dock {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1200;
    width: min(460px, 100vw); display: flex; flex-direction: column;
    background: var(--bg-secondary); border-left: 1px solid var(--border-color);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35);
    transform: translateX(100%); transition: transform 0.18s ease, width 0.18s ease;
}
.ai-dock.open { transform: translateX(0); }
.ai-dock.maximized { width: min(1100px, 96vw); }
.ai-dock-header {
    display: flex; align-items: center; gap: 10px; padding: 13px 16px;
    border-bottom: 1px solid var(--border-color); color: var(--text-primary);
    flex-shrink: 0;
}
.ai-dock-header > i { color: var(--primary); }
.ai-dock-title { flex: 1; font-weight: 700; font-size: 1.1rem; }
/* Circular icon buttons (autovalueuae assistant-header pattern). */
.ai-dock-iconbtn {
    width: 38px; height: 38px; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0; padding: 0;
    background: none; border: none; cursor: pointer; color: var(--text-muted);
    border-radius: 50%; font-size: 1.05rem;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.ai-dock-iconbtn:hover { background: var(--bg-hover); color: var(--text-primary); }
/* Interior fit: the chat vocabulary fills the dock below the header. */
.ai-dock .chat-page-flex { flex: 1; min-height: 0; }
.ai-dock .chat-container { max-width: 800px; }
/* Small window: the session sidebar starts collapsed (chat.js toggles it). */
.ai-dock:not(.maximized) .chat-sidebar.collapsed { width: 0; border-right: none; }

/* ── AI Center: model picker (js/model-picker.js) — shared by the Ask-AI
   composer and the AI Center page; same menu vocabulary as .filter-combo-menu. */
.mp-menu {
    position: fixed; z-index: 100000; display: flex; flex-direction: column;
    min-width: 240px; max-width: 340px; max-height: min(420px, 70vh); overflow: auto;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); padding: 6px;
    scrollbar-width: thin;
}
.mp-group { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
            color: var(--text-muted); padding: 8px 10px 2px; }
.mp-group .mp-unavail { font-weight: 400; text-transform: none; letter-spacing: 0; }
.mp-item { appearance: none; border: none; background: none; cursor: pointer; display: flex;
           align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px;
           border-radius: 9px; font: inherit; font-size: 14px; color: var(--text-primary); }
.mp-item:hover { background: var(--bg-hover); }
.mp-mark { flex: 0 0 16px; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; }
.mp-mark svg, .mp-mark img { display: block; max-width: 16px; max-height: 16px; }
.mp-item.is-on { background: rgba(41, 98, 255, 0.10); }
.mp-item.is-disabled { opacity: 0.45; cursor: not-allowed; }
.mp-item .mp-def { margin-left: auto; font-style: normal; font-size: 11px; color: var(--text-muted); }
/* Composer "Model" button: a quiet pill between the attach and send buttons. */
/* "+" menu and its Model submenu (buildmidas .ai-chat-plus-menu). */
.chat-plus-menu {
    position: fixed; z-index: 100000; min-width: 240px; max-width: 340px;
    background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); padding: 6px; font-size: 13px; color: var(--text-primary);
    scrollbar-width: thin;
}
.chat-plus-scroll { display: flex; flex-direction: column; }
.chat-plus-item {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border: none; background: transparent; border-radius: 8px; cursor: pointer;
    color: var(--text-primary); font: inherit; font-size: 13px; text-align: left;
}
.chat-plus-item:hover { background: var(--bg-hover); }
.chat-plus-item.is-active { font-weight: 600; background: rgba(41, 98, 255, 0.10); }
.chat-plus-item.is-disabled { opacity: 0.45; cursor: not-allowed; }
.chat-plus-item > i.fas { font-size: 15px; color: var(--text-muted); flex-shrink: 0; width: 18px; text-align: center; }
.chat-plus-item.chat-plus-picker > span:nth-child(2) { display: inline-flex; align-items: baseline; gap: 6px; flex: 1 1 auto; min-width: 0; }
.chat-plus-picker-value { color: var(--text-muted); font-weight: 400; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.chat-plus-item.chat-plus-picker.is-set .chat-plus-picker-value { color: var(--text-primary); font-weight: 500; }
.chat-plus-picker-arrow { margin-left: auto; font-size: 12px !important; color: var(--text-muted); }
.chat-plus-group { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); padding: 8px 10px 2px; }
.chat-plus-muted { font-weight: 400; text-transform: none; letter-spacing: 0; }
.chat-plus-mark { flex: 0 0 16px; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; }
.chat-plus-mark svg, .chat-plus-mark img { display: block; max-width: 16px; max-height: 16px; }

/* buildmidas: 40px "+" and send buttons on desktop, 36px on phones */
@media (min-width: 641px) { .chat-attach-btn, .chat-send-btn { width: 40px; height: 40px; } }
/* AI Center page */
body[data-page-id="agents"] .aic-lead { color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 18px; max-width: 760px; }
body[data-page-id="agents"] .aic-h4 { margin: 18px 0 10px; font-size: 0.95rem; color: var(--text-primary); }
body[data-page-id="agents"] .aic-provs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
body[data-page-id="agents"] .aic-prov { background: var(--bg-tertiary); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
body[data-page-id="agents"] .aic-prov-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body[data-page-id="agents"] .aic-prov-name { font-weight: 600; color: var(--text-primary); }
body[data-page-id="agents"] .aic-prov-models { display: flex; flex-wrap: wrap; gap: 6px; }
body[data-page-id="agents"] .aic-chip { background: var(--bg-secondary); border-radius: 20px; padding: 2px 10px; font-size: 0.78rem; color: var(--text-secondary); }
body[data-page-id="agents"] .aic-prov-detail { font-size: 0.8rem; color: var(--text-muted); }
body[data-page-id="agents"] .aic-scroll { overflow-x: auto; }
body[data-page-id="agents"] .aic-role { font-weight: 600; color: var(--text-primary); }
body[data-page-id="agents"] .aic-desc { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; max-width: 520px; }
body[data-page-id="agents"] .aic-model-cell { white-space: nowrap; vertical-align: top; }
body[data-page-id="agents"] .aic-model-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px;
    border: 1px solid var(--border-color); border-radius: 20px; background: var(--bg-tertiary); color: var(--text-primary);
    font: inherit; font-size: 0.85rem; cursor: pointer; transition: background var(--transition-fast); }
body[data-page-id="agents"] .aic-model-btn:hover { background: var(--bg-hover); }
body[data-page-id="agents"] .aic-model-btn .aic-default { font-style: normal; font-size: 0.72rem; color: var(--text-muted); }
body[data-page-id="agents"] .aic-model-btn .aic-caret { font-size: 0.7rem; color: var(--text-muted); }
body[data-page-id="agents"] .aic-reset { width: 30px; height: 30px; margin-left: 6px; border: none; border-radius: 50%; background: transparent;
    color: var(--text-muted); cursor: pointer; font-size: 0.8rem; vertical-align: middle; }
body[data-page-id="agents"] .aic-reset:hover { background: var(--bg-hover); color: var(--text-primary); }
body[data-page-id="agents"] .aic-note { white-space: normal; font-size: 0.78rem; color: var(--text-muted); margin-top: 6px; max-width: 360px; }
body[data-page-id="agents"] .aic-note i { color: var(--primary); margin-right: 4px; }
body[data-page-id="agents"] .aic-provs { margin-bottom: 18px; }
body[data-page-id="agents"] .agent-model-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
body[data-page-id="agents"] .agent-model-label { font-size: 0.85rem; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; }
body[data-page-id="agents"] .agent-model-label i { color: var(--primary); }
body[data-page-id="agents"] .agent-customize-btn { margin-left: auto; height: 30px; padding: 0 12px; border: 1px solid var(--border-color);
    border-radius: 20px; background: var(--bg-tertiary); color: var(--text-primary); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
body[data-page-id="agents"] .agent-customize-btn:hover { background: var(--bg-hover); }
body[data-page-id="agents"] .agent-model-pick { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.sf-modal-hint { color: var(--text-muted); font-size: 0.82rem; margin: 0 0 12px; }

/* ================================
   Locale modal (autovalueuae LocaleSelectors port): two-tab instant-apply
   dialog — language grid + grouped region cells with flags, currency grid.
   ================================ */
.lc-overlay {
    position: fixed; inset: 0; z-index: 1300; display: flex;
    align-items: flex-start; justify-content: center; overflow-y: auto;
    background: rgba(0, 0, 0, 0.5); padding: 16px;
}
@media (min-width: 640px) { .lc-overlay { align-items: center; } }
.lc-panel {
    display: flex; flex-direction: column; overflow: hidden;
    width: 100%; max-width: 768px; max-height: 85vh;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.lc-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px 0 24px; border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.lc-tabs { display: flex; gap: 20px; padding-top: 12px; }
.lc-tab {
    position: relative; background: none; border: none; cursor: pointer;
    padding: 0 0 8px; color: var(--text-muted); font: inherit;
    font-size: 14px; font-weight: 500;
}
.lc-tab.active { color: var(--text-primary); }
.lc-tab.active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 2px; border-radius: 2px; background: var(--text-primary);
}
.lc-close { margin: 10px 0; }
.lc-body { overflow-y: auto; padding: 20px 24px; }
.lc-heading { color: var(--text-primary); font-size: 14px; font-weight: 600; margin: 0 0 12px; }
.lc-group {
    color: var(--text-muted); font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.025em; margin: 16px 0 8px;
}
.lc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 640px) { .lc-grid { grid-template-columns: repeat(3, 1fr); } }
/* Landing pages and dashboard share the same hover and selected surface. */
.lc-cell {
    display: flex; align-items: center; gap: 10px; text-align: start;
    background: transparent; border: none; border-radius: 8px;
    padding: 8px 12px; cursor: pointer; color: var(--text-primary); font: inherit;
    min-width: 0; transition: background var(--transition-fast);
}
.lc-cell:hover { background: var(--bg-tertiary); }
.lc-cell.selected { background: var(--bg-tertiary); }
/* Match the dashboard's light modal surfaces and selected-state contrast. */
html body.sf-marketing[data-page-id] .lc-panel {
    --bg-secondary: #ffffff;
    --bg-tertiary: #f8f9fd;
}
.lc-flag { width: 24px; height: 16px; border-radius: 2px; object-fit: cover; flex-shrink: 0; }
.lc-cell-text { display: flex; flex-direction: column; min-width: 0; }
.lc-cell-title { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-cell-sub { font-size: 12px; color: var(--text-muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Round globe trigger (reference: icon-only rounded-full header button). */
.lc-globe-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary); font-size: 1rem;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.lc-globe-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
/* The globe is buildmidas' marketing glyph (inline SVG, 20px, 2px stroke) on every header. */
.lc-globe-btn svg, .lp-globe svg { width: 20px; height: 20px; display: block; }


/* Admin-only Operations nav group (collapsible) — head mirrors .nav-item
   metrics exactly (padding, 3px spacer border, 24px icon box, hover). */
.nav-group-head {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 12px 20px; background: none; border: none;
    border-left: 3px solid transparent; border-radius: 0;
    cursor: pointer; color: var(--text-secondary);
    font: inherit; text-align: left;
    transition: all var(--transition-fast);
}
.nav-group-head:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-group-head > i:first-child {
    width: 24px; height: 24px; display: flex; align-items: center;
    justify-content: center; text-align: center; font-size: 1.1rem;
    transition: all var(--transition-fast); border-radius: 6px;
}
.nav-group-head:hover > i:first-child { color: var(--primary); transform: scale(1.1); }
.nav-group-head .nav-group-chev {
    margin-left: auto; font-size: 0.65rem; transition: transform 0.15s;
}
.nav-group.open .nav-group-head .nav-group-chev { transform: rotate(180deg); }
.nav-group-items { display: none; }
.nav-group.open .nav-group-items { display: block; }
/* Sub-items (Cryptocurrency, Stocks, Hypotheses, …) carry no icon — only the
   main sections do (owner 2026-09-19). Text starts where the group label
   starts: 20px pad + 24px icon + 12px gap = 56px. */
.nav-group-items .nav-item { padding-left: 56px; }
.nav-group-items .nav-item > i { display: none; }


/* Collapsed sidebar: Operations group head becomes icon-only like nav items */
.sidebar.collapsed .nav-group-head span,
.sidebar.collapsed .nav-group-head .nav-group-chev {
    display: none;
}
.sidebar.collapsed .nav-group-head {
    justify-content: center;
}
.sidebar.collapsed .nav-group-items .nav-item {
    padding-left: 20px;   /* undo the open-state indent; centers like siblings */
}
.sidebar.collapsed .nav-group-items .nav-item > i { display: flex; }   /* icon-only rail keeps them reachable */

/* Consistent exchange-style navigation; Arial is Binance's public font fallback.
   Keep Stratmill's blue selection accent and the existing navigation hierarchy. */
.sidebar { --nav-label: #eaecef; --nav-icon: #929aa5; }
html[data-theme="light"] .sidebar { --nav-label: #1e2329; --nav-icon: #707a8a; }
.sidebar .nav-item,
.sidebar .nav-group-head {
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: normal;
    color: var(--nav-label);
}
.sidebar .nav-item > i,
.sidebar .nav-group-head > i:first-child {
    width: 24px;
    height: 24px;
    font-size: 18px;
    color: var(--nav-icon);
    flex-shrink: 0;
}
.sidebar .nav-icon > svg { display: block; width: 18px; height: 18px; flex-shrink: 0; }
.sidebar .nav-item:hover > i,
.sidebar .nav-group-head:hover > i:first-child { transform: none; }
.sidebar .nav-item.active { color: var(--nav-label); font-weight: 500; }
.sidebar .nav-item.active > i { color: var(--primary); }
.sidebar .nav-group-chev { color: var(--nav-icon); }
.sidebar .nav-item:focus-visible,
.sidebar .nav-group-head:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }


/* Reserve the root scrollbar gutter permanently: pages with and without a
   scrollbar otherwise differ ~17px in layout width, so the right-aligned
   header buttons (Ask AI / globe / account) visibly jump when navigating
   between long and short pages. Overlay-scrollbar platforms are unaffected. */
html { scrollbar-gutter: stable; }


/* Restart-reconciliation rows in the paper trades table: settle/restore
   plumbing gets a muted badge so it can't be mistaken for a signal trade. */
.pt-reason-badge {
    display: inline-block; margin-left: 6px; padding: 1px 7px;
    font-size: 0.62rem; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; border-radius: 999px;
    background: var(--bg-hover); color: var(--text-muted);
    vertical-align: middle; cursor: help;
}
.pt-trade-row.pt-reconcile td { opacity: 0.75; }


/* ─── AI assistant: charts + stream smoother + code copy (buildmidas parity) ─── */
:is(body[data-page-id="chat"], .ai-dock) .chat-chart-container {
    background: var(--bg-tertiary); border-radius: 10px; padding: 16px; margin: 12px 0;
    max-width: 100%;
    overflow-x: auto;
}
/* Chart.js sizes to its PARENT — the inner wrapper floors that at the width
   charts get in the maximized window, so a small dock shows the SAME-sized
   chart panning horizontally instead of a shrunken one. */
:is(body[data-page-id="chat"], .ai-dock) .chat-chart-inner { min-width: 640px; }
:is(body[data-page-id="chat"], .ai-dock) .chat-chart-container canvas { max-height: 350px; }

/* Code blocks: dark surface + pinned copy button / language chip. */
:is(body[data-page-id="chat"], .ai-dock) .chat-msg-content pre,
:is(body[data-page-id="chat"], .ai-dock) pre.ws-code-block {
    background: #1e1e1e; color: #d4d4d4; border: none; border-radius: 8px;
    padding: 30px 16px 12px; overflow: auto; max-height: min(480px, 60vh); white-space: pre;
    font-size: 13px;
}
.ws-code-wrap { position: relative; margin: 8px 0; }
.ws-code-wrap > pre { margin: 0 !important; }
.ws-code-wrap > .ws-code-lang {
    position: absolute; top: 6px; left: 12px; padding: 1px 6px; border-radius: 4px;
    background: rgba(20,20,20,0.85); font-size: 11px; color: #9ca3af;
    text-transform: uppercase; letter-spacing: 0.05em; pointer-events: none; z-index: 1;
}
.ws-code-wrap > .ws-code-copy {
    position: absolute; top: 4px; right: 6px; display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; background: rgba(20,20,20,0.85); border: 1px solid rgba(255,255,255,0.18);
    border-radius: 9999px; color: #d4d4d4; font-size: 11px; cursor: pointer;
    transition: background .12s, color .12s, border-color .12s; user-select: none; z-index: 1;
}
.ws-code-wrap > .ws-code-copy:hover { background: rgba(40,40,40,0.95); color: #fff; border-color: rgba(255,255,255,0.28); }
.ws-code-wrap > .ws-code-copy.copied { background: var(--success); border-color: var(--success); color: #fff; }

/* Tool-activity spinner strip — theme-aware overrides of the smoother's inline light styles. */
:is(body[data-page-id="chat"], .ai-dock) .ws-streaming-spinner-label,
:is(body[data-page-id="chat"], .ai-dock) .ws-streaming-spinner-icon { color: var(--text-secondary) !important; }
:is(body[data-page-id="chat"], .ai-dock) .ws-stream-activity-detail {
    background: var(--bg-tertiary) !important; color: var(--text-secondary) !important;
}
:is(body[data-page-id="chat"], .ai-dock) .ws-stream-activity-row { cursor: pointer !important; }

/* Rounded bordered tables (matches buildmidas). */
/* The dock is mounted on <body> inside whatever page is open, so any page-
   scoped rule on bare table elements reaches its chat tables. Pin the
   properties a host page is known to set (sticky headers, first-column
   minimums) back to plain flow here; tests/test_frontend_page_scoped_table_rules.py
   keeps such host rules class-scoped in the first place. */
.ai-dock .chat-msg-content :is(th, td) { position: static; min-width: 0; }
:is(body[data-page-id="chat"], .ai-dock) .chat-msg-content table {
    border-collapse: separate; border-spacing: 0; width: 100%; margin: 10px 0;
    border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; font-size: 13px;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-msg-content th,
:is(body[data-page-id="chat"], .ai-dock) .chat-msg-content td {
    border-bottom: 1px solid var(--border-color); border-right: 1px solid var(--border-color);
    padding: 8px 12px; text-align: left;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-msg-content th:last-child,
:is(body[data-page-id="chat"], .ai-dock) .chat-msg-content td:last-child { border-right: none; }
:is(body[data-page-id="chat"], .ai-dock) .chat-msg-content tr:last-child td { border-bottom: none; }
:is(body[data-page-id="chat"], .ai-dock) .chat-msg-content th { background: var(--bg-tertiary); font-weight: 600; }

:is(body[data-page-id="chat"], .ai-dock) .chat-send-btn.streaming { background: var(--danger); }

/* Assistant reply text — buildmidas parity: #374151 (gray-700) on light,
   #e6e8ec (their dark-surface text tone) on dark. Scoped to the assistant
   message only so the user pill keeps its white-on-primary text. */
html[data-theme="light"] :is(body[data-page-id="chat"], .ai-dock) .chat-msg-assistant .chat-msg-content { color: #374151; }
html:not([data-theme="light"]) :is(body[data-page-id="chat"], .ai-dock) .chat-msg-assistant .chat-msg-content { color: #e6e8ec; }

/* ── Public (anonymous) mode — live-market / options-chain opened from the
   landing page: content only, no dashboard chrome. layout.js stamps
   body.sf-public from the identity check. Placed after the mobile layer on
   purpose: these rules apply at every viewport width. */
body.sf-public .sidebar,
body.sf-public .mobile-nav-scrim { display: none !important; }
body.sf-public .main-content { margin-inline: 0 !important; }
body.sf-public .menu-toggle { display: none !important; }
body.sf-public .ask-ai-btn { display: none !important; }
/* ================================
   Pagination bars on phones (prediction, strategies, hypotheses, pipeline —
   the shared 3-zone component). The zones cannot share one phone row, so the
   bar wraps into three rows; without explicit rules that stack came out
   mixed-aligned (info left, buttons centered, per-page left) and read as
   broken. Wrap deterministically and center every row.
   ================================ */
@media (max-width: 768px) {
    .pagination-controls { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
    .pagination-controls .pag-info { width: 100%; text-align: center; }
    .pagination-controls .pag-nav { width: 100%; justify-content: center; margin: 0; }
}

/* ================================
   Public footer on phones: the links centre and wrap (two lines at phone
   widths), with the copyright centred on its own line beneath — the
   desktop space-between row leaves them stranded at opposite edges.
   ================================ */
@media (max-width: 768px) {
    .lp-footer-inner { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
    .lp-footer-links { display: flex; flex-wrap: wrap; justify-content: center;
                       gap: 8px 18px; }
    /* !important: each page's inline block sets margin-right:18px AFTER this
       file, so the links would carry gap + margin (36px) and spill to 3 rows */
    .lp-footer-links a { margin-right: 0 !important; }
    .lp-footer-copy { width: 100%; text-align: center; }
}

/* ================================
   Public-page mobile navigation (js/mobile-nav.js) — the buildmidas pattern.
   Below 900px the nav row is hidden and every item lives in a panel that
   slides down from the top edge over a dimmed backdrop; only the logo, the
   globe and the burger stay in the bar. Each page's own <style> block owns
   the three hide/show lines (.lp-nav-links, the bar CTAs, .mnav-toggle),
   because its base rules are declared AFTER this file and would otherwise
   win the tie.
   ================================ */
.mnav-toggle { display: none; align-items: center; justify-content: center;
               width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px;
               background: none; color: var(--text-secondary); cursor: pointer; }
.mnav-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }
.mnav-toggle svg { width: 20px; height: 20px; }

.mnav-panel { position: fixed; left: 0; right: 0; top: 0; z-index: 1200;
              padding: 12px 20px 20px; background: var(--bg-primary);
              border-bottom: 1px solid var(--border-color);
              box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
              transform: translateY(-100%); transition: transform 0.22s ease;
              max-height: 100vh; max-height: 100dvh; overflow-y: auto;
              box-sizing: border-box; overscroll-behavior: contain;
              padding-bottom: max(20px, env(safe-area-inset-bottom));
              overflow-wrap: anywhere; visibility: hidden; }
.mnav-panel.on { transform: translateY(0); visibility: visible; }
.mnav-panel a { display: block; padding: 13px 4px; font-size: 1rem; font-weight: 600;
                color: var(--text-primary); text-decoration: none;
                border-bottom: 1px solid var(--border-color); }
.mnav-panel a:hover { color: var(--primary); }
.mnav-top { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 4px; }
.mnav-group { display: flex; align-items: center; justify-content: space-between;
              width: 100%; padding: 13px 4px; border: 0;
              border-bottom: 1px solid var(--border-color); background: none;
              color: var(--text-primary); font: inherit; font-size: 1rem;
              font-weight: 600; cursor: pointer; }
.mnav-group .car { color: var(--text-muted); transition: transform 0.18s ease; }
.mnav-group.open .car { transform: rotate(180deg); }
.mnav-subwrap { display: none; }
.mnav-subwrap.open { display: block; }
.mnav-panel a.mnav-sub { padding-left: 16px; font-size: 0.94rem; font-weight: 500;
                         color: var(--text-secondary); }
.mnav-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.mnav-actions a { border: 0; border-bottom: 0; border-radius: 999px;
                  padding: 12px 18px; text-align: center; font-weight: 600; }
.mnav-actions a.ghost { background: var(--bg-hover); color: var(--text-primary); }
.mnav-actions a.solid { background: var(--primary); color: #fff; }
.mnav-actions a.solid:hover { color: #fff; }
.mnav-back { position: fixed; inset: 0; z-index: 1199; background: rgba(8, 10, 16, 0.45);
             opacity: 0; pointer-events: none; transition: opacity 0.22s ease; }
.mnav-back.on { opacity: 1; pointer-events: auto; }
/* Visibility follows the page's toggle breakpoint; JS closes on desktop. */


/* Idea attachments on the hypothesis page (images the Research Lead looked at) */
.hyp-att-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.hyp-att-image { display: flex; flex-direction: column; gap: 4px; max-width: 220px; text-decoration: none; color: inherit; font-size: 12px; }
.hyp-att-image img { width: 220px; max-height: 160px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border-color, #2a2e39); }
.hyp-att-doc { display: flex; align-items: center; gap: 6px; font-size: 13px; width: 100%; }
.hyp-att-doc small { opacity: .7; }
.hyp-att-bad { opacity: .75; }
.sd-derive-btn { margin-left: 6px; }

/* price & trades chart refused: bars and trades from different experiments */
.bt-chart-withheld { display: flex; align-items: flex-start; gap: 12px; padding: 20px; border-radius: var(--radius-lg, 12px); background: var(--bg-secondary); color: var(--text-secondary); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.bt-chart-withheld > i { margin-top: 4px; color: var(--text-muted); }
.bt-chart-withheld strong { color: var(--text-primary); font-weight: 600; }
.bt-chart-withheld p { margin: 4px 0 0; }
.bt-chart-unavailable { height: auto !important; min-height: 0 !important; }
.kline-leg-combo .filter-combo-menu { max-height: 280px; overflow-y: auto; }

/* per-layer facts inline in the verification block (trades/bars, QA verdict) */
.layer-meta { color: var(--text-muted, #787b86); font-weight: 500; }

/* QA notes / advisory rendered inside the Layer 4 row */
.layer-notes { margin-top: 6px; font-size: 0.8rem; color: var(--text-secondary, #b2b5be); }
.layer-notes-title { font-weight: 600; margin-bottom: 2px; }
.layer-notes ul { margin: 0 0 0 18px; }

/* Risk review findings (2026-09-12): one row per finding, severity carried by
   the tag and a light row tint; the text keeps the ordinary text colour. */
.sd-risk-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sd-risk-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--card-bg); }
.sd-risk-tag { flex: 0 0 auto; min-width: 66px; text-align: center; font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.7; padding: 1px 10px; border-radius: 20px;
    margin-top: 2px; background: rgba(148,163,184,0.15); color: var(--text-secondary, #94a3b8); }
.sd-risk-text { flex: 1 1 auto; font-size: 0.85rem; line-height: 1.55; color: var(--text); }
.sd-risk-item.critical { border-color: rgba(239,68,68,0.25); background: rgba(239,68,68,0.05); }
.sd-risk-tag.critical { background: rgba(239,68,68,0.15); color: #ef4444; }
.sd-risk-item.warning { border-color: rgba(245,158,11,0.25); background: rgba(245,158,11,0.05); }
.sd-risk-tag.warning { background: rgba(245,158,11,0.15); color: #f59e0b; }
.sd-risk-item.info { border-color: rgba(59,130,246,0.25); background: rgba(59,130,246,0.05); }
.sd-risk-tag.info { background: rgba(59,130,246,0.15); color: #3b82f6; }
@media (max-width: 600px) { .sd-risk-item { flex-direction: column; gap: 6px; } .sd-risk-tag { align-self: flex-start; } }

/* Public navigation keeps keyboard focus visible in either theme. */
.mnav-panel :focus-visible, .mnav-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .mnav-panel, .mnav-back, .mnav-group .car { transition: none; }
}

/* Strategy detail title row (2026-09-12): every badge beside the title — the
   stage pill (.status) and the iteration / marketplace / paused / manual-
   promotion pills (.sd-iteration-badge) — shares one height, padding, radius
   and font so they sit on one line at the same size. Scoped to the row; the
   global .status and .sd-iteration-badge rules are unchanged elsewhere. */
.sd-title-row .status,
.sd-title-row .sd-iteration-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    box-sizing: border-box;
    padding: 0 12px;
    border-radius: 13px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* ── Agents page: AI Center tabs, library tables, attach switches (2026-09-18) ── */
body[data-page-id="agents"] .aic-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-color); margin: 0 0 18px; flex-wrap: wrap; }
body[data-page-id="agents"] .aic-tab { border: none; background: transparent; padding: 10px 16px; font: inherit; font-size: 0.9rem; font-weight: 600;
    color: var(--text-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
body[data-page-id="agents"] .aic-tab:hover { color: var(--text-primary); }
body[data-page-id="agents"] .aic-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
body[data-page-id="agents"] .aic-sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
body[data-page-id="agents"] .aic-sec-head .aic-lead { margin: 0; }
body[data-page-id="agents"] .aic-sec-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
body[data-page-id="agents"] .aic-btn { height: 34px; padding: 0 16px; border: 1px solid var(--border-color); border-radius: 20px; background: var(--bg-tertiary);
    color: var(--text-primary); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
body[data-page-id="agents"] .aic-btn:hover { background: var(--bg-hover); }
body[data-page-id="agents"] .aic-btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
body[data-page-id="agents"] .aic-btn.primary:hover { filter: brightness(1.08); }
body[data-page-id="agents"] .aic-summary { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 10px; }
body[data-page-id="agents"] .aic-scrollx { overflow-x: auto; }
body[data-page-id="agents"] .aic-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
body[data-page-id="agents"] .aic-table th { text-align: left; font-weight: 600; color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 10px 12px; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
body[data-page-id="agents"] .aic-table td { padding: 11px 12px; border-bottom: 1px solid var(--border-color); color: var(--text-secondary); vertical-align: middle; }
body[data-page-id="agents"] .aic-table td.name { color: var(--text-primary); font-weight: 600; max-width: 320px; overflow-wrap: anywhere; }
body[data-page-id="agents"] .aic-table td.muted { color: var(--text-muted); white-space: nowrap; }
body[data-page-id="agents"] .aic-table td.desc { max-width: 420px; }
body[data-page-id="agents"] .aic-table td.actions { white-space: nowrap; text-align: right; }
body[data-page-id="agents"] .aic-table tbody tr:hover { background: var(--bg-hover); }
body[data-page-id="agents"] .aic-row-action { width: 30px; height: 30px; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--text-secondary);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; }
body[data-page-id="agents"] .aic-row-action:hover { background: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-primary); }
body[data-page-id="agents"] .aic-row-action.danger:hover { color: var(--danger-light); }
body[data-page-id="agents"] .aic-empty { color: var(--text-muted); padding: 28px 0; text-align: center; font-size: 0.9rem; }
body[data-page-id="agents"] .aic-empty i { display: block; font-size: 1.6rem; margin-bottom: 8px; color: var(--text-muted); }
body[data-page-id="agents"] .aic-agents-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.sf-attach-list { border: 1px solid var(--border-color); border-radius: 8px; padding: 0 12px; margin-bottom: 14px; max-height: 240px; overflow-y: auto; }
.sf-attach-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-color); cursor: pointer; }
.sf-attach-row:last-child { border-bottom: none; }
.sf-attach-row > i { color: var(--text-muted); font-size: 0.95rem; width: 16px; text-align: center; flex-shrink: 0; }
.sf-attach-main { flex: 1; min-width: 0; }
.sf-attach-name { display: block; font-size: 0.85rem; color: var(--text-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-attach-name.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 500; }
.sf-attach-sub { display: block; font-size: 0.78rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-attach-meta { font-size: 0.75rem; color: var(--text-muted); flex-shrink: 0; }
.sf-attach-empty { font-size: 0.85rem; color: var(--text-muted); padding: 10px 0; }
.sf-modal-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.sf-modal-sec-head .sf-modal-label { margin-bottom: 0; }
.sf-modal-manage { height: 26px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: 20px; background: transparent; color: var(--text-secondary);
    font: inherit; font-size: 0.78rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.sf-modal-manage:hover { background: var(--bg-hover); color: var(--text-primary); }
.sf-modal-input.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85rem; line-height: 1.5; }
.sf-modal-pre { max-height: 60vh; overflow: auto; background: var(--bg-tertiary); border-radius: 8px; padding: 12px; font-size: 0.8rem; line-height: 1.5;
    white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-secondary); margin: 0 0 12px; }
/* Toggle switch (36×20 pill; the primary colour when on). */
.sf-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.sf-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.sf-switch-slider { position: absolute; cursor: pointer; inset: 0; background: var(--border-color); border-radius: 9999px; transition: background 0.15s ease; }
.sf-switch-slider::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform 0.15s ease; }
.sf-switch input:checked + .sf-switch-slider { background: var(--primary); }
.sf-switch input:checked + .sf-switch-slider::before { transform: translateX(16px); }
.sf-switch input:focus-visible + .sf-switch-slider { outline: 2px solid rgba(41, 98, 255, 0.45); outline-offset: 2px; }
.sf-switch input:disabled + .sf-switch-slider { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 640px) {
    body[data-page-id="agents"] .aic-table td.desc, body[data-page-id="agents"] .aic-table th.desc { display: none; }
    /* The table scrolls sideways inside .aic-scrollx instead of breaking names per letter. */
    body[data-page-id="agents"] .aic-table td.name { white-space: nowrap; overflow-wrap: normal; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
}

/* ── Sidebar: inline SVG icons size like the Font Awesome ones ── */
.nav-item .nav-svg { width: 24px; height: 24px; padding: 4px; box-sizing: border-box; flex-shrink: 0; }

/* ── AI Center (agents page): buildmidas' stat cards + agent cards (2026-09-18) ── */
body[data-page-id="agents"] .stats-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 30px; }
@media (min-width: 1100px) { body[data-page-id="agents"] .stats-container { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
body[data-page-id="agents"] .stat-card { border-radius: 14px; padding: 16px 18px; background: var(--bg-tertiary); display: flex; align-items: center; gap: 14px; }
body[data-page-id="agents"] .stat-card .stat-ico { display: inline-flex; flex: 0 0 auto; font-size: 24px; }
body[data-page-id="agents"] .stat-card .stat-ico svg { width: 26px; height: 26px; }
body[data-page-id="agents"] .stat-card .stat-body { min-width: 0; }
body[data-page-id="agents"] .stat-card .number { font-size: 24px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
body[data-page-id="agents"] .stat-card .label { font-size: 13px; color: var(--text-muted); font-weight: 600; }
html[data-theme="light"] body[data-page-id="agents"] .stat-card.completed { background: #eaf6ec; }
html[data-theme="light"] body[data-page-id="agents"] .stat-card.in-progress { background: #f0f0f2; }
html[data-theme="light"] body[data-page-id="agents"] .stat-card.pending { background: #f2effe; }
html[data-theme="light"] body[data-page-id="agents"] .stat-card.warning { background: #fdf3e3; }
html[data-theme="light"] body[data-page-id="agents"] .stat-card.total { background: #f6f8fa; }
body[data-page-id="agents"] .agent-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
body[data-page-id="agents"] .agent-card { background: var(--bg-tertiary); border: none; border-radius: 12px; padding: 20px; cursor: pointer;
    display: flex; flex-direction: column; transition: background 0.2s; box-shadow: none; }
body[data-page-id="agents"] .agent-card:hover { background: var(--bg-hover); }
body[data-page-id="agents"] .agent-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
body[data-page-id="agents"] .agent-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 0; border: none; }
body[data-page-id="agents"] .agent-card-header > i { font-size: 17px; width: 22px; text-align: center; flex-shrink: 0; }
body[data-page-id="agents"] .agent-card-title { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
body[data-page-id="agents"] .agent-card-name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
body[data-page-id="agents"] .badge.success { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; background: rgba(19, 115, 51, 0.14); color: #137333; }
html:not([data-theme="light"]) body[data-page-id="agents"] .badge.success { color: #4ade80; }
body[data-page-id="agents"] .agent-card-desc { color: var(--text-muted); font-size: 13px; line-height: 1.5; min-height: 40px; overflow-wrap: anywhere; }
body[data-page-id="agents"] .agent-card-ops { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
body[data-page-id="agents"] .agent-card-meta { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-color); font-size: 12px; color: var(--text-muted);
    display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 1000px) { body[data-page-id="agents"] .agent-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { body[data-page-id="agents"] .agent-card-grid { grid-template-columns: minmax(0, 1fr); }
    body[data-page-id="agents"] .stats-container { grid-template-columns: repeat(2, 1fr); margin-bottom: 20px; } }

/* ── Customize Agents modal (buildmidas' .uf-cf-sheet) ── */
.cf-overlay { position: fixed; inset: 0; z-index: 6000; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.cf-sheet { background: var(--bg-card); border-radius: 16px; width: 100%; max-width: 720px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); overflow: hidden; }
.cf-frame { display: flex; flex-direction: column; max-height: 90vh; }
.cf-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; flex-shrink: 0; }
.cf-head h3 { margin: 0; font-size: 18px; color: var(--text-primary); }
.cf-tabstrip { display: flex; gap: 0; border-bottom: 1px solid var(--border-color); padding: 0 24px; flex-shrink: 0; overflow-x: auto; scrollbar-width: none; }
.cf-tabstrip::-webkit-scrollbar { display: none; }
.cf-tab { padding: 10px 18px; border: none; background: none; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
    border-bottom: 3px solid transparent; color: var(--text-muted); margin-bottom: -1px; }
.cf-tab.is-active { border-bottom-color: var(--primary); color: var(--primary); }
.cf-body { flex: 1; overflow-y: auto; padding: 20px 24px; min-height: 0; }
.cf-intro { font-size: 12px; color: var(--text-muted); margin: 0 0 16px; }
.cf-section { margin-bottom: 24px; }
.cf-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.cf-sec-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.cf-sec-head .cf-label { margin-bottom: 0; }
.cf-input { width: 100%; min-height: 140px; padding: 10px 16px; border: 1px solid var(--border-color); border-radius: 14px; font-size: 13px; font-family: inherit;
    resize: none; box-sizing: border-box; background: var(--bg-primary); color: var(--text-primary); }
.cf-input:focus { outline: none; border-color: var(--primary); }
.cf-hint { font-size: 11px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.cf-model { position: relative; }
.cf-model-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border: 1px solid var(--border-color);
    border-radius: 9999px; font: inherit; font-size: 13px; background: var(--bg-primary); color: var(--text-primary); cursor: pointer; box-sizing: border-box; text-align: left; }
.cf-model-btn i { font-size: 11px; color: var(--text-muted); }
.cf-model-menu { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: 6px; max-height: 280px; overflow-y: auto; flex-direction: column; }
.cf-model-menu.open { display: flex; }
.cf-model-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 10px 12px 4px; }
.cf-model-group .cf-dead { font-weight: 400; text-transform: none; letter-spacing: 0; }
.cf-model-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: none; border-radius: 10px; background: none; font: inherit;
    font-size: 13px; color: var(--text-primary); cursor: pointer; text-align: left; }
.cf-model-item:hover { background: var(--bg-hover); }
.cf-model-item.is-active { font-weight: 600; background: rgba(41, 98, 255, 0.10); }
.cf-model-item.is-dead { opacity: 0.45; cursor: default; }
.cf-mark { display: inline-flex; width: 18px; justify-content: center; flex-shrink: 0; }
.cf-manage { padding: 4px 12px; border: 1px solid var(--border-color); border-radius: 9999px; background: var(--bg-primary); color: var(--text-secondary); font: inherit;
    font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.cf-manage:hover { background: var(--bg-hover); color: var(--text-primary); }
.cf-list { border: 1px solid var(--border-color); border-radius: 8px; padding: 0 12px; }
.cf-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; border-bottom: 1px solid var(--border-color); }
.cf-row:last-child { border-bottom: none; }
.cf-row > i { font-size: 16px; color: var(--text-muted); flex-shrink: 0; }
.cf-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cf-row-name { font-size: 13px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-row-name.mono { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; font-weight: 500; }
.cf-row-sub { font-size: 12px; color: var(--text-muted); }
.cf-row-meta { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.cf-empty { font-size: 12px; color: var(--text-muted); padding: 8px 0; }
.cf-foot { display: flex; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border-color); flex-shrink: 0; }
.cf-btn { flex: 1; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 9px 20px; border: 1px solid transparent;
    border-radius: 9999px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cf-btn.outline { background: var(--bg-primary); border-color: var(--border-color); color: var(--text-primary); }
.cf-btn.primary { background: var(--primary); color: #fff; }   /* dashboard blue in both themes (owner 2026-09-19) */
.cf-btn.primary:hover { filter: brightness(1.15); }
@media (max-width: 640px) { .cf-overlay { padding: 0; align-items: flex-end; } .cf-sheet { border-radius: 16px 16px 0 0; } .cf-frame { max-height: 92vh; }
    .cf-foot { flex-direction: column-reverse; } }

/* ── Settings › AI models: provider cards ── */
/* Settings › AI models — one card per engine (buildmidas' AI models page):
   vendor mark + name + status badge in the heading, then the API-key row
   (password input · Save · Delete) and the vendor's key page. Two columns on
   desktop, one on phones. Badges: green = usable (personal key or
   platform-provided), neutral = not connected. */
.sf-prov-help { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; background: var(--bg-tertiary); border-radius: 10px; padding: 10px 12px; margin: 12px 0 14px; }
.sf-provs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 0 8px; }
.sf-prov { background: var(--bg-tertiary); border-radius: 12px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sf-prov-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.sf-prov-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; }
.sf-prov-mark svg, .sf-prov-mark img { width: 22px; height: 22px; }
.sf-prov-name { flex: 0 1 auto; }
.sf-prov-badge { display: inline-block; padding: 3px 10px; border-radius: 9999px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; background: var(--bg-secondary); color: var(--text-secondary); margin-left: 0; }
.sf-prov-badge.ok { background: rgba(38,166,154,0.16); color: var(--success-light, #26a69a); }
.sf-prov-hint { text-transform: none; letter-spacing: 0; font-family: var(--font-mono, monospace); font-weight: 600; }
.sf-prov-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.sf-prov-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sf-prov-row input[type="password"] { flex: 1 1 200px; min-width: 0; height: 36px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); font: inherit; font-size: 0.9rem; outline: none; }
.sf-prov-row input[type="password"]:focus { border-color: var(--primary); }
.sf-prov-save { background: var(--primary); color: #fff; border: none; border-radius: 20px; height: 36px; padding: 0 20px; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background var(--transition-fast); }
.sf-prov-save:hover { background: var(--primary-dark); }
.sf-prov-save[disabled] { opacity: 0.55; cursor: default; }
.sf-prov-del { background: transparent; color: var(--danger-light, #ef5350); border: 1px solid rgba(239,83,80,0.45); border-radius: 20px; height: 36px; padding: 0 16px; font: inherit; font-size: 0.85rem; cursor: pointer; transition: background var(--transition-fast); }
.sf-prov-del:hover { background: rgba(239,83,80,0.12); }
.sf-prov-models { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-prov-chip { background: var(--bg-secondary); border-radius: 20px; padding: 2px 10px; font-size: 0.75rem; color: var(--text-secondary); }
.sf-prov-detail { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; }
.sf-prov-detail a { color: var(--primary); text-decoration: none; }
.sf-prov-detail a:hover { text-decoration: underline; }
.sf-prov-status { font-size: 0.78rem; color: var(--success-light, #26a69a); margin-top: 6px; }
.sf-prov-login { margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sf-prov-signin { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 20px; height: 36px; padding: 0 16px; font: inherit; font-size: 0.85rem; cursor: pointer; transition: background var(--transition-fast); }
.sf-prov-signin:hover { background: var(--bg-hover); }
.sf-prov-flow { margin-top: 8px; font-size: 0.8rem; line-height: 1.6; color: var(--text-secondary); background: var(--bg-secondary); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.sf-prov-flow[hidden] { display: none; }
.sf-prov-flow a { color: var(--primary); word-break: break-all; }
.sf-prov-code { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.sf-prov-code code { font-size: 1.15rem; letter-spacing: 2px; font-weight: 700; background: var(--bg-tertiary); border-radius: 8px; padding: 6px 14px; color: var(--text-primary); }
.sf-prov-mini { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 20px; height: 30px; padding: 0 12px; font: inherit; font-size: 0.8rem; cursor: pointer; }
.sf-prov-paste { margin-top: 4px; }
.sf-prov-paste input[type="text"] { flex: 1 1 180px; min-width: 0; height: 36px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-primary); font: inherit; font-size: 0.9rem; outline: none; }
.sf-prov-err { color: var(--danger-light, #ef5350); }
@media (max-width: 900px) { .sf-provs { grid-template-columns: 1fr; } }

/* ── Account chip: avatar only, a 36px circle like the globe beside it (2026-09-18).
   The earlier avatar rule had been appended INSIDE the phone media block, so on
   desktop the Google picture had no size and rendered at its native 96px square. ── */
#accountDropdown.is-avatar > button { width: 38px; height: 38px; padding: 0; border-radius: 50%; justify-content: center; gap: 0; overflow: hidden; }
#accountDropdown.is-avatar #accountLabel { display: none; }
#accountDropdown.is-avatar > button > i { font-size: 1.15rem; }
.acct-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: block; background: var(--bg-tertiary); }

/* ── Strategies: search on the left growing up to the right-aligned selectors (2026-09-18) ── */
body[data-page-id="strategies"] .st-controls { flex: 1 1 auto; min-width: 0; }
body[data-page-id="strategies"] .st-controls > #strategiesSearch { flex: 1 1 200px; min-width: 160px; width: auto; }
body[data-page-id="strategies"] .st-controls > .filter-combo:first-of-type { margin-left: auto; }
@media (max-width: 640px) { body[data-page-id="strategies"] .st-controls > .filter-combo:first-of-type { margin-left: 0; } }

/* Portfolio Allocation & Risk Contribution: one row per strategy, so a large
   portfolio ran the page long. The site's fixed-header table
   (.claude/rules/frontend.md): only the body scrolls, from the header's
   bottom line to the table's bottom; the same gutter on head and body keeps
   the columns aligned; the head alone paints the header colour, so the strip
   over the scrollbar reads as header; narrow screens pan the whole table. */
.pf-rc-scroll table { min-width: 560px; }
.pf-rc-scroll thead,
.pf-rc-scroll tbody { display: block; }
.pf-rc-scroll thead tr,
.pf-rc-scroll tbody tr { display: table; width: 100%; table-layout: fixed; }
.pf-rc-scroll thead { overflow-y: hidden; scrollbar-gutter: stable; background: var(--bg-tertiary); }
.pf-rc-scroll tbody { max-height: 420px; overflow-y: auto; scrollbar-gutter: stable; }
.pf-rc-scroll > table > thead > tr > th { background: transparent; white-space: nowrap; }
.pf-rc-scroll td:first-child { overflow-wrap: anywhere; }
.pf-rc-scroll :is(th, td):nth-child(2) { width: 150px; }
.pf-rc-scroll :is(th, td):nth-child(3) { width: 110px; }
.pf-rc-scroll :is(th, td):nth-child(4) { width: 190px; }

/* Owner controls of a paper/live trading strategy (js/execution-controls.js):
   the state pill and the pause / resume / stop / delete buttons. The buttons
   are .sd-ctl-btn pills; the state pills follow the 20px badge convention. */
.sf-exec-host { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sf-exec-host[hidden] { display: none; }
.sd-actions-row .sf-exec-host { align-items: flex-start; }
.sf-exec-group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.sf-exec-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.sf-exec-paused { background: rgba(243, 156, 18, 0.14); color: #f39c12; }
.sf-exec-stopping { background: rgba(41, 98, 255, 0.12); color: var(--primary); }
.sf-exec-failed { background: rgba(239, 68, 68, 0.14); color: #ef4444; }
.sf-exec-stopped { background: var(--bg-hover); color: var(--text-secondary); }
.sf-exec-note { max-width: 520px; font-size: 0.8rem; line-height: 1.45; color: var(--text-secondary); }
.sf-exec-error { color: #ef4444; }
.lr-exec-host { align-items: flex-start; margin: 0 0 16px; }
@media (max-width: 768px) {
    .sf-exec-host { align-items: stretch; }
    .sf-exec-group .sd-ctl-btn { flex: 1 1 auto; justify-content: center; }
}

/* ── Notification bell (layout.js header, 2026-10-04): a 38px circle like the
   account avatar beside it, unread badge on its corner, dropdown on the
   shared .lang-dropdown-menu surface. The inbox page reuses .notif-row. ── */
.notif-bell-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; border: none; border-radius: 50%;
    background: var(--bg-secondary); color: var(--text-secondary);
    font: inherit; cursor: pointer; transition: background var(--transition-fast);
}
.notif-bell-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.notif-bell-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.notif-bell-btn > i { font-size: 1.05rem; }
.notif-badge {
    position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
    box-shadow: 0 0 0 2px var(--bg-secondary); pointer-events: none;
}
.notif-badge[hidden] { display: none; }
.notif-menu { width: 360px; max-height: min(70vh, 560px); padding: 0; overflow-y: auto; }
.notif-menu-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 14px; font-weight: 600; color: var(--text-primary);
    position: sticky; top: 0; background: var(--bg-tertiary); z-index: 1;
}
.notif-link {
    border: none; background: none; padding: 0; color: var(--primary);
    font: inherit; font-size: 0.9rem; font-weight: 500; cursor: pointer;
}
.notif-link:hover { text-decoration: underline; }
.notif-list { padding: 0 4px; }
.notif-item, .notif-row {
    display: flex; gap: 10px; align-items: flex-start; padding: 10px;
    border-radius: 6px; color: var(--text-secondary); text-decoration: none;
}
.notif-item:hover, .notif-row:hover { background: var(--bg-hover); color: var(--text-primary); }
.notif-dot { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: transparent; }
:is(.notif-item, .notif-row).unread .notif-dot { background: var(--primary); }
.notif-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.notif-title { color: var(--text-primary); font-weight: 600; overflow-wrap: anywhere; }
:is(.notif-item, .notif-row):not(.unread) .notif-title { font-weight: 500; }
.notif-line { font-size: 0.9rem; line-height: 1.45; overflow-wrap: anywhere; }
.notif-time { font-size: 0.8rem; color: var(--text-muted); }
.notif-action {
    align-self: flex-start; padding: 1px 8px; border-radius: 20px;
    background: rgba(41, 98, 255, 0.14); color: var(--primary); font-size: 0.75rem; font-weight: 600;
}
.notif-empty { padding: 18px 14px; color: var(--text-muted); text-align: center; }
.notif-menu-foot {
    display: block; padding: 10px 14px; text-align: center; color: var(--primary);
    font-weight: 500; text-decoration: none; position: sticky; bottom: 0; background: var(--bg-tertiary);
}
.notif-menu-foot:hover { background: var(--bg-hover); }
[dir='rtl'] .notif-badge { right: auto; left: -4px; }
body.sf-public .notif-bell { display: none !important; }
@media (max-width: 768px) {
    /* the bell's menu hugs the viewport: a fixed panel under the header */
    .notif-menu { position: fixed; top: calc(var(--header-height, 60px) + 4px); left: 12px; right: 12px; width: auto; max-width: none; }
    [dir='rtl'] .notif-menu { left: 12px; right: 12px; }
}

/* Evidence stays complete while long tables and diagnostic rows scroll locally. */
.opt-evidence-scroll { max-height: min(560px, 65vh); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; border-radius: 12px; }
.opt-evidence-scroll:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.opt-evidence-scroll .ev-scope { flex-shrink: 0; }
#sdStatsBody .ev-scopes.opt-evidence-scroll { grid-auto-rows: max-content; }
.opt-evidence-plot { margin: 12px 0; padding: 12px; border: none; background: transparent; min-width: 0; }
.opt-evidence-plot svg { display: block; width: 100%; height: auto; max-height: 280px; overflow: visible; }
.opt-evidence-plot text { fill: var(--text-secondary); font-size: 12px; }
.opt-plot-grid { stroke: var(--border-color); stroke-width: 1; }
.opt-plot-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .75rem; color: var(--text-secondary); }
.opt-plot-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 6px; }

.ps-section .wf-table-scroll .stage-wf-table tbody { max-height: min(420px, 65vh); }

@media (max-width: 600px) { .opt-evidence-plot text { font-size: 22px; } }

/* Assistant data-job cards (chat.js _renderJobCard): chat page + Ask-AI dock. */
:is(body[data-page-id=chat], .ai-dock) .chat-job { align-items: flex-start; max-width: 100%; }
:is(body[data-page-id=chat], .ai-dock) .chat-job-body { min-width: 0; flex: 1; }
:is(body[data-page-id=chat], .ai-dock) :is(.chat-job-status, .chat-job-cost) { font-size: 0.8rem; color: var(--text-secondary); }
:is(body[data-page-id=chat], .ai-dock) .chat-job-result:empty { display: none; }
:is(body[data-page-id=chat], .ai-dock) .chat-job-result { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
:is(body[data-page-id=chat], .ai-dock) .chat-job-line { font-size: 0.84rem; }
:is(body[data-page-id=chat], .ai-dock) .chat-job-table-title { font-weight: 600; font-size: 0.82rem; margin-top: 6px; }
:is(body[data-page-id=chat], .ai-dock) .chat-job-meta { font-size: 0.78rem; color: var(--text-secondary); }
:is(body[data-page-id=chat], .ai-dock) .chat-job-start { align-self: flex-start; margin-top: 4px; }

/* ── Idea builder on the Ideas page (js/idea-builder.js, SF_IDEA_BUILDER) ──
   Additive only: the idea box above keeps its layout. Two-layer pattern of
   the hypotheses page: the outer card on --bg-secondary, tiles on --bg-tertiary. */
.ib-quick { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.ib-sessions { margin-bottom: 16px; }
.ib-session-list { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 12px; }
.ib-session {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: start;
    border: none; border-radius: 8px; padding: 10px 14px; cursor: pointer;
    background: var(--bg-tertiary); color: var(--text-primary); transition: background 0.15s ease;
}
.ib-session:hover, .ib-session.active { background: var(--bg-hover); }
.ib-session:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(41, 98, 255, 0.35); }
.ib-session-title { font-weight: 600; overflow-wrap: anywhere; }
.ib-status { font-size: 0.8rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.ib-phase-awaiting_answers, .ib-phase-awaiting_approval { color: var(--primary); }
.ib-phase-blocked, .ib-phase-failed { color: #ff9800; }
.ib-thread { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; }
.ib-thread-head { display: flex; align-items: center; gap: 8px; }
.ib-msg { padding: 8px 12px; border-radius: 12px; background: var(--bg-tertiary); white-space: pre-wrap; overflow-wrap: anywhere; }
.ib-msg.ib-user { background: rgba(41, 98, 255, 0.10); }
.ib-msg.ib-action { background: transparent; color: var(--text-secondary); padding: 2px 4px; font-size: 0.85rem; }
.ib-block, .ib-questions, .ib-card { padding: 12px 14px; border-radius: 8px; background: var(--bg-tertiary); }
.ib-block-title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.ib-checklist, .ib-prior, .ib-findings, .ib-blocking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ib-check, .ib-findings li { display: flex; gap: 8px; align-items: flex-start; overflow-wrap: anywhere; }
.ib-badge { flex-shrink: 0; padding: 1px 8px; border-radius: 20px; font-size: 0.72rem; font-weight: 600; background: var(--bg-hover); color: var(--text-secondary); }
.ib-check-ok .ib-badge, .ib-check-available .ib-badge { background: rgba(34, 197, 94, 0.14); color: #22c55e; }
.ib-check-collectable .ib-badge, .ib-check-scout .ib-badge, .ib-check-info .ib-badge { background: rgba(41, 98, 255, 0.14); color: var(--primary); }
.ib-check-warn .ib-badge, .ib-sev-should_fix .ib-badge { background: rgba(255, 152, 0, 0.16); color: #ff9800; }
.ib-check-unobtainable .ib-badge, .ib-sev-must_fix .ib-badge { background: rgba(239, 68, 68, 0.14); color: #ef4444; }
.ib-alt, .ib-muted { color: var(--text-muted); font-size: 0.82rem; }
.ib-q { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ib-q-text { font-weight: 600; }
.ib-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.ib-opt {
    border: none; border-radius: 20px; padding: 6px 14px; cursor: pointer; font-size: 0.85rem;
    background: var(--bg-hover); color: var(--text-secondary); transition: background 0.15s ease, color 0.15s ease;
}
.ib-opt.active { background: var(--primary); color: #fff; }
.ib-opt:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(41, 98, 255, 0.35); }
.ib-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ib-actions .ib-primary { background: var(--primary); color: #fff; }
.ib-revise { flex: 1 1 260px; min-width: 0; resize: vertical; }
.ib-card h4 { margin: 0 0 6px; font-size: 1rem; }
.ib-card > div { margin-top: 6px; }
.ib-desc { white-space: pre-wrap; overflow-wrap: anywhere; }
.ib-blocking li { color: #ff9800; }
.ib-critic.ib-not-reviewed { color: #ff9800; }
.ib-sources { font-size: 0.82rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.ib-ack { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; cursor: pointer; }
.ib-note { padding: 8px 12px; border-radius: 8px; font-size: 0.88rem; }
.ib-note.ib-ok { background: rgba(34, 197, 94, 0.10); color: #22c55e; }
.ib-note.ib-err { background: rgba(239, 68, 68, 0.10); color: #ef4444; }
/* SF_IDEA_BUILDER: the Ideas page's entry into the Strategy Builder. */
.ib-builder-cta { margin-bottom: 16px; }
.ib-builder-cta[hidden] { display: none; }
.ib-builder-cta-body { display: flex; align-items: center; gap: 16px; padding: 16px 20px; flex-wrap: wrap; }
.ib-builder-cta-text { flex: 1 1 320px; min-width: 0; }
.ib-builder-cta-text h3 { margin: 0 0 4px; font-size: 1rem; color: var(--text-primary); }
.ib-builder-cta-text h3 i { color: var(--primary); }
.ib-builder-cta-text p { margin: 0; color: var(--text-secondary); line-height: 1.55; }
.ib-builder-cta .ib-primary { background: var(--primary); color: #fff; text-decoration: none; }
@media (max-width: 768px) {
    .ib-session-list, .ib-thread { padding-left: 12px; padding-right: 12px; }
    .ib-actions .sd-ctl-btn { flex: 1 1 auto; justify-content: center; }
}