/** @owner SHARED */
/* Sphere Shell CSS — Shared styles for all sphere workspace pages.
   Extracted from inline <style> in spheretop.html, relay.html, relaymath.html.
   Each page loads this file and adds only its page-specific layout overrides inline. */

/* ── Reset ── */
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#020108;font-family:'Segoe UI',system-ui,sans-serif;color:#c0d0e0}

/* ── Top Bar ── */
#topbar{display:flex;align-items:center;gap:6px;padding:0 8px;
  background:rgba(8,14,26,0.95);border-bottom:1px solid rgba(40,60,90,0.3);z-index:20}
#topbar .tb-brand{font:700 10px/1 monospace;color:#7090b0;white-space:nowrap}
#topbar .tb-brand b{color:#a0c0e0}
.tb-sep{width:1px;height:16px;background:rgba(40,60,90,0.4);flex-shrink:0}
.vtab{padding:3px 8px;border-radius:3px;border:none;background:transparent;
  color:#506878;cursor:pointer;font:700 8px/1 monospace;text-transform:uppercase;
  letter-spacing:0.5px;transition:0.12s}
.vtab:hover{color:#a0b0c0;background:rgba(168,85,247,0.08)}
.vtab.active{color:#c084fc;background:rgba(168,85,247,0.18)}
#breadcrumb{font:600 9px/1 monospace;color:#94a3b8;margin-left:4px}
#breadcrumb .crumb{color:#22d3ee;cursor:pointer}
#breadcrumb .crumb.current{color:#e2e8f0;cursor:default}
#breadcrumb .sep{color:#506878;margin:0 3px}
.tb-spacer{flex:1}
.tb-btn{height:20px;padding:0 7px;border-radius:3px;border:1px solid rgba(50,70,100,0.35);
  background:rgba(15,25,40,0.7);color:#7a8a9a;cursor:pointer;font:600 7px/1 monospace;
  white-space:nowrap;transition:0.12s}
.tb-btn:hover{background:rgba(30,45,65,0.9);border-color:rgba(168,85,247,0.35);color:#c0d0e0}
.tb-btn.active{background:rgba(100,60,180,0.25);border-color:rgba(168,85,247,0.5);color:#c084fc}
#orb-dock{display:flex;gap:4px;align-items:center}
.orb-wrap{display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;padding:2px;border-radius:4px;transition:background 0.12s}
.orb-wrap:hover{background:rgba(168,85,247,0.10)}
.orb-wrap.active{background:rgba(168,85,247,0.18)}
.orb-canvas{width:22px;height:22px;border-radius:50%;pointer-events:none}
.orb-label{font:600 6px/1 monospace;color:#506878;text-align:center;white-space:nowrap}
.orb-wrap.active .orb-label{color:#c084fc}

/* ── Sphere Control Styles (used inside dice panel bodies) ── */
#st-rows{padding:2px 0}
.st-row{display:flex;align-items:center;gap:5px;padding:2px 0;cursor:pointer;border-radius:3px;transition:0.1s}
.st-row:hover{background:rgba(168,85,247,0.08)}
.st-row.focused{background:rgba(168,85,247,0.15)}
.st-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.st-name{flex:1;min-width:0;font:600 8px/1 monospace;color:#a0b0c0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-count{font:500 7px/1 monospace;color:#506878;flex-shrink:0}
.st-alpha{width:60px;height:12px;accent-color:#c084fc;cursor:pointer;flex-shrink:0}
.np-select{width:100%;height:22px;padding:0 4px;border-radius:3px;border:1px solid rgba(50,70,100,0.3);
  background:rgba(15,25,40,0.7);color:#94a3b8;font:500 8px/1 monospace;cursor:pointer;margin:2px 0}
.np-slider{display:flex;align-items:center;gap:5px;padding:2px 0}
.np-slider label{font:500 8px/1 monospace;color:#607080;width:56px;flex-shrink:0}
.np-slider input[type="range"]{flex:1;height:4px;accent-color:#c084fc;cursor:pointer;min-width:50px}
.np-slider .np-val{font:600 8px/1 monospace;color:#c084fc;min-width:32px;text-align:right}
.np-btn{width:100%;height:20px;margin:1px 0;border-radius:3px;border:1px solid rgba(50,70,100,0.3);
  background:rgba(15,25,40,0.7);color:#7a8a9a;cursor:pointer;font:600 7px/1 monospace;transition:0.12s}
.np-btn:hover{background:rgba(30,45,65,0.9);color:#c0d0e0}
.np-btn.active{background:rgba(100,60,180,0.25);color:#c084fc}
.np-row{display:flex;gap:3px}
.np-row .np-btn{flex:1}

/* ── Sphere Canvas + HUD ── */
#sphere-canvas{display:block;width:100%;height:100%;touch-action:none;
  transition:opacity 0.4s cubic-bezier(.25,.46,.45,.94),transform 0.4s cubic-bezier(.25,.46,.45,.94)}
#sphere-canvas.dimmed{opacity:0;transform:scale(0.92);pointer-events:none}
#hud{position:absolute;bottom:6px;left:8px;font:600 9px/1.4 monospace;color:#506878;pointer-events:none;text-shadow:0 0 4px #000}
#hud b{color:#7090b0}
#cursor-tooltip{position:fixed;z-index:30;pointer-events:none;display:none;
  background:rgba(8,14,26,0.92);border:1px solid rgba(80,100,140,0.3);border-radius:4px;
  padding:3px 7px;font:600 9px/1.3 monospace;color:#c0d0e0;white-space:nowrap;
  backdrop-filter:blur(6px);box-shadow:0 2px 8px rgba(0,0,0,0.4)}
#transition-layer{position:absolute;top:0;left:0;right:0;bottom:0;z-index:5;pointer-events:none}

/* ── Timeline Panel ── */
#timeline{display:flex;flex-direction:column;padding:4px 8px;
  background:rgba(8,14,26,0.95);border-top:1px solid rgba(60,90,140,0.2);
  font:500 9px/1.4 monospace;color:#8aa0b8;overflow:hidden}
#tl-transport{display:flex;align-items:center;gap:4px;padding-bottom:3px;border-bottom:1px solid rgba(40,60,90,0.2)}
.tl-btn{width:20px;height:20px;border-radius:3px;border:1px solid rgba(50,70,100,0.4);
  background:rgba(15,25,40,0.8);color:#8aa0b8;cursor:pointer;font:9px/1 system-ui;
  display:flex;align-items:center;justify-content:center}
.tl-btn:hover{background:rgba(30,45,65,0.9);color:#c0d0e0}
#tl-time{font:600 9px/1 monospace;color:#c084fc;min-width:36px}
#tl-scrubber{flex:1;height:3px;accent-color:#c084fc;cursor:pointer}
#tl-channels{flex:1;overflow-y:auto;padding-top:3px}
.tl-ch{display:flex;align-items:center;gap:4px;padding:1px 0}
.tl-ch-name{width:70px;color:#506878;font:500 7px/1 monospace;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-ch-track{flex:1;height:12px;background:rgba(20,30,50,0.5);border-radius:2px;position:relative;cursor:pointer}
.tl-kf{position:absolute;width:7px;height:7px;top:2.5px;background:#c084fc;transform:rotate(45deg);border-radius:1px;cursor:pointer}

/* ── 2D Grid View Overlay ── */
#grid-panel{position:absolute;top:0;left:0;right:0;bottom:0;z-index:10;
  background:rgba(6,10,20,0.97);overflow-y:auto;
  opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity 0.4s ease,transform 0.4s ease}
#grid-panel.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.gv-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid rgba(40,60,90,0.3)}
.gv-tabs{display:flex;gap:2px}
.gv-tab{padding:3px 8px;border-radius:3px;border:1px solid rgba(50,70,100,0.3);
  background:rgba(15,25,40,0.7);color:#607080;cursor:pointer;font:600 8px/1 monospace;transition:0.12s}
.gv-tab:hover{color:#a0b0c0}
.gv-tab.active{background:rgba(100,60,180,0.2);border-color:rgba(168,85,247,0.4);color:#c084fc}
.gv-sort{height:22px;padding:0 5px;border-radius:3px;border:1px solid rgba(50,70,100,0.3);
  background:rgba(15,25,40,0.7);color:#94a3b8;font:500 8px/1 monospace;cursor:pointer}
.gv-table{overflow-y:auto;max-height:calc(100% - 40px);padding:0 12px}
.gv-row{display:grid;grid-template-columns:40px 1fr 100px 60px 100px;gap:3px;
  align-items:center;padding:4px 6px;border-bottom:1px solid rgba(40,60,90,0.1);
  font:500 9px/1.3 monospace;color:#94a3b8;cursor:pointer;transition:background 0.1s}
.gv-row:hover{background:rgba(168,85,247,0.06)}
.gv-row.gv-highlight{background:rgba(168,85,247,0.14)}
.gv-row-header{color:#506878;font-weight:700;cursor:default;border-bottom:1px solid rgba(40,60,90,0.3)}
.gv-row-header:hover{background:transparent}
.gv-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gv-idx{color:#405060;text-align:right}
.gv-name{color:#c0d0e0}
.gv-mass{color:#c084fc;text-align:right}
.gv-bar{height:8px;background:rgba(20,30,50,0.5);border-radius:2px;overflow:hidden}
.gv-bar-fill{height:100%;border-radius:2px;transition:width 0.2s}

/* ── 1D Narrative Overlay ── */
#narrative-panel{position:absolute;top:0;left:0;right:0;bottom:0;z-index:10;
  background:rgba(6,10,20,0.97);overflow-y:auto;padding:16px 24px;
  opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity 0.4s ease,transform 0.4s ease}
#narrative-panel.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.nv-wrap{max-width:600px;margin:0 auto}
.nv-title{font:700 14px/1.4 'Segoe UI',system-ui,sans-serif;color:#e2e8f0;margin-bottom:10px}
.nv-summary{font:400 11px/1.5 'Segoe UI',system-ui,sans-serif;color:#8aa0b8;margin-bottom:16px}
.nv-section{margin-bottom:12px}
.nv-branch-title{font:700 11px/1.3 monospace;color:#c0d0e0;padding-left:8px;border-left:3px solid #f59e0b;margin-bottom:3px}
.nv-meta{font-weight:400;color:#506878;font-size:9px;margin-left:4px}
.nv-desc{font:400 10px/1.4 'Segoe UI',system-ui,sans-serif;color:#7a8a9a;margin:3px 0 5px 11px}
.nv-bar{height:5px;background:rgba(20,30,50,0.5);border-radius:2px;overflow:hidden;margin-left:11px}
.nv-bar-fill{height:100%;border-radius:2px;transition:width 0.3s}

/* ── Intro Cinematic (shared by spheretop + relay) ── */
#intro-subtitle{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);z-index:70;
  max-width:620px;width:90vw;text-align:center;pointer-events:none;
  font:300 17px/1.7 'Segoe UI',system-ui,sans-serif;color:#e2e8f0;
  text-shadow:0 0 24px rgba(0,0,0,0.9),0 2px 12px rgba(0,0,0,0.6),0 0 60px rgba(124,58,237,0.15);
  letter-spacing:0.6px;opacity:0;transition:opacity 1.0s cubic-bezier(.25,.46,.45,.94)}
#intro-subtitle:empty{opacity:0}
#intro-skip{position:fixed;bottom:16px;right:20px;z-index:72;
  font:500 10px/1 monospace;color:#405060;cursor:pointer;
  padding:4px 10px;border:1px solid #1a2a3a;border-radius:3px;
  background:rgba(6,10,20,0.6);transition:color 0.2s,border-color 0.2s;display:none}
#intro-skip:hover{color:#94a3b8;border-color:#3a4a5a}

/* ── Relaydex AI Panel ── */
.rdx-panel{position:fixed;top:0;right:-380px;width:380px;height:100%;z-index:60;
  display:flex;flex-direction:column;background:rgba(6,10,20,0.96);
  border-left:1px solid rgba(100,60,200,0.25);backdrop-filter:blur(16px);
  transition:right 0.3s cubic-bezier(.25,.46,.45,.94);
  font-family:'Segoe UI',system-ui,sans-serif;box-shadow:-4px 0 24px rgba(0,0,0,0.4)}
.rdx-panel.rdx-visible{right:0}
.rdx-header{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid rgba(60,80,120,0.25);flex-shrink:0}
.rdx-brand{display:flex;align-items:center;gap:6px}
.rdx-brand-icon{font-size:16px}
.rdx-brand-text{font:700 12px/1 monospace;color:#c084fc;letter-spacing:1px}
.rdx-scope{flex:1;display:flex;align-items:center;gap:5px;min-width:0}
.rdx-scope-label{font:500 9px/1 monospace;color:#607080;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rdx-scope-active .rdx-scope-label{color:#22d3ee}
.rdx-scope-dot{width:6px;height:6px;border-radius:50%;background:#22d3ee;flex-shrink:0;display:none}
.rdx-scope-active .rdx-scope-dot{display:block}
.rdx-close{width:24px;height:24px;border:none;background:none;color:#506878;cursor:pointer;font-size:18px;line-height:1;border-radius:3px;flex-shrink:0;transition:0.12s}
.rdx-close:hover{color:#c0d0e0;background:rgba(255,255,255,0.06)}
.rdx-actions{display:flex;gap:4px;padding:6px 10px;flex-wrap:wrap;border-bottom:1px solid rgba(40,60,90,0.2);flex-shrink:0}
.rdx-actions:empty{display:none;padding:0;border:none}
.rdx-action-btn{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:4px;border:1px solid rgba(100,60,200,0.25);background:rgba(100,60,200,0.08);color:#b0a0d0;cursor:pointer;font:600 8px/1 monospace;white-space:nowrap;transition:0.12s}
.rdx-action-btn:hover{background:rgba(100,60,200,0.18);border-color:rgba(100,60,200,0.4);color:#d0c0f0}
.rdx-messages{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;scrollbar-color:rgba(100,60,200,0.3) transparent}
.rdx-msg-bubble{max-width:92%;padding:8px 12px;border-radius:10px;font:400 11px/1.5 'Segoe UI',system-ui,sans-serif;word-wrap:break-word}
.rdx-msg-user-bubble{background:rgba(100,60,200,0.18);color:#d0c8e8;align-self:flex-end;border-bottom-right-radius:3px}
.rdx-msg-ai-bubble{background:rgba(20,35,55,0.7);color:#c0d0e0;align-self:flex-start;border-bottom-left-radius:3px;border:1px solid rgba(40,60,90,0.2)}
.rdx-msg-meta{font:400 8px/1 monospace;color:#405060;margin-top:4px;text-align:right}
.rdx-input-wrap{display:flex;gap:6px;padding:8px 10px;border-top:1px solid rgba(60,80,120,0.25);flex-shrink:0;align-items:flex-end}
.rdx-input{flex:1;resize:none;border:1px solid rgba(50,70,100,0.4);border-radius:6px;background:rgba(15,25,40,0.8);color:#c0d0e0;padding:8px 10px;font:400 11px/1.4 'Segoe UI',system-ui,sans-serif;max-height:120px;min-height:34px;outline:none}
.rdx-input:focus{border-color:rgba(100,60,200,0.5)}
.rdx-send{width:34px;height:34px;border-radius:6px;border:1px solid rgba(100,60,200,0.35);background:rgba(100,60,200,0.15);color:#c084fc;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rdx-send:hover{background:rgba(100,60,200,0.3)}

/* ── AI Mode Controls ── */
.rdx-controls{display:flex;align-items:center;gap:8px;padding:6px 14px;border-bottom:1px solid rgba(40,60,90,0.2);flex-shrink:0}
.rdx-mode-select{background:rgba(15,25,40,0.8);color:#a0b0c0;border:1px solid rgba(50,70,100,0.4);border-radius:4px;padding:3px 6px;font:500 10px/1.3 monospace;cursor:pointer;outline:none;flex-shrink:0}
.rdx-mode-select:focus{border-color:rgba(100,60,200,0.5)}
.rdx-mode-select option{background:#0a1520;color:#c0d0e0}
.rdx-mode-indicator{font:600 9px/1 monospace;letter-spacing:0.5px;margin-left:auto}
.rdx-mem-chip{font:600 9px/1 monospace;letter-spacing:0.3px;padding:3px 6px;border-radius:3px;background:rgba(40,60,90,0.3);color:#a0b0c0;border:1px solid rgba(50,70,100,0.4);cursor:help;white-space:nowrap}
.rdx-mem-chip[data-state="fresh"]{color:#34d399;border-color:rgba(52,211,153,0.3);background:rgba(52,211,153,0.08)}
.rdx-mem-chip[data-state="stale"]{color:#f59e0b;border-color:rgba(245,158,11,0.3);background:rgba(245,158,11,0.08)}

/* ── Tier Badges ── */
.rdx-tier-badge{display:inline-block;padding:2px 8px;border-radius:3px;font:600 9px/1.4 monospace;letter-spacing:0.3px;margin-bottom:4px}
.rdx-tier-native{background:rgba(52,211,153,0.15);color:#34d399;border:1px solid rgba(52,211,153,0.3)}
.rdx-tier-external{background:rgba(96,165,250,0.12);color:#60a5fa;border:1px solid rgba(96,165,250,0.25)}

/* ── Responsive ── */
@media(max-width:680px){
  .dp-window{max-width:100vw !important}
}