/* =========================================================
   PROJECT DETAIL PAGES — METRIC GRID + RESULTS TABLE
   ========================================================= */

/* Page-level accent: set --accent-rgb on the body for project subpages so
   the chips below can pick up a project-matching glow. Falls back to blue. */
.project-page--teal {
  --accent-rgb: 34, 211, 238;
}
.project-page--blue {
  --accent-rgb: 99, 179, 237;
}
.project-page--green {
  --accent-rgb: 30, 158, 150;
}
.project-page--amber {
  --accent-rgb: 246, 173, 85;
}
.project-page--red {
  --accent-rgb: 252, 129, 129;
}
.project-page--purple {
  --accent-rgb: 183, 148, 244;
}
.project-page--indigo {
  --accent-rgb: 129, 140, 248;
}
.project-page--gold {
  --accent-rgb: 246, 213, 92;
}
.project-page--lime {
  --accent-rgb: 163, 230, 53;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
  margin: 0.5rem 0 0.25rem;
  padding: 0;
  list-style: none;
}

.metric {
  position: relative;
  padding: 0.85rem 0.95rem 0.9rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb, 99, 179, 237), 0.1) inset,
    0 6px 16px rgba(0, 0, 0, 0.18);
}

.metric__value {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.96);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.metric__label {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(203, 213, 224, 0.85);
}

.metric__hint {
  display: block;
  margin-top: 0.45rem;
  font-size: var(--fs-xs);
  color: rgba(160, 174, 192, 0.92);
  line-height: 1.4;
}

.results-tableWrap {
  overflow-x: auto;
  margin: 0.6rem 0 1rem;
}

.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.results-table caption {
  caption-side: top;
  text-align: left;
  margin-bottom: 0.4rem;
  color: #cbd5e0;
  font-size: var(--fs-sm);
}

.results-table th,
.results-table td {
  padding: 0.45rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.results-table thead th {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.04);
}

.results-table tbody tr:last-child td {
  border-bottom: none;
}

.results-table td + td,
.results-table th + th {
  text-align: right;
}

/* Inline code references used inside project-page body copy.
   :not([class]) avoids touching the classed <code> inside .source-viewer
   blocks on the blackjack and ortega-exposure pages. */
.section code:not([class]) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  padding: 0.05rem 0.35rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
}

/* =========================================================
   PROJECT DETAIL PAGES — IN-PAGE SECTION NAV (PILL ROW)

   Pins flush under the sticky primary nav so the section list stays
   reachable on the long pages (drone/star run to eleven sections). One
   row always: the pills scroll sideways rather than wrapping, which
   keeps the bar a predictable height for the scroll offsets below.

   The frosted tray is deliberately edgeless. Its tint and blur match
   .site-nav exactly so the pinned pair reads as one pane of glass rather
   than two stacked bars, and a mask dissolves all three free edges — the
   two vertical ones that would otherwise cut hard lines down the text
   column, and the bottom one that would otherwise slice body copy on a
   crisp border. Pills scrolling out of the row fade through the same
   side ramps instead of being chopped mid-glyph.
   ========================================================= */
.section-nav {
  position: sticky;
  top: var(--site-nav-h);
  z-index: 50; /* above page content; the primary nav's 60 still wins */
  display: flex;
  flex-wrap: nowrap;
  gap: 0.15rem;
  /* Bleed out to the container's padding edges so the backdrop covers the
     full content width, then pad the same amount back in. The deeper bottom
     pad reserves room for the fade ramp so it never eats into the pills. */
  margin: 1.2rem -1.5rem 0;
  padding: 0.45rem 1.5rem 0.7rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: rgba(13, 15, 22, 0.72);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  /* Fallback shape for engines without mask support — there the tray keeps
     hard edges, so give it the rounded bottom it used to have. */
  border-radius: 0 0 14px 14px;
  /* Side ramps start exactly at the padding edge, so at full width (nothing
     scrolled) they land on empty gutter and leave every pill at full
     strength. Intersecting the two layers fades the corners of both. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%),
    linear-gradient(180deg, #000 calc(100% - 11px), transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%),
    linear-gradient(180deg, #000 calc(100% - 11px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.section-nav::-webkit-scrollbar {
  display: none;
}

/* Unpinned, the bar is just a chip row sitting in the page flow: no tray, no
   blur, nothing for the eye to catch on before it is doing any work. site.js
   toggles this as the bar meets the primary nav (setUpSectionNavSpy). The
   default above is the pinned look on purpose — with JS off the tray stays on
   and body copy never scrolls visibly behind the pills. */
.section-nav.is-unpinned {
  background: rgba(13, 15, 22, 0);
  backdrop-filter: blur(0) saturate(1);
  -webkit-backdrop-filter: blur(0) saturate(1);
}

/* site.js adds .has-spy one frame after it settles the first pinned state.
   Gating the cross-fade on it keeps a page that loads at the top from
   animating the tray away on arrival. */
.section-nav.has-spy {
  transition:
    background 260ms ease,
    backdrop-filter 260ms ease,
    -webkit-backdrop-filter 260ms ease;
}

.section-nav a {
  flex: none; /* never let a long label squeeze in a nowrap row */
  white-space: nowrap;
  font-size: var(--fs-xs);
  /* Slightly tighter than the old wrapping row so the longest page (eleven
     pills on drone/star) still fits one un-scrolled row at full width. */
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  color: rgba(203, 213, 224, 0.8);
  text-decoration: none;
  /* No resting chrome: eleven outlined chips read as a wall of boxes. The
     border stays present but transparent so gaining one on hover doesn't
     resize the pill and shuffle the rest of the row sideways. */
  background: transparent;
  border: 1px solid transparent;
  transition:
    background 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    transform 120ms ease;
}

.section-nav a:hover,
.section-nav a:focus-visible {
  background: rgba(var(--accent-rgb, 99, 179, 237), 0.16);
  color: #fff;
  border-color: rgba(var(--accent-rgb, 99, 179, 237), 0.34);
}

.section-nav a:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb, 99, 179, 237), 0.75);
  outline-offset: 2px;
}

.section-nav a:active {
  transform: translateY(1px);
}

/* Section currently under the reading line. site.js sets .is-current and
   aria-current as the page scrolls (setUpSectionNavSpy). */
.section-nav a.is-current {
  background: rgba(var(--accent-rgb, 99, 179, 237), 0.22);
  border-color: rgba(var(--accent-rgb, 99, 179, 237), 0.5);
  color: #fff;
}

/* Smooth-scroll for in-page anchors, with reduced-motion guard. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Scroll offset so section headings clear the top edge after a jump. Adds to
   html's scroll-padding-top. On project pages the sticky .section-nav sits
   below the primary nav too, so those pages need the taller offset. */
.section[id],
.tl-dr[id] {
  scroll-margin-top: 1rem;
}

.project-page .section[id],
.project-page .tl-dr[id] {
  scroll-margin-top: 3.25rem;
}

/* =========================================================
   PROJECT DETAIL PAGES — "AT A GLANCE" SUMMARY CARD
   Mirrors the headline metric from #results so the result
   numbers are visible before any scrolling.
   ========================================================= */
.tl-dr {
  margin: 1.2rem 0 0.4rem;
  padding: 1rem 1.15rem 1.1rem;
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(var(--accent-rgb, 99, 179, 237), 0.08),
    rgba(255, 255, 255, 0.02)
  );
  border: 1px solid rgba(var(--accent-rgb, 99, 179, 237), 0.22);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.tl-dr__label {
  margin: 0 0 0.55rem;
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(var(--accent-rgb, 99, 179, 237), 0.92);
}

.tl-dr__line {
  margin: 0.7rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(203, 213, 224, 0.88);
}

/* Compact grid variant — slightly smaller metric values, tighter padding. */
.metrics-grid--compact {
  gap: 0.55rem;
  margin: 0;
}
.metrics-grid--compact .metric {
  padding: 0.7rem 0.85rem 0.75rem;
}
.metrics-grid--compact .metric__value {
  font-size: var(--fs-xl);
}
.metrics-grid--compact .metric__label {
  font-size: var(--fs-2xs);
  margin-top: 0.2rem;
}

/* =========================================================
   PROJECT DETAIL PAGES — NEXT-PROJECT CROSS-LINK CARD
   ========================================================= */
.next-project {
  margin-top: 2rem;
}

.next-project__card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.15rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: inherit;
  text-decoration: none;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 120ms ease;
}

.next-project__card:hover,
.next-project__card:focus-visible {
  background: rgba(var(--accent-rgb, 99, 179, 237), 0.1);
  border-color: rgba(var(--accent-rgb, 99, 179, 237), 0.4);
  outline: none;
}

.next-project__card:active {
  transform: translateY(1px);
}

.next-project__label {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(160, 174, 192, 0.92);
}

.next-project__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

/* =========================================================
   PROJECT DETAIL PAGES — FIGURES, MEDIA GALLERY, VIDEO
   ========================================================= */
.project-figure {
  margin: 0.85rem 0 0.25rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}

.project-figure__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #fff;
}

.project-figure figcaption {
  margin-top: 0.6rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(203, 213, 224, 0.88);
}

/* Video player + its fallback link. aspect-ratio keeps the box shape even
   before video metadata loads or if the source fails. */
.project-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 540px;
  border-radius: 8px;
  background: #000;
  outline: 1px solid rgba(255, 255, 255, 0.08);
}

.project-figure__fallback {
  display: inline-block;
  margin-top: 0.55rem;
  font-size: var(--fs-xs);
  color: rgba(160, 174, 192, 0.92);
}

.project-figure__fallback a {
  color: rgba(99, 179, 237, 1);
}

/* setUpScrollableRegions() in site.js gives a wrapper tabindex="0" for as long
   as it actually overflows — a scroll box only a pointer can reach strands
   keyboard users with the off-screen columns (WCAG 2.1.1). While it holds that
   tab stop it needs a focus ring of its own; without one the stop is invisible.
   The accent tracks the page, so this matches the .section-nav pills. */
.results-tableWrap:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb, 99, 179, 237), 0.75);
  outline-offset: 3px;
  border-radius: 8px;
}