/* ══ TOOLS ═══════════════════════════════════════════════════════════════
   /free-tools and the 116 tool pages (slot "tools" in MASTER_ORDER, after
   "content"). Shared shell owned by phase 0: breadcrumb, the app card, form
   controls, the results panel and its primitives (badges, kv rows, tables,
   bars, lists, code), the index grids and category rows. Everything is
   built on the .zr-pp tokens (--pp-ink/--pp-body/--pp-dim/--pp-hair) and
   the existing .zr-tool/.zr-cat/.zr-chip/.zr-btn components. Per-kind
   additions go at the END of this file under their own banner (§ kinds). */

/* ── breadcrumb + category badge (tool page hero) ─────────────────────── */
.zr-tool-crumbs{ font-size:13px; line-height:18px; color:var(--pp-dim); }
.zr-tool-crumbs ol{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 6px; margin:0; padding:0; list-style:none; }
.zr-tool-crumbs li{ display:inline-flex; align-items:center; gap:6px; min-width:0; }
.zr-tool-crumbs li + li::before{ content:"/"; color:#C3CAD5; }
.zr-tool-crumbs a{ color:var(--pp-dim); text-decoration:none; }
.zr-tool-crumbs a:hover{ color:var(--zr-blue); }
.zr-tool-crumbs [aria-current]{ color:var(--pp-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60vw; }
.zr-pp__eyebrow.zr-tool-cat{ color:var(--zr-blue); border-color:#CFE0FF; text-decoration:none; }
.zr-pp__eyebrow.zr-tool-cat:hover{ background:#fff; border-color:var(--zr-blue); }
.zr-pp--tools .zr-tool-hero .zr-pp__copy{ gap:16px; }
.zr-pp--tools .zr-tool-hero .zr-pp__h1{ font-size:clamp(32px,4vw,50px); }
.zr-pp--tools .zr-tool-hero .zr-pp__lede{ max-width:620px; }

/* ── the app card ─────────────────────────────────────────────────────── */
/* the panel, the loading block, the Turnstile slot and the error lines toggle with the `hidden` attribute;
   their display:flex rules below would otherwise beat the UA's [hidden]{display:none} */
.zr-tool-app [hidden], .zr-tool-out[hidden]{ display:none !important; }
.zr-tool-well{ width:min(920px,100%); margin:0 auto; }
.zr-tool-well--wide{ width:min(1100px,100%); }
.zr-tool-app{
  display:flex; flex-direction:column; gap:20px;
  padding:clamp(18px,2.4vw,28px);
  background:#fff; border:1px solid #EDF1F7; border-radius:20px;
  box-shadow:0 6px 16px -6px rgba(31,36,41,.05), 0 24px 48px -32px rgba(16,49,110,.18);
}
/* ── form controls ────────────────────────────────────────────────────── */
.zr-tool-form{ display:flex; flex-direction:column; gap:14px; }
.zr-tool-form:empty{ display:none; }
.zr-tool-f{ display:flex; flex-direction:column; gap:7px; min-width:0; width:100%; }
.zr-tool-f__label{ font-size:13.5px; font-weight:500; line-height:20px; color:var(--pp-ink); }
.zr-tool-f__hint{ font-size:12.5px; line-height:18px; color:var(--pp-dim); }
.zr-tool-app input:not([type="checkbox"]):not([type="radio"]),
.zr-tool-app select,
.zr-tool-app textarea{
  width:100%; height:46px; padding:0 14px;
  background:#fff; border:1px solid var(--pp-hair); border-radius:10px;
  font:inherit; font-size:15px; color:var(--pp-ink);
  transition:border-color .16s var(--zr-ease-out-quad), box-shadow .16s var(--zr-ease-out-quad);
}
.zr-tool-app select{ padding-right:36px; appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8494' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px; }
.zr-tool-app textarea{ height:auto; min-height:132px; padding:12px 14px; line-height:23px; resize:vertical; }
.zr-tool-app textarea.zr-tool-code{
  min-height:220px; padding:12px 14px;
  font:400 12.5px/19px var(--pp-mono); tab-size:2; white-space:pre; overflow:auto;
  background:#FBFCFE;
}
.zr-tool-app input::placeholder, .zr-tool-app textarea::placeholder{ color:#A9AEB5; }
.zr-tool-app :is(input,select,textarea):focus{ outline:none; border-color:#9FC0FF; box-shadow:0 0 0 3px rgba(20,99,245,.12); }
.zr-tool-app :is(input,select,textarea)[aria-invalid="true"]{ border-color:#E9A3A0; box-shadow:0 0 0 3px rgba(252,65,61,.10); }
.zr-tool-app :is(input,select,textarea):disabled{ background:#F6F7F9; color:var(--pp-dim); }
/* one input + the button on a row (url/dns) */
.zr-tool-row{ display:flex; gap:10px; align-items:flex-end; }
.zr-tool-row .zr-tool-f{ flex:1 1 auto; }
.zr-tool-row .zr-btn{ flex:0 0 auto; height:46px; }
/* the AI options grid */
.zr-tool-opts{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 14px; }
.zr-tool-form__actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.zr-tool-form__actions .zr-btn{ height:46px; }
.zr-tool-form__err{ margin:0; font-size:13.5px; line-height:20px; color:#C0342F; }
.zr-tool-form.is-busy .zr-btn{ opacity:.7; cursor:progress; }
.zr-tool-ts{ display:flex; justify-content:flex-start; }
/* checkboxes/radios inside generator forms */
.zr-tool-check{ display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--pp-body); cursor:pointer; }
.zr-tool-check input{ width:16px; height:16px; margin:0; accent-color:var(--zr-blue); }
.zr-tool-fieldset{ margin:0; padding:0; border:0; display:flex; flex-direction:column; gap:10px; min-width:0; }
.zr-tool-fieldset > legend{ padding:0; margin-bottom:6px; font-size:13.5px; font-weight:500; color:var(--pp-ink); }
/* small buttons for copy/download and secondary actions */
.zr-btn--sm{ height:36px; padding-inline:14px; font-size:14px; line-height:18px; border-radius:8px; }
.zr-btn--sm.is-done{ --btn-face:#E4F7EC; --btn-face-hi:#D6F1E1; --btn-ink:#0F7A45; }
.zr-btn--danger{ --btn-face:#FDECEC; --btn-face-hi:#FBDADA; --btn-ink:#B42318; --btn-sheen:transparent; --btn-sheen-hi:transparent; }

/* ── the results panel ────────────────────────────────────────────────── */
.zr-tool-out{
  display:flex; flex-direction:column; gap:16px;
  padding:18px 20px 20px; border-radius:16px;
  background:#FBFCFE; border:1px solid #EDF1F7;
}
.zr-tool-out__bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.zr-tool-out__title{ margin:0; font-size:15.5px; font-weight:500; line-height:22px; color:var(--pp-ink); }
.zr-tool-out__actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.zr-tool-out__actions:empty{ display:none; }
.zr-tool-out__body{ display:flex; flex-direction:column; gap:14px; min-width:0; font-size:14.5px; line-height:22px; color:var(--pp-body); }
.zr-tool-out__body:empty{ display:none; }
.zr-tool-out__body > h3, .zr-tool-out__body .zr-tool-h3{ margin:6px 0 -6px; font-size:14px; font-weight:500; line-height:20px; color:var(--pp-ink); }
.zr-tool-out__body p{ margin:0; }
.zr-tool-out__err{ margin:0; padding:12px 14px; border-radius:10px; background:#FDECEC; border:1px solid #F4D3D0; font-size:14px; line-height:21px; color:#B42318; }
/* the loading block: four pulsing bars */
.zr-tool-out__loading{ display:flex; flex-direction:column; gap:12px; padding:4px 0; }
.zr-tool-out__loading i{ display:block; height:12px; border-radius:6px; background:#E8ECF2; animation:zr-tool-pulse 1.4s ease-in-out infinite; }
.zr-tool-out__loading i:nth-child(1){ width:72%; }
.zr-tool-out__loading i:nth-child(2){ width:100%; animation-delay:.12s; }
.zr-tool-out__loading i:nth-child(3){ width:84%; animation-delay:.24s; }
.zr-tool-out__loading i:nth-child(4){ width:60%; animation-delay:.36s; }
@keyframes zr-tool-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
@media (prefers-reduced-motion:reduce){ .zr-tool-out__loading i{ animation:none; opacity:.7; } }

/* ── result primitives (built by tools.js) ────────────────────────────── */
.zr-tool-note{ margin:0; padding:12px 14px; border-radius:10px; background:#F1F3F6; font-size:14px; line-height:21px; color:var(--pp-body); }
.zr-tool-note--info{ background:#E8F0FE; color:#1D4ED8; }
.zr-tool-note--good{ background:#E4F7EC; color:#0F7A45; }
.zr-tool-note--warn{ background:#FFF3E0; color:#9A5B00; }
.zr-tool-note--bad{ background:#FDECEC; color:#B42318; }
/* key/value rows */
.zr-tool-kv{ margin:0; display:flex; flex-direction:column; border:1px solid #EDF1F7; border-radius:12px; background:#fff; overflow:hidden; }
.zr-tool-kv__row{ display:grid; grid-template-columns:minmax(120px,220px) minmax(0,1fr); gap:6px 16px; padding:10px 14px; border-bottom:1px solid #EDF1F7; }
.zr-tool-kv__row:last-child{ border-bottom:0; }
.zr-tool-kv dt{ margin:0; font-size:13px; font-weight:500; line-height:20px; color:var(--pp-dim); }
.zr-tool-kv dd{ margin:0; min-width:0; font-size:14.5px; line-height:20px; color:var(--pp-ink); overflow-wrap:anywhere; }
.zr-tool-kv dd .zr-chip{ vertical-align:middle; }
/* tables: hairlines, sideways scroll on narrow screens */
.zr-tool-table{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid #EDF1F7; border-radius:12px; background:#fff; }
.zr-tool-table table{ width:100%; min-width:480px; border-collapse:collapse; font-size:14px; line-height:20px; }
.zr-tool-table th, .zr-tool-table td{ padding:9px 12px; text-align:left; vertical-align:top; border-bottom:1px solid #EDF1F7; }
.zr-tool-table th{ font-weight:500; font-size:12.5px; color:var(--pp-dim); background:#FBFCFE; white-space:nowrap; }
.zr-tool-table tr:last-child td{ border-bottom:0; }
.zr-tool-table td{ color:var(--pp-ink); overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.zr-tool-table td .zr-chip{ vertical-align:middle; }
/* lists */
.zr-tool-list{ margin:0; padding-left:22px; display:flex; flex-direction:column; gap:6px; font-size:14.5px; line-height:21px; color:var(--pp-body); }
.zr-tool-list li{ padding-left:2px; overflow-wrap:anywhere; }
.zr-tool-list li::marker{ color:var(--pp-dim); }
.zr-tool-list--good li::marker{ color:#0F7A45; }
.zr-tool-list--warn li::marker{ color:#9A5B00; }
.zr-tool-list--bad li::marker{ color:#B42318; }
/* bars */
.zr-tool-bar{ display:grid; grid-template-columns:minmax(80px,180px) minmax(0,1fr) 44px; align-items:center; gap:10px; font-size:13.5px; line-height:18px; }
.zr-tool-bar__label{ color:var(--pp-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zr-tool-bar__track{ display:block; height:8px; border-radius:4px; background:#E8ECF2; overflow:hidden; }
.zr-tool-bar__track i{ display:block; height:100%; border-radius:4px; background:var(--zr-blue); transition:width .4s var(--zr-ease); }
.zr-tool-bar__pct{ text-align:right; font-family:var(--pp-mono); font-size:12px; color:var(--pp-dim); }
/* code output */
.zr-tool-pre{
  margin:0; padding:12px 14px; max-height:420px; overflow:auto;
  border:1px solid #EDF1F7; border-radius:12px; background:#fff;
  font:400 12.5px/19px var(--pp-mono); color:var(--pp-ink); tab-size:2;
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.zr-tool-pre code{ font:inherit; }
/* streamed prose (AI writers) */
.zr-tool-prose{ font-size:15px; line-height:25px; color:var(--pp-body); white-space:pre-wrap; overflow-wrap:anywhere; }
.zr-tool-prose h2, .zr-tool-prose h3{ margin:16px 0 4px; font-size:16px; font-weight:500; line-height:22px; color:var(--pp-ink); }
.zr-tool-prose p{ margin:0 0 10px; }
.zr-tool-prose ul, .zr-tool-prose ol{ margin:0 0 10px; padding-left:22px; }
/* a two-column stat strip */
.zr-tool-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:10px; }
.zr-tool-stat{ padding:12px 14px; border:1px solid #EDF1F7; border-radius:12px; background:#fff; }
.zr-tool-stat b{ display:block; font-size:22px; font-weight:500; line-height:28px; color:var(--pp-ink); font-variant-numeric:tabular-nums; }
.zr-tool-stat span{ display:block; margin-top:2px; font-size:12.5px; line-height:18px; color:var(--pp-dim); }

/* ── "About this tool" ───────────────────────────────────────────────── */
.zr-tool-h{ margin:0 0 14px; font-size:clamp(20px,2vw,24px); font-weight:500; line-height:1.25; letter-spacing:-.02em; color:var(--pp-ink); }
.zr-tool-about{ font-size:16px; line-height:27px; color:var(--pp-body); }
.zr-tool-about p{ margin:0; text-wrap:pretty; }
.zr-tool-about p + p{ margin-top:14px; }
.zr-tool-about a{ color:var(--zr-blue); }

/* ── index: category rows and the 3-column card grids ────────────────── */
.zr-tool-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:14px; }
.zr-tool-grid .zr-tool{ padding:20px 20px 18px; gap:8px; }
.zr-tool-grid .zr-tool b{ font-size:16px; }
.zr-tool-grid .zr-tool p{ font-size:13.5px; line-height:21px; }
.zr-tool-groups{ display:flex; flex-direction:column; gap:clamp(36px,4vw,56px); }
.zr-tool-group__h{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:0 0 6px; scroll-margin-top:110px;
  font-size:clamp(22px,2.4vw,28px); font-weight:500; line-height:1.25; letter-spacing:-.024em; color:var(--pp-ink);
}
.zr-tool-group__n{ font-family:var(--pp-mono); font-size:12.5px; font-weight:400; letter-spacing:.01em; color:var(--zr-blue); }
.zr-tool-group__blurb{ margin:0 0 18px; font-size:15px; line-height:23px; color:var(--pp-dim); text-wrap:pretty; }
.zr-tool-group__blurb a{ color:var(--zr-blue); text-decoration:none; }
.zr-tool-group__blurb a:hover{ text-decoration:underline; }
.zr-tool-group__top{ display:inline-flex; align-items:center; gap:4px; margin-left:auto; font-size:13px; font-weight:400; color:var(--pp-dim); text-decoration:none; }
.zr-tool-group__top:hover{ color:var(--zr-blue); }
.zr-tool-group__top svg{ width:14px; height:14px; }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width:900px){
  .zr-tool-app{ border-radius:16px; }
}
@media (max-width:620px){
  .zr-tool-row{ flex-direction:column; align-items:stretch; }
  .zr-tool-row .zr-btn{ width:100%; }
  .zr-tool-opts{ grid-template-columns:minmax(0,1fr); }
  .zr-tool-form__actions .zr-btn{ width:100%; }
  .zr-tool-out{ padding:14px 14px 16px; border-radius:14px; }
  .zr-tool-kv__row{ grid-template-columns:minmax(0,1fr); gap:2px; }
  .zr-tool-bar{ grid-template-columns:minmax(0,1fr) 44px; }
  .zr-tool-bar__label{ grid-column:1 / -1; }
  .zr-tool-grid{ grid-template-columns:minmax(0,1fr); }
  .zr-tool-group__h{ scroll-margin-top:90px; }
  .zr-tool-crumbs [aria-current]{ max-width:70vw; }
}

/* ══ kinds ═══════════════════════════════════════════════════════════════
   Per-kind styles are appended BELOW this line, each under its own banner
   ("── client ──", "── minify ──", "── url ──", "── dns ──", "── ai ──"),
   in that order, so the five follow-ups never edit the same lines. */

/* ── client ── */
/* the generator forms tools-client.js builds: a two-column field grid, the checkbox group, the keyword tables */
.zr-tool-client-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 16px; align-items:start; }
.zr-tool-client-grid > .zr-tool-client-grid__full{ grid-column:1 / -1; }
/* a lone checkbox sits on the input line of its neighbour (label 20px + gap 7px above a 46px control) */
.zr-tool-client-grid > .zr-tool-check{ align-self:end; min-height:46px; }
.zr-tool-client-checks{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:10px 16px; padding:14px 16px; border:1px solid #EDF1F7; border-radius:12px; background:#FBFCFE; }
/* generated files are line-oriented (a wrapped RewriteRule reads as two directives): no wrapping, the box scrolls sideways */
.zr-tool-client-out .zr-tool-pre{ white-space:pre; overflow-wrap:normal; }
.zr-tool-client-count{ font-weight:400; color:var(--pp-dim); font-variant-numeric:tabular-nums; }
/* the three keyword totals always sit on one row */
.zr-tool-client-stats{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.zr-tool-client-kw .zr-tool-table th:nth-child(2), .zr-tool-client-kw .zr-tool-table td:nth-child(2){ width:84px; text-align:right; }
.zr-tool-client-kw .zr-tool-table th:nth-child(3), .zr-tool-client-kw .zr-tool-table td:nth-child(3){ width:44%; }
.zr-tool-client-kw .zr-tool-bar{ grid-template-columns:minmax(0,1fr) 56px; min-height:20px; }
.zr-tool-client-kw .zr-tool-bar__label{ display:none; }
@media (max-width:620px){
  .zr-tool-client-grid{ grid-template-columns:minmax(0,1fr); }
  .zr-tool-client-grid > .zr-tool-check{ min-height:0; }
  .zr-tool-client-checks{ grid-template-columns:minmax(0,1fr); }
  /* three columns fit a phone: no sideways scroll, the density bar stays in view */
  .zr-tool-client-kw .zr-tool-table table{ min-width:0; table-layout:fixed; }
  .zr-tool-client-kw .zr-tool-table th, .zr-tool-client-kw .zr-tool-table td{ padding:9px 10px; }
  .zr-tool-client-kw .zr-tool-table th:nth-child(2), .zr-tool-client-kw .zr-tool-table td:nth-child(2){ width:62px; }
  .zr-tool-client-kw .zr-tool-table th:nth-child(3), .zr-tool-client-kw .zr-tool-table td:nth-child(3){ width:42%; }
  .zr-tool-client-kw .zr-tool-bar{ grid-template-columns:minmax(0,1fr) 46px; gap:8px; }
  .zr-tool-client-kw .zr-tool-bar__pct{ font-size:11.5px; }
  .zr-tool-client-stats{ gap:8px; }
  .zr-tool-client-stats .zr-tool-stat{ padding:10px 10px 11px; }
  .zr-tool-client-stats .zr-tool-stat b{ font-size:20px; line-height:26px; }
  .zr-tool-client-stats .zr-tool-stat span{ font-size:12px; line-height:16px; }
}

/* ── minify ── */
/* the minified output is one long line: wrap it anywhere and cap the height (the shared .zr-tool-pre scrolls) */
.zr-tool-minify-out .zr-tool-pre{ max-height:320px; word-break:break-all; }
/* ── ai ───────────────────────────────────────────────────────────────────
   The streamed answer (tools-ai.js renders light markdown into .zr-tool-prose.zr-tool-ai-prose with DOM
   builders): block rhythm, h4 headings (h3 is the panel title), lists, bold, inline code, fences, links,
   and a caret on the last block while streaming. */
.zr-tool-ai-prose{ white-space:normal; display:flex; flex-direction:column; gap:10px; }
.zr-tool-ai-prose h4{ margin:8px 0 0; font-size:16px; font-weight:500; line-height:22px; letter-spacing:-.01em; color:var(--pp-ink); }
.zr-tool-ai-prose h4:first-child{ margin-top:0; }
.zr-tool-ai-prose p{ margin:0; text-wrap:pretty; }
.zr-tool-ai-prose ul, .zr-tool-ai-prose ol{ margin:0; padding-left:22px; display:flex; flex-direction:column; gap:4px; }
.zr-tool-ai-prose li{ padding-left:2px; }
.zr-tool-ai-prose li::marker{ color:var(--pp-dim); }
.zr-tool-ai-prose strong{ font-weight:500; color:var(--pp-ink); }
.zr-tool-ai-prose code{ padding:1px 5px; border-radius:5px; background:#EEF1F5; font:400 .9em/1.4 var(--pp-mono); color:var(--pp-ink); overflow-wrap:anywhere; }
.zr-tool-ai-prose .zr-tool-pre{ margin:2px 0; }
.zr-tool-ai-prose .zr-tool-pre code{ padding:0; background:transparent; font:inherit; }
.zr-tool-ai-prose a{ color:var(--zr-blue); text-decoration:underline; text-underline-offset:2px; }
.zr-tool-ai-prose hr{ width:100%; margin:4px 0; border:0; border-top:1px solid #EDF1F7; }
.zr-tool-ai-prose.is-streaming > :last-child::after{
  content:""; display:inline-block; width:2px; height:.95em; margin-left:3px; vertical-align:-.12em;
  background:var(--pp-dim); border-radius:1px; animation:zr-tool-ai-caret 1s steps(2, start) infinite;
}
@keyframes zr-tool-ai-caret{ to{ visibility:hidden; } }
@media (prefers-reduced-motion:reduce){ .zr-tool-ai-prose.is-streaming > :last-child::after{ animation:none; } }
/* ── url ─────────────────────────────────────────────────────────────── */
/* the 46 URL analyzers (tools-url.js): the fetch meta line, the SERP preview, heading hierarchy, density bars,
   the AI SEO score tile + check rows, redirect chains, the social card, and small text helpers */
/* the status chip rides with the panel title; long URLs in the title wrap instead of pushing the panel wide */
.zr-tool-app[data-kind="url"] .zr-tool-out__title{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; min-width:0; overflow-wrap:anywhere; }
.zr-tool-url-status{ flex:0 0 auto; }
/* short 2-3 column tables fit a phone instead of inheriting the 480px scroll width */
.zr-tool-url-compact table{ min-width:0; }
.zr-tool-url-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0; font-size:13px; line-height:20px; color:var(--pp-dim); }
.zr-tool-url-muted{ color:var(--pp-dim); font-style:normal; }
.zr-tool-url-mono{ font:400 12.5px/19px var(--pp-mono); color:var(--pp-ink); overflow-wrap:anywhere; }
.zr-tool-url-link{ color:var(--zr-blue); text-decoration:none; overflow-wrap:anywhere; }
.zr-tool-url-link:hover{ text-decoration:underline; }
.zr-tool-url-more{ margin:-6px 0 0; font-size:12.5px; line-height:18px; color:var(--pp-dim); }
.zr-tool-url-lines{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.zr-tool-url-lines > div{ overflow-wrap:anywhere; }
.zr-tool-url-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.zr-tool-url-favicon{ display:flex; align-items:center; gap:10px; font-size:13px; }
.zr-tool-url-favicon img{ width:32px; height:32px; border-radius:6px; border:1px solid #EDF1F7; background:#fff; padding:2px; }
/* count tiles: coloured numbers */
.zr-tool-url-stat--good b{ color:#0F7A45; }
.zr-tool-url-stat--warn b{ color:#9A5B00; }
.zr-tool-url-stat--bad b{ color:#B42318; }
.zr-tool-url-stat--info b{ color:var(--zr-blue); }
/* the Google-like snippet */
.zr-tool-url-serp{
  max-width:600px; padding:16px 18px 18px; border:1px solid #EDF1F7; border-radius:12px; background:#fff;
  font-family:Arial, Helvetica, sans-serif; text-align:left;
}
.zr-tool-url-serp__site{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12px; line-height:18px; color:#4d5156; overflow-wrap:anywhere; }
.zr-tool-url-serp__fav{ flex:0 0 auto; width:18px; height:18px; border-radius:50%; background:#F1F3F4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA0A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") center/11px no-repeat; }
.zr-tool-url-serp__title{ font-size:20px; line-height:26px; color:#1a0dab; overflow-wrap:anywhere; }
.zr-tool-url-serp__desc{ margin-top:4px; font-size:14px; line-height:22px; color:#4d5156; overflow-wrap:anywhere; }
/* heading hierarchy */
.zr-tool-url-hier{ display:flex; flex-direction:column; gap:4px; padding:12px 14px; border:1px solid #EDF1F7; border-radius:12px; background:#fff; overflow-x:auto; }
.zr-tool-url-hier__row{ display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:20px; color:var(--pp-body); min-width:0; }
.zr-tool-url-hier__tag{ flex:0 0 28px; font:500 12px/20px var(--pp-mono); color:var(--zr-blue); }
.zr-tool-url-hier__row > span{ overflow-wrap:anywhere; }
/* keyword density cell */
.zr-tool-url-density{ display:inline-flex; align-items:center; gap:8px; min-width:120px; white-space:nowrap; }
.zr-tool-url-density__track{ display:block; flex:1 1 72px; height:6px; border-radius:3px; background:#E8ECF2; overflow:hidden; }
.zr-tool-url-density__track i{ display:block; height:100%; border-radius:3px; background:var(--zr-blue); }
.zr-tool-url-density b{ font:400 12px/16px var(--pp-mono); color:var(--pp-dim); white-space:nowrap; overflow-wrap:normal; }
/* the AI SEO score tile + check rows */
.zr-tool-url-score{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:22px 16px; border-radius:14px; background:#F1F3F6; text-align:center; }
.zr-tool-url-score--good{ background:#E4F7EC; }
.zr-tool-url-score--warn{ background:#FFF3E0; }
.zr-tool-url-score--bad{ background:#FDECEC; }
.zr-tool-url-score__n{ font-size:48px; font-weight:500; line-height:52px; letter-spacing:-.03em; color:var(--pp-ink); font-variant-numeric:tabular-nums; }
.zr-tool-url-score--good .zr-tool-url-score__n{ color:#0F7A45; }
.zr-tool-url-score--warn .zr-tool-url-score__n{ color:#9A5B00; }
.zr-tool-url-score--bad .zr-tool-url-score__n{ color:#B42318; }
.zr-tool-url-score__cap{ font-size:13px; line-height:18px; color:var(--pp-dim); }
.zr-tool-url-checks{ display:flex; flex-direction:column; border:1px solid #EDF1F7; border-radius:12px; background:#fff; overflow:hidden; }
.zr-tool-url-check{ display:flex; align-items:flex-start; gap:12px; padding:11px 14px; border-bottom:1px solid #EDF1F7; }
.zr-tool-url-check:last-child{ border-bottom:0; }
.zr-tool-url-check .zr-chip{ flex:0 0 auto; margin-top:1px; }
.zr-tool-url-check__body{ min-width:0; }
.zr-tool-url-check__name{ font-size:14.5px; font-weight:500; line-height:20px; color:var(--pp-ink); }
.zr-tool-url-check__detail{ margin-top:2px; font-size:13px; line-height:19px; color:var(--pp-dim); overflow-wrap:anywhere; }
/* redirect chains */
.zr-tool-url-chain{ display:flex; flex-direction:column; gap:6px; padding:12px 14px; border:1px solid #EDF1F7; border-radius:12px; background:#fff; }
.zr-tool-url-chain__row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; line-height:20px; min-width:0; }
.zr-tool-url-chain__arrow{ color:#C3CAD5; }
/* the social share card */
.zr-tool-url-card{ max-width:520px; border:1px solid #EDF1F7; border-radius:12px; background:#fff; overflow:hidden; }
.zr-tool-url-card__img{ display:block; width:100%; max-height:272px; object-fit:cover; background:#F1F3F6; }
.zr-tool-url-card__body{ padding:12px 14px 14px; }
.zr-tool-url-card__title{ font-size:15px; font-weight:500; line-height:21px; color:var(--pp-ink); overflow-wrap:anywhere; }
.zr-tool-url-card__desc{ margin-top:3px; font-size:13.5px; line-height:20px; color:var(--pp-dim); overflow-wrap:anywhere; }
@media (max-width:620px){
  .zr-tool-app[data-kind="url"] .zr-tool-out__actions{ width:100%; }
  .zr-tool-app[data-kind="url"] .zr-tool-out__actions .zr-btn{ flex:1 1 0; justify-content:center; }
  .zr-tool-url-density{ min-width:0; gap:6px; }
  .zr-tool-url-density__track{ flex:0 0 36px; }
  /* three tiles share one row; five put the total on top of a 2 × 2 */
  .zr-tool-url-stats--3{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
  .zr-tool-url-stats--3 .zr-tool-stat{ padding:10px; }
  .zr-tool-url-stats--3 .zr-tool-stat b{ font-size:20px; line-height:26px; }
  .zr-tool-url-stats--5{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .zr-tool-url-stats--5 > :first-child{ grid-column:1 / -1; }
  .zr-tool-url-compact th, .zr-tool-url-compact td{ padding-inline:10px; }
  .zr-tool-url-serp{ padding:14px; }
  .zr-tool-url-serp__title{ font-size:18px; line-height:24px; }
  .zr-tool-url-score__n{ font-size:40px; line-height:44px; }
  .zr-tool-url-check{ flex-direction:column; gap:6px; }
}
/* ── dns ───────────────────────────────────────────────────────────────── */
/* tools-dns.js: the status headline, inline mono values, stacked mono lists, chip rows */
.zr-tool-dns-head{ display:flex; align-items:flex-start; gap:10px; font-size:15px; line-height:22px; color:var(--pp-ink); }
.zr-tool-dns-head .zr-chip{ flex:0 0 auto; margin-top:1px; }
.zr-tool-dns-mono{ font:400 13px/20px var(--pp-mono); color:var(--pp-ink); overflow-wrap:anywhere; }
.zr-tool-dns-stack{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.zr-tool-dns-stack .zr-tool-pre{ max-height:160px; }
.zr-tool-dns-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.zr-tool-dns-chips .zr-chip{ max-width:100%; overflow-wrap:anywhere; white-space:normal; }
.zr-tool-dns-dim{ color:var(--pp-dim); }
/* dns tables: names, TTLs and badges never break mid-word ("exampl/e.com", "785/85"); only the last column
   (the long value) wraps, and the table scrolls sideways instead of squeezing its short columns */
.zr-tool-dns-table table{ min-width:560px; }
.zr-tool-dns-table th,
.zr-tool-dns-table td:not(:last-child){ white-space:nowrap; overflow-wrap:normal; }
.zr-tool-dns-table td:not(:last-child) .zr-tool-dns-mono{ overflow-wrap:normal; }
.zr-tool-dns-table td:last-child{ min-width:200px; }
/* short tables (MX, ping attempts, analytics): no long column, so they fit a phone without sideways scroll */
.zr-tool-dns-table--narrow table{ min-width:0; }
.zr-tool-dns-table--narrow td:last-child{ min-width:0; }