/*
 * Site chrome — bar, page hero, tabs.
 *
 * Generated by scripts/build-preview.mjs, which inlines the same rules into the
 * standalone preview. Do not hand-edit: the point is that the theme header and
 * the preview cannot diverge.
 */
  /* ── The container ──
     Lives here rather than in the documentation stylesheet because the site bar
     uses it, and the site bar is on every page while the docs CSS is on three.
     Until this moved, the bar had no container anywhere else and its logo sat
     against the viewport edge.

     The width is the OUTER box: WordPress's constrained layout puts the global
     padding outside the 1280 and reaches its content width inside that, so a
     container that puts padding inside 1280 sits 24px to the right of every
     pattern on the same page. Matching the box model is what aligns them. */
  .wrap{max-width:var(--bc-container-outer);margin:0 auto;
        padding-inline:var(--bc-container-padding-inline)}

  /* ── Dark contexts ──
     One list, in the one stylesheet the theme and the static preview both load.
     A dark surface rebinds the tokens rather than restyling what sits on it, so
     a heading, a link, a card or an eyebrow comes out right without its author
     knowing which half of the ladder they are on.

     A media card belongs here even though it carries no background preset: its
     scrim makes it a dark surface. The preview's stages are here for the same
     reason — they are dark, and a second list for them is how the inverse card
     ended up purple on purple. */
  .has-inverse-gradient-background,
  .has-bg-inverse-base-background,
  .has-bg-inverse-sunken-background,
  .is-style-card-media,
  /* The site bar is a dark surface with no background of its own — it is
     positioned OVER the hero rather than inside it, so it inherits nothing
     from the section it sits on and the rebinding would never reach it. Its
     Log in button pinned content-inverse by hand until lint:surfaces said so:
     a pin survives onto whatever ground the bar is later put on, which is
     exactly the failure this list exists to prevent. */
  .sitebar,
  .demo__stage--inverse,
  .btnstage--inverse,
  .cardmatrix__pane--inverse {
  --bc-heading-content: var(--bc-content-inverse);
  --bc-body-content: var(--bc-content-inverse-secondary);
  --bc-lead-content: var(--bc-content-inverse-secondary);
  /* Rebinding the token is not enough on its own for running text. WordPress
     paints the body colour once, on <body>, and colour inherits as a computed
     value — so a paragraph inside a dark section keeps the light half's ink no
     matter what this list says, unless its author pinned a colour by hand. The
     patterns that did were the only reason nobody had noticed, exactly as with
     the headings. Painting it here is what makes the promise true: a paragraph
     comes out right without its author knowing which half they are on. */
  color: var(--bc-body-content);
  --bc-eyebrow-accent-content: var(--bc-content-accent-on-inverse);
  --bc-eyebrow-content: var(--bc-content-inverse-tertiary);
  --bc-link-content: var(--bc-link-inverse-content);
  --bc-link-content-hover: var(--bc-link-inverse-content-hover);
  --bc-link-quiet-content: var(--bc-link-quiet-inverse-content);
  --bc-card-bg: var(--bc-card-inverse-bg);
  --bc-card-border: var(--bc-card-inverse-border);
  --bc-card-content: var(--bc-card-inverse-content);
  --bc-card-shadow: none;
  --bc-card-blur: var(--bc-card-inverse-blur);
  --bc-card-interactive-heading-hover: var(--bc-link-inverse-content-hover);
  --bc-tag-glass-bg: var(--bc-bg-inverse-elevated);
  --bc-tag-glass-border: var(--bc-border-inverse);
  --bc-tag-glass-content: var(--bc-content-inverse);
  /* An outline button's EDGE and its LABEL, which were missing here while its
     ground, blur and sweep were not — so every outline button on a dark
     section carried the light half's hairline. The hero's second CTA has had
     it since that pattern shipped; nothing showed it, because the Components
     page demonstrates that button with the preview's own btn--on-inverse
     class, which names the inverse colours directly. */
  --bc-button-outline-border: var(--bc-button-outline-inverse-border);
  --bc-button-outline-content: var(--bc-button-outline-inverse-content);
  --bc-button-outline-bg: var(--bc-button-outline-inverse-bg);
  --bc-button-outline-bg-hover: var(--bc-button-outline-inverse-bg-hover);
  --bc-button-outline-blur: var(--bc-button-outline-inverse-blur);
  --bc-button-outline-shine: var(--bc-button-outline-inverse-shine);
  /* A filter's rest state is transparent, so it has exactly the glass tag's
     problem: no colour of its own, it takes whatever it is over. Its SELECTED
     state is absent from this list on purpose — the accent fill is opaque and
     carries its own contrast, which is the same reason the soft tag needs no
     rebinding either. */
  --bc-filter-border: var(--bc-border-inverse);
  --bc-filter-content: var(--bc-content-inverse-secondary);
  --bc-filter-bg-hover: var(--bc-filter-inverse-bg-hover);
  --bc-filter-border-hover: var(--bc-filter-inverse-border-hover);
  --bc-filter-content-hover: var(--bc-content-inverse);
  --bc-filter-focus-shadow:
    0 0 0 var(--bc-ring-width) var(--bc-bg-inverse-base),
    0 0 0 var(--bc-ring-offset) var(--bc-border-focus);
  /* The accordion's SURFACE needs nothing here — it reads the card tokens
     three lines up, so it inverts when the card does. Its text does not, and
     that is the whole trap: the card went dark, the questions stayed
     near-black, and the component was unreadable on the dark half while
     looking correct in every rule that mentions it.

     The three states become the link's three on dark for the same reason the
     link's do: the accent green is the lit colour here, where on the light
     half green is never a word. Body copy on dark is tertiary — 75% — per §6. */
  /* The person's ink. Its NAME needs nothing here — that reads
     --bc-heading-content, which this list already swaps four lines up. The
     other three are the component's own and would otherwise stay on the light
     half's greys, which is the accordion's lesson exactly.

     The role turns white rather than staying green, and that is the band's
     doing rather than the surface's: the source sets it in the accent on a
     light card and in plain white-70 on the dark one. Green would be legal
     here — it is the one half where green may be a word — but the band already
     has a green button on it, and a green line above a green button reads as
     one thing twice. */
  --bc-person-name-content: var(--bc-content-inverse);
  --bc-person-role-content: var(--bc-content-inverse-tertiary);
  --bc-person-detail-content: var(--bc-content-inverse-tertiary);
  --bc-person-contact-content: var(--bc-content-inverse-tertiary);
  --bc-accordion-item-border: var(--bc-border-inverse-weak);
  --bc-accordion-summary-content: var(--bc-content-inverse-secondary);
  --bc-accordion-summary-content-hover: var(--bc-link-inverse-content-hover);
  --bc-accordion-summary-content-open: var(--bc-content-inverse);
  --bc-accordion-panel-content: var(--bc-content-inverse-tertiary);
  }

  /* ── The event card's date band ──
     The day is the loudest thing on the card and should be: it is what the
     card is scanned by. Measured off the source rather than chosen — its day
     is text-4xl, which resolves to 2.25rem in its config, our 3xl.

     tabular-nums because the digits change every card and a proportional 1 is
     narrower than a 0: without it a column of dates visibly shifts width, which
     reads as a bug rather than as type.

     This lives in CSS rather than in the pattern's block attributes because the
     day was set with a font-size preset and rendered at 16px — WordPress
     kebab-cases a preset slug, so theme.json's "4xl" becomes the property
     --wp--preset--font-size--4-xl while the class written from the attribute
     stays has-4xl-font-size. The two never meet, the var resolves to nothing,
     and the declaration is dropped in silence. */
  .becom-card-band__date{display:flex;flex-direction:column;align-items:flex-start;
           gap:var(--bc-card-band-date-gap)}
  .becom-card-band__day{margin:0;
           font-size:var(--bc-card-band-day-font-size);
           font-weight:var(--bc-card-band-day-font-weight);
           line-height:var(--bc-card-band-day-line-height);
           font-variant-numeric:tabular-nums;
           color:var(--bc-card-band-day-content)}
  .becom-card-band__month{margin:0;
           padding:var(--bc-card-band-month-padding-block) var(--bc-card-band-month-padding-inline);
           border-radius:var(--bc-card-band-month-radius);
           background:var(--bc-card-band-month-bg);
           font-size:var(--bc-card-band-month-font-size);
           font-weight:var(--bc-card-band-month-font-weight);
           letter-spacing:var(--bc-card-band-month-tracking);
           text-transform:uppercase;
           color:var(--bc-card-band-month-content)}

  /* ── Avatar ──
     Initials on an accent disc, where a member has no portrait. inline-flex so
     it never stretches to the row it sits in, and flex:none so it keeps its
     size when the name beside it runs long. */
  .is-style-avatar{display:inline-flex;align-items:center;justify-content:center;
           flex:none;
           width:var(--bc-avatar-size);height:var(--bc-avatar-size);
           border-radius:var(--bc-avatar-radius);
           background:var(--bc-avatar-bg);
           box-shadow:var(--bc-avatar-shadow);
           color:var(--bc-avatar-content);
           font-size:var(--bc-avatar-font-size);
           font-weight:var(--bc-avatar-font-weight);
           line-height:1}
  .is-style-avatar > *{margin:0}

  /* ── Logo plate ──
     A logo arrives as artwork drawn for a light ground and cannot be
     recoloured, so on a dark card it brings its own surface. Fixed size, with
     the artwork contained inside it, so a row of plates lines up whatever
     shape each logo is. */
  .is-style-logo-plate{display:inline-flex;align-items:center;justify-content:center;
           flex:none;
           width:var(--bc-logo-plate-width);height:var(--bc-logo-plate-height);
           padding:var(--bc-logo-plate-padding);
           border-radius:var(--bc-logo-plate-radius);
           background:var(--bc-logo-plate-bg)}
  .is-style-logo-plate > *{margin:0;max-width:100%;max-height:100%}
  .is-style-logo-plate img{max-width:100%;max-height:100%;width:auto;height:auto;
           object-fit:contain}

  /* ── The review card's own parts ──
     The quote mark that opens it and the attribution that closes it. Classes
     rather than block styles: they are this composition's internals, the way
     the event card's date band is, and nothing else would pick them. */
  .becom-quote-mark{--bc-icon-size:var(--bc-review-quote-size);
           color:var(--bc-review-quote-content)}
  /* The attribution row. Both gaps and the rule live here rather than in block
     attributes: a layout blockGap cannot hold a token, because WordPress runs
     it through safecss_filter_attr, which strips var() and silently leaves the
     page's global gap behind. Two classes deep so they outrank core's own
     wp-container-* layout rule, which is a bare class and would otherwise come
     down to stylesheet order. */
  .wp-block-group.becom-review-attribution{
           gap:var(--bc-review-author-gap);
           padding-block-start:var(--bc-review-divider-gap);
           border-block-start:var(--bc-size-border) solid var(--bc-review-divider)}
  .wp-block-group.becom-review-author{gap:var(--bc-review-author-gap)}
  .becom-review-name{margin:0;
           font-size:var(--bc-review-name-font-size);
           font-weight:var(--bc-review-name-font-weight);
           line-height:var(--bc-review-name-line-height);
           color:var(--bc-heading-content)}
  .becom-review-role{margin-block-start:var(--bc-review-role-gap);margin-block-end:0;
           font-size:var(--bc-review-role-font-size);
           line-height:var(--bc-review-role-line-height);
           color:var(--bc-review-role-content)}

  /* ── Person ──
     A photograph, a name, what they do, and — for the team rather than the
     board — how to reach them. Internals of a composition, like the review
     card's attribution above.

     Everything sits inside .becom-person as the card's ONE child, and that is
     the point of the wrapper rather than tidiness. The card's own rhythm gives
     each of its children 8px, and a wp-block-buttons child 32 — both measured
     for a news card and both wrong for these three blocks, which want 16 and
     12. Outranking that rule takes four classes; giving it a single child to
     find takes none, and leaves this composition stating its own spacing
     without arguing with the card about it. */
  .becom-person > .becom-person__head{margin-block-start:0}
  .becom-person > .becom-person__contact{margin-block-start:var(--bc-person-contact-gap)}
  .becom-person > .becom-person__social{margin-block-start:var(--bc-person-social-gap)}

  .wp-block-group.becom-person__head{gap:var(--bc-person-gap)}
  .becom-person__photo{margin:0;flex:none}
  .becom-person__photo img{display:block;
           width:var(--bc-person-photo-size);
           height:var(--bc-person-photo-size);
           border-radius:var(--bc-person-photo-radius);
           object-fit:cover}
  /* photo = muted. On the wrapper, not the image: it is a property of the
     person as shown, and the board grid sets it once per card. */
  .becom-person--muted .becom-person__photo img{filter:var(--bc-person-photo-filter)}

  /* The identity stack. Element selectors carry the weight throughout this
     block: core's blockGap is a :where() rule worth one class, so a bare class
     of ours would TIE with it and leave the name-to-role gap to stylesheet
     order. The name and role are one pair and sit tight; only the company
     line, which the board carries and the team does not, steps away. */
  .becom-person__id > p{margin:0}
  .becom-person__id > p.becom-person__name{
           font-size:var(--bc-person-name-font-size);
           font-weight:var(--bc-person-name-font-weight);
           line-height:var(--bc-person-name-line-height);
           color:var(--bc-person-name-content)}
  .becom-person__id > p.becom-person__role{
           font-size:var(--bc-person-role-font-size);
           line-height:var(--bc-person-role-line-height);
           color:var(--bc-person-role-content)}
  .becom-person__id > p.becom-person__detail{
           margin-block-start:var(--bc-person-detail-gap);
           font-size:var(--bc-person-detail-font-size);
           line-height:var(--bc-person-detail-line-height);
           color:var(--bc-person-detail-content)}

  /* Element selectors carry the weight here: core's blockGap is a :where()
     rule at one class, and a bare class of ours would tie with it. */
  .becom-person__contact > p{margin:0;
           font-size:var(--bc-person-contact-font-size);
           color:var(--bc-person-contact-content)}
  .becom-person__contact > p + p{margin-block-start:var(--bc-person-contact-row-gap)}

  .wp-block-buttons.becom-person__social{gap:var(--bc-button-group-gap)}

  /* ── Person, as a band ──
     The closing "here is who to ask" panel. Four changes from the card above,
     and nothing else: a larger portrait, the two halves in a row, an eyebrow
     opening it, and Buttons where the card has a contact block.

     The panel is a Card on a dark section, so its surface, hairline and blur
     all arrive through the dark-context list without a token of its own. */
  /* Narrower than the page it closes. A rule rather than a contentSize on the
     block: safecss_filter_attr strips var() out of a layout attribute and the
     panel silently takes the wide width instead. */
  .wp-block-group.becom-person-band{gap:var(--bc-person-band-gap);
           max-width:var(--bc-person-band-max);margin-inline:auto}
  .becom-person-band .becom-person__photo img{
           width:var(--bc-person-photo-size-lg);
           height:var(--bc-person-photo-size-lg);
           box-shadow:0 0 0 var(--bc-size-border) var(--bc-person-band-photo-ring)}
  /* The identity stack is the card's, so the role, the detail line and their
     spacing all still apply; the band overrides the name and adds the gap
     above its actions. Three classes against the card rule's two. */
  .becom-person-band .becom-person__id > p.becom-person__name{
           font-size:var(--bc-person-band-name-font-size);
           font-weight:var(--bc-person-band-name-font-weight)}
  .becom-person-band .becom-person__id > .is-style-eyebrow-quiet{
           margin-block-end:var(--bc-person-band-eyebrow-gap)}
  .becom-person-band .becom-person__id > .wp-block-buttons{
           margin-block-start:var(--bc-person-band-actions-gap)}

  /* ── Tag ──
     Names what an item is: a format, a category, a fixed state. Everything
     about it is chosen so it does not read as an action.

     Not a Pill. A pill is fully round, and roundness is the whole of what a
     pill looks like — a "squared pill" is not a variant of one, it is a
     different thing wearing the name. The tag takes the smallest radius in the
     scale, which is also the rule for a nested corner: smaller inside than out.

     Not a button. The solid accent is the primary call to action and carries a
     gradient, a shadow and a lift; the tag is the quiet accent surface, flat,
     with no state of any kind. An event card has a real Inschrijven button a
     few pixels below it, and two green things competing to be pressed is the
     failure this avoids.

     It lives here rather than in style.css because the documentation page does
     not load style.css — and a component the docs cannot reach is a component
     the docs hand-build a copy of. */
  /* Geometry is shared by all four. The transparent border is what keeps them
     the same height: a variant that changes size when you change its colour is
     not a variant. */
  :is(.is-style-tag, .is-style-tag-status,
      .is-style-tag-glass, .is-style-tag-glass-status){
           display:inline-flex;align-items:center;gap:var(--bc-tag-gap);
           width:fit-content;margin-block:0;
           padding:var(--bc-tag-padding-block) var(--bc-tag-padding-inline);
           border:var(--bc-size-border) solid transparent;
           border-radius:var(--bc-tag-radius);
           font-size:var(--bc-tag-font-size);font-weight:var(--bc-tag-font-weight);
           letter-spacing:var(--bc-tag-tracking);text-transform:uppercase}

  /* surface = soft: an opaque fill, so it carries its own contrast and needs
     no rebinding on either half. */
  :is(.is-style-tag, .is-style-tag-status){
           background:var(--bc-tag-bg);color:var(--bc-tag-content);
           --bc-tag-dot:var(--bc-tag-dot-soft)}

  /* surface = glass: a wash behind a hairline. Rebound by a dark section,
     because a translucent fill has no colour of its own to keep. */
  :is(.is-style-tag-glass, .is-style-tag-glass-status){
           background:var(--bc-tag-glass-bg);
           border-color:var(--bc-tag-glass-border);
           color:var(--bc-tag-glass-content)}

  /* dot = on. */
  :is(.is-style-tag-status, .is-style-tag-glass-status)::before{
           content:"";display:block;flex:none;
           width:var(--bc-tag-dot-size);height:var(--bc-tag-dot-size);
           border-radius:var(--bc-radius-full);
           background:var(--bc-tag-dot)}

  /* A tag follows the alignment of the block it is, so a centred hero opens
     with a centred tag. A tag inside a card is untouched: it carries no
     alignment class, keeps inline-flex, and align-self would have dragged it
     out of the row it sits in.

     THE DISPLAY SWITCH IS THE WHOLE RULE, and leaving it out is why this was
     broken twice. An auto inline-margin only centres a BLOCK-level box; on the
     inline-flex the base rule sets, both margins compute to 0 and the
     declaration does nothing at all. Nothing failed — the build was clean, all
     three lints passed, and the hero shipped with a left-aligned tag under a
     centred heading. width:fit-content on the base rule is what stops the flex
     box then filling the line. npm run lint:css now fails on this pattern. */
  :is(.is-style-tag, .is-style-tag-status,
      .is-style-tag-glass, .is-style-tag-glass-status):is(
      .has-text-align-center, .has-text-align-right){
           display:flex}
  :is(.is-style-tag, .is-style-tag-status,
      .is-style-tag-glass, .is-style-tag-glass-status).has-text-align-center{
           margin-inline:auto}
  :is(.is-style-tag, .is-style-tag-status,
      .is-style-tag-glass, .is-style-tag-glass-status).has-text-align-right{
           margin-inline:auto 0}

  /* The fill is opaque and carries its own contrast, so it needs no rebinding
     on a dark surface. That is the point of a soft green rather than a wash: a
     translucent tint would take the purple band's colour and stop being green. */

  /* ── Filter ──
     A control whose own state is the payload — the fourth answer in the space
     the Tag, the Tabs and the Button already share. Clicking one changes
     nothing but itself; the list below reads the answer.

     It is a real <input type="radio"> inside its <label>, not a div with a
     click handler. Keyboard (arrow keys move within a name group), screen
     readers, form submission and the whole selected visual come free, and
     :has(input:checked) means there is no state code anywhere.

     The input is hidden rather than removed: it is still focusable, and the
     focus ring is drawn on the label, which is the box the user can see.

     Here rather than in style.css for the Tag's reason — the documentation
     page does not load style.css, and a component the docs cannot reach is a
     component the docs hand-build a second copy of. */
  .becom-filter{position:relative;display:inline-flex;align-items:center;
           gap:var(--bc-filter-gap);
           margin:0;cursor:pointer;-webkit-user-select:none;user-select:none;
           padding:var(--bc-filter-padding-block) var(--bc-filter-padding-inline);
           border:var(--bc-size-border) solid var(--bc-filter-border);
           border-radius:var(--bc-filter-radius);
           background:var(--bc-filter-bg);color:var(--bc-filter-content);
           font-size:var(--bc-filter-font-size);
           font-weight:var(--bc-filter-font-weight);
           line-height:var(--bc-filter-line-height);
           transition:var(--bc-filter-transition)}
  .becom-filter input{position:absolute;width:1px;height:1px;margin:0;padding:0;
           opacity:0;-webkit-appearance:none;appearance:none;pointer-events:none}

  /* icon = on. A filter carrying its own icon leads with it. */
  .becom-filter .becom-icon{--bc-icon-size:var(--bc-filter-icon-size);flex:none}

  /* Hover is a preview of the selected state rather than a generic surface
     response — a green ground two ramp steps short of the answer, under the
     accent edge the answer also wears. bg-sunken was the tab's hover and the
     outline button's, which is right for a control that acts on something else
     and wrong for one that changes itself.

     Both properties move together in every state, which is what lets the ring
     come out: with no marker, the fill alone carries selection, and a ground
     is the thing that reads worst at a glance across a near-white page. */
  .becom-filter:hover{background:var(--bc-filter-bg-hover);
           border-color:var(--bc-filter-border-hover);
           color:var(--bc-filter-content-hover)}
  .becom-filter:has(input:focus-visible){box-shadow:var(--bc-filter-focus-shadow);
           outline:none}

  /* selected = on. */
  .becom-filter:has(input:checked){background:var(--bc-filter-selected-bg);
           border-color:var(--bc-filter-selected-border);
           color:var(--bc-filter-selected-content)}
  /* A selected filter is already the answer; hover must not repaint it, or
     pointing at the current choice looks like it is about to change. It has to
     restate the border as well now that the border is a state — otherwise the
     hover rule above wins on it and the selected chip loses its own edge under
     the pointer. */
  .becom-filter:has(input:checked):hover{background:var(--bc-filter-selected-bg);
           border-color:var(--bc-filter-selected-border);
           color:var(--bc-filter-selected-content)}

  /* ── The bar, and its sets ──
     A <p> and a div with role="radiogroup" rather than <fieldset>/<legend>. A
     legend is not a reliable flex item — it has its own rendering rules in
     every engine — and the label sits BESIDE its chips here, not above them.
     The role and aria-labelledby announce the group just as well. */
  .becom-filterbar{display:flex;flex-wrap:wrap;
           gap:var(--bc-filter-set-gap) var(--bc-filter-bar-gap)}
  .becom-filterset{display:flex;flex-wrap:wrap;align-items:center;
           gap:var(--bc-filter-set-gap)}
  .becom-filterset__label{margin:0;
           font-size:var(--bc-eyebrow-font-size);
           font-weight:var(--bc-eyebrow-font-weight);
           letter-spacing:var(--bc-eyebrow-tracking);
           text-transform:uppercase;
           color:var(--bc-eyebrow-content)}
  .becom-filterset__options{display:flex;flex-wrap:wrap;
           gap:var(--bc-filter-group-gap)}

  /* The submit is the no-JS fallback. The script removes it rather than hiding
     it: a control hidden by CSS is still in the tab order. */
  .becom-filterbar__apply{margin:0}

  @media (prefers-reduced-motion: reduce){
    .becom-filter{transition:none}
  }

  /* ── Accordion ──
     A stack of native <details> inside one card. No JavaScript and no state
     code: the element owns the open state, the keyboard and the screen-reader
     announcement, and the whole selected visual is [open].

     Here rather than in style.css for the Tag's and the Filter's reason — the
     documentation page does not load style.css, and a component the docs
     cannot reach is a component the docs hand-build a second copy of. That is
     also why the container reads the CARD tokens rather than carrying the Card
     block style: .is-style-card lives in style.css, so an accordion built on
     it would be a bare stack of rules on the one page meant to demonstrate it.
     Reading the tokens gets the same surface AND the same rebinding, because
     the dark-context list above already swaps --bc-card-bg and its two
     neighbours. */
  .becom-accordion{background:var(--bc-card-bg);
           border:var(--bc-size-border) solid var(--bc-card-border);
           border-radius:var(--bc-card-radius);
           box-shadow:var(--bc-card-shadow);
           padding-inline:var(--bc-accordion-padding-inline);
           padding-block:0}

  /* Core gives every flow child the global blockGap. The rule between two
     items is the separator here, so that gap has to come off or each border
     floats in 24px of nothing. Written against the item class rather than a
     universal selector so it outranks core's :where() rule rather than tying
     with it and leaving the result to stylesheet order. */
  .becom-accordion > .is-style-accordion{margin-block-end:0}
  .becom-accordion > .is-style-accordion:not(:first-child){margin-block-start:0}

  .is-style-accordion{border-block-end:var(--bc-size-border) solid
           var(--bc-accordion-item-border)}

  /* The source rules off every item including the last, which lands a hairline
     directly on top of the card's own border and reads as a double line. */
  .becom-accordion > .is-style-accordion:last-child{border-block-end:0}

  .is-style-accordion > summary{display:flex;align-items:center;
           justify-content:space-between;
           gap:var(--bc-accordion-summary-gap);
           padding-block:var(--bc-accordion-summary-padding-block);
           cursor:pointer;list-style:none;
           font-size:var(--bc-accordion-summary-font-size);
           font-weight:var(--bc-accordion-summary-font-weight);
           line-height:var(--bc-accordion-summary-line-height);
           color:var(--bc-accordion-summary-content);
           transition:var(--bc-accordion-transition)}
  .is-style-accordion > summary::-webkit-details-marker{display:none}

  /* Hover and open are the Tab's two answers, minus the fill — and the fill is
     dropped for a reason rather than for economy. A tab is a chip carrying its
     own inline padding, so a ground can be painted behind it; a summary is a
     full-width row sitting inside the card's padding, so the same fill either
     touches the text or bleeds past the rule below it. Colour is what is left,
     and the chevron is what makes it an affordance rather than a colour.

     Never an underline. The source has one here, and a summary is a control,
     not a link. */
  .is-style-accordion > summary:hover{color:var(--bc-accordion-summary-content-hover)}
  .is-style-accordion[open] > summary{color:var(--bc-accordion-summary-content-open)}

  .is-style-accordion > summary:focus-visible{
           outline:var(--bc-accordion-focus-outline-width) solid
                   var(--bc-accordion-focus-outline-color);
           outline-offset:var(--bc-accordion-focus-outline-offset)}

  /* The marker is the component's, so it is a token and a mask rather than an
     icon class an author would have had to remember to type. currentColor
     means it lights up with the text beside it in all three states. */
  .is-style-accordion > summary::after{content:"";flex:none;
           width:var(--bc-accordion-marker-size);
           height:var(--bc-accordion-marker-size);
           background:currentColor;
           -webkit-mask:var(--bc-accordion-marker) center / contain no-repeat;
           mask:var(--bc-accordion-marker) center / contain no-repeat;
           transition:var(--bc-accordion-marker-transition)}
  .is-style-accordion[open] > summary::after{
           transform:rotate(var(--bc-accordion-marker-rotate))}

  .is-style-accordion > :not(summary){
           font-size:var(--bc-accordion-panel-font-size);
           line-height:var(--bc-accordion-panel-line-height);
           color:var(--bc-accordion-panel-content)}
  /* The summary's own padding-block is the gap above the panel; core would add
     the page's blockGap on top of it. */
  .is-style-accordion > summary + *{margin-block-start:0}
  .is-style-accordion[open]{padding-block-end:var(--bc-accordion-panel-padding-bottom)}

  @media (prefers-reduced-motion: reduce){
    .is-style-accordion > summary,
    .is-style-accordion > summary::after{transition:none}
  }

  /* ── Button — icon ──
     The same button carrying a mask, not a second component. Three positions,
     and the icon itself is a becom-icon--* class, so the button and the 26-icon
     set share one list; nobody picks an icon here any more than anywhere else,
     because a pattern brings its own.

     ::before, never ::after. A button's ::after is already spoken for — it is
     the shine sweep, absolutely positioned across the whole button and parked
     at translate(-120%) until hover, inside the button's own overflow: hidden.
     A second rule that reuses it gets an icon that is off-screen and clipped:
     no error, nothing painted, and a reserved gap where the icon should be.

     It lives here rather than in style.css because the documentation page does
     not load style.css, and it has to reach both markups — the <a> inside the
     block's wrapper, which is where WordPress puts a className, and the .btn
     the preview renders, which carries the class itself. */
  :is(.becom-button--icon-left, .becom-button--icon-right) > .wp-block-button__link,
  .btn:is(.becom-button--icon-left, .becom-button--icon-right){
           display:inline-flex;align-items:center;justify-content:center;
           gap:var(--bc-button-icon-gap)}

  :is(.becom-button--icon-left, .becom-button--icon-right) > .wp-block-button__link::before,
  .btn:is(.becom-button--icon-left, .becom-button--icon-right)::before{
           content:"";display:block;flex:none;
           width:var(--bc-button-icon-size);height:var(--bc-button-icon-size);
           background:currentColor;
           -webkit-mask:var(--bc-icon-mask) center / contain no-repeat;
           mask:var(--bc-icon-mask) center / contain no-repeat}

  /* position = right. The icon is still the ::before — order moves it past the
     label rather than a second pseudo-element being invented to hold it. */
  .becom-button--icon-right > .wp-block-button__link::before,
  .btn.becom-button--icon-right::before{order:1}

  /* position = only. The button squared, and the label pushed out of the box
     rather than removed: text-indent: 100% starts it at the right edge and the
     button's own overflow: hidden clips it, so it stays in the accessibility
     tree and a screen reader still says which network this is. An icon-only
     button is the label hidden, not absent — aria-label would be dropped the
     next time the block was saved, and a button with no name at all is the one
     failure this component must not ship.

     display: block, not flex: the icon is placed absolutely and the indent is
     a block-box technique. */
  .becom-button--icon-only > .wp-block-button__link,
  .btn.becom-button--icon-only{
           display:block;box-sizing:border-box;
           width:var(--bc-button-icon-only-box);
           height:var(--bc-button-icon-only-box);
           padding:0;
           text-indent:100%;white-space:nowrap;overflow:hidden}

  .becom-button--icon-only > .wp-block-button__link::before,
  .btn.becom-button--icon-only::before{
           content:"";position:absolute;inset:0;text-indent:0;
           background:currentColor;
           -webkit-mask:var(--bc-icon-mask) center /
                        var(--bc-button-icon-only-icon-size) no-repeat;
           mask:var(--bc-icon-mask) center /
                var(--bc-button-icon-only-icon-size) no-repeat}

  /* size = small, and only on an icon-only button.
     The person card's social row is 32px, where the icon-only box is 44.

     NOT the Compact block style, which was the obvious move and is the one
     DESIGN-RULES already forbade: compact paints a padding ladder onto the
     link at a higher specificity than the icon-only box rule, so the two
     fight rather than compose — and it lives in style.css, which the
     documentation page does not load, so a compact icon-only button would
     have come out one size here and another there. That is the media card's
     bug with a different name.

     This rebinds the two box tokens and touches nothing else, so it composes
     with every variant, both surfaces and the whole hover. One declaration,
     the same move the dark-context list makes on a surface. */
  .becom-button--icon-only-sm,
  .btn.becom-button--icon-only-sm{
           --bc-button-icon-only-box:var(--bc-button-icon-only-box-sm);
           --bc-button-icon-only-icon-size:var(--bc-button-icon-only-icon-size-sm)}

  /* ── Button — which sweep ──
     Every button sweeps. What changes is the colour, and the button's own
     ground decides it: a highlight is light on a dark ground and dark on a
     light one. One colour for both leaves half the buttons carrying a sweep
     they cannot show, which is the same failure as one that was never applied
     and much harder to notice — the light-half outline button swept white over
     the page's own white, and secondary-inverse swept white over its elevated
     white, from the moment the interaction was ported.

     Primary and secondary keep the default: they are picked from the block's
     Colour panel, so there is no class to hang a rebinding on, and their fills
     are dark. The two that need saying are the ones with a class.

     Rebound onto --bc-button-shine rather than restyling the ::after, so a
     button still has exactly one sweep and the ground says which.

     An outline button has no fill, so its ground is the section's — which is
     why it reads --bc-button-outline-shine rather than naming a colour: the
     dark-context list swaps that token to the light sweep, beside the -bg /
     -bg-hover / -blur it already swaps. One list, as ever.

     Doubled up as .btn.btn--*, because this block is emitted before the docs
     stylesheet and a bare .btn-- class only ties with .btn: order would decide
     it, and order puts the base rule last. The theme's own selectors already
     outrank .wp-element-button on their own. */
  .wp-block-button.is-style-outline > .wp-block-button__link,
  .btn.btn--outline,
  .btn.btn--on-inverse{--bc-button-shine:var(--bc-button-outline-shine)}

  /* Secondary on an inverse surface is the other way round: its own ground is
     the elevated white, whatever the section behind it is doing. Keyed off the
     surface rather than the variant name, because that is what actually decides
     it — any button painted with bg-elevated has a white ground, whatever it
     calls itself. */
  .wp-element-button.has-bg-elevated-background-color,
  .btn.btn--secondary-inverse{--bc-button-shine:var(--bc-button-shine-dark)}

  /* ── Site bar ────────────────────────────────────────────────────────
     Shared by the WordPress header part and this preview's own bar. They are
     two different navs — the site's ten links against the documentation's
     three — so they do not share markup. They share the tokens and every
     visual decision below, which is the half that must not drift.

     No background of its own: it sits over the hero, so a single gradient
     covers both. Two stacked gradients restart and leave a seam. */
  /* ── Where the two bars sit ──
     The SITE header stays absolute over the hero: it is one page's chrome, it
     has no ground of its own, and a reader who wants another page uses it at
     the top or opens the panel.

     The DOCUMENTATION bar is fixed, because these four pages are one library
     and crossing between them from the middle of a long one is the whole job
     of that row. Fixed rather than sticky: sticky needs the element in flow,
     and this one is drawn OVER the hero — the hero reserves its height in
     padding — so in flow at scroll 0 it would sit on the page's own light
     ground with white text on it.

     The ground arrives the moment the page moves. At rest the bar is over the
     top of the hero and the hero is its ground; one pixel of scroll and it is
     over content instead, with the hero's own heading sliding under it. What
     makes that affordable is the colour: --bc-sitebar-stuck-bg is the SUNKEN
     dark rather than the base, so it does not read as a lighter band across
     the hero's gradient. It is opaque, so nothing shows through it and there
     is no backdrop filter here. See tokens.css. docs.js toggles the class. */
  .sitebar{position:absolute;top:0;left:0;right:0;z-index:50;
           padding-block:var(--bc-sitebar-padding-block);
           /* The bar's actions are smaller than the page's, so it rebinds the
              button padding rather than adding a third size tier or a block
              style nobody would know to pick. See tokens.css. */
           --bc-button-padding-block:var(--bc-sitebar-button-padding-block);
           --bc-button-padding-inline:var(--bc-sitebar-button-padding-inline)}
  .sitebar--docs{position:fixed;transition:var(--bc-sitebar-stuck-transition);
    /* Present and transparent at rest, so filling the bar does not also make
       it a pixel taller — see the transition token. */
    border-bottom:var(--bc-size-border) solid transparent}
  .sitebar--docs.is-stuck{background:var(--bc-sitebar-stuck-bg);
    border-bottom-color:var(--bc-sitebar-stuck-border)}
  @media (prefers-reduced-motion:reduce){ .sitebar--docs{transition:none} }

  .sitebar__inner{display:flex;align-items:center;gap:var(--bc-sitebar-gap)}
  /* The bar is a Group, and WordPress marks a Group is-layout-flow and gives
     every child after the first a 24px margin-block-start. Those margins do not
     stop applying because the element was made a flex row here — they offset
     each item inside its own line box, so the logo sat 11px above the nav and
     the bar measured 109px where the source is 78. Nothing in the markup looks
     wrong; it only shows up measured. Core's rule is a :where(), so a single
     class outranks it. */
  .sitebar__inner > *{margin-block:0}
  /* The DOCUMENTATION nav sits beside the mark, at the container's left edge,
     because the tab rail under it starts there too — two stacked rows of
     navigation reading from the same margin rather than from two different
     ones. It was centred on the container, which put a 24px gap between the
     library row and the page row that neither of them meant.

     Nothing is needed to left-pack a flex row, so this is the absence of a
     rule: the logo does not grow, the nav takes its content, and there is no
     spacer. The site header is a different row and still pushes its nav to
     the right. */

  /* The mark, painted rather than carried as an <img>. A template part cannot
     run get_theme_file_uri(), and a literal path is /app/themes on Bedrock and
     /wp-content/themes everywhere else; a data URI also resolves identically
     here and in WordPress, where a relative one cannot — the two roots differ,
     which is the same reason the logo plate's mark is inlined. The ratio is
     the artwork's, not a design decision. */
  .logo{display:block;flex:0 0 auto;
        height:var(--bc-sitebar-logo-height);
        aspect-ratio:var(--bc-sitebar-logo-ratio);
        background:var(--bc-sitebar-logo-image) 0 50%/contain no-repeat;
        text-decoration:none}
  .becom-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
                 overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

  /* ── The links, in both navs ──
     One rule for the documentation's .sitenav and the site header's core
     Navigation, so a change lands on both. The core half is written one class
     deeper than core's own (0,3,0 against its (0,2,0)) because core paints
     color:inherit on that element and stylesheet order between a block's
     inline styles and the theme's is not ours to rely on. */
  .sitenav,
  .sitebar .sitebar__nav .wp-block-navigation__container{
    display:flex;align-items:center;gap:var(--bc-nav-link-gap);
    margin:0;padding:0;list-style:none}
  /* The documentation bar wraps; the site header's must not.

     The header collapses to a toggle below its switch, so its row never has to
     fit more than it can — and its nowrap is a deliberate block attribute:
     letting it wrap would hide the breakpoint rather than fix it. The docs bar
     has no toggle and no way to collapse, so at a phone width its links simply
     ran off the right of the screen and took the page's scrollbar with them.

     It was doing that with three links, at x=432 in a 375 viewport. Adding
     Chrome took it to 505, which is what turned a recorded finding into one
     worth fixing: the bar is the only thing linking these pages to each other,
     so a link you have to scroll sideways to reach is a page you cannot get
     to. min-width:0 is what lets the flex item shrink far enough to wrap at
     all — its default min-width is auto, which is its content. */
  .sitenav{flex-wrap:wrap;min-width:0}
  /* The way from the library to the MCP setup guide and back. It is a button
     rather than a fifth link because it leaves the design system for a page
     that is not documentation, and it takes the far end of the row for the
     same reason the site header's actions do: links read from the left, the
     one thing to do sits at the right. The same core button markup as the
     header's Log in, so it is the same outline button on the same dark bar. */
  .sitebar__setup{flex:0 0 auto;margin-inline-start:auto}
  /* ...and below sm it wraps without the logo beside it. Wrapping alone traded
     one bug for another: at 375 the four links went to three rows, the bar grew
     to 152px, and --bc-pagehero-padding-top is the height of a ONE-row bar plus
     air — so the hero's eyebrow came out underneath it. Measured at 320 / 360 /
     375 / 414 the bar's bottom was 190 / 152 / 152 / 114 against an eyebrow at
     151, so it collided below 414 and nowhere above.

     Dropping the mark gives the links the 127px it was taking and holds the bar
     to two rows, which clears the hero at every width down to 320 — and costs
     nothing, because the docs logo points at Styleguide and Styleguide is the
     first link in the row. Scoped to .sitebar--docs; the site header's mark
     stays at every width, beside its toggle, the way the source's does. */
  @media (max-width:639.98px){
    .sitebar--docs .logo{display:none}
  }
  .sitenav a,
  .sitebar .sitebar__nav .wp-block-navigation-item__content{
    /* There is no global border-box reset on the front end — only inside
       docs.css, which the site does not load. A panel link is width:100% with
       12px of padding, so as a content-box it came out 366 wide inside a 342
       column and hung off the left edge. */
    box-sizing:border-box;
    display:block;white-space:nowrap;text-decoration:none;
    padding:var(--bc-nav-link-padding-block) var(--bc-nav-link-padding-inline);
    border-radius:var(--bc-nav-link-radius);
    font-size:var(--bc-nav-link-font-size);
    line-height:var(--bc-nav-link-line-height);
    color:var(--bc-nav-link-content)}
  .sitenav a:hover,
  .sitebar .sitebar__nav .wp-block-navigation-item__content:hover{
    background:var(--bc-nav-link-bg-hover);
    color:var(--bc-nav-link-content-hover)}
  /* The preview marks the current page with aria-current. WordPress renders the
     bar from a static template part, which cannot know the page, so there it
     comes off a body class instead. */
  .sitenav a[aria-current],
  body.becom-page-styleguide .sitenav a[href="/styleguide/"],
  body.becom-page-components .sitenav a[href="/components/"],
  body.becom-page-sections   .sitenav a[href="/sections/"],
  body.becom-page-chrome     .sitenav a[href="/chrome/"]{
    color:var(--bc-content-inverse);
    background:var(--bc-bg-inverse-elevated);
    font-weight:var(--bc-font-weight-semibold)}

  /* ── The site header's own layout ──
     The nav takes the rest of the row and pushes its links to the right, so
     the bar reads logo · links · actions the way the source's does. */
  .sitebar__nav{flex:1 1 auto;min-width:0}
  /* The actions are a Group now, not a Buttons block — the language switcher
     sits in the cluster beside them and Buttons takes only buttons. So the
     flex and the flow-margin reset are ours to write, as on .sitebar__inner. */
  .sitebar__actions{display:flex;align-items:center;flex:0 0 auto;
                    gap:var(--bc-sitebar-actions-gap)}
  .sitebar__actions > *{margin-block:0}
  .sitebar__buttons{gap:var(--bc-sitebar-actions-gap)}
  /* Core's button wrapper is a block whose child is an inline-block, so it
     carries the baseline's descender space: the wrapper measures 45 where the
     button inside it is 38. Everywhere else that is invisible padding inside a
     centred row; here it set the height of the whole bar, 7px over the
     source's 78. Making the wrapper a flex box drops the line box. */
  .sitebar__buttons .wp-block-button,
  .navmenu__actions .wp-block-button{display:flex}
  .sitebar .wp-block-navigation__responsive-container-content{
    justify-content:flex-end}

  /* ── The language switcher ──
     A disclosure, not a modal — so unlike the overlay menu this genuinely IS a
     <details>, and the whole control works with no JavaScript at all. lang.js
     only adds the two dismissals a menu is expected to have and a <details>
     does not: Escape, and a click outside. */
  .becom-lang-nav{display:flex}
  .becom-lang{position:relative}
  .becom-lang__trigger{display:inline-flex;align-items:center;
        gap:var(--bc-lang-gap);cursor:pointer;list-style:none;
        padding:var(--bc-lang-padding-block) var(--bc-lang-padding-inline);
        border:var(--bc-size-border) solid var(--bc-lang-border);
        border-radius:var(--bc-lang-radius);
        font-size:var(--bc-lang-font-size);font-weight:var(--bc-lang-font-weight);
        line-height:var(--bc-lang-line-height);
        color:var(--bc-lang-content);white-space:nowrap}
  /* Safari draws its own disclosure triangle through a shadow-DOM pseudo that
     list-style alone does not reach, and it would sit inside the pill. */
  .becom-lang__trigger::-webkit-details-marker{display:none}
  .becom-lang__trigger:hover{background:var(--bc-lang-bg-hover)}
  .becom-lang__trigger .becom-icon{--bc-icon-size:var(--bc-lang-icon-size)}

  /* The menu brings its own light surface onto a dark bar, so it carries its
     own ink — the same licence the review card has to choose the inverse
     gradient, and why nothing here needs the dark-context rebinding. */
  .becom-lang__menu{box-sizing:border-box;
        position:absolute;top:calc(100% + var(--bc-lang-menu-offset));
        right:0;z-index:60;margin:0;list-style:none;
        min-width:var(--bc-lang-menu-min);
        padding:var(--bc-lang-menu-padding);
        background:var(--bc-lang-menu-bg);
        border:var(--bc-size-border) solid var(--bc-lang-menu-border);
        border-radius:var(--bc-lang-menu-radius);
        box-shadow:var(--bc-lang-menu-shadow)}
  .becom-lang__item{display:flex;align-items:center;justify-content:space-between;
        gap:var(--bc-lang-item-gap);text-decoration:none;
        padding:var(--bc-lang-item-padding-block) var(--bc-lang-item-padding-inline);
        border-radius:var(--bc-lang-item-radius);
        font-size:var(--bc-lang-item-font-size);
        line-height:var(--bc-leading-control);
        color:var(--bc-lang-item-content)}
  .becom-lang__item:hover,
  .becom-lang__item:focus-visible{background:var(--bc-lang-item-bg-hover);
        color:var(--bc-lang-item-content-hover)}
  /* The check marks which language you are already in, so it is the brand
     purple rather than the row's ink — and it keeps that on the green hover,
     where the row's own colour changes underneath it. */
  .becom-lang__check{color:var(--bc-lang-check);
        --bc-icon-size:var(--bc-lang-check-size);flex:none}

  /* The same languages as a flat list, in the mobile panel. A second dropdown
     inside a full-screen menu is a control asking to be opened when there is a
     whole screen to show the answer on — so the panel shows it, and the two
     presentations share their data rather than their markup. */
  /* The slot is core's <li>; it must not take the panel link styling that its
     siblings in the links list do, and it carries no bullet of its own. */
  .becom-langlist-slot{display:block;list-style:none}
  .becom-langlist{margin-top:var(--bc-langlist-margin-top);
        padding-inline:var(--bc-langlist-padding-inline)}
  .becom-langlist ul{display:flex;flex-direction:column;
        gap:var(--bc-langlist-gap);margin:0;padding:0;list-style:none}
  .becom-langlist__item{box-sizing:border-box;
        display:flex;align-items:center;gap:var(--bc-langlist-item-gap);
        text-decoration:none;
        padding:var(--bc-langlist-item-padding-block) var(--bc-langlist-item-padding-inline);
        border-radius:var(--bc-langlist-item-radius);
        font-size:var(--bc-langlist-item-font-size);
        font-weight:var(--bc-langlist-item-weight);
        line-height:var(--bc-leading-control);
        color:var(--bc-langlist-item-content)}
  .becom-langlist__item .becom-icon{--bc-icon-size:var(--bc-langlist-icon-size);flex:none}
  .becom-langlist__item:hover,
  .becom-langlist__item:focus-visible{background:var(--bc-langlist-item-bg-hover);
        color:var(--bc-langlist-item-content-hover)}
  .becom-langlist__item[aria-current]{font-weight:var(--bc-langlist-current-weight);
        color:var(--bc-langlist-current-content);
        background:var(--bc-langlist-current-bg)}

  /* ── The toggle and the close button ──
     One control at two labels: same box, same corner, same glass hover. The
     source draws them identically and swaps only the glyph. Core sizes its
     glyph at 24; the source's is 20. */
  .sitebar .wp-block-navigation__responsive-container-open,
  .sitebar .wp-block-navigation__responsive-container-close{
    display:flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:var(--bc-navtoggle-box);height:var(--bc-navtoggle-box);
    border-radius:var(--bc-navtoggle-radius);
    color:var(--bc-navtoggle-content)}
  .sitebar .wp-block-navigation__responsive-container-open:hover,
  .sitebar .wp-block-navigation__responsive-container-close:hover{
    background:var(--bc-navtoggle-bg-hover)}
  .sitebar .wp-block-navigation__responsive-container-open svg,
  .sitebar .wp-block-navigation__responsive-container-close svg{
    width:var(--bc-navtoggle-icon-size);height:var(--bc-navtoggle-icon-size)}

  /* ── The overlay ──
     A modal dialog, because that is what the source is: role="dialog",
     aria-modal="true", and the page behind it does not scroll. Core supplies
     all three plus Escape, the focus move in and the focus return — which is
     the whole reason this is core's Navigation and not a <details>, and a
     disclosure could not have been any of it.

     The ground is the dark recess at the alpha the source uses, over a blur,
     so the hero stays faintly visible behind. Written past core's own
     has-*-background-color class, which is opaque. */
  .sitebar .sitebar__nav
    .wp-block-navigation__responsive-container.is-menu-open:not(.hidden-by-default){
    background:var(--bc-navmenu-bg);
    -webkit-backdrop-filter:blur(var(--bc-navmenu-blur));
    backdrop-filter:blur(var(--bc-navmenu-blur));
    padding:var(--bc-sitebar-padding-block) var(--bc-navmenu-padding-inline)
            var(--bc-navmenu-padding-bottom)}
  /* Core does not lock the page behind its overlay; the source does. */
  html:has(.wp-block-navigation__responsive-container.is-menu-open){overflow:hidden}
  /* The close button needs no placing: core pins it to the top right of the
     responsive-dialog, which is the offset parent and is already inset by the
     panel's own padding — so it lands exactly where the toggle was and the
     panel opens in place. Repeating the padding here pushed it 24px in and
     20px down, which is the kind of thing that only shows up measured. */
  /* The panel opens with the mark, the way the source's does — and decorative
     there too: the source's is a bare <img>, not a link, because the close
     button is all that row needs. Painted rather than authored because core's
     overlay carries the Navigation block's own inner blocks and nothing else,
     and a site-logo block would want the DB's custom-logo option. It is
     centred on the close button, which is 4px taller. */
  .sitebar .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content::before{
    content:"";position:absolute;left:0;
    top:calc((var(--bc-navtoggle-box) - var(--bc-sitebar-logo-height)) / 2);
    height:var(--bc-sitebar-logo-height);
    aspect-ratio:var(--bc-sitebar-logo-ratio);
    background:var(--bc-sitebar-logo-image) 0 50%/contain no-repeat}
  .sitebar .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content{
    align-items:stretch;justify-content:flex-start;
    gap:var(--bc-navmenu-gap);
    padding-top:calc(var(--bc-navtoggle-box) + var(--bc-sitebar-padding-block))}
  .sitebar .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container{
    display:flex;flex-direction:column;align-items:stretch;
    gap:var(--bc-navmenu-gap)}
  /* A panel link is a full-width row, not the bar's inline pill — bigger type,
     more air, and it fills the width so the whole row answers a thumb. Written
     past core's own padding:0 on this element, which is why it is this long. */
  .sitebar .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content.wp-block-navigation-item__content{
    display:block;width:100%;
    padding:var(--bc-navmenu-link-padding-block) var(--bc-navmenu-link-padding-inline);
    border-radius:var(--bc-navmenu-link-radius);
    font-size:var(--bc-navmenu-link-font-size);
    line-height:var(--bc-navmenu-link-line-height);
    color:var(--bc-navmenu-link-content)}
  .sitebar .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content.wp-block-navigation-item__content:hover{
    background:var(--bc-navmenu-link-bg-hover);
    color:var(--bc-navmenu-link-content-hover)}
  /* The panel's copy of the actions: stacked, full width, and only ever seen
     here — at desktop the bar carries its own pair a few pixels away. */
  .navmenu__actions{margin-top:var(--bc-navmenu-actions-gap);
                    gap:var(--bc-sitebar-actions-gap)}
  .navmenu__actions .wp-block-button,
  .navmenu__actions .wp-block-button__link{width:100%;text-align:center}

  /* ── Where the bar changes shape ──
     1328px, which is --bc-container-outer: the width at which the bar reaches
     its designed size and stops changing. Core switches at 600 and the source
     at xl (1280), and 1280 is measurably too narrow for this row — the ten
     links need 855px, the logo 127 and the actions 242, which with the gaps is
     1274 against the 1232 that a 1280 viewport leaves inside the padding.

     THE SOURCE DOES NOT FIT THERE EITHER. At exactly 1280 its actions run to
     x=1303 against a 1256 edge, so its own Log in button hangs 47px off the
     right of the screen. Ours failed the other way, the nav overflowing left
     across the logo, because our actions are pinned to the edge instead. Both
     are broken; copying the breakpoint would only have copied the break.

     The language pill is what tipped it — without those 72px the row fits 1280
     with room. It stays visible at every width rather than being dropped in a
     band, because below the switch the nav is a toggle and a control that
     vanishes between 1280 and 1328 would be unreachable exactly there.

     Caveat worth keeping: the theme loads no webfont, so the link widths this
     number came from are the fallback's and move from machine to machine. The
     fit was measured, not calculated, and it should be re-measured the day a
     font is actually loaded. Three rules move the switch, each written one
     class deeper than core's so none depends on file order. */
  @media (min-width:600px) and (max-width:1327.98px){
    .sitebar .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){display:none}
    .sitebar .wp-block-navigation__responsive-container-open:not(.always-shown){display:flex}
  }
  /* Below xl the nav is one button, and the source puts it at the end of the
     row — after Word lid, not before it. The DOM keeps the nav in the middle
     so that the DESKTOP tab order is the visual one: ten links reached before
     the two actions. Below xl that reverses into a single button reached one
     stop early, which is the cheaper of the two mismatches. */
  @media (max-width:1327.98px){
    /* Direct children only. Core copies the block's className onto the <ul>
       inside the overlay as well as onto the <nav>, so a bare .sitebar__nav
       put order:3 on the panel's link list too — and the panel's copy of the
       actions, still at 0, jumped above all ten links. */
    .sitebar__inner > .sitebar__nav{order:3;flex:0 0 auto}
    .sitebar__inner > .sitebar__actions{order:2;margin-inline-start:auto}
    /* The actions and the toggle are one cluster at the end of the row, the
       way the source groups them — so the row's gap closes to the actions'
       own. The logo is held apart by the auto margin instead, not by the gap.
       Without this the nav kept flex:1, ate the middle of the bar, and left
       Word lid stranded beside the logo with the toggle far off to the right. */
    .sitebar__inner{gap:var(--bc-sitebar-actions-gap)}
  }
  /* Above it there is no panel, so both of the panel's own parts have to go:
     the toggle, and the copy of the actions that would otherwise be a second
     Word lid in the same row as the first. Both are written past core — its
     .wp-block-buttons.is-layout-flex is (0,2,0) and its own desktop rule for
     the toggle is (0,2,0), and this file's base styling for the toggle sets
     display:flex, which would beat it. Doubling the class is how a hide wins
     without inventing a wrapper to hang specificity on. */
  @media (min-width:1328px){
    .sitebar .wp-block-navigation__responsive-container-open{display:none}
    .navmenu__actions.navmenu__actions{display:none}
    /* The panel's language list, beside the panel's copy of the actions: both
       belong to the overlay, and above the switch there is no overlay. The bar
       carries the pill instead, at every width. */
    .becom-langlist-slot{display:none}
  }
  /* The source drops Log in below sm and keeps Word lid at every width. */
  @media (max-width:639.98px){ .sitebar__login.sitebar__login{display:none} }
  /* ...and the language pill goes one step below that, because the row still
     does not fit. Measured: the logo is 127, the actions 160 and the toggle 40,
     which with the two gaps and the gutters needs 391 — so on a 375 phone the
     toggle sat 8px from the edge where 24 was intended, and on a 360 one it
     hung off the screen. This was true from the day the pill shipped and on
     every page; the Chrome page is where it became visible.

     Dropping the PILL rather than Word lid, which is the conversion action the
     source keeps at every width. It is also the one of the two that has a
     second home: below the nav's switch there is a toggle, and the panel behind
     it carries the same languages as a flat list — which is why that list
     exists. Above the switch nothing is hidden. */
  @media (max-width:399.98px){ .sitebar__actions .becom-lang{display:none} }

  /* ── Site footer ──────────────────────────────────────────────────────
     The other half of the site chrome, and the one place the two differ in
     kind. The bar has no ground of its own and takes its ink from the hero it
     is positioned over; the footer PAINTS bg-sunken and is an ordinary light
     surface. So nothing here is rebound and nothing here pins a colour — a
     heading reads --bc-heading-content, a paragraph the body ink, a quiet link
     its own token, and all three are already the right answer.

     The one rebinding is a button's, and it is the surface talking: an outline
     button's hover fill is bg-sunken, which is this footer's own ground, so the
     network row's hover filled in the colour it was already sitting on. A rung
     further down the ladder is the same move the media card makes at the glass
     end — the buttons stay the same outline buttons. */
  .becom-sitefoot{padding-block:var(--bc-sitefoot-padding-block);
                  /* Core gives ANY group carrying a background preset
                     padding: 1.25em 2.375em, and 2.375em is 38px at the root
                     size — off the grid, out of the token set, and nobody's
                     decision. The block padding is overwritten above; the
                     inline one has to be said, because .wrap is what carries
                     the gutter here and 38px of core's on top of it moved the
                     footer's content column inward from the bar's at every
                     width under about 1404. The logos stopped lining up and
                     nothing failed. Core's rule is a :where(), so one class
                     is enough to beat it. */
                  padding-inline:0;
                  border-top:var(--bc-size-border) solid var(--bc-sitefoot-border);
                  --bc-button-outline-bg-hover:var(--bc-sitefoot-action-bg-hover)}
  @media (min-width:1024px){
    .becom-sitefoot{padding-block:var(--bc-sitefoot-padding-block-wide)}
  }

  /* The two halves: five/seven from lg, stacked below. A grid rather than
     core/columns, because that is two states and a Columns block carries one —
     its stacking breakpoint is not authorable and its widths are percentages
     written into every column.

     THE SOURCE HAS A THIRD STATE HERE AND IT DOES NOT FIT. It goes two-up at
     md while the link half goes three-up at the same width, which puts three
     columns inside half a 768 viewport — 85px each, against 145 for the widest
     label in them. It survives that only because every one of its footer links
     carries break-words, so the words break mid-word rather than the page
     scrolling sideways. Ours did neither and overflowed by 15px. Dropping the
     middle state is the same call the header made at 1280: copying a
     breakpoint that does not fit only copies the break. */
  .becom-sitefoot__grid{display:grid;gap:var(--bc-sitefoot-gap)}
  /* Twelve tracks spanned five and seven, not two tracks at 5fr and 7fr. The
     two are not the same split: twelve tracks carry eleven gaps and a span of
     five swallows four of them, so the boundary lands 8px left of where two
     tracks with one gap put it. Rendered they are indistinguishable; measured
     against the source they are not, and this is the grid the source states. */
  @media (min-width:1024px){
    .becom-sitefoot__grid{grid-template-columns:repeat(12,1fr)}
    .becom-sitefoot__grid > :first-child{grid-column:span 5}
    .becom-sitefoot__grid > :last-child{grid-column:span 7}
  }

  /* The three link columns. Three from md, two from sm, stacked below — and
     with the outer grid stacked until lg, three-up at md is a full-width row
     of 213px columns rather than half a row of 85. */
  .becom-sitefoot__columns{display:grid;gap:var(--bc-sitefoot-columns-gap)}
  @media (min-width:640px){.becom-sitefoot__columns{grid-template-columns:1fr 1fr}}
  @media (min-width:768px){.becom-sitefoot__columns{grid-template-columns:repeat(3,1fr)}}

  /* Core marks a Group is-layout-flow and gives every child a blockGap margin.
     Those margins do not stop applying because the box was made a grid here —
     they offset each cell inside its own track. That is the bug that measured
     the site bar at 109px where the source is 78, and it is invisible in the
     markup both times.

     min-width:0 is the other half: a grid item's min-width is auto, so one long
     word in a link would push its track past its share instead of wrapping. */
  .becom-sitefoot__grid > *,
  .becom-sitefoot__columns > *,
  .becom-sitefoot__bottom > *{margin-block:0;min-width:0}

  /* Painted rather than carried as an <img>, exactly as the bar's mark is; the
     reason is in tokens.css. display:block with width:fit-content rather than
     the bar's flex item — here it opens a flow column, and a block box with an
     auto width fills the line, which switches the aspect ratio off and leaves
     the artwork stretched across the column. */
  .becom-sitefoot__logo{display:block;width:fit-content;
        height:var(--bc-sitefoot-logo-height);
        aspect-ratio:var(--bc-sitefoot-logo-ratio);
        background:var(--bc-sitefoot-logo-image) 0 50%/contain no-repeat;
        text-decoration:none}

  .becom-sitefoot__mission{max-width:var(--bc-sitefoot-mission-measure);
        font-size:var(--bc-sitefoot-mission-font-size);
        line-height:var(--bc-sitefoot-mission-line-height)}

  /* The column heading is the quiet eyebrow's SCALE in the heading's INK, and
     it is a heading rather than an eyebrow because nothing louder follows it:
     an eyebrow is secondary to the thing under it, and here it is the thing.

     The source sets it in its near-black --foreground, which this ladder folds
     into content-secondary — the same fold the card text takes. That fold is
     wrong here: it would put the label in the same ink as the list it heads,
     and the quiet eyebrow's own content-tertiary would put it a step LIGHTER
     than its own list. --bc-heading-content is what a heading reads everywhere
     else on the site, and it is the only one of the three that reads as one.

     Reading the eyebrow's four type tokens rather than restating them is what
     keeps the label and the eyebrow one size. */
  .becom-sitefoot__heading{margin:0;
        font-size:var(--bc-eyebrow-font-size);
        /* h2 is the right ELEMENT and the wrong type: theme.json sets it at the
           display size with line-height 1, which is a decision about a 48px
           heading in a section opener and reads as 12px of line box here. A
           label carries its own ladder, the way a card heading does. */
        line-height:var(--bc-leading-snug);
        font-weight:var(--bc-eyebrow-font-weight);
        letter-spacing:var(--bc-eyebrow-tracking);
        text-transform:uppercase;
        color:var(--bc-heading-content)}

  /* The link lists. Bullets off and the list flush, because these are a menu
     rather than prose — which is also why they carry the Link - quiet style:
     its underline is off at rest, and DESIGN-RULES names footer lists and meta
     rows as the one place that is allowed. */
  .becom-sitefoot__list{margin:var(--bc-sitefoot-list-margin-top) 0 0;padding:0;
        list-style:none;
        /* The source's break-words, kept as the backstop the breakpoint above
           is meant to make unnecessary: a label longer than its column breaks
           rather than pushing the page sideways. It fires on no label we ship. */
        overflow-wrap:break-word;
        /* The top margin is stated rather than left to core's blockGap. It was
           left to it, and margin:0 here killed it — the list sat flush against
           its own heading. Measured, not read: nothing about margin:0 on a list
           looks like it is switching off the rhythm above it. */
        font-size:var(--bc-sitefoot-list-font-size)}
  .becom-sitefoot__list > li + li{margin-block-start:var(--bc-sitefoot-list-gap)}

  /* The bottom bar: copyright on one side, the legal links on the other, and
     stacked below lg where the two would not fit on a line. */
  .becom-sitefoot__bottom{margin-block-start:var(--bc-sitefoot-bottom-gap);
        padding-block-start:var(--bc-sitefoot-bottom-padding-top);
        border-top:var(--bc-size-border) solid var(--bc-sitefoot-border);
        display:flex;flex-direction:column;align-items:flex-start;
        gap:var(--bc-sitefoot-bottom-row-gap);
        font-size:var(--bc-sitefoot-bottom-font-size)}
  @media (min-width:1024px){
    .becom-sitefoot__bottom{flex-direction:row;align-items:center;
                            justify-content:space-between}
  }
  .becom-sitefoot__legal{margin:0;padding:0;list-style:none;
        display:flex;flex-wrap:wrap;
        column-gap:var(--bc-sitefoot-legal-gap-inline);
        row-gap:var(--bc-sitefoot-legal-gap-block)}
  @media (min-width:1024px){.becom-sitefoot__legal{justify-content:flex-end}}

  /* ── Page hero: what this page is ── */
  .pagehero{position:relative;background:var(--bc-bg-inverse-gradient);
            padding-top:var(--bc-pagehero-padding-top);
            padding-bottom:var(--bc-pagehero-padding-bottom)}
  .pagehero__eyebrow{display:inline-flex;align-items:center;
                     gap:var(--bc-eyebrow-accent-gap);margin:0;
                     font-size:var(--bc-eyebrow-accent-font-size);
                     font-weight:var(--bc-eyebrow-font-weight);
                     letter-spacing:var(--bc-eyebrow-accent-tracking);
                     text-transform:uppercase;
                     color:var(--bc-content-accent-on-inverse)}
  .pagehero__eyebrow::before{content:"";display:block;flex:none;
                             width:var(--bc-eyebrow-accent-rule-width);
                             height:var(--bc-eyebrow-accent-rule-height);
                             background:currentColor}
  .pagehero__title{margin:var(--bc-space-4) 0 0;color:var(--bc-content-inverse);
                   font-size:var(--bc-font-size-display-md);line-height:1;
                   letter-spacing:var(--bc-tracking-tight);
                   font-weight:var(--bc-font-weight-bold)}
  .pagehero__lead{margin:var(--bc-space-5) 0 0;max-width:70ch;
                  color:var(--bc-content-inverse-tertiary);
                  font-size:var(--bc-font-size-lg)}

  /* ── Tabs: within-page navigation ── */
  .tabs--static{position:static !important}
  .tabs--static .wrap{padding-inline:0}
  /* The rail sticks under the bar, not at the top of the viewport — two
     sticky rows, the library above and the page's own sections below.

     --bc-docs-bar-height is measured by docs.js rather than stated, because it
     is not a constant: the bar wraps to two rows below sm. tokens.css declares
     it as the bar's designed height, so with no script the rail is a few
     pixels out and nothing is unreachable. */
  .tabs{position:sticky;top:var(--bc-docs-bar-height);
        /* On the WordPress pages the rail is a direct child of the main
           element — it has to be, or its containing block ends at the first
           pattern slot and it stops sticking — which means core hands it the
           global blockGap as a margin. It sits flush under the hero, so that
           margin comes off.

           (Not naming that tag literally is deliberate: this stylesheet is
           inlined into the preview and the page splitter slices the shell at
           the first occurrence of it, so a mention in a comment cuts the head
           off inside the CSS. The build says so, loudly, which is how this
           comment came to be worded this way.) */
        margin-block:0;
        z-index:10;background:var(--bc-tabbar-bg);
        border-bottom:var(--bc-size-border) solid var(--bc-tabbar-border);
        padding-block:var(--bc-tabbar-padding-block)}
  .tabs ul{display:flex;flex-wrap:wrap;gap:var(--bc-tab-gap);list-style:none;margin:0;padding:0}
  .tabs a{display:inline-block;
          padding:var(--bc-tab-padding-block) var(--bc-tab-padding-inline);
          border-radius:var(--bc-tab-radius);color:var(--bc-tab-content);
          text-decoration:none;font-size:var(--bc-tab-font-size);
          font-weight:var(--bc-tab-font-weight)}
  .tabs a:hover{background:var(--bc-tab-bg-hover);color:var(--bc-tab-content-hover)}
  .tabs a[aria-current]{background:var(--bc-tab-bg-current);color:var(--bc-tab-content-current)}
  /* Below sm only ONE of the two rows may stick, and it is the bar.

     Measured on Components at 375: the bar wraps to 114 and its thirteen tabs
     wrap to 149, which is 263px of permanent chrome — 39% of a phone viewport,
     before any of the page it is meant to be helping you read. The bar is the
     one that has to stay, because it is the only way to reach another page at
     all; the rail is in-page anchors, and scrolling back to the top of the
     page you are already on is a thing a reader can do. */
  @media (max-width:639.98px){ .tabs{position:static} }