/* nick.londal.co — security research site, set as one terminal session:
   every block is a command ($ …) and what it printed; the prompt stays at the bottom.
   No inline styles anywhere (the CSP is style-src 'self'); everything is here. */

@font-face{
  font-family:"JetBrains Mono";
  src:url("/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight:100 800;font-style:normal;font-display:swap;
}

/* ---- tokens: dark is the default; theme.js sets data-theme ---- */
:root{
  color-scheme:dark;
  --bg:#0b0d13;
  --bg-2:#12151e;          /* fields, raised bits */
  --bg-3:#1a1e2b;          /* inline code */
  --line:#232838;
  --line-2:#363d51;
  --fg:#dfe2ec;
  --dim:#9aa1b4;
  --faint:#70788f;
  --accent:#93a3ff;        /* iris: the prompt colour; sits clear of the severity scale */
  --accent-rgb:147,163,255;
  --on-accent:#0b0d13;
  --bad:#ff8a80;
  --crit:#ff6b6b;--high:#ff9a4d;--med:#f4c24d;--low:#5fd38d;
  --accent-2:#5ee6d0;      /* mint: the far end of the banner's gradient */
  --glow:0 0 18px color-mix(in srgb,currentColor 55%,transparent);
  --dot:rgba(147,163,255,.10);--dot-lit:rgba(147,163,255,.75);
  --scan:rgba(0,0,0,.34);--scan-lit:rgba(160,175,255,.055);--vignette:rgba(0,0,0,.62);--halo:rgba(147,163,255,.10);
  --bleed:.6px 0 rgba(255,60,110,.28),-.6px 0 rgba(60,220,255,.28),0 0 7px color-mix(in srgb,currentColor 38%,transparent);

  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --cols:112ch;            /* the width of the "window" */
  --pad:1.5rem;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f3f2ee;
  --bg-2:#fbfaf7;
  --bg-3:#e6e5df;
  --line:#d9d7cf;
  --line-2:#bfbdb3;
  --fg:#1b1d24;
  --dim:#4d525f;
  --faint:#737887;
  --accent:#3346c8;
  --accent-rgb:51,70,200;
  --on-accent:#ffffff;
  --bad:#c0392b;
  --crit:#c62828;--high:#c2500c;--med:#946200;--low:#1c7c43;
  --accent-2:#0c8f7c;
  --glow:none;
  --dot:rgba(27,29,36,.09);--dot-lit:rgba(51,70,200,.6);
  --scan:rgba(20,22,40,.06);--scan-lit:rgba(255,255,255,.10);--vignette:rgba(20,22,40,.22);--halo:rgba(51,70,200,.07);
  --bleed:.5px 0 rgba(220,40,90,.18),-.5px 0 rgba(0,150,200,.18);
}
/* "theme hacker": green phosphor on black */
:root[data-theme="hacker"]{
  color-scheme:dark;
  --bg:#020703;
  --bg-2:#06110a;
  --bg-3:#0a1c10;
  --line:#103018;
  --line-2:#1b4d28;
  --fg:#3cf26a;
  --dim:#2cba50;
  --faint:#1f8f3c;
  --accent:#c8ff4d;
  --accent-rgb:200,255,77;
  --accent-2:#19e6a0;
  --on-accent:#020703;
  --bad:#ff5f56;
  --dot:rgba(60,242,106,.10);--dot-lit:rgba(60,242,106,.8);
  --scan:rgba(0,0,0,.38);--scan-lit:rgba(60,242,106,.045);--vignette:rgba(0,0,0,.7);--halo:rgba(60,242,106,.08);
  --bleed:0 0 8px color-mix(in srgb,currentColor 50%,transparent);
}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--line-2) transparent;scrollbar-width:thin;
  scroll-padding:1.25rem 0}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--mono);
  font-size:.9375rem;
  line-height:1.7;
  font-variant-ligatures:none;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-size:inherit;font-weight:600;line-height:1.4;margin:0}
p{margin:0 0 1rem}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-2);text-decoration-thickness:1px;
  text-underline-offset:3px}
/* links and buttons answer the pointer in reverse video, as a terminal selection would */
a:hover{background:var(--accent);color:var(--on-accent);text-decoration-color:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent);color:var(--on-accent)}
button,input,textarea{font-family:var(--mono)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

/* ---- behind the text: a faint dot grid and a halo at the top, on every page ---- */
body::before,body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
body::before{background:
  radial-gradient(ellipse 70% 45% at 50% -8%,var(--halo),transparent 70%),
  radial-gradient(circle,var(--dot) 1px,transparent 1.5px) 0 0/24px 24px}

/* ---- the home page is a CRT (body.crt). Advisories and the editor are left plain, for reading.
   Scanlines and a vignette over everything, a little colour
   bleed and phosphor glow on the text, and the grid lighting up around the pointer (cli.js sets
   --mx/--my). ---- */
.crt::after{background:radial-gradient(circle,var(--dot-lit) 1px,transparent 1.6px) 0 0/24px 24px;opacity:0;transition:opacity .5s;
  -webkit-mask-image:radial-gradient(circle 190px at var(--mx,50%) var(--my,50%),#000,transparent);
  mask-image:radial-gradient(circle 190px at var(--mx,50%) var(--my,50%),#000,transparent)}
.lit .crt::after{opacity:1}
:root:has(.crt)::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;background:
  repeating-linear-gradient(to bottom,var(--scan) 0 2px,var(--scan-lit) 2px 4px),
  radial-gradient(ellipse at 50% 50%,transparent 52%,var(--vignette) 128%);
  box-shadow:inset 0 0 7rem var(--vignette)}
.crt main{text-shadow:var(--bleed)}
.crt a:hover,.crt ::selection{text-shadow:none}
/* every load of the home page: the screen switches on, then prints a short boot log (cli.js) before
   the session starts */
.boot .crt main{visibility:hidden}
.bootlog{position:fixed;inset:0;z-index:80;margin:0;padding:clamp(1.5rem,5vw,3rem) max(var(--pad),calc((100vw - var(--cols)) / 2));
  background:var(--bg);color:var(--dim);font:inherit;font-size:.875rem;line-height:1.75;white-space:pre-wrap;overflow:hidden;
  text-shadow:var(--bleed);transition:opacity .25s}
.bootlog.off{opacity:0}
.bootlog .b-h{color:var(--fg);font-weight:600}
.bootlog .b-ok{color:var(--accent-2)}
.bootlog .b-t{color:var(--faint)}
.boot .crt{transform-origin:50% 50vh;animation:power-on .7s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes power-on{
  0%{opacity:0;transform:scale(1,.004);filter:brightness(4)}
  35%{opacity:1;transform:scale(1,.004);filter:brightness(4)}
  70%{transform:scale(1,1);filter:brightness(1.6)}
  100%{transform:none;filter:none}}
.motd{margin:0;color:var(--faint);font-size:.8125rem}
.motd:empty{display:none}
.motd b{font-weight:400;color:var(--accent-2)}

.wrap{max-width:calc(var(--cols) + 2 * var(--pad));margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-999px;top:.5rem;z-index:100;background:var(--accent);color:var(--on-accent);
  padding:.4rem .7rem;text-decoration:none}
.skip:focus{left:.5rem}
.muted{color:var(--dim)}
.note{color:var(--faint);margin:1.5rem 0 0}
.note::before{content:"# "}


/* ---- a command and its output ---- */
.sec,.doc{padding:2.25rem 0 0}
.cmd{margin:0 0 1rem;font-weight:600;color:var(--fg);overflow-wrap:anywhere}
.ps{color:var(--accent)}
.cmd-note{font-weight:400;color:var(--faint);margin-left:1ch}
/* The session plays as you scroll (cli.js): a command waits at its prompt, is typed, then its
   output fills in. Held back only when scripts run (html.js, set by theme.js); space is kept so
   nothing shifts. */
.js .cmd:not(.done):not(code)~*{opacity:0}
/* a prompt is not printed until the command before it has finished */
.js .cmd:not(.done):not(.next):not(code){visibility:hidden}
.js .cmd:not(.done):not(.pending):not(code) .cmd-t,.js .cmd:not(.done):not(code) .cmd-note{visibility:hidden}
.out-wait{opacity:0}
.cmd.next.pending .cmd-t::after,.cmd-t.typing::after,.cli-in:not(:focus-within) .cli-ps::after{content:"";display:inline-block;width:1ch;height:1.15em;
  margin-left:.3ch;vertical-align:-.22em;background:var(--accent);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.sec-b{min-width:0}
.sec-b>p,.adv-body>p,.adv-summary{max-width:80ch}
.sec-b>:last-child{margin-bottom:0}

/* ---- whoami: the banner ---- */
.hero{padding-top:clamp(1.75rem,5vw,3rem)}
#main{padding-top:clamp(1rem,3vw,2rem)}
.banner{margin:0 0 1.75rem}
.banner{--px:min(1.3rem,calc((100vw - 2 * var(--pad)) / 48));font-size:1rem;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.banner .bw{display:block}
.banner .bw+.bw{margin-top:var(--px)}
.banner .br{display:flex;height:var(--px)}
/* each pixel is a tile carrying its letter; .f flips it over to reverse video for a moment */
.banner i{flex:0 0 var(--px);height:var(--px);font-style:normal;font-weight:700;font-size:calc(var(--px) * .8);
  line-height:var(--px);text-align:center;color:var(--c,var(--fg));text-shadow:var(--glow);backface-visibility:hidden}
.banner i.sc{color:var(--faint);text-shadow:none}
.banner i.f{animation:tile-flip 1.5s cubic-bezier(.3,.1,.3,1) both}
@keyframes tile-flip{
  0%{transform:perspective(6em) rotateX(0)}
  9.99%{transform:perspective(6em) rotateX(90deg);background:transparent;color:var(--c,var(--fg))}
  10%{transform:perspective(6em) rotateX(-90deg);background:var(--c,var(--accent));color:var(--on-accent);text-shadow:none}
  20%,80%{transform:perspective(6em) rotateX(0);background:var(--c,var(--accent));color:var(--on-accent);text-shadow:none;
    box-shadow:0 0 14px color-mix(in srgb,var(--c,var(--accent)) 60%,transparent)}
  89.99%{transform:perspective(6em) rotateX(90deg);background:var(--c,var(--accent));color:var(--on-accent);text-shadow:none}
  90%{transform:perspective(6em) rotateX(-90deg);background:transparent;color:var(--c,var(--fg))}
  100%{transform:perspective(6em) rotateX(0)}}
@keyframes tile-calm{0%,100%{background:transparent}10%,80%{background:var(--c,var(--accent));color:var(--on-accent);text-shadow:none}}
@media (prefers-reduced-motion:reduce){.banner i.f{animation-name:tile-calm;animation-duration:1.5s !important}}
.lede{color:var(--fg)}

/* ---- ls -l advisories/ ---- */
.adv{list-style:none;margin:0;padding:0}
.adv-item{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 2ch;padding:.5rem 0}
.adv-when{display:flex;align-items:baseline;gap:2ch;color:var(--faint);white-space:nowrap}
.adv-item h3{font-weight:600}
.adv-item h3 a{text-decoration:none}
.adv-item h3 a::after{content:"";position:absolute;inset:0}      /* the whole row opens the advisory */
.adv-item:hover h3 a{background:var(--accent);color:var(--on-accent)}
.adv-sum{color:var(--dim);margin:.15rem 0 .25rem}
.adv-sum a,.adv-item .cveref{position:relative;z-index:1}
.adv-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 2ch;color:var(--faint);font-size:.8125rem}
.adv-meta .cve{display:inline-flex;flex-wrap:wrap;gap:.2rem 2ch}
.adv-meta .cve a{color:var(--dim);text-decoration:none}
.adv-meta .class{color:var(--accent)}
.empty{color:var(--dim)}
.empty p{margin:0}
.empty .empty-h{color:var(--fg)}
.empty .empty-h::before{content:"total 0\A";white-space:pre;color:var(--faint)}

/* ---- cat about.txt / contact.txt ---- */
.elsewhere{display:flex;flex-wrap:wrap;gap:.3rem 3ch;color:var(--dim)}
.kv{display:grid;grid-template-columns:9ch minmax(0,1fr);gap:.35rem 2ch;margin:1.1rem 0 0}
.kv dt{color:var(--faint)}
.kv dd{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 2ch;min-width:0}
.fpr{color:var(--dim)}
code.cmd{font-weight:400;margin:0;color:var(--dim)}
code.cmd::before{content:"$ ";color:var(--accent)}

/* small bracketed controls: [copy] [save draft] */
.copy,.btn,.chip,.md-tab{font-size:.8125rem;line-height:1.5;cursor:pointer;color:var(--dim);background:none;border:0;
  padding:0 .2ch;text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap}
.copy::before,.btn::before,.chip::before,.md-tab::before{content:"[";color:var(--faint);margin-right:.4ch}
.copy::after,.btn::after,.chip::after,.md-tab::after{content:"]";color:var(--faint);margin-left:.4ch}
.copy:hover,.btn:hover,.chip:hover,.md-tab:hover{background:var(--accent);color:var(--on-accent)}
.copy:hover::before,.copy:hover::after,.btn:hover::before,.btn:hover::after,
.chip:hover::before,.chip:hover::after,.md-tab:hover::before,.md-tab:hover::after{color:var(--on-accent)}
.copy.done{color:var(--low)}
.btn{color:var(--fg);font-size:.875rem}
.btn.ghost{color:var(--dim)}
.btn.primary{color:var(--accent);font-weight:700}
.btn.danger{color:var(--bad)}
.btn.danger:hover{background:var(--bad)}
.btn:disabled{opacity:.5;cursor:default;background:none;color:var(--dim)}

/* ---- what typed commands print, at the end of the page ---- */
.session:not(:empty){padding:2.25rem 0 0}
.session p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--dim)}
.session .t-cmd{color:var(--fg);font-weight:600;margin-top:1rem}
.session .t-cmd:first-child{margin-top:0}
.session .t-cmd::before{content:"$ ";color:var(--accent)}
.session .t-err{color:var(--bad)}
.session .t-k{color:var(--fg)}
.session a{color:var(--fg)}
.session a:hover{color:var(--on-accent)}

/* ---- the prompt: the last line of the page, where whatever you type goes ---- */
.cli{margin-top:1.5rem}
.cli-in{display:flex;align-items:center;gap:1ch;margin:0}
.cli-ps{color:var(--accent);font-weight:600;white-space:nowrap;cursor:text}
.cli-user{font-weight:400;color:var(--faint)}
.cli-in input{flex:1;min-width:0;background:none;border:0;outline:0;padding:.3rem 0;color:var(--fg);
  font-size:.9375rem;caret-color:var(--accent)}
.cli-in input::placeholder{color:var(--faint)}

/* ---- the last line ---- */
.foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.25rem 2rem;
  margin-top:3.5rem;padding:1.75rem 0 2.25rem;border-top:1px dashed var(--line-2)}
.mark{color:var(--faint);line-height:0}
.mark svg{width:84px;height:auto;display:block}
.foot-meta{display:flex;flex-wrap:wrap;gap:.3rem 3ch;font-size:.8125rem;color:var(--faint)}
.foot-meta a{color:var(--dim);text-decoration:none}

/* ===== cat advisories/<slug>.md, nvd show <cve> ===== */
.back{margin:2.5rem 0 0;font-size:.8125rem}
.back a{color:var(--dim);text-decoration:none}
.advisory-full{min-width:0}
.advisory-full>.adv-meta{margin-bottom:.75rem}
.adv-title{font-size:clamp(1.25rem,3.4vw,1.75rem);font-weight:700;line-height:1.25;letter-spacing:-.01em;margin:0 0 1rem;
  text-wrap:balance}
.adv-summary{color:var(--dim);margin:0 0 1.5rem}
.adv-detail{display:grid;grid-template-columns:11ch minmax(0,1fr);gap:.3rem 2ch;margin:0 0 1.5rem;padding:.85rem 0;
  border-top:1px dashed var(--line-2);border-bottom:1px dashed var(--line-2)}
.adv-detail dt{color:var(--faint)}
.adv-detail dd{margin:0;min-width:0}
/* the headings of the page, drawn as a tree */
.toc{display:flex;flex-direction:column;margin:0 0 1.75rem;font-size:.8125rem;line-height:1.55}
.toc[hidden]{display:none}
.toc::before{content:".";color:var(--faint)}
.toc a{color:var(--dim);text-decoration:none;align-self:flex-start}
.toc a::before{content:"├── ";color:var(--line-2)}
.toc a.l3::before{content:"│   ├── "}
.toc a:last-child::before{content:"└── "}
.toc a.l3:last-child::before{content:"    └── "}
.toc a:hover::before{color:var(--on-accent)}

.adv-body h2,.adv-body h3,.adv-body h4{margin:2.25rem 0 .75rem;color:var(--fg);font-weight:700}
/* the renderer shifts headings down one level (h1 is the title), so "##" in the source is an h3 */
.adv-body h2::before{content:"# ";color:var(--accent);font-weight:400}
.adv-body h3::before{content:"## ";color:var(--accent);font-weight:400}
.adv-body h4::before{content:"### ";color:var(--accent);font-weight:400}
.adv-body>:first-child{margin-top:0}
.adv-body p{margin:0 0 1rem}
.adv-body ul,.adv-body ol{margin:0 0 1rem;padding-left:3ch;max-width:80ch}
.adv-body ul{list-style:"- "}
.adv-body li{margin:.2rem 0}
.adv-body li::marker{color:var(--faint)}
.adv-body a{text-decoration-color:var(--accent)}
.adv-body code{background:var(--bg-3);padding:.05em .5ch}
.adv-body pre{position:relative;background:var(--bg-2);border:1px solid var(--line);border-left:2px solid var(--accent);
  padding:.9rem 1.1rem;overflow:auto;margin:1.25rem 0;font-size:.8125rem;line-height:1.6}
.adv-body pre[data-lang]::before{content:attr(data-lang);display:block;margin:-.2rem 0 .5rem;font-size:.72rem;color:var(--faint)}
.adv-body pre code{background:none;padding:0}
.adv-body pre .copy{position:absolute;top:.5rem;right:.6rem;opacity:0}
.adv-body pre:hover .copy,.adv-body pre .copy:focus-visible,.adv-body pre .copy.done{opacity:1}
@media (hover:none){.adv-body pre .copy{opacity:1}}
.adv-body blockquote{margin:1.25rem 0;padding:0 0 0 2ch;border-left:2px solid var(--line-2);color:var(--dim)}
.adv-body blockquote>:last-child{margin-bottom:0}
.adv-body hr{border:0;border-top:1px dashed var(--line-2);margin:2rem 0}
.adv-body del{color:var(--faint)}
.tbl{overflow-x:auto;margin:1.25rem 0;border:1px solid var(--line)}
.tbl table{border-collapse:collapse;width:100%;font-size:.875rem}
.tbl th,.tbl td{text-align:left;padding:.4rem 1.5ch;border-top:1px solid var(--line);vertical-align:top}
.tbl th{border-top:0;font-weight:400;color:var(--faint);background:var(--bg-2);white-space:nowrap}
.tbl .ta-c{text-align:center}
.tbl .ta-r{text-align:right}
.anchor{margin-left:1ch;color:var(--faint);text-decoration:none;font-weight:400;opacity:0}
.adv-body h2:hover .anchor,.adv-body h3:hover .anchor,.anchor:focus-visible{opacity:1}
.adv-body :target{color:var(--accent)}
.draft-bar{margin:0 0 1.5rem;padding:.6rem 1.5ch;border:1px dashed var(--med);color:var(--dim)}
.draft-bar strong{color:var(--med)}

.refs{margin-top:2.25rem;padding-top:1.5rem;border-top:1px dashed var(--line-2)}
.refs h2{margin:0 0 .6rem}
.refs h2::before{content:"## ";color:var(--accent);font-weight:400}
.reflist{list-style:"- ";margin:0;padding-left:2ch;font-size:.875rem}
.reflist li{margin:.3rem 0}
.reflist li::marker{color:var(--faint)}
.refs-ext a{word-break:break-all;color:var(--dim)}

/* reading progress on advisory pages (main.js sets the scale) */
.progress{position:fixed;left:0;right:0;top:0;z-index:49;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* attached disclosure PDF + hover preview tile */
.pdfref{position:relative;display:inline-flex;align-items:baseline;gap:2ch;flex-wrap:wrap;margin:0 0 1.75rem}
.pdf-dl{text-decoration:none;display:inline-flex;align-items:baseline;gap:1ch;font-weight:600}
.pdf-ico{font-size:.75rem;font-weight:700;color:var(--on-accent);background:var(--accent);padding:0 .6ch}
.pdf-dl:hover .pdf-ico{background:var(--on-accent);color:var(--accent)}
.pdf-meta{font-size:.8125rem;color:var(--faint)}
.pdfcard,.cvecard{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:40;
  background:var(--bg-2);border:1px solid var(--line-2);box-shadow:6px 6px 0 rgba(0,0,0,.35)}
.pdfcard{width:min(300px,82vw);padding:.55rem}
.pdfref:hover .pdfcard,.pdfref:focus-within .pdfcard,
.cveref:hover .cvecard,.cveref:focus-within .cvecard{display:block}
.pdfpage{display:block;position:relative;overflow:hidden;min-height:146px;
  background:#f6f5f1;color:#1a1a1a;padding:.75rem .8rem}
.pdfpage::after{content:"";position:absolute;top:0;right:0;width:0;height:0;border-style:solid;
  border-width:0 15px 15px 0;border-color:transparent #d9d8d2 transparent transparent}
.pdfpage-tag{display:block;font-size:.6rem;color:#3346c8;margin-bottom:.45rem}
.pdfpage-title{display:block;font-size:.8rem;font-weight:700;line-height:1.3;color:#141414;margin-bottom:.45rem}
.pdfpage-text{font-size:.66rem;line-height:1.55;color:#4a4a4a;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.pdfcard-meta{display:block;font-size:.66rem;color:var(--faint);margin-top:.5rem;word-break:break-all}

/* ===== CVE hover card + severity ===== */
.cveref{position:relative;display:inline-block}
.cveref>a{white-space:nowrap}
.cvecard{width:min(44ch,84vw);padding:.75rem 1.5ch;font-size:.8125rem;font-weight:400;line-height:1.55;
  color:var(--fg);white-space:normal;text-align:left}
.cvecard-top{display:flex;align-items:center;justify-content:space-between;gap:1ch;margin-bottom:.4rem}
.cvecard-id{color:var(--dim)}
.cvecard-desc{display:block;color:var(--dim);margin:0 0 .5rem}
.cvecard-meta{display:block;font-size:.75rem;color:var(--faint)}
/* severity in reverse video */
.cvesev{--sev:var(--faint);display:inline-block;font-size:.75rem;font-weight:700;line-height:1.5;padding:0 .8ch;
  white-space:nowrap;color:var(--bg);background:var(--sev)}
.sev-critical{--sev:var(--crit)}
.sev-high{--sev:var(--high)}
.sev-medium{--sev:var(--med)}
.sev-low{--sev:var(--low)}
.sev-none{--sev:var(--faint)}

/* ===== nvd show <cve> ===== */
.cve-id{font-size:clamp(1.25rem,3.4vw,1.75rem);font-weight:700;line-height:1.25;margin:0 0 1rem;word-break:break-word}
.cve-page .adv-detail{grid-template-columns:13ch minmax(0,1fr)}
.cve-page .adv-detail dd code{color:var(--dim);word-break:break-all}
.cvss-v{color:var(--faint);margin-left:1ch}
.meter{display:block;width:100%;max-width:30ch;height:4px;margin:.6rem 0 .2rem}
.meter-track{fill:var(--line-2)}
.meter-fill{fill:var(--sev)}
.vec{list-style:none;margin:.6rem 0 .2rem;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(24ch,1fr));gap:.4rem 2ch}
.vec li{display:flex;flex-direction:column}
.vec-k{font-size:.75rem;color:var(--faint)}

/* ===== sudo -e advisories/ ===== */
.wrap:has(#app[data-state="edit"]){max-width:calc(140ch + 2 * var(--pad))}
.toolbar{display:flex;gap:2ch;flex-wrap:wrap;margin:0 0 1.25rem}
.login{display:flex;flex-direction:column;gap:.7rem;max-width:44ch;align-items:flex-start}
.login>.btn{align-self:flex-start}
.pw-form{display:flex;flex-direction:column;gap:.7rem;align-self:stretch;margin:0}
.linkish{background:none;border:0;padding:0;cursor:pointer;color:var(--dim);font-size:.8125rem;
  text-decoration:underline;text-underline-offset:3px}
.linkish:hover{background:var(--accent);color:var(--on-accent)}
.login[hidden],.linkish[hidden]{display:none}   /* manage.js hides these with the attribute */
.keys-list{margin:1.25rem 0 0}
.form-ok{color:var(--low);margin:.2rem 0 0}
.form-ok:empty{display:none}
.form-err{color:var(--bad);min-height:1em;margin:.2rem 0 0}
#app[data-state="list"],#app[data-state="keys"],#app[data-state="login"]{max-width:var(--cols)}
#app>h3{margin:0 0 .5rem}

.manage-list{list-style:none;margin:0;padding:0}
.manage-list li{display:flex;gap:.3rem 2ch;justify-content:space-between;align-items:baseline;flex-wrap:wrap;
  padding:.55rem 0;border-bottom:1px dashed var(--line)}
.ml-title{font-weight:600}
.ml-meta{font-size:.8125rem;color:var(--faint)}
.ml-actions{display:flex;gap:1ch;flex-wrap:wrap}
.tag-draft{display:inline-block;margin-left:1.5ch;font-size:.72rem;font-weight:700;line-height:1.5;padding:0 .7ch;
  color:var(--bg);background:var(--med)}

.editor{display:flex;flex-direction:column;gap:1rem}
.fld{display:flex;flex-direction:column;gap:.3rem}
.fld-label{font-size:.8125rem;color:var(--faint)}
.fld-label::after{content:":"}
.fld-hint{font-size:.8125rem;color:var(--faint)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2ch}
.editor input,.editor textarea,.login input,.pk-row input{
  width:100%;background:var(--bg-2);color:var(--fg);border:1px solid var(--line-2);border-radius:0;
  padding:.5rem 1ch;font-size:.9375rem;line-height:1.6}
.editor textarea.mono{font-size:.875rem}
.editor input:focus,.editor textarea:focus,.login input:focus,.pk-row input:focus{outline:none;border-color:var(--accent)}
.pdf-field{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.pdf-current{display:flex;justify-content:space-between;align-items:baseline;gap:2ch;flex-wrap:wrap;width:100%}
.pdf-name{color:var(--dim);word-break:break-all}
.pdf-field label.btn{cursor:pointer}
.pdf-field input[type=file]{display:none}
.links-wrap{display:flex;flex-direction:column;gap:.5rem}
.link-row{display:grid;grid-template-columns:1fr 1.4fr auto;gap:1ch;align-items:center}
.editor-actions{display:flex;flex-wrap:wrap;gap:2ch;margin-top:.4rem}
.pk-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 2ch;max-width:64ch}
.pk-row input{flex:1;min-width:24ch;width:auto}

/* the body and its preview sit side by side */
.md{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2ch;align-items:stretch}
.md textarea{min-height:28rem;resize:vertical}
.md-tabs{display:none;gap:1ch}
.md-tab[aria-pressed="true"]{color:var(--accent);font-weight:700}
.md-preview{min-height:28rem;max-height:70vh;overflow:auto;border:1px dashed var(--line-2);padding:1rem 2ch}
.md-preview:empty::before{content:"# nothing to preview yet";color:var(--faint)}
.md-preview.stale{opacity:.6}
@media (max-width:64rem){
  .md{grid-template-columns:minmax(0,1fr)}
  .md-tabs{display:flex}
  .md[data-view="write"] .md-preview,.md[data-view="preview"] textarea{display:none}
}

/* ===== not found ===== */
.enoent{color:var(--bad);overflow-wrap:anywhere}

/* ===== games, from the prompt ===== */
.session pre.game{display:inline-block;margin:.5rem 0;padding:0;background:none;border:0;font-size:inherit;line-height:1.15;
  color:var(--faint);touch-action:none;outline:none}
.game .g-h{color:var(--accent);text-shadow:var(--glow)}
.game .g-b{color:var(--fg)}
.game .g-f{color:var(--med)}
.game .g-x{color:var(--bad)}
.mines span{cursor:pointer}
.mines .m-h{color:var(--faint)}
.mines .m-f{color:var(--high)}
.mines .m-n1{color:var(--accent)}
.mines .m-n2{color:var(--low)}
.mines .m-n3{color:var(--bad)}
.mines .m-n4{color:var(--high)}
.mines .m-cur{background:var(--accent);color:var(--on-accent);text-shadow:none}

/* ===== narrow windows ===== */
@media (max-width:40rem){
  :root{--pad:1rem}
  body{font-size:.875rem}
  .cli-user{display:none}
  .adv-item{grid-template-columns:minmax(0,1fr)}
  .kv,.adv-detail,.cve-page .adv-detail{grid-template-columns:minmax(0,1fr);gap:0}
  .kv dd,.adv-detail dd{margin-bottom:.6rem}
  .grid2,.link-row{grid-template-columns:1fr}
}