splashboard 1.4.0

/* Terminal snapshot block, emitted by `cargo xtask` into fetcher preview pages.
   Pulls JetBrains Mono because browser-default monospace fonts render Unicode block glyphs
   (▗▟▜▛ etc.) at inconsistent widths, which breaks the column alignment our ascii_art /
   heatmap / gauge previews depend on. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

.splash-snapshot {
  position: relative;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.95rem;
  line-height: 1.15;
  letter-spacing: 0;
  font-variant-ligatures: none;
  font-feature-settings: normal;
  /* Top padding reserves room for the mock titlebar drawn via ::before; the
     bottom / sides keep the prior breathing room for the terminal content. */
  padding: 2.2rem 1rem 0.85rem 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  white-space: pre;
  tab-size: 4;
  /* Match the Splash default theme so previews read as "this is what the splash
     looks like", not "this is what splashboard renders inside Starlight's code
     block". `bg` / `text` / `panel_border` mirror `Theme::default()` in
     src/theme/mod.rs — keep them in sync if the default palette ever changes.
     Intentionally not using `prefers-color-scheme`: the Splash palette is
     dark-by-design, so a light-mode site visitor should still see the preview
     on the intended background. */
  background: #0e172a;
  color: #c5d2dc;
  border: 1px solid #4a6b75;
}

/* Mock terminal titlebar: painted in `bg_subtle` (the same lift splashboard
   itself uses for header bands) so the chrome sits above the content as a
   distinct strip. */
.splash-snapshot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.6rem;
  background: #17243b;
  border-bottom: 1px solid #4a6b75;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

/* Classic traffic-light dots — one real dot plus two cloned via box-shadow so
   a single pseudo-element carries all three. macOS colour values kept literal
   because the lights are recognisable regardless of palette. */
.splash-snapshot::after {
  content: "";
  position: absolute;
  top: 0.52rem;
  left: 0.9rem;
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow:
    0.95rem 0 0 #febc2e,
    1.9rem 0 0 #28c840;
}

/* Each terminal cell is wrapped in a fixed 1ch-wide inline-block so block glyphs (▟▜▛ etc.)
   can't drift the column alignment even when the chosen font gives them non-uniform advance
   widths. Narrower glyphs anchor to the left of the cell; wider ones get clipped — which is
   the terminal's own behaviour anyway. */
.splash-snapshot .c {
  display: inline-block;
  width: 1ch;
  overflow: hidden;
  vertical-align: top;
}

/* Linked rows from `list_links` carry the same parent text colour; underline on hover
   marks them as clickable without overpowering the snapshot. */
.splash-snapshot .splash-link {
  color: inherit;
  text-decoration: none;
}
.splash-snapshot .splash-link:hover {
  text-decoration: underline;
}

/* Landing full-dashboard preview: behaves like an image — scales to the container's width
   while preserving aspect ratio, no horizontal scroll ever. The dogfood renders at 120 cells
   so at the reference previews' fixed 0.95rem font-size it overflows narrower content
   columns; wrapping it in `.splash-landing` turns the containing box into a query container
   and pins the snapshot's `font-size` to a fraction of that width. Every other dimension
   inside the snapshot (cells via `1ch`, chrome via `em`) follows the font, so width / height
   / titlebar / dots all scale together in lockstep. */
.splash-landing {
  container-type: inline-size;
}

/* Splash template only (`:not([data-has-sidebar])` == `template === 'splash'` in
   Starlight's routing): on wide viewports, drop the hero's tall `padding-block` default
   (clamp(2.5rem, 1rem + 10vmin, 10rem) ≈ 80–160px on the bottom), then widen the
   sibling gap between .hero and .sl-markdown-content to match the 1.5em top margin
   Starlight puts on the first heading's .sl-heading-wrapper below the preview
   (≈ 3.25rem / 52px at the h2 font-size). Can't use margin-top on .splash-landing
   here — its `container-type: inline-size` establishes a BFC, so its margin doesn't
   stack predictably with `.sl-container > * + *`. */
@media (min-width: 50rem) {
  html:not([data-has-sidebar]) .hero {
    padding-block-end: 0;
  }

  html:not([data-has-sidebar]) .sl-container > * + * {
    margin-top: 3.25rem;
  }
}

.splash-landing .splash-snapshot {
  /* 120 cells × ~0.6 em per mono char + side padding ≈ 78 em of content. Divide container
     width by that with a small safety margin so content fits without a scrollbar on any
     container width; cap at 0.9rem so the snapshot doesn't balloon on ultra-wide screens. */
  font-size: min(0.9rem, calc(100cqi / 82));
  line-height: 1.15;
  /* Pad and chrome in em so they scale with the font. */
  padding: 2.3em 1em 0.85em 1em;
  /* No scroll — content scales to fit by construction. Hide any subpixel leakage. */
  overflow: hidden;
  /* The `<pre>` defaults to `width: auto` = full container width; with the safety-margin
     divisor above the rendered content is slightly narrower, leaving unused whitespace on
     the right that reads as left-aligned. Shrink the block to its actual rendered width
     and centre it in the column. */
  width: fit-content;
  margin-inline: auto;
}

.splash-landing .splash-snapshot::before {
  height: 1.7em;
}

.splash-landing .splash-snapshot::after {
  top: 0.55em;
  left: 0.95em;
  width: 0.6em;
  height: 0.6em;
  box-shadow:
    1em 0 0 #febc2e,
    2em 0 0 #28c840;
}

/* Source-config disclosure for the use cases / community gallery. The TOML body has long
   `render = { ... }` lines, so the inner `<pre>` needs an explicit horizontal scroll
   instead of pushing the whole article wider than the viewport. */
.splash-config {
  margin-block: 0.75rem 1rem;
}

.splash-config > summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--sl-color-gray-3, #94a3b8);
  user-select: none;
}

.splash-config > summary:hover {
  color: var(--sl-color-text, currentColor);
}

.splash-config > pre {
  margin-top: 0.5rem;
  max-width: 100%;
  overflow-x: auto;
  padding: 0.85rem 1rem;
  border-radius: 0.4rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.45;
  white-space: pre;
  tab-size: 2;
  background: #0e172a;
  color: #c5d2dc;
  border: 1px solid #4a6b75;
}

.splash-config > pre code {
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border: 0;
}