/*
 * hpc-header-canvas.css -- GENERATED, DO NOT EDIT.
 * Source: hpc-header.css   Generator: build/scope_header_css.py
 *
 * Every selector is scoped under .hpc-canvas-nav so the header can be injected into a
 * standalone canvas document (glossary / trend / category) without repainting it.
 * Edit hpc-header.css and re-run the generator.
 */

.hpc-canvas-nav {
  --hpc-bg: #070b14;
  --hpc-bg-soft: #0d1322;
  --hpc-panel: #0e1628;
  --hpc-panel-2: #121c31;
  --hpc-panel-3: #16233d;
  --hpc-text: #f3f5fb;
  --hpc-text-soft: rgba(243, 245, 251, 0.78);
  --hpc-text-muted: rgba(243, 245, 251, 0.56);
  --hpc-text-faint: rgba(243, 245, 251, 0.38);
  --hpc-line: rgba(243, 245, 251, 0.10);
  --hpc-line-strong: rgba(243, 245, 251, 0.16);
  --hpc-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
  --hpc-shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.26);
  --hpc-gold: #f2c14e;
  --hpc-green: #57d39b;
  --hpc-max: 1440px;
  --hpc-mega-max: 1680px;
  --hpc-pad: clamp(20px, 2.6vw, 40px);
  --hpc-radius-sm: 10px;
  --hpc-radius-md: 16px;
  --hpc-radius-lg: 22px;
  --hpc-radius-xl: 28px;
  --hpc-font-sans: "DM Sans", system-ui, sans-serif;
  --hpc-font-display: "Fraunces", Georgia, serif;
  --hpc-font-brand: "Montserrat", var(--hpc-font-sans);
  --hpc-font-mono: "JetBrains Mono", ui-monospace, monospace;
  /* Wordmark only -- the masthead brand lockup's "Hi Performance Culture" and
     the badge's own hand-set H·P·C. Not --hpc-font-display: that token stays
     Fraunces for article/mega-panel headings, a different voice on purpose. */
  --hpc-font-wordmark: "Bodoni Moda", Georgia, serif;

  /* Exact brand maize from the final badge (design-options/logo-final/logo.svg),
     kept distinct from the --maize-* accent ramp below (#f2c14e, the site's
     existing hover/active gold): the interpunct dots must match the badge's own
     sun circles pixel-for-pixel, not the nav's older accent colour. */
  --hpc-maize: #FFCB05;

  /* ── Maize accent system (nav-gold #f2c14e = 242,193,78) ── */
  --maize-rgb: 242,193,78;
  --maize-95: rgba(242,193,78,0.95);
  --maize-80: rgba(242,193,78,0.80);
  --maize-60: rgba(242,193,78,0.60);
  --maize-50: rgba(242,193,78,0.50);
  --maize-35: rgba(242,193,78,0.35);
  --maize-25: rgba(242,193,78,0.25);
  --maize-20: rgba(242,193,78,0.20);
  --maize-12: rgba(242,193,78,0.12);
  --maize-10: rgba(242,193,78,0.10);
  --maize-08: rgba(242,193,78,0.08);
  --maize-06: rgba(242,193,78,0.06);
  --maize-04: rgba(242,193,78,0.04);

  /* ── Timing tokens ── */
  --t-fast: 120ms;
  --t-mid: 220ms;
  --t-slow: 360ms;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

.hpc-canvas-nav, .hpc-canvas-nav *, .hpc-canvas-nav *::before, .hpc-canvas-nav *::after {
  box-sizing: border-box;
}

.hpc-canvas-nav img, .hpc-canvas-nav svg {
  display: block;
  max-width: 100%;
}

.hpc-canvas-nav a {
  color: inherit;
  text-decoration: none;
}

.hpc-canvas-nav button {
  font: inherit;
  color: inherit;
}

.hpc-canvas-nav .contain {
  width: min(var(--hpc-max), calc(100vw - (var(--hpc-pad) * 2)));
  margin: 0 auto;
}

.hpc-canvas-nav .skip-link {
  position: absolute;
  top: -120px;
  left: 16px;
  z-index: 1000;
  padding: 10px 14px;
  background: var(--hpc-gold);
  color: #08101f;
  border-radius: 999px;
  font: 700 11px/1 var(--hpc-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hpc-canvas-nav .skip-link:focus {
  top: 12px;
}

.hpc-canvas-nav *:focus-visible {
  outline: 2px solid rgba(242, 193, 78, 0.92);
  outline-offset: 3px;
}

.hpc-canvas-nav :focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {

  .hpc-canvas-nav .mega, .hpc-canvas-nav .mobile-menu, .hpc-canvas-nav .mobile-overlay, .hpc-canvas-nav .mobile-nav__panel {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
    }

  .hpc-canvas-nav .mega__spotlight {
      display: none !important;
    }

  .hpc-canvas-nav .nav__trigger, .hpc-canvas-nav .nav__cta, .hpc-canvas-nav .nav__tools-link, .hpc-canvas-nav .mega__sub, .hpc-canvas-nav .mega__feat-card, .hpc-canvas-nav .mega__feat-tool, .hpc-canvas-nav .mega__feat-item, .hpc-canvas-nav .mobile-nav__trigger, .hpc-canvas-nav .mobile-nav__feature, .hpc-canvas-nav .mobile-nav__link, .hpc-canvas-nav .mobile-nav__hub, .hpc-canvas-nav .mobile-menu__start {
      transition-duration: 80ms !important;
    }

  .hpc-canvas-nav .mega__cover:hover .mega__cover-photo {
      transform: none !important;
    }

  .hpc-canvas-nav .mega__id--canon, .hpc-canvas-nav .mega__content--canon, .hpc-canvas-nav .mega__feat--canon, .hpc-canvas-nav .mega__sub, .hpc-canvas-nav .mega__sub-arrow, .hpc-canvas-nav .mega__hub-guide-arrow, .hpc-canvas-nav .mega__feat-hub-arrow, .hpc-canvas-nav .mega__cover-cta, .hpc-canvas-nav .nav__trigger::after, .hpc-canvas-nav .nav__trigger::before {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      transition-delay: 0s !important;
    }

}

.hpc-canvas-nav [data-cat="bio"] { --cat-rgb: 115, 177, 145; --cat-hex: #73b191; }

.hpc-canvas-nav [data-cat="flow"] { --cat-rgb: 96, 165, 250; --cat-hex: #60a5fa; }

.hpc-canvas-nav [data-cat="decisions"] { --cat-rgb: 204, 192, 111; --cat-hex: #ccc06f; }

.hpc-canvas-nav [data-cat="learning"] { --cat-rgb: 152, 140, 181; --cat-hex: #988cb5; }

.hpc-canvas-nav [data-cat="habits"] { --cat-rgb: 150, 166, 122; --cat-hex: #96a67a; }

.hpc-canvas-nav [data-cat="identity"] { --cat-rgb: 184, 136, 146; --cat-hex: #b88892; }

.hpc-canvas-nav [data-cat="leadership"] { --cat-rgb: 136, 152, 160; --cat-hex: #8898a0; }

.hpc-canvas-nav [data-cat="arena"] { --cat-rgb: 196, 115, 88; --cat-hex: #c47358; }

.hpc-canvas-nav [data-cat="nutrition"] { --cat-rgb: 106, 162, 204; --cat-hex: #6aa2cc; }

.hpc-canvas-nav [data-cat="connection"] { --cat-rgb: 201, 155, 180; --cat-hex: #c99bb4; }

/* The live taxonomy slugs are `nutri` and `social`; the two rules above use the
   planned slugs `nutrition`/`connection`, which match nothing. Same mismatch that
   404'd every /nutrition/* and /connection/* link. Aliased rather than renamed so
   any markup still emitting the old slug keeps its colour. */

.hpc-canvas-nav [data-cat="nutri"] { --cat-rgb: 106, 162, 204; --cat-hex: #6aa2cc; }

.hpc-canvas-nav [data-cat="social"] { --cat-rgb: 201, 155, 180; --cat-hex: #c99bb4; }

.hpc-canvas-nav .hpc-header {
  position: relative;
  z-index: 80;
}

.hpc-canvas-nav .masthead {
  position: relative;
  z-index: 5;
  border-bottom: 1px solid var(--hpc-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent),
    var(--hpc-bg);
}

.hpc-canvas-nav .masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 42px;
}

.hpc-canvas-nav .masthead__left, .hpc-canvas-nav .masthead__right {
  display: flex;
  align-items: center;
  min-width: 0;
}

.hpc-canvas-nav .masthead__left {
  gap: 0;
}

.hpc-canvas-nav .masthead__right {
  gap: 10px;
  justify-content: flex-end;
}

.hpc-canvas-nav .masthead__seg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding-inline: 14px;
  white-space: nowrap;
  border-right: 1px solid rgba(243, 245, 251, 0.08);
}

.hpc-canvas-nav .masthead__seg:first-child {
  padding-left: 0;
}

.hpc-canvas-nav .masthead__seg:last-child {
  border-right: 0;
}

.hpc-canvas-nav .masthead__date {
  color: var(--hpc-text-soft);
  font-size: 12px;
  font-weight: 500;
}

.hpc-canvas-nav .masthead__weather svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.hpc-canvas-nav .masthead__weather-temp {
  color: var(--hpc-text);
  font: 600 11px/1 var(--hpc-font-mono);
  letter-spacing: -0.02em;
}

.hpc-canvas-nav .masthead__sun {
  gap: 10px;
}

.hpc-canvas-nav .masthead__sun-rise, .hpc-canvas-nav .masthead__sun-set {
  color: var(--hpc-text-muted);
  font: 500 11px/1 var(--hpc-font-mono);
}

.hpc-canvas-nav .masthead__sun-rise::before, .hpc-canvas-nav .masthead__sun-set::before {
  display: inline-block;
  margin-right: 4px;
}

.hpc-canvas-nav .masthead__sun-rise::before {
  content: "↑";
  color: rgba(242, 193, 78, 0.96);
}

.hpc-canvas-nav .masthead__sun-set::before {
  content: "↓";
  color: rgba(220, 144, 107, 0.96);
}

.hpc-canvas-nav .masthead__feature {
  display: grid;
  align-items: center;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  min-width: 0;
  max-width: min(520px, 42vw);
  padding: 7px 14px;
  border: 1px solid rgba(243, 245, 251, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.hpc-canvas-nav .masthead__feature:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(243, 245, 251, 0.16);
  transform: translateY(-1px);
}

.hpc-canvas-nav .masthead__feature-top {
  display: flex;
  align-items: center;
}

.hpc-canvas-nav .masthead__feature-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--hpc-text);
  font-size: 12px;
  font-weight: 600;
}

.hpc-canvas-nav .masthead__feature-meta {
  color: var(--hpc-text-faint);
  font: 500 10px/1 var(--hpc-font-mono);
  white-space: nowrap;
}

.hpc-canvas-nav .masthead__search {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(243, 245, 251, 0.09);
  border-radius: 999px;
  color: var(--hpc-text-soft);
  background: rgba(255, 255, 255, 0.02);
  font-size: 12px;
  font-weight: 500;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.hpc-canvas-nav .masthead__search:hover {
  color: var(--hpc-text);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(243, 245, 251, 0.18);
}

.hpc-canvas-nav .masthead__search svg {
  width: 14px;
  height: 14px;
}

/* ── Sticky header ──────────────────────────────────────────────────────
   The nav used to declare position:sticky itself, which never worked: its
   containing block is header.hpc-header (119px), so it had 43px of travel and
   then scrolled away on every page. The sticky has to live on the header, whose
   containing block is the body.
   The negative top equals the masthead height, so the date/weather row scrolls
   out of view and the nav row alone pins at y=0 -- no JS, no layout shift, no
   collapse animation. hpc-header.js measures the masthead and keeps
   --hpc-masthead-h exact; the values in the breakpoints below are the no-JS
   fallback (law 5: the page must read whole without script).
   On canvas pages the header sits inside the .hpc-canvas-nav wrapper, whose
   height is the header's, so there is no travel and those 323 pages keep their
   current behaviour -- deliberately: each canvas document has its own top:0
   sticky bar (.sense-index z5, .masthead z40, .cnav z30) that this header would
   otherwise cover. Making it sticky there needs those bars offset first. */

.hpc-canvas-nav header.hpc-header {
  position: sticky;
  top: calc(-1 * var(--hpc-masthead-h, 43px));
  z-index: 90;
}

.hpc-canvas-nav .nav {
  position: relative;
  z-index: 90;
  isolation: isolate;
  /* Opaque base on the ELEMENT, with the ::before gradient as a sheen on top.
     WPCode snippet 7470 used to supply this (`.nav{background:rgba(5,8,16,.96)}`)
     and it was deleted 2026-07-30 once its geometry rules moved into this file --
     but its background was doing real work: the gradient alone ends at 0.93, so
     ~7% of the article bled through the strip's lower edge once it was sticky.
     Canvas pages never received 7470 and had that bleed all along; putting the
     base here fixes both surfaces and keeps it version-controlled. */
  background: rgb(8, 13, 24);
}

.hpc-canvas-nav .nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(8, 13, 24, 0.99), rgba(8, 13, 24, 0.97));
  border-bottom: 1px solid rgba(243, 245, 251, 0.08);
}

.hpc-canvas-nav .nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(243, 245, 251, 0.08), transparent);
  z-index: -1;
}

.hpc-canvas-nav .nav.scrolled::before {
  background:
    linear-gradient(180deg, rgba(10, 16, 30, 0.98), rgba(8, 13, 24, 0.94));
}

.hpc-canvas-nav .nav.has-open::before {
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

.hpc-canvas-nav .nav__bar {
  width: min(1720px, calc(100vw - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 76px;
}

/* ── Brand lockup: badge + hand-set wordmark ──────────────────────────────
   Reference implementation: design-options/gen_breach_finalists.py masthead()
   + its .mast-w/.wd/.wd-stop CSS. Shared between .nav__logo (desktop bar) and
   .mobile-menu__brand (drawer header) via the .hpc-brand-* classes so both
   surfaces stay pixel-identical without duplicating rules. */

.hpc-canvas-nav .nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.hpc-canvas-nav .hpc-brand-badge {
  display: block;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
}

.hpc-canvas-nav .hpc-brand-word {
  display: inline-flex;
  align-items: center;
  font: 400 19px/1 var(--hpc-font-wordmark);
  letter-spacing: 0.01em;
  color: var(--hpc-text);
  white-space: nowrap;
}

/* Hand-set interpunct, not a font glyph: a styled circle at cap optical
   middle between each word, echoing the badge's own H·P·C dots. */

.hpc-canvas-nav .hpc-brand-dot {
  display: inline-block;
  width: 3.5px;
  height: 3.5px;
  margin: 0 8px;
  border-radius: 50%;
  background: var(--hpc-maize);
  vertical-align: middle;
  transform: translateY(-2px);
}

/* The terminal dot is the full stop, not another interpunct: it sits on the
   baseline with no optical lift and a tighter lead-in. */

.hpc-canvas-nav .hpc-brand-dot--stop {
  margin: 0 0 0 5px;
  vertical-align: baseline;
  transform: none;
}

.hpc-canvas-nav .nav__links {
  display: flex;
  align-items: center;
  /* NOT centre: the ten pillars need ~1278px and have 850px at 1280, and a
     centred flex row spills out BOTH sides -- the left overflow is unreachable
     because scrollLeft cannot go negative, so "Bio" was invisible and "Flow"
     showed only its tail. flex-start sends all overflow to one reachable side;
     the condensing queries below then make it fit rather than overflow.
     Ported from WPCode snippet 7470, which fixed this for Kadence pages only:
     it runs through wp_head(), which the 323 canvas pages bypass, so Bio/Flow/
     Connection were still being hidden there at 1280 and 1440. In the plugin
     the rule reaches both surfaces and flows into the scoped canvas stylesheet.
     7470's background rules are NOT ported -- the opaque .nav::before grounds
     above supersede them. */
  justify-content: flex-start;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hpc-canvas-nav .nav__links::-webkit-scrollbar {
  display: none;
}

.hpc-canvas-nav .nav__item {
  position: static;
}

.hpc-canvas-nav .nav__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--hpc-text-soft);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 180ms ease, background 180ms ease;
}

.hpc-canvas-nav .nav__trigger::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 7px;
  height: 1px;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: center;
  background: rgba(var(--cat-rgb, 255, 255, 255), 0.92);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}

.hpc-canvas-nav .nav__item.open .nav__trigger, .hpc-canvas-nav .nav__trigger:hover, .hpc-canvas-nav .nav__trigger:focus-visible, .hpc-canvas-nav .nav__trigger.is-current {
  background: rgba(255, 255, 255, 0.035);
  color: var(--hpc-text);
}

.hpc-canvas-nav .nav__item.open .nav__trigger::after, .hpc-canvas-nav .nav__trigger:hover::after, .hpc-canvas-nav .nav__trigger:focus-visible::after, .hpc-canvas-nav .nav__trigger.is-current::after {
  transform: scaleX(1);
}

/* [v22] Active trigger category glow */

.hpc-canvas-nav .nav__item.open .nav__trigger::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 10px;
  background: radial-gradient(ellipse, rgba(var(--cat-rgb,255,255,255),0.18), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.hpc-canvas-nav .nav-icon, .hpc-canvas-nav .mobile-nav__title-row svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* Category-coloured icons in trigger row */

.hpc-canvas-nav .nav-icon {
  color: var(--cat-hex, var(--hpc-text-faint));
  opacity: 0.78;
  transition: opacity 180ms ease;
}

.hpc-canvas-nav .nav__item.open .nav-icon, .hpc-canvas-nav .nav__trigger:hover .nav-icon, .hpc-canvas-nav .nav__trigger.is-current .nav-icon {
  opacity: 1;
}

.hpc-canvas-nav .nav__chev {
  width: 10px;
  height: 10px;
  color: var(--hpc-text-faint);
  transition: transform 180ms ease, color 180ms ease;
}

.hpc-canvas-nav .nav__item.open .nav__chev {
  transform: rotate(180deg);
  color: var(--hpc-text-soft);
}

.hpc-canvas-nav .nav__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.hpc-canvas-nav .nav__tools-link, .hpc-canvas-nav .nav__cta, .hpc-canvas-nav .mobile-nav__hub, .hpc-canvas-nav .mobile-menu__start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.hpc-canvas-nav .nav__tools-link {
  border: 1px solid rgba(243, 245, 251, 0.10);
  color: var(--hpc-text-soft);
  background: rgba(255, 255, 255, 0.02);
}

.hpc-canvas-nav .nav__tools-link:hover {
  border-color: rgba(243, 245, 251, 0.18);
  background: rgba(255, 255, 255, 0.05);
  color: var(--hpc-text);
}

.hpc-canvas-nav .nav__tools-link svg {
  width: 14px;
  height: 14px;
}

.hpc-canvas-nav .nav__cta, .hpc-canvas-nav .mobile-menu__start {
  border: 1px solid rgba(242, 193, 78, 0.24);
  color: #08101f;
  background: linear-gradient(180deg, #f6d273, #e8ba43);
  box-shadow: 0 14px 28px rgba(232, 186, 67, 0.18);
}

.hpc-canvas-nav .nav__cta:hover, .hpc-canvas-nav .mobile-menu__start:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 30px rgba(232, 186, 67, 0.22);
}

.hpc-canvas-nav .hamburger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(243, 245, 251, 0.10);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
}

.hpc-canvas-nav .hamburger span {
  display: block;
  width: 16px;
  height: 1.5px;
  margin: 0 auto 4px;
  background: var(--hpc-text);
  border-radius: 999px;
  transition: transform 160ms ease, opacity 160ms ease;
}

.hpc-canvas-nav .hamburger span:last-child {
  margin-bottom: 0;
}

.hpc-canvas-nav .mega {
  position: absolute;
  left: 50%;
  top: calc(100% - 1px);
  width: min(1600px, calc(100vw - (var(--hpc-pad) * 2)));
  padding-top: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 140ms ease, visibility 140ms ease, transform 180ms var(--ease);
}

.hpc-canvas-nav .nav__item.open .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 280ms var(--ease), visibility 280ms var(--ease), transform 360ms var(--ease-out);
}

.hpc-canvas-nav .mega__glass {
  position: relative;
  overflow: hidden;
}

.hpc-canvas-nav .mega__bg {
  position: relative;
}

.hpc-canvas-nav .mega__spotlight, .hpc-canvas-nav .mega__floor {
  pointer-events: none;
}

/* mega__noise is styled in the canon overlay section *//* ── Shared rules (mobile + desktop fallback) ── */

.hpc-canvas-nav .mobile-nav__number {
  color: rgba(var(--cat-rgb, 255, 255, 255), 0.86);
  font: 700 11px/1 var(--hpc-font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hpc-canvas-nav .mobile-nav__hub {
  color: var(--hpc-text);
  border: 1px solid rgba(243, 245, 251, 0.10);
  background: rgba(255, 255, 255, 0.03);
}

.hpc-canvas-nav .mobile-nav__hub:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(243, 245, 251, 0.18);
}

.hpc-canvas-nav .mobile-nav__link-main { min-width: 0; }

.hpc-canvas-nav .mobile-nav__feature-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  color: var(--hpc-text-faint);
  font: 500 10px/1.4 var(--hpc-font-mono);
  letter-spacing: 0.05em;
}

.hpc-canvas-nav .mobile-nav__link-arrow {
  color: rgba(var(--cat-rgb, 255, 255, 255), 0.86);
  font-size: 18px;
}

.hpc-canvas-nav .mobile-nav__feature:hover, .hpc-canvas-nav .mobile-nav__link:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(243, 245, 251, 0.16);
}

.hpc-canvas-nav .mobile-nav__feature-title, .hpc-canvas-nav .mobile-nav__link-title {
  color: var(--hpc-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.hpc-canvas-nav .hpc-chip-row, .hpc-canvas-nav .mobile-nav__link-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hpc-canvas-nav .hpc-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border: 1px solid rgba(243, 245, 251, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--hpc-text-soft);
  font: 600 9px/1 var(--hpc-font-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.hpc-canvas-nav .hpc-chip--mini {
  min-height: 20px;
  padding-inline: 8px;
  font-size: 8px;
}

.hpc-canvas-nav .hpc-chip--status-live {
  border-color: rgba(87, 211, 155, 0.28);
  color: #7de3b2;
  background: rgba(87, 211, 155, 0.10);
}

.hpc-canvas-nav .hpc-chip--status-in-progress {
  border-color: rgba(242, 193, 78, 0.28);
  color: #f3cf72;
  background: rgba(242, 193, 78, 0.09);
}

.hpc-canvas-nav .hpc-chip--status-coming-soon {
  border-color: rgba(243, 245, 251, 0.10);
  color: var(--hpc-text-muted);
}

.hpc-canvas-nav .hpc-chip--type-guide, .hpc-canvas-nav .hpc-chip--type-assessment, .hpc-canvas-nav .hpc-chip--type-protocol, .hpc-canvas-nav .hpc-chip--type-tool, .hpc-canvas-nav .hpc-chip--type-latest-research, .hpc-canvas-nav .hpc-chip--type-science-deep-dive, .hpc-canvas-nav .hpc-chip--type-glossary, .hpc-canvas-nav .hpc-chip--type-news {
  color: rgba(var(--cat-rgb, 255, 255, 255), 0.92);
  border-color: rgba(var(--cat-rgb, 255, 255, 255), 0.20);
  background: rgba(var(--cat-rgb, 255, 255, 255), 0.08);
}

.hpc-canvas-nav .mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 119;
  opacity: 0;
  background: rgba(4, 7, 13, 0.90);
  transition: opacity 200ms ease;
}

.hpc-canvas-nav .mobile-overlay.open {
  opacity: 1;
}

.hpc-canvas-nav .mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 120;
  width: min(100vw, 460px);
  height: 100dvh;
  padding: 18px;
  background: linear-gradient(180deg, #09101d 0%, #0d1526 100%);
  border-left: 1px solid rgba(243, 245, 251, 0.08);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.36);
  transform: translateX(100%);
  transition: transform 220ms ease;
}

.hpc-canvas-nav .mobile-menu.open {
  transform: translateX(0);
}

.hpc-canvas-nav .mobile-menu__body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  min-height: calc(100dvh - 36px);
}

.hpc-canvas-nav .mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(243, 245, 251, 0.08);
}

.hpc-canvas-nav .mobile-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(243, 245, 251, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--hpc-text-soft);
}

.hpc-canvas-nav .mobile-nav {
  overflow: auto;
  padding-right: 2px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.hpc-canvas-nav .mobile-nav__section {
  border-bottom: 1px solid rgba(243, 245, 251, 0.08);
}

.hpc-canvas-nav .mobile-nav__trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.hpc-canvas-nav .mobile-nav__trigger-main, .hpc-canvas-nav .mobile-nav__title-wrap, .hpc-canvas-nav .mobile-nav__panel-inner {
  display: grid;
  gap: 8px;
}

.hpc-canvas-nav .mobile-nav__title {
  color: var(--hpc-text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hpc-canvas-nav .mobile-nav__chev {
  color: var(--hpc-text-faint);
  transition: transform 180ms ease;
}

.hpc-canvas-nav .mobile-nav__section.open .mobile-nav__chev {
  transform: rotate(180deg);
}

.hpc-canvas-nav .mobile-nav__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-mid) var(--ease);
  overflow: hidden;
}

.hpc-canvas-nav .mobile-nav__section.open .mobile-nav__panel {
  grid-template-rows: 1fr;
  padding-bottom: 18px;
}

.hpc-canvas-nav .mobile-nav__panel[hidden] {
  display: grid;
  grid-template-rows: 0fr;
}

.hpc-canvas-nav .mobile-nav__panel-inner {
  overflow: hidden;
  min-height: 0;
}

.hpc-canvas-nav .mobile-nav__panel-inner {
  gap: 14px;
}

/* The drawer carries the same device as the desktop panel: name, leader rule,
   real count. Rounded pill rows were the one default-looking element in the
   system and they hid the count, which is the concept. Row height stays >=44px. */

.hpc-canvas-nav .mobile-nav__feature, .hpc-canvas-nav .mobile-nav__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 13px 2px;
  border: 0;
  border-bottom: 1px solid var(--hpc-line);
  border-radius: 0;
  background: none;
  min-height: 44px;
}

.hpc-canvas-nav .mobile-nav__link:last-child { border-bottom: 0; }

.hpc-canvas-nav .mobile-nav__leader {
  align-self: end;
  height: 0;
  margin-bottom: 5px;
  border-bottom: 1px dotted var(--hpc-line-strong);
  opacity: .8;
}

.hpc-canvas-nav .mobile-nav__link-count {
  font: 500 13px/1 var(--hpc-font-mono);
  letter-spacing: .02em;
  color: var(--hpc-text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
  text-align: right;
}

.hpc-canvas-nav .mobile-nav__link--empty .mobile-nav__link-title { color: var(--hpc-text-muted); }

.hpc-canvas-nav .mobile-nav__link--empty .mobile-nav__leader { opacity: .45; }

.hpc-canvas-nav .mobile-nav__hub {
  width: 100%;
}

.hpc-canvas-nav .notice.notice-warning {
  width: min(var(--hpc-max), calc(100vw - (var(--hpc-pad) * 2)));
  margin: 16px auto 0;
  padding: 14px 16px;
  border: 1px solid rgba(242, 193, 78, 0.18);
  border-radius: 16px;
  background: rgba(242, 193, 78, 0.08);
  color: var(--hpc-text-soft);
}

.hpc-canvas-nav .nav__item.is-current .nav__trigger, .hpc-canvas-nav .mobile-nav__section.is-current > .mobile-nav__trigger {
  color: var(--hpc-text);
}

.hpc-canvas-nav .is-current, .hpc-canvas-nav .is-current-parent {
  position: relative;
}

@media (max-width: 1279px) {

  .hpc-canvas-nav .nav__bar { gap: 12px; }

  .hpc-canvas-nav .nav__trigger { padding-inline: 8px; font-size: 12px; gap: 4px; }

  .hpc-canvas-nav .nav__trigger .nav-icon { width: 15px; height: 15px; opacity: 0.82; }

  .hpc-canvas-nav .nav__trigger::after { left: 8px; right: 8px; }

  .hpc-canvas-nav .masthead__feature { max-width: 360px; }

  .hpc-canvas-nav .nav__tools-link { display: none; }

  .hpc-canvas-nav .nav__cta { padding: 10px 16px; letter-spacing: 1.5px; }

  .hpc-canvas-nav .mega__inner--canon { grid-template-columns: 280px 1fr 180px 180px; gap: 16px; padding: 24px 28px; }

  .hpc-canvas-nav .mega__cat-num { font-size: 30px; }

  .hpc-canvas-nav .mega__cat-name { font-size: 16px; }

  .hpc-canvas-nav .mega__cover { min-height: 280px; }

  .hpc-canvas-nav .mega__cover-body { padding: 16px; }

  .hpc-canvas-nav .mega__feat-title { font-size: 15px; }

  .hpc-canvas-nav .mega__feat-item-title { font-size: 13px; }

  .hpc-canvas-nav .mega__feat-item--primary .mega__feat-item-title { font-size: 14px; }

}

/* Below 1728px the ten pillars do not fit at full size -- condense, don't clip.
   The icons are decorative (aria-hidden), so dropping them costs no meaning. */

@media (max-width: 1727px) {

  .hpc-canvas-nav .nav__links { gap: 2px; }

  .hpc-canvas-nav .nav__links .nav__trigger { padding-left: 8px; padding-right: 8px; letter-spacing: 0; }

  .hpc-canvas-nav .nav__links .nav-icon { display: none; }

}

@media (max-width: 1439px) {

  .hpc-canvas-nav .nav__links { gap: 0; }

  .hpc-canvas-nav .nav__links .nav__trigger { font-size: 11.5px; padding-left: 5px; padding-right: 5px; }

}

@media (max-width: 1023px) {

  .hpc-canvas-nav .masthead__inner {
      min-height: 40px;
    }

  .hpc-canvas-nav .masthead__date, .hpc-canvas-nav .masthead__weather-temp, .hpc-canvas-nav .masthead__sun-rise, .hpc-canvas-nav .masthead__sun-set {
      font-size: 10px;
    }

  .hpc-canvas-nav .masthead__feature {
      max-width: 280px;
    }

  .hpc-canvas-nav header.hpc-header {
      --hpc-masthead-h: 95px;
    }

  .hpc-canvas-nav .nav__links {
      display: none;
    }

  .hpc-canvas-nav .nav__cta {
      display: none;
    }

  .hpc-canvas-nav .hamburger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

  .hpc-canvas-nav .mega {
      display: none;
    }

}

@media (min-width: 1024px) {

  .hpc-canvas-nav .mobile-menu, .hpc-canvas-nav .mobile-overlay {
      display: none !important;
    }

}

@media (max-width: 900px) {

  .hpc-canvas-nav .masthead__inner {
      flex-wrap: wrap;
      gap: 0;
      padding-block: 6px;
    }

  .hpc-canvas-nav .masthead__left, .hpc-canvas-nav .masthead__right {
      width: 100%;
      justify-content: space-between;
    }

  .hpc-canvas-nav .masthead__right {
      padding-top: 6px;
    }

  .hpc-canvas-nav .masthead__feature {
      max-width: none;
      flex: 1 1 auto;
    }

}

@media (max-width: 720px) {

  .hpc-canvas-nav .contain, .hpc-canvas-nav .nav__bar, .hpc-canvas-nav .notice.notice-warning {
      width: calc(100vw - 32px);
    }

  .hpc-canvas-nav .masthead__left {
      display: grid;
      grid-template-columns: auto auto;
      justify-content: start;
      gap: 0;
      width: 100%;
    }

  .hpc-canvas-nav .masthead__seg {
      min-height: 34px;
      padding-inline: 10px;
    }

  .hpc-canvas-nav .masthead__seg:first-child {
      grid-column: 1 / -1;
      padding-left: 0;
    }

  .hpc-canvas-nav .masthead__right {
      width: 100%;
      gap: 8px;
      align-items: stretch;
    }

  .hpc-canvas-nav .masthead__feature {
      grid-template-columns: 1fr;
      gap: 6px;
      padding: 10px 12px;
      border-radius: 18px;
    }

  .hpc-canvas-nav .masthead__feature-meta {
      white-space: normal;
    }

  .hpc-canvas-nav .masthead__search {
      min-width: 42px;
      padding-inline: 12px;
      font-size: 0;
    }

  .hpc-canvas-nav .masthead__search svg {
      margin: 0;
    }

  .hpc-canvas-nav .nav__bar {
      min-height: 68px;
    }

  .hpc-canvas-nav .nav__logo {
      min-width: 0;
    }

  .hpc-canvas-nav .hpc-brand-badge {
      width: 22px;
      height: 22px;
    }

  .hpc-canvas-nav .hpc-brand-word {
      font-size: 16px;
    }

  .hpc-canvas-nav .hpc-brand-dot {
      width: 3px;
      height: 3px;
      margin: 0 6px;
      transform: translateY(-1.5px);
    }

  .hpc-canvas-nav .hpc-brand-dot--stop {
      margin: 0 0 0 4px;
    }

  .hpc-canvas-nav .mobile-menu {
      width: 100vw;
      padding: 16px;
    }

  .hpc-canvas-nav .mobile-menu__body {
      min-height: calc(100dvh - 32px);
    }

}

@media (max-width: 560px) {

  .hpc-canvas-nav .masthead__left {
      grid-template-columns: 1fr;
    }

  .hpc-canvas-nav .masthead__seg {
      border-right: 0;
      border-bottom: 1px solid rgba(243, 245, 251, 0.08);
      padding-left: 0;
    }

  .hpc-canvas-nav .masthead__seg:last-child {
      border-bottom: 0;
    }

  .hpc-canvas-nav .masthead__right {
      padding-top: 10px;
    }

  .hpc-canvas-nav .mobile-nav__trigger {
      padding-block: 16px;
    }

  .hpc-canvas-nav .mobile-nav__title {
      font-size: 16px;
    }

}

@media (forced-colors: active) {

  .hpc-canvas-nav .mega__sub, .hpc-canvas-nav .mega__feat-card, .hpc-canvas-nav .mega__feat-tool, .hpc-canvas-nav .mobile-nav__feature, .hpc-canvas-nav .mobile-nav__link, .hpc-canvas-nav .mobile-nav__hub {
      border-color: ButtonBorder !important;
      background: Canvas !important;
      color: CanvasText !important;
      box-shadow: none !important;
    }

  .hpc-canvas-nav .mega__sub.is-current, .hpc-canvas-nav .mega__sub.is-current-parent, .hpc-canvas-nav .nav__item.open .nav__trigger, .hpc-canvas-nav .nav__trigger.is-current, .hpc-canvas-nav .mobile-nav__section.is-current > .mobile-nav__trigger {
      outline: 2px solid Highlight;
      outline-offset: 2px;
    }

}

/* ==========================================
   STAGE 2 DESKTOP CANONICAL OVERRIDE LAYER
   ========================================== */

.hpc-canvas-nav .mega__glass {
  overflow: hidden;
  border: 1px solid rgba(var(--cat-rgb,255,255,255),0.14);
  border-radius: 20px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 -1px 0 rgba(0,0,0,0.25) inset,
    0 4px 12px rgba(0,0,0,0.28),
    0 12px 36px rgba(0,0,0,0.24),
    0 32px 80px rgba(0,0,0,0.32),
    0 0 120px -20px rgba(var(--cat-rgb,255,255,255),0.14);
}

/* Inner border ring — double-border glass effect */

.hpc-canvas-nav .mega__glass::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
  border: 1px solid rgba(var(--cat-rgb,255,255,255),0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.18);
}

/* Top edge light streak */

.hpc-canvas-nav .mega__glass::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(90deg, transparent 5%, rgba(var(--cat-rgb,255,255,255),0.28) 25%, rgba(255,255,255,0.14) 50%, rgba(var(--cat-rgb,255,255,255),0.28) 75%, transparent 95%);
}

/* Frosted glass layer — the actual blur surface */

.hpc-canvas-nav .mega__bg {
  position: relative;
  background:
    linear-gradient(180deg, rgba(10,16,30,0.96), rgba(6,10,22,0.98));
}

/* Top-left category ambient glow */

.hpc-canvas-nav .mega__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 18% 22%, rgba(var(--cat-rgb,255,255,255),0.22) 0%, rgba(var(--cat-rgb,255,255,255),0.08) 40%, transparent 68%);
  filter: blur(40px);
}

/* Bottom-right secondary ambient glow */

.hpc-canvas-nav .mega__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 45% at 82% 80%, rgba(var(--cat-rgb,255,255,255),0.10) 0%, transparent 70%);
  filter: blur(50px);
}

.hpc-canvas-nav .mega__spotlight {
  display: block;
  position: absolute;
  width: 400px;
  height: 400px;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(var(--cat-rgb,255,255,255),0.08) 0%, rgba(var(--cat-rgb,255,255,255),0.03) 35%, transparent 72%);
  transition: opacity 160ms var(--ease);
}

.hpc-canvas-nav .nav__item.open .mega__spotlight { opacity: 1; }

.hpc-canvas-nav .mega__floor {
  display: block;
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -16px;
  height: 28px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(var(--cat-rgb,255,255,255),0.12) 0%, transparent 72%);
  filter: blur(12px);
}

/* [v22] Noise texture enabled for materiality */

.hpc-canvas-nav .mega__noise {
  position: absolute;
  inset: 0;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px;
  pointer-events: none;
  z-index: 2;
}

.hpc-canvas-nav .mega__inner--canon {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 360px 1fr 210px 210px;
  gap: 20px;
  padding: 28px 36px 28px;
}

.hpc-canvas-nav .mega__id--canon, .hpc-canvas-nav .mega__content--canon, .hpc-canvas-nav .mega__feat--canon { min-width: 0; }

/* ── Read column (Deep Dive + Glossary) ── *//* ── Act column (Assessment + Protocol) ── */

.hpc-canvas-nav .mega__feat--act .mega__feat-label {
  color: rgba(var(--type-assessment),0.50);
}

.hpc-canvas-nav .mega__feat--act .mega__feat-hub {
  border-top-color: rgba(var(--type-assessment),0.08);
}

/* [v22] Column reveal stagger — spring open, snappy close */

.hpc-canvas-nav .mega__id--canon, .hpc-canvas-nav .mega__content--canon, .hpc-canvas-nav .mega__feat--canon {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.hpc-canvas-nav .nav__item.open .mega__id--canon {
  opacity: 1; transform: none;
  transition: opacity 0.4s cubic-bezier(0.22,1,0.36,1) 0.04s, transform 0.45s cubic-bezier(0.22,1,0.36,1) 0.04s;
}

.hpc-canvas-nav .nav__item.open .mega__content--canon {
  opacity: 1; transform: none;
  transition: opacity 0.4s cubic-bezier(0.22,1,0.36,1) 0.10s, transform 0.45s cubic-bezier(0.22,1,0.36,1) 0.10s;
}

.hpc-canvas-nav .nav__item.open .mega__feat--canon {
  opacity: 1; transform: none;
  transition: opacity 0.4s cubic-bezier(0.22,1,0.36,1) 0.14s, transform 0.45s cubic-bezier(0.22,1,0.36,1) 0.14s;
}

.hpc-canvas-nav .nav__item.open .mega__feat--act {
  transition: opacity 0.4s cubic-bezier(0.22,1,0.36,1) 0.19s, transform 0.45s cubic-bezier(0.22,1,0.36,1) 0.19s;
}

.hpc-canvas-nav .mega__id--canon {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

.hpc-canvas-nav .mega__feat--canon {
  padding-left: 20px;
  border-left: 1px solid rgba(242,193,78,0.08);
  border-image: linear-gradient(180deg, transparent, rgba(242,193,78,0.12) 30%, rgba(242,193,78,0.12) 70%, transparent) 1;
}

.hpc-canvas-nav .mega__content--canon { display: flex; flex-direction: column; }

/* ── Hub guide (category parent — elegant header) ── */

.hpc-canvas-nav .mega__hub-guide {
  display: flex;
  align-items: baseline;
  gap: 0;
  padding: 14px 0 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--maize-10);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-fast) var(--ease);
}

.hpc-canvas-nav .mega__hub-guide:hover {
  border-color: rgba(242,193,78,0.22);
  background: rgba(242,193,78,0.03);
}

.hpc-canvas-nav .mega__hub-guide-label {
  flex-shrink: 0;
  color: var(--cat-hex);
  font: 700 13px/1 var(--hpc-font-sans);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.hpc-canvas-nav .mega__hub-guide-label::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 13px;
  margin: 0 14px;
  background: rgba(242,193,78,0.35);
  vertical-align: -2px;
}

.hpc-canvas-nav .mega__hub-guide-name {
  color: var(--hpc-text);
  font: 500 16px/1.3 var(--hpc-font-sans);
  letter-spacing: -0.01em;
}

.hpc-canvas-nav .mega__hub-guide-meta {
  display: none;
}

.hpc-canvas-nav .mega__hub-guide-arrow {
  margin-left: auto;
  color: rgba(242,193,78,0.60);
  font-size: 15px;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  flex-shrink: 0;
  padding-left: 12px;
}

.hpc-canvas-nav .mega__hub-guide:hover .mega__hub-guide-arrow {
  opacity: 0.6;
  transform: translateX(3px);
}

.hpc-canvas-nav .mega__hub-guide:hover .mega__hub-guide-name {
  color: #f0f0f0;
}

.hpc-canvas-nav .mega__cat-num {
  margin-bottom: 10px;
  font: 800 36px/1 var(--hpc-font-brand);
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, rgba(var(--cat-rgb,255,255,255),0.25), rgba(var(--cat-rgb,255,255,255),0.05));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hpc-canvas-nav .mega__cat-name {
  margin-bottom: 8px;
  color: var(--hpc-text);
  font: 700 19px/1.2 var(--hpc-font-brand);
  letter-spacing: -0.02em;
  text-shadow: none;
}

.hpc-canvas-nav .mega__cat-desc {
  margin-bottom: 14px;
  color: var(--hpc-text-soft);
  font: 400 13px/1.6 var(--hpc-font-sans);
}

/* [v22] Removed dead .mega__cat-stat — stat_html no longer rendered *//* [v22] Removed dead .mega__hub — cover card replaced it */

.hpc-canvas-nav .mega__sub-label, .hpc-canvas-nav .mega__feat-label, .hpc-canvas-nav .mega__feat-type, .hpc-canvas-nav .mega__feat-tool-label {
  color: var(--hpc-text-faint);
  font: 500 10px/1 var(--hpc-font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hpc-canvas-nav .mega__sub-label {
  margin-bottom: 10px;
  color: rgba(242,193,78,0.35);
}

.hpc-canvas-nav .mega__sub-label::after {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: rgba(242,193,78,0.18);
  margin-top: 8px;
}

.hpc-canvas-nav .mega__feat-label {
  margin-bottom: 12px;
  color: rgba(242,193,78,0.55);
}

.hpc-canvas-nav .mega__feat-label::after {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: rgba(242,193,78,0.18);
  margin-top: 8px;
}

.hpc-canvas-nav .mega__feat-type, .hpc-canvas-nav .mega__feat-tool-label { color: var(--cat-hex); letter-spacing: 0.12em; }

.hpc-canvas-nav .mega__sub-list { display: grid; gap: 0; flex: 1; align-content: start; }

/* ── Subcategory row: inline name | guide title ── */

.hpc-canvas-nav .mega__sub {
  display: flex;
  align-items: baseline;
  gap: 0;
  padding: 14px 0;
  border-radius: 4px;
  border-bottom: 1px solid rgba(var(--cat-rgb,255,255,255),0.04);
  transition: border-color var(--t-fast) var(--ease);
}

.hpc-canvas-nav .mega__sub:last-child { border-bottom: 0; }

.hpc-canvas-nav .mega__sub:hover {
  border-color: rgba(var(--cat-rgb,255,255,255),0.10);
  background: rgba(var(--cat-rgb,255,255,255),0.025);
}

.hpc-canvas-nav .mega__sub-main {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0;
  flex: 1;
}

/* Subcategory name — category-coloured inline label */

.hpc-canvas-nav .mega__sub-name {
  flex-shrink: 0;
  color: var(--cat-hex);
  font: 600 13px/1 var(--hpc-font-sans);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}

.hpc-canvas-nav .mega__sub-name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(var(--cat-rgb,255,255,255),0.35);
}

/* Separator pipe — maize accent */

.hpc-canvas-nav .mega__sub-name::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin: 0 12px;
  background: rgba(242,193,78,0.30);
  vertical-align: -1px;
}

/* Guide title link */

.hpc-canvas-nav .mega__sub-guide {
  color: rgba(243,245,251,0.72);
  font: 400 15px/1.35 var(--hpc-font-sans);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 0;
  transition: color var(--t-fast) var(--ease);
}

.hpc-canvas-nav .mega__sub-guide:hover {
  color: var(--hpc-text);
}

.hpc-canvas-nav .mega__sub-guide:hover .mega__sub-arrow {
  opacity: 0.7;
  transform: translateX(3px);
}

.hpc-canvas-nav .mega__sub-arrow {
  color: var(--cat-hex);
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  flex-shrink: 0;
}

.hpc-canvas-nav .mega__feat--canon { display: flex; flex-direction: column; gap: 6px; }

.hpc-canvas-nav .mega__feat-card {
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid rgba(240,240,240,0.08);
  border-radius: 12px;
  background: rgba(240,240,240,0.04);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-mid) var(--ease);
}

.hpc-canvas-nav .mega__feat-card::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(242,193,78,0.15), rgba(242,193,78,0.45), rgba(242,193,78,0.15));
}

.hpc-canvas-nav .mega__feat-card:hover {
  transform: translateY(-2px);
  background: rgba(240,240,240,0.06);
  border-color: rgba(var(--cat-rgb,255,255,255),0.15);
  box-shadow: 0 4px 16px -4px rgba(var(--cat-rgb,255,255,255),0.10);
}

.hpc-canvas-nav .mega__feat-title {
  margin-top: 5px;
  color: var(--hpc-text);
  font: 600 16px/1.4 var(--hpc-font-sans);
  letter-spacing: -0.01em;
}

.hpc-canvas-nav .mega__feat-meta {
  margin-top: 3px;
  color: var(--maize-50);
  font: 500 11px/1.4 var(--hpc-font-mono);
  letter-spacing: 0.02em;
}

.hpc-canvas-nav .mega__feat-tool {
  padding: 14px 16px;
  border: 1px solid rgba(242,193,78,0.12);
  border-radius: 8px;
  background: rgba(242,193,78,0.025);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.hpc-canvas-nav .mega__feat-tool:hover {
  transform: none;
  box-shadow: none;
  background: rgba(242,193,78,0.06);
  border-color: rgba(242,193,78,0.25);
}

.hpc-canvas-nav .mega__feat-tool-name {
  margin-top: 3px;
  color: var(--hpc-text-soft);
  font: 600 13px/1.3 var(--hpc-font-sans);
}

.hpc-canvas-nav .mega__feat-tool-meta {
  margin-top: 2px;
  color: var(--hpc-text-muted);
  font: 400 12px/1.4 var(--hpc-font-sans);
}

/* ═══════════════════════════════════════
   HOVER PREVIEW OVERLAY
   Glassmorphism panel overlaying cover card
   ═══════════════════════════════════════ */

.hpc-canvas-nav .mega__preview {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--t-mid) var(--ease), visibility var(--t-mid) var(--ease), transform var(--t-mid) var(--ease-out);
  pointer-events: none;
  border-radius: 14px;
  overflow: hidden;
}

.hpc-canvas-nav .mega__preview.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Preview hero image */

.hpc-canvas-nav .mega__preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}

.hpc-canvas-nav .mega__preview.has-image .mega__preview-img {
  opacity: 1;
  transform: scale(1.05);
  transition: opacity var(--t-mid) var(--ease), transform 8s cubic-bezier(0.2, 0, 0.2, 1);
}

/* Gradient over image */

.hpc-canvas-nav .mega__preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,8,16,0.15) 0%, rgba(5,8,16,0.35) 35%, rgba(5,8,16,0.80) 65%, rgba(5,8,16,0.96) 100%);
  z-index: 1;
}

/* No image fallback — frosted glass */

.hpc-canvas-nav .mega__preview:not(.has-image)::before {
  background: linear-gradient(180deg, rgba(8,12,22,0.86) 0%, rgba(5,8,16,0.97) 100%);
}

/* Category glow */

.hpc-canvas-nav .mega__preview::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 60%;
  background: radial-gradient(ellipse at 20% 20%, rgba(var(--cat-rgb,255,255,255),0.12), transparent 65%);
  pointer-events: none;
  z-index: 1;
}

.hpc-canvas-nav .mega__preview-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.hpc-canvas-nav .mega__preview-type {
  font: 600 10px/1 var(--hpc-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cat-hex);
  opacity: 0.90;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.hpc-canvas-nav .mega__preview-title {
  font: 700 18px/1.25 var(--hpc-font-sans);
  color: var(--hpc-text);
  letter-spacing: -0.02em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.hpc-canvas-nav .mega__preview-desc {
  font: 400 12.5px/1.55 var(--hpc-font-sans);
  color: rgba(243,245,251,0.72);
  max-height: 4.7em;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.hpc-canvas-nav .mega__preview-cta {
  margin-top: 6px;
  font: 600 12px/1 var(--hpc-font-sans);
  color: rgba(242,193,78,0.85);
  transition: color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* Type-tinted preview labels */

.hpc-canvas-nav .mega__preview[data-active-type="deep-dive"] .mega__preview-type { color: rgba(var(--type-deep-dive),0.85); }

.hpc-canvas-nav .mega__preview[data-active-type="glossary"] .mega__preview-type { color: rgba(var(--type-glossary),0.85); }

.hpc-canvas-nav .mega__preview[data-active-type="assessment"] .mega__preview-type { color: rgba(var(--type-assessment),0.85); }

.hpc-canvas-nav .mega__preview[data-active-type="protocol"] .mega__preview-type { color: rgba(var(--type-protocol),0.85); }

.hpc-canvas-nav .mega__preview[data-active-type="tool"] .mega__preview-type { color: rgba(var(--type-tool),0.85); }

.hpc-canvas-nav .mega__preview[data-active-type="cheat-sheet"] .mega__preview-type { color: rgba(var(--type-cheat-sheet),0.85); }

/* Hide preview in reduced motion */

@media (prefers-reduced-motion: reduce) {

  .hpc-canvas-nav .mega__preview {
      transition-duration: 0.01ms !important;
    }

}

/* Hide preview on narrow screens */

@media (max-width: 1279px) {

  .hpc-canvas-nav .mega__preview { display: none; }

}

/* ── Cover card (full-height hero + identity overlay) ── */

.hpc-canvas-nav .mega__cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(var(--cat-rgb,255,255,255),0.04);
  border: 1px solid rgba(var(--cat-rgb,255,255,255),0.10);
  transition: border-color var(--t-fast) var(--ease);
  text-decoration: none;
  color: inherit;
}

.hpc-canvas-nav .mega__cover:hover {
  border-color: rgba(var(--cat-rgb,255,255,255),0.22);
}

.hpc-canvas-nav .mega__cover-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out), filter var(--t-mid) var(--ease);
}

.hpc-canvas-nav .mega__cover:hover .mega__cover-photo {
  transform: scale(1.04);
  filter: brightness(1.06);
}

.hpc-canvas-nav .mega__cover-grad {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(4,7,13,0.02) 0%,
      rgba(4,7,13,0.08) 25%,
      rgba(4,7,13,0.38) 50%,
      rgba(4,7,13,0.78) 70%,
      rgba(4,7,13,0.95) 100%),
    linear-gradient(90deg, rgba(var(--cat-rgb,255,255,255),0.10), transparent 40%);
  pointer-events: none;
}

.hpc-canvas-nav .mega__cover-body {
  position: relative;
  z-index: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hpc-canvas-nav .mega__cover .mega__cat-num {
  margin-bottom: 2px;
}

.hpc-canvas-nav .mega__cover .mega__cat-name {
  margin-bottom: 2px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.hpc-canvas-nav .mega__cover .mega__cat-desc {
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(243,245,251,0.72);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.hpc-canvas-nav .mega__cover-foot {
  margin-top: 4px;
}

.hpc-canvas-nav .mega__cover-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--maize-80);
  font: 600 12px/1 var(--hpc-font-sans);
  transition: gap var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.hpc-canvas-nav .mega__cover:hover .mega__cover-cta {
  gap: 10px;
  color: var(--maize-95);
}

/* ═══════════════════════════════════════
   CONTENT TYPE MICRO-BRANDING SYSTEM
   Type-specific icons, colours, and visual treatments
   ═══════════════════════════════════════ *//* ── Type accent colours ── */

.hpc-canvas-nav {
  --type-deep-dive: 96,165,250;     /* Sky blue — research depth */
  --type-glossary: 163,177,196;     /* Silver — reference */
  --type-assessment: 87,211,155;    /* Green — diagnostic */
  --type-protocol: 242,193,78;      /* Amber — daily action */
  --type-review: 196,115,88;        /* Copper — product evaluation */
  --type-guide: 240,240,240;        /* White — authority default */
}

/* ── Type label colouring ── */

.hpc-canvas-nav .mega__feat-item[data-type="deep-dive"] .mega__feat-item-type {
  color: rgba(var(--type-deep-dive),0.85);
}

.hpc-canvas-nav .mega__feat-item[data-type="glossary"] .mega__feat-item-type {
  color: rgba(var(--type-glossary),0.85);
}

.hpc-canvas-nav .mega__feat-item[data-type="assessment"] .mega__feat-item-type {
  color: rgba(var(--type-assessment),0.85);
}

.hpc-canvas-nav .mega__feat-item[data-type="protocol"] .mega__feat-item-type {
  color: rgba(var(--type-protocol),0.85);
}

.hpc-canvas-nav .mega__feat-item[data-type="review"] .mega__feat-item-type {
  color: rgba(var(--type-review),0.85);
}

/* ── Type icon ── */

.hpc-canvas-nav .mega__feat-item-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  vertical-align: -1px;
  opacity: 0.70;
}

.hpc-canvas-nav .mega__feat-item:hover .mega__feat-item-icon {
  opacity: 0.95;
}

.hpc-canvas-nav .mega__feat-item-icon svg {
  width: 12px;
  height: 12px;
  display: block;
}

/* ── Primary card type accent bar matches content type ── */

.hpc-canvas-nav .mega__feat-item--primary[data-type="deep-dive"]::before {
  background: linear-gradient(90deg, rgba(var(--type-deep-dive),0.15), rgba(var(--type-deep-dive),0.50), rgba(var(--type-deep-dive),0.15));
}

/* ── Type-tinted hover borders ── */

.hpc-canvas-nav .mega__feat-item[data-type="deep-dive"]:hover {
  border-color: rgba(var(--type-deep-dive),0.18);
}

.hpc-canvas-nav .mega__feat-item[data-type="glossary"]:hover {
  border-color: rgba(var(--type-glossary),0.18);
}

.hpc-canvas-nav .mega__feat-item[data-type="assessment"]:hover {
  border-color: rgba(var(--type-assessment),0.18);
}

.hpc-canvas-nav .mega__feat-item[data-type="protocol"]:hover {
  border-color: rgba(var(--type-protocol),0.18);
}

.hpc-canvas-nav .mega__feat-item[data-type="review"]:hover {
  border-color: rgba(var(--type-review),0.18);
}

/* ── Affordance arrow inherits type colour ── */

.hpc-canvas-nav .mega__feat-item[data-type="deep-dive"]::after { color: rgba(var(--type-deep-dive),0.25); }

.hpc-canvas-nav .mega__feat-item[data-type="glossary"]::after { color: rgba(var(--type-glossary),0.25); }

.hpc-canvas-nav .mega__feat-item[data-type="assessment"]::after { color: rgba(var(--type-assessment),0.25); }

.hpc-canvas-nav .mega__feat-item[data-type="protocol"]::after { color: rgba(var(--type-protocol),0.25); }

.hpc-canvas-nav .mega__feat-item[data-type="review"]::after { color: rgba(var(--type-review),0.25); }

.hpc-canvas-nav .mega__feat-item[data-type="deep-dive"]:hover::after { color: rgba(var(--type-deep-dive),0.60); }

.hpc-canvas-nav .mega__feat-item[data-type="glossary"]:hover::after { color: rgba(var(--type-glossary),0.60); }

.hpc-canvas-nav .mega__feat-item[data-type="assessment"]:hover::after { color: rgba(var(--type-assessment),0.60); }

.hpc-canvas-nav .mega__feat-item[data-type="protocol"]:hover::after { color: rgba(var(--type-protocol),0.60); }

.hpc-canvas-nav .mega__feat-item[data-type="review"]:hover::after { color: rgba(var(--type-review),0.60); }

/* ── Meta text inherits type colour ── */

.hpc-canvas-nav .mega__feat-item[data-type="deep-dive"] .mega__feat-item-meta { color: rgba(var(--type-deep-dive),0.45); }

.hpc-canvas-nav .mega__feat-item[data-type="glossary"] .mega__feat-item-meta { color: rgba(var(--type-glossary),0.45); }

.hpc-canvas-nav .mega__feat-item[data-type="assessment"] .mega__feat-item-meta { color: rgba(var(--type-assessment),0.45); }

.hpc-canvas-nav .mega__feat-item[data-type="protocol"] .mega__feat-item-meta { color: rgba(var(--type-protocol),0.45); }

.hpc-canvas-nav .mega__feat-item[data-type="review"] .mega__feat-item-meta { color: rgba(var(--type-review),0.45); }

/* ── Mobile type branding ── */

.hpc-canvas-nav .mobile-nav__feature[data-type="deep-dive"] .mobile-nav__feature-type { color: rgba(var(--type-deep-dive),0.85); }

.hpc-canvas-nav .mobile-nav__feature[data-type="assessment"] .mobile-nav__feature-type { color: rgba(var(--type-assessment),0.85); }

.hpc-canvas-nav .mobile-nav__feature[data-type="protocol"] .mobile-nav__feature-type { color: rgba(var(--type-protocol),0.85); }

.hpc-canvas-nav .mobile-nav__tool[data-type="glossary"] .mobile-nav__tool-label { color: rgba(var(--type-glossary),0.85); }

.hpc-canvas-nav .mobile-nav__tool[data-type="assessment"] .mobile-nav__tool-label { color: rgba(var(--type-assessment),0.85); }

.hpc-canvas-nav .mobile-nav__tool[data-type="protocol"] .mobile-nav__tool-label { color: rgba(var(--type-protocol),0.85); }

/* ── Featured column ── */

.hpc-canvas-nav .mega__feat-item {
  position: relative;
  display: block;
  padding: 12px 28px 12px 14px;
  border: 1px solid rgba(240,240,240,0.08);
  border-radius: 10px;
  background: rgba(240,240,240,0.03);
  transition: background var(--t-fast,120ms) var(--ease,ease), border-color var(--t-fast,120ms) var(--ease,ease);
}

.hpc-canvas-nav .mega__feat-item:last-child { margin-bottom: 0; }

.hpc-canvas-nav .mega__feat-item:hover {
  background: rgba(240,240,240,0.06);
  border-color: rgba(var(--cat-rgb,255,255,255),0.15);
}

.hpc-canvas-nav .mega__feat-item--primary {
  padding: 16px 14px 14px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(var(--cat-rgb,255,255,255),0.05), rgba(var(--cat-rgb,255,255,255),0.02));
  border-color: rgba(var(--cat-rgb,255,255,255),0.10);
}

.hpc-canvas-nav .mega__feat-item--primary::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(242,193,78,0.15), rgba(242,193,78,0.55), rgba(242,193,78,0.15));
}

.hpc-canvas-nav .mega__feat-item--primary:hover {
  transform: translateY(-2px);
  background: rgba(240,240,240,0.06);
  border-color: rgba(var(--cat-rgb,255,255,255),0.15);
}

.hpc-canvas-nav .mega__feat-item-type {
  color: var(--cat-hex);
  font: 500 10px/1 var(--hpc-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hpc-canvas-nav .mega__feat-item-title {
  margin-top: 4px;
  color: var(--hpc-text);
  font: 600 14px/1.35 var(--hpc-font-sans);
  letter-spacing: -0.01em;
}

.hpc-canvas-nav .mega__feat-item--primary .mega__feat-item-title {
  font-size: 15px;
  font-weight: 700;
}

.hpc-canvas-nav .mega__feat-item-meta {
  margin-top: 3px;
  color: rgba(242,193,78,0.50);
  font: 500 10px/1.4 var(--hpc-font-mono);
  letter-spacing: 0.02em;
}

/* Affordance arrow on featured items */

.hpc-canvas-nav .mega__feat-item::after {
  content: "→";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(242,193,78,0.25);
  font-size: 14px;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.hpc-canvas-nav .mega__feat-item:hover::after {
  color: rgba(242,193,78,0.65);
  transform: translateY(-50%) translateX(2px);
}

.hpc-canvas-nav .mega__feat-item--primary::after {
  top: auto;
  bottom: 14px;
  transform: none;
}

.hpc-canvas-nav .mega__feat-item--primary:hover::after {
  transform: translateX(2px);
}

/* Hub CTA at bottom of featured column */

.hpc-canvas-nav .mega__feat-hub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 10px 0 0;
  border-top: 1px solid var(--maize-08);
  color: rgba(242,193,78,0.50);
  font: 600 10px/1 var(--hpc-font-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.hpc-canvas-nav .mega__feat-hub:hover {
  color: var(--maize-80);
}

.hpc-canvas-nav .mega__feat-hub-arrow {
  font-size: 12px;
  transition: transform var(--t-fast) var(--ease);
}

.hpc-canvas-nav .mega__feat-hub:hover .mega__feat-hub-arrow {
  transform: translateX(3px);
}

/* ==========================================
   STAGE 3 MOBILE CANONICAL OVERLAY OVERRIDE
   ========================================== *//* [v22] Hub guide row in mobile accordion */

.hpc-canvas-nav .mobile-nav__hub-guide {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 0;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--maize-10);
  text-decoration: none;
  color: inherit;
}

.hpc-canvas-nav .mobile-nav__hub-guide-label {
  flex-shrink: 0;
  color: var(--cat-hex);
  font: 700 13px/1 var(--hpc-font-sans);
  white-space: nowrap;
}

.hpc-canvas-nav .mobile-nav__hub-guide-pipe {
  color: rgba(242,193,78,0.35);
  font-size: 14px;
}

.hpc-canvas-nav .mobile-nav__hub-guide-title {
  color: rgba(243,245,251,0.60);
  font: 400 13px/1.3 var(--hpc-font-sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hpc-canvas-nav .mobile-nav__hub-guide:hover .mobile-nav__hub-guide-title {
  color: rgba(243,245,251,0.85);
}

.hpc-canvas-nav .mobile-overlay {
  background: rgba(4, 7, 13, 0.92);
}

.hpc-canvas-nav .mobile-menu {
  width: 100vw;
  max-width: none;
  padding: 0;
  border-left: 0;
  box-shadow: none;
  background: #0a101d;
  transition: transform 260ms ease;
}

.hpc-canvas-nav .mobile-menu__header {
  min-height: 64px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(243, 245, 251, 0.08);
  background: rgba(10, 16, 29, 0.96);
}

.hpc-canvas-nav .mobile-menu__brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  min-height: 44px;
}

.hpc-canvas-nav .mobile-menu__close {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
}

.hpc-canvas-nav .mobile-menu__body {
  grid-template-rows: 1fr auto;
  gap: 0;
  min-height: calc(100dvh - 64px);
}

.hpc-canvas-nav .mobile-nav {
  padding: 8px 0 8px;
}

.hpc-canvas-nav .mobile-nav__section {
  border-bottom: 1px solid rgba(243, 245, 251, 0.08);
}

.hpc-canvas-nav .mobile-nav__trigger {
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 16px 20px;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
  border-left: 3px solid transparent;
}

.hpc-canvas-nav .mobile-nav__trigger-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hpc-canvas-nav .mobile-nav__number {
  color: rgba(var(--cat-rgb,255,255,255),0.72);
  font: 700 11px/1 var(--hpc-font-mono);
  letter-spacing: 0.12em;
}

.hpc-canvas-nav .mobile-nav__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hpc-canvas-nav .mobile-nav__section.open > .mobile-nav__trigger, .hpc-canvas-nav .mobile-nav__section.is-current > .mobile-nav__trigger {
  background: rgba(var(--cat-rgb,255,255,255),0.05);
  border-left-color: var(--cat-hex, var(--hpc-gold));
}

.hpc-canvas-nav .mobile-nav__section.open .mobile-nav__chev {
  color: var(--cat-hex, var(--hpc-gold));
}

.hpc-canvas-nav .mobile-nav__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-mid) var(--ease);
  overflow: hidden;
}

.hpc-canvas-nav .mobile-nav__section.open .mobile-nav__panel {
  grid-template-rows: 1fr;
  padding-bottom: 18px;
}

.hpc-canvas-nav .mobile-nav__panel[hidden] {
  display: grid;
  grid-template-rows: 0fr;
}

.hpc-canvas-nav .mobile-nav__panel-inner {
  overflow: hidden;
  min-height: 0;
}

.hpc-canvas-nav .mobile-nav__panel-inner {
  gap: 12px;
  padding: 0 20px;
}

.hpc-canvas-nav .mobile-nav__detail-head {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.hpc-canvas-nav .mobile-nav__panel-name {
  color: var(--hpc-text);
  font: 700 18px/1.2 var(--hpc-font-brand);
  letter-spacing: -0.02em;
}

.hpc-canvas-nav .mobile-nav__thesis {
  margin: 0;
  color: var(--hpc-text-soft);
  font-size: 14px;
  line-height: 1.55;
}

.hpc-canvas-nav .mobile-nav__feature, .hpc-canvas-nav .mobile-nav__tool, .hpc-canvas-nav .mobile-nav__link, .hpc-canvas-nav .mobile-nav__hub, .hpc-canvas-nav .mobile-nav__viewall {
  display: grid;
  gap: 8px;
}

.hpc-canvas-nav .mobile-nav__feature, .hpc-canvas-nav .mobile-nav__tool {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(243, 245, 251, 0.10);
  background: rgba(255,255,255,0.035);
}

.hpc-canvas-nav .mobile-nav__feature {
  border-top: 1px solid rgba(var(--cat-rgb,255,255,255),0.28);
}

.hpc-canvas-nav .mobile-nav__feature-type, .hpc-canvas-nav .mobile-nav__tool-label {
  color: var(--cat-hex, var(--hpc-gold));
  font: 600 10px/1.2 var(--hpc-font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hpc-canvas-nav .mobile-nav__feature-title, .hpc-canvas-nav .mobile-nav__tool-name {
  color: var(--hpc-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.hpc-canvas-nav .mobile-nav__feature-meta, .hpc-canvas-nav .mobile-nav__tool-meta, .hpc-canvas-nav .mobile-nav__link-meta {
  color: var(--hpc-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.hpc-canvas-nav .mobile-nav__subs {
  display: grid;
  gap: 10px;
}

.hpc-canvas-nav .mobile-nav__link {
  padding: 13px 2px;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--hpc-line);
  background: none;
}

.hpc-canvas-nav .mobile-nav__link-title {
  color: var(--hpc-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.hpc-canvas-nav .mobile-nav__viewall {
  align-items: center;
  justify-content: center;
  grid-auto-flow: column;
  gap: 8px;
  min-height: 42px;
  color: var(--hpc-text-soft);
  font-size: 13px;
  font-weight: 600;
}

.hpc-canvas-nav .mobile-nav__hub {
  align-items: center;
  justify-content: center;
  grid-auto-flow: column;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  /* Type treatment mirrors .cp__all on desktop (mono, uppercase, pillar accent);
     the pill geometry stays because a thumb needs the full-width target. */
  font: 500 12px/1 var(--hpc-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cat-hex, var(--hpc-text));
}

.hpc-canvas-nav .mobile-menu__footer {
  padding: 16px 20px 20px;
  border-top: 1px solid rgba(243, 245, 251, 0.08);
  background: rgba(10, 16, 29, 0.98);
}

.hpc-canvas-nav .mobile-menu__start {
  width: 100%;
  min-height: 48px;
}

@media (max-width: 560px) {

  .hpc-canvas-nav .mobile-menu__header {
      min-height: 60px;
      padding-inline: 16px;
    }

  .hpc-canvas-nav .mobile-menu__body {
      min-height: calc(100dvh - 60px);
    }

  .hpc-canvas-nav .mobile-nav__trigger, .hpc-canvas-nav .mobile-nav__panel-inner, .hpc-canvas-nav .mobile-menu__footer {
      padding-inline: 16px;
    }

  .hpc-canvas-nav .mobile-nav__title {
      font-size: 16px;
    }

  .hpc-canvas-nav .mobile-nav__panel-name {
      font-size: 17px;
    }

  .hpc-canvas-nav .mobile-nav__thesis {
      font-size: 13px;
    }

}

@media (prefers-reduced-motion: reduce) {

  .hpc-canvas-nav .mobile-nav__tool {
      transition-duration: 80ms !important;
    }

}

@media (forced-colors: active) {

  .hpc-canvas-nav .mobile-nav__tool {
      border-color: ButtonBorder !important;
      background: Canvas !important;
      color: CanvasText !important;
      box-shadow: none !important;
    }

}

/* ── Touch target enforcement (44px minimum) ── */

.hpc-canvas-nav .mobile-nav__link {
  min-height: 44px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  align-content: center;
  gap: 10px;
}

.hpc-canvas-nav .mobile-nav__hub {
  min-height: 48px;
}

.hpc-canvas-nav .mobile-nav__hub-guide {
  min-height: 44px;
}

.hpc-canvas-nav .mobile-nav__trigger {
  min-height: 56px;
}

/* ==========================================
   STAGE 4 HARDENING OVERRIDES
   ========================================== */

.hpc-canvas-nav .mobile-fallback {
  display: none;
  position: relative;
  z-index: 70;
  width: min(var(--hpc-max), calc(100vw - (var(--hpc-pad) * 2)));
  margin: 0 auto;
  padding: 0 0 16px;
}

@media (max-width: 1023px) {

  html:not(.hpc-nav-js) .hpc-canvas-nav .mobile-fallback {
      display: block;
    }

}

html.hpc-nav-js .hpc-canvas-nav .mobile-fallback {
  display: none !important;
}

.hpc-canvas-nav .mobile-fallback__inner {
  display: grid;
  gap: 12px;
  padding: 16px 0 0;
}

.hpc-canvas-nav .mobile-fallback__title {
  color: var(--hpc-text-soft);
  font: 600 10px/1.2 var(--hpc-font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hpc-canvas-nav .mobile-fallback__links {
  display: grid;
  gap: 10px;
}

.hpc-canvas-nav .mobile-fallback__link, .hpc-canvas-nav .mobile-fallback__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(243,245,251,0.10);
  background: rgba(255,255,255,0.03);
  color: var(--hpc-text);
  text-decoration: none;
}

.hpc-canvas-nav .mobile-fallback__cta {
  border-color: rgba(242,193,78,0.22);
  color: var(--hpc-gold);
  background: rgba(242,193,78,0.06);
}

.hpc-canvas-nav .mobile-menu[aria-hidden="true"] {
  pointer-events: none;
}

@supports not (height: 100dvh) {

  .hpc-canvas-nav .mobile-menu, .hpc-canvas-nav .mobile-menu__body {
      height: 100vh;
      min-height: calc(100vh - 64px);
    }

}

@media (hover: hover) {

  .hpc-canvas-nav .mega__sub:hover {
      border-color: rgba(var(--cat-rgb,240,240,240), 0.10);
    }

}

@media (forced-colors: active) {

  .hpc-canvas-nav .mobile-fallback__link, .hpc-canvas-nav .mobile-fallback__cta, .hpc-canvas-nav .mobile-menu, .hpc-canvas-nav .mobile-menu__header, .hpc-canvas-nav .mobile-menu__footer {
      background: Canvas !important;
      color: CanvasText !important;
      border-color: ButtonBorder !important;
      box-shadow: none !important;
    }

  .hpc-canvas-nav .mobile-menu__close, .hpc-canvas-nav .mobile-menu__start, .hpc-canvas-nav .mobile-nav__trigger, .hpc-canvas-nav .mobile-nav__hub, .hpc-canvas-nav .mobile-nav__viewall {
      forced-color-adjust: auto;
    }

}

/* ==========================================
   PRINT STYLES
   ========================================== */

@media print {

  .hpc-canvas-nav .hpc-header, .hpc-canvas-nav .masthead, .hpc-canvas-nav .nav, .hpc-canvas-nav .mega, .hpc-canvas-nav .mobile-menu, .hpc-canvas-nav .mobile-overlay, .hpc-canvas-nav .mobile-fallback, .hpc-canvas-nav .hamburger {
      display: none !important;
    }

}

/* ==========================================
   SAFE-AREA INSETS (iPhone notch + home bar)
   ========================================== */

@supports (padding-top: env(safe-area-inset-top)) {

  .hpc-canvas-nav .mobile-menu__header {
      padding-top: max(0px, env(safe-area-inset-top));
    }

  .hpc-canvas-nav .mobile-menu__footer {
      padding-bottom: max(20px, calc(16px + env(safe-area-inset-bottom)));
    }

}

/* ==========================================
   BACKDROP-FILTER FALLBACK
   ========================================== *//* backdrop-filter removed estate-wide (CLAUDE.md perf law); the opaque grounds
   below were this file's own @supports fallback values, now the only path. *//* ── Tool + Cheat Sheet type branding ── */

.hpc-canvas-nav .mega__feat-item[data-type="tool"] .mega__feat-item-type { color: rgba(var(--type-tool),0.85); }

.hpc-canvas-nav .mega__feat-item[data-type="tool"]:hover { border-color: rgba(var(--type-tool),0.18); }

.hpc-canvas-nav .mega__feat-item[data-type="tool"]::after { color: rgba(var(--type-tool),0.25); }

.hpc-canvas-nav .mega__feat-item[data-type="tool"]:hover::after { color: rgba(var(--type-tool),0.60); }

.hpc-canvas-nav .mega__feat-item[data-type="tool"] .mega__feat-item-meta { color: rgba(var(--type-tool),0.45); }

.hpc-canvas-nav .mega__feat-item[data-type="cheat-sheet"] .mega__feat-item-type { color: rgba(var(--type-cheat-sheet),0.85); }

.hpc-canvas-nav .mega__feat-item[data-type="cheat-sheet"]:hover { border-color: rgba(var(--type-cheat-sheet),0.18); }

.hpc-canvas-nav .mega__feat-item[data-type="cheat-sheet"]::after { color: rgba(var(--type-cheat-sheet),0.25); }

.hpc-canvas-nav .mega__feat-item[data-type="cheat-sheet"]:hover::after { color: rgba(var(--type-cheat-sheet),0.60); }

.hpc-canvas-nav .mega__feat-item[data-type="cheat-sheet"] .mega__feat-item-meta { color: rgba(var(--type-cheat-sheet),0.45); }

.hpc-canvas-nav .mega__feat-item--primary[data-type="tool"]::before {
  background: linear-gradient(90deg, rgba(var(--type-tool),0.15), rgba(var(--type-tool),0.50), rgba(var(--type-tool),0.15));
}

/* Mobile type branding for Tool + Cheat Sheet */

.hpc-canvas-nav .mobile-nav__tool[data-type="tool"] .mobile-nav__tool-label { color: rgba(var(--type-tool),0.85); }

.hpc-canvas-nav .mobile-nav__tool[data-type="cheat-sheet"] .mobile-nav__tool-label { color: rgba(var(--type-cheat-sheet),0.85); }

/* ── Primary card accent bar for Act column types ── */

.hpc-canvas-nav .mega__feat-item--primary[data-type="assessment"]::before {
  background: linear-gradient(90deg, rgba(var(--type-assessment),0.15), rgba(var(--type-assessment),0.50), rgba(var(--type-assessment),0.15));
}

.hpc-canvas-nav .mega__feat-item--primary[data-type="protocol"]::before {
  background: linear-gradient(90deg, rgba(var(--type-protocol),0.15), rgba(var(--type-protocol),0.50), rgba(var(--type-protocol),0.15));
}

/* ══ BEGIN Contents Page (generated) ══ *//* ══ The Contents Page ══════════════════════════════════════════════════════
   The mega panel as a periodical's contents spread.

   Signature move: THE COUNT IS THE DESIGN. Every row carries its real article
   count in a mono numeral column against a leader rule. Nothing is padded to
   look full — a pillar with 131 articles reads as abundance, one with 1 reads
   as 1, and a subcategory holding nothing reads as 0 before you click it.
   ═════════════════════════════════════════════════════════════════════════ */

.hpc-canvas-nav .cp {
  --cp-gap: clamp(28px, 3.2vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: var(--cp-gap);
  padding: clamp(30px, 3vw, 46px) clamp(26px, 3vw, 48px) clamp(26px, 2.6vw, 40px);
  background: var(--hpc-panel);
  border-top: 1px solid var(--hpc-line-strong);
  color: var(--hpc-text);
}

/* Screen-reader-only. The count column is a bare numeral; sighted users read it
   from the leader rule and the column head, but a screen reader announcing "29"
   with no unit is meaningless. This carries the word without showing it. */

.hpc-canvas-nav .hpc-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Section head ─────────────────────────────────────────────────────── */

.hpc-canvas-nav .cp__head { display: flex; align-items: baseline; gap: 14px; }

.hpc-canvas-nav .cp__num {
  font: 500 12px/1 var(--hpc-font-mono);
  letter-spacing: .16em;
  color: var(--cat-hex);
  /* optical: the numeral sits on the cap-line of the name beside it */
  transform: translateY(-1px);
}

.hpc-canvas-nav .cp__rule { flex: 1 1 auto; height: 1px; background: var(--hpc-line-strong); }

.hpc-canvas-nav .cp__name {
  font: 470 clamp(21px, 1.7vw, 27px)/1.05 var(--hpc-font-display);
  letter-spacing: -.012em;
  color: var(--hpc-text);
}

.hpc-canvas-nav .cp__total {
  font: 500 11px/1 var(--hpc-font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--hpc-text-muted);
  white-space: nowrap;
}

.hpc-canvas-nav .cp__thesis {
  margin: 12px 0 0;
  /* 72ch not 62: production sets --hpc-font-sans to Inter, which is wider than the
     DM Sans this was first measured in, and the line re-wrapped. Measured, not guessed. */
  max-width: 72ch;
  font: 400 13.5px/1.55 var(--hpc-font-sans);
  color: var(--hpc-text-soft);
  /* stops the last word stranding on its own line */
  text-wrap: pretty;
}

/* ── The contents list ────────────────────────────────────────────────── */

.hpc-canvas-nav .cp__list { margin-top: clamp(18px, 1.8vw, 26px); }

.hpc-canvas-nav .cp__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 10px;
  /* 14px top/bottom + 17.5px line-box = 45.5px row. The repo rule is a >=44px
     touch target, and this panel goes single-column at <=1100px where a tablet
     thumb is a real input. */
  padding: 14px 0;
  border-bottom: 1px solid var(--hpc-line);
  text-decoration: none;
  color: inherit;
  transition: color var(--t-fast) var(--ease);
}

.hpc-canvas-nav .cp__row:last-child { border-bottom: 0; }

.hpc-canvas-nav .cp__row-name {
  font: 500 14px/1.25 var(--hpc-font-sans);
  color: var(--hpc-text);
  transition: color var(--t-fast) var(--ease);
}

/* The leader rule — the device that makes this a contents page and not a list.
   Dotted, so the eye tracks name → count across the gap. */

.hpc-canvas-nav .cp__leader {
  align-self: end;
  height: 0;
  margin-bottom: 4px;
  border-bottom: 1px dotted var(--hpc-line-strong);
  opacity: .8;
}

.hpc-canvas-nav .cp__row-count {
  font: 500 12px/1 var(--hpc-font-mono);
  letter-spacing: .06em;
  color: var(--hpc-text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
  text-align: right;
  transition: color var(--t-fast) var(--ease);
}

.hpc-canvas-nav .cp__row:hover .cp__row-name, .hpc-canvas-nav .cp__row:focus-visible .cp__row-name { color: var(--cat-hex); }

.hpc-canvas-nav .cp__row:hover .cp__row-count, .hpc-canvas-nav .cp__row:focus-visible .cp__row-count { color: var(--cat-hex); }

.hpc-canvas-nav .cp__row:focus-visible {
  outline: 2px solid var(--cat-hex);
  outline-offset: 3px;
  border-radius: 3px;
}

/* An empty section is stated, not hidden. The count already says 0; this
   dims the row so the eye skips it without the row disappearing. */

.hpc-canvas-nav .cp__row--empty .cp__row-name { color: var(--hpc-text-muted); }

.hpc-canvas-nav .cp__row--empty .cp__row-count { color: var(--hpc-text-muted); }

.hpc-canvas-nav .cp__row--empty .cp__leader { opacity: .45; }

/* ── Browse-all ───────────────────────────────────────────────────────── */

.hpc-canvas-nav .cp__all {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 18px;
  font: 500 12px/1 var(--hpc-font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cat-hex); text-decoration: none;
}

.hpc-canvas-nav .cp__all::before {
  content: ""; width: 20px; height: 1px;
  background: var(--cat-hex); opacity: .55;
  transition: width var(--t-mid) var(--ease-out);
}

.hpc-canvas-nav .cp__all:hover::before { width: 34px; }

.hpc-canvas-nav .cp__all:focus-visible { outline: 2px solid var(--cat-hex); outline-offset: 4px; border-radius: 2px; }

/* ── The plate ────────────────────────────────────────────────────────── */

.hpc-canvas-nav .cp__plate {
  align-self: start;
  display: flex; flex-direction: column;
  padding: 18px;
  border: 1px solid var(--hpc-line);
  border-radius: var(--hpc-radius-sm);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cat-hex) 7%, transparent),
    transparent 62%);
  text-decoration: none; color: inherit;
  transition: border-color var(--t-mid) var(--ease);
}

.hpc-canvas-nav .cp__plate:hover { border-color: color-mix(in srgb, var(--cat-hex) 42%, transparent); }

.hpc-canvas-nav .cp__plate:focus-visible { outline: 2px solid var(--cat-hex); outline-offset: 3px; }

.hpc-canvas-nav .cp__plate-label {
  font: 500 10px/1 var(--hpc-font-mono);
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--hpc-text-muted);
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--hpc-line);
}

.hpc-canvas-nav .cp__plate-type {
  font: 500 10px/1 var(--hpc-font-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--cat-hex);
}

.hpc-canvas-nav .cp__plate-title {
  margin-top: 10px;
  font: 470 17px/1.25 var(--hpc-font-display);
  letter-spacing: -.008em;
  color: var(--hpc-text);
  text-wrap: balance;
  transition: color var(--t-fast) var(--ease);
}

.hpc-canvas-nav .cp__plate:hover .cp__plate-title { color: var(--cat-hex); }

.hpc-canvas-nav .cp__plate-foot {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--hpc-line);
  font: 500 11px/1 var(--hpc-font-mono);
  letter-spacing: .1em;
  color: var(--hpc-text-muted);
}

/* Panel width must come from its CONTAINING BLOCK, not the viewport.
   .mega sizes itself with a 100vw-based width, but on article pages the ToC rail
   puts padding-right:312px on <body>, so the nav — which is the panel's containing
   block — is 312px narrower than the viewport. A viewport-wide panel centred in a
   narrower container overflows equally both sides: measured L=-119 at 1440, so the
   first ~119px of every row was cut off. Capping at 100% pins it to L=0 on rail
   pages and leaves non-rail pages centred within the max as before. */

.hpc-canvas-nav .mega.cp { width: min(var(--hpc-mega-max), 100%); }

@media (max-width: 1100px) {

  .hpc-canvas-nav .cp { grid-template-columns: minmax(0, 1fr); }

  .hpc-canvas-nav .cp__plate { order: -1; }

}

/* ══ END Contents Page (generated) ══ *//* ── Front-page bar: on display at rest, steps aside while you read ─────
   Owner direction 2026-08-04: the cinema strip goes; the proper menu and
   the brand lockup are ON DISPLAY when the page is at rest, disappear
   while the reader scrolls down, and come back the moment they stop (or
   scroll up). This INVERTS the v24.4.0 model (hidden at rest, revealed
   deep in the page) — which the same day's audit measured as never
   revealing at all live, hiding the nav's first five Tab stops on the
   site's highest-traffic page (AUDIT-2026-08-04 P1-5).
   `fixed` keeps the hero's geometry untouched; only the nav row shows —
   the date/weather masthead stays editorial furniture at the page top.
   hpc-header.js toggles .hpc-header--hidden while scrolling down and
   `hpc-nav-revealed` on <html> mirrors visibility for the host page.
   No JS -> the bar is simply always there: the floor is presence, not
   absence (the old floor was a permanently missing nav).
   Gate: tests/test_nav_front_reveal.py *//* `header.hpc-header--reveal`, not `.hpc-header--reveal`: the base rule above is
   header.hpc-header (0,1,1) and would otherwise keep position:sticky and the
   negative sticky `top`, which left the bar 43px off-screen when revealed.
   Equal specificity, later in the file, so this wins on source order. */

.hpc-canvas-nav header.hpc-header--reveal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  transform: none;
  transition: transform 260ms var(--ease, cubic-bezier(.2,.6,.2,1));
  /* NO will-change here. will-change:transform makes this fixed header the
     CONTAINING BLOCK for every fixed descendant — the Atlas scrim's inset:0
     then resolves against the 76px bar instead of the viewport, and the
     open menu sits in a white void (owner-reported live on v25.1.0; the
     audit's "scrim collapses to the header strip" P2). The 260ms transform
     transition promotes to its own layer while animating, which is the only
     time the hint would have helped. */
}

.hpc-canvas-nav header.hpc-header--reveal .masthead {
  display: none;
}

.hpc-canvas-nav header.hpc-header--reveal.hpc-header--hidden {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {

  .hpc-canvas-nav header.hpc-header--reveal {
      transition: none;
    }

}

/* The cinema front page's own strip (wordmark / INDEX / SEARCH ⌘K) retires
   in favour of the bar above — owner direction 2026-08-04. Hidden from the
   plugin rather than by republishing the front-page document: the pending
   front-page release is 37KB ahead of live and must not ship as a side
   effect (see NOTE-2026-07-30-FRONT-PAGE-NAV). body.home scopes this to
   the front page; no other surface renders header.mast. */

.hpc-canvas-nav body.home header.mast {
  display: none;
}

/* no-JS fallback for the narrowest masthead stack (see the sticky block above) */

@media (max-width: 600px) {

  .hpc-canvas-nav header.hpc-header { --hpc-masthead-h: 159px; }

}

/* An inline site style sets `html, body { overflow-x: hidden }` under 768px.
   `hidden` makes body a scroll container, and a sticky element inside a scroll
   container that scrolls with the page never sticks -- which is why the sticky
   header worked at 1440 and died at 768/390. `clip` clips identically without
   creating that container (this file already uses it at desktop widths).
   Specificity, not order, wins here: the inline rule is `html` (0,0,1) and
   loads after this file, so the override is keyed on the class the script adds
   to <html>. Safari <16 ignores `clip`, falls back to the inline `hidden`, and
   simply keeps today's non-sticky behaviour -- no layout damage. */

/* ── Drawer usability (consumer panels 2026-08-04, Wave 1) ──────────────
   The drawer was height:100dvh with NO overflow rule: any expanded pillar
   taller than the screen put its own rows, "Browse All" links and the
   footer CTAs permanently off-screen — wheel, swipe and forced scroll all
   dead because nothing was a scroll container (5 personas, 3× blocker).
   The header row stays pinned so Close never scrolls away; the body is
   the one scroll surface, contained so it can never chain-scroll the
   locked page behind it. Gate: tests/test_nav_drawer_usability.py */

.hpc-canvas-nav .mobile-menu {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hpc-canvas-nav .mobile-menu__header { flex: none; }

.hpc-canvas-nav .mobile-menu__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Glossary row in the drawer footer — quiet sibling of Start Here. */

.hpc-canvas-nav .mobile-menu__glossary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(243, 245, 251, 0.14);
  border-radius: 10px;
  font: 600 14px/1 var(--hpc-font-sans);
  color: var(--hpc-text);
  text-decoration: none;
}

.hpc-canvas-nav .mobile-menu__glossary-count {
  font: 500 12.5px/1 var(--hpc-font-mono);
  color: var(--hpc-text-muted);
  letter-spacing: 0.04em;
}

.hpc-canvas-nav .mobile-menu__footer {
  display: grid;
  gap: 10px;
}

/* ── Real search (consumer panels Wave 1, cross-surface consensus #1) ───
   .masthead__search is a FORM now: input + submit. The pill silhouette
   moves to the whole form; the input starts compact and opens on focus so
   the masthead's rhythm holds at rest. `required` blocks the empty-query
   submit natively. 44px targets at the mobile breakpoint (house §10 —
   note the pill's own rest height was 34px on desktop before; unchanged
   there, raised on touch). */

.hpc-canvas-nav .masthead__search {
  padding: 0 4px 0 12px;
}

.hpc-canvas-nav .masthead__search-input {
  width: 110px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--hpc-text);
  font: 500 12.5px/1 var(--hpc-font-mono);
  letter-spacing: 0.02em;
  transition: width 200ms ease;
}

.hpc-canvas-nav .masthead__search-input::placeholder { color: var(--hpc-text-muted); }

.hpc-canvas-nav .masthead__search-input:focus { outline: none; width: 200px; }

.hpc-canvas-nav .masthead__search:focus-within {
  color: var(--hpc-text);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(243, 245, 251, 0.24);
}

.hpc-canvas-nav .masthead__search-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 500 12px/1 inherit;
  font-family: inherit;
  cursor: pointer;
}

.hpc-canvas-nav .masthead__search-btn svg { width: 14px; height: 14px; }

.hpc-canvas-nav .masthead__search-btn:focus-visible { outline: 2px solid rgba(242, 193, 78, 0.92); outline-offset: 2px; }

@media (max-width: 1023px) {

  .hpc-canvas-nav .masthead__search { min-height: 44px; }

  .hpc-canvas-nav .masthead__search-input { width: 92px; min-height: 44px; font-size: 13px; }

  .hpc-canvas-nav .masthead__search-input:focus { width: 150px; }

  .hpc-canvas-nav .masthead__search-btn { min-height: 44px; min-width: 44px; font-size: 0; }

  .hpc-canvas-nav .masthead__search-btn svg { margin: 0; }

}

/* ── Article-rail clearance (consumer panels Wave 1 #4) ─────────────────
   Science Deep Dives pin a 280px "ON THIS PAGE" rail to the viewport's
   right edge from y=0 (aside.article__rail, z30). The brand lockup and
   the masthead's search sat straight under it — the physician persona
   read "Hi 0Performance E Culture" garble for an entire 22-minute
   article. The header yields the covered strip on exactly those pages:
   280px rail + 16px breathing room. Conditional via :has(), so every
   other surface keeps the full-width placard.
   Gate: tests/test_nav_sdd_rail.py */

.hpc-canvas-nav body:has(.article__rail) .nav__bar, .hpc-canvas-nav body:has(.article__rail) .masthead__inner {
  padding-right: 296px;
}

/* ── Canvas detach/reveal (Wave 2 — the nav comes back) ─────────────────
   On canvas documents the header starts IN FLOW at the top (pushing the
   doc down, exactly as before). Once the reader scrolls past it, JS
   detaches it into the same hide-while-scrolling / return-on-stop-or-up
   bar the homepage wears — transient, so the docs' own top chrome (.cnav,
   .sense-index) is never PERMANENTLY buried, which was the July reason
   canvas stayed non-sticky. The wrapper holds the header's slot height
   while detached, so detaching never moves the page. Only the nav row
   travels: the masthead stays editorial furniture at the page top.
   Gate: tests/test_nav_canvas_reveal.py */

.hpc-canvas-nav header.hpc-header--detached {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  transform: none;
  transition: transform 260ms var(--ease, cubic-bezier(.2,.6,.2,1));
}

.hpc-canvas-nav header.hpc-header--detached .masthead {
  display: none;
}

.hpc-canvas-nav header.hpc-header--detached.hpc-header--hidden {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {

  .hpc-canvas-nav header.hpc-header--detached {
      transition: none;
    }

}

/* Asymmetric timing: leaving fast reads as obedience, returning slower
   reads as composure. Applies to both bar homes. The no-anim helper lets
   JS detach with the bar already off-screen — without it the detach frame
   animates transform none -> -100% and a sliver of bar slides out in the
   reader's face mid-scroll. */

.hpc-canvas-nav header.hpc-header--reveal.hpc-header--hidden, .hpc-canvas-nav header.hpc-header--detached.hpc-header--hidden {
  transition-duration: 160ms;
}

.hpc-canvas-nav header.hpc-header--no-anim {
  transition: none;
}

/* ── R3-8 (expert panel MB-4): landscape-phone compaction ─────────────────
   In landscape the header measured 183px — 47% of a 390px-tall viewport —
   leaving the Atlas panel 144px for a 650px pillar list. On short landscape
   viewports the date/search strip is the sacrifice; the nav row alone is the
   header. top:0 replaces the negative masthead offset (there is no masthead
   left to scroll away), keeping the nav row pinned and --hpc-header-h honest
   (the measurement JS reads the real collapsed height). */

@media (max-width: 900px) and (max-height: 450px) {

  .hpc-canvas-nav .masthead {
  		display: none;
  	}

  .hpc-canvas-nav header.hpc-header {
  		top: 0;
  	}

}