/* ---- page-scoped styles for the 6×6×6 cube (uses dive.css tokens) ---- */
.cube-wrap { max-width: 1080px; margin: 34px auto 0; }
#cube-stage {
  position: relative; height: 74vh; min-height: 520px; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(41,151,255,0.07), transparent 55%),
    radial-gradient(100% 80% at 50% 105%, rgba(191,90,242,0.06), transparent 60%),
    #0a0a0f;
  touch-action: none; cursor: grab; user-select: none;
}
#cube-stage:active { cursor: grabbing; }
.cube-cell {
  position: absolute; left: 0; top: 0; width: 20px; height: 20px;
  border: 0; border-radius: 5px; padding: 0; cursor: pointer;
  box-shadow: 0 0 12px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.22);
  will-change: transform, opacity;
}
.cube-cell:hover { filter: brightness(1.45); box-shadow: 0 0 0 2px var(--ink), 0 0 18px rgba(255,255,255,0.35); }
.cube-axis-lbl {
  position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.3;
  background: rgba(5,5,7,0.82); border: 1px solid var(--line);
  border-radius: 7px; padding: 3px 8px; color: var(--muted);
  will-change: transform, opacity;
}
.cube-axis-lbl.axis-x { border-color: rgba(41,151,255,0.55); color: var(--blue); }
.cube-axis-lbl.axis-y { border-color: rgba(48,209,88,0.5); color: var(--green); }
.cube-axis-lbl.axis-z { border-color: rgba(191,90,242,0.55); color: var(--purple); }
.cube-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0 0 14px;
}
.cube-controls button, .cube-pickers button {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 16px; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.cube-controls button:hover, .cube-pickers button:hover { border-color: var(--blue); }
.cube-controls .slice-ctl {
  display: flex; align-items: center; gap: 10px; margin-left: auto;
  font-size: 13px; color: var(--muted);
}
.cube-controls .shape-ctl { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.cube-controls .shape-ctl select {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.cube-controls .shape-ctl select:hover { border-color: var(--blue); }
.cube-controls input[type="range"] { accent-color: var(--purple); width: 170px; }
#cube-slice-label { font-size: 13px; color: var(--purple); min-width: 220px; }
.cube-hint { text-align: center; color: var(--dim); font-size: 13.5px; margin: 12px 0 0; }
html.reduced .cube-hint .motion-only { display: none; }
.cube-legend {
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: center;
  margin: 16px 0 0; font-size: 13px; color: var(--muted);
}
.cube-legend .ax { font-weight: 700; }
.cube-legend .ax.x { color: var(--blue); } .cube-legend .ax.y { color: var(--green); }
.cube-legend .ax.z { color: var(--purple); }
#cube-ylbl-note { text-align: center; color: var(--dim); font-size: 12.5px; margin: 8px 0 0; }
.cube-pickers {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
  margin: 22px 0 0;
}
.cube-pickers label { font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; gap: 5px; }
.cube-pickers select {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 9px; padding: 7px 10px; font-size: 13px; max-width: 280px;
}
/* keep the cube's high cell z-index inside its own box so it can't paint over the panel */
#cube-stage { isolation: isolate; transition: transform .5s cubic-bezier(.2,.75,.2,1); }
/* inspector = a solid LEFT panel; clicks pass through elsewhere so the cube stays live */
#cube-inspector { position: fixed; inset: 0; z-index: 30000; pointer-events: none; }
#cube-inspector .panel {
  pointer-events: auto;
  position: absolute; left: 0; top: 0; bottom: 0; height: 100%;
  width: min(48vw, 640px); max-width: none;
  background: #0b0b12; border: 0; border-right: 1px solid var(--line); border-radius: 0;
  overflow: auto; padding: 32px 34px 68px;
  box-shadow: 44px 0 130px -46px rgba(0,0,0,0.95);
  animation: inspSlide .44s cubic-bezier(.2,.75,.2,1);
}
@keyframes inspSlide { from { transform: translateX(-102%); opacity: .5; } to { transform: none; opacity: 1; } }
/* the whole cube slides right + shrinks while a cell is open, exposing the data on the left */
body.cube-open { overflow: hidden; }
body.cube-open #cube-stage { transform: translateX(24%) scale(.8); }
@media (max-width: 780px) {
  #cube-inspector .panel { width: 100%; }
  body.cube-open #cube-stage { transform: none; }
}
#cube-inspector-close {
  position: sticky; top: 0; float: right; background: #26262e; color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; padding: 6px 14px;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
#cube-inspector h3 { margin: 0 0 14px; font-size: 22px; }
#cube-inspector .cube-of {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--teal); background: rgba(100,210,255,0.1);
  border: 1px solid rgba(100,210,255,0.35); border-radius: 6px;
  padding: 2px 8px; vertical-align: middle; margin-left: 10px;
}
.cube-path { list-style: none; margin: 0 0 16px; padding: 0; }
.cube-path li {
  font-size: 14.5px; line-height: 1.55; padding: 7px 12px; margin: 5px 0;
  border-radius: 10px; border: 1px solid var(--line); color: var(--ink);
}
.cube-path li.care { background: rgba(255,255,255,0.03); }
.cube-path li.kid { background: rgba(41,151,255,0.08); border-color: rgba(41,151,255,0.3); }
.cube-path li.kid.picked { background: rgba(48,209,88,0.1); border-color: rgba(48,209,88,0.45); }
.cube-path .who {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--dim); margin-right: 10px; min-width: 68px;
}
.cube-path li.kid .who { color: var(--blue); }
.cube-path li.picked .who { color: var(--green); }
.cube-path .pk { float: right; font-size: 11px; color: var(--green); font-weight: 700; }
.cube-claim { font-size: 14.5px; color: var(--muted); }
.cube-claim strong { color: var(--ink); }
.cube-jsonl-hd { font-size: 13px; color: var(--dim); margin: 16px 0 8px; }
.cube-jsonl {
  background: #0a0a0f; border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 12px; line-height: 1.6; color: var(--muted);
  overflow-x: auto; white-space: pre;
}
.cube-jsonl mark { background: rgba(48,209,88,0.16); color: var(--green); border-radius: 4px; }
.cube-note { font-size: 12.5px; color: var(--dim); margin: 12px 0 0; }
@media (max-width: 720px) {
  #cube-stage { height: 62vh; min-height: 420px; }
  .cube-controls .slice-ctl { margin-left: 0; }
}