/* ReN theme — the ReN-frontend look (fonts, sizes, colours, cards, tables,
   buttons) as one reusable stylesheet. Values come from ReN-frontend's
   src/app/globals.css colour tokens and tailwind.config.js type scale.

   HOW TO USE
   Add class "ren-theme" to any container. Everything inside it then gets:
     - the tokens below (palette, role colours, type scale), light and dark;
     - the ren-* components (ren-tile, ren-table, ren-range, ...);
     - the existing company-page markup restyled: .chart-section cards,
       .chart-section-title, .charts-row, .dim-metrics-table, source-score
       bars and the price-history range buttons and axis labels.
   Nothing outside a .ren-theme container changes.

   In page code, colour and size through the role variables — e.g.
   style="color:var(--ren-text-muted);font-size:var(--ren-fs-xs)" — rather
   than hex values, so a container follows light/dark mode on its own.
   Risk-score colours (scoreColor / catColor and the red-amber-green
   severity scale) stay the app's own; they are not part of this theme.

   Used by: Financials tab (static/js/financials.js), Overview tab. */

.ren-theme {
  /* ReN-frontend palette, under its own names */
  --ren-white: #ffffff;
  --ren-black: #000000;
  --ren-primary-800: #4369f4;
  --ren-neutral-100: #f3f3f8;
  --ren-neutral-200: #e7e9f3;
  --ren-neutral-300: #dfe2ef;
  --ren-neutral-400: #ced0de;
  --ren-neutral-900: #343456;
  --ren-gray-100: #f3f4f6;
  --ren-gray-500: #6b7280;
  --ren-gray-700: #374151;
  --ren-gray-800: #1f2937;
  --ren-gray-900: #111827;
  --ren-grey-50: #f9fafc;
  --ren-grey-100: #f1f4f6;
  --ren-grey-300: #d0d5db;
  --ren-grey-400: #b1b7c2;
  --ren-grey-600: #5b646a;
  --ren-grey-700: #353535;
  --ren-divider: #e5e7eb;
  --ren-track: #e7e9f3;
  --ren-success-100: #e3f9e5;
  --ren-success-900: #34d399;
  --ren-error-100: #ffe3e3;
  --ren-error-900: #ff4242;
  --ren-warning: #fec225;
  --ren-chart-grid: rgba(0, 0, 0, 0.08);
  --ren-chart-text: #6b7280;

  /* Roles — use these in new markup */
  --ren-surface: var(--ren-white);
  --ren-surface-muted: var(--ren-neutral-100);
  --ren-row-hover: var(--ren-grey-50);
  --ren-desc-bg: var(--ren-grey-300);
  --ren-text: var(--ren-neutral-900);
  --ren-text-strong: var(--ren-gray-900);
  --ren-text-heading: var(--ren-gray-800);
  --ren-text-secondary: var(--ren-gray-700);
  --ren-text-muted: var(--ren-grey-600);
  --ren-border: var(--ren-neutral-300);
  --ren-border-strong: var(--ren-grey-400);
  --ren-primary: var(--ren-primary-800);
  --ren-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --ren-radius: 8px;
  --ren-gap: 10px;

  /* Type scale (ReN tailwind: xs 12, sm 14, base 15, md 16, lg 18, xl 20,
     2xl 24, 3xl 30, 4xl 36; 10px for the smallest axis/scale labels) */
  --ren-font: "Work Sans", sans-serif;
  --ren-fs-2xs: 10px;
  --ren-fs-xs: 12px;
  --ren-fs-sm: 14px;
  --ren-fs-base: 15px;
  --ren-fs-md: 16px;
  --ren-fs-lg: 18px;
  --ren-fs-xl: 20px;
  --ren-fs-2xl: 24px;
  --ren-fs-3xl: 30px;
  --ren-fs-4xl: 36px;

  font-family: var(--ren-font);
  color: var(--ren-text);
}
/* Dark: ReN-frontend's .dark tokens, with these exceptions so things stay
   readable on this app's navy cards:
   - the card surface keeps the app's dark card colour;
   - status colours keep their strong shades (ReN's dark theme swaps them for
     near-white tints, which washed out score bars, zone dots and pills), and
     their soft backgrounds become translucent tints of the same colour;
   - tracks and icon tiles are slate rather than pure black. */
html[data-theme="dark"] .ren-theme {
  --ren-white: #1e293b;
  --ren-black: #ebebeb;
  --ren-primary-800: #1d4ed8;
  --ren-neutral-100: #252525;
  --ren-neutral-200: #334155;
  --ren-neutral-300: #334155;
  --ren-neutral-400: #676780;
  --ren-neutral-900: #e7e9f3;
  --ren-gray-100: #1c1c1c;
  --ren-gray-500: #a1a1a6;
  --ren-gray-700: #d9d9de;
  --ren-gray-800: #ebebeb;
  --ren-gray-900: #f5f5f5;
  --ren-grey-50: #292a2f;
  --ren-grey-100: #353535;
  --ren-grey-300: #40434b;
  --ren-grey-400: #b1b7c2;
  --ren-grey-600: #e9e9e9;
  --ren-grey-700: #f1f4f6;
  --ren-divider: #b4b4b4;
  --ren-track: #3a3a3c;
  --ren-success-100: rgba(52, 211, 153, 0.16);
  --ren-success-900: #34d399;
  --ren-error-100: rgba(255, 92, 92, 0.16);
  --ren-error-900: #ff5c5c;
  --ren-chart-grid: rgba(255, 255, 255, 0.18);
  --ren-chart-text: #ffffff;
  --ren-desc-bg: var(--ren-grey-100);
  --ren-border: #334155;
}
.ren-theme *, .ren-theme *::before, .ren-theme *::after { box-sizing: border-box; }
.ren-theme h2, .ren-theme h3, .ren-theme p { margin: 0; }

/* Type-scale helpers */
.ren-text-2xs { font-size: var(--ren-fs-2xs); }
.ren-text-xs { font-size: var(--ren-fs-xs); line-height: 16px; }
.ren-text-sm { font-size: var(--ren-fs-sm); line-height: 20px; }
.ren-text-base { font-size: var(--ren-fs-base); }
.ren-text-md { font-size: var(--ren-fs-md); }
.ren-text-lg { font-size: var(--ren-fs-lg); }
.ren-muted { color: var(--ren-text-muted); }
.ren-l { text-align: left; }
.ren-r { text-align: right; }
.ren-medium { font-weight: 500; }
.ren-semibold { font-weight: 600; }
.ren-bold { font-weight: 700; }
.ren-wrap { white-space: normal !important; }
.ren-pos { color: green; }
.ren-neg { color: red; }

/* Layout: a column of cards, and two cards side by side */
.ren-stack { display: flex; flex-direction: column; gap: var(--ren-gap); }
.ren-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ren-gap); align-items: stretch; }
@media (max-width: 900px) { .ren-row { grid-template-columns: minmax(0, 1fr); } }

/* Card: bg-white rounded-lg p-5 shadow */
.ren-tile { position: relative; background: var(--ren-surface); border-radius: var(--ren-radius); padding: 20px; box-shadow: var(--ren-shadow); min-width: 0; height: 100%; }
.ren-tile.ren-p6 { padding: 24px; }
.ren-tile.ren-r6 { border-radius: 6px; }
.ren-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px; text-align: center; }
.ren-btn { font: inherit; font-size: var(--ren-fs-sm); font-weight: 600; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--ren-primary); color: var(--ren-primary); background: none; cursor: pointer; }

/* Card title row: flex gap-[10px] items-center mb-2, optional 40px icon tile */
.ren-head { display: flex; flex-direction: row; gap: 10px; align-items: center; margin-bottom: 8px; }
.ren-head.ren-gap2 { gap: 8px; }
.ren-head.ren-mb4 { margin-bottom: 16px; }
.ren-head.ren-mb30 { margin-bottom: 30px; }
.ren-head-empty { margin-bottom: 8px; }
.ren-icobox { display: flex; width: 40px; height: 40px; flex: none; align-items: center; justify-content: center; border-radius: 10px; background: var(--ren-neutral-200); color: var(--ren-text); }
.ren-ico { width: 24px; height: 24px; }
.ren-icobox svg[viewBox="0 0 17 23"] { width: 17px; height: 23px; }
.ren-ico-16 { width: 16px; height: 16px; flex: none; }
.ren-ico-20 { width: 20px; height: 20px; flex: none; }
.ren-h2 { font-size: var(--ren-fs-base); font-weight: 600; line-height: 1.5; }
.ren-chart-title { font-size: var(--ren-fs-md); font-weight: 700; line-height: 1.5; }
.ren-h2.ren-mb4, .ren-chart-title.ren-mb4 { margin-bottom: 16px; }
.ren-chart-title.ren-mb2 { margin-bottom: 8px; }
.ren-help { display: inline-flex; cursor: pointer; color: var(--ren-text); }
.ren-help-ico { width: 16px; height: 16px; }
.ren-help-ico path { opacity: 1; }

/* "Select Year:" row (mb-4) */
.ren-subhead { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-bottom: 16px; }
.ren-subhead label { font-size: var(--ren-fs-sm); white-space: nowrap; }
.ren-subhead select { font: inherit; font-size: var(--ren-fs-sm); padding: 4px; border: 1px solid var(--ren-neutral-400); border-radius: 4px; background: var(--ren-surface-muted); color: var(--ren-text); outline: none; }
.ren-subhead select:focus { border-color: #2563eb; }
html[data-theme="dark"] .ren-subhead select { color-scheme: dark; }

/* Table (TableComponent): max-h 400px scroll, sticky header and first column.
   Sizes are variables so a density (.ren-compact) or a narrow card can tighten
   them; the defaults are ReN-frontend's. */
.ren-theme {
  --ren-table-fs: var(--ren-fs-md);
  --ren-cell-py: 8px;
  --ren-cell-px: 8px;
  --ren-col-min: 100px;    /* value columns */
  --ren-lead-min: 150px;   /* the row-label column */
  --ren-lead-max: none;
  --ren-lead-wrap: nowrap;
}
.ren-tscroll { width: 100%; max-height: 400px; overflow: auto; }
.ren-table { width: 100%; border-collapse: collapse; font-size: var(--ren-table-fs); line-height: 1.5; color: var(--ren-text); }
.ren-table thead tr { border-bottom: 1px solid var(--ren-black); }
.ren-table th { padding: var(--ren-cell-py) var(--ren-cell-px); font-weight: 700; color: var(--ren-text-heading); position: sticky; top: 0; z-index: 1; background: var(--ren-surface); white-space: nowrap; min-width: var(--ren-col-min); max-width: 150px; }
.ren-table th.ren-lead { min-width: var(--ren-lead-min); }
.ren-table th.ren-num-col, .ren-table td.ren-num-col { min-width: 40px; max-width: 150px; }
.ren-th { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.ren-table th.ren-sticky { left: 0; z-index: 2; }
.ren-table tbody tr { border-bottom: 1px solid var(--ren-border-strong); }
.ren-table td { padding: var(--ren-cell-py) var(--ren-cell-px); white-space: nowrap; min-width: var(--ren-col-min); }
.ren-table td.ren-lead { min-width: var(--ren-lead-min); max-width: var(--ren-lead-max); white-space: var(--ren-lead-wrap); }
.ren-table td.ren-sticky { position: sticky; left: 0; z-index: 1; background: var(--ren-surface); }

/* Cards size their own tables: each .ren-tile is a container, so a table in
   a narrow card tightens whatever the screen width. */
.ren-tile { container-type: inline-size; }
@container (max-width: 800px) {
  /* text cells (names, job titles) wrap rather than widen the table */
  .ren-table td.ren-l { white-space: normal; min-width: 110px; }
}
@container (max-width: 640px) {
  .ren-table { --ren-table-fs: 12px; --ren-cell-py: 5px; --ren-cell-px: 6px; --ren-col-min: 60px; --ren-lead-min: 104px; --ren-lead-max: 160px; --ren-lead-wrap: normal; }
  .ren-table th { white-space: normal; }
}
@container (max-width: 460px) {
  .ren-table { --ren-table-fs: 11px; --ren-cell-px: 5px; --ren-col-min: 52px; --ren-lead-min: 90px; --ren-lead-max: 130px; }
}

/* Compact density: add "ren-compact" next to "ren-theme" for a tab that
   packs a lot of numbers (e.g. Financials). Everything inside steps down
   one size, table cells tighten and long row labels wrap. */
.ren-compact {
  --ren-fs-xs: 11px;
  --ren-fs-sm: 13px;
  --ren-fs-base: 14px;
  --ren-fs-md: 14px;
  --ren-fs-lg: 16px;
  --ren-fs-xl: 18px;
  --ren-fs-2xl: 22px;
  --ren-fs-3xl: 26px;
  --ren-fs-4xl: 32px;
  --ren-table-fs: 13px;
  --ren-cell-py: 6px;
  --ren-cell-px: 8px;
  --ren-col-min: 72px;
  --ren-lead-min: 120px;
  --ren-lead-max: 220px;
  --ren-lead-wrap: normal;
  font-size: var(--ren-fs-base);
  line-height: 1.45;
}
.ren-compact .ren-icobox { width: 34px; height: 34px; border-radius: 8px; }
.ren-compact .ren-ico { width: 20px; height: 20px; }
.ren-compact .ren-icobox svg[viewBox="0 0 17 23"] { width: 14px; height: 19px; }
.ren-compact .ren-subhead { margin-bottom: 12px; }
.ren-compact .ren-tile { padding: 16px; }
.ren-compact .ren-tile.ren-p6 { padding: 20px; }

/* Side-by-side pairs stack when the column of cards gets too narrow
   (container query on .ren-stack, not the screen): pairs of tables
   (.ren-row-tables) once two can't both show every column; charts and
   detail cards only when really narrow, so laptops keep them paired. */
.ren-stack { container: ren-stack / inline-size; }
@container ren-stack (max-width: 940px) {
  .ren-row.ren-row-tables { grid-template-columns: minmax(0, 1fr); }
}
@container ren-stack (max-width: 620px) {
  .ren-row { grid-template-columns: minmax(0, 1fr); }
}

/* Range buttons: px-2 py-1 rounded-lg, active bg-primary-800 white */
.ren-ranges { display: flex; gap: 4px; }
.ren-ranges.ren-mb2 { margin-bottom: 8px; }
.ren-range { font: inherit; font-size: var(--ren-fs-md); line-height: 1.5; padding: 4px 8px; border: none; border-radius: 8px; background: var(--ren-surface); color: inherit; cursor: pointer; }
.ren-range.active { background: var(--ren-primary); color: #ffffff; }
.ren-ranges-sm { gap: 8px; align-items: center; }
.ren-ranges-sm .ren-range { font-size: var(--ren-fs-sm); line-height: 20px; background: var(--ren-gray-100); }
.ren-ranges-sm .ren-range.active { background: var(--ren-primary); }
.ren-range:focus-visible, .ren-btn:focus-visible { outline: 2px solid var(--ren-primary); outline-offset: 2px; }

/* Chart containers */
.ren-chart { position: relative; }
.ren-h200 { height: 200px; margin-top: 8px; }
.ren-h320 { height: 320px; }

/* ── Card actions: Explain / Download (ReN-frontend withDownloadAndExplain) ─
   A card with class ren-has-actions holds a .ren-actions row in its top-right
   corner; the title row keeps clear of it. In a card too narrow for the
   longest title plus both buttons (~440px inside) the buttons drop their
   words and keep the icon (each keeps its aria-label). */
.ren-theme { --ren-action: #2563eb; }
html[data-theme="dark"] .ren-theme { --ren-action: #7aa2ff; }
.ren-ico-14 { width: 14px; height: 14px; flex: none; }
.ren-actions { position: absolute; top: 14px; right: 12px; z-index: 3; display: flex; gap: 6px; align-items: center; }
.ren-act-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 5px 10px; font: inherit; font-size: 12px; font-weight: 600; line-height: normal; white-space: nowrap;
  border-radius: 4px; border: 1.5px solid var(--ren-action); background: var(--ren-surface); color: var(--ren-action);
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.ren-act-btn:hover { background: var(--ren-action); color: #ffffff; }
html[data-theme="dark"] .ren-act-btn:hover { background: #2563eb; border-color: #2563eb; }
.ren-act-btn:focus-visible { outline: 2px solid var(--ren-action); outline-offset: 2px; }
.ren-has-actions > .ren-head,
.ren-has-actions > .ren-chart-title,
.ren-has-actions > .ren-h2 { padding-right: 190px; }
@container (max-width: 440px) {
  .ren-act-btn { padding: 5px 6px; }
  .ren-act-btn span { display: none; }
  .ren-has-actions > .ren-head,
  .ren-has-actions > .ren-chart-title,
  .ren-has-actions > .ren-h2 { padding-right: 72px; }
}

/* Select mode for a multi-card download: the whole card is one checkbox. */
.ren-select-overlay {
  position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: inherit; cursor: pointer;
  background: rgba(37, 99, 235, 0.2); transition: background 0.2s;
}
.ren-select-overlay.on { background: rgba(37, 99, 235, 0.5); }
.ren-select-overlay:focus-visible { outline: 3px solid #2563eb; outline-offset: -3px; }
.ren-select-check {
  display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px;
  background: #ffffff; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); transition: transform 0.2s;
}
.ren-select-overlay.on .ren-select-check { transform: scale(1.1); }
.ren-select-box {
  display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 5px;
  border: 2px solid #9ca3af; background: #ffffff; color: #ffffff;
}
.ren-select-overlay.on .ren-select-box { border-color: #2563eb; background: #2563eb; }
.ren-select-box .ren-ico-20 { width: 18px; height: 18px; stroke-width: 3; }

/* ── Modal (ReN-frontend InfoModal), e.g. the Explain dialog ─────────────── */
.ren-modal-overlay {
  position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(53, 53, 53, 0.8);
}
.ren-modal-overlay[hidden] { display: none; }
.ren-modal {
  width: 92%; max-width: 800px; max-height: calc(100vh - 32px); display: flex; flex-direction: column;
  padding: 24px; border-radius: 8px; background: var(--ren-surface); color: var(--ren-text);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.ren-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.ren-modal-title { font-size: var(--ren-fs-xl); font-weight: 600; line-height: 1.3; }
.ren-modal-x { display: inline-flex; padding: 4px; border: 0; border-radius: 6px; background: none; color: var(--ren-gray-500); cursor: pointer; }
.ren-modal-x:hover { color: var(--ren-text-secondary); background: var(--ren-surface-muted); }
.ren-modal-body { overflow-y: auto; max-height: 60vh; color: var(--ren-grey-700); font-size: var(--ren-fs-base); line-height: 1.6; }
.ren-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.ren-modal-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font: inherit; font-size: var(--ren-fs-sm); font-weight: 500;
  border-radius: 8px; border: 1px solid rgba(67, 105, 244, 0.25); background: none; color: var(--ren-primary-800); cursor: pointer;
}
.ren-modal-btn:hover { background: rgba(67, 105, 244, 0.08); }
html[data-theme="dark"] .ren-modal-btn:not(.ren-modal-primary),
html[data-theme="dark"] .ren-md a { color: var(--ren-action); }
html[data-theme="dark"] .ren-modal-btn:not(.ren-modal-primary) { border-color: rgba(122, 162, 255, 0.4); }
.ren-modal-primary { border-color: var(--ren-primary-800); background: var(--ren-primary-800); color: #ffffff; }
.ren-modal-primary:hover { background: #3557d6; }
.ren-modal-btn:focus-visible, .ren-modal-x:focus-visible { outline: 2px solid var(--ren-primary-800); outline-offset: 2px; }
.ren-modal-loading { display: flex; align-items: center; gap: 12px; min-height: 100px; padding: 16px; font-size: var(--ren-fs-lg); font-weight: 500; color: var(--ren-text-secondary); }
.ren-spin {
  width: 28px; height: 28px; flex: none; border-radius: 999px;
  border: 3px solid var(--ren-neutral-200); border-top-color: var(--ren-primary-800); animation: ren-spin 0.8s linear infinite;
}
@keyframes ren-spin { to { transform: rotate(360deg); } }
.ren-modal-error { padding: 12px 4px; color: var(--ren-error-900); }
html:not([data-theme="dark"]) .ren-modal-error { color: #b91c1c; }
.ren-md { padding: 0 4px; }
.ren-md > *:first-child { margin-top: 0; }
.ren-md p { margin: 0 0 14px; }
.ren-md h1, .ren-md h2, .ren-md h3, .ren-md h4 { margin: 18px 0 8px; font-weight: 600; line-height: 1.3; color: var(--ren-text); }
.ren-md h1 { font-size: var(--ren-fs-xl); }
.ren-md h2 { font-size: var(--ren-fs-lg); }
.ren-md h3, .ren-md h4 { font-size: var(--ren-fs-md); }
.ren-md ul, .ren-md ol { margin: 0 0 14px; padding-left: 28px; }
.ren-md ul { list-style: disc; }
.ren-md ol { list-style: decimal; }
.ren-md li { margin-bottom: 4px; }
.ren-md strong { font-weight: 600; }
.ren-md a { color: var(--ren-primary-800); }
.ren-md table { border-collapse: collapse; margin: 0 0 14px; font-size: var(--ren-fs-sm); }
.ren-md th, .ren-md td { padding: 4px 8px; border: 1px solid var(--ren-border); text-align: left; }
.ren-caret { display: inline-block; width: 1px; height: 16px; margin-left: 4px; vertical-align: middle; background: currentColor; animation: ren-blink 1s step-end infinite; }
@keyframes ren-blink { 50% { opacity: 0; } }
.ren-ai-note { margin-top: 8px !important; padding-top: 10px; border-top: 1px solid var(--ren-border); font-size: var(--ren-fs-xs); color: var(--ren-text-muted); }
@media (prefers-reduced-motion: reduce) { .ren-spin, .ren-caret { animation: none; } }

/* ── Existing company-page markup inside a .ren-theme container ────────── */
.ren-theme .chart-section {
  background: var(--ren-surface);
  border: none;
  border-radius: var(--ren-radius);
  padding: 20px;
  margin-bottom: 0;
  box-shadow: var(--ren-shadow);
  color: var(--ren-text);
}
/* beats the page's dark-mode "!important" card colour on .detail-body */
html[data-theme="dark"] .detail-body .ren-theme .chart-section,
html .detail-body .ren-theme .chart-section {
  background: var(--ren-surface) !important;
  border: none !important;
}
.ren-theme .chart-section-title {
  font-family: var(--ren-font);
  font-size: var(--ren-fs-base);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ren-text);
  margin-bottom: 12px;
}
html[data-theme="dark"] .ren-theme .chart-section-title { color: var(--ren-text); }
.ren-theme .chart-section-sub { font-size: var(--ren-fs-xs); font-weight: 400; color: var(--ren-text-muted); }
html[data-theme="dark"] .ren-theme .chart-section-sub { color: var(--ren-text-muted); }
.ren-theme .charts-row { gap: var(--ren-gap); margin-bottom: 0; }

.ren-theme .dim-metrics-table .dm-key,
html[data-theme="dark"] .ren-theme .dim-metrics-table .dm-key { font-size: var(--ren-fs-sm); color: var(--ren-text-secondary); border-bottom-color: var(--ren-divider); }
.ren-theme .dim-metrics-table .dm-val,
html[data-theme="dark"] .ren-theme .dim-metrics-table .dm-val { font-size: var(--ren-fs-sm); color: var(--ren-text); border-bottom-color: var(--ren-divider); }

/* Source-score bars (Core Data Sources). The score number and bar keep the
   app's risk colours, which the markup sets inline. */
.ren-theme .src-bars { margin-top: 0; gap: var(--ren-gap); }
.ren-theme .src-bar { background: var(--ren-surface-muted); border: none; border-left: 3px solid var(--ren-primary); border-radius: var(--ren-radius); padding: 12px 14px; }
.ren-theme .sb-nm { font-size: var(--ren-fs-xs); font-weight: 600; letter-spacing: 0.06em; color: var(--ren-text); }
.ren-theme .sb-sc { font-size: var(--ren-fs-lg); font-weight: 600; }
.ren-theme .sb-wt { font-size: var(--ren-fs-xs); color: var(--ren-text-muted); }
.ren-theme .bar-track { height: 4px; background: var(--ren-track); border-radius: 999px; }

/* Price-history range buttons and axis labels (markup and inline colours
   come from switchPriceTab / _buildPriceSvg, shared with the Price tab) */
.ren-theme .ptab-btn {
  font-family: var(--ren-font) !important;
  font-size: var(--ren-fs-sm) !important;
  font-weight: 400 !important;
  line-height: 20px;
  padding: 4px 8px !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--ren-text) !important;
  background: var(--ren-gray-100) !important;
}
.ren-theme .ptab-btn.active { background: var(--ren-primary) !important; color: #ffffff !important; }
.ren-theme svg text[fill="#7A7670"] { fill: var(--ren-chart-text); font-family: var(--ren-font); }

.ren-theme .loading-state, .ren-theme .empty-state { color: var(--ren-text-muted); }