/* vergiliplus — the whole stylesheet. Colours, type scale and component styling follow
   the Vergilius Project's verg.css (© its authors; original in web/vendor/verg.css):
   #141422 page, #262633 panels, #f6f1a3 wordmark, #E0CD61 nav gold, #1cc1cc headings,
   #bfe4ca type lists, rgb(228,208,108) type links, dracula code. Its photographic
   backgrounds are not reused; the faceted side pattern below is plain CSS.
   Like verg.css, "Open Sans" is named but not loaded (renders as the system sans).
   Everything sizes in rem, and rem scales with the viewport (bottom of file). */

:root {
  --bg: #141422; --panel: #262633; --input: #1a1825; --input-line: #f3f1de;
  --brand: #f6f1a3; --gold: #E0CD61; --cyan: #1cc1cc; --mint: #bfe4ca;
  --strlink: rgb(228, 208, 108); --kw: #8be9fd; --comment: #6272a4; --fg: #f8f8f2;
  --code-bg: #282a36; --mute: #8894ae; --foot: #D0D0D2;
  --red: #ed2724; --orange: #ffaa18; --info: #17a2b8;
  --mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: "Open Sans", sans-serif;
  /* kind colours (dracula) and release channels (Vergilius accents) */
  --k-struct: #bd93f9; --k-union: #ff79c6; --k-enum: #50fa7b;
  --ch-client: var(--cyan); --ch-server: var(--gold); --ch-insider: var(--orange);
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  color: var(--mint); font: 600 1.6rem/1.5 var(--sans);
  display: flex; flex-direction: column; min-height: 100vh;
  /* faceted deep-blue field (sides of the content column), CSS only: three layers of
     diagonal two-tone splits at different periods/angles intersect into triangles */
  background-color: #0a2a4c;
  background-image:
    linear-gradient(118deg, rgba(20, 104, 163, 0.55) 50%, rgba(3, 18, 36, 0.55) 50%),
    linear-gradient(-34deg, rgba(13, 75, 125, 0.6) 50%, rgba(5, 30, 58, 0.6) 50%),
    linear-gradient(62deg, #0f5287 50%, #072646 50%);
  background-size: 97px 151px, 173px 113px, 131px 89px;
}
a { color: var(--gold); text-decoration: none; }
a:hover { color: yellow; }
h1, h2, h3 { color: var(--cyan); margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
button, input, select { font: inherit; }
pre, code { font-family: var(--mono); }
[hidden] { display: none !important; }

/* ---- top nav (verg.css .bg-dark / .navbar-brand / .nav-link) ---- */
.topnav { display: flex; align-items: center; gap: 1.2rem; padding: 0 1.6rem; background: var(--bg); border-bottom: 2px solid var(--panel); }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--brand); font-size: 5rem; font-weight: 900; line-height: 1.3; text-transform: uppercase; }
.brand:hover { color: var(--brand); }
.brand .plus { color: var(--cyan); }
.logo { width: 4.6rem; height: 4.6rem; }
.navlink { margin-left: auto; background: none; border: 0; border-bottom: 3px solid transparent; padding: 0.4rem 0;
  color: var(--gold); font-size: 1.8rem; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.navlink:hover { border-bottom-color: yellow; }
.side-toggle { background: none; border: 0; color: var(--gold); font-size: 2.4rem; font-weight: 700; cursor: pointer; padding: 0 0.4rem; }

/* ---- page shells: a #141422 content column over the faceted field ---- */
.page, .docs { width: 100%; margin: 0 auto; background: var(--bg); flex: 1 0 auto; }
.page { max-width: 1170px; padding: 1.5rem; }
.page.wide { max-width: 1600px; }
.docs { max-width: 1600px; display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
.docs-side { position: sticky; top: 0; height: 100vh; overflow: hidden; border-right: 2px solid var(--panel); }
.docs-main { padding: 1.5rem; min-width: 0; }
html.side-collapsed .docs { grid-template-columns: minmax(0, 1fr); }
html.side-collapsed .docs-side { display: none; }
/* phones: the sidebar is an off-canvas drawer; ☰ toggles html.side-open (nav.js) */
@media (max-width: 760px) {
  .docs, html.side-collapsed .docs { grid-template-columns: minmax(0, 1fr); }
  .docs-side { position: fixed; z-index: 50; left: 0; top: 0; width: min(85vw, 340px); background: var(--bg);
    transform: translateX(-100%); visibility: hidden; transition: transform 0.2s, visibility 0.2s; }
  html.side-open .docs-side { transform: none; visibility: visible; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6); }
}

/* panels (verg.css .mainblock-content / .maincross) */
.panel { background: var(--panel); border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 1.5rem; }

/* ---- footer (verg.css .footer-fluid / .footer-style) ---- */
.foot { background: var(--bg); border-top: 2px solid var(--panel); padding: 2.5rem; text-align: center;
  color: var(--foot); font-size: 1.5rem; font-weight: 600; }

/* ---- home: list of Windows versions, colour-coded by channel ---- */
.vlist { display: grid; gap: 0.6rem; }
.vrow { display: flex; align-items: baseline; gap: 1.2rem; padding: 1rem 1.5rem; background: var(--panel);
  border-left: 4px solid var(--ch); border-radius: 0 0.5rem 0.5rem 0; }
.vrow:hover { background: color-mix(in srgb, var(--ch) 10%, var(--panel)); }
.vr-fam { color: var(--ch); font-weight: 600; font-size: 2.4rem; flex: 1 1 auto; }
.vr-build { color: var(--mute); font-family: var(--mono); font-size: 1.6rem; }
.ch-client { --ch: var(--ch-client); } .ch-server { --ch: var(--ch-server); } .ch-insider { --ch: var(--ch-insider); }

/* ---- context bar (verg.css .breadcrumb): build ▾ / module | module / Type ---- */
.cbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin: 0 0 1.5rem; padding: 0.6rem 1rem;
  background: var(--panel); border-radius: 0.3rem; color: #fff; font-size: 1.6rem; font-weight: 600; }
.cb-arch { color: #fff; }
.cb-build { background: var(--input); color: var(--mint); border: 1px solid var(--input-line); padding: 3px 5px; font-size: 1.6rem; font-weight: 600; max-width: 100%; }
.cb-sep { color: #fff; }
.cb-mods { display: inline-flex; gap: 1rem; }
.cb-mod { color: var(--gold); font-weight: 700; font-size: 1.8rem; border-bottom: 3px solid transparent; }
.cb-mod:hover { color: var(--gold); border-bottom-color: yellow; }
.cb-mod.on { color: var(--gold); border-bottom-color: rgba(208, 208, 210, 0.5); }
.cb-type { color: var(--cyan); font-weight: 800; font-size: 3.3rem; line-height: 1.2; }
.cb-step { display: inline-flex; gap: 1rem; align-items: center; margin-left: auto; font-size: 1.6rem; }
.cb-step a { color: rgb(255, 245, 197); }
.cb-step a:hover { color: yellow; }
.cb-step .off { color: #4a4a5e; }
.cb-step .n { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--mute); }
/* a tiny version-wizard dot (verg.css .bs-wizard-dot) */
.cb-step .n::before { content: ""; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0.35rem var(--red); }

/* ---- type list (verg.css #myInput / .list-link) ---- */
.tl-top { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin-bottom: 1.5rem; }
.tl-filter, .sb-filter, .ck-input { background: var(--input); border: 1px solid var(--input-line); color: var(--mint);
  font-weight: 600; font-size: 1.8rem; padding: 5px 0 5px 5px; min-width: 0; }
.tl-filter { flex: 1 1 30rem; }
.btn { background: var(--input); color: var(--mute); border: 1px solid #44475a; border-radius: 0.3rem; padding: 4px 9px;
  font-size: 1.4rem; font-weight: 700; cursor: pointer; }
.btn.on { color: var(--cyan); border-color: var(--cyan); }
.kind-btn[data-k="struct"] { color: var(--k-struct); } .kind-btn[data-k="union"] { color: var(--k-union); }
.kind-btn[data-k="enum"] { color: var(--k-enum); }
.kind-btn.on { border-color: currentColor; } .kind-btn[data-k="all"].on { color: var(--cyan); }
.hz-list { column-gap: 2.4rem; }
.hz { display: block; break-inside: avoid; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--mint); font-size: 1.8rem; font-weight: 700; padding: 0.2rem 0; }
.hz:hover { color: var(--mint); text-decoration: underline; }
.k-struct { --kc: var(--k-struct); } .k-union { --kc: var(--k-union); } .k-enum { --kc: var(--k-enum); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 0.7rem; vertical-align: middle; background: var(--kc, var(--comment)); flex: 0 0 auto; }

/* ---- sidebar ---- */
.sb { display: flex; flex-direction: column; height: 100vh; }
.sb-top { padding: 1rem; border-bottom: 2px solid var(--panel); display: flex; gap: 0.5rem; align-items: center; }
.sb-filter { flex: 1 1 auto; font-size: 1.4rem; }
.sb-kinds { display: flex; gap: 2px; }
.sb-kinds .btn { padding: 3px 6px; min-width: 2.4rem; font-size: 1.2rem; }
.sb-count { padding: 0.4rem 1rem; color: var(--comment); font-size: 1.3rem; }
.sb-list { overflow-y: auto; padding: 0 0.5rem 2rem; flex: 1 1 auto; }
.sb-item { display: flex; align-items: center; padding: 2px 8px; border-radius: 0.3rem; color: var(--mint); font-size: 1.4rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-item:hover { background: var(--panel); color: var(--mint); }
.sb-item.active { background: var(--panel); color: var(--gold); }

/* ---- struct view (verg.css .tdata-code / #copyblock / #copy-button, dracula) ---- */
.sc { margin: 0; }
.sc-pre { position: relative; background: var(--code-bg); border-radius: 0.7rem; padding: 1rem 0 1.2rem; margin: 0; overflow-x: auto; }
.sc-pre code { display: block; font-size: 1.8rem; line-height: 1.5; font-weight: 400; color: var(--fg); }
.sc-ctrls { position: absolute; top: 0.6rem; right: 0.8rem; display: flex; gap: 0.6rem; z-index: 3; font-family: var(--sans); }
.sc-tgl, .sc-copy { border-radius: 0.5rem; padding: 0 0.8rem; font-size: 1.6rem; font-weight: 500; cursor: pointer; }
.sc-tgl { display: inline-flex; align-items: center; gap: 0.4rem; background: transparent; color: var(--info); border: 1px solid var(--info); }
.sc-tgl[aria-pressed="true"] { color: #fff; }
.sc-tgl[aria-pressed="true"] .sc-box::after { content: "✓"; }
.sc-box { width: 1.4rem; height: 1.4rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 3px; font-size: 1.1rem; }
.sc-copy { background: var(--info); color: #fff; border: 1px solid transparent; }
.kw { color: var(--kw); font-weight: bold; }
.sc-line, .sc-member { display: flex; align-items: baseline; padding: 0 1.5rem; white-space: pre; border-left: 3px solid transparent; }
.sc-member { border-left-color: var(--accent); }
.sc-member.link { cursor: pointer; }
.sc-member:hover { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.sc-member.k-pointer { --accent: var(--kw); } .sc-member.k-struct { --accent: var(--k-struct); }
.sc-member.k-union { --accent: var(--k-union); } .sc-member.k-enum { --accent: var(--k-enum); }
.sc-member.k-base { --accent: var(--comment); } .sc-member.k-array { --accent: #ffb86c; }
.sc-member.k-bitfield { --accent: #f1fa8c; } .sc-member.k-proc { --accent: #ff5555; }
.sc-code { flex: 1 1 auto; }
.sc-ann { margin-left: 2rem; color: var(--comment); flex: 0 0 auto; }
.sc-hole { background: repeating-linear-gradient(45deg, #2a2330, #2a2330 7px, #241f2a 7px, #241f2a 14px); }
.sc-hole .sc-code { color: #8a7a9a; font-style: italic; }
.sc-cache .sc-code { color: var(--comment); }
.sc.meta-off .sc-hole, .sc.meta-off .sc-cache, .sc.meta-off .sc-ann { display: none; }
.str-link { color: var(--strlink); font-family: var(--mono); }
a.str-link:hover { color: yellow; }

/* ---- layout stats + "used in" (verg.css .maincross / .h4-tdata) ---- */
.stats { display: flex; flex-wrap: wrap; gap: 0.4rem 2.4rem; margin-top: 1.2rem; color: var(--mute); font-size: 1.6rem; }
.stats b { color: var(--mint); font-weight: 700; }
.used-h { color: var(--cyan); font-weight: 600; font-size: 2.4rem; margin-bottom: 0.6rem; }
.used-list { line-height: 1.6; }
.used-list a { display: inline-block; color: var(--kw); font-size: 1.9rem; font-weight: 700; }
.used-list a:hover { color: var(--kw); text-decoration: underline; }
.used-list a:not(:last-child)::after { content: ","; color: var(--mint); margin-right: 0.6rem; }

/* ---- opaque types (declared or mentioned, never defined in that PDB) ---- */
.op { opacity: 0.6; font-style: italic; }
.kind-btn[data-k="opaque"] { color: var(--mute); }
.opaque-note { color: var(--mute); font-size: 1.6rem; margin: 1.2rem 0 0.4rem; }
.opaque-note b { color: var(--mint); }
.defined-in { font-size: 1.6rem; color: var(--mute); }
.defined-in a { display: inline-block; margin: 0 1rem 0 0.4rem; color: var(--gold); font-family: var(--mono); }

/* ---- layouts not from a public PDB: provenance line; partial builds marked incomplete ---- */
.sc-prov { white-space: normal; }
.sc-prov .sc-code { color: var(--comment); font-style: italic; padding-left: 0; text-indent: 0; }
.inc { color: var(--red); border: 1px solid var(--red); border-radius: 3px; padding: 0 0.5rem; font-size: 1.3rem;
  font-family: var(--mono); text-transform: lowercase; white-space: nowrap; }
.inc-note { color: var(--mute); font-size: 1.6rem; margin: 0 0 1rem; }
option.inc { color: var(--red); }
/* ---- reverse-engineered layouts ---- */
.inf { color: var(--kw); border: 1px solid var(--kw); border-radius: 3px; padding: 0 0.5rem; font-size: 1.3rem;
  font-family: var(--mono); white-space: nowrap; }
.inf-note { color: var(--mute); font-size: 1.6rem; margin: 0 0 1rem; }
.inf-note b { color: var(--fg); }
.sc-unk .sc-code { color: var(--orange); }
.sc.meta-off .sc-unk { display: flex; }  /* an inferred struct's gaps show either way */
/* ---- several definitions of one type in a build's sources ---- */
.var { color: var(--orange); border: 1px solid var(--orange); border-radius: 3px; padding: 0 0.5rem; font-size: 1.3rem;
  font-family: var(--mono); white-space: nowrap; }
.var-note { color: var(--mute); font-size: 1.6rem; margin: 0 0 1rem; }
.var-sel { background: var(--input); color: var(--mint); border: 1px solid var(--input-line); padding: 2px 4px; font-size: 1.5rem; max-width: 100%; }

/* ---- search palette ---- */
.ck-ov { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 100; display: flex; justify-content: center; align-items: flex-start; padding-top: 8vh; }
.ck { width: min(1000px, 94vw); background: var(--panel); border-radius: 0.5rem; padding: 1rem; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.ck-input { width: 100%; outline: none; }
.ck-filters { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; align-items: center; margin: 0.8rem 0 0.2rem; }
.ck-grp { display: inline-flex; gap: 0.3rem; }
.ck-vers { position: relative; }
.ck-vmenu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 2; width: 36rem; max-height: 50vh; overflow-y: auto;
  background: var(--bg); border: 1px solid #44475a; border-radius: 0.4rem; padding: 0.6rem; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.ck-vmenu:not([hidden]) { display: block; }
.ck-vall { display: flex; gap: 0.4rem; margin-bottom: 0.4rem; }
.ck-vmenu label { display: flex; align-items: center; gap: 0.6rem; padding: 0.2rem 0.3rem; cursor: pointer; font-size: 1.5rem; }
.ck-vmenu label:hover { background: var(--panel); }
.ck-vmenu .vf { color: var(--ch); flex: 1 1 auto; }
.ck-vmenu .vb { color: var(--mute); font-family: var(--mono); font-size: 1.3rem; }
.ck-list { max-height: 58vh; overflow-y: auto; margin-top: 0.6rem; }
.ck-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.4rem 0.8rem; border-radius: 0.3rem; color: inherit; }
.ck-item:hover { color: inherit; }
.ck-item.sel { background: var(--bg); }
.ck-fld { color: var(--mute); }
.ck-fld b { color: inherit; }
.ck-item .dot { margin-right: 0; }
.ck-name { color: var(--mint); font-size: 1.8rem; font-weight: 700; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-name b { color: var(--brand); }
.ck-mod { color: var(--gold); font-size: 1.3rem; font-family: var(--mono); flex: 0 0 auto; }
/* presence strip: one square per selected version, oldest -> newest */
.ck-strip { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.ck-strip i { width: 0.9rem; height: 1.4rem; border-radius: 2px; background: #33334a; }
.ck-strip i.d { background: var(--ch); cursor: pointer; }
.ck-strip i.o { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ch); cursor: pointer; }
.ck-strip i[data-go]:hover { outline: 1px solid #fff; }
.ck-ver { color: var(--ch); font-size: 1.4rem; flex: 0 0 13rem; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-empty { padding: 1.8rem; color: var(--mute); text-align: center; }
.ck-foot { margin-top: 0.6rem; color: var(--mute); font-size: 1.25rem; text-align: right; }
@media (max-width: 760px) { .ck-strip { display: none; } }

/* ---- responsive: scale every rem via html font-size (verg.css trick) ---- */
/* phones floor at 8px: shrinking text with the screen made code ~9px on a phone */
html { font-size: 8px; }
@media (min-width: 992px) { html { font-size: 9px; } }
@media (min-width: 1200px) { html { font-size: 10px; } }

/* the member a palette member-search hit points at */
.sc-member.hit { background: rgba(255, 245, 197, 0.12); outline: 1px solid rgba(255, 245, 197, 0.45); }

/* ---- phones ---- */
@media (max-width: 760px) {
  .topnav { padding: 0 1rem; }
  .brand { font-size: 3.4rem; }
  .logo { width: 3.6rem; height: 3.6rem; }
  .page, .docs-main { padding: 1.2rem; }
  .cb-step { margin-left: 0; flex-basis: 100%; }
  .cb-type { font-size: 2.8rem; overflow-wrap: anywhere; }
  .sc-ctrls { position: static; justify-content: flex-end; padding: 0 0.8rem 0.6rem; }
  .ck-ov { padding-top: 2vh; }
  .ck-vmenu { width: min(36rem, calc(100vw - 4rem)); }
  .ck-ver { flex-basis: auto; max-width: 12rem; }
  /* the struct view scrolls sideways; edge shadows show there is more */
  .sc-pre {
    background:
      linear-gradient(90deg, var(--code-bg) 30%, transparent) left / 4rem 100% no-repeat local,
      linear-gradient(270deg, var(--code-bg) 30%, transparent) right / 4rem 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(139, 233, 253, 0.35), transparent) left / 1.4rem 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(139, 233, 253, 0.35), transparent) right / 1.4rem 100% no-repeat scroll,
      var(--code-bg);
  }
}
@media (max-width: 543px) {
  .hz { white-space: normal; overflow-wrap: anywhere; }
}
@media (pointer: coarse) {
  .btn { min-height: 36px; min-width: 36px; }
  .sb-item { padding: 8px; }
  .navlink, .side-toggle { min-height: 44px; }
}