/* The plain report page in the look of the front page: the same ground, type, mark, buttons and
   hairlines. System font stacks only; nothing is downloaded. No scene and no keeper: the page stays plain.
   Structure is carried by rules, not by boxes; the cleanup card and the address field are the only boxes.
   The serif is for the headline and for numbers; ember is for the one action and for marks, never for
   running text. Header, main and footer are styled as elements, so their class names are free. */

:root {
  /* The front page's tokens, value for value. Dim is for rules and edges only, never for text. */
  --soot: #080605;
  --dim: #918679;
  --ash: #bdb1a4;
  --bone: #efe6da;
  --ember: #ff6a1c;
  --ember-hot: #ffa766;
  --ember-deep: #7a3a17;
  --ember-ink: #160a04;
  --ring: #ffb27a;
  --veil: rgba(8, 6, 5, 0.88);
  --veil-clear: rgba(8, 6, 5, 0);
  --veil-solid: rgb(8, 6, 5);
  --line: rgba(239, 230, 218, 0.16);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --gutter: clamp(1rem, 5vw, 5.5rem);
  --bar-h: 4rem;
  --control: 3rem;
  --measure: 40rem;
  --wide: 60rem;
  --ease-std: cubic-bezier(0.2, 0, 0, 1);

  /* The names this sheet used before, kept as aliases so a rule written against them still fits. */
  --bg: var(--soot);
  --surface: var(--soot);
  --surface-2: var(--soot);
  --ink: var(--bone);
  --muted: var(--ash);
  --ember-soft: var(--ember-deep);
  --good: var(--bone);
  --warn: var(--ember-hot);
  --shadow: none;
  --radius: 12px;
  color-scheme: dark;
}

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

html {
  background: var(--soot);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 100%;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Focused or linked targets stop below the fixed wallet corner. */
  scroll-padding-top: 5rem;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The painted ground of the front page without its scene: the soot, and one glow along the floor at the
   right. It lies under everything and never moves. At its brightest the ash text still reads at more than
   eight to one. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70vmax 36vmax at 82% 108%, rgba(120, 44, 12, 0.3), rgba(120, 44, 12, 0) 72%),
    linear-gradient(180deg, #0e0a08 0%, var(--soot) 52%, #0c0907 100%);
}

[hidden] { display: none !important; }

/* One left edge for the mark, the headline, the numbers and the footer: the gutter of the front page. */
body > header,
body > main,
body > footer {
  width: 100%;
  padding-left: calc(var(--gutter) + env(safe-area-inset-left));
  padding-right: calc(var(--gutter) + env(safe-area-inset-right));
}
body > main { position: relative; z-index: 1; flex: 1 0 auto; padding-top: clamp(1rem, 5vh, 3rem); padding-bottom: 3.5rem; }
body > footer { position: relative; z-index: 1; }
.wrap { width: auto; max-width: none; margin: 0; }
header .wrap, footer .wrap { padding: 0; }

/* Focus is visible on every control the keyboard reaches. A target that only the script focuses draws no ring. */
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

.skip {
  position: absolute;
  left: calc(var(--gutter) + env(safe-area-inset-left));
  top: calc(env(safe-area-inset-top) + 0.5rem);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 4px;
  background: var(--bone);
  color: var(--soot);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-300%);
}
.skip:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.muted { color: var(--ash); }
.small { font-size: 0.9375rem; line-height: 1.5; }
p.muted, p.small { max-width: 62ch; }

a { color: var(--bone); text-decoration: underline; text-decoration-color: var(--ember); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
a:hover { text-decoration-color: var(--bone); }

/* The bar: the product name at the left gutter, small capitals with the ember dot. It scrolls away; the
   wallet corner stays. A strip of veil fixed under it lets text that scrolls up fade before the corner. */
body > header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  min-height: calc(var(--bar-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
}
body > header:has(.simple-corner)::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: calc(var(--bar-h) + env(safe-area-inset-top) + 3rem);
  pointer-events: none;
  background: linear-gradient(180deg, var(--veil) 0, var(--veil) calc(env(safe-area-inset-top) + 3.8rem), var(--veil-clear) 100%);
}
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: var(--bar-h); }
.brand,
header a {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 44px;
  color: var(--bone);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
}
.brand-mark,
header a:not(:has(.brand-mark)):not(.brand a)::before {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0.6rem 0.1rem rgba(255, 106, 28, 0.7);
}
header a:not(:has(.brand-mark)):not(.brand a)::before { content: ""; }
/* A page without a bar still opens with the dot. */
body:not(:has(> header)) > main::before {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  margin: 1rem 0 1.75rem;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0.6rem 0.1rem rgba(255, 106, 28, 0.7);
}

/* The wallet corner and its list: the rules of the front page, value for value. */
.simple-corner { position: fixed; top: 16px; right: 16px; z-index: 90; width: 156px; }
[data-simple-connect] { width: 156px; height: 44px; min-width: 44px; min-height: 44px; border: 1px solid #a05d38; border-radius: 8px; background: #201811; color: var(--bone); font: 600 14px/1.2 system-ui, sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer; }
[data-simple-connect]:focus-visible, [data-simple-menu] button:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
[data-simple-menu] { position: absolute; right: 0; top: 52px; width: min(300px, calc(100vw - 32px)); padding: 16px; border: 1px solid #8e644a; background: #18120e; color: var(--bone); border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.53); font: 14px/1.5 system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
[data-simple-menu][hidden] { display: none; }
[data-simple-menu] button { display: block; width: 100%; min-height: 44px; padding: 8px; margin-top: 8px; border: 1px solid #a05d38; border-radius: 4px; background: #292017; color: inherit; font: inherit; text-align: left; cursor: pointer; }
[data-simple-menu] p { margin: 0 0 8px; }

/* The headline and the lines under it. */
/* Only the lower edge: on the page for a missing address the intro is the main element itself and keeps its gutter. */
.intro { padding-bottom: 0.5rem; }
h1 {
  margin: 0;
  max-width: 20ch;
  color: var(--bone);
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.2vw, 4.25rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h2, h3 { margin: 0; color: var(--bone); font-family: var(--serif); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
h3 { font-size: 1.375rem; }
.lede, .lead, .simple-intro { margin: 1rem 0 0; max-width: 32rem; color: var(--ash); font-size: clamp(1rem, 1.25vw, 1.1875rem); line-height: 1.5; }
.lede a, .lead a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.simple-fee, .simple-fee-before { margin: 0.6rem 0 0; max-width: 32rem; color: var(--ash); font-size: 0.9375rem; line-height: 1.45; }
.eyebrow { margin: 0 0 0.4rem; color: var(--ash); font-size: 0.9375rem; line-height: 1.3; }
[data-simple-status] { margin: 0.9rem 0 0; max-width: var(--measure); color: var(--bone); font-size: 1rem; line-height: 1.45; }
[data-simple-status]:empty { display: none; }

/* A folded part: an ash title of control height with the ember chevron, as "Details" on the front page. */
[data-simple-paste] > summary,
.simple-options > summary,
.simple-scan-fold > summary,
.simple-full-report > summary,
details.list > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 44px;
  min-height: 44px;
  padding-right: 0.35rem;
  color: var(--ash);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
[data-simple-paste] > summary::-webkit-details-marker,
.simple-options > summary::-webkit-details-marker,
.simple-scan-fold > summary::-webkit-details-marker,
.simple-full-report > summary::-webkit-details-marker,
details.list > summary::-webkit-details-marker { display: none; }
[data-simple-paste] > summary::before,
.simple-options > summary::before,
.simple-scan-fold > summary::before,
.simple-full-report > summary::before,
details.list > summary::before {
  content: "";
  flex: none;
  width: 0.42rem;
  height: 0.42rem;
  margin-left: 0.1rem;
  border-right: 2px solid var(--ember);
  border-bottom: 2px solid var(--ember);
  transform: rotate(-45deg);
  transition: transform 160ms var(--ease-std);
}
details[open] > summary::before { transform: rotate(45deg); }
[data-simple-paste] > summary:hover,
.simple-options > summary:hover,
.simple-scan-fold > summary:hover,
.simple-full-report > summary:hover,
details.list > summary:hover { color: var(--bone); }
.simple-full-report > summary { color: var(--bone); font-size: 1rem; }

/* The address field and the main button, as on the front page: the field, then the button under it. */
[data-simple-paste] { margin-block: 1.25rem; }
.simple-options { margin-top: 0.5rem; }
.scan { display: grid; gap: 0.5rem; max-width: var(--measure); margin-top: 1.25rem; }
.scan label:not(.sr-only), label[for="address"]:not(.sr-only) { color: var(--bone); font-size: 0.9375rem; font-weight: 600; }
.scan textarea,
.scan input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--dim);
  border-radius: 4px;
  background: rgba(8, 6, 5, 0.94);
  color: var(--bone);
  caret-color: var(--ember);
  font: 1.0625rem/1.5 var(--mono);
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}
.scan textarea { min-height: 6.5rem; resize: vertical; }
.scan textarea::placeholder, .scan input::placeholder { color: var(--ash); font-family: var(--sans); letter-spacing: 0; opacity: 1; }
.scan textarea:hover, .scan input:hover { border-color: var(--ash); }
.scan textarea:focus-visible, .scan input:focus-visible { outline-offset: 2px; border-color: var(--bone); }
.scan textarea[readonly] { color: var(--ash); }
.scan > button { justify-self: start; margin-top: 0.35rem; }
#input-help { margin: 0.6rem 0 0; }

/* Buttons. The hover light is a layer under the label whose opacity changes; the fill is never repainted.
   The label on ember is soot: seven to one. A switched-off main button keeps a readable label on deep ember. */
:where(button) { font: inherit; cursor: pointer; }
.scan button,
.btn-primary,
.btn-ghost,
:where(main button:not([class])) {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 44px;
  min-height: var(--control);
  padding: 0 1.25rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms var(--ease-std);
}
.scan button::after,
.btn-primary::after,
.btn-ghost::after,
:where(main button:not([class]))::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--bone);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms var(--ease-std);
}
.scan button:hover::after, .btn-primary:hover::after { opacity: 0.22; }
.btn-ghost:hover::after, :where(main button:not([class])):hover::after { opacity: 0.08; }
.scan button:active, .btn-primary:active, .btn-ghost:active, :where(main button:not([class])):active { transform: scale(0.975); }
.btn-ghost, :where(main button:not([class])) { background: var(--veil-solid); color: var(--bone); border-color: var(--dim); }
.scan button, .btn-primary { background: var(--ember); color: var(--soot); border-color: transparent; }
.scan button::after, .btn-primary::after { background: #ffd9b8; }
button:disabled { cursor: default; }
button:disabled::after { opacity: 0 !important; }
button:disabled:active { transform: none; }
.scan button:disabled, .btn-primary:disabled { background: var(--ember-deep); color: var(--bone); }
.btn-ghost:disabled { border-color: var(--line); color: var(--ash); }

.session-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; max-width: var(--measure); margin-top: 0.9rem; }
/* The tick box: a box of twenty-two pixels inside a target of forty-four. Ticked, it is the filled ember
   square of the cleanup's own tick rows. */
.check { display: flex; flex: 1 0 100%; align-items: center; gap: 0.25rem; min-height: 44px; color: var(--ash); font-size: 0.9375rem; cursor: pointer; }
.check input {
  flex: none;
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 44px;
  margin: 0 0 0 -11px;
  border: 11px solid transparent;
  border-radius: 15px;
  background: transparent;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1.5px var(--ash);
  cursor: pointer;
}
.check input:checked { background-color: var(--ember); box-shadow: inset 0 0 0 1.5px var(--ember), inset 0 0 0 5px var(--soot); }
.check input:focus-visible { outline-offset: -8px; }

.form-msg { min-height: 1.45em; margin: 0.6rem 0 0; max-width: var(--measure); color: var(--bone); font-size: 0.9375rem; }
.form-msg:not(:empty) { padding: 0.15rem 0 0.15rem 0.75rem; border-left: 3px solid var(--ember); }
#script-status { margin: 1rem 0 0; }
noscript p { margin: 1rem 0 0; padding: 0.6rem 0 0.6rem 0.9rem; border-left: 3px solid var(--ember); color: var(--bone); }

.privacy-note { margin-top: 2rem; max-width: var(--measure); }
.privacy-note p { margin: 0.6rem 0 0; }
.promises { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; list-style: none; margin: 1.25rem 0 0; padding: 0; max-width: var(--wide); color: var(--ash); font-size: 0.9375rem; }
.promises li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--ash); vertical-align: middle; }

/* The queue of scans: ruled rows. */
.simple-scan-fold { margin: 0 0 1rem; }
.loading { padding: 0.25rem 0 1.5rem; max-width: var(--wide); }
.loading h2 { font-size: 1.375rem; }
.loading p { margin: 0.4rem 0 0; }
.wallet-rows { display: grid; list-style: none; margin: 1rem 0 0; padding: 0; }
.wallet-row { min-width: 0; padding: 0.9rem 0; border-top: 1px solid var(--line); }
.wallet-row p { margin: 0.25rem 0 0; }
.wallet-row-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.scan-state { color: var(--ash); font-size: 0.875rem; font-weight: 600; }
.scan-state.succeeded { color: var(--bone); }
.scan-state.failed, .scan-state.cancelled { color: var(--ember-hot); }
.wallet-address { color: var(--ash); font: 0.875rem/1.5 var(--mono); overflow-wrap: anywhere; }
.wallet-rent { font-family: var(--serif); font-size: 1.375rem; line-height: 1.2; font-variant-numeric: lining-nums tabular-nums; }
.row-note { padding-left: 0.75rem; border-left: 3px solid var(--ember); color: var(--bone); font-size: 0.9375rem; }
.wallet-row .btn-ghost { margin-top: 0.6rem; }
.pulse { width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; background: var(--ember); opacity: 0.8; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(0.8); opacity: 0.45; } 50% { transform: scale(1); opacity: 0.9; } }

/* The report: the three numbers of the front page, each under a hairline, in the serif. */
.report { max-width: var(--wide); padding: 0.5rem 0 1rem; outline: none; }
.simple-tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.25rem; max-width: var(--measure); margin: 0 0 0.85rem; }
.simple-tally > div { min-width: 0; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.simple-tally dt { color: var(--bone); font-family: var(--serif); font-size: clamp(2rem, 2.9vw, 2.75rem); font-weight: 400; line-height: 1; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.simple-tally dd { margin: 0.45rem 0 0; color: var(--ash); font-size: 0.9375rem; line-height: 1.3; }
/* On a phone the three numbers stand one under the other, each beside its label, so a long amount is never cut. */
@media (max-width: 600px) {
  .simple-tally { grid-template-columns: 1fr; row-gap: 0.75rem; }
  .simple-tally > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.75rem; }
  .simple-tally dd { margin: 0; }
}
.cta-line { margin: 0 0 1rem; max-width: var(--measure); color: var(--ash); font-size: 0.875rem; line-height: 1.4; }
.report > .simple-fee { margin: 0 0 1rem; }
#cleanup { max-width: 44rem; }
[data-simple-receipts] section { max-width: 44rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
[data-simple-receipts] h2 { margin: 0 0 0.75rem; color: var(--ash); font: 600 0.9375rem/1.3 var(--sans); letter-spacing: 0; }

.simple-full-report { margin-top: 1rem; }
.report-head { margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.addr { overflow-wrap: anywhere; }
.meta { margin: 0.4rem 0 0; color: var(--ash); font-size: 0.875rem; }

.verdict { max-width: var(--measure); margin: 1.5rem 0 1.5rem; }
.verdict p { margin: 0; }
.verdict-label { color: var(--ash); font-size: 0.9375rem; font-weight: 600; }
.verdict .verdict-explain { margin-top: 0.35rem; color: var(--ash); font-size: 0.9375rem; }
.verdict .verdict-sol { margin: 0.9rem 0 0.25rem; font-family: var(--serif); font-size: clamp(2.4rem, 7vw, 4.25rem); font-weight: 400; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
#r-total-sol { overflow-wrap: anywhere; }
.verdict-sol .unit { margin-left: 0.6rem; color: var(--ash); font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.verdict .verdict-usd { margin-top: 0.5rem; color: var(--ash); font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.verdict .verdict-note { margin-top: 0.9rem; }

/* The findings: a ruled ledger. A finding that holds something carries an ember rule. */
.findings { display: grid; grid-template-columns: 1fr; gap: 0 1.25rem; }
@media (min-width: 560px) { .findings { grid-template-columns: 1fr 1fr; } }
@media (min-width: 880px) { .findings { grid-template-columns: 1fr 1fr 1fr; } }
.finding { min-width: 0; padding: 0.9rem 0 1.15rem; border-top: 1px solid var(--line); }
.finding.hot { border-top-color: var(--ember); }
.finding h4 { margin: 0 0 0.5rem; color: var(--ash); font: 600 0.9375rem/1.3 var(--sans); }
.finding .big { margin: 0; font-family: var(--serif); font-size: 1.875rem; line-height: 1.05; letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.finding .big small { margin-left: 0.4rem; color: var(--ash); font-family: var(--sans); font-size: 0.875rem; font-weight: 600; letter-spacing: 0; }
.finding .sub { margin: 0.45rem 0 0; color: var(--ash); font-size: 0.9375rem; line-height: 1.45; }

.notice { max-width: 62ch; margin: 1rem 0 0; padding: 0.15rem 0 0.15rem 0.75rem; border-left: 3px solid var(--ember); color: var(--bone); font-size: 0.9375rem; }

details.list { margin-top: 0.5rem; }
details.list .count { color: var(--ash); font-weight: 500; }
.table-wrap { margin: 0 0 0.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { padding: 0.55rem 0.75rem 0.55rem 0; border-top: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { border-top: 0; color: var(--ash); font-size: 0.875rem; font-weight: 600; }
td.mono { font-family: var(--mono); font-size: 0.875rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
th.num, td.num { padding-right: 0; padding-left: 0.75rem; }

.card-block { margin-top: 2.5rem; }
.card-block > p { margin: 0.35rem 0 0.9rem; max-width: 62ch; }
.card-preview { display: block; width: 100%; max-width: var(--measure); height: auto; aspect-ratio: 1200 / 630; border: 1px solid var(--line); border-radius: 4px; background: #141210; }
/* The card picture gets its address while its fold is closed. In Chrome it then stayed without a box when the
   fold was opened by a press (seen with the sheet before this one as well). Not drawn while the fold is closed, it
   is laid out anew at the opening. */
details:not([open]) .card-preview { display: none; }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; margin-top: 0.9rem; }
.card-actions + p { margin: 0.75rem 0 0; }

.cta { margin: 0; }
.cta .cta-line { margin: 2rem 0 0; padding: 0.15rem 0 0.15rem 0.75rem; border-left: 3px solid var(--ember); color: var(--bone); font-size: 1rem; }
.cta-sub { margin: 0.4rem 0 0; color: var(--ash); }

.method { margin-top: 2.5rem; }
.method dl { display: grid; gap: 0 1.5rem; margin: 0.75rem 0 0; }
.method dt { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--line); font-weight: 600; }
.method dd { margin: 0.25rem 0 0; color: var(--ash); max-width: 62ch; }
@media (min-width: 720px) {
  .method dl { grid-template-columns: 14rem minmax(0, 1fr); }
  .method dd { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--line); }
}
.method dl + p { margin: 1.25rem 0 0; }

/* A short explanation that stands alone on the page: a title and its lines, as a station of the front page. */
.report-explanation { max-width: var(--measure); margin-top: 2.5rem; padding-bottom: 1.5rem; }
.report-explanation p { margin: 0.6rem 0 0; color: var(--ash); font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.55; }

/* The footer: a hairline, the small print in ash, the links with the ember underline. */
body > footer { margin-top: auto; padding-top: 1.25rem; padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--ash); font-size: 0.875rem; line-height: 1.5; }
footer p { margin: 0; max-width: 62ch; }
footer [data-brand] { color: var(--bone); font-weight: 600; }
footer nav, footer ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; list-style: none; margin: 0 0 0.35rem; padding: 0; }
footer a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; font-weight: 600; }

/* Cleanup: the classes of the cleanup's own view, by the rules of the front page's card, value for value.
   One card; a heading, its lines, at most three figures, Details folded, the actions. */
.cleanup {
  display: flex; flex-direction: column; gap: 14px; min-width: 0; width: 100%;
  margin: 0 0 1.5rem; padding: 24px 22px;
  background: var(--veil-solid); border: 1px solid var(--line); border-radius: 12px; box-shadow: none;
  color: var(--bone); font: 1rem/1.5 var(--sans); text-align: left;
}
.cleanup > :empty:not([role="status"]) { display: none; }
.cleanup-head h2 { margin: 0; font: 700 1.25rem/1.3 var(--sans); letter-spacing: -0.01em; overflow-wrap: anywhere; text-wrap: wrap; }
.cleanup-head h2:focus:not(:focus-visible) { outline: none; }
.cleanup[data-state="checking"] .cleanup-head h2::before,
.cleanup[data-state="connecting"] .cleanup-head h2::before,
.cleanup[data-state="approve"] .cleanup-head h2::before,
.cleanup[data-state="sending"] .cleanup-head h2::before,
.cleanup[data-state="waiting"] .cleanup-head h2::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; vertical-align: 0.08em;
  border-radius: 50%; background: var(--ember); animation: pulse 1.2s ease-in-out infinite;
}
.cleanup-lines { display: grid; gap: 8px; }
.cleanup-lines p { margin: 0; max-width: 62ch; overflow-wrap: anywhere; }
.cleanup-added, .cleanup-plain { padding: 12px 14px; border-radius: 10px; background: var(--veil-solid); font-size: 0.95rem; }
/* A callout takes the card's width at every size; only plain lines keep the reading measure. */
.cleanup-lines p.cleanup-added, .cleanup-lines p.cleanup-plain { max-width: none; }
.cleanup-added { box-shadow: inset 3px 0 0 var(--ember); }
.cleanup-plain { box-shadow: inset 3px 0 0 var(--ember-hot); }
.cleanup-status { display: grid; gap: 4px; color: var(--ash); font-size: 0.92rem; }
.cleanup-status p { margin: 0; }
.cleanup-status p::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ash); margin-right: 8px; vertical-align: middle; }

.cleanup-figures { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .cleanup-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cleanup-figure { display: flex; flex-direction: column-reverse; gap: 6px; min-width: 0; padding: 14px 16px; background: var(--soot); border: 1px solid var(--line); border-radius: 12px; }
.cleanup-value { display: block; font-size: clamp(1.15rem, 2.2vw, 1.6rem); font-weight: 720; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cleanup-label { display: block; font: 600 0.75rem/1.35 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); }
.cleanup [data-source] { font-variant-numeric: tabular-nums; }
.cleanup [data-role="address"], .cleanup [data-role="signature"] { font-family: var(--mono); font-size: 0.88em; overflow-wrap: anywhere; }

.cleanup-details { background: var(--soot); border: 1px solid var(--line); border-radius: 12px; padding: 2px 16px; }
.cleanup-details summary { display: list-item; cursor: pointer; padding: 12px 0; font-weight: 650; }
.cleanup-details ul { list-style: none; margin: 0 0 10px; padding: 0; font-size: 0.9rem; }
.cleanup-details li { padding: 7px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.cleanup a { display: inline-flex; align-items: center; margin: 4px; color: var(--bone); text-underline-offset: 2px; }

.cleanup button, .cleanup summary, .cleanup a { min-height: 44px; min-width: 44px; }
.cleanup button { padding: 12px 16px; font: 600 1rem/1.35 var(--sans); cursor: pointer; }
.cleanup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* The label on ember is soot here as well: the front page's ink reads a hair under the bar this page keeps. */
.cleanup-primary { background: var(--ember); color: var(--soot); border: 1px solid var(--ember); border-radius: 10px; }
.cleanup-secondary, .cleanup-wallet { background: var(--soot); color: var(--bone); border: 1px solid var(--ash); border-radius: 10px; }
.cleanup-wallet { min-width: min(100%, 14rem); text-align: left; font-weight: 650; }
.cleanup button:focus-visible, .cleanup summary:focus-visible, .cleanup a:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.cleanup-tick {
  position: relative; display: block; width: 100%; text-align: left; padding: 10px 12px; font-size: 0.92rem;
  background: transparent; color: var(--bone); border: 1px solid var(--line); border-radius: 10px; overflow-wrap: anywhere;
}
.cleanup-tick::before { content: ""; display: inline-block; box-sizing: border-box; width: 16px; height: 16px; margin-right: 10px; vertical-align: -3px; border: 1.5px solid var(--ash); border-radius: 4px; font: 700 11px/13px var(--sans); text-align: center; }
.cleanup-tick[aria-checked="true"] { border-color: var(--ember); }
.cleanup-tick[aria-checked="true"]::before { content: ""; box-shadow: inset 0 0 0 3px var(--soot); color: var(--soot); background: var(--ember); border-color: var(--ember); }
/* One line per account: the box shows the tick; its words stay for screen readers. */
.cleanup-tick > span:last-child { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The cleanup switched off during a visit: one plain line in the page's flow, not a card. */
.cleanup[data-state="off"] { padding: 0; background: transparent; border: 0; box-shadow: none; }
.cleanup[data-state="off"] .cleanup-head h2 { font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--ash); }
@media (max-width: 420px) { .cleanup { padding: 20px 16px; } .cleanup-actions > .cleanup-primary, .cleanup-actions > .cleanup-secondary { flex: 1 1 auto; } }

/* Two equal choice cards. Shared numbers remain above. Auto rows share the same height even when narrow
   layouts stack the cards. */
.cleanup-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); grid-auto-rows: 1fr; gap: 10px; width: 100%; flex-basis: 100%; }
.cleanup-choice { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--soot); }
.cleanup-choice-body { display: grid; gap: 10px; }
.cleanup-choice-body .cleanup-figure { padding: 0; border: 0; background: transparent; }
.cleanup-choice-body p { margin: 0; font-size: 0.9rem; line-height: 1.5; overflow-wrap: anywhere; }
.cleanup-choice > button { width: 100%; margin-top: auto; min-height: 48px; }
.cleanup:has(.cleanup-choices) .cleanup-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 420px) { .cleanup:has(.cleanup-choices) .cleanup-figures { grid-template-columns: 1fr; } }

/* Keep focused or scrolled cleanup headings below the fixed wallet corner. */
#cleanup, .cleanup, .cleanup-head { scroll-margin-top: 5rem; }

/* Motion is transform and opacity only. Under reduced motion there is none, and a switch of the setting
   during the visit takes effect at once, because this rule follows the media query. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}