/* ══ GHOST CASE — THE NAV BAR ══════════════════════════════════════════════════════════
ONE header for every Ghost Case page, web and phone. Lifted verbatim from the home page,
which is the reference.
WHY THIS EXISTS. Every page used to carry its own copy. Audited across the 14 ghost-case
pages: 14 different headers, 3 different patrol ghosts, 8 running an old dust animation,
and 4 whose ghost was wearing a hat the others were not. None of that was a decision —
it is what happens when a fix has to be applied fourteen times by hand and one gets
missed. A page cannot drift from a file it does not own a copy of.
HOW TO USE IT, on any page:
The script injects the bar, so the page's own markup comes OUT. Page-specific
chips (UNREAD · 3, OPEN TRADES · 2) go in via data-chips, and the script keeps their ids
so the page's own code still finds them.
PHONE. The VOIDD logo and the × drop out and the GHOST CASE wordmark becomes the logo,
hard left, at the web's own type. That behaviour lives here now, so it is the same on
every page instead of only on the one that got it. */
/* ── Header (glass morph) — verbatim from ghost-case.html ── */
.hdr{position:fixed;top:0;left:0;right:0;height:78px;display:flex;align-items:center;gap:12px;/* the right pad clears the scroll rail: the avatar was sitting 6px off it */padding:0 calc(var(--rail,16px) + 22px) 0 22px;background:rgba(6,6,14,.30);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid rgba(180,180,255,.12);z-index:2000}
.hdr img.logo{height:58px;width:auto;display:block}
.hdr .x{color:#fff;font-size:10px;line-height:1;padding:2px 7px}
.hdr .ttl{font-family:'Share Tech Mono',monospace;font-weight:400;font-size:15px;letter-spacing:2.5px;text-transform:uppercase;color:#fff}
/* BETA — a small pill riding superscript off the wordmark. Lives here so the
one nav file gives every page the same badge on web AND mobile (Tom 08-10). */
.hdr .ttl .beta{font-family:'Kode Mono',monospace;font-weight:700;font-size:7px;
letter-spacing:.8px;line-height:1;text-transform:uppercase;color:var(--blue,#0C00FF);
border:1px solid var(--blue,#0C00FF);border-radius:2px;padding:2px 3px 1px;
margin-left:5px;top:-.55em;position:relative;display:inline-block;vertical-align:baseline}
.hdr .sp{flex:1}
.stat{position:relative;height:22px;display:inline-flex;align-items:center;padding:0 10px;font-family:"Kode Mono",monospace;font-family:"Kode Mono",monospace;font-size:8px;letter-spacing:1.2px;white-space:nowrap;color:#fff;text-transform:uppercase;border:1px solid rgba(180,180,255,.14);background:radial-gradient(80% 100% at 100% 0%,rgba(255,255,255,.22) 0%,transparent 60%),rgba(255,255,255,.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);text-decoration:none}
.stat svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.7;margin-right:6px;flex-shrink:0}
.stat:hover{border-color:var(--bmid);color:#fff;text-decoration:none}
.stat.glow-blue{background:radial-gradient(80% 100% at 100% 0%,rgba(12,0,255,.42) 0%,transparent 62%),rgba(255,255,255,.05);color:var(--blue);border-color:rgba(12,0,255,.6);text-shadow:0 0 .6px currentColor}
.stat.glow-blue::before{border-top-color:var(--blue);border-right-color:var(--blue)}
.stat.glow-blue::after{border-bottom-color:var(--blue);border-left-color:var(--blue)}
.stat::before{content:'';position:absolute;top:-1px;right:-1px;width:8px;height:8px;border-top:1px solid rgba(180,180,255,.22);border-right:1px solid rgba(180,180,255,.22)}
.stat::after{content:'';position:absolute;bottom:-1px;left:-1px;width:8px;height:8px;border-bottom:1px solid rgba(180,180,255,.22);border-left:1px solid rgba(180,180,255,.22)}
.stat b{color:var(--blue);font-weight:400;font-size:10px;font-family:inherit;text-shadow:0 0 .6px currentColor}
.pgh{position:absolute;top:50%;margin-top:-13px;left:0;width:20px;height:26px;will-change:transform;pointer-events:auto;cursor:pointer}
.pgh .pxg-w{--c:2px;position:relative;display:block;width:calc(var(--c)*9);height:calc(var(--c)*11);color:var(--blue);filter:drop-shadow(0 0 7px rgba(12,0,255,.55))}
.pgh .pxg-w svg{display:block;width:100%;height:100%}
.pgh .gh-eye{position:absolute;top:calc(var(--c)*2.3);font-family:'Share Tech Mono',monospace;font-size:calc(var(--c)*5);line-height:calc(var(--c)*5);color:#fff;font-weight:bold;width:calc(var(--c)*3.4);text-align:center;transition:transform .16s;transform-origin:center 60%}
.pgh .gh-eye.blink{transform:scaleY(.08)!important}
.pdust{position:absolute;width:2px;height:2px;background:var(--blue);image-rendering:pixelated;animation:pd 1.1s steps(6,end) forwards;pointer-events:none}
@keyframes pd{0%{opacity:1;transform:translate(0,0)}80%{opacity:1}100%{opacity:0;transform:translate(var(--dx,-26px),var(--dy,2px))}}
/* ── avatar + account menu — verbatim from ghost-case.html ── */
.hdr .sp2{flex:0 0 2px}
.hbtn{position:relative;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid rgba(180,180,255,.14);background:radial-gradient(80% 100% at 100% 0%,rgba(255,255,255,.16) 0%,transparent 60%),rgba(255,255,255,.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .15s, box-shadow .15s}
.hbtn:hover{border-color:var(--bmid);box-shadow:0 0 10px rgba(12,0,255,.3)}
/* flex-shrink:0 — collections keeps a search field in the bar, and on a 393px screen
the avatar was being squeezed from 28px to 20px to make room for it */
.avatar{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
#hd-ndot{position:absolute;top:-2px;right:-2px;width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px rgba(12,0,255,.9)}
.pxg-w{position:relative;display:block;width:calc(var(--c)*9);height:calc(var(--c)*11);color:#e6e8ff}
.pxg-w svg{display:block;width:100%;height:100%}
/* THE AVATAR IS THE BLUE GHOST until you are someone. Every page used to draw it
differently — one of them rolled a random hue per visitor — so signed out it now reads
the same everywhere: VOID blue body, white eyes, the same mark as the ghost patrolling
the bar beside it. Signed in, gc-nav.js paints your own colours and initials over it. */
.avatar .pxg-w{--c:2px;color:var(--blue)}
.avatar .gh-eye{position:absolute;top:calc(var(--c)*2.3);font-family:'Share Tech Mono',monospace;font-size:calc(var(--c)*5);line-height:calc(var(--c)*5);color:#fff;font-weight:bold;width:calc(var(--c)*3.4);text-align:center;transition:transform .09s ease;transform-origin:center 60%}
.avatar .gh-eye.blink{transform:scaleY(.08)}
.amenu{position:fixed;top:84px;right:22px;width:230px;z-index:3000;display:none;background:rgba(8,8,16,.72);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(180,180,255,.16);box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 30px rgba(12,0,255,.15);padding:6px}
.amenu.open{display:block}
.mi{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;color:#fff;font-family:"Kode Mono",monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;padding:10px 10px;cursor:pointer;text-align:left;transition:background .12s}
.mi:hover{background:rgba(12,0,255,.14);color:var(--blue)}
.mi svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7;flex-shrink:0}
.mi-note{font-family:"Kode Mono",monospace;font-size:6.5px;letter-spacing:1.5px;color:var(--dim);padding:6px 10px 4px}
.stdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle}
.stdot.red{background:#ff2d3e;box-shadow:0 0 9px rgba(255,45,62,.85)}
/* ── PHONE ────────────────────────────────────────────────────────────────────────────
390px of bar cannot carry a wordmark, a page title, a patrol ghost, two buttons and an
avatar. On the phone the GHOST CASE mark IS the logo: the VOIDD wordmark and its ✕ go,
the secondary chips go, and the wordmark sits hard left at the web's own type.
Order matters here. The first block is the home page's own phone sizing; the second is
the correction that turns the title into the logo. The correction has to come after or
the 9px caption wins and the bar reads empty — a lone pixel ghost and a button. */
@media (max-width:767px) {
.hdr{height:58px;padding:0 10px;gap:7px}
.hdr img.logo{height:34px}
.hdr .ttl{font-size:9px;letter-spacing:1.2px;white-space:nowrap}
.hdr .ttl .beta{font-size:6px;padding:1px 2.5px;margin-left:4px}
.hdr .x{display:none}
.stat{height:19px;padding:0 7px;font-size:6.5px;letter-spacing:.8px}
.hbtn{width:28px;height:28px}
/* THE AVATAR IS THE SAME SIZE ON BOTH. It was shrinking to 28px on a phone, which keeps
the ghost at 18x22 but drops the air around him from 8px to 5 — so the same mark read
as a tighter, different badge than the one on the web. Tom's standing rule is a 34px
box with ~8px padding; that is now what both get, from this one rule. */
.hdr .avatar{width:34px;height:34px} /* .hdr-prefixed so it also beats a page's own inline phone rule */
.amenu{top:64px;right:10px;width:200px}
}
@media (max-width:430px){ .hdr img.logo{height:30px} }
/* THE WORDMARK IS THE LOGO. Shown, not restyled — it keeps the web's own Share Tech Mono
at 15px / 2.5px. The only phone change is that it is visible at all and sits hard left.
!important because it is answering the rules above at equal specificity. */
@media (max-width:767px) {
.hdr img.logo,
.hdr .x { display: none !important; }
.hdr .stat:not(.glow-blue) { display: none !important; }
.hdr .ttl { display: block !important; order: -1; margin-left: 2px; white-space: nowrap;
font-size: 15px !important; letter-spacing: 2.5px !important; }
/* the right pad clears the scroll rail where a page has one */
.hdr { padding-right: calc(var(--rail, 16px) + 12px) !important; }
}
/* ══ SHARED GHOST LOADER ═══════════════════════════════════════════════════
One loader for every Ghost Case surface. Lifted verbatim from the binder /
collections page: the ghost pulsing in VOID blue, his G-C eyes blinking, and
three blue dots under him. Profile, community, trades and messages each had
their own plain "LOADING…" line instead. Lives in the shared nav stylesheet
so a page cannot drift from a file it does not own a copy of. (Tom 08-10) */
/* FREE, NOT IN A BOX. This used to be a 240px rounded panel with a near-opaque
fill, dropped inside whatever container was loading — so the ghost sat in a
little black card in the middle of the page. The home page's loader is the one
that reads right: a translucent wall over the whole screen with the page's own
colour blurred behind it, and the ghost floating in the middle of it. Those are
the home page's exact values (rgba(2,2,8,.72), blur 9px saturate 140%), so
every Ghost Case surface now loads the way the home page does — one style, no
per-page drift. (Tom 08-11) */
.gcld{position:fixed;inset:0;z-index:9000;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
margin:0;padding:0;border-radius:0;min-height:0;
background:rgba(2,2,8,.72);
backdrop-filter:blur(9px) saturate(140%);-webkit-backdrop-filter:blur(9px) saturate(140%)}
.gcld-slot{display:block}
/* he levitates, the way he does on the home page and in the nav */
.gcld .pxg-w{filter:drop-shadow(0 0 18px rgba(12,0,255,.55));animation:gcGhostFloat 1.15s ease-in-out infinite alternate;color:#0C00FF;display:inline-block}
@keyframes gcGhostFloat{from{transform:translateY(-6px)}to{transform:translateY(6px)}}
.gcld svg{width:64px;height:78px;overflow:visible} /* home-page size */
.gcld-eye{font-family:'Share Tech Mono',monospace;font-weight:bold;font-size:60px;fill:#fff;transform-box:fill-box;transform-origin:center 60%;animation:gcldBlink 2.4s infinite}
.gcld-eye2{animation-delay:.12s}
@keyframes gcldBlink{0%,86%,100%{transform:scaleY(1)}90%,94%{transform:scaleY(.08)}}
/* gcldPulse retired — the ghost floats now, matching the home page. My change
made it unused, so it goes rather than sitting here as dead CSS. */
/* the label reads on the wall, not through it — solid white, the Ghost Case law */
.gcld .lt{font-family:'Kode Mono',monospace;font-weight:600;font-size:11px;letter-spacing:3px;color:#fff;text-align:center}
.gcld .dots{display:flex;gap:6px}
.gcld .dots i{width:5px;height:5px;background:var(--blue,#0C00FF);border-radius:50%;animation:gcldDot 1.1s infinite;
box-shadow:0 0 8px rgba(12,0,255,.7)}
.gcld .dots i:nth-child(2){animation-delay:.15s}
.gcld .dots i:nth-child(3){animation-delay:.3s}
@keyframes gcldDot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-5px);opacity:1}}