/* IBM Plex, vendored rather than loaded from Google Fonts.
   A privacy wallet should not tell a third party each time someone opens it,
   and self-hosting also keeps the content security policy at 'self'.
   SIL Open Font License 1.1, see fonts/LICENSE.txt. */
@font-face { font-family: "IBM Plex Sans"; src: url("./fonts/plex-sans-400.woff2") format("woff2");
  font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("./fonts/plex-sans-500.woff2") format("woff2");
  font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("./fonts/plex-sans-600.woff2") format("woff2");
  font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("./fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("./fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-display: swap; }

/* One stylesheet, no framework, no build step, so the app deploys as static
   files anywhere. Sized mobile first: the layout is a single column that gains
   a sidebar at 60rem, because most of this is read on a phone. */

:root {
  color-scheme: light dark;
  /* Palette from the zkStacks design board. It keeps the Bitcoin orange on a
     warm neutral ground and corrects three contrast failures in the previous
     set: ink-3 measured 3.06:1 on white and 3.70:1 on the dark surface, both
     under the 4.5 that hint text needs, and the orange used as text was 4.28:1.
     Every pair below is measured, not estimated. */
  --bg: #faf8f5;
  --surface: #ffffff;
  --surface-2: #f4f1ec;
  --line: #e7e1d7;
  --ink: #1a1713;      /* 17.9:1 on surface */
  --ink-2: #6a6157;    /*  6.1:1 */
  --ink-3: #6f6659;    /*  5.6:1, was #9b9287 at 3.1:1 */
  --accent: #f7931a;
  --accent-ink: #1a1206;  /* label ON orange, 8.1:1; white would be 2.2:1 */
  --accent-text: #9c5308; /* orange AS text on the light ground, 5.4:1 */
  --good: #0a6d45;
  --warn: #8a5600;
  --bad: #c02a20;
  --good-bg: #e8f6ee;
  --warn-bg: #fbf1dc;
  --bad-bg: #fdecea;
  --info-bg: #eef2f5;
  --radius: 2px;
  /* Controls and labels are monospace and upper case in the design, with the
     letter-spacing measured off the board rather than guessed:
     buttons 12px/1.2px, micro labels 10px/1.4px, tab labels 10px/1px. */
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --shadow: 0 1px 1px rgba(30, 22, 12, 0.04), 0 1px 3px rgba(30, 22, 12, 0.05);
}

/* The dark palette applies two ways: when the system asks for it and no explicit
   choice overrides, and when the choice itself says dark. Defining it once per
   condition rather than once overall keeps a toggle from fighting the media
   query: `[data-theme="light"]` has to be able to win on a dark system, and
   `[data-theme="dark"]` has to win on a light one. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #12100d;
  --surface: #1b1814;
  --surface-2: #24201a;
  --line: #332d25;
  --ink: #f3eee7;      /* 15.3:1 on surface */
  --ink-2: #c4b9aa;    /*  9.2:1 */
  --ink-3: #a09586;    /*  6.0:1, was #7b7166 at 3.7:1 */
  --accent: #f7931a;
  --accent-ink: #14100a;
  --accent-text: #f7931a; /* 8.3:1 on the dark ground, no adjustment needed */
  --good: #3ee08f;
  --warn: #ffc75a;
  --bad: #ff8f80;
  --good-bg: #0f2419;
  --warn-bg: #2b2312;
  --bad-bg: #2c1a17;
  --info-bg: #152023;
  --shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  --bg: #12100d;
  --surface: #1b1814;
  --surface-2: #24201a;
  --line: #332d25;
  --ink: #f3eee7;      /* 15.3:1 on surface */
  --ink-2: #c4b9aa;    /*  9.2:1 */
  --ink-3: #a09586;    /*  6.0:1, was #7b7166 at 3.7:1 */
  --accent: #f7931a;
  --accent-ink: #14100a;
  --accent-text: #f7931a; /* 8.3:1 on the dark ground, no adjustment needed */
  --good: #3ee08f;
  --warn: #ffc75a;
  --bad: #ff8f80;
  --good-bg: #0f2419;
  --warn-bg: #2b2312;
  --bad-bg: #2c1a17;
  --info-bg: #152023;
  --shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 "IBM Plex Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-text); }

/* ---- shell ------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.brand { font-weight: 640; letter-spacing: -0.01em; }
.brand small { display: block; font-weight: 400; font-size: 11px; color: var(--ink-3); }
.grow { flex: 1; }

.wrap { max-width: 60rem; margin: 0 auto; padding: 16px 16px 96px; }

/* Bottom tabs on a phone, a top row on a wide screen. Thumb reach matters more
   than symmetry here. */
.tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  /* One column per tab. Hard-coded at five, this wrapped the moment a
     sixth arrived and put Settings alone on a second row. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}

.tabs button {
  appearance: none;
  font-family: var(--mono);
  border: 0;
  background: none;
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 2px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.tabs button .ico { display: block; line-height: 0; }
.tabs button .ico svg { width: 20px; height: 20px; display: block; }

@media (max-width: 24rem) {
  /* Six tabs on a small phone: keep the icons, shrink the tracking rather than
     let a label wrap. */
  .tabs button { font-size: 9px; letter-spacing: 0.04em; padding: 8px 0 10px; }
}
.tabs button[aria-selected="true"] { color: var(--accent-text); }

@media (min-width: 60rem) {
  .tabs {
    position: sticky;
    top: 53px;
    bottom: auto;
    border-top: 0;
    border-bottom: 1px solid var(--line);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 4px;
    padding: 6px 16px;
    justify-content: center;
  }
  .tabs button { flex-direction: row; gap: 7px; font-size: 13.5px; padding: 7px 13px; border-radius: var(--radius); }
  .tabs button .ico svg { width: 16px; height: 16px; }
  .tabs button[aria-selected="true"] { background: var(--surface-2); font-weight: 550; }
  .wrap { padding-bottom: 48px; }
}

/* Settings is a panel over the top, not a section appended underneath.
   `settings-open` was set on the body with no rule behind it, so opening
   Settings left whichever screen you were on still rendered above it and you
   scrolled past a whole balance to reach the controls. Driving it from CSS
   rather than by hiding sections in JS means closing restores exactly what was
   showing, with no state to remember and nothing to fight `openTab`.
   `#boot-msg` is not a section and stays visible on purpose: a build that
   cannot prove should say so from every screen. */
body.settings-open .tabs,
body.settings-open .wrap > section:not(#tab-settings) { display: none; }

/* ---- cards ------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin: 0 0 12px;
  box-shadow: var(--shadow);
}

.card h2 { margin: 0 0 6px; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.card h2 + .sub { margin: 0 0 14px; }
.sub { color: var(--ink-2); font-size: 13px; line-height: 1.5; margin: 0 0 10px; }

.pair { display: grid; gap: 14px; }
@media (min-width: 48rem) { .pair { grid-template-columns: 1fr 1fr; } }

/* ---- balance ----------------------------------------------------------- */

.balance { text-align: center; padding: 28px 20px 24px; }
.balance .amount {
  font-size: clamp(28px, 7.5vw, 38px);
  font-weight: 600;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.balance .unit { font-size: 13px; color: var(--ink-3); font-weight: 500; margin-left: 6px; }
.balance .note { color: var(--ink-3); font-size: 12.5px; margin-top: 5px; }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }

/* ---- controls ---------------------------------------------------------- */

label { display: block; font-size: 12.5px; font-weight: 550; margin: 14px 0 5px; }
label .hint { font-weight: 400; color: var(--ink-3); }

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

input[type="text"], input[type="number"], select, textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

textarea { resize: vertical; min-height: 76px; }
.mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; word-break: break-all; }

/* Numbers are mono and tabular everywhere they can be compared: a column of
   amounts that does not line up is harder to scan than one that does. */
.balance .amount, .list .amt, .review dd, .pill {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* Section labels are small, uppercase and tracked out, which is what separates
   a label from a heading without needing a second type size. */
.eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px;
}

button {
  appearance: none;
  font-family: var(--mono);
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
button:hover:not(:disabled) { border-color: var(--ink-3); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

button.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
button.ghost { background: none; }
button.danger { color: var(--bad); }
button.wide { width: 100%; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }

/* The unit switch sits against its input, so the amount and what it is
   denominated in read as one control rather than two. */
.unit-toggle {
  flex: 0 0 auto; min-width: 68px; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px; letter-spacing: 0.02em;
}
.row > input[type="number"] { flex: 1 1 auto; min-width: 0; }
.gap { margin-top: 12px; }
.row > * { flex: 1 1 auto; }

/* ---- status ------------------------------------------------------------ */

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); display: inline-block; }
.dot.up { background: var(--good); }
.dot.down { background: var(--bad); }

.pill {
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 10px;
}

/* Show the theme currently in effect: a sun on the light ground, a moon on the
   dark one. Driven by CSS rather than by swapping markup, so it follows the
   system preference before any choice has been made and cannot disagree with
   the palette actually on screen, which a JS-set icon would the moment the
   system flipped under a page that was already open. */
.theme-moon { display: none; }
.theme-sun { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-sun { display: none; }
  :root:not([data-theme="light"]) .theme-moon { display: inline-flex; }
}
:root[data-theme="dark"] .theme-sun { display: none; }
:root[data-theme="dark"] .theme-moon { display: inline-flex; }
:root[data-theme="light"] .theme-sun { display: inline-flex; }
:root[data-theme="light"] .theme-moon { display: none; }

/* The connection pill opens a menu, because leaving an account on a shared
   machine has to be undoable from wherever the account is shown. */
.conn-wrap { position: relative; }
button.pill { cursor: pointer; font-family: inherit; }
button.pill:hover { border-color: var(--ink-3); }

.conn-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  /* A fixed width, not min-width. Absolute boxes shrink to fit, so a one line
     hint stretched this to the width of the sentence and the menu spanned the
     header. Fixed width makes the text wrap instead. */
  width: 15rem;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.conn-menu-addr { margin: 4px 6px 8px; font-size: 11px; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.conn-menu button { display: block; width: 100%; text-align: left; margin: 2px 0; }
.conn-menu .hint { margin: 8px 6px 2px; }

.msg { border-radius: var(--radius); padding: 10px 12px; font-size: 13px; margin: 12px 0 0; }
.msg.info { background: var(--info-bg); color: var(--ink-2); }
.msg.good { background: var(--good-bg); color: var(--good); }
.msg.warn { background: var(--warn-bg); color: var(--warn); }
.msg.bad { background: var(--bad-bg); color: var(--bad); }
.msg:empty { display: none; }

/* ---- lists ------------------------------------------------------------- */

.list { list-style: none; margin: 0; padding: 0; }
.list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  border-top: 1px solid var(--line);
}
.list li:first-child { border-top: 0; }
.list .who { flex: 1; min-width: 0; }
.list .who strong { display: block; font-weight: 560; }
.list .who span { color: var(--ink-3); font-size: 12.5px; }
.list .amt { font-variant-numeric: tabular-nums; font-weight: 580; white-space: nowrap; text-align: right; }
.list .fiat { font-weight: 400; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.list .amt.out { color: var(--ink); }
.list .amt.in { color: var(--good); }

.avatar {
  width: 32px; height: 32px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); flex: none;
}
.avatar svg { width: 16px; height: 16px; }

.empty { color: var(--ink-3); font-size: 13.5px; text-align: center; padding: 22px 8px; }

/* ---- steps ------------------------------------------------------------- */

.steps { display: flex; gap: 6px; margin: 0 0 16px; }
.steps div {
  flex: 1; height: 3px; border-radius: 2px; background: var(--line);
}
.steps div.done { background: var(--accent); }

.review { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-top: 12px; }
.review:empty { display: none; }
.review dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.review dt { color: var(--ink-2); }
.review dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.review .total { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; font-weight: 600; }

details { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
summary { cursor: pointer; font-size: 13.5px; color: var(--ink-2); }
details[open] summary { margin-bottom: 10px; }

/* The recovery phrase. Numbered and in columns, because it gets copied onto
   paper by hand and a wall of 24 words in a row is where people lose their
   place. */
.phrase {
  list-style: none; counter-reset: w; margin: 12px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px;
}
@media (min-width: 30rem) { .phrase { grid-template-columns: repeat(4, 1fr); } }
.phrase li { counter-increment: w; font-size: 13px; display: flex; gap: 7px; }
.phrase li::before {
  content: counter(w); color: var(--ink-3); min-width: 16px; text-align: right;
  font-variant-numeric: tabular-nums;
}

.hidden { display: none !important; }

/* The cold-scan banner. A first scan reads one transaction at a time, and a
   silent pause there reads as a hang, so it says what it is doing and counts. */
.scanbar {
  padding: 0.55rem 1rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.85rem;
  text-align: center;
}

/* What the wallet was asked and what it answered, shown when connecting fails.
   Without it a refusal reads as the button doing nothing. */
.wallet-trail {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.6rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 11rem;
  overflow: auto;
}


/* A section label, as the board sets them: 10px monospace, upper case, widely
   tracked. Measured from the rendered design rather than approximated. */
.eyebrow, .micro-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ---- recipient combobox --------------------------------------------------
   One field that both filters saved payees and accepts a pasted address. The
   old version was a <select> plus a second box that appeared when you chose
   "someone new", which made picking a saved payee and typing a new one feel
   like two different tasks. */
.combo { position: relative; }

.combo-list {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(30, 22, 12, 0.1);
  max-height: 15rem;
  overflow: auto;
}

.combo-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 9px 11px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.combo-list li:last-child { border-bottom: 0; }
.combo-list li:hover,
.combo-list li:focus { background: var(--surface-2); outline: none; }

.combo-name { font-size: 13px; color: var(--ink); }
.combo-addr {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
}

/* The verdict on what is in the box. An address is checksummed so that a typo
   is caught here rather than becoming a payment nobody can reverse, so the
   answer is shown as soon as it is known and not held until send. */
.addr-ok, .addr-bad {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  margin: 6px 0 10px;
  line-height: 1.5;
}
.addr-ok { color: var(--good); }
.addr-bad { color: var(--bad); }

/* ---- the activity tab ----------------------------------------------------
   The balance screen answers "what happened lately". This answers "what
   exactly happened", so each entry carries the things that make a record
   checkable: both transaction ids of a transfer, the note it consumed, the
   fee, and the leaf a received note landed on. */
.ledger { display: grid; gap: 8px; }

.ledger-row {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--surface);
}

.ledger-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.ledger-head strong { font-size: 14px; flex: 1; }
.ledger-head .amt { font-family: var(--mono); font-size: 13px; }

.ledger-kind {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2px 6px;
}

.ledger-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  margin: 0;
  font-size: 12px;
}
.ledger-facts dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  align-self: baseline;
}
.ledger-facts dd { margin: 0; color: var(--ink-2); word-break: break-word; }
.ledger-facts .mono { font-size: 11px; }

@media (max-width: 30rem) {
  .ledger-facts { grid-template-columns: 1fr; gap: 1px 0; }
  .ledger-facts dt { margin-top: 6px; }
}

/* ---- balance screen ------------------------------------------------------
   The board leads with the number and puts the two things you do with it
   underneath. Deposit and cash out are forms behind those buttons rather than
   cards sitting open, because a screen showing every form at once is a screen
   nobody reads. */
.bal-line { display: flex; align-items: baseline; gap: 8px; justify-content: center; }

.bal-fiat {
  text-align: center;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fiat-big { font-family: var(--mono); font-size: 15px; color: var(--ink-2); }

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.panel-head .eyebrow { margin: 0; }
.panel-head.sticky {
  position: sticky;
  top: 0;
  background: var(--bg);
  padding: 10px 0;
  z-index: 5;
}

.empty-card { text-align: center; }
.empty-card h2 { margin-bottom: 6px; }

/* Notes are listed because a note is spent whole: the total cannot be
   subdivided, so the amounts you can actually pick are the useful thing. */
.note-list, .note-picks { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }

.note-list li {
  display: grid;
  grid-template-columns: 1fr max-content max-content;
  gap: 10px;
  align-items: baseline;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.note-picks button {
  width: 100%;
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  gap: 10px;
  align-items: baseline;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-family: inherit;
  font-size: 13px;
  padding: 10px 12px;
}
.note-picks button:hover { border-color: var(--accent); }

.note-n {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.note-amt { font-size: 13px; }
.note-fiat { font-size: 12px; color: var(--ink-2); }

.empty { color: var(--ink-3); font-size: 13px; padding: 10px 0; }

/* Settings is not a tab. It opens over whatever you were on and closes back to
   it, so the tab bar keeps the five places you actually move between. */
.settings-panel { padding-bottom: 24px; }

.icon-only { padding: 7px; line-height: 0; }
.icon-only svg { width: 18px; height: 18px; display: block; }

/* ---- segmented control ---------------------------------------------------
   The board uses these for anything with a small fixed set of choices. A
   <select> hides the options until you open it, which is the wrong trade when
   there are four and knowing they exist is half the point. */
.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 10px 0 12px;
  width: fit-content;
  max-width: 100%;
}
.seg button {
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  padding: 7px 12px;
  font-size: 10px;
  letter-spacing: 0.12em;
}
.seg button:last-child { border-right: 0; }
.seg button[aria-selected="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ---- contacts ------------------------------------------------------------ */
.contacts li { align-items: center; }
.contact-sum {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-size: 12px;
  margin-left: auto;
}
.contact-sum .fiat { color: var(--ink-2); font-size: 11px; }
.contact-sum .hint { font-size: 10px; }

/* ---- the two addresses --------------------------------------------------- */
.two-addr { display: grid; gap: 3px; margin: 0 0 12px; }
.two-addr dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 8px;
}
.two-addr dd { margin: 0; font-size: 12px; word-break: break-all; color: var(--ink); }

.tag {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1px 5px;
  margin-left: 4px;
  letter-spacing: 0.08em;
}
.tag-accent { border-color: var(--accent); color: var(--accent-text); }

/* ---- send: what there is to pay with ------------------------------------- */
.available {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin: 10px 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.available .mono { font-size: 16px; }
.available .fiat { color: var(--ink-2); font-size: 12px; margin-left: auto; }

/* ---- settings ------------------------------------------------------------
   The board leads Settings with what this software is, because that is the
   thing somebody deciding whether to trust it needs before any switch. */
.warn-strip {
  border: 1px solid var(--warn);
  background: var(--warn-bg, #fff4e0);
  color: var(--warn);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.5;
}

/* ---- the stages of a payment ---------------------------------------------
   A transfer is two chain transactions, and the second cannot start until the
   first confirms. The only question anybody has while waiting is which of them
   has happened, so the answer is a list rather than a sentence. */
.stages { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 2px; }

.stage {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 4px 10px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.stage:last-child { border-bottom: 0; }

.stage-mark {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border: 1px solid var(--ink-3);
  border-radius: 50%;
}
.stage-done .stage-mark { background: var(--good); border-color: var(--good); }
.stage-active .stage-mark { background: var(--accent); border-color: var(--accent); }
.stage-failed .stage-mark { background: var(--bad); border-color: var(--bad); }
.stage-waiting .stage-mark { opacity: 0.45; }

.stage-label { font-size: 13px; color: var(--ink); }
.stage-waiting .stage-label { color: var(--ink-3); }
.stage-detail {
  grid-column: 2;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  word-break: break-word;
}

/* The active stage is the one still happening, so it says so without needing a
   spinner that would imply the page must stay open. It need not. */
.stage-active .stage-label::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 12px;
  margin-left: 6px;
  vertical-align: -2px;
  background: var(--accent);
  animation: stage-blink 1.1s steps(2, start) infinite;
}
@keyframes stage-blink { to { visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .stage-active .stage-label::after { animation: none; }
}