/* `.wrapper`, `.wrapper[data-wrapper='article']` and its 60em media query were
   DELETED HERE on 2026-10-26, along with the --wrapper-max-width token none of
   them shared with anything else. They were a SECOND PAGE WIDTH competing with
   `.grid-content`'s --content-max-width (71.5rem) below, which sizes all ten
   templates: a viewport-relative 80vw/95vw cap, so wider than 71.5rem on a large
   screen and narrower on a laptop.

   Two pages ever carried the pair. new_request_page.hbs came off it on
   2026-10-25 and article_page.hbs on 2026-10-26, each because the cap misaligned
   the breadcrumbs under a hero band sized by the real page width. Those two
   templates hold the reasoning; new_request_page.hbs:58 has the fullest version.

   Do not reintroduce a page-level width here. `.grid-content` is the sitewide
   one, and a per-page cap on top of it is how the misalignment happened twice. */

/* The two-column "sidebar" pattern: a side column at a target width beside a
   content column that takes the rest, both wrapping to one column when the
   content column would fall below its minimum. Two consumers, both two-child:
   article_page.hbs (the article nav `<aside>` plus `.article-wrapper`) and
   new_request_page.hbs (the Support Info panel plus `.article-wrapper`).
   Nothing sets --sidebar-target-width, so the default below is the live width on
   both pages -- TRUE SINCE 2026-10-26 AND NOT BEFORE IT. This sentence used to
   say the same thing and was wrong about the article page, because checking the
   token is not enough: `.sticky` carried `max-width: 16.5rem`
   (css-page-article.css), and a max-width clamps a flex item's used size no
   matter what flex-basis asks for, so that panel was 264px against the Support
   Info panel's 340px. If this claim needs checking again, grep the consumers for
   max-width and width too, not just for the custom property. */
.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

/* 21.25rem, NOT the 20rem this defaulted to until 2026-10-25. Joy asked for the
   side panel to be "the same width as the search results categories side panel",
   and for the article sidebar to keep that consistency -- so the number comes
   from `.kb-search-layout`'s first grid track (css-page-search-results.css),
   which is where it was derived from Figma's 339px column and signed off on
   2026-10-23. One default rather than a per-page pin, because both consumers
   want the same answer.

   The resulting width is 21.25rem plus a thousandth of the row's slack, because
   `flex-grow: 1` here against 999 on the content column is what makes the pair
   wrap rather than overflow. That is a fraction of a pixel at any real viewport,
   where the search page's track is exactly 340px -- near enough to match by eye,
   and not worth trading the wrap behaviour for.

   Two things are still deliberately NOT matched to that page, both visible and
   both Joy's call rather than mine: the 2rem `gap` above, where the search
   layout uses a 1.5rem column gap taken from Figma's 23px, and the panel's own
   internal padding. */
.sidebar:not([data-direction]) > :first-child {
  flex-basis: var(--sidebar-target-width, 21.25rem);
  flex-grow: 1;
}

.sidebar:not([data-direction]) > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

.sidebar[data-reversed] {
  flex-direction: row-reverse;
}

.sidebar[data-direction='rtl'] > :last-child {
  flex-basis: var(--sidebar-target-width, 21.25rem);
  flex-grow: 1;
}

.sidebar[data-direction='rtl'] > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

/*SECTION - Utilities */

/* Screen reader only */
.sr-only {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.agent,
.manager,
.anonymous,
.end_user {
  display: none;
}

.not-visible {
  visibility: hidden;
}

/*SECTION - Text */
[class*='line-height-'] {
  line-height: var(--height, 1rem);
}

.line-height-default {
  --height: 1.5;
}

.balance {
  text-wrap: balance;
}
.pretty {
  text-wrap: pretty;
}

.step-0 {
  font-size: var(--step-0);
}
.step-1 {
  font-size: var(--step-1);
}

.step-2 {
  font-size: var(--step-2);
}

.step-3 {
  font-size: var(--step-3);
}

.step-4 {
  font-size: var(--step-4);
}

.step-5 {
  font-size: var(--step-5);
}

.step-6 {
  font-size: var(--step-6);
}

.step-7 {
  font-size: var(--step-7);
}

.step-8 {
  font-size: var(--step-8);
}

.step-9 {
  font-size: var(--step-9);
}

.fw-500 {
  font-weight: var(--font-medium);
}

.fw-600 {
  font-weight: var(--font-bold);
}

.fw-700 {
  font-weight: var(--font-bolder);
}

.center {
  text-align: center;
}

.left {
  text-align: start;
}
.right {
  text-align: right;
}

/*!SECTION - Text*/

/* ================================
   TEXT COLORS
================================ */

.white {
  color: var(--clr-white);
}
.black {
  color: var(--clr-black);
}

.primary-5 {
  color: var(--clr-primary-5);
}
.primary-10 {
  color: var(--clr-primary-10);
}
.primary-20 {
  color: var(--clr-primary-20);
}
.primary-40 {
  color: var(--clr-primary-40);
}
.primary-60 {
  color: var(--clr-primary-60);
}
.primary-80 {
  color: var(--clr-primary-80);
}
.primary-100 {
  color: var(--clr-primary-100);
}
.primary-120 {
  color: var(--clr-primary-120);
}
.primary-140 {
  color: var(--clr-primary-140);
}
.primary-160 {
  color: var(--clr-primary-160);
}
.primary-180 {
  color: var(--clr-primary-180);
}

.neutral-5 {
  color: var(--clr-neutral-5);
}
.neutral-10 {
  color: var(--clr-neutral-10);
}
.neutral-20 {
  color: var(--clr-neutral-20);
}
.neutral-40 {
  color: var(--clr-neutral-40);
}
.neutral-60 {
  color: var(--clr-neutral-60);
}
.neutral-80 {
  color: var(--clr-neutral-80);
}
.neutral-100 {
  color: var(--clr-neutral-100);
}
.neutral-120 {
  color: var(--clr-neutral-120);
}
.neutral-140 {
  color: var(--clr-neutral-140);
}
.neutral-160 {
  color: var(--clr-neutral-160);
}
.neutral-180 {
  color: var(--clr-neutral-180);
}

.secondary-5 {
  color: var(--clr-secondary-5);
}
.secondary-10 {
  color: var(--clr-secondary-10);
}
.secondary-20 {
  color: var(--clr-secondary-20);
}
.secondary-40 {
  color: var(--clr-secondary-40);
}
.secondary-60 {
  color: var(--clr-secondary-60);
}
.secondary-80 {
  color: var(--clr-secondary-80);
}
.secondary-100 {
  color: var(--clr-secondary-100);
}
.secondary-120 {
  color: var(--clr-secondary-120);
}
.secondary-140 {
  color: var(--clr-secondary-140);
}
.secondary-160 {
  color: var(--clr-secondary-160);
}
.secondary-180 {
  color: var(--clr-secondary-180);
}

.success-5 {
  color: var(--clr-success-5);
}
.success-10 {
  color: var(--clr-success-10);
}
.success-20 {
  color: var(--clr-success-20);
}
.success-40 {
  color: var(--clr-success-40);
}
.success-60 {
  color: var(--clr-success-60);
}
.success-80 {
  color: var(--clr-success-80);
}
.success-100 {
  color: var(--clr-success-100);
}
.success-120 {
  color: var(--clr-success-120);
}
.success-140 {
  color: var(--clr-success-140);
}

.alert-5 {
  color: var(--clr-alert-5);
}
.alert-10 {
  color: var(--clr-alert-10);
}
.alert-20 {
  color: var(--clr-alert-20);
}
.alert-40 {
  color: var(--clr-alert-40);
}
.alert-60 {
  color: var(--clr-alert-60);
}
.alert-80 {
  color: var(--clr-alert-80);
}
.alert-100 {
  color: var(--clr-alert-100);
}
.alert-120 {
  color: var(--clr-alert-120);
}
.alert-140 {
  color: var(--clr-alert-140);
}
.alert-160 {
  color: var(--clr-alert-160);
}
.alert-180 {
  color: var(--clr-alert-180);
}

.warning-5 {
  color: var(--clr-warning-5);
}
.warning-10 {
  color: var(--clr-warning-10);
}
.warning-20 {
  color: var(--clr-warning-20);
}
.warning-40 {
  color: var(--clr-warning-40);
}
.warning-60 {
  color: var(--clr-warning-60);
}
.warning-80 {
  color: var(--clr-warning-80);
}
.warning-100 {
  color: var(--clr-warning-100);
}
.warning-120 {
  color: var(--clr-warning-120);
}
.warning-140 {
  color: var(--clr-warning-140);
}
.warning-160 {
  color: var(--clr-warning-160);
}
.warning-180 {
  color: var(--clr-warning-180);
}

.user-lime {
  color: var(--clr-user-lime);
}
.user-blue {
  color: var(--clr-user-blue);
}
.user-periwinkle {
  color: var(--clr-user-periwinkle);
}
.user-pink {
  color: var(--clr-user-pink);
}
.user-mauve {
  color: var(--clr-user-mauve);
}

/* ================================
   BACKGROUND COLORS
================================ */

.bg-white {
  background-color: var(--clr-white);
}
.bg-black {
  background-color: var(--clr-black);
}

.bg-primary-5 {
  background-color: var(--clr-primary-5);
}
.bg-primary-10 {
  background-color: var(--clr-primary-10);
}
.bg-primary-20 {
  background-color: var(--clr-primary-20);
}
.bg-primary-40 {
  background-color: var(--clr-primary-40);
}
.bg-primary-60 {
  background-color: var(--clr-primary-60);
}
.bg-primary-80 {
  background-color: var(--clr-primary-80);
}
.bg-primary-100 {
  background-color: var(--clr-primary-100);
}
.bg-primary-120 {
  background-color: var(--clr-primary-120);
}
.bg-primary-140 {
  background-color: var(--clr-primary-140);
}
.bg-primary-160 {
  background-color: var(--clr-primary-160);
}
.bg-primary-180 {
  background-color: var(--clr-primary-180);
}

.bg-neutral-5 {
  background-color: var(--clr-neutral-5);
}
.bg-neutral-10 {
  background-color: var(--clr-neutral-10);
}
.bg-neutral-20 {
  background-color: var(--clr-neutral-20);
}
.bg-neutral-40 {
  background-color: var(--clr-neutral-40);
}
.bg-neutral-60 {
  background-color: var(--clr-neutral-60);
}
.bg-neutral-80 {
  background-color: var(--clr-neutral-80);
}
.bg-neutral-100 {
  background-color: var(--clr-neutral-100);
}
.bg-neutral-120 {
  background-color: var(--clr-neutral-120);
}
.bg-neutral-140 {
  background-color: var(--clr-neutral-140);
}
.bg-neutral-160 {
  background-color: var(--clr-neutral-160);
}
.bg-neutral-180 {
  background-color: var(--clr-neutral-180);
}

.bg-secondary-5 {
  background-color: var(--clr-secondary-5);
}
.bg-secondary-10 {
  background-color: var(--clr-secondary-10);
}
.bg-secondary-20 {
  background-color: var(--clr-secondary-20);
}
.bg-secondary-40 {
  background-color: var(--clr-secondary-40);
}
.bg-secondary-60 {
  background-color: var(--clr-secondary-60);
}
.bg-secondary-80 {
  background-color: var(--clr-secondary-80);
}
.bg-secondary-100 {
  background-color: var(--clr-secondary-100);
}
.bg-secondary-120 {
  background-color: var(--clr-secondary-120);
}
.bg-secondary-140 {
  background-color: var(--clr-secondary-140);
}
.bg-secondary-160 {
  background-color: var(--clr-secondary-160);
}
.bg-secondary-180 {
  background-color: var(--clr-secondary-180);
}

.bg-success-5 {
  background-color: var(--clr-success-5);
}
.bg-success-10 {
  background-color: var(--clr-success-10);
}
.bg-success-20 {
  background-color: var(--clr-success-20);
}
.bg-success-40 {
  background-color: var(--clr-success-40);
}
.bg-success-60 {
  background-color: var(--clr-success-60);
}
.bg-success-80 {
  background-color: var(--clr-success-80);
}
.bg-success-100 {
  background-color: var(--clr-success-100);
}
.bg-success-120 {
  background-color: var(--clr-success-120);
}
.bg-success-140 {
  background-color: var(--clr-success-140);
}

.bg-alert-5 {
  background-color: var(--clr-alert-5);
}
.bg-alert-10 {
  background-color: var(--clr-alert-10);
}
.bg-alert-20 {
  background-color: var(--clr-alert-20);
}
.bg-alert-40 {
  background-color: var(--clr-alert-40);
}
.bg-alert-60 {
  background-color: var(--clr-alert-60);
}
.bg-alert-80 {
  background-color: var(--clr-alert-80);
}
.bg-alert-100 {
  background-color: var(--clr-alert-100);
}
.bg-alert-120 {
  background-color: var(--clr-alert-120);
}
.bg-alert-140 {
  background-color: var(--clr-alert-140);
}
.bg-alert-160 {
  background-color: var(--clr-alert-160);
}
.bg-alert-180 {
  background-color: var(--clr-alert-180);
}

.bg-warning-5 {
  background-color: var(--clr-warning-5);
}
.bg-warning-10 {
  background-color: var(--clr-warning-10);
}
.bg-warning-20 {
  background-color: var(--clr-warning-20);
}
.bg-warning-40 {
  background-color: var(--clr-warning-40);
}
.bg-warning-60 {
  background-color: var(--clr-warning-60);
}
.bg-warning-80 {
  background-color: var(--clr-warning-80);
}
.bg-warning-100 {
  background-color: var(--clr-warning-100);
}
.bg-warning-120 {
  background-color: var(--clr-warning-120);
}
.bg-warning-140 {
  background-color: var(--clr-warning-140);
}
.bg-warning-160 {
  background-color: var(--clr-warning-160);
}
.bg-warning-180 {
  background-color: var(--clr-warning-180);
}

.bg-user-lime {
  background-color: var(--clr-user-lime);
}
.bg-user-blue {
  background-color: var(--clr-user-blue);
}
.bg-user-periwinkle {
  background-color: var(--clr-user-periwinkle);
}
.bg-user-pink {
  background-color: var(--clr-user-pink);
}
.bg-user-mauve {
  background-color: var(--clr-user-mauve);
}

/*SECTION - Flow */
.marg-top-half {
  margin-block-start: 0.5rem;
}

:is(.block-flow) > * + * {
  margin-block-start: var(--space-l);
}

.block-flow--sm {
  margin-block-start: var(--block-flow-sm);
}

.block-flow--md {
  margin-block-start: var(--block-flow-md);
}

.block-flow--lg {
  margin-block-start: var(--space-xl);
}

.padding-1 {
  padding: 1rem;
}
.padding-2 {
  padding: 2rem;
}

.padding-1-2 {
  padding: 1rem 2rem;
}

.section-padding {
  padding-block: var(--padding-md, 1em);
}

.section-padding--large {
  padding-block: var(--padding-lg);
}
/* !SECTION - Flow */

/*SECTION - Layout */
.percent-100 {
  width: 100%;
}

.percent-50 {
  width: 50%;
}

.block {
  display: block;
}

.flex {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-center {
  align-items: center;
}

.flex-start {
  align-items: flex-start;
}

.flex-end {
  align-items: flex-end;
}

.space-between {
  justify-content: space-between;
}

.fit-content {
  width: fit-content;
}

.grid {
  display: grid;
}

/*SECTION - Grid setup */
/* Main structure of pages */
.grid-content {
  --padding-inline: var(--gap-sm);
  /* The end gutter is a separate variable purely so the docked Forethought
     panel can reserve its 26rem here instead of on <body>
     (css-page-forethought.css:249). Reserving it on <body> narrowed every
     full-bleed band inside it -- the header and footer wrappers are
     `grid-content full-width`, so their backgrounds and border rules stopped
     26rem short of the window and the panel sat beside a cut edge rather than
     on top of the page. Widening this track instead leaves <body> full width,
     so the bands run edge to edge and only the centred `content` column moves.

     Both gutters stay 1fr, so leftover space still splits evenly and the
     content column ends up centred in the *visible* area rather than pushed
     off-centre. Defaults to --padding-inline, so symmetry is the resting state
     and nothing changes for pages that never open the panel. */
  --padding-inline-end: var(--padding-inline);

  /* rem, not ch. These were `125ch` and `150ch` until 2026-10-25, when
     style.css:40 moved the document off Open Sans and onto Inter. `ch` is the
     advance width of the font's `0` glyph, so it is a TYPEFACE-dependent length:
     Open Sans's zero is 0.5718em (9.1486px at 16px), Inter's is 0.6309em
     (10.0938px) -- 10.3% wider. Swapping the family therefore widened the
     content column of every page on the site by 118px without touching a single
     size declaration. Joy caught it on the home page the same morning.

     `.grid-content` is on all ten templates, so this one pair of tokens is the
     sitewide page-width cap and the blast radius was total. Measured before and
     after at a 1688px viewport (gutters 24 + 24):

         Open Sans   breakout 248.21px x2   content 1143.58px
         Inter       breakout 189.14px x2   content 1261.72px

     1143.58 / 125 == 9.1486, which is Open Sans's zero advance exactly, so the
     column really was 125 Open Sans zeroes wide and nothing else was in play.
     71.5rem == 1144px restores that to within 0.4px, and 85.75rem == 1372px
     restores the breakout pair. Picked rem over px so a reader who raises their
     browser's base font size still gets a proportionally wider column
     (WCAG 1.4.4); rem tracks font SIZE, which is what we want, and ignores font
     FAMILY, which is what broke.

     Three other `ch` measures were pinned in the same commit for the same
     reason -- css-components.css:15 and :2591, css-page-home.css:128.

     DO NOT repoint these at `ch` to make a measure argument. A measure (~60
     characters per line) legitimately belongs in `ch`; a page's maximum width
     does not, and the header's desktop logo inset is derived from this number
     (css-page-header.css:1346). */
  --content-max-width: 71.5rem;
  --breakout-max-width: 85.75rem;

  /* Half the difference between the two caps -- 7.125rem (114px) per side, so a
     `.breakout` child spans the content column plus 14.25rem, up to
     --breakout-max-width.

     The parentheses were wrong until 2026-10-25: this read
     `breakout-max-width - content-max-width / 2`, which groups as
     `breakout-max-width - (content-max-width / 2)` and resolved to 50rem
     (800px) per side rather than 114px. Fixed rather than preserved because the
     bug was provably inert in both directions:

       - `.breakout` is used by NOTHING. Not one template, no JS, no other
         stylesheet -- the only consumer is `.grid-content > .breakout` below,
         which matches no element in the theme. So the track's width reached no
         content either way.
       - It cannot move the content column or anything in it. Both sides of the
         grid are symmetric, so `content-start` is `(viewport - content) / 2`
         regardless of how the side space divides between the 1fr gutter and the
         breakout track. Verified against measured track lists at 1688px: 24 +
         248.21 == (1688 - 1143.58) / 2, and 24 + 189.14 == (1688 - 1261.72) / 2.
         That is also why the header's logo inset is unaffected
         (css-page-header.css:1346).

     An earlier version of this note claimed correcting it would be a visible
     change on approved pages. It would not have been, and that claim was what
     kept a one-character bug standing.

     The whole breakout mechanism is a deletion candidate -- three tokens, two
     grid tracks and a rule, none of it reached by any markup. Left in place for
     now because it is harmless and the grid is shared by all ten templates;
     fold it into the css-root.css consolidation rather than removing it alone. */
  --breakout-size: calc(
    (var(--breakout-max-width) - var(--content-max-width)) / 2
  );

  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] min(
      /* Was `--padding-inline * 2`, which assumed the two gutters were equal.
         With an independent end gutter the cap has to subtract both, or the
         content track keeps its old width while the end gutter grows and the
         row overflows by the difference. */
      100% - (var(--padding-inline) + var(--padding-inline-end)),
      var(--content-max-width)
    )
    [content-end]
    minmax(0, var(--breakout-size)) [breakout-end]
    minmax(var(--padding-inline-end), 1fr) [full-width-end];
}

.grid-content > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
  grid-column: content;
}

.grid-content > .breakout {
  grid-column: breakout;
}

.grid-content > .full-width {
  grid-column: full-width;
  justify-items: stretch;
}
/*!SECTION - Grid Setup */

/*!SECTION - Layout */

/*SECTION - Borders */

.border {
  border-radius: var(--border-radius);
  border: 1px solid var(--border, var(--border-active));
}

.border--active {
  --border: var(--border-active);
}
/*!SECTION - Borders */

/* SECTION - Text Colors */
.clr-white {
  color: var(--clr-white);
}

.clr-black {
  color: var(--clr-black);
}

.neutral-100 {
  color: var(--clr-neutral-100);
}

.neutral-160 {
  color: var(--clr-neutral-160);
}

.primary-100 {
  color: var(--clr-primary-100);
}
/*!SECTION Text Colors */

/* SECTION - Active*/
.active\:bg-neutral-40:active {
  background-color: var(--clr-neutral-160);
}
.active\:clr-white:active {
  color: var(--clr-white);
}
/*!SECTION - Active */

/*SECTION - Color Themes */
.bg-clr-white {
  background-color: var(--clr-white);
}

.bg-neutral-5 {
  background-color: var(--clr-neutral-5);
}

.hover\:grey-bg:hover {
  background-color: var(--clr-neutral-5);
  color: var(--clr-neutral-160);
  transition-duration: var(--transition-duration);
}

.dark-bg,
.hover\:dark-bg:hover,
.active\:dark-bg:active {
  background-color: var(--clr-neutral-160);
  color: var(--clr-white);
  transition-duration: var(--transition-duration);
}
/*!SECTION - Color Themes */

[hidden],
.hidden {
  display: none;
}

.invisible {
  visibility: hidden;
}

[x-cloak] {
  display: none !important;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.boolean input {
  padding: 0.5rem;
  margin-right: 0.5em;
  width: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.hc-multiselect-toggle li {
  padding: 4px 6px;
  margin-top: 0;
  margin-block-end: 0;
  font-size: 0.875rem;
  line-height: 1;
}

.svg-icon {
  box-sizing: content-box;
  height: 1em;
}

.svg-icon {
  position: relative;
  bottom: -0.125em;
  display: inline-block;
  width: 1em;
  line-height: 1;
  flex-shrink: 0;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.content img {
  max-width: 100%;
  height: auto;
}

.zd-comment {
  margin-block-end: 1rem;
}

.skeleton {
  position: relative;
  border-radius: 4px;
  height: 8rem;
  overflow: hidden;
  line-height: 0.6;
  background-color: #f9f9f9;
}

.skeleton::before {
  position: absolute;
  top: 0;
  width: 1000px;
  height: 100%;
  content: '';
  left: -1800px;
  animation: 1.5s ease-in-out 300ms infinite normal none running skeleton;
  background-image: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
}

.skeleton::after {
  content: '';
  display: block;
}

.fixed-header {
  visibility: hidden;
  background-color: transparent;
  transition: background-color 0.15s ease-in-out;
}

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 96;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 98;
}

.menu-links-center::before {
  content: '';
  display: flex;
  margin-right: auto;
}

.menu-slide-in {
  position: fixed;
  bottom: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 20rem;
  box-shadow: 5px 0 40px rgba(0, 0, 0, 0.4);
}

.pagination {
  margin: 1rem 0;
  text-align: center;
}

.white-space-normal {
  white-space: normal;
}

.white-space-no-wrap {
  white-space: nowrap;
}

.white-space-pre {
  white-space: pre;
}

.white-space-pre-line {
  white-space: pre-line;
}

.white-space-pre-wrap {
  white-space: pre-wrap;
}

.break-normal {
  word-break: normal;
}

.break-words {
  word-wrap: break-word;
}

.break-spaces {
  word-wrap: break-spaces;
}

.break-all {
  word-break: break-all;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.ratio {
  position: relative;
  height: 0;
}

.ratio iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 96;
}

.ratio-1-1 {
  padding-bottom: 100%;
}

.ratio-16-9 {
  padding-bottom: 56.25%;
}

.ratio-4-3 {
  padding-bottom: 75%;
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

.inline {
  display: inline !important;
}

.hidden {
  display: none !important;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-x-visible {
  overflow-x: visible;
}

.overflow-y-visible {
  overflow-y: visible;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.scrolling-touch {
  -webkit-overflow-scrolling: touch;
}

.scrolling-auto {
  -webkit-overflow-scrolling: auto;
}

.scroll-x {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scroll-x::-webkit-scrollbar {
  display: none;
}

.align-content-start {
  align-content: flex-start;
}

.align-content-end {
  align-content: flex-end;
}

.align-content-center {
  align-content: center;
}

.align-content-between {
  align-content: space-between;
}

.align-content-around {
  align-content: space-around;
}

.align-content-stretch {
  align-content: stretch;
}

.align-items-start {
  align-items: flex-start;
}

.align-items-end {
  align-items: flex-end;
}

.align-items-center {
  align-items: center;
}

.align-items-baseline {
  align-items: baseline;
}

.align-items-stretch {
  align-items: stretch;
}

.align-self-auto {
  align-self: auto;
}

.align-self-start {
  align-self: flex-start;
}

.align-self-end {
  align-self: flex-end;
}

.align-self-center {
  align-self: center;
}

.align-self-baseline {
  align-self: baseline;
}

.align-self-stretch {
  align-self: stretch;
}

.flex-initial {
  flex: initial;
}

.flex-1 {
  flex: 1;
}

.flex-auto {
  flex: auto;
}

.flex-none {
  flex: none;
}

.flex-fill {
  flex: 1 1 auto;
}

.flex-grow {
  flex-grow: 1;
}

.flex-grow-0 {
  flex-grow: 0;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-no-wrap {
  flex-wrap: nowrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.justify-content-start {
  justify-content: flex-start;
}

.justify-content-end {
  justify-content: flex-end;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-around {
  justify-content: space-around;
}

.border-collapse {
  border-collapse: collapse;
}

.border-separate {
  border-collapse: separate;
}

.table-auto {
  table-layout: auto;
}

.table-fixed {
  table-layout: fixed;
}

.scale-95 {
  transform: scale(0.95);
}

.scale-100 {
  transform: scale(1);
}

.scale-105 {
  transform: scale(1.05);
}

.scale-110 {
  transform: scale(1.1);
}

.rotate-45 {
  transform: rotate(45deg);
}

.rotate-90 {
  transform: rotate(90deg);
}

.rotate-180 {
  transform: rotate(180deg);
}

.rotate-270 {
  transform: rotate(270deg);
}

.translate-x-0 {
  transform: translateX(0);
}

.translate-x-full {
  transform: translateX(-100%);
}

.transition {
  transition: 0.3s;
}

.transition-fast {
  transition: 0.15s;
}

.timing-bounce {
  transition-timing-function: cubic-bezier(0.77, 0, 0.2, 2.25);
}

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

.transition-none {
  transition-property: none;
}

.transition-all {
  transition-property: all;
}

.transition-colors {
  transition-property: background-color, border-color, color, fill, stroke;
}

.transition-opacity {
  transition-property: opacity;
}

.transition-shadow {
  transition-property: box-shadow;
}

.transition-transform {
  transition-property: transform;
}

.timing-bounce {
  transition-timing-function: cubic-bezier(0.77, 0, 0.2, 2.25);
}

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

.transition-none {
  transition-duration: 0s;
}

.transition-slow {
  transition-duration: 0.5s;
}

.transition-medium {
  transition-duration: 0.3s;
}

.transition-fast {
  transition-duration: 0.15s;
}

.timing-bounce {
  transition-timing-function: cubic-bezier(0.77, 0, 0.2, 2.25);
}

.form input[type='submit']:hover {
  text-decoration: none;
  transition-duration: var(--transition-duration);
}

.form input[type='submit']:disabled,
.form input[type='submit'].is-disabled {
  cursor: not-allowed;
  opacity: 0.4;
  box-shadow: none;
  outline: none;
  border: none;
}

@media screen and (max-width: 44.9em) {
  [data-display='mobile-display'] {
    display: block;
  }
  [data-display='full-display'] {
    display: none;
  }
}
@media screen and (min-width: 45em) {
  [data-display='mobile-display'] {
    display: none;
  }
  [data-display='full-display'] {
    display: block;
  }
}

/* Theme-swapped content -- added 2026-10-20 with the dark tier.
   For the handful of things a token cannot repaint, because they are not a
   colour the CSS owns: mark both variants up, tag them, and let the theme
   decide which one renders. Two users today, both sitewide chrome:
     the wordmark      -- header.hbs, footer.hbs. The logo is two colours, a
                          black (dark: white) wordmark plus a coral mark that is
                          identical in both themes. An <img> cannot inherit
                          --brand-logo, and filter: invert(1) would take the
                          coral to cyan along with the wordmark, so there is a
                          second asset and no single-asset route.
     the toggle's face -- footer.hbs. Sun/"Light" vs moon/"Dark".
   Keep new ones here too rather than in a page file: these are one rule for
   several templates, and a per-file copy would drift.

   Two things about the selector.

   It only ever *hides*. Nothing here sets a display value on the variant that
   stays, so each element keeps whatever display it would otherwise have --
   `block` for the logo <img>, FA's `inline-block` for the <svg> the kit
   generates. A rule that switched between `none` and a fixed value would have
   to pick one, and would be wrong for the other.

   The `:root` prefix is a specificity lever, not decoration. Without it this is
   (0,2,0) and loses to `.kb-footer-logo img { display: block }`
   (css-page-footer.css:179, which also loads later), so the footer would stack
   both wordmarks in light mode. With it both compounds land at (0,3,0) and the
   theme wins in every location without any page file knowing about it. */
:root:not([data-theme='dark']) .kb-theme-dark,
:root[data-theme='dark'] .kb-theme-light {
  display: none;
}

/* Legacy light surfaces, pinned to legacy ink -- added 2026-10-20, and every
   line of it is meant to be deleted.
   style.css:5 gave <body> a `color` that flips with the theme, which is what
   makes unstyled text (the hero <h1>, an article body) readable in dark instead
   of staying #333333. The catch is the other direction: the surfaces below are
   still painted `--clr-white`, a *primitive*, so they are white in dark mode
   too, and inherited white ink on them would be invisible. While <body> was
   still #333333 they inherited that and happened to read correctly in both
   themes, which is the only reason they have survived this long.
   So this is not a design decision -- it is the previous behaviour, held in
   place for exactly the surfaces that have not been migrated yet. Each one
   leaves this list the moment its page moves onto the semantic tier and the
   surface itself goes dark; when the list is empty the block goes with it.
   `--clr-neutral-160` rather than a semantic token on purpose: the whole point
   is to *not* flip with the theme, and a semantic role here would.

   **.aa-dropdown-menu left the list on 2026-10-22 -- the first one to.** The
   search autocomplete panel was the only sitewide entry here, which is why it
   used to head the list: it opens over every page, so omitting it would have
   been visible everywhere rather than on one unvisited template. It has now been
   rebuilt on the semantic tier (see the Dropdown section of css-search.css), so
   its surface is `--neutral-bg` and genuinely goes dark, and it sets
   `--neutral-text` on itself rather than inheriting. Keeping it here would have
   been actively harmful rather than merely redundant -- it would have forced
   #333333 ink onto a #1e2a35 panel, which is the exact failure this block exists
   to prevent, just pointing the other way. That is the deletion condition in the
   paragraph above, arriving for the first time.

   **.article-share and .article-share-label left on 2026-10-27, the same
   condition arriving a second time.** The share trigger is a Codex badge now
   (css-page-article.css:1592): it paints `--neutral-bg` and sets
   `--neutral-text-soft` on itself, so holding #333333 here would have put that
   ink on a #1e2a35 badge. .article-share, the <details> shell, had already gone
   inert when its `--clr-white` fill moved down onto the label on 2026-10-22 --
   it paints nothing and has no text of its own -- but it was left listed, which
   made it read as a surface still owed a migration. Both go together.

   Specificity: `:root[data-theme='dark']` is (0,2,0), so each compound lands at
   (0,3,0). That clears the (0,2,0) a page file reaches by nesting a component
   inside `.article-content`, without needing to restate that nesting here --
   which matters because this file loads *before* every page file it is
   correcting. The worked example used to be
   `.article-content .article-accordion-content-wrapper`, then `.tab-inner`;
   both left this list on 2026-10-28 and no article component is left here to
   point at, so the example is kept in prose rather than named: a page file that
   reaches a component by nesting it inside `.article-content` lands at (0,2,0)
   and loses to the (0,3,0) here. */
:root[data-theme='dark'] {
  /* `.article-content table` CAME OUT OF THIS LIST on 2026-10-27, and the rule
     it used to need is worth recording because the same shape may be hiding
     under the four selectors left here.

     This forces a DARK ink in DARK MODE, which only ever made sense because
     the surface underneath stayed light. The comment that used to sit here
     said as much: the article table's rows were painted `--clr-neutral-5` and
     `--clr-white`, legacy tokens with no `.dark-mode` tier, so a dark-mode
     reader got white and near-white rows and the ink had to stay dark to be
     legible on them. It was a correct fix for a broken surface.

     The tables pass put those rows on `--neutral-bg-component-soft`, which has
     a real dark tier, and this declaration immediately became the bug instead
     of the fix: #333333 ink on #172029 measures 1.30:1, against a 7:1 floor.
     Removing it lets the cells inherit `.article-content`'s own
     `--neutral-icon`, which lands at 9.12:1 dark / 9.46:1 light, and `th`
     keeps `--neutral-heading` at 9.56:1.

     At `(0,3,1)` it also outranked every rule in the article table block, so
     nothing could be fixed from that end -- worth knowing if ink in one of the
     four components below refuses to respond to its own page's CSS. */
  /* `.article-accordion-content-wrapper` LEFT ON 2026-10-28, the deletion
     condition above arriving a third time. The accordion restyle took the
     panel's `background-color: var(--clr-white)` off it -- the panel inherits
     the card's --neutral-bg now, which has a real dark tier at #1e2a35 -- so
     holding #333333 here would have put dark ink on a dark panel, 1.16:1. With
     it gone the panel inherits --neutral-text, #ebf0f4 at 12.73:1. The
     component's own styles are in css-components.css:579, the Accordion
     section. */
  /* `.tab-inner` LEFT ON 2026-10-28, the deletion condition above arriving a
     FOURTH time and emptying this list of every article component it was written
     for. The tab restyle took `background-color: var(--clr-white)` off the panel
     wrapper -- and `bg-white` off the panel itself in the template, which was
     the other half of the same white -- so the panel now inherits the article
     card's --neutral-bg at #1e2a35 in dark. Holding #333333 here would have put
     dark ink on that dark panel at 1.16:1, the identical failure the accordion
     had. With it gone the panel inherits --neutral-text, #ebf0f4 at 12.73:1.
     The component's own styles are in css-components.css:23.

     WHAT IS LEFT IS NOT THE SAME SHAPE. The two remaining selectors are not
     article components and have not been through the brand refresh; neither has
     been checked against the condition above, so do not read their survival as
     evidence they pass it. */
  .sidebar-article-dropdown,
  .upload-dropzone {
    color: var(--clr-neutral-160);
  }
}