/* ============================================================
 * ESP-GenUI — Build Guides styles
 * Copyright © 2026 G9Six, LLC. All rights reserved.
 *
 * Loaded ON TOP of landing.css: the guide pages reuse the shared
 * chrome from landing.css (.lp-header / .lp-btn / .lp-footer) and
 * this file adds the animated "blueprint" background plus the guide
 * card grid and the long-form article (guide-detail) layout.
 *
 * Everything here is namespaced g-* (content) or bp-* (blueprint
 * background) so it never collides with the reused lp-* chrome.
 * ============================================================ */

:root {
  /* Blueprint paper + line-work. Tuned to sit under the existing light
     palette without fighting the ink color for contrast. */
  --bp-paper:      #e9f0f8;
  --bp-paper-2:    #dfe9f4;
  --bp-line:       rgba(31, 127, 214, 0.10);
  --bp-line-major: rgba(31, 127, 214, 0.17);
  --bp-stroke:     rgba(31, 127, 214, 0.20);  /* line-art parts */
  --bp-stroke-2:   rgba(31, 127, 214, 0.13);
  --g-panel-glass: rgba(247, 250, 253, 0.86);
}

/* ------------------------------------------------------------
 * Blueprint background — a fixed grid + faint animated line-art
 * (gears, a motor, a relay, PCB traces, dimension lines) that
 * scrolls under the translucent content panels.
 * ------------------------------------------------------------ */
body {
  position: relative;
  background-color: var(--bp-paper);
  /* Minor grid (28px) layered over a heavier major grid (140px). */
  background-image:
    linear-gradient(var(--bp-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-line) 1px, transparent 1px),
    linear-gradient(var(--bp-line-major) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--bp-line-major) 1.5px, transparent 1.5px);
  background-size:
    28px 28px, 28px 28px, 140px 140px, 140px 140px;
  background-attachment: fixed;
}

.bp-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.bp-svg { width: 100%; height: 100%; display: block; }

/* Line-art strokes — thin, faint, no fill (technical-drawing look). */
.bp-part      { fill: none; stroke: var(--bp-stroke);   stroke-width: 1.4; }
.bp-part--2   { fill: none; stroke: var(--bp-stroke-2); stroke-width: 1.2; }
.bp-dash      { fill: none; stroke: var(--bp-stroke-2); stroke-width: 1;
                stroke-dasharray: 6 5; }
.bp-fill      { fill: var(--bp-stroke-2); stroke: none; }

/* Each gear spins around its own centre (paths are drawn centred on 0,0
   then translated into place by an outer <g>). */
.bp-gear { transform-box: fill-box; transform-origin: center;
           animation: bp-spin 60s linear infinite; }
.bp-gear--rev  { animation-direction: reverse; }
.bp-gear--slow { animation-duration: 95s; }
.bp-gear--fast { animation-duration: 38s; }
@keyframes bp-spin { to { transform: rotate(360deg); } }

/* A faint dash that "draws" along the PCB traces. */
.bp-flow { stroke-dasharray: 4 10; animation: bp-flow 3.2s linear infinite; }
@keyframes bp-flow { to { stroke-dashoffset: -28; } }

/* All content sits above the scene. */
.lp-header, .g-main, .lp-footer { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .bp-gear, .bp-flow { animation: none !important; }
}

/* ------------------------------------------------------------
 * Shared content container
 * ------------------------------------------------------------ */
.g-main {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 32px 72px;
}

/* ------------------------------------------------------------
 * Build Guides landing — hero + card grid
 * ------------------------------------------------------------ */
.g-hero {
  text-align: center;
  padding: 34px 0 52px;
}
.g-eyebrow {
  display: inline-block;
  color: var(--lp-accent);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
  padding: 4px 12px;
  border: 1px solid var(--lp-accent-dim);
  border-radius: 2px;
  background: var(--g-panel-glass);
  margin-bottom: 22px;
}
.g-hero h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(32px, 5.2vw, 54px);
  font-weight: 700; line-height: 1.12; letter-spacing: -0.025em;
  color: var(--lp-ink);
  margin: 0 0 20px;
}
.g-hero p {
  font-size: 15px; line-height: 1.65; color: var(--lp-dim);
  max-width: 620px; margin: 0 auto;
}

.g-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 360px));
  justify-content: center;
  gap: 20px;
  margin-top: 8px;
}

/* A guide summary card. The whole card is a link. */
.g-card {
  display: flex; flex-direction: column;
  background: var(--g-panel-glass);
  border: 1px solid var(--lp-line);
  border-radius: 3px;
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
  backdrop-filter: blur(2px);
}
.g-card:hover {
  transform: translateY(-3px);
  border-color: var(--lp-accent);
  box-shadow: 0 14px 34px rgba(35, 48, 61, 0.14);
  text-decoration: none;
}
/* The thumbnail area holds a per-guide blueprint SVG illustration. */
.g-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(160deg, var(--bp-paper-2), #cfdcec);
  border-bottom: 1px solid var(--lp-line);
  overflow: hidden;
}
.g-card-thumb svg { width: 100%; height: 100%; display: block; }
.g-card-tag {
  position: absolute; top: 10px; left: 10px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--lp-accent-text); background: var(--lp-accent);
  padding: 3px 8px; border-radius: 2px;
}
.g-card-tag--soon { background: var(--lp-dim); }
.g-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.g-card-kicker {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--lp-accent); margin-bottom: 8px;
}
.g-card h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px; font-weight: 700; line-height: 1.2;
  color: var(--lp-ink); margin: 0 0 10px;
}
.g-card p { font-size: 13px; line-height: 1.6; color: var(--lp-dim); margin: 0 0 16px; }
.g-card-meta {
  margin-top: auto;
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  font-size: 11px; color: var(--lp-dim);
  border-top: 1px dashed var(--lp-line); padding-top: 12px;
}
.g-card-meta b { color: var(--lp-ink); font-weight: 500; }
.g-card--soon { pointer-events: none; opacity: 0.72; }

/* Chips for board / difficulty / time on cards + article. */
.g-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; letter-spacing: 0.02em;
}
.g-chip::before { content: ""; width: 6px; height: 6px; background: var(--lp-accent);
                  border-radius: 50%; }

/* ------------------------------------------------------------
 * Guide detail — long-form article
 * ------------------------------------------------------------ */
.g-article { max-width: 800px; margin: 0 auto; }

.g-breadcrumb {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--lp-dim); margin-bottom: 20px;
}
.g-breadcrumb a { color: var(--lp-dim); }
.g-breadcrumb a:hover { color: var(--lp-accent); }

.g-article-head {
  background: var(--g-panel-glass);
  border: 1px solid var(--lp-line);
  border-left: 3px solid var(--lp-accent);
  border-radius: 3px;
  padding: 30px 34px;
  margin-bottom: 26px;
  backdrop-filter: blur(2px);
}
.g-article-head .g-kicker {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--lp-accent); margin-bottom: 12px;
}
.g-article-head h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(28px, 4.4vw, 42px);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--lp-ink); margin: 0 0 14px;
}
/* Troubleshooting headlines quote the literal console output the reader
   searched for (`invalid header: 0xffffffff`), so <code> has to work inside an
   h1. At the heading's own size the default inline-code treatment renders a
   box taller than its line, and a heading that wraps mid-code gets two ragged
   half-boxes — so damp the size and clone the decoration across line breaks. */
.g-article-head h1 code {
  font-size: 0.86em;
  line-height: 1.05;
  padding: 0 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.g-article-head .g-lede { font-size: 15px; line-height: 1.65; color: var(--lp-dim); margin: 0 0 18px; }
.g-meta-row {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  border-top: 1px dashed var(--lp-line); padding-top: 16px;
}

/* Sticky "on this page" table of contents. */
.g-toc {
  background: var(--g-panel-glass);
  border: 1px solid var(--lp-line);
  border-radius: 3px;
  padding: 16px 20px;
  margin-bottom: 30px;
}
.g-toc h2 {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--lp-dim); margin: 0 0 10px; font-family: 'JetBrains Mono', monospace;
}
.g-toc ol { list-style: none; counter-reset: toc; display: grid; gap: 6px; }
.g-toc li { counter-increment: toc; font-size: 13px; }
.g-toc li::before {
  content: counter(toc, decimal-leading-zero) "  ";
  color: var(--lp-accent); font-variant-numeric: tabular-nums;
}
.g-toc a { color: var(--lp-ink); }
.g-toc a:hover { color: var(--lp-accent); }

/* Article body prose. */
.g-section { margin: 0 0 40px; scroll-margin-top: 84px; }
.g-section > h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--lp-ink); margin: 0 0 6px;
  padding-bottom: 10px; border-bottom: 1px solid var(--lp-line);
  display: flex; align-items: baseline; gap: 12px;
}
.g-section > h2 .g-step-no {
  font-family: 'JetBrains Mono', monospace; font-size: 14px;
  color: var(--lp-accent); font-weight: 500;
}
.g-section h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px; font-weight: 700; color: var(--lp-ink);
  margin: 26px 0 8px;
}
.g-section p { font-size: 14.5px; line-height: 1.75; color: var(--lp-ink); margin: 14px 0; }
.g-section ul, .g-section ol { margin: 12px 0 12px 22px; }
.g-section li { font-size: 14.5px; line-height: 1.7; color: var(--lp-ink); margin: 6px 0; }
.g-section strong { color: var(--lp-ink); }
.g-section a { color: var(--lp-accent); }

/* Figures: blueprint SVG illustrations AND drop-in photo slots. */
.g-figure { margin: 22px 0; }
.g-figure figcaption {
  font-size: 12px; color: var(--lp-dim); margin-top: 8px;
  padding-left: 10px; border-left: 2px solid var(--lp-accent-dim);
}
.g-figure figcaption b { color: var(--lp-ink); font-weight: 500; }

.g-illus {
  background: linear-gradient(160deg, var(--bp-paper-2), #d3e0ef);
  border: 1px solid var(--lp-line); border-radius: 3px;
  overflow: hidden;
}
.g-illus svg,
.g-illus img { width: 100%; height: auto; display: block; }

/* Two images shown side by side (e.g. a pair of phone screenshots). Capped so a
   pair of tall portrait shots doesn't dominate the page; stays side by side on
   narrow screens since the cap already keeps each one small enough. */
.g-duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  max-width: 520px;
}
/* Keep the two columns even: without this a long unbroken caption in one cell
   (e.g. an image path in a placeholder slot) blows its column out to min-content
   and crushes the other one. */
.g-duo > * { min-width: 0; }
.g-duo img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--lp-line); border-radius: 3px;
}

/* Small right-floated photo thumbnail that body text wraps around. */
.g-thumb {
  float: right;
  width: 220px; max-width: 44%;
  margin: 4px 0 14px 22px;
  background: var(--g-panel-glass);
  border: 1px solid var(--lp-line); border-radius: 3px;
  padding: 8px;
}
.g-thumb img { width: 100%; height: auto; display: block; border-radius: 2px; }
.g-thumb figcaption {
  font-size: 11px; color: var(--lp-dim); text-align: center; margin-top: 7px;
}
@media (max-width: 680px) {
  .g-thumb { float: none; width: 100%; max-width: 260px; margin: 0 auto 16px; }
}

/* Photo placeholder — clearly marked slot to replace with a real photo. */
.g-photo {
  aspect-ratio: 16 / 9;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(31,127,214,0.05) 14px 28px),
    var(--bp-paper-2);
  border: 1.5px dashed var(--lp-accent-dim); border-radius: 3px;
  color: var(--lp-dim);
}
.g-photo .g-photo-ico { font-size: 26px; color: var(--lp-accent-dim); }
.g-photo .g-photo-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
}
.g-photo .g-photo-hint { font-size: 11px; max-width: 60%; color: var(--lp-dim); }

/* Callout boxes. */
.g-note {
  display: grid; grid-template-columns: auto 1fr; gap: 12px;
  align-items: start;
  background: var(--g-panel-glass);
  border: 1px solid var(--lp-line); border-left: 3px solid var(--lp-accent);
  border-radius: 3px; padding: 14px 18px; margin: 20px 0;
  font-size: 13.5px; line-height: 1.65; color: var(--lp-ink);
}
.g-note--warn { border-left-color: var(--lp-warn); }
.g-note--warn .g-note-ico { color: var(--lp-warn); }
.g-note-ico { font-size: 16px; color: var(--lp-accent); line-height: 1.5; }
.g-note b { color: var(--lp-ink); }

/* "Describe" prompt callout — the exact text to paste into the AI modal. */
.g-prompt {
  background: var(--g-panel-glass);
  border: 1px solid var(--lp-line); border-left: 3px solid var(--lp-accent);
  border-radius: 3px; padding: 16px 18px; margin: 18px 0;
}
.g-prompt-label {
  display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--lp-accent); margin-bottom: 8px; font-family: 'JetBrains Mono', monospace;
}
.g-prompt p { font-size: 15px; line-height: 1.6; color: var(--lp-ink); font-style: italic; margin: 0; }

/* Spec / pin tables. */
.g-table-wrap { overflow-x: auto; margin: 20px 0; }
.g-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  background: var(--g-panel-glass); border: 1px solid var(--lp-line);
}
.g-table caption {
  text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--lp-dim); padding: 0 0 8px;
}
.g-table th, .g-table td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--lp-line); }
.g-table thead th {
  background: var(--lp-panel-2); color: var(--lp-ink);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
}
.g-table tbody tr:last-child td { border-bottom: none; }
.g-table td code, .g-table th code { background: var(--lp-panel-2); }

/* Inline code + code blocks. */
.g-section code { background: var(--lp-panel-2); color: var(--lp-ink);
                  padding: 1px 6px; border-radius: 2px; font-size: 0.9em; }
.g-code {
  background: #10202f; color: #d6e6f5;
  border: 1px solid var(--lp-line); border-radius: 3px;
  padding: 16px 18px; margin: 18px 0; overflow-x: auto;
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; line-height: 1.6;
}
.g-code .c-key { color: #6fb4f0; }
.g-code .c-str { color: #8fd39a; }
.g-code .c-com { color: #64798f; font-style: italic; }
.g-code .c-num { color: #e0a56b; }

/* Numbered step chips inline in prose. */
.g-steps { counter-reset: gstep; list-style: none; margin: 16px 0; padding: 0; }
.g-steps > li {
  counter-increment: gstep; position: relative;
  padding: 2px 0 2px 40px; margin: 12px 0;
}
.g-steps > li::before {
  content: counter(gstep); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--lp-accent); color: var(--lp-accent-text);
  font-family: 'JetBrains Mono', monospace; font-size: 12px; border-radius: 50%;
}

/* Prev/next + CTA at the article foot. */
.g-article-foot {
  margin-top: 44px; padding-top: 24px; border-top: 1px dashed var(--lp-line);
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  justify-content: space-between;
}

/* ------------------------------------------------------------
 * Small screens
 * ------------------------------------------------------------ */
@media (max-width: 680px) {
  .g-main { padding: 34px 16px 52px; }
  .g-article-head { padding: 22px 18px; }
  .g-section > h2 { font-size: 21px; }
  .g-card-grid { grid-template-columns: 1fr; }
  .g-photo .g-photo-hint { max-width: 82%; }
}