/* Causeway on this site's pages (#7566).
 *
 * The package's own sheet (js/causeway/causeway.css) draws the boxes, wires and labels and colours them
 * only through its `--cw-*` custom properties; this sheet maps those onto the site's tokens. Each token
 * named here flips with the theme (base.html's `:root` and `[data-theme="dark"]` blocks), so one block
 * serves both themes and nothing here knows which is on. The tints are mixed from a fill over the
 * surface, as the status chips' are, so a word drawn on one reads at AA in both themes
 * (tests/test_causeway_pages.py measures each through the page's cascade).
 *
 * A page puts a drawing where it already lists the same parts, in an element marked `cw-host`, and
 * keeps that list as the reading order (the drawing is aria-hidden). Below 900px the list alone is
 * shown, as the epic decided, whatever the drawing would have fitted.
 */

.cw-host .cw {
  --cw-ink: var(--sx-text);
  --cw-ink-2: var(--sx-text-2);
  --cw-ink-3: var(--sx-text-3);
  --cw-surface: var(--sx-surface);
  --cw-ground: var(--sx-surface-2);
  --cw-line: var(--sx-line);
  --cw-edge: var(--sx-text-3);
  --cw-accent: var(--sx-brand-3);
  --cw-accent-ink: var(--sx-brand-text);
  --cw-accent-soft: color-mix(in srgb, var(--sx-brand-3) 12%, var(--sx-surface));
  --cw-ok: var(--sx-ok);
  --cw-ok-ink: var(--sx-ok-text);
  --cw-ok-soft: color-mix(in srgb, var(--sx-ok) 14%, var(--sx-surface));
  --cw-warn: var(--sx-warn);
  --cw-warn-ink: var(--sx-warn-text);
  --cw-warn-soft: color-mix(in srgb, var(--sx-warn) 14%, var(--sx-surface));
  --cw-danger: var(--sx-danger);
  --cw-danger-ink: var(--sx-danger-text);
  --cw-danger-soft: color-mix(in srgb, var(--sx-danger) 14%, var(--sx-surface));
  --cw-quiet: var(--sx-line-2);
  --cw-mono: var(--sx-font-mono);
}

/* The space under a drawing belongs to its frame, so a drawing that is not shown leaves none. */
.cw-host .cw-frame {
  margin-bottom: 28px;
}

@media (max-width: 899px) {
  .cw-host .cw-frame {
    display: none;
  }
}