/* ------------------------------------------------------------------
   WaveCast project page
   Nerfies/Bulma-style, matched to https://dof-gs.github.io/
   ------------------------------------------------------------------ */

html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans', sans-serif;
}

/* ---------- publication links ---------- */

.publication-links .external-link.button.is-dark {
  height: 2.35em;
  padding-left: 1.05em;
  padding-right: 1.1em;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  font-size: 0.93rem;
  box-shadow: 0 5px 15px rgba(41, 70, 72, 0.13);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.publication-links .link-block:nth-child(1) .external-link {
  background: linear-gradient(135deg, #dfa059, #c97b46);
}

.publication-links .link-block:nth-child(2) .external-link {
  background: linear-gradient(135deg, #45a294, #287c72);
}

.publication-links .link-block:nth-child(3) .external-link {
  background: linear-gradient(135deg, #526f79, #354f59);
}

.publication-links .external-link.button.is-dark:hover,
.publication-links .external-link.button.is-dark:focus {
  color: #fff;
  filter: saturate(1.08) brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 8px 19px rgba(41, 70, 72, 0.18);
}

.publication-links .external-link .icon {
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.36em !important;
  margin-left: -0.12em !important;
}

.publication-links .external-link .icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.publication-links .external-link.is-coming-soon {
  cursor: default;
  opacity: 0.72;
  box-shadow: none;
}

.publication-links .external-link.is-coming-soon:hover {
  filter: none;
  transform: none;
  box-shadow: none;
}

/* widen the content column: Bulma's is-max-desktop is 960px */
.container.is-max-desktop { max-width: 1123px; }

/* ---------- floating side nav ---------- */

.sidenav {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 146px;
  padding: 10px 9px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border: 1px solid #e7eaef;
  border-radius: 12px;
  box-shadow: 0 2px 14px rgba(31, 36, 48, 0.06);
}

.sidenav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  border-radius: 7px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.sidenav a:hover { background: #f2f4f6; }

.sidenav a.is-current { background: #eef7f5; }

.sidenav .dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cdd3db;
  transition: background 0.18s ease, transform 0.18s ease;
}

.sidenav a:hover .dot { background: #9aa1ac; }

.sidenav a.is-current .dot {
  background: #2d9a8b;
  transform: scale(1.45);
}

.sidenav .lbl {
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: #949aa4;
  white-space: nowrap;
  transition: color 0.18s ease;
}

.sidenav a:hover .lbl { color: #55606e; }

.sidenav a.is-current .lbl { color: #1f6f63; font-weight: 600; }

/* keep anchored headings clear of the viewport edge */
section[id] { scroll-margin-top: 24px; }

/* not enough left margin for labels: collapse to a dot rail,
   with the label revealed on hover */
@media screen and (max-width: 1399px) {
  .sidenav { left: 10px; min-width: 0; padding: 8px 6px; }
  .sidenav .lbl {
    position: absolute;
    left: 24px;
    opacity: 0;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #e6e9ee;
    border-radius: 5px;
    padding: 2px 7px;
    transition: opacity 0.15s ease;
  }
  .sidenav a { position: relative; }
  .sidenav a:hover .lbl { opacity: 1; }
}

/* no room at all beside the content */
@media screen and (max-width: 1023px) {
  .sidenav { display: none; }
}

/* ---------- captions / body copy ---------- */

.fig-caption {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #666;
  margin-top: 0.75rem;
  text-align: justify;
}

.fig-caption strong { color: #444; }

.body-copy {
  text-align: justify;
  color: #4a4a4a;
}

.body-copy p + p { margin-top: 0.9rem; }

.body-copy strong { color: #363636; }

figure.fig { margin: 0; }

figure.fig img { width: 100%; height: auto; display: block; }

/* plots read fine a bit smaller than full column width */
figure.fig-85 img,
figure.fig-85 .fig-caption { width: 85%; margin-left: auto; margin-right: auto; }

/* ---------- methodology cards ---------- */

.lead-copy {
  max-width: 1000px;
  margin: 0 auto 1.6rem;
  text-align: center;
}

.cardstrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 13px;
  width: 100%;
  min-height: 112px;
  text-align: left;
  font-family: inherit;
  background: #fff;
  border: 1px solid #e3e6ec;
  border-radius: 10px;
  padding: 18px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.card:hover { border-color: #bfc8cf; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(32, 55, 61, 0.07); }

.card.is-active {
  border-color: #2d9a8b;
  background: linear-gradient(145deg, #f7fcfb, #edf8f5);
  box-shadow: 0 8px 25px rgba(45, 154, 139, 0.10);
}

.card.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #2d9a8b, #78c1b6); }

.card-index { font-family: 'Google Sans', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; color: #aab1b8; padding-top: 3px; }
.card.is-active .card-index { color: #2d9a8b; }
.card-copy { display: block; }

.card-title {
  display: block;
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
  color: #55606e;
}

.card.is-active .card-title { color: #1f6f63; }

.card-sub {
  display: block;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #9aa1ac;
  margin-top: 7px;
}

.card.is-active .card-sub { color: #5a9e93; }

.panel { margin-top: 1.25rem; }

.panel[hidden] { display: none; }

.method-summary { display: grid; grid-template-columns: minmax(240px, .85fr) 1.6fr; gap: 42px; align-items: start; padding: 25px 28px; margin-bottom: 18px; border: 1px solid #e7ebe9; border-radius: 10px; background: #fbfcfc; }
.method-kicker, .section-kicker { display: block; margin-bottom: 7px; font-family: 'Google Sans', sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #2d9a8b; }
.method-summary h3 { margin: 0; font-family: 'Google Sans', sans-serif; font-size: 1.24rem; line-height: 1.3; color: #253238; }
.method-summary p { margin: 0; font-size: .93rem; line-height: 1.7; color: #596268; }

.panel-text strong { color: #363636; }

.panel img { width: 100%; height: auto; display: block; }

.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mode-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 18px 20px; border: 1px solid #e2e6e8; border-radius: 9px; background: #fff; }
.mode-name { font-family: 'Google Sans', sans-serif; font-weight: 700; color: #4c565d; }
.mode-desc { grid-column: 1; font-size: .78rem; color: #92999f; }
.mode-item strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: 'Google Sans', sans-serif; font-size: 1.18rem; color: #667078; }
.mode-item.is-fast { border-color: #9fcfc7; background: #f1f9f7; }
.mode-item.is-fast strong { color: #1f786b; }
.panel table.modes { margin: 0 auto; }

table.modes td.rt {
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
  font-weight: 700;
  color: #2d9a8b;
  text-align: right;
  white-space: nowrap;
  padding-left: 24px;
}

@media screen and (max-width: 768px) {
  .cardstrip {
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    contain: inline-size;
    padding-bottom: 4px;
  }
  .method-summary { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
  .mode-grid { grid-template-columns: 1fr; }
}

/* ---------- interactive authoring ---------- */

.interactive-section { padding-top: 5.5rem; padding-bottom: 5.5rem; background: #fff; }
.interactive-shell { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.45fr); gap: 52px; align-items: center; }
.interactive-copy .title { margin: 0 0 1.1rem; line-height: 1.13; color: #223237; }
.interactive-lead { margin: 0 0 1.6rem; font-size: 1rem; line-height: 1.7; color: #536168; }
.feature-list { display: grid; gap: 0; border-top: 1px solid rgba(45, 94, 87, .15); }
.feature-item { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 13px 0; border-bottom: 1px solid rgba(45, 94, 87, .15); }
.feature-item > span { padding-top: 2px; font-family: 'Google Sans', sans-serif; font-size: .69rem; font-weight: 700; color: #2d9a8b; }
.feature-item p { margin: 0; font-size: .82rem; line-height: 1.48; color: #68747a; }
.feature-item strong { display: block; margin-bottom: 2px; font-size: .91rem; color: #344248; }
.interactive-stat { display: flex; align-items: baseline; gap: 10px; margin-top: 1.35rem; }
.interactive-stat strong { font-family: 'Google Sans', sans-serif; font-size: 1.45rem; color: #1f786b; }
.interactive-stat span { font-size: .76rem; color: #7a858a; }
.interactive-media { padding: 10px; border: 1px solid rgba(33, 72, 67, .13); border-radius: 14px; background: rgba(255,255,255,.72); box-shadow: 0 20px 55px rgba(34, 62, 59, .12); }
.interactive-media video { width: 100%; display: block; border-radius: 9px; background: #000; }
.interactive-media p { margin: 10px 6px 2px; font-size: .76rem; line-height: 1.5; color: #738086; }

@media screen and (max-width: 900px) {
  .interactive-shell { grid-template-columns: 1fr; gap: 30px; }
  .interactive-copy { max-width: 680px; }
}

/* ---------- captured results: two columns, scene tabs inside each ---------- */

.scene-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

@media screen and (max-width: 768px) {
  .scene-cols { grid-template-columns: 1fr; gap: 32px; }
}

.col-head {
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8a8a8a;
  text-align: center;
  margin-bottom: 0.7rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #e6e6e6;
}

.cardstrip.cardstrip-mini {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.card.card-mini {
  min-height: 0;
  padding: 7px 10px;
  border-radius: 7px;
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: #55606e;
}

.card.card-mini.is-active { color: #1f6f63; }

.panel.panel-tight { margin-top: 0.8rem; }

.panel-tight video {
  width: 100%;
  display: block;
  border-radius: 6px;
  background: #000;
}

/* ---------- comparison grid (rebuilt from the paper figures) ---------- */

/* contain:inline-size stops the inner min-width from propagating up the
   ancestor chain and widening the whole page on narrow viewports */
.cmp-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  contain: inline-size;
}

.cmp {
  display: grid;
  grid-template-columns: 24px repeat(6, minmax(120px, 1fr));
  gap: 3px;
  min-width: 800px;
}

.cmp .colhead {
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  padding-bottom: 5px;
  color: #555;
  align-self: end;
}

.cmp .colhead.ours { color: #2f7d46; }

.cmp .rowhead {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #8a8a8a;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  align-self: center;
  justify-self: center;
}

.cmp img { width: 100%; height: auto; display: block; }

.cmp .cell { font-size: 0; }

.cmp .cell.ours { outline: 2px solid #bcd9c0; outline-offset: -2px; }

/* ---------- tables ---------- */

/* ---------- ablation figures ---------- */

.ablation-lead {
  max-width: 760px;
  margin: -0.5rem auto 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #6c757b;
}

.ablation-stack {
  display: grid;
  gap: 22px;
  margin-top: 1.8rem;
}

.ablation-panel {
  margin: 0;
  padding: 24px 28px 20px;
  border: 1px solid #e4e8e7;
  border-radius: 13px;
  background: #fbfcfc;
  box-shadow: 0 9px 28px rgba(37, 58, 63, 0.055);
}

.ablation-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-end;
  margin-bottom: 18px;
}

.ablation-head .section-kicker { margin-bottom: 5px; }

.ablation-head h3 {
  margin: 0;
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
  font-size: 1.25rem;
  line-height: 1.3;
  color: #29363b;
}

.figure-meta {
  flex: none;
  padding: 5px 9px;
  border: 1px solid #dce4e2;
  border-radius: 999px;
  background: #fff;
  font-size: 0.7rem;
  color: #788287;
  white-space: nowrap;
}

.ablation-panel img {
  display: block;
  height: auto;
  margin: 0 auto;
}

.ablation-quality img { width: 93%; }
.ablation-scaling img { width: 100%; }

.ablation-panel figcaption {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e7eae9;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #687278;
}

@media screen and (max-width: 768px) {
  .ablation-panel { padding: 19px 16px 16px; }
  .ablation-head { display: block; }
  .figure-meta { display: inline-block; margin-top: 10px; }
  .ablation-quality img,
  .ablation-scaling img { width: 100%; }
}

table.modes {
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 0 auto;
}

table.modes td {
  padding: 6px 16px 6px 0;
  border-bottom: 1px solid #e6e6e6;
  color: #4a4a4a;
  text-align: left;
}

table.modes td:first-child {
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
  font-weight: 600;
  color: #363636;
  white-space: nowrap;
}

/* ---------- bibtex ---------- */

pre.bib {
  background: #f5f5f5;
  border-radius: 6px;
  padding: 1.1rem 1.2rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #4a4a4a;
  overflow-x: auto;
  white-space: pre;
  text-align: left;
}

/* ---------- footer ---------- */

.footer { background-color: #fff; }

.footer .content { font-size: 0.88rem; color: #777; }