@bongos/core 1.19.392 → 1.19.394

package/public-landing/assets/cosmos.css

@@ -77,7 +77,6 @@
   --glass-ink:var(--ink-soft);
   --glass-bg:rgba(255,255,255,0.62);
   --glass-border:color-mix(in srgb, var(--accent) 42%, transparent);
-  --ava-shadow:0 2px 8px rgba(0,0,0,0.14);
   --hero-lede:var(--ink-soft);
   --hero-b:var(--accent-deep);
   --foot-ink:var(--ink-faint);
@@ -118,12 +117,19 @@
   --glass-ink:var(--accent-deep);
   --glass-bg:rgba(255,255,255,0.07);
   --glass-border:color-mix(in srgb, var(--accent) 42%, transparent);
-  --ava-shadow:0 0 14px color-mix(in srgb, var(--accent) 45%, transparent);
   --hero-lede:var(--ink-soft);
   --hero-b:var(--accent-deep);
   --foot-ink:var(--ink-faint);
   --foot-code:var(--accent-deep);
   --shadow-card:0 24px 60px -24px rgba(0,0,0,.6), 0 6px 22px -8px rgba(0,0,0,.4);
+  --glass:rgba(255,255,255,.11);
+  --glass-strong:rgba(255,255,255,.17);
+  --glass-edge:rgba(255,255,255,.13);
+  --focus:var(--accent);
+  --type-halo:0 2px 18px rgba(0,0,0,.94), 0 0 54px rgba(0,0,0,.72);
+  --label-face:var(--font-body);
+  --label-size:11.5px;
+  --label-space:.1em;
   color-scheme:dark;
 }
 @media (prefers-color-scheme: dark){
@@ -146,12 +152,19 @@
     --glass-ink:var(--accent-deep);
     --glass-bg:rgba(255,255,255,0.07);
     --glass-border:color-mix(in srgb, var(--accent) 42%, transparent);
-    --ava-shadow:0 0 14px color-mix(in srgb, var(--accent) 45%, transparent);
     --hero-lede:var(--ink-soft);
     --hero-b:var(--accent-deep);
     --foot-ink:var(--ink-faint);
     --foot-code:var(--accent-deep);
     --shadow-card:0 24px 60px -24px rgba(0,0,0,.6), 0 6px 22px -8px rgba(0,0,0,.4);
+    --glass:rgba(255,255,255,.11);
+    --glass-strong:rgba(255,255,255,.17);
+    --glass-edge:rgba(255,255,255,.13);
+    --focus:var(--accent);
+    --type-halo:0 2px 18px rgba(0,0,0,.94), 0 0 54px rgba(0,0,0,.72);
+    --label-face:var(--font-body);
+    --label-size:11.5px;
+    --label-space:.1em;
     color-scheme:dark;
   }
 }
@@ -210,6 +223,40 @@
   --pad-lg:clamp(19px,2.6vw,28px);      /* padding inside a marketing panel */
   --pad-xl:clamp(38px,6vw,78px);        /* rhythm between sections */
   --fs-h2:clamp(22px,3vw,29px); --fs-h3:17.5px; --fs-lede:15.5px; --fs-body:14.5px;
+
+  /* the world's derived tier for the hub's chrome (task 1003300; ADR 0196 §3:
+     "the hub's sheet moves onto the world's derived tier the way world.css
+     did"). The same names world.css and DESIGN.md use, so the bar and the
+     bands are a port of the landing's world, not an invention. --line stays
+     the hub's hairline COLOUR and --ok/--warn/--err its fixed status
+     vocabulary; neither is restated. The eight that flip with the mode
+     (--glass*, --focus, --type-halo, --label-*) are in both dark blocks. */
+  --bar-bg:var(--bg);   /* the bar's ground IS the page ground; one hairline closes it */
+  --glass:color-mix(in srgb, var(--ink) 5%, transparent);
+  --glass-strong:color-mix(in srgb, var(--ink) 8%, transparent);
+  --glass-edge:color-mix(in srgb, var(--ink) 12%, transparent);
+  --accent-lift:color-mix(in srgb, var(--accent) 58%, #ffffff);
+  --void-pill:rgba(0,0,0,.55);
+  --void-ink:#ffffff;
+  --focus:var(--accent-deep);
+  --type-halo:none;
+  --label-face:var(--font-mono);
+  --label-size:11px;
+  --label-space:.12em;
+  --radius:16px; --radius-sm:10px; --radius-pill:999px;
+  --top-h:64px;
+  --gutter:clamp(16px,4vw,34px);
+  /* the footer's measured height per width — the sky is 100vh minus the bar and
+     this, so the map fits the viewport with no scrollbar (T2's rule); the
+     toolbar row that used to be in that sum is gone (task 1003300) */
+  --foot-h:90px;
+}
+/* narrow: the bar tightens to one 60px row (the landing's own switch) */
+@media (max-width:900px){
+  :root{--top-h:60px;--foot-h:108px;}
+}
+@media (max-width:360px){
+  :root{--foot-h:126px;}
 }
 
 *{box-sizing:border-box;margin:0;padding:0;}
@@ -233,17 +280,8 @@ body{font-family:var(--font-body);color:var(--ink);background:var(--page-bg);min
 .top .mark{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-0.5px;text-transform:lowercase;color:var(--chrome-ink);text-decoration:none;text-shadow:var(--chrome-glow);}
 .top .mark span{color:var(--chrome-accent);}
 .top-right{display:flex;align-items:center;gap:clamp(10px,2vw,18px);}
-.who{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--chrome-ink-dim);min-height:34px;text-shadow:var(--chrome-glow);}
-.who img{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,0.85);box-shadow:var(--ava-shadow);}
-/* sign-out rides inside the identity chip, so it exists exactly when a session
-   does — the same glass voice as .btn-space, one size down (task 1002952) */
-.who .signout{font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--glass-ink);background:var(--glass-bg);border:1.5px solid var(--glass-border);border-radius:999px;padding:5px 12px;text-decoration:none;text-shadow:var(--chrome-glow);backdrop-filter:blur(4px);}
-.who .signout:hover{border-color:var(--chrome-accent);color:var(--chrome-accent);}
 .btn-space{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--glass-ink);background:var(--glass-bg);border:1.5px solid var(--glass-border);border-radius:999px;padding:8px 16px;text-decoration:none;text-shadow:var(--chrome-glow);backdrop-filter:blur(4px);}
 .btn-space:hover{border-color:var(--chrome-accent);color:var(--chrome-accent);}
-/* the light/dark switch — same glass voice as .btn-space, icon-only */
-.mode-toggle{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;width:36px;height:36px;border-radius:50%;font-size:15px;line-height:1;color:var(--glass-ink);background:var(--glass-bg);border:1.5px solid var(--glass-border);backdrop-filter:blur(4px);}
-.mode-toggle:hover{border-color:var(--chrome-accent);color:var(--chrome-accent);}
 
 /* ── the hero (page title over the sky) ── */
 .hero{position:relative;z-index:1;max-width:880px;margin:0 auto;padding:clamp(6px,1.5vw,18px) clamp(16px,4vw,40px) 26px;}
@@ -460,92 +498,90 @@ p.sec-p{font-size:var(--fs-lede);font-weight:500;color:var(--ink-soft);line-heig
    prefers-color-scheme twin); tests/cosmos_token_contrast.mjs compares them.
    ═══════════════════════════════════════════════════════════════════════ */
 
-/* ── the persistent shell header. It belongs to the PAGE, not to the orb
-   field, so it never drifts, scales or pans with the sky — and it renders in
-   EVERY view including the table, which is what the gate's
-   `body:not(.view-space)` rule got wrong. ── */
-.shell{position:relative;z-index:40;display:flex;align-items:center;justify-content:space-between;
-  gap:clamp(10px,2vw,22px);padding:16px clamp(16px,4vw,34px);flex-wrap:wrap;}
-/* The wordmark TYPES, so its width changes every ~190ms. As the middle child of
-   a space-between row the nav would slide with it. Equal `flex:1 1 0` flanks
-   compute to the same width regardless of content, which pins the nav dead
-   centre and lets the mark change width inside its own box. Measured: 0px drift
-   across seven typed states. */
-.shell .mark{flex:1 1 0;min-width:0;
-  font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-0.5px;
-  text-transform:lowercase;color:var(--chrome-ink);text-decoration:none;text-shadow:var(--chrome-glow);
-  white-space:nowrap;}
-.shell .mark span{color:var(--chrome-accent);}
-/* Two colors, one system (task 1002793): the landing's static mark wraps only
-   bongos in a span, so the shared rule above already colors it alone there.
-   Here both words are spans, so the typed prefix opts back into the base ink
-   by id — the shared rule must not change, the landing leans on it. */
-.shell .mark #markPrefix{color:var(--chrome-ink);}
-/* the prefix's width-pinned box: bongos holds still while letters come and go;
-   the width transition covers the between-words change only */
-.shell .markLeft{display:inline-block;text-align:left;white-space:nowrap;transition:width .18s ease;}
-/* (no reduced-motion guard here: the global kill switch at the end of this
-   file already zeroes every transition, and the test that pins it extracts
-   the FIRST reduced-motion block — an earlier one would shadow it) */
-.shell .markMeasure{position:absolute;visibility:hidden;white-space:pre;pointer-events:none;}
-/* a drawn 2px bar, not a glyph: a block glyph keeps a full character cell of
-   width even while blinked invisible, and + the literal space it read as two
-   characters of air between the words */
-.shell .caret{display:inline-block;width:2px;height:.85em;margin-left:1px;vertical-align:-.1em;
-  background:var(--chrome-accent);animation:cbBlink 1s step-end infinite;}
-@keyframes cbBlink{50%{opacity:0;}}
-.shell-right{flex:1 1 0;display:flex;align-items:center;justify-content:flex-end;
-  gap:clamp(8px,1.6vw,14px);flex-wrap:wrap;}
-
-/* the three destinations, in the .btn-space glass voice so the nav and the
-   chrome buttons read as one family */
-.navrow{flex:0 0 auto;display:flex;align-items:center;gap:4px;background:var(--glass-bg);
-  border:1.5px solid var(--glass-border);border-radius:999px;padding:4px;backdrop-filter:blur(4px);}
-.navrow a{font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--glass-ink);
-  text-decoration:none;padding:7px 15px;border-radius:999px;white-space:nowrap;text-shadow:var(--chrome-glow);}
-.navrow a:hover{color:var(--chrome-accent);}
-.navrow a[aria-current="page"]{background:var(--accent);color:var(--accent-on);text-shadow:none;}
-/* Home LEAVES the hub, so it never takes the current-view pill and a hairline
-   sets it apart. Without it the header offered no way back to the landing page
-   except the wordmark, which nothing announced as a link. */
-.navrow .navHome{color:var(--glass-ink);}
-.navrow .navHome:hover{color:var(--chrome-accent);}
-.navSep{width:1px;align-self:stretch;margin:4px 3px;background:var(--glass-border);flex:0 0 auto;}
-/* below the mid breakpoint the three groups stack and centre rather than
-   fighting for one row — equal flanks only buy a centred nav while it fits */
-@media (max-width:1079px){
-  .shell{justify-content:center;}
-  .shell .mark{flex:0 0 auto;}
-  /* the signed-in cluster must SHRINK and wrap inside the viewport — pinned at
-     max-content it overran a 390px phone by 16px and body{overflow-x:hidden}
-     clipped "Sign out" off the screen (task 1003232) */
-  .shell-right{flex:0 1 auto;min-width:0;max-width:100%;justify-content:center;}
-  .navrow{order:3;flex-basis:100%;justify-content:center;max-width:100%;}
-}
-/* wide: centre the nav absolutely and let both flanks size to content. Equal
-   flanks (394px each at 1280) were narrower than the signed-in cluster (418px),
-   so the identity chip dropped to a second row the moment a founder signed in.
-   Absolute centring keeps the 0px nav drift the mark's width-pin protects. */
-@media (min-width:1080px){
-  .shell{position:relative;}
-  .shell .navrow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
-  .shell .mark,.shell .shell-right{flex:1 1 auto;}
+/* ── THE BAR (task 1003300; v2 "the hairline", direction record §7). It
+   belongs to the PAGE, not to the orb field, so it never drifts, scales or
+   pans with the sky — and it renders in EVERY view including the table. No
+   pill: its ground is the page ground (--bar-bg), closed by one hairline, and
+   the only filled shape it can hold is the sign-in door. z-index 50 — over
+   everything in flow, under the card scrim (60). Not sticky. ── */
+.shell{position:relative;z-index:50;}
+.bar{display:flex;align-items:center;gap:22px;height:var(--top-h);padding:0 var(--gutter);
+  background:var(--bar-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;}
+/* the static mark: the bongo pair + the product name as plain type, the only way home */
+.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-decoration:none;text-shadow:var(--type-halo);}
+.barMark svg{width:23px;height:18px;display:block;flex:none;}
+.barMark:hover{color:var(--ink);}
+/* the two-tone focus ring on the bar's and the bands' controls (DESIGN.md
+   "Accessibility floors"): a 2px --focus outline at 3px offset inside an 8px
+   --bg halo, so the ring keeps its own edge over whatever it lands on */
+.bar :focus-visible,.menuBand :focus-visible,.qField:focus-within{outline:2px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 8px var(--bg);}
+.qInput:focus-visible{outline:none;box-shadow:none;}
+/* the map's search: no field chrome, one bottom hairline that takes the ink on
+   focus. NOT .search — that is the mine view's glass pill and keeps its rules.
+   The count and the only-mine switch ride inside the wrapper, so all three
+   hide together off the map and fold together under 480. */
+.qWrap{display:flex;align-items:center;gap:14px;flex:0 1 480px;min-width:0;}
+.qField{flex:1 1 auto;min-width:110px;display:flex;align-items:center;min-height:44px;
+  border-bottom:1px solid var(--rule);transition:border-color .2s cubic-bezier(.2,.7,.3,1);}
+.qWrap:focus-within .qField{border-bottom-color:var(--ink);}
+.qInput{width:100%;min-width:0;min-height:32px;padding:0 0 4px;background:none;border:0;outline:none;
+  color:var(--ink);font-family:var(--label-face);font-size:13px;letter-spacing:.01em;}
+.qInput::placeholder{color:var(--ink-faint);font-family:var(--label-face);}
+.qIcon{display:none;flex:none;width:17px;height:17px;margin-right:8px;color:var(--ink-faint);}
+.qCount{flex:none;font-family:var(--font-mono);font-size:11.5px;color:var(--ink-faint);
+  font-variant-numeric:tabular-nums;white-space:nowrap;}
+/* under 480 the field folds into this magnifier (see the 480 query); above it, never shown */
+.qToggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
+  cursor:pointer;background:none;border:0;border-radius:var(--radius-pill);color:var(--ink-soft);
+  transition:color .2s cubic-bezier(.2,.7,.3,1);}
+.qToggle svg{width:19px;height:19px;}
+.qToggle:hover,.qToggle[aria-expanded="true"]{color:var(--ink);}
+/* the right group is lowercase text; the OPEN trigger is underlined in the
+   accent, because an open menu is the live thing on the bar */
+.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;}
+/* the chevron — NOT .caret, which was the typing wordmark's blinking bar */
+.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);}
+/* the identity chip is the profile trigger: avatar + login + the chevron */
+.who{gap:9px;}
+.who img{width:26px;height:26px;border-radius:var(--radius-pill);object-fit:cover;flex:none;
+  border:1px solid var(--rule);}
+.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;}
+/* the glyph shows the mode you would GET: the moon in light, the sun in dark */
+.modeBtn .sun{display:none;}
+:root[data-mode="dark"] .modeBtn .sun{display:block;}
+:root[data-mode="dark"] .modeBtn .moon{display:none;}
+@media (prefers-color-scheme:dark){
+  :root:not([data-mode="light"]) .modeBtn .sun{display:block;}
+  :root:not([data-mode="light"]) .modeBtn .moon{display:none;}
 }
+/* the one filled shape on a bar with no pills: the landing's sign-in door */
+.signinDoor{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 26px;
+  border-radius:var(--radius-pill);background:color-mix(in srgb,var(--ink) 92%,var(--bg));color:var(--bg);
+  font-size:15px;font-weight:500;text-transform:lowercase;text-decoration:none;
+  transition:background .2s cubic-bezier(.2,.7,.3,1);}
+.signinDoor:hover{background:var(--ink);color:var(--bg);}
 /* a long GitHub login truncates instead of pushing Sign out off the screen */
 .who>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:14ch;}
 /* keyboard focus on the two search pills is VISIBLE — the input's own outline
    is off by design, so the pill carries the ring */
 .search:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 40%,transparent);}
 
-/* ── the per-view control strip: Sky|Table, the only-mine filter, search ── */
-.toolbar{position:relative;z-index:30;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
-  padding:0 clamp(16px,4vw,34px) 16px;}
-.seg{display:inline-flex;background:var(--glass-bg);border:1.5px solid var(--glass-border);
-  border-radius:999px;padding:4px;gap:4px;backdrop-filter:blur(4px);}
-.seg button{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--glass-ink);
-  background:none;border:none;cursor:pointer;padding:7px 16px;border-radius:999px;text-shadow:var(--chrome-glow);}
-.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-on);text-shadow:none;}
-
 .search{flex:1;min-width:190px;max-width:460px;display:flex;align-items:center;gap:9px;
   background:var(--glass-bg);border:1.5px solid var(--glass-border);border-radius:999px;
   padding:8px 16px;backdrop-filter:blur(4px);}
@@ -558,20 +594,110 @@ p.sec-p{font-size:var(--fs-lede);font-weight:500;color:var(--ink-soft);line-heig
 .search .count{font-family:var(--font-mono);font-size:11.5px;color:var(--glass-ink);white-space:nowrap;}
 
 /* the only-mine filter — a real two-state control, not a link: it filters the
-   SAME data in place rather than navigating */
-.switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;background:var(--glass-bg);
-  border:1.5px solid var(--glass-border);border-radius:999px;padding:7px 15px 7px 11px;
-  font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--glass-ink);
-  backdrop-filter:blur(4px);text-shadow:var(--chrome-glow);white-space:nowrap;}
+   SAME data in place. Lowercase text and a track, no pill: nothing on the bar
+   is boxed (v2). The track takes the accent only when it is ON — live. */
+.switch{display:inline-flex;align-items:center;gap:9px;flex:none;min-height:44px;cursor:pointer;
+  font-family:var(--font-body);font-size:13.5px;text-transform:lowercase;color:var(--ink-soft);white-space:nowrap;
+  transition:color .2s cubic-bezier(.2,.7,.3,1);}
+.switch:hover{color:var(--ink);}
 .switch input{position:absolute;opacity:0;pointer-events:none;}
-.switch .track{width:32px;height:18px;border-radius:999px;background:color-mix(in srgb,var(--ink) 22%,transparent);
+.switch .track{width:32px;height:18px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--ink) 22%,transparent);
   position:relative;flex:0 0 auto;transition:background .16s ease;}
 .switch .track::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
-  background:#fff;transition:transform .16s ease;box-shadow:0 1px 3px rgba(0,0,0,.3);}
+  background:var(--bg-card);transition:transform .16s ease;}
 .switch input:checked + .track{background:var(--accent);}
-.switch input:checked + .track::after{transform:translateX(14px);}
-.switch input:focus-visible + .track{outline:2px solid var(--accent);outline-offset:2px;}
-.switch:has(input:checked){color:var(--chrome-accent);border-color:var(--accent);}
+.switch input:checked + .track::after{transform:translateX(14px);background:var(--accent-on);}
+.switch input:focus-visible + .track{outline:2px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 8px var(--bg);}
+.switch:has(input:checked){color:var(--ink);}
+
+/* ── THE BANDS: a menu is not a floating card. It unfolds under the bar's edge,
+   full width on the card ground, closed by one hairline, and PUSHES the page
+   down. Cells in a hairline-separated row, each a lowercase display title over
+   one clause; the whole cell is the target. The current view carries a 2px
+   accent hairline on its top edge — the rail-step-lit grammar from DESIGN.md,
+   moved onto a menu. One authored move, a 6px rise + fade on the world's
+   exponential ease-out, dead under the kill switch at the end of this file. ── */
+.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 var(--gutter) 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;}
+.bandCell:has([aria-current="page"])::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent);}
+.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);text-decoration:none;transition:color .2s cubic-bezier(.2,.7,.3,1);}
+.bandT::after{content:"";position:absolute;inset:0;}
+.bandCell:has([aria-current="page"]) .bandT,.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);}
+.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;}
+/* the deferred Settings slot: a place it would go, rendering nothing at all —
+   not even the hairline that declares a list item in this band */
+.bandSlot{border:0;}
+/* the row under the hairline: About and Docs, a rung smaller than the views */
+.bandMore{margin-top:18px;}
+.bandMore .bandT{font-size:17px;font-weight:400;min-height:24px;display:inline-flex;align-items:center;}
+
+@media (max-width:900px){
+  .bar{gap:10px;padding:0 12px;}
+  .barLeft{gap:12px;}
+  .barRight{gap:12px;}
+  /* the wordmark folds away so the bar holds ONE row down to 320; the glyph stays */
+  .barMark{min-width:44px;justify-content:center;}
+  .barMark span{display:none;}
+  .qWrap{flex:1 1 90px;max-width:480px;gap:10px;}
+  .trig{font-size:13.5px;}
+  .who>span{display:none;}
+  .modeBtn{width:40px;height:40px;}
+  .modeBtn svg{width:18px;height:18px;}
+  .signinDoor{padding:0 16px;font-size:13.5px;}
+  .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;}
+}
+@media (max-width:640px){
+  .bar{gap:8px;padding:0 10px;}
+  .barRight{gap:8px;}
+  /* the count leaves the bar (the sky and the table show what matched); the
+     folded row under 480 brings it back where it has the width */
+  .qCount{display:none;}
+  .switch{font-size:12.5px;gap:7px;}
+}
+@media (max-width:480px){
+  /* no field this narrow can hold a query beside the controls, so the search
+     folds into a magnifier in the field's place; pressed, it drops ONE hairline
+     row of the page ground under the bar carrying the full-width field, its
+     count and the only-mine switch. Escape, or an opening band, folds it back. */
+  .qToggle{display:inline-flex;}
+  .qWrap{display:none;}
+  .qWrap.is-open{display:flex;position:absolute;left:0;right:0;top:100%;z-index:51;
+    align-items:center;gap:12px;max-width:none;height:52px;padding:0 10px;
+    background:var(--bar-bg);border-bottom:1px solid var(--rule);}
+  .qWrap.is-open .qField{min-height:40px;}
+  .qWrap.is-open .qCount{display:inline;}
+  .qIcon{display:block;}
+  .bar{gap:6px;}
+  .barLeft{gap:8px;}
+  .barRight{gap:6px;}
+  .signinDoor{padding:0 13px;}
+}
+@media (max-width:360px){
+  /* the field measured 95px with the count and the switch beside it; the
+     switch is a control, the count is a nicety — it yields */
+  .qWrap.is-open .qCount{display:none;}
+}
 
 /* ── the orb field. Ground B (owner, 2026-08-13): dual-mode full-bleed — the
    sky IS the page and follows light/dark, which is what --sky-bg/--star-display
@@ -579,7 +705,7 @@ p.sec-p{font-size:var(--fs-lede);font-weight:500;color:var(--ink-soft);line-heig
    sky moves is not. Component-scoped custom properties only — a page-local or
    component `:root` would outrank the branding pack spliced after this file. ── */
 .fieldWrap{padding:0;max-width:none;}
-.field{position:relative;height:calc(100vh - 232px);min-height:340px;overflow:hidden;
+.field{position:relative;height:calc(100vh - var(--top-h) - var(--foot-h));min-height:340px;overflow:hidden;
   --grid-ink:color-mix(in srgb,var(--rule) 92%,transparent);}
 .field .ground{position:absolute;inset:0;background:var(--sky-bg);}
 /* the gravity sheet, flattened: two gradients under a radial mask */
@@ -804,8 +930,14 @@ p.sec-p{font-size:var(--fs-lede);font-weight:500;color:var(--ink-soft);line-heig
   .proj{flex-direction:column;}
   .orb{width:44px;height:44px;flex-basis:44px;}
   .mineBar .search .count{display:none;} /* the "All 16" pill already carries the number */
-  .navrow a{padding:7px 11px;}
 }
+/* the carried surfaces: only the hit-area floors the world asks for (direction
+   record §5, travelling with the pick) — the footer links, the table's sort
+   buttons (after their all:unset) — and the table scrolls inside its own wrap
+   on a phone instead of pushing the page sideways */
+#sub-table-body{overflow-x:auto;}
+.tbl th button{min-height:24px;display:inline-flex;align-items:center;}
+.foot a,.finePrint a{display:inline-block;padding:3px 0;min-height:24px;}
 @media (prefers-reduced-motion:reduce){
   *,*::before,*::after{animation:none !important;transition:none !important;}
 }