/* Analytics-specific refinements (base rules live in components.css) */

/* Breakdown card header: title on the left, dimension switcher on the
   right. The switcher can hold five options, so it wraps to its own line
   rather than squeezing the segmented control below a readable size. */

.breakdown-header {
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.breakdown-dims {
  flex-wrap: wrap;
  max-width: 100%;
}

@media (max-width: 700px) {
  .breakdown-header {
    align-items: stretch;
  }

  .breakdown-dims {
    width: 100%;
    overflow-x: auto;
    /* The thumb is absolutely positioned against the track, so the track
       must not shrink its options - let it scroll instead. */
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .breakdown-dims .segmented__option {
    flex-shrink: 0;
  }
}

/* =====================================================================
   Shared: stable-column tables (Breakdown + Edge panel).

   Root cause of columns shifting position between dimensions/tags: plain
   <table class="data-table"> uses the browser's default `table-layout:
   auto`, which sizes every column from whichever cell in it currently holds
   the widest content - so column 1 alone moves from ~270px to ~400px
   switching Symbol -> Strategy, and every column after it shifts with it.
   Fixed percentage widths pin the columns regardless of which dimension or
   tag is showing; the label column, which carries the widest range of
   content (a five-letter symbol vs. "Trend Continuation"), truncates with
   an ellipsis instead of resizing the column around it.

   Scoped to >700px on purpose. Below that breakpoint `.data-table` stops
   being a table at all - components.css turns every <tr> into a stacked
   card and every <td> into a `display: flex` label/value row - so a
   percentage `width` no longer sizes a column, it shrinks the whole flex
   row to a third of the card, and the `text-overflow: ellipsis` meant for a
   too-narrow column instead truncates the value itself ("BTCUSD" -> "BTCU",
   "Long" -> "Lo"). Fixed columns are a desktop-table concern and have to
   stay inside the desktop-table media range. */
@media (min-width: 701px) {
  .metric-table {
    table-layout: fixed;
  }

  .metric-table th:nth-child(1),
  .metric-table td:nth-child(1) {
    width: 32%;
  }

  .metric-table th:nth-child(2),
  .metric-table td:nth-child(2) {
    width: 18%;
  }

  .metric-table th:nth-child(3),
  .metric-table td:nth-child(3) {
    width: 26%;
  }

  .metric-table th:nth-child(4),
  .metric-table td:nth-child(4) {
    width: 24%;
  }

  .metric-table td:nth-child(1) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* =====================================================================
   Edge panel - tag correlation, in R / win rate / counts only.
   ================================================================== */
.edge-block + .edge-block {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.edge-block__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.edge-block__head h3 {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  margin: 0;
}

.edge-block__head p {
  margin: var(--space-1) 0 var(--space-4);
  font-size: var(--fs-footnote);
}

.edge-dim + .edge-dim {
  margin-top: var(--space-5);
}

.edge-dim__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-footnote);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}

.edge-thin {
  margin-top: var(--space-3);
}

.edge-thin summary {
  cursor: pointer;
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
}

.edge-thin summary:hover {
  color: var(--color-text-secondary);
}

.edge-thin[open] summary {
  margin-bottom: var(--space-3);
}

/* A value that is no longer on its dictionary. Marked, never hidden. */
.off-list-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-text-tertiary);
  vertical-align: middle;
  cursor: help;
}

/* =====================================================================
   Insights
   ================================================================== */
.insights-overview {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.insights-overview__count {
  font-size: var(--fs-title3);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}

.insights-overview__label {
  font-size: var(--fs-footnote);
  color: var(--color-text-tertiary);
}

.insight-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* A tinted icon tile (the same .kpi-card__icon tone tiles used elsewhere)
   replaces the old left-border-only treatment: recognisable at a glance
   instead of a colour the reader has to notice first. */
.insight {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-hover);
}

.insight--unmet {
  background: transparent;
  border: 1px solid var(--color-border);
}

.insight--unmet .insight__title {
  color: var(--color-text-secondary);
}

.insight__content {
  min-width: 0;
  flex: 1 1 auto;
}

.insight__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.insight__title {
  font-size: var(--fs-footnote);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.insight__kind {
  flex-shrink: 0;
}

.insight__body {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-footnote);
  color: var(--color-text-secondary);
}

.insight__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-tertiary);
}

.insight__meta .mini-bar {
  max-width: 96px;
}