/* pages-guide-buy.css: /resources/buying-refurbished-computers/ only (wireframe P13b, 2026-10-05).
   Loaded after site.css, group-b.css, pages-g5.css and pages-g8.css; the guide uses their article frame (inner hero,
   answer box, sticky contents, 18px prose). This file adds the parts this guide needs: jump links, the three
   definitions, reasons, trade-offs, the printable checklist, open myths, the email template, the one-page brief and
   the "How Regadget does it" panel. Tokens from site.css only: no new colours or fonts. */

/* ---------- hero: jump links under the answer box ---------- */
.gb-jump { align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.gb-jump__h { font-size: var(--fs-small); font-weight: 700; color: var(--text-2); }
.gb-jump ul { display: flex; flex-wrap: wrap; gap: var(--s2); }
.gb-jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px 0 14px; border-radius: 12px; font-size: 0.9375rem;
  box-shadow: inset 0 0 0 1px rgb(18 19 17 / 0.45); background: var(--paper); color: var(--ink); font-weight: 600; text-decoration: none;
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.gb-jump a svg { width: 16px; height: 16px; margin-top: -4px; flex: none; color: var(--green-text); }
.gb-jump a:hover { box-shadow: inset 0 0 0 2px var(--lime); background: var(--floor); }

/* ---------- §2 definitions: one bordered group, refurbished row tinted (as the reuse column on the sibling guide) ---------- */
.g5-prose .gb-defs { margin-top: var(--s5); border-radius: 20px; box-shadow: inset 0 0 0 1px var(--hairline); overflow: hidden; }
.gb-defs p { padding: var(--s5) var(--s6); }
.g5-prose .gb-defs p + p { margin-top: 0; border-top: 1px solid var(--hairline); }
.gb-defs .gb-defs__key { background: var(--floor); color: var(--ink); }
.g5-prose .gb-defs + .lede { margin-top: var(--s6); }

/* ---------- §3 reasons: heading + paragraph rows on hairlines ---------- */
.gb-reasons { margin-top: var(--s2); }
.gb-reason { padding: var(--s5) 0; border-top: 1px solid var(--hairline); }
.gb-reason:first-child { border-top: 0; padding-top: var(--s2); }
.gb-reason:last-child { padding-bottom: 0; }
.gb-reason h3 { margin-bottom: var(--s2); }

/* links to outside sources inside the prose: inline, hit area grown without opening the line spacing */
.g5-prose a[data-nav="citation"] { padding-block: 6px; }

/* ---------- §4 trade-offs: numbered, lime numerals (the site's .steps badge, smaller) ---------- */
.gb-trade { counter-reset: gbt; display: grid; gap: var(--s5); margin-top: var(--s5); }
.gb-trade > li { counter-increment: gbt; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--s4); align-items: start; }
.gb-trade > li::before { content: counter(gbt); width: 36px; height: 36px; display: grid; place-items: center; padding-top: 3px; border-radius: 50%;
  background: var(--lime); color: var(--ink); font-weight: 700; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.g5-prose .gb-answer { margin-top: var(--s6); padding: var(--s5) var(--s6); border-radius: 20px; background: var(--floor); color: var(--ink); font-weight: 600; line-height: 1.5; }

/* ---------- §5 checklist: a box to tick on paper beside each question ---------- */
.gb-check { margin-top: var(--s5); border-top: 1px solid var(--hairline); }
.gb-check > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--hairline); break-inside: avoid; }
.gb-box { width: 24px; height: 24px; margin-top: 3px; border: 2px solid var(--ink); border-radius: 6px; background: var(--paper); }
.gb-check strong { display: block; margin-bottom: 2px; }

/* buttons under a block (print, copy) */
.gb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s6); }
.gb-actions:has(> .btn[hidden]:only-child) { display: none; }
.gb-actions .btn { min-height: 48px; font-size: 1rem; }
.gb-actions .btn svg { width: 18px; height: 18px; margin-top: -3px; flex: none; }

/* ---------- §6 myths: open Q&A, two columns where the prose column allows ---------- */
.gb-myths { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--s8); margin-top: var(--s2); }
.gb-myth { padding: var(--s5) 0; border-top: 1px solid var(--hairline); }
.gb-myth:first-child { border-top: 0; }
.gb-myth h3 { margin-bottom: var(--s2); }
.gb-myth p { font-size: 1.0625rem; line-height: 1.6; }
@media (min-width: 48rem) {
  .gb-myths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gb-myth:nth-child(2) { border-top: 0; }
}

/* ---------- §7 make the case: the email ---------- */
.gb-email { margin-top: var(--s8); }
.gb-brief { margin-top: var(--s12); }
.gb-case h3 { font-size: 1.25rem; }
.gb-mail { margin-top: var(--s4); border-radius: 24px; overflow: hidden; background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 18px 36px -28px rgb(18 19 17 / 0.45); }
.gb-mail__subject { padding: var(--s4) var(--s6) 14px; background: var(--floor); border-bottom: 1px solid var(--hairline); color: var(--ink); font-weight: 600; line-height: 1.45; }
.gb-mail__label { color: var(--text-2); font-weight: 700; margin-right: 4px; }
.gb-mail__body { padding: var(--s6); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }
.g5-prose .gb-mail__body p + p, .g5-prose .gb-mail__body ul + p, .g5-prose .gb-mail__body p + ul { margin-top: 14px; }
.gb-mail__body ul { list-style: disc; padding-left: 1.2em; }
.gb-mail__body li + li { margin-top: 8px; }
.gb-mail__body li::marker { color: var(--green-text); }
.gb-mail ::selection, .gb-sheet ::selection { background: var(--lime); color: var(--ink); }

/* the [brackets] to fill in: a light lime mark so they are easy to find */
.gb-fill { padding: 0 2px; border-radius: 4px; background: var(--floor-2); color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* copy button: label swaps to "Copied" with a tick */
.gb-copy .gb-copy__done { display: none; }
.gb-copy.is-copied { border-color: var(--green-text); color: var(--ink); background: var(--floor); }
.gb-copy.is-copied .gb-copy__ico { display: none; }
.gb-copy.is-copied .gb-copy__done { display: block; color: var(--green-text); }
.gb-copy__status { font-size: var(--fs-small); color: var(--text-2); }
.gb-copy__status:empty { display: none; }

/* ---------- §7 make the case: the one-page brief, drawn as a sheet of paper ---------- */
.gb-sheet { display: grid; gap: var(--s4); margin-top: var(--s4); padding: var(--s6) var(--s5); border-radius: 10px; background: var(--paper);
  color: var(--ink); font-size: 1rem; line-height: 1.55;
  box-shadow: inset 0 0 0 1px var(--hairline), 0 2px 4px -2px rgb(18 19 17 / 0.12), 0 28px 48px -30px rgb(18 19 17 / 0.5); }
.gb-sheet__title { font-size: 1.375rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; padding-bottom: var(--s4); border-bottom: 2px solid var(--ink); }
.g5-prose .gb-sheet p + p, .g5-prose .gb-sheet p + ul, .g5-prose .gb-sheet p + ol { margin-top: 4px; }
.gb-sheet ul { list-style: disc; padding-left: 1.2em; }
.gb-sheet ol { list-style: decimal; padding-left: 1.35em; }
.gb-sheet li + li { margin-top: 2px; }
.gb-sheet li::marker { color: var(--text-2); }
.gb-sheet__musts { color: var(--ink); }
.gb-sheet__foot { margin-top: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--hairline); font-size: var(--fs-small); color: var(--text-2); }
@media (min-width: 48rem) { .gb-sheet { padding: var(--s10) var(--s10) var(--s8); } }

@media (max-width: 47.99rem) {
  .gb-actions { flex-direction: column; align-items: stretch; }
  .gb-actions .btn { width: 100%; }
  .gb-mail__subject { padding-inline: var(--s5); }
  .gb-mail__body { padding: var(--s5); }
  .g5-prose .gb-defs p, .gb-defs p { padding: var(--s4) var(--s5); }
}

/* ---------- §8 How Regadget does it: the one place the guide names us; ink panel, list, the door ---------- */
.gb-ours { padding-block: 0 var(--section-y); }
.gb-ours__panel { display: grid; gap: var(--s8); padding: var(--s10) var(--s6); border-radius: var(--r-card); background: var(--ink); color: var(--on-dark); }
.gb-ours__head { display: grid; gap: var(--s4); align-content: start; }
.gb-ours__head .h2 { max-width: 14ch; }
.gb-ours__intro { font-size: var(--fs-lead); line-height: 1.5; color: var(--on-ink-2); max-width: 26rem; }
.gb-ours .proof-list { gap: var(--s4); }
.gb-ours .proof-list li { color: var(--on-dark); font-size: 1.0625rem; line-height: 1.5; }
.gb-ours__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s8); padding-top: var(--s8); border-top: 1px solid var(--hairline-dark); }
.gb-ours__store { color: var(--on-ink-2); }
.gb-ours__store .textlink { color: var(--on-dark); display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 47.99rem) {
  .gb-ours__actions { flex-direction: column; align-items: stretch; }
  .gb-ours__actions .btn { width: 100%; }
}
@media (min-width: 48rem) { .gb-ours__panel { padding: var(--s16); } }
@media (min-width: 64rem) {
  .gb-ours__panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s16); row-gap: var(--s10); }
  .gb-ours__actions { grid-column: 1 / -1; }
}

/* ---------- print: the page prints ONLY the one-page brief, on one page. The checklist button switches to the
   checklist alone (body.gb-print-checklist, set by pages-guide-buy.js for that one print). ---------- */
@media print {
  @page { margin: 14mm 16mm; }
  html, body { background: #fff !important; }
  body, main, .g5-body > .g5-prose { margin: 0 !important; padding: 0 !important; }
  body > :not(main) { display: none !important; }
  main > :not(.g5-body) { display: none !important; }
  .g5-toc, .gb-actions, .skip-link { display: none !important; }
  .g5-body { display: block !important; padding: 0 !important; max-width: none !important; }
  .g5-prose { max-width: none !important; color: #000; }
  .g5-prose > section + section { margin: 0 !important; padding: 0 !important; border: 0 !important; }

  /* default: the brief */
  body:not(.gb-print-checklist) .g5-prose > section:not(#make-the-case) { display: none !important; }
  body:not(.gb-print-checklist) #make-the-case > :not(.gb-brief) { display: none !important; }
  body:not(.gb-print-checklist) .gb-brief > :not(.gb-sheet) { display: none !important; }
  .gb-brief { margin: 0 !important; }
  .gb-sheet { margin: 0; padding: 0; box-shadow: none; border-radius: 0; gap: 9pt; font-size: 10.5pt; line-height: 1.45; color: #000; }
  .gb-sheet__title { font-size: 16pt; padding-bottom: 8pt; border-bottom: 1.5pt solid #000; }
  .gb-sheet__foot { border-top: 0.75pt solid #999; color: #333; font-size: 9pt; }
  .gb-fill { background: none; padding: 0; }

  /* checklist print */
  body.gb-print-checklist .g5-prose > section:not(#checklist) { display: none !important; }
  body.gb-print-checklist #checklist h2 { font-size: 18pt; margin-bottom: 6pt; }
  body.gb-print-checklist #checklist { font-size: 11pt; line-height: 1.4; }
  body.gb-print-checklist .gb-check > li { padding: 7pt 0; }
  .gb-box { border-color: #000; }
}