/* ==========================================================================
   HTMLToolz v2 — free tools
   Loaded only on /tools pages, after v2.css. Two scopes, nothing global:
   · .tools-page  page chrome for the hub and tool pages
   · .tool-app    compatibility layer that re-skins the legacy UIs rendered
                  by assets/js/tools.js (class names, inline var(--…) styles)
   Colours come from v2 tokens only; dark mode follows v2's theme switch.
   ========================================================================== */

/* ── Page chrome ─────────────────────────────────────────────────────── */
.tools-page [hidden] { display: none !important; }
.tools-page .tools-section { padding: clamp(28px, 4.5vw, 52px) 0; }
.tools-page .tools-section + .tools-section { padding-top: 0; }
.tools-page .tools-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.tools-page .tools-section-head h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0; }
.tools-page .tools-section-head .eyebrow { margin-bottom: 10px; }
.tools-page .tools-section-head .link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.92rem; }

/* Hub hero + search */
.tools-page .tools-hub-hero { padding-bottom: clamp(28px, 4.5vw, 48px); }
.tools-page .tools-hub-hero h1 { max-width: 19ch; }
.tools-page .tools-search { position: relative; max-width: 540px; margin-top: 26px; }
.tools-page .tools-search > .ico { position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.tools-page .tools-search input { min-height: 52px; padding: 12px 16px 12px 44px; border-radius: 14px; font-size: 1rem; box-shadow: var(--shadow-s); -webkit-appearance: none; appearance: none; }
.tools-page .tools-search kbd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.tools-page .tools-search input:not(:placeholder-shown) ~ kbd { display: none; }
@media (hover: none) { .tools-page .tools-search kbd { display: none; } }

/* Featured cards (v2 .tool-card) */
.tools-page .tool-card { height: 100%; }
.tools-page .tool-card .badge { display: inline-flex; margin: 0 0 0 6px; font-size: 0.7rem; color: var(--brand-ink); vertical-align: 2px; }
@media (max-width: 560px) {
  .tools-page .tool-card-list { gap: 8px; }
  .tools-page .tool-card { padding: 12px 14px; border-radius: var(--r); }
}

/* Category chips */
.tools-page .tools-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.tools-page .tools-cats a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font-size: 0.86rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.tools-page .tools-cats a:hover { border-color: var(--ink); color: var(--ink); }
.tools-page .tools-cats a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tools-page .tools-cats span { font: 500 0.74rem/1 var(--mono); color: var(--faint); }
.tools-page .tools-cats a[aria-current="page"] span { color: inherit; opacity: 0.7; }

/* Compact catalogue */
.tools-page .tools-groups { display: grid; gap: clamp(26px, 3.5vw, 40px); }
.tools-page .tools-group h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 1.02rem; }
.tools-page .tools-group h3 .faint { font: 500 0.78rem/1 var(--mono); }
.tools-page .tools-compact { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 0 24px; }
.tools-page .tools-compact a { display: block; margin: 0 -10px; padding: 8px 10px; border-radius: var(--r-s); text-decoration: none; }
.tools-page .tools-compact a:hover { background: var(--paper-2); }
.tools-page .tools-compact b { display: block; font-size: 0.93rem; font-weight: 600; letter-spacing: -0.005em; }
.tools-page .tools-compact span { display: block; margin-top: 1px; font-size: 0.8rem; line-height: 1.4; color: var(--muted); }
.tools-page .tools-empty { margin: 8px 0 0; padding: 22px; border: 1.5px dashed var(--line-2); border-radius: var(--r-l); text-align: center; color: var(--muted); }

/* CTA band: "Made something with AI?" */
.tools-page .tools-band { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px 40px; padding: clamp(26px, 4vw, 46px); border-radius: var(--r-xl); background: var(--ink); color: var(--paper); }
.tools-page .tools-band::before { content: ""; position: absolute; z-index: -1; right: -12%; bottom: -70%; width: 62%; height: 170%; background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 34%, transparent), transparent); pointer-events: none; }
.tools-page .tools-band h2 { max-width: 22ch; margin: 0 0 10px; font-size: clamp(1.5rem, 2.8vw, 2.2rem); }
.tools-page .tools-band h2 .serif { color: color-mix(in srgb, var(--brand) 85%, var(--paper)); }
.tools-page .tools-band p { max-width: 48ch; margin: 0; color: color-mix(in srgb, var(--paper) 72%, transparent); }
.tools-page .tools-band .row { justify-content: flex-end; }
.tools-page .tools-band .btn-line { --bg: transparent; --fg: var(--paper); --bd: color-mix(in srgb, var(--paper) 35%, transparent); }
.tools-page .tools-band .btn-line:hover { --bd: var(--paper); }
@media (max-width: 820px) {
  .tools-page .tools-band { grid-template-columns: minmax(0, 1fr); }
  .tools-page .tools-band .row { justify-content: flex-start; }
}

/* Tool page */
.tools-page .tools-tool-hero { padding-bottom: 22px; }
.tools-page .tools-tool-hero h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px; }
.tools-page .tools-tool-hero h1 .badge { font-size: 0.8rem; letter-spacing: 0.02em; }
.tools-page .tools-tool-hero .lede { max-width: 54rem; margin: 0; font-size: clamp(1rem, 1.4vw, 1.1rem); }
.tools-page .tools-tool-hero .proof { margin-top: 16px; }
.tools-page .tools-stage { padding-bottom: 8px; }
.tools-page .tools-hint { margin: 12px 2px 0; font-size: 0.82rem; color: var(--muted); }
.tools-page .tools-hint kbd { font-size: 0.74rem; }
.tools-page .tools-faq { max-width: 52rem; }
.tools-page .tools-faq h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 14px; }

/* Contextual "turn this into a link" card */
.tools-page .tools-publish { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 20px; margin-top: 20px; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line)); border-radius: var(--r-l); background: var(--brand-soft); }
.tools-page .tools-publish-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--card); color: var(--brand-ink); }
.tools-page .tools-publish-ico .ico { width: 20px; height: 20px; }
.tools-page .tools-publish h2 { margin: 0 0 4px; font-size: 1.08rem; letter-spacing: -0.015em; }
.tools-page .tools-publish p { margin: 0; font-size: 0.92rem; color: var(--ink-2); }
.tools-page .tools-publish-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) {
  .tools-page .tools-publish { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .tools-page .tools-publish-actions { grid-column: 1 / -1; }
}

/* ── Legacy tool compatibility (.tool-app) ───────────────────────────── */
.tool-app {
  /* Status colours; lifted toward --ink in dark mode so they stay legible. */
  --tool-accent: var(--brand-ink);
  --tool-ok: var(--green);
  --tool-err: var(--red);
  --tool-warn: var(--amber);
  --tool-info: var(--blue);
  position: relative;
  padding: clamp(14px, 2vw, 22px);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--card);
  box-shadow: var(--shadow-s);
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tool-app {
    --tool-accent: var(--brand);
    --tool-ok: color-mix(in srgb, var(--green) 55%, var(--ink));
    --tool-err: color-mix(in srgb, var(--red) 55%, var(--ink));
    --tool-warn: color-mix(in srgb, var(--amber) 55%, var(--ink));
    --tool-info: color-mix(in srgb, var(--blue) 55%, var(--ink));
  }
}
:root[data-theme="dark"] .tool-app {
  --tool-accent: var(--brand);
  --tool-ok: color-mix(in srgb, var(--green) 55%, var(--ink));
  --tool-err: color-mix(in srgb, var(--red) 55%, var(--ink));
  --tool-warn: color-mix(in srgb, var(--amber) 55%, var(--ink));
  --tool-info: color-mix(in srgb, var(--blue) 55%, var(--ink));
}

.tool-app .tool-root {
  /* The legacy variable names tools.js uses in inline styles and injected
     <style> blocks, mapped onto v2 tokens (--card, --muted, --mono match). */
  --bg: var(--paper);
  --bg2: var(--paper);
  --bg-2: var(--paper);
  --card-top: var(--paper-2);
  --border: var(--line-2);
  --border-strong: var(--faint);
  --text: var(--ink);
  --accent: var(--tool-accent);
  --accent2: var(--brand);
  --green: var(--tool-ok);
  --red: var(--tool-err);
  --yellow: var(--tool-warn);
  --glow: color-mix(in srgb, var(--brand) 30%, transparent);
  --radius: var(--r);
  --font-display: var(--font);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  min-width: 0;
  /* Wide legacy layouts scroll inside the tool instead of the page; the 4px
     inset keeps focus rings from being clipped by the scroll box. */
  margin: -4px;
  padding: 4px;
  overflow-x: auto;
  font-size: 0.95rem;
  line-height: 1.55;
}
.tool-app .tool-root > :first-child { margin-top: 0; }
.tool-app .tool-root h2 { font-size: 1.25rem; }
.tool-app .tool-root h3 { font-size: 1.04rem; letter-spacing: -0.01em; }
.tool-app .tool-root h4 { font-size: 0.94rem; }
.tool-app .tool-root p { margin: 0 0 0.8em; }
.tool-app .tool-root a:not([class]) { color: var(--tool-accent); }
.tool-app .tool-root pre { max-width: 100%; overflow: auto; }
.tool-app .tool-root table { border-collapse: collapse; }
.tool-app .tool-root hr { border-top-color: var(--line); }
.tool-app ::placeholder { color: var(--faint); opacity: 1; }

/* Form controls. v2 makes text inputs and selects full width; legacy tool
   layouts expect intrinsic widths (inline styles size them where needed). */
.tool-app :is(input:not([type]), input[type="text"], input[type="search"], input[type="url"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], select) {
  width: auto;
  min-width: 0; /* lets flex:1 inputs shrink in narrow rows */
  max-width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  font: 400 0.9rem/1.4 var(--font);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  box-shadow: none;
  vertical-align: middle;
}
.tool-app textarea {
  width: 100%;
  max-width: 100%;
  min-height: 320px;
  padding: 12px 14px;
  font: 400 0.84rem/1.55 var(--mono);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: none;
  resize: vertical;
  overflow-wrap: anywhere;
  tab-size: 2;
}
.tool-app textarea[readonly] { background: var(--paper-2); }
.tool-app :is(input, select, textarea).admin-input { width: 100%; margin-top: 4px; padding: 8px 12px; font-size: 0.92rem; }
.tool-app :is(input, select, textarea):focus { outline: none; border-color: var(--brand); box-shadow: var(--focus); }
.tool-app :is(input[type="checkbox"], input[type="radio"], input[type="range"], progress, meter) { accent-color: var(--brand); }
.tool-app input[type="color"] { min-height: 34px; padding: 2px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--card); cursor: pointer; }
.tool-app input[type="file"] { max-width: 100%; font: inherit; font-size: 0.85rem; }
:where(.tool-app) button { font-family: inherit; }

/* Buttons: legacy .btn is the neutral one, .btn-primary the accent. */
.tool-app .btn {
  --bg: var(--card); --fg: var(--ink); --bd: var(--line-2);
  min-height: 36px;
  padding: 0 14px;
  gap: 6px;
  font: 600 0.87rem/1 var(--font);
  border-radius: 10px;
}
.tool-app .btn:hover { --bd: var(--ink); }
.tool-app .btn-sm { min-height: 34px; padding: 0 12px; font-size: 0.84rem; }
.tool-app :is(.btn-primary, .btn-brand) { --bg: var(--brand); --fg: #fff; --bd: var(--brand); } /* as v2 .btn-brand */
.tool-app :is(.btn-primary, .btn-brand):hover { --bg: var(--brand-ink); --bd: var(--brand-ink); }
.tool-app .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.tool-app .btn-block { width: 100%; }
.tool-app .copy-ok { color: var(--tool-ok) !important; border-color: var(--tool-ok) !important; }

/* Toolbars, panes, output */
.tool-app .tool-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2); }
.tool-app .tool-root > .tool-toolbar:first-child, .tool-app .tool-root > :first-child > .tool-toolbar:first-child { margin-top: 0; }
.tool-app .tool-toolbar label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; font-size: 0.86rem; color: var(--muted); }
.tool-app .tool-toolbar :is(select, input:not([type]), input[type="text"], input[type="number"], input[type="search"], input[type="url"]) { min-height: 34px; padding: 4px 8px; font-size: 0.86rem; }
.tool-app .tool-pane { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tool-app .out-box { display: block; width: 100%; min-height: 320px; padding: 12px 14px; overflow: auto; font: 400 0.84rem/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); background: var(--paper-2); border: 1px solid var(--line-2); border-radius: var(--r); }
.tool-app .tool-stat { font-size: 0.82rem; color: var(--muted); }
.tool-app .ok { color: var(--tool-ok); }
.tool-app .err { color: var(--tool-err); font-family: var(--mono); font-size: 0.84rem; white-space: pre-wrap; }
.tool-app .preview-box { min-height: 200px; padding: 16px; overflow: auto; color: var(--ink); background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); }
.tool-app .preview-dark { background: var(--paper); }
.tool-app .swatch { width: 100%; height: 160px; border: 1px solid var(--line-2); border-radius: var(--r); }
.tool-app .card { border-radius: var(--r); box-shadow: none; }
.tool-app .kbd { padding: 0.1em 0.45em; font: 500 0.8em var(--mono); background: var(--card); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; }
.tool-app .drop-zone:hover { border-color: var(--brand) !important; } /* inline border set by tools.js */

/* Recent-input dropdown */
.tool-app .hist-drop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 240px; max-width: min(380px, 80vw); padding: 6px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-l); }
.tool-app .hist-item { display: block; width: 100%; padding: 7px 10px; overflow: hidden; border: 0; border-radius: var(--r-s); background: none; color: var(--ink); font: 400 0.82rem/1.35 var(--mono); text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.tool-app .hist-item:hover { background: var(--brand-soft); color: var(--brand-ink); }

/* Diffs and matches */
.tool-app .diff-add { display: block; background: var(--green-soft); color: var(--tool-ok); }
.tool-app .diff-del { display: block; background: var(--red-soft); color: var(--tool-err); }
.tool-app .diff-chg { color: var(--tool-warn); }
.tool-app .diff-out { max-height: 420px; min-height: 80px; margin-top: 12px; padding: 14px 16px; overflow: auto; font: 400 0.84rem/1.6 var(--mono); white-space: pre; color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r); }
.tool-app .diff-out :is(.diff-add, .diff-del) { display: inline; background: none; }
.tool-app .match-hl { background: color-mix(in srgb, var(--blue) 24%, transparent); border-radius: 3px; }

/* ── HTML viewer (tools.js 'html-viewer') ────────────────────────────── */
.tool-app .hv-viewer { margin-top: 14px; }
.tool-app .hv-viewer textarea { min-height: 460px; white-space: pre; overflow-wrap: normal; }
.tool-app .hv-viewer iframe { display: block; height: 460px; transition: width 0.2s ease; }
.tool-app .hv-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; margin: 0 0 6px; font: 600 0.72rem/1 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.tool-app .hv-label .badge { text-transform: none; letter-spacing: 0; font-family: var(--font); }
.tool-app .hv-bar .segmented span { padding: 7px 12px; }
.tool-app .hv-result { margin: 14px 0 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2); }
.tool-app .hv-result.is-error { border-color: color-mix(in srgb, var(--red) 30%, var(--line)); background: var(--red-soft); }
.tool-app .hv-result.is-error p { margin: 0; color: var(--tool-err); font-weight: 500; }
.tool-app .hv-result-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tool-app .hv-result .result-url { margin: 12px 0; background: var(--card); }
.tool-app .hv-result .result-url .btn { flex: none; }
.tool-app .hv-check { display: flex; align-items: center; gap: 12px; }
.tool-app .hv-check p { margin: 2px 0 0; font-size: 0.86rem; color: var(--muted); }
.tool-app .hv-grade { flex: none; width: 44px; height: 44px; font-size: 1.1rem; border-radius: 12px; }
.tool-app .hv-claim { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.tool-app .hv-claim p { margin: 0; font-size: 0.88rem; color: var(--ink-2); }

/* ── Small screens ───────────────────────────────────────────────────── */
@media (max-width: 800px) {
  .tool-app .tool-pane { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  /* Two- and three-column inline grids from tools.js stack on phones. */
  .tool-app :is([style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"], [style*="grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr)"],
    [style*="grid-template-columns:minmax(0,.95fr)"], [style*="grid-template-columns:2fr 1.5fr"],
    [style*="minmax(340px"], [style*="minmax(320px"], [style*="minmax(280px"], [style*="minmax(260px"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Grid items may shrink below their content so rows of inputs fit the screen. */
  .tool-app :is([style*="display:grid"], [style*="display: grid"]) > * { min-width: 0; }
}
@media (max-width: 640px) {
  .tool-app { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .tool-app textarea, .tool-app .out-box { min-height: 220px; }
  .tool-app .tool-toolbar { gap: 6px; padding: 8px; }
  .tool-app .hv-viewer textarea { min-height: 300px; }
  .tool-app .hv-viewer iframe { height: 420px; }
  .tool-app .hv-result .result-url { flex-wrap: wrap; padding: 8px; }
  .tool-app .hv-result .result-url .result-link { flex-basis: 100%; padding: 2px 4px 6px; }
}