/*
 * WP Bulk Replace — the shared component layer for the Help Centre and the
 * account portal.
 *
 * ONE STYLESHEET FOR BOTH HOSTS, which is the whole point of it. Before this
 * file, every rule either lived in a `<style>` block inside `help/_shell.html` or
 * in a second `<style>` block inside `account/_shell.html`, and the two had
 * already begun to disagree — the same nav was 14px on one host and 15px on the
 * other. A customer moving from the marketing site to Help to their account
 * should never change visual language, only context, and that is a fact about a
 * stylesheet or it is not a fact at all.
 *
 * THE VISUAL LANGUAGE IS THE MARKETING THEME'S (`bsmaha/wpbulkreplace-site`,
 * `theme/wpbulkreplace/style.css`). THE STRUCTURE IS DATA DRIVEN MAPS'. That
 * division, and every place one of them had nothing to say, is written up in
 * `docs/WPBR-UI-REUSE-AUDIT.md`.
 *
 * NO LITERAL VALUES. Every colour, size, weight, radius, shadow and duration is a
 * token from `wpbr-tokens.css`. `core/tests/test_design_system.py` fails on a hex
 * or an `rgb(`/`hsl(` in this file.
 */

/* ===================================================================
   BASE
   =================================================================== */

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

html, body { margin: 0; min-height: 100%; }

body {
  /* The theme's three-layer ground, tokenised. Content sits on white surfaces
   * above it, the way `.launch-status` does, which is also what keeps body text
   * off the gradient's darkest stop — #006DF5 on #EDF6FF is 4.27:1, and on
   * white it is 4.66:1. */
  background: var(--wpbr-ground);
  /* NOT `background-attachment: fixed`, which was here and was wrong. The theme
   * is one viewport tall so it never had to decide; a Help article is not, and a
   * fixed ground repaints on every scroll frame on a phone and pins the 145deg
   * ramp to the window instead of to the document - so a long page ran out of
   * gradient partway down and finished on flat white. */
  color: var(--wpbr-text);
  font-family: var(--wpbr-font);
  font-size: var(--wpbr-text-base);
  line-height: var(--wpbr-leading-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--wpbr-link); }
a:hover { color: var(--wpbr-link-hover); }

/* ONE FOCUS RING, ON EVERYTHING, and it is `:focus-visible` so a mouse click does
 * not draw it. The shape is the theme's; the colour is opaque because the
 * theme's alpha is 1.36:1 (see the token file). */
:focus-visible {
  outline: var(--wpbr-focus-width) solid var(--wpbr-focus-color);
  outline-offset: var(--wpbr-focus-offset);
  border-radius: var(--wpbr-radius-xs);
}

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

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

/* Not a label treatment — only genuine machine strings: a support reference, a
 * `WPBR-D-` diagnostics code, a path. */
code {
  font-size: .92em;
  background: var(--wpbr-surface-tint);
  padding: .1em .35em;
  border-radius: var(--wpbr-radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}

/* ===================================================================
   ACCESSIBILITY PRIMITIVES  (DDM `.ddm-skip`, `.ddm-sr`)
   =================================================================== */

.wpbr-skip {
  position: absolute;
  left: 0;
  top: -100%;
  z-index: 30;
  padding: var(--wpbr-space-2) var(--wpbr-space-3);
  background: var(--wpbr-navy);
  color: var(--wpbr-white);
  font-weight: var(--wpbr-weight-semi);
  text-decoration: none;
}
.wpbr-skip:focus { top: 0; color: var(--wpbr-white); }

.wpbr-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===================================================================
   THE SHELL
   =================================================================== */

.wpbr-shell {
  width: 100%;
  max-width: var(--wpbr-page-max);
  margin: 0 auto;
  padding: 0 var(--wpbr-gutter);
}

.wpbr-main { padding: var(--wpbr-space-7) 0 var(--wpbr-space-9); }

/* ===================================================================
   THE MASTHEAD

   DDM's `.ddm-header--app` arrangement: wordmark, a qualifier naming which
   application you are in, a spacer, then that surface's own actions, with the
   application's destinations on a second row. Both of DDM's app chromes take the
   marketing header's classes unchanged, and that is what makes "never changes
   visual language" true of the stylesheet rather than of two designs that happen
   to agree this week.

   MINUS THE SELL. No utility bar and no call to action: somebody reading a Help
   article with a broken batch is not in the market, and somebody in their account
   has already bought.
   =================================================================== */

.wpbr-masthead {
  position: relative;
  z-index: 20;
  background: var(--wpbr-surface-raised);
  border-bottom: 1px solid var(--wpbr-rule);
  backdrop-filter: blur(6px);
}

.wpbr-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wpbr-space-4);
  width: 100%;
  max-width: var(--wpbr-page-max);
  margin: 0 auto;
  padding: var(--wpbr-space-3) var(--wpbr-gutter);
}

.wpbr-bar__spacer { flex: 1 1 auto; }

/* THE LOCKUP IS THE THEME'S, TURNED ON ITS SIDE. The launch page stacks the mark
 * over the wordmark and centres them because it is a hero; a masthead sets them
 * horizontally. Same parts, same values, different axis. */
.wpbr-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--wpbr-space-2);
  min-height: var(--wpbr-target);
  flex: none;
  text-decoration: none;
  color: var(--wpbr-text);
}
.wpbr-lockup__mark {
  display: block;
  width: 30px;
  height: auto;
  filter: drop-shadow(var(--wpbr-shadow-mark));
}
.wpbr-wordmark {
  display: flex;
  align-items: baseline;
  gap: .28em;
  font-size: var(--wpbr-text-wordmark);
  font-weight: var(--wpbr-weight-bold);
  letter-spacing: var(--wpbr-tracking-wordmark);
}
/* `WP` IS THE RECESSIVE HALF OF THE NAME. It is the smaller half and must not
 * visually dominate the product it qualifies — the rule both the theme and the
 * listing banner obey, at the value the theme uses on a light ground. */
.wpbr-wordmark__wp {
  color: var(--wpbr-wordmark-wp);
  font-weight: var(--wpbr-weight-light);
}

/* THE QUALIFIER NAMES THE APPLICATION AND IS NOT A LINK. An anchor on it would be
 * a second route to the page you are already on. */
.wpbr-qualifier {
  flex: none;
  padding-inline-start: var(--wpbr-space-4);
  border-inline-start: 1px solid var(--wpbr-rule);
  color: var(--wpbr-text-chip);
  font-size: var(--wpbr-text-sm);
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: var(--wpbr-tracking-chip);
}

.wpbr-bar__who {
  flex: none;
  color: var(--wpbr-text-soft);
  font-size: var(--wpbr-text-sm);
}

/* ===================================================================
   THE SECOND ROW

   `aria-current` IS THE SELECTOR, so the mark cannot exist without the
   announcement. A `.is-current` class lets the two drift apart, and the one that
   goes missing is always the one a screen reader needed. Taken from DDM verbatim.
   =================================================================== */

.wpbr-appnav { border-bottom: 1px solid var(--wpbr-rule); }

.wpbr-appnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--wpbr-space-6);
  width: 100%;
  max-width: var(--wpbr-page-max);
  margin: 0 auto;
  padding: 0 var(--wpbr-gutter);
  list-style: none;
}

.wpbr-appnav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--wpbr-target);
  border-bottom: 2px solid transparent;
  color: var(--wpbr-text-soft);
  font-size: var(--wpbr-text-base);
  font-weight: var(--wpbr-weight-semi);
  text-decoration: none;
  transition: color var(--wpbr-dur) var(--wpbr-ease);
}
.wpbr-appnav a:hover { color: var(--wpbr-link-hover); }
.wpbr-appnav a[aria-current="page"] {
  color: var(--wpbr-text);
  border-bottom-color: var(--wpbr-blue);
}

/* IT WORKS WITH NO JAVASCRIPT. The nav is only hidden behind the button under
 * `.wpbr-js`, which the script sets on itself — so a reader with no script gets
 * the nav and the button is the one thing that does nothing. A disclosure rather
 * than a focus-trapped sheet, because it covers nothing. */
.wpbr-menu-toggle { display: none; }

/* ===================================================================
   PROSE
   =================================================================== */

.wpbr-prose { max-width: var(--wpbr-measure); }

.wpbr-prose > :first-child { margin-top: 0; }
.wpbr-prose > :last-child { margin-bottom: 0; }

.wpbr-prose p,
.wpbr-prose li {
  font-size: var(--wpbr-text-md);
  line-height: var(--wpbr-leading-body);
}
.wpbr-prose p { margin: 0 0 var(--wpbr-space-4); }

.wpbr-prose ul, .wpbr-prose ol { margin: 0 0 var(--wpbr-space-4); padding-inline-start: 1.3em; }
.wpbr-prose li { margin-block-end: var(--wpbr-space-1); }

.wpbr-prose strong { font-weight: var(--wpbr-weight-semi); }

.wpbr-prose pre {
  overflow-x: auto;
  padding: var(--wpbr-space-3);
  background: var(--wpbr-surface-tint);
  border-radius: var(--wpbr-radius-md);
  font-size: var(--wpbr-text-sm);
  line-height: 1.5;
}
.wpbr-prose pre code { background: none; padding: 0; }

.wpbr-prose blockquote {
  margin: 0 0 var(--wpbr-space-4);
  padding-inline-start: var(--wpbr-space-4);
  border-inline-start: 3px solid var(--wpbr-ice);
  color: var(--wpbr-text-soft);
}

.wpbr-prose img { height: auto; border-radius: var(--wpbr-radius-md); }

/* Headings keep the theme's tracking and `text-wrap: balance`, stepped down from
 * the hero: 72px above a paragraph of troubleshooting is not the same design used
 * consistently. */
.wpbr-h1, .wpbr-prose h1 {
  margin: 0 0 var(--wpbr-space-4);
  font-size: var(--wpbr-text-h1);
  font-weight: var(--wpbr-weight-display);
  line-height: 1.1;
  letter-spacing: var(--wpbr-tracking-hero);
  text-wrap: balance;
}
.wpbr-prose h2 {
  margin: var(--wpbr-space-7) 0 var(--wpbr-space-3);
  font-size: var(--wpbr-text-h2);
  font-weight: var(--wpbr-weight-bold);
  letter-spacing: var(--wpbr-tracking-wordmark);
  text-wrap: balance;
}
.wpbr-prose h3 {
  margin: var(--wpbr-space-6) 0 var(--wpbr-space-2);
  font-size: var(--wpbr-text-h3);
  font-weight: var(--wpbr-weight-semi);
}

/* The theme's `.launch-copy`: the sentence under a title. */
.wpbr-lede {
  max-width: var(--wpbr-measure);
  margin: 0 0 var(--wpbr-space-6);
  color: var(--wpbr-text-soft);
  font-size: var(--wpbr-text-lede);
  line-height: var(--wpbr-leading-body);
  text-wrap: balance;
}

.wpbr-eyebrow {
  display: block;
  margin: 0 0 var(--wpbr-space-2);
  color: var(--wpbr-text-chip);
  font-size: var(--wpbr-text-sm);
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: var(--wpbr-tracking-chip);
}

.wpbr-muted { color: var(--wpbr-text-soft); }
.wpbr-fine { font-size: var(--wpbr-text-xs); letter-spacing: var(--wpbr-tracking-fine); }

/* ===================================================================
   ACTIONS

   THE THEME HAS NO BUTTON — a launch page has one link — so the fill is derived
   from `.contact-link`: its 15px, its 650, its `.16s ease`, and the brand blue
   with `--wpbr-blue-dark` on hover, which is the theme's own link/hover pair.
   =================================================================== */

.wpbr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wpbr-space-3);
  margin: var(--wpbr-space-6) 0 0;
}

.wpbr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wpbr-space-2);
  min-height: var(--wpbr-target);
  padding: 0 var(--wpbr-space-5);
  border: 1px solid transparent;
  border-radius: var(--wpbr-radius-pill);
  font: inherit;
  font-size: var(--wpbr-text-base);
  font-weight: var(--wpbr-weight-semi);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--wpbr-dur) var(--wpbr-ease),
              border-color var(--wpbr-dur) var(--wpbr-ease),
              color var(--wpbr-dur) var(--wpbr-ease);
}

.wpbr-btn--primary {
  background: var(--wpbr-blue);
  border-color: var(--wpbr-blue);
  color: var(--wpbr-white);
  box-shadow: var(--wpbr-shadow-raised);
}
.wpbr-btn--primary:hover {
  background: var(--wpbr-blue-dark);
  border-color: var(--wpbr-blue-dark);
  color: var(--wpbr-white);
}

.wpbr-btn--secondary {
  background: var(--wpbr-surface);
  border-color: var(--wpbr-rule);
  color: var(--wpbr-text);
}
.wpbr-btn--secondary:hover { border-color: var(--wpbr-blue); color: var(--wpbr-link-hover); }

/* A button that ends a session or cancels a form is not a second primary action. */
.wpbr-btn--quiet {
  padding: 0;
  min-height: var(--wpbr-target);
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--wpbr-link);
  text-decoration: underline;
}
.wpbr-btn--quiet:hover { color: var(--wpbr-link-hover); }

/* THE THEME'S `.contact-link`, promoted to a component: the arrow slides out on
 * hover because the gap grows. This is WPBR's secondary action, and it is why
 * there is no outlined button beside every primary one. */
.wpbr-actionlink {
  display: inline-flex;
  align-items: center;
  gap: var(--wpbr-space-2);
  min-height: var(--wpbr-target);
  color: var(--wpbr-link);
  font-size: var(--wpbr-text-base);
  font-weight: var(--wpbr-weight-semi);
  text-decoration: none;
  transition: gap var(--wpbr-dur) var(--wpbr-ease), color var(--wpbr-dur) var(--wpbr-ease);
}
.wpbr-actionlink:hover,
.wpbr-actionlink:focus-visible {
  gap: var(--wpbr-space-3);
  color: var(--wpbr-link-hover);
}

/* ===================================================================
   THE CHIP

   `.launch-status` is the theme's own badge, and it is taken whole: pill, hairline
   blue border, translucent white, the raised shadow, 13px / 650 / .02em. DDM
   contributes only the idea of a status taxonomy.
   =================================================================== */

.wpbr-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--wpbr-space-2);
  padding: 7px var(--wpbr-space-3);
  border: 1px solid var(--wpbr-rule);
  border-radius: var(--wpbr-radius-pill);
  background: var(--wpbr-surface-raised);
  box-shadow: var(--wpbr-shadow-raised);
  color: var(--wpbr-text-chip);
  font-size: var(--wpbr-text-sm);
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: var(--wpbr-tracking-chip);
  white-space: nowrap;
}

/* The dot and its halo, from `.status-dot`. NEVER THE ONLY CARRIER OF THE STATE —
 * the chip always contains the word as well, so a reader who does not see colour
 * loses nothing. */
.wpbr-chip__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--wpbr-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--wpbr-blue) 9%, transparent);
  flex: none;
}
.wpbr-chip--ok    { color: var(--wpbr-ok); }
.wpbr-chip--ok    .wpbr-chip__dot { background: var(--wpbr-ok);    box-shadow: 0 0 0 4px color-mix(in srgb, var(--wpbr-ok) 12%, transparent); }
.wpbr-chip--warn  { color: var(--wpbr-warn); }
.wpbr-chip--warn  .wpbr-chip__dot { background: var(--wpbr-warn);  box-shadow: 0 0 0 4px color-mix(in srgb, var(--wpbr-warn) 12%, transparent); }
.wpbr-chip--error { color: var(--wpbr-error); }
.wpbr-chip--error .wpbr-chip__dot { background: var(--wpbr-error); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wpbr-error) 12%, transparent); }
.wpbr-chip--muted { color: var(--wpbr-text-soft); }
.wpbr-chip--muted .wpbr-chip__dot { background: var(--wpbr-text-faint); box-shadow: none; }

/* ===================================================================
   PANELS

   DDM's panels are ruled cells with no radius. WPBR's are cards, because
   `.launch-status` is a card and the brand has no square corner — the same
   recipe at a larger scale. They also give Help and Account a white reading
   surface above the page gradient.
   =================================================================== */

.wpbr-panel {
  padding: var(--wpbr-space-5);
  margin: 0 0 var(--wpbr-space-5);
  background: var(--wpbr-surface);
  border: 1px solid var(--wpbr-rule);
  border-radius: var(--wpbr-radius-md);
  box-shadow: var(--wpbr-shadow-raised);
}
.wpbr-panel > :first-child { margin-top: 0; }
.wpbr-panel > :last-child { margin-bottom: 0; }

.wpbr-panel__head {
  margin: 0 0 var(--wpbr-space-3);
  font-size: var(--wpbr-text-h3);
  font-weight: var(--wpbr-weight-bold);
  letter-spacing: var(--wpbr-tracking-wordmark);
}

/* A SECTION HEADING IS NOT A PANEL HEADING. The Help index reused `__head` for
 * the heading above each area's list, which gave it a panel's zero top margin
 * and sat it directly on the sentence above. Same type, its own spacing. */
.wpbr-section { margin: 0 0 var(--wpbr-space-7); }
.wpbr-section__head {
  margin: var(--wpbr-space-7) 0 var(--wpbr-space-3);
  font-size: var(--wpbr-text-h2);
  font-weight: var(--wpbr-weight-bold);
  letter-spacing: var(--wpbr-tracking-wordmark);
}
.wpbr-section__head a { text-decoration: none; color: var(--wpbr-text); }
.wpbr-section__head a:hover { color: var(--wpbr-link-hover); }

/* A panel describing something nobody can act on yet. Not a disabled control:
 * there is nothing to disable, and a greyed button implies a thing that exists. */
.wpbr-panel--pending { background: var(--wpbr-surface-raised); }

.wpbr-panels {
  display: grid;
  gap: var(--wpbr-space-5);
  margin: 0 0 var(--wpbr-space-5);
}
.wpbr-panels > .wpbr-panel { margin: 0; }
@media (min-width: 601px) { .wpbr-panels--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* THE PRICE LADDER, AND IT GOES TO ONE COLUMN BEFORE IT HAS TO. Three panels
 * across a tablet leaves each one narrower than the sentence inside it, so the
 * three-up only starts where three genuinely fit. `minmax(0, 1fr)` rather than
 * `1fr` because a grid track's default minimum is its content, which is what
 * lets one long word push a whole row wider than the page. */
@media (min-width: 601px)  { .wpbr-panels--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 901px)  { .wpbr-panels--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The number on a plan panel. Bigger than the body, not a heading: it is the
 * fact somebody is scanning for, and marking it up as an h-anything would put
 * a price in the document outline. */
.wpbr-price {
  margin: 0 0 var(--wpbr-space-2);
  font-size: var(--wpbr-text-h3);
  font-weight: var(--wpbr-weight-bold);
}

/* A PLAN PANEL, WITH ITS BUTTON AT THE BOTTOM. The tiers do not carry the same
 * amount of text - Agency has a quantity field and a sentence explaining it -
 * so left alone the three Buy buttons sit at three different heights and the
 * row reads as broken rather than as three offers. Pushing the form down makes
 * the buttons line up without anybody hand-tuning a height that the next
 * sentence would undo. */
.wpbr-panel--offer { display: flex; flex-direction: column; }
.wpbr-panel--offer > form { margin-top: auto; }

/* A field whose content is two digits. Full width here would read as an
 * invitation to type a sentence into it. */
.wpbr-input--narrow { width: auto; min-width: 6rem; max-width: 10rem; }

/* ===================================================================
   NOTES

   DDM's reasoning, taken as stated: a no-result is an answer, not an error panel,
   so these are prose blocks inside the reading column rather than panels
   competing with the content. The left rule carries the kind, and never alone —
   each one's words say what it is.
   =================================================================== */

.wpbr-note {
  max-width: var(--wpbr-measure);
  padding: var(--wpbr-space-3) var(--wpbr-space-5);
  /* A TOP MARGIN, BECAUSE A NOTE IS SOMETIMES THE FIRST THING AFTER A HEADING.
   * With none, the account screens' "a payment did not go through" banner sat
   * flush against the h1 above it - the heading block has no bottom margin of
   * its own, so nothing separated them. Adjacent vertical margins collapse, so
   * this changes nothing where a note follows a paragraph that already had
   * one. */
  margin: var(--wpbr-space-5) 0;
  border-inline-start: 3px solid var(--wpbr-ice);
  border-radius: 0 var(--wpbr-radius-md) var(--wpbr-radius-md) 0;
  background: var(--wpbr-surface-tint);
  font-size: var(--wpbr-text-base);
}
.wpbr-note > :first-child { margin-top: 0; }
.wpbr-note > :last-child { margin-bottom: 0; }
.wpbr-note p { font-size: var(--wpbr-text-base); margin: 0 0 var(--wpbr-space-2); }

.wpbr-note--info    { border-inline-start-color: var(--wpbr-blue); }
.wpbr-note--warn    { border-inline-start-color: var(--wpbr-warn); }
.wpbr-note--error   { border-inline-start-color: var(--wpbr-error); }
.wpbr-note--error   .wpbr-note__head { color: var(--wpbr-error); }
/* Violet is an accent and never a primary action, which makes "this article
 * describes a superseded version" exactly what it is for. */
.wpbr-note--retired { border-inline-start-color: var(--wpbr-violet); }

.wpbr-note__head {
  margin: 0 0 var(--wpbr-space-2);
  font-size: var(--wpbr-text-base);
  font-weight: var(--wpbr-weight-semi);
}

/* ===================================================================
   RULED LISTS  (DDM `.ddm-hub__row` / `.ddm-rows`)

   The Help index, an area's articles and the search results are all the same
   object: a title, a sentence, a whole-row hover.
   =================================================================== */

.wpbr-list { margin: 0; padding: 0; list-style: none; }

.wpbr-list__item { border-top: 1px solid var(--wpbr-rule-soft); }
.wpbr-list__item:last-child { border-bottom: 1px solid var(--wpbr-rule-soft); }

.wpbr-list__row {
  display: block;
  padding: var(--wpbr-space-4) var(--wpbr-space-3);
  border-radius: var(--wpbr-radius-md);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--wpbr-dur) var(--wpbr-ease);
}
.wpbr-list__row:hover { background: color-mix(in srgb, var(--wpbr-blue) 4%, transparent); }

.wpbr-list__name {
  display: block;
  color: var(--wpbr-text);
  font-size: var(--wpbr-text-md);
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: var(--wpbr-tracking-wordmark);
}
.wpbr-list__row:hover .wpbr-list__name { color: var(--wpbr-link-hover); }

.wpbr-list__line {
  display: block;
  margin-top: var(--wpbr-space-1);
  max-width: var(--wpbr-measure);
  color: var(--wpbr-text-soft);
  font-size: var(--wpbr-text-base);
}

.wpbr-list__tags { display: flex; flex-wrap: wrap; gap: var(--wpbr-space-2); margin-top: var(--wpbr-space-2); }

/* ===================================================================
   TABLES  (DDM `.ddm-table`)
   =================================================================== */

/* A TABLE TOO WIDE FOR THE SCREEN SCROLLS INSIDE THIS, AND THE PAGE DOES NOT.
 * `overflow-x: auto` alone is not enough: a `<table>` in a scroll container
 * still reports its width to the root's scrollable area in Chromium, so the
 * Sites screen at 375px scrolled the whole page - masthead, nav and all -
 * 150px sideways while the wrapper itself was correctly clipping at 327px.
 * `contain: paint` is what makes the clip authoritative. Measured, not
 * reasoned about: `document.documentElement.scrollWidth` says 525 without it
 * and 375 with it. */
.wpbr-scroll { max-width: 100%; overflow-x: auto; contain: paint; }

.wpbr-table { width: 100%; border-collapse: collapse; font-size: var(--wpbr-text-base); }
.wpbr-table caption { text-align: left; }
.wpbr-table th, .wpbr-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--wpbr-space-3);
  border-bottom: 1px solid var(--wpbr-rule-soft);
}
.wpbr-table thead th {
  color: var(--wpbr-text-chip);
  font-size: var(--wpbr-text-sm);
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: var(--wpbr-tracking-chip);
  white-space: nowrap;
}
.wpbr-table tbody a { font-weight: var(--wpbr-weight-semi); text-decoration: none; }
.wpbr-table tbody a:hover { text-decoration: underline; }

/* A TABLE WHOSE LAST COLUMN IS A BUTTON CANNOT JUST SCROLL AWAY ON A PHONE.
 * Sideways scrolling inside `.wpbr-scroll` keeps the page still, but it also
 * puts the one action the screen exists for off the right-hand edge, behind a
 * swipe nobody is told about. Below the theme's 600px breakpoint each row
 * becomes a block and every cell carries its own label, so the action sits
 * under the site it belongs to.
 *
 * THE LABELS COME FROM `data-label` RATHER THAN FROM A SECOND COPY OF THE
 * HEADINGS in the markup. Two copies would be two things to translate and one
 * of them would eventually say something else. */
@media (max-width: 600px) {
  .wpbr-table--stack thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .wpbr-table--stack tr {
    display: block;
    padding: var(--wpbr-space-3) 0;
    border-bottom: 1px solid var(--wpbr-rule-soft);
  }
  .wpbr-table--stack tr:last-child { border-bottom: 0; }
  .wpbr-table--stack td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--wpbr-space-3);
    padding: var(--wpbr-space-1) 0;
    border: 0;
  }
  .wpbr-table--stack td::before {
    content: attr(data-label);
    color: var(--wpbr-text-soft);
    font-size: var(--wpbr-text-xs);
    letter-spacing: var(--wpbr-tracking-chip);
    flex: none;
  }
  /* The site's own name is the row's heading, not a labelled field. */
  .wpbr-table--stack td[data-label=""]::before { content: none; }
  .wpbr-table--stack td[data-label=""] { display: block; }
}

/* ===================================================================
   FORMS

   The theme has no control. The field takes `.launch-status`'s geometry — pill
   border weight, white surface, the raised shadow — at the 44px touch floor.
   =================================================================== */

.wpbr-field { margin: 0 0 var(--wpbr-space-5); max-width: var(--wpbr-measure); }

.wpbr-field__label {
  display: block;
  margin: 0 0 var(--wpbr-space-2);
  font-size: var(--wpbr-text-base);
  font-weight: var(--wpbr-weight-semi);
}
.wpbr-field__optional { color: var(--wpbr-text-soft); font-weight: var(--wpbr-weight-light); }

.wpbr-input, .wpbr-textarea, .wpbr-select {
  display: block;
  width: 100%;
  min-height: var(--wpbr-target);
  padding: var(--wpbr-space-2) var(--wpbr-space-3);
  background: var(--wpbr-surface);
  border: 1px solid var(--wpbr-rule);
  border-radius: var(--wpbr-radius-md);
  box-shadow: var(--wpbr-shadow-raised);
  color: var(--wpbr-text);
  font: inherit;
  font-size: var(--wpbr-text-base);
}
.wpbr-textarea { line-height: var(--wpbr-leading-body); resize: vertical; }
.wpbr-input[type="file"] { box-shadow: none; padding: var(--wpbr-space-2); }

.wpbr-field__hint {
  display: block;
  margin: var(--wpbr-space-2) 0 0;
  max-width: var(--wpbr-measure);
  color: var(--wpbr-text-soft);
  font-size: var(--wpbr-text-sm);
}

.wpbr-inline-form { display: flex; flex-wrap: wrap; gap: var(--wpbr-space-3); align-items: flex-end; }
.wpbr-inline-form .wpbr-field { margin: 0; flex: 1 1 15rem; }

.wpbr-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wpbr-space-3);
  margin: var(--wpbr-space-4) 0 var(--wpbr-space-6);
}
.wpbr-filters .wpbr-field { margin: 0; flex: 1 1 11rem; max-width: 18rem; }
.wpbr-filters .wpbr-field__label { font-size: var(--wpbr-text-sm); }

/* ===================================================================
   THE MASTHEAD SEARCH  (DDM `.ddm-help-search`)

   A REAL GET FORM, so it works with scripting off. A search box that needed a
   script would be the one control a reader with a broken page cannot use.
   =================================================================== */

/* `min-width: 0` IS LOAD-BEARING. A flex item defaults to `min-width: auto`,
 * which refuses to shrink below its own min-content — so at 320px this form
 * measured 345px inside a 320px viewport and took the whole page with it. It
 * is the one flex item here wide enough for that default to matter. */
.wpbr-search {
  display: flex;
  align-items: stretch;
  flex: 1 1 15rem;
  min-width: 0;
  gap: var(--wpbr-space-2);
}
.wpbr-search .wpbr-input {
  min-width: 0;
  width: auto;
  flex: 1 1 auto;
}
.wpbr-search .wpbr-btn { flex: none; padding: 0 var(--wpbr-space-4); }

/* ===================================================================
   BREADCRUMBS  (DDM `.ddm-breadcrumb`)
   =================================================================== */

.wpbr-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wpbr-space-2);
  margin: 0 0 var(--wpbr-space-4);
  padding: 0;
  list-style: none;
  font-size: var(--wpbr-text-sm);
}
.wpbr-crumbs li + li::before { content: "›"; margin-inline-end: var(--wpbr-space-2); color: var(--wpbr-text-faint); }
.wpbr-crumbs a { text-decoration: none; font-weight: var(--wpbr-weight-semi); }
.wpbr-crumbs a:hover { text-decoration: underline; }
/* The tail is the page you are on: plain text, not a link, and not
 * `aria-current` — the navigation already announces that, and two claims
 * on one page is one too many. */
.wpbr-crumbs li:last-child { color: var(--wpbr-text-soft); }

/* ===================================================================
   THE HELP ARTICLE

   THE RAIL IS SECOND IN DOM ORDER and is placed with grid, never with `order`: a
   visual order that disagrees with the tab order is the defect that rule exists
   for. Taken from DDM.
   =================================================================== */

.wpbr-article { display: block; }

.wpbr-article__body {
  max-width: var(--wpbr-measure);
  padding: var(--wpbr-space-6);
  background: var(--wpbr-surface);
  border: 1px solid var(--wpbr-rule);
  border-radius: var(--wpbr-radius-md);
  box-shadow: var(--wpbr-shadow-raised);
}

.wpbr-rails { display: grid; gap: var(--wpbr-space-5); margin-block-end: var(--wpbr-space-6); }

.wpbr-rail {
  padding-block-start: var(--wpbr-space-3);
  border-block-start: 1px solid var(--wpbr-rule-soft);
}
.wpbr-rail__head {
  margin: 0 0 var(--wpbr-space-2);
  color: var(--wpbr-text-chip);
  font-size: var(--wpbr-text-sm);
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: var(--wpbr-tracking-chip);
}
.wpbr-rail p, .wpbr-rail li { font-size: var(--wpbr-text-sm); line-height: 1.55; }
.wpbr-rail ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--wpbr-space-2); }

/* Field 10 renders in the rail above the tier and in the header below it, so
 * exactly one of the two exists at any width. */
.wpbr-meta--narrow { display: none; }

.wpbr-toc {
  padding: var(--wpbr-space-3) var(--wpbr-space-4);
  margin: 0 0 var(--wpbr-space-6);
  background: var(--wpbr-surface-tint);
  border-radius: var(--wpbr-radius-md);
}
.wpbr-toc__head { margin: 0 0 var(--wpbr-space-2); font-size: var(--wpbr-text-sm); font-weight: var(--wpbr-weight-semi); }
.wpbr-toc ol { margin: 0; padding-inline-start: 1.2em; }
.wpbr-toc li { margin-block-end: var(--wpbr-space-1); font-size: var(--wpbr-text-base); }

/* Numbered procedure steps. */
.wpbr-steps { list-style: none; margin: 0 0 var(--wpbr-space-5); padding: 0; counter-reset: wpbr-step; }
.wpbr-steps > li {
  position: relative;
  padding-inline-start: var(--wpbr-space-7);
  margin-block-end: var(--wpbr-space-5);
  counter-increment: wpbr-step;
}
.wpbr-steps > li::before {
  content: counter(wpbr-step);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wpbr-space-6);
  height: var(--wpbr-space-6);
  border-radius: 50%;
  background: var(--wpbr-surface-tint);
  color: var(--wpbr-blue);
  font-size: var(--wpbr-text-sm);
  font-weight: var(--wpbr-weight-bold);
}

/* ===================================================================
   THE SUPPORT THREAD
   =================================================================== */

.wpbr-thread { list-style: none; margin: 0 0 var(--wpbr-space-6); padding: 0; }

.wpbr-message {
  padding: var(--wpbr-space-4) var(--wpbr-space-5);
  margin: 0 0 var(--wpbr-space-3);
  background: var(--wpbr-surface);
  border: 1px solid var(--wpbr-rule);
  border-radius: var(--wpbr-radius-md);
  box-shadow: var(--wpbr-shadow-raised);
}
.wpbr-message--staff { border-inline-start: 3px solid var(--wpbr-blue); }

.wpbr-message__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wpbr-space-2);
  align-items: baseline;
  margin: 0 0 var(--wpbr-space-2);
  color: var(--wpbr-text-soft);
  font-size: var(--wpbr-text-sm);
}
.wpbr-message__who { color: var(--wpbr-text); font-weight: var(--wpbr-weight-semi); }
.wpbr-message__body { font-size: var(--wpbr-text-base); line-height: var(--wpbr-leading-body); }

.wpbr-files { margin: var(--wpbr-space-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--wpbr-space-1); }
.wpbr-files li { font-size: var(--wpbr-text-sm); }

/* ===================================================================
   EMPTY STATES

   A sentence rather than an empty table, which reads as a fault.
   =================================================================== */

.wpbr-empty {
  max-width: var(--wpbr-measure);
  padding: var(--wpbr-space-6);
  background: var(--wpbr-surface-raised);
  border: 1px dashed var(--wpbr-rule);
  border-radius: var(--wpbr-radius-md);
  color: var(--wpbr-text-soft);
}
.wpbr-empty > :first-child { margin-top: 0; }
.wpbr-empty > :last-child { margin-bottom: 0; }

/* ===================================================================
   THE FOOTER
   =================================================================== */

.wpbr-footer {
  margin-top: var(--wpbr-space-9);
  padding: var(--wpbr-space-7) 0 var(--wpbr-space-6);
  background: var(--wpbr-navy);
  color: var(--wpbr-on-navy);
}
.wpbr-footer__inner {
  display: grid;
  gap: var(--wpbr-space-6);
  width: 100%;
  max-width: var(--wpbr-page-max);
  margin: 0 auto;
  padding: 0 var(--wpbr-gutter);
}
@media (min-width: 601px) { .wpbr-footer__inner { grid-template-columns: 1.5fr 1fr 1fr; } }

.wpbr-footer .wpbr-wordmark { font-size: var(--wpbr-text-md); color: var(--wpbr-white); }
/* On navy, `WP` recedes in ice rather than in grey — the same rule, the value the
 * listing banner uses on a dark ground. */
.wpbr-footer .wpbr-wordmark__wp { color: var(--wpbr-on-navy-soft); }

.wpbr-footer__tagline {
  margin: var(--wpbr-space-2) 0 0;
  max-width: 34ch;
  color: var(--wpbr-on-navy);
  font-size: var(--wpbr-text-sm);
}
.wpbr-footer__head {
  margin: 0 0 var(--wpbr-space-3);
  color: var(--wpbr-on-navy-soft);
  font-size: var(--wpbr-text-sm);
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: var(--wpbr-tracking-chip);
}
.wpbr-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--wpbr-space-2); }
.wpbr-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--wpbr-target-secondary);
  color: var(--wpbr-on-navy);
  font-size: var(--wpbr-text-sm);
  text-decoration: none;
}
.wpbr-footer a:hover { color: var(--wpbr-white); text-decoration: underline; }

.wpbr-footer__legal {
  width: 100%;
  max-width: var(--wpbr-page-max);
  margin: var(--wpbr-space-6) auto 0;
  padding: var(--wpbr-space-5) var(--wpbr-gutter) 0;
  border-top: 1px solid var(--wpbr-rule-soft);
  color: var(--wpbr-on-navy-soft);
  font-size: var(--wpbr-text-xs);
  letter-spacing: var(--wpbr-tracking-fine);
}
.wpbr-footer__legal p { margin: 0; }

/* ===================================================================
   THE ARTICLE RAIL TIER

   NOT A BRAND TIER. The brand has one breakpoint and it is 600px, below. A 260px
   rail cannot sit beside a 68ch measure at 600px, so the two-column article gets
   a wider tier of its own — a layout constraint, recorded as one.
   =================================================================== */

@media (min-width: 900px) {
  .wpbr-article {
    display: grid;
    max-width: calc(var(--wpbr-measure) + var(--wpbr-rail-width) + var(--wpbr-space-8));
    grid-template-columns: minmax(0, 1fr) var(--wpbr-rail-width);
    column-gap: var(--wpbr-space-8);
    align-items: start;
  }
  .wpbr-article__head,
  .wpbr-toc,
  .wpbr-article__body { grid-column: 1; }
  .wpbr-rails {
    grid-column: 2;
    grid-row: 1 / span 20;
    position: sticky;
    inset-block-start: var(--wpbr-space-5);
  }
}

/* ===================================================================
   THE NARROW TIER — the theme's 600px, and the only brand breakpoint

   The bar wraps, the qualifier loses its divider, search takes the full width,
   and the second row collapses behind a disclosure. A reader who cannot see the
   categories cannot tell whether their question has one, so the button reveals
   them in flow rather than hiding them in a sheet.
   =================================================================== */

@media (max-width: 600px) {
  .wpbr-bar { gap: var(--wpbr-space-3); padding-bottom: var(--wpbr-space-3); }
  .wpbr-qualifier { padding-inline-start: 0; border-inline-start: 0; }
  .wpbr-wordmark { font-size: 22px; }
  .wpbr-search { flex: 1 1 100%; }
  .wpbr-bar__who { flex: 1 1 100%; }

  .wpbr-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--wpbr-space-2);
    min-height: var(--wpbr-target);
    margin: 0 var(--wpbr-gutter) var(--wpbr-space-1);
    padding: 0 var(--wpbr-space-3);
    background: var(--wpbr-surface);
    border: 1px solid var(--wpbr-rule);
    border-radius: var(--wpbr-radius-pill);
    font: inherit;
    font-size: var(--wpbr-text-sm);
    font-weight: var(--wpbr-weight-semi);
    cursor: pointer;
  }
  .wpbr-js .wpbr-appnav { display: none; }
  .wpbr-js .wpbr-appnav.is-open { display: block; }
  .wpbr-appnav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .wpbr-appnav li { border-block-start: 1px solid var(--wpbr-rule-soft); }
  .wpbr-appnav a { display: flex; min-height: var(--wpbr-target); }

  .wpbr-main { padding: var(--wpbr-space-6) 0 var(--wpbr-space-8); }
  .wpbr-article__body { padding: var(--wpbr-space-4); }
  .wpbr-panel { padding: var(--wpbr-space-4); }
  .wpbr-prose p, .wpbr-prose li { font-size: var(--wpbr-text-md); line-height: var(--wpbr-leading-tight); }
  .wpbr-lede { font-size: var(--wpbr-text-md); line-height: var(--wpbr-leading-tight); }
  .wpbr-meta--narrow { display: block; }
  .wpbr-rails { margin-block-start: var(--wpbr-space-6); }
  /* A capture keeps a legible scale inside a scrollable region rather than
   * shrinking to unreadability. */
  .wpbr-article figure { overflow-x: auto; }
  .wpbr-article figure img { max-width: none; }
}