/* Scoped chart presentation: measured values and interaction are supplied by the chart renderer. */
.insight-card {
  --insight-ink: #17242c;
  --insight-muted: #647480;
  --insight-line: #dfe5e9;
  --insight-accent: #9c4208;
  min-width: 0;
  position: relative;
  padding: 23px 24px 17px;
  border: 1px solid var(--insight-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 8px #17242c03, 0 15px 35px #17242c06;
  color: var(--insight-ink);
  overflow: hidden;
}
.chart-grid > .insight-card { min-width: 0; }
.insight-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 17px;
}
.insight-card-head > div { min-width: 0; }
.insight-card .insight-kicker,
.insight-dialog .insight-kicker {
  margin: 0 0 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 1.6px;
  color: var(--insight-accent, #9c4208);
}
.insight-card-head h3 {
  margin: 0 0 4px;
  color: #17242c;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.35px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.insight-card .insight-subtitle,
.insight-dialog .insight-subtitle {
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
  color: #647480;
  overflow-wrap: anywhere;
}
.insight-expand {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #d9e2e8;
  border-radius: 10px;
  background: #f3f6f8;
  color: #293f4f;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.insight-expand:hover { border-color: #9cafbd; background: #e9eff3; }
.insight-expand svg { width: 16px; height: 16px; flex-shrink: 0; }
.insight-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 10px;
  margin: 0 0 17px;
  min-width: 0;
}
.insight-stat {
  min-width: 0;
  padding: 11px 13px 10px;
  border: 1px solid #e4e9ed;
  border-radius: 11px;
  background: #f3f5f7;
}
.insight-stat small {
  display: block;
  margin-bottom: 4px;
  color: #647480;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.insight-stat strong {
  display: inline-block;
  max-width: 100%;
  color: #17242c;
  font-size: 21px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  overflow-wrap: anywhere;
}
.insight-stat span {
  color: #647480;
  font-size: 11px;
  line-height: 1.4;
  margin-inline-start: 5px;
}
.insight-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 19px;
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  font-size: 12px;
  color: #526674;
}
.insight-legend li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  line-height: 1.5;
}
.insight-swatch {
  display: inline-block;
  width: 24px;
  height: 3px;
  flex-shrink: 0;
  border-radius: 0;
  background: transparent;
  color: var(--trace-color, #9c4208);
}
.insight-plot-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid #2d4152;
  border-radius: 12px;
  background: #14212d;
  box-shadow: inset 0 1px 0 #ffffff08;
  overflow: hidden;
  touch-action: pan-y;
  outline-offset: 3px;
}
.insight-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 240px;
  direction: ltr;
  user-select: none;
  -webkit-user-select: none;
}
.insight-grid line {
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.insight-grid text,
.insight-axis-label {
  stroke: none;
  fill: #adc0ce;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.insight-svg .insight-line,
.insight-svg .insight-line path { vector-effect: non-scaling-stroke; }
.insight-cursor { pointer-events: none; }
.insight-cursor line,
line.insight-cursor {
  stroke: #c4d6e4;
  stroke-width: 1.2;
  stroke-dasharray: 4 4;
}
.insight-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  min-height: 54px;
  margin-top: 10px;
  padding: 11px 13px;
  border: 1px solid #e0e7ec;
  border-radius: 10px;
  background: #f3f6f8;
  color: #263b49;
}
.insight-point-time {
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.insight-point-values {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  min-width: 0;
  max-width: 100%;
}
.insight-point-values > span {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  color: #526674;
  font-size: 11px;
  line-height: 1.5;
}
.insight-point-values strong {
  max-width: 100%;
  color: var(--trace-color, #17242c);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  overflow-wrap: anywhere;
}
.insight-hint {
  margin: 10px 1px 0;
  color: #647480;
  font-size: 11px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.insight-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
}
.insight-actions button {
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid #d9e2e8;
  border-radius: 9px;
  background: #ffffff;
  color: #293f4f;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.insight-actions button:hover:not(:disabled) { background: #e9eff3; border-color: #9cafbd; }
.insight-actions button:disabled { cursor: default; }
.insight-card .insight-data,
.insight-dialog .insight-data {
  margin-top: 14px;
  border-top: 1px solid #e0e7ec;
  color: #647480;
  font-size: 12px;
}
.insight-card .insight-data > summary,
.insight-dialog .insight-data > summary {
  min-height: 44px;
  padding: 12px 1px 9px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
}
.insight-data .chart-table {
  max-height: 260px;
  max-width: 100%;
  margin-top: 4px;
  border: 1px solid #e0e7ec;
  border-radius: 9px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #b1c0cb #f3f6f8;
}
.insight-data table { font-size: 12px; }
.insight-data th,
.insight-data td { padding: 11px 12px; }
.insight-data th { color: #526674; background: #f3f6f8; }
.insight-data td { color: #263b49; }
.insight-data caption { padding: 12px; font-size: 11px; }
.insight-quality,
.insight-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 5px 0;
  padding: 4px 9px;
  border: 1px solid #dfe5e9;
  border-radius: 7px;
  background: #f3f6f8;
  color: #526674;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.insight-quality { border-color: #ead2aa; background: #fff7e8; color: #85581e; }
#chart-explorer.insight-dialog {
  --insight-ink: #17242c;
  --insight-muted: #647480;
  --insight-line: #dfe5e9;
  --insight-accent: #9c4208;
  width: min(1180px, 90vw);
  max-width: 1180px;
  max-height: 90vh;
  max-height: 90dvh;
  padding: 0;
  border: 1px solid #d9e2e8;
  border-radius: 20px;
  background: #ffffff;
  color: #17242c;
  box-shadow: 0 26px 110px #08182755;
  overflow: hidden;
}
#chart-explorer.insight-dialog[open] {
  display: flex;
  flex-direction: column;
}
#chart-explorer.insight-dialog::backdrop {
  background: #16191eaa;
  backdrop-filter: blur(5px);
}
.insight-dialog-head {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 23px 28px 18px;
  border-bottom: 1px solid #e0e7ec;
  background: #ffffff;
}
.insight-dialog-head > div { min-width: 0; }
.insight-dialog-head h2 {
  margin: 0 0 5px;
  color: #17242c;
  font-size: 25px;
  line-height: 1.35;
  letter-spacing: -.6px;
  overflow-wrap: anywhere;
}
.insight-dialog-head p {
  margin: 0;
  color: #647480;
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.insight-close {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 7px;
  border: 1px solid #d9e2e8;
  border-radius: 12px;
  background: #f3f6f8;
  color: #293f4f;
  font-size: 25px;
  line-height: 1;
}
.insight-close:hover { border-color: #9cafbd; background: #e9eff3; }
.insight-close svg { width: 19px; height: 19px; }
.insight-breadcrumb {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
  padding: 10px 28px;
  border-bottom: 1px solid #e0e7ec;
  background: #f3f6f8;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.insight-breadcrumb button {
  min-height: 44px;
  max-width: 100%;
  padding: 8px 11px;
  border: 1px solid #d9e2e8;
  border-radius: 8px;
  background: #ffffff;
  color: #293f4f;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
}
.insight-breadcrumb button:hover:not(:disabled) { background: #e9eff3; }
.insight-breadcrumb button[aria-current] { border-color: #95aebf; color: #17242c; background: #e6eef4; }
.insight-breadcrumb button:disabled { cursor: default; opacity: .65; }
.insight-explorer-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  padding: 22px 28px 27px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #b1c0cb #f3f6f8;
}
.insight-dialog .insight-plot-wrap { border-radius: 14px; }
.insight-dialog .insight-svg { min-height: 330px; }
.insight-dialog .insight-grid text,
.insight-dialog .insight-axis-label { font-size: 13px; }
.insight-dialog .insight-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.insight-dialog .insight-stat { padding: 13px 16px; }
.insight-dialog .insight-stat strong { font-size: 25px; }
.insight-dialog .insight-readout { padding: 13px 16px; }
.insight-dialog .insight-point-time { font-size: 13px; }
.insight-dialog .insight-point-values strong { font-size: 17px; }
.insight-dialog .insight-data .chart-table { max-height: 310px; }
.insight-focus-summary {
  margin: 0 0 16px;
  padding: 13px 16px;
  border: 1px solid #dfe5e9;
  border-inline-start: 3px solid #9c4208;
  border-radius: 11px;
  background: #f3f6f8;
  color: #526674;
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.insight-focus-summary strong { color: #17242c; font-weight: 700; }
.insight-loading,
.insight-error {
  display: grid;
  place-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 28px 22px;
  border: 1px solid #dfe5e9;
  border-radius: 12px;
  background: #f3f6f8;
  color: #647480;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.insight-loading p,
.insight-error p { margin: 0; }
.insight-error { border-color: #e8c9b7; background: #fff5ed; color: #8a4824; }
.insight-card :is(button, summary, .insight-plot-wrap, .chart-table):focus-visible,
.insight-dialog :is(button, summary, .insight-plot-wrap, .chart-table):focus-visible {
  outline: 3px solid #9c4208;
  outline-offset: 3px;
}
@media (max-width: 960px) {
  .insight-card { padding: 20px 19px 15px; }
  .insight-card-head { gap: 12px; }
  .insight-card-head h3 { font-size: 17px; }
  .insight-expand { padding: 9px 10px; font-size: 11px; }
  .insight-stat { padding: 10px 11px; }
  .insight-stat strong { font-size: 19px; }
  .insight-stats { gap: 8px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
}
@media (max-width: 760px) {
  .insight-card { padding: 19px 17px 14px; border-radius: 15px; }
  .insight-card-head { margin-bottom: 15px; }
  .insight-card-head h3 { font-size: 18px; }
  .insight-card .insight-kicker { font-size: 9px; letter-spacing: 1.3px; }
  .insight-card .insight-subtitle { font-size: 11px; }
  .insight-stats { gap: 8px; margin-bottom: 15px; }
  .insight-stat strong { font-size: 20px; }
  .insight-legend { gap: 7px 14px; font-size: 11px; }
  .insight-swatch { width: 21px; }
  .insight-svg,
  .insight-dialog .insight-svg { min-height: 0; height: auto; }
  .insight-grid text,
  .insight-axis-label,
  .insight-dialog .insight-grid text,
  .insight-dialog .insight-axis-label { font-size: 17px; }
  .insight-plot-wrap { border-radius: 10px; }
  .insight-readout { gap: 7px 12px; padding: 10px 11px; }
  .insight-point-time { font-size: 11px; }
  .insight-point-values { gap: 6px 11px; }
  .insight-point-values strong { font-size: 14px; }
  .insight-hint { font-size: 11px; line-height: 1.65; }
  .insight-actions { gap: 7px; }
  .insight-actions button { padding: 8px 10px; font-size: 11px; }
  .insight-card .insight-data > summary { font-size: 12px; }
  #chart-explorer.insight-dialog {
    width: 90vw;
    max-height: 90vh;
    max-height: 90dvh;
    border-radius: 16px;
  }
  .insight-dialog-head { gap: 13px; padding: 18px 18px 14px; }
  .insight-dialog-head h2 { font-size: 21px; letter-spacing: -.35px; }
  .insight-dialog-head p { font-size: 12px; }
  .insight-close { border-radius: 10px; }
  .insight-breadcrumb { gap: 5px; padding: 8px 18px; }
  .insight-breadcrumb button { padding: 7px 9px; font-size: 11px; min-height: 44px; }
  .insight-explorer-body { padding: 17px 17px 21px; }
  .insight-dialog .insight-stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .insight-dialog .insight-stat { padding: 11px 12px; }
  .insight-dialog .insight-stat strong { font-size: 21px; }
  .insight-dialog .insight-readout { padding: 11px 12px; }
  .insight-dialog .insight-point-time { font-size: 12px; }
  .insight-dialog .insight-point-values strong { font-size: 15px; }
  .insight-focus-summary { padding: 11px 13px; font-size: 12px; }
  .insight-loading,
  .insight-error { min-height: 190px; padding: 24px 17px; font-size: 13px; }
}
@media (max-width: 400px) {
  .insight-card-head { flex-wrap: wrap; gap: 10px; }
  .insight-card-head > div { flex: 1 1 180px; }
  .insight-card .insight-expand { min-height: 44px; }
  .insight-stat small { font-size: 10px; }
  .insight-stat strong { font-size: 18px; }
  .insight-point-values { width: 100%; justify-content: flex-start; }
  .insight-actions button { flex: 1 1 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .insight-card *,
  .insight-dialog * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .insight-card,
  .insight-plot-wrap,
  .insight-stat,
  .insight-readout,
  #chart-explorer.insight-dialog { border-color: CanvasText; }
  .insight-swatch { forced-color-adjust: none; }
  .insight-grid text,
  .insight-axis-label,
  .insight-dialog .insight-grid text,
  .insight-dialog .insight-axis-label { fill: CanvasText; }
}
@media print {
  .insight-card { box-shadow: none; break-inside: avoid; print-color-adjust: exact; }
  .insight-expand,
  .insight-actions,
  .insight-hint { display: none !important; }
  .insight-svg { min-height: 0; }
  .insight-data .chart-table { max-height: none; }
  #chart-explorer.insight-dialog { position: static; width: 100%; max-width: none; max-height: none; border: 0; box-shadow: none; overflow: visible; }
  .insight-close,
  .insight-breadcrumb { display: none !important; }
  .insight-explorer-body { overflow: visible; padding: 0; }
}


/* A single analytical surface across cards and every explorer depth. */
.insight-kicker { display: flex; align-items: center; gap: 7px; }
.insight-kicker-mark { width: 6px; height: 6px; border-radius: 2px; background: currentColor; opacity: .8; }
.insight-stat { background: linear-gradient(135deg, #f3f5f7, #f8fafb); border-color: #e4eaee; }
.insight-stat strong { font-weight: 700; letter-spacing: -.6px; }
.insight-legend li { padding: 5px 9px; border: 1px solid #e6ebee; border-radius: 7px; background: #fafbfc; }
.insight-swatch.module-line { height: 0; border-radius: 0; background: transparent; }
.insight-plot-wrap { isolation: isolate; }
.insight-svg .insight-unit { fill: #b8ccd9; font-family: Arial, sans-serif; font-size: 13px; letter-spacing: .3px; }
.insight-svg .insight-empty { fill: #adc0ce; }
.insight-svg .insight-line { filter: drop-shadow(0 1px 1px #00000020); }
.insight-svg .insight-bar { shape-rendering: geometricPrecision; }
.insight-cursor line { stroke: #c4d6e4; opacity: .9; }
.insight-focus-points { pointer-events: none; }
.insight-value-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--trace-color, #526674); align-self: center; }
.insight-readout { box-shadow: inset 0 1px 0 #fff; }
.insight-point-time { color: #314a5c; }
.insight-actions { justify-content: space-between; align-items: center; }
.insight-actions .insight-hint { flex: 1 1 210px; margin: 0; }
.insight-actions .insight-drill { flex: 0 0 auto; }
.insight-actions button:disabled { color: #72828e; border-color: #e3e9ed; background: #f5f7f9; opacity: .8; }
.insight-card .chart-placeholder.insight-empty { min-height: 220px; display: grid; place-content: center; padding: 25px; border: 1px solid #2d4152; border-radius: 12px; background: #14212d; color: #adc0ce; text-align: center; line-height: 1.7; }
.insight-data th { border-bottom-color: #d8e2e9; }
.insight-data td { border-bottom-color: #e8edf1; }
.insight-data tbody tr:nth-child(even) { background: #f9fbfc; }
.insight-dialog .insight-kicker { color: #526674; }
.insight-dialog .insight-focus-summary { border-inline-start-color: #7294ae; }
.insight-card :is(button, summary, .insight-plot-wrap, .chart-table):focus-visible,
.insight-dialog :is(button, summary, .insight-plot-wrap, .chart-table):focus-visible { outline-color: #267ca9; }
@media (min-width: 761px) {
  .insight-dialog .insight-unit { font-size: 12px; }
}
@media (max-width: 760px) {
  .insight-legend li { padding: 5px 8px; }
  .insight-svg .insight-unit { font-size: 16px; }
  .insight-card .chart-placeholder.insight-empty { min-height: 180px; }
}
@media (forced-colors: active) {
  .insight-plot-wrap, .insight-svg .insight-plot-background { background: Canvas; fill: Canvas; }
  .insight-grid line, .insight-cursor line, .insight-svg .insight-line { stroke: CanvasText; }
  .insight-svg .insight-unit, .insight-svg .insight-empty { fill: CanvasText; }
  .insight-svg .insight-bar, .insight-marker, .insight-focus-point > :last-child { fill: Highlight; }
}