/* HelpViewer — hand-written, no framework, no build step.
   Themed with CSS custom properties so the same stylesheet serves the public site, a
   file:// copy, and tiko's WebView2 pane (which forces a theme with ?theme=dark). */

:root {
  color-scheme: light;
  --bg:            #ffffff;
  --bg-soft:       #f6f7f9;
  --bg-sunken:     #eef0f4;
  --bg-code:       #f6f8fa;
  --fg:            #1c2024;
  --fg-muted:      #5b6472;
  --fg-faint:      #838d9b;
  --border:        #dfe3e8;
  --border-strong: #c6ccd5;
  --accent:        #0b62d0;
  --accent-soft:   #e8f0fd;
  --accent-fg:     #ffffff;
  --warn:          #9a5b00;
  --warn-soft:     #fdf3e2;
  --danger:        #a3282d;
  --danger-soft:   #fdecec;
  --ok:            #1a6b46;
  --ok-soft:       #e6f4ec;

  --kw:            #a02f9c;   /* FreeBASIC syntax colours */
  --ty:            #0b62d0;
  --st:            #1a6b46;
  --cm:            #7a8494;
  --nu:            #b2541a;

  --radius: 8px;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.06);
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sidebar-w: 17rem;
  --header-h: 3.5rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark;
    --bg:#14171c; --bg-soft:#1a1e25; --bg-sunken:#20252e; --bg-code:#191d24;
    --fg:#e3e7ec; --fg-muted:#9aa4b2; --fg-faint:#727d8c;
    --border:#2a3039; --border-strong:#3a424e;
    --accent:#5aa2ff; --accent-soft:#17233a; --accent-fg:#0a0d12;
    --warn:#e0a458; --warn-soft:#2b2317; --danger:#f08b8b; --danger-soft:#2e1c1c;
    --ok:#6cc99a; --ok-soft:#16281f;
    --kw:#d98fd4; --ty:#7db8ff; --st:#8fd6ae; --cm:#6f7987; --nu:#e0a071;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35);
  }
}

/* The viewer's explicit choice must win in both directions. */
:root[data-theme="dark"] { color-scheme: dark;
  --bg:#14171c; --bg-soft:#1a1e25; --bg-sunken:#20252e; --bg-code:#191d24;
  --fg:#e3e7ec; --fg-muted:#9aa4b2; --fg-faint:#727d8c;
  --border:#2a3039; --border-strong:#3a424e;
  --accent:#5aa2ff; --accent-soft:#17233a; --accent-fg:#0a0d12;
  --warn:#e0a458; --warn-soft:#2b2317; --danger:#f08b8b; --danger-soft:#2e1c1c;
  --ok:#6cc99a; --ok-soft:#16281f;
  --kw:#d98fd4; --ty:#7db8ff; --st:#8fd6ae; --cm:#6f7987; --nu:#e0a071;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35);
}
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- header */
.hdr {
  position: sticky; top: 0; z-index: 40; height: var(--header-h);
  display: flex; align-items: center; gap: .75rem; padding: 0 1rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.hdr__brand { font-weight: 650; letter-spacing: -.01em; color: var(--fg); white-space: nowrap; }
.hdr__brand span { color: var(--fg-faint); font-weight: 400; }
.hdr__spacer { flex: 1; }
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-soft); color: var(--fg-muted); cursor: pointer; font-size: 1rem;
}
.iconbtn:hover { border-color: var(--border-strong); color: var(--fg); }

/* ---------------------------------------------------------------- search */
.search { position: relative; flex: 1; max-width: 34rem; }
.search__input {
  width: 100%; height: 2.25rem; padding: 0 2.5rem 0 .75rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-soft); color: var(--fg); font: inherit; font-size: .9375rem;
}
.search__input:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--bg); }
.search__hint {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  font: 600 .6875rem var(--mono); color: var(--fg-faint);
  border: 1px solid var(--border); border-radius: 4px; padding: .1rem .35rem;
  pointer-events: none;
}
.results {
  position: absolute; top: calc(100% + .375rem); left: 0; right: 0; z-index: 50;
  max-height: min(70vh, 34rem); overflow-y: auto;
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.results[hidden] { display: none; }
.results__facets {
  display: flex; flex-wrap: wrap; gap: .3rem; padding: .5rem;
  border-bottom: 1px solid var(--border); background: var(--bg-soft);
  position: sticky; top: 0;
}
.chip {
  font: 500 .75rem var(--sans); padding: .2rem .5rem; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--bg);
  color: var(--fg-muted); cursor: pointer; white-space: nowrap;
}
.chip:hover { color: var(--fg); border-color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.chip__n { opacity: .65; margin-left: .25rem; }

.hit { display: block; padding: .45rem .625rem; border-bottom: 1px solid var(--border); }
.hit:last-child { border-bottom: 0; }
.hit:hover, .hit[aria-selected="true"] { background: var(--accent-soft); text-decoration: none; }
.hit__top { display: flex; align-items: baseline; gap: .4rem; }
.hit__name { font: 600 .875rem var(--mono); color: var(--fg); }
.hit__name mark { background: transparent; color: var(--accent); font-weight: 700; }
.hit__meta { font-size: .6875rem; color: var(--fg-faint); margin-left: auto; white-space: nowrap; }
.hit__sum { font-size: .8125rem; color: var(--fg-muted); margin-top: .1rem;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.results__empty { padding: 1.25rem; text-align: center; color: var(--fg-muted); font-size: .875rem; }

/* ---------------------------------------------------------------- layout */
.shell { display: flex; align-items: flex-start; }
.side {
  position: sticky; top: var(--header-h); flex: 0 0 var(--sidebar-w); width: var(--sidebar-w);
  height: calc(100vh - var(--header-h)); overflow-y: auto;
  padding: 1rem .75rem 3rem; border-right: 1px solid var(--border); background: var(--bg-soft);
}
.side h2 {
  font: 600 .6875rem var(--sans); text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-faint); margin: 1rem .5rem .375rem;
}
.side h2:first-child { margin-top: 0; }
.side a { display: block; padding: .25rem .5rem; border-radius: 6px; color: var(--fg-muted); font-size: .875rem; }
.side a:hover { background: var(--bg-sunken); color: var(--fg); text-decoration: none; }
.side a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.side details > summary {
  list-style: none; cursor: pointer; padding: .25rem .5rem; border-radius: 6px;
  font-size: .875rem; color: var(--fg); font-weight: 550;
}
.side details > summary::-webkit-details-marker { display: none; }
.side details > summary::before { content: "▸"; display: inline-block; width: 1em; color: var(--fg-faint); }
.side details[open] > summary::before { content: "▾"; }
.side details > summary:hover { background: var(--bg-sunken); }
.side details div { margin-left: .75rem; }
/* Readme-docset entries (the PlanetSquires controls) are top-level items, not nested
   topics, so they carry the same weight and colour as a category summary. The left pad
   lines their text up under the category labels, where the ▸ marker's 1em would sit. */
.side a.side__flat { color: var(--fg); font-weight: 550; padding-left: calc(.5rem + 1em); }
.side a.side__flat:hover { color: var(--fg); background: var(--bg-sunken); }

main { flex: 1; min-width: 0; padding: 1.75rem 2rem 6rem; }
.wrap { max-width: 54rem; }
.wrap--wide { max-width: 74rem; }

/* ---------------------------------------------------------------- content */
.crumbs { font-size: .8125rem; color: var(--fg-faint); margin-bottom: .5rem; }
.crumbs a { color: var(--fg-muted); }
.crumbs span { margin: 0 .3rem; }

h1 { font-size: 1.75rem; line-height: 1.25; margin: 0 0 .4rem; letter-spacing: -.02em; }
h1 .h1kind { font: 500 .8125rem var(--sans); color: var(--fg-faint); vertical-align: middle;
  border: 1px solid var(--border-strong); border-radius: 999px; padding: .1rem .5rem; margin-left: .5rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .625rem; letter-spacing: -.01em;
     padding-bottom: .3rem; border-bottom: 1px solid var(--border); }
h3 { font-size: 1.0625rem; margin: 1.5rem 0 .5rem; }
h4, h5, h6 { font-size: .9375rem; margin: 1.25rem 0 .375rem; color: var(--fg-muted); }
p { margin: .625rem 0; }
.lede { font-size: 1.0625rem; color: var(--fg-muted); margin: .25rem 0 1rem; }

code { font: .875em var(--mono); background: var(--bg-sunken); padding: .1em .35em; border-radius: 4px; }
pre.code {
  background: var(--bg-code); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .75rem .875rem; overflow-x: auto; margin: .75rem 0; font-size: .8125rem; line-height: 1.55;
}
pre.code code { background: none; padding: 0; font-size: inherit; }
.sig { border-left: 3px solid var(--accent); }
.tok-kw { color: var(--kw); font-weight: 600; }
.tok-ty { color: var(--ty); }
.tok-st { color: var(--st); }
.tok-cm { color: var(--cm); font-style: italic; }
.tok-nu { color: var(--nu); }

.table-wrap { overflow-x: auto; margin: .875rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .875rem; }
th, td { text-align: left; vertical-align: top; padding: .4rem .625rem; border: 1px solid var(--border); }
th { background: var(--bg-soft); font-weight: 600; }
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-soft) 55%, transparent); }
td code { white-space: nowrap; }

hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }
ul, ol { padding-left: 1.375rem; }
li { margin: .2rem 0; }
img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------- badges */
.badges { display: flex; flex-wrap: wrap; gap: .35rem; margin: .625rem 0 1rem; }
.badge {
  font: 500 .75rem var(--sans); padding: .15rem .5rem; border-radius: 999px;
  border: 1px solid var(--border-strong); color: var(--fg-muted); background: var(--bg-soft);
}
.badge:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
.badge--warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.badge--ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }

.note {
  border: 1px solid var(--border); border-left: 3px solid var(--fg-faint);
  background: var(--bg-soft); border-radius: var(--radius);
  padding: .625rem .875rem; margin: 1rem 0; font-size: .875rem;
}
.note--warn { border-left-color: var(--warn); background: var(--warn-soft); }
.note--ai { border-left-color: var(--danger); background: var(--danger-soft); }
.note strong { color: var(--fg); }

/* ---------------------------------------------------------------- cards */
.cards { display: grid; gap: .875rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: 1rem 0 2rem; }
.card {
  display: block; padding: .875rem 1rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg-soft); color: var(--fg);
}
.card:hover { border-color: var(--accent); text-decoration: none; box-shadow: var(--shadow); }
.card__t { font-weight: 600; margin-bottom: .15rem; }
.card__d { font-size: .8125rem; color: var(--fg-muted); }
.card__n { font: 600 .75rem var(--mono); color: var(--fg-faint); }

.memberlist { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 1rem 0; }
.memberlist a { display: flex; gap: .75rem; align-items: baseline; padding: .4rem .75rem;
  border-bottom: 1px solid var(--border); color: var(--fg); }
.memberlist a:last-child { border-bottom: 0; }
.memberlist a:hover { background: var(--accent-soft); text-decoration: none; }
.memberlist .m-n { font: 600 .8125rem var(--mono); color: var(--accent); flex: 0 0 auto; }
.memberlist .m-d { font-size: .8125rem; color: var(--fg-muted); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- footer */
.foot {
  margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--border);
  font-size: .8125rem; color: var(--fg-faint);
}
.foot a { color: var(--fg-muted); }

.srcref { font: .8125rem var(--mono); color: var(--fg-faint); }

/* ---------------------------------------------------------------- small screens */
.side__toggle { display: none; }
@media (max-width: 60rem) {
  .side { display: none; }
  .side--open { display: block; position: fixed; left: 0; top: var(--header-h); z-index: 30; box-shadow: var(--shadow); }
  .side__toggle { display: inline-flex; }
  main { padding: 1.25rem 1rem 4rem; }
  .hdr__brand span { display: none; }
}
@media (max-width: 34rem) {
  .search__hint { display: none; }
}