/* ═══════════════════════════════════════════════════════════════════════════
   GRADEOS PRIME v1 — premium component library (styles)
   Pairs with gradeos-prime.js (physics core + auto-boot runtime).

   Components (all opt-in, all progressive-enhancement):
     · GxPassport    <div data-gx-passport='{…}'>       — the Device Passport artifact
     · GxGradeReveal <div data-gx-grade-reveal='{…}'>   — cinematic grade-completion moment
     · GxInspector   <div data-gx-inspector='{…}'>      — evidence viewer (zoom/pan/pins)
     · GxCommandRail <table data-gx-commandrail='{…}'>  — ledger action layer
     · GxNumberFlow  <span data-gx-numberflow='{…}'>    — financial-grade animated numerals

   Include:
     <link rel="stylesheet" href="/gradeos-prime.css?v=1">
     <script defer src="/gradeos-prime.js?v=1"></script>

   Brand law honored throughout: #0a0a0b canvas · one lime #c8ff00 · JetBrains
   Mono tracked-caps chrome · hairlines · transform/opacity motion only · full
   prefers-reduced-motion static path (also honored via html.gx-reduced).
   Namespaces: gxp- gxr- gxi- gxc- gxn- (no collision with gx-*/gos-* kits).
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --gxp-lime:#c8ff00;
  --gxp-lime-glow:rgba(200,255,0,.55);
  --gxp-ink:#e8e8ea;
  --gxp-dim:#9a9aa3;
  --gxp-faint:#5a5a63;
  --gxp-hairline:rgba(255,255,255,.08);
  --gxp-panel:#131317;
  --gxp-panel-2:#0e0e11;
  --gxp-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* physics-matched cubic approximations (JS springs are the real thing;
     these curves are for CSS-only moments and cut from the same cloth) */
  --gxp-settle:cubic-bezier(.16,1,.3,1);
  --gxp-glide:cubic-bezier(.45,.05,.55,.95);
}

/* ═══════════════════════════════════════════════════════════════════════════
   1 · GxPassport — the Device Passport as a legal instrument
   Structure (built by JS; identical classes can be authored statically for
   the no-JS fallback — everything below styles both):
     .gxp > .gxp-tilt > .gxp-card > .gxp-face.gxp-front / .gxp-face.gxp-back
   ═══════════════════════════════════════════════════════════════════════════ */
.gxp{position:relative;width:min(480px,100%);font-family:var(--gxp-mono);
  -webkit-user-select:none;user-select:none;perspective:1300px}
.gxp-tilt{position:relative;transform-style:preserve-3d;will-change:transform}
.gxp-card{position:relative;transform-style:preserve-3d;
  transition:transform .72s var(--gxp-settle)}
.gxp.gxp-flipped .gxp-card{transform:rotateY(180deg)}

.gxp-face{position:relative;border-radius:12px;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  background:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(165deg,var(--gxp-panel) 0%,var(--gxp-panel-2) 68%,#0b0b0d 100%);
  background-size:48px 48px,48px 48px,100% 100%;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 22px 60px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.05)}
.gxp-back{position:absolute;inset:0;transform:rotateY(180deg)}

/* hairline corner registration ticks — engineered-document detail */
.gxp-face::before,.gxp-face::after{content:"";position:absolute;width:12px;height:12px;
  pointer-events:none;z-index:3}
.gxp-face::before{left:9px;top:9px;
  border-left:1px solid rgba(200,255,0,.42);border-top:1px solid rgba(200,255,0,.42)}
.gxp-face::after{right:9px;bottom:9px;
  border-right:1px solid rgba(200,255,0,.42);border-bottom:1px solid rgba(200,255,0,.42)}

/* holographic security sheen — an oversized lime radial the pointer drags
   around by pure transform; blend:screen keeps it reading as light on the
   card surface, never a paint layer. */
.gxp-sheen{position:absolute;left:-55%;top:-85%;width:210%;height:270%;z-index:2;
  pointer-events:none;opacity:0;will-change:transform,opacity;
  background:radial-gradient(closest-side,
    rgba(200,255,0,.16) 0%,rgba(200,255,0,.07) 34%,rgba(200,255,0,.02) 55%,transparent 72%);
  mix-blend-mode:screen;transition:opacity .5s ease}
.gxp:hover .gxp-sheen{opacity:1}

/* head strip */
.gxp-head{position:relative;z-index:1;display:flex;align-items:center;
  justify-content:space-between;gap:14px;padding:13px 18px;
  border-bottom:1px solid var(--gxp-hairline);
  font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--gxp-dim)}
.gxp-head b{color:var(--gxp-ink);font-weight:700;letter-spacing:.26em}
.gxp-head .dia{color:var(--gxp-lime);filter:drop-shadow(0 0 6px var(--gxp-lime-glow))}
.gxp-head .doc{color:var(--gxp-faint);letter-spacing:.2em}

/* body — photo | grade+ledger */
.gxp-body{position:relative;z-index:1;display:grid;
  grid-template-columns:168px 1fr;gap:16px;padding:16px 18px 14px}
.gxp-photo{position:relative;border:1px solid var(--gxp-hairline);border-radius:6px;
  background:#0a0a0c;aspect-ratio:4/5;overflow:hidden;display:flex;
  align-items:center;justify-content:center}
.gxp-photo img,.gxp-photo svg{width:100%;height:100%;object-fit:cover;display:block}
.gxp-photo .tag{position:absolute;left:7px;top:6px;font-size:7.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gxp-faint)}
/* faint survey reticle over the photo */
.gxp-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(200,255,0,.05) 1px,transparent 1px) 0 0/100% 25%,
    linear-gradient(90deg,rgba(200,255,0,.05) 1px,transparent 1px) 0 0/25% 100%}

.gxp-side{display:flex;flex-direction:column;min-width:0}
.gxp-graderow{display:flex;align-items:center;gap:16px;padding-bottom:12px;
  border-bottom:1px solid var(--gxp-hairline)}
.gxp-ring{position:relative;width:74px;height:74px;flex:none}
.gxp-ring svg{width:100%;height:100%;display:block;overflow:visible}
.gxp-ring .gxp-letter{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:30px;font-weight:700;color:var(--gxp-lime);
  text-shadow:0 0 22px rgba(200,255,0,.4);letter-spacing:0}
.gxp-gradelabel{min-width:0}
.gxp-gradelabel .k{font-size:8px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gxp-faint);margin-bottom:5px}
.gxp-gradelabel .v{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gxp-ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gxp-gradelabel .s{margin-top:6px;font-size:8px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gxp-dim)}
.gxp-gradelabel .s b{color:var(--gxp-lime);font-weight:700}

/* ledger lines */
.gxp-ledger{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:10px}
.gxp-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:5.5px 0;border-bottom:1px dotted rgba(255,255,255,.07)}
.gxp-row:last-child{border-bottom:0}
.gxp-row .k{font-size:8px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gxp-faint);flex:none}
.gxp-row .v{font-size:9.5px;letter-spacing:.06em;color:var(--gxp-dim);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0;text-align:right}
.gxp-row .v.lime{color:var(--gxp-lime)}

/* machine-readable zone — the passport floor */
.gxp-mrz{position:relative;z-index:1;margin-top:auto;padding:10px 18px 12px;
  border-top:1px solid var(--gxp-hairline);background:rgba(255,255,255,.018);
  font-size:9.5px;line-height:1.75;letter-spacing:.14em;color:var(--gxp-faint);
  white-space:nowrap;overflow:hidden}
.gxp-mrz b{color:rgba(200,255,0,.6);font-weight:400}

/* verify affordance */
.gxp-verify{position:relative;z-index:4;display:inline-flex;align-items:center;gap:8px;
  margin:0;padding:7px 13px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid rgba(200,255,0,.3);
  font-family:var(--gxp-mono);font-size:8.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gxp-lime);
  transition:border-color .25s ease,background .25s ease,transform .25s var(--gxp-settle)}
.gxp-verify:hover{border-color:rgba(200,255,0,.65);background:rgba(200,255,0,.06)}
.gxp-verify:focus-visible{outline:1.5px solid var(--gxp-lime);outline-offset:2px}
.gxp-verify:active{transform:scale(.96)}

/* ── back face: audit trail ── */
.gxp-audit{position:relative;z-index:1;flex:1;padding:14px 18px;overflow:hidden}
.gxp-audit-row{display:grid;grid-template-columns:86px 1fr auto;gap:12px;
  align-items:baseline;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.gxp-audit-row .t{font-size:8.5px;letter-spacing:.08em;color:var(--gxp-faint);
  font-variant-numeric:tabular-nums}
.gxp-audit-row .e{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gxp-dim)}
.gxp-audit-row .e b{color:var(--gxp-ink);font-weight:600}
.gxp-audit-row .h{font-size:8px;letter-spacing:.05em;color:rgba(200,255,0,.55);
  font-variant-numeric:tabular-nums}
.gxp-back .gxp-face-inner{display:flex;flex-direction:column;height:100%}
.gxp-verifiedmark{display:flex;align-items:center;gap:10px;padding:11px 18px;
  border-top:1px solid var(--gxp-hairline);
  font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gxp-dim)}
.gxp-verifiedmark .dia{color:var(--gxp-lime);filter:drop-shadow(0 0 7px var(--gxp-lime-glow))}
.gxp-verifiedmark b{color:var(--gxp-lime);font-weight:700}

/* front + back faces must share height: back stretches over front */
.gxp-front{display:flex;flex-direction:column}
.gxp-back .gxp-head{flex:none}

/* ── mint entrance — the moment a grade completes and the passport exists.
   JS adds .gxp-minting (WAAPI handles the card body; this ring is the seal
   press dissipating). ── */
.gxp-mintring{position:absolute;inset:-10px;border-radius:16px;border:1px solid rgba(200,255,0,.8);
  opacity:0;pointer-events:none;z-index:5}
.gxp.gxp-minting .gxp-mintring{animation:gxpMintRing 1.1s var(--gxp-settle) forwards}
@keyframes gxpMintRing{0%{transform:scale(.9);opacity:0}
  25%{opacity:.9}100%{transform:scale(1.06);opacity:0}}

/* touch: no tilt (JS also gates), keep flip + sheen static */
@media (pointer:coarse){.gxp-tilt{transform:none!important}}

@media (max-width:520px){
  .gxp-body{grid-template-columns:1fr;gap:14px}
  .gxp-photo{aspect-ratio:16/10}
}

/* ═══════════════════════════════════════════════════════════════════════════
   2 · GxGradeReveal — the grade-completion ceremony stage
   .gxr > .gxr-photo (evidence) + .gxr-scan + .gxr-callouts + .gxr-stamp
   All phase transitions are WAAPI-driven from JS; classes carry final states
   so the sequence is idempotent and interruptible.
   ═══════════════════════════════════════════════════════════════════════════ */
.gxr{position:relative;font-family:var(--gxp-mono);border:1px solid var(--gxp-hairline);
  border-radius:12px;background:linear-gradient(170deg,#121216,#0c0c0f);
  overflow:hidden}
.gxr-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 16px;border-bottom:1px solid var(--gxp-hairline);
  font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gxp-dim)}
.gxr-head .st{color:var(--gxp-faint);transition:color .3s ease}
.gxr.gxr-live .gxr-head .st{color:var(--gxp-lime)}
.gxr-stage{position:relative;margin:16px;border:1px solid var(--gxp-hairline);
  border-radius:8px;background:#09090b;overflow:hidden;aspect-ratio:16/9}
.gxr-stage img,.gxr-stage svg{width:100%;height:100%;object-fit:cover;display:block}

/* scan line — 1px reader + trailing exposure gradient */
.gxr-scan{position:absolute;left:0;right:0;top:0;height:64px;z-index:3;
  pointer-events:none;opacity:0;will-change:transform;
  transform:translateY(-70px);
  background:linear-gradient(to bottom,transparent,rgba(200,255,0,.05) 60%,rgba(200,255,0,.16) 98%,rgba(200,255,0,.95) 100%)}

/* damage callout — anchor dot + hairline leader + tag */
.gxr-callout{position:absolute;z-index:4;opacity:0;will-change:transform,opacity}
.gxr-callout .dot{position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;
  transform:rotate(45deg);background:var(--gxp-lime);
  box-shadow:0 0 10px rgba(200,255,0,.8)}
.gxr-callout .lead{position:absolute;left:3px;top:0;height:1px;width:46px;
  background:linear-gradient(90deg,rgba(200,255,0,.85),rgba(200,255,0,.25));
  transform-origin:left center}
.gxr-callout .tag{position:absolute;left:52px;top:-8px;padding:3px 8px;
  white-space:nowrap;border:1px solid rgba(200,255,0,.35);border-radius:3px;
  background:rgba(10,10,11,.82);font-size:7.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gxp-lime)}
.gxr-callout.flip .lead{transform:scaleX(-1)}
.gxr-callout.flip .tag{left:auto;right:52px}
.gxr-callout.gxr-on{opacity:1}

/* the grade stamp — arrives over the stage, then holds */
.gxr-stampwrap{position:absolute;right:18px;bottom:16px;z-index:5;opacity:0;
  will-change:transform,opacity}
.gxr-stampwrap.gxr-on{opacity:1}
.gxr-stampbox{position:relative;display:flex;align-items:center;gap:13px;
  padding:12px 17px;border:1px solid rgba(200,255,0,.5);border-radius:8px;
  background:rgba(10,10,11,.85);box-shadow:0 0 34px rgba(200,255,0,.14),
    inset 0 0 22px rgba(200,255,0,.05)}
.gxr-stampbox .g{font-size:34px;font-weight:700;color:var(--gxp-lime);line-height:1;
  text-shadow:0 0 24px rgba(200,255,0,.5)}
.gxr-stampbox .m{font-size:7.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gxp-dim);line-height:1.9}
.gxr-stampbox .m b{color:var(--gxp-ink);display:block;font-size:9px;letter-spacing:.2em}
.gxr-stampring{position:absolute;inset:-8px;border-radius:11px;
  border:1px solid rgba(200,255,0,.8);opacity:0;pointer-events:none}

/* ledger docking strip below the stage */
.gxr-ledgerline{display:flex;align-items:center;gap:12px;margin:0 16px 14px;
  padding:11px 14px;border:1px solid var(--gxp-hairline);border-radius:7px;
  background:rgba(255,255,255,.02);opacity:0;will-change:transform,opacity;
  font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gxp-dim)}
.gxr-ledgerline.gxr-on{opacity:1}
.gxr-ledgerline .dia{color:var(--gxp-lime)}
.gxr-ledgerline b{color:var(--gxp-ink)}
.gxr-ledgerline .h{margin-left:auto;color:rgba(200,255,0,.55);letter-spacing:.05em;
  font-variant-numeric:tabular-nums;text-transform:none}

/* replay affordance (lab/demo) */
.gxr-replay{position:absolute;top:9px;right:12px;z-index:6}

/* ═══════════════════════════════════════════════════════════════════════════
   3 · GxInspector — enterprise evidence viewer
   .gxi > .gxi-bar + .gxi-viewport > .gxi-world (transformed) > img + .gxi-pin*
        + .gxi-strip (filmstrip)
   ═══════════════════════════════════════════════════════════════════════════ */
.gxi{position:relative;font-family:var(--gxp-mono);border:1px solid var(--gxp-hairline);
  border-radius:12px;background:#0d0d10;overflow:hidden;
  display:flex;flex-direction:column}
.gxi-bar{display:flex;align-items:center;gap:14px;padding:10px 14px;
  border-bottom:1px solid var(--gxp-hairline);font-size:8.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gxp-dim)}
.gxi-bar .dia{color:var(--gxp-lime);filter:drop-shadow(0 0 6px var(--gxp-lime-glow))}
.gxi-bar .lbl{color:var(--gxp-ink);font-weight:600}
.gxi-bar .sp{flex:1}
.gxi-zoomread{color:var(--gxp-faint);font-variant-numeric:tabular-nums;letter-spacing:.14em}
.gxi-btn{appearance:none;background:transparent;border:1px solid var(--gxp-hairline);
  border-radius:5px;color:var(--gxp-dim);font-family:var(--gxp-mono);font-size:10px;
  width:24px;height:22px;line-height:1;cursor:pointer;
  transition:border-color .2s ease,color .2s ease}
.gxi-btn:hover{border-color:rgba(200,255,0,.45);color:var(--gxp-lime)}
.gxi-btn:focus-visible{outline:1.5px solid var(--gxp-lime);outline-offset:1px}
.gxi-viewport{position:relative;flex:1;min-height:0;overflow:hidden;cursor:grab;
  touch-action:none;background:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px) 0 0/48px 48px,#09090b;
  outline:none}
.gxi-viewport:focus-visible{box-shadow:inset 0 0 0 1.5px rgba(200,255,0,.5)}
.gxi-viewport.gxi-panning{cursor:grabbing}
.gxi-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.gxi-world img,.gxi-world svg.gxi-frame{display:block;position:absolute;left:0;top:0;
  width:100%;height:100%;object-fit:contain;opacity:0;
  transition:opacity .28s ease;pointer-events:none}
.gxi-world img.on,.gxi-world svg.gxi-frame.on{opacity:1}

/* annotation pins — geo-locked children of the world, counter-scaled by JS */
.gxi-pin{position:absolute;z-index:4;will-change:transform;pointer-events:auto}
.gxi-pin .pt{position:absolute;left:-4px;top:-4px;width:8px;height:8px;
  transform:rotate(45deg);background:var(--gxp-lime);
  box-shadow:0 0 10px rgba(200,255,0,.75);cursor:pointer}
.gxi-pin .tip{position:absolute;left:10px;top:-9px;padding:3px 8px;white-space:nowrap;
  border:1px solid rgba(200,255,0,.35);border-radius:3px;background:rgba(10,10,11,.88);
  font-size:7.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gxp-lime);
  opacity:0;transform:translateX(-4px);
  transition:opacity .22s ease,transform .22s var(--gxp-settle);pointer-events:none}
.gxi-pin:hover .tip,.gxi-pin.gxi-open .tip{opacity:1;transform:none}
.gxi-pin.minor .pt{background:transparent;border:1px solid var(--gxp-lime);
  box-shadow:0 0 8px rgba(200,255,0,.35)}

/* filmstrip */
.gxi-strip{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--gxp-hairline);
  overflow-x:auto;scrollbar-width:thin}
.gxi-thumb{position:relative;flex:none;width:72px;height:50px;border-radius:5px;
  overflow:hidden;border:1px solid var(--gxp-hairline);background:#0a0a0c;cursor:pointer;
  padding:0;transition:border-color .22s ease,transform .22s var(--gxp-settle)}
.gxi-thumb img,.gxi-thumb svg{width:100%;height:100%;object-fit:cover;display:block;
  opacity:.55;transition:opacity .22s ease}
.gxi-thumb:hover img,.gxi-thumb:hover svg{opacity:.85}
.gxi-thumb.on{border-color:rgba(200,255,0,.65)}
.gxi-thumb.on img,.gxi-thumb.on svg{opacity:1}
.gxi-thumb.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--gxp-lime);box-shadow:0 0 8px rgba(200,255,0,.7)}
.gxi-thumb:focus-visible{outline:1.5px solid var(--gxp-lime);outline-offset:1px}
.gxi-thumb .fl{position:absolute;left:4px;bottom:3px;font-size:6.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gxp-dim)}
.gxi-kbd{display:flex;gap:10px;margin-left:auto;color:var(--gxp-faint);
  font-size:7.5px;letter-spacing:.14em;align-items:center}
.gxi-kbd kbd{font-family:var(--gxp-mono);font-size:7.5px;border:1px solid var(--gxp-hairline);
  border-radius:3px;padding:1px 4px;color:var(--gxp-dim);background:rgba(255,255,255,.03)}

/* ═══════════════════════════════════════════════════════════════════════════
   4 · GxCommandRail — hairline action layer over ledger tables
   JS wraps the table in .gxc-wrap and injects: .gxc-rail (shared, springs
   between rows), per-row .gxc-check cells, and the .gxc-dock bulk bar.
   ═══════════════════════════════════════════════════════════════════════════ */
.gxc-wrap{position:relative}
.gxc-wrap table{width:100%}
.gxc-wrap tbody tr{transition:background .18s ease}
.gxc-wrap tbody tr:hover{background:rgba(200,255,0,.025)}
.gxc-wrap tbody tr.gxc-sel{background:rgba(200,255,0,.045)}
.gxc-wrap tbody tr.gxc-sel td:first-child{box-shadow:inset 2px 0 0 var(--gxp-lime)}

/* the floating action rail — one instance, springs to the hovered row */
.gxc-rail{position:absolute;right:10px;top:0;z-index:5;display:flex;gap:6px;
  padding:4px;border:1px solid rgba(200,255,0,.28);border-radius:7px;
  background:rgba(13,13,16,.92);box-shadow:0 8px 26px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;will-change:transform,opacity}
.gxc-rail.gxc-on{opacity:1;pointer-events:auto}
.gxc-act{appearance:none;background:transparent;border:0;border-radius:4px;
  padding:5px 10px;cursor:pointer;font-family:var(--gxp-mono);font-size:7.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gxp-dim);
  will-change:transform;transition:color .18s ease,background .18s ease}
.gxc-act:hover{color:var(--gxp-lime);background:rgba(200,255,0,.07)}
.gxc-act:focus-visible{outline:1.5px solid var(--gxp-lime);outline-offset:1px}

/* diamond spring checkmarks */
.gxc-checkcell{width:34px;text-align:center}
.gxc-check{appearance:none;position:relative;display:inline-block;width:15px;height:15px;
  margin:0;border:1px solid rgba(255,255,255,.22);border-radius:3px;cursor:pointer;
  background:transparent;vertical-align:middle;
  transition:border-color .2s ease,background .2s ease}
.gxc-check:hover{border-color:rgba(200,255,0,.5)}
.gxc-check:focus-visible{outline:1.5px solid var(--gxp-lime);outline-offset:2px}
.gxc-check::after{content:"";position:absolute;left:3.5px;top:3.5px;width:6px;height:6px;
  transform:rotate(45deg) scale(0);background:var(--gxp-lime);
  box-shadow:0 0 8px rgba(200,255,0,.7);
  transition:transform .34s cubic-bezier(.2,1.4,.4,1)}   /* under-damped pop */
.gxc-check:checked{border-color:rgba(200,255,0,.7);background:rgba(200,255,0,.06)}
.gxc-check:checked::after{transform:rotate(45deg) scale(1)}

/* bulk-action dock — inertial arrival from below */
.gxc-dock{position:fixed;left:50%;bottom:26px;z-index:90;display:flex;align-items:center;
  gap:16px;padding:11px 18px;border-radius:10px;
  border:1px solid rgba(200,255,0,.32);background:rgba(12,12,15,.9);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.3);
  font-family:var(--gxp-mono);opacity:0;pointer-events:none;
  transform:translateX(-50%) translateY(90px);will-change:transform,opacity}
.gxc-dock.gxc-on{pointer-events:auto}
.gxc-dock .cnt{font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gxp-ink)}
.gxc-dock .cnt b{color:var(--gxp-lime);font-weight:700}
.gxc-dock .rule{width:1px;height:18px;background:rgba(255,255,255,.12)}
.gxc-dock .gxc-act{font-size:8px;padding:6px 12px;border:1px solid var(--gxp-hairline);
  border-radius:6px}
.gxc-dock .gxc-act:hover{border-color:rgba(200,255,0,.5)}
.gxc-dock .gxc-x{border:0;color:var(--gxp-faint);font-size:11px;padding:4px 6px}

/* ═══════════════════════════════════════════════════════════════════════════
   5 · GxNumberFlow — financial-grade animated numerals
   .gxn (inline register) > .gxn-sym (static glyphs) + .gxn-d > .gxn-reel
   Springs drive each reel translateY; carries roll through intermediate
   digits like a mechanical counter. Premium tier above hw-motion's odometer.
   ═══════════════════════════════════════════════════════════════════════════ */
.gxn{display:inline-flex;align-items:baseline;font-family:var(--gxp-mono);
  font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum";
  line-height:1;white-space:nowrap;
  transition:color .5s ease,text-shadow .5s ease}
.gxn-d{position:relative;display:inline-block;height:1em;overflow:hidden;
  width:.62em}
.gxn-reel{position:absolute;left:0;top:0;width:100%;will-change:transform}
.gxn-reel span{display:block;height:1em;text-align:center}
.gxn-sym{display:inline-block}
.gxn.gxn-up{color:var(--gxp-lime);text-shadow:0 0 16px rgba(200,255,0,.35)}
.gxn.gxn-down{color:#ff5a5a;text-shadow:0 0 16px rgba(255,90,90,.25)}
/* delta tag (optional, JS-injected when cfg.delta) */
.gxn-delta{display:inline-block;margin-left:.5em;font-size:.42em;letter-spacing:.18em;
  vertical-align:.14em;color:var(--gxp-faint);opacity:0;transform:translateY(4px);
  transition:opacity .4s ease,transform .4s var(--gxp-settle)}
.gxn-delta.gxn-on{opacity:1;transform:none}
.gxn-delta.gxn-up{color:var(--gxp-lime)}
.gxn-delta.gxn-down{color:#ff5a5a}

/* digit columns entering/leaving when magnitude changes */
.gxn-d{transition:width .4s var(--gxp-settle),opacity .3s ease}
.gxn-d.gxn-out{width:0;opacity:0}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — full static path. Honors the OS setting AND the manual
   html.gx-reduced switch (prime-lab toggle / ?gxprime=static via JS).
   Everything lands in final state; user-initiated transitions become cuts.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .gxp-card{transition:none}
  .gxp-tilt{transform:none!important}
  .gxp.gxp-minting .gxp-mintring{animation:none}
  .gxp-sheen{display:none}
  .gxr-scan{display:none}
  .gxr-callout,.gxr-stampwrap,.gxr-ledgerline{opacity:1;transform:none!important}
  .gxc-check::after,.gxc-dock,.gxi-pin .tip,.gxi-thumb,.gxn-d{transition:none}
  .gxn-reel{transition:none}
}
html.gx-reduced .gxp-card{transition:none}
html.gx-reduced .gxp-tilt{transform:none!important}
html.gx-reduced .gxp.gxp-minting .gxp-mintring{animation:none}
html.gx-reduced .gxp-sheen{display:none}
html.gx-reduced .gxr-scan{display:none}
html.gx-reduced .gxr-callout,html.gx-reduced .gxr-stampwrap,
html.gx-reduced .gxr-ledgerline{opacity:1;transform:none!important}
html.gx-reduced .gxc-check::after,html.gx-reduced .gxc-dock,
html.gx-reduced .gxi-pin .tip,html.gx-reduced .gxi-thumb,
html.gx-reduced .gxn-d{transition:none}