/* Data Lab page. Builds on ../style.css (tokens, header, viewer panes, 3D scene overlays). */

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

/* The explorer gets more room than the project page's text column. */
.lab-wide { max-width: 1600px; }

/* ---------- Intro ---------- */
.lab-hero {
  padding: calc(var(--header-h) + 18px) 0 14px;
  background: linear-gradient(180deg, #fcf9f6 0%, #fff 100%);
}
.lab-hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 28px;
}
.lab-hero-text { flex: 1 1 auto; min-width: 0; }
.lab-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.lab-lede { margin-top: 3px; color: var(--ink-3); font-size: 15.5px; line-height: 1.5; text-wrap: pretty; }
.lab-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lab-stats li {
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-3);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.lab-stats strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.lab-section { padding-top: 36px; }

/* ---------- Scene toolbar ---------- */
.lab-scenebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 0 2px 12px 4px;
}
.lab-scene-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-width: 0; }
.lab-scene-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: clamp(20px, 1.9vw, 24px);
  letter-spacing: -0.025em;
}
.lab-scene-meta { color: var(--ink-3); font-size: 14.5px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.lab-level {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--bg-sunken);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.6;
  text-transform: uppercase;
}
.lab-level[data-level="easy"] { background: #e6f2e2; color: #2e6a2a; }
.lab-level[data-level="medium"] { background: #fbeed6; color: #835410; }
.lab-level[data-level="hard"] { background: var(--accent-soft); color: var(--accent-ink); }
.lab-stepper { display: flex; align-items: center; gap: 8px; }
.lab-scene-pos { margin-right: 4px; color: var(--ink-3); font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lab-step {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink-2);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.lab-step:hover { border-color: var(--line-strong); color: var(--ink); transform: translateY(-1px); }
.lab-step svg { width: 19px; height: 19px; }

/* ---------- Panes ---------- */
.viewer-lab .viewer-label { min-height: 31px; white-space: nowrap; }
.lab-view-count {
  margin-left: auto;
  padding-right: 2px;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.lab-photo { position: relative; touch-action: pan-y; }
.lab-photo:focus-visible { outline-offset: 2px; border-radius: 14px; }
.lab-photo-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(31, 27, 22, 0.12), 0 6px 16px -6px rgba(31, 27, 22, 0.4);
  cursor: pointer;
  opacity: 0;
  transition: opacity 160ms ease;
}
.lab-photo-prev { left: 10px; }
.lab-photo-next { right: 10px; }
.lab-photo-nav svg { width: 18px; height: 18px; }
.lab-photo-full {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(31, 27, 22, 0.62);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 160ms ease, background-color 160ms ease;
}
.lab-photo-full:hover { background: rgba(31, 27, 22, 0.82); color: #fff; }
.lab-photo:hover .lab-photo-nav, .lab-photo:focus-within .lab-photo-nav,
.lab-photo:hover .lab-photo-full, .lab-photo:focus-within .lab-photo-full { opacity: 1; }

/* Color modes sit in the 3D pane's label row. */
.lab-scene-label { flex-wrap: wrap; row-gap: 6px; }
.lab-modes {
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  letter-spacing: 0;
  text-transform: none;
}
.lab-modes button {
  padding: 2px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.lab-modes button:hover { color: var(--ink); }
.lab-modes button[aria-pressed="true"] { background: var(--ink); color: #fff; }

.lab-contact-key {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 150px);
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: var(--shadow-sm);
}
.lab-contact-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #e8451f; }
.lab-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  padding: 3px 9px;
  border-radius: 8px;
  background: rgba(31, 27, 22, 0.84);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px));
}

/* ---------- Objects and contacts ---------- */
.lab-card {
  min-width: 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.lab-card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: 0 0 12px;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}
.lab-card-hint { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; opacity: 0.85; }
.lab-chips, .lab-contacts { margin: 0; padding: 0; list-style: none; }
.lab-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lab-swatch {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--swatch, #999);
  box-shadow: inset 0 0 0 1px rgba(31, 27, 22, 0.14);
}
.lab-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.lab-chip small { color: var(--ink-3); font-size: 12px; font-weight: 500; }
.lab-chip:hover, .lab-chip.is-focus { border-color: var(--line-strong); background: var(--bg-soft); }
.lab-chip[aria-pressed="false"] { background: var(--bg-soft); color: var(--ink-3); }
.lab-chip[aria-pressed="false"] .lab-chip-id { text-decoration: line-through; }
.lab-chip[aria-pressed="false"] .lab-swatch { background: transparent; box-shadow: inset 0 0 0 1.5px var(--swatch); }

.lab-contacts { display: grid; gap: 6px; }
.lab-contact {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.lab-contact-rel { color: var(--ink-3); font-weight: 500; }
.lab-contact-gap { margin-left: auto; padding-left: 8px; color: var(--ink-3); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.lab-contact:hover, .lab-contact.is-focus { border-color: var(--line-strong); background: var(--bg-soft); }
.lab-contact[aria-pressed="true"] { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px var(--accent-soft); }
.lab-none { margin: 0; color: var(--ink-3); font-size: 14px; line-height: 1.55; }

/* Below the stage on narrower screens: objects and contacts side by side. */
.lab-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
  margin-top: 16px;
}

/* ---------- Raw files and poses ---------- */
.lab-more { padding-top: 20px; }
.lab-files {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  font-size: 14px;
  line-height: 1.5;
}
.lab-files-title {
  margin-right: 6px;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lab-files a { font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; }
.lab-files-note { margin-right: 14px; color: var(--ink-3); font-size: 13px; }

.lab-poses {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.lab-poses summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 12px 16px;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
}
.lab-poses summary::-webkit-details-marker { display: none; }
.lab-poses summary::before {
  content: "";
  width: 7px;
  height: 7px;
  margin: 0 4px 0 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 160ms ease;
}
.lab-poses[open] summary::before { transform: rotate(45deg); }
.lab-poses summary span { color: var(--ink-3); font-size: 13px; font-weight: 500; }
.lab-table-wrap { overflow-x: auto; padding: 0 16px 12px; }
.lab-poses table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.lab-poses th {
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-align: left;
  white-space: nowrap;
}
.lab-poses td { padding: 7px 12px 7px 0; border-bottom: 1px solid var(--bg-sunken); color: var(--ink-2); white-space: nowrap; }
.lab-poses tr:last-child td { border-bottom: 0; }
.lab-poses td:first-child { display: flex; align-items: center; gap: 7px; font-weight: 600; }

/* ---------- Scene browser ---------- */
.lab-browser { padding-top: 72px; }
.lab-browser-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-bottom: 20px;
}
.lab-browser-head h2 { margin: 0; }
.lab-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.lab-segments {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
}
.lab-segments button {
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.lab-segments button:hover { color: var(--ink); }
.lab-segments button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.lab-segments span { margin-left: 3px; color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.lab-select { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 14px; font-weight: 600; }
.lab-select select {
  max-width: 220px;
  padding: 7px 34px 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23736a62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 15px;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.lab-select select:hover { border-color: var(--line-strong); }

.lab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.lab-tile { text-align: left; }
.lab-tile img { aspect-ratio: 4 / 3; background: var(--bg-sunken); }
.lab-tile-name { display: flex; align-items: center; gap: 7px; padding: 0 3px; color: var(--ink-2); }
.lab-tile-name::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--level-dot, var(--line-strong)); }
.lab-tile[data-level="easy"] { --level-dot: #6aa864; }
.lab-tile[data-level="medium"] { --level-dot: #d39a3a; }
.lab-tile[data-level="hard"] { --level-dot: var(--accent); }
.lab-tile-meta { margin-top: -5px; padding: 0 3px; color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
.lab-tile.is-active .lab-tile-name { color: var(--accent-ink); }
.lab-empty { margin: 0; padding: 40px 0; color: var(--ink-3); text-align: center; }

.lab-about { padding-top: 96px; }
.lab-about h2 { margin: 0 auto 18px; text-align: center; font-size: clamp(24px, 2.4vw, 30px); }
.lab-about .prose p { font-size: 16.5px; line-height: 1.75; }

/* ---------- Responsive ---------- */
@media (hover: none) {
  .lab-photo-nav, .lab-photo-full { opacity: 1; }
  .lab-step:hover { transform: none; }
}

/* Below desktop widths the photo and annotation panes join the stage grid of style.css. */
@media (max-width: 1179px) {
  .lab-media { display: contents; }
}

/* Desktops: intro, scene toolbar, photo, annotation, 3D scene, objects and contacts all in
   one window. The photo column is as wide as lets the photo (4:3) and the annotation (16:9)
   fill the stage height exactly: two labels and gaps take 98px, the media 3/4 + 9/16 of the
   width. */
@media (min-width: 1180px) {
  .lab-screen {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh;
    min-height: 640px;
    max-height: 1120px;
    padding-top: var(--header-h);
  }
  .lab-hero { padding: 14px 0 12px; }
  .lab-hero-inner { flex-wrap: nowrap; }
  .lab-stats { flex: 0 0 auto; }
  .lab-explorer { flex: 1 1 auto; min-height: 0; padding-bottom: 16px; }
  .lab-explorer-inner { height: 100%; }
  .viewer-lab { display: flex; flex-direction: column; height: 100%; }
  .lab-body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(250px, 19vw, 300px);
    gap: 16px;
    min-height: 0;
    container-type: size;
  }
  .viewer-lab .viewer-stage {
    height: 100%;
    grid-template-columns: minmax(240px, 30%) minmax(0, 1fr);
    grid-template-columns: clamp(240px, calc((100cqh - 98px) / 1.3125), 34cqw) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "media scene";
  }
  .lab-media { grid-area: media; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .viewer-lab .pane-scene .viewer-media { min-height: 0; }
  .lab-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .lab-info.has-more {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
  }
}

/* Short desktop windows keep the room for the scene: the intro is just the title and stats. */
@media (min-width: 1180px) and (max-height: 760px) {
  .lab-lede { display: none; }
}

@media (max-width: 760px) {
  .lab-hero { padding: calc(var(--header-h) + 16px) 0 12px; }
  .lab-lede { font-size: 14.5px; }
  .lab-stats li { padding: 3px 10px; font-size: 12.5px; }
  .lab-scenebar { padding: 2px 2px 12px; }
  .viewer-lab .viewer-label { min-height: 0; }
  .lab-modes { margin-left: 0; }
  .lab-modes button { padding: 3px 12px; }
  .lab-info { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 14px; }
  .lab-browser { padding-top: 56px; }
  .lab-browser-head { flex-direction: column; align-items: stretch; }
  .lab-filters { flex-direction: column; align-items: stretch; }
  .lab-segments { justify-content: space-between; }
  .lab-segments button { flex: 1 1 auto; padding: 6px 8px; font-size: 13.5px; }
  .lab-select select { flex: 1 1 auto; max-width: none; }
  .lab-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
  .lab-about { padding-top: 72px; }
}