/* app-styles.css — the launch and market pages, in the same language as the
   home page.

   Every token here comes from styles.css, which carries the Yieldflare system
   the user asked this site to match: Inter and JetBrains Mono, the ink/muted/
   faint greys, the 2px button and 8px card radii, and green for a settled
   thing with rust for one that needs attention.

   The class names are the ones the pages already use, so the markup and every
   data- hook the tested behaviour depends on are untouched. */

/* ------------------------------------------------------------ app chrome */

.app-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.app-head .head-inner { display: flex; align-items: center; gap: 28px; height: 58px; }
.brand-word { font-weight: 600; letter-spacing: -.02em; }
.head-nav { display: flex; gap: 24px; margin-inline: auto; }
.head-nav a { font-size: 13px; color: var(--muted); }
.head-nav a:hover { color: var(--ink); }
.head-right { display: flex; align-items: center; gap: 12px; }

.app-main { padding-block: 40px 96px; }
.app-title { font-size: clamp(26px, 2.6vw, 35.2px); line-height: 1.1; letter-spacing: -.032em; }
.app-sub { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 12px 0 0; max-width: 60ch; }

/* --------------------------------------------------------------- panels */

/* The card is the only container on these pages. Nothing floats. */
.panel {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.form-panel, .preview-panel, .trade-panel, .detail-panel { padding: 22px; }
/* A label, so it follows the label weight rather than the heading weight. */
.detail-title {
  font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
  margin: 0 0 14px;
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 22px;
  margin-top: 26px;
  align-items: start;
}

/* --------------------------------------------------------------- fields */

.fld { display: grid; gap: 7px; }
.fld-label { font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.fld-hint { color: var(--muted); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.fld input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
.fld input::placeholder { color: var(--faint); }
.fld input:focus-visible { outline: 2px solid var(--base); outline-offset: 1px; border-color: var(--base); }
.fld-error { color: var(--flare); font-size: 13px; }

.amount-row { display: flex; align-items: center; gap: 10px; }
.amount-row input { flex: 1; min-width: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.amount-unit {
  font-size: 12px; font-weight: 500; color: var(--muted);
  overflow-wrap: anywhere; flex: none; max-width: 40%;
}

.quote { color: var(--base); font-size: 13px; margin: 0; overflow-wrap: anywhere; }
.pane-note { color: var(--muted); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.empty-note { color: var(--muted); font-size: 13.5px; }
.fineprint { color: var(--faint); font-size: 12.5px; line-height: 1.6; }

/* -------------------------------------------------------------- buttons */

/* styles.css owns .btn. These are the shapes the app pages ask for. */
.btn-solid { background: var(--ink); color: #fff; }
.btn-solid:hover { background: #1d2430; }
.btn-glass { background: var(--surface-2); color: var(--ink); }
.btn-glass:hover { background: #e3e6ea; }
.btn-block { width: 100%; justify-content: center; padding-block: 12px; }
.btn-sm { padding: 7px 13px; font-size: 12.5px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn {
  padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: transparent; color: var(--muted); font-size: 12.5px; cursor: pointer;
}
.chip-btn:hover { border-color: var(--ink); color: var(--ink); }

/* ----------------------------------------------------------------- tabs */

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.tab {
  padding: 10px 2px; margin-right: 22px;
  border: 0; border-bottom: 2px solid transparent; background: none;
  font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer;
  letter-spacing: -.01em;
}
.tab:hover { color: var(--ink); }
.tab.is-on { color: var(--ink); border-bottom-color: var(--ink); }
.tab-pane { display: none; }
.tab-pane.is-on { display: grid; gap: 16px; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px; }
.seg-btn {
  padding: 6px 16px; border: 0; border-radius: var(--r-pill); background: none;
  font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.seg-btn.is-on { background: var(--base); color: #fff; }

/* -------------------------------------------------------- market header */

.market-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.market-id { min-width: 0; flex: 1 1 260px; }
/* The ticker is the page heading, so it takes the heading treatment: 700,
   tight tracking, line-height under 1. */
.market-ticker {
  font-size: clamp(28px, 3.7vw, 40px); font-weight: 700;
  line-height: .98; letter-spacing: -.04em; overflow-wrap: anywhere; min-width: 0;
}
.market-name { color: var(--muted); font-size: 14.5px; overflow-wrap: anywhere; min-width: 0; margin: 2px 0 0; }
.market-addr { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--faint); word-break: break-all; }
.market-addr:hover { color: var(--base); }

.market-price { margin-left: auto; text-align: right; flex: none; }
.price-label {
  display: block; font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.market-price strong {
  display: block; font-size: 28px; font-weight: 600;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.price-sub { color: var(--faint); font-size: 12px; }

/* The token mark, square with the small radius the reference uses on a logo. */
.token-avatar {
  width: 38px; height: 38px; border-radius: 5px; overflow: hidden;
  display: grid; place-items: center; flex: none;
  font-size: 11px; font-weight: 700; color: #fff;
}
.token-avatar.lg { width: 54px; height: 54px; border-radius: 7px; font-size: 15px; }
.token-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------ stat row */

.stat-row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface); margin-top: 24px; overflow: hidden;
}
.stat { padding: 16px 18px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat span {
  display: block; font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px;
}
.stat strong {
  display: block; font-size: 18px; font-weight: 600;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.stat strong.good { color: var(--base); }
.stat strong.bad { color: var(--flare); }

.your-row, .balance-row {
  display: flex; gap: 26px; flex-wrap: wrap;
  padding-top: 16px; margin-top: 4px; border-top: 1px solid var(--line);
}
.your-row > div, .balance-row > div { min-width: 0; }
.your-row span, .balance-row span {
  display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px;
}
.your-row strong, .balance-row strong {
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}

.claim-box {
  margin-top: 16px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--base-soft);
}
.claim-label { display: block; font-size: 12px; color: var(--base); margin-bottom: 8px; }

/* ----------------------------------------------------------- the facts */

.facts { list-style: none; margin: 0; padding: 0; }
.facts li {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid var(--line);
}
.facts li:first-child { border-top: 0; }
.facts span { color: var(--muted); font-size: 13px; flex: none; }
.facts strong { font-family: var(--mono); font-size: 12.5px; font-weight: 500; text-align: right; word-break: break-all; }

.preview-facts { display: grid; gap: 10px; margin-top: 16px; }
.preview-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.token-preview { display: flex; align-items: center; gap: 14px; }
.token-ticker { font-size: 20px; font-weight: 600; letter-spacing: -.03em; overflow-wrap: anywhere; }
.token-name { color: var(--muted); font-size: 13.5px; overflow-wrap: anywhere; }

.review { list-style: none; margin: 0; padding: 0; }
.review li {
  display: flex; justify-content: space-between; gap: 18px; align-items: baseline;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.review li:first-child { border-top: 0; }
.review span { color: var(--muted); font-size: 13px; flex: none; }
.review strong { font-weight: 500; font-size: 13.5px; text-align: right; word-break: break-word; }

/* --------------------------------------------------------- the stepper */

.steps { display: flex; gap: 26px; margin: 26px 0 22px; flex-wrap: wrap; }
.step {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--faint);
}
.step::before {
  content: attr(data-step);
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 11px; font-weight: 600;
}
.step.is-on { color: var(--ink); }
.step.is-on::before { background: var(--ink); border-color: var(--ink); color: #fff; }
.step.is-done { color: var(--muted); }
.step.is-done::before { background: var(--base); border-color: var(--base); color: #fff; }

.form-step { display: none; }
.form-step.is-on { display: grid; gap: 18px; }
.form-nav { display: flex; gap: 12px; align-items: center; margin-top: 24px; }

/* ------------------------------------------------------ transaction log */

.tx-log, .launch-log { display: grid; gap: 2px; margin-top: 18px; }
.log-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  background: var(--surface); font-size: 13px;
}
.log-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.log-row.is-pending .log-dot { background: var(--muted); animation: pulse 1.1s ease-in-out infinite; }
.log-row.is-done .log-dot { background: var(--base); }
.log-row.is-fail .log-dot { background: var(--flare); }
.log-row.is-warn .log-dot { background: #b7791f; }
.log-row.is-fail { border-color: #e7cfc7; background: var(--flare-soft); }
.log-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.log-hash { font-size: 11.5px; color: var(--faint); flex: none; }
.log-hash:hover { color: var(--base); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.loading { color: var(--muted); padding: 40px 0; }
.pool-missing {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface-2); padding: 16px; margin-top: 4px;
}

/* --------------------------------------------------------------- footer */

.site-foot .foot-legal { color: var(--faint); font-size: 12px; line-height: 1.6; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .app-head .head-nav { display: none; }
  .market-price { margin-left: 0; text-align: left; }
  .steps { gap: 14px; }
}

[hidden] { display: none !important; }

/* THE HEADER HAS TO FIT A PHONE.

   At 390px the brand, the gap and a full-padding button came to more than the
   line, and the page scrolled sideways by the width of one gutter. The nav is
   already hidden here; this lets the rest shrink rather than push. */
@media (max-width: 620px) {
  .app-head .head-inner { gap: 12px; }
  .app-head .head-inner > * { min-width: 0; }
  .app-head .head-right { margin-left: auto; }
  .app-head .head-right .btn { padding: 9px 13px; }
  .app-head .brand-word { overflow: hidden; text-overflow: ellipsis; }
}

/* ------------------------------------------------------- the plan strip

   Which step of a multi-transaction action is running. A trade can be three
   transactions and a person should be able to see that at a glance rather
   than inferring it from rows appearing one at a time. */
.plan {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 18px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2);
}
.plan-step {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--faint);
}
.plan-step::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--line); flex: none;
}
.plan-step + .plan-step::after { content: none; }
.plan-step:not(:last-child) { padding-right: 8px; border-right: 1px solid var(--line); }
.plan-step.is-now { color: var(--ink); font-weight: 600; }
.plan-step.is-now::before { background: var(--base); animation: pulse 1.1s ease-in-out infinite; }
.plan-step.is-done { color: var(--muted); }
.plan-step.is-done::before { background: var(--base); }

/* Same reasoning as the site header: a 20px link is under the minimum. */
.app-head .head-nav a { display: inline-block; padding-block: 10px; }
.app-head .brand { padding-block: 6px; }

/* At 320px the launch navigation buttons did not fit on one line. */
@media (max-width: 430px) {
  .form-nav { flex-wrap: wrap; }
  .form-nav .btn { flex: 1 1 auto; justify-content: center; }
  .steps { gap: 10px; }
  .your-row, .balance-row { gap: 16px; }
}

/* At 320px the header still ran 7px past the edge. */
@media (max-width: 430px) {
  .app-head .head-inner { gap: 8px; }
  .app-head .head-right .btn { padding: 8px 10px; font-size: 12px; }
}

/* THE NAV AT NARROW WIDTHS, ON THE APP PAGES.

   styles.css hides .head-nav below 720px. This file redefines .head-nav and is
   loaded AFTER styles.css on launch and market, and a media query adds no
   specificity, so that plain rule won and the nav stayed visible at 320px,
   where it collided with the connect button. The hide has to be repeated here
   to land after it. */
@media (max-width: 720px) {
  .head-nav { display: none; }
}

/* ------------------------------------------------- the pad's coin directory

   The address is shown in full rather than truncated, because the whole point
   of this page is leaving it with something you can paste. On a narrow screen
   it wraps mid-string instead of widening the table past the viewport. */
.ca-cell { display:flex; align-items:center; gap:10px; }
.ca-full {
  font-size:11.5px; letter-spacing:-.01em; color:var(--muted);
  word-break:break-all; line-height:1.45;
}
.coin-links { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.coin-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-top:12px;
}
.coin-head .coin-links { justify-content:flex-start; }

@media (max-width:760px) {
  .ca-cell { flex-direction:column; align-items:flex-start; gap:6px; }
  .ca-full { font-size:11px; }
}