/* Dashboard-specific styles. Layered on top of cayman + site.css. */

.muted { color: #6a737d; font-size: 0.95rem; }

/* --- Chart containers --- */
.chart-wrap {
  background: #ffffff;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0 1.5rem 0;
  position: relative;
}
.chart-wrap canvas { max-width: 100%; }
/* Overview group charts: y-axis [0, 1] is the headroom range; give it
   plenty of vertical real estate so curves are readable. ~5x the
   previous 120-px default. */
.chart-wrap.overview-group { height: 520px; }
.overview-group-title {
  margin: 1.25rem 0 0.25rem 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.95rem;
  color: #155799;
}

/* --- Run cards --- */
.dash-run-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  background: #ffffff;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
.dash-run-card:hover {
  text-decoration: none;
  border-color: #155799;
  box-shadow: 0 2px 6px rgba(21, 87, 153, 0.12);
  transform: translateY(-1px);
}
.dash-run-card h3 {
  margin-top: 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 1rem;
  color: #155799;
}
.dash-run-card .stat {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #555;
  font-family: ui-monospace, Menlo, monospace;
  margin: 0.15rem 0;
}
.dash-run-card .stat .label { color: #888; }

/* Identity strip on each run card (agent · model · short-id). */
.dash-run-identity {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0.25rem 0 0.5rem 0;
}
.tag {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-family: ui-monospace, Menlo, monospace;
  border: 1px solid transparent;
  line-height: 1.3;
}
.tag-agent  { background: #eef4fb; color: #155799; border-color: #cdddee; }
.tag-model  { background: #f3fbf5; color: #117a40; border-color: #cfe9d5; }
.tag-id     { background: #fdf7e8; color: #8a6d11; border-color: #ece4c6; }

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 0.25rem;
}
.badge.kept    { background: #def4dd; color: #2c7a35; }
.badge.discard { background: #fde3e3; color: #a83232; }
.badge.crash   { background: #f0d6f8; color: #6a2477; }
.badge.timeout { background: #fdf2cf; color: #8a6d11; }
.badge.running { background: #d6e7f8; color: #14457a; }
.badge.hallucinated {
  /* Warning candy stripe so the eye treats hallucinated metrics as
     "do not promote" — distinct from a normal red badge. */
  background: repeating-linear-gradient(
    -45deg, #fbe6e6 0 6px, #fad2d2 6px 12px);
  color: #a83232;
  border: 1px solid #e6b8b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Dim hallucinated scratchpad cards + iter rows so the legitimate
   results visually dominate the page. */
.scratch-card-hallucinated,
.dash-iter-hallucinated {
  background: #fdf6f6;
  opacity: 0.78;
}
.scratch-card-hallucinated:hover,
.dash-iter-hallucinated:hover { opacity: 1; }

/* --- Run-detail iteration timeline --- */
.dash-run-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.9rem;
  background: #f6f8fa;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin: 0.5rem 0 1rem 0;
}
.dash-run-meta .label { color: #6a737d; }

.dash-iters, .dash-stages {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dash-iter {
  border: 1px solid #d0d7de;
  border-radius: 6px;
  background: #ffffff;
  overflow: hidden;
}
.dash-iter > summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 6rem 6rem 1fr auto auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.9rem;
}
.dash-iter .iter-identity {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}
.dash-iter > summary::-webkit-details-marker { display: none; }
.dash-iter > summary::before {
  content: "▸ ";
  color: #888;
}
.dash-iter[open] > summary::before { content: "▾ "; }
.dash-iter:hover { border-color: #155799; }

.dash-iter .iter-id { font-weight: 600; color: #155799; }
.dash-iter .iter-score { color: #444; }
.dash-iter .iter-rationale {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #444;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-iter-body {
  padding: 0.75rem;
  border-top: 1px solid #eaecef;
  background: #fafbfc;
}
.dash-iter-body .compare {
  text-align: center;
  margin-bottom: 0.75rem;
}
.dash-iter-body .compare img {
  max-width: 100%;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  background: #fff;
}
.dash-iter-body .nocompare {
  color: #888;
  font-style: italic;
  padding: 1rem 0;
}
.dash-iter-body pre {
  background: #ffffff;
  padding: 0.75rem;
  border: 1px solid #eaecef;
  border-radius: 4px;
  font-size: 0.85rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.dash-iter-body .rationale-full {
  background: #f3fbf5;
  border-left: 4px solid #159957;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  border-radius: 4px;
}

/* --- Scratchpad entries --- */
#scratch-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.scratch-card {
  border: 1px solid #d0d7de;
  border-radius: 6px;
  background: #ffffff;
  padding: 0.75rem 1rem;
  display: grid;
  grid-template-columns: 1fr 14rem;
  gap: 1rem;
  align-items: start;
}
.scratch-card .scratch-body {
  font-size: 0.9rem;
}
.scratch-card .scratch-meta {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.8rem;
  color: #6a737d;
  margin-bottom: 0.5rem;
}
.scratch-card .scratch-rationale {
  margin: 0.25rem 0 0.4rem 0;
}
.scratch-card .scratch-advice {
  font-size: 0.85rem;
  /* color set inline per-run by JS (colourForRun); fallback green if
     for some reason the run mapping is missing. */
  color: #117a40;
  font-style: italic;
  border-left: 3px solid #117a40;
  padding-left: 0.5rem;
  margin: 0.3rem 0 0 0;
}
.scratch-card .scratch-advice-label {
  font-weight: 600;
  font-style: normal;
}
.scratch-card .scratch-thumb img {
  width: 100%;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  background: #fff;
}
.scratch-card .scratch-thumb .nocompare {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 7rem;
  border: 1px dashed #d0d7de;
  border-radius: 4px;
  color: #999;
  font-size: 0.8rem;
}

@media (max-width: 600px) {
  .scratch-card { grid-template-columns: 1fr; }
  .dash-iter > summary {
    grid-template-columns: 5rem 1fr;
    row-gap: 0.25rem;
  }
}

/* --- Failed-run placeholder ---------------------------------------- */

/* Renders inside .scratch-thumb (small) and .dash-iter-body .compare
   (large). It auto-stretches to the host container so the layout
   doesn't reflow when an iter has no image. */
.failed-run {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 7rem;
  padding: 1rem 0.5rem;
  background: repeating-linear-gradient(
    -45deg,
    #fafbfc 0px,
    #fafbfc 8px,
    #f1f3f5 8px,
    #f1f3f5 16px
  );
  border: 1px dashed #d0d7de;
  border-radius: 4px;
  color: #6a737d;
  font-family: ui-monospace, Menlo, monospace;
  user-select: none;
}
.failed-run-icon {
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 0.35rem;
}
.failed-run-title {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.failed-run-label {
  font-size: 0.7rem;
  color: #8a949e;
  margin-top: 0.25rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.failed-run.failed-crash {
  color: #a83232;
  border-color: #e7c1c1;
}
.failed-run.failed-crash .failed-run-icon { color: #a83232; }
.failed-run.failed-timeout {
  color: #8a6d11;
  border-color: #ebd99c;
}
.failed-run.failed-timeout .failed-run-icon { color: #8a6d11; }
.failed-run.failed-running {
  color: #14457a;
  border-color: #b9d2ec;
}

/* Big version in the iter-detail body. */
.dash-iter-body .compare .failed-run {
  min-height: 12rem;
}

/* --- Lightbox / image zoom ----------------------------------------- */

/* Show a faint zoom cursor on any zoomable thumbnail. */
img[data-zoomable] {
  cursor: zoom-in;
  transition: filter 0.12s ease;
}
img[data-zoomable]:hover {
  filter: brightness(1.05);
}

/* The lightbox overlay covers the viewport. The figure is centered with
   flex so the image always fits whatever the viewport size is, while
   preserving aspect ratio. Comparison PNGs are wide (4-up grid), so we
   want them as wide as possible without overflowing height. */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 22, 36, 0.88);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  overscroll-behavior: contain;
}
.lightbox[hidden] { display: none; }
.lightbox-figure {
  margin: 0;
  max-width: 96vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.lightbox-figure img {
  max-width: 96vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: 4px;
  background: #fff;
  cursor: zoom-out;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}
.lightbox-figure figcaption {
  color: #e6e9ee;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.85rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.lightbox-close,
.lightbox-newtab {
  position: absolute;
  top: 1rem;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.12s ease;
}
.lightbox-close:hover,
.lightbox-newtab:hover {
  background: rgba(255, 255, 255, 0.22);
}
.lightbox-close  { right: 1rem; }
.lightbox-newtab { right: 4rem; }

/* ===== per-dataset dashboard refactor (2026-06-18) ===================== */

/* Landing: one card per dataset. */
.dash-dataset-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  background: #fff;
}
.dash-dataset-card:hover {
  text-decoration: none;
  border-color: #155799;
  box-shadow: 0 2px 8px rgba(21, 87, 153, 0.14);
  transform: translateY(-1px);
}
.dash-dataset-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  color: #155799;
}
.dash-dataset-card .stat {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #555;
  font-family: ui-monospace, Menlo, monospace;
  margin: 0.15rem 0;
}
.dash-dataset-card .stat .label { color: #888; }
.dataset-thumb {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  background: #f3f4f6;
}

/* Small muted slug under the run-card header. */
.dash-run-slug {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  word-break: break-all;
  margin: -0.25rem 0 0.5rem;
}

/* Val + test thumbnail strip on each run card. */
.run-thumbs {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0 0.75rem;
}
.run-thumb-fig {
  flex: 1 1 0;
  margin: 0;
  min-width: 0;
}
.run-thumb {
  width: 100%;
  height: 92px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid #e1e4e8;
  background: #f3f4f6;
  cursor: zoom-in;
}
.run-thumb-fig figcaption {
  font-size: 0.68rem;
  color: #888;
  text-align: center;
  margin-top: 0.15rem;
}

/* "Load more" pagination button (runs grid + scratchpad). */
.load-more {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 0.5rem 0;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  border: 1px solid #155799;
  border-radius: 6px;
  background: #fff;
  color: #155799;
  cursor: pointer;
}
.load-more:hover { background: #155799; color: #fff; }

.btn-small {
  font-size: 0.85rem;
  padding: 0.2rem 0.6rem;
}

/* --- Registry leaderboard table (table.js / leaderboard.js) ----------- */
.lb-caption { margin: 0.4rem 0 0.8rem; }
.lb-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
  margin: 0.5rem 0 1.5rem;
}
.lb-table th, .lb-table td {
  border: 1px solid #d0d7de;
  padding: 0.4rem 0.6rem;
  text-align: left;
  vertical-align: middle;
}
.lb-table thead th {
  background: #f3f6f9;
  color: #155799;
  font-weight: 600;
  white-space: nowrap;
}
.lb-table .lb-num { text-align: right; font-variant-numeric: tabular-nums; }
.lb-table .lb-rank { text-align: center; width: 2.4rem; color: #555; }
.lb-table .lb-hr { font-weight: 600; }
.lb-table .lb-solver { font-weight: 600; }
.lb-table tbody tr:nth-child(even of .lb-row:not(.lb-excluded)) { background: #fafcff; }
.lb-table .lb-row:hover { background: #eef4fb; }
/* Excluded (below-baseline / discarded / non-finite) rows: dimmed, NOT dropped.
   Always rendered below the ranked rows so every solver shows (never top-N). */
.lb-table .lb-excluded { opacity: 0.55; background: #f7f7f8; }
.lb-table .lb-excluded:hover { opacity: 0.8; }
.lb-rank-excl { color: #b5402a; }
.lb-tag-excl {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #b5402a;
  background: #fbecea;
  border: 1px solid #f0cdc6;
  border-radius: 999px;
  padding: 0 0.45rem;
  margin-left: 0.3rem;
  vertical-align: middle;
}
.lb-img { text-align: center; }
.lb-thumb {
  max-width: 130px;
  max-height: 72px;
  border-radius: 4px;
  border: 1px solid #d0d7de;
}
@media (max-width: 720px) {
  .lb-table { font-size: 0.82rem; }
  .lb-thumb { max-width: 90px; }
}