/* ============================================================
   Sera Explorer — static site stylesheet
   Ported from the Earn visual base (same token names) with the
   explorer-specific components appended. Tokens first, then base,
   shared chrome, explorer components, and media queries.
   ============================================================ */

:root {
  color-scheme: light;
  --bg: #f7f3e8;
  --bg-card: #ffffff;
  --bg-elevated: #f0ebdc;
  --bg-soft: #faf6ec;
  --page-top: #eee4cc;
  --page-bottom: #eee4cc;
  --wash-green: rgba(212, 245, 223, 0.62);
  --wash-amber: rgba(245, 237, 216, 0.78);
  --topbar-bg: rgba(247, 243, 232, 0.82);
  --card-fill: rgba(255, 255, 255, 0.78);
  --card-fill-soft: rgba(255, 255, 255, 0.68);
  --selected-fill: #ffffff;
  --input-fill: rgba(255, 255, 255, 0.88);
  --button-inset: rgba(255, 255, 255, 0.45);
  --facts-bg: rgba(17, 32, 24, 0.96);
  --facts-divider: rgba(255, 255, 255, 0.14);
  --facts-text: #ffffff;
  --facts-muted: rgba(239, 247, 239, 0.72);
  --band-soft-bg: rgba(240, 235, 220, 0.56);
  --border: rgba(20, 50, 30, 0.10);
  --border-strong: rgba(20, 50, 30, 0.18);
  --text: #1a2922;
  --text-muted: rgba(26, 41, 34, 0.74);
  --text-dim: rgba(26, 41, 34, 0.68);
  --accent: #15803d;
  --accent-dim: #166534;
  --accent-soft: rgba(21, 128, 61, 0.08);
  --accent-info: #315c8d;
  --accent-warn: #b8843a;
  --accent-warn-text: #7d551f; /* 4.5:1+ on its --warn-soft tint over --bg-elevated */
  --warn-soft: rgba(184, 132, 58, 0.13);
  /* Danger text must reach 4.5:1 on its own --danger-soft tint, also over
     --bg-elevated (the tx page's rate strip). */
  --danger: #9c4528;
  --danger-soft: rgba(184, 88, 56, 0.11);
  /* Text on an --accent fill (primary button, filter count, skip link). */
  --on-accent: #ffffff;
  /* Text-field and select outlines: 3:1 against the surface around them
     (WCAG 1.4.11) — the border is the only cue to a field's extent. */
  --field-border: rgba(20, 50, 30, 0.58);
  --shadow: 0 2px 12px rgba(20, 50, 30, 0.05);
  --shadow-hover: 0 8px 28px rgba(20, 50, 30, 0.09);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --headline: var(--sans);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 30px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;
  --space-7: 64px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101611;
  --bg-card: #18231e;
  --bg-elevated: #1d2922;
  --bg-soft: #121d18;
  --page-top: #121a15;
  --page-bottom: #0d130f;
  --wash-green: rgba(57, 217, 130, 0.16);
  --wash-amber: rgba(228, 185, 108, 0.12);
  --topbar-bg: rgba(16, 22, 17, 0.86);
  --card-fill: rgba(24, 35, 30, 0.86);
  --card-fill-soft: rgba(20, 31, 26, 0.76);
  --selected-fill: #172c21;
  --input-fill: rgba(10, 18, 14, 0.82);
  --button-inset: rgba(255, 255, 255, 0.07);
  --facts-bg: rgba(7, 15, 10, 0.98);
  --facts-divider: rgba(215, 246, 229, 0.16);
  --facts-text: #f5fff7;
  --facts-muted: rgba(238, 247, 239, 0.66);
  --band-soft-bg: rgba(19, 31, 25, 0.62);
  --border: rgba(218, 246, 228, 0.12);
  --border-strong: rgba(218, 246, 228, 0.22);
  --text: #edf8f0;
  --text-muted: rgba(237, 248, 240, 0.68);
  --text-dim: rgba(237, 248, 240, 0.6);
  --accent: #39d982;
  --accent-dim: #25aa63;
  --accent-soft: rgba(57, 217, 130, 0.13);
  --accent-info: #82b7ee;
  --accent-warn: #e4b96c;
  --accent-warn-text: #e4b96c;
  --warn-soft: rgba(228, 185, 108, 0.15);
  --danger: #ec8a6c;
  --danger-soft: rgba(236, 138, 108, 0.14);
  /* White on the bright dark-theme accent is 1.8:1; near-black is 9.8:1. */
  --on-accent: #0b1a10;
  --field-border: rgba(218, 246, 228, 0.45);
  --shadow: 0 2px 16px rgba(0, 0, 0, 0.24);
  --shadow-hover: 0 10px 34px rgba(0, 0, 0, 0.34);
}

/* ---------- Base ---------- */

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1 0 auto;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 55% at 12% -10%, var(--wash-green), transparent 60%),
    radial-gradient(70% 55% at 88% -10%, var(--wash-amber), transparent 60%),
    linear-gradient(180deg, var(--page-top) 0%, var(--bg) 36%, var(--bg) 78%, var(--page-bottom) 100%);
}

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

p a,
li a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

button,
input {
  font: inherit;
}

code {
  font-family: var(--mono);
  font-size: 0.92em;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 760px;
  margin-bottom: var(--space-5);
  color: var(--text);
  font-family: var(--headline);
  font-size: clamp(40px, 5.4vw, 64px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.022em;
}

h2 {
  margin-bottom: var(--space-4);
  font-family: var(--headline);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

h3 {
  margin-bottom: var(--space-2);
  font-size: var(--fs-md);
  font-weight: 700;
}

.shell {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Utilities ---------- */

.skip-link {
  position: absolute;
  top: -48px;
  left: var(--space-4);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.skip-link:focus {
  top: var(--space-2);
}

.eyebrow {
  color: var(--accent-dim);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

html[data-theme="dark"] .eyebrow {
  color: var(--accent);
}

.meta {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.note {
  margin: var(--space-4) 0 0;
  border-left: 3px solid var(--accent-warn);
  background: var(--card-fill-soft);
  padding: var(--space-4);
  color: var(--text);
  line-height: 1.6;
}

.lede {
  max-width: 690px;
  margin-bottom: 0;
  color: var(--text-muted);
  font-size: var(--fs-lg);
  line-height: 1.58;
}

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Read by assistive technology, never shown (the page's live region). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- Topbar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  background: var(--topbar-bg);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}

.topbar-inner {
  width: min(1280px, calc(100% - 48px));
  min-height: 54px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.topbar-spacer {
  flex: 1;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--text);
}

/* Wordmark from the Sera brand kit: SVG for light, PNG for dark. */
.brand-logo {
  display: none;
  height: 26px;
  width: auto;
}

html[data-theme="light"] .brand-logo-light {
  display: block;
}

html[data-theme="dark"] .brand-logo-dark {
  display: block;
}

.brand-suffix {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.topnav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
}

.topnav-link {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

.topnav-link:hover,
.topnav-link.is-active {
  background: var(--bg-card);
  color: var(--text);
  box-shadow: 0 1px 0 var(--border-strong) inset;
}

.theme-toggle {
  min-height: 38px;
  min-width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-muted);
  padding: 0;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 0 var(--button-inset) inset;
}

.theme-toggle:hover {
  border-color: var(--accent-soft);
  color: var(--text);
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.live-pill::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-dim);
}

.live-pill.is-ok::before {
  background: var(--accent);
}

.live-pill.is-warn::before {
  background: var(--accent-warn);
}

.live-pill.is-err::before {
  background: var(--danger);
}

/* ---------- Settings popover ---------- */

.settings-wrap {
  position: relative;
  display: inline-flex;
}

.settings-btn {
  min-height: 38px;
  min-width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 0 var(--button-inset) inset;
}

.settings-btn:hover {
  border-color: var(--accent-soft);
  color: var(--text);
}

.settings-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: min(360px, calc(100vw - 32px));
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: var(--shadow-hover);
}

.settings-pop select {
  font: inherit;
  font-size: var(--fs-sm);
  width: 100%;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--input-fill);
  color: var(--text);
  padding: 9px 10px;
  outline: none;
}

.settings-pop select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.settings-title {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.settings-pop input {
  font-family: var(--mono);
  font-size: var(--fs-xs);
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.settings-status {
  margin: 0;
  min-height: 1.3em;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.settings-status.is-ok {
  color: var(--accent-dim);
}

html[data-theme="dark"] .settings-status.is-ok {
  color: var(--accent);
}

.settings-status.is-err {
  color: var(--danger);
}

.settings-status.is-warn {
  color: var(--accent-warn-text);
}

/* ---------- Buttons ---------- */

.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text);
  padding: 0 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 0 var(--button-inset) inset;
}

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

.button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.button.primary:hover {
  background: var(--accent-dim);
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.button.primary:disabled:hover {
  background: var(--accent);
}

.mini-action {
  justify-self: start;
  border: 1px solid rgba(21, 128, 61, 0.22);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dim);
  padding: 7px 12px;
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}

html[data-theme="dark"] .mini-action {
  color: var(--accent);
  border-color: rgba(57, 217, 130, 0.3);
}

.mini-action:hover {
  border-color: var(--accent);
}

.mini-action:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

/* ---------- Inputs ---------- */

label {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 700;
}

input {
  width: 100%;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--input-fill);
  color: var(--text);
  padding: 11px 12px;
  outline: none;
}

/* The browser default (#757575) is 4.0:1 on the dark field; where the
   placeholder is the only visible label it must be readable. */
input::placeholder {
  color: var(--text-dim);
  opacity: 1;
}

input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

input[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.field-error {
  margin: 4px 0 0;
  color: var(--danger);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.form-help {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
  max-width: 640px;
}

/* ---------- Card base ---------- */

.card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-fill);
  box-shadow: var(--shadow);
}

/* Inside fill-card side headers the status pill sits next to the small
   role badge — same scale, or the two cards' rows drift out of alignment. */
.fill-side .status-pill {
  padding: 2px 8px;
}

/* Truncated hashes/uuids in meta grids never re-wrap mid-value. */
.uuid-grid > div {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nowrap {
  white-space: nowrap;
}

.break-at-dot {
  overflow-wrap: normal;
}

/* ---------- Status pills ---------- */

.status-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dim);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}

/* Neutral and ok pills only: failed and pending keep their own tones. */
html[data-theme="dark"] .status-pill:not(.fail):not(.pending) {
  color: var(--accent);
}

.status-pill.ok {
  background: var(--accent-soft);
  color: var(--accent-dim);
}

html[data-theme="dark"] .status-pill.ok {
  color: var(--accent);
}

.status-pill.fail {
  background: var(--danger-soft);
  color: var(--danger);
}

.status-pill.pending {
  background: var(--warn-soft);
  color: var(--accent-warn-text);
}

/* ---------- Stat band ---------- */

.stat-band {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--facts-bg);
  padding: var(--space-5) 0;
  margin-bottom: var(--space-3);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stat-card {
  padding: var(--space-2) var(--space-5);
  color: var(--facts-text);
  min-width: 0;
}

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

.stat-card:first-child {
  padding-left: 0;
}

.stat-card strong {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.stat-card span {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-base);
  font-weight: 700;
}

.stat-card small {
  display: block;
  margin-top: var(--space-1);
  color: var(--facts-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* ---------- Page intro and summary ---------- */

.page-intro {
  padding: 72px 0 var(--space-5);
}

.page-intro .eyebrow {
  display: block;
  margin-bottom: var(--space-3);
}

/* The hero's label sits inside its h1 (the heading names the figure), so it
   keeps its own line height rather than the h1's tight one. */
.page-intro .profit-hero .eyebrow {
  line-height: 1.5;
}

.page-intro h1 {
  max-width: 820px;
  font-size: clamp(36px, 4.4vw, 56px);
}

.page-intro .lede {
  margin-bottom: var(--space-5);
}

.setup-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.setup-summary > div {
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-fill-soft);
}

/* Direct children only: the value <strong> may wrap addresses/links in spans
   of its own, which must NOT inherit the uppercase label treatment. */
.setup-summary > div > span {
  display: block;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
}

.setup-summary strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* ---------- List view ---------- */

.list-view {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding: var(--space-2) 0 var(--space-6);
}

.list-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.pair-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pair-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card-fill);
  color: var(--text-muted);
  padding: 7px 14px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}

.pair-chip:hover {
  border-color: var(--accent);
  color: var(--text);
}

.pair-chip.selected {
  border-color: var(--accent);
  background: var(--selected-fill);
  color: var(--text);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* ---------- Banners ---------- */

.banners {
  display: grid;
  gap: var(--space-2);
}

.banners:empty {
  display: none;
}

.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--card-fill-soft);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.banner-msg {
  flex: 1 1 240px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.banner-info {
  border-left-color: var(--accent-info);
}

.banner-warn {
  border-left-color: var(--accent-warn);
}

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

/* ---------- Data table ---------- */

.table-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-fill);
  box-shadow: var(--shadow);
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr:nth-child(even) {
  background: var(--bg-soft);
}

.data-table tbody tr:hover {
  background: var(--accent-soft);
}

/* ---------- Bps badge ---------- */

.bps-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
}

.bps-badge.pos {
  background: var(--accent-soft);
  color: var(--accent-dim);
}

html[data-theme="dark"] .bps-badge.pos {
  color: var(--accent);
}

/* Negative edges are deliberately NOT highlighted — green gains are the only
   color accent; losses read as plain muted text. */
.bps-badge.neg {
  color: var(--text-muted);
}

.bps-badge.flat {
  color: var(--text-dim);
}

/* Quieter by size and weight only: dimming 11px text took it under 4.5:1. */
.bps-sub {
  display: block;
  font-size: 11px;
  font-weight: 600;
}

/* ---------- Hash and copy ---------- */

.hash {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

a.hash:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.copy-btn,
.ext-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}

.copy-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

.copy-btn.is-copied {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dim);
}

html[data-theme="dark"] .copy-btn.is-copied {
  color: var(--accent);
}

/* ---------- Live row, pending marker ---------- */

@keyframes live-flash {
  from {
    background-color: var(--accent-soft);
  }
  to {
    background-color: transparent;
  }
}

.live-row {
  animation: live-flash 1.8s ease-out 1;
}

.pending-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--accent-warn);
  vertical-align: middle;
}

/* ---------- Skeletons and spinner ---------- */

@keyframes skel-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

.skel-line {
  min-width: 40px;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-soft) 45%, var(--bg-elevated) 65%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s linear infinite;
}

.skeleton td:nth-child(odd) .skel-line {
  width: 72%;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  display: inline-block;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .skel-line,
  .live-row,
  .spinner {
    animation: none;
  }
}

/* ---------- Load more, empty state ---------- */

.load-more {
  display: block;
  margin: var(--space-2) auto 0;
  min-height: 44px;
  padding: 0 28px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 0 var(--button-inset) inset;
}

.load-more:hover {
  border-color: var(--accent);
}

.load-more:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.empty-state {
  padding: var(--space-6) var(--space-4);
  color: var(--text-muted);
  text-align: center;
}

/* ---------- Mid badge ---------- */

.mid-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.mid-badge.live {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dim);
}

html[data-theme="dark"] .mid-badge.live {
  color: var(--accent);
}

.mid-badge.none {
  border-style: dashed;
  color: var(--text-dim);
}

/* ---------- Status strip & profit hero ---------- */

.status-strip {
  margin: var(--space-3) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: var(--fs-xs);
}

.profit-hero {
  margin-bottom: var(--space-2);
  font-family: var(--mono);
  font-size: clamp(44px, 6vw, 72px);
  letter-spacing: -0.01em;
}

.profit-sub {
  margin-bottom: var(--space-4);
  color: var(--accent-dim);
  font-family: var(--mono);
  font-size: var(--fs-md);
  font-weight: 600;
}

html[data-theme="dark"] .profit-sub {
  color: var(--accent);
}

/* ---------- Filter bar & drawer ---------- */

.filter-bar {
  display: grid;
  gap: var(--space-2);
}

.filters-btn {
  margin-left: auto;
  white-space: nowrap;
}

.filter-count {
  display: inline-block;
  min-width: 1.4em;
  margin-left: 0.35em;
  padding: 0 0.3em;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.78em;
  text-align: center;
}

.filter-drawer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4) var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-fill);
  box-shadow: var(--shadow);
}

.filter-field {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  min-width: 0;
}

.filter-field > span {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.filter-field small {
  color: var(--text-dim);
  line-height: 1.35;
}

/* Selects inherit nothing by default — match the global input skin. */
.filter-field select {
  font: inherit;
  font-size: var(--fs-sm);
  width: 100%;
  min-width: 0;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--input-fill);
  color: var(--text);
  padding: 9px 10px;
  outline: none;
}

.filter-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.filter-field select:disabled {
  opacity: 0.55;
}

.filter-field input {
  font-size: var(--fs-sm);
  min-width: 0;
  padding: 9px 10px;
}

.filter-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.filter-inline input {
  flex: 1 1 96px;
  width: auto;
}

.filter-inline input[type="date"] {
  flex: 1 1 135px;
}

.filter-inline select {
  flex: 1 1 auto;
  width: auto;
}

.filter-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-presets .mini-action[aria-pressed="true"] {
  outline: 2px solid var(--accent);
}

/* Footer row: span the grid, button on the right. */
.filter-actions {
  grid-column: 1 / -1;
  justify-items: end;
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}

.filter-actions > span {
  display: none;
}

/* ---------- Row interactions & failed attempts ---------- */

.data-table tbody tr.row-link {
  cursor: pointer;
}

/* Failed attempts are marked by the danger bar and muted text — not by
   opacity, which took their small text under 4.5:1. */
.failed-row td {
  color: var(--text-muted);
}

.failed-row td:first-child {
  box-shadow: inset 3px 0 0 var(--danger);
}

.pair-chip.failed-chip {
  border-style: dashed;
}

.pair-chip.failed-chip.selected {
  border-style: solid;
}

/* ---------- Universal search ---------- */

.search-top {
  padding-top: var(--space-5);
  display: grid;
  gap: var(--space-3);
}

.search-title {
  margin: 0;
  font-size: var(--fs-xl);
}

/* The list page embeds the bare form (no card wrapper) — give it the card skin. */
.search-top > .decode-form {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-fill);
  box-shadow: var(--shadow);
}

.decode-card {
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-fill);
  box-shadow: var(--shadow);
}

.decode-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.decode-form input {
  flex: 1 1 320px;
  min-width: 0;
  font-family: var(--mono);
  font-size: var(--fs-sm);
}

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

.fill-card h2 {
  margin-bottom: var(--space-2);
  font-size: var(--fs-xl);
}

.fill-card {
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-fill);
  box-shadow: var(--shadow);
}

.fill-sides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.fill-side {
  min-width: 0;
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
  align-content: start;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-soft);
}

.fill-rate-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.uuid-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.uuid-grid > div {
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-soft);
  overflow-wrap: anywhere;
}

.uuid-grid span {
  display: block;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.sig-block {
  margin: var(--space-2) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-soft);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

details > summary {
  cursor: pointer;
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--border);
  padding: var(--space-6) 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-6);
  align-items: start;
}

.footer-brand p {
  margin: var(--space-3) 0 0;
}

.footer-links {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.footer-links a {
  color: var(--text-muted);
  font-weight: 600;
}

.footer-links a:hover {
  color: var(--text);
}

.footer-note p {
  margin: 0 0 var(--space-2);
}

.footer-note p:last-child {
  margin-bottom: 0;
  color: var(--text-dim);
}

/* ---------- Media queries ---------- */

@media (max-width: 1080px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-4);
  }

  .stat-card:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 900px) {
  .topbar-inner {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    padding: var(--space-3) 0;
  }

  .topbar-spacer {
    display: none;
  }

  /* When the action cluster wraps to its own row, keep it right-aligned
     instead of dangling under the logo with a dead right half. */
  .settings-wrap {
    margin-left: auto;
  }

  .topnav {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .topnav::-webkit-scrollbar {
    display: none;
  }

  .page-intro {
    grid-template-columns: 1fr;
  }

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

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

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}


/* ---------- Narrative tape (landing trade list) ---------- */

.action-chip {
  display: block;
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--card-fill-soft);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
}

.action-chip.is-green {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent-dim);
}

html[data-theme="dark"] .action-chip.is-green {
  color: var(--accent);
}

/* The profit pill. Block-level so every pill fills its lane uniformly. */
.data-pill {
  display: block;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--card-fill-soft);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: 1.7;
  text-align: center;
  white-space: nowrap;
}

/* Quiet bps line under the dollar profit pill in the tape's profit lane. */
.tape-profit-sub {
  display: block;
  margin-top: 2px;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  text-align: center;
}

.data-pill.is-green {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent-dim);
}

html[data-theme="dark"] .data-pill.is-green {
  color: var(--accent);
}

/* Lanes: every fact column shrinks to its content; Amount takes the rest. */
.tape td.tape-time,
.tape td.tape-tx,
.tape td.tape-action,
.tape td.tape-pair,
.tape td.tape-rate,
.tape td.tape-profit {
  width: 1%;
  white-space: nowrap;
}

.tape td.tape-time,
.tape td.tape-pair {
  color: var(--text-muted);
}

.tape td.is-empty {
  color: var(--text-dim);
  text-align: center;
}

.tape-arrow,
.tape-party {
  color: var(--text-muted);
}

.tape-note {
  color: var(--text-dim);
  font-size: var(--fs-xs);
}

/* Numeric tables: value columns right-align so magnitudes line up. */
.data-table.numeric th:not(:first-child),
.data-table.numeric td:not(:first-child) {
  text-align: right;
}

/* ---------- Metrics page ---------- */

.section-h {
  margin: var(--space-5) 0 var(--space-3);
  font-size: var(--fs-xl);
}

/* A heading that introduces a full-bleed band below it: keep the top rhythm
   but none of .list-view's 72px bottom padding. */
.band-heading {
  padding: var(--space-2) 0 0;
}

.band-heading .section-h {
  margin-bottom: var(--space-4);
}

/* Wide screens only — below 1080px the generic stat-grid media rules
   (2-col, then 1-col) must win over this class. */
@media (min-width: 1081px) {
  .stat-grid.cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: var(--space-5);
  }

  /* Row starts must not carry the inter-card divider. */
  .stat-grid.cols-4 .stat-card:nth-child(4n + 1) {
    border-left: 0;
    padding-left: 0;
  }

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

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(266px, 1fr));
  gap: var(--space-4);
}

.metrics-chart {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-fill);
  box-shadow: var(--shadow);
}

.metrics-chart figcaption {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.chart-svg {
  display: block;
  width: 100%;
  height: auto;
}

.chart-grid {
  stroke: var(--border-strong);
  stroke-width: 1;
}

.chart-zero {
  stroke: var(--text-dim);
  stroke-dasharray: 4 3;
}

.chart-tick {
  fill: var(--text-dim);
  font-family: var(--mono);
  font-size: 11.5px;
}

.chart-empty {
  fill: var(--text-dim);
  font-size: 12px;
}

.chart-line {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.8;
}

.chart-line.is-green {
  stroke: var(--accent-dim);
}

html[data-theme="dark"] .chart-line.is-green {
  stroke: var(--accent);
}

.chart-area {
  fill: var(--band-soft-bg);
  stroke: none;
}

.chart-area.is-green {
  fill: var(--accent-soft);
}

.chart-dot {
  fill: var(--text-muted);
}

.chart-dot.is-green {
  fill: var(--accent-dim);
}

html[data-theme="dark"] .chart-dot.is-green {
  fill: var(--accent);
}

.coverage-note {
  margin-top: var(--space-2);
  color: var(--text-dim);
  font-size: var(--fs-xs);
}

.stat-card strong.stat-pos {
  color: var(--accent);
}

/* ---------- Wallet page ---------- */

.wallet-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  font-size: var(--fs-xl);
}

/* The full 42-character address is wider than a 320px screen's card. */
.wallet-addr {
  white-space: normal;
  overflow-wrap: anywhere;
}

.ov-foot {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

#wallet-body > * {
  margin-top: var(--space-4);
}

#wallet-body > *:first-child {
  margin-top: 0;
}

/* Links inside stat cells keep the stat size and read as links. */
.setup-summary strong a.hash {
  font-size: inherit;
  color: var(--accent-dim);
}

html[data-theme="dark"] .setup-summary strong a.hash {
  color: var(--accent);
}

.setup-summary strong a.hash:hover {
  text-decoration: underline;
}

.empty-state.is-error {
  color: var(--danger);
}

/* ---------- Chart enlarge modal ---------- */

.metrics-chart {
  cursor: zoom-in;
}

.metrics-chart:hover,
.metrics-chart:focus-visible {
  box-shadow: var(--shadow-hover);
}

.chart-hint {
  float: right;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: 1;
}

.chart-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgba(10, 18, 13, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.chart-modal {
  width: min(1080px, 100%);
  max-height: 92vh;
  overflow: auto;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  box-shadow: var(--shadow-hover);
}

/* Wraps on a narrow screen: a long title word plus Close can be wider than
   the dialog, and Close then moves under the title instead of off-screen. */
.chart-modal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.chart-modal-head h3 {
  margin: 0;
  font-size: var(--fs-lg);
}

.chart-modal-head .mini-action {
  white-space: nowrap;
  flex: 0 0 auto;
  margin-left: auto;
}

/* Wraps (it also carries .num): one long readout must not widen the
   dialog past a 320px screen and push Close out of view. */
.chart-readout {
  margin: 0;
  min-height: 1.5em;
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  white-space: normal;
  overflow-wrap: anywhere;
}

.chart-scrub {
  touch-action: none;
  cursor: crosshair;
}

.chart-cross {
  stroke: var(--text-dim);
  stroke-dasharray: 3 3;
}

.chart-focus {
  fill: var(--text-muted);
  stroke: var(--bg-card);
  stroke-width: 1.5;
}

.chart-focus.is-green {
  fill: var(--accent-dim);
}

html[data-theme="dark"] .chart-focus.is-green {
  fill: var(--accent);
}

@media (max-width: 760px) {
  .data-table:not(.tape) thead,
  .tape thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }

  .data-table:not(.tape),
  .data-table:not(.tape) tbody,
  .data-table:not(.tape) tr,
  .data-table:not(.tape) td {
    display: block;
  }

  .data-table:not(.tape) tbody tr {
    display: grid;
    gap: 4px;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
  }

  .data-table:not(.tape) tbody tr:last-child {
    border-bottom: 0;
  }

  /* Indented block with an absolutely positioned label — NOT a grid: a grid
     would turn every child node (badges, copy buttons, links) into its own
     grid item and scatter them across rows/columns. Block flow keeps a
     cell's mixed inline content (value + badge, hash + copy + ↗) together,
     wrapping naturally inside the value column. */
  .data-table:not(.tape) td {
    position: relative;
    display: block;
    min-height: 22px;
    padding: 2px 0 2px 116px;
    border-bottom: 0;
    white-space: normal;
  }

  .data-table:not(.tape) td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 4px;
    width: 104px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .data-table.numeric:not(.tape) td {
    text-align: left;
  }

  /* Cells without a label (flow detail, empty states) use the full width. */
  .data-table:not(.tape) td[data-label=""],
  .data-table:not(.tape) td[data-label="Vault flow"] {
    padding-left: 0;
  }

  .data-table:not(.tape) td[data-label=""]::before,
  .data-table:not(.tape) td[data-label="Vault flow"]::before {
    content: none;
  }


  /* The tape keeps ONE structure everywhere: on small screens each row is a
     3-column grid — time/tx on top, action chip + amounts in the middle,
     the fact lanes (pair, rate, profit) along the bottom. */
  .tape tbody tr {
    /* Fixed lane columns (not max-content): every row is its own grid, so
       content-driven columns would drift a few px between adjacent rows and
       the tape would lose its vertical scan lines. */
    display: grid;
    grid-template-columns: 96px 84px 1fr;
    column-gap: var(--space-3);
    row-gap: 6px;
    align-items: baseline;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
  }

  .tape tbody tr:last-child {
    border-bottom: 0;
  }

  .tape td,
  .tape td.tape-time,
  .tape td.tape-tx,
  .tape td.tape-action,
  .tape td.tape-pair,
  .tape td.tape-rate,
  .tape td.tape-profit {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    white-space: normal;
  }

  .tape td.tape-time {
    grid-column: 1;
    grid-row: 1;
    font-size: var(--fs-xs);
  }

  .tape td.tape-tx {
    grid-column: 2 / 4;
    grid-row: 1;
    justify-self: end;
    font-size: var(--fs-xs);
  }

  .tape td.tape-action {
    grid-column: 1;
    grid-row: 2;
  }

  .tape td.tape-amt {
    grid-column: 2 / 4;
    grid-row: 2;
  }

  .tape td.tape-pair {
    grid-column: 1;
    grid-row: 3;
    text-align: center;
    font-size: var(--fs-xs);
  }

  .tape td.tape-rate {
    grid-column: 2;
    grid-row: 3;
    font-size: var(--fs-xs);
  }

  .tape td.tape-profit {
    grid-column: 3;
    grid-row: 3;
    justify-self: end;
  }

  .tape td.tape-profit .data-pill {
    display: inline-block;
  }

  /* Lanes that don't apply to a row disappear instead of showing dashes. */
  .tape td.is-empty {
    display: none;
  }

  /* Funding rows: the amount line already says "52,839.04 MYRT …", so the
     lone token symbol in the pair lane just made an empty-looking row. */
  .tape tr.flow-row td.tape-pair {
    display: none;
  }

  /* Wrap-safe groups in the amount lane. */
  .tape-to,
  .tape-party {
    white-space: nowrap;
  }

  .fill-sides {
    grid-template-columns: 1fr;
  }

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

  }

/* Narrow phones: the profit pill doesn't fit beside pair + rate — give it
   its own full-width line, right-aligned so the wrap reads deliberate. */
@media (max-width: 430px) {
  .tape td.tape-profit {
    grid-column: 1 / 4;
    grid-row: 4;
    justify-self: end;
    margin-top: -2px;
  }
}

@media (max-width: 620px) {
  .topbar-inner,
  .shell {
    width: min(100% - 40px, 1180px);
  }

  /* Wrapped onto three rows the header is ~155px — a fifth of a phone
     screen if it stays pinned. Let it scroll away; relative (not static)
     keeps it the positioned ancestor the settings popover anchors to. */
  .topbar {
    position: relative;
  }

  /* The gear sits on the left of the wrapped mobile topbar; a popover
     anchored right:0 to it would hang off the LEFT viewport edge. Anchor it
     to the sticky topbar instead (the nearest positioned ancestor once the
     wrap goes static) so it spans the viewport with comfortable insets. */
  .settings-wrap {
    position: static;
  }

  .settings-pop {
    top: calc(100% + 8px);
    left: 14px;
    right: 14px;
    width: auto;
  }

  .topnav-link {
    min-height: 32px;
    padding: 0 11px;
    font-size: var(--fs-xs);
  }

  .footer-links a {
    padding: var(--space-2) 0;
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }

  .stat-card {
    padding-left: 0;
    padding-right: 0;
  }

  .stat-card + .stat-card {
    border-left: 0;
    border-top: 1px solid var(--facts-divider);
    padding-top: var(--space-3);
  }

  .setup-summary,
  .tx-overview {
    grid-template-columns: 1fr;
  }

  .actions {
    display: grid;
  }

  .actions .button {
    width: 100%;
  }

  .decode-card,
  .fill-card,
  .chart-modal {
    padding: var(--space-4);
  }

  .page-intro {
    padding-top: 44px;
  }
}

@media (max-width: 350px) {
  .topnav {
    padding: 2px;
  }

  .topnav-link {
    padding: 0 8px;
    letter-spacing: 0;
  }

  /* Narrower lanes so the tx-hash cluster fits row 1. */
  .tape tbody tr {
    grid-template-columns: 80px 78px 1fr;
  }

  .action-chip {
    padding: 2px 4px;
  }

  /* Ultra-narrow: drop the per-row Etherscan shortcut — the row's tx page
     (one tap away) carries the same link with room to breathe. */
  .tape td.tape-tx .ext-btn {
    display: none;
  }
}