/* ==========================================================================
   VERTEXIX MANUAL — additive styles
   Layers on top of ../../assets/css/style.css. Reuses its custom properties
   and component classes (--accent, .neu-raised, .btn, .container, etc.) —
   never redefines or forks them. Only new component classes needed for the
   Manual's 2-column layout (nav+on-page-TOC / article) live here, plus the
   header search box that replaces "Get Vertexix" on every Manual page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. New soft-UI primitive: inset ("pressed in"), the inverse of .neu-raised.
   style.css only has the raised variant; a search input reads wrong as a
   raised pill, so this mirrors .neu-raised-sm's shadow formula, inverted.
   -------------------------------------------------------------------------- */
.neu-inset {
  background: var(--surface);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: inset 4px 4px 10px var(--shadow-dark), inset -4px -4px 10px var(--shadow-light);
}

/* --------------------------------------------------------------------------
   1. Wider container, Manual pages only — scoped by the data-manual-root
   attribute every Manual page's <body> already carries (present, even if
   empty, on Manual/index.html too), so the main site's own .container
   (homepage hero/features/compare table) is completely untouched. Widening
   applies to the header/footer too since they share the same .container,
   so everything stays visually aligned edge to edge.
   -------------------------------------------------------------------------- */
body[data-manual-root] .container {
  max-width: 1440px;
}

/* --------------------------------------------------------------------------
   2. Shell — 2-column layout: nav (tree + on-page TOC) / article, full width
   -------------------------------------------------------------------------- */
.manual-shell {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-2xl);
}

.manual-nav-col {
  position: sticky;
  top: calc(72px + var(--space-lg));
  max-height: calc(100vh - 72px - var(--space-lg) * 2);
  overflow-y: auto;
  padding: var(--space-md);
}

.manual-article {
  padding: var(--space-xl);
  min-width: 0; /* let long code/URLs wrap instead of blowing out the grid */
}

/* --------------------------------------------------------------------------
   3. Sitemap page (Manual/index.html) — plain nested list, no JS dependency
   -------------------------------------------------------------------------- */
.manual-sitemap {
  padding: var(--space-xl);
}

.manual-sitemap h2 {
  font-size: 1.1rem;
  margin: var(--space-lg) 0 var(--space-sm);
  color: var(--accent-dark);
}

.manual-sitemap ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: var(--space-md);
}

.manual-sitemap a {
  color: var(--text-muted);
}

.manual-sitemap a:hover {
  color: var(--accent-dark);
}

/* --------------------------------------------------------------------------
   4. Nav tree (rendered into #manual-nav by manual.js)
   -------------------------------------------------------------------------- */
.manual-nav-col h2 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: var(--space-sm);
}

.manual-tree,
.manual-tree ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.manual-tree ul {
  padding-left: var(--space-md);
  margin-top: 2px;
}

.manual-tree__row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.manual-tree__toggle {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-subtle);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: transform var(--dur) var(--ease);
}

.manual-tree__toggle[aria-expanded="true"] {
  transform: rotate(90deg);
}

.manual-tree__toggle--leaf {
  visibility: hidden;
}

.manual-tree a {
  flex: 1;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.manual-tree a:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.manual-tree a.is-current {
  background: linear-gradient(145deg, var(--accent), var(--accent-dark));
  color: #fff;
  font-weight: 600;
}

.manual-tree ul[hidden] {
  display: none;
}

/* On-page table of contents, injected by manual.js directly under the
   current page's own tree entry, BEFORE that entry's own children (see
   renderPageToc in manual.js) — not a separate panel any more. Indented
   noticeably deeper than .manual-tree ul (the branch's own child-page
   list): these are sub-items OF the current page, not siblings of its
   title, and sitting at the same indent as the title read as the same
   rank. font-size is set here (not just on the <a>) so the disc marker,
   which scales off the list item's own font-size, shrinks with it too. */
.manual-tree__toc {
  padding-left: calc(var(--space-md) + 16px);
  margin-bottom: 6px; /* the gap before a following branch child-page list */
  list-style: disc;
  font-size: 0.82rem;
}

.manual-tree__toc li {
  list-style: disc;
  margin-left: 30px;
}

.manual-tree__toc > li::marker,
.manual-tree__toc ul li::marker {
  color: var(--text-subtle);
  font-size: 0.5em; /* half size, relative to this list's own (already reduced) font-size */
}

.manual-tree__toc a {
  display: block;
  padding: 0px 0px;
  font-size: 0.95em;
}

.manual-tree__toc ul {
  padding-left: var(--space-md);
  list-style: circle;
}

.manual-tree__toc a.is-active {
  color: var(--accent-dark);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. Breadcrumb / meta / pager / see-also (real static anchors, only styled here)
   -------------------------------------------------------------------------- */
.manual-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md);
  font-size: 0.85rem;
  color: var(--text-subtle);
}

.manual-breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 6px;
  color: var(--text-subtle);
}

.manual-breadcrumb a {
  color: var(--text-muted);
}

.manual-breadcrumb a:hover {
  color: var(--accent-dark);
}

.manual-breadcrumb li[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

.manual-article h1 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-bottom: var(--space-xs);
}

.manual-meta {
  color: var(--text-subtle);
  font-size: 0.85rem;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.manual-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.manual-body {
  color: var(--text-muted);
}

.manual-body h2 {
  font-size: 1.25rem;
  color: var(--text);
  margin: var(--space-xl) 0 var(--space-sm);
  scroll-margin-top: calc(72px + var(--space-lg));
}

.manual-body h3 {
  font-size: 1.05rem;
  color: var(--text);
  margin: var(--space-lg) 0 var(--space-xs);
  scroll-margin-top: calc(72px + var(--space-lg));
}

.manual-body p {
  margin-bottom: var(--space-sm);
}

.manual-body ul,
.manual-body ol {
  margin: 0 0 var(--space-md);
  padding-left: 1.3em;
}

.manual-body ul {
  list-style: disc;
}

.manual-body ol {
  list-style: decimal;
}

.manual-body li {
  margin-bottom: 6px;
}

.manual-body code {
  background: var(--accent-soft);
  color: var(--accent-dark);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 0.9em;
}

/* Copy-link button, hover-revealed next to h2/h3 (added by manual.js) */
.manual-heading-link {
  margin-left: 8px;
  opacity: 0;
  border: none;
  background: none;
  color: var(--text-subtle);
  cursor: pointer;
  font-size: 0.85em;
  transition: opacity var(--dur) var(--ease);
}

.manual-body h2:hover .manual-heading-link,
.manual-body h3:hover .manual-heading-link,
.manual-heading-link:focus {
  opacity: 1;
}

/* Figures / image placeholders */
.manual-figure {
  margin: var(--space-lg) 0;
  padding: var(--space-sm);
  background: var(--surface-white);
}

.manual-figure a {
  display: block;
  cursor: zoom-in;
}

.manual-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  transition: opacity 0.15s ease;
}

.manual-figure a:hover img {
  opacity: 0.9;
}

.manual-figure__caption {
  margin-top: var(--space-xs);
  font-size: 0.85rem;
  color: var(--text-subtle);
  text-align: center;
}

/* Narrow UI panels (the UV Editor's tool column) and the small Adjust box
   under it: shown near their real size instead of stretched to the column,
   and centred. --pair puts two Adjust boxes side by side on wide screens. */
.manual-figure--panel,
.manual-figure--adjust {
  margin-left: auto;
  margin-right: auto;
}
.manual-figure--panel { max-width: 340px; }
.manual-figure--adjust { max-width: 420px; }
.manual-figure-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}
.manual-figure-row .manual-figure--adjust {
  flex: 1 1 300px;
  margin: var(--space-sm) 0;
}

/* Placeholder state, for figures awaiting a real screenshot */
.manual-figure--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  border: 2px dashed rgba(15, 23, 42, 0.15);
  color: var(--text-subtle);
  font-size: 0.9rem;
  text-align: center;
}

.manual-see-also,
.manual-pager {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.manual-see-also h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
  margin: 0 0 var(--space-sm);
}

.manual-see-also ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
}

.manual-see-also a {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 0.85rem;
  font-weight: 600;
}

.manual-pager {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   5b. Body primitives: keys, tables, callouts

   All three were in use, or badly wanted, long before they were styled.
   <kbd> appears over a hundred times across seventeen pages and rendered in
   whatever monospace the browser felt like; bare <table> is the shape every
   settings panel is documented in and had no rules at all; and there was
   nowhere to put a warning, so pages resorted to bolding "cannot be undone"
   mid-sentence and hoping. Everything here is scoped to .manual-body so the
   marketing page, which shares style.css but not this file, is untouched.
   -------------------------------------------------------------------------- */

/* One <kbd> per key, joined by a literal + — see any shortcut table. */
.manual-body kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 2px 6px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--surface-white);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  font-family: var(--font-body);
  font-size: 0.82em;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
}

/* The dominant table shape is Control | Range | Default. Wrapped so a wide
   one scrolls rather than pushing the article sideways on a phone. */
.manual-body table {
  width: 100%;
  margin: var(--space-md) 0;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.manual-body table th,
.manual-body table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.manual-body table thead th {
  font-weight: 700;
  color: var(--text);
  border-bottom: 2px solid rgba(15, 23, 42, 0.14);
  white-space: nowrap;
}

.manual-body table tbody tr:last-child th,
.manual-body table tbody tr:last-child td {
  border-bottom: none;
}

.manual-body table tbody tr:hover {
  background: rgba(124, 58, 237, 0.04);
}

/* Callouts. Three kinds, and the distinction is about consequence, not
   loudness: --note explains, --tip is optional advice, --warning is for
   something you cannot take back. Use the last one sparingly or it stops
   meaning anything. */
.manual-callout {
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--accent-soft);
}

.manual-callout > :first-child { margin-top: 0; }
.manual-callout > :last-child { margin-bottom: 0; }

.manual-callout__label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.manual-callout--tip {
  border-left-color: #16a34a;
  background: rgba(22, 163, 74, 0.08);
}

.manual-callout--tip .manual-callout__label { color: #15803d; }

.manual-callout--warning {
  border-left-color: #d97706;
  background: rgba(217, 119, 6, 0.09);
}

.manual-callout--warning .manual-callout__label { color: #b45309; }

/* --------------------------------------------------------------------------
   6. Header search box — replaces "Get Vertexix" in .site-nav on every
   Manual page (Home and Get Vertexix pointed at the same page, so the
   button was redundant here; search earns the slot instead).
   -------------------------------------------------------------------------- */
.manual-search--header {
  position: relative;
  width: 240px;
}

.manual-search--header input[type="search"] {
  width: 100%;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--text);
}

.manual-search--header input[type="search"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.manual-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: max(320px, 100%);
  z-index: 200;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--space-xs);
  list-style: none;
  margin: 0;
}

.manual-search-results li a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
}

.manual-search-results li a:hover,
.manual-search-results li a.is-active {
  background: var(--accent-soft);
}

.manual-search-result__title {
  display: block;
  font-weight: 600;
  color: var(--text);
  font-size: 0.9rem;
}

.manual-search-result__crumb {
  display: block;
  font-size: 0.75rem;
  color: var(--text-subtle);
  margin-bottom: 2px;
}

.manual-search-result__snippet {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.manual-search-result__snippet mark {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: 3px;
  padding: 0 2px;
}

.manual-search-empty {
  padding: var(--space-sm);
  font-size: 0.85rem;
  color: var(--text-subtle);
  text-align: center;
}

/* --------------------------------------------------------------------------
   7. Nav-failure fallback (manual.js error path)
   -------------------------------------------------------------------------- */
.manual-nav-fallback {
  font-size: 0.9rem;
}

.manual-nav-fallback a {
  color: var(--accent-dark);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   8. Responsive — the nav column (tree + on-page TOC) collapses into the
   site's existing 820px hamburger idiom; the header search box drops into
   that same collapsed nav (it lives inside .site-nav already) and goes
   full width there, matching how nav-cta used to behave in that slot.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .manual-shell {
    grid-template-columns: 260px minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  .manual-search--header {
    width: 100%;
    align-self: stretch;
  }

  .manual-shell {
    grid-template-columns: 1fr;
  }

  .manual-nav-toggle {
    display: flex;
    margin-bottom: var(--space-sm);
  }

  .manual-nav-col {
    position: static;
    max-height: none;
    padding-top: var(--space-sm);
  }

  .manual-nav-col nav#manual-nav {
    display: none;
  }

  .manual-nav-col.is-open nav#manual-nav {
    display: block;
  }

  .manual-article {
    padding: var(--space-lg);
  }
}

/* --------------------------------------------------------------------------
   9. Print — hide chrome/nav/search, expand the article, print link URLs
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .manual-nav-col,
  .manual-pager,
  .skip-link {
    display: none !important;
  }

  .manual-shell {
    display: block;
    padding: 0;
  }

  .manual-article {
    box-shadow: none;
    padding: 0;
  }

  .manual-body a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    color: var(--text-subtle);
  }
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* Add dots under the hoverable text */
  cursor: pointer;
}

/* Tooltip text */
.tooltiptext {
  visibility: hidden; /* Hidden by default */
  width: 130px;
  background-color: black;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1; /* Ensure tooltip is displayed above content */
}

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.URL-link {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -25px 0px;
}