/* Coalition support page
   Every rule is scoped to .csr blocks, so nothing here touches the rest of the website.
   Fonts are inherited from the site theme. Text and background colours come from the theme's
   Bootstrap variables; chart colours switch with Quarto's dark mode (body.quarto-dark). */

.csr {
  /* Taken from the site theme, with fallbacks */
  --ink: var(--bs-body-color, #1f1f1d);
  --ink2: var(--bs-secondary-color, #52514e);
  --muted: var(--bs-tertiary-color, #76746e);
  --surface: var(--bs-body-bg, #ffffff);
  --line: var(--bs-border-color-translucent, rgba(0, 0, 0, 0.12));
  /* Chart colours, light theme */
  --axis: #c3c2b7;
  --follow: #2a78d6;
  --follow-dot: rgba(42, 120, 214, 0.38);
  --follow-wash: rgba(42, 120, 214, 0.16);
  --defect: #e34948;
  --share: #eb6834;
  --share-wash: rgba(235, 104, 52, 0.24);
  --out: #ebeae4;
  --term-a: #efeee8;
  --term-b: #e6e5de;
  --muted-dot: rgba(118, 116, 110, 0.32);
  --pos: #1baf7a;
  --neg: #d55181;

  font-family: inherit;
  color: var(--ink);
  display: grid;
  gap: 14px;
  min-width: 0;
  margin-block: 0.75rem 1.75rem;
}

/* Chart colours, dark theme */
body.quarto-dark .csr {
  --axis: #55554d;
  --follow: #3987e5;
  --follow-dot: rgba(57, 135, 229, 0.45);
  --follow-wash: rgba(57, 135, 229, 0.22);
  --defect: #e66767;
  --share: #d95926;
  --share-wash: rgba(217, 89, 38, 0.34);
  --out: rgba(255, 255, 255, 0.07);
  --term-a: rgba(255, 255, 255, 0.07);
  --term-b: rgba(255, 255, 255, 0.11);
  --muted-dot: rgba(154, 152, 143, 0.32);
  --pos: #199e70;
  --neg: #d55181;
}

.csr > * { min-width: 0; }
.csr [hidden] { display: none !important; }
.csr p { margin: 0; }

/* Controls */
.csr .controls { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: flex-end; }
.csr .field { display: grid; gap: 6px; min-width: 0; }
.csr .field-label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
}
.csr .seg { display: flex; flex-wrap: wrap; gap: 4px; }
.csr .seg button {
  font: inherit; font-size: 0.85rem; line-height: 1.2; padding: 6px 11px;
  border-radius: 999px; border: 1px solid var(--line); background: transparent;
  color: var(--ink2); cursor: pointer;
}
.csr .seg button:hover { border-color: var(--axis); color: var(--ink); }
.csr .seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.csr button:focus-visible, .csr select:focus-visible, .csr summary:focus-visible {
  outline: 2px solid var(--follow); outline-offset: 2px;
}
.csr select {
  font: inherit; font-size: 0.88rem; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); max-width: 100%;
}

/* Legends */
.csr .legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.82rem; color: var(--ink2); }
.csr .legend > span { display: inline-flex; align-items: center; gap: 7px; }
.csr .legend svg { flex: none; }
.csr .sw { display: inline-block; flex: none; }
.csr .sw.share { width: 14px; height: 12px; border-radius: 2px; background: var(--share-wash); box-shadow: inset 0 -2px 0 var(--share); }
.csr .sw.out { width: 14px; height: 12px; border-radius: 2px; background: var(--out); }
.csr .sw.nodata { width: 14px; height: 12px; border-radius: 2px; background: repeating-linear-gradient(135deg, var(--axis) 0 1.5px, transparent 1.5px 5px); }
.csr .sw.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--follow-dot); }
.csr .sw.lineh { width: 18px; height: 2.5px; border-radius: 2px; background: var(--follow); }
.csr .sw.fol { width: 14px; height: 10px; border-radius: 2px; background: var(--follow); }
.csr .sw.def { width: 14px; height: 10px; border-radius: 2px; background: var(--defect); }
.csr .sw.tick { width: 3px; height: 13px; border-radius: 1px; background: var(--ink); }
.csr .sw.filled { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.csr .sw.hollow { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); }
.csr .sw.range { width: 18px; height: 4px; border-radius: 2px; background: var(--axis); }
.csr .sw.pos { width: 14px; height: 10px; border-radius: 2px; background: var(--pos); }
.csr .sw.neg { width: 14px; height: 10px; border-radius: 2px; background: var(--neg); }

/* Text around the charts */
.csr .stat { font-size: 0.88rem; color: var(--ink2); font-variant-numeric: tabular-nums; max-width: 90ch; }
.csr .stat b { color: var(--ink); font-weight: 600; }
.csr .caption { font-size: 0.8rem; color: var(--muted); max-width: 82ch; }
.csr .empty { padding: 16px; border: 1px dashed var(--axis); border-radius: 8px; color: var(--ink2); }

/* Charts */
.csr .chart { min-width: 0; color: var(--ink2); }
.csr .chart svg { font-variant-numeric: tabular-nums; max-width: none; }
.csr .stack { display: grid; gap: 2px; min-width: 0; }
.csr .bars-wrap { display: grid; gap: 6px; min-width: 0; }
.csr .axis-head { position: relative; height: 18px; font-size: 0.75rem; font-weight: 500; color: var(--muted); }
.csr .axis-head span { position: absolute; top: 0; white-space: nowrap; }
.csr .groups { display: grid; gap: 18px; min-width: 0; }
.csr .group-block { display: grid; gap: 4px; min-width: 0; }
.csr .csr-subhead { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.csr .csr-subhead span { font-weight: 400; color: var(--muted); margin-left: 6px; font-variant-numeric: tabular-nums; }

/* Data summary and flow */
.csr .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 32px; margin: 0; }
.csr .facts div { display: grid; grid-template-columns: 8.5em 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.csr .facts dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.csr .facts dd { margin: 0; color: var(--ink); font-size: 0.88rem; min-width: 0; }
.csr .flow { display: grid; gap: 18px; }
.csr .flow-row { display: grid; gap: 6px; }
.csr .flow-bar { display: flex; height: 16px; border-radius: 4px; overflow: hidden; gap: 2px; }
.csr .flow-bar i { display: block; min-width: 3px; height: 100%; }
.csr .flow-key { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 0.82rem; color: var(--ink2); font-variant-numeric: tabular-nums; }
.csr .flow-key span { display: inline-flex; align-items: center; gap: 6px; }
.csr .flow-key b { color: var(--ink); font-weight: 600; }
.csr .f0 { background: var(--follow); }
.csr .f1 { background: var(--axis); }
.csr .f2 { background: var(--muted); }
.csr .f3 { background: var(--out); }

/* Tables behind the charts */
.csr details { font-size: 0.85rem; }
.csr summary { cursor: pointer; color: var(--ink2); font-weight: 500; width: fit-content; }
.csr .table-scroll { overflow-x: auto; margin-top: 10px; max-height: 520px; overflow-y: auto; }
.csr table { border-collapse: collapse; width: 100%; font-size: 0.82rem; font-variant-numeric: tabular-nums; margin: 0; }
.csr th, .csr td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; color: var(--ink); }
.csr th {
  color: var(--muted); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase;
  position: sticky; top: 0; background: var(--surface);
}
.csr .num { text-align: right; }

@media (max-width: 560px) {
  .csr .facts div { grid-template-columns: 7.5em 1fr; }
}