/* about.html: layout of the components on this page only. Colours, type and spacing come from site.css tokens; nothing here is a new component. */

/* ---- hero: the answer on the left, the three markets as a ruled list of links on the right (the same rows at every width, so no name can meet an edge) ---- */
.ab-hero .sb-hero__copy { display: grid; gap: var(--sp-6) var(--col-gap); }
.ab-markets { list-style: none; margin: 0; padding: 0; max-width: 30rem; border-top: 2px solid var(--navy); }
.ab-markets li { border-bottom: 1px solid var(--line-strong); }
.ab-markets a { display: grid; grid-template-columns: 56px minmax(0, 1fr) 16px; align-items: center; column-gap: var(--sp-4); min-height: 84px; padding: var(--sp-3) var(--sp-2) var(--sp-3) 0; color: var(--navy); text-decoration: none; }
.ab-markets a:visited { color: var(--navy); }
.ab-markets__svg { width: 56px; height: 56px; }
.ab-markets__svg path.o, .ab-mk__svg path.o { fill: var(--sky-soft); stroke: var(--navy); stroke-width: 1.6; stroke-linejoin: round; }
.ab-markets__svg circle, .ab-mk__svg circle { fill: var(--gold); stroke: var(--navy); stroke-width: 1.5; }
.ab-markets__t { display: block; min-width: 0; }
.ab-markets__name { display: block; font-size: var(--fs-h4); line-height: 1.25; font-weight: 600; letter-spacing: -.008em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; overflow-wrap: anywhere; }
.ab-markets small { display: block; margin-top: 2px; font-size: var(--fs-caption); line-height: 1.4; color: var(--navy-soft); }
.ab-markets__go { width: 16px; height: 16px; color: var(--sky-text); transition: transform var(--t-micro) var(--ease); }
.ab-markets a:hover .ab-markets__name { text-decoration-thickness: 2px; }
.ab-markets a:hover .ab-markets__go, .ab-markets a:focus-visible .ab-markets__go { transform: translateX(3px); }
@media (min-width: 40em) and (max-width: 63.99em) { .ab-markets { max-width: none; } }
@media (min-width: 64em) {
  .ab-hero .sb-hero__copy { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; padding-bottom: var(--sp-8); }
  .ab-hero__main { grid-column: 1 / span 7; }
  .ab-markets { grid-column: 9 / span 4; justify-self: stretch; max-width: none; }
}

/* ---- the section list: the pinned jump bar from 64em (its eight labels need about 960 px); below that the collapsed "On this page" list, so no phone or tablet gets a bar that scrolls sideways ---- */
.ab-jump { display: none; }
.ab-toc { background: var(--paper); border-bottom: 1px solid var(--line); }
.ab-toc .wrap { padding-block: 0; }
.ab-toc details > summary { border-top: 0; border-bottom: 0; }
.ab-toc ol { border-top: 1px solid var(--rule); }
@media (min-width: 64em) { .ab-jump { display: block; } .ab-toc { display: none; } }
@media (max-width: 63.99em) { html:has(.ab-jump) { --sticky-top: 0px; } }
@media (min-width: 48em) and (max-width: 63.99em) and (min-height: 30em) { html:has(.ab-jump) { --sticky-top: var(--h-header); } }

/* ---- the company block: a ruled sheet, label on the left, value on the right ---- */
.ab-sheet { margin: 0; background: var(--paper); border: 1px solid var(--navy); }
.sb-company__row { display: grid; gap: 2px var(--sp-5); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--rule); }
.sb-company__row:first-child { border-top: 0; }
.sb-company dt { font-size: var(--fs-caption); font-weight: 600; letter-spacing: .02em; color: var(--text-soft); }
.sb-company dd { margin: 0; font-size: var(--fs-lede); line-height: 1.35; font-weight: 500; color: var(--navy); overflow-wrap: anywhere; }
.sb-company dd a { font-weight: 600; }
@media (min-width: 40em) { .sb-company__row { grid-template-columns: minmax(8.5rem, 11rem) minmax(0, 1fr); align-items: baseline; padding-block: 20px; } .sb-company dt { font-size: var(--fs-ui); } }
#company .sb-split__b > .sb-slot { margin-top: var(--sp-4); max-width: var(--measure); font-size: var(--fs-caption); color: var(--text-soft); }
#company .sb-split__b > .ab-sheet + p, #company .sb-split__b > .sb-slot + p { margin-top: var(--sp-5); }

/* ---- what it does and what it is not: two columns, the second on paper with an ink edge ---- */
.ab-does { display: grid; gap: var(--sp-6) var(--sp-7); }
.ab-does h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--trk-h3); margin-bottom: var(--sp-4); }
.ab-does .sb-plain-list li { max-width: none; padding: 16px 0; }
.ab-does .sb-plain-list li:first-child { border-top: 2px solid var(--navy); }
.ab-does .sb-plain-list li strong:first-child { display: block; font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -.008em; color: var(--navy); }
.ab-does__col--not { background: var(--surface-2); padding: var(--sp-5); border-left: 4px solid var(--navy); }
.ab-does__col--not .sb-plain-list li { border-top-color: var(--line-strong); }
.ab-does__col--not .sb-plain-list li:first-child { border-top: 2px solid var(--navy); }
.ab-does__col--not .sb-plain-list li:last-child { border-bottom-color: var(--line-strong); }
/* a link inside a list sentence is a link in a sentence: it runs in the line, not on a 44 px row of its own */
.ab-does li > a.sb-link { display: inline; padding: 0; }
.ab-does li > a.sb-link svg { display: inline-block; }
#service .sb-p-links, #service .sb-slot { margin-top: var(--sp-6); }
#service .sb-slot { max-width: 34rem; font-size: var(--fs-caption); color: var(--text-soft); }
@media (min-width: 64em) { .ab-does { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
@media (max-width: 63.99em) { .ab-does__col { max-width: 36rem; } }   /* one column: no line runs past about 70 characters */

/* ---- full-width sections with a table ---- */
.ab-full .sb-head p { font-size: 1.25rem; line-height: 1.5; }
@media (min-width: 64em) { .ab-full .sb-head { align-items: start; } }
.ab-full > .wrap > * + * { margin-top: var(--sp-5); }
.ab-full > .wrap > .sb-head { margin-top: 0; }
.ab-full > .wrap > p { max-width: var(--measure); }
.ab-full > .wrap > .sb-source { margin-top: var(--sp-3); max-width: 40em; }
.ab-full > .wrap > .sb-source + p { margin-top: var(--sp-6); }
.ab-full > .wrap > p + .sb-source, .ab-full > .wrap > .sb-source + .sb-source { margin-top: var(--sp-3); }

/* markets: the table's source line on the left; the sentence about differing rules and its own source line on the right */
.ab-notes { display: grid; gap: var(--sp-5) var(--col-gap); }
.ab-notes .sb-source { max-width: 33em; margin-top: 0; }
.ab-notes__b > p:not(.sb-source) { max-width: var(--measure); }
.ab-notes__b > .sb-source { margin-top: var(--sp-3); }
@media (min-width: 64em) {
  .ab-notes { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ab-notes__a { grid-column: 1 / span 5; }
  .ab-notes__b { grid-column: 7 / span 6; }
}

/* markets table: the outline sits beside the market name */
.ab-mk { display: inline-flex; align-items: center; gap: var(--sp-3); }
.ab-mk__svg { width: 56px; height: 56px; flex: none; }
.sb-table--markets tbody th { font-size: var(--fs-h4); line-height: 1.25; }
@media (min-width: 48em) {
  .sb-table--markets thead th:nth-child(1) { width: 25%; }
  .sb-table--markets thead th:nth-child(2) { width: 20%; }
  .sb-table--markets thead th:nth-child(3) { width: 29%; }
  .sb-table--markets thead th:nth-child(4) { width: 26%; }
  .sb-table--markets td { padding-right: 24px; }
  .sb-table--markets td:last-child { padding-right: 0; }
}
.sb-table--markets th, .sb-table--markets td { vertical-align: middle; }

/* five kinds of source */
@media (min-width: 48em) {
  .sb-table--kinds tbody th { width: 20%; padding-right: 28px; font-size: var(--fs-h4); line-height: 1.3; }
  .sb-table--kinds td:nth-child(2) { width: 22%; padding-right: 28px; }
}
.sb-table--kinds td { font-size: var(--fs-ui); }

/* ---- a source line, taken apart: the four parts are numbered, and the table below carries the same numbers ---- */
.ab-specimen { background: var(--paper); border: 1px solid var(--navy); padding: var(--sp-5); }
.ab-specimen__fact { font-size: var(--fs-lede); line-height: 1.4; font-weight: 500; color: var(--navy); max-width: 34rem; }
.ab-specimen .sb-source { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line-strong); font-size: 1rem; line-height: 2.1; max-width: none; color: var(--navy-soft); }
.ab-specimen .sb-source > span:first-child { color: var(--navy); }
.ab-part::before, .ab-parts tbody th::before { content: attr(data-n); content: attr(data-n) / ""; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 6px; border-radius: 4px; background: var(--navy); color: var(--paper); font-size: var(--fs-caption); font-weight: 600; line-height: 1; vertical-align: .08em; }
.ab-parts { counter-reset: part; margin-top: 0; }
.ab-line__grid { row-gap: var(--sp-6); }
.ab-line__grid > .ab-specimen { margin-top: 0; }
@media (min-width: 64em) {
  .ab-line__grid > .sb-split__a { grid-column: 1 / span 5; grid-row: 1; }
  .ab-line__grid > .ab-specimen { grid-column: 7 / span 6; grid-row: 1; align-self: start; }
  .ab-line__grid > .ab-parts { grid-column: 1 / -1; grid-row: 2; }
}
/* each numbered part of the specimen is one unit with its number: it moves to the next line whole, and wraps inside itself only when it is wider than the line (large text) */
.ab-part { display: inline-block; max-width: 100%; vertical-align: baseline; }
.ab-part > a { max-width: calc(100% - 34px); }
/* a link and the comma or full stop that follows it stay together: one unit that moves to the next line whole, and wraps inside itself only when it is wider than the line */
.ab-u { display: inline-block; max-width: 100%; vertical-align: baseline; }
.ab-parts tbody th { white-space: nowrap; }
@media (min-width: 48em) { .ab-parts thead th:first-child { width: 28%; } }
@media (min-width: 64em) { .ab-parts thead th:first-child { width: 22%; } .ab-parts thead th:nth-child(2) { width: 46%; } .ab-parts td { padding-right: 28px; } .ab-parts td:last-child { padding-right: 0; } }
.ab-parts tbody tr { counter-increment: part; }
.ab-parts tbody th::before { content: counter(part); content: counter(part) / ""; }
@media (max-width: 47.99em) { .ab-parts tbody th::before { vertical-align: 0; } }

/* ---- how a page is checked: four steps across ---- */
@media (min-width: 64em) {
  .ab-review .sb-steps--cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ab-review .sb-steps--cols > li { padding-right: var(--sp-5); padding-left: var(--sp-5); }
  .ab-review .sb-steps--cols > li:first-child { padding-left: 0; }
}
.ab-review .sb-steps h3 { font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -.01em; }
.ab-review .sb-steps p { color: var(--text); }
.ab-review .sb-steps { border-top-color: var(--rule-strong); }
.ab-review .sb-steps > li::before { color: var(--gold); }
.ab-review > .wrap > p { margin-top: var(--sp-6); max-width: var(--measure); }

/* ---- two short sections in two columns ---- */
.ab-pair__grid { display: grid; gap: var(--sp-8) var(--sp-8); }
.ab-pair h2 { margin-bottom: var(--sp-4); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--trk-h3); }
.ab-pair p { max-width: var(--measure); }
.ab-pair p + p { margin-top: var(--sp-4); }
.ab-pair .sb-links { flex-direction: column; align-items: flex-start; gap: 0; }
@media (min-width: 64em) { .ab-pair__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ab-pair section { border-top: 2px solid var(--navy); padding-top: var(--sp-5); } }
@media (max-width: 63.99em) { .ab-pair section { border-top: 2px solid var(--navy); padding-top: var(--sp-5); } }

/* ---- FAQ and its one quiet note ---- */
.ab-faq .sb-split__b > .sb-note { margin-top: var(--sp-6); }

/* copy that points to the Facts checked date prints only while that date prints under the title (a person types it on the publish day); until then the plain version shows */
.ab-dated { display: none; }
main:has(.sb-hero .sb-checked:not(:empty)) .ab-dated { display: inline; }
main:has(.sb-hero .sb-checked:not(:empty)) .ab-undated { display: none; }

/* breadcrumb: the slash follows each earlier item, so a trail that wraps never starts a line with one */
.sb-breadcrumb li + li::before { content: none; }
.sb-breadcrumb li:not(:last-child)::after { content: "/"; color: var(--text-soft); }

/* the last word of a text link and its arrow never part (see nbArrows in tools/b3-helpers.mjs) */
.gx-nb { white-space: nowrap; }

/* tablet: the markets table is narrower, so the outline and the market name run a size smaller */
@media (min-width: 48em) and (max-width: 63.99em) { .ab-mk__svg { width: 40px; height: 40px; } .ab-mk { gap: 8px; } .sb-table--markets tbody th { font-size: 1.125rem; } }

/* grid items may shrink below their longest word, so large text never forces the page wide */
.ab-hero__main, .ab-states { min-width: 0; }
.ab-mk { flex-wrap: wrap; max-width: 100%; }
.ab-mk > span { min-width: 0; overflow-wrap: anywhere; }

/* headings: only a very long word is hyphenated, so no short word is cut in two and none can overflow at 200% text size */
h1, h2, h3 { hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: anywhere; }
/* a link inside a sentence or a table cell flows with the text (the system draws it as an inline block, which leaves holes in a wrapped line) */
p:not(.sb-p-links) > a.sb-link, li > a.sb-link, td > a.sb-link:not(.sb-cell-link) { display: inline; padding-block: 0; }

/* two links in one table cell stand one under the other */
.sb-table--markets td > a.sb-link:not(.sb-cell-link) { display: block; width: fit-content; padding-block: 10px; }

/* the numbered parts of the source line: a gap before each number, so the mark before it never touches it */
.ab-part::before { margin-left: 4px; }
/* a link in a cell is one box, like a source link, so its focus ring is one rectangle and never a pair of pieces on two lines */
.sb-table--kinds td a { display: inline-block; max-width: 100%; padding-block: 2px; }
/* the heading and its long lede start on one line */
@media (min-width: 64em) { #service .sb-head, .ab-review .sb-head { align-items: start; } }

/* ---- phone menu panel: from 40em the list runs in two columns; where the header is pinned (48em wide, 30em tall) the panel is a scrolling dropdown under the 64 px header ---- */
@media (min-width: 40em) {
  .sb-menu-panel > ul { column-count: 2; column-gap: var(--sp-7); }
  .sb-menu-panel li { break-inside: avoid; }
  .ab-menu-zip { display: none; }
}
@media (min-width: 48em) and (min-height: 30em) {
  html.js .sb-menu-panel { position: absolute; top: 100%; left: 0; right: 0; padding-top: var(--sp-2); max-height: calc(100vh - var(--h-header) - 8px); max-height: calc(100dvh - var(--h-header) - 8px); overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--shadow-menu); border-bottom: 1px solid var(--line-strong); }
  .sb-menu-panel a:focus-visible { outline-offset: -3px; }
}