/* earthpv documentation theme -- the "night lights" design system.

   The site chrome is deliberately the same design system as the interactive result
   pages it embeds (`src/earthpv/templates/pv_evidence_atlas.html`, the reference
   implementation named in CLAUDE.md's "Results-page house style"), so an atlas in an
   iframe reads as part of the page rather than as a pasted-in widget. The `--pv-*`
   block below is a verbatim copy of that template's token values: warm near-black and
   amber in dark, warm cream and burnt orange in light. Everything after it maps those
   tokens onto the Material variables the theme actually consumes.

   Keep the two token blocks in sync by eye when the atlas palette changes -- a static
   `.html` template has no way to import from a stylesheet, the same tradeoff already
   documented for the standalone scripts. `docs/assets/javascripts/embed-theme.js`
   handles the other half of "one system": Material's light/dark toggle and each
   embedded page's own toggle are independent, so it drives the iframes from the site's
   scheme instead of leaving them on the operating system preference.

   The generated figures follow the same palette from the other direction:
   `scripts/build_docs_figures.py`'s LIGHT/DARK themes carry these values too. */

/* ------------------------------------------------------------------- typography */

/* The atlas stacks, so headings and numbers render in the same faces on both sides of
   an iframe boundary. `theme.font: false` in mkdocs.yml stops Material shipping its
   own Roboto over the top (and drops the Google Fonts request with it). */
:root {
  --md-text-font: system-ui, -apple-system, "Segoe UI", Roboto;
  --md-code-font: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas;
}

/* ----------------------------------------------------------------------- tokens */

[data-md-color-scheme="default"] {
  --pv-page: #f1ebdd;
  --pv-panel: #faf6ec;
  --pv-panel-2: #f3ecdb;
  --pv-land: #e6dcc7;
  --pv-bar: #2a2216;
  --pv-ink: #2a2216;
  --pv-ink-2: #5f5540;
  --pv-muted: #857a61;
  --pv-hair: rgba(120, 80, 20, 0.16);
  --pv-card-ring: rgba(120, 80, 20, 0.14);
  --pv-accent: #c25e12;
  --pv-accent-2: #db7f24;
  --pv-domain: #1f9b8a;
  --pv-large: #1c6fa8;
  --pv-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 8px 24px rgba(80, 55, 15, 0.1);
  --pv-shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 8px rgba(80, 55, 15, 0.07);
}

[data-md-color-scheme="slate"] {
  /* Slate derives a long tail of minor surfaces (kbd, overlays, the lighter table
     rule) from `--md-hue`, so warming the hue keeps anything not overridden below
     from falling back to Material's blue-grey. */
  --md-hue: 35deg;

  --pv-page: #100d09;
  --pv-panel: #1a160f;
  --pv-panel-2: #221d14;
  --pv-land: #241f16;
  --pv-bar: #0c0a07;
  --pv-ink: #f7f1e6;
  --pv-ink-2: #c9bda4;
  --pv-muted: #93866c;
  --pv-hair: rgba(247, 183, 51, 0.14);
  --pv-card-ring: rgba(247, 183, 51, 0.1);
  --pv-accent: #f5a623;
  --pv-accent-2: #ffbf5c;
  --pv-domain: #2fd9c4;
  --pv-large: #4fb2e8;
  --pv-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 30px rgba(0, 0, 0, 0.45);
  --pv-shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* -------------------------------------------------- tokens onto Material's vars */

[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--pv-page);
  --md-default-fg-color: var(--pv-ink);
  --md-default-fg-color--light: var(--pv-ink-2);
  --md-default-fg-color--lighter: var(--pv-muted);
  --md-default-fg-color--lightest: var(--pv-hair);

  /* The header bar is the one place the palette does not follow the scheme: it stays
     the deep warm tone in both, because the logo mark is a white glyph on
     transparency and the site has always carried it on a dark bar. */
  --md-primary-fg-color: var(--pv-bar);
  --md-primary-fg-color--light: var(--pv-land);
  --md-primary-fg-color--dark: var(--pv-bar);
  --md-primary-bg-color: #f7f1e6;
  --md-primary-bg-color--light: rgba(247, 241, 230, 0.7);

  --md-accent-fg-color: var(--pv-accent-2);
  --md-accent-fg-color--transparent: rgba(245, 166, 35, 0.12);
  --md-accent-bg-color: var(--pv-page);
  --md-accent-bg-color--light: var(--pv-ink-2);

  /* Amber, not the primary bar colour, so links stay visible as links. */
  --md-typeset-a-color: var(--pv-accent);
  --md-typeset-table-color: var(--pv-hair);
  --md-typeset-mark-color: rgba(245, 166, 35, 0.24);
  --md-typeset-kbd-color: var(--pv-panel-2);
  --md-typeset-kbd-accent-color: var(--pv-panel);
  --md-typeset-kbd-border-color: var(--pv-hair);

  --md-code-fg-color: var(--pv-ink-2);
  --md-code-bg-color: var(--pv-panel-2);

  --md-admonition-fg-color: var(--pv-ink);
  --md-admonition-bg-color: var(--pv-panel);

  --md-footer-bg-color: var(--pv-bar);
  --md-footer-bg-color--dark: var(--pv-bar);
  --md-footer-fg-color: #f7f1e6;
  --md-footer-fg-color--light: rgba(247, 241, 230, 0.72);
  --md-footer-fg-color--lighter: rgba(247, 241, 230, 0.42);

  --md-shadow-z1: var(--pv-shadow-sm);
  --md-shadow-z2: var(--pv-shadow);
  --md-shadow-z3: var(--pv-shadow);
}

/* Three-slot syntax highlighting, drawn from the atlas's own three series hues
   (amber, aqua, blue) rather than Material's unrelated blues and magentas. */
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-code-hl-color: var(--pv-accent);
  --md-code-hl-color--light: rgba(245, 166, 35, 0.12);
  --md-code-hl-keyword-color: var(--pv-accent);
  --md-code-hl-string-color: var(--pv-domain);
  --md-code-hl-number-color: var(--pv-large);
  --md-code-hl-constant-color: var(--pv-large);
  --md-code-hl-function-color: var(--pv-large);
  --md-code-hl-special-color: var(--pv-accent-2);
  --md-code-hl-name-color: var(--md-code-fg-color);
  --md-code-hl-comment-color: var(--pv-muted);
  --md-code-hl-punctuation-color: var(--pv-muted);
  --md-code-hl-operator-color: var(--pv-muted);
}

/* ----------------------------------------------------------------- chrome: bars */

.md-header {
  box-shadow: none;
  border-bottom: 1px solid var(--pv-hair);
}

.md-tabs {
  border-bottom: 1px solid var(--pv-hair);
}

.md-tabs__link {
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  opacity: 0.74;
}

.md-tabs__link--active,
.md-tabs__link:hover {
  opacity: 1;
}

/* Section labels in the sidebar echo the atlas's `.sec-label`: mono, tracked, small. */
.md-nav__title {
  font-family: var(--md-code-font-family);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pv-muted);
}

.md-nav--secondary .md-nav__title {
  background: var(--md-default-bg-color);
  box-shadow: 0 0 0.4rem 0.4rem var(--md-default-bg-color);
}

.md-nav__item--section > .md-nav__link {
  font-family: var(--md-code-font-family);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pv-muted);
}

.md-nav__link--active,
.md-nav__link--active code {
  color: var(--pv-accent);
}

.md-search__form {
  background: rgba(247, 241, 230, 0.1);
  border-radius: 8px;
}

.md-search__form:hover {
  background: rgba(247, 241, 230, 0.18);
}

.md-search__output {
  border-radius: 8px;
}

/* The mark carries detail (helmet, panel grid, sun), so it needs a little more than
   Material's default 1.2rem to stay legible. The source is tightly cropped, so the
   glyph fills this box rather than floating inside it. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.5rem;
  width: auto;
}

.md-nav__title .md-nav__button.md-logo img {
  height: 2rem;
  width: auto;
}

/* Hero logo on the home page: sits above the lede, swaps with the colour scheme. */
.hero-logo {
  display: block;
  width: 84px;
  height: auto;
  margin: 0 0 1rem;
}

/* --------------------------------------------------------- typographic details */

/* Headings follow the atlas: tight tracking, heavy display weights, full-ink h1
   (Material dims it by default, which reads as a subtitle next to the atlas's). */
.md-typeset h1 {
  color: var(--pv-ink);
  font-weight: 780;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}

.md-typeset h2 {
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 2.2em;
  padding-top: 1.1em;
  border-top: 1px solid var(--pv-hair);
}

.md-typeset h2:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.md-typeset h3 {
  font-weight: 650;
  letter-spacing: -0.005em;
}

.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: var(--md-code-font-family);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pv-muted);
}

.md-typeset a {
  text-underline-offset: 0.16em;
}

.md-typeset a:hover {
  text-decoration: underline;
}

/* Numbers line up in tables and stat blocks, as they do in the atlas. */
.md-typeset table:not([class]),
.stat .value,
.md-typeset code {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ hero block */

.hero {
  border: 1px solid var(--pv-card-ring);
  border-radius: 16px;
  padding: 1.6rem 1.6rem 1.3rem;
  margin: 0 0 1.6rem;
  background: var(--pv-panel);
  box-shadow: var(--pv-shadow);
}

.hero p:first-child {
  margin-top: 0;
}

.hero .lede {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--pv-ink-2);
}

.hero .lede strong {
  color: var(--pv-ink);
  font-weight: 640;
}

/* ------------------------------------------------------------ announcement banner */

/* Site-wide top banner (OpenSustain.tech-style): a bright accent bar above the
   header on every page, filled via the `announce` block in overrides/main.html.
   `.md-banner` itself is Material's; we only restyle it here. */
.md-banner {
  background: linear-gradient(90deg, var(--pv-accent), var(--pv-accent-2));
  color: var(--pv-bar);
}

.md-banner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  text-align: center;
  font-size: 0.8rem;
}

.md-banner a {
  color: var(--pv-bar) !important;
  font-weight: 680;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.md-banner strong {
  display: inline-block;
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
  background: var(--pv-bar);
  /* Always-light text: --pv-page goes near-black in dark mode, which would vanish
     against the equally dark --pv-bar pill. The footer token is light in both schemes. */
  color: var(--md-footer-fg-color);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.md-banner__button {
  color: var(--pv-bar);
}

/* ----------------------------------------------------------- stat strip (kpis) */

/* The atlas's KPI strip is four across at its own 1280px width and drops to two below
   900px. A docs content column is ~690px with both sidebars up, so this floor lands on
   the same two-up the atlas would use there, rather than leaving a 3 + 1 orphan. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.75rem;
  margin: 1.4rem 0 1.8rem;
}

.stat {
  background: var(--pv-panel);
  border: 1px solid var(--pv-card-ring);
  border-radius: 14px;
  padding: 0.85rem 0.9rem;
  box-shadow: var(--pv-shadow);
}

.stat .value {
  display: block;
  font-size: 1.4rem;
  font-weight: 780;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--pv-accent);
}

.stat .label {
  display: block;
  font-family: var(--md-code-font-family);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--pv-muted);
  margin-top: 0.4rem;
}

/* ------------------------------------------------------------ embedded pages */

.embed {
  position: relative;
  width: 100%;
  border: 1px solid var(--pv-card-ring);
  border-radius: 16px;
  overflow: hidden;
  margin: 1.2rem 0 0.6rem;
  box-shadow: var(--pv-shadow);
}

/* The embedded page paints its own background from the same tokens, so this only
   shows as the surface behind it while it loads. */
.embed iframe {
  display: block;
  width: 100%;
  height: 760px;
  border: 0;
  background: var(--pv-page);
}

.embed.short iframe {
  height: 560px;
}

/* These pages are laid out for ~1280px. Give the columns holding one a little more
   room than the default prose measure, short of the full-bleed treatment. */
.md-grid:has(.embed) {
  max-width: 68rem;
}

/* Full-bleed pages (national dashboards): pair `.page-full-bleed` on the embed with
   `hide: [navigation, toc]` in the page's front matter. `hide` removes the left tree
   and right TOC columns; this `:has()` rule removes the leftover max-width cap on
   what's left, so the iframe fills nearly the whole viewport. Deliberately a plain
   CSS selector rather than a custom theme_dir/main.html override: overriding
   Material's own template blocks would couple this site to Material's internal
   naming across version bumps, where a `:has()` selector (supported by every
   evergreen browser since 2023) does not.
   `.md-main__inner` and `.md-grid` are the same element here, so this also zeroes
   Material's 1.5rem top margin on it -- harmless breathing room on a normal prose
   page, but it stacks with `.md-content__inner`'s own 0.6rem padding-top and
   `.page-full-bleed`'s margin below into a visibly dead empty band above a page
   that's supposed to read as edge-to-edge (measured ~95px combined, 2026-08-14). */
.md-grid:has(.page-full-bleed) {
  max-width: 100%;
  margin-top: 0;
}

/* The other half of that same stack: `.md-content__inner`'s default padding-top,
   zeroed the same way and for the same reason, scoped to full-bleed pages only. */
.md-content:has(.page-full-bleed) .md-content__inner {
  padding-top: 0;
}

/* A full-bleed page with no heading of its own gets Material's usual fallback: an
   auto-generated `<h1>` from the page/nav title, injected right before the content.
   That's redundant here (the embedded page already has its own title inside the
   iframe) and breaks the full-bleed illusion, so drop it specifically when it
   directly precedes a `.page-full-bleed` block -- never touches a real heading on
   an ordinary page. */
.md-typeset h1:has(+ .page-full-bleed) {
  display: none;
}

.page-full-bleed {
  margin: 0;
  border-radius: 12px;
}

.page-full-bleed iframe {
  width: 100%;
  height: calc(100vh - 12rem);
  min-height: 480px;
  border: 0;
  display: block;
  background: var(--pv-page);
}

.embed-note {
  font-family: var(--md-code-font-family);
  font-size: 0.64rem;
  letter-spacing: 0.03em;
  line-height: 1.7;
  color: var(--pv-muted);
  margin: 0 0 1.6rem;
}

/* --------------------------------------------------------------- figure bits */

.md-typeset figure img,
.md-typeset .figure img {
  border-radius: 10px;
}

.md-typeset figcaption {
  font-size: 0.72rem;
  color: var(--pv-ink-2);
  max-width: 60ch;
  margin: 0.4rem auto 0;
}

/* -------------------------------------------------------------------- tables */

/* The atlas table: no outer box, hairline rows, mono uppercase heads. */
.md-typeset table:not([class]) {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 0.72rem;
}

.md-typeset table:not([class]) th {
  background: transparent;
  font-family: var(--md-code-font-family);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pv-muted);
  border-bottom: 1px solid var(--pv-hair);
}

.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
  padding: 0.62em 0.9em;
}

.md-typeset table:not([class]) tbody tr:hover {
  background: var(--pv-panel);
}

/* Wide content must scroll inside itself, never the page. */
.md-typeset .md-typeset__table {
  overflow-x: auto;
}

/* --------------------------------------------------- admonitions and details */

/* Cards, in the shape of the atlas's `.xdetails`: panel fill, hairline ring, 14px
   radius. Type-coding survives as the coloured icon and the faint title tint Material
   already applies, which is as far as the atlas ever goes with a second hue -- so a
   warning still reads as a warning without a blue or amber ring around the card.

   The `[class]` in the selector is a specificity bump, not a filter: Material's own
   per-type rule is `.md-typeset .admonition.info` (three classes), so a plain
   `.md-typeset .admonition` here would lose the border colour to it. */
.md-typeset .admonition[class],
.md-typeset details[class] {
  background: var(--pv-panel);
  border: 1px solid var(--pv-card-ring);
  border-radius: 14px;
  box-shadow: var(--pv-shadow);
  font-size: 0.74rem;
  overflow: hidden;
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-weight: 650;
  padding: 0.7rem 0.8rem 0.7rem 2.2rem;
  border: 0;
  border-radius: 0;
}

.md-typeset .admonition-title::before,
.md-typeset summary::before {
  top: 0.78rem;
  left: 0.8rem;
}

.md-typeset details > summary::after {
  top: 0.78rem;
}

.md-typeset summary:focus-visible {
  outline: 2px solid var(--pv-accent);
  outline-offset: -2px;
}

/* ------------------------------------------------------------ code surfaces */

.md-typeset code {
  border-radius: 4px;
  font-size: 0.76em;
}

.md-typeset pre > code {
  border-radius: 10px;
}

.md-typeset .highlight > pre {
  border-radius: 10px;
  border: 1px solid var(--pv-card-ring);
  overflow: hidden;
}

.md-typeset blockquote {
  border-left: 2px solid var(--pv-accent);
  color: var(--pv-ink-2);
}

.md-typeset hr {
  border-bottom: 1px solid var(--pv-hair);
}

.md-typeset .tabbed-labels > label {
  font-family: var(--md-code-font-family);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------- outcome */

/* The atlas's `.tag`: mono, pill, tinted from the same three-slot palette. */
.outcome {
  display: inline-block;
  font-family: var(--md-code-font-family);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}

.outcome.works {
  background: rgba(31, 155, 138, 0.16);
  color: #17786a;
}

.outcome.mixed {
  background: rgba(219, 127, 36, 0.2);
  color: #a9530a;
}

.outcome.negative {
  background: rgba(197, 74, 58, 0.16);
  color: #a53a2c;
}

.outcome.open {
  background: rgba(28, 111, 168, 0.16);
  color: #185d8e;
}

[data-md-color-scheme="slate"] .outcome.works {
  background: rgba(47, 217, 196, 0.16);
  color: var(--pv-domain);
}

[data-md-color-scheme="slate"] .outcome.mixed {
  background: rgba(245, 166, 35, 0.2);
  color: var(--pv-accent);
}

[data-md-color-scheme="slate"] .outcome.negative {
  background: rgba(240, 138, 137, 0.16);
  color: #f08a89;
}

[data-md-color-scheme="slate"] .outcome.open {
  background: rgba(79, 178, 232, 0.18);
  color: var(--pv-large);
}