:root {
  --accent: #0b6d84;
  --accent-2: #12a3b4;
  --ink: #16324f;
  --line: #525252;
  --card-line: #ddd;
  --dim: #5a6b78;
}

body {
  background-color: #e2e2e2;
  text-align: center;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  padding: 10px;
  color: #1c1c1c;
}

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

.pagewidth { margin: auto; width: min(1200px, 94vw); }
.outer { background-color: #ffffff; }
.main {
  padding: 25px 40px 30px;
  background-color: #ffffff;
  text-align: left;
}

/* Nav */
.menuitem.nav {
  display: flex;
  gap: 20px;
  border-bottom: 2px solid var(--line);
  padding-bottom: 6px;
  margin-bottom: 16px;
  justify-content: flex-start;
}
.menuitemlink {
  display: inline-block;
  padding: 6px 0;
  font-weight: bold;
  color: #000;
}
.menuitemlink:hover { text-decoration: underline; }

/* Banner */
#image_window {
  width: 100%;
  max-width: 760px;
  margin: 6px auto 18px;
}
#image_window img { width: 100%; height: auto; display: block; }

/* Section headers */
.grouphead {
  font-size: 120%;
  font-weight: bold;
  border-bottom: 2px solid var(--line);
  margin: 18px 0 12px;
  padding-bottom: 4px;
}
#pubs-count, #tail-count { font-weight: normal; color: var(--dim); font-size: 90%; }

.secbody { padding: 0; }

/* ---------- Filters ---------- */
.pubs-filters { text-align: left; }
.filter-row { margin: 6px 0 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.btn { padding: 4px 12px; border: 1px solid #bbb; background: #f7f7f7; border-radius: 4px; cursor: pointer; font-size: 93%; }
.btn:hover { background: #eee; }
.btn[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }

.sort-multilevel { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sort-label { font-weight: 600; }
.sort-multilevel select { padding: 3px 6px; border: 1px solid #bbb; border-radius: 4px; background: #fff; }

.tail-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin-left: auto; font-size: 93%; }

.filter-block { margin-bottom: 12px; }
.filter-label { font-weight: bold; margin-bottom: 6px; }
.facet-count { font-weight: 400; opacity: .65; }

/* Hint markers.
   The browser's own title tooltip is slow, cannot be styled, and does not
   reliably fire on a plain span -- on this page it never appeared at all.
   So the marker keeps its title for accessibility and we draw the visible
   tooltip ourselves from the same attribute. */
.hint {
  position: relative;
  display: inline-block; width: 1.05em; height: 1.05em; line-height: 1.05em;
  margin-left: .35em; text-align: center; font-size: .8em; font-weight: 700;
  font-style: italic; font-family: Georgia, serif;
  color: #555; background: #e6e6ee; border-radius: 50%;
  cursor: help; vertical-align: middle; user-select: none;
}
.hint:hover { background: var(--ink); color: #fff; }
.hint::after {
  content: attr(title);
  position: absolute; left: 50%; top: 165%; transform: translateX(-50%);
  width: max-content; max-width: 330px;
  white-space: pre-line; text-align: left;
  font: 400 12.5px/1.55 "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-style: normal; letter-spacing: 0;
  color: #fff; background: var(--ink);
  padding: 9px 11px; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  opacity: 0; visibility: hidden; transition: opacity .12s ease;
  pointer-events: none; z-index: 60;
}
.hint:hover::after { opacity: 1; visibility: visible; }

.text-input, .facet-search-input {
  width: 100%; padding: 6px; border: 1px solid #bbb; border-radius: 4px; background: #fff;
}
.facet-search-input { padding: 4px 6px; margin-bottom: 6px; }

/* The two range filters sit above the facet grid, half the width each: they cut the
   whole result set rather than one dimension of it, so they read as a header rather
   than as a fourth column. */
.slider-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 4px;
}
@media (max-width: 820px) { .slider-row { grid-template-columns: 1fr; } }

/* Facet columns */
.filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 6px;
}
@media (max-width: 820px) { .filter-grid { grid-template-columns: 1fr; } }

.facet-list { border: 1px solid var(--card-line); border-radius: 6px; padding: 6px; max-width: 100%; overflow: hidden; }
.facet-scroll { max-height: 10em; overflow: auto; }

/* Every cell in the grid is one height, so a row does not go ragged when one facet
   carries an extra control -- Authors has a search box above its list, which made it
   taller than Year and Industry beside it. The inner scroller takes whatever is left
   under the label, so each block ends flush with its neighbours. */
.filter-grid .filter-block { height: 15em; display: flex; flex-direction: column; }
.filter-grid .filter-block .facet-list { flex: 1 1 auto; min-height: 0; display: flex; }
.filter-grid .filter-block .facet-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
.filter-grid .filter-block .year-grid { flex: 1 1 auto; min-height: 0; max-height: none; }
.facet-items { display: block; }
.facet-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 92%; line-height: 1.7; margin: 0;
  white-space: nowrap; overflow: hidden; cursor: pointer;
}
.facet-item input { flex: 0 0 auto; margin: 0; }
.facet-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.facet-item.disabled { opacity: 0.4; }
.confidence-list { margin-bottom: 8px; }

/* Stop marks for the importance slider. It moves in 7 discrete steps and the native
   control gives no sign of that, so the marks sit UNDER the track rather than on it:
   restyling the track means taking over the whole slider's appearance, and the platform
   thumb is worth keeping. Inset by half a thumb width at each end, because the thumb
   travels between those centres rather than to the element's edges. */
.slider-ticks {
  display: flex; justify-content: space-between;
  margin: 1px 8px 3px; height: 5px;
}
.slider-tick { width: 1px; background: #c9c9c9; align-self: flex-start; height: 3px; }
.slider-tick.tick-end { height: 5px; background: #b0b0b0; }

/* Affiliation pairs. Two independent two-state groups rather than checkboxes: both
   lit is the inert default, so the buttons have to look on rather than look chosen. */
.aff-toggles { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 6px; }
/* A label carrying a newline stacks into two centred lines, which is how the combined
   Africa / Oceania button stays as narrow as its neighbours. Every button takes the same
   min-height so a stacked label does not stand taller than the rest of the row, which
   costs the group a few pixels and buys back far more width than shrinking the text
   would. The group still wraps, as a narrow window leaves no other option. */
.aff-group { display: flex; flex-wrap: wrap; gap: 4px; align-items: stretch; }
.aff-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 2.5em; padding: 2px 7px;
  border: 1px solid #bbb; background: #fff; border-radius: 4px;
  cursor: pointer; font-size: 87%;
}
.aff-label { white-space: pre-line; text-align: center; line-height: 1.15; }
.aff-btn .aff-badge { opacity: 0.65; }
.aff-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.aff-btn.active .aff-badge { opacity: 0.85; }

/* Year grid */
.year-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  grid-auto-rows: min-content;
  max-height: 9em; overflow: auto; padding-right: 4px;
}
.year-btn {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 3px 0; border: 1px solid #bbb; background: #fff; border-radius: 4px;
  cursor: pointer; font-size: 90%;
}
.year-btn .year-badge { opacity: 0.65; }
.year-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.year-btn.active .year-badge { opacity: 0.85; }

/* ---------- Confidence dots ---------- */
.conf-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  flex: 0 0 auto; vertical-align: middle;
}
.conf-high { background: #2e9e5b; }
.conf-medium { background: #e0a020; }
.conf-low { background: #b0b0b0; }
.conf { display: none; align-items: center; gap: 5px; margin-left: 10px; }
.conf-label { font-size: 85%; color: var(--dim); text-transform: capitalize; }

/* ---------- Result cards ---------- */
.pub-list { list-style: none; margin: 0; padding: 0; }
.pub-item {
  border: 1px solid var(--card-line); border-radius: 6px;
  padding: 10px 12px; margin: 0 0 10px 0; background: #fff;
}
.pub-title { font-weight: 700; font-size: 105%; margin-bottom: 4px; }
.pub-meta { margin: 2px 0; line-height: 1.4; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.pub-dim { color: var(--dim); }
.pub-authors { margin: 2px 0; color: #333; font-size: 94%; }
.pub-evidence { margin: 4px 0; font-size: 90%; }
.evidence-text { color: var(--dim); font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 92%; margin-left: 6px; }
.pub-needs { margin: 4px 0; font-size: 90%; color: #a15c00; background: #fff5e0; border-radius: 4px; padding: 2px 6px; display: none; }

/* Badges */
.badge {
  display: inline-block; font-size: 80%; font-weight: 600;
  padding: 1px 8px; border-radius: 10px; margin-right: 6px;
}
.badge-kind { background: #e6f2f5; color: var(--accent); border: 1px solid #bfe0e8; }
.badge-integration { background: #eef0f4; color: var(--ink); border: 1px solid #d3d9e2; }
.badge-tail { background: #eee; color: #555; border: 1px solid #ddd; }

/* Chips */
.pub-chips { margin: 6px 0 2px; display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  display: inline-block; font-size: 82%; padding: 1px 9px; border-radius: 10px;
  cursor: pointer; border: 1px solid transparent; user-select: none;
}
.chip:hover { text-decoration: none; filter: brightness(0.96); }
.chip-sdv_component { background: #e6f2f5; color: var(--accent); border-color: #bfe0e8; }
.chip-use_case { background: #eef7ee; color: #2e6b3e; border-color: #c9e4cd; }
.chip-industry { background: #f3eefa; color: #5b3d86; border-color: #ddceed; }

/* Actions */
.pub-actions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.pub-action { display: inline-block; cursor: pointer; font-size: 93%; }
.pub-summary-toggle { color: var(--accent); }

/* Summary */
.pub-summary { display: none; margin: 8px 0 2px; max-width: 78ch; line-height: 1.5; color: #2a2a2a; }
.pub-summary.open { display: block; }
.pub-summary p { margin: 0 0 8px; }
.pub-summary p:last-child { margin-bottom: 0; }

/* Groups */
.pub-group { margin-bottom: 18px; }
.pub-group h3 { font-size: 105%; margin: 0 0 8px; padding-bottom: 3px; border-bottom: 1px solid #e0e0e0; }
.group-count { font-weight: normal; color: var(--dim); font-size: 88%; }
.empty { color: var(--dim); padding: 10px 0; }

/* ---------- Citation tail ---------- */
#tail-section.hidden { display: none; }
.tail-banner {
  background: #fbf6ea; border: 1px solid #ecdcb3; border-radius: 6px;
  padding: 8px 12px; margin-bottom: 12px; font-size: 92%; color: #6b5a2e; line-height: 1.45;
}
.tail-note { color: var(--dim); font-size: 90%; padding: 6px 0; }
.tail-item { opacity: 0.9; background: #fafafa; }
.tail-item .pub-title { font-weight: 600; font-size: 100%; }

.credits { font-size: 82%; margin-top: 18px; font-style: italic; color: var(--dim); text-align: center; }

.hidden { display: none !important; }
#pubs-results.show-needs .pub-needs { display: inline-block; }
#pubs-results.show-needs .conf { display: inline-flex; }