/* Reading-page stylesheet. Source styles.css SHA256: a8dbebac23d1bc5366571a6a3a1d69bb82d372a45fb60a0cfe9631be662d8d1e
   Source reading inputs SHA256: d52ac3d92ff9f96abb6056b37a96f2d823dc90de10ae24883b2648f74fffbcef */
/* ══════════════════════════════════════════════
   Design tokens
   ══════════════════════════════════════════════ */
:root {
  color-scheme: dark;
  --bg: #141926;
  --surface: #1A2033;
  --raised: #232A42;
  --border: #2C3350;
  --border-strong: #3D4566;
  --text: #F0F2F5;
  /* Secondary sits one clear step above tertiary (review 2026-10-07): at
     #8891A5 it was a hair DARKER than text-3, so two grey lines read as one. */
  --text-2: #ADB5C6;
  /* Theme pass 2026-08-06: was #7C8599 (4.37:1 on surface — under AA for the
     most common muted pairing). Half-step lift clears 4.5 on surface AND
     raised while keeping the muted register. */
  --text-3: #8C96AB;
  --accent: #F7931A;
  --accent-hover: #FFA94D;
  --positive: #22C55E;
  --negative: #F87171;
  --warning: #F59E0B;
  --info: #7DD3FC;
  --btc: #F7931A;
  --btc-hover: #E5720A;
  /* BTC orange as TEXT ink. Same as --btc in dark; light overrides it deeper
     because #E5720A text fails AA on the warm papers. Fills/borders keep
     --btc; running copy and standalone values use the ink. */
  --btc-ink: #F7931A;
  /* Text ink ON filled-orange controls (founder call, 2026-08-06): white on
     the brand orange sits at 2.3:1. Warm coffee-black matches the shipped
     .search-btn precedent and clears AA on both themes' fills. */
  --on-btc: #241500;
  --gold: #CDA45A;
  /* Reserved precious tone (Account header redesign, design/design). Soft
     champagne — deliberately distinct from --btc orange. Used in EXACTLY
     two places, nowhere else: (a) active Wallet+ plan pill, (b) lapsed
     "preserved" mark. Scarcity is the point. Do not reuse. */
  --wallet-treasure: #D9B872;
  --wallet-treasure-tint: rgba(217, 184, 114, 0.10);
  --purple: #8B5CF6;
  /* Purple as TEXT on 10%-purple tint chips: #8B5CF6 sits at 3.4:1 there in
     dark. Ink is one step brighter (dark) / deeper (light); gradients and
     swatches keep --purple. */
  --purple-ink: #A78BFA;
  --warm-low: rgba(247, 147, 26, 0.06);
  --warm-mid: rgba(247, 147, 26, 0.12);
  --warm-high: rgba(247, 147, 26, 0.25);
  --font-mono: 'JetBrains Mono', monospace;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shadow: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.45);
  --content-width: 768px;
  --chrome-width: 880px;
  --touch-target: 44px;
  --control-xxs: 18px;
  --control-xs: 20px;
  --control-sm: 25px;
  --control-md: 26px;
  --control-lg: 30px;
  --control-xl: 49px;
  --control-copy-glyph: 9px;
  --control-social-icon: 21px;
  --control-wealth-min: 48px;
  --control-accent-min: 30px;
  --control-action-min: 31px;
  --control-submit-min: 36px;
  --control-status-min: 28px;
  --control-chart-tab-height: 16px;

  /* Typography scale - Phase 2 desktop rescale. */
  --font-2xs: 8px;
  --font-xs: 11px;
  --font-xs-plus: 11px;
  --font-sm-tight: 11px;
  --font-sm: 12px;
  --font-md: 13px;
  --font-lg: 13px;
  --font-base: 13px;
  --font-xl: 14px;
  --font-2xl-tight: 15px;
  --font-2xl: 17px;
  --font-2xl-plus: 18px;
  --font-3xl: 20px;
  --font-3xl-plus: 23px;
  --font-display: 26px;
  --font-display-compact: 28px;
  --font-display-lg: 30px;
  --font-display-xl: 33px;
  --font-hero-max: 36px;
  --font-hero: 38px;

  /* Spacing scale - Phase 2 desktop rescale. */
  --space-hairline: 1px;
  --space-0-5: 2px;
  --space-0-75: 2px;
  --space-1: 4px;
  --space-1-25: 4px;
  /* --space-1-5 was referenced by 9 rules but never defined, so those gaps and
     paddings silently computed to 0 (e.g. chain-note chips touching on phones).
     */
  --space-1-5: 4px;
  --space-2: 5px;
  --space-2-5: 6px;
  --space-3: 6px;
  --space-3-5: 7px;
  --space-4: 8px;
  --space-4-5: 9px;
  --space-5: 10px;
  --space-5-5: 10px;
  --space-6: 11px;
  --space-6-5: 12px;
  --space-7: 13px;
  --space-7-5: 15px;
  --space-8: 16px;
  --space-8-5: 18px;
  --space-9: 19px;
  --space-10: 22px;
  --space-11: 24px;
  --space-12: 26px;
  --space-13: 32px;
  --space-13-5: 35px;
  --space-14: 38px;
  --space-15: 45px;
  --space-16: 51px;

  /* Radius scale - Phase 2 desktop rescale. */
  --radius-xs: 2px;
  --radius-2xs: 3px;
  --radius-sm: 3px;
  --radius-compact: 5px;
  --radius-compact-plus: 6px;
  --radius-md: 7px;
  --radius-md-lg: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-3xl: 15px;
  --radius-4xl: 17px;
  --radius-pill: 999px;
}

@media (max-width: 640px) {
  :root {
    /* Narrow preservation - keep the founder-approved iPhone rendering. */
    --content-width: 960px;
    --touch-target: 44px;
    --control-xxs: 22px;
    --control-xs: 24px;
    --control-sm: 30px;
    --control-md: 32px;
    --control-lg: 36px;
    --control-xl: 60px;
    --control-copy-glyph: 11px;
    --control-social-icon: 26px;
    --control-wealth-min: 58px;
    --control-accent-min: 36px;
    --control-action-min: 38px;
    --control-submit-min: 44px;
    --control-status-min: 34px;
    --control-chart-tab-height: 20px;
    --font-2xs: 8px;
    --font-xs: 11px;
    --font-xs-plus: 11.5px;
    --font-sm-tight: 12px;
    --font-sm: 13px;
    --font-md: 14px;
    --font-lg: 15px;
    --font-base: 16px;
    --font-xl: 17px;
    --font-2xl-tight: 18px;
    --font-2xl: 20px;
    --font-2xl-plus: 22px;
    --font-3xl: 24px;
    --font-3xl-plus: 28px;
    --font-display: 32px;
    --font-display-compact: 34px;
    --font-display-lg: 36px;
    --font-display-xl: 40px;
    --font-hero-max: 44px;
    --font-hero: 48px;

    --space-hairline: 1px;
    --space-0-5: 2px;
    --space-0-75: 3px;
    --space-1: 4px;
    --space-1-25: 5px;
    --space-1-5: 5px;
    --space-2: 6px;
    --space-2-5: 7px;
    --space-3: 8px;
    --space-3-5: 9px;
    --space-4: 10px;
    --space-4-5: 11px;
    --space-5: 12px;
    --space-5-5: 13px;
    --space-6: 14px;
    --space-6-5: 15px;
    --space-7: 16px;
    --space-7-5: 18px;
    --space-8: 20px;
    --space-8-5: 22px;
    --space-9: 24px;
    --space-10: 28px;
    --space-11: 30px;
    --space-12: 32px;
    --space-13: 40px;
    --space-13-5: 44px;
    --space-14: 48px;
    --space-15: 56px;
    --space-16: 64px;

    --radius-xs: 2px;
    --radius-2xs: 3px;
    --radius-sm: 4px;
    --radius-compact: 6px;
    --radius-compact-plus: 7px;
    --radius-md: 8px;
    --radius-md-lg: 10px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    --radius-2xl: 16px;
    --radius-3xl: 18px;
    --radius-4xl: 20px;
    --radius-pill: 999px;
  }
}

[data-theme="light"] {
  color-scheme: light;
  /* Warm-paper retune: oat page,
     ivory cards, warm greys — no pure white anywhere. Hue shift only; the
     value ladder (bg < surface, raised, borders) is unchanged, and AA
     contrast on text tokens is preserved. */
  --bg: #F0EEE6;
  --surface: #FAF9F5;
  --surface-warm: rgba(247, 147, 26, 0.08);
  --raised: #E9E6DC;
  --border: #DED9CC;
  --border-strong: #C8C1B0;
  --text: #1F1E1D;
  --text-2: #55514A; /* one clear step above text-3 (review 2026-10-07; was #66625A) */
  --text-3: #6B665D; /* review lineage: keep 4.5:1+ on light bg/surface/raised (warm-hue twin of #6E6E6E) */
  --accent: #E5720A;
  /* Theme pass 2026-08-06: hover was #F7931A — LIGHTER than the resting
     accent, so link hovers dropped to 2:1 on paper and visually vanished.
     Light hovers darken, mirroring --btc-hover. */
  --accent-hover: #C2410C;
  /* Theme pass 2026-08-06: semantic inks deepened one step — the dark-tuned
     values sat between 2.6 and 4.1 on the warm papers as text. Tint chips and
     fills read the same tokens and stay in family. */
  --positive: #15803D;
  --negative: #DC2626;
  --warning: #B45309;
  --info: #075985;
  --btc: #E5720A;
  --btc-hover: #D4610A;
  --btc-ink: #A85D06;
  /* Light twins for the two tokens that had none (mustard/washout fixes):
     gold pill text and purple badge text were unreadable on the papers. */
  --gold: #8A6A28;
  --purple: #6D28D9;
  --purple-ink: #6D28D9;
  /* Reserved precious tone — light theme (deeper champagne reads on white). */
  /* Theme pass 2026-08-06: was #9A7B3A (3.78:1 on surface); one step deeper
     clears AA while staying champagne, not brown. */
  --wallet-treasure: #7E652F;
  --wallet-treasure-tint: rgba(154, 123, 58, 0.12);
  --warm-low: rgba(247, 147, 26, 0.06);
  /* Light-theme neglect pass (product 2026-07-16): the 12% orange --warm-mid
     reads as heavy peach on white (fine on dark navy). Light mode uses a
     neutral navy wash for structure; orange stays reserved for accents. */
  --warm-mid: rgba(26, 32, 51, 0.05);
  --warm-high: rgba(247, 147, 26, 0.25);
  --shadow: 0 2px 8px rgba(64, 54, 32, 0.07);
  --shadow-lg: 0 12px 28px rgba(64, 54, 32, 0.13);
}

/* ══════════════════════════════════════════════
   Reset & base
   ══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:focus-visible {
  /* Keyboard-nav indicator. Solid text-tone orange: the 07-15 softened ring
     (accent at 55%) measured 1.8:1 on light paper, under the 3:1 a focus mark
     needs. The 2px offset keeps a strip of page between the ring and a filled
     orange button. Keyboard only, so pointer users never see it. */
  outline: 2px solid var(--accent);
  outline: 2px solid var(--btc-ink, var(--accent));
  outline-offset: 2px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--font-xl);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body::before {
  content: '';
  display: block;
  height: 2px;
  background: #F7931A;
  flex-shrink: 0;
}

a { color: var(--btc-ink); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--accent-hover); }

button { font-family: inherit; }

@media (pointer: coarse) {
  .topbar-icon,
  .btn-accent {
    position: relative;
  }

  .topbar-icon::after,
  .btn-accent::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, var(--touch-target));
    height: max(100%, var(--touch-target));
    transform: translate(-50%, -50%);
  }
}

/* ══════════════════════════════════════════════
   Topbar
   ══════════════════════════════════════════════ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6-5);
  height: 48px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  max-width: var(--chrome-width);
  margin: 0 auto;
  width: 100%;
  box-shadow: 4px 0 6px -4px rgba(0,0,0,0.08), -4px 0 6px -4px rgba(0,0,0,0.08);
}

.topbar-left,
.topbar-right {
  flex-shrink: 0;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.brand-logo {
  flex-shrink: 0;
  display: block;
  width: 28px;
  height: 28px;
}

.brand {
  font-size: var(--font-xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
}

.brand-dot { color: #F7A031; }

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Topbar icon buttons */
.icon-btn.topbar-icon {
  appearance: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-compact);
  width: var(--control-md);
  height: var(--control-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  font-size: var(--font-base);
  transition: color 0.15s, border-color 0.15s;
  padding: 0;
}
.icon-btn.topbar-icon:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
/* Theme button: the landing's moon and sun (SVG) in place of the thin text
   glyphs; the visible one follows the theme. */
.topbar-icon .ht-sun { display: none; }
html[data-theme="light"] .topbar-icon .ht-sun { display: block; }
html[data-theme="light"] .topbar-icon .ht-moon { display: none; }

/* When current price is within 1% of ATH, highlight the cell — "we're testing the ceiling" */

/* Difficulty card uses always-dark surface (matches .btc-market-section pattern); no light-mode override. */

/* ── Shared button/badge styles ── */
.icon-btn {
  appearance: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-compact);
  padding: var(--space-1) var(--space-3);
  color: var(--text-3);
  font-size: var(--font-md);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); }

/* ══════════════════════════════════════════════
   Privacy view (SPA panel — shares .topbar/.footer with wallet view)
   ══════════════════════════════════════════════ */
.privacy-view {
  max-width: var(--content-width);
  width: 100%;
  margin: 0 auto;
  padding: var(--space-13) var(--space-11) var(--space-15);
  line-height: 1.6;
  flex: 1;
}
.privacy-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-sm);
  color: var(--text-3);
  text-decoration: none;
  margin-bottom: var(--space-9);
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  transition: background 120ms ease, color 120ms ease;
}
.privacy-back:hover { background: rgba(0,0,0,0.04); color: var(--text); }
.privacy-back svg { flex-shrink: 0; }
.privacy-card {
  /* The reading card wears the app's card standard (founder 2026-09-27: the
     overview card is the reference): 14 radius, 1px border, the top-light
     gradient over --surface and the same long soft shadow. The doc pages do
     not load app-redesign.css, so the values are written out here. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 55%), var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-13) var(--space-13);
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(247, 147, 26, 0.06);
}
[data-theme="light"] .privacy-card {
  box-shadow: 0 20px 44px -26px rgba(64, 54, 32, 0.22), 0 0 0 1px rgba(247, 147, 26, 0.08);
}
.privacy-view .privacy-title {
  font-size: var(--font-display);
  font-weight: 600;
  margin: 0 0 var(--space-13);
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
}
.privacy-view h2 {
  font-size: var(--font-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: var(--space-13) 0 var(--space-4);
  color: var(--text-3);
}
/* Only a head that follows the title (or the date line) drops its margin:
   the 10/6 pages open with an intro paragraph, and h2:first-of-type then
   jammed the first section head against it. */
.privacy-view .privacy-title + h2,
.privacy-view .legal-updated + h2 { margin-top: 0; }
.privacy-view p {
  font-size: var(--font-md);
  margin: 0 0 var(--space-4);
}
.legal-updated {
  font-size: var(--font-sm);
  color: var(--text-3);
  margin: calc(-1 * var(--space-9)) 0 var(--space-13);
}
/* Doc pages (One address, Historical value, Contact, 404/503): the global margin
   reset left consecutive paragraphs flush, so each section read as one block,
   and the contact form's first label sat on the intro text. */
.doc-view p + p:not(.doc-actions) { margin-top: var(--space-6-5); }
.doc-view p + form { margin-top: var(--space-10); }
/* Doc pages set body to a full-height flex column; letting main grow keeps the
   footer at the bottom of short pages (Contact, 404, 503) instead of mid-screen. */
.doc-view { flex: 1 0 auto; }
/* The action links wrapped raggedly on phones (two on a line, then one); they
   now sit in an even row on desktop and stack one per line on phones. */
.doc-view .doc-actions {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-9);
  row-gap: var(--space-3);
}
@media (max-width: 640px) {
  .doc-view .doc-actions { flex-direction: column; align-items: flex-start; row-gap: var(--space-4); }
}
/* Orange links are text, so they take the text tone: each page's inline
   `.doc-actions a { color: var(--btc) }` measured 2.96:1 on light paper.
   Two classes outrank the pages' one. Dark btc-ink is the same orange. */
.doc-view .doc-actions a { color: var(--btc-ink); }
/* The reset zeroes list padding, so numbers hung into the card margin. */
.doc-card ol, .privacy-card ol { padding-left: 1.5em; }
.doc-card ol li + li, .privacy-card ol li + li { margin-top: 4px; }
.doc-card ol, .privacy-card ol { margin: 0 0 var(--space-4); }
.privacy-card p a,
.privacy-card li a,
.doc-view p:not(.doc-actions) a,
.doc-view li a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 640px) {
  .privacy-card { padding: var(--space-11) var(--space-9); }
}

/* Doc pages (One address, Historical value, Contact, 404/503) sit on the same
   card as Privacy and Terms, with the same title and section heads, so every
   reading page is one frame (2026-09-28). main.doc-view outranks each page's
   inline .doc-view width so the card lands at Privacy's 720px. */
main.doc-view { max-width: 760px; margin: 32px auto 0; padding: 0 20px 64px; }
/* One vertical rhythm with the app (2026-09-28): 22px from the top bar to
   the Back label and from the Back label to the card. The link keeps its
   6px hit padding, so each margin is 22 − 6. */
main.doc-view { margin-top: 16px; }
main.doc-view .privacy-back { margin-bottom: 16px; }
/* Privacy and Terms sat 20px lower than every other reading page, so the page
   jumped when moving along the footer links. Same rhythm as main.doc-view. */
main.privacy-view { padding-top: 16px; }
main.privacy-view .privacy-back { margin-bottom: 16px; }
.doc-view .doc-card h1,
.privacy-view .privacy-card .privacy-title {
  /* --font-display grows on phones; cap it like the dialog titles. */
  font-size: clamp(22px, 6.4vw, var(--font-display));
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--space-9);
  text-wrap: balance;
}
.doc-view .doc-card h2 {
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-3);
  margin: var(--space-13) 0 var(--space-4);
}
.doc-view .doc-card p,
.doc-view .doc-card li { color: var(--text); }
/* Reading size (review 2026-10-07): long pages were set in the app's dense
   13px UI size at about 100 letters a line. Body text 15px; section heads
   a step smaller in caps with more room above, so sections read apart. */
.doc-view .doc-card p,
.doc-view .doc-card li,
.privacy-view .privacy-card p,
.privacy-view .privacy-card li { font-size: 15px; line-height: 1.65; }
.doc-view .doc-card h2,
.privacy-view .privacy-card h2 { font-size: 12px; letter-spacing: 0.08em; margin-top: 40px; }
.privacy-view .privacy-card .legal-updated { font-size: var(--font-sm); }
/* Question heads inside a guide's common questions: body size, set apart by
   weight and the room above, so a list of questions scans. */
.doc-view .doc-card h3 { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text); margin: 22px 0 6px; }
.doc-view .doc-card h2 + h3 { margin-top: 10px; }
.privacy-view .privacy-card .privacy-title + h2,
.privacy-view .privacy-card .legal-updated + h2 { margin-top: 0; }
.doc-view .doc-card .error-code { margin: 0 0 var(--space-4); color: var(--text-3); }
.doc-view .doc-card .doc-actions { margin: var(--space-13) 0 0; }
.doc-view .doc-card > :last-child { margin-bottom: 0; }
/* One closing action per help page: the app's tinted accent button. */
.doc-view .doc-card .doc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: var(--space-13) 0 0; }
.doc-view .doc-cta .doc-cta-primary {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--btc) 35%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--btc) 10%, transparent);
  color: var(--btc-ink);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.15s ease;
}
.doc-view .doc-cta .doc-cta-primary:hover { background: color-mix(in srgb, var(--btc) 16%, transparent); }
.doc-view .doc-cta .doc-cta-secondary { color: var(--text-2); font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; }
.doc-view .doc-cta .doc-cta-secondary:hover { color: var(--text); }
/* Help: the guides as plain questions, one hairline row each; the whole row
   is the link, the question carries the weight. */
.doc-view .help-list { list-style: none; margin: var(--space-8) 0 0; padding: 0; border-top: 1px solid var(--border); }
.doc-view .help-list li { margin: 0; border-bottom: 1px solid var(--border); }
.doc-view .help-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: center;
  padding: 16px 0;
  text-decoration: none;
}
.doc-view .help-list .help-q { color: var(--text); font-size: 1.02rem; font-weight: 600; line-height: 1.35; }
.doc-view .help-list .help-a { grid-column: 1; color: var(--text-2); font-size: .94rem; line-height: 1.5; }
.doc-view .help-list a::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--text-3);
  border-right: 1.5px solid var(--text-3);
  transform: rotate(45deg);
  margin-right: 4px;
}
.doc-view .help-list a:hover .help-q { color: var(--btc-ink); }
.doc-view .help-list a:hover::after { border-color: var(--btc-ink); }
.doc-view .help-list a:focus-visible { outline: 2px solid var(--btc-ink); outline-offset: 2px; border-radius: 6px; }
.doc-view .help-more { margin-top: var(--space-8); }
/* Contact form: the account dialog's field and button register. The chip fill
   repeats --wv-chip-bg, which is scoped to the app and absent on doc pages. */
.doc-card #contact-form label { display: block; margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.doc-card .contact-input,
.doc-card .contact-textarea {
  margin: 0 0 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(26, 32, 51, 0.5);
  font-size: 14px;
}
.doc-card .contact-input { height: 36px; padding: 0 12px; }
[data-theme="light"] .doc-card .contact-input,
[data-theme="light"] .doc-card .contact-textarea { background: rgba(250, 249, 245, 0.7); }
.doc-card .contact-input:focus,
.doc-card .contact-textarea:focus {
  outline: none;
  border-color: var(--btc-ink);
  box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.12);
  background: var(--surface);
}
.doc-card .contact-submit {
  width: 100%;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: 0;
}

/* ══════════════════════════════════════════════
   Shared: surface card + accent button
   ══════════════════════════════════════════════ */
/* Tinted accent button — replaces the loud orange pills */
.btn-accent {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: var(--control-accent-min);
  padding: 0 var(--space-7-5);
  border-radius: var(--radius-md-lg);
  border: 1px solid rgba(247, 147, 26, 0.35);
  background: rgba(247, 147, 26, 0.12);
  color: var(--btc-ink);
  font-family: inherit;
  font-size: var(--font-md);
  /* Sentence case everywhere: the redesign already used it
     inside the address/account workspace, but Contact, log-in, create-account,
     Watch Key, and the plain account page still showed ALL CAPS buttons. */
  font-weight: 650;
  text-transform: none;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s, color 0.15s;
  white-space: nowrap;
}

.btn-accent:hover {
  background: rgba(247, 147, 26, 0.2);
  border-color: rgba(247, 147, 26, 0.55);
  transform: translateY(-1px);
}

.btn-accent:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ══════════════════════════════════════════════
   Footer
   ══════════════════════════════════════════════ */
/* Before app.js decides the view, every main is hidden and the footer would
   sit at the bottom of an empty screen, then jump out of view when the report
   appears (the largest layout shift on the address page, 2026-10-05). Keep it
   out of the picture until a view is showing. The landing hides it itself. */
body:not(:has(> main:not([style*="none"]))) > .footer { display: none; }

.footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-7);
  padding: var(--space-7) var(--space-9);
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: var(--font-md);
  flex-shrink: 0;
  max-width: var(--chrome-width);
  margin: 0 auto;
  width: 100%;
}

.footer-right {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.footer-left {
  justify-content: flex-start;
}

.footer-version {
  font-size: var(--font-sm);
  white-space: nowrap;
  text-align: center;
}

.footer-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-sm);
}
.footer-nav a {
  color: var(--text-3);
  text-decoration: none;
  transition: color 150ms ease;
}
.footer-nav a:hover {
  color: var(--text);
}
/* Touch screens: footer links were 20px tall; pad them to a 44px tap height
   without moving anything (the negative margin cancels the padding). */
@media (pointer: coarse) {
  .footer-nav a { display: inline-block; padding-block: 12px; margin-block: -12px; }
}
.footer-nav-sep {
  color: var(--border-strong);
}
/* Privacy and Terms left, the version in the true centre, About, Help,
   Contact right (2026-10-08): equal side columns; a link never breaks inside
   its name, and if a side is too narrow its whole links wrap. */
.footer { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.footer-nav { flex-wrap: wrap; row-gap: 4px; }
.footer-nav a { white-space: nowrap; }
/* Footer ecosystem line — match the nav line's size for vertical rhythm
   (was inheriting .footer's --font-md; nav is --font-sm). product review. */

@media (max-width: 760px) {
  .footer {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    text-align: center;
  }
  .footer-left,
  .footer-right { justify-content: center; }
}

/* ══════════════════════════════════════════════
   Shimmer animation
   ══════════════════════════════════════════════ */

#contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 96px;
  padding: var(--space-4-5) var(--space-5-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md-lg);
  font-family: inherit;
  font-size: var(--font-lg);
  color: var(--text);
  resize: vertical;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.contact-textarea:focus {
  border-color: var(--btc-ink);
  box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.12);
}

.contact-textarea::placeholder { color: var(--text-3); }

.contact-input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3-5) var(--space-5-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md-lg);
  font-family: inherit;
  font-size: var(--font-md);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.contact-input:focus {
  border-color: var(--btc-ink);
  box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.12);
}

.contact-input::placeholder { color: var(--text-3); }

.contact-honeypot { display: none; }

.contact-status {
  padding: var(--space-7-5) var(--space-6);
  font-size: var(--font-md);
  color: var(--text-2);
  text-align: center;
  line-height: 1.5;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md-lg);
}

/* ══════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════ */

/* Tab bar on narrow — horizontal scroll so all tabs remain reachable */

/* Chain Intelligence health rows — stack label + comment on narrow so the
   description isn't wrapped into a ~56px sliver column */

/* Very narrow (≤400px) — shrink balance bubble + truncate address gracefully */

@media (max-width: 480px) {
  .topbar {
    padding: 0 var(--space-3);
    gap: var(--space-2);
  }
  .topbar-left { gap: var(--space-2); min-width: 0; }
  .brand-logo { width: 24px; height: 24px; }
  .brand { font-size: var(--font-lg); }
  .topbar-right { gap: var(--space-1); }
  .icon-btn.topbar-icon {
    width: 32px;
    height: 32px;
  }

  .footer { height: auto; padding: var(--space-5) var(--space-7); }
}

/* ── design review #2 SUPERSEDED — "The Evidence", museum-composed ──────────
   For a famous address the on-chain record IS the exhibit. ONE composed
   template, reuse-don't-invent: the same vitrine/mat/spotlight language
   as the address plate, the same plaque register as the wall-text. The
   wall-text (above) is the caption; this is the piece. */

/* Narrow — keep the motif, scale the pacing */

/* ══════════════════════════════════════════════
   PHASE 2 — doorway entry + wings index.
   ADDITIVE ONLY. The ITERATE-1 motif rules above are
   ratified/locked and untouched. Reuses the
   console-overlay chrome-recede idiom (a body class).
   ══════════════════════════════════════════════ */

/* ── /design ─────────────────────────────────────────────────────────── */

/* The gallery takes the viewport. Modelled on the console-overlay idiom
   (position:fixed; inset:0; own scroll) so it escapes the wallet
   container's --content-width / height / internal-scroll box entirely —
   reuse-don't-invent. Generous matting via padding = the museum air. */

/* Mobile: Bookmarks follows Value among the core destinations. */

/* Small-end type up one step: dense data becomes legible data.
   Desktop only — the ≤640px token block already runs a larger,
   founder-approved iPhone scale and must not be shrunk. */

/* Same chip as the theme button beside it: height, corners and edge. Written as a.doc-login so it
   wins over the base rule below it, which stays the file's last lines (the demo build appends after them). */
a.doc-login { min-height: var(--control-md); border-color: var(--border); border-radius: var(--radius-compact); font-size: 12.5px; }
a.doc-login:hover { border-color: var(--border-strong); }

/* iPhone and iPad: Safari zooms the page into any text field under 16px when it takes focus, and the
   page stays zoomed. On iOS only, every text field is 16px (none is larger), so a tap keeps the layout. */
@supports (-webkit-touch-callout: none) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]),
  textarea { font-size: 16px !important; }
}

/* Reading pages share the account entry route. */
.doc-login { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; }
.doc-login:hover { border-color: var(--btc-ink); }