/* DebrisGuard user guide — shared styles.
   Self-contained (no external deps); inherits the parent site's dark
   tone but stays slightly lighter for readability. */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#050810; --bg2:#0a0e1a; --bg3:#0d1222;
  --glass:rgba(15,21,37,.55);
  --border:rgba(77,166,255,.10); --bh:rgba(77,166,255,.28);
  --text:#e8edf5; --dim:#a5afc1; --muted:#5a6478;
  --blue:#4da6ff; --purple:#7c3aed; --green:#22c55e;
  --cyan:#06b6d4; --orange:#f59e0b; --pink:#f472b6; --red:#ef4444;
  --grad:linear-gradient(135deg,#4da6ff,#7c3aed);
  --r:12px; --rl:18px;
}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none;transition:color .2s}
a:hover{color:#93c5fd}
code,kbd{font-family:'SF Mono','Fira Code',ui-monospace,monospace;font-size:.85em;background:rgba(77,166,255,.10);color:#cfe5ff;padding:1px 6px;border-radius:4px}
pre{font-family:'SF Mono','Fira Code',ui-monospace,monospace;font-size:.82rem;line-height:1.6;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px 18px;overflow-x:auto;color:#cfe5ff;margin:14px 0}
pre code{background:none;padding:0;color:inherit}
.wrap{max-width:960px;margin:0 auto;padding:0 22px}

/* Header — matches parent site */
header{position:sticky;top:0;z-index:50;background:rgba(5,8,16,.92);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.05);padding:12px 0}
.nav{display:flex;align-items:center;justify-content:space-between;max-width:1120px;margin:0 auto;padding:0 22px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--text)}
.brand img{width:24px;height:24px;border-radius:6px}
.brand em{font-style:normal;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.brand small{color:var(--dim);font-weight:500;font-size:.8rem;letter-spacing:.04em;margin-left:8px}
.nav-r{display:flex;gap:18px;align-items:center;font-size:.85rem}
.nav-r a{color:var(--dim);font-weight:500}
.nav-r a:hover{color:var(--text)}
.nav-r .open{background:var(--grad);color:#fff !important;padding:7px 14px;border-radius:8px;font-weight:600}
.nav-r .open:hover{box-shadow:0 4px 16px rgba(77,166,255,.3)}

/* Hero */
.guide-hero{padding:64px 0 32px;background:linear-gradient(180deg,rgba(124,58,237,.06) 0%,transparent 100%)}
.guide-hero .crumb{font-size:.78rem;color:var(--muted);letter-spacing:.05em;margin-bottom:12px}
.guide-hero h1{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:800;letter-spacing:-.025em;margin-bottom:14px}
.guide-hero p.lead{font-size:1.05rem;color:var(--dim);max-width:680px}

/* Body */
main{padding:24px 0 96px}
main h2{font-size:1.45rem;font-weight:700;margin:42px 0 14px;letter-spacing:-.015em;color:var(--text);padding-top:8px;border-top:1px solid var(--border)}
main h2:first-of-type{border-top:0;padding-top:0}
main h3{font-size:1.08rem;font-weight:700;margin:24px 0 8px;color:var(--text)}
main p{color:var(--dim);margin-bottom:14px}
main ul,main ol{padding-left:1.3rem;margin-bottom:14px;color:var(--dim)}
main li{margin-bottom:6px}
main strong,main b{color:var(--text);font-weight:600}

/* Callouts */
.callout{border:1px solid var(--border);background:var(--bg2);border-left:3px solid var(--blue);border-radius:var(--r);padding:14px 18px;margin:18px 0;font-size:.92rem}
.callout.warn{border-left-color:var(--orange);background:rgba(245,158,11,.05)}
.callout.note{border-left-color:var(--cyan);background:rgba(6,182,212,.04)}
.callout.tip {border-left-color:var(--green);background:rgba(34,197,94,.04)}
.callout strong{display:block;margin-bottom:6px;color:var(--text);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;font-weight:700}

/* Tier table */
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.88rem}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);color:var(--dim)}
th{color:var(--text);font-weight:700;background:rgba(77,166,255,.05);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
tr:hover td{background:rgba(77,166,255,.03)}
td b{color:var(--text)}

/* TOC card */
.toc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:16px 20px;margin:22px 0;font-size:.9rem}
.toc-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-bottom:8px}
.toc ul{list-style:none;padding:0;margin:0;column-count:2;column-gap:24px}
@media(max-width:680px){.toc ul{column-count:1}}
.toc li{margin:4px 0;break-inside:avoid}
.toc a{color:var(--text);font-weight:500}
.toc a:hover{color:var(--blue)}

/* Cards (used on guide index) */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:24px 0}
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:20px;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--bh);transform:translateY(-2px)}
.card .dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:8px;vertical-align:middle}
.card h3{margin:8px 0 6px;font-size:1.05rem}
.card p{font-size:.88rem;color:var(--dim);margin-bottom:10px}
.card a.more{font-size:.85rem;font-weight:600}

footer{padding:22px 0;border-top:1px solid var(--border);text-align:center;color:var(--muted);font-size:.78rem}
footer a{color:var(--dim)}