/*
 * The Performance chart and its metric cards (C30): one stylesheet for the
 * shared visual (templates/components/visuals/performance_chart.html) on the
 * app's Performance tab, where portfolio.html loads it, and on public pages,
 * where the visual links it. The app tokens these rules read (--card-pad-*,
 * --space-*, --fs-*, defined in portfolio.html) carry their app values as
 * fallbacks, since public pages don't define them. What only public pages
 * show is scoped to .performance-chart-embed--showcase and comes last, so it
 * wins any tie.
 */

/* ── Chart ── */
.pop2-chart-wrap { padding: var(--card-pad-y, 12px) var(--card-pad-x, 16px); }
.pop2-chart-canvas { width: 100%; }
#performance-pane .pop2-chart-canvas { height: 50vh; }

/* ── Header ── */
/* Both charts on the tab: the title with its (i) on the left, the range
   buttons on the right; on a narrow phone the buttons wrap under the title
   instead of squeezing it onto two lines. */
#performance-pane .pop2-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs, 4px) var(--space-sm, 8px);
}
/* Range buttons (both charts on the tab): 12px is the type floor (C30
   decision 4); they were 0.68rem inline. The doubled class outranks the
   page's own .pop2-btn sizes. */
.pop2-btn.pop2-range-btn {
  padding: 0.18rem 0.55rem;
  font-size: var(--fs-small, 12px);
  letter-spacing: 0.04em;
}

/* ── Metrics ── */
.pop2-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.pop2-metric {
  padding: var(--space-md, 12px);
  text-align: center;
  border-left: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
}
.pop2-metric:first-child { border-left: 0; }
.pop2-metric .label {
  color: var(--text-secondary, #c8d4e1);
  font-size: var(--fs-metric-label, 11px);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--fw-bold, 700);
}
.pop2-metric .value {
  margin-top: var(--space-xs, 4px);
  font-size: var(--fs-metric-value, 20px);
  font-weight: var(--fw-semibold, 600);
  color: var(--text-primary, #e6edf3);
  line-height: 1.1;
}
.pop2-metric .sub {
  margin-top: var(--space-xs, 4px);
  color: var(--text-muted, #a3b6c8);
  font-size: var(--fs-small, 12px);
  letter-spacing: 0.01em;
}
.pop2-metric-compare { text-align: left; padding: var(--space-md, 12px); }
.pop2-metric-compare .label { margin-bottom: var(--space-sm, 8px); }
/* The plain metric names (Messaging §10, C3) wrap to two lines on phones,
   and "Downside risk-adjusted return" does on desktop too: every compare
   card keeps two lines for its name, so the figures in a row line up.
   (Public pages line them up with a subgrid instead, below.) */
.performance-chart-embed--app .pop2-metric-compare > .label { min-height: 3.2em; min-height: 2lh; align-items: flex-start !important; justify-content: space-between; }
/* The (i) sits at the card's top right on every card, wrapped name or not. */
.pop2-metric-compare > .label > button { flex: none; }
.pop2-compare {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 4px);
}
.pop2-compare-side {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md, 12px);
}
.pop2-compare-side.right { text-align: left; }
.pop2-compare-key {
  font-size: var(--fs-body, 14px);
  letter-spacing: 0.02em;
  color: var(--text-secondary, #c8d4e1);
  /* 400, not 500: the pages load Nunito at 400/600/700 only, so 500 always
     drew as 400. Kept at the weight readers saw, in the app and on Home (C30). */
  font-weight: var(--fw-regular, 400);
}
.pop2-compare-value {
  margin-top: 0;
  font-size: var(--fs-metric-value, 20px);
  line-height: 1.08;
  font-weight: var(--fw-semibold, 600);
  color: var(--text-primary, #e6edf3);
  white-space: nowrap;
}
.pop2-metric-hint {
  margin-top: var(--space-xs, 4px);
  font-size: var(--fs-small, 12px);
  color: var(--text-muted, #a3b6c8);
  font-style: italic;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .pop2-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pop2-metric:nth-child(-n+3) { border-top: 0; }
  .pop2-metric:nth-child(n+4) { border-top: 1px solid var(--border-card, rgba(255, 255, 255, 0.08)); }
  .pop2-metric:nth-child(3n+1) { border-left: 0; }
}

/* Phones: at 50vh the chart was ~420px tall on a 390px-wide phone, most of a
   screen before any figure; ~300px keeps the line and the first cards in
   reach. Desktop keeps 50vh. */
@media (max-width: 576px) {
  #performance-pane .pop2-chart-canvas { height: 300px; }
}

@media (max-width: 480px) {
  /* §3 – Chart: tighter wrap padding */
  .pop2-chart-wrap { padding: var(--space-xs, 4px) var(--space-md, 12px); }

  /* §4 – Metrics grid: 2-col, tighter internal padding */
  .pop2-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pop2-metric:nth-child(-n+2) { border-top: 0; }
  .pop2-metric:nth-child(n+3) { border-top: 1px solid var(--border-card, rgba(255, 255, 255, 0.08)); }
  .pop2-metric:nth-child(2n+1) { border-left: 0; }
  .pop2-metric:nth-child(2n) { border-left: 1px solid var(--border-card, rgba(255, 255, 255, 0.08)); }
  .pop2-metric { padding: var(--space-sm, 8px); }
  .pop2-metric-compare { padding: var(--space-sm, 8px); }
  .pop2-metric .value,
  .pop2-compare-value { font-size: var(--fs-metric-value, 20px); margin-top: 2px; }
  .pop2-metric .label,
  .pop2-compare-key { font-size: var(--fs-small, 12px); }
  /* The note under a figure keeps the 12px type floor (it was 0.67rem). */
  .pop2-metric .sub { margin-top: 2px; }
}

/* ── Public pages (showcase) ──
   Moved from the visual's inline <style>: the card frame, a two-column card
   grid with its names on a subgrid, and the caption. */
.performance-chart-embed--showcase {
  --pce-bg-card: #0c1526;
  --pce-border: rgba(255, 255, 255, 0.08);
  --pce-border-muted: rgba(255, 255, 255, 0.06);
  --pce-text: #e6edf3;
  --pce-text-secondary: #c8d4e1;
  --pce-text-muted: #a3b6c8;
  --pce-accent-green: #34d399;
  --pce-accent-red: #fb8a8a;
  margin: 0 auto;
}
.performance-chart-embed--showcase .pop2-card-row { margin-bottom: 0.75rem; }
/* The caption sits between the chart and the cards (founder 2026-10-10, C44),
   so it keeps the cards at the same distance the chart does. Scoped to the
   embed so it outranks the public site's `.ps p { margin: 0 }`. */
.performance-chart-embed--showcase .performance-chart-caption {
  margin: 0 0 0.75rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted, #a3b6c8);
}
.performance-chart-embed--showcase .pop2-card {
  background: var(--pce-bg-card);
  border: 1px solid var(--pce-border-muted);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: none;
}
.performance-chart-embed--showcase .pop2-card-head {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--pce-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.performance-chart-embed--showcase .pop2-kicker {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pce-text-secondary);
  font-weight: 700;
  margin: 0;
}
.performance-chart-embed--showcase .pop2-chart-wrap { padding: 0.75rem 1rem; }
.performance-chart-embed--showcase .pop2-chart-canvas {
  width: 100%;
  min-height: clamp(220px, 32vh, 275px);
}
.performance-chart-embed--showcase .pop2-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.performance-chart-embed--showcase .pop2-metric {
  padding: 0.85rem 1rem;
  text-align: center;
  border-left: 1px solid var(--pce-border);
}
.performance-chart-embed--showcase .pop2-metric:nth-child(2n+1) { border-left: 0; }
.performance-chart-embed--showcase .pop2-metric:nth-child(-n+2) { border-top: 0; }
.performance-chart-embed--showcase .pop2-metric:nth-child(n+3) { border-top: 1px solid var(--pce-border); }
.performance-chart-embed--showcase .pop2-metric .label {
  color: var(--pce-text-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.performance-chart-embed--showcase .pop2-metric-compare { text-align: left; padding: 0.75rem; }
.performance-chart-embed--showcase .pop2-metric-compare .label { margin-bottom: 0.5rem; }
/* The name's (i) (founder 2026-10-11, C44), after its last word: the public
   meta colour (!important: the shared .text-secondary sets the app's colour
   with it). The tap target is 24px square; the negative margins lay it out at
   the glyph's own 1em, so it adds nothing to the name's line. The focus ring
   is the site's 2px #c4b5fd, 1px off the glyph rather than 2px: the name
   ends 4px before the glyph, and a wider ring would cross its last letter. */
.performance-chart-embed--showcase .pop2-metric-compare > .label button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: calc((1em - 24px) / 2);
  vertical-align: baseline;
  border-radius: 50%;
  color: var(--pce-text-muted) !important;
}
.performance-chart-embed--showcase .pop2-metric-compare > .label button:focus-visible {
  outline: 2px solid var(--ss-focus-ring, #c4b5fd);
  outline-offset: calc((1em - 24px) / 2 + 1px);
  box-shadow: none;
}
/* Each card is two rows (name, figures) on its row pair's subgrid, so a
   name that wraps ("Downside risk-adjusted return" on phones) never pushes
   its figures below the neighbouring card's. */
.performance-chart-embed--showcase .pop2-metric-compare {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  align-content: start;
}
.performance-chart-embed--showcase .pop2-compare { display: flex; flex-direction: column; gap: 0.25rem; }
.performance-chart-embed--showcase .pop2-compare-side {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.performance-chart-embed--showcase .pop2-compare-key {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--pce-text-secondary);
  font-weight: 400;
}
.performance-chart-embed--showcase .pop2-compare-value {
  margin-top: 0;
  font-size: 1.25rem;
  line-height: 1.08;
  font-weight: 600;
  color: var(--pce-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.performance-chart-embed--showcase .pop2-pos { color: var(--pce-accent-green); font-weight: 700; }
.performance-chart-embed--showcase .pop2-neg { color: var(--pce-accent-red); font-weight: 700; }
.performance-chart-embed--showcase .pop2-muted { color: var(--pce-text-muted); }
/* Phones show the first two cards only (Annualized growth, Largest decline):
   fewer numbers on a small screen (founder 2026-10-10, C44). 576px and up keep
   all four; each card's (i) explains its metric. */
@media (max-width: 575.98px) {
  .performance-chart-embed--showcase .pop2-metric:nth-child(n+3) { display: none; }
}
@media (max-width: 420px) {
  .performance-chart-embed--showcase .pop2-compare-side { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
  .performance-chart-embed--showcase .pop2-compare-side.right { text-align: left; }
}

/* ── Return card (A153) ──
   The chart's name, then the period its figures cover. The separator is drawn
   here so the period's text is only the period (performance-chart.js rewrites
   it per range); on a phone the period takes its own line under the name
   instead of crowding the range buttons (founder 2026-10-14). */
.performance-period::before { content: "\00b7"; margin: 0 0.4em; }
/* The period's own return reads at the metric cards' size and weight
   (founder 2026-10-14: "at least the same weight as metrics numbers"), and
   its labels at the 12px floor. */
.performance-return-summary .investment-growth-summary__value {
  font-size: var(--fs-metric-value, 20px);
  line-height: 1.1;
}
.performance-return-summary .investment-growth-summary__label { font-size: var(--fs-small, 12px); }
@media (max-width: 575.98px) {
  .performance-period { display: block; }
  .performance-period::before { content: none; }
  .performance-return-summary .investment-growth-summary__value { font-size: var(--fs-metric-value, 20px); }
}