/* Nepse Decode — 3D Market Landscape (Wave F, 2026-10-23)
   Consumes the unified tokens (--nd-*) with the brand literals as fallback.
   Transform/opacity transitions only; reduced-motion safe. */

/* ---- view toggle (Map / 3D) ---- */
.sx-viewbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px}
.sx-viewtoggle{display:inline-flex;border:1px solid var(--nd-border,#1E2430);border-radius:999px;overflow:hidden;background:var(--nd-panel,#12141A)}
.sx-viewtoggle button{appearance:none;border:0;background:transparent;color:var(--nd-muted,#B8C0CE);
  font:inherit;font-size:.82rem;font-weight:700;padding:8px 18px;cursor:pointer;min-height:40px}
.sx-viewtoggle button.on{background:var(--nd-lime,#B8E62E);color:var(--nd-on-lime,#0A0C10)}
.sx-viewtoggle button:focus-visible{outline:2px solid var(--nd-lime,#B8E62E);outline-offset:-2px}

/* ---- 3D stage ---- */
#sx3dWrap{margin-top:12px}
#sx3dStage{position:relative;border:1px solid var(--nd-border,#1E2430);border-radius:var(--d2-r-md,16px);
  overflow:hidden;background:var(--nd-bg,#0A0C10)}
#sx3dCanvas{width:100%;height:520px;display:block;cursor:grab;touch-action:none}
#sx3dCanvas:active{cursor:grabbing}
#sx3dCanvas:focus-visible{outline:2px solid var(--nd-lime,#B8E62E);outline-offset:-2px}
@media(max-width:760px){#sx3dCanvas{height:380px}}
.nd3d-labels{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.nd3d-sector-label{position:absolute;left:0;top:0;font-size:.66rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--nd-dim,#8E98A8);text-shadow:0 1px 4px rgba(0,0,0,.8);white-space:nowrap}
[data-theme="light"] .nd3d-sector-label{color:#5c6650;text-shadow:0 1px 3px rgba(255,255,255,.7)}

/* tooltip — same visual language as #sxMapTip */
#sx3dTip{position:fixed;display:none;z-index:130;pointer-events:none;background:var(--nd-panel-2,#161A23);
  border:1px solid var(--nd-border,#1E2430);border-radius:12px;padding:10px 12px;font-size:.8rem;
  box-shadow:0 10px 30px rgba(0,0,0,.45);max-width:264px;color:var(--nd-text,#fff)}
#sx3dTip .t-sym{font-weight:800;font-size:.92rem}
#sx3dTip .t-name{color:var(--nd-muted,#B8C0CE);margin:2px 0 8px}
#sx3dTip .t-row{display:flex;justify-content:space-between;gap:14px;padding:2px 0;font-variant-numeric:tabular-nums}
#sx3dTip .t-row span{color:var(--nd-muted,#B8C0CE)}
#sx3dTip .t-none{color:var(--nd-dim,#8E98A8);margin:2px 0 6px}

/* camera controls — the keyboard/pointer fallback the chart rules require */
.nd3d-controls{position:absolute;right:10px;bottom:10px;display:flex;gap:6px}
.nd3d-controls button{appearance:none;width:44px;height:44px;border-radius:10px;cursor:pointer;
  border:1px solid var(--nd-border,#1E2430);background:rgba(18,20,26,.85);color:var(--nd-text,#fff);
  font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center}
.nd3d-controls button:hover{border-color:var(--nd-lime,#B8E62E);color:var(--nd-lime,#B8E62E)}
.nd3d-controls button:focus-visible{outline:2px solid var(--nd-lime,#B8E62E);outline-offset:2px}
.nd3d-dead .nd3d-controls,.nd3d-dead .nd3d-labels{display:none}
.nd3d-note{position:absolute;left:10px;bottom:10px;max-width:min(430px,70%);margin:0;
  background:rgba(18,20,26,.88);border:1px solid var(--nd-border,#1E2430);border-radius:10px;
  padding:8px 10px;font-size:.76rem;color:var(--nd-muted,#B8C0CE)}
.nd3d-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:10px;font-size:.78rem;color:var(--nd-muted,#B8C0CE)}
.nd3d-legend .sw{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.nd3d-hint{margin-top:6px;font-size:.76rem;color:var(--nd-dim,#8E98A8)}

/* text data list — the accessible primary record of the same values */
#sx3dListBox{margin-top:12px;border:1px solid var(--nd-border,#1E2430);border-radius:12px;padding:10px 14px;background:var(--nd-panel,#12141A)}
#sx3dListBox summary{cursor:pointer;font-weight:700;font-size:.86rem;color:var(--nd-text,#fff);padding:4px 0}
#sx3dList{margin:8px 0 4px;padding-left:18px;columns:2;column-gap:34px;font-size:.8rem;color:var(--nd-muted,#B8C0CE)}
#sx3dList li{break-inside:avoid;padding:2px 0;font-variant-numeric:tabular-nums}
#sx3dList a{color:var(--nd-text,#fff);font-weight:700;text-decoration:none}
#sx3dList a:hover{color:var(--nd-lime,#B8E62E)}
@media(max-width:760px){#sx3dList{columns:1}}