/* Charts and data pages (compare.html, outlook.html). Content layer only: cards on background-secondary,
   no glass. Chart anatomy follows HIG Native Chart (hig.css styles .hig-chart__*); these rules add the
   marks this site's helper draws (js/pages/charts.js). Every color is a token. */

/* ---------- Chart card ---------- */
.chart-card {
  border-radius: var(--radius-group); background: var(--background-secondary); padding: 20px 20px 12px;
  --hig-chart-surface: var(--background-secondary);
}
.chart-card + .chart-card { margin-top: 12px; }
.chart-card__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 18px; }
.chart-card__bar .hig-segmented { min-width: min(100%, 300px); }
.chart-card__key { font: 400 15px/20px var(--font-sans); letter-spacing: -0.23px; color: var(--label-secondary); }
.chart-card__key strong { font-weight: 600; color: var(--label-primary); font-variant-numeric: tabular-nums; }
@media (max-width: 519px) {
  .chart-card { padding: 16px 14px 8px; border-radius: var(--radius-glass); }
  .chart-card__bar .hig-segmented { width: 100%; }
  .chart-card__bar .hig-segmented--ios .hig-segmented__segment { min-width: 0; }
}

.chart-card .fc-chart { --hig-chart-surface: var(--background-secondary); }
.fc-chart__header { margin-bottom: 12px; }
.fc-chart__header .hig-chart__subtitle { margin-top: 2px; max-width: 72ch; font-size: 15px; line-height: 20px; letter-spacing: -0.23px; }
.fc-chart__area { cursor: default; }
.fc-chart__area:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }
.fc-chart__plot { position: absolute; inset: 0; }
.fc-chart__plot svg { display: block; overflow: visible; }

/* Marks and labels drawn by charts.js */
/* A surface halo keeps labels legible where they cross grid lines. */
.fc-chart__label, .fc-chart__lead, .fc-chart__value, .fc-chart__ref-label { stroke: var(--hig-chart-surface); stroke-width: 4px; stroke-linejoin: round; paint-order: stroke; }
.fc-chart__label { fill: var(--label-primary); font-size: 13px; letter-spacing: -0.08px; }
.fc-chart__lead { fill: var(--label-secondary); font-size: 13px; font-weight: 600; letter-spacing: -0.08px; font-variant-numeric: tabular-nums; }
.fc-chart__value { fill: var(--label-primary); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fc-chart__value--small { font-size: 11px; }
.fc-chart__value--strong { font-weight: 700; }
.fc-chart__band { fill: var(--fill-quaternary); }
.fc-chart__break { fill: none; stroke: var(--hig-chart-surface); stroke-width: 2.5; stroke-linecap: butt; }
.fc-chart__hatch { fill: var(--hig-chart-surface); opacity: 0.6; }
.fc-chart__ref { stroke: var(--label-secondary); stroke-width: 1.5; stroke-dasharray: 5 4; }
.fc-chart__ref-label { fill: var(--label-secondary); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.fc-chart .hig-chart__legend { margin-top: 12px; gap: 6px 16px; font-size: 13px; line-height: 18px; color: var(--label-primary); }
.fc-chart .hig-chart__legend-item { gap: 6px; }
.fc-chart .hig-chart__callout { z-index: 2; box-shadow: inset 0 0 0 0.5px var(--separator); background: var(--background-primary); max-width: min(100%, 320px); white-space: normal; }
.fc-chart .hig-chart__callout-row { gap: 6px; }

.fc-chart__foot { display: flex; justify-content: flex-start; margin: 6px 0 0 -10px; }
.fc-chart__data:not(.hig-visually-hidden) { margin-top: 4px; }
@media print { .fc-chart__data { position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important; margin-top: 8px; } .fc-chart__foot { display: none; } }

/* Data tables under charts: HIG Table (iPadOS) at Subheadline size, on the card surface. */
.fc-chart__table { border-radius: var(--radius-sm); }
.fc-chart__table.hig-table--ios,
.fc-chart__table.hig-table--ios .hig-table__heading { background: transparent; }
.fc-chart__table .hig-table__grid { table-layout: auto; min-width: 360px; }
.fc-chart__table.hig-table--ios .hig-table__heading { height: 36px; font-size: 15px; line-height: 20px; letter-spacing: -0.23px; }
.fc-chart__table .hig-table__heading-label { white-space: normal; }
.fc-chart__table.hig-table--ios .hig-table__cell { height: 44px; font-size: 15px; line-height: 20px; letter-spacing: -0.23px; white-space: normal; font-weight: 400; }
.fc-chart__table.hig-table--ios th.hig-table__cell { font-weight: 400; }
.fc-chart__table.hig-table--ios .hig-table__cell:first-child,
.fc-chart__table.hig-table--ios .hig-table__heading:first-child > * { padding-left: 4px; }
.fc-chart__table.hig-table--ios .hig-table__cell:first-child { background-size: calc(100% - 4px) 1px; }
.fc-chart__table.hig-table--ios .hig-table__cell:last-child,
.fc-chart__table.hig-table--ios .hig-table__heading:last-child > * { padding-right: 4px; }

/* ---------- Compare: the sortable all-sites table ---------- */
.site-table-wrap { margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
@media (min-width: 700px) { .site-table-wrap { margin: 0; padding: 0; } }
.site-table { border-radius: var(--radius-sm); }
.site-table:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.site-table .hig-table__grid { table-layout: auto; min-width: 960px; }
.site-table.hig-table--ios .hig-table__heading { height: 44px; font-size: 15px; line-height: 20px; letter-spacing: -0.23px; }
.site-table .hig-table__heading-label { white-space: normal; text-align: inherit; }
.site-table .hig-table__sort { min-height: 44px; height: auto; padding-top: 4px; padding-bottom: 4px; }
.site-table.hig-table--ios .hig-table__cell { height: 60px; padding-top: 8px; padding-bottom: 8px; font-size: 15px; line-height: 20px; letter-spacing: -0.23px; white-space: normal; overflow: visible; }
.site-table .hig-table__row { cursor: pointer; }
.site-table .hig-table__row:hover > .hig-table__cell { background-color: var(--fill-quaternary); }
.site-table .hig-table__row:hover > .hig-table__cell.is-sticky { background-color: color-mix(in srgb, var(--background-primary), var(--label-primary) 4%); }
.site-table th.hig-table__cell { font-weight: 400; text-align: start; }
.site-table__site a { display: block; color: var(--label-primary); font-weight: 600; text-decoration: none; }
.site-table__site a:hover { text-decoration: underline; }
.site-table__id { display: block; margin-top: 1px; font-size: 13px; line-height: 18px; letter-spacing: -0.08px; color: var(--label-secondary); font-variant-numeric: tabular-nums; }
.site-table__rank { font-variant-numeric: tabular-nums; font-weight: 600; }
.site-table__unit { color: var(--label-secondary); }
.site-table .hig-table__cell--trailing { white-space: nowrap; }
/* Sticky leading columns (Rank, Site) so rows stay identifiable while the rest scrolls sideways. */
.site-table .is-sticky { position: sticky; z-index: 1; background-color: var(--background-primary); }
.site-table .hig-table__heading.is-sticky { z-index: 3; }
.site-table .is-sticky--0 { left: 0; width: 84px; min-width: 84px; max-width: 84px; }
.site-table .is-sticky--1 { left: 84px; width: 220px; min-width: 200px; }
.site-table.hig-table--ios .hig-table__cell.is-sticky--1 { box-shadow: inset 0 -1px var(--separator), inset -1px 0 var(--separator); }
.site-table.hig-table--ios .hig-table__row:last-child .hig-table__cell.is-sticky--1 { box-shadow: inset -1px 0 var(--separator); }
.site-table.hig-table--ios .hig-table__heading.is-sticky--1 { box-shadow: inset 0 -1px var(--separator), inset -1px 0 var(--separator); }
@media (min-width: 1200px) { .site-table .is-sticky--1 { width: 280px; } }

.compare-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.compare-actions .section__title { margin: 0; }
.notes { margin-top: 16px; display: grid; gap: 6px; max-width: 80ch; }
.notes p { font: 400 13px/18px var(--font-sans); letter-spacing: -0.08px; color: var(--label-secondary); }
.notes strong { font-weight: 600; color: var(--label-primary); }

/* ---------- Outlook: summary tiles (content layer, widget-like) ---------- */
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.tile {
  display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 16px 18px;
  border-radius: var(--radius-group); background: var(--background-secondary);
}
.tile__head { display: flex; align-items: center; gap: 6px; font: 600 13px/18px var(--font-sans); letter-spacing: -0.08px; color: var(--label-primary); }
.tile__head .hig-icon { color: var(--tile-tint, var(--accent)); }
.tile__value { margin-top: auto; font: 700 34px/41px var(--font-sans); letter-spacing: 0.4px; color: var(--label-primary); font-variant-numeric: tabular-nums; }
.tile__value small { font-size: 20px; font-weight: 600; letter-spacing: -0.45px; }
.tile__label { font: 400 15px/20px var(--font-sans); letter-spacing: -0.23px; color: var(--label-secondary); }

/* Scenario list: inset grouped rows on the page ground, each led by its chart symbol. */
.scenario-list.hig-list--ios { background: transparent; padding: 0; --hig-list-row-bg: var(--background-secondary); }
.scenario-list.hig-list--ios .hig-list-section__rows { background: var(--background-secondary); }
.scenario-list .hig-list-row__body { padding: 14px 0; }
.scenario-list .hig-list-row__lead { flex: none; width: 28px; display: flex; align-items: flex-start; padding-top: 18px; }
.scenario-list .hig-list-row__title { font-weight: 600; }
.scenario-list .hig-list-row__subtitle { margin-top: 2px; }
.scenario-list .hig-list-row__detail { white-space: normal; text-align: end; font-variant-numeric: tabular-nums; max-width: 14ch; font-size: 15px; line-height: 20px; }
@media (max-width: 519px) {
  .scenario-list .hig-list-row__body { flex-direction: column; gap: 4px; }
  .scenario-list .hig-list-row__trailing { justify-content: flex-start; max-width: none; }
  .scenario-list .hig-list-row__detail { text-align: start; max-width: none; }
}

.saving-grid { display: grid; gap: 12px; margin-top: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.saving { padding: 14px 16px; border-radius: var(--radius-glass); background: var(--fill-quaternary); }
.saving__year { font: 600 13px/18px var(--font-sans); letter-spacing: -0.08px; color: var(--label-primary); }
.saving__value { margin-top: 2px; font: 700 22px/28px var(--font-sans); letter-spacing: -0.26px; color: var(--label-primary); font-variant-numeric: tabular-nums; }
.saving__label { font: 400 13px/18px var(--font-sans); letter-spacing: -0.08px; color: var(--label-secondary); }

.title-note { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 10px; border-radius: var(--radius-capsule);
  background: var(--fill-tertiary); font: 600 13px/18px var(--font-sans); letter-spacing: -0.08px; color: var(--label-primary); vertical-align: 3px; white-space: nowrap; }
.title-note .hig-icon { color: var(--system-green); }
.strategy-list { margin-top: 4px; padding-inline-start: 1.2em; }
.strategy-list li + li { margin-top: 4px; }
@media (max-width: 699px) { .site-table .is-sticky--1 { width: 172px; min-width: 172px; } }

/* Score breakdown table (Compare): read-only rows, narrower than the main table */
.breakdown-table .hig-table__grid { min-width: 780px; }
.breakdown-table .hig-table__row { cursor: default; }
.breakdown-table .hig-table__row:hover > .hig-table__cell { background-color: transparent; }
.breakdown-table .hig-table__row:hover > .hig-table__cell.is-sticky { background-color: var(--background-primary); }
.breakdown-table.hig-table--ios .hig-table__heading { height: 44px; font-size: 15px; line-height: 20px; letter-spacing: -0.23px; }
.breakdown-table .hig-table__heading > .hig-table__heading-label { white-space: normal; padding-top: 4px; padding-bottom: 4px; }
.breakdown-table strong { font-weight: 600; }
.compare-gap { margin-top: 10px; max-width: 80ch; }

/* Earlier (historical) and official sweep results on Outlook: a quiet labelled block, kept apart from the list */
.earlier { margin-top: 12px; padding: 14px 16px; border-radius: var(--radius-group); background: var(--fill-quaternary); max-width: 80ch; }
.earlier[hidden] { display: none; }
.earlier__label { font: 600 13px/18px var(--font-sans); letter-spacing: -0.08px; color: var(--label-secondary); }
.earlier__text { margin-top: 4px; font: 400 15px/21px var(--font-sans); letter-spacing: -0.23px; color: var(--label-primary); }