/* ------------------------------------------------------------------
   Alchemy Lab — design tokens & base
   No JavaScript anywhere: every interaction is a link, a form post,
   a <details> element or a CSS-only state.
   ------------------------------------------------------------------ */

/* ---------- fonts: self-hosted (no request to Google). Variable woff2, latin + latin-ext.
   Source: Fontsource 5.3 builds of Outfit, Nunito, JetBrains Mono — SIL Open Font License 1.1 (public/fonts/licenses). ---------- */
@font-face { font-family: "Outfit"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/outfit-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/outfit-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/outfit-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/outfit-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-display: swap; font-weight: 200 1000; src: url("../fonts/nunito-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/nunito-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-display: swap; font-weight: 200 1000; src: url("../fonts/nunito-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/nunito-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Nunito"; font-style: italic; font-display: swap; font-weight: 200 1000; src: url("../fonts/nunito-latin-ext-wght-italic.woff2") format("woff2-variations"), url("../fonts/nunito-latin-ext-wght-italic.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: italic; font-display: swap; font-weight: 200 1000; src: url("../fonts/nunito-latin-wght-italic.woff2") format("woff2-variations"), url("../fonts/nunito-latin-wght-italic.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800; src: url("../fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800; src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --bg: #07140F;
  --bg-2: #0A1A14;
  --panel: #0D1F19;
  --line: #1F3B31;
  --line-2: #2E5245;
  --row: #142A22;
  --text: #E3EEE6;
  --text-strong: #F2F8F4;
  --muted: #A9C7B8;
  --muted-2: #8FB3A2;
  --faint: #5F8574;
  --mint: #58D3A4;
  --mint-2: #8BE9C4;
  --copper: #C97B3A;
  --copper-2: #F0B07A;
  --danger: #E07A6B;
  --warn-bg: #1A1A10;
  --warn-line: #3B3A2C;
  --accent: var(--mint);
  --on-accent: #06231A;

  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", Menlo, monospace;

  --radius: 10px;
  --radius-lg: 18px;
  --shell: 1200px;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--mint); text-decoration: none; }
a:hover { color: var(--mint-2); }

input, select, textarea, button { font-family: inherit; }
input::placeholder, textarea::placeholder { color: var(--faint); }

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 500; color: var(--text-strong); }
p { margin: 0; }

.shell { max-width: var(--shell); width: 100%; margin: 0 auto; padding-inline: 16px; }

/* ---------- typography helpers ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--copper-2);
}
.eyebrow--mint { color: var(--mint); }
.eyebrow--danger { color: var(--danger); }
.label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.mono { font-family: var(--font-mono); }
.lead { font-size: 20px; color: var(--muted); max-width: 720px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.copper { color: var(--copper-2); }
.mint { color: var(--mint); }
.danger { color: var(--danger); }
.h1 { font-size: 44px; line-height: 1.1; }
.h1--hero { font-size: 56px; }
.h2 { font-size: 36px; }
.h3 { font-size: 22px; }
.h4 { font-size: 18px; }

/* ---------- header / footer ---------- */
.site-header {
  padding: 20px 16px;
  border-bottom: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  max-width: var(--shell); width: 100%; margin: 0 auto;
}
.brand { display: flex; align-items: center; color: var(--text); }
.brand:hover .logo__word { color: var(--text-strong); }
.logo__word { color: var(--text-strong); }
.site-footer .logo { color: var(--muted-2); }
.site-nav { display: flex; flex-wrap: wrap; gap: 28px; font-size: 17px; }
.site-nav a[aria-current="page"] { color: var(--text-strong); border-bottom: 1px solid var(--mint); }
.batch-chip { font-size: 15px; color: var(--muted-2); }
.batch-chip strong { font-family: var(--font-mono); font-weight: 500; color: var(--text-strong); }

.site-footer { padding: 56px 16px 28px; border-top: 1px solid var(--line); margin-top: auto; background: var(--bg-2); }
.site-footer__grid {
  max-width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 40px;
}
.site-footer nav a { color: var(--muted); font-size: 16px; }
.site-footer nav a:hover { color: var(--text-strong); }
.site-footer__bottom {
  max-width: var(--shell); margin: 36px auto 0; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: 14px; color: var(--faint); font-family: var(--font-mono); letter-spacing: .02em;
}
.onion { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
/* partner dashboard: secrets shown once */
.copy-box code.secret, .secret { font-size: clamp(18px, 2.4vw, 26px); letter-spacing: .08em; color: var(--text-strong); word-break: break-all; user-select: all; }
.site-footer__pairs { max-width: var(--shell); margin: 32px auto 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-size: 14px; }
.site-footer__pairs .label { margin-right: 6px; }
.site-footer__pairs a { color: var(--muted-2); white-space: nowrap; }
.site-footer__pairs a:hover { color: var(--mint); }
.onion > svg, .onion > span { flex: 0 0 auto; }
.onion__addr { color: var(--muted); user-select: all; overflow-wrap: anywhere; }
.onion__addr:hover { color: var(--mint); }
.social {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted);
}
.social:hover { color: var(--on-accent); background: var(--mint); border-color: var(--mint); }

/* ---------- layout primitives ---------- */
.stack { display: flex; flex-direction: column; }
.stack-xs { gap: 6px; } .stack-sm { gap: 10px; } .stack-md { gap: 18px; } .stack-lg { gap: 28px; } .stack-xl { gap: 40px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.row--between { justify-content: space-between; }
.row--end { align-items: flex-end; }
.split { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px; }
.split__main { flex: 1 1 560px; min-width: 0; }
.split__side { flex: 1 1 320px; min-width: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.section { padding: 72px 0; }
.section--band { border-top: 1px solid var(--line); background: var(--bg-2); }
.page { padding: 56px 16px 80px; }
.center { text-align: center; align-items: center; }

/* ---------- panels ---------- */
.panel {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
}
.panel--raised { box-shadow: 0 0 0 1px rgba(88,211,164,.08), 0 30px 60px rgba(0,0,0,.5); }
.panel--warn { border-color: var(--warn-line); box-shadow: 0 0 0 1px rgba(240,176,122,.12), 0 30px 60px rgba(0,0,0,.5); }
.panel--danger { border-color: #3B2C2C; box-shadow: 0 0 0 1px rgba(224,122,107,.12), 0 30px 60px rgba(0,0,0,.5); }
.panel--sm { padding: 28px; }
.panel--xs { padding: 22px 24px; }
.panel--quiet { background: var(--bg-2); }
.well { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.well--mint { border-left: 4px solid var(--mint); }
.well--copper { border-left: 4px solid var(--copper); }
.well--outline-mint { border-color: var(--mint); }
.well--outline-danger { border-color: var(--danger); }
.notice {
  padding: 16px 18px; border-radius: 10px; display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--warn-line); background: var(--warn-bg); font-size: 16px;
}
.notice svg { flex: 0 0 auto; margin-top: 2px; }

/* ---------- stats ---------- */
.stat { padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); display: flex; flex-direction: column; gap: 4px; }
.stat__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.stat__value { font-size: 28px; font-weight: 500; color: var(--text-strong); }

/* ---------- definition lists ---------- */
.kv { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; font-size: 15px; color: var(--muted-2); }
.kv dt, .kv dd { margin: 0; }
.kv dd { text-align: right; color: var(--text); }
.kv--boxed { padding: 20px 24px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; font-size: 16px; }
.kv--divided { border-top: 1px dashed var(--line); padding-top: 14px; }

/* ---------- pills & chips ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--copper); color: var(--copper-2);
}
.pill--mono { font-family: var(--font-mono); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--copper); display: inline-block; }
.dot--mint { background: var(--mint); } .dot--copper { background: var(--copper); } .dot--blue { background: #8FB0D4; } .dot--violet { background: #B48CD4; }
.tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; color: var(--muted); }

/* ---------- buttons (links styled as buttons; forms post) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 22px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
  border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; text-decoration: none;
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--mint-2); color: var(--on-accent); }
.btn[disabled], .btn.is-busy { opacity: .6; cursor: progress; pointer-events: none; }
.btn.is-busy svg { animation: btn-spin 1.1s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn--ghost { background: transparent; border-color: var(--line-2); color: var(--muted); font-weight: 500; }
.btn--ghost:hover { color: var(--text-strong); border-color: var(--muted-2); }
.btn--outline { background: transparent; border-color: var(--mint); color: var(--mint); font-weight: 600; }
.btn--outline:hover { color: var(--mint-2); border-color: var(--mint-2); }
.btn--pill { border-radius: 999px; min-height: 44px; padding: 0 20px; font-size: 14px; font-weight: 500; letter-spacing: .06em; }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 13px; }
.btn--block { width: 100%; }
.btn--choice {
  min-height: 60px; justify-content: space-between; text-transform: none; letter-spacing: 0; font-weight: 400; font-family: var(--font-body);
}
.btn--choice .btn__title { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; display: block; }
.btn--choice .btn__sub { font-size: 14px; display: block; opacity: .85; }
.icon-btn {
  width: 40px; height: 40px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--panel); color: var(--mint); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.icon-btn--round { width: 44px; height: 44px; border-radius: 50%; border-color: var(--mint); }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.input {
  width: 100%; min-height: 48px; padding: 0 14px; font-size: 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--text); outline: none;
}
.input:focus { border-color: var(--mint); }
.input--mono { font-family: var(--font-mono); }
.input--lg { min-height: 54px; font-size: 18px; }
.textarea { min-height: 96px; padding: 12px 14px; resize: vertical; }
.select {
  min-height: 44px; padding: 0 14px; font-size: 16px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text);
}
.amount-row { display: flex; align-items: center; gap: 12px; }
.amount-row .select { flex: 0 0 auto; max-width: 54%; }
.amount {
  flex: 1 1 auto; min-width: 0; width: 0; font-size: clamp(20px, 2.1vw + 10px, 30px); font-weight: 500;
  font-variant-numeric: tabular-nums; text-overflow: ellipsis;
  background: transparent; border: none; color: var(--text-strong); outline: none; padding: 0;
}
.amount--copper { color: var(--copper-2); }
/* Long amounts get smaller instead of being cut ("0.000734612 BTC" must stay readable next to the select) */
.amount--md { font-size: calc(clamp(20px, 2.1vw + 10px, 30px) * .87); }
.amount--sm { font-size: calc(clamp(20px, 2.1vw + 10px, 30px) * .76); }
.amount--xs { font-size: calc(clamp(20px, 2.1vw + 10px, 30px) * .64); }
/* Without JS nothing can measure and correct, so the steps are more cautious (the widest select is "USDC · Ethereum") */
.no-js .amount--md { font-size: calc(clamp(20px, 2.1vw + 10px, 30px) * .74); }
.no-js .amount--sm { font-size: calc(clamp(20px, 2.1vw + 10px, 30px) * .6); }
.no-js .amount--xs { font-size: calc(clamp(20px, 2.1vw + 10px, 30px) * .5); }

/* Live estimate in progress: the distillate field hides its figure and three drops condense in the flask.
   JS toggles .is-quoting on the amount row; without JS it never appears. */
.amount-row { position: relative; }
.quote-loader { display: none; position: absolute; left: 0; top: 50%; transform: translateY(-50%); align-items: flex-end; gap: 7px; height: 22px; pointer-events: none; }
.quote-loader i { display: block; width: 9px; height: 9px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--copper-2); opacity: .35; animation: drop 1.1s ease-in-out infinite; }
.quote-loader i:nth-child(2) { animation-delay: .18s; }
.quote-loader i:nth-child(3) { animation-delay: .36s; }
.quote-loader b { margin-left: 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.is-quoting .quote-loader { display: flex; }
.is-quoting .amount--copper { color: transparent; }
.is-quoting .amount--copper::placeholder { color: transparent; }
@keyframes drop { 0%, 100% { transform: translateY(0) scale(.85); opacity: .35; } 50% { transform: translateY(-7px) scale(1); opacity: 1; } }
.divider-swap { display: flex; align-items: center; gap: 12px; margin: -8px 0; }
.divider-swap::before, .divider-swap::after { content: ""; flex: 1 1 auto; border-top: 1px dashed var(--line); }
.check { display: flex; gap: 12px; align-items: flex-start; }
.check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--mint); flex: 0 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.copy-box {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
}
.copy-box code { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: 15px; color: var(--text); word-break: break-all; user-select: all; }

/* ---------- progress / hold ---------- */
.hold { display: flex; flex-direction: column; gap: 8px; }
.hold__meta { display: flex; justify-content: space-between; font-size: 15px; color: var(--muted-2); }
.hold__meta strong { color: var(--copper-2); font-weight: 500; font-family: var(--font-mono); }
.bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar__fill { height: 100%; background: var(--copper); width: var(--pct, 0%); }

/* ---------- stepper ---------- */
.stepper { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 12px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; }
.stepper li { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted-2); }
.stepper li.is-done { border-color: var(--mint); color: var(--mint); }
.stepper li.is-current { background: var(--copper); border-color: var(--copper); color: var(--on-accent); }
.stepper li.is-current--ok { background: var(--mint); border-color: var(--mint); }
.stepper li.is-current--warn { background: var(--copper-2); border-color: var(--copper-2); }
.stepper li.is-current--danger { background: var(--danger); border-color: var(--danger); }
.stepper--center { justify-content: center; }

/* ---------- vials (test tubes) ---------- */
.vials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: end; }
.vial-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }

.vial {
  --vc: var(--line-2);                 /* glass + liquid colour, set per tone */
  --vw: 44px;                          /* outer width */
  --vh: 150px;                         /* total height */
  --lip: 9px;
  position: relative; width: var(--vw); height: var(--vh);
  display: flex; flex-direction: column; align-items: center;
}
.vial__lip {
  width: 100%; height: var(--lip); flex: 0 0 auto;
  border: 2px solid var(--vc); border-radius: 3px;
  background: var(--bg); position: relative; z-index: 1;
}
.vial__glass {
  position: relative; width: calc(var(--vw) - 10px); flex: 1 1 auto; margin-top: -2px;
  border: 2px solid var(--vc); border-top: none;
  border-radius: 0 0 calc(var(--vw) / 2) calc(var(--vw) / 2);
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%, rgba(255,255,255,0) 70%, rgba(255,255,255,.08));
  overflow: hidden;
}
.vial__liquid {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--level, 0%);
  background: var(--vc);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.28);          /* meniscus */
  transition: height 1.4s cubic-bezier(.3,.7,.2,1), background-color .6s ease;   /* lab.js changes --level: the liquid rises */
}
.vial__lip, .vial__glass { transition: border-color .6s ease; }

/* --- Motion -------------------------------------------------------------------------------
   CSS only, for everyone:
     - copper vial (= the stage in progress): the surface ripples and bubbles rise through it
     - a level change glides instead of jumping (transition above)
   JS only (html.js), because without JS the page reloads every 15–30 s and would replay it:
     - vials fill from empty to their level when the page opens, one after the other
     - a flash of light when a vial reaches 100 % (.is-filled, set by lab.js)            */

/* rippling surface: a strip of small arcs in the liquid colour, sliding sideways */
.vial--copper .vial__liquid::before {
  content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 4px;
  background: radial-gradient(4px 3px at 4px 4px, var(--vc) 95%, transparent 100%) 0 0 / 8px 4px repeat-x;
  animation: vial-ripple 1.8s linear infinite;
}
@keyframes vial-ripple { to { background-position: 8px 0; } }

/* bubbles */
.vial__bubbles { display: none; position: absolute; inset: 0; pointer-events: none; }
.vial--copper .vial__bubbles { display: block; }
.vial__bubbles i {
  position: absolute; bottom: 0; width: max(3px, calc(var(--vw) * .1)); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.14);
  opacity: 0; animation: vial-bubble 2.6s ease-in infinite;
}
.vial__bubbles i:nth-child(1) { left: 24%; }
.vial__bubbles i:nth-child(2) { left: 56%; animation-delay: .9s;  animation-duration: 3.1s; }
.vial__bubbles i:nth-child(3) { left: 38%; animation-delay: 1.7s; animation-duration: 2.2s; }
@keyframes vial-bubble {
  0%   { bottom: 4%;  opacity: 0; transform: translateX(0); }
  15%  { opacity: 1; }
  50%  { transform: translateX(2px); }
  85%  { opacity: .9; }
  100% { bottom: 88%; opacity: 0; transform: translateX(-1px); }
}

/* JS: fill on open, staggered left to right */
.js .vial__liquid { animation: vial-fill 1.6s cubic-bezier(.3,.7,.2,1) backwards; animation-delay: calc(var(--i, 0) * .35s + .15s); }
.vials > :nth-child(2), .process > :nth-child(2), .vial-row > :nth-child(2) { --i: 1; }
.vials > :nth-child(3), .process > :nth-child(3), .vial-row > :nth-child(3) { --i: 2; }
.vial-row > :nth-child(4) { --i: 3; }
@keyframes vial-fill { from { height: 0; } }
/* lab.js adds .is-seen when a group of vials scrolls into view: until then the fill waits at empty,
   so vials below the fold (home page) fill in front of the visitor instead of off-screen. */
.js .vial:not(.is-seen) .vial__liquid { animation-play-state: paused; }
/* the home demo drives its own levels */
.js [data-demo-batch] .vial__liquid { animation: none; }
.pill--done { border-color: var(--mint); color: var(--mint); transition: color .4s, border-color .4s; }
/* timeline refreshed by lab.js: the new state fades in */
[data-bind-html].is-updated .log__mark--active, [data-bind-html].is-updated .log__mark--active ~ * { animation: log-in .6s ease-out; }
@keyframes log-in { from { opacity: .3; } }
.pill--done .dot { background: var(--mint); }

/* JS: a vial just reached 100 % */
.vial.is-filled .vial__glass { animation: vial-glow 1.4s ease-out; }
@keyframes vial-glow {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vc) 70%, transparent); }
  100% { box-shadow: 0 0 22px 6px transparent; }
}
.vial__ticks {
  position: absolute; right: 3px; top: 14%; bottom: 22%; width: 5px; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--vc) 0 1px, transparent 1px 11px);
  opacity: .45; mix-blend-mode: screen;
}

.vial--mint   { --vc: var(--mint); }
.vial--copper { --vc: var(--copper); }
.vial--blue   { --vc: #8FB0D4; }
.vial--empty  { --vc: var(--line-2); }
.vial--empty .vial__glass { background: none; }

.vial--sm { --vw: 36px; --vh: 110px; --lip: 8px; }
.vial--xs { --vw: 26px; --vh: 72px;  --lip: 6px; }

.vial-wrap__name { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; color: var(--muted-2); }
.vial--mint + .vial-wrap__name { color: var(--mint); }
.vial--copper + .vial-wrap__name { color: var(--copper-2); }
.vial-wrap__sub { font-size: 14px; color: var(--muted-2); }

/* decorative row on the home hero: staggered heights */
.vial-row { display: flex; align-items: flex-end; gap: 16px; }
.vial-row--stagger .vial:nth-child(1) { --vh: 120px; }
.vial-row--stagger .vial:nth-child(2) { --vh: 150px; }
.vial-row--stagger .vial:nth-child(3) { --vh: 96px; }
.vial-row--stagger .vial:nth-child(4) { --vh: 135px; }

/* ---------- timeline / logs ---------- */
.log { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.log li { position: relative; margin-left: 9px; padding-left: 24px; padding-bottom: 20px; border-left: 2px solid var(--mint); }
.log li:last-child { padding-bottom: 0; border-left-color: transparent; }
.log li.is-pending { border-left-style: dashed; border-left-color: var(--line-2); }
.log__mark {
  position: absolute; left: -11px; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--mint); display: flex; align-items: center; justify-content: center;
}
.log__mark--active { background: var(--copper); border-color: var(--copper); }
.log__mark--todo { border-color: var(--line-2); }
.log__title { color: var(--text-strong); }
.log__meta { font-size: 14px; color: var(--muted-2); }
.log-compact { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 16px; }
.log-compact li { display: flex; gap: 12px; }
.log-compact time { font-family: var(--font-mono); color: var(--muted-2); flex: 0 0 52px; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 17px; }
.table th { text-align: left; padding: 16px 24px; border-bottom: 1px solid var(--line); font-weight: 500; color: var(--muted-2); font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.table td { padding: 16px 24px; border-bottom: 1px solid var(--row); }
.table tr:last-child td { border-bottom: none; }
.table th.num, .table td.num { text-align: right; }
.table td.strong { color: var(--text-strong); }
.table td.muted { color: var(--muted); }
.delta-up { color: var(--mint); } .delta-down { color: var(--copper-2); }

/* ---------- details (CSS-only accordion) ---------- */
.acc { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 0 22px; }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; font-size: 18px; color: var(--text-strong); cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-family: var(--font-mono); color: var(--mint); font-size: 22px; line-height: 1; }
.acc[open] summary::after { content: "−"; }
.acc p { margin: 0 0 20px; color: var(--muted); }

/* ---------- filter chips (CSS-only via radio inputs) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips input { position: absolute; opacity: 0; width: 0; height: 0; }
.chips label {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; cursor: pointer;
  font-family: var(--font-display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line-2); border-radius: 999px; color: var(--muted);
}
.chips input:checked + label { background: var(--mint); border-color: var(--mint); color: var(--on-accent); }
.chips input:focus-visible + label { outline: 2px solid var(--mint-2); outline-offset: 2px; }

/* ---------- pagination ---------- */
.pager { display: flex; gap: 8px; }
.pager a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--muted); }
.pager a[aria-current="page"] { background: var(--mint); border-color: var(--mint); color: var(--on-accent); }

/* ---------- codex side nav ---------- */
.toc { display: flex; flex-direction: column; gap: 4px; font-size: 16px; }
.toc a { padding: 10px 14px; border-left: 2px solid var(--line); color: var(--muted); }
.toc a:hover, .toc a.is-active { border-left-color: var(--mint); color: var(--text-strong); }

/* ---------- QR placeholder box ---------- */
.qr { padding: 14px; background: var(--text-strong); border-radius: 10px; display: inline-block; line-height: 0; }

/* ---------- home: hero facts, live strip, process ---------- */
.hero-facts { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 17px; color: var(--muted); }
.hero-facts li { display: flex; align-items: center; gap: 12px; }
.hero-facts strong { color: var(--text-strong); font-weight: 600; }

.ticker {
  display: flex; align-items: center; gap: 18px; max-width: 100%;
  padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 13.5px; letter-spacing: .01em; color: var(--muted-2);
}
.ticker__status { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }
.ticker__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); animation: ticker-pulse 2.4s ease-in-out infinite; }
.ticker__viewport {
  flex: 1 1 auto; min-width: 0; display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__track { flex: 0 0 auto; display: flex; gap: 36px; padding-right: 36px; white-space: nowrap; animation: ticker-scroll var(--ticker-speed, 42s) linear infinite; }
.ticker__item { display: inline-flex; align-items: baseline; gap: 8px; }
.ticker__amt { color: var(--text); }
.ticker__arrow { color: var(--copper); }
.ticker__to { color: var(--muted); }
.ticker__ago { color: var(--faint); font-size: 12px; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes ticker-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(88,211,164,.35); } 50% { box-shadow: 0 0 0 5px rgba(88,211,164,0); } }
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .ticker__track[data-activity-clone] { display: none; }
  .ticker__viewport { overflow-x: auto; scrollbar-width: none; }
  .ticker__dot { animation: none; }
  .quote-loader i { animation: none; opacity: .8; }
  .vial__liquid, .vial__liquid::before, .vial.is-filled .vial__glass { animation: none !important; transition: none; }
  .vial__bubbles { display: none !important; }
}

.process { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
.process__step { position: relative; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); display: flex; flex-direction: column; gap: 14px; }
.process__step + .process__step::before {
  content: ""; position: absolute; left: -24px; top: 52px; width: 24px; border-top: 1px dashed var(--line-2);
}
.process__head { display: flex; align-items: flex-end; justify-content: space-between; }
.process__n { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1; color: var(--muted-2); opacity: .55; }

/* ---------- legal pages ---------- */
.legal { max-width: 760px; }
.legal h2 { font-size: 24px; margin-top: 8px; }
.legal h3 { font-size: 18px; color: var(--text-strong); }
.legal p, .legal li { color: var(--muted); font-size: 17px; line-height: 1.6; }
.legal ul, .legal ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.legal strong { color: var(--text-strong); font-weight: 600; }
.legal .placeholder { color: var(--copper-2); font-family: var(--font-mono); font-size: 15px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--row); vertical-align: top; color: var(--muted); }
.legal th { color: var(--muted-2); font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
.legal-meta { font-family: var(--font-mono); font-size: 13px; color: var(--faint); }

/* ---------- batch pages: compact head (deposit, status) ---------- */
.page--tight { padding-top: 28px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.h1--compact { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15; }
@media (max-width: 640px) { .page--tight { padding-top: 16px; } }

/* ---------- SEO pair pages (/swap, /swap/btc-to-xmr) ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--faint); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--mint); }
.breadcrumb [aria-current] { color: var(--text); }
.pair-intro p + p { margin-top: 0; }
.pair-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); row-gap: 12px; }
.pair-facts dd { text-align: left; color: var(--text-strong); }
.chips-static { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-static .tag, .pair-links .tag { color: var(--text); text-decoration: none; transition: border-color .15s, color .15s; }
.chips-static .tag:hover, .pair-links .tag:hover { border-color: var(--mint); color: var(--mint); }
.pair-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.pair-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.pair-list a { display: block; padding: 8px 10px; margin: 0 -10px; border-radius: 8px; color: var(--muted); font-size: 16px; }
.pair-list a:hover { background: var(--bg); color: var(--text-strong); }

/* ---------- disclosure used as a button (cancel batch) ---------- */
.disclosure > summary { list-style: none; cursor: pointer; }
.disclosure > summary::-webkit-details-marker { display: none; }

/* Deposit page: "Abandon batch" beside the primary button; opened, it takes the whole row */
.disclosure--abandon { flex: 0 1 200px; min-width: 0; }
.disclosure--abandon[open] { flex: 1 1 100%; }
.abandon-confirm { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; }
.abandon-confirm__text { flex: 1 1 280px; min-width: 0; }
.abandon-confirm__btn { flex: 0 0 auto; width: auto; white-space: nowrap; }
@media (max-width: 480px) { .abandon-confirm__btn { flex: 1 1 100%; white-space: normal; } }

/* ---------- developers page ---------- */
.dev-aside { flex: 1 1 240px; min-width: 0; max-width: 300px; position: sticky; top: 24px; align-self: flex-start; }
.dev-doc { flex: 999 1 560px; min-width: 0; }
.dev-doc p, .dev-doc li { color: var(--muted); font-size: 17px; line-height: 1.6; }
.dev-doc strong { color: var(--text-strong); font-weight: 600; }
.dev-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.dev-inline { font-family: var(--font-mono); font-size: 14px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
.dev-wrap { word-break: break-word; font-size: 14px; color: var(--text); }
.dev-code { margin: 0; padding: 18px 20px; background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--mint); border-radius: 10px; overflow-x: auto; font-family: var(--font-mono); font-size: 14px; line-height: 1.65; color: var(--text); }
.dev-c { color: var(--faint); }
.dev-table { min-width: 0; font-size: 15px; }
.dev-table td { vertical-align: top; }
@media (max-width: 900px) { .dev-aside { position: static; max-width: none; } }

/* ---------- progressive enhancement ---------- */
.js .js-hide { display: none !important; }
.icon-btn.is-copied { border-color: var(--mint); background: var(--mint); color: var(--on-accent); }
[data-copy] { position: relative; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process { grid-template-columns: 1fr; }
  .process__step + .process__step::before { display: none; }
  .h1--hero { font-size: 44px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .h1 { font-size: 30px; }
  .h1--hero { font-size: 34px; }
  .h2 { font-size: 26px; }
  .lead { font-size: 17px; }
  .section { padding: 44px 0; }
  .page { padding: 28px 16px 48px; }
  .panel { padding: 20px 18px; }
  .panel--sm, .panel--xs { padding: 18px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 12px; }
  .grid-3.vials, .vials { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .vial:not(.vial--sm):not(.vial--xs) { --vw: 36px; --vh: 120px; }
  .amount { font-size: 26px; }
  .amount--md, .no-js .amount--md { font-size: 22px; }
  .amount--sm, .no-js .amount--sm { font-size: 19px; }
  .amount--xs, .no-js .amount--xs { font-size: 16px; }
  .site-nav { gap: 18px; font-size: 16px; }
  .btn { width: 100%; }
  .stepper li { padding: 8px 12px; font-size: 12px; }
  .split { gap: 20px; }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .site-footer__grid > :first-child { grid-column: 1 / -1; }
  .process { grid-template-columns: 1fr; }
  .process__step + .process__step::before { display: none; }
}
/* Narrow phones: the asset select goes under the amount, so the amount gets the full width */
@media (max-width: 480px) {
  .amount-row { flex-wrap: wrap; row-gap: 10px; }
  .amount-row .amount { flex: 1 1 100%; width: auto; }
  .amount-row .select { flex: 1 1 100%; max-width: none; }
  .quote-loader { top: 18px; transform: none; }
}