/* ============================================================================
   The public reading pages — FAQ, Docs, Legal — in the v2 art direction.

   This replaces the variable-remap shim that first made them dark. A remap
   gets the colours right and everything else wrong: the type is still the old
   sans, the cards still carry a light-page drop shadow, the rhythm is still a
   white-paper rhythm. It reads as the old site with the lights off.

   What it does NOT do is touch the pages' markup or a single word of their
   text — legal.html is the document users accepted, and a re-theme is no
   reason to edit it. So this styles the class names those pages already use
   (.faq-wrap, .dwrap, .legal-wrap, details/summary, .warn, .note, .toc…) and
   reaches them from the outside.

   The direction, matching the app and the landing:
     · ground   near-black #050706, cards one step up, hairline borders
     · type     Bricolage for display, JetBrains Mono for reading — the mono
                body is the house voice and it is what makes a docs page look
                like an instrument rather than a blog
     · accent   the green, used once per block: eyebrows, links, rules
     · rhythm   generous leading, a measure capped near 70ch, section rules
                instead of boxes wherever a box would just be decoration
   ========================================================================= */

/* ---------------------------------------------------------------- shell -- */
body {
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.7;
}

/* Every page wraps its content in one of these three. One measure for all. */
body .faq-wrap,
body .legal-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 clamp(18px, 5vw, 40px) 110px;
}
/* Docs is wider: it carries a sticky table of contents beside the prose. */
body .dwrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 clamp(18px, 5vw, 40px) 110px;
}

/* ------------------------------------------------------------- masthead -- */
/* One bar across all three pages, same wordmark and the same green eyebrow as
   the app's sidebar and the landing's nav. Sticky, because these are pages you
   scroll a long way down and the way back should not require scrolling up. */
body .pg-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 0 15px;
  margin-bottom: 8px;
  background: rgba(5, 7, 6, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
body .pg-top .mk { display: flex; align-items: center; gap: 11px; border: 0; }
body .pg-top .nm {
  font-family: var(--brand); font-weight: 700; letter-spacing: -.035em;
  font-size: 16px; color: var(--wordmark); line-height: 1;
}
body .pg-top .kind {
  font-family: var(--px); font-size: 8.5px; letter-spacing: .18em;
  color: var(--acc); margin-top: 5px; display: block;
}
body .pg-top .to-app {
  margin-left: auto;
  font-family: var(--px); font-size: 9px; letter-spacing: .14em;
  color: var(--ink-3); border: 1px solid var(--line);
  border-radius: var(--r-ctl); padding: 9px 14px;
}
body .pg-top .to-app:hover { color: var(--ink); border-color: rgba(255, 255, 255, .3); }

/* -------------------------------------------------------------- titling -- */
body h1 {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 22px 0 0;
  text-wrap: balance;
}
/* An accent rule under the title: the one flourish these pages get. */
body h1::after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  background: var(--acc);
  margin-top: 20px;
}

body h2 {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 46px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
body h3 {
  font-family: var(--disp);
  font-size: 15px;
  color: var(--ink);
  margin: 26px 0 8px;
}

/* The docs section numbers were a light-page device; make them the eyebrow. */
body h2 .n {
  font-family: var(--px);
  font-size: 9px;
  letter-spacing: .16em;
  color: var(--acc);
  display: block;
  margin-bottom: 9px;
}

/* --------------------------------------------------------------- prose -- */
body p, body li {
  color: var(--ink-3);
  max-width: 70ch;
}
body strong, body b { color: var(--ink); font-weight: 700; }
body a { color: var(--acc); text-decoration: none; border-bottom: 1px solid var(--acc-line); }
body a:hover { color: var(--acc-2); border-bottom-color: var(--acc); }
body ul, body ol { padding-left: 20px; }
body li { margin: 5px 0; }

/* "Back to the app" — a control, not a sentence. */
body .back { margin: 20px 0 0; }
body .back a {
  display: inline-block;
  font-family: var(--px);
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  padding: 9px 14px;
}
body .back a:hover { color: var(--ink); border-color: rgba(255, 255, 255, .3); }

/* The legal version stamp reads as metadata, so it looks like metadata. */
body .updated {
  font-family: var(--px);
  font-size: 9px;
  letter-spacing: .13em;
  color: var(--acc);
  margin-top: 18px;
}

/* ------------------------------------------------------ FAQ disclosures -- */
/* A question is a row that opens, not a floating card. Rules, not boxes. */
body .faq-wrap details {
  background: none;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
body .faq-wrap details[open] { padding-bottom: 20px; }
body .faq-wrap summary {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  cursor: pointer;
  padding: 20px 30px 20px 0;
  position: relative;
  list-style: none;
}
body .faq-wrap summary::-webkit-details-marker { display: none; }
body .faq-wrap summary::after {
  content: "+";
  position: absolute;
  right: 2px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 17px;
  color: var(--acc);
  transition: transform .18s ease;
}
body .faq-wrap details[open] summary::after { content: "−"; }
body .faq-wrap summary:hover { color: var(--acc); }
body .faq-wrap details p,
body .faq-wrap details li { font-size: 13.5px; color: var(--ink-3); }

/* --------------------------------------------------------- docs sidebar -- */
body .dshell {
  display: grid;
  grid-template-columns: 216px 1fr;
  gap: 52px;
  align-items: start;
  padding-top: 30px;
}
body .doc { min-width: 0; max-width: 74ch; }
body .doc .lede { font-size: 15px; color: var(--ink-2); margin: 22px 0 4px; max-width: 62ch; }
/* Sections are separated by the h2 rule already; a second border would double
   every divider on the page. */
body .doc section { border: 0; padding: 0; margin: 0; scroll-margin-top: 90px; }
body .toc {
  position: sticky;
  top: 74px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  border-left: 1px solid var(--line-soft);
  padding-left: 16px;
}
body .toc nav { display: flex; flex-direction: column; gap: 1px; }
body .toc summary { display: none; }
body .toc summary::-webkit-details-marker { display: none; }
body .toc a {
  color: var(--ink-3);
  border: 0;
  font-size: 12.5px;
  display: block;
  padding: 3px 0;
}
body .toc a:hover { color: var(--acc); }
body .toc .grp {
  font-family: var(--px);
  font-size: 8.5px;
  letter-spacing: .14em;
  color: var(--ink-5);
  margin: 14px 0 5px;
}

/* ------------------------------------------------------------ callouts -- */
/* Left rule, no box. A framed box on a dark ground reads as an error state
   whatever colour it is; a rule reads as an aside. */
body .note, body .warn, body .tip {
  border: 0;
  border-left: 2px solid var(--line);
  border-radius: 0;
  background: none;
  padding: 4px 0 4px 16px;
  margin: 20px 0;
  color: var(--ink-3);
  font-size: 13px;
}
body .warn { border-left-color: var(--neg); }
body .note, body .tip { border-left-color: var(--acc); }
body .note b, body .warn b, body .tip b {
  display: block;
  font-family: var(--px);
  font-size: 8.5px;
  letter-spacing: .14em;
  margin-bottom: 6px;
  color: var(--ink);
}
body .warn b { color: var(--neg); }
body .note b, body .tip b { color: var(--acc); }

/* ---------------------------------------------------------------- code -- */
body code, body kbd {
  font-family: var(--mono);
  font-size: .92em;
  background: var(--card-2);
  border: 1px solid var(--line-hair);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--ink-2);
}
body pre {
  background: var(--card-2);
  border: 1px solid var(--line-hair);
  border-radius: var(--r-card);
  padding: 16px 18px;
  overflow-x: auto;
}
body pre code { background: none; border: 0; padding: 0; }

/* --------------------------------------------------------------- table -- */
body table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 12.5px; }
body table th {
  font-family: var(--px);
  font-size: 8.5px;
  letter-spacing: .12em;
  color: var(--ink-4);
  text-align: left;
  padding: 9px 10px 9px 0;
  border-bottom: 1px solid var(--line);
}
body table td {
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid var(--line-hair);
  color: var(--ink-3);
  vertical-align: top;
}

/* -------------------------------------------------------------- footer -- */
body .faq-wrap::after,
body .legal-wrap::after,
body .dwrap::after {
  content: "WHALES SONAR · NON-CUSTODIAL · YOUR KEYS, YOUR FUNDS";
  display: block;
  font-family: var(--px);
  font-size: 8px;
  letter-spacing: .14em;
  color: var(--ink-5);
  border-top: 1px solid var(--line-soft);
  margin-top: 60px;
  padding-top: 24px;
}

@media (max-width: 640px) {
  body h1 { font-size: 28px; }
  body .faq-wrap summary { font-size: 15px; }
}

/* ------------------------------------------ docs: steps, glossary, tables -- */
body .steps { counter-reset: s; list-style: none; padding-left: 0; }
body .steps li {
  counter-increment: s; position: relative; padding-left: 32px; margin: 12px 0;
}
body .steps li::before {
  content: counter(s);
  position: absolute; left: 0; top: 2px;
  width: 21px; height: 21px; border-radius: 6px;
  border: 1px solid var(--acc-line); color: var(--acc);
  background: var(--acc-bg);
  font-family: var(--px); font-size: 9px;
  display: flex; align-items: center; justify-content: center;
}
body dl.gloss dt { font-weight: 700; color: var(--ink); font-size: 13.5px; margin-top: 16px; }
body dl.gloss dd { margin: 3px 0 0; color: var(--ink-3); }
body .foot {
  margin-top: 54px; padding-top: 22px; border-top: 1px solid var(--line-soft);
  font-family: var(--px); font-size: 8.5px; letter-spacing: .13em; color: var(--ink-5);
}
body .foot a { color: var(--ink-4); border: 0; }

/* ------------------------------------------------------- legal: the risk -- */
/* The one block on the legal page that must not read like the rest of it. */
body .risk {
  background: var(--neg-bg);
  border: 1px solid var(--neg-line);
  border-radius: var(--r-card);
  padding: 20px 22px;
  margin: 26px 0;
}
body .risk p, body .risk li { color: var(--ink-2); }
body .risk strong, body .risk b { color: var(--neg-2); }

@media (max-width: 900px) {
  body .dshell { grid-template-columns: 1fr; gap: 0; }
  body .toc {
    position: static; max-height: none; border-left: 0; padding-left: 0;
    border: 1px solid var(--line); border-radius: var(--r-card);
    padding: 4px 16px 14px; margin-bottom: 22px;
  }
  body .toc summary {
    display: block; padding: 12px 0 8px; cursor: pointer; list-style: none;
    font-family: var(--px); font-size: 9px; letter-spacing: .16em; color: var(--ink-3);
  }
  body .toc summary::-webkit-details-marker { display: none; }
}

/* A heading inside a callout is not a section start — it must not inherit the
   section rule, or a stray line is drawn across the inside of the card. */
body .risk h2, body .risk h3,
body .note h2, body .warn h2, body .tip h2 {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
  font-size: 16px;
}