/* toolsfor.co — UNIVERSAL CHROME.
   Scope: every tool page. Loaded after reset.css, before the tool's own tool.css.

   This is the third CSS tier and the only styled layer every tool shares:

     reset.css      universal, unopinionated. No look-and-feel.
     chrome.css     universal chrome — THIS FILE. Header, breadcrumb, logo,
                    theme switch, page intro (<h1> + standfirst), disclaimer,
                    guide, FAQ, related-tools cards, footer, consent banner.
                    Nothing that belongs to a tool's own content — no inputs,
                    no results, no buttons the tool defines itself.
     tool.css       per-tool. The tool's own content area. Owns its layout,
                    component shapes and density.
     tokens/base/components.css   hub-only: homepage, cluster pages, 404.

   What this file must never contain: any rule targeting a tool's own content
   area. If a selector isn't chrome, it belongs in that tool's tool.css.

   ── Design direction ────────────────────────────────────────────────────────
   Swiss / editorial utilitarian. These are simple tools for people who want an
   answer, not a product tour. Clarity over decoration, every time.

   Deliberately NOT used, because it reads as generic AI-generated web design:
     · indigo/violet gradients and gradient text
     · large corner radii (rounded-xl / rounded-2xl card look)
     · Inter, and the Inter + heavy-weight-hero combination
     · emoji as headings or section markers
     · glassmorphism, backdrop blur
     · drop shadows for elevation

   Used instead: flat surfaces, hairline rules, a real serif/sans pairing,
   tabular figures, 2px radius, and one restrained accent per cluster carried
   by --tf-accent.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* Ground and ink. Warm off-white, never pure #fff — pure white glares and
     reads as unfinished default. */
  --tf-ground: #faf9f7;
  --tf-surface: #ffffff;
  --tf-ink: #12100e;
  --tf-ink-soft: #5c574f;
  --tf-ink-faint: #8a847a;
  --tf-rule: #ddd8d0;
  --tf-rule-strong: #c4bdb2;

  /* Universal compatibility aliases for tool content */
  --tf-text: var(--tf-ink);
  --tf-muted: var(--tf-ink-soft);
  --tf-border: var(--tf-rule);
  --tf-card-bg: var(--tf-surface);
  --tf-input-bg: var(--tf-surface);

  /* Fallback accent. Overridden per page by [data-cluster] below. */
  --tf-accent: #37474f;
  --tf-accent-ink: #ffffff;

  /* Derived tints and shades — SAME HUE as --tf-accent, different strength.
   * Every accent-adjacent colour on a page (hover, active, selected, subtle
   * fill, chip background) comes from one of these, never from a separately
   * chosen colour. A green cluster's button, its hover state, its selected-
   * row background and its active border are all the same green family —
   * lighter or darker, never a different hue. See design-system.md Part 0a.
   *
   * color-mix() reads --tf-accent live, so these stay correct automatically
   * whether the cluster or the light/dark theme changes — nothing here is
   * hardcoded per cluster.
   */
  --tf-accent-wash:  color-mix(in srgb, var(--tf-accent) 10%, transparent);
  --tf-accent-soft:  color-mix(in srgb, var(--tf-accent) 22%, transparent);
  --tf-accent-hover: color-mix(in srgb, var(--tf-accent) 88%, black);
  --tf-accent-active:color-mix(in srgb, var(--tf-accent) 78%, black);

  /* Type. A serif display face against a system sans gives the editorial
     feel without shipping a webfont. Charter and Iowan Old Style are present
     on most macOS/iOS installs; Georgia is the universal fallback. */
  --tf-font-display: Charter, "Iowan Old Style", "Bitstream Charter", Georgia, "Times New Roman", serif;
  --tf-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tf-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* 4px base scale. */
  --tf-1: 4px;
  --tf-2: 8px;
  --tf-3: 12px;
  --tf-4: 16px;
  --tf-5: 24px;
  --tf-6: 32px;
  --tf-7: 48px;

  --tf-radius: 2px;
  --tf-measure: 68rem;
}

[data-theme="dark"] {
  --tf-ground: #14130f;
  --tf-surface: #1c1a16;
  --tf-ink: #f2efe9;
  --tf-ink-soft: #a8a196;
  --tf-ink-faint: #7d766b;
  --tf-rule: #332f28;
  --tf-rule-strong: #4a453c;
  --tf-accent-ink: #14130f;
  --tf-text: var(--tf-ink);
  --tf-muted: var(--tf-ink-soft);
  --tf-border: var(--tf-rule);
  --tf-card-bg: var(--tf-surface);
  --tf-input-bg: var(--tf-surface);
}

/* ── Cluster accents ────────────────────────────────────────────────────────
   Set by data-cluster on <html>, written by build_public.py from the tool's
   registry entry. Muted and ink-like rather than saturated — these sit next to
   dense numeric output and must not compete with it.

   Light values are dark enough to carry white text (AA at normal weight).
   Dark values are lightened so they stay legible on the dark ground.

   islamic keeps the deep forest green already shipped with zakat-calculator.
   ─────────────────────────────────────────────────────────────────────────── */
[data-cluster="islamic"]       { --tf-accent: #1b4332; }
[data-cluster="money"]         { --tf-accent: #7c5312; }
[data-cluster="developer"]     { --tf-accent: #1f4e5f; }
[data-cluster="reference"]     { --tf-accent: #5c4033; }
[data-cluster="hobby"]         { --tf-accent: #9c4221; }
[data-cluster="health"]        { --tf-accent: #8c2f39; }
[data-cluster="education"]     { --tf-accent: #2c3e6b; }
[data-cluster="home-diy"]      { --tf-accent: #4a5d23; }
[data-cluster="files-media"]   { --tf-accent: #45356b; }
[data-cluster="random-fun"]    { --tf-accent: #a03e6f; }
[data-cluster="time-and-date"] { --tf-accent: #37474f; }
[data-cluster="text-tools"]    { --tf-accent: #55504a; }
[data-cluster="messaging"]     { --tf-accent: #1d6a5f; }
[data-cluster="links-qr"]      { --tf-accent: #5e3a87; }
[data-cluster="writing"]       { --tf-accent: #6b2d5c; }

[data-theme="dark"][data-cluster="islamic"]       { --tf-accent: #4c9a7a; }
[data-theme="dark"][data-cluster="money"]         { --tf-accent: #d19a3c; }
[data-theme="dark"][data-cluster="developer"]     { --tf-accent: #5fa8bf; }
[data-theme="dark"][data-cluster="reference"]     { --tf-accent: #b08968; }
[data-theme="dark"][data-cluster="hobby"]         { --tf-accent: #e08355; }
[data-theme="dark"][data-cluster="health"]        { --tf-accent: #d9737d; }
[data-theme="dark"][data-cluster="education"]     { --tf-accent: #7d92c9; }
[data-theme="dark"][data-cluster="home-diy"]      { --tf-accent: #9bb15e; }
[data-theme="dark"][data-cluster="files-media"]   { --tf-accent: #9683c9; }
[data-theme="dark"][data-cluster="random-fun"]    { --tf-accent: #e07aa8; }
[data-theme="dark"][data-cluster="time-and-date"] { --tf-accent: #90a4ae; }
[data-theme="dark"][data-cluster="text-tools"]    { --tf-accent: #b3aca3; }
[data-theme="dark"][data-cluster="messaging"]     { --tf-accent: #4fb3a3; }
[data-theme="dark"][data-cluster="links-qr"]      { --tf-accent: #a586d1; }
[data-theme="dark"][data-cluster="writing"]       { --tf-accent: #c079ad; }

/* ── Page ground ──────────────────────────────────────────────────────────── */

body {
  background: var(--tf-ground);
  color: var(--tf-ink);
  font-family: var(--tf-font-body);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* Numerals line up in columns wherever they appear. These are calculators. */
table, output, .tf-num, [data-tf-num] {
  font-variant-numeric: tabular-nums;
}

.tf-chrome-inner {
  width: 100%;
  max-width: var(--tf-measure);
  margin-inline: auto;
  padding-inline: var(--tf-5);
}

/* ── Header ───────────────────────────────────────────────────────────────
   One row. Logo + breadcrumb left, tool name + theme toggle right.
   A 2px accent rule underneath is the only place cluster colour appears at
   full strength — enough to identify the section, not enough to shout.
   ───────────────────────────────────────────────────────────────────────── */

.tf-chrome-header {
  background: var(--tf-surface);
  border-bottom: 2px solid var(--tf-accent);
}

/* Row 1: wordmark left, theme toggle right. */
.tf-chrome-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tf-4);
  min-height: 52px;
}

/* The wordmark is "tools" + bold "for" + ".co". The weight shift is the
   whole identity — no icon, no gradient, no accent fill. */
.tf-logo {
  font-family: var(--tf-font-display);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--tf-ink);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.tf-logo strong {
  font-weight: 700;
  color: var(--tf-accent);
}

.tf-logo:hover strong { color: var(--tf-ink); }

/* Row 2: breadcrumb, beneath the wordmark. Small, quiet, monospace —
   it is navigation, not content. */
.tf-crumbs {
  display: flex;
  align-items: center;
  gap: var(--tf-2);
  font-family: var(--tf-font-mono);
  font-size: 0.75rem;
  color: var(--tf-ink-faint);
  min-width: 0;
  overflow: hidden;
  padding-bottom: var(--tf-3);
  margin-top: calc(var(--tf-1) * -1);
}

.tf-crumbs a {
  color: var(--tf-ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

.tf-crumbs a:hover {
  color: var(--tf-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tf-crumbs-sep { color: var(--tf-rule-strong); }

.tf-crumbs [aria-current="page"] {
  color: var(--tf-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Page intro ────────────────────────────────────────────────────────────
   The tool's own H1 and one-line standfirst, centred directly beneath the
   header. This is the first thing a visitor reads and the page's only H1.
   The tool itself starts immediately below — no hero, no scrolling to reach
   the input.
   ─────────────────────────────────────────────────────────────────────────── */

.tf-intro {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--tf-6) var(--tf-5) var(--tf-5);
  text-align: center;
}

.tf-intro-badge {
  margin-bottom: var(--tf-3);
}

.tf-tag-decision {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fde68a;
  padding: 3px 8px;
  border-radius: 4px;
}

[data-theme="dark"] .tf-tag-decision {
  color: #fcd34d;
  background: rgba(180, 83, 9, 0.2);
  border-color: rgba(245, 158, 11, 0.4);
}

.tf-intro h1 {
  font-family: var(--tf-font-display);
  font-size: clamp(1.6rem, 4.2vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--tf-ink);
  margin: 0;
  text-wrap: balance;
}

.tf-standfirst {
  margin: var(--tf-3) auto 0;
  max-width: 54ch;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tf-ink-soft);
  text-wrap: pretty;
}

/* Theme SWITCH — not a button. role="switch" + aria-checked, a track and a
   sliding thumb: the universal light/dark control shape, immediately
   recognisable without reading a label. This is the one deliberate exception
   to the 2px-radius rule in this file — a square "toggle" does not read as a
   toggle. Do not reuse the pill shape anywhere else.

   Position is driven by [data-theme] on <html>, set synchronously by the
   inline boot script in <head> before first paint — not by aria-checked,
   which theme.js sets a beat later purely for assistive tech. Keying the
   visual off aria-checked instead would flash the wrong position on load. */
.tf-theme-switch {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  padding: 0;
  background: var(--tf-surface);
  border: 1px solid var(--tf-rule-strong);
  border-radius: 999px;
  cursor: pointer;
}

.tf-theme-switch:hover { border-color: var(--tf-accent); }

.tf-theme-switch:focus-visible {
  outline: 2px solid var(--tf-accent);
  outline-offset: 2px;
}

.tf-switch-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  color: var(--tf-ink-faint);
  pointer-events: none;
  transition: color .15s linear;
}

.tf-switch-icon svg { width: 100%; height: 100%; display: block; }

.tf-switch-icon-sun  { left: 5px; }
.tf-switch-icon-moon { right: 5px; }

[data-theme="light"] .tf-switch-icon-sun  { color: var(--tf-accent); }
[data-theme="dark"]  .tf-switch-icon-moon { color: var(--tf-accent); }

/* The thumb. Slides right in dark mode, carries the accent so the control
   reads as "this cluster's colour," same as everything else on the page. */
.tf-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--tf-accent);
  transition: transform .15s ease;
}

[data-theme="dark"] .tf-switch-thumb {
  transform: translateX(20px);
}

@media (prefers-reduced-motion: reduce) {
  .tf-switch-thumb { transition: none; }
}

@media (max-width: 34rem) {
  .tf-crumbs { font-size: 0.6875rem; }
  .tf-chrome-inner { padding-inline: var(--tf-4); }
  .tf-intro { padding: var(--tf-5) var(--tf-4) var(--tf-4); }
}

/* ── Guide + disclaimer ────────────────────────────────────────────────────
   Below the tool, never above it. The guide answers how / why / when in the
   tool's own terms. The disclaimer is mandatory for money and health tools.
   ─────────────────────────────────────────────────────────────────────────── */

.tf-guide {
  width: 100%;
  max-width: 46rem;
  margin: var(--tf-7) auto 0;
  padding-inline: var(--tf-5);
}

.tf-guide h2 {
  font-family: var(--tf-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tf-ink-faint);
  margin: 0 0 var(--tf-3);
  padding-bottom: var(--tf-2);
  border-bottom: 1px solid var(--tf-rule);
}

.tf-guide h3 {
  font-family: var(--tf-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--tf-ink);
  margin: var(--tf-5) 0 var(--tf-2);
}

.tf-guide h3:first-of-type { margin-top: var(--tf-4); }

.tf-guide p,
.tf-guide li {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--tf-ink-soft);
}

.tf-guide p { margin: 0 0 var(--tf-2); max-width: 66ch; }

.tf-guide ol,
.tf-guide ul {
  margin: 0 0 var(--tf-2);
  padding-left: 1.25rem;
  max-width: 66ch;
}

.tf-guide li { margin-bottom: var(--tf-1); }

.tf-guide li::marker { color: var(--tf-ink-faint); }

/* FAQ — its own section, sibling of .tf-guide, not nested inside it. An ad
   slot sits between the two in the page (see the template): "one under the
   service, one between the instructions and the FAQ." Layout matches
   .tf-guide/.tf-intro so the page still reads as one column. */
.tf-faq-section {
  width: 100%;
  max-width: 46rem;
  margin: var(--tf-7) auto 0;
  padding-inline: var(--tf-5);
}

.tf-faq-section h2 {
  font-family: var(--tf-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tf-ink-faint);
  margin: 0 0 var(--tf-3);
  padding-bottom: var(--tf-2);
  border-bottom: 1px solid var(--tf-rule);
}

/* Native <details> — no JS, keyboard-accessible for free, and the answers
   stay in the DOM so search engines read them while collapsed. */
.tf-faq {
  border-top: 1px solid var(--tf-rule);
  max-width: 66ch;
}

.tf-faq-item {
  border-bottom: 1px solid var(--tf-rule);
}

.tf-faq-item summary {
  padding: var(--tf-3) var(--tf-5) var(--tf-3) 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tf-ink);
  cursor: pointer;
  list-style: none;
  position: relative;
}

.tf-faq-item summary::-webkit-details-marker { display: none; }

.tf-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--tf-font-mono);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--tf-accent);
}

.tf-faq-item[open] summary::after { content: "\2212"; }

.tf-faq-item summary:hover { color: var(--tf-accent); }

.tf-faq-item summary:focus-visible {
  outline: 2px solid var(--tf-accent);
  outline-offset: 2px;
}

.tf-faq-item > p {
  margin: 0 0 var(--tf-4);
  padding-right: var(--tf-5);
}

/* Disclaimer. A left accent rule and a label — deliberately plain. It has to
   read as a genuine notice, not a decorative callout people skip. */
.tf-disclaimer {
  width: 100%;
  max-width: 46rem;
  margin: var(--tf-6) auto 0;
  padding: var(--tf-4) var(--tf-4) var(--tf-4) var(--tf-5);
  border: 1px solid var(--tf-rule);
  border-left: 3px solid var(--tf-accent);
  border-radius: var(--tf-radius);
  background: var(--tf-surface);
}

.tf-disclaimer-label {
  display: block;
  font-family: var(--tf-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tf-accent);
  margin-bottom: var(--tf-2);
}

.tf-disclaimer p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--tf-ink-soft);
  max-width: 66ch;
}

@media (max-width: 34rem) {
  .tf-guide,
  .tf-faq-section { padding-inline: var(--tf-4); }
  .tf-disclaimer { margin-inline: var(--tf-4); width: auto; }
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.tf-chrome-footer {
  margin-top: auto;
  border-top: 1px solid var(--tf-rule);
  background: var(--tf-surface);
  padding-block: var(--tf-5);
  font-size: 0.8125rem;
  color: var(--tf-ink-soft);
}

.tf-chrome-footer .tf-chrome-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tf-3);
  flex-wrap: wrap;
}

.tf-footer-brand {
  display: flex;
  align-items: baseline;
  gap: var(--tf-1);
  margin: 0;
  color: var(--tf-ink-soft);
}

/* Same wordmark as the header logo (tools<strong>for</strong>.co, bold "for"
   in the cluster accent) — only smaller. The footer must read as the same
   brand as the header, not a plain copyright line. */
.tf-logo--sm {
  font-size: 0.9375rem;
  color: var(--tf-ink-soft);
}

.tf-logo--sm:hover strong { color: var(--tf-ink); }

.tf-chrome-footer a:not(.tf-logo) {
  color: var(--tf-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--tf-rule-strong);
}

.tf-chrome-footer a:not(.tf-logo):hover {
  color: var(--tf-accent);
  border-bottom-color: var(--tf-accent);
}

.tf-footer-note {
  font-family: var(--tf-font-mono);
  font-size: 0.6875rem;
  color: var(--tf-ink-faint);
  letter-spacing: 0.03em;
}

.tf-footer-legal {
  font-size: 0.8125rem;
  color: var(--tf-ink-soft);
}

.tf-footer-legal a {
  color: var(--tf-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.tf-footer-legal a:hover {
  color: var(--tf-accent);
  border-bottom-color: var(--tf-accent);
}

/* ── Consent banner ───────────────────────────────────────────────────────
   Bottom-anchored bar, not a floating card — it is a notice, and it should
   look like one rather than competing with the tool for attention.
   consent.js reveals it by removing [hidden].
   ───────────────────────────────────────────────────────────────────────── */

.tf-consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  background: var(--tf-surface);
  border-top: 2px solid var(--tf-accent);
}

.tf-consent[hidden] { display: none; }

.tf-consent-inner {
  width: 100%;
  max-width: var(--tf-measure);
  margin-inline: auto;
  padding: var(--tf-4) var(--tf-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tf-4);
  flex-wrap: wrap;
}

.tf-consent-text {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--tf-ink-soft);
  max-width: 62ch;
}

.tf-consent-actions {
  display: flex;
  gap: var(--tf-2);
  flex-shrink: 0;
}

.tf-btn-consent-yes,
.tf-btn-consent-no {
  font-family: var(--tf-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: var(--tf-2) var(--tf-4);
  border-radius: var(--tf-radius);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}

.tf-btn-consent-yes {
  background: var(--tf-accent);
  color: var(--tf-accent-ink);
  border-color: var(--tf-accent);
}

/* Derived shade, not filter: brightness() — stays the same hue family as
   the button itself, consistent with the single-hue rule everywhere else. */
.tf-btn-consent-yes:hover {
  background: var(--tf-accent-hover);
  border-color: var(--tf-accent-hover);
}

.tf-btn-consent-no {
  background: transparent;
  color: var(--tf-ink-soft);
  border-color: var(--tf-rule-strong);
}

.tf-btn-consent-no:hover {
  color: var(--tf-ink);
  border-color: var(--tf-ink-soft);
}

/* ── Related tools ──────────────────────────────────────────────────────────
   Written by build_public.py's write_related(). A horizontal-scroll carousel,
   not a wrapping grid (2026-08-27) — a grid of 5 cards at 4-per-row wraps to
   4-then-1, which reads as a broken layout, and the wrap point moves with
   the viewport regardless. A carousel has no leftover row. carousel.js wires
   the arrows to the track's native scroll; touch swipe and trackpad scroll
   work with no JS at all.
   ─────────────────────────────────────────────────────────────────────────── */

.tf-related {
  width: 100%;
  max-width: var(--tf-measure);
  margin: var(--tf-7) auto 0;
  padding: var(--tf-5) var(--tf-5) 0;
  border-top: 1px solid var(--tf-rule);
}

.tf-related-head {
  margin-bottom: var(--tf-3);
}

.tf-related-head h2 {
  font-family: var(--tf-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tf-ink-faint);
  margin: 0;
}

.tf-related-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--tf-2);
}

/* Flanking navigation arrows */
.tf-related-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  flex-shrink: 0;
  color: var(--tf-ink-soft);
  background: var(--tf-surface);
  border: 1px solid var(--tf-rule-strong);
  border-radius: var(--tf-radius);
  cursor: pointer;
  z-index: 2;
  transition: color .12s, border-color .12s, background-color .12s;
}

.tf-related-arrow:hover:not(:disabled) {
  color: var(--tf-accent);
  border-color: var(--tf-accent);
  background: var(--tf-accent-wash);
}

.tf-related-arrow:focus-visible {
  outline: 2px solid var(--tf-accent);
  outline-offset: 2px;
}

.tf-related-arrow:disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

.tf-related-track {
  flex: 1;
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: 0;
  padding: 4px 2px 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.tf-related-track::-webkit-scrollbar { display: none; }

.tf-related-track:focus-visible {
  outline: 2px solid var(--tf-accent);
  outline-offset: 2px;
}

/* 4 cards visible on desktop, 2 on tablet, 1 on mobile */
.tf-related-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--tf-2);
  flex: 0 0 calc((100% - (3 * 0.75rem)) / 4);
  min-width: calc((100% - (3 * 0.75rem)) / 4);
  box-sizing: border-box;
  scroll-snap-align: start;
  padding: var(--tf-3);
  background: var(--tf-surface);
  border: 1px solid var(--tf-rule);
  border-radius: var(--tf-radius);
  text-decoration: none;
  transition: border-color .12s linear, background-color .12s linear;
}

@media (max-width: 56rem) {
  .tf-related-card {
    flex: 0 0 calc((100% - 0.75rem) / 2);
    min-width: calc((100% - 0.75rem) / 2);
  }
}

@media (max-width: 34rem) {
  .tf-related-card {
    flex: 0 0 100%;
    min-width: 100%;
  }
}

.tf-related-card:hover,
.tf-related-card:focus-visible {
  border-color: var(--tf-accent);
  background: var(--tf-accent-wash);
}

.tf-related-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tf-related-card-title {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tf-ink);
}

.tf-related-card:hover .tf-related-card-title,
.tf-related-card:focus-visible .tf-related-card-title {
  color: var(--tf-accent);
}

.tf-related-card-desc {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--tf-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The launch button */
.tf-related-card-launch {
  display: inline-flex;
  align-items: center;
  gap: var(--tf-1);
  margin-top: auto;
  padding: 5px var(--tf-2);
  align-self: flex-start;
  font-family: var(--tf-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tf-accent);
  background: var(--tf-accent-soft);
  border-radius: var(--tf-radius);
}

.tf-related-card-launch svg {
  width: 12px;
  height: 12px;
  transition: transform .12s ease;
}

.tf-related-card:hover .tf-related-card-launch svg,
.tf-related-card:focus-visible .tf-related-card-launch svg {
  transform: translateX(2px);
}

/* ── Shared accessibility + focus ─────────────────────────────────────────── */

.tf-chrome-header :focus-visible,
.tf-chrome-footer :focus-visible,
.tf-consent :focus-visible,
.tf-related :focus-visible,
.tf-faq-section :focus-visible {
  outline: 2px solid var(--tf-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .tf-theme-switch,
  .tf-theme-toggle { transition: none; }
}

/* ── Display Ads (Reserved dimensions for zero CLS) ──────────────────────── */

.tf-ad {
  width: 100%;
  max-width: 46rem;
  min-height: 280px;
  margin: 2rem auto;
  padding-inline: 1.5rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tf-ad ins.adsbygoogle {
  width: 100%;
  min-height: 280px;
}

@media print {
  .tf-consent, .tf-theme-switch, .tf-theme-toggle, .tf-related, .tf-ad { display: none !important; }
  .tf-chrome-header { border-bottom: 1px solid #000; }
}