/* Docuriser static-site runtime — (c) 2026 Huntr Software LLC, MIT License.
   Part of Docuriser <https://codeberg.org/HuntrSoftware/docuriser>. The site
   content this asset styles and drives belongs to the site's author. */
/* Universal Vortex — static site structural styles (plan 01, S3/S4).
 *
 * The static analog of the legacy vortex_shell.css: the FEW rules the Layers
 * page styles cannot express — viewport locking, absolute/sticky positioning,
 * hover/transition polish — plus theming for the generated documentation-body
 * surfaces that ride through Host slots verbatim. Everything else (fills,
 * borders, layout, spacing, responsive variants) is emitted into uv_<stamp>.css
 * from the page styles; this sheet deliberately stays small so the styles
 * remain the single authoring language for the chrome.
 *
 * Emitted-class references (.uv-*) are name-derived and deterministic for the
 * shipped page styles; docuriser-uv-s3/s4 tests assert they exist so a style
 * rename fails loudly here instead of silently dropping a rule. */

/* Locked viewport: the titlebar and window edges stay fixed; page content
 * scrolls INSIDE the emitted page surface (mirrors the legacy shell). This
 * sheet owns the shell's html/body box: the background (theme Primary — the
 * titlebar and page roots are transparent, so the shell base reads through
 * from here) and the flex column layout the :Narrow band below reverses.
 * general.css must NOT declare ANY bare-body rule (it loads after this sheet,
 * so an equal-specificity duplicate wins on source order — an unconditional
 * flex-direction there is what pinned the titlebar to the top in :Narrow). */
html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--layers-theme-primary, #2f3136);
  color: var(--layers-theme-foreground, #e3e3e3);
  transition: background 120ms ease, color 120ms ease;
}
body {
  display: flex;
  flex-direction: column;
}

/* The emitted titlebar (<nav class="uv-site-titlebar">) owns a stacking
 * context above the page so its dropdowns float over the content. */
nav.uv-site-titlebar {
  position: relative;
  z-index: 10;
}

/* ---- Titlebar nav-menu dropdowns ----
 * Cosmetics/layout are emitted; this is only the anchoring the styles can't
 * express: each menu floats below its button, expanding leftward to stay clear
 * of the right viewport edge. Open/closed is the .uv-hidden class, toggled by
 * uv_shell.js. */
#uv-nav-projects, #uv-nav-socials {
  position: relative;
}
#uv-menu-projects, #uv-menu-socials {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  z-index: 50;
  width: 360px;
  max-width: 90vw;
  cursor: default;
  filter: drop-shadow(0 0 16px rgb(19, 19, 19));
}

/* Caret rotation: points right when closed (the emitted class carries the
 * -90deg rest transform on the icon span), down while the menu is open
 * (uv_shell.js stamps .uv-menu-open on the button). */
.uv-caret {
  transition: transform 150ms ease;
}
.uv-menu-open .uv-caret {
  transform: rotate(0deg);
}

/* ---- Active-tab / settings mutual exclusion ----
 * The titlebar tab that IS the current page carries a static :Selected fill
 * (the brand tab on the home page, the left page tab on inner pages). While the
 * settings pane is open, uv_shell.js stamps .uv-settings-open on <body>: that
 * lights the gear (its emitted :Selected variant is scoped to that class) and,
 * here, yields the active tab's fill back to transparent — so only one of
 * {current page, settings} reads as active, mirroring the GUI shell's mutually
 * exclusive window tabs. The id targets beat the emitted single-class fill on
 * specificity, so the tab reverts cleanly and restores when the pane closes. */
.uv-settings-open #uv-brand-tab,
.uv-settings-open #uv-page-tab-cell {
  background: transparent;
}

/* ---- Sticky sidebars (project page + doc pages) ---- */
#uv-project-sidebar, #uv-docs-sidebar {
  position: sticky;
  top: 10px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* ---- Hover polish (the legacy sheets' :hover rules) ---- */
.uv-footer-link:hover span, .uv-project-crumb:hover span,
.uv-docs-crumb:hover span {
  text-decoration: underline;
}
.uv-member-option:hover, .uv-version-option:hover, .uv-topic-link:hover,
.uv-class-link:hover, .uv-doc-link:hover, .uv-nav-card:hover,
.uv-left-card:hover, .uv-right-card:hover, .uv-left-member:hover,
.uv-right-member:hover, .uv-download-row:hover, .uv-repo-row:hover,
.uv-tab-row:hover, .uv-require-card:hover {
  filter: brightness(1.12);
}

/* Switcher headers: rotate the arrow down while expanded (uv_shell.js stamps
 * data-uv-expanded on the switcher header). The two arrow sizes mint
 * uv-header-arrow / uv-header-arrow-2, hence the prefix match. */
[class*="uv-header-arrow"] {
  transition: transform 250ms ease;
}
[data-uv-expanded="1"] [class*="uv-header-arrow"] {
  transform: rotate(0deg);
}

/* Per-version link groups on the docs index (composer-wrapped Host content —
 * same convention as the legacy sidebar_docs.css). */
.version_topics, .version_classes {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.version_topics[hidden], .version_classes[hidden] {
  display: none;
}

/* ---- Generated documentation bodies (Host content) ----
 * The generator's HtmlBuilder output carries themed vortex-surface containers;
 * the legacy runtime resolved their fills from styles/docs_page.json. Statically
 * they theme through the same CSS variables the emitted chrome rides. */
vortex-surface {
  display: block;
}
vortex-surface[name="Include"],
vortex-surface[name="Inheritance Table"],
vortex-surface[name="Functions Table"] {
  background: var(--layers-theme-secondary, #2f3136);
  border-radius: 5px;
}
vortex-surface[name="Function Component Header"] {
  background: var(--layers-theme-tertiary, #1e1d22);
  border-radius: 5px 5px 0 0;
}
vortex-surface[name="Function Component Body"] {
  background: var(--layers-theme-secondary, #2f3136);
  border-radius: 0 0 5px 5px;
}

/* ---- Narrow (mobile) ---- */
@media (max-width: 600px) {
  /* The titlebar moves to the bottom edge (legacy column-reverse shell). */
  body {
    flex-direction: column-reverse;
  }
  /* Dropdowns open UPWARD from the bottom bar and span the screen width. */
  #uv-nav-projects, #uv-nav-socials {
    position: static;
  }
  #uv-menu-projects, #uv-menu-socials {
    top: auto;
    bottom: calc(100% + 6px);
    left: 8px;
    right: 8px;
    width: auto;
  }
}

/* Un-stick the sidebars once the page collapses to a single column. */
@media (max-width: 960px) {
  #uv-project-sidebar, #uv-docs-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
  }
}
