/* ForecastsPro guide: /guide and /guide/<chapter> only (devtools/guide_build.py writes the pages).
 * Everything else on those pages is site.css: the hero, the contents column, the reading
 * column, tables, notes, buttons. Colours and sizes come from tokens.css.
 * The print layout of the same guide is docs/guide/guide.css; the two share no rule.
 */

/* Where you are: Home / Guide, above the title (the same four rules as blog.css; a test holds them equal). */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 8px; margin-bottom: 14px; list-style: none; font-size: var(--lp-small); }
.crumbs li + li::before { content: "/"; content: "/" / ""; margin-right: 8px; color: var(--text-dim); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--text-muted); }
.crumbs a:hover { color: var(--text-primary); text-decoration: none; }
@media (pointer: coarse) {
  .crumbs a { min-height: var(--lp-tap); }
}

/* The contents of the whole guide, on every chapter: the chapter you are in is marked and
   lists its own sections under it. */
.g-toc [aria-current="page"] { border-left-color: var(--accent); color: var(--text-primary); font-weight: 600; }
.g-toc .g-here { margin: 2px 0 6px; }
.g-toc .g-here a { font-size: 13px; }
.g-toc li { min-width: 0; }
@media (max-width: 900px) {
  .g-toc ol.g-here { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .g-toc a { min-height: var(--lp-tap); align-items: center; }
}

/* ---- A chapter ----------------------------------------------------------------------------
   A link to a section lands at once, its heading 20 px under the sticky header. site.css
   keeps that distance for every target (scroll-padding-top); its smooth scroll would fly
   through a long chapter and fetch every picture on the way, and its extra margin on
   .prose h3 would add to the distance. */
html { scroll-behavior: auto; }
.g-chapter h3 { scroll-margin-top: 0; }
.g-lede { color: var(--text-primary); font-size: 17px; }
.g-note,
.g-fine { color: var(--text-muted); font-size: var(--lp-small); }
.g-step {
  display: inline-grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0.82em;
  font-variant-numeric: tabular-nums;
}
.g-label { margin-bottom: 4px; color: var(--text-primary); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.prose .callout.g-good { border-left-color: var(--success); }
.prose .callout ul,
.prose .callout ol { margin-bottom: 0; }
.g-chapter th { white-space: normal; }

/* The four steps of one analysis, and the four modes: cards in a row, stacked on a phone. */
.g-flow,
.g-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--lp-gap); margin: 0 0 18px; padding: 0; list-style: none; }
.prose .g-flow,
.prose .g-modes { padding-left: 0; }
.g-flow li,
.g-modes li { display: grid; align-content: start; gap: 6px; margin: 0; padding: 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-card); background: var(--bg-base); font-size: 14px; line-height: 1.5; }
.g-flow b,
.g-modes b { color: var(--text-primary); font-size: 15px; }
.g-flow span,
.g-modes span { color: var(--text-muted); }
.g-flow .g-k { color: var(--accent-text); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.g-flow .g-gate { border-color: var(--accent); }
.g-modes .g-manual,
.g-modes .g-off { border-top: 2px solid var(--text-dim); }
.g-modes .g-paper { border-top: 2px solid var(--info); }
.g-modes .g-live { border-top: 2px solid var(--danger); }
@media (max-width: 900px) {
  .g-flow,
  .g-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .g-flow,
  .g-modes { grid-template-columns: minmax(0, 1fr); }
}

.prose .g-check,
.prose .g-dont { padding-left: 0; list-style: none; }
.g-check li,
.g-dont li { position: relative; padding-left: 26px; }
.g-check li::before,
.g-dont li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; background: var(--success); }
.g-dont li::before { background: var(--danger); }

.g-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; align-items: start; }
@media (max-width: 700px) {
  .g-two { grid-template-columns: minmax(0, 1fr); }
}

.g-tag { padding: 1px 7px; border-radius: var(--radius-sm); font-size: 0.8em; font-weight: 700; letter-spacing: 0.04em; }
.g-buy { background: var(--success-soft); color: var(--success); }
.g-sell { background: var(--danger-soft); color: var(--danger); }
.g-hold { background: var(--lp-tag-bg); color: var(--text-muted); }

.g-glossary { margin: 0 0 18px; }
.g-glossary div { padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
.g-glossary dt { color: var(--text-primary); font-weight: 600; }
.g-glossary dd { margin: 4px 0 0; color: var(--text-default); }
.g-in { margin-left: 6px; color: var(--text-dim); font-size: var(--lp-small); font-weight: 400; }

.g-closing { margin: 36px 0 0; padding: 22px; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--bg-base); }
.prose .g-closing h2 { margin: 0 0 8px; padding: 0; }
.g-closing p:last-child { margin-bottom: 0; }

/* ---- A picture with its numbers and its legend ---------------------------------------------
   The numbers are an SVG drawn over the picture by the build script: once for a desktop
   column (g-marks-d) and once for a phone (g-marks-p), so they stay readable at both sizes.
   The SVG has the picture's own coordinates and scales with it; the numbers sit in a gutter
   beside the picture (the d-l / p-t ... classes say which sides have one). A tap on the
   picture opens the file itself, where the reader can zoom. */
.g-fig { margin: 22px 0 26px; }
.g-pic { margin: 0 0 12px; }
.g-frame { box-sizing: border-box; width: fit-content; max-width: 100%; --g: 24px; }
.g-img { position: relative; display: block; }
.g-img img { display: block; max-width: 100%; height: auto; border-radius: 6px; }
.g-frame.d-l { padding-left: var(--g); }
.g-frame.d-r { padding-right: var(--g); }
.g-frame.d-t { padding-top: var(--g); }
.g-frame.d-b { padding-bottom: var(--g); }
.g-marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.g-marks rect { fill: none; stroke: var(--accent-text); }
.g-marks line { stroke: var(--accent-text); }
.g-marks polygon { fill: var(--accent-text); }
.g-marks circle { fill: var(--accent); }
.g-marks text { fill: var(--text-primary); font-family: var(--font-sans); font-weight: 700; text-anchor: middle; }
.g-marks-p { display: none; }
.g-fig figcaption { margin-top: 8px; color: var(--text-muted); font-size: var(--lp-small); }
/* The legend: the same numbers as on the picture, each with its name and what it does. */
.prose .g-legend { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: g-n; font-size: 14.5px; line-height: 1.5; }
.g-legend li { position: relative; min-height: 22px; margin: 0; padding-left: 34px; counter-increment: g-n; }
.g-legend li::before {
  content: counter(g-n);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.g-legend b { display: block; color: var(--text-primary); }
@media (min-width: 901px) {
  .g-side { display: grid; grid-template-columns: 46% minmax(0, 1fr); gap: 24px; align-items: start; }
  .g-side .g-pic { margin: 0; }
}
@media (max-width: 560px) {
  .g-frame { --g: clamp(20px, 6.2vw, 34px); }
  .g-frame.d-l,
  .g-frame.d-r,
  .g-frame.d-t,
  .g-frame.d-b { padding: 0; }
  .g-frame.p-l { padding-left: var(--g); }
  .g-frame.p-r { padding-right: var(--g); }
  .g-frame.p-t { padding-top: var(--g); }
  .g-frame.p-b { padding-bottom: var(--g); }
  .g-marks-d { display: none; }
  .g-marks-p { display: block; }
}

/* Next and previous chapter, and the way back to the map, under the text. */
.g-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lp-gap); margin-top: 44px; }
.g-pager a { text-decoration: none; }
.g-next,
.g-prev { display: grid; gap: 2px; min-height: var(--lp-tap); padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: var(--radius-card); background: var(--bg-base); }
.g-next:hover,
.g-prev:hover { border-color: var(--accent); text-decoration: none; }
.g-pager span { color: var(--text-muted); font-size: var(--lp-small); }
.g-pager b { color: var(--text-primary); }
.g-next { grid-column: 2; grid-row: 1; text-align: right; }
.g-prev { grid-column: 1; grid-row: 1; }
.g-all { grid-column: 1 / -1; display: inline-flex; align-items: center; min-height: var(--lp-tap); font-size: var(--lp-card-text); }
@media (max-width: 520px) {
  .g-pager { grid-template-columns: minmax(0, 1fr); }
  .g-next,
  .g-prev { grid-column: 1; grid-row: auto; text-align: left; }
}

/* ---- The map: /guide ------------------------------------------------------------------------
   One row per chapter: its number, its title (the link) and one line. Chapters 4, 5 and 6
   also list their sections. */
.g-map { max-width: calc(var(--lp-narrow) + 2 * var(--lp-gutter)); margin-left: max(0px, calc((100% - var(--lp-max)) / 2)); padding-top: clamp(20px, 4vw, 40px); padding-bottom: var(--lp-section-y); }
.g-chapters { margin: 0 0 28px; list-style: none; }
.g-row { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 0 10px; padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
.g-num { grid-row: 1 / span 3; color: var(--accent-text); font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.4; }
.g-row h2 { font-size: 1.15rem; line-height: 1.4; }
.g-row h2 a { color: var(--text-primary); }
.g-row p { grid-column: 2; color: var(--text-muted); font-size: var(--lp-card-text); line-height: 1.55; }
.g-row .g-subs { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 4px; font-size: var(--lp-small); }
.g-subs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--accent-text); }
@media (pointer: coarse) {
  .g-row h2 a { display: inline-flex; align-items: center; min-height: var(--lp-tap); }
  .g-subs a { min-height: var(--lp-tap); }
}
.g-how,
.g-before { color: var(--text-muted); font-size: var(--lp-card-text); line-height: 1.6; }
.g-how a,
.g-before a,
.g-all { text-decoration: underline; text-underline-offset: 3px; }
.g-how strong,
.g-before strong { color: var(--text-primary); }
.g-pdf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 22px 0; color: var(--text-muted); font-size: var(--lp-card-text); }