/* ============================================================
   PXLsuite Guides — guide-specific styles
   Linked AFTER ../styles.css. Only rules the main sheet
   doesn't already cover. Reuses all tokens, type scale,
   colour variables, and components from the parent stylesheet.
   ============================================================ */

/* --- Guides hub intro card --------------------------------- */
.guides-intro {
  background-color: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-pxl-teal);
  border-radius: 20px;
  padding: 56px 64px;
  margin-bottom: 80px;
  position: relative;
  overflow: hidden;
}
.guides-intro::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 320px; height: 320px;
  background: radial-gradient(circle at top right, rgba(0, 196, 204, 0.07) 0%, transparent 70%);
  pointer-events: none;
}
.guides-intro-eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-pxl-teal);
  margin: 0 0 20px 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.guides-intro-eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background-color: var(--color-pxl-teal);
}
.guides-intro h1 {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-secondary);
  letter-spacing: -0.02em;
  margin: 0 0 20px 0;
}
.guides-intro h1 em {
  font-style: normal;
  color: var(--color-pxl-teal);
}
.guides-intro p {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-body-light);
  max-width: 640px;
  margin: 0;
}
@media (max-width: 768px) {
  .guides-intro { padding: 32px 24px; margin-bottom: 48px; }
}


/* --- Guides grid ------------------------------------------- */
.guides-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 80px;
}
@media (max-width: 1024px) {
  .guides-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .guides-grid { grid-template-columns: 1fr; }
}


/* --- Guide card (hub page) --------------------------------- */
/* Live card: same hover+elevation treatment as the tool-card family */
.guide-card {
  background-color: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    border-color 0.3s var(--ease-out),
    transform 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out);
  text-decoration: none;
}
.guide-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-pxl-teal);
  box-shadow:
    0 20px 44px -20px rgba(0, 0, 0, 0.55),
    0 6px 20px -8px rgba(0, 196, 204, 0.18);
}
.guide-card-accent {
  height: 3px;
  background-color: var(--color-pxl-teal);
  flex-shrink: 0;
}
.guide-card-body {
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.guide-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: block;
  margin-bottom: 2px;
}
.guide-card-icon-soon {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  display: block;
  margin-bottom: 10px;
  opacity: 0.55;
}
.guide-card-tool-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-pxl-teal);
  margin: 0;
}
.guide-card-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-secondary);
  margin: 0;
  letter-spacing: -0.01em;
}
.guide-card-desc {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-body-light);
  margin: 0;
  flex: 1;
}
.guide-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}
.guide-card-versions {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-text-readable);
}
/* DCC app logo(s) — top-right of the card, just under the status pill.
   Shows which app(s) the tool is for (e.g. MU Bridge = Maya + Unreal). */
.guide-card-dccs {
  position: absolute;
  top: 34px;
  right: 28px;
  z-index: 3;
  display: flex;
  gap: 8px;
  align-items: center;
}
.guide-card-dccs img {
  height: 28px;
  width: auto;
  opacity: 0.9;
}
.guide-card-cta {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-pxl-teal);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: gap 0.2s var(--ease-out), color 0.2s ease;
}
.guide-card:hover .guide-card-cta { gap: 9px; }


/* --- Coming-soon card (muted) ------------------------------ */
.guide-card-soon {
  background-color: var(--color-surface-1);
  border: 1px dashed var(--color-border);
  border-radius: 16px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}
.guide-card-soon-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-readable);
  margin: 0;
}
.guide-card-soon-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-secondary);
  margin: 0;
  letter-spacing: -0.01em;
}
.guide-card-soon-pill {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-readable);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px 10px;
  display: inline-block;
  align-self: flex-start;
  margin-top: 4px;
}


/* ============================================================
   GUIDE PAGE (turntable.html and future guide pages)
   ============================================================ */

/* --- Guide hero block ------------------------------------- */
.guide-hero {
  padding: 72px 0 80px;
  position: relative;
  overflow: hidden;
}
.guide-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 85% 0%, rgba(0, 196, 204, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 60%, rgba(215, 0, 90, 0.05) 0%, transparent 60%);
  pointer-events: none;
}
.guide-hero-inner {
  position: relative;
  z-index: 1;
}
.guide-hero-breadcrumb {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-readable);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.guide-hero-breadcrumb a {
  color: var(--color-text-readable);
  text-decoration: none;
  transition: color 0.2s;
}
.guide-hero-breadcrumb a:hover { color: var(--color-pxl-teal); }
.guide-hero-breadcrumb .bc-sep {
  opacity: 0.4;
}
.guide-hero-tag {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-pxl-teal);
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.guide-hero-tag::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background-color: var(--color-pxl-teal);
}
.guide-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 700;
  line-height: 1.0;
  color: var(--color-secondary);
  letter-spacing: -0.025em;
  margin: 0 0 24px 0;
}
.guide-hero h1 em {
  font-style: normal;
  color: var(--color-pxl-teal);
}
.guide-hero-desc {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-body-light);
  max-width: 640px;
  margin: 0 0 36px 0;
}
.guide-hero-versions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.guide-version-chip {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 6px 12px;
  background-color: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-body-light);
}
.guide-version-chip strong {
  color: var(--color-pxl-teal);
}
.guide-hero-ctas {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.guide-hero-link-secondary {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-readable);
  text-decoration: none;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.guide-hero-link-secondary:hover { color: var(--color-body-light); }
@media (max-width: 768px) {
  .guide-hero { padding: 48px 0 56px; }
}


/* --- On-this-page TOC ------------------------------------- */
.guide-toc {
  background-color: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-pxl-teal);
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 72px;
  max-width: 480px;
}
.guide-toc-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-pxl-teal);
  margin: 0 0 14px 0;
}
.guide-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  counter-reset: toc-counter;
}
.guide-toc ol li {
  counter-increment: toc-counter;
}
.guide-toc ol li a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-body-light);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  transition: color 0.2s;
}
.guide-toc ol li a::before {
  content: counter(toc-counter, decimal-leading-zero);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-readable);
  flex-shrink: 0;
  margin-top: 1px;
}
.guide-toc ol li a:hover { color: var(--color-pxl-teal); }
.guide-toc ol li a:hover::before { color: var(--color-pxl-teal); }


/* --- Guide body layout ------------------------------------ */
/* Two-col on large screens: main content + sticky sidebar.
   Single-col below 1024px. */
.guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
@media (max-width: 1100px) {
  .guide-layout { grid-template-columns: 1fr; gap: 0; }
  .guide-sidebar { display: none; }
}

.guide-sidebar {
  position: sticky;
  top: 80px;
}
.guide-sidebar-toc {
  background-color: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-pxl-teal);
  border-radius: 12px;
  padding: 22px 22px 20px;
}
.guide-sidebar-toc-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-pxl-teal);
  margin: 0 0 12px 0;
}
.guide-sidebar-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  counter-reset: stoc-counter;
}
.guide-sidebar-toc ol li { counter-increment: stoc-counter; }
.guide-sidebar-toc ol li a {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-readable);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  transition: color 0.2s;
}
.guide-sidebar-toc ol li a::before {
  content: counter(stoc-counter, decimal-leading-zero);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 600;
  color: var(--color-border);
  flex-shrink: 0;
  transition: color 0.2s;
}
.guide-sidebar-toc ol li a:hover,
.guide-sidebar-toc ol li a.is-active { color: var(--color-pxl-teal); }
.guide-sidebar-toc ol li a:hover::before,
.guide-sidebar-toc ol li a.is-active::before { color: var(--color-pxl-teal); }


/* --- Guide content sections ------------------------------- */
.guide-content {
  padding-bottom: 80px;
}

.guide-section {
  padding: 56px 0;
  border-top: 1px solid var(--color-border);
  position: relative;
}
.guide-section:first-child {
  border-top: none;
  padding-top: 0;
}

.guide-section-eyebrow {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-pxl-teal);
  margin: 0 0 12px 0;
}

.guide-section h2 {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-secondary);
  letter-spacing: -0.015em;
  margin: 0 0 24px 0;
  text-transform: none;
}

.guide-section h3 {
  font-family: var(--font-heading);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-secondary);
  letter-spacing: -0.01em;
  margin: 32px 0 14px 0;
  text-transform: none;
}
.guide-section h3:first-of-type { margin-top: 0; }

.guide-section h4 {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-secondary);
  letter-spacing: -0.005em;
  margin: 24px 0 10px 0;
  text-transform: none;
}

.guide-section p {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-body-light);
  margin: 0 0 16px 0;
}
.guide-section p:last-child { margin-bottom: 0; }

.guide-section ul, .guide-section ol {
  padding-left: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}
.guide-section ul li,
.guide-section ol li {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-body-light);
  padding-left: 20px;
  position: relative;
}
.guide-section ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background-color: var(--color-pxl-teal);
  border-radius: 50%;
}
.guide-section ol {
  counter-reset: guide-list;
}
.guide-section ol li {
  counter-increment: guide-list;
}
.guide-section ol li::before {
  content: counter(guide-list);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-pxl-teal);
  line-height: 1.6;
}


/* --- Install paths box ------------------------------------ */
.guide-install-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 28px 0;
}
@media (max-width: 680px) {
  .guide-install-grid { grid-template-columns: 1fr; }
}

.guide-install-path {
  background-color: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.guide-install-path-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-pxl-teal);
  margin: 0;
}
.guide-install-path h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-secondary);
  margin: 0;
}
.guide-install-path p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-body-light);
  margin: 0;
  flex: 1;
}


/* --- Code block ------------------------------------------- */
.guide-code-block {
  background-color: #0d0d0d;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-pxl-teal);
  border-radius: 10px;
  padding: 20px 22px;
  margin: 20px 0;
  position: relative;
  overflow-x: auto;
}
.guide-code-block code {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: #A5D6A7;
  letter-spacing: 0.01em;
  white-space: pre;
  display: block;
}
.guide-code-block-label {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-readable);
  margin: 0 0 10px 0;
}
/* Inline code within prose */
.guide-section p code,
.guide-section li code {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  background-color: var(--color-surface-3);
  color: var(--color-pxl-teal);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}


/* --- Step-gating explanation box -------------------------- */
.guide-gating-box {
  background-color: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 24px 28px;
  margin: 24px 0 32px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.guide-gating-box-title {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-readable);
  margin: 0;
}
.guide-gating-states {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.guide-gating-state {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.guide-gating-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.guide-gating-dot.is-done    { background-color: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); }
.guide-gating-dot.is-current { background-color: #F2A900; box-shadow: 0 0 0 3px rgba(242, 169, 0, 0.25); }
.guide-gating-dot.is-locked  { background-color: #3a3a3a; border: 1px solid #4a4a4a; }
.guide-gating-state-label {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-secondary);
  margin: 0 0 2px 0;
}
.guide-gating-state-desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-body-light);
  margin: 0;
}


/* --- Screenshot figure (guide images) --------------------- */
.guide-figure {
  margin: 32px 0;
}
.guide-figure-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  margin-inline: auto;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  cursor: zoom-in;
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  background-color: #0a0a0a;
}
/* Interface screenshots: shown at roughly real tool size (the windows are ~600px
   wide; captures are 2x, so 600px display = crisp, real-life scale — not huge). */
.guide-figure-img.screenshot {
  max-width: 600px;
}
.guide-figure-img:hover {
  border-color: var(--color-pxl-teal);
  transform: translateY(-2px);
}

/* --- Hero: description + a compact interface preview side by side ---------- */
.guide-hero-body {
  display: flex;
  gap: 52px;
  align-items: flex-start;
}
.guide-hero-left {
  flex: 1 1 0;
  min-width: 0;
  max-width: 660px;
}
.guide-hero-preview {
  flex: 0 0 auto;
  text-align: center;
}
.guide-hero-preview img {
  display: block;
  width: auto;
  height: auto;
  max-width: 300px;
  max-height: 400px;            /* consistent preview height across all guides */
  border: 1px solid var(--color-border);
  border-radius: 10px;
  cursor: zoom-in;
  background-color: #0a0a0a;
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.guide-hero-preview img:hover {
  border-color: var(--color-pxl-teal);
  transform: translateY(-2px);
}
.guide-hero-preview-cap {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-readable);
  margin-top: 8px;
}
@media (max-width: 820px) {
  .guide-hero-body { flex-direction: column; }
  .guide-hero-preview { align-self: flex-start; }
  .guide-hero-preview img { max-width: 100%; max-height: none; }
}
.guide-figure figcaption {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-readable);
  margin-top: 10px;
  text-align: center;
}

/* Side-by-side figures on wide screens */
.guide-figures-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 32px 0;
}
@media (max-width: 768px) {
  .guide-figures-2col { grid-template-columns: 1fr; }
}


/* --- Note / tip callout ----------------------------------- */
.guide-note {
  background-color: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-pxl-amber);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 20px 0;
}
.guide-note p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-body-light);
  margin: 0;
}
.guide-note p strong {
  color: var(--color-pxl-amber);
  font-weight: 600;
}


/* --- Troubleshooting list --------------------------------- */
.guide-troubleshoot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px 0;
}
.guide-trouble-item {
  background-color: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.guide-trouble-problem {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-secondary);
  margin: 0;
}
.guide-trouble-solution {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-body-light);
  margin: 0;
}


/* --- Guides nav link in top bar --------------------------- */
/* The main site nav doesn't link to guides, but the guides pages
   add a "Guides" link that needs to sit visually within the nav row.
   Override to show a subtle accent on the active guides context. */
.nav-menu a.is-guides-active {
  color: var(--color-pxl-teal) !important;
}


/* --- Guides section marker (no number) -------------------- */
/* The page doesn't use numbered section markers.
   Inherits section-marker-bare from the main stylesheet. */
.guides-page .section-block::after {
  background-color: var(--color-pxl-teal);
  box-shadow: 0 0 24px rgba(0, 196, 204, 0.45);
}


/* --- Responsive touch-ups --------------------------------- */
@media (max-width: 768px) {
  .guide-content { padding-bottom: 56px; }
  .guide-section { padding: 40px 0; }
  .guide-toc { display: none; } /* TOC hidden on mobile; anchor nav above fold handles it */
  .guide-install-path { padding: 20px 20px 18px; }
  .guide-gating-box { padding: 20px 20px 18px; }
}


/* ============================================================
   STATUS INDICATOR — hub card lifecycle lights
   ============================================================ */

/* Colour tokens for the three lifecycle states */
:root {
  --status-stable:    #22c55e;               /* green  — same as .guide-gating-dot.is-done */
  --status-prototype: var(--color-pxl-amber); /* amber  — #FFA500 */
  --status-alpha:     var(--color-pxl-pink);  /* red    — #D7005A */
}

/* The pill sits in the card header row, top-right corner.
   We position it absolutely so the existing card-body flex
   layout is untouched. */
.guide-card-body {
  position: relative; /* anchor for the absolute pill */
}

.guide-status {
  position: absolute;
  top: 0;
  right: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background-color: rgba(255, 255, 255, 0.04);
  pointer-events: none; /* decorative — parent <a> handles click */
}

/* The coloured dot */
.guide-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* The short label */
.guide-status-label {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

/* Per-state colours */
.guide-status.is-stable   .guide-status-dot  { background-color: var(--status-stable);    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.22); }
.guide-status.is-stable   .guide-status-label { color: var(--status-stable); }

.guide-status.is-prototype .guide-status-dot  { background-color: var(--status-prototype); box-shadow: 0 0 0 2px rgba(255, 165, 0, 0.22); }
.guide-status.is-prototype .guide-status-label { color: var(--status-prototype); }

.guide-status.is-alpha    .guide-status-dot  { background-color: var(--status-alpha);     box-shadow: 0 0 0 2px rgba(215, 0, 90, 0.22); }
.guide-status.is-alpha    .guide-status-label { color: var(--status-alpha); }


/* --- Status legend (below guides-intro, above the grid) ---- */
.guides-status-legend {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.guides-status-legend-heading {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-readable);
  margin: 0;
  flex-shrink: 0;
}

.guides-status-legend-items {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.guides-status-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.guides-status-legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.guides-status-legend-dot.is-stable    { background-color: var(--status-stable);    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.22); }
.guides-status-legend-dot.is-prototype { background-color: var(--status-prototype); box-shadow: 0 0 0 2px rgba(255, 165, 0, 0.22); }
.guides-status-legend-dot.is-alpha     { background-color: var(--status-alpha);     box-shadow: 0 0 0 2px rgba(215, 0, 90, 0.22); }

.guides-status-legend-text {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-text-readable);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .guides-status-legend { gap: 12px; }
  .guides-status-legend-items { gap: 12px; }
}