/* ==========================================================================
   Partnership for San Francisco — insights.css  (Insights page only)
   Charts are plain HTML and CSS. Each bar segment takes its width from an
   inline custom property (--v), so the figures can be edited in the markup.
   Sizes: 1rem = 100 Figma px (see main.css).
   ========================================================================== */

:root {
  --chart-strong-agree: #0b2a3a;
  --chart-agree: #1f4e79;
  --chart-disagree: #f33535;
  --chart-strong-disagree: #a51c2d;
  --chart-no-response: #b5b5b5;
  --chart-no-response-text: #8a8a8a;
  --chart-grid: #e5e5e5;
  --color-panel: #f4f4f4;
  --font-numeric: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Section ------------------------------------------------------------------- */
.insight { padding: var(--pt) 0 var(--pb); background: var(--color-panel); }
.insight__inner { width: 30.496rem; margin: 0 0 0 1.039rem; }   /* sits 4.7px left of centre in Figma */
.insight__heading { max-width: 22.4rem; margin: 0 0 .273rem 1.561rem; font-weight: 700; font-size: .69837rem; line-height: 1.2; }
.insight__intro { width: 27.376rem; margin: 0 0 var(--intro-gap) 1.561rem; font-size: .47512rem; line-height: .68761rem; }
.insight__intro p + p,
.chart-card__note p + p { margin-top: .68761rem; }

/* Card ---------------------------------------------------------------------- */
.chart-card { position: relative; padding: var(--card-pt) 0 var(--card-pb); background: var(--color-white); }
.chart-card__title {
  max-width: var(--title-w); margin-left: 1.116rem;
  font-weight: 600; font-size: .55875rem; line-height: 1.2; letter-spacing: .027938rem;
  text-transform: uppercase;
}
.chart-card__note { width: 28.07rem; margin: var(--note-gap) 0 0 1.235rem; font-size: .47512rem; line-height: .68761rem; }
.chart-card__note--italic { font-style: italic; }

/* Stacked bar chart --------------------------------------------------------- */
.chart { margin-top: var(--bars-top); }

.chart__badges { position: absolute; top: var(--badges-top); left: calc(24.56rem + var(--badges-dx, 0rem)); display: flex; gap: var(--neg-gap, .84rem); }
.badge {
  width: 2.32rem; height: .344rem;
  color: var(--color-white);
  font-family: var(--font-numeric); font-weight: 700; font-size: .25647rem; line-height: .344rem;
  text-align: center; text-transform: uppercase; white-space: nowrap;
}
.badge--pos { background: var(--chart-strong-agree); }
.badge--neg { background: var(--chart-strong-disagree); }
.chart__badges--tall { left: 24.73rem; gap: 1.066rem; }
.chart__badges--tall .badge { width: 1.98rem; height: .68rem; line-height: .34rem; white-space: normal; }

/* label | bar | total agree | total disagree */
.bar-row {
  display: grid;
  grid-template-columns: 4.72rem 17.958rem .65rem 2.32rem var(--neg-gap, .84rem) 2.32rem;
  height: .981rem; padding-left: 1.23rem;
}
.bar-row + .bar-row { margin-top: calc(var(--row-pitch) - .981rem); }
.bar-row__label {
  grid-column: 1; align-self: start;
  width: var(--label-w); margin-top: var(--label-dy);
  font-weight: 600; font-size: .38683rem; line-height: 1.2; letter-spacing: .019341rem;
  text-transform: uppercase;
}
.bar { grid-column: 2; display: flex; height: .981rem; }
.bar__seg { position: relative; flex: var(--v) 0 0; min-width: 0; }
.bar__seg--sa { background: var(--chart-strong-agree); color: var(--chart-strong-agree); }
.bar__seg--a  { background: var(--chart-agree); color: var(--chart-agree); }
.bar__seg--nr { background: var(--chart-no-response); color: var(--chart-no-response-text); }
.bar__seg--d  { background: var(--chart-disagree); color: var(--chart-disagree); }
.bar__seg--sd { background: var(--chart-strong-disagree); color: var(--chart-strong-disagree); }
.bar__value, .bar__caption {
  position: absolute; left: 50%; bottom: calc(100% + var(--value-gap, .085rem)); transform: translateX(-50%);
  font-weight: 700; font-size: .45347rem; line-height: 1.2; white-space: nowrap;
}
.bar-row__total {
  align-self: start; justify-self: start;
  margin-top: var(--ty, 0); padding-left: var(--tx, 0);
  font-family: var(--font-numeric); font-weight: 700; font-size: .45rem; line-height: 1.362;
  white-space: nowrap;
}
.bar-row__total--pos { grid-column: 4; color: var(--chart-strong-agree); }
.bar-row__total--neg { grid-column: 6; color: var(--chart-strong-disagree); }

/* Legend -------------------------------------------------------------------- */
.legend { display: flex; margin: var(--legend-gap) 0 0 5.953rem; color: var(--color-ink); font-weight: 500; font-size: .28234rem; line-height: 1.2; }
.legend__item { display: flex; gap: .113rem; }
.legend__item::before { content: ""; flex: none; width: .247rem; height: .36rem; margin-top: .069rem; background: currentColor; }
.legend__item span { width: 1.13rem; }
.legend__item--sa { width: 2.433rem; } .legend__item--sa::before { background: var(--chart-strong-agree); }
.legend__item--a  { width: 2.477rem; } .legend__item--a::before  { background: var(--chart-agree); }
.legend__item--d  { width: 2.793rem; } .legend__item--d::before  { background: var(--chart-disagree); }
.legend__item--sd { width: 2.571rem; } .legend__item--sd::before { background: var(--chart-strong-disagree); }
.legend__item--nr::before { background: var(--chart-no-response); }

/* "Direction" card: two single bars with captions over the segments ---------- */
.chart-card--direction { --card-pt: .816rem; --card-pb: .701rem; --note-gap: 1.092rem; --badges-top: 5.94rem; --value-gap: .111rem; }
.chart-card--direction .chart-card__title { margin-left: 1.23rem; }
.chart-card__title--second { margin-top: 1.092rem; }
.chart--wide { --bars-top: 1.8585rem; padding-left: 1.231rem; }
.chart--wide .bar { width: 22.254rem; height: 1.185rem; }
.chart--with-totals {
  --bars-top: 1.015rem;
  display: grid; grid-template-columns: 22.254rem 1.075rem 2.32rem .84rem 2.32rem;
}
.chart--with-totals .bar { grid-column: 1; }
.chart--with-totals .bar-row__total--pos { grid-column: 3; }
.chart--with-totals .bar-row__total--neg { grid-column: 5; }
.bar__caption { left: calc(50% + var(--cx, 0rem)); bottom: calc(100% + var(--value-gap, .085rem) + var(--cy, 0rem)); font-size: .37789rem; text-transform: uppercase; }
.chart--direction { --bars-top: 1.8585rem; }
/* "Right Direction / Wrong Track" badges over the totals of the Direction chart */
.chart__badges--direction { top: 2.616rem; left: 24.611rem; gap: .61rem; }
#chart-direction { --badges-dx: .135rem; --neg-gap: .589rem; }
.chart__badges--direction .badge { height: .34rem; line-height: .34rem; }
.chart__badges--direction .badge--pos { width: 2.41rem; }
.chart__badges--direction .badge--neg { width: 2.30rem; }

/* Scatter plot -------------------------------------------------------------- */
.chart-card--scatter { --card-pt: .973rem; --card-pb: .465rem; --note-gap: .954rem; --title-w: none; }
.chart-card--scatter .chart-card__title { margin-left: .936rem; white-space: nowrap; }
.chart-card--scatter .chart-card__note { width: 28.62rem; margin-left: .936rem; }
.scatter { position: relative; height: 11.452rem; margin-top: .889rem; color: var(--color-ink); font-size: .31107rem; line-height: 1.2; }
.scatter__plot { position: absolute; left: 2.26rem; top: 0; width: 27.087rem; height: 10.289rem; }
.scatter__plot::before {   /* grid lines every 20 units on both axes */
  content: ""; position: absolute; inset: -.012rem;
  background:
    repeating-linear-gradient(to right, var(--chart-grid) 0 .024rem, transparent .024rem calc((100% - .024rem) / 5)),
    repeating-linear-gradient(to bottom, var(--chart-grid) 0 .024rem, transparent .024rem calc((100% - .024rem) / 3));
}
/* x axis runs 0–100, y axis runs 40–100 */
.scatter__point { position: absolute; left: calc(var(--x) * 1%); bottom: calc((var(--y) - 40) / 60 * 100%); width: 0; height: 0; }
.scatter__point::before { content: ""; position: absolute; left: -.1435rem; top: -.1435rem; width: .287rem; height: .287rem; border-radius: 50%; background: var(--chart-strong-agree); }
.scatter__label { position: absolute; left: .262rem; top: -.215rem; white-space: nowrap; }
.scatter__x-ticks { position: absolute; left: 2.26rem; top: 10.503rem; width: 27.087rem; }
.scatter__x-ticks span { position: absolute; left: calc(var(--x) * 1%); transform: translateX(-50%); }
.scatter__y-ticks { position: absolute; left: 0; top: 0; width: 1.912rem; height: 10.289rem; }
.scatter__y-ticks span { position: absolute; right: 0; bottom: calc((var(--y) - 40) / 60 * 100%); transform: translateY(50%); margin-bottom: .03rem; }
.scatter__x-title { position: absolute; left: 2.26rem; top: 11.079rem; width: 27.087rem; text-align: center; }
.scatter__y-title { position: absolute; left: 1.13rem; top: 5.1445rem; transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap; }

/* Survey methodology -------------------------------------------------------- */
.methodology { width: 28.62rem; margin: .971rem auto 0; font-size: .37789rem; line-height: .54795rem; text-align: center; }
.methodology__heading { font-weight: 500; font-size: .47237rem; line-height: .54795rem; }
.methodology a { text-decoration: underline; text-underline-position: from-font; }

/* The last row of this chart sits 7.5px closer to the row above it in the Figma. */
#chart-perceptions .bar-row:last-child { margin-top: calc(var(--row-pitch) - .981rem - .075rem); }

/* ── Per-section and per-chart spacing, measured from the Figma file ──────────
   The design places these blocks by hand, so each one carries its own offsets.
   Values are in rem, where 1rem = 100px on the 3267px-wide Figma canvas. */
#business { --pt: 1.349rem; --intro-gap: 1.316rem; --pb: 0.648rem; }
#innovation { --pt: 0.79rem; --intro-gap: 1.314rem; --pb: 1.03rem; }
#innovation .chart-card:nth-of-type(2) { margin-top: 0.843rem; }
#optimism { --pt: 0.692rem; --intro-gap: 0.612rem; --pb: 1.32rem; }
#optimism .chart-card:nth-of-type(2) { margin-top: 1.05rem; }
#challenges { --pt: 0.447rem; --intro-gap: 1.053rem; --pb: 0.692rem; }
#challenges .chart-card:nth-of-type(2) { margin-top: 0.57rem; }
#values { --pt: 1.203rem; --intro-gap: 1.055rem; --pb: 0.831rem; }
#values .chart-card:nth-of-type(2) { margin-top: 0.652rem; }
#values .chart-card:nth-of-type(3) { margin-top: 0.652rem; }
#chart-business-environment { --neg-gap: 0.59rem; --card-pt: 1.229rem; --title-w: 21rem; --badges-top: 1.812rem; --bars-top: 2.001rem; --row-pitch: 2.6345rem; --value-gap: 0.19rem; --legend-gap: 1.161rem; --note-gap: 0.64rem; --card-pb: 0.454rem; }
#chart-innovation { --badges-dx: 0.135rem; --neg-gap: 0.589rem; --card-pt: 1.12rem; --title-w: 17rem; --badges-top: 1.796rem; --bars-top: 2.218rem; --row-pitch: 2.594rem; --value-gap: 0.179rem; --legend-gap: 0.99rem; --note-gap: 1.305rem; --card-pb: 0.445rem; }
#chart-driverless-rideshare { --badges-dx: -0.019rem; --neg-gap: 0.589rem; --card-pt: 0.89rem; --title-w: 21rem; --badges-top: 1.443rem; --bars-top: 1.955rem; --row-pitch: 2.6345rem; --value-gap: 0.085rem; --legend-gap: 1.173rem; --note-gap: 1.005rem; --card-pb: 0.734rem; }
#chart-perceptions { --badges-dx: 0.003rem; --neg-gap: 0.854rem; --card-pt: 0.634rem; --title-w: 17rem; --badges-top: 1.479rem; --bars-top: 2.266rem; --row-pitch: 2.6345rem; --value-gap: 0.085rem; --legend-gap: 0.89rem; --card-pb: 0.908rem; }
#chart-housing { --badges-dx: 0.003rem; --neg-gap: 0.854rem; --card-pt: 1.225rem; --title-w: 26rem; --badges-top: 1.823rem; --bars-top: 2.094rem; --row-pitch: 2.596rem; --value-gap: 0.085rem; --legend-gap: 1.003rem; --note-gap: 1.293rem; --card-pb: 0.598rem; }
#chart-cleanliness-safety { --badges-dx: 0.003rem; --neg-gap: 0.854rem; --card-pt: 0.975rem; --title-w: 26rem; --badges-top: 1.819rem; --bars-top: 2.034rem; --row-pitch: 2.595rem; --value-gap: 0.085rem; --legend-gap: 1.311rem; --card-pb: 0.789rem; }
#chart-transit { --badges-dx: 0.003rem; --neg-gap: 0.854rem; --card-pt: 1.224rem; --title-w: 19rem; --badges-top: 2.656rem; --bars-top: 2.517rem; --row-pitch: 2.595rem; --value-gap: 0.085rem; --legend-gap: 0.585rem; --note-gap: 1.274rem; --card-pb: 0.57rem; }
#chart-sports-teams { --card-pt: 0.974rem; --title-w: 17rem; --badges-top: 1.812rem; --bars-top: 1.955rem; --row-pitch: 2.6345rem; --value-gap: 0.19rem; --legend-gap: 1.231rem; --card-pb: 0.995rem; }