/* Cube nav — six-face cube navigation.
   Permission model, enforced by the server AND by client-side hiding of faces:
     - consumer: shows exactly 1 face (their own account/services)
     - admin:    shows exactly 1 face (their app's admin surface)
     - emperor:  shows all 6 faces + a "drill" affordance per face
*/
.nb-cube-scene {
  position: relative;
  width: min(420px, 90vw);
  aspect-ratio: 1 / 1;
  margin: 3rem auto;
  perspective: 1600px;
  color: var(--nb-fg);
}
.nb-cube {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateY(28deg);
  transition: transform var(--nb-motion-duration-slow) var(--nb-motion-ease-protocol);
}
.nb-cube[data-face-active="1"] { transform: rotateY(0deg)   rotateX(-6deg); }
.nb-cube[data-face-active="2"] { transform: rotateY(-90deg) rotateX(-6deg); }
.nb-cube[data-face-active="3"] { transform: rotateY(180deg) rotateX(-6deg); }
.nb-cube[data-face-active="4"] { transform: rotateY(90deg)  rotateX(-6deg); }
.nb-cube[data-face-active="5"] { transform: rotateX(-90deg); }
.nb-cube[data-face-active="6"] { transform: rotateX(90deg); }

.nb-cube-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--nb-border);
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  box-shadow: inset 0 0 22px rgba(255,255,255,0.05), var(--nb-glow);
  border-radius: 14px;
  padding: 1.4rem;
  backdrop-filter: blur(6px);
}
.nb-cube-face[data-face="1"] { transform: rotateY(0deg)   translateZ(210px); }
.nb-cube-face[data-face="2"] { transform: rotateY(90deg)  translateZ(210px); }
.nb-cube-face[data-face="3"] { transform: rotateY(180deg) translateZ(210px); }
.nb-cube-face[data-face="4"] { transform: rotateY(-90deg) translateZ(210px); }
.nb-cube-face[data-face="5"] { transform: rotateX(90deg)  translateZ(210px); }
.nb-cube-face[data-face="6"] { transform: rotateX(-90deg) translateZ(210px); }

.nb-cube-face h3 { font-family: "Orbitron", "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: 0.06em; margin-bottom: 0.6rem; text-shadow: var(--nb-glow); }
.nb-cube-face p  { text-align: center; line-height: 1.45; color: var(--nb-fg); opacity: 0.9; }

.nb-cube-controls {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  justify-content: center; margin-top: 1.2rem;
}
.nb-cube-controls button {
  background: transparent; color: var(--nb-fg);
  border: 1px solid var(--nb-border);
  padding: 0.55rem 0.85rem; border-radius: 999px;
  font: inherit; cursor: pointer;
  transition: box-shadow var(--nb-motion-duration-fast) ease, transform var(--nb-motion-duration-fast) ease;
}
.nb-cube-controls button:hover,
.nb-cube-controls button:focus-visible { box-shadow: var(--nb-glow); transform: translateY(-1px); outline: none; }

/* Permission-hidden faces: displayed as visually absent AND aria-hidden.
   Server-side, the templates omit them entirely for non-Emperor roles. */
.nb-cube[data-role="consumer"] .nb-cube-face:not([data-face="1"]) { display: none; }
.nb-cube[data-role="admin"]    .nb-cube-face:not([data-face="1"]) { display: none; }
.nb-cube[data-role="emperor"]  .nb-cube-face { display: flex; }

@media (prefers-reduced-motion: reduce) {
  .nb-cube { transition: none; transform: rotateX(0deg) rotateY(0deg); }
  .nb-cube-face { transform: none; position: relative; inset: auto; margin-bottom: 1rem; }
  .nb-cube-scene { aspect-ratio: auto; height: auto; perspective: none; }
}