/*
 * protocol-page.css: the /protocol page layer. Layout comes from protocol.css (orbio's protocol modules,
 * rethemed); this file only adds what orbio drew with WebGL / Mermaid / brand images, and the PonModel touches.
 */

/* ------------------------------------------------------------------ CREDIT coin, CSS 3D */

/* stage: orbio's credit-coin stage. data-ready=true hides the poster; the 3D coin takes its place. */
.credit-coin-module__yiiE_a__stage { container-type: inline-size; }
.pm-coin3d {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  perspective: 1600px;
  --coin-depth: 1.5cqi;
}
.pm-coin3d__body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.pm-coin3d__layer,
.pm-coin3d__shadow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.pm-coin3d__layer { transform: translateZ(calc(var(--z) * var(--coin-depth))); }
/* every layer faces the same way: seen from behind (flipped), the back layer shows the coin mirrored, the same
   way the rim layers do, so the silhouettes line up */
.pm-coin3d__front { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pm-coin3d__edge { filter: brightness(.46) saturate(1.25); }
/* orbio's poster shadow (drop-shadow 0 28px 36px), as a separate layer so the 3D body is never flattened */
.pm-coin3d__shadow {
  filter: brightness(0) blur(16px);
  opacity: .6;
  transform-origin: 50% 60%;
}
.credit-coin-module__yiiE_a__hitArea:focus-visible { outline-color: var(--pm-orange, #fa6d01); }
/* the same neon ring as every other page (orbio drew its protocol rings in the page accent); orbio's offset stays */
.protocol-module__gY4VbG__page :is(a, button, input, pre, [tabindex]):focus-visible { outline-color: var(--pm-orange, #fa6d01); }

/* a molten glow behind the hero coin: the banner's lava streaks, pooled under the coin. The layer is an ember
   fill cut out by the texture's own luminance (bright molten veins show, the dark rock is transparent), so it
   only ever adds warm light over the glyph field and never darkens it. */
.protocol-module__gY4VbG__heroArtwork { isolation: isolate; }
.pm-proto-lava {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 52%;
  width: min(118%, 600px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, #ffc48a 0%, #ff8a2b 38%, #fa6d01 70%, #b54a00 100%);
  -webkit-mask-image: url(/assets/img/lava.webp), radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .45) 50%, transparent 100%);
  mask-image: url(/assets/img/lava.webp), radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .45) 50%, transparent 100%);
  -webkit-mask-position: 62% 50%, center;
  mask-position: 62% 50%, center;
  -webkit-mask-size: cover, 100% 100%;
  mask-size: cover, 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: luminance, alpha;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: .5;
  pointer-events: none;
}
@media (max-width: 767px) {
  .pm-proto-lava { width: min(100%, 360px); opacity: .4; }
}

/* the banner's HUD frame around the hero scene: a decoration layer, so orbio's hero grid keeps its layout.
   protocol.js clips the hero glyph field to this box, so the frame is the edge of the scene. It fades with
   the rest of the hero when chapter 1 slides over it (data-disperse="fade"). */
.pm-proto-herohud {
  position: absolute;
  z-index: 0;
  inset: -8px -36px;
  pointer-events: none;
  --hud-x: 26px;
  --hud-cut: 16px;
}
.protocol-module__gY4VbG__heroArtwork { z-index: 1; }
/* tablets: the page gutter is 42 to 56px, so the desktop inset would put the frame 6px from the screen edge */
@media (min-width: 768px) and (max-width: 1023px) {
  .pm-proto-herohud { inset: -8px -16px; }
}
@media (max-width: 767px) {
  .pm-proto-herohud { inset: -16px -16px -12px; --hud-x: 16px; --hud-cut: 12px; }
}

/* orbit labels: "Stake PONMODEL" stays on one line like orbio's shorter label */
.inference-story-module__nqo6mW__orbitLabels small { white-space: nowrap; }

/* ------------------------------------------------------------------ neon touches */

.protocol-module__gY4VbG__brand > svg { filter: drop-shadow(0 0 7px rgba(250, 109, 1, .55)); }
.protocol-module__gY4VbG__eyebrow svg { filter: drop-shadow(0 0 6px rgba(250, 109, 1, .5)); }
.protocol-module__gY4VbG__primaryButton { box-shadow: 0 0 24px rgba(250, 109, 1, .32); }
@media (hover: hover) and (pointer: fine) {
  .protocol-module__gY4VbG__primaryButton:hover { box-shadow: 0 0 30px rgba(250, 109, 1, .5); }
}
.protocol-module__gY4VbG__header nav .protocol-module__gY4VbG__navPaper { border-color: var(--pm-line-strong, rgba(250, 109, 1, .32)); }
/* protocol.css already draws orbio's 2px accent underline; this only adds the neon glow under it */
.protocol-module__gY4VbG__tab[data-active] { box-shadow: 0 10px 22px -18px rgba(250, 109, 1, .9); }

/* the agent code panel wears the HUD frame (.pm-hud from pm.css) */
.protocol-module__gY4VbG__agentTabs.pm-hud { --hud-x: 22px; }

/* ------------------------------------------------------------------ 02: decision head cards */

/* one ember glyph per head on orbio's quiet 64px tile, at the size of orbio's provider marks */
.pm-proto-head { color: var(--color-p-accent); }
.pm-proto-head svg { width: 50px; height: 50px; filter: drop-shadow(0 0 6px rgba(250, 109, 1, .35)); }
@media (max-width: 767px) {
  .pm-proto-head svg { width: 42px; height: 42px; }
}

/* ------------------------------------------------------------------ 03: flow diagram (orbio's Mermaid output, redrawn) */

.pm-flow { font-family: var(--font-geist-sans), Arial, sans-serif; font-size: 18px; overflow: visible; }
.pm-flow text { text-anchor: middle; dominant-baseline: central; }
.pm-flow .flowchart-link { fill: none; }
.pm-flow .pm-flow-node rect { fill: #150f0b; stroke: #4a3222; stroke-width: 1px; }
.pm-flow .pm-flow-node text { fill: #f3e8de; }
.pm-flow .pm-flow-usage rect { fill: #24150b; stroke: #b5591c; }
.pm-flow .pm-flow-usage text { fill: #ffd2ae; }
.pm-flow .pm-flow-label rect { fill: var(--color-p-canvas); opacity: .5; }
.pm-flow .pm-flow-label text { fill: #efe4da; }
.pm-flow .pm-flow-token path { fill: #ffb46b; filter: drop-shadow(0 0 10px rgba(250, 109, 1, .55)); }
.protocol-map-module__nrfN_G__diagram .protocol-map-module__nrfN_G__flowPoint { filter: drop-shadow(0 0 4px rgba(250, 109, 1, .8)); }
/* the sideways scroller under 1024px: a visible thumb, like orbio's grey bar (pm.css darkens scrollbars) */
.protocol-map-module__nrfN_G__canvas { scrollbar-width: thin; scrollbar-color: rgba(199, 182, 167, .38) transparent; }

/* ------------------------------------------------------------------ agent code copy button */

.pm-code-done { display: none; }
[data-code-copy][data-copied] .pm-code-idle { display: none; }
[data-code-copy][data-copied] .pm-code-done { display: block; color: var(--color-p-accent); }

/* ------------------------------------------------------------------ contracts and chain: no addresses yet */

.pm-proto-pending { min-width: 0; }
/* orbio's long addresses always wrap under the description on phones; keep every row the same shape */
@media (max-width: 767px) { .pm-proto-pending { flex-basis: 100%; } }
.pm-proto-pending code {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px 3px;
  border: 1px dashed var(--pm-line-strong, rgba(250, 109, 1, .32));
  border-radius: 999px;
  color: var(--color-p-muted);
  font-family: var(--font-geist-mono), monospace;
  font-size: 11px;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ touch widths */

/* orbio hid its secondary header link on phones; here it is the way back to the product, so it stays */
@media (max-width: 767px) {
  .protocol-module__gY4VbG__header .protocol-module__gY4VbG__navPaper { display: flex; align-items: center; padding: 0 12px; }
}
/* orbio's brand links and copy button are 27 to 38px tall; lift them to a 40px tap target */
@media (max-width: 1023px) {
  .protocol-module__gY4VbG__brand { min-height: 40px; align-items: center; }
  .protocol-module__gY4VbG__header nav .protocol-module__gY4VbG__navPaper { min-height: 40px; }
  .protocol-module__gY4VbG__codeToolbar button { min-height: 40px; min-width: 44px; margin-block: -4px; justify-content: center; }
}

/* ------------------------------------------------------------------ footer */

.pm-proto-legal {
  max-width: 52ch;
  color: #8d7b6c;
  font-size: 11px;
  line-height: 1.6;
}
.pm-proto-legal__line {
  display: block;
  margin-bottom: 6px;
  color: var(--color-p-muted);
  font-family: var(--font-geist-mono), monospace;
  font-size: 11px;
  letter-spacing: .02em;
}

@media (prefers-reduced-motion: reduce) {
  .pm-coin3d__body { will-change: auto; }
}

/* ---------------------------------------------------------------- account chip */
/* signed in, the account chip sits after "Get Jev credits". Below 768px orbio's nav has no gap, so the chip keeps
   its own; below 640px there is no room for both, and the link steps aside (the chip menu leads to the
   dashboard, the footer back to the product), the rule the dashboard header uses for its secondary link */
.protocol-module__gY4VbG__header nav > .pm-proto-chip { flex: none; }
/* the hero copy (z 2, later in the page) would paint over the open menu: lift the header while it is open */
.protocol-module__gY4VbG__header:has([data-wallet-chip][data-open]) { z-index: 5; }
@media (max-width: 767px) {
  .protocol-module__gY4VbG__header nav > .pm-proto-chip { margin-left: 12px; }
}
@media (max-width: 639.98px) {
  .protocol-module__gY4VbG__header nav:has(> .pm-proto-chip:not([hidden])) > .protocol-module__gY4VbG__navPaper { display: none; }
  .protocol-module__gY4VbG__header nav > .pm-proto-chip { margin-left: 0; }
}