/* PackageTrack — public site.
   Committed to a single light look: this is a marketing surface, and a landing
   page that flips to dark on half its visitors is two designs neither of which
   gets the attention. Colours are therefore painted explicitly, never inherited
   from the host. Status hues come from the data-viz reference palette and always
   ship with a text label, never colour alone. */

:root {
  color-scheme: light;

  --paper: #fbfaf8;      /* page plane */
  --card: #ffffff;       /* raised surface */
  --band: #f4f2ed;       /* alternating section */
  --ink: #16150f;
  --ink-2: #55534b;
  --ink-3: #8a877d;
  --line: #e8e5dd;
  --line-2: #d6d2c7;

  --accent: #2a5fd6;
  --accent-soft: #eef3fd;
  --accent-ink: #1c48ab;

  --sec-critical: #d03b3b;
  --sec-serious: #c2601f;
  --sec-warn: #a97b00;
  --sec-good: #0f8a5f;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --sh-1: 0 1px 2px rgba(22,21,15,.05);
  --sh-2: 0 2px 4px rgba(22,21,15,.04), 0 12px 28px -14px rgba(22,21,15,.16);
  --sh-3: 0 4px 10px rgba(22,21,15,.05), 0 28px 60px -26px rgba(22,21,15,.28);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { max-width: 1080px; margin: 0 auto; padding: 44px 28px 20px; }
main.landing { max-width: none; padding: 0; }

h1, h2, h3 { letter-spacing: -0.028em; margin: 0; font-weight: 640; }
a { color: var(--accent); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

/* ------------------------------------------------------------------ chrome */

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 38px;
  padding: 16px 32px;
  background: rgba(251,250,248,.82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.topbar { border-bottom-color: var(--line); }
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 660; font-size: 16px; letter-spacing: -0.03em;
  color: var(--ink); text-decoration: none;
}
.brand-mark {
  width: 17px; height: 17px; border-radius: 6px; flex: none;
  background: linear-gradient(140deg, #4a86e8 0%, #2a5fd6 45%, #0f8a5f 100%);
  box-shadow: 0 1px 3px rgba(42,95,214,.4);
}
.topnav { display: flex; gap: 28px; }
.topnav a { color: var(--ink-2); text-decoration: none; font-size: 14.5px; font-weight: 480; }
.topnav a:hover { color: var(--ink); }
.topnav a.on { color: var(--ink); font-weight: 570; }
.topbar > .btn { margin-left: auto; }

footer {
  max-width: 1120px; margin: 0 auto;
  padding: 36px 28px 60px;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  color: var(--ink-3); font-size: 14px;
  border-top: 1px solid var(--line);
}
.foot-brand { display: flex; align-items: center; gap: 9px; font-weight: 600; color: var(--ink-2); }
.foot-links { display: flex; gap: 26px; }
.foot-links a { color: var(--ink-3); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 560; font-size: 15px;
  padding: 11px 20px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .14s, background .14s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--ink); color: #fff;
  box-shadow: 0 1px 2px rgba(22,21,15,.2), 0 6px 16px -8px rgba(22,21,15,.5);
}
.btn-primary:hover { box-shadow: 0 2px 4px rgba(22,21,15,.22), 0 12px 26px -10px rgba(22,21,15,.55); transform: translateY(-1px); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); background: var(--card); box-shadow: var(--sh-1); }
.btn-ghost:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.btn-sm { font-size: 14px; padding: 8px 16px; }
.btn-lg { font-size: 16px; padding: 14px 28px; }

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative; overflow: hidden;
  padding: 96px 0 88px;
  background:
    radial-gradient(1000px 460px at 50% -8%, #ffffff 0%, rgba(255,255,255,0) 70%),
    var(--paper);
}
/* Faint dot grid — depth without decoration competing for attention. */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(22,21,15,.055) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(760px 420px at 50% 22%, #000 0%, transparent 78%);
  pointer-events: none;
}
.hero .wrap { position: relative; }

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 64px; align-items: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 560; color: var(--accent-ink);
  background: var(--accent-soft); border: 1px solid #dce7fa;
  padding: 5px 13px; border-radius: 999px; margin: 0 0 22px;
}
.hero h1 {
  font-size: clamp(38px, 4.4vw, 58px); line-height: 1.04;
  letter-spacing: -0.042em; font-weight: 680; margin-bottom: 22px;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(96deg, #2a5fd6 10%, #0f8a5f 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { color: var(--ink-2); font-size: 18px; line-height: 1.6; max-width: 46ch; margin: 0 0 32px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.hero-stats { color: var(--ink-3); font-size: 13.5px; margin: 0; }
.hero-stats strong { color: var(--ink-2); font-weight: 620; }

/* ------------------------------------------------------- digest preview */

.digest {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  overflow: hidden;
}
.digest-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 13px 18px; border-bottom: 1px solid var(--line); background: #fcfcfb;
}
.dotrow { display: flex; gap: 6px; }
.dotrow i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); display: block; }
.digest-title { font-size: 12.5px; color: var(--ink-3); margin-left: 8px; font-family: var(--mono); }
.digest-head { padding: 22px 24px 6px; }
.digest-head h3 { font-size: 17px; margin-bottom: 4px; letter-spacing: -0.02em; }
.digest-head p { color: var(--ink-3); font-size: 13px; margin: 0; }
.digest-list { list-style: none; margin: 0; padding: 12px 12px 16px; display: grid; gap: 4px; }
.digest-list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px;
  padding: 12px; border-radius: var(--r-sm);
}
.digest-list li:hover { background: #fafaf8; }
.chip {
  font-size: 10.5px; font-weight: 640; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px; white-space: nowrap; align-self: start;
  border: 1px solid currentColor;
}
.chip-security { color: var(--sec-critical); background: #fdf1f1; }
.chip-withdrawn { color: var(--sec-serious); background: #fdf4ee; }
.chip-breaking { color: var(--sec-warn); background: #fdf8e9; }
.chip-deprecated { color: var(--sec-warn); background: #fdf8e9; }
.chip-update { color: var(--ink-3); background: #f6f5f2; }
.digest-pkg { font-weight: 620; font-size: 14.5px; letter-spacing: -0.01em; }
.digest-ver { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); margin-left: 7px; }
.digest-text { color: var(--ink-2); font-size: 13px; margin: 3px 0 0; line-height: 1.5; }
.digest-foot {
  padding: 13px 24px; border-top: 1px solid var(--line);
  background: #fcfcfb; color: var(--ink-3); font-size: 12.5px;
}

/* ---------------------------------------------------------------- sections */

.section { padding: 88px 0; }
.section.band { background: var(--band); border-block: 1px solid var(--line); }
.section-title { font-size: clamp(26px, 3vw, 36px); font-weight: 670; letter-spacing: -0.034em; margin-bottom: 14px; }
.section-sub { color: var(--ink-2); font-size: 17px; max-width: 60ch; margin: 0 0 44px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.section-head .section-title { margin-bottom: 0; }
.section-head .count { color: var(--ink-3); font-size: 14px; }
.more { font-size: 15px; text-decoration: none; font-weight: 550; }
.more:hover { text-decoration: underline; }
.center { text-align: center; }
.center .section-sub { margin-inline: auto; }

/* -------------------------------------------------------------- how it works */

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.steps li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; box-shadow: var(--sh-1); }
.step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--accent-soft); color: var(--accent-ink);
  border: 1px solid #dce7fa;
  font-size: 13.5px; font-weight: 680; margin-bottom: 16px;
}
.steps h3 { font-size: 17.5px; font-weight: 630; margin-bottom: 8px; }
.steps p { color: var(--ink-2); font-size: 15px; margin: 0; }

/* --------------------------------------------------------------- sources */

.sources { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.source {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 22px; box-shadow: var(--sh-1);
}
.source-rank { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.source h3 { font-size: 15.5px; font-weight: 620; margin: 8px 0 6px; letter-spacing: -0.015em; }
.source p { color: var(--ink-3); font-size: 13px; margin: 0 0 14px; }
.source-bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.source-bar span { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.source-n { font-size: 12.5px; color: var(--ink-2); margin-top: 8px; font-weight: 550; }

.steps-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* ------------------------------------------------------------- showcase */

.showcase { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; }
.showcase-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 22px 26px 18px; border-bottom: 1px solid var(--line); }
.showcase-name { font-size: 22px; font-weight: 660; letter-spacing: -0.03em; }
.showcase-meta { font-size: 13.5px; color: var(--ink-3); }
.showcase-signals { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px 34px; padding: 24px 26px; }
.showcase-tl { padding: 6px 26px 22px; }
.showcase-tl .tline-track { height: 40px; }
.showcase-tl .tmark { height: 22px; }
.showcase-tl .tmark.is-pre { height: 13px; }
.showcase-tl .tmark.is-yank { height: 30px; }
.showcase-cap { font-size: 12.5px; color: var(--ink-3); margin: 9px 0 0; }

.joined { font-size: 17px; color: var(--sec-good); font-weight: 550; margin-bottom: 26px; }

/* --------------------------------------------------------------- pricing */

.tiers { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); align-items: start; max-width: 860px; margin: 0 auto; }
.tier { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px; position: relative; box-shadow: var(--sh-1); }
.tier-feature { border-color: #bcd0f5; box-shadow: var(--sh-2); }
.tier-badge {
  position: absolute; top: -12px; left: 34px;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 640; letter-spacing: .07em;
  text-transform: uppercase; padding: 5px 13px; border-radius: 999px;
  box-shadow: 0 3px 10px -3px rgba(42,95,214,.6);
}
.tier h3 { font-size: 18px; font-weight: 640; margin-bottom: 12px; }
.tier-price { font-size: 38px; font-weight: 690; letter-spacing: -0.04em; margin: 0; line-height: 1; }
.tier-price span { font-size: 16px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.tier-note { color: var(--ink-3); font-size: 14px; margin: 8px 0 24px; }
.ticks { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 27px; font-size: 15px; color: var(--ink-2); }
.ticks li::before {
  content: ""; position: absolute; left: 3px; top: 7px;
  width: 6px; height: 11px; border: solid var(--sec-good);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ticks strong { color: var(--ink); font-weight: 620; }

/* ------------------------------------------------------------ ecosystems */

.eco-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.eco-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 24px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); text-decoration: none; color: var(--ink);
  box-shadow: var(--sh-1);
  transition: border-color .16s, transform .16s, box-shadow .16s;
}
a.eco-card:hover { border-color: #bcd0f5; transform: translateY(-3px); box-shadow: var(--sh-2); }
.eco-name { font-size: 19px; font-weight: 640; letter-spacing: -0.028em; }
.eco-registry { color: var(--ink-3); font-size: 12.5px; margin-bottom: 14px; }
.eco-count { font-size: 15px; color: var(--ink-2); font-weight: 560; }
.eco-notes { font-size: 13px; color: var(--ink-3); }
.eco-card.is-soon { background: transparent; box-shadow: none; border-style: dashed; }
.eco-card.is-soon .eco-name, .eco-card.is-soon .eco-registry { color: var(--ink-3); }
.eco-card.is-soon .eco-count { font-style: italic; font-weight: 400; color: var(--ink-3); }

/* -------------------------------------------------------------- top list */

.toplist { list-style: none; padding: 0; margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden; }
.toplist li {
  display: grid; grid-template-columns: 40px minmax(110px, auto) 1fr auto;
  align-items: baseline; gap: 16px;
  padding: 15px 22px; border-bottom: 1px solid var(--line);
}
.toplist li:last-child { border-bottom: none; }
.toplist li:hover { background: #fafaf8; }
.rank { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.toplist-name { font-weight: 620; text-decoration: none; font-size: 15.5px; }
.toplist-name:hover { text-decoration: underline; }
.toplist-sum { color: var(--ink-3); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toplist-dl { font-size: 15px; font-weight: 630; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.toplist-dl .unit { display: block; font-size: 11px; font-weight: 400; color: var(--ink-3); }

/* --------------------------------------------------------------- closer */

.closer {
  border-top: 1px solid var(--line);
  background:
    radial-gradient(700px 300px at 50% 0%, #ffffff 0%, rgba(255,255,255,0) 72%),
    var(--band);
  padding: 92px 28px; text-align: center;
}
.closer-inner { max-width: 620px; margin: 0 auto; }
.closer h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 680; letter-spacing: -0.036em; margin-bottom: 16px; }
.closer p { color: var(--ink-2); font-size: 17px; margin: 0 0 30px; }
.waitlist { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.waitlist input {
  font: inherit; font-size: 16px; padding: 13px 22px;
  flex: 1 1 260px; min-width: 0;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--card); color: var(--ink); box-shadow: var(--sh-1);
}
.waitlist input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(42,95,214,.13); }
.closer-note { color: var(--ink-3); font-size: 13.5px; margin: 20px 0 0; }

.hero-search { display: flex; gap: 10px; max-width: 560px; margin: 0 auto 34px; }
.hero-search input {
  flex: 1 1 200px; min-width: 0; font: inherit; font-size: 16px; padding: 13px 22px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--card); color: var(--ink); box-shadow: var(--sh-1);
}
.hero-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(42,95,214,.13); }

/* -------------------------------------------------------------- listings */

.page-head { padding: 6px 0 28px; }
.page-head h1 { font-size: clamp(32px, 4vw, 44px); font-weight: 680; letter-spacing: -0.038em; margin-bottom: 12px; }
.page-head .eyebrow { margin-bottom: 16px; }
.lede { color: var(--ink-2); font-size: 17px; max-width: 64ch; margin: 0 0 26px; }
.count { color: var(--ink-3); font-size: 14px; margin: 14px 0 0; }

.page-search { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.page-search input {
  flex: 1 1 200px; min-width: 0; max-width: 380px; font: inherit; font-size: 15.5px;
  padding: 12px 20px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--card); color: var(--ink); box-shadow: var(--sh-1);
}
.page-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(42,95,214,.13); }
.page-search .clear { font-size: 14px; color: var(--ink-3); }

/* Package grid. Descriptions were dropped: at four cards across they truncated
   into noise, and the numbers are what a visitor scans this page for. */
.pkggrid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.pkggrid > li { display: flex; }
.pkggrid a {
  display: flex; flex-direction: column; flex: 1;
  padding: 18px 20px 16px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); box-shadow: var(--sh-1);
  text-decoration: none; color: var(--ink);
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.pkggrid a:hover { border-color: #bcd0f5; box-shadow: var(--sh-2); transform: translateY(-2px); }
.card-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.segmented { display: inline-flex; background: #efedE7; border-radius: 999px; padding: 3px; gap: 2px; }
.segmented a {
  font-size: 13.5px; font-weight: 550; color: var(--ink-2);
  text-decoration: none; padding: 7px 15px; border-radius: 999px; white-space: nowrap;
}
.segmented a:hover { color: var(--ink); }
.segmented a.on { background: var(--card); color: var(--ink); box-shadow: var(--sh-1); }

.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.card-name {
  font-size: 17px; font-weight: 650; letter-spacing: -0.028em;
  line-height: 1.25; word-break: break-word;
}
.pkggrid a:hover .card-name { color: var(--accent); }
.card-sub { display: block; font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.card-sub code { font-size: 11.5px; color: var(--ink-2); }

.card-spark { display: flex; align-items: flex-end; gap: 2px; height: 24px; margin: 16px 0 14px; }
.card-spark > span { flex: 1; background: var(--accent); border-radius: 2px 2px 0 0; min-width: 0; }
.card-spark > span.zero { background: var(--line); }
.pkggrid a:hover .card-spark > span { background: var(--accent-ink); }
.pkggrid a:hover .card-spark > span.zero { background: var(--line-2); }

/* One fact per line: a wrapping fact line made the cards ragged. */
.card-facts {
  display: grid; gap: 3px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2); margin-top: auto;
}
.grid-empty { grid-column: 1 / -1; color: var(--ink-3); font-size: 15px; padding: 40px 0; text-align: center; }

.pager { display: flex; gap: 18px; align-items: center; justify-content: center; margin-top: 36px; font-size: 14px; }
.pager span { color: var(--ink-3); }

/* ---------------------------------------------------------- package page */

.crumbs { color: var(--ink-3); font-size: 14px; margin-bottom: 18px; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.pkg-head { padding: 0 0 30px; }
.pkg-head h1 { font-size: clamp(34px, 4.4vw, 48px); font-weight: 690; letter-spacing: -0.042em; margin-bottom: 10px; }
.pkg-facts { color: var(--ink-2); font-size: 15px; margin: 16px 0 0; display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.pkg-facts code {
  font-size: 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 4px 11px; font-weight: 620; box-shadow: var(--sh-1);
}
.dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); display: inline-block; }

.health { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px 34px; box-shadow: var(--sh-2); }
.health-title {
  font-size: 12px; color: var(--ink-3); font-weight: 620;
  text-transform: uppercase; letter-spacing: 0.11em; margin-bottom: 24px;
}
.health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px 40px; }
.hrow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.hdot { width: 9px; height: 9px; border-radius: 50%; margin-top: 7px; flex: none; }
.hdot-good { background: var(--sec-good); }
.hdot-warn { background: var(--sec-warn); }
.hdot-bad { background: var(--sec-critical); }
.hdot-none { background: var(--line-2); }
.hrow-main { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.018em; line-height: 1.35; }
.hrow-sub { margin: 3px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.45; }

.spark { display: flex; align-items: flex-end; gap: 3px; height: 28px; margin-top: 9px; }
.spark-bar { width: 9px; border-radius: 3px 3px 0 0; flex: none; background: var(--accent); position: relative; }
.spark-bar:hover::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%); white-space: nowrap;
  background: var(--ink); color: #fff; font-size: 11.5px;
  padding: 4px 9px; border-radius: 6px; font-weight: 500;
}

.inline-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin: 26px 0 0;
  padding: 24px 28px; border-radius: var(--r-lg);
  border: 1px solid #cfddf8; background: linear-gradient(180deg, #f5f8fe, #eef3fd);
}
.inline-cta strong { font-size: 16.5px; }
.inline-cta p { margin: 4px 0 0; color: var(--ink-2); font-size: 14.5px; }

/* -------------------------------------------------------- release timeline */

.tline { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px 18px; box-shadow: var(--sh-1); }
.tline-track { position: relative; height: 64px; border-bottom: 1px solid var(--line-2); }
.tline-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.tmark {
  position: absolute; bottom: 0; width: 2px; height: 34px;
  margin-left: -1px; border-radius: 1px;
  background: var(--accent); opacity: .75;
}
.tmark.is-pre { height: 20px; opacity: .4; }
.tmark.is-yank { background: var(--sec-critical); opacity: 1; height: 46px; }
.tmark:hover { opacity: 1; height: 56px; z-index: 2; }
.tmark:hover::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); white-space: nowrap; z-index: 5;
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 500;
  padding: 6px 11px; border-radius: 7px;
}
.tline-axis { position: relative; height: 18px; margin-top: 7px; }
.tline-axis span { position: absolute; transform: translateX(-50%); font-size: 11.5px; color: var(--ink-3); }
.tline figcaption { display: flex; align-items: center; gap: 20px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); flex-wrap: wrap; }
.legend-item { display: inline-flex; align-items: center; gap: 7px; }
.key { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.key-fill { background: var(--accent); opacity: .75; }
.key-pre { background: var(--accent); opacity: .4; }
.key-yank { background: var(--sec-critical); }
.chart-note { margin-left: auto; color: var(--ink-3); }

/* --------------------------------------------------------------- timeline */

.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.timeline li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 22px; box-shadow: var(--sh-1); }
.tl-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tl-version { font-family: var(--mono); font-size: 15.5px; font-weight: 660; }
.tl-date { color: var(--ink-3); font-size: 13.5px; }
.yank-reason { color: var(--ink-2); font-size: 14px; margin: 8px 0 0; }
.no-note { color: var(--ink-3); font-size: 13.5px; margin: 8px 0 0; }

details { margin-top: 12px; }
summary { cursor: pointer; font-size: 14px; color: var(--ink-2); font-weight: 540; }
summary:hover { color: var(--ink); }
/* Rendered release notes. The body used to be a <pre> of raw markdown; it now
   holds real markup, so the job here is to keep a stranger's heading levels
   from competing with our own page. Everything inside is scaled down and
   flattened: an <h1> in a changelog means "this release", not "this page". */
.note-body {
  font-size: 13.5px; line-height: 1.65; color: var(--ink-2); background: #fbfaf7;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 16px 18px; margin: 12px 0 0; max-height: 440px; overflow: auto;
  word-wrap: break-word;
}
.note-body > :first-child { margin-top: 0; }
.note-body > :last-child { margin-bottom: 0; }
.note-body h1, .note-body h2, .note-body h3,
.note-body h4, .note-body h5, .note-body h6 {
  font-size: 13.5px; font-weight: 600; color: var(--ink-1);
  margin: 16px 0 6px; line-height: 1.4;
}
.note-body p { margin: 0 0 10px; }
.note-body ul, .note-body ol { margin: 0 0 10px; padding-left: 20px; }
.note-body li { margin: 3px 0; }
.note-body li > p { margin: 0; }
.note-body a { color: var(--accent); }
.note-body code {
  font-family: var(--mono); font-size: 12px;
  background: #f0efea; border-radius: 3px; padding: 1px 5px;
}
.note-body pre {
  font-family: var(--mono); font-size: 12px; line-height: 1.55;
  background: #f4f2ed; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 12px; margin: 0 0 10px; overflow-x: auto;
}
.note-body pre code { background: none; padding: 0; font-size: inherit; }
.note-body blockquote {
  margin: 0 0 10px; padding-left: 12px;
  border-left: 2px solid var(--line-2); color: var(--ink-3);
}
.note-body hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.note-body table { border-collapse: collapse; margin: 0 0 10px; font-size: 12.5px; }
.note-body th, .note-body td { border: 1px solid var(--line); padding: 5px 9px; text-align: left; }
.note-body th { background: #f4f2ed; font-weight: 600; }
/* Parser gave up; the original text is shown escaped rather than lost. */
.note-body .note-raw { white-space: pre-wrap; background: none; border: 0; padding: 0; }
.note-cut { color: var(--ink-3); font-size: 12.5px; font-style: italic; }
.note-src { font-size: 13px; display: inline-block; margin-top: 10px; text-decoration: none; }
.note-src:hover { text-decoration: underline; }

.flag { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap; }
.flag-bad { border-color: var(--sec-critical); color: var(--sec-critical); background: #fdf1f1; }
.hint { color: var(--ink-3); font-size: 12.5px; margin-left: 8px; font-weight: 400; }
code { font-family: var(--mono); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 46px; }
  .hero { padding: 64px 0 60px; }
}
@media (max-width: 700px) {
  .topnav { display: none; }
  .topbar { gap: 16px; padding: 14px 18px; }
  .section { padding: 52px 0; }
  .hero { padding: 48px 0 44px; }
  .hero h1 { font-size: clamp(30px, 8vw, 40px); }
  .hero-sub { font-size: 16.5px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .closer { padding: 60px 18px; }
  .toolbar { gap: 12px; }
  .segmented { width: 100%; }
  .segmented a { flex: 1; text-align: center; }
  .pkg-sum { display: none; }
  main { padding: 28px 18px 16px; }
  .wrap { padding: 0 18px; }
  .tline { padding: 24px 16px 14px; }
  .health { padding: 24px 20px; }
}

/* ================================================================== admin
   Internal pages: dense on purpose, never linked from the public site. */

body.admin main { max-width: 1120px; }
body.admin .topbar { position: static; }
.brand-sub { color: var(--ink-3); font-weight: 400; margin-left: 8px; font-size: 13px; }
body.admin h1 { font-size: 26px; margin: 4px 0 6px; }
body.admin h2 { font-size: 17px; margin: 0 0 14px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 22px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 18px; }
.kpi-value { font-size: 30px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; }
.kpi-hero .kpi-value { font-size: 42px; }
.kpi-label { color: var(--ink-2); font-size: 13px; margin-top: 4px; }
.kpi-sub { color: var(--ink-3); font-size: 12px; margin-top: 6px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 20px; margin-bottom: 22px; }

.bars { display: grid; gap: 7px; margin: 4px 0 20px; }
.bar-row { display: grid; grid-template-columns: 200px 1fr 70px; align-items: center; gap: 12px; }
.bar-label { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; }
.bar-track { height: 16px; background: #efeee9; border-radius: 4px; }
.bar-fill { display: block; height: 100%; border-radius: 4px; min-width: 3px; }
.bar-value { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; font-weight: 620; }
.sub { color: var(--ink-3); font-size: 13px; margin: -6px 0 16px; max-width: 66ch; }
.muted-row th, .muted-row td { color: var(--ink-3); }

table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); }
table.data thead th { color: var(--ink-3); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
table.data tbody th { font-weight: 500; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 18px; }
.listing tbody th a { font-weight: 620; text-decoration: none; }
.summary { display: block; color: var(--ink-3); font-size: 12px; font-weight: 400; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { color: var(--ink-3); padding: 24px 0; }

.filters { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.filters input[type=search], .filters select, .filters button {
  font: inherit; padding: 7px 11px; border: 1px solid var(--line-2);
  border-radius: 7px; background: var(--card); color: var(--ink);
}
.filters input[type=search] { flex: 1 1 200px; min-width: 0; }
.filters button { cursor: pointer; font-weight: 550; }
.filters .clear { font-size: 13px; color: var(--ink-3); }

.swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none; margin-right: 7px; vertical-align: -1px; background: #c3c2b7; }
.src-forge_releases { background: #2a78d6; }
.src-repo_changelog  { background: #eb6834; }
.src-docs_dir        { background: #1baf7a; }
.src-sdist_archive   { background: #eda100; }
.src-follow_link     { background: #e87ba4; }
.src-none            { background: #c3c2b7; }
.src-cell { white-space: nowrap; }
.eco { font-size: 11px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; margin-left: 6px; }
.flag-warn { border-color: var(--sec-warn); color: var(--ink); }
.flag-multi { border-color: var(--accent); color: var(--accent); }
.eco-tabs { display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; }
.eco-tabs a { font-size: 13px; padding: 5px 12px; border-radius: 20px; border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; background: var(--card); }
.eco-tabs a.on { border-color: var(--ink); color: var(--ink); font-weight: 550; }
.report { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 18px; margin-bottom: 24px; }
.report > summary { font-size: 14px; font-weight: 550; color: var(--ink); }
.reason { color: var(--ink-2); font-size: 13px; }
.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 18px; margin-bottom: 22px; font-size: 14px; }
.meta > div > span:first-child { display: block; color: var(--ink-3); font-size: 12px; margin-bottom: 2px; }
.note-reason { font-size: 13px; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--sec-warn); border-radius: 6px; padding: 10px 14px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin: 0; }
.facts dt { color: var(--ink-3); font-size: 12px; }
.facts dd { margin: 2px 0 0; font-size: 26px; font-weight: 630; letter-spacing: -0.02em; }
.facts p { color: var(--ink-2); font-size: 13px; margin: 6px 0 0; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 0; margin: 0 0 18px; }
.legend li { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.stack { display: flex; height: 30px; border-radius: 5px; gap: 2px; margin-bottom: 16px; }
.stack-seg { border-radius: 3px; min-width: 3px; }

/* Commits shown in place of a changelog. Deliberately quieter than a real
   release note: dashed border and muted heading, so the difference is visible
   before the label is read. */
details.is-commits > summary { color: var(--ink-3); font-weight: 520; }
details.is-commits .note-body {
  background: #fcfcfa;
  border-style: dashed;
  border-color: var(--line-2);
}

/* Top packages, one column per ecosystem. Two rankings side by side rather
   than one merged list: `semver` exists on both registries as different
   packages, and their download counts are not comparable. */
.toplist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; }
.toplist-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.toplist-head h3 { font-size: 16px; letter-spacing: -0.02em; }
.toplist-col .toplist li { grid-template-columns: 26px minmax(0, 1fr) auto; }
.toplist-col .toplist-name { font-weight: 560; }
/* The registry replaces the rank number in search results: which registry a
   package came from is part of the answer there, not decoration. */
.rank-eco { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; letter-spacing: .01em; }

/* --------------------------------------------------------------------------
   Account screens.

   The public pages sell; these are worked in. Same type and colour, but no
   hero, no gradient and no call to action: someone who is already paying is
   here to read numbers, and a marketing band above them is noise.
   -------------------------------------------------------------------------- */

main.narrow { max-width: 520px; }

.topbar-account { display: flex; align-items: center; gap: 12px; margin: 0; }
.topbar-email { font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 640px) { .topbar-email { display: none; } }

.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.page-head h1 { font-size: 28px; letter-spacing: -0.025em; margin: 0; }

/* forms */
.form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 32px; box-shadow: var(--sh-1); }
.form-card h1 { font-size: 24px; letter-spacing: -0.025em; margin: 0 0 8px; }
.form-stack { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }
.form-stack label, .inline-form label { display: flex; flex-direction: column; gap: 6px; }
.form-stack label > span, .inline-form label > span { font-size: 13px; font-weight: 560; }
.form-stack small { color: var(--ink-3); font-size: 12px; }
input[type=email], input[type=password], input[type=text] {
  font: inherit; font-size: 14px; padding: 10px 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink); width: 100%;
}
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.form-error {
  background: #fdf1f1; border: 1px solid #f2d2d2; color: var(--sec-critical);
  border-radius: var(--r-sm); padding: 10px 12px; font-size: 13.5px; margin: 16px 0 0;
}
.form-alt { font-size: 13.5px; color: var(--ink-2); margin: 20px 0 0; }
.form-note { font-size: 12.5px; color: var(--ink-3); margin: 8px 0 0; }
.inline-form { display: flex; align-items: flex-end; gap: 12px; margin: 20px 0 28px; }
.inline-form label { flex: 1; }

/* project list */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.project-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--sh-1); }
.project-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.project-card h2 { font-size: 17px; letter-spacing: -0.02em; margin: 0; }
.project-card h2 a { color: inherit; text-decoration: none; }
.project-card h2 a:hover { color: var(--accent); }
.project-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0; }
.project-stats dt { font-size: 11px; color: var(--ink-3); line-height: 1.3; }
.project-stats dd { margin: 3px 0 0; font-size: 20px; font-weight: 630; letter-spacing: -0.02em; }
.project-stats .bad dd { color: var(--sec-critical); }
.project-stats .warn dd { color: var(--sec-serious); }
.project-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.warn-text { color: var(--sec-serious); }

.empty-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 32px; max-width: 620px; }
.empty-card h2 { font-size: 19px; letter-spacing: -0.02em; margin: 0 0 10px; }
.shell { background: #1d1c17; color: #eae7dd; border-radius: var(--r-sm); padding: 14px 16px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.65; }
.shell code { background: none; color: inherit; padding: 0; }

/* findings: three sections, three different actions */
.finding { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: var(--r-sm); padding: 20px 24px; margin: 0 0 20px; }
.finding h2 { font-size: 17px; letter-spacing: -0.02em; margin: 0 0 6px; }
.finding > p { color: var(--ink-2); font-size: 13.5px; margin: 0 0 14px; }
.finding.bad { border-left-color: var(--sec-critical); }
.finding.good { border-left-color: var(--sec-good); }
.finding.quiet { border-left-color: var(--line); background: transparent; box-shadow: none; }
.finding.quiet summary { font-size: 14px; font-weight: 560; cursor: pointer; }
.finding-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.finding-list li { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.finding-list li:last-child { border-bottom: none; padding-bottom: 0; }
.finding-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 14px; }
.finding-head code { font-size: 12.5px; }
.gap { font-size: 12px; color: var(--sec-serious); font-variant-numeric: tabular-nums; }
.via { font-size: 12px; color: var(--ink-3); }
.reason { font-size: 13px; color: var(--ink-2); margin: 6px 0 0; }
.notice { background: var(--accent-soft); border: 1px solid #dbe6fa; border-radius: var(--r-sm); padding: 12px 16px; font-size: 13.5px; color: var(--accent-ink); margin: 0 0 22px; }

.key-reveal { background: var(--accent-soft); border: 1px solid #dbe6fa; border-radius: var(--r); padding: 24px; margin-bottom: 24px; }
.key-reveal h2 { font-size: 17px; margin: 0 0 8px; }
.key-reveal p { font-size: 13.5px; color: var(--ink-2); margin: 0 0 12px; }

.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th { text-align: left; font-size: 11.5px; color: var(--ink-3); font-weight: 560; padding: 0 12px 8px 0; border-bottom: 1px solid var(--line); }
.data-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.data-table form { margin: 0; }
.muted-row { color: var(--ink-3); }
.danger-form { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }