/* ──────────────────────────────────────────────────────────────────────────
   tools.css — the per-tool landing pages (/tools/*.html)
   Layered on top of /shared.css; loaded by _layouts/tool.html. Carries the
   Bench design language: warm surfaces, a terminal-style smart-paste panel,
   related-tool cards that lift on hover, and an ink call-to-action that warms
   to the spot color, matching the flagship buttons on bench.html.
   ────────────────────────────────────────────────────────────────────────── */

main {
  flex: 1;
  padding: 3rem 1.5rem;
}

/* Tool hero — a centered monoline glyph on the pegboard dot-grid motif from
   bench.css .hero::before. The icon sits in a rounded surface tile with the
   same soft lift the related-tool cards use, so the tool pages open with the
   same warm, tactile signature as the flagship. */
.tool-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.25rem 1.5rem 3.5rem;
  margin: -3rem -1.5rem 2.5rem;
  border-bottom: 1px solid var(--border);
}
.tool-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(20, 17, 15, 0.07) 1px, transparent 0);
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
  pointer-events: none;
}
.tool-hero-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 108px;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 18px 40px -20px rgba(20, 17, 15, 0.35);
}
.tool-hero-tile svg {
  width: 56px;
  height: 56px;
}

@media (max-width: 700px) {
  .tool-hero {
    padding: 2.25rem 1.5rem 2.5rem;
    margin: -3rem -1.5rem 2rem;
  }
  .tool-hero-tile {
    width: 88px;
    height: 88px;
    border-radius: 18px;
  }
  .tool-hero-tile svg {
    width: 46px;
    height: 46px;
  }
}

@media (prefers-color-scheme: dark) {
  .tool-hero::before {
    background-image: radial-gradient(
      circle at 1px 1px,
      rgba(240, 236, 227, 0.07) 1px,
      transparent 0
    );
  }
  .tool-hero-tile {
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6);
  }
}

.lede {
  font-size: 1.1875rem;
  color: var(--ink-soft);
  line-height: 1.6;
  letter-spacing: -0.01em;
  margin: 0.75rem 0 1.85rem;
}

/* Smart-paste + how-to-open callouts — accent-tinted panels with a spine.
   The example payload sits in a warm terminal token that reads in both modes. */
.smart-paste,
.how-to-open {
  background: var(--accent-light);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 1.1rem 1.35rem;
  margin: 1.25rem 0 0.5rem;
}
.smart-paste p,
.how-to-open p {
  color: var(--body-text);
}
.smart-paste code {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  background: var(--code-bg);
  color: var(--code-ink);
  padding: 0.45rem 0.65rem;
  border-radius: 6px;
  margin-top: 0.35rem;
  word-break: break-all;
}

/* Related tools — cards that lift toward you on hover. */
.related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin-top: 1rem;
}
.related a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.95rem 1.05rem;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
}
.related a:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -14px rgba(20, 17, 15, 0.28);
}
.related .name {
  display: block;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
}
.related .hook {
  display: block;
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.45;
}
@media (max-width: 700px) {
  .related {
    grid-template-columns: 1fr;
  }
}

/* Call-to-action band — ink button that warms to the spot color on hover,
   mirroring .btn-primary on the flagship. */
.cta-band {
  background: var(--accent-light);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 1.5rem 1.65rem;
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.cta-band p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--body-text);
  max-width: 44ch;
}
.cta-band strong {
  color: var(--ink);
}
.cta-band a {
  background: var(--ink);
  color: var(--bg);
  padding: 0.7rem 1.25rem;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}
.cta-band a:hover {
  background: var(--spot);
  color: var(--bg);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .related a,
  .cta-band a {
    transition: none;
  }
  .related a:hover,
  .cta-band a:hover {
    transform: none;
  }
}

/* ── Scroll-driven animations (progressive enhancement) ──
   Tool pages ship no JS, so this is pure CSS: browsers with scroll
   timelines get scroll-linked entrances; everything else renders the page
   fully visible and static. Hidden initial states exist ONLY inside this
   block, and the whole block is skipped under prefers-reduced-motion.
   Keyframes animate opacity + individual transform properties
   (translate/scale) so the transform-based hover lifts above keep working. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Hero tile — drifts down and settles smaller as the hero scrolls out
       (a slight parallax lag), reversing as you scroll back up. The hero
       sits at the top of the page, so an entry-range settle would never
       play; the exit range is the visible half of the effect. */
    .tool-hero {
      view-timeline: --tool-hero block;
    }
    .tool-hero-tile {
      animation: sda-tile-drift linear both;
      animation-timeline: --tool-hero;
      animation-range: exit 0% exit 100%;
    }
    @keyframes sda-tile-drift {
      to {
        opacity: 0.35;
        translate: 0 24px;
        scale: 0.94;
      }
    }

    /* Article sections, callouts, and the CTA band rise as they enter. */
    article h2,
    article .smart-paste,
    article .how-to-open,
    article .cta-band {
      animation: sda-tool-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }

    /* Related cards — same rise, staggered left-to-right. */
    .related a {
      animation: sda-tool-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
    .related a:nth-child(2) {
      animation-range: entry 8% entry 53%;
    }
    .related a:nth-child(3) {
      animation-range: entry 16% entry 61%;
    }
    @keyframes sda-tool-rise {
      from {
        opacity: 0;
        translate: 0 14px;
      }
      to {
        opacity: 1;
        translate: 0 0;
      }
    }
  }
}