/* brand.css — shared look & feel (GLOBAL) */

/* Fonts: loaded once here, applies to all pages */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Space+Grotesk:wght@500;700&display=swap");

/* ===== Design tokens ===== */
:root{
  /* fonts */
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-head: "Space Grotesk", var(--font-sans);

  /* colors (dark defaults; light overrides live in theme-light.css) */
  --bg:#0f172a; --card:#0b1220; --muted:#94a3b8; --accent:#22c55e;
  --line:#1f2937; --ink:#e5e7eb; --btn:#2563eb; --btn2:#10b981;
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
html, body { font-family: var(--font-sans); line-height: 1.45; }
body{ background:linear-gradient(180deg,#0b1023,#0f172a); color:var(--ink); margin:0; }
h1,h2,h3 { font-family: var(--font-head); letter-spacing: .2px; margin:0; }

/* Utilities (small, on purpose) */
.u-m0{margin:0!important}
.u-mb-6{margin-bottom:6px!important}
.u-mb-8{margin-bottom:8px!important}
.u-mb-10{margin-bottom:10px!important}
.u-mb-12{margin-bottom:12px!important}
.u-mt-10{margin-top:10px!important}
.u-mt-12{margin-top:12px!important}
.u-mt-18{margin-top:18px!important}
.u-center{text-align:center!important}

/* Global layout helpers */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.divider { height:1px; background:#1f2937; opacity:.8; margin: 28px 0; }

/* Chips, badges */
.chip,
.pill,
.badge{
  background:#0b1220; border:1px solid var(--line);
  border-radius:999px; padding:6px 10px; font-size:12px; color:#cbd5e1;
}

/* Buttons (global) */
.btn{
  appearance:none; border:1px solid var(--line); background:#1f2937;
  color:var(--ink); padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600;
}
.btn.primary{ background:#2563eb; border-color:#2563eb; color:#fff; }
.btn.success{ background:#10b981; color:#062a1f; border-color:#0d7a5f; }
.btn.ghost{ background:#0b1220; border-color:var(--line); color:var(--ink); }
.btn.small{ font-size:12px; padding:6px 10px; border-radius:10px; }

/* Code bits still mono */
code, pre, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Roboto Mono", "Ubuntu Mono", monospace;
}

/* ===== Header ===== */
.sitebar{
  position:sticky; top:0; z-index:100; backdrop-filter: blur(6px);
  background:rgba(8,12,24,.6); border-bottom:1px solid var(--line);
}
.nav{
  max-width:1080px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; gap:14px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand .logo{ width:28px; height:28px; display:grid; place-items:center;
  border-radius:8px; background:linear-gradient(135deg,#22c55e,#16a34a); font-weight:900; }
.brand span{ font-weight:800; letter-spacing:.2px; }
.navspacer{ flex:1; }
.nav a.link{ color:#93c5fd; text-decoration:none; font-size:14px; padding:6px 10px; border-radius:8px; }
.nav .pill{ background:#0b1220;border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-size:12px;color:#cbd5e1}
.nav .btn{ background:#1f2937; }

/* ===== Footer ===== */
.sitefoot{ margin-top:28px; border-top:1px solid var(--line); padding:14px 16px; color:var(--muted); font-size:13px; }
.sitefoot .wrap{ max-width:1080px; margin:0 auto; display:flex; gap:10px; align-items:center; justify-content:space-between; }
.badges{ display:flex; gap:8px; flex-wrap:wrap; }
.badge{ background:#0b1220; border:1px solid var(--line); }

/* ===== Upload progress (shared) ===== */
.progress{ display:none; position:relative; height:10px; border-radius:999px; background:#0b1220; border:1px solid var(--line); overflow:hidden; }
.progress .bar{ position:absolute; inset:0; width:0%; background:linear-gradient(90deg,#22c55e,#10b981); }
.progress .pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; color:#052e1b; font-weight:700; }

/* ===== Responsive header (CSS-only drawer) ===== */
.sr-only{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0);
  clip-path: inset(50%); white-space:nowrap; border:0;
}
.menu-btn{
  display:none; align-items:center; gap:8px; cursor:pointer;
  padding:8px 10px; border-radius:10px; border:1px solid var(--line);
  background:#ffffff; color:#0f172a; font-weight:800;
}
.menu-btn .menu-ic{ width:18px; height:12px; position:relative; display:inline-block; }
.menu-btn .menu-ic::before,
.menu-btn .menu-ic::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:#0f172a; border-radius:2px;
}
.menu-btn .menu-ic::before{ top:0; }
.menu-btn .menu-ic::after{ bottom:0; }
.drawer{ display:flex; align-items:center; gap:10px; }
.drawer .pill, .drawer .btn{ white-space:nowrap; }

/* Light header accent when body.lp */
.lp .sitebar{ background:rgba(255,255,255,.8); border-bottom-color:#e5e7eb; }
.lp .nav a.link{ color:#2563eb; }

/* --- Mobile layout --- */
@media (max-width:720px){
  .nav{ padding:10px 12px; }
  .menu-btn{ display:inline-flex; }
  .drawer{
    position:fixed; top:56px; left:0; right:0;
    display:none; flex-direction:column; align-items:stretch; gap:10px;
    background:#ffffff; border-top:1px solid #e5e7eb;
    box-shadow:0 12px 40px rgba(2,6,23,.12);
    padding:12px 16px; z-index:120;
  }
  #navcheck:checked ~ .drawer{ display:flex; }
  .drawer .link, .drawer .btn, .drawer .pill{
    display:block; width:100%; text-align:left;
    padding:10px 12px; border-radius:10px;
  }
  .drawer .link{ background:#0b1220; border:1px solid #1f2937; color:#e5e7eb; }
  .drawer .pill{ background:#f1f5f9; border:1px solid #e5e7eb; color:#334155; }
  .brand span{ font-weight:800; }
  .navspacer{ flex:1; }
}

/* Dark-mode divider fallback (light overrides exist) */
.divider { background:#1f2937; opacity:.6; }