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

/* This page has no ZIP form, so its one filled button is the header action (site.js switches it only when a form exists). */
html:has(.gd-hero) .sb-header__cta { background: var(--action-bg); border-color: var(--action-bg); color: var(--paper); }
html:has(.gd-hero) .sb-header__cta:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--paper); }

/* ============================================================ FIRST SCREEN: the answer on the left, where to click on the right */
.gd-hero .sb-hero__copy { display: grid; gap: var(--sp-6) var(--sp-8); padding-block: 8px var(--sp-7); }
.gd-hero__main, .gd-hero__def, .gd-route { min-width: 0; }
/* the wrap is set by the column, not by a ch unit, so the fallback face and Mona Sans break the title in the same place (no jump when the font arrives) */
.gd-hero h1 { max-width: none; }
@media (min-width: 64em) { .gd-hero h1 { max-width: 9em; } }   /* two lines in both faces, so the font swap never changes the line count */
.gd-hero .sb-answer { margin-top: var(--sp-5); max-width: 40rem; padding: var(--sp-5); }
.gd-hero .sb-answer > p:first-child { font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.3125rem); }

/* the two definitions: plain, soft, no heavy rule */
.gd-def { display: block; border-top: 1px solid var(--rule); max-width: 40rem; }
.gd-def dt { display: block; padding: 14px 0 0; border: 0; font-weight: 600; }
.gd-def dd { display: block; padding: 2px 0 14px; border-bottom: 1px solid var(--rule); max-width: 36rem; color: var(--text-soft); }

/* the route sheet: a white sheet on the tint, a ruled table with the six stages joined by one line */
.gd-route { background: var(--paper); border: 1px solid var(--line-strong); border-top: 2px solid var(--navy); padding: var(--sp-5) var(--sp-4) var(--sp-4); }
.gd-route .sb-head { display: block; margin-bottom: var(--sp-4); }
.gd-route .sb-head h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--trk-h3); max-width: 20em; }
.gd-route .sb-head p { margin-top: var(--sp-2); font-size: var(--fs-body); line-height: 1.5; color: var(--text-soft); max-width: 36rem; }
.gd-route .sb-table { counter-reset: route; }
.gd-route .sb-table caption { font-size: var(--fs-ui); }
.gd-route .sb-table thead th { font-size: var(--fs-ui); }
.gd-route .sb-table tbody tr { counter-increment: route; }
.gd-route .sb-table tbody th { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -.006em; padding-top: 20px; padding-bottom: 20px; }
.gd-route .sb-table tbody th::before { content: counter(route, decimal-leading-zero); content: counter(route, decimal-leading-zero) / ""; display: block; margin-bottom: 4px; font-size: var(--fs-caption); font-weight: 600; letter-spacing: .08em; color: var(--text-soft); }
.gd-route .sb-table td { padding-top: 20px; padding-bottom: 20px; font-size: var(--fs-ui); line-height: 1.45; }
.gd-route .sb-table td .sb-link { font-size: var(--fs-ui); line-height: 1.5; }   /* one line is 24 px + the link's 20 px of padding = a 44 px target */
@media (min-width: 48em) {
  .gd-route { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
  .gd-route .sb-table tbody th { width: 38%; padding-left: 34px; padding-right: 20px; position: relative; font-size: var(--fs-ui); line-height: 1.35; }
  .gd-route .sb-table td { width: 31%; padding-right: 20px; }
  .gd-route .sb-table td:last-child { padding-right: 0; }
  .gd-route .sb-table thead th:first-child { padding-left: 34px; }
  /* the line that joins stage 01 to stage 06 (drawn; the numerals carry the order in words) */
  .gd-route .sb-table tbody th { background: linear-gradient(var(--line-strong), var(--line-strong)) 6px 0 / 2px 100% no-repeat; }
  .gd-route .sb-table tbody tr:first-child th { background-position: 6px 31px; background-size: 2px calc(100% - 31px); }
  .gd-route .sb-table tbody tr:last-child th { background-size: 2px 31px; }
  .gd-route .sb-table tbody th::after { content: ""; position: absolute; left: 0; top: 24px; width: 14px; height: 14px; box-sizing: border-box; border: 2px solid var(--navy); border-radius: 50%; background: var(--paper); }
}
@media (max-width: 47.99em) {
  .gd-route .sb-table tbody tr { padding: 18px 0; }
  .gd-route .sb-table tbody th { padding-top: 0; padding-bottom: 6px; font-size: 1.25rem; }
  .gd-route .sb-table td { padding-top: 8px; padding-bottom: 0; }
}

/* 64em to 80em: answer and definitions in two columns, the sheet full width under them */
@media (min-width: 64em) {
  .gd-hero .sb-hero__copy { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-7) var(--col-gap); padding-block: 8px var(--sp-8); }
  .gd-hero__main { grid-column: 1 / span 7; grid-row: 1; }
  .gd-hero__def { grid-column: 9 / span 4; grid-row: 1; align-self: end; }
  .gd-route { grid-column: 1 / -1; grid-row: 2; }
}
/* 80em and wider: answer and definitions in the left column, the sheet in the right, both in the first screen */
@media (min-width: 80em) {
  .gd-hero .sb-hero__copy { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; gap: var(--sp-6) var(--sp-8); padding-block: 8px var(--sp-8); }
  .gd-hero__main { grid-column: 1; grid-row: 1; }
  .gd-hero__def { grid-column: 1; grid-row: 2; align-self: start; }
  .gd-route { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin-top: var(--sp-4); }
}

/* ============================================================ ALL THE GUIDES: a numbered stage on the left, ruled rows on the right */
.gd-all { counter-reset: gd; }
.gd-all__head { padding-bottom: var(--sp-6); border-top: 1px solid var(--line); }
.gd-all__head .sb-head { margin-bottom: 0; }
.gd-group { padding-block: var(--sp-7) var(--sp-8); }
.gd-group + .gd-group { border-top: 1px solid var(--line); }
.gd-group__in { display: grid; gap: var(--sp-4) var(--col-gap); }
.gd-group__head { counter-increment: gd; }
.gd-group__head::before { content: counter(gd); content: counter(gd) / ""; display: block; padding-top: var(--sp-4); margin-bottom: var(--sp-4); border-top: 2px solid var(--navy); font-size: var(--fs-stat); font-weight: 600; line-height: .95; letter-spacing: -.04em; color: var(--brand); }
.gd-group__head h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--trk-h3); max-width: 14em; }
.sb-guide-list.gd-list { display: block; border-top: 2px solid var(--navy); max-width: 38rem; }
.sb-guide-list .gd-row { display: flex; flex-direction: column; align-items: flex-start; padding: var(--sp-4) 0 var(--sp-6); border-top: 0; border-bottom: 1px solid var(--rule); break-inside: avoid; }
/* the stage tag: one of four, the only all-caps text in the row, 14 px */
.gd-tag { margin: 0; font-size: var(--fs-caption); font-weight: 600; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.gd-row .sb-guide-link { display: inline-block; min-height: 44px; padding-block: 8px; margin-top: 2px; font-size: var(--fs-h4); font-weight: 600; line-height: 1.25; letter-spacing: -.008em; color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); text-underline-offset: .22em; }
.gd-row .sb-guide-link:visited { color: var(--text); }
.gd-row .sb-guide-link:hover, .gd-row .sb-guide-link:focus-visible { text-decoration-color: var(--navy); text-decoration-thickness: 2px; }
.gd-row .sb-guide-link svg { display: inline-block; margin-left: .45em; vertical-align: -.12em; width: 20px; height: 20px; color: var(--sky-text); transition: transform var(--t-micro) var(--ease); }
.gd-row .sb-guide-link:hover svg, .gd-row .sb-guide-link:focus-visible svg { transform: translateX(4px); }
.gd-row > p:not([class]) { margin-top: var(--sp-2); color: var(--text-soft); }
.gd-lead { font-weight: 500; color: var(--text); }
.gd-row > .sb-p-links { margin-top: var(--sp-3); }

/* the source line: a label, then one block per citation. The link is the publisher and the title; the date and the punctuation sit outside it. Each citation is a 44 px row and the whole row is the link's hit area (a stretched ::after). */
.gd-src { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--sp-3); align-items: start; margin-top: var(--sp-3); line-height: 1.6; max-width: 33em; }
.gd-row > .gd-src { margin-top: var(--sp-3); }
.gd-src__k { grid-column: 1; padding-block: 0; font-weight: 600; color: var(--text); }
.gd-cite { grid-column: 2; position: relative; display: block; min-height: 44px; padding-block: 0; }
.gd-src a { display: inline; padding: 0; }
.gd-src a::after { content: ""; position: absolute; inset: 0; }
.gd-cite time { white-space: nowrap; }
#federal-credit .gd-src { margin-top: var(--sp-2); }
/* where a lookup is listed: a quiet label and three market links */
.gd-where { margin-top: var(--sp-3); font-size: var(--fs-caption); font-weight: 600; color: var(--text); }
.gd-where__list { margin-top: 0; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; }
.gd-row .sb-checked { margin-top: var(--sp-2); }

@media (min-width: 64em) {
  .gd-group__in { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .gd-group__head { grid-column: 1 / span 4; align-self: start; }
  .sb-guide-list.gd-list { grid-column: 6 / span 6; }
}
@media (min-width: 64em) and (min-height: 30em) { .gd-group__head { position: sticky; top: calc(var(--sticky-top) + var(--sp-6)); } }
/* 80em and wider: rows two across, rules lined up; the stage number stays beside them */
@media (min-width: 80em) {
  .gd-group__head { grid-column: 1 / span 3; }
  .sb-guide-list.gd-list { grid-column: 4 / span 9; max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-7); align-content: start; }
  /* a list of three rows stays in one column, in document order: rows placed in two columns around a tall one would put the last link of that row below the first link of the row after it */
  .sb-guide-list.gd-list:has(> .gd-row:nth-child(3):last-child) { grid-column: 4 / span 6; grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================ the federal credit module, the market ledger, the sourcing strip, the questions */
.gd-ruled, .gd-strip { border-top: 1px solid var(--line); }
.sb-strip.gd-strip { background: var(--paper); }
.sb-strip__txt p { max-width: 34rem; }
.sb-strip__txt p + p { margin-top: var(--sp-3); }
.gd-markets .sb-market p { font-size: var(--fs-body); }
.gd-markets .sb-head p { font-size: 1.25rem; line-height: 1.5; }
@media (min-width: 64em) { .gd-markets .sb-head { align-items: start; } }
/* the footer row of the ledger: the sentence, then the three links as one ruled column */
.gd-foot { margin-top: var(--sp-6); padding-top: var(--sp-5); }
.gd-foot__lead { max-width: 30rem; color: var(--text-soft-on-dark); }
.gd-foot__k { font-weight: 600; color: var(--text-on-dark); }
.gd-foot__links { display: flex; flex-direction: column; margin-top: 0; gap: 0; }
.gd-foot__links .sb-link { padding-block: 10px; }
@media (min-width: 64em) { .gd-foot { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; } .gd-foot__lead { grid-column: 1 / span 5; } .gd-foot__links { grid-column: 8 / span 5; } }

/* ============================================================ the quiet note and the sources */
.gd-notewrap { padding-top: var(--sp-7); }
.gd-sources { padding-top: var(--sp-7); }
.gd-sources__lede { margin-top: var(--sp-3); color: var(--text-soft); max-width: 46rem; }
@media (min-width: 64em) {
  .gd-sources .sb-sources ol, .gd-sources ol { max-width: none; column-count: 2; column-gap: var(--sp-8); }
  .gd-sources li { break-inside: avoid; max-width: 32rem; }
}
.gd-sources li { line-height: 1.6; }
.gd-sources time, .sb-source time { white-space: nowrap; }

/* 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; }

/* 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; }
/* a link inside a ruled list of links stays a 44 px row */
.gd-foot__links > a.sb-link { display: inline-block; padding-block: 10px; }