/* =====================================================================
   SEV-1 PREVIEW CHROME
   Shared header / footer / nav design extracted verbatim from the
   approved HTML previews (sev1db-content/_preview-*.html).
   Class names are unique (.topstrip, header.site, nav.main, .subband,
   footer.site, .mobnav) so this stylesheet can load globally without
   colliding with the legacy theme. The :root tokens below are additive
   (--sev1, --line, --ink ...) and do NOT redefine the legacy theme's
   own variables. The preview `body{}` base is intentionally omitted here
   and lives inline in each marketing page template instead.
   ===================================================================== */

:root{
  --sev1:#e11d48; --sev1-dark:#be123c; --ink:#0f172a; --slate:#475569;
  --muted:#64748b; --line:#e2e8f0; --bg:#f8fafc; --card:#ffffff;
  --code-bg:#0b1220; --code-ink:#e2e8f0; --ok:#16a34a; --ok-bg:#f0fdf4;
  --warn:#b45309; --warn-bg:#fffbeb; --warn-line:#fde68a;
  --pro:#7c3aed; --pro-bg:#f5f3ff; --pro-line:#ddd6fe;
  --mono:"SFMono-Regular",ui-monospace,"JetBrains Mono",Consolas,monospace;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* top strip */
.topstrip{background:#0b1220;color:#cbd5e1;font-size:12.5px;font-family:var(--mono)}
.topstrip .wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:7px 20px}
.topstrip .node{display:flex;align-items:center;gap:7px}
.topstrip .dot{width:7px;height:7px;border-radius:50%;flex:none}
.dot--rose{background:#fb7185}.dot--green{background:#22c55e}.dot--blue{background:#60a5fa}
.topstrip b{color:#fff}
.topstrip .sp{margin-left:auto;color:#64748b}
.topstrip a{color:inherit}

/* header */
header.site{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .nav{display:flex;align-items:center;gap:20px;height:62px}
header.site .brand{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:800;
  font-size:16px;color:var(--ink);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;flex:none}
header.site .brand:hover{text-decoration:none}
header.site .brand .mk{width:28px;height:28px;border-radius:7px;background:var(--sev1);color:#fff;
  display:grid;place-items:center;font-size:15px;box-shadow:0 2px 6px rgba(225,29,72,.35)}
header.site .brand .sev{color:var(--sev1)}
nav.main{display:flex;gap:16px;margin-left:4px;flex-wrap:nowrap}
nav.main a{color:var(--slate);font-size:14.5px;font-weight:600;text-decoration:none;white-space:nowrap}
nav.main a:hover{color:var(--ink);text-decoration:none}
nav.main a.on,nav.main a.current-menu-item{color:var(--sev1)}
header.site .nav .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.navsearch{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:9px;padding:7px 11px;color:var(--muted);font-size:13px;cursor:pointer;text-decoration:none}
.navsearch:hover{text-decoration:none}
.navsearch kbd{font-size:11px;background:#f1f5f9;border:1px solid var(--line);border-radius:4px;
  padding:1px 5px;color:var(--slate)}
.btn{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:14px;
  padding:9px 16px;border-radius:9px;cursor:pointer;border:1px solid transparent;text-decoration:none}
.btn:hover{text-decoration:none}
.btn--pro{background:var(--pro);color:#fff;box-shadow:0 2px 8px rgba(124,58,237,.3)}
.btn--pro:hover{background:#6d28d9;text-decoration:none}
.btn--ghost{background:#fff;border-color:var(--line);color:var(--slate)}
.btn--rose{background:var(--sev1);color:#fff;box-shadow:0 2px 8px rgba(225,29,72,.28)}
.btn--rose:hover{background:var(--sev1-dark);text-decoration:none}

.shell{max-width:880px;margin:0 auto;padding:0 20px}
.crumb{font-size:13px;color:var(--muted);margin:24px 0 12px;font-family:var(--mono)}
.crumb a{color:var(--slate)}.crumb .sep{color:#cbd5e1;margin:0 7px}

/* substack newsletter band (GLOBAL — appears on every page above footer) */
.subband{background:linear-gradient(120deg,#fff1f2,#fff 62%);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:36px 0}
.subband .sb-in{display:flex;gap:30px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.subband .sb-copy{max-width:520px}
.subband .sb-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;
  font-weight:800;letter-spacing:.04em;color:var(--sev1);margin-bottom:10px}
.subband .sb-tag .ico{width:20px;height:20px;border-radius:5px;background:#ff6719;color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:900}
.subband h3{margin:0 0 7px;font-size:23px;letter-spacing:-.01em}
.subband p{margin:0;font-size:14.5px;color:var(--slate)}
.subband p b{color:var(--ink)}
.subband .sb-form{display:flex;gap:10px;flex-wrap:wrap}
.subband .sb-form input{min-width:230px;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:12px 15px;font-size:14px}
.subband .sb-proof{display:flex;gap:24px;margin-top:20px;padding-top:18px;border-top:1px dashed #fecdd3;
  font-family:var(--mono);font-size:13px;color:var(--muted);flex-wrap:wrap}
.subband .sb-proof b{color:var(--ink)}

/* footer */
footer.site{background:#0b1220;color:#94a3b8;padding:46px 0 30px;font-size:14px}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
footer.site h5{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin:0 0 14px}
footer.site a{color:#94a3b8;display:block;padding:4px 0;text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:none}
footer.site .brand{color:#fff;margin-bottom:12px;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-weight:800;font-size:16px}
footer.site .brand .mk{width:28px;height:28px;border-radius:7px;background:var(--sev1);color:#fff;
  display:grid;place-items:center;font-size:15px;box-shadow:none}
footer.site .bottom{border-top:1px solid #1e293b;margin-top:34px;padding-top:20px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:#64748b}

/* ── Global terminal code blocks (content pages: errors, cookbook, GUC) ──
   Dark background everywhere + horizontal scroll so wide SQL never overflows
   the viewport on mobile. Homepage .demo/.proofcard pres override via class. */
main pre,.wrap pre,.entry-content pre,article pre{
  background:#0b1220;background:var(--code-bg,#0b1220);
  color:#e2e8f0;color:var(--code-ink,#e2e8f0);
  border-radius:10px;padding:14px 16px;margin:16px 0;
  font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);
  font-size:13.5px;line-height:1.55;
  overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
}
main pre code,.wrap pre code,.entry-content pre code,article pre code{background:transparent;color:inherit;padding:0;font-size:inherit;border:0}
@media(max-width:640px){
  main pre,.wrap pre,.entry-content pre,article pre{font-size:12.5px;padding:12px 13px;border-radius:8px}
}

/* Mobile nav (hamburger) */
.navtoggle{display:none;margin-left:auto;width:42px;height:38px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;align-items:center;justify-content:center;padding:0}
.navtoggle .bars,.navtoggle .bars::before,.navtoggle .bars::after{content:"";display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.navtoggle .bars{position:relative}
.navtoggle .bars::before{position:absolute;top:-6px;left:0}
.navtoggle .bars::after{position:absolute;top:6px;left:0}
header.site.navopen .navtoggle .bars{background:transparent}
header.site.navopen .navtoggle .bars::before{top:0;transform:rotate(45deg)}
header.site.navopen .navtoggle .bars::after{top:0;transform:rotate(-45deg)}
header.site.navopen{background:#fff}
.mobnav{display:none;flex-direction:column;padding:8px 0 12px}
.mobnav>a{padding:12px 2px;font-size:15px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);text-decoration:none}
.mobnav>a:hover{text-decoration:none;color:var(--sev1)}
.mobnav .mobnav-cta{display:flex;gap:10px;margin-top:14px}
.mobnav .mobnav-cta a{flex:1;text-align:center;padding:11px}
header.site.navopen .mobnav{display:flex}

@media(max-width:900px){
  nav.main,.navsearch,header.site .nav .right{display:none}
  .navtoggle{display:inline-flex}
  footer.site .cols{grid-template-columns:1fr 1fr}
}

/* =====================================================================
   LIGHT-SURFACE PAGES
   The production <body> base is dark (--bg-0). The reference and marketing
   pages below were ported from the light HTML previews, whose body base
   was body{background:var(--bg)}. That base was intentionally omitted from
   this file, so without it those pages inherit the dark canvas and render
   black instead of white. Restore the light canvas, scoped so the dark
   homepage, blog posts and error pages ("homepage arc") are untouched.
   ===================================================================== */
body.post-type-archive-sev1db_guc,
body.post-type-archive-sev1db_cookbook,
body.post-type-archive-sev1db_glossary,
body.single-sev1db_guc,
body.single-sev1db_cookbook,
body.single-sev1db_glossary,
body.tax-sev1db_pathway,
body.page-template-template-pathways,
body.page-template-template-pricing{
  background:var(--bg);
  color:var(--ink);
}
/* Marketing pages use slug templates without a reliable body class —
   scope by their unique page wrappers instead. */
.about-page,.contact-page,.pricing-page{
  background:var(--bg);
  color:var(--ink);
}