:root {
  color-scheme: light dark;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  margin: 0;
  padding: 0 1rem 1rem;
}

header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0 0.5rem;
}

header h1 {
  font-size: 1.25rem;
  margin: 0;
}

#subtitle {
  font-size: 0.9rem;
  opacity: 0.7;
  margin: 0.15rem 0 0;
}

#header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
}

#status {
  font-size: 0.85rem;
  opacity: 0.7;
  white-space: nowrap;
}

/* Now lives in the footer (icon form), not the header (text form) --
   see the footer rules further below. */

.toolbar {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#filter-count {
  font-size: 0.85rem;
  opacity: 0.8;
  white-space: nowrap;
}

/* Takes the space left over between filter-count and the export button,
   centering its own text within that space -- same row/height as the
   row count, roughly midway across the toolbar rather than off in the
   header above. */
#legend {
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.6;
}

#column-toggle-wrap {
  position: relative;
}

.toolbar-btn {
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  /* Explicit (not "normal") so a glyph with different font metrics --
     e.g. the "▾" in the Columns button -- can't make one button's line
     box a pixel taller than the other's. */
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

#column-toggle-panel {
  /* Lives in the toolbar, outside Tabulator's own overflow:hidden header
     chain (unlike .multiselect-panel below), so plain absolute positioning
     anchored to this wrapper is enough -- no fixed-position workaround
     needed here. */
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  background: Canvas;
  color: CanvasText;
  border: 1px solid #888;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  padding: 0.3rem;
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
}

.column-toggle-option {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  padding: 0.2rem 0.3rem;
  white-space: nowrap;
  cursor: pointer;
}

.column-toggle-option:hover {
  background: rgba(128, 128, 128, 0.15);
}

#export-status {
  font-size: 0.85rem;
}

#export-status.error {
  color: #c0392b;
}

#kev-table {
  height: 75vh;
}

.na-cell {
  opacity: 0.5;
}

.catalog-link {
  text-decoration: none;
}

.epss-trend-up {
  color: #c0392b;
}

.epss-trend-down {
  color: #2e7d32;
}

.catalog-header-title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.catalog-header-title a {
  color: inherit;
  text-decoration: none;
}

.catalog-header-title a:hover {
  text-decoration: underline;
}

.header-link {
  color: inherit;
  text-decoration: none;
}

.header-link:hover {
  text-decoration: underline;
}

.catalog-hide-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0 0.15rem;
  opacity: 0.45;
}

.catalog-hide-btn:hover {
  opacity: 1;
  color: #c0392b;
}

#excluded-catalogs {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
}

.excluded-label {
  opacity: 0.7;
}

.excluded-chip {
  border: 1px solid #888;
  background: transparent;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.excluded-chip:hover {
  background: rgba(128, 128, 128, 0.15);
}

.cvss-version-hint {
  opacity: 0.5;
  font-size: 0.8em;
}

/* Comes after cvss-version-hint above so its opacity:1/bold actually
   wins the cascade (equal specificity -- later source position wins) --
   full-strength, bold text for whichever catalog's date is the
   earliest. Greyscale only (no new color) so it can't be confused with
   the EPSS trend colors or anything else that uses color for meaning. */
.earliest-date-hint {
  opacity: 1;
  font-weight: bold;
}

/* Make the active sort arrow bigger/higher-contrast than Tabulator's
   default (6px, #666) so the currently-sorted column is obvious at a
   glance -- unsorted columns' arrows are left at their normal subtle
   size/color. No new color introduced (stays greyscale) so this can't
   be confused with the EPSS trend colors or the earliest-catalog
   highlight elsewhere in the table. */
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
  border-left-width: 7px;
  border-right-width: 7px;
  border-bottom-width: 9px;
  border-bottom-color: #000;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
  border-left-width: 7px;
  border-right-width: 7px;
  border-top-width: 9px;
  border-top-color: #000;
}

.range-filter {
  display: flex;
  gap: 0.15rem;
  align-items: center;
}

.range-filter input[type="text"] {
  width: 100%;
  min-width: 0;
  font-size: 0.75rem;
  padding: 0.1rem 0.25rem;
  box-sizing: border-box;
  cursor: pointer;
}

.range-clear {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0 0.2rem;
  opacity: 0.6;
}

.range-clear:hover {
  opacity: 1;
}

.multiselect-filter {
  position: relative;
  display: block;
  width: 100%;
}

.multiselect-trigger {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.75rem;
  padding: 0.15rem 0.3rem;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.multiselect-panel {
  /* fixed (not absolute) + position set in JS from the trigger's
     getBoundingClientRect() -- Tabulator's header row chain
     (.tabulator / .tabulator-header / .tabulator-header-contents /
     .tabulator-col) all set overflow:hidden, which would clip an
     absolutely-positioned dropdown no matter which ancestor it's
     positioned relative to. Fixed positioning escapes that clipping. */
  position: fixed;
  z-index: 20;
  background: Canvas;
  color: CanvasText;
  border: 1px solid #888;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  padding: 0.3rem;
  min-width: 140px;
  max-height: 220px;
  overflow-y: auto;
}

.multiselect-option {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: normal;
  padding: 0.15rem 0.2rem;
  white-space: nowrap;
  cursor: pointer;
}

.multiselect-option:hover {
  background: rgba(128, 128, 128, 0.15);
}

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0 1rem;
}

#share-links {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

#share-links a {
  display: block;
  /* X's mark is solid black/currentColor (see its inline fill) -- unlike
     the other 3 icons' own vivid brand colors, plain black would vanish
     against a dark system theme, so it alone needs the same opacity
     treatment as muted text elsewhere rather than full-strength color. */
  color: CanvasText;
  opacity: 0.75;
}

#share-links a:hover {
  opacity: 1;
}

#share-links svg {
  height: 20px;
  width: 20px;
  display: block;
}

/* Sits between the share icons and the ANTERAS logo. Kept at the same
   muted weight as the share row so it reads as a footer utility, not a
   call to action -- the X mark here is only a platform hint next to the
   handle, at ~2/3 the share icons' size so the two never look like a
   set of five buttons. */
#contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  white-space: nowrap;
  color: CanvasText;
  opacity: 0.65;
  text-decoration: none;
}

#contact-link:hover {
  opacity: 1;
  text-decoration: underline;
}

#contact-link svg {
  height: 13px;
  width: 13px;
  display: block;
}

/* The handle carries the meaning; "Feedback" is just the cue for what
   the link is for, so it stays a notch quieter and drops out first on
   narrow screens rather than wrapping the footer. */
#contact-label {
  opacity: 0.8;
}

@media (max-width: 560px) {
  #contact-label {
    display: none;
  }
}

/* The ANTERAS logo's own transparent background is fine in light mode,
   but its wordmark is solid black -- unreadable against a dark system
   theme (this page follows prefers-color-scheme; the logo itself
   doesn't). A small fixed-white chip behind it keeps the actual brand
   colors untouched (no invert() hacks) and legible in both themes. */
#anteras-logo {
  height: 22px;
  width: auto;
  display: block;
  background: #fff;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
}