/* ==========================================================================
   NDS DataDelivery — User Guide / Help Center shared styles
   Loaded on every /guide/ page AFTER the Tailwind CDN script.
   All custom classes are namespaced .guide-* so they never collide with
   Tailwind utilities or the marketing site's style.css.
   ========================================================================== */

:root {
  --nds-accent: #44b3e6;
  --nds-accent-dark: #389fc1;
  --nds-navy: #1a2533;
}

/* Accent helpers (mirror the marketing pages so inline classes work here too) */
.text-accent { color: var(--nds-accent); }
.bg-accent { background-color: var(--nds-accent); }
.gradient-overlay { background: linear-gradient(135deg, rgba(26,37,51,.94), rgba(26,37,51,.90)); }

/* --- Hero ------------------------------------------------------------------ */
.guide-hero {
  background: linear-gradient(135deg, #1a2533 0%, #243447 55%, #1a2533 100%);
}
.guide-eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--nds-accent);
}
.guide-breadcrumb a { color: rgba(255,255,255,.75); text-decoration: none; }
.guide-breadcrumb a:hover { color: #fff; }

/* --- Topic cards (landing + cross-links) ----------------------------------- */
.guide-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: .75rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  height: 100%;
  text-decoration: none;
}
.guide-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 26px -12px rgba(26,37,51,.28);
  border-color: var(--nds-accent);
}
.guide-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: rgba(68,179,230,.12);
  color: var(--nds-accent);
  margin-bottom: 1rem;
}
.guide-card-icon svg { width: 1.5rem; height: 1.5rem; }

/* --- "Big picture" flow strip ---------------------------------------------- */
.guide-flow {
  display: grid;
  grid-template-columns: repeat(1, minmax(0,1fr));
  gap: 1rem;
}
@media (min-width: 768px) { .guide-flow { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.guide-flow-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .6rem;
  padding: 1rem .5rem;
}
.guide-flow-step .guide-flow-dot {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 9999px;
  background: rgba(68,179,230,.12); color: var(--nds-accent);
}
.guide-flow-step .guide-flow-dot svg { width: 1.5rem; height: 1.5rem; }
/* connecting arrow between flow steps on desktop */
@media (min-width: 768px) {
  .guide-flow-step:not(:last-child)::after {
    content: "\2192";
    position: absolute; right: -.6rem; top: 1.4rem;
    color: #cbd5e1; font-size: 1.5rem; line-height: 1;
  }
}

/* --- Numbered steps -------------------------------------------------------- */
.guide-steps { margin: 1.5rem 0; }
.guide-step {
  position: relative;
  display: flex;
  gap: 1rem;
  padding-bottom: 1.5rem;
}
.guide-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 2.4rem;
  bottom: 0;
  width: 2px;
  background: #e5e7eb;
}
.guide-step-num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: var(--nds-accent);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  z-index: 1;
}
.guide-step-body { padding-top: .2rem; }
.guide-step-body > :first-child { margin-top: 0; }
.guide-step-body p { margin: 0 0 .5rem; }

/* --- Callouts (tip / warning / note) --------------------------------------- */
.guide-callout {
  display: flex;
  gap: .75rem;
  padding: 1rem 1.15rem;
  border-radius: .6rem;
  border: 1px solid;
  margin: 1.25rem 0;
  font-size: .975rem;
  line-height: 1.6;
}
.guide-callout svg { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: .15rem; }
.guide-callout p { margin: 0; }
.guide-callout--tip      { background:#eff8fd; border-color:#bfe6f7; color:#0f5e7e; }
.guide-callout--tip svg  { color: var(--nds-accent); }
.guide-callout--warning  { background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.guide-callout--warning svg { color:#f97316; }
.guide-callout--note     { background:#f5f6f8; border-color:#e2e5ea; color:#374151; }
.guide-callout--note svg { color:#6b7280; }
.guide-callout strong { font-weight:700; }

/* --- Success box ("you'll know it worked when…") --------------------------- */
.guide-success {
  display:flex; gap:.75rem;
  padding:1rem 1.15rem;
  border-radius:.6rem;
  background:#f0fdf4;
  border:1px solid #bbf7d0;
  color:#166534;
  margin:1.25rem 0;
}
.guide-success svg { flex:0 0 auto; width:1.25rem; height:1.25rem; margin-top:.15rem; color:#22c55e; }
.guide-success p { margin:0; }

/* --- Figures / screenshots ------------------------------------------------- */
.guide-figure { margin: 1.5rem 0; }
.guide-shot {
  width: 100%;
  border-radius: .6rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 12px 22px -14px rgba(26,37,51,.45);
  display:block;
}
.guide-figcaption {
  margin-top: .6rem;
  font-size: .85rem;
  color: #6b7280;
  text-align: center;
}
/* Placeholder shown until a real screenshot is dropped in */
.guide-placeholder {
  min-height: 240px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  text-align:center;
  padding:1.5rem;
  border:2px dashed #cbd5e1;
  border-radius:.6rem;
  background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 12px, #f1f5f9 12px, #f1f5f9 24px);
  color:#94a3b8;
}
.guide-placeholder svg { width:2.5rem; height:2.5rem; color:#cbd5e1; }
.guide-placeholder-label { font-weight:600; color:#64748b; font-size:.9rem; }
.guide-placeholder-hint { font-size:.8rem; color:#94a3b8; max-width:34rem; }

/* --- "On this page" nav ---------------------------------------------------- */
.guide-toc {
  background:#f8fafc;
  border:1px solid #e9edf2;
  border-radius:.75rem;
  padding:1.25rem 1.5rem;
}
.guide-toc a { color:#334155; text-decoration:none; }
.guide-toc a:hover { color: var(--nds-accent); }

/* --- Prose helpers for content pages --------------------------------------- */
.guide-prose { color:#374151; line-height:1.7; }
.guide-prose h2 { font-size:1.875rem; font-weight:700; color:var(--nds-navy); margin:2.5rem 0 .75rem; scroll-margin-top:96px; }
.guide-prose h3 { font-size:1.3rem; font-weight:700; color:var(--nds-navy); margin:2rem 0 .5rem; scroll-margin-top:96px; }
.guide-prose p { margin:0 0 1rem; }
.guide-prose ul { list-style:disc; padding-left:1.4rem; margin:0 0 1rem; }
.guide-prose ol { list-style:decimal; padding-left:1.4rem; margin:0 0 1rem; }
.guide-prose li { margin:.3rem 0; }
.guide-prose a { color: var(--nds-accent-dark); text-decoration:underline; }
.guide-prose code, .guide-ui {
  background:#eef2f6; color:#1f2937;
  padding:.08rem .4rem; border-radius:.3rem;
  font-size:.92em; font-weight:600;
  white-space:nowrap;
}

/* --- Section divider label (e.g. "1 · Getting set up") --------------------- */
.guide-part-label { font-size:1.5rem; font-weight:700; color:var(--nds-navy); }