/*
 * pm.css: the PonModel brand layer. Load order: fonts.css, orbio.css, (workspace|protocol|analytics).css,
 * pm.css, shell.css, page css. Markup for every component is in docs/SHELL.md; the live reference is /_kit.
 *
 * Tokens come from SPEC section 2. Components are unlayered on purpose where they must beat orbio's Tailwind
 * utilities (which live in @layer utilities), and sit in @layer components where a utility should win.
 */

:root {
  --pm-bg: #0b0908;
  --pm-bg-2: #110d0b;
  --pm-bg-3: #18120f;
  --pm-ink: #f6eee7;
  --pm-ink-2: #c7b6a7;
  --pm-ink-3: #8d7b6c;
  --pm-orange: #fa6d01;
  --pm-orange-2: #ff8a2b;
  --pm-ember: #ffb46b;
  --pm-ask: #ff4d3d;
  --pm-line: rgba(250, 109, 1, .16);
  --pm-line-strong: rgba(250, 109, 1, .32);
  --pm-grid: rgba(250, 109, 1, .07);
  --pm-on-orange: #0b0908;

  /* derived, used by the components below */
  --pm-glow: 0 0 24px rgba(250, 109, 1, .35);
  --pm-glow-soft: 0 0 16px rgba(250, 109, 1, .2);
  --pm-tint: #22150c;            /* orbio bronze-100 tint, inverted */
  --pm-tint-2: #3a2212;          /* orbio bronze-200 tint, inverted */
  --pm-ease: cubic-bezier(.23, 1, .32, 1);
  /* ordinal orange ramp for stacked charts, light to deep (six leading series + a neutral Other), checked with
     the dataviz palette validator on --pm-bg-2 (the /analytics usage chart uses the same steps) */
  --pm-ramp-1: #ffdbb1;
  --pm-ramp-2: #ffb572;
  --pm-ramp-3: #f48d2f;
  --pm-ramp-4: #e56200;
  --pm-ramp-5: #bd4c07;
  --pm-ramp-6: #903f1c;
  --pm-ramp-other: #8a7e74;
  --pm-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */

html { background: var(--pm-bg); color-scheme: dark; scrollbar-color: #3a2415 var(--pm-bg); }
body { background: var(--pm-bg); color: var(--pm-ink); }

::selection { background: rgba(250, 109, 1, .88); color: var(--pm-on-orange); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--pm-bg); }
::-webkit-scrollbar-thumb { background: #2e1d12; border: 3px solid var(--pm-bg); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #5a3216; }
::-webkit-scrollbar-corner { background: var(--pm-bg); }

/* Neon focus ring, the same on every page. It is unlayered, so it also wins over orbio's
   focus-visible:outline-none utilities (orbio's rings still draw beside it). Elements that only take focus
   from script (tabindex="-1" headings the page moves focus to) get no ring. */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--pm-orange);
  outline-offset: 2px;
  border-radius: 4px;
}

/* orbio's film grain multiplies onto the page: on a dark canvas that only dirties the orange. Keep a
   whisper of texture instead. */
.grain:after { mix-blend-mode: overlay; opacity: .16; }

/* the hero highlight in orbio markup (<mark class="marker">) gets the neon glow */
.marker:before { box-shadow: var(--pm-glow); }

/* ------------------------------------------------------------------ grid canvas */

/* A layer element: <div class="pm-grid pointer-events-none absolute inset-0 -z-10" aria-hidden="true"></div>
   48px orange hairline grid, a + crosshair every 4 cells, fading out toward the edges. */
.pm-grid,
.dashboard-grid {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Cpath d='M96.5 89.5v14M89.5 96.5h14' stroke='%23fa6d01' stroke-opacity='.5' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
    linear-gradient(var(--pm-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--pm-grid) 1px, transparent 1px);
  background-size: 192px 192px, 48px 48px, 48px 48px;
  background-position: 0 0;
  -webkit-mask-image: var(--pm-grid-mask, radial-gradient(ellipse 75% 70% at 50% 38%, #000 30%, rgba(0, 0, 0, .45) 62%, transparent 92%));
  mask-image: var(--pm-grid-mask, radial-gradient(ellipse 75% 70% at 50% 38%, #000 30%, rgba(0, 0, 0, .45) 62%, transparent 92%));
}
/* orbio's dashboard grid fades top and bottom, keep its shape */
.dashboard-grid { --pm-grid-mask: linear-gradient(transparent, #000 120px 60%, transparent); }

/* ------------------------------------------------------------------ lava band */

/* Replaces orbio's marble layer (the -z-20 canvas wrapper at the top of home and affiliates):
   <div class="pm-lava -z-20" aria-hidden="true"></div> inside the `relative isolate overflow-hidden` section.
   Molten texture at the edges, a dark pool where the copy sits (same ellipse as orbio's marble mask), orange
   halftone dots over the lava, a fade into the page at the bottom. */
.pm-lava {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 54% at 38% 34%, rgba(11, 9, 8, .97) 26%, rgba(11, 9, 8, .8) 58%, rgba(11, 9, 8, .52) 100%),
    linear-gradient(to bottom, rgba(11, 9, 8, .35) 0%, rgba(11, 9, 8, .15) 30%, rgba(11, 9, 8, .6) 72%, var(--pm-bg) 100%),
    url(/assets/img/lava.webp) center / cover no-repeat,
    var(--pm-bg);
}
.pm-lava::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 138, 43, .9) 0 .75px, transparent 1.25px);
  background-size: 5px 5px;
  opacity: .22;
  -webkit-mask-image: radial-gradient(ellipse 62% 54% at 38% 34%, transparent 34%, #000 78%), linear-gradient(#000 60%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 62% 54% at 38% 34%, transparent 34%, #000 78%), linear-gradient(#000 60%, transparent);
  mask-composite: intersect;
}
/* a banner strip rather than a backdrop: more lava, used in the kit and for decorative bands */
.pm-lava-strong {
  background:
    linear-gradient(90deg, rgba(11, 9, 8, .82) 0%, rgba(11, 9, 8, .35) 45%, rgba(11, 9, 8, .15) 100%),
    url(/assets/img/lava.webp) center / cover no-repeat,
    var(--pm-bg);
}
.pm-lava-strong::after { -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 80%); mask-image: linear-gradient(90deg, transparent 20%, #000 80%); }

/* ------------------------------------------------------------------ HUD frame */

/* The banner frame on any box: 1px orange rule, clipped top-right and bottom-left corners, a //// block
   hanging from the top edge at the top-left with the top rule running bright from it, a + at the bottom
   right. Everything is drawn inside the box (pseudo elements at inset 0, clip-path on the host), so it never
   adds overflow. The host keeps its padding; orbio's rounded corners and border colour are replaced.
   Tunables: --hud-cut (corner cut, 12px), --hud-line (frame colour), --hud-x (left of the //// block). */
@layer components { .pm-hud { position: relative; } }
.pm-hud {
  --hud-cut: 12px;
  --hud-line: rgba(250, 109, 1, .4);
  --hud-accent: var(--pm-orange);
  --hud-x: 18px;
  isolation: isolate;
  border-color: transparent;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - var(--hud-cut)) 0, 100% var(--hud-cut), 100% 100%, var(--hud-cut) 100%, 0 calc(100% - var(--hud-cut)));
}
.pm-hud::before,
.pm-hud::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.pm-hud::before {
  background: var(--hud-line);
  clip-path: polygon(evenodd,
    0 0, calc(100% - var(--hud-cut)) 0, 100% var(--hud-cut), 100% 100%, var(--hud-cut) 100%, 0 calc(100% - var(--hud-cut)), 0 0,
    1px 1px, 1px calc(100% - var(--hud-cut) - .42px), calc(var(--hud-cut) + .42px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px),
    calc(100% - 1px) calc(var(--hud-cut) + .42px), calc(100% - var(--hud-cut) - .42px) 1px, 1px 1px);
}
.pm-hud::after {
  background:
    /* //// : four slanted bars hanging from the top rule */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='7'%3E%3Cg fill='%23fa6d01'%3E%3Cpath d='M3 0h5L5 7H0z'/%3E%3Cpath d='M10.5 0h5l-3 7h-5z'/%3E%3Cpath d='M18 0h5l-3 7h-5z'/%3E%3Cpath d='M25.5 0h5l-3 7h-5z'/%3E%3C/g%3E%3C/svg%3E") left var(--hud-x) top 0 / 31px 7px no-repeat,
    /* the thin rule running from the block, bright then fading into the frame */
    linear-gradient(90deg, var(--hud-accent) 55%, rgba(250, 109, 1, 0)) left calc(var(--hud-x) + 37px) top 0 / min(240px, 45%) 1px no-repeat,
    /* + at the bottom right */
    linear-gradient(var(--hud-accent), var(--hud-accent)) right 12px bottom 8px / 1px 9px no-repeat,
    linear-gradient(var(--hud-accent), var(--hud-accent)) right 8px bottom 12px / 9px 1px no-repeat;
}
/* quieter frame for dense panels (tables, dashboards) */
.pm-hud-quiet { --hud-line: rgba(250, 109, 1, .26); }

/* ------------------------------------------------------------------ blueprint rules */

/* the logo's dashed construction line as a divider: <hr class="pm-dash"> (or any empty div) */
.pm-dash {
  display: block;
  height: 1px;
  border: 0;
  margin: 0;
  background: repeating-linear-gradient(90deg, var(--pm-line-strong) 0 6px, transparent 6px 11px);
}
.pm-dash-v {
  display: block;
  width: 1px;
  align-self: stretch;
  border: 0;
  background: repeating-linear-gradient(180deg, var(--pm-line-strong) 0 6px, transparent 6px 11px);
}
/* turn an existing orbio border into a dashed construction line */
.pm-dash-border { border-style: dashed; border-color: var(--pm-line-strong); }

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

.pm-glow { box-shadow: var(--pm-glow); }
.pm-glow-text { text-shadow: 0 0 18px rgba(250, 109, 1, .45); }

/* the neon block behind a hero word, dark text on solid orange: <mark class="pm-highlight">discount</mark>
   (orbio's <mark class="marker"> gets the same look from orbio.css + the glow above) */
.pm-highlight {
  position: relative;
  z-index: 0;
  color: var(--pm-on-orange);
  background: none;
}
.pm-highlight::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: .12em -.1em -.02em -.08em;
  background: var(--pm-orange);
  border-radius: .06em;
  transform: rotate(-1.6deg);
  transform-origin: 50% 60%;
  box-shadow: var(--pm-glow);
}

/* ------------------------------------------------------------------ tags */

/* the quiet "sample" tag, orbio's "sample account" style: <span class="pm-tag">sample</span> */
@layer components { .pm-tag { display: inline-flex; } }   /* layered: hidden / sm:hidden utilities can hide a tag */
.pm-tag {
  align-items: center;
  gap: 5px;
  color: var(--pm-ink-3);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}
/* boxed variant for busy headers: dashed hairline, mono */
.pm-tag-box {
  padding: 2px 7px 3px;
  border: 1px dashed var(--pm-line-strong);
  border-radius: 999px;
  font-family: var(--pm-mono);
  font-size: 10.5px;
  letter-spacing: .02em;
}

/* SOON: <span class="pm-soon">SOON</span>, next to disabled Copy CA / $PONMODEL controls */
.pm-soon {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 5px;
  border: 1px solid var(--pm-line-strong);
  border-radius: 4px;
  background: rgba(250, 109, 1, .1);
  color: var(--pm-orange-2);
  font-family: var(--pm-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

/* ------------------------------------------------------------------ announcement bar */

/* The bar row (tools/snippets/header-buyers.html): centred while it fits, a sideways scroller when it does
   not (phones), never clipped. Auto margins centre it; they collapse to 0 on overflow, so the start of the
   row stays reachable (justify-content: center would cut both ends). */
.pm-bar-row {
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pm-bar-row::-webkit-scrollbar { display: none; }
.pm-bar-row > :first-child { margin-left: auto; }
.pm-bar-row > :last-child { margin-right: auto; }
/* phones: the middle part steps aside, so "Jev early access | Read the protocol →" fits whole down to 320px
   (the row still scrolls if a font ever renders wider) */
@media (max-width: 29.99rem) {
  .pm-bar-mid { display: none; }
}
/* copy swaps for the bar (orbio's own sm: swap overflows with our copy between 640 and 1279px) */
.pm-from-lg, .pm-from-xl { display: none; }
@media (min-width: 64rem) { .pm-from-lg { display: inline; } .pm-until-lg { display: none; } }
@media (min-width: 80rem) { .pm-from-xl { display: inline; } }

/* ------------------------------------------------------------------ images */

/* the nav mark in place of orbio's orb: <img class="pm-mark size-7" src="/assets/img/mark-64.png"> */
.pm-mark { object-fit: contain; filter: drop-shadow(0 0 6px rgba(250, 109, 1, .35)); }

/* page-edge pillars (orbio's structure, our image): see docs/SHELL.md for the wrapper markup */
.pm-pillar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .55)) drop-shadow(0 0 28px rgba(250, 109, 1, .08));
}

/* ------------------------------------------------------------------ snippet chrome */

/* Touch reach for the snippets' small links and buttons (nav links, Sign in, footer links, points
   leaderboard): on phones an invisible box grows past the control, the layout does not move. It grows
   sideways only a little (--pm-hit-x) so neighbours in a row never share a spot. */
@media (max-width: 39.99rem) {
  .pm-hit { position: relative; }
  .pm-hit::after { content: ""; position: absolute; inset: var(--pm-hit-y, -10px) var(--pm-hit-x, -4px); }
  .pm-hit-btn { --pm-hit-y: -4px; }            /* 32px buttons reach 40px */
  /* footer links reach 40px; 4px of margin keeps rows 12 to 16px apart from sharing a spot */
  .pm-hit-foot { --pm-hit-y: -10px; margin-block: 4px; }
  /* every brand link (mark + name, 24 to 28px tall) reaches 40px */
  a[href="/"]:has(> img.pm-mark) { position: relative; }
  a[href="/"]:has(> img.pm-mark)::after { content: ""; position: absolute; inset: min(0px, calc(50% - 20px)) -4px; }
}

/* header-plain.html: one row at every width, signed in or out. On phones, once the account chip shows, the
   "points leaderboard" link steps aside (the chip menu and the points card lead on), Sign out keeps only its
   icon, and below 360px the wordmark is visually hidden (still read by screen readers). */
.pm-hp-right { flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
@media (max-width: 39.99rem) {
  .pm-hp-signout { padding-inline: 8px; }
  .pm-hp-signout-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pm-hp-right:has(> [data-wallet-chip]:not([hidden])) > .pm-hp-lb { display: none; }
}
@media (max-width: 22.49rem) {
  header:has([data-wallet-chip]:not([hidden])) .pm-hp-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}