/* ============================================================
   Support page — full-bleed blue, scrollable, section per topic.

   Loads AFTER styles.css and inherits its tokens, .card, .btn
   and .legal. All new class names, so nothing collides with
   the onboarding page.
   ============================================================ */

/* the onboarding page pins the viewport; this one scrolls */
html,
body.app-page {
  height: auto;
  min-height: 100%;
  background: #0216ad;
}

body.app-page {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: none;
}

/* While the splash is up the page underneath must not scroll. splash.js
   adds the class and removes it before revealing or handing off.
   
   This deliberately does NOT match on :has(.splash) any more: the splash
   node is inserted at body's first child and only removed at the end of
   its exit, so a :has() rule kept the lock on for the whole animation —
   and if the exit never completed, the page stayed unscrollable. The
   class is authoritative. */
body.app-page.splash-lock {
  overflow-y: hidden;
}

/* ── Page shell ───────────────────────────────────────────────
   A single linear gradient stretched over the whole document
   goes almost black by the footer, because the stops distribute
   across thousands of pixels. So the page carries a gentle
   blue ramp, and the bright bloom is a FIXED layer that stays
   pinned to the top of the viewport as you scroll. */

.page {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0f31e8 0%, #0a2ae0 30%, #0722cc 70%, #05149e 100%);
  background-color: #0722cc;
}

/* pinned bloom — stays at the top of the screen while scrolling */
.page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(130% 46% at 50% 0%, #4a68ff 0%, transparent 62%);
}

/* every direct block sits above the bloom */
.topbar,
.content,
.page__foot {
  position: relative;
  z-index: 1;
}

/* ── Incoming veil ────────────────────────────────────────────
   Retired: the support page now runs the same splash lockup as the
   landing page, so there is no seam to cover on the way in. */

/* ── Top bar ─────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) clamp(16px, 4.6vw, 24px) 12px;
  background: rgba(6, 30, 200, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  text-decoration: none;
}

.brand__mark {
  display: block;
  width: 17px;
  aspect-ratio: 66 / 100;
  flex: 0 0 auto;
}

.brand__mark svg { display: block; width: 100%; height: 100%; }

.brand__word {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.014em;
}

/* ── Content column ─────────────────────────────────────── */

.content {
  flex: 1 1 auto;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 26px 0 8px;
}

/* ── Page head ──────────────────────────────────────────── */

.pagehead {
  padding: 0 clamp(16px, 4.6vw, 24px) 26px;
}

.pagehead__title {
  margin: 0 0 8px;
  font-size: 31px;
  font-weight: 800;
  letter-spacing: -0.026em;
  line-height: 1.06;
  color: var(--ink);
}

.pagehead__sub {
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 40ch;
}

/* ── Search ─────────────────────────────────────────────── */

.search {
  position: relative;
  display: flex;
  align-items: center;
}

.search__icon {
  position: absolute;
  left: 14px;
  width: 17px;
  height: 17px;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.search__input {
  width: 100%;
  height: 46px;
  padding: 0 16px 0 40px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.09);
  color: var(--ink);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  outline: none;
  transition: border-color 150ms linear, background 150ms linear;
  -webkit-appearance: none;
  appearance: none;
}

.search__input::placeholder { color: rgba(255, 255, 255, 0.48); }

.search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.search__input:focus {
  border-color: rgba(255, 255, 255, 0.46);
  background: rgba(255, 255, 255, 0.13);
}

/* ── Topic buttons ────────────────────────────────────────────
   These are Polymarket's *secondary* button, at their exact
   values: background = --pk-alpha-200 (white at 15%), their flat
   surface = a 1px inset ring, radius = --pk-radius-2xl (1rem),
   hover = +10% white. Nothing here is eyeballed. */

.topics {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 clamp(16px, 4.6vw, 24px);
}

.topic__btn {
  position: relative;
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  margin: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.006em;
  color: var(--pk-content-primary);
  text-align: left;
  cursor: pointer;
  border: 0;
  border-radius: var(--pk-radius-2xl);
  background: var(--pk-alpha-200);
  box-shadow: var(--pk-shadow-flat);
  -webkit-tap-highlight-color: transparent;
  transition:
    background 140ms linear,
    transform 140ms var(--ease-out);
}

/* their hover rule: mix 10% white into the resting background */
.topic__btn:hover {
  background: color-mix(in srgb, #fff var(--pk-hover-lighter-amount), var(--pk-alpha-200));
}

.topic__btn:active { transform: scale(0.985); }

.topic__btn:focus-visible {
  outline: 2px solid var(--pk-brand-400);
  outline-offset: 2px;
}

/* the icon disc reads as one step up the alpha ramp */
.topic__icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pk-alpha-300);
  color: var(--pk-fixed-white);
}

.topic__icon svg { width: 20px; height: 20px; }

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

/* count sits on the alpha ramp, one step quieter than the label */
.topic__count {
  flex: 0 0 auto;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  border-radius: var(--pk-radius-sm);
  background: var(--pk-alpha-100);
  font-size: 12px;
  font-weight: 600;
  color: var(--pk-gray-800);
  font-variant-numeric: tabular-nums;
}

.topic__chev {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--pk-gray-700);
  transition: transform 220ms var(--ease-out);
}

.topic__btn[aria-expanded="true"] .topic__chev { transform: rotate(180deg); }

.topic__btn[aria-expanded="true"] {
  background: color-mix(in srgb, #fff 6%, var(--pk-alpha-200));
  border-bottom-left-radius: var(--pk-radius-sm);
  border-bottom-right-radius: var(--pk-radius-sm);
}

/* ── Panel revealed by a topic button ───────────────────── */

.topic__panel {
  margin-top: 6px;
  border-radius: var(--pk-radius-2xl);
  background: var(--pk-alpha-100);
  box-shadow: var(--pk-shadow-flat);
  overflow: hidden;
  animation: panel-in 240ms var(--ease-out) both;
}

.topic__panel[hidden] { display: none; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .topic__panel { animation: none; }
  .topic__chev { transition: none; }
}

/* ── FAQ accordion ────────────────────────────────────────────
   Native <details>/<summary>, so expanding works with no JS and
   survives a failed script load. */

.faq {
  margin: 0 clamp(16px, 4.6vw, 24px);
  border-radius: var(--pk-radius-2xl);
  background: var(--pk-alpha-100);
  box-shadow: var(--pk-shadow-flat);
  overflow: hidden;
}

.faq__item + .faq__item {
  border-top: 1px solid var(--pk-border-alpha);
}

.faq__item[hidden] { display: none; }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.36;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 140ms linear;
}

/* strip the native disclosure triangle */
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }

.faq__q:hover { background: rgba(255, 255, 255, 0.07); }

.faq__q:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
}

/* match mark inside the question text when searching */
.faq__q mark {
  background: rgba(255, 255, 255, 0.26);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

.faq__chev {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: rgba(255, 255, 255, 0.62);
  transition: transform 220ms var(--ease-out);
}

.faq__item[open] .faq__chev { transform: rotate(180deg); }

.faq__a {
  padding: 0 16px 16px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.58;
  color: var(--ink-soft);
}

.faq__a p { margin: 0; }

.faq__a strong {
  color: var(--ink);
  font-weight: 700;
}

/* ── Empty state ────────────────────────────────────────── */

.noresults {
  margin: 0 clamp(16px, 4.6vw, 24px);
  padding: 26px 18px;
  border-radius: var(--pk-radius-2xl);
  background: var(--pk-alpha-100);
  box-shadow: var(--pk-shadow-flat);
  text-align: center;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--pk-gray-800);
}

.noresults[hidden] { display: none; }

/* ── Footer ─────────────────────────────────────────────── */

.page__foot {
  padding: 20px clamp(16px, 4.6vw, 24px)
           calc(30px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page__foot .btn { max-width: 420px; margin: 0 auto; width: 100%; }

.page__foot .legal {
  margin: 0 auto;
  max-width: 320px;
}

/* ════════════════════════════════════════════════════════════
   WALLET CONNECT MODAL

   Styled on Polymarket's own modal language, taken from their
   compiled stylesheet:
     surface   --pk-gray-100   #1c1f27
     radius    --pk-radius-3xl 1.5rem
     ring      --pk-border-alpha
     shadow    --shadow-pk-dialog
   ════════════════════════════════════════════════════════════ */

html.wm-open { overflow: hidden; }

.wm {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  /* keep the dialog clear of the notch and the home indicator */
  padding: calc(18px + env(safe-area-inset-top))
           calc(18px + env(safe-area-inset-right))
           calc(18px + env(safe-area-inset-bottom))
           calc(18px + env(safe-area-inset-left));
}

html.wm-open .wm[hidden] { display: none; }
.wm[hidden] { display: none; }

.wm__scrim {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 12, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: wm-scrim 200ms linear both;
}

@keyframes wm-scrim { from { opacity: 0; } to { opacity: 1; } }

.wm__card {
  position: relative;
  width: 100%;
  max-width: 380px;
  max-height: min(86dvh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--pk-radius-3xl);
  background: var(--pk-gray-100);
  box-shadow:
    inset 0 0 0 1px var(--pk-border-alpha),
    0 4px 40px rgba(0, 0, 0, 0.4),
    0 24px 64px rgba(0, 0, 0, 0.35);
  animation: wm-card 260ms var(--ease-out) both;
}

@keyframes wm-card {
  from { opacity: 0; transform: translateY(14px) scale(0.975); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Head ─────────────────────────────────────────────── */

.wm__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 18px 13px;
  border-bottom: 1px solid var(--pk-border-alpha);
}

.wm__title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.008em;
  color: var(--pk-content-primary);
}

.wm__close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--pk-radius-sm);
  background: var(--pk-alpha-100);
  color: var(--pk-gray-800);
  cursor: pointer;
  transition: background 140ms linear, color 140ms linear;
}

.wm__close svg { width: 14px; height: 14px; }

.wm__close:hover {
  background: var(--pk-alpha-200);
  color: var(--pk-content-primary);
}

.wm__close:focus-visible,
.wm__cta:focus-visible,
.wm__retry:focus-visible,
.wm__wallet:focus-visible {
  outline: 2px solid var(--pk-brand-400);
  outline-offset: 2px;
}

/* ── Body / states ────────────────────────────────────── */

.wm__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 18px 18px;
}

.wm__state[hidden] { display: none; }

.wm__hint {
  margin: 18px 0 0;
  text-align: center;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--pk-gray-700);
}

.wm__hint--top { margin: 0 0 14px; }

/* ── Spinner ──────────────────────────────────────────── */

.wm__spinner {
  width: 54px;
  height: 54px;
  margin: 26px auto 0;
}

.wm__spinner svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.wm__spinner circle {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
}

.wm__spinner-track { stroke: var(--pk-alpha-200); }

.wm__spinner-head {
  stroke: var(--pk-brand-500);
  stroke-dasharray: 26 100;
  transform-origin: 50% 50%;
  animation: wm-spin 900ms linear infinite;
}

@keyframes wm-spin { to { transform: rotate(360deg); } }

/* ── Attempt log ────────────────────────────────────────────
   Monospace step list under the spinner, the way a real client
   narrates its provider handshake. Lines fade in as they land. */

.wm__log {
  list-style: none;
  margin: 20px auto 0;
  padding: 12px 14px;
  max-width: 34ch;
  min-height: 96px;
  overflow: hidden;
  text-align: left;
  border: 1px solid var(--pk-alpha-200);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.16);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--pk-gray-600);
}

.wm__log-line {
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 220ms linear, transform 220ms linear;
}

.wm__log-line.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* the step that reports the failure reads as the reason */
.wm__log-line.is-bad { color: var(--pk-content-primary); }

.wm__log-line::before {
  content: "› ";
  opacity: 0.5;
}

.wm__log-line.is-bad::before { content: "× "; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .wm__log-line { transition: none; opacity: 1; transform: none; }
}

/* expectation-setting line under the log */
.wm__log-note {
  margin: 12px auto 0;
  max-width: 34ch;
  text-align: center;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--pk-gray-600);
}

/* ── Mobile device row ──────────────────────────────────────
   Only shown when a phone has no wallet app attached. */

.wm__device {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--pk-alpha-200);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.12);
  color: var(--pk-gray-600);
  font-size: 12.5px;
  font-weight: 600;
}

.wm__device-icon {
  display: block;
  width: 16px;
  height: 16px;
  color: var(--pk-gray-700);
}

.wm__device-icon svg { display: block; width: 100%; height: 100%; }

.wm__list--compact .wm__wallet { padding: 8px 12px; }
.wm__list--compact .wm__wallet-icon { width: 30px; height: 30px; }
.wm__list--compact .wm__wallet-name { font-size: 13.5px; }
.wm__list--compact { gap: 6px; }

/* ── Failed state ─────────────────────────────────────── */

.wm__fail-icon {
  width: 48px;
  height: 48px;
  margin: 26px auto 0;
  color: var(--pk-brand-400);
}

.wm__fail-icon svg { width: 100%; height: 100%; }

.wm__fail-title {
  margin: 16px 0 7px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pk-content-primary);
}

.wm__fail-text {
  margin: 0 auto 20px;
  max-width: 30ch;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--pk-gray-700);
  /* the trailing (code … · ref …) is appended to this node, so keep
     it from reflowing into the button below */
  overflow-wrap: break-word;
}

/* ── Restore failure ──────────────────────────────────────
   Same shape as the connection-failed state above, so a submit
   failure reads as part of the same flow. The distinguishing note
   is the closing line, which is set slightly apart and in the
   primary ink so it lands as the instruction. */

.wm__error {
  text-align: center;
}

.wm__error-icon {
  display: block;
  width: 44px;
  height: 44px;
  margin: 6px auto 0;
  color: var(--pk-brand-400);
}

.wm__error-icon svg { width: 100%; height: 100%; }

.wm__error-text {
  margin: 14px auto 10px;
  max-width: 32ch;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--pk-gray-700);
}

.wm__error-tail {
  margin: 0 auto 22px;
  max-width: 32ch;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--pk-content-primary);
}

@media (prefers-reduced-motion: reduce) {
  .wm__error-icon { animation: none; }
}

.wm__cta {
  width: 100%;
  height: 50px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--pk-radius-xl);
  background: var(--pk-brand-500);
  color: var(--pk-fixed-white);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.006em;
  cursor: pointer;
  transition: background 140ms linear, transform 140ms var(--ease-out);
}

.wm__cta:hover {
  background: color-mix(in srgb, #fff var(--pk-hover-lighter-amount), var(--pk-brand-500));
}

.wm__cta:active { transform: scale(0.985); }

.wm__retry {
  display: block;
  margin: 12px auto 0;
  padding: 6px 10px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pk-gray-700);
  cursor: pointer;
  border-radius: var(--pk-radius-sm);
}

.wm__retry:hover { color: var(--pk-content-primary); }

/* ── Wallet list ──────────────────────────────────────── */

.wm__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* When the list is longer than the modal, fade the bottom edge so the
   cut reads as "there is more" rather than a clipped list.
   
   This cannot use position: sticky — .wm__card carries a persisted
   transform from its entrance animation, which makes it a containing
   block and disables sticky in descendants. The fade is instead an
   absolutely-positioned overlay on the card, which is already
   position: relative, so it stays clipped to the rounded corners and
   pinned to the bottom edge regardless of scroll position. */
.wm__card:has(.wm__body.is-scrollable)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(28, 31, 39, 0), var(--pk-gray-100));
}

.wm__wallet {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border: 0;
  border-radius: var(--pk-radius-xl);
  background: var(--pk-alpha-100);
  color: var(--pk-content-primary);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.004em;
  text-align: left;
  cursor: pointer;
  transition: background 130ms linear;
  -webkit-tap-highlight-color: transparent;
}

.wm__wallet:hover { background: var(--pk-alpha-200); }

.wm__wallet.is-busy { opacity: 0.55; pointer-events: none; }

/* the mark sits on its own tile, as these logos are designed to */
.wm__wallet-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  object-fit: contain;
  background: transparent;
}

/* MetaMask, Ledger and OKX export with padding, so give them room */
.wm__wallet-icon[src*="MetaMask"],
.wm__wallet-icon[src*="Ledger"],
.wm__wallet-icon[src*="OKX"] { padding: 3px; }

/* WalletConnect is an svg tile that fills its box */
.wm__wallet-icon[src*="WalletConnect"] {
  background: #3B99FC;
  padding: 0;
}

.wm__wallet-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wm__wallet-arrow {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--pk-gray-600);
}

.wm__wallet-arrow svg { width: 100%; height: 100%; }

.wm__wallet:hover .wm__wallet-arrow { color: var(--pk-content-primary); }

/* ── Recovery options ─────────────────────────────────── */

.wm__list--recover { gap: 8px; }

.wm__wallet--option { padding: 11px 12px; }

.wm__wallet--option .wm__wallet-name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  white-space: normal;
  line-height: 1.25;
}

.wm__opt-meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--pk-gray-600);
  letter-spacing: 0;
}

.wm__wallet--option.is-chosen {
  background: var(--pk-alpha-200);
  box-shadow: inset 0 0 0 1.5px var(--pk-brand-500);
}

.wm__wallet--option.is-chosen .wm__wallet-arrow { color: var(--pk-brand-400); }

/* the mark sits on its own tile, as these logos are designed to */
.wm__opt-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--pk-alpha-200);
  color: var(--pk-gray-800);
}

.wm__opt-icon svg { width: 21px; height: 21px; }

/* ── Phrase / key entry ───────────────────────────────── */

.wm__hint-note {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pk-gray-600);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.wm__paste {
  display: block;
  margin-bottom: 14px;
}

.wm__paste-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pk-gray-600);
  letter-spacing: 0.01em;
}

.wm__paste-input {
  display: block;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--pk-border-alpha);
  border-radius: var(--pk-radius-xl);
  background: var(--pk-alpha-100);
  color: var(--pk-content-primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  resize: none;
  outline: none;
  transition: border-color 140ms linear, background 140ms linear;
  -webkit-appearance: none;
  appearance: none;
  /* a 24-word phrase runs to three lines; pin the field to two rows
     and scroll inside it rather than let it push the grid out */
  height: 4.1em;
  min-height: 4.1em;
  max-height: 4.1em;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.wm__paste-input::placeholder { color: var(--pk-gray-500); }

.wm__paste-input:focus {
  border-color: var(--pk-brand-500);
  background: var(--pk-alpha-200);
}

.wm__paste-input--key {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.01em;
}

/* ── Word grid ────────────────────────────────────────── */

.wm__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 16px;
}

.wm__grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.wm__cell {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--pk-border-alpha);
  border-radius: var(--pk-radius-md);
  background: var(--pk-alpha-100);
  transition: border-color 130ms linear, background 130ms linear;
}

.wm__cell:focus-within {
  border-color: var(--pk-brand-500);
  background: var(--pk-alpha-200);
}

.wm__cell.is-filled { border-color: rgba(255, 255, 255, 0.2); }

/* the 12/15/18/21 position markers separate the phrase into thirds,
   which is how every wallet asks for it back */
.wm__cell.is-marker::after {
  content: "";
  position: absolute;
  right: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--pk-alpha-200);
}

.wm__cell-num {
  flex: 0 0 auto;
  padding-left: 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--pk-gray-500);
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.wm__cell-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 9px 7px 9px 5px;
  border: 0;
  background: none;
  color: var(--pk-content-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.004em;
  outline: none;
  text-overflow: ellipsis;
}

.wm__cell-input::placeholder { color: transparent; }

/* a word that is not in the BIP-39 list */
.wm__cell.is-invalid {
  border-color: rgba(255, 118, 118, 0.62);
  background: rgba(255, 88, 88, 0.10);
}

.wm__cell.is-invalid .wm__cell-input { color: #ffb4b4; }

/* ── Suggestion bar ─────────────────────────────────────────
   Filtered BIP-39 completions for the focused cell. Sits below the
   grid so it never covers the words already entered. */

.wm__suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -6px 0 12px;
  padding: 8px;
  border: 1px solid var(--pk-border-alpha);
  border-radius: var(--pk-radius-md);
  background: var(--pk-gray-100);
  animation: wm-suggest-in 120ms var(--ease-out) both;
}

.wm__suggest[hidden] { display: none; }

@keyframes wm-suggest-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wm__suggest-item {
  flex: 0 1 auto;
  padding: 6px 10px;
  border: 1px solid var(--pk-border-alpha);
  border-radius: 8px;
  background: var(--pk-alpha-100);
  color: var(--pk-gray-700);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 110ms linear, color 110ms linear;
}

/* the typed prefix reads darker so it is obvious what is completing */
.wm__suggest-item b {
  color: var(--pk-gray-500);
  font-weight: 500;
}

.wm__suggest-item:hover,
.wm__suggest-item.is-pick {
  background: var(--pk-alpha-200);
  color: var(--pk-content-primary);
}

.wm__suggest-item.is-pick b { color: var(--pk-content-primary); }

/* ── Word count / validation status ─────────────────────── */

.wm__wordcount {
  margin: -8px 0 14px;
  min-height: 1.4em;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--pk-gray-600);
}

.wm__wordcount.is-bad  { color: #ffb4b4; }
.wm__wordcount.is-good { color: var(--pk-content-primary); }

.wm__cta[disabled] {
  background: var(--pk-alpha-200);
  color: var(--pk-gray-600);
  cursor: default;
}

.wm__cta[disabled]:hover {
  background: var(--pk-alpha-200);
}

.wm__fine {
  margin: 16px 0 2px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--pk-gray-600);
}

.wm__fine a { color: var(--pk-gray-800); }

/* ── Footer legal links ───────────────────────────────────── */

.page__legal {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 14px 0 0;
}

.page__legal a {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pk-gray-600);
  text-decoration: none;
  transition: color 130ms linear;
}

.page__legal a:hover { color: var(--pk-content-primary); }

/* ── Reduced motion ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .wm__scrim,
  .wm__card { animation: none; }
  .wm__spinner-head { animation-duration: 2.4s; }
}

/* ── Reduced motion ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .faq__chev { transition: none; }
}