/* ============================================================
   Why Low-Light Cameras Go Color Blind — project page
   Theme adapted from the Vista4D project page (Futura/Inter, light,
   blue accent, rounded dark buttons). Credit in the footer.
   ============================================================ */

:root {
  --primary-color: #1E3765;   /* U of T Blue (Pantone 655) */
  --primary-hover: #007FA3;   /* U of T secondary blue (Pantone 633) */
  --accent-color:  #007FA3;   /* accent = U of T secondary blue */
  --text-primary:   #1E3765;  /* headings / title / buttons (U of T Blue) */
  --text-secondary: #475569;
  --text-light:     #94a3b8;
  --background-primary:   #ffffff;
  --background-secondary: #f8fafc;
  --border-color: #e2e8f0;
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 10px 20px -3px rgb(0 0 0 / 0.12), 0 4px 8px -4px rgb(0 0 0 / 0.10);
  --border-radius: 12px;
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --font-sans: 'Futura', 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --content-max: 820px;       /* TL;DR + both content sections (comfortable reading measure) */
  --hero-max: 960px;          /* title + authors — a touch wider than the body */
}

html { scroll-behavior: smooth; background: var(--background-primary); }

body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background-color: var(--background-primary);
  overflow-x: hidden;               /* guard against any incidental overflow */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--primary-color); transition: var(--transition); }
a:hover { color: var(--primary-hover); }

/* neutralise Bulma's .columns negative side-margins (they overflow the viewport
   on narrow screens and clip centered content on the right) */
.columns { margin-left: 0; margin-right: 0; max-width: 100%; }
.column { min-width: 0; }   /* let flex column shrink instead of overflowing */

/* shared content width for the TL;DR and both content sections, so the section
   headings and all paragraphs share identical left/right edges */
.teaser-section .container,
.content-section .container { max-width: var(--content-max); }
/* the hero (title + authors) runs a little wider so the names wrap less */
.hero .container { max-width: var(--hero-max); }
/* match the section containers' inner inset to the .column padding used by the
   hero/TL;DR (0.75rem) so every text block lines up on the left */
.content-section .container { padding-left: 0.75rem; padding-right: 0.75rem; }

/* ---------------- hero ---------------- */
.hero { background: var(--background-primary); }
.hero-body { padding-top: clamp(3rem, 8vh, 6rem); padding-bottom: 2rem; }

.publication-title {
  font-family: var(--font-sans);
  font-weight: 700;
  color: #000;                     /* main title line in black */
  font-size: clamp(1.55rem, 6.4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0.9rem;
  overflow-wrap: break-word;
}
.publication-title .accent {
  color: var(--primary-color);   /* the part after the colon, in U of T Blue (#1E3765) */
  font-weight: 600;
}

.publication-subtitle {
  font-weight: 400;
  color: var(--text-secondary);
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  margin-bottom: 1.4rem;
}

.publication-venue {
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin-bottom: 1.7rem;
}
.venue-pill {
  display: inline-block;
  background: var(--background-secondary);
  border: 1px solid var(--border-color);
  color: var(--primary-color);
  font-weight: 600;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  margin-right: 0.15rem;
}
.venue-sep { margin: 0 0.35rem; color: var(--text-light); }

/* authors + affiliations */
.authors {
  font-size: 1.18rem;
  line-height: 1.9;
  margin-bottom: 0.6rem;
}
.author-block { display: inline-block; margin: 0 0.55rem; white-space: nowrap; }
.author-block a { color: var(--text-primary); font-weight: 500; text-decoration: none; }
.author-block a:hover { color: var(--primary-color); }
.author-block sup { color: var(--text-light); font-weight: 500; }

.affiliations {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 2rem;
}
.affiliations span { display: inline-block; margin: 0 0.55rem; }
.affiliations sup { color: var(--text-light); }

/* ---------------- link buttons ---------------- */
.publication-links {
  display: flex; flex-wrap: wrap;
  gap: 0.75rem; justify-content: center;
  margin-bottom: 1.6rem;
}
.button.is-dark {
  background: var(--text-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--border-radius) !important;
  box-shadow: var(--shadow-md);
  transition: var(--transition) !important;
  font-weight: 500;
}
.button.is-dark:hover {
  background: var(--accent-color) !important;
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}
/* not-yet-available links: shown but clearly inactive */
.button.is-dark.soon {
  background: transparent !important;
  color: var(--text-light) !important;
  border: 1px dashed var(--border-color) !important;
  box-shadow: none !important;
  cursor: default; font-weight: 500;
}
.button.is-dark.soon:hover {
  background: transparent !important; transform: none;
  box-shadow: none; color: var(--text-light) !important;
}
.button .icon { margin-right: 0.15rem; }

/* coming-soon note */
.coming-soon {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--text-light);
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}
.cs-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 0 0 0 rgba(0,127,163,0.5);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,127,163,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(0,127,163,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,127,163,0); }
}

/* ---------------- teaser ---------------- */
.teaser-section { padding-top: 1rem; }
.section-heading {
  font-weight: 700; font-size: 1.6rem;
  color: var(--text-primary); margin-bottom: 0.9rem;
}
.teaser {
  font-size: 1.15rem; line-height: 1.75;
  color: var(--text-secondary);
  text-align: left;
}
.teaser strong { color: var(--text-primary); }
/* semantic highlights, page-wide */
.hl-orange { color: #DC4633 !important; }   /* "color shift" / "black-level error" — U of T Warm Red */
.hl-green  { color: #8DBF2E !important; }   /* "SIDD-CC" — U of T light green (Pantone 376) */
.teaser-2 { margin-top: 1.1rem; }

/* ---------------- content sections ---------------- */
.content-section { padding: 2.75rem 1.5rem; }
.content-section.alt { background: var(--background-secondary); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.content-section.text-left .section-lead { text-align: left; }
.section-lead {
  max-width: 100%; margin: 0 auto 1.5rem;
  font-size: 1.1rem; line-height: 1.7; color: var(--text-secondary); text-align: center;
}
.section-lead strong { color: var(--text-primary); }
.subsection-heading {
  font-weight: 700; font-size: 1.25rem; color: var(--text-primary);
  margin: 2.2rem 0 0.8rem; text-align: center;
}
/* SIDD-CC before/after sliders */
.slider-row { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ba-slider {
  position: relative; --pos: 50%;
  touch-action: none; user-select: none; -webkit-user-select: none;
  border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-md); cursor: ew-resize;
}
.ba-slider:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.ba-slider img { display: block; width: 100%; height: auto; pointer-events: none; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; background: #fff; transform: translateX(-1px);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25); pointer-events: none;
}
.ba-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  height: 28px; padding: 0 8px; border-radius: 999px;
  background: #fff; color: var(--primary-color);
  font-size: 12px; font-weight: 700; letter-spacing: 2px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 5px rgba(0,0,0,0.35); white-space: nowrap;
}
.ba-label {
  position: absolute; top: 10px; padding: 2px 9px; border-radius: 6px;
  font-size: 0.8rem; font-weight: 600; color: #fff;
  background: rgba(0,0,0,0.5); pointer-events: none;
}
.ba-label-l { left: 10px; }
.ba-label-r { right: 10px; }
.fig-caption { text-align: center; font-size: 0.92rem; color: var(--text-light); margin-top: 0.6rem; }
@media (max-width: 720px) { .slider-row { grid-template-columns: 1fr; } }
/* order-of-operations pipeline */
.pipeline { max-width: 940px; margin: 1.2rem auto 0; display: flex; flex-direction: column; gap: 0.9rem; }
.pipe-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.45rem; }
.pipe-tag { font-weight: 700; color: #DC4633; }
.pipe-tag.ours { color: #6b9b1e; }
.pipe-box { background: #fff; border: 1px solid var(--border-color); border-radius: 8px; padding: 0.4rem 0.7rem; font-size: 0.9rem; color: var(--text-primary); box-shadow: var(--shadow-md); }
.pipe-arrow { color: var(--text-light); font-weight: 700; }
.pipe-out { font-weight: 700; padding: 0.4rem 0.75rem; border-radius: 8px; font-size: 0.9rem; }
.pipe-out.bad { color: #DC4633; background: rgba(220,70,51,0.10); }
.pipe-out.good { color: #4e7d16; background: rgba(141,191,46,0.18); }
/* method overview */
.overview-fig { margin: 0.5rem auto 0; max-width: 1000px; }
.overview-fig img { width: 100%; height: auto; display: block; }
.overview-fig .fig-caption { text-align: left; margin-top: 0.9rem; line-height: 1.55; }
.overview-fig .fig-caption strong { color: var(--text-secondary); }
.overview-fig .fig-caption sub { font-size: 0.72em; }
@media (max-width: 640px) {
  .pipe-tag { width: 100%; text-align: center; }
  .pipe-box, .pipe-out { font-size: 0.82rem; }
}

/* ---------------- quantitative results explorer ---------------- */
.quant-controls { display: flex; flex-direction: column; gap: 0.7rem; margin: 0.4rem 0 1.1rem; }
.q-ctrl-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
.q-ctrl-label { font-weight: 700; color: var(--text-primary); font-size: 0.88rem; min-width: 62px; }
.q-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.q-pill {
  font-family: var(--font-sans); font-size: 0.88rem; font-weight: 500;
  color: var(--text-secondary); background: var(--background-secondary);
  border: 1px solid var(--border-color); border-radius: 999px;
  padding: 0.26rem 0.8rem; cursor: pointer; transition: var(--transition);
}
.q-pill:hover { border-color: var(--accent-color); color: var(--text-primary); }
.q-pill.is-active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

.quant-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.1rem;
  font-size: 0.84rem; color: var(--text-secondary); margin-bottom: 1.3rem;
}
.q-leg { display: inline-flex; align-items: center; gap: 0.35rem; }
.q-chip { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.q-leg-note { color: var(--text-light); }

.q-c-ours  { background: #8DBF2E; }
.q-c-blind { background: #007FA3; }
.q-c-calib { background: #1E3765; }
.q-c-ref   { background: #9aa1a9; }

.quant-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.q-chart { min-width: 0; }
.q-chart-title { font-weight: 700; color: var(--text-primary); font-size: 1rem; margin-bottom: 0.7rem; }
.q-arrow { font-weight: 500; color: var(--text-light); font-size: 0.8rem; }

.q-bars { display: flex; flex-direction: column; gap: 0.2rem; }
.q-grouplabel {
  font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-light); font-weight: 700; margin: 0.55rem 0 0.15rem;
}
.q-grouplabel:first-child { margin-top: 0; }
.q-row { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 0.45rem; }
.q-name { font-size: 0.76rem; color: var(--text-secondary); line-height: 1.15; }
.q-row-ours .q-name { color: #5c7d1a; font-weight: 700; }
.q-track { background: var(--background-secondary); border: 1px solid var(--border-color); border-radius: 4px; height: 16px; overflow: hidden; }
.q-bar { height: 100%; border-radius: 3px; transition: width 0.4s cubic-bezier(0.4,0,0.2,1); }
.q-val { font-size: 0.8rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.q-val.best { font-weight: 700; color: var(--text-primary); }
.q-val.second { text-decoration: underline; }
.q-axis { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-light); margin-top: 0.4rem; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .quant-charts { grid-template-columns: 1fr; gap: 1.9rem; }
  .q-row { grid-template-columns: 110px 1fr auto; }
}

/* Ours method pill (qualitative) picks up the signature green */
.q-pill.is-ours { color: #5c7d1a; border-color: #cfe3a6; }
.q-pill.is-ours:hover { border-color: #8DBF2E; }
.q-pill.is-ours.is-active { background: #8DBF2E; border-color: #8DBF2E; color: #fff; }

/* ---------------- qualitative results viewer ---------------- */
.qual-stage { max-width: 100%; margin: 0.3rem auto 0; }
.qual-stage .ba-slider { width: 100%; }
.qual-stage .ba-base { background: var(--background-secondary); }

/* ---------------- affiliation logos ---------------- */
.logos-section { padding: 1.5rem 1.5rem 0.5rem; }
.logo-row {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: clamp(1.6rem, 4.5vw, 3.75rem);
}
.logo-row img {
  height: 46px; width: auto;
  opacity: 0.9;
  transition: opacity 0.25s ease;
}
.logo-row:hover img { opacity: 0.55; }
.logo-row img:hover { opacity: 1; }
@media (max-width: 640px) { .logo-row img { height: 34px; } }

/* ---------------- footer ---------------- */
.footer {
  background: var(--background-secondary);
  border-top: 1px solid var(--border-color);
  padding: 2.5rem 1.5rem 3rem;
  margin-top: 2rem;
}
.footer .content { color: var(--text-light); font-size: 0.92rem; }
.footer .license { font-size: 0.82rem; margin-top: 0.4rem; }

@media (max-width: 640px) {
  .publication-title { font-size: clamp(1.35rem, 5.8vw, 2rem); }
  .authors { font-size: 1rem; }
  .publication-venue { font-size: 0.95rem; }
  .author-block { margin: 0 0.4rem; }
  .affiliations span { margin: 0 0.35rem; }
  .publication-title .accent { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-dot { animation: none; }
  html { scroll-behavior: auto; }
}