/* ================================================================
   tools.css — Nopturnia Free Tools

   Covers both surfaces:
     .tools-page   /tools            the searchable directory
     .tool-page    /tools/<slug>     an individual tool

   Tokens, site nav, mobile sheet, breadcrumb and footer all come from
   blog-v2.css, which is shared with the homepage and every article —
   never fork or edit that file.

   SPECIFICITY NOTE. blog-v2.css sets `body.blog-v2 a { color: inherit }`
   at (0,1,1). Every rule here is scoped `body.blog-v2.tools-page` /
   `body.blog-v2.tool-page` at (0,2,1) so anchors styled as cards and
   buttons actually keep their colour. This trap has bitten this codebase
   before (see css/price-insights.css); do not "simplify" the selectors.
================================================================ */

/* ================================================================
   SHARED
================================================================ */

body.blog-v2.tools-page .tl-skip,
body.blog-v2.tool-page .tl-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 16px;
  background: var(--v2-ink); color: var(--v2-bg);
  border-radius: var(--v2-r-md); font-size: 13px;
}
body.blog-v2.tools-page .tl-skip:focus,
body.blog-v2.tool-page .tl-skip:focus { left: 16px; top: calc(var(--v2-nav-h) + 8px); }

/* Privacy pill — the page's single most important promise, so it gets the
   accent treatment and appears on both surfaces. */
body.blog-v2.tools-page .tl-shield,
body.blog-v2.tool-page .tl-shield {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  padding: 5px 11px 5px 9px;
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.10);
  color: #047857;
  font-family: var(--v2-mono);
  font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase;
  white-space: nowrap;
}
body.blog-v2.tools-page .tl-shield svg,
body.blog-v2.tool-page .tl-shield svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ================================================================
   /tools — HERO
   Compact by design: the search box should be reachable without
   scrolling on a laptop.
================================================================ */

body.blog-v2.tools-page .tl-hero {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--v2-hairline);
  background: linear-gradient(to bottom, rgba(255,255,255,0.55), var(--v2-bg));
}
body.blog-v2.tools-page .tl-hero::before {
  content: ""; position: absolute; top: -96px; left: 50%;
  width: 620px; height: 280px; transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(29, 78, 216, 0.10);
  filter: blur(64px); pointer-events: none;
}
body.blog-v2.tools-page .tl-hero-inner {
  position: relative;
  max-width: var(--v2-max-w); margin: 0 auto;
  padding: 18px 24px 22px;
}
@media (min-width: 768px)  { body.blog-v2.tools-page .tl-hero-inner { padding: 26px 24px 26px; } }
@media (min-width: 1024px) { body.blog-v2.tools-page .tl-hero-inner { padding: 32px 24px 30px; } }

body.blog-v2.tools-page .tl-hero-eyebrow { font-size: 10px; }

body.blog-v2.tools-page .tl-hero h1 {
  margin-top: 6px; max-width: 42rem;
  font-family: var(--v2-display);
  font-size: 26px; font-weight: 600; line-height: 1.05;
  letter-spacing: -0.02em; color: var(--v2-ink);
}
@media (min-width: 640px) { body.blog-v2.tools-page .tl-hero h1 { font-size: 32px; } }
@media (min-width: 768px) { body.blog-v2.tools-page .tl-hero h1 { font-size: 40px; } }

body.blog-v2.tools-page .tl-hero h1 .tl-grad {
  background: linear-gradient(to right, var(--v2-brand), var(--v2-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

body.blog-v2.tools-page .tl-hero-sub {
  margin-top: 6px; max-width: 38rem;
  font-size: 13px; line-height: 1.45; color: var(--v2-ink-soft);
}
@media (min-width: 768px) { body.blog-v2.tools-page .tl-hero-sub { font-size: 14px; } }

/* Trust chips row */
body.blog-v2.tools-page .tl-trust-row {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
}
body.blog-v2.tools-page .tl-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--v2-hairline); border-radius: 999px;
  background: var(--v2-card);
  font-size: 11.5px; color: var(--v2-ink-soft);
}
body.blog-v2.tools-page .tl-chip svg { width: 12px; height: 12px; color: var(--v2-brand); }

/* ================================================================
   /tools — SEARCH
================================================================ */

body.blog-v2.tools-page .tl-search {
  display: flex; align-items: center; gap: 8px;
  max-width: 42rem; margin-top: 16px; padding: 8px 12px;
  border: 1px solid var(--v2-hairline); border-radius: var(--v2-r-xl);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color .18s ease, box-shadow .18s ease;
}
@media (min-width: 768px) {
  body.blog-v2.tools-page .tl-search { border-radius: var(--v2-r-2xl); padding: 10px 16px; }
}
body.blog-v2.tools-page .tl-search:focus-within {
  border-color: var(--v2-brand);
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.10);
}
body.blog-v2.tools-page .tl-search-icon { flex-shrink: 0; width: 16px; height: 16px; color: var(--v2-ink-soft); }
body.blog-v2.tools-page .tl-search input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 13px; color: var(--v2-ink);
}
@media (min-width: 768px) { body.blog-v2.tools-page .tl-search input { font-size: 14px; } }
body.blog-v2.tools-page .tl-search input::placeholder { color: rgba(100, 116, 139, 0.7); }
body.blog-v2.tools-page .tl-search input::-webkit-search-cancel-button { display: none; }

body.blog-v2.tools-page .tl-search-clear {
  display: none; flex-shrink: 0; width: 22px; height: 22px;
  align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: var(--v2-secondary); color: var(--v2-ink-soft);
  cursor: pointer; font-family: inherit;
}
body.blog-v2.tools-page .tl-search-clear svg { width: 12px; height: 12px; }
body.blog-v2.tools-page .tl-search-clear:hover { background: var(--v2-hairline); color: var(--v2-ink); }
body.blog-v2.tools-page .tl-search.has-query .tl-search-clear { display: flex; }

body.blog-v2.tools-page .tl-count {
  flex-shrink: 0; font-family: var(--v2-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--v2-ink-soft); white-space: nowrap;
}
body.blog-v2.tools-page .tl-count-desktop { display: none; }
@media (min-width: 640px) { body.blog-v2.tools-page .tl-count-desktop { display: inline; } }

body.blog-v2.tools-page .tl-kbd {
  flex-shrink: 0; display: none; padding: 2px 6px;
  border: 1px solid var(--v2-hairline); border-radius: var(--v2-r-sm);
  font-family: var(--v2-mono); font-size: 10px; color: var(--v2-ink-soft);
}
@media (min-width: 900px) { body.blog-v2.tools-page .tl-search:not(:focus-within) .tl-kbd { display: block; } }

/* ================================================================
   /tools — STICKY FILTER BAR
================================================================ */

body.blog-v2.tools-page .tl-filterbar {
  position: sticky; top: var(--v2-nav-h); z-index: 30;
  border-bottom: 1px solid var(--v2-hairline);
  background: rgba(248, 250, 252, 0.85);
  backdrop-filter: blur(12px);
}
body.blog-v2.tools-page .tl-filterbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; max-width: var(--v2-max-w); margin: 0 auto; padding: 10px 24px;
}
body.blog-v2.tools-page .tl-filter-left {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
body.blog-v2.tools-page .tl-filter-icon {
  display: none; flex-shrink: 0; width: 14px; height: 14px; color: var(--v2-ink-soft);
}
@media (min-width: 768px) { body.blog-v2.tools-page .tl-filter-icon { display: block; } }

body.blog-v2.tools-page .tl-pills {
  display: flex; gap: 6px;
  /* min-width:0 is what actually lets this scroll — without it the flex item
     refuses to shrink below its content width and the row overflows. Same fix
     as .bi-pills in blog-index-v2.css. */
  min-width: 0; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
body.blog-v2.tools-page .tl-pills::-webkit-scrollbar { display: none; }

body.blog-v2.tools-page .tl-pill {
  flex-shrink: 0; white-space: nowrap; padding: 6px 12px;
  border: 1px solid var(--v2-hairline); border-radius: 999px;
  background: var(--v2-card); color: var(--v2-ink-soft);
  font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
body.blog-v2.tools-page .tl-pill:hover { border-color: rgba(15, 23, 42, 0.4); color: var(--v2-ink); }
body.blog-v2.tools-page .tl-pill[aria-pressed="true"] {
  border-color: var(--v2-ink); background: var(--v2-ink); color: var(--v2-bg);
}
body.blog-v2.tools-page .tl-pill-n {
  margin-left: 5px; font-family: var(--v2-mono); font-size: 10px; opacity: 0.65;
}
body.blog-v2.tools-page .tl-count-mobile { display: inline; }
@media (min-width: 640px) { body.blog-v2.tools-page .tl-count-mobile { display: none; } }

/* ================================================================
   TOOL CARD GRID — shared by /tools and the "Related tools" block
================================================================ */

body.blog-v2.tools-page .tl-results,
body.blog-v2.tool-page .tl-results {
  max-width: var(--v2-max-w); margin: 0 auto; padding: 24px;
}

body.blog-v2.tools-page .tl-grid,
body.blog-v2.tool-page .tl-grid {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 560px)  { body.blog-v2.tools-page .tl-grid, body.blog-v2.tool-page .tl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { body.blog-v2.tools-page .tl-grid, body.blog-v2.tool-page .tl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { body.blog-v2.tools-page .tl-grid { grid-template-columns: repeat(4, 1fr); } }

body.blog-v2.tools-page .tl-card,
body.blog-v2.tool-page .tl-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px;
  border: 1px solid var(--v2-hairline); border-radius: var(--v2-r-2xl);
  background: var(--v2-card); color: var(--v2-ink);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
body.blog-v2.tools-page a.tl-card:hover,
body.blog-v2.tool-page a.tl-card:hover {
  border-color: rgba(29, 78, 216, 0.45);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
  transform: translateY(-2px);
}
body.blog-v2.tools-page a.tl-card:focus-visible,
body.blog-v2.tool-page a.tl-card:focus-visible {
  outline: 2px solid var(--v2-brand); outline-offset: 2px;
}

/* "Coming soon" cards are inert on purpose — rendered as <div>, so they are
   already unfocusable and unclickable. This only makes that legible. */
body.blog-v2.tools-page .tl-card.is-soon,
body.blog-v2.tool-page .tl-card.is-soon {
  background: color-mix(in srgb, var(--v2-secondary) 55%, transparent);
  border-style: dashed;
  cursor: default;
}
body.blog-v2.tools-page .tl-card.is-soon .tl-card-name,
body.blog-v2.tool-page .tl-card.is-soon .tl-card-name { color: var(--v2-ink-soft); }
body.blog-v2.tools-page .tl-card.is-soon .tl-card-icon,
body.blog-v2.tool-page .tl-card.is-soon .tl-card-icon {
  background: var(--v2-secondary); color: var(--v2-ink-soft); box-shadow: none;
}

body.blog-v2.tools-page .tl-card-top,
body.blog-v2.tool-page .tl-card-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
body.blog-v2.tools-page .tl-card-icon,
body.blog-v2.tool-page .tl-card-icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: var(--v2-r-lg);
  background: rgba(29, 78, 216, 0.08); color: var(--v2-brand);
  box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.12);
}
body.blog-v2.tools-page .tl-i,
body.blog-v2.tool-page .tl-i { width: 19px; height: 19px; }

body.blog-v2.tools-page .tl-badge,
body.blog-v2.tool-page .tl-badge {
  flex-shrink: 0; padding: 3px 8px; border-radius: 999px;
  font-family: var(--v2-mono); font-size: 9.5px;
  letter-spacing: 0.10em; text-transform: uppercase;
}
body.blog-v2.tools-page .tl-badge-popular, body.blog-v2.tool-page .tl-badge-popular {
  background: rgba(245, 158, 11, 0.12); color: #B45309;
}
body.blog-v2.tools-page .tl-badge-new, body.blog-v2.tool-page .tl-badge-new {
  background: rgba(29, 78, 216, 0.10); color: var(--v2-brand);
}
body.blog-v2.tools-page .tl-badge-soon, body.blog-v2.tool-page .tl-badge-soon {
  background: var(--v2-secondary); color: var(--v2-ink-soft);
}

body.blog-v2.tools-page .tl-card-name,
body.blog-v2.tool-page .tl-card-name {
  margin-top: 2px;
  font-family: var(--v2-display); font-weight: 600; font-size: 15px;
  letter-spacing: -0.01em; line-height: 1.25;
}
body.blog-v2.tools-page .tl-card-desc,
body.blog-v2.tool-page .tl-card-desc {
  flex: 1; font-size: 12.5px; line-height: 1.5; color: var(--v2-ink-soft);
}
body.blog-v2.tools-page .tl-card-foot,
body.blog-v2.tool-page .tl-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 2px; padding-top: 10px;
  border-top: 1px solid var(--v2-hairline);
}
body.blog-v2.tools-page .tl-card-cat,
body.blog-v2.tool-page .tl-card-cat {
  font-family: var(--v2-mono); font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--v2-ink-soft);
}
body.blog-v2.tools-page .tl-uses,
body.blog-v2.tool-page .tl-uses {
  font-size: 11px; color: var(--v2-ink-soft); white-space: nowrap;
}
body.blog-v2.tools-page .tl-uses-soon,
body.blog-v2.tool-page .tl-uses-soon { opacity: 0.7; }

/* Search highlight */
body.blog-v2.tools-page .tl-card mark {
  background: rgba(250, 204, 21, 0.32); color: inherit;
  padding: 0 1px; border-radius: 2px;
}

/* Empty state */
body.blog-v2.tools-page .tl-empty {
  display: none; padding: 48px 24px; text-align: center;
}
body.blog-v2.tools-page .tl-empty.show { display: block; }
body.blog-v2.tools-page .tl-empty h2 {
  font-family: var(--v2-display); font-size: 18px; font-weight: 600; color: var(--v2-ink);
}
body.blog-v2.tools-page .tl-empty p { margin-top: 6px; font-size: 13.5px; color: var(--v2-ink-soft); }
body.blog-v2.tools-page .tl-empty-actions { margin-top: 14px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* Saved-tools row (populated from localStorage by js/tools-index.js) */
body.blog-v2.tools-page .tl-saved { display: none; margin-bottom: 22px; }
body.blog-v2.tools-page .tl-saved.show { display: block; }
body.blog-v2.tools-page .tl-saved-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
}
body.blog-v2.tools-page .tl-saved-head h2 {
  font-family: var(--v2-display); font-size: 15px; font-weight: 600; color: var(--v2-ink);
}
body.blog-v2.tools-page .tl-saved-note { font-size: 11.5px; color: var(--v2-ink-soft); }

/* ================================================================
   /tools — TRUST SECTION
================================================================ */

body.blog-v2.tools-page .tl-why {
  border-top: 1px solid var(--v2-hairline);
  background: color-mix(in srgb, var(--v2-card) 45%, transparent);
}
body.blog-v2.tools-page .tl-why-inner {
  max-width: var(--v2-max-w); margin: 0 auto; padding: 48px 24px;
}
body.blog-v2.tools-page .tl-why h2 {
  margin-top: 6px; font-family: var(--v2-display); font-weight: 600;
  font-size: clamp(22px, 3vw, 28px); letter-spacing: -0.02em; color: var(--v2-ink);
}
body.blog-v2.tools-page .tl-why-sub { margin-top: 8px; max-width: 44rem; font-size: 14px; line-height: 1.6; color: var(--v2-ink-soft); }
body.blog-v2.tools-page .tl-why-grid {
  display: grid; gap: 14px; margin-top: 26px; grid-template-columns: 1fr;
}
@media (min-width: 768px) { body.blog-v2.tools-page .tl-why-grid { grid-template-columns: repeat(3, 1fr); } }

/* ================================================================
   PANEL — the neutral card used across trust blocks, specs, FAQ
================================================================ */

body.blog-v2.tools-page .tl-panel,
body.blog-v2.tool-page .tl-panel {
  padding: 18px; border: 1px solid var(--v2-hairline);
  border-radius: var(--v2-r-2xl); background: var(--v2-card);
}
body.blog-v2.tools-page .tl-panel h3,
body.blog-v2.tool-page .tl-panel h3 {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--v2-display); font-size: 14.5px; font-weight: 600; color: var(--v2-ink);
}
body.blog-v2.tools-page .tl-panel h3 svg,
body.blog-v2.tool-page .tl-panel h3 svg { width: 16px; height: 16px; color: var(--v2-brand); flex-shrink: 0; }
body.blog-v2.tools-page .tl-panel p,
body.blog-v2.tool-page .tl-panel p { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--v2-ink-soft); }

/* ================================================================
   /tools/<slug> — TOOL PAGE
   FIRST-SCREEN BUDGET (the reason this page looks the way it does):
     nav 56 + header ~76 + tool card ~600 = ~732px, inside a 1080p
     laptop's ~940px viewport. Nothing decorative goes above the tool.
     If you add anything here, measure again.
================================================================ */

body.blog-v2.tool-page .tp-head {
  border-bottom: 1px solid var(--v2-hairline);
  background: linear-gradient(to bottom, rgba(255,255,255,0.6), var(--v2-bg));
}
body.blog-v2.tool-page .tp-head-inner {
  max-width: var(--v2-max-w); margin: 0 auto; padding: 10px 24px 12px;
}
body.blog-v2.tool-page .tp-head-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}
body.blog-v2.tool-page .tp-head h1 {
  font-family: var(--v2-display); font-weight: 600;
  font-size: 22px; line-height: 1.1; letter-spacing: -0.02em; color: var(--v2-ink);
}
@media (min-width: 768px) { body.blog-v2.tool-page .tp-head h1 { font-size: 27px; } }
/* The one-line sub only appears where there is vertical room to spare. */
body.blog-v2.tool-page .tp-head-sub {
  flex-basis: 100%; display: none;
  font-size: 12.5px; line-height: 1.4; color: var(--v2-ink-soft);
}
@media (min-height: 800px) { body.blog-v2.tool-page .tp-head-sub { display: block; } }

/* ---- Tool shell ---- */

body.blog-v2.tool-page .tp-tool {
  max-width: var(--v2-max-w); margin: 0 auto; padding: 16px 24px 20px;
}
body.blog-v2.tool-page .tp-grid {
  display: grid; gap: 14px; grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1024px) {
  body.blog-v2.tool-page .tp-grid { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 18px; }
}

body.blog-v2.tool-page .tp-card {
  border: 1px solid var(--v2-hairline); border-radius: var(--v2-r-3xl);
  background: var(--v2-card);
  box-shadow: 0 10px 34px rgba(15, 23, 42, 0.05);
}

/* ---- Dropzone ---- */

body.blog-v2.tool-page .tp-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center;
  min-height: 300px; padding: 28px 22px;
  border: 2px dashed var(--v2-hairline); border-radius: var(--v2-r-3xl);
  background: color-mix(in srgb, var(--v2-secondary) 40%, transparent);
  transition: border-color .18s ease, background .18s ease;
}
@media (min-width: 1024px) { body.blog-v2.tool-page .tp-drop { min-height: 360px; } }
body.blog-v2.tool-page .tp-drop.is-over {
  border-color: var(--v2-brand);
  background: rgba(29, 78, 216, 0.06);
}
/* Once there are results in it, this is no longer a drop target — a dashed
   "drop here" outline around finished images reads as unfinished. Progressive:
   browsers without :has() just keep the dashed border, which is only cosmetic. */
body.blog-v2.tool-page .tp-drop:has(.tp-results.show) {
  border-style: solid;
  border-color: var(--v2-hairline);
  background: var(--v2-card);
  justify-content: flex-start;
}
body.blog-v2.tool-page .tp-drop-icon {
  display: grid; place-items: center; width: 54px; height: 54px;
  border-radius: var(--v2-r-2xl);
  background: rgba(29, 78, 216, 0.09); color: var(--v2-brand);
}
body.blog-v2.tool-page .tp-drop-icon svg { width: 26px; height: 26px; }
body.blog-v2.tool-page .tp-drop-title {
  font-family: var(--v2-display); font-size: 19px; font-weight: 600; color: var(--v2-ink);
}
body.blog-v2.tool-page .tp-drop-sub { max-width: 30rem; font-size: 13px; line-height: 1.55; color: var(--v2-ink-soft); }
body.blog-v2.tool-page .tp-drop input[type="file"] { display: none; }

/* ---- Buttons ---- */

body.blog-v2.tool-page .tp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border: 1px solid transparent; border-radius: var(--v2-r-xl);
  font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, opacity .16s ease;
}
body.blog-v2.tool-page .tp-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
body.blog-v2.tool-page .tp-btn-primary {
  background: var(--v2-brand); color: #fff;
  box-shadow: 0 8px 20px rgba(29, 78, 216, 0.26);
}
body.blog-v2.tool-page .tp-btn-primary:hover:not(:disabled) { transform: translateY(-1px); }
body.blog-v2.tool-page .tp-btn-ghost {
  border-color: var(--v2-hairline); background: var(--v2-card); color: var(--v2-ink);
}
body.blog-v2.tool-page .tp-btn-ghost:hover:not(:disabled) { background: var(--v2-secondary); }
body.blog-v2.tool-page .tp-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
body.blog-v2.tool-page .tp-btn-block { width: 100%; }
/* Anchors styled as buttons must beat `body.blog-v2 a { color: inherit }`. */
body.blog-v2.tool-page a.tp-btn-primary,
body.blog-v2.tool-page a.tp-btn-primary:hover { color: #fff; }
body.blog-v2.tool-page a.tp-btn-ghost,
body.blog-v2.tool-page a.tp-btn-ghost:hover { color: var(--v2-ink); }

/* ---- Options panel ---- */

body.blog-v2.tool-page .tp-panel { padding: 16px; }
body.blog-v2.tool-page .tp-step {
  display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
  font-family: var(--v2-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--v2-ink-soft);
}
body.blog-v2.tool-page .tp-step-n {
  display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  background: var(--v2-brand); color: #fff; font-size: 9.5px; letter-spacing: 0;
}
body.blog-v2.tool-page .tp-field + .tp-field { margin-top: 14px; }

/* Two big radio cards — a large tap target beats a <select> for a
   two-way choice, and the sub-label is where the plain-English guidance
   lives ("Sharpest · text" rather than "lossless"). */
body.blog-v2.tool-page .tp-radios { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.blog-v2.tool-page .tp-radio { position: relative; }
body.blog-v2.tool-page .tp-radio input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
/* Direct sibling, NOT a descendant selector. `.tp-radio span` would also match
   .tp-radio-name and .tp-radio-hint nested inside, giving each of them their own
   border, padding and background — a card inside a card. */
body.blog-v2.tool-page .tp-radio > input + span {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  padding: 10px 8px; border: 1px solid var(--v2-hairline);
  border-radius: var(--v2-r-lg); background: var(--v2-card);
  cursor: pointer; text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
body.blog-v2.tool-page .tp-radio-name { font-weight: 600; font-size: 13.5px; color: var(--v2-ink); }
body.blog-v2.tool-page .tp-radio-hint { font-size: 10.5px; color: var(--v2-ink-soft); }
body.blog-v2.tool-page .tp-radio > input:checked + span {
  border-color: var(--v2-brand); background: rgba(29, 78, 216, 0.06);
}
body.blog-v2.tool-page .tp-radio > input:focus-visible + span { outline: 2px solid var(--v2-brand); outline-offset: 2px; }

body.blog-v2.tool-page .tp-label {
  display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 500; color: var(--v2-ink);
}
body.blog-v2.tool-page .tp-hint { margin-top: 5px; font-size: 11.5px; line-height: 1.45; color: var(--v2-ink-soft); }

body.blog-v2.tool-page .tp-select,
body.blog-v2.tool-page .tp-input {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--v2-hairline); border-radius: var(--v2-r-lg);
  background: var(--v2-card); color: var(--v2-ink);
  font-family: inherit; font-size: 13.5px; outline: none;
}
body.blog-v2.tool-page .tp-select:focus,
body.blog-v2.tool-page .tp-input:focus { border-color: var(--v2-brand); }

body.blog-v2.tool-page .tp-range { width: 100%; accent-color: var(--v2-brand); }

body.blog-v2.tool-page .tp-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--v2-ink); }
body.blog-v2.tool-page .tp-check input { margin-top: 2px; accent-color: var(--v2-brand); }

/* ---- Progress ---- */

body.blog-v2.tool-page .tp-progress { display: none; margin-top: 12px; }
body.blog-v2.tool-page .tp-progress.show { display: block; }
body.blog-v2.tool-page .tp-progress-bar {
  height: 6px; border-radius: 999px; background: var(--v2-secondary); overflow: hidden;
}
body.blog-v2.tool-page .tp-progress-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(to right, var(--v2-brand), var(--v2-accent));
  transition: width .2s ease;
}
body.blog-v2.tool-page .tp-progress-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px;
}
body.blog-v2.tool-page .tp-progress-text { font-size: 11.5px; color: var(--v2-ink-soft); }
body.blog-v2.tool-page .tp-cancel {
  border: none; background: none; font-family: inherit;
  font-size: 11.5px; color: var(--v2-brand); cursor: pointer; text-decoration: underline;
}

/* ---- Status / errors ---- */

body.blog-v2.tool-page .tp-alert {
  display: none; align-items: flex-start; gap: 8px; margin-top: 12px;
  padding: 10px 12px; border-radius: var(--v2-r-lg);
  font-size: 12.5px; line-height: 1.5;
}
body.blog-v2.tool-page .tp-alert.show { display: flex; }
body.blog-v2.tool-page .tp-alert svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
body.blog-v2.tool-page .tp-alert-error { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
body.blog-v2.tool-page .tp-alert-warn  { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
body.blog-v2.tool-page .tp-alert-ok    { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }

/* ---- Usage counter (social proof) ---- */

body.blog-v2.tool-page .tp-proof {
  display: flex; align-items: center; gap: 7px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--v2-hairline);
  font-size: 11.5px; line-height: 1.45; color: var(--v2-ink-soft);
}
body.blog-v2.tool-page .tp-proof svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--v2-ink-soft); }
body.blog-v2.tool-page .tp-proof b { font-weight: 600; color: var(--v2-ink); }

/* ---- Advanced options ---- */

body.blog-v2.tool-page .tp-adv { margin-top: 12px; border-top: 1px solid var(--v2-hairline); }
body.blog-v2.tool-page .tp-adv > summary {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 0 3px; cursor: pointer; list-style: none;
  font-size: 12.5px; font-weight: 500; color: var(--v2-ink-soft);
}
body.blog-v2.tool-page .tp-adv > summary::-webkit-details-marker { display: none; }
body.blog-v2.tool-page .tp-adv > summary:hover { color: var(--v2-ink); }
body.blog-v2.tool-page .tp-adv > summary svg { width: 14px; height: 14px; transition: transform .18s ease; }
body.blog-v2.tool-page .tp-adv[open] > summary svg { transform: rotate(90deg); }
body.blog-v2.tool-page .tp-adv-body { padding: 12px 0 4px; }

/* ---- Results (page thumbnails) ---- */

body.blog-v2.tool-page .tp-results { display: none; padding: 14px; }
body.blog-v2.tool-page .tp-results.show { display: block; }
body.blog-v2.tool-page .tp-results-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
}
body.blog-v2.tool-page .tp-results-title { font-family: var(--v2-display); font-size: 15px; font-weight: 600; color: var(--v2-ink); }
body.blog-v2.tool-page .tp-results-sub { font-size: 11.5px; color: var(--v2-ink-soft); }

body.blog-v2.tool-page .tp-thumbs {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  max-height: 420px; overflow-y: auto; padding-right: 4px;
}
body.blog-v2.tool-page .tp-thumb {
  display: flex; flex-direction: column;
  border: 1px solid var(--v2-hairline); border-radius: var(--v2-r-lg);
  background: var(--v2-card); overflow: hidden;
}
body.blog-v2.tool-page .tp-thumb-img {
  /* Checkerboard so a transparent PNG reads as transparent, not as white. */
  display: grid; place-items: center; padding: 6px; min-height: 96px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #eef2f7 25%, transparent 25%, transparent 75%, #eef2f7 75%),
    linear-gradient(45deg, #eef2f7 25%, transparent 25%, transparent 75%, #eef2f7 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}
body.blog-v2.tool-page .tp-thumb-img img { max-width: 100%; max-height: 130px; object-fit: contain; }
body.blog-v2.tool-page .tp-thumb-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 6px 8px; border-top: 1px solid var(--v2-hairline);
}
body.blog-v2.tool-page .tp-thumb-n { font-family: var(--v2-mono); font-size: 10px; color: var(--v2-ink-soft); }
body.blog-v2.tool-page .tp-thumb-dl {
  display: grid; place-items: center; width: 24px; height: 24px;
  border: none; border-radius: var(--v2-r-sm);
  background: var(--v2-secondary); color: var(--v2-ink-soft);
  cursor: pointer; font-family: inherit;
}
body.blog-v2.tool-page .tp-thumb-dl:hover { background: rgba(29,78,216,0.10); color: var(--v2-brand); }
body.blog-v2.tool-page .tp-thumb-dl svg { width: 13px; height: 13px; }

/* ---- File chip (selected file summary) ---- */

body.blog-v2.tool-page .tp-file {
  display: none; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--v2-hairline);
  border-radius: var(--v2-r-lg); background: var(--v2-card);
}
body.blog-v2.tool-page .tp-file.show { display: flex; }
body.blog-v2.tool-page .tp-file-icon {
  display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--v2-r-md); background: rgba(29,78,216,0.08); color: var(--v2-brand);
}
body.blog-v2.tool-page .tp-file-icon svg { width: 16px; height: 16px; }
body.blog-v2.tool-page .tp-file-meta { min-width: 0; flex: 1; }
body.blog-v2.tool-page .tp-file-name {
  font-size: 13px; font-weight: 500; color: var(--v2-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.blog-v2.tool-page .tp-file-sub { font-size: 11px; color: var(--v2-ink-soft); }
body.blog-v2.tool-page .tp-file-x {
  flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px;
  border: none; border-radius: 50%; background: var(--v2-secondary);
  color: var(--v2-ink-soft); cursor: pointer; font-family: inherit;
}
body.blog-v2.tool-page .tp-file-x:hover { background: var(--v2-hairline); color: var(--v2-ink); }
body.blog-v2.tool-page .tp-file-x svg { width: 13px; height: 13px; }

/* ================================================================
   TOOL PAGE — BELOW-THE-FOLD SECTIONS
================================================================ */

body.blog-v2.tool-page .tp-section { border-top: 1px solid var(--v2-hairline); }
body.blog-v2.tool-page .tp-section.alt { background: color-mix(in srgb, var(--v2-card) 45%, transparent); }
body.blog-v2.tool-page .tp-section-inner {
  max-width: var(--v2-max-w); margin: 0 auto; padding: 44px 24px;
}
@media (min-width: 1024px) { body.blog-v2.tool-page .tp-section-inner { padding: 56px 24px; } }
body.blog-v2.tool-page .tp-h2 {
  margin-top: 6px; font-family: var(--v2-display); font-weight: 600;
  font-size: clamp(21px, 3vw, 27px); letter-spacing: -0.02em; color: var(--v2-ink);
}
body.blog-v2.tool-page .tp-lede { margin-top: 8px; max-width: 46rem; font-size: 14px; line-height: 1.65; color: var(--v2-ink-soft); }

/* Numbered steps */
body.blog-v2.tool-page .tp-steps {
  display: grid; gap: 14px; margin-top: 26px; grid-template-columns: 1fr;
  counter-reset: tpstep;
}
@media (min-width: 640px)  { body.blog-v2.tool-page .tp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { body.blog-v2.tool-page .tp-steps { grid-template-columns: repeat(4, 1fr); } }
body.blog-v2.tool-page .tp-stepcard {
  position: relative; padding: 18px 16px 16px;
  border: 1px solid var(--v2-hairline); border-radius: var(--v2-r-2xl); background: var(--v2-card);
}
body.blog-v2.tool-page .tp-stepcard::before {
  counter-increment: tpstep; content: counter(tpstep);
  display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 10px;
  border-radius: 50%; background: var(--v2-brand); color: #fff;
  font-family: var(--v2-mono); font-size: 12px;
}
body.blog-v2.tool-page .tp-stepcard h3 { font-family: var(--v2-display); font-size: 14.5px; font-weight: 600; color: var(--v2-ink); }
body.blog-v2.tool-page .tp-stepcard p { margin-top: 6px; font-size: 12.5px; line-height: 1.55; color: var(--v2-ink-soft); }

/* Privacy grid */
body.blog-v2.tool-page .tp-priv-grid {
  display: grid; gap: 14px; margin-top: 24px; grid-template-columns: 1fr;
}
@media (min-width: 768px) { body.blog-v2.tool-page .tp-priv-grid { grid-template-columns: repeat(3, 1fr); } }

/* Honesty note — deliberately styled as a plain aside, not a warning. */
body.blog-v2.tool-page .tp-honest {
  margin-top: 18px; padding: 14px 16px;
  border-left: 3px solid var(--v2-hairline);
  font-size: 12.5px; line-height: 1.65; color: var(--v2-ink-soft);
}
body.blog-v2.tool-page .tp-honest strong { color: var(--v2-ink); font-weight: 600; }

/* Spec table */
body.blog-v2.tool-page .tp-specs { margin-top: 24px; overflow-x: auto; }
body.blog-v2.tool-page .tp-specs table {
  width: 100%; border-collapse: collapse; font-size: 13.5px;
  border: 1px solid var(--v2-hairline); border-radius: var(--v2-r-xl); overflow: hidden;
}
body.blog-v2.tool-page .tp-specs th,
body.blog-v2.tool-page .tp-specs td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--v2-hairline); }
body.blog-v2.tool-page .tp-specs tr:last-child th,
body.blog-v2.tool-page .tp-specs tr:last-child td { border-bottom: none; }
body.blog-v2.tool-page .tp-specs th {
  width: 38%; background: color-mix(in srgb, var(--v2-secondary) 60%, transparent);
  font-weight: 500; color: var(--v2-ink-soft);
}
body.blog-v2.tool-page .tp-specs td { color: var(--v2-ink); }

/* FAQ */
body.blog-v2.tool-page .tp-faq { margin-top: 24px; max-width: 52rem; }
body.blog-v2.tool-page .tp-faq-item {
  border: 1px solid var(--v2-hairline); border-radius: var(--v2-r-xl);
  background: var(--v2-card); margin-bottom: 10px;
}
body.blog-v2.tool-page .tp-faq-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; cursor: pointer; list-style: none;
  font-family: var(--v2-display); font-size: 14px; font-weight: 600; color: var(--v2-ink);
}
body.blog-v2.tool-page .tp-faq-item > summary::-webkit-details-marker { display: none; }
body.blog-v2.tool-page .tp-faq-item > summary svg {
  width: 15px; height: 15px; flex-shrink: 0; color: var(--v2-ink-soft); transition: transform .2s ease;
}
body.blog-v2.tool-page .tp-faq-item[open] > summary svg { transform: rotate(180deg); }
body.blog-v2.tool-page .tp-faq-a { padding: 0 16px 15px; font-size: 13.5px; line-height: 1.65; color: var(--v2-ink-soft); }
body.blog-v2.tool-page .tp-faq-a a { color: var(--v2-brand); text-decoration: underline; }

/* Share / bookmark / feedback row */
body.blog-v2.tool-page .tp-actions {
  display: grid; gap: 14px; margin-top: 4px; grid-template-columns: 1fr;
}
@media (min-width: 900px) { body.blog-v2.tool-page .tp-actions { grid-template-columns: 1fr 1fr; } }
body.blog-v2.tool-page .tp-action {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px; border: 1px solid var(--v2-hairline);
  border-radius: var(--v2-r-2xl); background: var(--v2-card);
}
body.blog-v2.tool-page .tp-action h3 {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--v2-display); font-size: 15px; font-weight: 600; color: var(--v2-ink);
}
body.blog-v2.tool-page .tp-action h3 svg { width: 16px; height: 16px; color: var(--v2-brand); }
body.blog-v2.tool-page .tp-action p { font-size: 13px; line-height: 1.6; color: var(--v2-ink-soft); }
body.blog-v2.tool-page .tp-action-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
body.blog-v2.tool-page .tp-kbd {
  display: inline-block; padding: 1px 6px; border: 1px solid var(--v2-hairline);
  border-radius: var(--v2-r-sm); background: var(--v2-secondary);
  font-family: var(--v2-mono); font-size: 11px; color: var(--v2-ink);
}

/* ================================================================
   PRINT — nobody prints a tool page; if they do, drop the chrome.
================================================================ */
@media print {
  body.blog-v2.tools-page .v2-site-nav, body.blog-v2.tool-page .v2-site-nav,
  body.blog-v2.tools-page .v2-footer,   body.blog-v2.tool-page .v2-footer,
  body.blog-v2.tools-page .tl-filterbar { display: none; }
}

/* ================================================================
   REDUCED MOTION
================================================================ */
@media (prefers-reduced-motion: reduce) {
  body.blog-v2.tools-page *, body.blog-v2.tool-page * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  body.blog-v2.tools-page a.tl-card:hover,
  body.blog-v2.tool-page a.tl-card:hover,
  body.blog-v2.tool-page .tp-btn-primary:hover:not(:disabled) { transform: none; }
}