/**
 * token-disclosures.css — /token-disclosures long-form legal reading surface.
 * ---------------------------------------------------------------------------
 * Loaded AFTER styles.css and home.css. Every colour, radius and shell width
 * below resolves to a home.css `--hv-*` token so the page reads as native
 * drooly.ai rather than a bolted-on legal boilerplate page.
 *
 * Scoped to `body.td-page` — nothing here can leak onto another surface.
 * `body.td-page` and `body.home-v2` have identical specificity, so this file
 * must stay AFTER home.css in the <link> order for the overrides to land.
 *
 * ============================================================================
 * THIS IS A LEGAL DISCLOSURE PAGE. THE STYLING IS ALLOWED TO CHANGE. THE WORDS
 * ARE NOT.
 * ============================================================================
 * tests/token-disclosures.test.mjs pins every disclosure sentence that was on
 * the page before this restyle, verbatim, and fails if one goes missing. If you
 * are here to "tighten the copy", the test will stop you, and it is right to.
 *
 * Typography rules that are content decisions, not taste:
 *  - .td-prose is capped at 68ch. Legal text that runs the full 1180px shell
 *    does not get read; a disclosure nobody reads is a disclosure that failed.
 *  - Risk bullets and the notice block sit at FULL body weight and size. They
 *    are never shrunk to fine print. Grey 12px text is how a disclaimer gets
 *    quietly disabled without deleting a single word.
 *  - The wallet address prints and wraps in full (`overflow-wrap: anywhere`).
 *    A truncated address on a page whose whole point is "verify the full
 *    address" would be actively dangerous.
 *
 * Privacy: this page loads NO third-party asset and runs NO script. It is the
 * page people read before deciding whether to touch a token — it does not need
 * to phone Google Fonts or an analytics endpoint to do that. Consequence: type
 * renders in the platform serif/sans fallbacks already declared in the
 * --hv-serif / --tg-sans stacks. That is the trade, and it is deliberate.
 *
 * Contract notes carried from hard-won bugs in this repo:
 *  - never a bare `1fr` in grid-template-columns (that is minmax(auto, 1fr)
 *    and blows out narrow viewports) — always minmax(0, 1fr).
 *  - coarse-pointer rules are or-shaped, never (pointer: coarse) alone.
 *  - every tappable clears 44px on BOTH axes: min-width AND min-height. The
 *    one-axis floor has shipped broken three separate times here.
 *  - dvh, never vh.
 */

body.td-page {
  /* Surface aliases. Everything downstream reads these, so light mode is one
     block at the bottom of this file instead of 40 scattered overrides. */
  --td-bg: var(--hv-espresso);
  --td-bg-2: var(--hv-espresso-2);
  --td-bg-3: var(--hv-espresso-3);
  --td-fg: var(--hv-ink);
  --td-fg-dim: var(--hv-ink-dim);
  --td-fg-mute: var(--hv-ink-mute);
  --td-edge: rgba(248, 240, 226, .14);
  --td-edge-strong: rgba(248, 240, 226, .26);

  /* Reading measure for the legal body copy. Long-form wants ~66-70ch. */
  --td-measure: 68ch;

  background: var(--td-bg);
  color: var(--td-fg);
}

/* The homepage CRT phosphor wash + scanlines are switched OFF here. They are a
   marketing gesture; over 2,000 words of disclosure they are just glare. */
body.td-page::before,
body.td-page::after { display: none; content: none; }

/* ---------------------------------------------------------------- header -- */

body.td-page .td-header {
  position: relative;
  border-bottom: 1px solid var(--td-edge);
  background: var(--td-bg);
}

/* Spectrum strip — the drooly.ai signature gesture, one 4px line. */
body.td-page .td-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--hv-band);
}

body.td-page .td-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 14px 0;
}

body.td-page .td-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  /* 44px floor on BOTH axes. Not one, both. */
  min-width: 44px;
  min-height: 44px;
  color: var(--td-fg);
  text-decoration: none;
}

body.td-page .td-brand img { width: 36px; height: 36px; }

body.td-page .td-brandword {
  font-family: var(--tg-mono);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
}
body.td-page .td-brandword i { font-style: normal; color: var(--hv-mint); }

body.td-page .td-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-left: auto;
}

/* Plain always-visible rail, not .main-nav: the global nav is an off-canvas
   sheet that only opens via app.js, and this page ships no JS at all. An
   off-canvas sheet with no opener is an invisible-but-tappable trap. */
body.td-page .td-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  color: var(--td-fg-mute);
  font-family: var(--tg-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}

body.td-page .td-nav a:hover { color: var(--td-fg); }
body.td-page .td-nav a[aria-current="page"] { color: var(--hv-mint); }

body.td-page .td-nav a:focus-visible,
body.td-page .td-brand:focus-visible {
  outline: 3px solid var(--hv-mint);
  outline-offset: 3px;
  border-radius: var(--hv-round-sm);
}

/* ------------------------------------------------------------------ hero -- */

body.td-page .td-main { padding-bottom: 24px; }

body.td-page .td-hero { padding: clamp(40px, 8vw, 88px) 0 clamp(28px, 5vw, 48px); }

body.td-page .td-hero .hv-display { font-size: clamp(2.4rem, 7.4vw, 5rem); }

body.td-page .td-hero .hv-lede {
  max-width: 46ch;
  color: var(--td-fg-dim);
}

body.td-page .td-updated {
  margin: 26px 0 0;
  font-family: var(--tg-mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--td-fg-mute);
}

/* ------------------------------------------------------------------- toc -- */

body.td-page .td-body {
  display: grid;
  /* minmax(0, …) on both tracks: a bare 1fr is minmax(auto, 1fr) and the
     <code> wallet address would blow the column out on a phone. */
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding-bottom: clamp(48px, 8vw, 96px);
}

body.td-page .td-toc {
  position: sticky;
  top: 24px;
  align-self: start;
  padding: 18px;
  border: 1px solid var(--td-edge);
  border-radius: var(--hv-round);
  background: var(--td-bg-2);
  /* dvh, never vh — the mobile URL bar makes vh lie. */
  max-height: calc(100dvh - 48px);
  overflow: auto;
}

body.td-page .td-toc h2 {
  margin: 0 0 8px;
  font-family: var(--tg-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--td-fg-mute);
}

body.td-page .td-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: td-toc;
}

body.td-page .td-toc a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 44px;
  min-height: 44px;
  padding: 4px 6px;
  border-radius: var(--hv-round-sm);
  color: var(--td-fg-dim);
  font-size: .92rem;
  line-height: 1.35;
  text-decoration: none;
}

body.td-page .td-toc a::before {
  counter-increment: td-toc;
  content: counter(td-toc);
  flex: 0 0 auto;
  font-family: var(--tg-mono);
  font-size: .7rem;
  color: var(--td-fg-mute);
}

body.td-page .td-toc a:hover {
  background: var(--td-bg-3);
  color: var(--td-fg);
}

body.td-page .td-toc a:focus-visible {
  outline: 3px solid var(--hv-mint);
  outline-offset: 2px;
}

/* -------------------------------------------------------------- the text -- */

body.td-page .td-prose { max-width: var(--td-measure); }

body.td-page .td-section { scroll-margin-top: 24px; }
body.td-page .td-section + .td-section { margin-top: clamp(40px, 6vw, 68px); }

body.td-page .td-section h2 {
  margin: 0 0 4px;
  font-family: var(--hv-serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--td-fg);
  text-wrap: balance;
}

body.td-page .td-section .td-rule {
  width: 96px;
  height: 6px;
  margin: 14px 0 22px;
  border: 0;
  border-radius: var(--hv-round-pill);
  background: var(--hv-band);
}

/* Body copy. 1.05rem / 1.7 is a reading size, not a UI size — this is a
   document, and it should be pleasant to actually read to the end. */
body.td-page .td-prose p {
  margin: 0 0 18px;
  max-width: var(--td-measure);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--td-fg-dim);
  text-wrap: pretty;
}

body.td-page .td-prose p:last-child { margin-bottom: 0; }

body.td-page .td-prose a {
  color: var(--hv-mint);
  text-underline-offset: 3px;
}

body.td-page .td-prose a:focus-visible {
  outline: 3px solid var(--hv-mint);
  outline-offset: 3px;
  border-radius: 4px;
}

/* The wallet address. Never truncated, never ellipsised: this page's entire
   instruction is "verify the FULL address", so it wraps rather than hides. */
body.td-page .td-prose code {
  display: inline;
  padding: 2px 6px;
  border: 1px solid var(--td-edge);
  border-radius: 6px;
  background: var(--td-bg-3);
  color: var(--td-fg);
  font-family: var(--tg-mono);
  font-size: .84em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Risk bullets. Full body weight and size, deliberately. If these ever get
   shrunk to grey fine print, the disclosure has been disabled without anyone
   having to delete a word. */
body.td-page .td-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

body.td-page .td-list li {
  position: relative;
  padding: 14px 16px 14px 40px;
  border: 1px solid var(--td-edge);
  border-radius: var(--hv-round-sm);
  background: var(--td-bg-2);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--td-fg-dim);
}

body.td-page .td-list li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 1.55em;
  width: 12px;
  height: 3px;
  border-radius: var(--hv-round-pill);
  background: var(--hv-band);
}

/* Notice block — same visual weight as body copy, boxed for locatability. */
body.td-page .td-notice {
  margin-top: clamp(40px, 6vw, 68px);
  padding: 22px;
  border: 1px solid var(--td-edge-strong);
  border-radius: var(--hv-round);
  background: var(--td-bg-2);
}

body.td-page .td-notice strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--tg-mono);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hv-mint);
}

body.td-page .td-notice p { margin: 0; color: var(--td-fg-dim); }

/* ---------------------------------------------------------------- footer -- */

body.td-page .td-foot {
  border-top: 1px solid var(--td-edge);
  padding: 28px 0 44px;
}

body.td-page .td-foot p {
  margin: 0 0 10px;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--td-fg-mute);
}

body.td-page .td-foot-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
}

body.td-page .td-foot-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 6px;
  color: var(--td-fg-dim);
  font-size: .88rem;
  text-decoration: none;
}

body.td-page .td-foot-links a:hover { color: var(--td-fg); text-decoration: underline; }
body.td-page .td-foot-links a:focus-visible {
  outline: 3px solid var(--hv-mint);
  outline-offset: 2px;
  border-radius: var(--hv-round-sm);
}

/* ------------------------------------------------------------ responsive --
   Gates are width-first and OR-shaped. A coarse pointer never gates a layout
   rule on its own: desktops with touchscreens exist, and a coarse-only gate
   has shipped the wrong layout to them here before. */

@media (max-width: 900px), (pointer: coarse) {
  body.td-page .td-body {
    grid-template-columns: minmax(0, 1fr);
  }
  body.td-page .td-toc {
    position: static;
    max-height: none;
    overflow: visible;
  }
  body.td-page .td-nav a { padding: 0 6px; }
}

@media (max-width: 720px) {
  body.td-page { --hv-shell: min(calc(100% - 28px), 1180px); }
  body.td-page .td-prose p,
  body.td-page .td-list li { font-size: 1rem; }
}

@media (prefers-contrast: more) {
  body.td-page .td-prose p,
  body.td-page .td-list li,
  body.td-page .td-notice p { color: var(--td-fg); }
  body.td-page { --td-edge: rgba(248, 240, 226, .34); }
}

@media (prefers-reduced-motion: reduce) {
  body.td-page * { scroll-behavior: auto; }
}

/* ------------------------------------------------------------ light mode --
   A disclosure page gets printed, screenshotted and read in daylight far more
   than the marketing pages do, so it honours the OS preference. Same tokens,
   paper side of the scale. */
@media (prefers-color-scheme: light) {
  body.td-page {
    --td-bg: var(--hv-paper);
    --td-bg-2: #fbf5e9;
    --td-bg-3: var(--hv-paper-2);
    --td-fg: var(--hv-ink-dark);
    --td-fg-dim: #3a2f26;
    --td-fg-mute: #6d5f4c;
    --td-edge: rgba(26, 20, 16, .16);
    --td-edge-strong: rgba(26, 20, 16, .3);
  }
  body.td-page .td-prose a { color: #0f6f5c; }
  body.td-page .td-nav a[aria-current="page"] { color: #0f6f5c; }
  body.td-page .td-notice strong { color: #0f6f5c; }
  body.td-page .td-nav a:focus-visible,
  body.td-page .td-brand:focus-visible,
  body.td-page .td-toc a:focus-visible,
  body.td-page .td-prose a:focus-visible,
  body.td-page .td-foot-links a:focus-visible { outline-color: #0f6f5c; }
}

/* ----------------------------------------------------------------- print --
   Legal text has to survive being printed and filed. Ink-cheap, full measure,
   nothing clipped, link targets spelled out, and the wallet address printed
   in full on one unbroken run of characters wherever it fits. */
@media print {
  body.td-page {
    background: #fff !important;
    color: #000 !important;
    --td-bg: #fff;
    --td-bg-2: #fff;
    --td-bg-3: #fff;
    --td-fg: #000;
    --td-fg-dim: #000;
    --td-fg-mute: #333;
    --td-edge: #999;
    --td-edge-strong: #666;
    --hv-shell: 100%;
  }

  body.td-page .td-header,
  body.td-page .td-nav,
  body.td-page .td-toc,
  body.td-page .skip-link,
  body.td-page .td-foot-links { display: none !important; }

  body.td-page .td-body { display: block; padding-bottom: 0; }
  body.td-page .td-prose,
  body.td-page .td-prose p { max-width: none; }

  body.td-page .td-hero { padding: 0 0 12pt; }
  body.td-page .td-hero .hv-display { font-size: 22pt; }

  body.td-page .td-section { break-inside: auto; }
  body.td-page .td-section h2 {
    font-size: 14pt;
    break-after: avoid;
    page-break-after: avoid;
  }

  body.td-page .td-rule { background: #000 !important; height: 2pt; }

  body.td-page .td-prose p,
  body.td-page .td-list li {
    font-size: 10.5pt;
    line-height: 1.45;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body.td-page .td-list li { border-color: #999; background: none; }
  body.td-page .td-list li::before { background: #000 !important; }

  body.td-page .td-notice { border-color: #000; background: none; }
  body.td-page .td-notice strong { color: #000; }

  /* Spell out where a link went — a printed disclosure with invisible hrefs
     is missing information the on-screen version had. */
  body.td-page .td-prose a { color: #000; text-decoration: underline; }
  body.td-page .td-prose a[href^="/"]::after { content: " (https://drooly.ai" attr(href) ")"; }
  body.td-page .td-prose a[href^="http"]::after { content: " (" attr(href) ")"; }

  body.td-page .td-prose code {
    border: 0;
    background: none;
    font-size: 10pt;
  }

  body.td-page .td-foot { border-top: 1pt solid #000; }
  body.td-page .td-foot p { color: #000; font-size: 9pt; }
}