@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
/* ============================================================================
   FIRST LIGHT TERMINAL — the Desk surface (polling MVP)
   Self-contained First-Light palette (terminal black / green / amber, IBM Plex
   Mono). Adapted from terminal-mockup.html + grid drag/resize + palette + toast
   + help overlay + token-unlock states. Loaded by terminal.html / terminal.js.
   ========================================================================== */
:root{
  --mono:"IBM Plex Mono","DejaVu Sans Mono","SF Mono",Consolas,"Courier New",ui-monospace,monospace;
  --g:#33ff66; --a:#ffb000; --d:#000000; --dim:#244a30; --mut:#7fc593;  /* P2: --dim lifted from #1e3526 (invisible hairline) to match style.css */
  --code:#c8ffd8; --warn:#ffbf6b; --bad:#ff6d6d;
  --panel:#0a1a10; --panel2:#0d2115; --line:#22432e; --line2:#305a3f;
  --input-border:#3f7a55; /* resting input/control border — WCAG 1.4.11 non-text ≥3:1 on near-black */
  --txt:#d6ffe4; --txt2:#a6e6bf; --g2:#2fe38a; --gsoft:#5cf0a4;
  --r:12px;   /* P1: unify card radius token with style.css/homepage (was 10px) */
  --glow-g:0 0 8px rgba(51,255,102,.5);
  --glow-a:0 0 8px rgba(255,176,0,.5);
  --card-bg:radial-gradient(130% 130% at 50% -20%, rgba(51,255,102,.06), transparent 60%),
            linear-gradient(180deg,#0b1c14 0%,#08150f 60%,#071009 100%);
  --card-shadow:0 8px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(120,255,175,.05);
  --gap:12px; --rowh:118px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:
    radial-gradient(1200px 560px at 50% -14%, rgba(51,255,102,.06), transparent 62%),
    radial-gradient(760px 420px at 92% 2%, rgba(255,176,0,.03), transparent 60%),
    linear-gradient(180deg,#020604 0%, #000 60%), var(--d);
  color:var(--g); font-family:var(--mono); font-size:13px; line-height:1.5;
  height:100dvh; display:flex; flex-direction:column; overflow:hidden;
}
::selection{background:rgba(51,255,102,.26); color:#eafff1}
.tabnum{font-variant-numeric:tabular-nums}
a{color:var(--g)}
/* P1: global keyboard-focus ring — visible on black (amber; day-theme → green via theme.css) */
a:focus-visible,button:focus-visible,[role=button]:focus-visible,input:focus-visible{
  outline:2px solid var(--a); outline-offset:2px; border-radius:4px}

/* ── top command bar ───────────────────────────────────────────────────── */
.topbar{display:flex; align-items:center; gap:12px; padding:8px 12px;
  border-bottom:1px solid var(--line); background:linear-gradient(180deg,#08160e,#050d08); flex:0 0 auto}
.wordmark{display:flex; align-items:baseline; gap:9px; flex:0 0 auto; text-decoration:none}
.wordmark .sun{width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#ffe08a,#ffb000 55%,#7a5300);
  box-shadow:0 0 10px rgba(255,176,0,.7); align-self:center}
.wordmark .fl{color:#d3f7df; font-weight:700; letter-spacing:.12em; font-size:14px}
.wordmark .term{color:var(--a); letter-spacing:.22em; font-size:10px; text-shadow:var(--glow-a)}  /* P2: was .34em (too airy) */

.cmdwrap{flex:1 1 auto; position:relative; display:flex; align-items:center; min-width:120px}
.cmdprompt{position:absolute; left:12px; color:var(--a); font-weight:700; pointer-events:none; text-shadow:var(--glow-a)}
.cmd{width:100%; background:#040a06; border:1px solid var(--input-border); border-radius:8px;
  color:var(--code); font-family:var(--mono); font-size:13px; padding:8px 12px 8px 30px; outline:none;
  letter-spacing:.02em}
.cmd:focus{border-color:var(--g); box-shadow:0 0 0 2px rgba(51,255,102,.12), var(--glow-g)}
.cmd::placeholder{color:#4f8a68}
.cmdhint{position:absolute; right:10px; color:var(--mut); font-size:10px; letter-spacing:.1em; pointer-events:none}

.wsw{display:flex; align-items:center; gap:6px; flex:0 0 auto; flex-wrap:wrap}
.wschip{border:1px solid var(--line2); border-radius:16px; padding:4px 11px; color:var(--a);
  font-size:11px; letter-spacing:.06em; cursor:pointer; background:none; font-family:inherit}
.wschip.on{color:var(--g); border-color:var(--g); background:rgba(51,255,102,.08); text-shadow:var(--glow-g)}
.wschip.ghost{color:var(--mut)}
.wschip:hover{border-color:var(--a)}
.tierchip{border:1px solid rgba(255,176,0,.4); background:rgba(255,176,0,.07); color:var(--a);
  border-radius:6px; padding:4px 9px; font-size:10.5px; letter-spacing:.12em; text-shadow:var(--glow-a); cursor:pointer;
  font-family:inherit}
.tierchip.locked{color:var(--mut); border-color:var(--line2); background:none; text-shadow:none}

/* ── status strip ──────────────────────────────────────────────────────── */
.statusstrip{display:flex; align-items:center; gap:18px; padding:4px 14px; font-size:11px;
  color:var(--mut); border-bottom:1px solid var(--dim); background:#040b07; letter-spacing:.03em; flex-wrap:wrap; flex:0 0 auto}
.statusstrip .s b{color:var(--g); font-weight:700}
.statusstrip .s .amb{color:var(--a)}
.statusstrip .s .bad{color:var(--bad)}
.livedot{color:var(--g); text-shadow:0 0 7px rgba(51,255,102,.7)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.livedot{animation:blink 2.4s infinite}
.statusstrip .spacer{margin-left:auto}

/* ── the grid workspace ────────────────────────────────────────────────── */
.board{flex:1 1 auto; overflow:auto; padding:var(--gap);
  display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:var(--rowh); gap:var(--gap); align-content:start}
.board.empty::after{content:"empty workspace · press Ctrl-K then NEW <type>, or a verb like PRICE · COHORT · FLOOR";
  grid-column:span 12; color:var(--mut); text-align:center; padding:40px; font-size:12px; letter-spacing:.05em}

/* panel shell */
.panel{background:var(--card-bg); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--card-shadow); display:flex; flex-direction:column; overflow:hidden; position:relative;
  transition:border-color .12s, box-shadow .12s; min-height:0}
.panel:hover{border-color:var(--line2)}
.panel:focus-within{border-color:var(--g); box-shadow:0 0 0 1px rgba(51,255,102,.25), var(--card-shadow)}
.panel.dragging{opacity:.85; z-index:50; box-shadow:0 0 0 1px var(--g), 0 18px 44px rgba(0,0,0,.6); transition:none}
.panel.maxi{position:fixed; inset:96px 12px 40px 12px; z-index:80; grid-column:unset !important; grid-row:unset !important}
.phead{display:flex; align-items:center; gap:8px; padding:7px 10px; border-bottom:1px solid var(--dim);
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent); flex:0 0 auto; cursor:grab; user-select:none}
.phead:active{cursor:grabbing}
.phead .ttl{color:var(--a); font-size:11px; letter-spacing:.14em; text-shadow:var(--glow-a); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.phead .ttl::before{content:"[ "; color:var(--mut); text-shadow:none}
.phead .ttl::after{content:" ]"; color:var(--mut); text-shadow:none}
.phead .fresh{font-size:10px; color:var(--mut); letter-spacing:.06em; display:flex; align-items:center; gap:4px; white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block; background:var(--mut)}
.dot.live{background:var(--g); box-shadow:0 0 7px rgba(51,255,102,.8)}
.dot.stale{background:var(--a); box-shadow:0 0 7px rgba(255,176,0,.7)}
.dot.err{background:var(--bad); box-shadow:0 0 7px rgba(255,109,109,.7)}
.dot.load{background:var(--mut); animation:blink 1s infinite}
.phead .tools{margin-left:auto; display:flex; gap:2px; color:var(--mut)}
.phead .tools span,.phead .tools button{cursor:pointer; padding:2px 5px; border-radius:5px; font-size:11px}
/* tool controls are real <button>s (keyboard/tap) — reset native chrome so they
   render byte-identically to the old <span>s on desktop */
.phead .tools button{background:none; border:0; color:inherit; font-family:inherit;
  line-height:1; letter-spacing:inherit; -webkit-appearance:none; appearance:none}
.phead .tools span:hover,.phead .tools button:hover{color:var(--g); background:rgba(51,255,102,.1)}
.phead .tools button:focus-visible{outline:1px solid var(--g); outline-offset:1px}
.pbody{flex:1 1 auto; padding:10px 12px; overflow:auto; min-height:0}
.pbody.flush{padding:0}

/* generic states */
.pstate{display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%;
  text-align:center; gap:8px; color:var(--mut); padding:12px}
.pstate .ic{font-size:20px}
.pstate .t{color:var(--a); letter-spacing:.1em; font-size:11px}
.pstate .d{font-size:10.5px; max-width:230px; line-height:1.5}
.pstate.err .ic{color:var(--bad)} .pstate.err .t{color:var(--bad)}
.pstate button{margin-top:4px; font-family:inherit; font-size:11px; color:var(--g); background:#04120a;
  border:1px solid var(--input-border); border-radius:7px; padding:6px 12px; cursor:pointer}
.pstate button:hover{border-color:var(--g)}

/* key/value rows */
.kv{font-size:12px}
.kv .row{display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-bottom:1px solid var(--dim)}
.kv .row:last-child{border-bottom:0}
.kv .k{color:var(--mut)}
.kv .v{color:var(--g); font-weight:700; font-variant-numeric:tabular-nums}
.kv .v.amb{color:var(--a)} .kv .v.bad{color:var(--bad)} .kv .v.code{color:var(--code); font-weight:400}

.big{display:flex; align-items:baseline; gap:10px; margin:2px 0 8px; flex-wrap:wrap}
.big .num{font-size:28px; font-weight:700; color:var(--g); text-shadow:var(--glow-g); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.big .chg{font-size:13px; font-weight:700}
.chg.up{color:var(--g)} .chg.down{color:var(--bad)}
.sub{color:var(--mut); font-size:12px; letter-spacing:.05em}

.gauges{display:flex; gap:10px; margin-top:4px; flex-wrap:wrap}
.gauge{flex:1; min-width:70px; border:1px solid var(--line); border-radius:8px; padding:6px 8px; background:#040b07}
.gauge .gl{color:var(--mut); font-size:11px; letter-spacing:.1em}
.gauge .gv{font-size:16px; font-weight:700; font-variant-numeric:tabular-nums}
.gauge .gv.hot{color:var(--a)} .gauge .gv.cool{color:var(--g)}
/* mid-tier severity between cool (green) and hot (amber) — derives from the
   theme vars so it stays legible in both night and Aurora-day palettes */
.gauge .gv.warm{color:var(--a)}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .gauge .gv.warm{color:color-mix(in srgb, var(--a) 55%, var(--g) 45%)}
}

/* horizontal magnitude bars */
.bars{display:flex; flex-direction:column; gap:8px; margin-top:2px}
/* P2: label col was a fixed 74px → collapses to a few px in a half-width mobile
   panel; clamp it so the label always keeps a usable width. */
.bar{display:grid; grid-template-columns:clamp(48px,20vw,74px) 1fr 62px; align-items:center; gap:8px; font-size:11px}
.bar .bl{color:var(--txt2); letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar .track{height:12px; background:#04140c; border:1px solid var(--dim); border-radius:6px; overflow:hidden}
.bar .fill{height:100%; border-radius:6px}
.fill.g{background:linear-gradient(90deg,#1f8f4d,#33ff66)}
.fill.a{background:linear-gradient(90deg,#7a5300,#ffb000)}
.fill.b{background:linear-gradient(90deg,#7a2b2b,#ff6d6d)}
.bar .bv{text-align:right; color:var(--g); font-weight:700; font-variant-numeric:tabular-nums}

svg.viz{width:100%; height:100%; display:block; overflow:visible}
.axlab{fill:var(--mut); font-size:clamp(9px,0.6vw,12px); font-family:var(--mono)}  /* P2: clamp so axis density scales on ultrawide */

/* mini table / tape */
table.mini{width:100%; border-collapse:collapse; font-size:11px}
table.mini th{color:var(--mut); text-align:left; font-weight:400; letter-spacing:.08em; padding:3px 6px;
  border-bottom:1px solid var(--line); position:sticky; top:0; background:#071009; z-index:1}
table.mini td{padding:4px 6px; border-bottom:1px solid var(--dim); font-variant-numeric:tabular-nums}
table.mini tr:hover td{background:rgba(51,255,102,.05)}
.mono-code{color:var(--code); cursor:pointer}
.mono-code:hover{text-decoration:underline}
.pill{display:inline-block; border:1px solid var(--line2); border-radius:12px; padding:1px 7px; font-size:10px}
.pill.ok{color:var(--g); border-color:#1f6d3a; background:rgba(51,255,102,.08)}
.pill.amber{color:var(--a); border-color:rgba(255,176,0,.4); background:rgba(255,176,0,.08)}
.pill.bad{color:var(--bad); border-color:rgba(255,109,109,.4); background:rgba(255,109,109,.08)}

/* locked / upsell stub panel (streaming, Phase-2) */
.panel.locked{border-style:dashed; border-color:rgba(255,176,0,.35)}

/* graph thumb */
.graphthumb{position:relative; width:100%; height:100%; min-height:80px}
.node{position:absolute; width:11px; height:11px; border-radius:50%; transform:translate(-50%,-50%)}
.node.wallet{background:#33ff66; box-shadow:0 0 8px rgba(51,255,102,.7)}
.node.exch,.node.coinbase{background:#ffb000; box-shadow:0 0 8px rgba(255,176,0,.7)}
.node.taint{background:#ff6d6d; box-shadow:0 0 8px rgba(255,109,109,.7)}
.node.root{width:14px;height:14px;background:#c8ffd8;box-shadow:0 0 10px rgba(200,255,216,.9)}
.edge{position:absolute; height:1px; background:linear-gradient(90deg,rgba(51,255,102,.5),rgba(255,176,0,.4)); transform-origin:0 0}

/* resize handle */
.rz{position:absolute; right:2px; bottom:2px; width:16px; height:16px; cursor:nwse-resize; opacity:.55; z-index:3}
.rz:hover{opacity:1}
.rz::before{content:""; position:absolute; right:2px; bottom:2px; width:9px; height:9px;
  border-right:2px solid var(--line2); border-bottom:2px solid var(--line2)}
.rz:hover::before{border-color:var(--g)}

/* footer keyboard hint strip */
.kbstrip{display:flex; align-items:center; gap:16px; padding:5px 14px; border-top:1px solid var(--line);
  background:#040b07; font-size:10.5px; color:var(--mut); letter-spacing:.04em; flex-wrap:wrap; flex:0 0 auto}
.kbstrip kbd{background:#0d2115; border:1px solid var(--line2); border-bottom-width:2px; border-radius:4px;
  padding:1px 6px; color:var(--txt2); font-family:var(--mono); font-size:10px; margin-right:3px}
.kbstrip .grp b{color:var(--txt2); font-weight:400}
.kbstrip .spacer{margin-left:auto}

/* command palette dropdown */
.palette{position:absolute; top:44px; left:0; right:0; background:#060f0a; border:1px solid var(--line2);
  border-radius:8px; box-shadow:0 12px 40px rgba(0,0,0,.6); overflow:hidden auto; max-height:340px; z-index:90; display:none}
.palette.show{display:block}
.palette .pi{display:flex; align-items:center; gap:10px; padding:7px 12px; border-bottom:1px solid var(--dim); cursor:pointer}
.palette .pi:hover, .palette .pi.sel{background:rgba(51,255,102,.08)}
.palette .pi .verb{color:var(--a); width:132px; letter-spacing:.06em; flex:0 0 auto}
.palette .pi .desc{color:var(--txt2); font-size:11px}
.palette .pi .key{margin-left:auto; color:var(--mut); font-size:10px}
.palette .ph{padding:5px 12px; color:var(--mut); font-size:11px; letter-spacing:.16em; background:#04140c}

/* toast */
.toasts{position:fixed; right:16px; bottom:52px; display:flex; flex-direction:column; gap:8px; z-index:120}
.toast{background:linear-gradient(180deg,#0b1c14,#08150f); border:1px solid var(--line2); border-left:3px solid var(--g);
  border-radius:8px; padding:9px 13px; font-size:11.5px; color:var(--txt); box-shadow:0 10px 30px rgba(0,0,0,.5);
  max-width:320px; animation:tin .18s ease}
.toast.amb{border-left-color:var(--a)} .toast.bad{border-left-color:var(--bad)}
@keyframes tin{from{opacity:0; transform:translateY(8px)}to{opacity:1;transform:none}}

/* help / keymap overlay */
.overlay{position:fixed; inset:0; background:rgba(2,6,4,.72); backdrop-filter:blur(3px); z-index:130;
  display:none; align-items:center; justify-content:center; padding:20px}
.overlay.show{display:flex}
.helpcard{background:linear-gradient(180deg,#0b1c14,#071009); border:1px solid var(--line2); border-radius:12px;
  max-width:720px; width:100%; max-height:82vh; overflow:auto; padding:20px 22px; box-shadow:0 20px 60px rgba(0,0,0,.6)}
.helpcard h2{color:var(--a); letter-spacing:.14em; font-size:13px; margin:0 0 4px; text-shadow:var(--glow-a)}
.helpcard .sub{margin-bottom:14px}
.helpcard h3{color:var(--g); font-size:11px; letter-spacing:.1em; margin:16px 0 6px; text-transform:uppercase}
.helpcard table{width:100%; border-collapse:collapse; font-size:12px}
.helpcard td{padding:4px 8px; border-bottom:1px solid var(--dim); vertical-align:top}
.helpcard td:first-child{color:var(--a); white-space:nowrap; width:180px}
.helpcard td:last-child{color:var(--txt2)}
.helpcard .x{float:right; cursor:pointer; color:var(--mut); font-size:16px}
.helpcard .x:hover{color:var(--g)}

/* tooltip (chart hover) */
.ttip{position:fixed; z-index:140; pointer-events:none; background:#04120a; border:1px solid var(--line2);
  border-radius:7px; padding:6px 9px; font-size:10.5px; color:var(--txt); display:none; box-shadow:0 8px 24px rgba(0,0,0,.5)}
.ttip.show{display:block}

@media(prefers-reduced-motion:reduce){
  .livedot,.dot.load,.toast{animation:none}
  /* P2: no panel transition + no press/hover transforms under reduced-motion */
  .panel{transition:none}
  .fab:active{transform:none}
}

/* ── floating action button (touch / small screens only) ──────────────────
   Opens the SAME command palette Ctrl-K opens (reuses openCommandPalette in
   terminal.js). Hidden on desktop — the palette stays keyboard-driven there. */
.fab{position:fixed; right:16px; bottom:16px; width:52px; height:52px; border-radius:50%;
  display:none; align-items:center; justify-content:center; z-index:125;
  background:linear-gradient(180deg,#0d2115,#08150f); border:1px solid var(--g);
  color:var(--g); font-size:26px; line-height:1; cursor:pointer; font-family:inherit;
  box-shadow:0 6px 20px rgba(0,0,0,.5), var(--glow-g); -webkit-appearance:none; appearance:none}
.fab:active{transform:scale(.96)}
.fab:focus-visible{outline:2px solid var(--g); outline-offset:2px}

/* ── SMALL SCREENS (<760px): drop the 12-col tiling grid ───────────────────
   Panels stack into ONE scrollable column, the page (not an inner pane)
   scrolls so the footer clears the mobile URL bar, resize handles hide, tool
   controls + chips grow to 44px touch targets, and the FAB appears.
   Desktop (>=760px) is entirely unaffected. */
@media(max-width:760px){
  html,body{height:auto}
  body{min-height:100dvh; overflow:auto}
  .board{grid-template-columns:1fr; grid-auto-rows:auto; overflow:visible}
  .panel{grid-column:1 / -1 !important; grid-row:auto !important; min-height:200px}
  .rz{display:none}
  .cmdhint{display:none}
  .cmd{font-size:16px; min-height:44px}   /* P1: >=16px stops iOS Safari focus auto-zoom · P2: 44px touch target */
  .fab{display:flex}
  .board.empty::after{content:"Tap ＋ to add a panel"}
  .phead .tools span,.phead .tools button{min-height:44px; min-width:44px; padding:10px;
    display:inline-flex; align-items:center; justify-content:center}
  .wschip,.tierchip{min-height:44px; min-width:44px; padding:10px;
    display:inline-flex; align-items:center; justify-content:center}
}

/* ── ULTRAWIDE (>=2560px) ──────────────────────────────────────────────────
   P2: on very wide displays center the board and hold the auto-row height so
   sparse panels don't stretch into floating slivers across a huge empty field. */
@media(min-width:2560px){
  .board{max-width:2400px; margin:0 auto; grid-auto-rows:var(--rowh)}
}