/* BlueWorkz design system
 * ============================================================================
 * Built from the existing brand pack, not invented: Blue #0E52C9, dark-UI blue
 * #7B92FF, Ink #0F1626, Paper #FFFFFF. The mark is "the Hub" and its usage
 * rules are enforced here where CSS can enforce them (clear space, minimum
 * size, the light/dark variant swap) and stated on /styleguide/ where it
 * cannot.
 *
 * Conventions
 * -----------
 *   - Every class is prefixed `bwz-`. Block, `__element`, `--modifier`.
 *   - Light and dark are both first class. Nothing is "the dark override".
 *   - Brand hexes appear exactly once, in §1, as --bwz-brand-*. Everything
 *     else refers to a *role* token, so a component never names a colour.
 *   - Every foreground/background pair in §2 is checked against WCAG AA by
 *     core/design.py, and core/tests.py fails the build if one drops below.
 *
 * Targets: 320px minimum width, desktop and mobile parity, current and
 * previous major of Chrome, Safari, Firefox and Edge. No CSS nesting, no
 * :has(), no container queries — all four browsers support them at current,
 * not all at previous-major.
 * ============================================================================ */

/* ---------------------------------------------------------------------------
 * 1. Brand constants — the same in every theme, because they are the brand
 * ------------------------------------------------------------------------- */

:root {
  --bwz-brand-blue: #0E52C9;
  --bwz-brand-blue-dark-ui: #7B92FF;
  --bwz-brand-ink: #0F1626;
  --bwz-brand-paper: #FFFFFF;
}

/* ---------------------------------------------------------------------------
 * 2. Role tokens — light is the default, and is defined on bare :root so that
 *    no colour has its only definition inside a media query.
 * ------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Surfaces, back to front */
  --bwz-bg: #FFFFFF;
  --bwz-surface: #FFFFFF;
  --bwz-surface-2: #F4F6FB;
  --bwz-surface-3: #E9EEF7;

  /* Text */
  --bwz-fg: #0F1626;
  --bwz-fg-muted: #4A5568;
  --bwz-fg-subtle: #5C6880;

  /* Lines */
  --bwz-rule: #DDE3ED;
  --bwz-rule-strong: #B9C3D4;
  --bwz-field-border: #767F94;   /* 4.0:1 on paper — SC 1.4.11 wants 3:1 */

  /* Accent */
  --bwz-accent: #0E52C9;
  --bwz-accent-hover: #0B41A1;
  --bwz-accent-active: #083079;
  --bwz-accent-fg: #FFFFFF;
  --bwz-accent-surface: #EAF0FD;

  /* Status — the dashboard is a traffic light, so these are load-bearing */
  --bwz-ok: #0F7040;
  --bwz-ok-surface: #E6F4EC;
  --bwz-warn: #8A5300;
  --bwz-warn-surface: #FCF1DE;
  --bwz-danger: #B3251C;
  --bwz-danger-surface: #FCEBE9;

  /* Elevation. Deliberately restrained: the brand is flat. */
  --bwz-shadow-sm: 0 1px 2px rgba(15, 22, 38, 0.06);
  --bwz-shadow-md: 0 2px 8px rgba(15, 22, 38, 0.08);
  --bwz-shadow-lg: 0 12px 32px rgba(15, 22, 38, 0.12);
  --bwz-overlay: rgba(15, 22, 38, 0.55);
}

/* Dark, by system preference — unless the reader has explicitly chosen light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-bwz-theme="light"]) {
    color-scheme: dark;

    --bwz-bg: #0F1626;
    --bwz-surface: #161F33;
    --bwz-surface-2: #1C2740;
    --bwz-surface-3: #24314E;

    --bwz-fg: #EEF1F7;
    --bwz-fg-muted: #A9B4C8;
    --bwz-fg-subtle: #8F9BB1;

    --bwz-rule: #2A3853;
    --bwz-rule-strong: #3D4E70;
    --bwz-field-border: #68799F;

    --bwz-accent: #7B92FF;
    --bwz-accent-hover: #9EAFFF;
    --bwz-accent-active: #B9C5FF;
    --bwz-accent-fg: #0B1020;
    --bwz-accent-surface: #1A2444;

    --bwz-ok: #4FC98C;
    --bwz-ok-surface: #12301F;
    --bwz-warn: #E9B159;
    --bwz-warn-surface: #33260F;
    --bwz-danger: #FF8B82;
    --bwz-danger-surface: #3A1B18;

    --bwz-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bwz-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
    --bwz-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
    --bwz-overlay: rgba(4, 8, 16, 0.7);
  }
}

/* Dark, chosen explicitly. Repeated rather than shared so the toggle wins in
 * both directions: a reader on a light system can still pick dark. */
:root[data-bwz-theme="dark"] {
  color-scheme: dark;

  --bwz-bg: #0F1626;
  --bwz-surface: #161F33;
  --bwz-surface-2: #1C2740;
  --bwz-surface-3: #24314E;

  --bwz-fg: #EEF1F7;
  --bwz-fg-muted: #A9B4C8;
  --bwz-fg-subtle: #8F9BB1;

  --bwz-rule: #2A3853;
  --bwz-rule-strong: #3D4E70;
  --bwz-field-border: #68799F;

  --bwz-accent: #7B92FF;
  --bwz-accent-hover: #9EAFFF;
  --bwz-accent-active: #B9C5FF;
  --bwz-accent-fg: #0B1020;
  --bwz-accent-surface: #1A2444;

  --bwz-ok: #4FC98C;
  --bwz-ok-surface: #12301F;
  --bwz-warn: #E9B159;
  --bwz-warn-surface: #33260F;
  --bwz-danger: #FF8B82;
  --bwz-danger-surface: #3A1B18;

  --bwz-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bwz-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
  --bwz-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  --bwz-overlay: rgba(4, 8, 16, 0.7);
}

/* ---------------------------------------------------------------------------
 * 3. Type, space and shape — theme-independent
 * ------------------------------------------------------------------------- */

:root {
  --bwz-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --bwz-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Type scale. Body is fixed; headings are fluid so that a 320px phone and a
   * 1440px desktop both get a sensible measure without a breakpoint each. */
  --bwz-text-xs: 0.75rem;      /* 12px — meta, table captions            */
  --bwz-text-sm: 0.875rem;     /* 14px — helper text, badges             */
  --bwz-text-base: 1rem;       /* 16px — body. Never smaller on mobile.  */
  --bwz-text-md: 1.125rem;     /* 18px — lede                            */
  --bwz-text-lg: clamp(1.25rem, 0.5vw + 1.15rem, 1.375rem);
  --bwz-text-xl: clamp(1.5rem, 1vw + 1.3rem, 1.75rem);
  --bwz-text-2xl: clamp(1.75rem, 2vw + 1.4rem, 2.25rem);
  --bwz-text-3xl: clamp(2rem, 4vw + 1.25rem, 3rem);

  --bwz-leading-tight: 1.15;
  --bwz-leading-snug: 1.35;
  --bwz-leading-normal: 1.6;

  --bwz-weight-normal: 400;
  --bwz-weight-medium: 500;
  --bwz-weight-semibold: 600;
  --bwz-weight-bold: 700;

  --bwz-tracking-tight: -0.02em;
  --bwz-tracking-normal: 0;
  --bwz-tracking-wide: 0.08em;

  /* Spacing — a 4px base, named by step, not by intent. */
  --bwz-space-1: 0.25rem;
  --bwz-space-2: 0.5rem;
  --bwz-space-3: 0.75rem;
  --bwz-space-4: 1rem;
  --bwz-space-5: 1.5rem;
  --bwz-space-6: 2rem;
  --bwz-space-7: 3rem;
  --bwz-space-8: 4rem;
  --bwz-space-9: 6rem;

  --bwz-radius-sm: 4px;
  --bwz-radius-md: 8px;
  --bwz-radius-lg: 14px;
  --bwz-radius-full: 999px;

  --bwz-border: 1px;
  --bwz-border-thick: 2px;

  /* Layout */
  --bwz-container: 68rem;
  --bwz-container-narrow: 44rem;
  --bwz-measure: 34rem;      /* ~70 characters */
  --bwz-gutter: 1rem;

  /* The Hub mark: the centre circle is r=8 in a 48 viewBox, so its width is
   * exactly one third of the mark. That is the brand pack's clear space. */
  --bwz-mark-size: 2rem;
  --bwz-mark-clearspace: calc(var(--bwz-mark-size) / 3);
  --bwz-mark-min: 20px;      /* below this, use the favicon variant */

  --bwz-duration: 140ms;
  --bwz-ease: cubic-bezier(0.2, 0, 0.2, 1);

  --bwz-z-header: 100;
  --bwz-z-overlay: 200;
}

@media (min-width: 40em) {
  :root { --bwz-gutter: 1.5rem; }
}

/* ---------------------------------------------------------------------------
 * 4. Reset and element defaults
 * ------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol { margin: 0; }

ul[class], ol[class] { padding: 0; list-style: none; }

img, svg, video, canvas { display: block; max-width: 100%; }
img, svg { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

.bwz-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bwz-bg);
  color: var(--bwz-fg);
  font-family: var(--bwz-font-sans);
  font-size: var(--bwz-text-base);
  line-height: var(--bwz-leading-normal);
  -webkit-font-smoothing: antialiased;
  /* An overflowing table or code block must scroll inside its own box, never
   * push the page sideways. At 320px that is the difference between usable
   * and not. */
  overflow-x: hidden;
}

:focus-visible {
  outline: var(--bwz-border-thick) solid var(--bwz-accent);
  outline-offset: 2px;
  border-radius: var(--bwz-radius-sm);
}

::selection {
  background: var(--bwz-accent);
  color: var(--bwz-accent-fg);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
 * 5. Layout primitives
 * ------------------------------------------------------------------------- */

.bwz-container {
  width: 100%;
  max-width: var(--bwz-container);
  margin-inline: auto;
  padding-inline: var(--bwz-gutter);
}
.bwz-container--narrow { max-width: var(--bwz-container-narrow); }
.bwz-container--wide { max-width: 84rem; }

.bwz-main { flex: 1 0 auto; }

.bwz-section { padding-block: var(--bwz-space-7); }
.bwz-section--tight { padding-block: var(--bwz-space-5); }
.bwz-section--loose { padding-block: clamp(2.5rem, 8vw, 5.5rem); }
.bwz-section--tinted { background: var(--bwz-surface-2); }

/* Vertical rhythm without margin arithmetic in every component. */
.bwz-stack > * + * { margin-top: var(--bwz-space-4); }
.bwz-stack--tight > * + * { margin-top: var(--bwz-space-2); }
.bwz-stack--loose > * + * { margin-top: var(--bwz-space-6); }

.bwz-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bwz-space-3);
}
.bwz-cluster--between { justify-content: space-between; }

/* auto-fit, so it collapses to one column at 320px with no breakpoint. */
.bwz-grid {
  display: grid;
  gap: var(--bwz-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.bwz-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }

.bwz-measure { max-width: var(--bwz-measure); }
.bwz-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * 6. Typography
 * ------------------------------------------------------------------------- */

.bwz-h1, .bwz-h2, .bwz-h3, .bwz-h4 {
  font-weight: var(--bwz-weight-bold);
  letter-spacing: var(--bwz-tracking-tight);
  line-height: var(--bwz-leading-tight);
  text-wrap: balance;
}
.bwz-h1 { font-size: var(--bwz-text-3xl); max-width: 22ch; }
.bwz-h2 { font-size: var(--bwz-text-2xl); }
.bwz-h3 { font-size: var(--bwz-text-xl); line-height: var(--bwz-leading-snug); }
.bwz-h4 {
  font-size: var(--bwz-text-lg);
  font-weight: var(--bwz-weight-semibold);
  line-height: var(--bwz-leading-snug);
}

.bwz-eyebrow {
  font-size: var(--bwz-text-sm);
  font-weight: var(--bwz-weight-semibold);
  letter-spacing: var(--bwz-tracking-wide);
  text-transform: uppercase;
  color: var(--bwz-accent);
}

.bwz-lede {
  font-size: var(--bwz-text-md);
  max-width: var(--bwz-measure);
}
.bwz-prose { max-width: var(--bwz-measure); }
.bwz-prose > * + * { margin-top: var(--bwz-space-4); }
.bwz-muted { color: var(--bwz-fg-muted); }
.bwz-subtle { color: var(--bwz-fg-subtle); font-size: var(--bwz-text-sm); }
.bwz-meta {
  font-size: var(--bwz-text-xs);
  color: var(--bwz-fg-subtle);
  font-variant-numeric: tabular-nums;
}

.bwz-code {
  font-family: var(--bwz-font-mono);
  font-size: 0.9375em;
  background: var(--bwz-surface-3);
  border-radius: var(--bwz-radius-sm);
  padding: 0.1em 0.35em;
}

.bwz-list {
  padding-left: 1.25em;
  list-style: disc;
}
.bwz-list > li + li { margin-top: var(--bwz-space-2); }
.bwz-list--ordered { list-style: decimal; }
.bwz-list--plain { padding-left: 0; list-style: none; }

/* ---------------------------------------------------------------------------
 * 7. Links
 * ------------------------------------------------------------------------- */

a { color: var(--bwz-accent); }

.bwz-link {
  color: var(--bwz-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  border-radius: var(--bwz-radius-sm);
}
.bwz-link:hover { color: var(--bwz-accent-hover); text-decoration-thickness: 2px; }
.bwz-link:active { color: var(--bwz-accent-active); }

/* For links inside a nav or a card, where the underline is noise. It still
 * underlines on hover and focus, so it is never colour-alone. */
.bwz-link--quiet { text-decoration: none; }
.bwz-link--quiet:hover,
.bwz-link--quiet:focus-visible { text-decoration: underline; }

.bwz-link--plain { color: inherit; text-decoration: none; }
.bwz-link--plain:hover { color: var(--bwz-accent); text-decoration: underline; }

/* Keyboard users reach the content without tabbing the whole header. */
.bwz-skip {
  position: absolute;
  left: -9999px;
  top: var(--bwz-space-2);
  z-index: var(--bwz-z-overlay);
  background: var(--bwz-accent);
  color: var(--bwz-accent-fg);
  padding: var(--bwz-space-2) var(--bwz-space-4);
  border-radius: var(--bwz-radius-md);
  text-decoration: none;
}
.bwz-skip:focus { left: var(--bwz-space-2); }

/* ---------------------------------------------------------------------------
 * 8. The mark and the lockups
 *
 * The brand pack forbids recolouring, gradients, stretching, rotation, an
 * added outline and a drop shadow. There is therefore no modifier here that
 * does any of those, and nothing sets `filter` or `transform` on a mark.
 * ------------------------------------------------------------------------- */

.bwz-mark {
  display: block;
  width: var(--bwz-mark-size);
  height: var(--bwz-mark-size);
  min-width: var(--bwz-mark-min);
  min-height: var(--bwz-mark-min);
  flex: none;
}
.bwz-mark--sm { --bwz-mark-size: 1.5rem; }
.bwz-mark--lg { --bwz-mark-size: 3rem; }
.bwz-mark--xl { --bwz-mark-size: 5rem; }

/* Clear space: at least the width of the centre circle, all the way round. */
.bwz-mark--clearspace {
  box-sizing: content-box;
  padding: var(--bwz-mark-clearspace);
}

.bwz-lockup { display: block; height: auto; }
.bwz-lockup--h { width: min(16.25rem, 100%); }
.bwz-lockup--stacked { width: min(12.5rem, 100%); }

/* The colour mark is solid #0E52C9 and goes muddy on the dark ground, so the
 * white variant is swapped in by CSS rather than by script. All three theme
 * states are handled: system-light, system-dark, and an explicit choice. */
.bwz-mark--on-dark { display: none; }

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

.bwz-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--bwz-space-3);
  text-decoration: none;
  color: inherit;
  border-radius: var(--bwz-radius-md);
}
.bwz-logo__word {
  font-weight: var(--bwz-weight-bold);
  font-size: var(--bwz-text-md);
  letter-spacing: var(--bwz-tracking-tight);
  white-space: nowrap;
}
.bwz-logo__word b { color: var(--bwz-accent); font-weight: inherit; }

/* ---------------------------------------------------------------------------
 * 9. Buttons
 * ------------------------------------------------------------------------- */

.bwz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bwz-space-2);
  min-height: 44px;                 /* a real touch target at 320px */
  padding: var(--bwz-space-2) var(--bwz-space-5);
  border: var(--bwz-border-thick) solid transparent;
  border-radius: var(--bwz-radius-md);
  background: transparent;
  color: var(--bwz-fg);
  font-size: var(--bwz-text-base);
  font-weight: var(--bwz-weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--bwz-duration) var(--bwz-ease),
              border-color var(--bwz-duration) var(--bwz-ease),
              color var(--bwz-duration) var(--bwz-ease);
}

.bwz-btn--primary {
  background: var(--bwz-accent);
  border-color: var(--bwz-accent);
  color: var(--bwz-accent-fg);
}
.bwz-btn--primary:hover { background: var(--bwz-accent-hover); border-color: var(--bwz-accent-hover); }
.bwz-btn--primary:active { background: var(--bwz-accent-active); border-color: var(--bwz-accent-active); }

.bwz-btn--secondary {
  border-color: var(--bwz-accent);
  color: var(--bwz-accent);
}
.bwz-btn--secondary:hover { background: var(--bwz-accent-surface); color: var(--bwz-accent-hover); border-color: var(--bwz-accent-hover); }

.bwz-btn--ghost { color: var(--bwz-fg-muted); }
.bwz-btn--ghost:hover { background: var(--bwz-surface-2); color: var(--bwz-fg); }

.bwz-btn--danger {
  background: var(--bwz-danger);
  border-color: var(--bwz-danger);
  color: var(--bwz-brand-paper);
}
:root[data-bwz-theme="dark"] .bwz-btn--danger { color: var(--bwz-brand-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-bwz-theme="light"]) .bwz-btn--danger { color: var(--bwz-brand-ink); }
}

.bwz-btn--sm { min-height: 36px; padding: var(--bwz-space-1) var(--bwz-space-3); font-size: var(--bwz-text-sm); }
.bwz-btn--lg { min-height: 52px; padding: var(--bwz-space-3) var(--bwz-space-6); font-size: var(--bwz-text-md); }
.bwz-btn--block { display: flex; width: 100%; }

.bwz-btn[disabled],
.bwz-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.bwz-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bwz-space-3);
}
/* At 320px a row of buttons must stack rather than shrink below the target. */
@media (max-width: 22.5em) {
  .bwz-btn-group > .bwz-btn { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------------
 * 10. Cards
 * ------------------------------------------------------------------------- */

.bwz-card {
  display: flex;
  flex-direction: column;
  background: var(--bwz-surface);
  border: var(--bwz-border) solid var(--bwz-rule);
  border-radius: var(--bwz-radius-lg);
  box-shadow: var(--bwz-shadow-sm);
  overflow: hidden;
}
.bwz-card__header,
.bwz-card__body,
.bwz-card__footer { padding: var(--bwz-space-5); }
.bwz-card__header { border-bottom: var(--bwz-border) solid var(--bwz-rule); }
.bwz-card__footer {
  border-top: var(--bwz-border) solid var(--bwz-rule);
  background: var(--bwz-surface-2);
  margin-top: auto;
}
.bwz-card__title {
  font-size: var(--bwz-text-lg);
  font-weight: var(--bwz-weight-semibold);
  line-height: var(--bwz-leading-snug);
}
.bwz-card--flush { box-shadow: none; }
.bwz-card--tinted { background: var(--bwz-surface-2); }

.bwz-card--interactive { transition: border-color var(--bwz-duration) var(--bwz-ease), box-shadow var(--bwz-duration) var(--bwz-ease); }
.bwz-card--interactive:hover { border-color: var(--bwz-accent); box-shadow: var(--bwz-shadow-md); }
.bwz-card--interactive:focus-within { border-color: var(--bwz-accent); }

/* A stat tile for the dashboard. */
.bwz-stat__label {
  font-size: var(--bwz-text-sm);
  color: var(--bwz-fg-muted);
  font-weight: var(--bwz-weight-medium);
}
.bwz-stat__value {
  font-size: var(--bwz-text-2xl);
  font-weight: var(--bwz-weight-bold);
  line-height: var(--bwz-leading-tight);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--bwz-tracking-tight);
}

/* ---------------------------------------------------------------------------
 * 11. Header, nav and footer
 * ------------------------------------------------------------------------- */

.bwz-header {
  border-bottom: var(--bwz-border) solid var(--bwz-rule);
  background: var(--bwz-bg);
  padding-block: var(--bwz-space-3);
}
.bwz-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bwz-space-3);
}

/* The nav wraps rather than collapsing behind a hamburger. With a handful of
 * links that is fewer moving parts, works with no JavaScript, and at 320px it
 * is two readable rows instead of a button that hides the whole site. If the
 * link count grows past about six, revisit with a disclosure. */
.bwz-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bwz-space-1) var(--bwz-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bwz-nav__link {
  display: inline-block;
  padding: var(--bwz-space-2) 0;
  color: var(--bwz-fg-muted);
  font-weight: var(--bwz-weight-medium);
  text-decoration: none;
  border-bottom: var(--bwz-border-thick) solid transparent;
}
.bwz-nav__link:hover { color: var(--bwz-fg); border-bottom-color: var(--bwz-rule-strong); }
/* Current page is marked by weight and a rule, not by colour alone. */
.bwz-nav__link[aria-current="page"] {
  color: var(--bwz-fg);
  font-weight: var(--bwz-weight-semibold);
  border-bottom-color: var(--bwz-accent);
}

.bwz-footer {
  flex-shrink: 0;
  margin-top: var(--bwz-space-7);
  border-top: var(--bwz-border) solid var(--bwz-rule);
  background: var(--bwz-surface-2);
  padding-block: var(--bwz-space-6);
  font-size: var(--bwz-text-sm);
  color: var(--bwz-fg-muted);
}
.bwz-footer__grid {
  display: grid;
  gap: var(--bwz-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}
.bwz-footer__heading {
  font-size: var(--bwz-text-xs);
  font-weight: var(--bwz-weight-semibold);
  letter-spacing: var(--bwz-tracking-wide);
  text-transform: uppercase;
  color: var(--bwz-fg-subtle);
  margin-bottom: var(--bwz-space-2);
}
.bwz-footer__legal {
  font-size: var(--bwz-text-xs);
  color: var(--bwz-fg-subtle);
}
/* The rule above the legal line separates it from the rest of the footer, so
 * it must not appear when the legal line IS the rest of the footer -- which is
 * the case on every page until there is something to link to. */
.bwz-footer__legal:not(:first-child) {
  margin-top: var(--bwz-space-5);
  padding-top: var(--bwz-space-4);
  border-top: var(--bwz-border) solid var(--bwz-rule);
}
.bwz-footer__version { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
 * 12. Forms
 * ------------------------------------------------------------------------- */

.bwz-form { max-width: var(--bwz-measure); }
.bwz-form > * + * { margin-top: var(--bwz-space-5); }

.bwz-fieldset { border: 0; padding: 0; margin: 0; }
.bwz-fieldset__legend {
  padding: 0;
  font-size: var(--bwz-text-lg);
  font-weight: var(--bwz-weight-semibold);
  margin-bottom: var(--bwz-space-3);
}

.bwz-field { display: block; }
.bwz-field > * + * { margin-top: var(--bwz-space-2); }

.bwz-label {
  display: block;
  font-weight: var(--bwz-weight-medium);
  font-size: var(--bwz-text-sm);
}
.bwz-label__optional { color: var(--bwz-fg-subtle); font-weight: var(--bwz-weight-normal); }
.bwz-label__required { color: var(--bwz-danger); }

.bwz-input,
.bwz-textarea,
.bwz-select {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--bwz-space-2) var(--bwz-space-3);
  background: var(--bwz-surface);
  color: var(--bwz-fg);
  border: var(--bwz-border) solid var(--bwz-field-border);
  border-radius: var(--bwz-radius-md);
  /* 16px minimum, or iOS Safari zooms the whole page on focus. */
  font-size: var(--bwz-text-base);
  transition: border-color var(--bwz-duration) var(--bwz-ease);
}
.bwz-textarea { min-height: 7rem; resize: vertical; line-height: var(--bwz-leading-normal); }

.bwz-select {
  appearance: none;
  padding-right: var(--bwz-space-7);
  /* Chevron drawn in the border colour so it flips with the theme. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 0.36rem 0.36rem, 0.36rem 0.36rem;
  background-repeat: no-repeat;
}

.bwz-input:hover,
.bwz-textarea:hover,
.bwz-select:hover { border-color: var(--bwz-rule-strong); }

.bwz-input::placeholder,
.bwz-textarea::placeholder { color: var(--bwz-fg-subtle); opacity: 1; }

.bwz-input[disabled],
.bwz-textarea[disabled],
.bwz-select[disabled] {
  background: var(--bwz-surface-2);
  color: var(--bwz-fg-subtle);
  cursor: not-allowed;
}

/* Error state is driven by aria-invalid, so the styling and the accessibility
 * information cannot get out of step. */
.bwz-input[aria-invalid="true"],
.bwz-textarea[aria-invalid="true"],
.bwz-select[aria-invalid="true"] {
  border-color: var(--bwz-danger);
  border-width: var(--bwz-border-thick);
}

.bwz-help { font-size: var(--bwz-text-sm); color: var(--bwz-fg-muted); }
.bwz-error {
  display: flex;
  gap: var(--bwz-space-2);
  font-size: var(--bwz-text-sm);
  font-weight: var(--bwz-weight-medium);
  color: var(--bwz-danger);
}
/* A glyph as well as the colour: never colour alone. */
.bwz-error::before { content: "\26A0"; }

.bwz-check {
  display: flex;
  align-items: flex-start;
  gap: var(--bwz-space-3);
  cursor: pointer;
}
.bwz-check + .bwz-check { margin-top: var(--bwz-space-3); }
.bwz-check__input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.2rem 0 0;
  accent-color: var(--bwz-accent);
}
.bwz-check__label { font-size: var(--bwz-text-base); }

/* ---------------------------------------------------------------------------
 * 13. Tables
 * ------------------------------------------------------------------------- */

/* A table wider than 320px scrolls inside this, not the page. tabindex="0" on
 * the wrapper in the markup makes that scroll reachable from the keyboard. */
.bwz-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--bwz-border) solid var(--bwz-rule);
  border-radius: var(--bwz-radius-lg);
}
.bwz-table-wrap:focus-visible { outline-offset: 0; }

.bwz-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--bwz-text-sm);
  text-align: left;
}
.bwz-table caption {
  padding: var(--bwz-space-3) var(--bwz-space-4);
  text-align: left;
  font-size: var(--bwz-text-sm);
  color: var(--bwz-fg-muted);
}
.bwz-table th,
.bwz-table td {
  padding: var(--bwz-space-3) var(--bwz-space-4);
  border-bottom: var(--bwz-border) solid var(--bwz-rule);
  vertical-align: top;
}
.bwz-table thead th {
  background: var(--bwz-surface-2);
  font-weight: var(--bwz-weight-semibold);
  font-size: var(--bwz-text-xs);
  letter-spacing: var(--bwz-tracking-wide);
  text-transform: uppercase;
  color: var(--bwz-fg-muted);
  white-space: nowrap;
}
.bwz-table tbody tr:last-child td { border-bottom: 0; }
.bwz-table--striped tbody tr:nth-child(even) { background: var(--bwz-surface-2); }
.bwz-table--hover tbody tr:hover { background: var(--bwz-accent-surface); }
.bwz-table--compact th,
.bwz-table--compact td { padding: var(--bwz-space-2) var(--bwz-space-3); }
.bwz-table__num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
 * 14. Badges, status dots and callouts
 * ------------------------------------------------------------------------- */

.bwz-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bwz-space-2);
  padding: 0.15rem var(--bwz-space-3);
  border-radius: var(--bwz-radius-full);
  background: var(--bwz-surface-3);
  color: var(--bwz-fg-muted);
  font-size: var(--bwz-text-xs);
  font-weight: var(--bwz-weight-semibold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.bwz-badge--accent { background: var(--bwz-accent-surface); color: var(--bwz-accent); }
.bwz-badge--ok { background: var(--bwz-ok-surface); color: var(--bwz-ok); }
.bwz-badge--warn { background: var(--bwz-warn-surface); color: var(--bwz-warn); }
.bwz-badge--danger { background: var(--bwz-danger-surface); color: var(--bwz-danger); }

/* The traffic light. The dot is decorative; the word next to it carries the
 * meaning, because colour alone is not an accessible signal. */
.bwz-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--bwz-radius-full);
  background: currentColor;
  flex: none;
}

.bwz-callout {
  display: flex;
  gap: var(--bwz-space-3);
  padding: var(--bwz-space-4) var(--bwz-space-5);
  border-radius: var(--bwz-radius-md);
  border-left: var(--bwz-space-1) solid var(--bwz-rule-strong);
  background: var(--bwz-surface-2);
  color: var(--bwz-fg);
}
.bwz-callout__body > * + * { margin-top: var(--bwz-space-2); }
.bwz-callout__title { font-weight: var(--bwz-weight-semibold); }
.bwz-callout--accent { border-left-color: var(--bwz-accent); background: var(--bwz-accent-surface); }
.bwz-callout--ok { border-left-color: var(--bwz-ok); background: var(--bwz-ok-surface); }
.bwz-callout--warn { border-left-color: var(--bwz-warn); background: var(--bwz-warn-surface); }
.bwz-callout--danger { border-left-color: var(--bwz-danger); background: var(--bwz-danger-surface); }

.bwz-divider {
  height: var(--bwz-border);
  border: 0;
  background: var(--bwz-rule);
  margin-block: var(--bwz-space-6);
}

/* ---------------------------------------------------------------------------
 * 15. Theme toggle
 * ------------------------------------------------------------------------- */

.bwz-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--bwz-space-2);
  min-height: 36px;
  padding: var(--bwz-space-1) var(--bwz-space-3);
  border: var(--bwz-border) solid var(--bwz-rule-strong);
  border-radius: var(--bwz-radius-full);
  background: var(--bwz-surface);
  color: var(--bwz-fg-muted);
  font-size: var(--bwz-text-sm);
  font-weight: var(--bwz-weight-medium);
  cursor: pointer;
}
.bwz-theme-toggle:hover { color: var(--bwz-fg); border-color: var(--bwz-accent); }
/* Hidden until the script that drives it has run — a toggle that does nothing
 * is worse than no toggle. */
.bwz-theme-toggle[hidden] { display: none; }

/* ---------------------------------------------------------------------------
 * 16. Styleguide-only furniture. Prefixed bwz-sg- so it is obvious that none
 *     of this is part of the design system the site and dashboard consume.
 * ------------------------------------------------------------------------- */

.bwz-sg-banner {
  background: var(--bwz-warn-surface);
  color: var(--bwz-warn);
  border-bottom: var(--bwz-border) solid var(--bwz-warn);
  padding-block: var(--bwz-space-2);
  font-size: var(--bwz-text-sm);
  font-weight: var(--bwz-weight-semibold);
}

.bwz-sg-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bwz-space-2) var(--bwz-space-4);
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: var(--bwz-text-sm);
}

.bwz-sg-section { scroll-margin-top: var(--bwz-space-5); }
.bwz-sg-section + .bwz-sg-section { margin-top: var(--bwz-space-8); }
.bwz-sg-section__head {
  border-bottom: var(--bwz-border-thick) solid var(--bwz-rule);
  padding-bottom: var(--bwz-space-2);
  margin-bottom: var(--bwz-space-5);
}

.bwz-sg-demo {
  padding: var(--bwz-space-5);
  border: var(--bwz-border) dashed var(--bwz-rule-strong);
  border-radius: var(--bwz-radius-lg);
  background: var(--bwz-surface);
}
.bwz-sg-demo + .bwz-sg-demo { margin-top: var(--bwz-space-4); }
.bwz-sg-demo__label {
  font-size: var(--bwz-text-xs);
  letter-spacing: var(--bwz-tracking-wide);
  text-transform: uppercase;
  color: var(--bwz-fg-subtle);
  margin-bottom: var(--bwz-space-3);
}

.bwz-sg-swatch {
  display: flex;
  align-items: center;
  gap: var(--bwz-space-3);
  padding: var(--bwz-space-2);
  border: var(--bwz-border) solid var(--bwz-rule);
  border-radius: var(--bwz-radius-md);
  background: var(--bwz-surface);
}
.bwz-sg-swatch__chip {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: var(--bwz-radius-md);
  border: var(--bwz-border) solid var(--bwz-rule-strong);
}
.bwz-sg-swatch__name { font-weight: var(--bwz-weight-semibold); font-size: var(--bwz-text-sm); }
.bwz-sg-swatch__hex {
  font-family: var(--bwz-font-mono);
  font-size: var(--bwz-text-xs);
  color: var(--bwz-fg-muted);
  text-transform: uppercase;
}

.bwz-sg-scale { display: flex; align-items: baseline; gap: var(--bwz-space-4); flex-wrap: wrap; }
.bwz-sg-scale__token {
  font-family: var(--bwz-font-mono);
  font-size: var(--bwz-text-xs);
  color: var(--bwz-fg-subtle);
  min-width: 9rem;
}
.bwz-sg-space__bar {
  height: 1rem;
  background: var(--bwz-accent);
  border-radius: var(--bwz-radius-sm);
}
.bwz-sg-dont { color: var(--bwz-danger); font-weight: var(--bwz-weight-semibold); }
.bwz-sg-do { color: var(--bwz-ok); font-weight: var(--bwz-weight-semibold); }

/* A darkened photograph strip, to show the one place the white mark is used
 * over an image. No real photograph is shipped for this. */
.bwz-sg-photo {
  display: grid;
  place-items: center;
  min-height: 9rem;
  border-radius: var(--bwz-radius-lg);
  background:
    linear-gradient(rgba(15, 22, 38, 0.62), rgba(15, 22, 38, 0.62)),
    repeating-linear-gradient(45deg, #5b6b86 0 14px, #74849e 14px 28px);
}