/* CH Group: guides.css. Buyer's guides (/guides/ and /guides/<slug>/), on top of blog.css.
   One reading column; a sticky contents list beside it on wide screens. The short answer
   is a ruled panel, the worked example a cream panel; tables are the site's .tbl. */

/* Index: the hub card takes two of three columns beside the second guide, so the
   other six fill two full rows. */
@media (min-width: 1100px) {
  .gd-index .bl-card--lead { grid-column: span 2; }
  .gd-index .bl-card--lead .bl-card__title { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); }
}

.gd__credit { margin-top: 10px; font-size: 0.9375rem; color: var(--sc-ink-soft); }

/* ------------------------------------------------------------------ layout -- */
.gd__layout { margin-top: clamp(2rem, 4vw, 3.25rem); }
.gd__main { max-width: 46rem; margin-inline: auto; display: grid; gap: clamp(2.25rem, 4vw, 3.25rem); }
.gd__main > * { min-width: 0; }
.gd .gd-prose { max-width: none; margin: 0; }

@media (min-width: 1100px) {
  .gd__layout { display: grid; grid-template-columns: 15rem minmax(0, 46rem); gap: clamp(2.5rem, 5vw, 5rem); justify-content: center; align-items: start; }
  .gd__main { margin: 0; }
}

/* ---------------------------------------------------------------- contents -- */
.gd-toc { display: none; }
@media (min-width: 1100px) {
  .gd-toc { display: block; position: sticky; top: calc(var(--hd-h, 72px) + 24px); max-height: calc(100vh - var(--hd-h, 72px) - 48px); overflow-y: auto; }
}
.gd-toc__h { font: 600 0.75rem/1.3 var(--sc-font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass-text); }
.gd-toc__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.gd-toc__list a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 0.875rem; line-height: 1.35; color: var(--sc-ink-soft); text-decoration: none; text-wrap: pretty; }
.gd-toc__list a:hover { color: var(--sc-ink); border-left-color: var(--line-strong); }
.gd-toc__list a:focus-visible { outline: 2px solid var(--brass-edge); outline-offset: 2px; }

/* ------------------------------------------------------------ short answer -- */
.gd-answer { padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem); background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--brass, #e0a63a); border-radius: var(--sc-r-md); font-size: 1.0625rem; line-height: 1.65; }
.gd-answer > * + * { margin-top: 0.8em; }
.gd-answer__h { font: 600 0.75rem/1.3 var(--sc-font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass-text); }
.gd-answer__h + p { margin-top: 0.7em; font: 500 clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem)/1.4 var(--sc-font-display); letter-spacing: -0.005em; }
.gd-answer__checked { font-size: 0.875rem; color: var(--sc-ink-soft); }

/* ------------------------------------------------------------- key numbers -- */
.gd-keys__h, .gd-h2 { font: 500 clamp(1.55rem, 1.3rem + 0.8vw, 2rem)/1.15 var(--sc-font-display); letter-spacing: -0.012em; }
.gd-keys .tbl-frame, .gd-sec .tbl-frame, .gd-example .tbl-frame { margin-top: 1rem; }
.gd .tbl { min-width: 560px; }
.gd .tbl th[scope="row"] { font-weight: 600; }

/* ----------------------------------------------------------------- sections -- */
.gd-sec + .gd-sec { margin-top: 2.2em; }
.gd-sec > * + * { margin-top: 1.1em; }
.gd-sec > h2 + .gd-sec__answer { margin-top: 0.6em; }
.gd-prose .gd-sec h2 { margin-top: 0; }
.gd-sec__answer { font-weight: 600; }
.gd-ref { font-size: 0.7em; line-height: 0; margin-left: 1px; }
.gd-ref a { text-decoration: none !important; color: var(--brass-text) !important; font-weight: 600; }
.gd-ref a:hover { text-decoration: underline !important; }
.gd-ref + .gd-ref::before { content: ","; color: var(--brass-text); }

/* ---------------------------------------------------------- worked example -- */
.gd-example { padding: clamp(1.5rem, 3.5vw, 2.25rem); background: var(--cream); border-radius: var(--sc-r-md); --line: #d3cfc2; }
.gd-example__h { margin-top: 10px; font: 500 clamp(1.4rem, 1.2rem + 0.7vw, 1.8rem)/1.2 var(--sc-font-display); letter-spacing: -0.01em; }
.gd-example .gd-prose { margin-top: 1rem; }

/* --------------------------------------------------- steps, CH Group, FAQ -- */
.gd-steps .steps, .gd-faq .faq { margin-top: 1.25rem; }
.gd-chg { padding-top: clamp(1.75rem, 3vw, 2.25rem); border-top: 1px solid var(--line-strong); }
.gd-chg .gd-prose { margin-top: 1rem; }
.gd-chg__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 1.5rem; }

/* ------------------------------------------------------------------ sources -- */
.gd-sources__note { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--sc-ink-soft); }
.gd-sources__list { margin: 1rem 0 0; padding-left: 1.4em; display: grid; gap: 0.5em; font-size: 0.875rem; line-height: 1.5; color: var(--sc-ink-soft); overflow-wrap: anywhere; }
.gd-sources__list li::marker { color: var(--brass-text); font-weight: 600; }
.gd-sources__list a { color: var(--green-900); text-underline-offset: 0.2em; }
.gd-sources__list li:target { color: var(--sc-ink); background: color-mix(in oklab, var(--brass, #e0a63a) 14%, transparent); }

/* Anchor jumps clear the fixed header. */
.gd [id] { scroll-margin-top: calc(var(--hd-h, 72px) + 20px); }