/* /guides and /guides/{slug} (templates/guides/*): the research article
   reader (tl-reader.css, scorecard.css, article-charts.css) supplies the
   band, column, type, tables, FAQ and chart frame. This sheet adds what a
   guide has on top: key takeaways, contents, note labels, the chart colours
   for our server SVGs (services/guide_data.py), the odds converter, related
   guides and the hub's cards. */

/* ---------- key takeaways + contents ---------- */
.par-guide .gd-keys { padding: 16px 20px 6px; margin: 0 0 22px; }
.par-guide .gd-keys-title { font: 600 11.5px var(--tl-mono) !important; letter-spacing: 0.4px; text-transform: uppercase; color: var(--tl-ink-60) !important; margin: 0 0 10px !important; }
.par-guide .gd-keys ul { margin: 0; padding-left: 18px; }
.par-guide .gd-keys li { margin: 0 0 10px; }
.par-guide .gd-toc { display: block !important; margin: 0 0 8px; padding: 0 0 0 14px; border-left: 2px solid var(--tl-line-10); font-size: 14.5px; }
.par-guide .gd-toc-title { font: 600 11.5px var(--tl-mono); letter-spacing: 0.4px; text-transform: uppercase; color: var(--tl-ink-50); margin: 0 0 6px !important; }
.par-guide .gd-toc ol { display: block !important; margin: 0; padding-left: 18px; }
.par-guide .gd-toc li { display: list-item !important; }
.par-guide .gd-toc li { margin: 0 0 4px; }
.par-guide .gd-toc a { color: var(--tl-ink-70); text-decoration: none; }
.par-guide .gd-toc a:hover { color: var(--tl-ink); text-decoration: underline; }
.par-guide .rd-body h2 { scroll-margin-top: 84px; }

/* ---------- notes, tables, sources ---------- */
.par-guide .gd-note { display: block; }
.par-guide .gd-note-label { font: 600 11px var(--tl-mono); letter-spacing: 0.4px; text-transform: uppercase; color: var(--tl-ink-60); margin: 0 0 4px !important; }
.par-guide .gd-note > p:not(.gd-note-label) { margin: 0; }
.par-guide .gd-note.is-warn { border-left-color: var(--tl-down); }
.par-guide .gd-table caption { caption-side: top; text-align: left; padding: 10px 12px 8px; font-size: 13px; color: var(--tl-ink-60); }
.par-guide .gd-table th[scope="row"] { font-weight: 600; color: var(--tl-ink); }
.par-guide .tl-table td, .par-guide .tl-table th { font-variant-numeric: tabular-nums; }
.par-guide .gd-sources { font-size: 14.5px; }
.par-guide .gd-rg { font-size: 13px; color: var(--tl-ink-50); }

/* ---------- charts (server SVG inside the .ac.sic frame) ---------- */
.par-guide .gd-fig .sic-plot { padding: 4px 0 0; }
.gd-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--tl-font); }
.gd-lab { font-size: 12.5px; fill: var(--tl-ink-75); }
.gd-val { font: 500 12px var(--tl-mono); fill: var(--tl-ink-70); }
.gd-axis { font: 500 11px var(--tl-mono); fill: var(--tl-ink-45); }
.gd-grid { stroke: var(--tl-line-07); stroke-width: 1; }
.gd-zero { stroke: var(--tl-line-20); stroke-width: 1; }
.gd-bar { fill: var(--tl-ink-35); }
.gd-bar.is-hi { fill: var(--tl-ink); }
.gd-bar.is-neg { fill: var(--tl-down); }
.gd-bar:hover { opacity: 0.8; }
.gd-line { fill: none; stroke: var(--tl-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.gd-line.is-b { stroke: var(--tl-pro); }
.gd-line.is-c { stroke: var(--tl-up); stroke-dasharray: 5 4; }
.gd-dot { fill: var(--tl-ink); stroke: var(--tl-card); stroke-width: 2; }
.gd-dot.is-b { fill: var(--tl-pro); }
.gd-dot.is-c { fill: var(--tl-up); }
.gd-key { fill: var(--tl-ink); }
.gd-key.is-b { fill: var(--tl-pro); }
.gd-key.is-c { fill: var(--tl-up); }
.gd-data { margin-top: 8px; font-size: 13px; }
.gd-data summary { cursor: pointer; color: var(--tl-ink-60); font-weight: 500; width: max-content; }
.gd-data summary:hover { color: var(--tl-ink); }
.gd-data .rd-table-wrap { margin-top: 8px; }

/* ---------- FAQ questions are h3s (for search) styled as the Roundup's ---------- */
.par-guide .sc-faq-q { display: inline; margin: 0; font: inherit; font-weight: 600; }

/* ---------- related guides ---------- */
.par-guide .gd-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.par-guide .gd-rel { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; }
.par-guide .gd-rel img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.par-guide .gd-rel-copy { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.par-guide .gd-rel-title { font-size: 14.5px; font-weight: 650; line-height: 1.35; color: var(--tl-ink); }
.par-guide .gd-rel-dek { font-size: 13px; line-height: 1.45; color: var(--tl-ink-60); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- hub ---------- */
.gd-hub .gd-group { margin-bottom: 32px; scroll-margin-top: 84px; }
.gd-hub .gd-group .tl-section-title { flex-wrap: wrap; padding-top: 6px; }
.gd-hub .gd-cards.nw-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gd-hub .nw-card-img { aspect-ratio: 1200 / 630; }
.gd-hub .gd-card-dek { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--tl-ink-60); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1100px) { .gd-hub .gd-cards.nw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .gd-hub .gd-cards.nw-cards, .par-guide .gd-related { grid-template-columns: minmax(0, 1fr); }
  .gd-lab { font-size: 15px; }
  .gd-val, .gd-axis { font-size: 14px; }
}

/* ---------- odds converter (_kit.html converter, static/js/guides.js) ---------- */
.gd-conv { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; margin: 24px 0 !important; padding: 18px; border: 1px solid var(--tl-line-12); border-radius: var(--tl-r-card); background: var(--tl-card-bg); }
.gd-conv-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gd-conv label { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--tl-ink-60); }
.gd-conv-fee { grid-column: 1 / -1; }
.gd-conv input, .gd-conv select { width: 100% !important; height: 42px !important; margin: 0 !important; padding: 0 12px !important; border: 1px solid var(--tl-line-12) !important; border-radius: var(--tl-r-btn) !important; background: var(--tl-control) !important; color: var(--tl-ink) !important; font: 600 16px var(--tl-mono) !important; box-shadow: none !important; }
.gd-conv select { font: 500 14px var(--tl-font) !important; }
.gd-conv input:focus, .gd-conv select:focus { border-color: var(--tl-ink) !important; outline: none; }
.gd-conv-in { position: relative; display: block; }
.gd-conv-in i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 500 12px var(--tl-mono); font-style: normal; color: var(--tl-ink-45); pointer-events: none; }
.gd-conv-out { padding: 4px 0 0 18px; border-left: 1px solid var(--tl-line-10); }
.gd-conv-out dl { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.gd-conv-out dl > div { display: flex; flex-direction: column; gap: 1px; }
.gd-conv-out dt { font: 500 11px var(--tl-mono); letter-spacing: 0.3px; text-transform: uppercase; color: var(--tl-ink-50); }
.gd-conv-out dd { margin: 0; font-size: 16px; font-weight: 650; color: var(--tl-ink); font-variant-numeric: tabular-nums; }
.gd-conv-out p { margin: 0; font-size: 14px; color: var(--tl-ink-70); }
.page-guide .gd-table td, .page-guide .gd-table th { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .gd-conv { grid-template-columns: minmax(0, 1fr); }
  .gd-conv-out { border-left: 0; border-top: 1px solid var(--tl-line-10); padding: 14px 0 0; }
}

/* The cover is 1200x630, not the Roundup banner's 5:2: show all of it. */
.par-guide .rd-hero img { aspect-ratio: 1200 / 630; object-fit: cover; }
/* The reader spaces body lists for prose; the contents list stays compact. */
.par-guide .rd-body .gd-toc li, .par-guide .rd-body .gd-toc li + li { margin: 0 !important; padding: 3px 0 !important; line-height: 1.45; }
/* Comparison tables wrap their prose cells instead of scrolling sideways. */
.par-guide .gd-table th, .par-guide .gd-table td { white-space: normal; min-width: 7em; vertical-align: top; }
.par-guide .gd-table th[scope="row"] { min-width: 8em; }