/* ==========================================================================
   Classix Help Center – Shared Styles
   Location: /help/help.css (same folder as your .html files)
   -------------------------------------------------------------------------- */

/* Theme tokens */
:root{
  --bg:#0b0b10;
  --layer:#0e1016;
  --panel:#11131a;
  --text:#f2f2f2;
  --muted:#b7bbc7;
  --accent:#e50914;
  --ring:rgba(255,255,255,.08);
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --container:1200px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
img{max-width:100%;display:block}
.container{width:min(var(--container),92vw);margin:0 auto}

/* Skip link (accessibility) */
.skip-link{
  position:absolute;left:-9999px;top:auto;z-index:100;
  background:var(--accent);color:#fff;padding:8px 12px;border-radius:6px;
}
.skip-link:focus{left:12px;top:12px}

/* Top nav (sticky, blurred) */
.nav{
  position:fixed;inset:0 0 auto 0;height:64px;z-index:50;display:flex;align-items:center;
  background:color-mix(in oklab, black 60%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav .container{display:flex;align-items:center;gap:20px}
.brand{font-weight:800;letter-spacing:.4px;font-size:1.2rem}
.nav-links{display:none;gap:18px;color:var(--muted)}
.spacer{flex:1}
.btn{display:inline-block;padding:10px 16px;border-radius:4px;font-weight:700}
.btn-outline{border:1px solid rgba(255,255,255,.24)}
.btn-solid{background:var(--accent);color:#fff;box-shadow:0 8px 20px rgba(229,9,20,.35)}
@media(min-width:900px){.nav-links{display:flex}}

/* Layout */
main{padding-top:84px;margin-bottom:40px}
.hero-mini{
  background:linear-gradient(180deg, rgba(255,255,255,.06), transparent);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:28px 0;
}
.breadcrumbs{font-size:.92rem;color:var(--muted)}
.breadcrumbs a{color:var(--muted)}
.page-title{margin:.3rem 0 0;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.2}

.content-wrap{
  display:grid;gap:24px;margin-top:20px;
  grid-template-columns: 1fr;
}
@media(min-width:1024px){
  .content-wrap{grid-template-columns: minmax(0,1fr) 300px;}
}

/* Article */
article{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
}
article h2{margin:1.2em 0 .3em;font-size:1.3rem}
article h3{margin:1em 0 .25em;font-size:1.05rem}
article p{color:var(--text)}
article .muted{color:var(--muted)}
article ul,article ol{padding-left:1.1em}
article li+li{margin-top:.35em}
.callout{
  border-left:4px solid var(--accent);
  background:rgba(255,255,255,.04);
  padding:14px 16px;border-radius:10px;margin:14px 0;color:var(--muted)
}
.meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.9rem;margin-top:14px}

/* Right rail */
.rail{position:sticky;top:84px;height:max-content;display:grid;gap:16px}
.panel{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.toc h4,.related h4{margin:0 0 10px;font-size:1rem}
.toc a{display:block;padding:6px 0;color:var(--muted)}
.toc a.active{color:#fff}
.related a{display:block;padding:6px 0}

/* Footer */
footer{border-top:1px solid rgba(255,255,255,.06);margin-top:36px}
.footer{color:var(--muted);font-size:.92rem;padding:24px 0 36px}
.links{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:10px}
@media(min-width:700px){.links{grid-template-columns:repeat(4, minmax(0,1fr))}}

/* Code blocks (future tech docs) */
code,kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:#0e1117;border:1px solid rgba(255,255,255,.06);
  padding:.08em .35em;border-radius:6px
}
pre{
  background:#0e1117;border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:14px;overflow:auto
}
pre code{background:transparent;border:0;padding:0}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
  .btn-solid{box-shadow:none}
}

/* Print: simplify */
@media print{
  .nav,.rail,footer{display:none !important}
  body{background:#fff;color:#000}
  article{box-shadow:none;border:0}
}