/* Hypha shell + page layout ("Living Mycelium" redesign, 2026-10-16). Replaces the old immersive world layer:
   no HUD over a 3D world, no floating sheets. A sticky pill nav (kit.css .gnav), pages that scroll normally, a phone tab bar
   (kit.css .ptabs), the footer sitemap (.gfoot), the quick-jump palette, the coming-soon page, and the Map container. */
.shell{display:contents}
/* ---------- nav additions (search, DEMO/LIVE badge, wallet pill) ---------- */
.gm .gnav{z-index:70}
.gm .gnav .logo .mark{display:none}
.gm .gnav .logo img{display:block;height:26px;width:auto}
.gm .gnav .right{gap:8px}
.hud-jump{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 14px;border:0;border-radius:999px;background:rgba(242,244,232,.05);color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s}
.hud-jump:hover{background:rgba(242,244,232,.09);color:var(--ivory)}
.hud-jump .ico{width:18px;height:18px}
.hud-jump kbd{font:500 .74rem/1 var(--body);color:var(--ink-3);padding:4px 7px;border-radius:8px;background:rgba(242,244,232,.06)}
.hud-pill{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 15px;border:0;border-radius:999px;background:rgba(242,244,232,.05);color:var(--ink-2);font:500 .82rem/1 var(--body);cursor:pointer}
.hud-pill:hover{background:rgba(242,244,232,.09)}
.hud-wallet{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px 0 14px;border:0;border-radius:999px;background:rgba(242,244,232,.05);color:var(--ink-2);font:540 .92rem/1 var(--body);cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.hud-wallet:hover{background:rgba(242,244,232,.09);color:var(--ivory)}
.hud-wallet .ico{width:18px;height:18px;color:var(--mint)}
.hud-wallet .addr{font-family:var(--mono);font-size:.84rem}
.hud-wallet.off .addr,.hud-wallet.btn-glow{font-family:var(--body);color:var(--ivory)}
.hud-wallet.btn-glow{background:rgba(101,230,196,.12);color:var(--mint)}
.gm .gnav .btn.mint[aria-current]{box-shadow:0 0 0 3px rgba(101,230,196,.25)}
body.hud-scrolled .gm .gnav{background:rgba(13,17,20,.95);box-shadow:0 18px 44px -16px rgba(0,0,0,.95),inset 0 0 0 1px rgba(242,244,232,.07)}
@media (max-width:1240px){.hud-jump kbd{display:none}.hud-jump{width:46px;padding:0;justify-content:center}}
@media (max-width:1180px){.hud-wallet .addr{display:none}.hud-wallet{width:46px;padding:0;justify-content:center}}
@media (max-width:1520px){.gm .hl-badge .l{display:none}.gm .hl-badge .s{display:inline}}
.hud-pill,.gm .gnav .mine,.hud-wallet{white-space:nowrap}
@media (max-width:1000px){.gm .gnav .links a{padding:0 9px;font-size:15px}.gm .gnav .mine{padding:0 5px}}
@media (max-width:860px){
  .gm .gnav .logo .lockup{display:none}.gm .gnav .logo .mark{display:block}
  .hud-wallet{display:none}.hud-jump{height:42px;width:42px}.hud-pill{height:42px;padding:0 12px}
}
@media (max-width:360px){.hud-jump{display:none}}
@media (max-width:420px){.gm .gnav{gap:8px;padding-left:12px}.gm .gnav .right{gap:6px}.gm .gnav .btn.mint{padding:0 14px}}
/* ---------- pages ---------- */
#viewHost{position:relative;min-height:calc(100vh - 220px)}
.view-page{position:relative;animation:pageIn .35s var(--ease)}
body.map-on .view-page{animation:none}
.view-page > .view-body{position:relative;width:min(1240px,100% - 64px);margin-inline:auto;padding:28px 0 24px}
.view-page[data-view="intro"] > .view-body{width:auto;padding:0}
.view-page[data-view="agents"] > .view-body,.view-page[data-view="agent"] > .view-body,.view-page[data-view="me"] > .view-body,.view-page[data-view="plant"] > .view-body,.view-page[data-view="lend"] > .view-body,.view-page[data-view="help"] > .view-body{padding-top:0}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:720px){.view-page > .view-body{width:calc(100% - 32px);padding-top:16px}}
/* older views' fixed/absolute "layer" and "stage" panes become normal page flow */
.view-page .layer{position:relative;inset:auto;z-index:auto;pointer-events:auto}
.view-page .stage{position:relative;inset:auto;z-index:auto;background:none;min-height:0}
.hf-ribbon{position:absolute!important;top:6px!important;left:50%!important;z-index:5!important;border:0!important;background:rgba(185,162,232,.14)!important;font:500 .72rem/1 var(--body)!important;letter-spacing:.04em!important;padding:7px 12px!important}
/* ---------- Agents > Map: the 3D world, only here ---------- */
.world{position:fixed;left:0;right:0;top:0;bottom:0;z-index:1;background:#07080a}
.world[hidden]{display:none}
body.map-on .world{display:block}
.pulse-tags{position:absolute;inset:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.view-page{animation:none}}

/* ---------- quick-jump palette ---------- */
.qj{position:fixed;inset:0;z-index:80;display:flex;justify-content:center;align-items:flex-start;padding:min(14vh,120px) 16px 16px;background:rgba(7,8,10,.55);animation:fadeIn .15s ease-out}
.qj[hidden]{display:none}
.qj-box{width:min(600px,100%);max-height:min(560px,calc(100vh - 140px));display:flex;flex-direction:column;border-radius:24px;background:var(--pod-2);border:0;box-shadow:0 40px 90px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(242,244,232,.06);box-shadow:var(--float-shadow);overflow:hidden}
.qj-in{display:flex;align-items:center;gap:12px;padding:4px 18px;border-bottom:1px solid var(--hair)}
.qj-in svg{flex:none;width:18px;height:18px;stroke:var(--mist-3);fill:none;stroke-width:1.8;stroke-linecap:round}
.qj-in input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--mist);font:400 1.06rem/1 var(--body);padding:16px 0}
.qj-in input::placeholder{color:var(--mist-3)}
.qj-list{list-style:none;margin:0;padding:8px;overflow-y:auto;flex:1;min-height:0}
.qj-list li[data-n]{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 12px;border-radius:14px;cursor:pointer}
.qj-list li svg{width:18px;height:18px;stroke:var(--mist-3);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.qj-l{min-width:0}
.qj-l b{display:block;font:500 .92rem/1.25 var(--body);color:var(--mist)}
.qj-l small{display:block;font:400 .78rem/1.3 var(--body);color:var(--mist-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qj-list em{display:inline-flex;align-items:center;gap:5px;font:500 .72rem/1 var(--body);color:var(--mist-3)}
.qj-list em svg{width:11px;height:11px}
.qj-list li.soon .qj-l b{color:var(--mist-2)}
.qj-list li[aria-selected="true"]{background:rgba(242,244,232,.07)}
.qj-list li[aria-selected="true"] svg{stroke:var(--accent)}
.qj-none{padding:18px 12px;color:var(--mist-3)}
.qj-foot{display:flex;gap:16px;padding:10px 18px;border-top:1px solid var(--hair);font:400 .72rem/1 var(--body);color:var(--mist-3)}
.qj-foot kbd{margin-right:3px}
@media (max-width:600px){.qj-foot,.qj-in kbd{display:none}.qj-list em{display:none}}


/* coming-soon page (features.js) in the v3 voice */
.hf-soon-page{min-height:0!important;padding:8px 0}
.hf-soon-page .hf-eyebrow{font:500 .8rem/1 var(--body)!important;letter-spacing:0!important;text-transform:none!important;border-color:transparent!important;background:rgba(242,244,232,.07)!important;padding:9px 14px!important}
.hf-soon-page h1{font-weight:500!important;letter-spacing:-.05em!important}
.hf-soon-page .hf-notify{border-radius:24px!important;border-color:rgba(242,244,232,.10)!important;background:rgba(242,244,232,.04)!important;padding:20px 22px!important}
.hf-soon-page .hf-links{font:500 .875rem/1.4 var(--body)!important}
.hf-soon-page .hf-links a{border-bottom:0!important;color:var(--accent)!important}
.hf-soon-page .hf-also h2{font:500 .875rem/1.2 var(--body)!important;letter-spacing:0!important;text-transform:none!important;color:var(--mist-2)!important}
.hf-soon-page .hf-chain{font:400 .8rem/1.55 var(--body)!important;border-top-color:var(--hair)!important}

/* the living world beyond Home: a static header band on every inner page — faint thread texture with the four-point star,
   over a low horizon glow. One baked SVG + gradients: nothing animates, no blur (perf rules). */
.view-page:not([data-view="intro"])::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:-96px;height:460px;pointer-events:none;
  background:url(brand/band-threads.svg) center top/1440px 420px no-repeat,
    radial-gradient(60% 30% at 70% 100%,rgba(101,230,196,.10),transparent 70%),
    radial-gradient(40% 18% at 85% 100%,rgba(185,162,232,.07),transparent 70%);
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.view-page:not([data-view="intro"])::after{content:"";position:absolute;z-index:-1;left:0;right:0;top:300px;height:2px;pointer-events:none;border-radius:50%;
  background:radial-gradient(50% 100% at 70% 50%,rgba(242,244,232,.28),rgba(101,230,196,.12) 40%,transparent 75%)}
@media (max-width:860px){.view-page:not([data-view="intro"])::before{background-size:900px 262px,auto,auto;background-position:70% top,0 0,0 0;height:320px}.view-page:not([data-view="intro"])::after{top:210px}}
/* desktop "More" mega-menu (app.js) */
.mg-btn{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 14px 0 16px;border:0;border-radius:999px;background:none;color:var(--ink-2);font:520 15.5px/1 var(--sans);cursor:pointer;flex:none;transition:background .2s,color .2s}
.mg-btn:hover,.mg-btn[aria-expanded="true"]{color:var(--ivory);background:rgba(242,244,232,.06)}
.mg-btn .ico{width:14px;height:14px;transition:transform .2s var(--ease)}
.mg-btn[aria-expanded="true"] .ico{transform:rotate(180deg)}
.mega{position:absolute;z-index:75;top:calc(100% + 10px);left:8px;right:8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 22px;padding:22px 24px 18px;border-radius:32px;background:linear-gradient(180deg,var(--pod-2),var(--pod));box-shadow:0 40px 90px -30px rgba(0,0,0,.95),inset 0 0 0 1px rgba(242,244,232,.07);animation:pageIn .25s var(--ease)}
.mega[hidden]{display:none}
.mega h2{font:500 13px/1 var(--sans);letter-spacing:.06em;color:var(--ink-3);margin:4px 0 10px}
.mega ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mega li a:not(.mg-sub){display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start;padding:9px 10px;border-radius:18px;color:var(--ivory);text-decoration:none}
.mega li a:not(.mg-sub):hover,.mega li a:focus-visible{background:rgba(242,244,232,.05)}
.mega .mg-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(101,230,196,.1);color:var(--mint)}
.mega .mg-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mega b{display:block;font-size:15px;font-weight:500}
.mega small{display:block;margin-top:2px;color:var(--ink-3);font-size:13px;line-height:1.35}
.mega .mg-sub{display:inline-flex;align-items:center;gap:5px;margin:0 0 6px 58px;color:var(--mint);font-size:13px;text-decoration:none}
.mega .mg-all{grid-column:1/-1;justify-self:end;display:inline-flex;align-items:center;gap:6px;margin-top:6px;color:var(--ink-2);font-size:14px;text-decoration:none}
.mega .mg-all:hover{color:var(--mint)}
@media (max-width:1180px){.mega{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.mg-btn,.mega{display:none!important}}
/* the More button needs room: compact the right side earlier */
@media (max-width:1520px){.hud-jump kbd{display:none}.hud-jump{width:46px;padding:0;justify-content:center}.hud-wallet .addr{display:none}.hud-wallet{width:46px;padding:0;justify-content:center}}
@media (max-width:1180px){.mg-btn{padding:0 10px 0 12px}}
@media (max-width:1100px) and (min-width:861px){.hud-wallet{display:none}.gm .hl-badge .s{display:none}.gm .hl-badge{padding:0 14px!important}}
@media (max-width:1000px) and (min-width:861px){.gm .gnav .links a{padding:0 7px;font-size:14.5px}.mg-btn{padding:0 8px;font-size:14.5px}.st-long{display:none}.gm .gnav{padding-left:16px}}
@media (max-width:1340px){.gm .gnav .mine .lbl{display:none}.gm .gnav .mine{padding:0 10px 0 5px}}
@media (max-width:1240px) and (min-width:861px){.gm .gnav .links a{padding:0 10px}.mg-btn{padding:0 10px 0 12px}.gm .gnav{gap:8px}}
#viewHost{overflow-x:clip}
#navStart{gap:0}
/* inner-page header band now uses a darkened crop of the owner's mycelium field (brand/field/band-*.webp) + the star accent */
.view-page:not([data-view="intro"])::before{background:url(brand/band-stars.svg) center top/1440px 420px no-repeat,url(brand/field/band-1440.webp) right top/auto 420px no-repeat,radial-gradient(60% 30% at 70% 100%,rgba(101,230,196,.08),transparent 70%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%),linear-gradient(#000 50%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 38%),linear-gradient(#000 50%,transparent);mask-composite:intersect;opacity:.8}
@media (max-width:860px){.view-page:not([data-view="intro"])::before{background:url(brand/field/band-800.webp) right top/auto 262px no-repeat;opacity:.6}}