/*
 * Public help centre stylesheet.
 *
 * One file, no framework, no build step beyond Astro's bundling. It is small
 * enough to read end to end, which is the point — this ships to every visitor
 * on a customer's own domain.
 *
 * `--brand` is injected per build from the org's branding, and `--on-brand`
 * is computed by `readableTextOn()` so a pale brand colour still yields
 * readable hero text. Everything else is fixed.
 *
 * Sizing is in rem throughout, matching the house rule the platform app
 * follows.
 */

:root {
  --brand: #0b6b53;
  --on-brand: #ffffff;
  /*
   * Set per build. The brand itself is never altered — it is the customer's
   * identity. When it is too pale to read on white, these darken instead:
   *
   *   --brand-surface   behind icon boxes and the selected nav row
   *   --brand-chip      behind brand-coloured text that would vanish otherwise
   *   --brand-hairline  a border for the hero search field, which is
   *                     borderless against a dark brand band and invisible
   *                     against a pale one
   *   --brand-solid     the brand as a fill or foreground, darkened only when
   *                     the raw colour would be invisible — the top-bar mark
   *                     and `View all articles`. --on-brand-solid reads on it.
   *
   * All three are inert (transparent, or a faint tint) for a brand that
   * already passes, so a normal help centre carries none of this.
   */
  --brand-surface: color-mix(in srgb, var(--brand) 10%, transparent);
  --brand-chip: transparent;
  --brand-hairline: transparent;
  --brand-solid: var(--brand);
  --on-brand-solid: var(--on-brand);
  --on-brand-surface: var(--brand);

  --ink: #101828;
  --ink-muted: #667085;
  --ink-subtle: #98a2b3;
  /*
   * The card description, and nothing else.
   *
   * 3.49:1 on white — below the 4.5:1 WCAG AA floor for text this size, and
   * chosen anyway: the description is supporting copy under a heading that
   * carries the meaning, and it was reading too heavy against the section
   * links beside it. Recorded rather than hidden, because the next person to
   * reach for a light grey should know this one does not pass.
   *
   * Kept as its own token so nothing else inherits it. For body copy that has
   * to pass, --ink-muted (4.97:1) is the lightest that does.
   */
  --ink-faint: #8189a0;

  --surface: #ffffff;
  --surface-sunken: #f9fafb;
  --border: #e4e7ec;
  --border-strong: #d0d5dd;

  --radius-sm: 0.375rem;
  --radius: 0.625rem;
  --radius-lg: 0.75rem;

  /*
   * Wide enough that the article column is not the narrowest thing on the
   * page. At 75rem the sidebar (16.5) + rail (14) + two 2.5rem gaps left
   * 39.5rem of content, which is fine for prose and cramped for the tables
   * these articles are full of.
   */
  --page-max: 84rem;
  --sidebar-width: 16.5rem;
  /* One nesting step in the sidebar tree. */
  --tree-indent: 0.75rem;
  --rail-width: 14rem;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
}

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

html {
  /* The top bar is sticky; without this an #anchor lands under it. */
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a {
  color: var(--brand);
  text-decoration: none;
  /* Reserved so the hover backing below does not shift the text when it
     appears. Costs nothing when it never does. */
  padding: 0 0.125rem;
  border-radius: 0.125rem;
}
a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 0.125rem solid var(--brand);
  outline-offset: 0.125rem;
  border-radius: var(--radius-sm);
}

.shell {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 2rem;
}

/* Screen-reader-only, used for the skip link and icon-only labels. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 20;
  padding: 0.5rem 0.875rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0.5rem;
}

/* ── Top bar ─────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 4rem;
}

.topbar__mark {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  /* `--brand-solid`, not `--brand`: a white brand painted a white square on a
     white bar, and the glyph with it. */
  background: var(--brand-solid);
  color: var(--on-brand-solid);
  flex: none;
}
.topbar__mark svg {
  width: 1.375rem;
  height: 1.375rem;
}

.topbar__name {
  /* The mark and the name are one link and must sit on one line. This was an
     inline style while the markup lived in Astro; it belongs here. */
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}
.topbar__name:hover {
  text-decoration: none;
}

/* ── Hero (home only) ────────────────────────────────────────────── */

.hero {
  background: var(--brand);
  color: var(--on-brand);
  padding: 4.5rem 2rem 5rem;
  text-align: center;
}

.hero__title {
  margin: 0 0 2rem;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ── Search field, three sizes ───────────────────────────────────── */

.search {
  position: relative;
  display: block;
}
.search__icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.125rem;
  height: 1.125rem;
  color: var(--ink-subtle);
  pointer-events: none;
}
.search__input {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 0.625rem 1rem 0.625rem 2.75rem;
}
.search__input::placeholder {
  color: var(--ink-subtle);
}
.search__input:focus-visible {
  outline: 0.125rem solid var(--brand);
  outline-offset: 0.0625rem;
}

/* Hero: large, centred, no visible border against the brand band. */
.search--hero {
  max-width: 34rem;
  margin: 0 auto;
}
.search--hero .search__input {
  padding: 1rem 1.25rem 1rem 3.25rem;
  font-size: 1rem;
  border-color: var(--brand-hairline);
  box-shadow: 0 0.0625rem 0.125rem rgba(16, 24, 40, 0.08);
}
.search--hero .search__icon {
  left: 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
}

/* Breadcrumb row: compact, right-aligned. */
.search--compact {
  width: min(20rem, 100%);
}

/* Search page: full width. */
.search--full .search__input {
  padding: 0.875rem 1.25rem 0.875rem 3.25rem;
  font-size: 1rem;
}
.search--full .search__icon {
  left: 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
}

/* ── Breadcrumbs ─────────────────────────────────────────────────── */

.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1.75rem 0;
  font-size: 0.875rem;
}
/*
 * `--brand-solid` and no hover backing, for the same reason as `.card__more`:
 * a breadcrumb is navigation the visitor has to be able to find, so it cannot
 * depend on a brand colour that may be invisible on white.
 */
.crumbs a {
  color: var(--brand-solid);
}
.crumbs a:hover {
  background: none;
}
.crumbs__sep {
  color: var(--ink-subtle);
  flex: none;
}
.crumbs__current {
  color: var(--ink-muted);
}

.crumbrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.75rem 0;
}
.crumbrow .crumbs {
  padding: 0;
}

/* ── Content layout ──────────────────────────────────────────────── */

.layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  padding-bottom: 5rem;
}
.layout--with-rail {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--rail-width);
}

.sidebar {
  position: sticky;
  top: 5rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  font-size: 0.875rem;
}

/* ── Sidebar tree — collapse is native <details>, zero JS ─────────── */

.tree,
.tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tree__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.625rem;
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
}
.tree__row:hover {
  background: var(--surface-sunken);
  text-decoration: none;
}
/* Remove the default disclosure triangle; the chevron below replaces it. */
.tree__row::-webkit-details-marker {
  display: none;
}
.tree__row::marker {
  content: '';
}

.tree__chevron {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--ink-subtle);
  transition: transform 0.15s ease;
}
details[open] > .tree__row > .tree__chevron {
  transform: rotate(90deg);
}

.tree__icon {
  /*
   * A box with a centred glyph, the same shape as `.card__iconbox`.
   *
   * Sizing the wrapper and leaving the `<svg>` at its intrinsic size put the
   * glyph on the text baseline — visibly high and left inside its own
   * backing. `place-items: center` is what actually centres it; the box is
   * larger than the glyph so `--brand-chip`, when a pale brand makes it
   * visible, reads as a rounded tile rather than a sticker cut to the edge.
   */
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  color: var(--brand);
  background: var(--brand-chip);
  border-radius: var(--radius-sm);
}
.tree__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.tree__label {
  /* Fills the row so a click anywhere on a section — not just the words —
     toggles it. */
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /*
   * Explicit, because this is an `<a>` and would otherwise inherit the global
   * link colour — which painted every row in the tree brand green and left
   * nothing for the current page to stand out against.
   */
  color: var(--ink);
}

.tree__row--category .tree__label {
  font-weight: 600;
}

/* Each level indents by one chevron width plus its gap. */
/*
 * Indentation.
 *
 * `.tree ul` above resets padding and, being `.class element`, outranks a bare
 * `.tree__children` — which silently cancelled the indent entirely and left
 * every level flush. Matching its specificity is what makes the nesting show.
 *
 * One step per level, plus a hairline guide so a long branch stays readable
 * once it runs past a screenful.
 */
.tree ul.tree__children {
  padding-left: var(--tree-indent);
  margin-left: 0.75rem;
  border-left: 1px solid var(--border);
}

/*
 * Only the current page is coloured.
 *
 * The open branch above it stays neutral: its chevrons already show which
 * ancestors are expanded, so tinting them too leaves the selected row competing
 * with three others for the same signal.
 */
/*
 * `:hover` outranks a plain class, so hovering the selected row replaced its
 * brand tint with the neutral hover grey while the label kept its on-tint
 * colour — the text vanished under the cursor. Stated for both states.
 */
.tree__row--active,
.tree__row--active:hover,
.tree__leaf--active,
.tree__leaf--active:hover {
  background: var(--brand-surface);
  font-weight: 600;
}

.tree__leaf {
  display: block;
  /* Left padding reserves the chevron slot its siblings occupy
     (chevron 1rem + gap 0.5rem), so labels line up at every level. */
  padding: 0.4375rem 0.625rem 0.4375rem calc(0.625rem + 1.5rem);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
}
/*
 * After the base `.tree__leaf` and `.tree__label` rules, not before.
 *
 * These carry the same specificity, so source order decides. Declared earlier,
 * the base colour won and the selected article rendered in muted grey — the one
 * row that most needs to stand out.
 */
/*
 * Read against `--brand-surface`, not against the page. The selected row is
 * the one element sitting *on* the tint, and a pale brand darkens that tint to
 * near-black — where brand-coloured text is the wrong choice by definition.
 */
.tree__row--active .tree__label,
.tree__leaf--active {
  color: var(--on-brand-surface);
}

.tree__leaf:hover {
  background: var(--surface-sunken);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .tree__chevron,
  .skip-link {
    transition: none;
  }
}

/* ── Home: category grid ─────────────────────────────────────────── */

.eyebrow {
  margin: 3.5rem 0 1.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.cardgrid {
  display: grid;
  /*
   * Exactly two columns on desktop, per the design — `auto-fit` produced three
   * on a wide screen, which reads as a different page. One column on phones is
   * set in the responsive block below.
   */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 3rem;
  padding-bottom: 5rem;
}

.card__head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 0.75rem;
}
.card__iconbox {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  background: var(--brand-surface);
  color: var(--brand);
  flex: none;
}
.card__iconbox svg {
  width: 1.5rem;
  height: 1.5rem;
}
.card__title {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 600;
}
.card__title a {
  color: var(--ink);
}
.card__desc {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-faint);
}
.card__sections {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.card__sections a {
  /* The same ink as the card title: these are the card's real navigation,
     and the description above them is the thing that should recede. */
  color: var(--ink);
}
.card__sections a:hover {
  color: var(--brand);
}
.card__more {
  font-weight: 600;
  /* The one link painted in `--brand-solid`: it is the card's action, so it
     has to stay visible even when the raw brand would not be. Having a real
     colour of its own, it wants no hover backing. */
  color: var(--brand-solid);
}
.card__more:hover {
  background: none;
}

/* ── Category page ───────────────────────────────────────────────── */

.page__title {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.page__desc {
  margin: 0 0 2.5rem;
  font-size: 1rem;
  color: var(--ink-muted);
}

.section__title {
  margin: 2.5rem 0 1rem;
  font-size: 1.25rem;
  font-weight: 600;
}
.section__title:first-of-type {
  margin-top: 0;
}

.subsection__title {
  margin: 1.75rem 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.rows {
  display: grid;
  gap: 0.75rem;
}

.row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--ink);
  background: var(--surface);
}
.row:hover {
  border-color: var(--border-strong);
  background: var(--surface-sunken);
  text-decoration: none;
}
.row__icon {
  /* Same centred box as `.tree__icon`. */
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  flex: none;
  color: var(--brand);
  background: var(--brand-chip);
  border-radius: var(--radius-sm);
}
.row__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.row__title {
  flex: 1;
  min-width: 0;
}
.row__chevron {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  color: var(--ink-subtle);
}

/* ── Article ─────────────────────────────────────────────────────── */

.article {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 3rem 3rem;
  min-width: 0;
}

.article__title {
  margin: 0 0 0.75rem;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.article__meta {
  margin: 0 0 2rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
}

.prose {
  font-size: 1rem;
  line-height: 1.7;
}
.prose > :first-child {
  margin-top: 0;
}
.prose > :last-child {
  margin-bottom: 0;
}
.prose h2 {
  margin: 2.5rem 0 1rem;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  scroll-margin-top: 5.5rem;
}
.prose h3 {
  margin: 2rem 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  scroll-margin-top: 5.5rem;
}
/*
 * The only link that still carries `--brand-chip`, and the only one that needs
 * to: a link inside a paragraph is marked by nothing but its colour, so a pale
 * brand would leave it invisible in the middle of a sentence.
 *
 * Everywhere else the chip is gone. Every other link on the site now resolves
 * to ink or to `--brand-solid`, so a backing added nothing — and inside the
 * sidebar, where the row already tints on hover, it drew a second darker box
 * inside the first.
 */
.prose a {
  background: var(--brand-chip);
  border-radius: var(--radius-sm);
}

.prose p {
  margin: 0 0 1.25rem;
}
.prose ul,
.prose ol {
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
}
.prose li {
  margin-bottom: 0.5rem;
}
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.prose blockquote {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
  border-left: 0.1875rem solid var(--border-strong);
  color: var(--ink-muted);
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 0.9em;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  padding: 0.125rem 0.375rem;
}
.prose pre {
  background: var(--surface-sunken);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  overflow-x: auto;
}
.prose pre code {
  background: none;
  padding: 0;
}
/* Wide tables scroll inside the article rather than widening the page. */
/*
 * The rounded outer edge is drawn by the wrapper, not the table.
 *
 * `border-collapse: collapse` merges cell borders into one grid, and a
 * collapsed border cannot be rounded — the corners square off however much
 * radius the table is given. So the table keeps its collapsed grid and the
 * scroll container around it owns the outline and the radius.
 */
.prose .tablewrap {
  margin: 0 0 1.25rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  /* Wide tables scroll inside their own box rather than widening the page. */
  overflow-x: auto;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.prose th,
.prose td {
  /* `--border-strong`, not `--border`: at this cell size the lighter hairline
     read as no border at all against the card. */
  border: 1px solid var(--border-strong);
  padding: 0.625rem 0.875rem;
  text-align: left;
}
/* The wrapper draws the outer edge, so cells must not double it up. */
.prose .tablewrap > table > thead > tr > th:first-child,
.prose .tablewrap > table > tbody > tr > td:first-child,
.prose .tablewrap > table > tbody > tr > th:first-child {
  border-left: 0;
}
.prose .tablewrap > table > thead > tr > th:last-child,
.prose .tablewrap > table > tbody > tr > td:last-child,
.prose .tablewrap > table > tbody > tr > th:last-child {
  border-right: 0;
}
.prose .tablewrap > table > thead > tr:first-child > th {
  border-top: 0;
}
.prose .tablewrap > table > tbody > tr:last-child > td,
.prose .tablewrap > table > tbody > tr:last-child > th {
  border-bottom: 0;
}

/* ── ON THIS PAGE rail ───────────────────────────────────────────── */

.rail {
  position: sticky;
  top: 5rem;
  font-size: 0.875rem;
}
.rail__title {
  margin: 0 0 0.875rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.rail__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.875rem;
  border-left: 0.125rem solid var(--border);
  display: grid;
  gap: 0.625rem;
}
.rail__list a {
  color: var(--ink-muted);
}
.rail__list a:hover {
  color: var(--brand);
}

/* ── Search page ─────────────────────────────────────────────────── */

.searchpage {
  padding-bottom: 6rem;
}
/*
 * The gap under the search field belongs to the results region, not to
 * whatever happens to be first inside it. The count line carried it, so the
 * two states that render without a count — the empty result and the "search
 * is unavailable" panel — sat flush against the input.
 */
#results {
  margin-top: 1.5rem;
}
.searchpage__count {
  margin: 0 0 1.5rem;
  color: var(--ink-muted);
}

.panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 4rem 2rem;
  text-align: center;
}
.panel__title {
  margin: 0 0 0.5rem;
  font-size: 1.1875rem;
  font-weight: 600;
}
.panel__body {
  margin: 0;
  color: var(--ink-muted);
}

.result {
  display: block;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--ink);
}
.result:hover {
  border-color: var(--border-strong);
  background: var(--surface-sunken);
  text-decoration: none;
}
.result__title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.result__crumb {
  font-size: 0.8125rem;
  color: var(--ink-subtle);
  margin-bottom: 0.375rem;
}
.result__excerpt {
  color: var(--ink-muted);
  font-size: 0.875rem;
}
.result__excerpt mark {
  background: var(--brand-surface);
  color: inherit;
  border-radius: 0.125rem;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 2.5rem;
}
.pager__btn {
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.625rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.pager__btn:hover:not(:disabled) {
  background: var(--surface-sunken);
}
.pager__btn[aria-current='page'] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  font-weight: 600;
}
.pager__btn:disabled {
  color: var(--ink-subtle);
  cursor: default;
}
.pager__gap {
  padding: 0 0.25rem;
  color: var(--ink-subtle);
}

/* ── Responsive ──────────────────────────────────────────────────────
 *
 * The supplied mocks are desktop-only, so these are decisions rather than
 * transcriptions. Three things drive them:
 *
 *  1. The ON THIS PAGE rail is dropped below the two-column breakpoint. It
 *     duplicates headings that are already visible inline once the article is
 *     full width, so keeping it would cost a screenful to say nothing new.
 *
 *  2. The sidebar tree moves BELOW the article rather than above it. There is
 *     no JavaScript here, so there is no drawer to open — and a fixed nav tree
 *     stacked above the content would mean scrolling past every category to
 *     reach the page you clicked on. Grid `order` moves it without touching
 *     DOM order, so desktop source order and tab order stay correct.
 *
 *  3. Nothing may scroll horizontally. Wide article content (tables, pre,
 *     images) scrolls inside its own box; long unbroken strings wrap.
 */

/* Nothing should ever widen the page. */
body {
  overflow-x: hidden;
}
img,
svg,
video {
  max-width: 100%;
}
.page__title,
.article__title,
.card__title,
.row__title,
.result__title {
  overflow-wrap: anywhere;
}

/* Tablet and below: single column, rail dropped, sidebar demoted. */
@media (max-width: 64rem) {
  .layout,
  .layout--with-rail {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .rail {
    display: none;
  }

  .sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    /* Below the content it belongs to — see note 2 above. */
    order: 2;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
  }
  .sidebar::before {
    content: 'Browse all articles';
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  /* Search drops under the breadcrumb instead of sharing its line. */
  .crumbrow {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .search--compact {
    width: 100%;
  }
}

/* Phone. */
@media (max-width: 40rem) {
  .shell {
    padding: 0 1.25rem;
  }

  .hero {
    padding: 3rem 1.25rem 3.5rem;
  }
  .hero__title {
    margin-bottom: 1.5rem;
  }
  .search--hero .search__input {
    padding: 0.875rem 1rem 0.875rem 3rem;
    font-size: 0.9375rem;
  }

  .cardgrid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    padding-bottom: 3.5rem;
  }
  .eyebrow {
    margin-top: 2.5rem;
  }

  .page__title {
    font-size: 1.5rem;
  }
  .article {
    /* Full-bleed on a phone: a 1px border inset by 1.25rem either side wastes
       10% of the readable width for decoration. */
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    margin-inline: -1.25rem;
    padding: 1.75rem 1.25rem 2rem;
  }
  .article__title {
    font-size: 1.375rem;
  }
  .prose {
    font-size: 0.9375rem;
  }

  .row {
    padding: 0.875rem 1rem;
  }
  .panel {
    padding: 2.5rem 1.25rem;
  }
  .crumbs {
    font-size: 0.8125rem;
  }

  /* A long help centre can run to many pages; let the pager wrap rather than
     overflow. */
  .pager {
    flex-wrap: wrap;
  }
}

/* Coarse pointers get comfortable hit targets regardless of viewport. */
@media (pointer: coarse) {
  .tree__row,
  .tree__leaf {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }
  .pager__btn {
    min-width: 2.75rem;
    height: 2.75rem;
  }
}