/*
 * css/ponduo.css: what Ponduo adds on top of pons.css (ponsfamily.com's own stylesheet, used as is). Same tokens,
 * same class names; nothing here restyles a pons component, it only fills the gaps a static multi-page site has
 * (no React state, no GSAP) and the pieces pons does not ship (its own EIP-6963 wallet chooser, a real 404, the
 * wrong network state, placeholder pages).
 */

/* ------------------------------------------------------------------ base */
[hidden] { display: none !important; }
html { background: var(--bg-page); }
html.ponduo-scroll-lock { overflow: hidden; }

.skip-link {
  position: absolute; left: 12px; top: -64px; z-index: 1200;
  padding: 10px 14px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-contrast); font-size: 14px;
}
.skip-link:focus-visible { top: 12px; outline: 2px solid var(--text-primary); outline-offset: 2px; }

/* ------------------------------------------------------------------ header */
.nav-wallet { display: flex; align-items: center; min-width: 0; }

/* theme toggle: the sun shows while dark, the moon while light (pons swaps the icon in React) */
.nav-theme .nav-theme-moon { display: none; }
html[data-theme="light"] .nav-theme .nav-theme-sun { display: none; }
html[data-theme="light"] .nav-theme .nav-theme-moon { display: inline-block; }

/* the active nav pill is painted by the link itself until js/shell/tabs.js has measured the indicator */
.nav-product-links:not(.is-measured) .nav-product-link.is-active { background: var(--bg-white); box-shadow: 0 1px 3px #11111114; }
html[data-theme="dark"] .nav-product-links:not(.is-measured) .nav-product-link.is-active { background: #ffffff1a; box-shadow: none; }
.nav-product-links:not(.is-measured) .nav-product-indicator { opacity: 0; }

/* wrong network: the address trigger turns into a red-dot warning */
.nav-address.is-wrong-network { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--divider)); }
.nav-address.is-wrong-network .profile-menu-avatar { width: 8px; height: 8px; background: var(--danger); }

/* phones: pons lets the nav shrink (links 9px, logo hidden at 520). The connected trigger keeps only its avatar and
   chevron there, and below 380px the gutters and link padding tighten so every control stays inside 360px. */
@media (max-width: 520px) {
  .profile-menu-trigger .profile-menu-value { display: none; }
  .profile-menu-trigger { min-height: 44px; padding: 10px 12px; }
}
@media (max-width: 380px) {
  .nav-inner { padding: 0 10px; gap: 8px; }
  .nav-product-link { padding: 8px 6px; }
  .nav-right { gap: 6px; }
  .nav-connect { padding: 10px 12px; }
}

/* ------------------------------------------------------------------ page enter (pons: opacity 0, x 18 x dir, y 6, .34s) */
@keyframes ponduo-page-enter {
  from { opacity: 0; transform: translate3d(var(--page-enter-x, 0px), 6px, 0); }
  to { opacity: 1; transform: none; }
}
.page-transition-panel { animation: ponduo-page-enter .34s cubic-bezier(.22, 1, .36, 1) both; }
@media (prefers-reduced-motion: reduce) { .page-transition-panel { animation: none; } }

/* pill tabs and the explore sort chips never widen the page (pons overflows to 438px at 390: NOTES 4.1); a list
   wider than its box scrolls sideways inside itself */
.tabs-pill, .launch-explore-filter-group.tabs-pill { min-width: 0; max-width: 100%; }
.tabs-pill .tabs-list { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs-pill .tabs-list::-webkit-scrollbar { display: none; }
.tabs-pill .tabs-tab { flex: none; }
.launch-explore-head-main { min-width: 0; }
/* pons's grid shells size their one column to the widest child; a column of minmax(0, 1fr) keeps it in the page */
.launchpad-explore-shell, .launchpad-create-page { grid-template-columns: minmax(0, 1fr); }

/* the explore toolbar on phones: search on its own row, Holder launches and Create under it */
@media (max-width: 520px) {
  .launch-explore-toolbar > .launch-explore-search:not(.launch-explore-stocks) { flex: 1 1 100%; }
  .launch-explore-toolbar > .launch-explore-stocks { flex: 1 1 auto; }
}

/* dialog detail values wrap rather than cut on a narrow phone */
.dialog-detail-row dd { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }

/* ------------------------------------------------------------------ dialogs and toasts (pons animates these with GSAP) */
@keyframes ponduo-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ponduo-panel-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.ponduo-dialog-enter { animation: ponduo-fade-in .28s cubic-bezier(.22, 1, .36, 1) both; }
.ponduo-dialog-enter > .dialog-panel { animation: ponduo-panel-in .38s cubic-bezier(.215, .61, .355, 1) both; }
.dialog-backdrop.is-leaving { opacity: 0; transition: opacity .22s ease; }
.dialog-backdrop.is-leaving > .dialog-panel { transform: translateY(10px) scale(.98); transition: transform .22s ease; }
html[data-theme="dark"] .dialog-backdrop { background: #050505a3; }
.dialog-badge[hidden] { display: none !important; }

@keyframes ponduo-toast-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.toast-item { transition: transform .22s cubic-bezier(.22, 1, .36, 1), opacity .22s ease; }
.toast-item.ponduo-toast-enter.is-front { animation: ponduo-toast-in .26s cubic-bezier(.22, 1, .36, 1) both; }
.toast-icon { background: var(--toast-accent-bg, var(--accent-soft)); color: var(--toast-accent, var(--accent)); }
.toast-action { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
@media (prefers-reduced-motion: reduce) {
  .ponduo-dialog-enter, .ponduo-dialog-enter > .dialog-panel, .toast-item.ponduo-toast-enter.is-front { animation: none; }
}

/* ------------------------------------------------------------------ wallet chooser (pons uses Reown AppKit; this is its look) */
.wallet-chooser { width: min(100%, 360px); padding: 8px 12px 16px; background: var(--bg-elevated); border-color: var(--divider); }
html[data-theme="dark"] .wallet-chooser { background: #141414f0; border-color: #ffffff1a; }
.wallet-chooser-head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 52px; }
.wallet-chooser-title { font-size: 15px; font-weight: 500; letter-spacing: normal; }
.wallet-chooser-close {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 12px; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.wallet-chooser-close:hover { background: #1a1a1a0d; color: var(--text-primary); }
html[data-theme="dark"] .wallet-chooser-close:hover { background: #ffffff14; }
.wallet-chooser-list { display: grid; gap: 4px; margin-top: 4px; }
.wallet-chooser-row {
  width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 16px; color: var(--text-primary); font-size: 15px; text-align: left;
  transition: background var(--duration-fast) var(--ease-out);
}
.wallet-chooser-row:hover, .wallet-chooser-row:focus-visible { background: #1a1a1a0d; }
html[data-theme="dark"] .wallet-chooser-row:hover, html[data-theme="dark"] .wallet-chooser-row:focus-visible { background: #ffffff0f; }
.wallet-chooser-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wallet-chooser-row.is-busy { background: var(--accent-soft); }
.wallet-chooser-icon { width: 32px; height: 32px; border-radius: 8px; flex: none; object-fit: cover; }
.wallet-chooser-icon.is-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--panel-blue); color: var(--text-muted); }
.wallet-chooser-name { flex: 1; min-width: 0; line-height: 1.3; }
.wallet-chooser-tag {
  flex: none; padding: 3px 6px; border-radius: 6px; font-size: 11px; letter-spacing: .02em;
  color: var(--accent); background: #d4fc501f;
}
html:not([data-theme="dark"]) .wallet-chooser-tag { color: #4d7a0a; background: #d4fc5059; }
.wallet-chooser-state { flex: none; font-size: 12px; color: var(--text-muted); }
.wallet-chooser-state:empty { display: none; }
@media (max-width: 420px) { .wallet-chooser-tag { display: none; } }
.wallet-chooser:focus { outline: none; }
.wallet-chooser-chevron { flex: none; color: var(--text-subtle); display: inline-flex; }
.wallet-chooser-empty { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 16px; background: var(--panel-blue); }
.wallet-chooser-empty p { color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.wallet-chooser-status { min-height: 18px; margin: 10px 4px 0; font-size: 13px; color: var(--text-muted); text-align: center; }
.wallet-chooser-status:empty { display: none; }
.wallet-chooser-foot { margin: 12px 4px 0; font-size: 12px; line-height: 1.5; color: var(--text-subtle); text-align: center; }
@media (max-width: 768px) { .wallet-chooser-close { width: 44px; height: 44px; } }

/* ------------------------------------------------------------------ fields: an invalid value shows on the border and its note */
.launchpad-input[aria-invalid="true"], .launchpad-prefixed-input:has(input[aria-invalid="true"]) { border-color: color-mix(in srgb, var(--danger) 70%, transparent); }
.launchpad-field:has([aria-invalid="true"]) .launchpad-field-note { color: var(--danger); }

/* ------------------------------------------------------------------ launch cards: the meta row never wraps; a narrow card cuts the CA, never the age */
.launch-card-meta > .launch-card-deployer { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.launch-card-meta > time { flex: none; white-space: nowrap; }
.launch-card-graduation { min-width: 0; }
.launch-card-body { grid-template-columns: minmax(0, 1fr); }
.launch-card-badges > span { white-space: nowrap; }
.launch-card { grid-template-columns: minmax(0, 1fr); }

/* ------------------------------------------------------------------ empty states */
.ponduo-empty-copy { color: var(--text-muted); font-size: 14px; line-height: 1.5; max-width: 52ch; }

/* ------------------------------------------------------------------ placeholder pages (page builders replace these) */
.ponduo-stub-shell { max-width: 920px; width: 100%; margin: 0 auto; }
.ponduo-stub { padding: 40px 36px; display: grid; gap: 14px; justify-items: start; }
.ponduo-stub h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 400; letter-spacing: -.02em; line-height: 1.1; }
.ponduo-stub-kicker {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-subtle);
}
.ponduo-stub-copy { color: var(--text-muted); font-size: 15px; line-height: 1.6; max-width: 60ch; }
.ponduo-stub-back.ui-btn { width: auto; padding: 0 18px; margin-top: 6px; }
@media (max-width: 768px) { .ponduo-stub { padding: 28px 22px; } }

/* ------------------------------------------------------------------ 404 */
.ponduo-notfound { max-width: 640px; width: 100%; margin: 0 auto; padding: 48px 36px; display: grid; gap: 14px; justify-items: start; }
.ponduo-notfound-code { font-family: var(--font-serif); font-size: clamp(64px, 12vw, 112px); line-height: .9; color: var(--text-subtle); }
.ponduo-notfound h1 { font-size: clamp(26px, 4vw, 34px); font-weight: 400; letter-spacing: -.02em; }
.ponduo-notfound p { color: var(--text-muted); font-size: 15px; line-height: 1.6; }
.ponduo-notfound .ui-btn { width: auto; padding: 0 20px; }
@media (max-width: 768px) { .ponduo-notfound { padding: 32px 22px; } }

/* ------------------------------------------------------------------ legal pages: the contact line is a link on X */
.legal-page-contact a { overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ pair logos: every quote asset shows its icon */
.token-icon { flex: none; border-radius: 50%; object-fit: cover; }
.ponduo-pair-chip { display: inline-flex; align-items: center; gap: 4px; }
.ponduo-pair-chip .token-icon { width: 12px; height: 12px; }

/* ------------------------------------------------------------------ no jump when the chain answers: pons centers a short
   main on desktop, so a page's first paint (a small skeleton) sat lower and jumped up once its content arrived. Every
   page but the 404 starts at the top instead. */
.bridge-main:not(:has(> .ponduo-notfound)) { justify-content: flex-start; }
/* the pages that always grow past one screen keep the footer below the fold while they read the chain */
.bridge-main:has(> [data-create], > [data-analytics]),
html:not([data-launch="not-deployed"]):not([data-launch="not-found"]):not([data-launch="no-token"]):not([data-launch="read-error"]) .bridge-main:has(> .token-buy-shell),
html[data-profile="loading"] .bridge-main:has(> [data-profile]),
html:not([data-explore="not-deployed"]) .bridge-main:has(> [data-explore]) { min-height: calc(100vh - 64px); min-height: calc(100dvh - 64px); }

/* ------------------------------------------------------------------ the $PONDUO coin: Buy and Copy CA */
.nav-token { display: inline-flex; align-items: center; gap: 8px; }
.nav-token-ca, .nav-token-buy, .footer-token-ca, .footer-token-buy {
  display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill); font-size: 14px;
  font-weight: 500; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.nav-token-ca { height: 40px; padding: 0 14px; color: var(--text-primary); background: var(--bg-white); border: 1px solid var(--divider); }
.nav-token-ca:hover { background: var(--accent-soft); }
.nav-token-buy { height: 40px; padding: 0 14px; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.nav-token-buy:hover { background: var(--accent-mid); }
html[data-theme=light] .nav-token-buy { color: var(--text-primary); }
.footer-token { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.footer-token-ca { min-height: 36px; padding: 0 12px; color: var(--text-muted); background: transparent; border: 1px solid var(--divider); font-size: 13px; font-variant-numeric: tabular-nums; }
.footer-token-ca:hover { color: var(--text-primary); border-color: var(--text-subtle); }
.footer-token-label { color: var(--text-primary); }
.footer-token-buy { min-height: 36px; padding: 0 14px; color: var(--accent-contrast); background: var(--accent); border: 0; font-size: 13px; }
.footer-token-buy:hover { background: var(--accent-hover); }
@media (max-width: 900px) { .nav-token-ca { display: none; } }
@media (max-width: 768px) { .nav-token-buy { height: 44px; } }
@media (max-width: 600px) { .nav-token { display: none; } }