/* MICCAI Explorer stylesheet */

:root {
  --nav-bg:       #e9eff7;   /* light blue-gray; logos stay visible on it */
  --nav-border:   #d4deeb;
  --nav-text:     #1e293b;
  --nav-muted:    #475569;
  --nav-active:   #0891b2;   /* overridden per year page with the year color */

  --accent:       #0891b2;   /* overridden per year page with the year color */
  --accent-vivid: #22d3ee;
  --accent-bg:    #cffafe;   /* light tint of --accent; overridden per year page */
  --accent-on-dark: #22d3ee; /* accent legible on the dark stat strip; overridden per year */

  --page-bg:      #f1f5f9;
  --card-bg:      #ffffff;

  --text:         #1e293b;
  --text-muted:   #64748b;
  --text-faint:   #94a3b8;

  --border:       #e2e8f0;
  --border-inner: rgba(255,255,255,0.12);

  --strip-bg:     #0f2744;   /* deep navy; stat strip keeps the dark signature look */
  --strip-accent: #0891b2;   /* overridden per year page with the year color */
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  min-height: 100vh;
}

/* ── Navigation ── */
.site-nav {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-brand {
  font-size: 18px;
  font-weight: 600;
  color: var(--nav-text);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.nav-brand:hover { color: var(--accent); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-overview {
  font-size: 16px;
  color: var(--nav-muted);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 4px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav-overview:hover { color: var(--nav-text); }
.nav-overview.active {
  background: rgba(15,39,68,0.10);
  color: var(--nav-text);
  font-weight: 500;
  border-bottom: none;
}

/* Year logo links in nav */
.nav-year-link {
  display: inline-flex;
  align-items: center;
  padding: 4px 6px;
  border-bottom: 2px solid transparent;
  border-radius: 2px;
  text-decoration: none;
}
.nav-year-link:hover { border-bottom-color: rgba(15,39,68,0.25); }
.nav-year-link.active { border-bottom-color: var(--nav-active); }

.nav-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.nav-year-link:hover .nav-logo,
.nav-year-link.active .nav-logo { opacity: 1; }

.nav-logo-pill {
  background: #ffffff;
  border: 0.5px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  display: inline-flex;
  align-items: center;
}

/* ── Year logo header (top of year pages) ── */
.year-logo-header {
  background: var(--nav-bg);
  padding: 18px 24px 16px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.year-logo-img {
  height: 80px;
  width: auto;
  object-fit: contain;
}
/* 2022's logo is a bare wordmark that fills its whole canvas, so rendered at the
   same 80px it looks much bigger than logos that include artwork. Scale it down
   so its visual mass matches the others. */
.year-logo-img.logo-2022 { height: 56px; }
.nav-logo.logo-2022      { height: 20px; }

.year-title-block { display: flex; flex-direction: column; }
.year-title {
  font-size: 30px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.year-city {
  font-size: 17px;
  color: var(--text-muted);
}
.year-logo-pill {
  background: #ffffff;
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
}

/* ── Stat strip (year pages) ── */
.stat-strip {
  background: var(--strip-bg);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 3px solid var(--strip-accent);
}
.stat-cell {
  padding: 18px 24px;
  border-right: 0.5px solid var(--border-inner);
}
.stat-cell:last-child { border-right: none; }
.stat-label {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
}
.stat-value {
  font-size: 34px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-value.accent { color: var(--accent-on-dark); }
.stat-scale {
  font-size: 18px;
  font-weight: 400;
  color: rgba(255,255,255,0.5);
}

/* ── In-page section navigation (year pages) ── */
.section-nav {
  position: sticky;
  top: 50px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 24px;
  background: rgba(241,245,249,0.94);
  backdrop-filter: blur(4px);
  border-bottom: 0.5px solid var(--border);
  overflow-x: auto;
  white-space: nowrap;
}
.section-nav a {
  font-size: 16px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 4px;
}
.section-nav a:hover { color: var(--text); }
.section-nav a.active {
  color: var(--accent);
  background: var(--accent-bg);
  font-weight: 500;
}

/* ── Page body ── */
.page-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px;
}

/* ── Section headings ── */
.section-heading {
  font-size: 21px;
  font-weight: 600;
  color: var(--text);
  margin: 32px 0 12px;
  padding-left: 12px;
  border-left: 3px solid var(--accent);
  scroll-margin-top: 100px;   /* clear the sticky nav + section nav on anchor jump */
}

/* ── Cards ── */
.card {
  background: var(--card-bg);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.card-head {
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.card-head-left { flex: 1; }
.card-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.card-sub {
  font-size: 15px;
  color: var(--text-muted);
  margin: 2px 0 0;
}

/* ── About page prose ──
   The About page carries no charts, so its paragraphs are set at full-strength
   text color rather than the muted .card-sub used for chart captions, and at
   the caption size rather than the 14px floor: this page is read, not glanced
   at. Shares .card-head's 16px side padding so the text lines up under the
   card titles. */
.about-prose {
  padding: 14px 16px;
  font-size: 16px;
  color: var(--text);
  line-height: 1.7;
}
/* Accent, but keep the underline: these links are the point of the page, and
   color on its own is not enough of a signal that something is clickable. */
.about-prose a { color: var(--accent); }

/* ── Badges ── */
.badge {
  font-size: 15px;
  padding: 3px 9px;
  border-radius: 20px;
  font-weight: 500;
  cursor: default;
}
.badge-active { color: var(--accent); background: var(--accent-bg); }
/* ── Chart iframes ── */
.chart-frame {
  width: 100%;
  border: none;
  display: block;
}

/* ── Grid layouts ── */
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.grid-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

/* ── Small stat cards (index page) ── */
.stat-card {
  background: var(--card-bg);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.stat-card-label {
  font-size: 14px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.stat-card-value {
  font-size: 30px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat-card-note {
  font-size: 15px;
  color: var(--accent);
  margin-top: 4px;
}
.stat-card-note.muted { color: var(--text-muted); }

/* ── Year comparison strip (index page) ── */
.year-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.year-compare-card {
  background: var(--card-bg);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 18px 20px;
}
.year-compare-title {
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
}
.year-tag {
  font-size: 15px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--accent-bg);
  color: var(--accent);
}
/* ── Footer ── */
.site-footer {
  background: var(--page-bg);
  border-top: 0.5px solid var(--border);
  padding: 20px 24px;
  margin-top: 40px;
  text-align: center;
  font-size: 16px;
  color: var(--text-muted);
}
.site-footer a { color: var(--accent); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* The About and source links sit on their own line above the attribution, and
   are set a little stronger than it: on a narrow screen the nav bar is hidden,
   which leaves these as the only navigation on the page. */
.site-footer .footer-links {
  margin: 0 0 8px;
  font-weight: 500;
}
.site-footer .footer-sep {
  color: var(--text-faint);
  margin: 0 4px;
}
/* The GitHub mark, wherever it appears: the footer on every page, and the
   About page's code card. Deliberately NOT scoped to .site-footer; it was, and
   the copy on the About page then fell back to the browser's default replaced-
   element size (300x150) instead of matching its text.
   It sizes itself from the surrounding text and takes that text's color, so it
   follows the year accent in the footer of a year page. The negative
   vertical-align sits it on the baseline rather than below it, which is where
   an inline SVG lands by default. */
.gh-mark {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.17em;
  margin-right: 5px;
  fill: currentColor;
}

/* Paper lists (year page, title patterns section) */
.paper-lists-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.paper-list-col {
  padding: 16px 20px;
  border-right: 0.5px solid var(--border);
}
.paper-list-col:last-child { border-right: none; }

.paper-list-heading {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.paper-list {
  list-style: decimal;
  padding-left: 18px;
  margin: 0;
}

.paper-list-item {
  margin-bottom: 12px;
  line-height: 1.4;
}
.paper-list-item:last-child { margin-bottom: 0; }

.paper-list-link {
  font-size: 16px;
  color: var(--text);
  text-decoration: none;
  display: block;
}
.paper-list-link:hover { color: var(--accent); text-decoration: underline; }

.paper-list-meta {
  font-size: 15px;
  color: var(--text-muted);
  margin-top: 2px;
  display: block;
}

/* ── Top papers tables (year pages) ── */
.papers-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.papers-table th {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--page-bg);
  white-space: nowrap;
}
.papers-table td {
  padding: 8px 14px;
  border-bottom: 0.5px solid var(--border);
  vertical-align: top;
  line-height: 1.45;
}
.papers-table tr:last-child td { border-bottom: none; }
.papers-table tbody tr:hover { background: #f8fafc; }
.papers-table .num-col {
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  width: 30px;
}
.papers-table .score-col {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.papers-table .score-col .score-mean { font-weight: 600; }
.papers-table .score-col .score-list { color: var(--text-muted); }
.papers-table .subject-col { color: var(--text-muted); }
.papers-table .verdict-col { color: var(--text-muted); font-size: 15px; }

/* Presentation column (Top Papers tables). Colors match the presentation-type
   palette on the Orals & Spotlights page so the two read as one scheme.
   Poster is deliberately plain text: it is the default, not a badge. */
.papers-table .pres-col { white-space: nowrap; font-size: 15px; }
.papers-table .pres-oral,
.papers-table .pres-spotlight {
  display: inline-block;      /* on the span, not the td: a background on the
                                 cell stretches to the full row height */
  font-weight: 600;
  border-radius: 20px;
  padding: 2px 10px;
  line-height: 1.5;
}
.papers-table .pres-oral      { color: #5b21b6; background: rgba(124,58,237,0.12); }
.papers-table .pres-spotlight { color: #0e7490; background: rgba(8,145,178,0.12); }
.papers-table .pres-poster    { color: var(--text-muted); }
.papers-table a {
  color: var(--text);
  text-decoration: none;
}
.papers-table a:hover { color: var(--accent); text-decoration: underline; }
.tick-yes { color: #16a34a; font-weight: 600; }
.tick-no  { color: #dc2626; font-weight: 600; }

/* ── Responsive ── */
@media (max-width: 700px) {
  .stat-grid        { grid-template-columns: repeat(2, 1fr); }
  .grid2            { grid-template-columns: 1fr; }
  .grid-2-1         { grid-template-columns: 1fr; }
  .year-compare     { grid-template-columns: 1fr; }
  .stat-strip       { grid-template-columns: repeat(2, 1fr); }
  /* Keep the year links reachable on phones: shrink instead of hiding */
  .site-nav         { padding: 0 12px; }
  .nav-links        { gap: 2px; }
  .nav-logo         { height: 20px; }
  .nav-logo.logo-2022 { height: 15px; }
  .nav-overview     { font-size: 15px; padding: 4px 6px; }
  .nav-brand        { font-size: 16px; }
  .year-logo-img    { height: 56px; }
  .year-logo-img.logo-2022 { height: 40px; }
  .year-title       { font-size: 23px; }
  .paper-lists-grid { grid-template-columns: 1fr; }
  .paper-list-col   { border-right: none; border-bottom: 0.5px solid var(--border); }
  .paper-list-col:last-child { border-bottom: none; }
  .papers-table th, .papers-table td { padding: 6px 8px; }
}

/* ── Collapsible Top Papers tables ── */
.card-head.collapsible-head { cursor: pointer; user-select: none; transition: background .12s; }
.card-head.collapsible-head:hover { background: #f8fafc; }
.card-head.collapsible-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.collapse-chevron {
  flex: none; align-self: center; margin-left: 12px; color: var(--text-muted);
  font-size: 17px; line-height: 1; transition: transform .18s ease; transform: rotate(0deg);
}
.card.collapsed .collapse-chevron { transform: rotate(-90deg); }
.collapse-count {
  display: inline-block; margin-left: 8px; font-size: 15px; font-weight: 600;
  color: var(--accent); vertical-align: middle;
}
.card.collapsed .collapse-count::after { content: " · click to expand"; color: var(--text-faint); font-weight: 400; }
.card.collapsed .collapse-body { display: none; }