/* Analysis tab (wave V2 owner: analysis). Layout only: the foundation draws
   sections, rows, the period control and the charts. The index is inset
   grouped sections of two-line rows with one featured chart card on top;
   topic pages stack chart cards (cell grey, radius 22) and put lists edge to
   edge on black (Stocks watchlist). One column on iPhone, two on desktop.
   Type on a topic page: 22 headline, 17 card question and rows, 15 finding
   and chart text, 13 notes. Tokens only; flat fills, no glass. */

.ins-index, .ins-topic { padding-bottom: var(--content-bottom); }

/* ---------------------------------------------------------------- index */
.ins-index { padding-top: var(--cell-pad-y); }
.ins-index .ui-sec + .ui-sec { margin-top: var(--gap-group); }
.ui-finding.is-gated .ui-finding-text { color: var(--label-2); }
.ins-skel { padding: 0 var(--margin); }

/* featured card ("At this pace"): the chart grammar inside one cell */
.ins-feature {
  margin: 0 var(--margin) var(--radius-sm);
  background: var(--cell); border-radius: var(--radius-section);
  overflow: hidden;
  --chart-halo: var(--cell);
}
.ins-feature-head {
  display: flex; align-items: center; gap: var(--radius-sm);
  width: 100%; min-height: var(--row-index);
  padding: var(--cell-pad-y) var(--cell-pad-x);
  border: 0; background: none; color: inherit; font: inherit; text-align: left;
  cursor: pointer;
}
.ins-feature-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ins-feature-title { font: var(--t-body); letter-spacing: var(--tr-body); color: var(--label); }
.ins-feature-finding { font: var(--t-secondary); letter-spacing: var(--tr-secondary); color: var(--label-2); }
.ins-feature-chart { padding: 0 var(--cell-pad-x) var(--cell-pad-y); cursor: pointer; }
.ins-feature-chart:empty { display: none; }

/* ---------------------------------------------------------------- topic page */
.ins-period { padding: var(--cell-pad-y) var(--margin) 0; }
.ins-finding {
  margin: var(--margin) var(--margin) var(--gap-group);
  font: var(--t-title2); letter-spacing: var(--tr-title2);
  text-wrap: balance;
}
.ins-topic-page > .ui-sec { margin-top: var(--gap-group); }
.ins-topic-page > .ui-footnote { margin: var(--gap-group) var(--margin) 0; }
.ins-num { font-variant-numeric: tabular-nums; }
.ins-total { font: var(--t-headline); letter-spacing: var(--tr-headline); }

/* chart cards */
.ins-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--radius-sm); margin: 0 var(--margin); }
.ins-card { --chart-halo: var(--cell); min-width: 0; }
.ins-card-body {
  height: 100%; box-sizing: border-box;
  padding: var(--cell-pad-y) 0 var(--cell-pad-x);
  background: var(--cell); border-radius: var(--radius-section);
  overflow: hidden;
}
.ins-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--radius-sm);
  min-height: var(--tap-min);
  margin-top: calc(var(--cell-pad-y) * -0.5);
  padding: 0 var(--radius-xs) 0 var(--cell-pad-x);
}
.ins-card-q {
  margin: 0; min-width: 0;
  font: var(--t-headline); letter-spacing: var(--tr-headline);
  text-wrap: pretty;
}
.ins-card-expand { flex: none; color: var(--label-2); }
.ins-card-finding {
  margin: 0 var(--cell-pad-x) var(--cell-pad-x);
  font: var(--t-secondary); letter-spacing: var(--tr-secondary); color: var(--label-2);
  text-wrap: pretty;
}
.ins-card-chart { padding: 0 var(--cell-pad-x); min-width: 0; }
.ins-card-chart:empty { display: none; }
.ins-card-note {
  margin: var(--radius-sm) var(--cell-pad-x) 0;
  font: var(--t-footnote); letter-spacing: var(--tr-footnote); color: var(--label-2);
}
.ins-card-rows { margin-top: var(--radius-sm); }
.ins-card-rows[hidden], .ins-card-note[hidden], .ins-card-finding[hidden] { display: none; }
.ins-card-rows > .ui-row { position: relative; }
.ins-card-rows > .ui-row::before {
  content: ''; position: absolute; top: 0; right: var(--cell-pad-x); left: var(--cell-pad-x);
  height: var(--hairline); background: var(--sep);
}
.ins-gate {
  margin: 0; padding: var(--margin) 0;
  font: var(--t-footnote); letter-spacing: var(--tr-footnote); color: var(--label-2);
}

/* edge-to-edge lists: rows wrap rather than cut a sentence */
.ins-list .ui-cell-sec, .ins-list .ui-cell-label { white-space: normal; }
.ins-list .ui-sec-trail { font: var(--t-secondary); letter-spacing: var(--tr-secondary); }

/* info disclosure: plain summary, jargon inside */
.ins-info { margin: var(--gap-group) var(--margin) 0; }
.ins-info-sum {
  display: flex; align-items: center; gap: var(--radius-xs);
  min-height: var(--tap-min);
  font: var(--t-secondary); letter-spacing: var(--tr-secondary); color: var(--label-2);
  list-style: none; cursor: pointer;
}
.ins-info-sum::-webkit-details-marker { display: none; }
.ins-info-sum .ui-ico { flex: none; width: var(--icon-chevron); height: var(--icon-chevron); }
.ins-info-sum:focus-visible { outline: calc(var(--hairline) * 4) solid var(--label-2); outline-offset: var(--hairline); border-radius: var(--radius-xs); }
.ins-info-body > p {
  margin: 0 0 var(--radius-sm);
  font: var(--t-secondary); letter-spacing: var(--tr-secondary); color: var(--label-2);
}
.ins-info-body > .ins-list { margin: 0 calc(var(--margin) * -1); }

/* stat rows (label + value) */
.ins-stat {
  display: flex; align-items: center; gap: var(--margin);
  min-height: var(--row-min); padding: var(--cell-pad-y) var(--margin);
  width: 100%; text-align: left; color: inherit; background: none; border: 0; font: inherit;
}
.ins-stat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ins-stat-label { font: var(--t-body); letter-spacing: var(--tr-body); }
.ins-stat-sec { font: var(--t-footnote); letter-spacing: var(--tr-footnote); color: var(--label-2); }
.ins-stat-value { flex: none; font: var(--t-body); letter-spacing: var(--tr-body); }

/* ---------------------------------------------------------------- desktop */
@media (min-width: 1024px) {
  .ins-index, .ins-topic, .ins-topic-page > .ui-sec, .ins-info { max-width: var(--content-max); }
  .ins-index { columns: 2; column-gap: var(--margin); padding-right: var(--margin); }
  .ins-index > .ui-sec { break-inside: avoid; margin-bottom: var(--gap-group); }
  .ins-index .ui-sec + .ui-sec { margin-top: 0; }
  .ins-period { max-width: calc(var(--content-max) / 3); }
  .ins-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ins-cards--one { grid-template-columns: minmax(0, 1fr); max-width: calc(var(--content-max) * 2 / 3); }
  .ins-topic-page > .ui-sec { max-width: calc(var(--content-max) / 2); }
}

/* ---------------------------------------------------------------- monthly change split (charts/monthlyBars.mjs, frame.split)
   Readout of the scrubbed month (the last month at rest), a three-key
   legend, then the bars: what you added in indigo (--chart-added), the markets in the gain or
   loss colour, a white tick at the month's change. Flat fills only. */
.viz-msplit-head { margin: 0 0 8px; }
.viz-msplit-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0; font: var(--t-headline); letter-spacing: var(--tr-headline);
}
.viz-msplit-month { color: var(--label); }
.viz-msplit-change { font-variant-numeric: tabular-nums; color: var(--label); }
.viz-msplit-change.pos { color: var(--pos); }
.viz-msplit-change.neg { color: var(--neg); }
body.is-masked .viz-msplit-change { color: var(--label); }
.viz-msplit-parts {
  margin: 2px 0 0; font: var(--t-subhead); letter-spacing: var(--tr-subhead);
  color: var(--label-2); font-variant-numeric: tabular-nums;
}
.viz-msplit-legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0;
  font: var(--t-footnote); letter-spacing: var(--tr-footnote); color: var(--label-2);
}
.viz-msplit-key { display: inline-flex; align-items: center; gap: 6px; }
.viz-msplit-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--chart-added); }
.viz-msplit-sw.is-pos { background: var(--pos); }
.viz-msplit-sw.is-neg { background: var(--neg); margin-left: -4px; }
.viz-msplit-sw.is-tick { height: 2px; border-radius: 1px; background: var(--label); }
.viz-msplit .viz-msplit-added { fill: var(--chart-added); }
.viz-msplit .viz-msplit-mkt.is-pos { fill: var(--pos); }
.viz-msplit .viz-msplit-mkt.is-neg { fill: var(--neg); }
body.is-masked .viz-msplit .viz-msplit-mkt { fill: var(--label-3); }
.viz-msplit .viz-msplit-tick { stroke: var(--label); stroke-width: 2; stroke-linecap: round; }
.viz-msplit .viz-msplit-bar { transition: opacity var(--dur-fade) var(--ease-linear); }
.viz-msplit.is-scrub .viz-msplit-bar { opacity: 0.3; }
.viz-msplit.is-scrub .viz-msplit-bar.is-on { opacity: 1; }