/* ============================================================
   Hammerspace Documentation — brand theme for content pages.
   Loaded on EVERY page (book pages + landing) via head-styles.hbs;
   the landing/category pages layer platform.css on top.

   Follows the Hammerspace Brand Guidelines:
     Type:  Montserrat (headings / CTAs) + Roboto (body)
     Color: Brand Blue #4CC8EF (hover #78D1F2), Deep Purple #390BA2,
            Purple Haze #703BE1, Blue Galaxy #3017A1, Black Hole #221C35.
            (Galactic Green is deprecated.)
   ============================================================ */

:root {
  /* Hammerspace brand palette (galaxy) */
  --hs-green:   #4CC8EF;   /* Brand Blue — primary accent / CTA (replaces deprecated Galactic Green) */
  --hs-green-d: #78D1F2;   /* Brand Blue — hover */
  --hs-purple:  #703BE1;   /* Purple Haze */
  --hs-blue:    #3017A1;   /* Blue Galaxy — deep indigo */
  --hs-pink:    #FF4588;   /* Pink Supernova */
  --hs-yellow:  #FFE700;   /* Eclipsed */
  --hs-ink:     #221C35;   /* Black Hole — text / dark surfaces */
  --hs-bar-bg:  #000000;   /* solid black top bar (matches main website) */
  --hs-muted:   #5b5478;
  --hs-line:    #e6e2f0;
  --hs-maxw:    1180px;

  /* Legacy palette — still referenced by the older standalone landing
     pages (product-docs `home`, solution-field-guides `solutions`). */
  --color-brand-primary:    #6B2D9E;
  --color-brand-dark:       #3D1A6E;
  --color-brand-accent:     #E91E8C;
  --color-brand-accent-alt: #D4007A;
  --color-bg-dark:          #0D0A1A;
  --color-text-light:       #f0ecf7;
  --hs-card-radius:         10px;
  --hs-transition:          0.18s ease;
}

/* ── Baseline accessibility resets (2026-08 mobile audit) ──────────────────
   1) Phones auto-enlarge small text for readability ("font boosting").
      Harmless on most text, but it can quietly inflate our small,
      deliberately-sized brand text (nav wordmark, badges) past its box on
      narrow screens. We size text on purpose here — opt out of the boost.
   2) Respect a reader's OS-level "reduce motion" setting by killing
      hover/transition animation duration site-wide.
   3) Respect the safe area on notched phones (landscape) so the black bars'
      content never sits under a curved corner or camera cutout. Additive —
      resolves to 0 extra padding on phones without a notch, so this has no
      effect anywhere else. ─────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* The base Antora theme sets `body{word-wrap:anywhere}` site-wide, which
   lets ANY text break mid-word to avoid overflowing its box. That's the
   right call for table cells and note/warning boxes -- the base theme
   reasserts it there with a more specific selector (`.doc td.tableblock >
   .content`, `.doc .admonitionblock td.content`) that this rule does NOT
   override. Everywhere else -- headings, buttons, the hero title -- it was
   breaking ordinary words for no reason. `html body` outranks the base's
   plain `body` selector regardless of stylesheet load order, so this wins
   unconditionally. (2026-08 mobile audit, round 2 -- see also .hs-word /
   .hs-card-title above, which are now redundant with this but left as-is.) */
html body {
  overflow-wrap: normal;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@supports (padding: max(0px)) {
  .navbar { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
  .hs-foot { padding-left: max(1.5rem, env(safe-area-inset-left)); padding-right: max(1.5rem, env(safe-area-inset-right)); }
}

/* ── Top bar (branded) — reuses Antora's .navbar structure so all the
   layout / sticky / search slot / responsive-burger behavior from
   site.css still works; see partials/header-content.hbs. ──────── */
.navbar {
  background-color: var(--hs-bar-bg) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  z-index: 20;   /* above the landing hero (z-index:5) so the grid launcher menu drops in front; still below the search slide-out (z-index:30) */
}
.navbar .navbar-item,
.navbar .navbar-link,
.navbar .nav-link {
  color: #e9e6f6 !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}
.navbar a.navbar-item:hover,
.navbar .navbar-item:focus {
  background: transparent !important;
  color: #fff !important;
}
.navbar .navbar-end > a.navbar-item {
  position: relative;
}
.navbar .navbar-end > a.navbar-item::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 55%;
  height: 2px;
  background: var(--hs-green);
  opacity: 0;
}
.navbar .navbar-end > a.navbar-item:hover::after {
  opacity: 1;
}
/* Persistent underline for whichever top-level section the page belongs to
   (Lindsie, 2026-09-02) -- same treatment as :hover, just not conditional on
   the mouse. See header-content.hbs for how .is-current gets applied.
   2026-09-08 (Sixth Review): narrowed to 55% width and centered -- a
   full-width inset box-shadow can't do a partial-width underline, so this
   switched to a centered ::after instead. */
.navbar .navbar-end > a.navbar-item.is-current::after {
  opacity: 1;
}
.navbar .navbar-end > a.navbar-item.is-current {
  color: #fff !important;
}
/* brand lockup (the "H" mark + wordmark) */
.navbar .hs-brand,
.navbar .hs-brand:hover {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent !important;
}
.hs-mark {
  display: inline-flex;
  align-items: center;
  color: #fff;
}
.hs-mark svg {
  height: 30px;
  width: auto;
  display: block;
  fill: currentColor;
}
.hs-word {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 1.05;
  font-size: 12px;
  letter-spacing: .03em;
  white-space: nowrap;      /* never wrap "HAMMERSPACE" ... */
  overflow-wrap: normal;    /* ...and never break it mid-word (2026-08 mobile audit) */
}
.hs-word small {
  display: block;
  color: #b9b2d8;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .14em;
  white-space: nowrap;      /* never wrap "DOCUMENTATION" ... */
  overflow-wrap: normal;    /* ...and never break it mid-word (2026-08 mobile audit) */
}
/* Support Hub button */
.navbar .button.hs-support {
  background: transparent;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
}
.navbar .button.hs-support:hover {
  border-color: var(--hs-green);
  color: var(--hs-green) !important;
}

/* All Hammerspace launcher (book-page navbar) */
.navbar .allhs{position:relative;display:flex;align-items:center}
.navbar .allhs>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:0 .7em;height:1.85rem;font-family:'Montserrat',sans-serif;font-weight:600;font-size:12.5px;white-space:nowrap}
.navbar .allhs>summary::-webkit-details-marker{display:none}
.navbar .allhs>summary::after{content:'';width:.42em;height:.42em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-2px 0 0 1px}
.navbar .allhs[open]>summary{background:rgba(255,255,255,.10)}
.navbar .allhs-grid{width:14px;height:14px;fill:currentColor;flex:none}
.navbar .allhs-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:236px;background:#fff;border-radius:10px;box-shadow:0 14px 36px rgba(10,6,30,.28);padding:6px;z-index:40}
.navbar .allhs-menu a{display:block;padding:9px 13px;border-radius:7px;color:var(--hs-ink) !important;font-family:'Montserrat',sans-serif;font-weight:600;font-size:13.5px;white-space:nowrap}
.navbar .allhs-menu a:hover{background:#eaf7fd;color:#390BA2 !important;box-shadow:none}


/* ── Footer (branded) — see partials/footer-content.hbs ───────── */
footer.footer {
  background: #000000;
  color: #b9b2d8;
  padding: 0;
  margin-top: 0;
}
.hs-foot {
  max-width: var(--hs-maxw);
  margin: 0 auto;
  padding: 26px 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hs-foot-brand { display: flex; align-items: center; gap: 10px; }
.hs-foot-meta { font-size: .84rem; }
.hs-foot-meta a { color: #cfc8f0; }
.hs-foot-meta a:hover { color: var(--hs-green); }

/* ── Left navigation (page menu) brand accents ───────────────── */
.nav-menu .nav-item.is-current-page > .nav-link,
.nav-menu .nav-link.is-current-page {
  color: var(--hs-blue) !important;
  font-weight: 600;
}
.nav-menu a.nav-link:hover { color: var(--hs-purple) !important; }
.nav-panel-explore .nav-item.is-current-page > .nav-line {
  border-left-color: var(--hs-blue) !important;
}
.nav-panel-explore .nav-item > .nav-link:hover {
  color: var(--hs-purple) !important;
}
/* Hidden site-wide on content pages (Lindsie, 2026-09-02) -- was a tab for
   browsing to other components/books from inside the left nav. */
.nav-panel-explore { display: none; }
/* The stock UI still reserves 2.5rem at the bottom of the nav column for
   nav-panel-explore's "context" bar (site.css: .nav-panel-menu{height:calc(100%
   - 2.5rem)}, only relaxed to 100% via :only-child -- which never matches here
   since the hidden explore panel is still a DOM sibling). With explore panel
   permanently hidden above, that reserved strip is just an empty gray gap at
   the bottom of the sidebar -- reclaim it (Lindsie, Fifth Review 2026-09-03:
   "remaining panel from the bottom of the left hand nav"). */
.nav-panel-menu { height: 100%; }
/* Nav-tree entries with no href (the ".Part N" style group headings from
   nav.adoc) render as a bare span.nav-text -- real article links use
   .nav-link instead, so this never touches them. */
.nav-menu .nav-text { font-weight: 600; }

/* ── Right "Contents" TOC brand accents ──────────────────────── */
.toc .toc-menu h3 { font-family: 'Montserrat', sans-serif; color: var(--hs-ink); }
.toc .toc-menu a:hover { color: var(--hs-purple); }
.toc .toc-menu a.is-active {
  color: var(--hs-blue);
  border-left-color: var(--hs-blue);
  font-weight: 600;
}

/* ── Content typography ──────────────────────────────────────── */
.doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 {
  font-family: 'Montserrat', sans-serif;
  color: var(--hs-ink);
}
.doc h2 { border-bottom: 1px solid var(--hs-line); padding-bottom: .28em; }
.doc a { color: var(--hs-blue); }
.doc a:hover { color: var(--hs-purple); }
.doc code:not(.hljs) {
  color: var(--hs-blue);
  background: #f6f4fb;
  border-radius: 4px;
  padding: .08em .35em;
}
.doc pre.highlight > code,
.doc .listingblock pre,
.doc .literalblock pre { border-left: 3px solid var(--hs-purple); }

/* admonitions — branded left rule + light tint per type */
.doc .admonitionblock > table {
  border: 0;
  border-left: 4px solid var(--hs-green);
  background: #eaf7fd;
  border-radius: 0 8px 8px 0;
}
.doc .admonitionblock td.content { padding: .7em 1.1em; }
.doc .admonitionblock.note > table      { border-left-color: var(--hs-green);  background: #eaf7fd; }
.doc .admonitionblock.tip > table       { border-left-color: var(--hs-green);  background: #eaf7fd; }
.doc .admonitionblock.important > table { border-left-color: var(--hs-purple); background: #f6f2fe; }
.doc .admonitionblock.warning > table   { border-left-color: var(--hs-yellow); background: #fffbe6; }
.doc .admonitionblock.caution > table   { border-left-color: var(--hs-pink);   background: #fff0f5; }

/* tables — tinted header with brand underline */
.doc table.tableblock thead th {
  background: #f6f4fb;
  border-bottom: 2px solid var(--hs-green);
  font-family: 'Montserrat', sans-serif;
}
.doc table.tableblock tbody tr:nth-child(even) { background: #faf9fd; }

/* figure & table captions / block titles */
.doc .imageblock .title { text-align: center; font-style: italic; color: var(--hs-muted); }
.doc caption.title, .doc figcaption { color: var(--hs-muted); }

/* ── About / front-matter landing pages (:page-role: about-landing) ────
   HTML-only enhancement; the PDF preface (shared partial) is unaffected. */
body.about-landing .doc h1.page { font-size: 2.3rem; margin-bottom: .2rem; padding-bottom: .5rem; }
body.about-landing .doc h1.page::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: .55rem;
  border-radius: 3px;
  background: linear-gradient(to right, #390BA2 0%, #4CC8EF 100%);
}
body.about-landing .doc h1.page + p { font-size: 1.12rem; color: var(--hs-muted); line-height: 1.65; }

/* "How this guide is organized" → responsive quick-link card grid (role .guide-map) */
.doc .guide-map > ul {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 16px;
}
.doc .guide-map > ul > li {
  margin: 0;
  background: #fff;
  border: 1px solid var(--hs-line);
  border-radius: 12px;
  padding: 18px 20px;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.doc .guide-map > ul > li:hover {
  border-color: var(--hs-green);
  box-shadow: 0 10px 26px rgba(76,200,239,.16);
  transform: translateY(-2px);
}
.doc .guide-map > ul > li > p { margin: 0; }
.doc .guide-map > ul > li strong {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.02rem;
  color: var(--hs-ink);
  margin-bottom: .35rem;
}
.doc .guide-map > ul > li a { font-family: 'Montserrat', sans-serif; font-weight: 600; }

/* ── Landing page wrapper ─────────────────────────────────── */
.hs-landing {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1a1a2e;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

/* ── Hero ─────────────────────────────────────────────────── */
.hs-hero {
  background: linear-gradient(135deg, var(--color-brand-dark) 0%, #2a0a4e 50%, #1a0535 100%);
  border-radius: 14px;
  margin: 2rem 0 3rem;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(61, 26, 110, 0.4);
  position: relative;
}

.hs-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 50%, rgba(233, 30, 140, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(107, 45, 158, 0.2) 0%, transparent 50%);
}

.hs-hero-inner {
  position: relative;
  padding: 3.5rem 3rem;
}

.hs-hero-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-accent);
  margin: 0 0 0.75rem;
}

.hs-hero-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 1rem;
  line-height: 1.15;
}

.hs-hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.75);
  margin: 0;
  max-width: 600px;
  line-height: 1.6;
}

/* ── Version section ──────────────────────────────────────── */
.hs-version-section {
  margin-bottom: 3.5rem;
}

.hs-version-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e8e0f0;
}

.hs-version-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-brand-dark);
  margin: 0;
}

.hs-version-badge {
  display: inline-block;
  background: var(--color-brand-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 20px;
  white-space: nowrap;
}

.hs-badge-soon {
  background: #9e9e9e;
}

/* ── Card grid ────────────────────────────────────────────── */
.hs-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

/* ── Individual card ──────────────────────────────────────── */
.hs-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: #fff;
  border: 1.5px solid #e4daf0;
  border-radius: var(--hs-card-radius);
  padding: 1.4rem 1.25rem;
  text-decoration: none !important;
  color: inherit !important;
  transition:
    border-color var(--hs-transition),
    box-shadow var(--hs-transition),
    transform var(--hs-transition);
  position: relative;
  overflow: hidden;
}

.hs-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--color-brand-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--hs-transition);
}

.hs-card:hover {
  border-color: var(--color-brand-primary);
  box-shadow: 0 6px 24px rgba(107, 45, 158, 0.16);
  transform: translateY(-2px);
  text-decoration: none !important;
}

.hs-card:hover::before {
  transform: scaleY(1);
}

.hs-card-icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.hs-card-body {
  flex: 1;
  min-width: 0;
}

.hs-card-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--color-brand-dark);
  margin: 0 0 0.4rem;
  line-height: 1.3;
  overflow-wrap: normal;   /* wrap between words only, never mid-word (2026-08 mobile audit) */
}

.hs-card-desc {
  font-size: 0.83rem;
  color: #555;
  margin: 0;
  line-height: 1.5;
}

.hs-card-arrow {
  font-size: 1.1rem;
  color: var(--color-brand-accent);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--hs-transition), transform var(--hs-transition);
  transform: translateX(-4px);
  align-self: center;
}

.hs-card:hover .hs-card-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ── Coming soon section ──────────────────────────────────── */
.hs-version-coming-soon {
  opacity: 0.7;
}

.hs-coming-soon-text {
  font-size: 0.95rem;
  color: #777;
  font-style: italic;
  margin: 0.5rem 0 0;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .hs-hero-inner {
    padding: 2rem 1.5rem;
  }

  .hs-card-grid {
    grid-template-columns: 1fr;
  }

  .hs-version-header {
    flex-wrap: wrap;
  }
}

/* ============================================================
   Reading width — cap the content column for readability.
   2026 best practice favors a bounded line length over full-bleed
   text: ~64rem (~1024px) is noticeably wider than the stock 46rem
   default (which felt cramped) but keeps lines comfortable to read.
   max-width is naturally responsive — it narrows to the available
   space on smaller viewports.
   ============================================================ */
.doc {
  max-width: 64rem !important;
}
@media screen and (min-width: 1024px) {
  .doc {
    max-width: 64rem !important;
    margin: 0 2.5rem !important;
  }
}

/* ============================================================
   Center block images (the Antora default UI already centers
   .imageblock; this makes it explicit and bundle-proof). Inline
   images — image:foo[] inside a paragraph, rendered as span.image
   — are intentionally left in the text flow, not centered.
   ============================================================ */
.doc .imageblock {
  align-items: center;
}
.doc .imageblock > .content {
  text-align: center;
}

/* ── Opt-in: let one image scroll instead of shrinking (2026-08 mobile
   audit) — for a diagram/screenshot where shrinking to fit the phone width
   would make its text illegible. Add role=full-scale to the image macro:
     image::foo.png[Foo,role=full-scale]
   Off by default — every other image keeps shrinking to fit, as before. ── */
.doc .imageblock.full-scale {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.doc .imageblock.full-scale > .content {
  text-align: left;
}
.doc .imageblock.full-scale img {
  max-width: none;
  width: auto;
}

/* ── Download PDF button (toolbar) ───────────────────────────────────────────
   Per-page "Download PDF" control (supplemental-ui toolbar.hbs). Shows on guide
   pages whose component sets page-pdf in antora.yml; PDF lands in /_pdfs/ via
   scripts that embed the published PDFs into the aggregated site. */
.toolbar .download-pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  margin-right: 15px;
  padding: 0 0.7rem;
  height: 1.6rem;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.6rem;
  white-space: nowrap;
  color: #fff;
  background-color: #3017A1; /* Hammerspace brand purple */
  border-radius: 0.2rem;
  text-decoration: none;
}
.toolbar .download-pdf:hover { background-color: #25107D; }
.toolbar .download-pdf-icon {
  width: 0.8rem;
  height: 0.8rem;
  background-color: currentColor;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M8 1v8m0 0L5 6m3 3l3-3M2 12v2a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-2%22 fill=%22none%22 stroke=%22white%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M8 1v8m0 0L5 6m3 3l3-3M2 12v2a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-2%22 fill=%22none%22 stroke=%22white%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
}

/* ── Previous / Next page pager (supplemental-ui pagination.hbs) ──────────────
   Custom classes (hs-pager*) so the base site.css .pagination styling — which
   adds its own "Prev"/"Next" labels and ‹ › arrows — does not overlay ours. */
.hs-pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 2.5rem 0 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e6e3ef;
  list-style: none;
}
.hs-pager .hs-pager-prev, .hs-pager .hs-pager-next { display: flex; }
.hs-pager .hs-pager-next { margin-left: auto; }
.hs-pager a {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid #e6e3ef;
  border-radius: 8px;
  text-decoration: none;
  color: var(--hs-ink);
  font-family: 'Montserrat', sans-serif; /* Seventh Review (2026-09-10) */
}
.hs-pager .hs-pager-next a { align-items: flex-end; text-align: right; }
.hs-pager a:hover { border-color: var(--hs-purple); background: #faf9ff; }
.hs-pager .hs-pager-label {
  font-size: 0.72rem; font-weight: 600; color: var(--hs-purple);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.hs-pager .hs-pager-title { font-size: 0.95rem; font-weight: 500; }

/* ── Version selector next to the book title (nav-menu.hbs) ───────────────────
   The single version control on book pages. page-versions renders
   .page-versions > button.version-menu-toggle + .version-menu. */
/* Seventh Review (2026-09-10): stacked instead of side-by-side -- the
   title already comes first in nav-menu.hbs's markup, so switching to a
   column direction is enough to put the version dropdown below it; no
   template change needed. */
.nav-menu .nav-book {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 8px; margin-bottom: 0.5rem; margin-top: 3px;
}
.nav-menu .nav-book .title { margin: 0; font-size: 20px; }
.nav-menu .nav-book .page-versions { position: relative; flex: none; }
.nav-menu .nav-book .version-menu-toggle {
  font-size: 0.78rem; font-weight: 600; color: var(--hs-purple);
  background: #f1eefb; border: 1px solid #ddd4f5; border-radius: 999px;
  padding: 6px 12px; cursor: pointer;   /* was 2px 10px (~19px tall) — WCAG 2.2 SC 2.5.8 wants >=24px (2026-08 mobile audit) */
}
.nav-menu .nav-book .version-menu-toggle::after { content: " \25BE"; }
.nav-menu .nav-book .version-menu {
  position: absolute; right: 0; top: 1.8rem; z-index: 5; min-width: 84px;
  background: #fff; border: 1px solid var(--hs-line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(10,6,30,.15); padding: 4px; display: none;
}
.nav-menu .nav-book .page-versions.is-active .version-menu { display: block; }
.nav-menu .nav-book .version-menu .version {
  display: block; padding: 5px 12px; border-radius: 6px;
  font-size: 0.82rem; font-weight: 500; color: var(--hs-ink);
}
.nav-menu .nav-book .version-menu .version:hover { background: #f3f0fb; color: var(--hs-purple); }
.nav-menu .nav-book .version-menu .version.is-current { color: var(--hs-green); font-weight: 600; }

/* ── Search results panel (Lunr) — constrain width, align right, brand it ──── */
.search-result-dropdown-menu {
  left: auto !important; right: 0;
  max-width: 460px; width: min(460px, 92vw);
  border: 1px solid var(--hs-line); border-radius: 10px;
  box-shadow: 0 16px 44px rgba(10,6,30,.22);
}
.search-result-dropdown-menu .search-result-document-title {
  font-family: 'Montserrat', sans-serif; color: var(--hs-ink);
  overflow-wrap: normal; word-break: normal;
}
.search-result-dropdown-menu .search-result-section-title { color: var(--hs-purple); }
.search-result-dropdown-menu .search-result-highlight { color: var(--hs-blue); font-weight: 600; background: #eef4ff; }
.search-result-dropdown-menu .search-result-item:hover { background: #faf9ff; }

/* ============================================================
   Header redesign — full-label single-line nav, search-icon
   slide-out, icon-only launcher.  (2026-07 chrome round)
   ============================================================ */
/* Full labels on ONE line at the 1024px desktop breakpoint (below = burger). */
@media screen and (min-width: 1024px) {
  .navbar .navbar-end > a.navbar-item {
    font-size: .78rem;              /* ~14px @ 18px root; was 16px */
    padding-left: .55rem;
    padding-right: .55rem;
    white-space: nowrap;            /* never wrap a label */
  }
}
/* Search + launcher icon buttons */
.navbar .hs-search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; margin-left: .35rem; padding: 0;
  background: transparent; border: 1px solid var(--hs-green);
  border-radius: 9px; color: var(--hs-green); cursor: pointer;
}
.navbar .hs-search-toggle:hover { border-color: var(--hs-green); color: var(--hs-green); background: transparent; }
.navbar .hs-search-toggle .hs-ic { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; }
/* The mobile round below duplicates this button into .navbar-brand (which never
   collapses under the hamburger) so phones can reach search without opening the
   menu. Hidden here by default; only the <=700px block below shows it, and hides
   the original in its place. This has to live in hammerspace.css, not
   platform.css: platform.css only loads on docs-site's own 5 "home" pages
   (layouts/home.hbs) -- content-book pages load hammerspace.css + home-page.css
   (partials/head-styles.hbs) and never see platform.css at all. */
.navbar-brand .hs-search-toggle-mobile { display: none; }
/* Launcher = grid icon only (drop the text + caret) */
.navbar .hs-allhs-item { padding-left: .15rem; }
.navbar .allhs > summary {
  width: 2.1rem; height: 2.1rem; padding: 0; gap: 0; justify-content: center;
}
.navbar .allhs > summary::after { display: none; }
.navbar .allhs-grid { width: 1.05rem; height: 1.05rem; }

/* Slide-out search panel (hosts the Lunr #search-field + results) */
.hs-search-panel {
  position: fixed; top: 3.5rem; right: 0; bottom: 0;
  width: 33vw; min-width: 360px; max-width: 92vw; z-index: 30;
  background: #0b0810; border-left: 1px solid rgba(255,255,255,.08);
  box-shadow: -16px 0 40px rgba(0,0,0,.35);
  transform: translateX(100%); visibility: hidden;
  transition: transform .22s ease, visibility .22s ease;
  overflow-y: auto;
}
body.hs-search-open .hs-search-panel { transform: translateX(0); visibility: visible; }
/* The search drawer OVERLAYS content on every page (it does not push content
   aside). The old push rule targeted `.body`, which collides with the landing
   card text wrappers AND Antora's content-body wrapper, squishing both. */

/* Sticky footer on the home/landing layout: on short pages the footer sits at
   the viewport bottom instead of floating mid-screen with dead space below. */
body.home { display: flex; flex-direction: column; min-height: 100vh; }
body.home .hsp { flex: 1 0 auto; }
body.home > footer.footer { flex: none; }
.hs-search-panel-top { display: flex; align-items: flex-start; gap: .5rem; padding: 16px; }
.hs-search-panel #search-field { flex: 1; min-width: 0; }
.hs-search-panel #search-input {
  width: 100%; background: #171320; border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px; color: #e9e6f6; padding: .6rem .7rem; font-size: 14px; font-family: 'Roboto', sans-serif;
}
.hs-search-panel #search-input::placeholder { color: #8f88ad; }
.hs-search-close { flex: none; background: transparent; border: 0; color: #b9b2d8; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.hs-search-close:hover { color: #fff; }
/* Lunr results rendered INSIDE the panel (override the light dropdown styling) */
.hs-search-panel .search-result-dropdown-menu {
  position: static; left: auto; right: auto; width: auto; max-width: none;
  margin: .4rem 16px 20px; background: transparent; border: 0; box-shadow: none;
}
.hs-search-panel .search-result-document-title { color: #fff; font-family: 'Montserrat', sans-serif; overflow-wrap: normal; word-break: normal; }
.hs-search-panel .search-result-section-title { color: var(--hs-green); }
.hs-search-panel .search-result-highlight { color: var(--hs-green); background: transparent; font-weight: 600; }
.hs-search-panel .search-result-item { border-bottom: 1px solid rgba(255,255,255,.07); }
.hs-search-panel .search-result-item:hover { background: rgba(255,255,255,.05); }
.hs-search-panel .search-result-item-title a { color: #cfc8f0; }

/* --- slide-out panel: corrected layout + dark-themed Lunr results --- */
.hs-search-panel { padding: 0; }
.hs-search-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 0; }
.hs-search-panel-label { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: #8f88ad; }
.hs-search-panel #search-field { display: block; padding: 10px 16px 16px; }
.hs-search-panel #search-input { width: 100%; background: #171320; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; color: #e9e6f6; padding: .6rem .7rem; font-size: 14px; font-family: 'Roboto', sans-serif; }
/* Lunr appends .search-result-dropdown-menu INTO #search-field — make it flow below, full width */
.hs-search-panel .search-result-dropdown-menu { position: static; right: auto; left: auto; top: auto; min-width: 0; max-width: none; margin: .7rem 0 0; box-shadow: none; background: transparent; }
.hs-search-panel .search-result-dataset { background: #120e1b; border: 1px solid rgba(255,255,255,.10); border-radius: 8px; max-height: none; color: #b9b2d8; }
.hs-search-panel .search-result-component-header { color: #fff; border-bottom-color: rgba(255,255,255,.14); font-family: 'Montserrat', sans-serif; }
.hs-search-panel .search-result-document-title { color: #cfc8f0; border-right-color: rgba(255,255,255,.12); }
.hs-search-panel .search-result-document-hit { color: #b9b2d8; }
.hs-search-panel .search-result-document-hit > a:hover { background-color: rgba(255,255,255,.05); }
.hs-search-panel .search-result-document-hit .search-result-section-title { color: #fff; }
.hs-search-panel .search-result-document-hit .search-result-highlight { color: var(--hs-green); background: rgba(76,200,239,.14); }

@media (max-width: 700px) {
  .navbar-brand .hs-search-toggle-mobile { display: inline-flex; }
  .navbar-menu .navbar-end > .hs-search-toggle { display: none; }

  /* Sixth Review (Lindsie, 2026-09-08): the Fifth Review reflow below used
     to live in platform.css, which ONLY the home layout loads (see
     head-styles.hbs vs. layouts/home.hbs) -- that's why it never reached
     content/KB pages. Moved here, to the 700px block that every page
     already loads via hammerspace.css, so it's consistent everywhere.
     Pure `order` reshuffle, nothing resized, header-content.hbs untouched.
     Hamburger's left margin nudged an additional 15px negative per her
     spec (was 0 in Fifth Review). */
  .navbar-brand { padding-right: 1rem; }
  .navbar-brand .navbar-burger { order: 1; margin-left: -15px; }
  .navbar-brand .hs-brand { order: 2; margin: 0 auto; }
  .navbar-brand .hs-search-toggle-mobile { order: 3; }

  /* Sixth Review: tighten the gap above the footer policy links -- .hs-foot's
     16px flex `gap` (footer, above) is what currently spaces the wrapped
     Privacy/Disclaimer row from the copyright row on phones; this negative
     margin nets out to 1px, i.e. "decrease by 15px" as asked. */
  .hs-foot-links { margin-top: -15px; }

  /* Seventh Review (2026-09-10): nudge the mobile search icon down so it
     lines up with the hamburger + logo row above. */
  .navbar-brand .hs-search-toggle-mobile { margin-top: .6rem; }

  /* Seventh Review: the Sixth Review persistent top-nav underline (see the
     .is-current::after rule near the top of this file) also renders on the
     same <a> elements when they're reused inside the expanded mobile
     hamburger menu -- hide it there only, desktop untouched. */
  .navbar .navbar-menu .navbar-end > a.navbar-item.is-current::after { display: none; }
}

/* ── Footer policy links (Privacy Policy / Disclaimer), biased right ─────────── */
.hs-foot-links { display: flex; gap: 1.4rem; font-size: .7rem; flex-wrap: wrap; }
.hs-foot-links a { color: #cfc8f0; }
.hs-foot-links a:hover { color: var(--hs-green); }

/* ============================================================
   Header geometry (2026-07) — center the bar's contents in the
   same 1180px band as the footer + landing cards, so the logo,
   nav, icons, page content and footer share one set of gutters
   and track together on resize. Layout: logo left, nav centered,
   the two icon buttons pinned to the band's right edge.
   ============================================================ */
@media screen and (min-width: 1024px) {
  .navbar {
    padding-left:  max(1.5rem, calc((100% - var(--hs-maxw)) / 2));
    padding-right: max(1.5rem, calc((100% - var(--hs-maxw)) / 2));
  }
  .navbar .navbar-brand { padding-left: 0; flex: 0 0 auto; }   /* logo at band's left edge, no grow */
  .navbar .navbar-menu  { flex: 1 1 auto; display: flex; }
  .navbar .navbar-end   { flex: 1 1 auto; align-items: center; justify-content: center; gap: .1rem; margin-left: 0; }
  .navbar .navbar-end > a.navbar-item:first-of-type { margin-left: auto; }  /* balance space before the tab group */
  .navbar .hs-search-toggle { margin-left: auto; }                          /* push the two icons to the right edge */
  .navbar .hs-allhs-item { padding-top: 0; padding-bottom: 0; display: flex; align-items: center; }
}

/* ============================================================
   Mobile burger menu (< 1024px)  (2026-07 mobile audit)
   Base site.css paints the collapsed nav dropdown white
   (.navbar-menu{background:#fff}); our top-bar nav text and the
   two icon controls are light, so on a phone/tablet they turned
   near-invisible on that white panel. Make the dropdown an
   extension of the black bar: dark surface, light rows with real
   tap targets, and give the search + launcher icons text labels
   so they read as menu rows instead of mystery squares. Desktop
   (>=1024px) is unaffected — the two controls stay icon-only and
   pinned right up there.
   ============================================================ */
@media screen and (max-width: 1023.5px) {
  /* dark dropdown, matching the top bar */
  .navbar .navbar-menu {
    background: var(--hs-bar-bg);
    box-shadow: 0 14px 28px rgba(0,0,0,.4);
    border-top: 1px solid rgba(255,255,255,.08);
    padding: .35rem 0 .75rem;
  }
  /* nav links -> full-width rows, comfortable height (light color inherited) */
  .navbar .navbar-menu .navbar-end > a.navbar-item {
    display: block;
    padding: .8rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .navbar .navbar-menu a.navbar-item:hover {
    background: rgba(255,255,255,.07) !important;
    color: #fff !important;
    box-shadow: none;
  }

  /* --- Search: full-width labeled row that opens the slide-out --- */
  .navbar .navbar-menu .hs-search-toggle {
    width: 100%; height: auto;
    justify-content: flex-start; gap: .7rem;
    margin: .35rem 0 0; padding: .8rem 1.25rem;
    border: 0; border-top: 1px solid rgba(255,255,255,.12);
    border-radius: 0; color: #e9e6f6;
  }
  .navbar .navbar-menu .hs-search-toggle:hover {
    background: rgba(255,255,255,.07); color: #fff;
  }
  .navbar .navbar-menu .hs-search-toggle .hs-ic { flex: none; }
  .navbar .navbar-menu .hs-search-toggle::after {
    content: "Search the docs";
    font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: .95rem;
  }

  /* --- All Hammerspace: labeled row that expands to inline dark links --- */
  .navbar .navbar-menu .hs-allhs-item { display: block; padding: 0; }
  .navbar .navbar-menu .allhs { display: block; position: static; }
  .navbar .navbar-menu .allhs > summary {
    width: 100%; height: auto;
    justify-content: flex-start; gap: .7rem;
    padding: .8rem 1.25rem;
    border: 0; border-top: 1px solid rgba(255,255,255,.12);
    border-radius: 0; color: #e9e6f6;
  }
  .navbar .navbar-menu .allhs[open] > summary { background: rgba(255,255,255,.04); }
  .navbar .navbar-menu .allhs > summary::after {
    content: "All Hammerspace"; display: inline;
    font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: .95rem;
    width: auto; height: auto; margin: 0; border: 0; transform: none;
  }
  .navbar .navbar-menu .allhs-grid { flex: none; }
  /* launcher menu -> inline dark sub-list (not a floating white card) */
  .navbar .navbar-menu .allhs-menu {
    position: static; background: transparent; box-shadow: none;
    min-width: 0; padding: 0 0 .3rem;
  }
  .navbar .navbar-menu .allhs-menu a {
    color: #cfc8f0 !important;
    padding: .6rem 1.25rem .6rem 2.85rem;   /* indented beneath the summary */
    border-radius: 0; font-size: .9rem;
  }
  .navbar .navbar-menu .allhs-menu a:hover {
    background: rgba(255,255,255,.07); color: #fff !important;
  }
}

/* Mobile (< 640px): trim content-table text a touch so wide guide tables fit and
   read better on phones (base site.css sets .833rem). Kept close to the
   desktop size — the page can already scroll sideways for anything still
   too wide (base site.css `main>.content{overflow-x:auto}`), so we lean on
   that instead of shrinking text further.  (2026-07 mobile audit; eased 2026-08) */
@media screen and (max-width: 640px) {
  .doc table.tableblock { font-size: .82rem; }
}

/* Small phones (< 380px) — the header wordmark and landing card titles get
   one more size step down for breathing room. The rules above already stop
   them from breaking mid-word; this just gives them a little more room to
   spare.  (2026-08 mobile audit) */
@media screen and (max-width: 380px) {
  .hs-word { font-size: 11px; }
  .hs-word small { font-size: 9px; }
  .hs-card-title { font-size: 0.9rem; }
}

/* Version-aware search: scope controls in the search panel */
.hs-search-scope { display: flex; align-items: center; gap: .5rem; margin: .5rem 2rem 0; font-size: .8rem; font-family: 'Montserrat', sans-serif; color: var(--hs-muted, #5b6472); cursor: pointer; user-select: none; }
.hs-search-scope input[type=checkbox] { margin: 0; cursor: pointer; flex: 0 0 auto; }
.hs-search-scope-note { margin-left: .35rem; opacity: .7; }
.hs-search-version { font: inherit; font-size: .8rem; padding: .1rem .35rem; border: 1px solid var(--hs-border, #d5d9e0); border-radius: 4px; background: #fff; color: inherit; cursor: pointer; }

/* ============================================================
   Tables and images: contained horizontal scroll + tap-to-enlarge.
   Previously a too-wide table made the WHOLE page scroll sideways
   (base site.css `main>.content{overflow-x:auto}`), dragging headings
   and body text along with it. `.tablecontainer` is a class the base
   theme already reserves spacing for but never populates -- footer-
   scripts.hbs wraps each table in one at runtime, and this gives that
   wrapper its own small scroll box instead. Tables and images both get
   a tap-to-enlarge icon (images are also tappable anywhere, since --
   unlike tables -- there's nothing inside one that a tap could break,
   like a link or a text selection). The enlarged view relies on the
   phone's own pinch-to-zoom and pan; nothing custom was needed for
   that part since the site's viewport meta tag never restricted it.
   (2026-08 mobile audit, round 3) */
.doc .tablecontainer {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  position: relative;
}
.doc .tablecontainer > table.tableblock {
  margin-top: 0;
}
.doc .imageblock.hs-zoomable .content {
  position: relative;
}
.doc .imageblock.hs-zoomable img {
  cursor: zoom-in;
}
.hs-zoom-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(34, 28, 53, .72);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.hs-zoom-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
/* Desktop (1024px+): the enlarge feature is off entirely -- no icon,
   no magnifier cursor. footer-scripts.hbs ignores clicks at this width
   too, so this is cosmetic-plus-belt-and-braces. (2026-09-24) */
@media (min-width: 1024px) {
  .hs-zoom-btn {
    display: none;
  }
  .doc .imageblock.hs-zoomable img {
    cursor: default;
  }
}
.hs-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 6, 20, .92);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 56px 16px 24px;
  text-align: center;
}
.hs-zoom-overlay[hidden] {
  display: none;
}
.hs-zoom-body {
  display: inline-block;
  text-align: left;
  max-width: none;
}
.hs-zoom-body.doc {
  max-width: none;
  margin: 0;
  padding: 0;
  hyphens: none;
}
.hs-zoom-overlay img {
  display: block;
  max-width: none;
  width: auto;
  height: auto;
}
.hs-zoom-overlay table.tableblock {
  background: #fff;
  font-size: 1rem;
}
.hs-zoom-overlay table.tableblock td,
.hs-zoom-overlay table.tableblock th {
  min-width: 180px;
}
.hs-zoom-close {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 201;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
body.hs-zoom-locked {
  overflow: hidden;
}


/* ═══════════════════════════════════════════════════════════════════════════
   UX REVIEW (Lindsie Winthrop, 2026-08-28) — Montserrat on all site chrome
   ───────────────────────────────────────────────────────────────────────────
   Agreed rule: Montserrat everywhere EXCEPT the body prose of a guide page.
   The baseline Antora ui-bundle sets Roboto on everything, so each piece of
   chrome needs an explicit override here. Guide prose (.doc paragraphs, lists,
   tables, code) is deliberately NOT listed — it stays Roboto.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Toolbar row: breadcrumbs, Download PDF, edit-this-page */
.toolbar,
.toolbar .breadcrumbs,
.toolbar .breadcrumbs ul,
.toolbar .breadcrumbs li,
.toolbar .breadcrumbs a,
.toolbar .download-pdf,
.toolbar .edit-this-page a { font-family: 'Montserrat', sans-serif; }

/* Breadcrumbs sit slightly high once they are Montserrat — nudge them down so
   the row reads as vertically centred again. */
.toolbar .breadcrumbs { margin-top: 5px; font-size: .75rem; }

/* Left navigation (page menu) */
.nav-menu,
.nav-menu .title,
.nav-menu .nav-link,
.nav-menu .nav-text,
.nav-menu .nav-list,
.nav-panel-explore .context .title,
.nav-panel-explore .components a { font-family: 'Montserrat', sans-serif; }

/* Right-hand "Contents" panel */
.toc .toc-menu a { font-family: 'Montserrat', sans-serif; }

/* Previous / Next pager */
.pagination,
.pagination a,
.pagination .prev,
.pagination .next { font-family: 'Montserrat', sans-serif; }

/* Footer */
footer.footer,
.hs-foot,
.hs-foot-brand,
.hs-foot-meta,
.hs-foot-meta a { font-family: 'Montserrat', sans-serif; }

/* Search slide-out input (its label and results are already Montserrat) */
.hs-search-panel #search-input { font-family: 'Montserrat', sans-serif; }

/* Section labels inside the All Hammerspace launcher, which now carries this
   site's own Downloads page above the off-site Hammerspace destinations. */
.navbar .allhs-sec {
  display: block;
  padding: 8px 13px 4px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #8f88ad;
}
.navbar .allhs-menu hr {
  border: 0; border-top: 1px solid #e6e2f0; margin: 5px 6px;
}

/* Launcher icon: a hamburger on desktop, but keep the ORIGINAL grid icon below
   1024px — down there the launcher is already a labelled row inside the real
   navbar burger's dropdown, and a second hamburger would sit directly beneath
   the first one and read as a duplicate control. */
.navbar .allhs-bars { width: 1.05rem; height: 1.05rem; flex: none; display: none; }
@media (min-width: 1024px) {
  .navbar .allhs-bars { display: block; }
  .navbar .allhs-grid { display: none; }
}

/* ============================================================
   Eighth Review (2026-09-16) — desktop chrome
   ============================================================ */

/* [S8] Pin the top bar and the footer to fixed side gutters.
   Until now both centred their contents inside a 1180px band
   (--hs-maxw), so on a wide monitor the logo, the two icon
   buttons and the footer's two ends all drifted inward as the
   window grew — the behaviour Lindsie flagged. Those four now
   hold the same margin at any width. The gutter is 1.5rem,
   which is the value the bar and footer already fell back to
   at narrower widths, so nothing below 1180px changes. */
@media screen and (min-width: 1024px) {
  .navbar {
    padding-left:  1.5rem;
    padding-right: 1.5rem;
  }
}
@supports (padding: max(0px)) {
  @media screen and (min-width: 1024px) {
    .navbar {
      padding-left:  max(1.5rem, env(safe-area-inset-left));
      padding-right: max(1.5rem, env(safe-area-inset-right));
    }
  }
}
.hs-foot { max-width: none; }

/* [S8] The purple-to-blue gradient line: along the top of the
   footer on every page, and -- until the ad hoc request below --
   along the bottom of the top bar as well. Same 4px gradient the
   landing hero uses (.hsp .hero-strip). */
footer.footer { position: relative; }
.navbar::after,
footer.footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, #390BA2 0%, #4CC8EF 100%);
  pointer-events: none;
}
footer.footer::before { top: 0; }

/* Ad hoc request (2026-09-18, Lindsie): hide the gradient strip under
   the top bar "for now" -- height 0 rather than display:none, so
   restoring it is a one-value change. The bar keeps its own 1px
   translucent hairline (defined with .navbar above), which the [S8]
   block had removed while the gradient stood in for it; without one
   or the other the bar would have no bottom edge at all. The
   footer's strip is unaffected -- only the bar's was queried. */
.navbar::after { bottom: 0; height: 0; }

/* [S8] "RELEASE" label beside the left-nav version dropdown on
   guide pages. The Seventh Review made .nav-book a column so the
   dropdown sits under the book title; the label and the dropdown
   now share that second row, with the label's left edge lined up
   with the title above it.
   [S9] (2026-09-21) The gap between the label and the dropdown
   came down from 25px to 10px, and the row gained 3px of left
   padding, per the Ninth Review. Edited in place rather than
   overridden further down the file so there is only ever one
   rule for this element. */
.nav-menu .nav-book .nav-book-release {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 3px;
}
.nav-menu .nav-book .nav-book-release-label {
  font-family: 'Montserrat', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hs-muted);
}


/* ============================================================
   Ninth Review (2026-09-21) — desktop chrome
   ============================================================ */

/* [S9] 10px of breathing room inside the fixed side gutters that
   [S8] pinned above: the logo lockup at the bar's left edge, and
   the two footer ends. Scoped to the desktop breakpoint on
   purpose -- her note on the navbar item reads "Do not adjust
   mobile", and the bar and footer are laid out completely
   differently below 1024px (burger, centred logo, negative
   margin on the policy links), so a base-level rule would leak
   into geometry three earlier rounds already tuned.
   .navbar .navbar-brand is set to padding-left:0 in the header
   geometry block above; this restates the same selector later in
   the file, so it wins on order at equal specificity. */
@media screen and (min-width: 1024px) {
  .navbar .navbar-brand { padding-left: 10px; }
  .hs-foot-meta         { padding-left: 10px; }
  .hs-foot-links        { padding-right: 10px; }
}