/* ==========================================================================
   BERIFFA Design System: components (components/beriffa.css)

   A framework-agnostic CSS component library built only on the system's
   tokens. Every colour, type style, space, radius, line, shadow, duration
   and layer comes from tokens/tokens.css; this file adds no colour of its own.

   Load, in this order:
     <link rel="stylesheet" href="fonts/fonts.css">
     <link rel="stylesheet" href="tokens/tokens.css">
     <link rel="stylesheet" href="components/beriffa.css">
   components/bundle.css is a byte-identical copy (the Design System artifact
   loads that name). scripts/build-components.mjs keeps the two in step and
   fills the fallback values of the theme-independent type tokens, so the
   components also render where only the artifact's compiled tokens load.

   Conventions (components/README.md has the full list):
     .b-<block>              a component, for example .b-button, .b-panel
     .b-<block>__<part>      a part of it, for example .b-panel__head
     .b-<block>--<variant>   a variant or size, for example .b-button--primary
     data-tone="..."         status tone: ok, warn, bad, info, neutral, plus
                             the shape tones maintenance, awaiting, unknown
                             and accent (ink). success = ok, muted = neutral.
     data-state="..."        component state: loading, open, closed, active,
                             selected, checked, copied, invalid
     ARIA and native states  :disabled, :checked, aria-current, aria-selected,
                             aria-invalid, aria-busy, aria-expanded also work
     data-force="..."        hover, focus or pressed, pinned for documentation
                             (previews, sheets); never set it in a product
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Private shapes and tone variables
   The status grammar draws each tone as a shape: ok a filled circle, warn a
   filled triangle, bad a filled square, info a filled diamond, neutral a
   hollow ring, maintenance a dashed ring, awaiting a hollow diamond. The
   shapes are alpha masks, so their colour always comes from a token.
   -------------------------------------------------------------------------- */
:root {
  --b-mask-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='4.4'/%3E%3C/svg%3E");
  --b-mask-triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 1 9.5 9H.5Z' stroke='black' stroke-width='.7' stroke-linejoin='round'/%3E%3C/svg%3E");
  --b-mask-square: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='1.1' y='1.1' width='7.8' height='7.8' rx='1.2'/%3E%3C/svg%3E");
  --b-mask-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 .3 9.7 5 5 9.7.3 5Z' stroke='black' stroke-width='.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  --b-mask-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='3.7' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
  --b-mask-ring-dashed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='3.7' fill='none' stroke='black' stroke-width='1.5' stroke-dasharray='1.6 1.306'/%3E%3C/svg%3E");
  --b-mask-diamond-hollow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 1.1 8.9 5 5 8.9 1.1 5Z' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Map markers are drawn on a 16-unit box so their strokes are 1.5px at 16px. */
  --b-mask-map-square: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2.25' y='2.25' width='11.5' height='11.5' rx='1.5'/%3E%3C/svg%3E");
  --b-mask-map-triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2 14.4 13.3H1.6Z' stroke='black' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
  --b-mask-map-diamond-hollow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2 14 8 8 14 2 8Z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --b-mask-map-ring-dashed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.75' fill='none' stroke='black' stroke-width='1.5' stroke-dasharray='2 2.014'/%3E%3C/svg%3E");
  --b-mask-map-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.75' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
  --b-mask-map-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4'/%3E%3C/svg%3E");
  /* Filled halos sit under every map marker (map-marker-halo), so routes and land dots knock out. */
  --b-mask-map-halo-square: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.25' y='2.25' width='15.5' height='15.5' rx='2.5'/%3E%3C/svg%3E");
  --b-mask-map-halo-triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6 18.4 16.9H1.6Z' stroke='black' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --b-mask-map-halo-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5 18.5 10 10 18.5 1.5 10Z' stroke='black' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
  --b-mask-map-halo-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5'/%3E%3C/svg%3E");

  /* Generic affordances (Lucide paths, ISC licence; see scripts/components/LICENSE-lucide.txt). */
  --b-mask-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --b-mask-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --b-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --b-mask-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}

/* Tone variables. data-tone sets them on the element and its descendants. */
[data-tone="ok"], [data-tone="success"] { --b-tone-mark: var(--ok); --b-tone-text: var(--ok-text); --b-tone-wash: var(--ok-wash); --b-tone-line: var(--ok-line); --b-shape: var(--b-mask-circle); }
[data-tone="warn"] { --b-tone-mark: var(--warn); --b-tone-text: var(--warn-text); --b-tone-wash: var(--warn-wash); --b-tone-line: var(--warn-line); --b-shape: var(--b-mask-triangle); }
[data-tone="maintenance"] { --b-tone-mark: var(--warn); --b-tone-text: var(--warn-text); --b-tone-wash: var(--warn-wash); --b-tone-line: var(--warn-line); --b-shape: var(--b-mask-ring-dashed); }
[data-tone="bad"] { --b-tone-mark: var(--bad); --b-tone-text: var(--bad-text); --b-tone-wash: var(--bad-wash); --b-tone-line: var(--bad-line); --b-shape: var(--b-mask-square); }
[data-tone="info"] { --b-tone-mark: var(--info); --b-tone-text: var(--info-text); --b-tone-wash: var(--info-wash); --b-tone-line: var(--info-line); --b-shape: var(--b-mask-diamond); }
[data-tone="awaiting"] { --b-tone-mark: var(--info); --b-tone-text: var(--info-text); --b-tone-wash: var(--info-wash); --b-tone-line: var(--info-line); --b-shape: var(--b-mask-diamond-hollow); }
[data-tone="neutral"], [data-tone="muted"], [data-tone="unknown"] { --b-tone-mark: var(--neutral); --b-tone-text: var(--neutral-text); --b-tone-wash: var(--neutral-wash); --b-tone-line: var(--neutral-line); --b-shape: var(--b-mask-ring); }
[data-tone="accent"] { --b-tone-mark: var(--accent); --b-tone-text: var(--accent-text); --b-tone-wash: var(--accent-wash); --b-tone-line: var(--accent-line); --b-shape: none; }


/* --------------------------------------------------------------------------
   2. Base
   Opt in with class="b-root" on <html> or <body>. Components do not depend on
   it, but it sets the ground, the ink, Geist and the selection colour.
   -------------------------------------------------------------------------- */
[class^="b-"], [class*=" b-"],
[class^="b-"]::before, [class*=" b-"]::before,
[class^="b-"]::after, [class*=" b-"]::after { box-sizing: border-box; }

.b-root {
  margin: 0;
  background: var(--bg-ground);
  color: var(--text-1);
  font: var(--type-body-font, 400 1rem/1.5 var(--font-sans));
  letter-spacing: var(--type-body-tracking, 0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.b-root ::selection { background: var(--selection-bg); color: var(--text-1); }
.b-root :focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }

/* Native controls and scrollbars follow the theme. */
:root, [data-theme="light"], .light { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not(.light) { color-scheme: dark; } }
:root[data-theme="dark"], [data-theme="dark"], .dark { color-scheme: dark; }

/* Show an element in one theme only (both logo files, theme previews). Hide-only rules on the
   root theme, so the element keeps its own display value when it shows. */
:root[data-theme="light"] .b-on-dark, :root.light .b-on-dark,
:root[data-theme="dark"] .b-on-light, :root.dark .b-on-light { display: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme]):not(.dark):not(.light) .b-on-dark { display: none; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme]):not(.dark):not(.light) .b-on-light { display: none; } }

/* Visually hidden, still read by screen readers. */
.b-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Skip link: hidden until focused. */
.b-skip-link {
  position: absolute; left: var(--space-4); top: var(--space-2); z-index: var(--z-toast);
  transform: translateY(-200%);
  padding: 0 var(--space-3); height: var(--control-h-md); display: inline-flex; align-items: center;
  border-radius: var(--radius-md); background: var(--primary); color: var(--on-primary);
  font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); font-weight: 500; text-decoration: none;
}
.b-skip-link:focus-visible { transform: none; outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }


/* --------------------------------------------------------------------------
   3. Type roles (one class per style in tokens.json)
   Geist and Geist Mono only; weights 400, 500 and 600; no italics.
   -------------------------------------------------------------------------- */
.b-display, .b-h1, .b-section-title, .b-h2, .b-h3, .b-h4, .b-stat-number { margin: 0; color: var(--text-1); }
.b-display { font: var(--type-display-font, 600 3.5rem/1.071 var(--font-sans)); letter-spacing: var(--type-display-tracking, -0.025em); text-wrap: balance; max-width: 16ch; }
.b-h1 { font: var(--type-h1-font, 600 2.25rem/1.111 var(--font-sans)); letter-spacing: var(--type-h1-tracking, -0.025em); text-wrap: balance; }
/* Section title: a band title on a public marketing page (beriffa.com), the old site's section scale; 30px on phones. */
.b-section-title { font: var(--type-section-title-font, 600 2.5rem/1.1 var(--font-sans)); letter-spacing: var(--type-section-title-tracking, -0.025em); text-wrap: balance; max-width: 24ch; }
.b-h2 { font: var(--type-h2-font, 600 1.375rem/1.364 var(--font-sans)); letter-spacing: var(--type-h2-tracking, -0.015em); text-wrap: balance; }
.b-h3 { font: var(--type-h3-font, 600 1.125rem/1.444 var(--font-sans)); letter-spacing: var(--type-h3-tracking, -0.01em); }
.b-h4 { font: var(--type-h4-font, 600 1rem/1.5 var(--font-sans)); letter-spacing: var(--type-h4-tracking, 0); }
.b-stat-number { font: var(--type-stat-font, 600 2.25rem/1 var(--font-sans)); letter-spacing: var(--type-stat-tracking, -0.025em); font-variant-numeric: var(--font-numeric, tabular-nums); }
.b-lede { margin: 0; font: var(--type-lede-font, 400 1.125rem/1.556 var(--font-sans)); letter-spacing: var(--type-lede-tracking, 0); color: var(--text-2); max-width: var(--measure-reading); text-wrap: pretty; }
.b-lede strong, .b-lede b { font-weight: 500; color: var(--text-1); }
.b-reading { font: var(--type-reading-font, 400 1.0625rem/1.647 var(--font-sans)); letter-spacing: var(--type-reading-tracking, 0); max-width: var(--measure-reading); text-wrap: pretty; }
.b-body { margin: 0; font: var(--type-body-font, 400 1rem/1.5 var(--font-sans)); letter-spacing: var(--type-body-tracking, 0); }
.b-ui { margin: 0; font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); letter-spacing: var(--type-ui-tracking, 0); }
.b-small { margin: 0; font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); letter-spacing: var(--type-small-tracking, 0); }
.b-eyebrow {
  margin: 0; font: var(--type-label-font, 500 0.8125rem/1.385 var(--font-mono)); letter-spacing: var(--type-label-tracking, 0.1em);
  text-transform: uppercase; font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero); color: var(--text-3);
}
.b-mono { font: var(--type-mono-font, 400 0.875rem/1.429 var(--font-mono)); letter-spacing: var(--type-mono-tracking, 0); font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero); }
.b-mono-value { font: var(--type-mono-value-font, 400 1rem/1.5 var(--font-mono)); letter-spacing: var(--type-mono-value-tracking, 0); font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero); }
.b-mono-fact { font: var(--type-mono-fact-font, 400 1.75rem/1.286 var(--font-mono)); letter-spacing: var(--type-mono-fact-tracking, 0); font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero); }
.b-mono-small { font: var(--type-mono-small-font, 400 0.8125rem/1.385 var(--font-mono)); letter-spacing: var(--type-mono-small-tracking, 0.02em); font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero); }
.b-map-region {
  font: var(--type-map-region-font, 500 0.75rem/1.333 var(--font-mono)); letter-spacing: var(--type-map-region-tracking, 0.2em);
  text-transform: uppercase; color: var(--text-3);
}
/* A literal inside a heading keeps its own mono size, at 500 (mono is never 600). */
:is(.b-display, .b-h1, .b-section-title, .b-h2, .b-h3, .b-h4) :is(.b-mono, .b-mono-value, .b-mono-small) { font-weight: 500; letter-spacing: 0; }
.b-text-1 { color: var(--text-1); }
.b-text-2 { color: var(--text-2); }
.b-text-3 { color: var(--text-3); }
.b-medium { font-weight: 500; }
.b-num { font-variant-numeric: var(--font-numeric, tabular-nums); }
.b-tone-text { color: var(--b-tone-text, var(--text-2)); }
.b-measure { max-width: var(--measure-reading); }
.b-measure-wide { max-width: var(--measure-wide); }

/* An empty value is a word ("Not set", "No data", "Never"), never a dash or a zero. */
.b-empty-value { font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); font-variant-numeric: var(--font-numeric, tabular-nums); }


/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.b-stack { display: flex; flex-direction: column; gap: var(--b-gap, var(--space-4)); min-width: 0; }
.b-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-gap, var(--space-2)); min-width: 0; }
.b-spread { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--b-gap, var(--space-4)); min-width: 0; }
.b-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--b-col, 240px)), 1fr)); gap: var(--b-gap, var(--space-6)); min-width: 0; }
.b-gap-0 { --b-gap: var(--space-0); }
.b-gap-1 { --b-gap: var(--space-1); }
.b-gap-2 { --b-gap: var(--space-2); }
.b-gap-3 { --b-gap: var(--space-3); }
.b-gap-4 { --b-gap: var(--space-4); }
.b-gap-5 { --b-gap: var(--space-5); }
.b-gap-6 { --b-gap: var(--space-6); }
.b-gap-8 { --b-gap: var(--space-8); }
.b-pad-4 { padding: var(--space-4); }
.b-pad-5 { padding: var(--space-5); }
.b-pad-6 { padding: var(--space-6); }
.b-pad-8 { padding: var(--space-8); }
.b-align-start { align-items: flex-start; }
.b-grow { flex: 1 1 auto; min-width: 0; }
.b-list-reset { margin: 0; padding: 0; list-style: none; }
.b-divider { height: 0; margin: 0; border: 0; border-top: var(--border-hairline) solid var(--line); align-self: stretch; }
.b-divider--subtle { border-top-color: var(--line-subtle); }


/* --------------------------------------------------------------------------
   5. Icons and spinner
   Icons are inline SVG (assets/icons/<cut>/<name>.svg or the sprite) and wear
   currentColor. Pick the cut by rendered size: 16 below 18px, 20 from 18 to
   21px, 24 from 22px.
   -------------------------------------------------------------------------- */
.b-icon { display: inline-block; flex: none; width: var(--b-icon-size, 16px); height: var(--b-icon-size, 16px); vertical-align: middle; }
.b-icon--15 { --b-icon-size: 15px; }
.b-icon--16 { --b-icon-size: 16px; }
.b-icon--18 { --b-icon-size: 18px; }
.b-icon--20 { --b-icon-size: 20px; }
.b-icon--24 { --b-icon-size: 24px; }

/* Spinner: the Lucide loader glyph, one turn per dur-reveal. Static under reduced motion. */
.b-spinner { display: inline-block; flex: none; width: 18px; height: 18px; animation: b-spin var(--dur-reveal) linear infinite; }


/* --------------------------------------------------------------------------
   6. Button  (.b-button; primary, secondary (default), ghost, destructive)
   -------------------------------------------------------------------------- */
.b-button {
  --b-h: var(--control-h-md);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--b-h); min-width: 0; padding: 0 16px; margin: 0;
  border: 0; border-radius: var(--radius-md);
  background: var(--secondary); color: var(--on-secondary);
  box-shadow: inset 0 0 0 var(--border-hairline) var(--line-strong);
  font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); font-weight: 500; line-height: 1; letter-spacing: 0;
  white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-state) var(--ease-standard), box-shadow var(--dur-state) var(--ease-standard), color var(--dur-state) var(--ease-standard);
}
.b-button > svg, .b-button > .b-icon { width: 18px; height: 18px; flex: none; }
.b-button > .b-spinner { width: 18px; height: 18px; }
.b-button:is(:hover, [data-force="hover"]) { background: var(--secondary-hover); box-shadow: inset 0 0 0 var(--border-hairline) var(--line-control); }
.b-button:is(:active, [data-force="pressed"]) { background: var(--secondary-hover); transition-duration: var(--dur-press); }
.b-button:is(:focus-visible, [data-force="focus"]) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }

.b-button--secondary { background: var(--secondary); color: var(--on-secondary); }

.b-button--primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 0 var(--primary); }
.b-button--primary:is(:hover, [data-force="hover"]) { background: var(--primary); box-shadow: var(--shadow-ring-primary); }
.b-button--primary:is(:active, [data-force="pressed"]) { background: var(--primary-press); box-shadow: 0 0 0 2px var(--primary-press); }

.b-button--ghost { background: transparent; color: var(--text-2); box-shadow: none; }
.b-button--ghost:is(:hover, [data-force="hover"]) { background: var(--secondary-hover); color: var(--text-1); box-shadow: none; }
.b-button--ghost:is(:active, [data-force="pressed"]) { background: var(--bg-surface-3); color: var(--text-1); }

.b-button--destructive, .b-button--danger { background: var(--danger); color: var(--on-danger); box-shadow: 0 0 0 0 var(--danger); }
.b-button--destructive:is(:hover, [data-force="hover"]), .b-button--danger:is(:hover, [data-force="hover"]) { background: var(--danger); box-shadow: 0 0 0 2px var(--danger); }
.b-button--destructive:is(:active, [data-force="pressed"]), .b-button--danger:is(:active, [data-force="pressed"]) { background: var(--danger-press); box-shadow: 0 0 0 2px var(--danger-press); }

/* Alert (Owner decision, Attention in red): the incident contact's "Call now" on an IncidentBand. The system's one
   red fill, the same as destructive (danger): its fill is its edge (3:1 on danger-wash and on the page), on-danger
   the label. A separate name because it names an action, not a deletion. */
.b-button--alert { background: var(--danger); color: var(--on-danger); box-shadow: 0 0 0 0 var(--danger); }
.b-button--alert:is(:hover, [data-force="hover"]) { background: var(--danger); box-shadow: 0 0 0 2px var(--danger); }
.b-button--alert:is(:active, [data-force="pressed"]) { background: var(--danger-press); box-shadow: 0 0 0 2px var(--danger-press); }

/* Sizes: sm 32, md 36 (default), lg 44, xl 48 (touch: phones and sign-in). Glyphs: 16px on sm (the 16 cut), 18px from md up (the 20 cut). */
.b-button--sm { --b-h: var(--control-h-sm); padding: 0 12px; gap: 6px; font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); font-weight: 500; line-height: 1; }
.b-button--sm > svg, .b-button--sm > .b-icon, .b-button--sm > .b-spinner { width: 16px; height: 16px; }
.b-button--lg { --b-h: var(--control-h-lg); padding: 0 20px; font: var(--type-body-font, 400 1rem/1.5 var(--font-sans)); font-weight: 500; line-height: 1; }
.b-button--xl { --b-h: var(--control-h-xl); padding: 0 20px; font: var(--type-body-font, 400 1rem/1.5 var(--font-sans)); font-weight: 500; line-height: 1; }
.b-button--block { display: flex; width: 100%; }

/* Icon-only: square, the glyph at 20px (the 20 cut; 18px on sm); always give it aria-label. */
.b-button--icon { flex: none; width: var(--b-h); padding: 0; }
.b-button--icon > svg, .b-button--icon > .b-icon { width: 20px; height: 20px; }
.b-button--icon.b-button--sm > svg, .b-button--icon.b-button--sm > .b-icon { width: 18px; height: 18px; }
.b-button--icon.b-button--xl, .b-button--icon.b-button--lg { width: var(--b-h); }

/* Count on an icon button: the notification badge (bad fill, mono numerals). */
.b-button__count {
  position: absolute; top: -3px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--radius-full); background: var(--bad); color: var(--on-bad);
  box-shadow: 0 0 0 2px var(--b-count-ring, var(--bg-ground));
  font: var(--type-mono-small-font, 400 0.8125rem/1.385 var(--font-mono)); line-height: 20px; font-weight: 500; letter-spacing: 0;
  text-align: center; font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero);
}
/* The count could not load: mark the bell instead of hiding the count ("Unknown is not zero"). */
.b-button__count--unknown { background: var(--bg-surface-3); color: var(--text-1); box-shadow: 0 0 0 2px var(--b-count-ring, var(--bg-ground)), inset 0 0 0 1px var(--line-control); }

/* Disabled: no ring, the disabled label colour (WCAG-exempt), never the only carrier of a message. */
.b-button:is(:disabled, [aria-disabled="true"]) {
  background: var(--bg-surface-2); color: var(--text-disabled); box-shadow: none; cursor: not-allowed;
}
/* Busy: keep the label as a present-tense word ("Saving") and show the spinner. Wins over disabled, so a busy button that also blocks a second submit stays readable. */
.b-button:is([data-state="loading"], [aria-busy="true"]) {
  background: var(--bg-surface-2); color: var(--text-2); box-shadow: inset 0 0 0 var(--border-hairline) var(--line); cursor: progress;
}
.b-button-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }


/* --------------------------------------------------------------------------
   7. Link: ink, underlined in line-control (3:1); never a hue
   -------------------------------------------------------------------------- */
.b-link {
  color: var(--link); text-decoration-line: underline; text-decoration-color: var(--link-decoration);
  text-decoration-thickness: 1px; text-underline-offset: 0.2em; border-radius: var(--radius-xs);
  transition: text-decoration-color var(--dur-state) var(--ease-standard);
  cursor: pointer;
}
.b-link:is(:hover, [data-force="hover"]) { text-decoration-color: var(--text-1); }
.b-link:is(:focus-visible, [data-force="focus"]) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); text-decoration-color: var(--text-1); }
/* Standalone link (a table cell, a panel foot, a card title): no rule at rest, underline on hover or focus. */
.b-link--standalone { text-decoration-color: transparent; }
.b-link--quiet { color: var(--text-2); }
.b-link--quiet:is(:hover, [data-force="hover"]) { color: var(--text-1); }
.b-link > svg, .b-link > .b-icon { width: 16px; height: 16px; margin-left: 4px; vertical-align: -3px; }
/* Action link with a trailing arrow ("Open status board"). */
.b-link--action { display: inline-flex; align-items: center; gap: 6px; font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); font-weight: 500; text-decoration-color: transparent; }
/* Its arrow is 18px beside the ui (15px) label: icons beside 15 to 16px text are 18 to 20px. */
.b-link--action > svg, .b-link--action > .b-icon { width: 18px; height: 18px; flex: none; margin-left: 0; vertical-align: 0; }


/* --------------------------------------------------------------------------
   8. Kbd: keys spelled as words ("Ctrl K", "Esc", "Enter")
   -------------------------------------------------------------------------- */
.b-kbd {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px;
  border-radius: var(--radius-sm); background: var(--bg-surface-2); color: var(--text-2);
  box-shadow: inset 0 0 0 var(--border-hairline) var(--line-strong);
  font: var(--type-mono-small-font, 400 0.8125rem/1.385 var(--font-mono)); line-height: 20px; letter-spacing: 0; white-space: nowrap;
  font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero);
}


/* --------------------------------------------------------------------------
   9. Form controls
   Outlines are inset box-shadows in line-control (3:1), so outlined and
   filled controls are the same size.
   -------------------------------------------------------------------------- */
.b-input, .b-textarea, .b-select > select {
  display: block; width: 100%; min-width: 0; margin: 0;
  border: 0; border-radius: var(--radius-md);
  background: var(--bg-input); color: var(--text-1);
  box-shadow: var(--shadow-control);
  font: var(--type-body-font, 400 1rem/1.5 var(--font-sans)); letter-spacing: 0;
  transition: box-shadow var(--dur-state) var(--ease-standard);
}
.b-input { height: var(--control-h-md); padding: 0 12px; }
.b-input--lg { height: var(--control-h-lg); }
.b-input--mono, .b-textarea--mono { font: var(--type-mono-font, 400 0.875rem/1.429 var(--font-mono)); font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero); }
.b-textarea { min-height: 88px; padding: var(--space-2) 12px; line-height: 24px; resize: vertical; }
.b-input::placeholder, .b-textarea::placeholder { color: var(--text-3); opacity: 1; }
.b-input:is(:focus, :focus-visible, [data-force="focus"]),
.b-textarea:is(:focus, :focus-visible, [data-force="focus"]),
.b-select > select:is(:focus, :focus-visible, [data-force="focus"]) {
  box-shadow: inset 0 0 0 var(--border-hairline) var(--text-1);
  outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset);
}
.b-input:is([aria-invalid="true"], [data-state="invalid"]),
.b-textarea:is([aria-invalid="true"], [data-state="invalid"]),
.b-select > select:is([aria-invalid="true"], [data-state="invalid"]) {
  box-shadow: inset 0 0 0 var(--border-selected) var(--bad-text);
}
.b-input:is(:disabled, [aria-disabled="true"]),
.b-textarea:is(:disabled, [aria-disabled="true"]),
.b-select > select:is(:disabled, [aria-disabled="true"]) {
  background: var(--bg-surface-2); color: var(--text-disabled);
  box-shadow: inset 0 0 0 var(--border-hairline) var(--line); cursor: not-allowed;
  -webkit-text-fill-color: var(--text-disabled);
}
.b-input:read-only:not(:disabled) { background: var(--bg-surface-2); }

/* Input group: a leading glyph and an optional trailing key hint or unit. */
.b-input-group { position: relative; display: flex; align-items: center; min-width: 0; width: 100%; }
.b-input-group > .b-input { flex: 1 1 auto; }
.b-input-group__icon { position: absolute; left: 11px; width: 18px; height: 18px; color: var(--text-3); pointer-events: none; }
.b-input-group__icon ~ .b-input { padding-left: 38px; }
.b-input-group__end { position: absolute; right: 6px; display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-3); pointer-events: none; }
.b-input-group__end ~ .b-input, .b-input-group > .b-input:has(~ .b-input-group__end) { padding-right: 52px; }
/* An action at the input's end (a ghost sm text button: "Show" on a password): it takes clicks, and the value stops
   short of it. */
.b-input-group__end--action { pointer-events: auto; color: var(--text-2); }
.b-input-group > .b-input:has(~ .b-input-group__end--action) { padding-right: 76px; }
/* Input row: a field's input with its submit button beside it ("Analyze"); the input grows, the button keeps its
   width; both take the full row below 640px. */
.b-input-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-width: 0; }
.b-input-row > :is(.b-input, .b-input-group) { flex: 1 1 240px; min-width: 0; width: auto; }
.b-input-row > .b-button { flex: none; }
@media (max-width: 639.98px) { .b-input-row > :is(.b-input, .b-input-group, .b-button) { flex: 1 1 100%; } }

/* Select: a native <select> inside .b-select, with the chevron drawn in text-3. */
.b-select { position: relative; display: block; min-width: 0; width: 100%; }
.b-select > select { height: var(--control-h-md); padding: 0 38px 0 12px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.b-select--lg > select { height: var(--control-h-lg); }
.b-select--mono > select { font: var(--type-mono-font, 400 0.875rem/1.429 var(--font-mono)); font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero); }
.b-select::after {
  content: ""; position: absolute; right: 11px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  background: var(--text-3); pointer-events: none;
  -webkit-mask: var(--b-mask-chevron-down) center / contain no-repeat; mask: var(--b-mask-chevron-down) center / contain no-repeat;
}
.b-select:has(> select:disabled)::after { background: var(--text-disabled); }

/* Checkbox and radio: native inputs, styled. */
.b-checkbox, .b-radio {
  appearance: none; -webkit-appearance: none; flex: none;
  display: inline-grid; place-content: center;
  width: 18px; height: 18px; margin: 3px 0 0;
  background: var(--bg-input); box-shadow: var(--shadow-control);
  cursor: pointer;
  transition: background-color var(--dur-state) var(--ease-standard), box-shadow var(--dur-state) var(--ease-standard);
}
.b-checkbox { border-radius: var(--radius-sm); }
.b-radio { border-radius: var(--radius-full); }
.b-checkbox::before {
  content: ""; width: 12px; height: 12px; background: var(--on-primary); transform: scale(0);
  -webkit-mask: var(--b-mask-check) center / contain no-repeat; mask: var(--b-mask-check) center / contain no-repeat;
  transition: transform var(--dur-press) var(--ease-standard);
}
.b-checkbox:checked, .b-checkbox:indeterminate, .b-checkbox[data-state="checked"] { background: var(--primary); box-shadow: none; }
.b-checkbox:checked::before, .b-checkbox[data-state="checked"]::before { transform: scale(1); }
.b-checkbox:indeterminate::before { transform: scale(1); -webkit-mask-image: var(--b-mask-dash); mask-image: var(--b-mask-dash); }
.b-radio::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--text-1); transform: scale(0); transition: transform var(--dur-press) var(--ease-standard); }
.b-radio:checked, .b-radio[data-state="checked"] { box-shadow: inset 0 0 0 var(--border-selected) var(--text-1); }
.b-radio:checked::before, .b-radio[data-state="checked"]::before { transform: scale(1); }
.b-checkbox:is(:hover, [data-force="hover"]):not(:checked):not(:disabled),
.b-radio:is(:hover, [data-force="hover"]):not(:checked):not(:disabled) { box-shadow: inset 0 0 0 var(--border-hairline) var(--text-2); }
.b-checkbox:is(:focus-visible, [data-force="focus"]), .b-radio:is(:focus-visible, [data-force="focus"]) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.b-checkbox:is([aria-invalid="true"], [data-state="invalid"]):not(:checked), .b-radio[aria-invalid="true"]:not(:checked) { box-shadow: inset 0 0 0 var(--border-selected) var(--bad-text); }
.b-checkbox:disabled, .b-radio:disabled { background: var(--bg-surface-2); box-shadow: inset 0 0 0 var(--border-hairline) var(--line); cursor: not-allowed; }
.b-checkbox:disabled:checked { background: var(--bg-surface-2); }
.b-checkbox:disabled::before { background: var(--text-disabled); }
.b-radio:disabled::before { background: var(--text-disabled); }

/* Switch: a native checkbox with role="switch". */
.b-switch {
  appearance: none; -webkit-appearance: none; flex: none; position: relative;
  width: 36px; height: 20px; margin: 2px 0 0;
  border-radius: var(--radius-full); background: var(--bg-input); box-shadow: var(--shadow-control);
  cursor: pointer;
  transition: background-color var(--dur-state) var(--ease-standard), box-shadow var(--dur-state) var(--ease-standard);
}
.b-switch::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px;
  border-radius: var(--radius-full); background: var(--line-control);
  transition: transform var(--dur-state) var(--ease-standard), background-color var(--dur-state) var(--ease-standard);
}
.b-switch:checked, .b-switch[data-state="checked"] { background: var(--primary); box-shadow: none; }
.b-switch:checked::before, .b-switch[data-state="checked"]::before { transform: translateX(16px); background: var(--on-primary); }
.b-switch:is(:hover, [data-force="hover"]):not(:checked):not(:disabled) { box-shadow: inset 0 0 0 var(--border-hairline) var(--text-2); }
.b-switch:is(:focus-visible, [data-force="focus"]) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.b-switch:disabled { background: var(--bg-surface-2); box-shadow: inset 0 0 0 var(--border-hairline) var(--line); cursor: not-allowed; }
.b-switch:disabled::before { background: var(--text-disabled); }

/* Choice: a checkbox, radio or switch with its label and hint. */
.b-choice { display: flex; align-items: flex-start; gap: 10px; min-width: 0; color: var(--text-1); font: var(--type-body-font, 400 1rem/1.5 var(--font-sans)); line-height: 24px; cursor: pointer; }
.b-choice__text { display: flex; flex-direction: column; min-width: 0; }
.b-choice__hint { font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); max-width: var(--measure-wide); text-wrap: pretty; }
.b-choice:has(> input:disabled) { color: var(--text-disabled); cursor: not-allowed; }
.b-choice--compact { font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); line-height: 24px; }
.b-choice-group { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.b-choice-group--row { flex-direction: row; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.b-choice-group > legend { padding: 0; margin: 0 0 var(--space-1); }
.b-checkbox[data-state="indeterminate"] { background: var(--primary); box-shadow: none; }
.b-checkbox[data-state="indeterminate"]::before { transform: scale(1); -webkit-mask-image: var(--b-mask-dash); mask-image: var(--b-mask-dash); }

/* Field: label above, control, then hint or error. */
.b-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.b-field__label { font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); font-weight: 500; color: var(--text-1); }
.b-field__label .b-field__optional { font-weight: 400; color: var(--text-3); }
.b-field__hint { margin: 0; font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); max-width: var(--measure-wide); text-wrap: pretty; }
.b-field__error { margin: 0; display: flex; align-items: baseline; gap: 6px; font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--bad-text); }
.b-field__error::before {
  content: ""; flex: none; width: 10px; height: 10px; align-self: center; background: var(--bad);
  -webkit-mask: var(--b-mask-square) center / contain no-repeat; mask: var(--b-mask-square) center / contain no-repeat;
}
.b-field__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.b-field__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
/* Head: the label at the left and one small link at the right on its baseline ("Forgot password?"). */
.b-field__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }

/* Fieldset: a form section with a legend and a description. */
.b-fieldset { margin: 0; padding: var(--space-5) 0 0; border: 0; border-top: var(--border-hairline) solid var(--line); min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.b-fieldset:first-child { border-top: 0; padding-top: 0; }
.b-fieldset > legend { float: left; width: 100%; padding: 0; margin: 0; font: var(--type-h4-font, 600 1rem/1.5 var(--font-sans)); color: var(--text-1); }
.b-fieldset > legend + * { clear: both; }
.b-fieldset__description { margin: calc(-1 * var(--space-3)) 0 0; font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); color: var(--text-3); max-width: var(--measure-wide); text-wrap: pretty; }

/* Segmented control: one view, one choice; never navigation. */
.b-segmented {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  border-radius: var(--radius-md); background: var(--bg-surface-2); box-shadow: inset 0 0 0 var(--border-hairline) var(--line);
}
.b-segmented__item {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; margin: 0; border: 0;
  border-radius: var(--radius-sm); background: transparent; color: var(--text-2);
  font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); line-height: 1; white-space: nowrap; font-variant-numeric: var(--font-numeric, tabular-nums);
  cursor: pointer; transition: background-color var(--dur-state) var(--ease-standard), color var(--dur-state) var(--ease-standard);
}
.b-segmented__item:is(:hover, [data-force="hover"]) { color: var(--text-1); }
.b-segmented__item:is([aria-checked="true"], [aria-pressed="true"], [aria-selected="true"], [data-state="on"], [data-state="active"]) {
  background: var(--bg-surface-3); color: var(--text-1); font-weight: 500; box-shadow: 0 0 0 var(--border-hairline) var(--line-control);
}
.b-segmented__item:is(:focus-visible, [data-force="focus"]) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 1px; }


/* --------------------------------------------------------------------------
   10. Badge and StatusDot
   Every status shows its shape, its word and its colour.
   -------------------------------------------------------------------------- */
.b-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 7px;
  border-radius: var(--radius-sm); vertical-align: middle;
  background: var(--b-tone-wash, var(--neutral-wash)); color: var(--b-tone-text, var(--neutral-text));
  box-shadow: inset 0 0 0 var(--border-hairline) var(--b-tone-line, var(--neutral-line));
  font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); font-weight: 500; line-height: 1; white-space: nowrap;
  font-variant-numeric: var(--font-numeric, tabular-nums);
}
.b-badge[data-tone]:not([data-tone="accent"], .b-badge--mono, .b-badge--outline)::before {
  content: ""; flex: none; width: 10px; height: 10px; background: var(--b-tone-mark);
  -webkit-mask: var(--b-shape) center / contain no-repeat; mask: var(--b-shape) center / contain no-repeat;
}
/* Plain: glyph plus a text-2 word, no ground (table cells, rails). */
.b-badge--plain { height: auto; padding: 0; gap: 8px; background: none; box-shadow: none; color: var(--text-2); font-weight: 400; line-height: var(--type-small-line, 1.429); }
.b-badge--plain.b-badge--ui { font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); }
/* Mono: severity ("SEV2"). The word is the label, so it carries no glyph. */
.b-badge--mono { font: var(--type-mono-small-font, 400 0.8125rem/1.385 var(--font-mono)); font-weight: 500; letter-spacing: 0.02em; line-height: 1; }
/* Outline: counts and "Sample data". No tone, no glyph. */
.b-badge--outline { background: transparent; color: var(--text-2); box-shadow: inset 0 0 0 var(--border-hairline) var(--line-strong); }
.b-badge--count { height: 20px; padding: 0 6px; font: var(--type-mono-small-font, 400 0.8125rem/1.385 var(--font-mono)); font-weight: 500; line-height: 1; }
/* Count with attention (a sidebar count of open incidents). */
.b-badge--alert { background: var(--bad-wash); color: var(--bad-text); box-shadow: inset 0 0 0 var(--border-hairline) var(--bad-line); }

.b-status-dot {
  position: relative; display: inline-block; flex: none; vertical-align: middle;
  width: var(--b-dot-size, 10px); height: var(--b-dot-size, 10px);
}
.b-status-dot::before {
  content: ""; position: absolute; inset: 0; background: var(--b-tone-mark, var(--neutral));
  -webkit-mask: var(--b-shape, var(--b-mask-ring)) center / contain no-repeat; mask: var(--b-shape, var(--b-mask-ring)) center / contain no-repeat;
}
.b-status-dot--md { --b-dot-size: 12px; }
.b-status-dot--lg { --b-dot-size: 14px; }
/* Pulse: only for an active failure (Offline). The status ring (section 22): two quiet rings half a beat
   apart when the dot appears, then it holds still; no ring under reduced motion. */
.b-status-dot--pulse::after {
  content: ""; position: absolute; inset: -1px; border-radius: var(--radius-full);
  box-shadow: 0 0 0 1px var(--b-tone-text, var(--bad-text)); opacity: 0;
}
/* A status word in its tone's text step ("Offline" in bad-text). */
.b-status-word { color: var(--b-tone-text, var(--text-2)); }
/* Status pair: glyph plus word, the plain form for lists and table cells. */
.b-status { display: inline-flex; align-items: center; gap: 8px; font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); color: var(--text-2); white-space: nowrap; }
.b-status > .b-status-dot { --b-dot-size: 10px; }


/* --------------------------------------------------------------------------
   11. Feedback: Callout, EmptyState, ErrorState, NotConfigured, Skeleton, Toast
   -------------------------------------------------------------------------- */
.b-callout {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 12px; align-items: start; align-content: start;
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  background: var(--b-tone-wash, var(--info-wash)); box-shadow: inset 0 0 0 var(--border-hairline) var(--b-tone-line, var(--info-line));
  color: var(--text-2);
}
.b-callout__icon { grid-row: 1 / span 3; width: 20px; height: 20px; margin-top: 2px; color: var(--b-tone-text, var(--info-text)); }
/* The callout spans its column (a page-wide notice on a full-width page); its words keep to measure-wide. */
.b-callout__title { grid-column: 2; margin: 0; font: var(--type-h4-font, 600 1rem/1.5 var(--font-sans)); color: var(--text-1); max-width: var(--measure-wide); }
.b-callout__body { grid-column: 2; margin: 0; font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); color: var(--text-2); max-width: var(--measure-wide); text-wrap: pretty; }
.b-callout__body .b-link { color: var(--text-1); }
.b-callout__actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }

.b-empty {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 6px var(--space-4); align-items: start; align-content: start;
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--bg-surface-1); box-shadow: inset 0 0 0 var(--border-hairline) var(--line);
}
.b-empty__icon {
  grid-row: 1 / span 3; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: var(--radius-md); box-shadow: inset 0 0 0 var(--border-hairline) var(--line-strong); color: var(--text-2);
}
.b-empty__icon > svg { width: 24px; height: 24px; }
.b-empty__title { margin: 0; font: var(--type-h4-font, 600 1rem/1.5 var(--font-sans)); color: var(--text-1); padding-top: 4px; }
.b-empty__body { margin: 0; font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); color: var(--text-3); text-wrap: pretty; max-width: 60ch; }
.b-empty__body .b-mono { color: var(--text-2); }
.b-empty__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
/* Bare: inside a panel body that already draws the frame. */
.b-empty--bare { padding: 0; background: none; box-shadow: none; }
/* Illustrated: an Ink Line spot (S cut, 64 to 96px) replaces the icon tile; never both. */
.b-empty--illustrated { grid-template-columns: 96px minmax(0, 1fr); align-items: center; column-gap: var(--space-5); --il-paper: var(--bg-surface-1); }
.b-empty__art { grid-row: 1 / span 3; width: 96px; height: 96px; display: block; }
.b-empty--illustrated .b-empty__title { align-self: end; }
/* Error state: the page or panel failed. Digest only, never a stack trace. */
.b-empty--error .b-empty__icon { background: var(--bad-wash); box-shadow: inset 0 0 0 var(--border-hairline) var(--bad-line); color: var(--bad-text); }

.b-not-configured {
  display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start;
  padding: var(--space-5) var(--space-6); border: var(--border-dashed) var(--line-control); border-radius: var(--radius-lg);
  background: transparent;
}
.b-not-configured__title { margin: 0; font: var(--type-h4-font, 600 1rem/1.5 var(--font-sans)); color: var(--text-1); }
.b-not-configured__body { margin: 0; font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); color: var(--text-3); max-width: 64ch; text-wrap: pretty; }
.b-not-configured__body :is(.b-mono, .b-code-inline) { color: var(--text-2); }
.b-not-configured__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
/* Pictured: an optional Ink Line picture beside the words, as EmptyState takes its art. The picture is a spot's
   S cut at 96px (.b-not-configured__picture) or a web animation (or an L-cut spot) at 120px (add --lg); the words
   move into .b-not-configured__text. Decorative (aria-hidden); its knock-outs read --il-paper, bg-surface-1 unless
   the ground sets it. Below 480px the picture sits above the words. */
.b-not-configured--pictured { flex-direction: row; align-items: center; gap: var(--space-5); }
.b-not-configured__picture { flex: none; display: block; width: 96px; height: 96px; }
.b-not-configured__picture--lg { width: 120px; height: 120px; }
.b-not-configured__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
@media (max-width: 479.98px) {
  .b-not-configured--pictured { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

.b-skeleton { display: block; height: 14px; border-radius: var(--radius-xs); background: var(--bg-surface-2); }
.b-skeleton--text { height: 12px; margin: 5px 0; }
.b-skeleton--title { height: 18px; }
.b-skeleton--stat { height: 32px; width: 80px; }
.b-skeleton--block { height: 120px; }
.b-skeleton--circle { width: 32px; height: 32px; border-radius: var(--radius-full); }
.b-skeleton--row { height: 24px; }

.b-toast {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; align-content: start;
  width: 100%; max-width: 420px; padding: 14px 14px 14px 16px;
  border-radius: var(--radius-xl); background: var(--bg-surface-3); box-shadow: var(--shadow-overlay); color: var(--text-1);
}
.b-toast__icon { grid-row: 1 / span 3; width: 20px; height: 20px; margin-top: 2px; color: var(--b-tone-text, var(--text-2)); }
.b-toast__title { grid-column: 2; margin: 0; font: var(--type-h4-font, 600 1rem/1.5 var(--font-sans)); color: var(--text-1); }
.b-toast__body { grid-column: 2; margin: 0; font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); color: var(--text-2); }
.b-toast__actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.b-toast__close { grid-column: 3; grid-row: 1; margin: -4px -4px 0 0; }
.b-toast-region {
  position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-2); width: min(420px, calc(100vw - 2 * var(--space-4)));
}
.b-toast[data-state="open"] { animation: b-rise var(--dur-overlay) var(--ease-out) both; }
.b-toast[data-state="closed"] { animation: b-fade-out var(--dur-overlay) var(--ease-in) both; }


/* --------------------------------------------------------------------------
   12. Layout: PageHeader, Breadcrumbs, Panel, Card, StatGrid, KeyValue
   -------------------------------------------------------------------------- */
.b-page-header { display: flex; align-items: flex-end; gap: var(--space-6); min-width: 0; }
.b-page-header__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.b-page-header__title { margin: 0; font: var(--type-h1-font, 600 2.25rem/1.111 var(--font-sans)); letter-spacing: var(--type-h1-tracking, -0.025em); color: var(--text-1); text-wrap: balance; }
.b-page-header__description { margin: 2px 0 0; font: var(--type-lede-font, 400 1.125rem/1.556 var(--font-sans)); color: var(--text-2); max-width: var(--measure-reading); text-wrap: pretty; }
.b-page-header__description strong { font-weight: 500; color: var(--text-1); }
.b-page-header__actions { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.b-page-header__breadcrumbs { margin-bottom: var(--space-2); }
@media (max-width: 639.98px) {
  .b-page-header { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .b-page-header__actions { flex-wrap: wrap; }
}

.b-breadcrumbs { font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); color: var(--text-3); min-width: 0; }
.b-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.b-breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.b-breadcrumbs li + li::before {
  content: ""; flex: none; width: 14px; height: 14px; background: var(--text-3);
  -webkit-mask: var(--b-mask-chevron-right) center / contain no-repeat; mask: var(--b-mask-chevron-right) center / contain no-repeat;
}
.b-breadcrumbs a { color: var(--text-2); text-decoration: none; border-radius: var(--radius-xs); }
.b-breadcrumbs a:is(:hover, [data-force="hover"]) { color: var(--text-1); text-decoration: underline; text-decoration-color: var(--link-decoration); text-underline-offset: 0.2em; }
.b-breadcrumbs a:is(:focus-visible, [data-force="focus"]) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.b-breadcrumbs [aria-current] { color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --b-pad-x is the panel's horizontal inset: 24px, 20px on phones. Tables and stat tiles inside a panel use it
   for their outer edges, so text lines up with the panel head. */
.b-panel {
  --b-pad-x: var(--space-6);
  display: flex; flex-direction: column; min-width: 0;
  background: var(--bg-surface-1); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-lg);
}
.b-panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 64px; padding: var(--space-3) var(--b-pad-x); }
.b-panel__title { margin: 0; font: var(--type-h3-font, 600 1.125rem/1.444 var(--font-sans)); letter-spacing: var(--type-h3-tracking, -0.01em); color: var(--text-1); }
.b-panel__title .b-mono-small, .b-panel__title .b-mono { color: var(--text-3); font-weight: 400; margin-left: 6px; }
/* Heading group: the title with a description line under it; actions stay on the right. */
.b-panel__heading { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.b-panel__description { margin: 0; font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); max-width: var(--measure-wide); text-wrap: pretty; }
.b-panel__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); }
.b-panel__actions, .b-panel__head > .b-panel__meta:last-child { margin-left: auto; }
.b-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.b-panel__head + .b-panel__body { border-top: var(--border-hairline) solid var(--line-subtle); }
.b-panel__body { flex: 1 1 auto; min-width: 0; padding: var(--space-5) var(--b-pad-x); }
.b-panel__body--flush { padding: 0; }
.b-panel__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); min-height: 60px; padding: var(--space-3) var(--b-pad-x); border-top: var(--border-hairline) solid var(--line-subtle); margin-top: auto; }
.b-panel__foot--end { justify-content: flex-end; }
@media (max-width: 639.98px) { .b-panel { --b-pad-x: var(--space-5); } }
/* Panels in one row stretch to equal height; the foot sticks to the bottom. */
.b-panel-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--space-6); align-items: stretch; }
/* Detail page: the main column beside the detail rail (detail-rail-w, 400px), the key-value column of a server,
   service, incident or briefing. Each column stacks its panels; below 1280px the rail moves under the main column. */
.b-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; min-width: 0; }
.b-detail-layout > * { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
@media (min-width: 1280px) { .b-detail-layout { grid-template-columns: minmax(0, 1fr) var(--detail-rail-w); } }
/* Card: a plain sheet with even padding. */
.b-card { min-width: 0; padding: var(--space-6); background: var(--bg-surface-1); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-lg); }
.b-card--sunk { background: var(--bg-ground); }
/* Featured: the one card a composition points at wears the 1.5px ink ring (as .b-plan--featured), never a fill or a hue. */
.b-card--featured { outline: var(--border-selected) solid var(--accent); outline-offset: calc(-1 * var(--border-selected)); }
/* A card that is one link (a knowledge-base article): a lightness step on hover, the focus ring on focus. */
:where(a).b-card { display: block; color: var(--text-1); text-decoration: none; transition: background-color var(--dur-state) var(--ease-standard); }
a.b-card:is(:hover, [data-force="hover"]) { background: var(--bg-surface-2); }
a.b-card:is(:focus-visible, [data-force="focus"]) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
/* Live tick: the ink dot that says a panel is updating. */
.b-live { display: inline-flex; align-items: center; gap: 8px; font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); }
.b-live::before { content: ""; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }

.b-stat-grid {
  --b-cols: 4;
  display: grid; grid-template-columns: repeat(var(--b-cols), minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
.b-stat-grid--cols-2 { --b-cols: 2; }
.b-stat-grid--cols-3 { --b-cols: 3; }
.b-stat-grid--cols-4 { --b-cols: 4; }
.b-stat-grid--cols-5 { --b-cols: 5; }
.b-stat-grid--cols-6 { --b-cols: 6; }
/* Flush: joined to a panel's bottom edge. */
.b-stat-grid--flush { border: 0; border-top: var(--border-hairline) solid var(--line); border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px); }
.b-stat {
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-2); align-content: start;
  min-width: 0; padding: var(--space-5) var(--b-pad-x, var(--space-6)) 22px; background: var(--bg-surface-1);
}
.b-stat__label { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; margin: 0; font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); color: var(--text-2); }
.b-stat__label > svg, .b-stat__label > .b-icon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--text-3); }
/* Wrap the label text in one <span> so it wraps as a sentence (flex gaps would split the words). */
.b-stat__label > span { min-width: 0; }
.b-stat__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; margin: 2px 0 0; }
.b-stat__number { font: var(--type-stat-font, 600 2.25rem/1 var(--font-sans)); letter-spacing: var(--type-stat-tracking, -0.025em); font-variant-numeric: var(--font-numeric, tabular-nums); color: var(--text-1); }
.b-stat__unit { font: var(--type-mono-font, 400 0.875rem/1.429 var(--font-mono)); color: var(--text-3); font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero); }
.b-stat__word { font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); color: var(--text-2); }
.b-stat__mono { font: var(--type-mono-value-font, 400 1rem/1.5 var(--font-mono)); color: var(--text-1); font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero); }
/* Unknown is not zero: the value is a word at h3 size in text-3. */
.b-stat__unknown { font: var(--type-h3-font, 600 1.125rem/1.444 var(--font-sans)); font-weight: 500; line-height: 36px; letter-spacing: -0.01em; color: var(--text-3); }
.b-stat__sub { margin: 0; font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); }
.b-stat__sub .b-status { font: inherit; gap: 6px; color: var(--b-tone-text, var(--text-3)); }
@media (max-width: 639.98px) {
  .b-stat-grid { --b-cols: 2; }
  .b-stat { padding: var(--space-4) var(--space-4) 18px; }
  .b-stat-grid--cols-2, .b-stat-grid--cols-3 { --b-cols: 1; }
  .b-stat-grid--phone-2 { --b-cols: 2; }
  /* One column: values too wide for half a phone ("RPKI + IRR" at the stat size). */
  .b-stat-grid.b-stat-grid--phone-1 { --b-cols: 1; }
  .b-stat-grid:not(.b-stat-grid--cols-2):not(.b-stat-grid--cols-3):not(.b-stat-grid--phone-1) > .b-stat:last-child:nth-child(odd),
  .b-stat-grid--phone-2 > .b-stat:last-child:nth-child(odd) { grid-column: span 2; }
}

.b-kv { margin: 0; font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); min-width: 0; }
.b-kv__row { display: grid; grid-template-columns: var(--b-kv-label, 160px) minmax(0, 1fr); gap: var(--space-3); padding: 11px 0; border-top: var(--border-hairline) solid var(--line-subtle); }
.b-kv__row:first-child { border-top: 0; }
.b-kv dt { margin: 0; color: var(--text-3); }
.b-kv dd { margin: 0; color: var(--text-1); min-width: 0; max-width: var(--measure-wide); overflow-wrap: anywhere; }
.b-kv dd .b-mono-small { color: var(--text-3); margin-left: 4px; }
.b-kv--wide { --b-kv-label: 200px; }
@media (max-width: 479.98px) {
  .b-kv__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}


/* --------------------------------------------------------------------------
   13. Table, TableScroll, Pagination
   Text never reaches a panel edge: 20px outer cell padding, columns sized by
   a <colgroup> in fixed layouts, one flexible column that ellipsizes.
   -------------------------------------------------------------------------- */
.b-table { width: 100%; border-collapse: collapse; border-spacing: 0; font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); font-variant-numeric: var(--font-numeric, tabular-nums); color: var(--text-1); }
.b-table caption { caption-side: top; text-align: left; padding: 0 var(--b-pad-x, var(--space-6)) var(--space-2); font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); }
.b-table th {
  height: 40px; padding: 0 var(--space-3); text-align: left; vertical-align: middle;
  font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); font-weight: 500; color: var(--text-3); white-space: nowrap;
  border-bottom: var(--border-hairline) solid var(--line);
}
.b-table td { height: var(--row-h); padding: 0 var(--space-3); vertical-align: middle; border-bottom: var(--border-hairline) solid var(--line-subtle); white-space: nowrap; }
.b-table tbody tr:last-child td { border-bottom: 0; }
.b-table :is(th, td):first-child { padding-left: var(--b-pad-x, var(--space-6)); }
.b-table :is(th, td):last-child { padding-right: var(--b-pad-x, var(--space-6)); }
.b-table--dense td { height: var(--row-h-dense); }
.b-table tbody tr { transition: background-color var(--dur-state) var(--ease-standard); }
.b-table tbody tr:is(:hover, [data-force="hover"]) > td { background: var(--bg-surface-2); }
.b-table tbody tr:is([aria-selected="true"], [data-state="selected"]) > td { background: var(--bg-surface-2); }
/* Selection is never a ground change alone: the row also gets the 1.5px ink ring. */
.b-table tbody tr:is([aria-selected="true"], [data-state="selected"]) > td { box-shadow: inset 0 var(--border-selected) 0 var(--accent), inset 0 calc(-1 * var(--border-selected)) 0 var(--accent); }
.b-table tbody tr:is([aria-selected="true"], [data-state="selected"]) > td:first-child { box-shadow: inset 0 var(--border-selected) 0 var(--accent), inset 0 calc(-1 * var(--border-selected)) 0 var(--accent), inset var(--border-selected) 0 0 var(--accent); }
.b-table tbody tr:is([aria-selected="true"], [data-state="selected"]) > td:last-child { box-shadow: inset 0 var(--border-selected) 0 var(--accent), inset 0 calc(-1 * var(--border-selected)) 0 var(--accent), inset calc(-1 * var(--border-selected)) 0 0 var(--accent); }
/* Resolved or historic rows drop to text-2. */
.b-table tbody tr.b-table__row--quiet > td { color: var(--text-2); }
.b-table__num { text-align: right !important; font-variant-numeric: var(--font-numeric, tabular-nums); }
.b-table__mono { font: var(--type-mono-font, 400 0.875rem/1.429 var(--font-mono)); font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero); }
.b-table__unit { margin-left: 2px; font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); }
.b-table__muted { color: var(--text-2); }
.b-table__empty { font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); }
/* Fixed layout: size columns with <colgroup>; long text ellipsizes, never overflows. */
.b-table--fixed { table-layout: fixed; }
.b-table--fixed :is(th, td) { overflow: hidden; text-overflow: ellipsis; }
.b-table__truncate { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Two-line cell: a title over mono meta ("INC-0142 · gru-edge-01"), replaces an ID column. */
.b-table__stack { display: flex; flex-direction: column; min-width: 0; padding: 7px 0; line-height: var(--type-ui-line, 1.467); }
.b-table__stack > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-table__meta { font: var(--type-mono-small-font, 400 0.8125rem/1.385 var(--font-mono)); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero); }
.b-table a.b-link { color: var(--text-1); }
/* Sticky header inside a scroll area. */
.b-table--sticky thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-surface-1); box-shadow: inset 0 -1px 0 var(--line); border-bottom: 0; }
/* A cell's column name, shown only when the table stacks (aria-hidden: the header still names the column). */
.b-table__label { display: none; }

/* Stack: below 640px each row becomes a block (title first, then the other cells on one wrapping line). */
@media (max-width: 639.98px) {
  .b-table--stack, .b-table--stack > tbody { display: block; width: 100%; }
  .b-table--stack > colgroup { display: none; }
  .b-table--stack > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .b-table--stack > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--b-pad-x, var(--space-5)); border-bottom: var(--border-hairline) solid var(--line-subtle); }
  .b-table--stack > tbody > tr:last-child { border-bottom: 0; }
  .b-table--stack > tbody > tr > td { display: block; height: auto; padding: 0 !important; border: 0; min-width: 0; }
  .b-table--stack > tbody > tr > td:first-child { flex: 1 0 100%; }
  .b-table--stack .b-table__num { text-align: left !important; }
  .b-table--stack :is(td, .b-table__stack > :first-child) { white-space: normal; overflow: visible; text-overflow: clip; }
  .b-table--stack .b-table__label { display: block; font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); font-weight: 400; color: var(--text-3); }
  /* Stack grid (a comparison): the first cell across the row, then each value under its column name, in a grid of
     --b-stack-cols columns (3 by default), aligned to the top so a value that wraps keeps its neighbours in line. */
  .b-table--stack-grid > tbody > tr { display: grid; grid-template-columns: repeat(var(--b-stack-cols, 3), minmax(0, 1fr)); align-items: start; }
  .b-table--stack-grid > tbody > tr > td:first-child { grid-column: 1 / -1; font-weight: 500; }
}

/* Scroll area: horizontal scroll stays inside the panel; the page never scrolls sideways. */
.b-table-scroll { position: relative; max-width: 100%; overflow: auto; overscroll-behavior-x: contain; border-radius: inherit; }
.b-table-scroll--y { max-height: var(--b-scroll-max, 320px); }
.b-table-scroll:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: calc(-1 * var(--focus-width)); }
.b-table-scroll > .b-table { min-width: var(--b-table-min, 0); }

.b-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); }
.b-pagination__summary { margin: 0; font-variant-numeric: var(--font-numeric, tabular-nums); }
.b-pagination__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.b-pagination__page {
  display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-h-sm); height: var(--control-h-sm); padding: 0 var(--space-2);
  border-radius: var(--radius-md); color: var(--text-2); text-decoration: none; font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); font-variant-numeric: var(--font-numeric, tabular-nums);
  transition: background-color var(--dur-state) var(--ease-standard), color var(--dur-state) var(--ease-standard);
}
.b-pagination__page:is(:hover, [data-force="hover"]) { background: var(--secondary-hover); color: var(--text-1); }
.b-pagination__page:is(:focus-visible, [data-force="focus"]) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.b-pagination__page[aria-current="page"] { background: var(--bg-surface-2); color: var(--text-1); font-weight: 500; box-shadow: inset 0 0 0 var(--border-hairline) var(--line-control); }
.b-pagination__gap { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-h-sm); color: var(--text-3); }


/* --------------------------------------------------------------------------
   14. Tabs: underline tabs; active is ink and weight, not colour
   -------------------------------------------------------------------------- */
.b-tabs { display: flex; gap: var(--space-4); min-width: 0; margin-inline: -4px; overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--line); }
.b-tabs::-webkit-scrollbar { display: none; }
.b-tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 44px; padding: 0 4px; margin: 0; border: 0; background: none;
  font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); color: var(--text-2); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: color var(--dur-state) var(--ease-standard);
}
.b-tab:is(:hover, [data-force="hover"]) { color: var(--text-1); }
.b-tab:is([aria-selected="true"], [aria-current="page"], [data-state="active"]) { color: var(--text-1); font-weight: 500; }
.b-tab:is([aria-selected="true"], [aria-current="page"], [data-state="active"])::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 2px; border-radius: 1px; background: var(--text-1);
}
.b-tab:is(:focus-visible, [data-force="focus"]) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-sm); }
.b-tab:disabled, .b-tab[aria-disabled="true"] { color: var(--text-disabled); cursor: not-allowed; }
.b-tab__count { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 var(--border-hairline) var(--line-strong); font: var(--type-mono-small-font, 400 0.8125rem/1.385 var(--font-mono)); font-weight: 500; color: var(--text-2); font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero); }
.b-tab-panel { padding-top: var(--space-5); }
.b-tab-panel:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-sm); }


/* --------------------------------------------------------------------------
   15. Shell: Sidebar, nav items, lockup, HeaderBar
   -------------------------------------------------------------------------- */
/* The page frame. The first column is as wide as the sidebar itself, so the
   expanded sidebar (272px) and the rail (.b-sidebar--rail, 64px; Atlas switches
   to it below 1024px and on Ctrl or Cmd B) never overlap the content. The
   sidebar holds the viewport height while the page scrolls; its nav scrolls
   inside it. Below 640px it is hidden: the HeaderBar's Menu button opens the
   navigation as a Sheet. Pages fill the window (Owner decision, Full-width pages,
   29 October 2026): the content column takes all of the main area (content-max is
   100%) with the same side gutters at every width, and nothing is centred in a
   capped column. Text keeps its own measure (measure-reading, measure-wide). */
.b-shell { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 100vh; }
/* min-height: 0 undoes .b-sidebar's min-height: 100%, which in the grid would stretch it to the page's height. */
.b-shell > .b-sidebar { position: sticky; top: 0; align-self: start; height: 100vh; min-height: 0; }
.b-shell__main { min-width: 0; display: flex; flex-direction: column; }
.b-shell__content { width: 100%; max-width: var(--content-max); padding: var(--space-8) var(--space-10) var(--space-16); display: flex; flex-direction: column; gap: var(--space-6); }
@media (max-width: 639.98px) {
  .b-shell { grid-template-columns: minmax(0, 1fr); }
  .b-shell > .b-sidebar { display: none; }
  .b-shell__content { padding: var(--space-6) var(--space-4) var(--space-10); }
}

.b-sidebar {
  display: flex; flex-direction: column; width: var(--sidebar-w); min-height: 100%; min-width: 0;
  background: var(--bg-sea); border-right: var(--border-hairline) solid var(--line); color: var(--text-2);
}
.b-sidebar__lockup { flex: none; display: flex; align-items: center; height: var(--header-h); padding: 0 var(--space-6); }
.b-sidebar__nav { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-2) var(--space-4); overflow-y: auto; }
.b-sidebar__section { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.b-sidebar__label { margin: 0; padding: 0 var(--space-3) var(--space-2); font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); }
/* A collapsible section (Administration): its label is a button that shows or hides the list below it
   (aria-expanded on the button, hidden on the list). It opens by itself on a page inside it; the rail
   hides the button and always shows the items. */
.b-sidebar__toggle {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; height: var(--control-h-sm); margin: 0 0 2px; padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-md); background: none; color: var(--text-3); text-align: left; cursor: pointer;
  font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans));
  transition: background-color var(--dur-state) var(--ease-standard), color var(--dur-state) var(--ease-standard);
}
.b-sidebar__toggle > svg { width: 16px; height: 16px; flex: none; margin-left: auto; transition: transform var(--dur-state) var(--ease-standard); }
.b-sidebar__toggle[aria-expanded="true"] > svg { transform: rotate(90deg); }
.b-sidebar__section[hidden] { display: none; }
.b-sidebar__toggle:is(:hover, [data-force="hover"]) { background: var(--bg-surface-2); color: var(--text-1); }
.b-sidebar__toggle:is(:focus-visible, [data-force="focus"]) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 0; }
/* When the nav is taller than the column, its foot edge fades until the end is reached: the cue that it scrolls. */
@property --b-nav-fade { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes b-nav-fade { from { --b-nav-fade: 40px; } 96% { --b-nav-fade: 40px; } to { --b-nav-fade: 0px; } }
@supports (animation-timeline: scroll()) {
  .b-sidebar__nav { mask-image: linear-gradient(to bottom, var(--bg-sea) calc(100% - var(--b-nav-fade)), transparent); animation: b-nav-fade linear both; animation-timeline: scroll(self); }
}
.b-sidebar__foot { flex: none; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-6) 18px; border-top: var(--border-hairline) solid var(--line); font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); }
.b-sidebar__foot-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.b-sidebar__foot .b-mono-small { color: var(--text-2); }

.b-nav-item {
  display: flex; align-items: center; gap: var(--space-3); height: var(--control-h-md); padding: 0 var(--space-3); min-width: 0;
  border-radius: var(--radius-md); color: var(--text-2); text-decoration: none;
  font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans));
  transition: background-color var(--dur-state) var(--ease-standard), color var(--dur-state) var(--ease-standard);
}
.b-nav-item > svg, .b-nav-item > .b-icon { width: 18px; height: 18px; flex: none; color: var(--text-3); transition: color var(--dur-state) var(--ease-standard); }
.b-nav-item__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-nav-item:is(:hover, [data-force="hover"]) { background: var(--bg-surface-2); color: var(--text-1); }
.b-nav-item:is(:focus-visible, [data-force="focus"]) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 0; }
.b-nav-item:is([aria-current="page"], [data-state="active"]) { background: var(--bg-surface-2); color: var(--text-1); font-weight: 500; box-shadow: inset 0 0 0 var(--border-hairline) var(--line); }
.b-nav-item:is([aria-current="page"], [data-state="active"]) > :is(svg, .b-icon) { color: var(--text-1); }
.b-nav-item__count {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-sm); text-align: center;
  background: var(--bad-wash); color: var(--bad-text); box-shadow: inset 0 0 0 var(--border-hairline) var(--bad-line);
  font: var(--type-mono-small-font, 400 0.8125rem/1.385 var(--font-mono)); line-height: 20px; letter-spacing: 0; font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero);
}
/* Collapsed rail: icons only; the label stays for screen readers and the tooltip. */
.b-sidebar--rail { width: var(--sidebar-w-rail); }
.b-sidebar--rail .b-sidebar__lockup { padding: 0; justify-content: center; }
.b-sidebar--rail .b-sidebar__nav { padding: var(--space-2) var(--space-3); }
.b-sidebar--rail .b-sidebar__section[hidden] { display: flex; }
.b-sidebar--rail .b-sidebar__label, .b-sidebar--rail .b-sidebar__toggle, .b-sidebar--rail .b-sidebar__foot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.b-sidebar--rail .b-nav-item { justify-content: center; padding: 0; width: 40px; position: relative; }
.b-sidebar--rail .b-nav-item__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.b-sidebar--rail .b-nav-item__count { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; line-height: 20px; padding: 0 5px; }

/* Product lockup: official wordmark, a 1px line-strong divider, then "ATLAS". */
.b-lockup { display: inline-flex; align-items: center; gap: 12px; color: var(--text-2); text-decoration: none; border-radius: var(--radius-sm); }
.b-lockup:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 4px; }
.b-lockup__logo { display: block; height: var(--b-logo-h, 18px); width: calc(var(--b-logo-h, 18px) * 3.898); }
.b-lockup__divider { width: 1px; height: var(--b-logo-h, 18px); background: var(--line-strong); }
.b-lockup__product { font: var(--type-mono-small-font, 400 0.8125rem/1.385 var(--font-mono)); font-weight: 500; letter-spacing: 0.16em; line-height: 18px; color: var(--text-2); }
.b-lockup--md { --b-logo-h: 20px; }
.b-lockup--lg { --b-logo-h: 24px; }
.b-sidebar--rail .b-lockup__divider, .b-sidebar--rail .b-lockup__product { display: none; }
.b-app-mark { display: block; width: 28px; height: 28px; border-radius: var(--radius-md); }

.b-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--space-4); height: var(--header-h); min-width: 0;
  /* Full width at every size, like the content column: the same insets on a 1440px and a 2560px screen. */
  padding: 0 var(--space-10) 0 var(--space-8);
  background: var(--bg-ground); border-bottom: var(--border-hairline) solid var(--line);
}
.b-header__search {
  display: flex; align-items: center; gap: 10px; width: 420px; max-width: 100%; min-width: 0; height: var(--control-h-md); padding: 0 7px 0 12px; margin: 0;
  border: 0; border-radius: var(--radius-md); background: var(--bg-surface-1); box-shadow: inset 0 0 0 var(--border-hairline) var(--line-strong);
  color: var(--text-3); font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); text-align: left; cursor: pointer;
  transition: box-shadow var(--dur-state) var(--ease-standard);
}
.b-header__search > svg { width: 18px; height: 18px; flex: none; }
.b-header__search > span:not(.b-kbd) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-header__search:is(:hover, [data-force="hover"]) { box-shadow: inset 0 0 0 var(--border-hairline) var(--line-control); }
.b-header__search:is(:focus-visible, [data-force="focus"]) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.b-header__spacer { flex: 1 1 auto; }
.b-header__clock { display: inline-flex; align-items: baseline; gap: 6px; font: var(--type-mono-font, 400 0.875rem/1.429 var(--font-mono)); color: var(--text-2); font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero); white-space: nowrap; }
.b-header__clock abbr { text-decoration: none; color: var(--text-3); }
.b-header__rule { flex: none; width: 1px; height: 24px; background: var(--line); }
/* The button's own face covers the .b-sr-only parts of its name (the commas, "account"); the visible parts set their own. */
.b-header__account { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; margin: 0; border: 0; background: none; border-radius: var(--radius-md); color: var(--text-1); font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); text-align: left; cursor: pointer; }
.b-header__account:is(:hover, [data-force="hover"]) { background: var(--secondary-hover); }
.b-header__account:is(:focus-visible, [data-force="focus"]) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.b-header__who { display: flex; flex-direction: column; min-width: 0; }
.b-header__name { font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); font-weight: 500; color: var(--text-1); white-space: nowrap; }
.b-header__role { font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); white-space: nowrap; }
.b-header__menu { display: none; }
.b-header__menu-label { white-space: nowrap; }
/* The product lockup in the header, for phones only, where the sidebar is hidden. */
.b-header__lockup { display: none; --b-logo-h: 16px; }
@media (max-width: 639.98px) {
  .b-header { gap: var(--space-2); padding: 0 var(--space-4); }
  .b-header__search { flex: none; width: var(--control-h-lg); height: var(--control-h-lg); padding: 0; justify-content: center; }
  .b-header__search > :not(svg) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .b-header__clock, .b-header__rule, .b-header > .b-badge { display: none; }
  /* Only the avatar shows; the name and role are visually hidden, not removed, so they stay the account button's name. */
  .b-header__who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .b-header__menu { display: inline-flex; flex: none; }
  .b-header__lockup { display: inline-flex; }
}
/* Below 420px the phone row (Menu with its word, the lockup, search, notifications and the account) would run into
   the side gutter, so the Menu button keeps only its icon; the word stays as its accessible name. */
@media (max-width: 419.98px) {
  .b-header__menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}


/* --------------------------------------------------------------------------
   16. Overlays: Menu, Popover, Tooltip, Dialog, CommandPalette
   The only drop shadow in the system is shadow-overlay.
   -------------------------------------------------------------------------- */
.b-overlay { background: var(--bg-surface-3); color: var(--text-1); box-shadow: var(--shadow-overlay); border-radius: var(--radius-lg); }

.b-menu {
  min-width: 240px; max-width: min(360px, calc(100vw - 2 * var(--space-4))); padding: var(--space-1); margin: 0; list-style: none;
  background: var(--bg-surface-3); color: var(--text-1); box-shadow: var(--shadow-overlay); border-radius: var(--radius-lg);
  z-index: var(--z-overlay);
}
.b-menu__label { padding: var(--space-2) var(--space-3) var(--space-1); font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); }
.b-menu__item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; height: var(--control-h-md); padding: 0 var(--space-3); margin: 0; border: 0;
  border-radius: var(--radius-md); background: none; color: var(--text-1); font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); text-align: left; text-decoration: none;
  cursor: pointer; outline: none;
}
.b-menu__item > svg, .b-menu__item > .b-icon { width: 18px; height: 18px; flex: none; color: var(--text-2); }
.b-menu__item:is(:hover, :focus-visible, [data-highlighted], [data-force="hover"], [data-force="focus"]) { background: var(--bg-surface-2); }
.b-menu__item:is(:focus-visible, [data-force="focus"]) { box-shadow: inset 0 0 0 var(--focus-width) var(--focus-ring); }
.b-menu__item:is([aria-checked="true"], [data-state="checked"]) { background: var(--bg-surface-2); font-weight: 500; }
.b-menu__item:is([aria-checked="true"], [data-state="checked"])::after {
  content: ""; flex: none; width: 16px; height: 16px; margin-left: var(--space-2); background: var(--text-1);
  -webkit-mask: var(--b-mask-check) center / contain no-repeat; mask: var(--b-mask-check) center / contain no-repeat;
}
.b-menu__item:is(:disabled, [aria-disabled="true"], [data-disabled]) { color: var(--text-disabled); cursor: not-allowed; background: none; }
.b-menu__item:is(:disabled, [aria-disabled="true"], [data-disabled]) > svg { color: var(--text-disabled); }
.b-menu__meta { margin-left: auto; padding-left: var(--space-3); font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); white-space: nowrap; }
.b-menu__item:is([aria-checked="true"], [data-state="checked"]) .b-menu__meta { font-weight: 400; }
.b-menu__separator { height: 1px; margin: var(--space-1) calc(-1 * var(--space-1)); background: var(--line); border: 0; }
.b-menu__group { margin: 0; padding: 0; list-style: none; }
.b-menu[data-state="open"], .b-popover[data-state="open"], .b-tooltip[data-state="open"] { animation: b-rise var(--dur-overlay) var(--ease-out) both; }
.b-menu[data-state="closed"], .b-popover[data-state="closed"], .b-tooltip[data-state="closed"] { animation: b-fade-out var(--dur-overlay) var(--ease-in) both; }
/* A trigger that opens a menu or popover. */
.b-button[aria-expanded="true"], .b-button[data-state="open"] { background: var(--secondary-hover); }
.b-button--ghost[aria-expanded="true"], .b-button--ghost[data-state="open"] { background: var(--secondary-hover); color: var(--text-1); }

.b-popover {
  width: 320px; max-width: calc(100vw - 2 * var(--space-4)); padding: 14px var(--space-4);
  background: var(--bg-surface-3); color: var(--text-1); box-shadow: var(--shadow-overlay); border-radius: var(--radius-lg);
  z-index: var(--z-overlay);
}
.b-popover--wide { width: 440px; padding: 0; }
.b-popover__head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.b-popover__title { margin: 0; font: var(--type-h4-font, 600 1rem/1.5 var(--font-sans)); color: var(--text-1); min-width: 0; }
.b-popover__title .b-mono-small { margin-left: 4px; font-weight: 400; color: var(--text-3); }
.b-popover__head > .b-badge, .b-popover__head > .b-live, .b-popover__head > .b-button { margin-left: auto; }
.b-popover__meta { margin: 2px 0 0; font: var(--type-mono-small-font, 400 0.8125rem/1.385 var(--font-mono)); color: var(--text-3); font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero); }
.b-popover__section { padding: 14px var(--space-4); }
.b-popover__section + .b-popover__section { border-top: var(--border-hairline) solid var(--line); }
.b-popover__list { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.b-popover__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-2); }
.b-popover__row > .b-mono { color: var(--text-1); }
.b-popover__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }

.b-tooltip {
  display: inline-flex; align-items: center; gap: var(--space-2); max-width: 320px; padding: 6px 10px;
  border-radius: var(--radius-sm); background: var(--bg-surface-3); box-shadow: var(--shadow-overlay);
  font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-1); z-index: var(--z-overlay);
}
.b-tooltip .b-kbd { height: 20px; line-height: 18px; padding: 0 6px; }
/* Tooltip anchored to its trigger. The trigger carries aria-describedby. */
.b-tooltip-anchor { position: relative; display: inline-flex; }
.b-tooltip-anchor > .b-tooltip { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; }
.b-tooltip-anchor > .b-tooltip--top { top: auto; bottom: calc(100% + 6px); }
.b-tooltip-anchor > .b-tooltip--right { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.b-tooltip-anchor > .b-tooltip--start { left: 0; transform: none; }
.b-tooltip-anchor > .b-tooltip--end { left: auto; right: 0; transform: none; }

.b-scrim { position: fixed; inset: 0; z-index: var(--z-dialog); display: grid; place-items: center; padding: var(--space-4); background: var(--scrim); }
.b-scrim--top { place-items: start center; padding-top: 12vh; }
/* Contained scrim: for documentation, sits inside a positioned box instead of the viewport. */
.b-scrim--contained { position: relative; inset: auto; z-index: auto; min-height: 100%; border-radius: var(--radius-lg); }
.b-scrim-frame { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--bg-ground); box-shadow: inset 0 0 0 var(--border-hairline) var(--line); }

.b-dialog {
  position: relative; display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: 500px; margin: 0; padding: var(--space-6);
  border: 0; border-radius: var(--radius-xl); background: var(--bg-surface-3); color: var(--text-1); box-shadow: var(--shadow-overlay);
}
dialog.b-dialog:modal { margin: auto; max-height: calc(100vh - 2 * var(--space-8)); }
dialog.b-dialog::backdrop { background: var(--scrim); }
.b-dialog__title { margin: 0; font: var(--type-h3-font, 600 1.125rem/1.444 var(--font-sans)); letter-spacing: var(--type-h3-tracking, -0.01em); color: var(--text-1); text-wrap: balance; }
.b-dialog__title .b-mono-value { font-weight: 500; }
.b-dialog__body { margin: 0; font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); color: var(--text-2); text-wrap: pretty; }
.b-dialog__content { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-2); }
.b-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.b-dialog__close { position: absolute; top: 14px; right: 14px; }
.b-dialog[data-state="open"], dialog.b-dialog[open] { animation: b-dialog-in var(--dur-panel) var(--ease-out) both; }
.b-dialog[data-state="closed"] { animation: b-fade-out var(--dur-overlay) var(--ease-in) both; }
/* Sheet: full height from the edge (the mobile sidebar, filters). */
.b-sheet { position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--z-dialog); width: min(400px, 100vw); display: flex; flex-direction: column; background: var(--bg-sea); box-shadow: var(--shadow-overlay); }
.b-sheet--right { left: auto; right: 0; background: var(--bg-surface-3); }

.b-command {
  width: 100%; max-width: 640px; overflow: hidden; display: flex; flex-direction: column;
  border-radius: var(--radius-xl); background: var(--bg-surface-3); color: var(--text-1); box-shadow: var(--shadow-overlay);
}
.b-command__search { display: flex; align-items: center; gap: var(--space-3); height: 56px; padding: 0 var(--space-4); margin: 0; border-bottom: var(--border-hairline) solid var(--line); }
.b-command__search > svg { width: 18px; height: 18px; flex: none; color: var(--text-3); }
.b-command__input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; margin: 0; border: 0; background: none; color: var(--text-1); font: var(--type-body-font, 400 1rem/1.5 var(--font-sans)); }
.b-command__input::placeholder { color: var(--text-3); opacity: 1; }
.b-command__input:focus { outline: none; }
.b-command__search:has(.b-command__input:focus-visible) { box-shadow: inset 0 -2px 0 var(--focus-ring); }
.b-command__list { max-height: var(--b-command-max, min(480px, 60vh)); overflow-y: auto; padding: var(--space-2); margin: 0; }
.b-command__group { margin: 0; padding: 0; list-style: none; }
.b-command__group + .b-command__group { margin-top: var(--space-1); }
.b-command__heading { padding: var(--space-2) var(--space-3) var(--space-1); font: var(--type-label-font, 500 0.8125rem/1.385 var(--font-mono)); letter-spacing: var(--type-label-tracking, 0.1em); text-transform: uppercase; color: var(--text-3); }
.b-command__item {
  display: flex; align-items: center; gap: var(--space-3); height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-md);
  font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); color: var(--text-1); cursor: pointer; min-width: 0;
}
.b-command__item > svg, .b-command__item > .b-icon { width: 18px; height: 18px; flex: none; color: var(--text-2); }
.b-command__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-command__route { flex: none; margin-left: auto; font: var(--type-mono-small-font, 400 0.8125rem/1.385 var(--font-mono)); color: var(--text-3); font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero); }
.b-command__item:is(:hover, [aria-selected="true"], [data-state="selected"], [data-force="hover"]) { background: var(--bg-surface-2); }
.b-command__item:is([aria-selected="true"], [data-state="selected"]) { box-shadow: inset 0 0 0 var(--border-hairline) var(--line); }
.b-command__empty { padding: var(--space-6) var(--space-4); font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); color: var(--text-3); text-align: left; }
.b-command__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-4); padding: 10px var(--space-4); border-top: var(--border-hairline) solid var(--line); font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); }
.b-command__hint { display: inline-flex; align-items: center; gap: 6px; }


/* --------------------------------------------------------------------------
   17. Avatar: monochrome initials, no photos, no colour coding
   -------------------------------------------------------------------------- */
.b-avatar {
  --b-avatar: 32px;
  display: inline-grid; place-items: center; flex: none; width: var(--b-avatar); height: var(--b-avatar);
  border-radius: var(--radius-full); background: var(--bg-surface-3); color: var(--text-1);
  box-shadow: inset 0 0 0 var(--border-hairline) var(--line-strong);
  font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.02em; user-select: none;
}
.b-avatar--sm { --b-avatar: 28px; font-size: 13px; letter-spacing: 0; }
.b-avatar--lg { --b-avatar: 44px; font-size: 16px; }
.b-avatar--xl { --b-avatar: 72px; font-size: 24px; font-weight: 600; letter-spacing: -0.015em; }
.b-person { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 0; }
.b-person__text { display: flex; flex-direction: column; min-width: 0; }
.b-person__name { font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); font-weight: 500; color: var(--text-1); }
.b-person__meta { font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); }


/* --------------------------------------------------------------------------
   18. CodeBlock and inline code
   -------------------------------------------------------------------------- */
.b-code { min-width: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--bg-sea); box-shadow: inset 0 0 0 var(--border-hairline) var(--line); }
.b-code__head { display: flex; align-items: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-2) 0 var(--space-4); border-bottom: var(--border-hairline) solid var(--line); }
.b-code__title { margin: 0; font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-code__lang { font: var(--type-mono-small-font, 400 0.8125rem/1.385 var(--font-mono)); color: var(--text-3); }
.b-code__copy { margin-left: auto; }
.b-code__status { font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-2); }
.b-code__head .b-code__status { margin-left: auto; }
.b-code__head .b-code__status + .b-code__copy { margin-left: 0; }
.b-code__body {
  display: block; margin: 0; padding: 14px var(--space-4) var(--space-4); overflow-x: auto;
  font: var(--type-mono-font, 400 0.875rem/1.429 var(--font-mono)); line-height: 22px; color: var(--text-1); white-space: pre; tab-size: 2;
  font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero);
}
.b-code__body:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: calc(-1 * var(--focus-width)); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.b-code__comment { color: var(--text-3); }
.b-code__prompt { color: var(--text-3); user-select: none; }
.b-copy-button[data-state="copied"] { color: var(--text-1); }
.b-code-inline { padding: 1px 5px; border-radius: var(--radius-xs); background: var(--bg-surface-2); box-shadow: inset 0 0 0 var(--border-hairline) var(--line); font: var(--type-mono-font, 400 0.875rem/1.429 var(--font-mono)); font-size: max(13px, 0.92em); color: var(--text-1); font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero); overflow-wrap: anywhere; }


/* --------------------------------------------------------------------------
   19. UptimeStrip: height is a second channel
   -------------------------------------------------------------------------- */
.b-uptime { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.b-uptime__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); }
.b-uptime__target { font: var(--type-mono-font, 400 0.875rem/1.429 var(--font-mono)); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.b-uptime__summary { font-variant-numeric: var(--font-numeric, tabular-nums); white-space: nowrap; }
.b-uptime__summary .b-mono { color: var(--text-1); }
.b-uptime__strip { display: flex; align-items: flex-end; gap: 2px; height: 28px; min-width: 0; }
.b-uptime--detail .b-uptime__strip { height: 32px; }
.b-uptime__cell { flex: 1 1 0; min-width: 2px; display: block; border-radius: var(--radius-xs); }
.b-uptime__cell[data-bucket="ok"] { height: 100%; background: var(--uptime-ok); }
.b-uptime__cell[data-bucket="warn"] { height: 62%; background: var(--uptime-warn); }
.b-uptime__cell[data-bucket="bad"] { height: 30%; background: var(--uptime-bad); }
.b-uptime__cell[data-bucket="probe"] {
  height: 100%; box-shadow: inset 0 0 0 1.5px var(--uptime-probe);
  background: repeating-linear-gradient(135deg, transparent 0 2px, color-mix(in oklab, var(--uptime-probe) 45%, transparent) 2px 3px);
}
.b-uptime__cell[data-bucket="empty"] { height: 2px; background: var(--uptime-empty); }
@media (max-width: 479.98px) { .b-uptime__strip { gap: 1px; } }
.b-uptime__foot { display: flex; justify-content: space-between; gap: var(--space-3); font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); }
.b-uptime-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-4); margin: 0; padding: 0; list-style: none; font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-2); }
.b-uptime-legend__key { display: inline-flex; align-items: flex-end; gap: 6px; }
.b-uptime-legend__key .b-uptime__cell { flex: none; width: 9px; min-width: 9px; height: 14px; }
.b-uptime-legend__key .b-uptime__cell[data-bucket="warn"] { height: 9px; }
.b-uptime-legend__key .b-uptime__cell[data-bucket="bad"] { height: 4px; }
.b-uptime-legend__key .b-uptime__cell[data-bucket="empty"] { height: 2px; margin-bottom: 0; }
.b-uptime-legend__key { align-items: center; }
.b-uptime-legend__swatch { display: inline-flex; align-items: flex-end; height: 14px; }


/* --------------------------------------------------------------------------
   20. TimeSeriesChart frame: axes, grid, series, gaps, crosshair, legend
   Draw the plot as inline SVG; these classes colour its parts.
   -------------------------------------------------------------------------- */
.b-chart { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.b-chart__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-4); min-width: 0; }
.b-chart__title { margin: 0; font: var(--type-h3-font, 600 1.125rem/1.444 var(--font-sans)); letter-spacing: var(--type-h3-tracking, -0.01em); color: var(--text-1); }
.b-chart__title .b-mono { font-weight: 500; }
.b-chart__subtitle { margin: 0; font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); }
.b-chart__controls { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.b-chart__plot { position: relative; height: var(--b-chart-h, 200px); min-width: 0; }
.b-chart--detail { --b-chart-h: 260px; }
.b-chart__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.b-chart__grid { stroke: var(--chart-grid); stroke-width: 1; fill: none; shape-rendering: crispEdges; vector-effect: non-scaling-stroke; }
.b-chart__axis { stroke: var(--chart-axis); stroke-width: 1; fill: none; shape-rendering: crispEdges; vector-effect: non-scaling-stroke; }
.b-chart__tick { fill: var(--chart-label); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero); }
.b-chart__series { fill: none; stroke: var(--b-series, var(--chart-1)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.b-chart__area { fill: var(--b-series, var(--chart-1)); fill-opacity: 0.12; stroke: none; }
.b-chart__point { fill: var(--b-series, var(--chart-1)); stroke: var(--bg-surface-1); stroke-width: 2; vector-effect: non-scaling-stroke; }
[data-series="1"] { --b-series: var(--chart-1); }
[data-series="2"] { --b-series: var(--chart-2); }
[data-series="3"] { --b-series: var(--chart-3); }
[data-series="4"] { --b-series: var(--chart-4); }
.b-chart__gap { fill: var(--chart-grid); }
.b-chart__gap-label { fill: var(--text-3); font-family: var(--font-sans); font-size: 14px; }
.b-chart__crosshair { stroke: var(--chart-crosshair); stroke-width: 1; stroke-dasharray: 2 3; fill: none; vector-effect: non-scaling-stroke; }
.b-chart__end-label { fill: var(--text-2); font-family: var(--font-sans); font-size: 14px; }
.b-chart__end-label tspan.b-chart__end-value { fill: var(--text-1); font-family: var(--font-mono); font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero); }
.b-chart__empty { position: absolute; inset: 0; display: grid; place-items: center; font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); color: var(--text-3); }
.b-chart:focus-within .b-chart__plot:focus-visible, .b-chart__plot:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-sm); }

.b-chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-4); margin: 0; padding: 0; list-style: none; font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-2); }
.b-chart-legend__item { display: inline-flex; align-items: center; gap: 8px; }
.b-chart-legend__key { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--b-series, var(--chart-1)); border-radius: 1px; }
.b-chart-legend__value { font: var(--type-mono-small-font, 400 0.8125rem/1.385 var(--font-mono)); color: var(--text-3); }

.b-chart-tooltip {
  position: absolute; min-width: 200px; padding: 10px 14px; pointer-events: none;
  border-radius: var(--radius-md); background: var(--bg-surface-3); color: var(--text-1); box-shadow: var(--shadow-overlay);
  font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); z-index: var(--z-overlay);
}
.b-chart-tooltip__time { margin: 0 0 4px; font: var(--type-mono-small-font, 400 0.8125rem/1.385 var(--font-mono)); color: var(--text-3); }
.b-chart-tooltip__row { display: flex; align-items: center; gap: var(--space-2); line-height: 24px; color: var(--text-2); }
.b-chart-tooltip__row > .b-chart-legend__key { width: 10px; }
.b-chart-tooltip__value { margin-left: auto; padding-left: var(--space-4); font: var(--type-mono-font, 400 0.875rem/1.429 var(--font-mono)); color: var(--text-1); }


/* --------------------------------------------------------------------------
   21. World map: plate, markers per health state, labels, legend, site rows
   A site's marker shows its worst server. Healthy markers never animate.
   -------------------------------------------------------------------------- */
.b-map-plate { position: relative; min-width: 0; min-height: 160px; aspect-ratio: var(--b-map-ratio, auto); overflow: hidden; background: var(--map-sea); border-radius: var(--radius-0); }
.b-map-plate--rounded { border-radius: var(--radius-lg); box-shadow: inset 0 0 0 var(--border-hairline) var(--line); }
.b-map-plate__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.b-map__land { fill: var(--map-land); }
/* Land drawn as one path of zero-length round-capped segments (one per dot); set stroke-width to the dot size. */
.b-map__dots { fill: none; stroke: var(--map-land); stroke-linecap: round; }
.b-map__equator { stroke: var(--map-outline); stroke-width: 1; stroke-dasharray: 1 3; fill: none; vector-effect: non-scaling-stroke; }
.b-map__graticule { stroke: var(--map-graticule); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.b-map__outline { stroke: var(--map-outline); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.b-map__route { stroke: var(--map-route); stroke-width: 1.25; fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.b-map__route--planned { stroke: var(--map-route-planned); stroke-width: 1; stroke-dasharray: 3 3; }
.b-map__route--draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: b-draw var(--dur-draw) var(--ease-draw) forwards; }

/* Glyph: the marker shape alone (site rows, legends). Sizes: 14 lists and legends, 16 map. */
.b-map-glyph { position: relative; display: inline-block; flex: none; vertical-align: middle; width: var(--b-glyph, 14px); height: var(--b-glyph, 14px); }
.b-map-glyph::after {
  content: ""; position: absolute; inset: 0; background: var(--b-health-mark, var(--neutral));
  -webkit-mask: var(--b-health-shape, var(--b-mask-map-ring)) center / contain no-repeat; mask: var(--b-health-shape, var(--b-mask-map-ring)) center / contain no-repeat;
}
.b-map-glyph--legend { --b-glyph: 14px; }
.b-map-glyph--map { --b-glyph: 16px; }
[data-health="offline"] { --b-health-mark: var(--map-marker-offline); --b-health-text: var(--bad-text); --b-health-shape: var(--b-mask-map-square); --b-health-halo: var(--b-mask-map-halo-square); }
[data-health="delayed"] { --b-health-mark: var(--map-marker-delayed); --b-health-text: var(--warn-text); --b-health-shape: var(--b-mask-map-triangle); --b-health-halo: var(--b-mask-map-halo-triangle); }
[data-health="awaiting"] { --b-health-mark: var(--map-marker-awaiting); --b-health-text: var(--info-text); --b-health-shape: var(--b-mask-map-diamond-hollow); --b-health-halo: var(--b-mask-map-halo-diamond); }
[data-health="maintenance"] { --b-health-mark: var(--map-marker-maintenance); --b-health-text: var(--warn-text); --b-health-shape: var(--b-mask-map-ring-dashed); --b-health-halo: var(--b-mask-map-halo-circle); }
[data-health="reporting"] { --b-health-mark: var(--map-marker-reporting); --b-health-text: var(--ok-text); --b-health-shape: var(--b-mask-map-dot); --b-health-halo: var(--b-mask-map-halo-circle); }
[data-health="unmonitored"] { --b-health-mark: var(--map-marker-unmonitored); --b-health-text: var(--neutral-text); --b-health-shape: var(--b-mask-map-ring); --b-health-halo: var(--b-mask-map-halo-circle); }
/* Before sign-in: public sites only, neutral ink dots, no health data. */
[data-health="public"] { --b-health-mark: var(--text-2); --b-health-text: var(--text-2); --b-health-shape: var(--b-mask-map-dot); --b-health-halo: var(--b-mask-map-halo-circle); }

/* Marker: a named button placed on the plate (left and top in % of the plate). */
.b-map-marker {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0; margin: 0;
  border: 0; border-radius: var(--radius-full); background: none; cursor: pointer; z-index: 2;
}
.b-map-marker::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  background: var(--map-marker-halo);
  -webkit-mask: var(--b-health-halo, var(--b-mask-map-halo-circle)) center / contain no-repeat; mask: var(--b-health-halo, var(--b-mask-map-halo-circle)) center / contain no-repeat;
}
.b-map-marker::after {
  content: ""; position: relative; width: 16px; height: 16px; background: var(--b-health-mark, var(--neutral));
  -webkit-mask: var(--b-health-shape, var(--b-mask-map-ring)) center / contain no-repeat; mask: var(--b-health-shape, var(--b-mask-map-ring)) center / contain no-repeat;
}
.b-map-marker[data-health="reporting"] { width: 16px; height: 16px; z-index: 1; }
.b-map-marker[data-health="reporting"]::before { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
.b-map-marker[data-health="reporting"]::after { width: 12px; height: 12px; }
.b-map-marker--inset[data-health="reporting"]::after { width: 10px; height: 10px; }
.b-map-marker:is(:hover, [data-force="hover"])::before { background: var(--bg-surface-2); }
.b-map-marker:is(:focus-visible, [data-force="focus"]) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
/* Selected: the 1.5px ink ring (map-selected). */
.b-map-marker:is([aria-pressed="true"], [aria-current="true"], [data-state="selected"]) { box-shadow: 0 0 0 var(--border-selected) var(--map-selected); }
/* Offline: the only marker that rings. Two quiet static rings, and the status ring (section 22): two live
   rings half a beat apart when the marker appears, then it holds still. */
.b-map-marker__ping { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: var(--radius-full); box-shadow: 0 0 0 1px var(--bad-text); opacity: 0.55; pointer-events: none; }
.b-map-marker__ping::before { content: ""; position: absolute; inset: -6px; border-radius: var(--radius-full); box-shadow: 0 0 0 1px var(--bad-text); opacity: 0.5; }
.b-map-marker__ping::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-full); box-shadow: 0 0 0 1px var(--bad-text); opacity: 0; }

/* Exception label: Geist Mono 13px (mono-small) on the label plate; the code is text-1. */
.b-map-label {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%); transform: translate(14px, -50%);
  padding: 1px 6px; border-radius: var(--radius-xs); background: var(--map-label-bg);
  font: var(--type-mono-small-font, 400 0.8125rem/1.385 var(--font-mono)); line-height: 16px; color: var(--map-label); white-space: nowrap; pointer-events: none;
  font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero); z-index: 3;
}
.b-map-label b, .b-map-label strong { font-weight: 500; color: var(--text-1); }
.b-map-label--left { transform: translate(calc(-100% - 14px), -50%); }
.b-map-label--quiet b, .b-map-label--quiet strong { font-weight: 400; color: var(--text-2); }
/* Phones: a label near the plate edge wraps onto a second line instead of running off the plate. */
@media (max-width: 639.98px) {
  .b-map-label { width: max-content; max-width: calc(100% - var(--x, 50%) - 18px); white-space: normal; }
  .b-map-label--left { max-width: calc(var(--x, 50%) - 18px); }
}
.b-map-tick { position: absolute; font: var(--type-mono-small-font, 400 0.8125rem/1.385 var(--font-mono)); color: var(--text-3); text-shadow: 0 0 2px var(--map-sea), 0 0 4px var(--map-sea); pointer-events: none; }

.b-map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-4); margin: 0; padding: 0; list-style: none; font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-2); }
.b-map-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.b-map-legend__count { font: var(--type-mono-small-font, 400 0.8125rem/1.385 var(--font-mono)); color: var(--text-3); }
.b-map-legend__route { display: inline-block; width: 20px; height: 0; border-top: 1.5px solid var(--map-route); }
.b-map-legend__route--planned { border-top: 1px dashed var(--map-route-planned); }
.b-map-legend__inset { display: inline-block; width: 16px; height: 11px; border-radius: 1px; box-shadow: inset 0 0 0 1px var(--map-inset-frame); }

/* Map beside its site rail (rail-w); below 900px the rail moves under the map. */
.b-map-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); min-width: 0; }
.b-map-layout > :last-child { border-left: var(--border-hairline) solid var(--line); }
@media (max-width: 899.98px) { .b-map-layout { grid-template-columns: minmax(0, 1fr); } .b-map-layout > :last-child { border-left: 0; border-top: var(--border-hairline) solid var(--line); } }

/* Site rows: the accessible list beside the map, worst first. */
.b-site-list { margin: 0; padding: 0; list-style: none; }
.b-panel > .b-site-list { border-top: var(--border-hairline) solid var(--line-subtle); }
.b-site-row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: var(--space-3); row-gap: 2px; align-items: center;
  padding: 10px var(--space-5); border-top: var(--border-hairline) solid var(--line-subtle); color: var(--text-1); text-decoration: none;
  transition: background-color var(--dur-state) var(--ease-standard);
}
.b-site-list > li:first-child > .b-site-row, .b-site-row:first-child { border-top: 0; }
.b-site-row:is(:hover, [data-force="hover"]) { background: var(--bg-surface-2); }
.b-site-row:is(:focus-visible, [data-force="focus"]) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-sm); }
.b-site-row__mark { position: relative; display: grid; place-items: center; width: 24px; height: 24px; }
.b-site-row__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); font-weight: 500; }
.b-site-row__name .b-mono-small { margin-left: 4px; font-weight: 400; color: var(--text-3); }
.b-site-row__state { font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); color: var(--text-2); white-space: nowrap; }
.b-site-row:is([data-health="offline"], [data-health="delayed"]) .b-site-row__state { color: var(--b-health-text); }
.b-site-row__detail { grid-column: 2 / span 2; font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); min-width: 0; }
.b-site-row__detail .b-mono { white-space: nowrap; } /* a hostname never breaks at its hyphens */
.b-site-row__codes { grid-column: 2 / span 2; font: var(--type-mono-small-font, 400 0.8125rem/1.385 var(--font-mono)); color: var(--text-3); letter-spacing: 0.02em; word-spacing: 0.2em; }
/* Selected: the ground plus the same 1.5px ink ring the map draws (never a ground change alone). */
.b-site-row:is([aria-current="true"], [aria-current="page"], [data-state="selected"]) { background: var(--bg-surface-2); }
.b-site-row:is([aria-current="true"], [aria-current="page"], [data-state="selected"]) .b-site-row__mark::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius-full); box-shadow: 0 0 0 var(--border-selected) var(--map-selected);
}


/* --------------------------------------------------------------------------
   22. Motion: opacity and transform only; nothing bounces
   -------------------------------------------------------------------------- */
@keyframes b-spin { to { transform: rotate(360deg); } }
@keyframes b-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes b-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes b-dialog-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* The status ring, for an Offline mark only (.b-status-dot--pulse, .b-map-marker__ping). WCAG 2.2.2 (Pause,
   Stop, Hide): it never loops. Two rings, each dur-ping (opacity 0.6 to 0, scale 1 to 2.2, ease-cycle), the second
   half a beat after the first, so the last ring has faded at 3.9s (beat / 2 + dur-ping), inside five seconds.
   Then the mark holds still: the shape, the two static marker rings and the word "Offline" carry the state.
   It plays when the mark is first rendered (a page load, or the moment a state turns Offline) and does not
   replay while the state holds. Under reduced motion there is no live ring (below). */
.b-status-dot--pulse::after, .b-map-marker__ping::after {
  animation: b-ping var(--dur-ping) var(--ease-cycle), b-ping var(--dur-ping) var(--ease-cycle) calc(var(--beat) / 2);
}
@keyframes b-ping { from { opacity: 0.6; transform: scale(1); } to { opacity: 0; transform: scale(2.2); } }
@keyframes b-draw { to { stroke-dashoffset: 0; } }
.b-reveal { animation: b-reveal var(--dur-reveal) var(--ease-out) both; }
@keyframes b-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  [class^="b-"], [class*=" b-"], [class^="b-"]::before, [class*=" b-"]::before, [class^="b-"]::after, [class*=" b-"]::after {
    animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important;
  }
  .b-spinner { animation: none !important; }
  /* The status ring is removed: the Offline dot holds still, the Offline marker keeps its static rings. */
  .b-map-marker__ping::after, .b-status-dot--pulse::after { animation: none !important; opacity: 0 !important; }
  .b-map__route--draw { animation: none !important; stroke-dashoffset: 0; stroke-dasharray: none; }
}


/* --------------------------------------------------------------------------
   23. Website frame: SiteNotice, SiteHeader, SiteFooter
   The public site's frame (beriffa.com): a notice row above the sticky header
   with its navigation, and the footer, with the page gutters (space-10;
   space-4 on phones), like the bands between them. Their grounds and lines
   run to the window's edges at every size. On the marketing pages (.b-site,
   at the end of this section) their content keeps to the old site's centred
   column from 1400px; elsewhere (the control panel's notice row) it fills the
   window.
   -------------------------------------------------------------------------- */
/* SiteNotice: one line above the header, on load (not role="alert"): a labelled aside. Status by glyph and words. */
.b-site-notice {
  display: flex; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0;
  min-height: var(--row-h); padding: var(--space-2) var(--space-10);
  background: var(--b-tone-wash, var(--bg-surface-1)); box-shadow: inset 0 calc(-1 * var(--border-hairline)) 0 var(--b-tone-line, var(--line));
  color: var(--text-1);
}
.b-site-notice[data-tone="neutral"] { background: var(--bg-surface-1); box-shadow: inset 0 calc(-1 * var(--border-hairline)) 0 var(--line); }
.b-site-notice__icon { flex: none; width: 20px; height: 20px; color: var(--b-tone-text, var(--text-2)); }
.b-site-notice__badge { flex: none; }
.b-site-notice__text { flex: 0 1 auto; min-width: 0; max-width: var(--measure-wide); margin: 0; font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); color: var(--text-1); text-wrap: pretty; }
.b-site-notice__link { flex: none; color: var(--text-1); }
.b-site-notice__close { flex: none; margin-left: auto; color: var(--text-1); }
/* Filled: a critical security advisory (Owner decision, Attention in red): the system's one red fill (danger, as the
   alert button), on-danger words, glyph, link and close; the focus ring takes on-danger, so it keeps 3:1 against the
   fill in both themes. */
.b-site-notice--filled[data-tone="bad"] { background: var(--danger); box-shadow: inset 0 calc(-1 * var(--border-hairline)) 0 var(--danger-press); }
.b-site-notice--filled[data-tone="bad"] :is(.b-site-notice__icon, .b-site-notice__text, .b-site-notice__link, .b-site-notice__close) { color: var(--on-danger); }
.b-site-notice--filled[data-tone="bad"] .b-site-notice__link { text-decoration-color: var(--on-danger); }
.b-site-notice--filled[data-tone="bad"] .b-site-notice__close:is(:hover, [data-force="hover"]) { background: var(--danger-press); color: var(--on-danger); }
.b-site-notice--filled[data-tone="bad"] :is(a, button):is(:focus-visible, [data-force="focus"]) { outline-color: var(--on-danger); }
@media (max-width: 639.98px) {
  .b-site-notice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-3); row-gap: var(--space-1); padding: var(--space-1) var(--space-1) var(--space-3) var(--space-4); }
  .b-site-notice > :is(.b-site-notice__icon, .b-site-notice__badge) { grid-column: 1; grid-row: 1; margin-top: 12px; }
  .b-site-notice__text { grid-column: 2; grid-row: 1; padding-top: 10px; }
  .b-site-notice__link { grid-column: 2; grid-row: 2; justify-self: start; }
  .b-site-notice__close { grid-column: 3; grid-row: 1; --b-h: var(--control-h-lg); }
}

/* SiteHeader: sticky, header-h, the lockup, the main navigation (disclosure triggers, not role="menu"), then search,
   locale, Log in and Sign up. Below 1280 the search and locale labels hide; below 1024 the navigation and the locale
   move into the sheet and "Menu" appears; below 640 Log in and Sign up move into the sheet too. */
.b-site-header { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--bg-ground); border-bottom: var(--border-hairline) solid var(--line); }
.b-site-header__bar { display: flex; align-items: center; gap: var(--space-6); height: var(--header-h); min-width: 0; padding: 0 var(--space-10); }
.b-site-header__brand { flex: none; }
.b-site-header__nav { flex: 0 1 auto; min-width: 0; }
.b-site-header__nav > ul { display: flex; align-items: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.b-site-header__item { position: relative; }
.b-site-header__link, .b-site-header__trigger {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: var(--control-h-md); padding: 0 12px; margin: 0;
  border: 0; border-radius: var(--radius-md); background: none; color: var(--text-2);
  font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-state) var(--ease-standard), color var(--dur-state) var(--ease-standard);
}
.b-site-header__trigger > svg { width: 16px; height: 16px; flex: none; color: var(--text-3); transition: transform var(--dur-state) var(--ease-standard); }
.b-site-header__link:is(:hover, [data-force="hover"]), .b-site-header__trigger:is(:hover, [data-force="hover"], [aria-expanded="true"]) { background: var(--bg-surface-2); color: var(--text-1); }
.b-site-header__trigger[aria-expanded="true"] > svg { transform: rotate(180deg); color: var(--text-1); }
.b-site-header__link:is(:focus-visible, [data-force="focus"]), .b-site-header__trigger:is(:focus-visible, [data-force="focus"]) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
/* The current page (a link) or section (a trigger): ink, 500, and a 2px ink rule on the header's bottom line. */
.b-site-header__link:is([aria-current="page"], [data-state="active"]), .b-site-header__trigger[data-state="active"] { color: var(--text-1); font-weight: 500; }
.b-site-header__link:is([aria-current="page"], [data-state="active"])::after, .b-site-header__trigger[data-state="active"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: calc((var(--header-h) - var(--control-h-md)) / -2); height: 2px; border-radius: 1px; background: var(--text-1);
}
/* The panel a trigger opens: a list of entries, each a title and a one-line description. */
.b-site-header__panel {
  position: absolute; left: 0; top: calc(100% + (var(--header-h) - var(--control-h-md)) / 2 + var(--space-1)); z-index: var(--z-overlay);
  width: max-content; min-width: 320px; max-width: min(440px, calc(100vw - 2 * var(--space-4))); padding: var(--space-1); margin: 0;
  background: var(--bg-surface-3); color: var(--text-1); box-shadow: var(--shadow-overlay); border-radius: var(--radius-lg);
}
.b-site-header__panel[hidden] { display: none; }
.b-site-header__panel[data-state="open"] { animation: b-rise var(--dur-overlay) var(--ease-out) both; }
.b-site-header__panel > ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.b-site-header__entry {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-md); color: var(--text-1); text-decoration: none; outline: none;
  transition: background-color var(--dur-state) var(--ease-standard);
}
.b-site-header__entry:is(:hover, [data-force="hover"]) { background: var(--bg-surface-2); }
.b-site-header__entry:is(:focus-visible, [data-force="focus"]) { background: var(--bg-surface-2); box-shadow: inset 0 0 0 var(--focus-width) var(--focus-ring); }
/* The current page in a panel: the ground plus the 1.5px ink ring (never a ground change alone). */
.b-site-header__entry[aria-current="page"] { background: var(--bg-surface-2); box-shadow: inset 0 0 0 var(--border-selected) var(--accent); }
.b-site-header__entry-title { font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); font-weight: 500; color: var(--text-1); }
.b-site-header__entry-desc { font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-2); }
.b-site-header__actions { flex: none; display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.b-site-header__search {
  display: inline-flex; align-items: center; gap: 8px; height: var(--control-h-md); padding: 0 6px 0 12px; margin: 0;
  border: 0; border-radius: var(--radius-md); background: var(--bg-surface-1); box-shadow: inset 0 0 0 var(--border-hairline) var(--line-strong);
  color: var(--text-2); font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); white-space: nowrap; cursor: pointer;
  transition: box-shadow var(--dur-state) var(--ease-standard), color var(--dur-state) var(--ease-standard);
}
.b-site-header__search > svg { width: 18px; height: 18px; flex: none; color: var(--text-3); }
.b-site-header__search > .b-kbd { margin-left: 8px; }
.b-site-header__search:is(:hover, [data-force="hover"]) { color: var(--text-1); box-shadow: inset 0 0 0 var(--border-hairline) var(--line-control); }
.b-site-header__search:is(:focus-visible, [data-force="focus"]) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.b-site-header__locale {
  display: inline-flex; align-items: center; gap: 6px; height: var(--control-h-md); padding: 0 10px; margin: 0;
  border: 0; border-radius: var(--radius-md); background: none; color: var(--text-2); font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-state) var(--ease-standard), color var(--dur-state) var(--ease-standard);
}
.b-site-header__locale > svg { width: 18px; height: 18px; flex: none; color: var(--text-3); }
.b-site-header__locale > svg ~ svg { width: 16px; height: 16px; }
.b-site-header__locale:is(:hover, [data-force="hover"], [aria-expanded="true"]) { background: var(--bg-surface-2); color: var(--text-1); }
.b-site-header__locale:is(:focus-visible, [data-force="focus"]) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.b-site-header__menu-button { display: none; }
@media (max-width: 1279.98px) {
  .b-site-header__bar { gap: var(--space-4); }
  .b-site-header__search { width: var(--control-h-md); padding: 0; justify-content: center; }
  .b-site-header__search > :not(svg), .b-site-header__actions > .b-site-header__locale > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .b-site-header__actions > .b-site-header__locale > svg ~ svg { display: none; }
}
@media (max-width: 1023.98px) {
  .b-site-header__nav, .b-site-header__actions > .b-site-header__locale { display: none; }
  .b-site-header__menu-button { display: inline-flex; }
}
@media (max-width: 639.98px) {
  .b-site-header__bar { gap: var(--space-2); padding: 0 var(--space-2) 0 var(--space-4); }
  .b-site-header__brand { --b-logo-h: 16px; }
  .b-site-header__actions { gap: var(--space-1); }
  .b-site-header__actions > .b-button:not(.b-site-header__menu-button) { display: none; }
  .b-site-header__search { width: var(--control-h-lg); height: var(--control-h-lg); }
  .b-site-header__menu-button { padding: 0 12px; }
}
/* The phone sheet (.b-sheet): the navigation as groups with an eyebrow head, the locale, then Log in and Sign up. */
.b-site-header__sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--header-h); padding: 0 var(--space-2) 0 var(--space-4); border-bottom: var(--border-hairline) solid var(--line); }
.b-site-header__sheet-nav { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5) var(--space-4); overflow-y: auto; }
.b-site-header__sheet-group { display: flex; flex-direction: column; gap: var(--space-1); }
.b-site-header__sheet-group > ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.b-site-header__sheet-link {
  display: flex; align-items: center; min-height: var(--control-h-lg); padding: 0 var(--space-3); border-radius: var(--radius-md);
  color: var(--text-1); font: var(--type-body-font, 400 1rem/1.5 var(--font-sans)); text-decoration: none;
  transition: background-color var(--dur-state) var(--ease-standard);
}
.b-site-header__sheet-link:is(:hover, [data-force="hover"]) { background: var(--bg-surface-2); }
.b-site-header__sheet-link:is(:focus-visible, [data-force="focus"]) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: -2px; }
.b-site-header__sheet-link[aria-current="page"] { background: var(--bg-surface-2); font-weight: 500; box-shadow: inset 0 0 0 var(--border-selected) var(--accent); }
.b-site-header__sheet-actions { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-top: var(--border-hairline) solid var(--line); }
.b-site-header__sheet-actions > .b-site-header__locale { align-self: flex-start; }

/* SiteFooter: brand and tagline beside the link columns, then the region, the disclaimer and the legal line. */
.b-site-footer { padding: var(--space-16) var(--space-10) var(--space-10); background: var(--bg-ground); border-top: var(--border-hairline) solid var(--line); color: var(--text-2); }
.b-site-footer__top { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--space-10); }
.b-site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-width: 0; }
.b-site-footer__tagline { margin: 0; font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-2); max-width: 40ch; text-wrap: pretty; }
/* The columns share the row (auto-fit), so a wide window spreads them instead of leaving the right side empty. */
.b-site-footer__columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: var(--space-8) var(--space-6); min-width: 0; }
.b-site-footer__column { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.b-site-footer__heading {
  margin: 0; font: var(--type-label-font, 500 0.8125rem/1.385 var(--font-mono)); letter-spacing: var(--type-label-tracking, 0.1em); text-transform: uppercase;
  font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero); color: var(--text-3);
}
.b-site-footer__links { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.b-site-footer__links a {
  display: inline-flex; align-items: center; min-height: 28px; border-radius: var(--radius-xs);
  font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-2); text-decoration: none;
  transition: color var(--dur-state) var(--ease-standard);
}
.b-site-footer__links a:is(:hover, [data-force="hover"]) { color: var(--text-1); text-decoration: underline; text-decoration-color: var(--link-decoration); text-underline-offset: 0.2em; }
.b-site-footer__links a:is(:focus-visible, [data-force="focus"]) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.b-site-footer__bottom { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-12); padding-top: var(--space-6); border-top: var(--border-hairline) solid var(--line); }
.b-site-footer__region { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-2); }
.b-site-footer__region > svg { width: 16px; height: 16px; flex: none; color: var(--text-3); }
.b-site-footer__disclaimer { margin: 0; font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); max-width: var(--measure-wide); text-wrap: pretty; }
.b-site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); margin-top: var(--space-3); padding-top: var(--space-4); border-top: var(--border-hairline) solid var(--line-subtle); font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); }
.b-site-footer__legal > p { margin: 0; }
/* A button that reads as a quiet link ("Cookie settings"). */
.b-site-footer__button {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0; margin: 0; border: 0; border-radius: var(--radius-xs); background: none;
  font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-2); text-decoration: underline; text-decoration-color: var(--link-decoration); text-underline-offset: 0.2em; cursor: pointer;
}
.b-site-footer__button:is(:hover, [data-force="hover"]) { color: var(--text-1); text-decoration-color: var(--text-1); }
.b-site-footer__button:is(:focus-visible, [data-force="focus"]) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
@media (max-width: 1023.98px) { .b-site-footer__top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639.98px) {
  .b-site-footer { padding: var(--space-12) var(--space-4) var(--space-8); }
  .b-site-footer__columns { gap: var(--space-6) var(--space-4); }
}

/* The marketing pages' width (Owner decision, "BERIFFA.com marketing pages keep the old site's width", 31 October
   2026: "Old width, panel full"). Put .b-site on the frame root of a public marketing page (every page under
   /[locale], the static 404 page, the Digest's public pages; never the control panel or its sign-in sheet, nor the
   full-window network map, which has no site frame). From 1400px
   the notice row's words, the header row and the footer, and every band's content (.w-band, mockups/web/web.css),
   keep to one centred column of content-max-site (1400px, the gutters inside it), as the old site's container; their
   grounds and lines still run to the window's edges. --b-site-inline is the side padding that does it: the page
   gutter, or half of what the window has beyond the column plus the gutter. Use it for the side padding of any other
   full-width part of such a page. Below 1400px it is the gutter (space-4 on phones), so nothing changes. */
.b-site { --b-site-inline: var(--space-10); }
@media (max-width: 639.98px) { .b-site { --b-site-inline: var(--space-4); } }
@media (min-width: 1400px) {
  .b-site { --b-site-inline: max(var(--space-10), calc((100% - var(--content-max-site)) / 2 + var(--space-10))); }
  .b-site :is(.b-site-notice, .b-site-header__bar, .b-site-footer) { padding-inline: var(--b-site-inline); }
}


/* --------------------------------------------------------------------------
   24. Editorial: Tiles, PlanCard, Disclosure
   The joined tiles idiom (beriffa.com's feature grids), the priced offer and
   the FAQ list. Words keep their measure; the grids use the width.
   -------------------------------------------------------------------------- */
/* Tiles: one frame, 1px lines between tiles, as many columns of at least 240px as fit (or at most --cols-N).
   Each tile draws its own border and overlaps its neighbours by 1px, so a short last row ends cleanly: no
   filled empty cell, at any width. The frame's four outer corners (and the step a short row leaves) take
   radius-lg, chosen by container queries on the column count the grid has at that width. */
.b-tiles {
  container: b-tiles / inline-size;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  min-width: 0; margin: 0; padding: var(--border-hairline) 0 0 var(--border-hairline); list-style: none;
  counter-reset: b-tile;
}
.b-tiles--cols-2 { grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 240px), calc(100% / 2 - 0.1px)), 1fr)); }
.b-tiles--cols-3 { grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 240px), calc(100% / 3 - 0.1px)), 1fr)); }
.b-tiles--cols-4 { grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 240px), calc(100% / 4 - 0.1px)), 1fr)); }
.b-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0;
  margin: calc(-1 * var(--border-hairline)) 0 0 calc(-1 * var(--border-hairline)); padding: var(--space-6);
  border: var(--border-hairline) solid var(--line); border-radius: var(--radius-0); background: transparent;
  color: var(--text-1); text-decoration: none;
}
.b-tiles > .b-tile:first-child { border-top-left-radius: var(--radius-lg); }
.b-tiles > .b-tile:last-child { border-bottom-right-radius: var(--radius-lg); }
a.b-tile { cursor: pointer; transition: background-color var(--dur-state) var(--ease-standard); }
a.b-tile:is(:hover, [data-force="hover"]) { background: var(--bg-surface-2); }
a.b-tile:is(:focus-visible, [data-force="focus"]) { z-index: 1; outline: var(--focus-width) solid var(--focus-ring); outline-offset: calc(-1 * var(--focus-width) - 2px); }
.b-tile__icon { flex: none; width: 20px; height: 20px; margin-bottom: var(--space-1); color: var(--text-2); }
.b-tile__num, .b-tiles--numbered > .b-tile::before {
  font: var(--type-label-font, 500 0.8125rem/1.385 var(--font-mono)); letter-spacing: var(--type-label-tracking, 0.1em); font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero); color: var(--text-3);
}
.b-tiles--numbered > .b-tile { counter-increment: b-tile; }
.b-tiles--numbered > .b-tile::before { content: counter(b-tile, decimal-leading-zero); }
.b-tile__code { font: var(--type-mono-font, 400 0.875rem/1.429 var(--font-mono)); font-weight: 500; letter-spacing: 0.02em; font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero); color: var(--text-1); }
.b-tile__title { margin: 0; font: var(--type-h3-font, 600 1.125rem/1.444 var(--font-sans)); letter-spacing: var(--type-h3-tracking, -0.01em); color: var(--text-1); max-width: var(--measure-reading); text-wrap: pretty; }
.b-tile__body { margin: 0; font: var(--type-body-font, 400 1rem/1.5 var(--font-sans)); color: var(--text-2); max-width: var(--measure-reading); text-wrap: pretty; }
.b-tile__body .b-mono { color: var(--text-1); }
/* The action at the foot of a tile: a link in a plain tile, a span styled as one inside a link tile. */
.b-tile__link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--space-2); font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); font-weight: 500; color: var(--text-1); }
.b-tile__link > svg { width: 18px; height: 18px; flex: none; }
a.b-tile:is(:hover, [data-force="hover"]) .b-tile__link { text-decoration: underline; text-decoration-color: var(--link-decoration); text-underline-offset: 0.2em; }
/* Muted: not available yet ("Coming soon"): a dashed inner outline, text-3 words, never a link. */
.b-tile--muted::after { content: ""; position: absolute; inset: var(--space-2); border: var(--border-dashed) var(--line-control); border-radius: var(--radius-md); pointer-events: none; }
.b-tile--muted :is(.b-tile__title, .b-tile__body, .b-tile__icon) { color: var(--text-3); }
@media (max-width: 639.98px) { .b-tile { padding: var(--space-5); } }
@container b-tiles (max-width: 479.98px) {
  .b-tiles > .b-tile:is(:nth-child(1), :last-child:nth-child(-n+1)) { border-top-right-radius: var(--radius-lg); }
  .b-tiles > .b-tile:nth-child(1n+1):nth-last-child(-n+1) { border-bottom-left-radius: var(--radius-lg); }
}
@container b-tiles (min-width: 480px) and (max-width: 719.98px) {
  .b-tiles > .b-tile:is(:nth-child(2), :last-child:nth-child(-n+2)) { border-top-right-radius: var(--radius-lg); }
  .b-tiles > .b-tile:nth-child(2n+1):nth-last-child(-n+2) { border-bottom-left-radius: var(--radius-lg); }
  .b-tiles > .b-tile:nth-child(2n):nth-last-child(-n+2):not(:last-child) { border-bottom-right-radius: var(--radius-lg); }
}
@container b-tiles (min-width: 720px) and (max-width: 959.98px) {
  .b-tiles:not(.b-tiles--cols-2) > .b-tile:is(:nth-child(3), :last-child:nth-child(-n+3)) { border-top-right-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2) > .b-tile:nth-child(3n+1):nth-last-child(-n+3) { border-bottom-left-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2) > .b-tile:nth-child(3n):nth-last-child(-n+3):not(:last-child) { border-bottom-right-radius: var(--radius-lg); }
}
@container b-tiles (min-width: 960px) and (max-width: 1199.98px) {
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3) > .b-tile:is(:nth-child(4), :last-child:nth-child(-n+4)) { border-top-right-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3) > .b-tile:nth-child(4n+1):nth-last-child(-n+4) { border-bottom-left-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3) > .b-tile:nth-child(4n):nth-last-child(-n+4):not(:last-child) { border-bottom-right-radius: var(--radius-lg); }
}
@container b-tiles (min-width: 1200px) and (max-width: 1439.98px) {
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:is(:nth-child(5), :last-child:nth-child(-n+5)) { border-top-right-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:nth-child(5n+1):nth-last-child(-n+5) { border-bottom-left-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:nth-child(5n):nth-last-child(-n+5):not(:last-child) { border-bottom-right-radius: var(--radius-lg); }
}
@container b-tiles (min-width: 1440px) and (max-width: 1679.98px) {
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:is(:nth-child(6), :last-child:nth-child(-n+6)) { border-top-right-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:nth-child(6n+1):nth-last-child(-n+6) { border-bottom-left-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:nth-child(6n):nth-last-child(-n+6):not(:last-child) { border-bottom-right-radius: var(--radius-lg); }
}
@container b-tiles (min-width: 1680px) and (max-width: 1919.98px) {
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:is(:nth-child(7), :last-child:nth-child(-n+7)) { border-top-right-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:nth-child(7n+1):nth-last-child(-n+7) { border-bottom-left-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:nth-child(7n):nth-last-child(-n+7):not(:last-child) { border-bottom-right-radius: var(--radius-lg); }
}
@container b-tiles (min-width: 1920px) and (max-width: 2159.98px) {
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:is(:nth-child(8), :last-child:nth-child(-n+8)) { border-top-right-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:nth-child(8n+1):nth-last-child(-n+8) { border-bottom-left-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:nth-child(8n):nth-last-child(-n+8):not(:last-child) { border-bottom-right-radius: var(--radius-lg); }
}
@container b-tiles (min-width: 2160px) and (max-width: 2399.98px) {
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:is(:nth-child(9), :last-child:nth-child(-n+9)) { border-top-right-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:nth-child(9n+1):nth-last-child(-n+9) { border-bottom-left-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:nth-child(9n):nth-last-child(-n+9):not(:last-child) { border-bottom-right-radius: var(--radius-lg); }
}
@container b-tiles (min-width: 2400px) and (max-width: 2639.98px) {
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:is(:nth-child(10), :last-child:nth-child(-n+10)) { border-top-right-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:nth-child(10n+1):nth-last-child(-n+10) { border-bottom-left-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:nth-child(10n):nth-last-child(-n+10):not(:last-child) { border-bottom-right-radius: var(--radius-lg); }
}
@container b-tiles (min-width: 2640px) and (max-width: 2879.98px) {
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:is(:nth-child(11), :last-child:nth-child(-n+11)) { border-top-right-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:nth-child(11n+1):nth-last-child(-n+11) { border-bottom-left-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:nth-child(11n):nth-last-child(-n+11):not(:last-child) { border-bottom-right-radius: var(--radius-lg); }
}
@container b-tiles (min-width: 2880px) and (max-width: 3119.98px) {
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:is(:nth-child(12), :last-child:nth-child(-n+12)) { border-top-right-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:nth-child(12n+1):nth-last-child(-n+12) { border-bottom-left-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:nth-child(12n):nth-last-child(-n+12):not(:last-child) { border-bottom-right-radius: var(--radius-lg); }
}
@container b-tiles (min-width: 3120px) and (max-width: 3359.98px) {
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:is(:nth-child(13), :last-child:nth-child(-n+13)) { border-top-right-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:nth-child(13n+1):nth-last-child(-n+13) { border-bottom-left-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:nth-child(13n):nth-last-child(-n+13):not(:last-child) { border-bottom-right-radius: var(--radius-lg); }
}
@container b-tiles (min-width: 3360px) and (max-width: 3599.98px) {
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:is(:nth-child(14), :last-child:nth-child(-n+14)) { border-top-right-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:nth-child(14n+1):nth-last-child(-n+14) { border-bottom-left-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:nth-child(14n):nth-last-child(-n+14):not(:last-child) { border-bottom-right-radius: var(--radius-lg); }
}
@container b-tiles (min-width: 3600px) and (max-width: 3839.98px) {
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:is(:nth-child(15), :last-child:nth-child(-n+15)) { border-top-right-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:nth-child(15n+1):nth-last-child(-n+15) { border-bottom-left-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:nth-child(15n):nth-last-child(-n+15):not(:last-child) { border-bottom-right-radius: var(--radius-lg); }
}
@container b-tiles (min-width: 3840px) {
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:is(:nth-child(16), :last-child:nth-child(-n+16)) { border-top-right-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:nth-child(16n+1):nth-last-child(-n+16) { border-bottom-left-radius: var(--radius-lg); }
  .b-tiles:not(.b-tiles--cols-2, .b-tiles--cols-3, .b-tiles--cols-4) > .b-tile:nth-child(16n):nth-last-child(-n+16):not(:last-child) { border-bottom-right-radius: var(--radius-lg); }
}
@container b-tiles (min-width: 480px) {
  .b-tiles--cols-2 > .b-tile:is(:nth-child(2), :last-child:nth-child(-n+2)) { border-top-right-radius: var(--radius-lg); }
  .b-tiles--cols-2 > .b-tile:nth-child(2n+1):nth-last-child(-n+2) { border-bottom-left-radius: var(--radius-lg); }
  .b-tiles--cols-2 > .b-tile:nth-child(2n):nth-last-child(-n+2):not(:last-child) { border-bottom-right-radius: var(--radius-lg); }
}
@container b-tiles (min-width: 720px) {
  .b-tiles--cols-3 > .b-tile:is(:nth-child(3), :last-child:nth-child(-n+3)) { border-top-right-radius: var(--radius-lg); }
  .b-tiles--cols-3 > .b-tile:nth-child(3n+1):nth-last-child(-n+3) { border-bottom-left-radius: var(--radius-lg); }
  .b-tiles--cols-3 > .b-tile:nth-child(3n):nth-last-child(-n+3):not(:last-child) { border-bottom-right-radius: var(--radius-lg); }
}
@container b-tiles (min-width: 960px) {
  .b-tiles--cols-4 > .b-tile:is(:nth-child(4), :last-child:nth-child(-n+4)) { border-top-right-radius: var(--radius-lg); }
  .b-tiles--cols-4 > .b-tile:nth-child(4n+1):nth-last-child(-n+4) { border-bottom-left-radius: var(--radius-lg); }
  .b-tiles--cols-4 > .b-tile:nth-child(4n):nth-last-child(-n+4):not(:last-child) { border-bottom-right-radius: var(--radius-lg); }
}

/* PlanCard: a priced offer. Featured wears the 1.5px ink ring (border-selected in accent), never a fill or a hue. */
.b-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-4); min-width: 0; margin: 0; padding: 0; list-style: none; }
.b-plan {
  position: relative; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; padding: var(--space-6);
  background: var(--bg-surface-1); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-lg);
}
.b-plan--featured { outline: var(--border-selected) solid var(--accent); outline-offset: calc(-1 * var(--border-selected)); }
.b-plan__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-3); min-width: 0; }
.b-plan__head > :first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.b-plan__label { margin: 0; font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); }
.b-plan__name { margin: 0; font: var(--type-h3-font, 600 1.125rem/1.444 var(--font-sans)); letter-spacing: var(--type-h3-tracking, -0.01em); color: var(--text-1); text-wrap: balance; }
.b-plan__badge { flex: none; }
.b-plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; margin: 0; }
.b-plan__amount { font: var(--type-stat-font, 600 2.25rem/1 var(--font-sans)); letter-spacing: var(--type-stat-tracking, -0.025em); font-variant-numeric: var(--font-numeric, tabular-nums); color: var(--text-1); }
.b-plan__unit { font: var(--type-mono-font, 400 0.875rem/1.429 var(--font-mono)); font-variant-numeric: var(--font-numeric-mono, tabular-nums slashed-zero); color: var(--text-2); }
.b-plan__sub { margin: -8px 0 0; font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); font-variant-numeric: var(--font-numeric, tabular-nums); }
.b-plan__specs { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: var(--border-hairline) solid var(--line-subtle); }
.b-plan__spec {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); min-width: 0; padding: 9px 0;
  border-bottom: var(--border-hairline) solid var(--line-subtle); font: var(--type-ui-font, 400 0.9375rem/1.467 var(--font-sans)); color: var(--text-1); font-variant-numeric: var(--font-numeric, tabular-nums);
}
.b-plan__spec > dt { color: var(--text-2); }
.b-plan__spec > dd { margin: 0; color: var(--text-1); text-align: right; }
li.b-plan__spec { justify-content: flex-start; }
li.b-plan__spec > svg { flex: none; width: 16px; height: 16px; align-self: center; color: var(--text-2); }
.b-plan__note { margin: 0; font: var(--type-small-font, 400 0.875rem/1.429 var(--font-sans)); color: var(--text-3); max-width: var(--measure-wide); text-wrap: pretty; }
.b-plan__action { margin-top: auto; }
.b-plan > .b-plan__action.b-button, .b-plan__action > .b-button { width: 100%; }

/* Disclosure: the FAQ list. Native <details>; the question is an h4-style heading inside the summary. */
.b-disclosure { min-width: 0; margin: 0; padding: 0; list-style: none; border-top: var(--border-hairline) solid var(--line); border-bottom: var(--border-hairline) solid var(--line); }
.b-disclosure__item { border-top: var(--border-hairline) solid var(--line-subtle); }
.b-disclosure__item:first-child { border-top: 0; }
.b-disclosure__summary {
  display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-h-lg); padding: var(--space-3) var(--space-2) var(--space-3) 0;
  list-style: none; border-radius: var(--radius-sm); color: var(--text-1); cursor: pointer;
}
.b-disclosure__summary::-webkit-details-marker { display: none; }
.b-disclosure__summary::marker { content: ""; }
.b-disclosure__summary::before {
  content: ""; flex: none; width: 18px; height: 18px; background: var(--text-3);
  -webkit-mask: var(--b-mask-chevron-right) center / contain no-repeat; mask: var(--b-mask-chevron-right) center / contain no-repeat;
  transition: transform var(--dur-state) var(--ease-standard), background-color var(--dur-state) var(--ease-standard);
}
.b-disclosure__item[open] > .b-disclosure__summary::before { transform: rotate(90deg); background: var(--text-1); }
.b-disclosure__summary:is(:hover, [data-force="hover"])::before { background: var(--text-1); }
.b-disclosure__summary:is(:focus-visible, [data-force="focus"]) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.b-disclosure__title { margin: 0; font: var(--type-h4-font, 600 1rem/1.5 var(--font-sans)); letter-spacing: var(--type-h4-tracking, 0); color: var(--text-1); max-width: var(--measure-reading); text-wrap: pretty; }
.b-disclosure__body { max-width: var(--measure-reading); padding: 0 0 var(--space-5) calc(18px + var(--space-3)); font: var(--type-body-font, 400 1rem/1.5 var(--font-sans)); color: var(--text-2); text-wrap: pretty; }
.b-disclosure__body > * { margin: 0; }
.b-disclosure__body > * + * { margin-top: var(--space-3); }
.b-disclosure__body .b-mono { color: var(--text-1); }


/* --------------------------------------------------------------------------
   25. Attention and BERIFFANET: IncidentBand, Globe, LogoTile
   Owner decisions of 29 October 2026: "Attention in red" (incident and
   critical security surfaces in red: the danger fill, the system's one red
   fill; colour still only ever means attention) and "The rotating BERIFFANET globe" (the one
   continuous decorative loop, with its own rules in guidelines/motion.md).
   -------------------------------------------------------------------------- */
/* IncidentBand: the incident contact in red. The danger wash and the bad line hold it (the old site's red-tinted
   panel), the securityAlert glyph sits in its mark in danger, the eyebrow is bad-text, the incident number is large
   (mono-fact, a tel: link) and the action is the alert button that calls it: one red, the danger fill, for the glyph
   and the button. The e-mail is a quiet link under the button, so the band keeps one action. */
.b-incident {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: var(--space-6) var(--space-8);
  min-width: 0; padding: var(--space-8); border-radius: var(--radius-lg);
  background: var(--danger-wash); box-shadow: inset 0 0 0 var(--border-hairline) var(--bad-line);
}
.b-incident__mark {
  display: grid; place-items: center; width: 44px; height: 44px; align-self: start; border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 var(--border-hairline) var(--bad-line); color: var(--danger);
}
.b-incident__mark > svg { width: 24px; height: 24px; }
.b-incident__text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.b-incident__eyebrow {
  margin: 0; font: var(--type-label-font, 500 0.8125rem/1.385 var(--font-mono)); letter-spacing: var(--type-label-tracking, 0.1em);
  text-transform: uppercase; color: var(--bad-text);
}
.b-incident__title { margin: 0; font: var(--type-h2-font, 600 1.375rem/1.364 var(--font-sans)); letter-spacing: var(--type-h2-tracking, -0.015em); color: var(--text-1); text-wrap: balance; }
.b-incident__body { margin: 0; max-width: var(--measure-reading); font: var(--type-body-font, 400 1rem/1.5 var(--font-sans)); color: var(--text-2); text-wrap: pretty; }
.b-incident__contact { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.b-incident__label {
  margin: 0; font: var(--type-label-font, 500 0.8125rem/1.385 var(--font-mono)); letter-spacing: var(--type-label-tracking, 0.1em);
  text-transform: uppercase; color: var(--text-2);
}
.b-incident__address {
  font: var(--type-mono-fact-font, 400 1.75rem/1.286 var(--font-mono)); letter-spacing: var(--type-mono-fact-tracking, 0); color: var(--text-1);
  overflow-wrap: anywhere; text-wrap: balance;
}
.b-incident__contact > .b-button { margin-top: var(--space-2); }
/* The second way in (the e-mail under the alert button): a quiet link, never a second button. The value in mono at
   16px with the 18px email glyph before it; the row is 32px tall, so it is a full target on its own. */
.b-incident__alt {
  display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; min-width: 0; min-height: var(--control-h-sm);
  font: var(--type-mono-value-font, 400 1rem/1.5 var(--font-mono)); letter-spacing: var(--type-mono-value-tracking, 0); color: var(--text-2);
  overflow-wrap: anywhere;
}
.b-incident__alt:is(:hover, [data-force="hover"]) { color: var(--text-1); }
.b-incident__alt > svg { width: 18px; height: 18px; flex: none; margin: 0; vertical-align: 0; }
.b-incident :is(a, button):is(:focus-visible, [data-force="focus"]) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
@media (max-width: 899.98px) {
  .b-incident { grid-template-columns: 44px minmax(0, 1fr); align-items: start; }
  .b-incident__contact { grid-column: 2; }
}
@media (max-width: 639.98px) {
  .b-incident { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-6) var(--space-5); }
  .b-incident__contact { grid-column: 1; align-items: stretch; }
  .b-incident__contact > .b-button { width: 100%; }
}

/* Globe: the BERIFFANET globe (Owner decision, "The rotating BERIFFANET globe"). The old site's ASCII Earth, only
   characters: a grid of Geist Mono characters (the Natural Earth land mask on an orthographic sphere; lambert
   shading picks each land character from the old ramp, + * # % @, dim to lit) and a faint dotted sea (: and .) that
   gives the ball its round shape, with no drawn outline. The places are characters in the same grid: a bright
   bullet and the place's name in capitals beside it, on blank cells. The build draws a still, Europe-facing frame;
   components/Globe/globe.js draws it again for the real box and turns it west to east (one turn in 75 s), keeps the
   places clear of the words named by data-clear and shows the Pause control; it holds still under reduced motion,
   off screen and in a hidden tab. Everything but the control is aria-hidden: the words beside it carry the meaning.
   The sphere's place: centre (x * width + dx * R, y * height + dy * R), radius R = r * the shorter side. Places and
   names keep --b-globe-inset px from the box's sides (a backdrop: the page gutter). --b-globe-max (a length, none by
   default) places the sphere in a frame no wider than that, centred in the box: width is then the frame's, measured
   from its left edge, while the characters still cover the whole box. */
.b-globe {
  --b-globe-x: 0.5; --b-globe-dx: 0; --b-globe-y: 0.5; --b-globe-dy: 0; --b-globe-r: 0.46; --b-globe-inset: 0px; --b-globe-max: none;
  position: relative; width: 100%; aspect-ratio: 1; min-width: 0;
}
/* Backdrop: the whole host behind its words (the host is position: relative and lifts its words above it). On wide
   screens the ball peeks in from the right, cut by the window, as the old site. Below 1024px it sits low in the
   host, as the old site's phone hero: its centre a third of a radius above the host's foot, so the words sit on its
   upper limb and the sea, and the side that faces the viewer (Europe, in the still frame) shows under them; the
   host leaves room for it under the words. Places and names stay inside the page gutter. */
.b-globe--backdrop {
  position: absolute; inset: 0; width: auto; aspect-ratio: auto; z-index: 0; pointer-events: none;
  --b-globe-y: 1; --b-globe-dy: -0.35; --b-globe-r: 0.45; --b-globe-inset: var(--space-10);
}
@media (max-width: 639.98px) { .b-globe--backdrop { --b-globe-r: 0.62; --b-globe-inset: var(--space-4); } }
@media (min-width: 1024px) { .b-globe--backdrop { --b-globe-x: 1; --b-globe-dx: -0.78; --b-globe-y: 0.5; --b-globe-dy: 0; --b-globe-r: 0.48; } }
/* From 1600px the window outgrows the words, so the ball comes in towards them: whole, in the right part of the host,
   so the first view holds together instead of leaving a gap in its middle. */
@media (min-width: 1600px) { .b-globe--backdrop { --b-globe-dx: -1.2; --b-globe-r: 0.5; } }
/* On a marketing page (.b-site, section 23) the words keep to the centred column from 1400px, so the ball is placed
   against that column (--b-globe-max: content-max-site) exactly as at 1400px, and the 1600px step does not apply. The
   characters still cover the whole host, so the ball runs past the column into the window's margin, never cut by
   it, and the words and the ball keep one distance at every width. */
@media (min-width: 1400px) { .b-site .b-globe--backdrop { --b-globe-max: var(--content-max-site); --b-globe-dx: -0.78; --b-globe-r: 0.48; } }
/* The host of a backdrop globe (a hero, a promo panel): it positions the globe and lifts its own words above it. */
.b-globe-host { position: relative; isolation: isolate; }
.b-globe-host > :not(.b-globe) { position: relative; z-index: 1; }
.b-globe__art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; user-select: none; -webkit-user-select: none; }
.b-globe__art > pre {
  position: absolute; left: 0; top: 0; margin: 0; padding: 0;
  font: var(--type-mono-value-font, 400 1rem/1.5 var(--font-mono)); line-height: 1; letter-spacing: 0.05em;
  white-space: pre; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0;
}
.b-globe__sea { color: var(--globe-sea); }
.b-globe__land { color: var(--globe-land); }
.b-globe__node { color: var(--globe-node); }
/* Names in capitals at 500 (Geist Mono's heaviest step), the map lettering's weight; same advance, so the grid holds. */
.b-globe__art > .b-globe__name { color: var(--globe-name); font-weight: 500; }
@media (max-width: 639.98px) {
  .b-globe__art > pre { font: var(--type-mono-small-font, 400 0.8125rem/1.385 var(--font-mono)); line-height: 1; letter-spacing: 0.05em; }
  .b-globe__art > .b-globe__name { font-weight: 500; }
}
/* The Pause control (WCAG 2.2.2), shown by the script only when motion is allowed. On a backdrop it sits at the
   host's lower right, lifted by --b-globe-fold (set by the script) so it is always in the first view. */
.b-globe__toggle { position: absolute; right: 0; bottom: 0; z-index: 1; pointer-events: auto; }
.b-globe__toggle[hidden] { display: none; }
.b-globe--backdrop .b-globe__toggle { right: var(--space-10); bottom: calc(var(--space-6) + var(--b-globe-fold, 0px)); }
@media (max-width: 639.98px) { .b-globe--backdrop .b-globe__toggle { right: var(--space-4); bottom: calc(var(--space-4) + var(--b-globe-fold, 0px)); } }
/* On a marketing page the control keeps to the column's right edge with the words (--b-site-inline, section 23). */
@media (min-width: 1400px) { .b-site .b-globe--backdrop .b-globe__toggle { right: var(--b-site-inline); } }
@media (prefers-reduced-motion: reduce) { .b-globe__toggle { display: none; } }

/* LogoTile: a published logo file whose ink is dark (a group brand's black PNG), shown unchanged on the paper tile,
   never recoloured or inverted. The file keeps its own padding; the tile only frames it. */
.b-logo-tile { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; border-radius: var(--radius-md); background: var(--logo-tile); line-height: 0; }
.b-logo-tile > img { display: block; width: auto; height: var(--b-logo-h, 72px); }