/* ---- Full-bleed chart column ----------------------------------------
   The sites cap the whole page (spacepolicies: --max-page-width 820px)
   but charts earn their width: every gcat-chart figure bleeds
   symmetrically out of the text column, up to --gcat-bleed-max or the
   viewport minus a cushion (which also absorbs a classic scrollbar),
   whichever is smaller — and never narrower than the column itself, so
   mobile is untouched. The 50% margin reference is the parent column,
   whose center coincides with the viewport center in the zen layout
   both sites use. Charts wider than the bleed still fall back to the
   inner overflow-x:auto scroll wrappers below. */
figure.gcat-chart {
  /* 820px page + 70px of bleed per side. */
  --gcat-bleed-max: 960px;
  --gcat-bleed: max(100%, min(var(--gcat-bleed-max), calc(100vw - 3rem)));
  width: var(--gcat-bleed);
  margin-inline-start: calc(50% - var(--gcat-bleed) / 2);
  /* Breathing room above/below, inside the opaque block so the
     page-colored surface carries it. */
  margin-top: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-radius: 1em;
  border-style: solid;
  border-width: 1px;
  border-color: var(--color-border, #ccc);
  /* Opaque, page-colored: the bled figure straddles the page column and
     the darker backdrop, and a transparent figure shows that seam right
     through the chart. Same var the zen .page uses, so the figure reads
     as the column widening around the chart. */
  background: var(--color-body-bg, #fff);
}

/* A bled figure must not be re-trapped: the sites give the article
   wrapper overflow-x:auto as a fallback for raw markdown tables
   (frame-table brings its own scroll div), and inside that a
   wider-than-column child scrolls right and CLIPS left instead of
   bleeding. This stylesheet only loads on pages carrying at least one
   chart, and :has() scopes the release to the wrapper that actually
   contains one. */
article.single-view:has(figure.gcat-chart) {
  overflow-x: visible;
}

/* Releasing that wrapper exposes what it silently absorbed: the sites'
   bibliography convention shows full URLs as link text, the zen theme
   only word-breaks `code`, and an unbroken 100-char URL now widens the
   PAGE instead of the article. Let long tokens wrap on chart pages. */
article.single-view:has(figure.gcat-chart) a {
  overflow-wrap: anywhere;
}

/* Chart captions run as wide as the page window, centered under the
   bled chart (unlike body prose, which keeps the theme's text measure). */
figure.gcat-chart figcaption {
  max-width: var(--max-page-width, 820px);
  margin-inline: auto;
}

/* The Count/Share view dropdown (built by render() in lib/gcat-charts.js).
   Left at the browser default it renders as a white pill sitting on a dark
   chart. `appearance: none` is what makes the colours below stick: with the
   native menulist appearance, macOS Chromium paints its own light control
   straight over a specified background-color — computed style says dark,
   pixels say white. Losing the native widget means drawing the caret here
   too, which is why the arrow is a data-URI (one per mode: an SVG background
   cannot pick up currentColor). */
select.gcat-chart-view {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 0.9rem;
  color: var(--color-text, #0b0b0b);
  background-color: var(--color-body-bg, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230b0b0b' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55em center;
  background-size: 0.6em auto;
  border: 1px solid var(--color-border-light, #c9c7c1);
  border-radius: 0.4em;
  padding: 0.2em 1.7em 0.2em 0.55em;
}

html[data-theme="dark"] select.gcat-chart-view {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23e8ebf5' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* .gcat-chart-hscroll is the renderer's own overflow-x:auto wrapper
   (lib/gcat-charts.js render()), added only when a chart (currently just
   the heatmap type) needs more width than its column has. Custom
   ::-webkit-scrollbar rules are what keep WebKit/Chromium from auto-hiding
   the bar until hover -- any such rule opts an element out of the OS
   overlay-scrollbar behavior. Firefox's non-overlay scrollbar-width /
   scrollbar-color need no such opt-out. */
.gcat-chart-hscroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, .35) rgba(0, 0, 0, .06);
}

.gcat-chart-hscroll::-webkit-scrollbar {
  height: 10px;
}

.gcat-chart-hscroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, .06);
  border-radius: 5px;
}

.gcat-chart-hscroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .35);
  border-radius: 5px;
}

.gcat-chart-hscroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, .5);
}

/* Dark mode keys off html[data-theme="dark"], NOT prefers-color-scheme: both
   sites toggle the theme manually (static/js/theme-toggle.js) and default to
   light whatever the OS says, so an OS-dark reader on a light page would
   otherwise get light-on-light scrollbars. Same attribute the renderer reads
   in lib/gcat-charts.js. */
html[data-theme="dark"] .gcat-chart-hscroll {
  scrollbar-color: rgba(255, 255, 255, .35) rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .gcat-chart-hscroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .gcat-chart-hscroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .35);
}

html[data-theme="dark"] .gcat-chart-hscroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .5);
}