/*
+------------------------------------------------------+
|  MODULE:   SEO STACK / BASE                          |
|  LOADS:    Every page, before the page sheet         |
|  CONTAINS: layer order, fonts, tokens, reset, grain, |
|            theme button, topbar, member menu, login  |
|            card, buttons, forms, badges, pills,      |
|            cards, app frame, ring, meters, boxes,    |
|            hover bubbles, the fold, utilities        |
|  LOOK:     the PVC documentation assistant (the      |
|            Bosch PoC page), token for token          |
|  RULES:    pvc-css-rules, references/house-rules.md  |
+------------------------------------------------------+
*/

/* The order of the layers. A later layer wins over an earlier one,
   whatever the selectors are. Every rule below sits inside a layer. */
@layer tokens, base, components, utilities;

/*
  BREAKPOINTS: mobile first, min-width, in rem.
    corner    22.5rem    360px, the History pill in the form frame's corner at its full 10rem
    narrow    38rem      608px, the frame gets its border and shadow
    fab       42rem      672px, the theme button floats again
    tablet    48rem      768px
    desktop   64rem      1024px
*/

/* +------------------------------------------------------+ */
/* |  FONTS: self-hosted from fonts/, no font CDN         | */
/* |  IBM Plex Sans, JetBrains Mono, Inconsolata and      | */
/* |  DSEG7 Classic, all SIL Open Font License (OFL.txt)  | */
/* +------------------------------------------------------+ */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-v24-latin_latin-ext-regular.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-v24-latin_latin-ext-500.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-v24-latin_latin-ext-700.woff2") format("woff2");
}

/* the panel titles, the face the PVC quota board uses */
@font-face {
  font-family: "Inconsolata";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inconsolata-regular.woff2") format("woff2");
}

/* the ring digits: a 7-segment display face */
@font-face {
  font-family: "DSEG7 Classic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dseg7classic-regular.woff2") format("woff2");
}

/* +------------------------------------------------------+ */
/* |  LAYER: TOKENS                                       | */
/* +------------------------------------------------------+ */
@layer tokens {
  :root {
    color-scheme: dark;

    /* Primitives: the five PVC stripe colours. */
    --color-orange: #e8752a;
    --color-amber: #dfa05d;
    --color-teal: #3aafa9;
    --color-green: #658761;
    --color-coral: #ac5045;
    --color-blue: #7aa2f7; /* the terminal's blue, the x of max; the O of SEO */
    --color-lime: #d5ff3f; /* the quota board's Unlimited ring; a perfect score */
    --color-leaf: #9ece6a; /* the quota board's theme green; a good score, 90 to 99 */
    /* the checks of the pick row, decided 2026-10-13: each pressed pill, its line into the address box and
       the box's ring take the check's colour; the light theme darkens the three below */
    --check-speed: var(--color-leaf);
    --check-security: var(--color-teal);
    --check-technical: var(--color-amber);
    /* the three letters of SEO, the terminal's colours of "max"; the light theme darkens them */
    --brand-s: var(--color-coral);
    --brand-e: var(--color-amber);
    --brand-o: var(--color-blue);

    /* Roles. The names stay the same on every PVC project. */
    --bg-primary: #0a0a0a;
    --bg-surface: #141414;
    --bg-card: #1a1a1a;
    --bg-elevated: #222222;

    --text-primary: #f0e6d3;
    --text-secondary: #8a8278;
    --text-muted: #5a5650;
    --text-on-accent: #0a0a0a;

    --border-color: #2a2a2a;
    --border-hover: #3a3a3a;

    /* the score bands: the lime and the leaf green on arcs and dots, and on the word in the dark
       theme; the light theme darkens the arcs and writes the words in its text colour */
    --tone-top: var(--color-lime);
    --text-top: var(--color-lime);
    --tone-good: var(--color-leaf);
    --text-good: var(--color-leaf);

    /* the terminal box (the run line under the speed board): dark in both themes */
    --cli-bg: #050505;
    --cli-text: #f0e6d3;
    --cli-muted: #8a8278;
    --cli-border: #2a2a2a;

    --accent: var(--color-orange);
    --accent-hover: #ed874c;

    --font-heading: "IBM Plex Sans", system-ui, sans-serif;
    --font-body: "IBM Plex Sans", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

    /* Type scale, the documentation assistant's steps. */
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-base: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.125rem;
    --fs-4xl: 2.25rem;

    --r-sm: 0.375rem;
    --r-md: 0.625rem;
    --r-lg: 0.875rem;
    --r-xl: 1.375rem;

    --container: 100rem;
    --container-padding: 1.75rem;
    --section-padding: 3rem;
    --header-h: 4.25rem;

    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --transition: 0.2s var(--ease);

    --z-below: -1;
    --z-raised: 10;
    --z-sticky: 20;
    --z-dropdown: 30;
    --z-header: 40;
    --z-menu: 50;
    --z-overlay: 100;
    --z-modal: 200;
    --z-toast: 300;

    /* Project tokens, after the house list. */
    --font-panel: "Inconsolata", "JetBrains Mono", ui-monospace, monospace;
    --font-digits: "DSEG7 Classic", "Inconsolata", ui-monospace, monospace;
    --r-pill: 62.4375rem;
    --frame-w: 58rem;
    --gutter: 1rem;

    /* accent text that keeps 4.5:1 on the dark surfaces; the light theme sets
       these to the text colour and keeps the tone on a dot, border or fill */
    --text-accent: #e8752a;
    --text-ok: #3aafa9;
    --text-warn: #dfa05d;
    --text-danger: #d8615a;
    /* the orange that draws focus rings and the title's accent word; a darker
       orange in the light theme, so it keeps 3:1 there too */
    --accent-strong: #e8752a;
    --on-orange: #0a0a0a;
    --on-coral: #ffffff;
    --login-btn-text: #1f1f1f;
    --login-btn-cover: #ffffff;
    --shine: rgba(255, 255, 255, 0.32);
    --qr-paper: #ffffff;

    /* the mixed colours as literal values, one set per theme */
    --topbar-bg: rgba(10, 10, 10, 0.85);
    --focus-ring: rgba(232, 117, 42, 0.18);
    --danger-bg: rgba(172, 80, 69, 0.08);
    --danger-border: rgba(172, 80, 69, 0.38);
    --avatar-glow-inner: rgba(232, 117, 42, 0.7);
    --avatar-glow-outer: rgba(232, 117, 42, 0.55);
    /* the same light at a lower level, for a history row's ring */
    --ring-glow-inner: rgba(232, 117, 42, 0.4);
    --ring-glow-outer: rgba(232, 117, 42, 0.28);
    --lime-line: rgba(213, 255, 63, 0.45); /* the perfect-score lime, softened, for a line or a border on a dark box */
    --details-glow: rgba(232, 117, 42, 0.28);
    --details-glow-hover: rgba(232, 117, 42, 0.52);
    --details-hover-border: #7b4c33;
    --frame-ring: rgba(232, 117, 42, 0.1);
    --frame-shadow: 0 2.5rem 5rem -1rem rgba(0, 0, 0, 0.7);
    --menu-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.5);
    --page-glow: rgba(232, 117, 42, 0.06);
    /* the empty part of a meter, the tone at 26 percent over the card colour */
    --track-teal: #22413f;
    --track-amber: #4d3d2b;
    --track-coral: #402825;
    --grain-opacity: 0.09;
  }

  [data-theme="light"] {
    color-scheme: light;
    --bg-primary: #f5f0e8;
    --bg-surface: #ebe5db;
    --bg-card: #e0d9cd;
    --bg-elevated: #d6cfc2;
    --text-primary: #1a1714;
    --text-secondary: #5a5650;
    --text-muted: #8a8278;
    --border-color: #cdc5b8;
    --border-hover: #b5ad9f;
    --cli-bg: #1a1714;
    --cli-text: #f5f0e8;
    --cli-muted: #a39b8f;
    --cli-border: #3d3630;
    --tone-top: #9cbf00;
    --text-top: #1a1714;
    --tone-good: #6f9a3c;
    --text-good: #1a1714;
    --check-speed: #6f9a3c;
    --check-security: #257f79;
    --check-technical: #9a6a26;
    --text-accent: #1a1714;
    --text-ok: #1a1714;
    --text-warn: #1a1714;
    --text-danger: #1a1714;
    --brand-s: #9a4237;
    --brand-e: #7f531a;
    --brand-o: #3558b8;
    --accent-strong: #b8551a;
    --topbar-bg: rgba(245, 240, 232, 0.85);
    --details-hover-border: #dda380;
    --frame-shadow: 0 2.5rem 5rem -1rem rgba(20, 20, 16, 0.14);
    --menu-shadow: 0 1.5rem 3rem rgba(20, 20, 16, 0.14);
    --track-teal: #b5cec4;
    --track-amber: #e0cab0;
    --track-coral: #d2b5aa;
    --grain-opacity: 0.05;
  }
}

/* keyframes sit outside the layers; the checker leaves them alone */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes drop-in {
  from {
    opacity: 0;
    transform: translateY(-0.375rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes frame-spring {
  0% {
    opacity: 0;
    transform: translateY(1.25rem) scale(0.985);
  }

  60% {
    opacity: 1;
    transform: translateY(-0.125rem) scale(1.003);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* +------------------------------------------------------+ */
/* |  LAYER: BASE                                         | */
/* +------------------------------------------------------+ */
/* The one place where rules on bare elements are allowed. */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    font-size: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
  }

  ::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 999rem;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
  }

  /* the page background stays on body, never on html, so it keeps propagating
     to the canvas under the grain */
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: 1.55;
    overflow-wrap: break-word;
    /* the page quotes other sites' code and the checker's words in JetBrains Mono, whose ligatures draw
       --> as one arrow and join </ and //; every quote reads as typed, so no optional ligature draws on
       the page (the controls take it through font: inherit) */
    font-variant-ligatures: none;
    -webkit-font-smoothing: antialiased;
  }

  /* film grain, under the content */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--z-below);
    pointer-events: none;
    opacity: var(--grain-opacity);
    background-image: url("data:image/svg+xml,%3Csvg width='240' height='240' viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 15rem 15rem;
  }

  main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  h1,
  h2,
  h3,
  h4 {
    line-height: 1.25;
    font-weight: 700;
  }

  p {
    margin: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button {
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
  }

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

  /* the accent word of a title keeps its colour and drops the slant: the page
     serves no italic face, and a browser-made slant is not a typeface */
  em {
    font-style: normal;
    color: var(--accent-strong);
  }

  code,
  pre {
    font-family: var(--font-mono);
  }

  img,
  svg {
    max-width: 100%;
  }

  :focus-visible {
    outline: 0.125rem solid var(--accent-strong);
    outline-offset: 0.125rem;
  }

  /* form labels in the eyebrow recipe */
  label {
    display: block;
    margin: 0.75rem 0 0.25rem;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }

  input,
  textarea {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.625rem 0.875rem;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 0.0625rem solid var(--border-color);
    border-radius: var(--r-pill);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  }

  textarea {
    min-height: 6rem;
    resize: vertical;
    border-radius: var(--r-md);
    line-height: 1.5;
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--text-secondary);
  }

  input:read-only {
    background: var(--bg-card);
    color: var(--text-secondary);
  }

  input:focus-visible,
  textarea:focus-visible {
    outline: 0.125rem solid transparent;
    border-color: var(--accent-strong);
    box-shadow: 0 0 0 0.25rem var(--focus-ring);
  }

  pre {
    margin-top: 0.5rem;
    padding: 0.5rem;
    font-size: var(--fs-xs);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: var(--bg-primary);
    border-radius: var(--r-sm);
  }
}

/* +------------------------------------------------------+ */
/* |  LAYER: COMPONENTS (shared by every page)            | */
/* +------------------------------------------------------+ */
@layer components {
  /* ---- small parts ---- */
  .skip-link {
    position: absolute;
    top: -6.25rem;
    left: var(--gutter);
    z-index: var(--z-toast);
    padding: 0.5rem 0.75rem;
    border-radius: var(--r-sm);
    background: var(--bg-elevated);
    color: var(--text-accent);
    font-size: var(--fs-base);
  }

  .skip-link:focus {
    top: 0.5rem;
  }

  .hint {
    margin-top: 0.5rem;
    color: var(--text-secondary);
    font-size: var(--fs-base);
  }

  .icon {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
  }

  .spinner {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    border: 0.125rem solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }

  /* ---- the topbar (app view) ---- */
  .topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    height: var(--header-h);
    background: var(--topbar-bg);
    backdrop-filter: saturate(160%) blur(0.875rem);
    -webkit-backdrop-filter: saturate(160%) blur(0.875rem);
    border-bottom: 0.0625rem solid var(--border-color);
    overflow-x: clip;
  }

  .topbar__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    height: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
  }

  .topbar__inner > * {
    min-width: 0;
  }

  .topbar__middle {
    min-height: 0.0625rem;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem; /* the room between the mark and the name, widened from 0.625rem on 2026-10-13 */
    justify-self: start;
    border-radius: var(--r-sm);
  }

  .brand__mark {
    display: block;
    height: 1.375rem;
    width: auto;
    flex: none;
  }

  /* the mark and the capitals snap to the device grid on their own, so no one offset centres
     them at every zoom (half a pixel up on the mark alone read level at 100% and a pixel high at
     90%); a quarter pixel up on the mark with half a pixel down on the name measured level at
     100%, 110% and 150%, half a device pixel high at 90%, half low at 125% and one device pixel
     low at 2x and 3x, the best of 25 pairs shot at seven zooms on 2026-10-13 for the 1.375rem
     name (the 1.5rem name before it took a different pair). The result rides on the bar's height
     and the two sizes: a change to --header-h, the mark's 1.375rem or the name's size re-shoots
     the zooms before any offset is kept */
  .topbar .brand__mark {
    position: relative;
    top: -0.015625rem;
  }

  /* the three letters of SEO in the terminal's three colours of "max": coral, amber, blue */
  .brand__s {
    color: var(--brand-s);
  }

  .brand__e {
    color: var(--brand-e);
  }

  .brand__o {
    color: var(--brand-o);
  }

  .brand__name {
    font-family: var(--font-mono);
    font-size: 1.375rem; /* the mark's height: the capitals come to 1rem, a step down from 1.5rem on 2026-10-13 */
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    word-spacing: -0.2em; /* a monospace space is a whole cell, so the room between SEO and Stack came out wider than the mark's; a fifth of an em off makes the two level (asked 2026-10-13) */
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
  }

  /* the name's half pixel down, the mark's pair (the note above the mark) */
  .topbar .brand__name {
    position: relative;
    top: 0.03125rem;
  }

  /* ---- the member avatar and its menu ---- */
  .member {
    position: relative;
    display: flex;
    align-items: center;
    justify-self: end;
    height: 100%;
  }

  .member__btn {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
    border-radius: var(--r-pill);
    transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
  }

  .member__btn:hover,
  .member__btn[aria-expanded="true"] {
    transform: scale(1.04);
    box-shadow: 0 0 0 0.125rem var(--avatar-glow-inner), 0 0 1.25rem 0.125rem var(--avatar-glow-outer);
  }

  /* the "Account menu" tooltip: shown after a pause on hover, gone at once when
     the menu opens; anchored to the avatar's right edge so it stays on screen */
  .member__btn::after {
    content: "Account menu";
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: var(--z-raised);
    transform: translateY(-0.25rem);
    padding: 0.375rem 0.625rem;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 0.0625rem solid var(--border-color);
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.06em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms var(--ease), transform 150ms var(--ease);
    transition-delay: 0ms;
  }

  .member__btn:hover::after {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 350ms;
  }

  .member__btn[aria-expanded="true"]::after {
    opacity: 0;
    transition-delay: 0ms;
  }

  .member__avatar {
    position: relative;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 50%;
    background: conic-gradient(
      from -90deg,
      var(--color-teal) 0deg 72deg,
      var(--color-green) 72deg 144deg,
      var(--color-amber) 144deg 216deg,
      var(--color-orange) 216deg 288deg,
      var(--color-coral) 288deg 360deg
    );
  }

  .member__avatar-inner {
    position: absolute;
    inset: 0.1875rem;
    display: grid;
    place-items: center;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    border-radius: 50%;
  }

  .member__avatar-text {
    display: block;
    transform: translateY(0.05em);
  }

  .member__avatar--lg {
    width: 3.125rem;
    height: 3.125rem;
  }

  .member__avatar--lg .member__avatar-inner {
    inset: 0.25rem;
    font-size: var(--fs-md);
  }

  .member__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.875rem);
    z-index: var(--z-menu);
    min-width: min(18.75rem, calc(100vw - 2rem));
    background: var(--bg-card);
    border: 0.0625rem solid var(--border-color);
    border-radius: var(--r-lg);
    padding: 0.625rem;
    box-shadow: var(--menu-shadow);
    animation: drop-in 0.18s var(--ease);
  }

  .member__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.625rem 0.875rem;
  }

  .member__meta {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
    line-height: 1.2;
  }

  .member__name {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--text-primary);
    overflow-wrap: anywhere;
  }

  .member__email {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
  }

  .member__role {
    margin-top: 0.1875rem;
    font-family: var(--font-mono);
    font-size: 0.65625rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-accent);
  }

  .member__sep {
    height: 0.0625rem;
    margin: 0.25rem 0.125rem;
    background: var(--border-color);
  }

  .member__item,
  .member__toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    padding: 0.625rem 0.75rem;
    font-family: var(--font-body);
    font-size: 0.84375rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-primary);
    border-radius: 0.4375rem;
    cursor: pointer;
    text-align: left;
  }

  .member__item:hover,
  .member__toggle:hover {
    background: var(--bg-surface);
  }

  .member__ico {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--text-secondary);
  }

  .member__item--danger {
    color: var(--text-danger);
  }

  /* a menu item that is a link (Documentation) reads like the buttons beside it */
  a.member__item {
    color: inherit;
    text-decoration: none;
  }

  /* the two-step state as a pill, pushed to the row's right edge; the dot
     carries the state: muted for off, teal for on */
  .member__state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-left: auto;
    padding: 0.25rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 0.0625rem solid var(--border-color);
    border-radius: var(--r-pill);
  }

  .member__state::before {
    content: "";
    flex: none;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--text-muted);
  }

  .member__state.is-on {
    color: var(--text-ok);
  }

  .member__state.is-on::before {
    background: var(--color-teal);
  }

  .member__state:empty {
    display: none;
  }

  .switch {
    position: relative;
    flex: none;
    margin-left: auto;
    width: 2.125rem;
    height: 1.25rem;
    background: var(--bg-elevated);
    border: 0.0625rem solid var(--border-color);
    border-radius: var(--r-pill);
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
  }

  .switch::after {
    content: "";
    position: absolute;
    left: 0.125rem;
    top: 50%;
    width: 0.875rem;
    height: 0.875rem;
    background: var(--text-secondary);
    border-radius: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s var(--ease), background 0.2s var(--ease);
  }

  .member__toggle .switch__input:checked ~ .switch {
    background: var(--color-orange);
    border-color: var(--color-orange);
  }

  .member__toggle .switch__input:checked ~ .switch::after {
    transform: translate(0.875rem, -50%);
    background: var(--bg-primary);
  }

  .member__toggle .switch__input:focus-visible ~ .switch {
    outline: 0.125rem solid var(--accent-strong);
    outline-offset: 0.125rem;
  }

  /* ---- the logged-out views ---- */
  .standalone {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
  }

  .login__card {
    width: 100%;
    max-width: 34rem;
    padding: 1.75rem 1.25rem;
    background: var(--bg-card);
    border: 0.0625rem solid var(--border-color);
    border-radius: var(--r-lg);
    text-align: center;
  }

  /* the wordmark as a small terminal pill at the card's top left: the bar's brand, smaller,
     on the cli tokens, dark in both themes, so the three letters keep their bright tones */
  .login__brand {
    display: flex;
    width: max-content;
    gap: 0.5rem;
    margin: -0.5rem 0 1.25rem -0.25rem; /* into the card's padding, nearer its corner */
    padding: 0.375rem 0.75rem 0.375rem 0.625rem;
    color: var(--cli-text);
    background: var(--cli-bg);
    border: 0.0625rem solid var(--cli-border);
    border-radius: var(--r-pill);
  }

  .login__brand .brand__mark {
    height: 0.9375rem;
  }

  .login__brand .brand__name {
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    transform: translateY(0.0625rem); /* the capitals sit high in their line box */
  }

  .login__brand .brand__s {
    color: var(--color-coral);
  }

  .login__brand .brand__e {
    color: var(--color-amber);
  }

  .login__brand .brand__o {
    color: var(--color-blue);
  }

  .login__title {
    margin: 0 0 1.125rem;
    font-family: var(--font-heading);
    font-size: clamp(1.875rem, 3.6vw, 2.625rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text-primary);
  }

  .login__lede {
    max-width: 36ch;
    margin: 0 auto 1.75rem;
    font-size: var(--fs-md);
    line-height: 1.55;
    color: var(--text-secondary);
  }

  /* under the lede of the code card: the address this login is for */
  .login__who {
    max-width: 36ch;
    margin: -1rem auto 1.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
  }

  .loading-line {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
  }

  /* the login forms keep their labels and boxes on the left */
  .login__form {
    text-align: left;
  }

  /* the slide reveal: two white overlays over an orange fill with a shine; on
     hover and keyboard focus they shrink to nothing, the shine sweeps, and the
     label turns dark once the orange dominates */
  .login__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.75rem 1rem;
    overflow: hidden;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--login-btn-text);
    background-color: var(--color-orange);
    background-image: linear-gradient(100deg, transparent 30%, var(--shine) 50%, transparent 70%);
    background-size: 200% 100%;
    background-position: -100% 0;
    background-repeat: no-repeat;
    border: 0.0625rem solid transparent;
    border-radius: 0.5rem;
    transition: background-position 900ms ease, transform 120ms ease;
  }

  .login__btn:hover,
  .login__btn:focus-visible {
    background-position: 200% 0;
  }

  .login__btn:active {
    transform: translateY(0.0625rem);
  }

  .login__btn::before,
  .login__btn::after {
    content: "";
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: var(--login-btn-cover);
    transition: width 650ms ease-in-out;
    pointer-events: none;
  }

  .login__btn::before {
    left: 0;
  }

  .login__btn::after {
    right: 0;
  }

  .login__btn:hover::before,
  .login__btn:hover::after,
  .login__btn:focus-visible::before,
  .login__btn:focus-visible::after {
    width: 0;
  }

  .login__btn-label {
    position: relative;
    z-index: 1;
    color: var(--login-btn-text);
    transition: color 200ms ease;
    transition-delay: 480ms;
  }

  .login__btn:hover .login__btn-label,
  .login__btn:focus-visible .login__btn-label {
    color: var(--on-orange);
  }

  .login__btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  /* a disabled button stays at rest under the pointer */
  .login__btn:disabled:hover {
    background-position: -100% 0;
  }

  .login__btn:disabled:hover::before,
  .login__btn:disabled:hover::after {
    width: 50%;
  }

  .login__btn:disabled:hover .login__btn-label {
    color: var(--login-btn-text);
  }

  .login__signout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    border: 0.0625rem solid var(--border-color);
    border-radius: var(--r-sm);
    transition: color 120ms ease, border-color 120ms ease;
  }

  .login__signout:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
  }

  /* the line under a login form that leads to the other card view */
  .login__switch {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 0.0625rem solid var(--border-color);
    font-size: var(--fs-base);
    line-height: 1.5;
    color: var(--text-secondary);
  }

  .login__switch-btn {
    padding: 0.125rem 0.25rem;
    font-weight: 700;
    color: var(--text-accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    border-radius: var(--r-sm);
    transition: color 120ms ease;
  }

  .login__switch-btn:hover {
    color: var(--text-primary);
  }

  .login__switch-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  .login__switch-btn:disabled:hover {
    color: var(--text-accent);
  }

  /* ---- forms ---- */
  .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .actions--tight {
    margin-top: 0.5rem;
  }

  .actions--column {
    flex-direction: column;
    align-items: stretch;
  }

  /* ---- buttons ---- */
  .button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.75rem 1.125rem;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--on-orange);
    background: var(--color-orange);
    border: 0.0625rem solid var(--color-orange);
    border-radius: var(--r-sm);
    transition: background 150ms var(--ease), transform 100ms var(--ease);
  }

  .button:hover {
    background: var(--accent-hover);
  }

  .button:active {
    transform: translateY(0.0625rem);
  }

  /* the shine belongs to the primary button only */
  .button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent 0%, var(--shine) 50%, transparent 100%);
    transform: skewX(-20deg);
    transition: left 450ms ease-in-out;
    pointer-events: none;
  }

  .button:hover::before {
    left: 100%;
  }

  .button .icon {
    width: 1rem;
    height: 1rem;
  }

  .button--ghost {
    color: var(--text-secondary);
    background: transparent;
    border-color: var(--border-color);
    transition: color 150ms var(--ease), border-color 150ms var(--ease), background 150ms var(--ease);
  }

  .button--ghost:hover {
    color: var(--text-primary);
    border-color: var(--border-hover);
    background: var(--bg-surface);
  }

  .button--secondary {
    min-height: 2.25rem;
    padding: 0.4375rem 0.6875rem;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: transparent;
    border-color: var(--border-color);
    box-shadow: 0 0 0.5rem -0.125rem var(--details-glow);
    transition: color 150ms var(--ease), border-color 150ms var(--ease), background 150ms var(--ease), box-shadow 150ms var(--ease);
  }

  .button--secondary:hover {
    color: var(--text-accent);
    border-color: var(--details-hover-border);
    background: var(--bg-surface);
    box-shadow: 0 0 0.875rem -0.0625rem var(--details-glow-hover);
  }

  .button--danger {
    color: var(--on-coral);
    background: var(--color-coral);
    border-color: var(--color-coral);
  }

  .button--danger:hover {
    background: var(--color-coral);
    filter: brightness(1.12);
  }

  .button--ghost::before,
  .button--secondary::before,
  .button--danger::before {
    content: none;
  }

  .button--small {
    min-height: 2.25rem;
    padding: 0.25rem 0.75rem;
    font-size: var(--fs-base);
  }

  .button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    filter: none;
  }

  .button:disabled:hover {
    background: var(--color-orange);
  }

  .button:disabled::before,
  .button:disabled:hover::before {
    content: none;
  }

  .button--ghost:disabled:hover,
  .button--secondary:disabled:hover {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-color);
  }

  .button--danger:disabled:hover {
    background: var(--color-coral);
    filter: none;
  }

  /* ---- messages ---- */
  .message {
    margin-top: 0.75rem;
    padding: 0.625rem 0.875rem;
    font-size: var(--fs-sm);
    line-height: 1.45;
    text-align: left;
    white-space: pre-line;
    overflow-wrap: break-word;
    background: var(--bg-surface);
    border: 0.0625rem solid var(--border-color);
    border-radius: 0.5rem;
  }

  .message--error {
    color: var(--text-primary);
    background: var(--danger-bg);
    border-color: var(--danger-border);
  }

  .message--ok {
    color: var(--text-ok);
    border-color: var(--color-teal);
  }

  .message--info {
    color: var(--text-secondary);
  }

  /* ---- the app view: one framed column ---- */
  .app-wrap {
    position: relative;
    padding: 0.5rem 0 2rem;
    overflow-x: clip;
  }

  /* a faint orange glow behind the frame's top */
  .app-wrap::before {
    content: "";
    position: absolute;
    inset: -2rem -2.5rem;
    pointer-events: none;
    background: radial-gradient(55rem 36rem at 50% -8%, var(--page-glow), transparent 60%);
    opacity: 0.6;
  }

  .app-frame {
    position: relative;
    max-width: var(--frame-w);
    margin: 0 auto;
    background: var(--bg-surface);
    border: 0;
    border-radius: 0;
    animation: frame-spring 0.42s var(--ease) both;
  }

  .app-body {
    display: flex;
    flex-direction: column;
    padding: 1rem var(--gutter);
  }

  .app-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 1.0625rem;
  }

  .page-title {
    margin-bottom: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
  }

  .page-lede {
    max-width: 60ch;
    margin: -0.375rem 0 1.0625rem;
    color: var(--text-secondary);
  }

  .notice {
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
    font-size: var(--fs-base);
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 0.0625rem solid var(--border-color);
    border-radius: var(--r-md);
  }

  .notice__text {
    margin: 0;
  }

  .card {
    padding: 1rem;
    background: var(--bg-card);
    border: 0.0625rem solid var(--border-color);
    border-radius: var(--r-xl);
  }

  .card--form {
    margin: 0.75rem 0;
  }

  .card__title {
    margin-bottom: 0.5rem;
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1.2;
  }

  .card__lede {
    color: var(--text-secondary);
  }

  /* the first label of a card sits flush under its lede */
  .card__first-label {
    margin-top: 0;
  }

  /* ---- the fold: a grid whose one row runs between 1fr and 0fr, so whatever sits inside slides
     shut and open without a measured height. The transition is on only while a click moves it
     (is-moving, taken off by the page's script when the time is up), so a page that opens shut
     does not animate; shut, the content is out of the tab order and off the page's scroll
     height. The How It Works frame, the History frame and the folds under its rows use it ---- */
  .fold {
    display: grid;
    grid-template-rows: 1fr;
  }

  .fold.is-moving {
    transition: grid-template-rows 0.3s var(--ease), visibility 0.3s;
  }

  .fold.is-moving,
  .fold.is-closed {
    overflow: hidden;
  }

  .fold.is-closed {
    grid-template-rows: 0fr;
    visibility: hidden;
  }

  /* min-width 0 as well: a line inside that cannot wrap (a history address cut with an ellipsis)
     would otherwise widen the grid's track past the page, since an auto track grows to its
     item's min-content and a one-line text's min-content is the whole line */
  .fold__panel {
    min-height: 0;
    min-width: 0;
  }

  /* opened by a click, the content drops in the way the member menu does while the row slides */
  .fold.is-opening > .fold__panel {
    animation: drop-in 0.3s var(--ease);
  }

  /* a title row with its title in the middle */
  .title-row--center {
    justify-content: center;
    text-align: center;
  }

  /* ---- the hover bubbles: whatever owns a bubble anchors it ---- */
  .has-tip {
    position: relative;
  }

  /* a bubble under its owner: out of the flow, shown two seconds into a hover (a tool's also on
     keyboard focus), gone the moment the pointer leaves; a screen reader reads it in place */
  .tip {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    z-index: 2;
    width: max-content;
    max-width: min(60ch, 86vw);
    padding: 0.625rem 0.875rem;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    text-align: center;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 0.0625rem solid var(--border-color);
    border-radius: var(--r-lg);
    opacity: 0;
    transform: translate(-50%, -0.25rem);
    transition: opacity 150ms var(--ease), transform 150ms var(--ease);
    pointer-events: none;
  }

  .has-tip:hover .tip,
  .has-tip:focus-visible .tip {
    opacity: 1;
    transform: translate(-50%, 0);
    transition-delay: 2s;
  }

  /* a bubble under a title that sits at the start of its row opens from the title's left edge,
     the words aligned the same way, so it never hangs past the frame */
  .has-tip--start .tip {
    left: 0;
    text-align: left;
    transform: translate(0, -0.25rem);
  }

  .has-tip--start:hover .tip,
  .has-tip--start:focus-visible .tip {
    transform: translate(0, 0);
  }

  .pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2rem;
    padding: 0.375rem 0.875rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 0.0625rem solid var(--border-color);
    border-radius: 999rem;
    cursor: pointer;
    transition: color 150ms var(--ease), border-color 150ms var(--ease), background 150ms var(--ease);
  }

  .pill:hover {
    color: var(--text-primary);
    border-color: var(--border-hover);
  }

  /* a pill that just copied something */
  .pill.is-copied,
  .pill.is-copied:hover {
    color: var(--tone-good);
    border-color: var(--tone-good);
  }

  .pill[aria-expanded="true"],
  .pill[aria-pressed="true"] {
    color: var(--text-accent);
    border-color: var(--details-hover-border);
    background: var(--bg-surface);
  }

  .pill__dot {
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--text-muted);
  }

  .pill.tone-teal .pill__dot {
    background: var(--color-teal);
  }

  .pill.tone-amber .pill__dot {
    background: var(--color-amber);
  }

  .pill.tone-coral .pill__dot {
    background: var(--color-coral);
  }

  .pill__value {
    color: var(--text-primary);
  }

  .pill__value:empty {
    display: none;
  }

  .panel {
    margin-top: 0.75rem;
  }

  .panel__text {
    margin: 0 0 0.5rem;
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--text-secondary);
  }

  .panel__text:last-child {
    margin-bottom: 0;
  }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-secondary);
    background: var(--bg-surface);
    border: 0.0625rem solid var(--border-color);
    border-radius: 999rem;
  }

  .badge__dot {
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--text-muted);
  }

  .badge--top .badge__dot {
    background: var(--tone-top);
  }

  .badge--good .badge__dot {
    background: var(--tone-good);
  }

  .badge--ok .badge__dot {
    background: var(--color-teal);
  }

  .badge--warn .badge__dot {
    background: var(--color-amber);
  }

  .badge--bad .badge__dot {
    background: var(--color-coral);
  }

  .section-title {
    margin: 1rem 0 0.5rem;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }

  /* ---- the board: a ring with a 7-segment number, and meters ---- */
  .board {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 1.5rem;
    align-items: center;
    opacity: 0;
    transform: translateY(0.625rem);
    animation: rise 0.45s var(--ease) forwards;
  }

  .board__head {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    min-height: 1.875rem;
    margin-bottom: 0.25rem;
  }

  .board__ring,
  .board__meters,
  .board__wide {
    min-width: 0;
  }

  .board__wide {
    grid-column: 1 / -1;
  }

  .board__title {
    font-family: var(--font-panel);
    font-size: clamp(1.1875rem, 2.6vh, 1.5rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .ringbox {
    flex: none;
    display: flex;
    justify-content: center;
    height: clamp(5.75rem, 17vh, 10.625rem);
    margin: 0.125rem 0;
  }

  .ring {
    position: relative;
    width: clamp(5.75rem, 17vh, 10.625rem);
    height: clamp(5.75rem, 17vh, 10.625rem);
  }

  .ring__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
  }

  .ring__track {
    fill: none;
    stroke: var(--bg-elevated);
    stroke-width: 14;
  }

  /* dashed until the first numbers are drawn */
  .board.is-empty .ring__track {
    stroke-dasharray: 4 6;
  }

  .ring__arc {
    fill: none;
    stroke: var(--color-teal);
    stroke-width: 14;
    stroke-linecap: butt;
    transition: stroke-dashoffset 0.8s var(--ease), stroke 0.4s;
  }

  .ring__arc.tone-lime {
    stroke: var(--tone-top);
  }

  .ring__arc.tone-leaf {
    stroke: var(--tone-good);
  }

  .ring__arc.tone-amber {
    stroke: var(--color-amber);
  }

  .ring__arc.tone-coral {
    stroke: var(--color-coral);
  }

  .ring__tick {
    stroke: var(--bg-card);
    stroke-width: 4;
  }

  .ring__num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-digits);
    font-size: clamp(1.8125rem, 5.1vh, 3.4375rem);
    font-weight: 400;
    color: var(--text-primary);
  }

  /* a word in the ring instead of a number, while a test runs */
  .ring__num.is-word {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }

  .ring__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-height: 2.25rem;
    margin: 0.25rem 0;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    color: var(--text-secondary);
  }

  .ring__label-name {
    font-weight: 500;
    color: var(--text-primary);
  }

  .ring__label-note {
    white-space: nowrap;
  }

  .rows {
    flex: none;
    padding-bottom: 0.375rem;
  }

  .meter {
    margin: 0.375rem 0;
  }

  .meter__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.3125rem;
  }

  .meter__name {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }

  .meter__long {
    margin-left: 0.5rem;
    letter-spacing: 0.04em;
    text-transform: none;
  }

  .meter__value {
    font-family: var(--font-mono);
    font-size: var(--fs-base);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-primary);
  }

  .meter.tone-teal .meter__value {
    color: var(--text-ok);
  }

  .meter.tone-amber .meter__value {
    color: var(--text-warn);
  }

  .meter.tone-coral .meter__value {
    color: var(--text-danger);
  }

  .meter__bar {
    position: relative;
    height: 0.5rem;
    background: var(--bg-elevated);
    border-radius: 999rem;
    overflow: hidden;
  }

  .meter.tone-teal .meter__bar {
    background: var(--track-teal);
  }

  .meter.tone-amber .meter__bar {
    background: var(--track-amber);
  }

  .meter.tone-coral .meter__bar {
    background: var(--track-coral);
  }

  .meter__fill {
    display: block;
    height: 100%;
    width: var(--fill, 0%);
    background: var(--color-teal);
    border-radius: 999rem;
    transition: width 0.8s var(--ease), background 0.4s;
  }

  .meter.tone-amber .meter__fill {
    background: var(--color-amber);
  }

  .meter.tone-coral .meter__fill {
    background: var(--color-coral);
  }

  /* two marks on a metric bar: where good ends and where poor begins */
  .meter__tick {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0.125rem;
    background: var(--bg-card);
  }

  .meter__tick--good {
    left: var(--tick-good, 50%);
  }

  .meter__tick--poor {
    left: 66.67%;
  }

  .warnbox {
    margin-top: 0.625rem;
    padding: 0.5625rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: 1.5;
    color: var(--text-warn);
    background: var(--bg-surface);
    border: 0.0625rem solid var(--color-amber);
    border-radius: var(--r-md);
    overflow-wrap: break-word;
  }

  .errbox {
    margin-top: 0.875rem;
    padding: 0.75rem 0.875rem;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-danger);
    background: var(--bg-surface);
    border: 0.0625rem solid var(--color-coral);
    border-radius: var(--r-md);
    overflow-wrap: break-word;
  }

  /* a two-column spec table */
  .spec {
    border: 0.0625rem solid var(--border-color);
    border-radius: var(--r-sm);
    overflow: hidden;
  }

  .spec__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    padding: 0.5625rem 0.8125rem;
    border-bottom: 0.0625rem solid var(--border-color);
  }

  .spec__row:last-child {
    border-bottom: 0;
  }

  .spec__row:nth-child(odd) {
    background: var(--bg-surface);
  }

  .spec__term {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }

  .spec__value {
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-base);
    line-height: 1.4;
    text-align: left;
    color: var(--text-primary);
    overflow-wrap: anywhere;
  }

  /* ---- the two-step card: the QR on white, so a phone camera reads it ---- */
  .qr-box {
    display: flex;
    width: 12.5rem;
    height: 12.5rem;
    margin: 0 auto 0.75rem;
    padding: 0.5rem;
    background: var(--qr-paper);
    border-radius: var(--r-sm);
  }

  .qr-box:empty {
    display: none;
  }

  .qr-box__image {
    width: 100%;
    height: 100%;
  }

  .two-step-key {
    display: block;
    margin: 0.5rem 0 0.75rem;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    letter-spacing: 0.08em;
    overflow-wrap: anywhere;
    color: var(--text-primary);
  }

  /* ---- wider screens ---- */
  @media (min-width: 38rem) {
    .topbar__inner {
      gap: 1.75rem;
      padding: 0 var(--container-padding);
    }

    .app-wrap {
      padding: 4.5rem 1.25rem 3rem;
    }

    .app-frame {
      border: 0.0625rem solid var(--border-hover);
      border-radius: 1.875rem;
      box-shadow: var(--frame-shadow), 0 0 0 0.0625rem var(--frame-ring);
    }

    .app-body {
      padding: 1.25rem 1.375rem 1.625rem;
    }

    .card {
      padding: 1.25rem 1.375rem 1.375rem;
    }

    .login__card {
      padding: 2.75rem 2.5rem 2.25rem;
    }

    .login__brand {
      margin: -1.25rem 0 1.5rem -1rem;
    }

    .board {
      grid-template-columns: 15rem minmax(0, 1fr);
    }

    .spec__row {
      flex-direction: row;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.75rem;
    }

    .spec__value {
      text-align: right;
    }
  }

}

/* +------------------------------------------------------+ */
/* |  LAYER: UTILITIES (win over components)              | */
/* +------------------------------------------------------+ */
@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    margin: -0.0625rem;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  [hidden] {
    display: none;
  }
}