@import url("./vendor/fontawesome/icons.css?v=20261016-r6");
/* Independently implemented cards; source records are kept with the paper data. */
.publications-intro {
  margin: -8px 0 20px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}

#publication-filters {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 5px;
  margin: 0 0 24px;
  background: linear-gradient(180deg, rgb(255 255 255 / 16%), transparent 60%), var(--glass-fill);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 -1px 1px rgb(0 0 0 / 6%), 0 4px 16px var(--glass-shadow);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}
#publication-filters button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--muted);
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}
#publication-filters button:hover { color: var(--accent); background-color: var(--glass-tint); }
#publication-filters button.is-active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 23%, var(--glass-border));
  background: linear-gradient(145deg, color-mix(in srgb, var(--glass-highlight) 70%, transparent), transparent 62%), var(--glass-active-fill);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 2px 7px var(--glass-shadow);
}
#publication-filters button:focus-visible { outline-offset: 3px; }
#publication-filters button:active { transform: scale(.98); }
#publication-filters[data-glass-ready] button.is-active { background: transparent; border-color: transparent; box-shadow: none; }
.publication-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding-inline: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
}
#publication-filters button.is-active .publication-count {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--glass-highlight) 65%, transparent);
}

#publication-list {
  position: relative;
  display: block;
  height: min(1185px, max(390px, calc(150svh - 420px)));
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 36%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 6px 24px var(--glass-shadow);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 70%, transparent) transparent;
  scrollbar-gutter: stable;
  scroll-padding-block: 12px;
  scroll-behavior: auto;
  overscroll-behavior-y: auto;
}
#publication-list:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#publication-list::-webkit-scrollbar { width: 10px; }
#publication-list::-webkit-scrollbar-track { background: transparent; }
#publication-list::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 70%, transparent);
  background-clip: padding-box;
}
.publication-card {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin: 0 0 14px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, var(--surface));
  border-radius: 16px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent-soft) 60%, var(--surface)), color-mix(in srgb, var(--surface) 95%, transparent));
  box-shadow: 0 3px 14px color-mix(in srgb, var(--ink) 5%, transparent);
  backdrop-filter: blur(12px);
  scroll-margin-block: 12px;
  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.publication-card[hidden] { display: none; }
#publications[data-pub-filter='all'] .publication-card[data-selected='true'] {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), color-mix(in srgb, var(--accent) 4%, var(--surface)));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 60%, transparent), 0 3px 14px color-mix(in srgb, var(--ink) 5%, transparent);
}
.publication-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 14%, transparent);
  background-color: var(--surface);
}
.publication-figure {
  flex: 0 0 190px;
  align-self: center;
  min-width: 0;
  margin: 0;
}
.publication-figure img,
.publication-figure video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  background: color-mix(in srgb, var(--paper) 60%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 8%, transparent);
  transition: transform .3s ease;
}
.publication-card:hover .publication-figure img,
.publication-card:hover .publication-figure video { transform: scale(1.02); }
.publication-figure .publication-video-poster { display: none; }
.publication-figure .publication-video-poster.is-visible { display: block; }
.publication-body { flex: 1; min-width: 0; text-align: left; text-indent: 0; }
.publication-title {
  margin: 0 0 10px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--entry-title-size, 22px);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: break-word;
}
.publication-authors {
  margin: 0 0 12px;
  padding: 0;
  text-indent: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  overflow-wrap: break-word;
}
.publication-authors strong { color: var(--ink); font-weight: 700; }
.publication-authors sup { font-size: .72em; line-height: 0; vertical-align: super; }
.publication-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 15px;
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.6;
}
.publication-links a,
.publication-resource-note,
.publication-link-unavailable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.publication-links a[hidden] { display: none; }
.publication-links a:hover { color: var(--accent); }
.publication-link-unavailable { opacity: .68; }
.publication-links svg {
  flex: none;
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.publication-venue-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.publication-venue {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 600;
  font-style: italic;
  line-height: 1.55;
}
.daily-top-icon { display: inline-block; width: 25px; height: 25px; flex: none; vertical-align: middle; }
.news-recognition { display: inline-flex; align-items: center; vertical-align: middle; gap: 3px; white-space: nowrap; }

@media (min-width: 769px) and (max-width: 1024px) {
  .publication-card { gap: 18px; padding: 16px; }
  .publication-figure { flex-basis: 170px; }
}
@media (max-width: 768px) {
  #publication-list { height: min(1035px, max(390px, calc(150svh - 360px))); padding: 8px; border-radius: 18px; }
  .publication-card { flex-direction: column; gap: 16px; padding: 16px; }
  .publication-figure { flex: 0 0 auto; width: 100%; }
  .publication-figure img, .publication-figure video { max-height: 220px; }
  .publication-links { gap: 6px 14px; }
  .publication-authors { font-size: 16px; }
}
@media (max-width: 1024px), (pointer: coarse) {
  .publication-links a,
  .publication-link-unavailable { min-height: 44px; }
}
@media (hover: none) {
  .publication-card:hover,
  .publication-card:hover .publication-figure img,
  .publication-card:hover .publication-figure video { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .publication-figure video { display: none; }
  .publication-figure .publication-video-poster { display: block; }
  .publication-card,
  .publication-figure img,
  .publication-figure video,
  #publication-filters button { transition: none; }
  #publication-filters button:active { transform: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #publication-filters { background-color: var(--surface); }
}
@media (prefers-contrast: more) {
  #publication-list { background: var(--surface); border-color: var(--accent); }
  #publication-filters { background: var(--surface); border-color: var(--accent); }
  #publication-filters button { color: var(--ink); }
  #publication-filters button.is-active { background: var(--accent-soft); border-color: var(--accent); }
}
@media (forced-colors: active) {
  #publication-list { background: Canvas; border-color: CanvasText; box-shadow: none; }
  #publication-filters, #publication-filters button.is-active { background: Canvas; border: 1px solid CanvasText; box-shadow: none; }
  #publication-filters button.is-active { border-color: Highlight; color: Highlight; }
  .publication-count { background: Canvas; box-shadow: none; }
}

@media (prefers-reduced-transparency: reduce) {
  #publication-filters, #publication-list { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media print {
  #publication-list { height: auto; overflow: visible; padding: 0; border: 0; box-shadow: none; }
  .publication-card { break-inside: avoid; }
}