/* ============================================================
   Vertex — an independent NVIDIA product reference
   Deliberately dark, single-theme "tech lab" design.
   Accent uses NVIDIA's signature green (~#76B900) on near-black
   slate. Color alone isn't trademark-protected, so this is safe —
   what matters is that no NVIDIA logo, wordmark, or taglines
   appear anywhere on this page. See README.md for the reasoning.
   ============================================================ */

:root{
  --bg:            #0a0d13;
  --bg-elevated:   #10141c;
  --bg-card:       #141a24;
  --bg-card-hover: #171e2a;
  --bg-input:      #0d1119;
  --border:        #232b3a;
  --border-soft:   #1a2130;

  --text:          #e9edf5;
  --text-dim:      #a7b1c4;
  --text-faint:    #5f6b81;

  --accent:        #76b900;
  --accent-strong: #94d600;
  --accent-soft:   rgba(118,185,0,0.16);
  --link:          #8bc900;

  --tier1:         #ff8a5c;
  --tier1-bg:      rgba(255,138,92,0.14);
  --tier2:         #76b900;
  --tier2-bg:      rgba(118,185,0,0.14);
  --tier3:         #7c8494;
  --tier3-bg:      rgba(124,132,148,0.14);

  --dot-ga:        #86c400;
  --dot-limited:   #f2b705;
  --dot-beta:      #34aee0;
  --dot-pending:   #e0a334;
  --dot-legacy:    #7c8494;

  --radius:        7px;
  --radius-sm:     5px;
  --font-body: "IBM Plex Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-head: "Chakra Petch", "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  color-scheme: dark;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(118,185,0,0.14), transparent 60%),
    radial-gradient(ellipse 700px 400px at 100% 0%, rgba(148,214,0,0.10), transparent 55%);
  background-repeat: no-repeat;
}

a{ color: var(--link); text-decoration: none; }
a:hover{ text-decoration: underline; }

:focus-visible{
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

.skip-link{
  position: absolute; left: -999px; top: 0;
  background: var(--accent); color: #0a0d13; padding: 10px 16px;
  border-radius: 0 0 8px 0; z-index: 999; font-weight: 600;
}
.skip-link:focus{ left: 0; }

h1, h2, h3{ font-family: var(--font-head); font-weight: 600; margin: 0; color: #fff; }

/* ---------------- Header ---------------- */

.site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,13,19,0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.header-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.brand{
  display: flex; align-items: center; gap: 10px;
  color: var(--text); flex-shrink: 0;
}
.brand:hover{ text-decoration: none; }
.brand-mark{
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-strong);
  filter: drop-shadow(0 0 8px rgba(118,185,0,0.45));
}
.brand-text{ display: flex; flex-direction: column; line-height: 1.15; }
.brand-name{
  font-family: var(--font-head); font-weight: 700; font-size: 20px;
  letter-spacing: 0.01em; color: #fff;
}
.brand-tagline{ font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }

.tabs{
  display: flex; gap: 4px;
  background: var(--bg-elevated);
  padding: 4px; border-radius: 10px;
  border: 1px solid var(--border-soft);
  margin-left: auto;
}
.tab-link{
  padding: 7px 14px;
  border-radius: 7px;
  color: var(--text-dim);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
}
.tab-link:hover{ color: var(--text); text-decoration: none; }
.tab-link.is-active{
  background: var(--accent);
  color: #0a0d13;
  font-weight: 600;
}

.rss-link{
  display: flex; align-items: center; gap: 6px;
  color: var(--text-dim);
  font-size: 13px; font-weight: 500;
  padding: 7px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  flex-shrink: 0;
}
.rss-link:hover{ color: var(--dot-limited); border-color: var(--dot-limited); text-decoration: none; }

/* ---------------- Layout ---------------- */

.view-inner{ max-width: 1180px; margin: 0 auto; padding: 34px 20px 60px; }
.view-inner--narrow{ max-width: 820px; }

.intro{ position: relative; }
.intro::before{
  content: "";
  position: absolute;
  top: -30px; right: -10px;
  width: 420px; height: 280px;
  background-image:
    repeating-linear-gradient(60deg, rgba(118,185,0,0.18) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(-60deg, rgba(148,214,0,0.14) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, rgba(118,185,0,0.09) 0 1px, transparent 1px 44px);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 30%, black 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 70% 70% at 70% 30%, black 0%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.intro h1, .intro p{ position: relative; z-index: 1; }
.intro h1{ font-size: clamp(24px, 4vw, 32px); margin-bottom: 10px; text-wrap: balance; }
.intro p{ color: var(--text-dim); max-width: 700px; font-size: 15px; }
.intro strong{ color: var(--accent-strong); font-family: var(--font-mono); font-weight: 600; }

@media (max-width: 720px){
  .intro::before{ width: 260px; height: 200px; top: -20px; right: -30px; }
}

/* ---------------- "What's new" banner ---------------- */

.whats-new-banner{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 11px 16px;
  background: var(--accent-soft);
  border: 1px solid rgba(118,185,0,0.4);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font-size: 13.5px;
  transition: border-color .12s, background .12s;
}
.whats-new-banner:hover{ border-color: var(--accent); background: rgba(118,185,0,0.22); text-decoration: none; }
.whats-new-badge{
  flex-shrink: 0;
  background: var(--accent);
  color: #0a0d13;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
}
.whats-new-text{ color: var(--text-dim); flex: 1 1 320px; }
.whats-new-text strong{ color: var(--text); }
.whats-new-cta{ color: var(--accent-strong); font-weight: 600; white-space: nowrap; }

/* ---------------- Controls ---------------- */

.controls{
  margin-top: 26px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.search-row{ display: flex; gap: 10px; flex-wrap: wrap; }
.search-box{
  flex: 1 1 280px;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  color: var(--text-faint);
}
.search-box:focus-within{ border-color: var(--accent); }
.search-box input{
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-size: 14px; font-family: var(--font-body);
}
.search-box input::placeholder{ color: var(--text-faint); }

select{
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13.5px;
  font-family: var(--font-body);
  cursor: pointer;
}
select:focus{ outline: none; border-color: var(--accent); }
#sort-select{ flex: 0 0 auto; min-width: 170px; }

.filter-row{
  display: flex; gap: 22px; flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.filter-group{ display: flex; flex-direction: column; gap: 7px; }
.filter-label{
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint); font-weight: 600;
}
#category-select{ min-width: 220px; }

.chip-set{ display: flex; gap: 6px; flex-wrap: wrap; }
.chip{
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.chip:hover{ border-color: var(--accent); color: var(--text); }
.chip.is-active{
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
  font-weight: 600;
}

.reset-btn{
  margin-left: auto;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-faint);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
  font-family: var(--font-body);
}
.reset-btn:hover{ color: var(--text); border-color: var(--text-faint); }

.results-meta{
  margin-top: 18px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px;
  color: var(--text-faint);
  font-size: 13px;
  font-family: var(--font-mono);
}
.results-actions{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.collapse-hint{ color: var(--text-faint); }
.link-btn{
  background: none; border: none; padding: 0;
  color: var(--link); font-family: var(--font-mono); font-size: 12.5px;
  cursor: pointer;
}
.link-btn:hover{ text-decoration: underline; color: var(--accent-strong); }
.dot-sep{ color: var(--text-faint); }

/* ---------------- Catalog list ---------------- */

.catalog-list{ margin-top: 14px; }

.category-group{
  margin: 0 0 6px;
  border-bottom: 1px solid var(--border-soft);
}
.category-group:first-child{ margin-top: 0; }

.category-heading{
  display: flex; align-items: center; gap: 10px;
  list-style: none;
  cursor: pointer;
  padding: 12px 10px;
  margin: 0 -10px;
  border-radius: var(--radius-sm);
  transition: background-color .12s;
}
.category-heading::-webkit-details-marker{ display: none; }
.category-heading:hover{ background: var(--bg-card-hover); }
.category-heading .num{
  font-family: var(--font-mono); color: var(--accent-strong);
  font-size: 13px; font-weight: 600;
}
.category-heading h2{ font-size: 17px; color: var(--text); }
.category-heading .count{
  margin-left: auto; color: var(--text-faint); font-size: 12px; font-family: var(--font-mono);
}
.category-chevron{
  color: var(--text-faint);
  flex-shrink: 0;
  transition: transform .15s;
}
.category-group[open] .category-chevron{ transform: rotate(90deg); }
.category-group[open] .category-heading{ border-bottom: 1px solid var(--border-soft); }

.category-items{ padding: 12px 0 18px; }

.card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .12s;
}
.card:hover{ border-color: #303b4f; }

.card summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.card summary::-webkit-details-marker{ display: none; }

.card-chevron{
  color: var(--text-faint);
  flex-shrink: 0;
  transition: transform .15s;
  margin-left: auto;
}
.card[open] .card-chevron{ transform: rotate(90deg); }

.card-title-block{ display: flex; flex-direction: column; gap: 3px; min-width: 180px; flex: 1 1 260px; }
.card-name{ font-family: var(--font-head); font-weight: 600; font-size: 15.5px; color: #fff; }
.card-name{ display: inline-flex; align-items: center; gap: 7px; }
.new-badge{
  display: inline-block;
  background: var(--accent);
  color: #0a0d13;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  vertical-align: middle;
}
.card-desc{ font-size: 13px; color: var(--text-dim); }
.card-cat-tag{ font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }

.card-link-btn{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.card-link-btn:hover{ color: var(--accent-strong); border-color: var(--border); background: var(--bg-input); }
.card-link-btn.is-copied{ color: var(--accent-strong); border-color: var(--accent); }

.card.card-highlight{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.badge-row{ display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

.tier-badge{
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 5px;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.tier-badge[data-tier="1"]{ background: var(--tier1-bg); color: var(--tier1); }
.tier-badge[data-tier="2"]{ background: var(--tier2-bg); color: var(--tier2-strong, var(--accent-strong)); }
.tier-badge[data-tier="3"]{ background: var(--tier3-bg); color: var(--tier3); }

.status-pill{
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-dim);
  white-space: nowrap;
}
.status-dot{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot[data-group="GA"]{ background: var(--dot-ga); }
.status-dot[data-group="Limited Availability"]{ background: var(--dot-limited); }
.status-dot[data-group="Beta / Preview"]{ background: var(--dot-beta); }
.status-dot[data-group="Pending Acquisition"]{ background: var(--dot-pending); }
.status-dot[data-group="Legacy / Sunset"]{ background: var(--dot-legacy); }

.card-body{
  padding: 4px 16px 18px;
  border-top: 1px solid var(--border-soft);
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card-field{ padding-top: 14px; }
.card-field h3{
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent-strong); margin-bottom: 6px; font-family: var(--font-body); font-weight: 700;
}
.card-field p{ margin: 0; font-size: 13.5px; color: var(--text-dim); }
.card-field.full{ grid-column: 1 / -1; }
.card-field .meta-line{ font-size: 12.5px; color: var(--text-faint); font-family: var(--font-mono); }

.empty-state{
  text-align: center; color: var(--text-faint);
  padding: 60px 20px; font-size: 14px;
}

/* ---------------- Versioning ---------------- */

.version-list{ margin-top: 30px; position: relative; }
.version-entry{
  position: relative;
  padding: 0 0 34px 30px;
  border-left: 2px solid var(--border);
}
.version-entry:last-child{ border-left-color: transparent; padding-bottom: 0; }
.version-entry::before{
  content: "";
  position: absolute; left: -7px; top: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg), 0 0 10px rgba(118,185,0,0.7);
}
.version-head{ display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.version-label{ font-family: var(--font-head); font-size: 18px; font-weight: 600; color: #fff; }
.version-date{ font-family: var(--font-mono); font-size: 12.5px; color: var(--text-faint); }
.version-summary{ color: var(--text-dim); margin: 0 0 10px; }
.version-changes{ margin: 0; padding-left: 20px; color: var(--text-dim); font-size: 13.5px; }
.version-changes li{ margin-bottom: 6px; }

/* ---------------- Sources ---------------- */

.search-box--sources{ margin-top: 22px; max-width: 420px; }

.sources-index{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 18px;
}
.sources-index-link{
  font-size: 12px; font-family: var(--font-mono);
  color: var(--text-dim);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 11px;
}
.sources-index-link:hover{ border-color: var(--accent); color: var(--text); text-decoration: none; }
.sources-index-link .count{ color: var(--text-faint); }
.sources-index-link:hover .count{ color: var(--accent-strong); }

.sources-groups{ margin-top: 6px; }
.sources-group{ margin-top: 30px; scroll-margin-top: 90px; }
.sources-group:first-child{ margin-top: 20px; }
.sources-group-heading{
  font-family: var(--font-head); font-size: 15px; font-weight: 600;
  color: var(--accent-strong);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
  scroll-margin-top: 90px;
}
.sources-group-heading .count{
  font-family: var(--font-mono); font-weight: 400; font-size: 12px; color: var(--text-faint);
}
.sources-list{
  list-style: none; margin: 16px 0 0; padding: 0;
  column-width: 340px; column-gap: 16px;
}
.sources-list li{
  break-inside: avoid;
  margin-bottom: 8px;
}
.sources-list a{
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.4;
}
.sources-list a:hover{
  border-color: var(--accent);
  color: var(--text);
  text-decoration: none;
}
.sources-list a::after{
  content: "↗";
  color: var(--text-faint);
  margin-left: 6px;
}

/* ---------------- About ---------------- */

.about-section{ margin: 34px 0; }
.about-section:first-of-type{ margin-top: 22px; }
.about-section h2{ font-size: 19px; margin-bottom: 10px; }
.about-section p{ color: var(--text-dim); margin: 0 0 4px; }
.about-section p strong{ color: var(--text); font-weight: 600; }
.about-subhead{
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent-strong); margin: 22px 0 6px; font-family: var(--font-body); font-weight: 700;
}
.about-lede{ font-size: 13.5px; margin-bottom: 12px !important; }

.legend-list{ list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.legend-item{
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.legend-item .tier-badge{ flex-shrink: 0; min-width: 56px; text-align: center; }
.legend-item .status-pill{ flex-shrink: 0; min-width: 172px; }
.legend-text{ font-size: 13px; color: var(--text-dim); }

.about-me{
  padding-top: 22px;
  border-top: 1px solid var(--border-soft);
}
.author-meta{
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent-strong) !important; margin-bottom: 14px !important;
}

/* ---------------- Footer ---------------- */

.site-footer{
  border-top: 1px solid var(--border-soft);
  margin-top: 40px;
}
.footer-inner{
  max-width: 1180px; margin: 0 auto; padding: 22px 20px 40px;
  color: var(--text-faint); font-size: 12.5px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.footer-sep{ opacity: 0.5; }

/* ---------------- Responsive ---------------- */

@media (max-width: 720px){
  .header-inner{ gap: 10px; }
  .brand-tagline{ display: none; }
  .tabs{ order: 3; width: 100%; margin-left: 0; justify-content: stretch; }
  .tab-link{ flex: 1; text-align: center; padding: 7px 4px; font-size: 12.5px; }
  .rss-link span{ display: none; }
  .filter-row{ gap: 14px; }
  #category-select{ min-width: 0; width: 100%; }
  .reset-btn{ margin-left: 0; width: 100%; }
  .card summary{ padding: 12px; }
  .card-body{ grid-template-columns: 1fr; padding: 0 12px 14px; }
  .sources-list{ column-width: 100%; }
  .results-meta{ flex-direction: column; align-items: flex-start; }
  .legend-item{ flex-wrap: wrap; }
  .legend-item .status-pill{ min-width: 0; }
}

@media (max-width: 420px){
  .view-inner{ padding: 24px 14px 50px; }
  .badge-row{ width: 100%; justify-content: space-between; }
}