/* Structural layout for the Vortex application shell.
 *
 * Cosmetics (fills, borders, radii, the :Mobile state differences) come from the
 * Layers style files at runtime; this sheet only does the box layout the runtime
 * can't infer. Mirrors vortex-web/demo + nodeyou-site: the window is LOCKED to the
 * viewport (html/body 100dvh, overflow hidden) so the titlebar and the Main
 * Window's border stay fixed and always visible. Page content scrolls INSIDE its
 * tab panel, never by moving the document. (Loaded after general.css, so these
 * body rules win.) */

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--layers-theme-secondary, #2f3136);
  color: var(--layers-theme-foreground, #e3e3e3);
  transition: background 120ms ease, color 120ms ease;
}

vortex-surface[name="Main Window"] {
  height: 100%;
}

vortex-surface[name="Separator"] {
  height: 3px;
  flex: none;
}

/* Titlebar: fixed-height row. It's a stretched flex item of the column Main
 * Window, so it — and its block-level flex tab bar — already span full width.
 * Do NOT set width:100% on the bar: the resolved Tab Bar style applies left/right
 * margins (titlebar.json), and an explicit 100% adds to them, overflowing the
 * container and clipping the last (Settings) tab. VortexTabBar's pinned-tab
 * spacer right-aligns the Home + Settings tabs within that margined width. */
vortex-surface[name="Titlebar"] {
  flex: none;
  /* Own a stacking context above the tab panels so the nav-menu dropdowns
   * (absolutely positioned descendants of the bar) float over the page
   * content instead of being painted under the later panels sibling. */
  position: relative;
  z-index: 10;
}

/* ---- Titlebar nav-menu dropdowns (Projects / Socials) ----
 * Docuriser emits a <vortex-button name="Nav Button"> per site.nav_menus entry,
 * each anchoring a <vortex-surface name="Nav Menu"> dropdown. Cosmetics (fill,
 * border, radii) come from Layers (styles/docuriser_shell.json); this is only
 * box layout + open/closed state. Behavior is wired by titlebar_menus.js.
 *
 * Placement: the tab bar's flex:1 spacer (inserted by VortexTabBar before the
 * first pinned/static tab) right-aligns the static group. We want
 *   [ dynamic tabs ][===spacer===][ nav buttons ][ pinned tabs ]
 * so the LEFT of the bar stays reserved for the dynamic tabs other pages add via
 * openTab. flex `order` expresses that visually without depending on DOM order
 * (robust against openTab re-running _layoutPinned): dynamic tabs keep the
 * default order:0 (left of the spacer); everything else is ordered after it. */
vortex-surface[name="Titlebar"] vortex-tab-bar > [data-vortex-tab-spacer] { order: 1; }
vortex-surface[name="Titlebar"] vortex-tab-bar > vortex-button[name="Nav Button"] { order: 2; }
vortex-surface[name="Titlebar"] vortex-tab-bar > vortex-tab[pinned],
vortex-surface[name="Titlebar"] vortex-tab-bar > vortex-tab[static] { order: 3; }

/* A statically-authored closeable tab (the project tab) connects DURING parsing,
 * before its Icon/Text children are parsed, so vortex-web's connectedCallback
 * appends the auto ✕ FIRST — landing it left of the label. (Dynamic openTab tabs
 * are built with their children first, so they're unaffected.) The tab is a flex
 * row whose other children default to order:0; force the close button last. */
vortex-surface[name="Titlebar"] vortex-tab > [data-vortex-tab-close] {
  order: 1;
}

vortex-button[name="Nav Button"] {
  position: relative;
  gap: 6px;
  padding: 8px 12px;
  cursor: pointer;
  align-self: center;
}
/* Desktop: per-menu icon (projects.svg / socials.svg, set per nav_menus entry)
 * + text label + a small dropdown caret. The icon's viewBox/preserveAspectRatio
 * fits these landscape glyphs inside the box, so width+height don't distort.
 * The mobile layout below grows the icon and drops the text + caret. */
vortex-button[name="Nav Button"] vortex-label[name="Menu Icon"] {
  display: inline-flex;
  align-items: center;
}
vortex-button[name="Nav Button"] vortex-label[name="Menu Icon"] svg {
  display: block;
  width: 22px;
  height: 22px;
}
vortex-button[name="Nav Button"] vortex-label[name="Caret"] {
  display: inline-flex;
  align-items: center;
}
/* The caret points RIGHT when idle and rotates DOWN when its menu is open
 * (the button gets states="Selected" from titlebar_menus.js). arrow.svg points
 * down at rest, so -90deg yields right; the Selected rule returns it to 0. */
vortex-button[name="Nav Button"] vortex-label[name="Caret"] svg {
  display: block;
  width: 8px;
  height: auto;
  transform: rotate(-90deg);
  transition: transform 150ms ease;
}
vortex-button[name="Nav Button"][states~="Selected"] vortex-label[name="Caret"] svg {
  transform: rotate(0deg);
}

/* Extra breathing room between the nav-button group and the right-side tabs.
 * The margin must beat the inline `margin` shorthand VortexSurface._applyBox
 * writes from the resolved Layers style, hence !important; it targets only the
 * last nav button so the inter-button spacing is left alone. */
vortex-surface[name="Titlebar"] vortex-tab-bar > vortex-button[name="Nav Button"]:last-of-type {
  margin-right: 8px !important;
}

/* Hidden until .is_active. display:none also stops the runtime's inline→block
 * bump (VortexSurface._apply) from revealing it while closed. */
vortex-surface[name="Nav Menu"] {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  /* The buttons sit on the right side of the bar, so expand leftward to stay
   * clear of the right viewport edge. */
  right: 0;
  left: auto;
  z-index: 50;
  width: 360px;
  max-width: 90vw;
  padding: 12px;
  cursor: default;
}
vortex-surface[name="Nav Menu"].is_active {
  display: block;
}
/* One card per row inside the dropdown; its Cards surface fill is transparent
 * (docuriser_shell.json) so the Nav Menu itself is the visible panel. */
vortex-surface[name="Nav Menu"] .card-container {
  grid-template-columns: 1fr;
  padding: 0;
  background: transparent;
}

/* Mobile: Main Window flips to column-reverse, so the titlebar is at the BOTTOM
 * — open the dropdown upward and let it span the FULL screen width. The nav
 * buttons go icon-only to match the tabs: the per-menu Menu Icon shows (sized
 * like a tab icon), while the text label (hidden by the titlebar rule above)
 * and the dropdown caret are dropped. */
@media (max-width: 600px) {
  /* Drop the button's positioning context so the (absolute) Nav Menu anchors to
   * the Titlebar surface instead — which spans the viewport — letting left:0/
   * right:0 stretch the menu full-width. bottom:100% floats it above the bar. */
  vortex-button[name="Nav Button"] {
    position: static;
  }
  vortex-surface[name="Nav Menu"] {
    top: auto;
    bottom: calc(100% + 6px);
    left: 8px;
    right: 8px;
    width: auto;
  }
  vortex-button[name="Nav Button"] vortex-label[name="Menu Icon"] {
    display: inline-flex;
    align-items: center;
  }
  vortex-button[name="Nav Button"] vortex-label[name="Menu Icon"] svg {
    display: block;
    width: 30px;
    height: 30px;
  }
  vortex-button[name="Nav Button"] vortex-text[name="Text Label"] {
    display: none;
  }
  vortex-button[name="Nav Button"] vortex-label[name="Caret"] {
    display: none;
  }
}

/* The active panel fills the remaining column height; its content scrolls. */
vortex-tab-panels,
vortex-tab-panel {
  flex: 1;
  min-height: 0;
}

/* Home panel: the Home Page surface fills the panel and carries the themed page
 * background (resolved from styles/home.json). .sections-column is the centered,
 * max-width scroll region — so the titlebar and the window border stay fixed
 * while the content scrolls within. Mirrors nodeyou-site's Home Page layout. */
vortex-surface[name="Home Page"] {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  justify-content: center;
}
vortex-tab-panel[name="Home"] .sections-column {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  max-width: 960px;
  width: 100%;
  overflow-y: auto;
}
/* Footer surface: layout only (centering); its Fill comes from Layers
 * (styles/home.json -> "Main Window/Home Page/Footer"). display:flex is set
 * inline in vortex_footer.html so the runtime's display:block write doesn't
 * clobber it. */
vortex-surface[name="Footer"] {
  flex: 1;
  justify-content: center;
  align-items: start;
  text-align: center;
  max-width: 960px;
  width: 100%;
  margin: 0 auto !important;
}
/* Pin its size so it doesn't shrink away as a child of the scrolling column —
 * it's the last thing reached by scrolling down. */
/* vortex-tab-panel[name="Home"] .sections-column > vortex-surface[name="Footer"] {
  flex: none;
} */

/* Project panel: mirrors the Home panel. The Project Page surface fills the
 * panel and is the scroll region, so the titlebar and window border stay fixed
 * while the project content (sidebar + sections + footer) scrolls within. Its
 * Fill comes from Layers (the site's styles/project.json ->
 * "Main Window/Project Page"). */
vortex-surface[name="Policy Page"],
vortex-surface[name="Sponsor Page"],
vortex-surface[name="Project Page"],
vortex-surface[name="Documentation Home"],
vortex-surface[name="Documentation Page"] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
/* The .page row (sidebar + sections) keeps its centered flex layout from
 * general.css; drop its opaque background so the themed Project Page fill shows,
 * and let it grow so a short page still pushes the footer to the bottom. */
vortex-tab-panel[name="Project"] .page {
  background: transparent;
  flex: 1 0 auto;
}
/* Set Project sidebar's height to fit-content */
vortex-tab-panel[name="Project"] .sidebar {
  height: fit-content;
  padding: 10px;
  margin-left: 10px !important;
}
/* Footer is the last item in the scrolling column — pin its size so it isn't
 * squeezed by the growing .page above it. */
vortex-surface[name="Project Page"] > vortex-surface[name="Footer"] {
  flex: none;
}

/* ---- Project sidebar (Vortex shell) ----
 * The sidebar is a themed Layers stack: the <vortex-surface name="Sidebar">
 * (Fill Theme/Secondary), its <vortex-surface name="Section"> blocks (Fill
 * #00000026), and the <vortex-surface name="Button"> link buttons inside them
 * (Fill Theme/Tertiary) — all from styles/project.json. This sheet only does
 * box-layout; the surfaces keep their classic .sidebar/.sidebar_sect/.fbutton/
 * .card classes for that, and the resolved Layers fills (written inline by the
 * runtime) win over those classes' fallback backgrounds. Each surface sets its
 * display inline in the markup so the runtime's display:block write can't flatten
 * the flex layout. */

/* A link button is an <a> reduced to display:contents wrapping the themed
 * <vortex-surface name="Button">, so the surface is the visible button while the
 * anchor still carries the href (mirrors .card-link for the home cards). */
.contents-link {
  display: contents;
  color: inherit;
  text-decoration: none;
}

/* Sidebar text follows the active theme. general.css pins p/li/span/headings to
 * a flat #f0f0f0 (an explicit color, so they DON'T inherit the themed body color
 * — which is why links already recolor but these labels don't). Inside the Vortex
 * sidebar, bind them to the Layers Foreground var instead; vortex.js writes
 * --layers-theme-foreground on :root and updates it on theme change, so the text
 * recolors live. Specificity (0,1,2 + later sheet) beats general.css's 0,0,1. */
vortex-surface[name="Sidebar"] :is(p, li, span, h1, h2, h3, h4, h5, h6) {
  color: var(--layers-theme-foreground, #f0f0f0);
}
/* The switcher's option links pin their own color via .link_button (sidebar.css);
 * theme them the same way. */
vortex-surface[name="Sidebar"] .link_button {
  color: var(--layers-theme-foreground, #f0f0f0);
}

/* ---- Settings tab: appearance / theme switcher (mirrors the demo) ---- */
vortex-surface[name="Settings Menu"] {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
}
/* Scoped to the Settings Menu: the project page also uses a <vortex-surface
 * name="Sidebar"> (see the Project sidebar block below), which must NOT pick up
 * the settings sidebar's fixed 200px width. */
vortex-surface[name="Settings Menu"] vortex-surface[name="Sidebar"] {
  display: flex;
  flex-direction: column;
  width: 200px;
  flex: none;
}
vortex-surface[name="Settings Tab"] {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  opacity: 0.5;
}
vortex-surface[name="Settings Tab"][states~="Selected"] {
  opacity: 1;
}
vortex-surface[name="Appearance Widget"] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* vortex-label[name="Icon Label"] svg {
  display: block;
  width: 25px;
  height: 25px;
} */

vortex-label[name="Icon"] {
  display: inline-flex;
  align-items: center;
}
vortex-label[name="Icon"] svg {
  display: block;
  width: var(--icon-w, 25px);
  height: auto;
}

/* The Home tab carries the site wordmark, not a square glyph — fix the height
 * and let the width follow the logo's aspect ratio. */
vortex-label[name="Brand"] svg {
  display: block;
  height: auto;
  max-width: 100px;
}

@media (max-width: 960px) {
  vortex-tab-panel[name="Project"] .sidebar {
    margin: 0 !important;
  }
}

/* Mobile: flip the column so the tab bar sits at the bottom; the cosmetic
 * differences come from the :Mobile overrides in the style files via
 * Layers.setBreakpoints. !important defeats the inline flex-direction the
 * runtime writes onto Main Window. */
@media (max-width: 600px) {
  vortex-surface[name="Main Window"] {
    flex-direction: column-reverse !important;
  }
  /* Dynamic tabs (project/policy/page) go icon-only; the pinned brand tab is
   * exempt so a logo-less site that relies on `branding.tab_text` for its main
   * tab still shows that text on mobile. */
  vortex-surface[name="Titlebar"] vortex-tab:not([pinned]) vortex-text[name="Text Label"] {
    display: none;
  }
  vortex-surface[name="Titlebar"] vortex-label[name="Icon"] svg {
    width: 40px;
    height: 40px;
  }
  vortex-surface[name="Settings Menu"] {
    flex-direction: column-reverse;
  }
  vortex-surface[name="Settings Menu"] vortex-surface[name="Sidebar"] {
    flex-direction: row;
    width: 100%;
    justify-content: space-evenly;
    padding: 8px 0 12px;
  }
  vortex-surface[name="Settings Tab"] {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
  }
  vortex-label[name="Brand"] svg {
    max-width: 60px;
  }
}