/* Shared theme layer for the Simple tools network.
   Loaded after each page's inline <style>, so these rules win.
   Per-site accent comes from /accent.css (--h hue, --s saturation). */
@font-face{font-family:"Display";src:url(/fonts/display.woff2) format("woff2");font-weight:200 800;font-display:swap}

:root{
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --font-serif:"Display",var(--font-sans);
  --radius:16px;
  /* light (default) */
  --bg:hsl(var(--h) 30% 98%);
  --bg2:hsl(var(--h) 35% 95%);
  --panel:#fff;
  --panel2:hsl(var(--h) 30% 96.5%);
  --line:hsl(var(--h) 18% 87%);
  --text:hsl(var(--h) 25% 12%);
  --muted:hsl(var(--h) 10% 40%);
  --accent:hsl(var(--h) var(--s) 40%);
  --accent2:hsl(var(--h) var(--s) 32%);
  --accent-soft:hsl(var(--h) var(--s) 40% / .1);
  --on-accent:#fff;
  --danger:#c0392b;
  --ok:#23824a;
  --checker1:#e4e4e8;--checker2:#f6f6f8;
  --shadow:0 1px 2px hsl(var(--h) 30% 20% / .06),0 8px 28px -8px hsl(var(--h) 30% 20% / .14);
  --glow:hsl(var(--h) var(--s) 55% / .16);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:hsl(var(--h) 18% 7%);
  --bg2:hsl(var(--h) 18% 9%);
  --panel:hsl(var(--h) 16% 11%);
  --panel2:hsl(var(--h) 15% 14.5%);
  --line:hsl(var(--h) 12% 21%);
  --text:hsl(var(--h) 20% 92%);
  --muted:hsl(var(--h) 8% 63%);
  --accent:hsl(var(--h) var(--s) 66%);
  --accent2:hsl(var(--h) var(--s) 56%);
  --accent-soft:hsl(var(--h) var(--s) 66% / .12);
  --on-accent:hsl(var(--h) 40% 8%);
  --danger:#ef7d6e;
  --ok:#7fcf95;
  --checker1:#34343a;--checker2:#26262b;
  --shadow:0 1px 2px #0006,0 10px 30px -10px #000a;
  --glow:hsl(var(--h) var(--s) 55% / .14);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --bg:hsl(var(--h) 18% 7%);--bg2:hsl(var(--h) 18% 9%);--panel:hsl(var(--h) 16% 11%);--panel2:hsl(var(--h) 15% 14.5%);
    --line:hsl(var(--h) 12% 21%);--text:hsl(var(--h) 20% 92%);--muted:hsl(var(--h) 8% 63%);
    --accent:hsl(var(--h) var(--s) 66%);--accent2:hsl(var(--h) var(--s) 56%);--accent-soft:hsl(var(--h) var(--s) 66% / .12);
    --on-accent:hsl(var(--h) 40% 8%);--danger:#ef7d6e;--ok:#7fcf95;--checker1:#34343a;--checker2:#26262b;
    --shadow:0 1px 2px #0006,0 10px 30px -10px #000a;color-scheme:dark}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-sans);line-height:1.6;transition:background-color .2s,color .2s}
::selection{background:var(--accent);color:var(--on-accent)}
a{color:var(--accent)}
h1,h2,h3{font-family:var(--font-serif);letter-spacing:-.015em;line-height:1.15}
h1{font-weight:750}
h2,h3{font-weight:650}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);padding:0}
header.site .s-bar{max-width:1040px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px}
header.site .s-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-family:var(--font-serif);font-weight:700;font-size:1.08rem;letter-spacing:-.01em;min-width:0}
header.site .s-brand .s-mark{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--accent);color:var(--on-accent)}
header.site .s-brand .s-mark svg{width:18px;height:18px}
header.site .s-brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header.site nav{margin-left:auto;display:flex;align-items:center;gap:4px}
header.site nav a{font-family:var(--font-sans);color:var(--muted);text-decoration:none;font-size:.92rem;padding:7px 11px;border-radius:9px;white-space:nowrap}
header.site nav a:hover,header.site nav a[aria-current]{color:var(--text);background:var(--panel2)}
.theme-toggle{flex:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);display:grid;place-items:center;cursor:pointer;padding:0;margin-left:4px}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:block}
:root[data-theme="dark"] .theme-toggle .moon{display:none}
@media (max-width:640px){header.site nav a.hide-sm{display:none}}

/* breadcrumb row under header (multi-tool sites) */
.s-crumbs{max-width:1040px;margin:0 auto;padding:14px 16px 0;font-size:.85rem;color:var(--muted)}
.s-crumbs a{color:var(--muted);text-decoration:none}.s-crumbs a:hover{color:var(--accent)}
.s-crumbs span{margin:0 6px;opacity:.6}

/* ---------- layout ---------- */
.wrap{max-width:1040px}
main.wrap{position:relative}
body::before{content:"";position:absolute;inset:0 0 auto 0;height:560px;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 70% at 15% 0%,var(--glow),transparent 70%),radial-gradient(45% 60% at 95% 10%,var(--glow),transparent 70%),
  radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--text) 9%,transparent) 1px,transparent 0) 0 0/22px 22px;
  -webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
body{position:relative}

.hero{padding:44px 0 26px;text-align:left}
.hero h1{font-size:clamp(2rem,5.2vw,3.25rem);margin:0 0 12px;max-width:20ch;text-wrap:balance}
.hero p{color:var(--muted);font-size:1.08rem;max-width:62ch;margin:0}
.s-kicker{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:99px;padding:5px 12px;margin-bottom:16px}
.trust{gap:8px;margin:20px 0 0}
.trust li{background:var(--panel);border:1px solid var(--line);color:var(--text);font-size:.82rem;padding:5px 12px 5px 28px;position:relative}
.trust li::before{content:"";position:absolute;left:11px;top:50%;width:10px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translateY(-70%) rotate(-45deg)}
.trust li:last-child{color:var(--text);border-color:var(--line)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
main > section.card,main > .card{padding:clamp(18px,3vw,30px)}
input,select,textarea{background:var(--panel2);border-color:var(--line);color:var(--text)}
.btn{background:var(--panel);border-color:var(--line);color:var(--text)}
.btn.primary,.chip.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent2);border-color:var(--accent2)}
.drop{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:var(--panel2)}
.drop.over{background:var(--accent-soft)}

/* hub grids */
.grid{gap:16px}
a.card{transition:transform .15s,border-color .15s,box-shadow .15s}
a.card:hover{transform:translateY(-2px);border-color:var(--accent)}

/* ---------- content ---------- */
.seo{padding:48px 0 24px;max-width:760px}
.seo h2{font-size:clamp(1.35rem,2.6vw,1.7rem);margin:40px 0 12px}
.seo p,.seo li{color:color-mix(in srgb,var(--text) 86%,var(--muted))}
.tldr{background:var(--accent-soft);border:0;border-left:3px solid var(--accent);border-radius:0 12px 12px 0}
details{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:0 16px;margin:8px 0}
details summary{cursor:pointer;padding:13px 0;font-weight:600;list-style-position:outside}
details[open] summary{border-bottom:1px solid var(--line);margin-bottom:4px}
details p{margin:10px 0 14px}
.cmp th{background:var(--panel2)}
.cmp .y{color:var(--accent);font-weight:600}

/* guides */
.s-guide-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:16px 0 0;padding:0;list-style:none}
.s-guide-list a{display:block;height:100%;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;text-decoration:none;color:var(--text);transition:border-color .15s,transform .15s}
.s-guide-list a:hover{border-color:var(--accent);transform:translateY(-2px)}
.s-guide-list b{display:block;font-family:var(--font-serif);font-size:1.05rem;margin-bottom:6px;line-height:1.25}
.s-guide-list small{color:var(--muted);font-size:.88rem;line-height:1.45;display:block}
.s-guide-list .s-tag{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}

article.s-guide{max-width:720px;margin:0 auto;padding:34px 0 20px}
article.s-guide h1{font-size:clamp(1.9rem,4.6vw,2.8rem);margin:6px 0 14px;text-wrap:balance}
article.s-guide .s-lede{font-size:1.12rem;color:var(--muted);margin:0 0 8px}
article.s-guide .s-meta{font-size:.85rem;color:var(--muted);margin:0 0 28px}
article.s-guide h2{font-size:clamp(1.3rem,2.6vw,1.6rem);margin:38px 0 10px}
article.s-guide h3{font-size:1.12rem;margin:26px 0 8px}
article.s-guide p,article.s-guide li{font-size:1.04rem}
article.s-guide ul,article.s-guide ol{padding-left:22px}
article.s-guide li{margin:5px 0}
article.s-guide table{width:100%;border-collapse:collapse;margin:14px 0 22px;font-size:.95rem}
article.s-guide th,article.s-guide td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
article.s-guide th{background:var(--panel2);font-weight:600}
.s-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.s-callout{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 12px 12px 0;padding:14px 18px;margin:20px 0}
.s-callout p{margin:0}
.s-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px;margin:34px 0 10px}
.s-cta b{font-family:var(--font-serif);font-size:1.15rem;display:block}
.s-cta span{color:var(--muted);font-size:.93rem}
.s-cta a.s-go{background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:700;padding:11px 18px;border-radius:11px;white-space:nowrap}
.s-cta a.s-go:hover{background:var(--accent2)}
.s-related{margin-top:40px}

/* ---------- footer ---------- */
footer{margin-top:56px;border-top:1px solid var(--line);background:var(--bg2);padding:36px 0 28px;text-align:left;font-size:.9rem}
footer .wrap{max-width:1040px}
footer .s-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px 32px;margin-bottom:26px}
footer h4{font-family:var(--font-serif);font-size:.95rem;margin:0 0 10px;color:var(--text)}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:5px 0}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--accent)}
footer .s-about{color:var(--muted);max-width:34ch}
footer .s-base{border-top:1px solid var(--line);padding-top:18px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between}
footer .more{display:none}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* fixes for legacy page CSS */
table.cmp{display:table}
details summary{list-style:none;position:relative;padding-right:28px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"";position:absolute;right:4px;top:50%;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}