/* ══ 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:
       <link rel="stylesheet" href="/builders/gc-nav.css">
       <script src="/builders/gc-nav.js" data-title="Ghost Case · Profile"></script>
   The script injects the bar, so the page's own <header> 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(255,255,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}
.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(255,255,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(255,255,255,.22);border-right:1px solid rgba(255,255,255,.22)}
.stat::after{content:'';position:absolute;bottom:-1px;left:-1px;width:8px;height:8px;border-bottom:1px solid rgba(255,255,255,.22);border-left:1px solid rgba(255,255,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(255,255,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(255,255,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}
/* TWO ROWS CARRY A GLYPH INSTEAD OF AN SVG (trades, messages), so they had no icon
   slot and their labels started 21px left of every other row — visible the moment the
   sell-page override stopped shoving the rest to the right. Same 13px box the svgs
   occupy, so all seven labels now begin on the same x. */
.mi .mi-g{width:13px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:11px;line-height:1}
.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)}
/* SIGNED IN, ON EVERY PAGE (Tom 08-21: "all pages have the green circle").
   `.stdot.red` lived here and `.stdot.green` lived in ghost-case.html, so the dot
   painted on the binder and rendered as a 7px transparent circle everywhere else —
   the identity() that writes the span is shared, the colour that makes it visible
   was not. Same values the binder already used, so nothing changes there. */
.stdot.green{background:#2dff6a;box-shadow:0 0 9px rgba(45,255,106,.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 .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; }
}


/* ═══ THE LOADER — ONE LOOK ON EVERY GHOST CASE PAGE ═══════════════════════
   Tom 08-13: all 4-5 loading screens must be identical. Built to the home
   page's treatment — translucent wall, page blurred behind it, ghost floating
   in the middle, the "what's loading" caption and three dots.

   IT NEVER COVERS THE NAV. top:78px is the header height from ui-standard
   section 3 (64px in the mobile shell), and z-index 90 sits UNDER the header's
   100, so the bar stays visible and clickable while content loads.

   Glass values follow the ui-standard glass law (blur 18-22 / saturate 160 /
   alpha .30-.74) rather than the home page's blur(9px), so the loader matches
   every other glass surface in Ghost Case. */
.gcld{position:fixed;top:78px;left:0;right:0;bottom:0;z-index:1500;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  margin:0;padding:0;border-radius:0;
  background:rgba(4,4,10,.72);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)}
body.mshell .gcld{top:64px}
/* 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}
.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)}}
/* the caption 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}}
/* the elapsed counter — promoted out of the pre-grader, where a ten-second AI pass
   needed a climbing number to read as working rather than frozen */
.gcld-sec{font-family:'Kode Mono',monospace;font-size:8px;letter-spacing:1.5px;color:var(--blue,#0C00FF)}

/* ── INLINE: the SAME loader, sitting in the region it is waiting on ──────────────
   Tom 08-13, one design for all — so nothing here changes the ghost, the caption or
   the dots. It drops the fixed positioning and the frosted wall (there is nothing to
   cover: the page around it is already painted and usable) and comes down a size so
   it belongs to its panel rather than to the window. */
.gcld.gcld-in{display:flex;position:static;inset:auto;z-index:auto;
  padding:38px 12px;gap:12px;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.gcld.gcld-in svg{width:44px;height:54px}
.gcld.gcld-in .lt{font-size:10px;letter-spacing:2.5px}
.gcld.gcld-in .pxg-w{filter:drop-shadow(0 0 12px rgba(12,0,255,.45))}

/* the slot is only a marker until it becomes the loader — it never renders on its own */
.gcld-slot:not(.gcld){display:none}

/* MOTION IS DECORATION HERE, never information: the caption already says what is
   happening, so a member who asks the OS for less motion gets a still ghost and a
   still caption rather than three things bouncing. */
@media (prefers-reduced-motion:reduce){
  .gcld .pxg-w,.gcld .gcld-eye,.gcld .dots i{animation:none}
  .gcld .dots i{opacity:.8}
}