/*
 * home.css: the home page only. orbio's own classes (orbio.css) lay the page out; this file adds the pieces
 * orbio does not have (the typed decision in the playground, the review postcard, the brand grid bands) and
 * a few small-screen fixes. Tokens from pm.css.
 */

/* ------------------------------------------------------------------ hero */

/* Phones: orbio's nav row is absolute over a fixed 7.5rem of padding, which fits two rows. "PonModel" is
   wider than orbio's name, so below ~385px the nav takes three rows and would sit on the heading. The row
   flows in the document instead, so the heading always starts under it (same 157px at 390 as orbio). */
@media (max-width: 39.99rem) {
  .hm-hero > .top-5.z-20 { position: relative; top: auto; margin-top: 1.25rem; }
  .hm-hero-inner { padding-top: 28px; }
  /* once the links wrap under the brand (home.js sets .hm-nav-stack), they drop the divider and share the
     brand's left edge. Sign in or the chip takes the brand's row when it fits (.hm-nav-side), else it follows
     the links on that same left edge */
  .hm-nav-stack > div:first-child { display: contents; }
  .hm-nav-stack nav { order: 2; flex-basis: 100%; margin-left: 0; padding-left: 0; border-left: 0; }
  .hm-nav-stack > div:last-child { order: 3; }
  .hm-nav-stack.hm-nav-side > div:last-child { order: 1; margin-left: auto; }
}

/* Between 640 and 1279px the pillars reach under the copy (as in orbio). Lit orange they fight the text more
   than orbio's pale marble did, so they drop below orbio's own phone opacity there, and the copy starts right
   beside them (1024 included), so their inner half also fades out (the right pillar is mirrored, so one mask
   does both). From 1280px there is room and they stand at full strength like orbio's. */
@media (min-width: 40rem) and (max-width: 79.99rem) {
  .hm-pillars > div {
    opacity: .5;
    -webkit-mask-image: linear-gradient(to right, #000 35%, transparent 85%);
    mask-image: linear-gradient(to right, #000 35%, transparent 85%);
  }
}

/* The lava band moves like orbio's dither ground: the lava drifts slowly under the dark pool. pm-lava's
   layers are split for that: the band keeps the canvas colour, .hm-lava-flow carries the image (and moves),
   .hm-lava-shade carries pm.css's two gradients unchanged, and pm-lava's ::after keeps the halftone dots. */
.hm-hero .pm-lava { background: var(--pm-bg); }
.hm-lava-flow {
  position: absolute;
  inset: 0 -8%;
  background: url(/assets/img/lava.webp) center / cover no-repeat;
  transform: translate3d(0, 0, 0) scale(1.04);
}
.hm-lava-shade {
  position: absolute;
  inset: 0;
  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%);
}
@media (prefers-reduced-motion: no-preference) {
  .hm-lava-flow { animation: hm-lava-drift 48s ease-in-out infinite alternate; will-change: transform; }
}
@keyframes hm-lava-drift {
  0% { transform: translate3d(-4%, 0, 0) scale(1.03); }
  50% { transform: translate3d(1%, -1.5%, 0) scale(1.06); }
  100% { transform: translate3d(4%, 0, 0) scale(1.03); }
}

/* the buy card: review and form swap with [hidden] (orbio's utilities must not show them) */
.hm-buy [hidden] { display: none !important; }

/* the amount field is opaque, so the beam's blurred glow (z-index -1) only lights the ring, as on orbio's
   paper; through the 60% field it smeared orange inside the input */
.hm-buy .beam > div { background-color: var(--pm-bg-2); }

/* disabled buttons (Pay before launch, Buy with no amount): a dark slab with an orange hairline and a
   readable label, instead of orbio's 45% opacity, which turns the orange fill into burnt brown */
.hm-buy button:disabled {
  opacity: 1;
  background: var(--pm-bg-3);
  color: var(--pm-ink-3);
  box-shadow: inset 0 0 0 1px var(--pm-line-strong);
}

/* review postcard: the coin sits where orbio's postcard image sits. Only the lines beside the coin (credits,
   total, discount) keep a width limit; the receipt runs the full width under it. The total's font shrinks
   with its length (--pc-chars, set by home.js) so it never reaches the coin. */
.hm-pc { container-type: inline-size; --pc-side: 64%; --pc-side-w: 64cqw; --pc-max: 44px; }
.hm-pc-side { max-width: var(--pc-side); min-height: min(calc(39cqw - 24px), 128px); }
.hm-pc .hm-postcard-num { font-size: min(var(--pc-max), calc((var(--pc-side-w) - 6px) / var(--pc-chars, 4))); }
.hm-coin { filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .5)) drop-shadow(0 0 22px rgba(250, 109, 1, .18)); }
@media (max-width: 29.99rem) {
  .hm-pc { --pc-side: 74%; --pc-side-w: 74cqw; --pc-max: 36px; }
  .hm-pc-side { min-height: 0; }
  .hm-coin { width: 42%; right: -2.25rem; top: -.5rem; }
}

/* ------------------------------------------------------------------ playground */

/* the key row wraps under the label on narrow cards instead of running off */
.hm-key { flex-wrap: wrap; row-gap: 6px; }
.hm-key .pm-tag { margin-left: auto; }
.hm-key-note { flex-basis: 100%; color: var(--pm-ink-3); font-size: 11px; line-height: 1.45; text-wrap: pretty; }

/* orbio's glass: its frosting is -webkit- only, which Chrome ignores, so over the lava the card was see-through */
.playground-module__8y2MbG__workbench { -webkit-backdrop-filter: blur(20px) saturate(125%); backdrop-filter: blur(20px) saturate(125%); }

/* the head select is as wide as the selected head, so the chevron sits right after the name (home.js measures
   it where field-sizing is missing) */
[data-pg-head] { field-sizing: content; }

/* orbio's dark brown ring (#893e00) is under 3:1 on the dark panel; the neon ring like every other control */
#playground select:focus-visible,
#playground summary:focus-visible,
#playground button:focus-visible { outline: 2px solid var(--pm-orange); outline-offset: 3px; }

.hm-logo { width: 20px; height: 20px; flex-shrink: 0; border-radius: 999px; object-fit: cover; background: var(--pm-bg-3); }
.hm-tk .hm-logo { width: 16px; height: 16px; }

/* the answer panel: JSON on the left, probability bars beside it once there is room */
.hm-answer { container-type: inline-size; font-size: 13px; line-height: 1.6; }
.hm-dec { display: grid; gap: 14px; align-items: start; }
.hm-dec .hm-bars { align-self: center; transition: opacity .35s var(--pm-ease), transform .35s var(--pm-ease); }
/* while the JSON streams the bars wait; they fade in and fill once the decision is complete */
[data-mode="stream"]:not(.is-done) .hm-bars { opacity: 0; transform: translateY(4px); }
@container (min-width: 430px) {
  .hm-dec { grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; }
}
/* the longest JSON line is 29 characters (about 230px); on a narrower panel the outcome bars go two to a row */
@container (max-width: 255.98px) {
  .hm-dec .hm-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hm-json {
  margin: 0;
  min-width: 0;
  font-family: var(--pm-mono);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre;
  color: var(--pm-ink);
  overflow: hidden;
}
.hm-t-c { color: var(--pm-ink-3); }
.hm-t-k { color: var(--pm-ink-2); }
.hm-t-s { color: #f39a52; }
.hm-t-n { color: var(--pm-ember); }
.hm-unit { animation: ft-fadeIn .25s ease-out; }

.hm-bars { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.hm-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; row-gap: 5px; column-gap: 8px; min-width: 0; }
.hm-bar__o { color: var(--pm-ink-2); font-family: var(--pm-mono); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-bar__v { color: var(--pm-ink-3); font-family: var(--pm-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.hm-bar__track { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--pm-bg-3); box-shadow: inset 0 0 0 1px rgba(250, 109, 1, .08); overflow: hidden; }
.hm-bar__fill { display: block; height: 100%; border-radius: inherit; background: rgba(255, 138, 43, .42); transition: width .7s var(--pm-ease); }
.hm-bar.is-top .hm-bar__o { color: var(--pm-ink); }
.hm-bar.is-top .hm-bar__v { color: var(--pm-ember); }
.hm-bar.is-top .hm-bar__fill { background: var(--pm-orange); box-shadow: 0 0 12px rgba(250, 109, 1, .55); }

/* narrow panels: the bars sit in one row under the JSON */
@container (max-width: 429.98px) {
  .hm-bars { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); column-gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-unit { animation: none; }
  .hm-bar__fill { transition: none; }
}

/* ------------------------------------------------------------------ book */

/* the sample tag sits in the book header from 640px; on phones it moves to the column row so the header
   keeps orbio's single line */
.hm-tag-narrow { display: none; }
@media (max-width: 39.99rem) {
  .hm-tag-wide { display: none; }
  .hm-tag-narrow { display: inline-flex; letter-spacing: .02em; }
}

/* ------------------------------------------------------------------ catalogue */

/* column labels drop their second word below 360px so each stays on one line */
@media (max-width: 22.49rem) { .hm-long { display: none; } }

/* the API id is what a developer copies: on the smallest phones it loses half a pixel instead of its tail */
@media (max-width: 21.24rem) { #catalogue .font-mono.text-\[11px\] { font-size: 10.5px; letter-spacing: -.01em; } }

/* on the smallest phones the -20% chip gives its room to the head name (the header already says it) */
@media (max-width: 23.74rem) {
  .hm-chip { display: none; }
  .hm-prices { gap: .5rem; }
}

/* ------------------------------------------------------------------ sample account */

/* the account path and the key chip stack on narrow phones instead of cutting the path */
.hm-acct-head { flex-wrap: wrap; row-gap: 8px; }
/* the ticker's long name gives way to the symbol on the smallest phones */
@media (max-width: 23.99rem) { .hm-tk-name { display: none; } }

/* ------------------------------------------------------------------ brand bands */

/* the blueprint grid behind the catalogue and the migration. It stays off the headings (top left, and the
   whole top band on phones where the heading runs the full width) and shows in the gutters and under the
   cards: (below the heading OR right of the copy) AND the soft edge fade. */
.hm-grid {
  --hm-grid-edge: linear-gradient(to bottom, transparent, #000 12%, #000 86%, transparent);
  --hm-grid-below: linear-gradient(to bottom, transparent 150px, #000 290px);
  -webkit-mask-image: var(--hm-grid-edge), var(--hm-grid-below);
  mask-image: var(--hm-grid-edge), var(--hm-grid-below);
  -webkit-mask-composite: source-in, source-over;
  mask-composite: intersect, add;
  opacity: .9;
}
/* phones: the heading and copy run taller, so the grid starts lower and its + marks stay off the tab row */
@media (max-width: 47.99rem) {
  .hm-grid { --hm-grid-below: linear-gradient(to bottom, transparent 330px, #000 450px); }
}
@media (min-width: 48rem) {
  .hm-grid {
    -webkit-mask-image: var(--hm-grid-edge), linear-gradient(to right, transparent 70%, #000 92%), var(--hm-grid-below);
    mask-image: var(--hm-grid-edge), linear-gradient(to right, transparent 70%, #000 92%), var(--hm-grid-below);
    -webkit-mask-composite: source-in, source-over, source-over;
    mask-composite: intersect, add, add;
  }
}

/* the code panel: a dark ember tint on a solid canvas (orbio's neon/25 wash turned into a brown slab), an
   orange hairline, and the changed "after" lines lit brighter than the panel with an orange bar */
.hm-code { background: var(--pm-tint); border-color: var(--pm-line-strong); }
.hm-code .hm-changed { background: rgba(250, 109, 1, .12); box-shadow: inset 3px 0 0 0 var(--pm-orange); }

/* ------------------------------------------------------------------ anchor bubble */

.hm-anchor-bubble { opacity: 0; transform: translate(-.25rem, -50%); transition: opacity .2s var(--pm-ease), transform .2s var(--pm-ease); }
.hm-anchor-bubble.is-on { opacity: 1; transform: translate(0, -50%); }

/* the buy card heading takes focus after Buy and Change amount (for screen readers), like orbio's
   outline-none h2; pm.css's neon ring stays on every control */
#buy-title:focus-visible { outline: none; }

/* ------------------------------------------------------------------ phones */

/* Tap targets of at least 40px on phones, without moving anything: selects and tabs trade padding for a
   negative margin, small buttons and links get an invisible hit box. */
@media (max-width: 47.99rem) {
  .playground-module__8y2MbG__selectors select { padding-block: 12px; margin-block: -8px; }
  #hm-tabs { margin-top: -10px; }
  #hm-tabs [role="tab"] { padding-top: 10px; }
  .hm-hit::before { content: ""; position: absolute; inset: -6px; }
  .hm-hit-y::before { content: ""; position: absolute; inset: -12px 0; }
  .hm-fee-i::before { content: ""; position: absolute; inset: -13px -21px -13px -5px; }
}
/* the migration tabs scroll sideways on phones: the strip fades out at the right edge (like the announcement
   bar used to) and ends in 28px of room, so the last tab can scroll clear of the fade */
@media (max-width: 29.99rem) {
  #hm-tabs {
    padding-right: 28px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
}

/* ------------------------------------------------------------------ live chain */

/* while chain.js loads, the sample tags wait out of sight (they are removed once the data is live, and come back
   untouched if it is not) */
html[data-hm-chain="pending"] :is(#book, section[aria-labelledby="recent-heading"]) .pm-tag { visibility: hidden; }

/* loading rows: quiet bars in each list's row rhythm, no text */
.hm-skel {
  display: block;
  height: 10px;
  margin-block: 4.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pm-bg-3) 0%, rgba(250, 109, 1, .13) 50%, var(--pm-bg-3) 100%);
  background-size: 200% 100%;
  animation: hm-skel 1.4s ease-in-out infinite;
}
#book-levels .hm-skel + .hm-skel, #recent-buys li > .hm-skel { justify-self: end; }
.hm-skel--sm { height: 8px; margin-top: 7px; }
@keyframes hm-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* empty and error rows sit in the book's mono lists but read as sentences; in the recent buys panel (as tall as
   the book beside it) the sentence sits in the middle */
.hm-empty { font-family: var(--font-dm), var(--font-sans), ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; }
.hm-empty p { text-wrap: balance; }
#recent-buys:has(> .hm-empty:only-child) { display: flex; flex-direction: column; justify-content: center; }

/* live recent buys: each row opens its transaction */
.hm-rb { transition: background-color .16s var(--pm-ease); }
.hm-rb:hover { background: rgba(250, 109, 1, .05); }
.hm-rb:focus-visible { outline: 2px solid var(--pm-orange); outline-offset: -2px; }

/* the live quote under the amount dims while a new one is on its way */
html[data-hm-chain="live"] #buy-help { transition: opacity .2s var(--pm-ease); }
html[data-hm-chain="live"] #buy-help[aria-busy="true"] { opacity: .55; }

/* Pay while the wallet and the chain work: the neon stays, dimmed, instead of the disabled slab */
.hm-buy button[data-buy-pay][aria-busy="true"] {
  background: var(--pm-orange);
  color: var(--pm-on-orange);
  box-shadow: 0 0 24px rgba(250, 109, 1, .35);
  opacity: .8;
  cursor: progress;
}
.hm-buy button[data-buy-pay][aria-busy="true"]::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: hm-spin .8s linear infinite;
}
@keyframes hm-spin { to { transform: rotate(360deg); } }
.hm-buy [data-buy-change]:disabled { opacity: .45; pointer-events: none; background: none; box-shadow: none; }
.hm-buy [data-buy-alert] a { color: inherit; }
html[data-hm-chain="live"] .hm-buy :is(#buy-reason, [data-buy-done] p, [data-buy-alert]) { text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  .hm-skel, .hm-buy button[data-buy-pay][aria-busy="true"]::before { animation: none; }
}