/* Help centre: the reference tables. A table wider than the screen scrolls inside its own
   region, which takes focus so the keyboard can reach it. */
.ref-table { position: relative; overflow-x: auto; margin-block: 1.5rem; }
.ref-table:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ref-table table { min-inline-size: 36rem; }
.ref-table [id] { scroll-margin-block-start: 6rem; }

/* A docs page: the section's pages beside the text from 960px, and above the title before that. */
.docs { display: grid; gap: var(--space-5); align-items: start; }
.docs__main { min-inline-size: 0; }
.docs-nav--wide { display: none; }
.docs-nav--phone { margin-block-end: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); }
.docs-nav--phone summary { cursor: pointer; font-weight: 600; }
.docs-nav--phone[open] summary { margin-block-end: var(--space-3); }
.docs-nav__title { margin-block: 0 var(--space-2); font-weight: 600; }
.docs-nav ul ul { margin-block-start: var(--space-1); padding-inline-start: var(--space-4); }
.docs-nav li { margin-block-end: var(--space-1); }
.docs-nav a { color: var(--ink-2); text-decoration: none; }
.docs-nav a:hover { color: var(--ink); text-decoration: underline; }
.docs-nav a[aria-current="page"] { color: var(--blue); font-weight: 600; }
.docs-nav .docs-search { margin-block-start: var(--space-4); }
@media (min-width: 960px) {
  .docs { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-8); }
  .docs-nav--phone { display: none; }
  .docs-nav--wide { display: block; position: sticky; inset-block-start: calc(var(--header-height) + var(--space-5)); }
}

/* The title's neighbours: the plan line, a hub's children, Related, and the dates. */
.docs-body > h1 { margin-block-end: var(--space-2); }
.docs-plan { margin-block: 0 var(--space-5); color: var(--ink-2); font-weight: 600; font-size: var(--text-sm); }
.docs-children, .docs-related ul { display: grid; gap: var(--space-3); margin-block-start: var(--space-4); }
.docs-children p { margin: 0; color: var(--ink-2); }
.docs-related { margin-block-start: var(--space-7); }
.docs-dates { margin-block-start: var(--space-6); font-size: var(--text-sm); }

/* The search form, and the docs home. */
.docs-search { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-4); }
.docs-search input { flex: 1 1 12rem; min-inline-size: 0; min-block-size: 2.75rem; padding-inline: var(--space-3); border: 1px solid var(--edge); border-radius: var(--radius-card); font: inherit; }
.docs-sections { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); }
.docs-section h3 { margin-block: 0 var(--space-2); }
.docs-section p { margin-block: 0 var(--space-3); }
.docs-section ul { display: grid; gap: var(--space-2); }

/* Related links in a grid: an item may shrink below its longest address, which then wraps. */
.docs-related li { min-inline-size: 0; }