/* Site-supplied overrides, loaded after the theme's own stylesheet.
   Two things only: the wordmark, and what an `output` block is. */

/* The topbar prints the site title as text beside the brand image. Ours IS the
   site title — "slate" set in Fraunces — so the text beside it would be the
   word twice. Hide the text and let the wordmark be the brand.

   It stays in the DOM rather than being dropped from the markup: the anchor is
   the site's "home" link and a screen reader still needs a name for it, which
   the clipped text supplies. */
.juicerdocs-brand-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sized against the topbar's own line. The theme's default assumes a square
   mark beside a text brand; ours is the brand, with no text beside it to carry
   the weight. The wordmark is 3635 × 1472, so 1.75rem of height comes to about
   4.3rem wide — well inside the theme's 8rem cap, which exists to stop a
   banner-shaped logo pushing the search and repo buttons off the row. */
.juicerdocs-brand-logo {
  height: 1.75rem;
  width: auto;
}

.juicerdocs-hero-logo {
  width: min(18rem, 55vw);
  height: auto;
}

/* An `output` block is not a program and is not highlighted — it is what the
   program above it printed. A `error` block is the diagnostic slate really
   produces for the program above it. Both are quoted rather than written, so
   they are set back from the code they belong to and marked in the margin:
   a reader scrolling a page of programs has to be able to tell at a glance
   which blocks are input and which are the machine answering.

   `docs/` is run by the test suite — every `output` is compared and every
   `error` has to be contained in the real diagnostic — so these two are the
   only fenced languages on the site that carry a guarantee. */
.juicerdocs-content pre:has(> code.language-output),
.juicerdocs-content pre:has(> code.language-error) {
  border-left: 3px solid var(--border);
  background: var(--bg-soft);
  position: relative;
  padding-top: 1.75rem;
}

.juicerdocs-content pre:has(> code.language-output)::before,
.juicerdocs-content pre:has(> code.language-error)::before {
  position: absolute;
  top: 0.4rem;
  left: 0.9rem;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-soft);
  opacity: 0.7;
}

.juicerdocs-content pre:has(> code.language-output)::before { content: "prints"; }

.juicerdocs-content pre:has(> code.language-error) {
  border-left-color: #b91c1c;
}

.juicerdocs-content pre:has(> code.language-error)::before { content: "refused"; }

[data-theme="dark"] .juicerdocs-content pre:has(> code.language-error) {
  border-left-color: #fb7185;
}

/* The wordmark is drawn in near-black and inverted for the dark theme.

   An SVG reached through an `<img>` is its own document, so `currentColor`
   inside it resolves against the SVG's own root rather than against the page —
   a mark written that way is black on both themes, and invisible on the dark
   one. A `@media (prefers-color-scheme)` inside the file follows the BROWSER
   and not the site's own toggle, which is the same defect in a different
   place. Inverting here is the one form that follows the switch a reader
   actually flips. `#101010` inverts to `#efefef`, which is neutral. */
[data-theme="dark"] .juicerdocs-brand-logo,
[data-theme="dark"] .juicerdocs-hero-logo {
  filter: invert(1);
}