/* The website's look for the Help book's pages. Loaded after help.css; the Help book itself is never edited.
   scripts/sync-help.sh copies this file to public/help and adds the site nav and footer to every page. */
@font-face { font-family:"Geist"; src:url("/fonts/Geist-Variable.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url("/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight:100 900; font-display:swap; }

:root {
  --text:#1F2024; --secondary:rgba(31,32,36,.62); --background:#F1EDE6; --code-background:rgba(31,32,36,.06);
  --rule:rgba(31,32,36,.10); --link:#7E22CE; --sidebar:#FBF9F5; --selection:rgba(168,85,247,.16);
  --card:#FBF9F5; --violet:#A855F7; --ease:cubic-bezier(.32,.72,0,1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --text:#EDE8DF; --secondary:rgba(237,232,223,.62); --background:#17181B; --code-background:rgba(255,255,255,.07);
    --rule:rgba(255,255,255,.08); --link:#C084FC; --sidebar:#222327; --selection:rgba(168,85,247,.25); --card:#222327; }
}
:root[data-theme="dark"] { --text:#EDE8DF; --secondary:rgba(237,232,223,.62); --background:#17181B; --code-background:rgba(255,255,255,.07);
    --rule:rgba(255,255,255,.08); --link:#C084FC; --sidebar:#222327; --selection:rgba(168,85,247,.25); --card:#222327; }

html { overflow-x:clip; background:var(--background); }
body {
  font-family:"Geist", system-ui, sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-size:16px; line-height:1.6; background:var(--background); color:var(--text);
  display:grid; grid-template-columns:240px minmax(0, 720px); justify-content:center; column-gap:48px; align-items:start;
}
.site-top, .site-foot { grid-column:1 / -1; }

/* The contents pane becomes a sticky card next to the page */
nav.toc {
  position:sticky; top:96px; width:auto; bottom:auto; left:auto; margin-top:40px;
  background:var(--sidebar); border:0; border-radius:20px; padding:12px; font-size:15px;
  box-shadow:0 0 0 1px var(--rule), 0 24px 60px -30px rgba(31,32,36,.25);
}
nav.toc .book a { font-weight:600; }
nav.toc a { padding:7px 10px; border-radius:8px; }
nav.toc a[aria-current="page"] { background:var(--selection); color:var(--link); }
nav.toc li.home { display:none; } /* the site nav above already links home */
/* Desktop: the contents are always open (sync-help.sh wraps them in <details open>); no summary bar. */
.toc-d > summary { display:none; }
main { margin:40px 0 0; padding:0 0 64px; max-width:none; }

h1 { font-size:clamp(32px, 4.4vw, 44px); line-height:1.05; letter-spacing:-.045em; font-weight:600; margin:0 0 .6em; text-wrap:balance; }
h2 { font-size:21px; letter-spacing:-.02em; font-weight:600; margin:1.8em 0 .4em; text-wrap:balance; }
p, li { text-wrap:pretty; }
a { color:var(--link); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
nav.toc a, .site-top a, .site-foot a { text-decoration:none; }
code, kbd { font-family:"Geist Mono", ui-monospace, monospace; font-size:.88em; border-radius:6px; }
th, td { border-bottom:1px solid var(--rule); }

/* Site nav: the same floating pill as the website */
.site-top {
  position:sticky; top:14px; z-index:10; justify-self:center; margin:14px 0 0; max-width:calc(100vw - 32px);
  display:flex; align-items:center; gap:28px; padding:8px 8px 8px 20px; border-radius:999px; font-size:14px;
  background:color-mix(in srgb, var(--background) 72%, transparent); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 0 0 1px var(--rule), 0 10px 30px -12px rgba(31,32,36,.18);
}
.site-top .home { display:flex; align-items:center; gap:9px; color:var(--text); }
.site-top .home img { width:30px; height:30px; display:block; }
.wmk { font-weight:600; letter-spacing:-.04em; line-height:1; font-size:20px; }
.wmk .fi { letter-spacing:0; }
.wmk .dl-i { position:relative; display:inline-block; }
.wmk .dl-i svg { position:absolute; width:.24em; height:.24em; left:50%; top:.02em; transform:translateX(-50%); overflow:visible; }
.site-top .links { display:flex; gap:22px; }
.site-top .links a { color:var(--secondary); position:relative; }
.site-top .links a:hover, .site-top .links a[aria-current="page"] { color:var(--text); }
.site-top .links a::after { content:""; position:absolute; inset:-10px -8px; }
.site-top .dl { display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:999px; font-weight:500; background:var(--text); color:var(--background); transition:transform .2s cubic-bezier(.2,0,0,1); }
.site-top .dl:active { transform:scale(.96); }

/* Site footer */
/* The page is a centered 1008px grid; the footer bleeds to the window edges so its rule spans the page, like the site's. */
.site-foot { border-top:1px solid var(--rule); margin:24px calc(50% - 50vw) 0; padding:34px 0 44px; font-size:14px; color:var(--secondary); }
.site-foot .in { max-width:1008px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding:0 16px; }
.site-foot .brand { display:flex; align-items:center; gap:10px; }
.site-foot .brand img { width:26px; height:26px; display:block; }
.site-foot .wmk { font-size:18px; color:var(--text); }
.site-foot .links { display:flex; gap:22px; flex-wrap:wrap; row-gap:10px; }
.site-foot .links a { color:var(--secondary); position:relative; }
.site-foot .links a::after { content:""; position:absolute; inset:-10px -8px; }

/* Phone menu: native <details>, so it works on these static pages without JavaScript */
.site-top .menu { display:none; position:relative; }
.site-top .menu summary { list-style:none; width:40px; height:40px; border-radius:999px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text); transition:transform .2s cubic-bezier(.2,0,0,1); }
.site-top .menu summary::-webkit-details-marker { display:none; }
.site-top .menu summary:active { transform:scale(.96); }
.site-top .menu[open] summary { background:var(--code-background); }
.site-top .menu nav { position:absolute; right:0; top:52px; min-width:200px; display:flex; flex-direction:column; padding:8px; border-radius:20px; background:var(--card); box-shadow:0 0 0 1px var(--rule), 0 24px 60px -24px rgba(31,32,36,.35); }
.site-top .menu nav a { padding:11px 12px; border-radius:12px; font-size:17px; font-weight:500; color:var(--text); }
.site-top .menu nav a:active { background:var(--selection); }

@media (max-width: 820px) {
  body { display:flex; flex-direction:column; padding:0 16px; }
  .site-top { order:1; margin:14px auto 0; width:max-content; }
  .site-top .links { display:none; }
  .site-top .menu { display:block; }
  /* Contents above the article, collapsed to one bar: "Help topics" and the current page. */
  nav.toc { order:2; align-self:stretch; position:static; margin:28px 0 0; padding:0; overflow:hidden; }
  main { order:3; margin-top:28px; }
  .site-foot { order:4; }
  .toc-d > summary { display:flex; align-items:center; gap:10px; padding:14px 16px; cursor:pointer; list-style:none; }
  .toc-d > summary::-webkit-details-marker { display:none; }
  .toc-d > summary span { color:var(--secondary); font-size:14px; }
  .toc-d > summary b { flex:1; min-width:0; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .toc-d > summary::after { content:""; width:8px; height:8px; flex-shrink:0; margin-right:4px; border-right:1.5px solid var(--secondary); border-bottom:1.5px solid var(--secondary); transform:translateY(-2px) rotate(45deg); transition:transform .2s cubic-bezier(.2,0,0,1); }
  .toc-d[open] > summary::after { transform:translateY(2px) rotate(-135deg); }
  .toc-d > summary:focus-visible { outline:2px solid var(--link); outline-offset:-2px; border-radius:20px; }
  nav.toc .toc-d > .book, nav.toc .toc-d > ul { padding:0 10px; }
  nav.toc .toc-d > ul { padding-bottom:10px; border-top:1px solid var(--rule); padding-top:8px; }
}

/* Light/dark image pairs follow the site theme (system setting or the site toggle) */
.icon-pair { display:flex; }
.icon-pair img { display:block; }
.only-dark { display:none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-dark { display:block !important; }
  :root:not([data-theme="light"]) .only-light { display:none !important; }
}
:root[data-theme="dark"] .only-dark { display:block !important; }
:root[data-theme="dark"] .only-light { display:none !important; }
:root[data-theme="dark"] { color-scheme:dark; }
:root[data-theme="light"] { color-scheme:light; }