/* Section lab: the review bar, the shared nav and the title case switch. Every value is an ich-2027 token. */

:root {
  /* The references set their titles far past the web display step: these are poster sizes derived from it. */
  --type-poster: clamp(var(--text-h1), min(11vw, 15svh), calc(var(--text-display) * 1.9));
  --type-poster-sm: clamp(var(--text-h1), min(9.6vw, 16svh), calc(var(--text-display) * 1.4));
  --lab-bar-h: calc(var(--ctl-md) + var(--sp-inset-xs) * 2);
}

/* Phones: the poster steps are set by the longest word ("Conference") across the width, not by the ramp. */
@media (max-width: 599px) {
  :root {
    --type-poster: 14vw;
    --type-poster-sm: 14vw;
  }
}

/* Titles follow the site's standing ALL CAPS unless the lab bar says otherwise. */
.poster-title {
  font-family: var(--font-display);
  letter-spacing: var(--text-display--letter-spacing);
  line-height: var(--text-display--line-height);
  text-transform: uppercase;
  font-feature-settings: 'case' 1;
}

[data-case='sentence'] .poster-title {
  text-transform: none;
  font-feature-settings: normal;
}

/* ---- Lab bar: review chrome, sits above the section and is not part of it ---- */
.lab-bar {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-inset-xs);
  min-height: var(--lab-bar-h);
  padding: var(--sp-inset-xs) var(--lay-gutter);
  background: var(--palette-jodhpuri-blue);
  color: var(--palette-lapis-blue);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

.lab-bar__name {
  margin-inline-end: var(--sp-inset-md);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1;
}

.lab-bar__pages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-inset-xs) var(--sp-inset-md);
  margin-inline-end: var(--sp-inset-md);
  font-family: var(--font-display);
  font-size: var(--text-lead);
  line-height: 1;
}

.lab-bar__pages a {
  color: inherit;
}

.lab-bar__pages a[aria-current='page'] {
  text-decoration-color: currentColor;
}

.lab-bar button {
  min-height: var(--ctl-md);
  padding-inline: var(--sp-inset-sm);
  border-width: 0;
  border-radius: var(--r-containers);
  background: var(--background);
  color: var(--palette-lapis-blue);
  font: inherit;
  cursor: pointer;
}

.lab-bar button[aria-pressed='true'] {
  background: var(--palette-lapis-blue);
  color: var(--inverse-foreground);
}

.lab-bar__note {
  margin-inline-start: var(--sp-inset-md);
}

/* "." hides the bar; the variant then fills the whole viewport. */
[data-lab-bar='hidden'] {
  --lab-bar-h: 0vh;
}

[data-lab-bar='hidden'] .lab-bar {
  display: none;
}

.lab-bar__end {
  margin-inline-start: auto;
}

/* ---- Variant frame: each variant fills the viewport under the lab bar ---- */
.variant {
  --ink: var(--foreground);
  position: relative;
  min-height: calc(100svh - var(--lab-bar-h));
  overflow: clip;
}

.variant[hidden] {
  display: none;
}

/* Full pages (full-N.html): the hero keeps its viewport; every band after it is as tall as its content. */
.full-page .variant ~ .variant,
.mix-slot ~ .mix-slot .variant {
  min-height: auto;
}

/* Mixer bar: one chip per section naming its current pick; the chip of the section in view is pressed. */
.mix-bar__sections {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-inset-xs);
}

.mix-bar__sections b {
  font-weight: inherit;
  font-variant-numeric: tabular-nums;
}

/* Phones: the bar keeps to two lines, the pages and one row of chips that scrolls sideways. */
@media (max-width: 599px) {
  .mix-bar {
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: stretch;
  }

  .mix-bar .lab-bar__pages {
    flex-wrap: nowrap;
    overflow-x: auto;
    font-size: var(--text-small);
  }

  .mix-bar__sections {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .mix-bar .lab-bar__pages a,
  .mix-bar__sections button {
    flex: none;
    white-space: nowrap;
  }

  .mix-bar .lab-bar__note,
  .mix-bar .lab-bar__end {
    display: none;
  }
}

.variant__ref {
  display: none;
  position: absolute;
  inset: auto auto 0 0;
  z-index: 80;
  padding: var(--sp-inset-xs) var(--sp-inset-sm);
  background: var(--palette-jodhpuri-blue);
  color: var(--palette-lapis-blue);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
}

/* ---- Grounds ---- */
.ground-crimson {
  background: var(--primary);
  color: var(--primary-foreground);
  --ink: var(--primary-foreground);
  --loud: var(--palette-dusty-rose);
  --quiet: var(--palette-rose-tint);
  --focus: var(--primary-foreground);
}

.ground-lapis {
  background: var(--palette-lapis-blue);
  color: var(--inverse-foreground);
  --ink: var(--inverse-foreground);
  --loud: var(--palette-jodhpuri-blue);
  --quiet: var(--palette-jodhpuri-blue);
  --focus: var(--inverse-foreground);
}

.ground-paper {
  background: var(--background);
  color: var(--foreground);
  --ink: var(--foreground);
  --loud: var(--foreground);
  --quiet: var(--foreground);
  --focus: var(--foreground);
}

.ground-jodhpuri {
  background: var(--palette-jodhpuri-blue);
  color: var(--palette-lapis-blue);
  --ink: var(--palette-lapis-blue);
  --loud: var(--palette-lapis-blue);
  --quiet: var(--palette-lapis-blue);
  --focus: var(--palette-lapis-blue);
}

/* ---- Shared nav row (cloned from #nav-template into each [data-nav]) ---- */
.lab-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-stack-md);
  padding: var(--sp-inset-md) var(--lay-gutter);
  font-size: var(--type-body);
}

/* The wordmark: plain Switzer (Ahmed, 26 Oct). No motifs or ornaments in this lab. */
.lab-nav__brand {
  font-family: var(--font-sans);
  font-size: var(--text-lead);
  line-height: 1;
  white-space: nowrap;
  text-decoration-line: none;
}

.lab-nav__links {
  display: flex;
  justify-content: center;
  gap: var(--sp-inset-lg);
}

.lab-nav__links a {
  color: inherit;
}

.lab-nav .btn {
  background: var(--ink);
  color: var(--ground, var(--primary));
}

.ground-crimson .lab-nav .btn {
  --ground: var(--primary);
}

.ground-lapis .lab-nav .btn {
  --ground: var(--palette-lapis-blue);
}

.ground-paper .lab-nav .btn {
  --ground: var(--background);
}

/* Spread variant: links spaced across the width, the way the evosoft reference lays its menu. */
.lab-nav--spread .lab-nav__links {
  justify-content: space-between;
  padding-inline: var(--sp-section);
}

@media (max-width: 899px) {
  .lab-nav {
    grid-template-columns: 1fr auto;
  }

  .lab-nav__links {
    display: none;
  }
}