/* =========================================================================
   "A Better Critic Matters for DMD" project page.
   Builds on /styles.css (tokens, nav, buttons, eyebrow, footer); everything
   page-specific is prefixed cm-. Layout follows the original project page.
   ========================================================================= */

/* A wider shell than the blog so the teaser mosaic has room around the title. */
:root { --maxw: 1280px; }

/* Chart marks: the site accent for matched pairs, a recessive gray for the rest.
   Dark steps validated separately against the dark card surface. */
:root, [data-theme="light"] { --cm-match: #4566d9; --cm-dim: #70747e; }
[data-theme="dark"] { --cm-match: #6389ff; --cm-dim: #71757f; }

.theme-ic--sun { display: none; }
[data-theme="dark"] .theme-ic--moon { display: none; }
[data-theme="dark"] .theme-ic--sun { display: block; }

sup { font-size: 0.66em; line-height: 0; }
var { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-size: 1.06em; }
figure { margin: 0; }

/* ---------- Hero: teaser tiles around the title ---------- */

.cm-hero { padding-top: clamp(0.75rem, 2vw, 1.4rem); }

.cm-mosaic-wrap { container: mosaic / inline-size; }

.cm-mosaic {
  --cols: 9;
  --gap: 6px;
  --unit: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols));
  --tile-radius: clamp(8px, 1.1cqw, 14px);
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: minmax(var(--unit), auto);
  gap: var(--gap);
}

.cm-tile {
  --s: 1;
  position: relative;
  grid-column: var(--c) / span var(--s);
  grid-row: var(--r) / span var(--s);
  overflow: hidden;
  border-radius: var(--tile-radius);
  background: var(--bg-tint);
}
.cm-tile.big { --s: 2; }
.cm-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.cm-tile:hover img { transform: scale(1.045); }

.cm-title {
  grid-column: 2 / span 7;
  grid-row: 3 / span 2;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 0.6cqw 3cqw;
  text-align: center;
}

.cm-kind { margin-bottom: 0.55rem; }

.cm-title h1 {
  margin: 0 0 0.42em;
  font-size: clamp(1.5rem, 3.05cqw, 2.55rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.032em;
}

.cm-authors {
  margin: 0 0 0.45em;
  font-size: clamp(0.98rem, 1.38cqw, 1.14rem);
  line-height: 1.55;
  color: var(--text-soft);
}
.cm-authors__row { display: block; }
.cm-au { white-space: nowrap; }
.cm-authors a { color: var(--accent); transition: color .2s ease; }
.cm-authors a:hover,
.cm-authors a:focus-visible { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cm-authors sup { margin-left: 1px; color: var(--muted); }

.cm-affil {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15em 1.4em;
  margin: 0;
  font-family: var(--mono); font-size: clamp(0.72rem, 0.98cqw, 0.8rem); letter-spacing: -0.01em;
  color: var(--muted);
}
.cm-affil span { white-space: nowrap; }

.cm-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; margin: 1rem 0 0; }
.cm-links .btn { padding: 0.5rem 0.95rem; }
.btn.is-disabled { cursor: default; color: var(--muted); background: var(--bg-tint); border-color: var(--border); }
.btn.is-disabled:hover { transform: none; box-shadow: none; border-color: var(--border); }
.cm-soon {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.08rem 0.35rem; border-radius: 5px; border: 1px solid var(--border-2); color: var(--muted);
}

/* Film strip: the JPEG has light corners baked in, so round them off. */
.cm-teaser { margin-top: 6px; }
.cm-teaser img { width: 100%; height: auto; border-radius: 0.9% / 2.8%; }

.cm-cap {
  max-width: 880px; margin: 0.9rem auto 0;
  color: var(--muted); font-size: 0.9rem; line-height: 1.6; text-wrap: pretty;
}
.cm-cap strong { color: var(--text); font-weight: 600; }

/* ---------- Content ---------- */

.cm-main { padding-bottom: var(--sp-2); }

.cm-section { max-width: 920px; margin: clamp(3.5rem, 7vw, 5rem) auto 0; }
.cm-section--wide { max-width: 1200px; }

.cm-head { text-align: center; margin-bottom: 1.6rem; }
.cm-head .eyebrow::after { content: ""; width: 1.6rem; height: 1px; background: var(--accent-line); }
.cm-head h2 { margin-top: 0.55rem; font-size: var(--step-2); letter-spacing: -0.025em; }
.cm-lead { max-width: 64ch; margin: 0.8rem auto 0; color: var(--text-soft); text-wrap: pretty; }

.cm-abstract { margin: 0; color: var(--text-soft); line-height: 1.75; text-align: justify; hyphens: auto; }
.cm-abstract b { color: var(--text); font-weight: 600; }

/* ---------- Question cards ---------- */

.cm-q {
  margin-top: 1.5rem;
  padding: 1.75rem 2rem 1.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.cm-q h3 { display: flex; align-items: center; gap: 0.8rem; margin: 0 0 0.55rem; font-size: var(--step-1); letter-spacing: -0.02em; line-height: 1.3; }
.cm-qnum {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--mono); font-size: 0.85rem; font-weight: 600; letter-spacing: 0;
}
.cm-answer { margin: 0 0 0.7rem; color: var(--accent); font-weight: 600; }
.cm-q > p { color: var(--text-soft); }
.cm-q em { color: var(--text); }
.cm-fig { margin-top: 1.4rem; }

/* ---------- Compute-versus-FID figure ---------- */

.cm-chart { position: relative; border-radius: var(--radius-sm); outline: none; }
.cm-chart:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-line); }
.cm-chart.is-ready .cm-chart__fallback { display: none; }
.cm-chart__fallback { margin: 0; padding: 2rem 0; text-align: center; color: var(--muted); font-size: 0.9rem; }

.cm-chart__panels { display: grid; gap: 1.4rem 2rem; }
.cm-panel { min-width: 0; }
.cm-panel__title { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.35rem; font-size: 0.9rem; font-weight: 600; color: var(--text); }
.cm-panel__title span { font-family: var(--mono); font-size: 0.74rem; font-weight: 500; color: var(--muted); }

.cm-svg { display: block; overflow: visible; touch-action: manipulation; }
.cm-svg .grid line { stroke: var(--border); stroke-width: 1; shape-rendering: crispEdges; }
.cm-svg .axis { fill: none; stroke: var(--border-2); stroke-width: 1; shape-rendering: crispEdges; }
.cm-svg .tick { font-family: var(--mono); font-size: 10.5px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.cm-svg .axis-label { font-family: var(--sans); font-size: 12px; fill: var(--muted); }
.cm-svg .frontier { fill: none; stroke: var(--cm-match); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cm-svg .pt { transition: opacity .15s ease; }
.cm-svg .pt--mis { fill: var(--surface); stroke: var(--cm-dim); stroke-width: 1.4; }
.cm-svg .pt--match { fill: var(--cm-match); stroke: var(--surface); stroke-width: 4; paint-order: stroke; }
.cm-svg .lbl {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; fill: var(--text-soft);
  stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke;
}
.cm-svg .trace { fill: none; stroke: var(--text-soft); stroke-width: 1.25; stroke-linejoin: round; opacity: 0.55; }
.cm-svg .ring { fill: none; stroke: var(--text); stroke-width: 1.75; }
.cm-svg .ring--echo { stroke: var(--muted); stroke-width: 1.25; }
.cm-chart.is-tracing .pt--mis:not(.is-on) { opacity: 0.25; }

.cm-tip {
  position: absolute; z-index: 5; width: max-content; max-width: min(250px, 100%);
  padding: 0.6rem 0.75rem 0.65rem;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; box-shadow: var(--shadow-md);
  color: var(--text); font-size: 0.8rem; line-height: 1.4;
  pointer-events: none;
}
.cm-tip[hidden] { display: none; }
.cm-tip__head { display: flex; align-items: center; gap: 0.45rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.cm-tip__fid { display: flex; align-items: baseline; gap: 0.35rem; margin: 0.2rem 0 0.4rem; }
.cm-tip__fid b { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }
.cm-tip__fid span { color: var(--muted); }
.cm-tip dl { display: grid; grid-template-columns: auto auto; gap: 0.1rem 0.9rem; margin: 0; }
.cm-tip dt { color: var(--muted); }
.cm-tip dd { margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-tip dd small { margin-left: 0.35rem; font-family: var(--mono); font-size: 0.7rem; font-weight: 400; color: var(--muted); }

.cm-glyph { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.4px solid var(--cm-dim); background: var(--surface); }
.cm-glyph--match { width: 8px; height: 8px; border: 0; border-radius: 1.5px; background: var(--cm-match); transform: rotate(45deg); }
.cm-glyph--trace { width: 16px; height: 0; border: 0; border-top: 1.25px solid var(--text-soft); border-radius: 0; background: none; opacity: 0.7; }

.cm-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.4rem; margin: 0.9rem 0 0; font-size: 0.82rem; color: var(--text-soft); }
.cm-legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.cm-hint { margin: 0.45rem 0 0; text-align: center; font-family: var(--mono); font-size: 0.7rem; color: var(--faint); }

.cm-data { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.7rem; }
.cm-data summary {
  display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: 0.74rem; color: var(--muted); transition: color .2s ease;
}
.cm-data summary::-webkit-details-marker { display: none; }
.cm-data summary::before { content: ""; width: 0; height: 0; border-left: 5px solid currentColor; border-block: 4px solid transparent; transition: transform .2s ease; }
.cm-data[open] summary::before { transform: rotate(90deg); }
.cm-data summary:hover { color: var(--text); }
.cm-data__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 0.8rem; }
.cm-data__scroll { max-height: 22rem; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.cm-data table { width: 100%; border-collapse: collapse; font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--text-soft); }
.cm-data__title { margin: 0 0 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--text); }
.cm-data th, .cm-data td { padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.cm-data th:nth-child(-n+2), .cm-data td:nth-child(-n+2) { text-align: left; }
.cm-data thead th { position: sticky; top: 0; background: var(--bg-tint); font-family: var(--mono); font-size: 0.7rem; font-weight: 600; color: var(--text); }
.cm-data tbody tr:last-child td { border-bottom: 0; }
.cm-data tr.is-match td { color: var(--text); font-weight: 600; }
.cm-data tr.is-match td:first-child::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 0.45rem; border-radius: 1px; background: var(--cm-match); transform: rotate(45deg) translateY(-1px); }

.cm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Step figure: photos on a white plate (it has a white background), step labels in page type. */
.cm-steps__plate { border-radius: var(--radius-sm); background: #fff; }
[data-theme="dark"] .cm-steps__plate { padding: 12px 12px 10px; }
.cm-steps__plate img { width: 100%; height: auto; }
/* Columns match the four panels of the image (each 24.0 % wide, 1.465 % apart). */
.cm-steps__labels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1.465%; margin-top: 0.7rem; text-align: center; }
.cm-steps__labels span { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.cm-steps__labels b { font-size: 0.95rem; font-weight: 600; color: #1b1f28; }
.cm-steps__labels small { font-family: var(--mono); font-size: 0.72rem; color: #70747e; }

/* ---------- Text-to-image and text-to-video results ---------- */

.cm-results { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 2.75rem; align-items: start; }
.cm-results--compact { max-width: 856px; margin-inline: auto; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 2.5rem; }
.cm-results__text { align-self: center; color: var(--text-soft); }
.cm-results__text p:last-child { margin-bottom: 0; }
.cm-results h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.55rem; margin: 0 0 0.7rem; font-size: 1.05rem; letter-spacing: -0.015em; }
.cm-setting { font-family: var(--mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }

.cm-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.cm-metrics { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; color: var(--text-soft); }
.cm-metrics th, .cm-metrics td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.cm-metrics th:first-child, .cm-metrics td:first-child { text-align: left; }
.cm-metrics thead th { vertical-align: bottom; background: var(--bg-tint); font-family: var(--mono); font-size: 0.74rem; font-weight: 600; color: var(--text); }
.cm-metrics td:first-child { color: var(--text); }
.cm-metrics tbody tr:last-child td { border-bottom: 0; }
.cm-metrics tr.is-stac td { background: color-mix(in oklab, var(--accent) 6%, var(--surface)); }
.cm-metrics strong { color: var(--text); font-weight: 650; }
.cm-stac {
  display: inline-block; margin-left: 0.3rem; padding: 0.02rem 0.36rem; border-radius: 5px; vertical-align: 1px;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500; white-space: nowrap;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.cm-note { margin: 0.65rem 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.55; }
.cm-bullets { margin: 1rem 0 0; padding-left: 1.15rem; color: var(--text-soft); }
.cm-bullets li + li { margin-top: 0.55rem; }
.cm-bullets li::marker { color: var(--accent); }

.cm-gallery__head,
.cm-gallery__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cm-gallery__head { margin-bottom: 0.45rem; text-align: center; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cm-gallery__row img { width: 100%; height: auto; border-radius: 7px; background: var(--bg-tint); }
.cm-prompt { margin: 0.5rem 0 1.15rem; text-align: center; color: var(--muted); font-size: 0.84rem; line-height: 1.45; }

/* ---------- BibTeX ---------- */

.cm-bib { position: relative; }
.cm-bib pre {
  margin: 0; padding: 1.1rem 1.3rem; overflow-x: auto;
  background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: 0.8rem; line-height: 1.65; color: var(--text-soft);
}
.cm-bib__type { color: var(--accent); }
.cm-bib__key { color: var(--text); }
.cm-copy { position: absolute; top: 0.6rem; right: 0.6rem; padding: 0.3rem 0.7rem; font-family: var(--mono); font-size: 0.74rem; }
.cm-copy[hidden] { display: none; }

/* ---------- Responsive ---------- */

/* Below ~1100 px of mosaic the title no longer fits in two tile rows: title on top, 8 columns. */
@container mosaic (max-width: 1099px) {
  .cm-mosaic { --cols: 8; }
  .cm-tile { grid-column: var(--tc) / span var(--s); grid-row: var(--tr) / span var(--s); }
  .cm-title { grid-column: 1 / -1; grid-row: 1; padding: 1.4rem 4px 1.7rem; }
  .cm-title h1 { font-size: clamp(1.5rem, 3.6cqw, 2.4rem); }
  .cm-authors { font-size: clamp(0.98rem, 1.9cqw, 1.12rem); }
}

@container mosaic (max-width: 540px) {
  .cm-mosaic { --cols: 4; --gap: 4px; }
  .cm-tile { grid-column: var(--mc) / span var(--s); grid-row: var(--mr) / span var(--s); }
  .cm-title { padding: 1rem 2px 1.4rem; }
  .cm-title h1 { font-size: 1.5rem; }
  .cm-title h1 br { display: none; }
  .cm-authors { font-size: 0.95rem; }
  .cm-authors__row { display: inline; }
}

@media (max-width: 1000px) {
  .cm-results,
  .cm-results--compact { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .cm-results__numbers,
  .cm-results__text { width: 100%; max-width: 580px; margin-inline: auto; }
}

@media (max-width: 720px) {
  .cm-q { padding: 1.25rem 1rem 1.4rem; }
  .cm-q h3 { font-size: 1.12rem; }
  .cm-abstract { text-align: left; }
  .cm-metrics { font-size: 0.82rem; }
  .cm-metrics th, .cm-metrics td { padding: 0.45rem 0.5rem; }
  .cm-metrics thead th, .cm-metrics td:first-child { white-space: normal; }
  .cm-gallery__head { font-size: 0.62rem; }
  .cm-data__grid { grid-template-columns: minmax(0, 1fr); }
  .cm-steps__labels b { font-size: 0.8rem; }
  .cm-steps__labels small { font-size: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-tile img, .cm-svg .pt { transition: none; }
}