/* StalkPhish Scanner — lean bespoke stylesheet.
   Palette lifted from stalkphish.io (brand #0779e4, accent #50bfe6, danger
   #e20404, dark #1e2321). No Bootstrap/jQuery — fast Core Web Vitals. */

/* Poppins — self-hosted (same font as stalkphish.io), served from /static/fonts
   so it stays within the strict 'self' CSP (no external font requests). */
@font-face {
  font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/static/fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/static/fonts/poppins-600.woff2') format('woff2');
}
:root {
  --brand:#0779e4; --brand-dark:#0062e6; --accent:#50bfe6;
  --danger:#e20404; --ink:#1e2321; --muted:#6b7280;
  --bg:#ffffff; --panel:#f6f8fb; --border:#e3e8ef; --footer:#1e2321;
  --crit:#e20404; --high:#f3701b; --med:#f0ad4e; --low:#28a745; --vlow:#8a94a6;
  --radius:12px; --maxw:900px;
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:var(--font); color:var(--ink); background:var(--bg);
  line-height:1.55; display:flex; flex-direction:column; min-height:100vh;
}
a { color:var(--brand); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ── Header ── */
.nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1.25rem; border-bottom:1px solid var(--border); background:#fff;
  position:sticky; top:0; z-index:10;
}
.nav img { height:38px; width:auto; display:block; }
.nav .brand { margin-right:1.75rem; }
/* Menu — Bootstrap navbar-light look (like stalkphish.io): white bar, Poppins,
   muted-dark links that darken on hover. */
.mainnav { display:flex; gap:1.75rem; margin-right:auto; }
.mainnav a { color:rgba(0,0,0,.55); font-size:1rem; font-weight:400; padding:.25rem 0;
  text-decoration:none; }
.mainnav a:hover { color:rgba(0,0,0,.7); text-decoration:none; }

/* ── Layout ── */
main { flex:1 0 auto; width:100%; max-width:var(--maxw); margin:0 auto; padding:2rem 1.25rem; }
.hero { text-align:center; margin:1rem 0 2rem; }
.hero h1 { font-size:2rem; line-height:1.2; margin:.2rem 0 .6rem; }
.hero p { color:var(--muted); max-width:620px; margin:0 auto; }
.brand { color:var(--brand); }

/* ── Scan form ── */
.card {
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.5rem; box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.card.gate h2 { margin:0 0 .3rem; font-size:1.2rem; }
.card.gate > p { margin:0 0 1rem; color:var(--muted); font-size:.95rem; }
form.scan { display:flex; flex-direction:column; gap:1rem; }
.field { display:flex; gap:.6rem; flex-wrap:wrap; }
input[type=url], input[type=text] {
  flex:1 1 320px; min-width:0; padding:.85rem 1rem; font-size:1rem;
  border:1px solid var(--border); border-radius:var(--radius); font-family:inherit;
}
input:focus { outline:2px solid var(--accent); border-color:var(--accent); }
button {
  padding:.85rem 1.5rem; font-size:1rem; font-weight:600; font-family:inherit;
  color:#fff; background:var(--brand); border:0; border-radius:var(--radius);
  cursor:pointer; transition:background .15s;
}
button:hover { background:var(--brand-dark); }
button:disabled { opacity:.6; cursor:progress; }
.hint { font-size:.85rem; color:var(--muted); }
.error { color:var(--danger); font-weight:600; min-height:1.2em; }

/* ── Results ── */
.status { display:flex; align-items:center; gap:.7rem; margin:.5rem 0 1.5rem; }
.spinner {
  width:20px; height:20px; border:3px solid var(--border); border-top-color:var(--brand);
  border-radius:50%; animation:spin 1s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.scoreblock { text-align:center; padding:1.5rem 0; }
.score { font-size:3rem; font-weight:700; line-height:1; }
.score small { font-size:1.1rem; color:var(--muted); font-weight:400; }
.verdict { display:inline-block; margin-top:.6rem; padding:.35rem .9rem; border-radius:999px;
  color:#fff; font-weight:700; letter-spacing:.02em; font-size:.9rem; }
.v-CRITICAL{background:var(--crit);} .v-HIGH{background:var(--high);}
.v-MEDIUM{background:var(--med);color:#1e2321;} .v-LOW{background:var(--low);}
.v-VERY_LOW{background:var(--vlow);} .v-TAKEN_DOWN{background:var(--ink);}
.bar { height:12px; border-radius:999px; background:var(--border); overflow:hidden; margin:1rem auto; max-width:420px; }
.bar > span { display:block; height:100%; background:var(--brand); }
.meta { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:.75rem 0; }
.chip { background:#fff; border:1px solid var(--border); border-radius:999px; padding:.25rem .7rem; font-size:.85rem; }
.chip b { color:var(--ink); }
table.breakdown { width:100%; border-collapse:collapse; margin-top:1.25rem; font-size:.9rem; }
table.breakdown th, table.breakdown td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--border); }
table.breakdown td.pts { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.breakdown tr.hit td { font-weight:600; }
.url-echo { word-break:break-all; color:var(--muted); font-size:.9rem; }
.page-title { font-size:1.1rem; font-weight:600; color:var(--ink); margin:.2rem 0; word-break:break-word; }
.page-title:empty { display:none; }
.shot { margin:1.5rem 0 0; }
.shot img { width:100%; height:auto; display:block; border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:0 2px 10px rgba(16,24,40,.10); }
.shot figcaption { margin-top:.5rem; text-align:center; }

/* ── Report layout (result page) ───────────────────────────────────────────── */
main.wide { max-width:1140px; }
.report-head {
  display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.25rem 1.5rem; margin-bottom:1.25rem;
}
.report-head .scoreblock { padding:0; text-align:left; display:flex; align-items:center; gap:1rem; }
.report-head .score { font-size:2.4rem; }
.report-head .head-meta { flex:1 1 320px; }
.head-meta .bar { margin:.2rem 0 .8rem; max-width:none; }
.head-meta .meta { justify-content:flex-start; margin:0; }
.scan-ts { color:var(--muted); font-size:.8rem; margin-top:.5rem; }

.report-grid { display:grid; grid-template-columns:1fr 320px; gap:1.25rem; align-items:start; }
.report-main { min-width:0; display:flex; flex-direction:column; gap:1.25rem; }
.report-side { display:flex; flex-direction:column; gap:1.25rem; }
.report-main .shot { margin:0; }

.panel { background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.panel-h { margin:0; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  background:var(--panel); padding:.6rem .9rem; border-bottom:1px solid var(--border); font-weight:700; }
.panel-b { padding:.9rem; }
.report-main .panel-b { padding:0; }
.report-main .panel .breakdown { margin:0; }
.report-main .panel .breakdown th, .report-main .panel .breakdown td { padding:.5rem .9rem; }

/* key/value lists (sidebar) */
.kv { display:grid; grid-template-columns:auto 1fr; gap:.4rem .8rem; margin:0; font-size:.88rem; }
.kv dt { color:var(--muted); white-space:nowrap; }
.kv dd { margin:0; word-break:break-word; text-align:right; font-variant-numeric:tabular-nums; }

/* redirect chain */
.chain { list-style:none; margin:0; padding:0; }
.chain .hop { display:flex; align-items:baseline; gap:.6rem; padding:.55rem .9rem;
  border-bottom:1px solid var(--border); font-size:.88rem; }
.chain .hop:last-child { border-bottom:0; }
.hop-url { word-break:break-all; flex:1 1 auto; min-width:0; }
.hop-loc { color:var(--muted); word-break:break-all; }
.sc { flex:0 0 auto; font-variant-numeric:tabular-nums; font-weight:700; font-size:.78rem;
  padding:.1rem .45rem; border-radius:6px; background:var(--border); color:var(--ink); }
.sc-ok { background:#e6f4ea; color:#1e7d34; }
.sc-redir { background:#fff3e0; color:#b45309; }
.sc-err { background:#fde8e8; color:var(--danger); }

/* cloaked (JS) redirect resolved by the headless render */
.redir { padding:.9rem; font-size:.88rem; }
.redir-from, .redir-to { word-break:break-all; }
.redir-from { color:var(--muted); }
.redir-to { color:var(--danger); font-weight:600; }
.redir-arrow { color:var(--muted); font-size:.8rem; margin:.35rem 0; }
.redir.decoy { border-left:3px solid var(--danger); padding-left:.75rem; }
.redir.decoy .redir-arrow { color:var(--danger); }

/* IP reputation (StalkPhish TI) — its own section after Detections */
.ipintel { padding:.9rem; }
.ipintel-confirm { color:var(--danger); font-weight:600; font-size:.9rem;
  border-left:3px solid var(--danger); padding-left:.6rem; margin-bottom:.7rem; }
.ipintel-lbl { color:var(--muted); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.03em; margin:.8rem 0 .35rem; }
.ipintel-domains { list-style:none; margin:0; padding:0; font-size:.86rem; }
.ipintel-domains li { padding:.15rem 0; word-break:break-all; font-family:var(--mono,monospace); }
.ipintel-domains li.muted { color:var(--muted); font-family:inherit; }

@media (max-width:820px){ .report-grid { grid-template-columns:1fr; } }

/* ── Beta feedback: report a false positive / issue ── */
.report-block { margin-top:1.75rem; padding-top:1.1rem; border-top:1px solid var(--border);
  text-align:center; }
.report-cta { background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:.85rem; padding:.3rem .5rem; }
.report-cta:hover, .report-cta.open { color:var(--ink); text-decoration:underline; }
.report-form { max-width:560px; margin:.75rem auto 0; text-align:left;
  background:var(--panel,#fafafa); border:1px solid var(--border); border-radius:8px; padding:1rem; }
.report-ctx { color:var(--muted); font-size:.8rem; word-break:break-all; margin:0 0 .8rem; }
.report-types { border:none; margin:0 0 .6rem; padding:0; }
.report-types legend { font-size:.8rem; color:var(--muted); text-transform:uppercase;
  letter-spacing:.03em; padding:0; margin-bottom:.4rem; }
.report-radio { display:block; font-size:.9rem; padding:.2rem 0; cursor:pointer; }
.report-comment, .report-email { width:100%; box-sizing:border-box; margin-top:.5rem;
  padding:.5rem .6rem; border:1px solid var(--border); border-radius:6px; font:inherit; }
.report-submit { margin-top:.7rem; padding:.5rem 1rem; border:none; border-radius:6px;
  background:var(--brand,#2b6cb0); color:#fff; cursor:pointer; font-size:.9rem; }
.report-submit:disabled { opacity:.6; cursor:default; }
.report-msg { font-size:.85rem; margin:.6rem 0 0; color:var(--muted); }
.report-msg.err { color:var(--danger); }
.report-ok { font-size:.9rem; color:var(--ok,#2f855a); margin:0; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ── "beta" tag (docs page + section headings) ── */
.badge-beta {
  display:inline-block; vertical-align:middle; margin-left:.4em;
  padding:.1em .55em; font-size:.6em; font-weight:700; line-height:1.6;
  letter-spacing:.05em; text-transform:uppercase; color:#fff;
  background:var(--accent); border-radius:999px;
}

/* ── Documentation page ── */
.doc { line-height:1.6; }
.doc h2 { font-size:1.3rem; margin:2rem 0 .6rem; padding-top:1.2rem; border-top:1px solid var(--border); }
.doc h2:first-of-type { border-top:none; padding-top:0; margin-top:.5rem; }
.doc h3 { font-size:1.05rem; margin:1.3rem 0 .4rem; }
.doc ul, .doc ol { padding-left:1.3rem; }
.doc li { margin:.35rem 0; }
.doc code { background:var(--panel,#f4f4f5); padding:.1rem .35rem; border-radius:4px;
  font-size:.88em; word-break:break-word; }
.doc-toc { display:flex; flex-wrap:wrap; gap:1.1rem; padding:.5rem 0 .25rem; font-size:.9rem; }
.doc-toc a { color:var(--brand,#0779e4); font-weight:600; text-decoration:none; }
.doc table { border-collapse:collapse; width:100%; font-size:.9rem; }
.doc table th, .doc table td { text-align:left; padding:.45rem .6rem; border-bottom:1px solid var(--border); }
.doc table th { color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; }
.doc-scroll { overflow-x:auto; margin:.5rem 0; }
.doc .code { background:var(--footer,#1f2430); color:#e6e6e6; padding:1rem; border-radius:8px;
  font-size:.82rem; line-height:1.5; overflow-x:auto; white-space:pre; }
.doc-note { color:var(--muted); font-size:.88rem; border-left:3px solid var(--border);
  padding-left:.75rem; margin:.8rem 0; }
.doc-apilinks { display:flex; flex-wrap:wrap; gap:1.1rem; align-items:center; margin:.6rem 0; }
.doc-apilinks .btn { background:var(--brand,#0779e4); color:#fff; padding:.55rem 1.1rem;
  border-radius:6px; font-weight:600; text-decoration:none; }
.doc-back { margin-top:2rem; }

/* ── Footer ── */
footer { flex-shrink:0; background:var(--footer); color:#fff; margin-top:3rem; }
footer .inner { max-width:var(--maxw); margin:0 auto; padding:1.5rem 1.25rem;
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
footer img { height:34px; }
footer nav a { color:#fff; margin-left:1rem; font-size:.8rem; text-transform:uppercase; font-weight:600; }
footer .copy { width:100%; color:#b0b0b0; font-size:.8rem; margin-top:.5rem; }

/* Disclaimer — bottom of the main frame, light grey, small */
.disclaimer { color:#adadad; font-size:.68rem; line-height:1.55; text-align:center;
  margin:2.5rem auto 0; padding-top:1rem; border-top:1px solid var(--border); }

@media (max-width:560px){ .hero h1{font-size:1.6rem;} }