/* Every CVE's components. Tokens hold both modes through light-dark(), so a
   theme is only a color-scheme and the two can't drift apart. */

@font-face { font-family: "Schibsted Grotesk"; src: url("fonts/SchibstedGrotesk.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Commit Mono"; src: url("fonts/CommitMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Commit Mono"; src: url("fonts/CommitMono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Commit Mono"; src: url("fonts/CommitMono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light dark;
  --page: light-dark(#fff, #121212);
  --surface: light-dark(#fff, #171717);
  --sunken: light-dark(#f7f7f7, #1c1c1c);
  --field: light-dark(#f7f7f7, #262626);
  --active: light-dark(#ebebeb, #333);
  --line: light-dark(#ebebeb, #262626);
  --line-btn: light-dark(#e2e2e2, #404040);
  --line-strong: light-dark(#d4d4d4, #525252);
  --t1: light-dark(#0a0a0a, #fafafa);
  --t2: light-dark(#6b6b6b, #a1a1a1);
  --t3: light-dark(#a1a1a1, #737373);
  --accent: light-dark(#155dfc, #3392ff);
  --link: light-dark(#155dfc, #6cb0ff);
  --ring: light-dark(#3080ff, #3392ff);
  --grad: linear-gradient(180deg, #2b6cf6, #1450e8);
  --grad-hover: linear-gradient(180deg, #3b78f8, #2b6cf6);
  --inverse: light-dark(#171717, #fafafa);
  --inverse-t: light-dark(#fafafa, #0a0a0a);
  --xs: 0 1px 2px light-dark(rgba(0,0,0,.05), rgba(0,0,0,.3));
  --drop: 0 1px 1px light-dark(rgba(0,0,0,.04), rgba(0,0,0,.14)), 0 4px 4px light-dark(rgba(0,0,0,.02), rgba(0,0,0,.1));
  --lg: 0 4px 6px -2px light-dark(rgba(0,0,0,.05), rgba(0,0,0,.1)), 0 10px 15px -3px light-dark(rgba(0,0,0,.1), rgba(0,0,0,.18));
  --mono: "Commit Mono", ui-monospace, monospace;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --shadow-border: 0 0 0 1px light-dark(oklch(0 0 0 / .06), oklch(1 0 0 / .08)), 0 1px 2px -1px light-dark(oklch(0 0 0 / .06), transparent), 0 2px 4px light-dark(oklch(0 0 0 / .04), transparent);
  --shadow-border-hover: 0 0 0 1px light-dark(oklch(0 0 0 / .1), oklch(1 0 0 / .14)), 0 1px 2px -1px light-dark(oklch(0 0 0 / .08), transparent), 0 2px 4px light-dark(oklch(0 0 0 / .06), transparent);

  --crit-solid: light-dark(#d90d26, #e02530);
  --crit-on: #fff;
  --crit-soft: light-dark(#f6d5d2, #721c1c);
  --crit-text: light-dark(#860011, #f3dfdd);
  --high-solid: light-dark(#cc420c, #fb8a45);
  --high-on: light-dark(#fff, #1f0d00);
  --high-soft: light-dark(#fde3d3, #5a2a10);
  --high-text: light-dark(#8f2f06, #fbdcc8);
  --med-solid: light-dark(#f5a800, #fbbf24);
  --med-on: light-dark(#2a1a00, #241700);
  --med-soft: light-dark(#fdeec5, #4b3a12);
  --med-text: light-dark(#6b4700, #f7e3b0);
  --low-solid: var(--accent);
  --low-on: light-dark(#fff, #00121d);
  --low-soft: var(--acc-soft);
  --high-mark: light-dark(#f2711c, #fb7f23);
  --med-mark: light-dark(#f5b700, #fcd34d);
  --kev-solid: light-dark(#6d3bd1, #7a4be8);
  --exploit-soft: light-dark(#ece6fb, #2e2352);
  --exploit-text: light-dark(#4c2a9e, #dccfff);
  --ok-solid: light-dark(#09844b, #33d07f);
  --ok-on: light-dark(#fff, #00170c);
  --ok-soft: light-dark(#b5efc9, #194b2e);
  --ok-text: light-dark(#00542d, #bff4d0);
  --acc-soft: light-dark(#d7e2f6, #164072);
  --acc-text: light-dark(#0042d5, #dce6f2);
  --none-fill: light-dark(#ebebeb, #262626);
  --none-text: light-dark(#525252, #a1a1a1);
  --none-mark: light-dark(#a1a1a1, #737373);
}
/* The same lightness as the values above, so every text pair still passes, with
   the extra chroma a wide-gamut screen can show. */
@media (color-gamut: p3) {
  :root {
    --crit-solid: light-dark(oklch(.561 .249 25), oklch(.585 .26 25.1));
    --ok-solid: light-dark(oklch(.54 .18 154.9), oklch(.76 .251 155.1));
  }
}
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-padding-block-start: 88px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body { background: var(--page); }
body { min-height: 100dvh; display: flex; flex-direction: column; font: 400 .9375rem/1.5 var(--sans); color: var(--t1); }
main { flex: 1; }
a { color: inherit; text-decoration: none; }
button, select, input { font: inherit; color: inherit; }
code, pre, kbd, .mono { font-family: var(--mono); }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }
ul { padding: 0; list-style: none; }
dd { margin: 0; }
small { font-size: .8125rem; }
strong, b { font-weight: 600; }
::selection { background: var(--acc-soft); color: var(--acc-text); }
[hidden] { display: none !important; }
html:not(.js) .js-only { display: none !important; }
.theme-switching * { transition: none !important; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ic { display: block; flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--t2); }
.small { font-size: .8125rem; line-height: 1.4; }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; padding: 8px 12px; border-radius: 10px; background: var(--surface); }

/* Layout */
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 32px; }
.page { padding-block: 32px 96px; }
.narrow { max-width: 820px; }
.browse { padding-block: 32px 40px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.row.tight { gap: 4px; }
.spread { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.title { font-size: 1.75rem; line-height: 1.2; letter-spacing: -.02em; }
.section-title { margin-bottom: 14px; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -.005em; }
.group-title { margin-bottom: 10px; font-size: .875rem; font-weight: 500; color: var(--t2); }
.section { margin-top: 40px; }
.section-sm { margin-top: 20px; }
.lead { max-width: 72ch; font-size: 1.0625rem; line-height: 1.45; color: var(--t2); }
.prose { max-width: 72ch; font-size: 1rem; line-height: 1.6; overflow-wrap: break-word; }
.prose a, p a { color: var(--link); font-weight: 500; }

/* Page change progress */
html.navigating::before { content: ""; position: fixed; inset: 0 0 auto; z-index: 30; height: 2px; background: var(--accent); transform-origin: left; opacity: .6; }

/* Header and footer */
.topbar { position: sticky; top: 0; z-index: 3; }
/* Two masked layers, heavier at the top. They must stay siblings: backdrop-filter sees nothing through a filtered or masked parent. */
.topbar::before, .topbar::after { content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none; }
.topbar::before { backdrop-filter: blur(2px); mask-image: linear-gradient(#000 50%, transparent); }
.topbar::after { background: color-mix(in srgb, var(--page) 70%, transparent); backdrop-filter: blur(10px); mask-image: linear-gradient(#000 40%, transparent 85%); }
.top { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 8px; margin-inline-end: 8px; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.mark { display: block; width: 22px; height: 22px; border-radius: 7px; background: var(--grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.nav { display: flex; gap: 2px; }
.nav a { display: flex; align-items: center; min-height: 32px; padding-inline: 10px; border-radius: 8px; font-weight: 500; color: var(--t2); transition: background-color .15s, color .15s; }
.nav a[aria-current] { color: var(--t1); }
.spacer { flex: 1; }
.foot { margin-top: 48px; padding-block: 20px 28px; color: var(--t2); font-size: .875rem; }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.foot-links { display: flex; gap: 18px; }
.foot-links a { font-weight: 500; transition: color .15s; }
/* The segmented control, with one thumb that slides between its three icons. */
.theme { display: inline-flex; flex: none; gap: 2px; }
.theme button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--t2); opacity: .7; cursor: pointer; transition: color .15s, opacity .15s; }
.theme button[aria-pressed="true"] { color: var(--t1); opacity: 1; }
.theme .ic { width: 15px; height: 15px; }
@media (pointer: coarse) { .theme button { width: 36px; height: 36px; } }

/* Button */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding-inline: 12px; border-radius: 10px; border: 1px solid transparent; background: var(--surface); box-shadow: var(--shadow-border); font-size: .875rem; font-weight: 500; white-space: nowrap; cursor: pointer; transition-property: background-color, box-shadow, color, scale; transition-duration: .15s; transition-timing-function: ease-out; }
.btn.primary { background: var(--grad); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), var(--xs); }
.btn.ghost { background: none; box-shadow: none; color: var(--t2); }
.btn.sm { min-height: 32px; padding-inline: 10px; border-radius: 8px; font-size: .8125rem; }
.btn.icon { width: 36px; padding: 0; }
.btn.icon.sm { width: 32px; }
.btn.wide { width: 100%; }
.tlink { display: inline; color: var(--link); font-weight: 500; overflow-wrap: anywhere; text-underline-offset: 2px; }
.lost .tlink { display: inline-flex; align-items: center; gap: 4px; }
.lost .tlink .ic { width: 14px; height: 14px; }

/* Search field and input */
.field { display: flex; align-items: center; gap: 8px; min-height: 36px; padding-inline: 10px; border-radius: 10px; background: var(--field); color: var(--t2); transition: background-color .15s; }
.field input { flex: 1; min-width: 0; border: 0; padding: 0; background: none; outline: 0; font-weight: 500; color: var(--t1); }
.field input::placeholder { color: var(--t2); font-weight: 400; }
input[type="search"]::-webkit-search-cancel-button { appearance: none; width: 14px; height: 14px; background: var(--t2); cursor: pointer; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat; }
.field:focus-within { background: var(--surface); box-shadow: 0 0 0 2px var(--ring); }
.field .ic.spin { display: none; }
.htmx-request .field .ic.spin { display: block; }
.field.pill { width: 200px; min-height: 36px; border-radius: 999px; padding-inline: 12px 8px; font-size: .875rem; }
.field.hero-field { min-height: 48px; padding-inline: 16px; gap: 10px; border-radius: 14px; }
.field.hero-field input { font-size: 1rem; }
.label { display: block; font-weight: 500; margin-bottom: 6px; }
.help { margin-top: 8px; font-size: .8125rem; line-height: 1.4; color: var(--t2); }

/* Filters: a native select and a checkbox in house clothes */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.select { position: relative; display: inline-flex; align-items: center; }
.select select { appearance: none; min-height: 36px; padding-inline: 10px 28px; border-radius: 10px; border: 1px solid transparent; background: var(--surface); box-shadow: var(--shadow-border); font-size: .875rem; font-weight: 500; cursor: pointer; }
.select option { background: var(--surface); color: var(--t1); }
.select:has(option:checked:not([value=""])) select { box-shadow: 0 0 0 1px var(--accent); }
.select .ic { position: absolute; inset-inline-end: 8px; color: var(--t2); pointer-events: none; }
.switch { position: relative; display: inline-flex; white-space: nowrap; align-items: center; gap: 8px; font-size: .875rem; font-weight: 500; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 36px; height: 20px; margin: 0; cursor: pointer; }
.switch i { position: relative; display: block; width: 36px; height: 20px; border-radius: 999px; background: var(--line-strong); transition: background-color .15s; }
.switch i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: translate .15s ease-out; }
.switch input:checked + i { background: var(--grad); }
.switch input:checked + i::after { translate: 16px 0; }
.switch input:focus-visible + i { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Segmented control */
.seg { display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: 10px; background: var(--field); }
.seg button { display: grid; place-items: center; min-width: 26px; height: 26px; padding-inline: 5px; border: 0; border-radius: 7px; background: none; color: var(--t2); cursor: pointer; transition: color .15s; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: light-dark(var(--surface), var(--line-btn)); color: var(--t1); box-shadow: var(--xs); }
.seg.text { max-width: 100%; overflow-x: auto; }
.seg.text button { height: 30px; padding-inline: 12px; font-size: .875rem; font-weight: 500; white-space: nowrap; }
.js [role="tabpanel"]:not(.on) { display: none; }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding-inline: 7px; border-radius: 6px; font-size: .8125rem; font-weight: 500; white-space: nowrap; background: var(--none-fill); color: var(--none-text); }
.chip b { font: 700 .75rem/1 var(--mono); }
.chip .ic { width: 14px; height: 14px; }
.chip.sm, .entry-row .chip, td .chip { min-height: 20px; padding-inline: 5px; border-radius: 5px; font-size: .75rem; }
.chip.ok { background: var(--ok-soft); color: var(--ok-text); }
.chip.acc { background: var(--acc-soft); color: var(--acc-text); }
.chip.kev { background: var(--kev-solid); color: #fff; }
.chip.exploit { background: var(--exploit-soft); color: var(--exploit-text); }
.chip.sev.crit { background: var(--crit-solid); color: var(--crit-on); }
.chip.sev.high { background: var(--high-solid); color: var(--high-on); }
.chip.sev.med { background: var(--med-solid); color: var(--med-on); }
.chip.sev.low { background: var(--low-solid); color: var(--low-on); }
.dot { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; white-space: nowrap; }
.dot i { width: 8px; height: 8px; margin-inline: 3px; border-radius: 50%; background: var(--none-mark); }
.dot.ok i { background: var(--ok-solid); box-shadow: 0 0 0 3px var(--ok-soft); }
.dot.crit i { background: var(--crit-solid); box-shadow: 0 0 0 3px var(--crit-soft); }
kbd { display: inline-flex; align-items: center; height: 20px; padding-inline: 6px; border-radius: 999px; background: var(--active); color: var(--t2); font: 600 .6875rem/1 var(--sans); }
kbd .ic { width: 12px; height: 12px; }
p code, td code, li code, dd code { padding: 2px 5px; border-radius: 6px; background: var(--field); font-size: .8125em; overflow-wrap: anywhere; }

/* Meter */
.meter { display: block; width: 100%; height: 6px; border: 0; border-radius: 999px; background: var(--meter-bg, var(--none-fill)); appearance: none; overflow: hidden; }
.meter::-webkit-meter-bar { height: 6px; border: 0; border-radius: 999px; background: var(--meter-bg, var(--none-fill)); }
.meter::-webkit-meter-optimum-value, .meter::-webkit-meter-suboptimum-value, .meter::-webkit-meter-even-less-good-value { background: var(--meter, var(--none-mark)); border-radius: 999px; }
.meter::-moz-meter-bar { background: var(--meter, var(--none-mark)); border-radius: 999px; }
.meter.crit, .pips.crit { --meter: var(--crit-solid); --meter-bg: var(--crit-soft); }
.meter.high, .pips.high { --meter: var(--high-solid); --meter-bg: var(--high-soft); }
.meter.med, .pips.med { --meter: var(--med-solid); --meter-bg: var(--med-soft); }
.meter.low, .pips.low { --meter: var(--low-solid); --meter-bg: var(--low-soft); }
.meter.acc { --meter: var(--accent); --meter-bg: var(--acc-soft); }

/* Tooltip, skeleton, spinner, toast */
.tip { position: relative; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline dotted var(--t3); text-underline-offset: 3px; cursor: help; }
.tip::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 5; display: none; width: max-content; max-width: min(240px, 45vw); padding: 6px 8px; border-radius: 8px; background: var(--inverse); color: var(--inverse-t); box-shadow: var(--lg); font-size: .75rem; line-height: 1.35; font-weight: 500; text-align: start; }
.tip:focus-visible::after { display: block; }
.skeleton { max-height: 0; overflow: hidden; }
.htmx-request ~ .skeleton { animation: reveal 0s 250ms forwards; }
/* A slow request swaps the old results for the skeleton, instead of stacking them. */
.htmx-request ~ #results { animation: conceal 0s 250ms forwards; }
.skeleton i { display: block; height: 60px; margin-bottom: 4px; border-radius: 12px; background: var(--field); }
.spin { animation: spin 1s linear infinite; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 20; translate: -50% 8px; padding: 10px 14px; border-radius: 12px; background: var(--inverse); color: var(--inverse-t); font-weight: 500; box-shadow: var(--lg); opacity: 0; pointer-events: none; transition: opacity .15s ease-out, translate .15s ease-out; }
.toast.show { translate: -50% 0; opacity: 1; }
.toast:empty { padding: 0; }
.copy { position: relative; }
.copy .ic { transition: opacity .12s ease-out, scale .12s ease-out, filter .12s ease-out; }
.copy .ic:last-child { position: absolute; inset: 0; margin: auto; opacity: 0; scale: .25; filter: blur(4px); color: var(--ok-text); }
.copy.copied .ic:first-child { opacity: 0; scale: .25; filter: blur(4px); }
.copy.copied .ic:last-child { opacity: 1; scale: 1; filter: blur(0); }
@keyframes spin { to { rotate: 360deg; } }
@keyframes conceal { to { max-height: 0; overflow: hidden; visibility: hidden; } }
@keyframes reveal { to { max-height: 300px; margin-top: 16px; } }

/* Tables */
.table { border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-border); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
th { padding: 10px 14px; color: var(--t2); font-weight: 500; text-align: start; white-space: nowrap; }
td { padding: 10px 14px; border-top: 1px solid var(--line); font-weight: 500; vertical-align: middle; }
td.d, td .d { color: var(--t2); font-weight: 400; }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; }

/* Entry rows */
.rows { display: flex; flex-direction: column; margin-top: 12px; margin-inline: -12px; }
.entry-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 16px; padding: 14px 12px; border-radius: 14px; transition: background-color .15s; }
.row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row-products { font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
.row-products code { padding: 0; background: none; font-size: .9375rem; font-weight: 700; letter-spacing: -.02em; }
.row-products .vendor, .row-products .sep, .row-products .eco, .more-products { color: var(--t2); }
.row-products .eco, .more-products { font-size: .875rem; }
.more-products { white-space: nowrap; }
.more-narrow { display: none; }
.row-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--t2); font-size: .875rem; line-height: 1.45; overflow-wrap: anywhere; }
.row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font-size: .75rem; color: var(--t2); }
.row-id { font: 400 .75rem/1.5 var(--mono); }
.row-epss, .row-meta time { font-variant-numeric: tabular-nums; }
.row-meta time { margin-inline-start: auto; white-space: nowrap; }
.feed .row-meta time { display: none; }
/* Above the list when there's no room beside it. */
.day { padding: 20px 12px 6px; }
.day h3 { font-size: .8125rem; font-weight: 600; color: var(--t2); }

/* Home */
.home { max-width: 880px; padding-block: 72px 40px; }
.hero-title { font-size: clamp(2.5rem, 7vw, 3.5rem); font-weight: 500; line-height: 1.1; letter-spacing: -.025em; }
.hero-lead { max-width: 37.5rem; margin-block: 16px 28px; font-size: 1.125rem; line-height: 1.5; color: var(--t2); }
.hero-search .field.hero-field { transition-property: border-color, box-shadow; transition-duration: .15s; transition-timing-function: ease-out; min-height: 56px; padding: 6px 6px 6px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--xs); }
.hero-search .field.hero-field:focus-within { border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring); }
.hero-search .btn { min-height: 42px; padding-inline: 16px; font-size: .9375rem; }
.home #results:not(:empty) ~ * { display: none; }
.home:has(.no-results) > .suggest { display: none; }
/* Suggestions */
.suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.suggest a { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding-inline: 8px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 500; color: var(--t2); box-shadow: var(--shadow-border); transition: background-color .15s, color .15s; }
.suggest .ic { width: 14px; height: 14px; }
.suggest .see-all { padding-inline: 10px 6px; box-shadow: none; color: var(--t1); }
.no-results { margin-top: 40px; }
.no-results h2 { font-size: 1.125rem; font-weight: 500; line-height: 1.3; letter-spacing: -.005em; overflow-wrap: anywhere; }
.no-results p:not(.suggest) { margin-top: 4px; color: var(--t2); }
.no-results .suggest { margin-top: 16px; }
.no-results .see-all { display: none; }
.cmd .no-results { margin: 0; padding: 16px 14px; }
/* Home sections */
.agent-callout { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 40px; padding: 16px 16px 16px 20px; border-radius: 16px; background: var(--sunken); }
.agent-callout > div { flex: 1 1 15rem; min-width: 0; }
.agent-callout h2 { font-size: 1rem; font-weight: 600; line-height: 1.4; }
.agent-callout p { margin-top: 2px; font-size: .875rem; line-height: 1.45; color: var(--t2); }
.agent-callout .agent-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-inline-start: auto; }
.agent-actions .tlink { font-size: .8125rem; }
.copy-icons { position: relative; display: block; width: 16px; height: 16px; }
.btn.copy-text.copied .copy-icons .ic:first-child { opacity: 0; scale: .25; filter: blur(4px); }
.btn.copy-text.copied .copy-icons .ic:last-child { opacity: 1; scale: 1; filter: blur(0); }
.big-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 24px; }
.big-stats li { display: flex; flex-direction: column; gap: 4px; }
.big-stats strong { font-size: 2.75rem; font-weight: 500; line-height: 1.05; letter-spacing: -.025em; }
.big-stats li > span { display: inline-flex; align-items: center; gap: 4px; font-size: .875rem; color: var(--t2); white-space: nowrap; }
.big-stats .ic { width: 14px; height: 14px; }
.home-section { margin-top: 96px; }
.home-miss { padding-block: 14px; }
/* Placeholders hold the space of what's loading. They stay invisible for a moment,
   so a fast response never flashes them. */
.sk { display: block; border-radius: 8px; background: var(--field); opacity: 0; animation: sk-show 0s .15s forwards; }
.sk-num { width: 72px; height: 46px; }
.sk-label { width: 104px; height: 14px; margin-block: 3.6px; }
.sk-title { width: min(100%, 300px); height: 26px; }
.sk-plot { height: 186px; }
.row-sk { padding: 14px 12px; }
.row-sk .sk { height: 72px; border-radius: 12px; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 6px; }
.section-head .tlink { font-size: .875rem; }
.part-title { font-size: 1.25rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.overview { margin-top: 104px; }
/* The numbers and the chart read as one thing: a column of stats beside the plot. */
.overview:has(.big-stats) { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 40px; align-items: start; }
.overview .big-stats { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.trend-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 18px; }
.trend-plot .chart-tip { display: flex; flex-direction: column; gap: 2px; z-index: 3; }
.trend-plot .chart-tip[hidden] { display: none; }
.trend-plot .chart-tip span { display: flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 400; }
.trend-plot .chart-tip i { width: 8px; height: 8px; border-radius: 2px; }
.chart-tip .crit { background: var(--crit-solid); }
.chart-tip .high { background: var(--high-mark); }
.chart-tip .med { background: var(--med-mark); }
.chart-tip .low { background: var(--low-solid); }
.chart-tip .none { background: var(--none-mark); }
.chart.trend-narrow { display: none; }
.trend-plot { position: relative; height: 160px; }
.trend-plot .hit { fill: transparent; }
.trend-plot .crit { fill: var(--crit-solid); }
.trend-plot .high { fill: var(--high-mark); }
.trend-plot .med { fill: var(--med-mark); }
.trend-plot .low { fill: var(--low-solid); }
.trend-plot .none { fill: var(--none-mark); }
.trend-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8125rem; color: var(--t2); }
.trend-legend li { display: flex; align-items: center; gap: 6px; }
.trend-legend i { width: 8px; height: 8px; border-radius: 2px; }
.trend-legend .crit { background: var(--crit-solid); }
.trend-legend .high { background: var(--high-mark); }
.trend-legend .med { background: var(--med-mark); }
.trend-legend .low { background: var(--low-solid); }
.trend-legend .none { background: var(--none-mark); }
/* Guide */
.guide { max-width: 720px; padding-block: 56px 96px; }
.guide h1 { font-size: clamp(2.25rem, 6vw, 3rem); font-weight: 500; line-height: 1.1; letter-spacing: -.025em; }
.guide section { display: flex; flex-direction: column; gap: 12px; margin-top: 48px; }
.guide h2 { font-size: 1.5rem; font-weight: 500; line-height: 1.2; letter-spacing: -.015em; }
.guide p, .guide ol { font-size: 1rem; line-height: 1.6; }
.guide .lead { margin-top: 16px; font-size: 1.125rem; }
.guide .table { margin-block: 4px; }
.guide td { font-weight: 400; }
.guide .nowrap { font-variant-numeric: tabular-nums; }
.signs { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 16px 20px; }
.signs dt { padding-top: 3px; }
.signs dd { line-height: 1.55; }
.steps { display: flex; flex-direction: column; gap: 10px; padding-inline-start: 1.25em; }
.steps strong { font-weight: 500; }
.guide-next { align-items: flex-start; }
.more { display: flex; justify-content: center; padding-block: 16px; }
.more a { font-size: .875rem; color: var(--t2); }
.more-busy { display: none; }
.more .htmx-request .more-idle { display: none; }
.more .htmx-request .more-busy { display: inline; }
.cmd .more { display: none; }

/* Entry page */
.entry-top { max-width: 820px; }
.id-big { font: 600 1.875rem/1.2 var(--mono); letter-spacing: -.03em; overflow-wrap: anywhere; }
.entry-top .lead { margin-top: 6px; }
.chips { margin-top: 14px; gap: 6px; }
.entry-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; margin-top: 36px; align-items: start; }
.entry-main { grid-column: 1; grid-row: 1; min-width: 0; display: flex; flex-direction: column; gap: 44px; }
/* The page's bottom space sits inside the grid row, so the sticky facts can travel through it. */
.page:has(.entry-grid) { padding-block-end: 0; }
.entry-main { padding-block-end: 96px; }
.entry-main .prose { max-width: none; }
/* Hangs above the facts, so it moves with them and showing it shifts nothing. */
.entry-id { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 1; display: flex; align-items: center; gap: 2px; font: 600 .9375rem/1 var(--mono); letter-spacing: -.02em; white-space: nowrap; visibility: hidden; opacity: 0; transition: opacity .12s ease-out, visibility .12s; }
.entry-id.on { visibility: visible; opacity: 1; }
.entry-id .btn { flex: none; }
.facts { grid-column: 2; grid-row: 1; position: sticky; top: 116px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.facts dl { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.facts dt { margin-bottom: 2px; font-size: .8125rem; color: var(--t2); }
.facts dd { font-weight: 500; overflow-wrap: anywhere; }
.facts small { display: block; margin-top: 4px; font-weight: 400; color: var(--t2); }
.facts .fact-score strong { display: block; margin-bottom: 6px; font-size: 1.75rem; line-height: 1.1; font-weight: 500; letter-spacing: -.02em; }

/* EPSS heat map, and the chart parts the home page shares */
.chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 18px; }
.chart-head .section-title { margin: 0; }
.chart-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: .8125rem; color: var(--t2); }
.chart-now strong { font-size: 1.0625rem; font-weight: 600; color: var(--t1); }
.chart { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; height: 172px; margin-block: -6px; font-size: .6875rem; line-height: 12px; color: var(--t3); text-align: end; font-variant-numeric: tabular-nums; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart .base { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-x { grid-column: 2; display: flex; justify-content: space-between; margin-top: 8px; font-size: .6875rem; color: var(--t3); font-variant-numeric: tabular-nums; }
.chart-tip { position: absolute; padding: 6px 10px; border-radius: 10px; background: var(--inverse); color: var(--inverse-t); box-shadow: var(--lg); font-weight: 600; font-size: .8125rem; line-height: 1.3; pointer-events: none; white-space: nowrap; }
.chart-tip small { display: block; font-size: .75rem; font-weight: 400; opacity: .75; }
.heat { position: relative; }
.heat > svg { display: block; width: 100%; height: auto; }
.heat .chart-tip { z-index: 3; }
.heat { --heat-top: light-dark(#0a2463, #d6eaff); }
.heat .l0 { --heat: color-mix(in oklch, var(--accent) 15%, var(--field)); }
.heat .l1 { --heat: color-mix(in oklch, var(--accent) 32%, var(--field)); }
.heat .l2 { --heat: color-mix(in oklch, var(--accent) 50%, var(--field)); }
.heat .l3 { --heat: color-mix(in oklch, var(--accent) 68%, var(--field)); }
.heat .l4 { --heat: color-mix(in oklch, var(--accent) 84%, var(--field)); }
.heat .l5 { --heat: var(--accent); }
.heat .l6 { --heat: color-mix(in oklch, var(--heat-top) 25%, var(--accent)); }
.heat .l7 { --heat: color-mix(in oklch, var(--heat-top) 50%, var(--accent)); }
.heat .l8 { --heat: color-mix(in oklch, var(--heat-top) 75%, var(--accent)); }
.heat .l9 { --heat: var(--heat-top); }
.heat rect { fill: var(--heat, var(--sunken)); }
.heat text { fill: var(--t3); font-size: 9px; font-variant-numeric: tabular-nums; }
/* The chart scales down with its column, so its labels start larger on a phone. */
@media (max-width: 560px) { .heat text { font-size: 16px; } }
/* Lines the dates up with the first column, past the row labels. */
.heat .chart-x { margin-inline-start: 5.17%; }

/* Rendered markdown from upstream */
.md { display: flex; flex-direction: column; gap: .75em; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { margin-top: .5em; font-size: 1em; font-weight: 600; }
.md ul, .md ol { display: flex; flex-direction: column; gap: .25em; padding-inline-start: 1.25em; }
.md ul { list-style: disc; }
.md ol { list-style: decimal; }
.md a { color: var(--link); font-weight: 500; overflow-wrap: anywhere; }
.md code { padding: 2px 5px; border-radius: 6px; background: var(--field); font-size: .85em; overflow-wrap: anywhere; }
.md pre { padding: 12px 14px; border-radius: 12px; background: var(--sunken); overflow-x: auto; font-size: .8125rem; line-height: 1.55; }
.md pre code { padding: 0; background: none; font-size: inherit; overflow-wrap: normal; }
.md blockquote { padding-inline-start: 12px; border-inline-start: 2px solid var(--line-strong); color: var(--t2); }
.md.policy h2 { margin-top: 1.5em; font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; }

/* Attack profile */
.metrics { display: flex; flex-direction: column; gap: 10px; }
.metrics > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.metrics dt { color: var(--t2); }
.metrics dd { display: flex; align-items: center; gap: 10px; font-weight: 500; text-align: end; }
.pips { display: inline-flex; gap: 3px; order: 1; }
.pips i { width: 14px; height: 6px; border-radius: 3px; background: var(--meter-bg, var(--none-fill)); }
.pips i.on { background: var(--meter, var(--none-mark)); }

/* What each source reports */
.sources { display: flex; flex-direction: column; gap: 4px; margin-inline: -12px; }
.source summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 220px) 16px; align-items: center; gap: 20px; min-height: 48px; padding: 10px 12px; border-radius: 12px; font-weight: 500; cursor: pointer; list-style: none; transition: background-color .15s; }
.source summary::-webkit-details-marker { display: none; }
.source summary > .ic { color: var(--t2); transition: rotate .15s ease-out; }
.source[open] summary > .ic { rotate: 180deg; }
.source-name .chip { margin-inline-start: 6px; }
.source-score { display: flex; align-items: center; gap: 10px; font-size: .875rem; }
.source-score b { width: 3ch; font: 400 .875rem/1 var(--mono); text-align: end; }
.source-body { display: flex; flex-direction: column; gap: 12px; padding: 8px 12px 20px; }
.source-body .prose { font-size: .9375rem; }
.kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 12px; font-size: .875rem; }
.kv dt { color: var(--t2); }
.kv dd { font-weight: 500; overflow-wrap: anywhere; }
.kv small { display: block; font-weight: 400; }

.refs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; margin-inline: -10px; }
.ref { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border-radius: 10px; font-size: .875rem; transition: background-color .15s; }
.ref img { flex: none; width: 20px; height: 20px; padding: 2px; border-radius: 6px; background: var(--field); }
.ref-host { flex: none; max-width: 60%; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ref-path { min-width: 0; overflow: hidden; color: var(--t2); text-overflow: ellipsis; white-space: nowrap; }
.more-refs { margin-top: 2px; }
.more-refs summary { list-style: none; width: fit-content; margin-top: 10px; }
.more-refs summary::-webkit-details-marker { display: none; }
.more-refs[open] summary { display: none; }

/* Code block */
.code, .account-key { border-radius: 12px; background: var(--sunken); color: var(--t1); box-shadow: var(--shadow-border); }
.code { overflow: hidden; }
.code-head { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 4px 4px 4px 14px; font-size: .8125rem; font-weight: 500; color: var(--t2); }
.code pre { max-height: 460px; padding: 2px 14px 14px; overflow: auto; font-size: .8125rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.code-tabs { position: relative; }
.code-tabs .code-head { padding: 6px 44px 4px 6px; }
.code-tabs .seg { background: var(--active); }
.code-tabs [role="tabpanel"] > .copy { position: absolute; top: 6px; inset-inline-end: 6px; }
.code-note { padding: 4px 14px 0; font-size: .8125rem; color: var(--t2); }
.code-tabs pre { padding-top: 6px; }
.code.json pre { white-space: pre; overflow-wrap: normal; }
.tok-key { color: var(--t1); }
.tok-str { color: var(--acc-text); }
.tok-lit { color: var(--t2); font-weight: 700; }

/* Docs */
.connect-panel > * + * { margin-top: 14px; }
#connect > .seg { align-self: flex-start; }
.docs { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px; padding-block: 32px 96px; align-items: start; }
.docs-nav { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 2px; font-size: .875rem; }
.docs-nav strong { margin-block: 18px 6px; padding-inline: 10px; font-size: .75rem; font-weight: 500; color: var(--t2); }
.docs-nav strong:first-child { margin-top: 0; }
.docs-nav a { padding: 4px 10px; border-radius: 8px; color: var(--t2); transition: background-color .15s, color .15s; }
.docs-nav a[aria-current] { background: var(--sunken); color: var(--t1); font-weight: 500; }
.docs-toc { display: none; margin-top: 20px; border-radius: 12px; background: var(--sunken); }
.docs-toc summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding-inline: 14px; border-radius: 12px; font-weight: 500; cursor: pointer; list-style: none; }
.docs-toc summary::-webkit-details-marker { display: none; }
.docs-toc summary .ic { color: var(--t2); transition: rotate .15s ease-out; }
.docs-toc[open] summary .ic { rotate: 180deg; }
.docs-toc nav { display: flex; flex-direction: column; padding: 0 14px 14px; }
.docs-toc strong { margin-block: 14px 2px; font-size: .75rem; font-weight: 500; color: var(--t2); }
.docs-toc strong:first-child { margin-top: 2px; }
.docs-toc a { display: flex; align-items: center; min-height: 36px; }
.docs-body { min-width: 0; display: flex; flex-direction: column; gap: 64px; }
.docs-body > header .lead { margin-top: 8px; }
.docs-body > section { display: flex; flex-direction: column; gap: 14px; scroll-margin-block-start: 24px; }
.docs-body h2 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -.01em; }
.docs-body p { max-width: 68ch; }
.defs { display: flex; flex-direction: column; gap: 12px; }
.defs > div { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 16px; }
.defs dt code { font-size: .875rem; }
.defs dd { color: var(--t2); }
.defs dd a { color: var(--link); font-weight: 500; }
.endpoint .defs > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.docs-body > .endpoint { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: start; }
.endpoint > div:first-child { display: flex; flex-direction: column; gap: 14px; }
.endpoint h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 1rem; font-weight: 500; }
.endpoint td:first-child code { white-space: nowrap; }
.endpoint h2 code { font-size: .9375rem; overflow-wrap: anywhere; }
.endpoint-code { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.method { padding: 2px 7px; border-radius: 6px; background: var(--acc-soft); color: var(--acc-text); font: 700 .75rem/1.4 var(--mono); }
.method.post { background: var(--ok-soft); color: var(--ok-text); }
.limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 560px; }
.limits > div { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: 14px; background: var(--sunken); }
.limits strong { font-size: 1.75rem; line-height: 1.1; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.limits span { font-size: .875rem; color: var(--t2); }

/* Status */

/* Sources */
.sources-page .lead { margin-top: 8px; }
.sources-health { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 16px; font-size: .875rem; }
.source-group { margin-top: 48px; }
.credits { display: flex; flex-direction: column; gap: 28px; margin-top: 18px; }
.credit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: start; }
.credit h3 { font-size: 1rem; font-weight: 500; line-height: 1.4; }
.credit h3 a { display: inline-flex; align-items: center; gap: 5px; transition: color .15s; }
.credit h3 .ic { width: 13px; height: 13px; color: var(--t3); }
.credit-main p { font-size: .9375rem; line-height: 1.5; }
.credit-main .credit-notice { margin-top: 6px; padding-inline-start: 10px; border-inline-start: 2px solid var(--line-strong); font-size: .875rem; }
.credit-main .credit-license { margin-top: 6px; font-size: .8125rem; color: var(--t2); }
.credit-sync { display: grid; grid-template-columns: auto auto; justify-content: end; align-items: baseline; gap: 2px 5px; font-size: .8125rem; color: var(--t2); text-align: end; }
.credit-sync strong { font-weight: 500; color: var(--t1); font-variant-numeric: tabular-nums; }
.credit-sync .dot { grid-column: 1 / -1; justify-content: end; gap: 4px; font-weight: 400; }
.credit-sync .dot i { width: 6px; height: 6px; margin-inline: 0 2px; box-shadow: none; }

/* Notification and empty state */
.note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--sunken); font-size: .875rem; line-height: 1.45; }
.note .ic { margin-block-start: 2px; color: var(--t2); }
.note.crit .ic { color: var(--crit-solid); }
.note.ok .ic { color: var(--ok-solid); }
.note strong { display: block; font-weight: 500; }
.note p { margin-top: 2px; color: var(--t2); }
.badge { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--none-fill); color: var(--none-text); }
.badge.crit { background: var(--crit-soft); color: var(--crit-text); }
.badge.high { background: var(--high-soft); color: var(--high-text); }
.badge.med { background: var(--med-soft); color: var(--med-text); }
.badge.ok { background: var(--ok-soft); color: var(--ok-text); }
.empty { display: flex; flex-direction: column; align-items: center; padding: 56px 16px; text-align: center; }
.empty .badge, .empty .mascot { margin-bottom: 14px; }
.empty strong { font-weight: 600; overflow-wrap: anywhere; }
.empty p { max-width: 360px; margin-block: 4px 16px; color: var(--t2); }

/* Mascot and the lost page */
/* The same fill as the logo mark, from the same tokens. */
.mascot { display: block; flex: none; width: 56px; height: 56px; border-radius: 32%; background: var(--grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.mascot .eyes { transform-box: fill-box; transform-origin: center; translate: var(--look-x, 0) var(--look-y, 0); transition: translate .12s ease-out; }
.lost { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 480px; margin-inline: auto; padding-block: 32px; text-align: center; }
.four { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font: 600 clamp(5rem, 22vw, 8rem)/1 var(--sans); letter-spacing: -.04em; }
.four .mascot { width: clamp(84px, 20vw, 128px); height: clamp(84px, 20vw, 128px); }
.lost > p { color: var(--t2); font-size: 1.0625rem; }
.lost .field { width: 100%; margin-top: 8px; text-align: start; }
.lost-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.soon { flex: 1; display: grid; place-content: center; padding-inline: 32px; }
.soon .mascot.friendly { width: clamp(84px, 20vw, 128px); height: clamp(84px, 20vw, 128px); margin-bottom: 14px; }
.soon .title { font-size: 1.125rem; font-weight: 500; letter-spacing: -.01em; color: var(--t2); }
@media (prefers-reduced-motion: no-preference) {
  .mascot.watching { animation: peek .7s cubic-bezier(.2, 0, 0, 1) both; }
  .mascot.friendly { animation: peek .3s cubic-bezier(.2, 0, 0, 1) both; }
  .mascot.friendly .eyes { animation: blink 4s .8s 3; }
  .mascot.watching .eyes { animation: blink 4s 1.2s 3; }
}
@keyframes peek { from { opacity: 0; translate: 0 12px; rotate: -6deg; } }
@keyframes blink { 0%, 94%, 100% { scale: 1 1; } 97% { scale: 1 .1; } }

/* Command palette */
.cmd { margin: 12vh auto auto; width: min(640px, calc(100vw - 32px)); max-height: 76vh; padding: 0; border: 1px solid transparent; border-radius: 16px; background: var(--surface); color: var(--t1); box-shadow: var(--shadow-border), var(--lg); overflow: hidden; }
.cmd[open] { display: flex; flex-direction: column; }
.cmd::backdrop { background: rgba(0,0,0,.4); }
.cmd-search { display: flex; align-items: center; gap: 10px; min-height: 48px; padding-inline: 14px; color: var(--t2); }
.cmd-search input { flex: 1; min-width: 0; border: 0; padding: 0; background: none; outline: 0; font-size: 1rem; font-weight: 500; color: var(--t1); }
.cmd-search .ic.spin { display: none; }
.cmd-search.htmx-request .ic.spin { display: block; }
.cmd-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.cmd .rows { margin: 0; padding: 4px 6px; }
.cmd .entry-row { gap: 10px; padding: 8px; }
.cmd .row-products { font-size: .9375rem; }
.cmd .row-summary { -webkit-line-clamp: 1; }
.cmd .row-meta .chip, .cmd .row-meta time { display: none; }
.cmd .row-meta { margin-top: 2px; }
.cmd .entry-row:focus, .cmd-item:focus { outline: 0; background: var(--sunken); }
.cmd .empty .btn { display: none; }
.cmd .empty { padding: 24px 16px; }
.cmd-group { padding: 6px; }
.cmd-group > small { display: block; padding: 6px 8px; font-size: .75rem; color: var(--t2); }
.cmd-item { display: flex; align-items: center; gap: 8px; min-height: 36px; padding-inline: 8px; border-radius: 8px; font-weight: 500; }
.cmd-item .ic { color: var(--t2); }
.cmd-foot { display: flex; gap: 12px; padding: 8px 14px; font-size: .75rem; color: var(--t2); }
.cmd-foot span { display: flex; align-items: center; gap: 4px; }

/* API key */
.key-page { max-width: 492px; padding-block: 56px 72px; }
.key-page:has(.key-result) { max-width: 760px; }
.key-head { display: flex; flex-direction: column; align-items: flex-start; }
.mascot.friendly { width: 36px; height: 36px; }
.key-head h1 { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; font-size: 2rem; font-weight: 500; line-height: 1.15; letter-spacing: -.02em; }
.key-head p { margin-top: 8px; color: var(--t2); }
.key-limits { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 28px; }
.key-limits li { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.key-limits strong { font-size: 2rem; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.key-limits li:first-child strong { color: var(--t2); }
.key-limits span { font-size: .8125rem; color: var(--t2); }
.key-limits .ic { color: var(--t3); }
.key-actions { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.key-github { width: 100%; min-height: 44px; }
.key-email { min-height: 48px; padding: 5px 5px 5px 14px; background: var(--surface); box-shadow: var(--shadow-border); }
.key-email:focus-within { box-shadow: 0 0 0 2px var(--ring); }
.key-email input { font-size: 1rem; }
.key-email .btn { min-height: 38px; }
.key-result { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.avatar { display: block; flex: none; }
.account-link { display: block; border-radius: 10px; transition: scale .12s ease-out; }
.account-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.account-page { max-width: 672px; padding-block: 56px 72px; }
.account-head { display: flex; align-items: center; gap: 20px; }
.account-who { flex: 1; min-width: 0; }
.account-who h1 { font-size: 2rem; font-weight: 500; line-height: 1.15; letter-spacing: -.02em; }
.account-who p { margin-top: 4px; overflow-wrap: anywhere; }
.account-who small { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--t2); }
.account-who small .ic { width: 14px; height: 14px; }
.account-joined { margin-top: 40px; }
.account-head > :last-child { align-self: flex-start; }
.avatar-roll { position: relative; display: block; padding: 0; border: 0; border-radius: 16px; background: none; cursor: pointer; transition: scale .12s ease-out; }
.avatar-badge { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-border); color: var(--t2); transition: color .15s, rotate .2s cubic-bezier(.2, 0, 0, 1); }
.avatar-badge .ic { width: 13px; height: 13px; }
.account-part { margin-top: 40px; }
.account-key { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 8px 8px 14px; }
.account-key > .ic { color: var(--t2); }
.account-key code, .account-key p { flex: 1; min-width: 0; font-size: .875rem; }
.account-key code { overflow: hidden; white-space: nowrap; }
.account-key code span { letter-spacing: -.12em; }
.account-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; font-size: .875rem; }
.account-stats dt { color: var(--t2); }
.account-stats dd { font-weight: 500; }
.btn.danger { background: var(--crit-solid); color: var(--crit-on); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), var(--xs); }
.confirm { width: min(400px, calc(100vw - 32px)); margin: auto; padding: 20px; border: 0; border-radius: 16px; background: var(--surface); color: var(--t1); box-shadow: var(--shadow-border), var(--lg); }
.confirm::backdrop { background: rgba(0,0,0,.4); }
.confirm h3 { font-size: 1.0625rem; font-weight: 500; }
.confirm p { margin-top: 6px; color: var(--t2); }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
@media (max-width: 560px) {
  .account-head { flex-wrap: wrap; }
  .account-who { flex-basis: calc(100% - 92px); }
  .account-head > :last-child { margin-inline-start: 82px; }
}
.or { display: flex; align-items: center; gap: 12px; font-size: .8125rem; color: var(--t2); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

@media (hover: hover) {
  .nav a:hover, .docs-nav a:hover { background: var(--sunken); color: var(--t1); }
  .btn:hover { background: var(--sunken); box-shadow: var(--shadow-border-hover); }
  .account-link:hover { scale: 1.06; }
  .avatar-roll:hover .avatar-badge { color: var(--t1); rotate: 90deg; }
  .account-key .btn.ghost:hover { background: var(--active); }
  .btn.danger:hover { background: var(--crit-solid); filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), var(--xs); }
  .btn.primary:hover { background: var(--grad-hover); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), var(--xs); }
  .btn.ghost:hover { background: var(--sunken); color: var(--t1); box-shadow: none; }
  .seg button:hover { color: var(--t1); }
  .tlink:hover, .prose a:hover, p a:hover, .foot a:hover { text-decoration: underline; }
  .suggest a:hover { background: var(--sunken); color: var(--t1); }
  .trend-day:hover .hit { fill: var(--sunken); }
    .credit h3 a:hover { color: var(--link); }
  .entry-row:hover, .cmd-item:hover, .source summary:hover, .ref:hover { background: var(--sunken); }
  .foot-links a:hover, .theme button:hover { color: var(--t1); }
  .tip:hover::after { display: block; }
}
/* Motion. All of it is opt-in, short and only ever on things arriving or changing. */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
  .btn:not(:disabled):active { scale: .96; }
  .sk { animation: sk-show 0s .15s forwards, sk-pulse 1.4s .15s ease-in-out infinite; }
  html.navigating::before { opacity: 1; animation: progress 8s cubic-bezier(.1, .7, .2, 1) forwards; }
    #results > .empty { animation: rise .15s ease-out both; }
  /* Nothing animates as a page loads, because it competes with the page loading and
     stutters. Results that arrive while someone types still rise in. */
  #palette-results .row-item { animation: rise .2s ease-out both; }
  /* Rows further down fade in as they scroll into view. */
  @supports (animation-timeline: view()) {
    .feed .row-item { animation: rise linear both; animation-delay: 0s; animation-timeline: view(); animation-range: entry 0% entry 30%; }
  }
  /* Moving between pages is htmx's boosted swap in a view transition, a plain crossfade. */
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
  .cmd[open], .confirm:popover-open { animation: pop .18s ease-out both; }
  .cmd[open]::backdrop, .confirm:popover-open::backdrop { animation: fade .18s ease-out both; }
  .avatar-roll:active { scale: .96; }
  .source::details-content, .more-refs::details-content, .docs-toc::details-content { block-size: 0; overflow: clip; transition: block-size .2s cubic-bezier(.2, 0, 0, 1), content-visibility .2s allow-discrete; }
  .source[open]::details-content, .more-refs[open]::details-content, .docs-toc[open]::details-content { block-size: auto; }
}
@keyframes progress { from { transform: scaleX(.08); } to { transform: scaleX(.92); } }
@keyframes sk-show { to { opacity: 1; } }
@keyframes sk-pulse { 50% { opacity: .55; } }
@keyframes rise { from { opacity: .75; translate: 0 8px; } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; scale: .98; translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 3s; } .btn, .account-link, .avatar-roll, .avatar-badge, .switch i, .switch i::after, .mascot .eyes, .source summary > .ic { transition: none; } }

/* With room beside the list, each day label sticks in the margin. A later label
   slides over the one before it, so it needs an opaque box as wide as the longest. */
@media (min-width: 1200px) {
  .day { position: sticky; top: 80px; height: 0; padding: 0; }
  .day h3 { position: absolute; top: 14px; right: calc(100% + 12px); width: 168px; padding-block-end: 4px; background: var(--page); text-align: end; white-space: nowrap; }
}
/* The search pill goes first, so the header never runs off the side. */
@media (max-width: 720px) {
  .top .field.pill { display: none; }
}
/* Docs code needs width, so it stacks before the rest of the page does. */
@media (max-width: 1100px) {
  .docs-body > .endpoint { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .wrap { padding-inline: 16px; }
  .entry-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 24px; }
  .entry-id { position: fixed; top: 60px; bottom: auto; left: 16px; height: 36px; padding-inline: 10px 2px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-border); }
  .facts { grid-column: 1; grid-row: auto; position: static; }
  .facts dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
  .entry-main { grid-column: 1; grid-row: auto; }
  .docs { grid-template-columns: minmax(0, 1fr); padding-block-start: 24px; }
  .docs-nav { display: none; }
  .docs-toc { display: block; }
  .docs-body { gap: 48px; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
  .get { display: none; }
  .brand { margin-inline-end: 0; }
  .nav a { padding-inline: 8px; }
  .entry-row { gap: 12px; }
  .home { padding-block-start: 40px; }
  .overview, .home-section { margin-top: 64px; }
  .credit { grid-template-columns: minmax(0, 1fr); }
  .credit-sync { justify-content: start; text-align: start; }
  .credit-sync .dot { grid-column: auto; margin-inline-start: 8px; }
  .credit-sync { grid-template-columns: auto auto auto; }
  .overview:has(.big-stats) { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .overview .big-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .big-stats strong { font-size: 2.25rem; }
  .big-stats li > span { font-size: .8125rem; }
  .feed-head { margin-top: 48px; }
  .signs { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .signs dd { margin-bottom: 14px; }
  .refs { grid-template-columns: minmax(0, 1fr); }
  .foot .wrap { gap: 20px; }
  .foot-links { order: -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; width: 100%; }
  .foot-links a { display: flex; align-items: center; min-height: 36px; }
  /* The chips stay on one line and scroll, so the search box keeps the first screen. */
  .suggest { flex-wrap: nowrap; margin-inline: -16px; padding: 2px 24px 2px 16px; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(to left, transparent, #000 24px); }
  .suggest a { flex: none; }
  /* One line at any phone width: the sentence is about 11.4em wide. */
  .hero-title { font-size: min(2rem, calc((100vw - 32px) / 11.4)); line-height: 1.2; }
  .hero-lead { margin-block: 12px 20px; font-size: 1rem; }
  .hero-search .field.hero-field { min-height: 52px; padding-inline-start: 14px; }
  .hero-search .btn { min-height: 38px; padding-inline: 12px; }
  .agent-callout { padding: 16px; }
  .agent-callout .agent-actions { flex-direction: row; align-items: center; gap: 14px; margin-inline-start: 0; }
  .part-title { font-size: 1.125rem; }
  .chart { grid-template-columns: 28px minmax(0, 1fr); column-gap: 6px; }
  .chart.trend-wide { display: none; }
  .chart.trend-narrow { display: grid; }
  /* A row keeps what you need to choose it: one product, the score, the ID and its strongest fact. */
  .product ~ .product, .more-wide, .row-epss, .row-meta .chip ~ .chip, .row-meta .chip .ic { display: none; }
  .more-narrow { display: inline; }
  .entry-row .sev-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .entry-row .chip.sev { font-size: .8125rem; }
  .field input, .select select { font-size: 1rem; }
  .defs > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .source summary { grid-template-columns: minmax(0, 1fr) 96px 16px; gap: 12px; }
  }
@media (max-width: 460px) {
  /* A signed-in avatar is narrower than the key button, so the name fits for longer. */
  .top:has(.btn[data-account]) .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 420px) {
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 360px) {
  .top { gap: 4px; }
  .nav a { padding-inline: 4px; }
  .top .btn { padding-inline: 10px; }
}

/* Browsing pages, and the trail back up from them and from entries. */
.crumbs { margin-bottom: 20px; font-size: .8125rem; color: var(--t2); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: "/"; margin-right: 4px; color: var(--t3); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--t1); }
.hub-lead { max-width: 65ch; margin-top: 8px; color: var(--t2); }
.hub-more { margin-top: 12px; }
.hub-section { margin-top: 32px; }
.hub-section .part-title { margin-bottom: 12px; }
.hub-next { margin-top: 24px; }
.term-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.term-links a { color: var(--t1); text-decoration: none; overflow-wrap: anywhere; }
.term-links a:hover { color: var(--link); text-decoration: underline; }
.term-links small { color: var(--t3); font-size: .8125rem; }
.hub-aka { max-width: 65ch; margin-top: 12px; color: var(--t2); font-size: .9375rem; }
.hub-credit { margin-top: 12px; }
.browse-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px 32px; margin: 16px 0 0; padding: 0; list-style: none; }
.browse-links a { display: block; text-decoration: none; color: inherit; }
.browse-links strong { display: block; font-weight: 500; color: var(--t1); }
.browse-links span { display: block; margin-top: 2px; font-size: .875rem; color: var(--t2); }
.browse-links a:hover strong { color: var(--link); }

/* An entry's opening: the computed summary sits with the text it introduces. */
.entry-top .chips { margin-top: 14px; }
/* The same size and leading as the text below, so only the colour and a real gap set it apart. */
.entry-intro { display: flex; flex-direction: column; gap: 24px; }
.entry-summary { font-size: 1rem; line-height: 1.6; color: var(--t2); }
.quiet { color: inherit; text-decoration: none; }
.quiet:hover { text-decoration: underline; }
.product-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.product-pills a { display: inline-flex; align-items: baseline; gap: 4px; padding: 5px 10px; border-radius: 14px; font-size: .8125rem; font-weight: 500; line-height: 1.5; color: var(--t1); text-decoration: none; overflow-wrap: anywhere; box-shadow: var(--shadow-border); transition: box-shadow .12s; }
.product-pills a:hover { box-shadow: var(--shadow-border-hover); }
.product-pills span { font-weight: 400; color: var(--t2); }
.more-refs .product-pills { margin-top: 6px; }