/* FAQ (/faq/): page-specific rules on top of css/site.css. Tokens only; no new colours. Linked from faq.html only. */

/* page-level rules: the breadcrumb slash keeps its gap before the current page, and an H1 or H2 does not split a short word at a hyphen */
.sb-breadcrumb li[aria-current]::before { margin-right: 8px; }
h1, h2, h3, .sb-head h2 { hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: anywhere; }   /* only a very long word is hyphenated; none is cut in two at a normal size, and none can overflow at 200% text size */
/* 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) */
.sb-table .sb-link, .sb-faq__item p .sb-link, main p > .sb-link { display: inline; }
.sb-table .sb-link svg, .sb-faq__item p:not(.sb-faq__more) .sb-link svg { display: none; }   /* a link inside a sentence or a cell carries no arrow; the guide-link lines keep theirs */

/* source lines: a source link is an inline block (a link that does not fit moves to the next line whole) and the line is capped at 33em of 14 px type (about 72 characters). Balanced lines keep a date from standing alone on the last line. */
.sb-source { text-wrap: balance; }

/* hero: deep band, the H1 and the answer box in two columns from 64em; the three facts are three ruled rows */
.fq-hero .sb-hero__copy { padding-block: var(--sp-3) var(--sp-7); }
.fq-hero h1 { max-width: 11ch; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--trk-h1); }
.fq-hero .sb-checked { margin-top: var(--sp-3); }
.fq-hero .sb-answer {
  margin-top: var(--sp-5);
  /* a light panel on the dark band: its text, links and rules use the light-surface tokens */
  --text: var(--navy); --text-soft: var(--navy-soft); --rule: var(--line); --link-c: var(--link); --link-visited-c: var(--link-visited); --focus: var(--navy);
}
.fq-hero .sb-answer > p.fq-facts__lead { font-size: 1.25rem; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.fq-facts__list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; counter-reset: fact; border-top: 2px solid var(--navy); }
.fq-facts__list li { counter-increment: fact; position: relative; padding: var(--sp-3) 0 var(--sp-3) 2.5rem; border-bottom: 1px solid var(--line-strong); font-size: 1.125rem; line-height: 1.5; font-weight: 500; color: var(--navy); max-width: none; }
.fq-facts__list li::before { content: counter(fact, decimal-leading-zero); content: counter(fact, decimal-leading-zero) / ""; position: absolute; left: 0; top: var(--sp-3); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--brand); }   /* the numeral is drawn, not read: the list already says "1 of 3" */
.fq-hero .sb-answer .sb-source { margin-top: var(--sp-3); padding-top: 0; border-top: 0; max-width: 35em; text-wrap: pretty; }   /* under the last rule of the list, as wide as the line-length rule allows (35 em passes; 40 em warns at 84 characters) so the three sources do not stack in five short lines */
@media (min-width: 64em) {
  .fq-hero .sb-hero__copy { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; grid-template-rows: auto 1fr; padding-block: 24px 48px; }
  .fq-hero .sb-hero__copy > nav { grid-column: 1 / -1; }
  .fq-hero h1 { grid-column: 1 / span 5; grid-row: 2; align-self: start; }   /* the H1 starts at the top edge of the box, not halfway down it */
  .fq-hero .sb-checked { grid-column: 1 / span 5; grid-row: 3; }
  .fq-hero .sb-answer { grid-column: 6 / span 7; grid-row: 2 / span 2; margin-top: 0; }
}

/* phones: the numerals give up their column, and the jump bar loses its visible label (the nav's own aria-label names it) and runs 44 px rows */
@media (max-width: 47.99em) {
  .fq-facts__list li { padding-left: 0; }
  .fq-facts__list li::before { display: none; }
  .fq-jump__label { display: none; }
  .fq-jump__in { padding-top: 0; }
  .fq-jump a { min-height: 44px; }
  .fq-hero .sb-answer { padding: var(--sp-4); }
  .fq-hero .sb-hero__copy { padding-bottom: var(--sp-5); }
}

/* the phone and tablet menu panel is closed before the script runs, so it does not collapse and shift the layout when site.js sets [hidden]. Without :has() support the script alone hides the panel. */
@supports selector(:has(*)) {
  @media (max-width: 68.74em) {
    html.js .sb-menu-panel { display: none; }
    html.js:has(.sb-menu-btn[aria-expanded="true"]) .sb-menu-panel { display: block; }
  }
}

/* jump bar. Pinned only from 64em: header 64 + bar 48 = 112 px (the hairline under the bar is a shadow, so the bar is exactly 48 px). Below 64em it is an in-flow list that wraps: all five groups visible, 48 px rows, no sideways scroll. */
.fq-jump { border-bottom: 0; box-shadow: 0 1px 0 var(--line); }
.fq-jump__in { display: block; padding-top: var(--sp-3); }
.fq-jump__label { margin: 0; font-size: var(--fs-caption); font-weight: 600; color: var(--text-soft); }
.fq-jump ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding: 0; }
.fq-jump li { border-top: 1px solid var(--line); }
.fq-jump li:first-child, .fq-jump li:nth-child(2) { border-top: 0; }
.fq-jump li:last-child:nth-child(odd) { grid-column: 1 / -1; border-top: 1px solid var(--line); }
.fq-jump a { min-height: 48px; padding: 6px var(--sp-3) 6px 0; white-space: normal; }
@media (max-width: 63.99em) {
  .fq-jump { position: static; }
  html:has(.fq-jump) { --sticky-top: 0px; }                                   /* nothing is pinned by the bar */
}
@media (min-width: 48em) and (max-width: 63.99em) and (min-height: 30em) { html:has(.fq-jump) { --sticky-top: var(--h-header); } }   /* only the header is pinned */
@media (min-width: 48em) {
  .fq-jump ul { display: flex; flex-wrap: wrap; column-gap: var(--sp-6); }
  .fq-jump li, .fq-jump li:first-child, .fq-jump li:nth-child(2), .fq-jump li:last-child:nth-child(odd) { border-top: 0; }
  .fq-jump a { padding: 6px 0; white-space: nowrap; }
}
@media (min-width: 64em) {
  .fq-jump__in { display: flex; align-items: center; gap: var(--sp-4); padding-top: 0; }
  .fq-jump__label { display: none; }   /* the nav's own aria-label names the bar; the ul keeps aria-labelledby, which reads hidden text */
  .fq-jump ul { flex: 1 1 auto; min-width: 0; column-gap: 0; }
  .fq-jump a { padding: 0 14px; }
  .fq-jump li:first-child a { padding-left: 0; }
}
@media (min-width: 75em) {
  .fq-jump__label { display: block; white-space: nowrap; flex: none; padding-right: var(--sp-4); border-right: 1px solid var(--line-strong); }
  .fq-jump li:first-child a { padding-left: 14px; }
}

/* group head: a drawn glyph, the H2, a count under a rule */
.fq-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.fq-glyph { color: var(--navy); flex: none; }
.fq-count { align-self: stretch; max-width: 14rem; padding-top: var(--sp-2); border-top: 2px solid var(--navy); font-size: var(--fs-caption); font-weight: 600; color: var(--text-soft); }

/* questions: the target question is marked, so a shared link lands on a visible answer */
.sb-faq__item { scroll-margin-top: calc(var(--sticky-top) + 16px); }
.sb-faq__item:has(> h3:target) { background: var(--paper); box-shadow: inset 4px 0 0 var(--sky-text); padding-left: var(--sp-5); padding-right: var(--sp-4); }
.sb-faq__item h3 { font-size: var(--fs-h4); line-height: 1.28; letter-spacing: -.008em; }
.sb-faq__item .sb-definition { margin-block: var(--sp-4); }
.sb-faq__item .sb-faq__more { margin-top: var(--sp-1); }
.sb-faq__item .sb-faq__more.sb-p-links { gap: 0 var(--sp-5); }
.sb-faq__item > p:not(.sb-source):not(.sb-faq__more) { max-width: var(--measure); }
.sb-faq__item:not(:has(.sb-faq__more)) { padding-bottom: calc(var(--sp-5) + 10px); }   /* an answer with no guide link ends as far below its text as the others end below their link text (the link row has 10 px of padding) */

/* markets: state outlines, the three-market table, one column per market */
.pb-state { width: 44px; height: 44px; flex: none; }
.pb-state path.o { fill: var(--sky-soft); stroke: var(--navy); stroke-width: 1.8; stroke-linejoin: round; }
.pb-state circle { fill: var(--gold); stroke: var(--navy); stroke-width: 1.6; }
.pb-mk { display: inline-flex; align-items: center; gap: var(--sp-3); }
.fq-guides { margin-top: var(--sp-4); }
.fq-markets { display: grid; gap: var(--sp-7) var(--sp-6); margin-top: var(--sp-8); }
@media (min-width: 64em) { .fq-markets { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); align-items: start; } }
.fq-market__t { display: flex; align-items: center; gap: var(--sp-3); margin: 0; padding-bottom: var(--sp-3); border-bottom: 2px solid var(--navy); font-size: var(--fs-h4); font-weight: 600; }
.fq-market .sb-faq__item:first-child { border-top: 0; }
.fq-market .sb-faq__item h3 { font-size: var(--fs-h4); }

/* the quiet note and the numbered sources */
.fq-note { margin: var(--sp-7) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--rule); max-width: 46rem; }   /* the one quiet line, closing the Sources band */
.fq-sources-lede { margin-top: var(--sp-3); color: var(--text-soft); max-width: 46rem; }
.fq-sources-lede + .sb-links, .sb-sources h2 + .fq-sources-lede { margin-top: var(--sp-3); }
.sb-sources .sb-links { margin-top: var(--sp-4); }
@media (min-width: 64em) {
  .sb-sources ol.pb-sources { max-width: none; columns: 2; column-gap: var(--sp-8); }
  .sb-sources ol.pb-sources li { break-inside: avoid; max-width: 31rem; }
}
@media print { .sb-faq__item { break-inside: avoid; } }

/* 200% text size: a grid column may shrink below its longest word, and a long word may break */
.fq-markets > *, .fq-market > * { min-width: 0; }
.fq-market__t span { min-width: 0; overflow-wrap: anywhere; }

/* spacing: the source line under the three-market table sits 16 px below the table, like every other source line sits below its text */
.sb-sheet + .sb-source { margin-top: var(--sp-4); }

/* closing photograph: the "Illustrative photograph" caption is a strip below the picture, not a chip over it */
.sb-closing .sb-survey { --cap-h: 44px; display: flex; flex-direction: column; justify-content: flex-end; }
.sb-closing .sb-survey picture { bottom: var(--cap-h); }
.sb-closing .sb-survey .sb-cap { position: static; display: flex; align-items: center; min-height: var(--cap-h); padding: 6px var(--gutter); }