@bongos/core 1.19.392 → 1.19.394

package/public-landing/index.html

@@ -68,7 +68,7 @@ ol,ul{list-style:none;padding:0}
    It rides on box-shadow, so any control carrying a shadow of its own would otherwise win on
    source order: the primary door re-states the pair below, glow first so dark keeps its lift. */
 :focus-visible{outline:2px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 8px var(--bg)}
-.skip{position:absolute;left:-9999px;top:0;z-index:9;min-height:24px;padding:11px 18px;border-radius:999px;
+.skip{position:absolute;left:-9999px;top:0;z-index:100;min-height:24px;padding:11px 18px;border-radius:999px;
   background:var(--bg-card);color:var(--ink);border:1px solid var(--rule);font-size:15px}
 .skip:focus{left:14px;top:14px}
 /* the skip link's target: focusable so the skip actually lands, but never ringed */
@@ -148,39 +148,76 @@ main:focus{outline:none;box-shadow:none}
 .scrim{position:absolute;top:calc(var(--top-h) * -1);left:0;right:0;bottom:0;z-index:1;
   background:var(--sky-scrim);pointer-events:none}
 
-/* ===================== top bar: three pill groups on one line ===================== */
-.topbar{position:relative;z-index:3;height:var(--top-h);display:flex;align-items:center;padding:0 26px}
-.topbar::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:128px;
-  background:var(--sky-topscrim);pointer-events:none}
-.topnav{display:flex;align-items:center;gap:12px;width:100%}
-.pill{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;
-  border-radius:var(--radius-pill);background:var(--pill-bg);border:1px solid var(--pill-edge);
-  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
-  font-family:inherit;font-size:16px;color:var(--ink);cursor:pointer;
-  transition:background .25s cubic-bezier(.2,.7,.3,1),color .2s ease}
-.pill:hover{background:var(--pill-bg-hi)}
-.mark-pill{gap:10px;padding:0 24px;background:var(--pill-bg-hi);letter-spacing:-.012em}
-.mark-pill svg{width:23px;height:18px;display:block;flex:none}
-.nav-pill{gap:0;padding:0 6px;margin:0 auto}
-.nav-pill a{padding:13px 22px;border-radius:var(--radius-pill);font-size:16px;text-transform:lowercase;
-  color:var(--ink-soft);transition:color .2s ease}
-.nav-pill a:hover{color:var(--ink)}
-.right-pills{display:flex;align-items:center;gap:10px}
-.mode-toggle{width:46px;min-width:46px;padding:0}
-.mode-toggle svg{width:18px;height:18px}
+/* ===================== the bar: no pill, one hairline (task 1003300) =====================
+   The hub's chrome on the front door. The ground is the page ground closed by one --rule
+   hairline; the sculpture starts under it, so the top wash (--sky-topscrim) is gone. The one
+   filled shape is the sign-in door. Same names as the hub's bar so the two pages are one bar. */
+.topbar{position:relative;z-index:50;height:var(--top-h);display:flex;align-items:center;gap:22px;
+  padding:0 26px;background:var(--bg);border-bottom:1px solid var(--rule)}
+.barLeft{display:flex;align-items:center;gap:26px;flex:1 1 auto;min-width:0}
+.barRight{display:flex;align-items:center;gap:20px;flex:none}
+.barMark{display:inline-flex;align-items:center;gap:10px;min-height:44px;flex:none;
+  font-family:var(--font-display);font-size:17px;font-weight:500;letter-spacing:-.015em;
+  color:var(--ink);text-shadow:var(--type-halo)}
+.barMark svg{width:23px;height:18px;display:block;flex:none}
+/* the right group is lowercase text; the OPEN trigger is underlined in the accent */
+.trig{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0;cursor:pointer;
+  background:none;border:0;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:15px;
+  font-weight:400;text-transform:lowercase;color:var(--ink-soft);transition:color .2s cubic-bezier(.2,.7,.3,1)}
+.trig:hover{color:var(--ink)}
+.trig[aria-expanded="true"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);
+  text-decoration-thickness:2px;text-underline-offset:7px}
+.trig .cv{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;
+  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s cubic-bezier(.2,.7,.3,1)}
+.trig[aria-expanded="true"] .cv{transform:rotate(180deg)}
+.whoSlot{display:inline-flex;align-items:center}
+.who{gap:9px}
+.who img{width:26px;height:26px;border-radius:var(--radius-pill);object-fit:cover;flex:none;border:1px solid var(--rule)}
+.who-name{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.modeBtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;cursor:pointer;
+  background:none;border:0;border-radius:var(--radius-pill);color:var(--ink-soft);transition:color .2s cubic-bezier(.2,.7,.3,1)}
+.modeBtn:hover{color:var(--ink)}
+.modeBtn svg{width:20px;height:20px}
 .sun{display:none}
-.signin{background:color-mix(in srgb,var(--ink) 92%,var(--bg));color:var(--bg);border-color:transparent;
-  text-transform:lowercase;font-weight:500;padding:0 30px}
+/* the sign-in door: the one filled shape on a bar with no pills — inverted ink, lowercase */
+.pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;
+  border-radius:var(--radius-pill);font-family:inherit;font-size:15px;color:var(--ink);cursor:pointer;
+  transition:background .25s cubic-bezier(.2,.7,.3,1),color .2s ease}
+.signin{background:color-mix(in srgb,var(--ink) 92%,var(--bg));color:var(--bg);border:0;
+  text-transform:lowercase;font-weight:500;padding:0 26px}
 .signin:hover{background:var(--ink);color:var(--bg)}
-/* the signed-in chip replaces the sign-in door in the same slot */
-#who img{width:26px;height:26px;border-radius:var(--radius-pill);flex:none;object-fit:cover}
-.who-name{font-size:15px;color:var(--ink);text-shadow:var(--type-halo);white-space:nowrap}
-.signout{text-transform:lowercase;padding:0 18px}
 :root[data-mode="dark"] .sun{display:block}
 :root[data-mode="dark"] .moon{display:none}
 @media (prefers-color-scheme:dark){:root:not([data-mode="light"]) .sun{display:block}
   :root:not([data-mode="light"]) .moon{display:none}}
 
+/* the menu bands (.menuBand — .band is this page's content sections): not floating cards. Full width on the card ground, closed by one hairline, pushing
+   the page down. Cells in a hairline-separated row, a lowercase display title over one clause;
+   the whole cell is the target. One authored move, dead under world.css's kill switch. */
+.menuBand{position:relative;z-index:49;background:var(--bg-card);border-bottom:1px solid var(--rule);
+  animation:bandIn .22s cubic-bezier(.16,1,.3,1) both}
+@keyframes bandIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
+.bandIn{padding:20px 26px 28px}
+.bandRow{display:grid;grid-template-columns:repeat(4,1fr);gap:0 34px;list-style:none;margin:0;padding:0}
+.bandCell{position:relative;border-top:1px solid var(--rule-soft);padding:15px 0 0}
+.bandT{display:inline-block;padding:2px 0;font-family:var(--font-display);font-size:24px;font-weight:300;
+  line-height:1.14;letter-spacing:-.03em;text-transform:lowercase;color:var(--ink-soft);
+  transition:color .2s cubic-bezier(.2,.7,.3,1)}
+.bandT::after{content:"";position:absolute;inset:0}
+.bandCell:hover .bandT{color:var(--ink)}
+.bandCell:hover{border-top-color:var(--ink-faint)}
+.bandC{display:block;margin-top:5px;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
+.bandMore{margin-top:18px}
+.bandMore .bandT{font-size:17px;font-weight:400;min-height:24px;display:inline-flex;align-items:center}
+.bandProfile{display:flex;align-items:flex-end;justify-content:space-between;gap:34px;flex-wrap:wrap}
+.bandWho{display:flex;align-items:center;gap:10px;padding-top:15px;border-top:1px solid var(--rule-soft);
+  flex:0 1 auto;font-family:var(--label-face);font-size:var(--label-size);letter-spacing:var(--label-space);
+  text-transform:uppercase;color:var(--ink-faint)}
+.bandWho img{width:30px;height:30px;border-radius:var(--radius-pill);object-fit:cover;border:1px solid var(--rule)}
+.bandProfile .bandRow{display:flex;justify-content:flex-end;gap:30px;flex:0 1 auto}
+.bandProfile .bandCell,.bandProfile .bandSlot{flex:0 0 168px;text-align:right}
+.bandSlot{border:0}
+
 /* ===================== hero ===================== */
 .hero{position:relative;min-height:calc(var(--stage) - var(--top-h));padding:0 26px}
 .layer{position:var(--layer-pos);top:calc(var(--top-h) * -1);left:0;right:0;bottom:0;z-index:2;
@@ -372,7 +409,6 @@ body{
   --sky-shadow:drop-shadow(0 26px 30px color-mix(in srgb,var(--ink) 20%,transparent));
   --sky-mask:none;
   --sky-scrim:none;
-  --sky-topscrim:none;
   --pill-bg:color-mix(in srgb,var(--bg) 88%,transparent);
   --pill-bg-hi:color-mix(in srgb,var(--bg-card) 94%,transparent);
   --pill-edge:var(--rule-soft);
@@ -431,7 +467,6 @@ body{
 
   --sky-mask:none;
   --sky-scrim:radial-gradient(30% 13% at 15% 42%,rgba(0,0,0,.94),rgba(0,0,0,.6) 58%,rgba(0,0,0,0) 100%),radial-gradient(60% 55% at 26% 32%,rgba(0,0,0,.88),rgba(0,0,0,.42) 48%,rgba(0,0,0,0) 76%);
-  --sky-topscrim:linear-gradient(to bottom,rgba(0,0,0,.84) 0,rgba(0,0,0,.5) 46%,rgba(0,0,0,0) 100%);
   --pill-bg:var(--void-glass);
   --pill-bg-hi:var(--void-glass-strong);
   --pill-edge:var(--void-glass-edge);
@@ -499,7 +534,6 @@ body{
 
   --sky-mask:none;
   --sky-scrim:radial-gradient(30% 13% at 15% 42%,rgba(0,0,0,.94),rgba(0,0,0,.6) 58%,rgba(0,0,0,0) 100%),radial-gradient(60% 55% at 26% 32%,rgba(0,0,0,.88),rgba(0,0,0,.42) 48%,rgba(0,0,0,0) 76%);
-  --sky-topscrim:linear-gradient(to bottom,rgba(0,0,0,.84) 0,rgba(0,0,0,.5) 46%,rgba(0,0,0,0) 100%);
   --pill-bg:var(--void-glass);
   --pill-bg-hi:var(--void-glass-strong);
   --pill-edge:var(--void-glass-edge);
@@ -553,21 +587,25 @@ body{
 
 /* ===================== narrow: one column, the sculpture behind ===================== */
 @media (max-width:900px){
-  .topbar{height:var(--top-h);padding:0 10px}
-  .topnav{flex-wrap:nowrap;gap:6px}
-  .pill{min-height:42px;font-size:13px;padding:0 12px}
+  .topbar{height:var(--top-h);padding:0 12px;gap:10px}
+  .barLeft{gap:12px}
+  .barRight{gap:12px}
   /* the wordmark folds away so the bar holds ONE row down to 320; the link keeps its name */
-  .mark-pill{padding:0 12px;gap:0}
+  .barMark{min-width:44px;justify-content:center}
   .mark-word{display:none}
-  .nav-pill{flex:1 1 auto;min-width:0;margin:0;padding:0 3px}
-  .nav-pill a{flex:1 1 auto;min-width:24px;padding:12px clamp(4px,1.6vw,8px);text-align:center;
-    white-space:nowrap;font-size:clamp(11.5px,3.4vw,13px)}
-  .right-pills{flex:none;gap:6px}
-  .mode-toggle{width:38px;min-width:38px;padding:0}
-  .signin{padding:0 12px}
-  .signout{padding:0 10px}
+  .trig{font-size:13.5px}
   .who-name{display:none}
-  #who img{width:22px;height:22px}
+  .modeBtn{width:40px;height:40px}
+  .modeBtn svg{width:18px;height:18px}
+  .pill{min-height:42px;font-size:13.5px}
+  .signin{padding:0 16px}
+  .bandIn{padding:0 12px 16px}
+  .bandRow{grid-template-columns:1fr;gap:0}
+  .bandT{font-size:20px}
+  .bandProfile{display:block}
+  .bandProfile .bandRow{display:block;text-align:left}
+  .bandProfile .bandCell,.bandProfile .bandSlot{flex:none;text-align:left}
+  .bandWho{padding-bottom:14px}
   .hero{min-height:0;padding-bottom:36px}
   .layer{display:flex;flex-direction:column;align-items:center;text-align:center;
     top:0;left:auto;right:auto;bottom:auto;padding-top:12px;pointer-events:auto}
@@ -764,9 +802,15 @@ composition A; landing composition v3, picked by the owner 2026-08-27. No roll,
 
 <a class="skip" href="#main">Skip to content</a>
 
-<header class="topbar">
-  <nav class="topnav" aria-label="Primary">
-    <a class="pill mark-pill" href="/" aria-label="{{productName}}">
+<!-- the bar: the hub's grammar on the front door too (task 1003300; v2 "the hairline",
+     docs/design/projects-hub-direction-v2.md §7). No pill: the bar's ground is the page ground
+     closed by one hairline and the sculpture begins under it; the only filled shape it holds is
+     the sign-in door. The Projects band holds the hub's views as plain deep links — no item is
+     ever marked current here, because this page is none of them — and the identity chip is the
+     profile band's trigger. The hall link lives in the footer. -->
+<header class="topbar bar">
+  <div class="barLeft">
+    <a class="barMark" href="/" aria-label="{{productName}}">
       <svg viewBox="0 0 26 20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.4"
            stroke-linecap="round" stroke-linejoin="round">
         <ellipse cx="8.4" cy="5.6" rx="6.6" ry="2.9"/>
@@ -776,30 +820,61 @@ composition A; landing composition v3, picked by the owner 2026-08-27. No roll,
       </svg>
       <span class="mark-word">{{productName}}</span>
     </a>
-    <span class="pill nav-pill">
-      <a href="/projects">Projects</a>
-      <a data-link-hall href="{{buildersOrigin}}">Hall</a>
-      <a href="/docs">Docs</a>
-    </span>
-    <span class="right-pills">
-      <button class="mode-toggle pill" id="mode" type="button" aria-label="Toggle light or dark">
-        <svg class="moon" viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor"
-             stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M16.2 12.4A6.8 6.8 0 0 1 7.6 3.8a6.8 6.8 0 1 0 8.6 8.6z"/>
-        </svg>
-        <svg class="sun" viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor"
-             stroke-width="1.4" stroke-linecap="round">
-          <circle cx="10" cy="10" r="3.9"/>
-          <path d="M10 1.6v2.1M10 16.3v2.1M1.6 10h2.1M16.3 10h2.1M4.1 4.1l1.5 1.5M14.4 14.4l1.5 1.5M15.9 4.1l-1.5 1.5M5.6 14.4l-1.5 1.5"/>
-        </svg>
-      </button>
-      <span class="right-pills" id="who">
-        <a class="pill signin" href="/api/bongos/auth/web/start?return=/">Sign in</a>
-      </span>
+  </div>
+  <div class="barRight">
+    <button class="trig" type="button" id="projTrig" data-menu="projects" aria-expanded="false" aria-controls="menuProjects">Projects<svg class="cv" viewBox="0 0 20 20" aria-hidden="true"><path d="m5.6 8 4.4 4.4L14.4 8"/></svg></button>
+    <button class="modeBtn" id="mode" type="button" aria-label="Toggle light or dark">
+      <svg class="moon" viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor"
+           stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M16.2 12.4A6.8 6.8 0 0 1 7.6 3.8a6.8 6.8 0 1 0 8.6 8.6z"/>
+      </svg>
+      <svg class="sun" viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor"
+           stroke-width="1.4" stroke-linecap="round">
+        <circle cx="10" cy="10" r="3.9"/>
+        <path d="M10 1.6v2.1M10 16.3v2.1M1.6 10h2.1M16.3 10h2.1M4.1 4.1l1.5 1.5M14.4 14.4l1.5 1.5M15.9 4.1l-1.5 1.5M5.6 14.4l-1.5 1.5"/>
+      </svg>
+    </button>
+    <!-- the identity slot: the sign-in door signed out; the chip (the profile trigger) once
+         the session resolves — swapped client-side, never a wrong-state flash -->
+    <span class="whoSlot" id="who">
+      <a class="pill signin" href="/api/bongos/auth/web/start?return=/">Sign in</a>
     </span>
-  </nav>
+  </div>
 </header>
 
+<!-- the two bands: full-width, on the card ground, closed by one hairline; they unfold under the
+     bar's edge and push the page down. One disclosure component, two instances (the script at the
+     foot of the page): Escape closes and returns focus to the trigger, the arrows walk the items,
+     Tab out closes, a click outside closes, opening one closes the other. -->
+<div class="menuBand" id="menuProjects" data-menu="projects" hidden>
+  <div class="bandIn">
+    <ul class="bandRow">
+      <li class="bandCell"><a class="bandT" href="/projects?view=map">Sky</a><span class="bandC">the sky of every project</span></li>
+      <li class="bandCell"><a class="bandT" href="/projects?view=map&amp;sub=table">Table</a><span class="bandC">the same projects as rows</span></li>
+      <li class="bandCell" id="mineCell" hidden><a class="bandT" href="/projects?view=mine">Your projects</a><span class="bandC">the ones you own or build on</span></li>
+      <li class="bandCell"><a class="bandT" href="/projects?view=new">New project</a><span class="bandC">five questions and a home</span></li>
+    </ul>
+    <!-- under a hairline: what this is, and the docs (§5's About cell; goal 1000063's About page
+         takes the anchor over when it lands) -->
+    <ul class="bandRow bandMore">
+      <li class="bandCell"><a class="bandT" href="#about">About</a></li>
+      <li class="bandCell"><a class="bandT" href="/docs">Docs</a></li>
+    </ul>
+  </div>
+</div>
+<div class="menuBand" id="menuProfile" data-menu="profile" hidden>
+  <div class="bandIn bandProfile">
+    <p class="bandWho" id="bandWho"></p>
+    <ul class="bandRow">
+      <li class="bandCell"><a class="bandT" href="/projects?view=mine">My projects</a></li>
+      <!-- the deferred Settings slot: a place it would go, rendering nothing at all -->
+      <li class="bandSlot" aria-hidden="true"></li>
+      <!-- the honest hover target; the script upgrades the click to the POST -->
+      <li class="bandCell"><a class="bandT signout" href="/api/bongos/auth/logout">Sign out</a></li>
+    </ul>
+  </div>
+</div>
+
 <main id="main" tabindex="-1">
   <section class="hero">
     <div class="field" aria-hidden="true">
@@ -880,7 +955,7 @@ composition A; landing composition v3, picked by the owner 2026-08-27. No roll,
   </section>
 <!--apex-only:end-->
 
-  <section class="band">
+  <section class="band" id="about">
     <div class="wrap">
       <h2>A project as a codebase, regardless of function.</h2>
       <p class="sub">A laddered beat progresses all tasks.</p>
@@ -1112,22 +1187,100 @@ composition A; landing composition v3, picked by the owner 2026-08-27. No roll,
     var slot = document.getElementById('who');
     if (!slot) return;
     slot.textContent = '';
+    /* the chip IS the profile band's trigger (task 1003300): avatar + login + a chevron;
+       the band below names the person and carries Sign out */
+    var chip = document.createElement('button');
+    chip.type = 'button';
+    chip.className = 'trig who';
+    chip.setAttribute('data-menu', 'profile');
+    chip.setAttribute('aria-expanded', 'false');
+    chip.setAttribute('aria-controls', 'menuProfile');
+    chip.setAttribute('aria-label', 'Account, ' + me.github_login);
     var art = safeHttpUrl(me.avatar_url);
+    var who = document.getElementById('bandWho');
     if (art) {
       var img = document.createElement('img');
       img.src = art; img.alt = ''; img.width = 26; img.height = 26;
-      slot.appendChild(img);
+      chip.appendChild(img);
+      if (who) who.appendChild(img.cloneNode(true));
     }
     var name = document.createElement('span');
     name.className = 'who-name';
     name.textContent = me.github_login;
-    slot.appendChild(name);
-    var out = document.createElement('a');
-    out.className = 'pill signout';
-    out.href = API + '/auth/logout'; /* honest hover target; the click upgrades it to the real POST */
-    out.textContent = 'Sign out';
-    out.addEventListener('click', function (e) { e.preventDefault(); doLogout(); });
-    slot.appendChild(out);
+    chip.appendChild(name);
+    if (who) who.appendChild(document.createTextNode(me.github_login));
+    var cv = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    cv.setAttribute('class', 'cv'); cv.setAttribute('viewBox', '0 0 20 20'); cv.setAttribute('aria-hidden', 'true');
+    var pth = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    pth.setAttribute('d', 'm5.6 8 4.4 4.4L14.4 8');
+    cv.appendChild(pth);
+    chip.appendChild(cv);
+    slot.appendChild(chip);
+    wireTrigger(chip);
+    /* a member sees the Your-projects cell of the Projects band */
+    var mine = document.getElementById('mineCell');
+    if (mine) mine.hidden = false;
+  });
+  /* the sign-out anchor keeps its honest href; the click is the real POST */
+  var signout = document.querySelector('#menuProfile a.signout');
+  if (signout) signout.addEventListener('click', function (e) { e.preventDefault(); doLogout(); });
+
+  /* ── the bands: one disclosure component, two instances (the same contract as the hub's,
+     task 1003300). Plain links in a disclosure — aria-expanded + aria-controls, no menu role —
+     so what is announced is what ships. Escape closes and RETURNS FOCUS to the trigger, the
+     arrows move between items, Enter on a trigger lands on the first item, Tab out closes, a
+     click outside closes, opening one closes the other. The open move is CSS, so world.css's
+     kill switch owns it. No item is ever current here: this page is none of those views. ── */
+  function openBand() { return document.querySelector('.menuBand:not([hidden])'); }
+  function closeMenus() {
+    var open = openBand();
+    if (!open) return;
+    var trig = document.querySelector('.trig[aria-expanded="true"]');
+    var inside = open.contains(document.activeElement);
+    open.hidden = true;
+    if (trig) trig.setAttribute('aria-expanded', 'false');
+    if (inside && trig) trig.focus();
+  }
+  function openMenu(trig, byKeyboard) {
+    closeMenus();
+    trig.setAttribute('aria-expanded', 'true');
+    var band = document.getElementById(trig.getAttribute('aria-controls'));
+    if (!band) return;
+    band.hidden = false;
+    if (byKeyboard) { var first = band.querySelector('.bandCell:not([hidden]) a'); if (first) first.focus(); }
+  }
+  function wireTrigger(t) {
+    t.addEventListener('click', function (ev) {
+      if (t.getAttribute('aria-expanded') === 'true') closeMenus();
+      else openMenu(t, ev.detail === 0);
+    });
+  }
+  document.querySelectorAll('.trig').forEach(wireTrigger);
+  document.addEventListener('click', function (ev) {
+    if (!openBand()) return;
+    if (ev.target.closest && (ev.target.closest('.menuBand') || ev.target.closest('.trig'))) return;
+    closeMenus();
+  });
+  document.addEventListener('keydown', function (ev) {
+    var open = openBand();
+    if (!open) return;
+    if (ev.key === 'Escape') { closeMenus(); return; }
+    if (ev.key !== 'ArrowDown' && ev.key !== 'ArrowUp') return;
+    var items = Array.prototype.filter.call(open.querySelectorAll('a'), function (a) { return !a.closest('[hidden]'); });
+    if (!items.length) return;
+    var at = items.indexOf(document.activeElement);
+    ev.preventDefault();
+    items[(at + (ev.key === 'ArrowDown' ? 1 : items.length - 1) + items.length) % items.length].focus();
+  });
+  document.querySelectorAll('.menuBand').forEach(function (b) {
+    b.addEventListener('click', function (ev) {
+      if (ev.target.closest && ev.target.closest('a')) closeMenus();
+    });
+    b.addEventListener('focusout', function (ev) {
+      var to = ev.relatedTarget;
+      if (!to || b.contains(to) || (to.closest && to.closest('.trig'))) return;
+      closeMenus();
+    });
   });
 
   /* ── the live ledger. Every figure and row on this page is baked as a real