/* ═══════════════════════════════════════════════════════════════════════
   Freeware tools — shared premium layer
   Linked AFTER each tool's inline <style>, so it refines the shared token
   template (--paper / --card / --ink / --accent / --shadow / --radius …)
   that every tool already defines, in both light and dark.
   Accent-aware and additive only: it never touches a tool's bespoke layout,
   and every token reference has a fallback so a tool missing one variable
   still renders correctly. All motion degrades gracefully.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Selection + caret pick up each tool's own accent ─────────────────── */
::selection {
  background: color-mix(in oklch, var(--accent) 24%, var(--card, #fff));
  color: var(--ink, #111);
}
:root { caret-color: var(--accent); }

/* ── Token-aware scrollbar ────────────────────────────────────────────── */
* { scrollbar-color: var(--line-2, var(--line)) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-2, var(--line));
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-3, var(--ink-2, var(--ink))); }

/* ── Premium keyboard focus everywhere (tools only styled input:focus) ── */
:where(a, button, [role="tab"], [role="button"], summary, [tabindex]):focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}
/* keep the existing accent glow on form fields, just make it a touch softer */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft, color-mix(in oklch, var(--accent) 12%, transparent));
}

/* ── Consistent, tactile interaction feel across every control ────────── */
button, [role="tab"], [role="button"], a, .tab, .lang-seg button {
  transition: background .2s ease, color .2s ease, border-color .2s ease,
              box-shadow .25s ease, transform .15s var(--ease, ease);
}
button:active:not(:disabled),
[role="button"]:active,
.tab:active { transform: translateY(1px); }

/* ── Editorial polish + the family signature: an accent rule that opens
      each SEO heading — one quiet, consistent gesture across all 18 tools ─ */
.seo-article { -webkit-text-size-adjust: 100%; }
.seo-article h2, .seo-article h3 { text-wrap: balance; }
.seo-article h2 { padding-top: 4px; }
.seo-article h2::before {
  content: "";
  display: block;
  width: 36px; height: 3px;
  margin: 0 0 14px;
  border-radius: 99px;
  background: linear-gradient(90deg,
    var(--accent),
    color-mix(in oklch, var(--accent) 20%, transparent));
}
.seo-article p { text-wrap: pretty; }
.seo-article a {
  color: var(--accent-2, var(--accent));
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.seo-article a:hover { opacity: .72; }
.seo-article table { border-radius: 10px; overflow: hidden; }
.seo-article tbody tr { transition: background .15s ease; }
.seo-article tbody tr:hover {
  background: var(--accent-soft, color-mix(in oklch, var(--accent) 9%, transparent));
}

/* ── Tasteful scroll-reveal with no JS. Gated behind @supports so content
      is ALWAYS visible by default and is never hidden where scroll-driven
      animations aren't supported (Firefox/older Safari) or motion is off. ─ */
@keyframes fw-reveal {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .seo-article > *, #acacia-promo {
      animation: fw-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 20%;
    }
  }
}