/* Self-hosted fonts, byte-identical to the ones the dapp serves.
   Copied from the landing page repo rather than loaded from Google Fonts so
   the swap renders in exactly the same faces, works inside the canister's CSP
   without allowing an external font origin, and does not leak visitor IPs to
   a third party. */
@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("./assets/fonts/JetBrainsMono.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
}

@font-face {
  font-family: "Oswald";
  src: url("./assets/fonts/Oswald.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Oswald";
  src: url("./assets/fonts/Oswald-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* ==================================================================
   NAKSwap — New Age Kapital institutional design system.

   Tokens mirror the dapp's palette exactly. Do not introduce new
   colours here; if the dapp palette changes, change it here to match.

   Conventions carried over from the dapp:
     - hairline 1px borders, never glows or drop-shadows
     - button radius 0.25rem
     - Inter for text, JetBrains Mono (tabular-nums) for every number,
       amount, address and reference
     - Oswald for the wordmark only
     - purple is a single restrained accent, not a subject
     - pink is retired
   ================================================================== */
:root {
  --bg: #08090a;
  --surface: #0e1011;
  --surface-hover: #141719;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #8a8a93;
  --accent: #8b5cf6;
  --positive: #10b981;
  --warning: #fbbf24;
  --negative: #ef4444;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --wordmark: "Oswald", var(--sans);

  --radius: 0.25rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Section rhythm copied from the dapp: px-6 py-20 inside a max-w-7xl centre. */
.trade { padding: clamp(2.5rem, 8vw, 5rem) 1.5rem; }

.trade__grid {
  max-width: 80rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}

@media (min-width: 860px) {
  .trade__grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

.trade__intro { max-width: 36rem; }

/* Embedded in the dapp's Trade section: the surrounding copy already exists
   there, so only the swap panel renders. Set by ?embed=1. */
body.is-embedded .trade { padding: 0; }
body.is-embedded .trade__grid { grid-template-columns: 1fr; gap: 0; }
body.is-embedded .masthead,
body.is-embedded .trade__intro,
body.is-embedded .footer { display: none; }

/* The dapp's Trade column is already a bordered .surface with its own padding
   and "Powered by Houdiniswap" label. Embedded, the panel drops its own chrome
   so there is no double border, double padding or duplicated label. */
body.is-embedded .panel {
  background: transparent;
  border: 0;
  padding: 0;
}

body.is-embedded .panel > .section-label { display: none; }

:where(a, button, input, output, [tabindex]):focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

/* Every number, address and reference is monospaced with tabular figures. */
.leg__amount,
.field__input,
.deposit__address,
.fact dd,
.leg__note,
.deposit__tag {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Shared label treatment: 0.6875rem uppercase, wide tracking, muted. */
.leg__label,
.field__label,
.routing__legend,
.fact dt {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}

/* ---------------- Masthead ---------------- */

.masthead {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.masthead__mark {
  font-family: var(--wordmark);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text);
  text-decoration: none;
}

.masthead__name {
  margin-left: 0.625rem;
  padding-left: 0.625rem;
  border-left: 1px solid var(--border);
  font-size: 0.6875rem;
  color: var(--text-muted);
}

@media (max-width: 620px) {
  .masthead__name { display: none; }
}

.masthead__product {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-secondary);
}

/* ---------------- Panels ---------------- */

/* .surface in the dapp has NO border-radius. Square corners are the
   institutional signature; rounding is reserved for buttons and inputs. */
.panel,
.surface {
  background: var(--surface);
  border: 1px solid var(--border);
}

.panel { padding: 1.5rem; }

h2, .panel__heading {
  font-family: var(--sans);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 1.25rem;
}

.panel__heading { font-size: 1.25rem; margin-bottom: 0.25rem; }

.lede {
  font-size: 1rem;
  line-height: 1.625;
  color: var(--text-muted);
  margin: 0 0 2rem;
}

/* Eyebrow above a heading — the dapp's .section-label. */
.section-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

.panel__sub {
  margin: 0 0 1.5rem;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

/* ---------------- Swap legs ---------------- */

.leg { position: relative; }

.leg__label { display: block; margin-bottom: 0.5rem; }

.leg__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.875rem;
}

.leg__row:focus-within { border-color: var(--border-strong); }

.leg__amount {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  color: var(--text);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.leg__amount::placeholder { color: var(--text-muted); }
.leg__amount:focus { outline: none; }

.leg__amount--out {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.leg__note {
  margin: 0.5rem 0 0;
  min-height: 1.125rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.leg__note[data-tone="error"] { color: var(--negative); }

/* ---------------- Token picker ---------------- */

.picker {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem 0.625rem;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}

.picker--static { cursor: default; }
button.picker:hover { background: var(--surface-hover); border-color: var(--border-strong); }

.picker__symbol { font-weight: 600; letter-spacing: 0.01em; }
.picker__chain { font-size: 0.6875rem; color: var(--text-muted); }
.picker__caret { color: var(--text-muted); }

.menu {
  position: absolute;
  z-index: 20;
  top: calc(100% - 1.25rem);
  right: 0;
  width: min(23rem, 100%);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.5rem;
}

.menu__search {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.625rem;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.8125rem;
}

.menu__search:focus { border-color: var(--accent); outline: none; }

.menu__list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  max-height: 16rem;
  overflow-y: auto;
}

.menu__item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  background: none;
  border: 0;
  border-radius: var(--radius);
  padding: 0.5rem 0.625rem;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
}

.menu__item:hover,
.menu__item[aria-selected="true"] { background: var(--surface-hover); }

.menu__item b { font-weight: 600; }
.menu__item span { color: var(--text-muted); font-size: 0.75rem; }
.menu__empty { padding: 0.75rem 0.625rem; color: var(--text-muted); font-size: 0.8125rem; }

/* ---------------- Direction flip ---------------- */

.divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.divider__flip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.25rem 0.75rem;
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  cursor: pointer;
}

.divider__flip:hover { border-color: var(--accent); color: var(--text); }

/* ---------------- Routing ---------------- */

.routing { margin: 1.5rem 0 0; padding: 0; border: 0; }
.routing__legend { padding: 0; margin-bottom: 0.5rem; }

.option {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.7rem 0.875rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

.option + .option { margin-top: 0.5rem; }
.option:hover { background: var(--surface-hover); }
.option:has(input:checked) { border-color: var(--accent); }
.option input { margin-top: 0.3rem; accent-color: var(--accent); }
.option__body { display: block; }
.option__name { display: block; font-weight: 600; font-size: 0.8125rem; }
.option__detail { display: block; color: var(--text-muted); font-size: 0.75rem; }

.toggle {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
}

.toggle input { margin-top: 0.15rem; accent-color: var(--accent); }

/* ---------------- Fields ---------------- */

.field { margin-top: 1.5rem; }
.field__label { display: block; margin-bottom: 0.5rem; }

.field__input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.625rem 0.75rem;
  color: var(--text);
  font-size: 0.875rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.field__input:focus { border-color: var(--accent); outline: none; }
.field__input::placeholder { font-family: var(--sans); color: var(--text-muted); }

.field__note {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.field__note[data-tone="error"] { color: var(--negative); }

/* ---------------- Actions ---------------- */

/* Matches the dapp's .btn + .btn-primary exactly. */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.625rem 1.25rem;
  background: #ffffff;
  color: #08090a;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.cta:hover:not(:disabled) { background: var(--text); }

.cta:disabled {
  background: var(--surface-hover);
  border-color: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Matches .btn + .btn-secondary. */
.ghost,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.ghost { width: 100%; margin-top: 0.75rem; }
/* A class, not a style attribute: style-src 'self' blocks inline styles. */
.btn-secondary--spaced { margin-top: 2rem; }
.ghost:hover, .btn-secondary:hover { background: var(--surface-hover); }

.next-step {
  display: block;
  margin-top: 1.5rem;
  padding: 0.7rem 1rem;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.next-step:hover { background: var(--surface-hover); }
.next-step[hidden] { display: none; }

/* ---------------- Support ---------------- */

.support {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.support__text {
  margin: 0 0 0.875rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.support__row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
}

.support__id {
  flex: 1;
  min-width: 0;
  align-self: center;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  word-break: break-all;
  color: var(--text);
}

.support__copy {
  flex-shrink: 0;
  align-self: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.35rem 0.65rem;
  color: var(--text-secondary);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}

.support__copy:hover { border-color: var(--border-strong); color: var(--text); }

.support__link { width: 100%; margin-top: 0.75rem; }

.fineprint__link { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.fineprint__link:hover { color: var(--text); }

.fineprint {
  margin: 1rem 0 0;
  font-size: 0.6875rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ---------------- Banners ---------------- */

.banner {
  margin-top: 1.25rem;
  padding: 0.7rem 0.875rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
}

.banner--error {
  border: 1px solid var(--negative);
  background: var(--bg);
  color: var(--negative);
}

/* ---------------- Deposit ---------------- */

.deposit {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.75rem 0.875rem;
}

.deposit__address {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  word-break: break-all;
  color: var(--text);
}

.deposit__copy {
  flex-shrink: 0;
  align-self: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem 0.7rem;
  color: var(--text-secondary);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}

.deposit__copy:hover { border-color: var(--border-strong); color: var(--text); }

.deposit__tag {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--warning);
  border-radius: var(--radius);
  font-size: 0.75rem;
  color: var(--warning);
}

/* ---------------- Facts ---------------- */

.facts { margin: 1.5rem 0 0; }

/* Mirrors .spec-table: uppercase muted row headers, hairline row rules. */
.facts { border-top: 1px solid var(--border); }

.fact {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.8125rem;
}

.fact:last-child { border-bottom: none; }
.fact dt { flex-shrink: 0; align-self: center; }
.fact dd { margin: 0; text-align: right; min-width: 0; word-break: break-all; color: var(--text); }

.spec-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.spec-table th {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  color: var(--text-muted);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
}
.spec-table td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--border); text-align: right; color: var(--text); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: none; }

/* ---------------- Progress rail ---------------- */

.rail {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0 0 0 1.125rem;
}

.rail__step {
  position: relative;
  padding: 0 0 1rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.rail__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 0.85rem;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.rail__dot {
  position: absolute;
  left: -1rem;
  top: 0.4rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
}

.rail__step[data-state="done"] { color: var(--text-secondary); }
.rail__step[data-state="done"] .rail__dot { background: var(--text-secondary); border-color: var(--text-secondary); }
.rail__step[data-state="done"]:not(:last-child)::before { background: var(--border-strong); }

.rail__step[data-state="current"] { color: var(--text); font-weight: 600; }
.rail__step[data-state="current"] .rail__dot { background: var(--accent); border-color: var(--accent); }

.rail__step[data-state="complete"] { color: var(--positive); font-weight: 600; }
.rail__step[data-state="complete"] .rail__dot { background: var(--positive); border-color: var(--positive); }

.rail__step[data-state="failed"] { color: var(--negative); font-weight: 600; }
.rail__step[data-state="failed"] .rail__dot { background: var(--negative); border-color: var(--negative); }

.rail__step[hidden] { display: none; }

.status {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

/* ---------------- Footer ---------------- */

.footer {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem clamp(2rem, 6vw, 4rem);
  font-size: 0.6875rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.footer p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}