/* /guide — long-form layout.
 *
 * Reuses every token from style.css; defines nothing the design pack already
 * names. What is new here is what the pack had no pattern for, because the site
 * had no page this long: a measure for running prose, a sticky chapter rail,
 * an on-page contents rail, and the block patterns the guide repeats (reader
 * strip, mechanism sequence, boundary table, limits block, figure).
 */

/* ── Header ─────────────────────────────────────────────────────────── */
.g-head { border-bottom: 1px solid var(--hairline, #E7ECF3); background: #FBFDFF; }
.g-head-in { max-width: 1240px; margin: 0 auto; padding: 64px var(--space-x) 56px; }
.g-head h1 {
  font-family: var(--font-display); font-weight: 600; font-size: 46px;
  line-height: 1.12; letter-spacing: -0.03em; color: var(--ink); margin: 14px 0 0; max-width: 20ch;
}
.g-eyebrow {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--teal-tint-text); margin: 0;
}
.g-lede { font-size: 18.5px; line-height: 1.65; color: #475569; margin: 18px 0 0; max-width: 62ch; }

.g-head-dark { background: var(--ink-2); border-bottom-color: var(--ink-2); }
.g-head-dark h1 { color: #F8FAFC; }
.g-head-dark .g-eyebrow { color: var(--teal); }
.g-head-dark .g-lede { color: #CBD5E1; }

/* ── Three-column wrap ──────────────────────────────────────────────── */
.g-wrap {
  max-width: 1240px; margin: 0 auto; padding: 48px var(--space-x) 88px;
  display: grid; grid-template-columns: 248px minmax(0, 1fr) 190px; gap: 40px; align-items: start;
}
.g-body { min-width: 0; }

/* Running prose at a 68ch measure — the one thing that makes long-form read. */
.g-body p { font-size: 17px; line-height: 1.72; color: #334155; max-width: 68ch; margin: 0 0 18px; }
.g-body h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em;
  color: var(--ink); margin: 44px 0 14px; scroll-margin-top: 24px;
}
.g-list { max-width: 68ch; margin: 0 0 18px; padding-left: 20px; }
.g-list li { font-size: 17px; line-height: 1.72; color: #334155; margin-bottom: 8px; }

/* ── Chapter rail ───────────────────────────────────────────────────── */
.g-side { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 2px; }
.g-side-h {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  color: #94A3B8; margin: 0 0 10px 11px;
}
.g-side-link {
  display: flex; gap: 10px; align-items: baseline; padding: 8px 11px; border-radius: 8px;
  font-size: 13.5px; line-height: 1.4; color: #475569; text-decoration: none; border-left: 3px solid transparent;
}
.g-side-link:hover { background: #F8FAFC; color: var(--ink); }
.g-side-link.active {
  background: var(--blue-tint-bg); color: var(--blue-tint-text); font-weight: 600;
  border-left-color: var(--blue);
}
.g-side-n { font-family: var(--font-mono); font-size: 11px; color: #94A3B8; min-width: 16px; }
.g-side-link.active .g-side-n { color: var(--blue-tint-text); }

/* ── On-page contents ───────────────────────────────────────────────── */
.g-toc { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 8px; }
.g-toc-h {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  color: #94A3B8; margin: 0 0 2px;
}
.g-toc a { font-size: 12.5px; line-height: 1.5; color: #64748B; text-decoration: none; }
.g-toc a:hover { color: var(--blue-tint-text); }

/* ── Reader strip ───────────────────────────────────────────────────── */
.g-readers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 34px; }
.g-reader { background: #F8FAFC; border: 1px solid #EDF1F6; border-radius: 12px; padding: 14px 16px; }
.g-reader-l {
  font-size: 11px !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: #64748B; margin: 0 0 6px !important;
}
.g-reader p { font-size: 13.5px !important; line-height: 1.55 !important; color: #475569; margin: 0 !important; max-width: none !important; }

/* ── Figure / screenshot slot ───────────────────────────────────────── */
.g-fig { margin: 28px 0 32px; }
/* Prose wants a narrow measure; a screenshot wants every pixel. At desktop the
   figure reclaims the contents rail and its gutter, taking it from roughly
   640px to roughly 870px, which is the difference between app text being
   legible and being texture. The left navigation is cropped out of most
   captures for the same reason, and shown once on shot 01. */
@media (min-width: 1101px) { .g-fig { margin-right: -230px; } }
.g-shot-link { display: block; cursor: zoom-in; }
.g-shot-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.g-shot {
  border: 1px solid var(--hairline, #E7ECF3); border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(44,85,224,0.10);
}
.g-shot-bar { display: flex; align-items: center; gap: 6px; background: var(--ink); padding: 9px 14px; }
.g-shot-bar code { font-family: var(--font-mono); font-size: 11.5px; color: #94A3B8; margin-left: 8px; }
.g-dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }
.g-dot-r { background: var(--red); } .g-dot-a { background: var(--amber); } .g-dot-t { background: var(--teal); }
.g-shot-img { display: block; width: 100%; height: auto; }
.g-shot-img + .g-shot-img { border-top: 1px solid var(--hairline, #E7ECF3); }
.g-shot-body {
  aspect-ratio: 16 / 10; background: #F8FAFC; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 7px;
  background-image: linear-gradient(#EDF1F6 1px, transparent 1px), linear-gradient(90deg, #EDF1F6 1px, transparent 1px);
  background-size: 28px 28px;
}
.g-shot-n { font-family: var(--font-mono); font-size: 11.5px; color: #94A3B8; }
.g-shot-t { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: #475569; }
.g-shot-pending {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--amber-tint-text); background: var(--amber-tint-bg); border-radius: 999px; padding: 3px 10px;
}
.g-fig figcaption { font-size: 14px; line-height: 1.6; color: #64748B; margin-top: 11px; max-width: 68ch; }
.g-fig-n { font-family: var(--font-mono); font-size: 12px; color: #94A3B8; margin-right: 6px; }
.g-fig figcaption em { color: var(--teal-tint-text); font-style: normal; font-weight: 500; }

/* ── Definition rows ────────────────────────────────────────────────── */
.g-kv { margin: 6px 0 24px; max-width: 68ch; }
.g-kv-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; padding: 13px 0; border-top: 1px solid #EDF1F6; }
.g-kv-row:last-child { border-bottom: 1px solid #EDF1F6; }
.g-kv dt { font-size: 14px; font-weight: 600; color: var(--ink); }
.g-kv dt a { color: var(--blue-tint-text); text-decoration: none; }
.g-kv dt a:hover { text-decoration: underline; }
.g-kv dd { margin: 0; font-size: 15px; line-height: 1.6; color: #475569; }

/* ── Reading paths (index) ──────────────────────────────────────────── */
.g-paths { display: grid; gap: 12px; margin: 6px 0 26px; }
.g-path { border: 1px solid #EDF1F6; border-radius: 12px; padding: 16px 18px; }
.g-path-t { font-size: 15px !important; font-weight: 600; color: var(--ink); margin: 0 0 6px !important; }
.g-path-b { font-size: 14.5px !important; line-height: 1.6 !important; color: #475569; margin: 0 0 10px !important; }
.g-path-l { display: flex; flex-wrap: wrap; gap: 6px; }
.g-chip {
  font-size: 12px; font-weight: 500; color: var(--blue-tint-text); background: var(--blue-tint-bg);
  border: 1px solid var(--blue-tint-border); border-radius: 999px; padding: 4px 11px; text-decoration: none;
}

/* ── Mechanism sequence ─────────────────────────────────────────────── */
.g-mech { background: #F8FAFC; border: 1px solid #EDF1F6; border-radius: 12px; padding: 20px 22px; margin: 22px 0 26px; max-width: 68ch; }
.g-mech-h { font-size: 15px !important; font-weight: 600; color: var(--ink); margin: 0 0 14px !important; }
.g-mech ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.g-mech li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; }
.g-mech-n {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: #fff; background: var(--blue);
  border-radius: 999px; width: 22px; height: 22px; display: grid; place-items: center;
}
.g-mech-t { font-size: 14.5px !important; font-weight: 600; color: var(--ink); margin: 0 0 3px !important; }
.g-mech-d { font-size: 14px !important; line-height: 1.6 !important; color: #475569; margin: 0 !important; }

/* ── Note, pull ─────────────────────────────────────────────────────── */
.g-note {
  background: var(--blue-tint-bg); border: 1px solid var(--blue-tint-border); border-radius: 12px;
  padding: 15px 18px; margin: 22px 0 26px; max-width: 68ch;
}
.g-note-l {
  font-size: 11px !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--blue-tint-text); margin: 0 0 5px !important;
}
.g-note p { font-size: 14.5px !important; line-height: 1.6 !important; color: #334155; margin: 0 !important; }
.g-pull {
  font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.32; letter-spacing: -0.02em;
  color: var(--ink); margin: 34px 0; padding-left: 20px; border-left: 3px solid var(--teal); max-width: 34ch;
}

/* ── Boundary table: "in your database / on ours" ───────────────────── */
.g-bound { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0 28px; }
.g-bound-col { border-radius: 12px; padding: 16px 18px; border: 1px solid; }
.g-bound-yours { background: var(--teal-tint-bg); border-color: var(--teal-tint-border); }
.g-bound-ours { background: #F8FAFC; border-color: #EDF1F6; }
.g-bound-t { font-size: 13px !important; font-weight: 600; margin: 0 0 9px !important; }
.g-bound-yours .g-bound-t { color: var(--teal-tint-text); }
.g-bound-ours .g-bound-t { color: #475569; }
.g-bound-col ul { margin: 0; padding-left: 18px; }
.g-bound-col li { font-size: 14px; line-height: 1.6; color: #334155; margin-bottom: 5px; }

/* ── Limits: fact, not warning ──────────────────────────────────────── */
.g-limits { border-top: 1px solid #E2E8F0; margin: 44px 0 0; padding: 22px 0 0; max-width: 68ch; scroll-margin-top: 24px; }
.g-limits-h {
  display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: #475569; background: #F1F5F9; border-radius: 999px; padding: 4px 11px; margin: 0 0 14px;
}
.g-limits ul { margin: 0; padding-left: 20px; }
.g-limits li { font-size: 15px; line-height: 1.65; color: #475569; margin-bottom: 9px; }

/* ── Prev / next ────────────────────────────────────────────────────── */
.g-pn { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid #E2E8F0; margin-top: 40px; padding-top: 22px; }
.g-pn-a { font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none; display: flex; flex-direction: column; gap: 3px; }
.g-pn-next { text-align: right; }
.g-pn-a span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #94A3B8; }
.g-pn-a:hover { color: var(--blue-tint-text); }

/* ── Tablet and below: rails collapse ───────────────────────────────── */
@media (max-width: 1100px) {
  .g-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 32px 28px 72px; }
  .g-toc { display: none; }
  .g-side {
    position: static; flex-direction: row; flex-wrap: wrap; gap: 6px;
    padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid #EDF1F6;
  }
  .g-side-h { width: 100%; margin-left: 0; }
  .g-side-link { border-left: 0; border: 1px solid #EDF1F6; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; }
  .g-side-link.active { border-color: var(--blue-tint-border); }
  .g-head-in { padding: 44px 28px 40px; }
  .g-head h1 { font-size: 36px; }
  .g-readers, .g-bound { grid-template-columns: minmax(0, 1fr); }
  .g-kv-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ── Full-size modal ────────────────────────────────────────────────── */
.g-modal {
  position: fixed; inset: 0; z-index: 90; background: rgba(11, 18, 32, 0.92);
  display: flex; align-items: flex-start; justify-content: center;
}
.g-modal[hidden] { display: none; }
.g-modal-scroll { width: 100%; height: 100%; overflow: auto; padding: 56px 24px 24px; text-align: center; }
.g-modal img {
  display: inline-block; max-width: none; border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.g-modal-x {
  position: absolute; top: 14px; right: 18px; z-index: 1;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
  color: #0F172A; background: #fff; border: 0; border-radius: 999px;
  padding: 7px 15px; cursor: pointer;
}
.g-modal-x:hover { background: #F1F5F9; }

@media (max-width: 1100px) {
  /* The captures are desktop screens. Below this width they are reference
     material rather than something to read in place, so the modal does the
     real work and the inline figure is a thumbnail that says so. */
  .g-shot-link::after {
    content: 'Tap to view full size';
    display: block; text-align: center; font-size: 12px; font-weight: 600;
    color: var(--blue-tint-text); background: var(--blue-tint-bg);
    padding: 7px 10px; border-top: 1px solid var(--blue-tint-border);
  }
  .g-modal-scroll { padding: 52px 10px 16px; }
}