/*
 * Global styles: design tokens, layout, typography.
 * Block-internal styles live in each /blocks/<name>/style.css — do NOT put them here.
 */

:root {
  /*
   * Layout comes from the design system's spacing tokens: --page-padding gutters, clamped so they scale
   * down rather than eating a 1280px laptop viewport alive.
   *
   * CONTENT WIDTH — the one value to change to retune page width; everything else follows from it.
   *
   * A deliberate divergence from the design system, which sets --container-max: 1592px. That figure is
   * 1920 − 2×164, i.e. it was measured off a 1920px Figma frame rather than chosen as a reading width,
   * and at 1592px the document listings and search results — single-column rows of text — run far too
   * wide to scan comfortably. Capped at 1180px instead.
   *
   * No media query is needed to make this desktop-only: below the cap the container is already
   * viewport-minus-gutters, so lowering the cap can only ever affect viewports wider than it. In
   * practice the gutter is the binding constraint until about 1422px (below that, v − 2×8.5vw is
   * already under the cap), so this value only governs large monitors.
   */
  --qoob-content-width: 1180px;

  /*
   * Page background. The design puts white cards on a light grey page — verified from the wireframe
   * markup, where the dashboard band is `background:#F5F5F5` and every card is `#fff` with an `#E2E2E2`
   * hairline, and confirmed by sampling the design screenshots (the gutter between cards reads #F5F5F5
   * at 51%, the card interiors 100% #FFFFFF).
   *
   * Defined here rather than by editing the token file: the design system's `--surface-page` is white and
   * `assets/css/tokens/*.css` are vendored copies meant to be re-syncable, so they stay untouched.
   */
  --qoob-page-bg: var(--apc-grey-100, #F5F5F5);
  --qoob-gutter: clamp(var(--page-padding-mobile, 20px), 8.5vw, var(--page-padding, 164px));
  --qoob-topbar-height: 60px;
}

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

/*
 * Reserve the scrollbar gutter on every page, scrolling or not.
 *
 * Not needed for topbar/body alignment — a fixed element with `inset: 0 0 auto` resolves against the
 * scrollport, the same width the body lays out in, so those two agree either way. This is about
 * page-to-page stability: a short page (the dashboard) has no scrollbar and a long one (a bulletins
 * listing) does, which changes both the layout width AND the `8.5vw` gutter below, so content jumps
 * sideways on navigation. Reserving the gutter always keeps every page on the same vertical edge.
 */
html {
	scrollbar-gutter: stable;
}

body {
	margin: 0;
	font-family: var(--font-sans, system-ui, sans-serif);
	line-height: 1.55;
	color: var(--text-body, #293354);
	background: var(--qoob-page-bg);
}

/*
 * THE alignment rule — the single source of truth for where content starts and ends.
 *
 * Topbar, body and footer all share it so their content sits on one vertical edge. Three separate
 * copies of the same three properties is exactly how that silently drifts apart, which is what had
 * happened: the topbar and footer declared their own and ended up 164px narrower than the body.
 *
 * The box is content + gutters, not content alone. `--container-max` (1592px) is the CONTENT width
 * and `--page-padding` (164px) sits OUTSIDE it — the token file says so: 1592 = 1920 − 2×164. Under
 * the border-box reset above, `max-width: 1592px` with the gutter as padding subtracts the gutter a
 * second time and narrows content to 1264px. Hence the calc().
 */
.container,
.qoob-topbar__inner,
.qoob-footer__inner {
	max-width: calc(var(--qoob-content-width) + 2 * var(--qoob-gutter));
	margin-inline: auto;
	padding-inline: var(--qoob-gutter);
}

.site-nav__list {
	list-style: none;
	display: flex;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	width: auto;
	height: auto;
	clip: auto;
	padding: 0.5rem 1rem;
	background: #fff;
	z-index: 1000;
}

/* =====================================================================
   Search — results page and suggest dropdown.
   Colours are the _ds brand tokens: navy var(--apc-dark-blue, var(--apc-dark-blue, #243269)), light blue var(--apc-light-blue, #13B5EA),
   hairline var(--apc-grey-200, #E2E2E2), surface var(--apc-grey-100, #F5F5F5). Current-version badge green
   #E8F5EC/var(--apc-success-tick, var(--apc-success-tick, #219653)); tag pill var(--apc-blue-tint, #E7F7FD)/var(--apc-dark-blue, var(--apc-dark-blue, #243269)); video var(--apc-blue-tint, #E7F7FD)/#0E7295.
   ===================================================================== */

/* padding-block only: a `padding` shorthand would reset the shared rule's inline gutter. */
.qoob-search { padding-block: 28px 64px; }

/*
 * The FORM is the field now, not a row holding one: full width, with the magnifier inside it and no
 * submit button (2026-08-24). Keeps the design's active-field treatment — white, 1.5px light-blue
 * border, 9px radius — and moves it up one level so the border encloses icon and input together.
 *
 * ⚠️ The input is NOT a direct flex child at runtime. `search-suggest.js` wraps it in `.qoob-suggest`,
 * which is why that class already carries `flex: 1` — it becomes the flex item and the input fills it.
 * Styling the input with `flex: 1` alone would leave the field its natural width once the script runs.
 */
.qoob-search__form {
  display: flex;
  align-items: center;
  /*
   * Padding and gap match the topbar field: 8px vertical, 14px horizontal, and the text landing 34px
   * from the left edge. The topbar reaches that 34px with `padding-left: 34px` clearing an absolutely
   * positioned icon; here the icon is a flex sibling, so 14px + a 13px icon + a 7px gap gets to the
   * same place. Measured in the browser rather than assumed — the two mechanisms are different, so the
   * numbers do not simply copy across.
   */
  gap: 7px;
  width: 100%;
  padding: 8px 14px;
  margin-bottom: 6px;
  background: #fff;
  border: 1.5px solid var(--apc-light-blue, #13B5EA);
  border-radius: 9px;
  color: var(--apc-grey-500, #6A6A6A);
}

.qoob-search__icon { flex: none; }

/*
 * ⚠️ The wrapper `search-suggest.js` injects is a BLOCK containing an inline-block input, so its height
 * comes from the inherited line box (25px) rather than from the input (18px) — which made this box 43px
 * tall against the topbar's 36px, with padding and font already matching. Flex removes the line box, so
 * the wrapper is exactly as tall as the input.
 *
 * Only the JavaScript case needs this: with the script off the input is a direct flex child of the form
 * and there is no wrapper to go wrong. The topbar never hit it because its input carries its own
 * vertical padding and so is taller than the line box anyway.
 */
.qoob-search__form .qoob-suggest { display: flex; align-items: center; }

.qoob-search__field {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 0;
  /*
   * As on the topbar field: an <input> does NOT inherit font-family, so state it, then set the size.
   * Without this the field rendered in the browser's default UI font while every other box on the
   * screen was in Gotham — which is what this line fixes.
   *
   * `inherit` rather than a literal 'gotham', deliberately: it picks up `--font-sans`, which carries the
   * Montserrat fallback. The Adobe kit is domain-locked (see qoob_enqueue_brand_fonts), so on a host
   * that is not allow-listed Gotham silently does not resolve and Montserrat has to catch it. Measured
   * on 2026-08-24: `document.fonts.check('13px gotham')` is TRUE on the dev site, so the kit does serve
   * it here — functions.php's note that the dev site falls back is out of date, but the fallback still
   * has to stay for any host that is not on the list.
   */
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  color: var(--apc-ink, #0F1739);
  background: transparent;
  border: 0;
}
.qoob-search__field:focus { outline: none; }
.qoob-search__field::placeholder { color: var(--apc-grey-500, #6A6A6A); }

.qoob-search__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 0;
}
.qoob-search__count { margin: 0; font-size: 11.5px; color: var(--apc-grey-500, #6A6A6A); }
.qoob-search__filter select {
  font-size: 11px;
  color: var(--apc-grey-700, var(--apc-grey-700, #575756));
  padding: 4px 8px;
  border: 1px solid var(--apc-grey-200, #E2E2E2);
  border-radius: 8px;
  background: #fff;
}
.qoob-search__hint,
.qoob-search__none { font-size: 13px; color: var(--apc-grey-700, var(--apc-grey-700, #575756)); }

/* Uppercase letter-spaced eyebrow heading above each group. */
.qoob-search__group {
  margin: 20px 0 7px;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.3;
  color: #212529;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.qoob-search__card {
  background: #fff;
  border: 1px solid var(--apc-grey-200, #E2E2E2);
  border-radius: 9px;
  overflow: hidden;
}

.qoob-result {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid #EEEEEE;
}
.qoob-result:last-child { border-bottom: 0; }
.qoob-result__icon { flex-shrink: 0; margin-top: 2px; color: var(--apc-dark-blue, var(--apc-dark-blue, #243269)); }
.qoob-result__body { flex: 1; min-width: 0; }
.qoob-result__title { margin: 0; font-weight: 600; font-size: 13px; line-height: 1.35; }
.qoob-result__title a { color: var(--apc-ink, #0F1739); text-decoration: none; }
.qoob-result__title a:hover { text-decoration: underline; text-decoration-color: var(--apc-light-blue, #13B5EA); }

.qoob-result__snippet {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--apc-grey-500, #6A6A6A);
}
/* The matched term, emboldened in navy — not a yellow highlight. */
.qoob-result__snippet mark {
  background: none;
  color: var(--apc-dark-blue, var(--apc-dark-blue, #243269));
  font-weight: 700;
}

.qoob-result__pills { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 0; }

.qoob-pill {
  display: inline-block;
  padding: 2px 7px;
  font-size: 9.5px;
  line-height: 1.5;
  border-radius: 9px;
  background: #F0F0F0;
  color: var(--apc-grey-700, var(--apc-grey-700, #575756));
  text-decoration: none;
}
a.qoob-pill:hover { background: var(--apc-blue-tint, #E7F7FD); color: var(--apc-dark-blue, var(--apc-dark-blue, #243269)); }
.qoob-pill--version { background: #E8F5EC; color: var(--apc-success-tick, var(--apc-success-tick, #219653)); border-radius: 5px; font-weight: 600; }
/* Superseded versions: the design greys them back so the current one reads as the live file. */
.qoob-pill--muted { background: #F0F0F0; color: var(--apc-grey-500, #6A6A6A); border-radius: 5px; font-weight: 600; }
.qoob-pill--video { background: var(--apc-blue-tint, #E7F7FD); color: #0E7295; }

.qoob-search__pagination { margin-top: 20px; font-size: 12px; }
.qoob-search__pagination .page-numbers {
  padding: 4px 9px;
  margin-right: 4px;
  border: 1px solid var(--apc-grey-200, #E2E2E2);
  border-radius: 6px;
  color: var(--apc-dark-blue, var(--apc-dark-blue, #243269));
  text-decoration: none;
}
.qoob-search__pagination .page-numbers.current {
  background: var(--apc-dark-blue, var(--apc-dark-blue, #243269));
  border-color: var(--apc-dark-blue, var(--apc-dark-blue, #243269));
  color: #fff;
}

/* ---- suggest dropdown ---- */

.qoob-suggest { position: relative; flex: 1; }

.qoob-suggest__list {
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 380px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--apc-grey-200, #E2E2E2);
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(36, 50, 105, .12);
}

.qoob-suggest__item { margin: 0; }
.qoob-suggest__link {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
}
.qoob-suggest__item.is-active .qoob-suggest__link,
.qoob-suggest__link:hover { background: var(--apc-blue-tint, #E7F7FD); }

.qoob-suggest__title { display: block; font-weight: 600; font-size: 13px; line-height: 1.35; color: var(--apc-ink, #0F1739); }
.qoob-suggest__section {
  display: block;
  font-size: 10px;
  line-height: 1.4;
  color: var(--apc-grey-500, #6A6A6A);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.qoob-suggest__snippet { display: block; font-size: 11px; line-height: 1.45; color: var(--apc-grey-500, #6A6A6A); }
.qoob-suggest__snippet mark { background: none; color: var(--apc-dark-blue, var(--apc-dark-blue, #243269)); font-weight: 700; }

/* The version pill and the published date on a suggestion, on their own line under the snippet. */
.qoob-suggest__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}
.qoob-suggest__date { font-size: 11px; line-height: 1.4; color: var(--apc-grey-500, #6A6A6A); }

.qoob-suggest__none,
.qoob-suggest__all { padding: 8px 10px; font-size: 12px; color: var(--apc-grey-500, #6A6A6A); }
.qoob-suggest__all { border-top: 1px solid #EEEEEE; }
.qoob-suggest__all a { color: var(--apc-dark-blue, var(--apc-dark-blue, #243269)); font-weight: 600; }

/* =====================================================================
   Section Landing + document listing (§7).
   ===================================================================== */

/* padding-block only: a `padding` shorthand would reset the shared rule's inline gutter. */
.qoob-section { padding-block: 28px 64px; }

.qoob-breadcrumbs { margin-bottom: 10px; }
.qoob-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.4;
  color: var(--apc-grey-500, #6A6A6A);
}
.qoob-breadcrumbs__item { display: flex; align-items: center; gap: 6px; }
.qoob-breadcrumbs a { color: var(--apc-grey-500, #6A6A6A); text-decoration: none; }
.qoob-breadcrumbs a:hover { color: var(--apc-dark-blue, var(--apc-dark-blue, #243269)); text-decoration: underline; }
.qoob-breadcrumbs__item [aria-current="page"] { color: var(--apc-grey-700, var(--apc-grey-700, #575756)); }
.qoob-breadcrumbs__sep { color: var(--apc-grey-300, #C3C3C3); }

.qoob-section__header { margin-bottom: 20px; }
.qoob-section__title {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  color: var(--apc-ink, #0F1739);
  letter-spacing: -0.02em;
}
.qoob-section__intro {
  max-width: 68ch;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--apc-grey-700, var(--apc-grey-700, #575756));
}
.qoob-section__count { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--apc-grey-500, #6A6A6A); }

/* ---- listing ---- */

/* Band ④: 120px filter sidebar beside the list, not a bar above it. */
.qoob-listing { display: flex; gap: var(--space-4, 16px); }
.qoob-listing__sidebar { width: 120px; flex-shrink: 0; }
.qoob-listing__main { flex: 1; min-width: 0; }

.qoob-listing__sidebar-title {
  margin: 0 0 9px;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #212529;
}

/* fieldset needs its UA border and padding removed before it lays out like the other groups. */
.qoob-listing__group { margin: 0 0 12px; padding: 0; border: 0; }
.qoob-listing__group-title {
  display: block;
  margin: 0 0 5px;
  padding: 0;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.3;
  color: var(--apc-grey-700, #575756);
}

.qoob-listing__check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--apc-grey-700, #575756);
  cursor: pointer;
}
/* The design's control is a 13px rounded box, navy when ticked — not the UA checkbox. */
.qoob-listing__check input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  margin: 0;
  background: #fff;
  border: 1.5px solid var(--apc-grey-300, #C3C3C3);
  border-radius: 8px;
  cursor: pointer;
}
.qoob-listing__check input:checked {
  background: var(--apc-dark-blue, #243269);
  border-color: var(--apc-dark-blue, #243269);
}
.qoob-listing__check input:focus-visible { outline: 2px solid var(--apc-light-blue, #13B5EA); outline-offset: 2px; }
.qoob-listing__check-count { margin-left: auto; font-size: 10px; color: var(--apc-grey-500, #6A6A6A); }

.qoob-listing__pills { display: flex; flex-wrap: wrap; gap: 4px; }
.qoob-listing__pill {
  padding: 3px 8px;
  border-radius: 11px;
  background: #F0F0F0;
  font-size: 10px;
  line-height: 1.4;
  color: var(--apc-grey-700, #575756);
  text-decoration: none;
}
.qoob-listing__pill:hover { background: var(--apc-blue-tint, #E7F7FD); color: var(--apc-dark-blue, #243269); }
.qoob-listing__pill.is-active { background: var(--apc-dark-blue, #243269); color: #fff; }

/*
 * The search screen's tag pills carry a result count; the section listings' pills do not.
 *
 * That is deliberate — on search the results are already narrowed by the query, so "how many of THESE
 * carry this tag" is the useful number, and `apc_dm_search_tag_counts()` already computes it. It costs
 * the sidebar some width: "Depot Operations 504" will not sit in the listing's designed 120px, so the
 * wider column is scoped to `.qoob-search__layout` rather than widening both screens.
 */
.qoob-listing__pill-count { margin-left: 4px; opacity: 0.7; font-variant-numeric: tabular-nums; }
.qoob-listing__pill.is-active .qoob-listing__pill-count { opacity: 0.85; }

/*
 * ⚠️ DESKTOP ONLY. Unscoped, this beats the below-720px rule that makes the sidebar a full-width
 * bottom sheet — specificity, not order — and the mobile sheet opened 160px wide. Caught by measuring
 * the rendered width, which no HTML assertion could see.
 */
@media (min-width: 721px) {
  .qoob-search__layout .qoob-listing__sidebar { width: 160px; }
}

/*
 * The listing's header carries a count, an in-listing search field and a sort control; here it carries
 * only the mobile Filter button, so it is hidden until that button exists. Without this, an empty flex
 * row would still spend its 9px bottom margin above the first result.
 */
.qoob-search__layout .qoob-listing__head { display: none; }

.qoob-listing__select {
  width: 100%;
  padding: 6px 9px;
  background: #fff;
  border: 1px solid var(--apc-grey-200, #E2E2E2);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--apc-grey-500, #6A6A6A);
}

.qoob-listing__apply {
  padding: 8px 13px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  color: #fff;
  background: var(--apc-dark-blue, var(--apc-dark-blue, #243269));
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.qoob-listing__clear { display: inline-block; margin-top: 4px; font-size: 11px; line-height: 1.4; color: var(--apc-dark-blue, var(--apc-dark-blue, #243269)); }

/* Count left, sort right — the design's list header. */
.qoob-listing__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}
/*
 * In-listing search field, straight from the design's listing header: white, 1px hairline, 8px radius,
 * 8×11 padding, 12px type, grey placeholder, with the 13×13 magnifier ahead of the input.
 *
 * `flex: 1 1 180px` with `order: -1` puts it first in the header row and lets it take the slack, so on
 * a narrow screen it sits alongside the Filter button and wraps above the count rather than squeezing
 * the row. The magnifier is a sibling of the input, not a wrapper around it — the same lesson as the
 * topbar field, where a wrapper ended up nesting inside the pill.
 */
.qoob-listing__search {
  order: -1;
  flex: 1 1 180px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  background: var(--surface-card, #fff);
  border: 1px solid var(--apc-grey-200, #E2E2E2);
  border-radius: 8px;
  color: var(--apc-grey-500, #6A6A6A);
}
.qoob-listing__search:focus-within { border-color: var(--apc-light-blue, #13B5EA); }
.qoob-listing__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  color: var(--apc-ink, #0F1739);
}
.qoob-listing__search input:focus { outline: none; }
.qoob-listing__search input::placeholder { color: var(--apc-grey-500, #6A6A6A); }

.qoob-listing__count { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--apc-grey-500, #6A6A6A); }
.qoob-listing__sort { display: flex; align-items: center; gap: 5px; font-size: 11px; line-height: 1.4; color: var(--apc-grey-700, #575756); }
.qoob-listing__sort select {
  padding: 3px 6px;
  background: #fff;
  border: 1px solid var(--apc-grey-200, #E2E2E2);
  border-radius: 6px;
  font-size: 11px;
  color: var(--apc-grey-700, #575756);
}

/*
 * Filter sheet — the designed mobile pattern.
 *
 * Superseded the earlier reflow, which stacked the sidebar above the list: on a phone that pushed the
 * documents — the thing the screen is for — below the fold behind a column of controls. The design
 * instead puts a navy Filter button in the list header and opens the filters over the page.
 *
 * Driven by a bare checkbox, so it works with JavaScript off. chrome.js adds Escape and scroll-locking.
 */

.qoob-listing__scrim,
.qoob-listing__sheet-close,
.qoob-listing__filter-open { display: none; }

@media (max-width: 720px) {
  .qoob-listing { flex-direction: column; }
  .qoob-search__layout .qoob-listing__head { display: flex; justify-content: flex-end; }
  .qoob-listing__group { margin-bottom: 10px; }

  .qoob-listing__filter-open {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    order: 2;                       /* count first, button right — as drawn */
    padding: 8px 13px;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    background: var(--apc-dark-blue, #243269);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
  }
  .qoob-listing__filter-open:focus-visible { outline: 2px solid var(--apc-light-blue, #13B5EA); outline-offset: 2px; }

  /* A filter is applied — say so on the closed button, or the state is invisible once the sheet shuts. */
  .qoob-listing__filter-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--apc-light-blue, #13B5EA);
  }

  .qoob-listing__sidebar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 120;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
    transform: translateY(101%);    /* 101% so the shadow clears the viewport edge too */
    transition: transform .24s cubic-bezier(.4, 0, .2, 1);
    visibility: hidden;
  }

  .qoob-listing__sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  .qoob-listing__sheet-close {
    display: block;
    padding: 2px 8px;
    font-size: 22px;
    line-height: 1;
    color: var(--apc-grey-700, #575756);
    /* A bare glyph, not a UA-chrome button — it sits inside the sheet's own heading row. */
    background: none;
    border: 0;
    cursor: pointer;
  }
  .qoob-listing__sheet-close:focus-visible { outline: 2px solid var(--apc-light-blue, #13B5EA); outline-offset: 2px; }

  .qoob-listing__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(15, 23, 57, .45);
    opacity: 0;
    transition: opacity .24s ease;
  }
  .qoob-listing__scrim[hidden] { display: none; }

  .qoob-listing.is-filter-open .qoob-listing__sidebar {
    transform: translateY(0);
    visibility: visible;
  }
  .qoob-listing.is-filter-open .qoob-listing__scrim { opacity: 1; }

  /*
   * No JavaScript: put the sidebar back above the list, where it sat before this pattern existed.
   * The Filter button and the sheet chrome are hidden, because nothing can open or close them.
   */
  .no-js .qoob-listing__filter-open,
  .no-js .qoob-listing__sheet-close,
  .no-js .qoob-listing__scrim { display: none; }
  .no-js .qoob-listing__sidebar {
    position: static;
    max-height: none;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    visibility: visible;
  }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .qoob-listing__sidebar,
  .qoob-listing__scrim { transition: none; }
}
.qoob-listing__none { font-size: 13px; line-height: 1.5; color: var(--apc-grey-700, var(--apc-grey-700, #575756)); }

.qoob-listing__card {
  background: #fff;
  border: 1px solid var(--apc-grey-200, #E2E2E2);
  border-radius: 9px;
  overflow: hidden;
}

.qoob-doc {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #EEEEEE;
}
.qoob-doc:last-child { border-bottom: 0; }
.qoob-doc__icon { flex-shrink: 0; margin-top: 2px; }
.qoob-doc__body { min-width: 0; flex: 1; }
.qoob-doc__title { margin: 0; font-weight: 600; font-size: 13px; line-height: 1.35; }
.qoob-doc__title a { color: var(--apc-ink, #0F1739); text-decoration: none; }
.qoob-doc__title a:hover { text-decoration: underline; text-decoration-color: var(--apc-light-blue, #13B5EA); }
.qoob-doc__summary { margin: 2px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--apc-grey-500, #6A6A6A); }
.qoob-doc__pills { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }

/*
 * Row action — the design's `v3  [View]` / `[Play]` at the end of a row.
 *
 * Its own block rather than `qoob-doc__*`, because it is shared by the listing card AND the search
 * results (`template-parts/document-actions.php`). Both rows are flex with a `flex: 1` body, so
 * `margin-left: auto` parks the action at the end of either one.
 *
 * Both buttons carry the same 1.5px border, so a mixed row of documents and videos lines its buttons up
 * exactly: the design draws View as a filled box with no border and Play as an outlined one with 1px
 * less padding, which is the same outer size by a different route. Matching the box and varying only the
 * colours is the same result and cannot drift.
 *
 * `align-self: center` centres the whole action between the row's top and bottom edges (Shona,
 * 2026-08-25). The rows themselves stay `align-items: flex-start`, which is what keeps the icon and the
 * title lined up on their first line when a long title wraps — only the action moves. Set on the shared
 * block rather than on `.qoob-doc > .qoob-actions`, so the listing and the search results cannot end up
 * aligning the same component two different ways.
 */
.qoob-actions {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 8px;
  flex-shrink: 0;
  margin: 0 0 0 auto;
}
.qoob-actions__btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1.5px solid var(--apc-dark-blue, #243269);
  border-radius: 6px;
  background: var(--apc-dark-blue, #243269);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
/*
 * The published date, between the version pill and the action. Muted and the same 12px as
 * `.qoob-document__version-date`, which is the component Christian's mockup was copied from, so the
 * row and the version history read as the same thing said twice rather than two different things.
 *
 * `white-space: nowrap` because `.qoob-actions` is a flex row that must not wrap "01 Dec 2022" onto
 * two lines and push the button out of the row.
 */
.qoob-actions__date {
  font-size: 12px;
  line-height: 1.4;
  color: var(--apc-grey-500, #6A6A6A);
  white-space: nowrap;
}

.qoob-actions__btn:hover { background: var(--apc-navy-700, #2D3C77); border-color: var(--apc-navy-700, #2D3C77); }
.qoob-actions__btn:focus-visible { outline: 2px solid var(--apc-light-blue, #13B5EA); outline-offset: 2px; }

.qoob-actions__btn--play { background: var(--surface-card, #fff); color: var(--apc-dark-blue, #243269); }
.qoob-actions__btn--play:hover { background: var(--apc-blue-50, #E7F7FD); border-color: var(--apc-dark-blue, #243269); }

.qoob-section .pagination,
.qoob-section .nav-links { margin-top: 18px; font-size: 12px; }
.qoob-section .page-numbers {
  padding: 4px 9px;
  margin-right: 4px;
  border: 1px solid var(--apc-grey-200, #E2E2E2);
  border-radius: 6px;
  color: var(--apc-dark-blue, var(--apc-dark-blue, #243269));
  text-decoration: none;
}
.qoob-section .page-numbers.current {
  background: var(--apc-dark-blue, var(--apc-dark-blue, #243269));
  border-color: var(--apc-dark-blue, var(--apc-dark-blue, #243269));
  color: #fff;
}

/* Dashboard wrapper — vertical rhythm for the stacked blocks. */
/* padding-block only: a `padding` shorthand would reset the shared rule's inline gutter. */
.qoob-dashboard { padding-block: 32px 56px; }

/* =====================================================================
   Document detail (band ⑤) — single-apc_document.php.
   Content sits directly on the grey page; the design uses no white card
   on this screen, only the bordered thumbnail box and a hairline rule.
   ===================================================================== */

/* padding-block only: a `padding` shorthand would reset the shared rule's inline gutter. */
.qoob-document { padding-block: 28px 64px; }

/*
 * Scoped to this screen, not added to the shared `.qoob-breadcrumbs` 10px. On a section or search
 * listing the trail sits above a heading that carries its own margin; here it butts straight onto the
 * thumbnail box and title, so it needed the room and they do not.
 *
 * A token, not a hand-picked number: the spacing scale is 4px-based and has no 20px step, so the
 * choice is 16px or 24px. 24 because +6px on the shared 10px is not visible enough to be worth a rule.
 */
.qoob-document .qoob-breadcrumbs { margin-bottom: var(--space-5, 24px); }

.qoob-document__inner { display: flex; gap: var(--space-4, 16px); }

/* 130px fixed, per the design — and flex-shrink:0 so the thumbnail never squashes. */
.qoob-document__aside { width: 130px; flex-shrink: 0; }
.qoob-document__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  background: #E4E4E4;
  border: 1px solid var(--apc-grey-200, #E2E2E2);
  border-radius: 8px;
}
.qoob-document__thumb img { display: block; }

/*
 * The thumbnail is a link to the same target as the button, and the whole tile is the target — the
 * icon inside it is 38px in a 160px box, so wrapping only the image left almost all of what reads as
 * a button doing nothing.
 */
.qoob-document__thumb-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.qoob-document__thumb:has(.qoob-document__thumb-link:hover) { background: #DCDCDC; }
.qoob-document__thumb-link:hover img { opacity: 0.85; }

/*
 * Card icons are the same shortcut in miniature. The anchor takes over the icon's place in the row's
 * flex layout — `margin-top` included, since the icon sits 2px down to line up with the title's cap
 * height and moving that onto the wrapper is what keeps the row from shifting.
 */
.qoob-doc__icon-link {
	display: block;
	line-height: 0;
	flex-shrink: 0;
	margin-top: 2px;
}

.qoob-doc__icon-link .qoob-doc__icon { margin-top: 0; }
.qoob-doc__icon-link:hover img { opacity: 0.7; }

/* And on search results, where the icon is a glyph rather than an image. */
.qoob-result__icon-link { text-decoration: none; }
.qoob-result__icon-link:hover { opacity: 0.6; }
.qoob-document__filemeta {
  margin: 6px 0 0;
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
  color: var(--apc-grey-500, #6A6A6A);
}

.qoob-document__main { flex: 1; min-width: 0; }
.qoob-document__title {
  margin: 0 0 8px 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--apc-ink, #0F1739);
}
.qoob-document__tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0 13px; }
.qoob-document__summary {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--apc-grey-700, #575756);
}
.qoob-document__summary-label { font-weight: 600; }

/*
 * The design draws this button spanning its column, but that column is ~400px in a 580px mockup and
 * would be ~1000px at our content width — a full-width button reads as a banner rather than an action.
 * inline-flex keeps the design's padding, weight and shadow while letting it hug its label.
 */
.qoob-document__open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 18px;
  border-radius: 8px;
  background: var(--apc-dark-blue, #243269);
  box-shadow: 0 2px 6px var(--apc-navy-a30, rgba(36, 50, 105, .30));
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  color: var(--apc-white, #fff);
  text-decoration: none;
}
.qoob-document__open:hover { background: var(--apc-navy-700, #2D3C77); }
.qoob-document__open:focus-visible { outline: 2px solid var(--apc-light-blue, #13B5EA); outline-offset: 2px; }

.qoob-document__unavailable {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--apc-grey-500, #6A6A6A);
}

.qoob-document__content { margin-top: 18px; font-size: 13.5px; line-height: 1.6; }

.qoob-document__rule { height: 1px; margin: 16px 0; border: 0; background: var(--apc-grey-200, #E2E2E2); }

.qoob-document__columns { display: flex; flex-wrap: wrap; gap: var(--space-4, 16px); }
.qoob-document__panel { flex: 1; min-width: 220px; }
.qoob-document__panel-title {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #212529;
}

.qoob-document__versions { margin: 0; padding: 0; list-style: none; }
.qoob-document__version {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid #EEEEEE;
}
.qoob-document__version:last-child { border-bottom: 0; }
.qoob-document__version-date { flex: 1; font-size: 12px; line-height: 1.4; color: var(--apc-grey-500, #6A6A6A); }
.qoob-document__version.is-current .qoob-document__version-date { color: var(--apc-ink, #0F1739); }

/* Grid rather than inline dt/dd: label and value align into columns without needing a line-break hack. */
.qoob-document__details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 6px;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.9;
  color: var(--apc-grey-700, #575756);
}
.qoob-document__details dt { font-weight: 700; }
.qoob-document__details dd { margin: 0; }
.qoob-document__details a { color: var(--apc-dark-blue, #243269); }

@media (max-width: 600px) {
  /* Stack the thumbnail above the detail rather than squeezing a 130px column beside it. */
  .qoob-document__inner { flex-direction: column; }
  .qoob-document__aside { width: 100%; }
  .qoob-document__thumb { height: 120px; }
}

/* =====================================================================
   Topbar (§9) — design band ②. Colours reference the brand tokens.
   ===================================================================== */

.qoob-topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: var(--surface-page, #fff);
  border-bottom: 1px solid var(--border-subtle, #E2E2E2);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
/* §6.4.b — not sticky while scrolling down; revealed on scroll up. */
.qoob-topbar.is-hidden { transform: translateY(-100%); }
.qoob-topbar.is-pinned { transition: none; }

/*
 * Clear the WordPress admin bar.
 *
 * WP reserves room for its bar with `html { margin-top: 32px !important }` (wp-includes/admin-bar.php),
 * but a margin on the root cannot move a FIXED element, so our topbar stays pinned to viewport y=0 and
 * the admin bar — also fixed, at z-index 99999 against our 100 — draws straight over it. Offsetting the
 * topbar by the bar's own height is the fix; the root margin already shifts the document to match, so
 * .site-main below needs no adjustment.
 *
 * The offsets and breakpoints are WP's own, so they stay in step with it:
 *   > 782px   bar is 32px tall, fixed
 *   <= 782px  bar is 46px tall, fixed
 *   <= 600px  bar is 46px tall and switches to position:absolute, so it scrolls away with the document
 *
 * ⚠️ The <= 600px case used to be `top: 0`, on the reasoning that the two only overlap at scroll
 * position 0 and the bar leaves as soon as the page moves. That was wrong: scroll position 0 is where
 * every page STARTS, and the admin bar outranks us on z-index by three orders of magnitude — so an
 * administrator on a phone arrived at every screen with the WP bar drawn over the site header, no
 * hamburger, no logo, no search, no avatar, until they scrolled. Reported by Phil 2026-08-13.
 *
 * These values are the starting position; because the bar is absolute at this width, `chrome.js` then
 * tracks its actual bottom edge on scroll so the offset shrinks to 0 as the bar leaves, rather than the
 * topbar floating 46px down the screen with a gap under it.
 */
body.admin-bar .qoob-topbar { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .qoob-topbar { top: 46px; }
}

/* The bar is fixed, so the document needs its height back. */
.site-main { padding-top: var(--qoob-topbar-height); }

.qoob-topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4, 16px);
  min-height: var(--qoob-topbar-height);
  /* Width and gutter come from the shared alignment rule at the top of this file. */
}

.qoob-topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  text-decoration: none;
  flex-shrink: 0;
}
/*
 * 36px against the old 28px, and it is the only thing in the brand now: the "Document Manager" wordmark
 * went with it (David, 2026-08-25 — "make a decent size. We don't need Document Manager"). The bar is
 * 60px, so this still clears 12px above and below.
 */
.qoob-topbar__logo { display: block; width: auto; height: 36px; }

/*
 * APC's corporate mark (2026-08-28), and it is deliberately TALLER than the W2 one.
 *
 * Only the middle third of that logo is the "APC" lettering — the rest is the lens shape above and
 * the swoosh below — so matched at 36px the letters read about half the size of the W2 glyph beside
 * it and the whole thing looks like an afterthought. 44px is the largest that still clears 8px above
 * and below the 60px bar. Change this one value, not the markup, if it wants to be smaller.
 */
.qoob-topbar__logo--company { flex-shrink: 0; height: 44px; }

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

/* Design band ②: 1px × 20px hairline, one on each side of the APC mark. */
.qoob-topbar__divider {
  flex-shrink: 0;
  width: 1px;
  height: 20px;
  background: var(--border-subtle, #E2E2E2);
}

/* ---- dropdowns ---- */

.qoob-dropdown { position: relative; }

.qoob-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: 4px 0;
  /*
   * `font: inherit` first, then override. A <button> does NOT inherit font-family from the page — UAs
   * give form controls their own default — so without this "Sections" renders in a different typeface
   * from the "Document Manager" wordmark beside it, and the two do not read as aligned.
   *
   * This is valid where `font: 700 13px/1.2 inherit` was not: a CSS-wide keyword is only legal as a
   * property's ENTIRE value, never as one component of a shorthand.
   */
  font: inherit;
  font-weight: var(--fw-bold, 700);
  font-size: 13px;
  line-height: 1.2;
  color: var(--apc-dark-blue, #243269);
  background: none;
  border: 0;
  /*
   * Transparent border on BOTH edges so the box stays vertically symmetric. The active-state underline
   * lives on the bottom edge; with only that edge reserved, the button is 2px taller at the bottom and
   * `align-items: center` pushes its text 1px above the wordmark's centre line.
   */
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
/* The design's signature: a light-blue underline marks the active nav item. */
.qoob-dropdown.is-open .qoob-dropdown__toggle,
.qoob-dropdown__toggle:hover { border-bottom-color: var(--accent, #13B5EA); }

.qoob-dropdown__caret {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}
.qoob-dropdown.is-open .qoob-dropdown__caret { transform: rotate(-135deg) translateY(-2px); }

.qoob-dropdown__panel {
  display: none;
  position: absolute;
  z-index: 10;
  top: calc(100% + 10px);
  left: 0;
  min-width: 250px;
  padding: var(--space-2, 8px);
  background: var(--surface-page, #fff);
  border: 1px solid var(--border-subtle, #E2E2E2);
  border-radius: 12px;
  box-shadow: 0 8px 24px var(--apc-navy-a20, rgba(36, 50, 105, .2));
}
.qoob-dropdown__panel--right { left: auto; right: 0; }
.qoob-dropdown.is-open .qoob-dropdown__panel { display: block; }

/*
 * Hover bridge for the mouseover-openable dropdown.
 *
 * The panel is offset 10px below the toggle, and that gap is inside neither element — so a pointer
 * moving from the toggle into the panel leaves the dropdown on the way and would trigger the close.
 * A transparent strip across the gap keeps the pointer within the dropdown for hover purposes without
 * changing the visual offset. Scoped to --hover so the click-only profile menu is untouched.
 */
.qoob-dropdown--hover .qoob-dropdown__panel::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
/* No JS: the toggle is inert, so show the panel inline rather than trapping the links. */
.no-js .qoob-dropdown__panel { display: block; position: static; box-shadow: none; border: 0; }

.qoob-dropdown__list { margin: 0; padding: 0; list-style: none; }
.qoob-dropdown__list li a,
.qoob-dropdown__item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 16px);
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-heading, #0F1739);
  text-decoration: none;
}
/* §6.4.b — the row background turns light blue on hover. */
.qoob-dropdown__list li a:hover,
.qoob-dropdown__item a:hover { background: var(--apc-blue-tint, #E7F7FD); color: var(--apc-dark-blue, #243269); }
.qoob-dropdown__count { font-size: 11px; color: var(--text-muted, #6A6A6A); }

/* ---- search ---- */

/*
 * Search.
 *
 * The FORM is the pill now, not the input — the magnifier has to sit inside it, and the input cannot
 * hold a child. The design's collapsed field is a fixed 150px; stretching across the available space is
 * a deliberate change from it, so `flex: 1` with no max-width.
 */
.qoob-topbar__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  background: var(--surface-alt, #F5F5F5);
  border: 1px solid var(--border-subtle, #E2E2E2);
  border-radius: 20px;
}

/* Focus styling moves to the pill, since the input no longer carries the border. */
.qoob-topbar__search:focus-within {
  background: var(--surface-page, #fff);
  border-color: var(--accent, #13B5EA);
}

.qoob-topbar__search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--apc-grey-500, #6A6A6A);
  pointer-events: none; /* clicks fall through to the input beneath */
}

/*
 * Both DOM shapes: without JS the input is a direct child of the form; search-suggest.js moves it into a
 * div.qoob-suggest. Either way the flexible child fills the pill, so the dropdown spans its full width.
 */
.qoob-topbar__search > .qoob-suggest,
.qoob-topbar__search > .qoob-topbar__field {
  flex: 1;
  min-width: 0;
}

.qoob-topbar__field {
  width: 100%;
  /* Left padding clears the absolutely-positioned magnifier. */
  padding: 8px 14px 8px 34px;
  /* As on the dropdown toggle: an <input> does not inherit font-family, so state it, then set the size. */
  font: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-heading, #0F1739);
  background: none;
  border: 0;
  border-radius: 20px;
}
.qoob-topbar__field::placeholder { color: var(--apc-grey-500, #6A6A6A); }
.qoob-topbar__field:focus { outline: none; }

/* ---- user ---- */

.qoob-topbar__user { flex-shrink: 0; margin-left: auto; }
/* No underline state on the avatar, so drop both reserved edges rather than just the bottom one. */
.qoob-topbar__avatar-toggle { border-top: 0; border-bottom: 0; }
.qoob-topbar__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--apc-dark-blue, #243269);
  color: var(--apc-white, #fff);
  font-weight: var(--fw-bold, 700);
  font-size: 11px;
  line-height: 1;
}
.qoob-topbar__username { font-weight: var(--fw-bold, 700); font-size: 13px; line-height: 1.2; color: var(--text-heading, #0F1739); }

.qoob-topbar__identity { margin: 0 0 var(--space-2, 8px); padding: 9px 11px 0; }
.qoob-topbar__fullname { display: block; font-weight: var(--fw-bold, 700); font-size: 13px; line-height: 1.3; color: var(--text-heading, #0F1739); }
.qoob-topbar__access { display: block; font-size: 11px; line-height: 1.4; color: var(--text-muted, #6A6A6A); }
/* Flex row so the design's 15px glyph and its 9px gap before the label are the layout, not a margin. */
.qoob-topbar__logout {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-top: 1px solid var(--apc-grey-200, #E2E2E2);
  /* Literal 600: the design asks for semibold and the vendored token scale jumps 500 → 700. */
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
  color: var(--apc-dark-blue, #243269);
  text-decoration: none;
}
/* Never let the glyph squash if the panel is narrowed; the label wraps instead. */
.qoob-topbar__logout-icon { display: block; flex-shrink: 0; }
.qoob-topbar__logout:hover { background: var(--apc-blue-tint, #E7F7FD); }

/* =====================================================================
   Mobile chrome — hamburger, collapsed search, back bar

   The designed mobile views are a different navigation pattern rather than a reflow: the Sections
   dropdown becomes a hamburger drawer, the search field collapses to an icon, and a second bar carries
   a back chevron and the page title.

   The hamburger is the SAME button and the SAME panel as the desktop Sections dropdown, restyled — see
   the note in header.php. Nothing here needs its own JavaScript.
   ===================================================================== */

.qoob-topbar__burger,
.qoob-topbar__search-toggle { display: none; }
.qoob-backbar { display: none; }

@media (max-width: 720px) {
  .qoob-topbar__username { display: none; }

  /* As drawn: hamburger, logo, search, avatar — evenly spread rather than left-packed. */
  .qoob-topbar__inner { justify-content: space-between; gap: var(--space-2, 8px); }
  .qoob-topbar__nav { order: 1; }
  .qoob-topbar__brand { order: 2; }
  .qoob-topbar__search-toggle { order: 3; }
  /* `margin-left: auto` right-packs the avatar on desktop; here it would eat all the free space and
     bunch the other three against the left edge, so space-between never gets to do its job. */
  .qoob-topbar__user { order: 4; margin-left: 0; }
  .qoob-topbar__divider { display: none; }
  /*
   * The APC mark stays on mobile (Phil, 2026-08-28), so the bar is five items rather than the four
   * the design drew: hamburger, W2, APC, search, avatar.
   *
   * `order: 2` and not 3 — it shares the brand's order value so it sits immediately after it, and
   * equal-order flex items fall back to DOM order. Numbering it 3 would mean renumbering the search
   * toggle and the avatar too, and those numbers are referenced by nothing else, so the shared value
   * is the smaller change.
   *
   * It keeps its desktop 44px. Measured over CDP at 320/360/390/430/719px: no overflow at any of
   * them, and even at 320 — narrower than any phone still in use — the five items sit ~15px apart.
   * A separate mobile height was tried and dropped; there was nothing to buy with it.
   *
   * ⚠️ The dividers stay hidden here, as they have been since the bar was built. `space-between`
   * already does the separating at this width, and the design draws none.
   */
  .qoob-topbar__logo--company { order: 2; }

  /* The design draws a bare avatar circle at this width — no disclosure caret beside it. */
  .qoob-topbar__user .qoob-dropdown__caret { display: none; }

  .qoob-topbar__burger {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .qoob-topbar__burger span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--apc-ink, #0F1739);
  }
  .qoob-topbar__sections-label,
  .qoob-topbar__sections .qoob-dropdown__caret { display: none; }

  /*
   * The dropdown becomes a full-width drawer under the bar.
   *
   * `position: static` on the wrapper is what makes this work: it removes the containing block the
   * desktop dropdown relies on, so the panel resolves against `.qoob-topbar` instead and `top: 100%`
   * means "directly below the topbar" — wherever the topbar happens to be. That matters because the
   * topbar is not always at viewport 0: with a WordPress admin bar it is pushed down 32–46px, and the
   * drawer's previous `position: fixed; top: <constant>` ignored that and opened over the topbar
   * itself. Same technique the expanded search row already uses.
   */
  .qoob-dropdown { position: static; }
  .qoob-dropdown .qoob-dropdown__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    max-height: calc(100vh - var(--qoob-topbar-height));
    overflow-y: auto;
    border-radius: 0;
    border-inline: 0;
  }
  /* The hover bridge is a desktop affordance; at this width it just blocks taps. */
  .qoob-dropdown--hover .qoob-dropdown__panel::before { display: none; }

  .qoob-topbar__search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    color: var(--apc-grey-700, #575756);
    background: none;
    border: 0;
    cursor: pointer;
  }
  .qoob-topbar__search-toggle:focus-visible { outline: 2px solid var(--apc-light-blue, #13B5EA); outline-offset: 2px; }

  /*
   * The field itself becomes a row beneath the bar. `order` alone cannot do this — it is a flex row —
   * so it is taken out of flow and positioned, which also stops it squeezing the four icons.
   */
  /*
   * The form is the pill on desktop — it carries the background, border and radius, and the input is
   * transparent inside it. Here the form has to become the full-width row instead, so the pill moves
   * onto the input; otherwise the field renders as bare text on white with only its focus ring to
   * suggest it is an input at all.
   */
  .qoob-topbar__search {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    padding: 8px var(--qoob-gutter) 10px;
    background: var(--surface-page, #fff);
    border: 0;
    border-bottom: 1px solid var(--border-subtle, #E2E2E2);
    border-radius: 0;
  }
  .qoob-topbar.is-search-open .qoob-topbar__search { display: block; }

  .qoob-topbar__field {
    max-width: none;
    width: 100%;
    background: var(--surface-alt, #F5F5F5);
    border: 1px solid var(--border-subtle, #E2E2E2);
  }

  /*
   * The focus highlight moves with the pill. Left on the form it recolours the row's bottom rule
   * instead — a cyan line across the screen, nowhere near the thing that has focus.
   */
  .qoob-topbar__search:focus-within { border-bottom-color: var(--border-subtle, #E2E2E2); }
  .qoob-topbar__field:focus {
    background: var(--surface-page, #fff);
    border-color: var(--accent, #13B5EA);
  }

  /*
   * The icon is positioned against the form, which now has a gutter the input starts after.
   *
   * `z-index` because the pill moved onto the input: the SVG comes first in the markup, so an opaque
   * background on a later sibling paints straight over it. On desktop the input is transparent and the
   * question never arises. It keeps `pointer-events: none`, so taps still land in the field.
   */
  .qoob-topbar__search-icon { left: calc(var(--qoob-gutter) + 13px); z-index: 1; }

  /* No JavaScript: leave the field on show rather than behind a button that cannot open. */
  .no-js .qoob-topbar__search-toggle { display: none; }
  .no-js .qoob-topbar__search { display: block; }
}

/* ---------------------------------------------------------------- back bar */

@media (max-width: 720px) {
  .qoob-backbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px var(--qoob-gutter);
    background: var(--qoob-page-bg);
    border-bottom: 1px solid var(--apc-grey-200, #E4E4E4);
  }

  /*
   * The topbar is fixed, and `.site-main` carries the offset that compensates for it. The back bar sits
   * before <main>, so without moving that offset onto the bar it renders underneath the topbar and is
   * invisible — which is exactly what happened the first time. Adjacent sibling, because the bar is only
   * present on screens that have somewhere to go up to.
   */
  .qoob-backbar { margin-top: var(--qoob-topbar-height); }
  .qoob-backbar + .site-main { padding-top: 0; }

  .qoob-backbar__link {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44px of tap target around an 18px glyph, without the chevron drifting off the gutter. */
    min-width: 24px;
    min-height: 24px;
    margin: -6px 0 -6px -6px;
    padding: 6px;
    color: var(--apc-ink, #0F1739);
    text-decoration: none;
  }
  .qoob-backbar__chevron { font-size: 18px; line-height: 1; }

  .qoob-backbar__title {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    color: var(--apc-ink, #0F1739);
    /* One line: the bar is a locator, and a wrapped four-word section title costs a third of the fold. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The desktop breadcrumb and this bar say the same thing; only one should be on screen. */
  .qoob-breadcrumbs { display: none; }

  /*
   * Close the gap the back bar leaves behind. The desktop screens open with 28–32px of breathing room
   * above a large H1; under the bar that reads as dead space, and the design allows 13–14px.
   */
  .qoob-backbar ~ .site-main > .qoob-section,
  .qoob-backbar ~ .site-main > .qoob-document,
  .qoob-backbar ~ .site-main > .qoob-search { padding-block-start: 14px; }

  /*
   * The page's own H1 is redundant once the back bar carries the title — the design drops it, and on a
   * 390px screen it costs roughly a tile's worth of the fold to say the same word twice.
   *
   * Hidden visually rather than removed: the back bar's title is a span, so a `display: none` here
   * would leave the page with no H1 at all for anyone navigating by headings.
   *
   * Section archives AND the search screen, both of which use `.qoob-section__title` (search adopted it
   * on 2026-08-24 so the two screens open identically). The design has no mobile document-detail view,
   * and on that screen the title is the page's subject rather than a locator — so it stays, even
   * though the bar repeats it.
   */
  .qoob-backbar ~ .site-main .qoob-section__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* =====================================================================
   Footer
   ===================================================================== */

.qoob-footer {
  margin-top: var(--space-8, 64px);
  border-top: 1px solid var(--border-subtle, #E2E2E2);
  background: var(--surface-alt, #F5F5F5);
}
.qoob-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 16px);
  /* padding-block only — a `padding` shorthand here would wipe the shared rule's gutter. */
  padding-block: var(--space-5, 24px);
}
.qoob-footer__copy { margin: 0; font-size: 12px; line-height: 1.4; color: var(--text-muted, #6A6A6A); }
.qoob-footer__list { display: flex; gap: var(--space-4, 16px); margin: 0; padding: 0; list-style: none; }
.qoob-footer__list a { font-size: 12px; line-height: 1.4; color: var(--apc-dark-blue, #243269); text-decoration: none; }
.qoob-footer__list a:hover { text-decoration: underline; }

/* =====================================================================
   Cookie consent (band ①) — a scrim over the page with a card pinned to
   the bottom of the viewport, per the design.
   ===================================================================== */

.qoob-consent { position: fixed; inset: 0; z-index: 1000; }

/* The design dims the page behind at rgba(15,23,57,.35). */
.qoob-consent__scrim { position: absolute; inset: 0; background: rgba(15, 23, 57, .35); }

.qoob-consent__card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  /*
   * Capped and centred (Phil, 20/08). It stays pinned to the bottom, per the design band — only its
   * width changed. `margin-inline: auto` is what centres it: with both `left` and `right` set, the
   * position equation is over-constrained once `max-width` caps the used width, and auto margins
   * absorb the slack. Setting only `max-width` would have left it pinned to the left.
   */
  max-width: 500px;
  margin-inline: auto;
  padding: 18px 20px;
  background: var(--surface-page, #fff);
  border: 1px solid var(--border-subtle, #E2E2E2);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.qoob-consent__title {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  color: var(--apc-ink, #0F1739);
}
.qoob-consent__body {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--apc-grey-700, #575756);
}
.qoob-consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.qoob-consent__accept {
  padding: 10px 22px;
  border-radius: 8px;
  background: var(--apc-dark-blue, #243269);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  color: var(--apc-white, #fff);
  text-decoration: none;
}
.qoob-consent__accept:hover { background: var(--apc-navy-700, #2D3C77); }
.qoob-consent__accept:focus-visible { outline: 2px solid var(--apc-light-blue, #13B5EA); outline-offset: 2px; }
.qoob-consent__policy { font-size: 13px; line-height: 1.4; color: var(--apc-grey-500, #6A6A6A); text-decoration: underline; }

/* =====================================================================
   Entry screen (§5) — design band ① "Entry & Consent".
   Rendered standalone by the SSO gate, so this section cannot rely on
   anything the normal page shell provides: no topbar offset, no shared
   gutter rule, no body styles from the theme's layout section.
   ===================================================================== */

.qoob-entry-body {
  margin: 0;
  font-family: var(--font-body, 'Montserrat', sans-serif);
  background: var(--surface-alt, #F5F5F5);
}

/* Full viewport, card centred both ways — the design's 430px band scaled up to the page. */
.qoob-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-5, 24px);
  background: var(--surface-alt, #F5F5F5);
}

.qoob-entry__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  width: 100%;
  max-width: 420px;
  padding: 40px 30px;
  text-align: center;
}

/*
 * The splash lockup: both marks, divided, as the signed-in topbar shows them (2026-08-28). It stands
 * where the lone `apc-logo.png` roundel used to.
 *
 * The two heights hold the topbar's exact 36:44 ratio, scaled up — 60 and 73. Larger was tried and
 * dropped: at 72/88 the lockup competes with the 27px title beneath it instead of introducing it.
 * The divider is the topbar's hairline at 32px rather than 20px, so it spans the lockup the way the
 * 20px one spans the bar.
 */
.qoob-entry__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  max-width: 100%;
}

.qoob-entry__logo { height: 60px; width: auto; display: block; flex-shrink: 0; }
.qoob-entry__logo--company { height: 73px; }

/*
 * The APC mark's link wrapper (BugHerd #17). ⚠️ **`display: block` and `flex-shrink: 0` are load-bearing,
 * not tidiness.** An inline `<a>` sits on the text baseline and adds descender space under the mark,
 * which knocks the lockup off the centre line the divider is drawn to; and without `flex-shrink: 0` the
 * flex item shrinks even though the `<img>` inside it will not, which is how you get a cropped logo at
 * 320px instead of the stepped-down one the media query already provides.
 *
 * It is the only focusable control above the button, so it gets the same focus ring the button has.
 */
.qoob-entry__brand-link {
  display: block;
  flex-shrink: 0;
  line-height: 0;
  border-radius: 4px;
}
.qoob-entry__brand-link:focus-visible {
  outline: 2px solid var(--apc-light-blue, #13B5EA);
  outline-offset: 4px;
}

.qoob-entry__divider {
  flex-shrink: 0;
  width: 1px;
  height: 32px;
  background: var(--border-subtle, #E2E2E2);
}

/*
 * ⚠️ The lockup does not fit a small phone at full size and must step down.
 *
 * Measured: the card is 272px wide at a 320px viewport and 312px at 360px, and its 30px padding
 * leaves 212px and 252px of content — against a natural lockup of 256px. The marks carry
 * `flex-shrink: 0` (they must; a squashed logo is worse than a smaller one), so without this they
 * spill out of the card rather than wrapping. 420px is the breakpoint because 390px — the common
 * iPhone width — is the first one that would otherwise overflow by only a few pixels, which is the
 * kind of near-miss that reads as a rendering glitch rather than a layout bug.
 *
 * The smaller pair keeps the same 36:44 ratio: 48 and 59, at 205px including the divider.
 */
@media (max-width: 420px) {
  .qoob-entry__brand { gap: 16px; }
  .qoob-entry__logo { height: 48px; }
  .qoob-entry__logo--company { height: 59px; }
  .qoob-entry__divider { height: 26px; }
}

.qoob-entry__title {
  margin: 0;
  font-size: 27px;
  font-weight: 700;
  line-height: var(--lh-heading, 1.2);
  color: var(--text-heading, #0F1739);
}

.qoob-entry__lead {
  max-width: 300px;
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-muted, #6A6A6A);
}

.qoob-entry__button {
  margin-top: 6px;
  padding: 12px 28px;
  border-radius: 9px;
  background: var(--apc-dark-blue, #243269);
  box-shadow: 0 2px 6px var(--apc-navy-a30, rgba(36, 50, 105, 0.30));
  font-size: 15px;
  font-weight: 700;
  color: var(--apc-white, #fff);
  text-decoration: none;
}
.qoob-entry__button:hover { background: var(--apc-navy-700, #2D3C77); }
.qoob-entry__button:focus-visible {
  outline: 2px solid var(--apc-light-blue, #13B5EA);
  outline-offset: 2px;
}

.qoob-entry__note {
  max-width: 330px;
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted, #6A6A6A);
}

.qoob-entry__alt { margin: 8px 0 0; font-size: 12px; }
.qoob-entry__alt a { color: var(--apc-dark-blue, #243269); }

/* Anything other than the default prompt is a message about what went wrong, so the lead line
   carries the weight the title has in the prompt state. */
.qoob-entry:not(.qoob-entry--prompt) .qoob-entry__lead {
  max-width: 340px;
  font-size: 15px;
  color: var(--text-body, #293354);
}

.qoob-entry--refused .qoob-entry__title,
.qoob-entry--cookie_blocked .qoob-entry__title { color: var(--apc-error, #E63329); }

/* =====================================================================
   Video pop-up player (band ⑤) — assets/js/video-modal.js.
   ===================================================================== */

.qoob-video { position: fixed; inset: 0; z-index: 1100; }
.qoob-video[hidden] { display: none; }
.qoob-video__scrim { position: absolute; inset: 0; background: rgba(15, 23, 57, .45); }

/* Design: inset 34px either side, 54px from the top. */
.qoob-video__card {
  position: absolute;
  left: 34px;
  right: 34px;
  top: 54px;
  max-width: 860px;
  margin-inline: auto;
  overflow: hidden;
  background: var(--surface-page, #fff);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .32);
}

.qoob-video__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle, #E2E2E2);
}
.qoob-video__title { margin: 0; font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--apc-ink, #0F1739); }

.qoob-video__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ECECEC;
  font-size: 13px;
  line-height: 1;
  color: var(--apc-grey-700, #575756);
  cursor: pointer;
}
.qoob-video__close:hover { background: var(--apc-grey-300, #C3C3C3); }
.qoob-video__close:focus-visible { outline: 2px solid var(--apc-light-blue, #13B5EA); outline-offset: 2px; }

/* 16:9 rather than the design's fixed 210px, so the player scales with the card instead of letterboxing. */
.qoob-video__player { position: relative; aspect-ratio: 16 / 9; background: #141414; }
.qoob-video__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.qoob-video__body { padding: 13px 16px; }
.qoob-video__desc { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--apc-grey-700, #575756); }
.qoob-video__desc[hidden] { display: none; }

/* Stop the page behind scrolling under the modal, or under the mobile filter sheet. */
body.qoob-video-open,
body.qoob-sheet-open { overflow: hidden; }

@media (max-width: 600px) {
  .qoob-video__card { left: 12px; right: 12px; top: 24px; }
}

/* ---------------------------------------------------------------------------
 * PDF lightbox — `assets/js/pdf-lightbox.js`.
 *
 * Shares the video modal's shape deliberately (same scrim, same head, same close button) so the site
 * reads as having one modal, not two. What differs is what a document needs and a video did not: the
 * card is tall rather than 16:9, the body scrolls, and the head carries a toolbar.
 *
 * Everything here is inert until the script builds the modal, so a browser that never loads it pays
 * nothing but these bytes.
 * ------------------------------------------------------------------------- */

.qoob-pdf { position: fixed; inset: 0; z-index: 1100; }
.qoob-pdf[hidden] { display: none; }
.qoob-pdf__scrim { position: absolute; inset: 0; background: rgba(15, 23, 57, .45); }

.qoob-pdf__card {
  position: absolute;
  left: 34px;
  right: 34px;
  top: 34px;
  bottom: 34px;
  display: flex;
  flex-direction: column;
  max-width: 1040px;
  margin-inline: auto;
  overflow: hidden;
  background: var(--surface-page, #fff);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .32);
}

.qoob-pdf__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  flex-shrink: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle, #E2E2E2);
}

.qoob-pdf__title {
  margin: 0;
  overflow: hidden;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  color: var(--apc-ink, #0F1739);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qoob-pdf__tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.qoob-pdf__count { font-size: 11.5px; color: var(--apc-grey-700, #575756); white-space: nowrap; }

.qoob-pdf__tool {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  min-width: 24px;
  padding: 0 4px;
  border: 1px solid var(--apc-grey-200, #E2E2E2);
  border-radius: 6px;
  background: #fff;
  font-size: 12.5px;
  line-height: 1;
  color: var(--apc-dark-blue, #243269);
  text-decoration: none;
  cursor: pointer;
}
.qoob-pdf__tool--text { padding: 0 9px; font-weight: 600; font-size: 11.5px; white-space: nowrap; }
.qoob-pdf__tool:hover { border-color: var(--apc-light-blue, #13B5EA); }
.qoob-pdf__tool:focus-visible { outline: 2px solid var(--apc-light-blue, #13B5EA); outline-offset: 2px; }
.qoob-pdf__tool[disabled] { opacity: .4; cursor: default; }
.qoob-pdf__tool[disabled]:hover { border-color: var(--apc-grey-200, #E2E2E2); }

.qoob-pdf__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ECECEC;
  font-size: 13px;
  line-height: 1;
  color: var(--apc-grey-700, #575756);
  cursor: pointer;
}
.qoob-pdf__close:hover { background: var(--apc-grey-300, #C3C3C3); }
.qoob-pdf__close:focus-visible { outline: 2px solid var(--apc-light-blue, #13B5EA); outline-offset: 2px; }

/*
 * The scroll container, and the IntersectionObserver root — the script observes pages against this.
 *
 * ⚠️ **`overflow-x` is what makes zoom mean anything.** A page zoomed past the width of the card has
 * to be reachable; without this it was simply cut off, so the + button enlarged a page you could not
 * then look at.
 *
 * ⚠️ **`overflow-y: scroll`, not `auto`, is deliberate.** `fitScale()` measures `clientWidth`, and an
 * `auto` gutter appears the moment the first rendered page makes the content tall enough — which is
 * *after* that measurement, so every page came out 15px too wide for the box it then had to fit.
 * Reserving the gutter makes the measurement stable for a one-page document and a 300-page one alike.
 */
.qoob-pdf__viewport {
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: scroll;
  padding: 16px;
  background: #F4F4F4;
  -webkit-overflow-scrolling: touch;
}

.qoob-pdf__status { margin: 0 0 12px; font-size: 12.5px; color: var(--apc-grey-700, #575756); }
.qoob-pdf__status[hidden] { display: none; }

.qoob-pdf__bar {
  display: block;
  height: 3px;
  margin-top: 8px;
  overflow: hidden;
  background: var(--apc-grey-200, #E2E2E2);
  border-radius: 999px;
}
.qoob-pdf__bar[hidden] { display: none; }
.qoob-pdf__bar-fill { display: block; height: 100%; width: 0; background: var(--apc-light-blue, #13B5EA); }

/*
 * ⚠️ `position: relative` is not decoration. `updateCount()` reads each page's `offsetTop`, which is
 * measured against the nearest positioned ancestor — without this rule they are measured against the
 * card, and the page counter sticks at 1 for the whole document.
 */
.qoob-pdf__pages { position: relative; }

/*
 * ⚠️ `max-content`, NOT `fit-content`. `fit-content` clamps to the space available, so a zoomed page
 * was squeezed back to the width of the card and there was nothing to scroll to.
 */
.qoob-pdf__page {
  position: relative; /* positioning context for .qoob-pdf__links */
  margin: 0 auto 16px;
  width: max-content;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.qoob-pdf__page:last-child { margin-bottom: 0; }

/*
 * Block, or the canvas sits on the text baseline and every page gains a few stray pixels.
 *
 * ⚠️ **`height: auto` IS THE ASPECT RATIO, AND IT MUST STAY.** The script sets only the CSS *width*;
 * the height is then derived by the browser from the canvas's own pixel dimensions, so anything that
 * constrains the width takes the height with it. This rule previously read `max-width: 100%` with the
 * height set inline in px, and the two disagreed the moment a page was wider than the card: at 1.5x a
 * landscape page was asked for 1489×1056 and shown at 993×1056, a ratio of 0.94 against a true 1.41.
 * Reported by Phil on 2026-09-01 against the Driver Handbook, whose pages are all A4 landscape.
 */
.qoob-pdf__canvas { display: block; height: auto; }

/*
 * The link overlay: real anchors sitting over the rendered page.
 *
 * ⚠️ **`.qoob-pdf__page` must be a positioning context for this**, which is what `position: relative`
 * above buys. The anchors are placed in CSS pixels that came from the same viewport that drew the
 * canvas, so the two agree at every zoom step and the overlay is rebuilt whenever the canvas is.
 *
 * No visible styling by default. A box drawn round every link would change how these documents look,
 * and APC's bulletins are laid out to be read, not annotated. The cursor and the hover tint are
 * enough to say "this is a link", and focus-visible keeps it reachable by keyboard.
 */
.qoob-pdf__links {
  position: absolute;
  inset: 0;
  /* The layer itself must never eat a click, a text selection or a scroll gesture. */
  pointer-events: none;
}
.qoob-pdf__link {
  position: absolute;
  pointer-events: auto;
  display: block;
  border-radius: 2px;
  /* Transparent rather than removed, so the hover tint has something to transition from. */
  background: rgba(19, 181, 234, 0);
  transition: background .12s ease-in-out;
}
.qoob-pdf__link:hover { background: rgba(19, 181, 234, .22); }
.qoob-pdf__link:focus-visible {
  outline: 2px solid var(--apc-light-blue, #13B5EA);
  outline-offset: 1px;
}

body.qoob-pdf-open { overflow: hidden; }

/*
 * ⚠️ **The admin bar is z-index 99999 and this modal is 1100, so it sits OVER the card** — and at
 * 420px it swallowed the whole title row, which is where the document's name is. Signed-in readers
 * never see the bar, but every editor and every one of us testing does, and the missing title reads
 * as a layout bug rather than an overlap. 32px on desktop, 46px below 782px, plus the card's inset.
 */
body.admin-bar .qoob-pdf__card { top: 66px; }

@media (max-width: 600px) {
  .qoob-pdf__card { left: 8px; right: 8px; top: 8px; bottom: 8px; }
  body.admin-bar .qoob-pdf__card { top: 54px; }
  .qoob-pdf__head { flex-wrap: wrap; gap: 8px; }
  .qoob-pdf__title { flex: 1 0 100%; }
  .qoob-pdf__viewport { padding: 8px; }
}

/* ---------------------------------------------------------------------------
 * "This page has moved" — the 404 screen.
 *
 * Sized like a short piece of prose rather than a listing: this is the one screen whose job is to be
 * read. Reuses the search field's shape from `.qoob-search__*` deliberately, so the recovery action
 * looks like the search the visitor will land on.
 * ------------------------------------------------------------------------- */

.qoob-moved { padding-block: 48px 72px; max-width: 640px; }

.qoob-moved__title {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.25;
  color: var(--apc-ink, #0F1739);
}

.qoob-moved__lead {
  margin: 0 0 24px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--apc-grey-700, #575756);
}

.qoob-moved__form { display: flex; gap: 8px; margin-bottom: 32px; }

.qoob-moved__field {
  flex: 1;
  padding: 10px 13px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--apc-ink, #0F1739);
  background: #fff;
  border: 1.5px solid var(--apc-light-blue, #13B5EA);
  border-radius: 9px;
}
.qoob-moved__field::placeholder { color: var(--apc-grey-500, #6A6A6A); }

.qoob-moved__submit {
  padding: 10px 18px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  color: #fff;
  background: var(--apc-dark-blue, #243269);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.qoob-moved__submit:hover { background: var(--apc-navy-700, #2D3C77); }

.qoob-moved__sections { display: flex; flex-wrap: wrap; gap: 8px; }

.qoob-moved__section {
  padding: 9px 15px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--apc-dark-blue, #243269);
  background: #fff;
  border: 1px solid var(--apc-grey-200, #E2E2E2);
  border-radius: 999px;
}
.qoob-moved__section:hover { border-color: var(--apc-light-blue, #13B5EA); }
.qoob-moved__section:focus-visible { outline: 2px solid var(--apc-light-blue, #13B5EA); outline-offset: 2px; }

@media (max-width: 600px) {
  .qoob-moved__form { flex-direction: column; }
}