/* Design tokens */

:root {
  --background: oklch(0.145 0 0);
  --foreground: oklch(1 0 0);
  --surface: oklch(0.178 0 0);
  --surface-2: oklch(0.21 0 0);
  --muted-foreground: oklch(0.68 0 0);
  /* Secondary text that is read as prose rather than scanned as a label.
     --muted-foreground only just clears AA on the page background (6.9:1),
     which is fine for a one-word field label and tiring for a paragraph;
     this clears AAA (9.9:1). */
  --text-muted: oklch(0.78 0 0);
  --accent: oklch(0.89 0.21 122);
  --border: oklch(0.32 0 0);
  --danger: #ff0000;
  --warning: oklch(0.84 0.16 78);

  --font-display: "Questrial", "Poppins", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --panel-bg: color-mix(in oklab, var(--background) 40%, transparent);

  --page-max: 1600px;
  --transition: 0.15s ease;
}

/* Reset + base */

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

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

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

button:disabled,
select:disabled {
  cursor: not-allowed;
}

select,
summary,
label[for] {
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Layout helpers */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--background);
}

.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.page-main {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 5rem 1.5rem;
}

.rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2rem 0 0;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  background-color: var(--surface);
}

.site-header__inner {
  position: relative;
}

.site-header__bar {
  display: flex;
  height: 74px;
  align-items: center;
  justify-content: space-between;
  padding-inline: 1rem;
}

.site-header__logo {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
  transition: opacity var(--transition);
}

.site-header__logo:hover {
  opacity: 0.8;
}

.site-header__mascot {
  height: 2.75rem;
  width: auto;
  flex-shrink: 0;
}

.site-header__wordmark {
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.025em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-header__cta {
  margin-left: 0.75rem;
  flex-shrink: 0;
}

.site-nav {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
}

.site-nav__link {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 0.5rem;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
  transition: color var(--transition);
}

.site-nav__link:hover {
  color: var(--foreground);
}

.site-nav__link.is-active {
  color: var(--accent);
}

.site-nav__link.is-active:hover {
  color: var(--foreground);
}

/* Footer */

.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--border);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  font-size: 13px;
  color: var(--muted-foreground);
}

.site-footer__mirrors,
.site-footer__link {
  display: none;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color var(--transition), text-decoration-color var(--transition);
}

.site-footer__link {
  letter-spacing: 0.05em;
}

.site-footer__mirrors:hover,
.site-footer__link:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.site-footer__social a {
  color: color-mix(in oklab, var(--foreground) 80%, transparent);
  transition: color var(--transition);
}

.site-footer__social a:hover {
  color: var(--accent);
}

/* Buttons + links */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--foreground);
  background-color: var(--foreground);
  color: var(--background);
  padding: 0.875rem 1.5rem;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-align: center;
  transition:
    background-color var(--transition),
    color var(--transition);
}

.btn:hover {
  background-color: transparent;
  color: var(--foreground);
}

.btn--block {
  display: block;
  width: 100%;
  padding-inline: 0;
}

.btn--sm {
  padding: 0.5rem 0.625rem;
  font-size: 10px;
  letter-spacing: 0.05em;
}

.btn--wide {
  padding-inline: 2rem;
}

.btn--wider {
  padding-inline: 2.5rem;
}

.btn--compact {
  padding: 0.75rem 2.5rem;
}

.btn--spaced {
  margin-top: 2.5rem;
}

.btn--ghost {
  background-color: transparent;
  color: var(--foreground);
}

.btn--ghost:hover {
  background-color: var(--foreground);
  color: var(--background);
}

/* .btn in the site green: the same solid fill that empties to an outline on
   hover, with the border holding the green while the fill is gone. */
.btn--accent {
  border-color: var(--accent);
  background-color: var(--accent);
  color: var(--background);
}

.btn--accent:hover {
  background-color: transparent;
  color: var(--accent);
}

.link-accent {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--transition);
}

.link-accent:hover {
  color: var(--foreground);
}

.link-plain {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition);
}

.link-plain:hover {
  color: var(--accent);
}

.link-plain--wide {
  text-underline-offset: 4px;
}

/* Page heading */

.page-heading__eyebrow {
  margin-bottom: 1rem;
  font-size: 15px;
  letter-spacing: 0.18em;
  color: var(--accent);
}

.page-heading__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.page-heading__subtitle {
  margin-top: 2rem;
  max-width: 48rem;
  font-size: 15px;
  line-height: 1.625;
  color: var(--muted-foreground);
}

.page-heading--centered {
  text-align: center;
}

.page-heading--centered .page-heading__subtitle {
  margin-inline: auto;
  text-align: center;
}

.section-eyebrow {
  font-size: 15px;
  letter-spacing: 0.18em;
  color: var(--accent);
}

.section-title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  line-height: 1.25;
}

.section-title__muted {
  color: var(--muted-foreground);
}

.section-h2 {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1.111;
}

/* Accordion */

.accordion {
  border-top: 1px solid var(--border);
}

.accordion__item {
  border-bottom: 1px solid var(--border);
}

.accordion__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  text-align: left;
  font-size: 15px;
  line-height: 1.625;
  list-style: none;
  transition: color var(--transition);
}

.accordion__summary::-webkit-details-marker {
  display: none;
}

.accordion__summary::marker {
  content: "";
}

.accordion__summary:hover {
  color: var(--accent);
}

.accordion__sign {
  flex-shrink: 0;
  margin-top: 0.125rem;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--accent);
}

.accordion__sign::after {
  content: "+";
}

.accordion__item[open] .accordion__sign::after {
  content: "–";
}

.accordion__panel {
  max-width: 56rem;
  padding-bottom: 1.25rem;
  font-size: 14px;
  line-height: 1.625;
  color: var(--muted-foreground);
}

.qa {
  display: block;
}

.qa__item {
  border-bottom: 1px solid var(--border);
}

.qa__item:last-child {
  border-bottom: 0;
}

.qa__summary {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 0;
  text-align: left;
  list-style: none;
  transition: color var(--transition);
}

.qa__summary::-webkit-details-marker {
  display: none;
}

.qa__summary::marker {
  content: "";
}

.qa__summary:hover {
  color: var(--accent);
}

.qa__q {
  color: var(--accent);
}

.qa__text {
  flex: 1;
  font-size: 14px;
  line-height: 1.625;
}

.qa__sign {
  color: var(--accent);
}

.qa__sign::after {
  content: "+";
}

.qa__item[open] .qa__sign::after {
  content: "–";
}

.qa__panel {
  display: flex;
  gap: 0.75rem;
  padding-bottom: 1.25rem;
}

.qa__a {
  color: var(--muted-foreground);
}

.qa__answer {
  flex: 1;
  font-size: 14px;
  line-height: 1.625;
  color: var(--muted-foreground);
}

/* Swap layout + hero */

.swap-layout {
  display: grid;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  padding: 3.5rem 1.5rem;
}

.swap-hero {
  order: 2;
}

.swap-panel-col {
  order: 1;
}

.swap-hero__top {
  position: relative;
}

.swap-hero__mascot {
  display: none;
  position: absolute;
  top: -1rem;
  right: 0;
  height: 340px;
  width: auto;
  pointer-events: none;
}

.swap-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.swap-hero__lede {
  margin-top: 2.5rem;
  max-width: 36rem;
  font-size: 15px;
  line-height: 1.625;
  color: var(--muted-foreground);
}

.swap-hero__stats {
  margin-top: 2rem;
  border-top: 1px solid var(--border);
  padding-top: 2rem;
}

.swap-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 2.5rem;
  row-gap: 2rem;
}

.swap-hero__stat-label {
  font-size: 15px;
  letter-spacing: 0.025em;
  color: var(--muted-foreground);
}

.swap-hero__stat-value {
  margin-top: 0.5rem;
  font-size: 17px;
}

/* Swap panel */

.swap-panel {
  width: 100%;
}

.swap-panel__tabs {
  --swap-tab-pad: 0.75rem;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.swap-panel__tab {
  border: 1px solid var(--border);
  background-color: var(--surface);
  color: var(--muted-foreground);
  padding: 1rem 0.5rem;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.05em;
  transition:
    background-color var(--transition),
    color var(--transition);
}

.swap-panel__tab:hover {
  background-color: var(--surface-2);
  color: var(--foreground);
}

.swap-panel__tab.is-active {
  border-color: var(--foreground);
  background-color: var(--foreground);
  color: var(--background);
}

.swap-panel__tab.is-active:hover {
  background-color: color-mix(in oklab, var(--foreground) 85%, transparent);
  color: var(--background);
}

/* Mode explainers. Mirrors the rate-tip pattern below: hover drives it for a
   mouse, the sr-only checkbox is what makes it reachable on a touchscreen
   where :hover never fires. */
.swap-panel__help {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  border: 1px solid var(--border);
  padding-inline: 0.375rem;
  font-size: 11px;
  color: var(--muted-foreground);
  cursor: pointer;
  user-select: none;
  transition:
    border-color var(--transition),
    color var(--transition);
}

.swap-panel__help--standard {
  right: calc(50% + var(--swap-tab-pad));
}

.swap-panel__help--noaml {
  right: var(--swap-tab-pad);
}

.swap-panel__help:hover,
#tab-tip-standard:focus-visible ~ .swap-panel__help--standard,
#tab-tip-noaml:focus-visible ~ .swap-panel__help--noaml,
#tab-tip-standard:checked ~ .swap-panel__help--standard,
#tab-tip-noaml:checked ~ .swap-panel__help--noaml {
  border-color: var(--foreground);
  color: var(--foreground);
  outline: none;
}

/* The selected tab inverts to a light background, so the glyph sitting on
   top of it has to invert with it. */
.swap-panel__help.is-on-active {
  border-color: color-mix(in oklab, var(--background) 45%, transparent);
  color: var(--background);
}

.swap-panel__help.is-on-active:hover,
#tab-tip-standard:focus-visible ~ .swap-panel__help--standard.is-on-active,
#tab-tip-noaml:focus-visible ~ .swap-panel__help--noaml.is-on-active,
#tab-tip-standard:checked ~ .swap-panel__help--standard.is-on-active,
#tab-tip-noaml:checked ~ .swap-panel__help--noaml.is-on-active {
  border-color: var(--background);
  color: var(--background);
}

.swap-tip {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  z-index: 20;
  border: 1px solid var(--border);
  background-color: var(--background);
  padding: 0.875rem 1rem;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--muted-foreground);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition),
    visibility var(--transition);
}

.swap-tip b {
  color: var(--foreground);
  font-weight: 400;
}

.swap-tip__title {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--foreground);
}

.swap-panel__help--standard:hover ~ .swap-tip--standard,
#tab-tip-standard:checked ~ .swap-tip--standard,
.swap-tip--standard:hover,
.swap-panel__help--noaml:hover ~ .swap-tip--noaml,
#tab-tip-noaml:checked ~ .swap-tip--noaml,
.swap-tip--noaml:hover {
  opacity: 1;
  visibility: visible;
}

.swap-panel__body {
  border-inline: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background-color: var(--panel-bg);
}

.swap-panel__content {
  padding: 1.5rem;
}

.swap-panel__footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem;
}

.swap-panel__note {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}

.escrow {
  margin-top: 1rem;
}

.escrow__line {
  font-size: 12px;
  letter-spacing: 0.025em;
}

.escrow__line + .escrow__line {
  margin-top: 0.25rem;
}

.escrow__dot,
.escrow__label {
  color: var(--accent);
}

.escrow__label {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.escrow__sub {
  font-size: 11px;
  letter-spacing: 0.025em;
  color: var(--muted-foreground);
}

/* Swap form */

.rate-tabs {
  --rate-tab-pad: 1rem;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.rate-tabs__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem var(--rate-tab-pad);
  padding-right: calc(var(--rate-tab-pad) + 1.75rem);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  transition:
    background-color var(--transition),
    color var(--transition);
}

.rate-tabs__label:hover {
  background-color: var(--surface);
  color: var(--foreground);
}

#rate-floating:checked ~ .rate-tabs__label--floating,
#rate-fixed:checked ~ .rate-tabs__label--fixed {
  background-color: var(--surface-2);
  color: var(--foreground);
}

#rate-floating:checked ~ .rate-tabs__label--floating:hover,
#rate-fixed:checked ~ .rate-tabs__label--fixed:hover {
  background-color: color-mix(in oklab, var(--surface-2) 60%, transparent);
}

.rate-tabs__marker {
  display: none;
}

#rate-floating:checked ~ .rate-tabs__label--floating .rate-tabs__marker,
#rate-fixed:checked ~ .rate-tabs__label--fixed .rate-tabs__marker {
  display: inline;
}

/* The toggle is a sibling of the rate label, not a child of it. Nested in
   the label, every tap on "?" switched the rate instead of explaining it. */
.rate-tabs__help {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  border: 1px solid var(--border);
  padding-inline: 0.375rem;
  font-size: 11px;
  color: var(--muted-foreground);
  cursor: pointer;
  user-select: none;
  transition:
    border-color var(--transition),
    color var(--transition);
}

.rate-tabs__help--floating {
  right: calc(50% + var(--rate-tab-pad));
}

.rate-tabs__help--fixed {
  right: var(--rate-tab-pad);
}

.rate-tabs__help:hover,
#rate-tip-floating:focus-visible ~ .rate-tabs__help--floating,
#rate-tip-fixed:focus-visible ~ .rate-tabs__help--fixed,
#rate-tip-floating:checked ~ .rate-tabs__help--floating,
#rate-tip-fixed:checked ~ .rate-tabs__help--fixed {
  border-color: var(--foreground);
  color: var(--foreground);
  outline: none;
}

.rate-tip {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  z-index: 20;
  border: 1px solid var(--border);
  background-color: var(--background);
  padding: 0.875rem 1rem;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--muted-foreground);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition),
    visibility var(--transition);
}

.rate-tip__title {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--foreground);
}

/* Hover keeps working for a mouse; the checkbox is what makes it reachable
   on a touchscreen, where :hover never fires. Visibility is driven by
   :checked alone - tying it to :focus-visible as well left the tip pinned
   open, because activating the label focuses the checkbox and the second
   tap could never close it again. Keyboard users toggle it with Space. */
.rate-tabs__help--floating:hover ~ .rate-tip--floating,
#rate-tip-floating:checked ~ .rate-tip--floating,
.rate-tip--floating:hover,
.rate-tabs__help--fixed:hover ~ .rate-tip--fixed,
#rate-tip-fixed:checked ~ .rate-tip--fixed,
.rate-tip--fixed:hover {
  opacity: 1;
  visibility: visible;
}

.swap-rows {
  display: flex;
  flex-direction: column;
  position: relative;
}

.amount-row {
  display: flex;
  min-height: 104px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--border);
  background-color: var(--surface);
  padding-inline: 1.5rem;
}

.amount-row__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
}

.amount-row__input {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  background-color: transparent;
  padding: 0;
  font: inherit;
  font-size: 17px;
  color: inherit;
  appearance: none;
  -moz-appearance: textfield;
}

.amount-row__input::-webkit-outer-spin-button,
.amount-row__input::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

.amount-row__input::placeholder {
  color: var(--muted-foreground);
}

.amount-row__input:focus {
  outline: none;
}

.amount-row:focus-within {
  border-color: var(--foreground);
}

.swap-flip {
  position: relative;
  z-index: 10;
  align-self: center;
  margin-block: -1rem;
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background-color: var(--background);
  color: var(--foreground);
  transition: border-color var(--transition);
}

.swap-flip:hover {
  border-color: var(--foreground);
}

.swap-flip--static {
  cursor: not-allowed;
  color: var(--muted-foreground);
}

.swap-flip--static:hover {
  border-color: var(--border);
}

#flip:checked ~ .swap-rows {
  flex-direction: column-reverse;
}

.coin-field {
  position: relative;
  display: flex;
  align-items: center;
  height: 46px;
  width: 224px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background-color: var(--background);
  transition: border-color var(--transition);
}

.coin-field:hover,
.coin-field:focus-within {
  border-color: var(--foreground);
}

.coin-field__select {
  height: 100%;
  width: 100%;
  appearance: none;
  background-color: transparent;
  border: 0;
  padding-left: 2.75rem;
  padding-right: 2rem;
  font-size: 13px;
  color: var(--foreground);
  color-scheme: dark;
}

.coin-field__select:focus {
  outline: none;
}

.coin-field__select option {
  background-color: var(--surface);
  color: var(--foreground);
}

.coin-field__icon {
  position: absolute;
  left: 1rem;
  pointer-events: none;
  display: none;
}

/* Only the selected coin's glyph is shown. CSS cannot correlate the checked
   option with a sibling attribute, so there is one pair per coin; keep this
   list in step with config/coins.php. */
.coin-field:has(option[data-icon="btc"]:checked) .coin-field__icon[data-coin="btc"],
.coin-field:has(option[data-icon="bch"]:checked) .coin-field__icon[data-coin="bch"],
.coin-field:has(option[data-icon="eth"]:checked) .coin-field__icon[data-coin="eth"],
.coin-field:has(option[data-icon="dash"]:checked) .coin-field__icon[data-coin="dash"],
.coin-field:has(option[data-icon="usdd"]:checked) .coin-field__icon[data-coin="usdd"],
.coin-field:has(option[data-icon="usdt"]:checked) .coin-field__icon[data-coin="usdt"],
.coin-field:has(option[data-icon="trx"]:checked) .coin-field__icon[data-coin="trx"],
.coin-field:has(option[data-icon="usdc"]:checked) .coin-field__icon[data-coin="usdc"],
.coin-field:has(option[data-icon="ton"]:checked) .coin-field__icon[data-coin="ton"],
.coin-field:has(option[data-icon="xrp"]:checked) .coin-field__icon[data-coin="xrp"],
.coin-field:has(option[data-icon="sol"]:checked) .coin-field__icon[data-coin="sol"],
.coin-field:has(option[data-icon="ltc"]:checked) .coin-field__icon[data-coin="ltc"],
.coin-field:has(option[data-icon="dai"]:checked) .coin-field__icon[data-coin="dai"],
.coin-field:has(option[data-icon="doge"]:checked) .coin-field__icon[data-coin="doge"],
.coin-field:has(option[data-icon="bnb"]:checked) .coin-field__icon[data-coin="bnb"],
.coin-field:has(option[data-icon="zano"]:checked) .coin-field__icon[data-coin="zano"],
.coin-field:has(option[data-icon="xmr"]:checked) .coin-field__icon[data-coin="xmr"] {
    display: block;
}

.coin-field__caret {
  position: absolute;
  right: 0.75rem;
  pointer-events: none;
  color: var(--muted-foreground);
}

.coin-field--locked {
  gap: 0.5rem;
  padding-inline: 1rem;
  font-size: 13px;
}

.coin-field--locked:hover {
  border-color: var(--border);
}

.coin-field--locked .coin-field__icon {
  position: static;
  display: block;
}

.swap-rate {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.swap-rate__status {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--accent);
  visibility: hidden;
}

.swap-rate button:active ~ .swap-rate__status,
.swap-rate button:focus ~ .swap-rate__status {
  visibility: visible;
}

.swap-fields {
  margin-top: 2rem;
}

.swap-fields > * + * {
  margin-top: 1rem;
}

.refund-toggle {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.75rem;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  transition: color var(--transition);
}

.refund-toggle:hover {
  color: var(--foreground);
}

.refund-toggle__box {
  height: 0.875rem;
  width: 0.875rem;
  flex-shrink: 0;
  border: 1px solid var(--foreground);
  background-color: var(--foreground);
}

#refund:checked ~ .swap-fields .refund-toggle__box {
  background-color: var(--accent);
}

.refund-field {
  display: none;
}

#refund:checked ~ .swap-fields .refund-field {
  display: block;
}

/* Forms + fields */

.field {
  width: 100%;
  border: 1px solid var(--border);
  background-color: transparent;
  padding: 0.75rem 1rem;
  font-size: 14px;
  transition: border-color var(--transition);
}

.field::placeholder {
  color: var(--muted-foreground);
}

.field:focus {
  border-color: var(--foreground);
  outline: none;
}

.field--filled {
  background-color: var(--surface);
}

.field-label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}

.field-label + .field {
  margin-top: 0.75rem;
}

.field-label--spaced {
  margin-top: 1.5rem;
}

.form-card {
  width: 100%;
  max-width: 740px;
  margin: 3.5rem auto 0;
  border: 1px solid var(--border);
  padding: 2.5rem;
}

.form-card--narrow {
  max-width: 660px;
}

.form-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.25;
}

.form-card__text {
  margin-top: 1rem;
  font-size: 14px;
  line-height: 1.625;
  color: var(--muted-foreground);
}

.form-card__spacer {
  margin-top: 1.5rem;
}

.form-card__submit {
  margin-top: 1.5rem;
}

.form-card__submit--lg {
  margin-top: 2rem;
}

.form-card__submit--sm {
  margin-top: 1.25rem;
}

.form-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.form-actions > * {
  flex: 1;
}

.form-actions .btn {
  width: 100%;
}

.form-error {
  margin-bottom: 1.5rem;
  border-left: 2px solid var(--danger);
  background-color: var(--surface);
  padding: 1rem 1.25rem;
}

.form-error__item {
  font-size: 13px;
  line-height: 1.6;
}

.form-error__item + .form-error__item {
  margin-top: 0.375rem;
}

.form-footnote {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 15px;
}

.copy-row {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid var(--border);
  background-color: var(--surface);
  padding: 0.75rem 1rem;
}

.copy-row--tight {
  margin-top: 0.5rem;
}

.copy-row__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: var(--muted-foreground);
  user-select: all;
}

.copy-row__value--link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.notice {
  margin-top: 2rem;
  border-left: 2px solid var(--accent);
  background-color: var(--surface);
  padding: 1.25rem 1.5rem;
}

.notice__title {
  font-size: 14px;
}

.notice__body {
  margin-top: 0.5rem;
  font-size: 14px;
  color: var(--muted-foreground);
}

/* Tables */

.data-table {
  margin-top: 1.5rem;
  text-align: left;
  font-size: 14px;
}

.data-table th {
  border-bottom: 1px solid var(--border);
  padding-block: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}

.data-table--ruled {
  margin-top: 3rem;
}

.api-meta + .data-table--ruled {
  margin-top: 1rem;
}

.data-table--ruled th {
  border-top: 1px solid var(--border);
}

.data-table td {
  border-bottom: 1px solid var(--border);
  padding-block: 1rem;
}

.data-table .is-muted {
  color: var(--muted-foreground);
}

.data-table .is-accent {
  color: var(--accent);
}

.table-action {
  color: var(--accent);
  transition: color var(--transition);
}

.table-action:hover {
  color: var(--foreground);
  text-decoration: underline;
}

/* Affiliate pages */

.aff-status {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--border);
  padding: 1.5rem 2rem;
}

.aff-status__label {
  font-size: 14px;
  letter-spacing: 0.05em;
}

.aff-status__uuid {
  background-color: var(--surface);
  padding: 0.625rem 1.5rem;
  font-size: 13px;
  letter-spacing: 0.05em;
}

.dot-accent {
  color: var(--accent);
}

.aff-grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.aff-card {
  border: 1px solid var(--border);
  padding: 2rem;
}

.aff-card__label {
  font-size: 14px;
  letter-spacing: 0.05em;
}

.aff-card__code {
  margin-top: 1.5rem;
  font-size: 26px;
}

.aff-card__links {
  margin-top: 2.5rem;
  font-size: 14px;
}

.aff-card__hint {
  color: var(--muted-foreground);
}

/* The whole row is one target, but only "API KEYS" keeps the underline so the
   card reads exactly as it did before. Hover lights both halves, so it is
   obvious the hint is part of the same link. */
.aff-card__api-link {
  color: inherit;
}

.aff-card__api-link:hover .link-plain,
.aff-card__api-link:hover .aff-card__hint {
  color: var(--accent);
}

.aff-links > * + * {
  margin-top: 1.25rem;
}

.aff-funds {
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

.aff-funds__label {
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}

.aff-funds__amount {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 34px;
}

.coin-badge {
  display: flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  border-radius: 9999px;
  color: var(--accent);
}

.coin-badge--sm {
  height: 1.75rem;
  width: 1.75rem;
}

.aff-history {
  margin-top: 4rem;
}

.aff-history__label {
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}

.aff-faq {
  margin-top: 5rem;
}

.aff-faq--tight {
  margin-top: 6rem;
}

.aff-faq .accordion {
  margin-top: 2rem;
}

.withdraw-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background-color: var(--surface);
  padding: 1.25rem 1.5rem;
}

.withdraw-summary__label {
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}

.withdraw-summary__value {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 17px;
}

.withdraw-field-label {
  margin-top: 1.5rem;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}

.withdraw-field-label + .field {
  margin-top: 0.75rem;
}

.api-meta {
  margin-top: 2rem;
  font-size: 16px;
  letter-spacing: 0.025em;
}

.api-meta--first {
  margin-top: 3rem;
}

.api-meta__link {
  margin-left: 1.5rem;
}

.api-note {
  margin-top: 2rem;
  font-size: 16px;
  line-height: 1.625;
}

/* Support page */

.support-main {
  display: grid;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 3.5rem;
  padding: 5rem 1.5rem;
}

.support-field {
  border-bottom: 1px solid var(--border);
  padding-block: 1.75rem;
}

.support-field__label {
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}

.support-field__value {
  margin-top: 0.75rem;
  font-size: 16px;
  word-break: break-all;
}

.support-field__value .is-accent {
  color: var(--accent);
}

.support-file {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  transition: color var(--transition);
}

.support-file:hover {
  color: var(--foreground);
}

.support-notice {
  margin-top: 2.5rem;
  border-left: 2px solid var(--accent);
  background-color: var(--surface);
  padding: 1.75rem;
}

.support-notice__title {
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--accent);
}

.support-notice__body {
  margin-top: 1rem;
  font-size: 14px;
  line-height: 1.625;
  color: var(--muted-foreground);
}

.support-foot {
  margin-top: 2rem;
  font-size: 14px;
  color: var(--muted-foreground);
}

.faq-cta {
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  border: 1px solid var(--border);
  padding: 2.5rem;
}

.faq-cta__text {
  font-size: 15px;
  line-height: 1.625;
}

.faq-cta .btn {
  flex-shrink: 0;
  padding: 0.75rem 1.5rem;
  font-size: 12px;
}

.faq-accordion {
  margin-top: 4rem;
}

/* Transparency report */

.transparency-main {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 3rem 1.5rem 4rem;
  text-align: center;
}

.transparency__title {
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 5.6vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
}

.transparency__subtitle {
  margin-top: 1rem;
  font-size: 14px;
  color: var(--muted-foreground);
}

.transparency__updated {
  margin-top: 7px;
  font-size: 13px;
  color: var(--muted-foreground);
}

.transparency-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: 42rem;
  margin: 2.5rem auto 0;
  border: 1px solid var(--border);
}

.transparency-stat {
  display: flex;
  flex-direction: column;
  padding: 2rem 1rem;
}

.transparency-stat + .transparency-stat {
  border-left: 1px solid var(--border);
}

.transparency-stat__label {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}

.transparency-stat__value {
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.transparency-stat__value.is-accent {
  color: var(--accent);
}

.transparency-stat__value.is-danger {
  color: var(--danger);
}

.transparency-statement {
  margin: 2.5rem auto 0;
  max-width: 79.75rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
}

.transparency-statement p + p {
  margin-top: 1rem;
}

.transparency-statement__punch {
  font-size: 1.25rem;
  color: var(--danger);
}

/* Error pages */

.error-main {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 3rem 1.5rem;
}

.error-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  width: 100%;
  text-align: center;
}

.error-mascot {
  width: min(100%, 18rem);
  height: auto;
}

.error-copy {
  width: 100%;
  max-width: 36.625rem;
}

.error-code {
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

.error-title {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

.error-text {
  margin: 1.25rem auto 0;
  max-width: 34rem;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.error-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

.error-actions .btn {
  padding-block: 10px;
  font-size: 14px;
}

.error-ref {
  margin-top: 1.75rem;
  font-size: 13px;
  color: var(--muted-foreground);
}

.error-ref__value {
  user-select: all;
}

/* Responsive */

@media (min-width: 640px) {
  .site-header__bar {
    padding-inline: 1.5rem;
  }

  .site-header__logo {
    gap: 1rem;
  }

  .site-header__mascot {
    height: 3rem;
  }

  .site-header__wordmark {
    font-size: 1.5rem;
  }

  .btn--sm {
    padding: 0.5rem 1.25rem;
    font-size: 12px;
    letter-spacing: 0.1em;
  }

  .site-header__cta {
    margin-left: 1rem;
  }

  .swap-hero__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-actions {
    flex-direction: row;
  }
}

@media (min-width: 768px) {

  .site-nav {
    position: absolute;
    inset-block: 0;
    left: 50%;
    transform: translateX(-50%);
    gap: 3rem;
    border-top: 0;
  }

  .site-nav__link {
    flex: none;
    padding: 0;
  }

  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
  }

  .site-footer__mirrors,
  .site-footer__link {
    display: block;
  }

  .faq-cta {
    flex-direction: row;
    align-items: center;
  }

  .aff-status,
  .aff-funds {
    flex-direction: row;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .transparency-main {
    padding: 63px 1.5rem 5rem;
  }

  .transparency__subtitle {
    margin-top: 14px;
    font-size: 16px;
  }

  .transparency__updated {
    font-size: 14px;
  }

  .transparency-stats {
    margin-top: 37.5px;
  }

  .transparency-stat {
    padding: 41px 1rem 46px;
  }

  .transparency-stat__label {
    font-size: 14px;
  }

  .transparency-stat__value {
    margin-top: 27px;
    padding-top: 0;
    font-size: 3rem;
  }

  .transparency-statement {
    margin-top: 41px;
    font-size: 2rem;
    line-height: 1.33;
  }

  .transparency-statement p + p {
    margin-top: 18px;
  }

  .transparency-statement p + .transparency-statement__punch {
    margin-top: 20px;
  }

  .transparency-statement__punch {
    font-size: 2.25rem;
  }

  .swap-layout {
    grid-template-columns: 1fr 640px;
    gap: 4rem;
    padding-inline: 2.5rem;
  }

  .swap-hero {
    order: 1;
  }

  .swap-panel-col {
    order: 2;
    padding-top: 0.5rem;
  }

  .page-main,
  .support-main {
    padding-inline: 3.5rem;
  }

  .support-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6rem;
  }

  .support-col {
    padding-top: 0.5rem;
  }

  .aff-grid {
    grid-template-columns: minmax(0, 1fr) 2fr;
  }
}

@media (min-width: 1280px) {

  .error-layout {
    flex-direction: row;
    gap: 2.5rem;
    width: auto;
    text-align: left;
  }

  .error-mascot {
    width: 526px;
    flex-shrink: 0;
  }

  .error-copy {
    width: 36.625rem;
    max-width: none;
    margin-top: 30px;
  }

  .error-code {
    font-size: 124px;
    letter-spacing: 2.6px;
  }

  .error-title {
    margin-top: 26px;
    font-size: 2.5rem;
  }

  .error-text {
    margin: 27px 0 0;
    font-size: 16px;
    line-height: 1.3125;
  }

  .error-actions {
    flex-direction: row;
    gap: 2.5rem;
    margin-top: 38px;
  }

  .error-actions .btn {
    width: 17.0625rem;
  }

  .swap-hero__mascot {
    display: block;
  }

  .swap-hero__title {
    padding-right: 320px;
  }
}

@media (min-width: 1536px) {
  .swap-hero__mascot {
    height: 420px;
  }

  .swap-hero__title {
    padding-right: 400px;
  }
}

/* Transaction */

/* Which mode opened this swap, as a badge beside the page title. Each mode
   owns a hue so the two are told apart at a glance: --accent for the normal
   path, --warning for NO AML, which adds a fee and a Monero-only payout.
   Neither takes --danger -- nothing has gone wrong on this page. */
.tx-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  font-size: 1.375rem;
}

.tx-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid color-mix(in oklab, var(--foreground) 45%, transparent);
  padding: 0.4rem 0.75rem;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--foreground);
}

.tx-badge__dot {
  flex: none;
  font-size: 0.7em;
  line-height: 1;
}

.tx-badge--standard {
  border-color: color-mix(in oklab, var(--accent) 65%, transparent);
  background-color: color-mix(in oklab, var(--accent) 16%, transparent);
  color: var(--accent);
}

.tx-badge--aml {
  border-color: color-mix(in oklab, var(--warning) 65%, transparent);
  background-color: color-mix(in oklab, var(--warning) 16%, transparent);
  color: var(--warning);
}

.tx-legs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 1.5rem;
}

.tx-leg--end {
  text-align: right;
}

.tx-leg__amount {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 1.75rem;
  line-height: 1.1;
  word-break: break-all;
}

.tx-leg__amount--accent {
  color: var(--accent);
}

.tx-leg__coin {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 14px;
  color: var(--muted-foreground);
}

.tx-leg--end .tx-leg__coin {
  justify-content: flex-end;
}

.tx-legs__arrow {
  display: flex;
  align-items: center;
  align-self: center;
  color: var(--muted-foreground);
}

.tx-status {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2rem;
}

.tx-status__meta {
  text-align: right;
}

.tx-status__value {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
}

.tx-status__id {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted-foreground);
  word-break: break-all;
  user-select: all;
}

.tx-instruction {
  margin-top: 2rem;
  font-size: 14px;
  color: var(--muted-foreground);
}

.tx-instruction__amount {
  border: 1px solid var(--border);
  background-color: var(--surface);
  padding: 0.125rem 0.5rem;
  font-family: var(--font-mono);
  color: var(--foreground);
}

.tx-deadline {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}

.tx-deadline__value {
  font-family: var(--font-mono);
  color: var(--foreground);
}

/* Outside the deposit instructions the row is a section of its own, spaced
   like the status line above it and the notice below. */
.tx-deadline--standalone {
  margin-top: 2rem;
}

/* The deposit countdown, without a line of JavaScript.

   The server prints the seconds left as --tx-seconds. A stepped animation
   walks --tx-left from there down to 0 one whole second at a time, the two
   derived properties split it into minutes and seconds, and counters print
   those. The properties have to be registered as <integer>: an unregistered
   custom property cannot interpolate, so it would jump instead of tick.

   The clock runs on the browser's timer from the moment the page renders, so
   a sleeping laptop can leave it behind. REFRESH re-syncs it with the server. */
@property --tx-left {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

@property --tx-min {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

@property --tx-sec {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

/* The clock and EXPIRED share one grid cell, so the swap does not shift the
   row. Tabular figures stop the digits jittering sideways as they change. */
.tx-timer {
  display: inline-grid;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.tx-timer > * {
  grid-area: 1 / 1;
  justify-self: end;
}

.tx-timer__clock {
  --tx-left: var(--tx-seconds);
  /* An <integer> rounds to the nearest whole number, so taking half a minute
     off first turns that rounding into the floor a clock needs. */
  --tx-min: calc((var(--tx-left) - 30) / 60);
  --tx-sec: calc(var(--tx-left) - var(--tx-min) * 60);
  counter-reset: tx-min var(--tx-min) tx-sec var(--tx-sec);
  animation:
    tx-countdown calc(var(--tx-seconds) * 1s) steps(var(--tx-seconds)) forwards,
    tx-conceal 0s calc(var(--tx-seconds) * 1s) forwards;
}

.tx-timer__clock::after {
  content: counter(tx-min, decimal-leading-zero) ":" counter(tx-sec, decimal-leading-zero);
}

/* Held back until the countdown runs out, then shown in place of the clock.
   The page's meta refresh loads the expired page at the same moment, so this
   covers the reload, and stays put where a browser has meta refresh disabled. */
.tx-timer__expired {
  visibility: hidden;
  color: var(--danger);
  animation: tx-reveal 0s calc(var(--tx-seconds) * 1s) forwards;
}

/* The window was already shut when the page rendered: no clock, no waiting. */
.tx-timer--expired .tx-timer__expired {
  visibility: visible;
  animation: none;
}

/* No `from`: the animation starts at the underlying --tx-left, which is the
   --tx-seconds the server printed. */
@keyframes tx-countdown {
  to {
    --tx-left: 0;
  }
}

@keyframes tx-conceal {
  to {
    visibility: hidden;
  }
}

@keyframes tx-reveal {
  to {
    visibility: visible;
  }
}



/* A payout hash is 64 characters of meaningless-looking hex, so it is set to
   be selected in one go rather than read. */
.tx-txid {
  user-select: all;
}

.tx-txid__hint {
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text-muted);
}

.tx-qr {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
}

/* Accent modules on the page's own dark ground, so the code no longer flares
   white on a dark page. That makes it a reversed code (light modules on
   dark): phone cameras and current wallet scanners read it, a few older
   ZXing/zbar builds do not, and the address above is always there to copy.
   The SVG ground is transparent and its 4-module quiet zone is this plate,
   so the plate stays one flat colour: no gradient, texture or glow. */
.tx-qr__plate {
  position: relative;
  width: 240px;
  max-width: 100%;
  border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--border));
  background-color: var(--background);
  color: var(--accent);
  padding: 0.5rem;
  line-height: 0;
}

/* Viewfinder corners drawn over the border, which say "scan me" without a
   word. Laid over the frame, never inside it, so the quiet zone stays clear. */
.tx-qr__plate::before {
  --tx-qr-arm: 18px;
  --tx-qr-weight: 2px;
  --tx-qr-ink: linear-gradient(var(--accent), var(--accent));
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    var(--tx-qr-ink) left top / var(--tx-qr-arm) var(--tx-qr-weight),
    var(--tx-qr-ink) left top / var(--tx-qr-weight) var(--tx-qr-arm),
    var(--tx-qr-ink) right top / var(--tx-qr-arm) var(--tx-qr-weight),
    var(--tx-qr-ink) right top / var(--tx-qr-weight) var(--tx-qr-arm),
    var(--tx-qr-ink) left bottom / var(--tx-qr-arm) var(--tx-qr-weight),
    var(--tx-qr-ink) left bottom / var(--tx-qr-weight) var(--tx-qr-arm),
    var(--tx-qr-ink) right bottom / var(--tx-qr-arm) var(--tx-qr-weight),
    var(--tx-qr-ink) right bottom / var(--tx-qr-weight) var(--tx-qr-arm);
  background-repeat: no-repeat;
}

/* Browsers drop backgrounds when printing, which would leave pale green
   modules on white paper. On paper the code goes back to black on white. */
@media print {
  .tx-qr__plate {
    border-color: #000000;
    background-color: #ffffff;
    color: #000000;
  }

  .tx-qr__plate::before {
    content: none;
  }
}

.tx-qr__hint {
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}

.notice--danger {
  border-left-color: var(--danger);
}

.notice--warning {
  border-left-color: var(--warning);
}

.notice--neutral {
  border-left-color: var(--border);
}

/* One tone name drives the status line and the notice under it, so a status
   only ever names a colour in TransactionStatus and never in a view. */
.tx-state {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tx-state__dot {
  flex: none;
  font-size: 0.45em;
  line-height: 1;
}

.tx-state--accent {
  color: var(--accent);
}

.tx-state--warning {
  color: var(--warning);
}

.tx-state--danger {
  color: var(--danger);
}

.tx-state--neutral {
  color: var(--foreground);
}

/* An in-flight swap needs no colour shouting at the visitor; the dot carries
   the state and the label stays plain. */
.tx-state--neutral .tx-state__dot {
  color: var(--muted-foreground);
}

.tx-support {
  margin-top: 1.5rem;
}

.tx-actions {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

@media (max-width: 640px) {
  .tx-legs {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .tx-leg--end,
  .tx-status__meta {
    text-align: left;
  }

  .tx-leg--end .tx-leg__coin {
    justify-content: flex-start;
  }

  /* Shrink the box to the glyph before rotating: a stretched grid item
     rotated 90deg keeps its full width as height and lands beside the
     first leg instead of between the two. */
  .tx-legs__arrow {
    justify-self: center;
    transform: rotate(90deg);
  }

  .tx-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Addresses must stay readable in full: an elided deposit address is a
   payment sent to the wrong place. */
.copy-row--address {
  align-items: flex-start;
}

.copy-row__value--wrap {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  word-break: break-all;
  font-family: var(--font-mono);
  line-height: 1.6;
}

/* Phone refinements
   -----------------
   Two things went wrong on a narrow screen: the amount input was squeezed to
   almost nothing by the fixed-width coin picker, and a lot of the small print
   was set at 10-12px. Everything here is scoped to phones, so the desktop
   layout is untouched. */

@media (max-width: 640px) {
  /* Buy back horizontal room; every pixel here goes to the amount field. */
  .swap-layout {
    gap: 2.25rem;
    padding: 2.25rem 1rem;
  }

  .page-main {
    padding: 3rem 1rem;
  }

  .swap-panel__content,
  .swap-panel__footer {
    padding: 1.25rem 1rem;
  }

  .amount-row {
    min-height: 92px;
    gap: 0.75rem;
    padding-inline: 1rem;
  }

  /* The coin picker was a fixed 200px and refused to shrink, which left the
     amount input at 0-26px wide. Let it give way instead — 180px is what the
     longest names ("Litecoin (Litecoin)", "Dogecoin (Dogecoin)") need once the
     glyph steps aside. */
  .coin-field {
    width: 180px;
    min-width: 0;
    flex: 0 0 180px;
  }

  /* The coin glyph costs 44px of padding, which is what was clipping
     "Monero (Monero)" down to "Monero (I". The name carries the meaning on
     its own, so the glyph steps aside on phones and the label stays whole. */
  .coin-field__icon {
    display: none !important;
  }

  .coin-field__select {
    padding-left: 0.75rem;
    padding-right: 1.5rem;
  }

  .coin-field__caret {
    right: 0.5rem;
  }

  /* Make the amount unmistakably the thing you type in. */
  .amount-row__input {
    /* basis 0, so the input claims the leftover room instead of an
       intrinsic width that would squeeze the coin picker. */
    flex: 1 1 0;
    min-width: 0;
    font-size: 20px;
  }

  .amount-row__input::placeholder {
    color: color-mix(in oklab, var(--muted-foreground) 75%, transparent);
  }

  /* Small print, raised to a size that survives a phone screen. */
  .btn {
    white-space: nowrap;
  }

  .btn--sm {
    padding: 0.5rem 0.75rem;
    font-size: 12px;
  }

  .btn--compact {
    padding-inline: 1.5rem;
  }

  .field-label {
    font-size: 14px;
  }

  /* The title and the badge stack on a phone rather than squeezing the badge
     onto the same line at half its tracking. */
  .tx-heading {
    gap: 0.625rem;
    font-size: 1.125rem;
  }

  .tx-badge {
    padding: 0.35rem 0.65rem;
    font-size: 13px;
    letter-spacing: 0.07em;
  }

  /* Keep these one-liners: the selected tab's marker and the wide tracking
     were tipping "FLOATING RATE" and "NO AML SWAP" onto a second line. The
     highlighted background already shows which rate is selected, so the
     marker is redundant here. */
  .rate-tabs {
    --rate-tab-pad: 0.5rem;
  }

  .rate-tabs__label {
    gap: 0.375rem;
    font-size: 12px;
    letter-spacing: 0.02em;
  }

  /* A finger needs more than an 11px glyph to aim at. */
  .rate-tabs__help,
  .swap-panel__help {
    min-width: 1.75rem;
    min-height: 1.75rem;
    font-size: 12px;
  }

  #rate-floating:checked ~ .rate-tabs__label--floating .rate-tabs__marker,
  #rate-fixed:checked ~ .rate-tabs__label--fixed .rate-tabs__marker {
    display: none;
  }

  .swap-panel__tab {
    padding-inline: 0.375rem;
    letter-spacing: 0.025em;
  }

  .rate-tabs__help,
  .swap-panel__note {
    font-size: 12px;
  }

  .escrow__line {
    font-size: 13px;
    line-height: 1.5;
  }

  .swap-hero__lede {
    line-height: 1.7;
  }

  .site-nav__link {
    font-size: 13px;
  }
}

/* Press kit
   ---------
   Two tiers of type, and the split is the whole readability story:

     PROSE  - anything read as a sentence: the intro, section notes, asset
              descriptions, usage rules. Questrial, 16-18px, no tracking,
              generous leading, --text-muted for AAA contrast, and a measure
              capped near 66 characters.

     DATA   - anything scanned rather than read: asset ids, hex values, pixel
              dimensions, format chips, field labels. JetBrains Mono, never
              below 12px, tracking pulled back to 0.04-0.1em.

   Every secondary colour here is --text-muted rather than
   --muted-foreground: hierarchy comes from size, case and the accent, not
   from dimming text until it is hard to read.

   The site's body font is mono, which suits a swap form of labels and
   addresses but fights a page with real paragraphs on it, so prose here opts
   back into the display face. Nothing sits below 11px and nothing decorative
   is set in mono at a size it cannot carry. */

/* The intro paragraph, overriding the shared page-heading rule: mono at 15px
   is the hardest thing on the page to read and it is the first thing anyone
   reads. */
.press-main .page-heading__subtitle {
  max-width: 34rem;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--text-muted);
  text-wrap: pretty;
}

.press-spec {
  margin: 3rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--border);
}

.press-spec__item {
  border-bottom: 1px solid var(--border);
  padding: 1.125rem 1.25rem;
}

.press-spec__item:nth-child(odd) {
  border-right: 1px solid var(--border);
}

.press-spec__item:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.press-spec__key {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.press-spec__value {
  margin: 0.5rem 0 0;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

/* The one loud block on the page, and the thing most press users came for. */
.press-kit {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border: 1px solid var(--accent);
  background-color: var(--accent);
  color: var(--background);
  padding: 1.625rem 1.5rem;
  transition:
    background-color var(--transition),
    color var(--transition);
}

.press-kit:hover {
  background-color: transparent;
  color: var(--accent);
}

.press-kit__text {
  display: block;
}

.press-kit__label {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3.5vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.press-kit__meta {
  display: block;
  margin-top: 0.5rem;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  /* Dark ink on the lime block, so opacity is the contrast control here. */
  opacity: 0.8;
}

.press-kit__icon {
  flex: none;
}

.press-section {
  margin-top: 5.5rem;
  border-top: 1px solid var(--border);
  padding-top: 2.25rem;
}

.press-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.875rem;
}

.press-section__index {
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.press-section__title {
  font-size: clamp(1.625rem, 4vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.press-section__note {
  max-width: 34rem;
  margin: 0.875rem 0 0;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: 0;
  color: var(--text-muted);
  text-wrap: pretty;
}

.press-fields {
  margin-top: 1.25rem;
}

.press-field .field-label {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.press-field {
  border-bottom: 1px solid var(--border);
  padding-block: 1.625rem;
}

/* The next section draws its own top rule, so a trailing one here would read
   as a double line. */
.press-field:last-child,
.press-type__row:last-child {
  border-bottom: 0;
}

/* An address is data: mono is correct, and it is sized to be copied by eye. */
.press-field__value {
  margin: 0.625rem 0 0;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  word-break: break-all;
  user-select: all;
}

.press-grid {
  margin-top: 2.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.press-asset {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  background-color: var(--surface);
}

.press-asset__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  padding: 0.875rem 1.125rem;
  font-size: 13px;
  letter-spacing: 0.08em;
}

.press-asset__id {
  color: var(--accent);
}

.press-asset__dims {
  color: var(--text-muted);
}

/* Two grounds side by side: the mark has to be judged on both before anyone
   downloads it, and this site only ever shows it on the dark one.

   The explicit minmax track matters: a grid item's automatic minimum size is
   its intrinsic height, which lets a portrait asset stretch the row and beat
   aspect-ratio. Capping the track keeps every plate square whatever shape the
   client uploads. */
.press-plates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.press-plate {
  position: relative;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  aspect-ratio: 1;
  padding: 1.75rem 1.75rem 2.5rem;
}

.press-plate img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.press-plate--dark {
  background-color: var(--background);
  border-right: 1px solid var(--border);
}

.press-plate--light {
  background-color: #ffffff;
}

.press-plate__tag {
  position: absolute;
  bottom: 0.75rem;
  left: 0.875rem;
  font-size: 12px;
  letter-spacing: 0.06em;
}

.press-plate--dark .press-plate__tag {
  color: var(--text-muted);
}

/* Matching the dark plate's contrast, inverted: #6B6B6B on white is 5.8:1,
   where the #989898 used before was an unreadable 2.5:1. */
.press-plate--light .press-plate__tag {
  color: #6b6b6b;
}

/* Screenshots carry their own background, so they get one plate, not two. */
.press-shot {
  display: grid;
  place-items: center;
  background-color: var(--background);
  padding: 1.5rem;
}

.press-shot img {
  max-width: 100%;
  height: auto;
}

.press-asset__body {
  flex: 1;
  padding: 1.375rem 1.125rem 1.5rem;
}

.press-asset__name {
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.press-asset__note {
  max-width: 34rem;
  margin: 0.625rem 0 0;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--text-muted);
  text-wrap: pretty;
}

.press-asset__downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-top: 1px solid var(--border);
  padding: 1.125rem;
}

.press-download {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  padding: 0.6875rem 1rem;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--accent);
  transition:
    border-color var(--transition),
    background-color var(--transition);
}

.press-download:hover {
  border-color: var(--accent);
  background-color: color-mix(in oklab, var(--accent) 12%, transparent);
}

/* The format is the whole point of the chip now that file sizes are gone, so
   it carries a little weight of its own. */
.press-download__format {
  font-weight: 500;
}

.press-swatches {
  margin-top: 2.25rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.press-swatch {
  border: 1px solid var(--border);
  background-color: var(--surface);
}

.press-swatch__chip {
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--border);
}

.press-swatch__body {
  padding: 1.125rem 1.25rem 1.25rem;
}

.press-swatch__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.3;
}

/* The value someone is here to copy, so it gets the most weight of the three. */
.press-swatch__hex {
  margin: 0.75rem 0 0;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--foreground);
  user-select: all;
}

/* At phone width a swatch cell is about 130px, which is narrower than
   "RGB 152, 152, 152" and "--muted-foreground" at this size. They wrap on
   their own spaces and hyphens, and this is the belt and braces. */
.press-swatch__rgb,
.press-swatch__token {
  margin: 0.375rem 0 0;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.press-type {
  margin-top: 2.25rem;
}

.press-type__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  padding-block: 2rem;
}

.press-type__role {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.press-type__sample {
  margin: 0;
  font-size: clamp(2rem, 7vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.press-type__meta {
  align-self: center;
}

.press-type__family {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.3;
  color: var(--foreground);
}

.press-type__note {
  margin: 0.625rem 0 0;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--text-muted);
}

/* A CSS font stack is code, so it stays mono however long it is. */
.press-type__stack {
  margin: 0.625rem 0 0;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text-muted);
  word-break: break-word;
}

.press-rules {
  margin-top: 2.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

.press-rules__title {
  margin: 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.875rem;
  font-size: 14px;
  letter-spacing: 0.1em;
}

.press-rules__title--do {
  color: var(--accent);
}

.press-rules__title--dont {
  color: var(--danger);
}

.press-rules__list {
  margin: 1.375rem 0 0;
  padding-left: 1.25rem;
  max-width: 34rem;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--text-muted);
  text-wrap: pretty;
}

.press-rules__list li + li {
  margin-top: 0.625rem;
}

.press-rules__list li {
  padding-left: 0.375rem;
}

.press-rules__list li::marker {
  color: var(--accent);
}

.press-rules__list--dont li::marker {
  color: var(--danger);
}

.press-empty {
  margin-top: 2.25rem;
  border: 1px solid var(--border);
  padding: 2.5rem 2rem;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.6;
  text-align: center;
  color: var(--text-muted);
}

@media (min-width: 640px) {
  .press-rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
  }

  .press-swatches {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .press-spec {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .press-spec__item {
    border-bottom: 0;
    border-right: 1px solid var(--border);
  }

  .press-spec__item:last-child {
    border-right: 0;
  }

  .press-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .press-type__row {
    grid-template-columns: 5.5rem minmax(0, 1fr) 17rem;
    gap: 2rem;
    align-items: center;
  }
}

@media (min-width: 1280px) {
  .press-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .press-swatches {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.api-scopes {
    display: none;
}

/* The one destructive .btn on the site, so it starts as an outline instead of


   a filled block: it should read as available, not as the thing to press. The


   red is carried by the border, and the label stays white - --danger on the


   page ground is 3.8:1, which is fine for a status word and not for a control


   someone has to read before pressing. */


.btn--danger {


    border-color: var(--danger);


    background-color: transparent;


    color: var(--foreground);


}





/* The fill darkens the token for the same reason: white on flat #ff0000 is


   4:1, and a shade down clears AA without leaving the red. */


.btn--danger:hover {


    background-color: color-mix(in oklab, var(--danger) 80%, black);


    color: var(--foreground);


}


/* Set well below the card: this is the end of the page, not another action on


   the swap, and the gap is what keeps it from being pressed on the way past. */


.tx-delete {


    margin-top: 3.5rem;


    display: flex;


    flex-direction: column;


    align-items: center;


    gap: 1rem;


}




/* The delete confirmation: a native popover, so it opens, closes on Esc or an


   outside click, and sits in the top layer with no script. Drawn as a


   form-card with a red rule on top, the one place the page says "danger". */


.tx-confirm {


    width: min(520px, calc(100% - 2rem));


    margin: auto;


    border: 1px solid var(--border);


    border-top: 2px solid var(--danger);


    background-color: var(--surface);


    color: var(--foreground);


    padding: 2rem;


}





.tx-confirm::backdrop {


    background-color: color-mix(in oklab, var(--background) 80%, transparent);


}





.tx-confirm__title {


    margin: 0 0 1.5rem;


    font-size: 15px;


    letter-spacing: 0.05em;


    color: var(--danger);


}





.tx-confirm__id {


    margin: 0.5rem 0 0;


    font-family: var(--font-mono);


    font-size: 13px;


    overflow-wrap: anywhere;


}

.tx-confirm__body {


    margin-top: 1.5rem;

    font-family: var(--font-display);

    font-size: 14px;

    line-height: 1.5;

    letter-spacing: 0;

    color: var(--text-muted);

}




.tx-confirm__body p {


    margin: 0 0 0.75rem;


}





.tx-confirm__body p:last-child {


    margin-bottom: 0;


    color: var(--foreground);


}





.tx-confirm__actions {


    margin-top: 2rem;


    display: flex;


    justify-content: flex-end;


    gap: 0.75rem;


}





@media (max-width: 640px) {


    .tx-confirm {


        padding: 1.5rem;


    }





    .tx-confirm__actions {


        flex-direction: column-reverse;


    }


}


/* Announcements


   -------------


   A fixed stack under the header, top right. It sits below the header's z-index


   rather than above it: the header is sticky, so anything that outranked it


   would cover the nav the moment the page scrolled.





   These are meant to stop you, so each one is a solid block of its tone rather


   than the dark card with a coloured edge that .notice uses inside the page.


   That is the same move .btn--accent makes - a flat fill in the site green on a


   near-black page - and it needs no shadow or gradient, neither of which this


   stylesheet uses anywhere.





   Dismissal is CSS alone - an sr-only checkbox immediately before the notice it


   closes. One rule closes all of them, so a new announcement needs no CSS. The


   state dies with the page, which is the point: an outage notice should come


   back until the outage is over. */





.announce {


    position: fixed;


    top: calc(74px + 1rem);


    right: 1.5rem;


    z-index: 40;


    display: flex;


    flex-direction: column;


    gap: 0.75rem;


    width: min(360px, calc(100vw - 3rem));


    /* The stack is taller than the notices inside it once one is dismissed, and


       an invisible fixed box must not swallow clicks meant for the page. */


    pointer-events: none;


}





.announce__toggle:checked + .announce__item {


    display: none;


}





.announce__item {


    position: relative;


    padding: 1rem 2.75rem 1.125rem 1.25rem;


    pointer-events: auto;


    /* The tone modifiers below all override this; it is here so a notice can


       never render as a transparent hole over the page. */


    background-color: var(--accent);


    color: var(--background);


    /* Arriving is half of being noticed: they slide in from the edge they are


       pinned to, one after another. */


    animation: announce-in 0.32s ease-out both;


}





.announce__item:nth-of-type(2) {


    animation-delay: 0.08s;


}





.announce__item:nth-of-type(3) {


    animation-delay: 0.16s;


}





@keyframes announce-in {


    from {


        opacity: 0;


        transform: translateX(14px);


    }


}





/* Ink is set once per tone and everything inside inherits it, so the title,


   the body and the close control stay legible on whichever fill they land on. */


.announce__item--accent {


    background-color: var(--accent);


    color: var(--background);


}





.announce__item--warning {


    background-color: var(--warning);


    color: var(--background);


}





/* The one tone that cannot take dark ink: white on flat #ff0000 is 4:1, so the


   fill drops a shade to clear AA - the same correction .btn--danger makes. */


.announce__item--danger {


    background-color: color-mix(in oklab, var(--danger) 80%, black);


    color: var(--foreground);


}





/* Set as a tag line rather than a headline: it is the same uppercase, letter-


   spaced label the rest of the site uses to name a thing above its value. */


.announce__title {


    margin: 0;


    font-size: 12px;


    letter-spacing: 0.08em;


    text-transform: uppercase;


}





.announce__body {


    margin: 0;


    font-size: 14px;


    line-height: 1.5;


    /* Held off the title without leaving the tone's ink, which is what a fixed


       grey would do on three different fills. */


    color: color-mix(in oklab, currentColor 88%, transparent);


}





.announce__title + .announce__body {


    margin-top: 0.5rem;


}





/* The click target is the label; the checkbox it drives is sr-only and stays


   where the keyboard can reach it. */


.announce__close {


    position: absolute;


    top: 0.5rem;


    right: 0.625rem;


    cursor: pointer;


    padding: 0.25rem;


    font-size: 18px;


    line-height: 1;


    /* Held back from the ink without fading out of reach: at 18px this is still


       normal-size text as far as contrast goes, and the red fill is the tone with


       the least room to give. */


    color: color-mix(in oklab, currentColor 78%, transparent);


    transition: color var(--transition);


}





.announce__close:hover {


    color: currentColor;


}





/* Keyboard focus lands on the hidden checkbox, so the ring has to be drawn on


   the label it controls or tabbing past would show nothing at all. It is the


   page background rather than the accent: the accent is itself one of the


   fills, and a green ring on a green notice is not a ring. */


.announce__toggle:focus-visible + .announce__item .announce__close {


    outline: 2px solid var(--background);


    outline-offset: 2px;


    color: currentColor;


}





@media (prefers-reduced-motion: reduce) {


    .announce__item {


        animation: none;


    }


}





@media (max-width: 640px) {


    /* Full width under the header: 360px in a corner leaves a phone reading a


       two-word column. */


    .announce {


        top: calc(74px + 0.75rem);


        right: 1rem;


        left: 1rem;


        width: auto;


    }


}

/* Pending withdrawal


   -----------------


   Warning-toned rather than danger: nothing has gone wrong, the money is just


   already spoken for. It carries the amount that .aff-funds above no longer


   shows, which is why it sits directly under it. */





.aff-pending {


    margin-top: 1.5rem;


    display: flex;


    flex-direction: column;


    gap: 1.25rem;


    border: 1px solid var(--border);


    border-left: 2px solid var(--warning);


    background-color: var(--surface);


    padding: 1.5rem 2rem;


}





.aff-pending__label {


    font-size: 14px;


    letter-spacing: 0.05em;


}





.dot-warning {


    color: var(--warning);


}





.aff-pending__rows {


    display: grid;


    grid-template-columns: repeat(2, minmax(0, 1fr));


    gap: 1.25rem;


}





.aff-pending__value {


    margin-top: 0.5rem;


    font-family: var(--font-mono);


    font-size: 15px;


}





.aff-pending__note {


    margin: 0;


    font-family: var(--font-display);


    font-size: 14px;


    line-height: 1.5;


    letter-spacing: 0;


    color: var(--text-muted);


}