/* =============================================================================
   AI Knowledge Signal — Framework How-To Guides
   Shared stylesheet. Governs the look of EVERY guide so they stay identical.
   Linked from each guide: <link rel="stylesheet" href="guide.css">

   Design language mirrors product/public/shared.css (same tokens, same fonts).
   Optimised for both screen reading and clean A4/Letter printing.
   ============================================================================= */

/* ── Design tokens — single source of truth (mirrors shared.css) ── */
:root {
  --ink:        #1a1a1a;
  --ink-muted:  #5a5a5a;
  --page:       #fafaf8;
  --rule:       #e0ddd8;
  --navy:       #1e3a5f;
  --navy-deep:  #162d4a;
  --gold:       #b8913a;
  --card:       #ffffff;
  --good:       #2d6a4f;
  --good-bg:    #f0faf4;
  --warn:       #b5451b;
  --warn-bg:    #fef3f2;
  --code-bg:    #1e293b;
  --code-ink:   #e2e8f0;
  --chip-bg:    #eef2f7;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Georgia', 'Times New Roman', serif;
  background: var(--page);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 820px; margin: 0 auto; padding: 0 28px; }

/* ── Brand header band ─────────────────────────────────────────────────── */
.guide-masthead {
  border-bottom: 3px solid var(--navy);
  background: #fff;
}
.guide-masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 18px; padding-bottom: 18px; gap: 16px;
}
.guide-logo { height: 40px; width: auto; display: block; }
.guide-masthead-actions { display: flex; align-items: center; gap: 18px; }
.guide-masthead-meta {
  font-family: system-ui, sans-serif; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-muted); text-align: right; line-height: 1.5;
}
.guide-masthead-meta strong { color: var(--navy); display: block; font-size: 12px; }

/* ── Print button (hidden on paper) ───────────────────────────────────── */
.guide-print-btn {
  font-family: system-ui, sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--navy); border: 1px solid var(--navy);
  padding: 8px 14px; border-radius: 3px; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.guide-print-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }

/* ── Page header ──────────────────────────────────────────────────────── */
.guide-header { padding: 44px 0 8px; }
.guide-eyebrow {
  font-family: system-ui, sans-serif; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 12px;
}
.guide-eyebrow .sep { color: var(--rule); margin: 0 8px; }
.guide-eyebrow-link { color: inherit; text-decoration: none; }
.guide-eyebrow-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.guide-header h1 { font-size: 34px; color: var(--navy); line-height: 1.18; letter-spacing: -0.01em; }
.guide-lede {
  font-size: 19px; color: var(--ink-muted); margin-top: 16px; max-width: 680px;
  font-style: italic;
}
/* Named author + review date under the lede (Phase 4.1: practise what we preach). */
.guide-byline {
  font-family: system-ui, sans-serif; font-size: 13px; color: var(--ink-muted);
  margin-top: 12px; letter-spacing: .01em;
}

/* ── Section structure ────────────────────────────────────────────────── */
.guide-body { padding: 8px 0 40px; }
.guide-body section { padding: 28px 0; border-top: 1px solid var(--rule); }
.guide-body section:first-of-type { border-top: 0; }
.guide-body h2 {
  font-family: system-ui, sans-serif; font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--navy); font-weight: 700; margin-bottom: 16px;
}
.guide-body h3 { font-size: 21px; color: var(--ink); margin: 22px 0 10px; line-height: 1.3; }
.guide-body p { margin-bottom: 14px; }
.guide-body a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.guide-body ul, .guide-body ol { margin: 0 0 16px 22px; }
.guide-body li { margin-bottom: 8px; }
.guide-body strong { color: var(--ink); }

/* ── Numbered step list ───────────────────────────────────────────────── */
.steps { list-style: none; margin: 0; counter-reset: step; }
.steps > li {
  position: relative; padding: 0 0 18px 52px; margin: 0;
  border-left: 2px solid var(--rule); margin-left: 16px;
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: -17px; top: -2px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-family: system-ui, sans-serif; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.steps > li .step-title {
  font-family: system-ui, sans-serif; font-weight: 700; color: var(--navy);
  display: block; margin-bottom: 4px; font-size: 16px;
}

/* ── Code blocks ──────────────────────────────────────────────────────── */
pre {
  background: var(--code-bg); color: var(--code-ink);
  border-radius: 8px; padding: 18px 20px; overflow-x: auto;
  font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
  font-size: 13.5px; line-height: 1.6; margin: 0 0 16px;
  border: 1px solid #0f172a;
}
pre .c-key  { color: #7dd3fc; }   /* JSON keys */
pre .c-str  { color: #bef264; }   /* strings */
pre .c-com  { color: #94a3b8; font-style: italic; }  /* comments */
code {
  font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
  font-size: 0.88em; background: var(--chip-bg); color: var(--navy-deep);
  padding: 1px 6px; border-radius: 4px;
}
pre code { background: none; color: inherit; padding: 0; font-size: inherit; }

/* ── Example cards (the core of every guide — min. 2) ─────────────────── */
.examples { display: grid; gap: 18px; }
.example {
  background: var(--card); border: 1px solid var(--rule); border-radius: 10px;
  overflow: hidden;
}
.example-head {
  background: var(--navy); color: #fff; padding: 12px 18px;
  font-family: system-ui, sans-serif; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; gap: 10px;
}
.example-head .ex-num {
  background: var(--gold); color: var(--navy-deep); font-size: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.example-body { padding: 18px; }
.example-body p:last-child { margin-bottom: 0; }
.example-context {
  font-family: system-ui, sans-serif; font-size: 13px; color: var(--ink-muted);
  margin-bottom: 14px;
}

/* ── Before / After comparison ────────────────────────────────────────── */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ba-cell { border-radius: 8px; padding: 14px 16px; font-size: 15px; }
.ba-before { background: var(--warn-bg); border: 1px solid #fecdca; }
.ba-after  { background: var(--good-bg); border: 1px solid #bbf7d0; }
.ba-label {
  font-family: system-ui, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; display: block;
}
.ba-before .ba-label { color: var(--warn); }
.ba-after  .ba-label { color: var(--good); }

/* ── Callouts ─────────────────────────────────────────────────────────── */
.callout {
  border-left: 4px solid var(--gold); background: #fffdf7;
  padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 0 0 16px;
  font-size: 15.5px;
}
.callout-title {
  font-family: system-ui, sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mid, #7a5c10);
  display: block; margin-bottom: 6px;
}
/* Evidence-strength tag for findings that rest on a single unreplicated study. */
.tag-emerging {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border: 1px solid currentColor; border-radius: 3px;
  font-size: 10px; letter-spacing: .06em; font-weight: 700; opacity: .85;
}

/* Limits of this advice (Phase 4.6: every guide states where it may not apply). */
.guide-limits ul { margin: 0 0 0 20px; }
.guide-limits li { margin-bottom: 8px; color: var(--ink-muted); }

/* ── Mistakes table ───────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 15px; }
thead th {
  background: var(--navy); color: #fff; text-align: left; padding: 10px 14px;
  font-family: system-ui, sans-serif; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 700;
}
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
tbody tr:nth-child(even) { background: #fff; }

/* ── Mini per-guide checklist ─────────────────────────────────────────── */
.mini-check { list-style: none; margin: 0; }
.mini-check li {
  position: relative; padding-left: 30px; margin-bottom: 10px;
  font-size: 15.5px;
}
.mini-check li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  width: 20px; height: 20px; border-radius: 4px;
  background: var(--good-bg); color: var(--good); border: 1px solid #bbf7d0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.guide-footer {
  border-top: 3px solid var(--navy); background: #fff; margin-top: 24px;
  padding: 24px 0;
}
.guide-footer .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.guide-footer img { height: 28px; width: auto; }
.guide-footer-meta {
  font-family: system-ui, sans-serif; font-size: 12px; color: var(--ink-muted);
  text-align: right; line-height: 1.6;
}
.guide-footer-meta a { color: var(--navy); }

/* ── Phase index (landing) pages ──────────────────────────────────────── */
.phase-index { padding: 8px 0 40px; }
.phase-intro {
  font-size: 18px; color: var(--ink-muted); max-width: 680px;
  margin: 0 0 12px; line-height: 1.6;
}
.phase-progress {
  font-family: system-ui, sans-serif; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--navy); font-weight: 700; margin: 20px 0 18px;
}
.phase-progress .bar {
  display: inline-block; width: 160px; height: 8px; border-radius: 4px;
  background: var(--rule); vertical-align: middle; margin-left: 10px; overflow: hidden;
}
.phase-progress .bar > span { display: block; height: 100%; background: var(--gold); }

/* Subdomain guide cards on the index */
.guide-list { display: grid; gap: 14px; margin: 0; list-style: none; }
.guide-card {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--card); border: 1px solid var(--rule); border-radius: 10px;
  padding: 16px 18px; text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.guide-card:hover {
  border-color: var(--navy); box-shadow: 0 4px 14px rgba(30,58,95,.10);
  transform: translateY(-1px);
}
.guide-card.is-planned { opacity: .72; cursor: default; }
.guide-card-num {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 8px;
  background: var(--navy); color: #fff;
  font-family: system-ui, sans-serif; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.guide-card.is-planned .guide-card-num { background: var(--rule); color: var(--ink-muted); }
.guide-card-body { flex: 1; min-width: 0; }
.guide-card-title {
  font-family: system-ui, sans-serif; font-size: 16px; font-weight: 700;
  color: var(--navy); margin-bottom: 3px; line-height: 1.35;
}
.guide-card-desc {
  font-family: system-ui, sans-serif; font-size: 13.5px; color: var(--ink-muted);
  line-height: 1.5;
}
.guide-card-status {
  flex-shrink: 0; align-self: center;
  font-family: system-ui, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 20px; white-space: nowrap;
}
.status-published { background: var(--good-bg); color: var(--good); border: 1px solid #bbf7d0; }
.status-planned   { background: var(--chip-bg); color: var(--ink-muted); border: 1px solid var(--rule); }

/* All-phases nav strip on a phase index */
.phase-nav {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0;
  padding-top: 22px; border-top: 1px solid var(--rule);
}
.phase-nav a {
  font-family: system-ui, sans-serif; font-size: 12px; font-weight: 600;
  color: var(--navy); text-decoration: none;
  border: 1px solid var(--rule); border-radius: 20px; padding: 5px 12px;
  transition: border-color .15s, background .15s;
}
.phase-nav a:hover { border-color: var(--navy); background: #fff; }
.phase-nav a.is-current { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ── Evidence box (top of every guide) ───────────────────────────────────
   Links the tactic to its evidence and rates its impact. Rendered from
   markup only — no inline styles (CSP-safe). */
.evidence-box {
  background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--navy);
  border-radius: 0 10px 10px 0; padding: 16px 20px; margin: 4px 0 8px;
}
.evidence-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px;
}
.evidence-label {
  font-family: system-ui, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted);
}
.evidence-impact {
  font-family: system-ui, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 20px; white-space: nowrap;
}
.impact-critical { background: var(--navy); color: #fff; border: 1px solid var(--navy); }
.impact-high     { background: #fbf3dc; color: #7a5c10; border: 1px solid #ecd9a6; }
.impact-moderate { background: var(--chip-bg); color: var(--ink-muted); border: 1px solid var(--rule); }
.evidence-updated {
  font-family: system-ui, sans-serif; font-size: 11px; color: var(--ink-muted);
  margin-left: auto;
}
.evidence-box p { font-size: 15.5px; margin-bottom: 8px; }
.evidence-box p:last-child { margin-bottom: 0; }
.evidence-link {
  font-family: system-ui, sans-serif; font-size: 13.5px; font-weight: 600;
}

/* ── Cross-guide navigation ───────────────────────────────────────────────
   Injected by guide.js on every subdomain guide: a top strip (Back to Video
   Gallery + ‹ prev / next ›) under the masthead, and a bottom pager above the
   footer. CSP-safe — built from the shared manifest, no inline script. */
.guide-subnav { background: #fff; border-bottom: 1px solid var(--rule); }
.guide-subnav .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 10px; padding-bottom: 10px;
}
.guide-subnav-home {
  font-family: system-ui, sans-serif; font-size: 12px; font-weight: 600;
  color: var(--navy); text-decoration: none; letter-spacing: .02em; white-space: nowrap;
}
.guide-subnav-home:hover { text-decoration: underline; text-underline-offset: 3px; }
.guide-subnav-pos {
  font-family: system-ui, sans-serif; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-muted); white-space: nowrap;
}
.guide-subnav-arrows { display: flex; gap: 8px; }
.guide-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1px solid var(--rule); border-radius: 6px;
  color: var(--navy); text-decoration: none; font-size: 18px; line-height: 1;
  transition: border-color .15s, background .15s;
}
.guide-arrow:hover { border-color: var(--navy); background: var(--page); }
.guide-arrow.is-disabled { color: var(--rule); border-color: var(--rule); pointer-events: none; }

.guide-pager {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch;
  margin: 32px auto 0;
}
.guide-pager-link {
  display: flex; flex-direction: column; gap: 3px;
  border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px;
  text-decoration: none; color: inherit; background: var(--card);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.guide-pager-link:hover {
  border-color: var(--navy); box-shadow: 0 4px 14px rgba(30,58,95,.10);
  transform: translateY(-1px);
}
.guide-pager-link.next { text-align: right; }
.guide-pager-link .dir {
  font-family: system-ui, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gold);
}
.guide-pager-link .t {
  font-family: system-ui, sans-serif; font-size: 14px; font-weight: 700;
  color: var(--navy); line-height: 1.35;
}
.guide-pager-link.is-disabled { opacity: .45; pointer-events: none; }
.guide-pager-link.is-disabled .t { color: var(--ink-muted); font-weight: 600; }
.guide-pager-home {
  align-self: center; white-space: nowrap; text-align: center;
  font-family: system-ui, sans-serif; font-size: 12px; font-weight: 600;
  color: var(--navy); text-decoration: none;
  border: 1px solid var(--rule); border-radius: 20px; padding: 8px 14px;
  transition: border-color .15s, background .15s;
}
.guide-pager-home:hover { border-color: var(--navy); background: var(--page); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ba { grid-template-columns: 1fr; }
  .guide-header h1 { font-size: 27px; }
  .guide-masthead-meta { display: none; }
  .guide-subnav-pos { display: none; }
  .guide-pager { grid-template-columns: 1fr; }
  .guide-pager-link.next { text-align: left; }
  .guide-pager-home { order: 3; }
}

/* ── Running header (print only) ──────────────────────────────────────────
   Repeats on every physical page of the printed/exported PDF — Chrome print
   replicates `position: fixed` elements per page, which is what a static
   HTML file needs in place of CSS paged-media running headers (unsupported
   in Chromium). Gives a mid-guide reader in the compiled document their
   place: "1.1 · Configure robots.txt for AI crawlers". Screen-hidden. */
.print-running-header { display: none; }

/* ── Print ────────────────────────────────────────────────────────────── */
@media print {
  :root { --page: #fff; }
  /* @page margin-top repeats on every physical page, but `.print-running-header`'s
     `position:fixed; top:0` is anchored to the CONTENT box's top edge (confirmed by
     an isolated Chrome print test), i.e. exactly where body content ALSO starts on
     every page — @page margin-top cannot create a gap between them no matter how
     large it is, since both move down together. `top: <negative>` and
     `transform: translateY(<negative>)` were tried to lift the header above that
     line; both broke per-page repetition entirely (Chrome stops replicating the
     fixed element and renders it once, at the bottom of the last page — confirmed
     by testing, not assumed). So the real fix has to be on the content side: when
     `.guide-body section { break-inside: avoid-page }` can't be honoured (a section
     taller than one page, e.g. a 6-item Step by step list, forces a break somewhere
     inside it), the browser breaks between break-avoid children — and those
     children (`.steps > li`, `.example`) had zero top padding of their own, so
     whichever one lands first on the new page sits flush against the header.
     Fixed by giving those children a small print-only top margin below, so there's
     always clearance regardless of where a break falls. */
  @page { margin-top: 0.85in; }
  body { font-size: 11.5pt; background: #fff; }
  .wrap { max-width: 100%; padding: 0 0.4in; }
  .guide-print-btn { display: none !important; }
  .guide-subnav, .guide-pager { display: none !important; }
  .guide-masthead, .guide-footer { border-color: var(--navy) !important; }
  .guide-body section { break-inside: avoid-page; }
  /* `break-after`/`break-before: avoid` DO NOT reliably work in Chrome's headless
     print engine — tried both (on h2 headings, to stop "Worked Examples" rendering
     alone with its content pushed to the next page; and on the footer, to stop it
     spilling onto its own near-blank trailing page) and neither had any effect,
     confirmed by rebuilding and re-inspecting the actual output, not assumed. Only
     `break-inside: avoid` is reliable, so both problems are fixed differently:
     1) `.examples` was `display: grid`, and CSS Grid containers do not fragment
        their children across printed pages in Chrome — the whole grid gets forced
        onto a fresh page as one atomic block, stranding its heading behind. Print
        mode switches it to `display: block` so each `.example` card (already
        `break-inside: avoid`) can flow onto whichever page has room, right after
        the heading.
     2) The Checklist section and the footer are now wrapped together in the HTML
        (`.guide-tail`, see every guide + `_TEMPLATE.html`) so `break-inside: avoid`
        on that wrapper keeps them on the same page as a unit — the only mechanism
        confirmed to actually work. */
  .examples { display: block; }
  .example { margin-bottom: 18px; }
  .example:last-child { margin-bottom: 0; }
  .guide-tail { break-inside: avoid; }
  .example, .steps > li, table, pre, .callout, .ba, .evidence-box { break-inside: avoid; padding-top: 20px; }
  /* The step counter circle is absolutely positioned relative to the <li>'s own
     box, which padding-top does not move — shift the circle down to match so it
     stays aligned with the (now lower) step title when the <li> lands first on a
     printed page. */
  .steps > li::before { top: 16px; }
  pre {
    background: #f4f4f2; color: #1a1a1a; border: 1px solid #ccc;
    white-space: pre-wrap; word-wrap: break-word;
  }
  pre .c-key { color: #1e3a5f; } pre .c-str { color: #2d6a4f; } pre .c-com { color: #777; }
  .example-head { background: #1e3a5f !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  thead th { background: #1e3a5f !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: var(--ink); text-decoration: none; }
  .guide-header { padding-top: 16px; }

  .print-running-header {
    display: block;
    position: fixed; top: 0; left: 0.4in; right: 0.4in;
    font-family: system-ui, sans-serif; font-size: 9px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted);
    padding-bottom: 5px; border-bottom: 1px solid var(--rule);
  }
}

/* ── Work with us (services pivot 2026-11-04) ── */
.guide-cta {
  border: 2px solid var(--navy, #1e3a5f);
  background: #fff;
  padding: 20px 24px;
  margin: 32px 0 24px;
}
.guide-cta h2 { margin-top: 0; }
.guide-cta p { margin: 0 0 12px; }
.guide-cta p:last-child { margin-bottom: 0; }
.guide-cta-btn {
  display: inline-block;
  background: var(--gold, #b8913a);
  color: #fff !important;
  font-family: system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 18px;
  text-decoration: none;
  margin-right: 12px;
}
.guide-cta-link { font-family: system-ui, sans-serif; font-size: 14px; }
@media print {
  .guide-cta { page-break-inside: avoid; }
  .guide-cta-btn { background: none; color: inherit !important; padding: 0; text-decoration: underline; }
  .guide-cta-btn::after { content: " (aiknowledgesignal.io/checkout-review)"; font-weight: 400; }
}