/* knurl.tools — shared styles. Small, sharp, fast. No frameworks, no trackers. */
:root{
  --ink:#0f172a; --mut:#475569; --bg:#ffffff; --soft:#f4f6f8; --softer:#fafbfc;
  --brand:#2563eb; --brand-ink:#1d4ed8; --line:#e2e8f0;
  --crit:#dc2626; --high:#ea580c; --med:#ca8a04; --low:#0891b2; --info:#64748b; --ok:#16a34a;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#e8edf5; --mut:#9fb0c5; --bg:#0b1120; --soft:#121a2b; --softer:#0e1626; --line:#1e293b;
    --brand:#3b82f6; --brand-ink:#60a5fa;
  }
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:var(--bg); line-height:1.55; -webkit-font-smoothing:antialiased; }
.wrap{ max-width:880px; margin:0 auto; padding:0 20px; }
a{ color:var(--brand-ink); }

header.site{ padding:18px 0; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.logo{ font-weight:800; letter-spacing:-0.03em; font-size:18px; text-decoration:none; color:var(--ink); display:inline-flex; align-items:center; gap:8px; }
.logo .mark{ width:22px; height:22px; display:inline-block; vertical-align:middle; }
nav.site a{ text-decoration:none; color:var(--mut); font-size:14px; margin-left:18px; font-weight:600; }
nav.site a:hover{ color:var(--ink); }

.hero{ padding:54px 0 30px; }
h1{ font-size:clamp(28px,5vw,42px); line-height:1.1; letter-spacing:-0.025em; margin:0 0 16px; }
.lede{ font-size:18px; color:var(--mut); max-width:640px; margin:0 0 24px; }
.eyebrow{ text-transform:uppercase; letter-spacing:0.08em; font-size:12px; font-weight:700; color:var(--brand-ink); margin:0 0 12px; }

.row{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{ display:inline-block; font-weight:600; text-decoration:none; padding:12px 20px; border-radius:10px; border:1px solid transparent; cursor:pointer; font-size:15px; }
.btn.primary{ background:var(--brand); color:#fff; }
.btn.primary:hover{ background:var(--brand-ink); }
.btn.ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn.ghost:hover{ background:var(--soft); }

.trust{ margin-top:28px; padding:16px 18px; background:var(--soft); border:1px solid var(--line); border-radius:12px; font-size:14.5px; color:var(--mut); }
.trust b{ color:var(--ink); }

section{ padding:34px 0; border-top:1px solid var(--line); }
h2{ font-size:23px; letter-spacing:-0.015em; margin:0 0 16px; }
h3{ font-size:16px; margin:0 0 6px; }
p{ margin:0 0 12px; }

.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.card{ border:1px solid var(--line); border-radius:12px; padding:16px; background:var(--softer); }
.card p{ margin:0; font-size:14px; color:var(--mut); }
ol.steps,ul.plain{ padding-left:18px; color:var(--mut); } ol.steps li,ul.plain li{ margin-bottom:8px; }

.toollist{ list-style:none; padding:0; margin:0; }
.toollist li{ border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-bottom:12px; background:var(--softer); }
.toollist a.tool-link{ font-weight:700; font-size:17px; text-decoration:none; color:var(--ink); }
.toollist a.tool-link:hover{ color:var(--brand-ink); }
.toollist .soon{ color:var(--mut); font-weight:600; font-size:17px; }
.toollist p{ margin:6px 0 0; color:var(--mut); font-size:14.5px; }

code{ font-family:var(--mono); background:var(--soft); padding:1px 6px; border-radius:5px; font-size:13px; }
.legal h2{ font-size:20px; margin-top:28px; } .legal p,.legal li{ color:var(--mut); }
.legal{ padding:36px 0; } .legal .updated{ font-size:13px; color:var(--mut); }

/* ---- scanner UI ---- */
.scanner{ margin:8px 0 0; }
.scanner textarea{ width:100%; min-height:200px; resize:vertical; font-family:var(--mono); font-size:13px; line-height:1.5;
  padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--softer); color:var(--ink); }
.scanner .controls{ display:flex; gap:10px; align-items:center; margin:12px 0; flex-wrap:wrap; }
.scanner .hint{ font-size:13px; color:var(--mut); }
.netflag{ font-size:12.5px; color:var(--ok); font-weight:600; }
.results{ margin-top:8px; }
.summary-strip{ display:flex; gap:10px; flex-wrap:wrap; margin:14px 0; }
.pill{ font-size:12.5px; font-weight:700; padding:5px 11px; border-radius:999px; border:1px solid var(--line); color:var(--ink); background:var(--softer); }
.pill.crit{ color:#fff; background:var(--crit); border-color:var(--crit); }
.pill.high{ color:#fff; background:var(--high); border-color:var(--high); }
.pill.med{ color:#fff; background:var(--med); border-color:var(--med); }
.pill.low{ color:#fff; background:var(--low); border-color:var(--low); }
.pill.info{ color:#fff; background:var(--info); border-color:var(--info); }
.pill.clean{ color:#fff; background:var(--ok); border-color:var(--ok); }
.finding{ border:1px solid var(--line); border-left-width:4px; border-radius:10px; padding:14px 16px; margin-bottom:10px; background:var(--softer); }
.finding.sev-critical{ border-left-color:var(--crit); }
.finding.sev-high{ border-left-color:var(--high); }
.finding.sev-medium{ border-left-color:var(--med); }
.finding.sev-low{ border-left-color:var(--low); }
.finding.sev-info{ border-left-color:var(--info); }
.finding .ftitle{ font-weight:700; font-size:15px; }
.finding .floc{ font-family:var(--mono); font-size:12.5px; color:var(--mut); }
.finding .fmatch{ font-family:var(--mono); font-size:12.5px; background:var(--soft); padding:6px 10px; border-radius:6px; margin:8px 0; overflow-x:auto; }
.finding .fmeta{ font-size:13.5px; color:var(--mut); margin:4px 0 0; }
.finding .fmeta b{ color:var(--ink); }
.sevtag{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; padding:2px 7px; border-radius:5px; color:#fff; vertical-align:middle; margin-left:8px; }
.sevtag.critical{ background:var(--crit); } .sevtag.high{ background:var(--high); }
.sevtag.medium{ background:var(--med); } .sevtag.low{ background:var(--low); } .sevtag.info{ background:var(--info); }
.notice{ font-size:13px; color:var(--mut); border:1px dashed var(--line); border-radius:10px; padding:12px 14px; margin-top:14px; }

.price{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:560px){ .price{ grid-template-columns:1fr; } }
.tier{ border:1px solid var(--line); border-radius:14px; padding:20px; background:var(--softer); }
.tier.pro{ border-color:var(--brand); }
.tier .amt{ font-size:30px; font-weight:700; margin:6px 0 12px; }
.tier ul{ padding-left:18px; margin:0 0 16px; color:var(--mut); font-size:14px; }
.note{ font-size:12.5px; color:var(--mut); margin-top:8px; }

footer.site{ padding:30px 0 50px; color:var(--mut); font-size:13px; border-top:1px solid var(--line); margin-top:10px; }
footer.site a{ color:var(--mut); margin-right:16px; text-decoration:none; }
footer.site a:hover{ color:var(--ink); }