/* app.css — styles for the ScanHawk scanner page.
 *
 * External, same-origin, and NOT inlined back into app.html: /app.html is served
 * with its own stricter CSP carrying `style-src 'self'` (no 'unsafe-inline'),
 * which an inline <style> would violate. The marketing pages still use inline
 * styles and a looser policy — see the $csp map in nginx.conf. Moving a rule
 * back into the page will silently drop it in every browser.
 */
:root{
  color-scheme:dark;
  --bg:#080b10; --panel:#0f151d; --panel-2:#131a23;
  --line:#1d2530; --line-2:#27323f;
  --text:#eaf0f0; --text-2:#8d99a6; --text-3:#7d8a98;
  --green:#e11e2a; --accent-ink:#ff5b64; --blue:#1f9bf5; --blue-bright:#37b6ff;
  --danger:#ff5252; --warn:#f5a623; --safe:#54c02a;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Visible keyboard focus for every interactive control (WCAG 2.4.7). */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--green);outline-offset:2px;border-radius:6px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body{background:var(--bg);color:var(--text);font-family:var(--mono);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;padding:env(titlebar-area-height,0) 0 40px}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:
  radial-gradient(700px 500px at 82% -10%, rgba(225,30,42,.10), transparent 60%),
  radial-gradient(560px 420px at 6% 108%, rgba(31,155,245,.07), transparent 60%);}
.wrap{max-width:640px;margin:0 auto;padding:0 20px}
header{display:flex;align-items:center;gap:10px;padding:22px 0 8px}
header img{width:30px;height:30px;border-radius:7px}
header .name{font-weight:600;font-size:18px;letter-spacing:-.03em}
header .name b{color:var(--accent-ink);margin-left:-.075em}
.tm{font-size:.55em;font-weight:500;margin-left:.08em;color:inherit}
.sub{color:var(--text-2);font-size:13px;margin:2px 0 20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
label{display:block;font-size:12px;color:var(--text-2);text-transform:uppercase;letter-spacing:.12em;margin-bottom:7px}
.row{display:flex;gap:8px}
input[type=text],input[type=url]{flex:1;background:var(--panel-2);border:1px solid var(--line-2);border-radius:9px;color:var(--text);font:inherit;padding:11px 12px;min-width:0}
input::placeholder{color:var(--text-3)}
button{font:inherit;font-weight:600;cursor:pointer;border:0;border-radius:9px;padding:11px 16px;background:var(--green);color:#fff}
button.ghost{background:transparent;border:1px solid var(--line-2);color:var(--text-2)}
button:disabled{opacity:.5;cursor:default}
.aux{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.drop{margin-top:12px;border:1.5px dashed var(--line-2);border-radius:11px;padding:18px;text-align:center;color:var(--text-3);font-size:13px;transition:border-color .15s,background .15s}
.drop.over{border-color:var(--green);background:rgba(225,30,42,.06);color:var(--text-2)}
#result{margin-top:16px;display:none;border-radius:12px;border:1px solid var(--line);border-left-width:4px;padding:14px 16px;background:var(--panel-2)}
#result.DANGEROUS{border-left-color:var(--danger)} #result.SUSPICIOUS{border-left-color:var(--warn)} #result.SAFE{border-left-color:var(--safe)}
#result .verdict{font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px}
#result.DANGEROUS .verdict{color:var(--danger)} #result.SUSPICIOUS .verdict{color:var(--warn)} #result.SAFE .verdict{color:var(--safe)}
#result .score{color:var(--text-2);font-weight:500;font-size:13px}
#result .why{margin-top:8px;color:var(--text)}
#result .final{margin-top:8px;color:var(--text-3);font-size:12px;word-break:break-all}
details{margin-top:22px}
summary{cursor:pointer;color:var(--text-3);font-size:12px}
.field{margin-top:12px}
.field .hint{color:var(--text-3);font-size:11px;margin-top:4px}
#cfgStatus{margin-left:8px;color:var(--safe);font-size:12px}
.foot{margin-top:26px;color:var(--text-3);font-size:11px;text-align:center}
.badge-note{margin-top:8px;font-size:11px;color:var(--text-3)}
/* Shown whenever scans are going somewhere other than the default worker.
   Amber on the page background is ~9:1, well clear of WCAG 2.2 AA. */
.banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;
  padding:10px 12px;border:1px solid var(--warn);border-radius:10px;
  background:rgba(245,166,35,.08);color:var(--warn);font-size:13px}
.banner[hidden]{display:none}
.banner code{font-family:inherit;word-break:break-all}
.banner button{padding:6px 10px;font-size:12px}
#cfgStatus.err{color:var(--danger)}

/* "This link carries a secret" confirmation, and the Settings danger action.
   Both reuse the verdict palette so they read as part of the same language. */
.secret-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.danger-zone { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.danger-zone .hint { margin-top: 6px; }