/* Right-click console menu (PPHost.ctxmenu / js/host/context-menu.js).
   Token-driven so it renders correctly on the dark host console AND the light
   auth/checkout app pages. Loaded by layout-app only (never on marketing). */

.ppctx-root {
  position: fixed;
  inset: 0;
  z-index: 2147483000;      /* above sheets, toasts, everything */
  pointer-events: none;     /* clicks fall through to the doc, which closes us */
}
.ppctx-root[hidden] { display: none; }

.ppctx-panel {
  position: fixed;
  pointer-events: auto;
  min-width: 210px;
  max-width: 300px;
  max-height: calc(100vh - 12px);   /* tall menus scroll internally instead of overflowing */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  /* Not a card (2026-09-07): words on the room. The ground is an edgeless darkening. */
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  isolation: isolate;
  font-family: var(--font-ui);
  color: var(--text);
}

.ppctx-panel::before { content: ""; position: absolute; inset: -20px -30px; z-index: -1; border-radius: 60px; background: var(--void, #0C0C0E); opacity: .92; filter: blur(24px); pointer-events: none; }
.ppctx-panel:focus { outline: none; }   /* the panel is focusable (keyboard entry) but shows no ring */

.ppctx-main {
  opacity: 0;
  transform: scale(.97);
  transform-origin: top left;
  transition: opacity .11s ease, transform .11s ease;
}
.ppctx-in .ppctx-main { opacity: 1; transform: none; }
.ppctx-sub { opacity: 0; animation: ppctxFade .11s ease forwards; }
@keyframes ppctxFade { to { opacity: 1; } }

.ppctx-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* override the host theme's centered <button> base */
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 7px 10px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--text-dim, var(--muted));
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .6));
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: color .12s ease;
}
/* Hover is brightness, not a fill: a bare leaf on the room. */
.ppctx-item:hover:not([disabled]),
.ppctx-item:focus-visible:not([disabled]) { background: transparent; color: var(--text); outline: none; }
.ppctx-item:focus-visible:not([disabled]) { text-decoration: underline; text-underline-offset: 3px; }
.ppctx-item:focus { outline: none; }
.ppctx-item[disabled] { opacity: .4; cursor: default; }
.ppctx-item--danger { color: var(--err); }
.ppctx-item--danger:hover:not([disabled]) { background: transparent; color: var(--err); }

.ppctx-ic {
  flex: 0 0 auto;
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.ppctx-item:hover:not([disabled]) .ppctx-ic { color: var(--text); }
.ppctx-item--danger .ppctx-ic,
.ppctx-item--danger:hover .ppctx-ic { color: var(--err); }

.ppctx-label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppctx-hint {
  flex: 0 0 auto;
  margin-left: 10px;
  color: var(--muted);
  font-family: var(--font-mono-ui);
  font-size: 11px;
}
.ppctx-arrow { flex: 0 0 auto; margin-left: 6px; color: var(--muted); display: inline-flex; }
.ppctx-arrow .ic { width: 13px; height: 13px; }

.ppctx-sep { height: 10px; margin: 0; background: none; }
.ppctx-head {
  padding: 7px 10px 4px;
  color: var(--muted);
  font-family: var(--font-mono-ui);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
  .ppctx-main, .ppctx-sub { transition: none; animation: none; opacity: 1; transform: none; }
}