/* PhishOff brand: palette and type from the PhishOff product brief (Branding/).
   Midnight Navy #08162B, Electric Cyan #00DCEA, Lime Volt #D4FF24, Threat Coral #FF5964,
   Cloud White #F4F8FC; Space Grotesk for brand and headings, Inter for everything else.
   Rules from the brief: navy text on cyan and lime; cyan and lime never as text on white;
   coral is a threat cue, always paired with a word; visible keyboard focus. */

@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/static/fonts/inter-latin.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:600 700;font-display:swap;
  src:url(/static/fonts/space-grotesk-latin.woff2) format("woff2")}

:root{
  --navy:#08162B;--cyan:#00DCEA;--lime:#D4FF24;--coral:#FF5964;--cloud:#F4F8FC;
  /* Light surfaces (the dashboard stays restrained) */
  --bg:#F4F8FC;--panel:#FFFFFF;--fg:#08162B;--muted:#4A5B73;--line:#D6DFEA;
  --link:#08162B;--link-line:#00A9B5;
  --crit:#C2323C;--crit-bg:#FFE3E5;--high:#9A4A00;--high-bg:#FFF0DC;--watch:#4A5B73;--ok:#1E7A3C;
  --accent:#08162B;
  --head:"Space Grotesk",system-ui,sans-serif;--body:"Inter",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#08162B;--panel:#0F2440;--fg:#F4F8FC;--muted:#A9B8CC;--line:#1E3556;
  --link:#00DCEA;--link-line:#00DCEA;
  --crit:#FF5964;--crit-bg:#3A1620;--high:#FFB866;--high-bg:#3A2A12;--watch:#A9B8CC;--ok:#7CE38B;
  --accent:#00DCEA;
}}

*{box-sizing:border-box}
body{margin:0;font:400 15px/1.5 var(--body);color:var(--fg);background:var(--bg)}
h1,h2,h3,.brandtext{font-family:var(--head);font-weight:700;letter-spacing:-.01em}
h1{font-size:1.6rem;line-height:1.25;margin:.2rem 0 1rem}h2{font-size:1.15rem;margin:1.6rem 0 .5rem}
a{color:var(--link);text-decoration:underline;text-decoration-color:var(--link-line);text-decoration-thickness:2px;text-underline-offset:2px}
a:hover{text-decoration-color:var(--fg)}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:3px}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
td,.num,time{font-variant-numeric:tabular-nums}

/* Header: navy bar with the mark and the PHISHOFF wordmark */
.topbar{display:flex;gap:1.3rem;align-items:center;padding:.65rem 1rem;background:var(--navy);color:var(--cloud);flex-wrap:wrap}
.topbar a{color:var(--cloud);text-decoration:none;font-weight:500}
.topbar a.on{box-shadow:inset 0 -3px 0 var(--lime)}
.topbar a:hover{color:var(--cyan)}
.topbar .who{margin-left:auto;color:#A9B8CC;font-size:.9em}
.topbar .who a{color:var(--cloud);text-decoration:underline;text-decoration-color:var(--cyan);text-underline-offset:3px}
.logo{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none!important}
.logo img{width:30px;height:30px}
.wordmark{font-family:var(--head);font-weight:700;letter-spacing:.04em;color:var(--cloud);font-size:1.15rem}
.wordmark b{color:var(--lime);font-weight:700}

/* Tables, cards, forms */
main{padding:1.2rem 1rem;max-width:1400px;margin:0 auto}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:.45rem .55rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;color:var(--muted);font-size:.82em;text-transform:uppercase;letter-spacing:.03em}
.card{background:var(--panel);border:1px solid var(--line);border-radius:.6rem;padding:.9rem 1.1rem}
.card h2{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem}
dl{display:grid;grid-template-columns:max-content 1fr;gap:.25rem .9rem;margin:0}dt{color:var(--muted)}dd{margin:0;word-break:break-word}
input,select,textarea,button{font:inherit;padding:.45rem .6rem;border:1px solid var(--line);border-radius:.45rem;background:var(--panel);color:var(--fg)}
button,.button{cursor:pointer;display:inline-block;background:var(--lime);color:var(--navy);border:0;font-weight:600;text-decoration:none;padding:.5rem .9rem;border-radius:.45rem}
button:hover,.button:hover{filter:brightness(.95)}
button.danger{background:var(--coral);color:var(--navy)}
button.plain,.button.plain{background:transparent;color:var(--fg);border:1px solid var(--line)}
form.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.actions{display:flex;gap:.5rem;flex-wrap:wrap}.actions form{margin:0}
.counts a{margin-right:.9rem;text-decoration:none}
pre{white-space:pre-wrap;word-break:break-word;margin:0;font-size:.85em}
.scroll{overflow-x:auto}
.muted{color:var(--muted)}.bad{color:var(--crit)}.good{color:var(--ok)}

/* Status: always a word, never colour alone */
.pill{display:inline-block;padding:.05rem .55rem;border-radius:1rem;border:1px solid var(--line);font-size:.82em;font-weight:600;background:var(--panel)}
.pill.bad,.tier-critical .pill{background:var(--crit-bg);color:var(--crit);border-color:transparent}
.tier-critical{color:var(--crit);font-weight:600}.tier-high{color:var(--high);font-weight:600}.tier-watch{color:var(--watch)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}