/* help.css — the public Help centre (/help). Self-contained, in the manner of legal.css: it reuses
   the site's design-token VALUES (from account.css) but doesn't depend on that stylesheet, because
   Help is a public reading surface, not the app. A top bar, a docs sidebar, a content column. */

:root {
  --bg:#05030f; --fg:#e8ecf6; --muted:#8a93ad; --muted-2:#9fb2d6;
  --blue:#2b8cff; --blue-deep:#0768ff; --green:#46e08a;
  --panel-1:#0c1230; --panel-2:#080a1c;
  --line:rgba(43,140,255,0.18); --line-soft:rgba(43,140,255,0.10);
  --f-brand:'Comfortaa',system-ui,sans-serif;
  --f-mono:'Doto',ui-monospace,monospace;
  --f-ui:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color-scheme:dark;
}
@font-face { font-family:'Comfortaa'; src:url('/assets/fonts/Comfortaa/comfortaa-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Doto'; src:url('/assets/fonts/Doto/doto-600.woff2') format('woff2'); font-weight:600; font-display:swap; }

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; min-height:100vh; color:var(--fg);
  font-family:var(--f-ui); font-size:16px; line-height:1.65;
  background:radial-gradient(ellipse at top, #16103a 0%, #05030f 70%) fixed;
}
a { color:var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }

/* The top bar (the shared .appbar + auth-aware nav) comes from account.css and site-nav.js, so
   Help's top-right matches every other page. The brand's "help" suffix is the account.css .name. */

/* ---- layout ---- */
.help-shell {
  display:grid; grid-template-columns:250px minmax(0,1fr); gap:36px;
  max-width:1080px; margin:0 auto; padding:30px 22px 60px;
}

/* ---- sidebar ---- */
.help-nav { position:sticky; top:72px; align-self:start; max-height:calc(100vh - 90px); overflow-y:auto; }
.help-nav-home {
  display:block; font-weight:600; font-size:13px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.4px; margin-bottom:14px;
}
/* Each top-level section folds — a native <details>, so it needs no JavaScript — and only the
   section you're on starts open. A whole IA expanded at once reads as a wall; this way it's a
   short list you open a piece at a time. */
.help-nav-group { margin-bottom:4px; }
.help-nav-title {
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  padding:6px 4px; margin:0; border-radius:8px;
  font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--muted);
}
.help-nav-title::-webkit-details-marker { display:none; }
.help-nav-title:hover { color:var(--fg); }
.help-nav-caret {
  flex:none; width:0; height:0; margin-left:auto;
  border-left:5px solid currentColor; border-top:4px solid transparent; border-bottom:4px solid transparent;
  opacity:.6; transition:transform .15s ease;
}
.help-nav-group[open] > .help-nav-title .help-nav-caret { transform:rotate(90deg); }
@media (prefers-reduced-motion:reduce) { .help-nav-caret { transition:none; } }
.help-nav-group ul { list-style:none; margin:0 0 4px; padding:0; }
/* a sub-group heading inside a section (e.g. "Creator Studio" under "Making & sharing games") */
.help-nav-sub {
  margin:10px 0 4px; padding-left:10px; font-size:11px; font-weight:600; color:var(--muted-2);
}
.help-nav-link {
  display:block; padding:5px 10px; border-radius:8px; font-size:14px; color:var(--muted-2);
  border-left:2px solid transparent;
}
.help-nav-link:hover { color:var(--fg); background:rgba(43,140,255,0.06); text-decoration:none; }
.help-nav-link.is-current {
  color:var(--fg); background:rgba(43,140,255,0.10); border-left-color:var(--blue);
}
.help-nav-link.is-soon { color:var(--muted); }
.help-soon {
  font-size:9.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); border-radius:5px; padding:1px 4px; margin-left:4px;
  vertical-align:middle;
}

/* ---- landing ---- */
.help-hero { margin-bottom:30px; }
.help-hero h1 {
  font-family:var(--f-brand); font-weight:700; font-size:34px; margin:0 0 8px; color:var(--fg);
}
.help-lede { margin:0; font-size:18px; color:var(--muted-2); }
.help-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
.help-card {
  padding:20px 22px; border-radius:16px; border:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel-1),var(--panel-2));
}
.help-card-eyebrow {
  margin:0 0 3px; font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  color:var(--muted);
}
.help-card h2 { margin:0 0 4px; font-size:17px; color:var(--fg); }
.help-card-blurb { margin:0 0 12px; font-size:13.5px; color:var(--muted); }
.help-card-list { list-style:none; margin:0; padding:0; }
.help-card-list li { margin:0; }
.help-card-list a { display:block; padding:5px 0; font-size:14px; color:var(--muted-2); }
.help-card-list a:hover { color:var(--blue); }
.help-card-list a.is-soon { color:var(--muted); }

/* ---- rendered markdown ---- */
.help-doc { max-width:720px; }
.help-doc h1 { font-family:var(--f-brand); font-weight:700; font-size:30px; margin:0 0 6px; color:var(--fg); }
.help-doc h1 + p { font-size:18px; color:var(--muted-2); margin:0 0 26px; }
.help-doc h2 {
  font-size:21px; margin:36px 0 12px; padding-top:20px; color:var(--fg);
  border-top:1px solid var(--line-soft);
}
.help-doc h3 { font-size:16.5px; margin:24px 0 8px; color:var(--fg); }
.help-doc p, .help-doc li { color:var(--fg); }
.help-doc ul, .help-doc ol { padding-left:22px; }
.help-doc li { margin:5px 0; }
.help-doc a { color:var(--blue); }
.help-doc strong { color:#fff; }
.help-doc code {
  font-family:var(--f-mono); font-size:0.92em; padding:1px 6px; border-radius:6px;
  background:rgba(43,140,255,0.10); border:1px solid var(--line-soft); color:#cfe0ff;
}
.help-doc pre {
  background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; overflow-x:auto;
}
.help-doc pre code { background:none; border:none; padding:0; color:#d8e2fb; font-size:13.5px; }
.help-doc blockquote {
  margin:18px 0; padding:12px 16px; border-radius:10px;
  background:rgba(43,140,255,0.07); border:1px solid var(--line); border-left:3px solid var(--blue);
  color:var(--muted-2);
}
.help-doc blockquote p { margin:6px 0; }
.help-doc hr { border:none; border-top:1px solid var(--line-soft); margin:30px 0; }
.help-doc table { width:100%; border-collapse:collapse; margin:16px 0; font-size:14.5px; }
.help-doc th, .help-doc td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line-soft); }
.help-doc th { color:var(--muted); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.3px; }
/* A game code is a proper noun the console shows in the LED font — render inline `code`-styled
   six-letter caps that way when a page marks one up as e.g. `AAAAAA`. */
.help-doc code:only-child { letter-spacing:1px; }

/* screenshots — marked up in markdown as ![caption](/help/img/x.jpg); the alt text becomes the
   caption via the emphasis convention below, but plain images get the framed treatment too. */
.help-doc img {
  display:block; max-width:100%; height:auto; margin:20px 0 6px; border-radius:12px;
  border:1px solid var(--line); box-shadow:0 10px 30px rgba(0,0,0,0.4);
}
.help-doc img + em {
  display:block; font-size:13px; color:var(--muted); font-style:normal; text-align:center;
  margin:0 0 22px;
}

.help-crumb { font-size:13px; color:var(--muted); margin:0 0 14px; }
.help-doc-soon .help-soon-note { color:var(--muted); margin-top:20px; }

/* the "next steps" strip some pages end with */
.help-next {
  margin-top:40px; padding-top:20px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:10px;
}
.help-next a {
  padding:8px 14px; border-radius:10px; font-size:14px; color:var(--fg);
  border:1px solid var(--line); background:rgba(43,140,255,0.06);
}
.help-next a:hover { border-color:var(--blue); text-decoration:none; }

/* ---- footer ---- */
.help-footer {
  text-align:center; padding:26px 22px; font-size:13px; color:var(--muted);
  border-top:1px solid var(--line-soft);
}
.help-footer .brand { font-family:var(--f-brand); font-weight:700; color:var(--blue); }
.help-footer .sep { margin:0 8px; opacity:.5; }
.help-footer a { color:var(--muted-2); }

/* ---- responsive: the sidebar moves above the content on narrow screens ---- */
@media (max-width:820px) {
  .help-shell { grid-template-columns:1fr; gap:20px; }
  .help-nav { position:static; max-height:none; padding-bottom:14px; border-bottom:1px solid var(--line-soft); }
  .help-nav-group { margin-bottom:14px; }
}