/* ==========================================================================
   isthislinksafe.be

   Two screens: a focused tool at /, documentation at /reference. The tool
   fills the viewport until it has something to report, then compacts to make
   room for the dossier.

   Colour is rationed to one job. The entire interface is monochrome; the only
   hue on the page is the verdict itself, so the thing the reader came for is
   the only thing competing for attention.
   ========================================================================== */

:root{
  color-scheme: light;

  --bg:#ffffff;
  --raise:#f7f8fa;
  --sink:#eef0f3;
  --edge:#e2e5ea;
  --edge-soft:#eceef2;
  --ink:#0b0d10;
  --ink-2:#525b66;
  /* Muted grey has to clear 4.5:1 on the raised and sunken surfaces too, not
     just on white — it labels the check tiles and the facts panel, both of
     which sit on --raise. */
  --ink-3:#646c76;

  --high:#c02617;
  --medium:#96610b;
  --low:#1f7a4d;
  --minimal:#1f7a4d;

  --term-bg:#0f1114;
  --term-fg:#dde1e5;

  --ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;

  --bar:56px;
  --r:8px;
}

/* Dark is declared twice — system preference, then explicit choice — because
   CSS cannot share one block across a media-query boundary. Edit both. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0b0c0e;
    --raise:#141619;
    --sink:#1a1d21;
    --edge:#24282e;
    --edge-soft:#1b1e23;
    --ink:#f2f4f6;
    --ink-2:#a0a9b3;
    --ink-3:#868f99;
    --high:#f4715c;
    --medium:#e2ab53;
    --low:#4fbe84;
    --minimal:#4fbe84;
    --term-bg:#07080a;
    --term-fg:#dde1e5;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0b0c0e;
  --raise:#141619;
  --sink:#1a1d21;
  --edge:#24282e;
  --edge-soft:#1b1e23;
  --ink:#f2f4f6;
  --ink-2:#a0a9b3;
  --ink-3:#868f99;
  --high:#f4715c;
  --medium:#e2ab53;
  --low:#4fbe84;
  --minimal:#4fbe84;
  --term-bg:#07080a;
  --term-fg:#dde1e5;
}

*,*::before,*::after{box-sizing:border-box;}
body,h1,h2,h3,h4,p,ul,ol,li,dl,dd,dt,pre,figure{margin:0;padding:0;}
ul,ol{list-style:none;}

html{-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ui);
  font-size:15.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.mono{font-family:var(--mono);font-size:.92em;}

.wrap{max-width:940px;margin:0 auto;padding:0 26px;}
@media (max-width:620px){ .wrap{padding:0 18px;} }

/* ------------------------------------------------------------------ bar --- */
.bar{
  height:var(--bar);
  border-bottom:1px solid var(--edge);
  display:flex;align-items:center;
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(160%) blur(10px);
}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;}
.logo{
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;font-weight:640;font-size:15px;letter-spacing:-.02em;
}
.logo .dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--ink);flex:none;
}
.bar nav{display:flex;align-items:center;gap:4px;}
.bar nav a{
  text-decoration:none;font-size:13.5px;color:var(--ink-2);
  padding:6px 11px;border-radius:6px;
}
.bar nav a:hover{background:var(--raise);color:var(--ink);}
.bar nav a[aria-current]{color:var(--ink);font-weight:560;}

.toggle{
  width:30px;height:30px;margin-left:6px;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--edge);border-radius:7px;
  color:var(--ink-2);cursor:pointer;flex:none;
}
.toggle:hover{color:var(--ink);border-color:var(--ink-3);}
.toggle svg{width:14px;height:14px;display:block;}
.toggle .to-light{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .toggle .to-light{display:block;}
  :root:not([data-theme="light"]) .toggle .to-dark{display:none;}
}
:root[data-theme="dark"] .toggle .to-light{display:block;}
:root[data-theme="dark"] .toggle .to-dark{display:none;}
:root[data-theme="light"] .toggle .to-light{display:none;}
:root[data-theme="light"] .toggle .to-dark{display:block;}

/* ---------------------------------------------------------------- stage --- */
/* Full screen until the tool has something to say, then it steps aside. */
.stage{
  min-height:calc(100vh - var(--bar));
  display:grid;place-items:center;
  padding:40px 0 64px;
  text-align:center;
}
.stage.compact{
  min-height:0;place-items:start center;
  padding:40px 0 34px;
  border-bottom:1px solid var(--edge);
}
.stage h1{
  font-size:clamp(31px,5.2vw,47px);
  font-weight:680;letter-spacing:-.035em;line-height:1.05;
}
.stage.compact h1{font-size:clamp(23px,3vw,28px);}
.kicker{
  font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:16px;
}
.stage.compact .kicker{margin-bottom:11px;}
.sub{
  margin:15px auto 0;max-width:52ch;
  color:var(--ink-2);font-size:16px;
}
.stage.compact .sub{display:none;}

.entry{margin-top:30px;}
.stage.compact .entry{margin-top:20px;}
.field{
  display:flex;align-items:center;gap:9px;
  max-width:610px;margin:0 auto;
  background:var(--bg);
  border:1px solid var(--edge);border-radius:11px;
  padding:6px 6px 6px 15px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:border-color .12s,box-shadow .12s;
}
.field:focus-within{
  border-color:var(--ink-3);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--ink) 8%, transparent);
}
.field svg{width:16px;height:16px;color:var(--ink-3);flex:none;}
.field input{
  flex:1;min-width:0;border:0;background:none;
  font-family:var(--mono);font-size:14.5px;color:var(--ink);
  padding:11px 0;
}
.field input:focus{outline:0;}
.field input::placeholder{color:var(--ink-3);}
.field button{
  font-family:var(--ui);font-size:14px;font-weight:600;
  padding:10px 20px;border:0;border-radius:7px;cursor:pointer;
  background:var(--ink);color:var(--bg);white-space:nowrap;
  transition:opacity .12s;
}
.field button:hover{opacity:.85;}
.field button[disabled]{opacity:.5;cursor:progress;}
@media (max-width:520px){
  .field{flex-wrap:wrap;padding:10px;}
  .field input{flex:1 1 0;}
  .field button{flex:1 0 100%;margin-top:8px;padding:12px 0;}
}

.samples{
  margin-top:14px;display:flex;flex-wrap:wrap;gap:6px;
  justify-content:center;
}
.samples button{
  font-family:var(--mono);font-size:11.5px;
  padding:5px 10px;border-radius:20px;cursor:pointer;
  background:var(--raise);border:1px solid var(--edge);color:var(--ink-2);
}
.samples button:hover{border-color:var(--ink-3);color:var(--ink);}
.hint{margin-top:18px;font-size:13px;color:var(--ink-3);}
.stage.compact .hint{display:none;}
.alert{
  margin:13px auto 0;max-width:610px;
  padding:10px 14px;border-radius:8px;
  background:var(--sink);border:1px solid var(--edge);
  font-size:13.5px;color:var(--ink);text-align:left;
}

/* -------------------------------------------------------------- dossier --- */
.dossier{padding:34px 0 56px;}

.verdict{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:26px;flex-wrap:wrap;
  padding-bottom:22px;border-bottom:1px solid var(--edge);
}
.verdict .subject{min-width:0;}
.verdict .domain{
  font-size:clamp(24px,3.4vw,33px);
  font-weight:660;letter-spacing:-.032em;line-height:1.1;
  overflow-wrap:anywhere;
}
.verdict .full{
  margin-top:6px;font-family:var(--mono);font-size:12.5px;
  color:var(--ink-3);overflow-wrap:anywhere;max-width:62ch;
}
.readout{text-align:right;flex:none;}
.readout .num{
  font-size:52px;font-weight:700;letter-spacing:-.05em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.readout .num i{font-style:normal;font-size:17px;color:var(--ink-3);font-weight:500;}
.readout .band{
  margin-top:4px;font-size:13px;font-weight:640;
  letter-spacing:.02em;
}
.readout .conf{margin-top:3px;font-size:12px;color:var(--ink-3);}
@media (max-width:560px){
  .verdict{flex-direction:column;gap:16px;}
  .readout{text-align:left;}
}

.is-high{color:var(--high);}
.is-medium{color:var(--medium);}
.is-low{color:var(--low);}
.is-minimal{color:var(--minimal);}

/* Seven fixed slots — the spine of the result. */
.tiles{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:8px;margin-top:20px;
}
@media (max-width:1040px){ .tiles{grid-template-columns:repeat(4,minmax(0,1fr));} }
@media (max-width:860px){ .tiles{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:520px){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr));} }
.tile{
  border:1px solid var(--edge);border-radius:var(--r);
  padding:11px 12px 12px;background:var(--raise);
  min-width:0;
}
.tile .n{
  display:flex;align-items:center;gap:6px;
  font-size:11px;color:var(--ink-3);margin-bottom:5px;
}
.tile .n::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--ink-3);
}
.tile.is-pass .n::before{background:var(--low);}
.tile.is-flag .n::before{background:var(--high);}
.tile .v{
  font-size:13.5px;font-weight:560;letter-spacing:-.01em;
  overflow-wrap:anywhere;
}
.tile.is-flag .v{color:var(--high);}
.tile.is-unknown .v{color:var(--ink-3);font-weight:500;}

.split{
  display:grid;grid-template-columns:minmax(0,1fr) 268px;
  gap:34px;margin-top:30px;align-items:start;
}
@media (max-width:820px){ .split{grid-template-columns:minmax(0,1fr);gap:26px;} }

.h{
  font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;
}
.evidence + .evidence{margin-top:26px;}

.ev{
  display:grid;grid-template-columns:44px minmax(0,1fr);
  gap:3px 12px;align-items:baseline;
  padding:12px 0;border-top:1px solid var(--edge-soft);
}
.ev:last-child{border-bottom:1px solid var(--edge-soft);}
.ev .p{
  font-family:var(--mono);font-size:12px;font-weight:600;
  font-variant-numeric:tabular-nums;text-align:right;color:var(--ink-3);
}
.ev .p.cost{color:var(--high);}
.ev .p.credit{color:var(--low);}
.ev .t{font-size:15px;letter-spacing:-.006em;}
.ev .d{grid-column:2;font-size:13.5px;color:var(--ink-2);}

.facts{
  border:1px solid var(--edge);border-radius:var(--r);
  background:var(--raise);padding:4px 16px;
}
.facts div{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--edge-soft);
}
.facts div:last-child{border-bottom:0;}
.facts dt{font-size:12.5px;color:var(--ink-3);flex:none;}
.facts dd{
  font-family:var(--mono);font-size:12px;text-align:right;
  overflow-wrap:anywhere;min-width:0;
}
.facts dd.empty{color:var(--ink-3);}

.hops{margin-top:22px;}
.hops li{
  display:grid;grid-template-columns:22px minmax(0,1fr) auto;
  gap:10px;align-items:baseline;
  padding:7px 0;border-top:1px solid var(--edge-soft);
  font-family:var(--mono);font-size:12px;color:var(--ink-2);
  overflow-wrap:anywhere;
}
.hops li span:first-child,.hops li span:last-child{color:var(--ink-3);}

.caveat{
  margin-top:30px;padding:14px 16px;border-radius:var(--r);
  background:var(--sink);
  font-size:13.5px;color:var(--ink-2);max-width:76ch;
}

/* ---------------------------------------------------------------- recent -- */
.recent{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  padding:16px 0 0;font-size:12.5px;
}
.recent .h{margin:0 4px 0 0;}
.recent span.i{
  display:inline-flex;align-items:center;gap:7px;
  padding:3px 9px;border:1px solid var(--edge);border-radius:20px;
  color:var(--ink-2);font-family:var(--mono);font-size:11.5px;
}
.recent b{font-weight:600;font-variant-numeric:tabular-nums;}

/* ------------------------------------------------------------- reference -- */
.doc{padding:44px 0 70px;}
.doc h1{
  font-size:clamp(28px,4vw,38px);font-weight:680;
  letter-spacing:-.035em;line-height:1.08;
}
.doc .sub{margin:14px 0 0;text-align:left;max-width:60ch;}
.doc section{margin-top:46px;scroll-margin-top:calc(var(--bar) + 16px);}
.doc h2{
  font-size:20px;font-weight:660;letter-spacing:-.025em;
  padding-bottom:10px;border-bottom:1px solid var(--edge);
}
.doc p.lead{margin-top:14px;color:var(--ink-2);max-width:64ch;font-size:15px;}

/* Divides a long section without earning a rule of its own. */
.doc h3.sub-h{
  margin-top:28px;font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}

.steps{margin-top:20px;display:grid;gap:8px;}
.steps li{
  display:grid;grid-template-columns:26px minmax(0,1fr);
  gap:14px;align-items:baseline;
  border:1px solid var(--edge);border-radius:var(--r);
  padding:14px 16px;background:var(--raise);
}
.steps li b{
  font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--ink-3);
}
.steps li strong{display:block;font-size:14.5px;font-weight:620;margin-bottom:3px;}
.steps li span{font-size:14px;color:var(--ink-2);}

.deck{
  margin-top:20px;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
}
@media (max-width:640px){ .deck{grid-template-columns:1fr;} }
.deck article{
  border:1px solid var(--edge);border-radius:var(--r);
  padding:15px 16px;
}
.deck h3{font-size:14.5px;font-weight:620;letter-spacing:-.012em;}
.deck .src{
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
  margin:3px 0 8px;
}
.deck p{font-size:13.5px;color:var(--ink-2);}

.weights{margin-top:20px;}
.wgroup + .wgroup{margin-top:20px;}
.wgroup h3{
  font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);
  padding-bottom:7px;border-bottom:1px solid var(--edge);
}
.wrow{
  display:grid;grid-template-columns:minmax(0,1fr) 108px 48px;
  gap:16px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--edge-soft);
  font-size:14px;
}
@media (max-width:620px){
  .wrow{grid-template-columns:minmax(0,1fr) 44px;gap:10px;}
  .wrow .track{display:none;}
}
.wrow .lbl{color:var(--ink-2);}
.wrow .track{height:5px;background:var(--sink);border-radius:3px;overflow:hidden;}
.wrow .track i{display:block;height:100%;border-radius:3px;background:var(--ink-3);}
.wrow .track i.cost{background:var(--high);}
.wrow .track i.credit{background:var(--low);}
.wrow .n{
  font-family:var(--mono);font-size:12.5px;font-weight:600;
  font-variant-numeric:tabular-nums;text-align:right;
}
.wrow .n.cost{color:var(--high);}
.wrow .n.credit{color:var(--low);}

.scale{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px;}
.scale div{
  border:1px solid var(--edge);border-radius:var(--r);
  padding:9px 14px;min-width:108px;
}
.scale b{display:block;font-size:12.5px;font-weight:640;}
.scale span{font-family:var(--mono);font-size:12px;color:var(--ink-3);}

.aside{
  margin-top:22px;padding:14px 16px;border-radius:var(--r);
  background:var(--sink);font-size:14px;color:var(--ink-2);max-width:74ch;
}

.numbered{margin-top:20px;counter-reset:n;}
.numbered li{
  display:grid;grid-template-columns:26px minmax(0,1fr);
  gap:14px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--edge-soft);
  max-width:82ch;
}
.numbered li::before{
  counter-increment:n;content:counter(n,decimal-leading-zero);
  font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
}
.numbered li:last-child{border-bottom:0;}
.numbered p{font-size:14.5px;color:var(--ink-2);}

.term{
  margin-top:20px;background:var(--term-bg);
  border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;
}
.term header{
  padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.07);
  font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:#7c848d;
}
.term pre{
  padding:15px 16px;overflow-x:auto;white-space:pre;
  font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--term-fg);
}
.term .p{color:#4fbe84;}
.term .f{color:#7c848d;}
.term .k{color:#d5b262;}
.term .s{color:#8fbf9f;}

/* ---------------------------------------------------------------- footer -- */
.foot{
  border-top:1px solid var(--edge);
  padding:22px 0 30px;font-size:12.5px;color:var(--ink-3);
}
.foot p{max-width:78ch;}
.foot .meta{
  margin-top:11px;display:flex;flex-wrap:wrap;gap:6px 18px;
  justify-content:space-between;
}
.foot a{color:var(--ink-2);}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;}
}