/* guide.bch2.org — claim guide, editorial style.
   (/assets/editorial/guide.v1.css, served from bch2.org)

   Self-contained on purpose. The guide's markup predates the restyle and uses
   .container, .footer-links, .faq-item and .callout for different structures
   than bch2.v1.css expects — loading the shell alongside it would style the FAQ
   accordion with rules written for a different DOM and break the open/closed
   behaviour, not just the look. So the tokens below are copied from
   bch2.v1.css rather than inherited. Keep them in step with that file.

   The DOM is untouched: every class here already existed. guide.js toggles
   .visible, .selected and .open, and those selectors are its contract. */

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

:root {
  color-scheme: light;

  --paper: #f8f9f6;
  --ink: #14241c;
  --muted: #59645b;
  --green: #066d42;
  --green-deep: #04502f;
  --wash: #eef1e9;
  --line: #cfd5cc;
  --line-ui: #7d877f;
  --on-dark: #f8f9f6;

  /* Semantic colours, chosen to sit on paper rather than glow on black.
     Each clears 4.5:1 on --paper and on --wash. */
  --danger: #a3301c;
  --warning: #8a6410;
  --info: #1d4e8f;

  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --tracking-label: 0.08em;
  --rule: 1px solid var(--line);
  --rule-strong: 1px solid var(--ink);

  /* Compatibility aliases. The guide's markup carries 16 inline style=""
     attributes written against the old dark palette, almost all of them
     colour. Undefined custom properties make a declaration invalid, so
     dropping these names would silently strip those colours rather than
     restyle them. Mapping the old names onto the editorial palette keeps
     every one of them correct without touching the markup. */
  --bch-green: var(--green);
  --bch-green-dark: var(--green-deep);
  --bch-green-glow: transparent;
  --bg-primary: var(--paper);
  --bg-secondary: var(--wash);
  --bg-card: var(--paper);
  --border: var(--line);
  --border-hover: var(--line-ui);
  --text-primary: var(--ink);
  --text-secondary: var(--muted);
  --text-muted: var(--muted);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); }
a:hover { color: var(--green); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

.container { max-width: 900px; margin: 0 auto; padding: 0 24px; }

/* ── Banner and masthead ─────────────────────────────────────────────────── */
.launch-banner {
  background: var(--ink);
  color: var(--on-dark);
  text-align: center;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1001;
  letter-spacing: 0.01em;
}
.launch-banner span {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: #bcee7b;
}
.launch-banner ~ header { top: 38px; }

header {
  position: fixed; top: 0; left: 0; right: 0;
  padding: 14px 0;
  background: rgba(248, 249, 246, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: var(--rule);
  z-index: 1000;
}

.header-content {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 900px; margin: 0 auto; padding: 0 24px;
}

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo svg { width: 34px; height: 34px; }
.logo-text { font-size: 21px; font-weight: 600; color: var(--ink); letter-spacing: -0.03em; }

nav { display: flex; gap: 24px; align-items: center; }
nav a {
  color: var(--muted); text-decoration: none;
  font-weight: 400; font-size: 14px; transition: color .15s;
}
nav a:hover { color: var(--green); }

.nav-btn {
  display: inline-flex; align-items: center;
  background: var(--ink); color: var(--on-dark) !important;
  padding: 9px 18px; border: 1px solid var(--ink); border-radius: 0;
  font-weight: 500; font-size: 14px; transition: background-color .15s, border-color .15s;
}
.nav-btn:hover { background: var(--green); border-color: var(--green); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { padding: 170px 0 52px; text-align: center; position: relative; }
.hero-content { position: relative; z-index: 1; }

.hero h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4rem);
  font-weight: 400;
  margin-bottom: 16px;
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
/* The accent word: serif italic green, the site's one flourish. */
.hero h1 span {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--green);
}
.hero p {
  font-size: 18px; color: var(--muted);
  max-width: 600px; margin: 0 auto; line-height: 1.6;
}

/* ── Eligibility ─────────────────────────────────────────────────────────── */
.eligibility { padding: 32px 0 56px; }

.eligibility-box {
  background: var(--paper);
  border: var(--rule);
  border-radius: 0;
  padding: 32px;
  text-align: center;
}
.eligibility-box h2 { font-size: 22px; margin-bottom: 12px; font-weight: 400; letter-spacing: -0.02em; }
.eligibility-box p { color: var(--muted); font-size: 15px; margin-bottom: 24px; }

.eligibility-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  max-width: 600px; margin: 0 auto; text-align: left;
}

.elig-yes, .elig-no {
  padding: 16px 20px; border-radius: 0;
  font-size: 14px; line-height: 1.55;
  background: var(--wash);
  border-left: 3px solid var(--line-ui);
}
.elig-yes { border-left-color: var(--green); }
.elig-yes strong { color: var(--green); }
.elig-no { border-left-color: var(--danger); }
.elig-no strong { color: var(--danger); }

/* ── Wallet picker ───────────────────────────────────────────────────────── */
.wallet-select { padding: 0 0 56px; }
.wallet-select h2 {
  font-size: 28px; font-weight: 400; margin-bottom: 8px;
  text-align: center; letter-spacing: -0.03em;
}
.wallet-select > p {
  color: var(--muted); text-align: center; margin-bottom: 32px; font-size: 16px;
}

.wallet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.wallet-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: border-color .15s, background-color .15s;
}
.wallet-card:hover { border-color: var(--ink); background: var(--wash); }
.wallet-card.selected { border-color: var(--green); border-width: 1px; box-shadow: inset 0 0 0 1px var(--green); background: var(--wash); }
.wallet-card-icon { font-size: 32px; margin-bottom: 12px; display: block; }
.wallet-card h3 { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.wallet-card p { font-size: 12px; color: var(--muted); }

.wallet-card .badge {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--font-mono);
  font-size: 10px; padding: 2px 7px; border-radius: 0;
  font-weight: 400; text-transform: uppercase; letter-spacing: var(--tracking-label);
  border: 1px solid currentColor;
}
.badge-easy { color: var(--green); }
.badge-medium { color: var(--warning); }

/* ── Steps ───────────────────────────────────────────────────────────────── */
.steps-container { display: none; padding: 0 0 72px; }
.steps-container.visible { display: block; }

.steps-header { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.steps-header h2 { font-size: 24px; font-weight: 400; letter-spacing: -0.03em; }

.back-btn {
  background: none; border: 1px solid var(--line-ui); color: var(--muted);
  padding: 7px 14px; border-radius: 0; cursor: pointer;
  font-size: 13px; font-family: inherit; transition: color .15s, border-color .15s, background-color .15s;
}
.back-btn:hover { border-color: var(--ink); color: var(--ink); background: var(--wash); }

.step {
  background: var(--paper);
  border: var(--rule);
  border-radius: 0;
  padding: 28px 32px;
  margin-bottom: 16px;
  position: relative;
}
.step.active { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.step.completed { border-color: var(--line); opacity: 0.72; }
.step.completed:hover { opacity: 1; }

.step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 0;
  background: var(--wash); color: var(--muted);
  border: 1px solid var(--line);
  font-weight: 500; font-size: 13px; margin-right: 12px;
  font-family: var(--font-mono);
}
.step.active .step-number { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.step.completed .step-number { background: var(--green); border-color: var(--green); color: var(--on-dark); }

.step-title { font-size: 18px; font-weight: 500; display: inline; vertical-align: middle; letter-spacing: -0.012em; }
.step-body { margin-top: 16px; padding-left: 42px; }
.step-body p { color: var(--muted); font-size: 15px; margin-bottom: 12px; line-height: 1.65; }

/* ── Code ────────────────────────────────────────────────────────────────── */
.code-block {
  background: var(--wash);
  border: var(--rule);
  border-radius: 0;
  padding: 16px 20px;
  margin: 12px 0 16px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  position: relative;
}
.code-block .comment { color: var(--muted); }
.code-block .cmd { color: var(--green); }
.code-block .string { color: var(--info); }

.copy-btn {
  position: absolute; top: 8px; right: 8px;
  background: var(--paper); border: 1px solid var(--line-ui); color: var(--muted);
  padding: 4px 10px; border-radius: 0; cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  transition: color .15s, border-color .15s;
}
.copy-btn:hover { border-color: var(--ink); color: var(--ink); }

/* ── Callouts ────────────────────────────────────────────────────────────── */
.callout {
  border-radius: 0; padding: 14px 18px; margin: 16px 0;
  font-size: 14px; line-height: 1.6;
  background: var(--wash);
  border-left: 3px solid var(--line-ui);
  color: var(--ink);
}
.callout-warning { border-left-color: var(--warning); }
.callout-danger  { border-left-color: var(--danger); }
.callout-info    { border-left-color: var(--info); }
.callout-success { border-left-color: var(--green); }
.callout-warning strong { color: var(--warning); }
.callout-danger strong  { color: var(--danger); }
.callout-info strong    { color: var(--info); }
.callout-success strong { color: var(--green); }

.screenshot-placeholder {
  background: var(--wash); border: 1px dashed var(--line-ui);
  border-radius: 0; padding: 20px; margin: 12px 0;
  text-align: center; color: var(--muted); font-size: 13px;
}

/* ── Substeps ────────────────────────────────────────────────────────────── */
.substep { display: flex; gap: 12px; margin-bottom: 12px; align-items: flex-start; }
.substep-num {
  min-width: 24px; height: 24px; border-radius: 0;
  background: var(--wash); color: var(--muted); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500; font-family: var(--font-mono);
  margin-top: 2px; flex: none;
}
.substep-text { color: var(--muted); font-size: 14px; line-height: 1.6; }
.substep-text strong { color: var(--ink); font-weight: 500; }

/* ── Address table ───────────────────────────────────────────────────────── */
.addr-type-table {
  width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px;
}
/* Four columns, two of them code samples, cannot fit a phone: the row's
   min-content width is about 411px. The old stylesheet hid the result with
   body { overflow-x: hidden }, so the Claimable column was simply unreachable
   on a narrow screen -- on the table that tells a holder whether their address
   type can be claimed. Let the table scroll on its own instead. */
@media (max-width: 560px) {
  .addr-type-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .addr-type-table thead, .addr-type-table tbody { display: table; width: 100%; min-width: 420px; }
  .addr-type-table th, .addr-type-table td { padding: 9px 10px; }
}
.addr-type-table th {
  text-align: left; padding: 10px 12px;
  background: var(--wash); border-bottom: var(--rule-strong);
  color: var(--muted); font-weight: 400;
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: var(--tracking-label);
}
.addr-type-table td {
  padding: 10px 12px; border-bottom: var(--rule); color: var(--muted);
}
.addr-type-table code {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--wash); padding: 2px 6px; border-radius: 0; color: var(--green);
}
.addr-type-table .yes { color: var(--green); font-weight: 500; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { padding: 36px 0 72px; }
.faq h2 {
  font-size: 28px; font-weight: 400; margin-bottom: 24px;
  text-align: center; letter-spacing: -0.03em;
}

.faq-item {
  background: var(--paper);
  border: var(--rule);
  border-radius: 0;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-q {
  padding: 16px 22px; cursor: pointer; font-weight: 500; font-size: 15px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; transition: color .15s; user-select: none;
}
.faq-q:hover { color: var(--green); }
.faq-q::after { content: '+'; font-size: 20px; color: var(--muted); flex: none; }
.faq-item.open .faq-q::after { content: '\2212'; color: var(--green); }

.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item.open .faq-a { max-height: 500px; }
.faq-a-inner { padding: 0 22px 18px; color: var(--muted); font-size: 14px; line-height: 1.7; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer { padding: 32px 0; border-top: var(--rule-strong); background: var(--paper); }
.footer-content {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
}
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a {
  color: var(--muted); text-decoration: none; font-size: 13px; transition: color .15s;
}
.footer-links a:hover { color: var(--green); }
.copyright { color: var(--muted); font-size: 13px; }

/* ── Security modal ──────────────────────────────────────────────────────── */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(20, 36, 28, 0.62);
  z-index: 2000; align-items: center; justify-content: center;
}
.modal-overlay.visible { display: flex; }

.modal {
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  max-width: 520px; width: calc(100% - 48px);
  max-height: calc(100vh - 48px); overflow: auto;
  padding: 0;
}

/* This bar is the one place the guide shouts, and it should: past it the
   visitor is being asked to handle a private key. */
.modal-danger-bar {
  background: var(--danger); padding: 13px 26px;
  display: flex; align-items: center; gap: 10px;
}
.modal-danger-bar span {
  font-family: var(--font-mono);
  font-size: 15px; font-weight: 500; color: #fff;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}

.modal-body { padding: 26px; }
.modal-body p { color: var(--muted); font-size: 15px; line-height: 1.65; margin-bottom: 16px; }
.modal-body ul { color: var(--muted); font-size: 14px; line-height: 1.75; margin: 0 0 20px 20px; }
.modal-body ul li { margin-bottom: 4px; }
.modal-body ul li strong { color: var(--ink); font-weight: 500; }

.modal-footer { padding: 0 26px 26px; display: flex; gap: 12px; }
.modal-btn {
  flex: 1; padding: 13px; border-radius: 0; border: 1px solid var(--ink);
  font-family: inherit; font-size: 15px; font-weight: 500;
  cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.modal-btn-cancel { background: var(--paper); color: var(--ink); border-color: var(--line-ui); }
.modal-btn-cancel:hover { border-color: var(--ink); background: var(--wash); }
.modal-btn-confirm { background: var(--danger); border-color: var(--danger); color: #fff; }
.modal-btn-confirm:hover { background: #8a2717; border-color: #8a2717; }

/* ── Core method tabs ────────────────────────────────────────────────────────
   guide.js switches these by setting .selected, so the two states are declared
   here rather than written as inline style from the script. */
.method-tab {
  padding: 8px 16px; border: 1px solid var(--line-ui); border-radius: 0;
  background: transparent; color: var(--muted);
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.method-tab:hover { background: var(--wash); color: var(--ink); }
.method-tab.selected,
.method-tab.active { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }

/* ── Narrow ──────────────────────────────────────────────────────────────── */
/* The header is fixed, and guide.js scrolls the chosen wallet's steps into view.
   Without a scroll margin the heading lands underneath the header and the reader
   starts mid-sentence. The value covers the banner (38px) plus the bar. */
.steps-container, #wallet-select, .step { scroll-margin-top: 112px; }

@media (max-width: 768px) {
  .wallet-grid { grid-template-columns: repeat(2, 1fr); }
  .eligibility-grid { grid-template-columns: 1fr; }

  /* The nav is too wide for a phone, but hiding all of it also hid Claim Now --
     the primary action of the page -- for every mobile visitor. Keep the button. */
  nav { display: flex; gap: 0; }
  nav a:not(.nav-btn) { display: none; }
  .nav-btn { padding: 8px 14px; font-size: 13px; }

  .steps-container, #wallet-select, .step { scroll-margin-top: 96px; }
  .hero { padding: 120px 0 36px; }
  .step { padding: 20px; }
  .step-body { padding-left: 0; }
  .code-block { font-size: 11px; padding: 12px 14px; }
}

@media (max-width: 480px) {
  .wallet-grid { grid-template-columns: 1fr; }
  .footer-content { flex-direction: column; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}