/* eol.network */

/* ================================================================
   Properties
   ================================================================ */

:root {
  /* Font stacks live in the POLISH/WARMTH layers at the end of this file
     (single source of truth: InterVariable + system mono). */
  --measure: 64rem;
}

/* Operator's Console — dark-by-default with rust-red signal accent */
html[data-theme="light"] {
  --bg: #e9ecf0;
  --surface: #ffffff;
  --surface-alt: #dde1e7;
  --text: #1a1718;
  --text-secondary: #4e5560;
  --text-muted: #838a94;
  --rule: #d0d5dc;
  --rule-strong: #bac0c9;
  --link: #a8332a;
  --link-hover: #7c2419;
  --accent: #b54023;

  --eol-bg: #f2ddd6; --eol-border: #c46451; --eol-text: #7a1f10;
  --eos-bg: #f0dfb8; --eos-border: #ba9550; --eos-text: #5e3a0e;
  --warn-bg: #eee6c8; --warn-border: #b8a655; --warn-text: #5a4810;
  --ok-bg: #dbe5cc; --ok-border: #87a25e; --ok-text: #2f3f12;
}

html[data-theme="dark"] {
  --bg: #15131b;
  --surface: #1f1c25;
  --surface-alt: #2a2632;
  --text: #e8e3d8;
  --text-secondary: #a39e94;
  --text-muted: #7a756c;
  --rule: #2e2a36;
  --rule-strong: #423d4c;
  --link: #e85a3c;
  --link-hover: #ff7a5a;
  --accent: #e85a3c;

  --eol-bg: #2e1714; --eol-border: #8a3520; --eol-text: #f0a890;
  --eos-bg: #2a210e; --eos-border: #7f5418; --eos-text: #f0c870;
  --warn-bg: #28220d; --warn-border: #6b5614; --warn-text: #ead07a;
  --ok-bg: #182410; --ok-border: #3d5e1d; --ok-text: #b3d186;
}

/* ================================================================
   Base
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; overflow-x: hidden; }
body {
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
h1 { font-family: var(--display); font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin-bottom: 0.25rem; letter-spacing: -0.02em; }
h2 {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  margin: 2rem 0 0.75rem;
  letter-spacing: 0;
  color: var(--text);
}
h2:first-child { margin-top: 0; }
h3 { font-family: var(--display); font-size: 1rem; font-weight: 600; line-height: 1.3; margin: 1.25rem 0 0.5rem; }
p { margin-bottom: 0.75rem; }
code, .mono { font-family: var(--mono); font-size: 0.875em; }

/* ================================================================
   Shell: header, wrap, footer
   ================================================================ */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.brand {
  font-family: var(--display);
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  letter-spacing: -0.03em;
  gap: 0;
}
.brand-eol { font-size: 1.25rem; }
.brand-dot { color: var(--accent); }
.brand-net { font-size: 0.8125rem; color: var(--text-secondary); font-weight: 600; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand:hover .brand-eol { color: var(--accent); }
.brand:hover .brand-net { color: var(--text); }
.header-search {
  flex: 1;
  max-width: 22rem;
  position: relative;
}
.is-home .header-search { display: none; }
.search-input {
  width: 100%;
  font-family: var(--mono);
  font-size: 0.8125rem;
  padding: 0.375rem 0.625rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  outline: none;
}
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { border-color: var(--accent); }
.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 20rem;
  overflow-y: auto;
  z-index: 200;
  display: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.search-results.active { display: block; }
.search-hit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--rule);
}
.search-hit:last-child { border-bottom: none; }
.search-hit:hover { background: var(--surface-alt); text-decoration: none; }
.search-hit .hit-sku { font-weight: 600; }
.search-hit .hit-sku .hit-id { font-family: var(--mono); font-weight: 400; color: var(--text-muted); font-size: 0.75rem; margin-left: 0.4rem; }
.search-hit .hit-vendor { color: var(--text-muted); font-size: 0.6875rem; }
.search-hit .hit-date { color: var(--text-muted); font-size: 0.6875rem; margin-left: auto; }
.search-hit-family { background: var(--surface); border-left: 3px solid var(--accent); }
.search-hit-family .hit-sku { color: var(--accent); }
.hit-family-tag {
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--text-muted);
  background: var(--surface-alt);
  padding: 0.05rem 0.35rem;
  border-radius: 2px;
  margin-left: 0.3rem;
}
.search-hit .hit-status { margin-left: auto; display: flex; gap: 2px; align-items: center; }
.sku-sub { font-family: var(--mono); font-size: 0.6875rem; color: var(--text-muted); margin-top: 0.125rem; font-weight: 400; }
.product-sku { font-family: var(--mono); font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.25rem; }
.product-sku code { background: none; padding: 0; }
.header-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.8125rem;
  flex-shrink: 0;
}
.header-nav > a { color: var(--text-secondary); white-space: nowrap; }
.header-nav > a:hover { color: var(--text); text-decoration: none; }
.header-nav .muted { color: var(--text-muted); }
.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8125rem;
  flex-shrink: 0;
}
.header-right .muted { color: var(--text-muted); }

.dropdown { position: relative; }
.dropdown-btn {
  all: unset;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}
.dropdown-btn:hover { color: var(--text); background: var(--surface-alt); }
.dropdown-arrow { font-size: 0.625rem; color: var(--text-muted); }

.dropdown-panel {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  min-width: 13rem;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  box-shadow: 0 6px 20px var(--shadow);
  display: none;
  flex-direction: column;
  padding: 0.25rem 0;
  z-index: 150;
}
.dropdown.open .dropdown-panel { display: flex; }
.dropdown-panel a {
  padding: 0.375rem 0.875rem;
  color: var(--text);
  font-size: 0.8125rem;
  white-space: nowrap;
}
.dropdown-panel a:hover {
  background: var(--surface-alt);
  text-decoration: none;
  color: var(--accent);
}

/* Mega-menu: multi-column vendor grid */
.dropdown-mega {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  min-width: 0;
  width: max-content;
  max-width: min(42rem, 90vw);
  padding: 0.75rem;
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.mega-grid a {
  padding: 0.3125rem 0.625rem;
  border-radius: 3px;
  font-size: 0.8125rem;
}
.mega-legacy {
  border-top: 1px solid var(--rule);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}
.mega-legacy-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 0.625rem 0.25rem;
}
.mega-legacy-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.mega-legacy-list a {
  padding: 0.25rem 0.625rem;
  border-radius: 3px;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.mega-legacy-list a:hover { color: var(--accent); }
.theme-btn {
  all: unset;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--text-muted);
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.theme-btn:hover { color: var(--text-secondary); border-color: var(--rule-strong); }

.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.25rem 0.375rem;
  font-size: 1.125rem;
  line-height: 1;
}
.hamburger:hover { color: var(--text); border-color: var(--rule-strong); }

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.5rem;
}

.site-banner {
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 500;
  border-bottom: 1px solid var(--rule);
}
.banner-info  { background: rgba(15, 118, 110, 0.12);  color: var(--accent); }
.banner-warn  { background: rgba(234, 179, 8, 0.15);   color: #b45309; }
.banner-alert { background: rgba(220, 38, 38, 0.12);   color: #b91c1c; }
[data-theme="dark"] .banner-warn  { color: #fbbf24; }
[data-theme="dark"] .banner-alert { color: #fca5a5; }

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
}
.footer-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1rem 1.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  justify-content: space-between;
}
.footer-inner a { color: var(--text-muted); }
.footer-freshness time { font-family: var(--mono); }
.footer-freshness .fine { color: var(--text-muted); opacity: 0.75; }

/* ================================================================
   Breadcrumbs
   ================================================================ */

.crumbs {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--text); }
.crumbs > a:nth-of-type(2),
.crumbs > a.vendor-crumb {
  color: var(--text-secondary);
  font-weight: 600;
}
.crumbs > a:nth-of-type(2):hover,
.crumbs > a.vendor-crumb:hover { color: var(--text); }
.crumbs .sep { margin: 0 0.35rem; }

/* ================================================================
   Home
   ================================================================ */

.home-hero {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.25rem;
}
h1.home-logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.04em;
  margin-bottom: 0.5rem;
  font-size: unset;
}
.home-logo-eol { font-size: 3.5rem; color: var(--text); }
.home-logo-dot { color: var(--accent); }
.home-logo-net { font-size: 2.25rem; color: var(--text-secondary); font-weight: 700; letter-spacing: -0.03em; }
.home-hero > p { color: var(--text-secondary); font-size: 0.8125rem; margin-bottom: 0.375rem; }
.home-hero > p.home-stats {
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}
.home-stats b {
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.home-stats .dot { color: var(--rule-strong); margin: 0 0.15rem; }
.home-stats .stat-kev a { color: var(--eol-text); text-decoration: none; }
.home-stats .stat-kev a:hover { text-decoration: underline; }
.home-stats .stat-kev b { color: var(--eol-text); }
.home-search {
  position: relative;
  max-width: 40rem;
  margin-bottom: 1rem;
}
.home-search-input {
  width: 100%;
  font-family: var(--mono);
  font-size: 0.9375rem;
  padding: 0.5rem 0.875rem;
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--rule-strong);
  border-radius: 5px;
  outline: none;
}
.home-search-input::placeholder { color: var(--text-muted); }
.home-search-input:focus { border-color: var(--accent); }
.home-search .search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 2px solid var(--accent);
  border-top: none;
  border-radius: 0 0 5px 5px;
  max-height: 22rem;
  overflow-y: auto;
  z-index: 200;
  display: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.home-search .search-results.active { display: block; }
.home-vendors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.5rem;
  margin-top: 1rem;
}
.vendor-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.1s;
  min-width: 0;
}
.vendor-card:hover { border-color: var(--accent); text-decoration: none; }
.vendor-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 1.125rem;
  width: 2.25rem;
}
.vendor-card-logo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}
[data-theme="dark"] .vendor-card-logo img,
[data-theme="dark"] img.vendor-logo,
[data-theme="dark"] img.vendor-wordmark { filter: brightness(0) invert(1); opacity: 0.85; }
.vendor-card-name {
  font-size: 0.8125rem;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vendor-card-count {
  font-size: 0.6875rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 0.5rem;
}
.two-col h2 { margin-top: 0; font-size: 0.9375rem; }

.compact-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--surface); border-radius: 8px;
  border: 1px solid var(--rule);
}
.compact-table thead th {
  text-align: left;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 0.4rem 0.75rem;
  border-bottom: 2px solid var(--rule);
  background: var(--surface-alt);
  position: sticky;
  top: 0;
  z-index: 2;
}
.compact-table thead th:first-child { border-radius: 7px 0 0 0; }
.compact-table thead th:last-child { border-radius: 0 7px 0 0; }
.compact-table td {
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.8125rem;
}
.compact-table tbody tr:last-child td { border-bottom: none; }
.compact-table tbody tr:last-child td:first-child { border-radius: 0 0 0 7px; }
.compact-table tbody tr:last-child td:last-child { border-radius: 0 0 7px 0; }
.td-date { font-family: var(--mono); font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; }
.td-sku { max-width: 0; overflow: hidden; }
.td-sku a {
  font-family: var(--mono); font-weight: 500; font-size: 0.8125rem;
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.td-vendor { color: var(--text-muted); font-size: 0.75rem; }

/* "Recently End of Sale" etc. — past-tense tables render muted so the
   reader doesn't scan them expecting actionable near-future work. */
.compact-table.is-past td,
.compact-table.is-past td a { color: var(--text-muted); }
.compact-table.is-past .td-date { opacity: 0.9; }
.section-badge-past {
  background: var(--surface-alt);
  color: var(--text-muted);
  border-color: var(--rule);
}
.section-badge-risk {
  background: var(--eol-bg);
  color: var(--eol-text);
  border-color: var(--eol-border);
}

.recent-kev {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.recent-kev h2 { margin-top: 0; font-size: 0.9375rem; }

.kev-home-disclaimer {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0.75rem 0 0;
  line-height: 1.5;
}

/* Dense KEV feed on the home page. Rows are scan-first: vulnerability
   name is the anchor, CVE ID and product live on the meta line below. */
.kev-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
}
.kev-feed-item {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  column-gap: 0.875rem;
  align-items: baseline;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--rule);
}
.kev-feed-item:last-child { border-bottom: none; }
.kev-feed-item.is-ransom { background: rgba(220, 38, 38, 0.04); }
.kev-feed-item.is-ransom .kev-feed-date { color: var(--eol-text); }
.kev-feed-date {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.kev-feed-body {
  min-width: 0; /* let children truncate inside the grid cell */
}
.kev-feed-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  line-height: 1.35;
}
.kev-feed-title:hover { color: var(--link); text-decoration: underline; }
.kev-feed-body .kev-flag {
  margin-left: 0.375rem;
  vertical-align: 0.08em;
}
.kev-feed-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.125rem;
  line-height: 1.4;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.4375rem;
}
.kev-feed-meta code {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text);
  white-space: nowrap;
}
.kev-feed-sep { color: var(--text-muted); }
.kev-feed-product { color: var(--text-secondary); }
.kev-feed-more { color: var(--text-muted); font-style: italic; }

@media (max-width: 32rem) {
  .kev-feed-item {
    grid-template-columns: 1fr;
    row-gap: 0.125rem;
  }
}

/* ================================================================
   Lifecycle indicator
   ================================================================ */

.lifecycle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0;
  border: 0;
  background: transparent;
  white-space: nowrap;
  color: var(--text-secondary);
}
.lifecycle .lc-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.lifecycle-dead { color: var(--eol-text); }
.lifecycle-at-risk { color: var(--eos-text); }
.lifecycle-aging { color: var(--warn-text); }
.lifecycle-eos { color: var(--text-secondary); }
.lifecycle-active { color: var(--ok-text); }

/* ================================================================
   Vendor page: series directory
   ================================================================ */

.page-subtitle {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

/* Platform-family index — a scannable 2-3 column list rather than a
   grid of chip buttons. Reads as an index/table of contents; dotted
   leaders visually connect family name to count. */
.series-index {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 3 10rem;
  column-gap: 2rem;
  border-top: 1px solid var(--rule);
}
.series-index li {
  break-inside: avoid;
  border-bottom: 1px solid var(--rule);
}
.series-index a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.45rem 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
.series-index a:hover { color: var(--accent); text-decoration: none; }
.series-index a:hover .sname { text-decoration: underline; text-underline-offset: 2px; }
.series-index .sname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.series-index .num {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.75rem;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.empty-note { color: var(--text-muted); font-size: 0.8125rem; font-style: italic; }

.family-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--surface); border-radius: 8px;
  border: 1px solid var(--rule);
}
.family-table th {
  text-align: left;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--rule);
  background: var(--surface-alt);
  position: sticky;
  top: 0;
  z-index: 2;
}
.family-table th:first-child { border-radius: 7px 0 0 0; }
.family-table th:last-child { border-radius: 0 7px 0 0; }
.family-table td {
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.8125rem;
}
.family-table tbody tr:last-child td { border-bottom: none; }
.family-table tbody tr:last-child td:first-child { border-radius: 0 0 0 7px; }
.family-table tbody tr:last-child td:last-child { border-radius: 0 0 7px 0; }
.family-table .ft-name a {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
.family-table .ft-name a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.family-table .ft-count { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); width: 3.5rem; }
.family-table .ft-date { font-family: var(--mono); font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; width: 7rem; }
.family-table .ft-status { white-space: nowrap; width: 8rem; }
.family-table .ft-kev { text-align: center; width: 3.5rem; }
.fs {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  min-width: 1.3rem;
  text-align: center;
  padding: 0.05rem 0.3rem;
  border-radius: 2px;
  margin-right: 2px;
}
.fs-dead { background: var(--eol-bg); color: var(--eol-text); }
.fs-at-risk { background: var(--eos-bg); color: var(--eos-text); }
.fs-aging { background: var(--warn-bg); color: var(--warn-text); }
.fs-eos { background: var(--surface-alt); color: var(--text-secondary); }
.fs-ok { background: var(--ok-bg); color: var(--ok-text); }

.type-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.type-chip {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--text-secondary);
}
.type-chip .num { color: var(--text-muted); }

/* ================================================================
   Section badges + secondary sections
   ================================================================ */

.section-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.0625rem 0.375rem;
  margin-left: 0.375rem;
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: 0.1em;
}

.section-sub {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  margin: -0.25rem 0 0.75rem 0;
}

.recent-announcements {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.recent-announcements h2 { margin-top: 0; font-size: 0.9375rem; }

.ra-row { cursor: pointer; }
.ra-row:hover { background: var(--surface-alt); }
.ra-count { font-family: var(--mono); font-size: 0.8125rem; color: var(--accent); white-space: nowrap; }
.ra-arrow { font-size: 0.625rem; color: var(--text-muted); transition: transform 0.15s; display: inline-block; }
.ra-row.ra-open .ra-arrow { transform: rotate(90deg); }
.ra-detail { display: none; }
.ra-detail.ra-open { display: table-row; }
.ra-detail td { border-top: none; padding-top: 0.125rem; padding-bottom: 0.125rem; color: var(--text-secondary); font-size: 0.8125rem; }

.software-section {
  margin-top: 2rem;
  padding: 0.75rem 1rem;
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  border-radius: 5px;
}
.software-section[open] { padding-bottom: 1.25rem; }
.software-section > summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  list-style: none;
  padding: 0.25rem 0;
}
.software-section > summary::-webkit-details-marker { display: none; }
.software-section > summary::before {
  content: "▸";
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-right: 0.5rem;
  transition: transform 0.15s;
  display: inline-block;
}
.software-section[open] > summary::before { transform: rotate(90deg); }
.software-section .summary-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text);
  flex: 1;
}
.software-section .summary-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.software-section .software-body { margin-top: 1rem; }
.software-section h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 0.5rem 0;
  text-transform: none;
}

.software-vendors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1rem;
}
.software-vendor-chip {
  font-size: 0.75rem;
  padding: 0.1875rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--text-secondary);
  text-decoration: none;
}
.software-vendor-chip:hover {
  border-color: var(--accent);
  color: var(--text);
  text-decoration: none;
}
.software-vendor-chip .num {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-left: 0.25rem;
}

/* ================================================================
   Series page: product listing
   ================================================================ */

.jump-nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1px;
  margin-bottom: 1.5rem;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.jump-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.375rem 0.625rem;
  background: var(--surface);
  color: var(--text-secondary);
  text-decoration: none;
}
.jump-link:hover { background: var(--surface-alt); color: var(--text); text-decoration: none; }
.jump-count { font-weight: 400; color: var(--text-muted); font-size: 0.6875rem; }

/* ================================================================
   Related products (product page)
   ================================================================ */
.related-products {
  margin: 2.5rem 0 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 2rem;
}
.related-heading {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}
.related-sub {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: -0.5rem 0 0.75rem;
}
.related-sub time { font-family: var(--mono); color: var(--text-secondary); }
.related-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.related-list li { border-bottom: 1px solid var(--rule); }
.related-list li:last-child { border-bottom: none; }
.related-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  color: var(--text);
  text-decoration: none;
}
.related-list a:hover { color: var(--accent); }
.related-list a:hover .related-name { text-decoration: underline; }
.related-name {
  font-size: 0.9375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.related-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
.related-meta time { font-family: var(--mono); }
.related-meta .lifecycle { color: var(--text-muted); }

.type-section { margin-bottom: 2rem; scroll-margin-top: 3.5rem; }
.type-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding-bottom: 0.375rem;
  border-bottom: 2px solid var(--rule-strong);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.type-icon {
  height: 1rem;
  color: var(--text-muted);
  opacity: 0.5;
}

.match-form { margin-bottom: 1.5rem; }
.match-form textarea {
  width: 100%;
  font-family: var(--mono);
  font-size: 0.8125rem;
  padding: 0.6rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  resize: vertical;
  margin-bottom: 0.5rem;
}
.match-form button {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.4rem 1.2rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.match-form button:hover { opacity: 0.9; }
.unmatched-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.unmatched-list li {
  font-size: 0.8125rem;
  padding: 0.2rem 0.5rem;
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.submit-gap { margin-top: 0.75rem; }
.submit-gap-btn {
  font-family: var(--sans);
  font-size: 0.8125rem;
  padding: 0.35rem 0.8rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  cursor: pointer;
}
.submit-gap-btn:hover { border-color: var(--accent); color: var(--accent); }
.submit-gap-note { font-size: 0.75rem; color: var(--text-muted); margin-left: 0.5rem; }
.submit-thanks { font-size: 0.875rem; color: var(--ok-text); margin-top: 0.75rem; }

/* Bulk lookup */
.lookup-actions { display: flex; gap: 0.5rem; align-items: center; }
.lookup-actions .btn-secondary {
  background: transparent; color: var(--text-muted); border: 1px solid var(--rule);
  padding: 0.5rem 1rem; font-size: 0.875rem; border-radius: 4px; cursor: pointer;
}
.lookup-actions .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.lookup-summary {
  display: flex; gap: 1rem; font-size: 0.875rem; color: var(--text-muted);
  margin-bottom: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule);
}
.td-mono { font-family: var(--mono); font-size: 0.8rem; white-space: nowrap; }
.td-confidence { font-size: 0.75rem; }
.conf { padding: 0.15rem 0.4rem; border-radius: 3px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; }
.conf-exact { background: var(--ok-bg); color: var(--ok-text); }
.conf-prefix { background: var(--aging-bg); color: var(--aging-text); }
.conf-search { background: var(--eos-bg); color: var(--eos-text); }
.conf-family { background: var(--surface); color: var(--text-muted); border: 1px solid var(--rule); }
.conf-nomatch { background: var(--eol-bg); color: var(--eol-text); }
.row-family { opacity: 0.85; }
.family-note { font-size: 0.75rem; color: var(--text-muted); font-style: italic; }
.unmatched-grid {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem;
}
.unmatched-item {
  font-size: 0.8rem; padding: 0.2rem 0.5rem; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 3px;
}
.lookup-truncated {
  background: var(--warn-bg); border: 1px solid var(--warn-border);
  color: var(--warn-text); padding: 0.6rem 1rem; border-radius: 4px;
  font-size: 0.85rem; margin-bottom: 1rem;
}

.family-summary {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}
.fsum-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
}
.fsum-cell {}
.fsum-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}
.fsum-val {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--text);
}
.fsum-past { color: var(--eol-text); }
.fsum-future { color: var(--ok-text); }
.fsum-status { display: flex; gap: 3px; }
.fsum-milestone {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.fsum-milestone a { color: var(--link); }

.ptable {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--surface); border-radius: 8px;
  border: 1px solid var(--rule);
}
.ptable th {
  text-align: left;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-alt);
}
.ptable th:first-child { border-radius: 7px 0 0 0; }
.ptable th:last-child { border-radius: 0 7px 0 0; }
.ptable td {
  padding: 0.4375rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.8125rem;
}
.ptable tbody tr:last-child td { border-bottom: none; }
.ptable tbody tr:last-child td:first-child { border-radius: 0 0 0 7px; }
.ptable tbody tr:last-child td:last-child { border-radius: 0 0 7px 0; }
.ptable .td-sku a { font-family: var(--mono); font-weight: 500; }
.ptable .td-date { font-family: var(--mono); font-size: 0.8125rem; color: var(--text-secondary); white-space: nowrap; }
.ptable .td-lifecycle { white-space: nowrap; }
.ptable .th-date { width: 8rem; }
.ptable .th-lifecycle { width: 8rem; }
.ptable .th-days, .compact-table .th-days { width: 4rem; text-align: right; }
.td-days { text-align: right; font-family: var(--mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.days-val { color: var(--text-muted); }
.days-active { color: var(--ok-text); }
.days-aging { color: var(--warn-text); }
.days-soon { color: var(--eos-text); font-weight: 600; }
.days-critical { color: var(--eol-text); font-weight: 700; }
.days-past { color: var(--eol-text); }
.days-long-dead { color: var(--text-muted); }
.ptable .th-kev { width: 3.5rem; text-align: center; }
.ptable .td-kev { text-align: center; }
.kev-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 1.5rem;
  padding: 0.1rem 0.35rem;
  text-align: center;
  background: var(--eol-bg);
  color: var(--eol-text);
  border: 1px solid var(--eol-border);
  border-radius: 3px;
  text-decoration: none;
}
.kev-badge:hover { background: var(--eol-border); color: #fff; }

/* ================================================================
   Vendor header
   ================================================================ */

.vendor-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.vendor-logo {
  height: 2rem;
  color: var(--text);
  flex-shrink: 0;
}
.vendor-logo.legacy-wordmark {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 0.65rem;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface, transparent);
}
.vendor-header h1 { margin-bottom: 0; }
.vendor-header .page-subtitle { margin-bottom: 0; }

/* Vendor lifecycle stats — prominent stat cards below the header */
.vendor-stats { margin: 0.75rem 0 0.25rem; }
.vstat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.vstat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: 1px solid var(--rule);
  min-width: 5.5rem;
  text-decoration: none;
}
.vstat-n {
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}
.vstat-label {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.vstat-dead    { background: var(--eol-bg); border-color: var(--eol-border); }
.vstat-dead .vstat-n { color: var(--eol-text); }
.vstat-dead .vstat-label { color: var(--eol-text); }
.vstat-at-risk { background: var(--eos-bg); border-color: var(--eos-border); }
.vstat-at-risk .vstat-n { color: var(--eos-text); }
.vstat-at-risk .vstat-label { color: var(--eos-text); }
.vstat-aging   { background: var(--warn-bg); border-color: var(--warn-border); }
.vstat-aging .vstat-n { color: var(--warn-text); }
.vstat-aging .vstat-label { color: var(--warn-text); }
.vstat-eos     { background: var(--surface-alt); border-color: var(--rule); }
.vstat-eos .vstat-n { color: var(--text-secondary); }
.vstat-eos .vstat-label { color: var(--text-muted); }
.vstat-ok      { background: var(--ok-bg); border-color: var(--ok-border); }
.vstat-ok .vstat-n { color: var(--ok-text); }
.vstat-ok .vstat-label { color: var(--ok-text); }
.vstat-kev     { background: var(--eol-bg); border-color: var(--eol-border); cursor: pointer; }
.vstat-kev .vstat-n { color: var(--eol-text); }
.vstat-kev .vstat-label { color: var(--eol-text); }
.vstat-kev:hover { border-color: var(--eol-text); text-decoration: none; }

/* Type filter nav — clickable chips */
.home-type-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 1.75rem 0 0.5rem;
}
.type-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}
.type-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
}
.type-link:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.type-link.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.type-link .num { color: inherit; opacity: 0.6; }

.legacy-lineage {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: var(--muted, #888);
}
.legacy-lineage a { color: inherit; text-decoration: underline; }
.home-legacy-section {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
}
.home-legacy-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.home-vendors-legacy .vendor-card { opacity: 0.75; }
.home-vendors-legacy .vendor-card:hover { opacity: 1; }

/* ================================================================
   Product detail
   ================================================================ */

.product-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.product-hero-body { min-width: 0; }
@media (max-width: 640px) {
  .product-hero { grid-template-columns: auto 1fr; }
  .product-source { grid-column: 1 / -1; justify-self: start; }
}

/* Source/verified line in the hero. Small, monospace — signals
   provenance without competing for attention with the title. */
.product-source {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: right;
}
.product-source .source-link {
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-source .source-link:hover {
  color: var(--link);
  border-bottom-color: var(--link);
}
.product-source .source-verified {
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}
.confidence-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 3px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.confidence-high { background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-border); }
.confidence-med { background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-border); }
.confidence-low { background: var(--surface-alt); color: var(--text-muted); border: 1px solid var(--rule); }
@media (max-width: 640px) {
  .product-source { align-items: flex-start; text-align: left; }
  .product-source .source-link { max-width: none; }
}

/* Replacement callout — the answer to "what should I buy instead?"
   Shown under the status banner, before the prose and tables. */
.replacement-block {
  display: inline-flex;
  align-items: baseline;
  gap: 0.625rem;
  padding: 0.4rem 0.75rem 0.4rem 0;
  margin-bottom: 1.5rem;
}
.replacement-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.replacement-link {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 1px solid currentColor;
}
.replacement-link:hover { color: var(--link-hover); }
.replacement-link-inert {
  color: var(--text-secondary);
  border-bottom-color: var(--rule-strong);
}
.replacement-link code { font-size: 1em; font-weight: 600; }
.replacement-list {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 600;
}
.replacement-list a { color: var(--link); text-decoration: none; border-bottom: 1px solid currentColor; }
.replacement-list a:hover { color: var(--link-hover); }
.replacement-list code { font-size: 1em; font-weight: 600; }

/* Lifecycle progress timeline. Horizontal bar spanning earliest known
   date (usually Announced) to last_date_of_support. Dots for stops,
   a vertical marker for "today", labels below. 24px bar + labels. */
.timeline {
  margin: 0 0 2.5rem;
  padding: 0 0.75rem;
}
.timeline-track {
  position: relative;
  height: 2px;
  background: var(--rule);
  /* Vertical budget: top for above-stops + today marker, bottom for
     below-stops. Each side fits a label row (~0.9rem) + date row (~0.9rem)
     plus spacing. */
  margin: 3.25rem 0 3.25rem;
}
.timeline-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--text-secondary);
  opacity: 0.6;
}
.timeline-stop {
  position: absolute;
  top: 1px;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.timeline-stop .timeline-dot {
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--text-secondary);
  margin: -0.3125rem auto 0;
}
.timeline-stop.is-passed .timeline-dot {
  background: var(--text-secondary);
}
.timeline-stop-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.timeline-stop-date {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-muted);
}
/* Below-track stops: label below dot, date below label */
.timeline-stop-below .timeline-stop-label { top: 1rem; }
.timeline-stop-below .timeline-stop-date  { top: 2rem; }
/* Above-track stops: date above dot, label above date (closer to dot) */
.timeline-stop-above .timeline-stop-label { bottom: 1rem; }
.timeline-stop-above .timeline-stop-date  { bottom: 2rem; }
/* Nudge edge labels so they don't clip the page */
.timeline-stop[style*="left: 0%"] .timeline-stop-label,
.timeline-stop[style*="left: 0%"] .timeline-stop-date {
  left: 0; transform: none;
}
.timeline-stop[style*="left: 100%"] .timeline-stop-label,
.timeline-stop[style*="left: 100%"] .timeline-stop-date {
  left: auto; right: 0; transform: none;
}

.timeline-today {
  position: absolute;
  /* Line pierces the track; sits between above-stop labels and below-stop
     labels so it reads as a "now" reference without stealing label space. */
  top: -0.5rem;
  transform: translateX(-50%);
  pointer-events: none;
  width: 2px;
  height: 1rem;
  background: var(--link);
}
.timeline-today-marker { display: none; }
.timeline-today-label {
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--link);
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 0 0.25rem;
  background: var(--surface);
}

.product-silhouette {
  width: 4.5rem;
  height: 4.5rem;
  color: var(--text-muted);
  opacity: 0.5;
  flex-shrink: 0;
}

.product-title {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.125rem;
}
.product-title h1 {
  font-family: var(--mono);
  font-size: 1.625rem;
  letter-spacing: -0.02em;
}

.product-context {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.product-bulletin {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0.375rem 0 0;
  max-width: 44rem;
  line-height: 1.45;
}
.product-bulletin em {
  font-style: italic;
  color: var(--text-secondary);
}

.product-enrichment {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin: 0.375rem 0 0;
  max-width: 44rem;
  line-height: 1.5;
  font-style: italic;
}
.product-enrichment .enrichment-sources {
  font-style: normal;
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-left: 0.5rem;
}
.product-enrichment .enrichment-sources a {
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-style: dotted;
}
.product-enrichment .enrichment-sources a:hover {
  color: var(--link);
}

.sku-enrichment {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.125rem;
  line-height: 1.4;
  max-width: 36rem;
}

.vendor-wordmark {
  height: 1rem;
  color: var(--text-secondary);
  opacity: 0.65;
}

/* The big lifecycle callout — this is what gets screenshotted for budget emails.
   Softer palette: white/surface background, 3px colored left stripe, body
   text color. Color now signals category without shouting. */
.callout {
  padding: 0.875rem 1.125rem;
  border-radius: 0 4px 4px 0;
  border-left: 3px solid var(--rule-strong);
  background: var(--surface);
  color: var(--text);
  margin-bottom: 1.75rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.callout strong { font-weight: 700; color: var(--text); }
.callout-eol { border-left-color: var(--eol-text); }
.callout-at-risk { border-left-color: var(--eos-text); }
.callout-aging { border-left-color: var(--warn-text); }
.callout-eos { border-left-color: var(--text-secondary); }
.callout-supported { border-left-color: var(--ok-text); }
.callout-days { font-family: var(--mono); font-size: 0.875em; font-weight: 600; }
.callout code { font-size: 0.875em; font-weight: 600; color: var(--text); }
.callout-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: -1.25rem;
  margin-bottom: 1.5rem;
  font-style: italic;
}

.info-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  margin-bottom: 1.5rem; background: var(--surface);
  border-radius: 8px; border: 1px solid var(--rule);
}
.info-table th {
  text-align: left;
  font-weight: 400;
  color: var(--text-secondary);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
  white-space: nowrap;
  width: 14rem;
  vertical-align: top;
}
.info-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.info-table tr:last-child th,
.info-table tr:last-child td { border-bottom: none; }
.info-table tr:first-child th { border-radius: 7px 0 0 0; }
.info-table tr:first-child td { border-radius: 0 7px 0 0; }
.info-table tr:last-child th { border-radius: 0 0 0 7px; }
.info-table tr:last-child td { border-radius: 0 0 7px 0; }

.dates {
  width: 100%; border-collapse: separate; border-spacing: 0;
  margin-bottom: 0.5rem; background: var(--surface);
  border-radius: 8px; border: 1px solid var(--rule);
}
.dates th {
  text-align: left;
  font-weight: 400;
  color: var(--text-secondary);
  padding: 0.4375rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
  white-space: nowrap;
}
.dates td {
  font-family: var(--mono);
  padding: 0.4375rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
}
.dates tr:last-child th,
.dates tr:last-child td { border-bottom: none; }
.dates .final td { font-weight: 700; }
.dates .past td { color: var(--text-muted); }
.dates td.rel {
  color: var(--text-muted);
  font-size: 0.75rem;
  padding-left: 0.75rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  width: 1%;
}
.dates tr.past td.rel { color: var(--text-muted); opacity: 0.8; }
.dates tr.final td.rel { font-weight: 400; }

.detail-section { margin-bottom: 1.5rem; }
.detail-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.platforms {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}
.platform-chip {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--text-secondary);
  text-decoration: none;
}
.platform-chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

.prose-summary {
  margin: 1.5rem 0;
  line-height: 1.7;
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.prose-summary h2 {
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.prose-summary p { margin: 0 0 0.75rem; }
.prose-summary p:last-child { margin-bottom: 0; }
.prose-summary a { color: var(--link); }
.prose-summary a:hover { color: var(--link-hover); }

/* vendor page: latest news snippet */
.vendor-latest-news {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 1.25rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: 0.8125rem;
}
.vln-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: var(--text);
}
.vln-link:hover .vln-title { color: var(--link); }
.vln-thumb {
  width: 52px;
  height: 36px;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
}
.vln-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.vln-label {
  font-size: 0.6875rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.vln-title {
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s;
}
.vln-date {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
.vln-more {
  font-size: 0.75rem;
  color: var(--link);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.vln-more:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .vendor-latest-news { flex-direction: column; align-items: stretch; }
  .vln-more { text-align: right; }
}

.vendor-kev-callout {
  font-size: 0.875rem;
  padding: 0.6rem 0.8rem;
  margin-bottom: 1.5rem;
  background: var(--eol-bg);
  border-left: 3px solid var(--eol-border);
  color: var(--eol-text);
  border-radius: 2px;
}
.vendor-kev-callout strong { font-weight: 700; }
.vendor-kev-callout a { color: var(--eol-text); font-weight: 600; margin-left: 0.5rem; }

/* ================================================================
   Resources hub + terminology reference
   ================================================================ */

.resource-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem;
}
.resource-card {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1rem 1.125rem;
  background: var(--surface);
  transition: border-color 120ms ease;
}
.resource-card.available:hover { border-color: var(--link); }
.resource-card a { display: block; color: inherit; text-decoration: none; }
.resource-card a:hover { text-decoration: none; }
.resource-card h2 {
  font-size: 1.0625rem;
  margin: 0 0 0.375rem;
}
.resource-card.available a:hover h2 { color: var(--link); }
.resource-card p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.resource-card.coming {
  background: transparent;
  border-style: dashed;
}
.resource-card.coming h2 { color: var(--text-secondary); }
.resource-card.coming p { color: var(--text-muted); }
.coming-tag {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0.125rem 0.4rem;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.table-note {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}
.terminology-table-scroll {
  overflow-x: auto;
  margin-bottom: 2rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.terminology-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  min-width: 52rem;
}
.terminology-table th,
.terminology-table td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  text-align: left;
  line-height: 1.45;
}
.terminology-table thead th {
  background: var(--surface-alt);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--rule-strong);
  position: sticky;
  top: 0;
}
.terminology-table th.concept {
  font-weight: 500;
  color: var(--text);
  background: var(--surface-alt);
  max-width: 18rem;
}
.terminology-table td {
  color: var(--text-secondary);
}
.terminology-table .fine {
  display: block;
  font-size: 0.6875rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 0.125rem;
}
.terminology-table tbody tr:last-child th,
.terminology-table tbody tr:last-child td { border-bottom: none; }

.citation-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1.75rem;
  font-size: 0.8125rem;
}
.citation-list li {
  padding: 0.1875rem 0;
}
.citation-list a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.citation-list a:hover { color: var(--link); text-decoration-style: solid; }

.disclaimer {
  border-left: 3px solid var(--warn-border);
  background: var(--warn-bg);
  color: var(--warn-text);
  padding: 0.75rem 1rem;
  margin: 1.5rem 0;
  font-size: 0.875rem;
  line-height: 1.55;
  border-radius: 0 3px 3px 0;
}
.disclaimer strong { color: inherit; }

/* ================================================================
   Known Exploited Vulnerabilities block (product page + resources)
   ================================================================ */

.kev-block {
  margin: 2rem 0;
  padding: 1rem 1.125rem;
  border-left: 4px solid var(--eol-border);
  background: var(--eol-bg);
  border-radius: 0 4px 4px 0;
}
.kev-block h2 {
  margin: 0 0 0.5rem;
  color: var(--eol-text);
  font-size: 1.0625rem;
}
.kev-intro {
  font-size: 0.9375rem;
  color: var(--eol-text);
  line-height: 1.55;
  margin: 0 0 1rem;
  max-width: 44rem;
}

.kev-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  margin-bottom: 0.75rem;
}
.kev-table thead th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--eol-text);
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid var(--eol-border);
  background: transparent;
}
.kev-table td {
  padding: 0.5rem;
  border-bottom: 1px solid var(--eol-border);
  vertical-align: top;
  line-height: 1.45;
  color: var(--text);
}
.kev-table tbody tr:last-child td { border-bottom: none; }
.kev-table .kev-id { white-space: nowrap; width: 10rem; }
.kev-table .kev-id a { color: var(--link); text-decoration: none; }
.kev-table .kev-id a:hover { text-decoration: underline; }
.kev-table .kev-id code { font-weight: 600; }
.kev-table .kev-added {
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  width: 7rem;
}
.kev-table .kev-name { color: var(--text); }
.kev-notes-list {
  margin-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.kev-table .kev-notes {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-style: dotted;
}
.kev-table .kev-notes:hover { color: var(--link); }
.kev-table .kev-flags { width: 7rem; }
.kev-flag {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.125rem 0.4rem;
  border-radius: 3px;
}
.kev-flag-ransom {
  background: var(--eol-border);
  color: var(--eol-text);
}
.kev-row-ransomware td { background: rgba(220, 38, 38, 0.04); }

.kev-sources {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
}
.kev-sources a { color: var(--text-muted); text-decoration: underline; text-decoration-style: dotted; }
.kev-sources a:hover { color: var(--link); }

.kev-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}
.kev-stat {
  padding: 1rem 1.125rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
}
.kev-stat-num {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--eol-text);
  font-family: var(--mono);
  line-height: 1.1;
}
.kev-stat-label {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.kev-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.kev-filters .filter-label {
  display: block;
  font-size: 0.6875rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}
.kev-filters select {
  font-family: var(--sans);
  font-size: 0.8125rem;
  padding: 0.3rem 0.5rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  cursor: pointer;
}
.kev-filters .filter-clear {
  font-size: 0.8125rem;
  color: var(--text-muted);
  align-self: center;
  margin-left: auto;
}
.compact-table tr.is-active { background: var(--surface-alt); }

.source-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

/* ================================================================
   Error pages
   ================================================================ */

.error-page { max-width: 36rem; margin: 3rem auto; }
.error-page h1 { margin-bottom: 1rem; }
.terminal {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  white-space: pre;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  border-radius: 4px;
}
.hl-error { color: var(--eol-text); font-weight: 700; }
.hl-cmd { color: var(--accent); }
.error-hint { color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 0.5rem; }
.error-links { list-style: none; font-size: 0.875rem; }
.error-links li { padding: 0.2rem 0; }

/* ================================================================
   Back to top
   ================================================================ */

.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 50;
  box-shadow: 0 2px 8px var(--shadow);
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { color: var(--text); border-color: var(--accent); text-decoration: none; }

/* ================================================================
   Responsive
   ================================================================ */

@media (max-width: 768px) {
  .two-col { grid-template-columns: 1fr; gap: 1rem; }
  .home-top { flex-direction: column; gap: 0.75rem; }

  /* --- Header: hamburger nav --- */
  .header-inner { flex-wrap: wrap; position: relative; }
  .header-search { max-width: none; order: 3; flex-basis: 100%; }
  .hamburger { display: flex; order: 2; }
  .header-nav {
    display: none;
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 0 0.25rem;
    border-top: 1px solid var(--rule);
    margin-top: 0.5rem;
  }
  .header-nav.open { display: flex; align-items: flex-start; }
  .header-nav > a { padding: 0.5rem 0; font-size: 0.875rem; }
  .header-nav > .dropdown { width: 100%; }
  .header-nav > .dropdown > .dropdown-btn { padding: 0.5rem 0; font-size: 0.875rem; width: 100%; justify-content: flex-start; }
  .dropdown-panel { left: 0; right: auto; min-width: 12rem; max-width: 15rem; max-height: 70vh; overflow-y: auto; }
  .dropdown-mega { left: 0; transform: none; max-width: 90vw; padding: 0.5rem; }
  .mega-grid, .mega-legacy-list { grid-template-columns: repeat(2, 1fr); }
  .series-grid { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }

  /* --- Vendor grid --- */
  .home-vendors { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.375rem; }
  .vendor-card { padding: 0.375rem 0.5rem; gap: 0.375rem; }
  .vendor-card-logo { width: 1.75rem; height: 1rem; }
  .vendor-card-name { font-size: 0.75rem; }

  /* --- Tables: hide non-critical columns so they fit --- */

  /* Homepage compact-table: hide Days, keep Date + Product + Vendor */
  .compact-table .th-days,
  .compact-table .td-days { display: none; }

  /* Vendor page family-table: hide SKU count, latest-support date, KEV */
  .family-table .ft-count,
  .family-table thead th.ft-count { display: none; }
  .family-table .ft-kev,
  .family-table thead th.ft-kev { display: none; }
  .family-table th:nth-child(4),
  .family-table td:nth-child(4) { display: none; }
  .family-table .ft-date { width: auto; font-size: 0.6875rem; }
  .family-table .ft-status { width: auto; }

  /* Series page ptable: hide End-of-Sale, Days, KEV — keep Product + Status + Last Support */
  .ptable .th-days, .ptable .td-days { display: none; }
  .ptable .th-kev, .ptable .td-kev { display: none; }
  .ptable th:nth-child(3),
  .ptable td:nth-child(3) { display: none; }

  /* Recent announcements: hide date columns in header/parent rows */
  .ra-table thead th:nth-child(n+4),
  .ra-row td:nth-child(n+4) { display: none; }
  /* Detail expand rows: break out of table layout, show only product link */
  .ra-detail.ra-open { display: block; }
  .ra-detail td { display: none; }
  .ra-detail .td-sku { display: block; max-width: none; overflow: visible; padding: 0.2rem 0.75rem; border-bottom: 1px solid var(--rule); }

  /* Series index */
  .series-index { columns: 2 8rem; }
}

@media (max-width: 480px) {
  .wrap { padding: 1rem; }

  .home-vendors { grid-template-columns: repeat(2, 1fr); }
  .vendor-card-count { display: none; }

  /* compact-table: also hide vendor */
  .td-vendor { display: none; }
  .compact-table td, .compact-table th { padding: 0.3rem 0.5rem; font-size: 0.75rem; }

  /* family-table: tighter spacing */
  .family-table td, .family-table th { padding: 0.3rem 0.5rem; font-size: 0.75rem; }

  /* ptable: also hide Status badge col — keep just Product + Last Support */
  .ptable .th-lifecycle, .ptable .td-lifecycle { display: none; }
  .ptable td, .ptable th { padding: 0.3rem 0.5rem; font-size: 0.75rem; }

  /* Series index: single column */
  .series-index { columns: 1; }

  /* Footer: stack vertically */
  .footer-inner { flex-direction: column; gap: 0.375rem; }

  /* Prevent iOS auto-zoom on input focus (requires ≥ 16px) */
  input, select, textarea { font-size: 1rem; }
}



/* ================================================================
   EOL Calendar (upcoming feed)
   ================================================================ */

.cal-header { margin-bottom: 1rem; }
.cal-header h1 { margin-bottom: 0.125rem; }

.cal-buckets {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.cal-bucket {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.1s;
}
.cal-bucket:hover { border-color: var(--accent); }
.cal-bucket.is-active { border-color: var(--accent); background: var(--surface-alt); }
.cal-bucket-num {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.25rem;
}
.cal-bucket-label { font-size: 0.75rem; color: var(--text-muted); }

/* ---- Filter bar ---- */
.cal-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  padding: 0.625rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0.75rem;
}
.cal-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.cal-field-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.cal-field-search { flex: 1 1 14rem; min-width: 10rem; }
.cal-field-past .cal-field-label { opacity: 0; pointer-events: none; }

.cal-select,
.cal-input {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  padding: 0.3125rem 0.5rem;
  height: 1.875rem;
  outline: none;
}
.cal-select { min-width: 7.5rem; padding-right: 1.5rem; cursor: pointer; }
.cal-select:focus,
.cal-input:focus { border-color: var(--accent); }
.cal-input { width: 100%; font-family: var(--mono); font-size: 0.8125rem; }
.cal-input::placeholder { color: var(--text-muted); }

/* Segmented type toggle */
.cal-seg {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  padding: 2px;
  height: 1.875rem;
  align-items: stretch;
}
.cal-seg-opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  line-height: 1;
}
.cal-seg-opt input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.cal-seg-opt:hover { color: var(--text); }
.cal-seg-opt.is-on {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 0 0 1px var(--rule);
}
.cal-seg-dot {
  display: inline-block;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 1.5px;
  flex-shrink: 0;
}
.cal-seg-dot-eos { background: var(--eos-border); }
.cal-seg-dot-eol { background: var(--eol-border); }

.cal-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--text);
  height: 1.875rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.cal-toggle input { margin: 0; accent-color: var(--accent); }

.cal-apply {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  height: 1.875rem;
  cursor: pointer;
  align-self: flex-end;
  font-family: inherit;
}

/* ---- Summary ---- */
.cal-summary {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0.5rem 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
}
.cal-summary strong { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-dot-sep { color: var(--text-muted); font-weight: 400; }

/* ---- Month sections ---- */
.cal-list { display: flex; flex-direction: column; gap: 1.75rem; }
.cal-month-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.375rem 0 0.5rem;
  border-bottom: 2px solid var(--rule-strong);
  margin-bottom: 0.125rem;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 2;
}
.cal-month-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
}
.cal-month-year {
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 0.25rem;
  letter-spacing: 0.02em;
}
.cal-month-n {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- Rows ---- */
.cal-rows { list-style: none; margin: 0; padding: 0; }
.cal-row { border-bottom: 1px solid var(--rule); }
.cal-row:last-child { border-bottom: 0; }

.cal-row-a {
  display: grid;
  grid-template-columns: 2.75rem 3rem 7rem 1fr;
  align-items: center;
  gap: 0.875rem;
  padding: 0.4375rem 0.125rem 0.4375rem 0.125rem;
  color: var(--text);
  text-decoration: none;
  min-height: 2.25rem;
}
.cal-row-a:hover {
  background: var(--surface-alt);
  text-decoration: none;
  color: var(--text);
}

.cal-day {
  display: flex;
  align-items: baseline;
  gap: 0.3125rem;
  font-family: var(--mono);
  line-height: 1;
  color: var(--text);
}
.cal-day-num { font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-day-dow {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cal-kind {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.125rem 0.4375rem;
  border-radius: 3px;
  border: 1px solid transparent;
  line-height: 1.3;
  min-width: 2.375rem;
}
.cal-kind-eos { background: var(--eos-bg); color: var(--eos-text); border-color: var(--eos-border); }
.cal-kind-eol { background: var(--eol-bg); color: var(--eol-text); border-color: var(--eol-border); }

.cal-vend {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-prod {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  min-width: 0;
  overflow: hidden;
}
.cal-prod-n {
  font-size: 0.8125rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
.cal-row-a:hover .cal-prod-n { color: var(--accent); }
.cal-prod-s {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ---- Empty states ---- */
.cal-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-secondary);
}
.cal-empty-search {
  padding: 1.25rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8125rem;
  border-top: 1px solid var(--rule);
  margin-top: 0.5rem;
}
.linky {
  background: none;
  border: 0;
  color: var(--link);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}
.linky:hover { color: var(--link-hover); }

/* ---- Responsive ---- */
@media (max-width: 720px) {
  .cal-filters { gap: 0.5rem 0.75rem; }
  .cal-select { min-width: 6rem; }
  .cal-row-a {
    grid-template-columns: 2.5rem 2.75rem 1fr;
    grid-template-rows: auto auto;
    row-gap: 0.125rem;
    column-gap: 0.625rem;
    padding: 0.5rem 0.125rem;
    align-items: start;
  }
  .cal-day { grid-row: 1 / span 2; align-self: center; }
  .cal-kind { grid-column: 2; grid-row: 1; align-self: center; }
  .cal-vend {
    grid-column: 3;
    grid-row: 1;
    font-size: 0.75rem;
    align-self: center;
  }
  .cal-prod {
    grid-column: 2 / span 2;
    grid-row: 2;
    flex-wrap: wrap;
    row-gap: 0.125rem;
  }
  .cal-prod-n { flex-basis: 100%; font-size: 0.8125rem; white-space: normal; }
}

/* ================================================================
   News feed
   ================================================================ */

.news-controls { margin-bottom: 1.5rem; }
.news-filters { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.news-filter-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.news-filter-group { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.news-filter-chip {
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--text-secondary);
  text-decoration: none;
}
.news-filter-chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.news-filter-chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }

.news-active-filter {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.news-clear-filter {
  margin-left: 0.5rem;
  color: var(--text-muted);
  font-size: 0.75rem;
}

/* --- Hero (first article with a photo) --- */
.news-hero {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding-bottom: 1.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.news-hero-image {
  flex-shrink: 0;
  width: 260px;
  height: 150px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-alt);
  display: block;
}
.news-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}
.news-hero-image:hover img { transform: scale(1.03); }
.news-hero-body { flex: 1; min-width: 0; }
.news-hero-title {
  font-family: var(--sans);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0.15rem 0 0.4rem;
}
.news-hero-title a { color: var(--text); text-decoration: none; }
.news-hero-title a:hover { color: var(--link); }
.news-hero-summary {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 0.5rem;
}
@media (max-width: 700px) {
  .news-hero { flex-direction: column; }
  .news-hero-image { width: 100%; height: 160px; }
}

/* --- 2-column grid --- */
.news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
}
@media (max-width: 640px) {
  .news-grid { grid-template-columns: 1fr; }
}

/* --- Row item (each story in the grid) --- */
.news-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
}
.news-thumb {
  flex-shrink: 0;
  width: 88px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-alt);
  display: block;
}
.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}
.news-thumb:hover img { transform: scale(1.05); }
.news-row-body { flex: 1; min-width: 0; }
.news-row-title {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0.1rem 0 0.2rem;
}
.news-row-title a { color: var(--text); text-decoration: none; }
.news-row-title a:hover { color: var(--link); }
.news-row-summary {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0 0 0.3rem;
}

/* --- Shared: meta, tags, source chips, share buttons --- */
.news-item-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.news-item-meta time {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}
.news-source-tag {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  border-radius: 2px;
  background: var(--surface-alt);
  color: var(--text-muted);
  border: 1px solid var(--rule);
}
.news-cat-vendor-advisory { background: var(--eos-bg); color: var(--eos-text); border-color: var(--eos-border); }
.news-cat-government { background: var(--eol-bg); color: var(--eol-text); border-color: var(--eol-border); }
.news-cat-cve { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }

.news-item-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
}
.news-vendor-tag {
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.1rem 0.4rem;
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--link);
  text-decoration: none;
}
.news-vendor-tag:hover { border-color: var(--link); text-decoration: none; }
.news-cve-tag {
  font-family: var(--mono);
  font-size: 0.6875rem;
  padding: 0.1rem 0.4rem;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 2px;
  color: var(--warn-text);
}

.news-share {
  margin-left: auto;
  display: flex;
  gap: 0.375rem;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--text-muted);
  text-decoration: none;
  background: var(--surface-alt);
}
.share-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

.news-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0;
  font-size: 0.8125rem;
}
.page-link { color: var(--link); text-decoration: none; }
.page-link:hover { text-decoration: underline; }
.page-info { color: var(--text-muted); }

.news-empty {
  padding: 2rem 0;
  text-align: center;
  color: var(--text-secondary);
}

/* Guide articles */
.guide-article { max-width: 44rem; }
.guide-reviewed { font-size: 0.8125rem; color: var(--text-muted); margin: -0.25rem 0 1.5rem; }
.guide-data-callout {
  margin: 2.5rem 0 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--link);
  border-radius: 4px;
  background: var(--surface);
}
.guide-data-callout a { color: var(--link); font-weight: 600; }
.guide-data-callout a:hover { color: var(--link-hover); }
.guide-data-callout p { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--text-secondary); }

/* ==========================================================================
   POLISH LAYER — 2026-07-18 token pass (staging)
   Same layout, one system: 4px spacing grid, two radii, one shadow scale,
   system font stacks (webfonts dropped), visible focus, unified tables.
   Appended as an overlay so the base sheet stays diffable against main.css.
   ========================================================================== */
:root {
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, Menlo, monospace;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-ctl: 4px;
  --r-card: 8px;
  --shadow-sm: 0 1px 2px rgba(20,18,24,.05), 0 2px 8px rgba(20,18,24,.04);
  --shadow-md: 0 1px 2px rgba(20,18,24,.06), 0 10px 28px rgba(20,18,24,.09);
  --ease: .15s ease;
}
/* Muted text was #838a94 on light — below AA. Darken; same move in dark. */
html[data-theme="light"] { --text-muted: #666e79; --shadow-color: rgba(20,18,24,.08); }
html[data-theme="dark"]  { --text-muted: #8f8a80; --shadow-sm: none; --shadow-md: none; }

body { font-size: 15px; line-height: 1.5; }
/* Complete heading scale — overrides every base h1-h3 property so no
   heading is assembled half from the pre-token era. */
h1 { font-size: 1.625rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 0.25rem; }
h2 { font-size: 1.1875rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin: 1.75rem 0 0.75rem; }
h2:first-child { margin-top: 0; }
h3 { font-size: 1rem; font-weight: 600; line-height: 1.25; margin: 1.25rem 0 0.5rem; }
/* Mono at fixed sizes: em-relative code made mono render at ~4 sizes
   depending on context. Data mono is 0.75rem, prose code 0.8125rem. */
code { font-size: 0.8125rem; }
table code, .td-sku code, .quick-table code { font-size: 0.75rem; }
input, textarea, select { font-family: var(--sans); }
input.mono-input, textarea.mono-input { font-family: var(--mono); }
small, .small, .caption { font-size: .75rem; line-height: 1.4; }

/* one link affordance */
a { text-underline-offset: 2px; }
a, button, input, select, summary {
  transition: color var(--ease), background-color var(--ease),
              border-color var(--ease), box-shadow var(--ease);
}

/* visible keyboard navigation, both themes */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* controls: one height, one radius, real states */
button, .btn, input[type="submit"] { border-radius: var(--r-ctl); }
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], select, textarea {
  border-radius: var(--r-ctl);
  border-width: 1px;
}
button:disabled, input:disabled, select:disabled, .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; pointer-events: none;
}

/* tables: one density, quiet head, hover, locked digits */
table { font-variant-numeric: tabular-nums; }
th, td { padding: .5rem .75rem; }
thead th {
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--surface-alt) 45%, var(--surface));
  font-weight: 600;
}
tbody tr { border-bottom: 1px solid var(--rule); }
tbody tr:hover { background: color-mix(in srgb, var(--text) 3.5%, transparent); }

/* cards and dropdowns join the two-tier radius + shadow scale */
.vendor-card, .dropdown-menu, .modal, .card { border-radius: var(--r-card); box-shadow: var(--shadow-sm); }
.dropdown-menu { box-shadow: var(--shadow-md); }

/* ==========================================================================
   WARMTH + TYPE — 2026-07-18 second pass
   Light theme leaves the blue-grey band for warm paper + white surfaces.
   Inter returns as the UI face, self-hosted (no CDN), variable weight.
   Mono stays system (the IBM Plex Mono objection stands).
   ========================================================================== */
@font-face {
  font-family: "InterVariable";
  src: url("/static/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --sans: "InterVariable", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: var(--sans);
}
body { font-feature-settings: "cv05", "cv11"; }

html[data-theme="light"] {
  --bg: #f4f3f1;
  --surface: #fffefe;
  --surface-alt: #eceae7;
  --text: #1f1d1b;
  --text-secondary: #4a4744;
  --text-muted: #6c6864;
  --rule: #dcd9d5;
  --rule-strong: #c6c2bd;
  --shadow-sm: 0 1px 2px rgba(33,29,25,.05), 0 2px 8px rgba(33,29,25,.04);
  --shadow-md: 0 1px 2px rgba(33,29,25,.06), 0 10px 28px rgba(33,29,25,.09);
}

/* ==========================================================================
   TABLES + WIDTH — 2026-07-18 third pass
   Use the horizontal room modern screens have (64rem -> 82rem measure),
   stop SKU cutoff by giving the column a floor, zebra-stripe long tables,
   and keep side-by-side tables visually equal.
   ========================================================================== */
:root { --measure: min(82rem, 94vw); }

/* SKU column: keep single-line + ellipsis as a last resort, but never let
   the column be crushed while dates hog space. */
.compact-table .td-sku { min-width: 16rem; }
.compact-table .td-date { width: 7.5rem; }

/* Long tables: zebra stripes make 200-row vendor tables scannable; the
   overlay's row hover stays stronger than the stripe. */
.compact-table tbody tr:nth-child(2n) td {
  background: color-mix(in srgb, var(--text) 2.5%, transparent);
}
.compact-table tbody tr:hover td {
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

/* Side-by-side tables: same head treatment and equal top alignment so the
   pair reads as one unit even when row counts differ. */
.two-col { align-items: start; }
.two-col .compact-table { width: 100%; }

/* Very wide tables on small screens: let the page keep its width and the
   table scroll inside itself instead of crushing columns to slivers. */
@media (max-width: 52rem) {
  .compact-table { display: block; overflow-x: auto; }
  .compact-table thead, .compact-table tbody { display: table; width: 100%; }
  .compact-table .td-sku { min-width: 11rem; }
}

/* ==========================================================================
   TABLE GEOMETRY + CONTENT FRAME — 2026-07-18 fourth pass
   ========================================================================== */
/* Series pages: every per-type table shares one column geometry instead of
   each table auto-sizing differently. SKU takes the flexible remainder. */
.ptable { table-layout: fixed; }
.ptable .th-lifecycle { width: 8.5rem; }
.ptable .th-date { width: 7.25rem; }
.ptable .th-days { width: 4.5rem; }
.ptable .th-kev { width: 3.75rem; }

/* Vendor-page paired tables: date column is always first and fixed, so the
   two-col sections column-align with each other. */
.compact-table { table-layout: fixed; }
.compact-table th:first-child { width: 7.5rem; }
.compact-table .th-days { width: 4.5rem; }
.compact-table .td-sku { min-width: 0; }

/* Type sections are now native <details>: closed by default past 40 rows. */
.type-section > summary.type-label {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: .5rem;
  user-select: none;
}
.type-section > summary.type-label::-webkit-details-marker { display: none; }
.type-section > summary.type-label::after {
  content: "▸"; color: var(--text-muted); font-size: .8em;
  transition: transform var(--ease);
}
.type-section[open] > summary.type-label::after { transform: rotate(90deg); }
.type-count {
  color: var(--text-muted); font-size: .75rem; font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* Content frame: hairlines either side of the content column, running from
   under the nav to the footer, with the interior a half-step off the page
   background so the column reads as a surface. */
body { background: var(--bg); }
main.wrap {
  background: color-mix(in srgb, var(--surface) 45%, var(--bg));
  border-inline: 1px solid var(--rule);
  padding-top: 1.25rem;
  padding-bottom: 2rem;
}
@media (max-width: 52rem) { main.wrap { border-inline: 0; } }

/* Homepage: Recent Security Exposure + Recently Announced share a row on
   desktop; the announcements table gets the wider track for its five
   columns. Stacks below 64rem. */
.home-two-up {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 2rem;
  align-items: start;
}
.home-two-up > section { min-width: 0; }
.home-two-up .ra-table .td-date { width: 6.5rem; }
@media (max-width: 64rem) {
  .home-two-up { grid-template-columns: 1fr; gap: 0; }
}

/* Announcement date columns hold ranges; let them wrap at the dash
   instead of nowrap-spilling over the neighboring cell. */
.ra-table .td-date {
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  line-height: 1.35;
}
.home-two-up .ra-table .td-date { width: 7.5rem; }

/* ==========================================================================
   NAV SEARCH — 2026-07-18 fifth pass
   One search everywhere: the header search shows on the homepage too (the
   hero search is retired), restyled as a clean modern field — inset icon,
   soft border, rust focus ring, card-style results dropdown.
   ========================================================================== */
.is-home .header-search { display: block; }
.header-search { max-width: 26rem; }
.search-input {
  height: 2.25rem;
  padding: 0 0.75rem 0 2.1rem;
  font-family: var(--sans);
  font-size: 0.8438rem;
  background:
    var(--surface)
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="%23888580" stroke-width="2.4" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.8-3.8"/></svg>')
    no-repeat 0.7rem center;
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.search-input:hover { border-color: var(--rule-strong); }
.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.search-input::placeholder { color: var(--text-muted); }
.search-results {
  top: calc(100% + 6px);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
}


/* ==========================================================================
   DATE LEDGER — 2026-07-18: both upcoming tables group by date. The date
   band replaces the per-row date column; rows carry product + vendor.
   ========================================================================== */
.compact-table tbody tr.date-group-row td,
.compact-table tbody tr.date-group-row:hover td {
  background: var(--surface-alt);
  border-top: 2px solid var(--rule-strong);
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}
.compact-table tbody tr:first-child.date-group-row td { border-top: 0; }
.date-group-row time {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 650;
}
.date-rel { margin-left: 0.65rem; }
.date-ledger .td-ledger-pad { width: 1.1rem; padding: 0; }
.date-ledger thead th:first-child { width: 1.1rem; }
.date-ledger thead th:nth-child(2) { width: auto; }
.date-ledger .td-vendor { width: 8.5rem; }
.compact-table tbody tr.group-more td,
.compact-table tbody tr.group-more:hover td {
  background: transparent;
  padding-top: 0.2rem; padding-bottom: 0.45rem;
}
.group-more a { color: var(--text-muted); font-size: 0.75rem; }
.group-more a:hover { color: var(--link); }

/* ==========================================================================
   QUICK-VIEW CARDS — 2026-07-18: the upcoming pair become small equal
   boxes; headers click through to the full pages.
   ========================================================================== */
.quick-row { align-items: stretch; gap: 1.25rem; }
.quick-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.quick-head {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-alt);
}
.quick-head h2 { margin: 0; font-size: 0.9375rem; font-weight: 650; }
.quick-head h2 a:hover { color: var(--link); }
.quick-count { color: var(--text-muted); font-size: 0.75rem; font-weight: 400; }
.quick-link { margin-left: auto; color: var(--link); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.quick-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.quick-table { width: 100%; border-collapse: collapse; }
.quick-table td { padding: 0.3rem 1rem; font-size: 0.8125rem; border-bottom: 1px solid var(--rule); }
.quick-table tr:last-child td { border-bottom: 0; }
.quick-table .td-sku a { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; }
.quick-table .td-vendor { width: 7.5rem; color: var(--text-muted); font-size: 0.75rem; text-align: right; }
.quick-table tr.qdate-row td {
  padding: 0.35rem 1rem 0.3rem;
  background: color-mix(in srgb, var(--surface-alt) 55%, var(--surface));
  border-bottom: 1px solid var(--rule);
}
.qdate-row time { font-weight: 650; font-size: 0.75rem; letter-spacing: 0.02em; text-transform: uppercase; }
.qdate-rel { margin-left: 0.5rem; color: var(--text-muted); font-family: var(--mono); font-size: 0.6875rem; }
.qdate-rel.is-critical { color: var(--eol-text); }
.quick-table tr:hover td { background: color-mix(in srgb, var(--text) 3.5%, transparent); }
.quick-table tr.qdate-row:hover td { background: color-mix(in srgb, var(--surface-alt) 55%, var(--surface)); }
.quick-table .group-more td { padding: 0.2rem 1rem 0.4rem; }
.quick-table .group-more a { color: var(--text-muted); font-size: 0.7rem; }
.quick-table .group-more a:hover { color: var(--link); }

/* ==========================================================================
   DARK MODE REBUILD — 2026-07-18
   The old dark was desaturated gray-on-black. This keeps the warm-violet
   console identity but pushes chroma and contrast: violet-cast surfaces
   and rules, brighter cream text, hotter rust, saturated lifecycle washes.
   Light mode stays the default (data-theme="light" + localStorage).
   ========================================================================== */
html[data-theme="dark"] {
  --bg: #131018;
  --surface: #1e1a27;
  --surface-alt: #2a2438;
  --text: #f2ecdf;
  --text-secondary: #b8b0a2;
  --text-muted: #8f887b;
  --rule: #352e44;
  --rule-strong: #4d4363;
  --link: #ff6d4a;
  --link-hover: #ff9273;
  --accent: #ff6d4a;

  --eol-bg: #361611; --eol-border: #b0432a; --eol-text: #ffb49c;
  --eos-bg: #322508; --eos-border: #a3701c; --eos-text: #ffd685;
  --warn-bg: #2e2609; --warn-border: #8a6f1c; --warn-text: #f2d98a;
  --ok-bg: #14301f; --ok-border: #3f7d54; --ok-text: #a4e0ba;
}
/* Character details that only make sense on the dark canvas. */
html[data-theme="dark"] ::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); }
html[data-theme="dark"] thead th {
  background: color-mix(in srgb, var(--surface-alt) 70%, var(--surface));
}
html[data-theme="dark"] .site-header {
  background: color-mix(in srgb, var(--surface) 80%, var(--bg));
  border-bottom-color: var(--rule-strong);
}
html[data-theme="dark"] main.wrap {
  background: color-mix(in srgb, var(--surface) 38%, var(--bg));
  border-inline-color: var(--rule);
}
html[data-theme="dark"] .quick-card,
html[data-theme="dark"] .vendor-card {
  border-color: var(--rule-strong);
}
html[data-theme="dark"] .days-critical { color: var(--eol-text); }

/* Brand prompt: a mono $ spanning both tiers of the wordmark. */
.brand { flex-direction: row; align-items: center; gap: 0.45rem; }
.brand-stack { display: inline-flex; flex-direction: column; line-height: 1; gap: 0; }
.brand-prompt {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  transform: translateY(-1px);
}
.brand:hover .brand-prompt { color: var(--link-hover); }

/* Blinking cursor at the end of the wordmark. Steps() so it snaps like a
   real terminal caret; parked solid under reduced-motion. */
.brand-cursor {
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 700;
  margin-left: 1px;
  animation: brand-blink 1.1s steps(1) infinite;
}
@keyframes brand-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .brand-cursor { animation: none; } }

/* ==========================================================================
   OS-LIFECYCLE CARD — software release trains on the vendor page. Reads
   as software (maintenance / end-of-engineering), visually distinct from
   the hardware tables so the two categories don't blur.
   ========================================================================== */
.os-card {
  margin: 1.5rem 0;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-card);
  overflow: hidden;
}
.os-card-head {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.os-card-head h2 { margin: 0; font-size: 1.0625rem; }
.os-card-head p { margin: 0.2rem 0 0; color: var(--text-muted); font-size: 0.8125rem; }
.os-card-count {
  margin-left: auto; flex: none;
  padding: 0.2rem 0.6rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--link); font-family: var(--mono); font-size: 0.75rem; font-weight: 650;
  white-space: nowrap;
}
.os-train-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1px; background: var(--rule);
}
.os-train {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 0.8rem 1.1rem;
  background: var(--surface);
  transition: background var(--ease);
}
.os-train:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.os-train-name { font-weight: 650; font-size: 0.9375rem; }
.os-train-stat { font-size: 0.8125rem; color: var(--text-secondary); }
.os-train-stat b { color: var(--text); font-variant-numeric: tabular-nums; }
.os-eol { color: var(--eol-text); }
.os-train-next { font-family: var(--mono); font-size: 0.6875rem; color: var(--text-muted); }
.os-train-next code { font-size: inherit; }