/* ------------------------------------------------------------------ */
/*  Jerico User Guide — instrument graphite design rules & tokens.    */
/* ------------------------------------------------------------------ */
:root {
  --bg:          #0b0b0b;
  --bg-2:        #121212;
  --bg-3:        #1a1a19;
  --bg-card:     #0f0f0f;
  --ink:         #f2f0ec;
  --ink-2:       #a5a19a;
  --ink-3:       #8e8a83;
  --ink-ghost:   #5b5852;
  --rule:        #232322;
  --rule-2:      #34342f;

  --planner:     #7aa2ff;
  --developer:   #b6e85f;
  --reviewer:    #ff7e9c;
  --live:        #6fdca0;
  --hold:        #ffb547;

  --display: "Archivo", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --sans:    "Archivo", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.guide-body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
}

.guide-mono {
  font-family: var(--mono);
}

/* Markdown prose content styling in guide articles */
.guide-prose h2 {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 2.2rem;
  margin-bottom: 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 5rem;
}

.guide-prose h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-top: 1.6rem;
  margin-bottom: 0.6rem;
  scroll-margin-top: 5rem;
}

.guide-prose p {
  color: var(--ink-2);
  margin-bottom: 1.2rem;
  line-height: 1.65;
}

.guide-prose ul, .guide-prose ol {
  margin-bottom: 1.2rem;
  padding-left: 1.5rem;
  color: var(--ink-2);
}

.guide-prose li {
  margin-bottom: 0.4rem;
}

.guide-prose code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--bg-3);
  color: var(--ink);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  border: 1px solid var(--rule);
}

.guide-prose pre {
  background: var(--bg-card);
  border: 1px solid var(--rule-2);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin-bottom: 1.4rem;
}

.guide-prose pre code {
  background: transparent;
  padding: 0;
  border: none;
  color: var(--ink);
}

/* Copy-button wrapper around fenced code blocks (added client-side) */
.guide-code-block {
  position: relative;
  margin-bottom: 1.4rem;
}

.guide-code-block pre {
  margin-bottom: 0;
}

.guide-copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  background: var(--bg-2);
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.guide-code-block:hover .guide-copy-btn,
.guide-copy-btn:focus {
  opacity: 1;
}

.guide-copy-btn:hover {
  color: var(--ink);
  border-color: var(--planner);
}

.guide-prose blockquote {
  border-left: 3px solid var(--planner);
  background: var(--bg-2);
  padding: 0.75rem 1.2rem;
  margin-bottom: 1.4rem;
  color: var(--ink-2);
  border-radius: 0 6px 6px 0;
}

.guide-prose a {
  color: var(--planner);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.guide-prose a:hover {
  color: var(--ink);
}

/* ------------------------------------------------------------------ */
/*  Motifs — a faint dot-grid texture, tinted per-section via          */
/*  --motif-color. Decorative only: kept below content (z-index),      */
/*  low-opacity, and never covers text or interactive elements.        */
/* ------------------------------------------------------------------ */
.guide-motif {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, var(--motif-color, rgba(255, 255, 255, 0.05)) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}