/* ==========================================================================
   Netchex Who's In & Out — Select Work spotlight
   (Figma: DaveDoesDesigns pu97KqseHKGCWses8YJaH5 — node 823:42
   "Select Work - In & Out Dashboard": hero 823:238, overview 823:240,
   mobile carousel 823:273, desktop carousel 848:259)

   Layout: full-width photo hero under the nav, overview band with a
   bordered metadata card, then two sections whose screens run as
   touch-enabled snap sliders at EVERY width — full-bleed to the right,
   aligned to the 1184px content column. At tablet/desktop each section
   header carries a static control row on the lede line: [prev][next]
   [counter] [copy link]; the counter reads the leftmost snapped slide.
   Mobile keeps the bare snap slider (the LWF pattern). Portrait phone
   slides keep the 804/1748 ratio and shrink with the viewport; the
   landscape dashboard slides instead go one-up (~88% of the viewport)
   below tablet so they stay readable, with the next slide peeking at
   the right edge. More Select Work tiles and the always-dark contact
   footer close the page.

   Theming: every color routes through a --nio-* token; the dark block
   follows the la-wallet mapping (white→#1e0c32, #fbfafd→#0e011c,
   accents→#b679ff). The app screens are light in both themes by
   design. Breakpoints: mobile ≤640 / tablet ≤1024 / desktop ≥1025.
   ========================================================================== */

.nio {
  --nio-bg: #fbfafd;
  --nio-surface: #ffffff;
  --nio-fg: #1e0c32;
  --nio-muted: #5e5072;
  --nio-subtle: #978aaa;      /* step labels */
  --nio-label: #a899b9;       /* metadata card labels */
  --nio-accent: #6a00d1;      /* eyebrows, active states */
  --nio-border: #e9e5f0;      /* card + screen borders */
  --nio-tag-border: #d2d2d2;
  --nio-chip-bg: #ffffff;
  --nio-chip-fg: #6a00d1;
  --nio-chip-border: #e9e5f0;
  --nio-media-bg: #f4f1f8;    /* dashboard slide ground (Figma 848:291) */

  background: var(--nio-bg);
  font-family: var(--font-body);
  color: var(--nio-fg);
}

:root[data-theme='dark'] .nio {
  --nio-bg: #0e011c;
  --nio-surface: #1e0c32;
  --nio-fg: #ffffff;
  --nio-muted: #b3a0c8;
  --nio-subtle: #a79cb7;
  --nio-label: #a79cb7;
  --nio-accent: #b679ff;
  --nio-border: #3d3350;
  --nio-tag-border: #3d3350;
  --nio-chip-bg: #b679ff;
  --nio-chip-fg: #1e0c32;
  --nio-chip-border: transparent;
  --nio-media-bg: #1e0c32;
}

/* Shared content column (1184 at full width, like the case studies) */
.nio-container {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px;
}

/* Visually hidden (the counter's live region) */
.nio-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Hero: full-width photo band under the floating nav
   -------------------------------------------------------------------------- */
.nio-hero {
  margin: 0;
  height: min(37.5vw, 720px);
  min-height: 480px;
  overflow: hidden;
  background: #6a00d1; /* the Figma band's purple, shown while the photo loads (both themes) */
}

/* The laptop dashboard is the hero at every width. hero.jpg (1920x720) is
   authored at the desktop band's ratio, so desktop shows it uncropped.
   Unlike the LWF hero (a small phone that needs scale(1.2) to stay the
   focal size), the laptop screen already fills the frame, so tablet just
   cover-crops toward it with NO extra zoom (the 3/2 crop lands on the
   whole laptop), and phones swap in hero-mobile.jpg, a dedicated 8:9
   crop of the same scene (the <picture> source in index.html). */
.nio-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* --------------------------------------------------------------------------
   Overview band: details left, bordered metadata card right
   -------------------------------------------------------------------------- */
.nio-overview {
  padding: 48px 0;
  background: var(--nio-bg);
}

.nio-overview__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 48px;
  align-items: start;
}

.nio-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.nio-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.125rem;
  line-height: 1.2;
  letter-spacing: 0.612px;
  color: var(--nio-fg);
}

.nio-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nio-tag {
  padding: 4px 8px;
  border: 1.5px solid var(--nio-tag-border);
  border-radius: 64px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--nio-muted);
}

.nio-overview__body {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 24px;
  color: var(--nio-muted);
}

.nio-meta-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--nio-border);
  border-radius: 8px;
  background: var(--nio-surface);
}

.nio-meta-card dt {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--nio-label);
}

.nio-meta-card dd {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--nio-fg);
}

/* --------------------------------------------------------------------------
   Screen sections: alternating surfaces, header with controls, snap slider
   -------------------------------------------------------------------------- */
.nio-section { padding: 96px 0; }
.nio-section--bg { background: var(--nio-bg); }
.nio-section--surface { background: var(--nio-surface); }

.nio-section__head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nio-eyebrow {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--nio-accent);
}

.nio-headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.125rem;
  line-height: 1.2;
  letter-spacing: 0.612px;
  color: var(--nio-fg);
}

.nio-lede {
  margin: 0;
  max-width: 720px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--nio-muted);
}

/* --------------------------------------------------------------------------
   Control row (tablet/desktop; hidden <=640 like LWF's cluster):
   [prev][next] [01 / 07] [copy link], riding the right end of the intro
   paragraph's line. The lede and the row share .nio-section__meta:
   space-between, bottoms aligned; the paragraph keeps its own max-width.
   On tablet the pair would crowd, so the row stacks below the paragraph,
   flush right. Mobile keeps the bare snap slider.
   -------------------------------------------------------------------------- */
.nio-section__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.nio-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

/* chevron pair: 4px apart (Figma 830:89) */
.nio-controls__arrows {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* counter: leftmost snapped slide over the total, zero-padded */
.nio-counter {
  margin: 0;
  width: 48px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  color: var(--nio-muted);
  font-variant-numeric: tabular-nums;
}

/* Circular buttons in the control row (chevrons + copy link) */
.nio-arrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--nio-chip-border);
  border-radius: 50%;
  background: var(--nio-chip-bg);
  color: var(--nio-chip-fg);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(14, 1, 28, 0.12);
  transition: transform 200ms var(--ease-out), opacity 200ms ease;
}

.nio-arrow svg { width: 16px; height: 16px; }

.nio-arrow:hover:not([disabled]),
.nio-arrow:focus-visible:not([disabled]) { transform: translateY(-1px); }

.nio-arrow[disabled] {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

/* Copy-link tooltip: dark chip above the button, 300ms linger, desktop
   pointers only. Right-aligned — the control row ends at the content
   edge. (The LWF cluster's tooltip, verbatim.) */
.nio-arrow[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  padding: 7px 10px;
  border-radius: 6px;
  background: #0e011c;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(14, 1, 28, 0.35);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .nio-arrow[data-tooltip]:hover::after,
  .nio-arrow[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 300ms;
  }
}

/* copy confirmation shows immediately on every device */
.nio-arrow.is-copied::after {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms;
}

/* --------------------------------------------------------------------------
   Slider: native scroll-snap at every width; full-bleed right, aligned to
   the content column left. The track is intentionally wider than the
   column, so the next slide is cropped off the right edge on load.
   -------------------------------------------------------------------------- */
.nio-track {
  display: flex;
  gap: 48px;
  margin-top: 48px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* pad the scroller to the 1184 content edge; 100% here is the
     viewport-wide track itself */
  padding-inline: max(48px, calc((100% - 1184px) / 2));
  scroll-padding-inline: max(48px, calc((100% - 1184px) / 2));
  /* breathing room so nothing clips focus rings */
  padding-top: 4px;
  padding-bottom: 8px;
}

.nio-track::-webkit-scrollbar { display: none; }

.nio-screen {
  margin: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Portrait phone screens (Figma 826:1366): 260 wide, 804/1748 */
.nio-section--mobile .nio-screen { flex: 0 0 260px; }
.nio-section--mobile .nio-screen__media {
  aspect-ratio: 804 / 1748;
  border-radius: 32px;
}

/* Landscape dashboard screens (Figma 848:289): 747x560, tighter radius */
.nio-section--desktop .nio-screen { flex: 0 0 747px; }
.nio-section--desktop .nio-screen__media {
  aspect-ratio: 747 / 560;
  border-radius: 8px;
  background: var(--nio-media-bg);
}

.nio-screen__media {
  position: relative;
  overflow: hidden;
  background: var(--nio-surface);
}

/* 1px inner stroke over the screen art, in the border token — painted as
   an overlay ring so it sits inside the image edge (Figma slide borders) */
.nio-screen__media::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--nio-border);
  border-radius: inherit;
  pointer-events: none;
}

.nio-screen__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nio-screen__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nio-screen__label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--nio-subtle);
}

.nio-screen__caption {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--nio-muted);
}

/* Drag affordance: mouse users can grab the track; snap is suspended
   while dragging so it can't fight the pointer (netchex-in-out.js
   re-snaps) */
@media (hover: hover) and (pointer: fine) {
  .nio-track { cursor: grab; }
}

.nio-track.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

/* --------------------------------------------------------------------------
   Dashboard lightbox: tapping a desktop-dashboard slide opens the full-res
   capture over a dark backdrop, fit to the viewport width (at 747px wide
   the screens are unreadable on a phone). Pan/zoom is transform-driven
   (netchex-in-out.js owns the gesture math); chrome is just a close
   button, prev/next chips, and a once-per-session "Pinch to zoom" pill
   on touch devices. z-index 500 = the cyrano gallery lightbox layer
   (the sitewide copyright tip sits above at 600 by design).
   -------------------------------------------------------------------------- */
.nio-section--desktop .nio-screen__media { cursor: zoom-in; }

html.nio-lightbox-lock { overflow: hidden; }

.nio-lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(14, 1, 28, 0.94);
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity 220ms ease;
}

.nio-lightbox.is-in { opacity: 1; }

.nio-lightbox__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
}

.nio-lightbox__img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  transform-origin: 0 0;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-in;
}

.nio-lightbox__stage.is-zoomed .nio-lightbox__img { cursor: grab; }

.nio-lightbox__close,
.nio-lightbox__nav {
  position: fixed;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(30, 12, 50, 0.65);
  color: #ffffff;
  cursor: pointer;
  transition: background-color 200ms ease, opacity 200ms ease;
}

.nio-lightbox__close:hover,
.nio-lightbox__close:focus-visible,
.nio-lightbox__nav:hover:not([disabled]),
.nio-lightbox__nav:focus-visible:not([disabled]) { background: rgba(30, 12, 50, 0.92); }

.nio-lightbox__close:focus-visible,
.nio-lightbox__nav:focus-visible {
  outline: 2px solid #b679ff;
  outline-offset: 3px;
}

.nio-lightbox__close { top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; }
.nio-lightbox__close svg { width: 20px; height: 20px; }

.nio-lightbox__nav { top: 50%; transform: translateY(-50%); }
.nio-lightbox__nav svg { width: 16px; height: 16px; }
.nio-lightbox__nav--prev { left: 12px; }
.nio-lightbox__nav--next { right: 12px; }

.nio-lightbox__nav[disabled] {
  opacity: 0.35;
  cursor: default;
}

@media (max-width: 640px) {
  /* keep the chips off the fit-width image: bottom corners on phones */
  .nio-lightbox__nav { top: auto; transform: none; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .nio-lightbox__nav--prev { left: 16px; }
  .nio-lightbox__nav--next { right: 16px; }
}

.nio-lightbox__hint {
  position: fixed;
  z-index: 2;
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}

.nio-lightbox__hint.is-shown { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .nio-lightbox,
  .nio-lightbox__img,
  .nio-lightbox__hint { transition: none !important; }
}

/* --------------------------------------------------------------------------
   More Select Work: the homepage .sw-grid / .sw-tile system verbatim (see
   styles.css), wrapped in the case-study .xm band so the section's bottom
   corners curve into the footer fill (case-study.css owns .xm-wrap / .xm /
   .xm__inner and the light-mode 0 0 30px 30px radius). Only the two band
   tokens are set here, since .xm's tokens are otherwise scoped to
   .csp-shell. Tiles are rendered by netchex-in-out.js — three random
   pieces, excluding the one being viewed.
   -------------------------------------------------------------------------- */
.nio-explore-wrap {
  --xm-behind: #0e011c; /* the footer's fill, both themes */
  --xm-band-bg: #ffffff;
}

:root[data-theme='dark'] .nio-explore-wrap { --xm-band-bg: #0e011c; }

/* --------------------------------------------------------------------------
   Tablet ≤1024: single column overview with a 2x2 metadata card; phone
   slides step to 220; dashboard slides go one-up (~88% of the viewport)
   with the next slide peeking at the right edge; the control row stacks
   below the lede, flush right
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .nio-hero {
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  /* the 3/2 cover crop already frames the whole laptop; no zoom */
  .nio-hero img { object-position: 50% 50%; }

  .nio-overview__inner { grid-template-columns: minmax(0, 1fr); }

  .nio-meta-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    row-gap: 24px;
  }

  .nio-section { padding: 80px 0; }

  .nio-section__meta {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .nio-controls { align-self: flex-end; }

  /* dashboard track only: the phone track keeps the base 260px slides
     and 48px gap at tablet, exactly like the LWF sliders */
  .nio-section--desktop .nio-track { gap: 32px; }

  /* one dashboard up, ~10px of the next peeking past the right edge.
     100% is the track's content box (viewport minus 2x48 padding, and
     minus any classic scrollbar - 100vw would lose the peek there), so
     +6px = viewport - pad (48) - gap (32) - peek (10) */
  .nio-section--desktop .nio-screen { flex-basis: calc(100% + 6px); }

  /* More Select Work stacks below the desktop grid: the bare .sw-grid
     has no gap outside the homepage carousel, so the tiles were sitting
     flush - give the stack the desktop grid's even 24px rhythm */
  .nio-explore-wrap .sw-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
}

/* --------------------------------------------------------------------------
   Mobile ≤640: 24px gutters, 200px phone slides, labels rise in as their
   slide snaps into view (netchex-in-out.js toggles .is-snapped)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .nio-container { padding-left: 24px; padding-right: 24px; }

  .nio-controls { display: none; }
  .nio-section__meta { display: block; }

  .nio-hero { aspect-ratio: 8 / 9; }
  /* phones load hero-mobile.jpg (880x990), a dedicated 8:9 crop that
     matches this band exactly - no repositioning needed */
  .nio-hero img { object-position: 50% 50%; }

  .nio-title { font-size: 1.75rem; }
  .nio-overview__body { font-size: 0.9375rem; line-height: 1.5; }
  .nio-meta-card { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .nio-meta-card dd { font-size: 1rem; }

  .nio-section { padding: 72px 0; }
  .nio-headline { font-size: 1.625rem; line-height: 1.15; }
  .nio-lede { font-size: 1rem; line-height: 1.45; }
  .nio-screen__label { font-size: 0.75rem; }

  .nio-track {
    gap: 16px;
    margin-top: 40px;
    padding-inline: 24px;
    scroll-padding-inline: 24px;
  }

  .nio-screen { gap: 20px; }
  .nio-screen__caption { font-size: 0.9375rem; } /* 16.4px mobile floor */

  /* one full phone screen with the next cropped in, the LWF mobile value */
  .nio-section--mobile .nio-screen { flex-basis: clamp(240px, 78vw, 306px); }
  .nio-section--mobile .nio-screen__media { border-radius: 24px; }

  /* one dashboard up: track content box (viewport minus 2x24 padding)
     minus 2px = viewport - pad (24) - gap (16) - peek (10) */
  .nio-section--desktop .nio-track { gap: 16px; }
  .nio-section--desktop .nio-screen { flex-basis: calc(100% - 2px); }

  /* More Select Work on phones: just two pieces (Dave 2026-09-19) */
  .nio-explore-wrap .sw-grid .sw-tile:nth-child(n + 3) { display: none; }

  .nio-screen__text {
    opacity: 0.35;
    transform: translateY(8px);
    transition: opacity 400ms ease, transform 400ms var(--ease-out);
  }

  .nio-screen.is-snapped .nio-screen__text {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nio-screen__text { transition: none; }
  .nio-screen__text {
    opacity: 1 !important;
    transform: none !important;
  }
}