/* ============================================================================
   PINK COIN — extra.css
   Components this build needs that the core stylesheet does not carry:
   the spec sheet, the fee rail, the roadmap, the verify-link cards.
   Everything here is written in style.css's own vocabulary — Outfit + Space
   Mono, white cards on cream, 2px pink-tinted borders, 22px radius.
   ========================================================================== */

/* --------------------------------------------------------- the spec sheet */

.spec {
  margin-top: clamp(38px, 5vw, 64px);
  border-radius: var(--radius);
  border: 2px solid rgba(254, 1, 154, 0.16);
  background: #fff;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.spec__row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 15px clamp(18px, 3vw, 28px);
  border-top: 1px solid rgba(254, 1, 154, 0.12);
}

.spec__row:first-child { border-top: 0; }

.spec__row span {
  flex: 0 0 clamp(120px, 22%, 190px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose);
  opacity: 0.75;
}

.spec__row b { font-size: 16px; letter-spacing: -0.01em; }

@media (max-width: 560px) {
  .spec__row { flex-direction: column; gap: 4px; }
  .spec__row span { flex: none; }
  .spec__row b { font-size: 15px; }
}

/* ------------------------------------------------------------- fee rail */
/* Five stages, one line on a wide screen and a swipe rail on a narrow one.
   The end stage is filled pink so the destination reads at a glance. */

.rail {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: clamp(34px, 4vw, 52px) 0 0;
  padding: 0 0 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.rail li {
  position: relative;
  flex: 1 1 0;
  min-width: 165px;
  scroll-snap-align: start;
  padding: 16px 16px 18px;
  border-radius: 16px;
  border: 2px solid rgba(254, 1, 154, 0.16);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* the chevron between stages — drawn, not a character, so it cannot wrap */
.rail li + li::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid var(--pink);
  border-top: 2px solid var(--pink);
  transform: rotate(45deg);
  opacity: 0.55;
}

.rail i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--pink);
}

.rail b { font-size: 15px; letter-spacing: -0.02em; line-height: 1.2; }
.rail span { font-size: 12.5px; line-height: 1.45; opacity: 0.68; }

.rail__end {
  border-color: var(--pink);
  background: linear-gradient(160deg, #fff, var(--petal));
  box-shadow: 0 14px 34px rgba(254, 1, 154, 0.18);
}

@media (max-width: 700px) {
  /* it scrolls here, so fade the right edge to say so */
  .rail {
    mask-image: linear-gradient(90deg, #000 calc(100% - 38px), transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 38px), transparent);
  }
}

/* -------------------------------------------------------------- roadmap */

.road {
  list-style: none;
  margin: clamp(38px, 5vw, 60px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.road__item {
  display: flex;
  gap: clamp(16px, 2.5vw, 26px);
  padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 30px);
  border-radius: var(--radius);
  border: 2px solid rgba(254, 1, 154, 0.16);
  background: #fff;
  transition: transform 0.4s var(--ease-out), border-color 0.4s, box-shadow 0.4s;
}

.road__item:hover {
  transform: translateY(-5px);
  border-color: var(--pink);
  box-shadow: var(--shadow-lift);
}

.road__n {
  flex: none;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: var(--blush);
  transition: color 0.4s;
}

.road__item:hover .road__n { color: var(--pink); }

.road__body { min-width: 0; flex: 1 1 auto; }

.road__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.road__head h3 { font-size: clamp(20px, 2.6vw, 27px); }

.road__body ul {
  margin: 0;
  padding-left: 19px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.road__body li { font-size: 15px; line-height: 1.55; opacity: 0.75; }
.road__body li::marker { color: var(--pink); }

.tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid currentColor;
  white-space: nowrap;
}

.tag--done { color: #9a7d8f; }
.tag--live { color: #12a05e; }
.tag--prog { color: var(--pink); }
.tag--plan { color: var(--rose); }
.tag--conc { color: #9a7d8f; }

@media (max-width: 620px) {
  .road__item { flex-direction: column; gap: 8px; }
  .road__n { font-size: 26px; }
}

/* ------------------------------------------------------- verify links */

.links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: clamp(38px, 5vw, 56px);
}

@media (max-width: 940px) { .links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .links { grid-template-columns: 1fr; } }

.links > * { min-width: 0; }

.linkcard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 24px;
  border-radius: var(--radius);
  border: 2px solid rgba(254, 1, 154, 0.16);
  background: #fff;
  transition: transform 0.4s var(--ease-out), border-color 0.4s, box-shadow 0.4s;
}

.linkcard:hover {
  transform: translateY(-6px);
  border-color: var(--pink);
  box-shadow: var(--shadow-lift);
}

.linkcard__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pink);
}

.linkcard h3 { font-size: 23px; }
.linkcard p { margin: 0; font-size: 14.5px; line-height: 1.55; opacity: 0.72; flex: 1 1 auto; }

.linkcard__go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose);
  opacity: 0.7;
  transition: opacity 0.3s, gap 0.3s var(--ease-out);
}

.linkcard:hover .linkcard__go { opacity: 1; gap: 12px; }

/* --------------------------------------------- six-up market stat grid */

.stats--6 { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }
.stats--6 b { font-size: clamp(20px, 2.6vw, 30px); }

/* A live figure is an em dash until the fetch lands; keep the tabular width
   so the row does not jump when the numbers arrive. */
[data-live] { font-variant-numeric: tabular-nums; }

.hero__stats b[data-live] { font-size: clamp(17px, 2.4vw, 27px); }

.bcrf-stats b.is-up { color: #12a05e; }
.bcrf-stats b.is-down { color: #e0245e; }

/* ------------------------------------------------------- small screens */

@media (max-width: 520px) {
  .linkcard { padding: 22px 20px; }
  .linkcard h3 { font-size: 21px; }
  .rail li { min-width: 150px; }
}

/* --------------------------------------------------- receipts wallet chip */
/* On the pink band the chip is the width of the section, the way the source
   design has it — the 620px cap is for the hero, where it sits in a column. */

.sec--pink .ca { max-width: none; }

/* This chip carries two buttons, not the hero's one, so on a narrow screen the
   address gets squeezed between them and breaks into a tall ribbon of four
   characters a line. Give the label and the address a full row each and let the
   buttons share the row below. */

@media (max-width: 760px) {
  .sec--pink .ca { justify-content: center; }
  .sec--pink .ca .ca__label,
  .sec--pink .ca .ca__value { flex: 1 0 100%; min-width: 0; text-align: center; }
  .sec--pink .ca .ca__value { word-break: break-all; }
}

/* ------------------------------------------------------- touch targets */
/* The source design puts 23px footer links and 37px chip buttons on a phone.
   These rules only fire on a coarse pointer, so the desktop layout is
   untouched and pixel-identical; on touch they reach the 44px minimum.
   Delete this block if you want byte-for-byte parity with the original. */

@media (hover: none) and (pointer: coarse) {
  .footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
  .ca__btn { min-height: 44px; }
  .brand { min-height: 44px; }
  .nav__link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* width is the condition a headless browser reports honestly, so mirror it */
@media (max-width: 680px) {
  .footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
  .ca__btn { min-height: 44px; }
  .brand { min-height: 44px; }
}

/* ------------------------------------------------------- touch targets */
/* The source design puts 23px footer links and 37px chip buttons on a phone.
   These rules only fire on a coarse pointer, so the desktop layout is
   untouched and pixel-identical; on touch they reach the 44px minimum.
   Delete this block if you want byte-for-byte parity with the original. */

@media (hover: none) and (pointer: coarse) {
  .footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
  .ca__btn { min-height: 44px; }
  .brand { min-height: 44px; }
  .nav__link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* width is the condition a headless browser reports honestly, so mirror it */
@media (max-width: 680px) {
  .footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
  .ca__btn { min-height: 44px; }
  .brand { min-height: 44px; }
}

/* ------------------------------------------------------------- cursor */
/* The ribbon is repositioned every frame the mouse moves, and a drop-shadow
   filter has to re-rasterise the element each time it does — the single most
   expensive thing on a pointer that never stops moving. The white halo stroke
   under the pink one already does the contrast job the shadow was there for,
   on the pink bands and the cream sections alike, so the filter is pure cost.

   `filter` is also the reason the element could not stay on the compositor:
   with it gone, translate3d keeps the ribbon on its own layer and the main
   thread does nothing per frame but write a transform. */

.cursor {
  filter: none;
  backface-visibility: hidden;
  contain: layout style paint;
}

/* the swell and tilt live on the child, so they never delay the position */
.cursor svg { transition: transform 0.22s var(--ease-out); }

/* ------------------------------------------------------- touch targets */
/* The source design puts 23px footer links and 37px chip buttons on a phone.
   These rules only fire on a coarse pointer, so the desktop layout is
   untouched and pixel-identical; on touch they reach the 44px minimum.
   Delete this block if you want byte-for-byte parity with the original. */

@media (hover: none) and (pointer: coarse) {
  .footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
  .ca__btn { min-height: 44px; }
  .brand { min-height: 44px; }
  .nav__link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* width is the condition a headless browser reports honestly, so mirror it */
@media (max-width: 680px) {
  .footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
  .ca__btn { min-height: 44px; }
  .brand { min-height: 44px; }
}

/* ------------------------------------------------------------- cursor */
/* The ribbon is repositioned every frame the mouse moves, and a drop-shadow
   filter has to re-rasterise the element each time it does — the single most
   expensive thing on a pointer that never stops moving. The white halo stroke
   under the pink one already does the contrast job the shadow was there for,
   on the pink bands and the cream sections alike, so the filter is pure cost.

   `filter` is also the reason the element could not stay on the compositor:
   with it gone, translate3d keeps the ribbon on its own layer and the main
   thread does nothing per frame but write a transform. */

.cursor {
  filter: none;
  backface-visibility: hidden;
  contain: layout style paint;
}

/* the swell and tilt live on the child, so they never delay the position */
.cursor svg { transition: transform 0.22s var(--ease-out); }

/* ============================================================== claim ==
   The eligibility panel. Deliberately plain: a form on a white card, with
   the disabled claim button and the reason it is disabled sitting together,
   so "not open yet" can never be misread as "you failed a check".
   ====================================================================== */

.claim {
  margin-top: clamp(34px, 4vw, 48px);
  padding: clamp(24px, 3.5vw, 38px);
  border-radius: var(--radius);
  border: 2px solid rgba(254, 1, 154, 0.18);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.claim__head { margin-bottom: 22px; }

.claim__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 2px solid rgba(254, 1, 154, 0.28);
  background: rgba(254, 1, 154, 0.07);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose);
}

.claim__pill::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #12a05e;
  flex: none;
}

.claim__label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose);
  opacity: 0.8;
  margin-bottom: 10px;
}

.claim__row { display: flex; gap: 10px; align-items: stretch; }

.claim__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 18px;
  border-radius: 999px;
  border: 2px solid rgba(254, 1, 154, 0.22);
  background: var(--cream);
  font-family: var(--mono);
  /* 16px or iOS zooms the whole page when the field takes focus */
  font-size: 16px;
  color: var(--plum);
  transition: border-color 0.25s, background 0.25s;
}

.claim__input::placeholder { color: var(--plum); opacity: 0.4; }
.claim__input:focus { outline: none; border-color: var(--pink); background: #fff; }
.claim__row .btn { flex: none; }

.claim__connect {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 10px 4px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--rose);
  opacity: 0.8;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity 0.25s, color 0.25s;
}

.claim__connect:hover { opacity: 1; color: var(--pink); }
.claim__connect .ico { width: 1em; height: 1em; }

/* ---- result ---- */

.claim__out { margin-top: 24px; }

.claim__rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(254, 1, 154, 0.16);
  border: 1px solid rgba(254, 1, 154, 0.16);
  border-radius: 16px;
  overflow: hidden;
}

.claim__rows > div {
  background: var(--cream);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.claim__rows small {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
}

.claim__rows b {
  font-size: clamp(16px, 2vw, 22px);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.claim__rows b.is-yes { color: #12a05e; }
.claim__rows b.is-no { color: var(--rose); }
.claim__rows b.is-err { color: #c2410c; }

.claim__line {
  margin: 16px 0 0;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  opacity: 0.72;
}

.claim__line.is-err { color: #c2410c; opacity: 1; }

/* ---- the disabled claim ---- */

.claim__cta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 2px solid rgba(254, 1, 154, 0.12);
}

/* their .btn[disabled] kills pointer-events, which also kills the tooltip and
   the cursor — keep the events, just make it inert and obviously off */
.claim__cta .btn[disabled] {
  opacity: 1;
  pointer-events: auto;
  cursor: not-allowed;
  background: var(--blush);
  border-color: var(--blush);
  color: var(--berry);
  box-shadow: none;
}

.claim__cta .btn[disabled]::before { display: none; }
.claim__cta .btn[disabled]:hover { transform: none; border-color: var(--blush); }

.claim__hint {
  flex: 1 1 260px;
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.68;
}

/* ---- the anti-phishing note ---- */

.claim__warn {
  margin-top: clamp(38px, 5vw, 54px);
  padding: 22px 24px;
  border-radius: 18px;
  border: 2px solid rgba(254, 1, 154, 0.3);
  background: rgba(254, 1, 154, 0.05);
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 78ch;
}

.claim__warn b { display: block; margin-bottom: 6px; }
.claim__warn a { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
  .claim__row { flex-direction: column; }
  .claim__row .btn { width: 100%; justify-content: center; }
  .claim__rows { grid-template-columns: 1fr; }
  .claim__cta .btn { width: 100%; justify-content: center; }
}

/* ----------------------------------------------------- scroll progress */
/* Driven by scaleX now rather than width: a transform runs on the compositor,
   where animating width relayouts the bar on every scroll frame. */

.progress__bar {
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: none;
  will-change: transform;
}

/* ============================================================== cursor ==
   The ribbon IS the cursor now, not an element chasing it.

   A DOM element can never keep up: a pointermove has to go through JS, a
   style write, style recalc and a composite before it lands, while the OS
   draws the real cursor immediately. That gap is the lag, and no amount of
   tuning closes it — the element is structurally a frame or more behind.
   Handing the same artwork to the OS as an actual cursor image removes the
   race entirely, and takes a document-level pointermove listener and a
   per-frame style write off the main thread with it.

   The trade: the swell is a discrete swap on hover instead of a 0.22s tween.
   Worth it — and it also makes the "no pointer at all" failure impossible,
   because there is no longer a state where our cursor is hidden and the real
   one is switched off.

   Three declarations per rule on purpose: the plain url() lands everywhere,
   then image-set upgrades it for retina where supported. An unsupported
   value is dropped by the parser, so the previous one stands.
   Sizes are all under the 128px cursor cap browsers enforce; go bigger and
   the image is ignored and you silently get the arrow back.
   ====================================================================== */

@media (hover: hover) and (pointer: fine) {
  html,
  .has-ribbon-cursor {
    cursor: url("../img/cursor-ribbon.png") 11 7, auto;
    cursor: -webkit-image-set(url("../img/cursor-ribbon.png") 1x, url("../img/cursor-ribbon@2x.png") 2x) 11 7, auto;
    cursor: image-set(url("../img/cursor-ribbon.png") 1x, url("../img/cursor-ribbon@2x.png") 2x) 11 7, auto;
  }

  /* anything clickable gets the bigger, straighter ribbon — the UA sheet puts
     `cursor: pointer` on links and buttons, so these have to be named */
  a,
  button,
  summary,
  label,
  [role="button"],
  [data-magnetic],
  .tab,
  .coin-scene,
  .ca,
  .ca__btn {
    cursor: url("../img/cursor-ribbon-hot.png") 18 7, pointer;
    cursor: -webkit-image-set(url("../img/cursor-ribbon-hot.png") 1x, url("../img/cursor-ribbon-hot@2x.png") 2x) 18 7, pointer;
    cursor: image-set(url("../img/cursor-ribbon-hot.png") 1x, url("../img/cursor-ribbon-hot@2x.png") 2x) 18 7, pointer;
  }

  html:active,
  a:active,
  button:active,
  [data-magnetic]:active,
  .coin-scene:active {
    cursor: url("../img/cursor-ribbon-down.png") 10 6, pointer;
    cursor: -webkit-image-set(url("../img/cursor-ribbon-down.png") 1x, url("../img/cursor-ribbon-down@2x.png") 2x) 10 6, pointer;
    cursor: image-set(url("../img/cursor-ribbon-down.png") 1x, url("../img/cursor-ribbon-down@2x.png") 2x) 10 6, pointer;
  }

  /* the chart is someone else's document — let it use its own cursors */
  iframe { cursor: auto; }
}

/* the claim route is the one card in this grid that is us, so it leads */
.linkcard--claim {
  border-color: var(--pink);
  background: linear-gradient(165deg, #fff, var(--petal));
}

.linkcard--claim .linkcard__go { opacity: 1; color: var(--pink); }