/* guide-compare-quotes.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 blank sheet drawn on the right (the same sheet the guide prints below) ---- */
.gq-hero .sb-hero__copy { display: grid; gap: var(--sp-6) var(--col-gap); }
.gq-sheet { margin: 0; width: 100%; max-width: 32rem; background: var(--paper); border: 1px solid var(--navy); }
.gq-sheet__row { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 0 12px; align-items: end; padding: 16px 16px 12px; border-top: 1px solid var(--rule); font-size: .9375rem; line-height: 1.35; color: var(--navy); }
.gq-sheet__row:first-child { border-top: 0; }
.gq-sheet__row > span { font-weight: 600; }
.gq-sheet__row i { display: block; height: 28px; border-bottom: 1px solid var(--navy-soft); }
.gq-sheet__row--head { background: var(--navy); color: var(--paper); padding-block: 14px; align-items: center; }
/* the sheet is a drawing of the table further down. Beside the answer (64em and up) it is the page's first data picture; stacked under the answer it would only add height, so it is not drawn */
@media (max-width: 63.99em) { .gq-sheet { display: none; } }
@media (min-width: 64em) {
  /* the breadcrumb, the H1 and the answer are placed on the grid, so the sheet can start on the H1's row instead of floating at the foot of the answer */
  .gq-hero .sb-hero__copy { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: auto; gap: 0 var(--col-gap); align-items: start; padding-bottom: var(--sp-8); }
  .gq-hero__main { display: contents; }
  .gq-hero__main > nav { grid-column: 1 / -1; grid-row: 1; }
  .gq-hero__main > h1 { grid-column: 1 / span 7; grid-row: 2; }
  .gq-hero__main > .sb-checked { grid-column: 1 / span 7; grid-row: 3; }
  .gq-hero__main > .sb-answer { grid-column: 1 / span 7; grid-row: 4; }
  .gq-sheet { grid-column: 8 / span 5; grid-row: 2 / span 3; justify-self: end; align-self: stretch; margin-top: var(--sp-3); display: grid; grid-template-rows: auto repeat(4, minmax(0, 1fr)); }
  .gq-sheet__row { padding-bottom: 16px; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 64em) {
  .gq-hero__main > * { animation: sb-rise .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); }
}

/* ---- the opening paragraphs, with the three tools of the guide beside them ---- */
.gq-intro { padding-block: var(--sp-8); }
.gq-intro .sb-split__a > .sb-eyebrow { margin: 0 0 var(--sp-3); font-size: var(--fs-caption); line-height: 1.4; color: var(--text-soft); }
.gq-tools { max-width: 28rem; }
.gq-lead { font-size: var(--fs-lede); line-height: 1.45; color: var(--navy); max-width: 36rem; }
.gq-intro .sb-split__b > p + p { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--rule); }

/* ---- one section template for the whole page: the heading (and its lede) in columns 1 to 4, the content from column 6, one H2 size ---- */
.gq-full .sb-head { margin-bottom: var(--sp-6); }
.gq-full .sb-head p, .gq-markets .sb-head p { font-size: 1.1875rem; line-height: 1.5; }
.gq-split .sb-split__a > p { font-size: 1.1875rem; line-height: 1.5; max-width: 32rem; }
/* question headings are long, so they run a size smaller than a pillar's */
.gq-split .sb-split__a h2, .gq-full .sb-head h2, .gq-markets .sb-head h2, #related .sb-head h2, .gq-sources h2 { font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem); }
@media (min-width: 64em) {
  .gq-full .sb-head, .gq-markets .sb-head { align-items: start; }
  .gq-full .sb-head h2, .gq-markets .sb-head h2 { grid-column: 1 / span 4; }
  .gq-full .sb-head p, .gq-markets .sb-head p { grid-column: 6 / span 7; max-width: var(--measure); }
}
.gq-full h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--trk-h3); }
.gq-full > .wrap > * + * { margin-top: var(--sp-5); }
.gq-full > .wrap > .sb-head { margin-top: 0; }
.gq-full > .wrap > p { max-width: var(--measure); }
.gq-full > .wrap > .sb-source { margin-top: var(--sp-3); max-width: 40em; }
.gq-full > .wrap > .sb-source + p { margin-top: var(--sp-6); }
.gq-full > .wrap > .sb-source + .sb-source { margin-top: var(--sp-3); }
@media (min-width: 48em) {
  .gq-full .sb-table--lines tbody th { width: 22%; padding-right: 28px; }
  .gq-full .sb-table--lines td { width: 39%; padding-right: 28px; }
  .gq-full .sb-table--lines td:last-child { padding-right: 0; }
  .gq-full .sb-table--contract tbody th { width: 22%; padding-right: 28px; }
  .gq-full .sb-table--contract td:nth-child(2) { width: 50%; padding-right: 28px; }
}

/* ---- the roof, drawn from the one sentence it illustrates ---- */
.gq-roof { margin: var(--sp-6) 0 0; padding: var(--sp-5) var(--sp-5) var(--sp-4); max-width: 40rem; background: var(--paper); border: 1px solid var(--line-strong); }
.gq-roof__pair { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4) var(--sp-6); }
.gq-roof__svg { flex: 1 1 200px; width: 100%; max-width: 290px; height: auto; }
.gq-roof__svg text { font-family: var(--font); font-size: 20px; font-weight: 500; fill: var(--navy); }
.gq-roof__svg .lab { font-weight: 600; }
.gq-roof__svg .face { font-size: 15px; font-weight: 600; }
.gq-roof__svg .face.on { fill: var(--paper); }
.gq-roof__svg .ring { fill: var(--sky-soft); stroke: var(--navy); stroke-width: 2; }
.gq-roof__svg .plan { fill: var(--paper); stroke: var(--navy); stroke-width: 2; }
.gq-roof__svg .plan.hot { fill: var(--navy); }
.gq-roof__svg .ridge { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; }
.gq-roof__svg .band { fill: var(--sky-soft); stroke: none; }
.gq-roof__svg .base { fill: none; stroke: var(--navy-soft); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.gq-roof__svg .wall { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; }
.gq-roof figcaption { margin-top: var(--sp-3); font-size: var(--fs-caption); line-height: 1.5; color: var(--text-soft); max-width: 34rem; }

/* ---- the multipliers: four short rows, the figure large on the right ---- */
.gq-mult { margin-top: var(--sp-5); max-width: 26rem; }
.gq-mult tbody th { font-size: var(--fs-body); font-weight: 600; padding-block: 12px; }
.gq-mult tbody td { padding-block: 8px; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--brand); }

/* ---- the tools: the checklist and the blank table sit on paper, on a tinted band (these two print) ---- */
.gq-checklist { background: var(--paper); border: 1px solid var(--navy); padding: var(--sp-5); }
.gq-checklist__head p { margin-top: var(--sp-2); color: var(--text-soft); max-width: 24rem; }
.gq-checklist .sb-checklist { margin-top: var(--sp-5); }
.gq-checklist .sb-checklist li { break-inside: avoid; }
/* on screen the boxes are for the printed sheet, not controls: a quieter outline, nothing that invites a click; in print they are drawn in black */
.gq-checklist .sb-checklist li::before { border-color: var(--navy-soft); background: transparent; }
.gq-blank { margin-top: var(--sp-7); }
.gq-blank > p { margin: var(--sp-2) 0 var(--sp-5); color: var(--text-soft); max-width: var(--measure); }
@media (min-width: 64em) {
  .gq-checklist { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding: var(--sp-6); }
  .gq-checklist__head { grid-column: 1 / span 4; }
  .gq-checklist .sb-checklist { grid-column: 5 / span 8; margin-top: 0; columns: 2; column-gap: var(--sp-6); }
}

/* the equation in the units section runs a size smaller so it stays on one line */
.gq-split .sb-worked__eq { font-size: clamp(1.375rem, 1rem + 1.5vw, 1.875rem); }
/* the blank sheet: the quote columns are for writing, so they share what the two label columns leave; the site default 120 px minimum squeezes the labels on a tablet */
.gq-blank .sb-table--sheet tbody td:nth-child(n+3) { min-width: 0; }
@media (min-width: 48em) { .gq-blank .sb-table--sheet thead th:nth-child(1) { width: 30%; } .gq-blank .sb-table--sheet thead th:nth-child(2) { width: 22%; } }
@media (min-width: 64em) { .gq-blank .sb-table--sheet tbody td:nth-child(n+3) { min-width: 132px; } }
/* the table closes with a rule at the foot, and the row for what the price leaves out is tall enough to list items by hand */
@media (min-width: 48em) {
  .gq-blank .sb-table--sheet tbody tr:last-child > * { border-bottom: 1px solid var(--navy); }
  .gq-blank .sb-table--sheet tr.gq-tall > * { height: 7.5rem; }
}
/* phone: each row stays a small form, and its three blank lines sit in a row instead of one under another */
@media (max-width: 47.99em) {
  .gq-blank .sb-table--sheet.sb-table--stack tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; align-content: start; }
  .gq-blank .sb-table--sheet.sb-table--stack tbody tr > :not(.sb-blank) { grid-column: 1 / -1; }
  .gq-blank .sb-table--sheet.sb-table--stack td.sb-blank { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 6px; min-height: 72px; padding-top: 12px; }
  .gq-blank .sb-table--sheet.sb-table--stack td.sb-blank::before { margin: 0; }
  .gq-blank .sb-table--sheet.sb-table--stack td.sb-blank::after { flex: none; width: 100%; height: 28px; }
  .gq-blank .sb-table--sheet.sb-table--stack tr.gq-tall td.sb-blank { min-height: 120px; }
}

/* ---- worked example: three made-up quotes, then the table in the same units ---- */
.gq-quotes { display: grid; margin: 0; border-top: 2px solid var(--navy); }
.gq-quotes__q { padding: var(--sp-4) 0; border-bottom: 1px solid var(--rule); }
.gq-quotes dt { font-size: var(--fs-h4); font-weight: 600; line-height: 1.25; }
.gq-quotes dd { margin: var(--sp-1) 0 0; max-width: 30rem; }
@media (min-width: 48em) {
  .gq-quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-6); border-top: 0; }
  .gq-quotes__q { border-top: 2px solid var(--navy); border-bottom: 0; }
}
/* from 64em the three quote blocks sit exactly over the three quote columns of the table (a label column of 24 percent, then three equal columns) */
@media (min-width: 64em) {
  .gq-quotes { margin-left: 24%; column-gap: 0; }
  .gq-quotes__q { margin-right: 20px; }
}
/* equal quote columns; a result (= 4.0) never drops to a line of its own, and below 64em an equation may wrap before the result but not inside it */
.gq-full .sb-table--worked { table-layout: fixed; }
.gq-res { white-space: nowrap; }
@media (min-width: 64em) { .gq-eq { white-space: nowrap; } }
.gq-full .sb-table--worked thead th:last-child, .gq-full .sb-table--worked tbody td:last-child { width: auto; white-space: normal; }
/* the site draws the last column of a worked table as the answer; here the last column is Quote C, one of three made-up quotes, and none of them is the answer */
.gq-full .sb-table--worked tbody td:last-child { font-weight: 400; color: inherit; }
@media (min-width: 48em) { .gq-full .sb-table--worked thead th:first-child { width: 24%; } .gq-full .sb-table--worked td { padding-right: 20px; } .gq-full .sb-table--worked td:last-child { padding-right: 0; } }
sup { font-size: max(.875rem, .7em); }   /* a superscript is still 14 px or more */

/* ---- the market band: the market name is the link ---- */
.gq-markets .sb-market h3 a { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; color: var(--text-on-dark); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--rule-on-dark); text-underline-offset: .22em; }
.gq-markets .sb-market h3 a:visited { color: var(--text-on-dark); }
.gq-markets .sb-market h3 a:hover { text-decoration-color: var(--text-on-dark); text-decoration-thickness: 2px; }
.gq-markets .sb-market h3 a svg { flex: none; width: 22px; height: 22px; color: var(--gold); transition: transform var(--t-micro) var(--ease); }
.gq-markets .sb-market h3 a:hover svg, .gq-markets .sb-market h3 a:focus-visible svg { transform: translateX(4px); }
.gq-markets .sb-market h3 { margin-bottom: var(--sp-3); }
.sb-links--foot { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--rule); }

/* ---- closing, note, sources ---- */
@media (min-width: 64em) { .sb-closing .sb-survey { justify-self: end; width: 100%; max-width: 660px; } }
.sb-closing h2 + .gq-close-lede { margin: calc(-1 * var(--sp-3)) 0 var(--sp-5); max-width: 30rem; color: var(--text-soft); }
.gq-notewrap { padding-top: var(--sp-7); }
.gq-sources { padding-top: var(--sp-7); }
.gq-sources__lede { margin-top: var(--sp-3); color: var(--text-soft); max-width: 46rem; }
@media (min-width: 64em) {
  .gq-sources ol { max-width: none; column-count: 2; column-gap: var(--sp-8); }
  .gq-sources li { break-inside: avoid; }
}

/* ---- print: only the checklist and the blank table (the guides index says both print from the page) ---- */
@media print {
  main > :not(#sheet) { display: none !important; }
  #sheet { background: none; padding: 0; }
  #sheet .sb-head { display: block; margin-bottom: 12pt; }
  #sheet .sb-head p { display: none; }
  .gq-checklist, .gq-blank { border: 0; padding: 0; }
  .gq-checklist { display: block; }
  .gq-checklist .sb-checklist { columns: 2; }
  .gq-checklist .sb-checklist li::before { border-color: #000; }
  .sb-sheet--pad { padding: 0; }
  .gq-blank { break-before: page; margin-top: 0; }
  /* all twelve rows on one sheet, each still tall enough to write in */
  #sheet .sb-table--sheet { font-size: 10pt; }
  #sheet .sb-table--sheet tbody th, #sheet .sb-table--sheet tbody td { padding: 7pt 8pt; }
  #sheet .sb-table--sheet thead th { padding: 6pt 8pt; }
  #sheet .sb-table--sheet caption { padding: 6pt 8pt; }
  #sheet .gq-blank { margin-top: 0; }
  #sheet .sb-table--sheet tr { break-inside: avoid; }
  /* the sheet prints as a table whatever the paper width (Letter with ordinary margins is narrower than 48em, which would print the phone layout) */
  #sheet table.sb-table--sheet { display: table; width: 100%; }
  #sheet .sb-table--sheet thead { display: table-header-group; }
  #sheet .sb-table--sheet tbody { display: table-row-group; }
  #sheet .sb-table--sheet tr { display: table-row; padding: 0; border: 0; }
  #sheet .sb-table--sheet th, #sheet .sb-table--sheet td { display: table-cell; width: auto; border: 0; border-bottom: 1px solid #000; }
  #sheet .sb-table--sheet thead th { border-bottom: 2px solid #000; }
  #sheet .sb-table--sheet td + td { border-left: 1px solid #000; }
  #sheet .sb-table--sheet td[data-label]::before, #sheet .sb-table--sheet td.sb-blank::after { content: none; display: none; }
  #sheet .sb-table--sheet td:empty, #sheet .sb-table--sheet td.sb-blank { display: table-cell; min-height: 0; }
  #sheet .sb-table--sheet tr.gq-tall > * { height: .7in; }
  #sheet .sb-table--sheet caption { display: table-caption; }
  #sheet .sb-table--sheet thead th:nth-child(1) { width: 34%; }
  #sheet .sb-table--sheet thead th:nth-child(2) { width: 22%; }
  #sheet .sb-table--sheet thead th:nth-child(n+3) { width: 14.67%; }
  #sheet .sb-table--sheet tbody th { font-size: 10pt; }
  #sheet .sb-table--sheet tbody tr:last-child > * { border-bottom: 1px solid #000; }
}

/* 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); }
.sb-breadcrumb li:nth-last-child(2)::after { margin-right: 8px; }   /* the current page has no link padding of its own, so its slash carries the gap */
.sb-breadcrumb [aria-current] { padding-inline: 0; }

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

/* grid items may shrink below their longest word, so large text never forces the page wide */
.gq-hero__main { min-width: 0; }

/* jump bar: below 1280 px the eleven sections do not fit one row, so they are a wrapped block of 44 px chips in the page: every section is in view at once and nothing is pinned over the text. From 1280 px the bar is one pinned row. */
@media (max-width: 79.99em) {
  .sb-jump { position: static; }
  .sb-jump ul { flex-wrap: wrap; overflow: visible; gap: 8px; padding: 12px 0 14px; }
  .sb-jump a { min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); background: var(--surface); }
  .sb-jump li:first-child a { padding-left: 14px; }
  .sb-jump a:focus-visible { outline-offset: 2px; }
}
/* what is pinned: nothing on a phone, the header from 48em to 1280 px */
@media (max-width: 47.99em) { html:has(.sb-jump) { --sticky-top: 0px; } }
@media (min-width: 48em) and (max-width: 79.99em) and (min-height: 30em) { html:has(.sb-jump) { --sticky-top: var(--h-header); } }

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