/**
 * charts.css — Edition B (ECharts) data-display styles:
 * meta tags, KPI strip, chart containers, result table.
 * Copied from docs/Implemtation_docs/v2_ui_mockup.html,
 * class names converted to snake_case (per 05_frontend_intern_plan.md).
 */

/* ── Meta tags (answer header) ──────────────────────────────────── */
.tag {
  font-size: 10px; padding: 2px 8px; border-radius: 11px;
  background: var(--chip); color: var(--text-dim); font-weight: 500;
}
.tag.engine_det { background: rgba(52, 211, 153, 0.15); color: var(--good); }
.tag.engine_pred { background: rgba(91, 141, 239, 0.15); color: var(--accent); }
.tag.engine_strat { background: rgba(251, 191, 36, 0.15); color: var(--warn); }
.tag.confidence { background: rgba(124, 92, 255, 0.15); color: var(--accent-2); }
.tag.persona { background: var(--panel-2); }

/* ── KPI workspace strip ────────────────────────────────────────────
   Single-row on desktop, responsive below.

   The strip carries up to 5 cards (see derive_kpi_cards, capped at 5). On a
   normal desktop centre column they must stay on ONE row and never wrap.
   `--kpi-count` is set inline per render (render.js) to the actual card count,
   so the grid lays out exactly that many equal columns — one clean row that
   fills the width regardless of count (3, 4, or 5).

   Below the desktop breakpoint we fall back to auto-fit so cards reflow
   gracefully on smaller screens (tablets/phones) rather than shrinking to
   unreadable slivers. */
/* Always one clean row of `--kpi-count` equal columns (4, 5, or 6).
   minmax(0,1fr) lets each track shrink below its content so no card is
   forced wider than its share — combined with single-line value scaling
   (below) this keeps 4/5/6 cards on one row without horizontal scroll. */
.kpi_strip {
  display: grid;
  grid-template-columns: repeat(var(--kpi-count, 5), minmax(0, 1fr));
  gap: 8px;
}
/* Tablet / narrow: only here do we allow reflow to multiple rows. */
@media (max-width: 900px) {
  .kpi_strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
/* Phone: two per row. */
@media (max-width: 520px) { .kpi_strip { grid-template-columns: repeat(2, 1fr); } }
.kpi_card {
  background: var(--kpi-bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 11px 10px 13px;  /* extra left for the 4px bar */
  position: relative; overflow: hidden;
  min-width: 0;   /* allow the card to shrink within its grid track */
}
/* Stronger left accent bar (4px) — the primary category cue. */
.kpi_card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--kpi-accent, var(--accent)), var(--kpi-accent-2, var(--accent-2)));
  opacity: 0.95;
}
/* Thin top accent strip that shares the same colour — the left bar + top strip
   together read as an "L" bracket around the card corner (Power BI / Bloomberg
   executive feel) without a full bright border or glow. */
.kpi_card::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--kpi-accent, var(--accent)), transparent 85%);
  opacity: 0.7;
}

/* ── KPI card category accents ──────────────────────────────────────
   Subtle per-category differentiation so an executive can identify a KPI
   at a glance. Each variant sets only:
     • a colored left strip (via --kpi-accent / --kpi-accent-2), and
     • a faint tint at the strip edge (radial glow) — nothing loud.
   Enterprise accent tones only; the dark theme + readability are preserved.
     Brighter, more distinct accent per category — vibrant but not neon:
     Market Share → pink/violet · MAT Value → royal blue · Rank → golden yellow
     Therapy/Growth → emerald · Brands → cyan/aqua · Confidence → violet */
.kpi_card[data-kpi="share"]      { --kpi-accent: #c084fc; --kpi-accent-2: #a855f7; }
.kpi_card[data-kpi="value"]      { --kpi-accent: #4f7cff; --kpi-accent-2: #3b5fe0; }
.kpi_card[data-kpi="rank"]       { --kpi-accent: #fbbf24; --kpi-accent-2: #d99a12; }
.kpi_card[data-kpi="therapy"]    { --kpi-accent: #34d399; --kpi-accent-2: #10a678; }
.kpi_card[data-kpi="brands"]     { --kpi-accent: #22d3ee; --kpi-accent-2: #0ea5c4; }
.kpi_card[data-kpi="confidence"] { --kpi-accent: #a855f7; --kpi-accent-2: #7c5cff; }
/* Faint category-tinted wash from the accent edge — very low alpha so it
   reads as a subtle hint, never a colored panel. */
.kpi_card[data-kpi] {
  background:
    radial-gradient(120% 100% at 0% 0%,
      color-mix(in srgb, var(--kpi-accent, var(--accent)) 10%, transparent) 0%,
      transparent 55%),
    var(--kpi-bg);
  border-color: color-mix(in srgb, var(--kpi-accent, var(--border)) 22%, var(--border));
}
.kpi_label {
  font-size: 9.5px; color: var(--text-mute); text-transform: uppercase;
  letter-spacing: 0.05em; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* KPI value must ALWAYS stay on one line with the unit attached. Fluid
   font size (clamp, scaled to card width via cqw where supported) shrinks
   the number to fit instead of wrapping; nowrap is the hard guarantee. */
.kpi_value {
  font-size: clamp(14px, 1.15vw + 6px, 19px);
  font-weight: 700; margin: 3px 0; color: var(--text); line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── KPI color hierarchy (categorised cards only) ────────────────────
   Label  → a MUTED version of the accent (accent blended toward grey) so it
            hints at the category without shouting.
   Value  → the category accent colour, so the number is instantly associated
            with its card. Kept to the brighter accent endpoint, which stays
            readable on the dark navy panel (no neon).
   Subtitle → soft grey metadata (unchanged).
   Non-categorised cards (no data-kpi) keep the neutral white value + muted
   label via the CSS-variable fallbacks. */
.kpi_card[data-kpi] .kpi_label {
  color: color-mix(in srgb, var(--kpi-accent, var(--text-mute)) 55%, var(--text-mute));
}
.kpi_card[data-kpi] .kpi_value {
  color: var(--kpi-accent, var(--text));
}
/* Gold on dark is the one accent that reads a touch hot as a big number — nudge
   the value toward its slightly deeper endpoint for comfortable contrast. */
.kpi_card[data-kpi="rank"] .kpi_value { color: #f0b429; }
.kpi_card[data-kpi] .kpi_sub { color: var(--text-mute); }
.kpi_delta { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.kpi_delta.up { color: var(--good); }
.kpi_delta.down { color: var(--bad); }
.kpi_delta.neutral { color: var(--text-mute); }
.kpi_sub { font-size: 10px; color: var(--text-mute); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Container-query value scaling: where supported, size the KPI value to
   the card's own width so 6-up cards shrink the number further than 4-up.
   Falls back gracefully to the vw-based clamp above. */
.kpi_card { container-type: inline-size; }
@container (max-width: 220px) { .kpi_value { font-size: clamp(13px, 9cqw, 18px); } }
@container (max-width: 170px) { .kpi_value { font-size: clamp(12px, 10cqw, 16px); } }

/* ── Chart workspace: responsive grid of ChartCards (Step 5) ───────
   auto-fit against a ~340px minimum: a chart only sits beside another when
   there's genuinely room for both to render their axis labels without
   collision. As the centre column narrows (rail folds / display scaling),
   charts drop from N-up to fewer-up automatically — driven by the ACTUAL
   space in the column, not the viewport width. This is why the old
   data-count + viewport breakpoints (which crammed 2 charts into a
   sub-300px column) are gone. A single chart still stretches full width.
   Falls back to a fixed 2-col track where container queries are unsupported. */
.charts_grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
/* One chart: let it use the full column rather than half. */
.charts_grid[data-count="1"] { grid-template-columns: 1fr; }

.chart_card {
  --glow-rgb: var(--glow-charts);   /* charts → purple active glow */
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 3px 12px -6px rgba(0,0,0,0.5);
  display: flex; flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--glow-timing), background-color var(--glow-timing),
              border-color var(--glow-timing);
}
/* Hover → shared ORANGE emphasis (design-system hover color). */
.chart_card:hover {
  border-color: rgb(var(--glow-hover));
  box-shadow: 0 0 0 1px rgba(var(--glow-hover), 0.22), 0 6px 18px -9px rgba(var(--glow-hover), 0.7);
}
/* Selected/current chart → shared active glow in the chart category color
   (purple). Wins over hover. */
.chart_card.is_active,
.chart_card.is_active:hover {
  border-color: rgb(var(--glow-charts));
  background-color: rgba(var(--glow-charts), 0.06);
  box-shadow:
    0 0 0 1px rgba(var(--glow-charts), 0.30),
    0 6px 18px -8px rgba(var(--glow-charts), 0.85);
}
/* Chart title — the single DOM header shared by EVERY chart type (bar, donut,
   pie, line, area, and future components render into .chart below it). Centering
   here keeps titles horizontally centred relative to the CARD (not the plotting
   area) and identical across the whole chart library.
   Hierarchy: brighter/semi-bold above the axis labels, below the KPI values —
   so a reader instantly knows what each chart represents.
   Spacing: consistent top padding + a fixed gap to the chart body below. */
.chart_card_head {
  padding: 11px 14px 8px;
  font-size: 12px; font-weight: 600; color: var(--text);
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0.01em;
  /* Guard against long titles crowding the borders / touching the body. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chart { width: 100%; height: 264px; padding: 4px 6px 8px; position: relative; }
.chart.small { height: 216px; }
/* Donut / pie now have a centred ring + a one-row horizontal legend band
   along the bottom. Give them a touch more height so the (larger) ring and
   the legend both breathe with equal top/bottom margins around the ring. */
.chart[data-chart-type="donut_chart"],
.chart[data-chart-type="pie_chart"] { height: 300px; }

/* Donut/pie centre-total overlay — see render.js. Positioned with the same
   left/top percentages as the pie's own `center`, translated back by half
   its own size so it's exactly centred regardless of its text length. */
.donut_center_label {
  position: absolute; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none; white-space: nowrap;
}
.donut_center_value { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.donut_center_caption { font-size: 11px; color: var(--text-mute); line-height: 1.3; }
.chart_empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--text-mute); font-size: 13px;
}

/* legacy single-chart wrapper (kept as a fallback) — centred for consistency. */
.chart_wrap { padding: 8px 0; }
.chart_title { font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; text-align: center; }

/* ── Result table ───────────────────────────────────────────────────
   Fixed max-height with internal vertical scroll for large datasets;
   small datasets render at natural height with no scrollbar. The header
   row stays sticky (see `th` below) while rows scroll underneath, and the
   table occupies predictable space regardless of row count. */
.result_table_wrap {
  max-height: 360px;
  overflow-y: auto;
  overflow-x: auto;
  scroll-behavior: smooth;
}
/* Very thin, subtle scrollbar (Webkit + Firefox); scroll stays functional. */
.result_table_wrap { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.result_table_wrap:hover { scrollbar-color: var(--scroll-thumb) transparent; }
.result_table_wrap::-webkit-scrollbar { width: 3px; height: 3px; }
.result_table_wrap::-webkit-scrollbar-track { background: transparent; }
.result_table_wrap::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.result_table_wrap:hover::-webkit-scrollbar-thumb { background: var(--scroll-thumb); }
.result_table_wrap::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
.result_table_toggle { font-size: 11px; color: var(--accent); cursor: pointer; padding: 6px 0; }

/* Result-table section active/focus state — shared glow recipe in the table
   category color (blue). Triggers on keyboard focus, focus-within (clicking a
   cell), or an explicit .is_active selection. Subtle, no animation beyond the
   shared fade. */
.result_table_section { --glow-rgb: var(--glow-tables); outline: none; }
.result_table_section:focus,
.result_table_section:focus-within,
.result_table_section.is_active {
  border-color: rgb(var(--glow-tables));
  background-color: rgba(var(--glow-tables), 0.05);
  box-shadow:
    0 0 0 1px rgba(var(--glow-tables), 0.28),
    0 6px 18px -8px rgba(var(--glow-tables), 0.8);
}

/* Dynamic, single-line report title above the table (compact, enterprise
   report feel — minimal vertical footprint). */
.result_table_head {
  padding: 9px 12px 8px; font-size: 12.5px; font-weight: 700; color: var(--text);
  letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

table.result_table {
  width: 100%; border-collapse: collapse; background: var(--panel-2);
  border-radius: var(--radius-sm); overflow: hidden;
  /* Soft, low-opacity blue vertical dividers between cells for a subtle
     enterprise grid without heavy white lines. */
  --grid-line: rgba(91, 141, 239, 0.12);
}
/* Distinct, slightly darker sticky header with a soft blue underline so it
   reads as a header band and stays readable while rows scroll under it. */
table.result_table th {
  text-align: left; padding: 7px 11px; font-size: 10px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
  background: var(--panel-3);
  position: sticky; top: 0; z-index: 1;
  border-bottom: 1.5px solid rgba(91, 141, 239, 0.28);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
/* Subtle blue column dividers (skip the first column's left edge). */
table.result_table th + th, table.result_table td + td {
  border-left: 1px solid var(--grid-line);
}
table.result_table td {
  padding: 6px 11px; font-size: 11.5px; line-height: 1.35;
  color: var(--text); border-top: 1px solid var(--border-soft);
}
/* Alternating row shades for readability (#131a2e / #182243). */
table.result_table tbody tr:nth-child(odd)  td { background: #131a2e; }
table.result_table tbody tr:nth-child(even) td { background: #182243; }
/* Hover highlight wins over the zebra shade. */
table.result_table tbody tr:hover td { background: rgba(91, 141, 239, 0.14); }
/* The viewer's own row stays highlighted regardless of zebra/hover. */
table.result_table tbody tr.row_you td {
  background: rgba(124, 92, 255, 0.16);
  color: var(--text); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent-2);
}
table.result_table tbody tr.row_you:hover td { background: rgba(124, 92, 255, 0.24); }
/* % increase / decrease colouring. !important so the sign colour also wins
   on the highlighted "(You)" row, whose rule sets a flat text colour. */
table.result_table td.cell_up   { color: var(--good) !important; font-weight: 600; }
table.result_table td.cell_down { color: var(--bad)  !important; font-weight: 600; }

/* ── Rank column + badges ────────────────────────────────────────────
   Leading Rank column (from backend row order, no ranking logic added).
   Small circular badges so an executive spots leaders instantly:
     rank 1 → gold, 2 → silver, 3 → bronze, 4-5 → subtle blue/purple,
     rest → muted. Enterprise-grade: flat fills, thin ring, no loud gradients. */
table.result_table th.rank_col,
table.result_table td.rank_col {
  width: 44px; text-align: center; padding-left: 8px; padding-right: 8px;
}
.rank_badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  color: var(--text); background: var(--chip);
  border: 1px solid var(--border-soft);
}
/* Gold / silver / bronze — muted metallic tints, not flashy. */
.rank_badge.rank_1 {
  color: #1a1405; background: rgba(251, 191, 36, 0.92);
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.25);
}
.rank_badge.rank_2 {
  color: #10141c; background: rgba(203, 213, 225, 0.9);
  border-color: rgba(203, 213, 225, 0.55);
}
.rank_badge.rank_3 {
  color: #1c1008; background: rgba(217, 154, 98, 0.9);
  border-color: rgba(217, 154, 98, 0.55);
}
/* Ranks 4-5 — subtle blue/purple highlight. */
.rank_badge.rank_top5 {
  color: var(--accent); background: rgba(91, 141, 239, 0.16);
  border-color: rgba(124, 92, 255, 0.3);
}
.rank_badge.rank_rest { color: var(--text-mute); background: var(--panel-3); }

/* Faint left-accent bar on the top-3 rows so leaders stand out at row level
   too (kept very subtle; the "(You)" row accent still wins where both apply). */
table.result_table tbody tr.row_rank_1 td:first-child { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.7); }
table.result_table tbody tr.row_rank_2 td:first-child { box-shadow: inset 3px 0 0 rgba(203, 213, 225, 0.6); }
table.result_table tbody tr.row_rank_3 td:first-child { box-shadow: inset 3px 0 0 rgba(217, 154, 98, 0.65); }
/* If a top-3 row is ALSO the viewer's own row, keep the "(You)" accent. */
table.result_table tbody tr.row_you td:first-child { box-shadow: inset 3px 0 0 var(--accent-2); }

/* ── Compact IQVIA-style provenance footer ──────────────────────────── */
.result_table_footer {
  margin-top: 7px; padding-top: 7px;
  border-top: 1px solid var(--grid-line, rgba(91, 141, 239, 0.12));
  font-size: 9.5px; color: var(--text-mute);
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  letter-spacing: 0.01em; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── HTML (non-canvas) chart builders ────────────────────────────────
   table_ranked / table_comparison / story_stack return { __html } from the
   catalog; render.js injects the markup and tags the region .chart_html.
   These reuse the theme tokens so they match the canvas charts. */
.chart.chart_html {
  height: auto;
  min-height: 0;
  overflow: auto;
}

/* Ranked / comparison tables — title centred + styled to match the shared
   .chart_card_head so HTML (non-canvas) charts read identically to the rest
   of the chart library. */
.chart_table_title {
  font-size: 12px; font-weight: 600; color: var(--text);
  text-align: center; letter-spacing: 0.01em; line-height: 1.3;
  margin-bottom: 8px;
}
.chart_table_scroll { max-height: 320px; overflow: auto; }
table.chart_data_table {
  width: 100%; border-collapse: collapse; background: var(--panel-2);
  border-radius: var(--radius-sm); overflow: hidden; font-size: 12px;
}
table.chart_data_table th {
  text-align: left; padding: 6px 10px; font-size: 9.5px; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: 0.05em; background: var(--chip);
  font-weight: 600; position: sticky; top: 0; z-index: 1;
}
table.chart_data_table td {
  padding: 6px 10px; color: var(--text); border-top: 1px solid var(--border-soft);
}
table.chart_data_table tbody tr:nth-child(odd)  td { background: #131a2e; }
table.chart_data_table tbody tr:nth-child(even) td { background: #182243; }
table.chart_data_table tbody tr:hover td { background: rgba(91, 141, 239, 0.14); }
.chart_rank_badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: rgba(91, 141, 239, 0.18); color: var(--accent); font-weight: 700;
}

/* Story stack narrative block */
.story_stack { display: flex; flex-direction: column; gap: 14px; }
.story_section {
  background: var(--panel-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.story_section_title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-mute); margin-bottom: 8px;
}
.story_text { font-size: 13px; color: var(--text); line-height: 1.5; margin: 0; }
.story_driver_list, .story_reco_list {
  margin: 0; padding-left: 18px; font-size: 13px; color: var(--text); line-height: 1.6;
}
.story_driver_list.positive li { color: var(--good); }
.story_driver_list.negative li { color: var(--bad); }