/* Shared styling for every tool under /tools/. Palette matches the portfolio index. */
:root{
  --bg:#fbfbfa; --fg:#1a1a18; --muted:#6b6b66; --line:#e4e3df;
  --card:#ffffff; --accent:#1f6f5c; --live:#1f8a68;
  --warn:#b45309; --bad:#b42318; --good:#1f8a68;
  --soft:#f4f4f1;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#131315; --fg:#eceae5; --muted:#9a978f; --line:#2b2b2f;
         --card:#1b1b1e; --accent:#5fbfa4; --live:#4fc79b;
         --warn:#e8a33d; --bad:#f07167; --good:#4fc79b; --soft:#212125; }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:880px;margin:0 auto;padding:0 24px}
a{color:var(--accent)}

.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.05em;padding:26px 0 0}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}

header.tool{padding:26px 0 34px}
h1{font-size:clamp(25px,4.4vw,35px);line-height:1.18;margin:0 0 12px;letter-spacing:-.02em}
.tag{color:var(--accent);font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;margin:0 0 16px}
.lede{font-size:17.5px;color:var(--muted);margin:0;max-width:62ch}

h2{font-size:13px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:44px 0 8px;font-weight:600}
.h2sub{color:var(--muted);font-size:14.5px;margin:0 0 20px}

.card{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:22px;margin-bottom:16px}
.card h3{margin:0 0 4px;font-size:17.5px;letter-spacing:-.01em}
.meta{font-family:var(--mono);font-size:12px;color:var(--muted);margin:0 0 12px}

.privacy{display:flex;gap:10px;align-items:flex-start;background:var(--soft);
  border:1px solid var(--line);border-radius:9px;padding:13px 15px;
  font-size:14px;color:var(--muted);margin:0 0 24px}
.privacy strong{color:var(--fg);font-weight:600}

.btn{display:inline-block;font-family:var(--mono);font-size:13.5px;text-decoration:none;
  border:1px solid var(--accent);color:var(--accent);background:none;border-radius:7px;
  padding:9px 16px;cursor:pointer}
.btn:hover:not(:disabled){background:var(--accent);color:var(--bg)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn.primary{background:var(--accent);color:var(--bg)}
.btn.primary:hover{filter:brightness(1.08)}
.btnrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

.drop{border:1.5px dashed var(--line);border-radius:11px;padding:38px 22px;text-align:center;
  background:var(--card);transition:border-color .15s,background .15s}
.drop.over{border-color:var(--accent);background:var(--soft)}
.drop p{margin:0 0 6px}
.drop .sub{color:var(--muted);font-size:14px}
input[type=file]{display:none}

table{width:100%;border-collapse:collapse;font-size:14px;margin:0}
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:9px;background:var(--card)}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);
  white-space:nowrap;vertical-align:top}
th{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);font-weight:600;background:var(--soft)}
tr:last-child td{border-bottom:none}
td.num{text-align:right;font-family:var(--mono);font-size:13px}
code,.mono{font-family:var(--mono);font-size:13px}

.pill{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  border:1px solid var(--line);border-radius:99px;padding:2px 9px;color:var(--muted)}
.pill.good{color:var(--good);border-color:var(--good)}
.pill.warn{color:var(--warn);border-color:var(--warn)}
.pill.bad{color:var(--bad);border-color:var(--bad)}

.issue{border-left:2px solid var(--line);padding:3px 0 3px 14px;margin-bottom:16px}
.issue.sev-high{border-color:var(--bad)}
.issue.sev-medium{border-color:var(--warn)}
.issue.sev-low{border-color:var(--muted)}
.issue strong{display:block;font-size:15px}
.issue .why{color:var(--muted);font-size:14.5px}
.issue .where{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:4px}

.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:12px;margin:0}
.stat div{border-left:2px solid var(--accent);padding:2px 0 2px 13px}
.stat b{display:block;font-size:21px;letter-spacing:-.01em}
.stat span{font-size:13px;color:var(--muted)}

ul.stack{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:7px}
ul.stack li{font-family:var(--mono);font-size:11.5px;color:var(--muted);
  border:1px solid var(--line);border-radius:99px;padding:3px 10px}

.hidden{display:none}
footer{border-top:1px solid var(--line);margin-top:56px;padding:30px 0 62px}
.note{font-size:13px;color:var(--muted);line-height:1.6;margin:0}