/* =========================================================================
   Component — the SIDES LABS wordmark
   -------------------------------------------------------------------------
   Two files, four states, one file of rules. The images are produced by
   `themedWordmark()` and `invariantWordmark()` in **assets/js/wordmark.js** —
   its stylesheet counterpart, split out in the same change for the same reason
   — and placed by `site.js`, `portal-shell.js` and `auth-page.js`. What is shown
   when is decided HERE, because no script can read `prefers-color-scheme` back
   to the page and this has to be right before the first paint.

   WHY THIS IS ITS OWN FILE, AND WHY THAT ARGUMENT USED TO GO THE OTHER WAY
   -------------------------------------------------------------------------
   These rules lived in `components/nav.css`, under a comment that said a file
   of its own would be "a fourth <link> on 31 pages for two rules". That was a
   correct trade for the caller set it was written against: every page that
   carried a wordmark also carried chrome, so nav.css reached all of them.

   It is not the caller set any more. The six auth pages — sign-in, register,
   verify, forgot-password, reset-password, accept-invitation — carry a wordmark
   and NO chrome, and they are the first six pages an unauthenticated visitor
   sees. Reaching them from nav.css means linking a navigation stylesheet on a
   page with no navigation; reaching them from here costs one <link> on 37 pages
   and keeps every rule about the mark in one place. `L-FE-51` is the general
   form: a shared renderer brings its class names, and the calling page owes
   their stylesheet.

   WHAT THE MARK ACTUALLY IS (DESIGN_TOKENS.md §9.7, [[L-FE-58]])
   -------------------------------------------------------------------------
   Neither PNG is a word on a transparent ground. Each is a rounded PLATE with
   the word reversed out of it, so what needs a ground is the plate. Measured:
   the teal plate #136C5D reads 6.30:1 on the light panel and **2.06:1** on the
   dark one; the near-white plate #F8F8F7 reads 12.24:1 on the dark panel and
   **1.06:1** on the light one. A logotype is exempt from the WCAG minima, so
   these are design figures — but the 1.06 is a mark that is not there.

   `display: none` REMOVES AN ELEMENT FROM THE ACCESSIBILITY TREE, which is why
   both images of a pair may — and must — carry the same `alt`: exactly one of
   them is ever announced, and naming only one leaves the mark nameless in the
   other state.
   ========================================================================= */

/* --- 1. The themed pair: a mark on a surface that follows the theme -------
 *
 * THREE VIEWER STATES, WRITTEN OUT — this is `D-9` for a property that is not a
 * colour, and a design pass is exactly where it breaks. Light is the base
 * layer; the two dark layers below declare THE SAME two rules, so a screenshot
 * of the explicit state is evidence for the system one ([[L-FE-45]]).
 *
 * The swap toggles `display` on the IMAGES. Whether the wordmark is shown at
 * all is a different question with a different answer — the portal's collapsed
 * rail — and it toggles the WRAPPER. Two properties on two elements never race
 * in the cascade; the same property on one element would, and the rail rule
 * would have lost to the theme rule on specificity (0,2,1) against (0,3,0).
 *
 * BOTH VARIANTS ARE `block`, and the light one had no rule at all for a round.
 * `display: inline` is the UA default for an `<img>`, and an inline box carries
 * a baseline descender: measured in `.footer-brand`, the tagline started 53 px
 * below the brand in light and 46 px in dark — the SAME page, seven pixels apart
 * on a theme toggle. The header escaped it by luck, because `.site-brand` is a
 * flex container and flex items are blockified; the footer's wrapper is a plain
 * div and is not. Found by the code-review gate, which measured the offset in
 * both states instead of looking at one. */

.brand-logo-light {
  display: block;
}

.brand-logo-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo-light {
    display: none;
  }

  :root:not([data-theme="light"]) .brand-logo-dark {
    display: block;
  }
}

:root[data-theme="dark"] .brand-logo-light {
  display: none;
}

:root[data-theme="dark"] .brand-logo-dark {
  display: block;
}

/* --- 2. The invariant pair: a mark on a surface that is dark on screen ----
 *
 * `index.html`'s brand header. The hero it sits on is dark in BOTH themes, so
 * the theme is the wrong question to ask — the near-white plate is right on
 * screen whatever the reader's scheme is. Paper is the state where that stops
 * being true, and it is a THIRD answer rather than one of the two above:
 * invariant on screen, themed on paper.
 *
 * It is a pair of images and not one image with a swapped `src`, because CSS
 * cannot change a `src` and `@media print` is the only place that knows it is
 * paper. The splash carried a single classless `<img>` until U-732, which is
 * exactly why §1's print block below could not reach it. */

.brand-logo-screen {
  display: block;
}

.brand-logo-paper {
  display: none;
}

/* --- 3. Paper is a fourth state, and `prefers-color-scheme` still matches
   inside it ---------------------------------------------------------------
   A reader whose OS is dark prints a page whose CSS is still in dark mode, so
   §1's swap handed the printer the near-white plate — **1.06:1 on white paper**,
   which is the figure this file computes above and calls a mark that is not
   there. Measured with print media emulated and `prefers-color-scheme: dark`:
   `.brand-logo-dark` block, 125 x 34, on 30 of the 31 pages that carried chrome;
   the thirty-first was `index.html`, and §2 is what gives this block something
   to switch there.
 *
   This is the same class `tokens.css`'s print layer closes for `--brand-on-dark`
   and `print.css` closes for the gutter backgrounds — *the fill is a background,
   the label is not, and only one of them survives the printer.*
 *
   THE SELECTORS HAVE TO MATCH THE SPECIFICITY OF THE ONES THEY OVERRIDE:
   (0,3,0) against (0,3,0) for the themed pair, settled by being later in the
   same file. A bare `.brand-logo-dark` would be (0,1,0) and lose, silently, on
   paper, where nobody looks. §2's pair needs no such ceremony — nothing else
   declares those two classes — so (0,1,0) is enough and later-in-file settles
   it. */

@media print {
  :root .brand-logo-light,
  :root:not([data-theme="light"]) .brand-logo-light,
  :root[data-theme="dark"] .brand-logo-light {
    display: block;
  }

  :root .brand-logo-dark,
  :root:not([data-theme="light"]) .brand-logo-dark,
  :root[data-theme="dark"] .brand-logo-dark {
    display: none;
  }

  .brand-logo-screen {
    display: none;
  }

  .brand-logo-paper {
    display: block;
  }
}