/* Shared by every /npm/ page. Kept external deliberately: inlining the
   token block six thousand times would add ~180MB of duplicated bytes to git. */
:root{
  --void:#070C14; --bg:#0B111C; --panel:#19212F; --panel-hi:#212B3B;
  --line:#202D42; --line2:#2B3D57; --line3:#3A4F6E;
  --ink:#E1E9F4; --ink2:#BFCDDF; --dim:#93A9C6; --dim2:#6E8AAC; --dim3:#506C8E;
  --accent:#22D3EE; --accent-hi:#67E8F9; --accent-mid:#06B6D4; --accent-ink:#04121A;
  --safe:#10B981; --warn:#F59E0B; --threat:#EF4444;
  --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-9:4rem;
  --t-3:.875rem; --t-4:1rem; --t-6:1.5rem; --t-8:2.25rem;
  --hr:var(--line);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink2);
  font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:var(--t-4);line-height:1.65}
.in{max-width:52rem;margin:0 auto;padding:0 var(--sp-5)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--sp-4);top:var(--sp-4);background:var(--panel);padding:var(--sp-3);z-index:9}
header.top{border-bottom:1px solid var(--line);background:var(--void)}
header.top .in{display:flex;align-items:center;gap:var(--sp-5);padding-top:var(--sp-4);padding-bottom:var(--sp-4);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:var(--sp-2);color:var(--ink);font-weight:700;
  font-family:'Space Grotesk',sans-serif}
header.top nav{display:flex;gap:var(--sp-4);font-size:var(--t-3)}
header.top nav a{color:var(--dim)}
main{padding:var(--sp-6) 0 var(--sp-9)}
h1{font-family:'Space Grotesk',sans-serif;color:var(--ink);font-size:var(--t-8);line-height:1.2;margin:.2em 0 .4em}
/* "Is <code>some-very-long-package-name</code> safe to install?" at 2.25rem is
   wider than a phone. Headings shrink faster than body text for the same
   reason the type scale is non-linear: the big things have the furthest to
   fall. */
h1,h2,h3{overflow-wrap:break-word}
h1 code,td code,th code{overflow-wrap:anywhere}
@media(max-width:640px){h1{font-size:1.5rem}}
/* Nothing in a generated page may exceed the viewport. Tables and code blocks
   scroll inside their own box (below); everything else wraps. */
img,svg{max-width:100%;height:auto}
h2{font-family:'Space Grotesk',sans-serif;color:var(--ink);font-size:var(--t-6);margin:2em 0 .5em}
h3{color:var(--ink);font-size:1.15rem;margin:1.6em 0 .4em}
code{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.9em;
  background:var(--panel);padding:.12em .35em;border-radius:3px;color:var(--ink)}
h1 code{background:none;padding:0;font-size:.85em}
pre{background:var(--panel);padding:var(--sp-4);border-radius:6px;overflow-x:auto;
  border:1px solid var(--line)}
pre code{background:none;padding:0}
.crumbs{font-size:var(--t-3);color:var(--dim2);margin:0}
.lede{font-size:1.1rem;color:var(--dim)}
.verdict{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  background:var(--panel);border-radius:8px;padding:var(--sp-4);margin:var(--sp-5) 0;
  border-left:4px solid var(--dim3)}
.verdict .tier{font-family:'IBM Plex Mono',monospace;font-weight:700;letter-spacing:.06em}
.v-ALLOW{border-left-color:var(--safe)} .v-ALLOW .tier{color:var(--safe)}
.v-ASK{border-left-color:var(--warn)} .v-ASK .tier{color:var(--warn)}
.v-BLOCK{border-left-color:var(--threat)} .v-BLOCK .tier{color:var(--threat)}
.stamp{font-size:var(--t-3);color:var(--dim2)}
.warnbox{background:var(--panel);border-left:4px solid var(--warn);padding:var(--sp-4);
  border-radius:0 6px 6px 0;font-size:var(--t-3);color:var(--dim)}
table{width:100%;border-collapse:collapse;margin:var(--sp-4) 0;font-size:var(--t-3)}
th,td{text-align:left;padding:var(--sp-3);border-bottom:1px solid var(--line);vertical-align:top}
th[scope=row]{color:var(--dim2);font-weight:500;width:40%}
td strong,td b{color:var(--ink)}
ul.sig{list-style:none;padding:0}
ul.sig li{background:var(--panel);border-radius:6px;padding:var(--sp-4);margin-bottom:var(--sp-3)}
ul.sig p{margin:.4em 0 0}
.sev{font-family:'IBM Plex Mono',monospace;font-size:.75rem;text-transform:uppercase;
  letter-spacing:.06em;padding:.15em .5em;border-radius:3px;background:var(--panel-hi)}
.sev-critical{color:var(--threat)} .sev-warn{color:var(--warn)} .sev-info{color:var(--dim)}
.muted{color:var(--dim2);font-size:var(--t-3)}
/* A package name is arbitrary input as far as layout is concerned — these pages
   render whatever npm has. Three separate things had to be said for that not to
   force a horizontal scrollbar on a phone:
     minmax(min(16rem,100%)) — a 16rem track is WIDER than a 375px viewport once
       padding is removed, so the track itself overflowed before any content did.
     min-width:0 — flex and grid children default to min-width:auto, which means
       "never shrink below your content". A long name then pushes the row out.
     overflow-wrap:anywhere — the last resort for a name with no break
       opportunity in it at all. */
ul.grid{list-style:none;padding:0;display:grid;gap:var(--sp-2);
  grid-template-columns:repeat(auto-fill,minmax(min(16rem,100%),1fr))}
ul.grid li{display:flex;align-items:center;gap:var(--sp-2);justify-content:space-between;
  background:var(--panel);border-radius:5px;padding:var(--sp-2) var(--sp-3);font-size:var(--t-3);
  min-width:0}
ul.grid li a{min-width:0;overflow-wrap:anywhere}
ul.grid li .sev{flex:none}
footer.bot{margin-top:var(--sp-9);border-top:1px solid var(--hr)}
footer.bot .in{display:flex;gap:var(--sp-5);flex-wrap:wrap;font-size:var(--t-3);
  color:var(--dim2);padding-top:var(--sp-5);padding-bottom:var(--sp-5)}
@media(max-width:640px){.in{padding:0 var(--sp-4)}th[scope=row]{width:auto}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}