/* ==========================================================================
   Cascaded NLOS project page — additions (highlights, figures, interactive
   widgets). Everything here is namespaced with .cn- to avoid clashing with
   the lab template.
   ========================================================================== */

:root {
  --cn-blue: #1237B1;
  --cn-blue-l: #2b6cff;
  --cn-red: #e8312f;
  --cn-purple: #b23ee6;
  --cn-cyan: #2fb8ea;
  --cn-yellow: #d9a520;
  --cn-ink: #1d1f24;
  --cn-muted: #6b7280;
  --cn-line: #e6e8ee;
  --cn-bg: #f7f8fb;
  --cn-dark: #0d0f14;
}

.cn-section { margin: 46px 0 10px; }
.cn-section > h2 { margin-bottom: 6px; }
.cn-section > .cn-sub { color: var(--cn-muted); margin-top: 0; font-size: 1.55rem; }
.cn-section p { font-size: 1.6rem; line-height: 1.65; }

/* ---------- Variant frames (temporary review scaffolding) ---------- */
.cn-variant {
  position: relative;
  border: 2px dashed #c9cfe0;
  border-radius: 14px;
  padding: 18px 18px 16px;
  margin: 26px 0 30px;
  background: #fff;
}
.cn-variant-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  margin: -4px 0 12px;
}
.cn-vtag {
  font-family: "roboto-bold", sans-serif;
  background: var(--cn-blue); color: #fff; border-radius: 6px;
  padding: 2px 9px; font-size: 1.3rem; letter-spacing: .5px;
}
.cn-vtitle { font-family: "roboto-bold", sans-serif; font-size: 1.55rem; color: var(--cn-ink); }
.cn-vnote { color: var(--cn-muted); font-size: 1.35rem; flex-basis: 100%; line-height: 1.5; }
.cn-group-title {
  margin: 60px 0 4px; padding-top: 18px; border-top: 3px solid var(--cn-blue);
  font-size: 1.3rem; letter-spacing: 2px; text-transform: uppercase; color: var(--cn-blue);
  font-family: "roboto-bold", sans-serif;
}

/* ---------- Highlights strip ---------- */
.cn-highlights {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin: 26px 0 8px;
}
.cn-hl {
  background: var(--cn-bg); border: 1px solid var(--cn-line); border-radius: 12px;
  padding: 16px 14px 14px; text-align: center;
}
.cn-hl-icon { height: 46px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.cn-hl-title { font-family: "roboto-bold", sans-serif; font-size: 1.65rem; color: var(--cn-ink); line-height: 1.25; }
.cn-hl-text { font-size: 1.3rem; color: var(--cn-muted); line-height: 1.45; margin-top: 4px; }
@media (max-width: 800px) { .cn-highlights { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Figures ---------- */
.cn-fig { margin: 18px 0 26px; }
.cn-fig img { width: 100%; display: block; border-radius: 10px; border: 1px solid var(--cn-line); background: #fff; }
.cn-fig figcaption, .cn-cap { font-size: 1.38rem; color: #4b5563; line-height: 1.55; margin-top: 8px; }
.cn-fig figcaption b, .cn-cap b { color: var(--cn-ink); }
.cn-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cn-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 800px) { .cn-grid2, .cn-grid3 { grid-template-columns: 1fr; } }

.cn-steps { counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 14px 0; }
.cn-step { background: var(--cn-bg); border-radius: 12px; padding: 14px 16px; border: 1px solid var(--cn-line); }
.cn-step:before { counter-increment: s; content: counter(s); display: inline-flex; width: 26px; height: 26px; border-radius: 50%;
  align-items: center; justify-content: center; background: var(--cn-blue); color: #fff; font-family: "roboto-bold"; font-size: 1.3rem; margin-bottom: 6px; }
.cn-step h4 { margin: 2px 0 4px; font-size: 1.55rem; }
.cn-step p { font-size: 1.4rem !important; margin: 0; color: #444; }
@media (max-width: 800px) { .cn-steps { grid-template-columns: 1fr; } }

/* ---------- Generic controls ---------- */
.cn-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; align-items: center; }
.cn-btn {
  appearance: none; border: 1.5px solid var(--cn-blue); background: #fff; color: var(--cn-blue);
  border-radius: 999px; padding: 6px 15px; font-size: 1.35rem; line-height: 1.2; cursor: pointer;
  font-family: "roboto-bold", sans-serif; transition: all .15s; height: auto; margin: 0; letter-spacing: 0; text-transform: none;
}
.cn-btn:hover { background: #eef2ff; }
.cn-btn.on { background: var(--cn-blue); color: #fff; }
.cn-btn.purple { border-color: var(--cn-purple); color: var(--cn-purple); } .cn-btn.purple.on { background: var(--cn-purple); color: #fff; }
.cn-btn.cyan { border-color: var(--cn-cyan); color: #1a8fbc; } .cn-btn.cyan.on { background: var(--cn-cyan); color: #fff; }
.cn-btn.yellow { border-color: var(--cn-yellow); color: #a77c0c; } .cn-btn.yellow.on { background: var(--cn-yellow); color: #fff; }
.cn-btn.ghost { border-color: #cbd2e1; color: #4b5563; }
.cn-btn.small { padding: 3px 10px; font-size: 1.2rem; }
.cn-range { width: 100%; accent-color: var(--cn-blue); }
.cn-label { font-size: 1.3rem; color: var(--cn-muted); }
.cn-kbd { font-family: monospace; background: #eef0f5; border-radius: 4px; padding: 0 5px; font-size: 1.2rem; }

/* ---------- T1-a teaser overlay ---------- */
.cn-teaser-anim { position: relative; width: 100%; user-select: none; }
.cn-teaser-anim img { width: 100%; display: block; border-radius: 14px; border: 1px solid #eee; }
.cn-teaser-anim svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cn-teaser-ctrl { position: absolute; left: 12px; bottom: 10px; display: flex; gap: 6px; align-items: center; pointer-events: auto; }
.cn-teaser-ctrl .cn-btn { background: rgba(255,255,255,.92); }
.cn-teaser-progress { position: absolute; left: 14px; right: 14px; bottom: 4px; height: 3px; background: rgba(18,55,177,.12); border-radius: 2px; overflow: hidden; }
.cn-teaser-progress > div { height: 100%; width: 0; background: var(--cn-blue); }
.cn-teaser-caption { text-align: center; font-size: 1.45rem; color: var(--cn-ink); min-height: 2.2em; margin-top: 8px; transition: opacity .3s; }

/* ---------- Canvas widgets ---------- */
.cn-canvas-wrap { position: relative; width: 100%; border-radius: 12px; overflow: hidden; background: var(--cn-dark); }
.cn-canvas-wrap canvas { display: block; width: 100%; }
.cn-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 1.3rem; color: #444; margin: 8px 2px; }
.cn-legend span:before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--c); }

/* ---------- three.js viewers ---------- */
.cn-3d { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #e9edf5; }
.cn-3d.dark { background: radial-gradient(ellipse at 50% 30%, #1d2333 0%, #07080c 75%); }
.cn-3d canvas { display: block; width: 100% !important; height: 100% !important; }
.cn-3d-overlay { position: absolute; pointer-events: none; }
.cn-3d-hud { position: absolute; left: 12px; top: 10px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: auto; max-width: 70%; }
.cn-3d-hud .cn-btn { background: rgba(255,255,255,.92); }
.cn-3d.dark .cn-3d-hud .cn-btn:not(.on) { background: rgba(20,24,36,.75); color: #dfe6ff; border-color: #6a7bd6; }
.cn-3d-plot { position: absolute; right: 12px; bottom: 12px; background: rgba(255,255,255,.93); border-radius: 10px; padding: 6px 8px 4px; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.cn-3d.dark .cn-3d-plot { background: rgba(14,17,26,.82); box-shadow: none; border: 1px solid #2b3352; }
.cn-3d-plot canvas { width: 260px !important; height: auto !important; }
.cn-3d-caption { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: #fff; font-size: 1.6rem; text-shadow: 0 1px 6px #000; pointer-events: none; transition: opacity .4s; }
.cn-3d-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #555; font-size: 1.5rem; }
.cn-3d-bottom { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.cn-3d-bottom .cn-range { flex: 1; }
.cn-3d-tag { position: absolute; padding: 2px 7px; border-radius: 5px; font-size: 1.2rem; font-family: "roboto-bold"; color: #fff; transform: translate(-50%, -130%); white-space: nowrap; pointer-events: none; }

/* ---------- R1 ABC explorer ---------- */
.cn-abc { display: grid; grid-template-columns: 1fr 1.25fr; gap: 18px; align-items: center; }
.cn-abc svg { width: 100%; height: auto; display: block; }
.cn-abc-imgs { position: relative; width: 100%; aspect-ratio: 496/262; border-radius: 10px; overflow: hidden; background: #000; }
.cn-abc-imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s; }
.cn-abc-imgs img.show { opacity: 1; }
.cn-abc-imgs .lbl { position: absolute; left: 10px; top: 8px; color: #fff; font-size: 1.3rem; font-family: "roboto-bold"; text-shadow: 0 1px 4px #000; }
@media (max-width: 800px) { .cn-abc { grid-template-columns: 1fr; } }
.cn-dash { stroke-dasharray: 7 7; animation: cn-dash 0.8s linear infinite; }
@keyframes cn-dash { to { stroke-dashoffset: -14; } }

/* ---------- R2 comparisons ---------- */
.cn-cmp { position: relative; width: 100%; overflow: hidden; border-radius: 10px; cursor: ew-resize; user-select: none; touch-action: none; background: #000; }
.cn-cmp img { display: block; width: 100%; pointer-events: none; }
.cn-cmp .cn-cmp-top { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.cn-cmp .cn-cmp-top img { width: 100%; height: 100%; object-fit: cover; }
.cn-cmp-bar { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; left: 50%; transform: translateX(-1.5px); box-shadow: 0 0 6px rgba(0,0,0,.5); }
.cn-cmp-bar:after { content: "\2194"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--cn-blue); display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 1px 6px rgba(0,0,0,.35); }
.cn-cmp-l, .cn-cmp-r { position: absolute; top: 8px; padding: 2px 8px; border-radius: 5px; font-size: 1.2rem; color: #fff; background: rgba(0,0,0,.55); font-family: "roboto-bold"; pointer-events: none; }
.cn-cmp-l { left: 8px; } .cn-cmp-r { right: 8px; background: rgba(18,55,177,.85); }
.cn-cmp.hover { cursor: crosshair; }
.cn-cmp.hover .cn-cmp-bar:after { display: none; }
.cn-flip { position: relative; border-radius: 10px; overflow: hidden; background: #000; cursor: pointer; }
.cn-flip img { display: block; width: 100%; }
.cn-flip img + img { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.cn-flip.b img + img { opacity: 1; }
.cn-flip .cn-cmp-l { transition: opacity .3s; }

/* ---------- R3 bunny ---------- */
.cn-bunny { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.cn-bunny-ap { display: grid; grid-template-columns: 1fr; gap: 8px; }
.cn-ap { display: flex; align-items: center; gap: 10px; border: 2px solid var(--cn-line); border-radius: 10px; padding: 6px; cursor: pointer; transition: all .15s; background: #fff; }
.cn-ap img { width: 54%; border-radius: 6px; opacity: .45; transition: opacity .15s; }
.cn-ap.on { border-color: var(--cn-blue); background: #f2f5ff; }
.cn-ap.on img { opacity: 1; }
.cn-ap .t { font-size: 1.35rem; line-height: 1.35; }
.cn-ap .t b { display: block; font-size: 1.45rem; }
.cn-bunny-out { position: relative; background: #000; border-radius: 10px; overflow: hidden; }
.cn-bunny-out canvas { width: 100%; display: block; }
.cn-bunny-out .cn-gt { position: absolute; right: 8px; bottom: 8px; width: 28%; background: rgba(255,255,255,.9); border-radius: 8px; padding: 4px; }
.cn-meter { height: 8px; border-radius: 4px; background: #e5e7eb; overflow: hidden; margin-top: 8px; }
.cn-meter > div { height: 100%; background: linear-gradient(90deg, #e8312f, #ffb300, #fff3b0); width: 0; transition: width .5s; }
@media (max-width: 800px) { .cn-bunny { grid-template-columns: 1fr; } }

/* ---------- Q2 photo → scan → result ---------- */
.cn-morph { position: relative; width: 100%; aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; background: #111; }
.cn-morph .layer { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease, transform 6s ease; display: flex; align-items: center; justify-content: center; }
.cn-morph .layer.show { opacity: 1; }
.cn-morph .layer > img { width: 100%; height: 100%; object-fit: cover; }
.cn-morph .layer.contain { background: #fff; }
.cn-morph .layer.contain > img { object-fit: contain; }
.cn-morph .layer.kb.show { transform: scale(1.06); }
.cn-morph .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 3%; width: 80%; margin-bottom: 9%; align-items: end; }
.cn-morph .duo img { max-height: 32vw; object-fit: contain; }
.cn-morph .duo figure { margin: 0; text-align: center; color: #fff; font-size: 1.4rem; }
.cn-morph .duo img { width: 100%; border-radius: 8px; display: block; margin-bottom: 6px; }
.cn-morph .duo .bad { color: #ff9a9a; } .cn-morph .duo .good { color: #b8f5b0; }
.cn-morph .layer.dark { background: #0b0d12; }
.cn-morph-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 18px 12px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; font-size: 1.55rem; pointer-events: none; }
.cn-morph-cap b { color: #ffd36b; }
.cn-morph-steps { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.cn-morph-steps .cn-btn { background: rgba(255,255,255,.88); }
.cn-scroll-story { position: relative; height: 330vh; }
.cn-scroll-sticky { position: sticky; top: 70px; }

/* ---------- Q3 editor panel ---------- */
.cn-editor { margin-top: 8px; display: none; }
.cn-editor.open { display: block; }
.cn-editor textarea { width: 100%; height: 150px; font-family: monospace; font-size: 1.15rem; line-height: 1.35; }
.cn-warn { background: #fff7e6; border: 1px solid #ffd591; color: #8a5a00; border-radius: 8px; padding: 6px 10px; font-size: 1.3rem; margin: 8px 0; }

/* ---------- Hardware hotspots ---------- */
.cn-hw { position: relative; }
.cn-hw img { width: 100%; display: block; border-radius: 10px; }

/* active buttons inside overlays keep the "on" look */
.cn-morph-steps .cn-btn.on, .cn-3d-hud .cn-btn.on, .cn-teaser-ctrl .cn-btn.on { background: var(--cn-blue); color: #fff; }
.cn-3d-hud .cn-btn.purple.on { background: var(--cn-purple); border-color: var(--cn-purple); }
.cn-3d-hud .cn-btn.cyan.on { background: var(--cn-cyan); border-color: var(--cn-cyan); }
.cn-3d-hud .cn-btn.yellow.on { background: var(--cn-yellow); border-color: var(--cn-yellow); }
.cn-3d-hud .cn-btn.ghost.on { background: #4b5563; border-color: #4b5563; }

/* final layout */
#teaser { margin-top: 10px; }

/* Title inside the white card (replaces #page-header) */
#bricks.cn-bricks { margin-top: 78px; padding-top: 3.2rem; }
.project-meta .cn-title { margin: 4px 0 14px; text-align: center; }
.project-meta .cn-title { font-size: 4.0rem; line-height: 1.2; margin: 4px 0 4px; }
.project-meta .project-venue { margin-top: 0; }
#authors td.cn-equal { color: #9aa0a8; font-style: italic; font-family: "roboto-italic", sans-serif; }
@media (max-width: 700px) { .project-meta .cn-title { font-size: 3.0rem; } }
#abstract p { text-align: justify; hyphens: auto; }

/* Paper / Resources link cards */
.cn-res-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 4px; }
.cn-res { flex: 1 1 240px; max-width: 340px; display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1.5px solid #dfe4ef; border-radius: 12px; background: linear-gradient(180deg, #fff, #f6f8fd);
  color: #1d1f24 !important; text-decoration: none !important; box-shadow: 0 1px 3px rgba(18,55,177,.06);
  transition: transform .15s, box-shadow .15s, border-color .15s; }
.cn-res:hover { transform: translateY(-2px); border-color: #1237B1; box-shadow: 0 6px 16px rgba(18,55,177,.15); }
.cn-res-ic { flex: none; width: 44px; height: 44px; border-radius: 10px; background: #1237B1; color: #fff;
  display: flex; align-items: center; justify-content: center; }
.cn-res-ic svg { width: 24px; height: 24px; }
.cn-res-tx { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.cn-res-tx b { font-size: 1.65rem; font-family: "roboto-bold", sans-serif; }
.cn-res-tx small { font-size: 1.3rem; color: #6b7280; }
.cn-res-go { color: #1237B1; font-size: 2rem; transition: transform .15s; }
.cn-res:hover .cn-res-go { transform: translateX(3px); }
#acks p { text-align: justify; hyphens: auto; }
.cn-res-tx b { font-size: 1.7rem; }

/* header spacing: moderate, so title + teaser fit on a typical screen without feeling cramped */
#bricks.cn-bricks { padding-top: 2.4rem; }
.project-main { padding-top: 24px; }
.project-meta { margin-bottom: 10px; }
.project-meta .cn-title { margin: 0 0 6px; }
.project-meta .project-venue { margin-bottom: 6px; }
#authors { margin-bottom: 0; line-height: 1.75; }
#authors td { padding: 3px 0; }
#authors td.cn-equal { color: #9aa0a8; font-style: italic; font-family: "roboto-italic", sans-serif; font-size: 1.5rem; }
#navigation { margin: 16px auto 14px; }
#navigation a { padding: 10px 20px; font-size: 1.5rem; }
#teaser { margin-top: 18px !important; }
.cn-tz { max-width: 95%; }
/* on short screens the figure shrinks (centred) so the teaser stays on screen */
.cn-tz-fig svg { max-height: max(300px, calc(100vh - 548px)); margin: 0 auto; }
#results-real h3 { margin-top: 44px; }
#results-real h2 + h3 { margin-top: 20px; }
/* the lab's a / a:visited / a:focus rules recolour link borders; keep the cards' own border in every state */
a.cn-res, a.cn-res:visited, a.cn-res:focus { border: 1.5px solid #dfe4ef; color: #1d1f24; }
a.cn-res:hover { border-color: #1237B1; }
a.cn-res:focus-visible { outline: 2px solid #1237B1; outline-offset: 2px; }
#bibtex { scroll-margin-top: 96px; }   /* clear the fixed lab header when jumping here */