/* wallet.css: the only stylesheet the wallet host serves. Every brand decision is a token in the
   first :root block; a restyle edits tokens, and templates carry class names only. The dark block only
   points light tokens at their -dark twins. The look is an achromatic ledger: ink on an off-white ground,
   white cards, one blue for the stages a transaction has reached, and colour elsewhere only for a change
   that matters. */
:root {
  color-scheme: light dark;
  --w-ground: #f8f8f8;       /* page ground, sidebar */
  --w-card: #ffffff;         /* cards, header, tab bar, inputs */
  --w-sheet: #ffffff;        /* the account sheet and a confirm */
  --w-raised: #eeeeee;       /* wells: facts, signed fields, the hash, the account id */
  --w-line: #e6e6e6;         /* borders of cards, the header, inputs */
  --w-rule: #f0f0f0;         /* rules between rows on a card */
  --w-rule-raised: #e2e2e2;  /* rules between rows in a well */
  --w-ink: #0a0a0a;
  --w-muted: #6b6b6b;
  --w-secondary: #e5e5e5;    /* secondary buttons */
  --w-pill: #eaeaea;         /* the current navigation item */
  --w-chip: #eeeeee; --w-chip-ink: #3d3d3d;
  --w-track: #e6e6e6;        /* a journey stage still to come, an empty meter segment */
  --w-control: #d4d4d4;      /* the sheet's handle, the ring of a stage still to come */
  /* The accent is ink by default and follows it into the dark scheme. A rebrand sets one colour here;
     text on the accent is --w-accent-ink (--w-accent-ink-dark in the dark scheme), which a mid-tone
     accent may need set to #ffffff in both. */
  --w-accent: var(--w-ink);
  --w-accent-ink: #ffffff;
  /* The journey colour marks the stages a transaction has reached, and nothing else: each stage done solid, and
     the stage it is in now in the lighter tint, whose label stays in the journey colour. */
  --w-journey: #1d5fbf; --w-journey-soft: #8fb0e3;
  --w-received: #2e7d32;     /* an amount that came in */
  --w-refused: #c4242a;      /* a rejection's few words */
  --w-notice: #fffbeb; --w-warn-edge: #fde68a; --w-warn: #92400e;   /* warning notices */
  --w-warn-button: #ffffff;                                         /* a button on a warning */
  --w-ok-bg: #dcfae5; --w-ok: #04250e;                              /* success notices */
  --w-bad-bg: #ffedea; --w-bad: #831c1e;                            /* refusal notices */
  --w-scrim: rgba(10, 10, 10, 0.45);
  --w-shadow-sheet: 0 -0.5rem 1.5rem rgba(0, 0, 0, 0.18);
  --w-shadow-dialog: 0 0.25rem 1rem rgba(0, 0, 0, 0.08);
  /* A QR code keeps dark modules on a light ground in both schemes, since an inverted code scans badly, so
     the dark block does not map it. */
  --w-qr-ink: #0a0a0a; --w-qr-bg: #ffffff;
  /* Face pairs, ink on tint, by the face-N class a face takes from its hash. */
  --w-face-0: #0e7c86; --w-face-0-bg: #ddf1f2;
  --w-face-1: #3d5a80; --w-face-1-bg: #e3eaf3;
  --w-face-2: #2f6b3a; --w-face-2-bg: #e3f1e5;
  --w-face-3: #8a4b00; --w-face-3-bg: #fbecd9;
  --w-face-4: #6b3d8a; --w-face-4-bg: #efe6f4;
  --w-face-5: #93324f; --w-face-5-bg: #f7e5e9;
  --w-face-6: #5b6314; --w-face-6-bg: #eef0db;
  --w-face-7: #3b4250; --w-face-7-bg: #e6e8ec;

  --w-ground-dark: #000000;  --w-card-dark: #111111;     --w-sheet-dark: #161616;  --w-raised-dark: #1c1c1c;
  --w-line-dark: #222222;    --w-rule-dark: #1a1a1a;     --w-rule-raised-dark: #2a2a2a;
  --w-ink-dark: #ffffff;     --w-muted-dark: #b4b4b4;    --w-secondary-dark: #262626; --w-pill-dark: #1f1f1f;
  --w-chip-dark: #262626;    --w-chip-ink-dark: #d0d0d0; --w-track-dark: #2e2e2e;  --w-control-dark: #3a3a3a;
  --w-accent-ink-dark: #0a0a0a;
  --w-journey-dark: #5b9bff; --w-journey-soft-dark: #2f5694; --w-received-dark: #3fc07a; --w-refused-dark: #e5566f;
  --w-notice-dark: #1f1808;  --w-warn-edge-dark: #4a3810; --w-warn-dark: #f2c46d; --w-warn-button-dark: #2a2210;
  --w-ok-bg-dark: #132a1c;   --w-ok-dark: #7ee0a6;       --w-bad-bg-dark: #2c1a20; --w-bad-dark: #ff9aa9;
  --w-scrim-dark: rgba(0, 0, 0, 0.6);
  --w-face-0-dark: #4fc3cc; --w-face-0-bg-dark: #0d2c2f;
  --w-face-1-dark: #8fb0dc; --w-face-1-bg-dark: #182233;
  --w-face-2-dark: #7cc98c; --w-face-2-bg-dark: #12261a;
  --w-face-3-dark: #e8a65a; --w-face-3-bg-dark: #2e1f0c;
  --w-face-4-dark: #c49ae0; --w-face-4-bg-dark: #24162e;
  --w-face-5-dark: #e888a5; --w-face-5-bg-dark: #2e121b;
  --w-face-6-dark: #c5cf6a; --w-face-6-bg-dark: #22250c;
  --w-face-7-dark: #aab3c2; --w-face-7-bg-dark: #1c1f25;

  --w-font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --w-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* ids, keys, addresses, hashes */
  /* Type: each size with its line height. */
  --w-size-tiny: 0.6875rem;   --w-lh-tiny: 1rem;         /* 11/16 tab labels, chips */
  --w-size-small: 0.75rem;    --w-lh-small: 1rem;        /* 12/16 hints, times, the testnet line */
  --w-size-note: 0.8125rem;   --w-lh-note: 1.125rem;     /* 13/18 notices, ids, facts, sublines */
  --w-size-body: 0.875rem;    --w-lh-body: 1.25rem;      /* 14/20 body, buttons, navigation */
  --w-size-name: 0.9375rem;   --w-lh-name: 1.375rem;     /* 15/22 product name, a confirm's text, main buttons */
  --w-size-lead: 1rem;        --w-lh-lead: 1.375rem;     /* 16/22 section headings, inputs */
  --w-lh-lead-text: 1.5rem;                              /* 16/24 a signed-out page's lead */
  --w-size-dialog: 1.25rem;   --w-lh-dialog: 1.625rem;   /* 20/26 a confirm's title, the balance's unit */
  --w-size-title: 1.5rem;     --w-lh-title: 1.875rem;    /* 24/30 a page's title */
  --w-size-hero: 1.75rem;     --w-lh-hero: 2.125rem;     /* 28/34 a signed-out page's title */
  --w-size-hero-wide: 2rem;   --w-lh-hero-wide: 2.375rem; /* 32/38 the same on a wide screen */
  --w-size-balance: 2.125rem; --w-lh-balance: 2.5rem;    /* 34/40 the balance */
  --w-weight-body: 400; --w-weight-strong: 500; --w-weight-heading: 700;
  --w-tracking-title: -0.01em; --w-tracking-hero: -0.02em;

  --w-space-1: 0.125rem;  /* 2 */
  --w-space-2: 0.25rem;   /* 4 */
  --w-space-3: 0.375rem;  /* 6 */
  --w-space-4: 0.5rem;    /* 8 */
  --w-space-5: 0.625rem;  /* 10 */
  --w-space-6: 0.75rem;   /* 12 */
  --w-space-7: 0.875rem;  /* 14 */
  --w-space-8: 1rem;      /* 16 */
  --w-space-9: 1.25rem;   /* 20 */
  --w-space-10: 1.5rem;   /* 24 */
  --w-space-11: 2rem;     /* 32 */
  --w-space-12: 2.5rem;   /* 40 */
  --w-space-13: 3rem;     /* 48 */
  --w-space-14: 6rem;     /* 96 */
  --w-radius-chip: 0.25rem; --w-radius: 0.375rem; --w-radius-card: 0.5rem; --w-radius-face: 20%; --w-round: 50%;

  --w-head: 3.25rem;        /* 52 header */
  --w-head-wide: 3.5rem;    /* 56 a signed-out header on a wide screen */
  --w-tabbar: 4rem;         /* 64 tab bar */
  --w-tap: 2.75rem;         /* 44 minimum target; buttons and inputs on a narrow screen */
  --w-button-main: 3rem;    /* 48 a signed-out page's or a confirm's main buttons on a narrow screen */
  --w-button-wide: 2.25rem; /* 36 buttons and sidebar rows on a wide screen */
  --w-button-wide-main: 2.5rem; /* 40 a signed-out page's or a confirm's buttons on a wide screen */
  --w-menu-row: 3.25rem;    /* 52 account sheet rows */
  --w-chip-h: 1.25rem;      /* 20 */
  --w-mark: 1.375rem;       /* 22 */
  --w-icon: 1.25rem;        /* 20 tab, notice and button icons */
  --w-icon-wide: 1.125rem;  /* 18 sidebar icons */
  --w-icon-s: 1rem;         /* 16 chevrons, notice icons */
  --w-icon-l: 1.5rem;       /* 24 add-key choice icons */
  --w-pill-w: 3rem; --w-pill-h: 1.625rem; /* 48 by 26, the current tab's icon pill */
  --w-stroke: 1.5;          /* icons' line width, in their viewBox units */
  --w-stroke-mark: 2;       /* the mark's */
  --w-face-row: 1.25rem;    /* 20 a face in a row */
  --w-face-s: 1.75rem;      /* 28 the header's face */
  --w-face-card: 2rem;      /* 32 the sidebar's account card */
  --w-face-l: 2.25rem;      /* 36 the keys list */
  --w-face-sheet: 2.5rem;   /* 40 the account sheet */
  --w-disc: 2.25rem;        /* 36 token disc */
  --w-handle-w: 2.25rem; --w-handle-h: 0.25rem; /* 36 by 4, the sheet's handle */
  --w-seg: 1rem;            /* 16 a journey segment in a row */
  --w-seg-h: 0.1875rem;     /* 3 journey segment */
  --w-seg-radius: 0.125rem; /* 2 */
  --w-dot: 0.625rem;        /* 10 journey step dot */
  --w-dot-ring: 0.125rem;   /* 2 */
  --w-dot-top: 0.3125rem;   /* 5 the dot's offset to the step's first line */
  --w-step-gutter: 1.25rem; /* 20 the column the dots and their line take */
  --w-qr: 11.5rem;          /* 184, quiet zone included */
  --w-qr-wide: 13.75rem;    /* 220 */
  --w-progress: 0.25rem;    /* 4 */
  --w-column: 26.25rem;     /* 420 popup column */
  --w-narrow: 30rem;        /* 480 signed-out column */
  --w-form: 35rem;          /* 560 wide form */
  --w-dialog: 25rem;        /* 400 a dialog on a wide screen */
  --w-side: 16.5rem;        /* 264 sidebar */
  --w-page: 65rem;          /* 1040 wide main */
  --w-review: 40rem;        /* 640 a review's column on a wide screen */
  --w-card-min: 20rem;      /* 320 home pair minimum */
  --w-aside: 21.25rem;      /* 340 a wide page's side column */
  --w-field-name: 7rem;     /* 112 signed field name column */
  --w-field-name-wide: 11rem; /* 176 the same on a wide screen */
  --w-hash: 32ch;           /* a 64-character hash on two lines */
  --w-group-gap: 0.5ch;     /* between the groups of five of an id or address */
  --w-bar-room: 7.5rem;     /* 120 room under a popup review for its fixed bar */
  --w-border: 1px; --w-focus: 2px; --w-focus-inset: -2px;
  --w-transparent: transparent; --w-current: currentColor; --w-zero: 0; --w-height: 100vh; --w-above: 1; --w-top: 2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --w-ground: var(--w-ground-dark); --w-card: var(--w-card-dark); --w-sheet: var(--w-sheet-dark);
    --w-raised: var(--w-raised-dark); --w-line: var(--w-line-dark); --w-rule: var(--w-rule-dark);
    --w-rule-raised: var(--w-rule-raised-dark); --w-ink: var(--w-ink-dark); --w-muted: var(--w-muted-dark);
    --w-secondary: var(--w-secondary-dark); --w-pill: var(--w-pill-dark); --w-chip: var(--w-chip-dark);
    --w-chip-ink: var(--w-chip-ink-dark); --w-track: var(--w-track-dark); --w-control: var(--w-control-dark);
    --w-accent-ink: var(--w-accent-ink-dark); --w-journey: var(--w-journey-dark);
    --w-journey-soft: var(--w-journey-soft-dark);
    --w-received: var(--w-received-dark); --w-refused: var(--w-refused-dark); --w-notice: var(--w-notice-dark);
    --w-warn-edge: var(--w-warn-edge-dark); --w-warn: var(--w-warn-dark); --w-ok-bg: var(--w-ok-bg-dark);
    --w-warn-button: var(--w-warn-button-dark);
    --w-ok: var(--w-ok-dark); --w-bad-bg: var(--w-bad-bg-dark); --w-bad: var(--w-bad-dark);
    --w-scrim: var(--w-scrim-dark);
    --w-face-0: var(--w-face-0-dark); --w-face-0-bg: var(--w-face-0-bg-dark);
    --w-face-1: var(--w-face-1-dark); --w-face-1-bg: var(--w-face-1-bg-dark);
    --w-face-2: var(--w-face-2-dark); --w-face-2-bg: var(--w-face-2-bg-dark);
    --w-face-3: var(--w-face-3-dark); --w-face-3-bg: var(--w-face-3-bg-dark);
    --w-face-4: var(--w-face-4-dark); --w-face-4-bg: var(--w-face-4-bg-dark);
    --w-face-5: var(--w-face-5-dark); --w-face-5-bg: var(--w-face-5-bg-dark);
    --w-face-6: var(--w-face-6-dark); --w-face-6-bg: var(--w-face-6-bg-dark);
    --w-face-7: var(--w-face-7-dark); --w-face-7-bg: var(--w-face-7-bg-dark);
  }
}

/* Fonts. The wallet serves both files itself, each one variable font with every weight; SOURCES.md pins their
   bytes. Text shows in the fallback until a file arrives. Each v is its font's hex SHA-384, which a font change must
   update: the wallet caches a file only at that URL. */
@font-face { font-family: "Geist"; src: url("/fonts/geist.woff2?v=413e59314de6e4cc0e538c3d9223a0d68e4ba1f49906c13fec4bd15eb6308cfa3655eddba01a890c480025fef9ac2781") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono.woff2?v=9b00e9a368316e2b7fc4fefd7b73d093a9c893bb738cb18377d5361d1a8c59ddc3d107ee2131f496ddafb383fe93e9d2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* Frame. Narrow (phone, popup): a header, one column, and on a signed-in page a five-item tab bar stuck to the
   bottom. Signed out or in a popup, the header sits over one centred column. */
*, ::before, ::after { box-sizing: border-box; }
body.w {
  margin: var(--w-zero);
  min-height: var(--w-height);
  display: flex;
  flex-direction: column;
  background: var(--w-ground);
  color: var(--w-ink);
  font-family: var(--w-font);
  font-size: var(--w-size-body);
  font-weight: var(--w-weight-body);
  line-height: var(--w-lh-body);
  font-variant-numeric: tabular-nums;
}
p { margin: var(--w-zero); }
a { color: var(--w-ink); text-underline-offset: var(--w-space-2); }
pre, code { font-family: var(--w-mono); font-size: var(--w-size-note); overflow-wrap: anywhere; white-space: pre-wrap; }
/* A full id or address in groups of five: the gap is margin, not text, so the element's text stays the value; a
   line breaks only between groups, and the gap after a group, rather than before, leaves a wrapped line unindented. */
.w-groups > span { white-space: nowrap; }
.w-groups > span:not(:last-child) { margin-inline-end: var(--w-group-gap); }
/* The sidebar wrapper only exists for the wide app frame; elsewhere its header and nav are the body's own rows. */
.w-side { display: contents; }
.w-head {
  display: flex;
  align-items: center;
  gap: var(--w-space-5);
  min-height: var(--w-head);
  padding: var(--w-zero) var(--w-space-8);
  background: var(--w-card);
  border-bottom: var(--w-border) solid var(--w-line);
}
.w-logo { display: flex; flex: 1 1 auto; align-items: center; gap: var(--w-space-5); color: var(--w-ink); text-decoration: none; }
/* Signed out, the wallet host sits at the header's far end; signed in on a narrow screen and in a popup it is left
   out, and the sidebar stacks it under the name. */
.w-brand { display: flex; flex: 1; align-items: baseline; justify-content: space-between; gap: var(--w-space-5); min-width: var(--w-zero); }
.w-name { font-size: var(--w-size-name); font-weight: var(--w-weight-strong); line-height: var(--w-lh-name); white-space: nowrap; }
.w-host { overflow: hidden; color: var(--w-muted); font-family: var(--w-mono); font-size: var(--w-size-small); line-height: var(--w-lh-small); text-overflow: ellipsis; white-space: nowrap; }
.w-app .w-host, body[data-popup="true"] .w-host { display: none; }
.w-from { flex: 0 1 auto; min-width: var(--w-zero); overflow: hidden; color: var(--w-muted); font-size: var(--w-size-small); text-overflow: ellipsis; white-space: nowrap; }
.w-from code { font-size: var(--w-size-small); white-space: nowrap; }
.w-mark { width: var(--w-mark); height: var(--w-mark); flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: var(--w-stroke-mark); stroke-linecap: round; stroke-linejoin: round; }
.w-mark circle { fill: currentColor; stroke: none; }
/* Icons are strokes in the text colour around them, so a link's or button's colour colours its icon. */
.w-icon {
  width: var(--w-icon);
  height: var(--w-icon);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--w-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.w-icon-s { width: var(--w-icon-s); height: var(--w-icon-s); }
.w-icon-l { width: var(--w-icon-l); height: var(--w-icon-l); }
/* The account button opens the account sheet: on a narrow screen the face alone in its 44px target; in the wide
   sidebar a card with the short id and the testnet chip. */
.w-who {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--w-space-5);
  min-width: var(--w-tap);
  min-height: var(--w-tap);
  margin-right: calc(var(--w-space-5) * -1);
  padding: var(--w-zero);
  border: var(--w-zero);
  background: var(--w-transparent);
  color: var(--w-ink);
  font-family: var(--w-font);
  font-size: var(--w-size-body);
  text-align: left;
  cursor: pointer;
}
.w-who-text { display: none; }
.w-who-id { overflow: hidden; font-family: var(--w-mono); font-size: var(--w-size-note); text-overflow: ellipsis; white-space: nowrap; }
.w-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--w-space-10);
  width: 100%;
  max-width: var(--w-narrow);
  margin: var(--w-zero) auto;
  padding: var(--w-space-11) var(--w-space-9) var(--w-space-9);
}
.w-app .w-main { max-width: none; gap: var(--w-space-8); padding: var(--w-space-8); }
body[data-popup="true"] .w-main { max-width: var(--w-column); gap: var(--w-space-8); padding: var(--w-space-8); }
/* Standalone signed-in pages carry the tab bar; the popup omits it, because a popup does one task. The bar shows
   five items, Home, Send, Deposit, Withdraw and Keys; on a phone the account sheet holds the app link and Sign out. */
.w-tabs {
  order: 1;
  position: sticky;
  bottom: var(--w-zero);
  display: grid;
  grid-template-columns: repeat(5, minmax(var(--w-zero), 1fr));
  min-height: var(--w-tabbar);
  margin-top: auto;
  background: var(--w-card);
  border-top: var(--w-border) solid var(--w-line);
}
.w-tabs a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--w-space-1);
  min-height: var(--w-tap);
  color: var(--w-muted);
  font-size: var(--w-size-tiny);
  line-height: var(--w-lh-tiny);
  text-decoration: none;
  white-space: nowrap;
}
.w-tabs .w-more { display: none; }
/* On the bar the current item's icon sits in a pill; in the sidebar the whole row is the pill. */
.w-tabs .w-icon {
  width: var(--w-pill-w);
  height: var(--w-pill-h);
  padding: calc((var(--w-pill-h) - var(--w-icon)) / 2) calc((var(--w-pill-w) - var(--w-icon)) / 2);
  border-radius: var(--w-radius);
}
.w-tabs a[aria-current="page"] { color: var(--w-ink); font-weight: var(--w-weight-strong); }
.w-tabs a[aria-current="page"] .w-icon { background: var(--w-pill); }

/* The testnet line closes a narrow page, after its main action; the backup notice opens it, above the title, as the
   phone boards draw them. A wide signed-in page puts the testnet line under its title. */
.w-net { order: 1; color: var(--w-muted); font-size: var(--w-size-small); line-height: var(--w-lh-small); }
.w-main:not(:has(.w-end)) .w-net { margin-top: auto; }
.w-backup { order: -1; }
/* A page's main action sits at the bottom of a narrow screen. */
.w-end { margin-top: auto; }

/* Wide (site only): the header and the links become a sidebar on the page colour beside a 1040px column. */
@media (min-width: 60rem) {
  body.w-app { display: grid; grid-template-columns: var(--w-side) minmax(var(--w-zero), 1fr); align-items: start; }
  .w-app .w-side {
    position: sticky;
    top: var(--w-zero);
    display: flex;
    flex-direction: column;
    gap: var(--w-space-9);
    height: var(--w-height);
    overflow-y: auto;
    padding: var(--w-space-10) var(--w-space-8);
  }
  .w-app .w-head { flex-direction: column; align-items: stretch; gap: var(--w-space-9); min-height: var(--w-zero); padding: var(--w-zero); background: var(--w-transparent); border: var(--w-zero); }
  .w-app .w-logo { flex: none; padding: var(--w-zero) var(--w-space-4); }
  .w-app .w-brand { flex-direction: column; align-items: flex-start; gap: var(--w-zero); }
  .w-app .w-host { display: block; }
  .w-app .w-who {
    justify-content: flex-start;
    margin: var(--w-zero);
    padding: var(--w-space-5) var(--w-space-6);
    border: var(--w-border) solid var(--w-line);
    border-radius: var(--w-radius-card);
    background: var(--w-card);
  }
  .w-app .w-who .w-face { width: var(--w-face-card); height: var(--w-face-card); }
  .w-app .w-who-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--w-space-1); min-width: var(--w-zero); }
  .w-tabs {
    order: 0;
    position: static;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--w-space-1);
    min-height: var(--w-zero);
    margin: var(--w-zero);
    background: var(--w-transparent);
    border: var(--w-zero);
  }
  .w-tabs a, .w-tabs .w-more {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--w-space-5);
    min-height: var(--w-button-wide);
    padding: var(--w-zero) var(--w-space-5);
    border-radius: var(--w-radius);
    color: var(--w-ink);
    font-size: var(--w-size-body);
    line-height: var(--w-lh-body);
  }
  .w-tabs .w-icon { width: var(--w-icon-wide); height: var(--w-icon-wide); padding: var(--w-zero); color: var(--w-muted); }
  .w-tabs a[aria-current="page"] { background: var(--w-pill); }
  .w-tabs a[aria-current="page"] .w-icon { background: var(--w-transparent); color: var(--w-ink); }
  /* Open the app, then Sign out, at the bottom of the sidebar. */
  .w-tabs .w-more:not(.w-more ~ .w-more) { margin-top: auto; }
  .w-app .w-main { max-width: calc(var(--w-page) + 2 * var(--w-space-12)); margin: var(--w-zero); padding: var(--w-space-11) var(--w-space-12) var(--w-space-13); }
  .w-app .w-main .w-net { order: 0; margin-top: calc(var(--w-space-2) - var(--w-space-8)); font-size: var(--w-size-note); line-height: var(--w-lh-note); }
  .w-backup { order: 0; }
  .w-end { margin-top: var(--w-zero); }
  body.w:not(.w-app) .w-head { min-height: var(--w-head-wide); padding: var(--w-zero) var(--w-space-11); }
  body.w:not(.w-app):not([data-popup="true"]) .w-main { max-width: calc(var(--w-narrow) + 2 * var(--w-space-10)); gap: var(--w-space-9); padding: var(--w-space-14) var(--w-space-10) var(--w-space-13); }
  body.w:not(.w-app):not([data-popup="true"]) .w-net { margin-top: var(--w-zero); }
}

/* The account sheet: an HTML popover over the page and its scrim, at the bottom of a narrow screen and centred on a
   wide one. Its display is set only while open, so the popover's own hiding stands. A confirm's main column below
   takes the same sheet. */
.w-sheet, .w-confirm .w-main {
  position: fixed;
  inset: auto var(--w-zero) var(--w-zero);
  max-width: none;
  margin: var(--w-zero);
  padding: var(--w-space-4) var(--w-space-8) var(--w-space-9);
  border-radius: var(--w-radius-card) var(--w-radius-card) var(--w-zero) var(--w-zero);
  background: var(--w-sheet);
  box-shadow: var(--w-shadow-sheet);
}
.w-sheet { width: 100%; max-height: 100%; overflow-y: auto; border: var(--w-zero); color: var(--w-ink); }
.w-sheet:popover-open { display: flex; flex-direction: column; gap: var(--w-space-8); }
.w-sheet::backdrop { background: var(--w-scrim); }
.w-sheet::before, .w-confirm .w-main::before {
  content: "";
  order: -2;
  align-self: center;
  flex-shrink: 0;
  width: var(--w-handle-w);
  height: var(--w-handle-h);
  border-radius: var(--w-seg-radius);
  background: var(--w-control);
}
.w-sheet-head { display: flex; align-items: center; gap: var(--w-space-6); }
.w-sheet-head .w-face { width: var(--w-face-sheet); height: var(--w-face-sheet); }
.w-sheet-title { display: flex; flex-direction: column; gap: var(--w-space-1); }
/* A well holds one value on the raised tone, such as the account id beside its Copy button. */
.w-well { display: flex; align-items: center; gap: var(--w-space-6); padding: var(--w-space-6); border-radius: var(--w-radius-card); background: var(--w-raised); }
.w-well code { flex: 1; min-width: var(--w-zero); line-height: var(--w-lh-note); }
/* A menu is a list of links, one per row, each with its icon, label, and a muted value at its end. */
.w-menu { display: flex; flex-direction: column; }
.w-menu a { display: flex; align-items: center; gap: var(--w-space-6); min-height: var(--w-menu-row); color: var(--w-ink); text-decoration: none; }
.w-menu a + a { border-top: var(--w-border) solid var(--w-rule); }
.w-menu .w-icon { color: var(--w-muted); }
.w-menu-label { flex: 1; }
.w-menu code { font-size: var(--w-size-small); }
/* A confirm is its own page drawn as a dialog: the frame stays beneath the scrim, inert, and the main column is the
   sheet, at the bottom of a narrow screen and centred on a wide one. */
.w-confirm::after { content: ""; position: fixed; inset: var(--w-zero); z-index: var(--w-above); background: var(--w-scrim); }
.w-confirm .w-main { z-index: var(--w-top); gap: var(--w-space-6); }
.w-confirm .w-main .w-title { margin-top: var(--w-space-4); font-size: var(--w-size-dialog); line-height: var(--w-lh-dialog); }
.w-confirm .w-main .w-lead { color: var(--w-muted); font-size: var(--w-size-name); line-height: var(--w-lh-name); }
.w-confirm .w-end { margin-top: var(--w-space-4); }
.w-confirm .w-net { margin-top: var(--w-zero); }
@media (min-width: 60rem) {
  .w-sheet, .w-confirm .w-main {
    inset: var(--w-zero);
    width: min(var(--w-dialog), 100% - 2 * var(--w-space-10));
    height: fit-content;
    margin: auto;
    padding: var(--w-space-10);
    border: var(--w-border) solid var(--w-line);
    border-radius: var(--w-radius-card);
    box-shadow: var(--w-shadow-dialog);
  }
  .w-sheet::before, .w-confirm .w-main::before { display: none; }
  .w-confirm .w-main { gap: var(--w-space-4); }
  .w-confirm .w-main .w-title { margin: var(--w-zero); }
  .w-confirm .w-main .w-lead { font-size: var(--w-size-body); line-height: var(--w-lh-body); }
  .w-confirm .w-end { flex-direction: row-reverse; justify-content: flex-start; margin-top: var(--w-space-8); }
  .w-confirm .w-main .w-net { order: 1; margin-top: var(--w-space-4); }
}

/* Type */
.w-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--w-space-6); }
.w-title {
  flex: 1 1 auto;
  margin: var(--w-zero);
  font-size: var(--w-size-hero);
  font-weight: var(--w-weight-heading);
  line-height: var(--w-lh-hero);
  letter-spacing: var(--w-tracking-hero);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.w-app .w-title, body[data-popup="true"] .w-title { font-size: var(--w-size-title); line-height: var(--w-lh-title); letter-spacing: var(--w-tracking-title); }
.w-heading, .w-subhead { margin: var(--w-zero); font-size: var(--w-size-lead); font-weight: var(--w-weight-strong); line-height: var(--w-lh-lead); }
.w-lead { font-size: var(--w-size-lead); line-height: var(--w-lh-lead-text); }
.w-app .w-lead, body[data-popup="true"] .w-lead { font-size: var(--w-size-body); line-height: var(--w-lh-body); }
.w-hint { margin: var(--w-zero); color: var(--w-muted); font-size: var(--w-size-small); line-height: var(--w-lh-small); }
/* A hint in a step, an option, the keys list, a summary's head, a wait or an applied outcome takes the note size. */
.w-journey-steps .w-hint, .w-plan .w-hint, .w-choice > .w-hint, .w-option .w-hint, .w-key-section > .w-hint,
.w-summary-head .w-hint, .w-sending .w-hint, .w-done .w-hint { font-size: var(--w-size-note); line-height: var(--w-lh-note); }
.w-journey-steps .w-hint, .w-plan .w-hint { font-weight: var(--w-weight-body); }
.w-muted { color: var(--w-muted); }
.w-strong { font-weight: var(--w-weight-strong); }
.w-center { text-align: center; }
.w-top-link { font-size: var(--w-size-body); }
.w-top-note { flex-basis: 100%; }
.w-received { color: var(--w-received); }
.w-refused { color: var(--w-refused); }
@media (min-width: 60rem) {
  body.w:not(.w-app):not([data-popup="true"]) .w-title { font-size: var(--w-size-hero-wide); line-height: var(--w-lh-hero-wide); }
}

/* Chips and notices: one base, and a state class that takes its token pair; a link inside takes the notice's ink. */
.w-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--w-space-2);
  min-height: var(--w-chip-h);
  padding: var(--w-zero) var(--w-space-3);
  border-radius: var(--w-radius-chip);
  background: var(--w-chip);
  color: var(--w-chip-ink);
  font-family: var(--w-font);
  font-size: var(--w-size-tiny);
  font-weight: var(--w-weight-strong);
  line-height: var(--w-lh-tiny);
  white-space: nowrap;
}
.is-bad { background: var(--w-bad-bg); color: var(--w-bad); }
.is-wait { background: var(--w-raised); color: var(--w-ink); }
/* A notice is neutral on a card unless a state class colours it. */
.w-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--w-space-4);
  padding: var(--w-space-5) var(--w-space-6);
  border: var(--w-border) solid var(--w-line);
  border-radius: var(--w-radius);
  background: var(--w-card);
  font-size: var(--w-size-note);
  line-height: var(--w-lh-note);
}
.w-notice .w-icon { width: var(--w-icon-s); height: var(--w-icon-s); margin-top: var(--w-space-1); }
.w-notice a { color: var(--w-current); font-weight: var(--w-weight-strong); }
.w-ok { border-color: var(--w-transparent); background: var(--w-ok-bg); color: var(--w-ok); }
.w-warn { border-color: var(--w-warn-edge); background: var(--w-notice); color: var(--w-warn); }
.w-bad { border-color: var(--w-transparent); background: var(--w-bad-bg); color: var(--w-bad); }
.w-alert {
  display: flex;
  flex-direction: column;
  gap: var(--w-space-2);
  padding: var(--w-space-7) var(--w-space-8);
  border-radius: var(--w-radius-card);
  background: var(--w-bad-bg);
  color: var(--w-bad);
  font-size: var(--w-size-note);
  line-height: var(--w-lh-note);
}
.w-alert .w-subhead, .w-aside .w-subhead { font-size: var(--w-size-body); line-height: var(--w-lh-body); }

/* Cards hold one step or one reading; a summary is the human reading of the signed bytes. */
.w-card, .w-summary {
  display: flex;
  flex-direction: column;
  gap: var(--w-space-6);
  padding: var(--w-space-8);
  border: var(--w-border) solid var(--w-line);
  border-radius: var(--w-radius-card);
  background: var(--w-card);
}
.w-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--w-space-6); }
.w-card-head > a { font-size: var(--w-size-note); }
/* Two columns on a wide screen, such as an address card beside its facts; one on a narrow one. */
.w-two { display: flex; flex-direction: column; gap: var(--w-space-8); }
/* Rows of a reading on a card: the name muted at the start, the value at the end, a rule between rows. */
.w-rows, .w-fields, .w-facts {
  display: grid;
  grid-template-columns: auto minmax(var(--w-zero), 1fr);
  margin: var(--w-zero);
}
.w-rows > *, .w-fields > *, .w-facts > * { padding-block: var(--w-space-5); overflow-wrap: anywhere; }
.w-rows > :nth-child(n+3) { border-top: var(--w-border) solid var(--w-rule); }
.w-rows dt, .w-fields dt, .w-facts dt { padding-right: var(--w-space-8); color: var(--w-muted); }
.w-rows dd, .w-facts dd { margin: var(--w-zero); min-width: var(--w-zero); text-align: right; }
/* Facts are a page's figures in a well, such as a fee or a depth. */
.w-facts { padding: var(--w-space-2) var(--w-space-8); border-radius: var(--w-radius-card); background: var(--w-raised); font-size: var(--w-size-note); line-height: var(--w-lh-note); }
.w-facts > * { padding-block: var(--w-space-4); }
.w-facts > :nth-child(n+3), .w-fields > :nth-child(n+3) { border-top: var(--w-border) solid var(--w-rule-raised); }
/* Every signed field, as name and value in a well. */
.w-fields {
  grid-template-columns: var(--w-field-name) minmax(var(--w-zero), 1fr);
  column-gap: var(--w-space-6);
  padding: var(--w-space-1) var(--w-space-6);
  border-radius: var(--w-radius-card);
  background: var(--w-raised);
  font-size: var(--w-size-note);
  line-height: var(--w-lh-body);
}
.w-fields > * { padding-block: var(--w-space-3); }
.w-fields dt { padding-right: var(--w-zero); font-size: var(--w-size-small); }
.w-fields dd { margin: var(--w-zero); min-width: var(--w-zero); font-family: var(--w-mono); }
.w-signed { display: flex; flex-direction: column; gap: var(--w-space-4); }
.w-raw summary { min-height: var(--w-tap); display: flex; align-items: center; cursor: pointer; font-weight: var(--w-weight-strong); }
.w-raw pre { margin: var(--w-space-4) var(--w-zero) var(--w-zero); padding: var(--w-space-6); border-radius: var(--w-radius-card); background: var(--w-raised); font-size: var(--w-size-small); line-height: var(--w-lh-small); }
/* A list of rows, each with a rule above all but the first. */
.w-list {
  display: flex;
  flex-direction: column;
  margin: var(--w-zero);
  padding: var(--w-zero);
  list-style: none;
}
.w-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--w-space-6); min-height: var(--w-tap); padding: var(--w-space-6) var(--w-zero); }
.w-list li + li { border-top: var(--w-border) solid var(--w-rule); }
.w-amount { margin-left: auto; white-space: nowrap; font-weight: var(--w-weight-strong); }

/* The journey to Zcash: done stages in the journey colour, the stage a transaction is in now in its tint with its
   label in the journey colour, and stages still to come muted, so a finished journey is all in the journey colour.
   A journey is a track of one segment per stage with its name under it; a journey of steps stacks them with a dot
   and a line, each with a note; a bare track is the segments alone, as a row shows them. */
.w-journey {
  display: grid;
  grid-auto-columns: minmax(var(--w-zero), 1fr);
  grid-auto-flow: column;
  gap: var(--w-space-2);
  margin: var(--w-zero);
  padding: var(--w-zero);
  list-style: none;
  color: var(--w-muted);
  font-size: var(--w-size-small);
  line-height: var(--w-lh-small);
}
/* A segment, of a journey's track, a row's bare track or creation's progress, starts as the empty track. */
.w-journey > li::before, .w-track > span, .w-steps-bar span { height: var(--w-seg-h); border-radius: var(--w-seg-radius); background: var(--w-track); }
.w-journey > li::before { content: ""; display: block; margin-bottom: var(--w-space-4); }
.w-journey > .is-done { color: var(--w-ink); }
.w-journey > .is-done::before, .w-track > .is-done { background: var(--w-journey); }
.w-journey > .is-now, .w-stage.is-now, .w-journey-steps > .is-now .w-due { color: var(--w-journey); font-weight: var(--w-weight-strong); }
.w-journey > .is-now::before, .w-track > .is-now { background: var(--w-journey-soft); }
.w-journey-steps { grid-auto-flow: row; gap: var(--w-zero); font-size: var(--w-size-body); line-height: var(--w-lh-body); }
.w-journey-steps > li { position: relative; display: flex; flex-direction: column; gap: var(--w-space-1); padding: var(--w-zero) var(--w-zero) var(--w-space-9) calc(var(--w-step-gutter) + var(--w-space-6)); }
.w-journey-steps > li:last-child { padding-bottom: var(--w-zero); }
.w-journey-steps > li::before {
  position: absolute;
  top: var(--w-dot-top);
  left: calc((var(--w-step-gutter) - var(--w-dot)) / 2);
  width: var(--w-dot);
  height: var(--w-dot);
  margin: var(--w-zero);
  border: var(--w-dot-ring) solid var(--w-control);
  border-radius: var(--w-round);
  background: var(--w-transparent);
}
.w-journey-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--w-dot-top) + var(--w-dot));
  bottom: var(--w-zero);
  left: calc((var(--w-step-gutter) - var(--w-dot-ring)) / 2);
  width: var(--w-dot-ring);
  background: var(--w-track);
}
.w-journey-steps > .is-done::before { border-color: var(--w-journey); background: var(--w-journey); }
.w-journey-steps > .is-done:not(:last-child)::after { background: var(--w-journey); }
.w-journey-steps > .is-now::before { border-color: var(--w-journey-soft); background: var(--w-transparent); }
.w-journey-steps .w-stage { font-weight: var(--w-weight-strong); }
.w-track { display: flex; gap: var(--w-space-1); }
.w-track > span { width: var(--w-seg); }

/* Home: the balance and its actions, the one-key warning, tokens and activity, drawn on the page ground on a narrow
   screen with activity above tokens, as the phone board does. A wide screen puts the warning, or else the tokens,
   beside the balance, and activity under both. */
.w-home { display: flex; flex-direction: column; gap: var(--w-space-8); }
.w-home > .w-tokens { order: 1; }
.w-balance { gap: var(--w-space-2); }
.w-balance .w-subhead { color: var(--w-muted); font-size: var(--w-size-note); font-weight: var(--w-weight-body); line-height: var(--w-lh-note); }
.w-amount-big { font-size: var(--w-size-balance); font-weight: var(--w-weight-heading); line-height: var(--w-lh-balance); letter-spacing: var(--w-tracking-hero); overflow-wrap: anywhere; }
.w-unit { color: var(--w-muted); font-size: var(--w-size-dialog); font-weight: var(--w-weight-strong); letter-spacing: var(--w-zero); }
.w-balance .w-actions { margin-top: auto; padding-top: var(--w-space-6); }
.w-one-key .w-heading, .w-wide-only { display: none; }
/* A token: its disc beside its symbol over its name, its amount over its value, and its id under them all. */
.w-list .w-token { display: grid; grid-template-columns: var(--w-disc) minmax(var(--w-zero), 1fr) auto; gap: var(--w-space-1) var(--w-space-6); }
.w-token > .w-disc { grid-row: 1 / 3; }
.w-token > strong { font-weight: var(--w-weight-strong); overflow-wrap: anywhere; }
.w-token > .w-muted { font-size: var(--w-size-note); line-height: var(--w-lh-note); overflow-wrap: anywhere; }
.w-token > .w-amount, .w-token-value { grid-column: 3; text-align: right; }
.w-token-value { color: var(--w-muted); font-size: var(--w-size-note); line-height: var(--w-lh-note); white-space: nowrap; }
.w-disc { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--w-disc); height: var(--w-disc); border-radius: var(--w-round); background: var(--w-raised); color: var(--w-muted); font-weight: var(--w-weight-strong); }
.w-token-id { grid-column: 2 / -1; color: var(--w-muted); font-family: var(--w-mono); font-size: var(--w-size-small); line-height: var(--w-lh-small); overflow-wrap: anywhere; }
.w-row-end { display: flex; flex-direction: column; flex-shrink: 0; align-items: flex-end; gap: var(--w-space-2); margin-left: auto; white-space: nowrap; }
/* An activity row: its sentence over its stage, beside its amount over its time. */
.w-row { display: flex; flex: 1; align-items: center; gap: var(--w-space-6); min-width: var(--w-zero); color: var(--w-ink); text-decoration: none; }
.w-row-text { display: flex; flex: 1; flex-direction: column; gap: var(--w-space-3); min-width: var(--w-zero); overflow-wrap: anywhere; }
.w-row-text code { white-space: nowrap; }
.w-row-stage { display: flex; align-items: center; gap: var(--w-space-4); font-size: var(--w-size-small); line-height: var(--w-lh-small); }
.w-row-stage .w-stage:not(.is-now) { color: var(--w-muted); }
.w-row-unit { display: none; }
/* A back link sits over its page's title, its chevron turned to point back. */
.w-back { display: inline-flex; flex-basis: 100%; align-items: center; gap: var(--w-space-1); order: -1; color: var(--w-ink); text-decoration: none; }
.w-back .w-icon { transform: scaleX(-1); }
.w-empty { margin: var(--w-zero); padding: var(--w-space-7) var(--w-space-6); border: var(--w-border) dashed var(--w-control); border-radius: var(--w-radius-card); color: var(--w-muted); font-size: var(--w-size-note); line-height: var(--w-lh-note); }
@media (max-width: 59.99rem) {
  .w-app .w-balance, .w-app .w-home-list { padding: var(--w-zero); border: var(--w-zero); background: var(--w-transparent); }
  /* The phone board's home has no title, the tab bar naming the page, and it names the keys list by the page's title
     alone, so both headings stay for screen readers only. */
  .w-top-home, .w-key-section > .w-heading { position: absolute; width: var(--w-border); height: var(--w-border); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 60rem) {
  .w-card { padding: var(--w-space-10); }
  .w-home-list { padding-block: var(--w-space-4); }
  .w-home { display: grid; grid-template-columns: minmax(var(--w-zero), 1fr) var(--w-card-min); align-items: stretch; }
  .w-home > .w-tokens { order: 0; }
  .w-home > .w-activity, .w-home > .w-one-key + .w-tokens, .w-home > .w-balance:has(+ .w-activity) { grid-column: 1 / -1; }
  .w-one-key { flex-direction: column; gap: var(--w-space-5); padding: var(--w-space-9); border-radius: var(--w-radius-card); font-size: var(--w-size-body); line-height: var(--w-lh-body); }
  .w-one-key .w-heading { display: block; }
  .w-one-key a { display: flex; align-items: center; width: fit-content; min-height: var(--w-button-wide); margin-top: var(--w-space-6); padding: var(--w-zero) var(--w-space-7); border-radius: var(--w-radius); background: var(--w-warn-button); text-decoration: none; }
  .w-wide-only, .w-row-unit { display: inline; }
  .w-two { display: grid; grid-template-columns: repeat(2, minmax(var(--w-zero), 1fr)); align-items: start; }
  .w-facts { padding-inline: var(--w-space-10); }
  .w-facts > * { padding-block: var(--w-space-5); }
}

/* Buttons: the secondary fill unless primary. A narrow screen stretches its main actions; a wide one keeps every
   button to its content. */
.w-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--w-space-4);
  min-height: var(--w-tap);
  padding: var(--w-zero) var(--w-space-8);
  border: var(--w-zero);
  border-radius: var(--w-radius);
  background: var(--w-secondary);
  color: var(--w-ink);
  font-family: var(--w-font);
  font-size: var(--w-size-body);
  font-weight: var(--w-weight-strong);
  line-height: var(--w-lh-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.w-btn-primary { background: var(--w-accent); color: var(--w-accent-ink); }
.w-btn-small { align-self: flex-start; flex-shrink: 0; padding: var(--w-zero) var(--w-space-7); }
.w-btn-link { background: var(--w-transparent); font-weight: var(--w-weight-body); text-decoration: underline; }
.w-btn:disabled { background: var(--w-secondary); color: var(--w-muted); cursor: not-allowed; }
.w-btn-text { align-self: flex-start; min-height: var(--w-tap); padding: var(--w-zero) var(--w-space-2); border: var(--w-zero); background: var(--w-transparent); color: var(--w-ink); font-family: var(--w-font); font-size: var(--w-size-body); text-decoration: underline; cursor: pointer; }
.w-actions { display: flex; flex-wrap: wrap; gap: var(--w-space-4); }
.w-actions > * { flex: 1; padding: var(--w-zero) var(--w-space-6); }
.w-stack { display: flex; flex-direction: column; gap: var(--w-space-4); }
.w-end .w-btn, .w-stack > .w-btn-primary { min-height: var(--w-button-main); font-size: var(--w-size-name); line-height: var(--w-lh-name); }
.w-end .w-btn-link { min-height: var(--w-tap); font-size: var(--w-size-body); }
/* Add-key's choice of where the key will live: one card of radio rows, each an icon beside its name over a hint. */
.w-choice { display: flex; flex-direction: column; gap: var(--w-space-5); min-width: var(--w-zero); margin: var(--w-zero); padding: var(--w-zero); border: var(--w-zero); }
.w-choice legend { padding: var(--w-zero) var(--w-zero) var(--w-space-5); }
.w-options { gap: var(--w-zero); padding: var(--w-zero); }
.w-option { display: flex; align-items: center; gap: var(--w-space-7); padding: var(--w-space-7) var(--w-space-8); cursor: pointer; }
.w-option + .w-option { border-top: var(--w-border) solid var(--w-rule); }
.w-option input { flex-shrink: 0; width: var(--w-icon); height: var(--w-icon); margin: var(--w-zero); accent-color: var(--w-ink); }
.w-option .w-icon { color: var(--w-muted); }
.w-option-text { display: flex; flex-direction: column; gap: var(--w-space-1); min-width: var(--w-zero); }
/* Account creation's progress, above the title: a segment per touch, each one made lit in ink. Once the script
   reveals the test step, it takes the title's and the first press's place. */
.w-steps-bar { order: -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--w-space-2); }
.w-steps-bar .is-on { background: var(--w-ink); }
.w-second { display: flex; flex-direction: column; gap: var(--w-space-8); }
.w-second[hidden] { display: none; }
.w-second > .w-steps-bar { margin-bottom: var(--w-space-4); }
.w-main:has(> .w-second:not([hidden])) > .w-top, .w-main:has(> .w-second:not([hidden])) .w-first { display: none; }
/* A note card: a short heading over a muted line, such as where a passkey is kept. */
.w-aside { gap: var(--w-space-3); padding: var(--w-space-8); }
/* The signed-out home's points, each name beside its line, sit between the lead and the actions, which share the
   narrow screen's height evenly above and below them. */
.w-points { display: grid; grid-template-columns: auto minmax(var(--w-zero), 1fr); gap: var(--w-zero); margin: var(--w-zero); padding: var(--w-zero) var(--w-space-8); }
.w-points > * { padding-block: var(--w-space-7); }
.w-points > :nth-child(n+3) { border-top: var(--w-border) solid var(--w-rule); }
.w-points dt { padding-right: var(--w-space-10); font-weight: var(--w-weight-strong); }
.w-points dd { margin: var(--w-zero); color: var(--w-muted); }
.w-main:has(> .w-points) > .w-top { margin-top: auto; }
/* A wide signed-out page puts its actions above what follows them, then the testnet line. */
@media (min-width: 60rem) {
  .w-after { order: 1; }
  body.w:not(.w-app) .w-main:has(> .w-after) > .w-net { order: 2; }
  .w-main:has(> .w-points) > .w-top { margin-top: var(--w-zero); }
  .w-points { padding-inline: var(--w-space-9); }
}
:is(a, button, input, select, summary):focus-visible {
  outline: var(--w-focus) solid var(--w-ink);
  outline-offset: var(--w-focus);
}
.w-tabs a:focus-visible { outline-offset: var(--w-focus-inset); }
@media (min-width: 60rem) {
  .w-btn { min-height: var(--w-button-wide); }
  .w-actions > * { flex: none; padding: var(--w-zero) var(--w-space-8); }
  .w-stack { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .w-stack > .w-hint { flex-basis: 100%; text-align: left; }
  .w-form > .w-btn, .w-end .w-btn { align-self: flex-start; }
  .w-end .w-btn, .w-stack > .w-btn-primary { min-height: var(--w-button-wide-main); padding: var(--w-zero) var(--w-space-9); font-size: var(--w-size-body); line-height: var(--w-lh-body); }
  .w-form { width: 100%; max-width: var(--w-form); }
  .w-stack > .w-form { width: auto; }
}

/* Forms */
.w-form { display: flex; flex-direction: column; gap: var(--w-space-8); }
.w-field { display: flex; flex-direction: column; gap: var(--w-space-4); font-weight: var(--w-weight-strong); }
.w-input {
  min-width: var(--w-zero);
  min-height: var(--w-tap);
  padding: var(--w-zero) var(--w-space-6);
  border: var(--w-border) solid var(--w-line);
  border-radius: var(--w-radius);
  background: var(--w-card);
  color: var(--w-ink);
  font-family: var(--w-font);
  font-size: var(--w-size-lead);
  font-weight: var(--w-weight-body);
}
.w-input-mono { font-family: var(--w-mono); font-size: var(--w-size-body); }
.w-input-big { font-size: var(--w-size-dialog); font-weight: var(--w-weight-heading); }
/* The send and withdraw forms: a card of fields, Check beside To, Max beside the amount, and the window on one line.
   Their first submit button, the one a browser's Enter clicks, is a Review out of sight and out of the tab order, so
   Enter never presses Check or Max. The chain's figures and the wait sit in a column beside the card on a wide screen. */
.w-pay { gap: var(--w-space-9); }
.w-default { position: absolute; width: var(--w-border); height: var(--w-border); padding: var(--w-zero); border: var(--w-zero); overflow: hidden; clip-path: inset(50%); }
.w-field .w-hint { font-weight: var(--w-weight-body); }
.w-with-max { display: flex; align-items: flex-end; gap: var(--w-space-4); }
.w-with-max > .w-field, .w-with-max > .w-input { flex: 1; min-width: var(--w-zero); }
.w-with-max > .w-btn { min-height: var(--w-tap); }
/* Check's answer under To, and Recent, the recipients to pick: each a face beside its short id. */
.w-recipient, .w-recent { display: flex; flex-wrap: wrap; align-items: center; gap: var(--w-space-4); font-weight: var(--w-weight-body); }
.w-recent > .w-hint { flex-basis: 100%; }
.w-recipient .w-face, .w-pick .w-face, .w-value .w-face { width: var(--w-face-row); height: var(--w-face-row); }
.w-pick code { font-weight: var(--w-weight-body); }
.w-window { flex-direction: row; align-items: center; color: var(--w-muted); font-size: var(--w-size-note); font-weight: var(--w-weight-body); }
.w-window .w-input { flex: none; min-height: var(--w-button-wide); padding: var(--w-zero) var(--w-space-4); font-size: var(--w-size-note); }
.w-col { display: flex; flex-direction: column; gap: var(--w-space-8); }
.w-how-head { display: flex; align-items: flex-start; gap: var(--w-space-6); }
.w-how-head > span { display: flex; flex-direction: column; gap: var(--w-space-2); }
.w-how-head .w-icon { color: var(--w-muted); }
/* What happens next: the stages ahead as empty segments, each named over its note, drawn on a wide screen only. */
.w-next, .w-plan { display: none; }
.w-plan > li { display: flex; flex-direction: column; gap: var(--w-space-1); color: var(--w-ink); font-size: var(--w-size-body); font-weight: var(--w-weight-strong); line-height: var(--w-lh-body); }
@media (min-width: 60rem) {
  .w-form:has(> .w-two) { max-width: none; }
  .w-next { display: flex; }
  .w-plan { display: grid; }
}
.w-progress { width: 100%; height: var(--w-progress); accent-color: var(--w-ink); }

/* Keys: a face is SVG cells in its pair's ink on its tint, with a margin inside its tile. */
.w-face { width: var(--w-face-s); height: var(--w-face-s); flex-shrink: 0; border-radius: var(--w-radius-face); fill: currentColor; }
.w-face-l { width: var(--w-face-l); height: var(--w-face-l); }
.face-0 { color: var(--w-face-0); background: var(--w-face-0-bg); }
.face-1 { color: var(--w-face-1); background: var(--w-face-1-bg); }
.face-2 { color: var(--w-face-2); background: var(--w-face-2-bg); }
.face-3 { color: var(--w-face-3); background: var(--w-face-3-bg); }
.face-4 { color: var(--w-face-4); background: var(--w-face-4-bg); }
.face-5 { color: var(--w-face-5); background: var(--w-face-5-bg); }
.face-6 { color: var(--w-face-6); background: var(--w-face-6-bg); }
.face-7 { color: var(--w-face-7); background: var(--w-face-7-bg); }
.w-key { flex-direction: row; align-items: center; gap: var(--w-space-6); }
.w-key-text { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: var(--w-space-3); min-width: var(--w-zero); }
.w-labels { display: flex; flex-wrap: wrap; gap: var(--w-space-3); }
.w-fp { line-height: var(--w-lh-note); }
/* The keys page: the account's safety, its keys on one card with Add a backup key under them on a narrow screen and
   beside their heading on a wide one, and the help on what to do when a device is lost. Add-key's test step opens with
   its progress, then that the passkey was saved, above its title. */
.w-safe { padding: var(--w-space-6) var(--w-space-8); border-radius: var(--w-radius-card); font-size: var(--w-size-body); line-height: var(--w-lh-body); }
.w-key-section { display: flex; flex-direction: column; gap: var(--w-space-6); }
.w-keys { padding: var(--w-zero) var(--w-space-8); border: var(--w-border) solid var(--w-line); border-radius: var(--w-radius-card); background: var(--w-card); }
.w-help[open] { gap: var(--w-space-7); padding-bottom: var(--w-space-8); }
.w-saved { order: -1; }
/* A numbered list of steps, each number muted in a column of its own, and a closing line ruled off above it. */
.w-numbered { display: flex; flex-direction: column; gap: var(--w-space-5); margin: var(--w-zero); padding: var(--w-zero); list-style: none; counter-reset: step; }
.w-numbered > li { display: grid; grid-template-columns: var(--w-step-gutter) minmax(var(--w-zero), 1fr); gap: var(--w-space-4); counter-increment: step; }
.w-numbered > li::before { content: counter(step); color: var(--w-muted); }
.w-ruled { padding-top: var(--w-space-6); border-top: var(--w-border) solid var(--w-rule); }
/* A page with a side column on a wide screen: the keys page's help, or add-key's next steps, beside its main column.
   A narrow screen lays both out as the page's own items, so a main action still ends the page, and shows no next
   steps. */
.w-sided, .w-sided > .w-column { display: contents; }
@media (min-width: 60rem) {
  .w-sided { display: grid; grid-template-columns: minmax(var(--w-zero), 1fr) var(--w-aside); align-items: start; gap: var(--w-space-8); }
  .w-sided > .w-column { display: flex; flex-direction: column; gap: var(--w-space-8); min-width: var(--w-zero); }
  .w-key-section { display: grid; grid-template-columns: minmax(var(--w-zero), 1fr) auto; align-items: center; }
  .w-key-section > * { grid-column: 1 / -1; }
  .w-key-section > .w-heading { grid-column: 1; }
  .w-key-section > .w-btn { grid-row: 1; grid-column: 2; }
  .w-keys { padding-inline: var(--w-space-10); }
}

/* Review: one column, its bar of Cancel and Approve at the bottom of the window: fixed across a popup, and on a
   standalone page sticky above the tab bar, or above the window's edge on a wide screen. */
.w-review { display: flex; flex-direction: column; gap: var(--w-space-8); }
/* The summary card: its headline and the line under it, then rows whose value sits over its note at the end, a
   face before an id, and a rule above every row. */
.w-summary { gap: var(--w-zero); padding-bottom: var(--w-space-3); }
.w-summary-head { display: flex; flex-direction: column; gap: var(--w-space-1); padding-bottom: var(--w-space-6); }
.w-summary-head code { font-size: var(--w-size-small); }
.w-summary .w-rows > * { border-top: var(--w-border) solid var(--w-rule); }
.w-summary .w-rows dd { display: flex; flex-direction: column; align-items: flex-end; gap: var(--w-space-1); }
.w-value { display: inline-flex; align-items: center; gap: var(--w-space-4); }
.w-mono { font-family: var(--w-mono); font-size: var(--w-size-note); }
/* Advanced: the signed fields, the exact bytes and the hash, closed under the summary until pressed. */
.w-advanced[open] { gap: var(--w-space-8); padding-bottom: var(--w-space-8); }
.w-signed > div { display: flex; flex-direction: column; gap: var(--w-space-1); }
.w-approve { display: flex; flex-direction: column; gap: var(--w-space-4); }
.w-fields .w-muted { font-family: var(--w-font); }
.w-hash {
  display: block;
  max-width: calc(var(--w-hash) + 2 * var(--w-space-6));
  padding: var(--w-space-5) var(--w-space-6);
  border-radius: var(--w-radius-card);
  background: var(--w-raised);
  line-height: var(--w-lh-body);
  word-break: break-all;
}
.w-bar {
  position: sticky;
  bottom: var(--w-tabbar);
  display: grid;
  grid-template-columns: minmax(var(--w-zero), 1fr) minmax(var(--w-zero), 2fr);
  align-items: start;
  gap: var(--w-space-4);
  margin-inline: calc(-1 * var(--w-space-8));
  padding: var(--w-space-6) var(--w-space-8);
  background: var(--w-card);
  border-top: var(--w-border) solid var(--w-line);
}
.w-bar .w-form { gap: var(--w-space-4); }
.w-bar .w-btn { width: 100%; padding: var(--w-zero) var(--w-space-8); }
.w-bar > .w-cancel { order: -1; }
body[data-popup="true"] .w-main:has(.w-bar) { padding-bottom: var(--w-bar-room); }
body[data-popup="true"] .w-bar {
  position: fixed;
  right: var(--w-zero);
  bottom: var(--w-zero);
  left: var(--w-zero);
  margin: var(--w-zero);
  padding: var(--w-space-6) var(--w-space-8) var(--w-space-8);
}
/* A popup opened in a wide window keeps its bar's buttons to the popup column. */
body[data-popup="true"] .w-bar { padding-inline: max(var(--w-space-8), calc((100% - var(--w-column)) / 2 + var(--w-space-8))); }
/* A bar of one button, such as a rejected popup's way back to the app, gives it the whole row. */
.w-bar > :only-child { grid-column: 1 / -1; }
/* A wait in progress, a ring beside its words: sign-out's preparing, and a review's sending state, which the script
   reveals once the passkey has signed and which leaves the review its summary alone. */
.w-sending { flex-direction: row; align-items: flex-start; padding: var(--w-space-7) var(--w-space-8); }
.w-sending[hidden] { display: none; }
.w-sending::before { content: ""; flex-shrink: 0; width: var(--w-dot); height: var(--w-dot); margin-top: var(--w-dot-top); border: var(--w-dot-ring) solid var(--w-muted); border-radius: var(--w-round); }
.w-sending p { display: flex; flex-direction: column; gap: var(--w-space-2); }
.w-review:has(> .w-sending:not([hidden])) > :not(.w-sending, .w-summary) { display: none; }
@media (min-width: 60rem) {
  .w-app .w-review { width: 100%; max-width: var(--w-review); margin-inline: auto; gap: var(--w-space-9); }
  .w-app .w-fields { grid-template-columns: var(--w-field-name-wide) minmax(var(--w-zero), 1fr); }
  .w-app .w-bar { bottom: var(--w-zero); margin: var(--w-zero); padding: var(--w-space-8) var(--w-zero) var(--w-space-10); background: var(--w-ground); }
}

/* Status: the outcome as a chip over its words; a popup's ending takes the outcome's pair. */
.w-status { display: flex; flex-direction: column; gap: var(--w-space-6); padding: var(--w-space-8); border-radius: var(--w-radius-card); font-weight: var(--w-weight-strong); }
/* A status page: where the ZEC goes over the journey, a payout's transaction id on two lines under its step, and the
   details as a card that opens, its long values each on a line of their own. */
.w-to { display: flex; flex-direction: column; gap: var(--w-space-2); }
.w-to code { font-size: var(--w-size-body); line-height: var(--w-lh-body); }
.w-to + .w-journey { padding-top: var(--w-space-8); border-top: var(--w-border) solid var(--w-rule); }
.w-txid { max-width: var(--w-hash); margin-top: var(--w-space-3); line-height: var(--w-lh-note); word-break: break-all; }
.w-journey-steps .w-btn { margin-top: var(--w-space-4); font-size: var(--w-size-note); }
.w-again { display: flex; flex-direction: column; gap: var(--w-space-5); }
/* A popup's applied outcome: what came in, in the received colour, its unit too, over what it paid and the journey. */
.w-done .w-unit { color: var(--w-received); }
.w-details { gap: var(--w-zero); padding: var(--w-zero) var(--w-space-8); }
.w-details summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--w-tap); cursor: pointer; font-weight: var(--w-weight-strong); list-style: none; }
.w-details summary::-webkit-details-marker { display: none; }
.w-details summary .w-icon { color: var(--w-muted); rotate: 90deg; }
.w-details[open] summary .w-icon { rotate: -90deg; }
.w-details > .w-rows, .w-arrival { padding-bottom: var(--w-space-4); border-top: var(--w-border) solid var(--w-rule); font-size: var(--w-size-note); line-height: var(--w-lh-note); }
.w-rows > .w-wide { grid-column: 1 / -1; text-align: left; }
.w-rows > dd.w-wide { padding-top: var(--w-zero); border-top: var(--w-zero); }
@media (min-width: 60rem) {
  .w-details { padding-inline: var(--w-space-10); }
}

/* Deposit: the svg's own background is the quiet zone and light modules; its one path draws the dark modules. The
   address is the Copy button's unbroken target; the button spans the card on a narrow screen and keeps to its
   content, centred, on a wide one. */
.w-deposit { align-items: center; text-align: center; }
.w-deposit .w-btn { align-self: stretch; }
.w-uri { color: var(--w-muted); font-family: var(--w-mono); font-size: var(--w-size-tiny); overflow-wrap: anywhere; }
.w-addr code { font-size: var(--w-size-body); line-height: var(--w-lh-body); }
.w-qr { align-self: center; width: var(--w-qr); height: var(--w-qr); border-radius: var(--w-radius-card); background: var(--w-qr-bg); shape-rendering: crispEdges; }
.w-qr-dark { fill: var(--w-qr-ink); }
@media (min-width: 60rem) {
  .w-qr { width: var(--w-qr-wide); height: var(--w-qr-wide); }
  .w-addr code { font-size: var(--w-size-name); line-height: var(--w-lh-name); }
  .w-deposit .w-btn { align-self: center; }
}