/* FaLe Werkzeuge – tool pages and hub. Mobile first (360–430 px), enhanced from 720 px.
 * Requires fale-tokens.css + site.css (loaded before). No inline styles anywhere (CSP style-src 'self'). */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/wt/vendor/fonts/BricolageGrotesque-Bold.woff") format("woff");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}

/* category colours (tool icon chips) – same palette as the FaLe PDF app */
html { scroll-padding-bottom: 104px; } /* the sticky action bar must not cover focused / scrolled-to elements */
:root {
  --cat-edit: #3D34B8; --cat-convert: #0A7468; --cat-organize: #A35F00; --cat-scan: #C2412F;
  --cat-secure: #A3266E; --cat-read: #1F5FC4; --cat-ai: #6A3FD0; --cat-share: #0A7468;
  --wt-bar-h: 76px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cat-edit: #ABA6FF; --cat-convert: #3EE0C9; --cat-organize: #F5B84A; --cat-scan: #FF8F7A;
    --cat-secure: #F38BC6; --cat-read: #7DB2FF; --cat-ai: #C2A4FF; --cat-share: #3EE0C9;
  }
}
:root[data-theme="dark"] {
  --cat-edit: #ABA6FF; --cat-convert: #3EE0C9; --cat-organize: #F5B84A; --cat-scan: #FF8F7A;
  --cat-secure: #F38BC6; --cat-read: #7DB2FF; --cat-ai: #C2A4FF; --cat-share: #3EE0C9;
}
.tic-edit { --tic: var(--cat-edit); } .tic-convert { --tic: var(--cat-convert); } .tic-organize { --tic: var(--cat-organize); }
.tic-scan { --tic: var(--cat-scan); } .tic-secure { --tic: var(--cat-secure); } .tic-read { --tic: var(--cat-read); }
.tic-ai { --tic: var(--cat-ai); } .tic-share { --tic: var(--cat-share); }

.wt-chip-ic { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; color: var(--tic, var(--primary)); background: var(--surface-2); background: color-mix(in srgb, var(--tic, var(--primary)) 13%, var(--surface)); }
.wt-chip-ic svg { width: 24px; height: 24px; }
.wt-chip-lg { width: 52px; height: 52px; border-radius: 16px; }
.wt-chip-lg svg { width: 28px; height: 28px; }
.wt-i { width: 20px; height: 20px; flex: none; }

/* ---------------------------------------------------------------- page top */
.wt-top { padding-top: 14px; padding-bottom: 32px; }
.wt-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 0; font-size: var(--step--1); color: var(--text-3); }
.wt-crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--text-3); }
.wt-crumbs a { color: var(--text-2); text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.wt-crumbs a:hover { text-decoration: underline; }
.wt-crumbs [aria-current] { display: inline-flex; min-height: 32px; align-items: center; }
.wt-head { display: flex; gap: 14px; align-items: flex-start; margin-top: 8px; }
.wt-page h1 { font-size: clamp(1.85rem, 1.35rem + 2.4vw, 2.9rem); line-height: 1.06; letter-spacing: -0.03em; }
.wt-hub h1 { margin-top: 8px; }
.wt-lede { margin-top: 8px; color: var(--text-2); font-size: 1.0625rem; line-height: 1.5; max-width: 52ch; }

/* ---------------------------------------------------------------- tool area */
.wt-app { margin-top: 20px; position: relative; }
.wt-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.wt-picker { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.wt-drop {
  position: relative; display: grid; justify-items: center; gap: 10px; padding: 26px 16px 22px; text-align: center; cursor: pointer;
  border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface);
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.wt-drop:hover { border-color: var(--primary); }
.wt-drop:focus-within { box-shadow: var(--focus-ring); border-color: var(--primary); }
.wt-drop-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--ink-grad); color: #fff; box-shadow: var(--shadow-md); }
.wt-drop-ic svg { width: 28px; height: 28px; }
.wt-drop-main { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); font-weight: 700; font-size: 1.0625rem; width: 100%; max-width: 320px; }
.wt-drop:hover .wt-drop-main { background: var(--primary-strong); }
.wt-drop-sub { color: var(--text-3); font-size: var(--step--1); }
@media (pointer: coarse) { .wt-drop-sub { display: none; } }
.wt-dragging .wt-drop { border-color: var(--primary); background: var(--primary-soft); }
.wt-dragging[data-state="files"] .wt-files-sec { outline: 2px dashed var(--primary); outline-offset: 6px; border-radius: var(--radius); }
.wt-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.wt-chips:empty { display: none; }
.wt-chipbtn { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-weight: 650; font-size: 0.95rem; cursor: pointer; }
.wt-chipbtn:hover { background: var(--surface-2); }
.wt-chipbtn:focus-within { box-shadow: var(--focus-ring); }
.wt-chipbtn svg { width: 20px; height: 20px; color: var(--primary); }
.wt-noscript { padding: 14px 16px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--text); margin-top: 10px; }

.wt-trust { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 16px; }
.wt-trust li { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; color: var(--text-2); line-height: 1.3; }
.wt-trust svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
@media (min-width: 720px) { .wt-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; } }

.wt-proof { margin-top: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.wt-proof summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; cursor: pointer; font-weight: 650; font-size: 0.95rem; list-style: none; }
.wt-proof summary::-webkit-details-marker { display: none; }
.wt-proof summary svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.wt-proof summary::after { content: ""; margin-left: auto; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); }
.wt-proof[open] summary::after { transform: rotate(-135deg); }
.wt-proof > div { padding: 0 14px 14px; color: var(--text-2); font-size: 0.95rem; display: grid; gap: 10px; }
.wt-proof p + p { margin-top: 0; }
.wt-proof-live { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--text); font-weight: 600; }
.wt-offline { display: flex; gap: 8px; align-items: center; color: var(--accent); font-weight: 650; }
.wt-offline svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- buttons */
.wt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: var(--radius-pill); border: 1px solid transparent; font: inherit; font-weight: 650; font-size: 1rem; line-height: 1.2; cursor: pointer; text-decoration: none; color: var(--text); background: transparent; }
.wt-btn svg { width: 18px; height: 18px; flex: none; }
.wt-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.wt-btn-primary { background: var(--primary); color: var(--on-primary); }
.wt-btn-primary:not(:disabled):hover { background: var(--primary-strong); }
.wt-btn-quiet { background: var(--surface); border-color: var(--border-strong); }
.wt-btn-quiet:not(:disabled):hover { background: var(--surface-2); }
.wt-btn-text { color: var(--primary); padding: 0 12px; }
.wt-btn-text:hover { background: var(--primary-soft); }
.wt-btn-sm { min-height: 44px; padding: 0 16px; font-size: 0.95rem; }
.wt-btn-lg { min-height: 54px; font-size: 1.0625rem; padding: 0 26px; }
.wt-btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.wt-icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: var(--text-2); cursor: pointer; padding: 0; }
.wt-icon-btn:not(:disabled):hover { background: var(--surface-2); color: var(--text); }
.wt-icon-btn:disabled { opacity: 0.3; cursor: default; }
.wt-icon-btn svg { width: 20px; height: 20px; }
.wt-rm:not(:disabled):hover { color: var(--danger); background: var(--danger-soft); }

/* ---------------------------------------------------------------- files */
.wt-notice { margin-bottom: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--text); font-size: 0.95rem; }
.wt-files-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wt-files-title, .wt-opts-title { font-family: var(--font-sans); font-size: 1.125rem; font-weight: 750; letter-spacing: -0.01em; }
.wt-hint { margin-top: 4px; color: var(--text-3); font-size: var(--step--1); }
.wt-files { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.wt-file { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); position: relative; touch-action: auto; }
.wt-file.is-dragging { z-index: 5; box-shadow: var(--shadow-lg); border-color: var(--primary); }
.wt-file.is-error { border-color: var(--danger); background: var(--danger-soft); }
.wt-file-row { display: flex; align-items: center; gap: 8px; padding: 8px 6px 8px 4px; min-width: 0; }
.wt-grip { display: grid; place-items: center; width: 40px; height: 52px; flex: none; border: 0; background: transparent; color: var(--text-3); cursor: grab; touch-action: none; border-radius: 10px; padding: 0; }
.wt-grip:active { cursor: grabbing; }
.wt-grip svg { width: 22px; height: 22px; stroke-width: 3.2; }
.wt-grip[hidden] + .wt-thumb { margin-left: 6px; }
.wt-thumb { width: 48px; height: 62px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--surface-2); color: var(--text-3); overflow: hidden; }
.wt-thumb.has-img { background: #fff; box-shadow: var(--paper-shadow); }
.wt-thumb canvas { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.wt-thumb-lg { width: 72px; height: 94px; }
.wt-file-info { flex: 1; min-width: 0; }
.wt-file-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; }
.wt-file-meta { font-size: var(--step--1); color: var(--text-3); font-variant-numeric: tabular-nums; }
.wt-file-actions { display: flex; flex: none; }
@media (max-width: 400px) { .wt-file-actions .wt-icon-btn { width: 40px; } }
.wt-file-extra:empty { display: none; }
.wt-file-extra { padding: 0 12px 12px; }
.wt-file-err { display: flex; gap: 8px; align-items: flex-start; color: var(--danger); font-size: 0.925rem; font-weight: 600; }
.wt-file-err svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.wt-file-opts summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; color: var(--primary); font-weight: 650; font-size: 0.925rem; list-style: none; border-radius: 8px; }
.wt-file-opts summary::-webkit-details-marker { display: none; }
.wt-file-opts summary svg { width: 18px; height: 18px; }
.wt-file-opts .wt-opts { margin-top: 6px; }
.wt-lock { display: grid; gap: 6px; padding: 12px; border-radius: var(--radius-sm); background: var(--warn-soft); }
.wt-lock-title { display: flex; gap: 8px; align-items: center; font-weight: 700; color: var(--warn); }
.wt-lock-title svg { width: 18px; height: 18px; }
.wt-lock label { font-size: 0.925rem; font-weight: 600; }
.wt-lock-row { display: flex; gap: 8px; }
.wt-lock-row .wt-input { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------- options */
.wt-files-sec, .wt-opts-sec, .wt-stage { margin-top: 4px; }
.wt-opts-sec { margin-top: 22px; }
.wt-opts { display: grid; gap: 18px; margin-top: 12px; }
.wt-opt { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.wt-opt > label, .wt-opt legend, .wt-opt-row label { font-weight: 650; font-size: 0.975rem; padding: 0; }
.wt-opt-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wt-opt-hint { font-size: var(--step--1); color: var(--text-3); }
.wt-opt-err { font-size: var(--step--1); color: var(--danger); font-weight: 600; }
.wt-radios { display: grid; gap: 8px; margin-top: 8px; }
@media (min-width: 560px) { .wt-radios { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.wt-radio { position: relative; display: block; cursor: pointer; }
.wt-radio input { position: absolute; z-index: 1; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.wt-radio-body { display: grid; gap: 2px; min-height: 56px; padding: 12px 14px 12px 44px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); position: relative; }
.wt-radio-body::before { content: ""; position: absolute; left: 14px; top: 15px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); box-sizing: border-box; }
.wt-radio-body strong { font-weight: 700; }
.wt-radio-body span { font-size: var(--step--1); color: var(--text-2); line-height: 1.4; }
.wt-radio input:checked + .wt-radio-body { border-color: var(--primary); background: var(--primary-soft); }
.wt-radio input:checked + .wt-radio-body::before { border: 6px solid var(--primary); }
.wt-radio input:focus-visible + .wt-radio-body { box-shadow: var(--focus-ring); }
.wt-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; cursor: pointer; font-weight: 650; position: relative; }
.wt-switch input { position: absolute; opacity: 0; width: 52px; height: 32px; right: 0; margin: 0; cursor: pointer; }
.wt-switch-ui { flex: none; width: 52px; height: 32px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background-color var(--dur-2) var(--ease-out); }
.wt-switch-ui::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--dur-2) var(--ease-out); }
.wt-switch input:checked ~ .wt-switch-ui { background: var(--primary); }
.wt-switch input:checked ~ .wt-switch-ui::after { transform: translateX(20px); background: var(--on-primary); }
.wt-switch input:focus-visible ~ .wt-switch-ui { box-shadow: var(--focus-ring); }
.wt-input { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 1rem; }
.wt-input:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); }
.wt-input[aria-invalid="true"] { border-color: var(--danger); }
select.wt-input { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.wt-input-unit { display: flex; align-items: center; gap: 8px; }
input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--primary); }
.wt-range-val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--primary); }
.wt-color { width: 64px; height: 44px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); padding: 4px; }

/* ---------------------------------------------------------------- sticky action bar */
.wt-bar {
  position: sticky; bottom: 0; z-index: 20; margin: 18px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -10px 30px -18px rgba(19, 18, 46, 0.4);
}
.wt-bar-text { flex: 1; min-width: 0; }
.wt-bar-summary { font-weight: 650; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wt-bar-hint { font-size: var(--step--1); color: var(--warn); font-weight: 600; line-height: 1.35; }
.wt-bar .wt-btn-primary { flex: none; max-width: 60%; }
@media (max-width: 400px) {
  .wt-bar { flex-wrap: wrap; }
  .wt-bar .wt-btn-primary { flex: 1 1 100%; max-width: none; }
}
@media (min-width: 720px) { .wt-bar { margin: 22px 0 0; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 12px 12px 20px; bottom: 12px; } }
.wt-typing .wt-bar { position: static; box-shadow: none; } /* on-screen keyboard open: the bar must not cover the field (shell.js) */

/* ---------------------------------------------------------------- progress */
.wt-progress { display: grid; justify-items: center; gap: 14px; padding: 32px 16px; text-align: center; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.wt-prog-text { font-weight: 650; font-variant-numeric: tabular-nums; min-height: 1.6em; }
.wt-prog-bar { width: 100%; max-width: 360px; height: 8px; appearance: none; border: 0; border-radius: 99px; background: var(--surface-3); overflow: hidden; accent-color: var(--primary); }
.wt-prog-bar::-webkit-progress-bar { background: var(--surface-3); border-radius: 99px; }
.wt-prog-bar::-webkit-progress-value { background: var(--primary); border-radius: 99px; transition: width var(--dur-2) linear; }
.wt-prog-bar::-moz-progress-bar { background: var(--primary); border-radius: 99px; }
.wt-spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--primary-soft); border-top-color: var(--primary); animation: wt-spin 0.9s linear infinite; }
@keyframes wt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .wt-spinner { animation-duration: 3s; }
  .wt-drop, .wt-switch-ui, .wt-switch-ui::after, .wt-prog-bar::-webkit-progress-value { transition: none; }
}

/* ---------------------------------------------------------------- result */
.wt-result { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px 16px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); scroll-margin-top: 12px; }
.wt-result-head { display: flex; gap: 14px; align-items: center; }
.wt-result-head h2 { font-size: 1.6rem; }
.wt-result-head p { color: var(--text-2); }
.wt-done-ic { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.wt-done-ic svg { width: 26px; height: 26px; stroke-width: 2.6; }
.wt-live-opts { padding: 12px; border-radius: var(--radius-md); background: var(--surface-2); }
.wt-live-title { font-weight: 700; font-size: 0.95rem; }
.wt-live-opts .wt-opts { margin-top: 4px; }
.wt-live-opts legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wt-outputs { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.wt-output { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: var(--radius-md); border: 1px solid var(--border); min-width: 0; }
.wt-out-info { flex: 1; min-width: 0; display: grid; gap: 4px; }
.wt-out-size { color: var(--text-2); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.wt-out-note { font-size: var(--step--1); color: var(--text-3); }
.wt-out-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.wt-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.wt-pill-muted { background: var(--surface-2); color: var(--text-3); }
.wt-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-2); font-size: 0.925rem; }
.wt-note svg { width: 18px; height: 18px; flex: none; color: var(--warn); margin-top: 2px; }
.wt-result-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.wt-next-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 8px; }
.wt-next ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.wt-next-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--primary); background: var(--primary-soft); color: var(--primary); font: inherit; font-weight: 700; cursor: pointer; }
.wt-next-chip:hover { background: var(--primary); color: var(--on-primary); }
.wt-next-chip svg { width: 18px; height: 18px; }
.wt-restart { display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 10px; }

.wt-error { padding: 18px 16px; border-radius: var(--radius-lg); background: var(--danger-soft); border: 1px solid var(--danger); }
.wt-error-head { display: flex; gap: 10px; align-items: center; color: var(--danger); }
.wt-error-head h2 { font-size: 1.3rem; color: var(--danger); }
.wt-error-head svg { width: 24px; height: 24px; }
.wt-error > p { margin-top: 8px; }

/* ---------------------------------------------------------------- SEO content */
.wt-sec h2 { margin-bottom: 22px; }
.wt-steps { list-style: none; counter-reset: step; display: grid; gap: 14px; }
@media (min-width: 820px) { .wt-steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.wt-step { counter-increment: step; position: relative; padding: 18px 18px 18px 64px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.wt-step::before { content: counter(step); position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--ink-grad); color: #fff; font-family: var(--font-display); font-weight: 800; }
.wt-step h3 { font-size: 1.0625rem; }
.wt-step p { margin-top: 4px; color: var(--text-2); }
.wt-why { list-style: none; display: grid; gap: 18px 40px; }
@media (min-width: 760px) { .wt-why { grid-template-columns: 1fr 1fr; } }
.wt-why li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.wt-why li > svg { width: 24px; height: 24px; color: var(--accent); margin-top: 2px; }
.wt-why h3 { font-size: 1.0625rem; }
.wt-why p { color: var(--text-2); margin-top: 2px; }
.wt-cmp-wrap { margin-top: 32px; }
.wt-cmp { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.wt-cmp caption { text-align: left; font-weight: 750; font-size: 1.0625rem; margin-bottom: 10px; }
.wt-cmp th, .wt-cmp td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.wt-cmp thead th { font-size: var(--step--1); color: var(--text-3); font-weight: 700; }
.wt-cmp tbody th { font-weight: 650; }
.wt-cmp td:nth-child(2) { color: var(--accent); font-weight: 650; }
.wt-cmp td:nth-child(3) { color: var(--text-2); }
@media (max-width: 719px) {
  .wt-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wt-cmp, .wt-cmp caption, .wt-cmp tbody, .wt-cmp tr, .wt-cmp th, .wt-cmp td { display: block; }
  .wt-cmp tr { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .wt-cmp th, .wt-cmp td { border: 0; padding: 2px 0; }
  .wt-cmp td::before { content: attr(data-label) ": "; color: var(--text-3); font-weight: 600; }
}
.wt-tm { margin-top: 18px; font-size: var(--step--1); color: var(--text-3); max-width: 70ch; }

/* tool cards (related tools, hub) – two columns on phones */
.wt-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .wt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1000px) { .wt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wt-card a { display: grid; align-content: start; gap: 8px; height: 100%; padding: 14px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.wt-card a:hover { border-color: var(--primary); }
.wt-card a:active { transform: scale(0.98); }
.wt-card-name { font-family: var(--font-sans); font-size: 1rem; font-weight: 750; letter-spacing: -0.01em; line-height: 1.25; }
.wt-card-desc { font-size: 0.875rem; color: var(--text-2); line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .wt-card a { transition: none; } .wt-card a:active { transform: none; } }

/* app CTA */
.wt-app-cta-row { display: grid; gap: 18px; align-items: center; }
.wt-app-cta-row img { width: 64px; height: 64px; }
.wt-app-cta-row h2 { font-size: var(--step-2); }
.wt-app-cta-row p { margin-top: 8px; max-width: 56ch; }
@media (min-width: 860px) { .wt-app-cta-row { grid-template-columns: 64px 1fr auto; gap: 24px; } }

/* ---------------------------------------------------------------- hub */
.wt-search { position: relative; margin-top: 18px; max-width: 560px; }
.wt-search label { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); display: grid; }
.wt-search label svg { width: 20px; height: 20px; }
.wt-search input { width: 100%; min-height: 52px; padding: 12px 16px 12px 46px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 1.0625rem; }
.wt-search input:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); }
.wt-cats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* phones: the category chips are one swipeable row instead of four wrapped rows above the tools */
@media (max-width: 719px) {
  .wt-cats { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 14px -16px 0; padding: 0 16px 2px; scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .wt-cats::-webkit-scrollbar { display: none; }
  .wt-cats li { flex: none; }
  .wt-cat { min-height: 40px; padding: 0 14px; font-size: 0.875rem; }
}
.wt-cat { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-weight: 650; font-size: 0.925rem; text-decoration: none; }
.wt-cat:hover { color: var(--text); background: var(--surface-2); }
.wt-cat[aria-current="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
html:not(.wt-js) .wt-cat[aria-current="true"] { background: var(--surface); border-color: var(--border-strong); color: var(--text-2); }
.wt-nohits { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-2); }
.wt-catsec { margin-top: 30px; scroll-margin-top: 12px; }
.wt-catsec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.wt-catsec-head h2 { font-size: var(--step-2); display: flex; align-items: center; gap: 8px; }
.wt-catsec-head p { color: var(--text-3); font-size: 0.95rem; }
.wt-h-ic { width: 22px; height: 22px; color: var(--fale-marker); fill: var(--fale-marker); stroke: #A37A00; }
.wt-shared { margin-top: 18px; padding: 16px; border-radius: var(--radius-lg); background: var(--primary-soft); border: 1px solid var(--primary); }
.wt-shared h2 { font-size: var(--step-2); }
.wt-shared-files { margin: 6px 0 14px; color: var(--text-2); overflow-wrap: anywhere; }
.wt-shared-none { margin-top: 10px; color: var(--text-2); }
.wt-share-back { margin-top: 22px; }

@media print {
  .wt-app, .wt-trust, .wt-proof, .wt-bar, .wt-app-cta { display: none !important; }
}
.wt-shared-more { margin-top: 12px; width: 100%; }

/* ---------- Simple lists (2026-10): one tool per row, topics collapsible, page info folded away ---------- */
.wt-rows { grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 720px) { .wt-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (min-width: 1000px) { .wt-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wt-rows .wt-card a { grid-template-columns: 40px 1fr; grid-template-rows: auto auto; align-items: center; gap: 0 12px; padding: 10px 12px; min-height: 60px; }
.wt-rows .wt-chip-ic { width: 40px; height: 40px; border-radius: 12px; grid-row: 1 / 3; }
.wt-rows .wt-chip-ic svg { width: 22px; height: 22px; }
.wt-rows .wt-card-name { align-self: end; }
.wt-rows .wt-card-desc { align-self: start; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.wt-cats-all { margin-top: 30px; }
.wt-cats-h { font-size: var(--step-2); margin-bottom: 10px; }
.wt-catacc { margin-top: 0; border-top: 1px solid var(--border); }
.wt-catacc:last-child { border-bottom: 1px solid var(--border); }
.wt-catacc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 2px; min-height: 56px; }
.wt-catacc > summary::-webkit-details-marker { display: none; }
.wt-catacc > summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); margin: -4px 4px 0 0; transition: transform var(--dur-1) var(--ease-out); }
.wt-catacc[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.wt-catacc-t { display: grid; gap: 1px; flex: 1; min-width: 0; }
.wt-catacc-name { font-weight: 750; font-size: 1.0625rem; }
.wt-catacc-desc { font-size: 0.875rem; color: var(--text-3); }
.wt-catacc-n { flex: none; min-width: 30px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 0.8125rem; font-weight: 700; text-align: center; }
.wt-catacc > .wt-grid { padding: 2px 0 16px; }
.wt-info h2 { margin-bottom: 12px; }
.wt-acc { border-top: 1px solid var(--border); }
.wt-acc-item { border-bottom: 1px solid var(--border); scroll-margin-top: 12px; }
.wt-acc-item > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 2px; min-height: 56px; font-weight: 700; font-size: 1.0625rem; }
.wt-acc-item > summary::-webkit-details-marker { display: none; }
.wt-acc-item > summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); margin: -4px 4px 0 0; }
.wt-acc-item[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.wt-acc-item > div { padding: 0 0 20px; }
.wt-acc-item .faq details:first-child { border-top: 0; }
.wt-acc-item .wt-cmp-wrap { margin-top: 20px; }
@media (prefers-reduced-motion: reduce) { .wt-catacc > summary::after { transition: none; } }
@media print { .wt-acc-item > div, .wt-catacc > .wt-grid { display: block; } }
.wt-rows-noic .wt-card a { grid-template-columns: 1fr; }