/* ============================================================================
   Analytical Agent report — shared styles.
   Used by the Tasks page (project.html) and the public report page
   (views/sharedAnalyticalReport.html → /report/:token, also the PDF source).
   Markup is produced by public/project/jsopen/analytical-report.js.

   Design: an EDITORIAL report, not a dashboard of boxes — no filled panels,
   hairline rules, small-caps figure labels, italic figure notes, accent-bar
   callouts, stat tiles separated by rules, plain report tables.
   Light palette first; `html[data-theme="black"]` overrides at the bottom
   (same specificity trick as theme-black.css); print rules last.
   ========================================================================== */

/* ── Panel chrome (Tasks page) ──────────────────────────────────────────── */
.analytical-panel {
    margin: 10px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.analytical-header {
    background: linear-gradient(135deg, #1a8fe3 0%, #0d6fc0 100%);
    color: #ffffff;
    padding: 12px 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.analytical-header-title { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; }
.analytical-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.an-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    transition: background 0.15s;
}
.an-action-btn:hover { background: rgba(255, 255, 255, 0.26); color: #ffffff; }
.an-action-btn:disabled { opacity: 0.7; cursor: default; }
.an-action-btn-dark { background: #1a8fe3; border-color: #1a8fe3; }
.an-action-btn-dark:hover { background: #0d6fc0; }
.an-action-btn-danger { background: #ffffff; border-color: #fecaca; color: #b91c1c; }
.an-action-btn-danger:hover { background: #fee2e2; color: #991b1b; }

.analytical-share-box {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 14px 16px;
    font-size: 13px;
    color: #1e293b;
}
.an-share-title { font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.an-share-hint { color: #64748b; margin-bottom: 10px; }
.an-share-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.an-share-input {
    flex: 1 1 320px;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
    color: #1e293b;
    font-size: 12px;
    font-family: monospace;
}
.an-share-loading, .an-share-error { display: flex; align-items: center; gap: 8px; }
.an-share-error { color: #b91c1c; }

.analytical-content { padding: 20px 24px 28px; }

.analytical-empty,
.analytical-no-data {
    text-align: center;
    padding: 18px;
    color: #94a3b8;
    border: 1px dashed #e2e8f0;
    border-radius: 8px;
    margin: 10px;
    font-size: 13px;
}
.analytical-no-data { margin: 8px 0; padding: 12px; }
.analytical-error {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-left: 3px solid #ef4444;
    color: #b91c1c;
    font-size: 13px;
}

/* Run metrics strip (Tasks page) */
.analytical-summary {
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    padding: 10px 0;
}
.summary-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}
.metric-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.metric-item i { color: #94a3b8; font-size: 14px; }
.metric-label { color: #64748b; }
.metric-value { font-weight: 700; color: #1e293b; }
.metric-value.analytical-status-ok { color: #059669; text-transform: capitalize; }
.metric-value.analytical-status-bad { color: #dc2626; text-transform: capitalize; }

/* Analysis steps (Tasks page, collapsed by default) */
.analytical-steps { margin-top: 26px; border-top: 1px solid #e2e8f0; padding-top: 14px; }
.iterations-container { margin-top: 10px; border: 1px solid #e2e8f0; border-radius: 6px; padding: 10px; }
.iterations-container.collapsed { display: none; }
.iteration-item { background: #f8fafc; border-radius: 6px; padding: 12px; margin-bottom: 10px; border: 1px solid #e2e8f0; }
.iteration-item:last-child { margin-bottom: 0; }
.iteration-header { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: 8px; color: #1a8fe3; }
.iteration-time { font-size: 12px; color: #94a3b8; font-weight: 400; }
.iteration-plan { color: #475569; font-size: 13px; line-height: 1.5; }
.iteration-sql-section { margin-top: 12px; padding: 10px 12px; background: #ffffff; border-radius: 6px; border-left: 3px solid #1a8fe3; }
.sql-section-header { font-weight: 600; color: #334155; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sql-query-purpose { color: #64748b; font-size: 13px; margin-bottom: 6px; }
.sql-result-summary, .sql-result-error { display: flex; align-items: center; gap: 6px; font-size: 12px; margin: 8px 0 0; padding: 6px 10px; border-radius: 4px; }
.sql-result-summary { color: #475569; background: #f1f5f9; }
.sql-result-error { color: #b91c1c; background: #fef2f2; }
.sql-result-preview { margin-top: 8px; overflow-x: auto; }
.sql-result-preview .result-table { font-size: 12px; margin: 0; }
.result-note { font-size: 11px; color: #94a3b8; margin-top: 6px; font-style: italic; }
.iteration-files { margin-top: 8px; font-size: 12px; color: #64748b; }

/* ── Report body ────────────────────────────────────────────────────────── */
.analytical-report-section {
    margin-top: 22px;
    color: #1f2937;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv11", "ss01";
}

.analytical-standalone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-left: 3px solid #1a8fe3;
    padding: 6px 0 6px 16px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #1e293b;
}
.analytical-standalone-text { display: flex; gap: 10px; align-items: flex-start; }
.analytical-standalone-text i { font-size: 18px; color: #1a8fe3; margin-top: 2px; }
.analytical-standalone code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.analytical-open-btn { background: #1a8fe3; color: #fff; border: none; }
.analytical-open-btn:hover { background: #0d6fc0; color: #fff; }

.report-title {
    color: #0f172a;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.015em;
    margin: 0 0 18px;
    line-height: 1.25;
}

/* Executive summary: a quiet neutral panel with a small-caps label */
.report-summary {
    background: #f8fafc;
    border: 1px solid #e6eaf0;
    border-left: 4px solid #0f172a;
    border-radius: 10px;
    padding: 18px 22px 20px;
    margin: 0 0 24px;
}
.report-summary::before {
    content: "Executive summary";
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 10px;
}
.analytical-panel .summary-content,
.analytical-report-section .summary-content {
    color: #1f2937;
    line-height: 1.75;
    font-size: 18px;
    white-space: normal;
}

/* Contents: a quiet index line */
.report-toc {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 18px;
    margin: 0 0 30px;
    padding: 0 0 14px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 14px;
}
.report-toc-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 6px;
}
.report-toc a { color: #1a8fe3; text-decoration: none; font-weight: 500; }
.report-toc a:hover { text-decoration: underline; }

/* Sections */
.report-section { margin: 0 0 36px; scroll-margin-top: 16px; }
.report-section .section-title {
    color: #0f172a;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 38px 0 14px;
    padding: 0;
    border: none;
}
.report-section .section-title::before {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: #1a8fe3;
    margin-bottom: 12px;
}
.report-section:first-of-type .section-title { margin-top: 0; }
.section-content {
    color: #1f2937;
    line-height: 1.75;
    font-size: 17px;
    margin-bottom: 16px;
}

/* Typography inside the AI-written HTML fragments */
.section-content p, .analytical-report-section .summary-content p, .conclusions-content p, .methodology-content p, .callout-text p { margin: 0 0 12px; }
.section-content p:last-child, .callout-text p:last-child, .conclusions-content p:last-child { margin-bottom: 0; }
.section-content ul, .section-content ol,
.analytical-report-section .summary-content ul, .analytical-report-section .summary-content ol,
.conclusions-content ul, .conclusions-content ol,
.methodology-content ul, .methodology-content ol,
.callout-text ul, .callout-text ol { margin: 8px 0 12px; padding-left: 24px; }
.section-content li, .analytical-report-section .summary-content li, .conclusions-content li, .methodology-content li, .callout-text li { margin: 5px 0; }
.section-content h1, .section-content h2, .section-content h3, .section-content h4, .section-content h5,
.analytical-report-section .summary-content h3, .analytical-report-section .summary-content h4,
.conclusions-content h3, .conclusions-content h4 { color: #0f172a; font-size: 18px; font-weight: 700; margin: 20px 0 8px; }
.section-content strong, .summary-content strong, .conclusions-content strong, .callout-text strong { color: #0f172a; font-weight: 700; }
.section-content em, .summary-content em { color: #475569; }
.section-content table, .analytical-report-section .summary-content table, .conclusions-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    margin: 12px 0 16px;
}
.section-content th, .analytical-report-section .summary-content th, .conclusions-content th {
    background: transparent;
    color: #0f172a;
    text-align: left;
    padding: 8px 10px;
    border: none;
    border-bottom: 2px solid #0f172a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.section-content td, .analytical-report-section .summary-content td, .conclusions-content td {
    padding: 8px 10px;
    border: none;
    border-bottom: 1px solid #e9eef5;
    color: #1f2937;
}
.section-content code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* Layout rows: 6-column grid the agent's block widths map onto */
.viz-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px 36px;
    margin-bottom: 8px;
    align-items: stretch;
}
.viz-row .visualization-container { margin-bottom: 0; min-width: 0; }
@media (max-width: 860px) {
    .viz-row > * { grid-column: 1 / -1 !important; }
    .an-viz-tools { position: static; margin: 0 0 10px; flex-wrap: wrap; opacity: 1; }
    .viz-title { padding-right: 0; }
    .an-grid-search { width: 100%; }
}

/* Figures: a soft white card — small-caps label, the visual, an italic note */
.visualization-container {
    background: #ffffff;
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    padding: 16px 20px 14px;
    margin: 18px 0 26px;
    position: relative;
    display: flex;
    flex-direction: column;
}
.visualization-container > .chart-canvas-container { flex: 1 1 auto; }
.viz-title {
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.viz-title::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: #1a8fe3; flex: 0 0 auto; }
.viz-description { color: #64748b; font-size: 14.5px; margin: -6px 0 10px; }

.chart-canvas-container {
    position: relative;
    height: 340px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 4px 0 6px;
}

/* Figure note (the agent's "insight"): a quiet strip at the foot of the card */
.viz-insight {
    margin: 12px -20px -14px;
    padding: 10px 20px 12px;
    border-top: 1px solid #eef2f7;
    border-radius: 0 0 12px 12px;
    background: #f8fafc;
    color: #475569;
    font-size: 15px;
    font-style: italic;
    line-height: 1.6;
    display: flex;
    gap: 9px;
    align-items: flex-start;
}
.viz-insight i { color: #1a8fe3; font-style: normal; margin-top: 4px; font-size: 12px; opacity: 0.8; }

/* Per-visualization tools: quiet until hovered */
.an-viz-tools {
    position: absolute;
    top: -4px;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0.45;
    transition: opacity 0.15s;
}
.visualization-container:hover .an-viz-tools { opacity: 1; }
.visualization-kpis .an-viz-tools { display: none; }
.an-chart-switch { display: inline-flex; border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; background: #ffffff; }
.an-chart-switch .an-tool-btn { border: none; border-radius: 0; border-right: 1px solid #e2e8f0; }
.an-chart-switch .an-tool-btn:last-child { border-right: none; }
.an-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
    line-height: 1.2;
}
.an-tool-btn:hover { color: #1a8fe3; background: #f1f5f9; }
.an-tool-btn.active { color: #ffffff; background: #1a8fe3; border-color: #1a8fe3; }
.an-grid-search { padding: 4px 9px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 12px; width: 170px; background: #ffffff; color: #334155; }

/* Report tables: inside the card — light header band, hairline rows */
.data-grid-scroller { overflow-x: auto; background: transparent; border: 1px solid #eef2f7; border-radius: 8px; }
.data-grid-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.data-grid-table thead th {
    position: sticky;
    top: 0;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}
.data-grid-table thead th.sortable { cursor: pointer; user-select: none; padding-right: 20px; }
.data-grid-table thead th.sortable::after { content: '\2195'; position: absolute; right: 7px; color: #cbd5e1; font-size: 11px; }
.data-grid-table thead th.sortable.sorted::after { content: '\2191'; color: #1a8fe3; }
.data-grid-table thead th.sortable.sorted.desc::after { content: '\2193'; }
.data-grid-table td { padding: 10px 14px; border-bottom: 1px solid #eef2f7; color: #1f2937; vertical-align: top; }
.data-grid-table tbody tr:last-child td { border-bottom: none; }
.data-grid-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-grid-table tbody tr:hover { background: #f8fafc; }

.chart-error, .diagram-error { text-align: center; padding: 30px; color: #ef4444; font-size: 13px; }
.chart-error i, .diagram-error i { font-size: 28px; margin-bottom: 8px; display: block; }
.chart-error small, .diagram-error small { display: block; color: #94a3b8; font-size: 12px; margin-top: 4px; }

.flow-diagram-container { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px 6px 0 0; height: 400px; width: 100%; }
.diagram-controls { display: flex; gap: 8px; padding: 8px 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-top: none; border-radius: 0 0 6px 6px; }
.diagram-control-btn { padding: 5px 10px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 4px; color: #64748b; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.diagram-control-btn:hover { background: #f1f5f9; color: #1a8fe3; }

/* Narrative blocks between / beside visuals: plain text, no card */
.visualization-text { background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0; margin: 0 0 6px; justify-content: center; }
.visualization-text .section-content { margin-bottom: 0; }

/* Callouts: a quiet neutral panel; the tone lives in the accent bar, icon and
   heading only (never a loud fill) */
.visualization-callout {
    flex-direction: row;
    gap: 12px;
    align-items: flex-start;
    background: #f8fafc;
    border: 1px solid #e6eaf0;
    border-left: 4px solid #1a8fe3;
    border-radius: 10px;
    box-shadow: none;
    padding: 14px 18px 14px 16px;
    margin: 20px 0 24px;
}
.visualization-callout .callout-icon { font-size: 14px; line-height: 1; margin-top: 3px; color: #1a8fe3; }
.visualization-callout .callout-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #1a8fe3;
    margin-bottom: 6px;
}
.visualization-callout .callout-text { color: #1f2937; font-size: 17px; line-height: 1.7; }
.visualization-callout.callout-success { border-left-color: #10b981; }
.visualization-callout.callout-success .callout-icon, .visualization-callout.callout-success .callout-title { color: #059669; }
.visualization-callout.callout-warning { border-left-color: #f59e0b; }
.visualization-callout.callout-warning .callout-icon, .visualization-callout.callout-warning .callout-title { color: #b45309; }
.visualization-callout.callout-danger { border-left-color: #ef4444; }
.visualization-callout.callout-danger .callout-icon, .visualization-callout.callout-danger .callout-title { color: #dc2626; }

/* Key numbers: soft stat cards with a short accent bar above the figure */
.visualization-kpis { background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0; }
.analytical-metric-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 14px;
    margin: 4px 0 8px;
}
.analytical-metric-card {
    --amc-accent: #1a8fe3;
    background: transparent;
    border: none;
    border-left: 1px solid #e6eaf0;
    border-radius: 0;
    box-shadow: none;
    padding: 4px 18px 6px;
    margin: 0;
}
.analytical-metric-card::before {
    content: "";
    display: block;
    width: 28px;
    height: 4px;
    border-radius: 2px;
    background: var(--amc-accent);
    margin-bottom: 12px;
}
.analytical-metric-card .amc-value {
    display: block;
    font-size: 31px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.analytical-metric-card .amc-value small { font-size: 12px; color: #64748b; font-weight: 500; }
.analytical-metric-card .amc-label { font-size: 12px; font-weight: 700; color: #64748b; margin-top: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.analytical-metric-card .amc-trend { font-size: 14px; font-weight: 600; margin-top: 6px; display: inline-flex; align-items: center; gap: 5px; }
.analytical-metric-card .amc-trend-up { color: #059669; }
.analytical-metric-card .amc-trend-down { color: #dc2626; }
.analytical-metric-card .amc-trend-flat { color: #64748b; }
.analytical-metric-card .amc-desc { font-size: 14px; color: #64748b; margin-top: 6px; line-height: 1.5; }

/* Conclusions: a closing panel */
.report-conclusions {
    background: #f8fafc;
    border: 1px solid #e6eaf0;
    border-left: 4px solid #10b981;
    border-radius: 10px;
    padding: 20px 24px 22px;
    margin-top: 34px;
    scroll-margin-top: 16px;
}
.report-conclusions h4 {
    color: #0f172a;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.report-conclusions h4 i { color: #10b981; font-size: 18px; }
.conclusions-content { color: #1f2937; line-height: 1.75; font-size: 17px; }
.conclusions-content ol > li { padding-left: 4px; }

.report-methodology { margin-top: 24px; padding-top: 12px; border-top: 1px solid #e2e8f0; font-size: 14.5px; color: #64748b; }
.report-methodology summary { cursor: pointer; font-weight: 700; color: #64748b; display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.report-methodology .methodology-content { padding: 10px 0 0 22px; line-height: 1.6; }

/* ── Dark theme ─────────────────────────────────────────────────────────── */
html[data-theme="black"] .analytical-panel { background: #111a26 !important; border-color: #2a3b50 !important; color: #e6ecf4; }
html[data-theme="black"] .analytical-share-box { background: #0d141e !important; border-color: #2a3b50 !important; color: #e6ecf4 !important; }
html[data-theme="black"] .an-share-hint { color: #8a97a8 !important; }
html[data-theme="black"] .an-share-input { background: #16202e !important; border-color: #2a3b50 !important; color: #e6ecf4 !important; }
html[data-theme="black"] .an-action-btn-danger { background: #1d2c3e !important; border-color: rgba(248, 113, 113, 0.4) !important; color: #f87171 !important; }
html[data-theme="black"] .analytical-summary,
html[data-theme="black"] .analytical-steps,
html[data-theme="black"] .report-toc,
html[data-theme="black"] .report-methodology,
html[data-theme="black"] .chart-canvas-container { border-color: #2a3b50 !important; }
/* Cards / panels → elevated dark surfaces */
html[data-theme="black"] .visualization-container:not(.visualization-text):not(.visualization-kpis),
html[data-theme="black"] .analytical-metric-card { background: transparent !important; border-color: #2a3b50 !important; box-shadow: none !important; }
html[data-theme="black"] .report-summary,
html[data-theme="black"] .visualization-callout,
html[data-theme="black"] .report-conclusions,
html[data-theme="black"] .viz-insight,
html[data-theme="black"] .data-grid-table thead th { background: #0d141e !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .report-summary { border-left-color: #e6ecf4 !important; }
html[data-theme="black"] .report-conclusions { border-left-color: #34d399 !important; }
html[data-theme="black"] .data-grid-scroller { border-color: #2a3b50 !important; }
html[data-theme="black"] .iteration-item,
html[data-theme="black"] .analytical-empty,
html[data-theme="black"] .analytical-no-data { background: #1d2c3e !important; border-color: #2a3b50 !important; color: #c3ccd9 !important; }
html[data-theme="black"] .iterations-container,
html[data-theme="black"] .iteration-sql-section,
html[data-theme="black"] .flow-diagram-container,
html[data-theme="black"] .an-tool-btn,
html[data-theme="black"] .an-chart-switch,
html[data-theme="black"] .an-grid-search { background: #0d141e !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .an-tool-btn { color: #c3ccd9 !important; }
html[data-theme="black"] .an-tool-btn:hover { color: #6fc0ff !important; background: #16202e !important; }
html[data-theme="black"] .an-tool-btn.active { color: #ffffff !important; background: #1a8fe3 !important; }
html[data-theme="black"] .an-grid-search { color: #e6ecf4 !important; }
html[data-theme="black"] .report-toc a { color: #6fc0ff !important; }
html[data-theme="black"] .analytical-report-section,
html[data-theme="black"] .metric-value,
html[data-theme="black"] .report-title,
html[data-theme="black"] .report-section .section-title,
html[data-theme="black"] .viz-title,
html[data-theme="black"] .sql-section-header,
html[data-theme="black"] .analytical-metric-card .amc-value,
html[data-theme="black"] .section-content, html[data-theme="black"] .section-content strong,
html[data-theme="black"] .analytical-report-section .summary-content, html[data-theme="black"] .summary-content strong,
html[data-theme="black"] .conclusions-content, html[data-theme="black"] .conclusions-content strong,
html[data-theme="black"] .callout-text, html[data-theme="black"] .callout-text strong,
html[data-theme="black"] .section-content h1, html[data-theme="black"] .section-content h2,
html[data-theme="black"] .section-content h3, html[data-theme="black"] .section-content h4,
html[data-theme="black"] .analytical-report-section .summary-content h3, html[data-theme="black"] .analytical-report-section .summary-content h4,
html[data-theme="black"] .conclusions-content h3, html[data-theme="black"] .conclusions-content h4,
html[data-theme="black"] .report-conclusions h4,
html[data-theme="black"] .data-grid-table td,
html[data-theme="black"] .section-content td,
html[data-theme="black"] .analytical-report-section .summary-content td,
html[data-theme="black"] .conclusions-content td { color: #e6ecf4 !important; }
html[data-theme="black"] .metric-label,
html[data-theme="black"] .iteration-plan,
html[data-theme="black"] .methodology-content,
html[data-theme="black"] .report-methodology summary,
html[data-theme="black"] .report-toc-label,
html[data-theme="black"] .report-summary::before,
html[data-theme="black"] .sql-query-purpose,
html[data-theme="black"] .viz-description,
html[data-theme="black"] .viz-insight,
html[data-theme="black"] .iteration-files,
html[data-theme="black"] .section-content em, html[data-theme="black"] .summary-content em,
html[data-theme="black"] .analytical-metric-card .amc-label,
html[data-theme="black"] .analytical-metric-card .amc-desc { color: #a9b4c4 !important; }
html[data-theme="black"] .viz-insight { border-left-color: #3b4d64 !important; }
html[data-theme="black"] .viz-insight i { color: #6b7a8d !important; }
html[data-theme="black"] .metric-value.analytical-status-ok { color: #34d399 !important; }
html[data-theme="black"] .metric-value.analytical-status-bad { color: #f87171 !important; }
html[data-theme="black"] .analytical-standalone { border-color: #6fc0ff !important; color: #e6ecf4 !important; }
html[data-theme="black"] .analytical-standalone code { background: #1d2c3e !important; color: #e6ecf4 !important; }
html[data-theme="black"] .data-grid-table thead th,
html[data-theme="black"] .section-content th,
html[data-theme="black"] .analytical-report-section .summary-content th,
html[data-theme="black"] .conclusions-content th { background: transparent !important; border-bottom-color: #e6ecf4 !important; color: #e6ecf4 !important; }
html[data-theme="black"] .data-grid-table thead th { background: #0d141e !important; }
html[data-theme="black"] .data-grid-table td,
html[data-theme="black"] .section-content td,
html[data-theme="black"] .analytical-report-section .summary-content td,
html[data-theme="black"] .conclusions-content td { border-bottom-color: #2a3b50 !important; }
html[data-theme="black"] .data-grid-table tbody tr:hover { background: #16202e !important; }
html[data-theme="black"] .sql-result-summary { background: #16202e !important; color: #c3ccd9 !important; }
html[data-theme="black"] .sql-result-error { background: rgba(248, 113, 113, 0.15) !important; color: #f87171 !important; }
html[data-theme="black"] .diagram-controls { background: #1d2c3e !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .diagram-control-btn { background: #16202e !important; border-color: #2a3b50 !important; color: #c3ccd9 !important; }
html[data-theme="black"] .section-content code { background: #16202e !important; color: #e6ecf4 !important; }
html[data-theme="black"] .analytical-error { color: #f87171 !important; }
html[data-theme="black"] .visualization-callout.callout-warning .callout-title, html[data-theme="black"] .visualization-callout.callout-warning .callout-icon { color: #fbbf24 !important; }
html[data-theme="black"] .visualization-callout.callout-danger .callout-title, html[data-theme="black"] .visualization-callout.callout-danger .callout-icon { color: #f87171 !important; }
html[data-theme="black"] .visualization-callout.callout-success .callout-title, html[data-theme="black"] .visualization-callout.callout-success .callout-icon { color: #34d399 !important; }
html[data-theme="black"] .visualization-callout .callout-title, html[data-theme="black"] .visualization-callout .callout-icon { color: #6fc0ff; }

/* ── Print / PDF (A4 landscape — wide charts and tables fit the page) ──── */
@page { size: A4 landscape; margin: 12mm 12mm 14mm; }
@media print {
    html, body { width: auto; }
    .analytical-report-section { font-size: 13.5px; line-height: 1.6; }
    .report-title { font-size: 22px; }
    .report-summary { padding: 12px 0 14px; margin-bottom: 16px; }
    .analytical-report-section .summary-content { font-size: 13px; }
    .report-section { margin-bottom: 22px; }
    .report-section .section-title { font-size: 17px; margin: 22px 0 10px; }
    .section-content, .conclusions-content, .visualization-callout .callout-text { font-size: 13.5px; }
    .visualization-container { margin: 12px 0 18px; }
    .viz-title { font-size: 11px; margin-bottom: 8px; }
    .viz-insight { font-size: 11.5px; }
    .analytical-metric-card { padding: 10px 14px 10px 0; margin-right: 14px; }
    .analytical-metric-card .amc-value { font-size: 22px; }
    .analytical-metric-card .amc-label, .analytical-metric-card .amc-trend, .analytical-metric-card .amc-desc { font-size: 10.5px; }
    .analytical-actions, .analytical-share-box, .an-viz-tools, .diagram-controls,
    .analytical-steps, .report-toc { display: none !important; }
    .analytical-panel { margin: 0; border: none; box-shadow: none; }
    .analytical-content { padding: 0; }
    .analytical-header { background: #1a8fe3 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .visualization-container, .analytical-metric-cards, .report-conclusions, .report-summary, .visualization-callout { break-inside: avoid; page-break-inside: avoid; }
    /* Long tables may split across pages (else a block jumps to the next page
       and leaves half a page empty). */
    .visualization-container:has(.data-grid-table), .viz-row, .data-grid-scroller { break-inside: auto; page-break-inside: auto; }
    .data-grid-table tr { break-inside: avoid; page-break-inside: avoid; }
    .report-section { break-inside: auto; }
    .report-section .section-title { break-after: avoid; page-break-after: avoid; }
    .viz-row { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 12px 24px; }
    .data-grid-scroller { overflow: visible; }
    .data-grid-table { font-size: 11px; }
    .data-grid-table thead th { position: static; white-space: normal; }
    .data-grid-table thead th.sortable::after { content: none; }
    /* Landscape pages are short (~700px printable): keep figures compact so
       a narrative block + figure, or two figures, share a page. */
    .chart-canvas-container { height: 225px; padding: 2px 0 8px; }
    .flow-diagram-container { height: 300px; border-radius: 6px; }
    .visualization-container { margin: 8px 0 12px; }
    .viz-insight { margin-top: 6px; }
    .report-section .section-title::before { margin-bottom: 8px; }
    .analytical-metric-cards { margin: 2px 0 6px; }
    .viz-title { padding-right: 0; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}


/* ── Creative blocks (Oct 22 2026): pull quote, ranked list, comparison, timeline ── */
.visualization-quote {
    background: transparent; border: none; box-shadow: none; border-radius: 0;
    border-left: 4px solid #1a8fe3;
    padding: 6px 0 6px 22px; margin: 22px 0 26px;
    justify-content: center;
}
.visualization-quote .pq-figure {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
    font-size: 44px; font-weight: 800; color: #0f172a; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
.visualization-quote .pq-label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #64748b; }
.visualization-quote .pq-text { font-size: 22px; line-height: 1.45; font-weight: 500; color: #1f2937; letter-spacing: -0.01em; }
.visualization-quote .pq-text p { margin: 0 0 8px; }
.visualization-quote .pq-text p:last-child { margin-bottom: 0; }
.visualization-quote .pq-source { margin-top: 10px; font-size: 13px; color: #64748b; font-style: italic; }

.ranked-list { list-style: none; margin: 4px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ranked-item { display: flex; gap: 14px; align-items: flex-start; --rk-accent: #1a8fe3; }
.ranked-item .rk-rank { flex: 0 0 26px; height: 26px; border-radius: 50%; background: #f1f5f9; color: #475569; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; font-variant-numeric: tabular-nums; }
.ranked-item .rk-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ranked-item .rk-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.ranked-item .rk-label { font-size: 15.5px; font-weight: 600; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranked-item .rk-value { font-size: 15px; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ranked-item .rk-bar { display: block; height: 8px; border-radius: 4px; background: #f1f5f9; overflow: hidden; }
.ranked-item .rk-fill { display: block; height: 100%; border-radius: 4px; background: var(--rk-accent); }
.ranked-item .rk-note { font-size: 13px; color: #64748b; }

.compare-table { display: flex; flex-direction: column; margin: 2px 0 4px; }
.compare-row { display: grid; grid-template-columns: minmax(110px, 1.4fr) repeat(var(--cmp-cols, 2), minmax(0, 1fr)) 92px; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid #eef2f7; }
.compare-row:last-child { border-bottom: none; }
.compare-row.compare-head { border-bottom: 2px solid #0f172a; padding: 4px 0 8px; }
.compare-row .cmp-label { font-size: 15.5px; font-weight: 600; color: #0f172a; }
.compare-row .cmp-col { font-size: 18px; font-weight: 600; color: #1f2937; font-variant-numeric: tabular-nums; text-align: right; }
.compare-head .cmp-col { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #64748b; }
.compare-row .cmp-change { text-align: right; }
.cmp-chip { display: inline-block; font-size: 13px; font-weight: 700; padding: 3px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-up { background: #ecfdf5; color: #059669; }
.cmp-down { background: #fef2f2; color: #dc2626; }
.cmp-flat { background: #f1f5f9; color: #64748b; }

.report-timeline { list-style: none; margin: 4px 0 0; padding: 0 0 0 4px; position: relative; }
.report-timeline::before { content: ""; position: absolute; left: 115px; top: 8px; bottom: 10px; width: 2px; background: #e6eaf0; }
.tl-item { display: grid; grid-template-columns: 96px 1fr; gap: 30px; padding: 0 0 22px; position: relative; --tl-accent: #1a8fe3; }
.tl-item:last-child { padding-bottom: 4px; }
.tl-item::before { content: ""; position: absolute; left: 109px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--tl-accent); box-shadow: 0 0 0 3px #ffffff; }
.tl-item .tl-date { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #64748b; padding-top: 3px; text-align: right; }
.tl-item .tl-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tl-item .tl-title { font-size: 16.5px; font-weight: 700; color: #0f172a; }
.tl-item .tl-text { font-size: 15.5px; color: #334155; line-height: 1.6; }
.tl-item .tl-text p { margin: 0 0 6px; }
.tl-item .tl-text p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
    .visualization-quote .pq-figure { font-size: 34px; }
    .visualization-quote .pq-text { font-size: 19px; }
    .compare-row { grid-template-columns: minmax(80px, 1.2fr) repeat(var(--cmp-cols, 2), minmax(0, 1fr)) 70px; gap: 8px; }
    .compare-row .cmp-col { font-size: 15px; }
    .compare-row .cmp-label { font-size: 14px; }
    .cmp-chip { font-size: 12px; padding: 2px 7px; }
    .report-timeline::before { left: 85px; }
    .tl-item { grid-template-columns: 66px 1fr; gap: 30px; }
    .tl-item::before { left: 79px; }
    .tl-item .tl-date { font-size: 11px; }
}

html[data-theme="black"] .visualization-quote { background: transparent !important; border-left-color: #3b9eea !important; }
html[data-theme="black"] .visualization-quote .pq-figure, html[data-theme="black"] .visualization-quote .pq-text, html[data-theme="black"] .visualization-quote .pq-text strong,
html[data-theme="black"] .ranked-item .rk-label, html[data-theme="black"] .ranked-item .rk-value,
html[data-theme="black"] .compare-row .cmp-label, html[data-theme="black"] .compare-row .cmp-col,
html[data-theme="black"] .tl-item .tl-title { color: #e6ecf4 !important; }
html[data-theme="black"] .visualization-quote .pq-label, html[data-theme="black"] .visualization-quote .pq-source,
html[data-theme="black"] .ranked-item .rk-note, html[data-theme="black"] .compare-head .cmp-col,
html[data-theme="black"] .tl-item .tl-date, html[data-theme="black"] .tl-item .tl-text { color: #a9b4c4 !important; }
html[data-theme="black"] .ranked-item .rk-rank, html[data-theme="black"] .ranked-item .rk-bar { background: #223042 !important; color: #a9b4c4 !important; }
html[data-theme="black"] .compare-row { border-bottom-color: #2a3b50 !important; }
html[data-theme="black"] .compare-row.compare-head { border-bottom-color: #4b5d75 !important; }
html[data-theme="black"] .cmp-up { background: rgba(16, 185, 129, 0.16) !important; color: #34d399 !important; }
html[data-theme="black"] .cmp-down { background: rgba(239, 68, 68, 0.16) !important; color: #f87171 !important; }
html[data-theme="black"] .cmp-flat { background: #223042 !important; color: #a9b4c4 !important; }
html[data-theme="black"] .report-timeline::before { background: #2a3b50 !important; }
html[data-theme="black"] .tl-item::before { box-shadow: 0 0 0 3px #16202e !important; }

@media print {
    .visualization-quote { margin: 12px 0 16px; padding-left: 16px; }
    .visualization-quote .pq-figure { font-size: 30px; }
    .visualization-quote .pq-text { font-size: 16px; }
    .ranked-list { gap: 7px; }
    .ranked-item .rk-label, .ranked-item .rk-value { font-size: 12.5px; }
    .ranked-item .rk-note { font-size: 11px; }
    .compare-row { padding: 7px 0; }
    .compare-row .cmp-col { font-size: 14px; }
    .compare-row .cmp-label { font-size: 12.5px; }
    .cmp-chip { font-size: 11px; }
    .tl-item { padding-bottom: 12px; }
    .tl-item .tl-title { font-size: 13.5px; }
    .tl-item .tl-text { font-size: 12.5px; }
    .visualization-quote, .ranked-item, .compare-row, .tl-item { break-inside: avoid; page-break-inside: avoid; }
}


/* ── Rich blocks (Oct 22 2026): gauge, funnel, heatmap, waterfall, trend list ── */
.visualization-gauge { align-items: stretch; }
.gauge-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 20px; justify-items: center; }
.gauge { width: 100%; max-width: 260px; text-align: center; }
.gauge-canvas { position: relative; height: 128px; width: 100%; }
.gauge-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #64748b; margin-top: 2px; }
.gauge-target { font-size: 13px; color: #94a3b8; margin-top: 3px; font-variant-numeric: tabular-nums; }

.funnel { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 2px; }
.funnel-stage { display: grid; grid-template-columns: minmax(120px, 170px) 1fr 90px minmax(150px, 230px); gap: 14px; align-items: center; --fn-accent: #1a8fe3; }
.funnel-stage .fn-label { font-size: 15px; font-weight: 600; color: #0f172a; }
.funnel-stage .fn-track { display: flex; justify-content: center; height: 30px; background: #f8fafc; border-radius: 6px; }
.funnel-stage .fn-fill { display: block; height: 100%; border-radius: 6px; background: var(--fn-accent); opacity: 0.9; }
.funnel-stage .fn-value { font-size: 16px; font-weight: 700; color: #0f172a; text-align: right; font-variant-numeric: tabular-nums; }
.funnel-stage .fn-meta { font-size: 13px; color: #64748b; }
.funnel-stage .fn-meta em { font-style: normal; color: #b45309; }

.heatmap-scroller { overflow-x: auto; }
.heatmap { display: grid; grid-template-columns: minmax(70px, max-content) repeat(var(--hm-cols, 7), minmax(44px, 1fr)); gap: 4px; align-items: stretch; min-width: 100%; }
.heatmap .hm-corner { }
.heatmap .hm-col, .heatmap .hm-row { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; display: flex; align-items: center; }
.heatmap .hm-col { justify-content: center; text-align: center; padding: 0 2px 4px; }
.heatmap .hm-row { justify-content: flex-end; padding-right: 10px; text-align: right; }
.heatmap .hm-cell { height: 38px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; color: #1f2937; font-variant-numeric: tabular-nums; }
.heatmap .hm-cell.hm-strong { color: #ffffff; }
.heatmap-dense .hm-cell { height: 30px; font-size: 11px; }
.hm-legend { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: #64748b; font-variant-numeric: tabular-nums; }
.hm-legend-bar { flex: 0 0 140px; height: 8px; border-radius: 4px; }

.trend-list { display: flex; flex-direction: column; margin: 2px 0 4px; }
.trend-row { display: grid; grid-template-columns: minmax(120px, 1.4fr) 170px minmax(80px, 0.8fr) 86px; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid #eef2f7; }
.trend-row:last-child { border-bottom: none; }
.trend-row .tr-label { font-size: 15px; font-weight: 600; color: #0f172a; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trend-row .tr-note { font-size: 12.5px; font-weight: 400; color: #64748b; }
.trend-row .tr-spark { display: block; height: 36px; }
.trend-row .tr-spark svg { width: 100%; height: 36px; display: block; }
.trend-row .tr-value { font-size: 15.5px; font-weight: 700; color: #0f172a; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.trend-row .tr-change { text-align: right; }

@media (max-width: 640px) {
    .funnel-stage { grid-template-columns: 90px 1fr 64px; }
    .funnel-stage .fn-meta { grid-column: 2 / span 2; font-size: 12px; margin-top: -4px; }
    .funnel-stage .fn-label { font-size: 13px; }
    .trend-row { grid-template-columns: minmax(80px, 1fr) 100px 70px 64px; gap: 8px; }
    .trend-row .tr-label { font-size: 13.5px; }
    .trend-row .tr-value { font-size: 13.5px; }
    .heatmap .hm-cell { height: 30px; font-size: 11px; }
    .gauge-canvas { height: 110px; }
}

html[data-theme="black"] .gauge-label, html[data-theme="black"] .funnel-stage .fn-meta, html[data-theme="black"] .heatmap .hm-col, html[data-theme="black"] .heatmap .hm-row,
html[data-theme="black"] .hm-legend, html[data-theme="black"] .trend-row .tr-note { color: #a9b4c4 !important; }
html[data-theme="black"] .gauge-target { color: #7f8ca0 !important; }
html[data-theme="black"] .funnel-stage .fn-label, html[data-theme="black"] .funnel-stage .fn-value, html[data-theme="black"] .trend-row .tr-label, html[data-theme="black"] .trend-row .tr-value,
html[data-theme="black"] .heatmap .hm-cell { color: #e6ecf4 !important; }
html[data-theme="black"] .funnel-stage .fn-track { background: #223042 !important; }
html[data-theme="black"] .funnel-stage .fn-meta em { color: #fbbf24 !important; }
html[data-theme="black"] .trend-row { border-bottom-color: #2a3b50 !important; }

@media print {
    .gauge-canvas { height: 100px; }
    .funnel { gap: 6px; }
    .funnel-stage .fn-track { height: 22px; }
    .funnel-stage .fn-label, .funnel-stage .fn-value { font-size: 12.5px; }
    .funnel-stage .fn-meta { font-size: 11px; }
    .heatmap .hm-cell { height: 26px; font-size: 10.5px; }
    .heatmap .hm-col, .heatmap .hm-row { font-size: 10px; }
    .trend-row { padding: 5px 0; }
    .trend-row .tr-label, .trend-row .tr-value { font-size: 12.5px; }
    .trend-row .tr-spark, .trend-row .tr-spark svg { height: 26px; }
    .gauge-row, .funnel-stage, .trend-row, .heatmap { break-inside: avoid; page-break-inside: avoid; }
    .analytical-metric-card { padding: 4px 12px 4px; }
}