/* Extracted from app/templates/guide.html on 2026-08-08. */

  /* ───────── Info / guide — editorial restyle ─────────
     Class prefix: gd-. Sibling of privacy.css and deliberately built from
     the same parts: same wrap width, same eyebrow rule, same serif-italic
     title, same dot-prefixed lists, same hairline. The two pages sit behind
     the same Settings menu, so they should read as one document set.

     Where it differs from privacy, the content earned it: privacy is one
     continuous legal article, this is five independently addressable help
     topics (the quick-jump nav links to each), so topics are discrete
     bordered blocks rather than sections of a single column. */

  .gd-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 16px 80px;
    font-family: var(--ed-sans);
    color: var(--ed-ink);
  }

  .gd-back {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--ed-mono);
    font-size: 12px; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ed-ink); opacity: .68;
    text-decoration: none;
    margin-bottom: 18px;
    transition: opacity .15s, transform .15s, color .15s;
  }
  .gd-back:hover { opacity: 1; color: var(--ed-hot); transform: translateX(-2px); }

  .gd-title {
    font-family: var(--ed-serif);
    font-style: italic; font-weight: 500;
    font-size: clamp(34px, 5.2vw, 48px);
    line-height: 1.05; letter-spacing: -.015em;
    color: var(--ed-ink);
    margin: 0 0 12px;
  }
  .gd-sub {
    font-family: var(--ed-sans);
    font-size: 15px; line-height: 1.55;
    color: var(--ed-ink); opacity: .76;
    margin: 0 0 28px;
  }

  /* Quick jump — index tabs, not pills. Grows as topics are added. */
  .gd-toc {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0 0 28px;
  }
  .gd-toc a {
    font-family: var(--ed-mono);
    font-size: 11.5px; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--ed-ink);
    text-decoration: none;
    padding: 8px 12px;
    background: var(--ed-cream);
    border: 1px solid rgba(14, 29, 61, 0.14);
    transition: color .12s, border-color .12s, background .12s;
  }
  .gd-toc a:hover {
    color: var(--ed-hot);
    border-color: var(--ed-hot);
    background: var(--ed-cream-2);
  }

  /* Each topic is its own addressable block — the quick-jump nav targets it. */
  .gd-topic {
    background: var(--ed-cream);
    border: 1px solid rgba(14, 29, 61, 0.10);
    padding: 22px 26px 24px;
    margin: 0 0 14px;
    scroll-margin-top: 80px;
  }
  .gd-topic__title {
    display: flex; align-items: baseline; gap: 12px;
    font-family: var(--ed-serif);
    font-style: italic; font-weight: 500;
    font-size: 19px; line-height: 1.25;
    color: var(--ed-ink);
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(14, 29, 61, 0.10);
  }
  /* Square marker, not a dot — matches the eyebrow's rule rather than
     introducing a second, rounder shape language. */
  .gd-topic__title::before {
    content: ''; flex: 0 0 auto;
    width: 6px; height: 6px;
    background: var(--ed-hot);
    transform: translateY(-3px);
  }

  .gd-topic p {
    font-family: var(--ed-sans);
    font-size: 14.5px; line-height: 1.7;
    color: var(--ed-ink); opacity: .85;
    margin: 0 0 12px;
  }
  .gd-topic p:last-child { margin-bottom: 0; }
  .gd-topic strong {
    font-family: var(--ed-serif);
    font-style: italic; font-weight: 500;
    color: var(--ed-ink); opacity: 1;
  }

  /* Numbered because this genuinely is a sequence — the order of the
     second-phone setup steps is what makes it work. */
  .gd-steps {
    list-style: none;
    margin: 4px 0 12px; padding: 0;
    counter-reset: gd;
  }
  .gd-steps li {
    position: relative;
    padding: 0 0 10px 30px;
    font-family: var(--ed-sans);
    font-size: 14.5px; line-height: 1.65;
    color: var(--ed-ink); opacity: .85;
  }
  .gd-steps li:last-child { padding-bottom: 0; }
  .gd-steps li::before {
    counter-increment: gd;
    content: counter(gd);
    position: absolute; left: 0; top: -1px;
    font-family: var(--ed-serif);
    font-style: italic; font-weight: 500;
    font-size: 18px;
    color: var(--ed-hot);
  }
  .gd-steps strong {
    font-family: var(--ed-serif);
    font-style: italic; font-weight: 500;
    opacity: 1;
  }

  .gd-subhead {
    font-family: var(--ed-mono);
    font-size: 12px; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ed-ink);
    margin: 22px 0 10px;
  }

  /* Dot-prefixed list — the same device privacy uses. */
  .gd-bullets {
    list-style: none;
    margin: 4px 0 12px; padding: 0;
    font-family: var(--ed-sans);
    font-size: 14.5px; line-height: 1.7;
    color: var(--ed-ink); opacity: .85;
  }
  .gd-bullets li {
    position: relative;
    padding: 4px 0 4px 18px;
  }
  .gd-bullets li::before {
    content: '·';
    position: absolute;
    left: 4px; top: 0;
    color: var(--ed-hot);
    font-size: 22px;
    line-height: 1.45;
  }
  .gd-bullets strong {
    font-family: var(--ed-serif);
    font-style: italic; font-weight: 500;
    opacity: 1;
  }

  /* Callouts — a marked rule in the margin, not a rounded chip. */
  .gd-callout {
    margin: 14px 0 0;
    padding: 12px 14px;
    background: rgba(180, 83, 10, 0.07);
    border-left: 2px solid #b4530a;
  }
  .gd-topic p.gd-callout {
    font-family: var(--ed-sans);
    font-size: 13.5px; line-height: 1.6;
    color: #8a3f08; opacity: 1;
  }
  .gd-topic p.gd-callout strong { color: #8a3f08; }

  .gd-callout--info {
    background: var(--ed-hot-soft);
    border-left-color: var(--ed-hot);
  }
  .gd-topic p.gd-callout--info,
  .gd-topic p.gd-callout--info strong { color: var(--ed-hot-deep); }

  .gd-help {
    margin: 24px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(14, 29, 61, 0.10);
  }
  /* Muted via the colour, not opacity: opacity on the paragraph would dim the
     link inside it too, and a child cannot escape its parent's opacity. That
     pushed the link under 4.5:1 in dark mode. */
  .gd-help p {
    margin: 0;
    font-family: var(--ed-mono);
    font-size: 12.5px; line-height: 1.55;
    letter-spacing: .03em;
    color: rgba(14, 29, 61, 0.62);
  }
  .gd-help a {
    color: var(--ed-hot);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color .12s;
  }
  .gd-help a:hover { color: var(--ed-ink); }

  /* Dark mode */
  .dark .gd-wrap { color: var(--ed-cream); }
  .dark .gd-back { color: var(--ed-cream); opacity: .72; }
  .dark .gd-back:hover { color: var(--ed-hot-light); }

  .dark .gd-title { color: var(--ed-cream); }
  .dark .gd-sub { color: var(--ed-cream); opacity: .80; }

  .dark .gd-toc a {
    color: var(--ed-cream);
    background: rgba(245, 239, 225, 0.04);
    border-color: rgba(245, 239, 225, 0.16);
  }
  .dark .gd-toc a:hover {
    color: var(--ed-hot-light);
    border-color: var(--ed-hot-light);
    background: rgba(245, 239, 225, 0.08);
  }

  .dark .gd-topic {
    background: rgba(245, 239, 225, 0.04);
    border-color: rgba(245, 239, 225, 0.12);
  }
  .dark .gd-topic__title {
    color: var(--ed-cream);
    border-bottom-color: rgba(245, 239, 225, 0.12);
  }
  .dark .gd-topic__title::before { background: var(--ed-hot-light); }
  .dark .gd-topic p { color: var(--ed-cream); opacity: .86; }
  .dark .gd-topic strong { color: var(--ed-cream); opacity: 1; }

  .dark .gd-steps li { color: var(--ed-cream); opacity: .86; }
  .dark .gd-steps li::before { color: var(--ed-hot-light); }
  .dark .gd-steps strong { color: var(--ed-cream); }

  .dark .gd-subhead { color: var(--ed-cream); }

  .dark .gd-bullets { color: var(--ed-cream); opacity: .86; }
  .dark .gd-bullets li::before { color: var(--ed-hot-light); }
  .dark .gd-bullets strong { color: var(--ed-cream); }

  /* Warm amber is unreadable on ink — lift it to a light tint on a dark fill. */
  .dark .gd-callout {
    background: rgba(251, 191, 36, 0.10);
    border-left-color: #fbbf24;
  }
  .dark .gd-topic p.gd-callout,
  .dark .gd-topic p.gd-callout strong { color: #fcd34d; }

  .dark .gd-callout--info {
    background: rgba(96, 165, 250, 0.12);
    border-left-color: var(--ed-hot-light);
  }
  .dark .gd-topic p.gd-callout--info,
  .dark .gd-topic p.gd-callout--info strong { color: var(--ed-hot-light); }

  .dark .gd-help { border-top-color: rgba(245, 239, 225, 0.12); }
  .dark .gd-help p { color: rgba(245, 239, 225, 0.66); }
  .dark .gd-help a { color: var(--ed-hot-light); }
  .dark .gd-help a:hover { color: var(--ed-cream); }

  @media (prefers-reduced-motion: reduce) {
    .gd-back, .gd-toc a, .gd-help a { transition: none; }
  }