/* ═══ GradeOS TAPE v1 — the financial-terminal register ══════════════════════
   Bloomberg-instrument feel for the app's light (white-glass) pages, dark-
   compatible. One accent (lime), JetBrains Mono tracked caps, hairline rules.
   Pairs with gradeos-tape.js (ticker build/loop, sparkline canvases).
     <link rel="stylesheet" href="/gradeos-tape.css?v=1">
     <script defer src="/gradeos-tape.js?v=1"></script>

   USAGE (one-liners)
   · Ledger surface:   add .gxt-grid to any panel (fine ledger-paper grid)
   · KPI rail:         <div class="gxt-rail"> <div class="gxt-cell">…</div> ×N </div>
   · Cell anatomy:     <span class="gxt-label">GRADES TODAY</span>
                       <span class="gxt-value">1,284</span>
                       <span class="gxt-delta up">4.2%</span>
                       <canvas class="gxt-spark" data-gx-spark="3,5,4,8,7,9"></canvas>
   · Ticker tape:      <div class="gxt-tape" data-gx-tape data-gx-speed="46">
                         <span class="gxt-item">GRADE A SEALED <i>BENCH 2 · 14:02</i></span>…
                       </div>          (JS duplicates the run for a seamless loop)
   · Depth layer:      <div class="gxt-depth"></div> inside any position:relative panel
   Live feed JS:       GXTape.tape(el).push('GRADE A SEALED · BENCH 2 · 14:02')     */

:root{
  --gxt-ink:#e8e8ea; --gxt-dim:#9a9aa3; --gxt-faint:#5a5a63;
  --gxt-line:rgba(255,255,255,.08); --gxt-line-strong:rgba(255,255,255,.15);
  --gxt-acc:#c8ff00;                 /* marks, bars, dots — the brand lime   */
  --gxt-acc-text:#c8ff00;            /* lime as TEXT (readable on dark)      */
  --gxt-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
html.gx-light{
  --gxt-ink:#17191d; --gxt-dim:#5b616b; --gxt-faint:#9aa0a8;
  --gxt-line:rgba(12,14,18,.09); --gxt-line-strong:rgba(12,14,18,.18);
  --gxt-acc:#c8ff00;
  --gxt-acc-text:#6e8a00;            /* darkened lime for text on white      */
}

/* ── ledger-paper grid — safe on white-glass, whisper-faint on dark ── */
.gxt-grid{
  background-image:
    linear-gradient(var(--gxt-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--gxt-line) 1px,transparent 1px);
  background-size:100% 28px,28px 100%;
  background-position:0 -1px,-1px 0;
}

/* ── KPI rail: hairline column rules, terminal cells ── */
.gxt-rail{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  border-top:1px solid var(--gxt-line-strong);border-bottom:1px solid var(--gxt-line-strong)}
.gxt-cell{padding:12px 16px 11px;border-left:1px solid var(--gxt-line);min-width:0}
.gxt-cell:first-child{border-left:0}
.gxt-label{display:block;font:600 9px var(--gxt-mono);letter-spacing:.22em;
  text-transform:uppercase;color:var(--gxt-faint);margin-bottom:5px;white-space:nowrap}
.gxt-value{font:600 21px var(--gxt-mono);letter-spacing:-.01em;color:var(--gxt-ink);
  font-variant-numeric:tabular-nums;line-height:1.1;vertical-align:middle}
.gxt-unit{font:500 10px var(--gxt-mono);letter-spacing:.1em;color:var(--gxt-dim)}

/* ── delta chips — ▲ carries the accent; ▼ stays neutral (danger is rare,
   reserve .bad for true alerts) ── */
.gxt-delta{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 7px;
  border-radius:5px;font:600 10px var(--gxt-mono);letter-spacing:.06em;
  font-variant-numeric:tabular-nums;vertical-align:middle;
  color:var(--gxt-dim);background:transparent;border:1px solid var(--gxt-line)}
.gxt-delta.up{color:var(--gxt-acc-text);border-color:transparent;background:rgba(200,255,0,.14)}
.gxt-delta.up::before{content:"▲"}
.gxt-delta.down::before{content:"▼"}
.gxt-delta.flat::before{content:"—"}
.gxt-delta.bad{color:#ff5a5a;background:rgba(255,90,90,.1);border-color:transparent}
.gxt-delta.bad::before{content:"▼"}

/* ── sparkline canvas (drawn by GXTape.spark; honest data only) ── */
canvas.gxt-spark{width:60px;height:20px;display:inline-block;vertical-align:middle;margin-left:10px}

/* ── ticker tape — live events as a scrolling strip ── */
.gxt-tape{position:relative;overflow:hidden;height:30px;
  border-top:1px solid var(--gxt-line-strong);border-bottom:1px solid var(--gxt-line-strong);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.gxt-tape-track{position:absolute;left:0;top:0;height:100%;display:inline-flex;align-items:center;
  white-space:nowrap;will-change:transform;animation:gxtTape var(--gxt-tape-dur,40s) linear infinite}
.gxt-tape:hover .gxt-tape-track{animation-play-state:paused}
@keyframes gxtTape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.gxt-item{display:inline-flex;align-items:baseline;gap:7px;padding:0 26px;
  font:600 10px var(--gxt-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gxt-ink)}
.gxt-item::before{content:"◆";color:var(--gxt-acc-text);font-size:9px}
.gxt-item i{font-style:normal;color:var(--gxt-dim);letter-spacing:.1em}
.gxt-item.dim{color:var(--gxt-dim)}
.gxt-item.dim::before{color:var(--gxt-faint)}

/* ── drifting depth layer — barely-there diagonal drafting lines, GPU
   transform drift over minutes; safe on white-glass ── */
.gxt-depth{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit}
.gxt-depth::before{content:"";position:absolute;inset:-60%;
  background:repeating-linear-gradient(115deg,transparent 0 42px,var(--gxt-line) 42px 43px);
  opacity:.55;animation:gxtDrift 180s linear infinite}
@keyframes gxtDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(86px,50px,0)}}

/* ── reduced motion: tape + depth freeze in place ── */
@media (prefers-reduced-motion:reduce){
  .gxt-tape-track{animation:none}
  .gxt-depth::before{animation:none}
}