/* page2: showcase
   #showcase (ten replay cards and the link to the task-showcase page), #citation (night band, BibTeX panel), and the
   separate page task-showcase/index.html (body.p2 there too). Cards are plain instrument plates: flush screenshot,
   hairline frame, mono task id, display title, quiet mono version tag. The heading row carries the link on the right.
   Many template rules here use !important, so the matching properties below do as well. */

/* ================================================================ #showcase ================================================================ */

body.p2 main > #showcase.section {
  padding: var(--p2-section-y) 0 !important;
  background: var(--p2-paper) !important;
}

/* heading block left, "Task showcase" link at the right end of the same row, cards across the full width below */
body.p2 #showcase > .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 48px;
  align-items: end;
}

body.p2 #showcase .section-heading {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 48px !important;
}

body.p2 #showcase .section-heading .section-deck {
  margin: 0 !important;
  text-align: left !important;
}

body.p2 #showcase .showcase-link {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-content: flex-end !important;
  margin: 0 0 52px !important;
}

body.p2 #showcase .domain-showcase-full {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100% !important;
  margin: 0 !important;
}

body.p2 #showcase .domain-showcase-rail {
  border: 0 !important;
}

body.p2 #showcase .domain-showcase-track {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 20px 16px !important;
}

/* ---------- card ---------- */
body.p2 #showcase .domain-showcase-card {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--p2-line) !important;
  border-radius: var(--p2-radius) !important;
  background-color: var(--p2-surface) !important;
  box-shadow: none !important;
  color: var(--p2-ink) !important;
  transform: none !important;
  transition: border-color 0.15s ease;
}

body.p2 #showcase .domain-showcase-card:hover,
body.p2 #showcase .domain-showcase-card:focus-visible {
  border-color: var(--p2-ink) !important;
  background-color: var(--p2-surface) !important;
  transform: none !important;
}

body.p2 #showcase .domain-showcase-card img {
  flex: none;
  aspect-ratio: 16 / 10 !important;
  border-bottom: 1px solid var(--p2-line);
  border-radius: 0 !important;
  background: var(--p2-surface-2);
}

body.p2 #showcase .domain-showcase-card > span {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px !important;
  padding: 14px 14px 0 !important;
}

body.p2 #showcase .domain-showcase-card strong {
  order: 1;
  font: 400 12px/1.35 var(--p2-mono) !important;
  letter-spacing: 0.01em !important;
  color: var(--p2-muted) !important;
  overflow-wrap: anywhere;
}

body.p2 #showcase .domain-showcase-card small {
  order: 2;
  font: 600 15.5px/1.25 var(--p2-display) !important;
  letter-spacing: -0.008em;
  color: var(--p2-ink) !important;
}

body.p2 #showcase .domain-showcase-card:hover small,
body.p2 #showcase .domain-showcase-card:focus-visible small { color: var(--p2-accent) !important; }

/* version: a quiet mono footer line, pinned to the card bottom so every row lines up */
body.p2 #showcase .domain-showcase-card em {
  order: 3;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: auto -14px 0 !important;
  padding: 10px 14px 11px !important;
  border: 0 !important;
  border-top: 1px solid var(--p2-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  font: 400 12px/1.2 var(--p2-mono) !important;
  font-style: normal !important;
  letter-spacing: 0.02em;
  color: var(--p2-muted) !important;
  font-variant-numeric: tabular-nums;
}

body.p2 #showcase .domain-showcase-card > span > small { margin-bottom: 14px; }

/* page 2 shows no release version on the cards (as in the leaderboard) */
body.p2 #showcase .domain-showcase-card em { display: none !important; }

/* ---------- link to the task-showcase page (p2 outline button, solid on hover) ---------- */
body.p2 #showcase .showcase-link .button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px !important;
  min-height: 0 !important;
  padding: 0 18px !important;
  border: 1px solid var(--p2-ink) !important;
  border-radius: var(--p2-radius) !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--p2-ink) !important;
  font: 600 14px/1 var(--p2-display) !important;
  letter-spacing: 0.005em !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

body.p2 #showcase .showcase-link .button:hover,
body.p2 #showcase .showcase-link .button:focus-visible {
  background: var(--p2-ink) !important;
  background-color: var(--p2-ink) !important;
  color: #fff !important;
}

body.p2 #showcase .showcase-link .button .icon { display: none !important; }
body.p2 #showcase .showcase-link .button span { color: inherit !important; }
body.p2 #showcase .showcase-link .button span:last-child::after {
  content: "\2192";
  margin-left: 8px;
  font-weight: 500;
}

/* ================================================================ #citation ================================================================ */

body.p2 main > #citation.section {
  padding: var(--p2-section-y) 0 !important;
  background: var(--p2-night) !important;
  border-top: 1px solid var(--p2-night) !important;
}

/* eyebrow and title on the left (4/12), the BibTeX panel on the right (8/12) */
body.p2 #citation .section-heading { margin: 0 !important; }

body.p2 #citation .section-heading > .column {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  grid-template-rows: auto 1fr;
  column-gap: 48px;
  max-width: none !important;
  margin: 0 !important;
}

body.p2 #citation .p2-eyebrow { grid-column: 1; grid-row: 1; }

body.p2 #citation .section-heading .title.is-2 {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin: 0 !important;
}

body.p2 #citation .bibtex-block {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 26px 28px !important;
  overflow-x: auto;
  border: 1px solid var(--p2-night-line) !important;
  border-radius: var(--p2-radius) !important;
  background: var(--p2-night-2) !important;
  box-shadow: none !important;
  color: var(--p2-on-night) !important;
  font: 400 13px/1.75 var(--p2-mono) !important;
  text-align: left !important;
  white-space: pre-wrap;
  tab-size: 2;
}

body.p2 #citation .bibtex-block code {
  padding: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
}

body.p2 #citation .bibtex-block::selection,
body.p2 #citation .bibtex-block code::selection { background: rgba(163, 180, 255, 0.3); }

/* ============================================================ task-showcase page ============================================================ */
/* task-showcase/index.html: one section holding the breadcrumb, the heading, and #showcase-root (built by osciShowcase.js) */

body.p2 main > .section:has(#showcase-root) {
  padding: 40px 0 var(--p2-section-y) !important;
  background: var(--p2-paper) !important;
  border-top: 0;
}

body.p2 .section:has(#showcase-root) > .container {
  max-width: var(--p2-wrap) !important;
  padding: 0 var(--p2-gutter);
}

/* breadcrumb: a mono top rule back to the main page */
body.p2 .osci-breadcrumb {
  margin: 0 0 64px !important;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--p2-line);
  font: 500 12px/1.4 var(--p2-mono) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.p2 .osci-breadcrumb a { color: var(--p2-ink-2) !important; text-decoration: none; }
body.p2 .osci-breadcrumb a:hover { color: var(--p2-accent) !important; }

/* heading: the p2 eyebrow drawn before the title (no eyebrow element in this page's markup) */
body.p2 .osci-breadcrumb + .section-heading { margin: 0 0 56px !important; }

body.p2 .osci-breadcrumb + .section-heading > .column {
  position: relative;
  max-width: 900px !important;
  margin: 0 !important;
  text-align: left !important;
}

body.p2 .osci-breadcrumb + .section-heading .title.is-2 { margin: 0 0 16px !important; text-align: left !important; }

body.p2 .osci-breadcrumb + .section-heading > .column::before {
  content: "Replays \00B7  ten runs";
  display: block;
  margin: 0 0 16px;
  padding-left: 36px;
  font: 500 12px/1.4 var(--p2-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p2-muted);
}

body.p2 .osci-breadcrumb + .section-heading > .column::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 24px;
  height: 2px;
  background: var(--p2-muted);
  opacity: 0.8;
}

body.p2 .osci-breadcrumb + .section-heading .section-deck {
  margin: 0 !important;
  text-align: left !important;
}

body.p2 .osci-showcase { color: var(--p2-ink-2); }

/* ---------- task picker: ten plates, two rows of five ---------- */
body.p2 .osci-showcase .osci-task-list {
  gap: 16px;
  margin: 0 0 72px;
}

body.p2 .osci-showcase .osci-task-tab {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--p2-line);
  border-radius: var(--p2-radius);
  background: var(--p2-surface);
  box-shadow: none;
  color: var(--p2-ink);
  transition: border-color 0.15s ease;
}

body.p2 .osci-showcase .osci-task-tab:hover { border-color: var(--p2-line-strong); }

body.p2 .osci-showcase .osci-task-tab.is-active {
  border-color: var(--p2-ink);
  box-shadow: inset 0 0 0 1px var(--p2-ink);
}

body.p2 .osci-showcase .osci-task-tab img {
  display: block;
  aspect-ratio: 16 / 10;
  object-position: top left;
  border-bottom: 1px solid var(--p2-line);
  border-radius: 0;
  background: var(--p2-surface-2);
}

body.p2 .osci-showcase .osci-task-tab span {
  gap: 5px;
  padding: 12px 13px 14px;
}

body.p2 .osci-showcase .osci-task-tab strong {
  font: 600 14.5px/1.25 var(--p2-display) !important;
  color: var(--p2-ink) !important;
}

body.p2 .osci-showcase .osci-task-tab small {
  font: 400 12px/1.4 var(--p2-mono) !important;
  color: var(--p2-muted) !important;
  overflow-wrap: anywhere;
}

body.p2 .osci-showcase .osci-task-tab:not(.is-active) img { opacity: 0.92; }

/* ---------- task heading and instruction ---------- */
body.p2 .osci-showcase .osci-task-head {
  scroll-margin-top: 24px;
  padding-top: 40px;
  border-top: 1px solid var(--p2-line-strong);
}

body.p2 .osci-showcase .osci-task-id {
  margin: 0 0 12px !important;
  font: 500 12px/1.4 var(--p2-mono) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--p2-muted) !important;
}

body.p2 .osci-showcase .osci-task-head h2.title {
  max-width: 36ch;
  margin: 0 0 28px !important;
  font: 600 clamp(1.8rem, 2.5vw, 2.3rem)/1.12 var(--p2-display) !important;
  letter-spacing: -0.02em !important;
  color: var(--p2-ink) !important;
  text-align: left !important;
}

/* label column + reading column; the text node after the label becomes the second grid cell */
body.p2 .osci-showcase .osci-instruction {
  display: grid;
  grid-template-columns: 160px minmax(0, 80ch);
  column-gap: 32px;
  margin: 0 0 40px !important;
  padding: 22px 24px !important;
  border: 1px solid var(--p2-line) !important;
  border-left: 1px solid var(--p2-line) !important;
  border-radius: var(--p2-radius) !important;
  background: var(--p2-surface) !important;
  font: 400 1.06rem/1.62 var(--p2-serif) !important;
  color: var(--p2-ink-2) !important;
  overflow-wrap: anywhere;
}

body.p2 .osci-showcase .osci-instruction span {
  margin: 4px 0 0 !important;
  font: 500 12px/1.4 var(--p2-mono) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: var(--p2-muted) !important;
}

/* ---------- model picker: underline tabs on a hairline ---------- */
body.p2 .osci-showcase .osci-model-tabs {
  gap: 0 28px;
  margin: 0 0 28px !important;
  border-bottom: 1px solid var(--p2-line);
}

body.p2 .osci-showcase .osci-model-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 -1px;
  padding: 12px 0 13px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font: 500 15px/1.2 var(--p2-display) !important;
  color: var(--p2-muted) !important;
  cursor: pointer;
}

body.p2 .osci-showcase .osci-model-tab:hover { color: var(--p2-ink) !important; }

body.p2 .osci-showcase .osci-model-tab.is-active {
  border-bottom-color: var(--p2-ink) !important;
  background: transparent !important;
  color: var(--p2-ink) !important;
}

body.p2 .osci-showcase .osci-model-tabs .osci-model-tab em,
body.p2 .osci-showcase .osci-model-tabs .osci-model-tab.is-active em {
  font: 400 12px/1.2 var(--p2-mono) !important;
  font-style: normal !important;
  color: var(--p2-muted) !important;
  font-variant-numeric: tabular-nums;
}

/* ---------- step viewer ---------- */
body.p2 .osci-showcase .osci-viewer {
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
  gap: 28px;
}

body.p2 .osci-showcase .osci-stage img {
  display: block;
  border: 1px solid var(--p2-line-strong);
  border-radius: var(--p2-radius);
  background: var(--p2-night);
}

body.p2 .osci-showcase .osci-stage-controls {
  gap: 14px;
  margin-top: 14px;
}

body.p2 .osci-showcase .osci-stage-controls .button {
  height: 32px !important;
  min-height: 0 !important;
  padding: 0 12px !important;
  border: 1px solid var(--p2-line-strong) !important;
  border-radius: var(--p2-radius) !important;
  background: var(--p2-surface) !important;
  box-shadow: none !important;
  color: var(--p2-ink) !important;
  font: 600 13px/1 var(--p2-display) !important;
}

body.p2 .osci-showcase .osci-stage-controls .button:hover { border-color: var(--p2-ink) !important; }

body.p2 .osci-showcase .osci-step-count {
  min-width: 8.5em;
  font: 500 13px/1 var(--p2-mono) !important;
  color: var(--p2-ink-2) !important;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* slider: a 2px hairline track and a square ink thumb */
body.p2 .osci-showcase .osci-stage-controls input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

body.p2 .osci-showcase .osci-stage-controls input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--p2-line-strong);
}

body.p2 .osci-showcase .osci-stage-controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 16px;
  margin-top: -7px;
  border: 0;
  border-radius: 1px;
  background: var(--p2-ink);
}

body.p2 .osci-showcase .osci-stage-controls input[type="range"]::-moz-range-track {
  height: 2px;
  background: var(--p2-line-strong);
}

body.p2 .osci-showcase .osci-stage-controls input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 16px;
  border: 0;
  border-radius: 1px;
  background: var(--p2-ink);
}

body.p2 .osci-showcase .osci-stage-controls input[type="range"]:focus-visible { outline: 2px solid var(--p2-accent); outline-offset: 2px; }

/* side panel: a white plate with hairline-ruled blocks */
body.p2 .osci-showcase .osci-side {
  padding: 4px 22px 18px;
  border: 1px solid var(--p2-line);
  border-radius: var(--p2-radius);
  background: var(--p2-surface);
}

body.p2 .osci-showcase .osci-meta {
  margin: 0 !important;
  padding: 16px 0 14px;
  font: 400 13.5px/1.5 var(--p2-display) !important;
  color: var(--p2-ink-2) !important;
  font-variant-numeric: tabular-nums;
}

body.p2 .osci-showcase .osci-meta strong { font-weight: 600; color: var(--p2-ink) !important; }

body.p2 .osci-showcase .osci-side h4 {
  margin: 0 0 10px !important;
  padding-top: 16px;
  border-top: 1px solid var(--p2-line);
  font: 500 12px/1.4 var(--p2-mono) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: var(--p2-muted) !important;
}

body.p2 .osci-showcase .osci-prose {
  margin: 0 0 18px !important;
  font: 400 1.05rem/1.6 var(--p2-serif) !important;
  color: var(--p2-ink-2) !important;
}

body.p2 .osci-showcase .osci-prose i { color: var(--p2-muted); }

body.p2 .osci-showcase .osci-action {
  margin: 0 0 18px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--p2-night-line);
  border-radius: var(--p2-radius) !important;
  background: var(--p2-night-2) !important;
  color: var(--p2-on-night) !important;
  font: 400 12.5px/1.6 var(--p2-mono) !important;
}

body.p2 .osci-showcase .osci-items li {
  padding: 12px 0;
  border-top: 1px solid var(--p2-line);
  font: 400 13.5px/1.45 var(--p2-display) !important;
  color: var(--p2-ink-2) !important;
}

body.p2 .osci-showcase .osci-items li:first-child { border-top: 0; padding-top: 0; }

body.p2 .osci-showcase .osci-items strong { font-weight: 600; color: var(--p2-ink) !important; }

body.p2 .osci-showcase .osci-items em {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font: 400 12px/1.4 var(--p2-mono) !important;
  font-style: normal !important;
  color: var(--p2-muted) !important;
}

body.p2 .osci-showcase .osci-items small {
  margin-top: 4px;
  font: 400 13px/1.45 var(--p2-display) !important;
  color: var(--p2-muted) !important;
}

/* pass / partial / fail colours are data and stay; only the face changes */
body.p2 .osci-showcase .osci-item-score {
  min-width: 3em;
  font: 600 13px/1 var(--p2-mono) !important;
  font-variant-numeric: tabular-nums;
}

body.p2 .osci-showcase .osci-error,
body.p2 .osci-showcase .osci-loading { font: 400 13px/1.4 var(--p2-mono); color: var(--p2-muted) !important; }