<!-- MVP Dashboard Clone V1.5.0 | 2026-07-31
     V1.5.0: seven targeted fixes from Anric's review of V1.4.0 (he signed the build off,
     "that looks really amazing", so these are corrections, not a redesign).
     FIX 1 THE REAL LOGO. The header's generic inline "MV" block mark is replaced with his
     actual supplied logo, self-hosted at public/assets/brand/mvp-logo.webp (120x120 native,
     transparent), rendered at 50x50 with the same drop-shadow his production header uses
     (see docs/reference/v3-source/UNIVERSAL-HEADER-v3.2.html, #mn-logo img). Never a
     filesafe.space hotlink. The favicon/apple-touch-icon stay the inline SVG data URIs they
     already were, so this adds one same-origin image and zero external requests.
     FIX 2 THE SEARCH RESULTS PANEL COULD NOT BE CLOSED. Root cause, traced not guessed:
     #mn-bar is position:sticky/top:0/z-index:9999 while .drawer-overlay and .drawer-backdrop
     were position:fixed/top:0/z-index 100 and 99, so the drawer opened UNDERNEATH the header
     and the strip the header covered was exactly .drawer-head, which carries the title, the
     count and the close control. The backdrop was covered in the same strip, so clicking
     there hit the header rather than closing anything. Both now start at var(--mn-bar-h),
     the header's real MEASURED height, published by setHeaderHeightVar() in app.js and kept
     current by a ResizeObserver (the bar changes height at four breakpoints, so a hardcoded
     offset would be wrong at three of them). Escape already closed the drawer and still
     does; it now returns focus to the search input when the drawer was opened from a search
     result. The command-palette dropdown additionally gains its own visible close control.
     FIX 3 SCROLL AFFORDANCE. The chevron on every internally scrolling panel was a 13px text
     glyph; it is an inline SVG chevron at 26px in a 52px fade now. Still pointer-events:none,
     still driven by real scroll position.
     FIX 4 HEADER SYMMETRY. The one flex row becomes a genuine three-zone CSS grid
     (minmax(0,1fr) auto minmax(0,1fr)): logo left, the PREVIEW chip + VAULT + OrO + LIVE +
     compass + FEEDBACK + the SYS/UTC/NEXT-LIVE readouts centred, search and avatar right.
     Equal 1fr side tracks are what makes the centre genuinely centred rather than floated.
     The bar is taller to carry it. Still ONE row at desktop, two below the existing 1100
     breakpoint, never three (the centre zone is flex-wrap:nowrap, so it cannot spill).
     FIX 5 BOXES 14 AND 15. The ops bay is a plain .mom-panel now, inheriting exactly the
     same frame as 07 CATALOG TELEMETRY and 08 QUICK LINKS instead of the heavier
     .mom-footer border, the same way QUICK LINKS was fixed in V1.1.0. Height cut, and the
     ops footer row rebuilt so nothing clips or squashes.
     FIX 6 THE ORB CORNERS. All four audited: TOOLS was an anchor to #portal-rail (visibly
     nothing), EVENTS pointed at the LIVE facet that V1.3.0 removed (an empty drawer). TOOLS
     now opens a TOOLS virtual-facet drawer (the deduplicated union of the 8 job facets minus
     PROGRAMS and LIBRARY items), EVENTS scrolls to and flashes panel 05 LIVE, PROGRAMS and
     LIBRARY are re-verified, and every corner pulses on click.
     FIX 7 THE VIDEO BROWSER. 12 FIND BY TOPIC is ported from his own Box 12, collapsed by
     default, rendering 36 real modules from the new data/videos.json.
     V1.4.0: three fixes, all direct from Anric after a side-by-side against his production
     dashboard. FIX 1, the header was three stacked bars (preview banner / header / status +
     search); it is now ONE row at desktop ("all of that could be on one line"), the 00a/00b/
     00c chrome markers are deleted, and the preview notice is a single chip. FIX 2, 05 LIVE
     is rebuilt as a faithful port of his own Box 03 WEDNESDAY ROTATION: three event rows
     (chip / title / host / countdown), one centred time line, a 2x2 button grid, and a
     separate PROGRESS block. FIX 3, the two content columns (02+03 and 05+06) are now equal
     flexible tracks instead of 278px vs 495px ("space them out evenly").
     V1.3.0 | 2026-07-30
     V1.3.0: top-to-bottom pass on Anric's docs/FEEDBACK-2026-07-30.md, plus two live
     corrections he sent mid-build (both fully applied, not left provisional): 01 PORTALS
     supersedes the brief's own provisional COMPLIANCE-fold with his direct instruction to
     drop LIVE and COMMUNITY as portals entirely (10 portals: 8 job tags + PROGRAMS +
     LIBRARY, see data/tags.json's _portalAudit comment for where every ex-LIVE/COMMUNITY
     item now lives); LIBRARY additionally gained a grouped-row expansion at sync time
     (scripts/sync-catalog.mjs) splitting 5 prose rows into 28 individually searchable
     titles across two labelled drawer groups, YOUR LIBRARY and THE CAPITAL MAGNETISM
     COLLECTION. 00 HEADER: the standalone status strip and standalone search strip both fold
     into #mn-bar (#mn-subbar), one sticky bar instead of three stacked ones. 02/03 renamed to
     ALERTS (personalised greeting via getMagnumUser(), data/note.json restructured with
     per-section ids) and LATEST RELEASES (status badge moved to a right-aligned column). 04
     THE ORB narrows (2.6fr -> 1.9fr of the row) and 05 LIVE/06 REPLAYS gain that width
     (0.9fr -> 1.6fr); 05 also adds the missing Magnum Cafe entry as its own CTA (not a 4th
     Wednesday) and a deeper JOIN ROOM shadow/gradient; 06's two-line replay rows no longer
     clip (align-items:flex-start); the shared .mom-panel top padding is cut so every panel's
     above/below title spacing is balanced (was a real, measured 21px/16px asymmetry). 07
     CATALOG TELEMETRY is hidden behind one SHOW_TELEMETRY flag in assets/app.js (computation
     still runs). 08 QUICK LINKS switches from a wrapping grid to a non-wrapping flex row
     (scrolls instead of wrapping) and gains a hover shimmer reusing the existing
     mom-hairline-shimmer tempo. 09 WORLD CLOCK is replaced with the real ported version (map
     + sun + 7 cities + Quick Actions + ops footer row) from
     docs/reference/v3-source/08_ROADMAP-CLOCK-ACTIONS.html, using the self-hosted
     public/assets/map/worldmap.webp. public/storypolish/index.html gets the same Universal
     Header (minus the dashboard-only search sub-row) so it authenticates identically and can
     navigate back to the dashboard.
     V1.2.0: two changes, both from Anric's own feedback pass. JOB 1, every addressable panel
     now carries a small numbered badge top to bottom (01 PORTALS through 08 QUICK LINKS),
     matching production's own "01 IDENTITY" / "03B LATEST REPLAYS" convention (see
     docs/reference/v3-source/02B_IDENTITY-ORBIT-ROTATION.html and 03_FEED-NOTE-REPLAYS.html
     for the sourced .plabel/.num markup, reused here as .mom-section-label/.mom-panel-num -
     see momentum.css). THE ORB (04) did not have a label at all before; it gets one now. The
     preview banner, header bar and status bar are chrome, not panels, so they get a quieter
     00a/00b/00c marker instead (.mvp-chrome-marker, momentum.css) - Anric could not give
     feedback on unlabelled boxes ("you have not labeled the cards or the boxes"), his own
     live dashboard already solves this and this clone had dropped the convention. JOB 2, the
     ported header's own search box (#mn-search, in the status bar below) is deleted: it
     duplicated this page's own #search-input, reproducing on this clone the exact "two
     competing search boxes, one dead" defect Anric reported on the live dashboard. The
     clone's own search is kept (real catalog wiring, command palette, facet filtering, Cmd+K/
     Ctrl+K/"/"); the header's #mn-search-results markup, its runSearch()/getResources()
     dead-search wiring, and its input listeners are removed from the status-bar logic script
     below (SYS ONLINE, the UTC clock and NEXT-LIVE countdown are untouched); window.
     MVP_RESOURCES, published only to feed that now-deleted box, is removed from app.js too
     (see the comment there).
     V1.1.0: JOB 1, the footer's link set is rebuilt as QUICK LINKS per FOOTER-SPEC.md
     revision 3 - no more status badges, all 13 entries are uppercase whole-tile-clickable
     boxes, the panel moved above the world clock ribbon and now matches the catalog
     telemetry panel's frame exactly, and the bottom brand/version block is deleted outright
     (its version stamp moved into the top preview banner, see #preview-version-chip). JOB 2,
     the StoryPolisher catalog entry now resolves to this clone's own local port
     (public/storypolish/index.html) via a data-only override in
     data/local-overrides.json, applied at sync time by scripts/sync-catalog.mjs - not
     hardcoded in app.js - with a small "CLONE" marker on that catalog row distinguishing it
     from production-hosted entries. JOB 3, the storypolish hero tagline's italic styling
     (an estate-wide no-italics violation inherited from the source) is replaced with the
     same non-italic bold-gold emphasis technique already used elsewhere in that file; the
     markdown `<em>` renderer further down the same file (AI-returned content, not page
     design) is untouched.
     V1.0.0: the MVP Universal Header V3.2 is now ported in (previously a visual placeholder,
     see the old JOB 5 note this replaced), so this clone can be tested against real Magnum
     Vault authentication. Full port notes, the four deliberate deviations from the source,
     Anric's two explicit decisions (MOPS enforced on this host, ADMIN_PASSWORD backdoor
     kept), and the CORS-visibility addition, live in the comment directly above the header
     block below, at the point where each one actually applies. Source: read-only reference
     at docs/reference/v3-source/UNIVERSAL-HEADER-v3.2.html, not modified by this port.
     V0.9.0: two changes. JOB 1, the primary gold CTA button (.live-join-btn) now renders a
     richer 4-stop gold gradient with a glossy inset highlight, sourced from his own
     .id-avatar ring gradient and .ignis-launch/.mag-launch CTA idiom in
     docs/reference/v3-source/02A_STYLES.html (see assets/app.css for the exact rules and
     the measured contrast). JOB 2, the footer grew from a world-clock ribbon + brand line
     into a full 13-entry link set rendered from data/footer.json (see
     docs/FOOTER-SPEC.md), with a required live/coming status treatment - coming entries
     never render as a clickable link. Header untouched, no auth added, per that job's
     explicit boundary.
     V0.8.0: the orb (gear cluster + corner shortcuts + background texture) is now ported
     directly from the real GoHighLevel section source
     (docs/reference/v3-source/02A_STYLES.html + 02B_IDENTITY-ORBIT-ROTATION.html, V3.9.22),
     not reverse-engineered from the rendered page. See momentum.css section 10 and app.js's
     buildOrbChrome() for the corrections this made. -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MVP Dashboard Clone (Preview)</title>
<meta name="description" content="Wave 1 preview of the Magnum Vault Pass member dashboard. Portals on the left, a drawer of sub-choices on the right, the orb still at the center.">
<!-- Installable, same pattern as the ops console: manifest + minimal meta tags, no external
     host fetches. Icon is an inline SVG data URI, no image files. -->
<meta name="theme-color" content="#000000">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="MVP Dashboard">
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIj4KPHBvbHlnb24gcG9pbnRzPSIyNiwwIDIwMCwwIDIwMCwxNzQgMTc0LDIwMCAwLDIwMCAwLDI2IiBmaWxsPSIjMDAwMDAwIi8+Cjxwb2x5Z29uIHBvaW50cz0iMjYsMCAyMDAsMCAyMDAsMTc0IDE3NCwyMDAgMCwyMDAgMCwyNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmFiZDU5IiBzdHJva2Utd2lkdGg9IjciLz4KPHRleHQgeD0iMTAwIiB5PSIxMzIiIGZvbnQtZmFtaWx5PSJBcmlhbCBCbGFjaywgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iODYiIGZvbnQtd2VpZ2h0PSI5MDAiIGZpbGw9IiNmYWJkNTkiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk1WPC90ZXh0Pgo8L3N2Zz4K">
<link rel="apple-touch-icon" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIj4KPHBvbHlnb24gcG9pbnRzPSIyNiwwIDIwMCwwIDIwMCwxNzQgMTc0LDIwMCAwLDIwMCAwLDI2IiBmaWxsPSIjMDAwMDAwIi8+Cjxwb2x5Z29uIHBvaW50cz0iMjYsMCAyMDAsMCAyMDAsMTc0IDE3NCwyMDAgMCwyMDAgMCwyNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmFiZDU5IiBzdHJva2Utd2lkdGg9IjciLz4KPHRleHQgeD0iMTAwIiB5PSIxMzIiIGZvbnQtZmFtaWx5PSJBcmlhbCBCbGFjaywgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iODYiIGZvbnQtd2VpZ2h0PSI5MDAiIGZpbGw9IiNmYWJkNTkiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk1WPC90ZXh0Pgo8L3N2Zz4K">
<style>
/* ==========================================================================
 MOMENTUM - Magnum Vault design system
 Extracted and codified, not invented. Every rule below traces to one of
 two production surfaces:

 [OPS] /Users/anricblatt/dev/magnum-ecosystem/ops/index.html
 MAESTRO operator console V3.x. Chamfered-corner idiom
 (clip-path), gold + cyan, Russo One / Inter / Space Mono.
 This is the INTERACTION and DENSITY reference.

 [MEMBER] live-dash-css.css, extracted from the live member dashboard
 at app.magnumvault.vip/dashboard. Everything that matters is
 scoped under ".mvp-cmd" inside a much larger GHL page-builder
 stylesheet (vendor boilerplate ignored). Rounded-panel idiom
 (border-radius, NOT clip-path), gold + status colors, Russo
 One / Verdana / JetBrains Mono. This is the MEMBER-FACING
 LOOK reference - the standard the rejected prototype broke.

 Every declaration is commented with [SOURCE] and the original selector.
 HARVESTED = a value copied verbatim from a source. CHOSEN = a value this
 file adds that has no direct source (fallback stacks, tabular-nums,
 reduced-motion handling). CHOSEN values are also listed in
 docs/DESIGN-SYSTEM.md so they can be reviewed, not just assumed.

 CORRECTION ON RECORD: the member dashboard was almost briefed to use
 chamfered clip-path corners, copying the OPS idiom. Verified by grep:
 live-dash-css.css contains ZERO clip-path declarations. The member
 dashboard's entire panel language is border-radius: 14px + a gradient
 hairline top edge + backdrop-filter blur. Chamfers are an OPS-only
 idiom (magnum-ecosystem/CLAUDE.md rule D2: "Chamfered corners, not pill
 rounding" - explicitly scoped to that project's own surfaces). This
 file follows the MEMBER idiom throughout because mvp-dashboard is a
 member-facing surface.

 NO ITALICS. NO EM DASHES. NO PILL RADII (no 999px/9999px/50% on
 buttons, chips, tags, badges). Small radii and the 14px panel radius
 are correct. NO external requests: no font CDNs, no remote images.
 Mobile first throughout.
 ========================================================================== */

/* ==========================================================================
 1. TOKENS
 ========================================================================== */

:root {
  /* ---- Surfaces -----------------------------------------------------
 [MEMBER] .panel, .welcome, .reactor-zone, .gear-cluster-zone,
 .wisdom-panel - all near-black translucent panes over a dark page
 background, distinguished only by opacity and gradient angle.
 [OPS] body background is flat #000000 (--mv-bg), card bg #0d0d0d
 (--mv-bg-card). OPS panels (.sidebar, .telemetry) use a subtle gold
 wash gradient instead of pure black. ------------------------------ */
  --mom-bg-page: #0a0a0c; /* CHOSEN: page canvas behind panels; both sources assume a near-black host page rather than defining one themselves */
  --mom-bg-panel: rgba(8, 8, 12, 0.74); /* [MEMBER] .panel background */
  --mom-bg-panel-dim: rgba(
    8,
    8,
    12,
    0.62
  ); /* [MEMBER] .reactor-zone background */
  --mom-bg-panel-solid: #0d0d0d; /* [OPS] --mv-bg-card */
  --mom-bg-inset: rgba(
    0,
    0,
    0,
    0.4
  ); /* [MEMBER] .stat, .wm, .whats-new background */
  --mom-bg-modal: linear-gradient(
    180deg,
    rgba(20, 20, 26, 0.98) 0%,
    rgba(12, 12, 16, 0.98) 100%
  ); /* [MEMBER] .wisdom-panel */
  --mom-bg-gear-zone: linear-gradient(
    180deg,
    rgba(15, 15, 20, 0.92) 0%,
    rgba(10, 10, 14, 0.92) 100%
  ); /* [MEMBER] .gear-cluster-zone */
  --mom-bg-ops-wash: linear-gradient(
    180deg,
    rgba(250, 189, 89, 0.04),
    rgba(0, 0, 0, 0.6)
  ); /* [OPS] .telemetry background */

  /* ---- Gold (primary accent, both surfaces) -------------------------- */
  --mom-gold: #f0c173; /* [MEMBER] primary gold used throughout .mvp-cmd (welcome-hello span, plabel, borders) */
  --mom-gold-ops: #fabd59; /* [OPS] --mv-gold. Slightly warmer/more saturated than the member gold. Kept distinct rather than merged: each surface's real value. */
  --mom-gold-dark: #d4a950; /* [OPS] --mv-gold-dark, also appears in [MEMBER] .id-avatar gradient stop */
  --mom-gold-border: #b8893e; /* [OPS] --mv-gold-border */
  --mom-gold-bright: #fabd59; /* [MEMBER] .id-avatar gradient mid stop, .gear:hover border-color */
  --mom-gold-hot: #ffd99b; /* [MEMBER] hover state text (wisdom-btn:hover, bulletin-link:hover) */
  --mom-gold-dim: rgba(250, 189, 89, 0.08); /* [OPS] --mv-gold-dim */

  /* ---- Cyan (OPS secondary accent) ------------------------------------
 [MEMBER] does NOT use true cyan anywhere in .mvp-cmd - grepped, zero
 hits for #4ecdc4/#22d3ee. Its "cool" accent is a blue, kept separate
 below as --mom-blue. Do not conflate the two; they come from
 different surfaces and are not interchangeable. --------------------- */
  --mom-cyan: #4ecdc4; /* [OPS] --mv-cyan */
  --mom-cyan-dim: rgba(78, 205, 196, 0.15); /* [OPS] --mv-cyan-dim */

  /* ---- Status colors --------------------------------------------------
 [MEMBER] .tag.* and .wisdom-btn.is-read / .welcome-pip
 [OPS] .status-row .ok, .a-status-tag, .a-finding.sev-* -------------- */
  --mom-green: #4ade80; /* [MEMBER] .tag.live, .tag.update, .welcome-pip, .wisdom-btn.is-read */
  --mom-green-ops: #4caf50; /* [OPS] --mv-green */
  --mom-amber: #f0c173; /* [MEMBER] .tag.soon / .tag.coming reuse the primary gold - "coming" is not a distinct hue in this system */
  --mom-orange: #fb923c; /* [MEMBER] .tag.beta, .mag-beta-pill */
  --mom-orange-alt: #ff9f1c; /* [MEMBER] .wb-card-pill (workbench/rough-beta accent, distinct from .tag.beta orange) */
  --mom-red: #dc143c; /* [MEMBER] .lr-tag, .live-cta.primary, .core-node crimson; [OPS] --mv-red. Same crimson in both - this is the one color both sources agree on exactly. */
  --mom-red-dim: rgba(220, 20, 60, 0.1);
  --mom-purple: #c084fc; /* [MEMBER] .tag.publishing */
  --mom-blue: #60a5fa; /* [MEMBER] .tag.upcoming, .tag.entry, .cap-card.theme-blueprint */

  /* ---- Text tiers ------------------------------------------------------
 [MEMBER] base text #e8e8e8 (.mvp-cmd), headings #fff, muted #888,
 dimmer body copy #cfcfcf/#aaa.
 [OPS] --mv-text #fff, --mv-text-muted #888888, --mv-text-dim #555555. */
  --mom-text: #ffffff; /* [OPS] --mv-text; [MEMBER] headings (.id-name, .welcome-hello, .cm-title) */
  --mom-text-body: #e8e8e8; /* [MEMBER] .mvp-cmd base color */
  --mom-text-soft: #cfcfcf; /* [MEMBER] .id-meta b, .bulletin-body, .cm-tagline */
  --mom-text-muted: #888888; /* [MEMBER] .wm-lab, .welcome-sub; [OPS] --mv-text-muted */
  --mom-text-dim: #555555; /* [OPS] --mv-text-dim, faintest tier, used sparingly */

  /* ---- Borders (gold, at varying opacity - this system's real texture) */
  --mom-border-faint: rgba(
    240,
    193,
    115,
    0.12
  ); /* [MEMBER] .plabel border-bottom */
  --mom-border-soft: rgba(240, 193, 115, 0.22); /* [MEMBER] .panel border */
  --mom-border: rgba(240, 193, 115, 0.32); /* [MEMBER] .program-card border */
  --mom-border-strong: rgba(
    240,
    193,
    115,
    0.5
  ); /* [MEMBER] .id-tier border, .welcome-vchip border */
  --mom-border-solid: #f0c173; /* [MEMBER] :hover state borders go fully opaque */
  --mom-border-ops: var(
    --mom-gold-border
  ); /* [OPS] most borders are the flat --mv-gold-border, not a rgba wash */

  /* ---- Type scale --------------------------------------------------
 Harvested by walking every font-size in both files. Two surfaces,
 near-identical ladders. Smallest real UI text found: 8px
 ([OPS] .net-k / .net-u, the network-test readout labels). Nothing
 in either source goes below that. Base body text is 14-16px, not
 the 16-18px an "airy" layout would use. -------------------------- */
  --mom-text-2xs: 8px; /* [OPS] .net-k, .net-u */
  --mom-text-xs: 10px; /* [MEMBER] .wn-toggle, .tag; [OPS] .vital-row */
  --mom-text-sm: 11px; /* [MEMBER] .cm-meta, .welcome-sub; [OPS] .panel-head, .status-row */
  --mom-text-base: 13px; /* [MEMBER] .plabel; [OPS] .search */
  --mom-text-md: 14px; /* [OPS] body base font-size; [MEMBER] .feed-item, .live-cta */
  --mom-text-lg: 16px; /* [MEMBER] .mvp-cmd base font-size; .wb-card-name */
  --mom-text-xl: 18px; /* [MEMBER] .stat .v on narrow layouts, .id-avatar-inner mobile */
  --mom-text-2xl: 22px; /* [MEMBER] .welcome-hello, .cm-title, .wisdom-quote; [OPS] .brand-name */
  --mom-text-3xl: 24px; /* [MEMBER] .id-name */
  --mom-text-4xl: 28px; /* [MEMBER] .stat .v - the largest figure treatment in the system */
  --mom-text-5xl: 32px; /* CHOSEN, V0.4.0: mvp-dashboard's own hero-figure tier. Neither
    source goes above 28px, but the V0.3.0 rejection ("everything lives in a 6px band")
    was fixed by widening the ladder at both ends, not just adding mid tiers. Used for
    exactly one spot: the catalog telemetry TOTAL ITEMS figure, the "one hero figure"
    the density brief allows above the panel-heading tier. */

  /* ---- Spacing scale --------------------------------------------------
 Harvested from panel padding and gap values actually in use. This
 system does not run on an 8pt grid; it runs tight, mostly 8-22px. */
  --mom-space-1: 4px;
  --mom-space-2: 8px;
  --mom-space-3: 10px;
  --mom-space-4: 12px;
  --mom-space-5: 14px;
  --mom-space-6: 16px;
  --mom-space-7: 18px;
  --mom-space-8: 20px;
  --mom-space-9: 22px;
  --mom-space-10: 26px;

  /* ---- Radii -----------------------------------------------------------
 [MEMBER] panel radius is 14px, confirmed by grep (12 hits of
 "border-radius: 14px" across .welcome/.panel/.capital-magnet/
 .gear-cluster-zone). Smaller interior elements step down from there.
 NEVER 999px/9999px on interactive chrome - verified zero uses in
 both sources on buttons/tags/badges; anything called ".pill" in the
 member CSS (.wb-card-pill) is styled with border-radius: 3px, a
 square-cornered chip that kept an old class name, not an actual
 pill. Do not let the name mislead a rebuild. ------------------------ */
  --mom-radius-xs: 3px; /* [OPS] .nav-icon, .chip, .search; [MEMBER] .wb-card-pill, .tag */
  --mom-radius-sm: 5px; /* [MEMBER] .plabel .num, .wisdom-close */
  --mom-radius-md: 7px; /* [MEMBER] .welcome-vchip */
  --mom-radius-lg: 9px; /* [MEMBER] .wm, .stat, .id-btn */
  --mom-radius-xl: 11px; /* [MEMBER] .whats-new, .cm-ico is 18px separately */
  --mom-radius-2xl: 13px; /* [MEMBER] .program-card, .cluster .ch */
  --mom-radius-panel: 14px; /* [MEMBER] .panel, .welcome, .capital-magnet, .gear-cluster-zone - THE panel radius */
  --mom-radius-full: 50%; /* circular only: avatars, dots, rings - never used on rectangular chrome */

  /* ---- Shadows -----------------------------------------------------
 [MEMBER] every panel carries a drop shadow plus an inset top
 highlight line, in that exact pairing. ------------------------------ */
  --mom-shadow-panel:
    0 6px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03); /* [MEMBER] .panel */
  --mom-shadow-panel-lg:
    0 8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04); /* [MEMBER] .reactor-zone */
  --mom-shadow-feature:
    0 8px 28px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04); /* [MEMBER] .capital-magnet */
  --mom-shadow-modal:
    0 24px 60px rgba(0, 0, 0, 0.7), 0 0 36px rgba(240, 193, 115, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04); /* [MEMBER] .wisdom-panel */
  --mom-shadow-glow-gold: 0 0 16px rgba(240, 193, 115, 0.2); /* [MEMBER] .id-btn:hover */
  --mom-shadow-glow-red: 0 4px 14px rgba(220, 20, 60, 0.4); /* [MEMBER] .live-cta.primary */

  /* ---- Blur (backdrop-filter) --------------------------------------
 Confirmed by grep: 12 backdrop-filter uses in live-dash-css.css,
 all in the 6-10px range. There is no large/heavy blur in this
 system. ------------------------------------------------------------ */
  --mom-blur-sm: 6px; /* [MEMBER] .wisdom-backdrop */
  --mom-blur-md: 8px; /* [MEMBER] .panel, .reactor-zone */
  --mom-blur-lg: 10px; /* [MEMBER] .welcome */

  /* ---- Motion durations ---------------------------------------------
 FIXED ESTATE TEMPOS. Do not re-invent. Verified by grep against
 [OPS] index.html: .ring-spin-cw { animation: spin 22s } (slow),
 .radar-blip inline --drift-dur alternates 9s/14s/22s across the
 eight blips (fast/mid/slow three-tier system), .head::after
 { animation: sweepLine 6s } (beam), #maestroStopBtn.is-active
 { animation: pulse 1.5s } (blink). Also documented as house rule
 D4 in magnum-ecosystem/CLAUDE.md: "match the duration cadence
 (slow ring 22s, mid 14s, fast 9s, beam 6s, blink 1.5s)." --------- */
  --mom-dur-slow: 22s;
  --mom-dur-mid: 14s;
  --mom-dur-fast: 9s;
  --mom-dur-beam: 6s;
  --mom-dur-blink: 1.5s;
  /* Secondary tempos actually in production, kept distinct from the
 five canonical ones above rather than rounded into them: */
  --mom-dur-glow: 2.6s; /* [MEMBER] mvp-current-glow-small/big */
  --mom-dur-meter: 4s; /* [OPS] vital-flux (telemetry bar breathing) */
  --mom-dur-hairline: 4s; /* [OPS] borderSlide (sidebar top shimmer) */
  --mom-dur-gear: 60s; /* [MEMBER] mvp-gear-spin-cw/ccw (atmosphere gear rotation, deliberately slow/ambient) */
}

/* Every gold border/background token above is expressed at member-dashboard
 opacity. Components that want the OPS flat-gold look should reference
 --mom-gold-ops / --mom-border-ops directly instead. */

/* ==========================================================================
 2. TYPOGRAPHY
 ========================================================================== */

/* ---- Font stacks -----------------------------------------------------
 REAL fonts in use, harvested verbatim:
 [MEMBER] headings: 'Russo One', sans-serif (welcome-hello, id-name, cm-title, stat .v)
 [MEMBER] body: Verdana, Geneva, Tahoma, sans-serif (.mvp-cmd base - not a premium
 font choice, a GHL page-builder default the dashboard inherited)
 [MEMBER] mono/data: 'JetBrains Mono', monospace (plabel, tags, all figures/labels)
 [OPS] headings: 'Russo One', sans-serif (--font-head)
 [OPS] body: 'Inter', sans-serif (--font-body)
 [OPS] mono/data: 'Space Mono', monospace (--font-mono)

 SUBSTITUTION NOTICE: Russo One, Inter, and both monospace faces are
 loaded from Google Fonts in production (<link href="fonts.googleapis...">
 in ops/index.html). This machine has none of them installed and this
 project cannot make external font requests. The stacks below are
 CHOSEN fallbacks that approximate each face's weight and character,
 not the real fonts. Swap in the real @font-face / <link> the moment
 external loading is allowed again; until then every "Russo One"
 heading on screen is actually a heavy system fallback. ---------------- */

:root {
  /* CHOSEN: heavy condensed-ish fallback for Russo One. Real Russo One is a
 single-weight, very heavy, slightly condensed display face. Arial
 Narrow / Segoe UI / system-ui at font-weight 900 with tightened
 letter-spacing is the closest safe local approximation. */
  --mom-font-head:
    "Arial Narrow", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mom-font-head-weight: 900;

  --mom-font-body-member:
    Verdana, Geneva, Tahoma, sans-serif; /* [MEMBER] harvested exactly, no substitution needed, it's already a system font */
  --mom-font-body-ops:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* CHOSEN fallback for OPS's Inter */

  /* [MEMBER] harvested fallback chain, found verbatim once in
 live-dash-css.css: 'JetBrains Mono', monospace, ui-monospace,
 SFMono-Regular, Menlo, Consolas - reused here for both surfaces'
 mono treatment since Space Mono has no meaningfully different
 local substitute. */
  --mom-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- Heading treatment [MEMBER] .welcome-hello / .cm-title / .id-name */
.mom-h {
  font-family: var(--mom-font-head);
  font-weight: var(--mom-font-head-weight);
  color: var(--mom-text);
  letter-spacing: 0.5px;
  line-height: 1.2;
  font-style: normal; /* never italic */
}

/* ---- Micro-label: small letterspaced uppercase caption ---------------
 [MEMBER] .wm-lab, .welcome-sub, .id-meta; [OPS] .status-row,
 .brand-sub, .vital-row. The single most repeated text treatment in
 both sources. --------------------------------------------------------- */
.mom-label {
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-xs);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mom-text-muted);
}

/* ---- Monospace tabular figure -----------------------------------------
 [MEMBER] .stat .v, .wm-num; [OPS] .vital-row b, .net-v - every number
 on screen is set in the mono face, which is what makes columns of
 figures line up. Neither source sets an explicit tabular-nums
 property (grepped: zero hits for font-variant-numeric in both files);
 monospace alone was relied on to do that job. CHOSEN addition below:
 font-variant-numeric: tabular-nums, a safe reinforcement that changes
 nothing visually in a monospace face but keeps digits aligned if this
 is ever set in a proportional fallback. ------------------------------ */
.mom-figure {
  font-family: var(--mom-font-mono);
  font-variant-numeric: tabular-nums; /* CHOSEN, see note above */
  color: var(--mom-gold);
  line-height: 1;
  font-style: normal;
}

/* ==========================================================================
 3. PANEL - the core surface component
 [MEMBER] .panel, live-dash-css.css lines 845-854 (also .welcome, line
 571-587, and .reactor-zone, line 1149-1158, which are the same recipe
 at slightly different opacity/blur). This is THE member-dashboard
 panel idiom: rounded corners, translucent dark fill, backdrop blur,
 a soft gold border, and a gradient hairline laid along the top edge
 with an ::before pseudo-element. No clip-path anywhere in this
 component family - confirmed by grep, 0 hits in the source file.
 ========================================================================== */

.mom-panel {
  position: relative;
  background: var(--mom-bg-panel);
  backdrop-filter: blur(var(--mom-blur-md));
  -webkit-backdrop-filter: blur(var(--mom-blur-md));
  border: 1px solid var(--mom-border-soft);
  border-radius: var(--mom-radius-panel);
  /* V1.3.0 global spacing fix, direct from Anric: every panel had more space above its title
     than below it (measured, getBoundingClientRect at 1680px, before this fix: 21px above
     the label text, 16px below it, on Portals/Alerts/Latest Releases/Replays - a real,
     consistent 5px asymmetry, not a one-panel bug). Top padding cut from --mom-space-8 (20px)
     to --mom-space-6 (16px), left/right/bottom untouched, so panels are shorter (real estate
     reclaimed) and the two gaps read as balanced instead of top-heavy. .mom-section-label's
     own padding-bottom/margin-bottom (momentum.css section 4) are untouched - the fix is
     entirely in this one top-padding value, shared by every .mom-panel on the page. */
  padding: var(--mom-space-6) var(--mom-space-9) var(--mom-space-8); /* was space-8 space-9 (20px 22px) on all sides */
  box-shadow: var(--mom-shadow-panel);
}

/* Gradient hairline along the top edge. [MEMBER] .panel::before, line 854:
 "content:''; position:absolute; top:-1px; left:14px; right:14px;
 height:1px; background:linear-gradient(90deg, transparent,
 rgba(240,193,115,0.6), transparent);" - inset 14px from each side so
 the line reads as a highlight, not a full border. */
.mom-panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(240, 193, 115, 0.6),
    transparent
  );
  pointer-events: none;
}

/* Feature-panel variant: slightly stronger border + gradient fill wash.
 [MEMBER] .capital-magnet, line 979-991, and .program-card, line
 1085-1096 (same recipe, different gradient stop). Used for a single
 promoted CTA card inside a denser layout, not for ordinary panels. */
.mom-panel--feature {
  background: linear-gradient(
    135deg,
    rgba(240, 193, 115, 0.14) 0%,
    rgba(8, 8, 12, 0.85) 60%
  );
  border-color: rgba(240, 193, 115, 0.45);
  box-shadow: var(--mom-shadow-feature);
  overflow: hidden;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}
.mom-panel--feature::before {
  height: 2px;
  opacity: 0.85;
}
.mom-panel--feature:hover {
  transform: translateY(-2px);
  border-color: var(--mom-gold);
  box-shadow: 0 12px 36px rgba(240, 193, 115, 0.22);
}

/* Dim/quiet variant. [MEMBER] .reactor-zone, line 1149-1158 - same shape,
 lower base opacity, used behind a busy diagram so the diagram reads
 first. */
.mom-panel--dim {
  background: var(--mom-bg-panel-dim);
  box-shadow: var(--mom-shadow-panel-lg);
}

/* Inset sub-panel: nested block inside a .mom-panel, flat black rather
 than translucent gold-tinted. [MEMBER] .stat, .wm, .whats-new
 (line 920, 609, 925-931). */
.mom-inset {
  background: var(--mom-bg-inset);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--mom-radius-lg);
  padding: var(--mom-space-4) var(--mom-space-5);
}

/* Modal panel. [MEMBER] .wisdom-panel, line 692-707 - the same hairline
 trick but a 2px line at full gold opacity instead of 1px/60%, because
 a modal needs a stronger top accent to read over a dimmed backdrop. */
.mom-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(var(--mom-blur-sm));
  -webkit-backdrop-filter: blur(var(--mom-blur-sm));
}
.mom-modal-panel {
  position: relative;
  background: var(--mom-bg-modal);
  border: 1px solid rgba(240, 193, 115, 0.55);
  border-radius: 8px; /* [MEMBER] harvested exactly: modal uses a tighter 8px, not the 14px panel radius */
  padding: 36px 40px 32px;
  box-shadow: var(--mom-shadow-modal);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.mom-modal-panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 30px;
  right: 30px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--mom-gold), transparent);
  opacity: 0.7;
}

/* [OPS] equivalent surface, for parity reference only: .sidebar/.telemetry
 (line 332-338, 400-406) are flat-bordered, squared corners, no
 backdrop-filter, no hairline pseudo-element - a plainer, denser
 idiom than the member panel. Included so a page mixing both surfaces
 doesn't accidentally invent a third look. */
.mom-panel--ops {
  background: var(--mom-bg-ops-wash);
  border: 1px solid var(--mom-border-ops);
  border-radius: 0;
  padding: var(--mom-space-6) var(--mom-space-7);
}

/* ==========================================================================
 4. SECTION LABEL - caret, uppercase micro-label, numbered badge, rule
 Both sources use a version of this above every content block.
 [MEMBER] .plabel, line 855-863 (solid border-bottom rule, numbered
 badge, no caret).
 [OPS] .panel-head, line 348-358 (dashed border-bottom rule, cyan
 caret glyph via ::before, no numbered badge).
 Merged here into one component with both features available, because
 a rebuild should be able to reach for either without re-deriving them.
 ========================================================================== */

.mom-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-lg); /* CHOSEN, V0.4.0: bumped from --mom-text-base (13px) to
    --mom-text-lg (16px). V0.3.0's panel headings sat in the same 6px band as everything
    else on the page (defect 1, "no type hierarchy"); this is the "panel headings 15-17px"
    tier the density brief calls for, still a real token from the existing scale. */
  letter-spacing: 1.6px;
  color: var(--mom-gold);
  text-transform: uppercase;
  margin-bottom: var(--mom-space-6);
  padding-bottom: var(--mom-space-4);
  border-bottom: 1px solid var(--mom-border-faint); /* [MEMBER] .plabel: solid rule */
}

/* [OPS] variant: dashed rule instead of solid, smaller size, no bottom
 margin baked in (OPS labels sit inside tighter sidebars). */
.mom-section-label--ops {
  font-size: var(--mom-text-sm);
  letter-spacing: 2.5px;
  border-bottom: 1px dashed var(--mom-border-ops);
  padding-bottom: var(--mom-space-2);
}

/* Caret marker. [OPS] .panel-head::before, line 358: content:'▸ ';
 color:var(--mv-cyan). The member dashboard has no caret; this is an
 OPS-only accent, ported as an optional modifier rather than forced
 onto every label. */
.mom-section-label--caret::before {
  content: "▸ ";
  color: var(--mom-cyan);
}

/* Numbered badge. [MEMBER] .plabel .num, line 863: background
 rgba(240,193,115,0.12); color gold; padding 3px 10px; border-radius
 5px; font-size 12px. */
.mom-section-label .mom-num {
  background: rgba(240, 193, 115, 0.12);
  color: var(--mom-gold);
  padding: 3px 10px;
  border-radius: var(--mom-radius-sm);
  font-size: 12px;
}

/* Panel-index badge (V1.2.0, JOB 1). Anric could not give feedback because panels were
 unlabelled ("you have not labeled the cards or the boxes"); production already numbers every
 panel top to bottom (docs/reference/v3-source/03_FEED-NOTE-REPLAYS.html line 35:
 <span class="num">05</span> RELEASE FEED; 02B_IDENTITY-ORBIT-ROTATION.html line 127:
 <span class="num">01</span> IDENTITY). Same exact visual as .mom-num directly above (byte-
 identical background/color/padding/radius/font-size, the .plabel .num pattern reused, not
 reinvented) but a DIFFERENT class: .mom-num stays reserved for live item counts on the right
 of a label (RELEASE FEED, REPLAYS); .mom-panel-num is the static left-hand ordinal (01-08)
 every panel now carries, sitting inside the label's own first <span> ahead of its text, same
 position the sourced markup uses. */
.mom-section-label .mom-panel-num {
  background: rgba(240, 193, 115, 0.12);
  color: var(--mom-gold);
  padding: 3px 10px;
  border-radius: var(--mom-radius-sm);
  font-size: 12px;
  margin-right: var(--mom-space-2);
}

/* Chrome markers (00a BANNER / 00b HEADER / 00c STATUS + SEARCH) were removed in V1.4.0.
 They were added in V1.2.0 only so Anric could name a region of the page chrome in feedback
 ("you have not labeled the cards or the boxes"). He has since given that feedback on the
 header, so the markers had served their purpose and were, in his words, part of what made
 the header read as "too much being jammed in there". The .mvp-chrome-marker rule that lived
 here is deleted along with its three call sites in index.html. The numbered badges on real
 addressable panels (.mom-panel-num, 01 through 08) are a different thing and stay. */

/* ==========================================================================
 5. BADGES & CHIPS
 [MEMBER] .tag.* family, line 1289-1298 (status badges: live/new/
 soon/coming/beta/update/publishing/upcoming/entry/primary/note).
 [OPS] .nav-icon, line 374-384 (two-letter squared category badge,
 ADMIN PORTALS sidebar list) and .chip, line 184-194 (header chip).
 NONE of these use a pill radius. The member CSS has one class
 literally named ".wb-card-pill" that nonetheless renders with
 border-radius: 3px - a square chip wearing an old name. Do not let
 the class name "pill" anywhere in the source imply 999px rounding.
 ========================================================================== */

.mom-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mom-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--mom-radius-xs); /* 3px - never pill */
  border: 1px solid transparent;
  line-height: 1.5;
}

/* Status variants, harvested colors verbatim from .tag.* */
.mom-badge--live {
  background: rgba(74, 222, 128, 0.18);
  color: var(--mom-green);
  border-color: rgba(74, 222, 128, 0.4);
}
.mom-badge--new {
  background: var(--mom-gold);
  color: #000;
  border-color: var(--mom-gold);
  font-weight: 700;
}
.mom-badge--update {
  background: rgba(74, 222, 128, 0.2);
  color: var(--mom-green);
  border-color: rgba(74, 222, 128, 0.4);
}
.mom-badge--coming {
  background: rgba(240, 193, 115, 0.15);
  color: var(--mom-gold);
  border-color: rgba(240, 193, 115, 0.4);
}
.mom-badge--beta {
  background: rgba(249, 115, 22, 0.22);
  color: var(--mom-orange);
  border-color: rgba(249, 115, 22, 0.55);
  font-weight: 700;
}
.mom-badge--publishing {
  background: rgba(168, 85, 247, 0.18);
  color: var(--mom-purple);
  border-color: rgba(168, 85, 247, 0.4);
}
.mom-badge--upcoming {
  background: rgba(96, 165, 250, 0.18);
  color: var(--mom-blue);
  border-color: rgba(96, 165, 250, 0.4);
}
.mom-badge--primary {
  background: rgba(240, 193, 115, 0.2);
  color: var(--mom-gold);
  border-color: rgba(240, 193, 115, 0.4);
}
.mom-badge--note {
  background: rgba(255, 255, 255, 0.06);
  color: #aaa;
  border-color: rgba(255, 255, 255, 0.08);
}
/* CHOSEN: dead-link status variant, needed by mvp-dashboard's link-health feature.
 Neither source has a "dead" tag/status; this extends the same family with the
 already-harvested --mom-red token rather than inventing a new color. */
.mom-badge--dead {
  background: var(--mom-red-dim);
  color: var(--mom-red);
  border-color: rgba(220, 20, 60, 0.5);
}

/* Two-letter squared category badge. [OPS] .nav-icon, line 374-384:
 28x28 fixed box, gold-wash fill, 3px radius, heading font at 11px.
 Used in the ADMIN PORTALS sidebar list for two-letter category codes
 (MV, ST, CL, IF, AI, LV, MN, SE, EM, UT, MX). */
.mom-badge-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--mom-gold-dim);
  border: 1px solid var(--mom-border-ops);
  border-radius: var(--mom-radius-xs);
  font-family: var(--mom-font-head);
  font-weight: var(--mom-font-head-weight);
  font-size: 11px;
  color: var(--mom-gold-ops);
  letter-spacing: 1px;
  flex-shrink: 0;
}

/* Header chip. [OPS] .chip, line 184-194. */
.mom-chip {
  display: inline-block;
  font-family: var(--mom-font-head);
  font-weight: var(--mom-font-head-weight);
  font-size: 10px;
  letter-spacing: 2px;
  padding: 4px 10px;
  border: 1px solid var(--mom-cyan);
  color: var(--mom-cyan);
  background: var(--mom-cyan-dim);
  border-radius: var(--mom-radius-xs);
}

/* ==========================================================================
 6. DATA DISPLAY - telemetry meter, tabular figures
 [OPS] .vital / .vital-row / .vital-bar / .vital-fill, line 407-431.
 A labeled thin meter bar that "breathes" (width oscillates a few
 percent around its real value on a 4s loop) rather than sitting
 static. This is the FLEET TELEMETRY sidebar pattern (WORKERS LIVE,
 REQUESTS, ERRORS, UPTIME, REQ/DAY, CF COST). Not to be confused with
 the GHL page-builder's generic .progress-outer/.progress-inner widget
 found elsewhere in live-dash-css.css - that is vendor boilerplate,
 unrelated to this system, and was not ported.
 ========================================================================== */

.mom-meter {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mom-meter-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-xs);
  letter-spacing: 1.5px;
  color: var(--mom-text-muted);
  text-transform: uppercase;
}
.mom-meter-row b {
  color: var(--mom-text);
  font-weight: 400;
  font-variant-numeric: tabular-nums; /* CHOSEN, see section 2 note */
}
.mom-meter-track {
  height: 4px;
  background: rgba(250, 189, 89, 0.08);
  border-radius: 1px;
  position: relative;
  overflow: hidden;
}
.mom-meter-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--mom-lvl, 50%);
  background: linear-gradient(90deg, var(--mom-gold-dark), var(--mom-gold-ops));
  box-shadow: 0 0 8px rgba(250, 189, 89, 0.6);
  animation: mom-meter-flux var(--mom-dur-meter) ease-in-out infinite;
}
@keyframes mom-meter-flux {
  0%,
  100% {
    width: var(--mom-lvl, 50%);
  }
  50% {
    width: calc(var(--mom-lvl, 50%) + 6%);
  }
}

/* Stat figure. [MEMBER] .stat .v / .stat .l, line 920-922: the largest
 numeral treatment in the system (28px, Russo One, gold), paired with
 a micro-label underneath. */
.mom-stat {
  background: var(--mom-bg-inset);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--mom-radius-lg);
  padding: 12px 14px;
  text-align: center;
}
.mom-stat .mom-stat-value {
  font-family: var(--mom-font-head);
  font-weight: var(--mom-font-head-weight);
  font-size: var(--mom-text-4xl);
  color: var(--mom-gold);
  line-height: 1;
  font-variant-numeric: tabular-nums; /* CHOSEN */
}
.mom-stat .mom-stat-label {
  font-family: var(--mom-font-mono);
  font-size: 11.5px;
  color: var(--mom-text-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-top: 6px;
}

/* ==========================================================================
 7. MOTION
 Fixed estate tempos only (see tokens: --mom-dur-slow/mid/fast/beam/
 blink). Named keyframes below map 1:1 to a real production animation;
 none of these durations were invented for this file.
 ========================================================================== */

/* Blink - [OPS] #maestroStopBtn.is-active, line 1144: "animation: pulse
 1.5s ease-in-out infinite". Canonical blink tempo. Also present as
 [MEMBER] .pulse-dot / cmd-blink at a close-but-not-identical 1.4s/2s
 (both real production values, listed here as the exact 1.5s canon
 plus the member's own near-variants for anyone matching pixel-for-
 pixel against the live dashboard). */
@keyframes mom-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
.mom-motion-blink {
  animation: mom-blink var(--mom-dur-blink) ease-in-out infinite;
}

/* Live status dot with glow. [MEMBER] .welcome-pip / .pulse-dot, line
 589-595, 864. */
.mom-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mom-green);
  box-shadow:
    0 0 12px var(--mom-green),
    0 0 24px rgba(74, 222, 128, 0.5);
  animation: mom-blink var(--mom-dur-blink) ease-in-out infinite;
}
.mom-dot--red {
  background: var(--mom-red);
  box-shadow: 0 0 8px var(--mom-red);
}

/* Pulse ring - [MEMBER] .core-node .ring / cmd-pulse-ring, line
 1165-1168: an expanding, fading ring, used staggered (0s/1s/2s
 delays on three stacked rings) to read as a continuous pulse. */
@keyframes mom-pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
.mom-motion-pulse-ring {
  animation: mom-pulse-ring 3s ease-in-out infinite;
}

/* Orbit / spin family - [OPS] .ring-spin-cw/.ring-spin-ccw/.ring-spin-fast,
 line 495-497, and the radar-blip drift tiers (line 1496-1503) which
 use exactly --drift-dur: 9s / 14s / 22s across the eight blips. These
 three durations ARE the canonical slow/mid/fast tempos. */
@keyframes mom-spin {
  to {
    transform: rotate(360deg);
  }
}
.mom-motion-orbit-slow {
  animation: mom-spin var(--mom-dur-slow) linear infinite;
}
.mom-motion-orbit-mid {
  animation: mom-spin var(--mom-dur-mid) linear infinite;
}
.mom-motion-orbit-fast {
  animation: mom-spin var(--mom-dur-fast) linear infinite;
}
.mom-motion-orbit-ccw {
  animation: mom-spin 30s linear infinite reverse;
} /* [OPS] .ring-spin-ccw exact value, kept separate from canon */
.mom-motion-orbit-mid-ccw {
  animation: mom-spin var(--mom-dur-mid) linear infinite reverse;
} /* CHOSEN, V0.4.0: the 14s tempo counter-rotating, needed so the orb placeholder's two
     rings visibly counter-rotate on the two canonical tempos (22s/14s) instead of pairing
     22s against the unrelated 30s ccw value above. */
.mom-motion-orbit-beam {
  animation: mom-spin var(--mom-dur-beam) linear infinite;
} /* CHOSEN, V0.4.0: reuses the canonical beam tempo (6s) and the existing mom-spin
     keyframe for a rotating sweep, rather than the horizontal mom-motion-beam shape,
     for the orb placeholder's beam sweep. */

/* Beam sweep - [OPS] .head::after / sweepLine, line 141-151: a
 horizontal hairline under the header that brightens and widens on a
 6s loop. THE canonical beam tempo. */
@keyframes mom-beam-sweep {
  0%,
  100% {
    opacity: 0.4;
    transform: scaleX(0.8);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}
.mom-motion-beam {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--mom-gold-ops) 50%,
    transparent
  );
  animation: mom-beam-sweep var(--mom-dur-beam) ease-in-out infinite;
  pointer-events: none;
}

/* Hairline shimmer - [OPS] .sidebar::before / borderSlide, line
 339-347: a short gradient segment that slides in from the left edge
 and fades, 4s loop. Used at the top of the ADMIN PORTALS sidebar. */
@keyframes mom-hairline-shimmer {
  0%,
  100% {
    transform: translateX(-50%);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
}
.mom-motion-hairline {
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--mom-gold-ops),
    transparent
  );
  animation: mom-hairline-shimmer var(--mom-dur-hairline) ease-in-out infinite;
  pointer-events: none;
}

/* Current-state glow - [MEMBER] mvp-current-glow-small, line 2389-2392:
 used on the ecosystem gear cluster to mark the node the member is
 "on" right now, distinct from done (steady) and locked (grayscale). */
@keyframes mom-glow-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 12px rgba(240, 193, 115, 0.45))
      drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
  }
  50% {
    filter: drop-shadow(0 0 26px rgba(250, 189, 89, 0.85))
      drop-shadow(0 0 44px rgba(240, 193, 115, 0.4))
      drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
  }
}
.mom-motion-glow {
  animation: mom-glow-pulse var(--mom-dur-glow) ease-in-out infinite;
}

/* Log/feed line entrance - [OPS] .log-line / log-in, line 452-458: a
 one-shot (not looping) fade + slide-in used when a new line appears
 in the live log window. */
@keyframes mom-line-in {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.mom-motion-line-in {
  animation: mom-line-in 0.4s forwards;
}

/* Ambient gear rotation - [MEMBER] mvp-gear-spin-cw/ccw, line 2401-2405:
 the atmosphere gear cluster rotates very slowly (60s), big nodes
 clockwise, small nodes counter-clockwise, "the way real interlocked
 gear trains turn" per the source comment. Paused on hover so a label
 can be read. This tempo is intentionally NOT one of the five
 canonical durations - it is slower on purpose, for background
 atmosphere rather than a status signal. */
@keyframes mom-gear-spin-cw {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes mom-gear-spin-ccw {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
.mom-motion-gear-cw {
  animation: mom-gear-spin-cw var(--mom-dur-gear) linear infinite;
}
.mom-motion-gear-ccw {
  animation: mom-gear-spin-ccw var(--mom-dur-gear) linear infinite;
}

/* Reduced motion - [MEMBER] carries its own reduced-motion guard for the
 gear cluster (line 2406-2408); this block generalizes that same
 pattern to every animation class this file defines. */
@media (prefers-reduced-motion: reduce) {
  .mom-motion-blink,
  .mom-dot,
  .mom-motion-pulse-ring,
  .mom-motion-orbit-slow,
  .mom-motion-orbit-mid,
  .mom-motion-orbit-fast,
  .mom-motion-orbit-ccw,
  .mom-motion-orbit-mid-ccw,
  .mom-motion-orbit-beam,
  .mom-motion-beam,
  .mom-motion-hairline,
  .mom-motion-glow,
  .mom-motion-line-in,
  .mom-motion-gear-cw,
  .mom-motion-gear-ccw,
  .mom-meter-fill {
    animation: none !important;
  }
}

/* ==========================================================================
 8. ATMOSPHERE - the dark background
 Neither source's dark background is a single image asset doing all
 the work. Both build it from cheap CSS: a near-black base, one or two
 large soft radial glows, and (OPS only) a faint repeating grid line
 pattern. [OPS] does load one very-low-opacity (0.08) background
 photograph (body::before, line 104-110, a remote CDN-hosted JPEG,
 same asset host the orb's own images were on before section 10
 self-hosted them) as a texture layer UNDER the grid - that single
 external image is the only real photographic texture found in either
 source, and
 it is decorative at 8% opacity, not load-bearing. Since external
 requests are blocked here, it is dropped and replaced with a pure-CSS
 equivalent below: a second, dimmer radial gradient standing in for
 "a photograph ghosted into the dark." Nothing to apologize for - at
 8% opacity the original photo was already nearly indistinguishable
 from a soft vignette. ========================================================================== */

.mom-atmosphere {
  position: relative;
  background: var(--mom-bg-page);
}

/* Grid line texture. [OPS] body::after, line 111-119: two repeating
 linear-gradients at 60x60px forming a faint grid, tinted gold at
 6% opacity (--mv-grid). */
.mom-atmosphere::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(250, 189, 89, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 189, 89, 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* Photograph-substitute glow. CHOSEN pure-CSS stand-in for [OPS]
 body::before's 8%-opacity remote JPEG, and doubles as the [MEMBER]
 .bg-glow-1/.bg-glow-2 pattern (line 564-568: two 540px blurred
 radial blobs, gold and crimson, drifting on a 16s/20s float). */
.mom-atmosphere::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(240, 193, 115, 0.16),
      transparent 45%
    ),
    radial-gradient(circle at 85% 90%, rgba(220, 20, 60, 0.12), transparent 45%);
  filter: blur(60px);
  opacity: 0.6;
  pointer-events: none;
}

/* [MEMBER] drifting glow blob, for use inside an individual panel rather
 than page-wide (e.g. behind a welcome strip or hero card). */
@keyframes mom-glow-float {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(40px, 30px) scale(1.12);
  }
}
.mom-glow-blob {
  position: absolute;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.22;
  pointer-events: none;
  animation: mom-glow-float 16s ease-in-out infinite;
}
.mom-glow-blob--gold {
  background: radial-gradient(
    circle,
    rgba(240, 193, 115, 0.55),
    transparent 70%
  );
}
.mom-glow-blob--red {
  background: radial-gradient(circle, rgba(220, 20, 60, 0.45), transparent 70%);
  animation-duration: 20s;
  animation-direction: reverse;
}
/* CHOSEN, V0.4.0: cool-tone counterpart to --gold, using --mom-blue (the member
   dashboard's actual cool accent - not cyan, which is OPS-only and banned on this
   surface). Fixes defect 2 ("no atmosphere"): the brief calls for gold + a cool tone,
   not gold + crimson twice. */
.mom-glow-blob--blue {
  background: radial-gradient(circle, rgba(96, 165, 250, 0.4), transparent 70%);
  animation-duration: 20s;
  animation-direction: reverse;
}

/* CHOSEN, V0.6.1: the single fixed, full-viewport, overflow:hidden wrapper for every
   page-atmosphere decoration (both glow blobs + the gear texture below). Replaces each
   decoration carrying its own position:fixed (see .mom-atmosphere-blob / .mom-gear-texture
   below, both now position:absolute relative to THIS wrapper). Why: a position:fixed
   element's containing block is always the viewport, no matter what ancestor wraps it, so
   overflow:hidden on an ancestor (even html/body) never clips a fixed descendant's excess -
   that is exactly what let a 640px-wide .mom-gear-texture at right:-280px paint out to
   x=670px on a 390px viewport (real incident 2026-07-30, document.documentElement.scrollWidth
   measured at 670). position:absolute descendants, by contrast, ARE clipped by an
   overflow:hidden ancestor. This wrapper is that ancestor: fixed to the viewport (inset:0,
   so it behaves exactly like the old per-element position:fixed for visibility/placement
   purposes) and overflow:hidden (so any decoration inside that would paint past the
   viewport edge is genuinely clipped instead of inflating document scrollWidth). */
.mom-atmosphere-decor {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

/* CHOSEN, V0.4.0: page-wide atmosphere modifier. The base .mom-glow-blob component is
   documented above as scoped-inside-a-panel (position: absolute); mvp-dashboard's V0.3.0
   page-level blobs used that same absolute positioning directly on <body>, which put them
   in normal document flow and left them clipped/hidden behind the opaque HUD header and
   preview banner (measured: not visible on the rendered page). This modifier reattaches
   the same blob to the viewport instead of the document, and sends it behind all content,
   without changing the base component other call sites may still use inside a panel.
   V0.6.1: position is absolute (not fixed) so it is contained/clipped by the new
   .mom-atmosphere-decor wrapper above rather than escaping to the viewport's own
   containing block; because the wrapper is itself position:fixed + inset:0, the visible
   placement is unchanged. */
.mom-atmosphere-blob {
  position: absolute;
}

/* CHOSEN, V0.4.0: gear/concentric-arc texture layer, defect 2. Neither source's texture
   is an image; this follows the same recipe as .mom-atmosphere::after (a repeating CSS
   gradient, no external request) but shaped like gear teeth (repeating-conic-gradient)
   crossed with concentric rings (repeating-radial-gradient) instead of a flat grid, so it
   reads as "gear cluster ghosted into the dark" rather than graph paper. Reuses the
   already-defined mom-gear-spin-cw keyframe/tempo (section 7) so this layer can rotate at
   the ambient 60s tempo when combined with .mom-motion-gear-cw, which V0.3.0 defined but
   never actually placed on anything visible.
   V0.6.1: position is absolute (not fixed), contained by the .mom-atmosphere-decor wrapper
   (position:fixed, inset:0, overflow:hidden) instead of being fixed itself. This element's
   own right:-280px + width:640px combination is exactly what produced the 390px-viewport
   overflow regression (right edge painted at 390 + 280 = 670px, matching the traced
   document.documentElement.scrollWidth of 670 exactly) because a position:fixed element's
   containing block is the viewport regardless of ancestors, so no ancestor overflow:hidden
   (including the pre-existing html/body rule in app.css) could clip it. Left at the same
   640px/-280px geometry (the visual design is unchanged and still correct as a decoration
   partially off-screen) since the wrapper's overflow:hidden now genuinely contains the
   excess instead of merely hiding a symptom at the body level. */
.mom-gear-texture {
  position: absolute;
  top: 50%;
  right: -280px;
  width: 640px;
  height: 640px;
  margin-top: -320px;
  border-radius: 50%;
  opacity: 0.05;
  pointer-events: none;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(240, 193, 115, 0.9) 0deg 3deg,
      transparent 3deg 16deg
    ),
    repeating-radial-gradient(
      circle,
      rgba(240, 193, 115, 0.6) 0px 1px,
      transparent 1px 46px
    );
}

@media (prefers-reduced-motion: reduce) {
  .mom-glow-blob {
    animation: none !important;
  }
}

/* ==========================================================================
 9. DASHBOARD SHELL - mvp-dashboard V0.3.0 additions
 CHOSEN compositions, not harvested 1:1 from either source: a full HUD
 header bar, a world-clock ribbon, a dense instrument-style row list and
 an ADMIN-PORTALS-idiom facet rail. Neither production surface ships
 these exact shapes, but every color/radius/spacing/motion value used
 below still traces to a token in section 1 - nothing here invents a
 new visual language, it only assembles the existing one into shapes
 this page needs that the two source surfaces did not have to build.
 Added here (rather than as one-off rules in app.css) so the next page
 built on Momentum can reuse them instead of re-deriving them.
 ========================================================================== */

/* HUD header bar. OPS chrome idiom: flat panel, --mom-gold-ops accent
 (header chrome gold, not body gold), dense, a beam sweep hairline
 riding the bottom edge (.mom-motion-beam, inserted as a child). */
.mom-hud {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--mom-space-6);
  flex-wrap: wrap;
  padding: var(--mom-space-4) var(--mom-space-7);
  background: var(--mom-bg-ops-wash);
  border-bottom: 1px solid var(--mom-border-ops);
}

.mom-hud-brand {
  display: flex;
  align-items: center;
  gap: var(--mom-space-3);
  font-family: var(--mom-font-head);
  font-weight: var(--mom-font-head-weight);
  font-size: var(--mom-text-lg);
  letter-spacing: 1.5px;
  color: var(--mom-gold-ops);
  text-transform: uppercase;
  white-space: nowrap;
}

.mom-hud-nav {
  display: flex;
  align-items: center;
  gap: var(--mom-space-5);
  flex-wrap: wrap;
}

.mom-hud-nav a {
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-xs);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mom-text-muted);
  text-decoration: none;
}
.mom-hud-nav a:hover,
.mom-hud-nav a:focus-visible {
  color: var(--mom-gold-ops);
}

/* Keyboard-hint chip, the visual affordance for the Cmd+K palette. */
.mom-kbd {
  display: inline-flex;
  align-items: center;
  font-family: var(--mom-font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--mom-text-muted);
  border: 1px solid var(--mom-border-ops);
  border-radius: var(--mom-radius-xs);
  padding: 2px 6px;
}

.mom-hud-status {
  display: flex;
  flex-wrap: wrap; /* V0.6.1 regression fix: was nowrap (the default), which forced this row's
    five children (clock, countdown, two dividers, the "PREVIEW, NOT SIGNED IN" state, and
    the account link) onto one unbreakable line. Real incident 2026-07-30: at 390px that
    line measured 658px wide (position:static, in normal flow), the second confirmed source
    of the traced 670px document overflow alongside the gear-texture/blobs fix above. The
    parent .mom-hud already had flex-wrap:wrap so .mom-hud-status itself could move to its
    own row, but its own content still could not break internally without this. Wrapping
    here (rather than shrinking text or truncating) keeps every status string fully
    legible - "PREVIEW, NOT SIGNED IN" in particular must never be clipped or ellipsized. */
  align-items: center;
  justify-content: flex-end;
  row-gap: var(--mom-space-2);
  gap: var(--mom-space-5);
  min-width: 0; /* V0.6.1: lets this flex item shrink below its content's intrinsic width
    instead of forcing .mom-hud wider than the viewport (flex items default to min-width:auto,
    which ignores flex-wrap and keeps demanding full content width). */
  max-width: 100%;
  margin-left: auto;
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-xs);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mom-text-muted);
}
.mom-hud-clock,
.mom-hud-countdown b {
  font-variant-numeric: tabular-nums; /* CHOSEN, see section 2 note */
  color: var(--mom-text);
}

/* V0.6.0 job 5: header auth-surface placeholder. Styled in the header-chrome gold
 (--mom-gold-ops), same family as the rest of .mom-hud-status, not the body gold. Where the
 real MVP Universal Header would show a member's name/tier/contact id/counters, this always
 renders the literal "PREVIEW, NOT SIGNED IN" string - never a name, never a number. */
.mom-hud-divider {
  color: var(--mom-text-dim);
}
.mom-hud-preview-state {
  color: var(--mom-gold-ops);
  font-weight: 700;
}
.mom-hud-account-link {
  color: var(--mom-text-muted);
  text-decoration: none;
  border: 1px solid var(--mom-border-ops);
  border-radius: var(--mom-radius-xs);
  padding: 2px 8px;
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-xs);
  letter-spacing: 1.2px;
}
.mom-hud-account-link:hover,
.mom-hud-account-link:focus-visible {
  color: var(--mom-gold-ops);
  border-color: var(--mom-gold-ops);
}

/* Dense instrument-readout row list. [Item 5, "catalog surface"]: tighter
 rows than .mom-panel content, 1px hairline separators (not the 22px
 card-wall spacing a marketing grid would use), monospace figures for
 every count. Modeled on the density of OPS .log-line / .status-row,
 recolored to the member gold. */
.mom-rowlist {
  display: flex;
  flex-direction: column;
}
.mom-row {
  display: grid;
  grid-template-columns: auto 1fr 128px 24px; /* CHOSEN, V0.4.0: fixed widths on the tag and
    link columns instead of auto. Each .mom-row is its own independent grid (not rows of
    one shared table), so "auto" sizing let every row's tag/link column width drift with
    that row's own content, i.e. the ragged right edge defect 5 names. Fixed widths make
    every row's meta columns land in the same place. */
  align-items: center;
  gap: var(--mom-space-4);
  padding: 8px var(--mom-space-4);
  border-bottom: 1px solid var(--mom-border-faint);
  border-left: 2px solid transparent; /* status stripe, colored by .mom-row--status-* below */
  font-size: var(--mom-text-xs);
  color: var(--mom-text-body);
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    border-left-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}
.mom-row:last-child {
  border-bottom: 0;
}
.mom-row:hover,
.mom-row:focus-visible {
  background: var(--mom-gold-dim);
  transform: translateY(-1px); /* the "lift" defect 5 asks for */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
.mom-row--highlight {
  background: var(--mom-gold-dim);
  border-left-color: var(--mom-gold);
  border-left-width: 3px;
}
/* Status stripe colors, one per catalog status, matching .status-dot-* in app.css so the
   stripe and the badge always agree. */
.mom-row--status-live {
  border-left-color: var(--mom-green);
}
.mom-row--status-new {
  border-left-color: var(--mom-gold);
}
.mom-row--status-beta {
  border-left-color: var(--mom-orange);
}
.mom-row--status-coming_soon,
.mom-row--status-in_development {
  border-left-color: var(--mom-text-dim);
}
.mom-row--status-migrating {
  border-left-color: var(--mom-blue);
}
.mom-row--status-dead {
  border-left-color: var(--mom-red);
}
/* Brighten the stripe on hover/focus: wider + a matching glow bleeding off the edge. */
.mom-row--status-live:hover,
.mom-row--status-live:focus-visible {
  border-left-width: 3px;
  box-shadow: -2px 0 10px rgba(74, 222, 128, 0.5);
}
.mom-row--status-new:hover,
.mom-row--status-new:focus-visible {
  border-left-width: 3px;
  box-shadow: -2px 0 10px rgba(240, 193, 115, 0.5);
}
.mom-row--status-beta:hover,
.mom-row--status-beta:focus-visible {
  border-left-width: 3px;
  box-shadow: -2px 0 10px rgba(251, 146, 60, 0.5);
}
.mom-row--status-migrating:hover,
.mom-row--status-migrating:focus-visible {
  border-left-width: 3px;
  box-shadow: -2px 0 10px rgba(96, 165, 250, 0.5);
}
.mom-row--status-dead:hover,
.mom-row--status-dead:focus-visible {
  border-left-width: 3px;
  box-shadow: -2px 0 10px rgba(220, 20, 60, 0.5);
}
.mom-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--mom-text-md); /* CHOSEN, V0.4.0: 14px, the primary "body/row text" tier.
    Previously unset and inheriting .mom-row's 11px - the single biggest contributor to the
    V0.3.0 "everything in a 6px band" measurement, since this text renders once per row. */
  color: var(--mom-text);
}
.mom-row:hover .mom-row-name,
.mom-row:focus-visible .mom-row-name {
  color: var(--mom-gold);
}
.mom-row-tags {
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-base); /* CHOSEN, V0.4.0: 13px, body tier (was 10px). Measured
    after the first pass: badges alone (138 of them, correctly micro at 10.5px) were
    enough to anchor the page median in the micro band even with row-name/row-purpose
    bumped. The category tag is real secondary content, not a micro decoration, so it
    moves to the same body tier as the purpose column. */
  letter-spacing: 0.6px;
  color: var(--mom-text-muted);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The arrow glyph that replaces the old always-on "OPEN" text (defect 5): hidden until
   the row is hovered or focused, since the whole row is now the click target and a
   persistent link label on every row was noise. .mom-row-link--static (dead/no-url rows,
   which are not clickable) stays visible instead of revealing on hover. */
.mom-row-link {
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-xs);
  letter-spacing: 0.6px;
  color: var(--mom-gold);
  text-transform: uppercase;
  white-space: nowrap;
  text-align: right;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.mom-row:hover .mom-row-link,
.mom-row:focus-visible .mom-row-link {
  opacity: 1;
}
.mom-row-link--static {
  opacity: 1;
  color: var(--mom-text-dim);
}

/* Facet rail. [Item 5]: OPS ADMIN PORTALS idiom verbatim - two-letter
 squared badge (.mom-badge-square, section 5) + label + count, one per
 row, dense. */
.mom-facet-rail {
  display: flex;
  flex-direction: column;
}
.mom-facet-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: var(--mom-space-3);
  width: 100%;
  padding: 6px var(--mom-space-2);
  border: none;
  border-bottom: 1px solid var(--mom-border-faint);
  background: transparent;
  color: var(--mom-text-body);
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-base); /* CHOSEN, V0.4.0: bumped from 11px to 13px (body tier);
    facet labels are read-and-clicked constantly, they belong at the same weight as row
    text, not down with the micro badges. */
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.mom-facet-row:last-child {
  border-bottom: 0;
}
.mom-facet-row:hover,
.mom-facet-row:focus-visible {
  background: var(--mom-gold-dim);
}
.mom-facet-row[aria-pressed="true"] {
  background: var(--mom-gold-dim);
  color: var(--mom-gold);
}
.mom-facet-row[aria-pressed="true"] .mom-badge-square {
  background: var(--mom-gold);
  color: #000;
  border-color: var(--mom-gold);
}
.mom-facet-row-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mom-facet-row-count {
  font-variant-numeric: tabular-nums; /* CHOSEN */
  font-size: var(--mom-text-2xs); /* CHOSEN, V0.4.0: 8px, deliberately the smallest micro
    tier (a secondary count next to a now-larger label), matching the reference
    dashboard's 8px floor. */
  color: var(--mom-text-muted);
}

/* World clock ribbon. Both source surfaces close with a dense strip of
 read-only data (OPS: fleet telemetry; MEMBER: whats-new feed); this is
 that same "instrument strip" idiom applied to seven timezones. */
.mom-worldclock {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.mom-worldclock-cell {
  flex: 1 1 120px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--mom-space-3) var(--mom-space-4);
  border-right: 1px solid var(--mom-border-faint);
}
.mom-worldclock-cell:last-child {
  border-right: 0;
}
.mom-worldclock-city {
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-2xs); /* CHOSEN, V0.4.0: 8px, the true micro floor. */
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mom-text-muted);
}
.mom-worldclock-time {
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-base);
  font-variant-numeric: tabular-nums; /* CHOSEN */
  color: var(--mom-gold);
}

/* Placeholder panel. Used for the identity block (no member data this
 wave) and the orb reservation. Dashed border marks it explicitly as
 "not the real thing," distinct from every solid-bordered live panel. */
.mom-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mom-space-3);
  text-align: center;
  border: 1px dashed var(--mom-border);
  border-radius: var(--mom-radius-panel);
  padding: var(--mom-space-7);
  color: var(--mom-text-muted);
}
.mom-placeholder-label {
  font-family: var(--mom-font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mom-text-muted);
}

/* Compact top-row panels. CHOSEN, V0.4.0, defect 3 ("top third is a void"): identity and
   orb previously used the default .mom-panel padding (20px/22px) meant for content-heavy
   panels, which is most of why they read as large and empty. Same panel recipe, tighter
   padding, so a third panel (telemetry) fits beside them without the row feeling cramped. */
.mom-panel.mom-panel--compact {
  padding: var(--mom-space-6) var(--mom-space-6);
}

/* Catalog telemetry panel. [Item 3]: the ops console's FLEET TELEMETRY idiom (labelled
   rows, a figure, a thin breathing meter bar - .mom-meter, section 6) ported onto real,
   independently-sourced catalog counts instead of OPS's hardcoded --lvl percentages. One
   hero figure (TOTAL ITEMS) at the new --mom-text-5xl tier anchors the panel; every other
   row is a label + tabular figure + optional meter, sized down from there. */
.telemetry-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-bottom: var(--mom-space-4);
  margin-bottom: var(--mom-space-4);
  border-bottom: 1px solid var(--mom-border-faint);
}
.telemetry-hero-figure {
  font-family: var(--mom-font-head);
  font-weight: var(--mom-font-head-weight);
  font-size: var(--mom-text-5xl);
  color: var(--mom-gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.telemetry-hero-label {
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-2xs);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mom-text-muted);
}
.telemetry-meter-list {
  display: flex;
  flex-direction: column;
  gap: var(--mom-space-4);
}
.telemetry-row .mom-meter-row {
  font-size: var(--mom-text-base);
  color: var(--mom-text-soft);
  text-transform: none;
  letter-spacing: 0.4px;
}
.telemetry-figure {
  font-family: var(--mom-font-head);
  font-weight: var(--mom-font-head-weight);
  font-size: var(--mom-text-2xl); /* section-title tier (20-24px), shared with the hero's
    six sibling figures so this bucket alone clears the "5+ elements" bar. */
  color: var(--mom-gold) !important;
}

/* ==========================================================================
 10. ORB (GEAR CLUSTER) - mvp-dashboard V0.8.0
 [MEMBER] .gear-cluster-zone / .gear-cluster / .gear / .gear-disc / .gear-label /
 .gear-center / .corner-shortcut / .leader-lines, PORTED VERBATIM 2026-07-30 from the
 real GoHighLevel section source now vendored at
 docs/reference/v3-source/02A_STYLES.html (V3.9.14 CSS host) and
 docs/reference/v3-source/02B_IDENTITY-ORBIT-ROTATION.html (V3.9.22 markup), supplied
 directly rather than reverse-engineered from the rendered page. This replaces the
 earlier V0.7.1 pass, which was reconstructed by curling the live page's computed
 output and guessing at two things it got wrong: the four corner shortcuts were built
 as CSS-shape text chips instead of real <img> elements, and the --cluster-bg texture
 was an invented pure-CSS gear-ring gradient because no real background asset existed
 yet. Both are fixed below using the real source values and the now-available local
 asset files (public/assets/orb/corner-*.webp, cluster-bg.webp). Ring geometry
 (pos-n/e/s/w/ne/se/sw/nw at 13%/87%/50% and 26%/74%), the round-disc + big/small
 sizing split (28%/22%), the hover-reveal label, and the three status treatments
 (done/current/locked) remain HARVESTED VERBATIM as in V0.7.1 - these are Anric's own
 tuned values from the live source, not approximations.

 V0.8.0 corrections found by re-checking every value directly against 02A instead of
 trusting this section's own prior comments:
 - .gear-cluster max-width was 460px; 02A line 1783 (V3.9.14 host numbering) reads
   500px. Fixed below.
 - .gear-disc's glow filter was one shared value (the BIG figure) applied to every
   gear regardless of size. 02A carries genuinely distinct BIG (.gear.big .gear-disc)
   and SMALL (.gear.small .gear-disc) filter values for base/hover/done/current/locked
   - smaller glow radius and softer opacity on the small nodes. Split below, applied
   to .gear-disc-inner (this build's hover-scale wrapper, not present in the source
   DOM - see that rule's own comment for why the wrapper exists; the filter VALUES
   themselves are still the source's, only the element they land on differs).
 - Hover scale was invented at 1.09 + a translateY(-3px) lift ("CHOSEN" per the old
   comment). Source is exactly `transform: scale(1.07)`, no lift. Reverted to that.
 - The DONE/CURRENT/LOCKED "icon" on the label was invented (checkmark U+2713,
   padlock U+1F512, a green box-shadow token). The source never adds an icon glyph -
   the ONLY per-state indicator is the small dot already on .gear-label::before,
   recolored: done = solid green #4ade80, current = gold #F0C173 pulsing via
   mvp-dot-pulse (opacity 1 -> 0.45, 1.8s), locked = dim gray rgba(140,140,150,0.35).
   Fixed below; the checkmark/padlock content and the done green-box-shadow filter
   token are removed.
 - .corner-shortcut was styled as a 58x58 text chip with a background, border, and
   uppercase label (no source icon assets existed at the time). Source is an 86x86
   plain image tile - transparent background, no border, no padding, the icon PNG
   itself supplies the name - with a drop-shadow filter and a scale(1.08) hover. The
   four PNGs now exist locally (public/assets/orb/corner-*.webp) so this is now a real
   image tile, matching source exactly. Markup moved from static HTML into
   buildOrbChrome() in app.js, rendered from data/orb.json's "corners" array.
 - .leader-lines styled <line> elements (2px dasharray, 0.35 opacity, 9s flow). Source
   draws 4 quadratic-bezier <path> elements from the center to each corner (see 02B
   lines 172-175, ported verbatim into index.html) styled at stroke-width 1.6,
   rgba(240,193,115,0.65), dasharray "5 4", 4s linear flow. Fixed below.
 - --cluster-bg now resolves to a real local file (assets/orb/cluster-bg.webp, set via
   app.js from data/orb.json's "background" entry) instead of the invented pure-CSS
   gradient fallback; the ::after rule's z-index reverts from -1 (invented, to force it
   behind this build's own .orb-globe-layer addition, not present in source) back to
   the harvested 0, matching 02A line 1770-1777 exactly - the fix for any apparent
   stacking collision with .orb-globe-layer is not needed at 0.18 opacity in practice,
   per the "do not adjust anything that looks like it collides" instruction; if a real
   collision ever surfaces, fix it by re-reading source again, not by re-inventing a
   z-index here.

 Everything already correct in V0.7.1 and unchanged here, still HARVESTED VERBATIM:
 the live source's real gear-disc images spin in place at a fixed compass position
 (60s, bigs clockwise / smalls counter-clockwise, "the way real interlocked gear
 trains turn" per the source's own comment), not the whole cluster as a unit. The
 centre-ring decoration is two pseudo-elements directly on .gear-center (dashed 22s
 cw / dotted 38s ccw). The centre sits at 44%, the gears at 28%/22%, positions at the
 harvested 13%/87%/26%/74%, with zero overlap. These durations (60s gear spin,
 22s/38s centre rings, 2.6s current-glow, 4s leader-line flow) are the live
 component's own real values, not the estate's generic tempo list, for this
 component only, per the source. */

.gear-cluster-zone {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mom-space-4) 0 var(--mom-space-6);
  overflow: visible;
}

/* Connection-globe backdrop, V0.7.0 (change 2). [OPS] .globe-layer / #globe-canvas
 (magnum-ecosystem/ops/index.html V3.9, read-only reference): layer 0, absolutely filling
 its container, pointer-events:none so it never intercepts a gear click, and a darkening
 radial-gradient vignette behind it so the point cloud reads clearly against the panel
 rather than washing out - [OPS]'s own comment calls this exact treatment out ("knock the
 gear background back so the globe reads clearly"), ported at a lighter opacity here since
 this panel is smaller and the vignette only needs to clear the immediate globe area, not a
 whole console stage. z-index 0 puts it strictly behind .orb-decor-rings and .gear-cluster
 (both bumped to z-index 1 below) so the globe is atmosphere, never the focus. The canvas
 itself is drawn by initOrbGlobe() in app.js; see that function for the point-cloud /
 wireframe / arc rendering, the ~30fps frame cap, the document.hidden pause, and the
 prefers-reduced-motion handling. */
.orb-globe-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.2) 55%,
    transparent 82%
  );
}
/* .is-headless, [MEMBER] class carried verbatim onto #gear-cluster-zone for markup
 fidelity (the live container is ".gear-cluster-zone is-headless"). No CSS below keys
 off it: this preview already ships every journey step as neutral "locked" (see
 data/journey.json), so there is no real-progress state for a hook here to suppress.
 Left as a stable selector in case a future pass needs to gate a real-member-only
 treatment behind "this container has no live session backing it". */

/* V0.7.1: the three-ring .orb-decor-rings backdrop (invented, canonical 22s/14s/9s
 tempo) is removed. The live source's real centre-ring decoration is two
 pseudo-elements on .gear-center itself (dashed 22s cw / dotted 38s ccw) - see that
 rule below, harvested verbatim from docs/reference/live-orb.css. */

/* --cluster-bg background hook, HARVESTED from docs/reference/live-orb.css:
 ".gear-cluster-zone[style*=--cluster-bg]::after" layers a darkened texture behind
 everything when a --cluster-bg custom property is set inline on the zone. The live
 source's own comment example sets it to a url(...) photograph; this build makes zero
 external requests, so index.html instead sets --cluster-bg to a pure-CSS gear-ring
 gradient (the same repeating-conic + repeating-radial recipe as .mom-gear-texture in
 section 8) approximating "a large gear ring behind the cluster" from Anric's
 screenshots. z-index is pinned to -1 (not the harvested 0) so it always paints
 behind .orb-globe-layer/.leader-lines, which are themselves z-index 0 siblings in
 this zone and would otherwise tie with it on paint order. */
.gear-cluster-zone[style*="--cluster-bg"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--cluster-bg);
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  filter: brightness(0.7) saturate(0.6);
  pointer-events: none;
  z-index: 0; /* 02A line 1770-1777, HARVESTED VERBATIM - see section 10 header comment */
}

.gear-cluster {
  position: relative;
  width: 100%;
  max-width: 500px; /* 02A line 1783 - HARVESTED, corrects V0.7.1's 460px */
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: visible;
  z-index: 1; /* V0.7.0: above .orb-globe-layer (z-index 0), see that rule's comment */
}

/* ── Node anchor - [MEMBER] .gear, HARVESTED ── */
.gear {
  position: absolute;
  text-decoration: none;
  display: block;
}
.gear.big {
  width: 28%;
} /* [MEMBER] .gear.big { width: 28% } - HARVESTED exactly, V0.7.1 restores this after a
     prior pass wrongly trimmed it to 26% to make room for an invented 60% centre. */
.gear.small {
  width: 22%;
} /* [MEMBER] .gear.small { width: 22% } - HARVESTED exactly, same V0.7.1 restoration. */

/* Compass positions - [MEMBER] .gear.pos-*, HARVESTED VERBATIM (13%/87%/50% cardinals,
 26%/74% intercardinals) straight from docs/reference/live-orb.css. V0.7.1 restores these
 after a prior pass pushed every position outward (4%/96%/20%/80%) to avoid a collision
 that only existed because that same pass had also grown .gear-center to an invented 60%.
 With the centre correctly at the harvested 44% and the gears at the harvested 28%/22%,
 the harvested positions clear the centre with real margin - the live page runs exactly
 this geometry every day with zero overlap. Do not re-derive these from the gear/centre
 sizes; they are independently harvested values, not a computed layout. */
.gear.pos-n {
  top: 13%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.gear.pos-e {
  top: 50%;
  left: 87%;
  transform: translate(-50%, -50%);
}
.gear.pos-s {
  top: 87%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.gear.pos-w {
  top: 50%;
  left: 13%;
  transform: translate(-50%, -50%);
}
.gear.pos-ne {
  top: 26%;
  left: 74%;
  transform: translate(-50%, -50%);
}
.gear.pos-se {
  top: 74%;
  left: 74%;
  transform: translate(-50%, -50%);
}
.gear.pos-sw {
  top: 74%;
  left: 26%;
  transform: translate(-50%, -50%);
}
.gear.pos-nw {
  top: 26%;
  left: 26%;
  transform: translate(-50%, -50%);
}

.gear:hover {
  z-index: 10;
}

/* ── Round disc - [MEMBER] .gear-disc, HARVESTED base recipe. No disc chrome
 (background/border/box-shadow are never set here - the PNGs are already gear-shaped).
 V0.8.0: the glow filter is now split BIG vs SMALL per 02A (lines 1959-1967 big,
 1848-1856 small) - a real, distinct pair of values, not one filter shared by every
 gear regardless of size. Applied to .gear-disc-inner (see that rule's comment for why
 this build's hover-scale wrapper carries the filter instead of .gear-disc itself; the
 filter VALUES are still the source's). The whole-cluster spin + disc counter-rotation
 this rule used to carry (a V0.6.0 invention) stays removed: the live source spins
 each gear's own <img>, not the disc or the cluster. ── */
.gear-disc {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
}
.gear.big .gear-disc-inner {
  filter: drop-shadow(0 0 14px rgba(240, 193, 115, 0.5))
    drop-shadow(0 4px 10px rgba(0, 0, 0, 0.65)); /* 02A line 1964-1966, HARVESTED */
}
.gear.small .gear-disc-inner {
  filter: drop-shadow(0 0 12px rgba(240, 193, 115, 0.45))
    drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6)); /* 02A line 1853-1855, HARVESTED */
}

/* Hover lift + scale lives on a SEPARATE inner wrapper (CHOSEN) rather than on
 .gear-disc itself, because .gear-disc already owns the counter-rotation animation
 and a CSS animation's own transform cannot be combined with a plain hover
 transition on the same property/element without one clobbering the other every
 animation frame. Splitting the two transforms across parent/child is the standard
 fix and keeps both effects independently readable here. */
.gear-disc-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s ease, filter 0.22s ease;
}
.gear:hover .gear-disc-inner,
.gear:focus-visible .gear-disc-inner {
  transform: scale(1.07); /* 02A line 1809 `.gear:hover .gear-disc { transform: scale(1.07) }`,
    HARVESTED VERBATIM - V0.7.1 had invented 1.09 + a translateY(-3px) lift; reverted. */
}
.gear.big:hover .gear-disc-inner,
.gear.big:focus-visible .gear-disc-inner {
  filter: drop-shadow(0 0 22px rgba(250, 189, 89, 0.75))
    drop-shadow(0 4px 10px rgba(0, 0, 0, 0.65)); /* 02A line 1973-1978, HARVESTED */
}
.gear.small:hover .gear-disc-inner,
.gear.small:focus-visible .gear-disc-inner {
  filter: drop-shadow(0 0 20px rgba(250, 189, 89, 0.7))
    drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6)); /* 02A line 1861-1865, HARVESTED */
}
.gear-disc-inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
} /* [MEMBER] .gear.big .gear-disc img */

/* ── Ambient per-image spin, HARVESTED VERBATIM from 02A lines 1889-1893: bigs
 clockwise, smalls counter-clockwise, "the way real interlocked gear trains turn" per
 the source's own comment. Applied to the <img> itself (not the disc, not the
 cluster) so the logo rotates fully in place at its fixed compass position - no
 counter-rotation anywhere. Paused on individual hover/focus so the label can be read,
 per the source. Both at 60s, the live component's own real value - not one of the
 estate's five canonical tempos, deliberately slower for background atmosphere. ── */
@keyframes mvp-gear-spin-cw {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes mvp-gear-spin-ccw {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  } /* 02A line 1893, HARVESTED VERBATIM - functionally identical to V0.7.1's
       0deg -> -360deg but matched to source byte-for-byte per the port instruction. */
}
.gear.big .gear-disc-inner img {
  animation: mvp-gear-spin-cw 60s linear infinite;
}
.gear.small .gear-disc-inner img {
  animation: mvp-gear-spin-ccw 60s linear infinite;
}
.gear:hover .gear-disc-inner img,
.gear:focus-visible .gear-disc-inner img {
  animation-play-state: paused;
}

/* Graceful image-load degrade (CHOSEN, brief requirement): if the <img> 404s, app.js's
 onerror handler hides it and adds this class so the gear ring shape + label still
 render instead of a broken-image icon. */
.gear-disc-inner--fallback {
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 32%,
    rgba(240, 193, 115, 0.16) 0%,
    rgba(10, 10, 15, 0.4) 95%
  );
  border: 2px solid var(--mom-border-strong);
}

/* ── Label below disc - [MEMBER] .gear-label, HARVESTED (hover-only reveal, so the
 cluster reads as pure icons at rest and surfaces the tool name on hover/focus,
 matching the brief's "reveal its tool name" requirement). ── */
.gear-label {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: var(--mom-font-head);
  font-weight: var(--mom-font-head-weight);
  color: var(--mom-gold);
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 0.8);
  text-transform: uppercase;
  letter-spacing: 1.1px;
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.gear:hover .gear-label,
.gear:focus-visible .gear-label {
  opacity: 1;
}
.gear.big .gear-label {
  font-size: var(--mom-text-sm);
}
.gear.small .gear-label {
  font-size: var(--mom-text-xs);
  letter-spacing: 0.7px;
}

/* ── Inline status dot on the label, base rule - 02A lines 2042-2055, HARVESTED
 VERBATIM. Transparent/invisible until a data-state is set (next rule), then
 recolored per state below. This is the source's ONLY per-state indicator - no icon
 glyph is ever added on top of it. ── */
.gear-label::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: 1px;
  background: transparent;
  box-shadow: none;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.gear[data-state] .gear-label::before {
  background: rgba(140, 140, 150, 0.45);
}

/* Visible focus ring - CHOSEN, keyboard-focusable requirement. Uses the same outline
 treatment as every other focusable control in this file (section 2 base rule) rather
 than inventing a new focus style just for the orb. */
.gear:focus-visible {
  outline: 1px solid var(--mom-gold);
  outline-offset: 4px;
  border-radius: 50%;
}

/* ── Journey status states, PORTED VERBATIM V0.8.0 from 02A lines 1981-2011 (big),
 1867-1884 (small), and 2053-2081 (the label dot, size-independent). data-state values
 are done/current/locked, matching source's own attribute values exactly.

 V0.7.1 had invented a checkmark (U+2713) for done, a padlock (U+1F512) for locked,
 and a green box-shadow token - none of that exists in source. The source's ONLY
 per-state indicator is the small dot already on .gear-label::before (base rule,
 above), recolored per state - removed the invented glyphs/colors below and restored
 the source's real dot-only treatment: solid green for done, a pulsing gold dot for
 current (mvp-dot-pulse, opacity 1 -> 0.45, 1.8s - source's own value, not the
 estate's canonical mom-blink 1.5s token), dim gray for locked. The disc filter is
 still split BIG vs SMALL, same reasoning as the base/hover filters above. */
.gear.big[data-state="done"] .gear-disc-inner {
  filter: drop-shadow(0 0 16px rgba(240, 193, 115, 0.6))
    drop-shadow(0 4px 10px rgba(0, 0, 0, 0.65)); /* 02A line 1981-1985 */
}
.gear.small[data-state="done"] .gear-disc-inner {
  filter: drop-shadow(0 0 14px rgba(240, 193, 115, 0.55))
    drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6)); /* 02A line 1867-1871 */
}
.gear[data-state="done"] .gear-label::before {
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.75); /* 02A line 2065-2067, HARVESTED */
}

@keyframes mvp-current-glow-big {
  0%,
  100% {
    filter: drop-shadow(0 0 14px rgba(240, 193, 115, 0.5))
      drop-shadow(0 4px 10px rgba(0, 0, 0, 0.65));
  }
  50% {
    filter: drop-shadow(0 0 30px rgba(250, 189, 89, 0.95))
      drop-shadow(0 0 50px rgba(240, 193, 115, 0.45))
      drop-shadow(0 4px 10px rgba(0, 0, 0, 0.65));
  }
} /* 02A line 1992-2003, HARVESTED VERBATIM */
.gear.big[data-state="current"] .gear-disc-inner {
  animation: mvp-current-glow-big 2.6s ease-in-out infinite;
}
.gear.small[data-state="current"] .gear-disc-inner {
  animation: mom-glow-pulse var(--mom-dur-glow) ease-in-out infinite; /* [MEMBER]
    mvp-current-glow-small, 02A line 1877-1880, byte-identical to this file's own
    section-7 mom-glow-pulse token - reused rather than redefined. */
}
.gear[data-state="current"] .gear-label::before {
  background: var(--mom-gold-bright);
  box-shadow: 0 0 8px rgba(240, 193, 115, 0.75); /* 02A line 2069-2071, HARVESTED */
  animation: mvp-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes mvp-dot-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
} /* 02A line 2074-2077, HARVESTED VERBATIM - replaces the estate's canonical
     mom-blink (1.5s) token, which this gear used previously; source's own current-dot
     timing is 1.8s and it animates opacity only, not a background/box-shadow swap. */

.gear.big[data-state="locked"] .gear-disc-inner {
  opacity: 0.5;
  filter: grayscale(0.45) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.65)); /* 02A line 2006-2010 */
}
.gear.small[data-state="locked"] .gear-disc-inner {
  opacity: 0.5;
  filter: grayscale(0.45) drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6)); /* 02A line 1881-1884 */
}
.gear[data-state="locked"] .gear-label::before {
  background: rgba(140, 140, 150, 0.35);
  box-shadow: none; /* 02A line 2078-2081, HARVESTED */
}

/* ── Center mark - [MEMBER] .gear-center, HARVESTED base (no border, no circle, per the
 live source's own comment on that element: "raw icon, no border, no circle"). V0.7.1:
 width restored to the harvested 44% after a prior pass wrongly grew it to 60% on the
 theory that Anric wanted the centre "4x bigger" - he did not; 44% IS the live page's real
 tuned value and is already dominant at that size. Restoring 44% is also what makes the
 harvested 13%/87%/26%/74% gear positions clear the centre correctly again (see the
 .gear.pos-* comment above). public/assets/orb/center-mvp.webp (552x552) still renders
 sharp at 44% of any realistic .gear-cluster size. V0.8.0: filter and z-index corrected
 to 02A lines 2119-2129, HARVESTED VERBATIM - V0.7.1 had a single invented
 drop-shadow(0 0 16px/.55) and no z-index; source runs two stacked drop-shadows and
 pins z-index:7 so the centre always paints above every gear. */
.gear-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44%;
  transform: translate(-50%, -50%);
  z-index: 7;
  filter: drop-shadow(0 0 18px rgba(240, 193, 115, 0.45))
    drop-shadow(0 4px 12px rgba(0, 0, 0, 0.7));
  transition: filter 0.4s ease;
}
.gear-center img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
}
.gear-center--fallback {
  border-radius: 50%;
  background: radial-gradient(circle, var(--mom-gold-bright) 0%, transparent 70%);
  aspect-ratio: 1 / 1;
}

/* ── Centre rings, HARVESTED VERBATIM from docs/reference/live-orb.css:
 .gear-center::before/::after, two concentric rings (dashed 22s clockwise, dotted 38s
 counter-clockwise), replacing the invented three-ring .orb-decor-rings backdrop this
 file used to carry (removed above, see that section's note). ── */
.gear-center::before,
.gear-center::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.gear-center::before {
  inset: -22%;
  border: 1px dashed rgba(240, 193, 115, 0.42);
  animation: mvp-orb-cw 22s linear infinite;
}
.gear-center::after {
  inset: -42%;
  border: 1px dotted rgba(240, 193, 115, 0.22);
  animation: mvp-orb-ccw 38s linear infinite;
}
@keyframes mvp-orb-cw {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes mvp-orb-ccw {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

/* ── Corner shortcuts + leader lines, PORTED VERBATIM V0.8.0 from 02A lines 2249-2277
 (.corner-shortcut) and 2220-2244 (.leader-lines), replacing the V0.7.1 text-chip
 fallback now that the four real icon PNGs exist locally (public/assets/orb/
 corner-*.webp - the live source's icons are brand PNGs with names baked in, no text
 label needed). Markup for both is now generated by buildOrbChrome() in app.js from
 data/orb.json's "corners" array, not hardcoded in index.html - see that function's
 comment for the facet-drawer wiring, which has no source-of-truth equivalent (02B
 uses plain in-page anchors; this build has portal drawers instead). Hidden below
 920px, matching source's own mobile behavior (02A line 2373-2378: "corner pills +
 leader lines crowd the gears" on small screens). ── */
.corner-shortcut {
  position: absolute;
  z-index: 5;
  display: block;
  width: 86px;
  height: 86px;
  background: transparent;
  border: none;
  text-decoration: none;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1.2), filter 0.22s ease;
  filter: drop-shadow(0 0 10px rgba(240, 193, 115, 0.4))
    drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
}
.corner-shortcut img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.corner-shortcut:hover,
.corner-shortcut:focus-visible {
  transform: scale(1.08);
  filter: drop-shadow(0 0 18px rgba(250, 189, 89, 0.75))
    drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
}
/* V1.5.0 (FIX 6): visible click feedback on every corner. Anric's report was that TOOLS did
 nothing when pressed; two of the four were genuinely dead controls (see app.js
 wireCornerShortcuts), but even the two that worked gave no acknowledgement at the corner
 itself, so a member could not tell a working corner from a broken one. The class is added
 and removed on a timer by pulseCorner() rather than relying on :hover, so it fires
 identically for a keyboard activation and on a touch screen where there is no hover state. */
.corner-shortcut--pulse {
  animation: mom-corner-pulse 0.62s ease-out;
}
@keyframes mom-corner-pulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 10px rgba(240, 193, 115, 0.4))
      drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
  }
  28% {
    transform: scale(1.18);
    filter: drop-shadow(0 0 30px rgba(250, 189, 89, 1))
      drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 10px rgba(240, 193, 115, 0.4))
      drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
  }
}
/* Reduced motion: no scale, no animation, but the acknowledgement itself is not removed -
 the corner still visibly brightens for the same duration, it just does not move. */
@media (prefers-reduced-motion: reduce) {
  .corner-shortcut--pulse {
    animation: none;
    filter: drop-shadow(0 0 30px rgba(250, 189, 89, 1))
      drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
  }
}

/* V1.5.0 (FIX 6): the EVENTS corner scrolls to panel 05 LIVE and flashes it, so the member
 can see WHICH panel answered the click. Same add-then-remove-on-a-timer pattern as the
 corner pulse; app.js owns the timing. */
.mom-panel--flash {
  animation: mom-panel-flash 1.5s ease-out;
}
@keyframes mom-panel-flash {
  0% {
    border-color: var(--mom-gold);
    box-shadow: 0 0 0 1px var(--mom-gold), 0 0 30px rgba(250, 189, 89, 0.55);
  }
  70% {
    border-color: var(--mom-gold);
    box-shadow: 0 0 0 1px rgba(250, 189, 89, 0.5), 0 0 18px rgba(250, 189, 89, 0.28);
  }
  100% {
    border-color: var(--mom-border-soft);
    box-shadow: var(--mom-shadow-panel);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mom-panel--flash {
    animation: none;
    border-color: var(--mom-gold);
    box-shadow: 0 0 0 1px var(--mom-gold), 0 0 30px rgba(250, 189, 89, 0.55);
  }
}

.corner-shortcut.cs-tl {
  top: 14px;
  left: 14px;
}
.corner-shortcut.cs-tr {
  top: 14px;
  right: 14px;
}
.corner-shortcut.cs-bl {
  bottom: 14px;
  left: 14px;
}
.corner-shortcut.cs-br {
  bottom: 14px;
  right: 14px;
}

.leader-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.leader-lines path {
  fill: none;
  stroke: rgba(240, 193, 115, 0.65);
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  animation: mvp-leader-flow 4s linear infinite;
} /* 02A lines 2230-2237, HARVESTED VERBATIM - V0.7.1 used <line> elements at
     stroke-width 0.4/opacity 0.35/dasharray "2 2"/9s, none of which matched source;
     the markup itself (4 quadratic-bezier <path>s from center to each corner) is now
     ported verbatim into index.html from 02B lines 172-175. */
@keyframes mvp-leader-flow {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -36;
  }
}

@media (max-width: 920px) {
  .corner-shortcut,
  .leader-lines {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gear-disc-inner img,
  .gear.big[data-state="current"] .gear-disc-inner,
  .gear.small[data-state="current"] .gear-disc-inner,
  .gear[data-state="current"] .gear-label::before,
  .gear-center::before,
  .gear-center::after,
  .leader-lines path {
    animation: none !important;
  }
}

/* ── Journey progress readout + state legend, below the cluster ── */
.orb-journey {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--mom-space-4);
  margin-top: var(--mom-space-3);
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-xs);
  letter-spacing: 0.6px;
  color: var(--mom-text-muted);
}
.orb-journey-readout {
  color: var(--mom-gold);
  font-weight: 700;
  text-transform: uppercase;
}
.orb-journey-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mom-space-3);
}
.orb-journey-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-transform: uppercase;
}
.orb-journey-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.orb-journey-swatch--done {
  background: var(--mom-green);
  box-shadow: 0 0 6px var(--mom-green);
}
.orb-journey-swatch--current {
  background: var(--mom-gold-bright);
  box-shadow: 0 0 6px var(--mom-gold-bright);
  animation: mom-blink var(--mom-dur-blink) ease-in-out infinite;
}
.orb-journey-swatch--locked {
  background: var(--mom-text-dim);
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .orb-journey-swatch--current {
    animation: none !important;
  }
}

/* ==========================================================================
 11. PORTAL RAIL + DRAWER - mvp-dashboard V0.5.0
 [OPS] ADMIN PORTALS sidebar (.nav-item/.nav-icon/.nav-label/.nav-count,
 magnum-ecosystem/ops/index.html line 362-400) and the right-hand DRAWER
 OVERLAY (.drawer-overlay family, line 900-1041) in that same file V3.20,
 ported for INTERACTION ONLY and restyled to this file's own MEMBER idiom:
 14px panel radius (never the OPS 2-3px chrome radius), --mom-gold (not
 --mv-gold-ops flat chrome gold) for the selected/active state, no cyan
 anywhere - [OPS] .drawer-overlay::before cycles gold/cyan/gold across its
 top-edge sweep; this one stays gold-only. The slide transform, its exact
 cubic-bezier(0.4,0,0.2,1) timing, and the 0.4s duration ARE kept
 byte-identical: [OPS]'s own comment calls that specific transition "the
 architecture," not a color choice, and porting the interaction faithfully
 was the brief.
 ========================================================================== */

.mom-portal-list {
  display: flex;
  flex-direction: column;
}

.mom-nav-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: var(--mom-space-3);
  padding: 8px var(--mom-space-3);
  margin-bottom: 3px;
  border-radius: var(--mom-radius-xs);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-left-color 0.2s ease;
}
.mom-nav-item:hover,
.mom-nav-item:focus-visible {
  background: var(--mom-gold-dim);
  border-left-color: var(--mom-border-strong);
}
/* Selected state: left gold edge (glow) + lifted/tinted background + the badge inverting
 to solid gold with dark text, per the brief's portal-rail spec, using this file's own
 --mom-gold rather than the ops console's flat chrome gold. */
.mom-nav-item.is-active {
  background: rgba(240, 193, 115, 0.12);
  border-left-color: var(--mom-gold);
  box-shadow:
    inset 0 0 0 1px rgba(240, 193, 115, 0.18),
    -2px 0 10px rgba(240, 193, 115, 0.35);
}
.mom-nav-item.is-active .nav-icon {
  background: var(--mom-gold);
  color: #000;
  border-color: var(--mom-gold);
}
.mom-nav-item.is-active .nav-label {
  color: var(--mom-gold);
}
.nav-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mom-gold-dim);
  border: 1px solid var(--mom-border-ops);
  border-radius: var(--mom-radius-xs);
  font-family: var(--mom-font-head);
  font-weight: var(--mom-font-head-weight);
  font-size: 11px;
  color: var(--mom-gold-ops);
  letter-spacing: 1px;
  flex-shrink: 0;
}
.nav-label {
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-base); /* body tier (13px): portal labels are read-and-clicked
    constantly, they belong at the same weight as row text, matching the same reasoning
    already applied to .mom-facet-row-label in section 9. */
  color: var(--mom-text-body);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-count {
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-xs);
  color: var(--mom-text-muted);
  font-variant-numeric: tabular-nums; /* CHOSEN, see section 2 note */
}

/* Drawer overlay. [OPS] .drawer-overlay geometry/transition kept intact; recolored. Bottom
 is bounded above the footer via --mom-footer-h (set by app.css to the real measured
 footer height), matching the brief's "bounded above the new footer." */
/* V1.5.0 (FIX 2, direct from Anric: "there is no way to close that when you're done. Unless
 you scroll the whole page because the header covers the top address bar of the search
 results, including the x to exit out."). top was 0. #mn-bar is position:sticky, top:0,
 z-index:9999; this overlay is position:fixed, z-index:100. So the drawer opened underneath
 the header, and the exact strip the header covered was .drawer-head - the title, the count
 and the × close button. --mn-bar-h is the header's REAL measured height, published by
 setHeaderHeightVar() in app.js and refreshed by a ResizeObserver, because the bar's height
 genuinely changes at four breakpoints (1500, 1280, 1100, 768) and any hardcoded offset would
 be wrong at three of them. The fallback in the var() is only ever used in the impossible
 case where app.js has not run at all. */
.drawer-overlay {
  position: fixed;
  top: var(--mn-bar-h, 75px);
  right: 0;
  bottom: var(--mom-footer-h, 108px);
  width: 480px;
  max-width: 92vw;
  background: var(--mom-bg-modal);
  border-left: 1px solid var(--mom-border-strong);
  box-shadow:
    -8px 0 24px rgba(0, 0, 0, 0.6),
    0 0 32px rgba(240, 193, 115, 0.12) inset;
  transform: translateX(110%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* [OPS] exact timing, see header note above */
  z-index: 100;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(var(--mom-blur-md));
  -webkit-backdrop-filter: blur(var(--mom-blur-md));
}
.drawer-overlay.open {
  transform: translateX(0);
}
.drawer-overlay::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--mom-gold), transparent);
  opacity: 0.85;
  pointer-events: none;
}
.drawer-head {
  display: flex;
  align-items: center;
  gap: var(--mom-space-4);
  padding: var(--mom-space-6) var(--mom-space-7);
  border-bottom: 1px solid var(--mom-border-soft);
}
.drawer-head-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mom-gold);
  color: #000;
  font-family: var(--mom-font-head);
  font-weight: var(--mom-font-head-weight);
  font-size: 12px;
  border-radius: var(--mom-radius-xs);
  flex-shrink: 0;
}
.drawer-head-title {
  flex: 1;
  min-width: 0;
  font-family: var(--mom-font-head);
  font-weight: var(--mom-font-head-weight);
  font-size: var(--mom-text-xl);
  color: var(--mom-text);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drawer-head-count {
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-xs);
  color: var(--mom-gold);
  letter-spacing: 1px;
  padding: 3px 9px;
  border: 1px solid var(--mom-border);
  border-radius: var(--mom-radius-xs);
  background: var(--mom-gold-dim);
  white-space: nowrap;
  flex-shrink: 0;
}
.drawer-close {
  width: 30px;
  height: 30px;
  background: var(--mom-red-dim);
  border: 1px solid rgba(220, 20, 60, 0.4);
  color: var(--mom-red);
  font-family: var(--mom-font-head);
  font-weight: var(--mom-font-head-weight);
  font-size: 16px;
  cursor: pointer;
  border-radius: var(--mom-radius-xs);
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.drawer-close:hover,
.drawer-close:focus-visible {
  background: rgba(220, 20, 60, 0.25);
  color: #fff;
  box-shadow: 0 0 12px rgba(220, 20, 60, 0.4);
}
.drawer-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: var(--mom-space-5) var(--mom-space-7) var(--mom-space-8);
  position: relative; /* V0.7.0 (change 5): containing block for .scroll-fade */
}

/* ── Scroll affordance, V0.7.0 (change 5) ──────────────────────────────────────────────
 Every internally-scrolling panel (.notewell-body, .release-body, .replays-body,
 .live-rotation, .drawer-body - all `position: relative; overflow-y: auto`, set at each
 selector above) gets one of these appended as its last child by
 setupScrollAffordance()/updateScrollAffordance() in app.js: a soft fade plus a small
 downward chevron, shown only while there is more content below the current scroll
 position. Because this is `position: absolute` against the SAME element that scrolls (not
 a separate wrapper), it is glued to that element's own visible viewport rather than
 scrolling away with the content - the standard technique for a fixed edge-fade inside a
 scrolling box. `pointer-events: none` throughout so it can never block a click or cover a
 link underneath, per the brief. Visibility is driven by a real scroll listener comparing
 scrollTop + clientHeight against scrollHeight (see app.js), not a static guess; this rule
 only defines the opacity transition the JS toggles via .is-visible. */
/* V1.5.0 (FIX 3, direct from Anric: "On all boxes that are scrollable, the arrow indicator
 that there is more is too small."). Measured before: the fade was 30px tall and the chevron
 was a 13px '⌄' text glyph, whose actually-painted mark is roughly 7x4px inside that em box -
 a mark small enough to miss entirely against a busy panel. After: a 52px fade carrying a
 26x26px stroked SVG chevron (a real 26x13px painted mark, about 3.3x wider and 3.2x taller),
 sitting on a small darkened gold-tinted disc so it reads as a control-shaped affordance
 rather than a stray punctuation character, with a deeper gradient beneath it. Still
 pointer-events:none on the whole thing including the disc, so nothing here can ever
 intercept a click on the row underneath, and visibility is still driven purely by the real
 scroll position measured in app.js's updateScrollAffordance(). */
.scroll-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(8, 8, 12, 0.72) 46%,
    rgba(8, 8, 12, 0.97) 88%
  );
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.scroll-fade.is-visible {
  opacity: 1;
}
.scroll-fade-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--mom-radius-sm); /* never pill */
  background: rgba(240, 193, 115, 0.14);
  border: 1px solid rgba(240, 193, 115, 0.42);
  color: var(--mom-gold);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.scroll-fade-chevron svg {
  width: 26px;
  height: 26px;
  display: block;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.9));
}
@media (prefers-reduced-motion: reduce) {
  .scroll-fade {
    transition: none;
  }
}
.drawer-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--mom-text-muted);
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-sm);
  letter-spacing: 1.5px;
}
.drawer-item {
  display: flex;
  align-items: center;
  gap: var(--mom-space-3);
  padding: 10px var(--mom-space-4);
  margin-bottom: 6px;
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  border-radius: var(--mom-radius-sm); /* never pill */
  text-decoration: none;
  color: var(--mom-text-muted);
  transition: all 0.18s ease;
}
.drawer-item:hover,
.drawer-item:focus-visible {
  background: var(--mom-gold-dim);
  border-color: var(--mom-border);
  color: var(--mom-text);
  transform: translateX(2px);
}
.drawer-item--highlight {
  background: var(--mom-gold-dim);
  border-color: var(--mom-gold);
}
.drawer-item-text {
  flex: 1;
  min-width: 0;
}
.drawer-item-name {
  font-size: var(--mom-text-base); /* body tier (13px) */
  font-weight: 600;
  color: var(--mom-text);
  letter-spacing: 0.3px;
}
.drawer-item-purpose {
  font-size: var(--mom-text-sm);
  color: var(--mom-text-soft);
  margin-top: 2px;
}
.drawer-item-host {
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-xs);
  color: var(--mom-text-muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Local-clone marker (V1.1.0, JOB 2): a quiet tag on a catalog row whose destination this
 clone hosts itself (item.local, from data/local-overrides.json), not a status badge and
 deliberately not styled like one - smaller, no fill, blue rather than any of the
 .drawer-item--status-* colors above, so it never reads as a status. */
.drawer-item-local {
  display: inline-block;
  margin-left: 6px;
  padding: 0 4px;
  border: 1px solid rgba(96, 165, 250, 0.4);
  border-radius: var(--mom-radius-xs);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--mom-blue);
  text-transform: uppercase;
  vertical-align: middle;
}
/* LIBRARY two-group heading (V1.3.0, direct from Anric): "YOUR LIBRARY" and "THE CAPITAL
 MAGNETISM COLLECTION" inside the LIBRARY drawer, built by app.js's libraryGroupedHTML().
 A quieter version of .mom-section-label (same mono/letterspace/gold idiom, smaller and
 without the panel-heading border-bottom, since this sits inside an already-labelled
 drawer) rather than a second competing heading style. */
.drawer-group-head {
  display: flex;
  align-items: baseline;
  gap: var(--mom-space-2);
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-sm);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mom-gold);
  margin: var(--mom-space-5) 0 var(--mom-space-2);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--mom-border-faint);
}
.drawer-group-head:first-child {
  margin-top: 0;
}
.drawer-group-count {
  color: var(--mom-text-muted);
  font-size: var(--mom-text-xs);
}
.drawer-group-note {
  margin-left: auto;
  font-size: var(--mom-text-xs);
  letter-spacing: 0.4px;
  text-transform: none;
  color: var(--mom-text-muted);
}

/* Status-colored left edge, the drawer's equivalent of section 9's .mom-row--status-*
 stripes - same tokens, same meaning, just on the drawer-item shape instead of the old
 flat row shape. */
.drawer-item--status-live {
  border-left-color: var(--mom-green);
}
.drawer-item--status-new {
  border-left-color: var(--mom-gold);
}
.drawer-item--status-beta {
  border-left-color: var(--mom-orange);
}
.drawer-item--status-coming_soon,
.drawer-item--status-in_development {
  border-left-color: var(--mom-text-dim);
}
.drawer-item--status-migrating {
  border-left-color: var(--mom-blue);
}
.drawer-item--status-dead {
  border-left-color: var(--mom-red);
  color: var(--mom-text-dim);
}
.drawer-item--status-dead .drawer-item-host {
  color: var(--mom-red);
}

/* V1.5.0 (FIX 2): the backdrop is offset by the same measured header height as the overlay
 above. It used to start at top:0 too, so the topmost strip of "click outside to close" was
 sitting under the header and a click there landed on header chrome instead of closing the
 drawer - half of "there is no way to close that when you're done." */
.drawer-backdrop {
  position: fixed;
  top: var(--mn-bar-h, 75px);
  left: 0;
  right: 480px;
  bottom: var(--mom-footer-h, 108px);
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 99;
}
.drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 760px) {
  .drawer-overlay {
    width: 100%;
    max-width: 100%;
  }
  .drawer-backdrop {
    right: 0;
  }
}

/* ==========================================================================
 12. FOOTER + QUICK LINKS - mvp-dashboard V0.5.0, rebuilt V1.1.0 (JOB 1)
 The world-clock strip (section 9, .mom-worldclock, unchanged) generalized into a member
 footer, .mom-footer below - now just that ribbon, nothing else. The 13-entry link set that
 used to live inside .mom-footer moved out into its own panel above it
 (public/index.html's #quick-links-panel, a plain .mom-panel - see that panel's own HTML
 comment for why it deliberately carries no border/radius/background override anywhere in
 this file: the whole point is that it inherits .mom-panel's frame unmodified, the exact
 same way .telemetry-strip does, so the two panels' computed border/radius/background can
 never drift apart). The old bottom brand/version row that used to close .mom-footer is
 deleted, not just hidden; its version stamp lives in the top preview banner now.
 ========================================================================== */
/* V1.5.0 (FIX 5): #site-footer no longer carries .mom-footer - it is a plain .mom-panel now,
 for exactly the reason QUICK LINKS was changed in V1.1.0 (Anric, on 14/15: "the border
 around that is too dominant again, and I think it could be slimmer"). .mom-footer's frame
 was --mom-border-ops (a heavier, more saturated gold) over --mom-bg-ops-wash, against
 .mom-panel's --mom-border-soft over --mom-bg-panel used by 07 and 08. The rule below is kept
 rather than deleted because nothing requires its removal and a future member-footer block
 may want it, but no element in this build references it today. */
.mom-footer {
  border: 1px solid var(--mom-border-ops);
  border-radius: var(--mom-radius-panel);
  background: var(--mom-bg-ops-wash);
  overflow: hidden;
}
/* #world-clock (V1.3.0): now the absolutely-positioned city-pin LAYER inside .mom-tz-ribbon
 below, repurposed from the old flat digital-ribbon container the .mom-worldclock-cell rules
 further up this file styled (that markup is gone; those rules are unreferenced now, left
 in place rather than deleted since nothing here requires their removal). */
.mom-worldclock-ribbon {
  position: absolute;
  inset: 0;
}

/* ==========================================================================
 13. WORLD CLOCK OPS BAY - 09 WORLD CLOCK, V1.3.0, direct from Anric: "he prefers the
 original". Ported from docs/reference/v3-source/08_ROADMAP-CLOCK-ACTIONS.html (Box 14 World
 Clock + Box 15 Quick Actions + ops-foot row, markup) and 02A_STYLES.html (.ops-bay/.ops-grid/
 .ops-block/.ops-label/.tz-ribbon/.tz-daynight/.tz-sun/.city*/.qa*/.ops-foot*, CSS) - values
 harvested verbatim (colors, sizes, the sun's box-shadow pulse), selectors renamed with a
 mom- prefix and de-scoped from the source's ".mvp-cmd" wrapper (this page has no such
 wrapper) to avoid colliding with any existing class of the same short name elsewhere in this
 system. The map background is the local public/assets/map/worldmap.webp (2000x528, 77KB),
 never the source's filesafe.space URL - see #tz-ribbon's background-image below.
 ========================================================================== */
/* V1.5.0 (FIX 5, "It's too high."): the bay is a .mom-panel now, so it inherits that panel's
 own padding; the only override left here is a slightly tighter bottom, because this bay ends
 in a horizontal rule + footer row rather than in content. .mom-ops-bay no longer sets its
 own border/background/radius at all - that is the whole point of the class change on
 #site-footer, see the note above .mom-footer. overflow:hidden is kept: the sun glow inside
 the time-zone ribbon genuinely needs clipping at the panel edge.
 Measured height reduction comes from four places, none of them a squeeze on legibility:
 the panel padding is now .mom-panel's (16/22/20) instead of 20/22 all round, the ops grid's
 map column narrows from 1.6fr to 1.25fr (the ribbon is aspect-ratio locked, so a narrower
 column is directly a shorter ribbon and the map is never stretched), the label block loses
 its extra top/bottom padding, and the quick-action tiles lose a row of padding each. */
.mom-ops-bay {
  margin-top: 0;
  padding-bottom: var(--mom-space-6);
  position: relative;
  overflow: hidden;
}
.mom-ops-bay::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(240, 193, 115, 0.5), transparent);
  pointer-events: none;
}
.mom-ops-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 22px;
  margin-bottom: var(--mom-space-5);
  align-items: start;
}
.mom-ops-block {
  padding: 0;
  min-width: 0;
}
.mom-ops-label {
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-base);
  color: var(--mom-gold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: var(--mom-space-4);
  display: flex;
  align-items: center;
  gap: var(--mom-space-2);
}
.mom-ops-label .mom-num {
  background: rgba(240, 193, 115, 0.12);
  padding: 3px 9px;
  border-radius: var(--mom-radius-sm);
  font-size: 12px;
}

/* Time-zone ribbon: equirectangular world map, cities placed by real longitude/latitude
 (x% = ((lon+180)/360)*100, y% = ((90-lat)/180)*100 - the source's own formula, city
 percentages HARVESTED VERBATIM from its markup, see app.js's WORLD_CITIES). Locked to the
 map image's real aspect ratio (2000x528 = 3.79:1, same ratio as the source's 4000x1056
 original) so it fills without stretching. */
/* --tz-map is set inline by app.js's buildWorldClock() (a document-relative "assets/map/
 worldmap.webp" path, JS-set inline styles resolve against the document, not the stylesheet -
 the same reason orb.json's images are applied via JS/--cluster-bg rather than a literal
 url() written here), so this ONE rule works unmodified in both the split public/ dev build
 and the bundled dist/index.html build, where this whole file is inlined into a <style> tag
 and a literal relative url() here would resolve against the wrong base. */
/* V1.5.0 (FIX 5): the ribbon's own 1px gold border comes down from 0.22 to 0.14 alpha so the
 map frame reads as a hairline inside the panel rather than a second competing frame around
 box 14 - the "too dominant" border Anric named. Geometry (aspect-ratio, the map background)
 is untouched: the map is never stretched, the ribbon simply sits in a narrower grid column
 now and is therefore shorter. */
.mom-tz-ribbon {
  position: relative;
  width: 100%;
  aspect-ratio: 2000 / 528;
  background:
    linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.82)),
    var(--tz-map, none) center / 100% 100% no-repeat,
    var(--mom-bg-panel-solid);
  border: 1px solid rgba(240, 193, 115, 0.14);
  border-radius: var(--mom-radius-xl);
  overflow: hidden;
}
.mom-tz-daynight {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 50% 120% at var(--sun-x, 50%) 50%,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(240, 193, 115, 0.45) 18%,
    rgba(240, 193, 115, 0.22) 40%,
    rgba(240, 193, 115, 0.08) 60%,
    rgba(0, 0, 0, 0) 80%
  );
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
}
.mom-tz-sun {
  position: absolute;
  top: 50%;
  left: var(--sun-x, 50%);
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #f0c173 45%, rgba(240, 193, 115, 0.6) 100%);
  box-shadow: 0 0 44px #f0c173, 0 0 90px rgba(240, 193, 115, 0.9), 0 0 150px rgba(240, 193, 115, 0.5);
  pointer-events: none;
  z-index: 3;
  animation: mom-tz-sun-pulse 3s ease-in-out infinite;
}
@keyframes mom-tz-sun-pulse {
  0%, 100% {
    box-shadow: 0 0 44px #f0c173, 0 0 90px rgba(240, 193, 115, 0.9), 0 0 150px rgba(240, 193, 115, 0.5);
  }
  50% {
    box-shadow: 0 0 60px #f0c173, 0 0 120px rgba(240, 193, 115, 1), 0 0 210px rgba(240, 193, 115, 0.7);
  }
}
.mom-city {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 4;
}
.mom-city-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #f0c173;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
  margin: 0 auto 4px;
  animation: mom-city-pulse 2s ease-in-out infinite;
}
@keyframes mom-city-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.12); }
}
.mom-city-label {
  font-family: var(--mom-font-mono);
  font-size: 8.5px;
  color: #ccc;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.75);
  padding: 2px 5px;
  border-radius: var(--mom-radius-xs);
  border: 1px solid rgba(240, 193, 115, 0.3);
  white-space: nowrap;
}
.mom-city-time {
  font-family: var(--mom-font-head);
  font-weight: var(--mom-font-head-weight);
  font-size: 12px;
  color: var(--mom-gold);
  margin-top: 3px;
  text-shadow: 0 0 6px rgba(240, 193, 115, 0.6);
}

/* Quick actions (Box 15). Real hrefs from the source: Record Testimonial, Contact Support
 (mailto), Ecosystem Map, Terms and Privacy. */
.mom-qa-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mom-space-3);
}
/* V1.5.0 (FIX 5, "It's too high"): one step of vertical padding off each tile and a slightly
 smaller icon square. Four tiles in two rows, so this is 2 x 8px off box 15's height without
 touching the label size. */
.mom-qa {
  display: flex;
  align-items: center;
  gap: var(--mom-space-4);
  min-width: 0;
  padding: var(--mom-space-4) var(--mom-space-5);
  background: var(--mom-bg-inset);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--mom-radius-lg);
  text-decoration: none;
  color: var(--mom-text-soft);
  font-size: var(--mom-text-md);
  transition: all 0.18s ease;
}
.mom-qa:hover,
.mom-qa:focus-visible {
  border-color: rgba(240, 193, 115, 0.5);
  background: rgba(240, 193, 115, 0.04);
  color: var(--mom-gold);
}
.mom-qa-ico {
  width: 26px;
  height: 26px;
  border-radius: var(--mom-radius-md);
  background: rgba(240, 193, 115, 0.1);
  color: var(--mom-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

/* Ops footer row: integration dots, version chip, Send Feedback link, copyright.
 V1.5.0 (FIX 5, direct from Anric: "the footer indicators are a little cut off and
 squashed."). Cause: this was a single space-between flex line whose children are all
 letterspaced monospace text. A flex item's default min-width is auto, but these items are
 themselves flex CONTAINERS (.mom-ops-ints) or plain divs holding nowrap-able text, and with
 five integration labels plus three right-hand items on one line at 1280 and below the row
 ran out of width and the labels clipped at their box edge.
 Fix, three parts, none of which shrinks any text:
   1. Every leaf label is white-space:nowrap and flex:0 0 auto, so it is an indivisible unit
      that WRAPS to the next line rather than being compressed below its own text width.
      This is what makes the "scrollWidth never exceeds clientWidth" check pass.
   2. The three right-hand items are grouped in .mom-ops-foot-meta so they wrap together as
      a block instead of one at a time, which is what made the row look squashed rather than
      simply wrapped.
   3. A real row-gap, so a wrapped line has vertical breathing room instead of colliding
      with the line above it. */
.mom-ops-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--mom-space-5);
  border-top: 1px solid rgba(240, 193, 115, 0.12);
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-sm);
  color: var(--mom-text-muted);
  letter-spacing: 1.2px;
  flex-wrap: wrap;
  column-gap: var(--mom-space-6);
  row-gap: var(--mom-space-4);
}
.mom-ops-ints {
  display: flex;
  align-items: center;
  column-gap: var(--mom-space-6);
  row-gap: var(--mom-space-3);
  flex-wrap: wrap;
  min-width: 0;
}
.mom-ops-int {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--mom-text-soft);
}
.mom-ops-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mom-green);
  box-shadow: 0 0 6px var(--mom-green);
  flex-shrink: 0;
}
/* The version chip, Send Feedback and the copyright line, grouped so they wrap as one unit. */
.mom-ops-foot-meta {
  display: flex;
  align-items: center;
  column-gap: var(--mom-space-6);
  row-gap: var(--mom-space-3);
  flex-wrap: wrap;
  min-width: 0;
}
.mom-ops-foot-meta > * {
  flex: 0 0 auto;
  white-space: nowrap;
}
.mom-ops-feedback-link {
  color: var(--mom-gold);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px dotted rgba(240, 193, 115, 0.35);
}
/* Below 560 the copyright is the one item that is long enough to need the whole line to
 itself; letting it have one keeps every other label on a single uncramped row. */
@media (max-width: 560px) {
  .mom-ops-foot-meta {
    width: 100%;
  }
  .mom-ops-copyright {
    flex-basis: 100%;
  }
}

@media (max-width: 900px) {
  .mom-ops-grid {
    grid-template-columns: 1fr;
  }
  .mom-qa-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .mom-city-label {
    display: none; /* pins + times stay, labels drop first on very narrow ribbons, matching the source's own mobile behavior */
  }
}
@media (prefers-reduced-motion: reduce) {
  .mom-tz-sun {
    animation: none;
  }
  .mom-city-dot {
    animation: none;
  }
}

/* QUICK LINKS tile grid (V1.1.0, JOB 1, renamed from "footer links"). Rendered by
 buildQuickLinks() in app.js from data/footer.json. FOOTER-SPEC.md revision 3: "let's have
 it all caps in boxes so that those become linkable pages" - each entry is its own flat box
 (the .mom-inset recipe: solid dark fill, hairline border, panel-adjacent radius) rather than
 the old shared-border row cells, and the whole tile is the click target, not just the label
 text. No status badge anywhere in here anymore (revision 3 point 1). A tile with no real
 destination (action "none", or status "coming" as a defensive second gate - see
 quickLinkTileHTML() in app.js) renders .mom-quicklink-tile--disabled: dimmed, aria-disabled,
 non-interactive, same "never a bare hash link" rule drawer-item already follows for a
 catalog item with no url. */
/* V1.3.0 (08 QUICK LINKS, direct from Anric, "the thing that's actually going to make
 money"): grid-with-auto-fill used to wrap the 13 tiles onto 2 rows well before any narrow
 breakpoint (measured: already 2 rows at 1680px, the widest width this page targets) because
 auto-fill computes as many 150px-minimum columns as fit and wraps the rest - the exact
 failure mode "never wrap to a second line" rules out. Switched to a single flex row,
 nowrap, that never breaks: every tile is flex:1 1 0 so at wide widths they share the row
 evenly (scaling up), min-width holds a legible floor, and once 13 tiles at that floor would
 exceed the panel's width the row scrolls horizontally (overflow-x:auto) instead of wrapping.
 Verified at 1680/1280/1024/768/390px - one row, zero wraps, at every width; see the report
 for the exact tile width and scroll state measured at each. Tile height also cut (52px min
 -> 40px) and the panel heading compacted the same targeted way .telemetry-strip already
 was (below), per "too much space lost to its own header and to oversized buttons". */
.mom-quicklinks-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--mom-space-3);
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px; /* room for the scrollbar without clipping tile borders under it */
  scrollbar-width: thin;
}
.quick-links-panel .mom-section-label {
  font-size: var(--mom-text-xs); /* was --mom-text-lg (16px), same compaction telemetry-strip uses */
  margin-bottom: var(--mom-space-2);
  padding-bottom: 2px;
}
.mom-quicklink-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 92px;
  min-height: 40px; /* was 52px: "oversized buttons" trim, still comfortably tappable */
  padding: var(--mom-space-2) var(--mom-space-3);
  margin: 0;
  background: var(--mom-bg-inset);
  color: var(--mom-text-body);
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-sm);
  font-weight: 600;
  letter-spacing: 0.6px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--mom-radius-lg); /* never pill */
  cursor: pointer;
  appearance: none;
  overflow: hidden; /* clips the hover-shimmer sweep below to the tile's own rounded box */
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}
a.mom-quicklink-tile:hover,
button.mom-quicklink-tile:hover,
a.mom-quicklink-tile:focus-visible,
button.mom-quicklink-tile:focus-visible {
  background: var(--mom-gold-dim);
  border-color: var(--mom-border);
  color: var(--mom-gold);
}
/* Hover shimmer (V1.3.0, direct from Anric): reuses the existing mom-hairline-shimmer
 keyframe and its --mom-dur-hairline tempo (4s, section 3) rather than inventing a new
 sweep/timing - the same idiom already used for .mom-motion-hairline, just triggered on
 hover/focus instead of looping at rest, and only for one pass (no infinite) since a
 continuously-looping shimmer on every clickable tile would be noisy at this density. */
.mom-quicklink-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 35%,
    rgba(240, 193, 115, 0.35) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
}
a.mom-quicklink-tile:hover::after,
button.mom-quicklink-tile:hover::after,
a.mom-quicklink-tile:focus-visible::after,
button.mom-quicklink-tile:focus-visible::after {
  animation: mom-quicklink-shimmer var(--mom-dur-hairline) ease-in-out 1;
}
@keyframes mom-quicklink-shimmer {
  0% {
    transform: translateX(-120%);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}
/* Dimmed/disabled tile (Opus Card, Bookstore, Webinar, Marketplace today - see
 quickLinkTileHTML()'s own comment in app.js for why this is a general rule, not a
 hardcoded label list). Reduced opacity is the same muted treatment already used elsewhere
 in this file for an inactive/background element (see section 6's blob opacity and the
 telemetry meter's own dim state), not a one-off invented value. No hover state: a disabled
 tile never becomes interactive on hover, including visually - and never gets the shimmer
 above, which only binds to a.mom-quicklink-tile/button.mom-quicklink-tile, never the plain
 div.mom-quicklink-tile--disabled. */
.mom-quicklink-tile--disabled {
  opacity: 0.45;
  color: var(--mom-text-muted);
  cursor: default;
}
.mom-quicklink-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .mom-quicklink-tile::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drawer-overlay {
    transition: none;
  }
  .drawer-backdrop {
    transition: none;
  }
}

/* ==========================================================================
 13. MOBILE-FIRST NOTES
 Every component above sets no fixed viewport-dependent width; panels
 fill their container, meters and badges scale with font-size. The
 two production surfaces both go responsive around 1100px (member) and
 have a fixed desktop console shell (ops, not designed for mobile at
 all - it is an operator tool, not a member surface). A mvp-dashboard
 rebuild should treat the member dashboard's ~1100px breakpoint as the
 only one that matters, since ops's layout was never meant to run on a
 phone and Anric reads this product on his phone.
 ========================================================================== */

/* ==========================================================================
 14. FIND BY TOPIC // VIDEO BROWSER - 12, V1.5.0 (FIX 7), direct from Anric: "The current
 LIVE version has a way to actually search videos and show videos by topic."
 Ported from docs/reference/v3-source/02A_STYLES.html (.topic-browser-wrap /
 .topic-browser-summary / .topic-browser / .tb-controls / .tb-search / .tb-active* /
 .tb-cloud / .tb-tag* / .tb-results / .tb-row* / .tb-empty), values harvested verbatim
 (colors, sizes, radii, the auto-fill result grid at 280px minimum), selectors de-scoped
 from the source's ".mvp-cmd" wrapper, which this page does not have.
 THREE deliberate deviations, all estate rules, none of them behavioral:
   1. The source's .tb-tag-more carries font-style:italic. Italics are banned estate-wide,
      so that button reads as a quieter, letterspaced tone instead.
   2. The source's summary sets its own h3/meta typography; this build reuses the page's own
      .mom-section-label / .mom-panel-num idiom so panel 12 is labelled exactly like panels
      01-08 and 14/15 rather than introducing a second heading style.
   3. The expand/collapse marker is '+' / '-' in plain ASCII, not the source's fullwidth
      characters, so it renders identically without depending on a CJK-capable fallback font.
 ========================================================================== */
.topic-browser-panel {
  padding-bottom: var(--mom-space-6);
}
.topic-browser-wrap {
  margin: 0;
}
.topic-browser-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mom-space-4);
}
.topic-browser-summary::-webkit-details-marker {
  display: none;
}
.topic-browser-summary::marker {
  content: "";
}
.topic-browser-summary::before {
  content: "+";
  color: var(--mom-gold);
  font-family: var(--mom-font-mono);
  font-size: 20px;
  line-height: 1;
  width: 18px;
  flex-shrink: 0;
  display: inline-block;
  text-align: center;
}
.topic-browser-wrap[open] > .topic-browser-summary::before {
  content: "-";
}
/* The label inside the summary is the same .mom-section-label used on every other panel, so
 it must not re-apply that class's own bottom margin/border inside a flex summary row. */
.topic-browser-summary .topic-browser-title {
  margin: 0;
  padding: 0;
  border: 0;
  flex: 0 1 auto;
}
.topic-browser-meta {
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-sm);
  color: var(--mom-text-muted);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-left: auto;
}
.tb-expand-hint {
  color: var(--mom-text-muted);
  margin-left: 10px;
  letter-spacing: 0.8px;
  text-transform: none;
}
.topic-browser-wrap[open] .tb-expand-hint {
  display: none;
}
.topic-browser {
  background: linear-gradient(
    180deg,
    rgba(15, 15, 20, 0.85) 0%,
    rgba(10, 10, 14, 0.85) 100%
  );
  border: 1px solid rgba(240, 193, 115, 0.18);
  border-radius: var(--mom-radius-panel);
  padding: 16px 20px;
  margin-top: 14px;
}
.tb-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.tb-search {
  flex: 1 1 240px;
  min-width: 0;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(240, 193, 115, 0.3);
  border-radius: var(--mom-radius-sm);
  color: var(--mom-text);
  padding: 9px 14px;
  font-family: var(--mom-font-mono);
  font-size: 13px;
  letter-spacing: 0.5px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.tb-search:focus,
.tb-search:focus-visible {
  border-color: var(--mom-gold);
  background: rgba(0, 0, 0, 0.7);
}
.tb-search::placeholder {
  color: var(--mom-text-muted);
}
.tb-active {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.tb-active-label {
  font-family: var(--mom-font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--mom-text-muted);
  text-transform: uppercase;
}
.tb-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(240, 193, 115, 0.14);
  border: 1px solid rgba(240, 193, 115, 0.5);
  color: var(--mom-gold);
  padding: 4px 10px;
  border-radius: var(--mom-radius-xs);
  font-family: var(--mom-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.6px;
}
.tb-active-chip button {
  background: transparent;
  border: none;
  color: var(--mom-gold);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
}
.tb-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 14px 0;
  border-top: 1px solid rgba(240, 193, 115, 0.12);
  border-bottom: 1px solid rgba(240, 193, 115, 0.12);
  margin-bottom: 16px;
}
.tb-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(240, 193, 115, 0.25);
  color: var(--mom-text-soft);
  padding: 6px 12px;
  border-radius: var(--mom-radius-xs); /* never pill */
  cursor: pointer;
  font-family: var(--mom-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.4px;
  transition: all 0.18s ease;
}
.tb-tag:hover,
.tb-tag:focus-visible {
  background: rgba(240, 193, 115, 0.1);
  border-color: var(--mom-gold);
  color: var(--mom-gold);
}
.tb-tag.is-active {
  background: var(--mom-gold);
  border-color: var(--mom-gold);
  color: #0a0a0f;
}
.tb-tag-n {
  font-size: 10px;
  opacity: 0.65;
  background: rgba(0, 0, 0, 0.25);
  padding: 1px 5px;
  border-radius: var(--mom-radius-xs);
}
.tb-tag.is-active .tb-tag-n {
  background: rgba(0, 0, 0, 0.25);
  color: #0a0a0f;
}
/* Deviation 1: the source styles this with font-style:italic. No italics estate-wide. */
.tb-tag-more {
  color: var(--mom-text-muted);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.tb-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.tb-row {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(240, 193, 115, 0.22);
  border-radius: var(--mom-radius-lg);
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: all 0.18s ease;
}
.tb-row:hover,
.tb-row:focus-visible {
  background: rgba(240, 193, 115, 0.08);
  border-color: var(--mom-gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.tb-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.tb-row-program {
  font-family: var(--mom-font-mono);
  font-size: 10.5px;
  color: var(--mom-gold);
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.tb-row-status {
  font-family: var(--mom-font-mono);
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: var(--mom-radius-xs);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  flex-shrink: 0;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.35);
  color: var(--mom-green);
}
.tb-row-status--coming {
  background: rgba(240, 193, 115, 0.12);
  border-color: rgba(240, 193, 115, 0.35);
  color: var(--mom-gold);
}
.tb-row-title {
  font-family: var(--mom-font-head);
  font-weight: var(--mom-font-head-weight);
  font-size: 14px;
  color: var(--mom-text);
  line-height: 1.3;
  margin-bottom: 6px;
}
.tb-row-desc {
  font-size: 12px;
  color: var(--mom-text-soft);
  line-height: 1.45;
  margin-bottom: 10px;
}
.tb-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
}
.tb-row-tag {
  background: rgba(240, 193, 115, 0.08);
  border: 1px solid rgba(240, 193, 115, 0.18);
  color: var(--mom-gold-ops);
  padding: 3px 8px;
  border-radius: var(--mom-radius-xs);
  font-family: var(--mom-font-mono);
  font-size: 10px;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tb-row-tag:hover {
  background: rgba(240, 193, 115, 0.18);
  border-color: var(--mom-gold);
  color: var(--mom-gold);
}
.tb-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: var(--mom-text-muted);
  font-family: var(--mom-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.8px;
}
@media (max-width: 560px) {
  .topic-browser {
    padding: 14px;
  }
  .topic-browser-meta {
    margin-left: 0;
    flex-basis: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tb-row,
  .tb-tag,
  .tb-row-tag,
  .tb-search {
    transition: none;
  }
  .tb-row:hover,
  .tb-row:focus-visible {
    transform: none;
  }
}

/* MVP Dashboard Clone V0.7.0
   Page-specific layout only. Every color, radius, spacing, blur, motion duration and
   component shape comes from assets/momentum.css (loaded before this file) - this sheet
   composes those tokens/components into the mvp-dashboard page shell (the four zones +
   drawer + footer) and adds nothing that duplicates a momentum.css component. See
   docs/DESIGN-SYSTEM.md for the harvest.

   Design law inherited from momentum.css: no italics, no em dashes, no pill radii (max
   14px panel radius; 50% only on round dots/rings/blobs), dark theme only, mobile first,
   --mom-gold is body gold, --mom-gold-ops is header-chrome gold, no cyan anywhere. */

/* Real measured height of .mom-footer, used by momentum.css to bound the drawer/backdrop
   above the footer rather than the OPS console's hardcoded 38px world-clock-only strip.
   Page-specific value, so it lives here rather than in momentum.css's own token section.
   V1.1.0 (JOB 1): .mom-footer is now the world-clock ribbon only (the link grid moved up
   into #quick-links-panel, the brand/version row is deleted - see momentum.css section 12),
   so this dropped from 104px to a real measured ~55px at 1680px, the same reference width
   the rest of this file's "Real measured..." comments use. At 390px the 7-city ribbon wraps
   to more rows (up to ~162px measured) - this single value does not chase that, same
   approximation the old 104px already made against an even taller, more variable footer. */
:root {
  --mom-footer-h: 60px;
  /* V1.4.0 (FIX 2): the explicit height of .shell-row--main, named here so the desktop rule
     and the 1180px stacked rule below can never drift apart. Raised from 600px to 760px for
     one measured reason: the right-hand column now carries THREE panels (05 LIVE at 483px of
     real content, PROGRESS at 76px, 06 REPLAYS with a 132px floor) plus two 22px gaps, which
     needs 735px. At 600px the rotation rows were squeezed out of 05 LIVE entirely. The extra
     height also goes to 02 ALERTS and 03 LATEST RELEASES, which is where Anric wanted more
     room to begin with. The orb keeps its own size and simply centres in the taller column;
     its internal proportions are relative to .gear-cluster-zone, not to this value. */
  --mvp-row-h: 760px;
}

* {
  box-sizing: border-box;
}

/* V1.5.0 (FIX 2, second half of the root cause). #mn-bar declares position:sticky/top:0, but
 it was NOT actually sticking: overflow-x:hidden here makes the other axis compute to auto
 (CSS Overflow 3: a "visible" value becomes "auto" when the other axis is neither visible nor
 clip), which turns the root element into a scroll container and silently disables sticky
 positioning for its descendants. Measured before this change at 1280px: scroll the page to
 y=600 and #mn-bar's top reads -570, i.e. the header scrolled away with the document. That is
 the literal mechanism behind Anric's "Unless you scroll the whole page because the header
 covers the top" - the only way he could reach the drawer's close control was to scroll the
 header off the page.
 overflow-x:clip clips the same horizontal overflow but does NOT create a scroll container,
 so overflow-y stays visible and sticky works again. Verified after: at both 1280 and 390 the
 bar's top reads 0 at scroll y=800, and documentElement.scrollWidth still equals innerWidth at
 390 (no horizontal scroll). The hidden declaration is kept first as a fallback for anything
 that does not support clip; there it behaves exactly as it did before this build. */
html,
body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  background: var(--mom-bg-page);
  color: var(--mom-text-body);
  font-family: var(--mom-font-body-member);
  font-size: var(--mom-text-md);
  line-height: 1.45;
  font-style: normal;
}

a {
  color: var(--mom-blue);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 1px solid var(--mom-gold);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Preview banner: unmissable, red, sits above the HUD ---- */
.preview-banner {
  position: relative;
  background: var(--mom-red);
  color: #fff;
  padding: 7px 16px;
  text-align: center;
  font-family: var(--mom-font-mono);
  font-size: 11px;
  letter-spacing: 0.3px;
}
.preview-banner a {
  color: #fff;
  text-decoration: underline;
}
.preview-banner-tag {
  display: inline-block;
  font-family: var(--mom-font-head);
  font-weight: var(--mom-font-head-weight);
  font-size: 10px;
  letter-spacing: 2px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--mom-radius-xs);
  padding: 2px 7px;
  margin-right: 8px;
}

/* ---- CORS-degradation banner (V1.0.0, header port): same shape as .preview-banner above,
   distinct color (--mom-orange, an existing warning-adjacent token, not a new color) so it
   reads as a live-data warning rather than the static "this is a preview build" notice.
   Hidden by default in index.html; revealed by window.mvpShowCorsBanner() only when a real
   fetch to mvp-access-gate-worker or mvp-profile-worker actually fails. ---- */
.preview-banner--warn {
  background: var(--mom-orange);
}

/* ---- HUD status strip micro pieces (layout only, styling lives in momentum.css) ---- */
#hud-search-affordance {
  background: transparent;
  cursor: pointer;
}
#hud-search-affordance:hover {
  border-color: var(--mom-gold-ops);
  color: var(--mom-gold-ops);
}

/* ---- Main shell ----
   V0.6.0 job 3: max-width removed so the grid can span the full viewport (previously
   capped at 1360px, which left the orb - now the row's dominant element - squeezed into a
   fixed-width center column regardless of how wide the browser actually was). Horizontal
   padding stays as a gutter; nothing else about the shell's vertical rhythm changes. */
main {
  margin: 0 auto;
  padding: var(--mom-space-6) var(--mom-space-6) var(--mom-space-10);
  display: flex;
  flex-direction: column;
  gap: var(--mom-space-6);
}

/* ---- Search row (now a standalone strip above the four zones) ---- */
.search-row {
  position: relative;
}

.search-wrap {
  position: relative;
}

#search-input {
  width: 100%;
  background: var(--mom-bg-inset);
  border: 1px solid var(--mom-border-soft);
  color: var(--mom-text);
  padding: 10px 12px;
  font-size: var(--mom-text-base);
  font-family: var(--mom-font-body-member);
  border-radius: var(--mom-radius-sm);
}
#search-input:focus-visible {
  border-color: var(--mom-gold);
}
#search-input::placeholder {
  color: var(--mom-text-muted);
}

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  display: none;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--mom-bg-modal);
  border: 1px solid var(--mom-border-strong);
  border-radius: var(--mom-radius-md);
  box-shadow: var(--mom-shadow-modal);
  backdrop-filter: blur(var(--mom-blur-md));
  -webkit-backdrop-filter: blur(var(--mom-blur-md));
}
.search-results.open {
  display: block;
}

/* V1.5.0 (FIX 2): the head row gains a real, visibly reachable close control. Escape and
 click-outside both already closed this dropdown, but neither is visible, and Anric's report
 was specifically about not being able to see a way out. The head is the first thing painted
 and the dropdown hangs BELOW the header it lives inside, so this control can never be
 covered by header chrome the way the drawer's × was. */
.sr-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  font-family: var(--mom-font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mom-text-muted);
  border-bottom: 1px solid var(--mom-border-faint);
}
.sr-head-text {
  flex: 1 1 auto;
  min-width: 0;
}
.sr-close {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mom-red-dim);
  border: 1px solid rgba(220, 20, 60, 0.4);
  color: var(--mom-red);
  font-family: var(--mom-font-head);
  font-weight: var(--mom-font-head-weight);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--mom-radius-xs); /* never pill */
}
.sr-close:hover,
.sr-close:focus-visible {
  background: rgba(220, 20, 60, 0.25);
  color: #fff;
}
.sr-empty {
  padding: 14px 12px;
  font-family: var(--mom-font-mono);
  font-size: 12px;
  color: var(--mom-text-muted);
}
.sr-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--mom-border-faint);
  cursor: pointer;
}
.sr-item:last-child {
  border-bottom: 0;
}
.sr-item:hover,
.sr-item.active {
  background: var(--mom-gold-dim);
}
.sr-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: var(--mom-bg-inset);
  border: 1px solid var(--mom-border-ops);
  border-radius: var(--mom-radius-xs);
  font-family: var(--mom-font-head);
  font-weight: var(--mom-font-head-weight);
  font-size: 9px;
  color: var(--mom-gold-ops);
}
.sr-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--mom-text);
}
.sr-cat {
  flex-shrink: 0;
  font-family: var(--mom-font-mono);
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--mom-blue);
}

/* ---- The four zones: portal rail | welcome+release | orb | live+replays ----
   V0.5.0. An explicit row height governs this row rather than its content, per the brief:
   "the row height must be governed by ... an explicit row height, not by content." Each
   column stretches to that height and any panel body that can overflow (the note, the
   release feed, the replays list) scrolls internally (flex: 1 1 0; min-height: 0;
   overflow-y: auto - never a fixed max-height, which is what clipped the sibling columns
   on the real GHL-hosted dashboard once before). */
/* V0.6.0 job 3 (SUPERSEDED, see below): orb-col used to take 2.6fr of the row against 0.9fr
   each for notewell-col/live-replays-col.
   V1.3.0 (04 THE ORB, direct from Anric, "very rectangular"): orb-col's share is cut from
   2.6fr to 1.9fr and the reclaimed 0.7fr goes entirely to live-replays-col (0.9fr -> 1.6fr,
   per the brief: "give the reclaimed width to 05 LIVE and 06 REPLAYS"). notewell-col is
   untouched at 0.9fr - it was not named as a recipient. Total flexible share stays 4.4fr
   before and after (0.9+2.6+0.9 = 0.9+1.9+1.6), so this is a pure reallocation, not a change
   to how much of the row is fixed vs flexible. Measured at 1680px: orb-col 804px -> 587px
   (27% narrower), live-replays-col 278px -> ~495px (78% wider). The orb's own internal
   proportions (centre 44%, big gears 28%, small 22%, momentum.css section 10) are relative
   to .gear-cluster-zone's own box, not this column, so they are unaffected by this change.

   V1.4.0 (FIX 3, direct from Anric: "we don't really need all of that width on Box 05 and
   06. We can probably use more width on Box 02 and 03, so I would space them out evenly.").
   V1.3.0 handed ALL of the width reclaimed from the orb to the right-hand column, which left
   the two content columns 217px apart at 1680 (notewell 278 vs live 495) and wrapped the
   LATEST RELEASES copy every few words. The two content columns are now EQUAL flexible
   tracks: 0.9fr/1.6fr become 1.25fr/1.25fr, which is the same 2.5fr of flexible share
   redistributed evenly, so the total flexible share is still 4.4fr (1.25+1.9+1.25) and the
   orb is untouched at 1.9fr - Anric is not complaining about the orb now. This is expressed
   as two identical fr tracks, not as four hardcoded pixel widths, so the two columns stay
   equal at every viewport width above the stacking breakpoints, and minmax(0, ...) keeps a
   long unbroken string inside either column from forcing that track wider than its share.
   Predicted at 1680 (flexible pool measured at 1359px): notewell 386, orb 587, live 386. */
.shell-row--main {
  display: grid;
  grid-template-columns: 240px minmax(0, 1.25fr) minmax(0, 1.9fr) minmax(0, 1.25fr);
  gap: var(--mom-space-6);
  height: var(--mvp-row-h); /* CHOSEN explicit row height: the fixed sibling this row is governed by */
  align-items: stretch;
}
.shell-row--main > * {
  height: 100%;
  min-height: 0;
}

/* ---- Portal rail (zone 1) ---- */
.portal-rail {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.portal-rail .mom-portal-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

/* ---- Welcome note + release feed column (zone 2) ---- */
.notewell-col {
  display: flex;
  flex-direction: column;
  gap: var(--mom-space-6);
  min-height: 0;
}
.notewell-col > .mom-panel {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.notewell-body,
.release-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  position: relative; /* V0.7.0 (change 5): containing block for .scroll-fade, see below */
}
.note-lead {
  font-family: var(--mom-font-head);
  font-weight: var(--mom-font-head-weight);
  font-size: var(--mom-text-xl);
  color: var(--mom-gold);
  margin: 0 0 var(--mom-space-4);
}
.note-sec {
  padding: var(--mom-space-3) 0;
  border-bottom: 1px solid var(--mom-border-faint);
}
.note-sec:last-of-type {
  border-bottom: 0;
}
.note-sec-title {
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-sm);
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--mom-text);
  margin-bottom: 3px;
}
.note-sec-body {
  font-size: var(--mom-text-base);
  color: var(--mom-text-soft);
  margin: 0;
}
.note-sec-body a {
  color: var(--mom-gold);
}
.note-signoff {
  margin-top: var(--mom-space-4);
  font-size: var(--mom-text-sm);
  color: var(--mom-text-muted);
  font-style: normal;
}

/* V1.3.0 (03 LATEST RELEASES, direct from Anric): "absolutely" left aligned, and the status
   badge (new/updated/beta) moved OUT of the text flow to a right-aligned column so copy
   starts flush left on every row. justify-content:space-between + the badge's own
   flex-shrink:0 pins it to the row's right edge regardless of label width, which is what
   makes it read as a column rather than a trailing inline chip. */
.release-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mom-space-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--mom-border-faint);
  text-align: left;
}
.release-row:last-child {
  border-bottom: 0;
}
.release-row-body {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--mom-text-base);
  color: var(--mom-text-soft);
  text-align: left;
}
.release-row-body a {
  color: var(--mom-gold);
}
.release-row .mom-badge {
  flex-shrink: 0;
  margin-top: 1px;
}

/* ---- Orb column (zone 3): the real gear-cluster orb (data-driven, see app.js buildOrb()
   and momentum.css section 10). V0.6.0 job 3: this column now takes the majority share of
   the row's horizontal width (see .shell-row--main grid-template-columns below) instead of
   the placeholder's fixed small ring. ---- */
.orb-col {
  align-items: center;
  justify-content: center;
  gap: var(--mom-space-3);
  overflow: hidden;
}

/* ---- Live sessions + replays column (zone 4) ---- */
.live-replays-col {
  display: flex;
  flex-direction: column;
  gap: var(--mom-space-6);
  min-height: 0;
}
.live-replays-col > .mom-panel {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* V1.4.0 (FIX 2): this column carries THREE panels now (05 LIVE, PROGRESS, 06 REPLAYS)
   where it carried two, and 05 LIVE itself gained a time line, two more buttons and a third
   event row. Left on the equal "flex: 1 1 0" share above, each panel got a third of the
   row's fixed height and 05 LIVE's three rotation rows were squeezed out of sight into its
   own internal scroller - which is exactly the "the live box is still not showing up
   properly" symptom this fix exists to remove. So: 05 LIVE and PROGRESS are content-sized
   (flex: 0 0 auto, and .live-rotation no longer scrolls internally, so all three rows are
   always visible in full), and 06 REPLAYS takes whatever is left with its own internal
   scroll, which is what it already did. */
.live-replays-col > .live-sessions-panel,
.live-replays-col > .live-progress-panel {
  flex: 0 0 auto;
}
.live-replays-col > .replays-panel {
  flex: 1 1 0;
  min-height: 132px;
}

.live-sessions-panel {
  gap: var(--mom-space-3);
}
/* ── 05 LIVE (V1.4.0, FIX 2) ────────────────────────────────────────────────────────────
   Ported from Anric's own Box 03 WEDNESDAY ROTATION rules in
   docs/reference/v3-source/02A_STYLES.html (.mvp-cmd .lr-row / .lr-tag / .lr-name /
   .lr-host / .lr-cd / .lr-times / .live-cta-row / .live-cta.primary|ghost|cafe, and
   .panel.mini-progress), re-expressed against this repo's momentum.css tokens where a token
   holds the identical value (--mom-red is #dc143c, the exact crimson his .lr-tag and
   .live-cta.primary use; --mom-gold is #f0c173, the exact gold his .lr-cd and .live-cta.ghost
   use). His literal pixel values for size, padding, radius and gap are kept as written.
   NO overflow:hidden and NO negative margins anywhere in this block: that pairing is what
   clipped "NEXT" to "EXT" and "Anric and Lauralouise" to "nric and Lauralouise" in V1.3.0.
   Long titles and hosts wrap now instead of being cut. */
.live-rotation {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto; /* V1.4.0: exactly three rows, always all three visible, never a scroller */
  position: relative;
}
/* His .lr-row: 3 columns, chip / stacked name+host / right-aligned countdown. His literal
   px values are stepped down about one point across this block (14.5 -> 13.5 on the title,
   11 -> 10 on the chip, 13px -> 12px row padding, and so on) for one measured reason: this
   clone's right-hand column is 386px wide where his is roughly 500px, and at his sizes the
   three titles wrapped to two lines each and pushed the panel past the row's height budget.
   Proportions, colours and structure are his, unchanged. */
.live-rotation-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 9px 12px;
  background: rgba(220, 20, 60, 0.05);
  border: 1px solid rgba(220, 20, 60, 0.18);
  border-radius: 9px;
}
.live-rotation-row.is-next {
  background: rgba(220, 20, 60, 0.12);
  border-color: rgba(220, 20, 60, 0.5);
  box-shadow: 0 0 18px rgba(220, 20, 60, 0.18);
}
/* His .lr-tag: the left chip. NEXT on the soonest row, the short date on the rest. */
.live-rotation-tag {
  font-family: var(--mom-font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--mom-red);
  text-transform: uppercase;
  background: rgba(220, 20, 60, 0.1);
  border: 1px solid rgba(220, 20, 60, 0.3);
  padding: 3px 7px;
  border-radius: 5px;
  white-space: nowrap;
}
.live-rotation-row.is-next .live-rotation-tag {
  background: var(--mom-red);
  color: #fff;
  border-color: var(--mom-red);
}
.live-rotation-body {
  min-width: 0;
}
/* His .lr-name / .lr-host. Both wrap rather than clip - see the block comment above. */
.live-rotation-name {
  display: block;
  font-size: 13.5px;
  color: var(--mom-text);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.live-rotation-host {
  display: block;
  font-family: var(--mom-font-mono);
  font-size: 11px;
  color: #aaa;
  margin-top: 3px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
/* His .lr-cd. */
.live-rotation-cd {
  font-family: var(--mom-font-mono);
  font-size: 11.5px;
  color: var(--mom-gold);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* His .lr-times: one centred line, dashed rule above and below. */
.live-times {
  font-family: var(--mom-font-mono);
  font-size: 11.5px;
  color: #888;
  text-align: center;
  margin: 0;
  padding: 8px 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  letter-spacing: 0.8px;
}
/* His two .live-cta-row rows, expressed as the one 2x2 grid they read as:
   JOIN ROOM | REPLAYS on top, ADD TO CALENDAR | MAGNUM CAFE beneath. */
.live-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.live-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 9px;
  padding: 10px 10px;
  text-decoration: none;
  border-radius: 8px;
  font-family: var(--mom-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  line-height: 1.25;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s ease, color 0.18s ease;
}
/* His .live-cta.primary is flat #DC143C. Anric's V1.3.0 note on this same button ("JOIN ROOM
   needs more shadow and gradient so it reads three-dimensional") is kept by giving that same
   crimson a two-stop gradient of itself plus the contact/ambient shadow pair and inset top
   sheen already used on this page - the colour is his, the depth is the note he gave. */
.live-cta--primary {
  color: #fff;
  background-image: linear-gradient(135deg, #e8264c 0%, var(--mom-red) 55%, #a8102e 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(220, 20, 60, 0.4),
    0 10px 30px rgba(220, 20, 60, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.live-cta--primary:hover,
.live-cta--primary:focus-visible {
  background-image: linear-gradient(135deg, #f0355b 0%, #c81236 55%, #970d29 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(220, 20, 60, 0.55),
    0 12px 36px rgba(220, 20, 60, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.34);
  transform: translateY(-1px);
}
/* His .live-cta.ghost. */
.live-cta--ghost {
  background: rgba(240, 193, 115, 0.06);
  border: 1px solid rgba(240, 193, 115, 0.3);
  color: var(--mom-gold);
}
.live-cta--ghost:hover,
.live-cta--ghost:focus-visible {
  background: rgba(240, 193, 115, 0.14);
  border-color: var(--mom-gold);
}
/* His .live-cta.cafe: same crimson family as JOIN ROOM but visibly quieter, so JOIN ROOM
   stays the primary. No border, matching his .primary. */
.live-cta--cafe {
  background: #9c1f33;
  color: #fff;
  box-shadow: 0 4px 12px rgba(220, 20, 60, 0.25);
}
.live-cta--cafe:hover,
.live-cta--cafe:focus-visible {
  background: #b8243a;
  box-shadow: 0 6px 16px rgba(220, 20, 60, 0.4);
  transform: translateY(-1px);
}

/* PROGRESS, his .panel.mini-progress. Sits under 05 LIVE in the same column, framed the same
   way every other .mom-panel on this page is framed. */
.live-progress-panel {
  gap: 0;
  padding-top: 12px;
  padding-bottom: 12px;
}
.live-progress-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mom-font-mono);
  font-size: 11.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(240, 193, 115, 0.14);
}
.live-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mom-gold);
  box-shadow: 0 0 10px var(--mom-gold);
  flex-shrink: 0;
}
.live-progress-label {
  color: var(--mom-gold);
  font-weight: 600;
}
.live-progress-value {
  font-family: var(--mom-font-mono);
  font-size: 11.5px;
  color: var(--mom-gold);
  letter-spacing: 0.9px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* The 2x2 grid holds all the way down to 390px (measured: 155px per cell there, enough for
   ADD TO CALENDAR on one line). Only below 360px, where the cells would be too narrow for
   the longest label, does it fall back to a single column. Still four buttons, same order. */
@media (max-width: 359px) {
  .live-cta-grid {
    grid-template-columns: 1fr;
  }
}

/* prefers-reduced-motion: the only motion in this block is the 1px lift on the CTA buttons. */
@media (prefers-reduced-motion: reduce) {
  .live-cta,
  .live-cta--primary:hover,
  .live-cta--primary:focus-visible,
  .live-cta--cafe:hover,
  .live-cta--cafe:focus-visible {
    transition: none;
    transform: none;
  }
}


.replays-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  position: relative; /* V0.7.0 (change 5): containing block for .scroll-fade */
}
/* V1.3.0 (06 REPLAYS, direct from Anric): two-line entries (his example: the May 13 row)
   were being swallowed. align-items:baseline snapped a 2-line title's baseline to the single-
   line date column, which visually clipped/mis-set the row's height at some widths; switched
   to flex-start so the date pins to the title's first line and the row grows to whatever
   height a wrapped 2-line title needs. .replay-title gets an explicit flex/min-width so it
   wraps within the row instead of being squeezed by the fixed-width date column, and
   white-space/overflow are pinned to normal/visible so nothing upstream can silently clip it
   again. */
.replay-row {
  display: flex;
  align-items: flex-start;
  gap: var(--mom-space-3);
  padding: 7px 0;
  border-bottom: 1px solid var(--mom-border-faint);
  text-decoration: none;
}
.replay-row:last-child {
  border-bottom: 0;
}
.replay-row:hover .replay-title,
.replay-row:focus-visible .replay-title {
  color: var(--mom-gold);
}
.replay-date {
  flex-shrink: 0;
  align-self: flex-start;
  padding-top: 1px; /* optical alignment with the title's first line now that align-items is flex-start */
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-xs);
  letter-spacing: 0.8px;
  color: var(--mom-text-muted);
  width: 6ch;
}
.replay-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--mom-text-sm);
  color: var(--mom-text-soft);
  white-space: normal;
  overflow: visible;
}

/* ---- Catalog telemetry strip (not one of the four named zones, still present) ----
   V0.7.0 (change 3): computed panel height cut roughly in half. All 7 figures (TOTAL ITEMS
   hero, LIVE, NEW, BETA, COMING SOON, NO URL count+meter, FACETS) still render - nothing
   dropped, every count is still buildTelemetry()'s own independent state.items filter,
   app.js untouched - this is a type/spacing-only compaction. The hero figure is pinned to
   --mom-text-4xl (28px, the rule's "largest text on the page stays at least 28px" floor)
   rather than the previous --mom-text-5xl (32px); every other size below was walked down
   from there, not shrunk arbitrarily.

   Measuring the strip's own padding/gap/font shrinks alone (below) only took the panel from
   127.8px to 115.8px at 1680px - most of the panel's height turned out to be
   `.mom-section-label` (the "CATALOG TELEMETRY" heading, shared by every panel on the page)
   plus its own margin-bottom, not the strip content. Since that class is shared chrome used
   on every OTHER panel too, it is left untouched at its base definition (momentum.css) -
   instead it is scoped down for JUST this panel below, the same "targeted, don't touch what
   isn't named" rule the rest of this change follows.

   Measured before/after with getBoundingClientRect() on #telemetry-panel at 1680px:
   127.8px -> 73.1px (43% shorter). Not an exact half: the remaining floor is the hero
   figure itself (28px, line-height 1) plus its micro-label (--mom-text-2xs, 8px - already
   the system's documented smallest real UI text, see momentum.css section 1) plus a 2px
   gap, ~41.6px total, and the rule set for this task is explicit that the 28px hero floor
   wins over hitting an exact half ("don't shrink that below 28px even when halving the
   panel") - so this stops at the true achievable floor rather than either breaking that
   rule or leaving easy padding/heading savings on the table. */
.telemetry-strip {
  padding: var(--mom-space-1) var(--mom-space-6); /* was space-5/space-7 (14px 18px) */
}
.telemetry-strip .mom-section-label {
  font-size: var(--mom-text-xs); /* 10px, was --mom-text-lg (16px) - scoped to this panel
    only, .mom-section-label's base rule (used by every other panel heading) is untouched.
    10px is the same micro-label tier already used elsewhere in this system (.mom-label,
    .mom-badge sit at 10-10.5px), not a one-off invented size. */
  margin-bottom: var(--mom-space-1); /* 4px, was space-6 (16px) */
  padding-bottom: 2px; /* was space-4 (12px) */
}
.telemetry-strip-body {
  display: flex;
  align-items: center;
  gap: var(--mom-space-6); /* was space-9 (22px) */
  flex-wrap: wrap;
}
.telemetry-strip .telemetry-hero {
  flex-shrink: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
  padding-right: var(--mom-space-5); /* was space-9 (22px) */
  border-right: 1px solid var(--mom-border-faint);
}
.telemetry-strip .telemetry-hero-figure {
  font-size: var(--mom-text-4xl); /* 28px: was --mom-text-5xl (32px) - the type-scale floor
    for the page's one hero figure, not shrunk further. */
}
.telemetry-strip .telemetry-meter-list {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: var(--mom-space-2) var(--mom-space-5); /* was a flat space-5 (14px); row gap tightened
    to space-2 (8px), column gap kept so the 6 figures don't crowd horizontally. */
}
/* Compact row: label/figure text held in the median 12-13px band the brief calls for
   (was 13px already for the label, unchanged; the figure drops from --mom-text-2xl at 22px,
   a size that was fighting the hero figure for attention in a strip half this tall, down to
   --mom-text-md at 14px) and both the row gap and the meter bar itself are slimmed to match. */
.telemetry-strip .telemetry-row {
  gap: 3px; /* was the base .mom-meter's 5px */
}
.telemetry-strip .telemetry-figure {
  font-size: var(--mom-text-md); /* 14px: was --mom-text-2xl (22px) */
}
.telemetry-strip .mom-meter-track {
  height: 3px; /* was the base .mom-meter-track's 4px */
}

/* ---- Responsive ---- */
@media (max-width: 1180px) {
  .shell-row--main {
    /* V1.4.0 (FIX 3): already two equal content tracks at this breakpoint, stated with
       minmax(0, ...) for the same reason as the desktop rule above. */
    grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr);
    height: auto;
  }
  .orb-col {
    grid-column: 2;
    grid-row: 2;
    height: 220px;
  }
  .live-replays-col {
    grid-column: 3;
    grid-row: 1 / span 2;
    height: var(--mvp-row-h);
  }
  .notewell-col {
    grid-column: 2;
    grid-row: 1;
    height: var(--mvp-row-h);
  }
  .portal-rail {
    grid-row: 1 / span 2;
    height: var(--mvp-row-h);
  }
}
@media (max-width: 900px) {
  .shell-row--main {
    grid-template-columns: 1fr;
    height: auto;
  }
  .shell-row--main > * {
    height: auto;
  }
  .portal-rail,
  .notewell-col,
  .orb-col,
  .live-replays-col {
    grid-column: auto;
    grid-row: auto;
  }
  .portal-rail .mom-portal-list {
    max-height: 320px;
  }
  .notewell-col > .mom-panel,
  .live-replays-col > .mom-panel {
    height: 320px;
  }
  .orb-col {
    height: 340px; /* bumped from the placeholder's 200px: the real cluster (max-width
      460px, aspect-ratio 1/1) needs more room than the old fixed small ring did, and this
      column is stacked full-width at this breakpoint so there is no width pressure to
      offset with a shorter box. */
  }
  .telemetry-strip-body {
    gap: var(--mom-space-6);
  }
}

/* Down to 390px (job 3 floor): columns already stack as single-column flow above 900px,
   this only tightens gutters so nothing pushes past the viewport edge. No column is ever
   compressed sideways below its content's natural width at this breakpoint - everything
   that could overflow horizontally (world clock ribbon, telemetry meter grid, portal rail)
   already wraps via flex-wrap/grid auto-fit rather than shrinking a fixed-width track. */
@media (max-width: 480px) {
  main {
    padding: var(--mom-space-4) var(--mom-space-4) var(--mom-space-8);
  }
  .mom-hud {
    padding: var(--mom-space-3) var(--mom-space-4);
  }
  .orb-col {
    height: 280px;
  }
}

/* ---- Toast ---- */
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--mom-gold);
  color: #000;
  padding: 9px 16px;
  border-radius: var(--mom-radius-sm);
  font-weight: 700;
  font-size: 12px;
  z-index: 30;
}

/* ---- V1.5.0 (FIX 6): scroll-margin under the sticky header ----------------------------
 The EVENTS orb corner calls scrollIntoView({block:'start'}) on panel 05 LIVE. Without this,
 the browser aligns the panel's top edge with the VIEWPORT top, which is underneath
 #mn-bar (position:sticky, top:0), so the panel's own number and title land behind the
 header - the same class of defect FIX 2 is about, so it is solved the same way: with the
 header's real measured height (--mn-bar-h, published by app.js) plus a little clearance,
 never a magic pixel constant. Applied to every panel, so any future scroll-to lands
 correctly too. */
.mom-panel {
  scroll-margin-top: calc(var(--mn-bar-h, 75px) + 12px);
}

</style>
</head>
<body class="mom-atmosphere">

<!-- Atmosphere, defect 2 (V0.4.0). This wrapper is fixed to the viewport (not the document)
     and z-index -1, so the blobs/gear texture inside are never clipped by the opaque HUD
     header/preview banner. Gold + a cool tone (blue, not cyan - cyan is OPS-only and banned
     on this member surface).
     V0.6.1 regression fix (390px overflow, real incident 2026-07-30): the blob/gear-texture
     elements themselves used to carry position:fixed directly, each with a large fixed px
     width and a negative offset (e.g. .mom-gear-texture's right:-280px + width:640px). A
     position:fixed element's containing block is the viewport regardless of any ancestor,
     so those boxes painted well past the right edge on narrow viewports (measured: right
     edge at 390 + 280 = 670px against a 390px viewport, an exact match for the traced
     document.documentElement.scrollWidth of 670) and overflow-x:hidden on html/body does
     NOT clip fixed-position descendants, so the existing body-level rule was not containing
     them. Fix: this one wrapper div is the sole position:fixed, inset:0, overflow:hidden
     element; the blobs and gear texture inside it are position:absolute (see momentum.css
     .mom-atmosphere-decor / .mom-atmosphere-blob / .mom-gear-texture), so the wrapper's
     overflow:hidden genuinely clips their excess at any viewport width while the visible
     look (attached to the viewport, behind all content) is unchanged. -->
<div class="mom-atmosphere-decor" aria-hidden="true">
  <div class="mom-glow-blob mom-glow-blob--gold mom-atmosphere-blob" style="top:-100px; left:-120px;"></div>
  <div class="mom-glow-blob mom-glow-blob--blue mom-atmosphere-blob" style="bottom:-160px; right:-120px;"></div>
  <div class="mom-gear-texture mom-motion-gear-cw"></div>
</div>

<!-- V1.4.0 (FIX 1, direct from Anric: "your header is getting very messy... all of that could
     be on one line"). The full-width crimson PREVIEW banner that used to sit here as its own
     stacked bar (one of three) is gone. Its whole job - "this is not the live dashboard" -
     now rides as a single compact crimson chip INSIDE the one header row (#mn-preview-chip,
     below), with the long explanation moved to that chip's title attribute so no information
     is lost and no second bar is spent on it. The 00a/00b/00c chrome markers are deleted
     outright: they existed only so Anric could name a region in feedback, he has now given
     that feedback, and they were clutter. The 01-08 panel numbers on real panels stay. -->


<!-- PORT ADDITION (V1.0.0): visible CORS-degradation banner, hidden until a real fetch to
     mvp-access-gate-worker or mvp-profile-worker actually fails. Populated by
     window.mvpShowCorsBanner(), called from the header's own security and avatar scripts
     below. See the big comment above the header block for why this exists: both workers only
     allow https://app.magnumvault.vip, so on this host the browser blocks their responses
     and the source's own fail-open .catch() swallows that fact silently. This build refuses
     to let that stay invisible. -->
<div class="preview-banner preview-banner--warn" id="preview-cors-banner" role="alert" hidden>
  <span class="preview-banner-tag">LIVE-DATA</span>
  <span id="preview-cors-banner-text"></span>
</div>

<!-- ══════════════════════════════════════════════════════════════════════════════════════
     MVP UNIVERSAL HEADER V3.2, PORTED (V1.0.0)
     Ported from docs/reference/v3-source/UNIVERSAL-HEADER-v3.2.html (read-only reference,
     not modified) so this clone can be tested against real Magnum Vault authentication and
     the real remote services it depends on. This is the highest-risk block in this repo: it
     carries member identity and the security token (window.getMagnumUser(), the
     magnumAuth/magnumAccess/magnumContactId session keys, the mvp-access-gate-worker remote
     status check, and the ADMIN_PASSWORD backdoor). Replaces the old JOB 5 visual placeholder
     (mom-hud) that stood in for it.

     FOUR PORT CHANGES (deliberate, all requested, each marked again at its own point below):
       1. Cookie domain is now derived at runtime from window.location.hostname (see
          cookieDomainAttr()), not hardcoded to domain=.magnumvault.vip. A cookie whose
          domain attribute does not match the current host is silently dropped by the
          browser, which would have made the cookie layer of auth a silent no-op on this host
          while sessionStorage/localStorage kept working. setAuth and clearAuth both call
          this exact same helper so they can never disagree.
       2. The GHL dashboard-access tracking webhook (services.leadconnectorhq.com) now only
          actually fires on a genuine magnumvault.vip host. Firing it from here would inject
          fake test traffic into Anric's real member analytics. The code path is preserved,
          not deleted; on any other host it no-ops with a console message instead.
       3. Header search now reads window.MVP_RESOURCES, published from this repo's own
          existing catalog index (state.items in assets/app.js) once it loads, instead of the
          source's Navigator section, which this clone does not have. No second, parallel
          index was built. See assets/app.js's init().
       4. FontAwesome (cdnjs) and Russo One (Google Fonts) are no longer loaded from a CDN.
          Russo One is self-hosted from public/assets/fonts/russo-one.woff2, embedded below
          as a base64 @font-face so it adds zero network requests either way. The 7 icons
          this header actually uses (fa-vault, fa-robot, fa-compass, fa-comment-dots,
          fa-user, fa-lock, fa-search) are inlined as SVG (Font Awesome Free 6.7.2, solid
          style, CC BY 4.0 icons), not the whole icon library. The header logo image
          (previously an assets.cdn.filesafe.space URL) is now the same local "MV" mark
          already used for this page's own favicon above, inlined as SVG, no new asset.

     TWO DECISIONS ANRIC ALREADY MADE (implemented literally here, not reopened):
       1. IS_APP is forced true below so this clone enforces CURRENT_PAGE_REQUIRES = "MOPS"
          exactly as production enforces it on app.magnumvault.vip, instead of silently
          falling through to "external domain, no enforcement" on a pages.dev-style host.
          Unauthenticated visitors get the same alert + redirect to SIGNUP_URL;
          insufficient-tier visitors get the same access-denied alert.
       2. ADMIN_PASSWORD and auth flow 3 (the admin password flow) are byte-for-byte
          unchanged from the source. Anric uses this during testing; not removed, renamed,
          or given extra friction.

     CORS, DELIBERATELY NOT PAPERED OVER:
     mvp-access-gate-worker and mvp-profile-worker both only allow
     access-control-allow-origin: https://app.magnumvault.vip, so on this host the browser
     blocks their responses client-side and both fetches reject. The source's fail-open
     behavior on that rejection is kept exactly as-is (a member must never be locked out by a
     network hiccup), but it is no longer silent: #preview-cors-banner above is revealed with
     real copy the moment either the gate check or the avatar fetch actually fails, via
     window.mvpShowCorsBanner(), called from checkRemoteStatus's catch and the avatar
     fetch's null-url branch below.

     Everything else, all four auth flows, every storage key, setAuth/clearAuth signatures,
     normalizeAccessLevel, ACCESS_HIERARCHY, PUBLIC_PATHS, BLOCKED_EMAILS, cleanUrl, the
     30-minute gate/avatar caches, and window.getMagnumUser()'s seven keys including the
     V3.1 firstName/lastName derivation, is preserved exactly as the source has it.
     ══════════════════════════════════════════════════════════════════════════════════════ -->

<!-- PORT ADDITION: CORS-visibility helper, defined before the security script below so
     checkRemoteStatus's catch (and the avatar script's own catch further down) can call it
     the instant their fetches actually reject. Only ever reveals #preview-cors-banner and
     sets its text; never touches auth state and never affects the fail-open behavior it is
     reporting on. -->
<script>
(function () {
    window.mvpShowCorsBanner = function (msg) {
        var banner = document.getElementById('preview-cors-banner');
        var textEl = document.getElementById('preview-cors-banner-text');
        if (!banner || !textEl) return;
        banner.hidden = false;
        if (textEl.textContent.indexOf(msg) === -1) {
            textEl.textContent = textEl.textContent ? (textEl.textContent + ' ' + msg) : msg;
        }
    };
})();
</script>

<!-- ═══ SECURITY V4.3 (ported from UNIVERSAL-HEADER-v3.2.html; PORT changes marked inline) ═══ -->
<script>
(function() {
    var HOST = window.location.hostname;

    /* PORT CHANGE (Anric decision 1): the source only sets IS_APP true on the literal
       hostname app.magnumvault.vip, so ported literally this clone would fall through to
       "external domain, no enforcement" and ship completely ungated. Forced true so this
       clone enforces CURRENT_PAGE_REQUIRES = "MOPS" exactly as production enforces it,
       regardless of which host (pages.dev preview, localhost, etc.) this clone is served
       from. This build is never the real app.magnumvault.vip origin, so this is safe. */
    var IS_APP = true;
    var IS_VIP = (HOST === 'magnumvault.vip');

    var ADMIN_PASSWORD = "bbbb";
    var SIGNUP_URL = "https://magnumvault.com/mvp";
    var SUSPENDED_URL = "https://app.magnumvault.vip/mvp-access";

    var PUBLIC_PATHS = ["/mvp-access", "/mvp-suspended"];
    var CURRENT_PATH = window.location.pathname.replace(/\/$/, "") || "/";
    var IS_PUBLIC_PATH = PUBLIC_PATHS.indexOf(CURRENT_PATH) !== -1;

    var PROFILE_WORKER_URL = "https://mvp-profile-worker.ignis-api.workers.dev";
    var AVATAR_CACHE_KEY = "magnumMemberAvatar";
    var AVATAR_CACHE_TTL_MS = 30 * 60 * 1000;

    var BLOCKED_EMAILS = [];

    var WEBHOOK_URL = "https://services.leadconnectorhq.com/hooks/ShdhhRSH8t0hLfIgDuhO/webhook-trigger/CPIcvo21MsvflEGIICOS";

    var GATE_URL = "https://mvp-access-gate-worker.ignis-api.workers.dev/check";
    var GATE_CACHE_KEY = "magnumGateStatus";
    var GATE_CACHE_TTL_MS = 30 * 60 * 1000;

    var CURRENT_PAGE_REQUIRES = "VAULT";
    if (IS_APP) CURRENT_PAGE_REQUIRES = "MOPS";

    var ACCESS_HIERARCHY = {
        "VAULT": 1, "TOOLKIT": 2, "MOPS": 3,
        "VIP": 1, "VIP-Toolkit": 2, "MVP": 3
    };

    function normalizeAccessLevel(level) {
        var mapping = { "VIP": "VAULT", "VIP-Toolkit": "TOOLKIT", "MVP": "MOPS" };
        return mapping[level] || level;
    }

    var urlParams = new URLSearchParams(window.location.search);
    var token = urlParams.get('token');
    var rawAccessLevel = urlParams.get('access') || 'VAULT';
    var accessLevel = normalizeAccessLevel(rawAccessLevel);
    var fromCafe = urlParams.get('from') === 'cafe';
    var password = urlParams.get('password');
    var userName = urlParams.get('name') ? decodeURIComponent(urlParams.get('name')) : '';
    var userEmail = urlParams.get('email') ? decodeURIComponent(urlParams.get('email')) : '';
    var referralSource = urlParams.get('from') || urlParams.get('source') || urlParams.get('campaign') || 'direct';

    /* Shared by two PORT changes below (cookie domain + GHL webhook guard): is the current
       host genuinely magnumvault.vip, apex or any subdomain? */
    function isMagnumVaultHost(host) {
        return host === 'magnumvault.vip' || host.endsWith('.magnumvault.vip');
    }

    /* PORT CHANGE (change 1): a cookie whose domain attribute does not match the current
       host is silently dropped by the browser, not rejected loudly, so hardcoding
       domain=.magnumvault.vip here would make the cookie layer a silent no-op on any host
       that is not actually under magnumvault.vip while sessionStorage/localStorage kept
       working normally, exactly the kind of bug that hides itself. Both setAuth and
       clearAuth call this same helper, so they can never derive two different answers. */
    function cookieDomainAttr() {
        return isMagnumVaultHost(window.location.hostname) ? 'domain=.magnumvault.vip; ' : '';
    }

    function setAuth(userAccess, name, email, contactId) {
        userAccess = normalizeAccessLevel(userAccess);
        sessionStorage.setItem('magnumAuth', 'true');
        sessionStorage.setItem('magnumAccess', userAccess);
        if (name) sessionStorage.setItem('magnumUserName', name);
        if (email) sessionStorage.setItem('magnumUserEmail', email);
        if (contactId) sessionStorage.setItem('magnumContactId', contactId);
        localStorage.setItem('magnumAuth', 'true');
        localStorage.setItem('magnumAccess', userAccess);
        if (name) localStorage.setItem('magnumUserName', name);
        if (email) localStorage.setItem('magnumUserEmail', email);
        if (contactId) localStorage.setItem('magnumContactId', contactId);
        var expires = new Date();
        expires.setDate(expires.getDate() + 30);
        var cookieOptions = 'expires=' + expires.toUTCString() + '; path=/; ' + cookieDomainAttr() + 'SameSite=Lax';
        document.cookie = 'magnumAuth=true; ' + cookieOptions;
        document.cookie = 'magnumAccess=' + userAccess + '; ' + cookieOptions;
        if (name) document.cookie = 'magnumUserName=' + encodeURIComponent(name) + '; ' + cookieOptions;
        if (email) document.cookie = 'magnumUserEmail=' + encodeURIComponent(email) + '; ' + cookieOptions;
        if (contactId) document.cookie = 'magnumContactId=' + encodeURIComponent(contactId) + '; ' + cookieOptions;
        console.log('MVP Security: Access granted -', userAccess, contactId ? '(Contact: ' + contactId + ')' : '');
    }

    function clearAuth() {
        sessionStorage.removeItem('magnumAuth');
        sessionStorage.removeItem('magnumAccess');
        sessionStorage.removeItem('magnumUserName');
        sessionStorage.removeItem('magnumUserEmail');
        sessionStorage.removeItem('magnumContactId');
        sessionStorage.removeItem('magnumGateStatus');
        sessionStorage.removeItem('magnumMemberAvatar');
        localStorage.removeItem('magnumAuth');
        localStorage.removeItem('magnumAccess');
        localStorage.removeItem('magnumUserName');
        localStorage.removeItem('magnumUserEmail');
        localStorage.removeItem('magnumContactId');
        var expired = 'expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; ' + cookieDomainAttr() + 'SameSite=Lax';
        document.cookie = 'magnumAuth=; ' + expired;
        document.cookie = 'magnumAccess=; ' + expired;
        document.cookie = 'magnumUserName=; ' + expired;
        document.cookie = 'magnumUserEmail=; ' + expired;
        document.cookie = 'magnumContactId=; ' + expired;
        console.log('MVP Security: Auth cleared');
    }

    function isBlocked(email) {
        if (!email) return false;
        var lower = email.toLowerCase();
        for (var i = 0; i < BLOCKED_EMAILS.length; i++) {
            if (BLOCKED_EMAILS[i].toLowerCase() === lower) return true;
        }
        return false;
    }

    function hasAccess(userLevel, requiredLevel) {
        return (ACCESS_HIERARCHY[userLevel] || 0) >= (ACCESS_HIERARCHY[requiredLevel] || 0);
    }

    function getCookie(name) {
        var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
        return match ? decodeURIComponent(match[2]) : '';
    }

    function cleanUrl() {
        var cleanParams = new URLSearchParams(window.location.search);
        cleanParams.delete('token');
        cleanParams.delete('access');
        cleanParams.delete('password');
        cleanParams.delete('name');
        cleanParams.delete('email');
        var newSearch = cleanParams.toString();
        var newUrl = window.location.pathname + (newSearch ? '?' + newSearch : '');
        window.history.replaceState({}, document.title, newUrl);
    }

    window.getMagnumUser = function() {
        var fullName = sessionStorage.getItem('magnumUserName') || localStorage.getItem('magnumUserName') || getCookie('magnumUserName') || '';
        var firstName = '';
        var lastName = '';
        if (fullName) {
            var trimmed = fullName.trim();
            var spaceIdx = trimmed.indexOf(' ');
            if (spaceIdx === -1) {
                firstName = trimmed;
            } else {
                firstName = trimmed.substring(0, spaceIdx);
                lastName = trimmed.substring(spaceIdx + 1).trim();
            }
        }
        return {
            name: fullName,
            firstName: firstName,
            lastName: lastName,
            email: sessionStorage.getItem('magnumUserEmail') || localStorage.getItem('magnumUserEmail') || getCookie('magnumUserEmail') || '',
            contactId: sessionStorage.getItem('magnumContactId') || localStorage.getItem('magnumContactId') || getCookie('magnumContactId') || '',
            access: normalizeAccessLevel(
                sessionStorage.getItem('magnumAccess') || localStorage.getItem('magnumAccess') || getCookie('magnumAccess') || 'VAULT'
            ),
            isAuthenticated: sessionStorage.getItem('magnumAuth') === 'true' ||
                localStorage.getItem('magnumAuth') === 'true' ||
                getCookie('magnumAuth') === 'true'
        };
    };

    function checkRemoteStatus(contactId) {
        if (!contactId) return;
        try {
            var cached = JSON.parse(sessionStorage.getItem(GATE_CACHE_KEY) || "null");
            if (cached && cached.contactId === contactId && (Date.now() - cached.ts) < GATE_CACHE_TTL_MS) {
                if (cached.status === "suspended") {
                    clearAuth();
                    window.location.href = SUSPENDED_URL;
                }
                return;
            }
        } catch (_) {}

        fetch(GATE_URL + "?contactId=" + encodeURIComponent(contactId), { cache: "no-store" })
            .then(function(r) { return r.ok ? r.json() : null; })
            .then(function(data) {
                if (!data) return;
                try {
                    sessionStorage.setItem(GATE_CACHE_KEY, JSON.stringify({
                        contactId: contactId,
                        status: data.status,
                        ts: Date.now()
                    }));
                } catch (_) {}
                if (data.status === "suspended") {
                    clearAuth();
                    window.location.href = SUSPENDED_URL;
                }
            })
            .catch(function() {
                /* Fail open, unchanged from the source: a network error never locks out a
                   paying member. PORT ADDITION: also surface this on screen, the source only
                   logged it, which on this host (blocked by CORS, not a real outage) would
                   have made suspension-checking look like it works when it silently does not. */
                console.log('MVP Security: Remote gate unreachable, failing open');
                if (window.mvpShowCorsBanner) {
                    window.mvpShowCorsBanner('Access gate unreachable from this origin (blocked by CORS): suspension checks are not running here.');
                }
            });
    }

    if (!localStorage.getItem('referralSource')) {
        localStorage.setItem('referralSource', referralSource);
        localStorage.setItem('referralTimestamp', new Date().toISOString());
    }

    var authenticated = false;

    if (fromCafe) {
        setAuth('VAULT', userName, userEmail, token);
        cleanUrl();
        authenticated = true;

    } else if (token && urlParams.has('access')) {
        setAuth(accessLevel, userName, userEmail, token);
        cleanUrl();
        authenticated = true;

    } else if (password === ADMIN_PASSWORD) {
        setAuth('MOPS', userName, userEmail, token);
        cleanUrl();
        authenticated = true;

    } else {
        var sessionAuth = sessionStorage.getItem('magnumAuth') === 'true';
        var localAuth = localStorage.getItem('magnumAuth') === 'true';
        var cookieAuth = getCookie('magnumAuth') === 'true';

        if (sessionAuth || localAuth || cookieAuth) {
            authenticated = true;
            if (!sessionAuth && localAuth) {
                sessionStorage.setItem('magnumAuth', 'true');
                sessionStorage.setItem('magnumAccess', normalizeAccessLevel(localStorage.getItem('magnumAccess') || 'VAULT'));
                sessionStorage.setItem('magnumUserName', localStorage.getItem('magnumUserName') || '');
                sessionStorage.setItem('magnumUserEmail', localStorage.getItem('magnumUserEmail') || '');
                sessionStorage.setItem('magnumContactId', localStorage.getItem('magnumContactId') || '');
            }
            if (!sessionAuth && !localAuth && cookieAuth) {
                sessionStorage.setItem('magnumAuth', 'true');
                sessionStorage.setItem('magnumAccess', normalizeAccessLevel(getCookie('magnumAccess') || 'VAULT'));
                sessionStorage.setItem('magnumUserName', getCookie('magnumUserName') || '');
                sessionStorage.setItem('magnumUserEmail', getCookie('magnumUserEmail') || '');
                sessionStorage.setItem('magnumContactId', getCookie('magnumContactId') || '');
            }
        }
    }

    if (authenticated) {
        var checkEmail = userEmail ||
            sessionStorage.getItem('magnumUserEmail') ||
            localStorage.getItem('magnumUserEmail') ||
            getCookie('magnumUserEmail') || '';

        if (isBlocked(checkEmail)) {
            clearAuth();
            window.location.href = SUSPENDED_URL;
            return;
        }
    }

    if (authenticated && !IS_PUBLIC_PATH) {
        var liveContactId = sessionStorage.getItem('magnumContactId') ||
            localStorage.getItem('magnumContactId') ||
            getCookie('magnumContactId') || '';
        checkRemoteStatus(liveContactId);
    }

    if (IS_APP && IS_PUBLIC_PATH) {
        console.log('MVP Security: Public path', CURRENT_PATH, ', enforcement skipped');

    } else if (IS_APP && !authenticated) {
        alert('Access Required\n\nPlease use your member link or visit magnumvault.com/mvp to join.');
        window.location.href = SIGNUP_URL;

    } else if (IS_APP && authenticated) {
        var userAccess = normalizeAccessLevel(
            sessionStorage.getItem('magnumAccess') || localStorage.getItem('magnumAccess') || getCookie('magnumAccess') || 'VAULT'
        );
        if (!hasAccess(userAccess, CURRENT_PAGE_REQUIRES)) {
            alert('Access Denied\n\nThis area requires Magnum Vault Pass membership.\nYour current access: ' + userAccess + '\n\nUpgrade at magnumvault.com/mvp');
            window.location.href = SIGNUP_URL;
        } else {
            console.log('MVP Security: Verified -', userAccess, 'for', CURRENT_PAGE_REQUIRES);
        }

    } else if (IS_VIP) {
        console.log('MVP Security: VIP domain - soft check only. Authenticated:', authenticated);

    } else {
        console.log('MVP Security: External domain - no enforcement');
    }

    /* PORT CHANGE (change 2): the source fires this unconditionally whenever authenticated
       and on /dashboard. That would inject fake test traffic into Anric's real member
       analytics from this clone, so it now only actually fires on a genuine magnumvault.vip
       host. The code path itself (sendBeacon with an Image fallback) is untouched. */
    try {
        if (authenticated && window.location.pathname === '/dashboard') {
            var trackUser = window.getMagnumUser ? window.getMagnumUser() : null;
            if (trackUser && trackUser.email) {
                if (!isMagnumVaultHost(HOST)) {
                    console.log('[header] GHL tracking webhook skipped: not on magnumvault.vip host');
                } else {
                    var now = new Date();
                    var timestamp = now.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) +
                        ' ' + now.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true, timeZoneName: 'short' });
                    var params = new URLSearchParams();
                    params.append('email', trackUser.email);
                    params.append('name', trackUser.name);
                    params.append('token', trackUser.contactId);
                    params.append('access', trackUser.access);
                    params.append('timestamp', timestamp);
                    var sent = navigator.sendBeacon(WEBHOOK_URL + '?' + params.toString());
                    if (!sent) {
                        var img = new Image();
                        img.src = WEBHOOK_URL + '?' + params.toString();
                    }
                    console.log('MVP Security: Dashboard access logged for', trackUser.email);
                }
            }
        }
    } catch(e) {
        console.log('MVP Security: Tracker skipped -', e.message);
    }

})();
</script>

<!-- ═══ HEADER V2.5 (ported; assets self-hosted, PORT change 4) ═══ -->
<style>
/* PORT CHANGE (change 4): Russo One self-hosted as a base64 @font-face (was Google Fonts).
   Source file public/assets/fonts/russo-one.woff2, about 4.5KB, embedded here so it adds
   zero extra network requests either in the split public/ dev build or the bundled dist/
   build. */
@font-face {
  font-family: 'Russo One';
  src: url(data:font/woff2;base64,d09GMgABAAAAABGwAA4AAAAALGgAABFZAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbjGYcGAZgAGwRCAq1QKggC4FIAAE2AiQDgwwEIAWDXgeJHhsJJCXjmCWwcQBwP5svipI12W/+/2uCHCM2eD2myldFCOVKEXKkqmStFRwBVW0MhxXQbbFltS4Onb/DGHFSv3wIFQ5ytEViIIG5rpjxK+KLs8p7/H7+6z6ZZyb9pz3NERr7JPcPcrN/NMMuuiirYsPTvonYQLHt5bBhqWAHS4SUZkrTSfT/SAoT2dSmzpwmX1I2ZRM/JyHFSSSlFK81SWt6kLfyDUTQyPq8CgCe//6gnXfv2x1fsJVVX4gKLIk80YADiwJO+8mf7j9s2/RuosqY+tVab/dMz9XW65kPwMYGXdws3G2A0e76kIpEkkBCHehUyocwdoIaP8fj5+NxGAXsBNcEnuMTiOM4jqcrgH+QsaHTD75etAY42RZ4qTeSaWLf3CsilutHgB4MY7UL/z+dn62vtfbboIO0gF2SoglXTZrGGuGb8ZhPrFktkRUyLIEc9FcQq3BTICgAUG3Rpkz12yRViq7k19IarCkdNYtECddeZ02cJHXdQnl+V8vcrrV1lS8j0UbYREeXARYAV4BhY1mlrz4LACqQFOvtuWgOAC44VyTAen1ZoKzBYgtXCwBfLaUOJl/5vImXhCyyF+FN2NqNqLPX2Gb/R5tditXmQKs7MS0hTI6IuJwONUyAt5wv8+s45uR0z6ZpnZn22OqZwK5c1O1fY6/CCU9mZzGacJkY/lKwJONxwefKDUbInQjOkxdvPnwFCBIiVJhwESIRokjFiBVHRi5BIoUkKaqaQBhBMZyiWY4XZdW03F6fq/qyJrucL28LV9RX2yhZiciEChpUoNIIEjErQNAe3bdLZW3QXDqv4eWw/LPIQSHqmSfIfmrNkT7p2O+KqYIiBP7C5DiYR9bVDQ+t4jSvSxdjyubcYQz/uDKG7N7gcMB4llrBVIUIAIIQigiMV5hgwZ1dwQdAxN5knu8v0WHQ4yPjWOR4HTA5xlyJRURfNnLoJ9xE7Cue6sYpgFSkgeRvGxjwHStVnA7I4EyCLGRDhRzkcp7hfEABClGEYpSgFOp5msq5QsmVyFWAatTM0z5/1KMBjdJlysFwwS6yQfM19DcJrlwtvU2RVHCsgo1nFd6TG80GSNcgR1qquzTe303ZfBlAPArcEKQfn98giA+0gmzvAJrk8Wgwx09YCqJtBOyx5NjhFT0isAHOATS5o8GCkpMXpHAqIg2ku7OhBErgggAAAABK0AsCKAGAWByxNwvyFHs3IdLICBZ2RSM6g4+QEE8/hAOAAAAAEAACQAAIAAAAAACwASEAQACgHGC4+h4YeBdFr9vMyd68AZ8EgJOq2YAH2F/pAEA1lmL9kPmUsPHKM5kb1hSA+eZQWqMpgwnsuzen8z+A/DFHDGA7AGDfYgMQhA1scNgTFMs5lqvaiLhzzJbld68rt2Rrt2E33sWxX3ReFhfjqrd+N/wRzu8x6Jd8mS8+33iuN28oNSxiveqXloEvYGHHdvxNFNAdNHYHgnkcYjJgd2GmqdKE626mmemOhmWnAJe9kSLSapgJ3EuIF1lwOcyE4eUP2D/B5/kyV8RZHGxfMsCHRn/iN8JQdMibJnA/wMeTCT7nA0DCwRhinmU0kz64bJcZH5IAGo09GpvgKVqo5M834Ao66AU0hpZDPcTjw0MkGQs/HSZDTgeRRpAJlEcNriQao0SQ96D6XD95Cva840rIf4L/dzoqWVq/YPG952jVTmCjDhwI9CXpvsAJBJAfKs81nmmj1mWlez3BIl8RmK10t888dIT3O9TflYiIaC4XLNwpbOXe2yu7lW6e1cLvYnTBn0rxn+xccRcmlopU2bbZv0FII4Vz7xdn7qGo9fhC+WtZGDg1arVpfOR+WH/edVaVRq1TkOqpZ3kNWl035G/uV0z3Iae3t3tPFTRL3dkuvFLfwWKlu32CP+VkE1SdSjQrRGSKE3oMGXLNSgs39ZM/dJ+7J9iwIeFuxU6jPmDQrYwL7W+1p1/UIPMRVt/0vmnkID6J2+HDVcYNmz+JRYEyu29BwT2Bd6IrBNaJbtVdIhOAtc7c2bMVDhFJJoQtnF5dakjfvRz39JavgJSmZHeBQ3EhInsWgFWZO/WDBxxZURFbAC1W5wtHAMVCra1X/fhIqF9FOILJdUmszpaXdKOx0H99LNWWjRFIL1Qr5PLdAL0HGK3Z31W1qGiWoGgiiyhbmn4F8u0D7TlfWc3dZ4I656hg0N3sRN47aD7jhBKP4nNUHuv00i0dNPiq8Eha4zkQpNjM6GVAaWDUDNg0CuZ+/WBE5H+CjA/WmZ+NwVxVtJ8Ch7KliZ2BjaX/30FB8UK7phtzCigZrTKke39BjVr4ObvrrzBYLgjeBdnW5WcSTtwdZaVBktWpbPsEWfkKB9qkYI8DRkm9Oaxfl3W6CkDA99Ak0vchBleCN1eAMnuMgtf3m0+EW6MruMrNP1TtF9Sr4Ru0miivQUamr2ShcS/ri1mWL2s71LJZKr/sE/JtbDKaA6BJzHPBAk9IZl7nJnwmYvuOQcjGHuFc4676DFi+M6qcDgu6V0TyVx2pykExlEW3Oy0OAO0quoyLRDjNOlufSjfelW8CtWK+N3fm3vRsDWs3TU9cusGHnCAiLusc68WsHihuvYhi6e/LB+3TYi7Y+iHEmVSBqfGrn8Ap1Om5vm/TLrDSzcdb2Y1pCgi0DborHUDR1fScz/rJeJXyniPh1kdNBZL2jrBAyA7GGzRXclXwlNrBLAD72R3JU9wEW3ia2r9qGWtiSXr30lRapdOpI6ci5KUPgbjSADsiC/46IHGPyoB6Tj0SG9aZcM90L2Ih6uw96yBrp8A8OTi71+gegQu5HocOPuMXAvmIVhg8nNV9ur8g+mGOuA9Rtiiq2RRJRW5sfvTeQll+MadfALzPUau3lCCmBqFcOFls8Zc3jQtWMHEU9YZi5jSma3jaE3YjOBlbMNWE96X1MU19UIU8wzfrdTq9ckZ9/YzplJIkK1AKbRBbJrirGyt5Sg5EbPDAGsUWsfbXRjLwPNBAJZGkZ5BMXym75MrbdZwp3Nl8WD2d0vZoqftkvrfsH1uXWq/W6U7PjIq4mvBRxa1GSsEHfq5a05JnisbXsCXj+M77E0kyzm+Ps/p0Tl1AkjRDkyQs7a+1iJeUDksZG8Md5lr+vNxT7H7EfxnM+7Gak3YQn3f70Hf7KhETIVygrT9+Tm/fFaCVMDYG1xpO1SgT4CdElmfSSvbliXNFrx3H9Vv1jtHwkGKXGvefjMZAo69QLgxE9iWREUjlrnGf4hjbfaS9+1oKrIP8AcfWQWnrJ2ltp5I/YeSQEzXZw9pX4eSRpGObgyQhbWCDXletI+X59aVeARWd43E0h/sfC0DtL4kiSQtlIUnG/izoGnCLK8AsSPtqpN2CpZ8J0HjM39pjxT5KD/XdAU08FiRvuuBjQdWUqIrQ/lmtfRLtAiFhUiK+icqEGsMpFc7gKt9z8A2j2C+2iAmSdFJPGI6V1AI7T1DkX5Po/ZX2/45DJ3N45JDdltwJ/iw8gm3aP0Dd65TzmE9yH0Y1XiTulk8nbF5l/khdA6sZm31ovtvLbmOgk5F86rnrJ5yBr19J0mKU8i0ZhOWnuKHMdqGTnEQPaQM9ZXLydXeng+l/TZKOJ//C9ap/Wqn8Z3EDE3eLqqZuiSKGxKDZkhYVo2pJz3QUBxiS1Cq1SV95vxjcGHC8qPulzmF+fIYOqJLVQ6bHKnLprXZ92F+akbs6nT6ECRFbxJp5SD5jY+DgvAiLjT0gC363OG/AqTSL7MdRVGa/KzJrRi7/agp3vY2ODjCJ+9vH2xk7OQs9DU7Hj4FveI1VsUXcgFJoBUkqqHp8BVw7b3uMQ2qQ3WHdQKeuqHI8ly3kiCQPtjC/mlp/sbePjCbpylRTtfrdAuwvCZz2xAyc3CiUC1F8+65VJ/HNWWp11urdG//VB4SEFmR03LpKdLxC+h7BK7jXPwnPqxzpLigvL3hy+TCG3EmNGqQsEjMnhnhJty4hiLYXXzU08n7wNoKAw62i+kxNsX6vdkiZ06Ip0fUJ5cKNFdO2JI+NWahd6H9IeO5hGjPTIgj4yCVSmtsWtdpcMLYPaU5AmveNpf8nDw+G0U6CSLIkQXJuyxl87yKKzqKjba2x8pAa7BjY7Vv58YavIaGmlT3J1wMIQtGUNEgPJimaniu9q7xDelaaQkO+xhu28u1NQzIH7ZAB3m7HmmYW4qonbQ5AvhrWlp+pKY6fXOM1pMxZrlZn7T+DQ4eHVUSH9AUnDw+czNU2HdxgdlFDBQ5aRA+WKpqev5vmFcLM/QNAExK1xkhEiPFpL0S0mcJGOUithgs1RsNxjBZZd4nPV7aKaAy2FA/SItrBDLUCirZ6m/FrvPUwRhAtQTneo5DpIaLNDJafoLojMQN3biMIq1Au3NVhoW3EFqOdvjvBOOQHfH1JpDQh/Rj86bTHMajrMNPmXtNHE5w6nliIGLURM95e+cPaWja9zDoUHlCsK4VXXf2SORbaMic981Zx0P8cQai4qrRUE0GQXPLFYJnHYB//MH/Q0HWGg7ewL15V3wUvDlucby4Y64WPARWTnbSI7p6J1C1riL4llINMgoU2bhbB2fVFr9f6LI/eq61lejzQaqZMl7eYtjBaZXJh517voLmV1sqzFMZNC3JbaRF9v+DVVNfdpyGbT+ItxzFtZatsuG2YOOKxNgXodvd6iCqOLih7WfCryQi/cqeEIEoZQSlSfu3eivoeq+FwZ2xO4lxXGB7uzPc5/7DAe6OHQtBOyYoMxKgKIy/kXiyeHiHbSLxkd2nb4a+qTnPkzntdfB+jaBu7mhhuG5ZxnkjMl7DFI8n7rZzwN+VGn5o9SuZWJD7L0Us4uH0dpZsLTPlDNEWD5LwLnbK0mt3AcLxuEmI0vjQcOiAa3u2lvWnRd07RIxaTVtaYF8q//aZ9dhtn2TIDWod3D9Mimt5N9zaWaW2KvtMNQDyylPZxvzOS4ve9y54fhnbXda/ge7P1H7lrWWD9jDTS3I00w0hsHGNrRgzdTkj1QGp2D4+aj4jgnyjpZGnJkH2kqd/3MDZQNbr+T3KaSK051dKMvNDAxTWyIayxis80o3GXvkFI/iUCzu8A4HLX3BuN99hxf2gnAD42z/3U2eJ+twuEajI93cCSEg1RfEz2u67e0EzTZbY4nQKnp1gWnSvQzVHJpGOB/dk/dppHNrpw3pnDkYK9oa6AwviVMP7gSRJCsOb9Ae1KV1kjAN6AVZQodJnOY2YLvp5zFtHfh1YAZIPUeOYyDN9LwDfEH6aMEr041ZL5kyzHoOSV486yYT94ZomkQHWyHFpXhSMacSdHkHO7AZrU89XfvrXyvQmnmWVaJelKtqlRi+p5EQKrmTebmeq4g+fgAsRZlpW4e/m5Iz2za5T4b7yFJ1vArSWyY/2uz9+6gAIw/GjZJNZnX7Fr5dSwtQg58eCVRSwi/0VsmIOLOCYqprmkRTx+XotcBDEZW/oITO/OeZVFGW7dJma4I8fKWs5uXPIcCna/bk6PPnBrhq+FL3HsW+7FbAf+UNWwuRTsDjQylXrjA8eDiIvTzCehymXf9qw1hdbgCLXS2Rn6MNdH5iWJq1kHFeq2M2C5HGSNRsI9nAgmlAWO4M9MKOOypufC8THuomnDF1rzkAVTbSBiAnxRm9y/TzNT3sDApJc79kmmbvgfJ+ISwbxModLoDAR9d/Z/uzlchuV4QZRkRdV0w7Rsx/X8IIziy/V2fzxf70+SZnlRVnXTdv0wTgAiTCjjQiptrPMhplxq62Oufe6HwIt8U2fMiJ+hmpWASCJTqLR05a90CCX2YGADGAKBCHqSSKZQaenKX9EQiCQyhUpLV/6Kh0AkkSlUWrrUhqZQAw6V2tuRRBKZQqWlK3/lhkAkkSlUWrryV34IRBKZQk1pUkb5bRJIApFEplBp6crfwCCpSVcy1iUKKAQAAA==) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* PORT CHANGE (change 4): sizing for the inlined FontAwesome-equivalent SVGs below, replacing
   the cdnjs FontAwesome webfont. Each .mn-icon sits inside a .mn-b flex row and scales with
   that row's own font-size (1em), same visual weight the FA webfont glyphs had. The few
   fixed-size icons (avatar fallback, avatar lock, search) keep the source's literal px sizes
   below, next to their own rule. */
.mn-icon { width: 1em; height: 1em; flex-shrink: 0; }
/* ── GHL CRASH RULES: No :hover, no transitions on interactive ── */
#mn-bar { background:linear-gradient(135deg,rgba(10,10,10,0.94),rgba(26,26,26,0.94)); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:3px solid #fabd59; position:sticky; top:0; z-index:9999; box-shadow:0 4px 30px rgba(0,0,0,.5); padding:12px 22px; margin:0!important; }
/* V3.0: thin gold inner-stroke at the top edge */
#mn-bar::before { content:''; position:absolute; top:0; left:24px; right:24px; height:1px; background:linear-gradient(90deg,transparent,rgba(240,193,115,0.55),transparent); pointer-events:none; }
#mn-bar * { box-sizing:border-box; }
/* ─── V1.5.0 (FIX 4, direct from Anric: "making the header a little taller and centering the
   navigation and information icons in the middle. Keep search and avatar on the right, but
   let's give the logo a little room to breathe by moving the preview, Vault, and LIVE
   navigation button, feedback button, and system info to the center.").
   V1.4.0 had collapsed three stacked bars into one flex row, with #mn-lead floated left and
   #mn-trail floated right; "centred" was not achievable in that shape because a flex item
   between two auto-sized neighbours sits wherever those neighbours leave it, which is only
   the middle by accident. This is a three-column GRID instead. The two side tracks are both
   minmax(0,1fr), so they are always exactly equal to each other, which is precisely what
   makes #mn-centre's box centred on the bar's own midpoint rather than merely "in between".
   The wrap discipline that made a third row impossible is unchanged in substance: each zone
   is flex-wrap:nowrap internally, so the header is either one row (all three tracks fit) or
   two rows (below 1100, where the grid re-areas to lead/trail on top and centre beneath),
   and there is no third row for anything to fall onto. The progressive tightening is also
   unchanged: nav button LABELS drop at 1500, the logo tagline drops at 1280.
   Vertical padding goes 9px -> 12px and the logo 38px -> 50px, which is the "a little
   taller" and "room to breathe" this fix asks for; 50px is his production header's own
   figure (docs/reference/v3-source/UNIVERSAL-HEADER-v3.2.html, #mn-logo img). ── */
#mn-wrap {
  max-width:none; margin:0; padding:0;
  display:grid !important;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items:center; gap:16px;
}
#mn-lead, #mn-centre, #mn-trail { display:flex !important; align-items:center !important; flex-wrap:nowrap; min-width:0; }
#mn-lead { gap:14px; justify-self:start; }
/* The centre zone never wraps and never spills: if its contents ever exceeded the middle
   track it scrolls inside itself rather than pushing a third header row into existence. The
   scrollbar is hidden because this is chrome, not content, and at every width measured it
   has never actually needed to scroll. */
#mn-centre {
  gap:14px; justify-self:center;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
#mn-centre::-webkit-scrollbar { display:none; }
#mn-trail { gap:14px; justify-self:end; justify-content:flex-end; }
#mn-logo { display:flex !important; align-items:center !important; gap:14px; text-decoration:none; flex-shrink:0; }
/* FIX 1 (V1.5.0): his real logo, self-hosted. Size and drop-shadow are his production
   header's own values, not invented. */
#mn-logo .mn-logo-mark { width:50px; height:50px; object-fit:contain; filter:drop-shadow(0 0 12px rgba(250,189,89,.4)); flex-shrink:0; }
/* V1.4.0: the whole preview notice, formerly a full-width crimson bar of its own with a
   two-line sentence in it, compressed to this one chip. The sentence survives verbatim as
   the chip's title attribute (see index.html). Crimson fill, not gold, so it cannot be read
   as part of the gold vault chrome and stays unmistakably a "this is not live" flag. */
#mn-preview-chip {
  flex-shrink:0; display:inline-flex; align-items:center;
  font-family:'Russo One',sans-serif!important; font-size:9.5px; letter-spacing:1.6px;
  text-transform:uppercase; color:#fff; background:#DC143C;
  border:1px solid rgba(255,255,255,.35); border-radius:3px; padding:4px 8px;
  white-space:nowrap; cursor:help;
}
/* V1.3.0 (00 HEADER upgrade): gold gradient text on the wordmark, the same static
   background-clip technique, not a new one - matches the gold-gradient treatment already
   used on .live-join-btn (assets/app.css) and momentum.css's --mom-gold tokens, applied here
   as text fill instead of a button fill. Letter-spacing bumped slightly (3px -> 3.5px) to
   read closer to the letterspaced micro-labels used on every .mom-section-label elsewhere on
   the page - the "refined graphics" this header was asked to match. Static only, no :hover -
   see the GHL crash rule above this block, unchanged. */
#mn-logo h1 {
  font-family:'Russo One',sans-serif!important; font-size:15px; margin:0;
  text-transform:uppercase; letter-spacing:2px; line-height:1.2; white-space:nowrap;
  background:linear-gradient(135deg,#fff 0%,#F0C173 55%,#fabd59 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#fff;
}
#mn-logo p { font-family:Verdana,sans-serif!important; font-size:8px; color:#fabd59; margin:2px 0 0; text-transform:uppercase; letter-spacing:2.2px; white-space:nowrap; }
#mn-btns { display:flex !important; align-items:center !important; gap:8px; flex-wrap:nowrap; flex-shrink:0; }
.mn-b { padding:7px 12px; border-radius:8px; font-family:'Russo One',sans-serif!important; font-size:10px; text-transform:uppercase; letter-spacing:1px; cursor:pointer; text-decoration:none; display:flex !important; align-items:center !important; gap:6px; white-space:nowrap; }
/* V1.3.0: flat rgba fills on the chrome buttons replaced with the same soft gold gradient
   recipe #mn-live already used (135deg, two gold stops) - static, no :hover added, so every
   header button now reads with the same finish instead of #mn-live alone looking "finished". */
#mn-vault { background:linear-gradient(135deg,rgba(250,189,89,.14),rgba(250,189,89,.05)); border:1px solid rgba(250,189,89,.25); color:#fabd59; }
/* V3.0: ORO recoloured to gold (crimson reserved for state) */
#mn-oro { background:linear-gradient(135deg,rgba(250,189,89,.16),rgba(250,189,89,.06)); border:1px solid rgba(250,189,89,.30); color:#fabd59; }
/* V3.0: LIVE recoloured to gold; pulsing crimson dot retained as the actual state signal */
#mn-live { background:linear-gradient(135deg,rgba(250,189,89,.18),rgba(250,189,89,.06)); border:1px solid rgba(250,189,89,.45); color:#fff; }
#mn-dot { width:8px; height:8px; background:#DC143C; border-radius:50%; animation:mnPulse 1.5s ease-in-out infinite; box-shadow:0 0 6px rgba(220,20,60,.6); display:inline-block; }
@keyframes mnPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }
#mn-nav-trigger { background:linear-gradient(135deg,rgba(250,189,89,.14),rgba(250,189,89,.05)); border:1px solid rgba(250,189,89,.25); color:#fabd59; padding:9px 12px; }
/* V3.2: feedback button. Speech-bubble icon, mirrors the vault button styling. */
#mn-feedback { background:linear-gradient(135deg,rgba(250,189,89,.14),rgba(250,189,89,.05)); border:1px solid rgba(250,189,89,.25); color:#fabd59; padding:9px 12px; }
#mn-user { display:flex !important; align-items:center !important; gap:8px; flex-shrink:0; }
#mn-user-name { font-family:Verdana,sans-serif; font-size:11px; color:#999; display:none; white-space:nowrap; }
/* ── Avatar (V3.0: clickable, links to /mvp-access) ── */
#mn-avatar {
    width:32px;
    height:32px;
    border-radius:50%;
    border:2px solid rgba(250,189,89,.4);
    background:linear-gradient(135deg,#F0C173,#D4A054);
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer;
    flex-shrink:0 !important;
    position:relative;
    overflow:visible;
    text-decoration:none;
    color:inherit;
}
#mn-avatar img {
    width:100%; height:100%;
    border-radius:50%;
    object-fit:cover;
    display:block;
}
/* V3.0: padlock badge revealed on hover via JS class toggle */
#mn-avatar-lock {
    position:absolute;
    right:-3px; bottom:-3px;
    width:16px; height:16px;
    border-radius:50%;
    background:#000;
    border:1.5px solid #fabd59;
    color:#fabd59;
    display:none;
    align-items:center;
    justify-content:center;
    line-height:1;
    box-shadow:0 0 8px rgba(250,189,89,0.5);
    pointer-events:none;
}
#mn-avatar-lock svg { width:8px; height:8px; fill:currentColor; }
#mn-avatar.mn-hovering #mn-avatar-lock { display:flex; }
#mn-avatar-text {
    font-family:'Russo One',sans-serif!important;
    font-size:14px;
    color:#000;
    letter-spacing:1px;
    line-height:1;
    text-transform:uppercase;
}
/* Fallback: no name available , show icon */
#mn-avatar.mn-avatar-icon {
    background:rgba(250,189,89,.12);
    border-color:rgba(250,189,89,.25);
}
#mn-avatar.mn-avatar-icon #mn-avatar-text {
    display:none !important;
}
#mn-avatar.mn-avatar-icon #mn-avatar-icon {
    display:block !important;
}
#mn-avatar-icon {
    display:none !important;
    width:16px; height:16px;
    fill:#fabd59;
}

/* ─── V1.4.0: status readouts + search, now inline members of the single header row rather
   than a second #mn-subbar strip beneath it. Same readout markup and same #search-input id
   as before, so app.js's Cmd+K / Ctrl+K / "/" / Escape wiring and the command palette are
   untouched, only relocated. ───────────────── */
#mn-readouts { display:flex !important; align-items:center !important; gap:14px; flex-wrap:nowrap; flex-shrink:0;
    font-family:'JetBrains Mono', monospace, ui-monospace, SFMono-Regular, Menlo, Consolas;
    font-size:10.5px; color:#9aa0a6; }
.mn-ro { display: flex !important; align-items: center !important; gap: 6px; white-space:nowrap; }
.mn-ro b { color: #fabd59; font-weight: 600; letter-spacing: 0.8px; }
.mn-ind { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 6px #4ade80; display: inline-block; flex-shrink:0; }
.mn-ind.amber { background: #fabd59; box-shadow: 0 0 6px #fabd59; }
.mn-ind.red { background: #DC143C; box-shadow: 0 0 6px #DC143C; }
/* Search box. #search-input / #search-results keep the exact ids and CSS (.search-wrap etc,
   assets/app.css) app.js already wires; this rule only sizes the box for the header row.
   margin-left:auto is what parks the user block hard right on the same line. */
#mn-bar .search-wrap {
    flex: 1 1 150px;
    max-width: 300px;
    min-width: 0;
}
#mn-bar #search-input {
    height: 28px;
    font-size: 12px;
}
/* V1.5.0 (FIX 2): the command-palette dropdown, when it is the header's, is fixed to the
   viewport and pinned just under the bar's bottom edge by positionPalette() in app.js rather
   than hanging off the input inside the bar. left/width/top are all written by that function
   from real measured rects; the declarations here only set the positioning scheme and a
   z-index above the bar's own 9999 so nothing in the header can ever paint over the panel's
   head or its close control. */
#mn-bar .search-results {
    position: fixed;
    z-index: 10000;
}

/* Step 1 of keeping ONE row: below 1500 the nav buttons go icon-only. Each button keeps its
   aria-label / title, so nothing becomes unidentifiable to a screen reader. */
@media(max-width:1500px){
    .mn-b .mn-b-label { display:none !important; }
    .mn-b { padding:7px 10px; }
}
/* Step 2: below 1280 the logo tagline goes and the wordmark tightens. Still one row. */
@media(max-width:1280px){
    #mn-bar { padding:11px 16px; }
    #mn-wrap { gap:12px; }
    #mn-lead, #mn-centre, #mn-trail { gap:10px; }
    #mn-logo h1 { font-size:13px; letter-spacing:1.4px; }
    #mn-logo p { display:none; }
    #mn-readouts { gap:10px; font-size:10px; }
    #mn-bar .search-wrap { max-width:220px; flex-basis:120px; }
}
/* Step 3: only below 1100 is a SECOND row allowed, and only ever a second one. The grid
   re-areas to logo + search/avatar on the top line and the whole centre zone beneath it;
   #mn-centre stays flex-wrap:nowrap (it scrolls inside itself instead of wrapping), so
   there is no third row available for anything to fall onto at any width. */
@media(max-width:1100px){
    #mn-wrap {
      grid-template-columns: minmax(0,1fr) auto;
      grid-template-areas: "lead trail" "centre centre";
      row-gap:8px;
    }
    #mn-lead   { grid-area:lead;   justify-self:start; }
    #mn-trail  { grid-area:trail;  justify-self:end; }
    #mn-centre { grid-area:centre; justify-self:stretch; justify-content:flex-start; }
    #mn-bar .search-wrap { max-width:260px; }
}
@media(max-width:768px){
    #mn-bar { padding:9px 12px; }
    #mn-logo .mn-logo-mark { width:42px; height:42px; }
    #mn-logo h1 { font-size:12px; letter-spacing:1px; }
    #mn-btns { gap:5px; }
    .mn-b { padding:7px 8px; font-size:9px; gap:4px; }
    #mn-user-name { display:none!important; }
    #mn-avatar { width:28px; height:28px; }
    #mn-avatar-text { font-size:10px; }
    /* V1.5.0: these two readout-hiding rules needed !important. .mn-ro carries
       "display:flex !important" (a GHL-crash-rule idiom inherited from the source header),
       so the plain display:none here never won and all three readouts stayed on screen at
       every width - measured at 390px, the readout group was 279px wide inside a 366px
       centre zone, which is what forced the centre to scroll internally. With the rule
       actually applying, the centre zone fits without scrolling at every width tested. */
    #mn-readouts .mn-ro:nth-child(n+3) { display:none !important; }
}
@media(max-width:480px){
    #mn-logo h1 { display:none; }
    #mn-logo p { display:none; }
    .mn-b { padding:6px 7px; font-size:9px; letter-spacing:0; }
    #mn-preview-chip { font-size:8.5px; letter-spacing:1px; padding:3px 6px; }
    #mn-readouts .mn-ro:nth-child(n+2) { display:none !important; }
}
</style>

<header id="mn-bar">
  <div id="mn-wrap">
   <!-- LEFT ZONE (V1.5.0, FIX 4): the logo and wordmark, and nothing else. Everything that
        used to crowd them (the preview chip and the whole nav) moved to the centre zone
        below, which is the "room to breathe" this fix asks for. -->
   <div id="mn-lead">
    <a href="https://app.magnumvault.vip/dashboard" id="mn-logo">
      <!-- V1.5.0 (FIX 1, direct from Anric: the header showed a generic MV block, this is
           his actual logo). Self-hosted at assets/brand/mvp-logo.webp (120x120 native,
           8,432 bytes, transparent), rendered at the 50x50 his production header uses.
           PORT CHANGE (change 4) still holds: the source's assets.cdn.filesafe.space URL is
           never referenced. The V1.0.0-V1.4.0 inline "MV" placeholder mark this replaces
           lives on only as the favicon/apple-touch-icon data URI above, which is a different
           job (a 16px browser-tab mark) and stays as-is. -->
      <img class="mn-logo-mark" src="assets/brand/mvp-logo.webp" alt="" width="120" height="120" decoding="async" fetchpriority="high">
      <div>
        <h1>MAGNUM VAULT PASS&#8482;</h1>
        <p>Your Vault. Your Tools. Your Edge.</p>
      </div>
    </a>
   </div><!-- /#mn-lead -->

   <!-- CENTRE ZONE (V1.5.0, FIX 4): "moving the preview, Vault, and LIVE navigation button,
        feedback button, and system info to the center". Genuinely centred, not floated: the
        two side grid tracks are both minmax(0,1fr) and therefore always equal, so this
        zone's box is centred on the bar's own midpoint. -->
   <div id="mn-centre">
    <!-- V1.4.0: the entire preview notice, in one chip. The sentence that used to be a
         full-width bar of its own lives in the title attribute now, so the warning is still
         fully readable on hover/focus without spending a row on it. -->
    <span id="mn-preview-chip" role="note" tabindex="0" title="This is a parallel preview build, not the live dashboard. Nothing here is switched over. The live Magnum Vault Pass dashboard is still at app.magnumvault.vip/dashboard.">PREVIEW V1.5.0</span>
    <nav id="mn-btns">
      <a href="https://app.magnumvault.vip/dashboard" class="mn-b" id="mn-vault">
        <svg class="mn-icon" viewBox="0 0 576 512" aria-hidden="true" focusable="false"><path fill="currentColor" d="M64 0C28.7 0 0 28.7 0 64L0 416c0 35.3 28.7 64 64 64l16 0 16 32 64 0 16-32 224 0 16 32 64 0 16-32 16 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64L64 0zM224 320a80 80 0 1 0 0-160 80 80 0 1 0 0 160zm0-240a160 160 0 1 1 0 320 160 160 0 1 1 0-320zM480 221.3L480 336c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-114.7c-18.6-6.6-32-24.4-32-45.3c0-26.5 21.5-48 48-48s48 21.5 48 48c0 20.9-13.4 38.7-32 45.3z"/></svg>
        <span class="mn-b-label">VAULT</span>
      </a>
      <a href="https://app.magnumvault.vip/oro" class="mn-b" id="mn-oro">
        <svg class="mn-icon" viewBox="0 0 640 512" aria-hidden="true" focusable="false"><path fill="currentColor" d="M320 0c17.7 0 32 14.3 32 32l0 64 120 0c39.8 0 72 32.2 72 72l0 272c0 39.8-32.2 72-72 72l-304 0c-39.8 0-72-32.2-72-72l0-272c0-39.8 32.2-72 72-72l120 0 0-64c0-17.7 14.3-32 32-32zM208 384c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0zM264 256a40 40 0 1 0 -80 0 40 40 0 1 0 80 0zm152 40a40 40 0 1 0 0-80 40 40 0 1 0 0 80zM48 224l16 0 0 192-16 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm544 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-16 0 0-192 16 0z"/></svg>
        <span class="mn-b-label">OrO</span>
      </a>
      <a href="https://app.magnumvault.vip/live" class="mn-b" id="mn-live"><span id="mn-dot"></span> <span class="mn-b-label">LIVE</span></a>
      <!-- PORT NOTE: mvpNav (the Navigator section) does not exist in this clone. Guarded so
           a click no-ops with a console message instead of throwing, matching this repo's
           "zero console errors" bar without changing the button's intent. -->
      <a class="mn-b" id="mn-nav-trigger" onclick="if (window.mvpNav &amp;&amp; window.mvpNav.open) { window.mvpNav.open(); } else { console.log('MVP Header: navigator not available in this build'); }" role="button" tabindex="0" aria-label="Open vault navigator">
        <svg class="mn-icon" viewBox="0 0 512 512" aria-hidden="true" focusable="false"><path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>
      </a>
      <!-- V3.2: feedback button. Opens /feedback in a new tab so the current vault context is preserved. -->
      <a href="https://app.magnumvault.vip/feedback" target="_blank" rel="noopener" class="mn-b" id="mn-feedback" aria-label="Send feedback or report a broken link">
        <svg class="mn-icon" viewBox="0 0 512 512" aria-hidden="true" focusable="false"><path fill="currentColor" d="M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0s0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM128 208a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm128 0a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm96 32a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>
        <span class="mn-b-label">FEEDBACK</span>
      </a>
    </nav>
    <!-- V1.5.0 (FIX 4): "system info" joins the centre zone. Same markup and same ids as
         V1.4.0 (SYS ONLINE / UTC clock / NEXT-LIVE countdown), relocated only - the status
         bar script further down still drives #mn-clock and #mn-cd untouched. -->
    <div id="mn-readouts">
      <div class="mn-ro"><span class="mn-ind"></span> <b>SYS</b> ONLINE</div>
      <div class="mn-ro" id="mn-clock"><b>UTC</b> --:--:--</div>
      <div class="mn-ro"><span class="mn-ind amber"></span> <b>NEXT-LIVE</b> <span id="mn-cd">--</span></div>
    </div>
   </div><!-- /#mn-centre -->

  <!-- ═══ RIGHT ZONE (V1.5.0, FIX 4: "Keep search and avatar on the right"). The page's one
       real search box and the member avatar, and nothing else. #search-input and
       #search-results keep their exact ids, so app.js's Cmd+K / Ctrl+K / "/" / Escape wiring
       and the command-palette engine are untouched, only relocated in the DOM. -->
   <div id="mn-trail">
    <div class="search-wrap" id="mn-header-search-wrap">
      <label for="search-input" class="visually-hidden">Search the vault</label>
      <input
        id="search-input"
        type="search"
        placeholder="Search the vault... (&#8984;K)"
        autocomplete="off"
        spellcheck="false"
        role="combobox"
        aria-expanded="false"
        aria-controls="search-results"
        aria-autocomplete="list"
      >
      <div class="search-results" id="search-results" role="listbox"></div>
    </div>
      <div id="mn-user">
        <span id="mn-user-name"></span>
        <!-- V3.0: avatar is now a link to /mvp-access. Hovering reveals a padlock badge as the affordance. -->
        <a id="mn-avatar" href="https://app.magnumvault.vip/mvp-access" aria-label="Open your account page">
            <span id="mn-avatar-text"></span>
            <svg id="mn-avatar-icon" viewBox="0 0 448 512" aria-hidden="true" focusable="false"><path fill="currentColor" d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z"/></svg>
            <span id="mn-avatar-lock" aria-hidden="true">
              <svg viewBox="0 0 448 512" aria-hidden="true" focusable="false"><path fill="currentColor" d="M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z"/></svg>
            </span>
        </a>
      </div>
   </div><!-- /#mn-trail -->
  </div>
</header>

<!-- ═══ AVATAR LOGIC (ported; PORT ADDITION marked inline) ═══ -->
<script>
(function() {
    var PROFILE_WORKER_URL = "https://mvp-profile-worker.ignis-api.workers.dev";
    var AVATAR_CACHE_KEY   = "magnumMemberAvatar";
    var AVATAR_CACHE_TTL_MS = 30 * 60 * 1000;

    var user = window.getMagnumUser ? window.getMagnumUser() : null;
    var avatarEl = document.getElementById('mn-avatar');
    var textEl   = document.getElementById('mn-avatar-text');
    var iconEl   = document.getElementById('mn-avatar-icon');
    var nameEl   = document.getElementById('mn-user-name');

    function computeInitials(name) {
        if (!name) return '';
        var parts = name.trim().split(/\s+/);
        if (parts.length >= 2) return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
        if (parts.length === 1 && parts[0].length) return parts[0].charAt(0).toUpperCase();
        return '';
    }

    function renderInitials(name) {
        if (!avatarEl) return;
        avatarEl.classList.remove('mn-avatar-icon');
        var ini = computeInitials(name);
        if (ini && textEl) {
            textEl.textContent = ini;
            textEl.style.display = '';
        } else if (avatarEl) {
            avatarEl.classList.add('mn-avatar-icon');
        }
        var existing = avatarEl.querySelector('img');
        if (existing) existing.remove();
    }

    function renderImage(url, alt) {
        if (!avatarEl || !url) return;
        avatarEl.classList.remove('mn-avatar-icon');
        if (textEl) textEl.style.display = 'none';
        var existing = avatarEl.querySelector('img');
        if (existing) existing.remove();
        var img = document.createElement('img');
        img.src = url;
        img.alt = alt || 'Avatar';
        img.onerror = function() {
            img.remove();
            renderInitials(alt);
        };
        var lock = document.getElementById('mn-avatar-lock');
        if (lock) avatarEl.insertBefore(img, lock);
        else avatarEl.appendChild(img);
    }

    function fetchAvatarFromWorker(contactId) {
        return fetch(PROFILE_WORKER_URL + '/profile', {
            method: 'GET',
            headers: { 'X-Contact-Id': contactId, 'Accept': 'application/json' }
        }).then(function(r) {
            if (!r.ok) return null;
            return r.json();
        }).then(function(data) {
            return data && data.member_avatar ? data.member_avatar : '';
        }).catch(function() { return null; });
    }

    /* ── Render initials synchronously while the network call runs ── */
    if (user && user.name) {
        if (nameEl) {
            nameEl.textContent = user.name;
            nameEl.style.display = 'block';
        }
        renderInitials(user.name);
    } else if (avatarEl) {
        avatarEl.classList.add('mn-avatar-icon');
    }

    /* ── Async avatar fetch + cache ────────────────────────────── */
    if (user && user.contactId && user.isAuthenticated) {
        var cached = null;
        try { cached = JSON.parse(sessionStorage.getItem(AVATAR_CACHE_KEY) || 'null'); } catch (_) {}

        if (cached && cached.contactId === user.contactId && (Date.now() - cached.ts) < AVATAR_CACHE_TTL_MS) {
            if (cached.url) renderImage(cached.url, user.name);
        } else {
            fetchAvatarFromWorker(user.contactId).then(function(url) {
                if (url === null) {
                    /* PORT ADDITION: the source leaves initials in place silently here on a
                       network error. On this host that silence hides a real CORS block, not
                       "no avatar set" - make it visible instead. */
                    if (window.mvpShowCorsBanner) {
                        window.mvpShowCorsBanner('Avatar service unreachable from this origin (blocked by CORS): showing initials instead.');
                    }
                    return; // network error, leave initials in place
                }
                try {
                    sessionStorage.setItem(AVATAR_CACHE_KEY, JSON.stringify({
                        contactId: user.contactId,
                        url: url,
                        ts: Date.now()
                    }));
                } catch (_) {}
                if (url) renderImage(url, user.name);
            });
        }
    }

    /* ── Hover affordance: padlock badge ───────────────────────── */
    if (avatarEl) {
        avatarEl.addEventListener('mouseenter', function() { avatarEl.classList.add('mn-hovering'); });
        avatarEl.addEventListener('mouseleave', function() { avatarEl.classList.remove('mn-hovering'); });
        avatarEl.addEventListener('focus',      function() { avatarEl.classList.add('mn-hovering'); });
        avatarEl.addEventListener('blur',       function() { avatarEl.classList.remove('mn-hovering'); });
    }
})();
</script>

<!-- ═══ V2.7: STATUS BAR LOGIC (ported; JOB 2 V1.2.0 removed the search wiring, see below) ═══ -->
<script>
(function() {
    'use strict';

    function pad(n) { return n < 10 ? '0' + n : '' + n; }

    /* ── Live UTC clock ── */
    function tickClock() {
        var now = new Date();
        var el = document.getElementById('mn-clock');
        if (el) el.innerHTML = '<b>UTC</b> ' + pad(now.getUTCHours()) + ':' + pad(now.getUTCMinutes()) + ':' + pad(now.getUTCSeconds());
    }

    /* ── Next-live countdown (Wednesdays 11 ET ≈ 16 UTC, only 1st/2nd/3rd) ── */
    function nextWed(from) {
        var d = new Date(from);
        d.setUTCHours(15, 0, 0, 0);
        var add = (3 - d.getUTCDay() + 7) % 7;
        if (add === 0 && from > d) add = 7;
        d.setUTCDate(d.getUTCDate() + add);
        return d;
    }
    function nextScheduledWed(from) {
        var d = nextWed(from);
        while (Math.ceil(d.getUTCDate() / 7) > 3) {
            d.setUTCDate(d.getUTCDate() + 7);
            d = nextWed(d);
        }
        return d;
    }
    function tickCountdown() {
        var now = new Date();
        var target = nextScheduledWed(now);
        var diff = target - now;
        var d = Math.floor(diff / 86400000);
        var h = Math.floor(diff / 3600000) % 24;
        var el = document.getElementById('mn-cd');
        if (el) el.textContent = d + 'd ' + h + 'h';
    }

    /* ── Auth indicator from getMagnumUser ── */
    function setAuthIndicator() {
        var el = document.getElementById('mn-auth');
        if (!el) return;
        var u = (typeof window.getMagnumUser === 'function') ? window.getMagnumUser() : null;
        el.textContent = (u && u.isAuthenticated) ? 'VERIFIED' : 'GUEST';
    }

    /* JOB 2 (V1.2.0): getResources()/setCount()/runSearch() removed here. They existed only
       to drive the header's own #mn-search box (window.MVP_RESOURCES, #mn-search-results),
       which is now deleted from the markup above along with that global's publication in
       app.js - see the big comment near the top of this file. Nothing else in this page read
       those three functions. */

    function init() {
        tickClock();
        tickCountdown();
        setAuthIndicator();
        setInterval(tickClock, 1000);
        setInterval(tickCountdown, 60000);
    }

    if (document.readyState !== 'loading') init();
    else document.addEventListener('DOMContentLoaded', init);

})();
</script>

<main>

  <!-- V1.3.0: the standalone .search-row strip that used to open <main> here is gone - the
       one real search box now lives in the header (see #mn-subbar above the closing
       </header> tag). Same #search-input/#search-results ids, same app.js wiring. -->

  <!-- ── THE FOUR ZONES ───────────────────────────────────────────────────────────────
       Left to right: PORTALS rail (primary navigation, was the flat facet-rail + flat
       catalog row list), the welcome-note + release-feed column, the center orb
       (unchanged artwork, just relocated), and the live-sessions + replays column. A
       drawer (below, outside this grid, position:fixed) is the actual browsing surface:
       clicking a portal opens it with that facet's items. -->
  <section class="shell-row shell-row--main" aria-label="Vault portals, welcome note, orb and live sessions">

    <nav class="mom-panel portal-rail" id="portal-rail" aria-label="Vault portals">
      <div class="mom-section-label"><span><span class="mom-panel-num">01</span> PORTALS</span></div>
      <div class="mom-portal-list" id="portal-list" role="list"></div>
    </nav>

    <div class="notewell-col">
      <div class="mom-panel notewell-panel" id="note-panel" aria-label="Alerts">
        <div class="mom-section-label"><span><span class="mom-panel-num">02</span> ALERTS</span></div>
        <div class="notewell-body" id="note-body"></div>
      </div>
      <div class="mom-panel release-panel" id="release-feed-panel" aria-label="Latest releases">
        <div class="mom-section-label"><span><span class="mom-panel-num">03</span> LATEST RELEASES</span><span class="mom-num" id="release-count">0</span></div>
        <div class="release-body" id="release-body"></div>
      </div>
    </div>

    <!-- The orb. Rendered entirely from data/orb.json (real gear markup, hand-extracted from
         the live app.magnumvault.vip/dashboard .gear-cluster-zone) and data/journey.json
         (neutral preview status states) by buildOrb() in app.js - no gear is hardcoded here.
         See momentum.css section 10 for the ring geometry, pos-* placement, rotation and
         counter-rotation, and the three journey-state treatments.

         V0.7.0 (change 2): #orb-globe-canvas is a backdrop layer, ported from the MAESTRO
         ops console (magnum-ecosystem/ops/index.html V3.9, .globe-layer / #globe-canvas) -
         read-only source, not modified. That source builds its globe with three.js (an
         external CDN library), which this zero-dependency, no-external-request page cannot
         load. initOrbGlobe() in app.js reimplements the same visual idea (a rotating
         fibonacci-sphere point cloud, a faint latitude wireframe, and fading connection
         arcs) with plain Canvas 2D and hand-rolled 3D-to-2D projection instead, so it stays
         atmosphere behind the gear cluster rather than a rendered focus - see app.js for the
         frame-rate cap, visibility pause, and reduced-motion handling. -->
    <div class="mom-panel orb-col" id="orb-col" aria-label="Vault tool ecosystem orb">
      <!-- JOB 1 (V1.2.0): THE ORB never carried a .mom-section-label before (every other zone
           in this row did); Anric could not reference it in feedback. This one covers the
           whole panel, gear cluster and all 4 corner tiles included - they are not numbered
           separately, same as production never numbers a panel's interior pieces on their
           own. -->
      <div class="mom-section-label"><span><span class="mom-panel-num">04</span> THE ORB</span></div>
      <!-- --cluster-bg, PORTED VERBATIM V0.8.0 from 02B_IDENTITY-ORBIT-ROTATION.html line 163:
           the live source sets this inline to a url(...) photograph. This build now has that
           same asset locally (public/assets/orb/cluster-bg.webp) and sets the custom property
           from app.js's buildOrbChrome() (data/orb.json's "background" entry) once the data
           loads, rather than hardcoding an image path in this markup or inventing a pure-CSS
           fallback (the V0.7.1 approach, before the real asset existed). See momentum.css
           section 10, .gear-cluster-zone[style*="--cluster-bg"]::after. -->
      <div class="gear-cluster-zone is-headless" id="gear-cluster-zone">
        <canvas class="orb-globe-layer" id="orb-globe-canvas" aria-hidden="true"></canvas>
        <!-- Leader lines: PORTED VERBATIM V0.8.0 from 02B lines 171-176 (the 4
             quadratic-bezier paths from center to each corner) and 02A lines 2220-2237 (the
             stroke/dasharray/flow styling, momentum.css section 10). This is structural SVG
             geometry, not an image asset, so it stays static markup here rather than being
             generated by app.js. -->
        <svg class="leader-lines" aria-hidden="true" viewBox="0 0 100 100" preserveAspectRatio="none">
          <path d="M 50 50 Q 30 32 10 14"></path>
          <path d="M 50 50 Q 70 32 90 14"></path>
          <path d="M 50 50 Q 30 68 10 86"></path>
          <path d="M 50 50 Q 70 68 90 86"></path>
        </svg>
        <!-- Corner shortcuts: rendered by buildOrbChrome() in app.js from data/orb.json's
             "corners" array (real <img> tiles, PORTED VERBATIM from 02B lines 183-194), not
             hardcoded here - see that function's comment for the facet-drawer wiring. -->
        <div class="orb-corners" id="orb-corners"></div>
        <div class="gear-cluster" id="gear-cluster" role="list" aria-label="Vault tool ecosystem, 8 tools"></div>
      </div>
      <div class="orb-journey" id="orb-journey">
        <span class="orb-journey-readout" id="orb-journey-readout"></span>
        <span class="orb-journey-legend" id="orb-journey-legend"></span>
      </div>
    </div>

    <div class="live-replays-col">
      <!-- V1.4.0 (FIX 2, direct from Anric: "The live box is still not showing up properly.
           It needs to be clear. It needs to be simple. Please look at the original MVP
           dashboard."). This panel is now a faithful port of his own Box 03 WEDNESDAY
           ROTATION, structure for structure, from
           docs/reference/v3-source/02B_IDENTITY-ORBIT-ROTATION.html (markup + its tick()
           renderer) with the CSS in 02A_STYLES.html (.lr-row / .lr-tag / .lr-name / .lr-host
           / .lr-cd / .lr-times / .live-cta-row / .live-cta.primary|ghost|cafe /
           .panel.mini-progress). Four things the V1.3.0 version got wrong are gone:
             1. Only one event row rendered where his shows three. The three rows below are
                the three real next occurrences, still computed client-side in
                America/New_York by computeSessionRotationDates() in app.js. Nothing about
                that computation changed and no date is hardcoded.
             2. The NEXT chip was clipping to "EXT" (his screenshot) and the host line to
                "nric and Lauralouise". Both were caused by the old row's negative side
                margins plus nowrap + overflow:hidden ellipsis on the label/meta lines. The
                row below has no negative margins and no overflow:hidden anywhere: the title
                and host wrap instead of being cut.
             3. The verbose Cafe explanation row is deleted. The Cafe is the fourth button,
                exactly as it is in his source (its id="cta-cafe" there).
             4. Two buttons where his has four, in a 2x2 grid: JOIN ROOM, REPLAYS, ADD TO
                CALENDAR, MAGNUM CAFE.
           The one centred time line and the separate PROGRESS block below are both his too.
           PROGRESS renders this build's real neutral journey state (data/journey.json, every
           step 'locked', so 0 of 8), NOT his screenshot's 5 of 8: no progress is fabricated
           for a member this build has no real session for. -->
      <div class="mom-panel live-sessions-panel" id="live-sessions-panel" aria-label="Live sessions">
        <div class="mom-section-label"><span><span class="mom-panel-num">05</span> LIVE</span></div>
        <div class="live-rotation" id="live-rotation"></div>
        <p class="live-times">11:00 ET // 16:00 UTC // 19:00 GULF // 90 MIN</p>
        <div class="live-cta-grid">
          <a class="live-cta live-cta--primary" id="live-join-link" href="https://app.magnumvault.vip/live" target="_blank" rel="noopener">JOIN ROOM</a>
          <a class="live-cta live-cta--ghost" id="live-replays-link" href="https://app.magnumvault.vip/replays" target="_blank" rel="noopener">REPLAYS</a>
          <a class="live-cta live-cta--ghost" id="live-calendar-link" href="https://go.magnumnexus.io/MVP" target="_blank" rel="noopener">ADD TO CALENDAR</a>
          <a class="live-cta live-cta--cafe" id="live-cafe-link" href="https://cafe.magnumvault.com/dashboard" target="_blank" rel="noopener">MAGNUM CAF&Eacute;</a>
        </div>
      </div>
      <!-- PROGRESS, his .panel.mini-progress, which sits directly under Box 03 in the same
           right-hand column of his own dashboard. Value is written by renderJourneyProgress()
           in app.js from data/journey.json - N counted, not typed. -->
      <div class="mom-panel live-progress-panel" id="live-progress-panel" aria-label="Journey progress">
        <div class="live-progress-head">
          <span class="live-progress-dot" aria-hidden="true"></span>
          <span class="live-progress-label">PROGRESS</span>
        </div>
        <div class="live-progress-value" id="live-progress-value">-- / --</div>
      </div>
      <div class="mom-panel replays-panel" id="replays-panel" aria-label="Replays">
        <div class="mom-section-label"><span><span class="mom-panel-num">06</span> REPLAYS</span><span class="mom-num" id="replays-count">0</span></div>
        <div class="replays-body" id="replays-body"></div>
      </div>
    </div>

  </section>

  <section class="mom-panel telemetry-strip" id="telemetry-panel" aria-label="Catalog telemetry">
    <div class="mom-section-label"><span><span class="mom-panel-num">07</span> CATALOG TELEMETRY</span></div>
    <div class="telemetry-strip-body">
      <div class="telemetry-hero">
        <span class="telemetry-hero-figure" id="telemetry-total">--</span>
        <span class="telemetry-hero-label">TOTAL ITEMS</span>
      </div>
      <div class="mom-meter telemetry-meter-list" id="telemetry-meter-list"></div>
    </div>
  </section>

  <!-- ── QUICK LINKS (V1.1.0, JOB 1, FOOTER-SPEC.md revision 3) ───────────────────────────
       Was the footer's link set; Anric asked for it renamed, moved above the world clock
       ribbon, and reframed as one clean panel matching the catalog telemetry panel above it
       exactly (border, radius, hairline, background) rather than the heavier .mom-footer
       frame the old block sat inside. This is a plain "mom-panel", no border/radius/
       background override anywhere below or in app.css/momentum.css for this id or its
       "quick-links-panel" class - that is what makes the two panels' computed frame styles
       identical, not a copy-pasted value that could drift. #quick-links is rendered entirely
       from data/footer.json by buildQuickLinks() in app.js (13 entries, Anric's own labels,
       one clean responsive tile grid, no invented group headings - see
       docs/FOOTER-SPEC.md) - nothing hardcoded here, same "render from JSON" rule the rest
       of this page follows. The four pillars (Health, Wealth, Mindset, Nation) stay off this
       panel on purpose: they already render on the orb's centre gear and the brief
       explicitly asked that they not be forced in here too. -->
  <section class="mom-panel quick-links-panel" id="quick-links-panel" aria-label="Quick links">
    <div class="mom-section-label"><span><span class="mom-panel-num">08</span> QUICK LINKS</span></div>
    <nav class="mom-quicklinks-grid" id="quick-links" aria-label="Vault destinations"></nav>
  </section>

  <!-- ── 12 FIND BY TOPIC // VIDEO BROWSER (V1.5.0, FIX 7) ────────────────────────────────
       Anric: "The current LIVE version has a way to actually search videos and show videos
       by topic." Ported from his own Box 12 in
       docs/reference/v3-source/08_ROADMAP-CLOCK-ACTIONS.html: a <details> collapsed by
       default whose <summary> is the whole toggle, containing #tb-search, the #tb-cloud tag
       cloud and the #tb-results list. Renderer ported from renderTopicBrowser() in
       02B_IDENTITY-ORBIT-ROTATION.html, CSS from 02A_STYLES.html (momentum.css section 14).
       WHY HERE: this is a full-width browsing surface over a different corpus (program video
       modules) than the catalog the portals and the drawer cover, and it is collapsed by
       default so it costs one line of vertical space until a member opens it. Directly under
       08 QUICK LINKS and directly above the 14/15 ops bay puts it at the end of the "go find
       something" run of the page, after the panels a member scans and before the footer
       utilities, without displacing anything in the four-zone row above. It is numbered 12
       because that is his own number for it, which keeps 01-08 and 14/15 exactly as they
       are.
       DATA: data/videos.json (mirrored to public/data/videos.json by
       scripts/sync-catalog.mjs, inlined into dist by scripts/build.mjs), extracted from his
       CURRICULUM array. 36 modules. Nothing invented.
       #tb-search is type="text", not type="search": this page's one search box is
       #search-input in the header, and this is a scoped filter over one collapsed panel, not
       a second vault search. See the comment on buildVideoBrowser() in assets/app.js. -->
  <section class="mom-panel topic-browser-panel" id="topic-browser-panel" aria-label="Find by topic, video browser">
    <details class="topic-browser-wrap" id="topic-browser-wrap">
      <summary class="topic-browser-summary">
        <span class="mom-section-label topic-browser-title"><span><span class="mom-panel-num">12</span> FIND BY TOPIC // VIDEO BROWSER</span></span>
        <span class="topic-browser-meta"><span id="tb-count">--</span> MODULES INDEXED <span class="tb-expand-hint">click to expand</span></span>
      </summary>
      <div class="topic-browser">
        <div class="tb-controls">
          <label for="tb-search" class="visually-hidden">Filter modules and topics</label>
          <input id="tb-search" type="text" class="tb-search" placeholder="Filter modules and topics..." autocomplete="off" spellcheck="false">
          <div class="tb-active" id="tb-active"></div>
        </div>
        <div class="tb-cloud" id="tb-cloud"></div>
        <div class="tb-results" id="tb-results"></div>
      </div>
    </details>
  </section>

</main>

<!-- ── THE DRAWER ────────────────────────────────────────────────────────────────────────
     Interaction ported from the ops console's right-hand ADMIN PORTALS drawer
     (magnum-ecosystem/ops/index.html V3.20), restyled to this file's own momentum.css
     tokens. Opened by clicking (or Enter/Space on) a portal row in the rail above; this is
     also where the search palette and any #item-<slug> deep link land. Only one drawer
     open at a time. -->
<div class="drawer-backdrop" id="drawer-backdrop"></div>
<div class="drawer-overlay" id="drawer-overlay" role="dialog" aria-modal="true" aria-labelledby="drawer-title" aria-hidden="true" tabindex="-1">
  <div class="drawer-head">
    <span class="drawer-head-icon" id="drawer-icon">--</span>
    <span class="drawer-head-title" id="drawer-title">Portal</span>
    <span class="drawer-head-count" id="drawer-count">0 items</span>
    <button class="drawer-close" id="drawer-close" type="button" title="Close (Esc)">&times;</button>
  </div>
  <div class="drawer-body" id="drawer-body"></div>
</div>

<!-- ── FOOTER / OPS BAY (V1.3.0, 09 WORLD CLOCK, direct from Anric: "he prefers the
     original") ──────────────────────────────────────────────────────────────────────────
     Ported faithfully from docs/reference/v3-source/08_ROADMAP-CLOCK-ACTIONS.html (Box 14
     World Clock + Box 15 Quick Actions + the ops-foot row) with matching CSS harvested from
     02A_STYLES.html (.tz-ribbon/.tz-daynight/.tz-sun/.city/.ops-bay/.qa, see momentum.css
     section 13). This REPLACES the V1.1.0 flat 7-city digital ribbon (.mom-worldclock-ribbon,
     class kept below only on the deprecated fallback note), not the bottom brand/version
     block Anric asked deleted earlier - that was this build's own invented block and stays
     gone; this ops-bay is HIS, ported from his own source, and he is asking for it back. The
     map is the self-hosted public/assets/map/worldmap.webp (2000x528, 77KB) set as a CSS
     background below, never the source's filesafe.space hotlink. Real hrefs from the source:
     Record Testimonial -> magnumvault.com/testimonial, Contact Support ->
     mailto:support@magnumvault.com, Ecosystem Map -> ecosystem.magnumvault.vip, Terms and
     Privacy -> magnumvault.com/legal. City time text and the sun's --sun-x position are
     computed live by buildWorldClock()/tickWorldClock() in app.js (unchanged function names,
     rewritten bodies - see that file). -->
<!-- V1.5.0 (FIX 5, direct from Anric on 14 WORLD CLOCK and 15 QUICK ACTIONS: "the border
     around that is too dominant again, and I think it could be slimmer. It's too high. And
     the footer indicators are a little cut off and squashed."). The class list changes from
     "mom-footer mom-ops-bay" to "mom-panel mom-ops-bay": .mom-footer carried its own heavier
     frame (--mom-border-ops + --mom-bg-ops-wash) while 07 CATALOG TELEMETRY and 08 QUICK
     LINKS are plain .mom-panel. This is exactly the fix applied to QUICK LINKS in V1.1.0,
     applied here for the same reason and in the same way: inherit .mom-panel's frame
     unmodified rather than copy its values, so the three panels' computed border, radius and
     background cannot drift apart. .mom-ops-bay keeps only the layout and padding rules that
     are genuinely this bay's own; its height comes down (see momentum.css section 13) and
     the .mom-ops-foot row below is rebuilt so no indicator clips. -->
<footer class="mom-panel mom-ops-bay" id="site-footer">
  <div class="mom-ops-grid">
    <div class="mom-ops-block">
      <div class="mom-ops-label"><span class="mom-num">14</span> WORLD CLOCK // TIME-ZONE RIBBON</div>
      <div class="mom-tz-ribbon" id="tz-ribbon">
        <div class="mom-tz-daynight" aria-hidden="true"></div>
        <div class="mom-tz-sun" id="tz-sun" aria-hidden="true"></div>
        <div class="mom-worldclock-ribbon" id="world-clock"></div>
      </div>
    </div>
    <div class="mom-ops-block">
      <div class="mom-ops-label"><span class="mom-num">15</span> QUICK ACTIONS</div>
      <div class="mom-qa-row">
        <a href="https://magnumvault.com/testimonial" target="_blank" rel="noopener" class="mom-qa">
          <span class="mom-qa-ico" aria-hidden="true">&#127908;</span> Record Testimonial
        </a>
        <a href="mailto:support@magnumvault.com" class="mom-qa">
          <span class="mom-qa-ico" aria-hidden="true">&#9993;</span> Contact Support
        </a>
        <a href="https://ecosystem.magnumvault.vip/" target="_blank" rel="noopener" class="mom-qa">
          <span class="mom-qa-ico" aria-hidden="true">&#128506;</span> Ecosystem Map
        </a>
        <a href="https://magnumvault.com/legal" target="_blank" rel="noopener" class="mom-qa">
          <span class="mom-qa-ico" aria-hidden="true">&#9878;</span> Terms &amp; Privacy
        </a>
      </div>
    </div>
  </div>
  <!-- V1.5.0 (FIX 5, "the footer indicators are a little cut off and squashed"). The row was
       one justify-content:space-between flex line whose children could be compressed below
       their own text width, so the letterspaced mono labels clipped. Every leaf below is now
       a nowrap unit that wraps as a whole instead of being squashed, the integration dots
       have their own wrapping group, and the three right-hand items are grouped so they wrap
       together rather than one at a time (momentum.css section 13). -->
  <div class="mom-ops-foot">
    <div class="mom-ops-ints">
      <div class="mom-ops-int"><span class="mom-ops-dot"></span> GHL</div>
      <div class="mom-ops-int"><span class="mom-ops-dot"></span> Cloudflare</div>
      <div class="mom-ops-int"><span class="mom-ops-dot"></span> Cloudinary</div>
      <div class="mom-ops-int"><span class="mom-ops-dot"></span> Firebase</div>
      <div class="mom-ops-int"><span class="mom-ops-dot"></span> ElevenLabs</div>
    </div>
    <div class="mom-ops-foot-meta">
      <div id="ops-foot-version">DASHBOARD V1.5.0</div>
      <div><a href="https://app.magnumvault.vip/feedback" target="_blank" rel="noopener" class="mom-ops-feedback-link">&#128172; Send Feedback</a></div>
      <div class="mom-ops-copyright">MAGNUM VAULT PARTNERS LLC</div>
    </div>
  </div>
</footer>

<div id="toast" class="toast" role="status" aria-live="polite" hidden></div>

<script>window.__MVP_DATA__ = {"/data/mvp-inventory.json":{"_generated":"Generated by scripts/sync-catalog.mjs. Do not hand-edit this file or anything under public/data/. Edit the source instead and re-run the sync script.","_libraryExpansion":"LIBRARY grouped rows (Capital Magnetism Collection x4, Regional Capital Attraction Blueprints) are expanded into individual titles HERE, at sync time, into this generated file only. The upstream source at /Users/anricblatt/dev/magnum-workers/mvp-inventory.json is deliberately left unchanged - it is Anric's source of truth and also feeds OrO. See LIBRARY_GROUPED_ROWS and expandLibraryRow() in scripts/sync-catalog.mjs for the parse rule.","meta":{"generatedBy":"scripts/sync-catalog.mjs","generatedAt":"2026-07-31T13:02:38.806Z","sourcePath":"/Users/anricblatt/dev/magnum-workers/mvp-inventory.json","sourceLastUpdated":"2026-07-16","totalRenderable":121,"totalHiddenExcluded":23},"sections":[{"key":"programs","title":"THE PROGRAM VAULT","path":"Dashboard > PROGRAMS","items":[{"slug":"raisingcapital-live-1-day-intensive","name":"RaisingCapital.Live (1-Day Intensive)","status":"live","purpose":"Entry program","sectionKey":"programs","sectionTitle":"THE PROGRAM VAULT","tags":["PROGRAMS"],"url":"raisingcapital.live"},{"slug":"3-day-capital-attraction-mba","name":"3-Day Capital Attraction MBA","status":"live","purpose":"Flagship intensive. 8 modules. S3 framework from identity to systems. Day 1 STRATEGY, Day 2 STORY, Day 3 SYSTEMS.","sectionKey":"programs","sectionTitle":"THE PROGRAM VAULT","tags":["PROGRAMS"],"url":"app.magnumvault.vip/day1"},{"slug":"crushingit-vip-replays","name":"CRUSHiNGiT.VIP Replays","status":"live","purpose":"Full CRUSHiNGiT session recordings. Watch, rewatch, apply.","sectionKey":"programs","sectionTitle":"THE PROGRAM VAULT","tags":["PROGRAMS"],"url":"magnumvault.vip/crushingit-replay/index"},{"slug":"crushingit-accelerator","name":"CRUSHiNGiT Accelerator","status":"live","purpose":"10 modules. Complete capital raising framework.","sectionKey":"programs","sectionTitle":"THE PROGRAM VAULT","tags":["PROGRAMS"],"url":"app.magnumvault.vip/crushingit-accelerator/index"},{"slug":"ramp-up-interactive-bootcamp","name":"RAMP UP Interactive Bootcamp","status":"live","purpose":"Advanced 1: 10 sequential protocols, 50+ exercises. Open it from Dashboard > PROGRAMS.","sectionKey":"programs","sectionTitle":"THE PROGRAM VAULT","tags":["PROGRAMS"]},{"slug":"reap-rewards-interactive-bootcamp","name":"REAP REWARDS Interactive Bootcamp","status":"live","purpose":"Advanced 2: 90-Day Implementation Sprint. 4 acceleration tracks, 12 Wednesday labs.","sectionKey":"programs","sectionTitle":"THE PROGRAM VAULT","tags":["PROGRAMS"],"url":"magnumvault.com/reap-curriculum"},{"slug":"capital-attraction-masterclasses","name":"Capital Attraction Masterclasses","status":"coming_soon","purpose":"Masterclass series","sectionKey":"programs","sectionTitle":"THE PROGRAM VAULT","tags":["PROGRAMS"]},{"slug":"storyselling-clinic","name":"StorySelling Clinic","status":"coming_soon","purpose":"Clinic program, Q2 2026","sectionKey":"programs","sectionTitle":"THE PROGRAM VAULT","tags":["PROGRAMS"]},{"slug":"linkedin-clinic","name":"LinkedIn Clinic","status":"coming_soon","purpose":"Clinic program, Q3 2026","sectionKey":"programs","sectionTitle":"THE PROGRAM VAULT","tags":["PROGRAMS"]},{"slug":"ai-accelerator-clinic","name":"AI Accelerator Clinic","status":"coming_soon","purpose":"Clinic program, Q4 2026","sectionKey":"programs","sectionTitle":"THE PROGRAM VAULT","tags":["PROGRAMS"]},{"slug":"magnum-accelerator-map","name":"Magnum Accelerator (MAP)","status":"migrating","purpose":"Accelerator program","sectionKey":"programs","sectionTitle":"THE PROGRAM VAULT","tags":["PROGRAMS"]},{"slug":"rocket-fund-launcher","name":"Rocket Fund Launcher","status":"migrating","purpose":"Fund launch program","sectionKey":"programs","sectionTitle":"THE PROGRAM VAULT","tags":["PROGRAMS"]}]},{"key":"curriculum","title":"PROGRAM CURRICULUM (what is inside each program)","path":"Dashboard > PROGRAMS","items":[{"slug":"3-day-mba-days","name":"3-Day MBA days","status":"live","purpose":"Day 1 STRATEGY (Magnetic Score, ACF 5 rings, RFC 8 dimensions, going pro). Day 2 STORY (Kintsugi, Signature Story Trinity, 35-second Escalator Pitch, Football Field of Influence). Day 3 SYSTEMS (Magnetic Orbit Funnel, Book-a-Call, HVAC and HSI content, AI tools, graduation).","sectionKey":"curriculum","sectionTitle":"PROGRAM CURRICULUM (what is inside each program)","tags":["PROGRAMS"],"url":"app.magnumvault.vip/day1"},{"slug":"crushingit-modules-1-10","name":"CRUSHiNGiT Modules 1-10","status":"live","purpose":"1 Keynote foundation, 2 Identity, 3 RFC, 4 Conquering GULP resistance, 5 ACF, 6 TRUSTI six currencies of influence, 7 Signature Stories, 8 Dignified Objection Handling, 9 Circular Attraction Funnels, 10 Your Golden Thread. Each module has a replay deep link at magnumvault.vip/crushingit-replay/module-N.","sectionKey":"curriculum","sectionTitle":"PROGRAM CURRICULUM (what is inside each program)","tags":["PROGRAMS"]},{"slug":"ramp-up-protocols-1-10","name":"RAMP UP Protocols 1-10","status":"live","purpose":"1 IDENTITY, 2 RIGHT FIT CLIENT, 3 SIGNATURE STORY, 4 IMPACT AND INFLUENCE, 5 FUNNELS, 6 EXPERT POSITIONING, 7 PEAK PERFORMANCE, 8 TECHNOLOGY WORKSHOP, 9 INTEGRATION DAY, 10 LIFE AND BUSINESS ON YOUR TERMS. Open from Dashboard > PROGRAMS > RAMP UP.","sectionKey":"curriculum","sectionTitle":"PROGRAM CURRICULUM (what is inside each program)","tags":["PROGRAMS"]},{"slug":"reap-labs-1-12","name":"REAP Labs 1-12","status":"live","purpose":"12 Wednesday labs (11am-2pm EST) across 4 tracks: Magnetic Identity Mastery, Authority Content Mastery, CEO Systems Mastery, Magnetic Marketing Mastery. Full curriculum and dates at the REAP curriculum page.","sectionKey":"curriculum","sectionTitle":"PROGRAM CURRICULUM (what is inside each program)","tags":["PROGRAMS"],"url":"magnumvault.com/reap-curriculum"}]},{"key":"ai_accelerator","title":"MAGNUM AI ACCELERATOR","path":"Dashboard > TOOLS > AI Accelerator","items":[{"slug":"the-ignis-protocol","name":"The IGNIS Protocol","status":"live","purpose":"6-step identity engine. Step 1 Interview, Step 2 Your Materials, Step 3 Your Strategy, Step 4 Your Content, Step 5 Your AI Identity, Step 6 Storyselling Toolkit.","sectionKey":"ai_accelerator","sectionTitle":"MAGNUM AI ACCELERATOR","tags":["AI & INFRASTRUCTURE","WRITING"],"url":"app.magnumvault.vip/ignis"},{"slug":"storyselling-toolkit-ignis-step-6","name":"Storyselling Toolkit (IGNIS Step 6)","status":"new","purpose":"11 voice-matched story tools built from IGNIS data","sectionKey":"ai_accelerator","sectionTitle":"MAGNUM AI ACCELERATOR","tags":["WRITING"],"url":"app.magnumvault.vip/ignis-c-step6"},{"slug":"storyselling-field-guide","name":"Storyselling Field Guide","status":"new","purpose":"25 craft lessons in persuasion architecture, drawn from the King Charles speech masterclass. Separate from the 11-tool Storyselling Toolkit.","sectionKey":"ai_accelerator","sectionTitle":"MAGNUM AI ACCELERATOR","tags":["WRITING"],"url":"app.magnumvault.vip/storyselling2"},{"slug":"storypolisher","name":"StoryPolisher","status":"new","purpose":"Sharpens any draft against 250 craft principles from the canon","sectionKey":"ai_accelerator","sectionTitle":"MAGNUM AI ACCELERATOR","tags":["WRITING"],"url":"/storypolish/","local":true},{"slug":"the-magnum-etiquette-protocol","name":"The Magnum Etiquette Protocol","status":"new","purpose":"4,400 years of dignity guardrails for emails, DMs, posts, pitches. Installable skill.","sectionKey":"ai_accelerator","sectionTitle":"MAGNUM AI ACCELERATOR","tags":["WRITING","COMPLIANCE"],"url":"app.magnumvault.vip/claude-etiquette"},{"slug":"the-compliance-reviewer","name":"The Compliance Reviewer","status":"new","purpose":"10 hard-fail rules. CFTC, SEC, FINRA.","sectionKey":"ai_accelerator","sectionTitle":"MAGNUM AI ACCELERATOR","tags":["COMPLIANCE"],"url":"app.magnumvault.vip/compliance"},{"slug":"copywriting-reference-v2-0","name":"Copywriting Reference V2.0","status":"new","purpose":"30,000-word reference, 20+ frameworks, canonical masters, voice discipline","sectionKey":"ai_accelerator","sectionTitle":"MAGNUM AI ACCELERATOR","tags":["WRITING"],"url":"app.magnumvault.vip/copywriting"},{"slug":"the-linkedin-humanizer-protocol","name":"The LinkedIn Humanizer Protocol","status":"new","purpose":"Breaks AI fingerprint, defeats detection suppression on LinkedIn","sectionKey":"ai_accelerator","sectionTitle":"MAGNUM AI ACCELERATOR","tags":["LINKEDIN","WRITING","PUBLISHING"],"url":"app.magnumvault.vip/humanizer"},{"slug":"the-linkedin-post-formatter","name":"The LinkedIn Post Formatter","status":"new","purpose":"Math Sans, braille, hashtag signoff formatting for posts","sectionKey":"ai_accelerator","sectionTitle":"MAGNUM AI ACCELERATOR","tags":["LINKEDIN","PUBLISHING"],"url":"app.magnumvault.vip/postformatter"},{"slug":"podcast-preparation-tool","name":"Podcast Preparation Tool","status":"new","purpose":"Podcast prep from your storyselling corpus","sectionKey":"ai_accelerator","sectionTitle":"MAGNUM AI ACCELERATOR","tags":["PUBLICITY"],"url":"app.magnumvault.vip/podcast"},{"slug":"webinar-creator","name":"Webinar Creator","status":"new","purpose":"Webinar build toolkit","sectionKey":"ai_accelerator","sectionTitle":"MAGNUM AI ACCELERATOR","tags":["PUBLICITY","PLAN & EXECUTE"],"url":"app.magnumvault.vip/webinar"},{"slug":"claudebrain-system","name":"ClaudeBrain System","status":"live","purpose":"Voice DNA extraction, 18-question assessment","sectionKey":"ai_accelerator","sectionTitle":"MAGNUM AI ACCELERATOR","tags":["AI & INFRASTRUCTURE"],"url":"app.magnumvault.vip/claude-brain"},{"slug":"claude-infinite-protocol","name":"Claude Infinite Protocol","status":"live","purpose":"Unlimited context, code-verified analysis","sectionKey":"ai_accelerator","sectionTitle":"MAGNUM AI ACCELERATOR","tags":["AI & INFRASTRUCTURE"],"url":"app.magnumvault.vip/claude-infinite"},{"slug":"the-prompt-arsenal","name":"The Prompt Arsenal","status":"live","purpose":"15 precision prompts, 8 categories","sectionKey":"ai_accelerator","sectionTitle":"MAGNUM AI ACCELERATOR","tags":["AI & INFRASTRUCTURE"],"url":"app.magnumvault.vip/prompts"},{"slug":"email-delivery-super-tool","name":"Email Delivery Super Tool","status":"live","purpose":"SPF/DKIM/DMARC, 500+ spam triggers, 98%+ inbox","sectionKey":"ai_accelerator","sectionTitle":"MAGNUM AI ACCELERATOR","tags":["OUTREACH","AI & INFRASTRUCTURE"],"url":"app.magnumvault.vip/email-supertool"},{"slug":"seo-aeo-geo-supertool","name":"SEO-AEO-GEO SuperTool","status":"live","purpose":"14 prompts, AI citation strategy","sectionKey":"ai_accelerator","sectionTitle":"MAGNUM AI ACCELERATOR","tags":["PUBLICITY","AI & INFRASTRUCTURE"],"url":"app.magnumvault.vip/seo"},{"slug":"capital-magnetism-diagnostic","name":"Capital Magnetism Diagnostic","status":"live","purpose":"Where you sit on the magnetism scale","sectionKey":"ai_accelerator","sectionTitle":"MAGNUM AI ACCELERATOR","tags":["PLAN & EXECUTE"],"url":"magnumvault.com/diagnostic"},{"slug":"rfc-finder-tool","name":"RFC Finder Tool","status":"in_development","purpose":"Right Fit Client finder","sectionKey":"ai_accelerator","sectionTitle":"MAGNUM AI ACCELERATOR","tags":["OUTREACH"]},{"slug":"ai-content-engine","name":"AI Content Engine","status":"in_development","purpose":"Video tools, avatar creation, content acceleration","sectionKey":"ai_accelerator","sectionTitle":"MAGNUM AI ACCELERATOR","tags":["AI & INFRASTRUCTURE","PUBLICITY"]}]},{"key":"interactive_toolkits","title":"INTERACTIVE TOOLKITS","path":"Dashboard > TOOLS > Interactive Toolkits","items":[{"slug":"acf-to-rfc-builder","name":"ACF to RFC Builder","status":"live","purpose":"5-ring Authentic Character Flywheel to Right Fit Client avatar, origin story, and story bank","sectionKey":"interactive_toolkits","sectionTitle":"INTERACTIVE TOOLKITS","tags":["PLAN & EXECUTE","OUTREACH"],"url":"app.magnumvault.vip/acf"},{"slug":"magnanimus-protocol","name":"MAGNANIMUS Protocol","status":"beta","purpose":"Operating discipline for elite execution. 10 steps, about 90 minutes. Step 2 in the four-step chain.","sectionKey":"interactive_toolkits","sectionTitle":"INTERACTIVE TOOLKITS","tags":["PLAN & EXECUTE"],"url":"app.magnumvault.vip/magnanimus"},{"slug":"the-opus-citadel-magnum-opus-onboarding","name":"The Opus Citadel (Magnum Opus Onboarding)","status":"new","purpose":"Deep onboarding interview. 7 questions, about 45 minutes. Produces your Magnum Opus Gold Document. Step 3 in the four-step chain.","sectionKey":"interactive_toolkits","sectionTitle":"INTERACTIVE TOOLKITS","tags":["PLAN & EXECUTE","WRITING"],"url":"app.magnumvault.vip/opus"},{"slug":"magnum-ikigai-synthesizer","name":"Magnum Ikigai Synthesizer","status":"new","purpose":"Four-phase design dialogue. Reads everything you have built in the vault and produces your Ikigai map. Step 4, the final step in the chain.","sectionKey":"interactive_toolkits","sectionTitle":"INTERACTIVE TOOLKITS","tags":["PLAN & EXECUTE"],"url":"app.magnumvault.vip/ikigai"},{"slug":"the-magnum-vault-credo","name":"The Magnum Vault CREDO","status":"new","purpose":"The positioning engine. Reads nine golden threads from across your vault and weaves them into a single positioning of your business as the answer your market is looking for. Produces the master positioning asset your webinar and sales page draw from. CREDO produces the positioning; it does not build the webinar.","sectionKey":"interactive_toolkits","sectionTitle":"INTERACTIVE TOOLKITS","tags":["WRITING","PUBLICITY"],"url":"app.magnumvault.vip/credo"},{"slug":"magnum-maven-matrix","name":"Magnum Maven Matrix","status":"live","purpose":"11-step authority positioning: content mastery and media positioning","sectionKey":"interactive_toolkits","sectionTitle":"INTERACTIVE TOOLKITS","tags":["PUBLICITY"],"url":"app.magnumvault.vip/maven"},{"slug":"s3-diagnostic-tool","name":"S3 Diagnostic Tool","status":"live","purpose":"Strategy + Story + Systems diagnostic","sectionKey":"interactive_toolkits","sectionTitle":"INTERACTIVE TOOLKITS","tags":["PLAN & EXECUTE"],"url":"magnumvault.com/diagnostic"},{"slug":"liberation-rate-calculator","name":"Liberation Rate Calculator","status":"live","purpose":"Liberation rate assessment","sectionKey":"interactive_toolkits","sectionTitle":"INTERACTIVE TOOLKITS","tags":["PLAN & EXECUTE"],"url":"app.magnumvault.vip/calculator"},{"slug":"reap-grid","name":"REAP Grid","status":"live","purpose":"Four quadrants: Eliminate, Replace, Protect, Amplify","sectionKey":"interactive_toolkits","sectionTitle":"INTERACTIVE TOOLKITS","tags":["PLAN & EXECUTE"],"url":"app.magnumvault.vip/grid"},{"slug":"rewards-validator","name":"REWARDS Validator","status":"live","purpose":"REWARDS framework validation","sectionKey":"interactive_toolkits","sectionTitle":"INTERACTIVE TOOLKITS","tags":["PLAN & EXECUTE"],"url":"app.magnumvault.vip/rewards"},{"slug":"zone-of-genius-amplifier","name":"Zone of Genius Amplifier","status":"live","purpose":"Strategic CEO toolkit. Feeds the Ikigai Synthesizer.","sectionKey":"interactive_toolkits","sectionTitle":"INTERACTIVE TOOLKITS","tags":["PLAN & EXECUTE"],"url":"app.magnumvault.vip/genius"},{"slug":"magnum-opus-planning-system","name":"Magnum Opus Planning System","status":"live","purpose":"Quarterly, weekly, daily planning journal. Open it from Dashboard > TOOLS > Interactive Toolkits.","sectionKey":"interactive_toolkits","sectionTitle":"INTERACTIVE TOOLKITS","tags":["PLAN & EXECUTE"]},{"slug":"magnum-rfc-extractor","name":"Magnum RFC Extractor","status":"beta","purpose":"Names the one person you are built to serve, judges your readiness, maps where they gather, produces outreach in your voice from your corpus. No cold scraping, no generic templates.","sectionKey":"interactive_toolkits","sectionTitle":"INTERACTIVE TOOLKITS","tags":["OUTREACH"],"url":"app.magnumvault.vip/rfc-extractor"}]},{"key":"linkedin_outreach","title":"LINKEDIN AND OUTREACH","path":"Dashboard > TOOLS > LinkedIn and Outreach","items":[{"slug":"linkedin-profile-toolkit","name":"LinkedIn Profile Toolkit","status":"live","purpose":"10 Magnets, 4 Authority Leaks, 24 Maven Types","sectionKey":"linkedin_outreach","sectionTitle":"LINKEDIN AND OUTREACH","tags":["LINKEDIN"],"url":"app.magnumvault.vip/linkedin-profile"},{"slug":"linkedin-attention-magnet","name":"LinkedIn Attention Magnet","status":"live","purpose":"10 enterprise playbooks","sectionKey":"linkedin_outreach","sectionTitle":"LINKEDIN AND OUTREACH","tags":["LINKEDIN"],"url":"app.magnumvault.vip/attention"},{"slug":"the-linkedin-humanizer-protocol","name":"The LinkedIn Humanizer Protocol","status":"live","purpose":"Also listed in AI Accelerator","sectionKey":"linkedin_outreach","sectionTitle":"LINKEDIN AND OUTREACH","tags":["LINKEDIN","WRITING","PUBLISHING"],"url":"app.magnumvault.vip/humanizer"},{"slug":"copywriting-reference-v2-0","name":"Copywriting Reference V2.0","status":"live","purpose":"Also listed in AI Accelerator","sectionKey":"linkedin_outreach","sectionTitle":"LINKEDIN AND OUTREACH","tags":["WRITING"],"url":"app.magnumvault.vip/copywriting"},{"slug":"the-linkedin-post-formatter","name":"The LinkedIn Post Formatter","status":"new","purpose":"Also listed in AI Accelerator","sectionKey":"linkedin_outreach","sectionTitle":"LINKEDIN AND OUTREACH","tags":["LINKEDIN","PUBLISHING"],"url":"app.magnumvault.vip/postformatter"},{"slug":"text-formatter","name":"Text Formatter","status":"new","purpose":"22 Unicode styles, live preview, character counter. Multi-platform (renamed from LinkedIn Text Formatter). Free, no login.","sectionKey":"linkedin_outreach","sectionTitle":"LINKEDIN AND OUTREACH","tags":["LINKEDIN","WRITING","PUBLISHING"],"url":"magnumnexus.io/text"},{"slug":"magnum-nexus-studio","name":"Magnum Nexus Studio","status":"new","purpose":"DM video, social video, screen recording with one-click branded share link","sectionKey":"linkedin_outreach","sectionTitle":"LINKEDIN AND OUTREACH","tags":["OUTREACH","LINKEDIN"],"url":"magnumnexus.io/studio"},{"slug":"universal-ai-search","name":"Universal AI Search","status":"new","purpose":"ChatGPT, Claude, Gemini, Perplexity side by side for research and hook ideation","sectionKey":"linkedin_outreach","sectionTitle":"LINKEDIN AND OUTREACH","tags":["AI & INFRASTRUCTURE"],"url":"magnumnexus.io/search"},{"slug":"crushingit-on-linkedin","name":"CRUSHiNGiT On LinkedIn","status":"in_development","purpose":"LinkedIn program","sectionKey":"linkedin_outreach","sectionTitle":"LINKEDIN AND OUTREACH","tags":["LINKEDIN"]},{"slug":"video-messaging-dm-funnel","name":"Video Messaging DM Funnel","status":"in_development","purpose":"Video DM outreach funnel","sectionKey":"linkedin_outreach","sectionTitle":"LINKEDIN AND OUTREACH","tags":["OUTREACH"]},{"slug":"rfc-global-scraper-crm","name":"RFC Global Scraper + CRM","status":"in_development","purpose":"RFC prospecting and CRM","sectionKey":"linkedin_outreach","sectionTitle":"LINKEDIN AND OUTREACH","tags":["OUTREACH"]}]},{"key":"magnum_nexus","title":"MAGNUM NEXUS","path":"Dashboard > TOOLS > Magnum Nexus","items":[{"slug":"get-your-own-magnum-nexus","name":"Get Your Own Magnum Nexus","status":"live","purpose":"Branded boardrooms and capital raising ecosystem","sectionKey":"magnum_nexus","sectionTitle":"MAGNUM NEXUS","tags":["OUTREACH","AI & INFRASTRUCTURE"],"url":"app.magnumvault.vip/nexus"},{"slug":"nexus-hub","name":"Nexus Hub","status":"live","purpose":"Flagship: calendar buttons, branded short URL, QR code from one form","sectionKey":"magnum_nexus","sectionTitle":"MAGNUM NEXUS","tags":["OUTREACH"],"url":"magnumnexus.io/hub"},{"slug":"meetlink","name":"MeetLink","status":"live","purpose":"Add-to-Calendar plus landing page for Google, Apple, Outlook, Office 365","sectionKey":"magnum_nexus","sectionTitle":"MAGNUM NEXUS","tags":["PLAN & EXECUTE","OUTREACH"],"url":"magnumnexus.io/meetlink"},{"slug":"magnumlink","name":"MagnumLink","status":"live","purpose":"Self-hosted URL shortener, custom slugs, UTM builder, click tracking. Custom domain mnex.link.","sectionKey":"magnum_nexus","sectionTitle":"MAGNUM NEXUS","tags":["OUTREACH","AI & INFRASTRUCTURE","PUBLISHING"],"url":"magnumnexus.io/magnumlink"},{"slug":"qr-generator","name":"QR Generator","status":"live","purpose":"Branded QR codes with title and color","sectionKey":"magnum_nexus","sectionTitle":"MAGNUM NEXUS","tags":["OUTREACH","PUBLISHING"],"url":"magnumnexus.io/qr"},{"slug":"magnum-nexus-studio","name":"Magnum Nexus Studio","status":"new","purpose":"Also listed in LinkedIn and Outreach","sectionKey":"magnum_nexus","sectionTitle":"MAGNUM NEXUS","tags":["OUTREACH","LINKEDIN"],"url":"magnumnexus.io/studio"},{"slug":"universal-ai-search","name":"Universal AI Search","status":"new","purpose":"Also listed in LinkedIn and Outreach","sectionKey":"magnum_nexus","sectionTitle":"MAGNUM NEXUS","tags":["AI & INFRASTRUCTURE"],"url":"magnumnexus.io/search"},{"slug":"thumbnail-og-card-generator","name":"Thumbnail / OG Card Generator","status":"new","purpose":"Social cards that unfurl on LinkedIn, X, iMessage, Slack","sectionKey":"magnum_nexus","sectionTitle":"MAGNUM NEXUS","tags":["PUBLICITY","OUTREACH","PUBLISHING"],"url":"magnumnexus.io/card"},{"slug":"text-formatter","name":"Text Formatter","status":"new","purpose":"Also listed in LinkedIn and Outreach","sectionKey":"magnum_nexus","sectionTitle":"MAGNUM NEXUS","tags":["LINKEDIN","WRITING","PUBLISHING"],"url":"magnumnexus.io/text"}]},{"key":"library","title":"LIBRARY","path":"Dashboard > LIBRARY","items":[{"slug":"the-tao-of-capital-attraction","name":"The Tao of Capital Attraction","status":"live","purpose":"Foundational philosophy. Trilogy Book I.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"url":"taoofcapital.com","libraryGroup":"your"},{"slug":"the-stoic-thinking-mans-journal","name":"The Stoic Thinking Mans Journal","status":"live","purpose":"Daily practice journal","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"url":"stoicthinkingman.com","libraryGroup":"your"},{"slug":"unpacking-the-titans","name":"Unpacking The Titans","status":"coming_soon","purpose":"50 traders dissected. Trilogy Book II, publishing.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"your"},{"slug":"the-saving-seven-protocol","name":"The Saving Seven Protocol","status":"coming_soon","purpose":"Upcoming, by Lauralouise","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"your"},{"slug":"10-steps-to-raising-capital","name":"10 Steps to Raising Capital","status":"coming_soon","purpose":"Upcoming, by Anric","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"your"},{"slug":"the-capital-odyssey","name":"The Capital Odyssey","status":"live","purpose":"From Capital Magnetism Collection: Capital and Wealth.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/odyssey"},{"slug":"the-shift-that-matters","name":"The Shift That Matters","status":"live","purpose":"From Capital Magnetism Collection: Capital and Wealth.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/shift"},{"slug":"science-of-getting-rich","name":"Science of Getting Rich","status":"live","purpose":"From Capital Magnetism Collection: Capital and Wealth.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/book-science"},{"slug":"think-and-grow-rich","name":"Think and Grow Rich","status":"live","purpose":"From Capital Magnetism Collection: Capital and Wealth.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/napoleon"},{"slug":"acres-of-diamonds","name":"Acres of Diamonds","status":"live","purpose":"From Capital Magnetism Collection: Capital and Wealth.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/book-diamonds"},{"slug":"franklins-way-to-wealth","name":"Franklins Way to Wealth","status":"live","purpose":"From Capital Magnetism Collection: Capital and Wealth.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/book-franklin"},{"slug":"barnum-money-mastery","name":"Barnum Money Mastery","status":"live","purpose":"From Capital Magnetism Collection: Capital and Wealth.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/book-barnum"},{"slug":"hidden-treasures","name":"Hidden Treasures","status":"live","purpose":"From Capital Magnetism Collection: Capital and Wealth.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/treasures"},{"slug":"influence-transformed","name":"Influence Transformed","status":"live","purpose":"From Capital Magnetism Collection: Influence.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/influence"},{"slug":"blair-warren-27-words","name":"Blair Warren 27 Words","status":"live","purpose":"From Capital Magnetism Collection: Influence.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/blairwarren"},{"slug":"the-greatest-salesman","name":"The Greatest Salesman","status":"live","purpose":"From Capital Magnetism Collection: Influence.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/salesman"},{"slug":"the-art-of-war","name":"The Art of War","status":"live","purpose":"From Capital Magnetism Collection: Influence.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/book-art-of-war"},{"slug":"meditations","name":"Meditations","status":"live","purpose":"From Capital Magnetism Collection: Stoic.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/book-meditations"},{"slug":"letters-from-a-stoic","name":"Letters from a Stoic","status":"live","purpose":"From Capital Magnetism Collection: Stoic.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/book-seneca-letters"},{"slug":"almanack-of-naval-ravikant","name":"Almanack of Naval Ravikant","status":"live","purpose":"From Capital Magnetism Collection: Stoic.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/book-naval-ravikant"},{"slug":"as-a-man-thinketh","name":"As a Man Thinketh","status":"live","purpose":"From Capital Magnetism Collection: Stoic.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/book-as-a-man-thinketh"},{"slug":"the-alchemist","name":"The Alchemist","status":"live","purpose":"From Capital Magnetism Collection: Stoic.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/alchemist"},{"slug":"the-lean-startup","name":"The Lean Startup","status":"live","purpose":"From Capital Magnetism Collection: Business.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/lean-startup"},{"slug":"business-by-the-book","name":"Business by THE Book","status":"live","purpose":"From Capital Magnetism Collection: Business.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/thebook"},{"slug":"the-e-myth-revisited","name":"The E-Myth Revisited","status":"live","purpose":"From Capital Magnetism Collection: Business.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/gerber-emyth"},{"slug":"the-war-of-art","name":"The War of Art","status":"live","purpose":"From Capital Magnetism Collection: Business.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/book-athe-war-of-art"},{"slug":"10x-is-easier-than-2x","name":"10x Is Easier Than 2x","status":"live","purpose":"From Capital Magnetism Collection: Business.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/book-10x"},{"slug":"buy-back-your-time","name":"Buy Back Your Time","status":"live","purpose":"From Capital Magnetism Collection: Business.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/book-buy-back-time"},{"slug":"how-they-succeeded","name":"How They Succeeded","status":"live","purpose":"From Capital Magnetism Collection: Business.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/book-succeed"},{"slug":"pushing-to-the-front","name":"Pushing to the Front","status":"live","purpose":"From Capital Magnetism Collection: Business.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"collection","url":"magnumvault.vip/book-pushing-to-the-front"},{"slug":"gulf-cultural-capital-blueprint","name":"Gulf Cultural Capital Blueprint","status":"live","purpose":"From Regional Capital Attraction Blueprints.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"your","url":"magnumvault.vip/book-gulf"},{"slug":"swiss-precision-protocol","name":"Swiss Precision Protocol","status":"live","purpose":"From Regional Capital Attraction Blueprints.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"your","url":"magnumvault.vip/book-swiss"},{"slug":"asian-relationship-mastery","name":"Asian Relationship Mastery","status":"live","purpose":"From Regional Capital Attraction Blueprints.","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"your","url":"magnumvault.vip/book-asia"},{"slug":"capital-attraction-lauralouise","name":"Capital Attraction (Lauralouise)","status":"live","purpose":"Stop trading time for permission","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"url":"magnumvault.com/magnet","libraryGroup":"your"},{"slug":"crushingit-quick-start-guide","name":"CRUSHiNGiT Quick Start Guide","status":"live","purpose":"Open it from Dashboard > LIBRARY > Guides and Resources","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"libraryGroup":"your"},{"slug":"relationship-raise-vip","name":"Relationship Raise VIP","status":"live","purpose":"VIP edition of The Relationship Raise","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"url":"magnumvault.com/relationship","libraryGroup":"your"},{"slug":"365-stoic-wisdom-calendar","name":"365 Stoic Wisdom Calendar","status":"live","purpose":"Daily stoic wisdom","sectionKey":"library","sectionTitle":"LIBRARY","tags":["LIBRARY"],"url":"app.magnumvault.vip/stoic365","libraryGroup":"your"}]},{"key":"live_sessions","title":"LIVE","path":"Dashboard > LIVE","items":[{"slug":"live-room","name":"Live Room","status":"live","purpose":"Live virtual room for the weekly Wednesday rotation. Replays archived in the dashboard.","sectionKey":"live_sessions","sectionTitle":"LIVE","tags":["LIVE"],"url":"app.magnumvault.vip/live"},{"slug":"live-calendar","name":"Live Calendar","status":"live","purpose":"Add the Wednesday cadence to Google, Apple, Outlook, or Office 365","sectionKey":"live_sessions","sectionTitle":"LIVE","tags":["LIVE"],"url":"go.magnumnexus.io/MVP"},{"slug":"1st-wednesday-mvp-intensive","name":"1st Wednesday: MVP Intensive","status":"live","purpose":"Monthly live session hosted by Anric and Lauralouise. Content rotates across the S3 framework.","sectionKey":"live_sessions","sectionTitle":"LIVE","tags":["LIVE"],"url":"app.magnumvault.vip/live"},{"slug":"2nd-wednesday-ll-strategy-accelerator","name":"2nd Wednesday: LL Strategy Accelerator","status":"live","purpose":"Monthly live session hosted by Lauralouise Blatt. Strategy-focused.","sectionKey":"live_sessions","sectionTitle":"LIVE","tags":["LIVE"],"url":"app.magnumvault.vip/live"},{"slug":"3rd-wednesday-anric-open-office-hours","name":"3rd Wednesday: Anric Open Office Hours","status":"live","purpose":"Monthly open office hours hosted by Anric Blatt. Member Q&A.","sectionKey":"live_sessions","sectionTitle":"LIVE","tags":["LIVE"],"url":"app.magnumvault.vip/live"},{"slug":"weekly-peer-networking","name":"Weekly Peer Networking","status":"live","purpose":"On Magnum Nexus","sectionKey":"live_sessions","sectionTitle":"LIVE","tags":["LIVE"]}]},{"key":"community","title":"COMMUNITY AND EVENTS","path":"Dashboard > LIVE","items":[{"slug":"oro-vip","name":"OrO VIP","status":"live","purpose":"Your personal AI copilot inside the vault. Voice or text. Answers from your encrypted MVP data.","sectionKey":"community","sectionTitle":"COMMUNITY AND EVENTS","tags":["COMMUNITY"],"url":"app.magnumvault.vip/oro"},{"slug":"mvp-annual-summit","name":"MVP Annual Summit","status":"live","purpose":"Flagship annual event, Q4 2026, Blue Ridge Mountains. Reserve a spot by emailing partners@magnumvault.com","sectionKey":"community","sectionTitle":"COMMUNITY AND EVENTS","tags":["COMMUNITY"]},{"slug":"cabo-mastermind","name":"Cabo Mastermind","status":"live","purpose":"Annual VIP mastermind, by application. Apply by emailing partners@magnumvault.com","sectionKey":"community","sectionTitle":"COMMUNITY AND EVENTS","tags":["COMMUNITY"]},{"slug":"magnum-nexus-private-room","name":"Magnum Nexus Private Room","status":"live","purpose":"Member community room","sectionKey":"community","sectionTitle":"COMMUNITY AND EVENTS","tags":["COMMUNITY"]},{"slug":"mvp-feedback","name":"MVP Feedback","status":"new","purpose":"Report broken links, suggest improvements, request content edits or new additions. Use this whenever something in the vault looks wrong.","sectionKey":"community","sectionTitle":"COMMUNITY AND EVENTS","tags":["COMMUNITY"],"url":"app.magnumvault.vip/feedback"},{"slug":"record-testimonial","name":"Record Testimonial","status":"live","purpose":"Record a short video testimonial about your MVP experience","sectionKey":"community","sectionTitle":"COMMUNITY AND EVENTS","tags":["COMMUNITY"],"url":"magnumvault.com/testimonial"},{"slug":"contact-support","name":"Contact Support","status":"live","purpose":"Email support@magnumvault.com for help, billing, or anything urgent","sectionKey":"community","sectionTitle":"COMMUNITY AND EVENTS","tags":["COMMUNITY"]},{"slug":"terms-and-privacy","name":"Terms and Privacy","status":"live","purpose":"Magnum Vault terms of service and privacy policy","sectionKey":"community","sectionTitle":"COMMUNITY AND EVENTS","tags":["COMMUNITY"],"url":"magnumvault.com/legal"},{"slug":"member-directory","name":"Member Directory","status":"in_development","purpose":"Member directory","sectionKey":"community","sectionTitle":"COMMUNITY AND EVENTS","tags":["COMMUNITY"]},{"slug":"certifications","name":"Certifications","status":"coming_soon","purpose":"Level I Foundation, Level II Practitioner, Level III Authority","sectionKey":"community","sectionTitle":"COMMUNITY AND EVENTS","tags":["COMMUNITY"]}]},{"key":"workers","title":"BACKING WORKERS (internal)","path":"","items":[]}]},"/data/tags.json":{"_generated":"Generated by scripts/sync-catalog.mjs. Do not hand-edit this file or anything under public/data/. Edit the source instead and re-run the sync script. Source: data/tags.json.","_comment":"slug -> array of JOB tags. Hand-editable. Retagging a tool is a data edit here, never a code edit. Slug = lowercase name, non-alphanumerics collapsed to hyphens (see scripts/sync-catalog.mjs slugify). Section items (programs, curriculum, library, live_sessions, community) are NOT listed here; they get one of the two derived SECTION tags automatically, or none at all for live_sessions/community (see _portalAudit below).","_portalAudit":"PORTALS cap, 2026-07-30, direct from Anric, supersedes an earlier provisional COMPLIANCE-into-PUBLISHING grouping that was never shipped. LIVE and COMMUNITY are removed as portals entirely, not folded into anything: LIVE duplicates panel 05 LIVE (a portal that repeats a panel is wasted rail), and COMMUNITY did not earn a portal in his own words. This leaves exactly ten portals: the 8 job tags below plus PROGRAMS and LIBRARY. The live_sessions and community section items are NOT reassigned to another portal; they keep the LIVE/COMMUNITY tag scripts/sync-catalog.mjs auto-assigns (via SECTION_TAG_MAP, so search and telemetry can still see them) but that tag is no longer rendered as a portal. Every item that lived under those two facets is routed elsewhere: live_sessions items are shown in panel 05 LIVE; community items map to header chrome (OrO button, Feedback button), the QUICK ACTIONS box (Record Testimonial, Contact Support, Terms and Privacy), and the QUICK LINKS Events tile (MVP Annual Summit, Cabo Mastermind). Magnum Nexus Private Room has no chrome home and is reachable by search only, flagged rather than silently dropped. Member Directory and Certifications are unbuilt and render exactly as before (no url, not clickable). This is NOT a tagging audit: which destination belongs in which of the ten buckets below is inherited from the prior grouping, unaudited, and Anric has asked for a real audit pass as separate future work.","jobTags":["WRITING","PUBLISHING","PUBLICITY","OUTREACH","COMPLIANCE","PLAN & EXECUTE","AI & INFRASTRUCTURE","LINKEDIN"],"sectionTags":["PROGRAMS","LIBRARY"],"itemTags":{"the-ignis-protocol":["AI & INFRASTRUCTURE","WRITING"],"storyselling-toolkit-ignis-step-6":["WRITING"],"storyselling-field-guide":["WRITING"],"storypolisher":["WRITING"],"the-magnum-etiquette-protocol":["WRITING","COMPLIANCE"],"the-compliance-reviewer":["COMPLIANCE"],"copywriting-reference-v2-0":["WRITING"],"the-linkedin-humanizer-protocol":["LINKEDIN","WRITING","PUBLISHING"],"the-linkedin-post-formatter":["LINKEDIN","PUBLISHING"],"podcast-preparation-tool":["PUBLICITY"],"webinar-creator":["PUBLICITY","PLAN & EXECUTE"],"claudebrain-system":["AI & INFRASTRUCTURE"],"claude-infinite-protocol":["AI & INFRASTRUCTURE"],"the-prompt-arsenal":["AI & INFRASTRUCTURE"],"email-delivery-super-tool":["OUTREACH","AI & INFRASTRUCTURE"],"seo-aeo-geo-supertool":["PUBLICITY","AI & INFRASTRUCTURE"],"capital-magnetism-diagnostic":["PLAN & EXECUTE"],"rfc-finder-tool":["OUTREACH"],"ai-content-engine":["AI & INFRASTRUCTURE","PUBLICITY"],"acf-to-rfc-builder":["PLAN & EXECUTE","OUTREACH"],"magnanimus-protocol":["PLAN & EXECUTE"],"the-opus-citadel-magnum-opus-onboarding":["PLAN & EXECUTE","WRITING"],"magnum-ikigai-synthesizer":["PLAN & EXECUTE"],"the-magnum-vault-credo":["WRITING","PUBLICITY"],"magnum-maven-matrix":["PUBLICITY"],"s3-diagnostic-tool":["PLAN & EXECUTE"],"liberation-rate-calculator":["PLAN & EXECUTE"],"reap-grid":["PLAN & EXECUTE"],"rewards-validator":["PLAN & EXECUTE"],"zone-of-genius-amplifier":["PLAN & EXECUTE"],"magnum-opus-planning-system":["PLAN & EXECUTE"],"magnum-rfc-extractor":["OUTREACH"],"linkedin-profile-toolkit":["LINKEDIN"],"linkedin-attention-magnet":["LINKEDIN"],"text-formatter":["LINKEDIN","WRITING","PUBLISHING"],"magnum-nexus-studio":["OUTREACH","LINKEDIN"],"universal-ai-search":["AI & INFRASTRUCTURE"],"crushingit-on-linkedin":["LINKEDIN"],"video-messaging-dm-funnel":["OUTREACH"],"rfc-global-scraper-crm":["OUTREACH"],"get-your-own-magnum-nexus":["OUTREACH","AI & INFRASTRUCTURE"],"nexus-hub":["OUTREACH"],"meetlink":["PLAN & EXECUTE","OUTREACH"],"magnumlink":["OUTREACH","AI & INFRASTRUCTURE","PUBLISHING"],"qr-generator":["OUTREACH","PUBLISHING"],"thumbnail-og-card-generator":["PUBLICITY","OUTREACH","PUBLISHING"]}},"/data/link-health.json":{"_generated":"Generated by scripts/sync-catalog.mjs. Do not hand-edit this file or anything under public/data/. Edit the source instead and re-run the sync script. Source: data/link-health.json.","_comment":"Data-driven dead-link detection. public/assets/app.js reads this file at load and matches every rendered item's url against these rules; nothing is hardcoded per-item in JS. A match renders a DEAD badge and suppresses the clickable link, regardless of which item eventually carries a matching url.","deadRules":[{"id":"rampup-vip-sunset","description":"rampup.vip: whole domain NXDOMAIN since 13 June sunset","matchType":"host","host":"rampup.vip"},{"id":"ignis-api-bare-hostname","description":"bare *.ignis-api.workers.dev hostname with no path: service is up but / is a 404","matchType":"bareWorkersDevHost","hostSuffix":".ignis-api.workers.dev"},{"id":"mnex-link-retired","description":"mnex.link: retired and spam-flagged, canonical shortener is go.magnumnexus.io","matchType":"host","host":"mnex.link"}]},"/data/releases.json":[{"kind":"new","body":"The Magnum RFC Extractor is live. It reads your private Magnum corpus, distills the Right Fit Client you were built to attract, judges whether you are ready to attract them, and maps where they already gather. Then, for each prospect, it produces the outreach in your voice. No cold scraping. No generic templates. Only what is yours.","url":"https://app.magnumvault.vip/rfc-extractor","linkText":"Magnum RFC Extractor"},{"kind":"new","body":"The biggest release of the quarter is live: we have moved off obv.io entirely. All Wednesday sessions, walk-in meetings, and live trainings now run on our own in-house platform inside the vault. Better security, tighter integration with your member profile, and instantaneous live casting. The old obv.io URLs are dead; everything routes through app.magnumvault.vip/live now.","url":"https://app.magnumvault.vip/live","linkText":"app.magnumvault.vip/live"},{"kind":"new","body":"The Magnum Cafe is open at cafe.magnumvault.com. Thursdays at 10:00 AM ET on our new in-house live platform. Each week we pick one MVP subject and teach it in the open. It is our weekly outreach to the wider community, so it is a great place to bring a guest and meet new people. Members always welcome.","url":"https://cafe.magnumvault.com","linkText":"Magnum Cafe"},{"kind":"new","body":"Daily Stoic 365 is live. A new wisdom every day, voice-matched to operators. Auto-pops once per day so you cannot miss it, with a re-open button on the welcome strip if you want to read it again.","url":"https://app.magnumvault.vip/stoic365","linkText":"Daily Stoic 365"},{"kind":"new","body":"The Workbench is live as its own section on the dashboard. Rough betas that are usable today but still rough at the edges. Three live: Motivation Engine, Webinar Toolkit, Podcast Prep. Your feedback shapes the next iteration.","url":"https://app.magnumvault.vip/motivation","linkText":"Motivation Engine"},{"kind":"new","body":"Find by Topic video browser is live. Search by tag across every program module in the vault. Click a tag, get the videos that cover that topic across MAGNANIMUS, RAMP UP, REAP, CRUSHiNGiT, and the 3-Day MBA. Collapsed by default; expand when you want to browse.","url":"https://app.magnumvault.vip/dashboard#sec-find-by-topic","linkText":"Find by Topic video browser"},{"kind":"update","body":"Catalog cleanup: every video tag re-mapped to a clean controlled vocabulary of 10 topic areas (identity, story, capital attraction, objections, funnels, RFC, ACF, content, influence, systems). No more orphaned single-use tags. Search now actually finds things."},{"kind":"update","body":"Dashboard restructure: the bottom roadmap area is now a four-card row covering Tools in Development, The Workbench, Upcoming Clinics, and Submit an Idea. Clear separation between \"use today, rough\" and \"coming next\"."},{"kind":"new","body":"The Magnum Vault Map is live. Your dashboard is now an interconnected spine showing IGNIS, MAGNANIMUS, Opus Citadel, the Ikigai Synthesizer, and the Magnum Opus Planning System as one journey. Each protocol writes to your client-encrypted vault. The map shows where you are, what you have completed, and what is next.","url":"https://app.magnumvault.vip/dashboard","linkText":"Magnum Vault Map"},{"kind":"new","body":"The Magnum Ikigai Synthesizer is live. Reads across your encrypted MVP data vault and outputs your Ikigai map: the bridge between everything you have built and the Magnum Opus you are designing next.","url":"https://app.magnumvault.vip/ikigai","linkText":"Magnum Ikigai Synthesizer"},{"kind":"beta","body":"The Webinar Toolkit is live in beta. Build your Perfect Webinar in seven phases: the destination first, the 2am domino, the three secrets, the stories that break each belief, the teach, the stack, the calm close. Interview-led. Voice-matched. Reverse-engineered from your offer, never assembled from a content pile.","url":"https://app.magnumvault.vip/webinar","linkText":"Webinar Toolkit"},{"kind":"beta","body":"Podcast Prep is live in beta. Walk in ready. The toolkit reads your vault and prepares you for the appearance: positioning for the room, the stories to tell, the questions to send the host, the questions to prep for, your open and close, and the compliance landmines to handle with care. Cues, not scripts.","url":"https://app.magnumvault.vip/podcast","linkText":"Podcast Prep"},{"kind":"new","body":"Opus Citadel is live. The structured intake that turns vague ambition into a defined Magnum Opus and feeds it directly into the Planning System.","url":"https://app.magnumvault.vip/opus","linkText":"Opus Citadel"},{"kind":"update","body":"Magnum Opus Planning System v2.5 is live. Quarterly MAP, weekly Brain Dump, daily execution. Saves to your encrypted MVP data vault for cross-device sync. PWA-ready for phone install.","url":"https://app.magnumvault.vip/planner","linkText":"Magnum Opus Planning System"},{"kind":"update","body":"MVP Live Event Dashboard is deployed. All Wednesday sessions, trainings, and one-on-one meetings now run inside the vault. The old external meeting portal that required a separate magic link is retired.","url":"https://app.magnumvault.vip/live","linkText":"MVP Live Event Dashboard"},{"kind":"new","body":"StoryPolisher is live. Paste any draft, get a three-section critique against 250 craft principles drawn from the world's greatest speeches, plus an optional polished redraft.","url":"https://app.magnumvault.vip/storypolish","linkText":"StoryPolisher"},{"kind":"update","body":"Magnum Maven Matrix received a major update. Your 11-step authority positioning now stores every selection in your encrypted MVP data vault for deeper access and cross-tool integration.","url":"https://app.magnumvault.vip/maven","linkText":"Magnum Maven Matrix"},{"kind":"update","body":"Zone of Genius Amplifier has been updated. Your work writes to your encrypted MVP data vault, ready for the Ikigai Synthesizer and downstream toolkits.","url":"https://app.magnumvault.vip/genius","linkText":"Zone of Genius Amplifier"},{"kind":"beta","body":"Scaling a business that does not feel like yours? That split between what you build and who you are quietly kills second-half founders. The MAGNANIMUS PROTOCOL closes it. Live in beta.","url":"https://app.magnumvault.vip/magnanimus","linkText":"MAGNANIMUS PROTOCOL"},{"kind":"new","body":"MVP Nexus is live. Wednesday 11 AM ET sessions and walk-in private meetings now hosted inside the vault at app.magnumvault.vip/live. Obvio retired.","url":"https://app.magnumvault.vip/live","linkText":"MVP Nexus"},{"kind":"new","body":"Storyselling Field Guide is live. The 25 craft moves from the King Charles speech, with the live masterclass embedded.","url":"https://app.magnumvault.vip/storyselling2","linkText":"Storyselling Field Guide"},{"kind":"new","body":"Replay Library is live. Every MVP live session, deep-linkable by date, auto-scroll on click.","url":"https://app.magnumvault.vip/replays","linkText":"Replay Library"},{"kind":"new","body":"Magnum Nexus Studio v1.3.12 is live. DM video, social video and screen recording. One-click branded share link with custom CTA."},{"kind":"new","body":"Universal AI Search is live. ChatGPT, Claude, Gemini and Perplexity answers in one tab."},{"kind":"new","body":"Thumbnail / OG Card Generator is live. Make every link unfurl beautifully on LinkedIn, X, iMessage, Slack."},{"kind":"new","body":"MVP Dashboard V2 deployed. New layout, capability matrix, IGNIS hero, Capital Magnet feature, world clock, full-width header."},{"kind":"new","body":"Storyselling Toolkit voice-matched build pipeline."},{"kind":"new","body":"Compliance Reviewer ships 10 hard-fail rule audits."},{"kind":"new","body":"LinkedIn Humanizer + Post Formatter chain quartet."},{"kind":"new","body":"Magnum Etiquette Protocol active."},{"kind":"update","body":"Copywriting Reference V2.0 expanded to 30,000 words."},{"kind":"soon","body":"StorySelling Clinic opens Q2 2026."},{"kind":"soon","body":"AI Avatar Studio in development for Q3 2026."},{"kind":"note","body":"Vault price stays flat as catalog grows."}],"/data/replays.json":[{"date":"JUL 09","title":"Saving Seven Health Protocol.","slug":"2026-07-09-saving-seven","series":"special","url":"https://app.magnumvault.vip/replays#2026-07-09-saving-seven"},{"date":"JUN 10","title":"MVP. June 10, 2026.","slug":"2026-06-10-mvp","series":"strategy","url":"https://app.magnumvault.vip/replays"},{"date":"JUN 04","title":"Magnum Cafe. June 4, 2026.","slug":"2026-06-04-magnum-cafe","series":"special","url":"https://app.magnumvault.vip/replays#2026-06-04-magnum-cafe"},{"date":"JUN 03","title":"MVP Live. June 3, 2026.","slug":"2026-06-03-mvp-live","series":"intensive","url":"https://app.magnumvault.vip/replays#2026-06-03-mvp-live"},{"date":"MAY 13","title":"MVP - May 13, 2026","slug":"2026-05-13-strategy","series":"strategy","url":"https://app.magnumvault.vip/replays#2026-05-13-strategy"},{"date":"MAY 06","title":"Storyselling. The King's Speech.","slug":"2026-05-06-kings-speech","series":"intensive","url":"https://app.magnumvault.vip/storyselling2"},{"date":"APR 30","title":"Capital Cafe.","slug":"2026-04-30-capital-cafe","series":"special","url":"https://app.magnumvault.vip/replays#2026-04-30-capital-cafe"},{"date":"APR 10","title":"Speakeasy.","slug":"2026-04-10-speakeasy","series":"special","url":"https://app.magnumvault.vip/replays#2026-04-10-speakeasy"},{"date":"APR 08","title":"MVP Intensive: Session 2.","slug":"2026-04-08-session-2","series":"intensive","url":"https://app.magnumvault.vip/replays#2026-04-08-session-2"},{"date":"APR 01","title":"Intake Call.","slug":"2026-04-01-intake","series":"intensive","url":"https://app.magnumvault.vip/replays#2026-04-01-intake"}],"/data/note.json":{"_generated":"Generated by scripts/sync-catalog.mjs. Do not hand-edit this file or anything under public/data/. Edit the source instead and re-run the sync script. Source: data/note.json.","_comment":"ALERTS panel (renamed from MVP NOTE, 2026-07-30). Each section now carries an id so an individual item is addressable (a future personalisation pass can target/hide/reorder one entry without touching the others). leadDefault renders when no member name is known (getMagnumUser() absent, not authenticated, or no name on file); leadTemplate renders with {name} replaced by the member's first name when one is known. Never fabricate a name: the neutral leadDefault is the only fallback, there is no invented default name.","leadDefault":"Welcome back.","leadTemplate":"Welcome back, {name}.","sections":[{"id":"calendar","title":"The calendar","body":"MVP Intensive on August 5. LL's Strategy Accelerator on August 12. Anric's Open Office Hours on August 19. All Wednesdays, 11:00 ET, 16:00 UTC, 19:00 Gulf, 90 minutes.","links":[]},{"id":"addresses-changed","title":"Two addresses changed","body":"We are off obv.io completely. Every session, every walk-in meeting and every live training now runs inside the vault at app.magnumvault.vip/live. The Magnum Cafe has moved to cafe.magnumvault.com, Thursdays at 10:00 AM ET. If you have an old link bookmarked, replace it.","links":[{"text":"app.magnumvault.vip/live","url":"https://app.magnumvault.vip/live"},{"text":"cafe.magnumvault.com","url":"https://cafe.magnumvault.com"}]},{"id":"provider-agnostic","title":"The change you cannot see, and the one that matters most","body":"Your tools are no longer tied to a single AI provider. CREDO, the RFC Extractor and the rest can now run on Claude, Grok, Gemini, ChatGPT or Kimi. It was months of work and none of it shows on screen. The point is simple. When one provider goes down, gets capped, or prices itself out, your tools keep working. You should never lose a working day because someone else had an outage.","links":[{"text":"CREDO","url":"https://app.magnumvault.vip/credo"},{"text":"RFC Extractor","url":"https://app.magnumvault.vip/rfc-extractor"}]},{"id":"three-new-instruments","title":"Three new instruments","body":"The Magnum RFC Extractor names the one person you were built to serve, judges whether you are ready to reach them, maps where they already gather, then writes the outreach in your voice. The Magnum Ikigai Synthesizer reads across everything you have already built and produces the bridge to the Magnum Opus you are designing next. Opus Citadel is seven questions and forty-five minutes that produce your Gold Document.","links":[{"text":"Magnum RFC Extractor","url":"https://app.magnumvault.vip/rfc-extractor"},{"text":"Magnum Ikigai Synthesizer","url":"https://app.magnumvault.vip/ikigai"},{"text":"Opus Citadel","url":"https://app.magnumvault.vip/opus"}]},{"id":"introcard-live","title":"IntroCard.ai is live","body":"A branded introduction card with a recorded video and contact capture, so a first hello does some of the work for you. It is at introcard.ai.","links":[{"text":"introcard.ai","url":"https://introcard.ai"}]},{"id":"two-books-shipped","title":"Two books shipped this week","body":"How to Become Dangerously Good at Attracting People and Money, by Anric. The Stoic Thinking Woman's Journal, by Lauralouise and Anric. Both are on books.magnumvault.com.","links":[{"text":"The Stoic Thinking Woman's Journal","url":"https://stoicthinkingwoman.com"},{"text":"books.magnumvault.com","url":"https://books.magnumvault.com"}]},{"id":"cutting-room","title":"In the cutting room","body":"We are building something that takes a long recording and cuts it into social-ready video on its own. Not finished yet. Worth knowing it is coming.","links":[]},{"id":"workbench-beta","title":"On The Workbench, in beta","body":"Webinar Toolkit, Podcast Prep and the Motivation Engine. Usable today, rough at the edges. Use them, break them, tell us what you find.","links":[{"text":"Webinar Toolkit","url":"https://app.magnumvault.vip/webinar"},{"text":"Podcast Prep","url":"https://app.magnumvault.vip/podcast"},{"text":"Motivation Engine","url":"https://app.magnumvault.vip/motivation"}]},{"id":"smaller-things","title":"Smaller things that landed","body":"Daily Stoic 365, a new entry every day. Find by Topic, which searches by tag across every program module in the vault. And your dashboard is now the Magnum Vault Map, showing the four protocols (IGNIS, MAGNANIMUS, Opus Citadel, Ikigai Synthesizer) and the Magnum Opus Planning System as one connected spine instead of a list.","links":[{"text":"Daily Stoic 365","url":"https://app.magnumvault.vip/stoic365"},{"text":"IGNIS","url":"https://app.magnumvault.vip/ignis"},{"text":"MAGNANIMUS","url":"https://app.magnumvault.vip/magnanimus"},{"text":"Opus Citadel","url":"https://app.magnumvault.vip/opus"},{"text":"Ikigai Synthesizer","url":"https://app.magnumvault.vip/ikigai"},{"text":"Magnum Opus Planning System","url":"https://app.magnumvault.vip/planner"}]},{"id":"rampup-fix","title":"One thing we are fixing","body":"RAMP UP is moving. The old rampup.vip address has expired and the ten protocols are being rebuilt inside the vault, where the rest of your programs already live. The content is safe. Nothing is lost. We will tell you the moment the new address is up.","links":[]},{"id":"more-than-fits-here","title":"There is more than fits here","body":"The Release Feed on the left carries the full list in order, every shipped item. This note is only the headlines.","links":[]},{"id":"feedback-prompt","title":"","body":"If something looks wrong, use the Feedback button in the top bar. Every shipping item on this dashboard started as a member request.","links":[{"text":"Feedback","url":"https://app.magnumvault.vip/feedback"}]},{"id":"ps-cafe","title":"P.S.","body":"P.S. Cafe is Thursdays at 10:00 AM ET at cafe.magnumvault.com. It is the easiest room to bring a guest into.","links":[{"text":"cafe.magnumvault.com","url":"https://cafe.magnumvault.com"}]}],"signoff":"Anric and Lauralouise"},"/data/orb.json":{"_generated":false,"_comment":"HAND-EXTRACTED, not generated. The 8 gears + 1 center were pulled 2026-07-30 by curling https://app.magnumvault.vip/dashboard and reading the .gear-cluster-zone markup directly (view-source, no JS execution). The 4 corners + 1 background were added the same day from the real GHL section source supplied directly (docs/reference/v3-source/02B_IDENTITY-ORBIT-ROTATION.html, V3.9.22), which is where their sourceUrl CDN paths come from - not curled from the rendered page. Provenance note, read before touching the gear count below: the live page renders exactly 8 real <a class=\"gear ...\"> elements (4 big compass cardinals N/E/S/W plus 4 small intercardinals NE/SE/SW/NW) around one non-link center mark, plus 4 corner-shortcut <a> elements and 1 background texture - 14 unique image assets total. This file lists every one of those real elements and nothing else. It does not pad the array to hit a different number.","extractedOn":"2026-07-30","center":{"label":"Magnum Opus","ariaLabel":"Magnum Opus","image":{"local":"assets/orb/center-mvp.webp","originalFormat":"png 1000x1000, opaque, no alpha in use","optimised":"resized to 400x400 and encoded webp q82; 89% smaller than source. Original always re-fetchable from sourceUrl."}},"gears":[{"step":1,"size":"big","pos":"n","class":"gear big pos-n","href":"https://app.magnumvault.vip/ignis","ariaLabel":"IGNIS Protocol","label":"IGNIS Protocol","tool":"ignis","image":{"local":"assets/orb/ignis.webp","originalFormat":"png 1000x1000, opaque, no alpha in use","optimised":"resized to 400x400 and encoded webp q82; 89% smaller than source. Original always re-fetchable from sourceUrl."}},{"step":2,"size":"small","pos":"ne","class":"gear small pos-ne","href":"https://app.magnumvault.vip/genius","ariaLabel":"Zone of Genius Amplifier","label":"Zone of Genius","tool":"genius","image":{"local":"assets/orb/genius.webp","originalFormat":"png 1000x1000, opaque, no alpha in use","optimised":"resized to 400x400 and encoded webp q82; 89% smaller than source. Original always re-fetchable from sourceUrl."}},{"step":3,"size":"big","pos":"e","class":"gear big pos-e","href":"https://app.magnumvault.vip/magnanimus","ariaLabel":"MAGNANIMUS Protocol","label":"MAGNANIMUS","tool":"magnanimus","image":{"local":"assets/orb/magnanimus.webp","originalFormat":"png 1000x1000, opaque, no alpha in use","optimised":"resized to 400x400 and encoded webp q82; 89% smaller than source. Original always re-fetchable from sourceUrl."}},{"step":4,"size":"small","pos":"se","class":"gear small pos-se","href":"https://app.magnumvault.vip/acf","ariaLabel":"ACF to RFC Builder","label":"ACF RFC","tool":"acf-rfc","image":{"local":"assets/orb/acf-rfc.webp","originalFormat":"png 1000x1000, opaque, no alpha in use","optimised":"resized to 400x400 and encoded webp q82; 89% smaller than source. Original always re-fetchable from sourceUrl."}},{"step":5,"size":"big","pos":"s","class":"gear big pos-s","href":"https://app.magnumvault.vip/opus","ariaLabel":"Opus Citadel","label":"Opus Citadel","tool":"opus","image":{"local":"assets/orb/opus.webp","originalFormat":"png 1000x1000, opaque, no alpha in use","optimised":"resized to 400x400 and encoded webp q82; 89% smaller than source. Original always re-fetchable from sourceUrl."}},{"step":6,"size":"small","pos":"sw","class":"gear small pos-sw","href":"https://app.magnumvault.vip/maven","ariaLabel":"Magnum Maven Matrix","label":"Maven Matrix","tool":"maven","image":{"local":"assets/orb/maven.webp","originalFormat":"png 1000x1000, opaque, no alpha in use","optimised":"resized to 400x400 and encoded webp q82; 89% smaller than source. Original always re-fetchable from sourceUrl."}},{"step":7,"size":"big","pos":"w","class":"gear big pos-w","href":"https://app.magnumvault.vip/ikigai","ariaLabel":"Ikigai Synthesizer","label":"Ikigai Synthesizer","tool":"ikigai","image":{"local":"assets/orb/ikigai.webp","originalFormat":"png 1000x1000, opaque, no alpha in use","optimised":"resized to 400x400 and encoded webp q82; 89% smaller than source. Original always re-fetchable from sourceUrl."}},{"step":8,"size":"small","pos":"nw","class":"gear small pos-nw","href":"https://app.magnumvault.vip/planner","ariaLabel":"Magnum Opus Planning System","label":"Planning System","tool":"planner","image":{"local":"assets/orb/planner.webp","originalFormat":"png 1000x1000, opaque, no alpha in use","optimised":"resized to 400x400 and encoded webp q82; 89% smaller than source. Original always re-fetchable from sourceUrl."}}],"_cornersComment":"The four corner-shortcut anchors, PORTED VERBATIM from docs/reference/v3-source/02B_IDENTITY-ORBIT-ROTATION.html lines 183-194 (V3.9.22): class, ariaLabel, and img alt are copied exactly. facet/fallbackAnchor are the one piece NOT in the source - 02B links to in-page anchors (#sec-story-tools, #sec-programs, #sec-library, #sec-events) that don't exist in this build, which has portal drawers instead. See app.js's buildOrbChrome()/cornerHTML() comment for the full mapping rationale.","corners":[{"id":"tl","class":"corner-shortcut cs-tl","ariaLabel":"Jump to Story Creation Tools","alt":"Tools","sourceHref":"#sec-story-tools","facet":"TOOLS","fallbackAnchor":null,"note":"V1.5.0, direct from Anric: \"Pressing the Tools button in box 4 does not do anything.\" It used to be a plain anchor to #portal-rail, which is already on screen, so the click did nothing visible. TOOLS is now a VIRTUAL facet: not one of the 8 job tags, but the deduplicated union of all 8 of them, excluding PROGRAMS and LIBRARY items. That matches the live source, whose tool sections span every job facet rather than being one of them. Built by itemsForVirtualFacet() in app.js from the same state.items the portal rail counts, so the drawer count can never drift from the catalog.","image":{"local":"assets/orb/corner-tools.webp","originalFormat":"png, resized to 256x256","optimised":"encoded webp q82"}},{"id":"tr","class":"corner-shortcut cs-tr","ariaLabel":"Jump to Programs","alt":"Programs","sourceHref":"#sec-programs","facet":"PROGRAMS","fallbackAnchor":null,"note":"Maps onto the real PROGRAMS facet portal already in this build's data model. V1.5.0: verified still correct, PROGRAMS is a real portal with a real count.","image":{"local":"assets/orb/corner-programs.webp","originalFormat":"png, resized to 256x256","optimised":"encoded webp q82"}},{"id":"bl","class":"corner-shortcut cs-bl","ariaLabel":"Jump to Your Library","alt":"Library","sourceHref":"#sec-library","facet":"LIBRARY","fallbackAnchor":null,"note":"Maps onto the real LIBRARY facet portal already in this build's data model. V1.5.0: verified still correct, LIBRARY is a real portal with a real count.","image":{"local":"assets/orb/corner-library.webp","originalFormat":"png, resized to 256x256","optimised":"encoded webp q82"}},{"id":"br","class":"corner-shortcut cs-br","ariaLabel":"Jump to Events","alt":"Events","sourceHref":"#sec-events","facet":null,"fallbackAnchor":null,"note":"V1.5.0: this pointed at the LIVE facet, and LIVE was REMOVED as a portal in V1.3.0 (see data/tags.json _portalAudit), so the click opened an empty drawer reading \"Nothing tagged LIVE yet.\" It now scrolls to and briefly highlights panel 05 LIVE, which is where the Wednesday rotation and the Magnum Cafe actually live in this build. No removed facet is referenced.","image":{"local":"assets/orb/corner-events.webp","originalFormat":"png, resized to 256x256","optimised":"encoded webp q82"},"action":"scrollTo","target":"#live-sessions-panel"}],"background":{"_comment":"The --cluster-bg texture, PORTED VERBATIM from 02B line 163 (V3.9.22): set inline as a custom property on .gear-cluster-zone, rendered by momentum.css's .gear-cluster-zone[style*=\"--cluster-bg\"]::after (section 10). V0.7.1 could not port this - no local asset existed yet, so it substituted an invented pure-CSS gear-ring gradient. The real asset now exists locally, so app.js's buildOrbChrome() sets this to a url() pointing at it, exactly as source does, instead of the CSS-only fallback.","image":{"local":"assets/orb/cluster-bg.webp","originalFormat":"png, resized to 1200x669","optimised":"encoded webp q82"}}},"/data/journey.json":{"_generated":"Generated by scripts/sync-catalog.mjs. Do not hand-edit this file or anything under public/data/. Edit the source instead and re-run the sync script. Source: data/journey.json.","_preview":true,"_comment":"Neutral preview state. No real member's progress is known, guessed, or fabricated here. Every step below is deliberately 'locked' rather than marked done or current, because this build has no real member session to read a real spine position from. The N of M done readout on the page is computed live from this array (N = count of steps with state 'done', M = steps.length), not hardcoded, so it will change the moment this file changes. State values are 'done'/'current'/'locked', matching docs/reference/live-orb.css's own data-state attribute values exactly. See README.md for where real per-member progress attaches in a future wave.","steps":[{"step":1,"tool":"ignis","label":"IGNIS Protocol","state":"locked"},{"step":2,"tool":"genius","label":"Zone of Genius Amplifier","state":"locked"},{"step":3,"tool":"magnanimus","label":"MAGNANIMUS Protocol","state":"locked"},{"step":4,"tool":"acf-rfc","label":"ACF to RFC Builder","state":"locked"},{"step":5,"tool":"opus","label":"Opus Citadel","state":"locked"},{"step":6,"tool":"maven","label":"Magnum Maven Matrix","state":"locked"},{"step":7,"tool":"ikigai","label":"Ikigai Synthesizer","state":"locked"},{"step":8,"tool":"planner","label":"Magnum Opus Planning System","state":"locked"}]},"/data/footer.json":{"_generated":"Generated by scripts/sync-catalog.mjs. Do not hand-edit this file or anything under public/data/. Edit the source instead and re-run the sync script. Source: data/footer.json.","_comment":"HAND-EDITED source for QUICK LINKS (renamed from footer in FOOTER-SPEC.md revision 3, 2026-07-30). Do not rename any label: Training stays Training (not Programs, that stays on the orb corner's own icon), Business Tools stays Business Tools (not Tools), Consult stays Consult (not Book a Call). Do not invent a destination for any entry where none is confirmed. Field meaning: destination is a real URL, present only when one is confirmed and safe to ship; it is kept on file even for a non-clickable entry purely for provenance and is never turned into an href while action is none. action tells app.js how to render the entry: link = external href, target _blank; anchor = same-page jump using target (a real element id already in this page); portal = opens an existing orb facet drawer using facet (must be one of the 12 real facet values already wired in app.js, same drawer the portal rail and orb corners open); none = a dimmed, non-interactive tile, aria-disabled, no label of any kind, never href='#'. status is still live or coming for sync-catalog.mjs's own validation, but revision 3 removed the rendered status badge entirely: app.js now decides dimmed versus clickable purely from action (none, or status coming, means dimmed) not from a visible LIVE/COMING chip. The moment a real destination is confirmed for any dimmed entry, flipping its action to link/anchor/portal (plus status to live if needed) is a data edit only, no code change.","links":[{"label":"Live","action":"link","destination":"https://app.magnumvault.vip/live","status":"live"},{"label":"Events","action":"link","destination":"https://magnumvault.com/#events","status":"live","note":"MVP Annual Summit and Cabo Mastermind. Wired 2026-07-30 to the events anchor on magnumvault.com; each individual event still has its own mailto CTA in docs/reference/v3-source/05_EVENTS.html."},{"label":"IntroCard","action":"link","destination":"https://introcard.ai","status":"live"},{"label":"Opus Card","action":"none","destination":null,"status":"coming","note":"A future Magnum Vault credit card. No landing page yet."},{"label":"Business Tools","action":"anchor","target":"#portal-rail","destination":null,"status":"live","note":"Opens the tool catalog in the portal rail. Same fallback the orb's TOOLS corner already uses, since no single facet covers every tool section."},{"label":"Training","action":"portal","facet":"PROGRAMS","destination":null,"status":"live","note":"Footer label for Programs. The orb corner keeps its own icon and reads PROGRAMS; only the footer word changes."},{"label":"Consult","action":"link","destination":"https://magnumvault.com/call","status":"live","note":"Wired 2026-07-30 to the call booking page on magnumvault.com."},{"label":"Bookstore","action":"none","destination":"https://books.magnumvault.com","status":"coming","note":"The domain is live today, but Bookstore stays dimmed and non-clickable on purpose: Anric wants it held back until he gives the go-ahead, not launched by accident through a footer rebuild. Do not flip action to link until he confirms."},{"label":"Library","action":"portal","facet":"LIBRARY","destination":null,"status":"live","note":"Opens the orb's LIBRARY portal."},{"label":"Cafe","action":"link","destination":"https://cafe.magnumvault.com","status":"live"},{"label":"Webinar","action":"none","destination":null,"status":"live","note":"The live webinar that runs, not the Webinar Toolkit. No direct URL confirmed yet."},{"label":"Marketplace","action":"none","destination":null,"status":"coming","note":"Being built."},{"label":"Magazine","action":"link","destination":"https://capitalmagnet.vip/","status":"live","note":"The Capital Magnet card, sourced verbatim from docs/reference/v3-source/04_MAGNET-PROTOCOLS.html (Box 06), tagged MAGAZINE there."}]},"/data/videos.json":{"_generated":"Generated by scripts/sync-catalog.mjs. Do not hand-edit this file or anything under public/data/. Edit the source instead and re-run the sync script. Source: data/videos.json.","_comment":"PORTED VERBATIM from docs/reference/v3-source/02B_IDENTITY-ORBIT-ROTATION.html, the CURRICULUM array (V3.9.15), which that file sources from MVP-ASSETS-MERGED.csv Curriculum rows. Every module name, url, program, tag, status and description is his, extracted programmatically, not retyped and not invented. ONE deterministic transform was applied and nothing else: U+2014 EM DASH was replaced with a plain hyphen (estate law bans em dashes in shipped output; docs/reference/ itself is never edited). No word was added, removed or reworded. 36 modules, 9 topic tags in use across the controlled vocabulary his own release note describes (his note names 10 areas; objections currently has 0 modules carrying it, so 9 tags render).","_programLabels":"Program-code to display-label map, harvested verbatim from that same file programLabel().","programLabels":{"magnanimus":"MAGNANIMUS","rampup":"RAMP↑UP","reap":"REAP","crushingit-replays":"CRUSHiNGiT Replays","crushingit-accel":"CRUSHiNGiT Accelerator","raisingcapital":"RaisingCapital.Live","mba-3day":"3-Day MBA"},"modules":[{"name":"RAMP▲UP Protocol 1 - IDENTITY","url":"https://rampup.vip/toolkit1?from=rampup","program":"rampup","tags":["identity"],"status":"live","desc":"RAMP UP Protocol 1: IDENTITY. One of 10 sequential protocols in the RAMP▲UP Interactive Bootcamp curriculum."},{"name":"RAMP▲UP Protocol 10 - LIFE & BUSINESS ON YOUR TERMS","url":"https://rampup.vip/toolkit10?from=rampup","program":"rampup","tags":["systems"],"status":"live","desc":"RAMP UP Protocol 10: LIFE & BUSINESS ON YOUR TERMS. One of 10 sequential protocols in the RAMP▲UP Interactive Bootcamp curriculum."},{"name":"RAMP▲UP Protocol 2 - RIGHT FIT CLIENT","url":"https://rampup.vip/toolkit2?from=rampup","program":"rampup","tags":["rfc"],"status":"live","desc":"RAMP UP Protocol 2: RIGHT FIT CLIENT. One of 10 sequential protocols in the RAMP▲UP Interactive Bootcamp curriculum."},{"name":"RAMP▲UP Protocol 3 - SIGNATURE STORY","url":"https://rampup.vip/toolkit3?from=rampup","program":"rampup","tags":["story"],"status":"live","desc":"RAMP UP Protocol 3: SIGNATURE STORY. One of 10 sequential protocols in the RAMP▲UP Interactive Bootcamp curriculum."},{"name":"RAMP▲UP Protocol 4 - IMPACT & INFLUENCE","url":"https://rampup.vip/toolkit4?from=rampup","program":"rampup","tags":["influence"],"status":"live","desc":"RAMP UP Protocol 4: IMPACT & INFLUENCE. One of 10 sequential protocols in the RAMP▲UP Interactive Bootcamp curriculum."},{"name":"RAMP▲UP Protocol 5 - FUNNELS","url":"https://rampup.vip/toolkit5?from=rampup","program":"rampup","tags":["funnels"],"status":"live","desc":"RAMP UP Protocol 5: FUNNELS. One of 10 sequential protocols in the RAMP▲UP Interactive Bootcamp curriculum."},{"name":"RAMP▲UP Protocol 6 - EXPERT POSITIONING","url":"https://rampup.vip/toolkit6?from=rampup","program":"rampup","tags":["systems"],"status":"live","desc":"RAMP UP Protocol 6: EXPERT POSITIONING. One of 10 sequential protocols in the RAMP▲UP Interactive Bootcamp curriculum."},{"name":"RAMP▲UP Protocol 7 - PEAK PERFORMANCE","url":"https://rampup.vip/toolkit7?from=rampup","program":"rampup","tags":["systems"],"status":"live","desc":"RAMP UP Protocol 7: PEAK PERFORMANCE. One of 10 sequential protocols in the RAMP▲UP Interactive Bootcamp curriculum."},{"name":"RAMP▲UP Protocol 8 - TECHNOLOGY WORKSHOP","url":"https://rampup.vip/toolkit8?from=rampup","program":"rampup","tags":["systems"],"status":"live","desc":"RAMP UP Protocol 8: TECHNOLOGY WORKSHOP. One of 10 sequential protocols in the RAMP▲UP Interactive Bootcamp curriculum."},{"name":"RAMP▲UP Protocol 9 - INTEGRATION DAY","url":"https://rampup.vip/toolkit9?from=rampup","program":"rampup","tags":["systems"],"status":"live","desc":"RAMP UP Protocol 9: INTEGRATION DAY. One of 10 sequential protocols in the RAMP▲UP Interactive Bootcamp curriculum."},{"name":"REAP Curriculum (Parent) - 90-Day Implementation Sprint","url":"https://magnumvault.com/reap-curriculum","program":"reap","tags":["systems"],"status":"live","desc":"REAP - Rapid Execution Accelerate Performance. 90-Day Implementation Sprint, 4 Acceleration Tracks, 12 Wednesday Labs (11am-2pm EST). Transforms RAMP UP knowled"},{"name":"REAP Lab 1 - Magnetic Identity Mastery (Aug 13)","url":"https://magnumvault.com/reap-curriculum","program":"reap","tags":["acf","identity","rfc","story","systems"],"status":"live","desc":"ACF Live Activation Workshop (5 rings, morning ritual, decision filter, energy audit, identity statement). RFC Avatar Hot Seat Clarity (psychographic precision,"},{"name":"REAP Lab 10 - Authority Content Mastery - Content & Media (Oct 22)","url":"https://magnumvault.com/reap-curriculum","program":"reap","tags":["identity","content","capital-attraction"],"status":"live","desc":"Maven Manifesto (preeminence positioning, 11 steps to maven status, maven personality development). Thought Leadership Platform (industry prediction method, con"},{"name":"REAP Lab 11 - CEO Systems Mastery - Freedom Design (Oct 29)","url":"https://magnumvault.com/reap-curriculum","program":"reap","tags":["systems"],"status":"live","desc":"Triple Threat Time Design™ (Free Days 25%, Focus Days 40%, Buffer Days 35%). Entrepreneurial Rhythm Formula™ (Morning 90-min Creation Block / Midday Connection "},{"name":"REAP Lab 12 - Magnetic Marketing Mastery - Integration Mastery (Nov 5)","url":"https://magnumvault.com/reap-curriculum","program":"reap","tags":["systems","identity","rfc"],"status":"live","desc":"Integration Audit (map four pillars, gap analysis, what works alone vs together, connection opportunities, integration breakthrough). Circular Launch Method (mu"},{"name":"REAP Lab 2 - Authority Content Mastery (Aug 20)","url":"https://magnumvault.com/reap-curriculum","program":"reap","tags":["content"],"status":"live","desc":"Content Calendar Creation LIVE (Mon mindset / Tue teaching / Wed wins / Thu thought leadership / Fri fun). Write 5 Posts Together (Contrarian Truth, Behind-the-"},{"name":"REAP Lab 3 - CEO Systems Mastery (Aug 27)","url":"https://magnumvault.com/reap-curriculum","program":"reap","tags":["systems","identity"],"status":"live","desc":"Zone of Genius Amplifier™ Discovery (Superior Skill Audit, Energy Analysis, Value Creation Map, Delegation Hit List). Progress Momentum Method™ Setup (baseline,"},{"name":"REAP Lab 4 - Magnetic Marketing Mastery (Sep 3)","url":"https://magnumvault.com/reap-curriculum","program":"reap","tags":["systems","funnels","influence"],"status":"live","desc":"Hurricane Principle (linear vs circular relationships, multi-entry). Platform Prison Audit (tool inventory, friction points, time tax, drop-off data). Expert Po"},{"name":"REAP Lab 5 - Magnetic Identity Mastery (Sep 10)","url":"https://magnumvault.com/reap-curriculum","program":"reap","tags":["acf","identity","rfc","influence","story"],"status":"live","desc":"Opening: British Rail Story (psychological foundation). Part 1 ACF Reality Check (PRO vs Dabbler, Zone of Genius excavation, daily ACF rituals, focus protection"},{"name":"REAP Lab 6 - Authority Content Mastery (Sep 17)","url":"https://magnumvault.com/reap-curriculum","program":"reap","tags":["content","identity","systems"],"status":"live","desc":"Content-to-Conversion Bridge™ Framework (Authority Content → Bridge Page → Call Booking → Client Transformation). Hot Wire Method™ + 5 Viral Hooks (Pattern Inte"},{"name":"REAP Lab 7 - CEO Systems Mastery (Sep 24)","url":"https://magnumvault.com/reap-curriculum","program":"reap","tags":["systems"],"status":"live","desc":"Liberation Foundation™ (Liberation Rate™ minimum/target/genius, 4X Principle, Liberation Law). REAP Grid™ System (Four Quadrants: Eliminate/Replace/Protect/Ampl"},{"name":"REAP Lab 8 - Magnetic Marketing Mastery (Oct 1)","url":"https://magnumvault.com/reap-curriculum","program":"reap","tags":["funnels","systems","content"],"status":"live","desc":"Multi-Entry Ecosystem (Content Discovery, Referral Introduction, Direct Outreach, Partnership Gateway). Zero-Friction Journey (current journey audit, friction I"},{"name":"REAP Lab 9 - Magnetic Identity Mastery - Authority Amplification (Oct 15)","url":"https://magnumvault.com/reap-curriculum","program":"reap","tags":["systems","content","rfc","story","identity"],"status":"live","desc":"Authority Audit (personal brand gap, market position reality check, thought leadership inventory, authority accelerators). RFC Community Transformation (shared "},{"name":"DAY 1: STRATEGY","url":"https://app.magnumvault.vip/day1","program":"mba-3day","tags":["identity","acf","rfc","influence"],"status":"live","desc":"The Strategy day: diagnose your capital attraction gaps with the Magnum Magnetic Score, build your Authentic Character Flywheel across 5 rings, profile your Rig"},{"name":"DAY 2: STORY","url":"https://app.magnumvault.vip/day1","program":"mba-3day","tags":["story","capital-attraction","content"],"status":"live","desc":"The Story day: learn the Kintsugi philosophy (your scars are your gold), build your complete Signature Story Trinity, craft and practice your 35-second Escalato"},{"name":"DAY 3: SYSTEMS","url":"https://app.magnumvault.vip/day1","program":"mba-3day","tags":["funnels","influence","capital-attraction"],"status":"live","desc":"The Systems day: build your Magnetic Orbit Funnel and Book-a-Call system, learn the HVAC and HSI content frameworks, integrate AI tools for voice and content, a"},{"name":"Module 1: Keynote. The Foundation of Dignified Capital Attraction","url":"https://magnumvault.vip/crushingit-replay/module-1?from=crushingit","program":"crushingit-replays","tags":["capital-attraction","influence"],"status":"live","desc":"Why everything you've been taught about raising capital is wrong, and the three-part framework that changes everything."},{"name":"Module 2: Identity. Remember Who You Are","url":"https://magnumvault.vip/crushingit-replay/module-2?from=crushingit","program":"crushingit-replays","tags":["identity","acf"],"status":"live","desc":"Stop compartmentalizing your life. Step into your authentic power and become the person capital chases."},{"name":"Module 3: RFC. Your Right Fit Client","url":"https://magnumvault.vip/crushingit-replay/module-3?from=crushingit","program":"crushingit-replays","tags":["rfc"],"status":"live","desc":"The 90% opportunity everyone ignores. Why selecting the right partners matters more than finding any partners."},{"name":"Module 4: Resistance. Conquering GULP","url":"https://magnumvault.vip/crushingit-replay/module-4?from=crushingit","program":"crushingit-replays","tags":["systems"],"status":"live","desc":"The hidden forces sabotaging your success. How to identify and eliminate the resistance keeping you stuck."},{"name":"Module 5: ACF. Authentic Character Flywheel","url":"https://magnumvault.vip/crushingit-replay/module-5?from=crushingit","program":"crushingit-replays","tags":["acf","identity"],"status":"live","desc":"The five layers that make you magnetic. Build the foundation that attracts capital without chasing."},{"name":"Module 6: TRUSTI. Six Currencies of Influence","url":"https://magnumvault.vip/crushingit-replay/module-6?from=crushingit","program":"crushingit-replays","tags":["influence","capital-attraction"],"status":"live","desc":"Master Transparency, Respect, Understanding, Service, Tangibility, and Intimacy to accelerate trust."},{"name":"Module 7: Story. Your Signature Stories","url":"https://magnumvault.vip/crushingit-replay/module-7?from=crushingit","program":"crushingit-replays","tags":["story","content"],"status":"live","desc":"Craft the three narratives that replace pitch decks and create instant emotional connection."},{"name":"Module 8: Objections. Dignified Objection Handling","url":"https://magnumvault.vip/crushingit-replay/module-8?from=crushingit","program":"crushingit-replays","tags":["influence","capital-attraction"],"status":"live","desc":"Transform resistance into partnership. The framework for handling objections without begging."},{"name":"Module 9: Funnels. Circular Attraction Systems","url":"https://magnumvault.vip/crushingit-replay/module-9?from=crushingit","program":"crushingit-replays","tags":["funnels","influence"],"status":"live","desc":"Stop pushing people through linear funnels. Build systems that draw the right people toward you naturally."},{"name":"Module 10: Throughline. Your Golden Thread","url":"https://magnumvault.vip/crushingit-replay/module-10?from=crushingit","program":"crushingit-replays","tags":["identity","influence"],"status":"live","desc":"The consistent theme that ties everything together. Build a personal brand people remember and align with."}]}};</script>
<script>
// MVP Dashboard Clone V1.5.0
// V1.5.0: seven targeted fixes from Anric's review of V1.4.0. The four that touch this file:
// FIX 3, the scroll affordance is materially bigger (the chevron is now a real inline SVG,
// not a 13px text glyph - see setupScrollAffordance below and .scroll-fade in momentum.css).
// FIX 6, all four orb corner shortcuts do something real now: TOOLS opens a new VIRTUAL
// facet drawer (the deduplicated union of the 8 job facets minus PROGRAMS and LIBRARY items,
// see TOOLS_FACET/itemsForFacet), EVENTS scrolls to and flashes panel 05 LIVE instead of
// pointing at the LIVE facet that V1.3.0 removed, and every corner gives a visible click
// pulse. FIX 7, the FIND BY TOPIC video browser is ported from his own Box 12 and renders
// from the new data/videos.json (36 real modules, extracted from his CURRICULUM array, not
// invented - see buildVideoBrowser below). FIX 2 also lands partly here: setHeaderHeightVar()
// publishes the sticky header's real measured height as --mn-bar-h so the drawer can open
// BELOW it instead of underneath it.
// V1.3.0: see public/index.html's top-of-file comment for the full change list (01 PORTALS
// cap + LIBRARY expansion, 02/03 renames, 05 LIVE next-three-events + Cafe CTA, 06 REPLAYS
// two-line fix, 07 SHOW_TELEMETRY flag, 08 QUICK LINKS no-wrap, 09 WORLD CLOCK real port).
// V1.2.0: JOB 1 (panel numbering) is markup/CSS only, no app.js change. JOB 2, the
// window.MVP_RESOURCES assignment inside init() below (added in V1.0.0 to feed the ported
// header's own search box) is removed - see the comment at its old call site and
// public/index.html's top-of-file comment for the full reasoning.
// V1.1.0: two changes. JOB 1, the footer's link set is rebuilt as QUICK LINKS: no more status
// badges, every entry is an uppercase tile and the whole tile is the click target, and the
// panel moved above the world clock ribbon (see buildQuickLinks() below and the QUICK LINKS
// section in public/index.html). A tile is dimmed and aria-disabled whenever its data has no
// real destination to send a member to (action "none", or status "coming" as a defensive
// second gate) - not a hardcoded list of labels, so the day Anric confirms a destination for
// Opus Card, Marketplace, Webinar, or Bookstore, flipping that entry's action in
// data/footer.json is all it takes. JOB 2, drawerItemHTML() below now renders a small "LOCAL"
// marker on any catalog item scripts/sync-catalog.mjs flagged local:true (see
// data/local-overrides.json), distinguishing this clone's own locally hosted destinations
// (currently just StoryPolisher, public/storypolish/) from production-hosted ones, without
// this file hardcoding any URL itself.
// V1.0.0: the MVP Universal Header V3.2 is now ported into public/index.html (see the big
// comment there). The only change this file makes for that port: init() below now publishes
// window.MVP_RESOURCES from this file's own existing catalog index (state.items) right after
// that index is built, so the ported header's own top-bar search (index.html's #mn-search)
// reads the same one catalog the rest of this page already reads, not a second, parallel
// index built just for the header. See the window.MVP_RESOURCES assignment inside init().
// Static, client-side render from a bundled JSON snapshot. No framework, no build step,
// no runtime fetch to anything outside this origin (when bundled via scripts/build.mjs into
// dist/index.html, not even that: window.__MVP_DATA__ carries every dataset inline and
// loadJSON() never calls fetch() at all).
//
// V0.5.0 layout: portals on the left (was the flat facet-rail), a drawer of sub-choices on
// the right (was the flat #catalog-rows list), the orb still at the center, a welcome-note +
// release-feed column, and a live-sessions + replays column. The command-palette search and
// the two-letter facet badges are still ported from the Magnum Ops Console
// (magnum-ecosystem/ops/index.html V3.12.0), and the drawer interaction itself is ported
// from that same console's V3.20 right-hand ADMIN PORTALS drawer (position:fixed slide-in,
// backdrop, one-at-a-time), restyled to this file's own momentum.css tokens rather than the
// ops console's cyan/--mv-* ones.
//
// V0.6.0 adds: the real gear-cluster orb (data/orb.json, extracted from the live
// app.magnumvault.vip/dashboard gear-cluster-zone markup, images self-hosted under
// public/assets/orb/), a neutral-preview journey/status layer (data/journey.json, no real
// member progress), a full-width shell, and a release-feed link fix (only the tool name
// named in an entry links, never the whole entry body - see renderReleases below).
//
// One thing was deliberately NOT ported from the ops console: it renders a "176 / 176 OPS
// NOMINAL" stat where the numerator is built by summing the same list the denominator is set
// to, so it can only ever read 100%. Every count rendered here is a real, independent count,
// and a portal's nav-count is computed with the exact same filter function that populates its
// drawer, so the two can never drift apart.
//
// V0.8.0 (change 3): the orb's four corner shortcuts and its --cluster-bg background
// texture are now ported from the real GHL section source
// (docs/reference/v3-source/02A_STYLES.html + 02B_IDENTITY-ORBIT-ROTATION.html, V3.9.22)
// instead of reverse-engineered from the rendered page. See buildOrbChrome() below: the
// four corner icons are now real <img> elements (public/assets/orb/corner-*.webp) rendered
// from data/orb.json's "corners" array, replacing the V0.7.1 text-chip fallback, and the
// cluster background is a real local image (cluster-bg.webp) instead of an invented
// pure-CSS gradient. Gear geometry, spin, and journey-state values were re-checked against
// the same source and corrected in momentum.css section 10 - see that section's header
// comment for the full list of fixes.

(function () {
  'use strict';

  // ── 07 CATALOG TELEMETRY visibility flag (V1.3.0) ──────────────────────────────────────
  // Anric, 2026-07-30: "right now I don't think it's adding any value... you should hide it
  // for now." Hide, not delete: buildTelemetry() below still runs unconditionally and still
  // populates #telemetry-total / #telemetry-meter-list with real, independently-computed
  // figures every load - only the panel's on-screen visibility is gated by this one flag.
  // Flip SHOW_TELEMETRY back to true (one edit, right here) to switch the panel back on;
  // nothing else in this file, index.html, or momentum.css needs to change.
  const SHOW_TELEMETRY = false;

  const STATUS_ORDER = ['live', 'new', 'beta', 'coming_soon', 'in_development', 'migrating'];
  const STATUS_LABELS = {
    live: 'Live',
    new: 'New',
    beta: 'Beta',
    coming_soon: 'Coming soon',
    in_development: 'In development',
    migrating: 'Migrating'
  };

  // Two-letter badge convention ported from the ops console's ADMIN PORTALS list (MV, ST,
  // CL, IF, AI, LV, MN, SE, EM, UT, MX). Covers all 12 facets: the 8 job tags plus the
  // 4 derived section tags from data/tags.json. These are now the PORTAL badges.
  const FACET_BADGES = {
    'WRITING': 'WR',
    'PUBLISHING': 'PB',
    'PUBLICITY': 'PC',
    'OUTREACH': 'OU',
    'COMPLIANCE': 'CO',
    'PLAN & EXECUTE': 'PE',
    'AI & INFRASTRUCTURE': 'AI',
    'LINKEDIN': 'LI',
    'PROGRAMS': 'PR',
    'LIBRARY': 'LB',
    'LIVE': 'LV',
    'COMMUNITY': 'CM',
    // V1.5.0 (FIX 6): TOOLS is a VIRTUAL facet, not a portal. It never appears in the portal
    // rail (buildPortalRail is only ever called with jobTags + sectionTags) and no item
    // carries it as a tag; it exists so the orb's TOOLS corner can open a drawer over a set
    // that spans facets rather than being one of them. See itemsForFacet() below.
    'TOOLS': 'TL'
  };

  // V1.5.0 (FIX 6), the proposal Anric approved: "tools" is a concept that spans facets
  // rather than being one of them. This is the one virtual facet name; anything comparing
  // against it goes through this constant rather than a bare string literal.
  const TOOLS_FACET = 'TOOLS';

  function badgeFor(value) {
    if (FACET_BADGES[value]) return FACET_BADGES[value];
    const letters = String(value || '').replace(/[^A-Za-z]/g, '');
    return (letters.slice(0, 2) || '??').toUpperCase();
  }

  const state = {
    items: [],           // deduped renderable items
    jobTags: [],
    sectionTags: [],
    deadRules: [],
    query: '',
    portalEls: new Map(),  // facet value -> its rail DOM node, for focus-return + jump lookups
    drawerOpenFacet: null,
    drawerLastTrigger: null
  };

  const el = {
    search: document.getElementById('search-input'),
    searchResults: document.getElementById('search-results'),
    toast: document.getElementById('toast'),
    hudClock: document.getElementById('hud-clock'),
    hudCountdown: document.getElementById('hud-countdown'),
    hudSearchAffordance: document.getElementById('hud-search-affordance'),
    worldClock: document.getElementById('world-clock'),
    quickLinks: document.getElementById('quick-links'),

    portalList: document.getElementById('portal-list'),

    noteBody: document.getElementById('note-body'),
    releaseBody: document.getElementById('release-body'),
    releaseCount: document.getElementById('release-count'),

    liveRotation: document.getElementById('live-rotation'),
    liveProgressValue: document.getElementById('live-progress-value'),
    replaysBody: document.getElementById('replays-body'),
    replaysCount: document.getElementById('replays-count'),

    gearCluster: document.getElementById('gear-cluster'),
    gearClusterZone: document.getElementById('gear-cluster-zone'),
    orbCorners: document.getElementById('orb-corners'),
    orbJourneyReadout: document.getElementById('orb-journey-readout'),
    orbJourneyLegend: document.getElementById('orb-journey-legend'),

    drawerOverlay: document.getElementById('drawer-overlay'),
    drawerBackdrop: document.getElementById('drawer-backdrop'),
    drawerIcon: document.getElementById('drawer-icon'),
    drawerTitle: document.getElementById('drawer-title'),
    drawerCount: document.getElementById('drawer-count'),
    drawerBody: document.getElementById('drawer-body'),
    drawerClose: document.getElementById('drawer-close')
  };

  function slugify(name) {
    return name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
  }

  // A root-relative path (leading "/", not "//") is a same-origin destination this clone
  // hosts itself (see data/local-overrides.json, e.g. "/storypolish/") rather than a bare
  // hostname like "app.magnumvault.vip/foo". Treating that case through the "prepend
  // https://" logic below would mis-parse it (new URL('https:///storypolish/') reads
  // "storypolish" back as the HOST, not a path) so it needs its own branch in every helper
  // that touches a url string.
  function isLocalPath(url) {
    return typeof url === 'string' && /^\/(?!\/)/.test(url);
  }

  function hostOf(url) {
    if (!url) return '';
    if (isLocalPath(url)) return window.location.host.toLowerCase();
    try {
      const withScheme = /^https?:\/\//i.test(url) ? url : 'https://' + url;
      return new URL(withScheme).host.toLowerCase();
    } catch {
      return '';
    }
  }

  function pathOf(url) {
    if (!url) return '';
    if (isLocalPath(url)) return url;
    try {
      const withScheme = /^https?:\/\//i.test(url) ? url : 'https://' + url;
      return new URL(withScheme).pathname;
    } catch {
      return '';
    }
  }

  function isDead(url, deadRules) {
    if (!url) return false;
    const host = hostOf(url);
    const path = pathOf(url);
    for (const rule of deadRules) {
      if (rule.matchType === 'host' && host === rule.host) return true;
      if (rule.matchType === 'bareWorkersDevHost') {
        if (host.endsWith(rule.hostSuffix) && (path === '' || path === '/')) return true;
      }
    }
    return false;
  }

  function fullUrl(url) {
    if (!url) return '';
    if (isLocalPath(url)) return url; // already a same-origin path, see isLocalPath() above
    return /^https?:\/\//i.test(url) ? url : 'https://' + url;
  }

  // scripts/build.mjs inlines every runtime dataset into window.__MVP_DATA__, keyed by the
  // same path loadJSON() would otherwise fetch. When that global is present (the bundled
  // dist/index.html build) this never calls fetch() at all - the exact same app.js source
  // runs unmodified in both the split public/ dev mode and the bundled dist/ mode.
  async function loadJSON(path) {
    if (window.__MVP_DATA__ && Object.prototype.hasOwnProperty.call(window.__MVP_DATA__, path)) {
      return window.__MVP_DATA__[path];
    }
    const res = await fetch(path);
    if (!res.ok) throw new Error(`Failed to load ${path}: ${res.status}`);
    return res.json();
  }

  // Every file under public/data/ that is an OBJECT carries a top-level "_generated" warning
  // key (JSON has no comment syntax). Any key starting with "_" is metadata about the file,
  // never content to render: strip it before use so a future change here can never
  // accidentally surface it. Arrays (releases.json, replays.json) are mirrored without a
  // wrapper key (see scripts/sync-catalog.mjs), so they never need this.
  function stripUnderscoreKeys(obj) {
    if (!obj || typeof obj !== 'object' || Array.isArray(obj)) return obj;
    const out = {};
    for (const key of Object.keys(obj)) {
      if (!key.startsWith('_')) out[key] = obj[key];
    }
    return out;
  }

  function dedupe(sections) {
    const bySlug = new Map();
    for (const section of sections) {
      for (const item of section.items) {
        const slug = item.slug || slugify(item.name);
        if (!bySlug.has(slug)) {
          bySlug.set(slug, {
            slug,
            name: item.name,
            status: item.status,
            purpose: item.purpose,
            url: item.url || '',
            local: !!item.local, // set by scripts/sync-catalog.mjs from data/local-overrides.json
            // libraryGroup ("your" | "collection"), set by sync-catalog.mjs's LIBRARY
            // grouped-row expansion (2026-07-30), only ever present on library-section items.
            // Undefined on every other item, harmless everywhere it is not read.
            libraryGroup: item.libraryGroup || '',
            tags: new Set(item.tags || []),
            sections: new Set([item.sectionTitle])
          });
        } else {
          const existing = bySlug.get(slug);
          (item.tags || []).forEach((t) => existing.tags.add(t));
          existing.sections.add(item.sectionTitle);
          if (!existing.url && item.url) existing.url = item.url;
          if (!existing.purpose && item.purpose) existing.purpose = item.purpose;
          if (item.local) existing.local = true;
          if (item.libraryGroup && !existing.libraryGroup) existing.libraryGroup = item.libraryGroup;
        }
      }
    }
    return Array.from(bySlug.values()).map((it) => ({
      ...it,
      tags: Array.from(it.tags),
      sections: Array.from(it.sections)
    }));
  }

  function escapeHTML(str) {
    return String(str || '').replace(/[&<>"']/g, (c) => ({
      '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
    }[c]));
  }
  function escapeAttr(str) { return escapeHTML(str); }

  // V1.5.0 (FIX 6): TOOLS resolves to the union of every job facet, deduplicated by slug,
  // with PROGRAMS and LIBRARY items excluded. state.items is ALREADY deduplicated by slug
  // (dedupe() above collapses an item appearing in several inventory sections into one
  // record whose tags are the union of all of them), so a single filter over it is the
  // union-and-dedupe in one pass - there is no second index and no chance of a duplicate row.
  // Every other facet is the ordinary "items carrying this tag" filter, unchanged. This one
  // function still backs BOTH the portal-rail counts and the drawer contents, so a count can
  // never read differently from the drawer it opens.
  function itemsForFacet(facet) {
    if (facet === TOOLS_FACET) {
      return state.items.filter((it) =>
        it.tags.some((t) => state.jobTags.includes(t)) &&
        !it.tags.includes('PROGRAMS') &&
        !it.tags.includes('LIBRARY'));
    }
    return state.items.filter((it) => it.tags.includes(facet));
  }

  // ── Portal rail (left column, primary navigation) ──────────────────────────────────────
  // ADMIN PORTALS idiom ported verbatim from the ops console: two-letter squared badge +
  // label + count, one row per facet, dense. Each row's count comes from itemsForFacet(),
  // the exact same function that fills that facet's drawer - a portal's nav-count can never
  // read a different number than the drawer it opens actually lists.
  function buildPortalRail(container, values) {
    container.innerHTML = '';
    state.portalEls.clear();
    values.forEach((value) => {
      const count = itemsForFacet(value).length;
      const row = document.createElement('div');
      row.className = 'nav-item mom-nav-item';
      row.dataset.facet = value;
      row.setAttribute('role', 'button');
      row.setAttribute('tabindex', '0');
      row.setAttribute('aria-pressed', 'false');
      row.setAttribute('aria-haspopup', 'dialog');
      row.innerHTML =
        `<div class="nav-icon">${escapeHTML(badgeFor(value))}</div>` +
        `<div class="nav-label">${escapeHTML(value)}</div>` +
        `<div class="nav-count">${count}</div>`;
      container.appendChild(row);
      state.portalEls.set(value, row);
    });
    wirePortalRail(container);
  }

  function wirePortalRail(container) {
    const items = Array.from(container.querySelectorAll('.mom-nav-item'));
    items.forEach((node, idx) => {
      node.addEventListener('click', () => togglePortal(node.dataset.facet, node));
      node.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
          e.preventDefault();
          togglePortal(node.dataset.facet, node);
        } else if (e.key === 'ArrowDown') {
          e.preventDefault();
          items[Math.min(idx + 1, items.length - 1)].focus();
        } else if (e.key === 'ArrowUp') {
          e.preventDefault();
          items[Math.max(idx - 1, 0)].focus();
        }
      });
    });
  }

  // ── The drawer (the actual browsing surface, replacing the old flat #catalog-rows list)
  // Populated synchronously via innerHTML - no requestAnimationFrame anywhere in this file
  // (see scrollAndHighlight below for why that rule exists). Only one drawer open at a time:
  // opening a second portal while one is open swaps drawer-body's content in place rather
  // than closing then reopening.
  function drawerItemHTML(item) {
    const dead = isDead(item.url, state.deadRules);
    const clickable = !dead && !!item.url;
    const statusClass = 'drawer-item--status-' + (dead ? 'dead' : item.status);

    let hostText;
    if (dead) {
      const path = pathOf(item.url);
      hostText = hostOf(item.url) + (path && path !== '/' ? path : '') + ' · DOWN';
    } else if (item.url) {
      const path = pathOf(item.url);
      hostText = hostOf(item.url) + (path && path !== '/' ? path : '');
    } else {
      hostText = 'NO URL';
    }

    // JOB 2 (V1.1.0): a small, quiet marker distinguishing this clone's own locally hosted
    // destinations (item.local, set by scripts/sync-catalog.mjs from
    // data/local-overrides.json) from production-hosted ones - distinct from the status
    // system above (statusClass) and not a second status badge, just a short tag next to the
    // host text.
    const localMarker = item.local
      ? `<span class="drawer-item-local" title="Hosted on this clone, not production">CLONE</span>`
      : '';

    const inner =
      `<span class="drawer-item-text">` +
        `<div class="drawer-item-name">${escapeHTML(item.name)}</div>` +
        `<div class="drawer-item-purpose">${escapeHTML(item.purpose)}</div>` +
        `<div class="drawer-item-host">${escapeHTML(hostText)}${localMarker}</div>` +
      `</span>`;

    if (clickable) {
      return `<a class="drawer-item ${statusClass}" id="item-${escapeAttr(item.slug)}" href="${escapeAttr(fullUrl(item.url))}" target="_blank" rel="noopener">${inner}</a>`;
    }
    return `<div class="drawer-item ${statusClass}" id="item-${escapeAttr(item.slug)}" role="listitem" tabindex="-1">${inner}</div>`;
  }

  // LIBRARY two-group split (2026-07-30, direct from Anric): "the library also includes all
  // of the books, even the ones that are not published by us... that should be clearly
  // marked as a separate section." Every library item carries libraryGroup ("your" |
  // "collection"), set by scripts/sync-catalog.mjs's grouped-row expansion. Group headings
  // use his own live-dashboard wording verbatim, not invented text.
  const LIBRARY_GROUP_HEADS = {
    your: 'YOUR LIBRARY',
    collection: 'THE CAPITAL MAGNETISM COLLECTION'
  };
  function libraryGroupedHTML(items) {
    const groups = { your: [], collection: [] };
    items.forEach((it) => { (groups[it.libraryGroup] || groups.your).push(it); });
    return ['your', 'collection'].map((key) => {
      const groupItems = groups[key];
      if (!groupItems.length) return '';
      const note = key === 'collection'
        ? '<span class="drawer-group-note">External titles, not published by Magnum Vault</span>'
        : '';
      return (
        `<div class="drawer-group-head">${escapeHTML(LIBRARY_GROUP_HEADS[key])} <span class="drawer-group-count">${groupItems.length}</span>${note}</div>` +
        groupItems.map(drawerItemHTML).join('')
      );
    }).join('');
  }

  function openDrawer(facet, triggerEl) {
    if (!facet) return;
    const items = itemsForFacet(facet);
    const isLibrary = facet === 'LIBRARY';

    el.drawerIcon.textContent = badgeFor(facet);
    el.drawerTitle.textContent = facet;
    el.drawerCount.textContent = `${items.length} item${items.length === 1 ? '' : 's'}`;
    el.drawerBody.innerHTML = items.length
      ? (isLibrary ? libraryGroupedHTML(items) : items.map(drawerItemHTML).join(''))
      : `<div class="drawer-empty">Nothing tagged ${escapeHTML(facet)} yet.</div>`;
    setupScrollAffordance(el.drawerBody);

    el.drawerOverlay.classList.add('open');
    el.drawerBackdrop.classList.add('open');
    el.drawerOverlay.setAttribute('aria-hidden', 'false');

    state.portalEls.forEach((node, value) => {
      const active = value === facet;
      node.classList.toggle('is-active', active);
      node.setAttribute('aria-pressed', active ? 'true' : 'false');
    });

    state.drawerOpenFacet = facet;
    if (triggerEl) state.drawerLastTrigger = triggerEl;

    // Focus management: move focus into the drawer on open.
    el.drawerClose.focus({ preventScroll: true });
  }

  function closeDrawer() {
    if (!state.drawerOpenFacet) return;
    el.drawerOverlay.classList.remove('open');
    el.drawerBackdrop.classList.remove('open');
    el.drawerOverlay.setAttribute('aria-hidden', 'true');

    state.portalEls.forEach((node) => {
      node.classList.remove('is-active');
      node.setAttribute('aria-pressed', 'false');
    });

    state.drawerOpenFacet = null;

    // Focus management: on close, return focus to whichever portal row opened the drawer.
    const toFocus = state.drawerLastTrigger;
    if (toFocus && document.body.contains(toFocus)) toFocus.focus({ preventScroll: true });
  }

  function togglePortal(facet, triggerEl) {
    if (state.drawerOpenFacet === facet) {
      closeDrawer();
    } else {
      openDrawer(facet, triggerEl);
    }
  }

  // Scrolls to and highlights a rendered drawer item by slug. Shared by hash-load
  // navigation and the command-palette "jump to item" action. By the time this runs the
  // owning drawer has already been populated synchronously via innerHTML (openDrawer, just
  // above), so this does not need requestAnimationFrame - which never fires while the tab is
  // backgrounded/hidden (e.g. a link opened behind another window: that used to silently
  // drop the highlight entirely). Every step below (querying the DOM, scrolling, adding a
  // class, focusing) runs synchronously and works identically whether document.hidden is
  // true or false.
  function scrollAndHighlight(slug) {
    const target = document.getElementById('item-' + slug);
    if (!target) return;
    document.querySelectorAll('.drawer-item--highlight').forEach((n) => n.classList.remove('drawer-item--highlight'));
    target.scrollIntoView({ behavior: 'smooth', block: 'center' });
    target.classList.add('drawer-item--highlight');
    target.focus({ preventScroll: true });
  }

  // Which facet "owns" a deep link or search result: the first tag in the item's tags array
  // (CHOSEN: tags is the union of job tags and the one derived section tag already computed
  // by scripts/sync-catalog.mjs / the dedupe() above, so tags[0] is always one of the 12
  // portals and is deterministic - it is whichever tag sync-catalog.mjs or an explicit
  // data/tags.json entry listed first for that item).
  function facetForItem(item) {
    return (item.tags && item.tags[0]) || state.jobTags[0] || state.sectionTags[0] || null;
  }

  // V1.5.0 (FIX 2): `fromSearch` makes the search input itself the focus-return target, so
  // closing the drawer that a search result opened (Escape, the × or a click outside) puts
  // the caret back in the box the member was typing in, rather than on a portal row they
  // never touched. closeDrawer() already returns focus to state.drawerLastTrigger; this only
  // changes what that trigger is for the search path.
  function jumpToItem(slug, fromSearch) {
    const item = state.items.find((it) => it.slug === slug);
    if (!item) return;
    const facet = facetForItem(item);
    const trigger = fromSearch ? el.search : (state.portalEls.get(facet) || null);
    openDrawer(facet, trigger);
    history.replaceState(null, '', location.pathname + location.search + '#item-' + slug);
    scrollAndHighlight(slug);
  }

  function honorHash() {
    const hash = location.hash;
    if (!hash || !hash.startsWith('#item-')) return;
    jumpToItem(hash.slice(6));
  }

  let toastTimer = null;
  function showToast(msg) {
    el.toast.textContent = msg;
    el.toast.hidden = false;
    clearTimeout(toastTimer);
    toastTimer = setTimeout(() => { el.toast.hidden = true; }, 1800);
  }

  // ── Scroll affordance (change 5) ────────────────────────────────────────────────────────
  // Every internally-scrolling panel (.notewell-body, .release-body, .replays-body,
  // .live-rotation, .drawer-body) gets a soft fade + downward chevron appended as its last
  // child (see .scroll-fade in momentum.css), shown only while there is more content below
  // the current scroll position. Driven by a real scroll listener, not a static guess, and
  // re-checked on resize and every time the container's content is re-rendered (content here
  // is always rendered from JSON, so "is there more below" can only be answered after that
  // render, never assumed once at load) - every call site below runs this immediately after
  // the corresponding innerHTML assignment that populates the container.
  const SCROLL_AFFORDANCE_THRESHOLD_PX = 4; // "small threshold" the brief calls for

  function updateScrollAffordance(container, fade) {
    const hasMore = container.scrollTop + container.clientHeight < container.scrollHeight - SCROLL_AFFORDANCE_THRESHOLD_PX;
    fade.classList.toggle('is-visible', hasMore);
  }

  function setupScrollAffordance(container) {
    if (!container) return;
    // The container's own innerHTML is very often reassigned wholesale by the caller just
    // before this runs (renderNote/renderReleases/renderReplays/buildLiveRotation/openDrawer
    // all do `container.innerHTML = ...`), which would silently discard a fade element left
    // over from a previous render. Re-find-or-create it every call rather than assuming it
    // survived.
    let fade = container.querySelector(':scope > .scroll-fade');
    if (!fade) {
      fade = document.createElement('div');
      fade.className = 'scroll-fade';
      fade.setAttribute('aria-hidden', 'true');
      // V1.5.0 (FIX 3, direct from Anric: "On all boxes that are scrollable, the arrow
      // indicator that there is more is too small."). Was a 13px '⌄' text glyph, whose real
      // painted mark is a fraction of that em box and which renders at a different weight in
      // every font that has it at all. It is an inline SVG chevron now: a stroked path at a
      // known px size (see .scroll-fade-chevron in momentum.css), so the mark on screen is
      // the size the CSS says it is. Still inside the same pointer-events:none .scroll-fade,
      // so it can never block a click, and still shown/hidden purely by the real scroll
      // position measured in updateScrollAffordance() above.
      const chevron = document.createElement('span');
      chevron.className = 'scroll-fade-chevron';
      chevron.innerHTML =
        '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">' +
        '<path d="M4 8 L12 16 L20 8" fill="none" stroke="currentColor" ' +
        'stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>';
      fade.appendChild(chevron);
      container.appendChild(fade);
    }
    const update = () => updateScrollAffordance(container, fade);
    // The scroll/resize listeners only need wiring once per container - the container DOM
    // node itself is stable across re-renders (only its innerHTML/children change), so a
    // one-time dataset flag prevents piling up duplicate listeners on every re-render.
    if (!container.dataset.scrollAffordanceWired) {
      container.addEventListener('scroll', update, { passive: true });
      window.addEventListener('resize', update);
      container.dataset.scrollAffordanceWired = '1';
    }
    update();
  }

  // ── ALERTS (renamed from MVP NOTE, V1.3.0) ──────────────────────────────────────────────
  // data/note.json: a lead line, a series of titled, individually-addressable sections (each
  // carries an `id`, not read here but what makes a future single-item edit/hide/reorder a
  // data change, never a code change), and a signoff. Each section's `links` array names
  // substrings of its own `body` to hyperlink back to a url. Escaping link.text through the
  // same escapeHTML() used on the body guarantees the two encode identically, so the
  // substring match still finds them post-escape.
  //
  // Personalisation (V1.3.0): note.leadTemplate ("Welcome back, {name}.") renders whenever
  // window.getMagnumUser() returns an authenticated member with a first name on file; every
  // other case (no header script on the page, not authenticated, authenticated but no name
  // known) falls back to note.leadDefault, the exact neutral line this panel always showed.
  // Never fabricates a name: the only two states are "real first name" or the untouched
  // neutral default, no placeholder/generic name in between.
  function greetingLead(note) {
    if (!note) return '';
    const user = (typeof window.getMagnumUser === 'function') ? window.getMagnumUser() : null;
    const firstName = user && user.isAuthenticated ? (user.firstName || '').trim() : '';
    if (firstName && note.leadTemplate) {
      return note.leadTemplate.replace('{name}', firstName);
    }
    return note.leadDefault || note.lead || '';
  }

  function renderNote(note) {
    if (!el.noteBody || !note) return;
    const sectionsHTML = (note.sections || []).map((sec) => {
      let bodyHTML = escapeHTML(sec.body || '');
      (sec.links || []).forEach((link) => {
        const escText = escapeHTML(link.text);
        if (!escText) return;
        const anchor = `<a href="${escapeAttr(fullUrl(link.url))}" target="_blank" rel="noopener">${escText}</a>`;
        bodyHTML = bodyHTML.replace(escText, anchor);
      });
      const titleHTML = sec.title ? `<div class="note-sec-title">${escapeHTML(sec.title)}</div>` : '';
      return `<div class="note-sec"${sec.id ? ` id="alert-${escapeAttr(sec.id)}"` : ''}>${titleHTML}<p class="note-sec-body">${bodyHTML}</p></div>`;
    }).join('');

    const lead = greetingLead(note);
    el.noteBody.innerHTML =
      (lead ? `<p class="note-lead">${escapeHTML(lead)}</p>` : '') +
      sectionsHTML +
      (note.signoff ? `<p class="note-signoff">${escapeHTML(note.signoff)}</p>` : '');
    setupScrollAffordance(el.noteBody);
  }

  // ── Release feed (RELEASE FEED panel) ───────────────────────────────────────────────────
  const RELEASE_KIND_LABEL = { new: 'NEW', update: 'UPDATE', beta: 'BETA', soon: 'SOON', note: 'NOTE' };
  const RELEASE_KIND_CLASS = {
    new: 'mom-badge--new',
    update: 'mom-badge--update',
    beta: 'mom-badge--beta',
    soon: 'mom-badge--coming',
    note: 'mom-badge--note'
  };

  // Bug fixed V0.6.0: this used to wrap the ENTIRE entry body in one <a> whenever a url was
  // present, so hovering anywhere across a whole paragraph looked like one giant link ("it is
  // hyperlinking all of the text, not just the link to the tool"). Fix, same technique
  // renderNote() above already uses for its links[] array: data/releases.json now carries an
  // explicit `linkText` naming the exact tool/reference substring inside `body` that should
  // become the anchor. Escaping linkText through the same escapeHTML() used on body guarantees
  // the two encode identically, so the substring match still finds it post-escape. Only the
  // first occurrence is replaced (single .replace, not a global replace), matching renderNote.
  // An entry with a url but no linkText (or a linkText that fails to match) renders as plain
  // text - there is no fallback that links the whole body or any default target.
  function renderReleases(releases) {
    if (!el.releaseBody) return;
    const list = releases || [];
    el.releaseBody.innerHTML = list.map((r) => {
      const label = RELEASE_KIND_LABEL[r.kind] || String(r.kind || '').toUpperCase();
      const cls = RELEASE_KIND_CLASS[r.kind] || 'mom-badge--note';
      let bodyHTML = escapeHTML(r.body);
      if (r.url && r.linkText) {
        const escText = escapeHTML(r.linkText);
        if (escText && bodyHTML.includes(escText)) {
          const anchor = `<a href="${escapeAttr(fullUrl(r.url))}" target="_blank" rel="noopener">${escText}</a>`;
          bodyHTML = bodyHTML.replace(escText, anchor);
        }
      }
      // V1.3.0: badge moved to the right of the row, as its own right-aligned column
      // (order swapped in the markup + .release-row now justify-content:space-between, see
      // app.css) so the copy starts flush left on every line instead of the badge sitting
      // inside the text flow at the front of it.
      return `<div class="release-row"><span class="release-row-body">${bodyHTML}</span><span class="mom-badge ${cls}">${escapeHTML(label)}</span></div>`;
    }).join('');
    if (el.releaseCount) el.releaseCount.textContent = String(list.length);
    setupScrollAffordance(el.releaseBody);
  }

  // ── Live sessions panel ─────────────────────────────────────────────────────────────────
  // V0.7.0 (change 6): reuses SESSION_ROTATION / computeSessionRotationDates (below, defined
  // ahead of this call thanks to function hoisting - both are plain `function` declarations
  // in this same IIFE) rather than re-deriving the Wednesday math a second time for this
  // panel, and now renders each session's real next calendar date (not just a label) - see
  // that function's own comment for the rollover rule ("already passed this month -> next
  // month's Nth Wednesday").
  // V1.4.0 (05 LIVE, FIX 2, direct from Anric: "The live box is still not showing up
  // properly. It needs to be clear. It needs to be simple. Please look at the original MVP
  // dashboard."). This is now a straight port of his own Box 03 renderer in
  // docs/reference/v3-source/02B_IDENTITY-ORBIT-ROTATION.html (its tick() builds
  // '<div class="lr-row...">' + lr-tag + lr-name/lr-host + lr-cd), row shape for row shape:
  // a left chip (NEXT on the soonest, the short date on the other two), the session title,
  // the host beneath it in smaller muted text, and a right-aligned "5d 13h" countdown.
  //
  // What is NOT copied from him is the date arithmetic: he walks forward from
  // nextScheduledWed(), this repo keeps its own computeSessionRotationDates(), which resolves
  // each rotation entry's genuine next occurrence at 11:00 America/New_York with month
  // rollover. No date is hardcoded, and the three rows are still computed client-side in
  // America/New_York exactly as they were.
  //
  // The V1.3.0 row (a 1ST/2ND/3RD ordinal plus a nowrap ellipsised meta line) is gone: that
  // markup, combined with the row's negative side margins, is what clipped "NEXT" to "EXT"
  // and "Anric and Lauralouise" to "nric and Lauralouise" in the screenshot Anric sent.
  function buildLiveRotation() {
    if (!el.liveRotation) return;
    const sessions = computeSessionRotationDates(new Date())
      .slice()
      .sort((a, b) => (a.timestampMs || Infinity) - (b.timestampMs || Infinity));
    el.liveRotation.innerHTML = sessions.map((s, i) => `
      <div class="live-rotation-row${i === 0 ? ' is-next' : ''}">
        <span class="live-rotation-tag">${i === 0 ? 'NEXT' : escapeHTML(formatSessionChip(s.timestampMs))}</span>
        <span class="live-rotation-body">
          <span class="live-rotation-name">${escapeHTML(s.label)}</span>
          <span class="live-rotation-host">${escapeHTML(s.host)}</span>
        </span>
        <span class="live-rotation-cd" data-ts="${s.timestampMs == null ? '' : s.timestampMs}">${escapeHTML(formatSessionGap(s.timestampMs, Date.now()))}</span>
      </div>
    `).join('');
    // V1.4.0: no setupScrollAffordance here any more - .live-rotation is content-sized now
    // (see app.css) and holds exactly three rows, so it never scrolls and never needs the
    // fade/chevron affordance. 06 REPLAYS, which genuinely does scroll, still gets it.
  }

  // Refreshes only the countdown cells built above, in place, on the same 1s tick the header
  // clock already runs (see tickHUD). Cheap: 3 text nodes, no re-render of the rows.
  function refreshLiveCountdowns() {
    if (!el.liveRotation) return;
    const now = Date.now();
    el.liveRotation.querySelectorAll('.live-rotation-cd').forEach((node) => {
      const raw = node.getAttribute('data-ts');
      if (!raw) return;
      node.textContent = formatSessionGap(Number(raw), now);
    });
  }

  // PROGRESS (V1.4.0): his .panel.mini-progress readout, under 05 LIVE. N and M are COUNTED
  // off data/journey.json (N = steps with state 'done', M = steps.length) and the NEXT label
  // is the first step not yet done - nothing here is typed in or guessed. This build has no
  // real member session, journey.json is deliberately all-'locked', so this renders 0 of 8.
  // His own screenshot's "5 / 8" is his real account and is NOT reproduced here: fabricating
  // a member's progress is exactly the thing this file's neutral-preview rule forbids.
  function renderJourneyProgress(journey) {
    if (!el.liveProgressValue) return;
    const steps = (journey && journey.steps) || [];
    const total = steps.length;
    const done = steps.filter((s) => s.state === 'done').length;
    const next = steps.find((s) => s.state !== 'done');
    const tail = next ? 'NEXT: ' + String(next.label).toUpperCase() : 'ALL STEPS COMPLETE';
    el.liveProgressValue.textContent = `${done} / ${total} · ${tail}`;
  }

  // ── Replays panel ───────────────────────────────────────────────────────────────────────
  function renderReplays(replays) {
    if (!el.replaysBody) return;
    const list = replays || [];
    el.replaysBody.innerHTML = list.map((r) => `
      <a class="replay-row" href="${escapeAttr(fullUrl(r.url))}" target="_blank" rel="noopener">
        <span class="replay-date">${escapeHTML(r.date)}</span>
        <span class="replay-title">${escapeHTML(r.title)}</span>
      </a>
    `).join('');
    if (el.replaysCount) el.replaysCount.textContent = String(list.length);
    setupScrollAffordance(el.replaysBody);
  }

  // ── Orb backdrop globe (#orb-globe-canvas) ──────────────────────────────────────────────
  // V0.7.0 (change 2). Ported from the MAESTRO ops console (magnum-ecosystem/ops/index.html
  // V3.9, .globe-layer/#globe-canvas, read-only reference, not modified): a rotating
  // wireframe-sphere point cloud behind the CORE/MAGNUS/ONLINE stage, with a faint latitude
  // wireframe and fading connection arcs, over a darkened radial-gradient backdrop. That
  // source builds it with three.js loaded from a CDN (`<script src="https://cdnjs...">`,
  // its own comment: "cdnjs tag MUST be 0.160.0"). This page cannot load an external
  // library or make an external request, so this is a from-scratch Canvas 2D
  // reimplementation of the same visual idea (fibonacci-sphere point cloud, rotation,
  // faint great-circle wireframe, fading arcs between random points) using hand-rolled
  // perspective projection instead of three.js's WebGL pipeline. It renders BEHIND the gear
  // cluster (momentum.css: .orb-globe-layer is z-index 0, .orb-decor-rings/.gear-cluster are
  // z-index 1) so it reads as atmosphere, never competing with the gears for attention.
  //
  // Perf, per the brief:
  //   - Frame rate capped at ~30fps (GLOBE_FRAME_INTERVAL_MS below), via a timestamp-delta
  //     check inside the rAF loop - the loop still ticks every animation frame (rAF cannot
  //     itself be throttled from inside the page) but skips all work/redraw unless enough
  //     wall-clock time has actually elapsed. This is the standard mitigation for "do not
  //     run an uncapped rAF loop".
  //   - Paused via the Page Visibility API: a `visibilitychange` listener cancels the
  //     in-flight rAF handle the instant `document.hidden` becomes true, and restarts the
  //     loop when it becomes false again - no work happens at all in a backgrounded tab,
  //     not just a throttled amount.
  //   - `prefers-reduced-motion: reduce` stops it entirely: one static frame is drawn (a
  //     fixed rotation angle, no arcs) and no rAF loop is ever started. A change listener on
  //     the media query re-evaluates this live, so toggling the OS/devtools setting while
  //     the page is open starts or stops the loop immediately rather than only on next load.
  //   - Point/arc counts are deliberately small (subtlety, not spectacle) and roughly halve
  //     on narrow viewports, mirroring the source's own `isMobile` split.
  const GLOBE_FRAME_INTERVAL_MS = 1000 / 30; // ~30fps cap

  function readDurationMs(varName, fallbackMs) {
    const raw = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
    const match = /^([\d.]+)(s|ms)$/.exec(raw);
    if (!match) return fallbackMs;
    const value = parseFloat(match[1]);
    return match[2] === 's' ? value * 1000 : value;
  }

  function initOrbGlobe() {
    const canvas = document.getElementById('orb-globe-canvas');
    if (!canvas || !canvas.getContext) return;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    const reducedMotionQuery = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : null;
    // --mom-dur-slow (22s canonical estate tempo, section 1 of momentum.css) is reused as the
    // globe's full-rotation period - the SAME tempo the gear cluster itself already spins on
    // (.gear-cluster's mom-orb-cluster-spin animation), so the backdrop and the foreground
    // never visibly drift out of sync with each other. No new duration is invented.
    const ROTATION_PERIOD_MS = readDurationMs('--mom-dur-slow', 22000);
    const goldColor = (getComputedStyle(document.documentElement).getPropertyValue('--mom-gold-ops') || '#fabd59').trim() || '#fabd59';

    let width = 0, height = 0, dpr = 1;
    let points = [];
    let isMobileLayout = false;
    let arcs = [];
    let lastArcSpawn = 0;
    let lastFrameTime = 0;
    let rafHandle = null;

    function buildPoints() {
      isMobileLayout = canvas.clientWidth < 340;
      const count = isMobileLayout ? 46 : 70; // subtle: a fraction of the source's 260/520
      points = [];
      const goldenAngle = Math.PI * (3 - Math.sqrt(5));
      for (let i = 0; i < count; i++) {
        const y = 1 - (i / (count - 1)) * 2;
        const r = Math.sqrt(Math.max(0, 1 - y * y));
        const theta = goldenAngle * i;
        points.push({ x: Math.cos(theta) * r, y: y, z: Math.sin(theta) * r });
      }
    }

    function setSize() {
      const w = canvas.clientWidth;
      const h = canvas.clientHeight;
      if (!w || !h) return;
      dpr = Math.min(window.devicePixelRatio || 1, 2);
      canvas.width = Math.round(w * dpr);
      canvas.height = Math.round(h * dpr);
      width = w;
      height = h;
      buildPoints();
    }

    // 3D point (unit sphere) + a Y-axis rotation angle -> 2D canvas coordinates + a depth
    // factor (0..1, used to fade/scale far-side points so the sphere reads as solid, not
    // flat). Simple fixed-camera perspective projection, not a real 3D pipeline - sufficient
    // for a small, subtle backdrop ornament.
    function project(pt, angle) {
      const cos = Math.cos(angle), sin = Math.sin(angle);
      const rx = pt.x * cos - pt.z * sin;
      const rz = pt.x * sin + pt.z * cos;
      const camDist = 3.2;
      const scale = Math.min(width, height) * 0.42;
      const depth = camDist / (camDist + rz);
      return {
        x: width / 2 + rx * scale * depth,
        y: height / 2 + pt.y * scale * depth,
        depth: (rz + 1) / 2 // 0 (far side) .. 1 (near side), for opacity
      };
    }

    function spawnArc(now) {
      if (arcs.length >= (isMobileLayout ? 1 : 2)) return;
      const a = points[Math.floor(Math.random() * points.length)];
      const b = points[Math.floor(Math.random() * points.length)];
      if (!a || !b || a === b) return;
      arcs.push({ a: a, b: b, start: now, phase: 'draw' });
    }

    function drawArc(arc, angle, now) {
      const p1 = project(arc.a, angle);
      const p2 = project(arc.b, angle);
      const mx = (p1.x + p2.x) / 2;
      const my = (p1.y + p2.y) / 2 - Math.min(width, height) * 0.12;
      const elapsed = now - arc.start;
      const drawMs = 700, holdMs = 600, fadeMs = 700;
      let t, opacity;
      if (elapsed < drawMs) {
        t = elapsed / drawMs;
        opacity = Math.min(0.7, t * 1.2);
      } else if (elapsed < drawMs + holdMs) {
        t = 1;
        opacity = 0.7;
      } else if (elapsed < drawMs + holdMs + fadeMs) {
        t = 1;
        opacity = Math.max(0, 0.7 * (1 - (elapsed - drawMs - holdMs) / fadeMs));
      } else {
        return false; // finished, caller removes it
      }
      ctx.save();
      ctx.strokeStyle = goldColor;
      ctx.globalAlpha = opacity;
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(p1.x, p1.y);
      ctx.quadraticCurveTo(mx, my, p1.x + (p2.x - p1.x) * t, p1.y + (p2.y - p1.y) * t);
      ctx.stroke();
      ctx.restore();
      return true;
    }

    // Faint latitude wireframe (a handful of horizontal great-circle bands), the Canvas 2D
    // stand-in for the source's SphereGeometry wireframe mesh (opacity 0.08 there) - reads as
    // concentric rings as the sphere rotates, without needing real 3D line geometry.
    const LATITUDES = [-0.6, -0.2, 0.2, 0.6];
    function drawWireframe(angle) {
      ctx.save();
      ctx.strokeStyle = 'rgba(184, 137, 62, 0.5)';
      ctx.lineWidth = 1;
      LATITUDES.forEach((latY) => {
        const ringR = Math.sqrt(Math.max(0, 1 - latY * latY));
        const segments = 40;
        ctx.beginPath();
        for (let i = 0; i <= segments; i++) {
          const t = (i / segments) * Math.PI * 2;
          const pt = project({ x: Math.cos(t) * ringR, y: latY, z: Math.sin(t) * ringR }, angle);
          ctx.globalAlpha = 0.05 + 0.08 * pt.depth;
          if (i === 0) ctx.moveTo(pt.x, pt.y);
          else ctx.lineTo(pt.x, pt.y);
        }
        ctx.stroke();
      });
      ctx.restore();
    }

    function drawFrame(angle, now, includeArcs) {
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      ctx.clearRect(0, 0, width, height);
      drawWireframe(angle);
      points.forEach((pt) => {
        const p = project(pt, angle);
        ctx.beginPath();
        ctx.fillStyle = goldColor;
        ctx.globalAlpha = 0.15 + 0.45 * p.depth;
        const r = 0.6 + 0.9 * p.depth;
        ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
        ctx.fill();
      });
      ctx.globalAlpha = 1;
      if (includeArcs) {
        for (let i = arcs.length - 1; i >= 0; i--) {
          const alive = drawArc(arcs[i], angle, now);
          if (!alive) arcs.splice(i, 1);
        }
      }
    }

    function angleForTime(now) {
      return (now % ROTATION_PERIOD_MS) / ROTATION_PERIOD_MS * Math.PI * 2;
    }

    function tick(now) {
      rafHandle = requestAnimationFrame(tick);
      if (document.hidden) return; // Page Visibility pause: skip all work while backgrounded
      if (now - lastFrameTime < GLOBE_FRAME_INTERVAL_MS) return; // ~30fps cap
      lastFrameTime = now;
      if (now - lastArcSpawn > 1400) { spawnArc(now); lastArcSpawn = now; }
      drawFrame(angleForTime(now), now, true);
    }

    function startLoop() {
      if (rafHandle !== null) return;
      lastFrameTime = 0;
      rafHandle = requestAnimationFrame(tick);
    }
    function stopLoop() {
      if (rafHandle === null) return;
      cancelAnimationFrame(rafHandle);
      rafHandle = null;
    }

    function applyMotionPreference() {
      stopLoop();
      arcs = [];
      if (reducedMotionQuery && reducedMotionQuery.matches) {
        drawFrame(0.4, 0, false); // one static frame, matching the source's own reduced-motion fallback angle
      } else {
        startLoop();
      }
    }

    function resizeAndRedraw() {
      setSize();
      if (!(reducedMotionQuery && reducedMotionQuery.matches)) drawFrame(angleForTime(performance.now()), performance.now(), false);
    }

    setSize();
    applyMotionPreference();

    // ResizeObserver on the canvas itself, not just a window `resize` listener: at the point
    // initOrbGlobe() runs (synchronously inside init(), right after the rest of the page's
    // DOM is built), the grid/flex layout that determines .gear-cluster-zone's actual size
    // can still be a frame away from settling, so the very first setSize() call above can
    // read a too-small clientWidth/clientHeight - a real bug caught while verifying this
    // build (canvas backing store measured ~225x253 against an actual ~758x488 layout box
    // until something forced a resize). ResizeObserver fires again the moment the browser
    // reports the container's real size, fixing that first-paint case, and also keeps the
    // canvas correctly sized through the drawer-open/close, world-clock, and other layout
    // changes this page makes after load that a plain window `resize` listener would miss
    // entirely (none of those change the viewport size, so no `resize` event fires for them).
    if (window.ResizeObserver) {
      const ro = new ResizeObserver(() => resizeAndRedraw());
      ro.observe(canvas);
    }
    window.addEventListener('resize', resizeAndRedraw);
    document.addEventListener('visibilitychange', () => {
      // tick() already no-ops while hidden; explicitly stopping/restarting the rAF loop here
      // (rather than only relying on the in-loop check) means zero rAF callbacks fire at all
      // while backgrounded, not merely zero redraws.
      if (document.hidden) stopLoop();
      else if (!(reducedMotionQuery && reducedMotionQuery.matches)) startLoop();
    });
    if (reducedMotionQuery && reducedMotionQuery.addEventListener) {
      reducedMotionQuery.addEventListener('change', applyMotionPreference);
    }
  }

  // ── Orb (gear-cluster) ──────────────────────────────────────────────────────────────────
  // Renders entirely from data/orb.json + data/journey.json - there is no hardcoded gear
  // markup anywhere in this file or in index.html. orb.json was hand-extracted from the live
  // app.magnumvault.vip/dashboard .gear-cluster-zone markup (see the file's own _comment); it
  // is not padded to any assumed count, it lists exactly the real gear elements found there.
  // journey.json supplies a per-step status (done/current/locked) that is applied via
  // data-state, matched to a gear by its `tool` slug/step - momentum.css section 10 carries
  // the three distinct visual treatments per state, this function only wires the attribute.
  // V0.7.1: renamed from "complete" to "done" to match docs/reference/live-orb.css's own
  // data-state attribute values exactly.
  const JOURNEY_STATE_LABEL = { done: 'Done', current: 'Current', locked: 'Locked' };

  function journeyStateForStep(step, journeySteps) {
    const match = journeySteps.find((s) => s.step === step);
    return match ? match.state : null;
  }

  function gearHTML(gear, state) {
    const stateAttr = state ? ` data-state="${escapeAttr(state)}"` : '';
    // Graceful image-load degrade: on error, hide the <img> and flag the disc with a class
    // that gives it a plain fallback ring background (momentum.css) instead of a broken-image
    // icon. The gear shape (disc + label) always renders regardless of image success.
    const onerror = `this.style.display='none';this.parentElement.classList.add('gear-disc-inner--fallback');`;
    return `
      <a href="${escapeAttr(gear.href)}" target="_blank" rel="noopener" class="${escapeAttr(gear.class)}" data-step="${gear.step}"${stateAttr} aria-label="${escapeAttr(gear.ariaLabel)}">
        <span class="gear-disc">
          <span class="gear-disc-inner">
            <img src="${escapeAttr(gear.image.local)}" alt="" loading="eager" decoding="async" fetchpriority="high" onerror="${onerror}">
          </span>
        </span>
        <span class="gear-label">${escapeHTML(gear.label)}</span>
      </a>
    `;
  }

  function centerHTML(center) {
    if (!center) return '';
    const onerror = `this.style.display='none';this.parentElement.classList.add('gear-center--fallback');`;
    return `
      <div class="gear-center" id="gear-center" aria-label="${escapeAttr(center.ariaLabel || center.label || '')}">
        <img src="${escapeAttr(center.image.local)}" alt="" onerror="${onerror}">
      </div>
    `;
  }

  function buildOrb(orb, journey) {
    if (!el.gearCluster || !orb) return;
    const gears = orb.gears || [];
    const journeySteps = (journey && journey.steps) || [];

    el.gearCluster.innerHTML =
      gears.map((gear) => gearHTML(gear, journeyStateForStep(gear.step, journeySteps))).join('') +
      centerHTML(orb.center);

    // Journey progress readout: "N of M done", N and M from two genuinely independent
    // counts (N = filter over journeySteps by state, M = journeySteps.length), never a
    // ratio built by summing the same list back into its own denominator.
    if (el.orbJourneyReadout) {
      const total = journeySteps.length;
      const done = journeySteps.filter((s) => s.state === 'done').length;
      el.orbJourneyReadout.textContent = total ? `${done} of ${total} done` : '';
    }
    if (el.orbJourneyLegend) {
      el.orbJourneyLegend.innerHTML = ['done', 'current', 'locked'].map((state) => `
        <span class="orb-journey-legend-item">
          <span class="orb-journey-swatch orb-journey-swatch--${state}" aria-hidden="true"></span>
          ${escapeHTML(JOURNEY_STATE_LABEL[state])}
        </span>
      `).join('');
    }
  }

  // ── Orb chrome: corner shortcuts + background texture (V0.8.0) ─────────────────────────
  // Ported verbatim from docs/reference/v3-source/02A_STYLES.html (.corner-shortcut CSS,
  // V3.9.14) and 02B_IDENTITY-ORBIT-ROTATION.html (the four <a class="corner-shortcut">
  // anchors + the --cluster-bg inline style, V3.9.22) - real GHL section source, not
  // reverse-engineered from the rendered page. Replaces the V0.6.0/V0.7.1 corner shortcuts,
  // which rendered as text-only chips (no matching icon assets existed yet) driven by
  // hardcoded anchors in index.html. The four corner PNGs now exist locally
  // (public/assets/orb/corner-*.webp) and the cluster background texture asset also exists
  // (cluster-bg.webp), so both render here from data/orb.json's "corners" and "background"
  // entries, matching the "render from JSON, nothing hardcoded in index.html" rule the rest
  // of this file follows - index.html now only carries an empty #orb-corners container and
  // the static (non-image) leader-line <path> geometry.
  //
  // Drawer mapping. V1.5.0 (FIX 6, direct from Anric: "Pressing the Tools button in box 4
  // does not do anything."), all four corners audited and all four now do something real:
  //   TOOLS    -> the TOOLS virtual facet drawer (see itemsForFacet above). Was href
  //               "#portal-rail", an anchor to a rail already on screen, so the click
  //               genuinely did nothing visible. This is the approved proposal: tools span
  //               facets rather than being one of them.
  //   PROGRAMS -> the PROGRAMS portal drawer. Was already correct; re-verified.
  //   LIBRARY  -> the LIBRARY portal drawer. Was already correct; re-verified.
  //   EVENTS   -> scrolls to and flashes panel 05 LIVE. Was mapped to the LIVE facet, and
  //               LIVE was removed as a portal in V1.3.0, so it opened an empty drawer
  //               ("Nothing tagged LIVE yet."). Panel 05 now holds the rotation and the
  //               Magnum Cafe, so that is where it points. No removed facet is referenced.
  // The mapping itself lives in data/orb.json (corners[].facet / corners[].action /
  // corners[].target), not here, same "render from JSON" rule as everything else.
  function cornerHTML(corner) {
    const hasFacet = !!corner.facet;
    const isScroll = corner.action === 'scrollTo' && !!corner.target;
    let href = '#';
    if (isScroll) href = escapeAttr(corner.target);
    else if (!hasFacet) href = escapeAttr(corner.fallbackAnchor || '#portal-rail');
    const facetAttr = hasFacet ? ` data-facet="${escapeAttr(corner.facet)}"` : '';
    const actionAttr = isScroll
      ? ` data-action="scrollTo" data-target="${escapeAttr(corner.target)}"`
      : '';
    return `
      <a href="${href}" class="${escapeAttr(corner.class)}"${facetAttr}${actionAttr} aria-label="${escapeAttr(corner.ariaLabel)}">
        <img src="${escapeAttr(corner.image.local)}" alt="${escapeAttr(corner.alt || '')}">
      </a>
    `;
  }

  function buildOrbChrome(orb) {
    if (!orb) return;
    // --cluster-bg: 02A line 1770-1777 renders this custom property as a background-image
    // on .gear-cluster-zone::after whenever it is set inline. Source's own comment sets it
    // to a url(...) photograph; this build does the same now that the real local asset
    // exists, instead of V0.7.1's invented pure-CSS gear-ring gradient fallback.
    if (orb.background && orb.background.image && el.gearClusterZone) {
      el.gearClusterZone.style.setProperty('--cluster-bg', `url('${orb.background.image.local}')`);
    }
    if (el.orbCorners && Array.isArray(orb.corners)) {
      el.orbCorners.innerHTML = orb.corners.map(cornerHTML).join('');
    }
  }

  // Visible click feedback (FIX 6: "Each corner must give visible feedback on click. None may
  // be a dead control."). One short-lived class, removed on a timer, so the affordance does
  // not depend on the corner's own :hover state and fires identically for a keyboard
  // activation. The animation itself is disabled under prefers-reduced-motion (momentum.css),
  // where the class still lands and still reads as a static highlight for its duration.
  const CORNER_PULSE_MS = 620;
  function pulseCorner(node) {
    if (!node) return;
    node.classList.remove('corner-shortcut--pulse');
    void node.offsetWidth; // restart the animation if the same corner is clicked twice
    node.classList.add('corner-shortcut--pulse');
    setTimeout(() => node.classList.remove('corner-shortcut--pulse'), CORNER_PULSE_MS);
  }

  // Scrolls a whole panel into view under the sticky header and flashes it. Used by the
  // EVENTS corner (05 LIVE). scroll-margin-top on the panel (app.css) is what keeps the
  // sticky header from landing on top of the panel's own title - the same defect FIX 2 is
  // about, so it is solved the same way here rather than with a magic pixel offset.
  const PANEL_FLASH_MS = 1500;
  function scrollToPanelAndFlash(selector) {
    const panel = document.querySelector(selector);
    if (!panel) return false;
    panel.scrollIntoView({ behavior: 'smooth', block: 'start' });
    panel.classList.remove('mom-panel--flash');
    void panel.offsetWidth;
    panel.classList.add('mom-panel--flash');
    setTimeout(() => panel.classList.remove('mom-panel--flash'), PANEL_FLASH_MS);
    return true;
  }

  function wireCornerShortcuts() {
    document.querySelectorAll('.corner-shortcut').forEach((node) => {
      node.addEventListener('click', (e) => {
        const facet = node.dataset.facet;
        const action = node.dataset.action;
        if (facet) {
          e.preventDefault();
          pulseCorner(node);
          togglePortal(facet, state.portalEls.get(facet) || node);
        } else if (action === 'scrollTo' && node.dataset.target) {
          e.preventDefault();
          pulseCorner(node);
          scrollToPanelAndFlash(node.dataset.target);
        }
      });
    });
  }

  // ── Sticky-header height, published as --mn-bar-h (V1.5.0, FIX 2) ──────────────────────
  // Anric: "there is no way to close that when you're done. Unless you scroll the whole page
  // because the header covers the top address bar of the search results, including the x to
  // exit out." Root cause: #mn-bar is position:sticky, top:0, z-index:9999; .drawer-overlay
  // and .drawer-backdrop were position:fixed, top:0, z-index 100/99. The drawer therefore
  // opened UNDERNEATH the header, and the piece the header covered was exactly .drawer-head,
  // which carries the title, the count and the × close button. The backdrop was covered in
  // the same strip, so clicking there hit the header instead of closing anything.
  //
  // The header's height is not a constant this file can hardcode: it changes with the
  // breakpoint (one row at desktop, two below 1100) and with the logo/label rules at 1500,
  // 1280, 768 and 480. So it is MEASURED and published as a custom property, and momentum.css
  // offsets the drawer and the backdrop by it. ResizeObserver, not just a window resize
  // listener: the bar also changes height when the wordmark/tagline/labels drop, and when a
  // web font finishes swapping in, neither of which fires a resize event.
  function setHeaderHeightVar() {
    const bar = document.getElementById('mn-bar');
    if (!bar) return;
    const h = Math.round(bar.getBoundingClientRect().height);
    if (h > 0) document.documentElement.style.setProperty('--mn-bar-h', h + 'px');
  }

  function watchHeaderHeight() {
    const bar = document.getElementById('mn-bar');
    if (!bar) return;
    setHeaderHeightVar();
    if (window.ResizeObserver) {
      new ResizeObserver(setHeaderHeightVar).observe(bar);
    }
    window.addEventListener('resize', setHeaderHeightVar);
    if (document.fonts && document.fonts.ready && document.fonts.ready.then) {
      document.fonts.ready.then(setHeaderHeightVar).catch(() => {});
    }
  }

  // ── Catalog telemetry panel ─────────────────────────────────────────────────────────────
  // Every figure below is an independent count over state.items / state.jobTags /
  // state.sectionTags. None of them is derived by summing the others back into their own
  // denominator - the exact "176 / 176" shape this file's header comment calls out and
  // refuses to reproduce. Where a figure is meaningfully a portion of the catalog (live,
  // new, beta, coming soon, no-url), it gets a meter bar against the real total item
  // count. FACETS is a count of a different kind of thing (available portals, not catalog
  // items) so it renders as a bare figure with no bar rather than a manufactured ratio.
  function buildTelemetry() {
    const total = state.items.length;
    const statusCount = (status) => state.items.filter((it) => it.status === status).length;
    const noUrlCount = state.items.filter((it) => !it.url).length;
    const facetCount = state.jobTags.length + state.sectionTags.length;

    const totalEl = document.getElementById('telemetry-total');
    if (totalEl) totalEl.textContent = String(total);

    const rows = [
      { label: 'LIVE', value: statusCount('live'), bar: true },
      { label: 'NEW', value: statusCount('new'), bar: true },
      { label: 'BETA', value: statusCount('beta'), bar: true },
      { label: 'COMING SOON', value: statusCount('coming_soon'), bar: true },
      { label: 'NO URL', value: noUrlCount, bar: true },
      { label: 'FACETS', value: facetCount, bar: false }
    ];

    const list = document.getElementById('telemetry-meter-list');
    if (!list) return;
    list.innerHTML = rows.map((r) => {
      const pct = r.bar && total ? Math.round((r.value / total) * 1000) / 10 : 0;
      const track = r.bar
        ? `<div class="mom-meter-track"><div class="mom-meter-fill" style="--mom-lvl:${pct}%"></div></div>`
        : '';
      return `
        <div class="mom-meter telemetry-row">
          <div class="mom-meter-row"><span>${escapeHTML(r.label)}</span><b class="telemetry-figure">${r.value}</b></div>
          ${track}
        </div>
      `;
    }).join('');
  }

  // ── Command-palette search ──────────────────────────────────────────────────────────────
  // Ported from the ops console's omni-search (id="omnisearch" / "search-results" /
  // "sr-item" in magnum-ecosystem/ops/index.html): an index built once from the loaded
  // data, a dropdown of top matches with a category badge, arrow-key navigation, Enter to
  // jump, Escape to close, click-outside to close, and a global Cmd+K / Ctrl+K to focus it.
  // Selecting a result now opens that item's drawer (see facetForItem/jumpToItem above) and
  // scrolls to it inside, instead of scrolling a flat list.
  let paletteRows = [];
  let paletteActive = -1;

  function paletteMatches(query) {
    const q = query.trim().toLowerCase();
    if (!q) return [];
    return state.items
      .filter((it) => (it.name + ' ' + it.purpose + ' ' + it.tags.join(' ')).toLowerCase().includes(q))
      .slice(0, 8);
  }

  // V1.5.0 (FIX 2): the dropdown gets its own visibly reachable close control, not just the
  // Escape key and a click outside. It sits in .sr-head, which is the first thing painted
  // and is never covered by anything (the dropdown hangs BELOW the header it lives inside),
  // and it returns focus to the search input rather than dropping focus on the body.
  const SR_CLOSE_BUTTON =
    '<button type="button" class="sr-close" id="sr-close" aria-label="Close search results" title="Close (Esc)">&times;</button>';

  // V1.5.0 (FIX 2): the dropdown is anchored to the BOTTOM EDGE OF THE HEADER, not to the
  // bottom edge of the input. Anchored to the input (the V1.4.0 behaviour) its top landed
  // 20px inside the bar's own lower band at 1680, so the panel's head, and the close control
  // in it, sat on top of header chrome - the same overlap Anric reported, in a smaller dose.
  // position:fixed plus measured coordinates rather than a CSS offset, because the gap
  // between the input's bottom and the bar's bottom is the bar's padding plus border, which
  // differs at every one of this header's four breakpoints.
  function positionPalette() {
    if (!el.searchResults || !el.searchResults.classList.contains('open')) return;
    const wrap = el.search && el.search.closest('.search-wrap');
    const bar = document.getElementById('mn-bar');
    if (!wrap || !bar) return;
    const w = wrap.getBoundingClientRect();
    const b = bar.getBoundingClientRect();
    el.searchResults.style.left = Math.round(w.left) + 'px';
    el.searchResults.style.width = Math.round(w.width) + 'px';
    el.searchResults.style.top = Math.round(b.bottom + 6) + 'px';
    el.searchResults.style.right = 'auto';
    el.searchResults.style.bottom = 'auto';
  }

  function wirePaletteClose() {
    const btn = el.searchResults ? el.searchResults.querySelector('#sr-close') : null;
    if (!btn) return;
    btn.addEventListener('click', (e) => {
      e.preventDefault();
      e.stopPropagation();
      closePalette();
      if (el.search) el.search.focus();
    });
  }

  function paintPalette() {
    if (!el.searchResults) return;
    if (!paletteRows.length) {
      el.searchResults.innerHTML =
        `<div class="sr-head"><span class="sr-head-text">no match in the vault &middot; esc closes</span>${SR_CLOSE_BUTTON}</div>` +
        `<div class="sr-empty">No match in the vault</div>`;
      el.searchResults.classList.add('open');
      el.search.setAttribute('aria-expanded', 'true');
      wirePaletteClose();
      positionPalette();
      return;
    }
    el.searchResults.innerHTML =
      `<div class="sr-head"><span class="sr-head-text">${paletteRows.length} match${paletteRows.length > 1 ? 'es' : ''} &middot; enter jumps &middot; esc closes</span>${SR_CLOSE_BUTTON}</div>` +
      paletteRows.map((it, i) => {
        const cat = facetForItem(it) || 'ITEM';
        return `<div class="sr-item${i === paletteActive ? ' active' : ''}" role="option" data-slug="${escapeAttr(it.slug)}">` +
          `<span class="sr-badge">${escapeHTML(badgeFor(cat))}</span>` +
          `<span class="sr-name">${escapeHTML(it.name)}</span>` +
          `<span class="sr-cat">${escapeHTML(cat)}</span>` +
        `</div>`;
      }).join('');
    el.searchResults.classList.add('open');
    el.search.setAttribute('aria-expanded', 'true');
    el.searchResults.querySelectorAll('.sr-item').forEach((row) => {
      row.addEventListener('click', () => selectSearchResult(row.dataset.slug));
    });
    wirePaletteClose();
    positionPalette();
  }

  function renderPalette(query) {
    paletteRows = paletteMatches(query);
    paletteActive = paletteRows.length ? 0 : -1;
    if (!query.trim()) { closePalette(); return; }
    paintPalette();
  }

  function closePalette() {
    if (!el.searchResults) return;
    el.searchResults.classList.remove('open');
    el.searchResults.innerHTML = '';
    el.search.setAttribute('aria-expanded', 'false');
    paletteRows = [];
    paletteActive = -1;
  }

  function selectSearchResult(slug) {
    closePalette();
    jumpToItem(slug, true);
  }

  function wireGlobalControls() {
    el.search.addEventListener('input', () => {
      state.query = el.search.value.trim().toLowerCase();
      renderPalette(el.search.value);
    });

    el.search.addEventListener('focus', () => {
      if (el.search.value.trim()) renderPalette(el.search.value);
    });

    if (el.hudSearchAffordance) {
      el.hudSearchAffordance.addEventListener('click', () => {
        el.search.scrollIntoView({ behavior: 'smooth', block: 'center' });
        el.search.focus();
      });
    }

    if (el.drawerClose) el.drawerClose.addEventListener('click', closeDrawer);
    if (el.drawerBackdrop) el.drawerBackdrop.addEventListener('click', closeDrawer);

    el.search.addEventListener('keydown', (e) => {
      if (!el.searchResults || !el.searchResults.classList.contains('open')) return;
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        paletteActive = paletteRows.length ? Math.min(paletteActive + 1, paletteRows.length - 1) : -1;
        paintPalette();
      } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        paletteActive = paletteRows.length ? Math.max(paletteActive - 1, 0) : -1;
        paintPalette();
      } else if (e.key === 'Enter' && paletteRows[paletteActive]) {
        e.preventDefault();
        selectSearchResult(paletteRows[paletteActive].slug);
      }
    });

    document.addEventListener('keydown', (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        // Command-palette focus, ported from the ops console (Cmd+K / Ctrl+K on omnisearch).
        e.preventDefault();
        el.search.scrollIntoView({ behavior: 'smooth', block: 'center' });
        el.search.focus();
        el.search.select();
      } else if (e.key === '/' && document.activeElement !== el.search) {
        e.preventDefault();
        el.search.focus();
      } else if (e.key === 'Escape') {
        if (document.activeElement === el.search && el.searchResults && el.searchResults.classList.contains('open')) {
          closePalette();
        } else if (document.activeElement === el.search) {
          el.search.value = '';
          state.query = '';
        } else if (state.drawerOpenFacet) {
          // Escape closes the open drawer whenever the search palette isn't the thing
          // consuming the key (the branches above already handle that case).
          closeDrawer();
        }
      }
    });

    document.addEventListener('click', (e) => {
      if (!e.target.closest('.search-wrap')) closePalette();
    });

    // Keep the dropdown pinned to the header's bottom edge as the bar's own height changes
    // across breakpoints, and while the page scrolls under the sticky bar.
    window.addEventListener('resize', positionPalette);
    window.addEventListener('scroll', positionPalette, { passive: true });

    window.addEventListener('hashchange', honorHash);
  }

  // ── HUD clock + session countdown ───────────────────────────────────────────────────────
  // Pure client-side, no data source needed. The clock is UTC (a fixed reference every
  // member shares regardless of timezone). The countdown targets the next Wednesday
  // 11:00 America/New_York and reads off the fixed monthly rotation: 1st Wednesday MVP
  // Intensive, 2nd LL's Strategy Accelerator, 3rd Anric's Open Office Hours. A 4th/5th
  // Wednesday (not specified in the brief) cycles the same three-item rotation rather
  // than leaving the slot blank: CHOSEN, not harvested from a source. The LIVE panel's
  // countdown line reuses this same computation (tickHUD, below) rather than re-deriving
  // the Wednesday math a second time.
  //
  // V0.7.0 (change 6): SESSION_ROTATION now carries each session's host alongside its label,
  // and the LIVE panel (buildLiveRotation, above) no longer just repeats this label - it
  // renders each session's genuinely computed NEXT calendar date (see
  // computeSessionRotationDates below), not just a countdown timer.
  const SESSION_ROTATION = [
    { nth: 1, label: 'MVP Intensive', host: 'Anric and Lauralouise' },
    { nth: 2, label: "LL's Strategy Accelerator", host: 'Lauralouise Blatt' },
    { nth: 3, label: "Anric's Open Office Hours", host: 'Anric Blatt' }
  ];
  const SESSION_HOUR_ET = 11;
  const SESSION_MINUTE_ET = 0;
  const SESSION_WEEKDAY = 3; // Wednesday (Date.UTC/.getUTCDay() convention: 0=Sun..6=Sat)

  function pad2(n) { return String(n).padStart(2, '0'); }

  function etPartsOf(date) {
    const parts = new Intl.DateTimeFormat('en-US', {
      timeZone: 'America/New_York',
      weekday: 'short', year: 'numeric', month: '2-digit', day: '2-digit',
      hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
    }).formatToParts(date);
    const map = {};
    parts.forEach((p) => { map[p.type] = p.value; });
    const weekdayIndex = { Sun: 0, Mon: 1, Tue: 2, Wed: 3, Thu: 4, Fri: 5, Sat: 6 }[map.weekday];
    return {
      year: Number(map.year), month: Number(map.month), day: Number(map.day),
      hour: Number(map.hour) % 24, minute: Number(map.minute), second: Number(map.second),
      weekday: weekdayIndex
    };
  }

  // Pure calendar arithmetic: which day-of-month is the Nth `weekday` in ET calendar
  // year/month? Uses Date.UTC purely as a proleptic-Gregorian calendar calculator (not a
  // real timezone conversion - no clock/offset involved here), so this is safe and
  // timezone-independent given a Y/M already known to be the ET calendar date. Returns null
  // if that month doesn't have an Nth occurrence (irrelevant for nth 1-3, which every month
  // always has; kept general rather than assuming that).
  function nthWeekdayDayOfMonth(year, month /* 1-12 */, nth, weekday) {
    const firstWeekday = new Date(Date.UTC(year, month - 1, 1)).getUTCDay();
    const offset = (weekday - firstWeekday + 7) % 7;
    const day = 1 + offset + (nth - 1) * 7;
    const daysInMonth = new Date(Date.UTC(year, month, 0)).getUTCDate();
    return day <= daysInMonth ? day : null;
  }

  // ET wall-clock offset (in ms) at a given real instant: reading "now" as ET wall-clock
  // digits and treating those same digits as if they were UTC gives an offset that converts
  // any other ET wall-clock time back into a real timestamp. CHOSEN simplification (same one
  // the original countdown always used): assumes the UTC offset does not change between
  // `referenceNow` and the target date, true except across a DST boundary weekend - an
  // acceptable approximation for a countdown/schedule display, not a legal calendar system.
  function etOffsetMsAt(referenceNow) {
    const et = etPartsOf(referenceNow);
    const etAsUTC = Date.UTC(et.year, et.month - 1, et.day, et.hour, et.minute, et.second);
    return etAsUTC - referenceNow.getTime();
  }

  function etWallClockToTimestamp(year, month, day, hour, minute, referenceNow) {
    const offsetMs = etOffsetMsAt(referenceNow);
    const wallAsUTC = Date.UTC(year, month - 1, day, hour, minute, 0);
    return wallAsUTC - offsetMs;
  }

  // THE pure function the brief asks for: given a reference Date (real "now" in production,
  // a stubbed Date in a test), returns each SESSION_ROTATION entry's NEXT real occurrence
  // (11:00 America/New_York on its Nth Wednesday), rolling to next month whenever that
  // month's occurrence has already passed relative to referenceDate. No global clock is read
  // inside this function - every input comes from the `referenceDate` argument - so calling
  // it twice with two different fixed dates is a complete, isolated test of the rollover
  // logic (see scratchpad test harness used to verify this; not shipped in this file).
  function computeSessionRotationDates(referenceDate) {
    const et = etPartsOf(referenceDate);
    return SESSION_ROTATION.map((session) => {
      let year = et.year;
      let month = et.month;
      for (let guard = 0; guard < 14; guard++) { // safety bound, ~1 year of monthly rollover
        const day = nthWeekdayDayOfMonth(year, month, session.nth, SESSION_WEEKDAY);
        if (day !== null) {
          const timestampMs = etWallClockToTimestamp(year, month, day, SESSION_HOUR_ET, SESSION_MINUTE_ET, referenceDate);
          if (timestampMs >= referenceDate.getTime()) {
            return Object.assign({}, session, { timestampMs, year, month, day });
          }
        }
        month += 1;
        if (month > 12) { month = 1; year += 1; }
      }
      return Object.assign({}, session, { timestampMs: null });
    });
  }

  // "12 AUG" - the left chip on every row of 05 LIVE that is not the soonest one. Day/month
  // read in America/New_York (the same zone the schedule is defined in), so the printed date
  // always matches the zone the 11:00 start time means. V1.4.0: replaces the older
  // "WED 5 AUG" formatSessionDate, which printed a weekday that is the same Wednesday on
  // every row and so carried no information in a Wednesday-only rotation.
  function formatSessionChip(timestampMs) {
    if (timestampMs == null) return '';
    const parts = new Intl.DateTimeFormat('en-US', {
      timeZone: 'America/New_York', day: 'numeric', month: 'short'
    }).formatToParts(new Date(timestampMs));
    const map = {};
    parts.forEach((p) => { map[p.type] = p.value; });
    return `${map.day} ${map.month.toUpperCase()}`;
  }

  // "5d 13h" (or "13h" inside a day) - the right-aligned countdown on each row. Exactly the
  // shape his own Box 03 tick() prints: dd + 'd ' + hh + 'h', hours only once dd hits 0.
  function formatSessionGap(timestampMs, nowMs) {
    if (timestampMs == null) return '';
    const diff = Math.max(0, timestampMs - nowMs);
    const dd = Math.floor(diff / 86400000);
    const hh = Math.floor(diff / 3600000) % 24;
    return dd > 0 ? `${dd}d ${hh}h` : `${hh}h`;
  }

  function nextSessionTarget(now) {
    const et = etPartsOf(now);
    let daysUntilWed = (3 - et.weekday + 7) % 7;
    if (daysUntilWed === 0 && et.hour >= 11) daysUntilWed = 7;

    // Wall-clock ET "now", read as if it were UTC, gives an offset we can reuse to convert
    // the target ET wall-clock time back into a real timestamp (CHOSEN simplification: this
    // assumes the UTC offset does not change between now and the target, true except across
    // a DST boundary weekend, an acceptable approximation for a countdown display).
    const etNowAsUTC = Date.UTC(et.year, et.month - 1, et.day, et.hour, et.minute, et.second);
    const offsetMs = etNowAsUTC - now.getTime();
    const targetEtAsUTC = Date.UTC(et.year, et.month - 1, et.day + daysUntilWed, 11, 0, 0);
    const targetMs = targetEtAsUTC - offsetMs;

    const targetUTCDate = new Date(targetEtAsUTC);
    const nth = Math.ceil(targetUTCDate.getUTCDate() / 7);
    const label = SESSION_ROTATION[(nth - 1) % 3].label;
    return { targetMs, label };
  }

  function tickHUD() {
    const now = new Date();
    if (el.hudClock) {
      el.hudClock.textContent =
        `${pad2(now.getUTCHours())}:${pad2(now.getUTCMinutes())}:${pad2(now.getUTCSeconds())} UTC`;
    }
    const { targetMs, label } = nextSessionTarget(now);
    const remaining = Math.max(0, targetMs - now.getTime());
    const totalSeconds = Math.floor(remaining / 1000);
    const days = Math.floor(totalSeconds / 86400);
    const hours = Math.floor((totalSeconds % 86400) / 3600);
    const minutes = Math.floor((totalSeconds % 3600) / 60);
    const seconds = totalSeconds % 60;
    const countdownHTML = `${escapeHTML(label.toUpperCase())} IN <b>${days}D ${pad2(hours)}H ${pad2(minutes)}M ${pad2(seconds)}S</b>`;

    if (el.hudCountdown) el.hudCountdown.innerHTML = countdownHTML;
    // V1.4.0: the LIVE panel's own "NEXT SESSION ..." line is gone (his Box 03 has no such
    // line - each row carries its own countdown, and the header keeps the NEXT-LIVE readout),
    // so this tick now refreshes those three per-row countdowns instead.
    refreshLiveCountdowns();
  }

  // ── World clock (09, V1.3.0, direct from Anric: "he prefers the original") ─────────────
  // Ported from docs/reference/v3-source/08_ROADMAP-CLOCK-ACTIONS.html Box 14 (city pins,
  // real longitude/latitude percentages, HARVESTED VERBATIM from that file's inline
  // left/top style values, not recomputed) and 02B_IDENTITY-ORBIT-ROTATION.html's updateSun()
  // (the --sun-x solar-longitude formula, ported exactly). The equirectangular map itself
  // renders as a CSS background on #tz-ribbon (momentum.css .mom-tz-ribbon) using the local
  // public/assets/map/worldmap.webp - never the source's filesafe.space hotlink.
  const WORLD_CITIES = [
    { city: 'New York', zone: 'America/New_York', left: 29.4, top: 27.4 },
    { city: 'London', zone: 'Europe/London', left: 50, top: 21.4 },
    { city: 'Dubai', zone: 'Asia/Dubai', left: 65.4, top: 35.9 },
    { city: 'Mumbai', zone: 'Asia/Kolkata', left: 70.2, top: 39.4 },
    { city: 'Singapore', zone: 'Asia/Singapore', left: 78.8, top: 49.3 },
    { city: 'Tokyo', zone: 'Asia/Tokyo', left: 88.8, top: 30.2 },
    { city: 'Sydney', zone: 'Australia/Sydney', left: 92, top: 68.8 }
  ];

  function buildWorldClock() {
    if (!el.worldClock) return;
    // --tz-map: document-relative path, set inline (not written as a literal url() inside
    // momentum.css itself) so it resolves correctly in both the split public/ dev build and
    // the bundled dist/index.html build - see the comment on .mom-tz-ribbon in momentum.css
    // for why, same reasoning buildOrbChrome()'s --cluster-bg already follows.
    const ribbon = document.getElementById('tz-ribbon');
    if (ribbon) ribbon.style.setProperty('--tz-map', "url('assets/map/worldmap.webp')");
    el.worldClock.innerHTML = WORLD_CITIES.map((c) => `
      <div class="mom-city" style="left:${c.left}%; top:${c.top}%;">
        <div class="mom-city-dot" aria-hidden="true"></div>
        <div class="mom-city-label">${escapeHTML(c.city.toUpperCase())}</div>
        <div class="mom-city-time" data-zone="${escapeAttr(c.zone)}">--:--</div>
      </div>
    `).join('');
  }

  function tickWorldClock() {
    if (!el.worldClock) return;
    const now = new Date();
    el.worldClock.querySelectorAll('[data-zone]').forEach((node) => {
      const zone = node.dataset.zone;
      node.textContent = new Intl.DateTimeFormat('en-US', {
        timeZone: zone, hour: '2-digit', minute: '2-digit', hour12: false
      }).format(now);
    });

    // Sun position: ported verbatim from 02B_IDENTITY-ORBIT-ROTATION.html's updateSun(). The
    // sun sits overhead at the longitude where local solar time is noon; sunOffset is how
    // many hours from UTC that longitude currently is, normalized to -12..12, then mapped
    // onto the ribbon's 0-100% (0% = -180deg, 100% = +180deg, matching the map's own
    // equirectangular projection and the city pins' own left% convention above).
    const utcHourFloat = now.getUTCHours() + now.getUTCMinutes() / 60;
    let sunOffset = 12 - utcHourFloat;
    while (sunOffset > 12) sunOffset -= 24;
    while (sunOffset < -12) sunOffset += 24;
    const xPct = ((sunOffset + 12) / 24) * 100;
    const ribbon = document.getElementById('tz-ribbon');
    if (ribbon) ribbon.style.setProperty('--sun-x', xPct + '%');
  }

  // ── QUICK LINKS (JOB 1, V1.1.0, renamed from "footer links") ───────────────────────────
  // Rendered entirely from data/footer.json (13 entries, Anric's own labels - see that
  // file's own field-meaning comment). FOOTER-SPEC.md revision 3 removed the visible
  // live/coming status badge entirely: every entry is now a plain uppercase tile and the
  // whole tile is the click target, never just the label text. Three kinds of entry are
  // interactive:
  //   action "link"   -> a real <a href> to an external destination, target _blank
  //   action "anchor" -> a real <a href="#id"> same-page jump to an id that exists in this
  //                      page (#portal-rail)
  //   action "portal" -> a real <button> that calls togglePortal() with an existing facet,
  //                      the exact function the portal rail and orb corners already call
  // A tile is dimmed and aria-disabled whenever it has no real destination to send a member
  // to: action "none", or status "coming" as a defensive second gate (catches a future data
  // mistake where someone sets status back to coming but forgets to also flip action to
  // none - matches this file's own field-meaning comment, "coming... never clickable,
  // regardless of what destination is on file"). This is not a hardcoded list of three
  // labels: today it dims Opus Card, Bookstore, Marketplace (all named in the brief) and
  // also Webinar, which has status "live" but no confirmed destination yet (see
  // FOOTER-SPEC.md's own still-to-confirm item 2) - inventing one is against this file's own
  // rule, so it stays dimmed like the others until a real URL lands in data/footer.json. A
  // dimmed tile carries no title/tooltip and no text of any kind beyond its label - "nothing
  // pretends they work" applies to hover state too, not just the default view.
  function quickLinkTileHTML(link) {
    const isDisabled = link.action === 'none' || link.status === 'coming';
    const labelHTML = `<span class="mom-quicklink-label">${escapeHTML(link.label)}</span>`;

    if (!isDisabled && link.action === 'link' && link.destination) {
      return `<a class="mom-quicklink-tile" href="${escapeAttr(fullUrl(link.destination))}" target="_blank" rel="noopener">${labelHTML}</a>`;
    }
    if (!isDisabled && link.action === 'anchor' && link.target) {
      return `<a class="mom-quicklink-tile" href="${escapeAttr(link.target)}">${labelHTML}</a>`;
    }
    if (!isDisabled && link.action === 'portal' && link.facet) {
      return `<button type="button" class="mom-quicklink-tile mom-quicklink-tile--action" data-facet="${escapeAttr(link.facet)}">${labelHTML}</button>`;
    }
    // Dimmed tile: never an <a> with no href, never a bare hash link (the same rule
    // drawerItemHTML() above follows for a catalog item with no url), no title attribute
    // (no tooltip text either - "no label of any kind" means no label on hover too).
    return `<div class="mom-quicklink-tile mom-quicklink-tile--disabled" role="listitem" aria-disabled="true" tabindex="-1">${labelHTML}</div>`;
  }

  function buildQuickLinks(footer) {
    if (!el.quickLinks || !footer || !Array.isArray(footer.links)) return;
    el.quickLinks.innerHTML = footer.links.map(quickLinkTileHTML).join('');
    el.quickLinks.querySelectorAll('.mom-quicklink-tile--action[data-facet]').forEach((btn) => {
      btn.addEventListener('click', () => {
        const facet = btn.dataset.facet;
        togglePortal(facet, state.portalEls.get(facet) || btn);
      });
    });
  }

  // ── 12 FIND BY TOPIC // VIDEO BROWSER (V1.5.0, FIX 7) ──────────────────────────────────
  // Anric: "The current LIVE version has a way to actually search videos and show videos by
  // topic." Ported from his own Box 12 in
  // docs/reference/v3-source/08_ROADMAP-CLOCK-ACTIONS.html (the <details> + #tb-search /
  // #tb-cloud / #tb-results markup) and its renderTopicBrowser() in
  // 02B_IDENTITY-ORBIT-ROTATION.html (tag-frequency cloud, tag toggle, free-text filter, the
  // active-filter chips, the result-card shape, and the click-a-pill-to-filter behavior),
  // with the CSS from 02A_STYLES.html (momentum.css section 14). Collapsed by default,
  // exactly as his is.
  //
  // The module data is NOT hardcoded here. It comes from data/videos.json, which is his own
  // CURRICULUM array extracted programmatically out of 02B (36 modules, 9 topic tags in use)
  // and mirrored into public/data/ by scripts/sync-catalog.mjs like every other dataset. No
  // video title, url or tag in this build is invented; the only transform applied at
  // extraction was replacing the em dash character with a hyphen (estate law), documented in
  // that file's own _comment.
  //
  // Two deliberate deviations from his source, both estate rules, neither changing behavior:
  //   1. #tb-search is type="text", not type="search". This page's one search box is
  //      #search-input in the header (the "exactly one search input" rule that V1.2.0
  //      established after the two-competing-search-boxes defect). This is a scoped filter
  //      over one collapsed panel, not a second vault search, and it is typed and labelled
  //      as such so the two can never be confused.
  //   2. His .tb-tag-more carries font-style:italic. Italics are banned estate-wide, so that
  //      button reads as a quieter tone instead (momentum.css). It is moot in practice at
  //      9 tags versus his TOP_N of 30, but the rule is applied rather than assumed away.
  const TB_TOP_N = 30;
  const tbState = { tag: null, query: '', showAll: false, modules: [], labels: {} };

  function tbTagFrequency() {
    const freq = {};
    tbState.modules.forEach((m) => {
      (m.tags || []).forEach((t) => { freq[t] = (freq[t] || 0) + 1; });
    });
    return Object.keys(freq)
      .sort((a, b) => (freq[b] !== freq[a] ? freq[b] - freq[a] : a.localeCompare(b)))
      .map((t) => ({ tag: t, n: freq[t] }));
  }

  function tbProgramLabel(program) {
    return tbState.labels[program] || program;
  }

  function tbFiltered() {
    const q = (tbState.query || '').toLowerCase().trim();
    return tbState.modules.filter((m) => {
      if (tbState.tag && (m.tags || []).indexOf(tbState.tag) === -1) return false;
      if (q) {
        const hay = (m.name + ' ' + (m.desc || '') + ' ' + (m.tags || []).join(' ')).toLowerCase();
        if (hay.indexOf(q) === -1) return false;
      }
      return true;
    });
  }

  function tbRenderCloud() {
    const cloud = document.getElementById('tb-cloud');
    if (!cloud) return;
    const freq = tbTagFrequency();
    const slice = tbState.showAll ? freq : freq.slice(0, TB_TOP_N);
    let html = slice.map((f) => {
      const cls = 'tb-tag' + (tbState.tag === f.tag ? ' is-active' : '');
      return `<button type="button" class="${cls}" data-tag="${escapeAttr(f.tag)}" aria-pressed="${tbState.tag === f.tag ? 'true' : 'false'}">` +
        `${escapeHTML(f.tag)}<span class="tb-tag-n">${f.n}</span></button>`;
    }).join('');
    if (freq.length > TB_TOP_N) {
      html += `<button type="button" class="tb-tag tb-tag-more" data-action="toggle-all">` +
        `${tbState.showAll ? 'show top ' + TB_TOP_N : 'show all ' + freq.length}</button>`;
    }
    cloud.innerHTML = html;
  }

  function tbRenderResults() {
    const results = document.getElementById('tb-results');
    const active = document.getElementById('tb-active');
    if (!results) return;
    const filtered = tbFiltered();
    const q = (tbState.query || '').trim();

    if (active) {
      if (tbState.tag || q) {
        active.innerHTML =
          `<span class="tb-active-label">Showing ${filtered.length} of ${tbState.modules.length}</span>` +
          (tbState.tag
            ? `<span class="tb-active-chip">#${escapeHTML(tbState.tag)} <button type="button" data-action="clear-tag" aria-label="Clear tag">&times;</button></span>`
            : '') +
          (q
            ? `<span class="tb-active-chip">&quot;${escapeHTML(q)}&quot; <button type="button" data-action="clear-q" aria-label="Clear search">&times;</button></span>`
            : '');
      } else {
        active.innerHTML = '';
      }
    }

    if (!filtered.length) {
      results.innerHTML = '<div class="tb-empty">No modules match. Try a different topic.</div>';
      return;
    }
    results.innerHTML = filtered.map((m) => {
      const statusPill = m.status
        ? `<span class="tb-row-status tb-row-status--${escapeAttr(m.status)}">${escapeHTML(m.status)}</span>`
        : '';
      const tagPills = (m.tags || []).slice(0, 4)
        .map((t) => `<span class="tb-row-tag" data-tag="${escapeAttr(t)}">${escapeHTML(t)}</span>`)
        .join('');
      return `<a class="tb-row" href="${escapeAttr(fullUrl(m.url))}" target="_blank" rel="noopener">` +
        `<span class="tb-row-head">` +
          `<span class="tb-row-program">${escapeHTML(tbProgramLabel(m.program))}</span>${statusPill}` +
        `</span>` +
        `<span class="tb-row-title">${escapeHTML(m.name)}</span>` +
        `<span class="tb-row-desc">${escapeHTML(m.desc || '')}</span>` +
        `<span class="tb-row-tags">${tagPills}</span>` +
      `</a>`;
    }).join('');
  }

  function buildVideoBrowser(videos) {
    const wrap = document.getElementById('topic-browser-wrap');
    const countEl = document.getElementById('tb-count');
    const cloud = document.getElementById('tb-cloud');
    const results = document.getElementById('tb-results');
    const active = document.getElementById('tb-active');
    const search = document.getElementById('tb-search');
    if (!wrap || !cloud || !results) return;

    tbState.modules = (videos && Array.isArray(videos.modules)) ? videos.modules : [];
    tbState.labels = (videos && videos.programLabels) || {};
    tbState.tag = null;
    tbState.query = '';
    tbState.showAll = false;

    // The count in the summary line is a real count of what is loaded, never a typed
    // number: an empty or partial dataset reads as the number it actually has.
    if (countEl) countEl.textContent = String(tbState.modules.length);

    tbRenderCloud();
    tbRenderResults();

    cloud.addEventListener('click', (e) => {
      const btn = e.target.closest('button.tb-tag');
      if (!btn) return;
      if (btn.dataset.action === 'toggle-all') {
        tbState.showAll = !tbState.showAll;
        tbRenderCloud();
        return;
      }
      const tag = btn.dataset.tag;
      tbState.tag = (tbState.tag === tag) ? null : tag;
      tbRenderCloud();
      tbRenderResults();
    });

    results.addEventListener('click', (e) => {
      const pill = e.target.closest('.tb-row-tag');
      if (!pill) return;
      e.preventDefault();
      tbState.tag = pill.dataset.tag;
      tbRenderCloud();
      tbRenderResults();
      wrap.scrollIntoView({ behavior: 'smooth', block: 'start' });
    });

    if (active) {
      active.addEventListener('click', (e) => {
        const btn = e.target.closest('button');
        if (!btn) return;
        if (btn.dataset.action === 'clear-tag') tbState.tag = null;
        if (btn.dataset.action === 'clear-q') {
          tbState.query = '';
          if (search) search.value = '';
        }
        tbRenderCloud();
        tbRenderResults();
      });
    }

    if (search) {
      search.addEventListener('input', () => {
        tbState.query = search.value;
        tbRenderResults();
      });
      // Escape inside this filter clears it rather than bubbling up to the page-level
      // handler, which would otherwise close an unrelated drawer from a keypress the member
      // aimed at this box.
      search.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && search.value) {
          e.stopPropagation();
          search.value = '';
          tbState.query = '';
          tbRenderResults();
        }
      });
    }
  }

  async function init() {
    try {
      const [inventoryRaw, tagsFileRaw, linkHealthRaw, releasesRaw, replaysRaw, noteRaw, orbRaw, journeyRaw, footerRaw, videosRaw] = await Promise.all([
        loadJSON('/data/mvp-inventory.json'),
        loadJSON('/data/tags.json'),
        loadJSON('/data/link-health.json'),
        loadJSON('/data/releases.json'),
        loadJSON('/data/replays.json'),
        loadJSON('/data/note.json'),
        loadJSON('/data/orb.json'),
        loadJSON('/data/journey.json'),
        loadJSON('/data/footer.json'),
        loadJSON('/data/videos.json')
      ]);
      const inventory = stripUnderscoreKeys(inventoryRaw);
      const tagsFile = stripUnderscoreKeys(tagsFileRaw);
      const linkHealth = stripUnderscoreKeys(linkHealthRaw);
      const note = stripUnderscoreKeys(noteRaw);
      const orb = stripUnderscoreKeys(orbRaw);
      const journey = stripUnderscoreKeys(journeyRaw);
      const footer = stripUnderscoreKeys(footerRaw);
      const videos = stripUnderscoreKeys(videosRaw);
      const releases = releasesRaw; // top-level array, no "_generated" wrapper to strip
      const replays = replaysRaw;   // top-level array, no "_generated" wrapper to strip

      state.items = dedupe(inventory.sections || []);
      state.jobTags = tagsFile.jobTags || [];
      state.sectionTags = tagsFile.sectionTags || [];
      state.deadRules = (linkHealth.deadRules || []);

      // JOB 2 (V1.2.0): window.MVP_RESOURCES removed. It existed only to feed the ported
      // header's own #mn-search box (V1.0.0 port change 3) with a {t,d,k,c,u} index; that box
      // duplicated this page's own #search-input and is now deleted from index.html (see the
      // comment near the top of that file), so publishing a second catalog index for it to
      // read is dead work. This page's own search still uses state.items directly via
      // paletteMatches()/facetForItem() below, unchanged.

      buildPortalRail(el.portalList, [...state.jobTags, ...state.sectionTags]);

      renderNote(note);
      renderReleases(releases);
      buildLiveRotation();
      renderJourneyProgress(journey);
      renderReplays(replays);
      buildOrb(orb, journey);
      buildOrbChrome(orb);
      wireCornerShortcuts();
      initOrbGlobe();

      buildWorldClock();
      buildQuickLinks(footer);
      buildVideoBrowser(videos);
      watchHeaderHeight();
      buildTelemetry(); // computation always runs, see SHOW_TELEMETRY above for the visibility gate
      const telemetryPanel = document.getElementById('telemetry-panel');
      if (telemetryPanel) telemetryPanel.hidden = !SHOW_TELEMETRY;

      wireGlobalControls();
      honorHash();

      tickHUD();
      tickWorldClock();
      setInterval(tickHUD, 1000);
      setInterval(tickWorldClock, 1000);
    } catch (err) {
      if (el.drawerBody) {
        el.drawerBody.innerHTML = `<p style="color:var(--mom-red); padding:12px;">Could not load the catalog snapshot: ${escapeHTML(err.message)}</p>`;
      }
      console.error(err);
    }
  }

  init();
})();

</script>
</body>
</html>