/* ============================================================================
   guide.css - the SHARED stylesheet for the CabDesign /guides/ blog
   ----------------------------------------------------------------------------
   One stylesheet for the guides hub (guides/index.html) and every article
   (guides/<category>/<slug>.html), so the whole blog reads as one system
   (the interface-consistency mandate). Every colour routes through a
   shared/theme.css token, so the blog flips correctly across all 10 themes and
   resolves on the un-themed first visit via theme.css's :root:not([data-theme])
   fallback. No hardcoded palette hex lives here - only theme tokens + geometry.
   Load order on each page:  theme.css -> site-header.css -> guide.css.
   ============================================================================ */

:root {
  --g-maxw: 1160px;      /* page container */
  --g-prose: 820px;      /* narrative body column (wide, not a print column) */
  --g-r: 14px;           /* card radius */
  --g-r-sm: 9px;
}

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

body {
  font-family: var(--font, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- the light breadcrumb nav bar (site-header suite-breadcrumb) ---------- */
.guide-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--surface);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 clamp(1rem, 4vw, 2rem);
}
.guide-nav .inner {
  max-width: var(--g-maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 1.25rem;
  height: 56px; overflow-x: auto;
}
.guide-nav a.section-link {
  color: var(--text-muted); text-decoration: none; font-size: .85rem; font-weight: 600;
  white-space: nowrap; transition: color .15s;
}
.guide-nav a.section-link:hover { color: var(--accent-text); }

/* ---------- shared page container + prose width ---------- */
.wrap { max-width: var(--g-maxw); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
/* the reading column is CENTERED in the wrap: an off-center column strands a large
   asymmetric dead margin on wide viewports (the founder-named dead-band class) */
.prose { max-width: var(--g-prose); margin-inline: auto; }

/* ---------- hero ---------- */
.hero { padding: clamp(2.5rem, 6vw, 4rem) 0 1.5rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: .9rem;
}
.hero h1 {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  color: var(--text); max-width: 18ch; margin-bottom: 1rem;
}
.guide-lede {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--text-muted); max-width: var(--g-prose); line-height: 1.55;
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.25rem;
  font-size: .82rem; color: var(--text-muted);
}
.hero-meta span { display: inline-flex; align-items: center; gap: .4rem; }

/* audience + type badges */
.badges { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.badge {
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  padding: .25rem .6rem; border-radius: 999px; text-transform: capitalize;
}
.badge-type { background: var(--accent-soft); color: var(--accent-ink); }
.badge-aud { background: var(--surface-2); color: var(--text-muted); }

/* ---------- section rhythm ---------- */
section { padding: 2rem 0; }
h2 {
  font-size: clamp(1.35rem, 3vw, 1.7rem); font-weight: 750;
  letter-spacing: -.01em; color: var(--text); margin-bottom: 1rem;
  scroll-margin-top: 76px;
}
h3 { font-size: 1.12rem; font-weight: 700; color: var(--text); margin: 1.75rem 0 .6rem; }
.prose p { color: var(--text); margin-bottom: 1.05rem; }
.prose p.sub { color: var(--text-muted); }
.prose ul, .prose ol { margin: 0 0 1.1rem 1.25rem; color: var(--text); }
.prose li { margin-bottom: .5rem; }
.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { text-decoration-thickness: 2px; }
strong { color: var(--text); font-weight: 700; }

/* ---------- At a Glance ---------- */
.ataglance {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--g-r); padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: var(--shadow); margin: 1rem 0 .5rem;
}
.ataglance h2 { margin-bottom: .6rem; }
.ataglance .summary { color: var(--text-muted); max-width: var(--g-prose); margin-bottom: 1.25rem; }
.facts { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; }
.facts th, .facts td {
  text-align: left; padding: .6rem .25rem; font-size: .92rem;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.facts tr:last-child th, .facts tr:last-child td { border-bottom: none; }
.facts th { font-weight: 600; color: var(--text-muted); width: 42%; }
.facts td { font-weight: 700; color: var(--text); }
.jumplinks-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: .5rem;
}
.jumplinks { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; }
/* ON-COLOR contract (theme.css): text on the fixed-light --accent-soft fill uses the
   fixed --accent-ink, NEVER --accent-text (which flips bright in dark themes). */
.jumplinks a {
  font-size: .85rem; font-weight: 600; text-decoration: none;
  color: var(--accent-ink);
  background: var(--accent-soft); border-radius: 999px; padding: .3rem .75rem;
}
.jumplinks a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- figure / SVG diagram (theme-token driven) ---------- */
figure { margin: 1.5rem 0; }
/* min-width keeps diagram labels legible on a phone: the card scrolls sideways
   instead of the SVG shrinking below readable native scale */
figure svg { width: 100%; height: auto; display: block; min-width: 640px; }
figcaption { font-size: .82rem; color: var(--text-muted); margin-top: .6rem; text-align: center; }
.figure-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--g-r); padding: clamp(1rem, 3vw, 1.5rem);
  overflow-x: auto;
}
/* SVG element classes - all colours are theme tokens, so diagrams flip too.
   Contrast contract: meaning-bearing dots/lines use --accent-text (verified >=3:1
   against surface/bg in all 10 themes), never raw --accent (fails SC 1.4.11 on
   --surface-2 in the light themes). Text placed ON a fixed-light *-soft fill uses
   that fill's fixed -ink token (the theme.css ON-COLOR contract). */
.dg-panel { fill: var(--surface-2); stroke: var(--border); stroke-width: 1.5; }
.dg-hole { fill: var(--accent-text); }
.dg-edge { stroke: var(--border); stroke-width: 1.2; }
.dg-dim { stroke: var(--accent-text); stroke-width: 1; }
.dg-fill-soft { fill: var(--accent-soft); }
.dg-fill-ok { fill: var(--ok-soft); }
.dg-fill-warn { fill: var(--warn-soft); }
.dg-fill-surface { fill: var(--surface); stroke: var(--border); stroke-width: 1.2; }
.dg-stroke-accent { fill: none; stroke: var(--accent-text); stroke-width: 2; }
.dg-title { font: 700 15px var(--font, Inter, sans-serif); fill: var(--text); }
.dg-label { font: 600 12px var(--font, Inter, sans-serif); fill: var(--text); }
.dg-sub { font: 500 11px var(--font, Inter, sans-serif); fill: var(--text-muted); }
.dg-tag { font: 700 10px var(--font, Inter, sans-serif); fill: var(--accent-text); letter-spacing: .04em; }
.dg-label-on-ok { font: 600 12px var(--font, Inter, sans-serif); fill: var(--ok-ink); }
.dg-sub-on-warn { font: 500 11px var(--font, Inter, sans-serif); fill: var(--warn-ink); }

/* ---------- callouts ---------- */
.callout {
  border-left: 3px solid var(--accent); background: var(--surface);
  border-radius: 0 var(--g-r-sm) var(--g-r-sm) 0; padding: 1rem 1.25rem; margin: 1.5rem 0;
}
.callout.tip { border-left-color: var(--ok-text); }
.callout.note { border-left-color: var(--warn-text); }
.callout p { margin: 0; }
.callout .k {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: .25rem;
}

/* ---------- product CTA (the interlinking flywheel) ---------- */
.cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem;
  background: var(--accent-soft); border: 1px solid var(--border);
  border-radius: var(--g-r); padding: clamp(1.1rem, 3vw, 1.5rem); margin: 1.75rem 0;
}
.cta .cta-body { flex: 1 1 260px; }
.cta .cta-eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: .3rem;
}
.cta h3 { margin: 0 0 .3rem; color: var(--accent-ink); }
.cta p { margin: 0; color: var(--accent-ink); font-size: .92rem; opacity: .92; }
.cta .btn {
  flex: 0 0 auto; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  background: var(--on-accent-fill); color: var(--on-accent);
  border: 1px solid var(--on-accent-fill); border-radius: 999px;
  padding: .7rem 1.3rem; min-height: 44px; display: inline-flex; align-items: center; gap: .5rem;
}
.cta .btn:hover { filter: brightness(1.05); }

/* ---------- FAQ ---------- */
.faq h3 { margin-top: 1.4rem; }
.faq .q { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.faq .a { color: var(--text-muted); margin-top: .35rem; }

/* ---------- related guides ---------- */
/* auto-FIT collapses empty tracks so a 2-card row fills the column with no
   dead phantom columns (auto-fill reserves them and reads as broken) */
.related-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;
}
/* the card IS the link: suppress .prose's inline-link underline (specificity) */
.prose a.related-card, .related-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--g-r); padding: 1.1rem 1.15rem; transition: border-color .15s, transform .15s;
}
.related-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.related-card .rc-type {
  font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent-text);
}
.related-card .rc-title { font-weight: 700; color: var(--text); margin: .3rem 0; }
.related-card .rc-desc { font-size: .85rem; color: var(--text-muted); }

/* ---------- sources ---------- */
.sources ol { margin: 0; padding-left: 1.25rem; color: var(--text-muted); font-size: .86rem; }
.sources li { margin-bottom: .4rem; }
.sources a { color: var(--accent-text); text-decoration: none; }
.sources a:hover { text-decoration: underline; }

/* ---------- footer ---------- */
.guide-footer {
  max-width: var(--g-maxw); margin: 2rem auto 0; padding: 2rem clamp(1rem, 4vw, 2rem);
  border-top: 1px solid var(--border); color: var(--text-muted); font-size: .82rem;
}
.guide-footer .byline { color: var(--text); font-weight: 600; }
.guide-footer a { color: var(--accent-text); text-decoration: none; }

/* ============================ hub-only ============================ */
.hub-hero { padding: clamp(2.5rem, 6vw, 4rem) 0 1rem; }
.cat-group { padding: 1.5rem 0; }
.cat-title {
  font-size: 1.15rem; font-weight: 750; color: var(--text);
  padding-bottom: .5rem; margin-bottom: 1rem; border-bottom: 2px solid var(--border);
}
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
/* blog-build.cjs stamps data-count so a 1- or 2-article category renders a row
   exactly as wide as its real content instead of empty phantom columns */
.card-grid[data-count="1"] { grid-template-columns: minmax(300px, 480px); }
.card-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(300px, 480px)); }
@media (max-width: 700px) {
  .card-grid[data-count="2"] { grid-template-columns: 1fr; }
}
.guide-card {
  display: flex; flex-direction: column; gap: .5rem; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--g-r); padding: 1.25rem; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.guide-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.gc-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.gc-type, .gc-aud { font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px; }
.gc-type { background: var(--accent-soft); color: var(--accent-ink); }
.gc-aud { background: var(--surface-2); color: var(--text-muted); }
.gc-title { font-size: 1.08rem; font-weight: 750; color: var(--text); line-height: 1.25; }
.gc-desc { font-size: .88rem; color: var(--text-muted); line-height: 1.5; }

/* ---------- focus + motion (a11y baseline) ---------- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .guide-card:hover, .related-card:hover { transform: none; }
}

@media (max-width: 640px) {
  .guide-nav .inner {
    gap: 1rem;
    /* scroll signifier: fade the clipped edge so overflow reads as "more to
       scroll", never as truncated text (the never-truncate standing rule).
       The #000 is a mask alpha ramp, not a rendered colour. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); /* lint-ok-hex */
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); /* lint-ok-hex */
  }
  .hero h1 { max-width: none; }
}